@font-face {
    font-family: 'SBAggroB';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
   
}
@font-face {
    font-family: 'SBAggroL';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroL.woff') format('woff');
 }


:root {
  --main_c : #5765FF;
}
:root {
  --main_c2 : #322A6F;
}
 


/* Header */
#header_wrap {width:100%; display:inline-block; z-index:99999; left:0; top:0; position:fixed;  }

 
header#header {
	position:absolute;
	z-index: 99999999;
	width: 100%;
    top:0; left:0; 
     
	box-sizing: border-box; 
  	background-color:#fff; 
  
}

header * {transition: all 0.2s ease-out;}
 
header#header .flex {align-items:center}
  
.header .top_util {padding:25px 0; border-bottom:2px solid #e6e6eb; width:100%;  line-height:0; }
.header .top_util .flex {align-items:center; margin-left:auto}
.header .top_util .flex > .flex a  {margin-left:15px}
.header .top_util .flex > .flex p {line-height:1.3} 
.header i {vertical-align:middle; margin-right:5px}

nav#gnb { top:0px;  width:auto; }
nav#gnb > ul {display:flex; }
nav#gnb > ul:after {content:''; width:100vw; background-color:#ddd; height:1px; position:absolute;  left:0; bottom:0}
nav#gnb > ul > li { display:inline-block; box-sizing:border-box; margin-right:40px; z-index:999999999999999999999999999999; white-space:nowrap; font-size: 1.15rem; line-height:60px; font-weight:400; color: #000; cursor:pointer }
nav#gnb > ul > li > a { display: inline-block; color:#000 }
nav#gnb > ul > li:last-child > a  {color:var(--main_c)}
nav#gnb > ul > li:nth-child(6) {margin-left:auto; }
nav#gnb > ul > li:last-child {margin-right:0}
nav#gnb > ul > li .arrow {vertical-align:7px; margin-left:5px}

nav#gnb > ul > li > div { height:0; overflow:hidden; display:flex; width:100%; background-color:#fff;  position:absolute; left:50%; transform: translate(-50%, 0); }
nav#gnb > ul > li:hover > div  { height:auto; padding:15px 0; gap:20px}

nav#gnb > ul > li > div > ul {display:flex; gap:20px}
nav#gnb > ul > li > div > ul > li {font-size:1em; line-height:40px}
nav#gnb > ul > li > div > ul > li a {color:#363636}
nav#gnb > ul > li > div > ul > li a:hover {text-decoration:underline}

nav#gnb > ul > li > div.call_drop_down > ul {gap:20px; margin:10px auto}
nav#gnb > ul > li > div.call_drop_down > ul > li {background-color:#ECECEC; border-radius:30px; display:flex; font-weight:300; align-items:center; gap:20px; width:33%; line-height:1; padding:12px 10px; box-sizing:border-box }
nav#gnb > ul > li > div.call_drop_down > ul > li b { display:block; font-weight:700; line-height:1; margin-top:5px; font-size:22px;}

.m_top {display:flex; align-items:center;  width:100%; box-sizing:border-box; padding:0 4% 0 3%; height:60px; background-color:#fff; position:fixed;   top:0;  z-index:99999999999999;  }
.m_top h1 {line-height:0; display:flex; align-items:center}

.m_top i {font-size:21px; color:#111; }
.m_top .flex {margin-left:auto} 


@media all and (min-width:1200px) {
     nav#gnb > ul > li a + span {display:none}

}
@media all and (max-width:1200px) {

	nav#gnb > ul > li {font-size:1.05rem; margin-right:15px }
    nav#gnb > ul > li > a.pc {display:none}
}

@media all and (min-width:900px) {
 		.m_top {display:none}

}

@media all and (max-width:900px) {
 
		header#header {display:none}
		#header_wrap {display:none}
		#header_wrap:after {display:none}
 
		
}

footer {width:100%; background-color:#222; color:rgba(255,255,255,.8); padding-top:40px; text-align:center; font-size:16px; line-height:1.7; position:relative}
footer h3 {display:inline-block; margin-bottom:8px; font-size:1.1em; font-weight:500; width:100%; color:#fff}
footer p {border-top:1px solid rgba(255,255,255,.2);  padding:22px 0; margin-top:30px }
footer a {position:absolute; right:3%; top:0; background-color:#597dff; color:#fff !important; letter-spacing:0; width:60px; line-height:60px; display:inline-block }

@media all and (max-width:900px) {
		footer {font-size:14px;  }
		footer a {width:50px; line-height:50px}

}
 
.in {width:100%; box-sizing:border-box;  max-width:1270px; margin:0 auto}
 

  

.flex {display:flex}
.flex.ac {align-items:center}
.flex.as {align-items:flex-start}
.flex.jc {justify-content:center;}
.flex.js {justify-content: space-between;}
.flex.gap20 {gap:20px}
.flex.gap30 {gap:30px}
.flex.gap40 {gap:40px}
.flex.gap50 {gap:50px}
.sr_0 {flex-shrink:0}
.f_wrap {flex-wrap:wrap}
.col-2 p {width:50%}


.flex.f_wrap.col-2 {gap:5px 0}
.flex.f_wrap.col-2 p {display:flex; align-items:center; gap:5px}
.flex.f_wrap.col-2 p span {width:130px; white-space:nowrap; }
.flex.f_wrap.col-2 p input {width:90px} 


.t_color {color:var(--main_c)}
.red {color:red}
.gray {color:#7A7A7A}
.s_t {font-size:16px; color:#333}
.b_t {font-weight:600; font-size:24px}


@media all and (max-width:1280px) {
  .in {width:100%; box-sizing:border-box; padding:0 4%}

}
@media all and (max-width:900px) {
		.flex {flex-wrap:wrap }
		ul.flex.m_wrap {flex-wrap:wrap}
		.flex.gap50 {gap:20px}
		.col-2 p {width:100%}

		.s_t {font-size:14px; }

}


.line_hr {width:100%; height:1px; background-color:#333}


ul.check_point li {display:flex; align-items:flex-start; gap:10px ;  margin-bottom:6px }
ul.check_point li:before { content:' '; width:22px; height:15px; margin-top:4px; background:url('/common/img/check.svg') no-repeat; background-size:100%; flex-shrink:0}

ul.basic li {display:flex; align-items:flex-start; gap:10px; margin-bottom:6px }
ul.basic li:last-child { margin-bottom:0 }
ul.basic li:before { content:' '; flex-shrink:0;  width:5px; height:5px; background-color:#333; border-radius:50%; margin-top:11px; flex-shrink:0}

dl.basic {display:flex; flex-wrap:wrap; margin-bottom:-10px}
dl.basic dt {width:100px; margin-bottom:10px; flex-shrink:0; font-size:1em}
dl.basic dd {font-size:1em; margin-bottom:10px;  width:calc(100% - 100px)}


@media all and (max-width:900px) {
  ul.check_point li:before { width:17px; height:13px}


}
.btn_wrap {width:100%; text-align:center; margin-top:50px}

a.basic_btn {font-size:32px; color:#fff; background-color:var(--main_c); padding:10px 40px; display:inline-block; border-radius:50px}
a.s_btn {  color:#fff; background-color:var(--main_c); padding:7px 0px;  width:150px;display:flex; align-items:center; justify-content:Center;   border-radius:50px}
a.s_btn.naver {background-color:#1AC157; gap:5px }
a.s_btn.naver p {  width:30px; border-radius:50%; display:flex;  height:30px; background-color:#fff; align-items:center; justify-content:Center; line-height:0 }

.table_div {width:100%; overflow-x:auto}
table.basic {width:100%; border-top:2px solid #ddd}
table.basic th {background-color:#f1f1f1;border-bottom:1px solid #ddd; border-right:1px solid #ddd;   padding:10px}
table.basic td {background-color:#fff; color:#363636; border-bottom:1px solid #ddd; border-right:1px solid #ddd; padding:10px}
table.basic .bor_no {border-right:none}
table.basic.type2 th {background-color:#333; color:#fff; font-weight:600}
table.basic.type2 td {font-size:.95em; text-align:center; padding:15px}
.table_div + p {margin-top:5px}

ul.map {gap:20px}
ul.map li {  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); background-color:#fff; border-radius:30px; overflow:hidden; text-align:center}
ul.map li div { box-sizing:border-box; padding:20px; text-align:left}
ul.map li h5 {font-size:32px; margin-top:10px}
ul.map li h5 img {vertical-align:top; margin-top:13px}
ul.map li p {margin-top:40px }
ul.map + p.text {font-size:32px}

@media all and (max-width:900px) {
		ul.map li {width:100%; border-radius:20px}
		a.basic_btn {font-size:1.2em}
		ul.basic li:before {margin-top:9px}
		dl.basic dt {margin-bottom:5px}

		ul.map li h5 {font-size:1.5em }
		ul.map li p {margin-top:20px }
		ul.map + p.text {font-size:1.2em}

}