@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');

html { font-size: 16px; color: #000; }
body, h1, h2 { font-family: 'Roboto Condensed','Noto Sans KR', sans-serif; font-weight: 300; text-align: center; color: #000; word-break: keep-all; }

.br-m { display: none;}
.br-p { display:block;}
.img-m { display: none;}
.img-p { display: block;}
.uk-section { position: relative; overflow: hidden;}

.uk-logo { width: 150px;}
.uk-logo img { width: 100%;}

.main-tit { padding-top: 0; padding-bottom: 0; background: #c0b59e; background: url("https://img.vogue.co.kr/vogue/event/220114-mojosphine/intro-bg.jpg"); background-size: cover;}
.main-tit .uk-position-center { width: 100%;}
.main-tit .title-logo { height: auto; margin: 10% auto 0; }
.main-tit p { color: #fff; font-size: 1.5rem;}
.main-tit .title-bg { width: auto !important; height: 100% !important; }
.main-tit .brand-logo img { max-width: 300px;}

footer { background-color: #000; position: absolute; width: 100%; }
footer .uk-logo { min-height: auto;}
footer p, footer p a { font-size: 11px !important; font-weight: 300; color: #7f7f7f !important; margin: 10px 5px;}



@media (max-width: 1024px) {
	.img-m { display: block; text-align: }
	.img-p { display: none;}
}

@media (max-width: 638px) {
	html { font-size: 13px;}
	h1 { font-size: 30px !important;}
	h2 { font-size: 22px !important;}
	.br-m { display:block;}
	.br-p { display:none;}

}


/* 커스텀 */
:root {
  --scroll: 0;
  --content: 0;
}

.side-txt .uk-position-center-left { position: fixed !important; z-index: 1000; left: 0; }
.side-txt .uk-position-center-right { position: fixed !important; z-index: 1000; right: 0; }
.side-txt p { margin: 0 15px;}
.side-txt img { width: 30px;}

.caption { display: none; /* text-align: right; font-size: 0.7rem; color: #959595; padding: 10px; margin: 0;*/}

.uk-lightbox-toolbar.uk-position-bottom { padding-top: 20px; padding-bottom: 50px;}

.sticky-zone { top: 0; overflow: hidden;}
.sticky-zone .sticky-pc { display: block;}
.sticky-zone .sticky-m { display: none;}
.sticky-zone .sticky-back { z-index: 0; position: relative;}
.sticky-zone .txt-box { text-align: left; margin: 10%; position: absolute; z-index: 10;}
.sticky-zone .txt-box h2 { text-align: left; margin-bottom: 5%;}
.sticky-zone .txt-box p { font-size: 1.5rem; padding-right: 10%;}
.sticky-zone .txt-box-bg p { background: #eee9e0; height: 100vh; margin-top: 13%; position: absolute; z-index: 1;}

.sticky-zone .photo-box { margin-bottom: 10%;}
.sticky-zone .photo { width: 100%; position: relative; }
.sticky-zone .photo div { position: absolute; width: 22%; }
.sticky-zone .photo .caption { padding-right: 0;}
.sticky-zone .photo-01 div { right: 10%; margin-top: -20%; }
.sticky-zone .photo-02 div { margin-left: 42%; }
.sticky-zone .photo-03 div { right: 0; margin-top: 20%;}
/*iframe { width: 100%; height: 100vh;}
iframe.uk-sticky-fixed { top: 0 !important;}*/

.full-video { background-image: url("https://img.vogue.co.kr/vogue/event/220114-mojosphine/background_1.jpg"); background-position: center; background-size: cover; height: 100vh;}
.full-video div { height: 100%;}

.half-slide { top: 0; }
.half-slide-pc { display: block;}
.half-slide-m { display: none;}
.half-slide .sticky-back { z-index: 0; position: relative;}
.half-slide.half-slide-pc .sticky-back { background-image: url("https://img.vogue.co.kr/vogue/event/220114-mojosphine/slide-bg.jpg"); background-position: center; background-size: cover; }
.half-slide .slide-bg { width: auto !important; height: 100% !important; position: absolute; z-index: 0; bottom: 0; display: none; }
.half-slide .caption { position: absolute; bottom: 0; color: #f2eee4; width: 49%;}
.half-slide .photo-m { visibility: hidden;}
.half-slide .photo-pc { visibility: visible;}
.half-slide .photo { width: 100%; }
.half-slide .photo div { position: absolute; width: 25%; }
.half-slide .photo .caption { right: 0;}
.half-slide .photo-1 { right: 10%; }
.half-slide .photo-2 { right: 10%; opacity: calc((var(--content) - 38) * 0.5);}

.concept-1 { background-color: #cac3af; background-image: url("https://img.vogue.co.kr/vogue/event/220114-mojosphine/concept1-bg.jpg"); height: 100vh; background-position: right; background-size: contain; background-repeat: no-repeat;}
.concept-1 div { height: 100%;}
.concept-1 p { font-size: 1.5rem; text-align: left;}

.concept-2 { background-color: #cac3af; text-align: left;}
.concept-2 .caption { position: absolute; bottom: 0; right: 0; z-index: 10; color: #f2eee4;}
.concept-2 .concept-left { position: relative;}
.concept-2 .concept-left img { margin-top: -20%;} 
.concept-2 .concept-left .caption { margin-right: 4%; }
.concept-2 .concept-right .photo { position: relative;}
.concept-2 .concept-right .txt { margin: 7% 0 0 7%;}
.concept-2 .concept-right .txt p { width: 100%; font-size: 1.3rem;}


.full-slide { background-image: url("https://img.vogue.co.kr/vogue/event/220114-mojosphine/background_2.jpg"); background-position: bottom; background-size: cover; }
.full-slide h2 img { max-width: 360px;}
.full-slide .caption { position: absolute; bottom: 0; right: 43px; width: 60%; z-index: 10; color: #f2eee4;}
.full-slide .uk-grid { margin-left: 0;}

.look-list { background: #fff;}
.look-list .uk-grid { margin-right: -15px;}
.look-list .uk-grid > div { margin: 1% 0;
    padding: 0 1%;}
.look-list .img-13410 { background: url(https://img.vogue.co.kr/vogue/event/220114-mojosphine/1015/13410.jpg); background-size: cover; display: block; height: 100%;}
.look-list .img-13918 { background: url(https://img.vogue.co.kr/vogue/event/220114-mojosphine/1015/13918.jpg); background-size: cover; display: block; height: 100%;}
.look-list .img-13410 img, .look-list .img-13918 img { visibility: hidden;}
.look-list .uk-button { font-size: 1.2rem; border: 1px solid #000; color: #000; padding: 10px 20px; margin-top: 30px;}


@media (max-width: 1530px) {
	.half-slide .sticky-back { background-size: cover;}
	.full-video .uk-container { max-width: 85%;}
	.concept-1 { background-size: cover; background-position: center; }
	.concept-1 .uk-container-large { max-width: 85%;}
	.look-list .uk-container { max-width: 85%;}
}
@media (max-width: 1200px) {
	html { font-size: 14px;}
}
@media (max-width: 1024px) {
	.main-tit .title-logo { max-width: 85%;}	
	.sticky-zone .txt-box { margin: 20% 10%;}
	.sticky-zone .txt-box-bg p { margin-top: 25%; width: 50%; min-width: 460px; }
	.full-video { height: auto; padding: 20% 0; z-index: 9999;}
	
	.full-slide { padding: 10% 0;}
}
@media (max-width: 959px) {
	html { font-size: 12px;}	
	.half-slide .photo-2 { opacity: calc((var(--content) - 20) * 0.5);}
	.full-slide { background-size: 150%;}
	.look-list .img-13410 img, .look-list .img-13918 img { visibility:visible;}
	/*.look-list .uk-grid > div { margin-top: 4%;}*/
}
@media (max-width: 768px) {
	.main-tit { max-height: 700px;}
	.main-tit .title-logo { margin: 18% auto 0; }
	.main-tit .title-bg { margin-left: -10%; max-height: 700px;}
	.main-tit .brand-logo { display: none;}
	.sticky-zone .sticky-pc { display: none;}
	.sticky-zone .sticky-m { display: block;}
	.sticky-zone .photo-box { margin-bottom: 20%;}
	.sticky-zone .photo div { width: 35%; }
	.sticky-zone .photo .caption { padding-right: 0;}
	.sticky-zone .photo-01 div { right: 10%; margin-top: -20%; }
	.sticky-zone .photo-02 div { margin-left: 17%; }
	.sticky-zone .photo-03 div { right: 0; margin-top: 44%;}
	
	.half-slide-pc { display: none;}
	.half-slide-m { display: block;}
	.half-slide-m-top { position: relative; }
	.half-slide { background: #e1d6c2;}
	.half-slide .sticky-back { background-image: url(https://img.vogue.co.kr/vogue/event/220114-mojosphine/slide-bg-m2.jpg); background-position: center; background-size: cover;}
	.half-slide .photo div { width: 50%; left: 27%;}
	.half-slide .photo-2 { opacity: calc((var(--content) - 30) * 0.5);}
	.concept-1 { max-height: 700px;}
}
@media (max-width: 639px) {
	.caption { font-size: 11px;}
	.side-txt { display: none;}
	.main-tit { max-height: 600px;}
	.main-tit .title-bg { margin-left: -10%; max-height: 600px;}
	.sticky-zone .photo div { width: 43%; }
	.sticky-zone .photo-01 div { right: 7%; margin-top: -20%; }
	.sticky-zone .photo-02 div { margin-left: 5%; margin-top: 25%; }
	.sticky-zone .photo-03 div { right: 0; margin-top: 80%; }
	.full-video { height: 400px;}
	.full-video .uk-container { position: absolute; width: 100%; height: 400px; top: 0; z-index: 999;  min-width: 100%; left: 0; padding: 0;}
	.full-video .uk-container .uk-flex iframe { /*max-width: 90%;*/ margin: 0 auto; background-image: url(https://img.vogue.co.kr/vogue/event/220114-mojosphine/background_1.jpg); background-position: center; background-size: cover; padding: 10% 5%; min-height: 400px;}
	/*.half-slide { background: #e1d6c2;}
	.half-slide .sticky-back { background-size: auto 600px; background-repeat: no-repeat;}
	.half-slide .photo-m { padding-top: 70%;}*/
	.half-slide .photo div { width: 80%; left: 10%;}
	.half-slide .photo-2 { opacity: calc((var(--content) - 35) * 0.5);}
	.concept-1 { max-height: 600px;}
	.concept-1 p { background-color:rgba(255,255,255,0.80); padding: 30px 15px; text-align: center;}
	.concept-2 .photo { text-align: right;}
	.concept-2 img { max-width: 100%;}
	.concept-2 .photo img { max-width: 80%;}
	.concept-2 .caption { position: relative;}
	.concept-2 .concept-left .caption { text-align: left;  width: 60%;}
	.concept-2 .concept-right .caption { padding-right: 0; padding-left: 40%; }
	.concept-2 .concept-right .txt { margin-bottom: 15%;}
}