@charset "UTF-8";

/* 공통 영역 */

@import url("https://font.elice.io/css?family=Elice+Digital+Baeum");

@font-face {
    font-family: 'Paperlogy-4Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Paperlogy-5Medium';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Paperlogy-7Bold';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* background-image preload - 호버 이미지 로드용 */
body::after {
	position:absolute; 
    width:0; 
    height:0; 
    overflow:hidden; 
    z-index:-1;
    
    /* load images */
    content:
    url(../images/float_banner_active.png);
	
}

.elice { font-family: "Elice Digital Baeum", sans-serif; }
.paperR { font-family: 'Paperlogy-4Regular'; }
.paperM { font-family: 'Paperlogy-5Medium'; }
.paperB { font-family: 'Paperlogy-7Bold'; }

.sr-only {
    width: 1px;
    height: 1px;
    opacity: 0;
    color: rgba(0,0,0,0);
    position: absolute;
    top: -9999em;
    left: -9999em;
    text-indent: -9999em;
}

.campaign-wrap {
    margin: 0 auto;
    max-width: 1920px;
    overflow: hidden;
    letter-spacing: -0.1em; 
    font-size: 16px;
}

.fadeAni {
    transform: translateY(60px); opacity: 0; 
    transition: transform 1s cubic-bezier(0.215, 0.610, 0.355, 1), opacity 0.8s cubic-bezier(0.215, 0.610, 0.8, 1);
}
.fadeAni.active {transform: translateY(0); opacity: 1;}

.LeftAni {
    transform: translateX(-80px); opacity: 0; 
    transition: transform 1.25s cubic-bezier(0.215, 0.610, 0.355, 1), opacity 1s cubic-bezier(0.215, 0.610, 0.8, 1);
}
.LeftAni.active {transform: translateX(0); opacity: 1;}
.delay {transition-delay: .25s;}
.delay2 {transition-delay: .35s;}


/* 플로팅배너 영역 */

.camp-floating-banner {
    cursor: pointer;
    width: 155px;
    height: 204px;
    background-image: url(../images/float_banner.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: fixed;
    bottom: 5%;
    right: 60px;
    z-index: 999;
    transition: all .25s ease-in-out !important;
    -webkit-animation: shake-vertical 10s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both;
    animation: shake-vertical 10s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite both
}

.camp-floating-banner a {display:block;width:100%;height:100%}

.camp-floating-banner:hover {
    background-image: url(../images/float_banner_active.png);
}

@-webkit-keyframes shake-vertical {
    0%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    10%, 30%, 50%, 70% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }

    20%, 40%, 60% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }

    80% {
        -webkit-transform: translateY(6.4px);
        transform: translateY(6.4px);
    }

    90% {
        -webkit-transform: translateY(-6.4px);
        transform: translateY(-6.4px);
    }
}

@keyframes shake-vertical {
    0%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    10%, 30%, 50%, 70% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }

    20%, 40%, 60% {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }

    80% {
        -webkit-transform: translateY(6.4px);
        transform: translateY(6.4px);
    }

    90% {
        -webkit-transform: translateY(-6.4px);
        transform: translateY(-6.4px);
    }
}

/* 버튼 영역 */

.button_shine {
	pointer-events: auto;
	cursor: pointer;
	background: #005b48;
    color: #fff;
	border: none;
    border-radius: 100px;
	margin: 0;
	font-family: 'Paperlogy-7Bold', sans-serif;
    font-weight: 700;
    letter-spacing: -0.2px;
	font-size: inherit;
	position: relative;
	display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 10px 10px 5px rgba(0,0,0,0.15);
    overflow: hidden;
}

.button_shine span,
.button_shine img {position: relative; z-index: 2;color:#fff}

.button_shine.sm {
    width: 447px; height: 87px; 
    font-size: 28px; column-gap: 32px;
    margin-top: 80px;
}

.button_shine.lg {
    width: 627px; height: 123px; 
    font-size: 40px; column-gap: 45px;
}

.button_shine::before {
    content: ""; display: block;
    width: 28%; height: 300%; 
    background: linear-gradient(to right, transparent 25%, rgba(255,255,255,0.15), transparent 75%); 
    position: absolute; 
    left: 110%; top: 50%; 
    transition: left 0.6s ease; 
    transform: rotate(30deg) translateY(-50%); 
    transform-origin: top;
    z-index: 1;
}

.button_shine:hover::before {left: 0;}


/* cont01 : 메인 비쥬얼 영역 */

.cont01 {
    max-width: 1920px;
    height: 891px;
    min-height: 891px;
    background: url(../images/sec1_bg.jpg) no-repeat center center / cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cont01 .cont01_wrap {
    position: relative;
    width: 1460px;
    height: 891px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.cont01 .cont01_ribbon { 
    position: absolute; 
    left: 50%; transform: translateX(-50%); 
    top: -145px; 
}

.cont01 .cont01_wrap::before, 
.cont01 .cont01_wrap::after {
    content: "";
    display: block;
    height: 28px;
    background: url(../images/sec1_line.png) no-repeat center center / contain;
    position: absolute; left: 50%; transform: translateX(-50%);
    width: 0; transition: width 1.8s;
}

.cont01 .cont01_wrap::before {top: 40px;}
.cont01 .cont01_wrap::after {bottom: 40px;}

.cont01 .cont01_wrap.active::before, 
.cont01 .cont01_wrap.active::after {width: 1750px;}

.cont01 .cont01_title {
    position: absolute;
    top: 50%;
    left: -25px;
    transform: translateY(-50%);
    z-index: 2;
    padding-top: 50px;
}

.cont01 .cont01_btn {text-align: center;}

.cont01 .cont01_model {
    position: absolute; right: 25px; bottom: 0;
}

.cont01 .cont01_model .model {
    position: relative; z-index: 2;
}

.cont01 .cont01_model .bg {
    position: absolute; 
    left: 50%; transform: translateX(-50%);
    bottom: -50px; z-index: 1;
}


/* cont02 */

.cont02 {
    position: relative;
    height: 1085px;
    min-height: 1085px;
    padding-bottom: 15px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    background: url(../images/sec2_bg.jpg) no-repeat center center / cover;
}

.cont02 .cont02_wrap {
    width: 1450px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.cont02 .cont02_wrap::after {
    content: ""; display: block;
    width: 17px; height: 413px;
    position: absolute; right: -37px; top: 10px;
    background: url(../images/sec2_txt.png) no-repeat center center / contain;
}

.cont02 .cont02_wrap .video_box {
    border-radius: 30px; 
    overflow: hidden;
    border: 10px solid #fff;
    position: relative;
    width: 100%; height: 804px;
}

.cont02 .cont02_wrap .video_box .video {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; object-fit: cover;
}

.cont02 .cont02_obj_wrap > img {
    position: absolute;
}

.cont02 .cont02_obj_wrap .obj1 {
    left: 65px; top: 80px;
}

.cont02 .cont02_obj_wrap .obj2 {
    right: 110px; bottom: 90px;
}

.cont02 .cont02_obj_wrap .character {
    left: 140px; bottom: 225px; zoom:0.6
}


/* cont03 */

.cont03 {
    height: 912px;
    min-height: 912px;
    background: url(../images/sec3_bg.jpg) no-repeat center center / cover;
}

.cont03 .cont03_wrap {
    width: 1440px;
    height: calc(100% - 130px);
    padding-bottom: 130px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.cont03 .cont03_text {
    text-align: center;
    position: relative;
}

.cont03 .cont03_text .con03_title {
    position: relative;
    width: fit-content;
    margin: 0 auto;
}

.cont03 .cont03_text .con03_title::before {
    content: ""; display: block;
    width: 451px; height: 103px;
    position: absolute; 
    top: calc(50% - 2px); transform: translateY(-50%);
    right: 80px;
    border: 1px solid #fff; box-sizing: border-box;
    opacity: 0; transition: .4s opacity .4s;
}

.cont03 .cont03_text .con03_title::after {
    content: ""; display: block;
    width: 470px; height: 123px;
    position: absolute; 
    top: calc(50% - 2px); 
    transform: translateY(-50%) rotateY(70deg);
    right: 70px;
    background: url(../images/sec3_title_obj.png) no-repeat center center / contain;
    opacity: 0; transition: .4s opacity .4s, .7s transform .5s;
}

.cont03 .cont03_text .con03_title.active::before {opacity: 1;}
.cont03 .cont03_text .con03_title.active::after {opacity: 1; transform: translateY(-50%);}

.cont03 .cont03_text .cont03_desc {
    font-size: 50px; 
    margin-top: 50px;
    color: #fff;
    line-height: 1.3;
}


/* cont04 */

.cont04 {
    padding: 180px 0 220px;
    background: url(../images/sec4_bg.jpg) no-repeat center center / cover;
}

.cont04 .cont04_wrap {
    width: 1466px;
    margin: 0 auto;
}

.cont04 .cont04_text {
    color: #005b48; text-align: center;
}

.cont04 .cont04_text .cont04_desc {
    font-size: 50px;
    letter-spacing: 2.5px;
}

.cont04 .cont04_text .con04_title {
    width: 1275px;
    margin: 40px auto 0;
}

.cont04 .cont04_text .con04_title h3 {
    font-size: 80px; 
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -2px;
}

.cont04 .cont04_content {
    margin-top: 100px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 23px;
}

@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0turn;
    inherits: false;
}

.cont04 .cont04_content li {
    overflow: hidden; 
    border-radius: 30px;
    animation: 5s gradient-angle infinite linear;
    border: 3px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(#fff, #fff),
    conic-gradient(
    from var(--gradient-angle),
        #fab042 0%,
        #fff192 37%,
        #fff7a1 30%,
        #fff192 33%,
        #fab042 40%,
        #fab042 50%,
        #fff192 77%,
        #fff7a1 80%,
        #fff192 83%,
        #fab042 90% 
    );
}

.cont04 .cont04_content li:nth-child(even) {
    animation-delay: 2.5s;
}

@keyframes gradient-angle {
    to {
      --gradient-angle: 1turn;
    }
}

.cont04 .cont04_content li .img_wrap {
    aspect-ratio: 467/340;
    overflow: hidden;
    border-bottom: 1px solid #e6e6e6;
}

.cont04 .cont04_content li .img_wrap > img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1s;
}

.cont04 .cont04_content li:hover .img_wrap > img {
    transform: scale(1.05);
}

.cont04 .cont04_content li .txt_wrap {
    min-height: 110px;
    padding: 25px 20px 30px 30px;
    background: #fff;
    word-break: keep-all;
}

.cont04 .cont04_content li .txt_wrap .title {
    font-family: 'Paperlogy-7Bold';
    font-size: 30px;
    color: #0f0f0f;
}

.cont04 .cont04_content li .txt_wrap .desc {
    font-family: 'Paperlogy-4Regular';
    font-size: 22px;
    color: #333;
    line-height: 1.4;
    margin-top: 10px;
}


/* cont05 */

.cont05 {
    padding: 160px 0 165px;
}

.cont05 .cont05_text {
    text-align: center;
    font-family: "Elice Digital Baeum", sans-serif;
}

.cont05 .cont05_text h5 {
    color: #444;
    font-size: 50px;
    font-weight: 400;
    line-height: 1;
}

.cont05 .cont05_text h5 > span {
    display: inline-block;
    color: #fff; background: #009465;
    padding: 3px 8px 10px;
}

.cont05 .cont05_text h3 {
    font-size: 75px;
    color: #009465;
    font-weight: bold;
    line-height: 1.6;
}

.cont05 .leader_wrap {
    margin: 80px 0 100px;
    display: flex; align-items: center; column-gap: 50px;
}

.cont05 .leader_wrap img {
    animation: leadeMarquee linear infinite 80s;
}

@keyframes leadeMarquee {
    100% {transform: translateX(-100%);}
}

.cont05 .sponsor_wrap .slide_btn_wrap {
    position: relative;
    width: 100%; max-width: 1590px;
    margin: 0 auto;
}

.cont05 .sponsor_wrap .sponsorSwiper {
    position: static;
    max-width: 1322px;
}

.cont05 .sponsor_wrap .swiper-slide {
    text-align: center;
}

.cont05 .sponsor_wrap .swiper-button-prev,
.cont05 .sponsor_wrap .swiper-button-next {
    width: 85px; height: 85px;
    margin-top: 0 !important;
    top: 50%; transform: translateY(-50%);
}

.cont05 .sponsor_wrap .swiper-button-prev::after,
.cont05 .sponsor_wrap .swiper-button-next::after {
    display: none;
}

.cont05 .sponsor_wrap .swiper-button-prev::before,
.cont05 .sponsor_wrap .swiper-button-next::before {
    content: ""; display: block; width: 100%; height: 100%;
    transition: background .2s;
}

.cont05 .sponsor_wrap .swiper-button-prev {left: 0;}
.cont05 .sponsor_wrap .swiper-button-prev::before {
    background: url(../images/prev_btn.png) no-repeat center center /contain;
}
.cont05 .sponsor_wrap .swiper-button-prev:hover::before {
    background-image: url(../images/prev_btn_hover.png);
}

.cont05 .sponsor_wrap .swiper-button-next {right: 0;}
.cont05 .sponsor_wrap .swiper-button-next::before {
    background: url(../images/next_btn.png) no-repeat center center /contain;
}
.cont05 .sponsor_wrap .swiper-button-next:hover::before {
    background-image: url(../images/next_btn_hover.png);
}


/* cont06 */

.cont06 {
    padding: 170px 0 220px;
    background: url(../images/sec6_bg.jpg) no-repeat center center / cover;
    text-align: center;
}

.cont06 .cont06_title {
    margin-bottom: 80px;
    font-size: 75px;
    color: #fff;
    font-family: "Elice Digital Baeum", sans-serif;
    font-weight: 700;
    line-height: 1.4;
}

.cont06 .cont06_imglist p {
    font-family: 'Paperlogy-5Medium';
    font-size: 34px;
    color: #ffea95;
    display: inline-flex; 
    align-items: center; 
    column-gap: 20px;
}

.cont06 .cont06_imglist p::before,
.cont06 .cont06_imglist p::after {
    content: ""; display: inline-block;
    width: 19px; height: 20px;
    background: url(../images/sec6_star.png) no-repeat center center / contain;
}

.cont06 .cont06_imglist > ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    width: fit-content;
    margin: 0 auto;
    padding-left: 25px;
}

.cont06 .cont06_imglist > ul > li {
    position: relative;
    width: 518px; height: 783px;
    margin-left: -25px;
}

.cont06 .cont06_imglist > ul > li > img {
    width: 100%; height: 100%;
}

.cont06 .cont06_imglist > ul > li > img.hover {
    position: absolute; top: 0; left: 0; z-index: 2;
    opacity: 0; transition: opacity .2s;
}

.cont06 .cont06_imglist > ul > li:hover > img.hover {
    opacity: 1;
}


/* cont07 */

.cont07 {
    padding: 160px 0 130px;
    background: url(../images/sec7_bg.jpg) no-repeat center center / cover;
}

.cont07 .cont07_title {
    text-align: center;
    font-family: "Elice Digital Baeum", sans-serif;
}

.cont07 .cont07_title h5 {
    font-size: 60px;
    color: #69bd83;
    height: 94px;
    line-height: 83px;
    position: relative;
    width: 1200px;
    margin: 0 auto;
}

.cont07 .cont07_title h5::before,
.cont07 .cont07_title h5::after {
    content: ""; display: block; width: 21px; height: 94px;
    position: absolute; top: 0;
    opacity: 0; transform: scale(0.7);
    transition: .3s opacity .3s, .5s transform .3s;
}

.cont07 .cont07_title h5::before {
    background: url(../images/sec7_title_obj1.png) no-repeat center center;
    left: 0;
}

.cont07 .cont07_title h5::after {
    background: url(../images/sec7_title_obj2.png) no-repeat center center;
    right: 0;
}

.cont07 .cont07_title h5.active::before,
.cont07 .cont07_title h5.active::after {
    opacity: 1; transform: scale(1);
}

.cont07 .cont07_title h3 {
    font-size: 75px;
    line-height: 1.3;
    margin-top: 20px;
    color: #005b48;
}

.cont07 .level_wrap .title {
    margin: 80px 0 20px;
    display: flex; align-items: center; justify-content: center;
    column-gap: 20px;
    font-size: 30px; color: #444;
    font-family: 'Paperlogy-7Bold';
    opacity: 0.5;
}

.cont07 .level_wrap .img_wrap {
    display: flex; align-items: center; justify-content: center;
    column-gap: 48px;
}

.cont07 .cont07_btn {
    margin: 100px auto 0;
    text-align: center;
}

.cont07 .cont07_btn .button_inquiry {
    font-size: 30px; color: #009465;
    font-family: 'Paperlogy-5Medium';
    margin-top: 25px; display: block;
    transition: color .2s;
}

.cont07 .cont07_btn .button_inquiry:hover {
    color: #005b48;
}


@media (max-width: 1536px) {

    html {
        width:100% !important;
        overflow-x:hidden !important;
    }

    .campaign-wrap {
        max-width:1920px;
        width: 100%;
        margin: 0 auto;
    }

	.cont01, .cont02, .cont03, .cont04, .cont05, .cont06, .cont07 {
		zoom:0.8;
	}

}