@media(max-width:992px) {
.banner{ margin:20px 0px 0px 0px;   }
}
@media(max-width:767.98px) {
.banner{ margin:0px;   }
}

/* ==== product Main CSS === */
.banner-item{width: 100%; max-width: 100%; margin: 0px auto; padding:0px; position: relative;  }
/* ==== Slider Style === */
.banner-item li{ width: 100%; height: 100%; margin: 0px auto; padding: 0px;  position: relative; z-index: 9;  transition: all .5s ease; }
.banner-item li .slider-item {  width:100%;  padding: 0px; margin: auto; position: relative;display: flex; flex-wrap: wrap;  }
.slider-item{ position: relative; display: block; margin:0px auto; padding: 0px 20px; width: 100%;  max-width: calc((100% - 40px)/12*12 + 40px); }
@media (min-width:1025px) {
.slider-item{ padding-right: 40px; padding-left: 40px;   }
}
@media (min-width:1280px) {
.slider-item{ max-width:1280px;}
}
@media(max-width: 1400px) {
.slider-item,.banner-nav { transform: scale(.9)}
}
@media(max-width: 840px) {
.slider-item,.banner-nav { transform: scale(1)}   
.banner-item li .slider-item { padding: 10px;  }    
}
@media(max-width: 768px) {
.banner-item li{ width: 100%; height: auto; margin: 0px auto; padding: 0px;   }
.banner-item li .slider-item { margin: 0px auto; padding: 0px;flex-direction: column; }
}

 

/* ====外框 === */
.item-content{width: 100%; padding-bottom: 30px; position: relative;z-index: 0; }
.item-content:after{ content:""; position: absolute; right:0px;  top: -40%;  width:30%; height: 140%; background: #fff;z-index: -1;} 
.item-nav{width: 100%; margin-top: -40px; padding:0px; background: #fff;}
@media(max-width: 768px) {
.item-nav{width: 100%;  background:none; position: absolute; left:0px; top:860px;  }  
.item-content:after{ right:0px; top:800px; width:100%; height: auto;  } 
.item-content{ padding:80px 0px 0px 0px; margin: 0px;height: auto;  }
}

@media(max-width: 767.98px) {
.item-nav{width: 100%;  background:none; position: absolute; left:0px; top:680px;  }  
.item-content:after{ right:0px; top:800px; width:100%; height: auto;  } 
.item-content{ padding-bottom: 0px; margin: 0px;height: auto;  }
}
.slogan {width:32.5%; height: auto;  margin:0px; padding:0px;left: 0px; top:100px; position: absolute; pointer-events: none; }   
.slogan::before{ content: attr(data-content);color: #000;   font-size: 130px;  font-size: min(max(11vw, 90px), 130px);  font-weight: 500;  letter-spacing: 3px;font-family: 'MuseoModerno', cursive; writing-mode: vertical-lr;position: absolute; left:25px; top:0;  transform:rotate(180deg);   }
.slogan .txt-content{ /*width: 50%;*/ margin: 0px 0px 0px 120px;/*padding: 0px 0px 50px 0px;*/ position: relative;}
.slogan .txt-content h3{ width: 50%; margin: 0 auto 0 0; padding: 0; font-size: 1.354vw; line-height: 2.875rem; font-weight: 500; text-align: left; letter-spacing: 1px;
  color: #000; }
.slogan .txt-content h4{ width: 50%; margin: 40px 0 0px auto; padding: 0 0 0 0; font-size: 1.354vw; line-height: 2.875rem; font-weight: 500; color: #f15921; letter-spacing: 1px; }
.slogan .txt-content::after { content: "" ; width: 2px; height: 200px; background-color: #000;position: absolute; left:calc(50% - 35px); top: -5%; transform:rotate(45deg);  }
.slogan .txt-content p{ width: 100%;margin: 20px 0px 0px 0px; padding:0; font-size:.9rem; line-height: 1.5rem;   text-align: left; font-weight:400; color:#6d6d6d;   }

@media(max-width: 1400px) {
.slogan .txt-content h3{ font-size: 1.786vw; }
.slogan .txt-content h4{ font-size:  1.786vw; }
}

@media(max-width:1112px) {
.slogan {  margin-left: -30px;}
}

@media(max-width:1024px) {
.slogan { }
/*.slogan::before{ font-size: 90px;    }*/
.slogan .txt-content{ margin: 0px 0px 50px 100px;  }
}
@media(max-width: 992px) {
.slogan { top: 70px; width: 55%;} 
.slogan .txt-content h3{ font-size: 3.024vw; }
.slogan .txt-content h4{ font-size: 3.024vw; }
.slogan .txt-content::after{ top: 0; }
}
@media(max-width:840px) {
.slogan {transform: scale(.8); margin-left: -35px;}
.slogan .txt-content h3{ font-size: 3.571vw; }
.slogan .txt-content h4{ font-size: 3.571vw; }
}


@media(max-width: 768px) {
.slogan { width:100%; height: auto; margin:20px 0px 120px 0px; padding:0px; top:0;  position: relative; order: 3; transform: scale(1);}  
.slogan::before{ display: none;}
.slogan .txt-content{ width: 100%; margin: 0px auto;padding: 0 20px;  display: flex; flex-wrap: wrap;align-items: center; }
.slogan .txt-content h3{ font-size: 20px; width: 50%; margin: 0; padding: 0 30px 0 0; text-align: center; line-height:2rem; }   
.slogan .txt-content h4{ font-size: 20px; width: 50%; margin: 0; padding: 0 0 0 30px; text-align: center; }   
.slogan .txt-content::after{ width: 2px; height: 65px; left: 50%; top: -10px;}
.slogan .txt-inner{ display: none;}
}

@media(max-width:430px) {
.item-nav { top: 760px;}
.slogan .txt-content::after{ height: 50px; left: 50%; top: 35%;}
.slogan .txt-content h3{ margin: 0 auto 65px auto; padding:0; width: 100%;}
.slogan .txt-content h4{ margin: 0 auto 0 auto; padding:0; width: 100%;} 
}

@media screen and (max-width:320px){  
}
/*.banner-item .slick-list{overflow: visible;} */
.banner-item li .slider-img { width:450px; height:600px;  margin:-60px 0px 40px 0px; padding:0px; position: relative;  }
.banner-item li figure { transform: scale(0.95);width:100%;  height:auto;  margin:0px 0px 0px 0px;padding:0px;position: relative;  }
.banner-item li figure img { margin: auto;  }
.banner-item li .slider-img::before{content:"Antes"; display: block; position: absolute; left:10px; bottom:-5px;color:#f15921;font-family: 'MuseoModerno', cursive; font-weight: 500; z-index: 1; }
.banner-item li .slider-img::after{content:"Después";  display: block; position: absolute; right:10px; bottom:-5px; color: #000; font-family: 'MuseoModerno', cursive; font-weight: 500; z-index: 1;}
 
.banner-item li.slick-current.slick-active .slogan{   animation:fadeInDown 1s both 1s;}
.banner-item li.slick-current.slick-active figure img{ animation:fadeInRight 1s both 1s;}
.banner-item li.slick-current.slick-active figure::after{ animation:fadeInUp 1s both 1s;}
.banner-item li.slick-current.slick-active figure::before{ animation:fadeInDown 1s both 1s;}



 
.video-item{ position: absolute; left:0px; top:30px;z-index: 1;}
.slider-content{width:calc(100% - 450px); height: auto;  margin:0; padding: 0; position: relative;  display: flex; flex-wrap: wrap;}
.slider-content-item{ width: 100%; margin:120px 0px 0px 0px; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; pointer-events: none; }
.slider-content .txt-content{ width: 50%; margin: 0; padding: 0px; }
 
.slogan-depiction{ width:50%; padding: 100px 0px 0px 0px;  margin: auto 0px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-self: flex-end;  }
.slogan-depiction ul{ width: calc(100% - 50px); margin: auto  0px auto 50px; padding: 0px; list-style: none;}
.slogan-depiction ul li{ width: 100%; margin: 0px; padding: 0px; font-size: 1rem;line-height: 1.5rem; color: #6d6d6d; font-weight: 400;}

.list-item{ width: 100%; margin:100px 0px 10px 0px;padding:0px; position: relative;display: flex; flex-wrap: nowrap;border-top:solid 1px #c0c0c0}
.list-item-col{  width: auto; position: relative; margin:30px 40px 0px 0px;padding: 0px 40px 0px 60px;   }

.list-item-col:before{ content: attr(data-content); font-size: 16px; font-weight: 500;  font-family: 'MuseoModerno', cursive; left:0; top:-10px;position: absolute; z-index:0;}
.list-item-col:after{ content:" "; width: 2px;height:60px; left:-10px; top:0;position: absolute; background: #000;}
.list-item-col h3{margin: 0px 0px 10px 0px; padding:0;font-size:20px; font-weight:400; text-align: left;  letter-spacing:3px; color:#000; }
.list-item-col ul{  width: 100%;  margin: 0px 0px 10px 0px;display: block; padding: 0px; list-style: none; }
.list-item-col ul li{ width: 100%; margin: 0px 0px 5px 0px; padding: 0px 0px 0px 10px; font-size: 1rem;line-height: 1.5rem; color: #6d6d6d; font-weight:400;position: relative; }
.list-item-col ul li::before  {content:" ";width: 2px;height: 2px;  border-radius:99rem; background: #000; position: absolute;left:0px;top:12px; }

 

 
@media screen and (max-width: 1280px){
 .video-item{  top:0px; }
.list-item-col{  width: 50%; margin:30px 45px 0px 0px;  }
}


@media screen and (max-width: 1024px){
 .banner-item li .slider-img { width:450px; height:600px;  margin:-60px 0px 40px 0px;  }   
.list-item-col{  margin:30px 15px 0px 0px; padding: 0px 20px 0px 40px; }
 }
@media screen and (max-width: 992px){
.slogan-depiction { width: 100%;  padding: 150px 0 0 0;}
 }

@media screen and (max-width: 840px){
.video-item{  top:30px; }

.slider-content{width:calc(100% - 350px);  }
.slogan-depiction ul li{   font-size: 14px; }
.banner-item li .slider-img { width:350px; height:auto;    }   
.banner-item li .slider-img::before{ bottom:140px; }
.banner-item li .slider-img::after{  bottom:140px;  }
.list-item-col:before{  top:0px; }
.list-item-col ul li{   font-size: 14px;  }
.list-item-col h3{ font-size:14px;   }
}

@media screen and (max-width:768px){
.banner-item .slick-prev,.banner-item .slick-next{ bottom:auto;top:20%; }
.banner-item .slick-prev { left:0 }
.banner-item .slick-next{ right:0; }
.banner-item .slick-prev:before,.banner-item .slick-next:before{  width: 36px; height: 36px;}
 

.video-item{ position: relative; width:100%; margin: auto ; padding:50px 10% 30px 10% ; left:auto; top:auto;z-index: 1; order:3; background: #fff; }
.video-item:after {content: ""; width: 80%; height: 1px; left:10%; bottom:20px;position: absolute; background: #c0c0c0; }
.video-item .cms-btn-play:before{width: 36px;height: 36px;}   
.video-item .cms-btn-play{ width: 100%; padding-left: 40px;}

.banner-item li .slider-img { width: 450px; margin:0px auto;  }   
.slider-content{width:100%; height: auto;  order: 4; background: #fff; }
.slogan-depiction{ width:100%; padding-top: 0px; }
.slider-content-item{   margin:0px 0px 20px 0px;   }
.list-item{ width: 100%; margin:50px 0px  0px 0px;  padding: 0px; flex-wrap: wrap;  border:none;   }
.list-item-col{ width: 100%;  margin: 0px; padding: 40px 60px; background: #f8f8f8}  
.list-item-col:hover{ background:#f15921 } 
.list-item-col:hover h3, .list-item-col:hover ul li,.list-item-col:hover:before{ color: #fff;  }
.list-item-col:hover.list-item-col ul li::before { background: #fff;   }
 .list-item-col:after{ display: none;}
.list-item-col:before{  top:40px; right: 40px;left: auto; }
}


@media screen and (max-width:767.98px){
    
  .banner-item li .slider-img::before{ bottom:-20px; }
.banner-item li .slider-img::after{  bottom:-20px;  }  
    
.video-item{ position: relative; width:100%; margin: auto ; padding:50px 10% 30px 10% ; left:auto; top:auto;z-index: 1; order:3; background: #fff; }
.video-item:after {content: ""; width: 80%; height: 1px; left:10%; bottom:20px;position: absolute; background: #c0c0c0; }
.video-item .cms-btn-play:before{width: 36px;height: 36px;}   
.video-item .cms-btn-play{ width: 100%; padding-left: 40px;}
 .banner-item li .slider-img { width: 350px;margin:30px auto;  }   
.slider-content{width:100%; height: auto;  order: 4; background: #fff; }
.slogan-depiction{ width:100%; padding-top: 0px; }
.slider-content-item{   margin:0px 0px 20px 0px;   }
.list-item{ width: 100%; margin:50px 0px  0px 0px;  padding: 0px; flex-wrap: wrap;  border:none;   }
.list-item-col{ width: 100%;  margin: 0px; padding: 40px 60px; background: #f8f8f8}  
.list-item-col:hover{ background:#f15921 } 
.list-item-col:hover h3, .list-item-col:hover ul li,.list-item-col:hover:before{ color: #fff;  }
.list-item-col:hover.list-item-col ul li::before { background: #fff;   }

.list-item-col:after{ display: none;}
.list-item-col:before{  top:40px; right: 40px;left: auto; }
}

@media screen and (max-width:320px){
    
.banner-item li .slider-img::after{ right:-50%;  }  
    .slogan-depiction ul{ width: 100%; margin: auto  0px auto 30px; padding: 0px; list-style: none;}
.video-item{  margin-left: 0px;  }  
 .list-item-col{  padding: 40px 30px; }     
}


/*手機版增加控制寬度*/
.mold-wrapper{}
.mobile-version{display: none;  }
@media (max-width: 768px) {
.mold-wrapper{ padding-right: 40px; padding-left: 40px;}   
.mobile-version{display: block;  padding: 20px 40px; }  
}



.banner-nav .slick-slider{ width: 100%; margin:0px auto; padding:0px!important;position: relative;  }
.banner-nav{ width: 100%;    margin:0px auto; padding:50px 180px 50px 180px; list-style:none;  display: flex; justify-content: center; }
.banner-nav li{width:100%; height:auto; margin:0px  auto; padding:0px 20px 20px 20px; position: relative; }
.banner-nav li .item { width:auto; height: auto;  margin: auto; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; align-items: center; position: relative;  }
.banner-nav li .item:after { content:""; position: absolute;left:64%;  bottom: 0; width:100%; height: 1px; background: #c0c0c0; }  
.banner-nav li:last-child .item:after { display: none }  
.banner-nav li figure {  margin: 0px auto; width: 100px; height: auto;  text-align: center; cursor: pointer; position: relative; overflow: hidden;}
.banner-nav li figure img {   opacity: .5; -webkit-transition: opacity 0.35s; transition: opacity 0.35s; -webkit-filter:grayscale(100%);  }
.banner-nav li figure:hover img {-webkit-filter:grayscale(0);opacity: 1; }
.banner-nav li.slick-current img{-webkit-filter:grayscale(0);opacity: 1;}
/*.banner-nav li span {position: relative;  padding: 10px 6px 40px 6px; font-size: 1.125rem; line-height: 1.25;  letter-spacing: 1px; font-weight: 500;  text-align: center;  color:#c0c0c0; }*/

.banner-nav li span { width: 100%; height:36px; margin:0px 0px 20px 0px;  font-weight: 700; font-size: 1.125rem; line-height: 1.15rem;  text-align: center;color: #c0c0c0; overflow: hidden;  white-space: pre-line; word-break: normal; word-wrap: break-word; text-overflow: ellipsis; display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical; }


.banner-nav li span:before { content:""; position: absolute;  left: 50%;  bottom:-4px; transform: translate(-50%, 0px);width: 6px; height: 6px; background: #c0c0c0; border-radius:99rem; }
.banner-nav li.slick-current span{ color:#f15921;} 
.banner-nav li.slick-current span:after{ content:""; position: absolute; left: 50%!important;  bottom: -20px; transform: translate(-50%, 0px)!important;width:38px; height: 38px; border-radius:99rem;border: solid 1px #f15921;} 
.banner-nav li.slick-current span:before{ background: #f15921; } 



@media(max-width: 1180px) {
.banner-nav{ margin-top: -35px; padding:5% 50px;  }
}

@media(max-width: 1024px) {
.banner-nav{   margin-top: -15px;  padding:5% 0px;  }
}
@media(max-width: 992px) {
.banner-nav{margin-top: -30px;}
.banner-nav li span {   font-size: 1rem;  }
.banner-nav li .item:after { left:70%; }  
}

@media(max-width: 768px) {
.banner-nav{margin-top: -30px;}
}
@media(max-width:767.98px) {
.banner-nav{margin-top:80px; border-top: none; padding: 0px 10px;}
.banner-nav li{ width: calc(100% - 10px); margin:0px 10px 0px 0px; padding:10px 0px; border: solid 1px #dddbe0 }
.banner-nav li.slick-focus {border: solid 1px #f15921;} 
.banner-nav li span { width:100%; height: 26px;  margin:auto;  padding:5px 0px 0px 0px; font-size: 14px; -webkit-line-clamp: 1;   color: #000; }
.banner-nav li .item:after,.banner-nav li span:before,.banner-nav li span:before, .banner-nav li.slick-current span:after,.banner-nav li.slick-current span:before,.banner-nav li.slick-focus span:after, .banner-nav li.slick-focus span:before{display: none;} 
}

.main-area{ background: #fff;  }
 
 /* .cms-product-arera .cms-main-content {width:calc(100% - 400px);  padding-left:30px; position: relative;  }*/
.cms-bg{background-image: linear-gradient(to top, #fff 0%, #fbfdf6 90% ,#fff 100%);}
.text-stroke{ -webkit-text-stroke: 1px #a3d6bf;}