@charset "utf-8";
/* CSS Document */



/**************************************************
	PC, 테블릿 가로 ( 769px 이상 해상도 )
**************************************************/

section.gnb-list, .sitemap article, .copyright, nav#subgnb .sub { margin: 0 auto; max-width: 1160px; overflow: hidden; }
/* Header */
header#m-gnb { display: none; }
header#gnb { position: relative; z-index: 99; }
header#gnb h1.logo { float: left; width: 137px; }
header#gnb h1.logo a { padding: 18px 10px; }
header#gnb ul.menu { display: table; float: right; height: 100px; width: 60%; }
header#gnb ul.menu > li { display: table-cell; text-align: center; vertical-align: middle; width: 21%; *width:20%; *padding:40px 0; *float:left}
header#gnb ul.menu > li > a { color: #000e23; font-size: 1.375rem; font-weight: 400; }
nav#subgnb { animation: gnbslide 0.5s; background: #f5f5f5; background: rgb(255 255 255 / 0.9); display: none; height: 300px; left: 0; position: absolute; top: 100%; webkit-animation: gnbslide 0.5s; width: 100%; }
nav#subgnb h2 { color: transparent; float: left; }
nav#subgnb .sub-list { display: table; float: right; padding-top: 20px; width: 60%; }
nav#subgnb .sub-list ul { display: table-cell; text-align: center; width: 21%; *width:20%; *float:left}
nav#subgnb .sub-list ul li { margin-top: 20px; }
nav#subgnb .sub-list ul li a { animation: fadeEffect 1.5s; color: #000e23; font-size: 1.0625rem; font-weight: 400; line-height: 1.4rem; webkit-animation: fadeEffect 1.5s; }
nav#subgnb .sub-list ul li a br { display: none; }
nav#subgnb .sub-list ul li a:hover { color: #2172ba; }
nav#subgnb button.close_nav { animation: fadeEffect 1.5s; bottom: 8px; padding: 10px; position: absolute; right: 5px; webkit-animation: fadeEffect 1.5s; width: 45px; }

/* Footer */
footer { background: #363636; margin-top: 120px; }
footer .sitemap { background: #5e5e5e; padding: 60px 0 40px; }
footer .sitemap li { float: left; margin-left: 6%; }
footer .sitemap li:first-child { margin-left: 0; }
footer .sitemap li dl{overflow:hidden}
footer .sitemap li dl * { color: #cecece; font-size: 1.0625rem; }
footer .sitemap li dt { float: left; font-weight: 500; margin-right: 20px; width: 92px; }
footer .sitemap li dt:after {content: '|';font-size: 1rem;margin-left: 7px;vertical-align: top;}
footer .sitemap li dd {float: left;}
footer .sitemap li dd a { margin-bottom: 20px; }
footer .sitemap li dd a:hover { text-decoration: underline; }
footer .sitemap ul { overflow: hidden; }
footer .sitemap article { margin: 0 auto; width: 90%; }
footer .copyright { padding: 70px 0 80px; width: 90%; }
footer .copyright * { color: #d6d6d6; font-size: 1.0625rem; }
footer .copyright h1, footer .copyright address { font-weight: 400; }
footer .copyright address { line-height: 1.8rem; margin: 16px 0 26px; }
footer .copyright ul { overflow: hidden; }
footer .copyright ul li { float: left; }
footer .copyright ul li:before { content: '|'; display: inline-block; margin: 0 10px; }
footer .copyright ul li:first-child:before { display: none; }
footer .copyright ul li a { display: inline-block; }

/* Sub */
#container .visual-wrap, #container .directory-wrap, #container .tit-box { display: table; margin: 0 auto; max-width: 1280px; padding-left: 6%; width: 100%; }
#container .visual-wrap {height: 339px;}
#container .visual-wrap h1.visual-txt { color: #fff; display: table-cell; font-size: 1.875rem; vertical-align: middle; }
#container .visual-wrap h1.visual-txt br{display:none}
#container .visual-wrap h1.visual-txt span { color: #fff; display: block; font-size: 3.125rem; font-weight: 500; margin-bottom: 30px; }
#container .directory { background: #ebebeb; margin-bottom: 68px; padding: 16px 0; }
#container .directory a { color: #000; float: left; font-size: 1.25rem; }
#container .directory a.active, #container .directory a:hover { color: #004a92; }
#container .directory span { display: inline-block; float: left; margin: 0 10px; width: 7px; }
#content .tit-box { height: 205px; }
#content .tit-box .tit-wrap { display: table-cell; vertical-align: middle; }
#content .tit-box .tit-wrap h1 { color: #000; font-size: 1.875rem; font-weight: 500; margin-bottom: 18px; }
#content .tit-box .tit-wrap p { color: #333; font-size: 1.25rem; line-height: 2.0625rem; }
#content-wrap {margin: 0 auto;max-width: 1280px;width: 90%;}
#content-wrap * { color: #666; font-size: 0.9375rem; line-height: 1.5rem; }
#content-wrap .con-box { margin-top: 80px; }
#content-wrap h1.b-tit {font-weight: bold;color: #2172ba !important;font-size: 1.875rem !important;margin-bottom: 26px;}
#content-wrap h2.tit {color: #333 !important;font-size: 1.5rem !important;font-weight: bold;margin-bottom: 16px;}
#content-wrap .cont, #content-wrap table {margin-top: 30px;}

/* PC ( 1160px 이하 해상도 )  */
@media screen and (min-width:769px) and (max-width:1159px) { 	
/* Header */
header#gnb ul.menu, nav#subgnb .sub-list { width: 70%; }
nav#subgnb { height: 330px; }
nav#subgnb .sub-list ul li a br { display: block; }
/* Footer */
footer .sitemap { padding: 40px 0; }
footer .sitemap ul { display: table; width: 100%; }
footer .sitemap li { display: table-cell; float: none; width: 25%; }
footer .sitemap li:first-child +li { width: 36%; }
footer .sitemap li dt:before { content: '|'; font-size: 1rem; margin-right: 7px; vertical-align: top; }
footer .sitemap li dt:after { display: none; }
footer .sitemap li dt { float: none; margin-bottom: 20px; margin-right: 20px; margin-top: 30px; }
footer .sitemap li dd { float: none; margin-left: 12px; }
}



/**************************************************
	Tablet / Mobile ( 768px 이하 해상도 )
**************************************************/

@media screen and (max-width: 768px){
/* Header */
header#gnb { display: none; }
header#m-gnb { background: #fff; box-shadow: 0 0 20px 0px rgba(0,0,0,.1); display: block; position: fixed; webkit-box-shadow: 0 0 20px 0px rgba(0,0,0,.1); width: 100%; z-index: 99; }
header#m-gnb h1.logo { float: left; max-width: 108px; min-width: 84px; width: 22.5%; }
header#m-gnb h1.logo a { padding: 12% 15%; }
header#m-gnb button.gnb-btn, nav#m-gnb-open .close-btn { float: right; max-width: 64px; min-width: 49px; width: 30%; }
header#m-gnb button.gnb-btn span, nav#m-gnb-open .close-btn span { display: block; padding: 32% 25%; }
nav#m-gnb-open { background: rgb(0 0 0 / 0.6); display: none; height: 100vh; position: absolute; right: 0; top: 0; width: 100%; }
nav#m-gnb-open .m-gnb-inner { animation: mgnbslide 1s; background: #fff; float: right; height: 100vh; webkit-animation: mgnbslide 1s; width: 85%; }
nav#m-gnb-open .top { overflow: hidden; }
nav#m-gnb-open ul.menu { padding: 0px 30px; }
nav#m-gnb-open ul.menu li.depth { border-bottom: 1px solid #F2F2F2; }
nav#m-gnb-open ul.menu li.depth ul.sub-depth { display: none; padding: 15px 10px; }
nav#m-gnb-open ul.menu li.depth.active ul.sub-depth{display:block;}
nav#m-gnb-open ul.menu li.depth.open > a, nav#m-gnb-open ul.menu li.depth > ul.sub-depth li a:hover { color: #2172BA; }
nav#m-gnb-open ul.menu li.depth.open > a { background: url(../images/cmmn/menu-arr-on.png) no-repeat right center; border-bottom: 1px solid #2172BA; }
nav#m-gnb-open ul.menu li.depth > a { background: url(../images/cmmn/menu-arr.png) no-repeat right center; color: #2C2C2C; font-size: 1.25rem; font-weight: 400; padding: 20px 0; }
nav#m-gnb-open ul.menu li.depth > ul.sub-depth li a { color: #2C2C2C; font-size: 0.9375rem; font-weight: 400;padding: 10px 0; }

/* Footer */
footer { margin-top: 60px; }
footer .sitemap { padding: 14px 0 15px; }
footer .sitemap article { max-width: 94% !important; }
footer .sitemap ul { display: table; width: 100%; }
footer .sitemap li { display: table-cell; float: none; margin: 0; position: relative; text-align: center; width: 25%; }
footer .sitemap dl { display: inline-block; }
footer .sitemap li dt { float: none; font-size: 0.8125rem; font-weight: 400; margin: 0; width: 100%; }
footer .sitemap li dt:after { font-weight: bold; position: absolute; right: -2px; }
footer .sitemap li dd, footer .sitemap li:last-child dt:after, footer .copyright ul { display: none; }
footer .copyright { padding: 37px 0 38px; }
footer .copyright h1, footer .copyright address { display: inline; }
footer .copyright address { line-height: 1.25rem; }
footer .copyright * { font-size: 0.6875rem; }

/* Sub */
#container .visual-wrap, #container .directory-wrap, #container .tit-wrap{max-width:375px;padding-left: 0;width:85%;margin: 0 auto; transition: all 0.3s 0s ease-in-out;}
#container .visual-wrap{height: 224px;padding-top: 52px;}
#container .visual-wrap h1.visual-txt{font-size:0.8125rem;vertical-align: top;padding-top: 10%;line-height: 1.25rem;}
#container .visual-wrap h1.visual-txt br{display:block;}
#container .visual-wrap h1.visual-txt span{font-size:1.25rem;margin-bottom: 8px;font-weight: bold;}
#container .directory a:first-of-type{color:transparent;background: url(../images/cmmn/m-home-ic.png) no-repeat left center;height: 14px;width: 26px;border-right: 1px solid #D8D8D8;}
#container .directory a:nth-of-type(2),#container .directory a:nth-of-type(3), #container .directory span{display:none;}
#container .directory a.active{color:#555;font-weight:bold;font-size:0.8125rem;margin-left: 10px;display: block;}
#container .directory{padding: 13px 0;margin-bottom: 0;background: #fff;}
#content .tit-box .tit-wrap h1{font-size:0.9375rem;font-weight: bold;margin-bottom: 8px;}
#content .tit-box .tit-wrap p{font-size:0.8125rem;line-height:1.25rem;}
#content .tit-box{height:114px;padding: 0;}
#content .tit-box .tit-wrap{display:block;padding: 25px 0;}
#content-wrap{width: 100%;}
#content-wrap *{color:#555; font-size:0.8125rem; line-height:1.25rem}
#content-wrap .con-box, #content-wrap .con-box .cont{margin: 0 0 30px 0;border-top: 10px solid #F5F5F5;max-width: 100% !important;width: 100%;}
@media screen and (max-width: 768px){
#small-img { width: auto;}}
#content-wrap .con-box .cont:first-of-type, .sub04 #content-wrap .con-box .cont{border:none;}
#content-wrap .con-box > h2, #content-wrap .con-box > h1, #content-wrap .con-box > p, #content-wrap .con-box > div, #content-wrap .con-box > ul, #content-wrap .con-box > table,
#content-wrap .con-box .cont > h1, #content-wrap .con-box .cont > h2, #content-wrap .con-box .cont > p, #content-wrap .con-box .cont > div, #content-wrap .con-box .cont > ul, #content-wrap .con-box .cont > table{max-width: 375px !important;width:90%;margin: 0 auto;transition: all 0.3s 0s ease-in-out;}
#content-wrap h2.tit, #content-wrap h1.b-tit.m-tit{margin: 25px auto 8px !important;font-size: 1.25rem !important;font-weight: 500;line-height: 1.75rem; color:#000 !important}
#content-wrap h1.b-tit{font-size:0.9375rem !important;margin-top: 30px;margin-bottom: 8px;}

/* Tablet / Mobile ( 640px 이상  768px 이하 해상도 )  */
@media screen and (min-width:640px) and (max-width:768px){
#container .visual-wrap, #container .directory-wrap, #container .tit-wrap, 
#content-wrap .con-box > h2, #content-wrap .con-box > h1, #content-wrap .con-box > p, #content-wrap .con-box > div, #content-wrap .con-box > ul, #content-wrap .con-box > table, 
#content-wrap .con-box .cont > h1, #content-wrap .con-box .cont > h2, #content-wrap .con-box .cont > p, #content-wrap .con-box .cont > div, #content-wrap .con-box .cont > ul, #content-wrap .con-box .cont > table{max-width: 480px !important;}
}