@charset "utf-8";
@import url('https://use.typekit.net/ezy1lgx.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Noto+Sans:wght@100;300;400;500;700;900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.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:'Noto Sans KR', sans-serif; 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}

.font-helvetica {font-family:'helvetica-lt-pro', sans-serif}
.font-ibm {font-family:'ibm-plex-sans-kr', sans-serif}
.font-montserrat {font-family:'Montserrat', sans-serif}
.font-noto-kr {font-family:'Noto Sans KR', sans-serif}
.font-noto {font-family:'Noto Sans', sans-serif}


.wf-loading body {visibility:hidden}
.wf-active body, .wf-inactive body {visibility:visible}


/* 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}
.show500, .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}

.fcolor-w {color:#fff !important}
.fcolor-sb {color:#1b1b1b !important}
.fcolor-inside1 {color:#003f87 !important}
.fcolor-inside2 {color:#ed6d31 !important}
.fcolor-inside3 {color:#005261 !important}

/* header */
.header {width:100%; position:fixed; top:0; left:0; z-index:1000}
.header.fixed {background:#fff}
.header.active {border-bottom:1px solid #000; background:#fff}
.header-inner {padding:40px; display:flex; justify-content:space-between; align-items:flex-start}
.logo-area > div {display:flex; align-items:top; text-decoration:none; color:#1a1311}
.logo-txt {margin-right:15px}
.vol-info {font-family:'Noto Sans', sans-serif; display:flex; flex-direction:column; font-size:14px; line-height:22px; font-weight:500; color:#231815; margin-top:-5px}
.header-right {display:flex; align-items:center; gap:30px}
.slogan {font-size:14px; font-weight:400; color:#000; letter-spacing:-0.25px; margin:0}
.slogan strong {font-size:14px; font-weight:600; color:#000; letter-spacing:-0.25px; margin-right:10px}


/* Hamburger Button */
.menu-btn {width:40px; height:24px; position:relative; background:none; border:none; cursor:pointer; display:flex; flex-direction:column; justify-content:space-between}
.menu-btn span {display:block; width:100%; height:3px; background:#1a1311; border-radius:3px; transition:all 0.3s}
.menu-btn.active span:nth-child(1) {transform:translateY(10.5px) rotate(45deg)}
.menu-btn.active span:nth-child(2) {opacity:0}
.menu-btn.active span:nth-child(3) {transform:translateY(-10.5px) rotate(-45deg)}


/* full-menu */
.full-menu {position:fixed; top:0; left:0; width:100%; height:100vh; background:#fff; z-index:999; padding:197px 40px 40px; box-sizing:border-box; display:none; overflow-y:auto}
.full-menu.active {display:block}
.menu-inner {max-width:1640px; margin:0 auto; display:flex; gap:100px}
.menu-left {flex:0 0 185px; margin-left:100px}
.pdf-btn {display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:46px; border:1px solid #1a1311; border-radius:23px; margin-top:35px; text-decoration:none; transition:all 0.3s ease}
.pdf-btn:hover {background-color:#1a1311; color:#fff}
.pdf-btn:hover > span {color:#fff}
.pdf-btn > span  {color:#000; font-size:15px; font-weight:500; letter-spacing:-0.75px}
.pdf-btn .arrow {position:relative; top:1px; width:15px; height:1px; background-color:#1a1311; transition:all 0.3s ease}
.pdf-btn .arrow::before {content:''; position:absolute; right:0; top:0; width:7px; height:1px; background-color:#1a1311; transform:rotate(45deg); transform-origin:right; transition:all 0.3s ease}
.pdf-btn .arrow::after {content:''; position:absolute; right:0; bottom:0; width:7px; height:1px; background-color:#1a1311; transform:rotate(-45deg); transform-origin:right; transition:all 0.3s ease}
.pdf-btn:hover .arrow, .pdf-btn:hover .arrow::before, .pdf-btn:hover .arrow::after {background-color:#fff}
.menu-content {flex:1; display:grid; grid-template-columns:repeat(3, 1fr); gap:60px}
.menu-group h3 {font-size:16px; color:#ff6c00; margin-bottom:10px} /* 메뉴 컬러 */
.menu-group a {display:block; font-size:18px; color:#1b1b1b; text-decoration:none; line-height:140%; margin-bottom:40px}
.menu-group a:hover {text-decoration:underline}


/* footer */
.footer {background:#313131; padding:60px 0}
.footer-inner {max-width:1640px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-end}
.f-logo {margin-bottom:20px; opacity:0.6}
.copyright {font-size:18px; font-weight:500; color:#717171; margin:0}
.f-right {display:flex; gap:15px}
.floating-menu {position:fixed; right:40px; bottom:50px; z-index:999}
.floating-menu > a {display:block; margin-top:4px}


/* tags */
.keyword-tags {display:flex; flex-wrap:wrap; justify-content:center; gap:20px 20px; max-width:880px; margin:0 auto}
.keyword-tags a {display:inline-flex; align-items:center; padding:0 22px 0 0; border:1px solid #1a1311; border-left:none; border-radius:22px; font-size:14px; font-weight:500; color:#1a1311; transition:all 0.3s; cursor:default;}
.keyword-tags a span {display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid #1b1b1b; border-radius:50%; margin-right:15px; font-weight:700; font-size:14px; color:#1b1b1b; transition:all 0.3s}
/* .keyword-tags a:hover {background:#1b1b1b; color:#fff} */
.keyword-tags a:hover span {background-color:#fff}




/* 아이패드일 때만 강제로 높이 확보 */
.is-ipad .footer {display:block !important; min-height:450px !important}

/* 세로 모드일 때 */
.is-ipad.is-portrait .footer {padding-bottom:200px !important}

/* 가로 모드일 때 */
.is-ipad.is-landscape .footer {padding-bottom:100px !important}





@media screen and (max-width:1640px) {
    .footer-inner {padding:0 30px}
}


@media screen and (max-width:1440px) {
	.show1440 {display:block !important}
	.hide1440 {display:none !important}
	.full-menu {padding-top:170px}
    .menu-inner {gap:50px}
    .menu-left {margin-left:0; flex:0 0 160px}
    .menu-content {gap:40px}
}

@media screen and (max-width:1280px) {
	.show1280 {display:block !important}
	.hide1280 {display:none !important}
}


@media screen and (max-width:1024px) {
	.show1024 {display:block !important}
	.hide1024 {display:none !important}
	.full-menu {padding:170px 30px 40px}
    .menu-inner {flex-direction:column; gap:60px}
    .menu-left {flex:1; text-align:center; max-width:200px; margin:0 auto}
    .menu-content {grid-template-columns:repeat(2, 1fr); gap:40px 30px}
    .menu-group a {font-size:16px; margin-bottom:30px}
}


@media screen and (max-width:768px) {
	.show768 {display:block !important}
	.hide768 {display:none !important}
	.header-inner {padding:20px 30px; align-items:center}
	.headerLogo {height:36px}
	.logo-txt {margin-right:10px}
    .slogan {display:none}
	.full-menu {padding:120px 20px 40px; height:100vh}
	.menu-btn {width:32px}
    .menu-content {grid-template-columns:1fr; gap:0}
    .menu-inner {gap:40px}
    .menu-group h3 {font-size:15px; margin-bottom:8px}
    .menu-group a {font-size:15px; margin-bottom:25px}    
    .pdf-btn {margin-top:20px}
	.footer {padding:40px 0}
    .footer-inner {flex-direction:column; align-items:center; text-align:center; gap:30px}
    .f-left {order:2}
    .f-right {order:1}
    .f-right > a {width:36px}
	.f-logo {margin-bottom:15px; height:40px}
	.copyright {font-size:14px}
	.keyword-tags {gap:7px}
    .keyword-tags a {font-size:12px; padding:0 15px 0 0}
	.keyword-tags a span {width:32px; height:32px; margin-right:10px}
	.floating-menu {right:0; bottom:30px}
	.floating-menu > a {margin-top:2px; width:40px}
}


@media screen and (max-width:500px) {
	.show500 {display:block !important}
	.hide500 {display:none !important}
    .pdf-btn {height:40px; font-size:13px}
    .menu-group a {word-break:break-all}
}