@charset "utf-8";
@import url("https://use.typekit.net/uua6zqj.css");

/* reset css*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; font-family:var(--helveticaNeue); font-size:100%; background:transparent; letter-spacing:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
body {line-height:1 !important; word-break:keep-all}
ol, ul, li {list-style:none}
blockquote, q {quotes:none}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none}
table {border-collapse:collapse; border-spacing:0; table-layout:fixed}
caption, legend {overflow:hidden; text-indent:-9999px; height:1px; padding:0 !important}
html {font-family:sans-serif; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%}
a {background-color:transparent; color:inherit; text-decoration:none}
a:active, a:hover {outline:0; text-underline-position:under}
p {outline:none}
img {border:0}
button {background:inherit; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer}
select {font:inherit}
select:hover {cursor:pointer}
textarea {padding:0}
input, select {vertical-align:top; margin-top:0 !important}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance:none; margin:0}
input[type=number] {-moz-appearance:textfield}

:root {
	--calluna:'calluna', serif;
	--alternateGothic:'alternate-gothic-no-1-d', sans-serif;
	--ArchivoBlack:'archivo-black', sans-serif;
	--helveticaNeue:'helvetica-neue-lt-pro', sans-serif;
}

/* common */
.img-responsive {display:block; max-width:100%; height:auto}
.width100 {width:100%}
.mt0 {margin-top:0px !important}
.mt5 {margin-top:5px !important}
.mt10 {margin-top:10px !important}
.mt15 {margin-top:15px !important}
.mt20 {margin-top:20px !important}
.mt30 {margin-top:30px !important}
.mt40 {margin-top:40px !important}
.mt50 {margin-top:50px !important}
.mt60 {margin-top:60px !important}
.mt70 {margin-top:70px !important}
.mt90 {margin-top:90px !important}
.mt100 {margin-top:100px !important}
.mb50 {margin-bottom:50px !important}
.mb90 {margin-bottom:90px !important}
.show768, .show1024, .show1440 {display:none}
.flex {display:flex}
.align-items-start {align-items:flex-start}
.align-items-center {align-items:center}
.align-items-end {align-items:flex-end}
.justify-space-between {justify-content:space-between}
.justify-space-center {justify-content:center}
.justify-space-end {justify-content:flex-end}
.flex-shrink0 {flex-shrink:0}
.flex-wrap-wrap {flex-wrap:wrap}
.gap5 {gap:5px}
.gap10 {gap:10px}
.gap20 {gap:20px}
.gap30 {gap:30px}
.gap40 {gap:40px}
.gap50 {gap:50px}
.gap60 {gap:60px}
.gap70 {gap:70px}
.text-left {text-align:left !important}
.text-center {text-align:center !important}
.text-right {text-align:right !important}
.color-white {color:#fff !important}
.color-lightgray {color:#d9d9d9 !important}
.color-limegreen {color:#35d32f !important}
.color-deepred {color:#a32a1b !important}
.color-deepred i {font-family:var(--ArchivoBlack); }
.color-darkgray {color:#727171 !important}

.coverTit72 {font-family:var(--ArchivoBlack); font-size:72px; letter-spacing:-0.45px; color:#000}
.coverTxt18 {font-family:var(--ArchivoBlack); font-size:18px; font-weight:400; letter-spacing:-0.45px; margin:0; color:#000}
.coverTxt20 {font-family:var(--ArchivoBlack); font-size:20px; letter-spacing:-0.45px; margin:0; color:#000; flex-shrink:0}
.coverTxt26 {font-family:var(--ArchivoBlack); font-size:26px; font-weight:400; letter-spacing:-0.45px; margin:0; color:#000}
.coverTxt261  {font-size:20px !important; color:#555 !important;}
.coverTxt34 {font-family:var(--ArchivoBlack); font-size:34px; letter-spacing:-0.45px; margin:0; color:#000; line-height:120%}
.coverTxt36 {font-family:var(--ArchivoBlack); font-size:36px; letter-spacing:-0.45px; margin:0; color:#000}

.pTxt14 {font-family:var(--helveticaNeue); font-size:14px; font-weight:400; color:#000}
.pTxt20 {font-family:var(--helveticaNeue); font-size:20px; font-weight:400; color:#000; line-height:36px; margin-top:0; }
.pTxt24 {font-family:var(--helveticaNeue); font-size:24px; font-weight:700; color:#000}

.btnMore {display:inline-flex; align-items:center; border:1px solid #212121; border-radius:18px; padding:0 20px; height:36px; font-family:var(--helveticaNeue); font-size:16px; font-weight:400; transition:.3s; color:#000}
.btnMore > img {margin-left:5px}
.btnMore:hover {background:#212121; color:#fff}
.btnMore:hover img {filter: invert(100%) brightness(200%)}
.btnMore.white {border-color:#fff; color:#fff}
.btnMore.white > img {filter: invert(100%) brightness(200%)}
.btnMore.white:hover {background:#fff; color:#000 !important}
.btnMore.white:hover img {filter: invert(0) brightness(0)}

.nList > li {list-style:decimal; font-family:var(--helveticaNeue);}
.nList.font20 {margin-left:22px}
.nList.font20 > li {font-size:20px; font-weight:400; color:#000; line-height:36px}
.nList > li:last-child {margin-bottom:0}
.dList > li {font-family:var(--helveticaNeue); display:flex}
.dList.font14 > li {font-size:14px; font-weight:400; color:#000; line-height:23px}
.dList > li:before {content:'•'; margin-right:5px}
.dList > li:last-child {margin-bottom:0}

/* header */
.headerWrap {position:fixed; top:0; left:0; width:100%; z-index:9999; transition: background 0.5s ease-in-out;}
header {display:flex; align-items:center; justify-content:space-between; padding:30px 20px; box-sizing:border-box}
.headerWrap.fixed, .headerWrap.active {background:rgba(0,0,0,1)}
.editionInfo, .editionInfo-mobile {font-family:var(--helveticaNeue); font-size:18px; font-weight:700; color:#fff}
/* .editionInfo {padding-left:2.3% !important} */
.editionInfo-mobile {display:none}
.headerUtil {font-family:var(--ArchivoBlack); font-size:20px; letter-spacing:-0.45px; color:#fff; display:flex; align-items:center; gap:24px}
.menuList {overflow:hidden; max-height:0; transition:max-height 0.5s ease-in-out; width:100%; opacity:0; transition:max-height 0.5s ease-in-out, opacity 0.3s ease-in-out; overflow-y:auto}
.menuList.active {max-height:740px; opacity:1}
.menuList .inner {max-width:1460px; margin:0 auto; padding:90px 20px 100px 20px; box-sizing:border-box}
.menu-itemWrap {display:flex; flex-wrap:wrap; gap:70px; border-bottom:1px solid #fff; padding-bottom:75px}
.menu-item {flex:0 0 30%}
.menu-cover {font-family:var(--ArchivoBlack); font-size:16px; letter-spacing:-0.45px; color:#02d049; margin-bottom:10px}
.menu-link {font-family:var(--helveticaNeue); font-size:20px; font-weight:400; color:#fff}
.menu-link span{font-size:14px;}
.menu-util {text-align:center; margin-top:50px}
.menu-mobile {width:50px; height:50px; position:relative; background:none; border:none; cursor:pointer; display:none; justify-content:center; align-items:center}
.menu-mobile span, .menu-mobile span::before, .menu-mobile span::after {display:block; width:30px; height:4px; background-color:#fff; border-radius:4px; transition:all 0.3s ease-in-out; position:absolute}
.menu-mobile span::before {content:""; top:-10px}
.menu-mobile span::after {content:""; top:10px}
.menu-mobile.active span {background-color:transparent}
.menu-mobile.active span::before {transform:translateY(10px) rotate(45deg)}
.menu-mobile.active span::after {transform:translateY(-10px) rotate(-45deg)}
.headerWrap.active header > h1 > a > img {filter:none}
.headerWrap.active .editionInfo, .headerWrap.active .editionInfo-mobile, .headerWrap.active .headerUtil {color:#fff !important}
.headerWrap.active .menu-mobile span::before, .headerWrap.active .menu-mobile span::after {background-color:#fff}
.sub .headerWrap.active.fixed .menu-mobile span {background:#000}

/* footer */
footer {display:flex; align-items:center; justify-content:space-between; background:#000; border-top:1px solid #666; padding:30px 20px 70px 20px; box-sizing:border-box}
.foot-left > a {display:block; font-family:var(--helveticaNeue); font-size:24px; font-weight:700; color:#d9d9d9; margin-bottom:20px}
.foot-center {display:flex; align-items:center; gap:40px}
.foot-center > a:nth-child(1) > img {height:35px}
.foot-center > a:nth-child(2) > img {height:38px}
.foot-center > a:nth-child(3) > img {width:35px}
.foot-center > a:nth-child(4) > img {width:35px}
.copy {font-family:var(--helveticaNeue); font-size:12px; font-weight:300; color:#d9d9d9}

/* 추가 01.13 */
.aside {position:fixed;display: flex;flex-direction: column;text-align: center;right: 30px;top: 50%;transform: translateY( -50% );gap: 5px; z-index:3;}


@media screen and (max-width:1700px) {
	.menu-itemWrap {gap:50px}	
	.hide1700 {display:none}
}
@media screen and (max-width:1440px) {
	.show1440 {display:block}
	.hide1440 {display:none}

	.coverTit72 {font-size:45px}
	.coverTxt34 {font-size:30px}
	.menu-pc, .editionInfo, .Subscribe {display:none}
	.menu-mobile {display:flex}
	.editionInfo-mobile {display:block}	
	.headerUtil {gap:10px}		
	.pads_40 {padding:0 40px;}/* 추가 01.13 */
	.aside {position: static;flex-direction: row;width: 100%;transform: translateX(0);padding: 50px;text-align: center;display: flex;justify-content: center;align-items: center;gap: 20px;flex-wrap: wrap;}
}
@media screen and (max-width:1040px) {
	header {padding:30px 20px}
    .menu-itemWrap {gap:30px}
	.menu-mobile {width:40px; height:40px}
}
@media screen and (max-width:1024px) {
	.show1024 {display:block}
	.hide1024 {display:none}	
}
@media screen and (max-width:768px) {
	.show768 {display:block}
	.hide768 {display:none}

	.coverTit72 {font-size:40px}
	.coverTxt34 {font-size:26px}

	.menuList.active {max-height:100vh}
	.menu-itemWrap {gap:20px; padding-bottom:30px}
	.menuList .inner {padding:30px 20px 50px 20px; overflow-y:auto; height:85vh}
	.menu-item {flex: 0 0 100%}
	.menu-util {margin-top:30px}	

	footer {flex-wrap:wrap; padding:40px 40px 70px 40px}
	.foot-center {order:1; width:100%}
	.foot-center {gap:30px}
	.foot-center > a:nth-child(1) > img {height:30px}
	.foot-center > a:nth-child(2) > img {height:33px}
	.foot-center > a:nth-child(3) > img {width:30px}
	.foot-center > a:nth-child(4) > img {width:30px}
	.foot-left {order:2; width:100%; margin:40px 0}
	.foot-left > a {font-size:20px; margin-bottom:10px}
	.foot-left > a:last-child {margin-bottom:0}
	.foot-right {order:3; width:100%}
	.copy {margin:20px 0; line-height:130%}	
	.aside {width: 350px;margin: auto;padding: 0px 0 50px;gap: 10px;transform: scale(.75);}
}
@media screen and (max-width:550px) {
	.menu-link {font-size:16px; line-height:130%}
	
	.coverTit72 {font-size:30px}
	.coverTxt20 {font-size:18px}
	.coverTxt26 {font-size:18px}
	.coverTxt34 {font-size:18px; line-height:130%}
	.coverTxt36 {font-size:26px}
	.coverBadge {border-radius:18px; padding:8px 25px; font-size:16px}
	.pTxt20 {font-size:16px; line-height:140%}
	.nList.font20 {margin-left:18px}
	.nList.font20 > li {font-size:16px; line-height:150%}
	
    .foot-left > a {font-size:18px}
}