@charset "utf-8";

.trans-x-wrap { position: relative; z-index: 1; overflow: hidden; }
.trans-x-wrap .trans-x-box { position: relative; overflow: hidden; }
.trans-x-wrap .trans-x-box > span { display: block; position: relative; transition: .3s ease-in-out; }
.trans-x-wrap .trans-x-box > span::after { content: attr(data-trans); position: absolute; top: 100%; left: 0; color: var(--key-color); }
.trans-x-wrap .trans-x-box > span span { display: block; }
.trans-x-wrap.active .trans-x-box > span,
.trans-x-wrap:hover .trans-x-box > span,
.trans-x-wrap:focus .trans-x-box > span { transform: translateY(-100%); }

.btn-link { padding-top:2px; display: flex; align-items: center; justify-content: center; gap:5px; width: fit-content; height: 4.8rem; padding:0 3rem; border-radius: 5rem; transition: .3s ease-in-out; font-size: 1.8rem; }
.btn-link::after { content: ''; width: 2.2rem; margin-bottom:1px; aspect-ratio: 1/1; background: url('/images/common/btn_arw.svg') no-repeat center/contain; transition: .3s ease-in-out; }


/* Header */
header { z-index: 100; position: fixed; top: 0; left: 0; width: 100%; padding:0 20px; font-size: 1.8rem; font-weight: 500; transition: .3s ease-in-out; }
header .header-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1656px; height: 10.4rem; margin:0 auto; }
header h1 { display: block; width: 20rem; aspect-ratio: 200/55; }
header h1 a { display: block; width: 100%; height: 100%; background: url('/images/common/logo_b.svg') no-repeat center/contain; }
header .gnb { position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%); height:6rem; padding:.8rem; background: white; border-radius: 4rem; transition: .3s ease-in-out; }
header .gnb nav { height:100%; }
header .gnb nav > ul { display: flex; gap: 5px; height: 100%; }
header .gnb nav > ul > li { position: relative; display: flex; justify-content: center; height:100%; }
header .gnb nav > ul > li > a { display: flex; align-items: center; justify-content: center; height:100%; padding: 0 3rem; white-space: nowrap; transition: .3s ease-in-out; border-radius: 5rem; letter-spacing: 0; }
header .gnb nav > ul > li > a:hover, 
header .gnb nav > ul > li > a:focus { background: #F1F6FF; }
header .gnb nav > ul > li:hover .two-depth,
header .gnb nav > ul > li:focus-within .two-depth { visibility: visible; opacity: 1; }

header .gnb .two-depth { position: absolute; left: 50%; bottom:0; transform: translate(-50%,100%); padding-top: 2rem; transition: .3s ease-in-out; visibility: hidden; opacity: 0; text-align: center; }
header .gnb .two-depth .two-depth-wrap { padding: 1.2rem; border-radius: 1.5rem; background: white; }
header .gnb .two-depth ul { display: flex; flex-direction: column; gap:.5rem; }
header .gnb .two-depth li > a { position: relative; display: flex; align-items: center; justify-content: center; height:3.8rem; padding: 0 1.2rem; line-height: 1; white-space: nowrap; font-weight: 500; letter-spacing: 0; transition: .3s ease-in-out; border-radius: 5rem; }
header .gnb .two-depth li > a:hover { color: var(--key-color); background: #F1F6FF; }

header .header-right { display: flex; align-items: center; gap: 3rem; }
header .btn-contact { display: flex; align-items: center; justify-content: center; height:4.8rem; padding:0 3rem; background: var(--key-color); border-radius: 5rem; overflow: hidden; color:white; }
header .btn-contact::before { content: ''; z-index: -1; position: absolute; left:0; top:0; width: 100%; height: 100%; background: var(--gradient-color); opacity: 0; transition: .3s ease-in-out; }
header .btn-contact:hover::before { opacity: 1; }
header .btn-contact .trans-x-box > span::after { color:white; }
/* Language Selector - Desktop */
header .lang-select { position: relative; }
header .lang-toggle { display: flex; align-items: center; gap: 6px; height: 4.4rem; padding: 0 1.4rem; background: white; border: none; border-radius: 5rem; cursor: pointer; font-size: 1.5rem; font-weight: 500; color: var(--main-black); transition: .3s ease-in-out; }
header .lang-toggle:hover { background: #F1F6FF; }
header .lang-globe { flex-shrink: 0; }
header .lang-arrow { flex-shrink: 0; transition: transform .3s ease-in-out; }
header .lang-select.active .lang-arrow { transform: rotate(180deg); }
header .lang-dropdown { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 100%); padding-top: 1rem; visibility: hidden; opacity: 0; transition: .3s ease-in-out; }
header .lang-select.active .lang-dropdown { visibility: visible; opacity: 1; }
header .lang-menu { padding: 0.8rem; border-radius: 1.2rem; background: white; box-shadow: 0px 4px 12px rgba(0,0,0,0.1); list-style: none; }
header .lang-menu li a { display: flex; align-items: center; height: 3.6rem; padding: 0 1.4rem; font-size: 1.4rem; font-weight: 400; white-space: nowrap; border-radius: 0.8rem; transition: .2s ease-in-out; color: var(--sub-black); }
header .lang-menu li a:hover,
header .lang-menu li a.active { color: var(--key-color); background: #F1F6FF; font-weight: 500; }

/* Language Selector - Mobile (in mob-gnb) */
.mob-lang-select { display: flex; gap: 8px; padding: 18px 0; border-bottom: 1px solid #EBEBEB; }
.mob-lang-select a { display: flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; border-radius: 5rem; font-size: 14px; font-weight: 500; color: var(--sub-black); background: #F5F5F5; transition: .2s ease-in-out; }
.mob-lang-select a.active { color: white; background: var(--key-color); }

header .btn-hamburger { z-index: 1; position: relative; display: none; flex-direction: column; align-items: center; justify-content: center; gap:4.5px; width: 40px; aspect-ratio: 1/1; }
header .btn-hamburger::before { content: ''; z-index: -1; position: absolute; left:0; top:50%; transform: translateY(-50%); width: 100%; height: 28px; background: var(--key-color); border-radius: 5rem; }
header .btn-hamburger span { display: block; width: 22px; height: 1px; background: white; }

header:has(.mob-gnb.active) { transform: none; }
header.scrolled { transform: translateY(-100%); }
header.rolled .gnb { box-shadow: 0px 7.2px 7.2px 0px #81818126; }
header.rolled .two-depth-wrap { box-shadow: 0px 7.2px 7.2px 0px #81818126; }

header .mob-gnb { z-index: 150; position: fixed; display: none; right: 0; top: 0; width: 100%; height: 100dvh; background: white; transform: translateX(100%); transition: .3s; color:var(--main-black); }
header .mob-gnb .mob-gnb-header { display: flex; justify-content: space-between; align-items: center; height:54px; padding:0 20px; }
header .mob-gnb .mob-gnb-header h2 { width: 108px; }
header .mob-gnb .btn-mob-close { position: relative; width: 40px; aspect-ratio: 1/1; position: relative; overflow: hidden; }
header .mob-gnb .btn-mob-close::before { content: ''; z-index: -1; position: absolute; left:0; top:50%; transform: translateY(-50%); width: 100%; height: 28px; background: #F1F6FF; border-radius: 5rem; }
header .mob-gnb .btn-mob-close span { position: absolute; left: 9px; top: 50%; width: 22px; height: 1px; background: var(--sub-black); border-radius: 2px; }
header .mob-gnb .btn-mob-close span:nth-child(1) { transform: rotate(25deg); }
header .mob-gnb .btn-mob-close span:nth-child(2) { transform: rotate(-25deg); }

.mob-gnb nav { position: relative; height: calc(100dvh - 205px); padding: 10px 0 60px; overflow-y: auto; }
.mob-gnb nav > ul { height: 100%; }
.mob-gnb nav > ul > li { border-bottom:1px solid #EBEBEB; }
.mob-gnb nav > ul > li > a { position: relative; display: block; padding:18px 0; font-size: 18px; font-weight: 500; line-height: 1.3; }
.mob-gnb nav > ul > li > a::after { content: ''; position: absolute; right:0; top:50%; transform: translateY(-50%); width: 16px; height: 16px; background: url('/images/common/menu_arw.svg') no-repeat center/contain; transition: .3s ease-in-out; transform-origin:top; }
.mob-gnb nav > ul > li > a.active::after { transform: rotate(-180deg); }
.mob-gnb nav > ul > li:has(.pc-hide) > a::after { display: none; }
.mob-gnb .two-depth { display: none; padding-bottom: 18px; }
.mob-gnb .two-depth .two-depth-wrap { box-shadow: none; }
.mob-gnb .two-depth .two-depth-wrap:has(.depth) { padding:0; }
.mob-gnb .two-depth ul { display: flex; flex-direction: column; gap:10px; }
.mob-gnb .two-depth a { display: block; line-height: 1; color:var(--sub-black); font-size: var(--font-size-5); font-weight: 300; line-height: 20px;}
.mob-gnb .btn-contact { background: var(--gradient-color); }
.mob-gnb .btn-contact::before { display: none; }
.pc-hide { display: none; }


/* Footer */
.footer { padding: 7.4rem 0 0; background: var(--main-black); color: #ddd; font-size: var(--font-size-5); overflow: hidden; }
.footer .footer-inner { max-width: 1520px; width: 92%; margin:0 auto; }
.footer .footer-logo { width:37.7rem; aspect-ratio: 377/104; margin-bottom: 4rem; }
.footer-top { position: relative; display: flex; justify-content: space-between; }
.footer-top .footer-info { max-width: 572px; }
.footer-top .footer-info dl { display: flex; gap:7px; margin-bottom: 10px; font-weight: 500; }
.footer-top .footer-info dd { color:#888888; font-weight: 400; }
.footer-top .footer-nav { text-align: right; flex-shrink: 0; }
.footer-top .footer-nav ul { display: flex; gap:5rem; }
.footer-top .footer-nav .btn-top { display: inline-flex; align-items: center; justify-content: center; flex-direction: column; gap:1rem; width: 9.8rem; margin-top: 12rem; aspect-ratio: 1/1; border-radius: 50%; border:1px solid #666666; font-size: 2.2rem; }
.footer-top .footer-nav .btn-top::before { content: ''; display: block; width:1.4rem; aspect-ratio: 14/7; background: url('/images/common/top_arw.svg') no-repeat center/contain; }

.footer-text { width: 100%; margin: 6.5rem 0 4.5rem; aspect-ratio: 1520/162; background: url('/images/common/footer_text.png') no-repeat center/contain; }

.footer-bottom { position: relative; display: flex; justify-content: space-between; padding: 3rem 0; color:#666666; font-weight: 400; }
.footer-bottom::before { content: ''; position: absolute; left:50%; top:0; transform: translateX(-50%); display: block; width: 100vw; height:1px; background: #434343; }
.footer-bottom .footer-copyright { display: flex; align-items: center; gap: 1.8rem; font-family: 'Pretendard'; }
.footer-bottom .footer-link ul { display: flex; gap:4.2rem; }


/* 팝업 */
body.noneScroll {overflow: hidden; padding-right: 14px;}

.dim {display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.5); z-index: 101;}
.dim.active {display: block;}

.popup-div { position: absolute; max-width: 1660px; width:90%; inset: 0; margin:0 auto; pointer-events: none; }
.popup-div .popup-wrap { z-index: 102; position: absolute; right: 0; top:158px; aspect-ratio: 1/1; width: 100%; max-width: 485px; border-radius: 2rem; overflow: hidden; background: white; pointer-events: initial; }
.popup-div .popup-close { z-index: 2; position: absolute ; right:0; top:0; width: 65px; aspect-ratio: 1/1; cursor: pointer; }
.popup-div .popup-close span { display: block; background-color: white; position: absolute; width: 2px; height: 20px; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg); }
.popup-div .popup-close span:nth-child(2) { transform: translate(-50%,-50%) rotate(135deg); }
.popup-div .popup-cont { width: 100%; height: 100%; }
.popup-div .popup-cont .swiper-wrapper { height: calc(100% - 47px); }
.popup-div .popup-controls { display: flex; align-items: center; justify-content: space-between; width: 100%; height:47px; padding:0 20px; background: white; }
.popup-div .popup-controls button { text-decoration: underline; color:var(--sub-black); font-size: 14px; line-height: 1; }
.popup-div .swiper-pagination { position: relative; display: flex; gap:10px; }
.popup-div .swiper-pagination-bullet-active { background:#414648; }
.popup-div .swiper-pagination-bullet { width: 6px; height: 6px; }
.popup-div .swiper-wrapper img { width: 100%; height: 100%; object-fit: cover; }

.popup .title {position: relative; height: 8rem; padding: 0 3%; }
.popup .title p {line-height: 8rem; font-size: 3rem; font-weight: 600;}
.popup .close {position: absolute; height: 100%; width: 8rem; right: 0; top: 0; cursor: pointer;}
.popup .close span {display: block; background-color: #333; position: absolute; width: 3px; height: 30px; top: 25px; left: 40px; transform: rotate(45deg);}
.popup .close span:last-child {transform: rotate(-45deg);}

.popup .cont {height: calc(100% - 8rem); padding: 30px 3%; overflow-y: auto; font-size: 2rem;}
.popup .cont::-webkit-scrollbar {width: 8px;}
.popup .cont::-webkit-scrollbar-thumb {background-color: #ccc; border-radius: 5px;}
.popup .cont::-webkit-scrollbar-track {background-color: #eee;}

@media screen and (max-width:768px){
  .popup .title {height: 60px;}
  .popup .title p {line-height: 60px; font-size: 20px;}
  .popup .close {width: 60px;}
  .popup .close span {height: 20px; top: 21px; left: 29px;}
  .popup .cont {height: calc(100% - 60px);}
}


@media screen and (max-width:1300px){
  .footer-top { gap:3rem; }
}

@media screen and (max-width:1200px){
  header .gnb nav > ul > li > a { padding:0 2rem; }
  header .header-right { gap:2rem; }
}

@media screen and (max-width:1024px){
  header h1 { width: 108px; }
  header .gnb { position: relative; left:0; top:0; transform: none; height: 5rem; }
  header .gnb nav > ul { gap:0; }
  header .gnb nav > ul > li > a { padding:0 1rem; }
  header .gnb .product-two-depth { left:61%; }
  header .btn-contact { height: 38px; padding: 0 12px; }

  .footer-top { flex-wrap:wrap; gap:30px; }
  .footer-top .footer-nav { width:100%; }
  .footer-top .footer-nav .btn-top { position: absolute; top:0; right:0; width: 56px; margin-top: 0; gap:6px; font-size: 13px; }

  .footer-bottom .footer-link ul { gap:10px; }
  .footer-bottom .footer-right { gap:2rem; }
}

@media screen and (max-width:768px){
  header .header-inner { height:10rem; }
  header .gnb { display: none; }
  header .lang-select { display: none; }
  header .mob-gnb { display: block; }
  header .mob-gnb.active { transform: translateX(0); }
  header .btn-hamburger { display: flex; }
  
  .footer { padding-top: 40px; }
  .footer .footer-inner { width: 100%; padding: 0 20px; }
  .footer .footer-logo { width: 209px; }
  .footer-top .footer-nav ul { flex-wrap:wrap; gap:10px 40px; }

  .footer-bottom { flex-wrap:wrap; gap:13px; padding: 20px 0 40px; }
  .footer-bottom .footer-copyright { width: 100%; justify-content: space-between; }
  .footer-bottom .footer-right { width: 100%; } 

  .btn-link { width: 100%; padding: 0 20px; }
  header .btn-contact::before { opacity: 1; }

  body.noneScroll {padding-right: 0;}
}

@media screen and (max-width:500px){
  header .header-inner { height:54px; }
  header .header-right .lang-select { display: none; }
  header .header-right .btn-contact { display: none; }
  
  .footer-top { gap:0px; }
  .footer-top .footer-nav ul { display: none; }
  .footer-text { margin: 60px 0 22px; background: none; }
  .footer-text::before { content: ''; display: block; width:232px; height:58px; background: url('/images/common/footer_text.png') no-repeat left center/cover; }
  .footer-text::after { content: ''; display: block; width:310px; height:58px; margin-top:14px; background: url('/images/common/footer_text.png') no-repeat right center/cover; }
}