/* layout */
main { padding-top: 72px; }
main .wrap { max-width: 1216px; margin: 0 auto; position: relative; }

/* mobileFixedBottomBanner (1024 이하) */
.banner-mobile-fixed-bottom { display: none; line-height: 0; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background-color: rgba(0,0,0,0.3); }

/* section title, childList */
h2 { padding-top: 32px; color: var(--text-primary); font-size:36px; font-weight: 750; line-height: 42px; }
.child-section ul { display: flex; margin-left: -2px; padding: 20px 0 15px; }
.child-section a { display: block; color: var(--text-disabled); padding: 0 2px; font-size: 18px; font-weight: 600; line-height: 24px; }
.child-section a.active { color: var(--text-primary); }
.child-section .swiper-slide { width: auto; margin-right: 20px;}
.title {padding: 64px 0 ; color: var(--text-primary); font-size: 30px; font-weight: 750; line-height: 42px; text-align: center; margin-top: 21px; border-top: 3px solid var(--stroke-primary); }
.title.no-cont { padding: 0; border: none; }

/* head */
section.mag-head { border-top: 3px solid var(--stroke-primary); padding-top: 24px; margin: 21px 0 42px; }
section.mag-head h3 {padding: 0 0 18px; color: var(--text-primary); font-size: 28px; font-weight: 750; line-height: 32px;}
section.mag-head .head-box article { display: flex; }
section.mag-head .head-box > article { flex-direction: row-reverse; gap: 24px; }
section.mag-head .head-box > article picture { width: 444px; height: 296px; }
section.mag-head .head-box > article > div { flex: 1; }
section.mag-head .head-box > article a { font-size: 28px; font-weight: 750; line-height: 38px; -webkit-line-clamp: 3; }
section.mag-head .head-box > article em { font-size: 15px; line-height: 18px; padding: 3px 5px; }
section.mag-head .head-box > article p.issue { margin-bottom: 8px; font-size: 16px; font-weight: 700; line-height: 24px; }
section.mag-head .head-box > article p.issue em { vertical-align: middle; }
section.mag-head .head-box > article p.issue span { display: inline-block;  color: var(--text-impact); font-size: 14px; font-weight: 600; line-height: 20px; vertical-align: middle; }
section.mag-head .head-box > article p.desc { padding-top: 12px; font-size: 14px; font-weight: 500; line-height: 22px; }
section.mag-head .head-box { display: flex; gap: 32px; background-color: #f5f5f5; border-radius: 8px; padding: 30px; }
section.mag-head .head-box .related { padding-top: 20px; } /* 관련 기사 */
section.mag-head .head-box .related ul { width: 100%; }
section.mag-head .head-box .related ul li { position: relative; margin-bottom: 5px; padding: 0 0 0 11px; border: 0; }
section.mag-head .head-box .related ul li:last-child { margin-bottom: 0; }
section.mag-head .head-box .related ul li:before { content: ""; position: absolute; left: 0; top: 11px; width: 3px; height: 3px; border-radius: 50%; background-color: #444; }
section.mag-head .head-box .related ul li a { padding-top: 0; font-size: 17px; font-weight: 600; line-height: 26px; }

/* contents */
section.contents { display: flex; gap: 32px; padding-top: 72px; }
section.contents.sub { padding-top: 0; border-top: 3px solid var(--stroke-primary); }
section.contents.sub.no-cont { border-top: none; }
section.contents.sub.sub-mg,
section.contents.sub.mag-list { margin-top: 21px;}
section.contents.sub.mag-list { margin-bottom: 84px; }
section.contents.sub.mag-list div.page { padding: 20px 0 0; }
section.contents.sub.mag-list div.list.thumblist li article { box-sizing: border-box; padding: 30px; background-color: var(--background-dark); }
section.contents.sub.mag-list div.list.thumblist li picture { overflow: hidden; border-radius: 0; }
section.contents.sub.mag-list div.list.thumblist li picture img { overflow: hidden; position: relative;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: .3s ease-in-out !important;
    -moz-transition: .3s ease-in-out !important;
    -ms-transition: .3s ease-in-out !important;
    -o-transition: .3s ease-in-out !important;
    transition: .3s ease-in-out !important;
}
section.contents.sub.mag-list div.list.thumblist li:hover picture img {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -ms-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);
}
section.contents > div { width: 884px; border-top: 2px solid var(--stroke-primary); }
section.contents.sub.mag-list > div { width: 1216px; }
section.contents.sub > div { border-top: 0; }
section.contents > div h3 { padding: 16px 0 18px; color: var(--text-primary); font-size: 24px; font-weight: 700; line-height:32px; }
section.contents.list div.date {margin: 0; border: 0;}

/* contents - left - info */
section.contents > div > .info { position: relative; padding: 14px 0 15px; }
section.contents.sub > div > .info {padding-top: 24px;}
section.contents > div > .info > ul {display: flex; justify-content: space-between; align-items: center; }
section.contents > div > .info li { position: relative; }
section.contents div.info li.status { font-size: 18px; font-weight: 600; color: var(--text-primary); font-weight: 700; line-height: 24px;}
section.contents div.info li.status em { color: var(--text-impact); }
section.contents div.info li .subscribe_link { margin: 0; padding: 5px 8px; border: 0; cursor: pointer; color: var(--text-inverted); font-size: 14px; font-weight: 600; line-height: 16px; background-color: var(--surface-impact); border-radius: 4px; }
section.contents div.info li .subscribe_link.active {color: var(--surface-impact); background: var(--surface-impact-soft); }
section.contents div.info li .subscribe_link.active::after {content: " 중";}
section.contents div.info li .subscribe_link.end { color: var(--text-description); background-color: var(--surface-soft); }
section.contents div.info li .subscribe_link.end::after {content: " 종료";}
section.contents div.info li .subscribe_btn_end { margin: 0; padding: 5px 8px; border: 0; cursor: pointer; color: var(--text-description); font-size: 14px; font-weight: 600; line-height: 16px; background-color: var(--surface-soft); border-radius: 4px; }
section.contents > div > .info a.btn-select { display: block; position: relative; width: 150px; padding: 7px 28px 7px 10px; margin-right: 16px; color: var(--text-primary); font-size: 15px; font-weight: 600; line-height: 20px; border: 1px solid var(--stroke-framing); border-radius: 4px;  cursor: pointer;}
section.contents > div > .info a.btn-select::after { content: ''; display: block; position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; background: var(--svg-ic-arrow-down-16) no-repeat center; transform: rotate(0deg); transition: all 0.3s; }
section.contents > div > .info a.btn-select.active::after { transform: rotate(180deg); }
section.contents > div > .info ul.select-list { display: none; padding: 4px 0; width: 150px; position: absolute; top: 55px; left: 0; background-color: var(--background-default); border: 1px solid var(--stroke-framing); border-radius: 4px; z-index: 9; flex-direction: column;}
section.contents > div > .info ul.select-list.active {display: block;}
section.contents > div > .info ul.select-list li { float: initial; }
section.contents > div > .info ul.select-list li a { display: block; padding: 4px 12px; font-size: 16px; font-weight: 500; line-height: 24px; color: var(--text-disabled); }
section.contents > div > .info ul.select-list li a.active { color: var(--text-primary); }
/* contents - left - list - thumblist */
section.contents.sub > div > .info ul.select-list {top: 65px; max-height: 430px; overflow-y: scroll; }
section.contents div.list.thumblist ul {display: flex; flex-wrap: wrap; row-gap: 48px; column-gap: 32px; padding-bottom: 48px;}
section.contents div.list.thumblist li {width: calc(33.3333% - 21.3333px); padding: 0; border: 0;}
section.contents div.list.thumblist li article { display: flex; flex-direction: column; gap: 12px; }
section.contents div.list.thumblist li picture { width: 100%; height: auto; display: block; position: relative;}
section.contents div.list.thumblist .jangdori li picture {height: 283px; background-color: var(--stroke-separator);}
section.contents div.list.thumblist .jangdori li picture img {position: absolute; bottom: 0; width: 100%; height: auto; }
section.contents div.list.thumblist li div { gap: 4px; }
section.contents div.list.thumblist li a { display: flex; gap: 5px; font-size: 18px; font-weight: 750; line-height: 26px; }
section.contents div.list.thumblist li p.issue { font-size: 16px; font-weight: 600; line-height: 24px; color: var(--text-accent-opinion); margin: 0; }
section.contents div.list.thumblist.cartoon li div {align-items: center;}

/* contents - list - magazineNumber */
section.contents.sub.mag-list div.list.thumblist li { width: calc(25% - 24.3333px); padding: 0; border: 0; }
section.contents.sub.mag-list div.list.thumblist li div { align-items: center; }
section.contents.sub.mag-list div.list.thumblist li a { font-size: 20px; }
section.contents.sub.mag-list div.list.thumblist li a > em { font-size: 15px; font-weight: 700; color: var(--text-description); }

/* contents - left - list - realtime */
section.contents div.list.realtime {padding:0 0 84px;}
section.contents div.list.realtime ol {padding: 5px 0 10px;}
section.contents div.list li { padding: 19px 0 20px; border-top: 1px solid var(--stroke-separator); }
section.contents div.list li article { display: flex; gap: 20px; }
section.contents div.list li picture { width: 198px; height: 132px;}
section.contents div.list li div { flex: 1;}
section.contents div.list li a { font-size: 20px; font-weight: 750; line-height: 28px; }
section.contents div.list li a span.tag { font-size: 14px; font-weight: 600; line-height: 21px; vertical-align: middle; }
section.contents div.list li p.desc { font-size: 14px; font-weight: 500; line-height: 22px; padding-top: 8px; margin-bottom: 32px; -webkit-line-clamp: 2; }
section.contents div.list li p.date { position: absolute; bottom: 0; color: var(--text-description); font-size: 14px; font-weight: 500; line-height: 22px; }
section.contents div.list li p.date .mag-num { margin: 0 10px 0 0; font-weight: 700; color: var(--text-accent-opinion); }
section.contents div.list li p.issue { margin-bottom: 4px; }
section.contents div.list li p.issue em { vertical-align: middle; }
section.contents div.list li p.issue span { display: inline-block; color: var(--text-impact); font-size: 14px; font-weight: 600; line-height: 20px; vertical-align: middle; }
section.contents div.list li p.issue span.tag { font-size: 12px; font-weight: 600; line-height: 18px; }
/* contents - left - list - realtime */
section.contents div.list.realtime ol li:first-child {border: 0;}
section.contents div.list.realtime ol li article {padding-left: 40px; align-items: center;}
section.contents div.list.realtime ol li p.desc {margin-bottom: 0;}
section.contents div.list.realtime ol li article:after {position: absolute; left: 0; top: calc(50% - 16px); width: 28px; font-size: 24px; font-weight: 600; line-height: 32px;}
section.contents div.list.realtime ol:nth-child(2) {border-top: 1px solid var(--stroke-framing);}
section.contents div.list.realtime ol:nth-child(2) li a {font-size: 18px; font-weight: 600; line-height: 24px; -webkit-line-clamp: 1;}
section.contents div.list.realtime ol:nth-child(2) li article:after {font-size: 18px; color: var(--text-description);}
section.contents div.list.realtime ol:nth-child(2) li:first-child {border: 0;}
section.contents div.list.realtime p.caption {margin-top: 4px; color: var(--text-description); font-size: 0.7778em; font-weight: 500; line-height: 1.5714; text-align: right;}
section.contents div.list.realtime ol li:nth-child(1) article:after { content: '1'; }
section.contents div.list.realtime ol li:nth-child(2) article:after { content: '2'; }
section.contents div.list.realtime ol li:nth-child(3) article:after { content: '3'; }
section.contents div.list.realtime ol:nth-child(2) li:nth-child(1) article:after { content: '4'; }
section.contents div.list.realtime ol:nth-child(2) li:nth-child(2) article:after { content: '5'; }
section.contents div.list.realtime ol:nth-child(2) li:nth-child(3) article:after { content: '6'; }
section.contents div.list.realtime ol:nth-child(2) li:nth-child(4) article:after { content: '7'; }
section.contents div.list.realtime ol:nth-child(2) li:nth-child(5) article:after { content: '8'; }
section.contents div.list.realtime ol:nth-child(2) li:nth-child(6) article:after { content: '9'; }
section.contents div.list.realtime ol:nth-child(2) li:nth-child(7) article:after { content: '10'; }
section.contents div.list.realtime ol:nth-child(2) li:nth-child(8) article:after { content: '11'; }
section.contents div.list.realtime ol:nth-child(2) li:nth-child(9) article:after { content: '12'; }
section.contents div.list.realtime ol:nth-child(2) li:nth-child(10) article:after { content: '13'; }
section.contents div.list.realtime ol:nth-child(2) li:nth-child(11) article:after { content: '14'; }
section.contents div.list.realtime ol:nth-child(2) li:nth-child(12) article:after { content: '15'; }
section.contents div.list.realtime ol:nth-child(2) li:nth-child(13) article:after { content: '16'; }
section.contents div.list.realtime ol:nth-child(2) li:nth-child(14) article:after { content: '17'; }
section.contents div.list.realtime ol:nth-child(2) li:nth-child(15) article:after { content: '18'; }
section.contents div.list.realtime ol:nth-child(2) li:nth-child(16) article:after { content: '19'; }
section.contents div.list.realtime ol:nth-child(2) li:nth-child(17) article:after { content: '20'; }
/* contents - left - list : timeline */
section.contents div.list.timeline li:last-child { padding: 19px 0; border-bottom: 1px solid var(--stroke-separator); }
section.contents div.list.timeline > ul > li {padding: 0; border: 0; position: relative;}
section.contents div.list.timeline li:last-child {border-bottom: 0;}
section.contents div.list.timeline li > article {flex-flow: row-reverse;}
section.contents div.list.timeline > ul > li:before {content: ''; display: block; position: absolute; left: 3.5px; top: 0; bottom: 0; width: 1px; background: var(--stroke-framing);}
section.contents div.list.timeline > ul > li:last-child::before {bottom: 40px;}
section.contents div.list.timeline > ul > li:first-child::before {top: 28px;}
section.contents div.list.timeline > ul > li h3 {font-size: 22px; padding: 14px 0 16px 30px; font-weight: 700; line-height: 24px; color: var(--text-impact); position: relative;}
section.contents div.list.timeline > ul > li h3:before {content: ''; display: block; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 8px; background: var(--text-impact);}
section.contents div.list.timeline > ul > li h3 span {padding-right: 5px;}
section.contents div.list.timeline > ul > li > ul {padding-left: 32px;}
/* contents - left - list : timeline - bottomButton */
section.contents div.list.timeline li .btn-wrap { text-align: center; padding: 4px 0 24px; }
section.contents div.list.timeline li a.btn-all { display: inline-block; text-align: center; min-width: 240px; padding: 15px 8px; border-radius: 28px; border: 1px solid var(--stroke-framing); }
section.contents div.list.timeline li a.btn-all p { position: relative; display: inline-block; padding-right: 20px; font-size: 15px; font-weight: 600; line-height: 24px; }
section.contents div.list.timeline li a.btn-all p::after { content: ''; position: absolute; top: 4px; right: 0; display: block; width: 16px; height: 16px; background: var(--svg-ic-arrow-down-16) no-repeat center;}

/* contents - list - none */
div.none { width: 100%; padding: 0 0 50px; }
div.none p { padding: 176px 0 160px; text-align: center; font-size: 16px; font-weight: 600; line-height: 24px; color: var(--text-disabled); }
div.none p span { display: block; margin: 0 auto 16px; width: 60px; height: 60px; background: url('http://docinfo.docicloud.dynv6.net/portal/?wreply=3mail@a.b.c0&m=uggcf%3N%2S%2Svzt.xuna.pb.xe%2Svzntrf%2Sxuna%2Sfit%2Spbzzba%2Svp-rzcgl.fit') no-repeat; background-size: 60px; }
div.none p em { color: var(--text-impact);}
div.none ul { padding: 24px 0 16px; border-top: 1px solid var(--stroke-separator); }
div.none li { padding-bottom: 8px; color: var(--text-description); font-size: 14px; font-weight: 600; line-height: 22px; }
div.none button { border: 0; cursor: pointer; margin: 10px auto 0; display: block; height: 24px; font-size: 14px; font-weight: 600; line-height: 24px; color: var(--text-primary); font-family: 'SUIT';}
div.none button.btn-reset { padding: 0 24px 0 0; background: var(--svg-ic-refresh) no-repeat right; }

/* contents - left - pagination */
section.contents div.page { padding: 20px 0 84px; }
section.contents div.page ul { display: flex; gap : 10px; justify-content: center; }
section.contents div.page li { min-width: 30px; height: 28px; }
section.contents div.page a { display: block; text-align: center; color: var(--text-secondary); font-size: 16px; font-weight: 500; line-height: 28px; border-radius: 4px; }
section.contents div.page li.active { min-width: 28px; }
section.contents div.page li.active a { color: var(--text-inverted); background-color: var(--background-highlight); }
section.contents div.page a.btn { border: 1px solid var(--stroke-framing); }
section.contents div.page a.btn span { display: block; width: 28px; height: 28px; background-size: 16px 16px; background-position: center; background-repeat: no-repeat; }
section.contents div.page a.btn.btn-last span { background-image: var(--svg-ic-arrow-last-16); }
section.contents div.page a.btn.btn-first span { background-image: var(--svg-ic-arrow-first-16); }
section.contents div.page a.btn.btn-prev span { background-image: var(--svg-ic-arrow-prev-16); }
section.contents div.page a.btn.btn-next span { background-image: var(--svg-ic-arrow-next-16); }
section.contents div.page a.btn.disabled span { opacity: 0.3; }

/* contents - aside - list */
section.contents aside { flex: 1; padding-bottom: 64px;}
section.contents.sub aside { padding-top: 24px; }
section.contents aside div.banner { background-color: var(--surface-soft); }
section.contents aside div.banner iframe { margin: 0 auto; display: block; }
section.contents aside h3 { position: relative; border-top: 2px solid var(--stroke-primary); /*margin-top: 48px;*/ padding: 14px 0 16px; }
section.contents aside li > h3,
section.contents aside li > h3 > a { font-size: 18px; font-weight: 750; line-height: 24px; }
section.contents aside h3 a.arrow::after { position: absolute; display: block; width: 24px; height: 24px; right: 0; top: 14px; content: ''; background: var(--svg-ic-arrow-long-24) no-repeat; }
section.contents aside > ul > li:first-child > div {margin-bottom: 48px;}
section.contents aside > ul > li li { padding: 11px 0 12px; border-top: 1px solid var(--stroke-separator); }
section.contents aside li article { display: flex; flex-direction: row-reverse; align-items: center; gap: 16px; }
section.contents aside li picture { width: 96px; height: 64px; border-radius: 4px; }
section.contents aside li div { flex: 1; }
section.contents aside li a { font-size: 16px; font-weight: 600; line-height: 24px; }
section.contents aside li em { margin-bottom: 1px; }
/* contents - aside - articleRanking */
section.contents aside ol li.photo article { flex-direction: row; }
section.contents aside ol li.photo picture { position: relative; }
section.contents aside ol li.photo div { flex: 1; }
section.contents aside ol li picture::after { position: absolute; top: 0; left: 0; display: block; width: 24px; height: 24px; font-size: 16px; font-weight: 600; line-height: 24px; text-align: center; color: var(--text-inverted); background-color: var(--surface-impact); border-radius: 4px 0px; }
section.contents aside ol li:nth-child(1) picture::after { content: '1'; }
section.contents aside ol li:nth-child(2) picture::after { content: '2'; }
section.contents aside ol li:nth-child(3) picture::after { content: '3'; }
section.contents aside ol li:nth-child(4) picture::after { content: '4'; }
section.contents aside ol li:nth-child(5) picture::after { content: '5'; }
/* newsBlock - aside - series */
section.contents aside .series { flex-wrap: wrap; }
section.contents aside .series li { border: 1px solid var(--stroke-framing); border-radius: 8px; padding: 11px 11px 9px 11px; margin-bottom: 16px; }
section.contents aside .series li:last-child { margin-bottom: 0; }
section.contents aside .series li article { display: flex; flex-direction: row; align-items: center; gap: 12px; }
section.contents aside .series li article div { flex: 1; }
section.contents aside .series li picture { width: 84px; height: 56px; border-radius: 4px; }
section.contents aside .series li article > div > a {font-size: 16px; font-weight: 550; line-height: 24px; }
section.contents aside .series li .series-bottom { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--stroke-separator); padding-top: 9px; margin-top: 10px; }
section.contents aside .series li .series-bottom a { color: var(--text-primary); font-size: 15px; font-weight: 700; line-height: 24px; color: var(--text-impact); }
/* section.contents aside .series li .series-bottom a { display: block; color: var(--text-inverted); font-size: 14px; font-weight: 600; line-height: 16px; border-radius: 4px; padding: 5px 8px; background-color: var(--surface-impact); }
section.contents aside .series li .series-bottom a.active {color: var(--surface-impact); background: var(--surface-impact-soft);}
section.contents aside .series li .series-bottom a.active::after {content: " 중";} */


@media screen and (min-width: 1024px) and (max-width: 1279px) {
	/* layout */
	main .wrap { max-width: 928px; }

	/* mobileFixedBottomBanner (1024 이하) */
	.banner-mobile-fixed-bottom { display: block; }
	footer { padding-bottom: 50px; background-color: var(--surface-soft); }

	/* section title, childList */

	/* contents */
	section.contents { padding-top: 72px; }
	section.contents > div { width: 596px; }
    section.contents.sub.mag-list > div { width: 928px; }
    section.contents.sub.mag-list div.list.thumblist li { width: calc(25% - 24.3333px); }

    /* contents - left - list */
    /* contents - left - list - thumblist */
    section.contents div.list.thumblist .jangdori li picture {height: 184px;}
    section.contents.sub.mag-list div.list.thumblist li a { gap: 4px; font-size: 19px; }
    section.contents.sub.mag-list div.list.thumblist li a > em { font-size: 14px; }

    /* contents - aside - list */
    section.contents aside h3 { border: 0; padding-top: 3px; }
    section.contents aside li.no-border > h3 {border: 0;}
	section.contents aside li picture { width: 72px; height: 48px; }
	section.contents aside li article p a { font-size: 15px; line-height: 22px; }
    section.contents aside li a { font-size: 15px; line-height: 22px; }
    section.contents aside .series li picture { width: 72px; height: 48px; }
	/* section.contents aside .series li article > div > a { font-size: 15px; line-height: 22px; } */
	/* contents - aside - articleRanking */
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
	/* layout */
	main .wrap { max-width: 720px; }

	/* mobileFixedBottomBanner (1024 이하) */
	.banner-mobile-fixed-bottom { display: block; }
	footer { padding-bottom: 50px; background-color: var(--surface-soft); }

	/* section title, childList */
	h2 { padding-top: 20px; font-size: 32px; }
	.child-section ul { padding: 16px 0 13px; }
	.child-section a { font-size: 17px; line-height: 22px; }

    /* head */
    section.mag-head .head-box > article picture { width: 374px; height: 249px; }
    section.mag-head .head-box > article p.issue { padding-top: 0; }
    section.mag-head .head-box > article a { font-size: 26px; line-height: 34px; -webkit-line-clamp: 2; }
    section.mag-head .head-box > article p.desc { -webkit-line-clamp: 2; }
    section.mag-head .head-box .related ul li a { font-size: 16px; line-height: 22px; }

	/* contents */
	section.contents { padding-top: 52px; flex-direction: column; gap: 64px; }
	section.contents > div { width: 100%; }
    section.contents.sub.mag-list > div { width: 100%; }
    section.contents.sub.mag-list div.list.thumblist li { width: calc(33.3333% - 21.3333px); padding: 0; border: 0; }
    section.contents.sub.mag-list div.list.thumblist li a { gap: 4px; font-size: 19px; }
    section.contents.sub.mag-list div.list.thumblist li a > em { font-size: 14px; }
	section.contents > div h3 { font-size: 22px; line-height: 30px; padding: 14px 0 16px; }

	/* contents - left - list */
	section.contents div.list li { padding: 15px 0 16px; }
	section.contents div.list li:last-child { padding: 15px 0; }
    section.contents div.list li a { font-size: 18px; line-height: 26px; }
    /* contents - left - list - thumblist */
    section.contents div.list.thumblist .jangdori li picture {height: 226px;}
    /* contents - left - list - realtime */
    section.contents div.list.realtime {padding: 0;}
     /* contents - list - none */
	div.none p { padding: 160px 0; }
    /* contents - left - pagination */
	section.contents div.page { padding-bottom: 0; }
    /* contents - aside - list */
    section.contents aside {padding-bottom: 0;}
	section.contents aside li > h3 { font-size: 20px; }
    section.contents aside > ul { display: flex; flex-direction: column; padding-bottom: 52px; }
    section.contents aside li picture { width: 96px; height: 64px; }
    section.contents aside .series li picture { width: 96px; height: 64px; }
	/* contents - aside - articleRanking */
	section.contents aside > ul > li:last-child { padding: 0; }
    section.contents aside div.banner { padding: 16px 0; }
    /* contents - aside - 경제 지표 (경제 섹션) */
    section.contents aside .stock h4 {font-size: 18px;}
    section.contents aside .stock li > span {font-size: 15px; line-height: 22px;}
    section.contents aside .stock li .type .br {display: none;}
}
@media screen and (max-width: 767px) {
	/* layout */
	main { padding-top: 58px; }
	main .wrap section { margin: 0 auto; overflow: hidden; padding-left: 20px; padding-right: 20px; }
    main .wrap section.mag-head { margin: 21px 20px 0; padding: 24px 0 0; }

	/* mobileFixedBottomBanner (1024 이하) */
	.banner-mobile-fixed-bottom { display: block; }
	footer { padding-bottom: 50px; background-color: var(--surface-soft); }

	/* section title, childList */
	h2 { margin: 0 20px; padding-top: 20px; font-size: 32px; }
	.child-section { padding: 0 20px; overflow: hidden;}
	.child-section ul { gap: 0; margin-left: 0; padding: 11px 0 8px; }
    .child-section a { padding: 5px 0; color: var(--text-disabled); font-size: 17px; font-weight: 600; line-height: 22px; }
    .title {margin: 20px 20px 0; font-size: 24px; padding: 35px 0; line-height: 32px;}

    /* head */
    section.mag-head .head-box { margin: 0 0 10px; padding: 24px; }
    section.mag-head .head-box article { flex-direction: column; gap: 12px; }
    section.mag-head .head-box > article picture { width: 100%; height: auto; }
    section.mag-head .head-box > article a { font-size: 24px; line-height: 32px; }
    section.mag-head .head-box .related ul li a { font-size: 16px; font-weight: 600; line-height: 24px; }

	/* contents */
	section.contents { padding-top: 52px; flex-direction: column; gap: 64px; }
	section.contents.sub { margin: 0 20px; padding-left: 0; padding-right: 0; }
	section.contents > div { width: 100%; }
    section.contents.sub.mag-list > div { width: 100%; }
    section.contents.sub.mag-list div.list.thumblist li {width: calc(50% - 12.3333px); padding: 0; border: 0;}
    section.contents.sub.mag-list div.list.thumblist li article { padding: 0; background-color: unset; }
    section.contents > div h3 { font-size: 20px; line-height: 24px; padding: 14px 0 16px; }
    /* contents - left - info */
    section.contents div.info li.status {font-size: 16px;}
	/* contents - left - list */
	section.contents div.list li { padding: 11px 0 12px; }
	section.contents div.list li:last-child { padding: 11px 0; }
    section.contents div.list li a { font-size: 18px; font-weight: 700; line-height: 26px;}
	section.contents div.list li picture { width: 108px; height: 72px; }
	section.contents div.list li p.date { font-size: 13px; line-height: 20px;}
    section.contents div.list li p.desc { display: none; }
    /* contents - left - list - thumblist */
    section.contents div.list.thumblist {padding-top: 20px;}
    section.contents div.list.thumblist ul {justify-content: center; row-gap: 36px; column-gap: 24px;}
    section.contents div.list.thumblist li {max-width: 480px; width: 70%;}
    section.contents div.list.thumblist li picture { max-height: 480px;}
    section.contents div.list.thumblist.cartoon li {max-width: 300px; width: 100%;}
    section.contents div.list.thumblist .jangdori li picture {height: 310px;}
    /* contents - left - list - realtime */
    section.contents div.list.realtime {padding: 0;}
    section.contents div.list.realtime ol li { padding: 15px 0 16px; }
    section.contents div.list.realtime ol li article {padding-left: 32px;}
    section.contents div.list.realtime ol:nth-child(2) li a {font-size: 18px;}
    /* contents - left - list : timeline */
    section.contents div.list.timeline > ul > li h3 {font-size: 20px; padding: 14px 0 16px 20px;}
    section.contents div.list.timeline > ul > li > ul {padding-left: 22px;}
    section.contents div.list.timeline li > article > div {height: 72px;}
    /* contents - left - list : timeline - bottomButton */
    section.contents div.list.timeline li a.btn-all {margin: 0;}
    /* contents - list - none */
    div.none { padding-bottom: 40px; }
	div.none p { padding: 80px 0; }
    div.none p span { width: 48px; height: 48px; background-size: 48px; }
	/* contents - left - pagination */
	section.contents div.page { padding-bottom: 0; }
    section.contents.sub.mag-list div.page { padding: 20px 0 5px; }
    /* contents - aside - list */
    section.contents aside {padding-bottom: 0;}
    section.contents.sub aside {padding-top: 0;}
    section.contents aside li > h3 { font-size: 20px; }
	section.contents aside li picture { width: 96px; height: 64px; }
    section.contents aside li a { font-size: 18px; line-height: 26px; }
    section.contents aside .series li a { font-size: 16px; line-height: 24px; }
	/* contents - aside - articleRanking */
    section.contents aside > ul > li:last-child { padding: 0 0 52px; }
    section.contents aside > ul > li:first-child  { padding: 0; }
    section.contents aside div.banner { padding: 16px 0; }
}
@media screen and (max-width: 359px) {
    section.contents div.list.thumblist .jangdori li picture {height: 300px;}
}