html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,caption,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
body{
font-family: 'Arial',"微软雅黑",'Microsoft YaHei';
word-wrap: break-word;
color: #333;
--mainColor: #0084c9;
--minorColor: #00a0c9;
width: 100%;
}
a{
text-decoration: none;
color: #333;
}
.cmr{
margin-right: 0 !important;
}
.cBox{
margin: 0 auto;
width: 1200px;
}
.cBox.full{
position: relative;
width: 100%;
padding: 0;
}
.cBox .c-content p img{
width: 100%;
height:auto;
}
.suitW{
width: 100%;
min-width: 1200px;
}
.btn{
box-sizing: border-box;
display: block;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
.playBtn{
position: relative;
z-index: 0;
width: 75px;
height: 75px;
cursor: pointer;
border-radius: 75px;
overflow: hidden;
}
.playBtn:after,.playBtn:before{
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 0.4s;
}
.playBtn:hover:after{
opacity: 1;
}
.playBtn:after{
z-index: 0;
opacity: 0;
background-image: radial-gradient(circle , #0084c9 10% , transparent 90%);
}
.playBtn:before{
z-index: 1;
background: url(../images/playBtn.png) no-repeat ;
background-size: 100%;
}
.colorWhite{
color: #fff !important;
}
.flex{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.moreBtn{
position: relative;
box-sizing: border-box;
display: block;
width: 146px;
height: 45px;
margin: 0 auto;
padding: 0;
line-height: 45px;
border-radius: 45px;
text-align: center;
cursor: pointer;
background: #0084c9;
color: #fff;
border: 1px solid #0084c9;
}
.moreBtn:before{
content: '';
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: #fff;
-webkit-transition: -webkit-transform 0.4s cubic-bezier(.4,0,.2,1);
transition: transform 0.4s cubic-bezier(.4,0,.2,1);
transform: scaleY(0);
-webkit-transform: scaleY(0);
-moz-transform: scaleY(0);
transform-origin: 50% 100% 0;
-webkit-transform-origin: 50% 100% 0;
}
.moreBtn:after{
display: block;
position: absolute;
left: 0;
top: -100%;
z-index: 2;
content: attr(data-text);
opacity: 1;
color: #0084c9;
width: 100%;
text-align: center;
}
.moreBtn:hover:before{
transform: scaleY(1);
-moz-transform: scaleY(1);
transform-origin: 50% 0 0;
-webkit-transform-origin: 50% 0 0;
}
.moreBtn:hover:after{
top: 0;
}
.moreBtn2{
display: block;
width: 104px;
height: 38px;
line-height: 38px;
border-radius: 3px;
font-size: 14px;
}
.moreBtn3{
display: block;
width: 34px;
height: 34px;
border-radius: 34px;
background: #fff;
border: 2px solid #00a2e9;
}
.moreBtn3:hover{
background: #0084c9;
border-color: #0084c9;
}
.moreBtn3:hover:after{
filter: brightness(200%);
}
.moreBtn3:after{
content: url(../images/icon17.png);
display: inline-block;
}
.fl{
float: left;
}
.fr{
float: right;
}
.moduleTit{
display: block;
margin-bottom: 18px;
font-size: 36px;
text-align: center;
}
.moduleSlogan{
display: block;
font-size: 16px;
text-align: center;
line-height: 1.8;
}
.fontsize18{
font-size: 18px;
}
.openVideoBox{
width: 900px;
height: 504px;
background: #ccc;
}
.openVideoBox video{
display: block;
width: 100%;
height: 100%;
background: #000;
}
.openVideoBox video{
display: block;
width: 100%;
height: 100%;
background: #000;
cursor: pointer;
}
.openVideoBox .layui-layer-setwin .layui-layer-close2{
display: block;
position: absolute;
right: -15px;
top: -35px;
width: 20px;
height: 20px;
background: url(../images/closeBtn1.png) no-repeat center center;
}
.openVideoBox .layui-layer-setwin .layui-layer-close2:hover{
background-position: center center;
}
/*头部*/
.header{
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 82px;
background-color: #fff;
transition: all 0.4s;
}
.headerOccupy{
position: relative;
height: 82px;
width: 100%;
}
.header .cBox{
position: relative;
}
.header .left{
margin-top: 26px;
}
.header .left .logo{
display: block;
}
.header .right{
margin-top: 20px;
}
.header .nav{
height: 42px;
}
.header .nav a{
display: block;
box-sizing: border-box;
/*padding: 0 5px;*/
height: 42px;
line-height: 42px;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
transition: all 0.4s;
}
.header .nav .por>a{
color: #666;
}
.header .nav .por:last-of-type{
margin-right: 0;
}
.header .nav .por:hover>a{
color: #00a0c9;
}
.header .nav .por{
position: relative;
float: left;
margin-right: 38px;
height: 62px;
}
.header .nav .por:hover .nav2L{
height: auto;
padding: 15px 4px;
opacity: 1;
top: 100%;
transition: all 0.4s;
}
.header .nav .nav2L{
height: 0;
opacity: 0;
position: absolute;
z-index: 10;
left: 50%;
top: calc(100% - 20px);
width: 142px;
padding: 0 4px;
margin-left: -75px;
background-color: #fff;
border: 1px solid #F1F1F1;
border-bottom: 4px solid #00a0c9;
font-size: 14px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
overflow: hidden;
transition: 0.4s all;
}
.header .nav .nav2L a{
display: block;
padding: 8px 0px;
line-height: 1.4;
color: #333;
text-align: center;
}
.header .nav .nav2L a:hover{
background: #e6e6e6;
color: #111;
}
.header .searchBox{
position: relative;
margin-top: 8px;
margin-left: 34px;
}
.header .searchBox:hover .searchInput,.header .searchBox .searchInput.show{
height: auto;
opacity: 1;
overflow: initial;
transition: opacity 0.4s;
}
.header .searchBox .surface{
width: 28px;
height: 28px;
line-height: 28px;
text-align: center;
}
.header .searchBox .searchInput{
position: absolute;
right: 0;
top: 0;
overflow: hidden;
height: 0;
opacity: 0;
width: 200px;
}
.header .searchBox .searchInput input{
box-sizing: border-box;
position: absolute;
z-index: 11;
right: -8px;
top: -2px;
width: 200px;
padding: 8px 36px;
background: #eee;
border-radius: 20px;
border: none;
outline: none;
font-size: 14px;
color: #666;
}
.header .searchBox .searchInput .searchBtn{
box-sizing: border-box;
position: absolute;
z-index: 12;
right: 0px;
top: 0px;
width: 28px;
height: 28px;
background: none;
border: none;
outline: none;
cursor: pointer;
}
.header .logonBtn{
margin-left: 32px;
width: 114px;
height: 40px;
line-height: 38px;
border: 1px #888 solid;
font-size: 14px;
color: #026787;
border-radius: 40px;
transition: all 0.4s;
}
.header .logonBtn:hover{
background: #026787;
color: #fff;
}
/*banner*/
.banner{
position:relative;
width: 100%;
background:#ccc;
margin:0 auto;
line-height: 1.4;
color: #fff;
}
.banner img{
display: block;
width: 100%;
}
.banner .poa{
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
}
.banner .cBox{
position: relative;
margin-top: 11.6%;
/* margin-left: 25%; */
}
.banner .centerText{
position: absolute;
top: 50%;
width: 100%;
margin-top: -23px;
height: 46px;
line-height: 1;
user-select: none;
}
.banner .centerText h1{
font-size: 46px;
text-align: center;
}
/* .banner h1{
font-size: 36px;
}
.banner h2{
margin-top: 48px;
font-size: 16px;
}
.banner .moreBtn{
margin: 38px 0 0;
} */
.banner h1{
font-size: 36px;
}
.banner h2{
margin-top: 48px;
font-size: 16px;
}
.banner h3{
margin-top: 10px;
font-size: 45px;
color: black;
}
.banner p{
/* margin-top: 10px; */
font-size: 23px;
color: #0084c9;
}
.banner text{
font-size: 16px;
color: black;
}
.banner .moreBtn{
margin: 120px 0 0;
}
/*底部联系我们*/
.bottomContact{
background: #161616;
color: #fff;
}
.bottomContact .cBox{
padding: 20px 28px 48px;
}
.bottomContact .contactForm{
margin-top: 36px;
}
.contactForm .inputBox{
position: relative;
margin-bottom: 20px;
}
.contactForm .inputBox label.errorTip{
position: absolute;
top: -18px;
left: 4px;
font-size: 14px;
}
.contactForm .inputBox.col-4{
width: 336px;
}
.contactForm .inputBox.col-12{
width: 100%;
}
.contactForm .inputBox input[type='text'],.contactForm .inputBox textarea{
box-sizing: border-box;
width: 100%;
padding: 10px 18px;
height: 36px;
border: none;
border: 1px solid #454545;
outline: none;
background: transparent;
color: #ccc;
resize: none;
font-size: 14px;
transition: all 0.4s;
}
.contactForm .inputBox input[type='text']:focus,.contactForm .inputBox textarea:focus{
border-color: #999;
}
.contactForm .inputBox textarea{
height: 72px;
}
.contactForm .submitBtn{
width: 100px;
height: 46px;
background: #b7b7b7;
color: #111;
border: none;
outline: none;
font-weight: 700;
font-size: 16px;
}
.contactForm .submitBtn:active{
box-shadow: 1px -1px 12px 1px #333 inset;
}
/*底部*/
.footer{
position: relative;
box-sizing: border-box;
padding-top: 68px;
background: #000;
color: #828282;
font-size: 14px;
overflow: hidden;
}
.footer a{
color: #828282;
}
.footer .cBox{
overflow: hidden;
}
.footer .left{
margin-left: 15px;
}
.footer .left .footerLogo{
margin-bottom: 42px;
}
.footer .left .contact{
margin-right: 76px;
width: 204px;
font-size: 14px;
}
.footer .left .contact p{
margin-bottom: 50px;
padding-left: 32px;
/* line-height: 1.4; */
font-size: 18px;
width: 300px;
color: white;
}
.footer .left .contact .Addr{
background: url(../images/icon3.png) no-repeat left top;
}
.footer .left .contact .tel{
background: url(../images/icon1.png) no-repeat left top;
}
.footer .left .contact .youtube{
background: url(../images/icon99.png) no-repeat left top;
}
.footer .contact .email{
background: url(../images/icon2.png) no-repeat left top;
}
.footer .table{
width: 770px;
overflow: hidden;
}
.footer .table a:hover{
text-decoration: underline;
}
.footer .table li{
float: left;
/* width: 70px; */
margin-right: 70px;
}
.footer .table li:last-of-type{
margin-right: 0;
}
.footer .table li h4 {
margin-bottom: 22px;
font-weight: 700;
color: #fff;
width: 100px;
}
.footer .table li p{
margin-bottom: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.footer .bottom{
float: left;
width: 100%;
margin-top: 94px;
padding: 16px 12px;
}
.footer .bottom .cBox{
overflow: initial;
}
.footer .bottom .fr{
margin-right: 38px;
}
.footer .bottom .fr img:hover{
opacity: 0.9;
}
.footer .bottom .fr .weixinBox{
display: inline-block;
position: relative;
}
.footer .bottom .fr .weixinBox:hover .weixinQR{
display: block;
}
.footer .bottom .fr .weixinQR{
display: none;
position: absolute;
margin-left: -46px;
bottom: calc(100% + 6px);
left: 0;
padding: 10px;
}
.footer .bottom .fr .weixinQR img{
width: 90px;
height: 90px;
image-rendering: pixelated;
}
/*内页通用样式*/
.c-mainBox{
box-sizing: border-box;
padding: 75px 0 154px 0;
background: #fff;
min-height: 600px;
}
.c-mainBox.bgf2f2f2{
background: #f2f2f2;
}
.c-content{
margin-top: 102px;
line-height: 2;
font-size: 18px;
text-indent: 2em;
}
.c-list{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 112px;
width: 100%;
}
.c-list:after{
content: "";
display: block;
width: 320px;
margin-bottom: 70px;
height: 0;
overflow: hidden;
}
.c-list .unit{
margin-bottom: 70px;
width: 320px;
}
.c-list .unit .imgBox img{
display: block;
width: 100%;
}
.c-list .unit .videoBox{
position: relative;
width: 350px;
height: 255px;
}
.c-list .unit .videoBox video{
width: 100%;
height: 100%;
}
.c-list .unit .videoBox .playBtn{
position: absolute;
left: 50%;
top: 50%;
margin-top: -28px;
margin-left: -28px;
width: 56px;
height: 56px;
}
.c-list .unit .tit{
margin-top: 20px;
font-weight: 400;
font-size: 16px;
}
.pagination{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
align-items: center;
justify-content: center;
margin-top: 44px;
width: 100%;
}
.pagination .pageing{
display: block;
height: 34px;
width: 34px;
margin-right: 12px;
background: #efefef;
font-size: 14px;
text-align: center;
line-height: 34px;
border-radius: 34px;
color: #888;
}
.pagination .pageing.active,.pagination .pageing:hover{
height: 36px;
width: 36px;
line-height: 36px;
background: #0084c9;
color: #fff;
}
.pagination .pageing:last-of-type{
margin-right: 0;
}
.searchBox2{
position: relative;
margin: 54px auto 0;
width: 530px;
height: 56px;
border-radius: 56px;
overflow: hidden;
}
.searchBox2 input{
box-sizing: border-box;
display: block;
padding-left: 32px;
width: 100%;
height: 100%;
outline: none;
border: none;
border-right: 0;
border-radius: 56px;
border: 1px #ddd solid;
transition: 0.2s all;
font-size: 14px;
}
.searchBox2 input:focus{
border-color: #0084c9;
}
.searchBox2 button{
position: absolute;
right: 0;
top: 0;
display: block;
width: 76px;
height: 100%;
background: #0084c9;
text-indent: -6px;
text-align: center;
outline: none;
border: 0;
cursor: pointer;
}
.pageTurning{
padding: 22px 0;
border: #ccc solid 1px;
border-width: 1px 0;
}
.pageTurning .prev,.pageTurning .next{
display: inline-block;
margin-top: 24px;
margin-bottom: 20px;
}
.pageTurning .prev:hover span,.pageTurning .next:hover span{
color: #666;
}
.pageTurning span{
color: #a4a4a4;
}
.pageTurning .turningLine{
width: 100%;
height: 1px;
background: #e1e1e1;
}
.swiper-slide-active{ /*swiper bug应对*/
opacity: 1 !important;
}