@charset 'utf-8';
@import url("common.css");

#JC_GNB_GT { position:relative;  height:38px; }
/* Main Layout */
body{ background:url(/_Heroesx/_images/main/main_bodybg.gif) repeat-x;}
#Container1 {width:100%; height:1209px; background: #E5E8ED url( http://web-files-tokyo-cdn.masangsoft.com/common/20160520/1463711176/40415a6060cffe55f39190a3f8938a77.jpg ) no-repeat center top;}
#Container2 {width:100%; height:959px; background:url( /_Heroesx/_images/main/body_top_skin2.jpg ) no-repeat center top;}
#Container3 {width:100%; height:959px; background:url( /_Heroesx/_images/main/body_top_skin3.jpg ) no-repeat center top;}
#Container4 {width:100%; height:959px; background:url( /_Heroesx/_images/main/body_top_skin4.jpg ) no-repeat center top;}
#Wrap {position:relative; width:990px; margin:0 auto;}
#TopHeadArea {position:relative; width:100%; height:394px; text-align:center;}
#ContentArea {width:940px; height:672px; float:left; padding:0 10px 0 40px; color:#7f8489;}
#SideBanner {position:absolute; left:1000px; top:131px; clear:both; float:left; _clear:both}
#SideBanner p.banner_s{margin-bottom:15px;}
.footer {width:100%; height:120px; border-top:1px solid #d2d8dd; background-color:#fff; font-size:11px; color:#888e95; display:inline; float:left; margin-top:0; clear:both;}


/*로그인 영역*/
#login_box{width:891px; height:72px; float:left; margin-bottom:20px; color:#9da3a9; padding-left:99px;}
#login_box .login_ara{width:603px; float:left;}
#login_box .login_ara li{float:left;}
#login_box .login_ara img{vertical-align:top}
#login_box p.t_banner{float:right; width:288px; text-align:right;
}
.id_blur {border:0; background: transparent url(/_Heroesx/_images/main/id.gif) no-repeat;  width:97px; height:27px; float:left; margin-right:3px;} 
.id_focus {border:0; background: transparent url(/_Heroesx/_images/main/id_on.gif) no-repeat; width:90px; height:27px; line-height:27px; font-weight:bold; padding-left:7px;float:left; color:#083a38;margin-right:3px;}
.pw_blur {border:0; background: transparent url(/_Heroesx/_images/main/pw.gif) no-repeat; width:97px; height:27px;float:left; margin-right:3px;} 
.pw_focus {border:0; background: transparent url(/_Heroesx/_images/main/pw_on.gif) no-repeat; width:90px; height:27px; line-height:27px; font-weight:bold; padding-left:7px;float:left;color:#083a38;margin-right:3px;}
.bt_login{float:left;}
.loginOption {float:left; width:166px; height:27px; background:url(/_Heroesx/_images/main/loginoption_bg.gif) no-repeat; padding:0 0 0 3px; vertical-align:top;}
.loginOption li{float:left; font-size:11px;letter-spacing:-1px;color:#626467; font-family:Dotum; padding:7px 5px 0 0; _padding:3px 0 0 0; *padding:3px 0 0 0; }
.loginOption li label{ vertical-align:2px; margin-left:2px; _margin-left:0; *margin-left:0;}
.bt_join{margin:1px 0 0 32px; float:left;}
/*로그인 CBT시작전*/
.logout_cbt{width:525px; padding:3px 0 0 0; float:left; background:url(/_Heroesx/_images/main/logout_bg_trans.gif) no-repeat 0 3px; position:relative;}
.logout_cbt p{color:#898989; font-size:11px; background:url(/_Heroesx/_images/main/bl2.gif) no-repeat 10px 12px; padding:8px 0 9px 15px;}
.logout_cbt p span{color:#69c321;}
#login_box img.bt1{ position:absolute; top:23px; right:64px;}
#login_box img.bt2{ position:absolute; top:3px; right:0;}
#login_box img.bt3{ position:absolute; top:3px; right:57px;}
#login_box img.bt5{ position:absolute; top:23px; right:61px;}

.trans_btn{top:3px; right:235px; position:absolute;}

/*로그인후*/
.login_after{width:603px; padding:23px 0 0 0; float:left; background:url(/_Heroesx/_images/main/logout_bg2.gif) no-repeat 0 23px; position:relative;}
.login_after p.nickname{color:#69c321; font-weight:bold; padding:6px 0 9px 6px; width:298px; position:relative; margin-right:5px; float:left;}
.login_after p.nickname img{ margin-right:5px; vertical-align:-5px;}
.login_after p.nickname img.bt3{position:absolute; top:5px; right:10px;}
.login_after p.cash{background:url(/_Heroesx/_images/main/bl3.gif) no-repeat 4px 12px; color:#898989; float:left; font-size:11px; padding:6px 0 7px 10px; width:138px; position:relative}
.login_after p.cash span{color:#f38624; font-family:Verdana; font-size:11px; font-weight:bold;}
.login_after p.cash img.bt4{position:absolute; top:2px; right:2px;}
/*전투력팝업*/
.fighting_power{z-index:10; position:absolute; /*top:447px; left:99px;*/ display:none;}
.fighting_power .layer_pop{width:268px; height:227px; background:url(/_Heroesx/_images/main/combat_box.gif) no-repeat; padding:12px 15px 0 15px;}
.fighting_power p.information{width:100%; position:relative; color:#69c321; padding-top:2px; height:24px;}
.fighting_power p.information span{background:url(/_Heroesx/_images/main/sp.gif) no-repeat right 0; padding:0 7px 0 0; margin-right:7px;}
.fighting_power p.information img{ position:absolute;top:0; right:0;}
.combat_list{width:100%;}
.combat_list td{color:#999ed4; font-size:11px; text-align:right; height:20px; line-height:20px;}
.combat_list td span{color:#d8daee;}
.combat_list td.name{text-align:left; color:#d8daee;}
/*닉네임 미생성*/
.no_nickname{width:603px; padding:23px 0 0 0; float:left; background:url(/_Heroesx/_images/main/logout_bg3.gif) no-repeat 0 23px; position:relative;}
.no_nickname p{color:#898989; font-size:11px; background:url(/_Heroesx/_images/main/bl2.gif) no-repeat 10px 12px; padding:8px 0 9px 15px;}
.no_nickname p span{color:#69c321;}


h2{width:100%; overflow:hidden;}
h2 img{vertical-align:middle; margin:0 7px 0 0;}
/*게시판 공지,업뎃,이벤트*/
.tab{width:100%;}
.tab li{float:left; height:39px;}
.bbs{width:435px; height:216px; float:left; margin:0 40px 0 0; color:#53595e; position: relative; top: 4px;}
.bbs .tab {
	position: relative;
	top: 4.5px;
}
.bbs a{color:#53595e;}
.bbs p.tit{font-size:14px; font-weight:bold; padding:18px 0 5px 0; clear:both;}
.bbs p.text{ line-height:17px;}
.bbs p.date{ line-height:17px; font-family:Verdana; font-size:10px;}
.bbs_list{width:100%; clear:both; padding-top:10px;}
.bbs_list li{line-height:19px; position:relative;}
.bbs_list li .date{position:absolute; top:0; right:0; font-family:Verdana; font-size:10px; color:#7f8489; font-weight:normal;}
.bbs_list a{color:#53595e;}

/*GM일기*/
.gm{width:465px; height:201px; padding:15px 0 0 0; float:left; letter-spacing:-1px;}
.gm_list{width:465px; padding-top:12px;}
.gm_list li{float:left; margin-right:12px;}
.gm_list li img{ border:1px solid #b6bdc3;}
.gm_list li p.tit{font-weight:bold;color:#53595e; padding:10px 0 7px 0; _padding:6px 0 2px 0;}
.gm_list li p.tit a{color:#53595e; }
.gm_list li p.text{font-size:11px; width:145px;}
.gm_list li.r_none{margin-right:0;}

/*오늘의 캐릭터*/
.today_character{width:435px; height:180px; float:left; margin:24px 40px 0 0;}
.today_character p{ background:#600}

/*베스트공략실*/
.best{width:465px; height:180px; margin:24px 0 0 0; float:left;}
.best_list{width:100%; clear:both; padding-top:15px; }
.best_list li{line-height:19px; position:relative; background:url(/_Heroesx/_images/main/bl.gif) no-repeat 0 8px; padding-left:8px;}
.best_list span{position:absolute; top:0; right:0; font-family:Verdana; font-size:10px; color:#7f8489; font-weight:normal;}
.best_list a{color:#53595e;}

/*멀티미디어*/
.multmedia{width:280px; height:190px; padding:26px 42px 0 0; clear:both; float:left;}
.multmedia p{width:280px; padding-top:11px; overflow:hidden;}
.video_box{width:278px; height:160px; border:1px solid #b6bdc3; margin-top:11px;}

/*베스트갤러리*/
.gallery{width:288px; height:190px; float:left; padding:26px 40px 0 0; _padding:26px 35px 0 0;}
.gallery_list{width:288px; padding-top:11px;}
.gallery_list li{float:left; margin-right:20px;}
.gallery_list li img{ border:1px solid #b6bdc3;}
.gallery_list li p.tit{font-weight:bold;color:#53595e; padding:10px 0 7px 0; _padding:6px 0 2px 0;}
.gallery_list li p.tit a{color:#53595e; }
.gallery_list li p.text{font-size:11px;}
.gallery_list li.r_none{margin-right:0;}

/*배너*/
.main_banner{width:290px; height:190px; padding:26px 0 0 0;  float:left;}


/* 201200716추가 */
.today_nx{width:435px; height:145px;padding:20px 40px 0 0;  float:left;}
.todayImg{width:198px; height:118px; float:left; margin:10px 15px 0 0;}
.todayImg img{ border:1px solid #b6bdc3;}
.todayInfo{width:220px; height:118px; margin:10px 0 0 0; float:left; color:#53595e; line-height:18px;}
.todayInfo a{color:#53595e}
.todayInfo p.todayTitle{font-size:14px; font-weight:bold; padding-bottom:10px;}
.gm_list{width:465px; height:150px; padding-top:12px;}
.pt17{padding-top:27px;}
.ranking_box{width:435px; height:145px; float:left; margin-right:40px;}
.ranking_img{width:76px; height:110px; float:left; margin-right:5px;} 
.ranking_list{width:210px; height:110px; float:left; margin:10px 0 0 0}
.ranking_list li{padding-bottom:3px; vertical-align:middle;}
.ranking_list li.tit{padding-bottom:8px;}
.ranking_list li.best1{color:#3e51c0; font-weight:bold;}
.clan_bbs{width:465px; height:145px; float:left;}
.clan_list{width:465px; height:110px; margin-top:15px;}
.clan_list li{background:url(/_Heroesx/_images/main/bl.gif) no-repeat 0 9px; padding:5px 5px 0 10px; position:relative; height:15px}
.clan_list li a{color:#53595e;}
.clan_list li .author{position:absolute; top:3px; right:0; width:135px; text-align:left;}

/* skip */
#skip{height:0; position:relative; z-index:20000;}
#skip a{position:absolute;left:0;top:-10000px;z-index:500;display:block;width:100%;text-align:center;font-size:1.3em}
#skip a:hover, #skip a:focus, #skip a:active{position:absolute;top:0;padding:15px 0;font-weight:bold;color:#fff;background:#ef7102;z-index:500}

/* 텍스트숨김 */
.hide{visibility: hidden; width:0; height:0; font-size:0;}

	.layer {display:none; position:absolute; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;}
		.layer .bg {position:absolute; top:0; left:0; width:100%; height: 1400px; background:#000; opacity:.5; filter:alpha(opacity=50);}
		.layer .pop-layer {display:block;}

	.pop-layer {display:none; position: absolute; top: 30px; left: 50%; width: 800px; margin-left:-0px; height:auto;  background-color:#fff; border: 0px solid #3571B5; z-index: 10;}	
	.pop-layer .pop-container {padding: 0px 0px;}
	.pop-layer p.ctxt {color: #666; line-height: 25px;}
	.pop-layer .btn-r {width: 100%; margin:0px 0 0px; padding-top: 0px; border-top: 1px solid #C2C0BF; text-align:right;}

	a.cbtn {display:inline-block; height:25px; padding:0 14px 0; border:1px solid #304a8a; background-color:#3f5a9d; font-size:13px; color:#fff; line-height:25px;}	
	a.cbtn:hover {border: 1px solid #091940; background-color:#1f326a; color:#fff;}

	.btn-r{background-color:#C2C0BF;}

	
/******************
20230502 - 웹플랫폼팀 황정연
소셜 로그인 관련 css
******************/
#Login {
	margin-top: 22px;
}

.bt_join {
	position: absolute;
	top: 0;
	right: 0;
}

.social_login {
	position: absolute;
	top: -3px;
	right: 182px;
}

.line {
	position: absolute;
	top: 5px;
	right: 152px;
	font-size: 23px;
	color: #000;
}

.btn_naver, 
.btn_google {
	position: relative;
	display: inline-block;
	width: 70px;
	height: 30px;
	border: 1px solid #d5d5d5;
	box-sizing: border-box;
}

.btn_naver {
	background: #fff url('https://web-files-tokyo-cdn.masangsoft.com/public/CS/social/icon_naver.png') 6px 7px no-repeat;
	background-size: 19%;
}

.btn_google {
	background: #fff url('https://web-files-tokyo-cdn.masangsoft.com/public/CS/social/icon_google.png') 6px 7px no-repeat;
	background-size: 19%;
}

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap');
.btn_naver span, 
.btn_google span {
	position: absolute;
	top: 6px;
	right: 6px;
	display: block;
	color: #767678;
	font-size: 12px;
	font-family: 'Raleway', sans-serif;
	letter-spacing: -0.2px;
}

/*20230516*/
#allImg {
	display: block;
	width: 108px;
	height: 28px;
	background: url('../../../_Heroesx/_images/main/notice_all.png') 0 0 no-repeat;
}
#allImg.on {
	background: url('../../../_Heroesx/_images/main/notice_all_on.png') 0 0 no-repeat;
}
#allDiv > div,
#noticeDiv > div,
#updateDiv > div,
#eventDiv > div {
	width: 100%;
}
#noticeImg {
	display: block;
	width: 108px;
	height: 28px;
	background: url('../../../_Heroesx/_images/main/notice_all.png') -108px 0 no-repeat;
}
#noticeImg.on {
	background: url('../../../_Heroesx/_images/main/notice_all_on.png') -108px 0 no-repeat;
}
#updateImg {
	display: block;
	width: 108px;
	height: 28px;
	background: url('../../../_Heroesx/_images/main/notice_all.png') -216px 0 no-repeat;
}
#updateImg.on {
	background: url('../../../_Heroesx/_images/main/notice_all_on.png') -216px 0 no-repeat;
}
#eventImg {
	display: block;
	width: 108px;
	height: 28px;
	background: url('../../../_Heroesx/_images/main/notice_all.png') -324px 0 no-repeat;
}
#eventImg.on {
	background: url('../../../_Heroesx/_images/main/notice_all_on.png') -324px 0 no-repeat;
}