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

html { font-size: 1.25rem; color: #000; max-width:1920px; margin:0 auto; background-color: #f2f2f2;}
body, h1, h2 { font-family: 'Noto Sans KR', 'Roboto', sans-serif; font-weight: 400; text-align: center; color: #000; word-break: keep-all; letter-spacing: -0.01rem;}

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

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

.main-tit { padding-top: 0; padding-bottom: 0;}
.main-tit .title-logo { width: 100%; max-width: 900px; height: auto; margin: 0 auto;}
.main-tit p { color: #fff; line-height: 1.5em;}

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) {
	.video-m { display:block;}
	.video-p { display:none;}	
	.br-m { display:block;}
	.br-p { display:none;}
}

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

/* 커스텀 */
.nav-vogue { background: #fff6f6;}
.nav-vogue > div { max-width: 100%; border-bottom: 1px solid #434924; margin: 0 auto; }

.button-icon > p { position: relative; width:50px; height:50px; color:#b891d7; font-size:2.4rem; margin:1px auto; background-color: #000; border-radius: 50px; line-height:45px; }
.button-icon > p:hover { color:#fff; transition: all .5s; }
.button-icon > p:active .button-icon > p:visited { color:#fff; }

.button-icon > button { position: relative; width:50px; height:50px; color:#b891d7; font-size:2.4rem; background-color: #000; border-radius: 50px; line-height:45px; padding:0; margin:0 auto; border:none; } 
.button-icon > button:hover, .button-icon > button:focus { color:#fff; background-color: #000; transition: all .5s; }
.button-icon > button:active .button-icon > button:visited { color:#fff;  }
.button-icon > button > p { margin:0; height:50px; }

.popup > div:nth-child(1) { width:280px; }
.popup > div:nth-child(1) > button > svg { float:right; }
.popup .txt-product { color:#000; }
.popup .txt-product > img { margin-top:5%; }
.popup .txt-product .txt-product-tit { margin:0; font-size:0.75rem; font-weight:400; }
.popup .txt-product .txt-product-name { margin:0; font-size:1rem; font-weight:600; }
.popup .txt-product .txt-product-price { margin:1% 0 0; font-size:1.25rem; color:#126a9c; }
.popup .txt-product .txt-product-link { margin:0 0 2%; }
.popup .txt-product .txt-product-link > a { font-size: 0.85rem; letter-spacing: -0.03rem; color:#126a9c; }

.link-wrap .link > a { display: block; height:100%; color:transparent; }


/* 구름 모션 */
@keyframes ani{
	0%{transform:translate(0,0);}
	100%{transform:translate(0,25px);}
}

/* intro */
.topic-top { background-color: #fff6f6; }
.topic-top .intro_video > video { outline: 1px solid #fff7f6; outline-offset: -1px; } /* 영상 하단 라인 생김 삭제 */

/* topic-1 */
.topic-1 { background-image: url("https://img.vogue.co.kr/vogue/event/240423-longchamp/topic1_bg.jpg"); background-position: bottom; background-size:cover; height:auto; }
.topic-1 .cloud-img { position: absolute; top:54%; right:10%; z-index: 999; animation:ani .8s infinite alternate; }

/* topic-2 */
.topic-2 { background-image: url("https://img.vogue.co.kr/vogue/event/240423-longchamp/topic2_bg.jpg"); background-position: bottom; background-size:cover; height:auto; }
.topic-2 .content_wrap .topic2-video > video { outline: 1px solid #fff7f6; outline-offset: -1px; }

/* topic-3 */
.topic-3 { background-image: url("https://img.vogue.co.kr/vogue/event/240423-longchamp/topic3_bg.jpg"); background-position: top; background-size:cover; height:auto; }
.topic-3 .content_wrap .topic3-txt { max-width:36%; margin: 0 auto; }
.topic-3 .content_wrap .topic3-txt .txt-about { text-align: justify; /* letter-spacing: -0.02rem; */ margin-bottom:4rem; }

/* topic-4 */
.topic-4 { background-image: url("https://img.vogue.co.kr/vogue/event/240423-longchamp/topic4_bg.jpg"); background-position: top; background-size:cover; height:auto; }
.topic-4 .content_wrap {outline: 1px solid #487d94; outline-offset: -1px;}

/* topic-5 */
.topic-5 { background-image: url("https://img.vogue.co.kr/vogue/event/240423-longchamp/topic5_bg.jpg"); background-position: top; background-size:cover; height:auto; padding-top:0; }
.topic-5 .content-box { position:relative; }
.topic-5 .content_wrap .content-box .topic5_slot { padding-top:6%; }

.topic-5 .topic5_slot { position: relative; }
.topic-5 .topic5_slot .link-wrap { position: absolute; display: flex; width:64%; height:77%; left:18%; }
.topic-5 .topic5_slot .link-wrap .link { width:33%; height:100%; display:inline-block; margin-right:1%; margin-bottom:1%; }
.topic-5 .topic5_slot .link-wrap .link:nth-child(2) { width:33%; margin-right:1%; }
.topic-5 .topic5_slot .link-wrap .link:nth-child(3) { width:33%; }

.topic-5 .button-icon > button { color:#126a9c; background-color: #f9afbe; }
.topic-5 .popup2_bt { position: absolute; top:42%; left:43%; }
.topic-5 .popup3_bt { position: absolute; top:36%; left:38%; }
.topic-5 .popup4_bt { position: absolute; top:50%; left:60%; }

.topic5_popup .txt-product .txt-product-price { color:#f18f91; }
.topic5_popup .txt-product .txt-product-link > a { color:#f18f91; }

/* topic-6 */
.topic-6 { background-image: url("https://img.vogue.co.kr/vogue/event/240423-longchamp/topic6_bg.jpg"); background-position: center; background-size:cover; height:auto; }
.topic-6 .cloud-img { position: absolute; top:75%; right:1%; z-index: 999; animation:ani .8s infinite alternate; }
.topic-6 .content-box { position:relative; }
.topic-6 .content_wrap .content-box .topic6_slot { padding-top:6%; }

.topic-6 .topic6_slot { position: relative; }
.topic-6 .topic6_slot .link-wrap { position: absolute; display: flex; width:64%; height:77%; left:18%; }
.topic-6 .topic6_slot .link-wrap .link { width:33%; height:100%; display:inline-block; margin-right:1%; margin-bottom:1%; }
.topic-6 .topic6_slot .link-wrap .link:nth-child(2) { width:33%; margin-right:1%; }
.topic-6 .topic6_slot .link-wrap .link:nth-child(3) { width:33%; }

.topic-6 .button-icon > button { color:#f18f91; background-color: #fff; }
.topic-6 .popup1_bt { position: absolute; top:39%; left:56%; }
.topic-6 .popup2_bt { position: absolute; top:36%; left:43%; }
.topic-6 .popup3_bt { position: absolute; top:45%; left:43%; }

.topic6_popup .txt-product .txt-product-price { color:#f18f91; }
.topic6_popup .txt-product .txt-product-link > a { color:#f18f91; }

/* topic-7 */
.topic-7 { background-image: url("https://img.vogue.co.kr/vogue/event/240423-longchamp/topic7_bg.jpg"); background-position: center; background-size:cover; height:auto; }
.topic-7 .content-box { position:relative; }
.topic-7 .content_wrap .content-box .topic7_slot { padding-top:6%; }

.topic-7 .topic7_slot { position: relative; }
.topic-7 .topic7_slot .link-wrap { position: absolute; display: flex; width:64%; height:77%; left:18%; }
.topic-7 .topic7_slot .link-wrap .link { width:33%; height:100%; display:inline-block; margin-right:1%; margin-bottom:1%; }
.topic-7 .topic7_slot .link-wrap .link:nth-child(2) { width:33%; margin-right:1%; }
.topic-7 .topic7_slot .link-wrap .link:nth-child(3) { width:33%; }

.topic-7 .button-icon > button { color:#234f6e; background-color: #fff; }
.topic-7 .popup1_bt { position: absolute; top:40%; left:53%; }
.topic-7 .popup2_bt { position: absolute; top:50%; left:45%; }
.topic-7 .popup3_bt { position: absolute; top:50%; left:56%; }

.topic7_popup .txt-product .txt-product-price { color:#111f28; }
.topic7_popup .txt-product .txt-product-link > a { color:#111f28; }


/* topic-9 */
.topic-9 { background-image: url("https://img.vogue.co.kr/vogue/event/240423-longchamp/topic8_bg.jpg"); background-position: center; background-size:cover; height:auto; }
.topic-9 .cloud-img { position: absolute; top:8%; left:8%; z-index: 999; animation:ani .8s infinite alternate; }
.topic-9 .content-box { position:relative; }
.topic-9 .content_wrap .content-box .topic9_slot { padding-top:6%; }

.topic-9 .topic9_slot { position: relative; }
.topic-9 .topic9_slot .link-wrap { position: absolute; display: flex; width:64%; height:77%; left:18%; }
.topic-9 .topic9_slot .link-wrap .link { width:33%; height:100%; display:inline-block; margin-right:1%; margin-bottom:1%; }
.topic-9 .topic9_slot .link-wrap .link:nth-child(2) { width:33%; margin-right:1%; }
.topic-9 .topic9_slot .link-wrap .link:nth-child(3) { width:33%; }

.topic-9 .button-icon > button { color:#fff; background-color: #e19f31; }
.topic-9 .popup1_bt { position: absolute; top:35%; left:63%; }
.topic-9 .popup2_bt { position: absolute; top:44%; left:54%; }
.topic-9 .popup3_bt { position: absolute; top:48%; left:39%; }

.topic9_popup .txt-product .txt-product-price { color:#111f28; }
.topic9_popup .txt-product .txt-product-link > a { color:#111f28; }


/* topic-10 */
.topic-10 { background-image: url("https://img.vogue.co.kr/vogue/event/240423-longchamp/topic9_bg.jpg"); background-position: center; background-size:cover; height:auto; padding-bottom:8%; }
.topic-10 .content-box { position:relative; }
.topic-10 .content_wrap .content-box .topic10_slot { padding-top:6%; }

.topic-10 .topic10_slot { position: relative; }
.topic-10 .topic10_slot .link-wrap { position: absolute; display: flex; width:64%; height:77%; left:18%; }
.topic-10 .topic10_slot .link-wrap .link { width:33%; height:100%; display:inline-block; margin-right:1%; margin-bottom:1%; }
.topic-10 .topic10_slot .link-wrap .link:nth-child(2) { width:33%; margin-right:1%; }
.topic-10 .topic10_slot .link-wrap .link:nth-child(3) { width:33%; }

.topic-10 .button-icon > button { color:#f58ea1; background-color: #000; }
.topic-10 .popup1_bt { position: absolute; top:41%; left:41%; }
.topic-10 .popup2_bt { position: absolute; top:33%; left:55%; }
.topic-10 .popup3_bt { position: absolute; top:43%; left:50%; }

.topic10_popup .txt-product .txt-product-price { color:#ef6d83; }
.topic10_popup .txt-product .txt-product-link > a { color:#ef6d83; }

/* topic-11 */
.topic-11 .content_wrap .topic11-video > div:nth-child(1) > video { border-bottom:1px solid #fff; }
.topic-11 { background-image: url("https://img.vogue.co.kr/vogue/event/240423-longchamp/topic11_bg.jpg"); background-position: top; background-size:cover; height:auto; }
.topic-11 .content_wrap > div:nth-child(2) > .img { padding: 5% 0 0; }

/* topic-12 */
.topic-12 { background-image: url("https://img.vogue.co.kr/vogue/event/240423-longchamp/topic12_bg.jpg"); background-position: top; background-size:cover; height:auto; }
.topic-12 .content_wrap > div:nth-child(2) > .img { padding: 5% 0 0; }
.topic-12 .content_wrap .topic12-video > div > video { border-bottom:1px solid #adbaa2; }   


@media (max-width: 1700px) {
	.topic-1 .cloud-img { right:-3%; }
	.topic-6 .cloud-img { right:-5%; }
	.topic-9 .cloud-img { left:-2%; }
}

@media (max-width: 1400px) {
	.topic-1 .cloud-img { right:-10%; }
	.topic-5 .popup2_bt { left:41%; }
	.topic-5 .popup3_bt { top:34%; left:35%; }
	.topic-5 .popup4_bt { top:51%; left:63%; }
	.topic-6 .cloud-img { right:-18%; }
	.topic-7 .popup1_bt { top:40%; left:54%; }
	.topic-7 .popup2_bt { top:49%; left:43%; }	
	.topic-7 .popup3_bt { top:50%; left:59%; }
	.topic-9 .cloud-img { left:-8%; }
	.topic-9 .popup1_bt { top:35%; left:67%; }
	.topic-9 .popup2_bt { top:43%; left:55%; }
	.topic-9 .popup3_bt { left:36%; }
	.topic-10 .popup1_bt { top:42%; left:38%; }
	.topic-10 .popup3_bt { top:44%; left:54%; }

}

@media (max-width: 1200px) {
	.topic-1 .cloud-img { right:-18%; }
	.topic-3 .content_wrap .topic3-txt { max-width:38%; }
	.topic-5 .topic5_slot .link-wrap { width:70%; left:15%; }
	.topic-5 .topic5_slot .link-wrap .link { width:60%; }
	.topic-5 .popup2_bt { left:40%; }
	.topic-5 .popup3_bt { left:32%; }
	.topic-5 .popup4_bt { left:66%; }
	.topic-6 .cloud-img { right:-29%; }
	.topic-6 .topic6_slot .link-wrap { width:70%; left:15%; }	
	.topic-6 .topic6_slot .link-wrap .link { width:60%; }	
	.topic-6 .popup1_bt { left:60%; }
	.topic-6 .popup2_bt { left:41%; }
	.topic-6 .popup3_bt { left:39%; }	
	.topic-7 .topic7_slot .link-wrap { width:70%; left:15%; }		
	.topic-7 .topic7_slot .link-wrap .link { width:60%; }		
	.topic-7 .popup2_bt { left:41%; }
	.topic-7 .popup3_bt { left:60%; }
	.topic-9 .cloud-img { left:-20%; }
	.topic-9 .topic9_slot .link-wrap { width:70%; left:15%; }		
	.topic-9 .topic9_slot .link-wrap .link { width:60%; }			
	.topic-9 .popup1_bt { left:69%; }
	.topic-9 .popup2_bt { left:57%; }
	.topic-9 .popup3_bt { left:33%; }
	.topic-10 .topic10_slot .link-wrap { width:70%; left:15%; }		
	.topic-10 .topic10_slot .link-wrap .link { width:60%; }	
	.topic-10 .popup1_bt { left:36%; }

}

@media (max-width: 1024px) {
	.topic-1 .cloud-img { right:-28%; }
	.topic-5 .topic5_slot .link-wrap { width:84%; left:8%; }
	.topic-5 .popup2_bt { left:37%; }
	.topic-5 .popup3_bt { left:29%; }
	.topic-5 .popup4_bt { left:68%; }
	.topic-6 .cloud-img { right:-40%; }
	.topic-6 .topic6_slot .link-wrap { width:84%; left:8%; }	
	.topic-6 .popup1_bt { left:62%; }
	.topic-6 .popup2_bt { left:39%; }
	.topic-6 .popup3_bt { left:37%; }	
	.topic-7 .topic7_slot .link-wrap { width:84%; left:8%; }		
	.topic-7 .popup3_bt { left:62%; }
	.topic-9 .cloud-img { left:-32%; }
	.topic-9 .topic9_slot .link-wrap { width:84%; left:8%; }			
	.topic-9 .popup1_bt { left:72%; }
	.topic-9 .popup3_bt { left:30%; }
	.topic-10 .topic10_slot .link-wrap { width:84%; left:8%; }
	.topic-10 .popup1_bt { top:43%; left:33%; }		
	.topic-10 .popup2_bt { top:34%; left:58%; }	
	.topic-10 .popup3_bt { top:45%; }

}

@media (max-width: 820px) {	
	.topic-1 .cloud-img { right:-45%; }
	.topic-3 .content_wrap .topic3-txt { max-width:60%; }	
	.topic-5 .topic5_slot .link-wrap { width:100%; left:0; }
	.topic-5 .topic5_slot .link-wrap .link { width:34%;}
	.topic-5 .popup2_bt { left:35%; }
	.topic-5 .popup3_bt { top:36%; left:24%; }
	.topic-5 .popup4_bt { top:53%; left:73%; }
	.topic-6 .cloud-img { right:-60%; }
	.topic-6 .topic6_slot .link-wrap { width:100%; left:0; }
	.topic-6 .topic6_slot .link-wrap .link { width:34%;}	
	.topic-6 .popup1_bt { left:64%; }
	.topic-6 .popup2_bt { left:36%; }
	.topic-6 .popup3_bt { top: 47%; left:35%; }	
	.topic-7 .topic7_slot .link-wrap { width:100%; left:0; }
	.topic-7 .topic7_slot .link-wrap .link { width:34%;}		
	.topic-7 .popup2_bt { left:38%; }
	.topic-9 .cloud-img { left:-42%; }
	.topic-9 .topic9_slot .link-wrap { width:100%; left:0; }
	.topic-9 .topic9_slot .link-wrap .link { width:34%;}
	.topic-9 .popup1_bt { left:78%; }
	.topic-9 .popup3_bt { left:26%; }
	.topic-10 .topic10_slot .link-wrap { width:100%; left:0; }
	.topic-10 .topic10_slot .link-wrap .link { width:34%;}	
	.topic-10 .popup1_bt { left:29%; }
	.topic-10 .popup2_bt { left:58%; }	
	.topic-10 .popup3_bt { left:56%; }

}


@media (max-width: 638px) {
	
	/* 공통 */
	.uk-position-top { top: 0px; z-index:10; }	
	.uk-logo {max-width:50%; width:100%; height:auto; margin: 0 auto; min-height:60px; }
	.main-tit .main-img { max-width: 110% !important; }
	.content_wrap { padding-left:10%; padding-right:10%; }
	.button-icon > button { width:35px; height:35px; line-height: 32px;}

	.popup > div:nth-child(1) { width:220px; padding:3%; }	
	.popup .txt-product > img { margin-top:20%; }
	.popup .txt-product .txt-product-tit { font-size:1rem; }
	.popup .txt-product .txt-product-name { font-size:1.25rem; }
	.popup .txt-product .txt-product-price { font-size:1.5rem;}
	.popup .txt-product .txt-product-link { margin:0 0 5%; }
	.popup .txt-product .txt-product-link > a { font-size: 1rem; }	

	/* topic-1 */
	.topic-1 { padding:8% 0; background-image: url("https://img.vogue.co.kr/vogue/event/240423-longchamp/topic1_bg_m.jpg"); background-position: top; background-size:cover; height:auto; }
	.topic-1 .cloud-img { right:-25%; }
	.topic-1 .cloud-img > img { max-width:195px; }

	/* topic-3 */
	.topic-3 .content_wrap .topic3-txt { max-width:100%; }
	.topic-3 .content_wrap .topic3-txt .txt-about { padding:0 8%; }

	/* topic-4 */
	.topic-4 { background-image: url("https://img.vogue.co.kr/vogue/event/240423-longchamp/topic4_bg_m.jpg"); background-position: top; background-size:cover; height:auto; }	

	/* topic-5 */
	.topic-5 { background-image: url("https://img.vogue.co.kr/vogue/event/240423-longchamp/topic5_bg_m.jpg"); background-position: top; background-size:cover; height:auto; }
	.topic-5 .topic5_slot .link-wrap { width:100%; left:0; top:16%; }
	.topic-5 .popup2_bt { left:35%; }
	.topic-5 .popup3_bt { left:30%; }
	.topic-5 .popup4_bt { top:50%; left:70%; }

	/* topic-6 */
	.topic-6 { background-image: url("https://img.vogue.co.kr/vogue/event/240423-longchamp/topic6_bg_m.jpg"); background-position: top; background-size:cover; height:auto; }	
	.topic-6 .topic6_slot .link-wrap { width:100%; left:0; top:16%; }
	.topic-6 .cloud-img { top:56%; right:-28%; }
	.topic-6 .cloud-img > img { max-width:195px; }	
	.topic-6 .popup1_bt { top:36%; left:60%; }
	.topic-6 .popup2_bt { top:37%; left:32%; }
	.topic-6 .popup3_bt { top:48%; left:39%; }

	/* topic-7 */
	.topic-7 { background-image: url("https://img.vogue.co.kr/vogue/event/240423-longchamp/topic7_bg_m.jpg"); background-position: bottom; background-size:cover; height:auto; }	
	.topic-7 .topic7_slot .link-wrap { width:100%; left:0; top:16%; }
	.topic-7 .popup1_bt { top:38%; left:55%; }
	.topic-7 .popup2_bt { top:49%; left:35%; }
	.topic-7 .popup3_bt { top:52%; left:60%; }

	/* topic-9 */
	.topic-9 { background-image: url("https://img.vogue.co.kr/vogue/event/240423-longchamp/topic8_bg_m.jpg"); background-position: center; background-size:cover; height:auto; }
	.topic-9 .topic9_slot .link-wrap { width:100%; left:0; top:16%; }
	.topic-9 .cloud-img { top:5%; left:-28%; }
	.topic-9 .cloud-img > img { max-width:195px; }	
	.topic-9 .popup1_bt { top:32%; left:70%; }
	.topic-9 .popup2_bt { top:44%; left:56%; }
	.topic-9 .popup3_bt { top:47%; left:27%; }

	/* topic-10 */
	.topic-10 { background-image: url("https://img.vogue.co.kr/vogue/event/240423-longchamp/topic9_bg_m.jpg"); background-position: top; background-size:cover; height:auto; padding-bottom:15%; }
	.topic-10 .topic10_slot .link-wrap { width:100%; left:0; top:16%; }
	.topic-10 .popup1_bt { top:44%; left:28%; }
	.topic-10 .popup2_bt { top:33%; left:58%; }
	.topic-10 .popup3_bt { top:46%; left:56%; }

	/* topic-11 */
	.topic-11 .content_wrap > div:nth-child(2) > .img { padding-top:10%; }
	.topic-11 .content_wrap > div:nth-child(2) > .img > a > img { max-height:33px; }

	/* topic-12 */
	.topic-12 .content_wrap .topic12-video > div > video { border-bottom:1px solid #f0f2ee; }
	.topic-12 .content_wrap > div:nth-child(2) > .img { padding-top:10%; }
	.topic-12 .content_wrap > div:nth-child(2) > .img > a > img { max-height:33px; }	

}

@media (max-width: 281px) {
	.topic-1 .cloud-img { right:-45%; }
	.topic-5 .popup4_bt { top:48%; }
	.topic-6 .cloud-img { right:-45%; }
	.topic-9 .cloud-img { left:-48%; }
}