.index .main{margin-bottom: 4.3%;padding-top: 0;} .index .footer{background: #f0f0f0;} /*banner start*/ .index .inbanner{width: 100%;overflow: hidden;margin-bottom: 5.57%;} .index .inbanner .swiper-container{padding-bottom: 14px;} .index .inbanner .textbox{position: absolute;} .index .inbanner img{display: none;width: 100%;} .index .inbanner li{ height: 80vh; position: relative;overflow: hidden;background-size: cover!important;background-position: center!important;background-repeat: no-repeat!important;} .index .inbanner li video{position: absolute;left: 0;top: 0;height: 100%;width: 100%;background: #000;} .index .inbanner .textbox {z-index: 2;opacity: 0;transition: all cubic-bezier(0, 0.62, 1, 1) 1s 0.1s;text-align: left;transition-delay: 1s;top: 38.11%;left: 17.23%;text-align: left;transform: translateX(300px);} .index .inbanner .textbox h3{font-weight: normal;line-height: 1.1em;margin-bottom: 13px;color: #707070;} .index .inbanner .textbox h4{line-height: 1.1em;margin-bottom: 17px;color: #4db1b1;font-weight: bold;} .index .inbanner li.on .textbox{transform: translateX(0);opacity: 1;} .index .inbanner .textbox .con{background: rgba(0,0,0,0.5);color: #fff;padding: 23px 20px;position: relative;margin-bottom: 25px;} .index .inbanner .textbox .con:before{content: "";display: block;width: 6em;background-color: #f29701;height: 4px;left: 20px;top: 0;position: absolute;} .index .inbanner .textbox .con p{padding-left: 15px;position: relative;line-height: 1.7em;} .index .inbanner .textbox .con p:before{content: "";display: block;position: absolute;width: 5px;height: 5px;background: #fff;left: 0;top: 50%;transform: translateY(-50%);border-radius: 50%;} .index .inbanner .textbox .banner_more{display: inline-block;background-color: rgba(0,137,137,0.7);text-align: center;padding: 12px 50px;color: #fff;border-radius: 7px;position: relative;} .index .inbanner .textbox .banner_more:before{background:#ffcc00;transition: all .2s;} .index .inbanner .textbox .banner_more:before {content: '';position: absolute;top: 0;left: 0;width: 0;height: 100%;background: rgba(255,255,255,0.3);transition: all .3s;border-radius: 7px;} .index .inbanner .swiper-container-horizontal>.swiper-pagination-bullets,.index .inbanner .swiper-pagination-custom,.index .inbanner .swiper-pagination-fraction{bottom: 27px;} .index .inbanner .swiper-pagination-bullet{background: transparent;opacity: 1;width: 11px;height: 11px;border-radius: 50%;border: #fff 1px solid;} .index .inbanner .swiper-pagination-bullet-active{background: #66809b;background: #fff;} .index .inbanner .swiper-button-prev,.index .inbanner .swiper-container-rtl .swiper-button-next, .index .inbanner .swiper-button-next,.index .inbanner .swiper-container-rtl .swiper-button-prev{display: none;} /*banner end*/ .index .main h2{text-align: center;margin-bottom: } .index .main h2 a{display: inline-block;line-height: 1.1em;padding-bottom: 10px;color: #595959} .index .main h2 i{position: relative;width: 1.5em;border-top: 1px solid #595959;display: block;margin: auto;margin-bottom: 10px;} .index .main h2 em{text-align: center;line-height: 1.1em;color: #4db1b1;font-weight: bold;} .index .part_1 .imgbox{position: relative;margin-bottom: 25px;overflow: hidden;} .index .part_1 .imgbox img{width: 100%;} .index .part_1 .linkbox{position: absolute;left: 0;bottom: 0;background: rgba(0,0,0,0.6);padding: 22px;opacity: 0;transition: 1.5s all cubic-bezier(0.19, 1, 0.22, 1);transform: translateY(30%);width: 100%;} .index .part_1 .linkbox.ph{display: none;} .index .part_1 .linkbox a{float: left;display: inline-block;padding: 6px 0;width: 6em;padding-left: 1em;color: #fff;margin-right: 5px;} .index .part_1 .swiper-button-next,.index .part_1 .swiper-button-prev{top: 32%;width: 41px;height: 62px;background-size: cover;} .index .part_1 .swiper-button-prev{left: 0;background-image: url(../images/index_icon02.png);} .index .part_1 .swiper-button-next{right: 0;background-image: url(../images/index_icon03.png);} .index .part_1 h3{line-height: 1.1em;margin-bottom: 20px;} .index .part_1 h3 a{color: #2a2a2a;} .index .part_1 p{color: #868686;line-height: 1.5em;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;max-height: 6em;} .index .part_1 .swiper-container .swiper-slide{width: 25%;} .index .part_2{padding: 5.57% 0 6.36% 0 ;background-color: #f0f0f0;} .index .part_2 .leftbox{float: left;width: 50%;padding-right: 50px;border-right: 1px solid #868686;padding-bottom: 3.5%;} .index .part_2 .leftbox .imgbox{margin-bottom: 25px;} .index .part_2 .leftbox img{width: 100%;} .index .part_2 .leftbox .txt{padding: 0 10px;} .index .part_2 .leftbox h3{line-height: 1.33;margin-bottom: 13px;} .index .part_2 .leftbox h3 a{color: #332c2b;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;height: 3em;line-height: 1.5em;} .index .part_2 .leftbox em{color: #b7b4ad;display: inline-block;margin-bottom: 13px;} .index .part_2 .leftbox p{line-height: 1.7em;color: #807978;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;overflow: hidden;max-height: 6.8em;} .index .part_2 .rightbox{float: right;width: 50%;padding-left: 50px;} .index .part_2 .rightbox li{margin-bottom: 8.9%;} .index .part_2 .rightbox h3{margin-bottom: 16px;} .index .part_2 .rightbox h3 a{display: inline-block;width: calc(100% - 92px);-moz-width: calc(100% - 92px);color: #2a2a2a;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} .index .part_2 .rightbox h3 em{color: #b7b4ad;display: inline-block;float: right;} .index .part_2 .rightbox p{color: #707070;line-height: 1.5em;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;max-height: 3em;} .index .part_2 .rightbox a.more{float: right;position: relative;display: inline-block;padding: 2px 22px;color: #707070;border: 1px solid #707070;font-size: 12px;margin-top: 3px;} .index .part_3 .swiper-container a{text-align: center;transition: none;display: block;} .index .part_3 .transbox{margin-bottom: 14px;display: inline-block;padding:5px; } .index .part_3 .imgbox{text-align: center;border: 2px solid #fff;box-shadow: 0 0 5px 2px #eaeaea;border-radius: 50%;background: -webkit-linear-gradient(#fff,#f8f8f8); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(#fff,#f8f8f8); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(#fff,#f8f8f8); /* Firefox 3.6 - 15 */ background: linear-gradient(#fff,#f8f8f8); /* 鏍囧噯鐨勮娉 */} .index .part_3 p{text-align: center;padding: 0 20px;line-height: 1.1em;color: #000000;transition: all .5s;} .index .part_3 .swiper-wrapper{margin-bottom: 5.81%;overflow: hidden;} .index .part_3 .but{position: relative;width: 150px;margin: auto;} .index .part_3 .but div{top: 0;width: 18px;height: 8px;background-size: cover;display: inline-block;opacity: 1;} .index .part_3 .but .swiper-button-prev{background-image: url(../images/index_icon04_on.png);} .index .part_3 .but .swiper-button-next{background-image: url(../images/index_icon05_on.png);} .index .part_3 .but .swiper-button-prev.swiper-button-disabled{background-image: url(../images/index_icon04.png);} .index .part_3 .but .swiper-button-next.swiper-button-disabled{background-image: url(../images/index_icon05.png);} .index .part_3 .but a{display: inline-block;background-image: url(../images/index_icon06.png);width: 60px;height: 40px;background-size: cover;position: absolute;top: -40px;left: 50%;transform: translateX(-50%);} .index .part_4{position: relative;} .index .part_4 .container{position: absolute;left: 50%;transform: translateX(-50%);margin-top: 5.97%;top: 0} .index .part_4 .txt{background-color: rgba(255,255,255,0.8);text-align: center;padding: 1.81% 5.7%;z-index: 2;} .index .part_4 dl{display: inline-block;} .index .part_4 dl:nth-child(2){padding: 0 8%;} .index .part_4 dt{text-align: left;color: #2a2a2a;font-weight: bold;} .index .part_4 dt em{color: #4db1b1;line-height: 1.1em;} .index .part_4 dd{text-align: left;color: #2a2a2a;line-height: 1.5em;} .index .part_4 video{width: 100%;background: #000;} .index .part_4 .videobut{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);display: block;width: 107px;height: 72px;background-size: cover;background-image: url(../images/index_icon07.png);cursor: pointer;z-index: 2;display: none;} .index .part_5 a{position: relative;display: block;} .index .part_5 .txt{position: absolute;top: 19.3%;left: 11.73%;color: #fff;} .index .part_5 h3{line-height: 1.1em;margin-bottom: 15px;} .index .part_5 p{line-height: 1.5em;} .index .part_5 img{width: 100%;} @media only screen and (min-width: 1025px){ .index .part_1 .imgbox:hover .linkbox{opacity: 1;transform: translateY(0);} .index .part_1 .linkbox a:hover{background: #4db1b1;color: #fff!important;} .index .inbanner .textbox .banner_more:hover{color: #fff!important;} .index .inbanner .textbox .banner_more:hover:before{width:100%;} .index .part_1 .linkbox a:hover{color: #fff!important;} .index .part_3 .swiper-container a:hover p{color: #4db1b1} } @media only screen and (max-width: 1300px){ .index .part_4 .videobut{width: 75px;height: 51px;} } @media only screen and (max-width: 1024px){ .index .part_4 .container{margin-top: 10px;} .index .part_4 dl{padding: 0 20px;width: 30%;} .index .part_4 dt em{font-size: 18px;} .index .part_4 dl:nth-child(2){padding: 0;} .index .part_2 .rightbox a.more{float: none;margin-top: 10px;} .index .inbanner .textbox{top: 26.11%;left: 7.23%} .index .main{padding-top: 86px;} .index .part_1 p{margin-bottom: 7px;height: 4.5em;} .index .part_1 .linkbox{display: none;} .index .part_1 .linkbox.ph{display: block;position: static;opacity: 1;transform: translateY(0);padding: 10px 13px;background: #4db1b1;} .index .part_1 .linkbox a{padding: 0;} } @media only screen and (max-width: 1023px){ .index .part_1 .swiper-button-next, .index .part_1 .swiper-button-prev{width: 30px;height: 45px;} .index .part_1 .imgbox{margin-bottom: 10px;} .index .part_1 h3{margin-bottom: 10px;} .index .part_2 .leftbox,.index .part_2 .rightbox{float: none;padding: 0;width: 100%;border: none;} .index .part_2 .leftbox{margin-bottom: 30px;} .index .part_2 .rightbox li{margin-bottom: 20px;} .index .part_2 .rightbox h3{margin-bottom: 4px;} .index .part_2 .rightbox a.more{margin-top: 7px;} .index .part_4 .container{position: relative;padding:0 20px;} .index .part_4 .videobut{display: block;top: 29%} .index .part_4 dl,.index .part_4 dl:nth-child(2){width: 100%;display: block;margin-bottom: 20px;padding: 0} .index .part_4{margin-bottom: 10px;} } @media only screen and (max-width: 767px){ .index .main{padding-top: 53px;} .index .inbanner .textbox .con{display: none;} .index .inbanner .textbox .banner_more{padding: 5px 15px;} .index .part_2 .leftbox .col-sm-6{margin-bottom: 20px;} .index .part_2 .leftbox .imgbox{margin-bottom: 10px;} .index .part_2 .leftbox h3{margin-bottom: 7px;} .index .part_2 .leftbox em{margin-bottom: 7px;} .index .part_2 .leftbox{margin-bottom: 5px;} .index .part_3 .swiper-wrapper{margin-bottom: 50px;} .index .part_4 .videobut{width: 40px;height: 27px;top: 20%} .index .part_4 .txt{padding: 0;} } @media only screen and (min-width: 1025px){ .index .part_2 .rightbox a.more:hover{border-color: #008d8e;} }