#carousel {
  position: relative;
/*  background-color: rgba(0, 51, 153, 0.3);*/
  padding: 50px 0;
}
#carousel .prev,
#carousel .next {
  position: absolute;
  top: calc(50% - 19px);
  z-index: 3000;
}
#carousel .prev:hover,
#carousel .next:hover {
  cursor: pointer;
}
#carousel .prev {
  left: -15%;
}
#carousel .next {
  right: -15%;
}
#carousel .cycle-center {
  max-width: 940px !important;
  margin: 0 auto;
  min-height: 220px;
}
#carousel .cycle-carousel-wrap {
  margin: 0 -10px;
  height: 100%;
}
#carousel .cycle-carousel-wrap .cycle-slide {
  padding: 0 20px;
  height: 100%;
}
#carousel .cycle-carousel-wrap .cycle-slide.element {
  text-decoration: none;
  display: block;
  margin: 0;
  padding: 15px;
  height: 100%;
}
#carousel .cycle-carousel-wrap .cycle-slide.element:hover div {
  color: #cc0033;
}
#carousel .cycle-carousel-wrap .cycle-slide.element div {
  display: flex;
  align-items: flex-end;
  padding: 12px;
  background-position: center;
  background-size: cover;
  height: 100%;
  border: 1px solid #cacaca;
  color: #003399;
  font-weight: bold;
}
#carousel .more_button{
  background-color: var(--primary-color);
  color: #ffffff;
  border: 0;
  border-radius: 0;
  position: relative;
  margin-left: 10px;
  z-index: 0;
  text-decoration: none;
  padding: 5px 15px;
  width: fit-content;
  cursor: pointer;
}

#carousel .more_button:before {
  content: "";
  background-color: #858cc3;
  position: absolute;
  left: -15px;
  top: 0;
  width: 15px;
  height: 100%;
  z-index: -1;
}

#carousel .more_button:hover {
  background-color: rgba(0, 51, 153, 0.7);
  color: #ffffff;
}

#carousel .more_button:hover:before {
  background-color: rgba(133, 140, 195, 0.7);
}


/*19-05-25 css*/
.frame-type-mask_heroslider #carousel{padding: 0;}
.heroslider .cycle-slide .itembox{display:block !important;padding: 0 !important;border: 0 !important;}
.heroslider .cycle-slide img{width:100% !important;object-fit: cover;}
.heroslider .cycle-slide iframe{width:100% !important;height:600px;}
.heroslider .element.cycle-slide{display: block !important;width:100%;}
.heroslider .overlaybox{padding: 50px;bottom: -50px !important;top: auto !important;transform: translateY(0) !important; left: 0;background-color:rgba(45, 46, 135, .96);position: absolute;width: calc(50% - 140px);}
.heroslider .overlaybox h1,
.heroslider .overlaybox h2,
.heroslider .overlaybox h3,
.heroslider .overlaybox h4,
.heroslider .overlaybox h5,
.heroslider .overlaybox h6,
.heroslider .overlaybox p
{font-size:2.5rem;color:#ffffff;font-weight: bold;}
.heroslider .overlaybox p{font-size:14px;color:#ffffff;}
.heroslider .overlaybox a{margin:10px 0 0 10px; position:relative;background-color: #ffffff; color:#003399;border: 0;border-radius: 0; z-index: 0;}
.heroslider .overlaybox a:after{content: "";background-color: rgba(255, 255, 255, 0.8);position: absolute;left: -10px;top: 0;width: 100%;height: 100%;z-index: -1;}
.heroslider .overlaybox .box-inside{max-width: 585px;float: right;width: 100%;}
.heroslider .overlaybox  dfn {
  font-style: normal;
}
@media (max-device-width: 1024px) {
  #carousel .next {
    right: 40px;
  }
}

@media(max-width:1800px){
  #carousel .prev {left: -8%;}
  #carousel .next {right: -8%;}
}
@media(max-width:1600px){
  #carousel{width:90%;margin: 0 auto;}
  .frame-type-mask_heroslider #carousel{width:100%;}
}
@media(max-width:1400px){
  #carousel .col-md-4 img{max-width:100%;}
}

@media(max-width:1200px){
  .heroslider .overlaybox{width: calc(75% - 140px);}
}

@media(max-width:991px){
  .heroslider .overlaybox{width: calc(100% - 140px);}
}

@media(max-width:767px){
  .heroslider .overlaybox{padding:20px;width:100%;bottom:-160px;}
  .heroslider .overlaybox h3{font-size: 30px !important;}
  .heroslider .cycle-slide iframe{height:380px;}
  .heroslider .overlaybox .box-inside {max-width: 100%;float: unset;}
}