@charset "utf-8";
/* CSS Document */


/* ====== common ======================================================================================================= */
/*font*/

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 100;
  src: 
       url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Thin.woff2) format('woff2'),
	   url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Thin.woff) format('woff'),
	   url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Thin.otf.eot) format('eot'),
       url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 200;
  src: 
       url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Light.woff2) format('woff2'),
	   url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Light.woff) format('woff'),
	   url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Light.otf.eot) format('eot'),
       url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Light.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 300;
  src: 
       url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Regular.woff2) format('woff2'),
	   url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Regular.woff) format('woff'),
	   url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Regular.otf.eot) format('eot'),
       url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Regular.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: 
       url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Medium.woff2) format('woff2'),
	   url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Medium.woff) format('woff'),
	   url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Medium.otf.eot) format('eot'),
       url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Medium.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 500;
  src: 
       url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Bold.woff2) format('woff2'),
	   url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Bold.woff) format('woff'),
	   url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Bold.otf.eot) format('eot'),
       url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Bold.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  src: 
       url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Black.woff2) format('woff2'),
	   url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Black.woff) format('woff'),
	   url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Black.otf.eot) format('eot'),
       url(https://res.heraldm.com/heraldbiz/version01/mobile/font/NotoSansKR-Black.otf) format('opentype');
}

/*common*/
input, select, textarea{box-sizing:border-box; -webkit-appearance:none; border-radius:0}
.ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap}
.ellipsis2{display:-webkit-box; text-overflow:ellipsis; overflow:hidden; -webkit-box-orient:vertical; word-wrap:break-word; -webkit-line-clamp:2}
/* top */
#back-top{position:fixed; bottom:70px; right:15px; z-index:2009}
#back-top a{width:40px; height:40px; display:block; font-size:0; background:url(http://res.heraldm.com/heraldbiz/version01/mobile/images/top.png) center center no-repeat rgba(255,255,255,0.9); background-size:14px; border:1px solid #ddd}


/* ====== header ======================================================================================================= */
/* header */
.header{position:relative; width:100%; z-index:2001; background:#fff}
/* header_ad */
.header_ad{position:relative; overflow:hidden; display:block; background:#f2f2f2; text-align:center; z-index:2001}
.header_ad img{max-width:320px}
/* header_top */
.header_top, .logo{position:relative; overflow:hidden}
.logo{display:block; width:124px; margin:12px auto}/* height:18px */
.logo img{width:100%}
.menu, .menu_x{position:absolute; overflow:hidden; top:11px; left:15px; width:18px; height:18px; background:url(http://res.heraldm.com/heraldbiz/version01/mobile/images/icon1.png) center center no-repeat; background-size:cover; cursor:pointer; font-size:0}
.menu_x{display:none; background:url(http://res.heraldm.com/heraldbiz/version01/mobile/images/icon1_x.png) center center no-repeat; background-size:cover; z-index:2013}
.sch, .sch_x{position:absolute; overflow:hidden; top:12px; right:15px; width:18px; height:18px; background:url(http://res.heraldm.com/heraldbiz/version01/mobile/images/icon2.png) center center no-repeat; background-size:cover; cursor:pointer; font-size:0}
.sch_x{display:none; background:url(http://res.heraldm.com/heraldbiz/version01/mobile/images/icon1_x.png) center center no-repeat; background-size:cover}
/* sch_bg */
.sch_bg{display:none; position:absolute; overflow:hidden; margin-top:0; background:#fff; z-index:2011; width:92%; padding:5px 4% 10px; border-bottom:1px solid #e1e1e1}
.sch_btn1, .sch_btn2{display:block; float:left; box-sizing:border-box; height:32px}
.sch_btn1{width:80%; border-radius:4px 0 0 4px; background:#f4f4f4; font-size:14px; font-weight:300; color:#222; padding:0 15px}
.sch_btn2{width:20%; border-radius:0 4px 4px 0; background:#1ba2da; font-size:13px; font-weight:400; color:#fff; text-align:center; letter-spacing:-0.5px}

/* sch_bg_list */
.sch_bg_list{position:relative; overflow:hidden; margin-top:0; background:#fff; width:92%; padding:7px 4% 0}
.sch_btn1_list, .sch_btn2_list{display:block; float:left; box-sizing:border-box; height:32px}
.sch_btn1_list{width:80%; border-radius:4px 0 0 4px; background:#f4f4f4; font-size:14px; font-weight:300; color:#222; padding:0 15px}
.sch_btn2_list{width:20%; border-radius:0 4px 4px 0; background:#1ba2da; font-size:13px; font-weight:400; color:#fff; text-align:center; letter-spacing:-0.5px}


/* lnb */
.lnb_bg, .lnb, .lnb li, .lnb li a{position:relative; overflow:hidden}
.lnb, .lnb li, .lnb li a{display:block}
.lnb li{float:left; width:33.33%; text-align:center}
.lnb li a{font-size:15px; line-height:24px; color:#000; font-weight:400; padding:6px 3px; letter-spacing:-0.5px}
.lnb li.on a{color:#1ba2da; font-weight:500; border-bottom:2px solid #1ba2da}
.lnb_line{position:absolute; overflow:hidden; height:1px; bottom:0; left:0; right:0; background:#e1e1e1; z-index:-1}
/* menu_bg */
.menu_bg{display:none; position:fixed; z-index:2012; width:100%; height:100%; overflow-x:hidden; background:#fff; top:0}
.menu_bg_in, .all_category_bg, .all_category h3, .cate_list, .cate_list li, .cate_list li a{position:relative; overflow:hidden}
.menu_bg_in{color:#222; margin:15px 0 30px}
.all_category_bg{float:left;border-right:1px solid #f3f3f3; width:50%; box-sizing:border-box; padding:15px}
.all_category_bg:last-child{border:none}
.all_category h3{border-bottom:1px solid #e0e0e0; padding:0 0 5px 0; display:block}
.cate_list, .cate_list li, .cate_list li a{display:block}
.cate_list{padding:0; clear:both}
.cate_list li{float:left}
.cate_list li a{padding:0 0 15px}

/* ====== main_list ======================================================================================================= */
.con, .line, .main, .main_top, .main_img, .main_txt, .main_txt_date, .main_rank_bg{position:relative; overflow:hidden}
.con{padding-bottom:20px}
.line{background:#f2f2f2; height:8px}
.main, .main_top{display:block}
.main_top{padding:10px 15px 8px; font-size:16px; font-weight:400; letter-spacing:-0.7px; line-height:24px; color:#1ba2da}
.main_img{padding-bottom:70%}
.main_img iframe{width:100%; height:100%; position:absolute; top:0}
.main_txt{display:block; font-size:17px; line-height:23px; font-weight:400; color:#000; padding:10px 0 8px; margin:0 15px; letter-spacing:-1px; word-break:keep-all}
.main_txt_date{font-size:12px; line-height:16px; font-weight:300; color:#bbb; padding:4px 0 2px; letter-spacing:-0.5px}
.main_rank_bg{margin:0 25px 0 15px}
.main_rank{position:relative; width:100%}
.main_rank td{vertical-align:middle; font-size:17px; line-height:23px; font-weight:400; color:#000; padding:10px 0 8px; letter-spacing:-1px; word-break:keep-all}
.main_rank td:first-child{font-size:20px; font-weight:600; font-style:italic; color:#1ba2da; text-align:center; width:12%; padding-right:15px}
.main_rank td span{display:block; font-size:12px; color:#999; letter-spacing:-0.4px; font-weight:300}
.main_rank td .bar{display:inline-block; font-size:10px; color:#ccc; font-weight:200; margin:0 7px; vertical-align:top}
/* main_list */
.main_list, .main_list li, .main_list li a{position:relative; overflow:hidden}
.main_list, .main_list li, .main_list li a{display:block}
.main_list{margin:0 15px}
.main_list li a{font-size:16px; color:#333; font-weight:300; letter-spacing:-0.7px; line-height:24px; padding:10px 0 8px}
.main_txt, .main_list li{border-bottom:1px solid #f1f1f1}
.main_list li:last-child{border-bottom:none}


/* ====== main_slide ======================================================================================================= */
.main_slide li, .main_slide_txt_bg, .main_slide_txt{position:relative; overflow:hidden}
.main_slide li, .main_slide_txt_bg{display:block}
.main_slide_txt_bg{padding-bottom:60%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.5+0,0.5+100 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */
}
.main_slide_txt{position:absolute; overflow:hidden; color:#fff; margin:15px; bottom:0; font-size:17px; line-height:24px; font-weight:400; letter-spacing:-1px; word-break:keep-all}
.bx-controls-direction{display:none}
.bx-wrapper .bx-pager{top:0; padding-top:0 !important}
.bx-wrapper{margin:0 0 10px !important}


/* ====== footer ======================================================================================================= */
.footer, .footer_in, .foot_sns, .foot_sns li, .foot_sns li a, .foot_pc, .foot_fam, .foot_fam li, .foot_fam li a{position:relative; overflow:hidden}
.footer{text-align:center; background:#ececec; font-size:9px; color:#999; padding:20px 0 50px; font-weight:300}
.foot_sns{display:inline-block; margin-bottom:15px}
.foot_sns li, .foot_sns li a{display:block}
.foot_sns li{float:left; margin:0 7px}
.foot_sns li a{font-size:12px; line-height:20px; font-weight:300; color:#333; letter-spacing:-0.2px}
.foot_sns li a img{vertical-align:middle; width:20px; margin:-1px 5px 0 0}
.foot_pc{display:inline-block;  padding:5px 15px; margin:0 3px 15px; font-size:13px; line-height:18px; color:#666; border:1px solid #c6c6c6; font-weight:300; letter-spacing:-0.2px; background:#f9f9f9}
.foot_fam, .foot_fam li a{display:inline-block}
.foot_fam li{display:block; line-height:22px; letter-spacing:-0.3px; font-weight:300}
.foot_fam li a{font-size:12px; color:#777}
.foot_fam li a:after{content:'｜';color:#bbb; margin:0 3px; vertical-align:top}
.foot_fam li a:last-child:after{content:''}
.foot_fam li:last-child{margin-top:5px; letter-spacing:0.2px}

/* ====== sch_list_bg ======================================================================================================= */
.no_result{position:relative; overflow:hidden; font-size:18px; line-height:24px; font-weight:200; color:#bbb; text-align:center; padding:100px 40px; letter-spacing:-0.9px}
.sch_list_bg{position:relative; overflow:hidden; padding-bottom:20px}
.sch_list_top{font-size:16px; font-weight:400; letter-spacing:-0.5px; padding:15px 15px 10px; border-bottom:1px solid #f3f3f3}
.sch_list{position:relative; width:100%}
.sch_list td{vertical-align:middle; padding:8px 15px; border-bottom:1px solid #f3f3f3}
.sch_list td:first-child{width:35%; padding-right:0}
.sch_list td img{width:100%}
.sch_list_txt{font-size:15px; letter-spacing:-0.8px; line-height:21px; color:#222; margin:5px 0 0; font-weight:400; display:block}
.sch_list_txt span{display:block; font-size:12px; color:#aaa; padding-top:2px; font-weight:300}
.sch_list_more{position:relative; overflow:hidden; display:block; margin:20px 15px; text-align:center; border:1px solid #ddd; font-size:14px; font-weight:400; color:#222; padding:13px 0}


/* ====== view ======================================================================================================= */
.view_bg, .view_t1, .view_t2, .view_sns_bg, .view_sns, .view_sns li, .view_sns li a, .view_font, .view_font li, .view_font li a, .view{position:relative; overflow:hidden}
.view_bg{margin:0 15px 20px}
.view_t1{font-size:22px; line-height:31px; font-weight:300; color:#000; padding:15px 10px 3px 0; letter-spacing:-1.2px; word-break:keep-all}
.view_t2{font-size:12px; line-height:20px; font-weight:400; color:#bbb; padding:0 0 15px; letter-spacing:-0.5px}
.view_t2 span{display:inline-block; font-size:8px; color:#ccc; margin:0 7px; vertical-align:top}
.view_sns, .view_sns li, .view_sns li a, .view_font, .view_font li, .view_font li a{display:block}
.view_sns_bg{padding-bottom:10px}
.view_sns{float:left; width:50%}
.view_sns li{float:left; width:20%}
.view_sns li a{font-size:0; width:100%; height:30px}
.view_font{float:right; width:20%}
.view_font li{float:left; width:50%}
.view_font li a{font-size:0; border:1px solid #f1f1f1; width:100%; height:30px; box-sizing:border-box}
.view_font li:first-child a{border-right:none}
.view{font-size:16px; font-weight:300; line-height:26px; color:#444; letter-spacing:-0.7px}
.view img{max-width:100%; display:block; margin:20px auto 0}
.caption/*, .view p*/{position:relative; overflow:hidden; font-size:13px; line-height:19px; font-weight:300; color:#999; padding:0 15px; letter-spacing:-0.5px; text-align:center; margin:10px 0 25px}
.view p{margin:15px 0}

/* ====== ad ======================================================================================================= */
/* in_ad_1 */
.in_ad_1, .in_ad_1 li, .in_ad_1 li a{position:relative; overflow:hidden; display:block}
.in_ad_1{margin:5px 0 10px 0;}
.in_ad_1 li a{font-size:15px; color:#000; line-height:27px; text-overflow:ellipsis; white-space:nowrap; font-weight:300; }
.in_ad_1 ul{background:#f3f3f3;padding:15px}

.ad_title_top img { width: 100%; }
.main_text1, .ad_4_text  { font-weight: 300; }



/* ad */
.main_text_bg2{display:inline-block;vertical-align:middle; margin:2px 0 0 15px}
.main_text2{font-size:14px; color:#a7a7a7; line-height:18px; display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; margin-top:7px}
.section, .section2{position:relative; width:100%; height:auto; overflow:hidden; background-color:#FFF; box-shadow:0 1px 3px rgba(200,200,200,0.1)}
.section li{border-top:1px solid #f5f5f5}
.ut_a{display:block; line-height:36px; font-size:15px; color:#333; margin:0 15px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; line-height:15px; padding:13px 0 11px}
.sec_btn_bg{float:right; width:36px; height:12px; overflow:hidden; margin-top:2px}
.sec_btn_bg a{display:block}
.sec_btn{width:8px; height:8px; margin:2px; background-color:#333; float:left; border-radius:4px;}
.sec_btn.on{background-color:#008dd2}
.sec_btn.flex-active{background-color:#008dd2}
.impo_top{position:relative; height:auto; overflow:hidden; font-size:16px; line-height:16px; color:#008dd2; padding:14px 15px 10px; letter-spacing:-1px}
.sec_title{ float:left}
.impo_con{position:relative; background-color:#333; height:auto; overflow:hidden; padding:5px 10px}
.impo_con ul li{float:left}
.impo_bg{height:auto; overflow:hidden; width:48%; padding:1%}
.impo_text{color:#FFF; font-size:15px; padding:6px 12px 0; line-height:19px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; vertical-align:middle; max-height:38px;}
.issue{ position:relative; width:100%; overflow:hidden; border-top:1px solid #f5f5f5}
.issue a{display:block; position:relative; padding:10px 15px; overflow:hidden}
.iss_img{position:relative; float:left; width:40%; min-height:63px; background-color:#6C6; margin-right:15px}
.iss_img img{min-height:63px}
.iss_text{position:relative; float:left; width:50%; color:#333; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:15px; line-height:20px; margin-top:6%}
.ad{position:relative; width:100%; height:50px; background-color:#ECECEC; overflow:hidden; text-align:center}/* 50픽셀광고 */
.ad60{position:relative; width:100%; height:60px; background-color:#ECECEC; overflow:hidden; text-align:center}/* 60픽셀광고 */
.ad a{margin:0}
.ad_bg{width:100%}
.main_img2{display:inline-block;vertical-align:middle; margin:10px 0 10px 15px;}
.main_text_bg2{width:44.5%; margin:2px 0 0 10px}
.main_top_a{display:block; width:100%; height:100%}
.more{width:8px; height:16px; background-position:-75px 0; display:inline-block; float:right}
.impo_top a{display:block; width:100%; height:100%}
.ad_2{position:relative; height:auto; padding:12px 15px 12px 8px; background-color:#fafafa; border-top:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf; overflow:hidden}
.ad_2 li{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#414141; font-size:16px; line-height:26px}
.ad_3{position:relative; float:right; background-color:#999; width:200px; height:200px; box-sizing:border-box; margin:0 0 8px 13px}
.ad_3 a{display:block; width:100%; height:100%}
.story{position:relative; overflow:hidden; background-color:#fff}
.story_top{position:relative; height:auto; overflow:hidden; font-weight:bold; line-height:16px; color:#333; padding:25px 15px 7px; letter-spacing:-1px}
.story ul{font-size:15px; line-height:25px; margin:0 15px 20px 12px}
.story li{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%; color:#333}
.ad_4{position:relative; height:auto; overflow:hidden; border-bottom:1px solid #f2f2f2;}
.ad_4 ul{display:block; max-width:320px; margin:0 auto}
.ad_4 ul li{float:left}
.ad_4 ul li:nth-child(3n+1){clear:both}
.ad_4_bg{height:auto; overflow:hidden; width:31.33%; padding:1%}
.ad_4_text{color:#333; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; vertical-align:middle; font-size:13px; letter-spacing:-1px; padding:6px 2px 0; line-height:17px; text-align:center;}
.ad_4 iframe{max-width:320px; margin:0 auto; display:block; height:310px;}
.ad_5{position:relative; height:auto; overflow:hidden; padding:12px 15px; background-color:#f5f5f5}
.ad_5_bg{height:auto; overflow:hidden; width:100%}
.ad_5_img{float:left; width:12px; height:12px; background-color:#9f9f9f; margin:5px 7px 0 5px; overflow:hidden; color:#FFF; font-size:10px; line-height:14px; font-weight:bold; text-align:center}
.ad_5_text{font-size:14px; color:#333; padding:0; line-height:24px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.shop{width:100%; height:auto; background-color:#CCC; overflow:hidden}