@charset "utf-8";

/* mobile gnb ani */
@-webkit-keyframes fade {
  0% { opacity: 0;}
  100% { opacity: 1;}
}
@keyframes fade {
  0% { opacity: 0;}
  100% { opacity: 1;}
}


/* layout */
.inner {	width: 100%; max-width:1600px;	position:relative;	margin-left:auto;	margin-right:auto;}
.s-inner {	width:94%; max-width:1600px;	position:relative;	margin-left:auto;	margin-right:auto;}
.bd-inner {	width:94%; max-width:1400px;	position:relative;	margin-left:auto;	margin-right:auto;}
.bdd-inner{	width:94%; max-width:1200px;	position:relative;	margin-left:auto;	margin-right:auto;}

@media all and (max-width:1399px) {
	body#wrap { font-size: 14px; }
}

@media all and (max-width:1280px) {
	body#wrap { font-size: 13px; }
}

@media all and (max-width:976px) {
	body#wrap { font-size: 12px; }
}

/* 타블렛 가로 미만 ~ 모바일 */
@media all and (max-width:767px) {

}

@media all and (max-width:640px) {
	body#wrap { font-size: 2.0vw; }
}

@media screen and (max-width:568px) {
	body#wrap { font-size: 2.3vw; }
}

@media screen and (max-width:480px) {
	body#wrap { font-size: 2.5vw; }
}



/*Header*/
#header {position:absolute; left:0; top:0; width:100%; box-sizing:border-box; z-index:300;}

#header #logo {position:absolute; left:53%; top:20px; transform: translateX(-50%);}
#header #logo img{ vertical-align:middle;  }
#header #logo img.on{ display:none; }

.t_dona{ position: absolute; left: 30px; top: 25px; text-align: center;}
.t_dona .t{padding-top:2px; font-size: 14px; line-height: 20px; font-weight: 500; background: #fff; color: #1f62d1; border-radius: 20px;}
.t_dona .b{margin-top: 2px; font-size: 14px; color: #fff;}
.t_dona.m{display: none;}

.t_menu { position: absolute; right: 100px; }
.t_menu a { color:#fff;  line-height: 90px; margin: 0 0.5em; font-size: 0.86em; }
.t_sch { display: inline-block; position: relative; margin-right: 0.5em;}
.header_top .t_sch { display: inline-block; position: absolute; margin-right: 0.5em;  right: 160px; top: 24px; text-align: right;}
.t_sch .sch_str { width: 135px; height: 30px; background:#fff; border:0; border-radius: 30px; outline: 0; padding: 0 30px 0 10px;
             color:#999; box-sizing: border-box; }
.t_sch .sch_btn { width: 30px; height: 30px; background:#004bc2 url("/images/common/ico_search.png") no-repeat center;
               position:absolute;top:0;right:0; font-size:0; border-radius: 30px; border:0; outline: 0; }

#gnb_mo .t_menu {  right: 0; width:100%; text-align: center; overflow: hidden; }
#gnb_mo .t_menu a { line-height: 3.5em; margin: 0; font-size: 0.95em; width: 50%; float: left; border-bottom:1px solid rgba(255,255,255,0.2); }
#gnb_mo .t_menu a:first-child { border-right:1px solid rgba(255,255,255,0.2); }
#gnb_mo .t_sch { margin: 2em 0 0 0; }
#gnb_mo .t_sch .sch_str { width: 90vw; height: 44px; }
#gnb_mo .t_sch .sch_btn { width: 35px; height: 36px; }

#gnb_pc {width:100%; text-align:center; background-color: #1f62d1;}
#gnb_pc > ul > li {display:inline-block; vertical-align:top; text-align:center; }
#gnb_pc > ul > li > div {display:block; font-size:1.15em; color:#fff; line-height:60px; letter-spacing:-0.08em;  width: 160px; cursor: pointer; }
#gnb_pc > ul > li > div::after { content:''; width:1px; height: 14px; background:rgba(255,255,255,0.2); position: absolute; right:0; top: 50%; margin-top: -7px; }
#gnb_pc > ul > li:first-child > div::before { content:''; width:1px; height: 14px; background:rgba(255,255,255,0.2); position: absolute; left:0; top: 50%; margin-top: -7px; }
#gnb_pc > ul > li > ul { display:none; width:160px; background:rgba(0, 34, 89, 0.9); overflow:hidden; }
#gnb_pc > ul > li > ul > li > a {display:block; width:100%; font-size:0.95em; color:rgba(255,255,255,0.9); padding:12px ; border-bottom:1px solid rgba(255,255,255,0.2); box-sizing: border-box; }
#gnb_pc > ul > li > ul > li:last-child > a {border-bottom:0;}

#gnb_pc > ul > li.wide > div,
#gnb_pc > ul > li.wide > ul { width:280px; }

.menuToggle {display:none; float:right; width:26px; height:19px; position:relative; margin:21px 2% 0 0; cursor:pointer;}
.menuToggle span {display:block; width:100%; height:2px; background:#fff; position:absolute; left:0; transition:all 0.5s}
.menuToggle span.t {top:0;}
.menuToggle span.m {top:50%; margin-top:-1px;}
.menuToggle span.b {bottom:0;}

#gnb_mo {display:none; position:fixed; top:60px; left:0; width:100%; height:100%; background:rgba(0, 34, 89, 1); overflow-y:scroll; padding-bottom:100px; -ms-overflow-style:none;}
#gnb_mo > ul > li > div {display:block; width:100%; font-size:1.05em; color:#fff; line-height:48px; border-bottom:1px solid rgba(255,255,255,0.2); box-sizing:border-box; padding:0 2%; position:relative; cursor: pointer; }
#gnb_mo > ul > li > div:after {content:''; display:block; width:11px; height:1px; background:#fff; position:absolute; right:10px; top:50%; margin-top:-1px;}
#gnb_mo > ul > li > div:before {content:''; display:block; width:1px; height:11px; background:#fff; position:absolute; right:15px; top:50%; margin-top:-6px; transition:all 0.5s;}
#gnb_mo > ul > li > ul {display:none;}
#gnb_mo > ul > li > ul > li > a {display:block; width:100%; font-size:1em; color:#4b4b4b; line-height:45px; padding:0 2%;
                                             border-bottom:1px solid #e1e1e1; background:#f9f9f9; box-sizing:border-box; }

#gnb_mo > ul > li > div.active:before {transform:rotate(90deg)}


#header.mo_on {background:#fff; border-bottom:1px solid rgba(0,0,0,0.1)}
#header.mo_on #logo img.off { display:none; }
#header.mo_on #logo img.on { display:inline-block; }

#header.mo_on .menuToggle span {background:#222;}
#header.mo_on .menuToggle span.t {transform:translateY(8.5px) rotate(45deg)}
#header.mo_on .menuToggle span.m {width:0;}
#header.mo_on .menuToggle span.b {transform:translateY(-8.5px) rotate(-45deg)}

#header.mo_on #gnb_mo {display:block;}

@media screen and (max-width:1780px){
   #gnb_pc > ul > li > div,
   #gnb_pc > ul > li > ul { width:130px; }
   #gnb_pc > ul > li.wide > div,
   #gnb_pc > ul > li.wide > ul { width:250px; }
/*   #header #logo { left: 3%; line-height: 70px }*/
   #header #logo img { height: 35px; }

   .t_sch { margin: 0; }
   .t_sch .sch_str { width: 110px; height: 25px;}
   .t_sch .sch_btn { width: 25px; height: 25px; }
}

@media screen and (max-width:1580px){
   .t_menu { right: calc(2.5% + 50px); }
   .t_menu a { font-size: 0.7em; margin-left: 0.3em; }

   #gnb_pc > ul > li > div,
   #gnb_pc > ul > li > ul { width:110px;  }
   #gnb_pc > ul > li > div { font-size:1.05em; }
   #gnb_pc > ul > li > ul > li > a { font-size:0.9em; }

   #gnb_pc > ul > li.wide > div,
   #gnb_pc > ul > li.wide > ul { width:210px; }
}

@media screen and (max-width:1280px){
	#header { height:60px; }
   #header #logo { line-height: 60px;  left: 3%; transform: translateX(0);top: 0;}
	#header #logo img { height: 30px; }
	#gnb_pc {display:none;}
	.menuToggle {display:block;}
   #allmenu { display: none; }
	.header_top .t_sch{display: none;}
	.header_top .t_menu{display: none;}

    .t_dona{display: none;}
    .t_dona.m{display: block; left: auto; right:70px; top:24px;}
    .t_dona.m .t{padding-top:0; padding-left:7px; padding-right:7px; font-size: 12px; line-height:18px; background: transparent; color: #fff;}
    .mo_on .t_dona.m .t{color: rgba(0, 34, 89, 1);}
}
@media all and (max-width:500px){
    .t_dona.m{right: 55px;}
}

/*footer*/
#footer { background:#232323; overflow: hidden; }
#footer .f-link { padding: 2% 0; border-bottom:1px solid rgba(255,255,255,0.1); overflow: hidden; }
#footer .f-link h1 {  float: left; margin-right: 2em;  }
#footer .f-link ul { float: left; overflow: hidden;  }
#footer .f-link ul li { float: left; margin: 1em 1.5em 0 0; }
#footer .f-link ul.f-sns { float: right; }
#footer .f-link ul.f-sns li { border:1px solid rgba(255,255,255,0.2); border-radius: 100%; margin: 0 0 0 5px;  }
#footer .f-link ul.f-sns li.f-sns-txt {display:inline-block; font-weight:500; height:40px; line-height:40px; border:1px solid rgba(255,255,255,0.2); border-radius:40px; padding:0 20px; margin: 0 0 0 5px; }
#footer .f-link ul.f-sns li.f-sns-txt a { color:#fff; width:100%; height:100%; display:block;}
#footer .f-info { padding: 2% 0 0; }
#footer .f-info ul { overflow: hidden; margin-bottom: 0.5em; }
#footer .f-info ul li { float: left; margin-right: 1em; font-size: 0.93em; color:rgba(255,255,255,0.2); line-height: 1.5em; }
#footer .f-info .copy { font-size: 0.8em; clear: both; color:rgba(255,255,255,0.15); }
#footer .footer_map{margin-top: 30px;}
#footer .footer_map .root_daum_roughmap .wrap_controllers{display: none;}

 .br640 {display:none;}
@media all and (max-width:1235px){
	#footer .f-link ul.f-sns { padding-top:30px;}
}
@media all and (max-width:976px){
   #footer .f-link h1 { max-width: 25%; }
   #footer .f-link h1 img { width: 100%; }
   #footer .f-link ul.f-sns { padding-top:20px;}
   #footer .f-link ul.f-sns li { margin: 10px 0 0 5px;  }
   #footer .f-link ul.f-sns li a img { width: 30px; }
   #footer .f-link ul.f-sns li.f-sns-txt {height:30px; line-height:30px; border-radius:30px; padding:0 15px; margin: 10px 0 0 5px; }
}

@media all and (max-width:640px){
   #footer .f-link { padding: 3% 0; }
   #footer .f-link h1 { margin-right: 1em;  }
   #footer .f-link ul li { margin: 0.5em 1em 0 0; }
   #footer .f-link ul.f-sns { padding-top:10px;}
   #footer .f-link ul.f-sns li { margin: 5px 0 0 5px;  }
   #footer .f-link ul.f-sns li a img { width: 26px; }
   #footer .f-link ul.f-sns li.f-sns-txt {height:26px; line-height:26px; border-radius:26px; padding:0 13px;  margin:0 0 0 5px;  }
}

@media all and (max-width:568px){
   #footer .f-link { padding: 5% 0 2%; }
   #footer .f-link h1 { width: 100%; max-width: 100%; clear: both; }
   #footer .f-link h1 img { max-width: 45%; }
   #footer .f-link ul li { margin: 1em 1em 0 0; }
   #footer .f-link ul.f-sns { float: left; }
   #footer .f-info { padding: 4% 0 7%; }

   .br640 {display:block;}
}

/* quick */
.quick{position: fixed; right: 0; top: 50%; transform: translateY(-50%); border: 1px solid #eaeaea; width: 80px; display: flex; flex-direction: column; justify-content: space-between;background-color: #fff; border-right: 0;}
.quick img{max-width: 22px;}
.quick .q{border-bottom: 1px solid #f5f5f5;}
.quick .q:nth-child(5){border-bottom: 0;}
.quick .q a{display: flex; flex-direction: column; justify-content: center; align-items: center;padding: 1em 0;}
.quick .q p{margin-top: 0.25em;}

@media all and (max-width:1440px){
    .quick{display: none;}
}


/* 220428 추가분 */
.gnb{
	display: flex; justify-content: center;
background: transparent;
position: relative; margin-top: 85px;}
.gnb.on{background: rgba(32, 115, 248, 0.01) url(/images/main/mvBG.png) no-repeat center center; padding-bottom: 25px;}

/*.gnb::before{content: ''; display: block; width: 100%; height: 90px; background-color: transparent; position: absolute; top: 0; left: 0;}*/
#gnb_pc > ul > li{display: block;}
#gnb_pc > ul > li > div{font-size: 1.3em;padding: 0 30px; min-width: 190px; width: auto;}
#gnb_pc > ul > li > .smenu.on{display: flex; position: absolute; left: 0; width: 100%; justify-content: center; gap:0 30px; background-color: #1b54b2; min-width: 100%; max-width: 100%;}
#gnb_pc > ul > li.wide > div, #gnb_pc > ul > li.wide > ul{width: auto;}
#gnb_pc > ul > li > ul{background: transparent; width: auto;}
#gnb_pc > ul > li > ul > li > a{border-bottom: 0; font-size: 1.15em; padding: 14px 0; transition: .2s ease;}
#gnb_pc > ul > li > ul > li > a:hover{text-decoration: underline; text-underline-position: under; color: rgba(255,255,255,1);}
#header #logo{z-index: 2;}
.t_menu{z-index: 2; right: 30px;}
.header_top .t_menu{z-index: 2; right: 30px; top: 0;}
.t_menu a{font-size: 1em;}
.t_sch .sch_str{width: 145px; height: 40px;}
.t_sch .sch_btn{top: 5px; right: 5px;}

@media all and (max-width:1279px){
	.gnb{display: block; margin-top: 0;}
}