@charset "utf-8";
@import './font.css';
/* @import url('https://fonts.googleapis.com/css?family=Titillium+Web:200,400,600&display=swap'); */

/* layout */
body, table, th, td, button, select, input {
	font-family:'NotoKR', "나눔고딕", NanumGothic, "Nanum Gothic","돋움", Dotum, Arial, sans-serif;
	font-size:13px;
	color:#666;
}

body { background-color:#fff; overflow: hidden;}
#wrap {width:100%; min-width:320px; position:relative; overflow-x: hidden; overflow-y: auto;} /* min-width 홈페이지 컨텐츠 가로값에 맞게 변경 */

/* ****************** 공통클래스 ********************** */
.area{ max-width:1600px; margin:0px auto; padding: 0 10px;} /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.area-box { max-width:1500px; margin:0px auto; padding: 0 10px;}
.clearfix{*zoom:1;}
.clearfix:after{clear:both; display:block; content:"";}

.font-titil {font-family: 'Titillium Web', sans-serif;}

/* ****************** HEADER ********************** */
#wrap_header {height :90px; width: 100%; -webkit-transition:top 0.4s;-moz-transition:top 0.4s;-o-transition:top 0.4s;-ms-transition:top 0.4s;transition:top 0.4s; border-bottom: 1px solid #EBEBEB; z-index: 100; background: #fff;}
.header-wrap {position:fixed; height:90px; width: 100%;  z-index: 1000; background: #fff; border-bottom: 1px solid #ededed;}
.header-inner {position: relative; height: 100%;}

.logo {float: left; margin-top: 15px; position: relative; z-index: 100;}
.gnb-wrap {float: right; }

/* -------- Header :: GNB(PC) -------- */
.gnb-overlay-bg{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:97;}	/* gnb overlay BG */
#gnbBg{display:none; position:absolute; height: 280px; left:0; top:89px; width:100%; background:#fff url("/mbshome/mbs/afp/images/layout/gnb_bg.jpg") no-repeat left bottom; z-index:98; border-top: 1px solid #EDEDED;}	/* gnb 2depth BG */
#gnbBg::before {content: ""; position: absolute; width: 100%; height: 1px; background-color: #ededed; left: 0px; bottom: 0; z-index: 1;}
#gnbBg.active {height: 250px;}

.gnb-inner {}
.sitemap {position: absolute; z-index: 100; right: 0; width: 50px; height: 50px; background: url("/mbshome/mbs/afp/images/button/btn_gnb.png") no-repeat; top: 22px;}

#gnb{position:absolute; top:0; right:0; z-index:99; width: 100%; height: 100%; text-align: right;}
#gnb > ul {width: 100%; max-width: 1080px; display: inline-block; margin-right: 50px;}
#gnb > ul > li{position:relative; float:left;}
#gnb > ul > li > a{position:relative; z-index:100; display:block; height:90px; line-height:90px; text-align:center; color:#313131; font-size:18px; letter-spacing:-0.5px; font-weight:400; -webkit-transition:font-size 0.4s;-moz-transition:font-size 0.4s;-o-transition:font-size 0.4s;-ms-transition:font-size 0.4s;transition:font-size 0.4s; padding: 0 55px;}
#gnb > ul > li:first-child > a::before {background: none;}
#gnb > ul > li > a:hover {text-decoration: underline;}


.gnb-2dep {display: none; position: absolute; z-index: 100; width: 100%; height:280px; box-sizing: border-box; border-right: 1px solid #EDEDED; padding-top: 20px; background-color: #fff; border-bottom: 1px solid #ededed;}
.gnb-2dep::after {content: ""; position: absolute; left: 50%; top: 0; width: 0; height: 3px; background-color: #0046A5; transition: all 0.3s;}
#gnb > ul > li:first-child .gnb-2dep {border-left: 1px solid #EDEDED;}
.gnb-2dep > ul > li > a {display: block; text-align: center; font-size: 17px; line-height: 40px; color: #626262; word-break: keep-all;}
.gnb-2dep > ul > li.long > a {line-height: 28px; margin: 5px 0;}

.gnb-2dep > ul > li.on > a {font-weight: 500; color: #0070FF;}

@media all and (min-width:1221px){
	.gnb-2dep:hover {background-color: #F2F2F2;}
	.gnb-2dep:hover::after {left: 0; width: 100%;}
}

.gnb-2dep > ul > li > a:hover {text-decoration: underline;}

.gnb-3dep {display: none;}

.m-gnb, .gnb-sitemap {display: none;}

@media all and (max-width:1400px){
	#gnb > ul {max-width: 880px;}
	#gnb > ul > li > a {padding: 0 35px;}
}
/* tablet */
@media all and (max-width: 1220px){
	 #wrap_header {height: 70px;}
	 .header-wrap {height: 70px;}

	 .sitemap {display: none;}

	 .gnb-sitemap {position: relative; display: block; margin-top: 20px; margin-left: 15px; width: 115px; height: 30px; line-height: 30px; text-align: center; border-radius: 15px; background-color: #878787; font-size: 16px; font-weight: 500; color: #fff; z-index: 100;}
	 .gnb-sitemap:hover {text-decoration: underline; color: #fff;}

	 .gnb-bg {display: none; position: fixed; left: 0; top: 0; z-index: 90; background-color: rgba(0, 0, 0, 0.4); width: 100%; height: 100%;}
	 .gnb-bg.open {display: block;}

	 .logo {margin-top: 14px; margin-left: 20px; z-index: 80;}
	 .logo img {height: 40px;}

	 .m-gnb {display: block; position: absolute; z-index: 1000; right: 30px; top: 15px; width:38px; height: 38px; cursor: pointer; background:url("/mbshome/mbs/afp/images/button/btn_gnb.png") no-repeat center; border: 1px solid #878787; }

	 .gnb-wrap {right: -110%; transition: all 0.5s; background-color: #fff; position: fixed; top: 0; height: 100%; margin-top: 0; z-index: 999;}
	 .gnb-wrap::after {content: ""; position: absolute; width: 140px; height: 100%; background:url("/mbshome/mbs/afp/images/layout/gnb_menu_bg.jpg"); left: 0; top: 80px;}
	 .gnb-wrap.open {height: 100%; right: 0; top: 0; max-width: 470px;  width: 100%;}

	 .m-gnb.open {background:url("/mbshome/mbs/afp/images/layout/gnb_close.png") no-repeat center; border: none;}

	 #gnb {bottom: auto; top: 0;}
	 #gnb > ul {margin-top: 70px; padding: 0; border-top: 1px solid #DBDBDB;}
	 #gnb > ul > li {float: none; display: block; width: 140px; background:url("/mbshome/mbs/afp/images/layout/gnb_menu_bg.jpg"); position: static;}
	 #gnb > ul > li > a::before {display: none;}
	 #gnb > ul > li > a {font-size: 18px; color: #fff; height: 55px; line-height: 55px; border-top: 1px solid rgba(255, 255, 255, 0.4); padding: 0; }

	 #gnb > ul > li.active > a {background-color: #fff; color: #454545;}
	 #gnb > ul > li.active .gnb-2dep {display: block !important; width: calc(100% - 140px); border:0; right: 0; top: 90px; height: 100%; padding: 0 30px 0 15px; box-sizing: border-box; }

	 #gnb > ul > li.active .gnb-2dep > ul > li > a {display: block; text-align: left; padding: 10px 15px; font-size: 16px; line-height: 20px; color: #4e4e4e; border: 1px solid #D9D9D9; margin-bottom: 10px; background-color: #F9F9F9;}

	#gnb > ul > li.active .gnb-3dep {display: block; padding: 5px 30px 10px 15px;}
	#gnb > ul > li.active .gnb-3dep > ul > li > a {display: block; text-align: left; font-size: 14px; line-height: 30px; color: #6a6a6a;}
	#gnb > ul > li.active .gnb-3dep > ul > li > a::before {content: "-"; position: relative; top: -3px; display: inline-block; vertical-align: middle; margin-right: 3px;}

}
@media all and (max-width:420px){
	/* mobile */
	.logo {margin-left: 0;}

	.gnb-wrap {right: -110%; transition: all 0.5s; background-color: #fff; position: fixed; top: 0; width: 100%; height: 100%; margin-top: 0; z-index: 999;}
	.gnb-wrap::after {content: ""; position: absolute; width: 140px; height: 100%; background-color: #063F96; left: 0; top: 80px;}
	.gnb-wrap.open {height: 100%; right: 0; top: 0;}

	.m-gnb {right: 10px;}

}
/* ****************** FOOTER ********************** */
#wrap_footer {background-color: #11151C; position: relative; padding: 25px 0 55px;}

.footer-left {float: left; width: 54%;}
.footer-left address {font-size: 12px; line-height: 20px; color: rgba(194, 194, 194, 0.59); font-weight: 300; word-break: keep-all;}
.footer-left address span {margin-left: 10px;}

.footer-right {float: right; width: 44%; max-width: 304px;}
#wrap_footer .footer-link {}
#wrap_footer .footer-link select {float: left; width: 244px; height: 39px; border: 1px solid #666666; -webkit-appearance: none;  -moz-appearance: none; appearance: none; background:url("../images/button/btn_select_arrow.png") no-repeat 90% center; padding-left: 15px; font-size: 14px; color: #fff; font-weight: 100;}
#wrap_footer .footer-link select option {color: #111;}
#wrap_footer .footer-link button {float: left; width: 60px; height: 39px; background-color: #666666; font-size: 14px; color: #fff; line-height: 35px; font-weight: 300;}
#wrap_footer .footer-link select::-ms-expand {
    display: none;
}

@media all and (max-width: 1220px){
	#wrap_footer {padding: 25px 30px 55px;}
}

@media all and (max-width: 860px){
	#wrap_footer .footer-link select {width: calc(100% - 60px);}
}

@media all and (max-width: 630px){
	.footer-left {float: none; width: 100%; text-align: center; margin-top: 30px;}

	.footer-right {float: none; width: 100%; max-width: none;}
}

@media all and (max-width: 420px){
	#wrap_footer {padding: 25px 10px 55px;}
}

/*20221213_FQA*/
.arrow-txt ul{
    margin-left: 30px;
    padding-left: 15px;
}

.arrow-txt li{
position: relative;
padding-left: 15px;
}

.arrow-txt ul li::before{
 content: "";
 position: absolute;
 width: 6px;
 height: 2px;
 background-color: #C4C4C4;
 left: 0;
 top: 14px;
}

.arrow-txt li{
    line-height: 30px;
    font-size: 17px;
}

.arrow-txt .text_point1{
color: #333 !important;
}

.arrow-txt .text_link{
color: #3974DB;
text-decoration: underline;
}

.arrow-txt .text_point2, .sub-second .text_point2{
 margin-left: 30px !important;
 padding-left: 15px !important;
 color: #b90a0a !important;
}

.sub-second .text_point3{
 margin-left: 30px;
 padding-left: 15px;
 color: #3974DB;
}

.arrow-txt span.text_point4{
color: #3974DB;
}

.sub-second .table_point{
 font-size: 16px;
 color: #333333;
 background-color: #F9F9F9;
}

.table_point2{
 color: #b90a0a !important;
}

.text_wrap{
 font-size: 17px;
 margin-left: 30px;
 padding-left: 35px;
 margin-bottom: 50px;
}

.text_wrap li{
 line-height: 30px;
 position: relative;
 padding-left: 15px;
}

.text_wrap li::before{
 content: "";
 position: absolute;
 width: 6px;
 height: 2px;
 background-color: #C4C4C4;
 left: 0;
 top: 14px;
}

.text_point5{
margin-top: 20px !important;
}

.text_point6{
margin-bottom: -5px !important;
}


/*20221215_인쇄자료실*/
.sub-first{
overflow: hidden;
}

.sub-first .sub_1{
margin-top: -20px !important;
}

.sub_wrap{
margin-top: 30px;
}

.sub_1 p{
padding-left: 18px;
}

.sub_wrap figure{
margin-top: 50px;
}

.sub_wrap > img{
max-width: 100%;
margin-left: -35px;
}

.sub_wrap figure ul li{
/*display: flex;
justify-content: center;
flex-wrap: wrap;*/
width: 49%; 
float: left;
text-align: center;
}

.sub_wrap figure ul li:nth-child(1), .sub_wrap figure ul li:nth-child(3){
margin-right: 20px;
}

.sub_wrap figure ul li:nth-child(3), .sub_wrap figure ul li:nth-child(4){
margin-top: 100px;
}

.sub_wrap figure ul li img{
max-width: 100% !important;
}

.circle-txt::before{
display: none;
}

span.2-5_img_wrap{
display: block;
margin-left: -35px;
}

.sub_wrap .2-5_img{
margin-left: -35px;
}


@media all and (max-width:1085px){
.sub_wrap figure ul li{
/*display: flex;
justify-content: center;
flex-wrap: wrap;*/
width: 48%; 
float: left;
}

.sub_wrap figure ul li:nth-child(1), .sub_wrap figure ul li:nth-child(3){
margin-right: 20px;
}

.sub_wrap figure ul li:nth-child(3), .sub_wrap figure ul li:nth-child(4){
margin-top: 100px;
}

.sub_wrap figure ul li img{
max-width: 100% !important;
}

.circle-txt::before{
display: none;
}

span.2-5_img_wrap{
display: block;
margin-left: -35px;
}
}


@media all and (max-width:767px){
/* 20221215_인쇄자료실 */
	.sub_wrap figure ul li{width: auto; margin-top: 50px; float: none;}
	.sub_wrap figure ul li:nth-child(1){margin-top: 0;}
	.sub_wrap figure ul li:nth-child(3), .sub_wrap figure ul li:nth-child(4){margin-top: 50px;}
	.sub_wrap figure ul li:nth-child(1), .sub_wrap figure ul li:nth-child(3){margin-right: 0;}
     span.2-5_img_wrap{margin-left: 0;}
    .sub_wrap img{max-width: 100%;}

}


