@charset "utf-8";
/* common */
:root {
  --noto : "Noto Sans", sans-serif;
  --mincho : "Shippori Mincho B1", serif;
  --open : "Open Sans", sans-serif;

  --primary : #E83A29; 
  --primary-op: rgba(232,58,41,0.5);
  --secondary : #FFE8DA;
  --bgc : #FFFEEF;
  --gray3 : #333;
  --gray6 : #666;
  --gray9 : #999;
  --white : #fff;
  --black : #000;

  --headerH:100px;

  --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: 1260px){
  :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;
  }
}

@media screen and (max-width: 768px){
  :root {
     --headerH:50px;

    --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 {

    --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(--primary); padding-top: var(--headerH);}
section {box-sizing: border-box;}

.font-noto {font-family: var(--noto);}
.font-mincho {font-family: var(--mincho);}
.font-open {font-family: var(--open);}

.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; border: 1px solid var(--primary-op); display: block; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: width 0.3s, height 0.3s, background-color 0.3s;}
#cursor::after {content:"MORE"; font-size: var(--font20); font-weight: 600;  color: var(--white); width: 140px; height: 140px; 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.3s; background-color: rgba(0,0,0,0);}

#cursor.hover0::before {width: 50px; height: 50px;}
#cursor.hover1::before {width: 150px; height: 150px;} 
#cursor.hover2::before {width: 140px; height: 140px; background: var(--primary);}
#cursor.hover2::after { opacity: 1;}

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

/* input */
input::placeholder {color: var(--primary);}
input[type="text"], input[type="password"] {height: 65px; padding: 0 30px; font-size: var(--font18); line-height: 1.5; border-radius: 10px; width: 100%; background: rgba(0,0,0,0); border: 1px solid var(--primary-op); color: var(--primary);}
input[type="text"]:read-only, input[type="password"]:read-only {background: var(--secondary); border-color: var(--secondary);} 

input[type="checkbox"] {appearance: none; width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--primary); box-sizing: border-box; background: var(--bgc); position: relative;}
input[type="checkbox"]::before {content:""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(/img/checkbox_checked.svg) center no-repeat; background-size: cover; opacity: 0; pointer-events: none;}
input[type="checkbox"]:checked {background: var(--primary);}
input[type="checkbox"]:checked::before {opacity: 1;}

.radio-box {display: flex; gap: 10px 15px; flex-wrap: wrap; }
.radio-button {position: relative; border: 1px solid var(--primary-op); display: inline-flex; height: 55px; align-items: center; justify-self: center; padding: 0 25px; font-size: var(--font18); border-radius: 10px; box-sizing: border-box; cursor: pointer;}
.radio-button input[type="radio"] { width: 1px; height: 1px; opacity: 0; position: absolute; left: 0; top: 0; pointer-events: none; }
.radio-button:has(input[type="radio"]:checked) {font-weight: 700; color: var(--bgc); background: var(--primary);}

.textarea-box {border-radius: 10px; border: 1px solid var(--primary-op); padding: 20px 30px; overflow: hidden;}
.textarea-box textarea {height: 100%;}
textarea {appearance: none; resize: none; display: block; font-size: var(--font18); padding: 0; color: var(--primary); background: rgba(0,0,0,0); border: none;}
textarea::-webkit-scrollbar {width: 3px;}
textarea::-webkit-scrollbar-track {background: var(--bgc); }
textarea::-webkit-scrollbar-thumb {background: var(--primary); }
textarea::placeholder {color: var(--primary);}

@media screen and (max-width:768px) {
  input[type="text"], input[type="password"] {height: 48px; border-radius: 6px; padding: 0 18px; }

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

  .radio-box {gap: 8px 12px;}
  .radio-button {height: 42px; padding: 0 14px; border-radius: 6px; }

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

  .radio-box {gap: 6px; }
  .radio-button {font-size: 14px; padding: 0 12px; }
}


/* button */
.button {}
.button.size-s {height: 60px;}
.button.size-m {height: 80px;}

.arrow-btn {display: block; height: 100%; aspect-ratio: 1; border: 1px solid var(--primary-op); position: relative; border-radius: 50%; overflow: hidden; transition: background-color 0.3s; }
.arrow-btn span {display: flex; justify-content: end; align-items: center; width: 200%; height: 100%; transform: translateX(-50%); transition: transform 0.6s cubic-bezier(0.83, 0, 0.17, 1);}
.arrow-btn span::before,
.arrow-btn span::after {content:""; width: 50%; height: 100%; background-image: url(/img/arrow_r_red.svg); background-size: 48% auto;  background-repeat: no-repeat; background-position: center;}

.arrow-btn.down span {width: 100%; height: 200%; transform: translateY(-50%); flex-direction: column;}
.arrow-btn.down span::before,
.arrow-btn.down span::after {content:""; width: 100%; height: 50%; background-image: url(/img/arrow_d_red.svg);}

.arrow-btn.up span {width: 100%; height: 200%; transform: translateY(0%); flex-direction: column;}
.arrow-btn.up span::before,
.arrow-btn.up span::after {content:""; width: 100%; height: 50%; background-image: url(/img/arrow_d_red.svg); transform: scaleY(-1);}

.text-btn {height: 55px; display: inline-flex; justify-content: center; align-items: center; gap: 10px; padding: 0 25px; font-size: var(--font18); font-weight: 700; background: var(--primary); color: var(--bgc); border-radius: 10px;}
.text-btn.size-s {height: 44px; font-size: var(--font16); padding: 0 30px;}

.attach-btn {position: relative; cursor: pointer;}
.attach-btn input[type="file"] {width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0; z-index: 1; cursor: pointer;}
.attach-btn::before {content:""; width: 24px; height: 24px; background: url(/img/icon_download.svg) center no-repeat; background-size: cover; }


@media (hover: hover) {
  .arrow-btn:hover {background-color: var(--primary);}
  .arrow-btn:hover span {transform: translateX(0);  }
  .arrow-btn:hover span::before, .arrow-btn:hover span::after {background-image: url(/img/arrow_r_white.svg); }

  .arrow-btn.down:hover span {transform: translateY(0%);}
  .arrow-btn.down:hover span::before, .arrow-btn.down:hover span::after {background-image: url(/img/arrow_d_white.svg); }

  .arrow-btn.up:hover span {transform: translateY(-50%);}
  .arrow-btn.up:hover span::before, .arrow-btn.up:hover span::after {background-image: url(/img/arrow_d_white.svg); }
}

@media screen and (max-width:1260px){}
@media screen and (max-width:1024px){
  .button.size-m {height: 60px;}
  .button.size-s {height: 50px;}
}
@media screen and (max-width:768px){
  .text-btn {height: 42px; gap: 8px; border-radius: 6px; padding: 0 14px; }

  .attach-btn::before {width: 18px; height: 18px;}
}
@media screen and (max-width:480px){
  .text-btn {font-size: 15px;}
}


/* tag style */
.tag-box {display: flex; gap: 10px; flex-wrap: wrap; }
.tag-box span {min-height: 40px; border-radius: 20px; padding: 7px 20px; display: flex; align-items: center; justify-content: center; font-size: 16px; border: 1px solid var(--primary-op); width: fit-content; text-align: center;}

@media screen and (max-width:1260px){}
@media screen and (max-width:1024px){
  .tag-box span {min-height: 36px; border-radius: 18px; font-size: 14px;}
}
@media screen and (max-width:768px){}
@media screen and (max-width:480px){
  .tag-box span {font-size: 13px;}
}


/* animation */
.ani-target {transition-property: transform, opacity; transition-duration: 1s;}
.ani-target[data-delay="1"] {transition-delay: 0.2s;}
.ani-target[data-delay="2"] {transition-delay: 0.4s;}
.ani-target[data-delay="3"] {transition-delay: 0.6s;}

.text-raise {display: block; width: 100%; overflow: hidden; line-height: 1.4; margin: 0.05em 0; }
.text-raise .ani-target {transform: translateY(100%); display: inline-block; }
.ani-start .text-raise .ani-target {transform: translateY(0);}

.fade-up {opacity: 0; transform: translateY(var(--gap80));}
.ani-start .fade-up {opacity: 1; transform: translateY(0);}


/* modal */
.modal-area {position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0); display: flex; align-items: center; justify-content: center; z-index: 10000; overflow: hidden; transition: background-color 0.6s, opacity 0.6s 0.4s; opacity: 0; pointer-events: none;}
.modal-layer {background: var(--bgc); padding: calc(var(--gap100)/2); opacity: 0; transition: opacity 0.6s; width: 90%; max-width: 800px;}
.modal-layer .ly-head {position: relative; padding: var(--font24) 0; margin-bottom: 6px;}
.modal-layer .ly-head .tit {text-align: center; font-size: var(--font24); font-weight: 700;}
.modal-layer .close-btn {width: 30px; height: 30px; position: absolute; right: 0; top: 0; flex-shrink: 0;}
.modal-layer .close-btn::before,
.modal-layer .close-btn::after {content:""; width: 80%; height: 2px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(45deg); background: var(--primary);}
.modal-layer .close-btn::after {transform: translate(-50%,-50%) rotate(-45deg);}
.modal-layer .ly-cont {max-height: min(70vh,670px); overflow: auto; padding: 0 var(--font24);}
.modal-layer .ly-cont::-webkit-scrollbar {width: 3px;}
.modal-layer .ly-cont::-webkit-scrollbar-track {background: var(--bgc);}
.modal-layer .ly-cont::-webkit-scrollbar-thumb {background: var(--primary); border-radius: 3px;}

.modal-area.active {transition: background-color 0.6s, opacity 0.6s 0s; opacity: 1; background: rgba(0,0,0,0.6); pointer-events: auto;}
.modal-area.active .modal-layer {opacity: 1;}

.modal-layer input[type="text"], .modal-layer input[type="password"] {height: 54px; font-size: var(--font16); padding: 0 20px; }
.modal-layer input[type="checkbox"] {width: 28px; height: 28px;}
.modal-layer .form-item .form-tit {font-size: var(--font18);}
.modal-layer .form-item + .form-item {margin-top: 40px; }
.modal-layer .form-item .form-cont .textarea-box {height: 200px; padding: 20px 15px;}
.modal-layer .form-item .form-cont textarea {  }
.modal-layer .form-box .captcha .captcha-box > * {height: 54px;}
.modal-layer .form-box .captcha .captcha-box .input-box {width: calc(100% - 225px); min-width: 370px;}
.modal-layer .form-box .form-bottom {border-top: 1px solid var(--primary-op); margin-top: 60px;}
.modal-layer .form-box .form-bottom .privacy {display: flex; justify-content: center; align-items: center; font-size: var(--font16); padding: 30px 0 50px; gap: 1em;}
.modal-layer .form-box .form-bottom .privacy a {font-weight: 700; text-decoration: underline; }
.modal-layer .form-box .form-bottom .submit-btn {text-align: center;}
@media screen and (max-width:768px){
  .modal-layer .ly-head {display: flex; flex-direction: column-reverse; align-items: end;  padding-top: 0; margin-bottom: 1em;}
  .modal-layer .ly-head .tit {width: 100%;}
  .modal-layer .close-btn {position: relative;}
  .modal-layer .ly-cont {padding: 0;}
  .modal-layer .ly-cont::-webkit-scrollbar {display: none;}
  .modal-layer .form-box .captcha .captcha-box > * {height: 48px;}
  .modal-layer input[type="text"], .modal-layer input[type="password"] {height: 48px; padding: 0 16px; font-size: 14px;}

  .modal-layer .form-box .captcha .captcha-box .input-box {width: 100%; min-width: unset;}
}
@media screen and (max-width:480px) {
  .modal-layer {padding: calc(var(--gap100)/2) 16px;}
  .modal-layer input[type="checkbox"] {width: 24px; height: 24px;}
}


/* form */
.form-box {}
.form-item + .form-item  {margin-top: 60px; }
.form-item .form-tit {font-size: var(--font24); margin-bottom: 0.625em; font-weight: 700;}
.form-item .form-tit.required::after {content:" *"; }
.form-item .form-cont { width: 100%; }
.form-item .form-cont .textarea-box {width: 100%; height: 400px;}
.form-item .form-cont textarea {width: 100%;}
.form-item .form-cont .radio-box {padding-top: 5px;}
.form-item .form-cont .notice {margin-top: 20px; font-size: var(--font18);}

.form-box .captcha {margin-top: 30px;}
.form-box .captcha .secure-box {width: 140px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--primary-op); background: var(--secondary); border-radius: 10px; overflow: hidden;}
.form-box .captcha .secure-box img {max-width: 100%; max-height: 100%; object-fit: cover;}
.form-box .captcha .captcha-box {display: flex; gap: 15px; flex-wrap: wrap;}
.form-box .captcha .captcha-box .captcha-btn {background-color: var(--primary); aspect-ratio: 1; border-radius: 10px; background-image: url(/img/icon_refresh.svg); background-position: center; background-repeat: no-repeat; background-size: 28px; flex-shrink: 0;}
.form-box .captcha .captcha-box > * {height: 65px;}

@media screen and (max-width:768px) {
  .form-item + .form-item {margin-top: 40px;}

  .form-box .captcha .captcha-box {gap: 8px; }
  .form-box .captcha .captcha-box > * {height: 48px;}
  .form-box .captcha .secure-box {border-radius: 6px; width: 120px;}
  .form-box .captcha .captcha-box .captcha-btn {border-radius: 6px; background-size: 22px;}
  .form-box .captcha .captcha-box .input-box { width: 100%;}
}
@media screen and (max-width:480px){
  .form-item .form-cont .notice {font-size: 14px;}

  .form-item .form-cont .textarea-box {height: 240px;}
  .form-item .form-cont textarea {font-size: 14px;}
}


/* pagination */
.pagination {display: flex; justify-content: center; gap: 15px; align-items: center;}
.pagination a {width: 40px; height: 40px;}
.pagination .arr {font-size: 0; background-position: center; background-repeat: no-repeat; background-size: cover; }
.pagination .arr.first {background-image: url(/img/pagination_first.svg);}
.pagination .arr.prev {background-image: url(/img/pagination_prev.svg);}
.pagination .arr.next {background-image: url(/img/pagination_next.svg);}
.pagination .arr.last {background-image: url(/img/pagination_last.svg);}
.pagination ul {display: flex; gap: 10px; }
.pagination ul a {display: flex; line-height: 1; align-items: center; justify-content: center; font-size: var(--font18); border-radius: 50%;}
.pagination ul a.on {background: var(--primary); color: var(--bgc);}
@media screen and (max-width:768px){
  .pagination {gap: 8px;}
  .pagination a {width: 32px; height: 32px;}
  .pagination ul {gap: 6px; }
  .pagination ul a {font-size: 14px;}
}


/* swiper bullet */
#wrap .swiper-pagination {position: relative; top: unset; bottom: unset;}
#wrap .swiper-pagination .swiper-pagination-bullet {width: 32px; height: 5px; box-sizing: border-box; border: 1px solid var(--primary-op); border-radius: 3px; margin: 0 6px; vertical-align: bottom; background: rgba(0,0,0,0); opacity: 1;}
#wrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {background: var(--primary);}



/* coming soon */
.preview {width: 100%; height: 100vh; position: relative; }
.preview .preview-wrap {width: 100%; height: 100%;  display: flex; align-items: center; justify-content: center; color: var(--primary); text-align: center; padding-top: 3vh;}

.preview .cont { width: 100%; padding: 10vh 0 7vh; border: solid rgba(232,58,41,0.6); border-width: 1px 0 1px 0; text-align: center;}
.preview .cont .box {position: relative;}
.preview .cont .box img {width: 83px; will-change: transform;}
.preview .cont .box .line {position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%);}
.preview .cont .box .line svg {mask-image: url(/img/vector2.svg); stroke-dasharray: 240; stroke-dashoffset: 240; stroke-width: 2;}

.preview .cont .box .dot {position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); font-size: 0;}
.preview .cont .box .dot svg g {opacity: 0;}
.preview .cont .text {margin: 70px 0 125px;}
.preview .cont .text .title {font-family: var(--mincho); font-weight: 800; font-size: 80px; line-height: 1.3;}
.preview .cont .text .desc {font-size: 20px; margin-top: 2.5em;}
.preview .cont .text .desc .en {font-size: 1em; font-weight: 600;}
.preview .cont .text .desc .ko {font-size: 16px; font-family: var(--noto); margin-top: 1em;}
.preview .cont .logo {font-size: 0; height: 36px;}
.preview .cont .logo img {height: 100%;}

@media screen and (max-width:1200px) {
  .preview .cont .text .title .mo-br {display: block;}
}
@media screen and (max-width:768px){
  .preview .cont {padding-bottom: 5vh;}
  .preview .cont .box {transform: scale(0.8);}
  .preview .cont .text {margin: 5vh 0 10vh; }
  .preview .cont .text .title {font-size: 50px;}
  .preview .cont .text .desc { font-size: 15px; margin-top: 40px;}
  .preview .cont .text .desc .ko {font-size: 15px;}
  .preview .cont .logo {height: 25px;}
}

.preview .cont .box .test {position: absolute; left: 50%; top: 40%; transform: translate(-50%,-50%); display: none;}
.preview .cont .box .test svg {stroke-dasharray: 312; stroke-dashoffset: 0;}


/* 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: 40px;}
#header .logo img {height: 100%;}
#header .gnb-box {position: relative; display: flex; align-items: center; height: 40px;}
#header .gnb-box .gnb-btn {width: 40px; height: 40px; /*position: absolute; right: 0; top: 0;*/ position: relative; z-index: 3; transition: 0.3s; cursor: pointer;}
#header .gnb-box .gnb-btn::before,
#header .gnb-box .gnb-btn::after {content:""; height: 2px; background: var(--primary); position: absolute; right: 3px; }
#header .gnb-box .gnb-btn::before {top: 14px; width: 34px;}
#header .gnb-box .gnb-btn::after {bottom: 13px; width: 17px;}
#header .gnb-box .gnb-nav {pointer-events: none; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
#header .gnb-box .gnb-nav .gnb-close {width: 24px; height: 24px; position: absolute; right: 5%; top: calc(var(--headerH)/2 - 12px); display: none;}
#header .gnb-box .gnb-nav .gnb-close::before,
#header .gnb-box .gnb-nav .gnb-close::after {content:""; height: 2px; width: 20px; background: var(--primary); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg); }
#header .gnb-box .gnb-nav .gnb-close::after {transform: translate(-50%,-50%) rotate(-45deg);}
#header .gnb-box .gnb-nav ul {display: flex; gap: 47px; align-items: center;}
#header .gnb-box .gnb-nav ul li {display: flex; transform: translateX(30%); opacity: 0; transition: 0.5s; flex-shrink: 0; width: fit-content; height: var(--headerH); align-items: center; justify-content: center;}
#header .gnb-box .gnb-nav ul li a {font-size: var(--font20); font-weight: 600; display: block; white-space: nowrap; position: relative; padding: 0 10px; }
#header .gnb-box .gnb-nav ul li a span {display: block; position: relative;}
#header .gnb-box .gnb-nav ul li a span::before {content:""; width: 0; height: 2px; position: absolute; background: var(--primary); left: 0px; bottom: 0; transition: width 0.5s;}


@media screen and (min-width:1025px) {
  @media (hover: hover) {
    #header .gnb-box:hover .gnb-btn {opacity: 0; pointer-events: none;}
    #header .gnb-box:hover .gnb-nav {pointer-events: auto;}
    #header .gnb-box:hover .gnb-nav ul li {transform: translateX(0); opacity: 1; pointer-events: auto;}

    #header .gnb-box .gnb-nav ul li a:hover span::before {width: 102%;}
  }
}

@media screen and (max-width:1680px){
  #header .inner {padding: 0; width: 90%; margin: auto;}
  .floating-btn {right: 0 !important; }
  .floating-btn .inner {width: 90% !important;}
}
@media screen and (max-width:1024px) {
  #header .gnb-box .gnb-nav {position: fixed; width: 100%; height: 100vh; z-index: 10000; left: 0; top: 0; padding: var(--headerH) 0; text-align: center; transform: translateY(0); background: var(--bgc); opacity: 0; transition: opacity 0.3s; pointer-events: none;}
  #header .gnb-box .gnb-nav .gnb-close {display: block;}
  #header .gnb-box .gnb-nav nav {width: 100%; height: 100%;}
  #header .gnb-box .gnb-nav ul {flex-direction: column; height: 100%; gap: 100px; justify-content: center; }
  #header .gnb-box .gnb-nav ul li {transform: translateX(0); opacity: 1; }
  #header .gnb-box .gnb-nav ul li a {font-size: 24px; font-weight: 700;}

  #header .gnb-box .gnb-btn::before, #header .gnb-box .gnb-btn::after {height: 3px;}


  #header .gnb-box.active .gnb-nav {pointer-events: auto; opacity: 1;}
  #header .gnb-box.active .gnb-nav ul li {}
}
@media screen and (max-width:768px){
  #header .logo {height: 30px; margin-top: 5px;}
  #header .gnb-box .gnb-nav ul {gap: 60px;}
} 


/* footer */
footer {width: 100%; background: var(--secondary); padding: calc(var(--gap100)*1.15) 0 var(--gap100);}
.footer {width: 90%; max-width: 1740px; display: flex; gap: 80px; align-items: start; justify-content: space-between; margin: auto; position: relative;}
.footer .left {}
.footer .left .f-logo {max-width: 918px; width: 100%; font-size: 0; }
.footer .left .f-logo img {width: 100%; object-fit: cover;}
.footer .left address {margin-top: var(--font20); }
.footer .left address ul {}
.footer .left address ul li {display: inline-block; width: 100%; font-size: var(--font16); line-height: 1.6; }
.footer .left address ul li.inline {margin-right: var(--gap80); width: fit-content;}
.footer .left .privacy {margin-top: var(--font16);}
.footer .left .privacy a {font-weight: 600; font-size: var(--font18); display: inline-block;}

.footer .right {flex-shrink: 0;}
.footer .right .fnb {border-top: 1px solid var(--primary-op); }
.footer .right .fnb a {display: flex; width: 280px; height: 80px; border-bottom: 1px solid var(--primary-op); padding: 0 40px; align-items: center; justify-content: space-between; font-size: var(--font20); font-weight: 600; } 
.footer .right .fnb a i {content:""; width: 25px; aspect-ratio: 1/0.4;  overflow: hidden; } 
.footer .right .fnb a i span {width: 300%; display: flex; height: 100%; transform: translateX(-66.5%); gap: 33%; }
.footer .right .fnb a i span::before,
.footer .right .fnb a i span::after {content:""; width: 33%; height: 100%; flex-shrink: 0; background: url(/img/arrow_r_red.svg) center no-repeat;  background-size: auto 100%;}

.footer .right .fnb a:hover i span {transform: translateX(0); transition: transform 0.6s;}

.footer .license {position: absolute; right: 0; bottom: 0; text-align: right;}
.footer .license .copyright {font-size: var(--font16);}
.footer .license .asset {font-size: var(--font14); color: rgba(232,58,41,0.2); margin-top: 4px; }
.footer .license .asset a {text-decoration: underline; }
.footer .license .modal-area {position: absolute; right: 0; top: -25px; transform: translateY(-100%); box-shadow: 0 0 4px rgba(232,58,41,0.13); left: unset; width: fit-content; height: fit-content; }
.footer .license .modal-layer {padding: 28px 22px; width: 100%;}
.footer .license .source-list {font-size: var(--font14);}
.footer .license .source-list li {display: flex; gap: 30px;}
.footer .license .source-list li + li {margin-top: 10px;}
.footer .license .source-list li .name {position: relative;}
.footer .license .source-list li .name::before {content:""; width: 1px; height: 12px; position: absolute; right: -14px; top: 50%; transform: translateY(-50%); background: rgba(232,58,41,0.3);}
.footer .license .source-list li .link {text-decoration: underline; }

.footer .license .modal-area.active {background: rgba(0,0,0,0); }

@media screen and (max-width:1260px){
  .footer {padding-bottom: 60px;}
  .footer .left .f-logo {max-width: 600px; }
  .footer .right .fnb a {width: 240px; padding: 0 30px; height: 72px;}
}
@media screen and (max-width:1024px){
  .footer .right .fnb a {width: 200px; padding: 0 24px; height: 64px;}
  .footer .right .fnb a::after {width: 20px; height: 8px;}
}
@media screen and (max-width:768px){
  footer {padding-top: 16px;}
  .footer {flex-direction: column-reverse; gap: 110px;}

  .footer .right {width: 100%;}
  .footer .right .fnb {width: 100%; border-top: none;}
  .footer .right .fnb a {width: 100%; justify-content: center;}
  .footer .right .fnb a i {display: none;}

  .footer .left .f-logo {max-width: 72%;}
  .footer .left .privacy {margin-top: 20px; font-size: 15px;}

  .footer .license .copyright,
  .footer .license .asset {font-size: 12px;}
  .footer .license .source-list {font-size: 13px;}
}

/* quick menu */
.floating-btn {position: fixed; width: 100%; right: 70px; bottom: 0; z-index: 9999;}
.floating-btn .inner {/* max-width: 1820px;*/ width: 100%; margin: auto; position: relative;}
.floating-btn a {position: absolute; right: 0; display: flex; background: var(--primary); box-shadow: 0 0 5px rgba(121,22,13,0.4); align-items: center; justify-content: center;}

.quick-menu a {  bottom: 30px;  height: 55px; border-radius: 28px; font-size: var(--font18); font-weight: 700; color: var(--bgc);  padding: 0 25px; }
.top-btn a {bottom: 30px; width: 60px; aspect-ratio: 1; border-radius: 50%;}
.top-btn a svg {max-height: 26px; height: 50%;}

@media screen and (max-width:1024px) {
  .quick-menu a {height: 42px; bottom: 85px; padding: 0 20px;}
  .top-btn a {width: 42px;}
}
@media screen and (max-width:480px) {
  .quick-menu a {height: 38px; bottom: 61px; padding: 0 14px; font-size: 14px;}
  .top-btn a {width: 38px; bottom: 16px;}
}


/* faq modal */
#faqModal {justify-content: end;}
#faqModal .modal-layer {height: 100%; max-height: 100%; padding: 0 calc(var(--gap100)/4) var(--gap100); display: flex; flex-direction: column; max-width: 700px; width: 100%; transform: translateX(100%); transition: transform 0.6s; opacity: 1;}
#faqModal.active .modal-layer {transform: translateX(0%);}
#faqModal .modal-layer .ly-head {display: flex; justify-content: space-between; align-items: center; padding: 32px 0.5em; flex-shrink: 0; margin-bottom: 0; flex-direction: row;}
#faqModal .modal-layer .ly-head .tit {text-align: left;}
#faqModal .modal-layer .ly-head .close-btn {width: 40px; height: 40px; position: relative; left: unset; top: unset;}
#faqModal .modal-layer .ly-head .close-btn::before,
#faqModal .modal-layer .ly-head .close-btn::after {height: 3px; }
#faqModal .modal-layer .ly-cont { height: 100%; overflow: auto; max-height: unset; margin-top: calc(var(--gap100)/2);}

.faq-cont {}
.faq-cont .faq-item {border-bottom: 1px solid var(--primary-op); }
.faq-cont .faq-item:first-child {border-top: 1px solid var(--primary-op); }
.faq-cont .faq-item .faq-item-btn {padding: 26px 25px; padding-right: 65px; display: flex; align-items: center; position: relative; cursor: pointer;}
.faq-cont .faq-item .faq-item-btn .title {font-size: var(--font18); font-weight: 600;}
.faq-cont .faq-item .faq-item-btn i {flex-shrink: 0; width: 18px; height: 18px; position: relative; display: block; position: absolute; right: 25px; top: 50%; transform: translateY(-50%); }
.faq-cont .faq-item .faq-item-btn i::before,
.faq-cont .faq-item .faq-item-btn i::after {content:""; width: 100%; height: 2px; background: var(--primary); position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); transition: transform 0.4s;}
.faq-cont .faq-item .faq-item-btn i::after {transform: translate(-50%,-50%) rotate(90deg);}
.faq-cont .faq-item .faq-item-cont {padding: 2px 65px 26px 25px; display: none;}
.faq-cont .faq-item .faq-item-cont p {font-size: var(--font16);}

.faq-cont .faq-item.open .faq-item-btn i::after {transform: translate(-50%,-50%) rotate(0deg);}

@media screen and (max-width:1024px) {
  #faqModal .modal-layer .ly-head .close-btn {width: 30px; height: 30px;}
}
@media screen and (max-width:480px) {
  #faqModal .modal-layer {padding: 0 5% calc(var(--gap100)/2);}
  #faqModal .modal-layer .ly-head .close-btn {width: 25px; height: 25px;}
  #faqModal .modal-layer .ly-head .close-btn::before,
  #faqModal .modal-layer .ly-head .close-btn::after {height: 2px; width: 100%;}
  #faqModal .modal-layer .ly-cont {padding: 0; margin-top: 0px;}

  .faq-cont .faq-item .faq-item-btn {padding: 16px 20px; padding-right: 46px;}
  .faq-cont .faq-item .faq-item-btn .title {font-size: 15px;}
  .faq-cont .faq-item .faq-item-btn i {width: 16px; height: 16px; right: 20px;}
  .faq-cont .faq-item .faq-item-cont {padding: 2px 40px 16px 20px; }
  .faq-cont .faq-item .faq-item-cont p {font-size: 14px;}
  
}