@font-face {
  font-family: 'FFF Acid Grotesk';
  font-weight: 200;
  src: url('../font/FFF-AcidGrotesk-ExtraLight-TRIAL.otf') format('opentype');
}
@font-face {
  font-family: 'FFF Acid Grotesk';
  font-weight: 300;
  src: url('../font/FFF-AcidGrotesk-Light-TRIAL.otf') format('opentype');
}
@font-face {
  font-family: 'FFF Acid Grotesk';
  font-weight: 400;
  src: url('../font/FFF-AcidGrotesk-Regular-TRIAL.otf') format('opentype');
}
@font-face {
  font-family: 'FFF Acid Grotesk';
  font-weight: 500;
  src: url('../font/FFF-AcidGrotesk-Medium-TRIAL.otf') format('opentype');
}
@font-face {
  font-family: 'FFF Acid Grotesk';
  font-weight: 600;
  src: url('../font/FFF-AcidGrotesk-Bold-TRIAL.otf') format('opentype');
}
@font-face {
  font-family: 'FFF Acid Grotesk';
  font-weight: 700;
  src: url('../font/FFF-AcidGrotesk-ExtraBold-TRIAL.otf') format('opentype');
}

body{overscroll-behavior: none; background-color: #fff;}
*{margin: 0; padding: 0; box-sizing: border-box; font-family:"FFF Acid Grotesk" ,"Pretendard Variable", sans-serif;}
a{text-decoration: unset; color: #000;}
li{list-style: none;}
img{max-width: 100%; display: block;}
.pc{display: block;}
.mob{display: none;}
.wrap{position:relative; width: 100%; min-height: 100vh;}


.page_off .header_inner{opacity: 0;}
.header_inner{position: fixed; z-index: 99; left: 0; top: 0; padding:32px 56px 20px; width: 100%; display: flex; justify-content: space-between; align-items: center;     mix-blend-mode: difference; transition: transform 0.4s cubic-bezier(0, 0, 0.43, 1), opacity 0.4s cubic-bezier(0, 0, 0.43, 1); opacity: 1;}
.header_inner::after{content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #fff; }
.header_logo{height: 26px;}
.header_inner ul{display: flex; gap: 40px;}
.header_inner ul li a{font-size: 20px; font-style: normal; font-weight: 400; line-height: 130%; color: #fff; position: relative;}
.header_inner ul li a::after{content:''; display: block; top: calc(100% + 20px); height: 4px; width: 000%; background-color: #fff; position: absolute; left: 50%; transform: translateX(-50%); transition: ease 0.3s width,ease 0.3s opacity; opacity: 0;}
.header_inner ul li a.active::after, .header_inner ul li a:hover::after{width: 100%; opacity: 1;}

.mob_inner{position: absolute; right: 0; transform: translateX(100%);}

.footer{position: relative; z-index: 9; bottom: 0; left: 0; padding: 30px 56px 60px; width: 100%; border-top: 1px solid #2a2a2a; background-color: #000;}
.footer *{color: #fff;}
.footer_inner{position: relative; display: flex; align-items: center; justify-content: space-between;}

.footer_i_1{display: flex; align-items: center; gap: 80px;}
.footer_i_1 a{font-size: 15px; font-style: normal; font-weight: 400; line-height: 150%}
.footer_dropdown_w{height: 32px; width: 200px; display: flex; align-items: center; position: relative; flex-direction: column-reverse;}
.footer_dropdown{width: 100%;  border: 1px solid #fff; height: 32px; position: relative; display: flex; flex-direction: column-reverse; overflow: hidden; transition: height ease 0.3s; position: absolute; left: 0; bottom: 0; background-color: #000;}
.footer_dropdown::after{content: ''; background-image: url(../img/arrow_top.png); background-size: cover; background-position: center; width: 12px; height: 7px; position: absolute; right: 12px; bottom: 11px; transform: rotate(180deg); transition: ease 0.3s all;}
.footer_dropdown.open::after{transform: rotate(0deg);}
.footer_dropdown *{color: #FDFBF4; font-size: 15px; font-weight: 400; line-height: 150%; text-transform: uppercase; display: flex ; flex-direction: column-reverse;}
.footer_dropdown li{padding: 8px 12px 3px; height: 32px; display: flex; justify-content: center; align-items: flex-start;}

.footer_icon{position: fixed; right: 3.8vw; bottom: 3vw; width: 6vw; z-index: 10; }

/*.fade-cw{overflow: hidden;}*/
.fade-cw u, .fade-cw span, .fade-cw p{transition: all 1s cubic-bezier(0,0,.43,1.06), font-size 0s ease;}
.fadeCover-1{display: block; opacity: 0; transform: translateY(130%); transition: all 1s cubic-bezier(0,0,.43,1.06); transition-delay: 0.0s;}
.fadeCover-2{display: block; opacity: 0; transform: translateY(130%); transition: all 1s cubic-bezier(0,0,.43,1.06); transition-delay: 0.1s;}
.fadeCover-3{display: block; opacity: 0; transform: translateY(130%); transition: all 1s cubic-bezier(0,0,.43,1.06); transition-delay: 0.2s;}
.fadeCover-4{display: block; opacity: 0; transform: translateY(130%); transition: all 1s cubic-bezier(0,0,.43,1.06); transition-delay: 0.3s;}
.fadeCover-5{display: block; opacity: 0; transform: translateY(130%); transition: all 1s cubic-bezier(0,0,.43,1.06); transition-delay: 0.4s;}
.fadeCover-6{display: block; opacity: 0; transform: translateY(130%); transition: all 1s cubic-bezier(0,0,.43,1.06); transition-delay: 0.5s;}
.fadeCover-7{display: block; opacity: 0; transform: translateY(130%); transition: all 1s cubic-bezier(0,0,.43,1.06); transition-delay: 0.6s;}


.ani.active .fadeCover-1,
.ani.active .fadeCover-2,
.ani.active .fadeCover-3,
.ani.active .fadeCover-4,
.ani.active .fadeCover-5,
.ani.active .fadeCover-6,
.ani.active .fadeCover-7{transform: translateY(0); opacity: 1;}

.fade-slice{opacity: 0; white-space: normal; word-break: keep-all;  /* 한글 단어 단위 줄바꿈 */ line-break: anywhere; transition: ease 0.3s opacity;}
.ani.active .fade-slice{opacity: 1;}
.fade-slice .line{overflow: hidden;}

.fade-slice .line .inner{display: block; transform: translateY(140%); transition: all 1s cubic-bezier(0,0,.43,1.06); white-space: nowrap;}
.fade-slice .line:nth-child(1) .inner{transition-delay: 0.0s;}
.fade-slice .line:nth-child(2) .inner{transition-delay: 0.1s;}
.fade-slice .line:nth-child(3) .inner{transition-delay: 0.2s;}
.fade-slice .line:nth-child(4) .inner{transition-delay: 0.3s;}
.fade-slice .line:nth-child(5) .inner{transition-delay: 0.4s;}
.fade-slice .line:nth-child(6) .inner{transition-delay: 0.5s;}
.fade-slice .line:nth-child(7) .inner{transition-delay: 0.6s;}
.fade-slice .line:nth-child(8) .inner{transition-delay: 0.7s;}
.fade-slice .line:nth-child(9) .inner{transition-delay: 0.8s;}
.fade-slice .line:nth-child(10) .inner{transition-delay: 0.9s;}
.fade-slice .line:nth-child(11) .inner{transition-delay: 1s;}
.ani.active .fade-slice .line .inner{transform: translateY(00%);  opacity: 1;}
.ani.active .fade-slice .line{ width: fit-content;}




.footer_white .footer{background-color: unset;}
.end_logo { background-color: #000; padding: 4.021vw 3.753vw 4.021vw;}
.wrap section.end_logo{max-width:unset;}
.end_logo img{width: 100%;}
.footer_white .end_logo { background-color: unset; }
.footer_white .end_logo img{filter: invert(1);}
.footer_white .footer *{color: #000;}
.footer_white .footer .footer_dropdown{background-color: #FDFBF4; border: 1px solid #000;}
.footer_white .footer_dropdown::after{filter: invert(1);}

@media(min-width:1920px){
  /*.header_inner.pc{max-width: 1920px; margin: auto; left: 50%; transform: translateX(-50%); padding: 32px 72px 20px;}*/
  .end_logo{padding: 60px 56px;}
}
@media (min-width:1025px){
  .mob{display: none!important;}
  .header_inner.pc{transform: translateY(0%); }
  .header_inner.pc.scroll_down{transform: translateY(-101%);}

  .footer_icon.scroll_bottom{bottom: 100px;}
  .footer_icon{transition: cubic-bezier(0.01, 0.27, 0.38, 0.97) 0.5s bottom;}
}
@media (max-width:1024px){
  .pc{display: none;}
  .mob{display: block;}
  body{overflow-x: hidden;}

  .header_inner.mob{padding: 20px; display: flex;}

  .header_logo{width: 77px; height: 13px; object-fit: contain;}
  .mob_btn{height: 17px; width: 34px; cursor: pointer;}
  .mob_btn svg{height: 100%; width: 32px;}
  .mob_inner{transform: translateX(100%); transition: transform 0.7s cubic-bezier(0, 0, 0.43, 1); height:/* calc(100 * var(--vh))*/ 100vh; width: 100%; top: 0; background-color: #FDFBF4; z-index: 98; position: fixed; padding:97px 0 0 0;}
  .mob_inner *{color: #000!important;}
  .mob_inner.open{transform: translateX(0);}
  .mob_m_1{gap: 20px; padding: 0 40px 40px; display: flex; flex-direction: column; position: relative;}
  .mob_m_1::after{content: ''; display: block; width: calc(100%); position: absolute; left: 0; bottom: 0; height: 1px; background-color: #000;}
  .mob_m_1 a{font-size: 30px;}
  .mob_m_2{padding: 40px; display: flex; flex-direction: column; position: relative; gap: 12px;}
  .mob_m_2 a{font-size: 13px; font-weight: 400; color: #6f6f6f;}


  .end_logo { padding: 8.889vw /*5.556vw */ 20px 8.889vw; }

  .footer{padding: 20px;}
  .footer_inner{flex-direction: column; justify-content: unset; align-items: unset; }
  .footer_i_1{align-items: unset; width: 160px; gap: 6px; flex-direction: column;}
  .footer_i_1 a{font-size: 11px;}
  .footer_dropdown_w{margin-bottom: 16px; width: 160px; height: 28px;}
  .footer_dropdown{flex-direction: column-reverse; height: 27.5px;}
  .footer_dropdown *{font-size: 11px;}
  .footer_dropdown::after{bottom: 9px;}
  .footer_i_2{position: absolute; bottom: 0; right: 0;}
  .footer_i_2 .mob{width: 67px; position: absolute; bottom: 22px; right: -8px;}
  .footer_i_2 li{color: #6F6F6F; font-size: 11px; font-weight: 400; line-height: 150%; }
  .footer_icon{right: 20px; bottom: 14px; width: 67px; transition: ease 0.5s bottom;}
  .footer_icon.scroll_bottom{bottom: 42px;}
}



.btn-1{font-size: 1.333vw; font-weight: 400; line-height: 1.3; border: 1px solid #000; padding: 0 1vw 0; height: 2.667vw; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; display: inline-flex; transition: all 1s cubic-bezier(0,0,.43,1.06); transition-delay: 0.6s; opacity: 0; transform: translateY(130%); padding-top: 0!important;}
.btn-1::before{content: ""; position: absolute; top: 0; right: -50px; bottom: 0;left: 0; border-right: 50px solid transparent; border-bottom: 80px solid #fff; transform: translateX(-100%); transition: 0.5s ease-in-out;}
.btn-1:hover::before{transform: translateX(-000%);}
.btn-1 p{transition: 0.5s ease-in-out; position: relative; z-index: 1; font-family: 'Pretendard Variable'; font-weight: 600; white-space: nowrap;}
.btn-1:hover p{color: #000;}
.wrap.footer_white .btn-1:hover p{color: #fff;}
.wrap.footer_white .btn-1::before{    border-bottom: 80px solid #000;}
.ani.active .btn-1{opacity: 1; transform: translateY(00%);}
.wrap:not(.footer_white) .btn-1{border-color: #fff;}
.wrap.footer_white .btn-1{border-color: #000;}

@media(min-width:1920px){
  .btn-1{border-color: #fff; padding: 6px 12px 0; width: unset; height: 46px; font-size:21px;}
}

@media (max-width: 1024px) {
  .btn-1{ font-size: 3.056vw; height: 8.889vw; position: unset; margin-top: 11.111vw;  padding: 1.2vw 2.66vw 0;}
}
.wrap::after{content: ''; display: block; width: 100%; height: 100%; position: fixed; background-color: #FDFBF4; opacity: 0; top: 0; left: 0; pointer-events: none; transition: cubic-bezier(0.075, 0.82, 0.165, 1) opacity 1s; transition-delay: 0.5s; z-index: 10;}
.wrap.page_off::after{ pointer-events: unset; opacity: 1;}