/* @font-face { font-family: 'yanshi'; src: url('../fonts/yanshi.ttf'); } @font-face { font-family: 'Source-Han-Serif-CN-Heavy'; src: url('../fonts/Source-Han-Serif-CN-Heavy.otf'); } */ /*-----------------[初始化]--------------*/ html{position: relative;overflow-x: hidden;} body{color: #333;font-size: 12px;line-height: 1.5;font-family:"微软雅黑","Microsoft Yahei"; overflow-x: hidden; } a{color: #333;} a:hover{color: #20A08E;} img{max-width: 100%; transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; } input,textarea,select{font-size: 12px;color: #333; font-family:"SourceHanSansCN-Regular","微软雅黑","Microsoft Yahei";outline: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } input[type='submit'],input[type='reset'],input[type='button'],select{ -webkit-appearance: none; -moz-appearance: none; appearance: none; } input[type='submit'],input[type='reset'],input[type='button']{cursor: pointer;} ::-webkit-input-placeholder {color: #999;} ::-moz-placeholder {color: #999; } ::-ms-input-placeholder {color: #999;} .ani{ transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; } *,*:after,*:before{outline: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } /*布局*/ .wp{width: 100%;max-width: 1440px;margin: 0 auto;} .h50{height: 50px;clear: both;overflow: hidden;} .h100{height: 100px;clear: both;overflow: hidden;} /******************************* -------[=头部]------- ********************************/ .header{position: absolute;left: 0;right: 0;top: 0;z-index: 109;} .header .top{overflow: hidden;line-height: 47px; border-bottom: 1px solid rgba(255,255,255,.26); } .header .t-l{float: left;} .header .t-r{float: right;} .header .t-l a{color: #fff;font-size: 16px;padding-left: 25px;margin-right: 13px; background-position: left center;background-repeat: no-repeat; -o-background-size: 21px auto; -ms-background-size: 21px auto; -moz-background-size: 21px auto; -webkit-background-size: 21px auto; background-size: 21px auto; transition: .5s; -ms-transition: .5s; -moz-transition: .5s; -webkit-transition: .5s; -o-transition: .5s; } .header .t-l .i1{background-image: url(../images/i-01.png);} .header .t-l .i2{background-image: url(../images/i-02.png);} .header .t-l .i3{background-image: url(../images/i-03.png);} .header .t-l .i4{background-image: url(../images/i-04.png);} .header .t-l .i5{background-image: url(../images/i-05.png);} .header .t-l a:hover,.a-mail:hover{opacity: .8;color: #fff;} .so{float: right;position: relative;width: 156px;border-radius: 20px;overflow: hidden; margin-top: 10px; } .so .inp{display: block;width: 100%;height: 28px;border: 0;cursor: pointer; background-color: rgba(255,255,255,.7);padding: 0 40px 0 15px;font-size: 14px; } .so .btn{position: absolute;right: 0;top: 0;width: 40px;height: 28px; border: 0;cursor: pointer;border-radius: 50%; background: url(../images/i-06.png) no-repeat no-repeat center; -o-background-size: 17px auto; -ms-background-size: 17px auto; -moz-background-size: 17px auto; -webkit-background-size: 17px auto; background-size: 17px auto; } .a-mail{float: left;font-size: 16px;color: #fff;padding-left: 22px;margin-right: 28px; background: url(../images/i-07.png) no-repeat left center; -o-background-size: 17px auto; -ms-background-size: 17px auto; -moz-background-size: 17px auto; -webkit-background-size: 17px auto; background-size: 17px auto; transition: .5s; -ms-transition: .5s; -moz-transition: .5s; -webkit-transition: .5s; -o-transition: .5s; } .so-btn{float: right;width: 17px;height: 47px;cursor: pointer; background: url(../images/i-06.png) no-repeat no-repeat center; -o-background-size: 17px auto; -ms-background-size: 17px auto; -moz-background-size: 17px auto; -webkit-background-size: 17px auto; background-size: 17px auto; } .header .hd{*zoom:1;} .header .hd:after,.header .hd:before{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden; } .logo{float: left;line-height: 119px;font-size: 0;} .logo img{display: inline-block;vertical-align: middle;height: 83px;} .nav{float: right;} .nav li{float: left;margin-left: 20px;position: relative;} .nav li .v1{display: block;font-size: 18px;color: #fff;line-height: 119px; position: relative; } .nav li .v1:before{content: '';position: absolute;bottom: 39px;left: 50%;right: 50px;height: 1px; background-color: #FFF; transition: .5s; -ms-transition: .5s; -moz-transition: .5s; -webkit-transition: .5s; -o-transition: .5s; } .nav li .v1:after{content: '';position: absolute;left: 50%;bottom: 37px;width: 5px;height: 5px; border-radius: 50%;background-color: #fff;opacity: 0; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); transition: .5s; -ms-transition: .5s; -moz-transition: .5s; -webkit-transition: .5s; -o-transition: .5s; } .nav li:hover .v1:before,.nav li.on .v1:before{left: 0;right: 0;} .nav li:hover .v1:after,.nav li.on .v1:after{opacity: 1;} .nav .ico{display: none;} .nav .sub{position: absolute;left: 50%;top: 86px;width: 136px;padding: 18px 0; background-color: rgba(255,255,255,.9);display: none; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .nav .sub dd a{display: block;font-size: 18px;line-height: 2;text-align: center; transition: .5s; -ms-transition: .5s; -moz-transition: .5s; -webkit-transition: .5s; -o-transition: .5s; } /******************************* -------[=导航]------- ********************************/ .menuBtn{position: relative;z-index: 9;display: none;float: right; width: 40px;height: 40px;padding: 7px;cursor: pointer;margin-top: 5px;margin-right: -5px; transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; } .menuBtn b{display: block;height: 3px;background-color: #fff; margin: 3px 0 5px;border-radius: 2px; transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; } .menuBtn.open{} .menuBtn.open b{display: none;margin: 0;position: absolute;left: 5px;top: 50%;width: 30px;} .menuBtn.open b:first-child{display: block; transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); } .menuBtn.open b:last-child{display: block; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg); } /******************************* -------[=banner]------- *******************************/ .banner{height: 100vh;} .banner .slick-slider,.banner .slick-list,.banner .slick-track,.banner .slick-slide{height: 100%;} .banner .slick-slide .con{display: block;height: 100%;outline: 0;position: relative; background-position: center center;background-repeat: no-repeat; -o-background-size: cover; -ms-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-size: cover; } .banner .slick-arrow{position: absolute;bottom: 80px;overflow: hidden; width: 20px;height: 20px;font-size: 0;line-height: 0; z-index: 3;border: 0;cursor: pointer; background-color: transparent; background-repeat: no-repeat;background-position: center; -o-background-size: 10px auto; -ms-background-size: 10px auto; -moz-background-size: 10px auto; -webkit-background-size: 10px auto; background-size: 10px auto; } .banner .slick-prev{right: 193px;background-image: url(../images/i-08.png);} .banner .slick-next{right: 155px;background-image: url(../images/i-09.png);} .banner .slick-prev:hover{background-image: url(../images/i-08-on.png);} .banner .slick-next:hover{background-image: url(../images/i-09-on.png);} .banner .slick-dots{position: absolute;left: 0;bottom: 88px;width: 100%;text-align: center;z-index: 92;font-size: 0;} .banner .slick-dots li{display: inline-block;margin: 0 4px;} .banner .slick-dots li{width: 33px;height: 3px; font-size: 20px;color: #fff;line-height: 0;border: 0;padding: 0; background-color: rgba(255,255,255,1); } .banner .slick-dots li.slick-active{background-color: #20A08E;opacity: 1;} .banner .slick-dots li div{position: absolute;left: 162px;display: none;font-family: arial;} .banner .slick-dots li em{margin-right: 5px;} .banner .slick-dots li span{margin-left: 5px;} .banner .slick-dots li.slick-active div{display: block;} /******************************* -------[=底部]------- ********************************/ .footer{color: #fff; background-color: #20a08e; } .fd-con{overflow: hidden;padding: 66px 0 33px;position: relative; background: url(../images/i-32.png) no-repeat center 30px; -o-background-size: 309px auto; -ms-background-size: 309px auto; -moz-background-size: 309px auto; -webkit-background-size: 309px auto; background-size: 309px auto; } .fd-link{float: left;} .fd-link .t1{font-size: 22px;position: relative;padding-bottom: 8px; margin-bottom: 12px; } .fd-link .t1:after{content: '';position: absolute;left: 0;bottom: 0; width: 36px;height: 2px; background-color: #fff; } .fd-link .con{overflow: hidden;} .fd-link .col{float: left;margin-right: 26px;} .fd-link .con a{display: block;font-size: 18px; line-height: 1.78;color: #fff; transition: .5s; -ms-transition: .5s; -moz-transition: .5s; -webkit-transition: .5s; -o-transition: .5s; } .fd-link .con a:hover{opacity: .7;text-decoration: underline;} .fd-logo{position: absolute;left: 50%;top: 92px;width: 272px; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .fd-logo img{width: 100%;display: block;} .fd-r{float: right;} .fd-txt{float: left;margin-right: 40px;} .fd-txt .t1{font-size: 22px;position: relative;padding-bottom: 8px; margin-bottom: 12px; } .fd-txt .t1:after{content: '';position: absolute;left: 0;bottom: 0; width: 36px;height: 2px; background-color: #fff; } .fd-txt .desc{font-size: 18px;line-height: 1.78;} .fd-qr{float: right;width: 90px;margin-top: 10px;} .fd-qr .item{text-align: center;margin-bottom: 6px;} .fd-qr .pic img{width: 100%;display: block;margin-bottom: 4px;} .fd-qr span{font-size: 14px;color: #FFF;} .fd-copy{text-align: center;font-size: 18px;color: rgba(255,255,255,.5); line-height: 66px;background-color: #1a927e; } .fd-copy a{color: rgba(255,255,255,.5); transition: .5s; -ms-transition: .5s; -moz-transition: .5s; -webkit-transition: .5s; -o-transition: .5s; } .fd-copy a:hover{color: #fff;} .fd-copy img{display: inline-block;vertical-align: middle;margin-right: 10px;} /******************************* -------[=正文]------- ********************************/