@font-face {
    font-family:'DINGrayCool';
    font-style:normal;font-weight:400;
    src:url(../assets/fonts/din/DINPro-Light.woff) format("woff"),
    url(../assets/fonts/din/DINPro-Light.ttf) format("truetype"),
    url(../assets/fonts/din/DINPro-Light.eot) format("embedded-opentype");
    unicode-range:U+000-5FF
}
@font-face {
    font-family:'DINGrayCool';
    font-style:normal;font-weight:500;
    src:url(../assets/fonts/din/DINPro-Regular.woff) format("woff"),
    url(../assets/fonts/din/DINPro-Regular.ttf) format("truetype"),
    url(../assets/fonts/din/DINPro-Regular.eot) format("embedded-opentype");
    unicode-range:U+000-5FF
}

a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
input,textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0}
ol,ul{list-style:none}
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
a{-webkit-tap-highlight-color:transparent;text-decoration:none}
a:hover{text-decoration:none}
body{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}
body,input,textarea{font-family:DINGrayCool,STSong,SimSun,Arial,sans-serif;}
input[type=text]:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset}
[class*=' icon-'],[class^=icon-]{font-family:iconfont;speak:none;font-style:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.hide{display:none}
.show{display:block}
.wow{visibility:hidden}
.no-cssanimations .wow{visibility:visible}
@-webkit-keyframes fadeIn{
    from{opacity:0}
    to{opacity:1}
}
@keyframes fadeIn{
    from{opacity:0}
    to{opacity:1}
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}
.mt-10{margin-top:10px}
.mt-20{margin-top:20px}
.mt-30{margin-top:30px}
.mt-40{margin-top:40px}
.mt-50{margin-top:50px}
.mt-60{margin-top:60px}
.mt-70{margin-top:70px}
.mt-80{margin-top:80px}
.mt-90{margin-top:90px}
.mt-100{margin-top:100px}
.mt-110{margin-top:110px}
.mt-120{margin-top:120px}
.mt-140{margin-top:140px}
.ta-r{text-align:right}
.ta-l{text-align:left}
.ta-c{text-align:center}
.contact-map .BMapLabel{border:none!important}
.contact-map .anchorBL{display:none!important}
.img-box{position:relative}
.img-box:before{content:'';display:block}
.img-box>img{position:absolute;top:0;left:0;width:100%}
.list{position:relative;font-size:0}
.list>li{display:inline-block;vertical-align:top}
.list-2>li{width:50%}
.list-3>li{width:33.3333%}
.list-4>li{width:25%}
.bg-cover{background-repeat:no-repeat;background-position:center center;background-size:cover}
.slick-box{position:relative;overflow:hidden}
.slick-box:before{content:'';display:block}
.slick-box .slick-wrapper{position:absolute;top:0;right:0;bottom:0;left:0}
.header{position:fixed;z-index:100;top:0;right:0;left:0;height:70px;background-color:#fff;-webkit-transition:all .5s ease .2s;transition:all .5s ease .2s}
.header.offscreen{top:-80px;-moz-box-shadow:0 0 5px 0 rgba(0,0,0,.1);-webkit-box-shadow:0 0 5px 0 rgba(0,0,0,.1);box-shadow:0 0 5px 0 rgba(0,0,0,.1)}
.header.drop{top:0}
.header-inner{position:relative;top:50%;margin-right: auto;margin-left: auto;}
.header-logo{position:absolute;top:50%;left:0}
.header-logo img{width: auto;}
.header-logo .logo-pc{height: 14px;width: 112px;}
.header-logo .logo-pc-gray{display: none;height: 14px;}
.header-logo .logo-m{display:none;height: 24px;}
.header-inner,.header-logo{-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.header-menu nav>ul{font-size:0;text-align:right}
.header-menu nav>ul>li{display:inline-block;vertical-align:top;margin:0 21px}
.header-menu nav>ul>li:last-of-type{margin-right:0}
.header-menu nav>ul>li>a{position:relative;display:inline-block;vertical-align:top;font-size:14px;line-height:1;color:#666}
.header-menu nav>ul>li>a:after{content:'';position:absolute;right:0;bottom:0;left:0;height:1px}
.header-menu nav>ul>li>a:hover{color:#000}
.header-menu nav>ul>li>a.current{color:#000;text-decoration: line-through;}
.list-footer{margin:0 auto;color: #666}
.page-about .footer-item{padding: 0;margin: 0;}
.list-footer .footer-add,.list-footer .footer-intro{display:none}
.page-index .list-footer .footer-add,.page-index .list-footer .footer-intro{display:inline-block}
.footer-item{margin:0 10px 70px;padding:20px}
.footer-copyright .footer-item{margin-bottom: 0;}
.footer-item h2{font-size:28px;margin-bottom:.35em}
.footer-item p{font-size:14px;line-height:2}
@media (max-width:1200px){
    .list-footer>li{width:50%}
}
@media (max-width:1440px){
    .header-inner{}
    .footer-item{}
}
@media (max-width:1024px){
    .footer-item{margin-bottom: 30px;}
    .wow{visibility: visible;}
}
@media (max-width:768px){
    .list-footer>li{width:100%}
    .footer-item{}
}
@media (max-width: 768px) {
    .header{height:70px}
    .header.menu-open .btn-menu span{visibility:hidden;opacity:0}
    .header.menu-open .btn-menu span:first-of-type,.header.menu-open .btn-menu span:last-of-type{-webkit-transform:translateY(0);transform:translateY(0)}
    .header.menu-open .btn-menu:after,.header.menu-open .btn-menu:before{visibility:visible;opacity:1;background-color:#ccc}
    .header.menu-open .btn-menu:before{-webkit-transform:rotate(45deg);transform:rotate(45deg)}
    .header.menu-open .btn-menu:after{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
    .header.menu-open .header-logo .logo-m{display:none}
    .header.menu-open .header-logo .logo-pc-gray{display:block}
    .header.menu-open .header-menu{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
    .header-menu{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#333;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);-webkit-transition:all .3s;transition:all .3s}
    .header-menu nav ul{position:absolute;top:50%;right:0;left:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
    .header-menu nav ul>li{display:block;text-align:center;margin-right:0;margin-left:0}
    .header-menu nav ul>li>a{margin:.5em 0;display:inline-block;font-size:20px;line-height:2;color:#ccc}
    .header-menu nav ul>li>a.current{color:#fff}
    .header-menu nav ul>li>a.current:after{background-color:#fff;display: none;}
    .header-inner{height:30px;margin-top:-15px;-webkit-transform:none;transform:none}
    .header-logo{z-index:10}
    .btn-menu{position:absolute;top:0;right:0;width:30px;height:30px}
    .btn-menu span,.btn-menu:after,.btn-menu:before{position:absolute;top:50%;left:3px;width:24px;height:2px;margin-top:-1px;background-color:#050304;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
    .btn-menu:after,.btn-menu:before{content:'';visibility:hidden;opacity:0}
    .btn-menu span:first-of-type{-webkit-transform:translateY(-5px);transform:translateY(-5px)}
    .btn-menu span:last-of-type{-webkit-transform:translateY(5px);transform:translateY(5px);width:20px}
    .header.menu-open .header-logo .logo-pc{display:none}
}
@media (max-width:640px){
    .footer-item{margin-bottom: 48px;}
    .footer{margin-top: 48px;}
    .page-index .footer{margin-top: 38px;}
    .header{height: 48px;}
    .header-inner{margin-right:20px;margin-left:20px}
    .footer-item{padding:20px}
    .footer-item h2{font-size:24px}
    .footer-item p{font-size:14px}
    .header-logo .logo-pc{display:none}
    .header-logo .logo-pc-gray{display: none;}
    .header-logo .logo-m{display:block;-webkit-transition:all .3s;transition:all .3s}
    .header-logo .logo-mgray{display:none}
    .page-about .footer{margin-top: 48px;}
    .page-about .list-footer{margin-right: 20px;margin-left: 20px;}
    .page-about .footer-item{margin: 0;padding: 0;}
    .header.menu-open .header-logo .logo-pc-gray{display:none}
    .header.menu-open .header-logo .logo-mgray{display:block}
    
}
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:0}
.slick-list.dragging{cursor:pointer;cursor:hand}
.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}
.slick-track:after,.slick-track:before{display:table;content:''}
.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{display:none;float:left;height:100%;min-height:1px;outline:0}
[dir=rtl] .slick-slide{float:right}
.slick-slide img{display:block}
.slick-slide.slick-loading img{display:none}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}
.slick-arrow.slick-hidden{display:none}
.banner-dots{position:absolute;bottom:48px;right:0;left:0;font-size:0;text-align:center}
.banner-dots li{margin:0 8px;display:inline-block;vertical-align:top}
.banner-dots li button{position:relative;display:block;width:24px;height:4px;border:0;font-size:0;background-color:transparent;outline:0;cursor:pointer}
.banner-dots li button:before{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background-color:#999;-moz-transition:border .3s ease-out;-o-transition:border .3s ease-out;-webkit-transition:border .3s ease-out;transition:border .3s ease-out}
.banner-dots li.slick-active button:before{height:2px}
.slick-arrow{position:absolute;top:50%;padding: 0;width:50px;height:50px;margin-top:-25px;text-align:center;background-color:transparent;border:0;outline:0;z-index:10;font-size:0;cursor:pointer}
.slick-arrow:before{font-family:iconfont;color:#999;font-size:24px;line-height:50px}
.slick-prev{left:70px;text-align: left;}
.slick-prev:before{content:'\e62f'}
.slick-next{right:70px;text-align: right;}
.slick-next:before{content:'\e630'}
@media (max-width:1200px){
    .slick-prev{left:20px}
    .slick-next{right:20px}
    .banner-dots{bottom:20px}
}
@media (max-width: 1024px) {
    .slick-arrow:before{font-size: 18px;}
    .banner-dots li button{width: 18px;}
    .slick-prev{left:10px}
    .slick-next{right:10px}
}

.index-banner{position:relative;background-repeat:no-repeat;background-position:fixed;background-size:cover;-webkit-transition:background-position .2s ease-out;transition:background-position .2s ease-out;overflow: hidden;}
.banner-m, .banner-pc{
    background-repeat: no-repeat;background-position: top center;background-size: cover;
}
.banner-pc:before{padding-top:56.25%}
.banner-m{height:100vh;display: none}
.index-banner-txt{position:absolute;top:50%;right:0;left:0;margin-top: -37px;text-align:center;color:#ccc;-webkit-transition:transform .2s, opacity .2s;transform:all .2s, opacity .2s;}
.index-banner-txt h1{margin-bottom:.4em;font-size:48px;line-height:1.5;font-weight: 300}
.index-banner-txt a{font-size:14px;line-height: 1;text-decoration:underline;color: inherit;}
.banner-arrow{position: absolute;left: 50%;bottom: 20px;width: 30px;height: 30px;font-size: 20px;line-height: 30px;text-align: center;-webkit-transform: translateX(-50%);transform: translateX(-50%);color: #ccc;}
.arts-item{position:relative;margin:0 10px 20px;display:block}
.arts-item.animated{-webkit-animation-duration:.2s;animation-duration:.2s;}
.arts-item:hover .arts-item__img{visibility:hidden;opacity:0}
.arts-item:hover .arts-item__txt{visibility:visible;opacity:1}
.arts-item__img{-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.arts-item__img:before{padding-top:66.6666%}
.arts-item__txt{position:absolute;top:0;right:0;bottom:0;left:0;padding:20px;border:1px solid #ccc;color:#666;visibility:hidden;opacity:0}
.arts-item__txt h2{margin-bottom:.35em;font-size:28px;line-height:1}
.arts-item__txt h3{display: none;}
.arts-item__txt .desc{font-size:14px;line-height:2}
.arts-item__txt .bottom{position:absolute;bottom:20px;left:20px}
.arts-item__txt .cate,.arts-item__txt .date{display:inline-block;font-size:14px;line-height:1}
.arts-item__txt .date{margin-right:1em}
.list-arts{margin-right: auto;margin-left: auto;}
.list-arts-news .arts-item .arts-item__img{visibility: hidden;opacity: 0;}
.list-arts-news .arts-item .arts-item__txt{visibility: visible;opacity: 1;}
.list-arts-news .arts-item:hover .arts-item__img{visibility: visible;opacity: 1;}
.list-arts-news .arts-item:hover .arts-item__txt{visibility: hidden;opacity: 0;}
@media (min-width: 1921px) {
    .index-banner-txt{margin-top: -109px;}
}
@media (min-width: 1880px){
    .index-banner-txt{margin-top: -109px;}
    .index-banner-txt h1{font-size: 96px;}
}
@media (max-width: 1200px) {
    .list-arts>li{width: 50%}
    .index-list-news li:last-of-type{display: none;}
}
@media (max-width:1024px){
    .list-works .arts-item:hover .arts-item__txt{visibility: hidden;opacity: 0;}
    .list-works .arts-item:hover .arts-item__img{visibility: visible;opacity: 1;}
    .list-page-news .arts-item:hover .arts-item__img{visibility: hidden;opacity: 0;}
    .list-page-news .arts-item:hover .arts-item__txt{visibility: visible;opacity: 1;}
    .index-list-project .arts-item:hover .arts-item__img{visibility: visible;opacity: 1;}
    .index-list-project .arts-item:hover .arts-item__txt{visibility: hidden;opacity: 0;}
    .index-list-news .arts-item:hover .arts-item__img{visibility: hidden;opacity: 0;}
    .index-list-news .arts-item:hover .arts-item__txt{visibility: visible;opacity: 1;}
    .banner-arrow{font-size: 14px;}
}
@media (max-width:768px){
    .arts-item:hover .arts-item__img{visibility:visible;opacity:1}
    .arts-item__txt .desc{margin-bottom:3em}
    .index-banner-txt{margin-top: -18px;}
    .index-banner-txt h1{font-size:28px}
}
@media (max-width:640px){
    .index-banner-txt a{font-size:12px}
    .arts-item__txt{padding:3.125vw 1.5625vw 0 3.125vw;border-width:1px;}
    .arts-item__txt h2{font-size:18px;line-height: 1.25;}
    .index-list-news .arts-item__txt h2{display: none;}
    .index-list-news .arts-item__txt h3{display: block;font-size: 4.3vw;line-height: 1.5;}
    .arts-item__txt .desc{display: none;font-size:14px}
    .arts-item__txt .bottom{display: none;}
    .arts-item__txt .cate,.arts-item__txt .date{font-size:14px}
    .banner-pc{display: none;}
    .banner-m{display: block;}
    .index-list-news{margin-top: 48px;}
    .index-list-project{margin-top: 38px;}
    .banner-arrow{width: 12px;}
}
@media screen and (orientation: landscape) and (max-width: 640px) {
    .banner-pc{display: block;}
    .banner-m{display: none;}
}
.list-filter{padding:28px 0;font-size:0;margin-right:auto;margin-left:auto;border-bottom:1px solid #ccc}
.list-filter>a{position:relative;display:inline-block;vertical-align:top;margin-right:40px;font-size:14px;line-height:1;color:#666}
.list-filter>a:after{content:'';position:absolute;right:0;bottom:-2px;left:0;height:1px;visibility:hidden;opacity:0}
.list-filter>a:hover{color:#000}
.list-filter>a.current{color:#000;text-decoration: line-through;}
.list-filter>a.current:after{background-color:#000;visibility:visible;opacity:0}
.design-detail-intro{position:relative;padding: 70px 0 0;font-size:0;margin-right: auto;margin-left: auto;}
.dintro-left{color:#666;width:50%;margin-left: 50%;text-align:justify}
.dintro-left h1{font-size:28px;line-height:1.5;margin-bottom:1em}
.dintro-left p{font-size:14px;line-height:2}
.dintro-left img{display:inline-block;max-width:100%}
.dintro-rigth{position: absolute;top: 70px;left: 0;}
.dintro-rigth h1{font-size: 28px;line-height: 1.5;color: #666}
.dintro-rigth dl{display:inline-block;vertical-align:top}
.dintro-rigth dl dt{font-size:28px;line-height:1.5;margin-bottom:1em}
.dintro-rigth dl dd{font-size:14px;line-height:2}
.dintro-rigth dl dd a{color:#666}
.about-intro{text-align: right;padding-bottom: 20px;}
.dintro-left{display: inline-block;vertical-align: top;}
.dintro-rigth{right: auto;left: 0;width: 50%;padding-right: 40px;text-align: left;}
.design-dvideo{position:relative}
.design-dvideo img{display:block;width:100%}
.btn-video{position:absolute;z-index: 3;top:50%;left:50%;padding:.5em 3em;border:1px solid #fff;color: #fff;font-size:18px;line-height:2;text-transform: capitalize;cursor:pointer;-moz-transform:translate3d(-50%,-50%,0);-ms-transform:translate3d(-50%,-50%,0);-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);white-space:nowrap;}
.no-csstransforms3d .btn-video{margin-top:-1em;margin-left:-2em}
.design-img-2{position: relative;font-size:0;left: -10px;width: calc(100% + 20px);}
.design-img-2>div{padding:0 10px;display:inline-block;vertical-align:top;width:50%}
.design-img-2>div img{display:block;width:100%}
.design-img-list img{display:block;width:100%;margin-bottom: 20px;}
.design-img-list img:last-of-type{margin-bottom: 0;}
.design-slick-img{margin-bottom: 20px;}
.design-slick-img img{display:block;width:100%}
.slick-box-banner{margin-top:80px}
.slick-box-banner:before{padding-top:50%}
.slick-banner-item{position:relative}
.slick-banner-item img{display:block;width:100%}
.slick-banner-txt{position:absolute;top:50%;right:0;left:0;text-align:center;font-size:56px;line-height:1.5;color:#999;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.list-contact{margin-right:auto;margin-left:auto}
.list-contact li:first-of-type h2:first-of-type{line-height: 1;padding-bottom: 14px;}
.contact-txt{color:#666}
.contact-txt h2{font-size:28px;line-height:2}
.contact-txt p{font-size:14px;line-height:2}
.contact-img img{display:block;width:100%}
.slick-imgt-item{position: relative;font-size: 0;}
.slick-imgt-item:before{content: '';display: block;padding-top: 50%;}
.slick-imgt-img, .slick-imgt-txt{position: absolute;display: inline-block;vertical-align: top;width: 50%;}
.slick-imgt-img:before, .slick-imgt-txt:before{content: '';display: block;padding-top: 100%;}
.slick-imgt-img{top: 0;left: 0;background-repeat: no-repeat;background-attachment: fixed;background-position: left center;background-size: 51%;}
.no-supports .slick-imgt-img{background-attachment: scroll;background-position: center center;background-size: 101% auto;}
.slick-imgt-imgbox{position: fixed;z-index: -1;top: 0;left: 0;width: 50%;height: 100%;background-repeat: no-repeat;background-position: center center;background-size: cover;will-change: transform;}
.slick-imgt-item.even .slick-imgt-img{right: 0;left: auto;background-position: right center;}
.slick-imgt-item.even .slick-imgt-txt{right: auto;left: 0;}
.slick-imgt-txt{top: 0;right: 0;background-color: #666;}
.slick-imgt-inner{position: absolute;top: 50%;right: 0;left: 0;-webkit-transform: translateY(-50%);transform: translateY(-50%);font-size: 56px;line-height: 1.5;color: #fff;text-align: center;}
@media (max-width: 1024px) {
    .dintro-rigth{right: auto;left: 0;}
    .dintro-left{width: 50%;}
}
@media (max-width:1024px){
    .slick-box-banner{margin-top:60px}
    .design-detail-intro{padding-top:70px;padding-bottom:0}
    .contact-txt{margin-bottom:40px}
    .design-img-2>div{padding-right:10px;padding-left:10px}
    .list-filter{}
    .slick-banner-txt{font-size:28px}
    .slick-imgt-inner{font-size: 28px}
    .slick-imgt-item:before{padding-top: 100%}
    .slick-imgt-txt{display: none}
    .slick-imgt-img{width: 100%;background-attachment: scroll;background-position: center center;background-size: cover}
    .slick-imgt-item.even .slick-imgt-img{left: 0;right: auto;background-position: center center;}
}
@media (max-width: 768px) {
    .dintro-rigth{position: relative;width: 100%;padding-right: 0;top: 0;}
    .dintro-rigth dl dt{margin-bottom: 0;}
    .dintro-left{margin-left: 0;width: 100%;margin-top: 20px;}
    .dintro-left{width: 100%;width:100%}
    .list-contact>li{width:100%}
}
@media (max-width:640px){
    .list-contact{margin-top: 96px;}
    .design-detail-intro,.list-contact,.list-filter{margin-right:20px;margin-left:20px}
    .list-filter{padding-top: 17px;padding-bottom: 17px;border-bottom: 0;margin-top: 68px;}
    .page-about .list-filter{border-bottom: 1px solid #ccc;}
    .design-detail-intro{padding-top: 48px;margin-top: 48px;}
    .page-detail .design-detail-intro{margin-top: 0;}
    .page-detail-news .design-detail-intro{margin-top: 48px;}
    .page-about .design-detail-intro{padding-top: 0;}
    .list-filter a{font-size:14px}
    .dintro-rigth dl dt{font-size:20px}
    .dintro-rigth dl dd{font-size:14px}
    .dintro-left h1{font-size:20px}
    .dintro-left p{font-size:14px}
    .contact-txt h2{font-size:20px}
    .contact-txt p{font-size:14px}
    .btn-video{font-size:14px}
    .slick-banner-txt{font-size:20px}
    .slick-box-banner .slick-arrow{display:none!important}
    .dintro-rigth{position:relative;text-align:left;top:auto;}
    .design-slick-img, .slick-imgt, .design-img-list, .design-img-2, .video-box{margin-top: 48px;}
    .list-works{margin-top: 0;}
    .dintro-rigth h1{font-size: 24px;margin-top: -.25em;}
    .design-img-2{left: -5px;width: calc(100% + 10px);}
    .design-img-2>div{padding-right: 5px;padding-left: 5px;}
}

.video-box{width: 100%;margin-right: auto;margin-left: auto;overflow: hidden;}
.video-box:after{content: '';display: block;padding-top: 56.25%;}
.video-item{position: relative;}
.video-item[data-playing=true]:before, .video-item[data-playing=true] .video-item-bg, .video-item[data-playing=true] .video-item-btn, .video-item[data-playing=true] .btn-video{opacity: 0;visibility: hidden;}
.video-item video{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000}
.video-item:before{content: '';position: absolute;z-index: 2;top: 0;right: 0;bottom: 0;left: 0;background-color: rgba(0,0,0,.1);}
.video-item-bg{position: absolute;z-index: 1;top: 0;right: 0;bottom: 0;left: 0;background-repeat: no-repeat;background-position: center center;background-size: cover;}
.video-item-btn{
    position: absolute;z-index: 3;top: 50%;left: 50%;margin: -30px 0 0 -30px;width: 60px;height: 60px;background: url(../media/bg_player.png) no-repeat center center;cursor: pointer;
}
.load-more-box{width: 33.3333%;display: inline-block;vertical-align: top;}
.load-more{position: relative;text-align: center;margin-right: 10px;margin-left: 10px;cursor: pointer;}
.load-more:before{content: '';display: block;padding-top: 66.6666%;}
.load-more:after{content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;border: 1px solid #fff;}
.load-more span{position: absolute;top: 50%;right: 0;left: 0;margin-top: -14px;text-align: center;display: inline-block;vertical-align: top;font-size: 28px;color: #ccc;cursor: pointer;-webkit-transition: all .3s;transition: all .3s;}
.load-more:hover span{color: #666;border-color: #666;}
.load-more:hover:after{border-color: #ccc;}
.design-detail-box{max-width: 1920px;margin-right: auto;margin-left: auto;overflow: hidden;}
.page-detail{background-color: #fff;position: relative;z-index: 1;}
@media (max-width: 1920px), (min-width: 1921px) {
    .header-inner, .list-filter, .design-detail-intro{ max-width: 1740px;}
    .list-arts, .list-footer{max-width: 1760px;}
    .page-about .list-footer{max-width: 1740px}
    .page-detail .list-footer{max-width: 1740px}
    .list-contact{max-width: 1740px;}
    
    .page-contact .list-footer{max-width: 1740px;}
    .page-contact .footer-copyright .footer-item, .page-detail .footer-copyright .footer-item{padding-left: 0;margin-left: 0;}
}
@media (max-width: 1780px) {
    .header-inner, .list-filter, .design-detail-intro{ max-width: 1300px;}
    .list-arts, .list-footer{max-width: 1320px;}
    .page-about .list-footer{max-width: 1300px;}
    .page-detail .list-footer{max-width: 1300px}
    .page-contact .list-footer{max-width: 1300px;}
    .list-contact{max-width: 1300px;}
    .design-detail-box{max-width: 1440px}
}
@media (max-width: 1340px) {
    .header-inner, .list-filter, .design-detail-intro{margin-right: 20px;margin-left: 20px;}
    .list-arts, .list-footer{margin-right: 10px;margin-left: 10px;}
    .page-about .list-footer{margin-right: 20px;margin-left: 20px;}
    .list-contact{margin-right: 20px;margin-left: 20px;}
    .page-contact .footer-copyright .footer-item, .page-detail .footer-copyright .footer-item{padding-left: 0;margin-left: 10px;}
}
@media (max-width: 1200px) {
    .load-more-box{width: 50%}
}
@media (max-width: 1024px) {
    .list-team .arts-item:hover .arts-item__txt{visibility: hidden;opacity: 0;}
    .list-team .arts-item:hover .arts-item__img{visibility: visible;opacity: 1;}
}
@media (max-width: 640px) {
    .header-inner, .list-filter{margin-right: 20px;margin-left: 20px;}
    .list-footer{margin-right: 0;margin-left: 0;}
    .list-team{margin-top: 0;}
    .list-page-news{margin-right: 0;margin-left: 0;margin-top: 0;}
    .list-page-news .arts-item__txt{border: 0;}
    .list-page-news >li{width:100%}
    .list-page-news .arts-item{margin-right:0;margin-left:0;margin-bottom:0}
    .list-page-news .arts-item .arts-item__img{visibility:visible;opacity:1}
    .list-page-news .arts-item__txt{position:relative;visibility:visible;opacity:1}
    .list-page-news .arts-item__txt .bottom{position:relative;bottom:auto;left:auto}
    .list-page-news .arts-item:hover .arts-item__txt{visibility: visible;opacity: 1;}
    .list-page-news .arts-item__txt .desc, .list-page-news .arts-item__txt .bottom{display: block;}
    .list-page-news .arts-item__txt .bottom{bottom: 20px;}
    .load-more span{font-size: 24px;margin-top: -12px;}
    .index-list-project, .index-list-news, .list-works, .list-team{margin-right: 0;margin-left: 0;}
    .index-list-project .arts-item, .index-list-news .arts-item, .list-works .arts-item , .list-team .arts-item{margin-right: 5px;margin-left: 5px;margin-bottom: 10px;}
    .index-list-project li:nth-of-type(2n) .arts-item{margin-right: 0;}
    .index-list-project li:nth-of-type(2n+1) .arts-item{margin-left: 0;}
    .index-list-news li:nth-of-type(2n) .arts-item{margin-right: 0;}
    .index-list-news li:nth-of-type(2n+1) .arts-item{margin-left: 0;}
    .list-works li:nth-of-type(2n) .arts-item{margin-right: 0;}
    .list-works li:nth-of-type(2n+1) .arts-item{margin-left: 0;}
    .list-team li:nth-of-type(2n) .arts-item{margin-right: 0;}
    .list-team li:nth-of-type(2n+1) .arts-item{margin-left: 0;}
    .load-more{margin-right: 0;margin-left:5px;}
    .footer-item{padding: 10px;margin-bottom: 28px;}
    .footer-tel .footer-item{margin-bottom: 35px;}
    .footer-copyright .footer-item{padding-bottom: 2px;}
    .list-page-news .arts-item__txt{padding: 20px;}
    .page-detail .design-detail-intro{padding-top: 48px;}

    .page-contact .header-inner, .page-detail .header-inner{
        margin-right: 20px;margin-left: 20px;
    }
    .page-contact .footer-copyright .footer-item, .page-detail .footer-copyright .footer-item{margin-left: 0;}
    .page-contact .list-footer, .page-detail .list-footer{margin-right: 20px;margin-left: 20px;}
    .list-contact{margin-right: 20px;margin-left: 20px;}
    .page-detail .design-detail-intro{margin-right: 20px;margin-left: 20px;}

    .page-list-news .load-more-box{width: 100%;}

}