@charset "utf-8";

.main{ width: 100%; min-width: 1200px; height: auto; overflow: hidden; position: relative;}

.section{ width: 100%; height: auto;}
.st_main{ width: 1200px; height: auto; margin: 0 auto;}




.st1{}
.st1 img{ display: block; width: 100%; height: auto;}




.st2{ width: 100%; height: auto; padding: 50px 0 100px;}
.st2 .st_main{ width: 83%; min-width: 1200px;}
.st2 .r1{}
.st2 .r1 p{ font-size: 20px; line-height: 200%; text-align: center;}

.st2 .r2{ margin-top: 40px;}
.st2 .r2 ul{ width: 100%; height: auto; display: flex; justify-content: space-between;}
.st2 .r2 ul li{ width: 30%; height: auto; padding: 15px 20px; background: url(../img/bg1.png) center center / 100% 100% no-repeat;}
.st2 .r2 ul li p{ text-indent: 2em; font-size: 22px; line-height: 140%; color: #fff;}
.st2 .r2 ul li p.xdd{ text-align: right;}

.st2 .r3{ margin-top: 40px;}
.st2 .r3 .title{ margin-bottom: 20px; font-size: 24px; font-weight: bold; line-height: 200%; text-align: center;}
.st2 .r3 p{ text-indent: 2em; font-size: 18px; line-height: 200%;}




.st3{ width: 100%; height: auto; padding: 50px 0; background-color: #F1F1F1;}
.st3 .r1{ width: 100%; height: auto; position: relative;}
.st3 .r1 video{ width: 100%; height: auto; position: relative;}
.st3 .r1:after{ display: block; content: " "; width: 98px; height: 98px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 50%; background: url(../img/play.png) center center / 100% 100% no-repeat; transition: all .2s ease-out 0s;}
.st3 .r1:active:after{ transform: translate(-50%,-50%) scale(1.1);}
.st3 .r1.on:after{ background: none;}
.st3 .r2{}
.st3 .r2 .title{ font-size: 24px; line-height: 1.5; text-align: center;margin-top: 10px;;}
.st3 .r2 .intro{}
.st3 .r2 .intro p{ text-indent: 2em; font-size: 18px; line-height: 200%; color: #646464;}




.st4{ width: 100%; height: auto;}
.st4 ul{ width: 100%; height: auto; overflow: hidden;}
.st4 ul li{ float: left; width: 50%; height: auto; padding-top: 28%; overflow: hidden; position: relative; background-size: 100% 100%; background-repeat: no-repeat; transition: all .2s ease-out 0s; cursor: pointer;}
.st4 ul li:before,
.st4 ul li:after{ display: block; content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transition: all .2s ease-out 0s;}
.st4 ul li:hover:before{ background-color: rgba(0,0,0,0.5);}
.st4 ul li:hover:after{ border: 4px solid #ebbc0c;}
.st4 ul li span{ display: block; width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 32px; color: #fff; transition: all .2s ease-out 0s;}
.st4 ul li:hover span{ color: #EBBC0C;}

.st4_layer{ width: 100%; height: 100%; position: fixed; top: 0; bottom: 0; z-index: 500; background-color: rgba(0,0,0,0.7); transition: all .2s ease-out 0s;}
.layer_bg{ width: 100%; height: 100%; position: absolute; top: 0; bottom: 0;}
.layer_main{ width: 960px; height: 540px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.layer_main .swiper-slide{ width: 960px; height: 540px;}
.layer_main .swiper-container-horizontal>.swiper-pagination-bullets{ bottom: 50px;}
.layer_main .swiper-pagination-bullet{ width: 50px; height: 5px; border-radius: 0; background-color: #fff;}
.layer_main .swiper-pagination-bullet-active{ color: #EBBC0C;}






.st5{ width: 100%; height: auto; padding: 50px 0;}
.st5 .r1{ text-align: center;}
.st5 .r1 span{ display: inline-block; position: relative; font-size: 30px; line-height: 200%; color: #C82020;}
.st5 .r1 span:before{ display: block; content: " "; width: 60%; height: 2px; position: absolute; bottom: 0; right: 53%; background-color: #C82020;}
.st5 .r1 span:after{ display: block; content: " "; width: 60%; height: 2px; position: absolute; bottom: 0; left: 53%; background-color: #C82020;}
.st5 .r1 .xwlb-t:before{width: 53%;}
.st5 .r1 .xwlb-t:after{width: 53%;}
.st5 .r2{ padding-top: 20px;}
.st5 .r2 ul{ width: 100%; height: auto; margin-top: 30px; display: flex; justify-content: space-between; flex-wrap: wrap;}
.st5 .r2 ul li{ width: 575px; height: 130px; margin-bottom: 25px; padding-left: 210px; position: relative;}
.st5 .r2 ul li .img{ width: 190px; height: 130px; position: absolute; top: 0; left: 0;}
.st5 .r2 ul li .title{ font-size: 18px; font-weight: bold; line-height: 200%; border-bottom: 1px dotted #d6d6d6;margin-top: -9px;}
.st5 .r2 ul li .xwlb{line-height: 150%;}
.st5 .r2 ul li .intro{ padding-top: 5px; text-indent: 2em; font-size: 13px; line-height: 200%; color: #888;}
.st5 .r2 ul li .bottom{ font-size: 13px; line-height: 1.5; color: #888; text-align: right;}
.st5 .r3{ padding-top: 20px;}
.st5 .r3 ul{ width: 100%; height: auto; display: flex; justify-content: space-between; flex-wrap: wrap;}
.st5 .r3 ul li{ width: 384px; height: auto; border-bottom: 2px solid #DCDCDC; transition: all .2s ease-out 0s;margin-bottom: 20px;}
.st5 .r3 ul li:hover{ border-color: #C82020;}
.st5 .r3 ul li .img{ width: 384px; height: 216px; overflow: hidden; position: relative;}
.st5 .r3 ul li .img:after{ display: block; content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(../img/play.png) 95% 95% / 40px 40px no-repeat rgba(0,0,0,0);}
.st5 .r3 ul li .img img{ display: block; width: 100%; height: 100%;}
.st5 .r3 ul li .title{ padding-top: 5px; font-size: 18px; line-height: 150%;}
.st5 .r3 ul li:hover .title{ color: #C82020;}




.st6{ width: 100%; height: auto; padding: 50px 0; background-color: #F1F1F1;}
.st6 .r1{ text-align: center;}
.st6 .r1 span{ display: inline-block; position: relative; font-size: 30px; line-height: 200%; color: #C82020;}
.st6 .r2{ width: 100%; height: auto; position: relative;}
.st6 .r2:before{ display: block; content: " "; width: 100%; height: 100%; top: 0; background-color: rgba(0,0,0,0.3);}
.st6 .r2 img{ display: block;}
.st6 .r2 a{ display: block; width: 160px; height: 40px; padding-left: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: url(../img/bg2.png) right 20px center no-repeat; border: 2px solid #fff; font-size: 20px; line-height: 36px; color: #fff; transition: all .2s ease-out 0s; cursor: pointer;}
.st6 .r2 a:hover{ background-color: #fff; background-image: url(../img/bg3.png); color: #333;}




.st7{}
.st7 .swiper-slide{}
.st7 .swiper-slide img{ display: block; width: 100%; height: auto;}
.st7 .swiper-container-horizontal>.swiper-pagination-bullets{ bottom: 50px;}
.st7 .swiper-pagination-bullet{ width: 50px; height: 5px; border-radius: 0; background-color: #fff;}
.st7 .swiper-pagination-bullet-active{ color: #EBBC0C;}




.st8{ width: 100%; height: 160px; background-color: #C82020;}
.st8 .bottom{ padding-top: 45px; text-align: center;}
.st8 .bottom li{ display: inline-block;}
.st8 .bottom li.logo{ width: 169px; height: 60px; margin-right: 110px; cursor: pointer;}
.st8 .bottom li.wb{ width: 53px; height: 52px; background: url(../img/bg4.png) center center / 100% 100% no-repeat; cursor: pointer; transition: all .2s ease-out 0s; cursor: pointer;}
.st8 .bottom li.wb:hover{ background-image: url(../img/bg6.png);}
.st8 .bottom li.wx{ width: 53px; height: 52px; margin-left: 30px; position: relative; z-index: 100; background: url(../img/bg7.png) center center / 100% 100% no-repeat; cursor: pointer; transition: all .2s ease-out 0s; cursor: pointer;}
.st8 .bottom li.wx:hover{ background-image: url(../img/bg5.png);}
.st8 .bottom li.wx img{ display: none; width: 120px; height: auto; position: absolute; bottom: 55px; left: -34px;}
.st8 .bottom li.wx:hover img{ display: block;}