@charset "utf-8";
@import "reset.css";
@import "fonts.css";
@import "root.css";

/* 키프레임 */
@keyframes txtMotion {
    0% {
        opacity: 0;
        transform: translateY(100%) rotateX(-80deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
    }
}

@keyframes opacityAni {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes slide {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(var(--distance, 0px) * -1));
    }
}
/* 키프레임 */

/* 공통 */
.inner{padding: 0 2rem; margin: 0 auto; max-width: 160rem;}
/* 공통 */

/* 메인 비주얼 */
.mvArea{height:100vh; position: relative; overflow: hidden;}
.mvArea .mv_list{height: 100%; position: relative;}
.mvArea .mv_list .swiper-container{width: 100%; height: 100%; position: relative;}
.mvArea .mv_list .swiper-container .swiper-slide{overflow: hidden;}
.mvArea .mv_list .swiper-container .swiper-slide .mv_bg{width: 100%; height: 100%; transition: clip-path 0.2s ease; background: #000;}
.mvArea .mv_list .swiper-container .swiper-slide .mv_bg:before{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;}
.mvArea .mv_list .swiper-container .swiper-slide .mv_bg:after{top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.01; content:""; position: absolute;}
.mvArea .mv_list .swiper-container .swiper-slide .mv_bg .slide_img{min-width: 100rem; width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 7s ease-out; transform: scale(1.1) translate(-50%, -50%); opacity: 0.4; position: absolute; top: 50%; left: 50%;}
.mvArea .mv_list .swiper-container .swiper-slide .mv_bg iframe.slide_img{min-width: 192rem; width: 120%; height: 120%;}
.mvArea .mv_list .swiper-container .swiper-slide .mv_infoArea{position: absolute; top: 50%; left: 10%; transform: translateY(-50%); color: #fff; z-index: 10; text-align: left; perspective: 60rem; -webkit-perspective: 60rem; max-width: 60rem; pointer-events: none;}
.mvArea .mv_list .swiper-container .swiper-slide .mv_infoArea .mv_tit{opacity: 0; transform: translateY(100%) rotateX(-80deg); transform-origin: center top; transform-style: preserve-3d;}
.mvArea .mv_list .swiper-container .swiper-slide .mv_infoArea .mv_tit h1{font-size: 7.2rem; font-weight: 700; line-height: 1.35; transition: all 0.3s;}
.mvArea .mv_list .swiper-container .swiper-slide .mv_infoArea .mv_desc{opacity: 0;}
.mvArea .mv_list .swiper-container .swiper-slide .mv_infoArea .mv_desc p{font-size: 1.8rem; margin-top: 1rem;}
.mvArea .mv_list .swiper-container .swiper-slide-active .mv_infoArea .mv_tit{animation: txtMotion 1.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s forwards;}
.mvArea .mv_list .swiper-container .swiper-slide-active .mv_infoArea .mv_desc{animation: opacityAni 1s 1s forwards;}
.mvArea .pagination_wrap{margin-top: 5rem; height: 1.2rem; position: absolute; display: flex; align-items: center; top: 60%; left: 10%; transform: translateY(-50%); color: #fff; z-index: 1;}
.mvArea .pagination_wrap button{font-size: 2.1rem; width: 2.4rem; height: 2.4rem; position: relative; background: transparent; cursor: pointer; border: 0; color: #fff;}
.mvArea .pagination_wrap button i{top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute;}
.mvArea .pagination_wrap .btn-prev{margin-left: 3rem;}
.mvArea .pagination_wrap .btn-next{margin-right: inherit; margin-left: 1.5rem;}
.mvArea .pagination_wrap .btn-toggle{margin-left: 1.5rem;}
.mvArea .pagination_wrap .nav_dot{margin-top: 0.4rem;}
.mvArea .pagination_wrap .nav_dot button,
.mvArea .pagination_wrap .nav_dot .swiper-pagination-bullet{position: relative; width: 1rem; height: 1rem; border: 1px solid #fff; border-radius: 0.9rem; box-sizing: border-box; font-size: 0; background: transparent; transition: 0.3s;}
.mvArea .pagination_wrap .nav_dot .swiper-pagination-bullet-active{width: 2.2rem; background: #fff; border: 0}
/* 메인 비주얼 */

/* 메인 어바웃 */
.mainAbout{margin-top: 20rem; position: relative;}
.about_txt h2{font-size: 5.2rem; font-weight: 600; letter-spacing: -0.04em; color: var(--black); transition: all 0.3s; word-break: auto-phrase;}
.about_txt p{font-size: 1.7rem; margin: 3rem 0 8rem; font-weight: 400; color: var(--black500); line-height: 1.4; word-break: auto-phrase;}
.about_wrap{top: -20rem; display: flex; align-items: flex-end; justify-content: center; width: 100%; position: relative;}
.about_wrap .about_box{width: 40%; overflow: hidden;}
.about_wrap .about_box:first-child{width: 57%; margin-right: 4rem;}
.about_wrap .about_box a{display: block;}
.about_wrap .about_box .img{border-radius: 2rem; overflow: hidden; transition: all 0.3s;}
.about_wrap .about_box .img img{border-radius: 2rem; transform: scale(1); width: 100%; transition: all 1s ease; object-fit: cover; aspect-ratio: 890/555}
.about_wrap .about_box:last-child .img img{aspect-ratio: 624/832}
.about_wrap .about_box a:hover .img img{transform: scale(1.1);}
.about_wrap .about_box h3{margin: 3rem 0 3rem 1rem; font-size: 2.8rem; font-weight: 500; color: var(--black300); transition: all 0.3s;}
/* 메인 어바웃 */

/* 메인 가치 */
.mainVar{padding: 20rem 0; background-attachment: fixed; position: relative;}
.mainVar:before{top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); content:""; position: absolute;}
.var_txt{text-align: center;}
.var_txt h2{font-size: 5.2rem; font-weight: 600; letter-spacing: -0.04em; color: var(--white); transition: all 0.3s;}
.var_txt p{margin: 3rem 0 8rem; font-size: 1.7rem; font-weight: 400; color: var(--color-dfdfdf); line-height: 1.4; word-break: auto-phrase;}
.var_wrap{display: flex; flex-wrap: wrap; justify-content: center;}
.var_wrap .var_box{margin: 2rem; min-width: 33rem; min-height: 33rem; position: relative; transition: transform 0.5s ease; backdrop-filter: blur(3px); border: 1px solid rgba(229,229,229,0.2); background-color: rgba(0,0,0,0.1); border-radius: 50%; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--white);}
.var_wrap .var_box .img{width: 7.8rem; height: 7.8rem; opacity: 0; transition: opacity 0.5s ease, transform 0.5s ease; position: absolute;}
.var_wrap .var_box .img img{max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: cover;}
.var_wrap .var_box .text{transform: translateY(0px); transition: transform 0.5s ease; position: absolute;}
.var_wrap .var_box .text h3{font-size: 2.8rem; font-weight: 500; color: var(--white); transition: all 0.3s;}
.var_wrap .var_box .text p{margin: 1rem 0 0; font-size: 1.6rem; font-weight: 400; line-height: 1.4; color: var(--color-dfdfdf);}
.var_wrap .var_box:hover .img{opacity: 1; transform: translateY(-60px);}
.var_wrap .var_box:hover .text{transform: translateY(30px)}
/* 메인 가치 */

/* 메인 포트폴리오 */
.mainPj{margin: 20rem 0; overflow: hidden; position: relative;}
.pj_wrap{display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;}
.pj_txt h2{font-size: 5.2rem; font-weight: 600; letter-spacing: -0.04em; color: var(--black); transition: all 0.3s; text-transform: capitalize;}
.pj_txt p{font-size: 1.7rem; margin: 3rem 0 8rem; font-weight: 400; color: var(--black500); line-height: 1.4;}
.pj_wrap .navi_btn{min-width: 20rem; font-size: 1.7rem; position: relative;}
.pj_wrap .navi_btn .navi{width: 6rem; height: 6rem; line-height: 6rem; border: 1px solid var(--color-dddddd); box-sizing: border-box; border-radius: 100%; transition: all 0.3s; text-align: center; color: var(--black500); background-color: var(--white); cursor: pointer; position: absolute;}
.pj_wrap .navi_btn .navi.navi_prev{top: 50%; left: 0; transform: translate(0, -50%);}
.pj_wrap .navi_btn .navi.navi_next{top: 50%; right: 0; transform: translate(0, -50%);}
.pj_wrap .navi_btn .nav_num{font-size: 1.7rem; width: 100%; text-align: center; color: var(--black500);}
.pj_wrap .navi_btn .nav_num .swiper-pagination-current{font-size: 2.1rem; color: var(--black300);}
.pj_wrap .navi_btn .nav_num .middle{margin: 0 0.5rem;}
.pj_slide_wrap{padding-left: max(20px, calc((100% - 1600px)/2 + 20px)); opacity: 1; transition: opacity 2.5s; position: relative;}
.pj_slide_wrap .slide_swiper{position: relative; width: 100%; overflow: hidden;}
.pj_slide_wrap .slide_swiper .swiper-wrapper{align-items: flex-end;}
.pj_slide_wrap .slide_swiper .swiper-wrapper .swiper-slide{width: 60%; text-align: left; color: var(--color-343434); font-weight: 600; filter: grayscale(1); opacity: 0.4; transform: scale(0.8) translateX(-78%); transform-origin: bottom; transition: 0.7s; transition-delay: 0.1s; display: flex; align-items: center; justify-content: flex-start;}
.pj_slide_wrap .slide_swiper .swiper-wrapper .swiper-slide .img{width: 45%; padding-top: 60%; position: relative;}
.pj_slide_wrap .slide_swiper .swiper-wrapper .swiper-slide .img img{border-radius: 2rem; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; position: absolute;}
.pj_slide_wrap .slide_swiper .swiper-wrapper .swiper-slide .text{margin-left: 6rem; width: 47%; opacity: 0; transform: translateX(-10%); transition: opacity 0.7s, transform 0.7s; word-break: keep-all;}
.pj_slide_wrap .slide_swiper .swiper-wrapper .swiper-slide .text h3{font-size: 4.2rem; font-weight: 500; color: var(--black300); transition: all 0.3s;}
.pj_slide_wrap .slide_swiper .swiper-wrapper .swiper-slide .text p{margin: 3rem 0 5rem; font-size: 1.7rem; font-weight: 400; color: var(--black500); line-height: 1.4; word-break: auto-phrase;}
.pj_slide_wrap .slide_swiper .swiper-wrapper .swiper-slide .text .btn_wrap{font-size: 1.5rem; font-weight: 400; color: var(--black500);}
.pj_slide_wrap .slide_swiper .swiper-wrapper .swiper-slide .text .btn_wrap a{font-size: 1.4rem; width: 14rem; border-radius: 2.5rem; height: 4.5rem; line-height: 4.5rem; padding: 0 1.5rem; box-sizing: border-box; transition: all 0.3s; display: flex; align-items: center; justify-content: space-between; color: var(--black500); border: 1px solid var(--color-dddddd); background: var(--white);}
.pj_slide_wrap .slide_swiper .swiper-wrapper .swiper-slide .text .btn_wrap a:hover{color: var(--white); border: 1px solid var(--primary-107af2); background: var(--primary-107af2);}

.pj_slide_wrap .slide_swiper .swiper-wrapper .swiper-slide[class$="-active"]{filter: none; opacity: 1; transform: scale(1); transition: all 0.7s; transition-delay: 0s;}
.pj_slide_wrap .slide_swiper .swiper-wrapper .swiper-slide[class$="-active"] .text{opacity: 1; transform: translateX(0); transition-delay: 0.3s;}
.pj_slide_wrap .slide_swiper .swiper-wrapper .swiper-slide[class$="-next"]{transform: scale(0.8) translateX(0);}
/* 메인 포트폴리오 */

/* 메인 주요 협력사 */
.mainPart{overflow: hidden; position: relative}
.pt_txt{text-align: center;}
.pt_txt h2{font-size: 5.2rem; font-weight: 600; letter-spacing: -0.04em; color: var(--black); transition: all 0.3s;}
.pt_txt p{font-size: 1.7rem; margin: 3rem 0 8rem; font-weight: 400; color: var(--black500); line-height: 1.4; word-break: auto-phrase;}
.pt_banner{margin-bottom: 2rem; width: 100%; overflow: hidden; position: relative;}
.pt_banner .banner_list{display: flex; width: max-content; padding: 0; margin: 0; animation: slide 40s linear infinite;}
.pt_banner .banner_list.reverse{animation-direction: reverse;}
.pt_banner .banner_list li{width: 25rem; padding: 5.3rem; height: 5rem; border-radius: 2rem; margin: 0 1rem; background: var(--color-e6edf9); flex: 0 0 auto; display: flex; align-items: center; justify-content: center;}
.pt_banner .banner_list li img{vertical-align: middle; max-width: 100%; width: auto;}
/* 메인 주요 협력사 */

/* 메인 소식 */
.mainNews{margin: 20rem 0; position: relative;}
.news_txt h2{font-size: 5.2rem; font-weight: 600; letter-spacing: -0.04em; color: var(--black); transition: all 0.3s;}
.news_txt p{font-size: 1.7rem; margin: 3rem 0 8rem; font-weight: 400; color: var(--black500); line-height: 1.4;}
.news_wrap{display: flex;}
.noti{margin-right: 4rem; padding: 6rem; border-radius: 2rem; transition: all 0.3s; width: 50%; background-color: var(--color-e6edf9);}
.noti .lat_title{font-size: 1.7rem; font-weight: 400; letter-spacing: -0.04em; color: var(--black); transition: all 0.3s;}
.noti .lat_title a{width: 10rem; height: 3.6rem; line-height: 3.6rem; border-radius: 2.5rem; text-align: center; display: inline-block; color: var(--white); background-color: var(--primary-107af2);}
.noti .thumb ul li:nth-child(n+2) a{margin-bottom: 3rem; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;}
.noti .thumb ul li:nth-child(n+2) h3{font-size: 1.7rem; font-weight: 500; color: var(--black300); transition: all 0.3s; width: 75%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.noti .thumb ul li:nth-child(n+2) p{display: none;}
.noti .thumb ul li:nth-child(n+2) .lt_date{font-size: 1.7rem; font-weight: 400; color: var(--black500);}
.noti .thumb ul li:after{content:""; visibility: hidden; display: block; height: 0; clear: both;}
.noti .thumb ul li:first-of-type{margin-bottom: 4rem; border-bottom: 1px solid var(--color-dddddd);}
.noti .thumb ul li:first-of-type h3{font-size: 2.8rem; margin-top: 2.5rem; color: var(--black300); width: 100%; transition: all 0.3s}
.noti .thumb ul li:first-of-type p{font-size: 1.7rem; margin: 2rem 4.5rem 4.5rem 0; font-weight: 400; color: var(--black500); line-height: 1.4; transition: all 0.3s}
.noti .thumb ul li:first-of-type .lt_date{display: none;}
.noti .thumb ul li:last-child a{margin-bottom: 0;}
.noti .thumb ul li a:hover h3,
.noti .thumb ul li a:hover p,
.noti .thumb ul li a:hover .lt_date{color: var(--primary-107af2);}
.gall{}
.gall_list{margin-bottom: 2rem; transition: all 0.4s; position: relative; }
.gall_list ul{}
.gall_list li{margin-bottom: 1rem; margin-left: 4%; width: 48%; float: left;}
.gall_list li:nth-child(2n+1){clear: both; margin-left: 0;}
.gall_list li a{font-size: 1.9rem; margin: 2rem 0 0.5rem 0; text-align: left; font-weight: 500; color: var(--black300); display: block;}
.gall_list li a:hover{color: var(--primary-107af2);}
.gall_list li .img{margin: 1rem 0; border-radius: 2rem; display: block; overflow: hidden; position: relative;}
.gall_list li .img img{width: 100%; border-radius: 2rem; height: auto; transform: scale(1); transition: all 0.5s ease; aspect-ratio: 360/215;}
.gall_list li .img img:hover{transform: scale(1.1);}
.gall_list li .cont{margin-bottom: 1rem; font-size: 1.7rem; letter-spacing: -0.02em; font-weight: 400; color: var(--black500); margin: 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;}
/* 메인 소식 */

/* 미디어 쿼리 */
@media all and (max-width: 1640px) {
    /* 메인 포트폴리오 */
    .pj_slide_wrap .slide_swiper .swiper-wrapper .swiper-slide .text{width: 57%;}
    /* 메인 포트폴리오 */
}

@media all and (max-width: 1280px) {
    /* 메인 비주얼 */
    .mvArea .mv_list .swiper-container .swiper-slide .mv_infoArea .mv_tit h1{font-size: 4.5vw;}
    .mvArea .pagination_wrap{display: none;}
    /* 메인 비주얼 */

    /* 메인 어바웃 */
    .about_wrap{top: -15rem;}
    /* 메인 어바웃 */

    /* 메인 포트폴리오 */
    .pj_slide_wrap .slide_swiper .swiper-wrapper .swiper-slide{width: 72%;}
    /* 메인 포트폴리오 */

    /* 메인 소식 */
    .noti{padding: 4rem;}
    /* 메인 소식 */
}

/* 미디어 쿼리 */
@media all and (max-width: 1000px) {

    /* 메인 어바웃 */
    .mainAbout{margin: 10rem 0;}
    .about_txt h2{font-size: 3.6rem;}
    .about_txt p{font-size: 1.7rem; margin: 3rem 0 8rem;}
    .about_wrap{top: 0; flex-wrap: wrap;}
    .about_wrap .about_box{width: 100%;}
    .about_wrap .about_box:first-child{width: 100%; margin-right: 0;}
    .about_wrap .about_box .img{border-radius: 2rem; height: auto; max-height: 45rem;}
    .about_wrap .about_box .img img{border-radius: 2rem; width: 100%; transition: all 1s ease; object-fit: cover; aspect-ratio: unset}
    .about_wrap .about_box:last-child .img img{aspect-ratio: unset}
    .about_wrap .about_box h3{font-size: 2.2rem;}
    /* 메인 어바웃 */

    /* 메인 포트폴리오 */
    .pj_txt h2{font-size: 3.6rem;}
    .mainPj{margin: 10rem 0;}
    .pj_wrap .navi_btn{margin-bottom: 3rem;}
    .pj_slide_wrap{padding: 2rem; opacity: 1;}
    .pj_slide_wrap .slide_swiper{position: relative; width: 100%; overflow: hidden;}
    .pj_slide_wrap .slide_swiper .swiper-wrapper .swiper-slide{width: 100%; flex-wrap: wrap;}
    .pj_slide_wrap .slide_swiper .swiper-wrapper .swiper-slide .img{width: 100%; padding-top: 68%;}
    .pj_slide_wrap .slide_swiper .swiper-wrapper .swiper-slide .text{margin: 3rem 0 0 0; width: 100%;}
    .pj_slide_wrap .slide_swiper .swiper-wrapper .swiper-slide .text h3{font-size: 2.8rem;}
    /* 메인 포트폴리오 */

    /* 메인 주요 협력사 */
    .pt_txt h2{font-size: 3.6rem;}
    /* 메인 주요 협력사 */

    /* 메인 소식 */
    .mainNews{margin: 10rem 0;}
    .news_txt h2{font-size: 3.6rem;}
    .news_wrap{flex-wrap: wrap;}
    .noti{margin-right: 0; width: 100%; margin-bottom: 3rem;}
    .noti .lat_title{font-size: 1.7rem;}
    .noti .thumb ul li:nth-child(n+2) a{margin-bottom: 2rem;}
    .noti .thumb ul li:nth-child(n+2) h3{font-size: 1.7rem;}
    .noti .thumb ul li:nth-child(n+2) .lt_date{font-size: 1.5rem;}
    .noti .thumb ul li:first-of-type{margin-bottom: 4rem;}
    .noti .thumb ul li:first-of-type h3{font-size: 2.2rem;}
    .noti .thumb ul li:first-of-type p{margin: 2rem 0;}
    .gall{width: 100%;}
    .gall_list{margin-bottom: 2rem; transition: all 0.4s; position: relative; }
    .gall_list ul{display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
    .gall_list li{margin-bottom: 1rem; margin-left: 0; padding: 1%; width: 50%; float: none;}
    /* 메인 소식 */
}

@media all and (max-width: 640px) {
    /* 메인 비주얼 */
    .mvArea .mv_list .swiper-container .swiper-slide .mv_infoArea{perspective: 60rem; -webkit-perspective: 60rem; max-width: 80%;}
    .mvArea .mv_list .swiper-container .swiper-slide .mv_infoArea .mv_tit h1{font-size: 2.8rem;}
    /* 메인 비주얼 */

    /* 메인 어바웃 */
    .about_wrap .about_box .img{max-height: 24rem;}
    /* 메인 어바웃 */

    /* 메인 가치 */
    .var_txt h2{font-size: 3.6rem;}
    .var_wrap .var_box{min-width: 30rem; min-height: 30rem;}
    .var_wrap .var_box .img{width: 6.8rem; height: 6.8rem;}
    .var_wrap .var_box .text h3{font-size: 2.4rem;}
    .var_wrap .var_box .text p{font-size: 1.4rem;}
    /* 메인 가치 */

    /* 메인 소식 */
    .noti{padding: 2rem;}
    .noti .thumb ul li:nth-child(n+2) h3{width: 100%;}
    .gall_list li{width: 100%;}
    /* 메인 소식 */
}