@charset "utf-8";
.icons{ display: block;width: 0;height: 0;background: url("../images/icons.png") no-repeat 0 0; }
.trans{ -webkit-transition: all .4s ease-out;transition: all .4s ease-out; }
/*Header*/
.header{
    width:calc(100% - 100px);
    position: fixed;
    top: 0;
    left: 0;
    height: 70px;
    padding: 30px 50px;
    z-index: 66;
}
.header .logo-img{ display: flex;align-items: center; height: 70px; }
.header .logo-img img{ height: 70px; }
.nav ul li{ display: inline-block;line-height: 70px;margin-right: 30px; }
.nav ul li a{ font-size: 20px;color: #fff; }
.nav ul li.on a{ color: #cc9900; }
.langs{ margin: 22px 0 0 30px; }
.langs a{ display: block;float: left; width: 43px;height: 26px;line-height: 25px; text-align: center; border: 1px solid transparent;font-size: 14px;color: #fff;
    margin-left: 20px; }
.langs a:hover,
.langs a.on{ border-color: #cc9900;color: #cc9900; }
/* open */
.header.open{
    padding: 12px 50px;
    height: 60px;
    background: #333;
}
.header.open .logo-img{ height: 60px; }
.header.open .logo-img img{ height: 50px;  }
.header.open .nav ul li{ line-height: 60px; }
.header.open .langs{ margin-top: 17px; }
/*Header*/
/*Slides*/
.swiper-container { min-width: 1180px; width: 100%;height: auto;background: #fff; }
.swiper-slide {min-width:1150px;text-align: center;font-size: 18px;background: #252c36;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;
    -webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;background-repeat: no-repeat;}
.swiper-slide img{display: block;max-width: 100%;height: auto;margin-left: auto;margin-right: auto;}
.slide-usezans .swiper-button-next,
.slide-usezans .swiper-button-prev{ width:50px !important;height:50px !important; background: none;}
.slide-usezans .swiper-button-next{right:2% !important;}
.slide-usezans .swiper-button-prev{left:2% !important;}
.slide-usezans .swiper-button-next .span-next,
.slide-usezans .swiper-button-prev .span-prev{ color: #fff;font-size: 50px; }
.slide-usezans.swiper-container .swiper-button-prev.swiper-button-disabled,
.slide-usezans.swiper-container .swiper-button-next.swiper-button-disabled{opacity:0;}
.slide-usezans.swiper-container-horizontal .swiper-pagination-bullets{ bottom: 5%; }
.slide-usezans.swiper-container-horizontal .swiper-pagination-bullets .swiper-pagination-bullet{ opacity: .4; }
.slide-usezans.swiper-container-horizontal .swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{ opacity: 1; }
.swiper-container .swiper-slide .url{display: block;width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 106;}
.go-bottom{
    position: absolute;
    left: 50%;
    bottom:50px;
    width: 50px;
    height: 50px;
    margin: 0 0 0 -25px;
    cursor: pointer;
    -webkit-animation: arrowdown 1.7s ease-in-out infinite;
    animation: arrowdown 1.7s ease-in-out infinite;
    z-index: 50;
}
@keyframes arrowdown {
    0% {
        transform: translateY(0px);
        -webkit-transform: translateY(0px); }
    50% {
        transform: translateY(-5px);
        -webkit-transform: translateY(-5px); }
    100% {
        transform: translateY(0px);
        -webkit-transform: translateY(0px); }
}
@-webkit-keyframes arrowdown {
    0% {
        transform: translateY(0px);
        -webkit-transform: translateY(0px); }
    50% {
        transform: translateY(-5px);
        -webkit-transform: translateY(-5px); }
    100% {
        transform: translateY(0px);
        -webkit-transform: translateY(0px); }
}
/*Slides*/
/*FooterSTART*/
.footer:after{ display: block;content: "";clear: both; }
.footer{ padding: 40px 0;font-size: 16px; }
.footer a{ color: #333; }
.footer .copyright{ text-align: center; }
.footer .copyright span{ color: #999; }
.footer .copyright .colros{ color: #cc9900; }
.footer.back-black .copyright,
.footer.back-black .copyright a{ color:#fff; }
/*FooterNED*/
/*++------------------------
/*++  Plate-Module
/*++------------------------*/
.comm-title{ text-align: center; }
.comm-title h5{ font-size: 50px;color: #000;padding-bottom: 10px; }
/** Page **/
.page{ padding: 80px 0 60px; }
.page .remark{ text-align: center; font-size: 16px;color: #666; }
.clients {
    position: relative;
    width: 1115px;
    margin: 0 auto;
}
.clients h5{ position: relative; text-align: center;margin: 40px 0 30px; }
.clients h5 span{ font-size: 30px;color: #333;padding: 0 15px; background: #fff; }
.clients h5 em{
    position: absolute;
    top: 25px;
    left: 50%;
    display: block;
    width: 220px;
    height: 1px;
    background: #000;
    margin: 0 0 0 -110px;
    z-index: -1;
}
.clients .cons{ width: 900px;margin: 0 auto; }
.clients .cons ul li{
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(900px / 4);
    height: 88px;
}
.clients .cons ul li img{ display: block;max-width: 100%;max-height: 88px; }
.clients .hd a{
    position: absolute;
    top: 97px;
    width: 43px;
    height: 43px;
    background-position: -107px 0;
    cursor: pointer;
}
.clients .hd a.next{ right: 0;background-position: -157px 0; }
.clients .hd a.prev:hover{ background-position: -107px -56px; }
.clients .hd a.next:hover{ background-position: -157px -56px; }
/** service **/
.service { display: flex; }
.service .sbg{
    position: relative;
    width: 50%;
    height: 100%;
}
.service .sbg a{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
    overflow: hidden;
}
.service .sbg img{ display: block;width: 100%; }
.service .sbg h5{
    font-size: 72px;
    width: 100%;
    position: absolute;
    top: 50%;
    text-align: center;
    color: #fff;
    transform: translate(0, -50%);
}
.service .sbg.stxt h5{ line-height: 80px; }
.service .sbg .more{
    font-size: 16px;
    position: absolute;
    bottom: 60px;
    width: 100%;
    text-align: center;
    color: #fff;
    z-index: 6;
}
.service .sbg:hover a{ background: #cc9900; }
/** Featured Projects	 **/
.projects{ padding: 80px 150px 50px; }
.projects .comm-title{ margin-bottom: 35px; }
.projects ul li{ position: relative; float: left;margin-bottom: 2%; width: 30%;overflow: hidden; }
.projects ul li:nth-of-type(3n-1){ margin: 0 5%; }
.projects ul li img{ display: block; width: 100%; }
.projects ul li .remark{
    position: absolute;
    left: 0;
    bottom: 0;
    width:calc(100% - 40px);
    height: 80px;
    padding: 0 10px 0 30px;
    background: rgba(0,0,0,.6);
    z-index: 6;
}
.projects ul li .remark h5,
.projects ul li .remark p{ color: #fff }
.projects ul li .remark h5{
    font-size: 18px;
    line-height: 28px;
    padding-top: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.projects ul li .remark p{ font-size: 14px; }
.projects ul li:hover .remark{ background: #cc9900; }
/** news **/
.news ul li{
    float: left;
    width: 223px;
    height:138px;
    padding: 40px 30px;
    margin: 0 20px 20px 0;
    border: 1px solid #dcdcdc;
}
.news ul li:nth-of-type(4n){ margin-right: 0; }
.news ul li .time{ font-size: 18px; color: #666; }
.news ul li h5{
    font-size: 22px;
    color: #000;
    line-height: 28px;
    height: 63px;
    padding: 8px 0 25px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news ul li .amore{ color: #999;margin-top: 8px; }
.news .more{ display: block;width: 197px;height: 43px;line-height: 43px; text-align: center; border: 1px solid #dcdcdc;border-radius: 65px;
    margin: 20px auto 40px; }
.news ul li:hover{ border-color: #cc9900; }
.news ul li:hover h5{ color: #cc9900; }
.news .more:hover{ background: #cc9900;border-color: #cc9900;color: #fff; }
/*++----------------------------------------------
/*++  内容开始
/*++----------------------------------------------*/
.style-a{ width: 100%; }
.hg20-color{ height: 20px;clear: both;background:#f7f7f7; }
.back-color{ width: 100%;background:#f7f7f7; }
.nbanner .container{ position: relative;height: 100%; }
.nbanner a{ position: relative; display: block;width: 100%;min-height: 500px; }
.box-content:after{ display: block;content: "";clear: both; }
.box-content{ padding: 20px 0 35px; }
.subname{ text-align: center;font-size: 50px;color: #000; }
/** server-list **/
.server-list{ padding: 80px 0 30px; }
.server-list .cons{ padding-top: 20px; }
.server-list ul li{
    float: left;
    width: 380px;
    margin: 0 30px 30px 0;
}
.server-list ul li:nth-of-type(3n){ margin-right: 0; }
.server-list ul li img{ display: block;width: 100%; }
.server-list ul li .remark h5{ font-size: 24px;color: #000;padding: 15px 0 5px; }
.server-list ul li .remark p{ font-size: 15px;color: #666; }
.workprocess img{ display: block;width: 100%; }
.workprocess{ width: 100%;height: 749px;background-position: center center; }
/** projects lists **/
.projects.lists .subname{ padding-bottom: 30px; }
.projects-content .title{ padding: 30px 0 20px; text-align: center;color: #000; }
.projects-content h1{ font-size: 50px; }
.projects-content p{ font-size: 22px; }
.projects-content .detail p{ line-height: normal; }
.pics{ position: relative; width: 100%;min-height: 583px; margin-bottom: 50px; }
.pics .bigImg li{ position: relative; width: 100%;max-height: 600px;overflow: hidden; }
.pics .bigImg img{ display: block;max-width: 100%;height: 100%;margin: 0 auto; }
.pics a{
    position: absolute;
    top: 45%;
    width: 50px;
    height: 50px;
    z-index: 6;
}
.pics a.prev{ left: 35px; background-position: 0 -123px; }
.pics a.next{ right: 35px; background-position: -65px -123px; }
.pics a.prev:hover { background-position: 0 -183px; }
.pics a.next:hover { background-position: -65px -183px; }
/** article */
.news.article{ padding-bottom: 50px; }
.news.article .subname{ padding: 80px 0 25px; }
/** Detail **/
.content-title{padding:25px 0 15px;text-align: left;border-bottom:1px solid #f0f0f0;}
.content-title h1{font-size:30px;padding-bottom:8px;color:#333;font-weight: bold;}
.content-title .sub-title:after{ display: block;content: "";clear: both; }
.content-title .sub-title{min-height:19px;}
.content-title .sub-title span{padding-right:10px;}
/** Contactus **/
.contactus{ padding: 55px 0 100px; }
.contactus h2{
    font-size: 30px;
    color: #cc9900;
    padding-bottom: 30px;
}
.contactus .cons{ padding-bottom: 30px; }
.contactus .cons h5{ font-size: 22px;color: #000;padding-bottom: 10px; }
.contactus .cons p{ font-size: 16px; }
.bottom-ram p{ font-size: 16px;color: #000; }
.scode{ margin-top: 30px; }
.scode ul li{
    position: relative;
    width: 49px;
    height: 49px;
    display: inline-block;
    cursor: pointer;
    margin-right: 10px;
}
.scode ul li img{ display: block;width: 49px;height: 49px; }
.scode ul li .code-img{
    display: none;
    position: absolute;
    top: -10px;
    right: -171px;
    width: 101px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,.3);

}
.scode ul li .code-img em{
    position: absolute;
    top: 25px;
    left: -10px;
    width:0;
    height:0;
    border-top:8px solid transparent;
    border-bottom:8px solid transparent;
    border-right:10px solid #fff;
}
.scode ul li .code-img img{ width: 101px;height: 101px; }
.scode ul li.codeimgs:hover .code-img{ display: block }
/** message **/
.Validform_checktip{
    width: 100%;
    position: absolute;
    left: 160px;
    top: 12px;
    line-height:20px;
    height:20px;
    overflow:hidden;
    color:#999;
    font-size:12px;
}
.Validform_right{
    color:#71b83d;
    padding-left:20px;
    background:url(../images/right.png) no-repeat left center;
}
.Validform_wrong{
    color:red;
    padding-left:20px;
    white-space:nowrap;
    background:url(../images/error.png) no-repeat left center;
}
.Validform_loading{
    padding-left:20px;
    background:url(../images/onLoad.gif) no-repeat left center;
}
.Validform_error{
    background-color:#ffe7e7;
}
.message{ width: 600px; }
.message ul li{ position: relative; float: left; width: 282px;margin-bottom: 30px; }
.message ul li.email{ margin-left: 35px; }
.message ul li.textarea{ width: 100%;height: 199px; }
.message ul li label{
    color: #000;
    display: block;
    font-size: 22px;
    margin-bottom: 15px;
}
.message ul li input{ padding: 0 10px; width:calc(100% - 20px);height: 43px; border: 1px solid #c8c8c8; }
.message ul li.textarea textarea{
    width: 100%;
    height: 133px;
    padding: 10px;
    resize: none;
}
.message ul li.submit{
    width: 165px;
    height: 45px;
    margin: 0;
}
.message ul li .input-submit{
    cursor: pointer;
    background: #cc9900;
    border: 0;
    font-size: 22px;
    color: #fff;
}

/*+---------------
/*+  Content
/*+---------------*/
.detail{ padding:25px 0; }
.detail p{ color: #666;line-height: 24px;font-size: 16px; }
.detail img{max-width: 100%;vertical-align:middle;}
/*+------------------
/*+  Prev-Next
/*+------------------*/
.Pre-Next{ position: relative;margin: 35px 0 20px; height: 65px;border: 1px solid #eee;border-width: 1px 0; }
.Pre-Next p{ max-width:50%;min-height:25px;line-height:65px;float: left; overflow:hidden; }
.Pre-Next .page-next{ float: right; }
.Pre-Next p a{ font-size: 14px; }
/*+---------------
/*+  Pages
/*+---------------*/
.pages{ text-align:center;padding:35px 0 0; }
.pages a{ display:inline-block;padding:5px 10px;margin-right:5px;border:1px solid #dbdbdb; }
.pages a:last-child{ margin-right:0; }
.pages a.curr{ color:#fff;background:#cc9900;border-color:#cc9900; }


@media all and (max-width:1450px) {
    .projects{ padding: 80px 100px 50px; }
    .service .sbg h5{ font-size: 50px; }
    .service .sbg.stxt h5{ line-height: 60px; }
}