@font-face {
    font-family: 'yg-jalnan';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Cafe24Ohsquare';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/Cafe24Ohsquare.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.jn {font-family: 'yg-jalnan';}
.cafe {font-family: 'Cafe24Ohsquare';}
.txt_c {background-image: linear-gradient(to right, #fbde75, #c38e1a) !important; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}

.yellow {color: #FFFF00 !important;}
.wt {color: #fff !important;}
.pink {color: #FE009C !important;}


#wrap {max-width: 800px; width: 100%; height: auto; margin: 0 auto; box-sizing: border-box; overflow: hidden;}
/* .img-box {position: relative;}
.img-box a {position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: auto; aspect-ratio: 16/4;} */

.sec1 {width: 100%; height: auto; padding: 107px 113px; background: url(./../img/kv_bg.png)no-repeat 50% 50%; background-size: cover; box-sizing: border-box; text-align: center;}
.kv_txt {}
.kv_txt .tit {margin-bottom: 30px; font-size: 60px; font-weight: 500; line-height: 1; color: #ff0;}
.kv_txt .sub {margin-bottom: 42px; font-size: 28px; font-weight: 400; line-height: 2.2;}
.kv_txt a {display: block; width: 100%;}
.kv_txt a img {animation: heartbeat 1.5s ease-in-out infinite both;}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}


/* sec2 */
.sec2 {width: 100%; height: auto; background: url(./../img/sec2_bg.png)no-repeat 50% 50%; background-size: cover; box-sizing: border-box;}
.sec2 .icon {width: 104px; height: auto; margin: 0 auto 10px;}
/* .sec2 .txt-box {margin-bottom: 50px; text-align: center;} */
.sec2 .content {padding: 60px 96px; box-sizing: border-box;}
.sec2 .content > .tit {margin-bottom: 8px; font-size: 60px; font-weight: 600; line-height: 1.6; text-align: center;}
.sec2 .content > .sub {margin-bottom: 50px; font-size: 28px; font-weight: 400; line-height: 1.6; color: var(--wt); text-align: center;}

.sec2 .txt-box {position: relative; z-index: 1;} 
.sec2 .txt-box .txt {margin-bottom: 20px;}
.sec2 .txt-box .txt:last-of-type {margin-bottom: 0;}
.sec2 .txt-box .tit {margin-bottom: 2px; font-size: 28px; font-weight: 400; line-height: 1.8;}
.sec2 .txt-box .sub {font-size: 24px; font-weight: 500; line-height: 1.3; color: #f6eedd;}

/* img-box */
.sec2 .txt-box .img-box {position: absolute; top: 50%; right: -97px; transform: translateY(-50%); z-index: -1; width: 420px; height: auto;}

.sec2 .yellow_txt {margin-top: 120px; padding-bottom: 60px; font-size: 28px; font-weight: 400; line-height: 2; text-align: center;}

/* sec3 */
.sec3 {width: 100%; height: auto; padding: 60px 68px; background: url(./../img/sec3_bg.png)no-repeat 50% 50%; background-size: cover; box-sizing: border-box;}
.sec3 .img-box {width: 100%; height: auto; margin-bottom: 50px;}
.sec3 .img-box:last-of-type {margin-bottom: 0;}
.sec3 .img-box img {width: 100%; height: auto;}

/* sec5 */
.sec5 {padding: 60px 62px; background: #000; box-sizing: border-box;}
.sec5 .txt-box {text-align: center;}
.sec5 .txt-box p {margin-bottom: 40px; font-size: 20px; font-weight: bold; line-height: 1.6; color: #fff;}
.sec5 .txt-box p:last-of-type {margin-bottom: 0;}
.sec5 .txt-box p span {color: #ff0;}

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

    #wrap {max-width: 100vw; width: 100%; height: auto; margin: 0 auto; box-sizing: border-box; overflow: hidden;}
    /* .img-box {position: relative;}
    .img-box a {position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: auto; aspect-ratio: 16/4;}
    */

    .sec1 {width: 100%; height: auto; padding: 13.38vw 14.13vw; background: url(./../img/kv_bg.png)no-repeat 50% 50%; background-size: cover; box-sizing: border-box; text-align: center;}
    .kv_txt {}
    .kv_txt .tit {margin-bottom: 3.75vw; font-size: 7.5vw; font-weight: 500; line-height: 1; color: #ff0;}
    .kv_txt .sub {margin-bottom: 5.25vw; font-size: 3.5vw; font-weight: 400; line-height: 2.2;}
    .kv_txt a {width: 100%;}
    /* sec2 */
    .sec2 {width: 100%; height: auto; background: url(./../img/sec2_bg.png)no-repeat 50% 50%; background-size: cover; box-sizing: border-box;}
    .sec2 .icon {width: 13vw; height: auto; margin: 0vw auto 1.25vw;}
    /* .sec2 .txt-box {margin-bottom: 6.25vw; text-align: center;}
    */
    .sec2 .content {padding: 7.5vw 12vw; box-sizing: border-box;}
    .sec2 .content > .tit {margin-bottom: 1vw; font-size: 7.5vw; font-weight: 600; line-height: 1.6; text-align: center;}
    .sec2 .content > .sub {margin-bottom: 6.25vw; font-size: 3.5vw; font-weight: 400; line-height: 1.6; color: var(--wt); text-align: center;}
    .sec2 .txt-box {position: relative; z-index: 1;}
    .sec2 .txt-box .txt {margin-bottom: 2.5vw;}
    .sec2 .txt-box .txt:last-of-type {margin-bottom: 0;}
    .sec2 .txt-box .tit {margin-bottom: 0.25vw; font-size: 3.5vw; font-weight: 400; line-height: 1.8;}
    .sec2 .txt-box .sub {font-size: 3vw; font-weight: 500; line-height: 1.3; color: #f6eedd;}
    /* img-box */
    .sec2 .txt-box .img-box {position: absolute; top: 50%; right: -12.13vw; transform: translateY(-50%); z-index: -1; width: 52.5vw; height: auto;}
    .sec2 .yellow_txt {margin-top: 15vw; padding-bottom: 7.5vw; font-size: 3.5vw; font-weight: 400; line-height: 2; text-align: center;}
    /* sec3 */
    .sec3 {width: 100%; height: auto; padding: 7.5vw 8.5vw; background: url(./../img/sec3_bg.png)no-repeat 50% 50%; background-size: cover; box-sizing: border-box;}
    .sec3 .img-box {width: 100%; height: auto; margin-bottom: 6.25vw;}
    .sec3 .img-box:last-of-type {margin-bottom: 0;}
    .sec3 .img-box img {width: 100%; height: auto;}
    /* sec5 */
    .sec5 {padding: 7.5vw 7.75vw; background: #000; box-sizing: border-box;}
    .sec5 .txt-box {text-align: center;}
    .sec5 .txt-box p {margin-bottom: 5vw; font-size: 2.5vw; font-weight: bold; line-height: 1.6; color: #fff;}
    .sec5 .txt-box p:last-of-type {margin-bottom: 0;}
    .sec5 .txt-box p span {color: #ff0;}
}