@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: 18px; color: #000; letter-spacing: -0.03rem; }
body, h1, h2 { font-family: 'Roboto Condensed','Noto Sans KR', sans-serif; font-weight: 400; text-align: center; color: #000; word-break: keep-all; overflow-x: hidden;}

.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;}
.main-tit .title-logo { width: 100%; max-width: 900px; height: auto; margin: 0 auto; margin-top: 50%;}
.main-tit p { color: #fff;}

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; }
	.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;}

}

/* 커스텀 */

.top-banner { background-color: #e32118; position: fixed; top: 0; z-index: 999; width: 100%; height: 70px; color: #fff; font-size: 16px;}
.top-banner p { display:inline-block; padding: 0 10px; margin: 0; }
.top-banner a, .top-banner a:hover { color: #fff; border: 1px solid #fff;}
.top-banner img { height: 70px; width: auto;}

.uk-position-top { top: 70px; z-index: 10;}

.main-tit .main-img { width: 100% !important; max-width: 1200px !important; height: auto !important;}
.main-tit .uk-cover-container { background-image: url("https://img.vogue.co.kr/vogue/event/210115-jimmychoo/top-main-bg.jpg"); background-repeat: repeat-x; background-position: center; background-size: auto 100%;}
.main-tit .uk-position-center { width: 100%; top:37%; }

.main-tit .model { width: 100% !important; max-width: 1200px !important; height: auto !important; margin: 0 auto; /*overflow: hidden;*/ position: relative;}
.main-tit .top-model { position: absolute; z-index: 1; left: 0; top:0; }

.topic-1 { width: 100%; margin: 0 auto; margin-top: -20%; position: relative; z-index: 10; }
.topic-1 .video-full { width: calc(100% - 40px); max-width: 1000px; margin: 0 auto; padding: 20px; background-image:url("https://img.vogue.co.kr/vogue/event/210115-jimmychoo/bg_glitter.jpg");}

.topic-1 .txt { font-size: 16px; }
.topic-1 .clip { position: relative;}
.topic-1 .clip video { width: 50%;}
.topic-1 .clip .clip-01 { margin-bottom: 30%;}
.topic-1 .clip .clip-02 { position: absolute; left: -3%; top: 40%;}
.topic-1 .clip .clip-03 {position: absolute; top: 60%; left: 51%;}

.topic-1 #content-01 { background-image:url("https://img.vogue.co.kr/vogue/event/210115-jimmychoo/bg_glitter.jpg"); padding: 5% 2%; color: #fff; font-size: 20px;}
.topic-1 .uk-slider img { border: 20px solid #fff; }
.topic-1 .uk-slider li { margin: 0 20px;}

/*.topic-2 .uk-section { padding: 0;}*/
.topic-2 .uk-cover-container .uk-position-center { width: 100%; }
.topic-2 video { background-image:url("https://img.vogue.co.kr/vogue/event/210115-jimmychoo/bg_glitter.jpg");}
.topic-2 .box-01 { background-image:url("https://img.vogue.co.kr/vogue/event/210115-jimmychoo/bg_glitter.jpg"); text-align: left; }
.topic-2 .box-01 .uk-container { width: 100%; max-width: 1200px; background: #ffebdb; margin: 0 auto; }
.topic-2 .box-01 .uk-container p span { font-size: 30px; color:#e32118; font-weight: 600; width: 100%; display: block; margin-bottom: 10px; }

.topic-2 .box-02 .uk-container { width: 100%; max-width: 1200px; margin: 0 auto; }

.topic-2 .box-03 { background: #ffebdb;}
.topic-2 .box-03 .uk-container { width: 100%; max-width: 1200px; margin: 0 auto; }

.topic-2 .box-04 .txt-red { color: #e32118; }
.topic-2 .box-04 .txt-red a, .topic-2 .box-04 .txt-red a:hover { color: #e32118; border: 1px solid #e32118; font-size: 20px; font-weight: 600; padding: 10px 20px;}
.topic-2 .box-04 .txt-red .txt-01 { font-size: 24px; font-weight: 600;}
.topic-2 .box-04 .txt-red .txt-02 { margin: -10px 0;}
.topic-2 .box-04 .txt-red .txt-03 { font-size: 14px;}

.topic-2 .box-05 { background-image:url("https://img.vogue.co.kr/vogue/event/210115-jimmychoo/bg_glitter.jpg"); }
.topic-2 .box-05 .uk-container { width: 100%; max-width: 1200px; background: #fff; color: #e32118; position: relative;}
.topic-2 .box-05 .txt-01 { font-size: 20px;}
.topic-2 .box-05 .txt-01 span { background: #e32118; color: #fff; padding: 3px 5px;}
.topic-2 .box-05 .txt-02 { text-align: left; width: 100%; max-width: 400px; margin: 0 auto;}
.topic-2 .box-05 .txt-02 p { padding-left: 100px; position: relative; margin: 5px 0;}
.topic-2 .box-05 .txt-02 p span { position: absolute; left: 0;}
.topic-2 .box-05 .info { background: #e32118; color: #fff; font-size: 13px; font-weight: 300; }
.topic-2 .box-05 .info span { font-size: 18px;}


.star {
	display: block;
	position: absolute;
	top: 0%;
	left: 70%;
	width: 20px;
	height: 20px;
	background:rgba(255,255,255,0.5); border-radius:50%; 
	overflow: hidden;
	z-index: 0;
	animation: glitter 4.5s linear 0s infinite normal;
	-webkit-animation: glitter 4.5s linear 0s infinite normal;
	-moz-animation: glitter 4.5s linear 0s infinite normal;
	-ms-animation: glitter 4.5s linear 0s infinite normal;
	-o-animation: glitter 4.5s linear 0s infinite normal;
}

@-webkit-keyframes glitter {
	0%   { -webkit-transform: scale(1.0); opacity: 1; }
	25%  { -webkit-transform: scale(0.5); opacity: 0; }
	50%  { -webkit-transform: scale(1.0); opacity: 1; }
	75%  { -webkit-transform: scale(0.5); opacity: 0; }
	100% { -webkit-transform: scale(1.0); opacity: 1; }
}
@-moz-keyframes glitter {
	0%   { -moz-transform: scale(1.0); opacity: 1; }
	25%  { -moz-transform: scale(0.5); opacity: 0; }
	50%  { -moz-transform: scale(1.0); opacity: 1; }
	75%  { -moz-transform: scale(0.5); opacity: 0; }
	100% { -moz-transform: scale(1.0); opacity: 1; }
}


@media (max-width: 638px) {
	.top-banner { font-size: 12px;}
	.top-banner p {  max-width: calc(100% - 190px); text-align: left; float: left; padding-top: 15px;}
	.top-banner p:first-child { padding-top: 0;}
	.top-banner p:last-child { float: right;}
	.top-banner a { padding: 5px 10px; line-height: 1.5rem; margin-right: 5px;}
	
	.main-tit { margin-top: 70px; padding-bottom: 0;}
	.main-tit p { padding:0 30px; margin-top: 20px !important; }
	.main-tit .main-img { width: 120% !important; margin-left: -10%; min-height: 500px; }
	.main-tit .top-model { width: 120% !important; margin-left: -10%; max-width: none;}
	.main-tit .uk-position-center { width: 100%; top:50%; }
	.main-tit .model { background: url("https://img.vogue.co.kr/vogue/event/210115-jimmychoo/top-main.jpg");}
	
	.topic-1 .uk-container { padding: 0;}
	.topic-1 .uk-slider img { border: 10px solid #fff; }
	.topic-1 .uk-slider li { margin: 10px;}
	.topic-1 #content-01 {padding: 30px; }
	.topic-1 #content-01 p { font-size: 14px; font-weight: 600; margin-top: 20px !important;}
	.topic-1 #content-01 .video-full { padding: 0; width: 100%; }
	.topic-1 .txt { font-size: 13px; }
	
	.topic-2 .uk-cover-container { height: 500px; min-height: auto;}
	.topic-2 .box-01 { padding: 20px 0 !important;}
	.topic-2 .box-01 .uk-container p { padding: 20px;}
	.topic-2 .box-01 .uk-container p span { font-size: 16px;}
	.topic-2 .box-02 { padding: 0;}
	.topic-2 .box-02 .uk-container { width: auto; padding: 0 20px;}
	.topic-2 .box-03 .uk-container { padding: 0;}
	.topic-2 .box-04 img { width: 80%;}
	.topic-2 .box-04 .txt-red .txt-01 { font-size: 16px;}
	.topic-2 .box-05 { padding: 20px;}
	.topic-2 .box-05 .uk-container { width: auto; padding: 50px 30px 100px 30px;}
	.topic-2 .box-05 .tit img { width: 45%;}
	.topic-2 .box-05 .txt-01 { font-size: 16px; margin: 20px 0 !important; line-height: 2.3rem;}
	.topic-2 .box-05 .txt-02 { text-align: center;}
	.topic-2 .box-05 .txt-02 p { padding-left: 0;}
	.topic-2 .box-05 .txt-02 p span { position: relative; display: block; font-weight: 600;}
	.topic-2 .box-05 .gift img { width: 50%;}
	.topic-2 .box-05 .info { font-size: 12px;}
	.topic-2 .box-05 .info span { font-size: 15px;}
	
	.star { width: 10px; height: 10px;}

}