@charset "utf-8";

body.no-scroll{ overflow:hidden; }

.inner { width: 100%;  padding: 0 var(--inner-pd);}
.flex{display: flex;align-items: center;}
.grid-2{display: grid;grid-template-columns: repeat(2,1fr);}
.grid-3{display: grid;grid-template-columns: repeat(3,1fr);}
.grid-4{display: grid;grid-template-columns: repeat(4,1fr);}
.grid-5{display: grid;grid-template-columns: repeat(5,1fr);}
.grid-6{display: grid;grid-template-columns: repeat(6,1fr);}

br.br_pc{display: inline-block;}
br.br_mo{display: none;}

.fw-300{font-weight: 300;}
.fw-400{font-weight: 400;}
.fw-500{font-weight: 500;}
.fw-600{font-weight: 600;}
.bold, .fw-700{font-weight: bold;}
.fw-800{font-weight: 800;}



/* **************************************************************** */
/*헤더*/
#header,
#header .gnb > li,
#header .gnb > li > a,
#header .gnb > li .depth,
#header .gnb > li .depth a{ transition: .4s; }
#header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-hei); background-color: transparent; background-position: 99% 97%; background-size: 30%; background-repeat: no-repeat; z-index: 99; overflow: visible;  }
#header .lft-wr{gap: 9.2rem}
#header .logo { width: 17.9rem; height: 3.8rem; background-image: url(/theme/basic/img/cmn/hr_logo1.svg); background-position: center; background-repeat: no-repeat; background-size: contain; }
#header .inner { justify-content: space-between; width: 100%; height: var(--header-hei); padding: 0 var(--inner-pd); }
#header .gnb{transition: opacity .25s ease;}
#header .gnb.hide{ opacity:0; visibility:hidden; }
#header .gnb > li { position: relative; height: 100%; line-height: var(--header-hei); }
#header .gnb > li > a { display: block; color: #fff; font-size: var(--fontSize-20); font-weight: 500; text-align: center;}
#header .gnb .depth { position: absolute; top: var(--header-hei); left: 50%; width: auto; height: auto; opacity: 0; visibility: hidden; transform: translate(-50%);padding-bottom: 4rem;}
#header .gnb .depth > li { display: block; text-align: center; line-height: 21px; }
#header .gnb .depth > li:not(:last-child){padding-bottom: 1.3rem;}
#header .gnb .depth > li > a { position: relative;color: rgba(255, 255, 255, 0.7); font-size: var(--fontSize-16); font-weight: 400;text-align: center;}
#header .gnb::after { position: absolute; width: 100%; height: 100%; content: ''; z-index: -1; }
#header.hidden { transform: translateY(calc(var(--header-hei) * -1)); }
#header.on, #header.scroll { background-color: #00000063; }
#header.on .gnb > li > a{ color: #fff; font-weight: 600; }
#header.on .gnb > li .depth { min-height: 24rem; opacity: 1; visibility: visible; transform: translate(-50%, 0); }
#header .btn-right { gap: 2rem; } 
#header .link-btn { display: flex; gap: 1rem; justify-content: center; align-items: center; padding: .5rem 2rem; border-radius: 5rem; border: 1px solid #fff;  transition: .4s;} 
#header .link-btn span { color: #fff; font-size: var(--fontSize-20); font-weight: 500; } 
#header .link-btn:hover { border-color: var(--color-point); background: var(--color-point);} 
#header .link-btn path  {color: #fff;}

#header .gnb > li,
#header .gnb .depth{width: 15rem;padding: 0 2rem;}
#header .gnb:hover > li,
#header .gnb:hover .depth{width: 18rem;}
#header .gnb > li:hover,
#header .gnb > li:hover .depth{background-color: var(--color-point);}
#header .gnb > li:hover > a,
#header .gnb > li .depth a:hover{color: #fff;}

/*헤더 메뉴 버튼*/
#header .ham_menu_btn { display: none; align-content: space-around; grid-gap:0; position: relative; width: 3rem; height: 3rem; margin-left: 2rem; }
#header .ham_menu_btn span { width: 100%; height: 2px; background-color: #fff; }
#header.ham_on .ham_menu_btn span { position: absolute; top: 50%; left: 0; }
#header.ham_on .ham_menu_btn span:nth-child(2) { opacity: 0; visibility: hidden; }
#header.ham_on .ham_menu_btn span:nth-child(1) { transform: rotateZ(45deg); }
#header.ham_on .ham_menu_btn span:nth-child(3) { transform: rotateZ(-45deg); }

/* 헤더 사이트맵 버튼 */
#header .siteMap-btn{position:relative;width:60px; height:60px;padding:0; border:0; background:transparent; cursor:pointer;display:flex; align-items:center; justify-content:center;}
#header .siteMap-btn .txt{ display:inline-block; font-size:var(--fontSize-14); color:#fff; }
#header .siteMap-btn.is-open .txt{ display:none; }
#header .siteMap-btn .line{position:absolute; left:10px; right:10px;height:2px; background:#fff; border-radius:2px;transition: transform .22s ease, top .22s ease, opacity .18s ease, background-color .2s ease;}
#header .siteMap-btn .line:first-child{ top:14px; }
#header .siteMap-btn .line:last-child { top:44px; }
#header .siteMap-btn.is-open .line{top:50%;transform-origin:center;transform:translateY(-50%) rotate(45deg);background-color: #fff;}
#header .siteMap-btn.is-open .line:last-child{transform:translateY(-50%) rotate(-45deg);}

@media all and (max-width:1240px) {
  #header .gnb > li > a { font-size: 1.8rem; }
  #header .gnb .depth > li > a { font-size: 1.6rem; }
  #header.on .gnb > li .depth { min-height: 15.6rem; }
}
@media all and (max-width:768px) {
  #header .gnb, #header .siteMap-btn { display: none; }
  #header .ham_menu_btn { display: grid; }
  #header .ham_menu_btn  span,
  #header.scroll .ham_menu_btn span { background-color: #000; }

  .index #header .ham_menu_btn span,
  .index #header.scroll .ham_menu_btn span{background-color: #fff}
}
@media all and (any-pointer:coarse) {
  #header .gnb, #header .siteMap-btn { display: none; }
  #header .ham_menu_btn { display: grid; }
  #header .ham_menu_btn  span,
  #header.scroll .ham_menu_btn span { background-color: #000; }

  .index #header .ham_menu_btn span,
  .index #header.scroll .ham_menu_btn span{background-color: #fff}
}
@media all and (max-width:640px) {
  #header .logo{width: 12rem;height: 3.2rem;}
}

/*모바일 메뉴*/
.ham_menu { display: block; position: fixed; right: 0; top: 0; z-index: 1; width: 100vw; height: 100vh; padding:var(--header-hei) var(--inner-pd); background: var(--color-point); overflow: hidden; opacity: 0; visibility: hidden; transition: .5s; z-index: 4; transform: translateX(100%); }
.ham_menu a { color: #fff; }
.ham_menu > ul { width: 100%; padding-top: var(--header-hei); }
.ham_menu > ul > li { width: 100%; line-height: 2; position: relative; }
.ham_menu > ul > li:after,.ham_menu > ul > li:before { content: ""; display: block; width: 20px; height: 1px; position: absolute; right: 20px; top: 24px; background: #ccc; transform:rotate(0deg); transition-duration: 0.4s }
.ham_menu > ul > li:after { transform:rotate(0); }
.ham_menu > ul > li:before { transform:rotate(90deg); }
.ham_menu > ul > li > a { font-size: 2.4rem; font-weight: 600; display: block;width: 100%;height: 100%;}
.ham_menu > ul > li > .gnb-depth { display: none; position: relative; padding: 1.5rem; background: rgba(255, 255, 255, 0.11);  }
.ham_menu > ul > li > .gnb-depth a { display: block; font-weight: 200; font-size: 1.8rem;line-height: 34px;}
.ham_menu > ul > li.active:after { transform:rotate(180deg); transition-duration: 0.4s }
.ham_menu > ul > li.active:before { transform:rotate(360deg); transition-duration: 0.4s }
.ham_menu.ham_on { opacity: 1; visibility: visible; transform: translateX(0); }
.ham_menu > ul > li:nth-child(3):after, .ham_menu > ul > li:nth-child(3):before,
.ham_menu > ul > li:nth-child(4):after, .ham_menu > ul > li:nth-child(4):before{display: none;}


/* 헤더 사이트맵 영역*/
.siteMap-wr{position: fixed; inset: 0;background: rgba(0,0,0,.92);padding: calc(var(--header-hei) + 24px) var(--inner-pd) 32px;opacity: 0; visibility: hidden; transform: translateY(8px);transition: .25s ease; z-index: 98;}
.siteMap-wr.open{ opacity:1; visibility:visible; transform:none; }
.siteMap-wr .gnb{ gap: 4rem; align-items: flex-start;justify-content: space-between;margin-top: var(--header-hei);padding: 0 20rem}
.siteMap-wr .gnb > li{width: calc(100% / 5);}
.siteMap-wr .gnb > li > a{ color:#fff; font-size: 2.4rem; font-weight:800; display:block; margin-bottom: 14px; padding-bottom: 2rem;}
.siteMap-wr .depth{display: grid;grid-gap: .8rem}
.siteMap-wr .depth > li{ line-height: 1.9; }
.siteMap-wr .depth > li > a{ color:#cfd2d5; font-size: 1.8rem;white-space: nowrap;}
.siteMap-wr .depth > li > a:hover{ color:#fff; }


/* **************************************************************** */
/*풋터*/
.footer{background-color: #E8F1EF;}
.ft-siteMap{grid-gap: 8.5rem;padding: 7.6rem 0 9.4rem;margin-left: 28rem;}
.ft-siteMap .m-tit{display: block;font-size: var(--fontSize-20);line-height: 24px;font-weight: 600;letter-spacing: -0.4px;}
.ft-siteMap .ft-menu{margin-top: 3.8rem;}
.ft-siteMap .ft-menu > li{width: 100%;}
.ft-siteMap .ft-menu > li > a{font-size: var(--fontSize-16);line-height: 32px;}
.ft-info-wr{gap: 7.9rem;padding: 3.6rem 0 5.2rem;border-top: 1px solid #D4D9E3;}
.ft-info-wr > li.lft-bx{display: grid;grid-gap: 4.2rem}
.select-box {width: 206px;position: relative;}
.select-box select {
  width: 100%;
  height: 4.2rem;
  padding: 1rem 2rem;
  border: 1px solid rgba(93, 105, 129, 0.30);
  background-color: #E8F1EF;
  font-size: var(--fontSize-18);
  font-weight: 400;
  color: #5D6981;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}
.select-box::after {content: "";position: absolute;background: url(/theme/basic/img/cmn/ico_sct_arrow.svg) no-repeat center/ contain;width: 1.6rem;height: 1.6rem;top: 50%;transform: translateY(-50%);right: 2rem;}
.ft-info-wr strong{display: block;font-weight: 600;padding-bottom: 1rem;}
.ft-info-wr strong.none{color: #E8F1EF;}
.ft-info-wr strong,
.ft-info-wr p{font-family: 'Noto Sans KR';font-size: var(--fontSize-16);color: #333;line-height: 28px;}
.ft-info-wr p.flex{gap: 5px}
.ft-info-wr p.flex b{font-weight: 600;}
.ft-info-wr .infoBx{gap: 4rem;align-items: flex-start;}
.footer .copy-wr{margin-top: 6rem;}
.footer .copy-wr .copy{font-size: var(--fontSize-14);}
.footer #ftAdm {padding-left: .5rem;}
.footer #ftAdm li:not(:last-child) {margin-right: .5rem}
.footer #ftAdm li a { display: inline; padding: 0.3em 0.5em; border: 1px solid #b1b1b1; border-radius: 1em; font-size: 1rem; color: #b1b1b1;}


@media all and (max-width:1400px) {
  .ft-siteMap{grid-gap: 3rem}
  .ft-siteMap .ft-menu{display: grid;grid-gap: .8rem}
  .ft-siteMap .ft-menu > li > a{line-height: 21px;}
  .ft-info-wr .infoBx{flex-direction: column;align-items: flex-start;gap: 3rem}
  .ft-info-wr strong.none{display: none;}
}
@media all and (max-width:960px) {
 .ft-siteMap{margin-left: 0;}
 .ft-info-wr{flex-direction: column;align-items: flex-start;gap: 6rem;}
}
@media all and (max-width:768px) {
  .footer .logo{width: 12rem;}
  .select-box select{height: 3.5rem;font-size: var(--fontSize-15);padding: .5rem 1.5rem}
  .ft-siteMap{grid-template-columns: 1fr;padding: 3rem 0;grid-gap: 1rem}
  .ft-siteMap .m-tit{font-size: var(--fontSize-15);}
  .ft-siteMap .ft-menu{display: none;}
  .ft-info-wr{gap: 3rem;padding: 3rem 0}
  .ft-info-wr > li.lft-bx{grid-gap: 2rem}
  .ft-info-wr .infoBx{gap: 2rem}
  .ft-info-wr strong, .ft-info-wr p{font-size: var(--fontSize-14);line-height: 21px;}
  .ft-info-wr strong{padding-bottom: .5rem;}
  .ft-info-wr p:not(:last-child){padding-bottom: .6rem;}
  .ft-info-wr p.flex{align-items: flex-start;}
  .ft-info-wr p br.br_mo{display: inline-block;}
  .footer .copy-wr{flex-direction: column;align-items: flex-start;margin-top: 3rem;}
}


.fix-btn-wr{
  align-items: flex-end;
  flex-direction: column;
  position: fixed;
  bottom: 2rem;
  right: 0;
  z-index: 90;
  opacity: 0;
  gap: 4rem;
  pointer-events: none;
  transition: opacity .35s ease, bottom .35s ease;
}
.fix-btn-wr.on{
  opacity: 1;
  pointer-events: auto;
}
.fix-btn-wr.nofixed { bottom: 32rem; }
.iq-fix-btn{width: 66px;height: 210px}

/*탑 버튼*/
#top_btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:6rem;
  height:6rem;
  line-height:50px;
  border:1px solid #cdcdcd;
  border-radius:100%;
  text-align:center;background:rgba(255,255,255,0.5);
  cursor:pointer;
  position: relative;
  right: 1rem
}
#top_btn .material-symbols-rounded{display:block;}
#top_btn:hover{border-color:#fff;background:#fff;}


@media all and (max-width:960px) {
  .fix-btn-wr.nofixed { bottom: 28rem; }
  .iq-fix-btn{width: 62px;height: 197px}
  .iq-fix-btn .img{width: 100%;height: 100%;object-fit: contain;object-position: center}
}
@media all and (max-width:768px) {
  .iq-fix-btn{width: 45px;height: 140px}
  #top_btn{width: 5rem;height: 5rem}
}