@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@1.0/nanumbarungothicsubset.css"); /* 200, 300, 400, 700 */
@import url('https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap');

/* CSS Document */

/**********************
Publishing : Lee Bit-na
Beginning : 2019-04-10
Final : 
***********************/

/* Font */
/********** SUIT ***********/
@font-face {
	font-family: 'SUIT';
	font-weight: 100;
	src: 
	url('../fonts/SUIT/SUIT-Thin.woff2') format('woff2'),
	url('../fonts/SUIT/SUIT-Thin.ttf') format('truetype');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 200;
	src: 
	url('../fonts/SUIT/SUIT-ExtraLight.woff2') format('woff2'),
	url('../fonts/SUIT/SUIT-ExtraLight.ttf') format('truetype');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 300;
	src: 
	url('../fonts/SUIT/SUIT-Light.woff2') format('woff2'),
	url('../fonts/SUIT/SUIT-Light.ttf') format('truetype');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 400;
	src: 
	url('../fonts/SUIT/SUIT-Regular.woff2') format('woff2'),
	url('../fonts/SUIT/SUIT-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 500;
	src: 
	url('../fonts/SUIT/SUIT-Medium.woff2') format('woff2'),
	url('../fonts/SUIT/SUIT-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 600;
	src: 
	url('../fonts/SUIT/SUIT-SemiBold.woff2') format('woff2'),
	url('../fonts/SUIT/SUIT-SemiBold.ttf') format('truetype');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 700;
	src: 
	url('../fonts/SUIT/SUIT-Bold.woff2') format('woff2'),
	url('../fonts/SUIT/SUIT-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'SUIT';
	font-weight: 800;
	src: 
	url('../fonts/SUIT/SUIT-ExtraBold.woff2') format('woff2'),
	url('../fonts/SUIT/SUIT-ExtraBold.ttf') format('truetype');
}

@font-face {
	font-family: 'SUIT';
	font-weight: 900;
	src: 
	url('../fonts/SUIT/SUIT-Heavy.woff2') format('woff2'),
	url('../fonts/SUIT/SUIT-Heavy.ttf') format('truetype');
}
/* Reset */
* {margin:0; padding:0}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select {margin:0;padding:0}  
body,input,textarea,select,button,table{font-family:'SUIT', 'sans-serif'; color:#666; vertical-align: baseline; font-size: 14px; font-weight: 300; word-break: keep-all}  
img,fieldset{border:0}  
i,em,address{font-style:normal}
ul,ol,li{list-style:none; padding:0; margin:0}  
em,address{font-style:normal}
label,button{cursor:pointer}
button{margin:0;padding:0}  
img {vertical-align:top}

html,body{height:100%; width:100%}
.bx-wrapper {margin: 0}
a { selector-dummy : expression(this.hideFocus=true);}
a:link {color:#777; text-decoration: none;}
a:visited {color:#777; text-decoration: none;}
a:hover {color:#777; text-decoration: none;}
a:active {color:#777; text-decoration: none;}
a:focus {outline:none;}

button { selector-dummy : expression(this.hideFocus=true);}
button:focus {outline:none;}

select { -webkit-appearance: listbox; }
input { border-radius:0;}
legend{*width:0}
table{border-collapse:collapse; border-spacing:0}

h1,h2,h3,h4,dt,dd,em {font-weight: normal}
h1 sup, h2 sup, h3 sup, h4 sup, p sup, a sup, dd sup, sup { 
  font-size: 0.4em; 
  position: relative;
  top: 0;
}
.blind{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}
.skip-contents, caption, legend {overflow: hidden; position: absolute; height:0; width:0; font-size: 0; text-indent: -9999px;}

select {-webkit-appearance: none; border-radius:0; padding:5px 20px 5px 5px; background: #fff url('../images/bbs_select_arrow.gif') no-repeat right center; border:1px solid #ddd;}
.blind {
    display: block;
    position: absolute;
    top: -5000px;
    left: 0;
    overflow: hidden;
    opacity: 0;
    width: 0;
    height: 0;
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.videoWrapper video{
	position: absolute;
	overflow: hidden;
	right: 0;
	bottom: 0;
	top:0;
	right:0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	background-size: 100% 100%;
	background-color: black; /* in case the video doesn't fit the whole page*/
 	background-image: /* our video */;
 	background-position: center center;
 	background-size: contain;
    object-fit: cover; /*cover video background */
	z-index:-1;
}


/* 트랜지션 */
.transition {   
	 -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}


/* select 박스 */
.selectbox_title {position:relative; vertical-align:middle; display:block; cursor:pointer; *zoom:1;}
.selectbox_title strong {position:relative; width:100%; display:block; text-align:left; height:40px; color:#666; line-height:40px; border:1px solid #ddd; background:#fff url('../images/bbs_select_arrow.gif') no-repeat right center ; font-weight:normal;margin:0; padding: 0 19px 0 10px;}
.selectbox_option{border:1px solid #d3d3d3;background:#fff;overflow:hidden; width:100%}
.selectbox_option li{list-style:none; margin:0}
.iteminfor .cont li .selectbox_option li{list-style:none; margin:0}
.selectbox_option a{color:#888;word-break:break-all;font-size:12px; line-height:16px; text-decoration:none; padding:8px 5px 8px;_padding:6px 5px 5px; display:block;overflow:hidden;}
.selectbox_option a.on,
.selectbox_option a:hover{color:#000;background:#eee;}

.sorting_input select.selectbox_title {width: 278px}

.visual video{
	position: absolute;
	overflow: hidden;
	right: 0;
	bottom: 0;
	top:0;
	right:0;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	background-size: 100% 100%;
	background-color: black; /* in case the video doesn't fit the whole page*/
		background-image: /* our video */;
		background-position: center center;
		background-size: contain;
	  object-fit: cover; /*cover video background */
	z-index:-1;
}


/* 애니메이션 */
.transition {	    
	-webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
}

.active [class*="fadeIn"] {opacity: 0;}	
section .fadeInUp, section .fadeInLeft, section .fadeInRight {opacity: 0}

.fp-section.active .fadeInUp{
	animation-name: fadeInUp;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.44,0.01,0.64,0.99);
	animation-fill-mode: forwards;
	animation-delay:0;
}

.fp-slide.active .fadeInUpSlide{
	animation-name: fadeInUp;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.44,0.01,0.64,0.99);
	animation-fill-mode: forwards;
	animation-delay:0.2s;
}

.section.active .fadeInUp:nth-child(1){animation-delay:0}
.section.active .fadeInUp:nth-child(2){animation-delay:0.3s}
.section.active .fadeInUp:nth-child(3){animation-delay:0.6s}
.section.active .fadeInUp:nth-child(4){animation-delay:0.9s}
.section.active .fadeInUp:nth-child(5){animation-delay:1.2s}
.section.active .fadeInUp:nth-child(6){animation-delay:1.5s}
.section.active .fadeInUp:nth-child(7){animation-delay:1.8s}
.section.active .fadeInUp:nth-child(8){animation-delay:2.1s}
.section.active .fadeInUp:nth-child(9){animation-delay:2.4s}
.section.active .fadeInUp:nth-child(10){animation-delay:2.6s}


.section.active .fadeInLeft{
	animation-name: fadeInLeft;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.44,0.01,0.64,0.99);
	animation-fill-mode: forwards;
	animation-delay:.5s;
}

.section.active .fadeInLeft:nth-child(1){animation-delay: 0}
.section.active .fadeInLeft:nth-child(2){animation-delay: 0.3s}
.section.active .fadeInLeft:nth-child(3){animation-delay: 0.6s}
.section.active .fadeInLeft:nth-child(4){animation-delay: 0.9s}
.section.active .fadeInLeft:nth-child(2){animation-delay: 1.2s}
.section.active .fadeInLeft:nth-child(3){animation-delay: 1.5s}
.section.active .fadeInLeft:nth-child(4){animation-delay: 1.8s}

.section.active .fadeInRight{
	animation-name: fadeInRight;
	animation-duration: 1s;
	animation-timing-function: cubic-bezier(0.44,0.01,0.64,0.99);
	animation-fill-mode: forwards;
	animation-delay:.5s;
}	

.section.active .fadeInRight:nth-child(1){animation-delay: 0}
.section.active .fadeInRight:nth-child(2){animation-delay: 0.3s}
.section.active .fadeInRight:nth-child(3){animation-delay: 0.6s}
.section.active .fadeInRight:nth-child(4){animation-delay: 0.9s}
.section.active .fadeInRight:nth-child(2){animation-delay: 1.2s}
.section.active .fadeInRight:nth-child(3){animation-delay: 1.5s}
.section.active .fadeInRight:nth-child(4){animation-delay: 1.8s}

 
@-webkit-keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 50px, 0);
		transform: translate3d(0, 50px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 50px, 0);
		transform: translate3d(0, 50px, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@-webkit-keyframes fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(100px, 0, 0);
		transform: translate3d(100px, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(100px, 0, 0);
		transform: translate3d(100px, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@-webkit-keyframes fadeInLeft {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-100px, 0, 0);
		transform: translate3d(-100px, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
@keyframes fadeInLeft {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-100px, 0, 0);
		transform: translate3d(-100px, 0, 0);
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

.pop_txt_wrap {padding: 10px; background: #333; font-family:'Noto Sans KR','NanumBarun', 'NanumSquare', 'Nanum Gothic', 'Malgun Gothic','dotum'; text-align: left}

.mobile_pop {position: absolute;  left:5%; top: 10%;   z-index: 50; border: 0px; width:600px;}
.mobile_pop img {width:100%}	

@media screen and (max-width:500px) {	
.mobile_pop {position: absolute;  left:50%; top: 50%; margin:-190px 0 0 -170px;   z-index: 50; border: 0px; width:340px;}
.mobile_pop img {width:100%}	
}

/* 영상 전체 배경 */
.section.main_product.mv .bg_video_wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.section.main_product.mv .bg_video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* 검정 딤 (0.7 불투명도) */
.section.main_product.mv .bg_video_wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  pointer-events: none;
  z-index: 1;
}