@charset "utf-8";
body{ color:#3a3838; box-sizing:border-box; background-color:#fff; font-size:28px;}
.course{-moz-user-select: none; /*火狐*/
  -webkit-user-select: none;  /*webkit浏览器*/
  -ms-user-select: none;   /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;}
a{ color:#474747; text-decoration:none;}
a:hover{ text-decoration:none; color:#000;}
i,em{ font-style:normal;}

.menu,
.menu .h3,
.team_list .img img,
.team_list .em,
.work_nav,
.work_nav ul,
a[data-text]
{
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}

.header,
.icon_bg{
-webkit-transition: all 0.6s linear;
-moz-transition: all 0.6s linear;
-ms-transition: all 0.6s linear;
-o-transition: all 0.6s linear;
transition: all 0.6s linear;
}

.body_fix .header{
-webkit-transition: all 1s linear;
-moz-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}

a[data-text]{ display:block;}
a[data-text]:after{ content:attr(data-text); display:none;}
a[data-text]:hover:after{ display:block;}
a[data-text]:hover span{ display:none;}


.menu-link{
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.menu-link *{box-sizing: border-box;}
.menu-link { display:none; border-radius:5px; box-sizing: border-box; position: fixed; top:20px;right:22px;font-size: 11px;z-index: 18;width:40px;height:40px; padding:8px;}
.menu-link:hover,
.menu-link:focus {}
.menu-link span {position: relative;display: block;margin-top:10px;}
.menu-link span,
.menu-link span:before,
.menu-link span:after {background-color: #fff;width: 100%;height:3px;-webkit-transition: all 0.4s;-moz-transition: all 0.4s;-ms-transition: all 0.4s;-o-transition: all 0.4s;transition: all 0.4s;}
.menu-link span:before,
.menu-link span:after {position: absolute;top: -.55em;content: " ";}
.menu-link span:after {top: .55em;}
.menu-link.active span {background: transparent;}
.menu-link.active span:before {
-webkit-transform: rotate(45deg) translate(.5em, .4em);
-moz-transform: rotate(45deg) translate(.5em, .4em);
-ms-transform: rotate(45deg) translate(.5em, .4em);
-o-transform: rotate(45deg) translate(.5em, .4em);
transform: rotate(45deg) translate(.5em, .4em);
}
.menu-link.active span:after {
-webkit-transform: rotate(-45deg) translate(.4em, -.3em);
-moz-transform: rotate(-45deg) translate(.4em, -.3em);
-ms-transform: rotate(-45deg) translate(.4em, -.3em);
-o-transform: rotate(-45deg) translate(.4em, -.3em);
transform: rotate(-45deg) translate(.4em, -.3em);
}


.fffffffffff{
font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

.wp{ width:1000px; margin:0 auto; position:relative;}

.menu{ position:fixed; right:-160px; top:0px; bottom:0px; background:rgba(0,0,0,0.6); width:220px; z-index:15;}
.menu ul{ padding:0 20px 0 60px;}
.menu li{}
.menu .h3{transition-delay:0.3s; transform:translateX(60px);}
.menu .h3 a{ display:block; text-align:right; position:relative; font-size:22px; height:50px; line-height:50px; color:#7a7a7a; padding-right:20px;}
.menu .h3 a:before{content:'\20'; width:6px; height:6px; border-radius:50%; background:#FFF; position:absolute; top:50%; margin-top:-3px; right:0px;}

.menu li.curr .h3 a{ color:#fff;}
.menu li .h3 a:hover{ color:#fff;}
.menu .h3 a.active{ color:#fff !important;}


.menu.active{ right:0px;}
.menu.active .h3{ transform:translateX(0px);}

.menu_btn{ position:absolute; left:0px; top:50%; width:60px; height:60px; cursor:pointer;}
.menu_btn i{ width:30px; height:30px; background:url(../images/togglemenu.png) no-repeat left top; background-size:60px 30px; position:absolute; left:50%; top:50%; margin:-15px 0 0 -15px;}
.menu_btn.active i{ background-position:right top;}

.header{ position:fixed; left:0px; top:0px; right:0px; background:rgba(51,51,51,0.9); z-index:14; padding-top:48vh; box-shadow:0 0 10px rgba(255,255,255,0.5);}
.logo{ display:block; width:300px; margin:0px auto;}
.logo img{ width:auto; height:100%; display:block;}

.body_fix .header{ padding-top:0px;}
.body_pg{ padding-top:100px;}
.body_pg .header{ padding-top:0px;}

.homeSlide{ height:100vh;}
.section{ }
.bcg{ background: no-repeat center center fixed; background-size:cover; width:100%; height:100%;}

.npd_bg{background:no-repeat center center; background-size:cover; background-color:#fff;}

.iAbout{ padding:150px 0;}
.iAbout .text{  text-align:center;}

.iNews{ padding:150px 0;}
.iNews .text{ text-align:center;}
.iNews .h3{ overflow:hidden; color:#777;}
.iNews .h3 strong{ color:#000; font-weight:normal; margin-right:10px;}
.iNews .date{}
.iNews .addr{ display:block; overflow:hidden;}
.iNews .p{ }
.iNews .p a:hover{ text-decoration:underline;}

.iWork{ padding:180px 0;}
.iWork .text{ text-align:center;}
.iWork .h3{ font-size:30px;}
.iWork .p{ }

.iPhotos{ padding:180px 0;}
.iPhotos .text{ text-align:center;}
.iPhotos .h3{ font-size:30px;}
.iPhotos .p{ }

.more1{ padding-top:50px;}
.more1 a{ text-decoration:underline; }

.more2{ padding-top:50px; text-align:center;}
.more2 a{ text-decoration:underline;  color:#474747;}
.more2 a:hover{ color:#000;}

.footer{ background:#f9f9f9;}
.footer_top{ color:#585858; padding:150px 80px 0 80px; margin-bottom:80px;}
.footer_fl .pd{ float:left; }
.footer_fl{ float:left; width:50%;}
.footer_fr{ float:left; width:50%;}
.footer_fr .pd{ float:right;}
.footer_fr .p{}
.footer_bottom{ padding:39px 80px; color:rgba(0,0,0,0.85); text-align:center; overflow:hidden;}
.footer_bottom a{ color:#fff;}
.footer_bottom .p1{ float:left; font-size:16px; height:32px; line-height:32px;}
.footer_bottom .p1 img{ margin-left:5px;}
.footer_bottom .p2{ font-size:14px; float:right;}
.footer_bottom .p2 a{ display:inline-block; line-height:32px; height:32px; margin-left:10px;}
.footer_bottom .p2 a img{ float:left; margin-top:5px; margin-right:5px;}

.about{ padding:60px 0 120px 0;}
.tit1{ font-size:32px; color:#333; margin-bottom:20px;}
.about_con1{ margin-bottom:40px;}
.about_con1 .p{  color:#7a7a7a;}

.about_con2{ margin-bottom:40px;}

.team_list{}
.team_list ul{}
.team_list li{ margin-bottom:0px;}
.team_list li:last-child{ margin-bottom:0px;}
.team_list .pd{ overflow:hidden;}
.team_list .img{ float:left; width:48%; position:relative; background:#000;}
.team_list .img img{ width:100%; height:auto;}
.team_list .em{ position:absolute; color:#fff; left:0px; bottom:0px; right:0px; box-sizing:border-box; padding:30px 35px; opacity:0; line-height:1.4;}
.team_list .h3{ font-size:30px;}
.team_list .p{ font-size:24px;}

.team_list .img:hover img{ opacity:0.3;}
.team_list .img:hover .em{ opacity:1;}

.team_list .text{ margin:0 0 0 48%; padding:0 0 0 50px; font-size:20px; line-height:2; color:#7a7a7a;}
.team_list li.even .img{ float:right;}
.team_list li.even .text{ margin:0 48% 0 0; padding:0 50px 0 0 ;}

.about_con3{ margin-bottom:80px;}
.tit2{ font-size:34px; color:#333; margin-bottom:40px; text-align:center;}

.about_con4{ margin-bottom:40px;}
.about_con4 .p{  color:#7a7a7a;}

.about_con5{}
.about_con5 .p{ float:left; width:50%; box-sizing:border-box; padding-right:50px; font-size:20px; line-height:2; color:#7a7a7a;}

.footer_pg{ text-align:center; background:#9489ab; padding:50px 0 150px 0; font-size:20px; color:rgba(255,255,255,0.85);}

.news{ padding:60px 0 120px 0;}
.news_top{ margin:0 -200px;}
.news_top .t{ color:#777; padding:0 200px;  margin-bottom:30px;}
.news_top .t strong{ color:#000; font-weight:normal; margin-right:10px;}
.news_top .date{ height:54px; line-height:54px;}
.news_top .addr{ display:block; height:54px; line-height:54px;}
.news_top .text{ height:1320px; position:relative;}
.news_top .img{ height:500px; position:relative;}
.news_top img{ position:absolute; z-index:5;}
.news_top .img1{ width:27.1%; height:auto; left:0px; top:60px;}
.news_top .img2{ width:33.5%; height:auto; left:30.7%; top:0px;}
.news_top .img3{ width:36.2%; height:auto; left:54.28%; top:550px; z-index:4;}
.news_top .p1{ font-size:20px; line-height:2; text-align:right; overflow:hidden; margin-bottom:100px; color:#7a7a7a; position:relative; z-index:5;}
.news_top .p2{ font-size:20px; line-height:2; color:#7a7a7a; padding-right:50%; position:relative; z-index:5;}

.news_con{}
.news_con li{ margin-bottom:60px;}
.news_con li:last-child{ margin-bottom:0px;}
.news_con .pd{ }
.news_con .t{ color:#777;}
.news_con .t strong{ color:#000; font-weight:normal; margin-right:10px;}
.news_con .date{ height:54px; line-height:54px;}
.news_con .addr{ display:block; height:54px; line-height:54px;}
.news_con .text{ padding-top:20px;font-size:20px; color:#7a7a7a; line-height:2;}
.news_con .text img{ max-width:100%; height:auto; margin-bottom:20px;}

.work{ padding:160px 0 120px 0;}

.work_nav{ position:fixed; left:0px; right:0px; top:100px; background:#fff; padding-top:80px; z-index:13;}
.work_nav ul{ margin:0 -200px;}
.work_nav li{ width:25%; float:left; text-align:center;}
.work_nav li a{ display:block;  line-height:58px; height:45px; color:#7a7a7a;}
.work_nav li a:hover{ color:#000;}
.work_nav li a.active{ color:#000;}

.body_fix .work_nav{ padding-top:0px; box-shadow:0 0 10px rgba(0,0,0,0.1)}
.body_fix .work_nav ul{ margin:0px;}
.body_fix .work_nav li a{ font-size:20px;}

.videos{ margin:0 -200px;}
.videos li{ margin-bottom:20px;}
.videos li:last-child{ margin-bottom:0px;}
.videos .img{}
.videos .img img{ width:100%; height:auto; display:block;}
.videos .text{ text-align:center;  padding:30px 0;}

.tvc{}
.tvc li{ margin-bottom:20px;}
.tvc .img{}
.tvc .img img{ width:100%; height:auto; display:block;}
.tvc .text{ text-align:center;  padding:30px 0;}

.work .case_box{ display:none;}
.case_box{max-width:700px;}
.case_tit{ text-align:center; font-size:32px; margin-bottom:20px;}
.case_con{ font-size:14px;}
.case_con img{ max-width:100%; height:auto;}

.case_video{ position:relative;}
.case_video img{ max-width:100%; height:auto; display:block;}
.case_video embed,
.case_video object,
.case_video video{ position:absolute; left:0px; top:0px; right:0px; bottom:0px; width:100%; height:100%;}


.clients{ margin:0 -200px 80px -200px;}
.clients .img{}
.clients .img li{ width:25%; float:left;}
.clients .img li img{ max-width:80%; display:block; margin:0 auto; width:280px;}
.clients .text{ padding:0 310px; text-align:center;}
.clients .h3{  color:#000;}
.clients .p{  color:#7a7a7a;}

.collaboration{}
.collaboration .img{}
.collaboration .img img{ width:100%; height:auto; display:block;}
.collaboration .text{ text-align:center;  padding:30px 0;}

.photos{ padding:60px 0;}
.photos_list{ margin:0 -200px;}
.photos_list li{ margin-bottom:50px;}
.photos_list .h3{  margin-bottom:20px;}
.photos_list .p{ overflow:hidden; margin-right:-8px;}
.photos_list .p .li{ width:25%; float:left; box-sizing:border-box; padding-right:8px; margin-bottom:8px;}
.photos_list .p img{ width:100%; height:auto;}

.tit3{ font-size:30px;}


#contact{ position:absolute; top:-30vh; width:1px; height:1px;}

@media screen and (max-width:1440px){
body{ font-size:24px;}
.header{ padding-top:47vh;}
.wp{ width:900px;}
.news_top,
.photos_list,
.work_nav ul,
.videos,
.clients{ margin-left:-150px; margin-right:-150px;}

.news_top .t{ padding:0 150px;}
.news_top .img3{ top:510px;}
.news_top .text{ height:1200px;}

.footer_top{ padding:130px 40px 0 40px}
.footer_bottom{ padding:40px;}
}
@media screen and (max-width:1366px){
.wp{ width:750px;}
.menu .h3 a{ font-size:18px; line-height:40px; height:40px;}
body{ font-size:18px;}
.header{ padding-top:45vh;}
.iAbout,
.iNews,
.iWork
{ padding:100px 0;}
.iPhotos{ padding:100px 0 180px 0;}
.footer_pg{ padding:50px 0 100px 0;}

.footer_top{ margin-bottom:60px;}

.tit1,
.tit2,
.tit3,
.case_tit{ font-size:20px;}

.news_top,
.photos_list,
.work_nav ul,
.videos,
.clients{ margin-left:-130px; margin-right:-130px;}

.news_top .t{ padding:0 130px;}

.clients .text{ padding:0 260px;}

.news_top .text{ height:1050px;}

.team_list .text{padding:0 0 0 30px;}
.team_list .text br:nth-child(even){ display:none;}
.team_list li.even .text{padding: 0 30px 0 0;}

.news_top .p1{ margin-bottom:30px;}
.news_top .img3{ top:460px;}

.team_list .text,
.about_con5 .p,
.news_top .date,
.news_top .addr,
.news_top .p1,
.news_top .p2,
.news_con .date,
.news_con .addr,
.news_con .text,
.iNews .date,
.iNews .addr
{ line-height:inherit; height:auto;}


.body_fix .work_nav li a,
.news_con .text,
.news_top .p2,
.news_top .p1,
.footer_pg,
.about_con5 .p,
.team_list .text,
.footer_bottom{ font-size:16px;}


.footer_top{ padding:130px 0 0 0;}
.footer_bottom{ padding:40px 0;}

.footer_bottom .p1{ font-size:14px;}
}

@media screen and (max-width:1024px){
body{ font-size:14px;}

.bcg{ background-position:center center !important; background-attachment:inherit;}

a[data-text]:hover:after{ display:none;}
a[data-text]:hover span{ display:block;}

.menu li .h3 a:hover{ color:#7a7a7a;}

/*.footer{ height:100vh; box-sizing:border-box;}*/

.news_top,
.photos_list,
.work_nav ul,
.videos,
.clients{ margin-left:0px; margin-right:0px;}

.clients .text{ padding:0 180px;}
.tvc,
.collaboration{ padding:0 50px;}

.news_top{ margin-bottom:50px;}
.news_top .t{ padding:0px;}
.news_top .img{ height:auto; overflow:hidden; margin-bottom:20px;}
.news_top .img img{ position:static; width:33.3333%; float:left;}
.news_top .text{ height:auto;}
.news_top .p1{ text-align:left; margin-bottom:inherit;}
.news_top .p2{ padding:0px;}

.work_nav{ padding-top:0px; box-shadow:0 0 10px rgba(0,0,0,0.1);}
.work{ padding:78px 0 60px 0;}

.tit1,
.tit2,
.tit3,
.case_tit{ font-size:24px;}

.body_fix .work_nav li a,
.news_con .text,
.news_top .p2,
.news_top .p1,
.footer_pg,
.about_con5 .p,
.team_list .text,
.footer_bottom{ font-size:14px;}

.fancybox-nav span{ visibility:visible;}

.news_top .t{ margin-bottom:20px;}
}

@media screen and (max-width:960px){
body,.body_pg,.body_fix{ padding-top:80px;}
.work_nav{ top:80px;}
.wp{ width:auto; margin:0 30px;}
.logo{ margin:0px; height:40px; overflow:hidden;}
.homeSlide{ height:300px !important;}
.main{ padding:30px;}
.header{ padding:20px 30px !important;}

.menu_btn{ display:none;}
.menu{ width:180px; right:-180px;}
.menu ul{ padding:0 20px;}
.menu_btn{ top:0px; right:30px;}

.menu-link{ display:block;}


.iAbout, .iNews{ padding:80px 0;}

.iAbout .text{ text-align:left;}
.more2,
.more1{ padding-top:30px; text-align:center;}

.iNews .h3{ margin-bottom:15px;}
.iNews .date{ float:none;}
.iNews .addr{ float:none; margin:0px;}

.iWork,.iPhotos{ margin:30px 0;}
/*.iWork,.iPhotos{ background:none !important;}
.iWork .text{ float:none;}*/

.footer{ margin-top:30px;}
.footer_top{ margin-bottom:30px;}

.team_list li{ margin-bottom:30px;}
.team_list .pd{ position:relative;}
.team_list .img{ position:static;}
.team_list .em{ left:48%; bottom:auto; top:0px; padding:0 0 0 30px; opacity:1; color:#000;}
.team_list .text{ padding-top:70px;}
.team_list .text br{ display:none;}
.team_list .h3{ font-size:18px;}
.team_list .p{ font-size:14px;}

.team_list li.even .em{ left:0px; right:48%; padding:0 30px 0 0;}
.team_list li.even .text{ padding-top:70px;}

.about,
.news,
.photos{ padding:40px 0;}
.about_con3{ margin-bottom:40px;}

.tit1, .tit2, .tit3, .case_tit{ font-size:18px;}

.about_con5{}
.about_con5 .p{ float:none; padding:0px; width:auto; margin-bottom:30px;}
.about_con5 .p:last-child{ margin-bottom:0px;}

.news_top,
.news_con li{ margin-bottom:30px;}

.tvc,
.collaboration{ padding:0px;}

.clients .text{ padding:30px 0;}
.clients{ margin-bottom:20px;}


.footer_bottom .p1,
.footer_bottom .p2,
.footer_fl .pd,
.footer_fr .pd{ float:none;}
.footer_top{ margin-bottom:0px; padding-top:50px;}
.footer_fl{ margin-bottom:20px;}
.footer_fr,.footer_fl{ width:auto; float:none; text-align:center; }
}
@media screen and (max-width:640px){
.iWork, .iPhotos{ margin:80px 0 50px 0; background-size:auto 200px; background-position:top center; padding:200px 0 0 0;}
.iWork .text,.iPhotos .text{ float:none; padding:30px 0;}

.team_list .img{ float:none !important; background:none; width:auto;}
.team_list .em{ position:static; padding:20px 0 !important;}
.team_list .img:hover img{ opacity:1;}
.team_list .text{ padding:0px !important; margin:0 !important;}

.tvc{ margin-bottom:20px;}
.tvc li{ margin-bottom:0px;}

.photos_list li{ margin-bottom:30px;}
.photos_list .h3{ margin-bottom:10px;}
}

@media screen and (max-width:480px){
.wp{ margin:0 20px;}
body,.body_pg,.body_fix{ padding-top:45px;}
.work{ padding:68px 0 40px 0;}
.work_nav{ top:45px;}


.header{padding: 10px 20px !important;}
.logo{ height:40px; width:240px;}
.logo img{ height:40px;}
.menu-link{ top:3px; right:12px;}

.homeSlide{ height:210px !important;}
.main{ padding:20px;}
.iAbout, .iNews{ padding:60px 0;}


.iWork .text, .iPhotos .text{ padding:20px 0;}
.iWork, .iPhotos{ margin:60px 0 40px 0; background-size:auto 140px; padding:140px 0 0 0;}

.footer_fl{ float:none; width:auto; margin-bottom:30px; text-align:center;}
.footer_fr{ float:none; width:auto; padding:0px; text-align:center;}
.footer_fr .p{ padding:0px;}
}