@media screen and (max-width:1023px) {
html { font-size: 112.5%; }
body { padding-top: 60px; line-height: 1.8; }
html, body { width: 100%; height: unset; overflow: unset; }
.frame-middle, .frame-narrow { padding-left: 15px; padding-right: 15px; }
.has-padding { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.has-padding-sm { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.p-t { padding-top: 2rem; }
.p-b { padding-bottom: 2rem; }
.p-b-md { padding-bottom: 1.5rem; }
.m-t { margin-top: 2rem; }
.m-b { margin-bottom: 2rem; }
.m-b-sm { margin-bottom: 1.25rem; }
.p-t-md { padding-top: 1.5rem; }
.p-t-sm { padding-top: 1.25rem; }
.l-h-sm { line-height: 1.7; }
.top-nav, .fixed-bar .top-nav { height: 60px; position: fixed; padding: 0; box-shadow: none; z-index: 999; }
.top-nav-logo { display: none; }
.top-nav-logo h1 { padding: 0; height: auto; line-height: 1; font-size: 0; }
.top-nav-logo img.logo-color, .fixed-bar .top-nav-logo img.logo-color { opacity: 1; height: auto; display: block; }
.top-nav-logo img.logo-white { opacity: 0; display: none; }
.open-nav .top-nav-logo img.logo-white { display: none; }
.open-nav .top-nav-logo img.logo-color { opacity: 1; display: block; }
.open-nav .main-nav-bar dt a, .open-nav .main-nav-bar dt a>span { color: black; }
.top-toggle-nav { display: flex; align-items: center; min-width: 30px; height: 30px; text-align: right; position: absolute; right: 15px; top: 15px; line-height: 28px; z-index: 995; }
.top-toggle-nav i { position: absolute; left: 0; top: 0; vertical-align: top; width: 100%; height: 100%; font-size: 26px; padding: 3px 0 3px 3px; transition: opacity .25s; color: rgb(51, 51, 51); }
.top-toggle-nav i.icon-menu { opacity: 1; }
.top-toggle-nav i.icon-menu-close, .top-toggle-nav i.icon-menu-right { opacity: 0; }
.mobile-menu .top-toggle-nav i.icon-menu { opacity: 0; }
.mobile-menu .top-toggle-nav i.icon-menu-close { opacity: 1; }
.top-module { display: none !important; font-size: .75rem; padding-right: 2rem; display: inline-block; line-height: 1; margin-top: .15rem; }
.top-nav-menu .visible-inline-xs { display: inline-block; }
.sub-page .main-nav-bar { justify-content: space-between; }
.sub-page .main-nav-bar dl { margin: 0; }
.top-nav-logo img { position: relative; width: 100%; }
.main-nav-bar > div { margin: auto; }
.top-nav-menu { transition: .3s; height: calc(100% - 60px); width: 100%; }
.top-nav-menu dt { height: 3rem; }
.top-nav-menu dt a:after { display: none; }
.mobile-menu .main-nav-bar { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
.main-nav-bar { display: flex; justify-content: space-between; flex-wrap: nowrap; align-items: center; height: 100%; padding-bottom: 0; width: 65%; }
.main-nav-bar dl { width: auto; }
.main-nav-bar dt a { font-size: 1.1rem; }
.main-nav-bar dt a:before { width: 1.6rem; height: 1.6rem; }
html.home, .home body { height: 100%; }
.home main { padding-bottom: 1rem; }
.home main, .sub-page:not(.open-nav) main { padding-top: .5rem; height: 100%; }
.article-home, .article-contact { height: 100%; }
.home-c-nav { position: fixed; width: 100%; left: 0; top: 0; }
.home-c-nav .top-nav { height: 60px; }
.home-c-about { font-size: 1.2rem; }
.home-footer { padding-top: 1.5rem; }
.home-f-contact { font-size: .55rem; }
.icon-behance { font-size: 2.5rem; }
.home-video-image { width: 100%; height: auto; }
.home .footer-behance { display: none; }

html.mh-auto, .mh-auto body { height: unset; overflow: unset; }
.mh-auto .article-home { height: unset; }
.mh-auto .home-video { position: relative; margin-top: 1rem; }

.works-list>li { width: 100%; }
.sub-page .footer { margin-top: 1rem; padding-bottom: .75rem; }

.window-height { height: auto; }
.works-d-banner, .works-d-banner video { width: 100%; height: 12rem; }
.works-details video { -o-object-fit: cover; object-fit: cover; }
.wdh-title { font-size: 1rem; line-height: 1.6; }
.wdh-overview { padding-right: 0; }
.works-d-banner, .works-d-video { opacity: 1; background-color: rgba(0, 0, 0, .05); }
.works-d-image, .works-d-video { padding-bottom: .5rem; }
.works-d-image { margin-left: -.25rem; margin-right: -.25rem; flex-wrap: wrap; }
.works-d-image>div { padding-left: .25rem; padding-right: .25rem; }
.works-d-image.col-3>div, .works-d-image.col-2>div { width: 100%; }
.works-d-image.col-3>div:not(:last-child), .works-d-image.col-2>div:not(:last-child) { padding-bottom: .5rem; }
.about-container>div { padding-right: 0; }
.about main { padding-bottom: .75rem; }

html.contact, .contact body { overflow: hidden; height: 100%; padding-top: 0; }
html.contact main { height: 100%; padding-top: 20%; }
html.contact .open-nav .top-nav-logo img.logo-color { display: none; }
html.contact .open-nav .top-nav-logo img.logo-white { display: block; opacity: 1; }
html.contact .open-nav .main-nav-bar dt a>span { color: white; }
.contact-c-cn { font-size: .85rem; line-height: 1.6; }
.contact-c-en { font-size: .85rem; line-height: 1.6; }
.contact-footer { position: fixed; left: 0; bottom: .75rem; width: 100%; }
.mf-logo a img { width: 30%; }

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