@font-face {
    font-family:'dincond';
    src:url('../font/DINCond-Regular.eot');
    src:url('../font/DINCond-Regular.eot?#iefix') format('embedded-opentype'),
    url('../font/dincond-webfont.woff2') format('woff2'),
    url('../font/DINCond-Regular.woff') format('woff'),
    url('../font/DINCond-Regular.ttf') format('truetype'),
    url('../font/DINCond-Regular.svg#dincondregular') format('svg');
    font-weight:normal;
    font-style:normal
}
/*contact-us*/
.video{position: relative; width: 100%; background: url(images/luoyang.png) no-repeat; background-size:cover; z-index:1;}
.video .videocon{position: fixed; top: 0; left: 0; width: 100%; height: 100%;}
.video .videocon video{display: inline-block; vertical-align: baseline;}
.contact-us{position:relative;z-index:2;background:none;padding:100px 0;}
.contact-us .container{ max-width:1200px; margin:0 auto; height:600px; background:rgba(255,255,255,.5); padding:60px 95px;color:#000;}
.contact-us .contactlist{ float:left; width:50%}
.contact-us .contactlist h3{ font-size:44px; font-weight:normal}
.contact-us .contactlist .hd{ margin-bottom:50px}
.contact-us .contactlist .hd span{ font-size:28px; display:inline-block; padding-bottom:5px; border-bottom:2px solid #333}
.contact-us .contactlist li{font-size:18px;font-weight:bold;color:#000;line-height:30px;}
.contact-us .contactlist li.l1{ padding-left:25px; background:url(../images/tel.png) left center no-repeat;background-size:20px;}
.contact-us .contactlist li.l2{ padding-left:25px; background:url(../images/weizhi.png) left center no-repeat;background-size:20px;}
.contact-us .contactlist li.l3{ font-size:18px; font-weight:bold; margin-bottom:-4px;  }
.contact-us .contactform{ float:right; width:40%; padding-top:30px;}
.contact-us .contactform h3{ font-size:28px; font-weight:normal; margin-bottom:35px;}
.contact-us .contactform li{ margin-bottom:20px;position:relative;}
.contact-us .contactform li span{ display:block; padding:10px 15px; background-color:rgba(255,255,255,.5); border:1px solid #fff}
.contact-us .contactform li span input{ display:block; width:100%; background:none; border:none;outline:none;}
.contact-us .contactform li textarea{display:block; width:100%; background:none; border:none; height:76px;resize:none;outline:none;}
.contact-us .contactform li span input::-webkit-input-placeholder{ color:#333}
.contact-us .contactform li span textarea::-webkit-input-placeholder{ color:#333}
.contact-us .contactform li a{position:absolute;right: 4px;top: 4px;background: rgba(255,255,255,.7);color: #000;padding: 7px 10px;transition: all .3s;}
.contact-us .contactform li a:hover{background:rgba(0,114,198,.7);color:#fff;}
.contact-us .contactform li .btn{ background-color:#0072C6; color:#fff; border:none; height:48px; font-size:18px; line-height:48px; display:block; width:100%; cursor:pointer; margin-top:40px}
.contact-us .contactform li .btn:hover{ background-color:#0072C6;}
/*Service*/
.service{background-color:#fff;max-height:900px;position:relative; z-index:1;min-height:600px;}
.service .service-left{ position:absolute; z-index:2; left:0; right:50%;top:0; bottom:0; overflow:hidden}
.service .service-left .bg{ position:absolute; z-index:1; left:0;top:0; bottom:0; right:100%;background-repeat:no-repeat; background-position:center left; background-size:cover; transition: all .5s ease-out 2s; opacity:.9}
.service.animated .service-left .bg{right:0}
.service .service-left .info{width:500px;height:400px;position:absolute;z-index:2;right:100px;top:50%;margin-top:-200px;}
.service .service-left .info li{color:#fff;}
.service .service-left .info li:nth-child(1){font-size:50px;}
.service .service-left .info li:nth-child(2){font-size:40px;margin-bottom:10px;}
.service .service-left .info li:nth-child(4){font-size:16px;line-height:30px;margin-bottom:40px;}
.service .service-left .info li:nth-child(5){font-size:20px;margin-bottom:30px;}
.service .service-left .info .line{width:100px; height:2px;background-color:#fff;margin-bottom:20px;}
.service .service-left .info .more a{display:inline-block;width:185px;height:42px;line-height:42px;border:1px solid #fff;background-color:#fff;text-align:center;font-size:16px;color:#333;}
.service .service-left .info .more a:hover{ background-color:transparent; color:#fff}
/*page*/
.service .service-right{position:absolute;z-index: 1;right: 0;left: 32%;top: 0; bottom: 0;overflow: hidden;transition: all 1s ease-out 2s;}
.service .service-right:after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;z-index:2;}
.service.animated .service-right{left:50%;}
.service .service-right img{position:absolute;left:0;top:50%;margin-top:-255px;overflow: hidden;}
/*page-web*/
.service .service-right.web{left:20%;}
.service.animated .service-right.web{left:45%;}
/*page-web*/
.service .service-right.app{left:27%;}
.service.animated .service-right.app{left:50%;}
/*page-web*/
.service .service-right.wechat{left:23%;}
.service .service-right img{margin-top:-220px;}
.service.animated .service-right.wechat{left:50%;}
/*liucheng*/
.service-process{height:650px;background:url(../images/black.png) center no-repeat;}
.process{width:1170px;height:300px;margin-bottom:80px;position:relative}
.process img{position:absolute;left:0;top:0}
.process .text span{display:inline-block;color:#90a1b3;font-size:16px;position:absolute}
.process .text span.s1{left:0;top:3%}
.process .text span.s2{left:4.6%;top:3%}
.process .text span.s3{left:1.6%;top:24%}
.process .text span.s4{left:1.6%;top:65%}
.process .text span.s5{left:9.5%;top:42%}
.process .text span.s6{left:20%;top:65%}
.process .text span.s7{left:27%;top:50%}
.process .text span.s8{left:38%;top:89%}
.process .text span.s9{left:49%;top:15%}
.process .text span.s10{left:57%;top:89%}
.process .text span.s11{left:77.5%;top:64%}
.process .text span.s12{left:94%;top:4%}
.process .icon span{position:absolute;display:inline-block;height:60px;width:60px;z-index:60}
.process .icon span svg{height:60px;width:60px}
.process .icon span.s1{left:0;top:40%;color:#48A360}
.process .icon span.s2{top:42%;left:19%;color:#746395}
.process .icon span.s3{top:68%;left:38%;color:#2EB9EA}
.process .icon span.s4{top:29%;left:47.8%;color:#FFE1A3}
.process .icon span.s5{top:68%;left:57%;color:#FF4100}
.process .icon span.s6{left:77%;top:40%;color:#F9BC26}
.process .icon span.s7{left:95.5%;top:18%;color:#85CCCC}
/*advantage*/
.advantage{background:#F0FBFB;padding-bottom:150px;z-index:2;}
.advantage .container{position:relative;}
.advantage li{float:left;width:20%; text-align:center; margin-bottom:40px;cursor:pointer;}
.advantage li .ico{margin-bottom:25px;}
.advantage li .ico img{width:80px;}
.advantage li .ico svg{width:60px;height:60px;color:#0072c6;}
.advantage li:hover .ico svg{-webkit-animation-name:Shaking; animation-name:Shaking; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}
.advantage li h3{font-size:20px;font-weight:lighter;text-transform:uppercase}
/*信息*/
.rele-case{background:#000000;height:500px;z-index:3;}
.rele-case .about-me{height:130px;width:1200px;padding:30px;position:absolute;left:50%;top:-65px;margin-left:-600px;background:#fff;border-radius:5px;box-shadow: 0 6px 70px 1px rgba(0,0,0,.1);z-index:3;}
.rele-case .about-me li{width:33.333333%;float:left;text-align:center;line-height:70px;font-size:28px;position:relative;}
.rele-case .about-me li:after{content: " ";position: absolute;top:10px;bottom:10px;right:0;width:1px;z-index:2;border-right:1px solid #e5e5e5;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleX(.5);
    transform: scaleX(.5);
}
.rele-case .about-me li:last-child:after{display:none;}
.rele-case .about-me li i{font-family: "dincond";font-style:normal;font-size:80px;vertical-align: middle;margin-top:10px;display: inline-block;margin-right:15px;}
.rele-case video{
    object-fit: fill;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
}
.rele-case .title{width:1200px;height:300px;position:absolute;left:50%;top:100px;margin-left:-600px;color:#fff;z-index:3;text-align:center;padding-top:90px;}
.rele-case .title h3{font-size:60px;}
.rele-case .title h3 span{padding:0 10px;display:inline-block;}
.rele-case .title h4{font-size:45px;margin-bottom:20px;line-height:50px;}
.rele-case .title p{font-size:14px;}
.case-pad{width:100%;height:auto;overflow:hidden;}
.case-pad ul{position:relative;}
.case-pad li{width:33.333333%;height:350px; position:relative;overflow:hidden;cursor:pointer;float:left;background-position:center;background-size:cover;}
.case-pad li .case-item{position:relative;overflow:hidden;}
.case-pad li img{ display:inline-block;vertical-align:middle;width:100%;height:350px;} 
.case-pad li .box{position:absolute;background:rgba(0,0,0,.7);top:0;width:100%;height:100%;display:none;} 
.case-pad li .box .box-info{ position:absolute; top: 50%;left: 50%; transform: translate(-50%,-50%);color:#fff;} 
.case-pad li .box .box-info h5{ font-size:24px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; margin-bottom:10px; font-weight:normal;} 
.case-pad li .box .box-info p{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.case-pad li .box .box-info span{margin:15px 0; width: 30%; height: 2px; background-color: #fff; display: block;}
.case-pad li .box .box-info .view a{font-size:16px; color:#fff; display:inline-block;} 
.case-pad li .box .box-info .view a svg{margin-right:8px;height:24px;width:24px;vertical-align:middle;}  
/**/
/*about-me*/
.zhimeng{margin-bottom: 50px;}
.zhimeng:after{content: "";width: 100%;display: block;clear: both;overflow: hidden;}
.zhimeng li {float:left;width: 33.333%;text-align: center;font-size: 14px;line-height:24px;color:#666;}
.zhimeng li h3 {font-size: 24px;color: #002;line-height: 36px;margin-bottom:50px;}
.zhimeng li .block{position: relative;height: 235px;margin: 0 auto;}
.zhimeng li .block img{position: absolute;left: 0;top: 0;}
.zhimeng li:nth-child(1) .block{width: 150px;}
.zhimeng li:nth-child(2) .block{width: 215px;}
.zhimeng li:nth-child(3) .block{width: 252px;}
.zhimeng li p{padding:0 50px;text-indent: 2em;}
/*partenr*/
.partenr{background:url(../images/partner.jpg) center top no-repeat;padding-bottom:40px;}
.partenr li{float:left;width:188px;height:80px;margin:0 65px 65px 0;border:1px solid #fff;text-align:center;border-radius:5px;cursor:pointer;}
.partenr li:nth-child(5n){margin-right:0;}
.partenr li img{vertical-align:middle;}
.partenr li:hover img{-webkit-animation-name:Shaking; animation-name:Shaking; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}
/*about*/
.about-container{
    width:100%;height:470px;
    overflow: hidden;
    margin-bottom:100px;
}
.swiper-slide .txt {
    padding-top: 85px;
    font-size: 14px;
    line-height: 36px;
    width: 30%;
    float: left;
}
.swiper-slide  .txt h3 {
    font-size: 30px;
    color: #63637f;
    padding-bottom: 25px;
}
.swiper-slide  .txt .more {
    width: 123px;
    height: 37px;
    border-radius: 5px;
    display: inline-block;
    line-height: 35px;
    text-align: center;
    margin-top: 40px;
    font-size: 16px;
    border: 1px solid #555;
    color: #63637f;
}
.swiper-slide .txt .more:hover {
    border: 1px solid #0072C6;
    background:#0072C6;
    color: #fff;
}
.swiper-slide .pic {
    float: right;
    position: relative;
    width:660px;
    height:400px;
    margin-top:35px;
}
.swiper-slide .pic img{
    width: 100%;
}
.swiper-slide .pic img {
    position: absolute;
    left: 0;
    top: 0;
}
.swiper-line{
    position: absolute;
    z-index: 10;
    margin: 0 auto;
    background: url(../images/line.jpg) repeat-x center center;
    height: 30px;width: 1200px;
    text-align: center;
}
.swiper-line li{
    display: inline-block;
}
.swiper-line a {
    position: relative;
    width: 216px;
    height: 30px;
    text-align: center;
    background: url(../images/arr_t.png) center center no-repeat #555;
    border-radius: 10px;
    display: inline-block;
    opacity: 1!important;
    top:0;
}
.swiper-line li.swiper-prev a{
    background-image: url(../images/arr_b.png);
    left: 10px;
}
.swiper-line a:hover{background-color:#0072C6;}
/*动画*/
@-webkit-keyframes Shaking{0%, 50%, 100%{-webkit-transform: translateY(0); transform: translateY(0);} 25%, 75%{-webkit-transform: translateY(-10px); transform: translateY(-10px);}}
@keyframes Shaking{0%, 50%, 100%{-webkit-transform: translateY(0); transform: translateY(0);} 25%, 75%{-webkit-transform: translateY(-10px); transform: translateY(-10px);}}