@charset "utf-8";
/* CSS Document */

.banner {
    position: relative; overflow: hidden;
}
.banner .container { max-width: 1680px; }
.bannertext {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
/*    z-index: 1;*/
    padding: 192px 0px;
}

.bnrtxt {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.border-img  { position: absolute;}

.webox {
    max-width: 1130px;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    justify-content: space-between;
   
}
.bnr_left {padding-left: 45px; position: relative;}
.bnr_right { }

.bannertit {
    font-size: 40px;
    line-height: 56px;
    text-transform: uppercase;
    color: #383b3c;
    position: relative;
    padding-bottom: 27px; margin-bottom: 20px;
    font-family: 'Eurostile LT Pro Unicode'; letter-spacing: 0.2px;
}
/*.bannertit:after { position: absolute; content: ""; background: #fff; width: 309px; bottom: 0; left: 0; height: 3px;}*/

.bnr_smlltit {
    color: #9e1436;
    letter-spacing: 0.8px;
    font-size: 16px;
    text-align: left;
    line-height: 30px;
  display: block;
    text-transform: uppercase;
    font-weight: 600;
    padding-bottom: 12px;
}
.bnr_smlltit:after , .bnr_smlltit:before { position: absolute; content: ""; width: 5px; height: 1px; left: 0; background: #9e1436; top: 13px;} 
.bnr_smlltit:before  {  width: 15px; height: 1px; left: 10px; } 

.hmbo_wrap {
    display: flex;
    align-items: center;
    height: 100%;
}
.bnr_btn { margin-top: 25px ;}
.bnr_btn [class*="btn_"] span:after, .bnr_btn [class*="btn_"] span:before{
background: #e5eaeb;
}
.bnr_btn [class*="btn_"]:hover span:after, .bnr_btn [class*="btn_"]:hover span:before{
background: #9f1537;
}


.ban_desk {
    display: block !important;
}

.ban_xs {
    display: none !important;
}

.webox .bnrbtn {
    text-align: left;
}

.webox .bnrbtn .btn_white {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.js_hmbanner.common_dots .slick-dots {
    bottom: 103px;
    left: 45px;
    text-align: left;
}
.badge_bnr { position: absolute; right: 118px; top: 119px;}
.js_hmbanner.slick-dotted.slick-slider { margin-bottom: 0;}


.popup{
position: absolute;
    right: 82px;
    bottom: 63px;background: #fff;
}
.popbox { width: 240px; border-top: 1px solid #9e1436; text-align: center; padding: 32px 15px 40px;}
.frhat { font-size: 16px; color: #9e1436; letter-spacing: 1px; font-weight: 600; text-transform: uppercase;padding: 20px 0 0 ; display: inline-block;}
.of_txt { color: #383b3c;   font-family: 'Eurostile LT Pro Unicode';  font-size: 14px; letter-spacing: 0.8px; line-height: 24px; text-transform: uppercase;padding: 0 0 18px; }
.hatimg, .popbox img { display: block; margin: 0 auto ;}
.popbox .close {    position: absolute;
    top: -10px;
    right: -7px;
    background: #616667;
    padding: 6px;
    border-radius: 100%;
 }



.slider-dots-box {
position: absolute; bottom: 30px;
}

.slider-dots {
  display: flex;
  justify-content: center;
  align-items: center;
}

.slider-dots button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: block;
  border: 0;
  background-color: transparent;
  margin: 0 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 0;
  transition: .3s all;
  position: relative;
  z-index: 0;
}

.slider-dots-box .slick-active button {
    width: 40px;
    height: 40px;
}

.slider-dots button:after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #000;
}

/*
.slider-dots-box .slick-active button:after {
  content: none;
  display: none;
}
*/

.slider-dots-box .slick-active button:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  border: 2px solid rgba(0, 0, 0, 0.05);
  border-radius: 50%;
}

.circle-bg {
  fill: rgba(255, 255, 255, 0);
  stroke: rgba(0, 0, 0, 0.05);
  stroke-width: 2;
  stroke-linecap: butt;
}
.circle-go {
  fill: rgba(255, 255, 255, 0);
  stroke: rgb(247, 255, 9);
  stroke-width: 2;
  stroke-linecap: round;
  animation: progress 22s;
  stroke-dasharray: 360px;
  stroke-dashoffset: 360;
}
/*.slider-dots-box span { position: absolute; left: 0; right: 0; width: 8px; height: 8px; border-radius: 100%; background: #000;}*/
@keyframes progress {
  from {
    stroke-dashoffset: 360;
  }
  
  to {
    stroke-dashoffset: 0;
  }
}


/*responsive styles*/
 @media (max-width: 1900px) {
     
img.bannercycle {width: 900px; height: auto; z-index: 5; bottom: 0; right: 5%;}
     
}
    @media (max-width: 1500px) {
        .webox {
            max-width: 970px;}
              .bnr_right {
    max-width: 450px;
}  

 
}
    @media (max-width: 1439px) {
        
        
        
        .bnr_smlltit {font-size: 20px; }
        .bnr_right {
    max-width: 450px;
}
    .webox {
    max-width: 910px;
} 
        .bannertit {
    font-size: 35px;
            line-height: 43px;}

}
    @media (max-width: 1200px) {
        
        .bannertit {
    font-size: 30px;line-height: 40px;
}
     .webox {
    max-width: 755px;
} 
        .bnr_right {
    max-width: 347px;
}
        .popup { bottom: 20px;}
        .badge_bnr {top: 30px;}

}

@media (max-width: 1024px) {
.webox {
    max-width: 665px;
}

.bnr_right {
    max-width: 300px;
}
    .bannertit {
    font-size: 26px;
    line-height: 32px;
}
    .bnr_smlltit {
    font-size: 17px;
}
    .badge_bnr, .popup { right: 15px;}
}
    @media (max-width: 992px) {
        
       .bnr_btn {
    margin-top: 15px;
}
        .bannertit  {padding-bottom: 18px;
    margin-bottom: 11px;}
        
}
@media (max-width: 860px) {

    .popbox {    padding: 18px 15px 15px; }
    .webox {
    max-width: 600px;
}
}
    @media (max-width: 768px) {
        
        .ban_desk { max-height: 100%;
    max-width: inherit;
    left: 0;
    top: 0;
    width: 100%;
    object-fit: cover;
    z-index: -1;
    overflow: hidden;
    height: 450px !important;
}
        
       
        .popup { display: none !important;}
        .badge_bnr { max-width: 120px !important;}
        .bannertext { padding: 130px 0 90px;}
        .js_hmbanner.common_dots .slick-dots { bottom: 10px;}
        .bnr_right { padding-top: 50px;}
        .webox { max-width: 100%;}

}
    @media (max-width: 575px) {
        .bnr_left, .bnr_right { width: 100%; padding: 0;}
        .webox { flex-wrap: wrap;}
        .bnr_right { max-width: 400px; margin: 0 auto;}
/*          .bannertit br { display: none;}*/
        .bannertext {
    padding: 80px 0 10px;
}
        .bnr_right { padding: 0;}
        .badge_bnr {
    top: 80px;
}
        .bnr_smlltit:after, .bnr_smlltit:before { content: none;}
        
}
    @media (max-width: 420px) {
        
       .bnr_smlltit {
    font-size: 13px; padding: 0;
}
      .bannertit {
    font-size: 22px;
    line-height: 32px;
}
        .bnr_right {
            max-width: 265px;}
        .badge_bnr {
    max-width: 95px !important;
}
}
  @media (max-width: 360px) {

.badge_bnr {
    max-width: 65px !important;
}
.badge_bnr {
    top: 95px;
}
      .bnr_btn  .btn_border {padding: 6px 20px; }
}