@charset "utf-8";

/*
 * File Name : layout.css
 * 작성일 : 2024-03-19
 */


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

 *  Common

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

body {width:100%;height: 100%; min-height: 100%; color:#666;font-size:15px;line-height:1.5;font-family:'Pretendard','맑은 고딕', 'Dotum', '돋움', verdana, sans-serif;word-break: keep-all;overflow:hidden;overflow-y:auto;}
#wrap {position: relative;min-width:350px;width:100%;height: 100%;}

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

/* Mobile Menu Btn */
#mMenuBtn {display: none; position: fixed; right:25px; top:20px;z-index: 1001 }

#mBtn{display:flex;align-items:center;flex-direction:column;cursor:pointer;}
#mBtn span{background-color:#fff;width:25px;height:2px;margin:3px 0;display:block;transition: all .4s ease;transform-origin:0 0;}
#mBtn.fix span,
#mBtn.sub span {background-color:#f59c00;}
#mBtn.scr span{background-color:#000;}
#mBtn.on span{background-color:#fff;}
#mBtn.on span:nth-child(1) {transform: rotate(45deg) translate(3px, -3px);}
#mBtn.on span:nth-child(2) {Transform: scaleX(0);}
#mBtn.on span:nth-child(3) {transform: rotate(-45deg) translate(1px, 3px);}


/* Mobile Menu */
.menuMo {position:fixed;width:320px;height:100% !important;right:-320px;top:0;background:#0d1220;z-index:1000;transition:right 0.3s;}
.menuMo_head {border-bottom: 1px solid rgba(255,255,255,0.1);padding:30px 30px 20px 30px;}
.menuMo_head h2 {font-size: 18px;letter-spacing: 0.04em; font-weight:700;}
.menuMo_head h2 a {height: 100%;color:#fff;font-weight: 700;}
.menuMo_head h2 a strong {color:#f59c00;}

.menuMo > ul.menuMoCont {height: calc(100% - 138px); overflow-x:hidden;overflow-y:auto;}
.menuMo > ul.menuMoCont > li {border-bottom: 1px solid rgba(255,255,255,0.08);}
.menuMo > ul.menuMoCont > li + li {}
.menuMo > ul.menuMoCont > li > a {position: relative;display:block;padding:20px 30px;font-size:18px; font-weight:600; color:#eee;}
.menuMo > ul.menuMoCont > li > a:after {content: "";position: absolute;right:25px;top:30px;width: 8px;height: 8px;border:2px solid #ccc;border-top:none;border-left:none;transform: rotate(-45deg)}

.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:1024px){
  #mMenuBtn {display:block;top:18px}
}
@media screen and (max-width:768px){

}
@media screen and (max-width:480px){
  #mMenuBtn {top:20px;right:15px;}
  #mBtn span{width:23px;margin:2px 0;}
  #mBtn.on span:nth-child(1) {transform:rotate(45deg) translate(4px, -2px);}
  #mBtn.on span:nth-child(3) {transform:rotate(-45deg) translate(-2px, 6px);}
}

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

#header {position:fixed;left: 0;top: 0;width: 100%;height:86px; border-bottom: 1px solid rgba(255,255,255,0.15);background:rgba(0,0,0,0.07);z-index: 100;transition: all 0.3s ease}
#header.sub {background:#fff;border-bottom: 1px solid #eaeaea;}
#header.dark {background:rgba(0,0,0,0.8);}
#header.fix {background:#fff;box-shadow: 0 10px 10px rgba(0,0,0,0.05)}
#header .inr {display: flex; justify-content: space-between;align-items: center;align-content: center;height: 100%;}
#header .inr h1.logo {width: 160px;height: 60px; flex-shrink: 0;background:url("../images/common/logo.svg") no-repeat left center;}
#header.fix .inr h1.logo,
#header.sub .inr h1.logo {background:url("../images/common/logo_dark.svg") no-repeat left center;}
#header .inr h1.logo a {display: block; font-size: 0;height: 100%; color: #fff;}
#header .inr h1.logo a strong {color:#f59c00}
#header .inr h1.logo a img {display: block}

/* Gnb */
#gnb {margin: 0 auto;}
#gnb ul {display: flex;}
#gnb ul li {position: relative;margin: 0 20px;overflow: hidden;}
#gnb ul li a {display: block;font-size: 18px; font-weight: 600; color: #fff;line-height: 86px; padding: 0 10px;}
.fix #gnb ul li a,
.sub #gnb ul li a {color: #000;}
#gnb ul li a:before {content: "";position: absolute;left: 0;bottom: 0; width: 0;height: 1px; background:#f59c00;transition: all 0.3s ease;}
#gnb ul li a:after {content: "";position: absolute;left:50%;bottom: 0; transform: translateX(-50%) translateY(50px); border-bottom:8px solid #f59c00; border-left: 5px solid transparent; border-right:5px solid transparent ;transition: all 0.3s  0.1s ease;}
#gnb ul li:hover a,
#gnb ul li.on a {color:#f59c00;}
#gnb ul li.on a:before {width: 100%;}
#gnb ul li.on a:after {transform: translateX(-50%) translateY(0)}

/* Btn */
.hdr_btn {flex-shrink: 0; width:230px; height: 60px; line-height: 60px;border-radius: 10px;overflow: hidden;}
.hdr_btn a {display: flex;align-items: center;height: 100%;line-height: 1; padding: 0 30px; font-size:18px; color:#000; font-weight: 600; background:#f59c00;}
.hdr_btn a i.icon {display: inline-block; margin-right: 10px;flex-shrink: 0;}
.hdr_btn a i.icon img {display: block;}
.hdr_btn a .arr {display: inline-block;flex-shrink: 0; vertical-align: middle;width:20px;height: 12px;text-indent: -9999px;background:url("../images/icon/arr_long_bl.png") no-repeat right top;margin-left: 20px;overflow: hidden; transition: all 0.3s ease}
.hdr_btn a:hover .arr {width: 25px;}

@media screen and (max-width:1200px){
  #gnb {margin-left:40px;}
  #gnb ul li {margin: 0 10px;}
}
@media screen and (max-width:1024px){
  #header {height: 60px;}
  #header .inr h1.logo {font-size:18px;width: 120px}

  #gnb {display: none;}
  #gnb ul li {margin:0 0 0 20px;}
  #gnb ul li a {font-size:15px;line-height: 60px;}

  .hdr_btn {position: fixed;left: 0;bottom: 0;top: auto;right: auto; width: 100%;height: 60px;border-radius: 0;z-index: 501}
  .hdr_btn a {justify-content: center;}
}
@media screen and (max-width:480px){
  #header .inr h1.logo {font-size:16px;width: 100px}

  #gnb ul li {margin: 0 0 0 15px;}
  #gnb ul li a {padding: 0;font-size: 14px}
}


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

#container {}

#fp-nav {display:none !important;}
#menu {position:fixed;top:50%;left:40px;transform:translateY(-50%);z-index:100;}
#menu li {margin:6px 0;}
#menu li a {display:inline-block;height:36px;line-height:36px;font-size:16px;font-weight:400;color:#aaa;}
#menu li:hover a {color:#fff;}
#menu li.active a {color:#fff;font-weight:600;border-bottom: 1px solid #fff;}


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

#footer {background:#f6f6f6;border-top:1px solid #e5e5e5;}
#footer .inr_box {display: flex; justify-content: space-between; padding: 30px 0}
#footer .inr_box > div {width: 50%;}
#footer .inr_box .foot_logo {display: block; font-size: 26px; color:#444; font-weight: 800;width:260px;margin-bottom: 20px;}
#footer .inr_box .sns_list {display: flex;margin-left:5px}
#footer .inr_box .sns_list li {width: 35px;height: 35px;margin-right:10px;font-size: 0}
#footer .inr_box .sns_list li a {display: flex;justify-content: center; align-items: center;height: 100%;background:#888;border-radius: 50%;overflow: hidden}
#footer .inr_box .sns_list li:hover a {background:#222;}

#footer .ftr_menu {font-size:0;margin-bottom:20px;}
#footer .ftr_menu li {display: inline-block;vertical-align: middle;font-size:18px;}
#footer .ftr_menu li a {font-size:18px;color:#f59c00;}
#footer .ftr_menu li:hover a {color:#f59c00;}
#footer .ftr_menu li a strong {color:#f59c00;font-weight: 500;}
#footer .ftr_menu li + li:before {content:'';display: inline-block;vertical-align: middle;width:4px;height:4px;border-radius: 5px;background:#adb7c2;margin:0 20px;}

#footer .inr_box address {}
#footer .inr_box address span {display: inline-block;font-size: 16px; color:#444; font-weight:500; margin-bottom: 5px;}
#footer .inr_box address span + span {margin-left: 20px;}
#footer .inr_box .copyright {font-size: 13px;margin-top: 20px;}

@media screen and (max-width:1200px){
  #footer .inr_box > div.inr_left {width: 40%;}
  #footer .inr_box > div.inr_right {width: 60%;}
}
@media screen and (max-width:1024px){
  #footer .inr_box .foot_logo {font-size: 22px;width: 200px}
  #footer .inr_box address span {font-size: 15px;}
  #footer .inr_box .copyright {font-size: 12px;}
}
@media screen and (max-width:960px){
  #footer .inr_box address span + span {margin:0 15px 0 0;}
}
@media screen and (max-width:768px){
  #footer .inr_box {flex-direction: column;padding: 40px 0;}
  #footer .inr_box > div {width:100% !important;}
  #footer .inr_box > div.inr_right {margin-top: 30px;}
  #footer .inr_box .foot_logo {font-size: 20px;}
  #footer .inr_box address span {display: block;margin: 5px 0 0 !important;font-size:14px;}
  #footer .inr_box address br {display: none;}
  #footer .inr_box .sns_list li {width: 30px;height: 30px;margin-right: 5px;}
  #footer .inr_box .sns_list li a {padding:5px;}
}
@media screen and (max-width:480px){
  #footer .inr_box .foot_logo {width: 180px;}
}

/*-----------------------------------------------------------------------------
 *  Btn Top
 *----------------------------------------------------------------------------*/

.btn_top {position: fixed;right: 30px;bottom: 70px;height:50px;width:50px;cursor: pointer;border-radius: 50px;box-shadow: inset  0 0 0 2px rgba(0,0,0,0.1);z-index: 10;opacity: 0;visibility: hidden;transform: translateY(15px);-webkit-transition: all 200ms linear;transition: all 200ms linear;}
.btn_top.active-progress {opacity: 1;visibility: visible;transform: translateY(0);}
.btn_top::after {content:"";position: absolute;text-align: center;line-height: 50px;left: 0;top: 0;height:50px;width:50px;cursor: pointer;display: block;background:url("../images/common/btn_top_icon.png") no-repeat center center;background-size: 12px auto;opacity: 0.5; z-index: 1;-webkit-transition: all 200ms linear;transition: all 200ms linear;}
.btn_top:hover::after {opacity: 1;}
.btn_top::before {content:"";position: absolute;opacity: 0;left: 0;top: 0;height:50px;width:50px;cursor: pointer;display: block;background:url("../images/common/btn_top_icon.png") no-repeat center center;background-size: 12px auto;z-index: 2;-webkit-transition: all 200ms linear;transition: all 200ms linear;}
.btn_top:hover::before {opacity: 1;}
.btn_top svg path { fill: none; }
.btn_top svg.progress-circle path {stroke: #ffc600;stroke-width:6;box-sizing:border-box;-webkit-transition: all 200ms linear;transition: all 200ms linear;}

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


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

/* Vertical Padding */
.vPad40 {padding:40px 0;}
.vPad50 {padding:50px 0;}
.vPad100 {padding:100px 0;}


/* Horizontal Padding */
.hPad30 {padding:0 30px;}
.hPad40 {padding:0 40px;}
.hPad50 {padding:0 50px;}
.hPad100 {padding:0 100px;}


/* Both Padding */
.pad50 {padding: 50px;}
.pad100 {padding: 100px;}

@media screen and (max-width:768px){
  .hPad30 {padding: 0 25px;}
  .hPad40 {padding: 0 30px;}
  .hPad50 {padding:0 40px;}
}
@media screen and (max-width:480px){
  .hPad30 {padding: 0 20px;}
  .hPad40 {padding: 0 25px;}
  .hPad50 {padding:0 20px;}
}


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

/* Sub Visual */
#sub_visual {display: flex;flex-direction: column;justify-content: center;align-content: center;align-items: center;min-height: 250px;margin-top: 85px;border-bottom: 1px solid #eaeaea;}
#sub_visual h2 {font-size: 60px;font-weight: 800;color:#f59c00;letter-spacing: -0.02em;}
#sub_visual h2 em {display: block;font-size: 18px;font-weight:700; color: #888;letter-spacing: 0.08em;text-align: center;}

/* Sub Nav : 20241111 추가됨 */
.sub_nav {margin:20px 50px 10px;}
.sub_nav ul {display: flex;gap:20px;align-items: center;justify-content: space-between;padding: 10px;border-radius: 50px;border:1px solid #ddd; }
.sub_nav ul li {}
.sub_nav ul li a {display: block; font-size: 18px;font-weight: 500; color:#666;padding:8px 25px;border-radius: 50px;}
.sub_nav ul li:hover a {color:#000}
.sub_nav ul li.on a {background:#f59c00;color:#fff;}
/**/

/* Inner Box */
.inr_box {position: relative;max-width: 1200px;margin: 0 auto;padding:40px 0 40px;}

/* Image Block */
.imgBox img {display: block;}

/* Bckground Color */
.bgColor_1 {background-color: #f33c5f}
.bgColor_2 {background-color: #cde5ff}
.bgColor_3 {background-color: #92a7df}
.bgColor_4 {background-color: #475782}
.bgColor_5 {background-color: #212d4b}
.bgColor_6 {background-color: #ddff00}

/* Text Color */
.txt_darkBlue {color:#061230}
.txt_white {color: #fff;}

@media screen and (max-width:1024px){
  #sub_visual {min-height: 200px;margin-top: 60px;}
  #sub_visual h2 {font-size:50px;}
  #sub_visual h2 em {font-size: 16px;}
}
@media screen and (max-width:768px){
  #sub_visual {min-height: 150px;}
  #sub_visual h2 {font-size:40px;line-height: 1.3;}

  /* Sub Nav : 20241111 추가됨 */
  .sub_nav {margin:20px 30px 10px;}
  .sub_nav ul {gap:10px;}
  .sub_nav ul li a {font-size:15px;padding:6px 15px;}
}
@media screen and (max-width:480px){
  #sub_visual {min-height: 80px;}
  #sub_visual h2 {font-size:26px;letter-spacing: -0.01em;}
  #sub_visual h2 em {font-size: 13px;}

  /* Sub Nav : 20241111 추가됨 */
  .sub_nav {margin: 10px 20px;}
  .sub_nav ul {gap: 0;padding: 5px}
  .sub_nav ul li a {font-size: 14px;padding: 5px 12px;}

  .inr_box {padding:20px 0 20px;}
}


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

 *  Modal

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

/*-----------------------------------------------------------------------------
 *  Modal Window
 *----------------------------------------------------------------------------*/

.modal_win {position: fixed; left:0;top:0;width: 100%;height: 100%;background:rgba(0,0,0,0.7);opacity: 0;visibility: hidden; z-index: -1;transition: opacity 0.2s ease-in-out;}
.modal_win.on {opacity: 1;visibility: visible;z-index: 9999;}
.modal_wrap {position: absolute;width:90%;max-width:1200px;height:90%;max-height: 90%; left: 50%; top:50%;transform: translate(-50%,-50%);border-radius: 5px; overflow: hidden;box-shadow: 0 0 30px rgba(0,0,0,0.3);}
.modal_box {position: relative;height: 100%;background:#fff;}
.btn_modal_close {position: absolute;right:0;top:0;width:64px;height:64px;background:#000 url(../images/common/modal_close.png) no-repeat center center;background-size: 18px auto; text-indent: -9999px;z-index: 1000;}

.modal_wrap .modal_head {padding:15px 25px;}
.modal_cont {height: calc(100% - 65px); padding:50px 50px 80px; overflow: hidden;overflow-y: auto;scroll-behavior: smooth;}
.modal_cont h2 {font-size:40px; font-weight:800; color:#000;line-height: 1.1;margin-bottom: 20px;}
.modal_cont h2.center {text-align: center;}
.modal_cont h2 em {font-size: 30px;font-weight: 600;}
.modal_cont ul {margin-bottom: 30px;padding: 30px;border:1px solid #ccc;border-radius: 10px;}
.modal_cont ul li {position: relative; padding-left: 10px; font-size:18px;}
.modal_cont ul li:before {content: ""; position: absolute; left: 0; top:12px; display: inline-block; width: 5px; height: 5px; background:#444; border-radius: 50%;}
.modal_cont ul li strong { font-weight: 700; color:#000;}
.modal_cont ul li span {font-weight: 500; color:#222;}

@media screen and (max-width:1024px){
  .modal_cont h2 {font-size: 36px;}
  .modal_cont h2 em {font-size: 26px;}
}
@media screen and (max-width:768px){
  .modal_cont {padding: 40px 40px 60px;}
  .modal_cont h2 {font-size:30px;}
  .modal_cont h2 em {font-size: 20px;}

  .modal_cont ul li {font-size: 16px;}
  .modal_cont ul li:before {top: 10px;}
}
@media screen and (max-width:480px){
  .btn_modal_close {width: 40px;height: 40px;background-size:16px auto;}

  .modal_cont {padding: 30px 30px 50px;}
  .modal_cont h2 {font-size:26px;}
  .modal_cont h2 em {font-size: 18px;}

  .modal_cont ul {margin-bottom: 20px;padding:20px;}
  .modal_cont ul li {font-size: 15px;}
  .modal_cont ul li:before {top: 10px;}
}

/* ==============================
 *  Mobile Header Tuning (PEAP)
 * ============================== */
@media screen and (max-width: 768px) {

  /* 헤더 전체 높이+안쪽 여백 재조정 */
  #header {
    height: 70px;              /* 기존 높이 유지 */
    padding-top: 4px;         /* 위로 여백 추가 */
    box-sizing: border-box;    /* padding 포함해서 높이 계산 */
  }

  /* 로고 이미지가 너무 위에 붙지 않도록 약간 더 아래로 */
  #header .inr h1.logo {
    margin-top: 2px;
  }
}