@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: 27px;*/ font-size: 23px; letter-spacing: -0.032px; color: #000; }
body { position: relative;}
body, h1, h2 { font-family: 'Pretendard Variable', Pretendard, sans-serif; font-weight: 400; text-align: center; color: #000; word-break: keep-all; letter-spacing: -0.01rem;}
video { outline: none;
  border: none; -webkit-mask-image: -webkit-radial-gradient(white, black);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden; -webkit-appearance: none;}

.content_video { margin: 0;}	

.br-m { display: none;}
.br-p { display:block;}
.uk-section { position: relative; overflow: hidden; padding: 100px 0 0;}

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

.full-video iframe { max-width: 700px!important; width: 100%;}

/* 커스텀 */
.top-nav { text-align: center; background: #f4dee5;}
.top-nav .logo-01 { border-bottom: 1px solid #fff; padding: 8px 0;}
.top-nav .logo-01 img { max-width: 205px;}
.top-nav .logo-02 { padding: 0; height: 130px;}
.top-nav .logo-02 video { width: 100%;  max-width: 640px; max-height: 130px; margin: 0 auto; outline: 3px solid #f4dee5; outline-offset: -3px; }

.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: 1114px;}

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

/* about */
.about-con .txt-box { max-width: 650px; }
.about-con .txt-box .top-tit img { max-width: 70%;}
.about-con .txt-box .txt-tit { font-size:1.9rem; font-weight:500; letter-spacing: -0.1rem; line-height:1.2; }
.about-con .txt-box .txt-sub-tit > b { font-weight:500; }
.about-con .txt-box .txt-about { max-width:650px; margin:0 auto; text-align:center; /*font-size:1.15rem;*/ line-height:1.5; /* letter-spacing: -0.025rem; */ letter-spacing: 0; padding:5% 0 0; }
.about-con .txt-box .txt-about > b { color:#0b4b97; }
.about-video { margin: 60px 0 ; }

.uk-section .txt { max-width:850px;  margin: 100px auto; letter-spacing: -0.04rem;}

.product-popup > button { border:none; -webkit-tap-highlight-color : transparent !important;  animation:ani2 .3s infinite alternate;}
.product-popup .uk-drop > div { padding:20px !important; }
.product-popup .uk-drop > div > button { position: absolute; right: 10px; top: 10px; zoom: 1.2;}
.product-popup .uk-drop > div > .txt-product { color:#000; }
.product-popup .uk-drop > div > .txt-product p { margin:1% 0; }
.product-popup .uk-drop > div > .txt-product .txt-product-tit { font-size:0.9rem; font-weight:700;}
.product-popup .uk-drop > div > .txt-product .txt-product-name { font-size:0.6rem; }
.product-popup .uk-drop > div > .txt-product .txt-product-link a { font-size:0.7rem; color: #000; font-weight:600; }

/* 버튼 모션 */
@keyframes ani2{
	0%{ /*opacity: 1;*/ transform: scale(1);}
	100%{ /*opacity: 1;*/ transform: scale(0.8);}
}

/* logo_roliing */
.logo_rolling { background-color: #BFECE0; padding:1% 0; position: absolute;  width: 100%;}
.logo_rolling2 { position: relative; background:#D3D2D2; }
.section-slider{ width:100%; overflow-x: hidden; }
.section-slider img{ width: 50%; padding: 0 ;}
.section-slider .swiper-wrapper{ transition-timing-function: linear;}

/* charm */
.charm { position: absolute; zoom:0.5; animation:ani .8s infinite alternate; }
.topic-1 .charm-01 { margin-top: -5%; margin-right: -15%; right: 0;}
.topic-1 .charm-02 { bottom: 0; margin-left: -17%; animation-delay: 250ms;}
.topic-2 .charm-01 { margin-top: -10%; margin-left: -25%; left: 0;}
.topic-2 .charm-02 { bottom: 0; right: 0; margin-right: -24%; animation-delay: 250ms;}
.topic-3 .charm-01 { margin-top: -5%; right: 0; z-index: 9;}
.topic-3 .charm-02 { display: none;}
.charm-footer { animation-delay: 250ms; bottom: 30px;}

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


/* topic-1 */
.topic-1 { padding-bottom: 100px; background: linear-gradient(#fff, #FFE7EF); height:auto; }
.uk-section.topic-1 .uk-grid.first img { padding: 0 10px;}
.topic-1 .img-02 { margin-top: 15%;}
.topic-1 .img-03 { margin: 60px 0;}
.topic-1 .img-04 { margin-bottom: 60px;}
.topic-1 .img-05 { margin-top: 15%;}
.topic-1 .content-wrap .content-box .img-p { margin:0 auto; }
.topic-1 .popup1 { position:absolute; z-index: 99999; margin:0; bottom:9%; left:68%; }
.topic-1 .popup1 .popup_p1 { position: absolute; width: 300px !important; height:auto; top: -345% !important; left: -375% !important; }
.topic-1 .popup2 { position:absolute; z-index: 99999; margin:0; top: 37%; right: 29%; }
.topic-1 .popup2 .popup_p2 { position: absolute; width: 300px !important; height:auto; top: -315% !important; left: -183% !important; }
.topic-1 .button-icon > p { color:#ebca63; }


/* topic-2 */
.topic-2 { height:auto; }
.topic-2 .img-02 { margin-top: 15%;}
.topic-2 .img-03 { margin: 60px 0 ;}
.topic-2 .img-04 { margin: 100px 0 ;}
.topic-2 .popup1 { position:absolute; z-index: 99999; margin:0; bottom:34%; left:56%; }
.topic-2 .popup1 .popup_p1 { position: absolute; width: 300px !important; height:auto; top: -20% !important; left: -145% !important; }
.topic-2 .popup2 { position:absolute; z-index: 99999; margin:0; bottom: 10%; right: 47%; }
.topic-2 .popup2 .popup_p2 { position: absolute; width: 300px !important; height:auto; top: -400% !important; left: -90% !important; }
.topic-2 .button-icon > p { color:#ebca63; }
.topic-2::after { content: ''; background: linear-gradient(#BFECE0, #FFF); position: absolute; width: 100%; height: 65%; bottom: 0; left: 0; z-index: -1;}

.sub-video { margin-top: 60px;}
.sub-video .txt { margin-top: 60px; max-width: 650px;}

/* topic-3 */
.topic-3 { padding-bottom:0; background: linear-gradient(#D3D2D2, #fff); height:auto; }
.topic-3 .content-box { position: relative;}
.topic-3 .img-01 { margin-top: 20%;}
.topic-3 .txt { position: absolute; left:52%; bottom: 0; width: 40%; text-align: left; }
.topic-3 .popup1 { position:absolute; z-index: 99999; margin:0; bottom:7%; left:39%; }
.topic-3 .popup1 .popup_p1 { position: absolute; width: 300px !important; height:auto; top: -350% !important; left: -180% !important; }
.topic-3 .img-03 { margin: 100px 0;}


/* footer */
.footer { margin: 100px 0; position: relative; z-index: 9;}
.footer .footer-logo { max-width:500px; margin:0 auto; }
.footer .footer-logo img { max-width: 350px;}
.footer .footer-logo .footer-btn { background-color: #000; color:#fff; margin:30px 0; }
.footer .footer-logo .footer-btn > a { padding: 3% 0; display: block; }
.footer .footer-logo .footer-btn > a:hover { color:#fff; }

@media (max-width: 1280px) and (min-width: 1025px) {
	.charm { zoom:0.4; }
}
@media (max-width: 1024px) {
	html { font-size: 20px; }
	.product-popup > button { max-width: 50px;}
	.charm { zoom:0.3; }

	.topic-2::after { height: 60%; }
	
	.topic-1 .popup1 { position:absolute; z-index: 99999; margin:0; bottom:14%; left: 73%; }
	.topic-1 .popup1 .popup_p1 { position: absolute; width: 215px !important; height:auto; top: -440% !important; left: -240% !important; }
	.topic-1 .popup2 { position:absolute; z-index: 99999; margin:0; bottom: 11%; right: 25%; }
	.topic-1 .popup2 .popup_p2 { position: absolute; width: 215px !important; height:auto; top: 0 !important; left: 0 !important; }
	.topic-2 .popup1 { position:absolute; z-index: 99999; margin:0; bottom:36%; left: 59%; }
	.topic-3 .popup1 { position:absolute; z-index: 99999; margin:0; bottom:8%; left: 29%; }
	.topic-3 .popup1 .popup_p1 { position: absolute; width: 300px !important; height: auto; top: -454% !important; left: -80% !important; }
}

@media (max-width: 820px) {
	.br-m { display:block;}
	.br-p { display:none;}
}

@media (max-width: 767px) {
	html { font-size: 16px; }
	.uk-container { padding: 0 5vw;}
	
	.top-nav .logo-01 img { max-width: 120px;}
	.top-nav .logo-02 { height: 65px; max-width: 300px; overflow: hidden; margin: 0 auto;}
	.top-nav .logo-02 video { max-width: 320px !important; width: 320px; max-height: 65px; margin-left: -10px; }
	
	.main-tit .model { position: relative;}
	.main-tit .main-img { max-width: 100% !important; height: auto; }
	.main-tit .uk-slider { display: none;}

	.uk-section .txt { text-align: left; margin: 3rem 1rem;}

	/* about */
	.about-con { padding: 0 5vw 10vw 5vw; }
	.about-con .txt-box .txt-tit { font-size:1.9rem; }
	.about-con .txt-box .txt-sub-tit { font-size:1.9rem; line-height: 1.2; }
	.about-con .txt-box .txt-about { font-size:1rem; padding: 0 0 4%; letter-spacing: -0.05rem; }
	.about-con .txt-box .txt-about .txt-box > p:nth-child(2) { padding:0; }
	
	.about-video { margin: 0 0 10vw 0;}
	.uk-section .uk-grid img { padding: 0;}
	
	/* logo_rolling */
	.logo_rolling { padding:10px 0; }
	.section-slider img { padding: 0; width: 75%; }
	
	.product-popup .txt-product img { max-width: 167px;}
	.product-popup > button { max-width: 35px;}
	.product-popup .uk-drop > div > .txt-product .txt-product-tit { font-size:1.5rem; font-weight:700;}
	.product-popup .uk-drop > div > .txt-product .txt-product-name { font-size:1.1rem; }
	.product-popup .uk-drop > div > .txt-product .txt-product-link a { font-size:0.9rem; color: #000; }
	
	/* charm */
	.charm { zoom:0.2; }
	.topic-1 .charm-01 { margin-top: -22%; margin-right: -15%;}
	.topic-1 .charm-02 { margin-bottom: -12%; margin-left: -13%;}
	.topic-2 .charm-02 { bottom: 0; right: 0; zoom: 0.5; margin-right: -10vw; margin-bottom: -5%; }
	.topic-2 .charm-01 { margin-top: -20%; margin-left: -28%; zoom: 0.16; }
	.topic-3 .charm-01 { margin-top: 60%; left: 0; right: auto; zoom: 0.5; }
	.topic-3 .charm-02 { display: block; right: -10vw; zoom: 0.5; margin-top: -10%; z-index: 999; }
	

	/* topic-1 */
	.uk-section.topic-1 .uk-grid.first img { padding: 0;}
	.topic-1 { height:auto; padding: 10vw 0 0;}
	.topic-1 .img-02 { margin-top: 5vw;}
	.topic-1 .img-03 { margin: 10vw 0 5vw; margin-left: -5vw; width: calc(100% + 10vw);}
	.topic-1 .img-04 { margin: 10vw 0 5vw; margin-left: -5vw; width: calc(100% + 100px);}
	.topic-1 .img-05 { margin: 5vw 0 0; margin-left: -5vw; width: calc(100% + 10vw); margin-right: -5vw;}
	
	
	.topic-1 .popup1 { position:absolute; z-index: 99999; margin:0; bottom:8%; left:auto; right: 18%; }
	.topic-1 .popup1 .popup_p1 { position: absolute; width: 215px !important; height:auto; top: -483% !important; left: -307% !important; }
	.topic-1 .popup2 { position:absolute; z-index: 99999; margin:0; bottom: 11%; right: 7%; }
	.topic-1 .popup2 .popup_p2 { position: absolute; width: 215px !important; height:auto; top: -65% !important; left: -400% !important; }
	
	/* topic-2 */
	.topic-2 { height:auto; }
	.topic-2::after { height: 65%; }
	.topic-2 .content-box { margin: 0;}
	.topic-2 .img-01 { margin: 0 0 5vw 0;}
	.topic-2 .img-02 { margin: 0 0 5vw 0; margin-left: -5vw; width: calc(100% + 10vw); margin-right: -5vw;}
	.topic-2 .img-03 { margin: 0;}
	.topic-2 .img-04 { margin: 5vw 0 0; margin-left: -5vw; width: calc(100% + 10vw); margin-right: -5vw;}
	
	.topic-2 .popup1 { position: absolute; z-index: 99999; margin: 0; bottom: 35%; left: 57%; }
	.topic-2 .popup1 .popup_p1 { position: absolute; width: 215px !important; height:auto; top: -440% !important; left: -240% !important; }
	.topic-2 .popup2 { position:absolute; z-index: 99999; margin:0; bottom: 6%; right: 18%; }
	.topic-2 .popup2 .popup_p2 { position: absolute; width: 215px !important; height:auto; top: -500% !important; left: -400% !important; }
	.sub-video .txt { margin-top: 5vw; margin-left: 7vw;}
	
	.topic-3 { padding-top: 10vw;}
	.topic-3 .img-01 { margin-top: 0;}
	.topic-3 .img-02 { margin: 5vw 0 0; margin-left: -5vw; width: calc(100% + 10vw); margin-right: -5vw;}
	.topic-3 .txt { position: relative; left: 0; width: 100%; margin-top: 5vw;}
	.topic-3 .popup1 { position:absolute; z-index: 99999; margin:0; bottom:6%; left:39%; }
	.topic-3 .popup1 .popup_p1 { position: absolute; width: 215px !important; height:auto; top: -530% !important; left: -240% !important; }
	.topic-3 .img-03 { margin: 5vw 0;}

	.charm-footer { margin-bottom: 2%; bottom: 0; zoom: 0.16 !important; }
	
	.footer { margin: 10vw 0;}
	.footer .footer-logo { max-width: 185px;}
	.footer .footer-logo img { max-width: 135px;}
	.footer .footer-logo .footer-btn { margin: 10px;}
	.footer .footer-logo .footer-btn > a { padding: 0;}

}

@media (max-width: 638px) {
	html { font-size: 13px; }
}
@media (max-width: 390px) {
	.br-m { display:none;}
}




#main_video video.video-js { display: none; }
.video-js	{ width:100%; height:100%; max-width: 100%; }
.vjs-tech	{ position:relative !important; max-height:800px; 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; }