﻿

div{ margin:0 auto}
img{ border:0; display:block;  }

*{ font: normal 0.22rem/100% Helvetica, Arial, sans-serif; letter-spacing:1px;font-family:'微软雅黑'; font-family:'Microsoft YaHei';}
*{ padding:0; margin:0;font-family:Helvetica; font-family:'黑体';   -webkit-tap-highlight-color: transparent;	font-family:'微软雅黑'; font-family:'Microsoft YaHei';}
@media screen and (min-width: 320px) {html{font-size:50px;}}
@media screen and (min-width: 360px) {html{font-size:56.25px;}}
@media screen and (min-width: 375px) {html{font-size:58.59375px;}}@media screen and (min-width: 400px) {html{font-size:62.5px;}}
@media screen and (min-width: 414px) {html{font-size:64.6875px;}}
@media screen and (min-width: 440px) {html{font-size:68.75px;}}
@media screen and (min-width: 480px) {html{font-size:75px;}}
@media screen and (min-width: 520px) {html{font-size:81.25px;}}
@media screen and (min-width: 560px) {html{font-size:87.5px;}}
@media screen and (min-width: 600px) {html{font-size:93.75px;}}
@media screen and (min-width: 640px) {html{font-size:100px;}}
@media screen and (min-width: 680px) {html{font-size:100px;}}
@media screen and (min-width: 720px) {html{font-size:100px;}}
@media screen and (min-width: 760px) {html{font-size:100px;}}
@media screen and (min-width: 800px) {html{font-size:100px;}}
@media screen and (min-width: 960px) {html{font-size:100px;}}
label{ font-family: Helvetica;}

      .swiper-container {
      width: 100%;
      height: 100%;

    }

 
input{font-family: sans-serif; font-family:Helvetica; text-indent:4px; outline:none;-webkit-appearance: none;border-radius: 0;}
p{font-family:Helvetica;font-family:'微软雅黑'; font-family:'Microsoft YaHei';}
a{ text-decoration:none;}
::-webkit-input-placeholder{ color:#d0b688;font-size:0.22rem;display: flex;align-items: center; justify-content:center;  text-overflow: ellipsis; -webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.notice {overflow: hidden;text-overflow: ellipsis;white-space:nowrap;} 

.huanghuan{ width:100%; position:relative; overflow:hidden }
 
-webkit-tap-highlight-color: rgba(0,0,0,0);

.bgsp{width:100%; position: fixed; height:100%; background:#000; left:0%; top:0%; display:none; z-index:9998}
.vclose{ position:absolute; width:0.6rem; height:0.6rem; border:2px solid #666; text-align:center; font-size:0.22rem; line-height:0.6rem; left:47%; bottom:-1rem; color:#666; border-radius:100%}
 select {
  /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
  border: solid 1px #000;
 
  /*很关键：将默认的select选择框样式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none; height:100%;
 outline:none;-webkit-appearance: none;border-radius: 0;
  /*在选择框的最右侧中间显示小箭头图片*/
 

 
  /*为下拉小箭头留出一点位置，避免被文字覆盖*/
  
}
       .swiper {
      width: 100%;
      height: 100%; overflow:hidden

    }

    .swiper-container {
      width: 100%;
      height: 100%;

    }

     .swiper-slide {
    width:100%; height:100%; position:relative
   

      /* Center slide text vertically */
    
    }
	
	

	
	
 
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/






.swiper-slide-active{ opacity:1  !important;}
.swiper-pagination-bullet{ margin-right:4px !important;   border-radius:100%; }
.swiper-pagination-bullet{ width:10px !important; height:10px !important; background:none; border:1px solid #fff; box-sizing:border-box;   opacity:1!important;  }
.swiper-pagination-bullet-active{  opacity:1!important; width:10px!important; background:#fff; }


.mySwiper1 .swiper-pagination-bullets{ width:24%; background:#42b6cc; left:38%;border-radius:3rem; padding:3px 0px;}
.mySwiper1 .swiper-slide-active{ opacity:1  !important;}
.mySwiper1 .swiper-pagination-bullet{ margin-right:3px !important;   border-radius:100%; }
.mySwiper1 .swiper-pagination-bullet{ width:6px !important; height:6px !important; background:none; border:1px solid #fff; box-sizing:border-box;   opacity:1!important;  }
.mySwiper1 .swiper-pagination-bullet-active{  opacity:1!important; width:6px!important; background:#fff; }

.video{width:92%; position:absolute; left:4%; background:#000; top:0%; height:70.2%;}


.mySwiper5 .swiper-slide-prev{ opacity:0  !important;} 
.mySwiper5 .swiper-slide{ opacity:0  !important;} 
.mySwiper5 .swiper-slide-next{ opacity:0  !important;}
.mySwiper5 .swiper-slide-active{ opacity:1  !important;}









.page1boxdsc::-webkit-scrollbar {/*滚动条整体样式*/

        width: 3px;     /*高宽分别对应横竖滚动条的尺寸*/

        height: 1px;

    }

.page1boxdsc::-webkit-scrollbar-thumb {/*滚动条里面小方块*/

        border-radius: 3px; 
 
         -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

        background: #58a896;

    }

.page1boxdsc::-webkit-scrollbar-track {/*滚动条里面轨道*/

     

        border-radius: 1px;

        background: #c8cbca;

}



.more{  width:94%; position:absolute; left:3%; bottom:5%;}
.more a{ position:absolute; width:100%; height:100%; top:0; left:0;text-align:center; color:#fff; font-size:0.22rem;  display: flex;align-items: center; justify-content:center; }
 
 

.box{ position:absolute; width:94%; left:3%; top:0%; height:100%; }

.mboxL{ width:84%; float:left; position:relative; height:100%; }
.mboxR{ width:16%; float:right; position:relative; height:100%; }
.mboxRli{ width:100%; border-bottom:1px solid #196c7c; border-left:1px solid #196c7c; box-sizing:border-box; height:9.09%; background:#74d5e6; color:#fff; font-size:0.22rem;display: flex;align-items: center; justify-content:center;}
.mboxLb{ position:absolute; width:100%; height:100%; left:0; top:0; display:none}



.mubox1{ width:100%; height:3%; background:#75d6e7; }
.muboxli{ height:100%;box-sizing:border-box; width:8.09%; float:left; color:#fff; font-size:0.18rem;display: flex;align-items: center; justify-content:center;}
.pprobox{width:100%; height:97%; background:#43b5cd; background:none; position:relative}
.probox{width:90%; margin:0 auto; margin-top:5%; position:relative; height:90%; }
.proboxq{ width:100%; height:100%; position:absolute; top:0; left:0; display:none}




.proboxli{ width:48.5%; float:left; height:32%; margin-bottom:3%; border-radius:8px; overflow:hidden; position:relative; background:#fff; box-sizing:border-box;}
.proboxli:nth-child(2n){ float:right}
.proboxli .imgs{ width:100%; background:#fff; height:70%;}
.proboxli .bt1{ width:93%; height:auto;}
.bt1 p{ width:100%; padding-top:2px; padding-bottom:2px; box-sizing:border-box; line-height:0.28rem;font-size:0.22rem;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;
  line-clamp: 1;-webkit-box-orient: vertical; font-weight:bold; text-align:left; color:#000 }
.boxppr{ height:15%; width:100%; padding-left:4px; padding-right:4px; position:absolute; left:0; bottom:0px; box-sizing:border-box;}
.jiage{ width:50%; float:left; height:80%;  text-align:left; color:#32a4b9; font-size:0.2rem; font-weight:bold;  display: flex;align-items: center; justify-content:left;}
.boxppr a{ width:50%; height:80%;  background:url(../img/buy.png) no-repeat left top; float:right; background-size:100% 100%;  font-size:0.18rem; display: flex;align-items: center; justify-content:center; color:#fff;}


.d3 .muboxli{ border-radius:6px;  color:#000  }
.d2 .proboxli{ width:49%;  height:30%; border-radius:0px; margin-bottom:4.5%; background:none}
.d2 .boxppr a{ background:url(../img/buy2.png) no-repeat left top; background-size:100% 100%;}
.d2 .jiage{ color:#000}


.mboxtop{ width:100%; float:left; position:relative; height:78%; }
.mboxdn{ width:100%; float:right; position:relative; height:16%; }
.fboxRli{height:100%;box-sizing:border-box; width:7.33%; float:left; writing-mode: tb-lr;writing-mode: vertical-lr;background:#74d5e7; margin-right:1%; color:#fff; font-size:0.22rem;display: flex;align-items: center; justify-content:center;}
.fboxRli:nth-child(11){ margin-right:0px;}






.curr1{ background:#186c7c;}
.curr2{ background:#42b6cc;}
.curr3{ background:#8feeff;}
.curr4{ background:#32a4b9; color:#fff !important;}



.pbox{ width:100%; height:70%; left:0; border-radius:0.3rem;  position:absolute; top:11%;}
.comtxt{ width:98%; height:100%; overflow-y:auto; }
.comtxt p{ font-size:0.22rem; line-height:0.34rem; text-align:justify; color:#fff}
.comtxtimg{ position:absolute; width:92%; left:4%; top:16%;}

.projd{ position: relative; width:100%; height:100%;}
.projdli{ position:absolute; width:100%; height:100%; top:0; left:0}
.projdlib{ width:100%; height:30%; margin-bottom:3%; background:#fff; overflow:hidden; border-radius: 0.2rem;}
.jdimg{ width:47.5%; height:100%; float:left; background:#ccc;}
.jdimgr{width:48%; height:100%; float:left; margin-left:2%; position:relative}
.jdbt1{ width:100%; height:auto; margin-top:8px;}

.jdbt1 p{ width:100%; padding-top:2px; padding-bottom:2px; box-sizing:border-box; line-height:0.3rem;font-size:0.23rem;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;
  line-clamp: 1;-webkit-box-orient: vertical; font-weight:bold; text-align:left; color:#000 }
.jdbt2{ width:100%; height:auto;}
.jdbt2 p{ width:100%; padding-top:1px; padding-bottom:1px; box-sizing:border-box; line-height:0.24rem; font-size:0.16rem;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;
  line-clamp: 1;-webkit-box-orient: vertical; text-align:left; color:#6067f3 }

.jdboxppr{ height:26%; width:100%; position:absolute; left:0; bottom:0px; box-sizing:border-box;}
.jdboxppr a{ width:80%; height:100%; background:url(../img/bt.png) no-repeat left top; background-size:100% 100%;  font-size:0.2rem; display: flex;align-items: center; justify-content:left; position:absolute; right:-35%; top:0 ; text-indent:0.3rem; color:#fff; border-radius:0.15rem 0 0 0;}
.probox2 .bt2 p{text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;
  line-clamp:3; color:#999}

.boxppr2{ height:12%; width:80%; position:absolute; left:10%; bottom:0px; box-sizing:border-box;}


.boxppr2 a{ width:100%; height:100%; background:url(../img/bt.png) no-repeat left top; background-size:100% 100%;  font-size:0.2rem; display: flex;align-items: center; justify-content:center;  color:#fff; border-radius:0.15rem 0.15rem 0 0;}

.mboxtopli{ width:100%; height:100%; position:absolute; top:0; left:0}
.youji{ width:100%;  height:89%; top:11%; position:relative;background:#fff }
.youimg a{display:block; width:100%;height:100%;}


.yuanqq{ width:74%; position:absolute; left:12%; top:30%; box-sizing:border-box; z-index:2}
.toux{ background:rgba(255,255,255,0.6); position:absolute; border-radius:100%; z-index:22; overflow:hidden; top:-12%; left:41%; border:3px solid #32a4b9; width:18%;  box-sizing:border-box;}
.touxing img{ border-radius:100%; }

.youtxx{ position:absolute; top:14%; width:80%; height:auto; left:10%;}
.youtx{ position:absolute; top:21%; width:80%; height:auto; left:10%;}

.youtx p,.youtxx p{ width:100%; padding-top:2px; padding-bottom:2px; box-sizing:border-box; line-height:0.3rem;font-size:0.23rem;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;
  line-clamp: 1;-webkit-box-orient: vertical; font-weight:bold; text-align:center; color:#7d7d7d }
  .youtxx p{ font-size:0.22rem;}
 .youimg{ width:100%; position:absolute; left:0; bottom:0; height:69%;} 
  
  
.youlik{position:absolute; top:85%; width:32%; height:auto; left:34%;}
.youlik a{ width:100%; height:100%; position:absolute; left:0; top:0;  font-size:0.2rem; display: flex;align-items: center; justify-content:center;  color:#fff;}


.prowl{ position: relative; width:100%; height:100%;}


.chuan{ position:absolute; width:6.5%; left:40.5%; top:46.5%;animation: myp3 linear infinite 1.2s;}
@-webkit-keyframes myp3{       
		 
						0%{transform:scale(1);}
		 
				50%{transform:scale(0.8);}
		 
				100%{transform:scale(1);}
			}



.palce{ position: absolute; display:none; width:14%;  animation: mypl linear infinite 1.2s;}
.palce2{ animation: myp2 linear infinite 2.2s;}
@-webkit-keyframes myp2{       
		 
				0%{transform:scale(1);}
		 
				50%{transform:scale(1.06);}
		 
				100%{transform:scale(1);}
			}
@-webkit-keyframes mypl{       
		 
				0%{transform:scale(1);}
		 
				50%{transform:scale(1.2);}
		 
				100%{transform:scale(1);}
			}



.proboxli .bt2{ width:93%; height:auto;}
.bt2 p{ width:100%; padding-top:1px; padding-bottom:1px; box-sizing:border-box; line-height:0.24rem; font-size:0.12rem;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;
  line-clamp: 1;-webkit-box-orient: vertical; text-align:left; color:#6067f3; }



.projdlib .jiage,.projdlib .price2{ color:#000;}




 .xcurr .condh{ display:block; animation: cont ease-in-out forwards 0.5s;}
@-webkit-keyframes cont{       
		 
				0%{transform:scale(0.5); opacity:1}
		 
				80%{transform:scale(1); opacity:1}
		 100%{transform:scale(1);opacity:0}
				
			}




@-webkit-keyframes changeright{       
		 
				0%{-webkit-transform:rotate(0deg);}
		 
				50%{-webkit-transform:rotate(180deg);}
		 
				100%{-webkit-transform:rotate(360deg);}
			}
			/*自定义动画类----逆时针旋转（使用这个动画的时候才设置动画执行时间）*/
			@-webkit-keyframes changeleft{
		 
				0%{-webkit-transform:rotate(0deg);}
		 
				50%{-webkit-transform:rotate(-180deg);}
		 
				100%{-webkit-transform:rotate(-360deg);}
			}



.shaky{transition: transform 0.6s ease-out;
    transition: transform .5s ease-in-out;
    -webkit-transition: transform .5s ease-in-out;
    -moz-transition: transform .5s ease-in-out;
    -ms-transition: transform .5s ease-in-out;
    -o-transition: transform .5s ease-in-out;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
   
    animation: turnOut_actSpTips linear infinite 4.8s;
    -webkit-animation: turnOut_actSpTips linear infinite 4.8s;}
@-webkit-keyframes turnOut_actSpTips{0%{transform: rotateY(0deg);}5%{transform: rotateY(-280deg);}10%{transform: rotateY(-540deg);}50%{transform: rotateY(-540deg);}55%{transform: rotateY(-260deg);}60%{transform: rotateY(-0deg);}100%{transform: rotateY(-0deg);}}
@keyframes turnOut_actSpTips{0%{transform: rotateY(0deg);}10%{transform: rotateY(-180deg);}50%{transform: rotateY(-180deg);}60%{transform: rotateY(-360deg);}100%{transform: rotateY(-360deg);}}
