@charset "utf-8";

@font-face {
  font-family:'SupremeLL';
  src:url('../webfont/SupremeLL-Medium.otf') format('opentype');
  font-weight:normal;
  font-style:normal;
}

@font-face {
font-family:'NotoSansKR';
src:local(※),
    url('../webfont/NotoSansKR-Medium.woff') format('woff'),
    url('../webfont/NotoSansKR-Medium.woff2') format('woff2'),
    url('../webfont/NotoSansKR-Medium.otf') format('opentype');
    font-style:normal;
    font-weight:normal;
}


/********** 초기화 **********/
/** Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) **/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend, caption,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin:0; padding:0; border:0; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
ul,ol { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content:none; }
table { border-spacing:0; border-collapse:collapse; }

/* 초기화 추가 */
img { margin:0; vertical-align:middle; }
fieldset,img,iframe { border:0; }
h1, h2, h3, h4, h5, h6, em, address { font-style:normal; }

caption,legend,.hidden { visibility:hidden; overflow:hidden; width:0; height:0; font-size:0; line-height:0; }

a { text-decoration:none; cursor: pointer; outline: none; color: #000; }
a:hover { text-decoration:underline; }
input, textarea, button { margin:0; border:0; vertical-align:middle; outline:none; }

iframe { outline:none; }
input[type=text]::-ms-clear,input[type=password]::-ms-clear { display:none; }
legend { display:none; }

a[href], input[type='submit'], input[type='image'], input[type='button'], label[for], button, pointer { cursor:pointer; }

/*** IE Scroll ***/
body {
	scrollbar-highlight-color:#ccc;
	scrollbar-shadow-color:#ccc;

	scrollbar-3dlight-color:#fff;
	scrollbar-face-color:#fff;
	scrollbar-darkshadow-color:#fff;

	scrollbar-arrow-color:#fff;
	scrollbar-track-color:#fff;

	scrollbar-dark-shadow-color:#fff;
	scrollbar-base-color:#ccc;
}

/*** Chrom Scroll ***/
::-webkit-scrollbar { width:7px; height:7px; }
::-webkit-scrollbar-track { border:1px solid #ccc; -webkit-border-radius:0; border-radius:0; }
::-webkit-scrollbar-thumb { -webkit-border-radius:0; border-radius:0; background:#fff; border:1px solid #ccc; }
::-webkit-scrollbar-thumb:window-inactive {	background:#fff; }


/********** Common **********/
h1 { font-size:2em; }
h2 { font-size:1.5em; }
h3 { font-size:1.17em; }
h4 { font-size:1em; }
h5 { font-size:.83em; }
h6 { font-size:.67em; }

.flex { display: flex; }
.flex-center { display: flex; justify-content: center; align-items: center; }

.fl { float:left; }
.fr { float:right; }

.txt-l { text-align:left!important; }
.txt-r { text-align:right; }
.txt-c { text-align:center!important; }

.fw700 { font-weight: 700; }

.mt4 { margin-top:4px!important; }
.mt5 { margin-top:5px!important; }
.mt10 { margin-top:10px!important; }
.mt50 { margin-top:50px; }
.mt100 { margin-top:100px; }

.mr4 { margin-right: 4px; }
.mr5 { margin-right: 5px; }
.mr50 { margin-right: 50px; }

.mb50 { margin-bottom:50px; }

.pt70 { padding-top:70px; }

.bds1 { border:1px solid #cdcdcd; }

.ellipsis { overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:nowrap; }

.over-line-y { overflow-y:auto; width:100%; border-bottom:1px solid #ebebeb; }
.over-y { overflow-y:auto; width:100%; }

.btn-container-r { width:100%; vertical-align:middle; text-align:right; }
.btn-container-c { width:100%; vertical-align:middle; text-align:center; }

.clear { clear: both; }

.txt-white { color: #fff; }
.txt-gray { color: #aaa; }

.txt-glow { text-shadow: 0 0 3px rgba(0, 0, 0, 1); }

* { box-sizing: border-box; }


/********** Contents **********/
html { font-size:10px; }
body { font-size:1.3rem; font-family:"NotoSansKR", "Malgun Gothic", Verdana, Dotum, AppleGothic, sans-serif; letter-spacing:0; }

html { margin: 0; padding:0; width:100%; height:100%; overflow: hidden; }/* overflow-x:hidden;  overflow-y:auto; */
body { margin: 0; padding:0; width:100%; height:100%; color: #0E0E0E; background:#000;  }


/********** Contents **********/
.en { font-family: "SupremeLL", Verdana, Dotum, AppleGothic, sans-serif!important; }

/* header */
.header { position: absolute; top: 0; left: 0; display: flex; flex-direction: row;  z-index: 100; padding: 0 2rem; width: 100%; }
.header .logo { flex:100%; z-index: 1; flex: 1; padding:1rem 0; text-align: left; font-size: 0; line-height: 1; }
.header .logo img { width:auto; height:7rem; }
.header .link-shop { flex:1%; display:flex; justify-content:flex-end; margin:2rem 0 0 0; }
.header .link-shop a { display: inline-block; color:#fff; font-size:1.2rem; }
.header .link-shop a svg { margin-right:5px; margin-bottom:6px; vertical-align: middle; }

/* link */
.link { position: absolute; bottom:15rem; z-index: 100; width: 100%; text-align: center; }
.link > a { display:inline-block; padding:0.3rem 2.7rem 0.7rem; background:#fff; color:#000; font-size:1.4rem; }
.link > a:hover { text-decoration: none; }
.link > p { display: block; margin-bottom:4rem; color:#fff; font-size:2.4rem; line-height:1.2; }



/* slider */
#slider_container {  position: relative; width: 100vw; height: 100vh; touch-action: pan-y;}

.slide_item {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	opacity: 0; visibility: hidden; transition: opacity 1s ease-in-out; z-index: 1; }

.slide_item.active { opacity: 1;  visibility: visible;  z-index: 2; }

/* 이미지 및 비디오 꽉 채우기 */
.slide_item picture, .slide_item img, .yt-container {
	display: block; width: 100%; height: 100%; object-fit: cover; border: none;
}

.yt-container{position: relative; background: #000;}
.yt-player {width: 100; height: 100%; pointer-events: auto;}

.video_guard{
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index:10;
	background: rgba(0, 0, 0, 0);
}

/* PC에서 가드 무시 */
@media screen and (min-width: 769px) {
	.video_guard{ pointer-events:none; }
}
/* 컨트롤러 */
.btn {  position: absolute; top: 50%; transform: translateY(-50%); padding-bottom:5px; width: 3.5rem; height: 3.5rem; background: rgba(255, 255, 255, 0.4); color: #fff; border: none; cursor: pointer; font-size:2rem; z-index: 100; border-radius: 50%; }
.btn_prev { left: 2rem; padding-right:9px; }
.btn_next { right: 2rem; padding-left:9px;  }

.dots { position: absolute; bottom:7rem; width: 100%; text-align: center; z-index: 100; }
.dot { display: inline-block; width: 10px; height: 10px; background: rgba(255,255,255,0.4); margin: 0 6px; border-radius: 50%; cursor: pointer; }
.dot.active { background: #fff; }

/* 모바일 전용 UI */
@media screen and (max-width: 768px) {
	
	.header { padding: 0 1rem; }
	.header .logo img { height:3rem; }
	
	.header .link-shop { margin-top:.9rem; }
	.header .link-shop a { font-size:1rem; }
	.header .link-shop a svg { margin-right:1px; margin-bottom:0; width:1rem; vertical-align: middle; }
	.header .link-shop a span { display: inline-block; margin-bottom:-1px; vertical-align:middle; }
	
    .btn { display: none; }

	.link { bottom:7rem; }
	.link > p { margin-bottom:2.4rem; font-size:1.8rem; }
	.link > a { padding:0.3rem 2rem 0.4rem;}
	

	.dots { bottom:2.7rem; pointer-events:none;}
    .dot {width:8px; height:8px; margin: 0 4px; pointer-events: auto;}
}