@charset "utf-8";
#skipnavigation a { position: absolute; left: -3000%; }
#skipnavigation a:focus { display: block; left: 0; top: 0; z-index: 100000000; width: 100%; height: 30px; line-height: 30px; background: #039; color: #fff; text-align: center; }
/* 메인바디 */
* html #main { height: 100% }
#main { width: 100%; min-height: 100%; }
.wrapper { }
#main .contents_wrap { }
#main-container { width: 100%; }
/* 바디 */
#sub_wrapper { width: 100%; min-height: 100%; margin: -100px 0 -190px }
/* head 의 높이값과 footer 의 높이값 */
* html #sub_wrapper { height: 100% }
/**************************************************
	Layout
**************************************************/
#wrap { position: relative }
#header { position: relative; z-index: 99; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1); background: #fff; }
#header .inner { position: relative; width: 1300px; height: 90px; margin: 0 auto; }
#header .logo { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; }
#header .logo a { line-height: 100%; height: 60px; }
#header .logo img { width: 100%; transition: all 0.2s; }
#gnb { text-align: center; }
#gnb>li { position: relative; display: inline-block; vertical-align: top; }
#gnb>li>a { display: block; padding: 0 25px; line-height: 90px; font-size: 17px; color: #333333; text-decoration: none; }
#gnb>li>a:after { display: block; content: ''; width: 0; height: 3px; position: absolute; bottom: 0; left: 50%; background: #515ab3; transition: all 0.2s; }
#gnb>li:hover>a:after, #gnb>li.active>a:after { width: 100%; left: 0; }
#gnb>li>ul { position: absolute; top: 90px; left: 50%; transform: translate(-50%, 0%); width: auto; min-width: 160px; padding: 15px; border: 1px solid #ddd; background: #fff; box-sizing: border-box; visibility: hidden; opacity: 0; transition: all 0.2s; }
#gnb>li>ul li a { display: block; font-size: 15px; color: #333; line-height: 30px; text-align: center; }
#gnb>li>ul li a:hover { color: #000; text-decoration: underline; text-underline-position: under; }
#gnb>li>ul li.active a { font-weight: bold; }
#gnb>li:hover>ul { visibility: visible; opacity: 1; }
#gnb>li.hidden-gnb { display: none; }
#gnb-mo>li>a>i { font-size: 14px; color: #ccc; transition: all 0.1s; }
#gnb-mo>li.active>a>i { color: #666; transform: rotate(90deg); }
#drdw { position: absolute; top: 90px; left: 0; width: 100%; background: #3f4581; border-top: 1px solid #ddd; border-bottom: 3px solid #515ab3; z-index: 91; display: none; }
#drdw .inner { position: relative; width: 1300px; margin: 0 auto; border-right: 1px solid #565c94; }
#drdw .inner>li { display: inline-block; padding: 85px 30px; box-sizing: border-box; vertical-align: top; }
#drdw .inner>li:before { content: ''; display: block; position: absolute; top: 0; height: 100%; width: 1px; background: #565c94; margin-left: -30px; }
#drdw .inner>li:first-child { border-left-width: 1px; }
#drdw .inner>li>a { display: block; margin-bottom: 20px; font-size: 23px; color: #fff; font-weight: bold; }
#drdw .inner>li ul li a { display: block; font-size: 15px; line-height: 28px; color: #fff; font-weight: 200; }
#drdw .inner>li ul li.active a { font-weight: bold; }
#drdw .inner>li.hidden-gnb { display: none; }
#drdw .inner>li a:hover { text-decoration: underline; text-underline-position: under; }
#sns-ico { position: absolute; top: 28px; right: 62px; }
#sns-ico li { display: inline-block; margin-right: 12px; }
#sns-ico li>a { position: relative; width: 36px; display: flex; top: 0px; transition: all 0.1s; }
#sns-ico li>a>img { width: 100% }
#sns-ico li>a:hover { top: -2px; }
#slide-btn { text-indent: -999em; width: 30px; height: 20px; position: absolute; top: 35px; right: 0; }
#slide-btn button { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; background: none; cursor: pointer; outline: none; }
#slide-btn button span, #slide-btn button:before, #slide-btn button:after { border-radius: 2px; overflow: hidden; position: absolute; left: 0; width: 100%; height: 2px; background: #333; }
#slide-btn:hover button span, #slide-btn:hover button:before, #slide-btn:hover button:after { background: #000; }
#slide-btn button span { display: block; top: 50%; margin-top: -1px; opacity: 1; transition: all 0.2s; }
#slide-btn button:before { content: ''; display: block; top: 0; transition: all 0.2s; }
#slide-btn button:after { content: ''; display: block; bottom: 0; transition: all 0.2s; }
#slide-btn button.on span { opacity: 0; }
#slide-btn button.on:before { top: 50%; margin-top: -1px; transform: rotate(45deg); }
#slide-btn button.on:after { bottom: 50%; margin-bottom: -1px; transform: rotate(-45deg); }
#slide-bg { display: none; }
#slide-menu { display: none; }
/* 푸터 */
#footer { z-index: 1000; width: 100%; padding-bottom: 30px; background: #2d2d3c }
#footer .flogo { margin-right: 30px }
#footer .fm { width: 1300px; margin: 0px auto; padding-top: 30px; display: flex; align-items: flex-start; justify-content: flex-start; }
#footer footer { }
#footer .ft { margin: 2px 0 20px;
    padding: 20px 0 10px;
    float: left;
    width: 100%; }
#footer .f_util { }
#footer .f_util li { float: left; font-size: 16px; margin-bottom: 4px; }
#footer .f_util li::before { content: "|"; color: #999; margin: 0 14px; font-size: 12px; position: relative; top: -3px }
#footer .f_util li:last-child a { color: #fff }
#footer .f_util li:first-child::before { content: none; }
#footer .f_util li a { display: inline-block; color: #c5c5cb; text-decoration: none; }
#footer .f_util li a:hover { color: #fff; text-decoration: none }
#footer .fb { }
#footer .fb address { width: auto; font-size: 15px; color: #999; line-height: 140%; word-break: keep-all; }
#footer .fb address ul { }
#footer .fb address ul li { margin-bottom: 3px; }
#footer .fb address ul li span { margin-right: 20px; }
#footer .fb address ul li span em { margin-right: 10px; }
#footer .fb address ul li span strong { color: #fff; }
#footer .fb .copyright { padding: 10px 0; font-size: 15px; color: #ccc }
/* 메뉴하나 */
.btnArea { float: left; width: 100% }
.btnArea li { float: left }
.btnArea li:first-child:nth-last-child(1) { width: 100%; }
/* 메뉴두개 */
.btnArea li:first-child:nth-last-child(2), .btnArea li:first-child:nth-last-child(2) ~ li { width: calc(50% - 5px); margin-left: 10px }
.btnArea li:first-child:nth-last-child(2) { margin-left: 0 }
/* 메뉴세개 */
.btnArea li:first-child:nth-last-child(3), .btnArea li:first-child:nth-last-child(3) ~ li { width: calc(33.3333% - 4px); margin-left: 6px }
.btnArea li:first-child:nth-last-child(3) { margin-left: 0 }
/* 메뉴네개*/
.btnArea li:first-child:nth-last-child(4), .btnArea li:first-child:nth-last-child(4) ~ li { width: calc(25% - 5px); margin-left: 5px }
.btnArea li:first-child:nth-last-child(4) { margin-left: 0 }
/* 메뉴다섯개*/
.btnArea li:first-child:nth-last-child(5), .btnArea li:first-child:nth-last-child(5) ~ li { width: calc(20% - 4px); margin-left: 4px }
.btnArea li:first-child:nth-last-child(5) { margin-left: 0 }
.btnArea li > .btn { display: flex; width: 100%; align-items: center; justify-content: center; }