@charset "utf-8";

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


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

 *  Common

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

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


/* Mobile Menu */

.mMenuBtn {display: none; position: absolute;right:20px;top:25px;z-index: 1001;}
.mMenuBtn:has(.on) {position: fixed;right: 20px;}
.burger {display: flex;outline: none;height:26px;width:26px;border: 0px;padding: 0px;background: transparent;transition: all 250ms ease-out;cursor: pointer;}
.burger:before,
.burger:after {content: "";width:26px;height: 3px;position: absolute;background: #000;transition: all 250ms ease-out;will-change: transform;}
.subMenuBtn .burger:before,
.subMenuBtn .burger:after,
.burger.active:before,
.burger.active:after {background:#fff;}
.burger:before {transform: translateY(6px);}
.burger:after {width: 22px;transform: translateY(14px);}
.on.burger:before {transform: translateY(12px) rotate(45deg);transform-origin: center center;background:#fff;}
.on.burger:after {width: 26px;transform: translateY(12px) rotate(-45deg);transform-origin: center center;background: #fff;}

@media screen and (max-width:480px){
  .mMenuBtn {right: 18px;top:18px;}
  .burger {height: 24px;width: 24px;}
  .burger:before {width: 24px;height: 2px;}
  .burger:after {width: 20px;height: 2px;}
  .on.burger:after {width: 24px;}
}


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

.menuMo {display:none;position:fixed;width:320px;height:100% !important;right:-320px;top:0;background:#3c7db7;z-index:1000;overflow-x:hidden;overflow-y:auto;transition:right 0.3s;}
.menuMo_head {padding:60px 25px 20px;}
.menuMo_head h2 {font-size: 24px;font-weight:800;color: #fff; border-bottom: 2px solid #fff;padding-bottom: 20px;}
.menuMo_head .mbr_menu li {display: inline-block; vertical-align: middle;margin-right: 20px;}
.menuMo_head .mbr_menu li.dc_mb_wrap {width:100%;display:flex; flex-wrap: nowrap; align-items: center; vertical-align: middle;margin-right: 20px;color:#fff;font-weight: 600; margin-bottom:10px; font-size: 16px;}
.menuMo_head .mbr_menu li.dc_mb_wrap i {margin-right: 5px;}
.menuMo_head .mbr_menu a {color:#fff;font-weight: 600;}
.menuMo_head .mbr_menu a i {margin-right: 5px;}
.menuMo_head .mo_sch {position: relative;margin-top: 20px}
.menuMo_head .mo_sch button {position: absolute; right:10px; top:50%;transform: translateY(-50%);display: block; width: 20px; height: 20px; z-index: 10}
.menuMo_head .mo_sch button i {font-size:13px; color:#000;}
.menuMo_head .mo_sch input {width:100%;height:35px;padding: 0 30px 0 15px;font-size: 16px; color:#000;font-weight: 500; border-radius: 5px; border:none;}

.menuMo > ul.menuMoCont {border-top:1px solid rgba(255,255,255,0.5); }
.menuMo > ul.menuMoCont > li {border-bottom: 1px solid rgba(255,255,255,0.1)}
.menuMo > ul.menuMoCont > li + li {}
.menuMo > ul.menuMoCont > li > a {position: relative;display:block;padding:20px 25px;font-size:17px;line-height: 15px; font-weight:600; color:#fff;}
.menuMo > ul.menuMoCont > li > a.active {color:#fff;background:#225d92}
.menuMo > ul.menuMoCont > li > a:after {content: "";position: absolute;right:25px;top:25px;width:8px;height: 8px;border:2px solid #fff;border-right:none;border-bottom: none; transform: rotate(225deg);transition: all 0.3s ease;}
.menuMo > ul.menuMoCont > li:has(.mSubMenu) > a.active:after {transform: rotate(45deg);top:23px;}
.menuMo > ul.menuMoCont > li div.mSubMenu {display: none;padding:15px 0;border-top:1px solid rgba(255,255,255,0.2);background:#225d92}
.menuMo > ul.menuMoCont.menuUtil {background:rgba(0,0,0,0.07);border-top:none}
.menuMo > ul.menuMoCont.menuUtil > li > a {color:#fed702}
.menuMo > ul.menuMoCont.menuUtil + .btn_round {margin: 20px}
.menuMo ul li ul li a {display:block;padding:10px 30px; font-size:15px;line-height: 1.4; color:#eee;font-weight:600;}

.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:960px){
  .mMenuBtn {display: block;}
  .menuMo {display: block;}
}


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

#header {position: relative;z-index: 1}
#header .hdr_bg {position: absolute;left: 0;top:100%;display: none; background:#fff;width: 100%;height:350px;border-bottom: 1px solid #ddd;}
.hdr_top {background:#f4f8fa;}

.hdr_mid {}
.hdr_mid .inr_box {position: relative;display: flex;justify-content: space-between;align-items:center;padding:20px 0;}
.hdr_mid .util {}
.hdr_mid .util li {float:left;}
.hdr_mid .util li + li:before {content: "";display: inline-block;vertical-align: middle;margin: 0 15px;font-size:14px;color:#ccc;}
.hdr_mid .util li.dc_mb_wrap {display:flex; color:#8d97ad;font-size:15px;font-weight: 600; flex-wrap: nowrap; align-items: center;}
.hdr_mid .util li.dc_mb_wrap i {display: inline-block; vertical-align: middle; margin-right: 5px;}
.hdr_mid .util li a {display:inline-block;color:#8d97ad;font-size:15px;font-weight: 600; line-height: 1.2;}
.hdr_mid .util li a i {display: inline-block; vertical-align: middle; margin-right: 5px;}
.hdr_mid .util li:hover a {color:#3c7db7}
.hdr_mid .util li.hdr_login a {padding-left:20px;}
.hdr_mid .btn a {display: block;line-height: 45px;color: #188ef4;border:1px solid #188ef4;font-size:18px;font-weight: 500; padding:0 25px;border-radius: 5px;}
.hdr_mid .btn a:hover {background:#188ef4;color:#fff;}
.logo {width:160px;}
.hdr_bott {position: relative;background:#fff;border-top:1px solid #ddd;border-bottom:1px solid #ddd;z-index: 10}
.hdr_bott .inr_box {position: relative;display: flex;align-items: center;}


/* Gnb */
#gnb > ul {}
#gnb > ul > li {float:left;position: relative;z-index: 1}
#gnb > ul > li > a {position:relative;display:block;line-height:60px;font-size:18px;color:#0C3768;font-weight: 600;padding:0 50px;}
#gnb > ul > li.mbship > a {color:#fff;z-index: 10}
#gnb > ul > li.mbship > a:before {content: "";position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);width: 120px;height: 40px;border-radius: 50px;background:#EA5A33;z-index: -1}

#gnb > ul > li.mbship2 > a {color:#fff;z-index: 10}
#gnb > ul > li.mbship2 > a:before {content: "";position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);width: 120px;height: 40px;border-radius: 50px;background:#2088b7;z-index: -1}

#gnb > ul > li.cmmity > a {padding-left: 80px;}
#gnb > ul > li.cmmity > a:before {content: "";position: absolute;left:50px;top:50%;transform: translate(0,-50%);width:20px;height:20px;background:url(../images/common/volume.svg) no-repeat center center;background-size: 20px auto;}
/*#gnb > ul > li.active > a {background:#225d92;}
#gnb > ul > li:hover > a {background:#225d92;}*/
#gnb > ul > li .sub_menu {position: absolute; left:50%;top:100%;padding:15px 0;width:max-content;min-width:100%;min-height: 300px; opacity: 0; visibility:hidden;transform:translateX(-50%) translateY(-10px);transition: all 0.3s ease; z-index: 10}
#gnb > ul.on .sub_menu {opacity: 1;visibility: visible;transform:translateX(-50%) translateY(0);}
#gnb > ul > li .sub_menu strong {position: relative;display: block;}
#gnb > ul > li .sub_menu strong:after {content: "";position: absolute;left: 50%;bottom: -5px;display: block;width:0;height:0;border-top:6px solid #0C3768;border-left: 6px solid transparent;border-right: 6px solid transparent;transform: translateX(-50%)}
#gnb > ul > li .sub_menu strong a {display: block;text-align: center;font-size: 17px;color:#0C3768;padding: 10px;font-weight: 500;}
#gnb > ul > li .sub_menu ul {padding: 10px 0 15px;/*background:rgba(120,130,140,.13);*/}
#gnb > ul > li .sub_menu ul li a {display: block; padding:10px 20px; font-size:16px; font-weight: 600; color:#666;text-align: center;}
#gnb > ul > li .sub_menu ul li a:hover {color:#0F73E9;}


/* 전체메뉴 버튼 */
/* Menu Btn */
.nav-toggle {position: absolute; top:10px; right:0;flex-shrink: 0; line-height: 1;display: inline-block;border: 0;padding:10px;z-index: 1001;}
.nav-toggle.is-active {}
.nav-toggle .icon-menu {position: relative;display: inline-block;width: 28px;height: 20px;vertical-align: middle;fill: none;}
.icon-menu .line {position: absolute;left: 0;display: block;width: 100%;height: 2px;-webkit-transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1.000);transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1.000);-webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);background-color: #000;}
.icon-menu .line-1 { top: 0; }
.is-active .icon-menu .line-1 {-webkit-transform: translateY(9px) translateX(0) rotate(45deg);-ms-transform: translateY(9px) translateX(0) rotate(45deg);transform: translateY(9px) translateX(0) rotate(45deg);}
.icon-menu .line-2 {top: 50%;margin-top: -1px;}
.is-active .icon-menu .line-2 { opacity: 0; }
.icon-menu .line-3 { bottom: 0; }
.is-active .icon-menu .line-3 {-webkit-transform: translateY(-9px) translateX(0) rotate(-45deg);-ms-transform: translateY(-9px) translateX(0) rotate(-45deg);transform: translateY(-9px) translateX(0) rotate(-45deg);}


/* Add Menu */
.add_menu {margin-left: auto;margin-right:10px;}
.add_menu ul {}
.add_menu ul li {float: left;}
.add_menu ul li a {font-size:16px; color: #fed702;font-weight: 600;padding: 0 15px; }


/* Content Menu */
#cont_nav {position:sticky;left: 0;top:20px;width:150px; height: max-content;}
#cont_nav ul {}
#cont_nav li a {display: block; font-size: 18px;font-weight:600;padding:15px 0;}
#cont_nav li:hover a {color:#000}
#cont_nav li.active a {color:#000;}

/* Round Btn */
.btn_round {display: inline-block;line-height:40px;padding: 0 25px; font-size:20px; font-weight: 700; color:#0e396d; border-radius: 50px;background:#fed702; }


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

  #gnb > ul > li > a {padding: 0 30px;}

  .nav-toggle {top: 10px;}
}
@media screen and (max-width:1024px){
  .hdr_mid .inr_box {padding:20px 0;}
  .hdr_mid .util {bottom: 20px;}
  .hdr_mid .util li + li:before {margin: 0 10px;}
  .hdr_mid .util li a {font-size: 14px;}
  .logo {max-width: 120px;}
  .hdr_mid .btn a {line-height:40px;font-size: 16px;padding: 0 20px;}

  #gnb > ul > li > a {line-height: 50px;padding: 0 25px;}
  #gnb > ul > li.cmmity > a {padding-left: 50px;}
  #gnb > ul > li.cmmity > a:before {left: 20px;}
  .add_menu ul li a {padding: 0 15px;}

  #cont_nav {position: static;width: 100%;height:auto;}
  #cont_nav ul {display: flex;gap:30px;overflow: hidden;overflow-x: auto;}
  #cont_nav ul li {white-space: nowrap}
  #cont_nav ul li a {padding:0 }

  .btn_round {padding: 0 20px;font-size: 18px;}

  .nav-toggle {top: 5px;}
}
@media screen and (max-width:960px){
  .hdr_top {display: none;}
  .hdr_mid .util {display: none;}
  .hdr_bott {display: none;}
}
@media screen and (max-width:768px){
  .hdr_mid .inr_box {padding:18px 0;}
  .hdr_mid .util li a {font-size: 15px;}
  .hdr_mid .util li a i {font-size: 14px;}
  .hdr_mid .btn a {line-height:35px;font-size: 15px;padding: 0 15px;}

  #gnb > ul > li > a {line-height:50px;padding: 0 10px;}
  #gnb > ul > li .sub_menu ul li a {font-size: 14px;}

  #cont_nav li a {font-size: 16px;}
}
@media screen and (max-width:640px){

  .logo {max-width:80px;}

  .hdr_mid .btn {margin-right: 40px;}

}
@media screen and (max-width:480px){
  .logo {max-width: 75px;}
  .hdr_mid .inr_box {padding:15px 0;}
  .hdr_mid .btn {margin-right: 35px;}
  .hdr_mid .btn a {line-height:30px;font-size: 14px;padding: 0 10px;}

  #cont_nav ul {gap:15px;}
  #cont_nav li a {font-size:14px;}
}


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

#container {}
.imgBx img {display: block;width:100%;}
.imgNrm {text-align: center;}
.imgNrm img {max-width:100%;}

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

#footer {}
#footer.sub_footer {background:#f6f6f6;}
/*관련사이트*/
#site {padding-bottom: 50px;padding-top: 30px; background:#fff;}
#site .inr_box {position: relative; padding-left: 200px;}
#site .inr_box .site_title {position: absolute;left: 0;top:50%; transform: translateY(-50%);font-size: 20px; font-weight:600; color: #000;}
#site .inr_box .swp_site {overflow: hidden;}
#site .inr_box .swiper-slide a {display: block; text-align: center}

#footer_info {background:#f6f6f6;}
.ftr_top,
.ftr_bott {padding:40px 0 50px;}
.ftr_top {display: flex;justify-content: space-between;align-items: center;border-bottom:1px solid rgba(0,0,0,.1);padding-bottom:30px;}
.ftr_top .imgBx {max-width:140px;}
.copyright {margin-top: 10px;}
.copyright span {font-size:16px;color:#fff;font-weight: 500;}
.copyright p {display: inline-block;color:#888;}
.ftr_bott {display: flex;justify-content: space-between;align-items: center}
.ftr_bott > p {font-size:15px;color:#888;}
.ftr_menu {display: flex;}
.ftr_menu li {position:relative;margin: 0 40px 0 0;}
.ftr_menu li a {color:#444;font-size:17px;}
.ftr_menu li:hover a {color:#000;}
.ftr_cont {font-size: 0}
.ftr_cont li {display: inline-block;font-size:15px;color: #444;margin-right:50px;padding: 5px 0;}
.ftr_cont .imgBx {position:absolute;top:50%;left:0;width:20px;transform: translateY(-50%);color:#ccc;font-size:16px;}
.ftr_cont li:first-child {padding-top:0;}
.ftr_cont li:first-child .imgBx {top:0;transform:none;}
.ftr_cont li address {color:#ccc;}
.ftr_cont li span {font-size:15px;color: #ccc;}
.ftr_bott .bx {background:rgba(120,130,140,.13);padding:25px;}
.ftr_bott .bx span {color:#ccc;}
.ftr_bott .bx input {border:none;line-height: 45px; background:none;font-size:16px;margin:10px 0;}
.ftr_bott .bx .btn a {display:inline-block;line-height: 38px;padding:0 15px;font-size:16px;border-radius: 5px;}
.ftr_bott .sns_link {display: flex;gap:10px;}
.ftr_bott .sns_link li a {display: block;width:40px;height: 40px;font-size: 0}

@media screen and (max-width:960px){
  .ftr_top .imgBx {max-width:100px;}
  .ftr_bott {padding: 30px 0 80px;}
  .ftr_bott > p {max-width:none;font-size: 15px;}
  .ftr_menu {}
  .ftr_cont li address br {display: none;}
}
@media screen and (max-width:768px){
  #site .inr_box {padding-left:0;}
  #site .inr_box .site_title {position: static;transform: none;font-size: 18px;margin-bottom: 20px;}
  .ftr_menu li {margin: 0 30px 0 0;}
  .ftr_menu li a {font-size: 15px;}
  .ftr_cont li {font-size:14px;margin-right: 15px;}
  .copyright p {font-size: 13px;}
  .ftr_bott .sns_link li a {width: 35px;height: 35px;}
}
@media screen and (max-width:640px){
  .ftr_menu {flex-wrap: wrap;}
  .ftr_menu li {margin: 5px 15px 5px 0;}
  .ftr_menu li a {font-size: 14px;}
  .ftr_bott {display: block;padding: 30px 0 50px;}
  .ftr_bott_right {margin-top: 20px;}
  .copyright p {font-size: 12px;}
  .ftr_bott .sns_link li a {width: 30px;height: 30px;}
}
@media screen and (max-width:480px){
  #site .inr_box .site_title {font-size: 16px;margin-bottom:15px;}

  .ftr_top {display: block;padding-bottom: 40px;}
  .ftr_top .imgBx {max-width: 80px;}
  .ftr_menu {display: block;margin-top: 30px;}
  .ftr_menu li {display: inline-block;margin:5px 15px 5px 0;}
  .ftr_menu li a {font-size: 14px;}
  .ftr_cont li {display: block;font-size: 13px;margin-right:0;}
}


/*-----------------------------------------------------------------------------
 *  Aside
 *----------------------------------------------------------------------------*/

/*Shortcuts*/
.shortcuts {position: fixed;right:0;top: 50%;transform: translateY(-50%); text-align: center;border-radius: 10px 0 0 10px;overflow: hidden;border:1px solid #5C6D81;background:#fff;}
.shortcuts h2 {display: flex;flex-direction: column;justify-content: center; align-items: center;gap:5px;text-align: center;background:#5C6D81;font-size: 16px; font-weight: 600; color:#fff;padding: 15px 10px;}
.shortcuts h2 img {flex-shrink: 0;width: 25px;height: 25px;}
.shortcuts ul {padding: 10px 0 0}
.shortcuts ul li:last-child {background:#ffeb18}
.shortcuts ul li a {display: block;padding: 10px;}
.shortcuts ul li a img {max-width: 50px;}
.shortcuts ul li a strong {display: block;font-size: 14px; font-weight: 500;color:#000;}
.shortcuts .btn_top {display: block; font-size: 13px; font-weight: 500; background:#444;padding:5px 10px; color:#fff;cursor: pointer}

/*Mobile Top Btn*/
#aside {display: none;}
.topBtn {display: none; position:fixed;bottom:30px;right:30px;width:45px;height: 45px;background:#3c7db7; border-radius: 5px;cursor: pointer;transition: all 0.3s ease;}
.topBtn:hover {background:#175e9d}
.topBtn span {display: flex;justify-content: center; align-items: center;line-height: 40px;height: 100%;font-size: 0;}
.topBtn span i {font-size: 24px;color:#fff;line-height: 1;}

@media screen and (max-width:1400px){
  .shortcuts {display: none}
  #aside {display: block;}
  .topBtn {bottom:15px;right:15px;width:35px;height:35px;}
  .topBtn span i {font-size: 18px;}
}
/*Mobile Top Btn*/
@media screen and (max-width:768px){
  #aside {display: block;}
  .topBtn {bottom:15px;right:15px;width:35px;height:35px;}
  .topBtn span i {font-size: 18px;}
}


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

/* Vertical Padding */
.vPad30 {padding:30px 0;}
.vPad50 {padding:50px 0;}
.vPad80 {padding:80px 0;}


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

/* Both Padding */
.pad30 {padding:30px;}
.pad40 {padding:40px;}

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

  .pad30 {padding:25px;}
  .pad40 {padding:30px;}
}
@media screen and (max-width:768px){
  .hPad50 {padding:0 30px;}

  .pad30 {padding:20px;}
  .pad40 {padding:25px;}
}
@media screen and (max-width:480px){
  .vPad30 {padding:10px 0;}
  .vPad50 {padding:30px 0;}
  .vPad80 {padding:50px 0;}

  .hPad50 {padding:0 25px;}
}


/*-----------------------------------------------------------------------------
 *  Content Box
 *----------------------------------------------------------------------------*/

/* Inner Box */
.inr_box {max-width: 1200px; margin: 0 auto;}
.inr_box.bdr_top {border-top: 1px solid #ddd;padding-top: 80px;}
.inr_box.half_box {display: flex;}
.inr_box.half_box > div {width: 50%;}

@media screen and (max-width:520px){
  .inr_box.half_box {flex-wrap: wrap;}
  .inr_box.half_box > div {width: 100%;padding: 0 !important;}
}


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

 *  Sub

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

/*-----------------------------------------------------------------------------
 *  Sub Visual
 *----------------------------------------------------------------------------*/

#sub_vis {position: relative;padding: 0 50px}

/* Sub Title */
.sub_tit {max-width: 1200px; padding:140px 0;margin: 0 auto;}
.sub_tit h2 {font-size:20px; color:#fff;font-weight: 600;margin-bottom:10px;text-align: center}
.sub_tit strong {display: block; font-size:46px; color:#fff;font-weight: 700;margin-bottom:5px;text-align: center}
.sub_tit p {font-size: 20px; color:#fff;font-weight: 300;}
.pg_tit {text-align: center;margin-bottom: 50px;font-size:36px; font-weight: 700;}

@media screen and (max-width:1024px){
  .sub_tit {padding: 100px 0;}
  .sub_tit h2 {margin-bottom:0}
}
@media screen and (max-width:960px){
  .sub_tit h2 {font-size:18px;}
  .sub_tit strong {font-size:40px;}
}
@media screen and (max-width:768px){
  #sub_vis {padding: 0 40px}
  .sub_tit {padding:50px 0 80px;}
  .sub_tit h2 {font-size:16px;}
  .sub_tit strong {font-size:34px;}
  .sub_tit p {font-size:18px;}
  .pg_tit {margin-bottom: 30px;font-size: 26px;}
}
@media screen and (max-width:480px){
  #sub_vis {padding: 0 30px}
  .sub_tit {padding:30px 0 50px;}
  .sub_tit h2 {font-size:15px;}
  .sub_tit strong {font-size:26px;}
  .sub_tit p {font-size:14px;}
  .pg_tit {font-size: 24px;}
}


/*-----------------------------------------------------------------------------
 *  Sub Content
 *----------------------------------------------------------------------------*/

.content {padding: 100px 50px 150px;}


/* Page Navigation */
.pg_nav {position: absolute;left: 0;bottom: 0;width: 100%;background:rgba(0,0,0,0.4);padding: 0 50px;overflow: hidden;overflow-x: auto;}
.pg_nav::-webkit-scrollbar{display:none !important;}

.pg_nav ul {display: flex;justify-content: center;max-width: 1200px;margin: 0 auto;white-space: nowrap}
.pg_nav ul::-webkit-scrollbar{display:none !important;}
.pg_nav ul li {float: left;}
.pg_nav ul li a {position: relative;display: block; font-size: 18px; font-weight: 600; color:#eee;padding: 20px;}
.pg_nav ul li:hover a,
.pg_nav ul li.active a{color:#fed700}
.pg_nav ul li a:after {content: "";position: absolute; left: 50%; bottom: 0;transform: translateX(-50%);width:0;height: 2px;background:#fed700;transition: all 0.3s ease;}
.pg_nav ul li:hover a:after,
.pg_nav ul li.active a:after{width: 100%;}


/* Titles */
.tit_big {text-align: center;margin-bottom:30px;}
.tit_big span {display: inline-block;background:#26d594;color:#fff;border-radius: 50px;padding:8px 20px;font-weight: 500;}
.tit_big span.blue {background:#188ef4;}
.tit_big span.red {background:#ff4d7e;}
.tit_big h2 {font-size:30px;font-weight: 800;margin:10px 0;line-height: 1.4;}
.tit_big p {font-size:15px;color:#3e4555;}
.tit_mdm {margin-bottom:20px;}
.tit_mdm h3 {font-size:22px;font-weight: 700;color:#333;}
.tit_mdm h3 {color:#3e4555;}
.tit_small {}
.tit_tiny {}

@media screen and (max-width:1024px){
  .tit_big h2 {font-size:26px;}
  .tit_big p {font-size: 14px;}
  .tit_mdm h3 {font-size:20px;}
}
@media screen and (max-width:960px){
  .pg_nav ul {justify-content: flex-start;}
  .pg_nav ul li a {padding: 0 15px;line-height: 50px;}
}
@media screen and (max-width:768px){
  .content {padding: 80px 40px 100px;}

  .pg_nav {padding: 0 20px;}
  .pg_nav ul li a {font-size: 16px;padding:0 15px;}

  .tit_big {margin-bottom:20px;}
  .tit_big h2 {font-size:26px;}
}
@media screen and (max-width:480px){
  .content {padding: 50px 25px 60px;}

  .pg_nav {padding: 0 10px;}
  .pg_nav ul li a {font-size: 12px;padding:0 10px;height:40px;line-height: 40px;}

  .tit_big {margin-bottom:15px;}
  .tit_big h2 {font-size:24px;}
  .tit_big p {font-size: 13px;}
  .tit_mdm h3 {font-size: 18px;}
}


/*-----------------------------------------------------------------------------
 *  Sub Foot Board
 *----------------------------------------------------------------------------*/

.sub_brd_list {display: flex;gap:50px;justify-content: space-between;}
.sub_brd_list .cont {width: 100%;border:1px solid #ddd;padding:30px 50px;border-radius:15px;}
.sub_brd_list .cont h2 {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;}
.sub_brd_list .cont h2 strong {font-size: 24px;font-weight: 600;color:#0F73E9;padding:10px 0;border-bottom:3px solid #0F73E9}
.btn_more {display: inline-flex;align-items: center;gap:6px;font-size: 16px;margin-left: 5px;}
.btn_more:after {content: "";display: inline-block;width: 8px;height:8px;border:2px solid #888;border-left: none; border-bottom: none; transform: rotate(45deg);}
.sub_brd_list .cont ul {}
.sub_brd_list .cont ul li {margin:15px 0;}
.sub_brd_list .cont ul li a {position: relative;display: flex;justify-content: space-between;gap:10px;font-size: 17px;font-weight: 500;padding-left: 10px;}
.sub_brd_list .cont ul li a:before {content:"";position: absolute;left: 0; top:8px; display: block;width: 4px;height: 4px;border-radius: 50%;background:#666;}
.sub_brd_list .cont ul.rct_cont li a:before {background:#0F73E9}
.sub_brd_list .cont ul li a:hover {color:#0F73E9;}
.sub_brd_list .cont ul li a .subject {font-weight: 600;}
.sub_brd_list .cont ul li a .subject em {margin-right: 10px;color:#0F73E9;}
.sub_brd_list .cont ul li a .list_date {font-size: 16px;}
.sub_brd_list .cont ul li a .list_mbr {display: inline-flex;align-items:center ;gap:5px; font-size: 16px;}
.sub_brd_list .cont ul li a .list_mbr i {display: block;width: 18px;height: 18px;line-height: 18px;text-align: center;font-size: 10px;font-weight: 500;color:#fff;font-style: normal;border-radius: 4px;}
.sub_brd_list .cont ul li a .list_mbr i.i_blue {background:#036EB8}
.sub_brd_list .cont ul li a .list_mbr i.i_orange {background:#EA5514}
.sub_brd_list .cont ul li a .list_mbr i.i_gray {background:#898989}
.sub_brd_list .cont ul li a .list_mbr i.i_green {background:#22AC38}


@media screen and (max-width:1024px){
  .sub_brd_list {gap: 40px;}
  .sub_brd_list .cont h2 strong {font-size: 20px;}
  .sub_brd_list .cont ul li a {font-size: 16px;}
  .sub_brd_list .cont ul li a .list_date {font-size: 15px;}
  .sub_brd_list .cont ul li a .list_mbr {font-size:15px;}
}
@media screen and (max-width:960px){
  .sub_brd_list {flex-direction: column;}
}
@media screen and (max-width:768px){
  .btn_more {font-size: 15px;}
  .sub_brd_list .cont ul li a .list_mbr {font-size:14px;}
}
@media screen and (max-width:640px){
  .sub_brd_list .cont {padding: 25px 40px;}
}
@media screen and (max-width:480px){
  .sub_brd_list {gap: 20px;}
  .sub_brd_list .cont {padding: 20px 30px;}
  .sub_brd_list .cont h2 strong {font-size: 18px;}
  .btn_more {font-size: 14px;}
  .sub_brd_list .cont ul li {margin: 0}
  .sub_brd_list .cont ul li + li {border-top: 1px solid #ddd;}
  .sub_brd_list .cont ul li a {display: block;font-size: 15px;padding:15px 0 15px 10px}
  .sub_brd_list .cont ul li a:before {top: 22px;}
  .sub_brd_list .cont ul li a .list_date,
  .sub_brd_list .cont ul li a .list_cont {display: block; margin-top:5px;font-size:13px;}
  .sub_brd_list .cont ul li a .list_mbr {font-size:13px;}
}



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

 *  Slider

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

/* Slider Right : Width 1400일 경우 */
.slider_right {padding-left: calc(50% - 700px)}

/* Slider Column : 왼쪽 컨텐츠가 있을 경우 Width 1400일 경우 */
.slider_column {display: flex;align-items: stretch;padding-left: calc(50% - 700px)}
.slider_column .left_cont {flex-shrink: 0; width: 400px;background:#f2f2f2;}

/* Slider Tween : 슬라이더 2개 연동 */
.slider_tween {display: flex;justify-content: space-between;}
.slider_tween .swiper-container {width: 50%}

/* Slider Gallery : 갤러리 형태 */
.slider_gallery {max-width: 1400px;margin: 0 auto;}
.slider_gallery .swp_thumb .swiper-slide {border:2px solid transparent;}
.slider_gallery .swp_thumb .swiper-slide-active {border-color: #bc4f38;}


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

 *  Table

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

/*-----------------------------------------------------------------------------
 *  Row Table : 가로형 기본 테이블
 *----------------------------------------------------------------------------*/

.tb_row {}


/*-----------------------------------------------------------------------------
 *  Column Table : 세로형 기본 테이블
 *----------------------------------------------------------------------------*/

.tb_col {}


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

 *  Button Set : 버튼 셋

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

.btn.txic a {display: inline-block;padding-right:15px;}
.btn.ictx a {display: inline-block;padding-left:15px;}
.btn.wh a {color:#fff;}
.btn.gr a {color:#444;font-weight: 600;}
.btn.bdr a {border:1px solid #ddd;border-radius: 10px;transition: all 0.3s ease;}
.btn.bdr a:hover {border:1px solid #bbb;box-shadow: 0 5px 10px rgba(0,0,0,0.1)}
button.bl {width:100%;background:#0f9adc;color:#fff;padding:20px;border-radius: 10px;font-size:20px;font-weight: 600;transition: all 0.3s ease;}
button.bl:hover {background:#0a83bd;}
.bott_btns {display: flex;margin-top:50px;}
.bott_btns.right {justify-content: flex-end;}
.bott_btns.right .btn {margin-left:10px;}
.bott_btns.center {justify-content: center;}
.bott_btns.center .btn {margin:0 5px;}
.bott_btns .btn a {width:150px;display: block;line-height:60px;padding:0 10px;border-radius: 10px;text-align: center;font-size:20px;font-weight: 500;}
.btn.bl a {color:#fff;background:#0f9adc;}
.btn.bl a:hover {background:#0b7db4;}
.btn.gray a {color:#666;background:#f4f4f4;}
.btn.gray a:hover {color:#222;background:#e5e5e5;}
.btn.sky a {color:#1981c5;background:#ebf4fa;}
.btn.sky a:hover {color:#0d6ead;background:#d6eaf7;}

@media screen and (max-width:1024px){
  .bott_btns .btn a {width: 120px;line-height: 50px;font-size: 18px;}
}
@media screen and (max-width:768px){
  button.bl {font-size:20px;}

  .bott_btns .btn a {width: 100px;font-size:16px;}
}
@media screen and (max-width:480px){

  button.bl {font-size: 18px; padding:18px 20px;}
  .bott_btns {margin-top: 40px;}
  .bott_btns.right .btn {margin-left:5px;}
  .bott_btns .btn a {width:68px;}
}

i.fi {display: inline-block;vertical-align: middle;line-height: 1;}
.btn.radi a {display: inline-block;border-radius: 50px;}
.btn.red a {background:#ff4d7e;color:#fff;}
.btn.red a:hover {background:#ff0b4e !important;color:#fff;}
.btn.wht a {background:#fff;color:#000;}
.btn.wht a:hover {background:#f4f8fa;color:#000;}
.btn_detail a {display: inline-block;font-size:18px;font-weight: 500; padding-right:25px;}
.btn_detail a:hover {color:#2cdd9b}
.btn_detail a i {opacity: 0; font-size: 22px;transition: all 0.3s ease}
.btn_detail a:hover i {opacity: 1; margin-left: 10px;color:#2cdd9b ;}
.btn_go a {position:relative;display: inline-block;font-size:16px;padding-right:20px;color:#000;font-weight: 600;line-height: 1}
.btn_go a:hover {color:#ff4d7e}
.btn_go a:after {position:absolute;top:50%;right:0;content:'';display: block;border-left:7px solid #ff4d7e;border-top:5px solid transparent;border-bottom:5px solid transparent;transform: translateY(-50%);}

@media screen and (max-width:768px){
  .btn_detail a {font-size: 16px;padding-right: 25px;}
  .btn_detail a i {font-size: 18px;}
  .btn_detail a:hover i {margin-left:5px;}
  .btn_go a {font-size: 15px;padding-right: 15px;}
  .btn_go a:after {border-left: 6px solid #ff4d7e;border-top: 4px solid transparent;border-bottom: 4px solid transparent;}
}

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

 *  Modal

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

.modal_wrap {display: none;position: fixed;width:90%;max-width: 480px;left: 50%;top: 50%;transform: translate(-50%, -50%);border: 1px solid #000;border-radius: 10px; overflow: hidden;box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);background: #fff;z-index: 1002;}
.modal_terms,
.modal_policy {max-width: 1200px;}
.modal_top {position: relative;background: #f6f6f6;padding: 20px 30px;}
.modal_top h3 {font-size: 20px;font-weight: 600;}
.btn_modal_close {position: absolute;top: 50%;right: 30px;transform: translateY(-50%);}
.btn_modal_close span {display: block;width:20px;height:20px;line-height: 20px; font-size: 0; cursor: pointer;}
.btn_modal_close span i {font-size: 25px; }
.modal_cont {max-height: calc(85vh - 66px);margin: 30px 10px 50px;background: #fff;font-size: 15px;overflow: hidden;overflow-y: auto;}
.modal_cont .scr_cont {height: calc(100% - 100px);padding: 0 50px;}
.title_guide {font-size: 20px; font-weight: 600;margin-bottom: 20px;}
.modal_terms strong,
.modal_policy strong {display: flex;align-items: center; font-size: 18px;margin-bottom: 15px;}
.modal_policy strong img {margin-right:10px;}
.modal_terms p,
.modal_policy p {margin-bottom: 30px;line-height: 1.6;}
.modal_policy table {margin-bottom: 30px;}
.modal_policy table tr th,
.modal_policy table tr td {font-size: 16px; color: #000; font-weight: 600;padding:15px;}
.modal_policy table.table_organ1 {border:1px solid #e5e5e5;border-radius: 10px;margin-bottom: 50px;}
.modal_policy table.table_organ1 tr th,
.modal_policy table.table_organ1 tr td {text-align: center;font-size: 16px; color: #000; font-weight: 600;padding: 20px;}
.modal_policy img {display: inline-block;vertical-align: middle;}
.modal_policy table.table_organ1 img {max-width: 60px;margin-bottom: 10px;}
.modal_policy table tr td a:hover {color:#000;}
.modal_policy table.table_organ3 tr:not(:first-child) td {border:1px solid #e5e5e5;}
.modal_policy table.table_organ3 tr:not(:first-child) td {position: relative;padding-left: 60px;}
.modal_policy table.table_organ3 tr:first-child td {padding: 10px 0;}
.modal_policy table.table_organ3 tr td a > img {position: absolute;left:10px;top:50%;transform: translateY(-50%)}
.modal_policy table.table_organ2 {border-top:2px solid #000;}
.modal_policy table.table_organ2 tr th,
.modal_policy table.table_organ2 tr td {border-bottom:1px solid #ddd;text-align: center;font-size: 14px;padding: 10px 5px;}


.modal_wrap + .back_bg {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background:rgba(0,0,0,0.7);}


@media screen and (max-width:768px){
  .modal_top {padding: 15px 20px;}
  .modal_top h3 {font-size: 18px;}
  .btn_modal_close {right: 20px;}
  .modal_cont .scr_cont {height: calc(100% - 54px);padding: 0 20px;}
  .title_guide {font-size: 18px;}
  .modal_terms strong, .modal_policy strong {font-size:16px;}
  .modal_policy table.table_organ1 tr th, .modal_policy table.table_organ1 tr td {font-size: 15px;padding: 15px;}
  .modal_policy table.table_organ1 img {max-width: 50px;}
  .modal_policy table tr th, .modal_policy table tr td {font-size:15px;padding:10px;word-break: keep-all; word-wrap: break-word;}
  .modal_policy table.table_organ3 tr:not(:first-child) td {padding-left: 50px;}
  .modal_policy table.table_organ3 tr td a > img {max-width: 30px;}
}
@media screen and (max-width:640px){
  table.table_organ3,
  table.table_organ3 tr,
  table.table_organ3 tbody,
  table.table_organ3 tr th,
  table.table_organ3 tr td {display: block;width: 100%;}
  .modal_policy table.table_organ3 tr:not(:first-child) td {margin: -1px 0 0 0}
  .modal_policy strong img {margin-right: 5px;}
}