@charset "utf-8";

/* main-common */
.mtit {font-size:4.8rem; font-weight:400; line-height:1.25; letter-spacing: -0.025em;}
.mtit strong {font-weight:700;}
.mtit + .mdesc {margin-top:4rem;}/* 7rem */
.mdesc {font-size:1.8rem; line-height: 1.6; font-weight:400;}

#main-pg {overflow:hidden;}
#main-pg .section:not(.fp-auto-height) {overflow:hidden;}


.scroll-arr {text-align:center; position:absolute; bottom:3.5rem; left:50%; transform:translateX(-50%); width:10rem; height:10rem; display:inline-flex; align-items:center; justify-content:center; border:1px solid #fff; border-radius:50%; font-size:1.4rem; color:#fff;}
.scroll-arr::after {animation:movedot 1s ease-in-out infinite; content:''; position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); display:inline-block; width:5px; height:5px; border-radius:50%; background:#fff;} 
.scroll-arr.ico-blk {border:1px solid #111; color:#111;}
.scroll-arr.ico-blk::after {background:#111;}

@keyframes movedot {
    0% { bottom:1rem; }
    75% { bottom:2rem; }
}

/* animation - effect */
.fade-effect {opacity:0; transition-duration:1.2s;}


@keyframes fadeRight {
    from {
        opacity: 0;
        visibility: hidden;
        transform:translateX(-10rem);
    }

    to {
        opacity: 1;
        visibility: visible;
        transform:translateX(0);
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        visibility: hidden;
        transform:translateY(-10rem);
    }

    to {
        opacity: 1;
        visibility: visible;
        transform:translateY(0);
    }
}

@keyframes obj-moving {
    0%, 50%, 100% {animation-timing-function: ease-out;}
    0% {transform: translateY(0);}
    50% {transform: translateY(3.5rem);}
    100% {transform: translateY(0);}
}

/* main visual */
.mvisual {position:relative;}
.mvisual .swiper-slide {height:100vh; overflow:hidden;}
.mvisual .swiper-slide .bg {background-size:cover; background-position:center; background-repeat:no-repeat; transform:scale(1); transition:all 3s ease; width:100%; height:100%;}
.mvisual .swiper-slide.swiper-slide-active .bg {transform:scale(1.2);}
.mvisual .txtbox {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;}
.mvisual .txtbox h2 {font-size:6rem; font-weight:400; color:#fff;}
.mvisual .txtbox h2 strong {font-weight:700;}
.mvisual .txtbox .mdesc {color:#fff; line-height:1.65; margin-top:3.8rem;}/* 20230826 margin-top:5.8rem */
.mvisual .control {margin-top:13rem; display:flex; align-items:center;}
.mvisual .control .bar {position:relative; display:inline-block; width:4.2rem; height:0.4rem; background:rgba(255,255,255,0.2); overflow:hidden; margin-right:1rem; vertical-align:middle;}
.mvisual .control .bar .active-bar {display:inline-block; position:absolute; top:0; left:0; width:0%; height:100%; background:#fff;}
.mvisual .control .bar .active-bar.on {width:100%; transition:all 4s;}
.mvisual .control .mv-pagination .swiper-pagination-bullet {background:none; border:none; width:auto; height:auto; opacity:1;}
.mvisual .control .mv-pagination .swiper-pagination-bullet-active {background:none; border:none; opacity:1;}
.mvisual .control .navibox {display:flex; margin-left:3.5rem;}
.mvisual .control .navibox .navi-btn {margin:0 0.75rem;}

.mvisual.active .txtbox h2 p {animation: fadeRight 1s forwards;}
.mvisual.active .txtbox h2 p:nth-child(2) {animation-delay: 0.6s;}
.mvisual.active .txtbox h2 p:nth-child(3) {animation-delay: 1.2s;}
.mvisual.active .txtbox .mdesc {animation: fadeRight 0.8s forwards; animation-delay: 1.8s;}


/* msec02 */
.msec02 {background:url(/images/main/index_bg_01.png) no-repeat center/cover;} /* 20230820 추가 */
.msec02 .inner {display:flex; justify-content: space-between; align-items:center;}
.msec02 .inner > * {width:50%; flex-shrink:0;}
.msec02 .img {position:relative;}
.msec02 .img .obj01 {position:absolute; top:44%; left:46.5%; transform:translate(-50%,-50%); display:flex; flex-direction:column;}
.msec02 .img .obj01 .obj {z-index:1; animation:obj-moving 3.5s infinite;}
.msec02 .img .obj01 .obj-shadow {transform:translateY(-25px);}
.msec02 .txtbox {padding-left:9rem;}
.msec02 .txtbox .mtit,
.msec02 .txtbox .mdesc {opacity:0; transition-duration:1.2s} 
.msec02 .txtbox .mtit + .mdesc {margin-top:3rem;}/* 20230826 6rem */
.msec02 .txtbox .control {display:flex; align-items:center; margin-top:7rem;}
.msec02 .txtbox .control .numbox {font-size:1.8rem; color:#c8c8c8; font-weight:700;}
.msec02 .txtbox .control .numbox .swiper-pagination-current {color:#111;}
.msec02 .txtbox .control .navibox {display:flex; margin-left:2rem;}
.msec02 .txtbox .control .navibox .navi-btn {margin:0 0.75rem;}
.msec02 .bg-obj01 {bottom:28rem; left:8rem; width:10.9rem; height:10.9rem;}
.msec02 .bg-obj02 {top:7.5rem; right:13rem; width:15.5rem; height:15.5rem;}
.msec02 .bg-obj03 {bottom:-38rem; right:7.5rem; width:64.2rem; height:64.2rem;}

.msec02.active .txtbox .swiper-slide-active .mtit {animation: fadeRight 1s forwards;}
.msec02.active .txtbox .swiper-slide-active .mdesc {animation: fadeRight 1s forwards; animation-delay: 0.8s;}


/* msec03 */
.msec03 {background:url(/images/main/index_bg_02.png) no-repeat center/cover;} /* 20230819 백그라운드 이미지 교체 */
.msec03 .inner {display:flex;justify-content: space-between;align-items: center;}
.msec03 .inner > * {width:50%;}
.msec03 .txtbox {padding-right:9rem;}
.msec03 .txtbox .mtit {color:#fff}
.msec03 .txtbox .mdesc {color:#fff;}
.msec03 .img {transform: translateX(6.5rem); text-align:center;}
.msec03 .img > span {display:block;}
.msec03 .img .img-obj {animation:obj-moving 3.5s infinite;}

.msec03.active .txtbox .mtit {animation: fadeUp 1s forwards;}
.msec03.active .txtbox .mdesc {animation: fadeUp 1s forwards; animation-delay: 0.8s;}


/* msec04 */
.msec04 {background:url(/images/main/index_bg_03.png) no-repeat center/cover;} /* 20230819 추가 */
/* .msec04 .mtit {margin-bottom:9rem;} */
.msec04 .flex-box {display:flex; justify-content:space-between;}
.msec04 .flex-box > * {width:50%; flex-shrink:0;}
.msec04 .flex-box .video-w {width:56.6rem; max-width:100%; flex-shrink:0;}
.msec04 .flex-box .video {position:relative; width:100%; height:0; padding-bottom:56.25%; border-radius:1rem; overflow:hidden;}
.msec04 .flex-box .video iframe {position:absolute; top:0; left:0; width:100%; height:100%;}
.msec04 .flex-box .list {margin-left:9rem; padding-right:18rem; max-width:55rem;}
.msec04 .flex-box .list li {margin-bottom:6rem;}
.msec04 .flex-box .list li:last-child {margin-bottom:0;}
.msec04 .flex-box .list li .title {font-size:2.4rem; color:#111; font-weight:500; margin-bottom:2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.msec04 .flex-box .list li .desc {line-height:1.6; margin-bottom:2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; white-space: normal; line-height:1.6; height:3.2em; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;}
.msec04 .flex-box .list li .arr {display:inline-flex; justify-content:center; align-items:center; width:5.2rem; height:5.2rem; border-radius:50%; border:1px solid #dcdcdc; transition:all .2s ease;}
.msec04 .flex-box .list li .arr img {transition:all .3s ease;}
.msec04 .flex-box .list li .arr:hover {background:#dcdcdc;}
.msec04 .flex-box .list li .arr:hover img {transform: translateX(0.3rem);}
.msec04 .bg-obj01 {top:-18rem; right:-22rem; width:64.2rem; height:64.2rem;}
.msec04 .bg-obj02 {bottom:7rem; right:13rem; width:20.1rem; height:20.1rem;}

.msec04.active .flex-box .list li {animation: fadeRight 1s forwards;}
.msec04.active .flex-box .list li:nth-child(1) {animation-delay: 0.2s;}
.msec04.active .flex-box .list li:nth-child(2) {animation-delay: 0.8s;}
.msec04.active .flex-box .list li:nth-child(3) {animation-delay: 1.6s;}

/* 20230826 텍스트 animation 추가 */
.msec04.active .txtbox .mtit {animation: fadeUp 1s forwards;}
.msec04.active .txtbox .mdesc {animation: fadeUp 1s forwards; animation-delay: 0.8s;}


/* msec05 */
.msec05 {background:url(/images/main/msec05-bg.png) no-repeat center/cover; text-align:center;}
.msec05 .logobox {margin:5rem 0;}
.msec05 .txt {color:#666; line-height:1.6;}

.msec05.active .mtit {animation: fadeUp 1s forwards;}
.msec05.active .logobox {animation: fadeUp 1s forwards; animation-delay: 0.8s;}
.msec05.active .txt {animation: fadeUp 1s forwards; animation-delay: 1.6s;}


/* msec06 */
.msec06 {background:url(/images/main/index_bg_04.png) no-repeat center/cover;} /* 20230819 추가 */
.msec06 {text-align:center;}
.msec06 .mtit {margin-bottom:9rem;}
.msec06 .partners-slider li {width:40.8rem; height:40.8rem; border-radius:50%; margin:0 -3rem; border:1px solid rgba(27,27,27,0.2); display:inline-flex; align-items:center; justify-content:center;}
.msec06 .bg-obj01 {top:-4rem; left:12rem; width:25.8rem; height:25.8rem;}
.msec06 .bg-obj02 {top:15rem; right:28rem; width:7.1rem; height:7.1rem;}
.msec06 .bg-obj03 {bottom:-5rem; right:40rem; width:23.9rem; height:23.9rem;}





@media (max-width: 1283px) {
    .mtit {font-size:4.2rem;}
    .mdesc {font-size:1.75rem;}
    .mtit .pc-br,
    .mdesc .pc-br {display:none;}

    .mvisual .txtbox h2 {font-size:5.6rem;}

    .msec02 .txtbox .control {margin-top:5rem;}
    .msec03 .img {transform:none;}
    .msec04 .flex-box .list {margin-left:0; padding:0 4rem;}

    .msec06 .partners-slider li {width:36rem; height:36rem;}

    .msec02 .bg-obj01 {left:5%;}
    .msec02 .bg-obj02 {right:3%;}
    .msec02 .bg-obj03 {width:45rem; height:45rem; bottom:-20rem; right:-10rem;}    

    .msec06 .bg-obj01 {left:5%;}
    .msec06 .bg-obj02 {right:3%;}
    .msec06 .bg-obj03 {right:10%;}
}

@media (max-width: 1024px) {
    .mtit {font-size:4rem;}
    .mtit + .mdesc {margin-top:6rem;}
    .mdesc {font-size:1.7rem;}

    .mvisual .txtbox h2 {font-size:5rem;}
    .mvisual .txtbox .mdesc {margin-top:5rem;}
    .mvisual .control {margin-top:10rem;}

    .msec04 .flex-box .list li .title {font-size:2.2rem;}
    .msec05 .txt .pc-br {display:none;}
}

@media (max-width: 980px) {
    .fp-section, .fp-tableCell{height: auto !important;} /*980부터 fullpage효과제거*/

    #main-pg .section:not(.mvisual, .fp-auto-height) {padding:10rem 0; overflow:hidden;}

    .msec02 .inner {flex-wrap:wrap;}
    .msec02 .inner > * {width:100%;}
    .msec02 .txtbox {padding-left:0; margin-top:6rem;}
    .msec02 .img {text-align:center; width:70%; margin:auto;}
    .msec02 .img .obj01 {left:50%; width:22%;}
    .msec02 .img .obj01 .obj-shadow {transform:none;}
    .msec02 .bg-obj01 {top:0;}
    .msec02 .bg-obj02 {top:5rem;}

    .msec03 .inner {flex-wrap:wrap;}
    .msec03 .inner > * {width:100%;}
    .msec03 .txtbox {padding-right:0;}
    .msec03 .img {order:1; width:70%; margin:auto;}
    .msec03 .txtbox {order:2; margin-top:3rem;}

    .msec04 .flex-box {flex-wrap:wrap;}
    .msec04 .flex-box > * {width:100%;}
    .msec04 .flex-box .list {padding:0; margin-top:4rem;}
}

@media (max-width: 767px) {
    .mtit {font-size:3rem;}
    .mvisual .txtbox h2 {font-size:4rem;}
    .mvisual.active .txtbox h2 p {margin:1rem 0;}

    .scroll-arr {width:7rem; height:7rem; padding:1rem; line-height:1.1; bottom:2rem; font-size:1.3rem;}
    
    .msec02 .txtbox .mtit + .mdesc {margin-top:3rem;}

    .msec04 .mtit {margin-bottom:6rem;}
    .msec04 .flex-box .list li {margin-bottom:4rem;}
    .msec04 .flex-box .list li .title {font-size:2rem;}
    .msec04 .flex-box .list li .desc {margin-bottom:1.2rem;}
    .msec04 .flex-box .list li .arr {width:4.5rem; height:4.5rem;}
    .msec04 .flex-box .list li .arr img {width:1.4rem;}

    .msec06 .mtit {margin-bottom:6rem;}
    .msec06 .partners-slider li {width:20rem; height:20rem; margin:0 -1rem;}
    .msec06 .partners-slider li img {transform:scale(0.6);}
}

@media (max-width:500px) {
    .mtit {font-size:2.6rem;}
    .mvisual .txtbox h2 {font-size:3.8rem;}

    .msec04 .bg-obj01 {width:30rem; height:30rem; right:-2rem; top:-14rem;}

    .msec06 .bg-obj01 {width:18rem; height:18rem;}
    .msec06 .bg-obj03 {width:14rem; height:14rem;}
}