@charset "utf-8";
@keyframes infiniteScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.section-nav{position: fixed;top: 50%;right: 20px;transform: translateY(-50%);z-index: 10;display: flex;flex-direction: column;gap:5px}
.section-nav button{display:flex;align-items:center;justify-content: center;width:20px;height:20px;border-radius: 100%;border:1px solid transparent;transition: all 0.3s;}
.section-nav button span{display: block;border-radius: 100%;width:10px;height:10px;background: #fff;}
.section-nav button.active{border-color:#fff;}

.project-cursor {font-family: 'Rozha One', sans-serif;position: absolute;top: 0;left: 0;width: 135px;height: 135px;border-radius: 100%;-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);border: solid 1px rgba(255, 255, 255, 0.34);pointer-events: none; /* 커서 방해 방지 */transform: translate(-50%, -50%);transition: opacity 0.2s ease;opacity: 0;z-index: 1000;display: flex;align-items: center;justify-content: center;  font-size: 24px;font-weight: normal;line-height: 1.25;letter-spacing: -0.48px;text-align: center;color: #fff;}


main{height:100%;}
main section{position:relative;height:100%;}
main .section01{position: relative;}
main .section01 .mainSwiper{position: relative;height:100%;}
main .section01 .swiper-slide{position: relative;height:100%;}
main .section01 .swiper-slide  img{display: block;width:100%;height:100%;object-fit: cover;}
main .section01 .swiper-pagination{top:initial;left:0;right:initial;bottom:40px;width:100%;display:flex;justify-content: center;gap:10px;}
main .section01 .swiper-pagination .swiper-pagination-bullet{margin:0;width:10px;height:10px; border-radius:100%;background: rgba(255,255,255,0.5);opacity: 1;}
main .section01 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background: #F38200;}
main .section01 .control-navi{position: absolute;top:50%;left:50%;transform: translate(-50%, -50%);padding:0 60px;width:100%;display: flex;align-items: center;justify-content: space-between;z-index: 10;}
main .section01 .swiper-button{position:relative;width:50px;height:80px;margin:0;top:initial;left:initial;right:initial;bottom:initial;}
main .section01 .swiper-button:after{display: none;}
main .section01 .swiper-button-prev{background: url(/_public/images2/icon/target_left.svg) no-repeat;background-size: cover;}
main .section01 .swiper-button-next{background: url(/_public/images2/icon/target_right.svg) no-repeat;background-size: cover;}

main .section02{background: #000;}
main .section02 ul{display: flex;height:100%;}
main .section02 ul li{flex:1;}
main .section02 ul li a{display: block;width:100%;height:100%;position: relative;overflow: hidden;}
main .section02 ul li a:before{content: "";position: absolute;top: 0;left:0;width:100%;height:100%;background: rgba(0,0,0,0.5);opacity: 0;transition: all 0.4s;z-index: 1;}
main .section02 ul li a img{display: block;width:100%;height:100%;object-fit: cover;transform: scale(1);transition: transform 0.4s;}
main .section02 ul li a .rolling-text {position: absolute;top: 50%;left: 0;transform: translateY(-50%);width: 100%;text-align: center;overflow: hidden;height: 110px;z-index: 1;}
main .section02 ul li a p{display: flex;flex-direction: column;align-items: center;transition: all 0.4s ease-in-out;}
main .section02 ul li a p strong{display:block;font-size: 100px;font-weight: 900;letter-spacing: 1px;text-align: center;color: #fff;  transition: all 0.4s;}
main .section02 ul li a p span{display: block;font-size: 26px;font-weight: 300;line-height: 1.62;letter-spacing: -0.52px;text-align: center;color: #fff;position: absolute;top: 135px;left: 0;width: 100%;  transition: all 0.4s;}
main .section02 ul li:hover p{transform: translateY(-100%);}
main .section02 ul li:hover a img{transform: scale(1.1);}
main .section02 ul li:hover a:before{opacity: 1;}

main .section03 { background: #000; text-align: center;}
main .section03 .section-container{height:100%;display: flex;align-items: center;justify-content: center;flex-direction: column;gap:200px;}
main .section03 .ourpartner{display: block;}
main .section03 .swiper-wrapper{transition-timing-function: linear;}
main .section03 .swiper-slide{width:auto;margin:0 120px;}
main .section03 .loop-box {width: 100%;overflow: hidden;position: relative;}
main .section03 .partner-scroll-container {display: flex;animation: infiniteScroll 30s linear infinite;width: fit-content;}
main .section03 .partner-item {flex: 0 0 auto;display: flex;align-items: center;justify-content: center;margin: 0 120px;height: 80px;}
main .section03 .partner-item img {max-height: 100%;max-width: 200px;width: auto;height: auto;object-fit: contain;display: block;}
/*
main .section03  .loop-box:hover .partner-scroll-container {animation-play-state: paused;}
*/

main .section04 { background: #000;}
main .section04 .layout{height:100%;display: flex;flex-direction: column;justify-content: center;padding-bottom: 100px;}
main .section04 .ftxt {display: flex; justify-content: space-between;}
main .section04 .ftxt p { color: #787878; font-size: 24px; font-weight: 500}
main .section04 .ftxt ul { display: flex; gap:120px}
main .section04 .ftxt ul li {vertical-align: top; color: #787878; font-size: 18px; }
main .section04 .ftxt ul li span { display: block; color:#ccc}
main .section04 .fsnslogo { padding-top: 380px; display: flex;justify-content: space-between;}
main .section04 .fsns div a { padding-right: 20px}
main .section04 .fsns p {margin-top: 30px; color: #555555; font-size: 16px;}
main .section04 .fcopy {position:absolute;left:0;bottom:0;display: flex;justify-content: space-between;align-items: center;width:100%;padding-bottom: 48px;}
main .section04 .fcopy copyright{opacity: 0.5;font-size: 15px;font-weight: 500;letter-spacing: -0.3px;color: #ccc;}

#maingoTop{position: fixed;right:60px;bottom:40px;z-index: 10;transition: all 0.3s;opacity: 0; pointer-events: none;}
body.section-3 #maingoTop{opacity: 1;pointer-events: auto;}
@media all and (max-width:1760px) {
}

@media all and (max-width:1640px) {
    main .section04 .layout{padding: 0 20px;}
    main .section04 .ftxt p{font-size:22px;}
    main .section04 .ftxt ul{gap:80px;}
    main .section04 .fcopy{padding:0 20px 40px;}
}


@media all and (max-width:1460px) {
    main .section04 .ftxt{flex-direction: column;gap:40px;}
    main .section04 .ftxt ul{justify-content: space-between;}
    main .section04 .fsnslogo{padding-top: 300px;}
}

@media all and (max-width:1280px) {
    main .section02 ul li a p strong{font-size:80px;}
    main .section02 ul li a p span{font-size:22px;}
    main .section02 ul li:hover p{transform: translateY(-110%);}

    main .section03 .section-container{gap:140px;}
    main .section03 .swiper-slide{margin:0 80px;}
    main .section03  .partner-item {margin: 0 80px;}

    main .section04 .ftxt p{font-size:20px;}
    main .section04 .ftxt ul li{font-size:16px;}
    main .section04 .fsnslogo{padding-top:200px;}
    main .section04 .fsnslogo .coma-img{width:500px;}

    #maingoTop{right:40px;}
}

@media all and (max-width:1024px) {
    .project-cursor{display: none;}
    .section-nav{display: none;}

    main .section01 .control-navi{padding:0 40px;}
    main .section01 .swiper-pagination{bottom:30px;}

    main .section02 ul li a p strong{font-size:60px;}
    main .section02 ul li:hover p{transform: none;}

    main .section03 .section-container{gap:100px;}
    main .section03 .ourpartner{width:200px;}
    main .section03 .swiper-slide{margin:0 60px;}
    main .section03 .partner-item{margin: 0 60px;height: 60px;}

    main .section04 .ftxt p{font-size:18px;}
    main .section04 .ftxt ul{flex-direction: column;gap:40px;}
    main .section04 .fsnslogo{padding-top: 100px;}
    main .section04 .fsnslogo .coma-img{width:300px;}
    main .section04 .fcopy{padding:0 20px 30px;}
    main .section04 .fcopy copyright{font-size:13px;}

    #maingoTop{right:20px;bottom:28px;width:35px;}
}

@media all and (max-width:768px) {
    main{height:100%;}
    main section{height:100%;}
    main .section01 .swiper-button{width:40px;height:64px;}
    main .section01 .control-navi{padding:0;}

    main .section02 ul{height:100%;flex-direction: column;}
    main .section02 ul li{height:50%;}
    main .section02 ul li a .rolling-text{height:55px;}
    main .section02 ul li a p strong{font-size:40px;}

    main .section03 .ourpartner{width:160px;}
    main .section03 .section-container{gap:70px;}
    main .section03 .swiper-slide{margin:0 30px;}
    main .section03 .swiper-slide img{height:50px;}
    main .section03 .partner-item {margin: 0 30px;height: 50px;}

    main .section04 .fsnslogo{padding-top: 70px;gap:40px;flex-direction: column;}
    main .section04 .fsnslogo .coma-img{width:255px;}
    main .section04 .fcopy copyright{font-size:12px;}

    #maingoTop{bottom:20px;}

}

@media all and (max-width:460px) {
    main .section03  .partner-item img {max-width: 100px;}

    main .section04 .ftxt{gap:20px;}
    main .section04 .ftxt p{font-size: 16px;}
    main .section04 .ftxt ul{gap:20px;}
    main .section04 .ftxt ul li{font-size:14px;}
    main .section04 .fsns p{font-size:14px;margin-top:15px;}
    main .section04 .fsnslogo{padding-top:20px;gap:20px;}
}