@charset "utf-8";
/* common */
:root {
  --nvh : calc(var(--vh, 1vh) * 100);
  --montserrat : "Montserrat", sans-serif;
  --pretendard : "Pretendard";

  --primary : #FF5635; 

  --bgc : #010101;
  --gray3 : #333;
  --gray6 : #666;
  --gray9 : #999;
  --white : #fff;
  --black : #010101;

  --headerH:100px;
  --section-round: 100px;
  --fvh: calc(100 * var(--vh));

  --gap160 : 160px;
  --gap120 : 120px;
  --gap100 : 100px;
  --gap80 : 80px;
  --gap40 : calc(var(--gap80)/2);
  --gap32 : 32px;
  --gap24 : 24px;
  --gap10 : 10px;


  --vwpx : 0.052vw;
  --font28 : calc(var(--font14)*2);
  --font26 : 26px;
  --font25 : 25px;
  --font24 : 24px;
  --font20 : 20px;
  --font18 : 18px;
  --font16 : 16px;
  --font14 : 14px;
}

@media screen and (max-width: 1280px){
  :root {
    --gap160 : 120px;
    --gap120 : 100px;
    --gap100 : 80px;
    --gap80 : 60px;
    --gap32 : 26px;
    --gap24 : 20px;
    --gap10 : 8px;


    --font28 : 26px;
    --font26 : 24px;
    --font25 : 21px;
    --font24 : 20px;
    --font20 : 18px;
    --font18 : 18px;
    --font16 : 16px;
    --font14 : 14px;

    
  }
}

@media screen and (max-width: 1024px){
  :root {
    --headerH: 80px;
    --section-round : 60px;
  }
}

@media screen and (max-width: 768px){
  :root {
     --headerH:56px;
     --section-round: 40px;

    --gap160 : 100px;
    --gap120 : 80px;
    --gap100 : 60px;
    --gap80 : 40px;
    --gap32 : 20px;
    --gap24 : 16px;
    --gap10 : 6px;

    --font28 : 24px;
    --font26 : 22px;
    --font25 : 20px;
    --font24 : 19px;
    --font20 : 18px;
    --font18 : 16px;
    --font16 : 15px;
    --font14 : 14px;
  }
}

@media screen and (max-width: 480px){
  :root {

    --section-round : 28px;

    --font28 : 22px;
    --font26 : 20px;
    --font25 : 19px;
    --font24 : 18px;
    --font20 : 17px;
    --font18 : 16px;
    --font16 : 15px;
    --font14 : 14px;
  }
}

body {background: var(--bgc); min-height: 100vh;}
#wrap {width: 100%; color: var(--white); }
section {box-sizing: border-box;}


.font-ko {font-family: var(--pretendard); letter-spacing: -0.01em;}
.font-en {font-family: var(--montserrat);}

.ta-c {text-align: center;}
.ta-r {text-align: right;}

.img-box img {max-width: 100%;}

/* cursor */
#cursor {position: fixed; z-index: 99999; pointer-events: none; width: 20px; height: 20px; left: 0; top: 0; background-color: rgba(0,0,0,0);}
#cursor::before {content:""; background-color: rgba(0,0,0,0); width: 30px; height: 30px; display: block; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: width 0.4s, height 0.4s, background-color 0.4s, border 0.4s; border: 1px solid var(--primary);}
#cursor span {font-size: 22px; font-weight: 700; color: var(--white); width: 180px; height: 180px; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; background-color: rgba(0,0,0,0); }

/* 
hover0 : 주황 테두리, 중간 사이즈
hover1 : 주황배경-흰텍스트, 큰 원
hover2 : 흰배경-주황텍스트, 큰 원
hover3 : 흰배경-블랙텍스트, 큰 원
 */
#cursor.hover0::before {width: 50px; height: 50px;  }
#cursor.hover1::before {width: 180px; height: 180px; background-color: var(--primary);}
#cursor.hover2::before {background-color: var(--white); width: 180px; height: 180px; border-color: #ddd; }
#cursor.hover2 span {color: var(--primary);}
#cursor.hover3::before {background-color: var(--white); width: 180px; height: 180px; border-color: #ddd;}
#cursor.hover3 span {color: var(--black);}

#cursor[class*="hover"]:not(.hover0) span {opacity: 1; transition-delay: 0.2s;}

@media screen and (max-width:1024px) {
  #cursor {opacity: 0;}
}

/* input */
input::placeholder {color: #555;}
input[type="text"], input[type="password"] {height: 3.2em; padding: 0 1.5em; font-size: var(--font20); line-height: 1.5; border-radius: 8px; width: 100%; background: rgba(0,0,0,0); border: 1px solid #999; color: #333; font-family: var(--pretendard); letter-spacing: -0.01em;}
/* input[type="text"]:read-only, input[type="password"]:read-only {background: var(--secondary); border-color: var(--secondary);}  */

input[type="checkbox"] {appearance: none; width: 30px; height: 30px; border-radius: 7px; border: 1px solid #999; box-sizing: border-box; background: rgba(0,0,0,0); position: relative; vertical-align: middle; }
input[type="checkbox"]:checked {background-color: var(--primary); background-image: url(/img/com/checkbox_checked.svg); background-size: cover; background-repeat: no-repeat; background-position: center; border-color: var(--primary);}

input[type="radio"] {appearance: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #999; box-sizing: border-box; background: rgba(0,0,0,0); vertical-align: middle; margin-right: 0.8em; } 
input[type="radio"]:checked {border-color: var(--primary); background-image: url(/img/com/radio_checked.svg); background-size: cover; background-position: center; background-repeat: no-repeat;}


.textarea-box {border-radius: var(--gap10); border: 1px solid #999; padding: calc(var(--gap10)*2.4) calc(var(--gap10)*3); overflow: hidden;}
.textarea-box textarea {width: 100%; height: 100%; }
textarea {appearance: none; resize: none; display: block; font-size: var(--font20); padding: 0; color: #333; background: rgba(0,0,0,0); border: none; font-family: var(--pretendard); letter-spacing: -0.01em;}

textarea::placeholder {color: #555;}

select {appearance: none; height: 61px; padding: 0 calc(var(--gap10)*7) 0 calc(var(--gap10)*3); background: rgba(0,0,0,0); border: 1px solid #999; box-sizing: border-box; border-radius: 8px; font-size: 22px; font-family: var(--pretendard); color: var(--black); background-image: url(/img/com/select_arrow.svg); background-position: right 20px center; background-size: 20px auto; background-repeat: no-repeat; font-family: var(--pretendard); letter-spacing: -0.01em;}

@media screen and (max-width:1024px){
   select {height: 46px; font-size: 18px; background-position: right 16px center; background-size: 16px auto; border-radius: 6px;}
}
@media screen and (max-width:768px) {
  input[type="text"], input[type="password"] {height: 56px; font-size: 16px;}

  input[type="checkbox"] {width: 26px; height: 26px; border-radius: 4px;}

  .textarea-box {padding: 1em 1.2em; border-radius: 6px;}
 
}
@media screen and (max-width:480px){
  input[type="text"], input[type="password"] {font-size: 14px; height: 50px;}

  select {height: 40px; font-size: 14px; background-size: 14px auto;}

  textarea {font-size: 14px;}
  
}


/* scrollbar */
.custom-scrollbar::-webkit-scrollbar {width: 6px; height: 6px;}
.custom-scrollbar::-webkit-scrollbar-track {background: rgba(0,0,0,0); }
.custom-scrollbar::-webkit-scrollbar-thumb {background: #999; border-radius: 3px; }
@media screen and (max-width:768px){
  .custom-scrollbar::-webkit-scrollbar {width: 4px; height: 4px;}
}


/* button */
.button {display: flex; align-items: center; justify-content: center; height: var(--height); font-weight: 700; gap: 0.5em;}
.button[disabled] {background: #999 !important; pointer-events: none;}

.button.size-ss {--height: 41px; font-size: var(--font18); padding: 0 calc(var(--gap10)*3);}
.button.size-s {--height: 54px; font-size: var(--font20); padding: 0 calc(var(--gap10)*3);}
.button.size-m {--height: 64px; font-size: var(--font20); }
.button.size-l {--height: 76px; font-size: calc(var(--font20)*1.5);}
.button.size-xl {--height: 95px; font-size: calc(var(--font20)*2);  }

.button.ty1 {background: var(--black); color: var(--primary); }
.button.ty2 {background: var(--primary); color: var(--white);}
.button.ty3 {background: var(--black); color: var(--white);}

.button.round-mini {border-radius: var(--gap10); }
.button.round-half {border-radius: calc(var(--height)/2);}

.button .arrow {font-size: 0;}
.button .arr-ani[type="down"] {height: var(--arrH); overflow: hidden; font-size: 0;}
.button .arr-ani[type="down"] span {height: calc(var(--arrH)*2 + var(--gap)); display: flex; flex-direction: column; gap: var(--gap); transform: translateY(calc((var(--arrH) + var(--gap))*-1)); transition: transform 0.6s cubic-bezier(0.83, 0, 0.17, 1); }
.button .arr-ani[type="down"] span svg {height: var(--arrH);}
.button:hover .arr-ani[type="down"] span {transform: translateY(0);}

.button .arr-ani[type="right"] {width: var(--arrW); overflow: hidden; font-size: 0;}
.button .arr-ani[type="right"] span {width: calc(var(--arrW)*2 + var(--gap)); display: flex; flex-direction: row; gap: var(--gap); transform: translateX(calc((var(--arrW) + var(--gap))*-1)); transition: transform 0.6s cubic-bezier(0.83, 0, 0.17, 1); }
.button .arr-ani[type="right"] span svg {width: var(--arrW);}
.button:hover .arr-ani[type="right"]  span {transform: translateX(0);}

.btn-point {--point:10px;  position: relative; display: inline-block;}
.btn-point::before {content:""; background: var(--black); border: 1px solid #4e4e4e; width: 100%; height: 100%; position: absolute; left: 0; top: 0; border-radius: calc(var(--height)/2); box-sizing: border-box;}
.btn-point::after {content:""; width: var(--point); height: var(--point); border-radius: 50%; background: var(--primary); position: absolute; left:0; top: 50%; transform: translate(calc(var(--point)*var(--size)), -50%); transition: 0.4s;}
.btn-point .text-wrap {height: var(--height); border-radius: calc(var(--height)/2); display: flex; justify-content: center; align-items: center; position: relative; z-index: 2; padding: 0 calc(var(--point)*var(--size)); padding-left: calc(var(--point)*var(--size) + var(--point)*2);  }
.btn-point span {display: block; line-height: 1; transition: 0.3s;}

.btn-point.size-s {--size:2; --height:40px;}
.btn-point.size-m {--size:3; --height:50px;}

.btn-textbg {}
.btn-textbg span {display: block; background-clip: text; -webkit-background-clip: text; color: rgba(0,0,0,0); background-size: auto 200%; background-image: linear-gradient(to top, var(--primary) 50%, var(--white) 50%); background-position-y: 0%; transition: background-position 0.5s;}



@media (hover: hover) {
  .btn-point:hover::after {width: 100%; height: 100%; border-radius: calc(var(--height)/2); transform: translate(0px, -50%);}
  .btn-point:hover .text-wrap span {transform: translateX(calc(var(--point)*-1));}

  .btn-textbg span:hover {background-position-y: 100%;}
}

@media screen and (max-width:1280px){}
@media screen and (max-width:1024px){
  .button.size-s {--height: 48px; }
  .button.size-m {--height: 54px; }
  .button.size-l {--height: 60px; }
  .button.size-xl {--height: 72px; font-size: calc(var(--font20)*1.5);}
}
@media screen and (max-width:768px){
  .btn-point::after {width: 100%; height: 100%; border-radius: calc(var(--height)/2); transform: translate(0px, -50%);}
  .btn-point .text-wrap span {transform: translateX(calc(var(--point)*-1));}
}
@media screen and (max-width:480px){
  .button.size-ss {--height: 36px; font-size: 14px; }
  .button.size-s {--height: 42px; font-size: 14px;}
  .button.size-m {--height: 50px; font-size: 16px;}
  .button.size-l {--height: 54px; font-size: 18px;}
  .button.size-xl {--height: 60px; font-size: 20px; }
}

/* text */
.color1 {color: var(--primary); }

/* list */
.dot-list {}
.dot-list li {padding-left: 1em; color: var(--color); position: relative; line-height: 1.7; }
.dot-list li::before {content:""; width: 0.2em; height: 0.2em; border-radius: 50%; background: var(--color); position: absolute; left: 0em; top: 0.75em; }

/* ani */
.ani-text-raise {}
.ani-text-raise .line {overflow: hidden;}
.ani-text-raise .line .text-over {display: inline-block; transform: translateY(100%); transition: transform 0.8s;}
.ani-start .ani-text-raise .line .text-over {display: inline-block; transform: translateY(0%); }

/* round bg section */
.rb-section {background: #eee; border-radius: var(--section-round); padding: var(--gap100) 0;}


/* modal */
.modal-layer {position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.8); display: flex; align-items: center; justify-content: center; z-index: 99999; opacity: 0; pointer-events: none; transition: opacity 0.4s;}
.modal-layer.open {opacity: 1; pointer-events: auto;}
.modal-layer .modal-box {background: #eee; border-radius: 20px; width: 90%; max-width: 800px; padding: var(--gap80) calc(var(--gap10)*3) calc(var(--gap10)*5); font-size: 22px; }
.modal-layer .modal-box * {font-family: var(--pretendard); letter-spacing: -0.01em;}
.modal-layer .modal-box .modal-head {text-align: center; font-size: 1em; margin-bottom: 1em; font-weight: 600; line-height: 1.7; color: var(--black); } 
.modal-layer .modal-box .modal-body {max-height: 50vh; overflow: auto; padding: 0 calc(var(--gap10)*3);}
.modal-layer .modal-box .modal-body .modal-cont {font-size: 0.8em; color: #222;}
.modal-layer .modal-box .modal-foot {display: flex; justify-content: center; gap: var(--gap10); align-items: center; margin-top: calc(var(--gap10)*3); }
@media screen and (max-width:1024px){
  .modal-layer .modal-box {font-size: 20px;}
}
@media screen and (max-width:768px){
  .modal-layer .modal-box {font-size: 18px;}
  .modal-layer .modal-box .modal-body {padding: 0 var(--gap10);}
}


/* tag */
.tag-box {display: flex; flex-wrap:wrap; gap: calc(var(--gap10)*2) var(--gap10);}
.tag-box .tag {font-size: var(--font18); font-family: var(--pretendard); color: #222; line-height: 1.7; display: flex; align-items: center; justify-content: center; text-align: center; height: 41px; padding: 0 calc(var(--gap10)*3); letter-spacing: -0.01em; border-radius: 21px; background: #DFDFDF; transition: background-color 0.4s, color 0.4s;}
.tag-box .tag.active {background: var(--white); color: var(--primary); }

.tag-box.size-l .tag {height: 44px; border-radius: 22px; font-size: var(--font20);}

@media (hover: hover){
  .tag-box .tag:hover {background: var(--white); color: var(--primary); }
}

@media screen and (max-width:1024px){
  .tag-box .tag {font-size: 16px; height: 36px;}
  .tag-box.size-l .tag {font-size: 17px; height: 38px;}
}
@media screen and (max-width:480px){
    .tag-box .tag {font-size: 14px; height: 32px;}
    .tag-box.size-l .tag {font-size: 16px;}
}


/* header */
#header {position: fixed; left: 0; top: 0; width: 100%; z-index: 10000; }
#header .inner {width: 100%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; height: var(--headerH); padding: 0 80px; }
#header .logo {height: 20px; position: relative; z-index: 1; font-size: 0;}
#header .logo img {height: 100%;}
#header .gnb-box {position: relative; display: flex; align-items: center; gap: calc(var(--gap)/2); font-size: 18px; color: var(--white); font-weight: 500; --gap:30px;}
#header .gnb-box .gnb-pc-box {display: flex; align-items: center; gap: calc(var(--gap)/2);}
#header .gnb-box .gnb-mo-box {display: none; position: fixed; left: 0; top: 0; padding: var(--headerH) 5%; width: 100%; height: 100svh; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap); background: var(--black); opacity: 0; pointer-events: none; transform: translateY(-10%); transition: opacity 0.3s, transform 0.3s;}
#header .gnb-box .gnb-btn {width: 25px; height: 25px; position: relative; z-index: 3; transition: 0.3s; cursor: pointer; --itemHeight:3px; }
#header .gnb-box .gnb-btn span,
#header .gnb-box .gnb-btn::before,
#header .gnb-box .gnb-btn::after {content:""; width: 100%; height: var(--itemHeight); background: var(--white); position: absolute; right: 0px; top: 50%; display: block; transform: translateY(-50%); transition: transform 0.3s;}
#header .gnb-box .gnb-btn::before {transform: translateY(calc(-50% - (var(--itemHeight)*2 + 1px))); }
#header .gnb-box .gnb-btn::after {transform: translateY(calc(-50% + (var(--itemHeight)*2 + 1px))); }

#header .gnb-box .gnb-nav { overflow: hidden; width: fit-content; height: 1.5em; position: relative; transition: width 0.4s;}
#header .gnb-box .gnb-nav nav {width: fit-content; padding: 0 15px; box-sizing: border-box;}
#header .gnb-box .gnb-nav ul {display: flex; gap: var(--gap); align-items: center;}
#header .gnb-box .gnb-nav ul li {}
#header .gnb-box .gnb-nav ul li a {display: block; white-space: nowrap; position: relative; font-weight: 600;}



@media screen and (min-width:1025px) {
  @media (hover: hover) {
    
  }
}

@media screen and (max-width:1680px){
  #header .inner {padding: 0 2.5%;}
}
@media screen and (max-width:1024px) {
  #header .inner {padding: 0 5%;}
  #header .logo {height: 16px;}
  #header .gnb-box {--gap:24px; font-size: 16px;}
}
@media screen and (min-width:769px){
  #header .gnb-box.active .gnb-btn::before {transform: translateY(-50%); }
  #header .gnb-box.active .gnb-btn::after {transform: translateY(-50%); }
}
@media screen and (max-width:768px){
  #header .gnb-box {font-size: 35px; --gap:6svh; }
  #header .gnb-box .gnb-btn {width: 20px; height: 20px; --itemHeight:2px;}
  #header .gnb-box .gnb-pc-box {display: none;}
  #header .gnb-box .gnb-mo-box {display: flex;}
  #header .gnb-box .gnb-nav {width: auto !important; height: auto; transition: 0s;}
  #header .gnb-box .gnb-nav nav {position: relative;}
  #header .gnb-box .gnb-nav ul {flex-direction: column;}
  #header .gnb-box .gnb-nav ul li a {font-weight: 500;}

  #header .gnb-box .btn-point.size-s {--height:65px; --size:3;}

  #header .gnb-box.open .gnb-mo-box {opacity: 1; pointer-events: auto; transform: translateY(0);}
  #header .gnb-box.open .gnb-btn::before {transform: translateY(-50%); }
  #header .gnb-box.open .gnb-btn::after {transform: translateY(-50%); }
  
} 
@media screen and (max-width:480px){
  #header .logo {height: 12px;}
}

/* content */
#contents {position: relative; z-index: 1; width: 100%; border-radius: 0 0 var(--section-round) var(--section-round); background: var(--black);}


/* footer */
footer {width: 100%;  min-height: 100svh; }

.footer { width: 100%; background: var(--black); position: fixed; left: 0; bottom: 0; }
.footer .inner {padding: max(10svh, var(--headerH)) 80px var(--gap80); width: 100%; height: 100svh; min-height: fit-content; display: flex; flex-direction: column; justify-content: space-between; gap: var(--gap80);}

.footer .top {width: 100%; position: relative;}
.footer .top .arrow {position: absolute; right: 0; top: 0; width: 130px;}
.footer .top .text span {display: block; font-weight: 600; font-size: 120px; line-height: 0.9; background-clip: text; -webkit-background-clip: text; color: rgba(0,0,0,0); background-size: auto 200%; background-image: linear-gradient(to top, var(--primary) 50%, var(--white) 50%); background-position-y: 0%; }
.footer .top .text .mo-br {display: none;}

.footer .btm {display: flex; justify-content: space-between; align-items: end;}
.footer .btm .add {display: flex; flex-direction: column; line-height: 1.7; font-size: 20px; color: #ccc; }
.footer .btm .add li {display: flex; margin-top: 5px;}
.footer .btm .add div {font-family: var(--pretendard); }
.footer .btm .add div.tit {padding-right: 1.2em; position: relative;}
.footer .btm .add div.tit::before {content:""; width: 1px; height: 0.7em; background: #aaa; position: absolute; right: 0.6em; top: 0.5em; }
.footer .btm .copyright {font-family: var(--pretendard); color: var(--gray6); font-size: 20px; margin-top: 1em;}
.footer .btm .f-logo {display: block; height: 20px; margin-top: 50px; font-size: 0;}
.footer .btm .f-logo img {height: 100%;}
.footer .btm .fnb {font-weight: 700; font-size: 35px; display: flex; gap: 50px; align-items: center;}

@media screen and (max-width:1680px){
  .footer .inner {padding: max(10svh, var(--headerH)) 2.5% var(--gap80);}
  .footer .top .text span {font-size: 95px;}
  .footer .top .arrow {width: 80px;}
}
@media screen and (max-width:1280px){
  .footer .btm .fnb {font-size: 30px;}
}
@media screen and (max-width:1024px){
  .footer {position: relative;}
  .footer .inner {padding: max(10svh, var(--headerH)) 5% 40px;}
  .footer .top .text span {font-size: 80px;}
  .footer .top .text .mo-br {display: block;}

  .footer .btm {flex-direction: column-reverse; align-items: start; gap: 60px;}
  .footer .btm .fnb {flex-direction: column; align-items: start; gap: 5px;}
  .footer .btm .f-logo {height: 16px; margin-top: 32px;}
  .footer .btm .copyright {margin-top: 0.8em;}

  .footer .btm .add, 
  .footer .btm .copyright {font-size: 16px;}

  /* @media screen and (max-height:768px) {
    .footer .inner {padding-top: 12svh;}
    .footer .top .text span {font-size: 60px;}
    .footer .btm {gap: 30px; }
    .footer .btm .fnb {font-size: 28px;}

    .footer .btm .add, 
    .footer .btm .copyright {font-size: 16px;}
  } */
}
@media screen and (max-width:768px){
  .footer .top .text span {font-size: 50px; line-height: 1;}
  .footer .top .arrow {width: 50px;}

  .footer .btm .add, 
  .footer .btm .copyright {font-size: 14px;}
}
@media screen and (max-width:480px){
  .footer .top .text span {font-size: 40px;}
  .footer .top .arrow {width: 40px;}
  .footer .btm .f-logo {height: 12px;}
}

/* quick menu */
.floating-wrap {position: fixed; width: 100%; left: 0; bottom: 0; z-index: 9999;}

.floating-box { position: absolute; right: 20px; bottom: 40px; }
.floating-box li {margin-top: 10px; pointer-events: auto;}
.floating-box a {display: flex; width: 60px; height: 60px; position: relative; align-items: center; justify-content: center; font-size: 0; box-shadow: 0 0 8px rgba(153,153,153,0.5); border-radius: 50%;}
.floating-box a { background: var(--black); }
.floating-box a.top {background: var(--primary); }
.floating-box a .icon {width: 50%;}

.floating-box a.faq {background: var(--white); }
.floating-box a.faq p {font-weight: 700; font-size: 18px; color: var(--primary); line-height: 1;}

.floating-box .quick-mo-btn {display: none;}
.floating-box .quick-mo-btn .icon {transition: transform 0.4s;}

@media screen and (max-width:1024px) {
  .floating-box {pointer-events: none;}
  .floating-box a {width: 40px; height: 40px;}
  .floating-box a.faq p {font-size: 12px;}

  .floating-box li:not(.quick-mo-btn) {pointer-events: none; opacity: 0; transform: translateY(100%); transition: opacity 0.4s, transform 0.4s;}
  .floating-box .quick-mo-btn {display: block; }

  .floating-box.open li {opacity: 1; transform: translateY(0); pointer-events: auto;}
  .floating-box.open .quick-mo-btn .icon {transform: rotate(45deg);}
}
@media screen and (max-width:480px) {
  .floating-box {right: 12px; bottom: 24px;}
}