@charset "utf-8";
 
.clfix{*zoom:1;}
.clfix:before,.clfix:after{display:table;line-height:0;content:"";}
.clfix:after{clear:both;}
.hidden {font-size:0;height:0;line-height:0;overflow:hidden;width:0}

/* Article List */
.card-board {width:100%;}
.card-board ul li {margin:0;}

.renewal .chac-article .ui-tab-pnl {padding: 4rem 2.4rem 0;}
.renewal .chac-article .ui-full-tab .ui-tab-btns {padding: 0;}
.renewal .chac-article .ui-full-tab .ui-tab-btns .ui-tab-btn:first-child {margin-left:2.4rem;}
.renewal .chac-article .ui-full-tab .ui-tab-btns .ui-tab-btn:last-child {margin-right:2.4rem;}
.renewal .chac-article .ui-full-tab .ui-tab-btns .ui-tab-btn {padding:0 14px; margin-right:8px; font-size:13px; border:1px solid #d9dadc; border-radius:20.5px;}

.renewal .ui-tab-btn.selected, 
.renewal .ui-tab-btn[aria-selected=true] {border:1px solid #cfe3f7 !important; background:#f7fbff; padding-left:24px !important;}
.renewal .ui-tab-btn.selected:after, 
.renewal .ui-tab-btn[aria-selected=true]:after {content: ""; display: block; position: absolute; left: 10px; top: 10px; width:10px; height:9px; border-radius:40px; clip-path:polygon(11% 34%, 0 50%, 43% 90%, 100% 21%, 86% 9%, 42% 61%); z-index: 0}


.article-wrap {}

.article-list {position:relative; display:block;background:#3f35b5; border-radius:24px; width:100%; height:280px; margin:0 auto; text-align:center; box-shadow:0 0 20px 0 rgba(0, 0, 0, 0.2); padding:32px 0 40px;}
.article-list .article-cate {color:#fff; font-size:16px; margin:0 0 8px; font-weight:normal;}
.article-list .article-tit {height:55px; color:#fff; font-size:20px; font-weight:bold; margin:0 0 24px; padding:0 24px; line-height:1.4em;}
.article-list .article-tit .branding {display:block; height:28px; color:#fff; font-size:20px; font-weight:bold; line-height:1.4em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.article-list .article-tit span {font-size:14px; font-weight:500; letter-spacing: -0.19px; line-height: 1.43;}
.article-list .article-thumb {width:96px; margin:0 auto;}
.article-list .article-thumb.youtube {width:56px; margin:0 auto;}
.article-list .brandingDimed {position:absolute; top:0; width:100%; height:100%; border-radius:24px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 30%, rgba(0, 0, 0, 0.35) 70%, rgba(0, 0, 0, 0) 100%);}
.article-list .brandingCont {position:relative;}

.card-board ul li.sns-list .article-cate{color:#111;}
.card-board ul li.sns-list .article-tit{color:#111;}


@media screen and (max-width:699px) {
    .card-board ul {display:flex; flex-wrap: wrap;}
    .card-board ul li {width:100%; padding:12px 0;}
}
@media screen and (min-width:700px) and (max-width:999px) {
    .renewal .chac-article .ui-tab-pnl {display:flex; flex-wrap:nowrap;}
    .card-board ul {display:flex; flex-wrap: wrap;}
    .card-board ul li {width:calc(50%); padding:12px 6px;}
    .card-board ul li:nth-child(odd) {padding-left:0; padding-right:12px;}
    .card-board ul li:nth-child(even) {padding-right:0; padding-left:12px;}
}
@media screen and (min-width:1000px) {
    .renewal .chac-article .ui-tab-pnl {display:flex; flex-wrap:nowrap;}
    .card-board ul {display:flex; flex-wrap: wrap;}
    .card-board ul li {width:calc(33.3%); padding:12px 10px;}
    .card-board ul li:first-child,
    .card-board ul li:nth-child(4n) {padding-left:0; padding-right:15px;}
    .card-board ul li:nth-child(3n) {padding-right:0; padding-left:15px;}
}
@media screen and (min-width:1200px) {
    .card-board ul {max-width:1200px; margin:0 auto;}
}

/* sns */
#sns {display:none}

/* Article Contents */
.article-wrap {padding:0 0 160px;}

.article-wrap .article-header {padding:48px 24px 0;}
.article-wrap .article-header h2{color:#fff; font-size:28px; font-weight:bold; line-height:1.5;}
.article-wrap .article-header .header-cate {color:#fff; font-size:18px; font-weight:500; letter-spacing:-0.25px; margin-bottom:8px;}
.article-wrap .article-header .header-thumb {width:160px; margin:18px auto 0;}

/* SNS 헤더 */
.article-wrap .article-header.sns-header {color:#111; background:#fff;}
.article-wrap .article-header.sns-header h2{color:#111;}
.article-wrap .article-header.sns-header .header-cate {color:#111;}
.article-wrap .article-header.sns-header .header-thumb {display:none;}

/* DIC 헤더 */
.article-wrap .article-header.dic-header {color:#111; background:#fff;}
.article-wrap .article-header.dic-header h2{color:#111;}
.article-wrap .article-header.dic-header h2 span {display:none;}
.article-wrap .article-header.dic-header .header-cate {color:#111;}
.article-wrap .article-header.dic-header .header-thumb,
.article-wrap .article-header.dic-header .header-thumb #animation {width:312px;}
.article-wrap .article-header.dic-header .header-thumb #thumb {display:none;}

/* 브랜딩 헤더 */
.article-wrap .article-header.brnading-header {color:#111; background:#fff;}
.article-wrap .article-header.brnading-header h2{color:#111;}
.article-wrap .article-header.brnading-header h2 span {display:none;}
.article-wrap .article-header.brnading-header .sub-title-wrap {display:flex; margin:12px 0 0;}
.article-wrap .article-header.brnading-header .sub-title-wrap .mark {width:32px; height:32px; border-radius: 100px; margin-right:8px;}
.article-wrap .article-header.brnading-header .sub-title-wrap .youtube-mark {width:32px; height:32px; border-radius: 100px; background:#ccc url('/resources/images/article/thumb_youtube.png') no-repeat center center; background-size:32px;}
.article-wrap .article-header.brnading-header .sub-title-wrap .webtoon-mark {width:32px; height:32px; border-radius: 100px; background:#ccc url('/resources/images/article/thumb_webtoon.png') no-repeat center center; background-size:32px;}
.article-wrap .article-header.brnading-header .sub-title-wrap .sub-title {font-weight:400; font-size:16px; line-height:24px; color:#757679; padding:4px 0 0;}
.article-wrap .article-header.brnading-header .header-cate {color:#111;}
.article-wrap .article-header.brnading-header .header-thumb,
.article-wrap .article-header.brnading-header .header-thumb #dimedThumb,
.article-wrap .article-header.brnading-header .header-thumb #thumb {display:none;}


.article-wrap .article-cont {padding:32px 0; font-size:17px; line-height:1.65; color:#757679;}
.article-wrap .article-cont h3 {padding:0 24px; margin:48px 0 24px; font-size:20px; line-height:1.5; font-weight:bold; color:#111; word-break:keep-all;}
.article-wrap .article-cont h4 {padding:0 24px; margin:24px 0 12px; font-size:18px; line-height:1.67; font-weight:bold; color:#111; word-break:keep-all;}
.article-wrap .article-cont p {padding:0 24px;}
.article-wrap .article-cont p.webtoon {padding:0; font-size:0;}
.article-wrap .article-cont sup {line-height:0;}
.article-wrap .article-cont .sup {padding:0 24px; margin:8px 0 0; font-size:15px; line-height:1.73;}
.article-wrap .article-cont strong {background:#ecf5ff}
.article-wrap .article-cont p img {width:100%; max-width:390px; padding:24px 0 10px; margin:auto;}
.article-wrap .article-cont p.webtoon img {width:100%; max-width:390px; padding:0; margin:auto; font-size:0;}
.article-wrap .article-cont .full {padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important;}
.article-wrap .article-cont .tag {margin:12px 0 38px; font-size:15px; font-weight:normal; line-height:1.73; color:#2c7fdf;}
.article-wrap .article-cont .img-caption {font-size:14px; font-weight:normal; line-height:1.57;}
.article-wrap .article-cont .article-movie {position:absolute; top:44%; left:50%; margin-left:-127px; width:254px; height:34%; background:#000;}
.center {text-align: center;}
.relative {position:relative;}

.only-pc {display:none;}
.only-mo {display:block;}

@media screen and (max-width:390px) {
    .article-wrap .article-cont .article-movie {margin-left:-33%; width:66%; height:34%;}
}

/* bullet */
.article-wrap .article-cont [class*=bul-round] {border-radius:16px; background:#f3f5f9; padding:16px; margin:24px 24px;}
.article-wrap .article-cont [class*=bul-round] li {margin-top: 0.4rem; color: #757679; font-size: 1.4rem; line-height: 2.4rem;}
.article-wrap .article-cont [class*=bul-round] li:before {top: 1rem; background: #8D8E90; width: 0.24rem; height: 0.24rem;}
.article-wrap .article-cont [class*=bul-round] li.highlight {color: #2c7fdf;}
.article-wrap .article-cont [class*=bul-round] li strong {color: #2c7fdf; background:none;}

/* bullet-box */
.article-wrap .article-cont [class*=bul-box] {border-radius:16px; background:#f3f5f9; padding:16px; margin:24px 24px;}
.article-wrap .article-cont [class*=bul-box] h4 {color: #757679; font-size: 14px; line-height: 1.57; font-weight:bold; margin-bottom:8px;}
.article-wrap .article-cont [class*=bul-box] p {padding:0; color: #757679; font-size: 14px; line-height: 1.57; font-weight:normal; letter-spacing:-0.19px;}
.article-wrap .article-cont .bul-list li {position:relative; margin-top: 0.4rem; color: #757679; font-size: 1.4rem; line-height: 2.4rem; padding-left:8px;}
.article-wrap .article-cont .bul-list li:before {display:block; position:absolute; content:''; top: 1rem; left:0; border-radius:50%; background: #8D8E90; width: 0.24rem; height: 0.24rem;}
.article-wrap .article-cont .bul-list li.highlight {color: #2c7fdf;}
.article-wrap .article-cont .bul-list li strong {color: #2c7fdf; background:none;}

/* bg-round */
.article-wrap .article-cont .bg-round {border-radius:16px; background:#f3f5f9; padding:16px; margin:24px 24px; font-size: 14px; line-height: 1.57;}
.article-wrap .article-cont .bg-round strong {font-weight:bold; background:none;}

/* 심의필 */
.article-wrap .review-num {padding:0 24px; margin:40px 0 20px; color:#757679; font-size:14px; line-height:1.57; font-weight:normal;}
.article-wrap .review-num span {display:block;}

/* 목록보기 버튼 */
.article-list-btn {text-align:center;}
.article-list-btn a {margin:40px auto 120px; display:inline-block; color:#2c7fdf; font-size:15px; font-weight:normal; background:#f3f9ff; padding:18px 32px 17px; border-radius:8px;}

/* 공유하기 */
.kakao-wrap {text-align:center; margin-top:40px;}
.kakao-wrap a {display:inline-block;}
.kakao-wrap .btn-kakao img {margin:0 auto; width:72px;}
.kakao-wrap p {font-size:14px; margin-top:5px;}

/* 플로팅 버튼 */
.article-floating-btn {position:fixed; bottom:0; padding:16px 24px; width:100%; z-index:1;}
.article-floating-btn a {display:block; background:#2c7fdf; color:#fff; border-radius:16px; padding:18px 24px 9px 82px; box-shadow:0 2px 16px 0 rgba(0,0,0,0.2);}
.article-floating-btn a:before {content:''; display: block; position: absolute; top: 36px; left: 49px; width:40px; height:40px; background:#fff; background-size:40px !important;}
.article-floating-btn a .s-txt {font-size:13px; font-weight:normal; margin-bottom:4px;}
.article-floating-btn a .l-txt {font-size:17px; font-weight:bold; margin-bottom:10px;}
.article-floating-btn a .rule-num {font-size:11px; font-weight:normal; letter-spacing:-0.5px; margin-left:-58px;}
.article-floating-btn a:after {content: ''; display: block; position: absolute; top: 44px; right: 47px; width: 16px; height: 20px; background: url('/m/resources/images/common/icon_util.png') no-repeat; background-position: -4px -46px; background-size: 140px;}

.btn-top {bottom:11rem !important;}


.article-wrap .article-header {position:relative; padding:30px 24px 48px!important; background: #2c7fdf;}
.article-wrap .article-header h1{color:#fff; font-size:28px; font-weight:bold; line-height:1.3;}
.article-wrap .article-blog {padding:32px 24px; font-size:17px; line-height:1.65; color:#757679;}
.article-wrap .article-blog h1 {padding:0; margin:0 0 24px; font-size:28px; line-height:1.3; font-weight:bold !important; color:#111; word-break:keep-all;}
.article-wrap .article-blog h2 {padding:0; margin:48px 0 24px; font-size:24px; line-height:1.5; font-weight:bold !important; color:#000; word-break:keep-all;}
.article-wrap .article-blog h3 {padding:0; margin:24px 0 12px; font-size:20px; line-height:1.5; font-weight:bold; color:#111; word-break:keep-all;}
.article-wrap .article-blog strong {font-weight:700;}
.article-wrap .article-blog h4 {padding:0; margin:24px 0 12px; font-size:18px; line-height:1.67; font-weight:bold; color:#111; word-break:keep-all;}
.article-wrap .article-blog p {padding:0;}
.article-wrap .article-blog table {margin:20px 0;}
.article-wrap .article-blog p.webtoon {padding:0; font-size:0;}
.article-wrap .article-blog sup {line-height:0;}
.article-wrap .article-blog table {max-width: 100%;width:100% !important;}
.article-wrap .article-blog .sup {padding:0 24px; margin:8px 0 0; font-size:15px; line-height:1.73; padding:0 !important;}
.article-wrap .article-blog strong {}
.article-wrap .article-blog img {width:auto; height:auto; padding:24px 0 10px; margin:auto;}
.article-wrap .article-blog p img {width:100%; max-width:390px; padding:24px 0 10px; margin:auto;}
.article-wrap .article-blog p.webtoon img {width:100%; max-width:390px; padding:0; margin:auto; font-size:0;}
.article-wrap .article-blog .full {padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important;}
.article-wrap .article-blog .tag {margin:12px 0 38px; font-size:15px; font-weight:normal; line-height:1.73; color:#2c7fdf;}
.article-wrap .article-blog .img-caption {font-size:14px; font-weight:normal; line-height:1.57;}
.article-wrap .article-blog .article-movie {position:absolute; top:44%; left:50%; margin-left:-127px; width:254px; height:34%; background:#000;}
.article-wrap .article-blog ul {margin:20px 0;}
.article-wrap .article-blog li {position:relative; margin-top: 0.4rem; color: #757679; font-size: 1.5rem; line-height: 2.4rem; padding-left:8px;}
.article-wrap .article-blog li:before {display:block; position:absolute; content:''; top: 1rem; left:0; border-radius:50%; background: #8D8E90; width: 0.24rem; height: 0.24rem;}
.article-wrap .article-blog a {text-decoration: underline; color:#2c7fdf;}

/* 플로팅 버튼 */
.article-wrap .blog-floating-btn {position:fixed; bottom:0; margin:0; padding:0 20px 20px 0; width:stretch; z-index:1;}
.article-wrap .blog-floating-btn a {display:block; background:#0068ff; color:#fff; border-radius:16px; padding:14px 24px 9px 22px; box-shadow:0 2px 16px 0 rgba(0,0,0,0.2); text-decoration: none;}
.article-wrap .blog-floating-btn a:before {display: none;}
.article-wrap .blog-floating-btn a .s-txt {font-size:13px; font-weight:normal;}
.article-wrap .blog-floating-btn a .l-txt {font-size:17px; font-weight:bold; margin-bottom:4px;}
.article-wrap .blog-floating-btn a:after {content: ''; display: block; position: absolute; top: 26px; right: 40px; width: 16px; height: 20px; background: url('/m/resources/images/common/icon_util.png') no-repeat; background-position: -4px -46px; background-size: 140px;}