@charset "utf-8";

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


main{ overflow: hidden; background:#1268CA; }
main .view-btn{display: flex;align-items: center;justify-content: space-between;width:200px;height:60px; border-radius: 30px;border: solid 1px #fff;background-color: rgba(255, 255, 255, 0);padding: 0 20px;font-size: 20px;font-weight: bold;letter-spacing: -0.4px;color: #fff;}
main .view-btn:after{content: "";position: relative;display: inline-block;width:16px;height:16px;background: url(/_public/images2/main/ico_view.svg) no-repeat;background-size: cover;}
main .main-title{position: relative;padding-top:25px;font-size: 65px;font-weight: normal;line-height: 1.26;letter-spacing: -1.3px;color: #fff;}
/* main .main-title:before{content: "";position: absolute;top:0;left:0;width:200px;height:4px;background: #fff;} */
main .main-title strong{font-weight: 800;}
main .main-title span{color: #1be5c3;}
main section{position: relative;}
main .section01{padding:0 0 84px;overflow: hidden;}

/* main .section01 .bg-img { position: absolute;top: 0;left: 50%;transform: translateX(-50%);max-width: initial;transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1);height: 100%;object-fit: cover;}
main .section01 .bg-img img {overflow: hidden;}
main .section01 .bg-img.animated {transform: translateX(-50%);} */


main .bg-img { width: 100%; position: absolute;top: 0;left: 50%;transform: translateX(-50%);max-width: initial;transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1); object-fit: cover;}
main .bg-img img {overflow: hidden;}
main .bg-img.animated {transform: translateX(-50%);}


/* main .section01 .box1 {position: relative;height: 100vh;display: flex;align-items: center;justify-content: center;}
main .section01 .box1 .inner{position: relative;left:-65px;}
main .section01 .box1 .layout {text-align: center;width: 100%;position: relative;} */
main .section01 .box1 { position: relative;height: auto;padding-top: 160px;}
main .section01 .box1 .inner{position: relative;left:0px;}
main .section01 .box1 .layout {width: 100%;position: relative;}
main .section01 .box1 .t1,
main .section01 .box1 .t2,
main .section01 .box1 .t3 {font-size: 140px;line-height: 1.14;letter-spacing: -2.8px;color: #fff;opacity: 0;transition: all 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);}
main .section01 .box1 .t1 {font-weight: normal;transform: translateX(calc(-50vw - 50%));}
main .section01 .box1 .t2 {font-weight: bold;transform: translateX(calc(50vw + 50%));transition-delay: 0.6s;}
main .section01 .box1 .t3 {font-weight: bold;transform: translateX(calc(-50vw - 50%));transition-delay: 1.2s;}
main .section01 .box1 .t1.animated,
main .section01 .box1 .t2.animated,
main .section01 .box1 .t3.animated {opacity: 1;transform: translateX(0);}

main .section01 .box2 {margin-top:20px;}
main .section01 .box2 .txt-box {overflow: hidden; margin-left: 5px}
main .section01 .box2 .txt-box h3 {position: absolute;font-size: 40px;font-weight: bold;letter-spacing: -1.6px;color: #fff;line-height: 1.3;margin: 0;transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);}
main .section01 .box2 .txt-box .txt-wrap {overflow: hidden;height: 105px;position: relative;}
main .section01 .box2 .txt-box .txt1 h3 {font-weight: 300;}
main .section01 .box2 .txt-wrap h3 {position: relative;transform: translateY(0);transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);}
main .section01 .box2 .txt-wrap.rolling h3 {animation: textUpRolling 4s infinite;}


/* 위아래 반복 모션 */
@keyframes upDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}


/* main .section01 .box2 {margin-top:185px;}
main .section01 .box2 .txt-box {overflow: hidden;}
main .section01 .box2 .txt-box h3 {position: absolute;font-size: 80px;font-weight: bold;letter-spacing: -1.6px;color: #fff;line-height: 1.3;margin: 0;transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);}
main .section01 .box2 .txt-box .txt-wrap {overflow: hidden;height: 105px;position: relative;}
main .section01 .box2 .txt-box .txt1 h3 {font-weight: 300;}
main .section01 .box2 .txt-wrap h3 {position: relative;transform: translateY(0);transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);}
main .section01 .box2 .txt-wrap.rolling h3 {animation: textUpRolling 4s infinite;} */
main .section01 .box3{margin-top:220px;}
main .section01 .box3 .layout{display: flex;justify-content: flex-end;}
main .section01 .box3 p{font-size: 28px;font-weight: 300;line-height: 1.36;letter-spacing: -0.56px;color: #fff;}
main .section01 .box3 a{position:relative;padding-right:26px;display: inline-block;margin-top:100px;font-size: 20px;font-weight: 500;letter-spacing: -0.4px;color: #fff;}
main .section01 .box3 a:after{content: "";position: absolute;top:6px;right:0;width:16px;height:16px;background: url(/_public/images2/main/ico_view.png) no-repeat;background-size: cover;}
main .section01.loading {overflow-x: hidden;}
main .section01 .scroll{position: absolute;left: 50%;transform: translateX(-50%);bottom:20px;animation: upDown 1.5s ease-in-out infinite;}

main .section02{padding:160px 0 110px;}
main .section02:before{content: "";position: absolute;left:0;width:100%;bottom:170px;background: url(/_public/images2/main/main_obj02.png) no-repeat;background-size: cover;padding-top: 34%;}
main .section02 .box{display: flex;margin-top: 100px;justify-content: space-between;align-items: center;}
main .section02 .box + .box{margin-top:120px;flex-direction: row-reverse;}
main .section02 .box > div{}
main .section02 .box .col1{}
main .section02 .box .col1 em{display: block;font-size: 30px;font-weight: normal;line-height: 1;letter-spacing: -0.6px;color: #fff;}
main .section02 .box .col1 h3{margin-top: 10px;font-size: 42px;font-weight: bold;line-height: 1.24;letter-spacing: -0.84px;color: #fff;}
main .section02 .box .col1 p{margin-top: 20px;font-size: 22px;font-weight: normal;line-height: 1.45;letter-spacing: -0.44px;color: #fff;}
main .section02 .box .col2{width:100%;max-width: 512px;}
main .section02 .box .col2 ul{position:relative;display: flex;justify-content: space-between;gap:20px;}
main .section02 .box .col2 ul:before{content: "";position:absolute;left:50%;top:0;transform: translateX(-50%);width:1px;height:100%;background: #5784b7;}
main .section02 .box .col2 ul li{position:relative;display: flex;flex-direction: column;align-items: center;text-align: center;}
main .section02 .box .col2 ul li i{display: flex;align-items: center;justify-content: center;width:120px;height:120px;border-radius: 100%;background: #0c2a80;}
main .section02 .box .col2 ul li i img{display:block;}
main .section02 .box .col2 ul li em{display:block;margin-top: 10px;font-size: 40px;letter-spacing: -0.8px;line-height: 1.09;text-align: center;color: #fff;}
main .section02 .box .col2 ul li em strong{display:inline-block;font-weight: bold;font-size: 55px;}
main .section02 .box .col2 ul li span{margin-top:10px;display: block;font-size: 22px;font-weight: 600;letter-spacing: -0.44px;text-align: center;color: #fff;}
main .section02 .btn-box{margin-top:90px;display: flex;justify-content: center;}
main .section03{padding:110px 0;}
main .section03 .layout:before{content: "";position: absolute;top:0;right:0;background: url(/_public/images2/main/main_obj01.png) no-repeat;background-size: cover;width: 36%;padding-top: 35.7%;}
main .section03 ul{margin-top:90px;display: flex;flex-wrap: wrap;gap:60px 20px;}
main .section03 ul li{width:calc(50% - 10px);}
main .section03 ul li i{display: inline-block;}
main .section03 ul li i img{display: block;}
main .section03 ul li h3{margin-top:20px;font-size: 38px;font-weight: bold;line-height: 1;letter-spacing: -0.76px;color: #fff;}
main .section03 ul li p{position: relative;margin-top:20px;padding-left:10px;font-size: 20px;font-weight: normal;line-height: 1.7;letter-spacing: -0.4px;color: #fff;}
main .section03 ul li p:before{content: "";position: absolute;top:16px;left:0;width:5px;height:1px;background: #fff;}
main .section03 ul li p + p{margin-top:0;}
main .section03 .btn-box{margin-top:90px;display: flex;justify-content: center;}
main .section04{padding:110px 0;}
main .section04:before{content: "";position: absolute;right:0;bottom:-14%;background: url(/_public/images2/main/main_obj03.png) no-repeat;background-size: cover;width: 30%;padding-top: 44%;}
main .section04 .portfolio-box{margin-top:80px;}
main .section04 .portfolio-box ul{display: flex;flex-wrap: wrap;gap:10px;}
main .section04 .portfolio-box ul li{position:relative;width:calc(33.3333% - 7px);}
main .section04 .portfolio-box ul li a{position:relative;display: block;width:100%;border-radius: 10px;overflow: hidden;}
main .section04 .portfolio-box ul li a img{display: block;width:100%;}
main .section04 .portfolio-box ul li .mask{position: absolute;top:0;left:0;width:100%;height: 100%;background: rgba(0, 0, 0, 0.5);padding: 70px 20px 60px;transition: all 0.3s;display: flex;flex-direction: column;align-items: center;text-align: center;opacity: 0;}
main .section04 .portfolio-box ul li .mask em{display: inline-block;line-height: 40px;padding:0 20px;border-radius: 20px;font-size: 20px;font-weight: 600;letter-spacing: -0.4px;color: #fff;}
main .section04 .portfolio-box ul li .mask .ct1{background: #4c26e9;}
main .section04 .portfolio-box ul li .mask .ct2{background: #00b5a3;}
main .section04 .portfolio-box ul li .mask .ct3{background: #1471db;}
main .section04 .portfolio-box ul li .mask h3{margin-top:25px;font-size: 30px;font-weight: 600;letter-spacing: -0.6px;text-align: center;color: #fff;}
main .section04 .portfolio-box ul li .mask p{margin-top:5px;font-size: 20px;font-weight: 500;letter-spacing: -0.4px;text-align: center;color: #ecf3fb;}
main .section04 .portfolio-box ul li .mask span{margin-top:140px;display: flex;justify-content:space-between;align-items: center;width:140px;height:50px;border-radius: 25px;background-color: rgba(0, 0, 0, 0.4);padding:0 20px;font-size: 18px;font-weight: 500;letter-spacing: -0.36px;color: #fff;}
main .section04 .portfolio-box ul li .mask span:after{content: "";position: relative;display:inline-block;width:16px;height:16px;background: url(/_public/images2/main/ico_view2.png) no-repeat;background-size: cover;}
main .section04 .portfolio-box ul li:hover .mask{opacity: 1;}
main .section04 .btn-box{margin-top:60px;display: flex;justify-content: center;}
main .section05{padding:110px 0 173px;}
main .section05 .main-title{font-weight: bold;}
main .section05 .loop-box{margin-top:80px;width: 100%;overflow: hidden;position: relative;}
main .section05 .partner-scroll-container {display: flex;animation: infiniteScroll 30s linear infinite;width: fit-content;}
main .section05 .partner-item {flex: 0 0 auto;display: flex;align-items: center;justify-content: center;margin: 0 10px;height: 100px;}
main .section05 .partner-item img {max-height: 100%;max-width: 255px;width: auto;height: auto;object-fit: contain;display: block;}
main .section05 .partner-scroll-container:hover {animation-play-state: paused;}
main .section06{padding:174px 0 344px;background-image: linear-gradient(to bottom, rgba(18, 104, 202, 0.41), rgba(27, 229, 195, 0.41));}
main .section06:before{content: "";position: absolute;top:57%;left:50%;transform:translate(-50%, -50%);background: url(/_public/images2/main/main_obj04.png) no-repeat;background-size: cover;    width: 38.13%;padding-top: 31%;}
main .section06 .main-title{padding-top: 0;}
main .section06 .main-title:before{display: none;}
main .section06 .title-box{display: flex;justify-content: space-between;}
main .section06 .title-box .txt-box{text-align: right;}
main .section06 .title-box .txt-box a{font-size: 40px;font-weight: bold;letter-spacing: -0.8px;color: #1be5c3;line-height: 1;}
main .section06 .title-box .txt-box p{font-size: 18px;font-weight: normal;letter-spacing: -0.36px;color: #fafafa;}
main .section06 .title-box .txt-box p + p{margin-top:5px;}
main .section06 .contact-box{position:relative;margin-top:78px;border-radius: 99px; border: solid 10px rgba(255,255,255,0.12);display: flex;align-items:center;justify-content: center;height:200px;}
main .section06 .contact-box a{position:relative;display: block;font-size: 110px;font-weight: 800;line-height: 1.27;letter-spacing: -2.2px;text-align: center;color: #fff;transition: all 0.3s;}
main .section06 .contact-box a .bar{position: absolute;left:0;bottom:-10px;width:100%;height:10px;}
main .section06 .contact-box a .bar span{position: absolute;left:0;top:0;width:32px;height:100%;background: #fff;transition: all 0.3s;}
main .section06 .contact-box a i{position: absolute;right: -70px;top: -19px;width:68px;height:68px;border-radius: 100%;background: #1be5c3;display: flex;align-items: center;justify-content: center;transition: all 0.3s;}
main .section06 .contact-box a i img{display: block;transition: all 0.3s;}
main .section06 .contact-box a:hover{color:#202020;}
main .section06 .contact-box a:hover .bar span{width:100%;}
main .section06 .contact-box a:hover i{width:90px;height:90px;background: #22fbd6;}
main .section06 .contact-box a:hover i img{transform: rotate(25deg);}







@media all and (max-width:1800px) {}
@media all and (max-width:1600px) {}
@media all and (max-width:1460px) {
    .layout { padding:  0 40px; word-break:keep-all; }
    main .section02 .box .col2 ul { justify-content: space-around;}
    main .section01 .box1 .inner { left: -30px}
    main .section01 .box1 .t1, main .section01 .box1 .t2, main .section01 .box1 .t3 { font-size: 100px}
    main .section01 .box2 .txt-box h3 { font-size: 70px}
}
@media all and (max-width:1280px) {
    .layout { padding:  0 30px; word-break:keep-all; }
    main .section01 { padding: 0 }
    main .section01 .box1 { }
    main .section01 .box1 .inner { left: 0}
    main .section01 .box1 .t1, main .section01 .box1 .t2, main .section01 .box1 .t3 { font-size:100px;}
    main .section01 .box2 .txt-box h3 { font-size: 52px}
    main .section01 .box3 { margin-top: 160px}
    main .section01 .box3 p { font-size: 24px}
    main .section01 .box3 a { margin-top: 40px; font-size: 16px;}
    main .section01 .scroll img { width: 20px}

    main .main-title { font-size: 52px}
    main .section02 .box .col1 h3 { font-size: 40px}
    main .section02 .box .col1 p {font-size: 20px}
    main .section02 .box .col2 ul li em { font-size: 32px}
    main .section02 .box .col2 ul li em strong { font-size: 40px}

    main .section03 ul li h3 { font-size: 32px}
    main .section03 ul li p {font-size: 18px}
    main .section06 .contact-box a { font-size: 80px}
}


@media all and (max-width:1024px) {
.layout { padding:  0 20px; word-break:keep-all; }
    main .section01 { padding: 0 }
    main .section01 .box1 { }

    main .section01 .box1 .t1, main .section01 .box1 .t2, main .section01 .box1 .t3 { font-size:52px;}
    main .section01 .box2 .txt-box h3 { font-size: 24px}
    main .section01 .box3 { margin-top: 40px}
    main .section01 .box3 p { font-size: 20px}
    main .section01 .box3 p br { display: none;}
    main .section01 .box3 a { margin-top: 40px; font-size: 16px;}
    main .section01 .scroll img { width: 20px}

    main .section02 { padding: 160px 0 100px}
    main .main-title { font-size: 32px}
    main .main-title:before { width: 100px; height: 2px}
    main .section02 .box { flex-direction: column-reverse;margin-top: 40px; }
    main .section02 .box .col2 { background: #105DB5; padding: 20px; border-radius: 10px;margin-bottom: 20px;}
    main .section02 .box .col2 ul { justify-content: space-around; }
    main .section02 .box .col2 ul li i { width: 100px; height: 100px;}
    main .section02 .box .col2 ul li em { font-weight: bold; font-size: 22px}
    main .section02 .box .col2 ul li em strong { font-size: 36px;}
    main .section02 .box .col2 ul li span { font-size: 18px; }
    main .section02 .box .col1 em { font-size: 18px;}
    main .section02 .box .col1 h3 { font-size: 23px;line-height: 1.3;}
    main .section02 .box .col1 p { font-size: 17px;}
    main .section02 .box .col1 p br { display: none;}
    main .section02 .box + .box { margin-top: 60px; display: flex; flex-direction: column-reverse;}
    main .section02:before { display: none;}
    main .view-btn { font-size: 16px; height: 55px; width: 80%}
    main .section02 .btn-box { margin-top: 40px}
    main .section03 ul { flex-direction: column; margin-top: 40px; gap: 40px 20px;}
    main .section03 ul li { width: 100%}
    main .section03 ul li h3 { font-size: 24px;margin-top: 10px;}
    main .section03 ul li p { font-size: 16px;}
    main .section03 .btn-box {  margin-top: 40px;}
    main .section04 .portfolio-box { margin-top: 40px;}
    main .section04 .portfolio-box ul li { width: calc(50% - 7px);}
    main .section04 .portfolio-box ul li .mask {position: relative;opacity: 1;padding: 15px 10px;background: rgb(0 0 0 / 36%);}
    main .section04 .portfolio-box ul li .mask h3 { font-size: 18px;margin-top: 10px;}
    main .section04 .portfolio-box ul li .mask p {font-size: 15px}
    main .section04 .portfolio-box ul li .mask em {font-size: 16px; line-height: 34px;}
    main .section04 .portfolio-box ul li .mask span { display: none;}
    main .section05 .partner-item img { max-width: 160px}
    main .section05 .loop-box { margin-top: 40px}
    main .section05 .loop-box div:last-child { margin-top: -40px }

    main .section06 { padding: 80px 0 140px}
    main .section06 .title-box { flex-direction: column; align-items: flex-start; }
    main .section06 .title-box .txt-box { text-align: left; margin-top: 30px;margin-bottom: 40px;}
    main .section06 .title-box .txt-box a {font-size: 30px}
    main .section06 .contact-box { height: 100px; border: solid 6px rgba(255, 255, 255, 0.12);margin-top: 40px;}
    main .section06 .contact-box a { font-size: 32px}
    main .section06 .contact-box a i { width: 40px; height: 40px;right: -27px; top: -34px;}
    main .section06 .contact-box a:hover i { width: 45px; height: 45px;}
    main .section06 .contact-box a i img { width: 52%}
    main .section06 .contact-box a .bar { height: 5px }
    main .section03 ul li i img { width: 52px}
}


@media all and (max-width:768px) {}
@media all and (max-width:460px) {
    /* main .section01 .box1 .inner { left: 25px} */
    main .section01 { height: 100ch;}
    main .section01 .box1 {padding-top: 250px;}
    main .section01 .box1 .t1, main .section01 .box1 .t2, main .section01 .box1 .t3 { font-size: 50px}


}

@media all and (max-width:380px) {
main .section01 .box1 .t1, main .section01 .box1 .t2, main .section01 .box1 .t3 { font-size: 48px}
}