@charset "utf-8";

/* CSS Document */

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

/* 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:'Archivo', 'Noto Sans KR'; color:#333; vertical-align: baseline; font-size: 16px; font-weight: 400; word-break: keep-all; color: #222}  
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:middle}

html,body{height:100%; width:100%}
.bx-wrapper {margin: 0}
a { selector-dummy : expression(this.hideFocus=true);}
a:link {color:#222; text-decoration: none;}
a:visited {color:#222; text-decoration: none;}
a:hover {color:#222; text-decoration: none;}
a:active {color:#222; 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;
}

.video-container {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%; 
  overflow: hidden;
}

.video-container video {
  /* Make video to at least 100% wide and tall */
  min-width: 100%; 
  min-height: 100%; 
  
  /* Setting width & height to auto prevents the browser from stretching or squishing the video */
  width: auto;
  height: auto;
  
  /* Center the video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}



/**/
.brand_video {height: 100vh; overflow:hidden; position: relative}
.brand_video 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: #fff; /* 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: 1.5s;
	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: 2s;
	animation-timing-function: cubic-bezier(0.44,0.01,0.64,0.99);
	animation-fill-mode: forwards;
	animation-delay:0;
}

.section.active .fadeInUp:nth-child(1){animation-delay:0.5s}
.section.active .fadeInUp:nth-child(2){animation-delay:1s}
.section.active .fadeInUp:nth-child(3){animation-delay:1.5s}
.section.active .fadeInUp:nth-child(4){animation-delay:2s}
.section.active .fadeInUp:nth-child(5){animation-delay:2.5s}
.section.active .fadeInUp:nth-child(6){animation-delay:3s}
.section.active .fadeInUp:nth-child(7){animation-delay:3.5s}
.section.active .fadeInUp:nth-child(8){animation-delay:4s}
.section.active .fadeInUp:nth-child(9){animation-delay:4.5s}
.section.active .fadeInUp:nth-child(10){animation-delay:5s}


.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 {clear: both; padding: 10px; background: #000; font-size: 12px; 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:530px;}
.mobile_pop img {width:100%}	
*/
.mobile_pop .btn {border: 0; background: none; line-height: 1em; color: #fff}
.mobile_pop .close {border: 0; background: none; line-height: 1em; color: #fff; font-size: 22px; float: right; padding: 0 10px}



#popup1 {position: fixed !important; width: 100% !important; height: 100% !important; top:0 !important; left: 0 !important; right: 0 !important; height: 100%; background:rgba(0,0,0,.5); z-index: 102 !important}
#popup1 .popup_wrap {width: 400px; height:auto;position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%)}

#divpop3 {width: 100%; height: 100vh; position: fixed;  z-index: 201;}
#divpop3 .popup_wrap {top:50%; left: 50%; transform: translate(-50%, -50%); width:406px;height:605px;}/*margin-left:220px;*/
/* intro popup */

.btn_full {position: absolute; display: block; width: 50px; height: 50px; left: 0; top:0; z-index: 100; ; background: url("../images/common/pop_expand.png") no-repeat center center; background-size: 16px}
.pop_txt_wrap {position: absolute; left: 0; bottom: -40px; right: 0;}

.mobile_pop {position: absolute;  left:0; top: 0; z-index: 50; border: 0px; }
.mobile_pop img {width:100%}	
.popup_wrap {position: absolute; width: 338px; height: 396px;}
.popup_wrap .content .btn_link {display: block; position: absolute; left: 0; bottom: 0; right: 0; height: 60px;}
.popup_wrap .btn_close {display: block; width: 42px; height: 42px; position: absolute; top:0; right: 0; background: url('../images/common/pop_close.png') no-repeat center center; background-size: 15px}

#popup4{left:50% !important;transform:translateX(-50%);}
#popup4 .popup_wrap{width:100%;height:100%;background:#fff;}
#popup4 .pop_txt_wrap{bottom:0;}

#divpop4 {width: 406px;height:605px; position: fixed; z-index: 300; top:50%; left: 50%; transform: translate(-50%, -50%); margin-left:-220px;}
#divpop4 .popup_wrap{width:100%;height:605px;}
#divpop4 .popup_wrap .content {overflow: hidden;width:100%;}

#divpop5 {
	position: absolute;
	left: 0;
	
	z-index: 999;
	border: 0px;
	width: 100%;
	height: 100vh;
	overflow-y: auto;
	background:rgba(0,0,0,.4);
}

#divpop5 .popup_wrap{position: absolute;
	width: 650px;
	height: auto;
	background: #fff;
	top: 100px;
	left: 50%;
	transform: translateX(-50%);}


@media screen and (max-width:768px){
	#popup4{height:auto;}
	#popup4 .popup_wrap{top:50px;left:50%;transform:translateX(-50%);width:500px;height:auto;}
	#popup4 .pop_txt_wrap{bottom:-40px;}
	
	#divpop5 .popup_wrap{width:500px;}
}

@media screen and (max-width:500px) {	
	.mobile_pop {width:300px; height:auto;}
	.mobile_pop img {width:100% !important}	
	#popup2 {overflow: scroll !important}
	.pop_210521 {width: 100% !important; float: none !important}
	#popup1 .popup_wrap {width: 320px}
	#popup4 .popup_wrap{width:320px;}
	
	#divpop5{margin:0;}
	#divpop5 .popup_wrap{width:320px;}
	

}

.emp_msg {font-size: 10px; position: absolute; left: 10px; text-align:left; right: 10px; bottom: 10px; color: #fff; opacity: .9}
.emp_msg strong {font-size: 14px; display: block; margin-bottom: 5px; font-weight: 500; letter-spacing: -.5px}

.pop_210521 {width: 400px; float: left}
.pop_210512 {}
.pop_210512 img {max-width: 100%; vertical-align: top} 


@media screen and (max-width:1024px){
	#divpop3 .popup_wrap{width:300px;height:447px;}/*margin-left:160px;*/
	#divpop4{width:300px;height:447px;margin-left:-160px;}
	#divpop4 .popup_wrap{height:447px;}
}

@media screen and (max-width:768px){
	#divpop3.mobile_pop{margin:0;}
	#divpop3 .popup_wrap{transform: translate(-50%, -50%);margin:0;}
	/* #divpop4 .popup_wrap{transform: translate(-50%, -50%);} */
	#divpop4{transform: translate(-50%, -50%);margin:0;}

}