@charset "utf-8";
@import url('/jsp/webzine/lib/css/reset.css');

.toparea .subvisual dl dd em {display:block; font-size:30px; font-weight:normal}
.contents-view-gallery ul li em {display:inline-block; height:55px; padding:0 30px 0 32px; line-height:65px; color:#fff; font-size:16px}
.contentsbox h4.info {position:relative; padding:15px 10px; margin:0; background:#366dad; color:#fff; font-size:16px; text-align:center; font-family:Dotum}
.contentsbox h4.info span {position:absolute; right:10px; bottom:-30px}
.contentsbox h4.top {padding-top:0}
.contentsbox h4 b{font-style:none; display:inline}
.gallery {overflow:hidden; clear:both; position:relative; margin-bottom:40px}
.gallery .pic {font-size:0}
.gallery .pic img {display:block; margin:0 auto}
.gallery p {position:absolute; left:0; bottom:0; width:100%; height:55px; background:url('/jsp/webzine/lib/images/common/bg_transparent_01.png') repeat 0 0}
.gallery em {display:inline-block; height:55px; padding:0 30px 0 32px; line-height:65px; color:#fff; font-size:16px}
.gallery p.moreline {height:70px}
.gallery p.moreline em {height:50px; padding-top:20px; line-height:22px; word-wrap:break-word; word-break:break-all}
.gallery .dbimg {position:relative; float:left; width:49.5%}
.gallery .dbimg:first-child {margin-right:1%}
.gallery .dbimg span.pic {display:block; width:100%; font-size:0}
.gallery .dbimg span.pic img {display:block; width:100%}
.gallery .trioimg {position:relative; float:left; width:33%; margin-left:0.5%}
.gallery .trioimg:first-child {margin-left:0}
.gallery .trioimg span.pic {display:block; width:100%; font-size:0}
.gallery .trioimg span.pic img {display:block; width:100%}
.dbgraph {clear:both; overflow:hidden; width:100%; margin-bottom:30px; border:1px solid #ececec; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box}
.dbgraph .dbimg {display: block; overflow:hidden; float:left; width:50%; border-right:1px solid #ececec; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box}
.dbgraph .dbimg:last-child {border:0}
.dbgraph .dbimg span.pic {display: block; width:100%; text-align:center; font-size:0}
.mb10 {margin-bottom:10px !important}
.mb30 {margin-bottom:30px !important}
.text-right {text-align:right}
.footnote {margin-bottom:40px; color:#767676; font-size:14px; line-height:24px}
p.contents-view-img em {display:inline-block; margin-top:10px; font-size:14px; color:#767676}
.font-spacing {letter-spacing:-1px}
.chrome .gallery p.moreline em {height:55px; padding-top:15px}

/* boardlist */
.boardlist {clear:both; margin:-10px 0 40px}
.boardlist table {width:100%; border-top:2px solid #366dad; border-bottom:1px solid #ececec}
.boardlist table th {padding:20px 0 14px; border-top:1px solid #ececec; border-left:1px solid #ececec; color:#767676; text-align:center; font-size:14px}
.boardlist table td {padding:20px 0 14px; border-top:1px solid #ececec; border-left:1px solid #ececec; color:#767676; text-align:center; font-size:14px}
.boardlist table td.all {text-align:left}
.boardlist table thead th {background:#fbfcfd; color:#333; border-top:0}
.boardlist table tbody th {color:#333}
.boardlist table tfoot td {border-top:1px solid #333; border-bottom:1px solid #333}
.boardlist table tfoot th {border-top:1px solid #333; border-bottom:1px solid #333; color:#333}
.boardlist table .bleft {border-left:0 !important}
.boardlist table .btop {border-top:1px solid #ececec; !important}
.boardlist .bbottom {border-bottom:0 !important}
.boardlist > p{margin:20px 0 0; font-size:12px; font-weight:lighter}
.boardlist > p.first{margin-bottom:34px}
.mobile .boardlist {width:100%; overflow-x:scroll; margin-top:10px}
.mobile .boardlist > p{width:600px; margin:10px 0 34px; font-size:12px}
.mobile .boardlist table {width:600px}
.mobile .boardlist table th {padding:10px 0}
.mobile .boardlist table td {padding:10px}
.chrome .boardlist table th {padding:18px 0}
.chrome .boardlist table td {padding:18px 0}

.mobile .toparea .subvisual dl dd {letter-spacing:0}
.mobile .toparea .subvisual dl dd em {font-size:16px; font-weight:normal}
.mobile .gallery {margin-bottom:30px}
.mobile .gallery p {height:30px}
.mobile .gallery em {overflow:hidden;width:85%; height:30px; padding:0 20px 0 18px; font-size:15px; line-height:30px; text-overflow:ellipsis; white-space:nowrap}
.mobile .gallery p.moreline {height:30px}
.mobile .gallery p.moreline em {overflow:hidden;width:85%; height:30px; padding:6px 20px 0 18px; font-size:15px; line-height:20px; text-overflow:ellipsis; white-space:nowrap}
.mobile .gallery .dbimg {float:none; width:100%}
.mobile .gallery .dbimg:first-child {margin:0 0 10px 0}
.mobile .gallery .trioimg {float:none; width:100%; margin-top:10px}
.mobile .gallery .trioimg:first-child  {margin-top:0}
.mobile .dbgraph {background:none}
.mobile .dbgraph .dbimg {float:none; width:100%; border-right:0}
.mobile .dbgraph .dbimg:first-child {border-bottom:1px solid #ececec}
.mobile .dbgraph .dbimg img {width:100%}
.mobile .contentsbox h4.info {padding:10px 8px; margin:0; background:#366dad; color:#fff; font-size:16px; text-align:center}
.mobile .contentsbox h4 b{display:block}
.mobile dl.writerbox {padding:20px}
.mobile dl.writerbox dt strong {padding-top:0px}
.mobile dl.writerbox dd {padding:0px 0}
.mobile .footnote {margin-bottom:40px; color:#767676; font-size:12px; line-height:22px}
.mobile p.contents-view-img em {font-size:12px}
.mobile .gallery.narrow-img p {left:0; width:100%; margin-left:0}
.mobile .contents-view-gallery em {overflow:hidden; width:73%; height:30px; padding:0 20px 0 18px; font-size:15px; line-height:30px; text-overflow:ellipsis; white-space:nowrap}

body#main .maincontents .flbox dd.only-mobile {display:none}
body#main.mobile.device .maincontents .flbox dd.only-pc {display:none}
body#main.mobile.device .maincontents .flbox dd.only-mobile {display:block}

.tablet.mobile .gallery .trioimg {position:relative; float:left; width:33%; margin:0 0 0 0.5%}
.tablet.mobile .gallery .trioimg:first-child {margin-left:0}
.tablet.mobile .gallery .trioimg span.pic {display:block; width:100%; font-size:0}
.tablet.mobile .gallery .trioimg span.pic img {display:block; width:100%}

/* chrome */
.pc.chrome .contents-view-gallery ul li em {line-height:55px}
.pc.chrome .gallery em {line-height:55px}
.pc.chrome .gallery p.moreline em {line-height:18px}
.mobile.chrome .contents-view-gallery ul li em {line-height:30px}
.mobile.chrome .gallery em {line-height:30px}

/* cover */
#cover .othermenu {height:auto; padding:0; background:none}
#cover .toparea .subvisual dl dd {line-height:45px}
#cover .toparea .subvisual dl dd em {display:block; font-size:30px; font-weight:normal}
#cover.mobile .toparea .subvisual dl dd {line-height:26px}
#cover.mobile .toparea .subvisual dl dd em {font-size:16px; font-weight:normal}

/* issue01 */
#issue_1 .footnote {text-align:left; margin:10px 0 0; font-size:12px}
#issue_1 .boardlist table thead th {/* padding:10px 0;  */text-align:center}
#issue_1 .boardlist table tbody td {/* padding:10px 0; */ text-align:center}
#issue_1 .boardlist table tbody tr.highlight td {background:#ffefef} 
#issue_1 .boardlist table tbody tr.highlight.yellow td {background:#fffde3}

/* issue02 */
#issue_2 .toparea .subvisual dl dd {line-height:45px}
#issue_2 .toparea .subvisual dl dd em {display:block; font-size:30px; font-weight:normal}
#issue_2 .gallery.narrow-img p {left:50%; width:609px; margin-left:-304.5px}

#issue_2 .boardlist.text-left table tbody td {padding-left:10px; text-align:left}
#issue_2.mobile .boardlist {margin-bottom:0}
#issue_2.mobile h4 {line-height:24px}
#issue_2.mobile .boardlist {margin-bottom:30px}
#issue_2.mobile .toparea .subvisual dl dd {line-height:26px}
#issue_2.mobile .toparea .subvisual dl dd em {font-size:16px; font-weight:normal}
#issue_2.mobile .gallery.narrow-img p {left:0; width:100%; margin-left:0}
#issue_2.mobile .contents-view-img.margin-down {margin-bottom:-15px}

/* issue03 */
#issue_3 .toparea .subvisual dl dd {line-height:45px}
#issue_3 .toparea .subvisual dl dd em {display:block; font-size:30px; font-weight:normal}
#issue_3 .boardlist table .text-left {text-align:left; padding-left:10px}
#issue_3 .boardlist table tbody td {text-align:left; padding-left:10px}
#issue_3.mobile .toparea .subvisual dl dd {line-height:26px}
#issue_3.mobile .toparea .subvisual dl dd em {font-size:16px; font-weight:normal}

/* trend01 */
#trend_1 p.contents-view-img.first {margin-bottom:10px}

/* trend02 */
#trend_2 sub {font-size:12px}
#trend_2 h5 {padding-bottom:10px; color:#1b1b1b; font-size:16px; line-height:20px; font-family:noto-bold}

/* report01 */
#report_1 .boardlist table tbody th.bleft {background:none}
#report_1 .footnote {margin:10px 0 20px; font-size:13px}
#report_1 .boardlist table tbody th {background:#fbfcfd; text-align:center}
#report_1 .boardlist table tbody td {padding:18px 40px; text-align:left}
#report_1 .boardlist table tbody td ul li {margin-top:5px}
#report_1 .boardlist table tbody td ul li:first-child {margin-top:0}
#report_1 .boardlist table tbody td ul li strong {font-weight:normal}
#report_1 .boardlist table tbody td ul li p {padding-left:10px}
#report_1.pc .gallery em.double {padding-top:5px; line-height:20px}

/* report02 */
#report_2 .boardlist table tbody th.bleft {background:none}
#report_2 .boardlist table tbody td .fraction {width:60%; margin:0 auto; padding:10px 0; background:url('../images/bg_bar_02.jpg') repeat-x 0 50%; }
#report_2 .boardlist table tbody td .fraction.double {background-position:0 40%}
#report_2.mobile .boardlist table tbody td .fraction {width:95%; font-size:13px}
#report_2 h5 {padding-bottom:10px; color:#333; font-size:16px; line-height:20px; font-family:noto-bold}



/* story01  */
#story_1 .contents-view-txt strong{color:#333}
#story_1 .contents-view-img.margin-down {text-align:center; margin-bottom:-45px}
#story_1 .gallery.narrow-img p {left:50%; width:531px; margin-left:-265px}
#story_1.mobile .gallery.narrow-img p {left:0; width:100%; margin-left:0}
#story_1.mobile .contents-view-img.margin-down {margin-bottom:-15px}

/* story02  */
#story_2 .gallery.narrow-img p {left:50%; width:600px; margin-left:-300px}
#story_2.mobile .gallery.narrow-img p {left:0; width:100%; margin-left:0}
#story_2.mobile .gallery p.moreline {height:45px}
#story_2.mobile .gallery p.moreline em {height:45px}

/* story03  */
#story_3 .schedulelist {overflow:hidden; width:100%; margin-bottom:30px}
#story_3 .schedulelist ul {float:left; width:80%}
#story_3 .schedulelist ul li {overflow:hidden; line-height:28px}
#story_3 .schedulelist ul li label {display:block; float:left; width:135px; padding-right:15px; color:#2d2d2d; font-size:16px}
#story_3 .schedulelist ul li span {display:block; float:none; overflow:hidden; color:#767676; font-size:16px }
#story_3 .schedulelist ul li i {display:block}
#story_3.mobile .schedulelist ul {float:none; width:100%}
#story_3.mobile .schedulelist ul li {margin-bottom:5px; line-height:22px}
#story_3.mobile .schedulelist ul li label {width:130px; font-size:14px; letter-spacing:-1px}
#story_3.mobile .schedulelist ul li span {font-size:14px; letter-spacing:-1px}
#story_3.mobile .schedulelist ul li i {display:inline}

/* news01 */
#news_1 h5 {padding-bottom:20px; color:#333; font-size:18px; line-height:20px; font-family:noto-bold}
#news_1 h6 {margin-bottom:10px; color:#333; font-size:16px; font-family:noto-bold}
#news_1 ul > li > p {margin-left:18px; padding-left:12px; background:url('../images/bg_bullet_03.gif') no-repeat 0 7px; color:#444; font-size:16px; line-height:28px}
#news_1 p.footnote {padding-left:0; margin:10px 0 0 0; background:none; text-align:right; color:#767676; font-size:12px}
#news_1 .gallery {margin-bottom:60px}
#news_1 .imgbox {margin-bottom:60px}
#news_1 .imgbox .gallery {margin-bottom:40px}
#news_1 .contents-view-gallery {margin-bottom:60px}
#news_1 .gallery.narrow-img span.pic img {margin:0 auto} 
#news_1 .gallery.narrow-img p {left:50%}
#news_1 .gallery.narrow-img.img_01 p {width:537px; margin-left:-268.5px}
#news_1 p.contents-view-img {margin-bottom:60px}
#news_1 p.contents-view-img img {display:block; text-align:center; margin:0 auto}
#news_1 .mb60 {margin-bottom:60px; !important}
#news_1 h5.top {margin-top:60px}

#news_1.mobile .imgbox  {margin-bottom:60px}
#news_1.mobile .imgbox .gallery {margin-bottom:20px}
#news_1.mobile .contents-view-gallery ul li em {font-size:13px}
#news_1.mobile .gallery.narrow-img p {left:0; width:100%; margin-left:0}
#news_1.mobile .contents-view-txt.last {margin-bottom:60px}

.mobile h6 {border:1px solid #366dad; background:none !important}
.mobile h6 span {padding-right:15px; border-right:1px solid #333}



@media screen and (max-width:374px) { 
	body#main.mobile.device .maincontents .flbox dd a strong em{display:inline-block; width:135px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
}


/* 2016.08.31 추가 */
.contentsarea .contentsbox h4 span {padding-top:20px}
.contentsarea .contentsbox h5 span {padding-top:20px}

/* 2016.10.26 추가(매월 변동있음) */
.toparea .submenulist > ul.pc-menu li.menu-active-issue strong, .toparea .submenulist > ul.pc-menu li.menu-active-trend strong, .toparea .submenulist > ul.pc-menu li.menu-active-report strong {height:79px; padding-top:40px; line-height:20px}
.toparea .submenulist > ul.pc-menu li.menu-active-story strong {height:79px; padding:27px 0 13px; line-height:20px}

/* 2017.01.26 */
.toparea .pre-contents p em.vertical-middle {padding-top:22px}
.toparea .next-contents p em.vertical-middle {padding-top:22px}