﻿@media only screen and (min-width : 0px) and (max-width : 480px) {


/*=================== BANNER ===================*/

.banner{height: 200px; 
	margin-top:-2px;}

.banner_ani{width: 480px;
	height: 320px;
	margin-left: -240px;
	margin-top: -160px;
	}

.banner_img{width: 660px;
	height: 220px;
	margin-left: -330px;
	margin-top: -110px;
	}
.banner_map{height: 400px; }

#map{height: 400px;  border-radius:0;margin-top:0px;}

/*=================== TOP ===================*/

.top{width: 100%;  height:70px;  border-radius:0; margin-left:-2px;}

.bi {width: 100%; margin-left: 0px; text-align:center;}

.bi img{width: 90px;}

/*=================== MEMU ===================*/

.menu{ margin-right: 0px; width:100%; height:28px; background-color: #f1f1f1;}

.menu li{float:none; 
	margin:0 auto;
	text-align:center; 
	display:inline;}

.menu a, .menu label {height:20px;  font-size:11px; padding: 4px 3px;}

.toggle_btbox a{height : 12px; padding:4px; font-size:10px;}

#toggle_button, #toggle_contents {position:unset;}

#toggle_button:checked + #toggle_contents {width:100%; 
	margin-left: 0px; 
	margin-top: -22.5px; 
	border-radius:0;
	position: absolute;
	opacity: 0.95; 
	animation-name: fade-in2_2;
	}


/*=================== LANGUAGE_TOGGLE ===================*/

.toggle_lanbox{width: 48%; float: left;}

.toggle_lanbox a{height : 12px; padding:4px; font-size:10px;}

#toggle_button, #toggle_contents {position:unset;}

#toggle_language:checked + #toggle_languages {width:100%; 
	margin-left: 0px; 
	margin-top: -32.5px; 
	border-radius:0;
	position: absolute;
	opacity: 0.95; 
	animation-name: fade-in2_2;
	}


@keyframes fade-in2_2 {
	0% {opacity: 0}
	100% {opacity: 0.92}
	}

/*=================== BANNER_TXT ===================*/

.banner_txt1{height: 24px; 
	margin-top: 80px;
	font-size : 14.5px;
	}

.banner_txt2{height: 120px; 
	margin-top: 80px;
	font-size : 13.2px;
	}

.banner_web {display:none;}
.banner_mob {display:block;}

.ani{background-color: #362a2a; }

/*=================== COMPANY_TXT ===================*/

.company_txt1{height: 24px; 
	margin-top: 22px;
	font-size : 20px;
	}

.company_txt2{height: 18px; 
	margin-top: 4px;
	font-size : 14px;
	margin-left: 10px;
	}

.company_txt3{width: 90%;
	height: 107px; 
	margin-top: 25px;
	line-height:1.4;
	font-size: 11px;
	}

.company_txt5{width:95%;
	margin-left:2.5%;
	height: 24px; 
	margin-top: 320px;
	font-size : 18px;
	}

.company_vision{width: 95%; height: 0px; }

.company_vision li{	padding: 8px 2.7%; float:none;display:inline-block;}

.company_vision ul{margin: 0 auto; padding:20px 0;}

.company_circle{width: 120px;
	height: 120px;
	font-size: 14px;
	}

/*=================== COMPANY_DETAIL ===================*/
.company_detail{width: 100%;
	height:480px;
	margin-top:30px;
	}

.company_detail li{width:95%; margin-top:10px; }

.detail_image{width:100%; 
	height:200px; 
	margin-top:5px;
	margin-bottom: 15px;
	overflow:hidden;
	}

.detail_image img{width: 100%;
	height: auto;
	margin-top: -15%;}

.company_detail span { margin-left:15px;  font-size : 14.5px;}

.company_txt4{margin-bottom: 10px;
	margin-left:15px;
	font-size : 11.5px;
	line-height:1.5;
	}





/*=================== SPLIT_LINE  ===================*/

.split_line{height:1.5px;}

.split_line2{width: 96%;  margin-top: 25px;}

.split_line3{height:1.5px; margin-top: 404px;}

/*===================  GAME SHORTCUT ===================*/

.list_main{width: 100%;
	height:240px;
	margin-top: 20px;
	}

.list_main_bg1{width: 100%; 
	height:170px;
	overflow: hidden;
	background-position-y: 50%;
	background-size: 100% ;
	}

.list_main_bg2{width: 100%; 
	height:170px;
	overflow: hidden;
	background-position-y: 25%;
	background-size: 100% ;
	}

.more{margin-top: 52px;
	margin-left: 85%;
	width: 40px; 
	height:12px;
	font-size:10px;
	}

.sub{ margin-top: 6px; font-size:13.5px;}
.txt{  font-size:9.5px; width : 96%; margin:0 auto; margin-top: 4px;}



/*=================== GAME_SCREENSHOT ===================*/

.game_sc{width:96%;
	margin-top: 13px;
	margin-bottom: -9px;
	font-size : 14px;
	line-height:2.4;
	letter-spacing:4px;
	}

.game_sc li{width:100%;}

.game_sc img {width : 31%;}

/*===================FOLLOWS ===================*/

.game_follow{width:96%;
	height:10px;
	margin-top: 20px;
	margin-bottom: 35px;
	font-size : 14px;
}

.game_follow span {float:left; width:130px; padding: 0 0 10px 0;}

.game_follow_detail {padding: 0 10px 0 0; font-size : 12px; margin-top:0px;}


.game_follow_detail img{width : 20px; padding: 0 2px 0 0;}



/*===================CONTACT ===================*/

.contact{height:144px;
	margin-top: 30px;
	font-size: 11px;
	}

.contact ul{width:90%; margin-top: -14px; margin-left: 15px; padding:0;}

.contact_sub{width:100%; padding : 10px 0 10px 0; font-size: 13.5px; }

.contact_txt{width:90%; padding: 4px 0px 10px 4px; }

.contact_txt strong{display:none;}

.br {display:none;}

.icon{width:22px; height:22px;}

.icon img{width:13px; margin-top:2px;}


.contact2{	height:144px;
	top: 480px;
	font-size: 11px;
	}

.contact2 ul{width:90%; margin-left: -15px;}

/*===================FORM MAIL ===================*/

.mail{height:760px;
	top: 450px;
	font-size: 16px;
	line-height:2;
	}

.mail ul{width: 90%; margin: 0 auto; padding:0;}

.mail span{font-size: 14px;}

.mail_category{width:100%; height:30px; padding:0}

.form_line{width : 100%; padding: 6px 0;}

.form{width: 100%;
	height: 32px;
	padding: 4px 1%;
	}
.text {width: 98%; padding: 2px 1%;  height: 30px;}

.detail{height: 200px;}

.adds {width: 100%;}

.adds_text{width:70%; font-size:11px;}

.form_confirm{width : 100%; margin-top:85px;}

.send_btn{ width : 49%;
	font-size:15px;
	}


/*=================== BOTTOM ===================*/

.bottom{padding-bottom: 4px;}

.bottom ul{width:90%; margin-top: 0px; margin-left: 15px; padding:0;}

.bottom_ci{width:100%;
	margin-top:12px;
	margin-bottom:2px;
	text-align:center;
	}

.bottom_ci img{width:105px;}


.bottom_ci_en{width:100%;
	margin-top:12px;
	margin-bottom:2px;
	text-align:center;
	}

.bottom_ci_en img{width:105px;}

.bottom_menu{width:100%; font-size: 12px; padding:6px 0 10px 0; text-align:center;}

.bottom_menu span{font-size : 9px;}

.bottom li{width:100%; font-size: 10px; line-height: 1.6; }

.btm_btn {width:100%; line-height: 1.8; float:none;margin-top: 7px;}
.btm_btn a {font-size: 10px;}

.bottom2{height:130px; top:622px;}

/*=================== LAYER_POPUP ===================*/

.white_content {width:300px;}

.white_content img{width:100%; padding-bottom:5px; }



/*===================CI_DETAIL ===================*/

.ci_detail{width: 100%; 
	height:1060px;
	margin-top: 50px;
	font-size: 11.5px;
	}

.ci_detail ul {width: 95%;  margin: 0 auto; padding: 10px 0 50px 0;}

.ci_detail img{width:99%; float:left; padding: 0 0 1% 0;}

.ci_detail li{width: 100%;}

.ci_detail li img{width:49%; padding: 0 1% 1% 0;}

.detail_txt_1{font-size:12.5px;
	margin-top:18px;
	}

.detail_txt_2{font-size:11.5px;
	margin-top:12px;
	margin-bottom:20px;
	line-height:1.5;
	}

.detail_color{width:96%; font-size:12px; margin-bottom: 15px;}

.detail_color li {width:50px; font-size:11px;}

.circle_red {width:60px; 
	height:60px;
	float:left;
	display:inline-block; 
	margin-right:12px;}

.circle_white {width:60px; 
	height:60px;
	float:left;
	display:inline-block; 
	margin-right:12px;}

.circle_black {width:60px; 
	height:60px;
	float:left;
	display:inline-block; 
	margin-right:12px;}

.pantone{width : 300px; padding: 4px 0;  }


/*=================== GAME_TXT ===================*/
.game_txt1{height: 24px; 
	margin-top: 8px;
	font-size : 19px;
	}

.game_txt{width: 96%;
	height:150px;
	margin-top:14px;
	margin-bottom:5px;
	}

.game_txt img{width:46.5%;}

.game_txt_image {width:100%; 
	height:132px; 
	margin:0 auto;  
	overflow:unset; 
	text-align:center;
	border-radius:10px;
	}


.game_txt_image img{width: auto;
	height:150px;
	margin-top:-5px;
	}


.game_txt2{
	width: 90%;
	margin-left:5%;
	margin-top: 35px;
	margin-bottom: 12px;
	font-size : 11px;
	line-height:1.6;
	height:auto;
	}

.game_txt3{width: 90%;margin-left:5%; letter-spacing: 12px; text-align:center; margin-top: 10px;}


/*=================== GAME_MOV ===================*/

.game_mov {width: 100%; 
	height: 220px; 
	margin: 0 auto;
	margin-top: 200px;
	border: 1px solid #c3c3c3; 
	background-color: #ededed;
	overflow:hidden;
	}

.mov_frame{width: 100%; height: 220px; margin-top:0%;  }

/*=================== TERMS ===================*/

.terms{ width: 90%; 
	margin-top: 40px;
	margin-bottom: 50px;
	padding: 25px 10px ;
	font-size: 11px;
	line-height:2;
	}

.terms li{	font-size: 13.5px;
	height: 45px;
	}


}



/*=================== 별도 적용 필요사항 ===================*/

@media only screen and (min-width : 321px) and (max-width : 380px) {
.ci_detail{height:1000px;}
}



@media only screen and (min-width : 0px) and (max-width : 320px) {
.ci_detail{height:980px;}
}



@media only screen and (min-width : 320px) and (max-width : 360px) {
	.list_main{width: 100%;
	height:220px;
	margin-top: 20px;
	}

.list_main_bg1{width: 100%; 
	height:150px;
	overflow: hidden;
	background-position-y: 50%;
	background-size: 100% ;
	}

.list_main_bg2{width: 100%; 
	height:150px;
	overflow: hidden;
	background-position-y: 25%;
	background-size: 100% ;
	}

.more{margin-top: 52px;
	margin-left: 85%;
	width: 40px; 
	height:12px;
	font-size:10px;
	}
	
}