.clearfix:before, .clearfix:after { content: ""; display: table;}
.clearfix:after { clear: both; overflow: hidden; }
.clearfix { zoom: 1; }

.pubW { width: 1190px; }
.center { margin: 0px auto; }

.display-i { display: inline; }
.display-b { display: block; }
.relative { position: relative; }
.absolute { position: absolute; }



/* ��Ŀ������ */
.superNavs {width:100%;height:86px; background-color:#f1f0f0;}
.superNavs ul {height:86px;overflow:hidden;}
.superNavs li {width:131px;height:100%;border-left:1px solid #dcdcdc;float:left;position:relative;}
.superNavs li i {display:block;position:absolute;width:100%;height:100%;left:0;top:0; background-color:#01a4b5;opacity:0;filter:alpha(opacity:0);-webkit-animation:orangeOut 0.4s ease;animation:orangeOut 0.4s ease;}
.superNavs li:hover i {opacity:1;filter:alpha(opacity:100);-webkit-animation:orangeIn 0.2s ease;
    animation:orangeIn 0.2s ease;}
.superNavs li a {display:block;position:absolute;left:0;top:0;width:100%;height:100%;}
.superNavs li a:before {content:'';position:absolute;left:50%;top:14px;-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%);}
.superNavs li a:after {content:attr(data-hover);position:absolute;width:100%;bottom:10px;text-align:center;color:#fff;line-height:28px;font-size:16px;color:#636363;}
.superNavs li a:hover:after {color:#fff;}
.superNav1 a:before { width:28px;height:25px; background:url(../images/navIcon.png) no-repeat 0 -39px;}
.superNav2 a:before { width:25px;height:30px; background:url(../images/navIcon.png) no-repeat -31px -39px;}
.superNav3 a:before { width:27px;height:26px; background:url(../images/navIcon.png) no-repeat -60px -39px;}
.superNav4 a:before { width:30px;height:28px; background:url(../images/navIcon.png) no-repeat -92px -38px;}
.superNav5 a:before { width:24px;height:31px; background:url(../images/navIcon.png) no-repeat -128px -39px;}
.superNav6 a:before { width:28px;height:28px; background:url(../images/navIcon.png) no-repeat -159px -40px;}
.superNav7 a:before { width:25px;height:26px; background:url(../images/navIcon.png) no-repeat -195px -40px;}
.superNav8 a:before { width:32px;height:26px; background:url(../images/navIcon.png) no-repeat -227px -40px;}
.superNav9 a:before { width:28px;height:28px; background:url(../images/navIcon.png) no-repeat -266px -40px;}
.superNav1 a:hover:before { background-position: 0 0;}
.superNav2 a:hover:before { background-position: -31px 0;}
.superNav3 a:hover:before { background-position: -60px 0;}
.superNav4 a:hover:before { background-position: -92px 0;}
.superNav5 a:hover:before { background-position: -128px 0;}
.superNav6 a:hover:before { background-position: -159px -1px;}
.superNav7 a:hover:before { background-position: -195px -1px;}
.superNav8 a:hover:before { background-position: -227px -1px;}
.superNav9 a:hover:before { background-position: -266px -1px;}
@-webkit-keyframes orangeIn {
    0% {
    -webkit-transform:scale(0.8);
    -ms-transform:scale(0.8);
    transform:scale(0.8);
    opacity:0
}
100% {
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);
    opacity:1
}
}
@-moz-keyframes orangeIn {
    0% {
    -webkit-transform:scale(0.8);
    -ms-transform:scale(0.8);
    transform:scale(0.8);
    opacity:0
}
100% {
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);
    opacity:1
}
}
@-ms-keyframes orangeIn {
    0% {
    -webkit-transform:scale(0.8);
    -ms-transform:scale(0.8);
    transform:scale(0.8);
    opacity:0
}
100% {
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);
    opacity:1
}
}

@keyframes orangeIn {
    0% {
    -webkit-transform:scale(0.8);
    -ms-transform:scale(0.8);
    transform:scale(0.8);
    opacity:0
}
100% {
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);
    opacity:1
}
}

@-webkit-keyframes orangeOut {
    0% {
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);
    opacity:1
}
100% {
    -webkit-transform:scale(0.8);
    -ms-transform:scale(0.8);
    transform:scale(0.8);
    opacity:0
}
}
@-moz-keyframes orangeOut {
    0% {
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);
    opacity:1
}
100% {
    -webkit-transform:scale(0.8);
    -ms-transform:scale(0.8);
    transform:scale(0.8);
    opacity:0
}
}
@-ms-keyframes orangeOut {
    0% {
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);
    opacity:1
}
100% {
    -webkit-transform:scale(0.8);
    -ms-transform:scale(0.8);
    transform:scale(0.8);
    opacity:0
}
}
@keyframes orangeOut {
    0% {
    -webkit-transform:scale(1);
    -ms-transform:scale(1);
    transform:scale(1);
    opacity:1
}
100% {
    -webkit-transform:scale(0.8);
    -ms-transform:scale(0.8);
    transform:scale(0.8);
    opacity:0
}}

.mainContent { padding: 40px 0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box; }
.part1 { width: 100%; height: 364px; border: 1px solid #c9c9ca; -moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box; }
.part1 .aside { width: 298px; height: 100%; padding: 0 25px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box; border-right: 1px solid #c9c9ca }
.indexTitle { width: 100%; height: 68px; line-height: 68px; padding-left: 10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box; position: relative; color: #a0a0a0; font-size: 12px; }
.indexTitle:before { content: ''; position: absolute; left: 0; top: 50%; width: 4px; height: 18px; margin-top: -8px; background-color: #01a4b5;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px; }
.indexTitle span { font-size: 18px; color: #494949; margin-right: 15px; cursor:pointer; }
/*.indexTitle span.on{ border-bottom:2px #01a4b5 solid;}*/
.part1 .aside p { font-size: 16px; color: #525252; line-height: 26px; padding-top: 20px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box; }
.part1 .aside p a { color: #525252; text-decoration: none; }
.part1 .bside { width: 595px; height: 100%; padding: 0 25px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box; border-right: 1px solid #c9c9ca }
.part1 .bside .inner { width: 547px; height: 271px; }
.part1 .bside .inner ul li{ width:45%; margin-right:27px;line-height:25px; position:relative; float:left}
.part1 .bside .inner ul li span{font-size:12px; color:#b7b7b7; position:absolute; right:4px;}
.part1 .cside { width: 295px; height: 362px; position: relative; }
.gongzhonghao { left: 96px; top: 174px; width: 114px; height: 114px; overflow: hidden; }
.gongzhonghao:after { content: ''; position: absolute; left: 0; top: 30px; background-color: #20c2ff; width: 100%; height: 2px; -moz-box-shadow: 0 0 6px rgba(32,194,255,.7); -webkit-box-shadow: 0 0 6px rgba(32,194,255,.7); box-shadow: 0 0 6px rgba(32,194,255,.7); -moz-animation-delay: 0.7s; -moz-animation-duration: 3s; -moz-animation-fill-mode: both; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-name: qrcode; -webkit-animation-delay: 0.7s; -webkit-animation-duration: 3s; -webkit-animation-fill-mode: both; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-name: qrcode; animation-delay: 0.7s; animation-duration: 3s; animation-fill-mode: both; animation-iteration-count: infinite; animation-direction: normal; animation-name: qrcode; }
 @-webkit-keyframes qrcode { 0% {
 opacity: 1;
 filter:alpha(opacity:100);
 top: -20px;
}
100% {
 opacity: 1;
 filter:alpha(opacity:100);
 top: 153px;
}
}
 @-moz-keyframes qrcode { 0% {
 opacity: 1;
 filter:alpha(opacity:100);
 top: -20px;
}
100% {
 opacity: 1;
 filter:alpha(opacity:100);
 top: 153px;
}
}
@keyframes qrcode { 0% {
 opacity: 1;
 filter:alpha(opacity:100);
 top: -20px;
}
100% {
 opacity: 1;
 filter:alpha(opacity:100);
 top: 153px;
}
}

.part2 {width:100%;height:548px;overflow:hidden;}
.part2 li {float:left;width:384px;overflow:hidden;margin-right:19px;display:inline;}
.part2 li a {float:left;display:block;position:relative;margin-right:20px;display:inline;margin-bottom:20px;}
.part2 li:last-child {margin-right:0;}
.part2 li:last-child a:nth-child(3){margin-right:0;}
.part2 li p {position:absolute;left:0;bottom:0;width:100%;height:80px;line-height:80px;text-align:center;font-size:24px;color:#fff; background-color:rgba(90,162,188,.8);-moz-transition:all 0.3s linear 0s;-webkit-transition:all 0.3s linear 0s;transition:all 0.3s linear 0s;}
.part2 li a:hover p { background-color:rgba(90,162,188,1)}
.part2 li i {position:absolute;right:5px;bottom:57px;display:block;width:19px;height:19px; background:url(../images/icon.png) no-repeat -1172px -113px;}
.part2 li a:hover i{-webkit-animation:rotate360 1.2s linear  0s infinite;animation:rotate360 1.2s linear   0s infinite;}
@-moz-keyframes rotate360 {

        from {
                -moz-transform:rotate(0deg);
            }
        to  {
                -moz-transform:rotate(360deg);
            }
    }
@-o-keyframes rotate360 {

        from {
                -o-transform:rotate(0deg);
            }
        to  {
                -o-transform:rotate(360deg);

            }
    }
@-ms-keyframes rotate360 {

        from {
                -ms-transform:rotate(0deg);
            }
        to  {
                -ms-transform:rotate(360deg);

            }
    }
@-webkit-keyframes rotate360 {

        from {
                -webkit-transform:rotate(0deg);
            }
        to  {
                -webkit-transform:rotate(360deg);

            }
    }
@keyframes rotate360 {

        from {
                transform:rotate(0deg);
            }
        to  {
                transform:rotate(360deg);

            }
    }

.part5 ul li {width:222px;height:336px;overflow:hidden;float:left;margin-right:20px;display:inline;position:relative;-moz-box-shadow:0 2px 4px rgba(0,0,0,.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,.2);box-shadow:0 2px 4px rgba(0,0,0,.2);}
.part5 ul li:last-child {margin-right:0;}
.part5 .scaleImg {width:222px;height:240px;overflow:hidden;position:relative;}
.part5 .scaleInfo {width:222px;height:96px;overflow:hidden; background-color:#519eb9;padding-left:66px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
.part5 ul li img {width:245px;height:264px;-moz-transition:all 0.3s linear 0s;-webkit-transition:all 0.3s linear 0s;transition:all 0.3s linear 0s;position:absolute;left:50%;top:50%;-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.part5 .scaleImg:hover img {width:222px;height:240px;}

.scaleInfo h4 {width:100%;font-size:18px;color:#fff;line-height:32px;margin-top:15px;}
.scaleInfo p {color:#fff;font-size:18px;}
.scaleInfo:before {left:13px;top:25px;position:absolute;width:42px;height:42px;line-height:42px;border:1px solid #fff;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;font-size:24px;text-align:center;color:#fff;-moz-border-radius:50%;-webkit-border-radius:50%;border-radius:50%;}
.scaleInfo1:before {content:'1'}
.scaleInfo2:before {content:'2'}
.scaleInfo3:before {content:'3'}
.scaleInfo4:before {content:'4'}
.scaleInfo5:before {content:'5'}

/* environment */
.part6 ul li img{width: 245px;height: 160px;}
.part6 .scaleImg{height: 155px;}
.part6 .scaleImg:hover img{height: 155px;}
.part6 ul li{height: auto;}