﻿@media only screen and (min-width : 481px) and (max-width : 720px) {


/*=================== BANNER ===================*/

.banner{height: 260px;
	margin-top: 0px;
}

.banner_ani{width: 720px;
	height: 400px;
	margin-left: -360px;
	margin-top: -200px;
	}

.banner_img{width: 960px;
	height: 320px;
	margin-left: -480px;
	margin-top: -160px;
	}

	
.banner_map{height: 620px; }

#map{height: 620px;  border-radius:0;margin-top:0px;}

/*=================== TOP ===================*/

.top{width: 100%;  height:44px;  border-radius:0; margin-left:-2px;}

.bi {width: 90px; margin-left: 13.5px;}

.bi img{width: 90px;}


/*=================== MEMU ===================*/

.menu{margin-right: 10px;}

.menu a, .menu label {height:44px;  font-size:11.5px; padding: 0px 7px 0 7px;}

.toggle_btbox{width: 49%; float: left;}

.toggle_btbox a{height : 12px; padding:5px; font-size:11px;}

#toggle_button:checked + #toggle_contents {width:100%; margin-left: 0px; margin-top: 43px; border-radius:0;  opacity: 0.95; animation-name: fade-in2_2}


/*=================== LANGUAGE_TOGGLE ===================*/


.toggle_lanbox{width: 49%; float: left;}

.toggle_lanbox a{height : 12px; padding:5px; font-size:11px;}

#toggle_language:checked + #toggle_languages {width:100%; margin-left: 0px; margin-top: 43px; border-radius:0;  opacity: 0.95; animation-name: fade-in2_2;}



@keyframes fade-in2_2 {
	0% {opacity: 0}
	100% {opacity: 0.92}
	}





/*=================== BANNER_TXT ===================*/

.banner_txt1{height: 30px; 
	margin-top: 90px;
	font-size : 22px;
	}

.banner_txt2{height: 150px; 
	margin-top: 110px;
	font-size : 20px;
	}

/*=================== COMPANY_TXT ===================*/

.company_txt1{height: 24px; 
	margin-top: 24px;
	font-size : 20px;
	}

.company_txt2{height: 18px; 
	margin-top: 6px;
	font-size : 14px;
	margin-left: 10px;
	}

.company_txt3{width: 80%;
	height: 70px; 
	margin-top: 16px;
	line-height:1.4;
	font-size: 11px;
	}


.company_txt5{height: 24px; 
	margin-top: 24px;
	font-size : 20px;
	}

.company_vision{width: 95%; height: 102px; }

.company_vision li{	padding: 0 3%; float:none;display:inline-block;}

.company_vision ul{margin: 0 auto; }

.company_circle{width: 80px;
	height: 80px;
	font-size: 10px;
	}

/*=================== COMPANY_DETAIL ===================*/
.company_detail{width: 100%;
	height:540px;
	margin-top:30px;
	}

.company_detail li{width:95%; margin-top:15px; }

.detail_image{width:100%; 
	height:240px; 
	margin-top:5px;
	margin-bottom: 15px;
	overflow:hidden;
	}

.detail_image img{width: 100%;
	height: auto;
	margin-top: -15%;}

.company_detail span { margin-left:15px;}

.company_txt4{margin-bottom: 15px;
	margin-left:15px;
	font-size : 12px;
	}





/*=================== SPLIT_LINE  ===================*/

.split_line{height:1.5px;}

.split_line2{width: 100%;  margin-top: 40px;}

.split_line3{height:1.5px; margin-top: 624px;}

/*===================  GAME SHORTCUT ===================*/

.list_main{width: 90%;
	height:330px;
	margin-top: 40px;
	}

.list_main_bg1{width: 100%; 
	height:240px;
	overflow: hidden;
	background-position-y: 40%;
	background-size: 100% ;
	}

.list_main_bg2{width: 100%; 
	height:240px;
	overflow: hidden;
	background-position-y: 18%;
	background-size: 100% ;
	}

.more{margin-top: 64px;
	margin-left: 80%;
	width: 50px; 
	height:16px;
	font-size:13px;
	}

.sub{ margin-top: 10px; font-size:17px;}
.txt{ margin-top: 6px; font-size:12px;}



/*=================== GAME_SCREENSHOT ===================*/

.game_sc{width:96%;
	margin-top: 30px;
	margin-bottom: -10px;
	font-size : 17px;
	line-height:2.4;
	letter-spacing:4px;
	}

.game_sc img {width : 31.8%;}

/*===================FOLLOWS ===================*/

.game_follow{width:96%;
	height:20px;
	margin-top: 40px;
	margin-bottom: 50px;
	font-size : 17px;
}

.game_follow span {float:left; width:160px; padding: 0 0 10px 0;}

.game_follow_detail {padding: 0 22px 0 0; font-size : 13.5px; margin-top:3px;}


.game_follow_detail img{padding: 0 5px 0 0;}



/*===================CONTACT ===================*/

.contact{height:164px;
	margin-top: 50px;
	font-size: 11.5px;
	}

.contact ul{width:90%; margin-top: -14px; margin-left: 15px; padding:0;}

.contact_sub{width:100%; padding : 12px 0 12px 0; font-size: 15px; }

.contact_txt{width:90%; padding: 6px 0px 12px 10px; }

.contact_txt strong{ padding: 0px 12px 0px 5px;}

.br {display:none;}

.icon{width:29px; height:29px;}

.icon img{width:18px;}


.contact2{	height:176px;
	top: 674px;
	font-size: 12px;
	}

.contact2 ul{width:92%;}

/*===================FORM MAIL ===================*/

.mail{height:560px;
	top: 520px;
	font-size: 18px;
	line-height:2;
	}

.mail ul{width: 96%; margin: 0 auto; padding:0;}

.mail span{font-size: 14px;}

.mail_category{width:18%;}

.form_line{width : 100%; padding: 6px 0;}

.form{width: 80%;
	height: 32px;
	padding: 4px 1%;
	}
.text {width: 78%; padding: 2px 1%;  height: 30px;}

.detail{height: 200px;}

.adds {width: 80%;}

.adds_text{width:80%; }

.form_confirm{width : 100%; margin-top:50px;}

.send_btn{ width : 49%;
	font-size:15px;
	}


/*=================== BOTTOM ===================*/

.bottom ul{width:90%; margin-top: 0px; margin-left: 15px; padding:0;}

.bottom_ci{width:120px;
	margin-top:46px;
	margin-bottom:40px;
	}

.bottom_ci img{width:105px;}

.bottom_ci_en {width:120px;
	margin-top:20px;
	margin-bottom:10px;
	}

.bottom_ci_en img{width:105px;}

.bottom_menu{font-size: 12px; padding:8px 0 8px 0;}

.bottom li{width:432px; font-size: 10px; line-height: 2; }

.btm_btn {width:90px; line-height: 1.8;}
.btm_btn a {font-size: 10px;}

.bottom2{height:130px; top:850px;}

/*=================== LAYER_POPUP ===================*/

.white_content {width:360px;}

.white_content img{width:100%; padding-bottom:5px; }




/*=================== TERMS ===================*/

.terms{ width: 90%; 
	margin-top: 50px;
	margin-bottom: 60px;
	padding: 25px 10px ;
	font-size: 12px;
	line-height:2.2;
	}

.terms li{	font-size: 15px;
	height: 65px;
	}





}




/*=================== 별도 분류 필요한 이미지 ===================*/





@media only screen and (min-width : 521px) and (max-width : 720px) {

/*===================CI_DETAIL ===================*/

.ci_detail{width: 100%; 
	height:660px;
	margin-top: 50px;
	font-size: 12.5px;
	}

.ci_detail ul {width: 99%; margin: 0 auto; padding: 30px 0 30px 0; }

.ci_detail img{float:left; width: 47%; padding: 0 2% 10px 2%;}



.ci_detail li {width:49%;}


.ci_detail li img{width:45%;}


.ci_detail_txt li {width:96%; margin-left:15px;}

.detail_txt_1{font-size:13.5px;
	margin-top:18px;
	}

.detail_txt_2{font-size:12px;
	margin-top:12px;
	margin-bottom:20px;
	line-height:1.6;
	}


.detail_color{width:156px; font-size:11px; margin-left:10px;}

.detail_color li {width:35px; font-size:10px;}

.circle_red {width:60px; height:60px;}
.circle_white {width:60px; height:60px;}
.circle_black {width:60px; height:60px;}



/*=================== GAME_TXT ===================*/
.game_txt1{height: 24px; 
	margin-top: 24px;
	font-size : 20px;
	}

.game_txt{width: 520px;;
	height:188px;
	margin-top:24px;
	}
.game_txt img{width:145px; }

.game_txt_image {width:185px; 
	margin: 0 auto;
	margin-right:15px; 
	height:162px; 
	text-align:center; 
	overflow:hidden;
	border-radius: 8px;
	}

.game_txt_image img{width:auto; height:162px; 	margin-left:-50px;}

.game_txt2{
	width: 310px;
	font-size : 11.5px;
	height: 118px;
	line-height:1.4;
	}

.game_txt3{width: 310px; 
	letter-spacing: 12px; 
	text-align:center; 
	}

/*=================== GAME_MOV ===================*/

.game_mov {width: 100%; 
	height: 240px; 
	margin: 0 auto;
	margin-top: 40px;
	border: 1px solid #c3c3c3; 
	background-color: #ededed;
	overflow:hidden;
	}

.mov_frame{width: 100%; height: 400px; margin-top:-12%;  }

}








@media only screen and (min-width : 481px) and (max-width : 520px) {

/*===================CI_DETAIL ===================*/

.ci_detail{width: 100%; 
	height:1060px;
	margin-top: 50px;
	font-size: 12.5px;
	}

.ci_detail ul {width: 95%;  margin: 0 auto; padding: 30px 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:13.5px;
	margin-top:18px;
	}

.detail_txt_2{font-size:12px;
	margin-top:12px;
	margin-bottom:20px;
	line-height:1.6;
	}

.detail_color{width:220px; font-size:11px; margin-bottom: 20px;}

.detail_color li {width:33px; font-size:10px;}

.circle_red {width:50px; 
	height:50px;
	float:left;
	display:inline-block; 
	margin-right:12px;}

.circle_white {width:50px; 
	height:50px;
	float:left;
	display:inline-block; 
	margin-right:12px;}

.circle_black {width:50px; 
	height:50px;
	float:left;
	display:inline-block; 
	margin-right:12px;}

.pantone{width : 194px; padding: 4px 0;  }


/*=================== GAME_TXT ===================*/
.game_txt1{height: 24px; 
	margin-top: 24px;
	font-size : 20px;
	}

.game_txt{width: 96%;
	height:194px;
	margin-top:18px;
	}

.game_txt img{width:37%;}

.game_txt_image {width:100%; 
	height:170px; 
	margin:0 auto;  
	overflow:hidden; 
	border-radius:8px;
	text-align:center;
	}

.game_txt_image img{width: auto;
	height:190px;
	border-radius:8px;
	margin-top:-10px;
	}

.game_txt2{
	width: 76%;
	margin-left: 12%;
	margin-top: 40px;
	margin-bottom: 30px;
	font-size : 11px;
	line-height:1.6;
	height:auto;
	}

.game_txt3{width: 100%; margin-left: 0; letter-spacing: 12px; text-align:center;}


/*=================== GAME_MOV ===================*/

.game_mov {width: 100%; 
	height: 240px; 
	margin: 0 auto;
	margin-top: 210px;
	border: 1px solid #c3c3c3; 
	background-color: #ededed;
	overflow:hidden;
	}

.mov_frame{width: 100%; height: 400px; margin-top:-16%;  }




}


@media only screen and (min-width : 481px) and (max-width : 580px) {


/*===================  GAME SHORTCUT ===================*/

.list_main{width: 100%;
	height:310px;
	margin-top: 40px;
	}

.list_main_bg1{width: 100%; 
	height:220px;
	overflow: hidden;
	background-position-y: 40%;
	background-size: 100% ;
	}

.list_main_bg2{width: 100%; 
	height:220px;
	overflow: hidden;
	background-position-y: 18%;
	background-size: 100% ;
	}

	.more{margin-left: 88%;
	}


	
}

@media only screen and (min-width : 481px) and (max-width : 520px) {
.game_txt_image {overflow: unset; border-radius: 12px;}	

.game_txt1{margin-top: 16px;}

.game_txt {margin-top: 26px;}
}