﻿
@font-face {
    font-family: "SourceHanSansCN-Regular";
    src: url("../fonts/SourceHanSansCN-Regular.eot");
    src: url("../fonts/SourceHanSansCN-Regular.eot?#iefix") format("embedded-opentype"),
    url("../fonts/SourceHanSansCN-Regular.woff") format("woff"),
    url("../fonts/SourceHanSansCN-Regular.ttf") format("truetype"),
    url("../fonts/SourceHanSansCN-Regular.svg#SourceHanSansCN-Regular") format("svg");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: 'Bebas';
    src: url('../fonts/BEBAS.ttf');
}
html{position: relative;overflow-x: hidden;}
/*-----------------[初始化]--------------*/
body{color: #333;font-size: 12px;line-height: 1.5;font-family:"SourceHanSansCN-Regular";
    overflow-x: hidden;
}
a{color: #333;}
a:hover{color: #28A7E1;}
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";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: 12.8rem;margin: 0 auto;}
.h50{height: 50px;clear: both;overflow: hidden;}
.h100{height: 100px;clear: both;overflow: hidden;}


/*******************************
  -------[=头部]-------
********************************/
.header{position: fixed;top: 0;left: 0;right: 0;z-index: 109;
    background-color: #fff;box-shadow: 0px 0px 10px rgba(0,0,0,.1);
}
.logo{float: left;line-height: 1.1rem;font-size: 0;}
.logo img{display: inline-block;vertical-align: middle;height: .62rem;}
.nav{float: right;}
.nav li{float: left;margin-left: .68rem;position: relative;}
.nav li .v1{display: block;font-size: .18rem;color: #333;line-height: 1.1rem;
    position: relative;
    transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    -o-transition: .5s;
}
.nav li .v1:after{content: '';position: absolute;left: 50%;bottom: 0;width: 6px;height: 0;
    background-color: #28A7E1;margin-left: -3px;
    transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    -o-transition: .5s;
}
.nav li.on .v1:after,.nav li:hover .v1:after{height: .2rem;}
.nav li.on .v1,.nav li:hover .v1{color: #28A7E1;}
.nav .ico{position: absolute;right: -.17rem;top: 50%;
    border-top: 6px solid #036FB8;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.nav .sub{position: absolute;left: 50%;width: 1.6rem;border-top: 2px solid #28A7E1;display: none;
    background-color: #fff;box-shadow: 0px 0px 10px rgba(0,0,0,.1);padding: .1rem 0;
    -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: .16rem;line-height: .45rem;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: .7rem;height: .7rem;padding: .07rem;cursor: pointer;margin-top: .15rem;
    transition: .3s;
    -ms-transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
    -o-transition: .3s;
}
.menuBtn b{display: block;height: .06rem;background-color: #28A7E1;
    margin: .06rem 0 .1rem;border-radius: .04rem;
    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: .05rem;top: 50%;width: .6rem;}
.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;position: relative;}
.banner .slick-slider,.banner .slick-list,.banner .slick-track,.banner .slick-slide{height: 100%;}
.banner .slick-slide .con{height: 100%;display: block;outline: 0;position: relative;
    background-position: 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 .txt{position: absolute;left: 0;right: 0;top: 50%;color: #fff;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.banner .txt .t1{font-size: .66rem;margin-bottom: .18rem;}
.banner .txt .desc{font-size: .24rem;margin-bottom: .9rem;}

.g-btn{display: block;width: 1.85rem;height: .62rem;border-radius: .06rem;
    text-align: center;line-height: .62rem;font-size: .18rem;color: #fff;
    background: linear-gradient(-90deg, #1C83D0, #28A7E1);
    box-shadow: 0px 3px 8px 0px rgba(7,44,82,0.1);
    transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    -o-transition: .5s;
}
.g-btn:before{content: '';display: inline-block;vertical-align: middle;
    width: .22rem;height: .22rem;margin-right: .16rem;position: relative;top: -2px;
    background: url(../images/i-01.png) no-repeat center;
    -o-background-size: 100% auto;
    -ms-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    -o-transition: .5s;
}
.g-btn:hover{color: #fff;}
.g-btn:hover:before{margin-right: .26rem;}

.case_slick3_dots{position: absolute;left: 0;right: 0;bottom: .63rem;z-index: 5;text-align: center;}
.case_slick3_dots li{display:inline-block;vertical-align:middle;margin:0 .2rem 0 0;
    width:30px;height:30px;position:relative;cursor:pointer;
}
.case_slick3_dots .numb{position:absolute;z-index:1;text-align: center;left: 0;right: 0;
    width: 100%;height: 100%;
}
.case_slick3_dots .numb i{width: 8px;height: 8px;position: absolute;top: 50%;left: 50%;
    background-color: rgba(255,255,255,.5);border-radius: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.wrapper{width:30px;height:30px;position:absolute;z-index:2;
    clip:rect(0,30px,30px,15px);
}
.case_slick3_dots li:after{content: '';position: absolute;top: 0;left: 0;
    width: 100%;height: 100%;
    border-radius: 50%;border: 2px solid rgba(255,255,255,0);
}
.circle{width:30px;height:30px;border:2px solid #fff;border-radius:50%;
    position:absolute;clip:rect(0,15px,30px,0)
}
.case_slick3_dots .base{display: inline-block;}
.case_slick3_dots li.base:after{border-color: rgba(255,255,255,.3);}
.case_slick3_dots li.base .numb i{background-color: #fff;}
.base .left,.base .right,.base .wrapper{
    -webkit-animation-iteration-count:1;
    -webkit-animation-fill-mode:forwards;
    -webkit-animation-timing-function:linear
}
.base .wrapper{
    -webkit-animation-duration:10ms;
    -webkit-animation-delay:2.5s;
    -webkit-animation-name:close-wrapper
}
.base .left{-webkit-animation-duration:5s;-webkit-animation-name:left-spin}
.base .right{-webkit-animation-duration:2.5s;-webkit-animation-name:right-spin}
@-webkit-keyframes right-spin{
    from{-webkit-transform:rotate(0)}
    to{-webkit-transform:rotate(180deg)}
}
@-webkit-keyframes left-spin{
    from{-webkit-transform:rotate(0)}
    to{-webkit-transform:rotate(360deg)}
}
@-webkit-keyframes close-wrapper{
    to{clip:rect(auto,auto,auto,auto)}
}


/*******************************
  -------[=底部]-------
********************************/
.footer{color: #7A7E80;
    background: #262C30 url(../images/fd-bg.jpg) no-repeat right bottom;
    -o-background-size: cover;
    -ms-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}
.fd-top{overflow: hidden;padding: .4rem 0 .32rem;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.fd-logo{float: left;}
.fd-logo img{display: block;height: .6rem;}
.fd-nv{float: right;}
.fd-nv li{float: left;}
.fd-nv li a{display: block;font-size: .18rem;color: #fff;line-height: .6rem;
    transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    -o-transition: .5s;
}
.fd-nv li a:after{content: '';display: inline-block;vertical-align: middle;width: 1px;
    height: .14rem;background-color: #fff;opacity: .1;margin: 0 .36rem;
}
.fd-nv li:last-child a:after{display: none;}
.fd-nv li a:hover{opacity: .7;}
.fd-bot{padding-top: .43rem;padding-bottom: .4rem;}
.fd-txt{float: left;margin-top: .07rem;}
.fd-txt .tit{height: .26rem;margin-bottom: .35rem;}
.fd-txt .tit img{height: 100%;display: block;}
.fd-txt .desc{font-size: .18rem;line-height: 2.33;}
.fd-share{float: right;}
.fd-share .item{float: left;position: relative;margin-left: .35rem;}
.fd-share .ico{display: block;width: .43rem;height: .43rem;border-radius: 50%;
    background-color: rgba(255,255,255,.1);cursor: pointer;
    transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    -o-transition: .5s;
}
.fd-share .ico img{width: 100%;height: 100%;display: block;opacity: .6;
    transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    -o-transition: .5s;
}
.fd-share .item:hover .ico{background-color: #28A7E1;}
.fd-share .item:hover .ico img{opacity: 1;}
.fd-share .item:hover .qr{visibility: visible;opacity: 1;}
.fd-share .qr{position: absolute;left: 50%;top: 100%;width: 1.2rem;padding-top: .28rem;
    visibility: hidden;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;
}
.fd-share .pic{position: relative;margin-bottom: .14rem;}
.fd-share .pic img{width: 100%;display: block;}
.fd-share .pic:after{content: '';position: absolute;bottom: 100%;left: 50%;
    border-bottom: 7px solid #fff;margin-left: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}
.fd-share .t1{font-size: .16rem;color: rgba(255,255,255,.5);text-align: center;
    display: block;
}
.fd-copy{overflow: hidden;font-size: .16rem;padding: .23rem 0;
    background-color: #2B3135;
}
.fd-copy a{color: #7A7E80;
    transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    -o-transition: .5s;
}
.fd-copy a:hover{color: #fff;}
.fd-copy .copy{float: left;}
.fd-copy .link{float: right;}
.fd-con .wp{position: relative;}
.btn-top{position: absolute;right: -1.46rem;top: .38rem;width: .66rem;height: .66rem;
    border-radius: 50%;cursor: pointer;
    background: #036FB8 url(../images/i-22.png) no-repeat center;
    -o-background-size: 100% auto;
    -ms-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    -o-transition: .5s;
}
.btn-top:hover{opacity: .8;}
/*******************************
    -------[=正文]-------
********************************/


.mo-tel{display: none;}

