@charset 'utf-8';
/******** Font ************/
@import url(//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css);

/******** Reset ***********/
html{ height:auto; overflow-x:hidden; overflow-y:auto; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
body{ overflow-x:hidden; overflow-y:auto; height:100%; min-height:100%; padding:0; margin:0; font-family:"Nanum Barun Gothic","MalgunGothic",Dotum,Arial,sans-serif; font-size:16px; color:#000; line-height:1.4; letter-spacing:-0.05em;  background:#ffffff; -webkit-overflow-scrolling:touch; }
* {word-break:keep-all;}
body,p,h1,h2,h3,h4,h5,h6,table,caption,form,fieldset,legend,span,div,th,td,address{ margin:0; padding:0; }
ul,ol,li,dl,dt,dd{ list-style:none; margin:0; padding:0px; }
img{ border:none; max-width:100% !important; vertical-align:middle; }
a { color:inherit; text-decoration:none; }
a:hover,a:active,a:focus { color:inherit; text-decoration:none; }
hr { border:0; border-top:1px solid #000; margin:0; height:1px; }
iframe { border:none; }
table{ border-collapse:collapse; border-spacing:0; width:100%; }
button, input, select, textarea { margin:0; font-size:100%; }
button, input { *overflow:visible; line-height:normal; *line-height:12px; }
button::-moz-focus-inner, input::-moz-focus-inner { padding:0; border:0; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { cursor:pointer; -webkit-appearance:button; }
select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] { cursor:pointer; }
input[type="search"] { -webkit-box-sizing:content-box; -moz-box-sizing:content-box; box-sizing:content-box; -webkit-appearance:textfield; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance:none; }
textarea { overflow:auto; vertical-align:top; }
*,*:before,*:after { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -ms-box-sizing:border-box; }
:lang(en) { letter-spacing:0px; word-break:Keep-all; }

#skipnavi{ }
#skipnavi li a{ display:block; font-size:16px; width:100%; position:absolute; top:-10000px; left:0; text-align:center; z-index:999999; }
#skipnavi li a:focus{ position:absolute; top:0; left:0; font-weight:bold; color:#fff; background:#272727; padding:20px 0; height:14px; }
/* selectbox 디자인만 */
select:not(.no-style) {
  font-family:inherit;  /* 폰트 상속 */
  border-radius:0px; /* iOS 둥근모서리 제거 */
  -webkit-appearance:none; /* 네이티브 외형 감추기 */
  -moz-appearance:none;
  appearance:none;
  outline:0;
 }

/* IE 10, 11의 네이티브 화살표 숨기기 */
select::-ms-expand {
  display:none;
 }
.input-box { position:relative; }
.input-box label {
  position:absolute;
  top:1px;  /* input 요소의 border-top 설정값 만큼 */
  left:1px;  /* input 요소의 border-left 설정값 만큼 */
  padding:.5em .8em;  /* input 요소의 padding 값 만큼 */
  color:#999;
  cursor:text;
 }
/*input*/
input[type="text"],
input[type="password"],
input[type="tel"] {
  height:auto;  /* 높이 초기화 */
  line-height:normal;  /* line-height 초기화 */
  padding:8px 10px;  /* 여백 설정 */
  border:none;
  width:auto;
  border-bottom:1px solid #dfdfdf;
  font-size:16px;
  color:#333;
  font-weight:normal;
  font-family:inherit;
  border-radius:0;  /* iSO 둥근모서리 제거 */
  outline-style:none;  /* 포커스시 발생하는 효과 제거를 원한다면 */
  -webkit-appearance:none;  /* 브라우저별 기본 스타일링 제거 */
  -moz-appearance:none;
  appearance:none;
 }

/******* Common Class ***************/
.clearfix { *zoom:1; }
.clearfix:before, .clearfix:after { display:table; line-height:0; content:""; }
.clearfix:after { clear:both; }
.hidden { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.of-hi{ overflow:hidden; }
.vi-hi { visibility:hidden; }
.blind{ width:0; height:0; text-indent:-10000px; font-size:0px; line-height:0px; position:absolute; left:-99999px; }
.fl-l { float:left; }
.fl-r { float:right; }
.cl-b { width:0; height:0; font-size:0; line-height:0; clear:both; }
.ta-c { text-align:center; }
.ta-l { text-align:left; }
.ta-r { text-align:right; }
.img-box { width:100%; margin:0; padding:0; position:relative; float:left; }
.img-box img { width:100%; height:auto; float:left; }
.img-box > [class*="col-"]{ padding-left:0; padding-right:0; position:relative; float:left; }
.img-box > [class*="col-"] img { width:100%; height:auto; float:left; }


.nmt10 { margin-top:-10px; }
.nmt20{ margin-top:-20px; }
.nmt50 { margin-top:-50px; }
.nmt80{ margin-top:-80px; }

.mt0 { margin-top:0; }
.mt5 { margin-top:5px; }
.mt10 { margin-top:10px; }
.mt15 { margin-top:15px; }
.mt20 { margin-top:20px; }
.mt25 { margin-top:25px; }
.mt30 { margin-top:30px; }
.mt35 { margin-top:35px; }
.mt40 { margin-top:40px; }
.mt45 { margin-top:45px; }
.mt50 { margin-top:50px; }
.mt55 { margin-top:55px; }
.mt60 { margin-top:60px; }
.mt65 { margin-top:65px; }
.mt70 { margin-top:70px; }
.mt75 { margin-top:75px; }
.mt80 { margin-top:80px; }
.mt85 { margin-top:85px; }
.mt90 { margin-top:90px; }
.mt95 { margin-top:95px; }
.mt100 { margin-top:100px; }
.mt105 { margin-top:105px; }
.mt110 { margin-top:110px; }
.mt115 { margin-top:115px; }
.mt120 { margin-top:120px; }
.mt160 { margin-top:160px; }

.mb0 { margin-bottom:0; }
.mb5 { margin-bottom:5px; }
.mb10 { margin-bottom:10px; }
.mb15 { margin-bottom:15px; }
.mb20 { margin-bottom:20px; }
.mb25 { margin-bottom:25px; }
.mb30 { margin-bottom:30px; }
.mb35 { margin-bottom:35px; }
.mb40 { margin-bottom:40px; }
.mb45 { margin-bottom:45px; }
.mb50 { margin-bottom:50px; }
.mb55 { margin-bottom:55px; }
.mb60 { margin-bottom:60px; }
.mb65 { margin-bottom:65px; }
.mb70 { margin-bottom:70px; }
.mb75 { margin-bottom:75px; }
.mb80 { margin-bottom:80px; }
.mb85 { margin-bottom:85px; }
.mb90 { margin-bottom:90px; }
.mb95 { margin-bottom:95px; }
.mb100 { margin-bottom:100px; }
.mb105 { margin-bottom:105px; }
.mb110 { margin-bottom:110px; }
.mb115 { margin-bottom:115px; }
.mb120 { margin-bottom:120px; }
.mb140 { margin-bottom:140px; }

.pt0 { padding-top:0; }
.pt10 { padding-top:10px; }
.pt15 { padding-top:15px; }
.pt20 { padding-top:20px; }
.pt25 { padding-top:25px; }
.pt30 { padding-top:30px; }
.pt35 { padding-top:35px; }
.pt40 { padding-top:40px; }
.pt45 { padding-top:45px; }
.pt50 { padding-top:50px; }
.pt55 { padding-top:55px; }
.pt60 { padding-top:60px; }
.pt65 { padding-top:65px; }
.pt70 { padding-top:70px; }
.pt75 { padding-top:75px; }
.pt80 { padding-top:80px; }
.pt85 { padding-top:85px; }
.pt90 { padding-top:90px; }
.pt95 { padding-top:95px; }
.pt100 { padding-top:100px; }
.pt130 { padding-top:130px; }
.pt140 { padding-top:140px; }
.pt150 { padding-top:150px; }

.pt0 { padding-bottom:0; }
.pb10 { padding-bottom:10px; }
.pb15 { padding-bottom:15px; }
.pb20 { padding-bottom:20px; }
.pb25 { padding-bottom:25px; }
.pb30 { padding-bottom:30px; }
.pb35 { padding-bottom:35px; }
.pb40 { padding-bottom:40px; }
.pb45 { padding-bottom:45px; }
.pb50 { padding-bottom:50px; }
.pb55 { padding-bottom:55px; }
.pb60 { padding-bottom:60px; }
.pb65 { padding-bottom:65px; }
.pb70 { padding-bottom:70px; }
.pb75 { padding-bottom:75px; }
.pb80 { padding-bottom:80px; }
.pb85 { padding-bottom:85px; }
.pb90 { padding-bottom:90px; }
.pb95 { padding-bottom:95px; }
.pb100 { padding-bottom:100px; }
.pb120 { padding-bottom:120px; }
.pb140 { padding-bottom:140px; }
.pb150 { padding-bottom:150px; }

.pd0 { padding:0; }
.pdl0 { padding-left:0; }
.pdr0 { padding-right:0; }
.mg0 { margin:0 }

/************** Layout *******************/
body.block::after { content:''; position:fixed; width:100%; height:100%; background-color:rgba(0,0,0,.3); left:0px; top:0px; z-index:9997; }
#header { background-color:#fff; color:#ebebeb; position:fixed; width:100%; height:90px; z-index:9998; border-bottom:1px solid #dcdcdc; }
#header > div,#footer > div { max-width:1280px; margin:0 auto; position:relative; }
#header .logo { position:absolute; z-index:1; float:left; left:0px; top:0px; height:90px; line-height:90px; }
#header .webzine-tit { margin-left:110px; line-height:90px; display:inline-block; }
#header .webzine-tit .tit { color:#757d85; font-size:18px; }
#header .webzine-tit .divide { display:inline-block; width:1px; height:12px; background-color:#757d85; margin:0px 20px; }
#header .webzine-tit .month { color:#c40d3f; font-size:18px; text-transform:uppercase; }
#header .webzine-tit .month > strong { margin-left:10px; }
#header .menu { position:absolute; z-index:5; top:0px; right:0px; width:80px; text-indent:-9999px; }
#header .menu a { display:block; margin:auto; z-index:3; padding:30px 20px; transition:all ease-out 0.3s; -webkit-transition:all ease-out 0.3s; }
#header .menu a span{ position:absolute; right:25%; top:50%; width:40px; height:3px; border-radius:3px; background:#3f3f3f; transition:all ease-out 0.3s; -webkit-transition:all ease-out 0.3s; }
#header .menu a span:first-child{ margin-top:-10px; }
#header .menu a span.last { margin-top:10px;}
#header .menu.active a span{ transform:rotate(45deg); -webkit-transform:rotate(45deg); background-color:#c40d3f; }
#header .menu.active a span:first-child { transform:rotate(135deg); -webkit-transform:rotate(135deg); margin-top:0 ; }
#header .menu.active a span.last { display:none;}

.fluid-max-1280 { max-width:1280px; }
.article-wrap .container { padding-left:20px; padding-right:20px; }

#footer { overflow:hidden; background-color:#fff; padding:30px 0; width:100%; border-top:1px solid #bfbfbf; letter-spacing:-0.5px; line-height:44px; }
#footer p { font-size:12px; color:#252525; text-align:center; }
#footer .copyright { position:absolute; left:19px; top:0; }
#footer .copyright-img { width:100%; text-align:center; }
#footer .select-wrap { overflow:hidden; position:absolute; right:19px; top:0; width:246px; }
#footer .select-box { float:left; width:164px; height:100%; position:relative; z-index:1; margin:auto; background:none; }
#footer .select-box select { width:100%; vertical-align:middle; height:44px; line-height:44px; border:1px solid #bfbfbf; background-color:#fff; font-size:14px; color:#6c6c6c; letter-spacing:-0.025em; padding:0px 45px 0px 20px; background-repeat:no-repeat; background-image:url(../../img/common/icon_select.png); background-position:right center; }
#footer .select-box select option { color:#333333; }
#footer .select-wrap button { float:left; width:75px; height:44px; font-size:15px; line-height:44px; margin-left:7px; border:none; background:#393939; color:#fff; letter-spacing:-0.05em; }

#gnbWrap { position:fixed; z-index:9999; top:90px; width:100%; display:none; }
#gnbWrap > div { position:absolute; right:0;  width:100%; padding-top:35px; overflow:hidden; background-color:#221d1d; display:block; }
#gnbWrap .container { width:100%; max-width:1296px; padding-left:8px; padding-right:8px; }
#gnbWrap .container .row { margin-left:-8px; margin-right:-8px; }
#gnbWrap .gnb-list .tit, #gnbWrap .gnb-list > ul { float:left; width:50%; padding-left:8px; padding-right:8px; }
#gnbWrap .gnb-list .tit, #gnbWrap .gnb-list .tit a { font-weight:400; font-size:23px; color:#fff; padding-bottom:15px; padding-left:32px; font-weight:900; line-height:1.458; letter-spacing:-0.025em; }
#gnbWrap .gnb-list .tit:before { content:''; display:block; width:35px; height:2px; background:#b7b7b7; margin-bottom:10px; margin-left:1px; }
#gnbWrap .gnb-list .tit a { padding-left:0; }
#gnbWrap .gnb-list .tit a:hover { color:#c40d3f; }
#gnbWrap .gnb-list .tit.alone a { padding-bottom:0; margin-bottom:0; }
#gnbWrap .gnb-list { position:relative; overflow:hidden; float:left; width:33.33333333%; min-height:286px; }
#gnbWrap .gnb-list:before { content:''; position:absolute; display:block; top:0; left:0; width:1px; height:100%; background:#565656; }
#gnbWrap .gnb-list .border { overflow:hidden; width:100%; }

#gnbWrap > div .gnb-close { position:absolute; top:25px; right:5.5%; z-index:10; }
#gnbWrap > div #scroll { overflow-y:auto; }
#gnbWrap > div h2 { color:#fff; font-size:24px; margin:40px; line-height:1.5; }
#gnbWrap > div h2 span { font-size:16px; display:block; }
#gnbWrap > div ul li > .tit:active { color:#c40d3f; }
#gnbWrap .border > ul { overflow:hidden; display:inline-block; float:left; position:relative; width:50%; margin-top:18px; margin-bottom:16px; padding-left:8px; padding-right:8px; }
#gnbWrap > div ul li span { color:#838383; font-size:14px; letter-spacing:-0.025em; -webkit-transition:all 0.25s; -moz-transition:all 0.25s; -ms-transition:all 0.25s; -o-transition:all 0.25s; }
#gnbWrap > div ul li a { color:#fff; font-size:17px; display:block; margin-bottom:25px; line-height:1.35; letter-spacing:-0.025em; -webkit-transition:all 0.25s; -moz-transition:all 0.25s; -ms-transition:all 0.25s; -o-transition:all 0.25s; font-weight:500; }
#gnbWrap .gnb-list li.active a, #gnbWrap .gnb-list .tit.active { color:#fff; }
#gnbWrap .gnb-list .tit.active:before { background:#fff; }
#gnbWrap > div .gnb-box { width:100%; height:100%; }

#gnbWrap .tit { display:block; padding-top:60px; margin-bottom:25px; font-size:20px;color: #fff;font-weight: bold;line-height: 1.391; background-position:top center; background-repeat:no-repeat; }
#gnbWrap .tit.item1 { background-image:url('../../img/common/icon_kumho.png'); }
#gnbWrap .tit.item2 { background-image:url('../../img/common/icon_story.png'); }
#gnbWrap .tit.item3 { background-image:url('../../img/common/icon_luckybox.png'); }
#gnbWrap .tit.item4 { background-image:url('../../img/common/icon_arthall.png'); }
#gnbWrap .tit.item5 { margin-top:35px; background-image:url('../../img/common/icon_notice.png'); }
#gnbWrap .col-sm-3 { min-height:475px; border-left:1px solid #323030; }
#gnbWrap .col-sm-3:first-child { border-left:none; }
#gnbWrap .tit.active,#gnbWrap > div ul li span.active, #gnbWrap .col-sm-3 li.active a, #gnbWrap .col-sm-3 li.active a:hover { color:#c40d3f; }
#gnbWrap > div ul li.active span { color:#c40d3f !important; }
#gnbWrap .tit.active.item1 { background-image:url('../../img/common/icon_kumho_active.png'); }
#gnbWrap .tit.active.item2 { background-image:url('../../img/common/icon_story_active.png'); }
#gnbWrap .tit.active.item3 { background-image:url('../../img/common/icon_luckybox_active.png'); }
#gnbWrap .tit.active.item4 { background-image:url('../../img/common/icon_arthall_active.png'); }
#gnbWrap .tit.active.item5 { background-image:url('../../img/common/icon_notice_active.png'); }

/******** Sub Common ***************/
.article-wrap { 	width:100%; 	height:100%; background:#fff; margin:0 auto; position:relative; overflow:hidden; }
#headline { width:100%; position:relative; overflow:hidden; }
#headline .headline-container { max-width:1280px; margin:0 auto; text-align:center; }
/*#headline .headline-container .category { display:inline-block; padding-bottom:10px; border-bottom:1px solid #fff; margin-top:100px; font-size:22px; font-weight:300; color:#fff; }
#headline .headline-container .sub-tit { font-size:36px; color:#fff; }
#headline .headline-container .tit { font-size:54px; color:#fff; }*/
#lead { 	width:100%; word-break:break-all; padding:60px 0; }
#lead p { font-size:18px; line-height:1.5; }
.article-navi { position:fixed; bottom:25%; left:50%; margin-left:685px; z-index:2; }
.article-navi a { display:block; background-repeat:no-repeat; background-color:rgba(255,255,255,1); background-position:center center; }
.prev-article { position:relative; border:1px solid #dcdcdc; border-width:1px 1px 0px 1px; }
.prev-article::after { position:absolute; content:''; width:49px; height:1px; background-color:#dcdcdc; left:10px; bottom:0px; }
.prev-article a { background-image:url(../../img/common/btn_prev_article.png); }
.next-article { position:relative; border:1px solid #dcdcdc; border-width:0px 1px 1px 1px; }
.next-article a { background-image:url(../../img/common/btn_next_article.png); }
.article-navi div a{ width:66px; height:56px; display:block; }
.top-article { position:relative; border:1px solid #dcdcdc; margin-top:15px; }
.article-navi .top-article a { width:66px; height:66px; background-image:url(../../img/common/btn_top.png); }

@media all and (min-width:769px) {
#footer .select-box:hover { background:#fff; }
#gnbWrap > div ul li a:hover { color:#c40d3f;}
 }
/********* Media *********/
@media (max-width:1500px) {
  .article-navi { position:fixed; bottom:25%; right:0px; left:inherit; margin-left:0px; }
 }
@media (max-width:1280px) {

 }
@media (max-width:1200px) {
    #header .logo { left:20px; }
    #footer { line-height:1.5; }
    #footer > div { text-align:center; }
    #footer .copyright, #footer .copyright-img { position:relative; width:100%; left:0; top:0; text-align:center; }
    #footer .copyright-img { margin-top:5px; }
    #footer .select-wrap { position:relative; display:inline-block; right:0; top:0; margin-top:15px; }
 }
@media all and (max-width:970px) {
 }
@media all and (max-width:768px) {
    #header { height:80px; }
    #header .logo { width:14.84%; height:80px; }
    #header > div { text-align:center; }
    #header .webzine-tit { margin-top:24px; margin-left:0px; }
    #header .webzine-tit > span { display:block; line-height:1.5; }
    #header .webzine-tit .tit { font-size:11px; }
    #header .webzine-tit .divide { display:none; }
    #header .webzine-tit .month { font-size:11px; }
    #header .logo { left:5.2%; }
    #gnbWrap { height:100%; top:80px; }
    #gnbWrap > div { width:70%; margin-left:30%; max-width:543px; top:0; padding-left:8.5%; padding-right:8.5%; padding-top:0; border-bottom:none; }
    #gnbWrap .border > ul { padding-left:0; padding-right:0; margin-bottom:0; }
    #gnbWrap .gnb-list { float:none; width:100%; min-height:inherit; }
    #gnbWrap .gnb-list:before { display:none; }
    #gnbWrap .gnb-list .tit { float:none; width:100%; padding-right:0; padding-top:35px; padding-left:0; font-size:18px; }
    #gnbWrap .gnb-list .tit.exp { margin-top:0; }
    #gnbWrap .gnb-list .tit, #gnbWrap .gnb-list .tit a { font-size:18px; }
    #gnbWrap .gnb-list .tit:before { margin-bottom:15px; }
    #gnbWrap .gnb-list .border { position:relative; height:auto; padding-bottom:35px; }
    #gnbWrap .gnb-list .border:before { position:absolute; content:''; top:0; left:0; display:block; width:100%; height:1px; background:#ebebeb; }
    #gnbWrap .gnb-list:first-child .border:first-child:before { display:none; }
    #gnbWrap > div ul li:first-child .border:before { display:none; }
    #gnbWrap .col-sm-3 { min-height:inherit; margin-top:30px; padding-bottom:30px; border-left:none; border-bottom:1px solid #323030; }
    #gnbWrap .col-sm-3:last-child { border:none; }
    .article-navi a { background-color:rgba(255,255,255,.5); }
 }
@media all and (max-width:480px) {
    #gnbWrap > div { width:100%; margin-left:0%; }
    .article-navi { bottom:170px; transform:scale(0.6); }
 }