@charset "utf-8";

/*
 * File Name : layout.css
 * 작성일 : 2023-09-09
 */


/********************************************************

 *  Common

 ********************************************************/

body {width:100%;height: 100%;min-height: 100%; color:#666;font-size:16px;line-height:1.5;font-family:'Pretendard','맑은 고딕', 'Dotum', '돋움', verdana, sans-serif;word-wrap:break-word; word-break:keep-all;/*overflow:hidden;*/overflow-y:auto;}
body.nav-open {overflow: hidden;}
#wrap {width:100%;min-width: 340px; }

.inr {max-width: 1480px;margin: 0 auto;}
.cont_empty {padding: 50px 20px;text-align: center;font-weight: 500;}

.m_only {display: none;}

@media screen and (max-width:768px){
  .m_only {display: inline-block;vertical-align: middle;}
}

/*-----------------------------------------------------------------------------
 *  Mobile Menu Content
 *----------------------------------------------------------------------------*/

/* Menu Btn */
.mMenuBtn {display: none; position: fixed;right:-25px;top:0;width: 110px;height:100px;padding: 50px 20px; z-index: 1001;cursor: pointer; transition: all 0.3s ease}
.burger {display: flex;outline: none;height:30px;width: 30px;border: 0px;padding: 0px;margin-top: -10px; background: transparent;transition: all 250ms ease-out;cursor: pointer;}
.burger:before,
.burger:after {content: "";width: 30px;height: 2px;position: absolute;background: #000;transition: all 250ms ease-out;will-change: transform;}
.burger:before {transform: translateY(0);}
.burger:after {width: 20px;transform: translateY(12px);}
.on.burger:before {transform: translateY(10px) rotate(45deg);background: #000;}
.on.burger:after {width: 30px;transform: translateY(10px) rotate(-45deg);background: #000;}


/* Mobile Menu */
.menuMo {position:fixed;width:320px;height:100% !important;right:-320px;top:0;background:#fff;z-index:1000;overflow-x:hidden;overflow-y:auto;transition:right 0.3s;}
.menuMo_head {border-bottom: #ddd;}
.menuMo_head h2 {font-size: 18px;letter-spacing: 0.04em; font-weight:700;padding-bottom: 20px;}
.menuMo_head h2 .mob_logo {display: inline-block;width: 250px;padding:40px 30px 30px 30px;}
.menuMo_head h2 em {display: block;margin-top:5px;font-size: 13px;font-weight: 600;color:rgba(255,255,255,0.6);line-height: 1.8;letter-spacing: 0.04em;}
.menuMo_head .util {border-top:1px solid #ddd;padding: 15px 30px}
.menuMo_head .util .btn {display: inline-block;}
.menuMo_head .util .btn a {color:#000; font-weight: 600;}
.menuMo_head .util .btn a i {display: inline-block; vertical-align: baseline; margin-right: 5px;}
.menuMo_head .util .hdr_join a {color:#000;}
.menuMo_head .util .hdr_logout a {color:#000;}
.menuMo_head .util .hdr_modify a {color:#000;}

.menuMo > ul.menuMoCont {border-top:1px solid #ddd;}
.menuMo > ul.menuMoCont > li {border-bottom:1px solid #ddd;}
.menuMo > ul.menuMoCont > li + li {}
.menuMo > ul.menuMoCont > li > a {position: relative;display:block;padding:10px 30px;font-size:18px; font-weight:500; color:#000;}
.menuMo > ul.menuMoCont > li > a:after {content: "";position: absolute;right:25px;top:21px;width: 8px;height: 8px;border:2px solid #000;border-top:none;border-left:none;transform: rotate(45deg)}
.menuMo > ul.menuMoCont > li.noSub > a:after {display: none;}
.menuMo > ul.menuMoCont > li > a.active {color:#000;font-weight:bold; background-color:#e5e5e5;}
.menuMo > ul.menuMoCont > li > a.active:after {border-color:#000;top:21px;transform: rotate(225deg)}
.menuMo > ul.menuMoCont > li div.mSubMenu {display: none;background:#f6f6f6;padding: 10px 0;}

.menuMo ul li ul li + li {/*border-top: 1px solid #999;*/}
.menuMo ul li ul li a {display:block;padding:10px 40px;font-size:16px;color:#000;font-weight:500;}
.menuMo ul li ul li a em {display: block; font-size: 14px;}
.menuMo_foot {padding: 30px 35px;}
.menuMo_foot strong {display: block;font-size: 14px; font-weight: 500; letter-spacing: 0.06em; color:#ddd;}
.menuMo_foot a {display: block;font-size: 18px; font-weight: 600; letter-spacing: 0.06em; color:#cec5a3;margin-top: 5px;}

.menuBackBg {display:none;width:100%;height:100%;position:fixed;background:rgba(0,0,0,0.7);left:0;top:0;z-index:990;}

@media screen and (max-width:1020px){
  .mMenuBtn {display: block;width: 100px; height: 100px;}
  .burger {margin-top: -20px;}
}
@media screen and (max-width:960px){
  .mMenuBtn {width: 90px;height: 80px;padding: 40px 20px;right: -10px}
  .burger {margin-top: -10px;}
  .menuMo_head h2 .mob_logo {padding: 30px 30px 20px 30px;}
}
@media screen and (max-width:768px){
  .mMenuBtn {width:80px;height: 70px;padding: 40px 20px;}
  .burger:before, .burger:after {width: 25px;}
  .burger:after {width: 15px;transform: translateY(10px);}
  .on.burger:after {width: 25px;}
}
@media screen and (max-width:640px){

}
@media screen and (max-width:480px){
  .mMenuBtn {width: 60px;height: 80px;padding:32px 20px;right: 0;}
  .burger {height: 25px;width: 25px;margin-top: 0px;}
  .burger:before, .burger:after {width: 20px;}
  .burger:after {width: 10px;transform: translateY(8px)}
  .on.burger:after {width: 20px;}
  .menuMo_head h2 .mob_logo {padding: 25px 30px 15px 30px;}
}


/*-----------------------------------------------------------------------------
 *  Header
 *----------------------------------------------------------------------------*/

#header { position:relative; width:100%; height:90px; background:#fff; box-shadow:1px -1px 8px #666; z-index:100; transition: all 0.3s ease; }
#header.fix { position:fixed; }
#header:after { content:""; position:absolute; top:90px;left:0; width:100%; height:1px; background:#ddd; z-index:10; }

#header .head_inner { position:relative; height:100%; z-index:99; }
#header .logo { position:absolute; top:50%; left:0; transform:translate(0, -50%); }
#header .logo a { display:flex; }
#header .util { position:absolute; top:50%; right:0; transform:translate(0, -50%); font-size:30px; }
#header .util a { color:#000; }
#header .util a:hover { color:#155daa; transition: all 0.3s ease; }

#header .sub-bg { position:absolute; top:90px; left:0; width:100%; background:#fff; color:black; z-index:1; transition: all 0.3s ease;}
#header .sub-bg.on { border-bottom:1px solid #ddd;}

/* Gnb */
#gnb { display:flex; justify-content:center; height:100%; }
#gnb .menu { display:flex; height:100%; }
#gnb .menu .depth1 { position:relative; text-align:center; transition:all 0.3s ease; }
#gnb .menu .depth1 > a { position:relative; display:flex; justify-content:center; align-items:center; height:100%; font-size:20px ;font-weight:500; color:#000; padding:0 30px; transition: all 0.3s ease; }
#gnb .menu:hover .depth1 > a { padding:0 50px; transition: all 0.3s ease; }
#gnb .menu .depth1 > a:after { content:''; position:absolute;  display: block; width:0; height:2px; background:#155daa; right:0; bottom:0; transition: width 0.3s ease;}
#gnb .menu .depth1:hover > a,
#gnb .menu .depth1.on > a {font-weight:bold; color:#155daa; }
#gnb .menu .depth1:hover > a:after { width:100%; left:50%; transform:translate(-50%, 0); }
#gnb .subdepth { display:none; width:100%; height:100%; z-index:99; }
#gnb .subdepth ul { padding:30px 0; }
#gnb .subdepth ul > li { position:relative; }
#gnb .subdepth ul > li > a { position:relative; display:block;color:#000;font-size:16px;font-weight:500;line-height: 1.3; padding:10px 0;}
#gnb .subdepth ul > li:hover > a,
#gnb .subdepth ul > li:focus-within > a { font-weight:bold; color:#155daa; }
#gnb .subdepth ul > li > a em {font-size: 14px;}

@media screen and (max-width:1780px){

}
@media screen and (max-width:1600px){

}
@media screen and (max-width:1200px){

}
@media screen and (max-width:1020px){
  #gnb {display: none;}
  #header .util {display: none;}
}
@media screen and (max-width:960px){
  #header {height: 80px;}
  #header:after {top: 80px;}
}
@media screen and (max-width:768px){

}
@media screen and (max-width:640px){

}
@media screen and (max-width:480px){

}



/*-----------------------------------------------------------------------------
 *  Side
 *----------------------------------------------------------------------------*/

.topBtn {position:fixed;display:none;justify-content: center;align-content:center;bottom:30px;right:30px;width:50px;height:50px;border-radius: 50%;cursor: pointer;background:#fff;padding:18px;box-shadow: 3px 3px 10px rgba(0, 0, 0, .2);z-index: 100}

@media screen and (max-width:768px){
  .topBtn {bottom: 20px;right: 10px;width:35px;height: 35px;padding:14px;}
}
@media screen and (max-width:640px){

}
@media screen and (max-width:480px){

}


/*-----------------------------------------------------------------------------
 *  Container
 *----------------------------------------------------------------------------*/

#container { min-height:800px; }
.imgBx img { display:block; width:100%; }


/*-----------------------------------------------------------------------------
 *  Footer
 *----------------------------------------------------------------------------*/

#footer { background:#2c394c; padding:50px 10px; text-align:center; }
#footer .company_info { color:#fff; }
#footer .copyright { color:#fff; }


/*-----------------------------------------------------------------------------
 *  Margin & Padding
 *----------------------------------------------------------------------------*/

/* Vertical Padding */
.vPad250 {padding:120px 0;}
.vPad200 {padding:100px 0;}
.vPad150 {padding:80px 0;}

/* Horizontal Padding */
.hPad50 {padding:0 50px;}

/* Both Padding */
@media screen and (max-width:1200px){
  .hPad50 {padding:0 40px;}
}
@media screen and (max-width:960px){
  .vPad250 {padding:100px 0;}
  .vPad200 {padding:80px 0;}
  .vPad150 {padding:60px 0;}
}
@media screen and (max-width:768px){
  .vPad250 {padding:80px 0;}
  .vPad200 {padding:60px 0;}
  .vPad150 {padding:50px 0;}

  .hPad50 {padding:0 30px;}
}
@media screen and (max-width:640px){

}
@media screen and (max-width:480px){
  .vPad250 {padding:60px 0;}
  .vPad200 {padding:50px 0;}
  .vPad150 {padding:30px 0;}

  .hPad50 {padding:0 25px;}
}




/********************************************************

 *  Sub

 ********************************************************/

/*-----------------------------------------------------------------------------
 *  서브비쥬얼영역
 *----------------------------------------------------------------------------*/
.sub_top {  }
.sub_visual { background:#2c1a1f url("../images/common/sub-visual.jpg") no-repeat center top; height:240px; }
.sub_visual .visual_tit { padding:50px 0 0 0; }
.sub_visual .visual_tit p { text-align:center; font-size:20px; color:#fff; }
.sub_visual .visual_tit h2 { text-align:center; font-size:32px; color:#fff; font-weight:700; }

.sub_menu_wrap { max-width:1080px; margin:0 auto; position:relative; }
.sub_menu_wrap .location_wrap { display:flex; justify-content:space-between; align-items:center; position:absolute; top:-75px; left:0; width:100%; height:75px; padding:0 25px; background:rgba(255,255,255,0.9); }
.sub_menu_wrap .location_wrap h3 { font-size:28px; color:#000; }
.sub_menu_wrap .location_wrap .pg_nav { display:flex; align-items:center; }
.sub_menu_wrap .location_wrap .pg_nav li { margin:0 10px 0 0; }
.sub_menu_wrap .location_wrap .pg_nav a { font-size:16px; color:#666; font-weight:700; }
.sub_menu_wrap .location_wrap .pg_nav li.home a {display:block;font-size:0;background:url("../images/sub/home.png") no-repeat center 0;width:20px;height:20px;}
.sub_menu_wrap .location_wrap .pg_nav .dc_cur_locatoin { margin:0 10px; }
.sub_menu_wrap .location_wrap .pg_nav .dc_cur_locatoin:last-child { margin:0 0 0 10px; }

.m_sub_menu_wrap { display:none; }

.depth2_menu {  }
.depth2_menu ul { display:flex; }
.depth2_menu ul li { flex:1; position:relative; text-align:center; background:#0096f1; height:56px; border-left:1px solid rgba(255,255,255,0.3); font-size:16px; transition: all 0.3s ease; }
.depth2_menu ul li:hover,
.depth2_menu ul li.active { background:#155daa; transition: all 0.3s ease; }
.depth2_menu ul li:hover:after,
.depth2_menu ul li:after { content:""; background:#155daa; width:10px; height:10px; transform:rotate(135deg); position:absolute; left:50%; bottom:2px; z-index:-1; }
.depth2_menu ul li.active:after { bottom:-5px; }
.depth2_menu ul li a { display:flex; align-items:center; justify-content:center; height:100%; color:#fff; }

.sub_menu_wrap .contents_tit { text-align:center; font-size:32px; padding:35px 0; color:#000; border-bottom:1px solid #d5d7db; }

.sub_menu_wrap .depth3_menu {  }
.sub_menu_wrap .depth3_menu ul { display:flex; border-top:1px solid #384162; border-bottom:1px solid #c3c6d0; }
.sub_menu_wrap .depth3_menu ul li { position:relative; flex:1; text-align:center; font-size:16px; }
.sub_menu_wrap .depth3_menu ul li:after { content:""; position:absolute; top:50%; right:0; transform:translate(0, -50%); width:1px; height:10px; background:#c3c6d0; }
.sub_menu_wrap .depth3_menu ul li:last-child:after { content:""; display:none; }
.sub_menu_wrap .depth3_menu ul li a { display:block; padding:15px 0; color:#999; }
.sub_menu_wrap .depth3_menu ul li.active {  }
.sub_menu_wrap .depth3_menu ul li.active a { color:#000; }
.sub_menu_wrap .depth3_menu ul li.active a:after { content:""; position:absolute; top:0; left:0; width:100%; height:2px; background:#000; }

@media screen and (max-width:768px){
.sub_menu_wrap { display:none; }

.contents_tit .pg_nav li {margin-left:6px;}
.contents_tit .pg_nav a {font-size:13px;}
.contents_tit .pg_nav li.home a {background-size:12px auto;width:16px;height:16px;}
.contents_tit .pg_nav li:last-child {font-size:14px;}
.contents_tit .pg_nav li:after {background-size:4px auto;width:4px;height:8px;margin-left:10px;}

.m_sub_menu_wrap { display:block; position:relative; }

.drop_down_wrap { position:absolute; top:-75px; width:100%; height:75px; background:rgba(255,255,255,0.9); text-align:center; }
.drop_down_wrap h3 {display: block; font-size: 18px; font-weight: 500; color:#fff;margin-bottom: 10px;}

.drop_down_wrap .drop_down { display:inline-block; position:relative; width:100%; height:100%; }
.drop_down_wrap .drop_down .drop_title { line-height:75px; }
.drop_down_wrap .drop_down .drop_title a { position:relative; display:block; font-size:28px; color:#000; }
.drop_down_wrap .drop_down .drop_title a:after { content:'\e906'; font-family:'icomoon' !important; font-size:28px; display:inline-block; vertical-align:-3px; transform:rotate(90deg) }
.drop_down_wrap .drop_down .drop_title.active a { position:relative; text-decoration:none; border-color:#000; border-bottom-color:#ccc; }
.drop_down_wrap .drop_down .drop_title.active a:after { transform:rotate(-90deg); }
.drop_down_wrap .drop_down .drop_sub { position:absolute; left:0; top:75px; width:100%; border:1px solid #000; border-top-color:#ccc; background:#fff; z-index:1; box-sizing:border-box; }
.drop_down_wrap .drop_down .drop_sub li { background:#0096f1; }
.drop_down_wrap .drop_down .drop_sub li a { display:block; font-size:16px; padding:17px 0; color:#fff; }
.drop_down_wrap .drop_down .drop_sub li:last-child a { border-bottom:none; }
.drop_down_wrap .drop_down .drop_sub li a:hover,
.drop_down_wrap .drop_down .drop_sub li.active a { color:#fff; background:#155daa; }

.m_sub_menu_wrap .contents_tit { padding:20px 20px 0 20px;  }
.m_sub_menu_wrap .contents_tit h4 { text-align:center; font-size:32px; color:#000; }
.m_sub_menu_wrap .contents_tit .pg_nav { display:flex; align-items:center; justify-content:center; padding:0 0 30px 0; margin:0; border-bottom:1px solid #ddd; }
.m_sub_menu_wrap .contents_tit .pg_nav li { margin:0 10px 0 0; }
.m_sub_menu_wrap .contents_tit .pg_nav a { font-size:16px; color:#666; font-weight:700; }
.m_sub_menu_wrap .contents_tit .pg_nav li.home a {display:block;font-size:0;background:url("../images/sub/home.png") no-repeat center 0;width:20px;height:20px;}
.m_sub_menu_wrap .contents_tit .pg_nav .dc_cur_locatoin { margin:0 10px; }
.m_sub_menu_wrap .contents_tit .pg_nav .dc_cur_locatoin:last-child { margin:0 0 0 10px; }

}




/*-----------------------------------------------------------------------------
 *  서브콘텐츠 탑
 *----------------------------------------------------------------------------*/
.sub_contents { max-width:1080px; margin:0 auto; }
.sub_contents .depth3_menu { display:none; }

@media screen and (max-width:768px){
.sub_contents { padding:0 20px; }
.sub_contents .depth3_menu { display:block; }
.sub_contents .depth3_menu ul { display:flex; flex-wrap:wrap; border-top:1px solid #384162; border-bottom:1px solid #c3c6d0; }
.sub_contents .depth3_menu ul li { position:relative; width:50%; text-align:center; font-size:16px; }
.sub_contents .depth3_menu ul li:nth-child(odd):after { content:""; position:absolute; top:50%; right:0; transform:translate(0, -50%); width:1px; height:10px; background:#c3c6d0; }
.sub_contents .depth3_menu ul li:last-child:after { content:""; display:none; }
.sub_contents .depth3_menu ul li a { display:block; padding:15px 0; color:#999; }
.sub_contents .depth3_menu ul li.active {  }
.sub_contents .depth3_menu ul li.active a { color:#000; }
.sub_contents .depth3_menu ul li.active a:after { content:""; position:absolute; top:0; left:0; width:100%; height:2px; background:#000; }
}