/* font */
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Pre';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}
/* //font */

:root {
  --pr : #2fd1cd;
  --yellow : #ffe41c;
  --black : #000;
  --gray_b : #bbbbbb;
  --gray_5 : #555;
  --gray_1c : #1c1c1c;
  --gray_c2 : #c2c2c2;
  --gray_72 : #727272;
  --wt : #fff;
}

input,textarea,td,th,button,a {font-family: 'Pre';}
body {font-family: 'Pre'; background: var(--black);}
.container {max-width: 1280px; width: 100%; height: auto; margin: 0 auto; box-sizing: border-box;}
section {padding-top: 200px;}
section:first-of-type {padding-top: 0;}

/* tit-box */
.tit-box {margin-bottom: 71px; text-align: left;}
.tit-box.center {text-align: center;}
.tit-box.center:after {content: ''; display: block; width: 160px; height: 2px; margin: 47px auto 79px; border-radius: 1px; background: var(--gray_b);}
.tit-box.new {text-align: center;}
.tit-box.new .new_lb {display: inline-block; padding: 8px 16px; margin-bottom: 16px; box-sizing: border-box; background: var(--pr); font-size: 15px; font-weight: bold; line-height: 1.2; color: var(--wt); border-radius: 54px;}
.tit-box .tit {margin-bottom: 39px; font-size: 56px; font-weight: bold; line-height: 1.2; color: var(--wt);}
.tit-box .tit span {font-weight: 800; color: var(--pr);}
.tit-box .sub_tit {display: flex; align-items: center; gap: 8px; font-size: 21px; font-weight: 500; line-height: 1.2; color: var(--gray_b);}
.tit-box .sub_tit:last-of-type {margin-top: 16px;}
.tit-box .sub_tit img {width: 30px; height: auto;}
.tit-box .sub {font-size: 21px; font-weight: 500; line-height: 1.5; color: var(--gray_b);}
.tit-box .sub u {color: var(--wt); font-weight: 600;}

/* fixed-btn */
.fixed-btn {opacity: 0; position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); z-index: 5; max-width: 480px; width: 100%; text-align: center;}
.fixed-btn.on {opacity: 1; animation: slit-in-vertical 0.45s ease-out both;}
.fixed-btn.off {animation: slit-out-vertical 0.5s ease-in both;}
@keyframes slit-in-vertical {
  0% {
    -webkit-transform: translateX(-50%) translateZ(-800px) rotateY(90deg);
            transform: translateX(-50%) translateZ(-800px) rotateY(90deg);
    opacity: 0;
  }
  54% {
    -webkit-transform: translateX(-50%) translateZ(-160px) rotateY(87deg);
            transform: translateX(-50%) translateZ(-160px) rotateY(87deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(0);
            transform: translateX(-50%) translateZ(0) rotateY(0);
  }
}

@keyframes slit-out-vertical {
  0% {
    -webkit-transform: translateX(-50%) translateZ(0) rotateY(0);
            transform: translateX(-50%) translateZ(0) rotateY(0);
    opacity: 1;
  }
  54% {
    -webkit-transform: translateX(-50%) translateZ(-160px) rotateY(87deg);
            transform: translateX(-50%) translateZ(-160px) rotateY(87deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(-50%) translateZ(-800px) rotateY(90deg);
            transform: translateX(-50%) translateZ(-800px) rotateY(90deg);
    opacity: 0;
  }
}
.fixed-btn a {display: flex; align-items: center; justify-content: center; max-width: 480px; width: 100%; height: 64px; margin: 8px auto 0; border-radius: 74px; background: var(--pr) url(../img/btn_left.png) 94% center no-repeat; background-size: 33px; font-size: 21px; font-weight: bold; color: var(--wt);}
.fixed-btn.on a {animation: jello-horizontal 0.9s both}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
/* .fixed-btn img {max-width: 300px; width: 100%; height: auto;} */



.toggle_txt {margin-bottom: 10px; font-size: 16px; font-weight: bold; line-height: 1; color: var(--black);}

/* ds 250904 */
.move_txt {animation: up_down 1s linear alternate-reverse infinite; position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; max-width: 335px; width: 100%; height: 50px; margin: 0 auto;padding-bottom: 9px; margin-bottom: -9px; background: url(./../img/move_bg.png)no-repeat 50% 50%; background-size: cover;}
@keyframes up_down {
  0% {top: 5px;}
  100% {top: -5px;}
}
.move_txt img {width: 34px; height: auto;}
.move_txt .txt {background: linear-gradient(270deg, #19dcea, #b22cff, #ea2222, #f5be10, #3bd80d); background-size: 1000% 1000%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: rainbowFlow 8s ease infinite; font-size: 15px; font-weight: bold; line-height: 1; color: var(--pr);}
@keyframes rainbowFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}