/*==============================================
web 퍼블리싱 
==============================================*/
body {
	background: #ffd34c;
}
/* top 버튼 */
#top{
	display: none;
	position: fixed;
	width: 72px; 
    height: 83px;
    bottom: 3px;
    right: 8px;
    z-index: 11;
}

/* floating */
.rightFloating{
	background :url('../images/img_rightFloating.png') no-repeat;
    position: fixed;
    width: 185px;
    height: 177px;
    top: 52px;
    right: 22px;
    z-index: 11;
}
.rightFloating a.btn_google{ position: absolute; z-index: 10; cursor: pointer; width: 100%; height: 57px; top : 59px  }
.rightFloating a.btn_apple{ position: absolute; z-index: 10; cursor: pointer; width: 100%; height: 57px; }
.rightFloating a.btn_community{ position: absolute; z-index: 10; cursor: pointer; width: 100%; height: 57px; top: 119px; }


/* leftFloating */
.leftFloating{
	display: block;
	position: fixed;
    width: 38px;
    height: 38px;
    top: 40px;
    left: 23px;
    z-index: 11;
    
}
.leftFloating a{
	display: block;
	cursor: pointer;
}

.leftFloating a.btn_menuOpen { display: block; width: 38px; height: 38px; z-index: 1; position: absolute; top: 8px; left: 0px; background: url(../images/btn_menuOpen.png) no-repeat;}



/******* header *******/
header {
    display: block;
    position: fixed;
    width: 180px;  
    height: 100%;
    top: 0%;
    left: -50%;    
    z-index: 99999;
    background: #1b103c;
	transition: 0.5s all;
}
header .img_menuToplogo { width: 100%; height: 126px; display: block; background: url(../images/img_menuToplogo.jpg)no-repeat; }
header .btn_menuClosed { width: 36px; height: 37px; position: absolute; right: -36px; top: 45px; display: block; background: url(../images/btn_menuClosed.png)no-repeat; }
header ul {width:100%; height: 100% }
header ul li{position: relative; width: 100%; display: block ; transition: all .3s;}
header ul li:last-child{margin-bottom:0}
header ul li .line{display:block; position: absolute; top:18px; left:8px; width:1px; height:33px;}

header .menu li a {
	display:block; 	
	cursor: pointer;
	width: 100%;
	height:75px; 
	text-indent: -9999px; 
	background-position: 0 0; 
	background-repeat: no-repeat;
	transition: .4s ease-out;
}
header .menu li.menu0 a {background-position:0 0; height: 47px; }
header .menu li.menu1 a{ background-position: 0 -48px; }
header .menu li.menu2 a{ background-position: 0 -123px; } 
header .menu li.menu3 a{ background-position: 0 -198px; }
header .menu li.menu4 a{ background-position: 0 -273px; }
header .menu li.menu5 a{ background-position: 0 -348px; }
header .menu li.menu6 a{ background-position: 0 -423px; }


header ul li a{
	background-image:url('../images/nav_menu_off.jpg'); 
}
header ul li a{
	background-image:url('../images/nav_menu_off.jpg'); 
}


header ul li a:hover, header ul li.active a{
	background-image:url('../images/nav_menu_on.jpg'); 
	background-position: 0 0; 
	background-repeat: no-repeat; 
}

header ul li a:hover, header ul li.active a{
	background-image:url('../images/nav_menu_on.jpg'); 
	background-position: 0 0; 
	background-repeat: no-repeat; 
}


header ul li.menu0 a:hover, header ul li.menu0.active a{background-position:0 0; }
header ul li.menu1 a:hover, header ul li.menu1.active a{background-position:0 -48px; }
header ul li.menu2 a:hover, header ul li.menu2.active a{background-position:0 -123px; }
header ul li.menu3 a:hover, header ul li.menu3.active a{background-position:0 -198px; }
header ul li.menu4 a:hover, header ul li.menu4.active a{background-position:0 -273px; }
header ul li.menu5 a:hover, header ul li.menu5.active a{background-position:0 -348px; }
header ul li.menu6 a:hover, header ul li.menu6.active a{background-position:0 -423px; }



/******* footer *******/
footer{position: relative; background-color: #dfdfdf; width:100%; height:50px; line-height:50px; text-align: center;}
footer p{display: inline; font-size: 14px; font-family: 'malgun Gothic'; color:#1c1c1c; font-weight: 100; padding:0 20px;}
footer .flogo img{padding-top:14px}

.btn_couponOpen { position: absolute; z-index: 15; width: 326px; height: 151px; left: 29.1%; top: 50%; cursor: pointer; background: url(../images/btn_couponOpen.png) no-repeat; }
div.btn_couponOpen_after { position: absolute; z-index: 15; width: 326px; height: 151px; left: 29.1%; top: 50%; cursor: pointer; background: url(../images/btn_couponOpen_after.png) no-repeat; }
div.btn_couponOpen_after p { overflow: hidden; width: 200px; height: 70px; line-height: 70px; position: absolute; top: 58px; left: 16px; z-index: 10; font-size: 21px; color: #261940; }
div.btn_couponOpen_after .btn_copy { position: absolute; z-index: 15; width: 66px; height: 37px; right: 13%; top: 51%; cursor: pointer; }
p.coupon_count { overflow: hidden; width: 292px; height: 45px; line-height: 45px; position: absolute; top: 150px; left: 16px; z-index: 10; font-size: 16px; color: #98d1da; text-align: center;  }

/******* section 공통 *******/
.section{ 
	width:100%; 
	min-width: 1000px;	
	position:relative;
	overflow: hidden;
	top:0;
	text-align: center;
}
.element{ 
	position: relative; 
	z-index: 2;
	 width: 1000px; 
	 /* height:100%;  */
	 margin: 0 auto; 	 
}

#section1 .element .contents{
    position: absolute;
    z-index: 15;
    left: 97px;
    top: 359px;
}

/******* #section0 main *******/
#section0{
	background:url(../images/bg_main.jpg) no-repeat center top;	
	height:1001px;
	background-color: #6015ad;	
}
#section0 .element{
	background:url(../images/bg_main_ele.jpg) no-repeat center top;	
	height:1001px;
}

/******* #section1 main *******/
#section1{
	background:url(../images/bg_event1.jpg) no-repeat center top;	
	height:712px;
}
#section1 .element{
	background:url(../images/bg_event1_ele.jpg) no-repeat center top;	
	height:712px;
}

/******* #section2 main *******/
#section2{
	background:url(../images/bg_event2.jpg) no-repeat center top;	
	height:915px;
}
#section2 .element{
	background:url(../images/bg_event2_ele_0414.jpg) no-repeat center top;	
	height:915px;
}

/******* #section3 main *******/
#section3{
	background:url(../images/bg_event3.jpg) no-repeat center top;	
	height:839px;
}
#section3 .element{
	background:url(../images/bg_event3_ele.jpg) no-repeat center top;	
	height:839px;
}

/******* #section4 main *******/
#section4{
	background:url(../images/bg_event4.jpg) no-repeat center top;	
	height:749px;
}
#section4 .element{
	background:url(../images/bg_event4_ele.jpg) no-repeat center top;	
	height:749px;
}

/******* #section5 main *******/
#section5{
	background:url(../images/bg_event5.jpg) no-repeat center top;	
	height:676px;
}
#section5 .element{
	background:url(../images/bg_event5_ele.jpg) no-repeat center top;	
	height:676px;
}

/******* #section6 main *******/
#section6{
	background:url(../images/bg_event6.jpg) no-repeat center top;	
	height:1428px;
}
#section6 .element{
	background:url(../images/bg_event6_ele.jpg) no-repeat center top;	
	height:1428px;
}
#section6 .btn_crossEvent { position: absolute; z-index: 10; width: 384px; height: 80px; left: 31%; bottom: 20%; cursor: pointer; background: url(../images/btn_crossEvent_off.png) no-repeat; }
#section6 .btn_crossEvent:hover{ position: absolute; z-index: 10; width: 384px; height: 80px; left: 31%; bottom: 20%; cursor: pointer; background: url(../images/btn_crossEvent_on.png) no-repeat; }
#section6 .footerBackground { width : 100%; height: 173px; background: #252525; position: absolute; bottom: 0; }


/* 동영상배경 */
.bgVideoContainer {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 1080px;
    z-index: 1;
}

.bgShadow {
    position: absolute;
    width: 100%;
	height: 1080px;
	background : rgba(0, 0, 0, 0.4);
    /* background: url(../images/bg_shadow.png) no-repeat bottom center; */
}
.bgVideo { 
	/* width: 100%; */
    height: 1080px;
}





/******* 스크롤네비 *******/
.scrolldownContainer img { 
	position: absolute;
	left: -118%;
	top: -25%;
}

.scrolldownContainer {
    position: absolute;
    width: 33px;
    height: 70px;
    z-index: 10;
    top: 90%;
    left: 48.6%;
  }
  
  .chevron {
	position: absolute;
	width: 28px;
	height: 8px;
	opacity: 0;
	transform: scale3d(0.5, 0.5, 0.5);
	animation: move 3s ease-out infinite;
  }
  
  .chevron:first-child {
	animation: move 3s ease-out 1s infinite;
  }
  
  .chevron:nth-child(2) {
	animation: move 3s ease-out 2s infinite;
  }
  
  .chevron:before,
  .chevron:after {
	content: ' ';
	position: absolute;
	top: 0;
	height: 100%;
	width: 51%;
	background: #fff;
  }
  
  .chevron:before {
	left: 0;
	transform: skew(0deg, 30deg);
  }
  
  .chevron:after {
	right: 0;
	width: 50%;
	transform: skew(0deg, -30deg);
  }
  
  @keyframes move {
	25% {
	  opacity: 1;
  
	}
	33% {
	  opacity: 1;
	  transform: translateY(30px);
	}
	67% {
	  opacity: 1;
	  transform: translateY(40px);
	}
	100% {
	  opacity: 0;
	  transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
	}
  }
  

  
  @keyframes pulse {
	to {
	  opacity: 1;
	}
  }







@media all and (max-width: 1500px) {
	header .img_menuToplogo {
		display: none;
	}
	header ul {
		margin-top: 50px;
	}

}