@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: 80px;}
.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) {
	.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;}

}

/* 커스텀 */

.uk-position-top { top: 30px; z-index: 10;}
.uk-footer-logo {max-width:10%; width:100%; min-height:auto; text-align:center;}	

.main-tit .main-img { width: 100% !important; max-width: 1200px !important; height: auto !important;}
.main-tit .uk-cover-container { background-image: url("https://img.wkorea.com/w/special/221214-iwantchoo/top-main-bg-1.jpg"); background-repeat: repeat-x; background-position: center; background-size: auto 100%;}
.main-tit .uk-position-center { width: 100%; top:80%; }

.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; }
.txt-mar {margin-bottom:0 !important; padding: 0.5em 0;}

.topic-1 { width: 100%; margin: 0 auto; position: relative; z-index: 10; }

.topic-1 .txt { font-size: 16px; }
.topic-1-tit-txt { font-size: 1.5em; font-weight:700; line-height:50px;}
.topic-1-tit-txt-p { line-height:50px; }

.topic-1 #content-bg { background-image:url("https://img.wkorea.com/w/special/221214-iwantchoo/bg_glitter.jpg"); padding: 0 2% 8% 2%; color: #fff; font-size: 20px;}

.topic-1 .chapter { margin-top:5em; margin-bottom: 2em;}
.topic-1 .chapter span { background-color: #000; padding: 10px 25px; font-size:1.2em; font-weight: 700; line-height: 4em;}

.topic-2 .topic-bg{ padding: 0; text-align: center;}
.topic-2 .topic-bg{ background-color:#000; background-size: contain; background-position: center; }
.topic-2 .topic-bg img{ margin: 0 auto;}

/*.topic-2 .uk-section { padding: 0;}*/
.topic-2 .uk-cover-container .uk-position-center { width: 100%; }
.topic-2 video { background-image:url("https://img.wkorea.com/w/special/221214-iwantchoo/bg_glitter.jpg");}
.topic-2 .box-01 { margin-top: 3em; padding-bottom: 0 !important; text-align: left; }
.topic-2 .box-01 .uk-container { width: 100%; max-width: 1200px; background: #f2f2f2; margin: 0 auto; }
.topic-2 .box-01 .uk-container p { text-align:center; line-height:1.6em; }
.topic-2 .box-01 .uk-container p span {  width: 100%; display: block; text-align: center; margin-bottom: 2em; }

.topic-2 .box-01-1 { margin-top: 3em; padding-bottom: 0 !important; text-align: left; }
.topic-2 .box-01-1 .uk-container { width: 100%; max-width: 1200px; background: #f2f2f2; margin: 0 auto; }
.topic-2 .box-01-1 .uk-container p { text-align:center; line-height:1.6em; }
.topic-2 .box-01-1 .uk-container p span {  width: 100%; display: block; text-align: center; margin-bottom: 2em; }

.topic-2 .box-02 { background: #000; margin-top:7em;}
.topic-2 .box-02 .uk-container { max-width: 1200px; padding: 0 20px; }
.topic-2 .box-02 .notice-buy{color:#fff; padding-top:10px;}
.topic-2 .box-02 .img-m {margin: 0 auto !important;}
.topic-2 .box-02 .notice-buy a, .topic-2 .box-04 .txt-red a:hover {color: #c3ae84; border: 1px solid #c3ae84; font-size: 20px; font-weight: 600; padding: 10px 20px;}

.topic-2 .box-03 { background-image:url("https://img.wkorea.com/w/special/221214-iwantchoo/bg_glitter-event.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center;}
.topic-2 .box-03 .uk-container { width: 100%; max-width: 1200px; background: #fff; color: #000; position: relative;}
.topic-2 .box-03 .txt-01 { font-size: 20px;}
.topic-2 .box-03 .txt-01 span {color: #c3ae84; line-height:3em; font-size:0.8em;}
.topic-2 .box-03 .txt-02 { text-align: left; width: 100%; max-width: 400px; margin: 0 auto;}
.topic-2 .box-03 .txt-02 p { padding-left: 100px; position: relative; margin: 5px 0;}
.topic-2 .box-03 .txt-02 p span { position: absolute; left: 0;}
.topic-2 .box-03 .info { background: #c3ae84; color: #000; font-size: 13px; font-weight: 500; }
.topic-2 .box-03 .info span { font-size: 18px;}
.topic-2 .box-03 .voucher-bt a{ background: #000; color:#fff; font-size: 1.1em; padding: 10px 35px; display:inline-block; margin: -10px 0 5px 0;}
.topic-2 .box-03 .voucher-bt a:hover{ text-decoration-line: none; }


.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: 959px) {	

	.uk-footer-logo {max-width:20%; min-height:auto;}		

	.main-tit .title-logo {width:85%;}
	.main-tit p { margin-top:20px !important;}

	.topic-bg img{width:100%;}	

	.topic-2 .box-02 .img-m{width:50%;}
	.topic-2 .box-03 .uk-container{width:85%; padding-top:4em;}
	.topic-2 .box-03 .voucher-bt a{margin-bottom:4em;}
}


@media (max-width: 638px) {
	.uk-grid{ margin: -1px !important;} /* 20221207 수정 */

	.uk-position-top { top: 0px; z-index: 10;}	
	.uk-logo {max-width:50%; width:100%; height:auto; margin: 0 auto; }
	.uk-footer-logo {max-width:30%; width:100%; min-height:auto; margin-bottom:0;}	

	.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 { padding-bottom: 0;}
	.main-tit p { padding:0 10px; margin-top: 10px !important;}
	.main-tit .main-img { width: 120% !important; margin-left: -10%; min-height: auto; }
	/* .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; z-index: 2;}
	.main-tit .uk-position-center { top:73%; }
	.main-tit .model { background: url("https://img.wkorea.com/w/special/221214-iwantchoo/top-main.jpg");}
	/* .main-tit .title-logo { margin-top: 0; }	*/

	.chapter {font-size:16px;}
	.chapter span {font-size:1em !important;}

	/* .topic-1 .uk-container { padding: 0;} */
	.topic-1-tit-txt {font-size:1.3em; display: block; line-height:normal;}
	.topic-1-tit-txt-p { line-height: 1.4em; display:block; padding: 8px 0;}
	.topic-1 .uk-container { z-index: 99; position: relative;}
	.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-1-pic { width: 90%; margin: 0 auto;}
	.topic-1 .pic-slider {margin-bottom:10px !important; }

	
	.topic-2 .uk-cover-container { height: 500px; min-height: auto;}
	.topic-2 .box-01 { padding:1.5em !important; margin-top:1.5em;}
	.topic-2 .box-01 .uk-container p { padding: 10px; text-align:center; font-size:0.7em;}
	.topic-2 .box-01 .uk-container p span { width: 80%; padding-bottom: 0.8em; margin: 0 auto;}
	.topic-2 .box-01-1 { padding:1.5em !important; margin-top:0; margin-bottom:1.5em;}
	.topic-2 .box-01-1 .uk-container p { padding: 10px; text-align:center; font-size:0.7em;}
	.topic-2 .box-01-1 .uk-container p span { width: 80%; padding-bottom: 0.8em; margin: 0 auto;}	
	.topic-2 .box-02 { padding: 2em 0; margin-top:0;}
	.topic-2 .box-02 .uk-container { padding: 0;}	
	.topic-2 .box-02 .notice-buy p{padding:0.5em 0 1.5em 0 !important;}	
	.topic-2 .box-02 .notice-buy a{font-size:1.2em;}
	.topic-2 .box-02 .notice-buy a, .topic-2 .box-04 .txt-red a:hover {padding: 5px 30px;}	
	.topic-2 .box-02 .img-m {width:80%;}
	.topic-2 .box-03 { padding: 20px;}
	.topic-2 .box-03 .uk-container { width: auto; padding: 50px 30px 100px 30px;}
	.topic-2 .box-03 .tit img { max-width:200px; width:100%; height:auto;}
	.topic-2 .box-03 .txt-01 { font-size: 16px; margin: 20px 0 !important; line-height: 1.5em;}
	.topic-2 .box-03 .txt-01 span { display:inline-block; padding:15px 0; line-height:1.5em; font-size:16px;}
	.topic-2 .box-03 .txt-02 { text-align: center;}
	.topic-2 .box-03 .txt-02 p { padding-left: 0;}
	.topic-2 .box-03 .txt-02 p span { position: relative; display: block; font-weight: 600;}
	
	.topic-2 .box-03 .gift img { width: 50%;}
	.topic-2 .box-03 .info { font-size: 12px;}
	.topic-2 .box-03 .info span { font-size: 15px;}
	.topic-2 .box-03 .voucher-bt a{ font-size: 1.2em; padding: 10px 35px; margin-bottom:1.5em;}
	
	.star { width: 10px; height: 10px;}

}