@charset "UTF-8";

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');


:root {
    --main-color:#2F90E1;
    --main-color-dark:#026dc5;
    --sub-color:#F2F5FA;
    --text-color:#333;
	--mono1:#272729;
    --mono2:#38383a;
    --mono3:#565659;
    --mono4:#909093;
    --mono5:#bcbcbf;
    --mono6:#d3d3d5;
    --mono7:#f1f2f4;
    --mono8:#f7f8fa;
    --border-radius-large:12px;
    --border-radius-medium:8px;
    --border-radius-small:4px;
}


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-size: 100%;
	vertical-align: baseline;
	line-height:160%;
  box-sizing: border-box;
}
body {font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif; font-size:16px; color:var(--text-color); }
address { font-style:normal;}
a {display:block; font-size:inherit; color:inherit;}
button{border:0; background:none; box-shadow:none; padding:0; cursor:pointer; font-family:inherit;}
html, body { 
  width:100%; 
  /*height:100%;*/ 
  /* overflow-x:hidden;  */
  /*overflow-y:auto;*/ 
  position:relative; 
}
/* 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;
	table-layout:fixed;
}

input, select, textarea {
    vertical-align:initial; font-family: inherit; font-size:inherit; color:inherit; line-height:inherit;
}

img { 
	border:none;
	vertical-align:top;
	max-width:100%;
}

.clearfix:after { 
	content:"";
	display:block;
	clear:both;
}
.fl-l{float:left;}
.fl-r{float:right;}

a:link, a:visited { color:inherit; text-decoration:none;}
a:active, a:hover { color:inherit; text-decoration:none;}

.site-wrap { height:100%; margin:0 auto;}
.wrapper{width:94%; max-width:1500px; margin:0 auto; position:relative; /*text-align: center;*/}
.wrapper.center{text-align: center;}

/*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;}


.algn-c{text-align:center;}
.algn-l{text-align:left;}
.algn-r{text-align:right;}

.bg--main{background-color:var(--main-color);}
.bg--yellow{background-color:#ed9d00;}
.bg--red{background-color:#E52121;}
.bg--black{background-color:#222;}
.bg--white{background-color:#fff;}
.bg-gray{background-color:#666;}
.bg-lightgray{background-color:#ddd;}
.clr--main{color:var(--main-color);}
.clr--yellow{color:#ed9d00;}
.clr--red{color:#E52121;}
.clr--black{color:#222;}
.clr--white{color:#fff;}
.clr-gray{color:#666;}
.clr-lightgray{color:#ddd;}

.weight400 {font-weight: 400;}
.weight600 {font-weight: 600;}
.weight700 {font-weight: 700;}

.inline-justify{font-size:0;}
.inline-justify > *{display:inline-block; font-size:16px;}

.list{}
.list > *{position:relative; margin-bottom:0.6em; padding-left:1em;}
.list > *:last-child{margin-bottom:0;}
.list > *:before{position:absolute; content:""; left:0; top:0.75em;}
.list.list--dot > *:before{margin-top:-2px; width:4px; height:4px; background:#ed9d00; border-radius:100%;}


/* Header */
#header{border-bottom:1px solid rgba(255,255,255,0.3); position:absolute; width:100%; background:none; z-index:99999; }
#header .logo {margin-top:9px;}
#header .logo a{position:relative; padding:2px 0;}
#header .logo img {}
#header .gnb{margin-right:45px;}
#header .gnb .menuDepth1{position:relative;}
#header .gnb .menuDepth1 > a{height:80px; line-height:80px; color:#fff; position:relative; font-size:18px; font-weight:500; padding:0 45px;}

#header .gnb .ulDepth2{display:none; text-align:center; font-size:0; background:var(--main-color); position:absolute; left:50%; top:100%; margin-top:1px; width:210px; padding:0.75rem 0; transform:translateX(-50%);}
#header .gnb .menuDepth2{position:relative; vertical-align:top;}
#header .gnb .menuDepth2 > a{font-size:16px; color:#ffffff; padding:8px 0;}
#header .gnb .menuDepth2.on > a{color:#fff;}

#header #m_gnb{position:absolute; right:50%; margin-right:-761px; top:50%; transform:translateY(-50%); z-index:999999;}
#header #m_gnb a{width:40px; height:40px; position:relative;}
#header #m_gnb a:before{position:absolute; content:""; width:18px; height:2px; background:#fff; top:50%; margin-top:-7px; left:50%; margin-left:-9px; transition:all .2s;}
#header #m_gnb a:after{position:absolute; content:""; width:18px; height:2px; background:#fff; top:50%; margin-top:5px; left:50%; margin-left:-9px; transition:all .2s;}
#header #m_gnb a span{display:block; position:absolute; width:18px; height:2px; background:#fff; top:50%; margin-top:-1px; right:50%; margin-right:-9px; transition:all .2s;}
#header #m_gnb.on{right:20px; margin-right:0; border:1px solid rgba(255,255,255,0.2);}
#header #m_gnb.on a:before{top:50%; margin-top:-1px; transform:rotate(45deg); background:#fff;}
#header #m_gnb.on a:after{top:50%; margin-top:-1px; transform:rotate(-45deg); background:#fff;}
#header #m_gnb.on a span{width:0; opacity:0; background:#fff;}

/* Header - mGnb */
#header #m_bg{display:none; position:fixed; left:0; top:0; width:100%; height:100%; z-index:999997; overflow:hidden; background:rgba(0,0,0,0.5);}
#header #mGnb{position:fixed; z-index:999998; right:-300px; top:0; width:300px; height:100%; overflow:hidden; background:var(--main-color-dark); padding-top:80px;}
#header .mGnb{height:100%; overflow-x:hidden; overflow-y:auto;}
#header .mGnb .menuDepth1{border-bottom:1px solid rgba(255,255,255,0.2);}
#header .mGnb .menuDepth1 > a{text-align:center; padding:0.75em 2%; font-size:18px; color:#fff;}
#header .mGnb .ulDepth2{display:none;}
#header .mGnb .menuDepth2 > a{text-align:center; padding:0.5em 2%; background:#2c8ad2; color:#c5dbec;}
#header .mGnb .menuDepth2.on > a{color:#fff;}


/* Footer */
#footer{background:#fff; padding:50px 0 60px; color: #000;}
#footer .footer_menu {display: flex; column-gap: 2rem; color: #454545; font-weight: 700;}
#footer .footer_menu li {position: relative;}
#footer .footer_menu li+li:before {position: absolute; top:5px; left:-1rem; content:''; background:#999; width:1px; height:15px}

#footer .footer_info {margin:40px 0; color: #999; }
#footer .footer_logo{}
#footer .footer_info p{ display:inline-block; position:relative;}
#footer .footer_info p+p{margin-left: 10px; }
#footer .footer_info p+p:before{position:absolute; content:""; left:-6px; width:1px; height:15px; top:5px;background:#999;}

#footer .copyright{color: #999;}


/* toTop */
#toTop{position:fixed; right:3%; bottom:5%; margin-bottom:80px; z-index:9; border-radius:34px; box-shadow:0 0 24px rgba(0,0,0,0.2); background:#fff;}
#toTop button{display:block; cursor:pointer; position:relative; right:0; top:0; z-index:2; width:68px; height:68px; border-radius:34px; overflow:hidden; background:#00a428 linear-gradient(-45deg, #006dba, #00a428); color:#fff; font-size:18px; font-weight:600; transition:all .2s;}
#toTop button:hover{opacity:0.8;}



/********************************** 반응형 *************************************/

@media(max-width:1595px){
	#header #m_gnb{right:3%; margin-right:0;}
}


@media(max-width:1200px){
	#header .gnb{display:none;}
    #header .logo a {padding-bottom:20px}

	#footer .footer_logo{max-width:60%; margin:0 auto 30px;}
	#footer .footer_info{width:100%; margin-top:1.5em;}
}

@media(max-width:1024px){
	.wrapper{width:94%; max-width:90%; margin:0 auto; position:relative; /*text-align: center;*/}
}


@media(max-width:640px){
	
  body {font-size:15px;}

	#header .logo a{padding:20px 0; margin-top: 0;}
	#header .logo img{width:203px;}
	#header .logo img:last-child{top:20px;}

	#footer .footer_info address span:last-child{width:100%;}
	#footer .footer_info address span:nth-child(2):after{display:none;}
}


@media(max-width:480px){
}


@media(max-width:420px){
	
  body {font-size:14px;}

	#footer .footer_info address span{padding:0 10px;}
	#footer .footer_info address span:after{display:none;}
	#footer .familySite button{width:180px; font-size:15px;}
}