@charset "utf-8";


/* MOBILE */
#m-nav { position:fixed; left:calc(-90% - 40px); top:0; height:100%; width:90%; background:#fff;  transition:all 0.3s ease; -webkit-transition:all 0.3s ease; z-index:999999;}
#m-nav .etc { *padding-top:50px; overflow:hidden; }
#m-nav .etc a { display:block; float:left; width:33.3%; border-top:1px solid #444; border-bottom:1px solid #444; border-left:1px solid #444; text-align:center; font-size:15px; color:#fff; background:#333; padding:8px 0; }
#m-nav .etc a:first-child { border-left:0;  }
#m-nav> div > h1 { display:block;text-align:center; margin:50px 0}
#m-nav .nav > div > h2 { line-height: 2em; }
#m-nav .nav > div > h2 > a { display:block; font-size:18px;  color:#333; font-weight:600; padding:15px 0 15px 20px; border-bottom:1px solid #ccc; background:url(/images/common/ico_m_nav_plus.png) no-repeat 95% 50%; }
#m-nav .nav ul { display:none; border-bottom:1px solid #ccc; }
#m-nav .nav ul > li > a { display:block; font-size:15px; color:#ccc; padding:10px; }
#m-nav .nav ul > li:first-child > a {padding-top:20px }
#m-nav .nav ul > li:last-child > a {padding-bottom:20px }
#m-nav .nav > div.active ul { background:#f2f2f2; }
#m-nav .nav > div.active ul > li > a{ color:#333; padding-left:20px }
#m-nav .nav > div.active h2 a { background-color:#666; font-weight:600; font-size:18px; background-image: url(/images/common/ico_m_nav_minus.png); color:#fff; }
#m-nav .btn-close { position:absolute; right:-40px; top:0px; background:#000 url(/images/common/btn_close.png) no-repeat 0; background-size: cover; width:40px; height:40px; }
.bg-gnb { display:none; position:fixed; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,0.7); z-index:601;}

/* Mobile Active */
body.fixed  { overflow:hidden !important; }
body.fixed #m-nav { left:0; }
body.fixed .bg-gnb { display:block; }

/*사이트 공통*/
/* header 헤더 */
#header{width:100%; padding:0 0;font-size:20px; min-height: 35px;margin: 0 auto;z-index: 9; }

.over_logo {position: absolute;    left: 0;    top: 0;    padding: 25px 95px 50px 95px;    background: #fff;    width: 320px;    height: 180px;    z-index: 99;}
.over_logo.over_in {display:none;}

#logo_img {}

#header.headerin{ background-color:#fff; color:#000;}
#header.headerin #top #navi ul.topngb li a {color:#000;}

#header.subpage{background: #fff; color: #333; }
#header.subpage #top #navi > ul.topngb > li a{color:#333;}

#header #top { max-width: 100%; width:100%; vertical-align: middle; position:relative; border-bottom:1px solid #e0e0e0}
#header #top .top_notice{ width: 100%; background:#063c7a; font-weight:200; font-size:0.9em }
#header #top .top_notice > div{ max-width: 1200px; display:flex; justify-content:center; color:#fff; font-size:0.8em; margin:0 auto; padding:5px 0; text-align:center; position:relative; line-height:1.3em}
#header #top .top_notice > div > div:first-child{padding-right:10px}
#header #top .top_notice > div > div:nth-child(3){position:absolute; right:0; top:10px}
#header #top > div.topntop{padding:20px 30px; border-bottom:1px solid #e0e0e0;position:relative}
#header #top > div.topntop #menu_Open {position:absolute; right:10px; bottom:20px; z-index:999999;width:45px; height:30px; display:none}

 #header #top > div.topntop > ul{width:100%; display:flex; align-items:center}
 #header #top > div.topntop > ul > li:nth-child(1){width:320px;}
 #header #top > div.topntop > ul > li:nth-child(3){width:320px; text-align:right; }
 #header #top > div.topntop > ul > li:nth-child(2){width:calc(100% - 620px); text-align:center}
  #header #top > div.topntop > ul > li:nth-child(3) > a{display:inline-block; color:#fff; background:#00a0a1;  width:218px; height:64px;line-height:64px; border-radius:10px; text-align:center}
 
#header #top > #navi > ul{margin:0 auto; max-width:1200px; display:flex; justify-content:space-between;  letter-spacing:-1px; color:#666 }
#header #top > #navi > ul > li{width:200px; text-align:center}
#header #top > #navi > ul > li > a{display:block; font-size:20px; padding:20px 40px;color:#666}
#header #top > #navi > ul > li > a:hover{background:#d3dfed;color:#063c7a; }
#header #top > #navi > ul > li:nth-child(7) > a{color:#fff;background:#063c7a }
#header #top > #navi:after{clear:both; display:block; content:'';}
#header #top h1 { position: absolute; top:20px; left: 0; right:0;}

@media(max-width:1200px){
	#header { height: auto;}
	#header h1 > a{display:inline-block; padding-top:5px}
	#header #top > #navi{ display:none !important}
#header #top > div.topntop{position:relative;}
#header #top > div.topntop #menu_Open { display:block;position:absolute; right:10px; bottom:30px; }
 #header #top > div.topntop > ul{width:100%; display:flex; flex-wrap:wrap; justify-content:center;align-items:center}
 #header #top > div.topntop > ul > li:nth-child(1){width:50%; text-align:right;}
 #header #top > div.topntop > ul > li:nth-child(3){width:50%; padding-left:20px;text-align:left; font-size:16px }
 #header #top > div.topntop > ul > li:nth-child(2){width:100%; text-align:center; order:-1; padding:0 10px 20px 10px}
  #header #top > div.topntop > ul > li:nth-child(3) > a{display:inline-block; color:#fff; background:#00a0a1;  width:100px; height:30px;line-height:30px; border-radius:5px; text-align:center}


#header #top .top_notice > div > div:first-child{width:80px; padding-left:5px; padding-right:5px}
#header #top > div.topntop > ul > li:nth-child(2){width:100%; text-align:center}
#header #top .top_notice > div > div:nth-child(3){position:relative; right:auto; top:auto;padding-right:5px;width:80px}


}


/*media*/
@media (max-width:1200px) {
	
	#m-nav{display:block;}
	
	
	br { display:none; } 
 	br.enter { display:block; } 

}


@media (max-width:840px) {	
#header{ padding: 0 !important;}
#header #top { margin-top: 0px; }


}




/*subContent*/
div.subContent{width:100%; font-size:1.2em; color:#494949; line-height:1.5em; font-weight:400;word-break:keep-all;}

div.subContent h3{display:inline-block; font-size: 1.4em;padding-bottom:30px; text-align:center; font-weight: 600 !important; color:#000;  text-align:left }
div.subContent h3:before{display:inline-block; width:4px; height:32px; margin:10px 10px 0 0; content:""; background:#063c7a }
div.subContent h3 + p{color:#063c7a; padding-bottom:30px}
div.subContent_in {max-width:1200px;  margin:0 auto; padding:80px 0; }



@media (max-width:1200px) {
	div.subContent_in {padding:40px 0px; }
}


@media (max-width:840px) {
	div.subContent{width:100%; font-size:16px !important; line-height:1.2em; margin-bottom:50px; padding:0 important;  }
	div.subContent_in {padding:40px 10px 20px 10px; }
	div.subContent h3{padding-bottom:10px; }
	div.subContent h3:before{display:inline-block; width:4px; height:22px; margin:10px 10px 0 0; content:""; background:#063c7a }
}


/* footer 시작 { */

#footer {width:100%; display:block; position:relative; background-color:#2d2d2e; color:#ccc; font-size:0.75em; line-height:1.4em}
#footer > div {max-width:1200px; width:100%; margin:0 auto;padding: 50px 10px;}
#footer > div > ul{display:flex; margin:0px 0 30px 0px; }
#footer > div > ul > li > a{display:block; padding-right:20px; color:#ccc}

@media (max-width: 1200px) {
#footer > div { padding: 20px 10px; }
}
@media (max-width: 840px) {
#footer {font-size:14px; line-height:1.5em; display:block}


}

/* footer  끝  }*/
div#side_btn.active{    right: -110px;}
div#side_btn {
    position: fixed;
    right: 0px;
    width: 141px;
    top: 0;
    bottom: 0;
    transform: translateY(35%);
    z-index: 9;
    -webkit-transition: right 1s ease-out;
    -moz-transition: right 1s ease-out;
    -o-transition: right 1s ease-out;
    transition: right 1s ease-out;
}

#side_btn .onoff_bar {
    width: 30px;
}
#side_btn div {
    display: flex;
    width: auto;
    float: left;
}
#side_btn div {
    display: flex;
    width: auto;
    float: left;
}

#side_btn ul {
    display: block;
    width: 110px;
    float: right;
}

#side_btn ul li {
    display: block;
    width: 110px;
    color: #fff;
    border-bottom: 1px solid #007fa4;
}
#side_btn div a {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
}

#side_btn div:after {
    clear: both;
    display: block;
    content: '';
}
.btn_bar > ul{border:1px solid #ccc}
.btn_bar > ul > li{border-bottom:1px solid #ccc; text-align:center}
.btn_bar > ul > li > a{display:block;color:#fff; padding:70px 10px 10px 10px;font-size:0.9em; line-height:1.2em}
.btn_bar > ul > li:nth-child(4) > a{padding:50px 0px 0px 0px;}
.btn_bar > ul > li:nth-child(1) > a{background:#19a44d  url('/images/main/02_ico-01.png') no-repeat center 10px;}
.btn_bar > ul > li:nth-child(2) > a{background:#214d89  url('/images/main/02_ico-02.png') no-repeat center 10px;}
.btn_bar > ul > li:nth-child(3) > a{background:#f7de00  url('/images/main/02_ico-03.png') no-repeat center 10px; color:#3b1c1c}
.btn_bar > ul > li:nth-child(4) > a{background:#464646  url('/images/main/02_ico-04.png') no-repeat center 5px;}

@media (max-width: 640px) {
div#side_btn.active{    right: -110px;}
div#side_btn { z-index:999999999999;
    position: fixed;
    right: 0px;
    width: 105px;
    top: 0;
    bottom: 0;
    transform: translateY(60%);
    z-index: 9;
    -webkit-transition: right 1s ease-out;
    -moz-transition: right 1s ease-out;
    -o-transition: right 1s ease-out;
    transition: right 1s ease-out;
}

#side_btn .onoff_bar {
    width: 30px;
}
#side_btn div {
    display: flex;
    width: auto;
    float: left;
}
#side_btn div {
    display: flex;
    width: auto;
    float: left;
}

#side_btn ul {
    display: block;
    width: 75px;
    float: right;
}

#side_btn ul li {
    display: block;
    width: 75px;
    color: #fff;
    border-bottom: 1px solid #007fa4;
}
#side_btn div a {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
}

#side_btn div:after {
    clear: both;
    display: block;
    content: '';
}


.btn_bar > ul > li > a{padding:50px 10px 10px 10px;font-size:0.8em; }
.btn_bar > ul > li:nth-child(4) > a{padding:30px 0px 0px 0px;}
.btn_bar > ul > li:nth-child(1) > a{background:#19a44d  url('/images/main/02_ico-01.png') no-repeat center 5px; background-size:40px}
.btn_bar > ul > li:nth-child(2) > a{background:#214d89  url('/images/main/02_ico-02.png') no-repeat center 5px; background-size:40px}
.btn_bar > ul > li:nth-child(3) > a{background:#f7de00  url('/images/main/02_ico-03.png') no-repeat center 5px; background-size:40px}
.btn_bar > ul > li:nth-child(4) > a{background:#464646  url('/images/main/02_ico-04.png') no-repeat center 0px; background-size:40px}



}