@charset "utf-8";

.articleView section.subview_title, 
.cf_newsList section.subview_title{position: relative; font-weight: 600; border-left: 3px solid #f58220; padding-left: 25px; margin: 20px 0; clear:both;}
.articleView section.subview_title:before, 
.cf_newsList section.subview_title:before{content: ''; display: block; position: absolute; left: -3px; top: 0; width: 3px; height: 5px; background: #fff;}
.articleView section.subview_title:after, 
.cf_newsList section.subview_title:after{content: ''; display: block; position: absolute; left: -3px; bottom: 0; width: 3px; height: 5px; background: #fff;}

.articleView section.paragraph_title, 
.cf_newsList section.paragraph_title{border-top: 1px solid #f58220; border-bottom: 1px solid #dcdcdc; padding: 15px 0; margin-top: 20px; font-weight: 600; font-size: 19px; clear:both;}

.articleView section.preamble, 
.cf_newsList section.preamble{border: 1px solid #ffdcbf; padding: 40px 30px; position: relative; clear:both;}
.articleView section.preamble h3, 
.cf_newsList section.preamble h3{color: #f58220; font-size: 19px; margin-bottom: 10px;}
.articleView section.preamble:before, 
.cf_newsList section.preamble:before{content: ''; display: block; background: #f58220; right: 30px; top: -8px; width: 8px; height: 17px; overflow: hidden; position: absolute;}

.articleView section.quote, 
.cf_newsList section.quote{text-align: center; font-weight: 600; font-size: 21px; padding: 20px 0; clear:both;}
.articleView section.quote .quote_top, 
.cf_newsList section.quote .quote_top{width: 24px; height: 18px; background-position: -298px -200px; display: block; margin: 0 auto 20px;}
.articleView section.quote .quote_bottom, 
.cf_newsList section.quote .quote_bottom{width: 24px; height: 18px; background-position: -326px -200px; display: block; margin: 20px auto 0;}

.articleView section.editer_note, 
.cf_newsList section.editer_note{position: relative; border:1px solid #ddd; margin:0 0 20px 0; padding:10px; background-color:#f4f4f4; clear:both;}

.kwd_tags{padding: 15px 0 0;}
.kwd_tags a{background: #F3F3F3; border-radius: 26px; color: #8B8B8B; font-size: 14px; padding: 8px 15px; display: inline-block; margin: 6px 5px 0 0; line-height: 1.5;}
.kwd_tags a:hover{background: #272727; color: #fff;}

/* ── 반응형 보강 ──────────────────────────────────────────────
 * 기사 본문(ATC_CTNS)에는 CMS에서 내려주는 고정 width 인라인 스타일이
 * 그대로 포함되어 있어(예: <div style="width:600px" class="img_box_C">,
 * <img width="600" height="399">), 좁은 화면에서 가로 스크롤이 생긴다.
 * 인라인 스타일보다 우선 적용되도록 !important로 폭을 제한한다. */
.articleView, .cf_newsList{max-width:100%; overflow-x:hidden;}
.articleView img, .cf_newsList img{max-width:100% !important; height:auto !important;}
.articleView .img_box_C, .cf_newsList .img_box_C,
.articleView [class*="img_box"], .cf_newsList [class*="img_box"]{width:100% !important; max-width:600px !important; box-sizing:border-box;}
.articleView .img_box_desc, .cf_newsList .img_box_desc{word-break:break-all;}
.articleView table, .cf_newsList table{max-width:100%; display:block; overflow-x:auto;}
.articleView iframe, .cf_newsList iframe{max-width:100%;}
@media(max-width:480px){
  .articleView section.paragraph_title, .cf_newsList section.paragraph_title{font-size:16px;}
  .articleView section.quote, .cf_newsList section.quote{font-size:17px;}
  .articleView section.preamble, .cf_newsList section.preamble{padding:24px 16px;}
}