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

/*banner PC */
.bannerB { position: relative; z-index: 0; background: center center no-repeat; background-size:cover; background-attachment:fixed ;}
.bannerB .con {position: relative; z-index: 0;height: 665px; margin: 0 auto;}
.bannerB .txt { position: absolute; left: 0; right:51%; top: 50%; margin-top: -4em; text-align: right;
}
.bannerB .txt .t1 { font-size: 4.2em; letter-spacing: 0.1em; line-height: 1.2em; 
 color: #b85866; background-color: #fff; padding: 0 1.8em ; font-weight: bold;
 position: relative; z-index: 0; left: -2em; transition:all 0.8s;  opacity: 0; }
.bannerB .txt .t2 {  font-size: 2.1em; display: inline-block;  letter-spacing: 0.1em; 
font-weight: bold; line-height: 1.7em; margin-right: 2.8em;
 background-color: #d5e6ba !important; color: #fff;padding: 0 1.2em;
 position: relative; z-index: 0; left: 2em; transition:all 0.8s;  opacity: 0;  }
/*banner 手机  */
.bannerBM {position: relative; z-index: 0; padding-top: 150%; display: none;
background: center center no-repeat; background-size:cover; background-attachment:fixed;}
.bannerBM .txt {position: absolute; left:0; right:0; top: 26%; margin-top: -3em;text-align: center;}

.bannerBM .txt .t1 { font-size: 8.5vw; letter-spacing: 0.1em; line-height: 1.2em; 
 color: #b85866; background-color: #fff;  padding: 0; font-weight: bold;
  position: relative; z-index: 0; left: -2em; margin:0 18% 0 6%; transition:all 0.8s;  opacity: 0; }
.bannerBM .txt .t2 { position: relative; z-index: 0; right: -3%; margin: 0 12% 0 24%;
font-size: 3.4vw;  letter-spacing: 0.1em; font-weight: bold; line-height: 1.7em;
 background-color: #fec0c5; color: #fff;padding: 0.1em 1em 0;
 position: relative; z-index: 0; left: 2em; transition:all 0.8s;  opacity: 0;}
 
.yjkBox { padding: 0;}
.yjkBox .txtBoxW { position: relative; z-index: 1; bottom: -5.2em; max-width: 1382px; margin: 0 auto; }
.yjkBox .txtBox{ margin: 0 5.7%; padding: 3.8em 0;color: #000;text-align: left;
 background-color: d5e6ba;
 filter:Alpha(opacity=75);
 background: rgba(213, 230, 186, 0.75)}
.yjkBox .txtBox .tit { margin: 0.1em 12% 0; font-size: 3.9em; line-height: 1.1em;  color: #ffffff; font-weight: bold;
transition:all 1s; position: relative; z-index: 0; top: 0.5em;  opacity: 0;
}
.yjkBox .txtBox .tit2 {margin: 0 12%; font-size: 1.3em;line-height: 1.1em; 
transition:all 1s; position: relative; z-index: 0; top: 2em;  opacity: 0;
}
.yjkBox .txtBox .txt {margin: 1em 20% 0; font-size: 1em;line-height: 1.8em;
transition:all 1s; position: relative; z-index: 0; top: 2em;  opacity: 0;
 }
.yjkBox .picBox {position: relative; z-index: 0; height: 0; padding-top:410px;
 background: center center no-repeat;background-size:cover; background-attachment:fixed ; }
.yjkBox .picBoxM { display: none; position: relative; z-index: 0;padding-top: 100%;
 background: center center no-repeat; background-size:cover; }

.yjktzBox { background-color: #FFFCF5; padding: 3.6em 1.4em 5em;} 
.yjktzBox .tit {position: relative; z-index: 0; top: 2em; transition:all 1.2s;  opacity: 0;
	font-size: 2.2em; line-height: 1.3em;}
.yjktzBox .txt {position: relative; z-index: 0; top: 2em; transition:all 1.2s;  opacity: 0;
 max-width: 914px; margin: 1.8em auto 0; line-height: 1.7em;}
.yjktzBox .list {position: relative; z-index: 0; top: 2em; transition:all 1.2s;  opacity: 0;
	max-width: 1100px; margin: 0 auto 0; font-size: 1.2em; text-align: left;}
.yjktzBox .list:after { display: block; clear: both; content: "";}
.yjktzBox .list ul { margin-right: -28%;}
.yjktzBox .list li{ width: 30%; margin-right: 3.3%; margin-top: 2.4em; float: left;}
.yjktzBox .list li span { padding-left: 1em; background: url(../imgs/dot.png) 0 center no-repeat; background-size:0.35em auto;}
.yjktzBox .list li.liw { width: 100%;}

.easyBox { max-width: 1920px; margin: 0 auto; padding-top: 3em;}
.easyBox:after { display: block; clear: both; content: "";}
.easyBox .tit {position: relative; z-index: 0; top: 1em; opacity: 0; transition: all 1.2s;
	text-align: right; font-size: 4em; line-height: 1.5em; font-weight: bold; letter-spacing: 0.1em; color: #FFAF68;}
.easyBoxL {position: relative; z-index: 0; top: 2em; transition:all 1.6s;  opacity: 0;
	float: right; width: 74%; padding-top: 40%; overflow: hidden; height: 0; 
 background: center center no-repeat; background-size:cover;  background-attachment:fixed; }
.easyBoxLM { display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0;background: center center no-repeat; background-size:cover;}
.easyBoxL .txtBoxW {position: absolute; left: 8%; top: 5%; height: 90%; width: 86%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex; flex-direction: row-reverse;
	  align-items: center;}
.easyBoxL .txtBox {position: relative; z-index: 0; top: 2em; transition:all 1.2s;  opacity: 0;
	width: 45%; padding: 4.5% 5% 5%;  background-color: #f9c2c8;
 filter:Alpha(opacity=75);
 background: rgba(255, 175, 104, 0.75)}
.easyBoxL .txtBox .t1{position: relative; z-index: 0; top: 2em; transition:all 1.2s;  opacity: 0;
	font-size:2em; text-align: left; line-height: 1.3em;}
.easyBoxL .txtBox .t2{position: relative; z-index: 0; top: 2em; transition:all 1.2s;  opacity: 0;
	margin-top: 0.7em; font-size: 1em; text-align: left;  line-height: 1.7em;
 max-height: 15.3em;
 text-overflow:ellipsis;
 display:-webkit-box; 
 -webkit-box-orient:vertical;
 -webkit-line-clamp:9; 
 overflow: hidden; }
.easyBoxR,.easyBoxRM {position: relative; z-index: 0; top: 2em; transition:all 1.6s;  opacity: 0;
	float: left; width: 26%; padding-top: 40%;  overflow: hidden;height: 0;
 background: center center no-repeat; background-size:cover;}
.easyBoxRM { display: none;}
.downBox { max-width: 1382px; margin: 0 auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
	  flex-wrap: wrap;
	  align-items: center; background-color: #fbf5f7; }
.downBoxL { width: 71%;}
.downBoxL .tit { margin:0 2em; font-size: 2.2em; line-height: 1.3em;}
.downBoxL .titen { margin:0.3em 2em 0; font-size: 2.2em; line-height: 1.3em;}
.downBoxL .txt { width: 75%; margin:0.5em auto 0;  line-height: 1.7em;
max-height:10.2em; overflow: hidden;
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:6; }
.downBoxL .btnRe { margin-top: 2.2em; margin-left: auto; margin-right: auto;}
.downBoxR { width: 29%; padding-top: 40%; overflow: hidden;height: 0; position: relative; z-index: 0;
 background: center center no-repeat; background-size:cover;background-image: url(../imgs/appDown.jpg);}
 
.zlBox { background-color: #d6e9bc; padding: 4.6em 1.4em 4.6em;} 
.zlBox .tit  {position: relative; z-index: 0; top: 3em; opacity: 0; transition: all 1.2s;
	display: inline-block; line-height: 1.3em; font-size: 2em;}
.zlBox .tit .name { position: relative; z-index: 1; letter-spacing: 0.1em; padding: 0 0.8em;}
.zlBox .tit .line { position: absolute; left: 0; right: 0; bottom: 0.2em; height: 0.5em;
 background-color: #fff;}
.zlBox .txt {position: relative; z-index: 0; top: 3em; opacity: 0; transition: all 1.2s;
	max-width: 450px; margin: 0.8em auto 0; line-height: 1.7em;}
.zlBox .stepList { max-width: 640px; margin: 2em auto 0;}
.zlBox .stepList ul:after { display: block; clear: both; content: "";}
.zlBox .stepList li{position: relative; z-index: 0; top: 3em; opacity: 0; transition: all 1.2s;
	width: 30.3%; margin: 0 1.5%; float: left;}
.zlBox .stepList .t1 {font-size: 1.2em;}
.zlBox .stepList .t2 {margin-top: 1.4em; font-size:1.3em;}
.zlBox .stepList .t3 {margin-top: 0.5em; font-size: 0.95em;}
.zlBox .stepList .pic { margin-top: 1em;}
.zlBox .stepList .pic img { display: block; width: 100%; height: auto;}

.zlBox .btnPRe {position: relative; z-index: 0; top: 3em; opacity: 0; transition: all 1.2s;
	font-size: 1.1em; display: inline-block; margin:2.2em 3.5% 0 3.5%; 
background-color: #fff; font-weight: bold; line-height: 2.9em;}
.zlBox .btnPRe span { position: relative; z-index: 0; left: -0.4em; top: -0.4em; display: block; padding: 0.1em 6em 0;
 background: #ffaf68;  color: #fff; letter-spacing: 0.1em;}
.zlBox .btnPRe:hover {background-color: #FFAF68;}
.zlBox .btnPRe:hover span { background-color: #fff; color: #FFAF68;}
.zlBox .btnPRe:active { top: 0.5em !important;}  

/*特点 */
.tdBox { padding: 7.5em 0 1em;}
.tdBox .tit {display: inline-block; position: relative; z-index: 0; padding: 0 0.6em; line-height: 1.2em; font-size: 2.9em;font-weight: bold;}
.tdBox .tit .name { position: relative; z-index: 1; letter-spacing: 0.1em;}
.tdBox .tit .line { position: absolute; left: 0; right: 0; bottom: 0.2em; height: 0.5em;
 background-color: #eec1c6;}
.tdBox .titM { display: none;}
.tdBox .txt { width: 90%; max-width: 880px; margin: 1.6em auto 0; font-size: 1.3em; line-height: 1.7em; color: #000;}

.tdBox .tit2 { margin-top: 1em; font-size: 2em; line-height: 2.8em;}
.tdBox .tit2 span { display: inline-block; padding-left: 2em; padding-top: 0.2em;
 background: url(../imgs/jishu.png) 0 center no-repeat; background-size:auto 3em;}
 
 .swiper_td_w { max-width: 1382px; margin:2em auto 0; position: relative; z-index: 0; }
 .swiper_td {height:auto;width:100%; }
 .swiper_td .swiper-slide { margin-top:0 !important; display:block;width:100%; }
 .swiper_td .swiper-slide .pic { position: relative; z-index: 0; padding-top: 488px; cursor: pointer; display: block;
  height: 0; overflow: hidden; background: center center no-repeat; background-size:cover;  }
 .swiper_td .swiper-slide .ptxt { position: absolute; margin-right:-360px; right: 50%; bottom: 20%;  width: 720px;
color: #000;font-size: 2.2em; line-height: 1.4em;}
 .swiper_td .swiper-slide .ptxt .t2 { font-weight: bold;}

 .swiper_td .swiper-slide .intro { color: #000; display: block; width: 88%; max-width: 670px; margin: 2.8em auto 0; overflow: hidden;
  font-size: 1.2em; line-height: 1.7em; }
 .swiper_td .button-prev,.swiper_td .button-next { z-index: 1; position: absolute; bottom:15%; display: block; cursor: pointer;
  width: 0.6em; height:1.2em; color: #000; line-height: 1.5em; font-size: 1.7em; text-align: center;
  background:center center no-repeat; background-size:contain ;}
 .swiper_td .button-prev { left:50%; margin-left: -480px; background-image: url(../imgs/arrow2L.png);}
 .swiper_td .button-next { right: 50%;margin-right: -480px;  background-image: url(../imgs/arrow2R.png);}
 .swiper_td .button-prev:hover,.swiper_td .button-next:hover { color: #666;}

.tdBox .btnPRe { font-size: 1.1em; display: inline-block; margin-top:2.4em; 
background-color: #e1a4ab; font-weight: bold; line-height: 2.9em;}
.tdBox .btnPRe span { position: relative; z-index: 0; left: -0.4em; top: -0.4em; display: block; padding: 0.1em 6em 0;
 background: #b85866 ;  color: #ffff; letter-spacing: 0.1em;}
 .tdBox .sm { margin-top: 1.5em;}

.priceBox { max-width: 1382px; margin: 0 auto 0; padding:4.9em 0 4.5em;}
.priceBox .titd { background-color: #fbf5f7; color: #d97f88; letter-spacing: 0.1em; font-weight: bold;
 font-size: 3.8em; line-height: 1.2em; margin-bottom: 1em;}
.priceBox .list { margin: 0 4.3%; position: relative; z-index: 0;}
.priceBox .list .label { opacity: 0; transition: all 0.6s;
	position: absolute; width: 38%; bottom:1.5em; left: -8%; background-color: #dc808b; color: #fff;
 font-size: 1.4em; font-weight: bold; line-height: 1.5em; text-align: left; padding:0.7em 0;}
 .priceBox .list .labelAni {left: -4.6%; opacity: 1;}
.priceBox .list .labelc { padding-left:38%; padding-right: 1em;}
.priceBox .list ul:after { display:block; content: ""; clear: both;}
.priceBox .list li {left: -3em; opacity: 0; transition: all 0.6s;
	position: relative; z-index: 1; float: left; width: 33.3%; padding-bottom: 1em; background-color: #fff;
-moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .15);
-webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .15);
 box-shadow:0px 0px 10px rgba(0, 0, 0, .15);}
.priceBox .list .tit { font-size: 1.3em; line-height: 1.7em; margin-bottom: 0.3em; padding: 1.1em 1em 1em;font-weight: bold; background-color: #dcdcdc;}
.priceBox .list li:nth-child(2) .tit { background-color: #FEE5BD;}
.priceBox .list li:nth-child(3) .tit { background-color: #FEC56C; color: #fff;}
.priceBox .list .price { font-size: 2.4em; line-height: 1.4em;}
.priceBox .list .pink { color: #FFAE77;}
.priceBox .list .del { margin-left: 0.3em; font-size: 0.7em; text-decoration: line-through;}
.priceBox .list .txt { font-size: 1em; line-height: 1.7em;}

.priceBox .list .txtb { padding:1.2em 0 1.2em; margin:0 8%;}
.priceBox .list .txtb2 { border-top: 1px solid #000; padding:1.2em 0 1.2em; margin:0 8%;}
.priceBox .list .txtb3 { border-top: 1px solid #000;padding:2.2em 0 1.9em;margin:0 8%;}

.priceBox .btnPRe { position: relative; z-index: 0; top: 2em; opacity: 0; transition: all 0.6s;
	font-size: 1.5em; display: inline-block; margin-top:3.4em;  text-align: center;
  background-color: #ffd6a7; font-weight: bold; line-height: 3.3em; margin-left: 0.4em;}
.priceBox .btnPRe span { position: relative; z-index: 0; left: -0.4em; top: -0.4em; display: block; padding: 0.1em 3em 0;
   background: #ffae77;  color: #000; letter-spacing: 0.1em;}
.priceBox .btnPRe2 { margin-top: 1.3em;}  
.priceBox .btnPRe:hover {background-color: #ffae77;}
.priceBox .btnPRe:hover span { background-color: #FFD6A7; color: #fff;}
.priceBox .btnPRe:active { top: 0.5em !important;}
.priceBox .sm {position: relative; z-index: 0; top: 2em; opacity: 0; transition: all 0.6s; margin-top: 4em;}
.priceBox .smx {position: relative; z-index: 0; top: 2rem; opacity: 0; transition: all 0.6s; margin:3.3rem 1em 0;
 font-size: 11px; line-height: 1.6em;}
 
@media only screen and (max-width:1580px){ 
.bannerB .txt {left: 0; right:auto; top: 50%; margin-top: -4em; text-align: right;
}
.bannerB .txt .t1 { font-size: 4.2em; letter-spacing: 0.1em; line-height: 1.2em; 
 color: #000 !important; background-color: #fff; padding: 0 1.8em ; font-weight: bold;
 position: relative; z-index: 0; left: -2em; transition:all 0.8s;  opacity: 0; }
 .easyBoxL .txtBox .t1 {font-size: 1.8em;}
}

@media only screen and (max-width:1400px){
.easyBoxL .txtBox .t1 {font-size: 1.7em;}
.easyBoxL .txtBox .t2 {font-size:0.9em;}

.downBoxL .tit {font-size: 2.4em;}
.downBoxL .titen { font-size: 2em; }
.downBoxL .txt {  margin:1em auto 0; font-size: 1em;}	
}
 
@media only screen and (max-width:1382px){ 
.bannerB .txt { position: absolute; left: 0; margin-left: 0; }
.yjkBox .picBox { padding-top: 30%;}
}

@media only screen and (max-width:1280px){
.easyBox .tit { font-size: 4em;}
}

@media only screen and (max-width:1100px){
.easyBoxL .txtBox { width: 60%;}
.easyBox .tit { font-size: 3.4em;}
.easyBoxL .txtBox .t1 {font-size: 1.6em;}

.downBoxL .tit {font-size: 1.8em;}
.downBoxL .titen { font-size: 1.4em; }
.downBoxL .txt {  font-size: 0.9em;}

.swiper_td .swiper-slide .pic { padding-top: 44.4%; }
.tdBox .tit { font-size: 2.3em;}
.tdBox .txt { font-size: 1.1em;}
}

@media only screen and (max-width:960px){
.easyBox .tit { font-size: 3em;}
.easyBoxL .txtBox .t1 {font-size: 1.6em;}
.downBoxL .tit {font-size: 1.6em;}
.downBoxL .titen { font-size: 1.2em; }
.btnRe { margin-top: 1em;}
}

@media only screen and (max-width:828px){
.bannerB { display: none;}
.bannerBM { display:block;}

.yjkBox .picBox { display: none;}
.yjkBox .picBoxM { margin-top: -6.5em; display: block;}
.yjkBox .numBox ul { display: block;}
.yjkBox { padding-top: 2em;}
.yjkBox .txtBoxW { margin-top: 0; bottom: 0;}
.yjkBox .txtBox { padding: 2.2em 0 2.8em;}
.yjkBox .txtBox .tit2 {font-size: 4.5vw; margin: 0 1.6rem;}
.yjkBox .txtBox .tit {font-size: 6.4vw; letter-spacing: 0.1em; margin: 0.2em 1.6rem 0;}
.yjkBox .txtBox .txt {font-size: 1em; margin: 1.2em 1.6rem 0;}
.yjktzBox { padding: 3em 1.4em 4em;}
.yjktzBox .tit { font-size: 6vw;}
.yjktzBox .list { font-size: 1em;margin: 1em 6% 0;}
.yjktzBox .list ul { margin-right: 0%;}
.yjktzBox .list li{ width: 48%; margin-right: 2%; margin-top: 0.9em; float: left;}

.easyBox { padding-top: 3em;}
.easyBox .tit { margin: 0 12%; text-align: left; font-size:6vw; line-height: 1.2em;  }
.easyBoxL { margin-top: 10em;overflow: visible; float: none; width: auto; padding-top: 100%;  background-attachment:scroll;}
.easyBoxLM { display: block;}
.easyBoxR { float: none; width: auto; padding-top: 147%; display: none; }
.easyBoxRM { float: none; width: auto; padding-top: 147%; display: block; }
.easyBoxL .txtBoxW {position: absolute; left: 6.5%; top: -9em;  height: auto; width: 87%;
 display: block;}
.easyBoxL .txtBox { width: auto; padding: 6.8% 7.2% 9%; }
.easyBoxL .txtBox .t1 { font-size: 6.2vw; }
.easyBoxL .txtBox .t2 { font-size: 0.9em;max-height: inherit;
    -webkit-line-clamp: inherit;}

.downBox { display: block;}
.downBoxL { width: auto; padding: 4em 10%;}
.downBoxL .tit {font-size: 2.2em; margin:0 auto;}
.downBoxL .titen {font-size: 1.7em;margin:0.5em auto 0;}
.downBoxL .txt { font-size: 1em;margin:0.5em auto 0; width: auto; max-width: auto;}

.downBoxL .btnRe {margin-top: 2em; font-size: 1em;}
.downBoxR { width: auto; padding-top: 157%;}

.zlBox { padding: 3em 1.4em;}
.zlBox .stepList .t3 {font-size: 1em; line-height: 1.6em;}
.zlBox .tit { font-size: 6vw;}
.zlBox .txt { font-size: 0.95em;}
.zlBox .btnPRe { display: block; font-size: 1.2em;}
.zlBox .stepList { margin: 2em -2%;}
.zlBox .stepList .t2 { margin-top: 1em;}
.zlBox .stepList li { width: 28.3%; margin: 0 2.5%;}

.priceBox { padding: 3.6em 0;}
.priceBox .list { margin: 0 8.5%;}
.priceBox .list .label {  display: none;}
.priceBox .list li { float: none; width: auto;}
.priceBox .list li:nth-child(1) { margin: 0 5%;}
.priceBox .list li:nth-child(3) { margin-top:2em ;}
.priceBox .list .tit { font-size:1.1em; padding: 1.2em 1em 1.1em;}
.priceBox .list .price { font-size: 2.2em;}
.priceBox .list .txt { font-size: 1em;}
.priceBox .btnPRe { margin-left:8.5%; margin-right: 8.5%; font-size: 1.2em; display: block;}
.priceBox .btnPRe span { padding-left: 0; padding-right: 0;}
.priceBox .smx {font-size: 0.7em; line-height: 1.6em;}
.priceBox .smx span{ display: block;}
.priceBox .smx br { display: none;}

.tdBox { padding:4em 0;}
.tdBox .tit { font-size: 2em;display: none; width: 75%; margin: 0 auto;}
.tdBox .titM { display: block;}
.tdBox .tit2 { font-size: 1.6em;}
.tdBox .txt { font-size: 1em;}
.swiper_td_w { margin-top: 1em;}
.swiper_td .swiper-slide .ptxt { font-size: 1.4em;}
.swiper_td .swiper-slide .intro { margin-top: 1.2em; width: 82%; font-size: 1em;}
.swiper_td .button-prev, .swiper_td .button-next { bottom: 35%;}
.swiper_td .button-prev { left:3%; margin-left: 0; }
.swiper_td .button-next { right:3%;margin-right: 0;}
}
@media only screen and (max-width:640px){
.zlBox .stepList .t3 {font-size: 0.9em; line-height: 1.6em;}
.zlBox .btnPRe { display: block;}
.zlBox .btnPRe span{ padding-left: 0; padding-right: 0;}
}
@media only screen and (max-width:480px){
.zlBox .stepList .t2 { font-size:1.2em;}
.zlBox .stepList .t3 {font-size: 0.75em; line-height: 1.6em;}

.tdBox .tit { font-size: 1.7em;}
}