@charset "utf-8";
html,body {position: relative;height: 100%; min-width: 320px;}
body {font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;}

.swiper {width: 100%;height: 100%;}
.swiper-slide {text-align: center;font-size: 18px;background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}


/*.swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}*/

.pages1{ background:url(../img/bg01.jpg) no-repeat center center !important; background-size: 100% 100%;}	
.pages2{ background:url(../img/bg02.jpg) no-repeat center center !important; background-size: 100% 100%;}	
.pages3{ background:url(../img/bg03.jpg) no-repeat center center !important; background-size: 100% 100%;}	
.pages4{ background:url(../img/bg04.jpg) no-repeat center center !important; background-size: 100% 100%;}	
.pages5{ background:url(../img/bg05.jpg) no-repeat center center !important; background-size: 100% 100%;}	
.pages6{ background:url(../img/bg06.jpg) no-repeat center center !important; background-size: 100% 100%;}	

.ititle{margin-bottom: .3rem !important;}
.ititle h2{font-size: .4rem !important; }

.swiper-pagination-vertical.swiper-pagination-bullets, .swiper-vertical > .swiper-pagination-bullets{ right: 36px;}
.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: var(--swiper-pagination-bullet-vertical-gap,23px) 0;}
.swiper-pagination-bullet{ width: 12px; height: 12px; background: #6b635f;}
.swiper-pagination-bullet.swiper-pagination-bullet-active{ background: #fff;}
#fp-nav ul li, .fp-slidesNav ul li{ width:12px; height:12px;  padding:11px 0;}
#fp-nav ul li a span, .fp-slidesNav ul li a span{ width: 12px; height: 12px; background: #6b635f; margin:0; left:0; top:0; }
#fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span{ background: #fff; margin:0;}
#fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span{ width:12px; height:12px;  margin:0;}

#baona .swiper-slide{ overflow:hidden;}

#box01 .mc{ position: absolute; top: 20%; left: 0; width: 100%; text-align: center;}
#box01 .item01 img{ width: 2.46rem; height: 1.5rem; margin-bottom: .38rem;}
#box01 .item02{ position: relative;}
#box01 .item02 img{ width: 14.36rem; height: 1.18rem; margin-bottom: .65rem;}
#box01 .item02 .line{position: absolute; top: 1.46rem; left: 50%; margin-left: -63px; display: block; width: 126px; height: 2px; background: #fff;}
#box01 .item03 img{ width: 4.43rem; height: .43rem; margin-bottom: .52rem;}
#box01 .item04 img{ width: 7.16rem; height: 1.23rem; margin-bottom: .6rem;}
#box01 .item05 img{ width: 4.71rem; height: .66rem; }

#box02{ overflow: hidden;}
#box02 .mc{ position: absolute; top: 14%; left: 0; width: 100%; text-align: center;}
#box02 .item01 img{ width: 2.01rem; height: .79rem; margin-bottom: .6rem;}
#box02 .item01 .line{position: absolute; top: 1.02rem; left: 50%; margin-left: -43px; display: block; width: 86px; height: 3px; background: #d4b578;}
#box02 .item02 img{ width: 11rem; height: 1.3rem; margin-bottom: .42rem;}
#box02 .item03 img{ width: 4.82rem; height: 1.05rem; margin-bottom: .41rem; opacity: .39}

#box03 .mc{ position: absolute; top: 20%; left: 0; width: 100%; text-align: center;}
#box03 .item01 img{ width: 2.02rem; height: .78rem; margin-bottom: .6rem;}
#box03 .item01 .line{position: absolute; top: 1.04rem; left: 50%; margin-left: -43px; display: block; width: 86px; height: 3px; background: #d4b578;}
#box03 .item02 img{ width: 4.76rem; height: .62rem; margin-bottom: .42rem;}

#prolist{}

#prolist .swiper{  width: 14.64rem; margin: 0 auto;}
#prolist .mySwiper{ width: 12rem; margin: 0 auto; overflow: hidden;}

#prolist .swiper .swiper-wrapper{ }
#prolist .swiper-slide {text-align: center;font-size: 18px;background: none;display: block;}
#prolist .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}
#prolist .swiper-button-next:after, #prolist .swiper-button-prev:after{ display: none;}
#prolist .swiper-button-next, #prolist .swiper-button-prev{ width: .66rem; height: .66rem; background: #484441; opacity: .8; border-radius: 100%}
#prolist .swiper-button-next{ right:0px;}
#prolist .swiper-button-prev{ left:0px;}
#prolist .swiper-button-next:before, #prolist .swiper-button-prev:before{ content: '';  width: 100%; height: 100%; }
#prolist .swiper-button-next:before{ background:url(../img/pages3/arrr.png) no-repeat center; background-size: .19rem .36rem;}
#prolist .swiper-button-prev:before{ background:url(../img/pages3/arrl.png) no-repeat center; background-size: .19rem .36rem;}
#prolist .swiper-button-next:hover, #prolist .swiper-button-prev:hover{opacity: 1;}

#prolist .swiper-slide{ width: 25%;}
#prolist .swiper-slide .pic{width: 100%; position: relative; z-index: 99;}
#prolist .swiper-slide .pic:before{ content: ""; width: 100%; height: 100%; z-index: 1; position: absolute; left: 0; top: 0; background: #606060; opacity: .7;}
#prolist .swiper-slide:nth-child(2n) .pic:before{content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0;  background: #383635; opacity: .7;}
#prolist .swiper-slide .pic img{ width: 100%;  position: relative; z-index: 99; }
#prolist .swiper-slide .info{ width: 100%; height: 72px; position: relative; z-index: 99;}
#prolist .swiper-slide .info:before{ content: ""; width: 100%; height: 100%;  z-index: 1; position: absolute; left: 0; top: 0; background: #35383d; opacity: .7;}
#prolist .swiper-slide:nth-child(2n) .info:before{content: ""; width: 100%; height: 100%;  z-index: 1; position: absolute; left: 0; top: 0; background: #434343; opacity: .7;}
#prolist .swiper-slide .info .line{ height: 18px; position: relative; z-index: 99; }
#prolist .swiper-slide .info .line:before{ content: ""; display: block; width: 30px; height: 1px; background: #fff; position: absolute; top: 12px; left: 50%; margin-left: -15px;}
#prolist .swiper-slide .info .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap; width: 90%; margin: 0 auto; text-align: center; height: 20px; color: #fff;}
#prolist .swiper-slide .info .name a{ font-size: .16rem; color: #fff; position: relative; z-index: 99}
#prolist .swiper-slide .info .num{ font-size: 16px; color: #a37c03; position: relative; z-index: 99}


#box04{ overflow: hidden;}
#box04 .mc{ position: absolute; top: 20%; left: 0; width: 100%; text-align: center;}
#box04 .item01 img{ width: 2rem; height: .78rem; margin-bottom: .98rem;}
#box04 .item01 .line{position: absolute; top: 1.02rem; left: 50%; margin-left: -43px; display: block; width: 86px; height: 3px; background: #d4b578;}

#box05{ overflow: hidden;}
#box05 .mc{ position: absolute; top: 22%; left: 0; width: 100%; text-align: center;}
#box05 .item01 img{ width: 2rem; height: .78rem; margin-bottom: .98rem;}
#box05 .item01 .line{position: absolute; top: 1.02rem; left: 50%; margin-left: -43px; display: block; width: 86px; height: 3px; background: #d4b578;}
.videoslist{ max-width: 14.24rem; width: 100%; margin: 0 auto;}


#box05 .videolist { position:relative; width:7.04rem; height:4.06rem; }
#box05 .videolist .vimg{ width:7.04rem; height:4.06rem;}
#box05 .videolist:nth-child(1){ float: left;}
#box05 .videolist:nth-child(2){ float: right;}
#box05 .videolist:hover{ cursor: pointer; }
#box05 .videoed { display:none; width:64px; height:64px; position: absolute; left:50%; margin-left: -32px; top:50%; margin-top: -32px; z-index:99; border-radius:100%; }
#box05 .videos{ display:none; position: absolute;width: 800px;height: 600px; background: #000;top: 0;left:0;right:0;bottom:0; margin: auto;}
#box05 .vclose { position:absolute;right:1%; top:1%; border-radius:100%; cursor: pointer; }
#video{ width:800px; height:600px; }

#box06{ overflow: hidden;}
#box06 .mc{ position: absolute; top: 22%; left: 0; width: 100%; text-align: center;}
#box06 .item01 img{ width: 2rem; height: .78rem; margin-bottom: .94rem;}
#box06 .item01 .line{position: absolute; top: 1.02rem; left: 50%; margin-left: -43px; display: block; width: 86px; height: 3px; background: #d4b578;}
#box06 .item02{width: 370px; height: 44px; margin: 0 auto; margin-bottom: .4rem;}
#box06 .item02 img{ width: 100%;}
#box06 .item02 .item:nth-child(1){ float: left;}
#box06 .item02 .item:nth-child(2){ float: right;}
#box06 .item03{ /*width: 9.9rem;*/ height: 1.59rem; margin: 0 auto; margin-bottom: .33rem; text-align: center;}
#box06 .item03 p{ font-size:.24rem; line-height: .4rem; color: #fff; letter-spacing: 1px;}
#box06 .item04{ text-align: center; margin: 0 auto;}
#box06 .item04 .item{ width: 1.83rem; height: 1.83rem; display: inline-block;}
#box06 .item04 .item:nth-child(2){ margin: 0 1.07rem;}
#box06 .item04 .item img{ width: 100%; height: 100%;}




/* pc↓ */
@media screen and (max-width:1440px) {
#box02 #aboutlist .swiper-slide{ width: 460px !important; height: 288px !important;}
#box02 #aboutlist .swiper-paginations{ bottom: 0 !important;}
}


@media screen and (max-width:1200px) {
#box01 .item03 img{ margin-bottom: .52rem;}
#box01 .item04 img{ margin-bottom: .5rem;}

#box02 .item03 img{width: 3.8rem; height: auto; margin-bottom: .4rem;}	
#box02 #aboutlist .swiper-slide{ width: 300px !important; height: 188px !important;}

#box04 #certify{ width: 100% !important;}	
#box04 #certify .swiper-slide{ width: 260px !important; height: 365px !important;}	
#box04 #certify .certifybg{ display: none !important;}
	
#box05 .videos{ width: 600px; height: 450px;}
#box05 #video{ width: 100%; height: 100%; }	
	
}
@media screen and (max-width:1200px) {
	#box02 .mc{top: 20%;}
	
}

/* pad↓ */
@media screen and (max-width:1024px) and (min-width:900px){
	.header ul li{ font-size: 12px;}
	
	#box01 .item01 img{width: 3.46rem;  height: auto;}
	#box01 .item02 img{width: 17.36rem; height: auto; margin-bottom: 1.25rem;}
	#box01 .item02 .line{top: 1.9rem;}
	#box01 .item03 img{width: 7.43rem; height: auto;}
	#box01 .item04 img{width: 8.16rem; height: auto;}
	#box01 .item05 img{  width: 6.71rem; height: auto;}	
	
	
	#box02 .item02 img{width: 14rem; height: auto; margin-bottom: .6rem;}
	#box02 .item03 img{width: 4.8rem; height: auto; margin-bottom: .5rem;} 
	
	
}


@media screen and (max-width:1000px) {
	.mc{ padding: 0 10px;}
	#aboutlist{ width: 100% !important;}	
}

@media screen and (max-width:800px) {
#prolist { padding: 0 10px;}
#prolist .swiper{ width: 100%;}	
#prolist .mySwiper	{ width: 100%;}	
}

@media screen and (max-width:720px) {
#box05 .mc{ padding: 0 30px;}	
#box05 .videolist {width: 48%; margin: 0 1%; height:auto;}
#box05 .videolist .vimg{ width: 100%; height: 100%;}	
}



/* phone 640↓ */
@media screen and (max-width:640px) {
	#box04 #certify .swiper-slide{ width: 220px !important; height: 309px !important;}
}


@media screen and (max-width:600px) {
#box01 .item02 img{ width:100%; height:auto;}
#box01 .item02 .line{margin-left: -.63rem; width: 1.26rem; top: 1rem;}	
#box02 .item02 img{ width:100%; height:auto;}

#aboutlist .swiper-slide{ width: 300px; height: 238px;}	
	
#box05 .videos{ width: 90%; height:300px;}

#box05 .videolist {width: 100%; margin: 0; margin-bottom: 20px; height:auto;}
}


@media screen and (max-width:550px) {
#box06 .item03{height: auto; }			
#box06 .item03 p{ font-size: 15px; line-height: 22px; }	
}

@media screen and (max-width:412px) {

#box06 .item02{width: 100%; }	
#box06 .item04 .item:nth-child(2){margin: 0 .3rem;}

}

@media screen and (max-width:411px) {
#box06 .item04 .item:nth-child(2){margin: 0 .2rem;}	
}	

@media screen and (max-width:375px) {
	#box01 .item02 img{ width:100%; height: auto;}
	#box01 .item02 .line{width: 1.26rem;  margin-left: -.63rem; top: .95rem; height: 1px;}
	
}

@media screen and (max-width:320px) {
	#box01 .item02 img{ width:100%; height: auto;}
	#box01 .item02 .line{top: .85rem;}
	#box01 .item04 img{ width: 100%; height: auto;}
	
}