@charset "utf-8";

/*
 * File       : sub-style.css
 * Author     : STUDIO-JT (Chaehee)
 * Guideline  : JTstyle.2.0
 *
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 1) 
 * 2) 
 */

 

/* **************************************** *
 * ARCHITECTURE
 * **************************************** */
body.page-template-style-architecture .main-container { padding-top: 0; }

.archt-intro { padding-top: 200rem; }
.archt-intro__section { position: relative; width: 100%; margin-top: 400rem; }
.archt-intro__section:first-child { margin-top: 0; }
.archt-intro__section:after { content: ''; display: table; clear: both; }
.archt-intro__img--primary { float: left; width: 552rem; }
.archt-intro__img--primary figure { padding-top: 147.28%; }
.archt-intro__img--secondary { float: right; width: 552rem; margin-top: 610rem; }
.archt-intro__img--secondary figure { padding-top: 112.32%; }
.archt-intro__img--tertiary { float: left; width: 552rem; margin-top: 460rem; }
.archt-intro__img--tertiary figure { padding-top: 147.28%; }
.archt-intro__img--quaternary { float: right; width: 708rem; margin-top: 200rem; }
.archt-intro__img--quaternary figure { padding-top: 52.82%; }
.archt-intro__content { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 10; display: table; opacity: 0; visibility: hidden; }
.archt-intro__content-inner { display: table-cell; vertical-align: middle; text-align: center; }
.archt-intro__img { overflow: hidden; }
.archt-intro__img img { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform 1.2s cubic-bezier(0.32, 0.6, 0.46, 1); transition: -webkit-transform 1.2s cubic-bezier(0.32, 0.6, 0.46, 1); transition: transform 1.2s cubic-bezier(0.32, 0.6, 0.46, 1); transition: transform 1.2s cubic-bezier(0.32, 0.6, 0.46, 1), -webkit-transform 1.2s cubic-bezier(0.32, 0.6, 0.46, 1); }
.archt-intro__img.animate img { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

.archt-concept { text-align: center; padding-top: 300rem; }
.archt-concept h3 { margin-top: 50rem; }
.archt-concept p { margin-top: 20rem; }
.archt-concept__wave { margin-top: 112rem; margin-bottom: -10rem; white-space: nowrap; font-size: 0; overflow: hidden; }
.archt-concept__wave-inner { display: inline-block; vertical-align: top; width: auto; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-duration: 60s; animation-duration: 60s;-webkit-animation-name: Marquee;animation-name: Marquee; padding: 10rem 0; }
.archt-concept__wave-inner svg { max-width: 100%; height: auto; overflow: visible; }
.archt-concept__wave.archt-concept__wave--load .archt-concept__wave-inner {animation: none;}

.archt-vision { text-align: center; padding-top: 300rem; }
.archt-vision__diagram { font-size: 0; margin-top: 80rem; }
.archt-vision__diagram > li { position: relative; display: inline-block; vertical-align: top; width: 482rem; margin: 0 -18rem; -webkit-transition: .6s cubic-bezier(0.32, 0.6, 0.46, 1); transition: .6s cubic-bezier(0.32, 0.6, 0.46, 1); }
.archt-vision__diagram > li:before { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #000; border-radius: 50%; z-index: -1;}
.archt-vision__diagram > li > div { position: relative; width: 100%; padding-top: 100%; background: #fff; border-radius: 50%; mix-blend-mode: exclusion;}
.archt-vision__diagram > li > div span { position: absolute; top: 50%; left: 0; width: 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #020A0A; opacity: 0; -webkit-transition: .4s; transition: .4s; -webkit-transition-delay: .3s; transition-delay: .3s; }
.archt-vision__diagram > li:first-child { left: -100rem; }
.archt-vision__diagram > li:first-child.animate { left: 0; }
.archt-vision__diagram > li:last-child { right: -100rem; }
.archt-vision__diagram > li:last-child.animate { right: 0; }
.archt-vision__diagram > li.animate > div span { opacity: 1; }

.archt-bottom { position: relative; margin-top: 228rem; padding: 381rem 0 430rem; overflow: hidden; }
.archt-bottom__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/sub/style/archt-bottom-bg.png) no-repeat; background-size: cover; background-position: center top; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-transform-origin: center top; -ms-transform-origin: center top; transform-origin: center top; -webkit-transition: -webkit-transform 1.2s cubic-bezier(0.32, 0.6, 0.46, 1); transition: -webkit-transform 1.2s cubic-bezier(0.32, 0.6, 0.46, 1); transition: transform 1.2s cubic-bezier(0.32, 0.6, 0.46, 1); transition: transform 1.2s cubic-bezier(0.32, 0.6, 0.46, 1), -webkit-transform 1.2s cubic-bezier(0.32, 0.6, 0.46, 1); }
.archt-bottom:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: -webkit-gradient(linear, left top, left bottom, from(rgba(2,10,10,0)), color-stop(80%, rgba(2,10,10,0.9)), to(rgba(2,10,10,1))); background: -webkit-linear-gradient(rgba(2,10,10,0) 0%, rgba(2,10,10,0.9) 80%, rgba(2,10,10,1) 100%); background: linear-gradient(rgba(2,10,10,0) 0%, rgba(2,10,10,0.9) 80%, rgba(2,10,10,1) 100%); }
.archt-bottom .jt-marquee-wrap { position: relative; z-index: 1; }
.archt-bottom.animate .archt-bottom__bg { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}



/* **************************************** *
 * LANDSCAPE
 * **************************************** */
body.page-template-style-landscape .main-container { padding-top: 0; }
body.page-template-style-landscape .article-visual { overflow: visible; }
body.page-template-style-landscape .article-visual__bg { height: 1430rem; }
body.page-template-style-landscape .article-visual:after { display: none; }

.landscape-section__content-inner { position: relative; padding-top: 360rem; padding-bottom: 120rem; padding-left: 151rem; }
.landscape-section__bg { width: 100%; height: 586rem; background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; }
.landscape-section--01 .landscape-section__content { padding-top: 200rem; }
.landscape-section--01 .landscape-section__content-inner { padding-top: 0; }
.landscape-section--01 .landscape-section__content-inner p { position: relative; top: -6rem; margin-bottom: -6rem; }
.landscape-section--01 .landscape-section__bg { background-image: url(../images/sub/style/landscape-bg-01-v2.jpg); }
.landscape-section--02 .landscape-section__bg { background-image: url(../images/sub/style/landscape-bg-02-v2.jpg); }
.landscape-section--03 .landscape-section__bg { background-image: url(../images/sub/style/landscape-bg-03-v3.jpg); }

html.ios .landscape-section__bg { background-attachment: inherit; }



/* **************************************** *
 * AMENITY
 * **************************************** */
body.page-template-style-amenity .main-container { padding-top: 0; }

.amenity-info-group:first-child { margin-top: 200rem; }
.amenity-info-group:not(:first-child) { margin-top: 160rem; }
.amenity-info-group + .jt-marquee-wrap { margin-top: 160rem; }
.amenity-info { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 300rem -36rem 0; }
.amenity-info:first-child { margin-top: 0; }
.amenity-info > div { width: 50%; margin: 0 36rem; }
.amenity-info__img figure { padding-top: 107.3%; }
.amenity-info:nth-child(odd) .amenity-info__txt p { margin-left: 120rem; }
.amenity-info__img { overflow: hidden; }
.amenity-info__img img { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transition: -webkit-transform 1.2s cubic-bezier(0.32, 0.6, 0.46, 1); transition: -webkit-transform 1.2s cubic-bezier(0.32, 0.6, 0.46, 1); transition: transform 1.2s cubic-bezier(0.32, 0.6, 0.46, 1); transition: transform 1.2s cubic-bezier(0.32, 0.6, 0.46, 1), -webkit-transform 1.2s cubic-bezier(0.32, 0.6, 0.46, 1); }
.amenity-info__img.animate img { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }



/* **************************************** *
 * SERVICE
 * **************************************** */
body.page-template-style-service .main-container { padding-top: 0; }

.service-list { margin-top: 200rem; width: 100%; text-align: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; border-top: 20rem solid #fff; }
.service-list__item { width: 33.33%; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 325rem; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; border-bottom: 20rem solid #fff; padding: 0 10rem; }
.service-list__item:after { content: ''; display: block; width: 20rem; height: calc(100% + 2rem); background: #fff; position: absolute; top: -1rem; right: -10rem; }
.service-list__item:nth-child(-n+3) { padding-left: 0; }
.service-list__item:nth-last-child(-n+3) { padding-right: 0; }
.service-list__item:nth-last-child(-n+3):after { display: none;}
.service-list__item:nth-child(2) { order: 4; }
.service-list__item:nth-child(3) { order: 7; }
.service-list__item:nth-child(4) { order: 8; }
.service-list__item:nth-child(5) { order: 2; }
.service-list__item:nth-child(6) { order: 5; }
.service-list__item:nth-child(7) { order: 3; }
.service-list__item:nth-child(8) { order: 6; }
.service-list__item:nth-child(8) .service-list__img { -webkit-filter: blur(20rem); filter: blur(20rem); }
html.safari .service-list__item:nth-child(8) .service-list__img {-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
html.ios .service-list__item:nth-child(8) .service-list__img { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.service-list__item:nth-child(9) {order: 9}
.service-list__img { font-size: 0; }