@charset "utf-8";


/* reset */
* {margin: 0;padding: 0; box-sizing: border-box;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700; font-size: inherit;}
a {color: inherit; text-decoration: inherit;}
img {vertical-align: middle;}
a img {border: none;}
li {list-style: none;}
address, em, i {font-style: normal;}
a:focus {outline: none}
button:focus {outline: none; border: none;}

/* 공통 요소 */
body {font-family: "Pretendard", sans-serif; font-size: 21px; color: #1d1d1f; letter-spacing: -0.03em;} /* 오버플로우 히든 없앴음 */
.wrap { position: relative; margin: 0 auto; overflow: hidden;}   
.main-title {font-size: 90px; font-family: "Pretendard", sans-serif; letter-spacing: -0.03em; font-weight: 700;}
.page-title {font-size: 60px; font-family: "Pretendard", sans-serif; letter-spacing: -0.03em;}
.sub-title {font-size: 30px; font-family: "Pretendard", sans-serif; letter-spacing: -0.03em; font-weight: 520;}
.btn-txt {font-size: 21px; font-family: "Pretendard", sans-serif; letter-spacing: -0.03em;}
.sub-txt {font-size: 18px; font-family: "Pretendard", sans-serif; letter-spacing: -0.03em;}
.desc {font-size: 18px; font-family: "Pretendard", sans-serif; letter-spacing: -0.03em;}


/* header */
header { background: rgba(0, 0, 0, 0.2); position: fixed; width: 100%; top: 0; z-index: 100; backdrop-filter: blur(67.75px); transform: translateY(-100%); transition: transform 0.4s ease-in-out, background 0.3s;}
.innerHeader {width: 57.14%; height: 55px;margin: 0 auto; display:flex; justify-content: space-between; text-align: center; align-items: center;}
.innerHeader h1.logo {width: 16%; padding-bottom: 8px;}
.innerHeader .gnb {width: 75%; display: flex; justify-content: space-between;}
.innerHeader .gnb li {font-size: 16px; color: #fff;}
.innerHeader .menu {display: none;}

/* intro-video 진입 시 붙여줄 클래스 */
header.active { transform: translateY(0);}

/* 스크롤을 내릴 때 숨기기 위한 클래스 */
header.up {transform: translateY(-100%);}

/* menu Open */
.menuOpen{position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #1d1d1f; z-index: 999; transform: translateX(100%); transition: transform 0.45s ease;pointer-events: none;}

.menuOpen.on{transform: translateX(0); pointer-events: auto; visibility: visible;}

.menuOpen .top {width: 100%; padding: 25px 31px; position: relative;}
.menuOpen .top .closeBtn { display: block; width: 24px; height: 24px; position: absolute; top: 50%; transform: translateY(-50%); right: 30px; }
.menuOpen .top .closeBtn span {display: block; background: #fff; width: 24px; height: 3px; position: absolute; top: 50%; transform: translateY(-50%); border-radius: 3px;}
.menuOpen .top .closeBtn span.a {transform: rotate(45deg);}
.menuOpen .top .closeBtn span.b {transform: rotate(-45deg);}

.menuOpen .list {padding: 60px 48px; }
.menuOpen .list li { margin-bottom: 72px;}
.menuOpen .list li:last-child {margin-bottom: 0;}
.menuOpen .list li a {color: #fff; display: block; width: 100%; height: 100%; font-weight: bold; font-size: 24px; opacity: 0.5; transition: all 0.3s;}
.menuOpen .list li:hover a {opacity: 1; transition: all 0.3s;}

/* anotherHeader */
.anotherHeader {position: fixed; left: 0; top: 0; height: 55px;  background: rgba(255,255,255,0.9);  opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.3s; width: 100%;  z-index: 100; display: flex; align-items: center; backdrop-filter: blur(20px);}
.anotherHeader.scrolled {opacity: 1; visibility: visible; pointer-events: auto; margin: 0 auto;}
.anotherHeader .inner { width: 52.17%; display:flex; justify-content: space-between; align-items: center; margin: 0 auto;}
.anotherHeader h1.logo {width: 16%; padding-bottom: 8px;}
.anotherHeader .gnb {width: 75%; display: flex; justify-content: space-between; font-weight:500; }
.anotherHeader .gnb li {font-size: 16px; color:#424242;}
.anotherHeader .menu {display: none;}


/* 어나더헤더 메뉴오픈 */
.another-menuOpen { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #1d1d1f; z-index: 999;}

.another-menuOpen.on {display: block;}

.another-menuOpen .top {width: 100%; padding: 25px 31px; position: relative;}

.another-menuOpen .top .closeBtn { display: block; width: 24px; height: 24px; position: absolute; top: 50%; transform: translateY(-50%); right: 30px; }
.another-menuOpen .top .closeBtn span {display: block; background: #fff; width: 24px; height: 3px; position: absolute; top: 50%; transform: translateY(-50%); border-radius: 3px;}
.another-menuOpen .top .closeBtn span.a {transform: rotate(45deg);}
.another-menuOpen .top .closeBtn span.b {transform: rotate(-45deg);}
.another-menuOpen .list {padding: 16px 48px; }
.another-menuOpen .list li { margin-bottom: 24px;}
.another-menuOpen .list li:last-child {margin-bottom: 0;}
.another-menuOpen .list li a {color: #fff; display: block; width: 100%; height: 100%; font-weight: bold; font-size: 24px; opacity: 0.5; transition: all 0.3s;}
.another-menuOpen .list li:hover a {opacity: 1; transition: all 0.3s;}

@media screen and (max-width: 1300px){
    .innerHeader, .anotherHeader .inner {width: 80%;}}
@media screen and (max-width: 1024px) {
    .innerHeader, .anotherHeader .inner {width: 100%; padding: 0 31px;}}

@media screen and (max-width: 768px) {
  .innerHeader, .anotherHeader .inner { position: relative;}
  .innerHeader .gnb, .anotherHeader .gnb {display: none;}
  .innerHeader .menu,.anotherHeader .menu{display: block; width: 24px; height: 24px; position: absolute; top: 50%; transform: translateY(-50%); right: 31px; cursor: pointer;}
  .innerHeader .menu span, .anotherHeader .menu span{display: block; width: 24px; height: 3px; position: absolute; border-radius: 3px;}
  .innerHeader .menu span{background:#fff;}
  .anotherHeader .menu span{background:#424242;}
  .innerHeader .menu span.a,.anotherHeader .menu span.a{top: 20%;}
  .innerHeader .menu span.b,
  .anotherHeader .menu span.b{bottom: 20%;}}

/* product-banner */
.banner { height: 100vh; position: relative; background-color: #F8F8F8;}
.banner .inner {width:95%; margin: 0 auto; display: flex; justify-content: space-between; padding: 0 180px; }
.banner .inner .img {width: 700px; height: 700px; margin: 100px;}
.banner .inner .img img {width: 100%;}
.banner .inner .left-box {position: absolute; right: 10%; top:430px; width: 600px; height: 286px; text-align: right;}
.banner .inner .left-box .text-box {display: flex; flex-direction: column;}
.banner .inner .left-box .text-box .sub-title {padding: 0 23px 0 0; font-size: 30px;}
.banner .inner .left-box .text-box .main-title { margin-bottom: 60px; font-size: 100px;}
.banner .inner .left-box .btn {align-items: center; padding: 0 23px 0 0;}
.banner .inner .left-box .btn a.btn-txt {color: #1D1D1F; background: #E8E8ED; border-radius:30px; padding: 13px 15.6px 14.5px 30px; font-weight: 700;} /* 자세히 보기 글 */
.banner .inner .left-box .btn .icon { width: 24px; height: 24px; margin-left: 9px;} /* 버튼 이미지 */

/* product-three-pens */
.three-pens {margin: 0 auto; padding: 90px 0 0px;}
.three-pens .inner {width: min(1124px, 90vw); margin: 127px auto; position: relative;}
.three-pens .inner .product-box .text-box {text-align: center;}
.three-pens .inner .product-box .text-box .main-title { margin-bottom: 22px; padding-top: 300px;}
.three-pens .inner .product-box .text-box .main-title .mask {display: block;}
.three-pens .inner .product-box .text-box .main-title .mask .line {display: inline-block; color: transparent; -webkit-text-fill-color: rgba(0,0,0,0.25); -webkit-background-clip: text; background-repeat: no-repeat; background-position: left center; background-image: linear-gradient(#000, #000); background-size: 0% 100%;}

.three-pens .inner .product-box .text-box .main-title .comma {font-family: "League Spartan", sans-serif;}
.three-pens .inner .product-box .text-box .sub-title { margin-bottom: 40px;}
.three-pens .inner .product-box .pen-color {width: 134px; height: 30px; display: flex; gap:22px; margin-top: 170px; position: absolute; left: 50%; top:40%; transform: translate(-50%,-40%);}

.three-pens .inner .product-box .pen-color span.a {display: inline-block; width: 30px; height: 30px; background-color:#BAADA4; border-radius: 50%;}
.three-pens .inner .product-box .pen-color span.b {display: inline-block; width: 30px; height: 30px; background-color:#4A5D7D; border-radius: 50%;}
.three-pens .inner .product-box .pen-color span.c {display: inline-block; width: 30px; height: 30px; background-color:#B12838; border-radius: 50%;}
.three-pens .inner .product-box .pens {  width: min(1124px, 100%);
  margin: 425px auto 0; display: flex; justify-content: space-between; text-align: center;}
.three-pens .inner .product-box .pens li {width:300px;}
.three-pens .inner .product-box .pens .img {margin-bottom: 39px;}
.three-pens .inner .product-box .pens li a .sub-text{font-size: 21px; font-weight: 600; color:#424242; }

/* another */
.another {width: 100%;}
.another .inner {width: min(1340px, 90vw); margin: 440px auto 0;}
.another .inner .top-text {text-align: right; height: auto;}
.another .inner .top-text .main-title { margin-bottom: 22px;}
.another .inner .top-text .main-title .mask {display: block;}
.another .inner .top-text .main-title .mask .line {display: inline-block; color: transparent; -webkit-text-fill-color: rgba(0,0,0,0.25); -webkit-background-clip: text;
background-repeat: no-repeat; background-position: left center; background-image: linear-gradient(#000, #000);background-size: 0% 100%;}
.another .inner .top-text .sub-title {padding: 0 24px 0 0;}
.another .inner .another-box {display: flex; gap: 48px; width: 100%; margin: 110px auto 0; align-items: flex-start;}
.another .inner .another-box .right-box { flex: 1; min-width: 0;}
.another .inner .another-box .right-box .colorPen-box {position: relative;  overflow: hidden;}
.another .inner .another-box .right-box .colorPen-box .img {background: black; display:block; width: 100%; height: 967px; border-radius:30px;}
.another .inner .another-box .right-box .colorPen-box .img img {width: 100%; height: 59%; transform-origin: top center;}
.another .inner .another-box .right-box .text-box {position: absolute; left: 50%; bottom: 10%; transform: translate(-50%,-10%); width: 376px; height: 94px; color: #fff; text-align: center;}
.another .inner .another-box .right-box .text-box .mini-title-text {font-size:45px; font-weight: bold; margin-bottom: 10px;}
.another .inner .another-box .right-box .text-box .desc {font-size: 21px; color: #CDCDCD;}


.another .inner .another-box .left-box {position: relative; flex: 1;  min-width: 0;}
.another .inner .another-box .left-box .top-text-box {position: absolute; right:13%; bottom: 15%; transform: translate(10%,-15%); width: 380px; height: 94px; color: #fff; text-align: right;}
.another .inner .another-box .left-box .text-box {position: absolute; right:10%; bottom: 15%; transform: translate(10%,-15%); width: 376px; height: 94px; color: #fff; text-align: right;}

.another .inner .another-box .left-box .top-text-box .mini-title-text {font-size:40px;font-weight: bold; margin-bottom: 10px;}
.another .inner .another-box .left-box .text-box .mini-title-text {font-size:33px; font-weight: bold; margin-bottom: 10px;}

.another .inner .another-box .left-box .pecil-box {position: relative;}
.another .inner .another-box .left-box .pecil-box .img {background:#292E3A; display:block;  width: 100%; height: 462px; border-radius: 30px; margin-bottom:50px;}
.another .inner .another-box .left-box .pecil-box .img img {width: 80%; height:60%;}

.another .inner .another-box .left-box .top-text-box .desc {font-size: 21px; color: #CDCDCD;}
.another .inner .another-box .left-box .text-box .desc {font-size: 18px; color: #CDCDCD;}


.another .inner .another-box .bottom-box{display: grid; grid-template-columns: 1fr 1fr; gap: 48px; justify-content: stretch; margin-bottom: 422px;}
.another .inner .another-box .bottom-box .img {width: 100%; height: 100%; padding: 0; display: flex; align-items: flex-end; justify-content: center;}
.another .inner .another-box .bottom-box li {width: auto; height: 455px; border-radius: 30px; position: relative; flex-direction: column;}

.another .inner .another-box .bottom-box .marker-box {background: #323834; position: relative; overflow: hidden;}
.another .inner .another-box .bottom-box .marker-box .img {position: absolute; left: 6px; bottom: -715px; height: 55%;}
.another .inner .another-box .bottom-box .marker-box .img img {transform: translateY(-50%);}
.another .inner .another-box .bottom-box .marker-box .text-box {position: absolute; left:27%; top:10%; transform: translate(-25%,-10%); text-align: center;}

.another .inner .another-box .bottom-box .cap-box {background: #891414; position: relative; overflow: hidden; } 
.another .inner .another-box .bottom-box .cap-box .img {position: absolute; left: 6px; bottom: -585px; height: 55%;}
.another .inner .another-box .bottom-box .cap-box .img img {transform: translateY(-50%);}

.another .inner .another-box .bottom-box .cap-box .text-box {position: absolute; left:27%; top:10%; transform: translate(-25%, -10%); text-align: center;}

/* bottom 카드 텍스트 가운데 정렬 fix */
.another .inner .another-box .bottom-box .marker-box .text-box,
.another .inner .another-box .bottom-box .cap-box .text-box{
  left: 50%;
  top: 10%;
  transform: translateX(-50%);  /* ✅ X축만 가운데 */
  width: 100%;
  text-align: center;
}



/* LOBDA product */
.LOBDA .inner {width:100vw; margin: 0 auto 300px;}
.LOBDA .inner .text-box {justify-content: center; align-items: center; text-align: center;}
.LOBDA .inner .text-box .main-title { margin-bottom: 22px;}
.LOBDA .inner .text-box .main-title .mask {display: block;}
.LOBDA .inner .text-box .main-title .mask .line {
  display: inline-block;
  color: transparent;
  -webkit-text-fill-color: rgba(0,0,0,0.25);
  -webkit-background-clip: text;

  background-repeat: no-repeat;
  background-position: left center;
  background-image: linear-gradient(#000, #000);
  background-size: 0% 100%;
}
.LOBDA .inner .text-box .main-title .comma {font-family: "League Spartan", sans-serif;}
.LOBDA .inner .text-box .sub-title {margin-bottom: 130px;}
/* 슬라이더 */
.LOBDA .lobda-slider { display: flex; align-items: center; justify-content: center; gap: 48px; margin-bottom: 500px;}
.LOBDA .lobda-slider .lobda-viewport {width: calc(488px * 3 + 48px * 2); overflow: hidden;} 
/* viewport: 3개만 보이게 + 48gap 두개 */ 


/* 트랙(움직이는 리스트) */
.LOBDA .list {display: flex; gap: 48px; transition: transform .35s ease;}
/*트랙 카드 */
.LOBDA .list li {flex: 0 0 488px; height: 488px; position: relative;}


.LOBDA .list li .img {background: #F1F1F1; object-fit: cover; width: 100%; height: 100%; border-radius: 30px; overflow: hidden;}
.LOBDA .list li .img img {width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); transition: transform 0.3s ease;}
.LOBDA .list li:hover .img img {transform: scale(1.2);}

/* arrow */
.LOBDA .lobda-slider .lobda-arrow { top: 50%; transform: translateY(-50%); border: none; padding: 0; cursor: pointer; background: none;}
.LOBDA .lobda-slider .lobda-arrow img {width: 60px; height: 60px; display: block;}

/* lobda viewport */
.LOBDA .lobda-viewport a, .LOBDA .lobda-viewport img{
  -webkit-user-drag: none;
  user-select: none;
}
/* ✅ LOBDA 반응형용 변수 */
.LOBDA{
  --card: 488px;
  --gap: 48px;
  --show: 3;
}

.LOBDA .lobda-slider { gap: var(--gap); }
.LOBDA .lobda-slider .lobda-viewport{
  width: calc(var(--card) * var(--show) + var(--gap) * (var(--show) - 1));}
.LOBDA .list { gap: var(--gap); }
.LOBDA .list li{flex: 0 0 var(--card); height: var(--card);}

/* preumium pen */
.premium {background-color: #000;}
.premium .inner {width: 100vw; padding:350px 13%;}
.premium .text-box .main-title {color:#fff; margin-bottom: 22px;}
.premium .text-box .main-title .mask .line {display: inline-block; color: transparent; -webkit-text-fill-color: rgba(255, 255, 255, 0.25);-webkit-background-clip: text;background-repeat: no-repeat; background-position: left center; background-image: linear-gradient(#ffffff, #ffffff); background-size: 0% 100%;}
.premium .text-box .sub-title {color: #fff; margin-bottom: 128px;}
.premium .list {width:100%; display: flex; justify-content: space-between;}
.premium .list li {height:666px; background: #F8F8F8; border-radius: 30px; display: flex; align-items: center; justify-content: flex-end; overflow: hidden;}

/* accordion container */
.premium-accordion {display: flex; gap: 20px; height: 800px;}

/* accordion item */
.premium-accordion .acc-item {flex: 1;background: #f8f8f8;border-radius: 30px;overflow: hidden; transition: flex 0.4s ease;display: flex;justify-content: center; align-items: center;}
/* 확장 상태 */
.premium-accordion .acc-item.active {flex: 3;}
/* 이미지 정렬 */
.premium-accordion .acc-item .img {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}
.premium-accordion .acc-item img {width: 100%;height: 100%;object-fit: contain;transition: transform 0.4s ease;}
/* 확장 시 이미지 살짝 강조 */
.premium-accordion .acc-item.active img {transform: scale(0.5);}
.premium-pagination { display: none; }


/* footer */
footer {color: #fff; background: #1d1d1f; padding: 84px 189px 162px;}
.footer-inner {width: 100%; }
.footer-inner .footer-top {width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 131px;}
.footer-inner .footer-top .top-leftbox .family-site {width: 287px; display: flex; justify-content: space-between; border-bottom: 2px solid #fff; padding: 13px; margin-bottom: 19px;}
.footer-inner .footer-top .top-leftbox .family-site a {display: block; font-size: 18px;}
.footer-inner .footer-top .left-box .family-site img {width: 16px;}
.footer-inner .footer-top .top-rightbox {width: 100%;}
.footer-inner .footer-top .top-rightbox .gnb {display: flex; justify-content: space-between; font-size: 24px; margin-bottom: 38px;  width: 70%;}
.footer-inner .footer-top .top-rightbox .sns-icon {display: flex; justify-content: right; gap: 10px;}
.footer-inner .footer-top .top-rightbox .sns-icon img {width: 40px}
.footer-inner .footer-bottom {width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap;}
.footer-inner .footer-bottom .bottom-leftbox {width: 287px; font-size: 14px;}
.footer-inner .footer-bottom .bottom-leftbox .links {display: flex; justify-content: space-between; margin-bottom: 10px;}
.footer-inner .footer-bottom .bottom-leftbox .links li {font-size: 14px; letter-spacing: -0.03em;}
.footer-inner .footer-bottom .bottom-leftbox .links li:nth-child(1) {font-weight: bold;}
.footer-inner .footer-bottom .bottom-leftbox .address {font-size: 14px; margin-bottom: 10px;}
.footer-inner .footer-bottom .bottom-leftbox .contact-number {display: flex; gap: 6px;}
.footer-inner .footer-bottom .bottom-rightbox {width: 100%; font-size: 14px; display: flex; align-items: baseline; margin-top: auto; justify-content: space-between;}
.footer-inner .footer-bottom .bottom-rightbox .copyright {margin-right: 37px;}
.footer-inner .footer-bottom .bottom-rightbox img {width: 121px; height: 24px;} 

@media screen and (max-width: 1400px) {
  .footer-inner .footer-top .top-rightbox .gnb {width: 100%; font-size: 20px;} 
  .footer-inner .footer-top .top-leftbox {width: 100%;}
  .footer-inner .footer-top .top-leftbox .family-site {padding: 13px 0 ; width: 100%; margin-bottom: 19px;}  }

@media screen and (max-width: 1024px) {
   /* footer */
  footer {padding: 85px 61px;}
  .footer-inner {width: 100%; height: 100%;  margin: 0;}
  .footer-inner .footer-top {width: 100%;  flex-wrap: wrap; margin-bottom: 44px;}
  .footer-inner .footer-top .top-leftbox {width: 100%;}
  .footer-inner .footer-top .top-leftbox .family-site {padding: 13px 0 ; width: 100%; margin-bottom: 19px;}
  .footer-inner .footer-top .top-rightbox {width: 100%;}
  .footer-inner .footer-top .top-rightbox .gnb { width: 100%; }
  .footer-inner .footer-bottom .bottom-leftbox {margin-bottom: 63px;}
  .footer-inner .footer-bottom .bottom-rightbox  {justify-content: space-between; width: 100%;}}
        
@media screen and (max-width: 768px) {
  /* footer */
  .footer-inner .footer-top .top-rightbox {width: 100%; flex-wrap: wrap;}
  .footer-inner .footer-top .top-rightbox .gnb {width: 100%; flex-wrap: wrap;}
  .footer-inner .footer-top .top-rightbox .gnb li {width: 100%; margin-bottom: 8px; padding: 10px 0;}
  .footer-inner .footer-bottom .bottom-rightbox .copyright {margin-right: 0; width: 100%; margin-bottom: 10px; font-size: 12px;}}

@media screen and (max-width: 600px){
  /* footer */
  footer {padding: 82px 24px;}
  .footer-inner .footer-top .top-leftbox .family-site {padding: 13px 0; width: 100%; margin-bottom: 19px;}
  .footer-inner .footer-bottom .bottom-rightbox {flex-wrap: wrap;}
  .footer-inner .footer-top .top-rightbox .sns-icon {justify-content: left;}}



/* animation */
@keyframes slideup {
    0% {transform: translateY(100px); opacity: 0;}
    40% {transform: translateY(100px); opacity: 0;}
    /* 100% {transform: translateY(0px); opacity: 1;} */
}
/* scrolla 기본: 처음엔 안 보이게 */
.animate{
  opacity: 0;
  transform: translateY(60px);
  transition: all 0.8s ease;
}

/* scrolla가 붙여주는 클래스(보통 animated) */
.animate.animated{
  opacity: 1;
  transform: translateY(0);
}