@charset "utf-8";


/* S : header/footer motion ----------------------------------------------- */
    #wrap h1.logo {
        opacity: 0;
    }

    .intro #wrap h1.logo {
        opacity: 1;
        transition: opacity 0.7s 0.2s, background 0.3s;
    }

    #wrap header .gnb>ul>li>a {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.7s 0.5s, transform 0.7s 0.5s;
    }

    .intro #wrap header .gnb>ul>li>a {
        opacity: 1;
        transform: translateY(0);
        white-space: nowrap;
    }

    .intro #wrap header .gnb>ul>li:nth-child(2)>a {
        transition: opacity 0.7s 0.6s, transform 0.7s 0.6s;
    }

    .intro #wrap header .gnb>ul>li:nth-child(3)>a {
        transition: opacity 0.7s 0.7s, transform 0.7s 0.7s;
    }

    .intro #wrap header .gnb>ul>li:nth-child(4)>a {
        transition: opacity 0.7s 0.8s, transform 0.7s 0.8s;
    }

    .intro #wrap header .gnb>ul>li:nth-child(5)>a {
        transition: opacity 0.7s 0.9s, transform 0.7s 0.9s;
    }

    .intro #wrap header .gnb>ul>li:nth-child(6)>a {
        transition: opacity 0.7s 1s, transform 0.7s 1s;
    }

    #wrap .menu {
        width: 0;
    }

    .intro #wrap .menu {
        width: 100px;
        transition: width 0.6s 1.7s;
    }

    #wrap .menu>div span {
        width: 0;
    }

    .intro #wrap .menu>div span {
        width: 100%;
        transition: width 0.5s 2s;
    }

    .intro #wrap .menu>div span:nth-child(2) {
        transition-delay: 2.05s;
    }

    .intro #wrap .menu>div span:nth-child(3) {
        transition-delay: 2.1s;
    }

    .full_pagination>span {
        opacity: 0;
        transform: translateY(20px);
    }

    .intro .full_pagination>span {
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.7s 2.3s, transform 0.7s 2.3s;
        margin: 10px 15px 0px 0px !important;
        display: inline-block !important;
    }

    .intro .full_pagination>span:last-child {
        display: none !important;
    }

    #wrap .language a.lang {
        opacity: 0;
    }

    .intro #wrap .language a.lang {
        opacity: 1;
        transition: opacity 0.7s 2.5s;
    }
    #wrap footer {
        position: fixed;
        bottom: 0;
        left: 0;
    }
/* E : header/footer motion ----------------------------------------------- */



/* S : container ----------------------------------------------- */
    #wrap,
    #container {
        width: 100%;
        height: 100%;
        position: relative;
        /* overflow:hidden; */
    }

    #contents {
        position: relative;
    }

    #wrap .inner * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
/* E : container ----------------------------------------------- */



/* S : full_slide ----------------------------------------------- */
    #wrap,
    #container,
    #contents,
    main {
        width: 100%;
        height: 100%;
    }

    .full_slider {
        width: 100%;
        height: 100%;
        margin: 0;
        overflow: hidden;
    }

    .full_slider>.swiper-wrapper {
        display: block;
        cursor: default !important;
    }

    .full_item {
        width: auto;
        height: 100%;
        overflow: hidden;
        background: #f1f1f1;
    }

    .full_item .conwrap {
        width: 100%;
        height: 100%;
    }

    .full_item .inner {
        width: 100%;
        height: 100%;
    }

    .full_pagination {
        position: fixed;
        top: 71% !important;
        right: 66px !important;
        z-index: 10;
        transform: rotate(90deg) !important;
        transform-origin: bottom right;
        transition: top 0.8s;
    }

    .full_pagination>span {
        position: relative;
        border-radius: 0;
        width: 50px;
        height: 1px;
        background: var(--gray40);
        margin-right: 10px;
        opacity: 1;
    }

    .full_pagination>span:last-child {
        display: none;
        margin-right: 0;
    }

    .full_pagination>span>span {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        font-family: "pretendard";
        font-size: 11px;
        font-weight: 600;
        color: var(--main);
        opacity: 0;
        padding-top: 10px;
        white-space: nowrap;
    }

    .full_pagination>span.swiper-pagination-bullet-active {
        height: 2px;
        background: var(--main);
    }

    .full_pagination>span.swiper-pagination-bullet-active>span {
        opacity: 1;
    }
/* E : full_slide ----------------------------------------------- */



/* S : section ----------------------------------------------- */
    .section span.cate {
        display: block;
        font-family: "pretendard";
        font-size: 1em;
        font-weight: 600;
        color: #222;
    }

    .section strong.sec_tit {
        display: block;
        font-family: "pretendard";
        font-size: 3em;
        font-weight: 600;
        color: #222;
        line-height: 0.8;
    }

    .section b.txt1 {
        display: block;
        margin-bottom: 20px;
        font-size: 1.33em;
        font-weight: 600;
    }

    .section p.txt2 {
        font-weight: 400;
        line-height: 1.6;
        word-break: keep-all;
    }

    .section .more_btn>a {
        display: inline-block;
        font-family: "pretendard";
        font-size: 14px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.7);
        padding-right: 42px;
        background: url(/img/platform/main/more_icon_bk.png) no-repeat center right;
    }

    .section .more_btn.btn2>a {
        color: var(--white);
        background: url(/img/platform/main/more_icon2.png) no-repeat center right;
    }
/* E : section ----------------------------------------------- */



/* S : section 1 ----------------------------------------------- */
    .section1 .inner {
        width: 100%;
    }

    .section1 .main_slider {
        width: 100%;
        height: calc(100% - 110px);
        position: relative;
        top: 110px;
    }

    .section1 .main_item {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .section1 .main_item .bg {
        width: 100%;
        height: 100%;
        transform: scale(1.07);
        transition: transform 2.5s 0.2s;
        will-change: transform;
    }

    .section1 .main_item .tit {
        position: absolute;
        top: 45%;
        left: 7%;
        transform: translate(0, -50%);
        width: 94%;
        max-width: 560px;
        will-change: transform;
    }

    .section1 .main_item .tit strong {
        display: inline-block;
        color: var(--white);
        font-family: "pretendard";
        font-size: 3em;
        font-weight: 700;
        line-height: 1.3;
        margin-bottom: 20px;
        opacity: 0;
    }

    .section1 .main_item .tit strong span.char {
        display: inline-block;
        opacity: 0;
        transform: scale(1.07);
        transition: 1.5s 0.5s;
    }

    .section1 .main_item .tit strong span.char:nth-child(even) {
        transition: 1.8s 0.7s;
    }

    .section1 .main_item .tit b {
        display: block;
        font-family: "pretendard";
        font-size: 1.33em;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.9);
        overflow: hidden;
    }

    .section1 .main_item .tit p {
        margin-top: 7px;
        color: rgba(255, 255, 255, 0.9);
        font-size: 1.17em;
        font-weight: 400;
        line-height: 1.5;
        overflow: hidden;
    }

    .section1 .main_item .tit b span {
        display: block;
        transform: translateY(100%);
        transition: 0.9s 1.2s;
        will-change: transform;
    }

    .section1 .main_item .tit p span {
        display: block;
        transform: translateY(100%);
        transition: 0.9s 1.4s;
        will-change: transform;
        word-break: keep-all;
    }

    .section1 .main_paging {
        position: absolute;
        bottom: 60px;
        left: 7%;
        transform: translate(0, -20%);
        width: 94%;
        display: flex;
        align-items: center;
        z-index: 1;
    }

    .section1 .main_arrow {
        display: flex;
        align-items: center;
        margin-right: 35px;
    }

    .section1 .main_arrow>button {
        position: relative;
        width: 15px;
        height: 30px;
    }

    .section1 .main_arrow>button.main_prev {
        background: url(/img/platform/main/main_prev.png) no-repeat center / contain;
        margin-right: 40px;
    }

    .section1 .main_arrow>button.main_next {
        background: url(/img/platform/main/main_next.png) no-repeat center / contain;
    }

    .section1 .main_arrow>button.main_prev:after {
        content: "";
        position: absolute;
        top: 3px;
        right: -20px;
        width: 1px;
        height: 24px;
        background: var(--white);
        opacity: 0.3;
    }

    .section1 .main_pagination {
        display: flex;
        align-items: center;
    }

    .section1 .main_pagination>span {
        width: 6px;
        height: 6px;
        background: var(--white);
        opacity: 1;
        margin-right: 22px !important;
    }

    .section1 .main_pagination>span:last-child {
        margin-right: 0;
    }

    .section1 .main_pagination>span.swiper-pagination-bullet-active {
        background-color: transparent;
        border: 2px solid var(--white);
        box-sizing: content-box !important;
    }

    .section1 .main_item.swiper-slide-active .bg {
        transform: scale(1);
    }

    .section1 .main_item.swiper-slide-active .tit strong {
        opacity: 1;
    }

    .section1 .main_item.swiper-slide-active .tit strong span.char {
        opacity: 1;
        transform: scale(1);
    }

    .section1 .main_item.swiper-slide-active .tit b span,
    .section1 .main_item.swiper-slide-active .tit p span {
        opacity: 1;
        transform: translateY(0);
    }
/* E : section 1 ----------------------------------------------- */



/* S : section 2 ----------------------------------------------- */
    .section2 .inner {
        display: flex;
    }

    .section2 .inner>div {
        position: relative;
        width: 50%;
        height: 100%;
    }

    .section2 .inner .product_img {}

    .section2 .inner .product_img .img_item {
        overflow: hidden;
    }

    .section2 .inner .product_img .img_inner,
    .section2 .inner .product_img .img {
        width: 100%;
        height: 100%;
    }

    .section2 .inner .product_text {
        padding: 12.5% 10% 100px 6.5%;
        background: var(--gray10);
    }

    .section2 .inner .product_text:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .section2 .inner .product_text strong.sec_tit {
        margin: 5vh 0 3vh;
    }

    .section2 .inner .product_text b.txt1 {
        overflow: hidden;
    }

    .section2 .inner .product_text p.txt2 {
        overflow: hidden;
    }

    .section2 .inner .product_text b.txt1>span,
    .section2 .inner .product_text p.txt2>span {
        display: block;
        transform: translateY(100%);
    }

    .section2 .inner .product_text ul.icon_l {
        display: flex;
        margin-top: 33px;
    }

    .section2 .inner .product_text ul.icon_l li {
        width: 25%;
        text-align: center;
        padding-bottom: 9px;
        border-right: 1px solid #d8d8d8;
    }

    .section2 .inner .product_text ul.icon_l li:nth-child(1) {
        border-left: 1px solid #d8d8d8;
    }

    .section2 .inner .product_text ul.icon_l li .icon {
        height: 36px;
    }

    .section2 .inner .product_text ul.icon_l li p {
        color: #444;
        margin-top: 15px;
    }

    .section2 .inner .product_text .more {
        margin-top: 6vh;
    }

    .section2 .inner .product_text .more>a {}

    .section2 .product_paging {
        display: none;
    }

    .section2 .product_paging .product_arrow {
        display: flex;
    }

    .section2 .product_paging .product_arrow button {
        width: 68px;
        height: 68px;
        border-radius: 50%;
        margin-right: 7px;
    }

    .section2 .product_paging .product_arrow button.product_prev {
        background: #d8d8d8 url(/img/platform/main/slide_prev.png) no-repeat center;
    }

    .section2 .product_paging .product_arrow button.product_next {
        background: #15803D url(/img/platform/main/slide_next.png) no-repeat center;
    }

    .section2 .product_pagination {
        margin-left: 20px;
    }

    .section2 .product_pagination * {
        font-family: "pretendard";
        font-size: 14px;
        font-weight: 600;
        color: #555;
    }

    .section2 .product_pagination>span {
        margin: 0 2px;
    }

    .section2 .product_pagination>span.current {
        color: #222;
        font-weight: 700;
    }
/* E : section 2 ----------------------------------------------- */



/* S : section 3 ----------------------------------------------- */
    .section3 .inner {
        display: inline-flex;
        /* flex-wrap: wrap; */
        /* flex-direction:column; */
        width: auto;
        height: 100%;
    }

    .section3 .inner>div {
        height: 100%;
    }

    .section3 .left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 100px 680px 0 130px;
        width: 1335px;
        position: relative;
        background: #f1f1f1 url(/img/platform/main/bg_01.jpg) left bottom / cover;
    }

    .section3 .left:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--gray5);
    }

    .section3 .left .text_wrap strong.sec_tit {
        margin: 5vh 0 2vh;
    }

    .section3 .left .text_wrap span.cate {
        margin-bottom: 40px;
    }

    .section3 .left .text_wrap strong.sec_tit {
        line-height: 1.3;
    }

    .section3 .left .text_wrap b.txt1 span.cate {
        margin-bottom: 20px;
        overflow: hidden;
    }

    .section3 .left .text_wrap p.txt2 {
        overflow: hidden;
        line-height: 1.5;
    }

    .section3 .left .text_wrap .btn {
        margin-top: 45px;
        width: 200px;
        height: 70px;
        background: var(--main);
        border-radius: var(--rounded-m);
        opacity: 1;
    }
    .section3 .left .text_wrap .btn:hover {
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        opacity: 0.8;
    }

    .section3 .left .text_wrap .btn>a {
        color: var(--white);
        text-align: center;
        font-size: 1.17em;
        line-height: 70px;
    }

    .section3 .left .text_wrap .btn>span {
        display: block;
        font-family: "pretendard";
        font-size: 12px;
        color: var(--white);
        letter-spacing: 0.02em;
        margin-left: 18px;
    }

    .section3 .btn.btn-arrow::after {
        content: '';
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-left: 10px;
        background: url(/img/common/ico_arrow_w.svg) no-repeat center;
    }

    .section3 .right {
        display: flex;
        align-items: center;
        background: var(--gray10);
        padding-top: 100px;
        padding-right: 150px;
    }

    .section3 .right .business_slider {
        margin-left: -600px;
    }

    .section3 .right .business_l {
        display: flex;
    }

    .section3 .right .business_l>li {
        width: 450px;
        height: 650px;
        margin-right: 45px;
        border-radius: 30px 30px 0px 0px;
    }

    .section3 .right .business_l>li:last-child {
        margin-right: 0;
    }

    .section3 .right .business_l>li>a {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 30px 30px 0px 0px;
    }

    .section3 .right .business_l>li .bg {
        width: 100%;
        height: 100%;
        transition: transform 0.5s;
        border-radius: 30px 30px 0px 0px;
    }

    .section3 .right .business_l>li:hover .bg {
        transform: scale(1.05);
        border-radius: 30px 30px 0px 0px;
    }

    .section3 .right .business_l>li .text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 260px;
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 0 30px 40px;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    .section3 .right .business_l>li .text strong {
        display: block;
        font-family: "pretendard";
        font-size: 1.78em;
        font-weight: 600;
        color: var(--white);
    }

    .section3 .right .business_l>li .text .txt2 {
        margin-top: 10px;
        color: rgba(255, 255, 255, 0.8);
    }
    .section3 .right .business_l>li .text .txt2.half {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .section3 .right .business_l>li .text .txt2 li {
        width: 100%;
        margin-bottom: 5px;
    }
    .section3 .right .business_l>li .text .txt2.half li {
        width: 48%;
        margin-bottom: 5px;
    }
    .section3 .right .business_l>li .text .txt2 li::before {
        content: "";
        display: inline-block;
        width: 3px;
        height: 15px;
        margin-right: 10px;
        background: rgba(255, 255, 255, 0.5);
    }

    .section3 .right .business_l>li .text .more {
        display: inline-block;
        font-family: "pretendard";
        font-size: 14px;
        color: rgba(255, 255, 255, 0.7);
        padding-right: 42px;
        margin-top: 10px;
        background: url(/img/platform/main/more_icon2.png) no-repeat center right;
    }

    .section3 .scroll-content {
        width: 100%;
        height: 100%;
    }

    .scrollbar-track {
        display: none !important;
    }
/* E : section 3 ----------------------------------------------- */



/* S : section 4 ----------------------------------------------- */
    .section4 {
        background: #f1f1f1 url(/img/platform/main/sec6_bg.png) no-repeat center bottom / contain;
    }

    .section4 .inner {
        display: flex;
        align-items: center;
        width: 94%;
        max-width: 1530px;
        margin: 0 auto;
    }

    .section4 .inner strong.sec_tit {
        margin-top: 45px;
    }

    .section4 .inner .notice_g {
        transition: transform 0.8s;
        transition: transform 0.8s;
        width: 100%;
    }

    .section4 .inner .notice_g .top {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }

    .section4 .inner .notice_g .notice_arrow {
        display: flex;
    }

    .section4 .inner .notice_g .notice_arrow>button {
        width: 54px;
        height: 54px;
    }

    .section4 .inner .notice_g .notice_arrow>button.notice_prev {
        background: #fff url(/img/platform/main/notice_prev.png) no-repeat center;
        border: 1px solid rgba(0, 0, 0, 0.3);
        border-right: none;
    }

    .section4 .inner .notice_g .notice_arrow>button.notice_next {
        background: #15803D url(/img/platform/main/notice_next.png) no-repeat center;
        border: 1px solid #15803D;
    }


    .section4 .inner .notice_slider {
        margin-top: 40px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        position: relative;
        overflow: hidden;
        list-style: none;
        padding: 0;
        z-index: 1;
    }

    .section4 .inner .notice_item {
        width: 360px;
        margin-right: 30px;
    }

    .section4 .inner .notice_item:last-child {
        margin-right: 0;
    }

    .section4 .inner .notice_item>a {
        display: block;
        padding: 60px 30px 55px;
        background: var(--white);
        transition: background 0.3s;
    }

    .section4 .inner .notice_item>a:hover {
        background: var(--tint20);
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    }

    .section4 .inner .notice_item>a span.tag {
        display: inline-block;
        height: 27px;
        line-height: 27px;
        font-family: "pretendard";
        font-size: 12px;
        font-weight: 500;
        color: var(--white);
        padding: 0 14px;
    }

    .section4 .inner .notice_item>a strong.tit {
        display: block;
        height: 76px;
        font-size: 1.33em;
        line-height: 1.6;
        letter-spacing: -0.025em;
        margin-top: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
    }

    .section4 .inner .notice_item>a p.txt2 {
        height: 50px;
        color: var(--sub-txt);;
        margin-top: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
    }

    .section4 .inner .notice_item>a span.date {
        display: block;
        font-size: 0.89em;
        color: var(--input-txt);;
        margin-top: 23px;
    }

    .section4 .inner .notice_item>a .more {
        display: inline-block;
        font-family: "pretendard";
        font-size: 14px;
        font-weight: 500;
        color: var(--main);
        padding-right: 42px;
        margin-top: 10px;
        margin-top: 80px;
    }

    .section4 .inner .notice_item.cate1 {
        border-bottom: 3px solid var(--main);
    }

    .section4 .inner .notice_item.cate2 {
        border-bottom: 3px solid #0865b1;
    }

    .section4 .inner .notice_item.cate1>a span.tag {
        background: var(--main);
    }

    .section4 .inner .notice_item.cate1>a .more {
        background: url(/img/platform/main/more_icon3.png) no-repeat center right;
    }

    .section4 .inner .notice_item.cate2>a span.tag {
        background: #0865b1;
    }

    .section4 .inner .notice_item.cate2>a .more {
        background: url(/img/platform/main/more_icon4.png) no-repeat center right;
    }

    /* S : 빈 게시물 */
    .section4 .inner .notice_item.empty {
        height: auto;
    }

    .section4 .inner .notice_item.empty a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        text-align: center;
    }

    .section4 .inner .notice_item.empty img {
        max-height: 80px;
    }

    .section4 .inner .notice_item.empty>a strong.tit{
        height: auto;
        font-size: 18px;
    }

    .section4 .inner .notice_item.empty>a p.txt2 {
        height: unset;
        overflow: unset;
        text-overflow: unset;
        display: block;
        -webkit-line-clamp: unset;
        -webkit-box-orient: unset;
        word-wrap: break-word;
        font-size: 16px;
    }
    /* E : 빈 게시물 */

    /* E : section 4 ----------------------------------------------- */



/* S : motion ----------------------------------------------- */
    /* S : section 1 */
        .section1 .main_paging {
            opacity: 0;
            transform: translate(0, 30px);
        }

        .intro .section1 .main_paging {
            opacity: 1;
            transform: translate(0, 0);
            transition: 0.7s 1.5s;
        }
    /* E : section 1 */


    /* S: section 2 */
        .section2 .inner .product_img:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
        }

        .section2.on .inner .product_img:before {
            width: 0;
            transition: 0.9s 0.4s;
        }

        .section2 .inner .product_img .img {
            transform: scale(1.07);
            transition: 1.5s 0.7s;
        }

        .section2.on .inner .product_img .img_item.swiper-slide-active .img {
            transform: scale(1);
        }

        .section2 span.cate .char {
            display: inline-block;
            opacity: 0;
            transform: translateY(30px);
            transition: 0.9s;
            transition-delay: calc(0.4s + var(--char-index) * 15ms);
            will-change: transform;
        }

        .section2 strong.sec_tit .char {
            display: inline-block;
            opacity: 0;
            transform: translateY(30px);
            transition: 0.9s;
            transition-delay: calc(0s + var(--char-index) * 15ms);
            will-change: transform;
        }

        .section2 b.txt1>span {
            transition: 0.9s;
            will-change: transform;
        }

        .section2 .product_text p.txt2>span {
            transition: 0.9s;
            will-change: transform;
        }

        .section2.on span.cate .char {
            opacity: 1;
            transform: translateY(0);
        }

        .section2.on .product_text .text_item.swiper-slide-active strong.sec_tit .char {
            opacity: 1;
            transform: translateY(0);
            transition-delay: calc(0.6s + var(--char-index) * 15ms);
        }

        .section2.on .product_text .text_item {
            background: var(--gray10);
        }

        .section2.on .product_text .text_item.swiper-slide-active b.txt1>span {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 0.8s;
        }

        .section2.on .product_text .text_item.swiper-slide-active p.txt2>span {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 1s;
        }

        .section2 .product_text ul.icon_l li {
            opacity: 0;
            transition: 0.8s;
        }

        .section2.on .product_text .text_item.swiper-slide-active ul.icon_l li {
            opacity: 1;
            transition: 1.5s 1.5s;
        }

        .section2 .product_text .more {
            opacity: 0;
            transform: translateY(20px);
            transition: 0.9s;
        }

        .section2.on .product_text .text_item.swiper-slide-active .more {
            opacity: 1;
            transform: translateY(0);
            transition-delay: 1.6s;
        }

        .section2 .product_text .product_paging {
            opacity: 0;
            transform: translateY(20px);
            transition: 0.9s 1.8s;
        }

        .section2.on .product_text .product_paging {
            opacity: 1;
            transform: translateY(0);
        }
    /* S: section 2 */


    /* S: section 3 */
        .section3.on .left:before {
            width: 0;
            transition: width 0.8s 0.4s;
        }

        .section3 .left .text_wrap span.cate .char {
            display: inline-block;
            opacity: 0;
            transform: translateY(30px);
            transition: 0.9s;
            transition-delay: calc(0.6s + var(--char-index) * 15ms);
            will-change: transform;
        }

        .section3 .left .text_wrap strong.sec_tit .char {
            display: inline-block;
            opacity: 0;
            transform: translateY(30px);
            transition: 0.9s;
            transition-delay: calc(0.8s + var(--char-index) * 15ms);
            will-change: transform;
        }

        .section3 .left .text_wrap p.txt2>span {
            display: block;
            transform: translateY(100%);
            transition: 0.9s 1s;
            will-change: transform;
        }

        .section3.on .left .text_wrap span.cate .char,
        .section3.on .left .text_wrap strong.sec_tit .char,
        .section3.on .left .text_wrap p.txt2>span,
        .section3.on .left .text_wrap .btn {
            opacity: 0.9;
            transform: translateY(0);
        }

        .section3 .right .business_l>li>a {
            width: 0;
        }

        .section3.on .right .business_l>li>a {
            width: 100%;
            transition: 0.7s 1.4s;
        }

        .section3.on .right .business_l>li:nth-child(2)>a {
            transition-delay: 1.6s;
        }

        .section3 .right .business_l>li .text strong {
            opacity: 0;
            transform: translateY(20px);
            transition: 0.9s 1.7s;
            will-change: transform;
        }

        .section3 .right .business_l>li .text p.txt2 {
            opacity: 0;
            transform: translateY(20px);
            transition: 0.9s 1.9s;
            will-change: transform;
        }

        .section3 .right .business_l>li .text .more {
            opacity: 0;
            transform: translateY(20px);
            transition: 0.9s 2.1s;
            will-change: transform;
        }

        .section3 .right .business_l>li:nth-child(2) .text strong {
            transition-delay: 1.9s;
        }

        .section3 .right .business_l>li:nth-child(2) .text p.txt2 {
            transition-delay: 2.1s;
        }

        .section3 .right .business_l>li:nth-child(2) .text .more {
            transition-delay: 2.3s;
        }

        .section3.on .right .business_l>li .text strong,
        .section3.on .right .business_l>li .text p.txt2,
        .section3.on .right .business_l>li .text .more {
            opacity: 1;
            transform: translateY(0);
        }
    /* E: section 3 */


    /* S: section 4 */
        .section4 span.cate .char {
            display: inline-block;
            opacity: 0;
            transform: translateY(30px);
            transition: 0.9s;
            transition-delay: calc(0.4s + var(--char-index) * 15ms);
            will-change: transform;
        }

        .section4 strong.sec_tit .char {
            display: inline-block;
            opacity: 0;
            transform: translateY(30px);
            transition: 0.9s;
            transition-delay: calc(0.6s + var(--char-index) * 15ms);
            will-change: transform;
        }

        .section4.on span.cate .char,
        .section4.on strong.sec_tit .char {
            opacity: 1;
            transform: translateY(0);
        }

        .section4 .inner .notice_g .notice_arrow {
            opacity: 0;
            transform: translateY(30px);
            transition: 0.9s 0.6s;
        }

        .section4.on .inner .notice_g .notice_arrow {
            opacity: 1;
            transform: translateY(0);
        }

        .section4 .inner .notice_item {
            opacity: 0;
            transform: translateY(30px);
            transition: 0.9s 0.8s;
            will-change: transform;
        }

        .section4 .inner .notice_item:nth-child(2) {
            transition-delay: 0.95;
        }

        .section4 .inner .notice_item:nth-child(3) {
            transition-delay: 1.1s;
        }

        .section4 .inner .notice_item:nth-child(4) {
            transition-delay: 1.25s;
        }

        .section4.on .inner .notice_item {
            opacity: 1;
            transform: translateY(0);
        }
    /* E: section 4 */
/* E : motion ----------------------------------------------- */



/* S : mediaquery ----------------------------------------------- */
    @media screen and (max-width: 1079px) {
        .section1 .main_slider {
            height: calc(100% - 70px);
            top: 70px;
        }
    }
    @media screen and (max-width: 870px) {
        .section2 .inner .product_text {
            width: 55%;
            padding: 8% 7% 100px 4.5%;
        }

        .section2 .inner .product_text strong.sec_tit {
            margin: 4.5vh 0 2vh;
            font-size: 45px;
        }

        .section2 .inner .product_text b.txt1 {
            font-size: 1em;
        }

        .section2 .inner .product_text .more {
            margin-top: 3vh;
        }

        .section2 .inner .product_img {
            width: 45%;
        }

        .section2 .product_paging {
            left: 8.5%;
            bottom: 50px;
        }
    }
/* E : mediaquery ----------------------------------------------- */