@charset "utf-8";

/*
.background{position:absolute;width:100%;height:100%;top:0;left:0;}
.background .sky{position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden;}
.background img{position:absolute;width:100%;left:0;}

.background .cloud1{top:40px;}
.background .cloud2{top:150px;}

.background .cloud1{animation-name:cloud1;animation-duration:6s;animation-iteration-count: infinite;}
@keyframes cloud1{
0%{}
50%{transform:translateY(20px);}
100%{transform:translateY(0px);}
}
.background .cloud2{animation-name:cloud2;animation-duration:6s;animation-iteration-count: infinite;animation-delay:1s;}
@keyframes cloud2{
0%{}
50%{transform:translateY(60px);}
100%{transform:translateY(0px);}
}
*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
address, big, cite, code, del, dfn, em, font, img, ins,
q, s, samp, small, strike, strong, sub, sup, tt, var, b,
u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: none 0; }


.map { position: relative; width: 100%; height: 100%; min-width:1160px; min-height:904px; z-index: 0; top: 0px; left: 0px; }
@media screen and (max-width:514px) {
  .map { min-width:320px; }
}

.map .background{ position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; }
.map .background img{ position: absolute; width: 100%; top: 0px; left: 0px; }
.map .background .sky{ position: absolute; overflow: hidden; width: 100%; height: 100%; top: 0px; left: 0px; }
.map .background .cloud1{ top: 20px; }
.map .background .cloud2{ top: 40px; width: 110%; left: -100px; }
.map .background .cloud3{ top: 60px; }

.map .land { position: absolute; width: 1029px; height: 742px; top: 220px; left:50%; margin-left: -515px; }
body._edit .map .land { position:relative !important; }
.map .land .level{ position: absolute; top: 162px; left: 461px; }
.map .land .level .info{ position: absolute; text-align: center; top: 28px; left: 8px; width: 85px; line-height: 27.86px;}
.map .land .level .info .txt_title{ color: #fff; font-size: 15px; letter-spacing: -1px;}
.map .land .level .info .txt_level{ color: #ffe400; font-size: 30px; letter-spacing: -2px; }
.map .land .level .btn_levelup{ position: absolute; top: 89px; left: 8px; width: 85px; }
.map .land .level .btn_levelup img{ position: absolute; top: 0px; left: 0px; }
.map .land .level .btn_levelup a{ position: relative; top: 5px; right: 3px; white-space: nowrap; color: #fff; font-size: 13.5px; text-align: center; display: block;  text-indent: -9999px;
  background: url(../../images/level_up_text.png) 50% 50% no-repeat;}
.map .land .level .guage{ position: absolute; width: 49px; height: 45px; top: 128px; left: 26px; margin: 0; line-height: 0px; }
.map .land .level .guage img{ padding: 0px; margin: 0px; }


.char{ position: absolute; }
.char_balloon{ position: absolute; white-space: nowrap; }
.char_balloon img{ position: relative; top: -37px; }
.char_balloon .blt{}
.char_balloon .bcr{ height:37px; }
.char_balloon .bcr.numtext2{ width:20px; }
.char_balloon .bcr.numtext3{ width:34px; }
.char_balloon .bcr.numtext5{ width:54px; }
.char_balloon .bcr.numtext6{ width:64px; }
.char_balloon .brt{}
.char_balloon .btl{ position: absolute; left: 2px; top: -6px; }
.char_balloon span{ position: absolute; overflow: hidden; color: #fff; left: 18px; top: -30px; font-size: 17px; }

.char_airforce{ top: 65px; left: 10px; }
.char_airforce .char_balloon{ top: 76px; left: 193px; }
.char_band{ top: 205px; left: 211px; }
.char_band .char_balloon{ top: 55px; left: 138px; }
.char_army{ top: -40px; left: 378px; }
.char_army .char_balloon{ top: 108px; left: 190px; }
.char_navy{ top: 431px; left: 328px; }
.char_navy .char_balloon{ top: 41px; left: 112px; }
.char_comic{ top: 219px; left: 560px; display:none;}
.char_comic .char_balloon{ top: 88px; left: 105px; }
.char_study{ top: 120px; left: 593px; }
.char_study .char_balloon{ top: 115px; left: 109px; }
.char_marine{ top: 251px; left: 803px; }
.char_marine .char_balloon{ top: 62px; left: 71px; }




/* 모바일 */
@media screen and (max-width:514px) {

  /* Main */
  #boxMain {
	width: 100%;
	height: 535px;
	padding: 25px 0 30px 0;
	display: inline-block;
	/* background: #fff; */
	background: #fff url('../../images/common/bgMain.gif') repeat-x center top;
  }
  #boxMain .boxAllmain {
	padding: 0 10px;
  }
  #boxMain .layoutRow1 {
	height: 190px;
  }
  #boxMain .layoutRow1 > div {
	float: left;
	width: 50%;
	height: 90px;
  }
  #boxMain .marT{
	margin-top:10px;
  }
  #boxMain .layoutRow1 > div > div {
	width: auto;
	height: 90px;
	margin: 0 5px;
	border-radius: 10px;
  }
  #boxMain .layoutRow2 .layoutCol1,
  #boxMain .layoutRow2 .layoutCol2 {
	float: left;
  }
  #boxMain .layoutRow2 .layoutCol1 {
	width: 33.3%;
  }
  #boxMain .layoutRow2 .layoutCol2 {
	width: 66.7%;
  }
  #boxMain .layoutRow2 > div > div {
	width: auto;
	margin: 10px 5px;
	border-radius: 10px;
  }
  #boxMain .layoutRow1 h2 {
	display: block;
	height: 100%;
	font-size: 14px;
	text-align: center;
	line-height: 145px;
  }
  #boxMain .layoutRow2 h2 {
	display: block;
	height: 100%;
	font-size: 14px;
	text-align: center;
	line-height: 200px;
  }
  #boxMain .layoutRow3 h2 {
	display: block;
	height: 100%;
	font-size: 15px;
	text-align: left;
	line-height: 120px;
	text-indent: 15px;
  }
  #boxMain .layoutRow4 h2 {
	display: block;
	height: 100%;
	font-size: 15px;
	text-align: left;
	line-height: 20px;
	padding-left: 15px;
  }
  #boxMain .layoutRow1 h2 a,
  #boxMain .layoutRow2 h2 a,
  #boxMain .layoutRow3 h2 a,
  #boxMain .layoutRow4 h2 a {
	display: block;
	height: 90px;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(150, 150, 150, 1);
  }
  #boxMain .layoutRow3 h2 a {
	height: 120px;
  }
  #boxMain .layoutRow4 h2 a {
	display: table-cell;
	vertical-align: middle;
	height: 120px;
  }
  #boxMain .layoutRow3 {
	height: 120px;
  }
  #boxMain .layoutRow3 > div {
	float: left;
	width: 50%;
	height: 120px;
  }
  #boxMain .layoutRow3 > div > div {
	width: auto;
	height: 120px;
	margin: 0 5px;
	margin-bottom: 10px;
	border-radius: 10px;
  }
  #boxMain .layoutRow4 {
	height: 120px;
  }
  #boxMain .layoutRow4 > div {
	width: 100%;
	height: 120px;
  }
  #boxMain .layoutRow4 > div > div {
	width: auto;
	height: 120px;
	margin: 10px 5px;
	border-radius: 10px;
  }
  #boxMain .boxCont1 div {
	background: url('../../images/common/bgMainCont1.gif') repeat-x center center;
  }
  #boxMain .boxCont1 div h2 {
	background: url('../../images/common/iconMainContM1.png') no-repeat center 8px;
	background-size: 100px auto;
  }
  #boxMain .boxCont2 div {
	background: url('../../images/common/bgMainCont2.gif') repeat-x center center;
  }
  #boxMain .boxCont2 div h2 {
	background: url('../../images/common/iconMainContM2.png') no-repeat center 8px;
	background-size: 100px auto;
  }
  #boxMain .boxCont3 div {
	background: url('../../images/common/bgMainCont3.gif') repeat-x center center;
  }
  #boxMain .boxCont3 div h2 {
	background: url('../../images/common/iconMainContM3.png') no-repeat center 8px;
	background-size: 100px auto;
  }
  #boxMain .boxCont4 div {
	background: url('../../images/common/bgMainCont4.gif') repeat-x center center;
  }
  #boxMain .boxCont4 div h2 {
	background: url('../../images/common/iconMainContM4.png') no-repeat center 8px;
	background-size: 100px auto;
  }
  #boxMain .boxCont5 > div {
	position: relative;
	height: 175px;
	background: #274f37;
  }
  #boxMain .boxCont5 div h2 {
	background: url('../../images/common/iconMainCont6.png') no-repeat 90% 68%;
	background-size: auto 120px;
  }
  #boxMain .boxCont5 div .myInfo {
	position: absolute;
	left: 15px;
	top: 25px;
  }
  #boxMain .boxCont5 div .myInfo .infoLeft {
	float: left;
  }
  #boxMain .boxCont5 div .myInfo .infoRight {
	float: left;
	width: 60px;
	height: 65px;
	margin-left: 10px;
	/* background: url('../images/common/iconMyClass.png') no-repeat center center; */
  }
  #boxMain .boxCont5 div .myInfo .infoRight .guage2 {
	position: relative;
	display: table-cell;
	vertical-align: middle;
	height: 60px;
	width: 60px;
  }
  #boxMain .boxCont5 div .myInfo .infoRight .guage2 img {
	position: static !important;
  }
  #boxMain .boxCont5 div .myInfo .myClass {
	color: #fff;
	font-size: 16px;
	margin-top: 17px;
	margin-right: 5px;
	letter-spacing: -1px;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(33, 66, 37, 1);
  }
  #boxMain .boxCont5 div .myInfo .myClassNow {
	color: #ffe400;
	font-size: 36px;
	font-weight: 900;
	line-height: 58px;
	letter-spacing: -1px;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(33, 66, 37, 1);
  }
  #boxMain .boxCont5 div .myClassGo {
	position: absolute;
	left: 15px;
	bottom: 30px;
	height: 83px;
	/* background: url('../images/common/bgMyClassGo.gif') no-repeat center top; */
  }
  #boxMain .boxCont5 div .myClassGo a {
	display: block;
	border-radius: 20px;
	border: 2px solid #dfcc0a;
	width: 86px;
	height: 35px;
	line-height: 35px;
	margin-top: 50px;
	text-align: center;
	text-indent: -5px;
	color: #fff;
	background: #294b3a url('../../images/common/iconMyClassGo.png') no-repeat 90% center;
	text-shadow: 1px 1px 1px rgba(33, 66, 37, 1);
  }
  #boxMain .boxCont6 div {
	background: url('../../images/common/bgMainCont6.gif') repeat-x center center;
  }
  #boxMain .boxCont6 div h2 {
	background: url('../../images/common/iconMainContM6.png') no-repeat right center;
	background-size: auto 80px;
  }
  #boxMain .boxCont7 div {
	background: url('../../images/common/bgMainCont7.gif') repeat-x center center;
  }
  #boxMain .boxCont7 div h2 {
	background: url('../../images/common/iconMainContM7.png') no-repeat right center;
	background-size: auto 80px;
  }
  #boxMain .boxCont8 div {
	background: url('../../images/common/bgMainCont8.gif') repeat-x center center;
  }
  #boxMain .boxCont8 div h2 {
	background: url('../../images/common/iconMainContM8.png') no-repeat right center;
	background-size: 130px auto;
  }


  /* Footer */
  #boxFooterWrap {
	width: 100%;
	height: 245px;
	background: #58c3e6 url('../../images/common/bgFooter.gif') repeat-x center top;
  }
  #boxFooterWrap .btnSns {
	display: inline-block;
	padding-top: 130px;
	padding-left: 20px;
  }
  #boxFooterWrap .btnSns li {
	float: left;
  }
  #boxFooterWrap .btnSns li a {
	display: block;
	position: relative;
	bottom: 0px;
	width: 30px;
	height: 30px;
	margin-right: 5px;
	background: url('../../images/footer/2025iconSns.png') no-repeat;
	text-indent: -9999px;
  }
  #boxFooterWrap .btnSns .btnLink1 { background-position: 0px 0px; }
  #boxFooterWrap .btnSns .btnLink2 { background-position: -30px 0px; }
  #boxFooterWrap .btnSns .btnLink3 { background-position: -60px 0px; }
  #boxFooterWrap .btnSns .btnLink4 { background-position: -90px 0px; }
  #boxFooterWrap .btnSns .btnLink5 { background-position: -120px 0px; }
  #boxFooterWrap .btnSns .btnLink6 { background-position: -150px 0px; width: 39px; }
  #boxFooterWrap .copyright {
	color: #fff;
	padding-top: 13px;
	padding-left: 20px;
  }
  #boxFooterWrap .infomation {
	font-size: 11px;
	color: #b2b2b2;
	margin-top: 10px;
	padding: 0 20px;
  }
  #boxFooterWrap .phone {
	color: #40a5cd;
	font-weight: 900;
  }
  #boxFooterWrap .logoFooter {
	width: 175px;
	height: 45px;
	margin-top: 15px;
	background: url('../../images/common/logoFooter.gif') no-repeat center top;
	text-indent: -9999px;
  }


}




/*바로 가기 메뉴*/
/*.child_menu{ position: absolute; top: -367px; right: 0px; font-family:"12LotteMartHappyBold"; }*/
.child_menu_wrap {
  position: absolute;
  left: 50%;
  margin-left: -580px;
  width: 1160px;
  top: 0px;
  height: 169px;
}

.child_menu{ position: absolute; top: -270px; right: 0px; font-family:"12LotteMartHappyBold"; }
.child_menu .lt{ display: block; }
.child_menu .rt{ display: none; }
.child_menu ul{ position: absolute; top: 3px; /*right: 22px;*/ right: 35px;font-size: 14px; line-height: 34px;z-index: 500 }
.child_menu ul a{ color: #fff; }


.li_1_17 {display: none;}