@charset "utf-8";

@import url('https://webfontworld.github.io/pretendard/Pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;900&display=swap');
@import url('https://webfontworld.github.io/SCoreDream/SCoreDream.css');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap');
@font-face {
    font-family: 'Cafe24Moyamoya-Regular-v1.0';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/Cafe24Moyamoya-Regular-v1.0.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Cafe24Supermagic-Bold-v1.0';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/Cafe24Supermagic-Bold-v1.0.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}


/* css reset */
* {
	font-family: 'Noto Sans KR', sans-serif;
	color: #111;
	word-break: keep-all;
}

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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	vertical-align: baseline;
}
/* 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;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: none;
}



/* 텍스트 컬러 및 폰트 class  */
.ff_pretd {font-family: 'Pretendard';}
.ff_moya { font-family: 'Cafe24Moyamoya-Regular-v1.0';}
.ff_score {font-family: 'SCoreDream';}
.ff_noto {font-family: 'Noto Sans KR';}
.ff_super {font-family: 'Cafe24Supermagic-Bold-v1.0';}


.color_b1 {color: #003777;}
.color_b2 {color: #00b4d7;}


/*공통css*/
.flx1 {display: flex; flex-flow: row wrap;}
.flx2 {display: flex; flex-flow: column wrap;}
.inner {width: 100%; max-width:1200px; margin: 0 auto;}
.hide-800 {}
.show-800 {display: none;}
.fw_300 {font-weight: 300;}
.fw_500 {font-weight: 500;}
.fw_600 {font-weight: 600;}
.fw_700 {font-weight: 700;}

img {max-width: 100%;}

@media (max-width:1200px) {
	.inner {margin: 0 4%; width: 92%;}
}

@media (max-width:800px) {
	.hide-800 {display: none;}
	.show-800 {display: block;}
}



/* 헤더 */
header.on {transition: all 0.3s;}
.header {padding: 10px 2.6%; align-items: center; position: fixed; width: 100%;left: 0; top:0; background: #fff; z-index: 999; border-bottom: 1px solid #ddd;}
.header .logo {width: calc(100% - 171px);}
.header .sub_btn {margin-right: 30px;}
.header .sub_btn a {color: #fff; padding: 10px 21px; border-radius: 30px; background: #111; }
.header .gnb_btn {height: 34px; width: 40px; padding: 5px 0; cursor: pointer;position: relative; }
.header .gnb_btn span {display: block; width: 40px; height: 4px; background: #111; position: absolute; right:0; transition: transform .3s;}
.header .gnb_btn span:nth-of-type(1) {top:0;}
.header .gnb_btn span:nth-of-type(2) {width: 30px; top:50%; transform: translateY(-50%);}
.header .gnb_btn span:nth-of-type(3) {top: calc(100% - 4px);}

.header .gnb {position: absolute; z-index: 99; top: calc(100% + 1px); right: 0; padding: 40px; background: #fff; height: 100vh; width: 100%; max-width: 650px; visibility: hidden; opacity: 0;transition: all 0.3s;}
.header .gnb nav {position: relative;}

/* .header .gnb nav h3 {color: #003777; font-size: 30px; line-height: 1.2; padding: 50px 0 10px;} */
.header .gnb nav h3 {color: #003777; font-size: 30px; line-height: 1.2; padding-top: 50px;}
.header .gnb nav h3:first-child {padding-top: 20px;}
.header .gnb nav h3:nth-of-type(2) {border-top: 1px solid #ddd;}
.header .gnb nav p {font-size: 22px; font-weight: 600; display: block; position: relative; cursor: pointer; padding: 20px 0; }
.header .gnb nav p:nth-of-type(2) {border-top: 1px solid #ddd;}
.header .gnb nav p::before {content:""; position: absolute; right:5px; top:32px;  width: 13px; height: 7px; background: url(../images/ico/gnb_arr.png) no-repeat center / contain;}
.header .gnb nav p.on::before {transform: rotate(180deg);}

.header .gnb nav li {font-size: 18px; font-weight:300; }
.header .gnb nav li:hover, .header .gnb nav li:hover span {font-weight: 400;color: #003777;}
/* .header .gnb nav ul:not(.sub_menu) li {border-bottom: 1px solid #ddd; padding: 20px 0;} */
.header .gnb nav ul:not(.sub_menu) li {border-bottom: 1px solid #ddd; padding: 15px 0;}
.header .gnb nav .sub_menu {display: none; padding-bottom: 10px;  position: relative;}
.header .gnb nav .sub_menu li {padding: 10px 0;} 

header .bg {position: fixed; top:0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.75); z-index: 98; visibility: hidden; opacity: 0; transition: all 0.3s;}

header.on .bg {visibility: visible; opacity: 1;}
header.on .gnb_btn {align-items: center; }
header.on .gnb_btn span:nth-of-type(1) {top: 50%; transform: translateY(-50%) rotate(45deg);}
header.on .gnb_btn span:nth-of-type(2) {opacity: 0;transform: translateY(-50%) rotate(45deg);}
header.on .gnb_btn span:nth-of-type(3) {top: 50%; transform: translateY(-50%) rotate(-45deg);}
header.on .gnb {visibility: visible; opacity: 1; }

.header .gnb nav ul li.active, .header .gnb nav ul li.active span {color: #003777; font-weight: 400;}


@media (max-width:1200px) {
	.header {padding: 5px 4%;}

    .header .gnb nav h3 {padding-top: 40px;}

}

@media (max-width:1080px) {
	.header .gnb nav h3 {font-size: 28px; padding-top: 30px;}
    .header .gnb nav p {font-size: 20px; padding: 15px 0; }

    .header .gnb {padding: 35px;}
    .header .gnb nav li {font-size: 18px; }
    .header .gnb nav ul:not(.sub_menu) li {padding: 15px 0;}
}

@media (max-width:800px) {
	.header {justify-content: space-between;}
	.header .logo {order:2; text-align: left; width: calc(100% - 120px);}
	.header .sub_btn {order:1; margin-right: 0;}
	.header .sub_btn a {font-size: 14px; padding: 5px 10px;}
	.header .gnb_btn {order:3; height: min(34px,6vw);}
	.header .gnb_btn span {width: max(25px,6vw); height: 4px;}
	.header .gnb_btn span:nth-of-type(2) {width: max(20px,4.5vw);}

    .header .gnb {padding: max(20px,5%);}
    .header .gnb nav h3 {font-size: max(24px,4vw); padding-top: 7%;}
    .header .gnb nav h3:first-child {padding-top: 0;}
    .header .gnb nav p {font-size: max(18px,3.5vw); padding: 3% 0; }

    .header .gnb nav li {font-size: max(16px,3.2vw); }
    .header .gnb nav ul:not(.sub_menu) li {padding:2.5% 0;}
    .header .gnb nav .sub_menu {padding-bottom: 2.5%;}
    .header .gnb nav .sub_menu li {padding: 1.5% 0;} 
}

/* 푸터 */
.fl_menu {position: fixed; right:4%; bottom:10%;}
.fl_menu li {margin: 8px 0;}
.fl_menu li a {width: 60px; height: 60px; border-radius: 50%; background: #333; justify-content: center; align-items: center; transition: all .2s; color: #fff;}
.fl_menu li a:hover {background: #bbdf32;}

.footer {text-align: center; padding: 40px 0 70px; border-top: 1px solid #ddd; }
.footer * {color: #999;}
.footer .info {justify-content: center; padding-bottom: 25px;}
.footer .info li {position: relative; padding: 0 10px;}
.footer .info li:not(:last-child)::before {content:""; position: absolute; top:4px; right: 0;width: 1px; height: 16px; background: #ddd;}

@media (max-width:1080px) {
	.fl_menu {display: none;}
}

@media (max-width:800px) {
	.footer {padding: 8%;}
    .footer .info li:nth-of-type(2n+1)::before {display: none;}
}

@media (max-width:500px) {
    .footer .info li,.footer p {font-size: 14px;}
    .footer .info li::before {display: none;}
}