@charset "utf-8";
/* CSS Document */

@media only screen and (min-width:1400px) {
    body{
        min-width: 1200px;
    }
    .indexService .wrap{width: 87%;margin: 0 auto;min-width: 1150px;}
}


a{text-decoration:none; color:#333;cursor: pointer;}
a:hover{text-decoration:none; color: #ff4229;}
input,textarea,select,button{font-family:Arial,"Microsoft YaHei";}
input:focus,textarea:focus,select:focus,button:focus{ outline:none;}
::-moz-selection {background:#aaa;color:#FFF;}
::selection {background: #aaa;color: #FFF;}
img{border:0}
.clear {zoom: 1;clear:both; }
.clear:after {content: ''; display: block; clear: both; }
table{width: 100%; border-collapse:collapse;}
table tr,table td{max-width: 100%; border: solid 1px #eee; }
.fl{float:left;}
.fr{float:right;}
input,textarea,select{font-family:"Microsoft YaHei"; font-size:12px;}
input:focus,textarea:focus,select:focus{ outline:none;}

.scrollbar::-webkit-scrollbar{ width:6px; background:#f4f4f4; }/* 滚动条整体部分 */
.scrollbar::-webkit-scrollbar-button{ display:none;}/*  滚动条两端的按钮 */
.scrollbar::-webkit-scrollbar-track{ display:none;}/*  外层轨道 */
.scrollbar::-webkit-scrollbar-track-piece{ display:none;}/*  内层轨道 */
.scrollbar::-webkit-scrollbar-thumb{ background:#ff4229;}/*  滚动条里面可以拖动的那部分 */
.scrollbar::-webkit-scrollbar-corner{display:none;}/* 边角 */
.scrollbar::-webkit-resizer{display:none;}/*  定义右下角拖动块的样式 */

.iconT{display: flex;align-items: center;text-align: center;justify-content: center;}

.c1200{ width: 1200px; margin:0 auto;}



/*indexTitle*/
.indexTitle{}
.indexTitle .tit{font-size: 38px;line-height: 38px;color: #000000;}
.indexTitle .tit span{font-size: 18px;line-height: 18px;font-family: Avignon;color: #333333;text-transform: uppercase;margin-left: 10px;}
.indexTitle .tit p{font-size: 18px;line-height: 18px;font-family: Avignon;color: #333333;text-transform: uppercase;margin-top: 10px;}
.indexTitle .txt{font-size: 16px;line-height: 24px;color: #666666;margin-top: 12px;}

.indexService{width: 100%;position: relative;overflow: hidden;z-index: 1;padding: 90px 0 70px; overflow: hidden;margin: 0 auto 0;background-color: #fff;}
/* .indexService::after{content: '';width: 58%;height: 100%;background-color: #f7fafc;position: absolute;top: 0;right: 0;z-index: -1;} */
.serviceBox{width:100%;position: relative;margin-top: 80px;}
.serviceBox .hd{width: 38%;float: left;}
.serviceBox .hd .img1,.serviceBox .hd .img2{width: 28px;height: 28px;}
.serviceBox .hd .img1{margin-top: -20px;}
.serviceBox .hd ul{border-left: 1px solid #dddddd;padding: 20px 0;margin: 10px 0 10px 14px;}
.serviceBox .hd ul li{margin-bottom: 30px;}
.serviceBox .hd ul li:last-child{margin-bottom: 0;}
.serviceBox .hd ul li .box{position: relative;padding-left: 4%;box-sizing: border-box;}
.serviceBox .hd ul li .box::before{content:'';width: 1px;height: 0;background-color: #21282e;position: absolute;top: 0;left: -1px; transition: all 0.6s ease;}
.serviceBox .hd ul li .num{float: left;font-family: Avignon;font-size: 32px;color: #b2b8bc;line-height: 22px;transition: all 0.6s ease;}
.serviceBox .hd ul li .cont{float: left;max-width: 80%;margin-left: 10%;}
.serviceBox .hd ul li .cont .txt{position: relative;font-size: 20px;color: #919ca4;line-height: 32px;transition: all 0.6s ease; cursor: pointer;}
.serviceBox .hd ul li .cont .txt span{font-size: 18px;position: relative;line-height: 32px;cursor: pointer;}
.serviceBox .hd ul li .cont .txt p{font-family: MicrosoftYaHei;font-size: 48px;font-weight: bold;line-height: 30px;text-transform: uppercase;color: #666666;opacity: 0;filter:alpha(opacity=0);position: absolute;top: 4px;left: 0;transition: all 0.6s ease;}
.serviceBox .hd ul li .cont .title{transition: all 0.6s ease;margin-top: 0;height: 0;overflow: hidden; font-size: 0;}
.serviceBox .hd ul li .cont .title .tit{font-size: 14px;color: #666666;margin-top: 6px; box-sizing: border-box; width: 100%; display: inline-block; vertical-align: top; margin-right: 2%; cursor: pointer;}
.serviceBox .hd ul li .cont .title .tit span{ display: inline-block; padding: 4px 8px; border: 2px solid rgba(0,0,0,0);}
.serviceBox .hd ul li .cont .title .tit:hover span{border-color: #ff4229;color: #ff4229;}
.serviceBox .hd ul li .text{ box-sizing: border-box; border: solid 2px #eee; position: absolute;top: -104px;z-index: 9;cursor: pointer; transition: all 0.6s ease;z-index: 100;}
.serviceBox .hd ul li .text::before{ content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; background-color: #f7fafc; transition: all 0.6s ease;}
.serviceBox .hd ul li .text span{ display: inline-block; font-size: 16px; line-height: 24px;  color: #333; width: 100%; font-weight: bold; letter-spacing: 1px;  position: relative; z-index: 2; padding: 10px 10px; box-sizing: border-box; transition: all 0.6s ease;}
.serviceBox .hd ul li:nth-child(1) .text{right: 545px;}
.serviceBox .hd ul li:nth-child(2) .text{right: 410px;}
.serviceBox .hd ul li:nth-child(3) .text{right: 270px;} 
.serviceBox .hd ul li:nth-child(4) .text{right: 135px;}
.serviceBox .hd ul li:nth-child(5) .text{right: 0;}
.serviceBox .hd ul li.on .num{color: #21282e;}
.serviceBox .hd ul li.on .cont .txt{color:#21282e;padding-top: 20px;font-weight: bold;}
.serviceBox .hd ul li.on .cont .txt p{opacity:0.2;filter:alpha(opacity=20);}
.serviceBox .hd ul li.on .cont .title{margin-top: 10px;height: 215px;}
.serviceBox .hd ul li.on .box::before{ height: 100%;}
.serviceBox .hd ul li.on .text span{color: #fff;}
.serviceBox .hd ul li.on .text{ background-color: #ff4229; border-color: #ff4229;}
.serviceBox .hd ul li.on .text::before{ transform: scale(0);}
.serviceBox .bd{width: 61%;float: right;}
.serviceBox .bd .img{width: 100%;overflow: hidden;background-size: cover !important;position: relative;}
.serviceBox .bd .img.web .img1{width: 56%;position: absolute;bottom: 14%;right: 10%;z-index: 3;}
.serviceBox .bd .img.web .img2{width: 30%;position: absolute;bottom: 20%;right: 50%;}
.serviceBox .bd .img.web .img3{width: 14%;position: absolute;bottom: 20%;right: 67%;}
.serviceBox .bd .img.wechat .img1{width: 47%;position: absolute;bottom: 24%;left: 24%; }
.serviceBox .bd .img.wechat .img2{width: 31%;position: absolute;bottom: 5%;left: 8%;}
.serviceBox .bd .img.wechat .img3{width: 31%;position: absolute;bottom: 18%;left: 20%; }
.serviceBox .bd .img.wechat .img4{width: 31%;position: absolute;bottom: 47%;right: 20%;}
.serviceBox .bd .img.wechat .img5{width: 30.6%;position: absolute;bottom: 60.5%;right: 8.5%;}
.serviceBox .bd .img.marketing .img1{width: 55%;position: absolute; top: 5%; left:8%; }
.serviceBox .bd .img.marketing .img2{width: 15%;position: absolute; top: 10%; left:40%; }
.serviceBox .bd .img.marketing .img3{width: 12%;position: absolute; top: 16%; left:50%; }
.serviceBox .bd .img.marketing .img4{width: 25%;position: absolute; bottom: 7%; right:5%; }
.serviceBox .bd .img.marketing .img5{width: 66%;position: absolute; top: 10%; left:10%; }
.serviceBox .bd .img.vr .img1{width: 23%;position: absolute; top: 10%; left:5%; }
.serviceBox .bd .img.vr .img2{width: 15%;position: absolute; bottom: 5%; right:7%; }
.serviceBox .bd .img.vr .img3{width: 35%;position: absolute; top: 15%; left:34%; }
.serviceBox .bd .img.vr .img4{width: 48%;position: absolute; top: 10%; left:30%; }


.serviceBox .bd .img img{width: 100%;display: block;}
.serviceBox .arrow{ position:absolute; right:0; bottom:0;width: 62%;z-index: 9;}
.serviceBox .arrow a{display:block;width:40px; height:40px;line-height:40px;overflow:hidden;border-radius: 50%;border: 1px solid #FFFFFF;box-sizing: border-box;color: #FFFFFF;font-size: 28px;margin-bottom: 60px;margin-left: 6%;cursor:pointer;transition: all 0.6s ease;}
.serviceBox .arrow .prev{transform: rotate(-180deg);}
.serviceBox .arrow a:hover{background-color: #ff4229;border-color: #ff4229;}
@media (max-width: 1680px) {
    /* .serviceBox .bd .img{height: 490px;} */
    .serviceBox .hd ul li{margin-bottom: 20px;}
    .serviceBox .hd ul li .cont .txt p{font-size: 44px;}
    .serviceBox .hd ul li .cont .title{margin-top: 4px;}
    .serviceBox .hd ul li.on .cont .txt{padding-top: 20px;}
}
@media (max-width: 1600px) {
    /* .serviceBox .bd .img{height: 470px;} */
}
@media (max-width: 1440px) {
    /* .serviceBox .bd .img{height: 440px;} */
    .serviceBox .hd ul{padding: 10px 0;}
    .serviceBox .hd ul li .num{font-size: 30px;line-height: 20px;}
    .serviceBox .hd ul li .cont .txt{font-size: 18px;line-height: 30px;}
	.serviceBox .hd ul li .cont .txt span{font-size: 16px;line-height: 30px;}
    .serviceBox .hd ul li .cont .txt p{font-size: 40px;}
    .serviceBox .hd ul li.on .cont .txt{padding-top: 18px;}
    .serviceBox .arrow a{margin-bottom: 40px;}
    .serviceBox .hd ul li .cont .title .tit{font-size: 12px;}
}



@media (max-width: 1680px) {
    .indexCase .list li{margin-bottom: 1%;}
}
@media (max-width: 1600px) {
    .indexCase .list li.vrli .tit{font-size: 22px;line-height: 30px;}
    .indexCase .list li.vrli .txt{font-size: 14px;line-height: 22px;}
}
@media (max-width: 1440px) {
    .indexCase .list li.vrli .img .link .p{font-size: 16px;}
    .indexCase .list li.vrli .tit{font-size: 20px;line-height: 28px;margin: 17px 0 4px;}
}
@media (max-width: 1400px) {
    .indexCase .list li.vrli .tit{margin: 15px 0 4px;}
}
@media (max-width: 1366px) {
    .indexCase .list li.vrli .tit{margin: 12px 0 4px;}
}
.indexCase .more{display:block;width: 220px;height: 50px;line-height: 50px;border: solid 1px #dfe1e3;font-size: 18px;color: #333;padding-left: 30px;margin: 30px auto 0;position: relative;z-index: 1;transition: all 0.6s ease;}
.indexCase .more::after{content: '';width: 0;height: 100%;background-color: #ff4229;position: absolute;top: 0;left: 0;z-index:-1;transition: all 0.6s ease;}
.indexCase .more .iconfont{color: #333333;font-size: 28px;transform: rotate(-90deg);position: absolute;top: 0;bottom:0;right: 30px;margin: 0 auto;transition: all 0.6s ease;}
.indexCase .more:hover{color: #fff;border-color: #ff4229;}
.indexCase .more:hover::after{width: 100%;}
.indexCase .more:hover .iconfont{color: #fff;}

/*indexCustomer*/
.indexCustomer{width: 100%;background-color: #f7fafc;padding: 100px 0;overflow: hidden;}
.indexCustomer .indexTitle .tit{text-align: center;}
.indexCustomer .indexTitle .txt1{text-align: center;position: relative;padding-top: 22px;margin-top: 20px;}
.indexCustomer .indexTitle .txt1::after{content: '';width: 6px;height: 14px;background-color: #333;position: absolute;top: 0;left:50%;transform: skewX(-15deg) translateX(-50%);margin-right: 14px;}
.indexCustomer .indexTitle .txt1::before{content: '';width: 6px;height: 14px;background-color: #333;position: absolute;top: 0;left:50%;transform: skewX(-15deg) translateX(-50%);margin-left: 14px;}
.indexCustomer ul{width: 100%;display: table;font-size: 0;text-align: left;margin-top: 70px;}
.indexCustomer ul li{width: 16.6666%;display: inline-block;vertical-align: top;overflow: hidden;border: 1px solid #dddddd;border-top: none;border-left: none;box-sizing: border-box;}
.indexCustomer ul li:nth-child(-n+6){border-top: 1px solid #ddd;}
.indexCustomer ul li:nth-child(6n+1){border-left: 1px solid #ddd;}
.indexCustomer ul li img{width: 100%;display: block;opacity:0.8;filter:alpha(opacity=80);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;transition: all 0.6s ease;}
.indexCustomer ul li:hover img{background-color: #FFFFFF;opacity:1;filter:alpha(opacity=100);-webkit-filter: grayscale(0);-moz-filter: grayscale(0);-ms-filter: grayscale(0);-o-filter: grayscale(0);filter: grayscale(0);filter: none;}

/*indexNumber*/
.indexNumber{width: 100%;background-color: #ff4229;padding: 60px 0;overflow: hidden;}
.indexNumber ul{width: 100%;display: table;font-size: 0;text-align: center;}
.indexNumber ul li{display: inline-block;vertical-align: top;margin-right: 200px; }
.indexNumber ul li:last-child{margin-right: 0;}
.indexNumber ul li .num{color: #fff;}
.indexNumber ul li .num span{font-size: 90px;line-height: 70px;font-family: BebasNeue-Regular;}
.indexNumber ul li .num sub{font-size: 30px;}
.indexNumber ul li .tit{font-size: 18px;color: rgba(255,255,255,0.8);margin-top: 8px;}

/*indexProgramme*/
.indexProgramme{width: 100%;padding: 110px 0;background: url("../images/index_programme_bg.jpg") center center no-repeat fixed;background-size: cover;overflow: hidden;}
.indexProgramme .txt{font-size: 44px;line-height: 72px;color: #ffffff;text-align: center;}
.indexProgramme .box{width: 100%;display: table;font-size: 0;text-align: center;margin-top: 80px;}
.indexProgramme .box a{display: inline-block;width: 188px;height: 50px;border: solid 1px #ffffff;text-align: center;line-height: 50px;color: #FFFFFF;font-size: 16px;margin: 0 16px;transition: all 0.6s ease;}
.indexProgramme .box a:hover{background-color: #ff4229;border-color: #ff4229;}

/*indexNews*/
.indexNews{width: 100%;background-color: #FFFFFF;padding: 100px 0;position: relative;z-index: 1;overflow: hidden;}
.indexNews::after{content: '';width: 50%;height: 100%;background-color: #f7fafc;position: absolute;top: 0;left: 0;z-index: -1;}
.indexNews .hd{width: 100%;margin-bottom: 70px;}
.indexNews .hd .indexTitle{float: left;}
.indexNews .hd ul{float:right;display: table;font-size: 0;text-align: right;margin-top: 50px;}
.indexNews .hd ul li{display: inline-block;vertical-align: top; cursor:pointer;font-size: 16px;line-height: 24px;color: #333333;margin-left: 60px;}
.indexNews .hd ul li.on{color: #ff4229;}

.indexNews .bd ul{width: 100%; font-size: 0;}
.indexNews .bd ul li{ display: inline-block; vertical-align: top; width: 49%;transition: all 0.6s ease;position: relative;z-index: 1; margin-right: 2%;}
.indexNews .bd ul li a{padding: 30px 5% 30px 0;box-sizing: border-box; width: 100%; display: inline-block; transition: all 0.6s ease; position: relative;}
.indexNews .bd ul li:nth-child(2n){ margin-right: 0;}
.indexNews .bd ul li a::after{content: '';width: 100%;height: 0;background-color:#333;position: absolute;top: 0;left: 0;z-index: -1;transition: all 0.6s ease;}
.indexNews .bd ul li .time{font-size: 28px;color: #333;font-family:BebasNeue-Regular;width: 110px;float: left;transition: all 0.6s ease;}
.indexNews .bd ul li .time p{font-size: 16px;color: #999999;}
.indexNews .bd ul li .cont{float: left;width: 70%;}
.indexNews .bd ul li .cont .tit{font-size: 18px;line-height: 32px;color: #333;margin-bottom:14px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;transition: all 0.6s ease;}
.indexNews .bd ul li .cont .txt{font-size: 14px;line-height: 24px;color: #666;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;transition: all 0.6s ease;}
.indexNews .bd ul li .iconfont{color: #666666;font-size: 30px;position: absolute;bottom: 30px;right: 5%;transition: all 0.6s ease;}
.indexNews .bd ul li:hover a::after{height: 100%;}
.indexNews .bd ul li:hover a{ padding: 30px 5%;}
.indexNews .bd ul li:hover .time,.indexNews .bd ul li:hover .time p,.indexNews .bd ul li:hover .cont .tit,.indexNews .bd ul li:hover .cont .txt,.indexNews .bd ul li:hover .iconfont{color: #FFFFFF;}

/*indexOffer*/
.indexOffer{width: 100%;padding: 90px 0;background: url("../images/offer_bg.jpg") center center no-repeat fixed;background-size: cover;overflow: hidden;}
.indexOffer .title{font-size: 42px;color: #ffffff;}
.indexOffer .title p{font-size: 32px;margin-top: 10px;}
.indexOffer .box{width: 100%;margin-top: 70px;}
.indexOffer .box .left{float: left;}
.indexOffer .box .left .tit{font-size: 16px;color: #e8e8e8;margin-bottom: 16px;}
.indexOffer .box .left .txt{font-size: 20px;color: #ffffff;float: left;width: 380px;line-height: 46px;margin-right: 50px;}
.indexOffer .box .left .txt span{font-size: 16px;}
.indexOffer .box .left .txt1{font-size: 16px;line-height: 48px;color: #e8e8e8;float: left;position: relative;padding-left: 46px;box-sizing: border-box;width: 110px;cursor:pointer;transition: all 0.6s ease;}
.indexOffer .box .left .txt1 .iconfont{width: 34px;height: 34px;border-radius: 50%;background-color: #FFFFFF;color: #333333;font-size: 20px;position: absolute;top: 7px;left: 0;transition: all 0.6s ease;}
.indexOffer .box .left .txt1:hover{color: #ff4229;}
.indexOffer .box .left .txt1:hover .iconfont{background-color: #ff4229;color: #FFFFFF;}
.indexOffer .box .right{float: right;width: 520px;}
.indexOffer .box .right .tit{font-size: 16px;color: #ffffff;text-align: right;margin-bottom: 16px;}
.indexOffer .box .right form{width: 100%;}
.indexOffer .box .right form label{display: block;position: relative;}
.indexOffer .box .right form label span{font-size: 14px;line-height:48px;color: #999;position: absolute; top: 0;left: 0;display: block;}
.indexOffer .box .right form .row{width: 360px;height:48px;padding:0 16px;box-sizing:border-box;float:left;background-color: rgba(240,240,240,0.9);}
.indexOffer .box .right form .txt.w1{width: 100%;font-size: 14px;color: #333;line-height: 20px;padding:14px 0;background-color: rgba(0,0,0,0);border: none;}
.indexOffer .box .right form .btn{width:160px;display:block;height: 48px;line-height:48px;cursor: pointer;float: left;background-color: #ff4229;border: none;color: #fff;font-size: 16px;transition: all 0.6s ease;}
.indexOffer .box .right form .btn:hover{background-color: #ff4229;}


.indexService.mobile ul{
    display: flex;
    width: 95%;
    margin: 0 auto;
    flex-wrap: wrap;
}
.indexService.mobile ul li{
    width: 18%;
    margin: 2% 1%;
    color: #333333;
    line-height: 22px;
    letter-spacing: 2px;
    font-size: 16px;
    text-align: center;
    padding: 8px;
    box-sizing: border-box;
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,0.1);
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    border-radius: 5px;
}
.indexService.mobile ul li.on{
    background-color: #ff4229;
    color: #FFFFFF;
}
.indexService.mobile .indexServiceImg dd{
    display: none;
}
.indexService.mobile .indexServiceImg dd.on{
    display: block;
}
.indexService.mobile .indexServiceImg img{
    display: block;
    width: 100%;
}
.indexService.mobile::after{
    display: none;
}
.indexService.mobile .indexTitle .tit {
    font-size: 20px;
    line-height: 18px;
    color: #000000;
    text-align: center;
}
.indexService.mobile .indexTitle .txt {
    width: 90%;
    font-size: 14px;
    line-height: 16px;
    color: #666666;
    margin: 10px auto;
}
.indexService.mobile .indexTitle .tit span {
    font-size: 12px;
    line-height: 16px;
    font-family: Avignon;
    color: #333333;
    text-transform: uppercase;
    margin-left: 6px;
    font-weight: bold;
}