@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 { background: #fff; padding: 0; margin: 0; font-size: 18px; line-height: 1.6rem; color: #000; }
body, h1, h2 { /*font-family: 'Roboto Condensed','Noto Sans KR', sans-serif;*/ font-family: 'Noto Sans KR', sans-serif; font-weight: 400; text-align: center; 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-box { padding-top: 0;}
/*.main-tit .title-logo { width: 50%; height: auto; margin: 0 auto; }
.main-tit p { color: #d2d2d2;}*/

footer { background-color: #000; position: absolute; width: 100%; z-index: 9999; }
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: 768px) {
	html { font-size: 15px;}
	
}

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

}


/* 커스텀 */
.intro-1 .main-photo { max-width: 1440px; margin: 0 auto;}
.intro-1 .main-photo img { position: relative; z-index: 1; padding: 70px;}
.intro-1 .main-photo .bg-01 { background-color: #e5db94; width: 20%; height: 70%; }
.intro-1 .main-photo .bg-02 { background-color: #bebebe; width: 45%; height: 70%; }
.intro-1 .main-photo .bg-03 { background-color: #f391c2; width: 20%; height: 70%; }
.intro-1 .main-photo .bg-04 { background-color: #f3d27b; width: 50%; height: 70%; }

.intro-1 h1 { margin: 7vh 30px;}
.intro-1 iframe { max-width: 1300px !important; width: 100%;}

.intro-1 .sub-tit { font-size: 1.8rem; font-weight: 600;}
.intro-1 .sub-txt { font-size: 1.4rem; line-height: 2rem; margin: 0 30px 10vh 30px;}

.intro-2 { background:#f7f5e0; padding: 10vh 0; margin-top: 10vh; }
.intro-2 p { font-size: 1.2rem; margin: 0 30px;}
.intro-2 h1 { font-size: 3.5rem; color: #fff; font-weight: 500;}
.intro-2 h2 { margin-left: 30px; margin-right: 30px;}
.intro-2 .intro-btn { max-width: 1000px; margin: 0 auto; padding: 0 30px;}
.intro-2 .intro-btn a { display: block; background-size: contain !important; background-repeat: no-repeat !important; }
.intro-2 .intro-btn a:hover { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-big-shadow.png"); background-position: center; background-size: contain; background-repeat: no-repeat; transition: background .3s ease-in-out;}
.intro-2 .intro-btn .btn-01 a { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-big-01.png");}
.intro-2 .intro-btn .btn-02 a { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-big-02.png");}
.intro-2 .intro-btn .btn-03 a { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-big-03.png");}
.intro-2 .intro-btn .btn-04 a { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-big-04.png");}
.intro-2 .intro-btn .btn-01.uk-active a { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-big-01-on.png");}
.intro-2 .intro-btn .btn-02.uk-active a { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-big-02-on.png");}
.intro-2 .intro-btn .btn-03.uk-active a { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-big-03-on.png");}
.intro-2 .intro-btn .btn-04.uk-active a { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-big-04-on.png");}

.intro-2 .intro-btn .btn-01 a:hover { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-big-01-on.png");}
.intro-2 .intro-btn .btn-02 a:hover { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-big-02-on.png");}
.intro-2 .intro-btn .btn-03 a:hover { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-big-03-on.png");}
.intro-2 .intro-btn .btn-04 a:hover { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-big-04-on.png");}

.sticky-zone { background: #fff; z-index: 999; position: relative; }
.sticky-zone .sticky-list { position: absolute; right: 5%; width: 121px !important; padding-top: 50px; }
.sticky-zone .sticky-list li { margin-bottom: 5px; height: 121px;}
.sticky-zone .sticky-list li a { padding: 0; background-size: contain; background-repeat: no-repeat;}
.sticky-zone .sticky-list li a:hover { transition: background .3s ease-in-out;}
.sticky-zone .uk-sticky-placeholder { height: 0 !important;}
.sticky-zone .sticky-list .btn-01 a { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-01-off.png");}
.sticky-zone .sticky-list .btn-02 a { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-02-off.png");}
.sticky-zone .sticky-list .btn-03 a { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-03-off.png");}
.sticky-zone .sticky-list .btn-04 a { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-04-off.png");}
.sticky-zone .sticky-list .btn-01.uk-active a { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-01-on.png");}
.sticky-zone .sticky-list .btn-02.uk-active a { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-02-on.png");}
.sticky-zone .sticky-list .btn-03.uk-active a { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-03-on.png");}
.sticky-zone .sticky-list .btn-04.uk-active a { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-04-on.png");}

.sticky-zone .sticky-list .btn-01 a:hover { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-01-on.png");}
.sticky-zone .sticky-list .btn-02 a:hover { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-02-on.png");}
.sticky-zone .sticky-list .btn-03 a:hover { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-03-on.png");}
.sticky-zone .sticky-list .btn-04 a:hover { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/link-04-on.png");}

.contents { overflow: hidden; text-align: left; }
.contents h3 { text-align: center; margin: 10vh 0;}
.contents h3 img { margin: 0 auto;}

.contents .content-box { margin-top: 35vh; text-align: center; padding-bottom: 1vh; padding: 0 30px 1vh;}
.contents .content-box video { max-width: 860px; width: 100%; border: 10px solid #fff; margin-top: -25vh;}
.contents .content-box .content-story { margin: 10vh auto; max-width: 1300px; }
.contents .content-box .content-story .img-01 { margin-bottom: 5vh;}
.contents .content-box .content-story .img-03 { margin-top: 5vh; margin-right: -30px; padding-right: 0; text-align: left;}
.contents .content-box .content-story .caption { text-align: left; color:#656565; font-size: 0.8rem; line-height: 1.2rem; margin-top: -1vh; }

#content-01 .content-box { background: #f7f5e0; }
#content-02 .content-box { background: #e7e7e7; }
#content-03 .content-box { background: #f9cce2; }
#content-04 .content-box { background: #ffe7b5; }

.info { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/info-bg3.jpg"); background-position: center; background-repeat:repeat-y;}
.info .info-tit { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/info-bg2.jpg"); background-position: center; background-repeat: no-repeat;}
.info .info-con { background: #2f2877; padding: 10vh 30px;  }
.info .info-con > div { max-width: 1000px; margin: 0 auto;}
.info .info-con img { max-width: 322px; width: 100%;}

.event { background: url("https://img.vogue.co.kr/vogue/event/220728-acuvue/event-bg.jpg"); box-shadow: 0 15px 15px -15px rgba(0,0,0,0.30) inset; padding: 10vh 30px; }
.event .event-wrap { border: 15px solid #6f81e8; border-radius: 420px 420px 0 0; max-width: 800px; background: #fff; margin: 0 auto; box-shadow: 0 15px 15px 0 rgba(0,0,0,0.30); }
.event .event-wrap .event-1 { padding: 10vh 30px; color: #2f2877; font-size: 1.2rem; line-height: 2rem; }
.event .event-wrap .event-1 p { margin-bottom: -10px;}
.event .event-wrap .event-1 img { margin: 40px 0 0 0;}
.event .event-wrap .event-info { text-align: left; font-size: 1rem; padding: 20px; border-bottom: 1px solid #d2d2d2; border-top: 1px solid #d2d2d2; max-width: 410px; margin: 0 auto;}
.event .event-wrap .event-info p { display:flex; }
.event .event-wrap .event-info p span { width: 35%; font-weight: 500;}
.event .event-wrap .event-btn { margin-top: 40px;}
.event .event-wrap .event-btn a { background: #2f2877; border-radius: 30px; color: #fff; text-decoration: none; padding: 10px 30px; display: block; margin: 5px auto; max-width: 250px; display: inline-block; }

.review p { max-width: 800px; margin: 10vh auto; font-size: 0.8rem; padding: 0 30px;}

@media (min-width: 1401px) {
	.sticky-zone .sticky-list { top: 0 !important;}
}
@media (max-width: 1400px) {
	/*.sticky-zone .sticky-list { display: none;}*/
	.sticky-zone .sticky-list { right: 50%; width: 510px !important; padding-top: 50px; margin-right: -255px !important; margin-top: -10px !important; }
	.sticky-zone .sticky-list ul { background: #fff; padding: 5px 5px 0 5px; border-radius: 65px 65px;}
	.sticky-zone .sticky-list li { display: inline-block;}
	
	#content-04 .content-box { padding-bottom: 70px;}
}
@media (max-width: 768px) {
	.intro-1 { margin-top: 40px;}
	.intro-1 .main-photo img { padding: 1.5rem 1rem;}
	.intro-1 .main-photo .bg-01, .intro-1 .main-photo .bg-02, .intro-1 .main-photo .bg-03, .intro-1 .main-photo .bg-04 { height: 50%; }
	
	.contents h3 { margin: 5vh -5vh 5vh 0;}
	.contents .content-box { margin-top: 30vw; }
	.contents .content-box video { margin-top: -25vw;}
	.contents .content-box .content-story { margin: 5vh 30px 5vh -30px;}
	
	#content-04 .content-box { padding-bottom: 100px;}
	
	.info .info-tit { background-size: cover; }
	.info .info-tit img { padding-right: 20px;}
	
	.event .event-wrap { border: 10px solid #6f81e8;}
	
	.review p { margin: 10vw 0;}
	

}
@media (max-width: 638px) {
	.uk-logo { min-height: 60px;}
	
	.intro-1 h1 { margin: 10vw 30px 30px }
	.intro-1 .sub-tit { font-size: 1.4rem; margin-bottom: 10px;}
	.intro-1 .sub-txt { font-size: 1.2rem; margin: 0 30px 10vw 30px; line-height: 1.6rem;}
	
	.intro-2 { padding: 15vw 0; margin-top: 15vw;}
	.intro-2 h2 img { width: 80%;}
	
	.sticky-zone .sticky-list { right: 50%; width: 260px !important; padding-top: 50px; margin-right: -130px !important; }
	.sticky-zone .sticky-list ul { border-radius: 35px 35px;}
	.sticky-zone .sticky-list li { height: 60px;}
	.sticky-zone .sticky-list a { background-size: contain !important; width: 60px; height: 60px;}
	.sticky-zone .sticky-list a img { width: 100%; height: 100%;}
	
	.contents h3 { margin: 0 0 10vw 0;}

	.contents .content-box .content-story { margin: 10vw 0;}
	.contents .content-box .content-story .img-top { padding-left: 0; padding-right: 30%;}
	.contents .content-box .content-story .img-03 { padding-left: 0;}
	.contents .content-box video { border: 0;}
	
	.info .info-tit img { padding: 0;}
	.info .info-con { padding-top: 0; padding-bottom: 10vw}
	.info .info-con img { max-width: none; padding: 0; margin: 0 0 5px 0;}
	
	.event { padding: 10vw 10px;}
	.event .event-wrap { border: 5px solid #6f81e8;}
	.event .event-wrap .event-1 h2 img { width: 70%;}
	.event .event-wrap .event-1 p { line-height: 1.6rem;}
	.event .event-wrap .event-info { padding: 20px 0;}
	.event .event-wrap .event-info p { margin: 0;}
	.event .event-wrap .event-btn a { width: 180px;}

}