/*******************************************************
 * common
 *******************************************************/
.bg-image{background-position: center;background-repeat: no-repeat;background-size: cover;}

body .swiper-button-next{margin-top:0;background-image: none;z-index:10;right: 20px;border: 1px solid #fff;border-radius: 200px;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;font-size: 20px;color: #fff;top: 50%;transform: translateY(-50%);transition:0.3s;}
body .swiper-button-prev{margin-top:0;background-image: none;z-index:10;left: 20px;border: 1px solid #fff;border-radius: 200px;width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;font-size: 20px;color: #fff;top: 50%;transform: translateY(-50%);transition:0.3s;}
body .swiper-button-next:hover{color:#d81823;border-color:#d81823;}
body .swiper-button-prev:hover{color:#d81823;border-color:#d81823;}

body .swiper-pagination-bullet{width:10px;height:10px;margin:0 4px;opacity:.6;}
body .swiper-pagination-bullet-active{background: #000;}

.sec-title{}
.sec-title h5{color:#fff;font-weight:400;text-align: center;}
.sec-title a{color:#0D0E0F;text-decoration: none;min-width:5.786rem;height:30px;font-size:14px;padding: 6px 12px;border: 1px solid #D4D6D6;border-radius: 20px;transition: all 0.25s ease;display: inline-flex;align-items: center;justify-content: center;position: relative;z-index: 100;}
.sec-title a:hover{background:#0D0E0F;color:#fff;}
.sec-title div{font-weight:900;font-family:'Paperlogy';color:#fff;width:100%;display:block;text-align: center;}
body .sec-title h2{color:white;font-weight:700;text-align: center;font-size:50px;line-height:1.3;}
.sec-title h6{color:#8E8E8E;font-weight:400;text-align: center;}

.content-body{padding:0 1rem;}

.main-sec .container {z-index: 1;}

.btn.submit-btn {  position: relative; z-index: 1; transform: translateZ(0);width: 180px; height: 60px; background: var(--variant); border: 0; position: relative; border-radius: 100px; color: #fff; cursor: pointer; overflow: hidden; display: flex; justify-content: center; align-items: center; text-decoration: none; }
.btn.submit-btn .text { position: relative; z-index: 2; }
.btn.submit-btn .icon-container { position: relative; z-index: 2; width: 25px; height: 25px; margin-left: 10px; transition: transform 500ms ease; }
.btn.submit-btn .icon-container .icon { position: absolute; left: 0; top: 0; width: 25px; height: 25px; transition: transform 500ms ease, opacity 250ms ease; display: flex; justify-content: center; align-items: center; }
.btn.submit-btn .icon-container .icon i { color: #fff; font-size: 20px; }
.btn.submit-btn::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--primary); border-radius: 100px; z-index: 1; transition: transform 500ms ease; }
.btn.submit-btn:hover::after { transform: translateX(65%); }
.btn.submit-btn:hover .icon-container { transform: translateX(125%); }

.btn.submit-btn.white-type{background: rgba(255, 255, 255, 0.6) !important;color:black;}
.btn.submit-btn.white-type .icon-container .icon i { color: #000;}
.btn.submit-btn.white-type::after{background: rgba(255, 255, 255, 0.7);}
.btn.submit-btn.white-type:hover::after{background: rgba(255, 255, 255, 1);}

@media (max-width: 1600px) {
    body .sec-title h2{font-size:44px !important;}
    .sec-title div{font-size:100px;}

    .btn.submit-btn{width:160px;height:52px;}
    .btn.submit-btn:hover .icon-container {margin-left:-1px;}
}

@media (max-width: 1200px) {
    .sec-title h2{font-size:36px !important;}

}

@media (max-width:1024px) {
    .sec-title h2{font-size:30px !important;}
    .sec-title div{font-size:90px;}
}
@media (max-width:768px) {
    .sec-title div{font-size:70px !important;letter-spacing: -1rem;}
    .sec-title a{min-width:5rem;font-size:13px;}

    .btn.submit-btn .icon-container .icon i{font-size:16px;}
}


/*******************************************************
 * thumbnail-row-type
 *******************************************************/

.thumbnail-row-type{display:flex;flex: 1;gap:25px;flex-flow: column;}
.thumbnail-row-type .row-item{display:flex;width:100%;border-radius:var(--border-radius);overflow: hidden;min-height:230px;}
.thumbnail-row-type .content-ico{max-width: 325px;max-height:360px;width: 100%;display:flex;align-items:center;justify-content:center;overflow: hidden;position: relative;z-index: 2;}
.thumbnail-row-type .content-ico img{width:100%;height: 100%;object-fit: cover;}
.thumbnail-row-type .content-area{background: rgb(31, 41, 55);width:100%;display: flex;flex-flow:column;flex: 1;justify-content: center;position: relative;z-index: 2;}


@media (max-width: 1600px) {
    .thumbnail-row-type .row-item{min-height:220px;}
    .thumbnail-row-type .content-ico{max-width:270px;}
}


@media (max-width: 1200px) {
    .thumbnail-row-type .row-item{min-height:200px;}
    .thumbnail-row-type .content-ico{max-width:250px;}
}

 @media (max-width:1024px) {
        .thumbnail-row-type{gap:20px;}
        .thumbnail-row-type .row-item{flex-direction:column;min-height:auto;}
        .thumbnail-row-type .content-ico{max-width:100%;}
        .thumbnail-row-type .content-area{padding:1.8rem 1.5rem;}
}

@media (max-width:768px) {
        .thumbnail-row-type .content-area{padding:1.2rem;}
}

/*******************************************************
 * thumbnail-col-type
 *******************************************************/
.thumbnail-col-type .content-ico {width: 100%;height: 200px;position:relative;z-index:2;border-radius: 12px 12px 0 0;background: rgba(255, 255, 255, 0.1);margin-bottom: 0;display: flex;align-items: center;justify-content: center;overflow: hidden;}
.thumbnail-col-type .content-ico img {width: 100%;height: 100%;object-fit: cover;}
.thumbnail-col-type .content-area {text-align: left;flex: 1;position: relative;z-index: 2;}
.thumbnail-col-type .col-item {position:relative;border-radius:var(--border-radius);text-align: center;transition: transform 0.3s ease, box-shadow 0.3s ease;display: flex;flex-direction: column;justify-content: space-between;border: 1px solid transparent;background-clip: padding-box;}

.light-theme.thumbnail-col-type .content-area{background: #fff;}

@media (max-width: 1600px) {
    .thumbnail-col-type .content-ico {height: 190px;}
    .thumbnail-col-type .col-item {min-height:310px;}
}

@media (max-width: 1200px) {
    .thumbnail-col-type .content-ico {height: 220px;}
}

@media (max-width: 768px) {
    .thumbnail-col-type .content-ico {height: 200px;}
}

@media (max-width: 480px) {
    .thumbnail-col-type .content-ico {height: 180px;}
}


/*******************************************************
 * sec 01
 *******************************************************/

#section1 { padding: 0 !important; position: relative; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; }
#section1::after {content: '';display: block;width: 100%;height: 11%;background: linear-gradient(180deg, rgba(2, 0, 36, 0) 0%, rgba(0, 0, 0, 0.6) 100%);position: absolute;bottom: -1px;left: 0;z-index: 2;}
#section1 .container{z-index: 3;}

.sec-title div{font-size:110px;}

.sec01-ico {width: auto;height: auto;position: absolute; overflow:visible; top: 50%; left: 50%;z-index:2;transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; }
.sec01-ico img {width:auto;height: 100%;object-fit: cover;position: relative;z-index: 1;}
.sec01-ico::after {position: absolute;content: "";top:0;left: 0;right: 0;z-index:0;height: 100%;width: 100%;margin: 0 auto;transform: scale(0.75);filter: blur(15vw);background: linear-gradient(270deg, #0fffc1, var(--primary));background-size: 200% 200%;animation: animateGlow 10s ease infinite;}

.wave-box {background: linear-gradient(to right, #5B22E8, #FF2362);-webkit-animation: nebulahero 20s infinite linear;mix-blend-mode: color;width: 100%;height: 100%;position: absolute;overflow: visible;top: 50%;left: 50%;z-index: 0;transform: translate(-50%, -50%);display: flex;align-items: center;justify-content: center;}
@-webkit-keyframes nebulahero { 0% {-webkit-filter: hue-rotate(0deg);} 100% {-webkit-filter: hue-rotate(-360deg);} }


.main-bg {position: fixed;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: -2;}
.main-bg  canvas {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 1;pointer-events: none;}
.content {position: relative;z-index: 2;}

.letter-container {}
.letter-container .letter-slot { display: inline-block; position: relative; width:80px; height: 1.2em; overflow: hidden; vertical-align: top; }
.letter-container .letter-pair { position: absolute; width: 100%; height: 200%; top: 0; left: 0; }
.letter-container .letter-top { position: absolute; width: 100%; height: 50%; display: flex; align-items: center; justify-content: center; text-align: center; top: 0; }
.letter-container .letter-bottom { position: absolute; width: 100%; height: 50%; display: flex; align-items: center; justify-content: center; text-align: center; top: 50%; }
.letter-container .fins-f .letter-pair { animation: sequenceSlideF 8s ease-in-out infinite; animation-delay: 0s; }
.letter-container .fins-i .letter-pair { animation: sequenceSlideI 8s ease-in-out infinite; animation-delay: 0s; }
.letter-container .fins-n .letter-pair { animation: sequenceSlideNS 8s ease-in-out infinite; animation-delay: 0s; }
.letter-container .fins-s .letter-pair { animation: sequenceSlideNS 8s ease-in-out infinite; animation-delay: 0s; }
@keyframes sequenceSlideF { 0%, 15% { transform: translateY(0%); } 20%, 35% { transform: translateY(-50%); } 40%, 55% { transform: translateY(-50%); } 60%, 75% { transform: translateY(-50%); } 80%, 95% { transform: translateY(0%); } 100% { transform: translateY(0%); } }  @keyframes sequenceSlideI { 0%, 15% { transform: translateY(-50%); } 20%, 35% { transform: translateY(-50%); } 40%, 55% { transform: translateY(0%); } 60%, 75% { transform: translateY(0%); } 80%, 95% { transform: translateY(0%); } 100% { transform: translateY(-50%); } }  @keyframes sequenceSlideNS { 0%, 15% { transform: translateY(0%); } 20%, 35% { transform: translateY(0%); } 40%, 55% { transform: translateY(-50%); } 60%, 75% { transform: translateY(0%); } 80%, 95% { transform: translateY(0%); } 100% { transform: translateY(0%); } }

@media (max-width: 1600px) {
    .sec01-ico {width: 80%; height: 80%;}
    .sec01-ico::after {transform: scale(0.7);filter: blur(12vw);}
}

@media (max-width: 1366px) {
    .sec01-ico {width: 70%; height: 70%;}
    .sec01-ico::after {transform: scale(0.65);filter: blur(10vw);}
}

@media (max-width: 1200px) {
    .sec01-ico {width: 60%; height: 60%;}
    .sec01-ico::after {transform: scale(0.65);filter: blur(10vw);}
}

@media (max-width:1024px) {
    .sec01-ico {width:auto; height:auto;}
    .sec01-ico img {width:100%;}
}

/*******************************************************
 * sec 02
 *******************************************************/
#section2{padding-top:0;padding-bottom:0;}

#section2 .thumbnail-row-type .content-area{background: #fff;}
#section2 .thumbnail-row-type .content-ico{padding:1rem;}
#section2 .thumbnail-row-type .content-ico img{width:auto;height:auto;}
.sec02-item .content-ico.ico01{background:#FFE5EB;}
.sec02-item .content-ico.ico02{background:#FFF4CC;}
.sec02-item .content-ico.ico03{background:#D6F4EC;}

.sec02-item .content-area .tag{width: fit-content;padding:4px 10px;font-size:15px;color:#fff;border-radius:4px;display:inline-block;font-weight:400;font-family: 'Paperlogy';}

.tag-pink{background:#FFAFC1 !important;}
.tag-yellow{background:#FFC96D !important;}
.tag-green{background:#84D6C0 !important;}
.tag-mint { background: #7BC88A !important; }
.tag-purple { background: #B794D1 !important; }
.tag-blue { background: #8FA7E6 !important; }

.sec02-item .content-area .description p{color:#808080;}

.sec02-item:nth-child(1) .content-ico.ico01 img { animation: glow 3.5s ease-in-out infinite; }
.sec02-item:nth-child(2) .content-ico.ico02 img { animation: bounce 2.5s ease-in-out infinite; }
.sec02-item:nth-child(3) .content-ico.ico03 img { animation: wobble 3s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes glow { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.05); filter: brightness(1.2); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } 60% { transform: translateY(-8px); } }
@keyframes wobble { 0%, 100% { transform: translateX(0) rotate(0deg); } 25% { transform: translateX(-3px) rotate(-2deg); } 50% { transform: translateX(3px) rotate(2deg); } 75% { transform: translateX(-2px) rotate(-1deg); } }


/*******************************************************
 * sec 03
 *******************************************************/

#section3 { position: relative; overflow: visible; z-index: 1; height:100%; min-height:100vh !important; display: flex; align-items: center; justify-content: center; flex-flow: column; }
#section3::after{content: '';clear: both;display:block;}
.pin-container {min-height: 60vh; position: relative; width: 100%; height: 70vh; overflow: hidden; transform: none !important; }
.pin-container .sec03-area { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; transform: none !important; }
.pin-container .pin-wrap { display: flex; height: 100%; align-items: center; will-change: transform; width: calc(100vw * 3); transition: none; }
.pin-container .pin-wrap .pin-image { width: 100vw; height: 100%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.pin-container .pin-wrap img {height: 100%;width: 100%;object-fit: cover; max-width: 90vw; }

.pin-container .text-container { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 10; }
.pin-container .text-wrapper { width: 60vw; position: relative; }

.pin-container .title-container { overflow: hidden; position: relative;  width: 100%; text-align: center; line-height: 1.2; }
.pin-container .title-container h1{font-size:90px; color: transparent; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: white;pointer-events: none;}
.pin-container .title-container h5{color: white;font-weight:300;pointer-events: none;}
.pin-container .title-container a{margin: 0 auto;}
.pin-container .title-container .title-item { transition: all 0.6s ease-out; }
.pin-container .title-container .title-item:not(.active) { position: absolute; width: 100%; left: 0; top: 0; transform: translateY(100%); opacity: 0; }

.pin-container .number-container { position: absolute; overflow: hidden; top: 10px; left: 10px; color: #ce0; font-size: clamp(24px, 4vw, 48px); font-weight: bold; }
.pin-container .number-container .number-item { transition: all 0.6s ease-out; }
.pin-container .number-container .number-item:not(.active) { position: absolute; transform: translateY(100%); }

.pin-container .date-container { position: absolute; bottom: 10px; right: 16px; text-align: right; font-size: clamp(14px, 2vw, 20px); overflow: hidden; color: transparent; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #ce0; }
.pin-container .date-container .date-item { transition: all 0.6s ease-out; }
.pin-container .date-container .date-item:not(.active) { position: absolute; right: 0; transform: translateY(100%); }


@media (max-width:1400px) {
    .pin-container .title-container h1{font-size:80px;}
    .pin-container{height:65vh !important;}
    .pin-container .text-wrapper { width: 65vw; }
}

@media (max-width: 1024px) {
    #section3 .sec-title{padding: 0 15px;}
    .pin-container .title-container h1{font-size:70px;}
    .pin-container{height:60vh !important;}
}

@media (max-width: 768px) {
    .pin-container .title-container h1{font-size:60px;}
    .pin-container{min-height:40vh;height:40vh !important;}
    .pin-container .text-wrapper{width:80%;}
}


/*******************************************************
 * sec 04
 *******************************************************/
.difference{mix-blend-mode: difference !important;}
.spacer { height: 100vh; background: #f0f0f0; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #333; }
#section4 .pin-spacer { width: 100% !important; max-width: 100% !important; height: auto !important; padding: 0 !important; }

#section4 { clear: both;  z-index: 1;--target: 100%;background: linear-gradient(to right, #000 var(--target), #fff var(--target));width: 100% !important;max-width: 100% !important;min-height: 65vh !important;display: flex;align-items: center;justify-content: center;}
#section4 .container {position: inherit;z-index: auto;}

.sec04-area{display: flex;justify-content: space-between;height: 100%;}
.sec04-item{position: relative;}

.sec04-item.item-left h2,.sec04-item.item-left h5{text-align: left;}

.sec04-item.item-right{padding-left:60px;width:100%;max-width:500px;display:flex;flex-flow: column;gap:20px; }

.sec04-item .card-body{background:#303030;}
.sec04-item .tit{color:white;}
.sec04-item .tit span{font-family:'Paperlogy';margin-left:8px;font-weight:bold;}
.sec04-item .card-body p{color:white;}

@media (max-width:1400px) {
    #section4{height:auto !important;}
    .sec04-item.item-right{padding-left:50px;max-width:450px;}
    .sec04-item .card-body{padding:1.5rem;}
}
@media (max-width: 1200px) {
    .sec04-item.item-right{padding-left:40px;max-width:400px;}
}

@media (max-width: 1024px) {
    #section4 .btn.submit-btn{ margin-left: auto;margin-right: auto;}
    .sec04-item.item-left h2,.sec04-item.item-left h5{text-align:center;}

    .sec04-area{flex-direction:column;gap:30px;}
    .sec04-item.item-right{padding-left:0;max-width:100%;}
    .sec04-item .card-body{padding:1.8rem 1.5rem;}
}
@media (max-width: 768px) {
    .sec04-area{gap:40px;}
}
@media (max-width:480px) {
    .sec04-item .card-body{padding:1.2rem;}
}