/**- public -**/
img{ display: block; }
.ovh{ overflow: hidden; display: block; }
.fl{ float: left; display: block; }
.fr{ float: right; display: block; }
.por{ position: relative; }
.poa{ position: absolute; }
.pof{ position: fixed; }
.pcshow{ display: block; }
.moshow{ display: none; }


/******************************- index.html -*****************************/
/**- header -**/



/**- footer -**/



/**- menu -**/


/**- home -**/

.banner,.banner .slick-list,.banner .slick-track{ width: 100%; height:100%; top: 0; left: 0; }
.banner .slick-slide{ display: block; margin: 0; overflow: hidden; background-position: center; background-repeat: no-repeat;}
.banner img{ width: 100%; }
.banner .slick-dots{ bottom: 26px; overflow: hidden; position: absolute; left: 0; width: auto; left: 20.8%; }
.banner .slick-dots li{ width: 30px; height: 20px; margin: 0; }
.banner .slick-dots button{ width: 30px; height: 20px; border: 0; background: url(../images/h_dot1.png) center center no-repeat; }
.banner .slick-dots li.slick-active button{ background: url(../images/h_dot2.png) center center no-repeat; }

.ban_img{ width: 100%; height: 100%; background-size: cover !important; }
.slick-slide.slick-active .ban_img,.swiper-slide.swiper-slide-active .ban_img{ transform: scale(1.1); }
.btext11{ position: absolute; top: 38.4%; left: 20.57%; width: 14%; }
.btext12{ position: absolute; top: 38.4%; left: 34.57%; width: 5%; }
.btext13{ position: absolute; top: 38.4%; left: 39.57%; width: 17%; }
.btext14{ position: absolute; top: 38.4%; left: 56.57%; width: 16%; }
.btext15{ position: absolute; top: 38.4%; left: 72.57%; width: 16%; }

.btext2, .btext3{ width: 60%; left: 20.57%; top: 60%; margin-top: -95px; text-align:center; }
.btext2 h2, .btext3 h2{ font-family: Shsno,"微软雅黑"; font-weight: normal; font-size: 72px; color: #fff; line-height: 86px; letter-spacing: 8px; }
.btext2 p, .btext3 p{ font-family: Aller,Arial; font-size: 30px; color: #fff; line-height: 46px; }
.btext2 div, .btext3 div{ width: 100%; height: 77px; overflow: hidden; display: block; position: relative; margin-top: -14px; }
.btext2 i,.btext3 i{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(../images/btext23.png) left top repeat-x; background-size: 100% 100%; }

.btext3{ margin-top: -150px; }
.btext3 div{ margin-top: 0; }




/************- animation -************/

.banner .slick-dots button{ transition: all 0.35s linear; -webkit-transition: all 0.35s linear; -moz-transition: all 0.35s linear; -o-transition: all 0.35s linear; }
.ban_img,.bra_pic div,.scul_img{ transition: all 4s linear 0s; -webkit-transition: all 4s linear 0s; -moz-transition: all 4s linear 0s; -o-transition: all 4s linear 0s; }

.container .title h2,.page_news .title h2{
    animation: tih 0.7s ease-out 0s;
    -webkit-animation: tih 0.7s ease-out 0s;
    -moz-animation: tih 0.7s ease-out 0s;
    -o-animation: tih 0.7s ease-out 0s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    opacity: 1; margin-top: 0;
}
.culture.active .title h2,.product.active .title h2{
    animation: tih 0.7s ease-out 0.6s;
    -webkit-animation: tih 0.7s ease-out 0.6s;
    -moz-animation: tih 0.7s ease-out 0.6s;
    -o-animation: tih 0.7s ease-out 0.6s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    opacity: 1; margin-top: 0;
}
@keyframes tih{ 0%{ opacity: 0; margin-top: 50px; }100%{ opacity: 1; margin-top: 0; } }
@-webkit-keyframes tih{ 0%{ opacity: 0; margin-top: 50px; }100%{ opacity: 1; margin-top: 0; } }
@-moz-keyframes tih{ 0%{ opacity: 0; margin-top: 50px; }100%{ opacity: 1; margin-top: 0; } }
@-o-keyframes tih{ 0%{ opacity: 0; margin-top: 50px; }100%{ opacity: 1; margin-top: 0; } }

.container .title h3,.page_news .title h3{
    animation: tich 0.7s ease-out 0s;
    -webkit-animation: tich 0.7s ease-out 0s;
    -moz-animation: tich 0.7s ease-out 0s;
    -o-animation: tich 0.7s ease-out 0s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    opacity: 1;
}
.culture.active .title h3,.product.active .title h3{
    animation: tich 0.7s ease-out 0.6s;
    -webkit-animation: tich 0.7s ease-out 0.6s;
    -moz-animation: tich 0.7s ease-out 0.6s;
    -o-animation: tich 0.7s ease-out 0.6s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    opacity: 1;
}
@keyframes tich{ 0%{ opacity: 0; }100%{ opacity: 1; } }
@-webkit-keyframes tich{ 0%{ opacity: 0; }100%{ opacity: 1; } }
@-moz-keyframes tich{ 0%{ opacity: 0; }100%{ opacity: 1; } }
@-o-keyframes tich{ 0%{ opacity: 0; }100%{ opacity: 1; } }

.container .cul_line,.page_news .cul_line{
    animation: tiline 0.7s ease-out 0.2s;
    -webkit-animation: tiline 0.7s ease-out 0.2s;
    -moz-animation: tiline 0.7s ease-out 0.2s;
    -o-animation: tiline 0.7s ease-out 0.2s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    opacity: 1; width: 100%;
}
.culture.active .cul_line,.product.active .cul_line{
    animation: tiline 0.7s ease-out 0.6s;
    -webkit-animation: tiline 0.7s ease-out 0.6s;
    -moz-animation: tiline 0.7s ease-out 0.6s;
    -o-animation: tiline 0.7s ease-out 0.6s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    opacity: 1; width: 100%;
}
@keyframes tiline{ 0%{ width: 0; }100%{  width: 100%; } }
@-webkit-keyframes tiline{ 0%{ width: 0; }100%{ width: 100%; } }
@-moz-keyframes tiline{ 0%{ width: 0; }100%{  width: 100%; } }
@-o-keyframes tiline{ 0%{ width: 0; }100%{ width: 100%; } }

.res_main{
    animation: resmian 0.7s ease-out 0s;
    -webkit-animation: resmian 0.7s ease-out 0s;
    -moz-animation: resmian 0.7s ease-out 0s;
    -o-animation: resmian 0.7s ease-out 0s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    opacity: 1; padding-top: 0;
}
@keyframes resmian{ 0%{ opacity: 0; padding-top: 50px; }100%{ opacity: 1; padding-top: 0; } }
@-webkit-keyframes resmian{ 0%{ opacity: 0; padding-top: 50px; }100%{ opacity: 1; padding-top: 0; } }
@-moz-keyframes resmian{ 0%{ opacity: 0; padding-top: 50px; }100%{ opacity: 1; padding-top: 0; } }
@-o-keyframes resmian{ 0%{ opacity: 0; padding-top: 50px; }100%{ opacity: 1; padding-top: 0; } }

/*.ms-right:hover .ms-section div{
    animation: mrise 2s ease-out 0s;
    -webkit-animation: mrise 2s ease-out 0s;
    -moz-animation: mrise 2s ease-out 0s;
    -o-animation: mrise 2s ease-out 0s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    opacity: 1; padding-top: 0;
}
@keyframes mrise{ 
	0%{ filter:blur(5px); -webkit-filter:blur(5px); -moz-filter:blur(5px); -ms-filter:blur(5px); -o-filter:blur(5px); }
	100%{ filter:blur(0); -webkit-filter:blur(0); -moz-filter:blur(0); -ms-filter:blur(0); -o-filter:blur(0); }
}*/
/*@-webkit-keyframes resmian{ 0%{ opacity: 0; padding-top: 50px; }100%{ opacity: 1; padding-top: 0; } }
@-moz-keyframes resmian{ 0%{ opacity: 0; padding-top: 50px; }100%{ opacity: 1; padding-top: 0; } }
@-o-keyframes resmian{ 0%{ opacity: 0; padding-top: 50px; }100%{ opacity: 1; padding-top: 0; } }
*/


.main,.porf_bg1,.porf_bg2{
	animation: main 2.5s ease-out 0s;
	-webkit-animation: main 2.5s ease-out 0s;
	-moz-animation: main 2.5s ease-out 0s;
	-o-animation: main 2.5s ease-out 0s;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	opacity: 1;
}
@keyframes main{ 0%{ opacity: 0; }100%{ opacity: 1; } }
@-webkit-keyframes main{ 0%{ opacity: 0; }100%{ opacity: 1; } }
@-moz-keyframes main{ 0%{ opacity: 0; }100%{ opacity: 1; } }
@-o-keyframes main{ 0%{ opacity: 0; }100%{ opacity: 1; } }

.slick-slide.slick-active .btext2 h2,.slick-slide.slick-active .btext3 h2,
.swiper-slide.swiper-slide-active .btext2 h2,.swiper-slide.swiper-slide-active .btext3 h2{
	animation: btexth 0.7s ease-out 0.4s;
	-webkit-animation: btexth 0.7s ease-out 0.4s;
	-moz-animation: btexth 0.7s ease-out 0.4s;
	-o-animation: btexth 0.7s ease-out 0.4s;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	opacity: 1; margin-top: 0;
}
@keyframes btexth{ 0%{ opacity: 0; margin-top: 50px; }100%{ opacity: 1; margin-top: 0; } }
@-webkit-keyframes btexth{ 0%{ opacity: 0; margin-top: 50px; }100%{ opacity: 1; margin-top: 0; } }
@-moz-keyframes btexth{ 0%{ opacity: 0; margin-top: 50px; }100%{ opacity: 1; margin-top: 0; } }
@-o-keyframes btexth{ 0%{ opacity: 0; margin-top: 50px; }100%{ opacity: 1; margin-top: 0; } }

.slick-slide.slick-active .btext2 p,.slick-slide.slick-active .btext3 p,
.swiper-slide.swiper-slide-active .btext2 p,.swiper-slide.swiper-slide-active .btext3 p{
	animation: btextp 0.7s linear 1s;
	-webkit-animation: btextp 0.7s linear 1s;
	-moz-animation: btextp 0.7s linear 1s;
	-o-animation: btextp 0.7s linear 1s;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	opacity: 1; margin-top: 0;
}
@keyframes btextp{ 0%{ opacity: 0; margin-top: 20px; }100%{ opacity: 1; margin-top: 0; } }
@-webkit-keyframes btextp{ 0%{ opacity: 0; margin-top: 20px; }100%{ opacity: 1; margin-top: 0; } }
@-moz-keyframes btextp{ 0%{ opacity: 0; margin-top: 20px; }100%{ opacity: 1; margin-top: 0; } }
@-o-keyframes btextp{ 0%{ opacity: 0; margin-top: 20px; }100%{ opacity: 1; margin-top: 0; } }

.slick-slide.slick-active .btext2 i,.slick-slide.slick-active .btext3 i,
.swiper-slide.swiper-slide-active .btext2 i,.swiper-slide.swiper-slide-active .btext3 i{
	animation: btexti 0.7s linear 1.4s;
	-webkit-animation: btexti 0.7s linear 1.4s;
	-moz-animation: btexti 0.7s linear 1.4s;
	-o-animation: btexti 0.7s linear 1.4s;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	opacity: 1; width: 100%;
}
@keyframes btexti{ 0%{ opacity: 0; width: 0; }100%{ opacity: 1; width: 100%; } }
@-webkit-keyframes btexti{ 0%{ opacity: 0; width: 0; }100%{ opacity: 1; width: 100%; } }
@-moz-keyframes btexti{ 0%{ opacity: 0; width: 0; }100%{ opacity: 1; width: 100%; } }
@-o-keyframes btexti{ 0%{ opacity: 0; width: 0; }100%{ opacity: 1; width: 100%; } }

/*.slick-slide.slick-active .btext3 i{
	animation: btexti3 0.7s linear 1.4s;
	-webkit-animation: btexti3 0.7s linear 1.4s;
	-moz-animation: btexti3 0.7s linear 1.4s;
	-o-animation: btexti3 0.7s linear 1.4s;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	opacity: 1; margin-top: 0;
}
@keyframes btexti3{ 0%{ opacity: 0; margin-top: 20px; }100%{ opacity: 1; margin-top: 0; } }
@-webkit-keyframes btexti3{ 0%{ opacity: 0; margin-top: 20px; }100%{ opacity: 1; margin-top: 0; } }
@-moz-keyframes btexti3{ 0%{ opacity: 0; margin-top: 20px; }100%{ opacity: 1; margin-top: 0; } }
@-o-keyframes btexti3{ 0%{ opacity: 0; margin-top: 20px; }100%{ opacity: 1; margin-top: 0; } }
*/

.slick-slide.slick-active .btext11,.swiper-slide.swiper-slide-active .btext11{
	animation: pfimg 0.3s ease-out 0s;
	-webkit-animation: pfimg 0.3s ease-out 0s;
	-moz-animation: pfimg 0.3s ease-out 0s;
	-o-animation: pfimg 0.3s ease-out 0s;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	opacity: 1; margin-left: 0;
}
.slick-slide.slick-active .btext12,.swiper-slide.swiper-slide-active .btext12{
	animation: pfimg 0.3s ease-out 0.2s;
	-webkit-animation: pfimg 0.3s ease-out 0.2s;
	-moz-animation: pfimg 0.3s ease-out 0.2s;
	-o-animation: pfimg 0.3s ease-out 0.2s;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	opacity: 1; margin-left: 0;
}
.slick-slide.slick-active .btext13,.swiper-slide.swiper-slide-active .btext13{
	animation: pfimg 0.3s ease-out 0.4s;
	-webkit-animation: pfimg 0.3s ease-out 0.4s;
	-moz-animation: pfimg 0.3s ease-out 0.4s;
	-o-animation: pfimg 0.3s ease-out 0.4s;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	opacity: 1; margin-left: 0;
}
.slick-slide.slick-active .btext14,.swiper-slide.swiper-slide-active .btext14{
	animation: pfimg 0.3s ease-out 0.6s;
	-webkit-animation: pfimg 0.3s ease-out 0.6s;
	-moz-animation: pfimg 0.3s ease-out 0.6s;
	-o-animation: pfimg 0.3s ease-out 0.6s;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	opacity: 1; margin-left: 0;
}
.slick-slide.slick-active .btext15,.swiper-slide.swiper-slide-active .btext15{
	animation: pfimg 0.3s ease-out 0.8s;
	-webkit-animation: pfimg 0.3s ease-out 0.8s;
	-moz-animation: pfimg 0.3s ease-out 0.8s;
	-o-animation: pfimg 0.3s ease-out 0.8s;
	animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	opacity: 1; margin-left: 0;
}




/************- @media -************/
@media screen and (max-width:1700px) {



	.btext3{ margin-top: -130px; }
	.btext2 h2, .btext3 h2 { font-size: 64px; line-height: 76px; letter-spacing: 14px; }
	.btext2 p, .btext3 p { font-size: 24px; line-height: 40px; }
	.btext2 div, .btext3 div{ height: 66px; }

}

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

}

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


	.btext2{ margin-top: -70px; }
	.btext3{ margin-top: -110px; }
	.btext2 h2, .btext3 h2 { font-size: 52px; line-height: 66px; letter-spacing: 10px; }
	.btext2 p, .btext3 p { font-size: 20px; line-height: 32px; }
	.btext2 div, .btext3 div{ height: 56px; }


}

@media screen and (max-width:1400px) and (max-height:800px) {

}

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

}

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


	.btext2{ margin-top: -70px; }
	.btext3{ margin-top: -110px; }
	.btext2 h2, .btext3 h2 { font-size: 44px; line-height: 56px; letter-spacing: 6px; }
	.btext2 p, .btext3 p { font-size: 18px; line-height: 28px; }
	.btext2 div, .btext3 div{ height: 50px; }


}

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


	.btext11,.btext12,.btext13,.btext14,.btext15{ top: 41%; }
	.btext2{ margin-top: -90px; }
	.btext3{ margin-top: -110px; }
	.btext2 h2, .btext3 h2 { font-size: 38px; line-height: 48px; letter-spacing: 6px; }
	.btext2 p, .btext3 p { font-size: 18px; line-height: 28px; }
	.btext2 div, .btext3 div{ height: 46px; }


}

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

	.banner{ height: 636px; }
	.swiper-pagination-bullet{ width: 16px; height: 16px; }
	.btext2, .btext3{ width: 97%; left: 3%; margin-top: -60px; }
	.btext2 h2, .btext3 h2{ font-size: 34px; line-height: 40px; letter-spacing: 0; }
	.btext2 p, .btext3 p{ font-size: 14px; line-height: 16px; }
	.btext2 div, .btext3 div{ height: 40px; }
	.btext2 div{ margin-top: 0; }
	.ban_img{ background-position: 45% center !important; }

	.banner .swiper-pagination{ bottom: 26px; overflow: hidden; position: absolute; left: 0; width: auto; left: 3%; }
	.banner .swiper-pagination-bullet{ width: 20px; height: 20px; border: 0; border-radius: 0; background: url(../images/h_dot1.png) center center no-repeat; background-size: 100% 100%; }
	.banner .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: url(../images/h_dot2.png) center center no-repeat; background-size: 100% 100%; }
    .btext11{ width: 18.2%; left: 5.8%; }
    .btext12{ width: 6.5%; left: 24%; }
    .btext13{ width: 22.1%; left: 30.5%; }
    .btext14{ width: 20.8%; left: 52.6%; }
    .btext15{ width: 20.8%; left: 73.4%; }


}

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

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


}

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

	
	.banner{ height: 570px; }
	.btext2 h2, .btext3 h2{ font-size: 30px; line-height: 32px; }


}