/*
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(http://fonts.googleapis.com/earlyaccess/kopubbatang.css);
@import url('https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css');
*/
@font-face {
  font-family: '사파이어';
  src: url('/data/hearthstone.eot');
  src: url('/data/hearthstone.eot?#iefix') format('embedded-opentype'),
       url('/data/hearthstone.woff') format('woff'),
       url('/data/hearthstone.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}
@font-face {
    font-family: 'roboto_slabregular';
    src: url('/data/RobotoSlab-Regular-webfont.eot');
    src: url('/data/RobotoSlab-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/data/RobotoSlab-Regular-webfont.woff') format('woff'),
         url('/data/RobotoSlab-Regular-webfont.ttf') format('truetype'),
         url('/data/RobotoSlab-Regular-webfont.svg#roboto_slabregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Reset */
* { margin:0; padding:0; }
html, body { width:100%; height:100%; }
html { overflow-y:scroll; overflow-x:hidden; }
body { background:url(/img/body.jpg) center center no-repeat; background-color:#2D1B11;}
body, input, button { font-size:14px; line-height:1.5em; font-family:"NanumSquareRound","AppleGothic"; color:#fff; }
img, fieldset, iframe { border:0 none; }
ul li { list-style:none; }
a { color:#4cf5b0; text-decoration:none; outline: 0;}
a:hover { color:#3bb4eb; text-decoration:line;  outline: 0;}
textarea { overflow:auto; }
option { padding-right:6px; }

em,address { font-style:normal; }
button, label { cursor:pointer; _cursor /**/:hand; }
button * { position:relative; }
button img { left:-3px; left:auto; }
.hearthstone-bg { background-position: center 500px; }
/* Common */
#kcaptcha { cursor:pointer; }
label.error { display:block; clear:both; color:#FF0000 } /* jvalid */
.ed { border:1px solid #CCCCCC; padding:5px; background:#fff; } /* input */
.txt { border:1px solid #CCCCCC; padding:5px; width:120px;} /* input */
.tx { border:1px solid #CCCCCC; padding:5px; font-size:12px; } /* textarea */
.left { text-align:left; }
.right { text-align:right; }
.center { text-align:center; }
.hide { display:none; }
.border { border:1px solid #DDDDDD; }
.border-top { border-top:1px solid #DDDDDD; }
.b { font-weight:bold; }
.red { color:#FF0000; }
.white { color:#fff; }
.clear { clear:both } 
.ee { background:#eee; }
.b-cc { background:#D4D4D4; }
.b-999 { background:#999; }
.small {font-size:11px; font-family:dotum; letter-spacing:-1px; font-weight:normal;}
.normal { font-weight:normal; }
.f-left { float:left }
.f-right { float:right }
.grey { color:silver; }
.hidden { display:none; }
.b-black { background:#000; }
.m2t { margin-top:2px; }
.m3b { margin-bottom:3px; }
.m3l { margin-left:3px; }
.m3r { margin-right:3px; }
.m3t { margin-top:3px; }
.m5b { margin-bottom:5px; }
.m5l { margin-left:5px; }
.m5r { margin-right:5px; }
.m5t { margin-top:5px; }
.m10 { margin:10px; }
.m10t { margin-top:10px; }
.m15t { margin-top:15px; }
.m20t { margin-top:20px; }
.m10b { margin-bottom:10px; }
.m20b { margin-bottom:20px; }
.m10l { margin-left:10px; }
.m10r { margin-right:10px; }
.m15l { margin-left:15px; }
.hand { cursor:pointer; }
.p5 { padding:5px; }
.p10 { padding:10px; }
.p15 { padding:15px; }
.p10l { padding-left:10px; }
.p10r { padding-right:10px; }
.p20 { padding:20px; }
.w60 { width:60px; }
.w100 { width:100px; }
.w150 { width:150px; }
.w170 { width:170px; overflow:hidden;}
.w200 { width:200px; }
.normal { font-size:11px; }
.fff { color:#fff; }
.h64 { height:60px; }
.margin0 { margin:0px; }
.padding0 { padding:0px; }

.num {
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:22px;font-weight:bold;text-align:center;line-height:40px;text-shadow:0px 1px 0px #ffffff;color:#a6a6a6
}
.num2 {
	font-family:Tahoma,Arial,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:13px;font-weight:bold;text-align:center;text-shadow:0px 1px 0px #ffffff;color:#969696
}
.num3 {
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size:16px;font-weight:bold;text-align:center;text-shadow:0px 1px 0px #ffffff;color:#969696
}
.blue { color:blue; }
.red { color:red; }
.alpha { 
	opacity: 0.50;
	filter: alpha(opacity=50);
}
.z10000 { z-index:10000; }
.date { font-family:tahoma; font-size:11px; }
.line-small { line-height:120%; }
.dotted { width:auto; margin:10px 20px; border-top:1px dotted #ddd }

/* sideview */
.member { font-weight:bold; color:#fff; }
a .member { color:#111; }

#sideview { margin:5px 0 0 0; width:90px; border:1px solid #E0E0E0; background-color:#F9FBFB; }
#sideview ul li span { color:#A0A0A0; font-family:NanumSquareRound; font-size:11px; }

/* ajax */
#loading { display:none; position:absolute; width:100px; height:100px; top:50%; left:50%; margin-top:-50px; margin-left:-50px; z-index:100000000; background:url(/img/js/load_ajax.gif) no-repeat; }

/* search_font */
.sFont { background-color:#fffc00; color:#ff0000; } 

/* login */
#top_login { padding-top:5px; }
#top_login p { width:120px;margin-bottom:5px;}
#top_login p label { float:left; width:100px; }
#top_login li.infor { float:left; padding:10px}

/* box */
#box { padding:18px 0px 50px 0px; }
#boxtitle { border-bottom:2px solid #4C4C4C; font-size:14px; font-family:tahoma; font-weight:bold; padding-bottom:10px; } 

/* input */
.input_text {border:1px solid #DDDDDD; background-color:#FFFFFF; padding:5px; font-family:'tahoma','굴림','Gulim'; font-size:12px; color:#666666; letter-spacing:0px;}
.input_focus {border:1px solid #339BE0;}

/* tip */
.tip {
    color: #fff;
    background:#1d1d1d;
    display:none; /*--Hides by default--*/
    padding:10px;
    position:absolute;    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.err p { color:#ff0000; }

#css-form { overflow:auto; }
#css-form li { clear:both; overflow:auto;  }
#css-form label { width:210px; display:block; text-align:right; float:left; font-weight:bold;} 
#css-form .add { color:#999; display:block; font-size:11px; font-family:dotum; font-weight:normal; text-align:right; width:210px; letter-spacing:-1px;margin-right:3px; }
#css-form .date { color:#999; display:block; font-size:12px; font-family:dotum; font-weight:normal; text-align:left; width:210px; margin-right:3px; }
#css-form input[type=text] { float:left; width:200px;	margin:2px 0 20px 14px;}
#css-form select { float:left; margin:2px 0 20px 14px; }
#css-form p { float:left; margin:-1px 0 20px 14px; width:auto; }
#css-form li div.upload { float:left; margin:2px 0 20px 26px; }
#css-form textarea { float:left; margin:2px 0 20px 14px; width:400px; height:200px; }
#css-form #button { padding-left:215px; }
#css-form #msg { clear:both; margin-left:205px;margin-top:-10px;padding-bottom:10px; }
#css-form .btn { margin-top:2px; }
#css-form .group { overflow:auto; }
#css-form .group li { float:left; padding:10px; }
#css-form .w-date { width:85px; }

.btn { font-size:12px;padding: 8px 12px 7px;}
.f-left { float:left;}
.clear { clear:both;}
.table { display:table;}
.table-cell { display: table-cell;vertical-align: top;}
.logo {
	text-align: center;
    z-index: 10;
    position: absolute;
    top: 0;
    left: 0;
	right:0;
    bottom: 140px;
}
.f-logo { position:absolute; top:-47px; left:-65px; }
.f-last { position:absolute; left:5px; }
.header { 
	position: relative;
    height: 500px;
    background-color: #2D1B11;
    background-image: url(/img/banner.new1.jpg);
    background-repeat: no-repeat;
    background-size: initial;
    background-position: center top;
}
.header.bg1 { background-image:url('/img/banner1.jpg');}
.header.bg2 { background-image:url('/img/banner2.jpg');}
.header.bg3 { background-image:url('/img/banner3.jpg');}
.header.bg4 { background-image:url('/img/banner4.jpg');}
.header.bg5 { background-image:url('/img/banner5.jpg');}
.header.bg6 { background-image:url('/img/banner6.jpg');}
.header.bg7 { background-image:url('/img/banner7.jpg');}
.header.bg8 { background-image:url('/img/banner8.jpg');}
.header.bg9 { background-image:url('/img/banner9.jpg');}
.header .join { 
  position: absolute;
  bottom: 45px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
  width: 200px;
  margin: 0 auto;
}
a.join {
    background-color: #ffab18;
    display: inline-block;
    padding: 0px;
    text-decoration: none;
    font-family: 'coc bold',Arial,sans-serif !important;
    color: #ffffff !important;
    border-radius: 5px;
    transition: background-color 250ms ease-out;
}
a.join:hover { background-color:#FB9A00; }
a.join:hover span.arrow { background-color:#F88600; }
a.join span.arrow {
    display: inline-block;
    background-color: #ff9c00;
    width: 40px;
    height: 100%;
    border-radius: 0 5px 5px 0;
    text-align: center;
    line-height: 60px;
    transition: background-color 250ms ease-out;
	font-size:23px; 
}
.join-text { padding:18px 20px; font-size:19px;}

a.join.go1 {
  left:-255px;
}
a.join.go2 {
  left:120px;
}

.banner {
	position:relative;
	height:300px;
	padding:240px 20px 20px;
	text-align:center;
	z-index:2;
}
.banner.s2 {
	height:auto;
	background-color:#004A87;
	padding:10px 0px 20px;
}
.bg-img { position:absolute; left:0; right:0; bottom:100px; z-index:3; text-align:center; }
.banner.s2 img { display:inline;}
.header .bottom { 
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 274px;
  text-align: center;
  z-index: 5;
background-image: linear-gradient(to bottom, rgba(13,21,29,0.2) 0%, rgba(13,21,29,1) 120vh);
    min-height: 1000px;
    padding-bottom: 1px;  
}
.footer { padding:15px 0 20px; text-align:center; margin:0 auto; background-color:#000; color:#fff;}
.inline { display:inline-block;}

.fileinput-button {
  position: relative;
  overflow: hidden;
}
.fileinput-button input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  -ms-filter: 'alpha(opacity=0)';
  font-size: 200px;
  direction: ltr;
  cursor: pointer;
}

/* Fixes for IE < 8 */
@media screen\9 {
  .fileinput-button input {
    filter: alpha(opacity=0);
    font-size: 100%;
    height: 100%;
  }
}

.fixed {
  position:fixed;
  top:10px;
  right:15px;
  color:#fff;
  z-index:120;
}
.fixed a,
.fixed a:hover,
.fixed a:active { color:#fff;}

#menu { 
  position:absolute;
  top:50px;
  left:0px;
  right:0px;
  list-style: none;
  width:1140px;
  margin:0 auto;
  background-image:url('/img/wood_repeat.png'); background-repeat:repeat-x; 
}
#menu li:first-child { width:150px; }
#menu li {   
  position:relative;
  display:table-cell;
  font-size: 15px;
  font-weight: bold;  
  height: 73px;
  line-height: 150%; 
  padding:0px;
  background-image:url('/img/divider.png');
  background-repeat:no-repeat;
  background-position: 1px 4px;  
}
#menu li a { 
  display:block;
  height: 73px;
  line-height:73px;
  color:#fff; 
  padding: 0px 29px;
  font-weight:300;
  text-decoration:none;
  text-shadow: 1px 1px 2px #000;
  font-size: 17px;
}
#menu li.active a {
	color:#FCD144;
}
#menu li.end {
    position: absolute;
    background-image: url(/img/wood_right.png);
    background-size: 134px 73px;
    background-position: top;
    right: -7px;
    width: 134px;
    height: 73px;
    z-index: 0;
    top: 0;
}
#menu li.end a { padding:0px 15px; }
.lang { padding-left:20px; width:134px; background:url('/img/lang.bg.png') center center no-repeat; display:none; }
.sponsor-banner { display:table; width:100%; list-style:none; margin:0; padding:0; margin-bottom:10px; }
.sponsor-banner li { display:table-cell; }

.mobile-menu-icon { position: absolute;
    top: 15px;
    left: 20px;
    color: #fff;
    z-index: 102;
    font-size: 21px;
    padding: 5px 8px;
    cursor: pointer;display:none;}
.mobile-menu {
	position:fixed;
	top:0px; left:0; right:0; bottom:0;
	background-color:rgba(0,0,0,0.85);
	z-index:101;
	display:none;
}
.mobile-logo { 
	position:absolute;
	left:0; right:0;
	text-align:center;
	z-index:100;
	display:none;
}
.mobile-lang { 
	position: absolute;
    right: 20px;
    text-align: center;
    z-index: 100;
    top: 18px;
    font-size: 24px;
	width:34px;
	display:none;
}
.mobile-lang a { color:#fff; text-decoration:none; }
.mobile-right-icon { 
	position:absolute;
	left:0; right:0;
	text-align:center;
	z-index:100;
	display:none;
}
.lang.mobile { 
margin-top: 17px;
    height: 74px;
    line-height: 74px;
}
.container iframe { width:100%; }
.mobile-menu ul { width:100%; margin-top:50px; }
.mobile-menu li { text-align:center; padding:10px;}
.mobile-menu li a { padding:5px; display:inline-block; font-size: 21px; font-weight: 100; color:#fff; line-height:150%;}
.mobile-menu li a:focus { color:#fff; text-decoration:none; }
#member_wrap { max-width:960px; margin:0 auto;}
#member_wrap label { width:100px; }
#login_header { width: 350px; margin:0 auto; padding-top:40px; }
#login_msg { text-align:center; }

.container { max-width:960px; margin:0 auto; position:relative;}
h2 { font-weight:100; font-size:20px; color:#fff; line-height:180%; font-family:"사파이어"; letter-spacing:-1px;word-spacing:-4px;}
h3 { 
    display: inline-block;
    margin-top: 20px;
    font-weight: 100;
    font-size: 22px;
    background-color: rgba(76,247,177,0.8);
    color: #fff; 
    padding: 10px 20px;
    margin-bottom: 10px;
	font-family:"사파이어"; word-spacing:-5px;
}
h4 { font-weight:100; font-size:20px; color:#fff; line-height:1.3;text-align: center; font-family:"사파이어";letter-spacing:-1px;word-spacing:-5px;}
.book-title { margin-bottom:10px; padding-left:0px; padding-right:0px; }
.book-title:last-child { }
.box {
    padding: 10px;
}
h6 { font-weight:100; font-size:20px; color:#ccffff; line-height:180%; font-family:"사파이어"; letter-spacing:-1px;word-spacing:-4px;}

.bg-notice {
    position: absolute;
    top: -87px;
    left: 3px;
    z-index: 10;
    width: 195px;
    height: 57px;
    cursor: pointer;
    z-index: 12;
}

.groups { padding:0; margin:0px !important; }
.groups li { display:inline-block; padding:0px; }
.groups li a { background-color: #3E3B5A; color:#fff; padding:25px 50px; text-align:center; text-decoration:none; line-height:70px; height:70px; font-size:16px; font-family:'사파이어'; }
.groups li.active a { background: #4FCF90;}
.group-item { text-align:center; background-color: #3E3B5A;  padding:25px 0px;  }
.group-item a { color:#fff; font-size:16px; font-family:'사파이어';  padding:25px 0px; text-decoration:none; }
.group-item.active { background-color: #4FCF90;}