@charset "utf-8";

body{margin:0; padding:0; font:12px Arial,"microsoft yahei"; color:#333; background:#fff;}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0; }
ul,li,ol{list-style:none;}
a{text-decoration:none; color:#333;}
a:hover{text-decoration:none; color:#412525;}
input,textarea,select,button{  font-family:Arial,"Microsoft YaHei";}
input:focus,textarea:focus,select:focus,button:focus{ outline:none;}
::-moz-selection {background:#333;color:#FFF;}
::selection {background: #333;color: #FFF;}
img{border:0}
.clear { zoom: 1;clear:both; }
.clear:after { content: ''; display: block; clear: both; }

@font-face {font-family:'PoiretOne'; src: url('../fonts/poiretone.ttf') format('truetype'); }
@font-face {font-family:'verdana'; src: url('../fonts/verdana.ttf') format('truetype'); }
@font-face {font-family:'Agency'; src: url('../fonts/agency.ttf') format('truetype'); }

.fl{ float:left;}
.fr{ float:right;}

@media screen and (max-width:1600px){


.c1440{ width:75rem; margin:0 auto; min-width:75rem;}
.m1440{ min-width: 75rem;}
    


.header{  min-width:75rem;}
.menu li a{ color: #ccc; line-height: 48px;}
.menu li p{ font-size: 38px;  }


.rightIcon .item{ top:15%; }



.pageBanner .Cont{ width: 75rem; margin-left: -37.5rem; }
.pageBanner .Cont .more a{ margin-top: 40px; }
.pageBanner .ContD{ width: 75rem; margin-left: -37.5rem; }
.pageBanner .ContMD{ width: 75rem; margin-left: -37.5rem; }
.pageBanner .ContAbout{ width: 75rem; margin-left: -37.5rem; }




#indexBanner{position: relative; overflow: hidden; height:100vh; min-width:75rem; background-color: #21282e;}

.banner{height:100%; position:relative; min-width:75rem;}

.banner1_2{position:absolute;z-index:9;left:10%; top: 70%; width: 15px; height: 20px; background: url(../images/shubiao.png) center center no-repeat;}




.pageNav ul{  width: 75rem; }


.pageCase{  width: 75rem; }


.caseTop{ margin: -60px 0 5rem -34.375rem; }


.caseContent{ width: 75rem; }


.caseDetails{ width:75rem; }


.pageNews{  width: 75rem; }


.NewsDTop .Cont .title{ width: 75rem; }
.NewsDTop .Cont .slogan .cont{width: 75rem; }


.pageNewsD .NewsDC{  width: 75rem;  }

.relatedNews{  width: 75rem; }



.about01{ width: 75rem; }
.about01 .cont{ width: 40.625rem;}
.about01 .img{ width: 31.25rem; height: 18.75rem;}
.about01 .img img{ width: 31.25rem;; height: 18.75rem;}
.about01 .list dl{ display: inline-block; width: 19.77%;}


.about02 .cont .line{  height: 27.5rem; display: none;}
.about02 .cont .con{ width: 75rem; }
.about02 .cont .con .list{  padding: 1.875rem; }


.about03{ width: 75rem;  }
.about03 dl{  width: 23.125rem; margin-left: 2.8125rem; }
.about03 dl:hover .title{ transform: translateY(2rem); }
.about03 dl:hover .line{ transform: translateY(3.25rem); }
.about03 dl:hover .cont{ transform: translateY(4.5rem); }


.about04{ height: 70rem;}
.about04 .List{ width: 75rem; height: 63.75rem; }
.about04 .List .img1{ width: 19.375rem; height: 30.9375rem;}
.about04 .List .img2{ width: 19.375rem; height: 27.8125rem;}
.about04 .List .img3{ width: 23.75rem; left: 19.375rem;  height: 25.625rem;}
.about04 .List .img4{ width: 23.75rem; top: 36.875rem; left: 19.375rem;  height: 29.0625rem;}
.about04 .List .img5{ width: 31.875rem; top: 38.4375rem; height: 18.75rem;}
.about04 .List .cont{ position: absolute; top: 5rem; right: 0; height: 27.1875rem; background-color: #fff; padding: 3.125rem; width: 25.625rem;}
.about04 .List .cont .title{ float: left; width: 100%; font-size: 2.875rem; color: #000; margin-bottom: 1.25rem;}
.about04 .List .cont .con{ font-size: 1rem; float: left; width: 100%; color: #999; line-height: 1.75rem;}
.about04 .List .cont .con p{ margin-top: 1.25rem;}
.about04 .List .cont .line{ width: 0.3125rem; height: 4.0625rem; background-color: #ff4229; position: absolute; right: 2.5rem; bottom: 5.3125rem;}
.about04 .List .suncher{position: absolute; top: 57.1875rem; right: 0;  width: 26.875rem;font-family:'verdana'; line-height: 7.8125rem; font-size: 3.5rem; height:7.8125rem; padding: 0 2.5rem; text-transform: uppercase; color: #e8e8e8; font-weight: bold;}


.about05List{ width: 70rem ;  padding: 3.75rem 2.5rem; }
.about05List .bd ul li{ margin-right:1.25rem; width: 16.5625rem; float:left; _display:inline; overflow:hidden; text-align:center; }


.pageContact .list{ width: 75rem; }


.pageMap{  min-width: 75rem;}
.pageMap .list{ width: 75rem; margin-left: -600px;}
.pageMap .list dl{ width: 27%; padding: 20px 3%;}



.pagePartner{ width: 75rem; }


.Website .cont{ width: 75rem;}
.Website .cont .left{ width: 720px; padding-left: 60px;}
.Website .cont .left .item p{  width: 180px;}
.Website .cont .right{ width: 380px; height: 310px; margin-right: 0;}
.Website .list{ width: 75rem;}



.WebExperience{ width: 75rem;  }



.WebAdvantage .list{ width: 75rem; margin: 50px auto 0;}
.WebAdvantage .list dl{ float: left; width: 208px;  margin-left: 40px;}


.WebProcess .right{ margin: 60px 0 0 0; width: 800px; height: 560px; }
.WebProcess .right1{ margin: 60px 0 0 0; width: 800px; height: 560px; }


.RelatedCase .title{width: 75rem;}
.RelatedCase .list{width: 75rem;}


.pageSolution .title{width: 75rem; }
.pageSolution .list1{ width: 75rem; }
.pageSolution .list2{ width: 75rem; }
.pageSolution .list1 dl,.pageSolution .list2 dl{ float: left; width: 240px; color: #fff; text-align: center;}
.pageSolution .mid .line-v{ width: 75rem; }
.pageSolution .mid .line-v p{ float: left; width: 1px; margin:0 119px 0 120px; height: 35px; background-color: #3c3c3c;}


.pageAdvantage .list{ width: 75rem; margin: 0 auto;}


.MobileProspect{ width: 75rem; }
.MobileProspect .left{ width: 540px; }
.MobileProspect .left .name{ width: 500px;}
.MobileProspect .left .img{ width: 500px; }
.MobileProspect .left .cont{ width: 500px;}
.MobileProspect .right{ width: 550px;}


.MobileWhy .left{ width: 550px; margin-left: 0;}
.MobileWhy .right{ margin-right: 0; padding-right: 50px; height: 470px; width: 600px;}
.MobileWhy .right .list{ position: absolute; right: 288px; top:70px; }


.MobileAdvantage{ width: 75rem; margin: 80px auto; padding: 0; position: relative;}


.MobileCase .list{ width: 75rem; margin:70px auto 0;}
.MobileCase .list dl{ float: left; margin: 0 25px; width: 250px; height: 475px; background-size: 100% 100%; overflow: hidden;}
.MobileCase .list dl dd{ width: 220px; height:370px; margin: 55px 16px 50px 14px; }
.MobileCase .list dl img.img1{ width: 220px; height: 370px; }
.MobileCase .list dl p{ width: 180px; height: 180px; padding:40px 40px 0;  transform: translateY(275px); }
.MobileCase .list dl p img{ width: 140px; height: 140px;}



.Applets .top .left{ margin-left: 50px; width: 530px; height: 410px; }
.Applets .top .right{ width: 400px; margin-right: 100px;}



.AppChannel .list{ width: 75rem; margin:50px auto 0;}
.AppChannel .list dl{ float: left; width: 360px; height: 505px; margin-left: 60px; }
.AppChannel .list dl:first-child{ margin-left: 0;}
.AppChannel .list dl dt{height: 220px; }


.AppAdvantage .list{ width: 75rem; }


.AppScenes .list{ width: 75rem; }


.AppProcess .list{ width: 75rem; }
.AppProcess .list p{ width: 42px; }


.AppCase .list{ width: 75rem; }
.AppCase .list dl{ float: left; margin-left: 30px; overflow: hidden; width: 380px;}
.AppCase .list dl dd{ width: 280px; height: 120px; overflow: hidden; background-color: #fff; text-align: center; padding: 20px 50px;}



.MarketingPlanning{ width: 75rem; }
.MarketingPlanning .list dl{  padding: 40px 20px; width: 300px; margin: 0 30px; height: 230px; }



.MarketingWhy .cont{ width: 75rem; margin: 60px auto 0;}
.MarketingWhy .cont .left{ width: 470px; margin-left: 0;}
.MarketingWhy .cont .right{ width: 640px; height: 510px;  margin-right: 0;}



.MarketingProblem{ width: 75rem; }
.MarketingProblem .list dl{ float: left; width: 378px; padding: 45px 0; text-align: center; border: solid 1px #eee;  height: 218px; margin-left: 30px; border-radius: 5px; overflow: hidden;}



.MarketingProvide .cont{ width: 72.5rem; margin:50px auto; background-color: #fff; height: 370px; padding: 40px;}
.MarketingProvide .cont .img{ width: 600px; height: 370px; overflow: hidden;}
.MarketingProvide .cont .img img{ width: 100%;}
.MarketingProvide .cont .info{ width: 520px;}
.MarketingProvide .cont .info dl{ float: left; width: 100%; margin: 30px 0;}
.MarketingProvide .cont .info dl dt{ float: left; width: 50px; font-size: 36px; padding-bottom: 10px; color: #ff4229; font-family: 'Agency'; text-align: center ; background: url(../images/016.png) right bottom no-repeat;  font-style:oblique;}
.MarketingProvide .cont .info dl dd{ float: left; width: 450px; font-size: 14px; margin-left: 20px; color: #999; line-height: 24px;}
.MarketingProvide .cont .info dl dd p{ font-size: 20px; color: #333; margin-bottom: 10px;}



.pageBrand{ width: 75rem; }



.pageProblem .title{width: 75rem; }
.pageProblem .list{ width: 72.5rem; height: 364px; margin:60px auto 0; padding: 20px; background-color: #fff;}
.pageProblem .list li{ float: left; position: relative; width: 290px; height: 364px;}
.pageProblem .list li .img{position: absolute; width: 290px; height: 182px; overflow: hidden;}
.pageProblem .list li img{ width: 290px; height: 182px; transition: all 0.8s ease;}
.pageProblem .list li .cont{position: absolute; text-align: center; width: 250px; padding:21px 20px; height: 140px; font-size: 14px; color: #999; line-height: 24px;}
.pageProblem .list li .cont p{ font-size: 16px; color: #333; font-weight: bold; margin-bottom: 20px;}
.pageProblem .list li:nth-child(odd) .cont{ top: 182px; left: 0;}
.pageProblem .list li:nth-child(even) .img{ top: 182px; left: 0;}



.pageWork .title{width: 75rem; }
.pageWork .list{ width: 75rem; }
.pageWork .list .right dl dd{  width: 80%; }




.VrService{ width: 75rem;  }


.VrSelect .list{ width: 75rem; }


.VrScenes .list{ width: 75rem; }


.VrCase .list{ width: 75rem; }


.VrProcess .list{ width: 75rem; margin: 60px auto 0;}
.VrProcess .list dl{ float: left; width: 180px; position: relative; margin-left: 24px; margin-right: 0; height: 180px; overflow: hidden; }
.VrProcess .list dl:first-child{ margin-left: 0;}

}