html, body{font-family: "Noto Sans KR", sans-serif;}

/*header */
#header .floatingMenu{position: fixed; right:4% ;top:8vh; width: 13%; max-width: 200px; min-width:100px; z-index: 3;}
#header .floatingMenu ul li{ margin-bottom: 5px;}
#header .floatingMenu ul li:last-child{ margin-bottom: 0;}
#header .floatingMenu ul li a{width:100%; height:100%; display: block;}
#header .floatingMenu ul li a img{width:100%}

#header .navMenu{	
	position: fixed; display: block; top:52vh; right: 4%; width: 13%; max-width: 200px; min-width: 100px; z-index: 4;transition: all 0.2s; }
#header .navMenu ul li { display: block; width: 100%;  padding:5% 0}
#header .navMenu ul li.menu0 {width:100px; height:75px; padding:2px 80px}
#header .navMenu ul li a{display:block; width: 100%; height: 26px; background-position: center top; background-repeat: no-repeat; background-size: contain;}

/* #header .navMenu ul li.menu0 a{background:url('../images/img_logo.png') no-repeat left top; background-size:cover } */
#header .navMenu ul li.menu1 a{ background-image: url('../images/btn_menu1_off.png'); }
#header .navMenu ul li.menu2 a{ background-image: url('../images/btn_menu2_off.png');}
#header .navMenu ul li.menu1 a:hover, #header .navMenu ul li.menu1.active a{ background-image: url('../images/btn_menu1_on.png'); }
#header .navMenu ul li.menu2 a:hover, #header .navMenu ul li.menu2.active a{ background-image: url('../images/btn_menu2_on.png');}


/* wrap 내 컨텐츠 중앙정렬 div.element */
#wrap{position:relative; overflow:hidden; width:100%; min-width: 1200px;}
.section{ 
	width:100%; 
	min-width: 1200px;
	height:100%;
	position:relative;
	overflow: hidden;
  background-size: cover;
  z-index: 2;
}
.element{ 
	position: relative; 
	z-index: 2;
	 width: 1200px; 
	 height:100%; 
	 margin: 0 auto; 	 
}

/* *******************************************
	main (section0)
  ******************************************* */

/* 동영상배경 */
.bgVideoContainer {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 940px;
    z-index: 1;
}
.bgShadow {
    position: absolute;
    width: 100%;
	height: 940px;
	background : rgba(0, 0, 0, 0.5);
}
.bgVideo { 
	position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: -1;
    overflow: hidden;
}
#section0  {
  background: url(../images/bg_main.jpg) no-repeat center top;  
  background-size: cover;
  height: 940px;    
}
#section0 .element h1{position: absolute; top: 8%; left: 50%; width: 26%; margin-left: -13%;z-index: 4;}
#section0 .element h1 img{width:100%;}
#section0 .element .mainTxt{position:absolute; top: 37%; width:45%; left:50%; margin-left:-22.5%; z-index: 4;}
#section0 .element .btn_play{ position: absolute; top: 60%; left: 50%; width: 128px; height: 143px; margin-left: -64px; background: url(../images/btn_play.png) no-repeat; transition:all 0.2s;  z-index: 10; }
#section0 .element .btn_play:hover{transform: scale(1.1);}
#section0 .btn_download{position: absolute;  top:78%; width: 100%; margin: 0 auto;  text-align: center; font-size: 0;}
#section0 .btn_download li{display: inline-block; margin:0 10px}


/******* 스크롤네비 *******/
.scrolldownContainer {
    position: absolute;
    width: 88px;
    height: 65px;
    z-index: 10;
    top: 90%;
    left: 50%;
	margin-left:-44px;
  }

  .chevron {
	animation:move 1.3s ease-in-out infinite;
	position:absolute;
	bottom:50px;
	left:50%;
	width:2px;
	margin-left:-1px;
	height:10px;
	background-color:#fff;
  }

/* *******************************************
	//main (section0)
  ******************************************* */


/* *******************************************
	media (section1)
  ******************************************* */
#section1 { 
    display: block;
    background: url('../images/bg_media.jpg') no-repeat center top; 
    background-size: cover;           
    height: 1080px;  
 }

#section1 .tab{
	position: absolute; 
	top:285px; 
	left:50%;
	width:100%;
        margin-left:-50%;
        text-align: center;
}
#section1 .tab li{
	display:inline-block;
	width:214px; 
	height:63px; 
        margin:0 12px;
}
#section1 .tab li a{
	text-indent: -5000px;
	display:block; 
	width:100%; 
	height:100%; 
	background-image: url('../images/btn_tabMenu.png');
	background-repeat: no-repeat;
	transition:auto;
	cursor: pointer;
}

#section1 .tab li.tab1 a{background-position: 0 0;}
#section1 .tab li.tab2 a{background-position: 0 -63px;}
#section1 .tab li.tab3 a{background-position: 0 -126px;}

#section1 .tab li.tab1.on a, #section1 .tab li.tab1 a:hover{background-position: -214px 0;}
#section1 .tab li.tab2.on a, #section1 .tab li.tab2 a:hover{background-position: -214px -63px;}
#section1 .tab li.tab3.on a, #section1 .tab li.tab3 a:hover{background-position: -214px -126px;}

#section1 .tab_con{position: absolute; top:400px; left:50%; width: 1200px; margin-left:-600px}
#section1 .tab_con .tabs{display:none; position:absolute; left:50%; transform: translate(-50%, 0);}

/*tab1*/
#section1 .tab_con .tab_1{width:100%; text-align: center;}
#section1 .tab_con .tab_1 .crt{position: absolute; bottom:0}
#section1 .tab_con .tab_1 .crt1{left:-152px;bottom:-80px}
#section1 .tab_con .tab_1 .crt2{right:-312px;bottom:-75px}

/*tab2*/
#section1 .tab_con .tab_2{width:100%; text-align: center;}
#section1 .tab_con .tab_2 img{display:inline-block;width:46%; }

/*tab3*/
#section1 .tab_con .tab_3{width:100%; text-align: center;}
#section1 .btnArea{ width:92%; margin:0 auto; }
#section1 .btnArea ul {font-size:0}
#section1 .btnArea ul li{width:calc(100%/3); display: inline-block;}
#section1 .btnArea ul li a{display: block; width:100%; height:600px; background-repeat:no-repeat; background-position:left top; background-size: contain; transform: translate(0, 30px); transition:all .3s}
#section1 .btnArea ul li a:hover{transform: translate(0, 0);}
#section1 .btnArea ul li a.btn_map{background-image:url('../images/btn_map_off.png')}
#section1 .btnArea ul li a.btn_map:hover{background-image:url('../images/btn_map_on.png');}
#section1 .btnArea ul li a.btn_character{background-image:url('../images/btn_character_off.png')}
#section1 .btnArea ul li a.btn_character:hover{background-image:url('../images/btn_character_on.png');}
#section1 .btnArea ul li a.btn_card{background-image:url('../images/btn_card_off.png')}
#section1 .btnArea ul li a.btn_card:hover{background-image:url('../images/btn_card_on.png');}

/* *******************************************
	//media (section1)
  ******************************************* */


/* *******************************************
	캐릭터소개 (section2)
  ******************************************* */
#section2 { 
    display: block;
    background: url('../images/bg_character.jpg') no-repeat center top; 
    background-size: cover;           
    height: 1080px;  
 }

/*탭*/
#section2 .tab{
	position: absolute; 
	top:249px; 
	right:82px;
	width:747px;
  text-align: center;
}
#section2 .tab li{
	display:inline-block;
	width:50px; 
	height:50px; 
  margin:0 1px;
}
#section2 .tab li a{
	text-indent: -5000px;
	display:block; 
	width:100%; 
	height:100%; 
	background-repeat: no-repeat;
	transition:auto;
	cursor: pointer;
}
#section2 .tab li.tab1 a{	background-image: url('../images/btn_woman_off.png');}
#section2 .tab li.tab2 a{	background-image: url('../images/btn_man_off.png');}
#section2 .tab li.tab1.on a, #section2 .tab li.tab1:hover a{background-image: url('../images/btn_woman_on.png');}
#section2 .tab li.tab2.on a, #section2 .tab li.tab2:hover a{background-image: url('../images/btn_man_on.png');}

#section2 .tab_con{position: absolute; top:300px; left:50%; width:100%; transform: translate(-50%, 0);}
#section2 .tab_con .tabs{width:747px; display:none; position:absolute; right:82px; }

/*탭 안에 탭(캐릭터)*/
#section2 .btn_charFaceArea { width : 100%; height: 160px; position: absolute; top: 0%;  z-index: 10;  }
#section2 .btn_charFaceArea ul {width:747px; float: right; text-align: center;}
#section2 .btn_charFaceArea ul li{ cursor: pointer; background-repeat: no-repeat; width: 158px; height: 160px;  display: inline-block; transition: 0.5s all; }
/* 여자탭 */
#section2 .tab_1 .btn_charFaceArea ul li#btn_faceW0{ background-image:url(../images/btn_charFaceW0_off.png); }
#section2 .tab_1 .btn_charFaceArea ul li#btn_faceW1{ background-image:url(../images/btn_charFaceW1_off.png); }
#section2 .tab_1 .btn_charFaceArea ul li#btn_faceW2{ background-image:url(../images/btn_charFaceW2_off.png); }
#section2 .tab_1 .btn_charFaceArea ul li#btn_faceW3{ background-image:url(../images/btn_charFaceW3_off.png); }
#section2 .tab_1 .btn_charFaceArea ul li#btn_faceW0:hover, #section2 .tab_1 .btn_charFaceArea ul li#btn_faceW0.active{ background-image:url(../images/btn_charFaceW0_on.png); }
#section2 .tab_1 .btn_charFaceArea ul li#btn_faceW1:hover, #section2 .tab_1 .btn_charFaceArea ul li#btn_faceW1.active{ background-image:url(../images/btn_charFaceW1_on.png); }
#section2 .tab_1 .btn_charFaceArea ul li#btn_faceW2:hover, #section2 .tab_1 .btn_charFaceArea ul li#btn_faceW2.active{ background-image:url(../images/btn_charFaceW2_on.png); }
#section2 .tab_1 .btn_charFaceArea ul li#btn_faceW3:hover, #section2 .tab_1 .btn_charFaceArea ul li#btn_faceW3.active{ background-image:url(../images/btn_charFaceW3_on.png); }
/* 남자탭 */ 
#section2 .tab_2 .btn_charFaceArea ul li#btn_faceM0{ background-image:url(../images/btn_charFaceM0_off.png); }
#section2 .tab_2 .btn_charFaceArea ul li#btn_faceM1{ background-image:url(../images/btn_charFaceM1_off.png); }
#section2 .tab_2 .btn_charFaceArea ul li#btn_faceM2{ background-image:url(../images/btn_charFaceM2_off.png); }
#section2 .tab_2 .btn_charFaceArea ul li#btn_faceM3{ background-image:url(../images/btn_charFaceM3_off.png); }
#section2 .tab_2 .btn_charFaceArea ul li#btn_faceM0:hover, #section2 .tab_2 .btn_charFaceArea ul li#btn_faceM0.active{ background-image:url(../images/btn_charFaceM0_on.png); }
#section2 .tab_2 .btn_charFaceArea ul li#btn_faceM1:hover, #section2 .tab_2 .btn_charFaceArea ul li#btn_faceM1.active{ background-image:url(../images/btn_charFaceM1_on.png); }
#section2 .tab_2 .btn_charFaceArea ul li#btn_faceM2:hover, #section2 .tab_2 .btn_charFaceArea ul li#btn_faceM2.active{ background-image:url(../images/btn_charFaceM2_on.png); }
#section2 .tab_2 .btn_charFaceArea ul li#btn_faceM3:hover, #section2 .tab_2 .btn_charFaceArea ul li#btn_faceM3.active{ background-image:url(../images/btn_charFaceM3_on.png); }

#section2 .char_area{
	position: relative;    	
	width: 100%;
	z-index: 9;
}

/*캐릭터소개 좌측 이미지*/
#section2 .char_area .leftCrt{position: absolute; top:0; }
#section2 .tab_1 .char_area .infoChar0 .leftCrt{left:-435px}
#section2 .tab_1 .char_area .infoChar1 .leftCrt{left:-435px}
#section2 .tab_1 .char_area .infoChar2 .leftCrt{left:-502px}
#section2 .tab_1 .char_area .infoChar3 .leftCrt{left:-410px}
#section2 .tab_2 .char_area .infoChar0 .leftCrt{left:-486px}
#section2 .tab_2 .char_area .infoChar1 .leftCrt{left:-458px}
#section2 .tab_2 .char_area .infoChar2 .leftCrt{left:-420px}
#section2 .tab_2 .char_area .infoChar3 .leftCrt{left:-380px}


/* 캐릭터 클릭버튼(팝업)위치 */
#section2 .char_area ul { position: absolute; width: 100%; height: 488px; left: 0; top: 160px; z-index: 15; }
#section2 .char_area ul li { text-indent: -9999px; cursor: pointer; position: absolute; width: 127px; height: 108px; }
#section2 .char_area ul li.btn_info0 { top:56%; left: 7%; }
#section2 .char_area ul li.btn_info1 { top:39.5%; left: 30%; }
#section2 .char_area ul li.btn_info2 { top:39.5%; left: 53.5%; }
#section2 .char_area ul li.btn_info3 { top:39.5%; right: 6%; }
#section2 .char_area ul li.btn_info4 { bottom:5.5%; left: 30%; }
#section2 .char_area ul li.btn_info5 { bottom:5.5%; left: 53.5%; }
#section2 .char_area ul li.btn_info6 { bottom:5.5%;  right: 6%;}

#section2 .char_area > div{ display: none; }
#section2 .char_area .infoChar0{display: block; width: 100%;}

/* 여자 */
#section2 #crt_tab1 .char_area .infoChar0 ul{background: url(../images/img_infoCharW0.png) no-repeat;}
#section2 #crt_tab1 .char_area .infoChar1 ul{background: url(../images/img_infoCharW1.png) no-repeat;}
#section2 #crt_tab1 .char_area .infoChar2 ul{background: url(../images/img_infoCharW2.png) no-repeat;}
#section2 #crt_tab1 .char_area .infoChar3 ul{background: url(../images/img_infoCharW3.png) no-repeat;}

/* 남자 */
#section2 #crt_tab2 .char_area .infoChar0 ul{background: url(../images/img_infoCharM0.png) no-repeat;}
#section2 #crt_tab2 .char_area .infoChar1 ul{background: url(../images/img_infoCharM1.png) no-repeat;}
#section2 #crt_tab2 .char_area .infoChar2 ul{background: url(../images/img_infoCharM2.png) no-repeat;}
#section2 #crt_tab2 .char_area .infoChar3 ul{background: url(../images/img_infoCharM3.png) no-repeat;}

/* 꽃잎 effect */
.flower {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transform: skew(-1.5deg);
}
.flower div
{
    position: absolute;
    display: block;
}
.flower div:nth-child(2n-1)
{
  filter: blur(2px);
  
  
}
.flower div:nth-child(1)
{
    left: 80%;
    animation: flower_effect 15s linear infinite, swingswing 3s linear alternate;
    animation-delay: -7s;
}
.flower div:nth-child(2)
{
    left: 50%;
    animation: flower_effect 20s linear infinite, swingswing 3s linear alternate;
    animation-delay: -5s;
}
.flower div:nth-child(3)
{
    left: 70%;
    animation: flower_effect 25s linear infinite, swingswing 3s linear alternate;
}
.flower div:nth-child(4)
{
    left: 0%;
    animation: flower_effect 15s linear infinite, swingswing 3s linear alternate;
    animation-delay: -5s;
}
.flower div:nth-child(5)
{
    left: 30%;
    animation: flower_effect 18s linear infinite, swingswing 3s linear alternate;
    animation-delay: -10s;
}
.flower div:nth-child(6)
{
    left: 20%;
    animation: flower_effect 15s linear infinite, swingswing 3s linear alternate;
}
.flower div:nth-child(7)
{
    left: 63%;
    animation: flower_effect 11s linear infinite, swingswing 3s linear alternate;
}

/* *******************************************
	//캐릭터소개 (section2)
  ******************************************* */




/* 공지사항 */
.terms {
	text-indent: -9999px
}

/* 이벤트배경 */
.imgView { position: absolute; top: 0; left: 0; z-index:1;}
.imgView span{z-index:1;}

/* popup */
.blind{
	display:none; 
	position:absolute; 
	top:0; 
	left:0; 
	background-color:black;
	width:100%; 
  min-width: 1200px; /*확인필요*/
	height:4254px; 
	z-index:21; 
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
	filter: alpha(opacity=70); 
	-moz-opacity: 0.7; 
	-khtml-opacity: 0.7;
	 opacity: 0.7;
}



.popup {
	display:none; 
	position: fixed;
	top:50%;
	left:50%; 
	z-index:25; 
  width:40%;
  transform: translate(-50%, -50%);
}

.popup .btn_close {
    position: absolute;
    top: 0;
    right: -7%;
    width: 6%;
    z-index: 15;
    cursor: pointer;
}

.btn_close img{width:100%}



/* Alert 팝업 */
.popup div img{
  width:100%;
  max-width: 700px;
}

/* movie_wrap 동영상 */
.movie_wrap{
	position: fixed; 
	transform: scale(0,0); 
	opacity: 0; 
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity:0;
	top:14%; 
	left:50%; 
	width:64%; 
	height:auto;
	margin-left:-32%;
	z-index:25;
}
.movie_wrap.open_movie{
	transform : scale(1,1); 
	transition: all .5s; 
	opacity: 1;
} 
.movie_wrap .btn_close{
    position: absolute;
    top: -8%;
    right: 0%;
    z-index: 25;
    cursor: pointer;
}

.movie_wrap .you_tube{
	position:relative; 
	height:0; 
	padding-bottom:56.25%;
	z-index:25;
}
.movie_wrap .you_tube iframe, .movie_wrap  .you_tube object, .movie_wrap  .you_tube embed{
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}


/* 게임소개 내 팝업 */
.pop_media{
	position: fixed; 
	top:51%; 
	left:50%; 
  width:30%;
  display: none;  
	height:auto;
	transform: translate(-50%, -50%);
	z-index:25;
  box-sizing: border-box;
  padding:0 3%
}

.pop_map{
  width:50%;
}
.pop_card{
  width: 20%;
}
  
.pop_media .btn_close {
    position: absolute;
    top: -7%;
    right:6%;
    width: 2vw;
    z-index: 25;
    transition: .3s ease-in-out;
}


.pop_card .btn_close {
  right:-3%
}
.pop_character .btn_close{
  top: 5%;
  }

.pop_media .btn_close img{
  width:100%
}

/* 캐릭터소개 클릭시 팝업 이미지 */
.pop_gameInfo_char{width:35% !important; height:37vw; max-width: 700px;}
#target_popChar{width : 100%; height: 37vw; background-repeat: no-repeat; background-size: contain;}
.img_charW0_0, .img_charM0_0 {background-image: url(../images/popup_crt/img_char0_0.jpg); }
.img_charW0_1, .img_charM0_1 {background-image: url(../images/popup_crt/img_char0_1.jpg); }
.img_charW0_2, .img_charM0_2 {background-image: url(../images/popup_crt/img_char0_2.jpg); }
.img_charW0_3, .img_charM0_3 {background-image: url(../images/popup_crt/img_char0_3.jpg); }
.img_charW0_4, .img_charM0_4 {background-image: url(../images/popup_crt/img_char0_4.jpg); }
.img_charW0_5, .img_charM0_5 {background-image: url(../images/popup_crt/img_char0_5.jpg); }
.img_charW0_6, .img_charM0_6 {background-image: url(../images/popup_crt/img_char0_6.jpg); }

.img_charW1_0, .img_charM1_0 {background-image: url(../images/popup_crt/img_char1_0.jpg); }
.img_charW1_1, .img_charM1_1 {background-image: url(../images/popup_crt/img_char1_1.jpg); }
.img_charW1_2, .img_charM1_2 {background-image: url(../images/popup_crt/img_char1_2.jpg); }
.img_charW1_3, .img_charM1_3 {background-image: url(../images/popup_crt/img_char1_3.jpg); }
.img_charW1_4, .img_charM1_4 {background-image: url(../images/popup_crt/img_char1_4.jpg); }
.img_charW1_5, .img_charM1_5 {background-image: url(../images/popup_crt/img_char1_5.jpg); }
.img_charW1_6, .img_charM1_6 {background-image: url(../images/popup_crt/img_char1_6.jpg); }

.img_charW2_0, .img_charM2_0 {background-image: url(../images/popup_crt/img_char2_0.jpg); }
.img_charW2_1, .img_charM2_1 {background-image: url(../images/popup_crt/img_char2_1.jpg); }
.img_charW2_2, .img_charM2_2 {background-image: url(../images/popup_crt/img_char2_2.jpg); }
.img_charW2_3, .img_charM2_3 {background-image: url(../images/popup_crt/img_char2_3.jpg); }
.img_charW2_4, .img_charM2_4 {background-image: url(../images/popup_crt/img_char2_4.jpg); }
.img_charW2_5, .img_charM2_5 {background-image: url(../images/popup_crt/img_char2_5.jpg); }
.img_charW2_6, .img_charM2_6 {background-image: url(../images/popup_crt/img_char2_6.jpg); }

.img_charW3_0, .img_charM3_0 {background-image: url(../images/popup_crt/img_char3_0.jpg); }
.img_charW3_1, .img_charM3_1 {background-image: url(../images/popup_crt/img_char3_1.jpg); }
.img_charW3_2, .img_charM3_2 {background-image: url(../images/popup_crt/img_char3_2.jpg); }
.img_charW3_3, .img_charM3_3 {background-image: url(../images/popup_crt/img_char3_3.jpg); }
.img_charW3_4 {background-image: url(../images/popup_crt/img_charW3_4.jpg); }
.img_charW3_5 {background-image: url(../images/popup_crt/img_charW3_5.jpg); }
.img_charW3_6 {background-image: url(../images/popup_crt/img_charW3_6.jpg); }
.img_charM3_4 {background-image: url(../images/popup_crt/img_charM3_4.jpg); }
.img_charM3_5 {background-image: url(../images/popup_crt/img_charM3_5.jpg); }
.img_charM3_6 {background-image: url(../images/popup_crt/img_charM3_6.jpg); }




/* top button */
#btn_top { display: none; position: fixed; width: 59px; height: 68px; right: 3.2%; z-index: 12; bottom: 12%; cursor: pointer; }
/* //top button */

/******* footer *******/
footer{display:inline-block; position:absolute; bottom:10px; left:50%; transform: translate(-50%, 0); z-index: 2;}


/* background */
/* .bgLeft { position: absolute; top: 0; left: 0; width: 50%; height:4800px; overflow: hidden; z-index:1;}
.bgLeft div { position: absolute; top: 0; right: 450px; width: 100%; height: 4800px; z-index:1; background: url('../images/bg_left.jpg') no-repeat right top;}
.bgRight { position: absolute; top: 0; right: 0; width: 50%; height: 4800px; overflow: hidden; z-index:1;}
.bgRight div { position: absolute; top: 0; left: 450px; width: 100%; height: 4800px; z-index:1; background: url('../images/bg_right.jpg') no-repeat 0 0;} */

/* 이벤트배경 */
.imgView { position: absolute; top: 0; left: 0; z-index:1;}
.imgView span{z-index:1;}



/**** max2000px ****/
@media(min-width: 2000px){
  #header .floatingMenu{top:100px; width: 150px;}
  #header .navMenu{top:350px; width: 150px;}
}