@charset 'utf-8';

.hTitle h1 { width:440px; height:36px; font:normal 36px/36px "微软雅黑"; color:#525151; margin:0 auto; text-align:center; background:#fff; border-left:1px solid #d9d9d9; border-right:1px solid #d9d9d9; }
.hTitle h1 em { font:normal 22px/18px "Arial"; color:#9dcdff; text-transform:uppercase; padding-left:7px; }

.about { position:relative; width:100%; margin:0 auto; padding-top:66px; overflow:hidden; }
.about .wrap { background:url(../images/about-bg.jpg) no-repeat left 107px; }

.about h3 { background:url(../images/img_4.jpg) no-repeat; width:231px; height:46px; margin:0 auto;}
.about .txt { width:635px; margin:0 auto; text-align:center; padding-top:55px; }
.about .txt p { font:normal 14px/22px "微软雅黑"; color:#7e7e7e; }
.about .txt a.more { background:url(../images/img_5.jpg) no-repeat; width:65px; height:29px; display:block; margin:0 auto; margin-top:45px; }


.about .intro { padding-top:133px; }
.about .intro li { position:relative; float:left; width:302px; height:167px; overflow:hidden; text-transform:preserve-3d; }
.about .intro li a { display:block; width:302px; height:167px; overflow:hidden; color:#fff; }

.dm { float: left; position:relative; width:355px; height:195px; background:#9dbe05; overflow:hidden; margin-right:45px; display:inline; }
.dm .pic { width:355px; height: 195px; cursor:pointer; }
.dm .pic img{width: 100%}
.dm .mc { position:absolute; bottom:0; right:0; width:0; height:0; z-index:2; }
.dm .mc img { width:100%; height:100%; }

.pic { position:relative; margin:0 auto; width:100%; height:357px; overflow:hidden; background:url(../images/product-bg.jpg) no-repeat center top; }

.i-product { position:relative; width:100%; margin-right:0 auto; overflow:hidden; background:url(../images/contact-bg.jpg) no-repeat center bottom; }
.product-lin { position:absolute; left:0; top:0; width:100%; height:18px; background:url(../images/product-line.jpg) repeat-x; }
.productlist { position:relative; padding:56px 0 146px; }
.productlist a.prev,.productlist a.next { position:absolute; left:-28px; top:215px; display:block; width:23px; height:45px; background:url(../images/prev.jpg) no-repeat; cursor:pointer; }
.productlist a.prev { right:-28px; left:auto; background:url(../images/next.jpg) no-repeat; }
.productlist a.prev:hover { background:url(../images/next-on.jpg); }
.productlist a.next:hover { background:url(../images/prev-on.jpg); }
.productlist .list { width:984px; height:403px; overflow:hidden; margin:0 auto; } 
.productlist .list li { float:left; width:82px; height:317px; padding:45px 72px 41px; background:#f7f7f7; margin:0 10px; display:inline;  -webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;}
.productlist .list li dt { padding-bottom:20px; height:125px; overflow:hidden; }
.productlist .list li dd { position:relative; height:24px; text-align:center; padding-bottom:13px; font:normal 16px/24px "微软雅黑"; color:#474747; }
.productlist .list li dd b { position:absolute; left:50%; bottom:0px; margin-left:-9px; width:19px; height:1px; overflow:hidden; }
.productlist .list li p { font:normal 12px/18px "微软雅黑"; color:#9c9d9d; height:66px; overflow:hidden; padding:28px 0 32px; }
.productlist .list li a.more { display:block; width:74px; height:19px; border:1px solid #e0e0e0; text-align:center; margin:0 auto; font:normal 10px/19px "Arial"; }

.productlist .list li.ln1 dt { background:url(../images/p1.png) no-repeat center top; }
.productlist .list li.ln1 dd b { background:#f9c955; }
.productlist .list li.ln1 a.more { color:#f9c955; }
.productlist .list li.ln1:hover dt { background:url(../images/p1-on.png) no-repeat center top;}
.productlist .list li.ln1:hover { background:#f9c955; }

.productlist .list li.ln2 dt { background:url(../images/p2.png) no-repeat center top; }
.productlist .list li.ln2 dd b { background:#67bee8; }
.productlist .list li.ln2 a.more { color:#67bee8; }
.productlist .list li.ln2:hover dt { background:url(../images/p2-on.png) no-repeat center top;}
.productlist .list li.ln2:hover { background:#67bee8; }


.productlist .list li.ln3 dt { background:url(../images/p3.png) no-repeat center top; }
.productlist .list li.ln3 dd b { background:#f082b3; }
.productlist .list li.ln3 a.more { color:#f082b3; }
.productlist .list li.ln3:hover dt { background:url(../images/p3-on.png) no-repeat center top;}
.productlist .list li.ln3:hover { background:#f082b3; }

.productlist .list li.ln4 dt { background:url(../images/p4.png) no-repeat center top; }
.productlist .list li.ln4 dd b { background:#91e2eb; }
.productlist .list li.ln4 a.more { color:#91e2eb; }
.productlist .list li.ln4:hover dt { background:url(../images/p4-on.png) no-repeat center top;}
.productlist .list li.ln4:hover { background:#91e2eb; }

.productlist .list li:hover dd b { background:#fff; }
.productlist .list li:hover a.more { border:1px solid #fff;  color:#fff; }

/* contact */
.contact { background:#ebebeb; border-bottom:8px solid #9dcdff; }
.contact .wrap { padding:48px 0; background:url(../images/map.png) no-repeat 310px 27px #ebebeb; }
.contact b { display:block; width:57px; height:1px; margin-bottom:6px; overflow:hidden; background:#461f00; }
.contact-title { float:left; height:72px; font:normal 48px/72px "Arial"; color:#989898; text-transform:uppercase; }
.contact-link { font:normal 16px/16px "Arial"; padding-bottom:17px; }
.contact-link a { color:#515151; }
.contact-share { float:left; padding-left:81px; }
.contact-share a { padding:0 3px; }
.contact-share a img { vertical-align:middle; }

.code { position:absolute; right:0; top:37px; width:219px; height:113px; overflow:hidden; }
.section .icon{display: none;}
.mouseIco {
    width: 24px;
    height: 40px;cursor:pointer; ;
    background: url(../images/mouse-f_09.png) no-repeat center;
    position: absolute;
    bottom: 45px;
    left: 50%;
    margin-left: -12px;
}
.mouseIco:after {
    display: block;
    content: "";
    background: url(../images/down-f_12.png) no-repeat center;
    width: 20px;
    height: 19px;
    bottom: -24px;
    left: 2px;
    animation: floatBottom infinite 1s;
    -webkit-animation: floatBottom infinite 1s;
    position: absolute;
}
@keyframes floatBottom {
    0% {
        opacity: .9;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-.05rem);
    }

    100% {
        opacity: .9;
        transform: translateY(0);
    }
}
@-webkit-keyframes floatBottom{
    0% {
        opacity: .9;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-.05rem);
    }

    100% {
        opacity: .9;
        transform: translateY(0);
    }
}
.section1{
    position: relative;}
.section2{
    background-color: rgba(0,0,0,.6);background-repeat: no-repeat;background-position: 50% 50%;}

.title{text-align: center;margin: 0 auto;}
.title h1{text-indent: 16px;
    font-weight: bold;
    color: #fefefe; font-size: 42px;letter-spacing: 16px;line-height: 50px;}
.title  .subTitle{
    margin-top: 15px; margin-bottom: 10px;position: relative;padding-bottom: 23px;}

.title  .subTitle em{
    display: block;
    width: 24px;
    height: 24px;background: url("../images/circle.png") no-repeat;
    margin: 18px auto;
}

.title .moveLine{width:1072px;height: 1px; background: #a3a2a1;position: relative;margin: 12px auto 23px;}
.title .moveLine:before{content: "";  width: 4px;  height: 4px;background: url("../images/line-circle.png") no-repeat;  position: absolute;      top: -1px;
    left: -22px;}
.title .moveLine:after{content: "";  width: 4px;  height: 4px;background: url("../images/line-circle.png") no-repeat;  position: absolute;  top: -1px;  right: -22px;}
.title .moveLine .line{width: 140px;}
.title .moveLine .line span{ display: block; width: 73px;  height: 2px;background: #fff;margin: 0 auto;}
.title ul{height: 0px;padding: 0;width:1076px;margin: 0 auto;transition:height .3s ease-in-out,padding .3s ease-in-out;background: url(../images/win.png) center top no-repeat;}
.title ul li{transition:all .3s ease-in-out;height: 0;float: left;margin-left: 16px;position: relative;}
.title ul li *{height: 0;}
.title ul li img{transition:transform .3s ease-in-out;box-sizing: border-box;width: 140px;
   }
.title ul li:first-child{margin-left: 0;}
.title ul li a{display: block;position: relative;}
.title ul li a p{color: #fff; opacity: 0; visibility: hidden; /*transition:opacity .3s ease-in-out;*/font-size: 18px;background: rgba(0,0,0,.5); position: absolute;width: 120%;height: 120%;left: 0;top: 0;text-align: center;line-height: 92px;}
.title ul li:hover img{transform:scale(1.2,1.2);border: 1px solid #fff;transition:transform .3s ease-in-out;}
.title ul li:hover p{visibility:visible;    line-height: 161px; opacity: 1;height: calc(120% - 2px);width: calc(120% - 3px);top: calc(1px - 10%);left: calc(2px - 10%); transition:opacity .6s ease-in-out;}

.title:hover ul{height:140px;padding-top: 24px; padding-bottom: 30px;transition:height .3s ease-in-out,padding .3s ease-in-out;}
.title:hover ul li{height: 140px;transition:all .3s ease-in-out;}
.title:hover ul li *{height: 100%;}
.title:hover h1 +p:after{background: #c10009;}
.footer{ position: absolute;bottom: 0;left: 0;}
.en-flag{position: absolute;bottom: 130px;left: 50%;margin-left: -111px;width: 220px;}