@charset "UTF-8";
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button, textarea {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
	line-height:140%;
}
body {font-family: 'Noto Sans KR', sans-serif; font-size:16px; color:#1f2937;}
@media (max-width:1024px) {
    body {font-size: 14px;}
}
button {background-color: transparent; cursor: pointer;}
address { font-style:normal;}
a { display:block;}
html, body { height:100%;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

input, select, textarea {
    vertical-align:initial;
}

img { 
	border:none;
	vertical-align:top;
}

.clearfix:after { 
	content:"";
	display:block;
	clear:both;
}
a:link, a:visited { color:#1f2937; text-decoration:none;}
a:active, a:hover { color:#1f2937; text-decoration:none;}

/*hidden*/
.hidden { position:absolute; left:-9999px; font-size:1px; width:1px; height:1px; line-height:0; }

/*스킵메뉴*/
#skip_menu { width:300px; position:absolute; z-index:9999;}
#skip_menu a { position:absolute; top:-100px;}
#skip_menu a:hover,
#skip_menu a:active,
#skip_menu a:focus { position:absolute; top:0; width:300px; height:20px; display:block; background:#333; color:#fff; text-align:center; font-size:16px; font-weight:bold;}

.inner {max-width:900px; margin: 0 auto;}
:root {
    --main-color:#8a1538;
}

/* 공통 */
.btn-wr {margin-top:3rem}
.btn {padding: 0.65rem 1rem; border-radius: 8px; background: #8a1538; color: #fff; box-sizing: border-box; display: inline-block; transition: 0.15s ease;}
.btn.navy {background: #5d0922;}
.btn-wr .btn+.btn {margin-left: 1rem;}
.btn:hover {background:#51051c; transition: 0.15s ease;}
.btn.disable {background: #D1D5DB !important; color: #9ca3af; cursor: not-allowed;;}
.file {padding: .3rem .8rem; padding-right: 2rem; position: relative; border: 1px solid #e1e1e1; border-radius: 8px; box-sizing: border-box; transition: 0.15s ease;}
.file::after {position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); background: url('/design/default/img/main/File_Download.svg') no-repeat; width: 1.125rem; height: 1.25rem; content: ''; background-size: cover;}
.file:hover {background: #f5f4f6;}

/* header */
#header {box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; position: sticky; top: 0; left: 0; background-color: #fff; z-index: 9;}
#header .header_wrap {max-width:1540px; margin: 0 auto; display: flex; justify-content: space-between; padding:1rem 1.5rem; align-items: center; gap: 1rem;}
#header .header_wrap::after {content: none;}
#header .header_wrap .session {font-size:0.875rem}
#header .header_wrap #m_gnb {display: none;}
#header .header_wrap .logo a{display: flex; align-items: center; gap:10px; font-size:1.25rem; line-height: 1.25;}
#header .header_wrap .logo .logo-favi {border-radius: 100%; display: flex; justify-content: center; align-items: center;}
#header .header_wrap .logo img {width: 2.5rem; height: 2.5rem; color: #fff;}
#header .header_wrap .gnb {display: flex; gap:1.5rem}
#header .header_wrap .gnb::after {content: none;}
#header .header_wrap .gnb li a {color: rgb(75 85 99); font-weight: 500; transition: 0.15s ease; position: relative; padding:.5rem 0; box-sizing: border-box;}
#header .header_wrap .gnb li a::after {position: absolute; content: ''; left: 0; bottom: 0px; width: 0; height: 3px; background-color: var(--main-color); transition: 0.15s ease;}
#header .header_wrap .gnb li a:hover {color: var(--main-color); transition: 0.15s ease;}
#header .header_wrap .gnb li a:hover::after {width: 100%; transition: 0.15s ease;}
#header .header_wrap .gnb li.on a {color: var(--main-color);}
#header .header_wrap .gnb li.on a::after {width: 100%;}
#header .header_wrap .utill-wr {display: flex; gap:1rem; align-items: center;}
#header .header_wrap .utill-wr .login-wr {display: flex; gap:.5rem; align-items: center;}
#header .header_wrap .utill-wr .login-wr li a {font-size:0.875rem; padding:0.5rem .75rem; background: var(--main-color); color: #fff; border-radius: 8px; transition: 0.15s ease;}
#header .header_wrap .utill-wr .login-wr li a:hover {background: #f1f1f1; color: var(--main-color); transition: 0.15s ease;}
#header .header_wrap .utill-wr .lang-wr {position: relative;}
#header .header_wrap .utill-wr .lang-wr .selected{padding:.5rem; border-radius: 8px; display: flex;color: #4b5563; font-weight: 500; align-items: center; gap:8px; cursor: pointer;}
#header .header_wrap .utill-wr .lang-wr .selected:hover, #header .header_wrap .utill-wr .lang-wr .selected.on {background: #f1f1f1; color: var(--main-color);}
#header .header_wrap .utill-wr .lang-wr .selected.on .arrow {transform: rotate(180deg); transition: 0.15s ease;}
#header .header_wrap .utill-wr .lang-wr .selected .icon {width: 1.5rem; height: 1.5rem;}
#header .header_wrap .utill-wr .lang-wr .selected .arrow {width: 1rem; height: 1rem; transition: 0.15s ease;}
#header .header_wrap .utill-wr .lang-wr ul {z-index: 999;display: none;position: absolute; top: 50px; right: 0; padding: .5rem 0; border-radius: 8px; border: 1px solid #ddd; background-color: #fff; width: 10rem; box-sizing: border-box;}
#header .header_wrap .utill-wr .lang-wr ul li button {padding: 0.5rem 1rem; display: flex; justify-content: space-between; width: 100%; align-items: center; transition: 0.15s ease;}
#header .header_wrap .utill-wr .lang-wr ul li button:hover {background: #f1f1f1; transition: 0.15s ease;}
#header .header_wrap .utill-wr .lang-wr ul li button span:nth-child(1) { color: #374715; font-size:0.875rem; font-weight: 500; transition: 0.15s ease;}
#header .header_wrap .utill-wr .lang-wr ul li button span:nth-child(2) { color: #9ca3af; font-size:0.675rem}
#header .header_wrap .utill-wr .lang-wr ul li button:hover span:nth-child(1) {color: var(--main-color); transition: 0.15s ease;}

.gt_switcher_wrapper {position: relative !important; top: auto !important; right: auto !important;}
.gt_switcher_wrapper select {padding: 0.5rem .75rem !important;}

/* footer */
#footer {background-color: #1f2937;}
#footer .inner{padding: 2rem;}
#footer .inner p {text-align: center; color: #9ca3af; font-size: 0.875rem;}


@media (max-width:1024px) {
    .btn-wr {margin-top:2rem}
    .btn {padding: 0.65rem;}

    #header .header_wrap {flex-direction: column; align-items: flex-start; padding: 2.75rem 1rem 0 1rem; gap: 0;}
    #header .header_wrap .session {margin-right:8px}
    #header .header_wrap .logo a {font-size: 1.125rem;}
    #header .header_wrap .logo img {width: 2rem; height: 2rem;}
    #header .header_wrap .gnb {padding-top:.25rem}
    #header .header_wrap .gnb li a {padding: .75rem 0;}
    #header .header_wrap .utill-wr {position: absolute; left: 0rem; top: 0rem; width: 100%; border-bottom: 1px solid #eee;justify-content: flex-end; gap: 0;}
    #header .header_wrap .utill-wr .login-wr {}
    #header .header_wrap .utill-wr .login-wr li {height: 100%;}
    #header .header_wrap .utill-wr .login-wr li a {border-radius: 0; font-size:0.785rem; height: 100%; box-sizing: border-box; padding: 0.25rem 0.5rem;}
    #header .header_wrap .utill-wr .lang-wr .selected {padding: 0.25rem 0.5rem; border-radius: 0; gap: 5px;}
    #header .header_wrap .utill-wr .lang-wr .selected span {font-size:0.785rem}
    #header .header_wrap .utill-wr .lang-wr .selected .icon {width: 1.25rem; height: 1.25rem;}
    #header .header_wrap .utill-wr .lang-wr ul {top: 28px;}

    .gt_switcher_wrapper select {padding: 3.25px !important; border-radius: 0 !important;}
}

@media (max-width:480px) {
    .btn-wr {margin-top:1.5rem}
    #header .header_wrap {padding:2.75rem 0.5rem 0 0.5rem}
    #header .header_wrap .logo a {font-size: 1rem;}


    #footer .inner {padding: 1.5rem 0.5rem;}

}

@media (max-width:420px) {
    #header .header_wrap .gnb {gap:0.85rem; width: 100%; justify-content: space-between;}
    #header .header_wrap .gnb li a {font-size:0.85rem}
}