@charset "utf-8";
body{position: relative;right: 0;background: white;width: 100%;height: 100%;min-width: 320px;font-family: 'Hiragino Sans GB','Microsoft Yahei',"WenQuanYi Micro Hei",SimSun,Tahoma,Arial,Helvetica,STHeiti;font-size:16px; color:#444;}
html.is-nav-active,.is-nav-active html { position:inherit;overflow:hidden;}
.l-header{padding:30px 0;position:fixed;top:0;right:0;left:0;z-index:998;height:32px;-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transition:all 0.2s linear;-o-transition:all 0.2s linear;-webkit-transition:all 0.2s linear;transition:all 0.2s linear}
.logo{float:left;background-image:url(../images/logo8.png);background-repeat:no-repeat;background-size:130px 33px;width:130px;height:33px;-moz-transition:all 0.2s linear;-o-transition:all 0.2s linear;-webkit-transition:all 0.2s linear;transition:all 0.2s linear}
.l-header.is-header-fixed{padding:15px 0;height:25px}
.is-nav-active .l-header{height:100%;background:#0077de}
.is-header-fixed .logo,.is-nav-active .logo{background-image:url(../images/logo_small8.png);background-repeat:no-repeat;background-size:100% 100%;width:100px;height:25px}
.is-header-fixed .nav-trigger{margin:4px 0}
.l-constrained{width:96%;max-width:100%;margin:auto}
.cf{*zoom:1}
.cf:before,.cf:after{content:" ";display:table}
.cf:after{clear:both}
.bg-blue{background-color:#0077de;border-bottom:1px #0077de solid;}
.nav-list{float:right;padding:0;margin:0;list-style:none}
.nav-list li:before{content:none}
.nav-list li{display:block}
.nav-list li a{color:#fff;font-size:18px;-moz-transition:font-size 0.2s linear;-o-transition:font-size 0.2s linear;-webkit-transition:font-size 0.2s linear;transition:font-size 0.2s linear}
.is-header-fixed .nav-list li a{font-size:16px}
.nav ul li{position:relative}
.nav ul li a:after{content:'';display:inline-block;position:absolute;width:0%;height:2px;bottom:0px;background:#fff;left:50%;margin-left:0;transition:all 0.2s 0.1s;-webkit-transition:all 0.2s 0.1s;-moz-transition:all 0.2s 0.1s;-o-transition:all 0.2s 0.1s}
.nav ul li:hover a:after{width:100%;margin-left:-49.5%}
.nav-trigger{position:relative;display:block;float:right;width:42px;height:42px;margin:0;-moz-transition:margin 0.2s linear;-o-transition:margin 0.2s linear;-webkit-transition:margin 0.2s linear;transition:margin 0.2s linear}
.is-header-fixed .nav-trigger{margin:0}
.nav-trigger-line{position:absolute;right:0;width:30px;height:2px;margin-top:11px;background:#fff;-moz-transition:background 0.2s linear;-o-transition:background 0.2s linear;-webkit-transition:background 0.2s linear;transition:background 0.2s linear}
.is-nav-active .nav-trigger-line{background:none}
.nav-trigger-line:before,.nav-trigger-line:after{content:'';position:absolute;right:0;width:100%;height:2px;background:#fff;-moz-transition:all 0.2s linear;-o-transition:all 0.2s linear;-webkit-transition:all 0.2s linear;transition:all 0.2s linear;-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}
.is-nav-active .nav-trigger-line:before,.is-nav-active .nav-trigger-line:after{top:0}
.nav-trigger-line:before{top:-10px}
.is-nav-active .nav-trigger-line:before{-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.nav-trigger-line:after{bottom:-10px}
.is-nav-active .nav-trigger-line:after{-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}

.titlefont {font-size:40px;color:#444;text-align:center;line-height:40px;}
.notefont {margin-top:10px;font-size:16px;color:#888;text-align:center;line-height:28px;padding:0 10px;}
.remarkfont{font-size:14px;color:#999;}
.mainfont {color:#0077de;}

.banner{color:#fff;background-size:cover; background-color:#000;}
.banner .wrap{position:relative;width:100%;height:200px;left:0;top:35%;z-index:99}
.banner .wrap p{position:relative;transition:500ms;opacity:0;filter:alpha(opacity=0);top:-100px}
.banner .wrap div{position:relative;left:50%;margin-left:-40px;width:80px;height:80px;transition:500ms;opacity:0;filter:alpha(opacity=0);top:-100px}
.banner .wrap a{display:block;width:80px;height:80px;}
.banner .wrap .down-button{position:relative;width:80px;height:80px;background-position:center -80px; background-repeat:no-repeat;}
.banner .wrap .down-button:hover{background-position:center 0}
.banner .wrap .f1{ font-size: 46px;line-height: 65px; }
.banner .wrap .f2{ font-size: 16px;line-height: 24px;margin-top: 20px;margin-bottom: 50px; }
.banner.txtShow .f1{ top: 0; opacity: 1; filter: alpha(opacity=100); transition: 800ms 800ms; }
.banner.txtShow .f2{ top: 0; opacity: 1; filter: alpha(opacity=100); transition: 800ms 400ms; }
.banner.txtShow .f3{ top: 0; opacity: 1; filter: alpha(opacity=100); transition: 800ms 0ms;}
.banner .fc{ text-align: center;}
.banner .wrap .slogantxt{ color:#0077de; }
.banner .imgfixed{background-attachment:scroll;}
.banner .img01{position: relative; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1; width: 1424px; height: 781px; background-image: url(../images/kv01.jpg); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.more-ad.com/images/kv01.jpg', sizingMethod='scale')}
.banner .img02{position: relative; top: 0px; left: 0px; display: none; z-index: 2; opacity: 0; width: 1424px; height: 781px; background-image: url(../images/kv02.jpg); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.more-ad.com/images/kv02.jpg', sizingMethod='scale')}
.banner .img03{position: relative; top: 0px; left: 0px; display: none; z-index: 1; opacity: 0; width: 1424px; height: 781px; background-image: url(../images/kv03.jpg); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.more-ad.com/images/kv03.jpg', sizingMethod='scale')}
.banner .slider{width:100%; height:100%; position:absolute; top:0; left:0; overflow:hidden; zoom:1;}
.banner .slider li{ width:100% !important; position:absolute;left:0;top:0;height:100% !important; }
.banner .slider li img{width:100%; height:100%; position: relative; top:0; left:0;}

.service{width:100%;}
.servicebg{background-color:#FFF;}
.service .var{padding-top:10px;text-align:center;}
.service .var li{padding-top:30px;width:20%;display:inline-block;}
.service .var h3{padding-top:10px;font-size:22px;}
.service .var p{padding-top:5px;font-size:16px; color:#888;}
.service .var .narrow{margin:0 auto;width:100px;height:115px;}
.service .var .service-img{background-image: url(../images/service.png);width:100%;height:100%;display:block;}
.service-image-01{background-position: 0 0;}
.service-image-01-sel{background-position: 0 100%;}
.service-image-02{background-position: 300% 0;}
.service-image-02-sel{background-position: 300% 100%;}
.service-image-03{background-position: 200% 0;}
.service-image-03-sel{background-position: 200% 100%;}
.service-image-04{background-position: 100% 0;}
.service-image-04-sel{background-position: 100% 100%;}
.service li .mc_animation{transition:.3s all;-ms-transform:.3s all;-moz-transition:.3s all;-webkit-transition:.3s all}
.service .var .service-img.hide{position:relative;margin-top:-115px;opacity:0;filter:alpha(opacity=0);transition:.5s opacity;-ms-transform:.5s opacity;-moz-transition:.5s opacity;-webkit-transition:.5s opacity}
.service .var li:hover .service-img.hide{opacity:1;filter:alpha(opacity=100)}
.service .var li:hover .narrow{transform:scale(0.9,0.9);-ms-transform:scale(0.9,0.9);-moz-transform:scale(0.9,0.9);-webkit-transform:scale(0.9,0.9)}

.container{position:relative;width:100%;margin:0 auto; }
#filters{position:relative;width: 100%;text-align:center;padding:15px 0 5px 0}
.filters-top{padding-bottom:20px;}
#filters li{margin:0;padding:0;display:inline-block}
#filters li span{display:block; background-color:#fff;border-radius:6px;width:100px;padding:6px 0;margin:0 5px 10px 0;text-decoration:none;color:#666;cursor:pointer;border:1px solid  #eee;transition:.5s all;-ms-transform:.5s all;-moz-transition:.5s all;-webkit-transition:.5s all}
#filters li span:hover{color:#fff;background-color:#0077de;border:1px solid  #0077de;}
#filters li span.active{color:#fff;background-color:#0077de;border:1px solid  #0077de}
#portfoliolist{position:relative; margin:0;padding:0;width:99.9%;}
#portfoliolist .contenthight{position:relative; width:100%;height: auto; text-align:center; margin:25px auto 0 auto;}
#portfoliolist .portfolio{float:left;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;width:25%;margin:0;display:none;}
.portfolio-wrapper{overflow:hidden;position:relative !important;cursor:pointer}
.portfolio .msel{transition:.5s all;-ms-transform:.5s all;-moz-transition:.5s all;-webkit-transition:.5s all;transition:.5s all}
.portfolio a{width:100%;height:100%;display:block;text-decoration:none;}
.portfolio span{position:relative;display:block;width:100%;height:60px;line-height:60px;background-color:#fff;text-align:center;font-size:16px;color:#444;}
.portfolio img{border:none; width:100%; height:100%;}
.portfolio:hover span{background-color:#eee;color:#000; font-size:18px;}
.portfolio:hover img{transform:scale(1.1,1.1);-ms-transform:scale(1.1,1.1);-moz-transform:scale(1.1,1.1);-webkit-transform:scale(1.1,1.1);}
#works-menu {position: relative; top:0;width: 100%;z-index: 99;}
#works-menu .mbg{position: absolute; top:0; width:100%; height:100%; background-color:#fff;}
.menufixed #works-menu .mbg{ background-color:#fff;opacity:0.9;filter:alpha(opacity=90);}
.menufixed #works-menu {position:fixed;margin: 0;left: 0;top: 56px; }
.menufixed #portfoliolist {margin-top:93px;}
.case-header{padding:15px 0;height:25px;}
.case-logo{float:left;background-image:url(../images/logo_small8.png);background-repeat:no-repeat;background-size:100% 100%;width:100px;height:25px;}
.case-back{float:right; width:70px; height:25px;background-image:url(../images/back.png);background-repeat:no-repeat; background-position:0px 0px;}
.case-back:hover{background-position:0px -25px;}
#case-banner {position:relative;margin-top:56px; width: 100%; height:atuo; background-size: cover; background-position:center center; background-repeat: no-repeat;background-attachment: fixed;}
#case-banner .ch{padding-top:50px;}
.casewrap {position:relative;text-align:center;width:100%; height:auto; padding-bottom:15px;}
.casewrap h1 {font-size:40px; line-height:40px;}
.casewrap h2 {font-size:20px; line-height:20px; margin-top:8px;}
#case-banner .showimg { position:relative; width:100%; height:auto; text-align:center; bottom:-35px; z-index:9;}
@media (max-width:1000px) {#case-banner .showimg img{width:96%; height:auto;}}
#case-photo {position:relative; width:100%; height:auto;padding:0 5% 75px 5%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#case-photo .wrap {position:relative; width:100%; height:110px;}
#case-photo .imgs {font-size: 0; margin:0 auto;}
#case-photo img{ display: inline-block;vertical-align: top;padding: 10px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#case-photo img:first-child{padding: 0 10px 10px 10px;}
#case-photo .fullwidth {width: 100%;height: auto;}
#case-photo .halfwidth {width: 50%;height: auto;}
#case-bottom {position:relative;width: 100%; height:atuo; background-size: cover; background-position:center center; background-repeat: no-repeat;background-attachment: fixed;}
.mobile #case-banner,.tablet #case-banner,.mobile #case-bottom,.tablet #case-bottom {background-size:auto 100%; background-attachment: scroll;}
.casevar {position:relative;text-align:center;top:210px;}
.casevar li{width:130px;display:inline-block;cursor:pointer; margin-top:20px;}
.casevar .btntxt{position:relative;margin:0 auto;width:112px;height:128px;line-height:128px;font-size:16px; color:#fff;z-index:9;}
.casevar .narrow{position:relative;margin:0 auto;width:112px;height:128px; margin-top:-128px;transition:.3s all;-ms-transform:.3s all;-moz-transition:.3s all;-webkit-transition:.3s all}
.casevar .btnbg-img{background-image: url(../images/casebtnbg.png);width:100%;height:100%;display:block;background-position: 0 0;}
.casevar .btnlink {color:#fff;display:block;width:112px;height:128px;}
.casevar li:hover a:hover{color:#333;}
.casevar li:hover .narrow{transform:scale(0.9,0.9);-ms-transform:scale(0.9,0.9);-moz-transform:scale(0.9,0.9);-webkit-transform:scale(0.9,0.9);}
.casevar li:hover .btnbg-img{opacity:1;filter:alpha(opacity=100);background-position: 0 100%;}
.casevar a{display:block;}

.aboutbg{ background-color:#FFF;}
.fontwhite{color:#fff;}
.officephoto{position:relative;width:100%;height:100%;margin-top:40px;}
.officephoto img{width:100%;}

.clientbg{background-color:#EEE;}
.brand-logos{position:relative; width:100%; height: auto; text-align:center; overflow:hidden; margin:40px auto 0 auto;}
.brand-logo{ float:left;width:16.666%; height:auto; border-top:1px solid #ddd;border-left:1px solid #ddd;margin-top:-1px;margin-left:-1px;}
.brand-logo img {width:85%; height:auto;padding:20px 0; border:none;}

.contactbg{position: relative;top: 0px; width: 100%; height:100%; background-image: url(../images/contact_bg.jpg); background-size: cover; background-position:50% 50%; background-repeat: no-repeat;background-attachment: fixed;}
.mobile .contactbg,.tablet .contactbg{ background-attachment:scroll}
.contactVar{padding-top:90px; margin:0 auto;text-align:center;}
.contactVar a{color:#fff; text-decoration:none;}
.contactVar a:hover, a:visited {color:#999}
.contactVar li{position:relative;padding-top:30px; width:20%; margin:0 5px;display:inline-block;}
.contactVar .varbg{position: relative;width:100%; height:210px; background-color:#aaa; opacity:0.0;filter:alpha(opacity=0); z-index:1; top:0px;}
.contactVar .contact-img{position:absolute;background-image: url(../images/contact.png);width:100px;height:115px;display:block;z-index:9;margin-top:-65px; left:50%; margin-left:-56px;}
.contact-image-01{background-position: 0 0;}
.contact-image-02{background-position: 300% 0;}
.contact-image-03{background-position: 200% 0;}
.contact-image-04{background-position: 100% 0;}
.contactVar span{position: absolute; width:100%;left:0; top:120px;z-index:10;}
.contactVar li .mc_animation{transition:.3s all;-ms-transform:.3s all;-moz-transition:.3s all;-webkit-transition:.3s all}
.contactVar li:hover .contact-img{transform:scale(0.9,0.9);-ms-transform:scale(0.9,0.9);-moz-transform:scale(0.9,0.9);-webkit-transform:scale(0.9,0.9)}
.map-photo,.icon-weixin{cursor:pointer;}

.copyright{position:relative;width:100%; padding:20px 0;background-color:#111;color:#555;font-size:14px;text-align:center;}
.copyright span{width:80%; display:block; margin:0 auto;}

.dialog{position:fixed;width:100%;height:0;top:0;left:0;opacity:0;filter:alpha(opacity=0);z-index:999; display: none;}
.dialog_ing{background:rgba(0,0,0,.5);opacity:0;filter:alpha(opacity=0);transition:opacity .5s;-webkit-transition:opacity .5s;-moz-transition:opacity .5s;-o-transition:opacity .5s}
.dialog-open.dialog{display: block;height:100%;opacity:1;filter:alpha(opacity=100);}
.dialog-open.dialog_ing{opacity:1;filter:alpha(opacity=100);}
.dialog-content{position:absolute;width:400px;height:400px;background-color:#fff;margin:auto;text-align:center;line-height:26px;top:0;right:0;bottom:0;left:0;box-sizing:border-box;}
.dialog-btn{position:relative;margin:12px auto 0 auto; width:60%;padding:8px 0;background-color:#0077de;cursor:pointer}
.flashsite-content{display:none;}
.flashsite-content img{position:relative; width:320px;margin-top:43px;}
.work-content{display:none;}
.work-content img{position:relative; width:320px;margin-top:43px;}
.map-content{display:none;}
.map-content img{position:relative; width:276px;margin-top:30px;}
.weixin-content{display:none;}
.weixin-content img{position:relative; width:200px;margin-top:40px;}
.weixin-content p{position:relative}
.weixin-content .mobile-hide {display:block}
.weixin-content .mobile-show {display:none}
.iever-content{display:none;}
.iever-content img{position:relative; width:320px;margin-top:43px;}

.right-menu{position:fixed;right:10px; bottom:10px; z-index:999; }
.right-menu .btn{width:40px; height:44px; margin-bottom:1px; cursor:pointer; position:relative;}
.right-menu .btn-close{background:url(../images/ricon.png) 0px 0px no-repeat;}
.right-menu .btn-close:hover{background-position:0px -44px;}
.right-menu .btn-qq{background:url(../images/ricon.png) -40px 0px no-repeat;display:block;}
.right-menu .btn-qq:hover{background-position:-40px -44px;}
.right-menu .btn-phone{background:url(../images/ricon.png) -80px 0px no-repeat;}
.right-menu .btn-phone:hover{background-position:-80px -44px;}
.right-menu .btn-phone .phone{background-color:#0077de; position:absolute; width:132px; left:-132px; top:0px; line-height:44px; color:#FFF; font-size:16px; text-align:right; display:none;}
.right-menu .btn-wx{background:url(../images/ricon.png) -120px 0px no-repeat;}
.right-menu .btn-wx:hover{background-position:-120px -44px;}
.right-menu .btn-top{background:url(../images/ricon.png) -160px 0px no-repeat; display:none;}
.right-menu .btn-top:hover{background-position:-160px -44px;}

@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-webkit-keyframes fadeInDown {
0% {opacity: 0;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);}
100% {opacity: 1;-webkit-transform: none;transform: none;}
}
@keyframes fadeInDown {
0% {opacity: 0;-webkit-transform: translate3d(0, -100%, 0);transform: translate3d(0, -100%, 0);}
100% {opacity: 1;-webkit-transform: none;transform: none;}
}
@-webkit-keyframes fadeInUp {
0% {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}
100% {opacity: 1;-webkit-transform: none;transform: none;}
}
@keyframes fadeInUp {
0% {opacity: 0;-webkit-transform: translate3d(0, 100%, 0);transform: translate3d(0, 100%, 0);}
100% {opacity: 1;-webkit-transform: none;transform: none;}
}
.fadeIn {-webkit-animation-name: fadeIn;animation-name: fadeIn;}
.fadeInDown {-webkit-animation-name: fadeInDown;animation-name: fadeInDown;}
.fadeInUp {-webkit-animation-name: fadeInUp;animation-name: fadeInUp;}

@media (max-width:800px) {
.banner .wrap .f1{font-size:32px;line-height:56px}
.banner .wrap .f2{font-size:14px;line-height:24px;margin-top:15px;margin-bottom:30px}
.l-constrained{width:90%}
.l-header{padding:15px 0}
.l-header.is-header-fixed{padding:15px 0}
[class^="l-c-m-"],[class*=" l-c-m-"]{display:inline-block;vertical-align:top;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box}
.l-c-m-1-2{width:50%}
.l-content{margin-top:100px}
.nav{display:none}
.is-nav-active .nav{display:block;position:fixed;top:50%;left:50%;text-align:center;-moz-transform:translate3d(-50%,-50%,0);-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}
.is-nav-active .nav-list li{margin:30px 0;padding:10px 0}
.is-nav-active .nav-list li a{font-size:30px}
.service .var li{padding-top:30px;width:45%;display:inline-block}
#portfoliolist .portfolio{width:50%;margin:0}
.sectiontop{padding-top:70px}
.sectionbottom{padding-bottom:70px}
.contactVar li{width:45%}
.contactVar .mchight{margin-top:60px}
.weixin-content .mobile-hide{display:none}
.weixin-content .mobile-show{display:block}
.work-content,.map-content,.weixin-content,.iever-content,.flashsite-content{width:320px}
.brand-logo{width:33.333%}
.contactbg,#case-banner,#case-bottom {background-size:auto 100%;background-attachment: scroll;}
}
@media (max-width:680px) {
.menufixed #portfoliolist {margin-top:141px;}
.casevar {top:145px;width:300px;margin:0 auto;}
.noweb li:first-child{ width:100%;}
.casewrap h1 {font-size:32px;line-height:32px;}
.casewrap h2 {font-size:16px;line-height:16px; margin-top:6px;}
}
@media (max-width:480px) {
#portfoliolist .portfolio {width:100%;margin:0;}
.brand-logo{width:50%;}
#case-photo {padding-bottom:50px;}
#case-photo .wrap {height:90px;}
#case-photo .halfwidth {width:100%;height: auto;}
#case-photo img{padding:10px 0;}
#case-photo img:first-child{padding: 0 0 10px 0;}
}
@media (min-width:801px) {
.nav-list li {float:left;margin-left:56px}
.nav-list li:first-child {display:none}
.nav-trigger {display:none}
}
.snow-container{position: fixed;top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1000;}