@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: 16px; color: #000; background-color: #d1ccc6; }
body, h1, h2 { font-family: 'Roboto Condensed','Noto Sans KR', sans-serif; font-weight: 300; text-align: center; color: #000; }
h1 { font-weight: 400; font-size: 40px !important; color: #a98d74 !important;}
h2 { font-size: 27px !important; font-weight: 500;}


.br-m { display: none;}
.br-p { display:block;}
.img-m { display: none;}
.img-p { display: block;}
.uk-section { position: relative; overflow: hidden;}
/*.uk-container-small { margin: 0;}*/

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

.main-tit { padding-top: 0;}
.main-tit .title-logo { width: 50%; height: auto; margin: 0 auto; }
.main-tit p { color: #d2d2d2;}

.sub-tit { font-size: 18px; color: #fff; text-align: center;}
.sub-tit span { font-weight: 500; font-size: 30px; }

.book-tit { font-size: 18px; font-weight: 400;}

.topic-1, .topic-2, .topic-3 { padding: 20px;}

.topic-1 span { font-size: 20px; font-weight: 500;     display: inline-block; border-bottom: 2px solid; margin-bottom: 10px; line-height: 20px;}

.topic-1 .contents .content-box { margin-left: auto; margin-right: auto; position: relative; margin-top: 50px !important;}
.topic-1 .contents h2 { width: 100%;}
.topic-1 .content-wrap { background: #fff; overflow: hidden; padding: 0 !important; /*max-width: 1200px;*/}
/*.topic-1 .content-wrap img { max-width: 600px;}*/

.topic-1 .contents .content-media { position: relative; width: 100%; }
.topic-1 .contents .img-r { float: right; margin-bottom: 0; max-width: 50%; margin-top: 0;}
.topic-1 .contents .img-l { float: left; margin-bottom: 0; max-width: 50%;}
.topic-1 .contents .img-txt { clear: both; padding-top: 50px;}
.topic-1 .contents .video-r { width: 60%;  position: absolute; bottom: 3%; left: 35%; z-index: 9999;}
.topic-1 .contents .video-r video { width: 49%; margin-right: 1px;}
.topic-1 .contents .content-txt { text-align: left; font-size: 14px; margin-left: 25%; width: 60%; background: #fff;}
.topic-1 .contents .content-txt .tit { font-weight:400; font-size: 20px; margin-bottom: -10px; }

.topic-1 #content-02, .topic-1 #content-03 { padding-top: 0;}
.topic-1 #content-02 .img-r { margin-top: 20px;}
.topic-1 #content-02 .video-r { left: auto; right: 43%; bottom: 5%; width: 40%;}
.topic-1 #content-02 .video-r video { width: 100%;}
.topic-1 #content-02 .content-txt { left: auto; right: 50%; width: 80%; margin-left: 0; /*width: 35%;*/}
.topic-1 #content-03 .content-txt { width: 70%;}
.topic-1 #content-03 .video-r { width:60%; }


.uk-button { border: 1px solid #000; color: #000; font-size: 16px; font-weight: 400;}


.topic-2 { background: #000; color: #fff;}
.topic-2 h1, .topic-2 h2 { color: #fff;}
.topic-2 .content-txt { margin: -10px 0 40px 0;}
.topic-2 #content-04 .content-wrap {background: url("https://img.vogue.co.kr/vogue/event/200924-lebeige/topic2-bg1.jpg"); background-size: cover; background-position: bottom; padding: 70px;}
.topic-2 #content-05 .content-wrap {background: url("https://img.vogue.co.kr/vogue/event/200924-lebeige/topic2-bg2.jpg"); background-size: cover; background-position: bottom; padding: 70px;}

.topic-2 .contents .uk-grid-collapse { background:#000; }
.topic-2 .contents .txt-box { color: #D0D0D0; text-align: left; padding: 30px; font-size: 14px;}
.topic-2 .contents .txt-box .tit { color: #fff; font-size: 20px; margin-bottom: -10px; font-weight: 400;}

.topic-3 .product { padding-top: 0;}
.topic-3 .product p { font-size: 14px; padding: 0 40px;}
.topic-3 .product-since { font-size: 16px; font-weight: 600; margin: -15px 0 20px 0; color: #a98d74;}
.topic-3 .product-value { font-weight: 600; margin: 25px 0 -15px 0; color: #000;}

.uk-totop { position: fixed; bottom: 50px; right: 100px; z-index: 999999; background:rgba(0,0,0,0.30); padding: 20px; 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: 1400px) {
	.topic-1 .contents .video-r { left: 37%; }
	.topic-1 .contents .content-txt { left: 52%;}
}

@media (max-width: 1024px) {
	.img-m { display: block; text-align: }
	.img-p { display: none;}
	.contents .img-r, .contents .img-l { float: none; margin-top: 0;}
	.contents .img-txt { padding-top: 0;}
	
	.main-tit .uk-margin-large { padding: 0 30px; }
	.uk-divider-vertical { height: 30px; margin-bottom: -10px;}
	.topic-1 .contents .content-box { padding: 0 30px; margin-top: 30px !important;}
	.topic-1 .contents .video-r { position: relative !important; width: 100%; clear: both; left: 0; padding-top: 20px;}
	.topic-1 .contents .video-r video { width: 40%;}
	.topic-1 .contents .content-txt { width: 80%; margin: 0 auto; margin-bottom: 60px;}
	.topic-1 .contents .content-txt .tit { font-size: 16px;}
	.topic-1 #content-02 .video-r { right: auto; width: 100%;}
	.topic-1 #content-02 .video-r video { width: 80%; }
	.topic-1 #content-02 .content-txt { margin-left: auto;}
	.topic-1 #content-02 .img-r { margin-top: 0;}
	.topic-1 #content-03 .video-r { width: 100%;}
	.topic-1 #content-03 .content-txt { width: 80%;}
	
	.topic-2 .content-txt { margin: -13px 0 25px 0;}
	.topic-2 #content-04 .content-wrap { padding: 50px 10px 10px 10px;}
	.topic-2 #content-05 .content-wrap { padding: 50px 10px 10px 10px;}
	/*.topic-2 [class*=uk-width] { width: 50%;}*/
	.topic-2 .txt-box { width: 100%;}
	.topic-2 .contents .txt-box .tit { font-size: 16px;}
	
	.topic-3 .product p { padding: 0;}
	
	.top-10 { margin-top: 10px;}
	.img-m { margin-top: 0;}
}

@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;}
	
	.topic-1 .contents .content-txt { margin-bottom: 30px;}
	.topic-1 .contents .video-r video { width: 80%; margin-right: 0; margin-bottom: 5px;}
	.topic-1 #content-02 .img-r { float: left;}
	
	.uk-totop { bottom: 20px; right: 10px; padding: 13px 10px;}
	.uk-button { font-size: small; }
	
	

}