@charset "utf-8";

/*
 * File Name : layout.css
 * 작성일 : 2025-05-28
 */


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

 *  Common

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

body {width:100%;height: 100%; min-height: 100%; color:#666;font-size:15px;line-height:1.5;letter-spacing: -0.02em; font-family:'Poppins','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:100px; border-bottom: 1px solid rgba(255,255,255,0.15);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:rgba(255,255,255,0.95);backdrop-filter:blur(7px);box-shadow: 0 10px 10px rgba(0,0,0,0.05);height: 70px}
#header .inr {display: flex; justify-content: space-between;align-items: center;align-content: center;height: 100%;}
#header .inr h1.logo { flex-shrink: 0;position: relative;padding-left: 60px;background:url("../images/common/logo.png") no-repeat left center;background-size: 45px}
#header.fix .inr h1.logo a,
#header.sub .inr h1.logo a {color:#000;}
#header .inr h1.logo a {display:flex;flex-direction: column;gap:5px;font-size:24px; font-weight: 700; color: #fff;line-height: 1;}
#header .inr h1.logo a strong {color:#f59c00}
#header .inr h1.logo a em {display: block; font-size: 15px;line-height: 1;font-weight: 600;letter-spacing: 0.02em;}
#header.fix .inr h1.logo a em {display: inline-block;}
#header .inr h1.logo a img {display: block}
#header .inr > strong {letter-spacing: 0.06em;color:#fff;font-size: 20px;font-weight: 800}

/* 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; height: 60px; line-height: 60px;border-radius:50px;overflow: hidden;}
.fix .hdr_btn {height: 55px;line-height: 55px}
.hdr_btn a {display: flex;align-items: center;height: 100%;line-height: 1; padding: 0 35px; font-size:18px; color:#000; font-weight: 600; background:#00fff6;}
.hdr_btn a:hover {background:#ffe400;}
.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: 15px;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: 80px;}
  #header .inr h1.logo {padding-left: 50px;background-size: 38px;}
  #header .inr h1.logo a {font-size: 22px;}
  #header .inr h1.logo a em {font-size: 17px;}
  /*#header .inr {justify-content: center;}*/

  #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 {height: 50px;line-height: 50px;}
  .hdr_btn a {justify-content: center;}
}
@media screen and (max-width:768px){
  #header .inr h1.logo {padding-left: 45px;background-size:35px;}
  #header .inr h1.logo a {font-size: 20px;}
  #header .inr h1.logo a em {font-size: 16px;}
  
  .hdr_btn a {padding: 0 30px;font-size: 16px;}
  .fix .hdr_btn {height: 50px;line-height:50px;}
}
@media screen and (max-width:480px){
  #header .inr h1.logo {padding-left: 35px;background-size: 28px;}
  #header .inr h1.logo a {flex-direction: column;justify-content: flex-start;align-items: flex-start;gap:3px;font-size: 17px;}
  #header .inr h1.logo a em {font-size:11px;}
  
  #gnb ul li {margin: 0 0 0 15px;}
  #gnb ul li a {padding: 0;font-size: 14px}
  
  .hdr_btn {height: 40px !important;line-height: 40px !important;}
  .hdr_btn a {padding: 0 20px;font-size: 15px;}
  .hdr_btn a i.icon {width:18px;}
}


/*-----------------------------------------------------------------------------
 *  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:#080c16;}
#footer .inr_box {display: flex; justify-content: space-between; padding: 100px 0}
#footer .inr_box > div {width: 50%;}
#footer .inr_box .foot_logo {display: block;font-family: "pretendard",sans-serif; font-size: 26px; color:#FFF; font-weight: 700;width:260px;margin-bottom: 20px;}
#footer .inr_box .footer_menu {display: grid;gap:6px}
#footer .inr_box .footer_menu li {}
#footer .inr_box .footer_menu li a {font-size: 18px;font-weight: 500; color:#ccc}
#footer .inr_box .footer_menu li:hover a {color:#fff;}
#footer .inr_box address {font-family: "pretendard",sans-serif; }
#footer .inr_box address span {display: inline-block;font-family: "pretendard",sans-serif; font-size: 16px; color:#ccc; font-weight:500; margin-bottom: 5px;}
#footer .inr_box address span + span {margin-left: 20px;}
#footer .inr_box address strong {font-size: 20px;font-weight: 600;color:#00fff6;letter-spacing: 0.02em}
#footer .inr_box .copyright {font-size: 12px;margin-top: 20px;color:#ccc;font-weight: 500;letter-spacing: 0.02em}

@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: 80px 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 strong {font-size: 18px;}
  #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;}
  #footer .inr_box .footer_menu li a {font-size: 16px;}
}
@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;mix-blend-mode: difference}
.btn_top:hover::before {opacity: 1;}
.btn_top svg path { fill: none; }
.btn_top svg.progress-circle path {stroke: #ff7800;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:200px 0 250px;}

/* 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: #2cedef}

/* Text Color */
.txt_darkBlue {color:#061230}
.txt_white {color: #fff;}
.txt_violet {color: #9369ff;}
.txt_gray {color: #aaa;}
.txt_gray2 {color: #666;}
.txt_lightBlue {color: #00b0f0;}
.txt_pink {color: #f33c5f;}
.txt_dark {color: #000;}

/* Text Style */
.txt_b_l {font-weight: 700;text-decoration: underline;}


@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;}
  .inr_box {padding: 80px 0 100px;}
}
@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:90px 0 100px;}
}


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

 *  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;}
}