@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 { 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; aspect-ratio: 1/1; background: url('/images/btn_arw.svg') no-repeat center/contain; transition: .3s ease-in-out; filter:saturate(0) brightness(10); }


/* 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: 1820px; height: 12.6rem; margin:0 auto; }
header h1 { display: block; width: 11.6rem; aspect-ratio: 190/79; }
header h1 a { display: block; width: 100%; height: 100%; background: url('/images/logo.svg') no-repeat center/contain; }
header .gnb { position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%); height:6.6rem; padding:.9rem; 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: #D4EEFF; }
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: 0; bottom:0; transform: translateY(100%); padding-top: 2rem; transition: .3s ease-in-out; visibility: hidden; opacity: 0; }
header .gnb .two-depth .two-depth-wrap { padding: 2.5rem; border-radius: 1.5rem; background: white; }
header .gnb .two-depth ul { display: flex; flex-direction: column; gap:1.6rem; }
header .gnb .two-depth li > a { position: relative; display: inline-block; width: fit-content; line-height: 1.3; white-space: nowrap; font-weight: 400; letter-spacing: 0; }
header .gnb .two-depth li > a::after { content: ""; display: block; width:100%; height:1px; position: absolute; left:0px; bottom:0; transform: scaleX(0); background-color: var(--key-color); transition: transform 0.6s; transform-origin: right; }
header .gnb .two-depth li > a:hover { color: var(--key-color); }
header .gnb .two-depth li > a:hover::after { transform: scaleX(1); transform-origin: left; }

header .gnb nav > ul > li:has(.product-two-depth) { position: initial; }
header .gnb .product-two-depth { padding-top: 1.1rem; left:50%; transform: translate(-50%, 100%); }
header .gnb .product-two-depth .two-depth-wrap { display: grid; grid-template-areas: "a c" "b c"; grid-template-columns: 1fr 26.6rem; gap:0 2rem; padding:2rem; }
header .gnb .product-two-depth .two-depth-wrap .depth { display: grid; grid-template-columns: 19.5rem 1fr; width:58.4rem; padding:2rem; padding-left:0; margin-left:2rem; }
header .gnb .product-two-depth .two-depth-wrap .depth p { font-size: 1.6rem; font-weight: 600; color:#009AFF; }
header .gnb .product-two-depth .two-depth-wrap .depth-a { grid-area: a; border-bottom:1px solid #DDDDDD; }
header .gnb .product-two-depth .two-depth-wrap .depth-a > ul { display: grid; grid-template-columns: auto auto; }
header .gnb .product-two-depth .two-depth-wrap .depth-b { grid-area: b; }
header .gnb .product-two-depth .two-depth-wrap .depth-b > ul > li { display: grid; grid-template-columns: 13.9rem 1fr; }
header .gnb .product-two-depth .two-depth-wrap .depth-b .three-depth ul { display: flex; flex-direction: row; gap:3.2rem; }
header .gnb .product-two-depth .two-depth-wrap .depth-b .three-depth a { color:var(--sub-black); }
header .gnb .product-two-depth .two-depth-wrap .depth-b .three-depth a:hover { color:var(--key-color); }
header .gnb .product-two-depth .two-depth-wrap .depth-c { grid-area: c; display: flex; flex-direction: column; justify-content: space-between; padding:3.5rem; border-radius: 1.8rem; overflow: hidden; background: url('/images/header_prod.jpg') no-repeat center/cover; color:white; }
header .gnb .product-two-depth .two-depth-wrap .depth-c p { font-size: 2rem; line-height: 1.3; }
header .gnb .product-two-depth .two-depth-wrap .btn-link { border:1px solid white; }
header .gnb .product-two-depth .two-depth-wrap .btn-link:hover { border-color: #7CFF01; background: #7CFF01; }
header .gnb .product-two-depth .two-depth-wrap .btn-link:hover::after { filter:none; }
header .gnb .product-two-depth .two-depth-wrap .btn-link .trans-x-box > span::after { color: var(--main-black); }

header .header-right { display: flex; align-items: center; gap: 3rem; }
header .header-right .lang-select { position: relative; padding:1rem 0; }
header .header-right .lang-select p { display: flex; gap:.9rem; align-items: center; font-size: 1.6rem; cursor: pointer; }
header .header-right .lang-select p::after { content: ''; display: block; border:2px solid transparent; border-top:3px solid var(--main-black); transform: translateY(50%); }
header .header-right .lang-select > div { position: absolute; left:50%; bottom:0; transform: translate(-50%, 100%); padding:10px 12px; border-radius: 5px; background: white; visibility: hidden; opacity: 0; transition: .3s ease-in-out; }
header .header-right .lang-select > div ul { display: flex; flex-direction: column; gap:5px; font-size: 1.4rem; }
header .header-right .lang-select:hover > div { visibility: visible; opacity: 1; }
header .btn-contact { display: flex; align-items: center; justify-content: center; height:4.8rem; padding:0 3rem; background: #7CFF01; border-radius: 3rem; overflow: hidden; }
header .btn-contact::before { content: ''; z-index: -1; position: absolute; left:0; top:0; width: 100%; height: 100%; background: linear-gradient(93.47deg, #084AF7 14.46%, #4966FB 88.73%); opacity: 0; transition: .3s ease-in-out; }
header .btn-contact:hover::before { opacity: 1; }
header .btn-contact .trans-x-box > span::after { color:white; }
header .btn-hamburger { 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 span { display: block; width: 18px; height: 1.5px; background: var(--main-black); }

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:68px; padding:0 32px; }
header .mob-gnb .mob-gnb-header h2 { width: 65px; }
header .mob-gnb .btn-mob-close { position: relative; width: 40px; aspect-ratio: 1/1; position: relative; text-indent: -999px; overflow: hidden; }
header .mob-gnb .btn-mob-close::before, 
header .mob-gnb .btn-mob-close::after { content: ''; position: absolute; left: 30%; top: 50%; width: 18px; height: 1.5px; background: var(--main-black); border-radius: 2px; }
header .mob-gnb .btn-mob-close::before { transform: rotate(45deg); }
header .mob-gnb .btn-mob-close::after { transform: rotate(-45deg); }
header .mob-gnb .lang-select { display: flex; justify-content: right; align-items: end; gap:26px; height:65px; padding: 0 20px 30px; font-size: 15px; font-weight: 500; color:#C0C5C9; border-bottom: 1px solid #DDDDDD; }
header .mob-gnb .lang-select a { position: relative; }
header .mob-gnb .lang-select a:not(:last-child)::after { content: ''; position: absolute; right:-13px; top:50%; transform: translateY(-50%); display: block; width: 1px; height:12px; background: #C0C5C9; }
header .mob-gnb .lang-select a.active { color:var(--main-black); }
.mob-gnb nav { position: relative; height: calc(100dvh - 133px); }
.mob-gnb nav > ul { display: flex; flex-direction: column; gap:30px; width: 122px; height: 100%; padding:20px; border-right: 1px solid #DDDDDD; }
.mob-gnb nav > ul > li > a { position: relative; display: block; font-size: 18px; font-weight: 500; line-height: 1.3; }
.mob-gnb .two-depth { display: none; position: absolute; top:0; right:0; width: calc(100% - 122px); height: calc(100dvh - 133px); overflow-y: auto; }
.mob-gnb .two-depth .two-depth-wrap { padding:20px; padding-bottom: 70px !important; background: white; box-shadow: none; }
.mob-gnb .two-depth .two-depth-wrap:has(.depth) { padding:0; }
.mob-gnb .two-depth .two-depth-wrap .depth { height: 100%; padding:20px; }
.mob-gnb .two-depth .two-depth-wrap .depth-b { border-top:1px solid #DDDDDD; }
.mob-gnb .two-depth p { margin-bottom: 15px; color:#009AFF; font-weight: 600; font-size: 16px; line-height: 1; }
.mob-gnb .two-depth ul { display: flex; flex-direction: column; gap:20px; }
.mob-gnb .two-depth a { font-size: 15px; font-weight: 400; line-height: 1.3; }
.mob-gnb .two-depth .depth-c { display: none; }
.mob-gnb .three-depth ul { display: flex; flex-direction: column; gap:10px; margin-top:10px; color:var(--sub-black); }
.pc-hide { display: none; }


/* Footer */
.footer { padding: 9rem 0 0; background: #111; color: #ddd; font-size: 1.8rem; font-weight: 500; overflow: hidden; }
.footer .footer-inner { max-width: 1660px; padding: 0 20px; margin:0 auto; }
.footer .footer-logo { width:18.7rem; aspect-ratio: 190/79; }
.footer-top { position: relative; display: flex; justify-content: space-between; }
.footer-top .footer-info { display: flex; gap:14rem; }
.footer-top .footer-info dl { display: grid; grid-template-columns: 15.2rem 1fr; gap:5px 0; height:fit-content; }
.footer-top .footer-info dd { color:#888888; font-weight: 400; }
.footer-top .footer-nav { text-align: right; }
.footer-top .footer-nav ul { display: flex; gap:4rem; letter-spacing: 0; }
.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: 10.2rem; 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/btn_top.svg') no-repeat center/contain; }

.footer-text { width: 100%; margin: 10rem 0 4rem; aspect-ratio: 1620/206; background: url('/images/footer_text.png?ver=251127') no-repeat center/contain; }

.footer-bottom { position: relative; display: flex; justify-content: space-between; padding: 2.4rem 0 3.4rem ; 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:3.3rem; }
.footer-bottom .footer-marks ul { display: flex; gap:1rem; }
.footer-bottom .footer-right { display: flex; gap:7rem; align-items: center; }


/* 팝업 */
body.noneScroll {overflow: hidden;}

.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-video { display: none; position: fixed; inset: 0; background: #000000B2; z-index: 103; }
.popup-video .popup-close { z-index: 2; position: absolute ; right:30px; top:30px; width: 60px; aspect-ratio: 1/1; cursor: pointer; }
.popup-video .popup-close span { display: block; background-color: white; position: absolute; width: 2px; height: 30px; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg); }
.popup-video .popup-close span:nth-child(2) { transform: translate(-50%,-50%) rotate(135deg); }
.popup-video .popup-wrap { position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); width: 92%; max-width: 1004px; aspect-ratio: 1004/574; background: white; }
.popup-video .popup-wrap :where(iframe, video, img) { max-width: none; width: 100%; height: 100%; object-fit: cover; }
.popup-video .popup-cont { width: 100%; height: 100%; }

@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; }
  .footer-top .footer-info { gap:6rem; }
}

@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: 9rem; }
  header .gnb { position: relative; left:0; top:0; transform: none; height: 5rem; }
  header .gnb nav > ul > li > a { padding:0 1rem; }
  header .gnb .product-two-depth { left:61%; }

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

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

@media screen and (max-width:768px){
  header .header-inner { height:10rem; }
  header .gnb { display: none; }
  header .mob-gnb { display: block; }
  header .mob-gnb.active { transform: translateX(0); }
  header .btn-hamburger { display: flex; }

  .footer .footer-logo { width: 137px; }
  
  .footer-top .footer-nav ul { flex-wrap:wrap; gap:10px 40px; }
  .footer-top .footer-info { flex-wrap:wrap; gap:50px; }
  .footer-top .footer-info dl { width: 100%; }

  .footer-bottom { flex-wrap:wrap; gap:10px; }
  .footer-bottom .footer-copyright { width: 100%; justify-content: space-between; }
  .footer-bottom .footer-right { width: 100%; justify-content: space-between; gap:0; } 
  .footer-bottom .footer-marks ul li { width: 36px; }

  .btn-link { width: 100%; }

  .popup-video .popup-close { right:0; top:0; }
  .popup-video .popup-close span { height: 20px; width: 1.5px; }
}

@media screen and (max-width:500px){
  header { padding: 12px 20px; }
  header h1 { width:65px; }
  header .header-right .lang-select { display: none; }
  header .header-right .btn-contact { display: none; }
  header .header-inner { height:44px; padding:0 15px; background: white; border-radius: 50px; }
  
  .footer-text { background: none; }
  .footer-text::before { content: ''; display: block; width:322px; height:74px; background: url('/images/footer_text.svg') no-repeat left center/cover; }
  .footer-text::after { content: ''; display: block; width:244px; height:74px; background: url('/images/footer_text.svg') no-repeat right center/cover; }
}