@charset "UTF-8";

@import 'reset.css';
@import 'fonts.css';
@import "global.css";
@import "animations.css";
@import 'layouts.css';
@import 'cube.css';
html {
    scroll-behavior: smooth;
}
body::-webkit-scrollbar {
    width: 5px;
    background: transparent;
    border-radius: 10px;
    box-shadow: inset 0px 0px 5px white;
}
body::-webkit-scrollbar-thumb {
    background-color: #1500DA;
    border-radius: 10px;
}
body::-webkit-scrollbar-track {
    background-color: transparent;
}
.bg_yellow{background-color: #EAFF00}
.bg_blue{background-color: #1500DA}
.pin-spacer{height:350px}
span.logo_square_header{font-size:1vw}
span.logo_square{font-size:23px}

html,
body {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

body {
    margin: 0;
    padding: 0;
    font-size: calc(16px + (24 - 16) * ((100vh - 400px) / (800 - 400)));
}
.swiper {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

header{display:none;position:fixed;display:none;width:100%;height:2vw; text-align:center; padding-top:3vh; color:#fff; font-size:3vw;font-family: 'Montserrat'; font-weight: 800;z-index:999}
.swiper-slide h3{font-family: 'Montserrat';
    font-size: 1rem;
    position: absolute;
    font-weight: 800;
    top: 5%;
    left: 5%;}
.swiper-slide h3.white{color:#eaeaea}
.swiper-slide img{position:absolute;top:20%;left:50%;margin-left:-25%;width:45%;opacity: 0.3}


@keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes gradient2 {
    0% {
        background-position: 0% 100%;
    }
    25%{
        background-position: 50% 100%;
    }
    50% {
        background-position: 100% 100%;
    }
    75%{
        background-position: 50% 100%;
    }
    100% {
        background-position: 0% 100%;
    }
}
@keyframes gradient3 {
    0% {
        background-position: 0% 100%;
    }
    25%{
        background-position: 50% 100%;
    }
    50% {
        background-position: 100% 100%;
    }
    75%{
        background-position: 50% 100%;
    }
    100% {
        background-position: 0% 100%;
    }
}
.section1{
    background: rgb(21,0,218);
    background: radial-gradient(circle, rgba(21,0,218,0.9864320728291317) 7%, rgba(36,173,255,1) 48%, rgba(78,238,245,1) 66%, rgba(163,250,249,1) 79%, rgba(238,243,255,1) 92%, rgba(255,255,255,1) 100%);
    background-size: 300% 300%;
    animation: gradient-animation 30s ease infinite;
    width: 100%;
    height: 100%;
}
.section1 .left_bg{
    width: 0%;
    height:100%;
    position:absolute;
    z-index: 2;
    background: #1500DA;
    top:0;
    left:0;
    animation-delay: 1s;
}
.section1 .scroll_wrap{
    position:absolute;
    z-index: 2;
    bottom: 5%;
    left:50%;
    margin-left:-2rem;
    opacity: 0;
    animation: moveUpDown 0.8s infinite alternate;
}

@keyframes moveUpDown {
    0% {
        bottom: 5%;
    }
    100% {
        bottom: 3%;
    }
}

.section1 .typing_effect{
    display: inline-block;
    overflow: hidden;
    border-right: 0.15em solid #eaeaea;
    animation: blink-caret 0.5s infinite alternate;
    white-space: nowrap;
    font-size: 2rem;
    opacity: 0.8;
}
@keyframes blink-caret {
    to {
        border-color: transparent;
    }
}
@keyframes square-in-center {
    from {
        clip-path: inset(100% 100% 100% 100%);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

[transition-style="in:square:center"] {
    animation: 1.5s cubic-bezier(.25, 1, .30, 1) square-in-center both;
}

.section1 .content{display: flex;width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center; gap: 50px;
}
.section1 .content .title{
    flex:1;
    font-family: 'Montserrat';
    color: #eaeaea;
    text-align: right;
    font-size: 5rem;
    font-weight: 800;
    z-index: 3
}
.section1 .content .sub_title{
    flex:1;
    font-family: 'Montserrat';
    font-weight: 100;
    color: #eaeaea;
    text-align: left;
    font-size: 2rem;
    opacity: 0.8;
    z-index: 3;
}
.section2{
    background: rgb(25,0,255);
    background: linear-gradient(185deg, rgba(25,0,255,1) 0%, rgba(92,238,185,1) 100%);
    background-size: 300% 100%; /* 배경 이미지 크기 설정 */

    animation: gradient2 3s ease-in-out infinite; /* 애니메이션 적용 */
   }
.section2 .content{display: flex;width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center; gap: 60px; }
.section2 .content .left_content{margin-top:-160px;flex:1; font-family: 'WalbaumDisplay'; align-content: center; color:#eaeaea; text-align: right;}
.section2 .content .left_content div{opacity:0;margin-bottom:-7px}
.section2 .content .left_content .by_author{font-size: 1.3rem}
.section2 .content .right_content{margin-top:95px;flex:1; font-family: 'Pretendard';font-weight: 100;  color:#eaeaea; text-align: left;}
.section2 .content .right_content div{opacity:0;margin-bottom:5px}
.section2 .content .right_content div span{font-family: 'Montserrat';font-weight: 100;}



.section3{
    background-image: url("../images/bg/bg_03.jpg");
    background-size: cover;
    background-position: center;
}

.section3.swiper-slide img{position:absolute;top:27%;left:50%;margin-left:-25%;width:45%}
.section3 .content{display: flex;width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center; gap: 60px;z-index:99 }
.section3 .content .left_content{margin-top:-260px;flex:1; font-family: 'WalbaumDisplay'; align-content: center; color:#000; text-align: right;}
.section3 .content .left_content div{opacity:0;margin-bottom:-7px}
.section3 .content .left_content .by_author{font-size: 1.3rem}
.section3 .content .right_content{margin-top:-70px;flex:1; font-family: 'Pretendard';font-weight: 100;  color:#000; text-align: left;}
.section3 .content .right_content div{opacity:0;margin-bottom:5px}
.section3 .content .right_content div span{font-family: 'Montserrat';font-weight: 800;}
.section4{ background-image: url("../images/bg/bg_04.jpg");
    background-size: cover;
    background-position: center;}
.section4 .contents{display:flex; justify-content: center;
    align-items: center;flex-direction: column;width:100%;height:100%;margin-top:-40px}
.section4 .contents div{opacity:0; margin-bottom:5px}
.section4 div.title{font-family: 'Pretendard'; font-weight: 100;font-size: 1.5rem;}
.section4 div span{color:#1500DA; font-family: 'WalbaumDisplay'}
.section4 div span.bold{color:#1500DA; font-family: 'Montserrat';font-weight:800}
.section4 div span.light{color:#1500DA; font-family: 'Montserrat';font-weight:100}
.section4 div.content{font-family: 'WalbaumDisplay'; font-weight: 100;font-size: 4.5rem;}
.section4 img{margin-left:-22%}
.section5{
    background: linear-gradient(180deg, rgba(21,0,218,1) 0%, rgba(3,3,39,1) 100%);
    background-size: 300% 100%; /* 배경 이미지 크기 설정 */
    animation: gradient3 1s ease-in-out infinite; /* 애니메이션 적용 */
   }
.section5 .swiper-wrapper{top:25%;left:10%}
.section5 .swiper-slide{width:22%}
.section5 ul li{font-family: 'WalbaumDisplay'; font-size:2rem;flex:1;color: #eaeaea;width:80%}
.section5 ul li div{font-family: 'Pretendard'; font-weight: 100; line-height: 1.8rem;font-size: 1.5rem;margin-bottom: 10px;width:84%; }
.section5 ol li, .section5 ol li div{font-family: 'Montserrat'; font-weight: 100;font-size: 1rem;}
.section5 ol li{margin-bottom: 5px}
.section5 .swiper-slide img{position:absolute;top:20%;left:50%;margin-left:-25%;width:55%}


.section6{position:absolute; background-image: url('../images/bg/bg_06.jpg');
    background-size: cover;
    background-position: center center;
    height:100vh;}
.section6 .swiper-wrapper{top:32%;left:13%}
.section6 .swiper-slide{width:29%}
.section6 ul li{font-family: 'WalbaumDisplay'; font-size:2rem;flex:1;color: #eaeaea;width:80%}
.section6 ul li div{font-family: 'Pretendard'; font-weight: 100;font-size: 1.3rem;margin-bottom:2%}
.section6 ul li div.by_author{font-size:1rem}
.section6 .swiper-slide img{position:absolute;top:20%;left:50%;margin-left:-25%;width:55%}
/*.section6 .swiper-slide:nth-child(1) img{width:68%}*/
/*.section6 .swiper-slide:nth-child(2) img{width:44%}*/
/*.section6 .swiper-slide:nth-child(3) img{width:58%}*/

.section7{position:absolute; background-image: url('../images/bg/bg_07.jpg');

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height:100vh;}
.section7 .content{
    position:absolute;top:37%;left:9%;
}
.section7 .content .business{font-family: 'Pretendard';
    font-size: 3rem;
    font-weight: 700;
    color: #eaeaea;}
.section7 .content .business .logo_square{font-size:1.4rem;}
.section7 .content .tel{font-family: 'Montserrat'; font-size: 2rem;
    color: #eaeaea;font-weight: 100;margin-bottom:8px}
.section7 .content .tel a{color: #eaeaea !important;text-decoration: none;}
.section7 .content .email{font-family: 'Montserrat'; font-size: 2rem;
    color: #eaeaea;font-weight: 100;cursor:pointer}
.section7 .content .email a{color: #eaeaea !important;text-decoration: none;}
.section7 .content .txt{font-family: 'Montserrat'; font-size: 1rem;
    color: #eaeaea;font-weight: 100;margin-top: 10px;}
.section7 .content .address{
    font-family: 'Pretendard'; font-size: 0.9rem;
    color: #eaeaea;font-weight: 100;
}
footer{text-align:center;width:100%;display:none;z-index:999;position:fixed;left:0;right:0;bottom:20px;font-family: 'Montserrat'; font-weight: 100;font-size:1rem; color: #eaeaea;opacity: 0.5}
footer p{margin:0;padding:0;}

.web{display:block}
.mobile{display:none}

.left_content{font-size:5rem}
.right_content{font-size:1.4rem}

@media all and (min-width:1023px) and (max-width:1260px) {
    html{font-size:14px}
    span.logo_square {
        font-size: 23px;
    }
    .web{display:block}
    .mobile{display:none}
    .swiper-slide img{position:absolute;top:20%;left:50%;margin-left:-30%;width:65%}
    .section5 ul li div{font-size: 1.3rem;}
    .section5 ol li, .section5 ol li div{font-size: 1.1rem;}
    .section6 .swiper-wrapper{left:10%}
    .section6 .swiper-slide {
        width: 30%;
    }
}


@media all and (min-width:670px) and (max-width:1023px) {
    html{font-size:13px}
    span.logo_square {
        font-size: 23px;
    }
    .web{display:block}
    .mobile{display:none}
    .swiper-slide img{position:absolute;top:20%;left:50%;margin-left:-34%;width:72%}
    /*.section3.swiper-slide img{position:absolute;top:27%;left:50%;margin-left:-34%;width:72%}*/

    .section2 .content .left_content div {
        margin-bottom: 7px;
    }
    .section2 .content .left_content {font-size:3.6rem }

    section5 ul li{font-family: 'WalbaumDisplay'; font-size:2rem;flex:1;color: #eaeaea}
    .section5 ul li div{font-size: 1.3rem;}
    .section5 ol li{font-size: 1.3rem;}
    .section6 ul li div{font-size: 1.5rem;}
    .section6 ul li div.by_author{font-size:1.3rem}
}


@media all and (min-width:481px) and (max-width:669px) {
    html{font-size:12px}
    span.logo_square {
        font-size: 20px;
    }
    .web{display:none}
    .mobile{display:block}
    .swiper-slide img{position:absolute;top:20%;left:30%;width:90%}
    .section6.swiper-slide img{margin-left:-28%;width:65%}

    .section1 .content {
        flex-direction: column;
        align-items: center;
        gap:0px;
    }
    .section1 .content .title{
        flex:0;
    }
    .section1 .content .sub_title {
        flex:0;
        order: 1;
        margin-top: 0px;
        text-align: center;
        margin-top:10px
    }
    .section2 .content .left_content div {
        margin-bottom: 3px;
    }
    .section2 .content .left_content{
        font-size: 2.8rem;
    }
    .section2 .content .right_content {

    }
    .section3 .content .left_content{
        font-size: 4rem;
    }
    .section2 .content .right_content {

    }
    .section5 ul li{font-family: 'WalbaumDisplay'; font-size:2rem;flex:1;color: #eaeaea}
    .section5 ul li div{font-size: 1.3rem;}
    .section5 ol li, .section5 ol li div{font-family: 'Montserrat'; font-weight:100;font-size: 1.3rem;}
    .section6 .swiper-wrapper{left:8%}
    .section6 ul li div{font-size: 1.5rem;}
    .section6 ul li div.by_author{font-size:1.3rem}
    .section7 .content{
        position:absolute;top:16%;left:50%;margin-left:-37%;
    }
    .section7 .content .business{
        font-size: 2rem;
    }

}


@media all and (min-width:321px) and (max-width:480px){
    html{font-size:11px}
    span.logo_square {
        font-size: 19px;
    }
    /*.section1 .title{position:absolute; color:#1500DA;font-size:8vh;font-family: 'Montserrat'; font-weight: 800;top:60%; left:50%; margin-left:18% }*/
    .web{display:none}
    .mobile{display:block}
    .swiper-slide img{position:absolute;top:26%;left:30%;width:90%}
    /*.section3.swiper-slide img{margin-left:-35%;width:70%}*/
    .section4.swiper-slide img{margin-left:-22%;width:85%}
    .section6.swiper-slide img{margin-left:-28%;width:65%}




    .section1 .content {
        flex-direction: column;
        align-items: center;
        gap:0px;

    }
    .section1 .content .title{
            flex:0;
    }
    .section1 .content .sub_title {
        flex:0;
        order: 1;
        margin-top: 0px;
        text-align: center;
        margin-top:10px
    }
    .section2 .content {
        flex-direction: column;
        align-items: center;
        gap:0px;

    }
    .section2 .content .left_content{
        margin-top: 15%;
        font-size: 4rem;
        flex:0;
        width:90%;
    }
    .section2 .content .right_content {
        order: 1;
        margin-top: 50px;
        flex:0;
        text-align:right;
        width:90%;

    }

    .section3 .content {
        flex-direction: column;
        align-items: center;
        gap:0px;
        margin-top:-60px;

    }
    .section3 .content .left_content{
        margin-top: 15%;
        font-size: 4rem;
        flex:0;
        width:90%;
    }
    .section3 .content .right_content {
        order: 1;
        margin-top: 50px;
        flex:0;
        text-align:right;
        width:90%;
    }
    .section5 .swiper-wrapper{left:22%}
    .section5 ul li{font-size:3.5rem;}
    .section5 ol li, .section5 ol li div{font-size: 1.5rem;}

    .section6 .swiper-wrapper{left:13%}
    .section6 ul li{font-size:3rem;margin-top:13%}
    .section6 ul li div{font-size: 1.5rem;margin-left: 5%;}
    .section6 ul li div.by_author{font-size:1.3rem}
    .section7 .content{
        position:absolute;top:16%;left:50%;margin-left:-33%;
    }
    .section7 .content .email{font-size:1.7rem}
    .section7 .content .tel a{color: #eaeaea !important;}
    .section7 .content .email a{color: #eaeaea !important;}
    .section7 .content .business{
        font-size: 2rem;
       }
}

@media all and (max-width:320px){
    html{font-size:11px}
    span.logo_square {
        font-size: 18px;
    }
    /*.section1 .title{position:absolute; color:#1500DA;font-size:8vh;font-family: 'Montserrat'; font-weight: 800;top:60%; left:50%; margin-left:18% }*/
    .web{display:none}
    .mobile{display:block}
    .swiper-slide img{position:absolute;top:26%;left:30%;width:90%}
    .section3.swiper-slide img{margin-left:-35%;width:70%}
    .section4.swiper-slide img{margin-left:-22%;width:85%}
    .section6.swiper-slide img{margin-left:-28%;width:65%}

    .swiper-pagination-bullet {
        display:block;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        color: #000;
        opacity: 1;
        background-color: #fff;
    }




    .section1 .content {
        flex-direction: column;
        align-items: center;
        gap:0px;
    }
    .section1 .content .title{
        flex:0;
    }
    .section1 .content .sub_title {
        flex:0;
        order: 1;
        margin-top: 0px;
        text-align: center;
        margin-top:10px
    }
    .section2 .content {
        flex-direction: column;
        align-items: center;
        gap:0px;
    }
    .section2 .content .left_content{
        margin-top: 25%;
        font-size: 4rem;
        flex:0;
        width:90%;
    }
    .section2 .content .right_content {
        order: 1;
        margin-top: 50px;
        flex:0;
        text-align:right;
        width:90%;

    }

    .section3 .content {
        flex-direction: column;
        align-items: center;
        gap:0px;
    }
    .section3 .content .left_content{
        margin-top: 25%;
        font-size: 4rem;
        flex:0;
        margin-top:-60px;
        width:90%;
    }
    .section3 .content .right_content {
        order: 1;
        margin-top: 50px;
        flex:0;
        text-align:right;
        width:90%;
    }
    .section5 ul li{font-size:3rem;margin-left: 13%;}
    .section5 ul li div{font-size: 1.5rem;}
    .section5 ol li{margin-left:0%}
    .section5 ol li, .section5 ol li div{font-size: 1.5rem;}

    .section6 .swiper-wrapper{left:13%}

    .section6 ul li{font-size:3rem;margin-left:5%;margin-top:13%}
    .section6 ul li div{font-size: 1.5rem;}
    .section6 ul li div.by_author{font-size:1.3rem}

    .section7 .content{
        position:absolute;top:16%;left:50%;margin-left:-33%;
    }

    .section7 .content .business .logo_square{font-size:1.4rem;}
    .section7 .content .tel{font-size:1.3rem}
    .section7 .content .tel a{color: #eaeaea !important;}
    .section7 .content .email{font-size:1.3rem}
    .section7 .content .email a{color: #eaeaea !important;}
    .section7 .content .business{
        font-size: 2rem;
    }

}
@keyframes square-out-center {
    from {
        clip-path: inset(0 0 0 0);
    }
    to {
        clip-path: inset(100% 100% 100% 100%);
    }
}
/* 모바일 가로 모드에 대한 스타일 */
@media (max-height: 390px) {
    .section2 .content .left_content{
        margin-top: -2%;
        font-size: 3rem;
        flex:1;
    }
    .section2 .content .right_content {
        margin-top: 50px;
        font-size: 1rem;
        flex:1;
        text-align:left;
    }

    .section3 .content .left_content{
        margin-top: -10%;
        font-size: 3rem;
        flex:1;
    }
    .section3 .content .left_content div{margin-bottom: -2px}
    .section3 .content .right_content {
        margin-top: 50px;
        font-size: 1rem;
        flex:1;
        text-align:left;
    }
    .section4 .contents{margin-top:20px}
    .section4 .contents div {margin-bottom: 1px;}
    .section4 div.title{font-size: 1rem}
    .section4 div.content {font-size: 3rem}
    .section5 .swiper-wrapper {top: 15%;}
    .section5 ul li{font-size:1.8rem}
    .section5 ul li div{font-size:1.2rem;margin-bottom: 3px}
    .section5 ol li,.section5 ol li div{font-size:1rem}
    .mt40{margin-top:20px !important;}

    .section6 .swiper-wrapper{top:20%}
    .section6 ul li div{font-size: 1.3rem}
    .section6 ul li div.by_author{font-size: 1rem}
    .section7 .content{top:30%}
    .section7 .content .business{font-size: 4rem}
}