@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1/dist/web/static/pretendard-dynamic-subset.css");
/* @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; /*letter-spacing: -0.01rem;*/}
/* body, h1, h2 { font-family: 'Noto Sans KR', sans-serif; font-weight: 400; text-align: center; word-break: keep-all; } */
body, h1, h2 { font-family: 'Pretendard', 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 { max-width: 150px;}
.uk-logo img { width: 100%;}

.container { max-width: 1200px; margin: 0 auto; }
video { outline: none; border: none; -webkit-mask-image: -webkit-radial-gradient(white, black); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-appearance: none; }

@media (max-width: 768px) {
	html { font-size: 16px;}
	
}

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

}

/* top */
.top { background: url(https://img.vogue.co.kr/vogue/event/260209-kitkat/top-bg.jpg); background-size:auto; }
.top .top_logo { border-bottom:1px solid #fff; }
.top .bottom_logo { max-width:280px; margin:0 auto; padding:20px 0; }
.top .bottom_logo img { max-width:162px; }

/* 메인 */
.main-tit .main-img { width: auto; height: 100%;}
.main-tit .uk-position-center { width: 100%; }
.main-tit .model { width: 100% !important; height: 100% !important; margin: 0 auto; position: absolute; z-index: 9;}
.main-tit .uk-slider { min-height: 70vh; max-height: 859px;}

/* 공통 */
.container-about { max-width:850px; margin:0 auto; padding:0 20px; }

/* topic-1 */
.topic-1 { background:url(https://img.vogue.co.kr/vogue/event/260209-kitkat/topic1-bg.jpg); background-size: cover; background-position: center; padding: 3% 0 5%; overflow: hidden; }
.topic-1 .top-tit { position: relative; margin-bottom:6%; }
.topic-1 .top-tit .motion-x { position: absolute; top:0; left:0; animation: ani-x .8s infinite alternate; }
.topic-1 .product-img { max-width:700px; margin:0 auto; }
.topic-1 .bottom-txt { margin:10% 0 0; font-size:1.75rem; line-height:1.3; position: relative; }
.topic-1 .bottom-txt .red { color:#DA0014; }
.topic-1 .bottom-txt .deco-1 { position: absolute; top:-100%; right:-16%; animation: ani-y .8s infinite alternate; }
.topic-1 .bottom-txt .deco-2 { position: absolute; top:-10%; left:-21%; animation: ani-y .8s infinite alternate; animation-delay: .3s; }


/* topic-2 */
.topic-2 { background: url(https://img.vogue.co.kr/vogue/event/260209-kitkat/topic2-bg.jpg); background-size: cover; background-position: top; padding: 5% 0;}
.topic-2 .topic-btn { padding: 0 30px;}
.topic-2 .topic-btn a { display: block; background-size: contain !important; background-repeat: no-repeat !important; }
.topic-2 .topic-btn .btn-01 a { background: url("https://img.vogue.co.kr/vogue/event/260209-kitkat/nav_img_1.png");}
.topic-2 .topic-btn .btn-02 a { background: url("https://img.vogue.co.kr/vogue/event/260209-kitkat/nav_img_2.png");}
.topic-2 .topic-btn .btn-03 a { background: url("https://img.vogue.co.kr/vogue/event/260209-kitkat/nav_img_3.png");}

.topic-2 .topic-btn .btn-01.uk-active a { background: url("https://img.vogue.co.kr/vogue/event/260209-kitkat/nav_img_1_on.png");}
.topic-2 .topic-btn .btn-02.uk-active a { background: url("https://img.vogue.co.kr/vogue/event/260209-kitkat/nav_img_2_on.png");}
.topic-2 .topic-btn .btn-03.uk-active a { background: url("https://img.vogue.co.kr/vogue/event/260209-kitkat/nav_img_3_on.png");}

.topic-2 .topic-btn .btn-01 a:hover { background: url("https://img.vogue.co.kr/vogue/event/260209-kitkat/nav_img_1_on.png");}
.topic-2 .topic-btn .btn-02 a:hover { background: url("https://img.vogue.co.kr/vogue/event/260209-kitkat/nav_img_2_on.png");}
.topic-2 .topic-btn .btn-03 a:hover { background: url("https://img.vogue.co.kr/vogue/event/260209-kitkat/nav_img_3_on.png");}

/* 퀵 메뉴 */
.sticky-zone { background: #fff; z-index: 999; position: relative; }
.sticky-zone .sticky-list { position: absolute; right: 5%; width: 191px !important; padding-top: 50px; z-index:9999999;}
.sticky-zone .sticky-list li { margin-bottom: 12px; height: 191px;}
.sticky-zone .sticky-list li a { padding: 0; background-size: contain; background-repeat: no-repeat;}
.sticky-zone .sticky-list li a:hover { transition: .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/260209-kitkat/sticky_bt_1.png");}
.sticky-zone .sticky-list .btn-02 a { background: url("https://img.vogue.co.kr/vogue/event/260209-kitkat/sticky_bt_2.png");}
.sticky-zone .sticky-list .btn-03 a { background: url("https://img.vogue.co.kr/vogue/event/260209-kitkat/sticky_bt_3.png");}

.sticky-zone .sticky-list .btn-01.uk-active a { background: url("https://img.vogue.co.kr/vogue/event/260209-kitkat/sticky_bt_1_on.png");}
.sticky-zone .sticky-list .btn-02.uk-active a { background: url("https://img.vogue.co.kr/vogue/event/260209-kitkat/sticky_bt_2_on.png");}
.sticky-zone .sticky-list .btn-03.uk-active a { background: url("https://img.vogue.co.kr/vogue/event/260209-kitkat/sticky_bt_3_on.png");}

.sticky-zone .sticky-list .btn-01 a:hover { background: url("https://img.vogue.co.kr/vogue/event/260209-kitkat/sticky_bt_1_on.png");}
.sticky-zone .sticky-list .btn-02 a:hover { background: url("https://img.vogue.co.kr/vogue/event/260209-kitkat/sticky_bt_2_on.png");}
.sticky-zone .sticky-list .btn-03 a:hover { background: url("https://img.vogue.co.kr/vogue/event/260209-kitkat/sticky_bt_3_on.png");}


/* 컨텐츠 공통 */
.contents { overflow: hidden; text-align: left; }
.contents h3 { margin: 12% 0;}
.contents h3 img { margin: 0 auto; }

.contents .content-box { position: relative; margin:10% 0; text-align: left; padding: 0 30px;}
.contents .content-box .con_img { width:60%;}
.contents .content-box .con_txt { padding: 0 0 0 5%; font-size:1.275rem; line-height: 1.3; margin-bottom:15%; }
.contents .content-box .con_txt .tit { font-family: 'Montserrat', sans-serif; font-size: 2.5rem; font-weight:500; line-height: 1; margin:10px 0; }
.contents .content-box .con_txt .txt { margin:10px 0; }

.button-icon { margin:0; padding:1px 0 0; }
.button-icon > p { position: relative; width:50px; height:50px; font-size:2.4rem; margin:1px auto; background-color: #DA0014; border-radius: 50px; line-height:44px; color:#fff; }
.button-icon > p:active .button-icon > p:visited { color:#fff; }

.popup_p1 { position: absolute; width: 240px !important; height:auto; width:420px !important; }
.popup_p1 > div { width:400px; height:400px; border-radius: 50%; text-align: center; }
.popup_p1 > div > .txt-product { display:flex; flex-direction: column; max-width:300px; margin:0 auto; align-items: center; position: relative; top:12%; }
.popup_p1 > div > .txt-product > img { margin:0 0 20px; }
.popup_p1 > div > .txt-product .product_tit { margin:0 0 5px; }
.popup_p1 > div > .txt-product p { margin:0; }
.popup_p1 > div > .txt-product p > a { color:#DA0014; }
.popup_p1 > div > button { position: absolute; top:14%; right:22%; z-index: 9999; }
.popup_p1 > div > button > svg { width:20px; height:20px; color:#DA0014; }

.popup1 { position: absolute; z-index: 99999; margin:0; }
.popup1 > button { border:none; -webkit-tap-highlight-color : transparent !important; }


/* contents-1 */
#content-01 .content-box .con_txt { color:#DA0014;  }
#content-01 .wrap .content-box > div { align-items:flex-end; }
#content-01 .wrap .content-box > div:first-child { margin-bottom:10%; }

#content-01 .wrap .popup1 { top:36%; left:24%; }
#content-01 .wrap .popup1 .popup_p1 { top: -600% !important; left: -470% !important; }
#content-01 .wrap .popup1 .popup_p1 > div { padding:10px !important; }
#content-01 .wrap .popup1 .popup_p1 > div > button { float:right; }


/* contents-2 */
#content-02 { background:url(https://img.vogue.co.kr/vogue/event/260209-kitkat/contents-02-bg.jpg); background-size:cover; background-position: top; }
#content-02 .wrap { position: relative; }
#content-02 .wrap .content-box { position: relative; margin-bottom:70%; }
#content-02 .wrap .content-box > div { align-items: flex-end; }
#content-02 .wrap .content-box .product-pop { margin:10% 0 0; }
#content-02 .wrap .content-box .img { text-align: center; /*border:10px solid rgba(255, 255, 255, .5);*/ }
#content-02 .wrap .content-box .img img { width:770px; }
#content-02 .wrap .content-box .con_txt { color:#fff; margin-bottom:12%; letter-spacing: 0; }

#content-02 .wrap .popup1 { top:65%; left:41%; }
#content-02 .wrap .popup1 .popup_p1 { top: -80% !important; left: -380% !important; }
#content-02 .wrap .popup1 .popup_p1 > div { padding:10px !important; }
#content-02 .wrap .popup1 .popup_p1 > div > button { float:right; }


/* contents-3 */
#content-03 { margin-top:-44%; }
#content-03 .about-video .video { border:7px solid #8E0B0E; }


/* contents-4 */
#content-04 .wrap .content-box { margin-top:0; }
#content-04 .wrap .content-box .con_txt { color:#8E0B0E; margin-bottom:12%; letter-spacing: -0.05rem;}
#content-04 .wrap .content-box > div { align-items:flex-end; }
#content-04 .wrap .content-box > div:first-child { margin-bottom:10%; }

#content-04 .wrap .popup1 { top:22%; left:15%; }
#content-04 .wrap .popup1 .popup_p1 { top: -180% !important; left: -220% !important; }
#content-04 .wrap .popup1 .popup_p1 > div { padding:10px !important; }
#content-04 .wrap .popup1 .popup_p1 > div > button { float:right; }


/* contents-5 */
#content-05 { background:url(https://img.vogue.co.kr/vogue/event/260209-kitkat/contents-05-bg.jpg); background-size:cover; background-position: top; }
#content-05 .wrap .content-box .img-wrap { flex-direction: row; flex-wrap: wrap; max-width:960px; margin:0 auto; border:10px solid #FF91BC; }
#content-05 .wrap .content-box .img-wrap .img { width:50%; }

#content-05 .wrap .content-box .deco-wrap div { position: relative; }
#content-05 .wrap .content-box .deco-wrap .deco-1 { position: absolute; top:5%; left:0; animation: ani-y .8s infinite alternate; }
#content-05 .wrap .content-box .deco-wrap .deco-2 { position: absolute; bottom:-5%; right:-4%; animation: ani-y .8s infinite alternate; animation-delay: .3s; }


/* topic-3 */
.topic-3 .main-img { width: auto; height: 100%;}
.topic-3 .uk-position-center { width: 100%; }
.topic-3 .model { width: 100% !important; height: 100% !important; margin: 0 auto; position: absolute; z-index: 9; text-align: center;}
.topic-3 .uk-slider { min-height: 70vh; max-height: 859px;}


/* footer */
.footer { background:url(https://img.vogue.co.kr/vogue/event/260209-kitkat/footer-bg.jpg); background-size:cover; background-position: top; margin:0 auto; padding:5% 0; }
.footer .logo { max-width:1100px; margin:0 auto; }
.footer .product { margin:2% 0; }

.footer .bt_wrap { position: relative; max-width:800px; display:flex; justify-content: center; margin:0 auto; }
.footer .bt_wrap a { width:100%; max-width: 420px; background:#fff; color:#BA0018; font-size:1.5rem; padding:20px 0; }


@media (max-width: 1700px) {
	.sticky-zone .sticky-list { right:1%; }
}

@media (min-width: 1601px) {
	.sticky-zone .sticky-list { top: 0 !important;}
}

@media (max-width: 1600px) {
	.sticky-zone .sticky-list { right: 50%; width: 600px !important; padding-top: 50px; margin-right: -320px !important; margin-top: -10px !important; }
	.sticky-zone .sticky-list ul { background: #fff; padding: 5px 5px 0 5px; border-radius: 100px; margin-bottom:3%; }
	.sticky-zone .sticky-list li { display: inline-block; height:186px; }
}

@media (max-width: 1280px) {
	.main-tit .model { position: relative;}
	.main-tit .main-img { max-width: 100% !important; height: auto; }
	.main-tit .uk-slider { display: none;}
}

@media (max-width: 1200px) {

	#content-01 .wrap .popup1 { top:32%; }
	#content-02 .wrap .content-box { margin-bottom:50%; }
	#content-03 { margin-top:-50%; }
	#content-05 .content-box .deco-wrap > div > img { width:80%; }

	.footer .logo { max-width:800px; }

}

@media (max-width: 1024px) {
	.sticky-zone .sticky-list { width:390px !important; margin-right:-192px !important; }
	.sticky-zone .sticky-list a { background-size: contain !important; width: 120px; height: 120px;}
	.sticky-zone .sticky-list li { height:116px; }

	#content-01 .wrap .popup1 { top:30%; }
	#content-02 .wrap .popup1 { top:63%; }
}

@media (max-width: 820px) {

	.contents .content-box .con_txt { font-size: 0.875rem; letter-spacing: -0.008rem; }

	.topic-1 .container-about > div { margin:0 auto; }

	.topic-1 .container-about .img-p img { max-width:80%; margin:0 auto; }
	.topic-1 .container-about .img-p img:last-child { left:10%; }

	.topic-1 .container-about .bottom-txt { font-size:1.375rem; margin-top:3%; }

	.topic-1 .container-about .bottom-txt .deco-1 { top:-70%; right:-5%; }
	.topic-1 .container-about .bottom-txt .deco-2 { left:-6%; }
	.topic-1 .container-about .bottom-txt .deco-1 img, .topic-1 .container-about .bottom-txt .deco-2 img { width:60%; }

	#content-01 .wrap .popup1 .popup_p1 { top:-620% !important; left:-380% !important; }
	#content-02 .wrap .content-box .con_txt { letter-spacing: -0.032rem;}
	#content-04 .wrap .popup1 .popup_p1 { top:-380% !important; }
	#content-05 .content-box .deco-wrap > div > img { width:60%; }
	#content-05 .wrap .content-box .deco-wrap .deco-1 { left:-5%; }
	#content-05 .wrap .content-box .deco-wrap .deco-2 { right:-26%; }

	.footer .logo { width:80%; }
	.footer .bt_wrap a { max-width:350px; font-size:1.2rem; padding:14px 0; }

}

@media (max-width: 638px) {
	.uk-logo { max-width:100px; min-height: 60px;}
	
	.top .bottom_logo img { max-width:76px; }
	
	.button-icon > p { width:30px; height:30px; font-size:1.5rem; line-height:1.7rem; }
	
	.contents h3 { margin: 0 auto 15px; text-align: center; }
	.contents .content-box { margin:4% 0 0; padding:0; }
	.contents .content-box > div:first-child { flex-direction: column; margin:0 !important; }

	.contents .content-box .con_txt { padding:8% 0; margin:0 auto; font-size:0.8rem; line-height:1.5; letter-spacing: -0.01rem; }
	.contents .content-box .con_txt .tit { font-size:1.25rem; margin:0 0 10px; }
	.contents .content-box .con_txt .txt { margin:0 auto; width:100%; max-width:250px; }

	.contents .content-box .about-video { margin-left:-15px; margin-right:-15px; }

	.contents .content-box .con_img, .contents .content-box .con_txt { width:100%; }

	.popup_p1 { width:280px !important; }
	.popup_p1 > div { width:280px; height:280px; }
	.popup_p1 > div > .txt-product { top:7%; }
	.popup_p1 > div > .txt-product > img { max-width:75%; margin:0 0 10px; }
	.popup_p1 > div > .txt-product .product_tit { margin:0; }
	.popup_p1 > div > .txt-product .product_tit > img { max-width:70%; }
	.popup_p1 > div > .txt-product .link { font-size:0.875rem; }
	
	.topic-1 { padding:10% 0 0;}
	.topic-1 h1 { margin:0 auto; }
	.topic-1 .top-tit .motion-x { top:-5%; left:27%; }	

	.topic-1 .container-about { padding:0 15px; }
	.topic-1 .container-about > div { margin-bottom: 8%; }
	
	.topic-1 .container-about .bottom-txt { font-size:0.875rem; margin:8% 0 10%; }
	.topic-1 .container-about .bottom-txt .red { margin:0; }
	.topic-1 .container-about .bottom-txt .deco-1 { width:12%; top:-100%; }
	.topic-1 .container-about .bottom-txt .deco-2 { width:12%; top:-50%; left:-6%;}

	.topic-1 .container-about .bottom-txt .deco-1 img, .topic-1 .container-about .bottom-txt .deco-2 img { width:100%; }

	.topic-2 { margin:0; padding:3vh 0; }
	.topic-2 .topic-btn { padding:0; }

	.sticky-zone .sticky-list { right: 50%; width: 260px !important; padding-top: 50px; margin-right: -130px !important; }
	.sticky-zone .sticky-list ul { border-radius: 50px; margin-bottom:12px; }
	.sticky-zone .sticky-list li { height: 74px;}
	.sticky-zone .sticky-list a { background-size: contain !important; width: 80px; height: 80px;}
	.sticky-zone .sticky-list a img { width: 100%; height: 100%;}	
	
	#content-01 .wrap .popup1 { top:35%; left:40%; }
	#content-01 .wrap .popup1 .popup_p1 { top:-670% !important; left:-490% !important; }

	#content-02 .wrap .content-box { margin-top:8%; margin-bottom:70%; }
	#content-02 .wrap .content-box .con_txt { margin-bottom:0; }
	#content-02 .wrap .content-box .con_txt .txt { max-width:240px; }
	#content-02 .wrap .content-box .product-pop { margin-top:0; }
	
	#content-02 .wrap .popup1 { top:74%; }
	#content-02 .wrap .popup1 .popup_p1 { top:-150% !important; }

	#content-03 { margin-top:-65%; }
	#content-03 .wrap .content-box .about-video { margin-left:-7px !important; margin-right:-7px !important; }

	#content-04 .wrap .content-box { margin-top:14%; }
	#content-04 .wrap .content-box .con_txt { margin-bottom:0; letter-spacing: -0.01rem; }
	#content-04 .wrap .content-box .con_txt .txt { max-width:280px; }
	
	#content-04 .wrap .popup1 { left:22%; }
	#content-04 .wrap .popup1 .popup_p1 { top:-250% !important; left:-250% !important; }
	#content-04 .wrap .popup1 .popup_p1 > div > .txt-product > img { max-width:60%; padding-top:6%; }

	#content-05 .wrap .content-box { margin:15% 0 30%; }
	#content-05 .wrap .content-box .deco-wrap > div > img { width:100%; }
	#content-05 .wrap .content-box .deco-wrap .deco-1 { width:18%; top:-10%; left:-5%; }
	#content-05 .wrap .content-box .deco-wrap .deco-2 { width:34%; bottom:-3%; right:-10%; }

	.topic-3 .model { position: relative;}
	.topic-3 .main-img { max-width: 100% !important; height: auto; }
	.topic-3 .uk-slider { display: none;}

	.footer { padding:10% 0 12%; }
	.footer .logo { width:100%; }
	.footer .product { width:35%; margin:0 auto; padding:5% 0; }
	.footer .bt_wrap a { max-width:280px; padding:8px 0; font-size:1.2rem; }

	
}

@media (max-width: 520px) {
	.topic-1 .top-tit .motion-x { left:24%; }
}

@media (max-width: 430px) {
	.topic-1 .top-tit .motion-x { left:20%; }
}

@media (max-width: 390px) {
	.topic-1 .top-tit .motion-x { left:15%; }
}


/* 모션 */
@keyframes ani-x{
	0%{transform:translate(-5px,0);}
	100%{transform:translate(5px,0);}
}

@keyframes ani-y{
	0%{transform:translate(0,0);}
	100%{transform:translate(0,20px);}
}

/* video */
#main_video figure { margin:0; }
#main_video video.video-js { display: none; }
.video-js	{ width:100%; height:100%; max-width: 100%; }
.vjs-tech	{ position:relative !important; max-height:960px; /*margin-bottom: -2px;*/ }
.vjs-fullscreen .vjs-tech { max-height: none; }
.vjs-poster img { max-height:none !important; }
.video-js .vjs-big-play-button { border: 0 !important; background-color: #000 !important; }
.video-js .vjs-control-bar { background: transparent !important; bottom: 0.5rem !important; }
.video-js .vjs-control-bar::before { content: ''; height: 6em; background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%); width: 100%; position: absolute; bottom: -0.5rem; }