﻿
body{ background: #ffffff;}
.aboutus-wrap{min-width: 1190px; margin: 0 auto; overflow: hidden;}
.aboutus-wrap .banner-box{ height: 600px; width: 100%; position: relative; overflow: hidden; background: #000000; }
#banner-inner {	position: absolute; top: 0; width: 1920px; left: 50%; margin-left: -960px; height: 100%; z-index: 98; }
.scroll-bg { font-size: 0; width: 1920px; height: 560px; position: absolute; left: 50%; top: 0; margin-left: -1280px; margin-top:0; }
.scroll-bg img{ height: 600px; width: 100%; }
.scroll-bg .vert{width: 320px;height: 560px;position: absolute;top:0;}
#scroll-1{transform: translateX(0px);-webkit-transform: translateX(0px);animation: scrollBackground1 80s linear infinite;-webkit-animation: scrollBackground1 80s linear infinite;}
#scroll-2{transform: translateX(1920px);-webkit-transform: translateX(1920px);animation: scrollBackground2 80s linear infinite;-webkit-animation: scrollBackground2 80s linear infinite;}
.scroll-bg .v1{left: 0;}
.scroll-bg .v2{left: 320px;}
.scroll-bg .v3{left: 640px;}
.scroll-bg .v4{left: 960px;}
.scroll-bg .v5{left: 1280px;}
.scroll-bg .v6{left: 1600px;}
.scroll-bg .v7{left: 1920px;}
.scroll-bg .v8{left: 2240px;}
.scroll-bg .v9{left: 2560px;}
.scroll-bg .v10{left: 2880px;}
.scroll-bg .f1{opacity: .1;animation: flash1 6s linear infinite;-webkit-animation: flash1 6s linear infinite;}
.scroll-bg .f2{opacity: .2;animation: flash2 8s linear infinite;-webkit-animation: flash2 8s linear infinite;}
.scroll-bg .f3{opacity: .3;animation: flash3 6s linear infinite;-webkit-animation: flash3 6s linear infinite;}
.scroll-bg .f4{opacity: .4;animation: flash4 8s linear infinite;-webkit-animation: flash4 8s linear infinite;}
.scroll-bg .f5{opacity: .5;animation: flash5 6s linear infinite;-webkit-animation: flash5 6s linear infinite;}
.scroll-bg .f6{opacity: .6;animation: flash6 8s linear infinite;-webkit-animation: flash6 8s linear infinite;}
#scroll-2{transform: translateX(1920px);-webkit-transform: translateX(1920px);}
.banner-box .banner-nav{ position: absolute; top: 0; left: 0; width: 100%; height: 60px; background: rgba(0,0,0,.5); z-index: 99; }
.banner-nav .nav-box{ width:1190px; margin:0 auto; display: flex; align-items: center; justify-content: space-between; }
.banner-nav .nav-box h2 img{ height:60px; width: 140px; display: block; }
.banner-nav .nav-box ul{ display: flex; align-items: center; height: 60px; overflow: hidden; }
.banner-nav .nav-box ul li{ line-height: 60px; margin-left: 50px; position: relative; }
.banner-nav .nav-box ul li a{ font-size: 15px; color: #ffffff; font-weight: 300; }
.banner-nav .nav-box ul li.on a{ font-weight: 700; }
.banner-nav .nav-box ul li.on::after{content: ''; position: absolute; background: linear-gradient(to right,#FF9900,#FF5C00); width: 28px; height: 4px; position: absolute; bottom: 1px; left: 50%; margin-left: -14px; }
.banner-nav .nav-box ul li:hover a{ font-weight: 700; }
.banner-nav .nav-box ul li:nth-child(3){display: none;}
.banner-nav .nav-box ul li:nth-child(4){display: none;}
.banner-box .banner-txt{ position: absolute; z-index: 99; width: 100%; left: 0; top:250px; min-width: 1700px; text-align: center; }
.banner-box .banner-txt h3{ font-weight: 700; font-size: 30px; color: #FFFFFF; line-height: 42px; letter-spacing: 9px; }
.banner-box .banner-txt h4{ font-weight: 300; font-size: 13px; color: #FFFFFF; line-height: 20px; letter-spacing:20px; margin-top: 20px; opacity: 0; }
.banner-box .banner-txt h4 span{ padding: 0 25px; }
.nav-box{ width: 1346px; margin: -130px auto 0 auto; position: relative; z-index:99; }
.nav-box img{ width: 100%; }
.one-content{ width: 1200px; margin: 0 auto; padding-bottom: 75px; }
.one-content .title{ text-align: center; margin-top: -30px; }
.one-content .title img{ width:239px; }
.one-content .cont-txt{ text-align: center; margin-top: 27px; }
.one-content .cont-txt img{ height:47px; }
.one-content .one-box{ margin-top: 37px; display:flex; justify-content: space-between; align-items: center; }
.one-content .one-box .one-item{ width: 282px; overflow: hidden; height: 350px; display:flex; align-items: flex-end;}
.one-content .one-box .one-item img{ width: 282px; transform: translateX(0);  transition: 0.5s;}
.one-content .one-box .one-item:hover img{ transform: translateX(-282px);  transition: 0.5s;  }
.two-content{ width: 100%; height: 688px; margin: 0 auto; background: url(../image/bg-02.jpg) no-repeat center top; background-size: 1920px; }
.two-content .two-box{ width: 1200px; margin: 0 auto; padding:80px 0 55px 0;}
.two-content .title{ text-align: center; }
.two-content .title img{ width:239px; }
.two-content .cont-txt{ text-align: center; margin-top: 27px; }
.two-content .cont-txt img{ height:47px; }
.two-content .cont-box{ margin-top: 37px; display:flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.two-content .cont-box .two-item{ width: 585px; height: 160px; margin-bottom: 30px; overflow: hidden; }
.two-content .cont-box .two-item img{ width: 585px; transform: translateY(0px);  transition: 0.5s;  }
.two-content .cont-box .two-item:hover img{ transform: translateY(-160px);  transition: 0.5s;  }
.three-content{ width: 100%; height: 744px; margin: 0 auto; background:#111111; display: none; }
.three-content .three-box{ width: 1200px; margin: 0 auto; padding:70px 0 55px 0;}
.three-content .title{ text-align: center; }
.three-content .title img{ width:239px; }
.three-content .cont-txt{ text-align: center; margin-top: 27px; }
.three-content .cont-txt img{ height:47px; }
.three-content .map-box{ width: 1120px; margin: 50px auto 0 auto; position: relative; overflow: hidden; }
.three-content .map-box .map-pic img{ width: 1120px; }
.three-content .map-box .qx-box{ position: absolute; background: url(../image/zhexian.png) no-repeat; background-size: 100%;  width: 1106px; top: 40px; left: 7px; height: 285px; }
.four-content{ width: 1200px; margin: 0 auto; padding-bottom: 65px; display: none; }
.four-content .title{ text-align: center; margin-top:60px; }
.four-content .title img{ width:239px; }
.four-content .cont-txt{ text-align: center; margin-top: 27px; }
.four-content .cont-txt img{ height:47px; }
.four-content .active-box{ width: 1200px; margin: 0 auto; padding:30px 0 0 0; display: flex; justify-content: space-between; }
.four-content .active-box .active-left{ width: 822px; height: 430px; overflow: hidden; }
.four-content .active-box .active-left .active-item{ transition: 0.5s; }
.four-content .active-box .active-left .active-item.hov-0{ transform: translateY(0px) }
.four-content .active-box .active-left .active-item.hov-1{ transform: translateY(-430px) }
.four-content .active-box .active-left .active-item.hov-2{ transform: translateY(-860px) }
.four-content .active-box .active-left .active-item.hov-3{ transform: translateY(-1290px) }
.four-content .active-box .active-left img{ width: 822px; height: 430px; display:block; }
.four-content .active-right{ padding-top: 10px; }
.four-content .active-right .hov-item{ text-align: left; position:relative; cursor: pointer; padding-left: 40px; padding-bottom: 55px; }
.four-content .active-right .hov-item h3{ font-weight: 600; font-size: 22px; color: #222222; line-height: 31px; }
.four-content .active-right .hov-item p{ font-weight: 350; font-size: 14px; color: #666666; line-height: 19px; margin-top: 8px; }
.four-content .active-right .hov-item:before{ content:''; width: 9px; height: 9px; background: #D8D8D8; border-radius: 8px; border:2px solid #ffffff; position: absolute; top: 14px; left: 0; }
.four-content .active-right .hov-item::after{ content: ''; position: absolute; left: 5px; top: 30px; width: 1px; height: 90px; background:url(../image/line-icon.png) no-repeat; background-size: 100%; }
.four-content .active-right .hov-item:last-child{ padding-bottom: 0; }
.four-content .active-right .hov-item:last-child::after{ content: none; }
.four-content .active-right .hov-item.active h3{ color: #ff5c00; }
.four-content .active-right .hov-item.active p{ color: #ff5c00; }
.four-content .active-right .hov-item.active:before{ content:''; width: 13px; height: 13px; background:url(../image/yuan-icon.png) no-repeat; border: none; background-size: 100%; position: absolute; top: 14px; left: 0; }
.homeSlideIn_start{ opacity: 0; }
.homeSlideIn{ animation: homeSlideIn 1.5s 0.3s forwards; }
.homeSlideInTop{ animation: homeSlideInTop 1.5s 0.3s forwards; }
.homeSlideInBot{ animation: homeSlideBot 1.5s 0.3s forwards; }

.five-content{ width: 100%; height: 644px; margin: 0 auto; background: url(../image/bg-05.png) no-repeat center top; background-size: 1920px; }
.five-content .five-box{ width: 1200px; margin: 0 auto; padding:70px 0 55px 0;}
.five-content .title{ text-align: center; }
.five-content .title img{ width:239px; }
.five-content .cont-txt{ text-align: center; margin-top: 27px; }
.five-content .cont-txt img{ height:47px; }
.five-content .contact-box{ width: 1080px; margin:37px auto 0 auto; display: flex; justify-content:center; }
.five-content .contact-box .cont-item:first-child{ display: none; }
.five-content .contact-box .cont-item{ margin: 0 50px; }
.five-content .contact-box .cont-item img{ width:340px; }
.five-content .contact-box .cont-item img{transition: transform 0.4s, box-shadow 0.4s; border-radius: 20px; }
.five-content .contact-box .cont-item:hover img{ transform: translateY(-12px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); }
.footer-box.about .footer-area{ padding-top:40px; }

@keyframes homeSlideInTop {
    0% {
        opacity: 0;
        transform: translateY(-150px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes homeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(200px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes homeSlideBot {
    0% {
        opacity: 0;
        transform: translateY(150px)
    }

    100% {
        opacity: 0.6;
        transform: translateY(0)
    }
}

@keyframes flash1 {
    0% {opacity: .1;}
    45% {opacity: 1;}
    95% {opacity: 0;}
    100% {opacity: .1;}
}
@-webkit-keyframes flash1 {
    0% {opacity: .1;}
    45% {opacity: 1;}
    95% {opacity: 0;}
    100% {opacity: .1;}
}
@keyframes flash2 {
    0% {opacity: .2;}
    40% {opacity: 1;}
    90% {opacity: 0;}
    100% {opacity: .2;}
}
@-webkit-keyframes flash2 {
    0% {opacity: .2;}
    40% {opacity: .6;}
    90% {opacity: .1;}
    100% {opacity: .2;}
}

@keyframes flash3 {
    0% {opacity: .3;}
    35% {opacity: 1;}
    85% {opacity: 0;}
    100% {opacity: .3;}
}
@-webkit-keyframes flash3 {
    0% {opacity: .3;}
    35% {opacity: 1;}
    85% {opacity: 0;}
    100% {opacity: .3;}
}

@keyframes flash4 {
    0% {opacity: .4;}
    30% {opacity: 1;}
    80% {opacity: 0;}
    100% {opacity: .4;}
}
@-webkit-keyframes flash4 {
    0% {opacity: .4;}
    30% {opacity: 1;}
    80% {opacity: 0;}
    100% {opacity: .4;}
}

@keyframes flash5 {
    0% {opacity: .5;}
    25% {opacity: 1;}
    75% {opacity: 0;}
    100% {opacity: .5;}
}
@-webkit-keyframes flash5 {
    0% {opacity: .5;}
    25% {opacity: 1;}
    75% {opacity: 0;}
    100% {opacity: .5;}
}
@keyframes flash6 {
    0% {opacity: .6;}
    20% {opacity: 1;}
    70% {opacity: 0;}
    100% {opacity: .6;}
}
@-webkit-keyframes flash6 {
    0% {opacity: .6;}
    20% {opacity: 1;}
    70% {opacity: 0;}
    100% {opacity: .6;}
}
@keyframes scrollBackground1{
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(-1920px);
    }
}
@-webkit-keyframes scrollBackground1{
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(-1920px);
    }
}
@keyframes scrollBackground2{
    0% {
        transform: translateX(1920px);
    }
    100% {
        transform: translateX(0px);
    }
}
@-webkit-keyframes scrollBackground2{
    0% {
        transform: translateX(1920px);
    }
    100% {
        transform: translateX(0px);
    }
}


