﻿/*
当页单独样式
有覆盖原样式，需要最后引用
*/

.footer { position: fixed; left: 0; right: 0; top: 100%; }
.curnav { bottom: 10%; }
.abcrtxts .text { width: 330px; font-size: 18px; text-align: justify; text-justify: inter-ideograph; }
.aw-text { font-size: 14px; color: #eeeeee; }
.conL { height: 100%; position: absolute; left: 0; top: 0; z-index: 50;
background: url("../../../static/images/bbb.png")
}
#pages-box { width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden; }
#pages-box .pages { width: 100%; height: 100%; position: absolute; left: 0; top: 100%; }
#pages-box .page { width: 100%; height: 100%; overflow: hidden; position: absolute; left: 0; top: 100%; opacity: 0; filter: alpha(opacity=0); transition: 1s,opacity 0.5s; -webkit-transition: 1s,opacity 0.5s; }
/*#pages-box .page-contact{
    top:-100%;
}*/
/*#pages-box .page-innovate{
    left:100%;
    top:0;
}*/
#pages-box .first-page { width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
#pages-box .first-page .first-page-main { width: 1000px; text-align: center; margin: 6% auto 0; }
#pages-box .first-page .title1 { font-size: 60px; line-height: 150%; color: #135f50; font-weight: bold; }
#pages-box .first-page .jia { position: relative; top: -25px; font-size: 50px; }
#pages-box .first-page .title2 { font-size: 20px; color: #000; font-weight: bold; margin-top: 20px; }
#pages-box .first-page .text { font-size: 15px; line-height: 26px; color: #646464; margin-top: 60px; padding: 25px 50px 40px 50px; position: relative; }
#pages-box .first-page .text .t { opacity: 0; filter: alpha(opacity=0); }
#pages-box .first-page .text .p { font-size: 20px; color: #135f50; margin: 0 0 15px 0; }
#pages-box .first-page .text:before { content: ''; width: 20px; height: 20px; border-top: 5px solid #135f50; border-left: 5px solid #135f50; position: absolute; left: 0; top: 50px; transition: .5s; opacity: 0; filter: alpha(opacity=0); }
#pages-box .first-page .text:after { content: ''; width: 20px; height: 20px; border-right: 5px solid #135f50; border-bottom: 5px solid #135f50; position: absolute; right: 0; bottom: 50px; opacity: 0; filter: alpha(opacity=0); transition: .5s; }
#pages-box .first-page .posT { position: relative; top: 80px; opacity: 0; filter: alpha(opacity=0); transition: 0.7s; -webkit-transition: 0.7s; }
#pages-box.first-page-show { }
#pages-box.first-page-show .first-page .title1 { transition: 1s; -webkit-transition: 1s; }
#pages-box.first-page-show .first-page .title2 { transition: 1s 0.1s; -webkit-transition: 1s 0.1s; }
#pages-box.first-page-show .first-page .text .t { opacity: 1; filter: alpha(opacity=100); transition: 1s 0.4s; -webkit-transition: 1s 0.7s; }
#pages-box.first-page-show .first-page .text:before { top: 0; left: 0; opacity: 1; filter: alpha(opacity=100); transition: .5s .6s; }
#pages-box.first-page-show .first-page .text:after { right: 0; bottom: 0; opacity: 1; filter: alpha(opacity=100); transition: .5s .6s; }
#pages-box.first-page-show .posT { top: 0; opacity: 1; filter: alpha(opacity=100); }
#pages-box.first-page-show .pages-nav li { transform: scale(1) rotateY(0deg); -webkit-transform: scale(1) rotateY(0deg); opacity: 1; filter: alpha(opacity=100); transition: 1s 1s; -webkit-transition: 1s 1; }
#pages-box.first-page-show .pages-nav li:hover .title { border: 5px solid #135f50; }
#pages-box.first-page-show .pages-nav li:hover .t1 { color: #135f50; }



#pages-box .page .bg { width: 110%; height: 110%; position: absolute; left: 0; top: 0; opacity: 0; filter: alpha(opacity=0); transition: 2s 0.3s; -webkit-transition: 2s 0.3s; }
#pages-box .page-idea .bg { background: url(../images/about_bg1.jpg) no-repeat center; background-size: cover; }
#pages-box .page-innovate .bg { background: url(../images/about_bg2.jpg) no-repeat center; background-size: cover; }
#pages-box .page-layout .bg { background: url(../images/about_bg3.jpg) no-repeat center; background-size: cover; }
#pages-box .page-contact .bg { background: url(../images/about_bg4.jpg) no-repeat top center; background-size: 100% auto; width: 100%; height: 100%; }
#pages-box .cur-page { top: 0; left: 0; opacity: 1; filter: alpha(opacity=100); }
#pages-box .cur-page .bg { top: -10%; opacity: 1; filter: alpha(opacity=100); }
#pages-box .cur-page.page-contact .bg { top: 0; }

#pages-box .pages-nav li { width: 166px; float: left; cursor: pointer; position: absolute; left: 50%; top: 75%; /*transform:scale(1.5) rotateY(90deg);
    -webkit-transform:scale(1.5) rotateY(90deg);*/ transform: scale(1.5); -webkit-transform: scale(1.5); opacity: 0; filter: alpha(opacity=0); transition: 0.6s,opacity 0.4s,border 0.4s; -webkit-transition: 0.6s,opacity 0.4s,border 0.4s; }

#pages-box .pages-nav .li1 { margin: 0 0 0 -428px; }
#pages-box .pages-nav .li2 { margin: 0 0 0 -214px; }
#pages-box .pages-nav .li3 { margin: 0 0 0 0; }
#pages-box .pages-nav .li4 { margin: 0 0 0 214px; }
#pages-box .pages-nav .title { width: 156px; height: 156px; border: 3px solid #e2e2e2; /*color:#135f50;*/ font-weight: bold; text-align: center; border-radius: 50%; transition: 1s,border-radius 0.4s; -webkit-transition: 1s,border-radius 0.4s; }
#pages-box .pages-nav .t1 { line-height: 156px; font-size: 20px; position: relative; top: 0; transition: 1s; -webkit-transition: 1s; }
#pages-box.pages-show .pages-nav li { opacity: 0; filter: alpha(opacity=0); /*transform:scale(0.7);
    -webkit-transform:scale(0.7);*/ }
#pages-box.pages-show .pages-nav li.active { width: 216px; left: 5%; top: 10%; margin: 0; opacity: 1; filter: alpha(opacity=100); transform: scale(1); -webkit-transform: scale(1); }
#pages-box.pages-show .pages-nav .title { /*border:5px solid #135f50;*/ color: #135f50; }
#pages-box.pages-show .pages-nav li.active .title { width: 210px; height: 28px; border-radius: 0; border: 3px solid #135f50; }
#pages-box.pages-show .pages-nav li.active .t1 { margin: 0 0 0 -122px; font-size: 14px; line-height: 28px; color: #135f50; }
#pages-box.pages-show .pages-nav .li3.active .t1, #pages-box.pages-show .pages-nav .li4.active .t1 { margin: 0 0 0 -94px; }

.pages-nav-left { display: none; width: 300px; position: absolute; left: 5%; top: 140px; z-index: 10;box-sizing: border-box }
.pages-nav-left li { margin: 0 0 10px 0; overflow: hidden; cursor: pointer; }
.pages-nav-left .title { width: 300px; height: 34px; overflow: hidden; border: 3px solid #135f50; transition: 1s; -webkit-transition: 1s;box-sizing: border-box }
.pages-nav-left.contact-style .li4 .title { border: 3px solid #135f50; }
.pages-nav-left.contact-style .li4 .title .t1 { color: #135f50; }
.pages-nav-left .t1 { font-size: 14px; line-height: 28px; padding: 0 0 0 30px; color: #135f50; position: relative; top: 0; transition: 1s; -webkit-transition: 1s; }
.pages-nav-left .t2 { opacity: 0; filter: alpha(opacity=0); line-height: 32px; margin: 0 0 0 30px; font-size: 32px; position: relative; top: 50px; transition: opacity 0.5s 0.4s,top 0.5s 0.4s; -webkit-transition: opacity 0.5s 0.4s,top 0.5s 0.4s; }
.pages-nav-left .t3 { opacity: 0; filter: alpha(opacity=0); font-size: 50px; color: #fff; line-height: 65px; padding: 18px 50px 15px 30px; position: relative; top: -50px; transition: 0.8s; -webkit-transition: 0.8s; }
.pages-nav-left .title2 { opacity: 0; filter: alpha(opacity=0); width: 210px; height: 0; margin: 0; border: 3px solid #135f50; color: #135f50; background: url(../images/about-icon1.png) no-repeat 162px 36px; position: relative; top: 50px; transition: 0.6s 0.3s; -webkit-transition: 0.6s 0.3s; }
.pages-nav-left .title2 .t { line-height: 18px; margin: 20px 0 0 30px; padding: 15px 0 0 0; position: relative; }
.pages-nav-left .title2 .t:after { content: ''; width: 18px; height: 3px; background: #135f50; overflow: hidden; position: absolute; left: 0; top: 0; }
.pages-nav-left .active .title { height: 320px; color: #fff; background: #135f50; }
.pages-nav-left .li1.active .title { height: 230px; }
.pages-nav-left .li3.active .title { height: 320px; }
.pages-nav-left .li4.active .title { height: 320px; }
.pages-nav-left .active .t1 { top: -50px; opacity: 0; filter: alpha(opacity=0); }
.pages-nav-left .active .t2 { opacity: 1; filter: alpha(opacity=100); top: 0; }
.pages-nav-left .active .t3 { opacity: 1; filter: alpha(opacity=100); top: 0; }
.pages-nav-left .active .title2 { opacity: 1; filter: alpha(opacity=100); margin: 6px 0; top: 0; height: 84px; }
.sbtt {
    font-family: MicrosoftYaHei-Bold;
    font-size: 20px;
    color: #cccccc !important;
    line-height: 1.5;
    margin-top: 10px;
    cursor: pointer;
}
.sbtt.active2 {
    color: #fff !important;
}
.ss2 {
    display: none;
}
.page-main { width: 740px; position: absolute; left: 35%; top: 140px; z-index: 1; }
.page-main dt { height: 46px; position: relative; }
.page-main dt:after { content: ''; width: 0; height: 3px; overflow: hidden; background: #135f50; position: absolute; left: 0; bottom: 0; transition: 0.7s 0.5s; -webkit-transition: 0.7s 0.5s; }
.cur-page .page-main dt:after { width: 100%; }
.page-main dt .s1 { font-size: 24px; line-height: 24px; font-weight: bold; color: #000000; display: inline-block; float: left; margin: 0 40px 0 0; cursor: pointer; }
.page-main dt .icon { width: 14px; height: 14px; display: inline-block; float: left; border: 3px solid #a0a0a0; position: relative; margin: 2px 12px 0 0; transition: 1s; -webkit-transition: 1s; }
.page-main dt .icon:after { content: ''; width: 8px; height: 8px; background: #135f50; position: absolute; left: 50%; top: 50%; margin: -4px 0 0 -4px; opacity: 0; filter: alpha(opacity=0); transform: scale(0.1); -webkit-transform: scale(0.1); transition: 0.7s; -webkit-transition: 0.7s; }
.page-main dt .cur .icon { border-color: #135f50; }
.page-main dt .cur .icon:after { opacity: 1; filter: alpha(opacity=100); transform: scale(1); -webkit-transform: scale(1); }
.page-main dd { height: 365px; overflow: hidden; padding: 0 0 30px 0; /*background:url(../images/about-icon2.jpg) no-repeat left bottom;*/ position: relative; }
.page-main dd .text { width: 100%; position: absolute; left: 0; top: 80px; border-bottom: 1px solid #135f50; line-height: 24px; color: #646464; font-size: 16px; opacity: 0; filter: alpha(opacity=0); transition: 1s,opacity 0.6s; -webkit-transition: 1s,opacity 0.6s; }
.page-main dd .title { color: #646464; font-size: 18px; position: relative; left: 50px; opacity: 0; filter: alpha(opacity=0); transition: 1s 0.4s; -webkit-transition: 1s 0.4s; }
.cur-page .page-main .title { left: 0; opacity: 1; filter: alpha(opacity=100); }
.page-main dd .text-show { opacity: 1; filter: alpha(opacity=100); bottom: 30px; }
.page-main dd .textC{ position: absolute; left: 0; top: 20px; opacity: 0; filter: alpha(opacity=0); transition: 1s,opacity 0.6s; -webkit-transition: 1s,opacity 0.6s;}
.page-main dd .textC-show { opacity: 1; filter: alpha(opacity=100); top: 0; }
.page-contact .add{ line-height: 1.2; padding-top: 40px; font-size: 16px; color: #fff;}
.page-contact .contact { padding: 85px 0 0 0; }
.page-contact .contact ul { width: 100%; overflow: hidden; }
.page-contact .contact li { width: 50%; font-size: 13px; float: left; height: 130px; color: #323232; opacity: 0; filter: alpha(opacity=0); position: relative; top: 50px; transition: 0.3s; -webkit-transition: 0.3s; }
.page-contact .contact li:after { content: ''; width: 40px; height: 3px; background: #b4b4b4; overflow: hidden; position: absolute; left: 0; top: 0; }
.page-contact .contact .t { margin: 10px 0 15px 0; font-size: 14px; font-weight: bold; }
.page-contact dd { min-height: 450px; background: none; padding: 0; }
.page-contact .other { width: 100%; padding: 5px 0 0 0; position: relative; top: 50px; opacity: 0; filter: alpha(opacity=0); transition: 1s 0.8s; -webkit-transition: 1s 0.8s; }
.page-contact .other a { color:#646464}
.page-contact .other a:hover { color:#135f50 }
.cur-page.page-contact .other { top: 0; opacity: 1; filter: alpha(opacity=100); }
.page-contact.cur-page .contact li { top: 0; opacity: 1; filter: alpha(opacity=100); }
.page-contact.cur-page .contact .li1 { transition: 0.7s 1s; -webkit-transition: 0.7s 1s; }
.page-contact.cur-page .contact .li2 { transition: 0.7s 1.2s; -webkit-transition: 0.7s 1.2s; }
.page-contact.cur-page .contact .li3 { transition: 0.7s 1.4s; -webkit-transition: 0.7s 1.4s; }
.page-contact.cur-page .contact .li4 { transition: 0.7s 1.6s; -webkit-transition: 0.7s 1.6s; }

@media screen and (max-width:1580px) {
    #pages-box .first-page .first-page-main { width: auto; margin: 5% 50px; }
    .page-contact .page-main { top: 22%; }
}

@media screen and (max-width:1440px) {
    .pages-nav-left .t3 { font-size: 50px; padding-top:0;}
    .pages-nav-left .t2 { font-size: 26px; }
    .pages-nav-left .active .title { height: 200px; color: #fff; background: #135f50; }
    .pages-nav-left .li3.active .title { height: 260px; }
    .pages-nav-left .li4.active .title { height: 260px; }
    #pages-box .first-page .title1 { font-size: 55px; }
    #pages-box .first-page .title2 { font-size: 18px; }
    #pages-box .pages-nav li { width: 130px; }
    #pages-box .pages-nav .title { width: 120px; height: 120px; }
    #pages-box .pages-nav .t1 { line-height: 120px; font-size: 20px; }
    #pages-box .pages-nav .li1 { margin: 0 0 0 -320px; }
    #pages-box .pages-nav .li2 { margin: 0 0 0 -160px; }
    #pages-box .pages-nav .li3 { margin: 0 0 0 0; }
    #pages-box .pages-nav .li4 { margin: 0 0 0 160px; }

    #pages-box .first-page .title1 span { }
    #pages-box .first-page .title2 span { }
    #pages-box .first-page .text { font-size: 13px; line-height: 24px; }
    .page-contact .page-main { top: 120px; }
    .page-contact .contact { padding: 80px 0 0 0; }
}
