/*
*/
:root {--f-x:4.4vw; --c1:#c6bfbd; --c2:#1c61ff; --c3:#185bf4; --c4:#eadbcf; --c5:#f2edec; --c6:#e3dcdb; --c7:#cfc9c8;}

html {font-size:62.5%;}
html, body, form, ul, li, table, td {margin:0; padding:0;}
body {position:absolute; top:0; left:0; display:block; width:100%; height:100%; margin:0; padding:0; color:#111; font-family:'brown-pro', arial, sans-serif; line-height:1.3; letter-spacing:.05em; word-break:keep-all; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased !important; text-rendering:optimizelegibility;}
input, textarea {font-size:1.1rem;}
a, a *, input, textarea {transition: all 0.2s cubic-bezier(0.52, 0.16, 0.52, 0.84); font-family:'brown-pro', arial, sans-serif !important;}
img {display:inline-block; width:100%; height:auto;}
a {text-decoration:none;}
.btn2 {display:inline-block; padding:1.6rem 4rem; background:transparent; color:#111; font-size:1.2rem; text-transform:uppercase; letter-spacing:.1em; cursor:pointer;}
br.m, .entry-utility {display:none;}
.edit-link {display:none !important;}

a:hover {text-decoration:none;}
a img {border: 0;}
td {vertical-align: top;}
ul {list-style-position: inside;}
h1, h2, h3, h4, h5, h6 {letter-spacing:.2em; margin:0;}
h1 {font-size:2.4rem;}
h2 {font-size:2rem;}
h3 {font-size:1.2rem;}
p, div {box-sizing:border-box; margin:0 0;}
ul, li {list-style-type:none;}
div, p, ul, li, a {box-sizing:border-box;}
.clear {clear: both;}
.main_separator {color:#dedfe0;}
.over {position:absolute; top:0; bottom:0; left:0; display:block; width:100%; height:100%; z-index:-1; opacity:0.97; background:#fff;}

.t1 {font-weight:600; text-transform:uppercase; letter-spacing:.2em;}

a.more {letter-spacing:.15em; font-size:1.1rem; line-height:1.6rem !important; font-weight:700; display:inline-flex; justify-content:center; text-transform:uppercase; box-sizing:border-box; cursor:pointer;}

a.more span {display:inline-block; width:auto; flex-basis:auto; color:#111; padding:0.1rem 0;}
.m y {display:inline-block; width:1.9rem; flex-basis:1.6rem; height:1.7rem; position:relative; top:0; margin-left:0.4rem;}
.m y::before, a.m y::after {content:''; display:inline-block; position:absolute; background:#111;}
.m y::before {width:1.1rem; height:1px; left:0.3rem; top:0.8rem;}
.m y::after {width:1px; height:1.1rem; left:0.8rem; top:0.3rem;}
.more.m.on y::after {display:none;}


#wpadminbar, #mfPreviewBar, #breadcrumb {display:none !important;}

.lg {display:none;}
.lg {display:block; width:100%; height:auto; position:relative; bottom:0; top:auto; z-index:99; box-sizing:border-box; padding:0 3.2rem;}

.lg a {display:block; width:100%; height:auto;}
.home .lg {position:fixed; padding:1.2rem 5.2rem; display:none;}

#x {position:fixed; display:flex; flex-direction:column; justify-content:center; width:100vw; height:100vh; top:0; left:0; overflow:hidden; text-align:center; z-index:99999999; background:#000;}
#h {display:inline-block; width:3.2rem; flex-basis:3.2rem; height:auto; margin:0 auto; transform: rotate(180deg);}
#h svg {display:block; width:100%; height:auto;}
.rt1 {animation:rt 0.25s 40; animation-timing-function:linear; transition: all 0.3s cubic-bezier(0.52, 0.16, 0.52, 0.84);}
.rt0 {animation:rt0 1.6s 1; animation-timing-function:cubic-bezier(.05,.13,.04,.99);}
@keyframes rt {
 	0%  {transform: rotate(0deg);}
    100%  {transform: rotate(360deg);}
}
@keyframes rt0 {
 	0%  {transform: rotate(0deg);}
    100%  {transform: rotate(179deg);}
}
/* animation:blink 0.05s 11; animation-timing-function:linear; */
@keyframes blink {
 	0%  {opacity:0;}
    25% {opacity:0;}
    30% {opacity:1;}
    70% {opacity:1;}
    75% {opacity:0;}
	100% {opacity:0;}
}
#x span {display:block; margin-top:2rem; font-size:1rem; color:#111; letter-spacing:.4em; text-transform:uppercase;}
#x span#bar {position:absolute; margin:0 0; top:0; left:0; width:1000%; height:100vh; background:var(--c2);}


/*
body.page-id-101 {background:#b19e87;}
body.page-id-101 #nv ul li > a {color:#fff;}
*/


.i {display:block; width:100%; position:absolute; top:0; left:0;}


.inner {display:block; box-sizing:border-box;}
#header {position:fixed; display:block; box-sizing:border-box; width:100%; z-index:9999; top:0; left:0; background:transparent; overflow:hidden; border-bottom:1px solid var(--c4);}
#header > .inner {display:block; width:100%; padding:1.4rem 6rem; position:relative; text-align:left; z-index:11;}

#header::before {position:absolute; content:''; display:block; width:100%; height:0.4rem; background:#111; top:0; left:0; transition:.24s; opacity:1; transition-timing-function:ease-out; z-index:999999;}
.home #header::before {display:none !important;}


#header, #sc_btn span {transition: all 0.2s cubic-bezier(0.52, 0.16, 0.52, 0.84);}
#header a {text-transform:uppercase;}

#header #logo {position:relative; top:0.2rem; left:6rem; font-size:1rem; letter-spacing:.15em; display:inline-block; width:auto; transition: all 0s;}
.home #header #logo {left:2rem;}

#header #logo a {color:#ccb093; font-weight:500; display:inline-block; width:8.5rem;}

#header #logo a img {display:inline-block; width:100%; height:auto;}
#header > .over {display:block; opacity:0.95;}

#header #logo a:hover .st0 {}


#header.on > .inner {}
#header.on > .over {display:block; opacity:0.95;}
#header.on #sc_btn span {border-color:#111;}
#header.on #logo a {width:8.5rem;}

.st0 {fill:#111;}
.st1 {fill:#111;}
.st2 {fill:#fff;}


.home {background:#000;}
.home .i {opacity:0;}

.home #header #logo a {width:12vw; max-width:20rem;}

.home #header {overflow:visible; border:0; height:7rem;}

.home #header > .over {display:block; background:var(--c3); border:1px solid #333; opacity:0; width:calc(100vw - 6rem); top:0.2rem; left:3rem; padding:1.2rem 0 1.2rem; box-sizing:content-box; transition:.24s; height:4.4rem;}
/*
.home #header > .over::after {content:''; border:1px solid var(--c2); display:block; width:100%; height:100%; padding:1.2rem 0; box-sizing:content-box;} */

.home .g {position:fixed; top:auto; bottom:0; left:0; display:block; width:100vw; height:calc(70vh - 2rem); z-index:1; opacity:0.7; background:linear-gradient(0deg, #000, transparent 75%); display:none !important;}

.home .st0 {fill:#fff;}
.home #header #logo a {transition:0.05s;}

.home #nv ul li > a span::before, .home a#a-1 span::before {background:#fff !important;}


.home #header {transform:translateY(54vh) translateY(-0.4rem); border-bottom:0;}
#nv ul li#n2 {display:none !important;}
.home #nv ul li > a {padding:0 4rem;}
.home #nv {margin-right:calc(42vw - 27.2rem);}


#header a#a-1 {display:inline-block; width:calc(50vw - 16.25rem); float:left; color:#111; text-decoration:none !important;}
.home #header a#a-1 {width:calc(36vw - 4rem);}

.home #nv ul li > a, .home #header a#a-1 {color:#fff;}
.single-post .entry-title {display:block;}

#nv {position:relative; display:inline-block; float:right; margin-right:calc(42vw - 31.2rem);}
#nv > ul {display:inline-flex; flex-wrap:wrap; overflow:auto;}
#nv ul li {display:inline-block; width:auto; flex-basis:auto;}
#nv ul li > a {display:inline-block; overflow:visible; position:relative; width:auto; border:0; color:#111; text-decoration:none !important; padding:0 4rem;}
#nv ul li > a span, #a-1 span {position:relative; display:inline-block; height:auto; padding:0 0 0.2rem;}

#nv ul li > a, #header a#a-1 {font-size:1.15rem; letter-spacing:.15em; font-weight:600;}

#nv ul li > a span::before, a#a-1 span::before {position:absolute; content:''; display:inline-block; height:0.1rem; width:0; bottom:0; right:0; left:auto; transition:.2s; opacity:1; transition-timing-function:ease-out; background:#111;}

#nv ul li > a:hover span::before, a#a-1:hover span::before {width:calc(100%); opacity:1; transition:.24s; left:0; right:auto;}

/*
#nv ul li > a span::before, #nv ul li > a span::after {position:absolute; content:''; display:inline-block; height:0.4rem; width:0; background:#111; bottom:0; left:auto; right:50%; transition:.24s; opacity:0; transition-timing-function:ease-out;}
#nv ul li > a span::after {width:0; background:#111; bottom:0; right:auto; left:50%;}

#nv ul li > a:hover span::before, #nv ul li > a:hover span::after {width:50%; opacity:1;}*/


.come-in {
  transform: translateY(6rem);
  animation: come-in 1.2s ease forwards;
    opacity:0;
}
.come-in:nth-child(odd) {
  animation-duration: 1.2s; /* So they look staggered */
}

@keyframes come-in {
  to { transform: translateY(0); opacity:1; }
}



#sc_btn {position:absolute; display:inline-block; right:4rem; top:1.4rem; cursor:pointer;}
#sc_btn span {display:inline-block; border:1px solid #111; width:6.8rem; height:1.4rem; position:relative; box-sizing:border-box;}
.home #header.on #sc_btn {top:1.6rem;}
.home #sc_btn span {border-color:#fff;}


#search, #search * {transition: all 0.2s cubic-bezier(0.52, 0.16, 0.52, 0.84);}

#search {position:absolute; display:inline-block; right:2rem; top:1.5rem; cursor:pointer; line-height:0; font-size:0;}
#search .over {background:transparent; z-index:9;}
#search label, #search input[type=submit] {display: none;}
#search input[type=text] {display:inline-block; width:100%; box-sizing:border-box; min-width:0; max-width:100%; width:6.8rem; height:1.4rem; box-sizing:border-box; background:transparent; margin:0; border:2px solid var(--c2); text-align:left; font-size:1.2rem; font-weight:400; outline:none; border-radius:0; letter-spacing:.1em; text-transform:uppercase; color:#111; font-size:0; line-height:0; padding:0; top:0; cursor:pointer;}

#search #sclos {display:none; position:absolute; top:0.3rem; right:0.8rem; padding:0.3rem; box-sizing:content-box; width:1.4rem; height:auto; z-index:9; cursor:pointer; transition: all 0.3s cubic-bezier(0.52, 0.16, 0.52, 0.84);}
#search #sclos img {display:inline-block; width:100%; height:auto;}
#search #sclos rect {fill:#fff;}
#search #sclos:hover {-webkit-transform: rotate(135deg); -moz-transform: rotate(135deg);
	-o-transform: rotate(135deg); transform: rotate(135deg);}
.home #search {right:6rem;}
#search.on {top:0.9rem;}
#search.on .over {display:none;}
#search.on input[type=text] {width:calc(50vw - 14rem); height:2.7rem; color:#fff; background:var(--c2); font-size:1.4rem; line-height:1.4rem; padding:0.6rem 1rem; font-weight:400; cursor:text; box-sizing:border-box;}
#search.on #sclos {display:inline-block;}

#search input[type=text]::placeholder {}
#search input[type=text]:focus {}


.home #search.on {top:1.4rem;}
.home #search input[type=text] {border:2px solid var(--c3); background:transparent;}
.home #search.on input[type=text] {height:3.4rem; width:calc(100vw - 12rem); text-align:center; font-size:1.6rem; color:#fff; background:var(--c3);}}
.home #search #sclos {padding:0.5rem; width:1.6rem;}
.home #search.on #sclos {padding:0.6rem; width:1.6rem;}
.home #search:hover input[type=text] {border-color:var(--c3);}

#header.on #logo a, #header.on #nv ul li > a {color:#111;}

#header-left {float: left; width: 210px; padding-right: 40px;}
#header-center {float: left; width: 210px; padding-right: 30px;}

h1.entry-title, h1.page-title {display:none;}

.i_frm {display:block; position:relative; width:100vw; height:100vh; overflow:hidden; text-align:center; background:#000;}
.i_frm.main_slide img {position:relative; width:100% !important; height:100% !important; min-height:100%; left:0; object-fit:cover; object-position:center center;}
.i_frm.main_slide iframe {position:absolute; top:50%; left:50%; width:100vw; height:100vh; transform:translate(-50%, -50%);}
.i_frm.main_slide .over {position:fixed; opacity:1; background:#000; z-index:9;}
@media (min-aspect-ratio: 16/9) {
  .i_frm.main_slide iframe {
    height: 56.25vw;
  }
}
@media (max-aspect-ratio: 16/9) {
  .i_frm.main_slide iframe {
    width: 177.78vh;
  }
}

.i_frm.main_slide p {position:absolute; top:calc(50vh - 6vw); display:inline-block; left:0; right:0; margin:0 auto; padding:0 15vw; box-sizing:border-box; text-align:center; width:100%; font-size:var(--f-x); font-weight:800; color:#fff; z-index:19; letter-spacing:.14em; text-transform:uppercase;}


#page_search input[type=submit] {display: none;}
.menu ul {list-style-type: none;}
.menu ul li {padding-bottom: 9px;}
.menu ul a {line-height: 13px; color: #303030; text-decoration: none;}

#main {display:block; margin-top:4.2rem; position:relative; box-sizing:border-box; top:0; left:0;}
.home #main {margin-top:0;}

#main #cate {display:flex; width:100vw; padding:1.2rem 4rem; border-bottom:1px solid var(--c4); margin:0 0 0.1rem; background:#fff;}
#main #cate > li > a {display:none;}
#main #cate ul, #main #cate li {list-style-type:none;}

#main #cate .grid--item.left {border-right:1px solid var(--c4);}
#main #cate .grid--item {padding:2rem 6rem;}

#main #cate ul {display:flex; flex-wrap:wrap; width:100%; max-width:100%; box-sizing:border-box;}
#main #cate ul li {display:inline-block; width:33.3333%; flex-basis:33.3333%; margin:0.6rem 0; text-transform:uppercase;}
#main #cate ul li.current-cat a {font-weight:600;}
#main #cate li a {color:#726b6b; font-size:1.05rem; letter-spacing:.125em; font-weight:400; padding-right:2rem; display:block; width:100%; box-sizing:border-box;}
#main #cate li a span {padding:0 0 0.6rem; position:relative; display:block; width:100%;}
#main #cate li a:hover {color:#111;}
#main #cate li.sltd a {color:var(--c2); font-weight:700;}

#main #cate li a span::before {position:absolute; content:''; display:inline-block; height:0.1rem; width:0; background:var(--c2); bottom:0; right:0; left:auto; transition:.15s; opacity:0; transition-timing-function:ease-out;}
#main #cate li a:hover span::before {width:100%; opacity:1; transition:.24s; left:0; right:auto;}
#main #cate li.sltd a span::before {}

#container, #content {display:block; position:relative; top:0; clear:both; width:100vw;}
.single-post #main {margin-top:4.2rem;}
.in {box-sizing:border-box;}
/*
.in {box-sizing:border-box; padding:0 4rem; max-width:128rem; display:inline-block; width:100%; margin:0 auto;}
*/

/* works */
.flex {display:flex; flex-wrap:wrap;}
.grid {display:flex; flex-wrap:wrap; width:100%; height:auto;}
.grid--item, .grid-item {display:inline-block; width:50%; flex-basis:50%;}

.grid--item.i2-3 {width:66.6666%; flex-basis:66.6666%;}
.grid--item.i1-3 {width:33.3333%; flex-basis:33.3333%;}
.grid--item.i1-4 {width:25%; flex-basis:25%;}
.grid--item.i3-4 {width:75%; flex-basis:75%;}

.m-img__wrapper {display:block; position:relative; width:100%; height:calc(100vh - 14rem); overflow:hidden;}
.m-img__wrapper > div.btn-wrap {z-index:2; position:absolute; top:0; left:0;}
.m-img__wrapper > div {display:flex; flex-direction:column; flex-wrap:wrap; align-content:center; justify-content:center; position:relative; width:100%; height:calc(100vh - 14rem); overflow:hidden; background:transparent;}
.m-img__wrapper iframe {position:absolute; top:50%; left:50%; width:100vw; height:100vh; transform:translate(-50%, -50%); z-index:-1; background:#000;}
.m-img__wrapper::after {content:''; position:absolute; top:0; bottom:0; left:0; display:block; width:100%; height:100%; z-index:0; opacity:0.2; background:#000;}
.m-img__wrapper > div img {display:block; position:relative; top:0; left:0; object-fit:cover; object-position:center center; width:100%; height:100%; margin:0; padding:0;}


a.btn2 {position:relative; display:inline-block; color:#fff; border:2px solid #fff; width:auto; height:auto; flex-basis:auto; z-index:9999999 !important;}
a.btn2::after {position:absolute; top:0; left:0; width:100%; height:100%; display:block; z-index:-1; content:''; background:#000; opacity:0.3; transition: all 0.24s cubic-bezier(0.52, 0.16, 0.52, 0.84);}

a.btn2:hover {color:#111; font-weight:600; border:1px solid #111;}
a.btn2:hover::after {background:var(--c2); opacity:0.97;}
 d
@media (min-aspect-ratio: 16/9) {
  .m-img__wrapper iframe {
    /* height = 100 * (9 / 16) = 56.25 */
    height: 56.25vw;
  }
}
@media (max-aspect-ratio: 16/9) {
  .m-img__wrapper iframe {
    /* width = 100 / (9 / 16) = 177.777777 */
    width: 177.78vh;
  }
}


.grid.title .category {list-style-type:none; display:flex; flex-wrap:wrap; justify-content:left; letter-spacing:.2rem; color:#111; text-transform:uppercase; margin:2rem 0 0;}
.grid.title .category li {display:inline-block; width:auto; flex-basis:auto; font-size:1.15rem; padding-right:1.4rem;}
.grid.title .category li a {color:#a8a4a1; margin-right:1.4rem;}
.grid.title .category li a i {font-style:normal;}
.grid.title .category li::after {content:""; display:inline-block; height:1rem; top:0.1rem; width:1px; position:relative; margin-right:0.1rem; background:#777;}
.grid.title .category li:last-child::after {display:none;}

.grid.title .category li a:hover {color:#111;}



/* info - title */
.cont {display:block; position:relative; width:100%; height:auto; top:0;}
.cont.project {background:#fff;}
.cont .grid.title {display:block; margin:0; position:sticky; top:4.2rem; left:0; padding:0; z-index:99; background:#fff; border-bottom:1px solid var(--c4); text-align:center;}
.cont .grid.title > .in {display:inline-flex; position:relative; margin:0 auto; width:100%; max-width:100%; text-align:left; padding:1.2rem 0;}
.cont .grid.title > .in > div {display:inline-block; width:50%; flex-basis:50%; padding:1.2rem 6rem;}
.cont .grid.title > .in > div.grid--item.left {border-right:0p; padding-left:10rem;}
.cont .grid.title > .in > div.grid--item.right {padding-left:6rem; padding-right:10rem;}
.cont .grid.title.on > .in > div.grid--item.right {padding-left:0;}

.grid.title h1 {font-size:2rem; line-height:1.1; font-weight:600; text-transform:uppercase; display:block; letter-spacing:.2em; margin:0;}
.grid.title .right h1 {font-size:1.4rem; display:flex; flex-wrap:wrap; flex-direction:row-reverse; justify-content:flex-end;}
.grid.title .right h1 label, .grid.title .right h1 .year {display:inline-block; width:auto; flex-basis:auto; position:relative;}
.grid.title .right h1 .year {margin-right:1.6rem; padding-right:1.5rem;}
.grid.title .right h1 .year::after {content:''; position:absolute; width:0.8rem; height:0.1rem; top:0.8rem; right:0; background:#111;}

.grid.title.on h1 {font-size:1.3rem;}
.cont .grid.title.on > .in > div {padding-top:0.4rem; padding-bottom:0.2rem;}
.cont .grid.title.on > div {padding-top:1.2rem; padding-bottom:1.2rem;}
.grid.title.on .category {margin:0.6rem 0 0;}
.grid.title.on .category li {font-size:1rem;}

/* info area */
.info-area {display:block; padding:0 0; width:100%; text-align:center;}

.info-area .grid.in.dsc {padding:4rem 0; overflow:visible; letter-spacing:.1em;}
.info-area .dsc[data-ln="en"] .kr {display:none !important;}
.info-area .dsc[data-ln="kr"] .en {display:none !important;}

.info-area .ln-sl {position:relative; width:100%; display:block; margin:0 0 4rem; text-align:right;}
.info-area .ln-sl ul {display:inline-flex; flex-wrap:wrap;}
.info-area .ln-sl ul > * {display:inline-block; width:auto; flex-basis:auto;}
.info-area .ln-sl ul x {background:var(--c5); width:1px; flex-basis:1px; height:1rem; top:0.4rem; position:relative;}
.info-area .ln-sl ul li a {display:block; width:100%; padding:0 1.4rem; font-size:1.2rem; text-transform:uppercase; color:#aaa; cursor:pointer;}
.info-area .ln-sl ul li a:hover {color:#333;}
.info-area .ln-sl ul li a.sltd {color:#111;}


.info-area .grid.in {display:block; position:relative; padding:0; text-align:center;}
.info-area .grid.in > .in {display:inline-flex; position:relative; margin:0 auto; width:100%; max-width:128rem; text-align:left; padding:1.6rem 0;}

.info-area .grid.in > .in > div {display:inline-block; width:calc(50% + 1px); flex-basis:calc(50% + 1px); padding:1.2rem 6rem; overflow:visible; position:relative;}
.info-area .grid.in .right .group {margin:4rem 0;}
.info-area .grid.in .right .group .cont {margin:2rem 0 0;}

.info-area .grid.in.sub-info {border-bottom:1px solid var(--c4); min-height:0; height:auto !important; padding:1.2rem 0; line-height:0;}
.info-area .grid.in.sub-info > .in > div {padding:0.2rem 6rem;}
.info-area .grid.in.sub-info > .in {font-size:1.2rem; line-height:1.4; display:inline-flex; position:relative; margin:0 auto; width:100%; max-width:100%; text-align:left; padding:0;}
.info-area .grid.in.sub-info > .in > div.grid--item.left {border-right:1px solid var(--c4); padding-left:10rem;}
.info-area .grid.in.sub-info > .in > div.grid--item.right {width:calc(50% - 1px); flex-basis:calc(50% - 1px); padding-right:10rem;}
.info-area .grid.in.sub-info ul {display:flex; flex-wrap:wrap;}
.info-area .grid.in.sub-info ul li {display:inline-block; width:calc(50% - 1.2rem); flex-basis:calc(50% - 1.2rem); margin:0.6rem 0;}

.info-area .grid.in.sub-info ul li label {display:block; width:100%; position:relative; box-sizing:border-box; text-transform:uppercase; letter-spacing:.125em; color:#111; padding:0 0 0.2rem; font-weight:600;}
.info-area .grid.in.sub-info ul li label::after {content:""; display:inline-block; height:0.9em; top:0.1em; width:1px; position:absolute; right:0; background:#777; display:none;}
.info-area .grid.in.sub-info ul li span {color:#a8a4a1; display:block; font-size:1.25rem; line-height:1.8;}


.info-area .dsc h4 {display:block; width:100%; font-size:2rem; font-weight:600; margin:0 0; padding:0 0; min-height:10rem; box-sizing:border-box; letter-spacing:.1em; line-height:1.5;}
.info-area .dsc[data-ln="kr"] h4 {line-height:1.5;}
.info-area .dsc p {display:block; width:100%; color:#111; font-size:1.4rem; font-weight:400; line-height:1.8; letter-spacing:.05em;}

.info-area .dsc .right h4 {font-weight:400; letter-spacing:0.2rem; font-size:1.4rem;}
.info-area .dsc h4 label::after {background:#111;}

.info-area .dsc .flex span {display:inline-block; width:auto; flex-basis:auto;}

.img-area {display:flex; clear:both; position:relative; flex-wrap:wrap; padding:0 0.05rem; width:100%;}
.img-area .grid-item {display:inline-block; width:50%; flex-basis:50%; padding:0 0.05rem 0.1rem;}
.img-area .grid-item.full {width:100%; flex-basis:100%;}
.img-area .grid-item.i1-3 {width:33.3333%; flex-basis:33.3333%;}

/* credit */
.grid.credit {border-bottom:1px solid var(--c4); min-height:0; height:auto !important; padding:8rem 0; line-height:0;}
.grid.credit > .in {font-size:1.2rem; line-height:1.4; display:inline-block; position:relative; margin:0 auto; width:50%; max-width:128rem; text-align:left; padding:0;}

.grid.credit > .in > div {padding:0.2rem 6rem; display:block; width:100%; text-align:center;}

.grid.credit > .in > div.grid--item.left {}
.grid.credit > .in > div.grid--item.left h4 {display:block; margin:0 0 2rem; font-size:1.4rem; text-transform:uppercase;}
.grid.credit > .in > div.grid--item.right {}
.grid.credit ul {display:flex; flex-wrap:wrap; justify-content:center; text-align:center; margin:1rem 0;}
.grid.credit ul li {display:inline-block; width:auto; flex-basis:auto; margin:1rem 5.2rem; text-align:center;}

.grid.credit ul li label {display:block; width:100%; position:relative; box-sizing:border-box; text-transform:uppercase; letter-spacing:.125em; color:#111; padding:0 0 0.2rem; font-weight:600;}
.grid.credit ul li label::after {content:""; display:inline-block; height:0.9em; top:0.1em; width:1px; position:absolute; right:0; background:#777; display:none;}
.grid.credit ul li span {color:#a8a4a1; display:block;}



/* light box */
.l-box {position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:10000001; text-align:center; display:flex; flex-direction:column; flex-wrap:wrap; justify-content:center; display:none;}
.l-box .container {display:inline-block; width:70%; flex-basis:70%; margin:0 auto; position:relative; overflow:hidden; padding-top:56.25%;}
.l-box .clos {position:absolute; top:2rem; right:2rem; padding:1.2rem; box-sizing:content-box; width:1.8rem; height:auto; z-index:9999; cursor:pointer; transition: all 0.3s cubic-bezier(0.52, 0.16, 0.52, 0.84);}
.l-box .clos img {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
.l-box .clos:hover {-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);}
.l-box iframe {position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%;}
.l-box .over {position:absolute; top:0; bottom:0; left:0; display:block; width:100%; height:100%; z-index:-1; opacity:0.95; background:#000;}


/*related projects */
.related {display:block; position:relative; width:100%;}
.related h2 {display:block; width:100%; text-align:center; font-size:1.6rem; padding:2rem 0; letter-spacing:.1em; border-bottom:1px solid var(--c4);}
.grid {display:flex; flex-wrap:wrap; width:100%; height:auto;}
.related .grid {background:var(--c5);}
.related .grid-item {display:inline-block; width:33.3333%; flex-basis:33.3333%; padding:0 0.05rem 0.1rem; box-sizing:border-box;}
.related .grid-item > a {display:block; position:relative; width:100%; cursor:pointer; overflow:hidden; height:36rem;}

.related .grid-item > a > img {display:block; position:relative; top:0; left:0; object-fit:cover; object-position:center center; width:100%; height:100%; margin:0; padding:0; transition: all 0.4s cubic-bezier(0.52, 0.16, 0.52, 0.84);}
.related .grid-item span.t1 {position:absolute; z-index:99; top:auto; bottom:0; left:0; font-size:1.3rem; width:100%; margin:0.1rem 0 0; padding:0; text-transform:uppercase; box-sizing:border-box; font-weight:600; letter-spacing:.225rem; line-height:1.4; transition: all 0.3s cubic-bezier(0.52, 0.16, 0.52, 0.84); cursor:pointer; color:#fff; overflow:visible; height:auto;}
.related .grid-item span.t1 > span {display:block; width:100%; padding:1rem 1.2rem 1.4rem; box-sizing:border-box;}
.related .grid-item span.t1 span x, .related .grid-item span.t1 span y {display:block; position:relative; width:100%; flex-basis:100%; box-sizing:border-box; padding:0; color:#111;}
.related .grid-item span.t1 span x {padding:0 0 0.2rem;}
.related .grid-item span.t1 span y {font-size:1.1rem; font-weight:400; letter-spacing:.125em;}
.related .grid-item span.t1 span x::after, .related .grid-item span.t1 span y::after {content:''; position:absolute; top:0; bottom:0; left:0; display:block; width:100%; height:100%; opacity:0; z-index:-1; transition: all 0.3s cubic-bezier(0.52, 0.16, 0.52, 0.84);}

.related .grid-item .over {opacity:0.9; top:0; bottom:auto; height:100%; background:#fff; transition: all 0.3s cubic-bezier(0.52, 0.16, 0.52, 0.84);}

.related .grid-item:hover span.t1 > span {padding-left:2.8rem;}
.related .grid-itemx:hover img {transform: scale(01.025);}
.related .grid-item:hover .t1 {background:transparent;}
.related .grid-item:hover .t1 .over {opacity:1; background:#111 !important; z-index:-1}

.related .grid-item:hover .t1 span x, .related .grid-item:hover .t1 span y {color:#fff !important;}
.related .grid-item:hover .t1 span x::after, .related .grid-item:hover .t1 span y::after {opacity:0.95;}

/* page */
.page {display:block; width:100%;}
.page > .in {text-align:left; width:100%; box-sizing:border-box;}
.page section {display:block; margin:0 0; -webkit-font-smoothing:subpixel-antialiased !important; box-sizing:border-box; min-height:calc(100vh - 4.2rem);}

/* about */
.selector {position:fixed; top:4.2rem; left:0; z-index:9999; display:block; text-align:center; width:100%;}
.selector in {display:inline-flex; width:auto;}
.selector in a {display:block; width:auto;}
.selector in a span {cursor:pointer; display:inline-block; color:#111; box-sizing:border-box; text-transform:uppercase; padding:1.2rem 8rem; font-weight:600; margin:0; font-size:1.1rem; text-transform:uppercase; letter-spacing:.2em; transition: all 0.28s cubic-bezier(0.52, 0.16, 0.52, 0.84);}
.selector in a span::before {display:inline-block; content:''; position:relative; float:left; top:0.2rem; width:1rem; height:1rem; box-sizing:border-box; border:2px solid transparent; border-radius:2rem; margin-right:1rem;}
.selector in a.sltd span::before {background:var(--c2); border-color:var(--c2);}


section.s p {font-size:1.8rem; font-weight:400; line-height:1.7; display:block; padding:0 6rem 4rem; letter-spacing:.05em;}

section.s .p1 p {font-size:2.4rem; letter-spacing:.15em; font-weight:600; font-style:italic; line-height:1.5; padding:0rem 6rem 6rem; color:var(--c3);}

section.s.title .p1 p {font-size:2.4rem; letter-spacing:.25em; font-weight:600; font-style:italic; line-height:1.5; padding:4rem 6rem 3.2rem;  color:#fff;}

section .p-step {display:flex; justify-content:center; text-align:center; flex-wrap:wrap; width:100%; margin:12rem 0;}
section .p-step > div {display:inline-block; width:auto; flex-basis:auto;}
section .p-step > div i {display:inline-block; font-size:1.6rem; margin:0 3.6rem; letter-spacing:.2em; font-weight:600 !important; padding:0.6rem 2.8rem; border-radius:30rem; border:2px solid var(--c2); color:var(--c2);}
section .p-step > div.ideation {margin-left:5.8rem;}
section .p-step > div.bar {text-align:center; display:block; margin:1rem 0 !important;}
section .p-step > div.bar span {display:inline-block; width:14rem; background:var(--c2) !important; height:2px;}



section.s p.p-1 {font-size:1.6rem; display:inline-block; max-width:120rem; letter-spacing:.075em;}

.group .cont {display:none;}

.in.about section {text-align:center; padding:15vh 12%; display:flex; flex-direction:column; justify-content:center; height:auto;}
.in.about section h2 {}
.in.about section .in {text-align:center; display:inline-block; margin:0 auto;}


.in.about section#a_0 {text-align:center; padding:12vh 15%; min-height:85vh;}
section#a_0 {background:#111;}
section#a_0 .in {display:inline-block; width:auto; flex-basis:auto; transform:translateY(-0.8rem); max-width:100%;}
section#a_0 h1 {font-size:6rem; padding:12vh 0; font-weight:600; font-style:italic; line-height:1.3;}
section#a_0 h1 span.i2 {margin-left:55vw;}
section#a_0 * {color:#fff;}

.in.about section.title {min-height:0 !important; padding:10rem 0 10rem; background:var(--c3); color:#fff !important;}
.in.about section.title h2 {font-weight:600; font-size:1.8rem; letter-spacing:.25em; display:block; padding:2rem 0;}
.in.about section.title .bar {text-align:center; display:block; margin:3.2rem 0 1rem;}
.in.about section.title .bar span {display:inline-block; background:#fff;}
.in.about section.title .in {max-width:100rem;}
.in.about section.title .bar.round {margin:0 0 2rem;}
/* section.s.title .p1 p {font-size:3.2rem !important;} */



.in.about section .grid-item p {padding:0 0 4rem;}
.in.about section .grid-item.left {border-right:1px solid var(--c6); padding:0 4rem; text-align:left;}
.in.about section .grid-item h4 {font-size:2rem;}
.in.about section .grid-item h4::before {display:inline-block; content:''; top:-0.1rem; width:1rem; height:1rem; background:var(--c2); border-radius:2rem; margin-right:4rem; position:relative;}


.in.about section .grid-item.right {text-align:left; padding:0 2rem;}
.in.about section .grid-item.right h4 {font-size:2rem; display:block; margin:0 0 16rem;}


.in.about section#a_1 {padding:10rem 0 12vh; min-height:0;}
.in.about section#a_1 .in {text-align:center; display:inline-block; max-width:calc(100%); width:100%;}

.in.about section#a_1 .grid-item.left {border-right:1px solid var(--c6); padding:0 4rem; text-align:left;}
.in.about section#a_1 .grid-item.left h4 {font-size:1.8rem; text-transform:capitalize;}
.in.about section#a_1 .grid-item.left h4::before {display:inline-block; content:''; top:-0.1rem; width:1rem; height:1rem; background:var(--c2); border-radius:2rem; margin-right:4rem; position:relative;}

.in.about section#a_1 .grid-item.left p {font-size:3.2rem; line-height:1.4; font-weight:600;}
.in.about section#a_1 .grid-item.right {text-align:left; padding:20rem 16rem 0 2rem;}
.in.about section#a_1 .grid-item.right p {padding:0 0 4rem;}
.in.about section#a_1 div.p1 {margin:0 0 8rem;}

.column {display:block; vertical-align:top; margin:4rem 0 0;}
/* .column {display:block; margin:8rem 0; column-count:2; column-rule:1px solid var(--c6); vertical-align:top;} */
section.s .column p {text-align:left; font-size:1.6rem; padding:0 0 4rem;}
	
.bar {text-align:center; display:block; margin:4rem 0 4.8rem;}
.bar span {display:inline-block; width:5.2rem; background:#111; height:0.1rem; margin:0 auto;}

.bar.round {text-align:center; display:block; margin:2.8rem 0;}
.bar.round span {width:1rem; height:1rem; background:var(--c2); border-radius:2rem;}

section#a_0 .bar span {display:inline-block; width:8rem; background:#fff; height:0.1rem; margin:0 auto;}



section#a_0 .p1 p {font-size:2rem; font-weight:400; letter-spacing:.1em;}
/*
section.s .p1 p {font-size:3.6rem; font-weight:600; letter-spacing:.1em; line-height:1.3; font-style:italic;}*/
section#a_0 .p2 {display:none;}

section#a_2 {text-align:center; padding:0 0; display:flex; flex-direction:column; justify-content:center; height:auto;}
section#a_2 .grid .bar.round {margin:0 0 4.8rem;}

.in.about section#a_2 .in {max-width:100%;}
.in.about section#a_2 .grid {margin:0 0 8rem;}
.in.about section#a_2 .grid-item {padding-right:16rem;}
.in.about section#a_2 .grid-item h4 {font-size:1.8rem; margin:0 0 14rem; text-transform:capitalize;}
.in.about section#a_2 .grid-item h5 {font-size:1.8rem; display:block; font-style:italic; margin:0 0 4rem; color:var(--c2);}
.in.about section#a_2 .grid-item p {font-size:1.5rem; max-width:100rem;}

.in.about section#a_2 .grid.development .grid-item.right {padding-left:6rem;}


.in.about section#a_2 .in.grey {background:var(--c5); padding:12vh 0 12vh;}

section#a_2 h3 {letter-spacing:.15em; font-size:1.6rem; font-weight:700; display:inline-flex; justify-content:center; text-transform:lowercase; font-style:italic; padding:0.5rem 2.8rem; border-radius:3rem; border:2px solid var(--c4); background:var(--c4); box-sizing:border-box; cursor:pointer; margin:0 0 2.8rem;}



.in.about section#a_3 .in {max-width:148rem;}
section#a_3 {text-align:center; padding:12rem 4rem 12rem; display:flex; flex-direction:column; justify-content:center; height:auto; background:var(--c5);}

section#a_3 ul {display:flex; flex-wrap:wrap; width:100%;}
section#a_3 ul li {display:inline-block; width:25%; flex-basis:25%; position:relative; box-sizing:border-box; padding:0 0.05rem; color:#111;}
section#a_3 ul li img {width:100%; height:auto;}
section#a_3 ul li .dsc {position:relative; font-size:1.1rem; text-align:left; text-transform:uppercase; padding:1.2rem 0 2.8rem;}
section#a_3 ul li .dsc p {display:block; margin:0 0 0.6rem;}
section#a_3 ul li .dsc p.name {font-size:1.3rem; font-weight:600 !important;}
section#a_3 ul li .dsc p.position {font-weight:300;}
section#a_3 ul li .dsc p span {letter-spacing:.1em;}



.page section#contact {padding:0 0; min-height:calc(100vh - 6.2rem);}
section#contact .grid--item {font-size:1.2rem; letter-spacing:.075em; font-weight:300;}
section#contact .grid--item.i3-4 {border-right:0px solid var(--c4); min-height:calc(100vh - 6.2rem); display:inline-flex;}
section#contact .crnt > .grid--item {min-height:calc(100vh - 6.2rem);}
section#contact a.ex-link {display:inline-block; color:var(--c3); margin:1.2rem 0 0; border-bottom:1px solid transparent;}
section#contact a.ex-link:hover {border-color:var(--c2);}


section#contact .crnt .grid--item.i2-3 {border-right:0px solid var(--c4); display:inline-flex; flex-direction:column; height:100%;}
section#contact .crnt .grid--item.i2-3 > div {display:inline-block; width:100%; flex-basis:50%; height:50%;}
section#contact .grid--item div.b-1 {background:#111;}
section#contact .grid--item div.b-2 {background:var(--c2);}

section#contact .crnt .grid--item.i2-3 {width:2rem; flex-basis:2rem;}
section#contact .crnt .grid--item.i1-3 {width:calc(100%  - 2rem); flex-basis:calc(100%  - 2rem);}

section#contact .crnt .grid--item.i1-3 {display:inline-flex; flex-direction:column-reverse; height:100%;}
section#contact .crnt .grid--item.i1-3 > div {display:inline-block; width:100%; flex-basis:50%; height:50%;}
section#contact .crnt .grid--item.i1-3 > div.info {border-bottom:1px solid var(--c4); padding:8rem 2rem; background:#f2edec;}
section#contact .crnt .grid--item.i1-3 > div.info span.h4 {font-size:1.4rem;}
section#contact .crnt .grid--item.i1-3 > div.map {background:var(--c5);}
section#contact .crnt .grid--item.i1-3 .info .addr span {margin:0 0 0.4rem;}

section#contact .grid--item.i1-4 {padding:0 0; background:#fff;}
section#contact .grid--item.i1-4 > a {display:block; width:100%; height:auto; cursor:pointer; padding:1.2rem 2rem 2rem; border-bottom:1px solid var(--c4);}
section#contact .grid--item.i1-4 > a.sltd span {color:#fff !important;}
section#contact .grid--item.i1-4 > a:hover {padding:1.2rem 3.2rem 2rem;}
section#contact .grid--item.i1-4 > a:hover {background:#fff;}
section#contact .grid--item.i1-4 > a.sltd {background:var(--c2) !important; padding:2rem 2rem 10rem !important;}
section#contact .grid--item.i1-4 e {display:none !important;}

section#contact .grid--item span {display:block; width:100%; font-size:1.2rem; text-transform:none;}
section#contact .grid--item span.h4 {font-size:1.2rem; letter-spacing:.1em; font-weight:600; margin:0 0 1.6rem; text-transform:none;}
section#contact .grid--item.i1-4 span {color:;}

#boxes {display:flex; width:100vw; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start; box-sizing:border-box; padding:0 0 0 0.1rem; background:var(--c5);}

.box {display:inline-block; position:relative; width:33.3333%; flex-basis:33.3333%; font-size:0; line-height:0; padding:0 0.1rem 0.1rem 0;}
/* .box:first-child {width:100%; flex-basis:100%;}
.box:first-child .in > a {height:60rem;} */

.box .in {display:block; width:100%; height:auto; box-sizing:border-box; position:relative;}
.box .in > a {overflow:hidden; display:block; position:relative; width:100%; height:40rem;}
.box .in > a img {display:block; position:relative; top:0; left:0; object-fit:cover; object-position:center center; width:100%; height:100%; margin:0; padding:0; transition: all 0.4s cubic-bezier(0.52, 0.16, 0.52, 0.84);}

.box > p, .box .categories, .box .posted {display:none;}

/* .box .in > a.h4 {position:absolute; z-index:99; font-size:1.3rem; left:0; top:0; bottom:auto; width:100%; margin:0; padding:0; text-transform:uppercase; box-sizing:border-box; font-weight:600; letter-spacing:.25rem; line-height:1.4; transition: all 0.3s cubic-bezier(0.52, 0.16, 0.52, 0.84); cursor:pointer; color:#fff; overflow:visible; height:auto;} */
.box .in > a.h4 {position:absolute; z-index:99; top:auto; bottom:0; left:0; font-size:1.3rem; width:100%; margin:0.1rem 0 0; padding:0; text-transform:uppercase; box-sizing:border-box; font-weight:600; letter-spacing:.225rem; line-height:1.4; transition: all 0.3s cubic-bezier(0.52, 0.16, 0.52, 0.84); cursor:pointer; color:#fff; overflow:visible; height:auto;}

.box .in > a.h4 > span {display:block; width:100%; padding:1.2rem 1.2rem 2.4rem; box-sizing:border-box;}
.box .in > a.h4 span x, .box .in > a.h4 span y {display:block; position:relative; width:100%; flex-basis:100%; box-sizing:border-box; padding:0; color:#111;}
.box .in > a.h4 span x {padding:0 0 0.6rem; color:#111;}

.box .in > a.h4 span x::after, .box .in > a.h4 span y::after {content:''; position:absolute; top:0; bottom:0; left:0; display:block; width:100%; height:100%; opacity:0; z-index:-1; transition: all 0.3s cubic-bezier(0.52, 0.16, 0.52, 0.84);}

.box .in > a.h4 span y {font-size:1.1rem; font-weight:400; letter-spacing:.125em;}
.box .in > a.h4 .over {opacity:0.9; top:0; bottom:auto; height:100%; background:#fff; transition: all 0.3s cubic-bezier(0.52, 0.16, 0.52, 0.84);}

.box:hover img {transform: scale(01.025);}
.box:hover .in > a.h4 > span {padding-left:2.8rem;}
.box:hover a.h4 {color:#fff !important;}
.box:hover a.h4 .over {opacity:1; background:#111; z-index:-1;}

.box:hover a.h4 span x, .box:hover a.h4 span y {color:#fff !important;}

.box:hover a.h4 span x::after, .box:hover a.h4 span y::after {opacity:0.95}

#content {}

#social {display:none;}

.post img, .page img {display:block; width:100%; height:auto;}

#comments {padding: 0 0 0 246px; width: 714px;}
#comments-title {font-size: 21px; margin: 40px 0 20px 4px;}
.commentlist {margin: 0; padding: 0; list-style: none;}
.commentlist ul.children {list-style: none;}
.commentlist li > div {position: relative; border-bottom: 1px solid #dedfe0; padding: 30px 0 30px 4px;}
.commentlist li li > div {margin-left: 90px;}
.commentlist li li li > div {margin-left: 180px;}
.commentlist li li li li > div {margin-left: 270px;}
.commentlist li li li li li > div {margin-left: 360px;}
.comment-avatar {position: absolute; top: 30px; left: -96px;}
.comment-content {margin-left: 96px; border-bottom: 1px solid #dedfe0;}
.comment-author {float: left; width: 210px; padding-right: 40px; font-size: 15px;}
cite {font-style: normal; font-weight: bold;}
.comment-meta {float: left; width: 210px; padding-right: 40px; color: #999999;}
.comment-body {clear: both; padding-top: 7px; font-size: 15px; line-height: 21px;}
#respond {padding-left: 4px;}
li.comment > div {position: relative;}
.reply {position: absolute; top: 30px; right: 20px;}
#reply-title {font-size: 21px;}
.comment-reply-link {display: none;}
.comment-form-author, .comment-form-email, .comment-form-url {float: left; width: 460px; margin: 0; padding: 10px 0;}
.comment-form-comment {clear: both; width: 460px; margin: 0; padding: 10px 0;}
input[type="text"], textarea {background: #fff; border: 1px solid #ccc; padding: 8px; outline: none; color: #6b6b6b; -moz-border-radius: 4px; border-radius: 4px;}
#comments input[type="text"] {width: 442px;}
#comments textarea {width: 442px;}
.form-submit {margin-bottom: 40px;}
.form-submit input {width: 460px; padding: 6px 0; color: #fff; font-size: 15px; font-weight: bold; cursor: pointer; border: 0; text-align: center; -moz-border-radius: 4px; border-radius: 4px;}
.recent {margin-top:40px; padding-top:40px;}
#footer {display:block; width:100%; padding:2rem 2rem; border:0; letter-spacing:.1em; font-size:1.2rem; text-transform:uppercase;}
#site-info {display:flex; flex-wrap:wrap; justify-content:space-between; padding:0 4rem;}
#site-info > p {display:inline-block; width:auto; flex-basis:auto;}
#site-info > p.credit {font-size:1.1rem; letter-spacing:.05em; color:#aaa;}
#site-info > p.credit a {color:#111;}
.home #footer {display:none;}

#infscr-loading {background: none repeat scroll 0 0 #000000; bottom: 40px; color: #FFFFFF; height: 100px; left: 40%; opacity: 0.8; padding: 10px; position: fixed; width: 200px; z-index: 5000; border-radius: 10px;}
#menu_btn, .m-nv, br.m {display:none;}


/* for MOBILE */
@media screen and (min-width:1px) and (max-width:919px) {
	br.m {display:inline-block;}
	#nv ul li > a, #header a#a-1 {font-size:1.1rem;}
	#nv, #header a#a-1 {display:none;}
	br.m {display:inline-block;}
	.btn2 {padding:1.4rem 2.8rem; font-size:1.1rem; font-weight:600;}
	
	#h {display:inline-block; width:2.8rem; flex-basis:2.8rem; margin-top:-88px}
	
	
	body.home {overflow:hidden !important;}
	
    .lg {display:block; width:100%; height:auto; position:relative; bottom:0; top:auto; z-index:99; box-sizing:border-box; padding:1.2rem 1.6rem;}
    .lg a {display:block; width:100%; height:auto;}
	.home .lg {position:fixed; display:block;}
    
    #nv {display:none;}
    #search, .home #search {right:1.6rem; top:1.45rem; cursor:pointer;}
	
    #search input[type=text] {width:4.4rem; height:1.1rem; box-shadow:none; -webkit-appearance:none; top:0;}
	
    .home #search.on, #search.on {top:0; position:fixed; left:auto; right:0; width:100vw; z-index:99999; background:#fff; height:3.8rem;}
	.home #search.on {background:transparent;}
	.s-on #header .inner {z-index:10000001;}
	
    #search.on .over {display:block; opacity:0; z-index:-1; position:fixed; width:100%; height:100vh; top:0; left:0;}
	#s1 {overflow:visible;}
    #search.on input[type=text], .home #search.on input[type=text] {height:3.8rem; width:100%; min-width:0; font-size:1.4rem; cursor:text; text-align:center; border:0;}
    #search #sclos, .home #search #sclos, .home #search.on #sclos {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top:0; right:0; padding:1.2rem; width:1.4rem;}
	#search:hover input[type=text] {border-color:var(--c2);}
	
    #header, #header.on {height:3.8rem; z-index:10001;}
    #header > .inner {text-align:center; padding:1.2rem 1.2rem;}
	
	.home #header {transform:translateY(0); border-bottom:0; overflow:visible;}
    .home #header > .over {background:linear-gradient(180deg, #000, transparent 55%); border:0; opacity:0.7; width:100vw; top:0; left:0; padding:0 0; height:25vh; z-index:-1;} 
	
	/*.home #header > .over {background:#000; border:0; opacity:0.99; width:100vw; top:0; left:0; padding:0 0; height:100%;}*/
	
	#header::before {height:0.3rem;}
	.home #header::before {display:none !important;}
	/*
	.home #header > .inner {text-align:left;}
    .home #nv ul li > a, .home #header a#a-1 {font-size:1.05rem; color:#fff; width:auto;}
	.home #nv, .home #header a#a-1 {display:inline-block; color:#fff; margin:0; display:none;}
	.home #nv ul li > a {padding:0 0rem; margin:0 2rem;}
	.home #nv ul li#n3 > a {margin-right:1.6rem;}
	.home #header a#a-1 {padding:0 0rem;} 
	
	#nv ul li > a span::before, a#a-1 span::before {width:100%; opacity:0;}*/
	
    #header #logo, .home #header #logo {position:relative; top:0.3rem; left:0; margin:0 auto;}
    #header #logo a, .home #header #logo a {width:7.6rem !important;}
    
    
    /* .home #header .st0 {fill:#111;}
    .home #sc_btn span {border-color:#111;}
    */
    
    .m-nv {position:fixed; display:block; width:100%; height:auto; z-index:9; display:none;}
    .m-nv > .in {width:100%; height:auto; padding:26vh 2rem; padding-bottom:calc(26vh + 2.8rem); text-align:center;}
    .m-nv ul, .m-nv ul li {display:block; width:100%;}
    .m-nv ul li > a {display:block; position:relative; width:100%; border:0; color:#111; text-decoration:none !important; font-weight:700; padding:1.2rem 0; text-transform:uppercase;}
    .m-nv ul li > a span {position:relative; display:inline-block; height:auto; padding:0;}
    .m-nv ul li > a {font-size:1.2rem; letter-spacing:.15em;}
	.m-nv .over {background:var(--c3); opacity:0.99;}
	.m-nv .over.closer {z-index:-2; background:#000; opacity:0.7; position:fixed; height:100vh;}
    
    .home.m-on .st0 {fill:#111;}
	.m-on #search input[type=text] {border-color:#fff; background:var(--c3);}
	.m-on #search.on input[type=text] {border-color:#fff; background:#fff;}
    
    #menu_btn {position:fixed; left:auto; left:1.6rem; top:0.4rem; display:inline-block; width:3rem; height:3rem; z-index:9999;}
	
    #menu_btn span {position:absolute; display:block; height:2.8rem; width:2.8rem; top:0; left:0; background:transparent;
    transition:transform .1806s cubic-bezier(0.04, 0.04, 0.12, 0.96), -webkit-transform .1806s cubic-bezier(0.04, 0.04, 0.12, 0.96);}
    #menu_btn span::after {position:absolute; content:''; display:inline-block; height:.26rem; width:2.8rem; left:0rem; background:var(--c2); transition:transform .1596s cubic-bezier(0.52, 0.16, 0.52, 0.84) .1008s, -webkit-transform .1596s cubic-bezier(0.52, 0.16, 0.52, 0.84) .1008s;}
    
    #menu_btn span.b_1::after {top:14.7px; transform:translateY(-4.4px);}
    #menu_btn span.b_2::after {top:14.7px; transform:translateY(0);}
    #menu_btn span.b_3::after {top:14.7px; transform:translateY(4.4px);}
    
    
    #menu_btn.on span {transition:transform .3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) .1008s, -webkit-transform .3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) .1008s;}
	#menu_btn.on span::after {background:#fff;}
	
    #menu_btn.on span.b_2::after {width:1.4rem; left:0.7rem; transform:translateY(0); -webkit-transform:translateY(0);}
    #menu_btn.on span.b_1::after, #menu_btn.on span.b_3::after {display:none;}
    
    /*
    #menu_btn.on span.b_1 {-webkit-transform: rotate(45deg); -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg); transform: rotate(45deg);}
    #menu_btn.on span.b_2 {-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg); transform: rotate(-45deg);}
    #menu_btn.on span.b_3::after {display:none;}
    
    #menu_btn.on span {transition:transform .3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) .1008s, -webkit-transform .3192s cubic-bezier(0.04, 0.04, 0.12, 0.96) .1008s;}
    #menu_btn.on span.b_1::after, #menu_btn.on span.b_2::after {width:1.4rem; left:0.9rem; transform:translateY(0); -webkit-transform:translateY(0); transition:transform .1806s cubic-bezier(0.04, 0.04, 0.12, 0.96), -webkit-transform .1806s cubic-bezier(0.04, 0.04, 0.12, 0.96);}
    */
	#main, .single-post #main {display:block; margin-top:3.8rem;}
	.post > .inner {overflow:hidden; width:100vw;}
	
	.bar {text-align:center; display:block; margin:4rem 0 4.8rem;}
	.bar span {display:inline-block; width:4rem;}
	.in.about section.title .bar {text-align:center; display:block; margin:1rem 0 1rem;}
	.bar.round {text-align:center; display:block; margin:2.8rem 0;}
	.bar.round span {width:0.8rem; height:0.8rem;}
	
	/* about */
	.page > .in.about {padding-top:3.3rem;}
	
	.in.about section.title {min-height:0 !important; padding:3.6rem 0;}
	.in.about section.title h2 {font-size:1.3rem; letter-spacing:.25em;}
	.in.about section.title .in {max-width:100%;}
	.in.about section.title .bar.round {margin:1rem 0 0;}
	
	
	.in.about section#a_0 {text-align:center; padding:4rem 0rem; min-height:calc(100vh - 16rem);}
	section#a_0 .in {transform:translateY(0);}
	section#a_0 h1 {font-size:2.2rem; padding:12rem 0;}
	section.s.title .p1 p {font-size:1.8rem; padding:1rem 0;}
	
	.in.about section#a_1 {padding:8rem 0; min-height:0;}
	section.s .p1 p {font-size:1.6rem; padding:0 1.6rem 4rem; letter-spacing:.125em; font-weight:700 !important;}
	
	
	/* process */
	section .grid {display:block;}
	.in.about section .grid-item.left, .in.about section .grid-item.right {padding:0 1.6rem !important; width:100%; flex-basis:100%; border:0 !important;}
	.in.about section#a_1 .grid-item.left {border:0;}
	
	.in.about section div.p1 {margin:0 0 4rem;}
	
	.in.about section .grid-item.left h4, .in.about section#a_2 .grid-item h4 {font-size:1.4rem !important; margin:0 0 2rem !important;}
	.in.about section .grid-item.left h4::before {top:0rem; width:0.9rem; height:0.9rem; margin-right:3.2rem;}
	
	.column {display:block; vertical-align:top; margin:2.8rem 0 0;}
	section.s .column p {text-align:left; font-size:1.3rem; padding:0 0 4rem; letter-spacing:.1em;}
	
	section.s p.p-1 {font-size:1.3rem; display:inline-block; max-width:100%; letter-spacing:.075em;}
	
	.in.about section#a_2 .grid.development .grid-item.right {padding:0 1.6rem;}
	.in.about section#a_2 .grid-item {padding-right:1.6rem;}
	.in.about section#a_2 .grid-item h5 {font-size:1.4rem; margin:2rem 0 2rem;}
	.in.about section#a_2 .grid-item p {font-size:1.3rem; max-width:100%;}
	
	.in.about section#a_2 .grid.development {display:flex; flex-direction:column-reverse;}
	
	section .p-step {display:flex; justify-content:center; text-align:center; flex-wrap:wrap; width:100%; margin:6rem 0;}
	section .p-step > div {display:inline-block; width:auto; flex-basis:auto;}
	section .p-step > div i {display:inline-block; font-size:1.2rem; margin:0 1.2rem; letter-spacing:.2em; font-weight:600 !important; padding:0.4rem 1.2rem;}
	section .p-step > div.ideation {margin-left:0;}
	section .p-step > div.bar {text-align:center; display:block; margin:0.7rem 0 !important;}
	section .p-step > div.bar span {display:inline-block; width:4rem; background:var(--c2) !important; height:2px;}
	
	/* people */
	section#a_3 {text-align:center; padding:6rem 1.2rem 2rem; display:flex; flex-direction:column; justify-content:center; height:auto; background:var(--c5);}

	section#a_3 ul {display:flex; flex-wrap:wrap; width:100%;}
	
	section#a_3 ul li {display:inline-block; width:33.3333%; flex-basis:33.3333%; padding:0 0.3rem; color:#111;}
	/* section#a_3 ul li.f {width:50%; flex-basis:50%;} */
	
	section#a_3 ul li .dsc {position:relative; font-size:1rem; padding:1.2rem 0.4rem 2rem 0;}
	section#a_3 ul li .dsc p {display:block; margin:0 0 0.6rem;}
	section#a_3 ul li .dsc p.name {font-size:1.1rem; font-weight:600 !important;}
	section#a_3 ul li .dsc p.position {font-size:0.9rem;}
	section#a_3 ul li .dsc p span {letter-spacing:.1em;}
	
	/* work */
	#main #cate {display:block; width:100vw; padding:2rem 1.6rem 2.4rem; margin:0;}
	#main #cate .grid--item {padding:0 0; width:100%; flex-basis:100%; border:0 !important;}
	#main #cate .grid--item.right {display:none !important;}
	#main #cate ul {display:flex; flex-wrap:wrap; width:100%; max-width:100%; box-sizing:border-box;}
	#main #cate ul li {display:inline-block; width:50%; flex-basis:50%; margin:0;}
	
	#main #cate li a {font-size:1rem; padding:0 1.2rem; box-sizing:border-box; display:block;}
	#main #cate li a span {padding:0.6rem 0; position:relative; display:block; width:100%;}
	
	.grid.title h1 {font-size:1.6rem; line-height:1.3; letter-spacing:.2em; margin:0 0 2rem;}
    .grid.title .right h1 {font-size:1.2rem; margin:0 0 0.8rem;}
	.grid.title h1 label {padding-right:1.2rem;}
	.grid.title h1 label::after {width:0.3rem; height:0.8em; top:0.1em; background:#111; margin-left:1.2rem; margin-right:0.1rem;}
	.grid.title .right h1 .year {margin-right:1.4rem; padding-right:1.6rem;}
	
	.grid.title .category {list-style-type:none; display:flex; margin:0 0;}
	.grid.title .category li {font-size:1rem; padding-right:1rem;}
	.grid.title .category li a {margin-right:1rem;}
	.grid.title .category li::after {content:""; display:inline-block; height:0.8rem; top:0.2rem; width:1px; position:relative; margin-right:0.1rem; background:#777;}
	
	.cont .grid.title > .in {padding:1.6rem 0;}
	.info-area .grid.in.sub-info {padding:2rem 0 0.8rem;}
	.info-area .grid.in.sub-info ul {display:block;}
	.info-area .grid.in.sub-info ul li {display:block; width:100%; flex-basis:100%; font-size:1.1rem; margin:0 0 1.6rem;}
	.info-area .grid.in.sub-info ul li label {padding:0 0 0.2rem;}
	
	.m-img__wrapper, .m-img__wrapper > div {height:calc(100vh - 22rem);}
	
	
	
	.l-box .container {display:inline-block; width:calc(100% - 2.4rem); flex-basis:calc(100% - 2.4rem);;}
	.l-box .clos {position:absolute; top:0; right:0; padding:2rem; box-sizing:content-box; width:1.6rem;}
	.l-box .clos:hover {-webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg);}
	.l-box iframe {position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%;}
	.l-box .over {position:absolute; top:0; bottom:0; left:0; display:block; width:100%; height:100%; z-index:-1; opacity:0.95; background:#000;}
	
	
	/* contact */
	section#contact .crnt .grid--item.i2-3 {display:none;}
	.page section#contact {padding:0 0; min-height:0;}
	.page section#contact > .grid {display:block;}
	
	section#contact .grid--item.i3-4 {width:100%; flex-basis:100%; border-right:0; min-height:0; display:block;}
	section#contact .crnt > .grid--item {min-height:0;}

	section#contact .crnt .grid--item.i2-3 > div {display:inline-block; width:100%; flex-basis:50%; height:50%;}

	section#contact .crnt .grid--item.i1-3 {display:block; height:auto; width:100%;}
	section#contact .crnt .grid--item.i1-3 > div {display:block; width:100%;  height:auto;}
	section#contact .crnt .grid--item.i1-3 > div.info {display:none;}
	section#contact .crnt .grid--item.i1-3 > div.info span.h4 {font-size:1.3rem;}
	section#contact .crnt .grid--item.i1-3 > div.map {background:var(--c3); height:30rem;}
	section#contact .grid--item.i1-4 > a.sltd {padding:2rem 2rem 8rem !important;}

	section#contact .grid--item.i1-4 {padding:0 0; background:#fff; display:block; width:100%; height:auto;}
	section#contact .grid--item.i1-4 > div {display:block; border-bottom:1px solid var(--c4);}
	section#contact .grid--item.i1-4 > div a {display:block; width:100%; height:100%; cursor:pointer; padding:1.6rem 2rem 2rem;}
	section#contact .grid--item.i1-4 > div a.sltd span {color:#fff !important;}
	section#contact .grid--item.i1-4 > div a:hover {padding:1.2rem 3.2rem 2rem;}
	section#contact .grid--item.i1-4 > div a:hover {background:#fff;}
	section#contact .grid--item.i1-4 > div a.sltd {padding:4rem 2rem !important;}

	section#contact .grid--item span {display:block; width:100%; font-size:1.2rem; text-transform:none;}
	section#contact .grid--item span.h4 {font-size:1.2rem; letter-spacing:.1em; font-weight:600; margin:0 0 1rem; text-transform:none;}
	
	
    .i_frm.main_slide {height:calc(100vh - 4rem); overflow:hidden;}
    .i_frm.main_slide img {position:absolute; width:auto !important; height:100% !important;}
    .i_frm.main_slide p {position:absolute; top:35%; padding:0 5vw; font-size:6vw;}
    
    .box {display:inline-block; position:relative; width:50%; flex-basis:50%;}
    
    .selector {top:3.8rem; left:0; z-index:9999; display:inline-block;}
	.selector in {display:flex; width:100%;}
    .selector in a {display:block; display:inline-block; width:33.3333%; flex-basis:33.3333%; padding:0 0;}
	.selector in a span {cursor:pointer; display:inline-block; color:#111; box-sizing:border-box; text-transform:uppercase; padding:1rem 0; font-size:1rem;}
	.selector in a span::before {top:0.2rem; width:0.9rem; height:0.9rem; margin-right:0.6rem;}
	.selector in a.sltd span::before {background:var(--c2);}
    
    /* work */
    .cont .grid.title > .in, .info-area .grid.in.sub-info > .in {display:block; width:100%;}
    .cont .grid.title > .in > div.grid--item.left, .cont .grid.title > .in > div.grid--item.right, .info-area .grid.in.sub-info > .in > div.grid--item.right, .info-area .grid.in > .in > div {display:block; width:100%; padding:0 1.6rem;}
    .cont .grid.title > .in > div.grid--item.left {border-bottom:0;}
    .info-area .grid.in.sub-info > .in > div.grid--item.left {display:none;}
    .cont .grid.title.on > .in > div.grid--item.right {padding-left:1.6rem;}
	
	
    .info-area .grid.in.dsc {padding:1rem 0;}
    .info-area .grid.in > .in {display:block;  margin:0 0; width:100%; max-width:100%; padding:1.6rem 0;}
	.info-area .dsc h4 {font-size:1.6rem; margin:0 0 2.8rem; min-height:auto; line-height:1.5;}
	.info-area .dsc p {font-size:1.3rem; font-weight:400; line-height:1.7;}
	.img-area .grid {display:flex;}
	.img-area .grid-item.i1-3 {width:100%; flex-basis:100%;}
	
	/* footer */
	#footer {display:block; width:100%; padding:0 0; font-size:1.1rem;}
	#site-info {padding:1rem 1.2rem; display:flex; width:100%;}
	#site-info > p.credit {font-size:1rem;}
}
@media screen and (min-width:1px) and (max-width:649px) {
	#boxes {padding:0;}
    .box {display:inline-block; position:relative; width:100%; flex-basis:100%; height:auto; padding:0 0;}
    .box .in {border:1px solid var(--c5);}
    .box .in:hover {border-color:var(--c5);}
    .box .in > a {overflow:hidden; display:block; position:relative; width:100%; height:24rem;}
	
	.box .in > a.h4 {font-size:1.2rem; position:relative; margin:0;}
	.box .in > a.h4 > span {display:block; width:100%; padding:1rem 1.2rem 2rem; box-sizing:border-box; background:var(--c5);}
	.box .in > a.h4 span x, .box .in > a.h4 span y {display:block; position:relative; width:100%; flex-basis:100%; box-sizing:border-box; padding:0; color:#111;}
	.box .in > a.h4 span x {padding:0 0 0.8rem;}
	.box .in > a.h4 span y {font-size:1rem;}
    .box .in > a.h4 .over {display:none !important;}
	.box:hover a.h4 span x, .box:hover a.h4 span y {color:#111 !important;}
    
    .related .grid-item {display:block; width:100%; flex-basis:100%; padding:0 0.1rem 0.1rem; box-sizing:border-box;}
    .related .grid-item span.t1 {font-size:1.2rem; position:relative; background:#fff; margin:0; top:0; bottom:auto; left:0; width:100%; margin:0; padding:0; height:auto;}
    .related .grid-item span.t1 span x {padding:0 0 0.4rem;}
	.related .grid-item > a {display:flex; flex-direction:column-reverse; position:relative; height:24rem;;}
	.related h2 {font-size:1.2rem;}
    .related .grid-item span.t1 > span {background:#fff; padding:0.8rem 1.2rem 1.2rem;}
    .related .grid-item .over {display:none;}
	.related .grid-item span.t1 span y {font-size:1rem;}
    
    /* credit */
    .grid.credit {border-bottom:1px solid var(--c4); min-height:0; height:auto !important; padding:6rem 0; line-height:0;}
    .grid.credit > .in {font-size:1.2rem; line-height:1.4; width:100%; max-width:100%; text-align:left; padding:0;}

    .grid.credit > .in > div {padding:0.2rem 2rem; display:block; width:100%; text-align:center;}

    .grid.credit > .in > div.grid--item.left h4 {display:block; margin:0 0 2rem; font-size:1.4rem; text-transform:uppercase;}
    
	section#a_3 ul {display:block; text-align:center; flex-wrap:wrap; width:100%;}
	section#a_3 ul li {display:block; width:100%; padding:0; text-align:center;}
	section#a_3 ul li > div {display:inline-block; text-align:left; width:100%; max-width:100%;}
	section#a_3 ul li .dsc {font-size:1.2rem; padding:1rem 0 4rem;}
	section#a_3 ul li .dsc p {display:block; margin:0 0 0.6rem;}
	section#a_3 ul li .dsc p.name {font-size:1.4rem;}
}

@media screen and (min-width:920px) {
	.home.hd-on #header > .over {opacity:0.95;}
	.home.hd-on #search input[type=text] {border-color:#111 !important;}
	.home.hd-on #search:hover input[type=text]{border-color:#fff !important;}
	.home.hd-on #search.on input[type=text] {border-color:#fff !important; background:var(--c2); color:#fff;}
	.home.hd-on #nv ul li > a, .home.hd-on #header a#a-1 {color:#111;}
	.home.hd-on #header #logo a {width:11rem;}
	.home.hd-on #header #logo a .st0 {fill:#111;}
}

@media screen and (min-width:920px) and (max-width:1280px) {
    section#contact .grid--item.i1-4 {width:40rem; flex-basis:40rem;}
    section#contact .grid--item.i3-4 {width:calc(100% - 40rem); flex-basis:calc(100% - 40rem);}
    
    section#contact .crnt .grid--item.i2-3 {width:2rem; flex-basis:2rem;}
    section#contact .crnt .grid--item.i1-3 {width:calc(100%  - 2rem); flex-basis:calc(100%  - 2rem);}
    
    .in.about section#a_1 .grid-item.right {padding:20rem 8rem 0 2rem;}
    section.s p.p-1 {font-size:1.6rem;}
    
    .cont .grid.title > .in > div.grid--item.left {padding-left:6rem;}
    .cont .grid.title > .in > div.grid--item.right {padding-right:6rem;}
	
	#main #cate .grid--item {padding:1.2rem 2rem;}
}

@media screen and (min-width:920px) and (max-width:1480px) {
	.info-area .grid.in.sub-info > .in > div.grid--item.left {display:none;}
	.info-area .grid.in.sub-info > .in > div.grid--item.right {display:block; width:100%; flex-basis:100%; padding:0;}
	.info-area .grid.in.sub-info ul li {display:inline-block; width:calc(50%); flex-basis:calc(50%); margin:0.6rem 0; padding:0 6rem;}
}

@media screen and (min-width:1600px) {
    /* .in {max-width:144rem;} */
    .home #header #logo {left:8rem;}
    .home #header #logo a {width:12vw; max-width:24rem;}
	.home #header a#a-1 {width:calc(33.2vw - 2rem);}
    
    section#contact .crnt .grid--item.i2-3 {width:50%; flex-basis:50%;}
    section#contact .crnt .grid--item.i1-3 {width:50%; flex-basis:50%;}
    
    
	#nv ul li > a, #header a#a-1 {font-size:1.2rem;}
    .home #nv ul li > a, .home #header a#a-1 {font-size:1.2rem;}
    #main #cate li a {color:#726b6b; font-size:1.05rem;}
	
	/* about */
    .in.about section {text-align:center; padding:15vh 15%;}
	.in.about section .in {text-align:center; display:inline-block; margin:0 auto;}
	
	.in.about section#a_0 {text-align:center; padding:15vh 15%; min-height:85vh;}
	
	section#a_0 h1 {font-size:3vw;}
	.grid.title .right h1 {font-size:1.6rem;}
    /* works */
	/* .box .in > a.h4 span x {color:#fff; width:50%; flex-basis:50%;}
	.box .in > a.h4 span y {color:#fff; width:50%; flex-basis:50%;} */
    .m-img__wrapper {width:100%;}
    
    .grid.title.on h1 {font-size:1.3rem;}
	#main #cate .grid--item {padding:2rem 6rem 2rem 16rem;}
}