@charset "UTF-8";
/****************************************/
/* Name: Saltlux
/* PART: CONTENTS STYLE 
/* Version: 1.0 / day: 2024-03-12
/****************************************/

/* 메인 */
.main {
    position: relative;
    overflow: hidden;
}

.main h2 {
    margin-bottom: 6rem;
    text-align: center;
    line-height: 1.4;
    font-size: 4rem;
}

.main section:not(.visual) {
    padding: 18rem 0 0;
}

.main .main_content {
    position: relative;
    padding-bottom: 18rem;
}
.mo {
        display: none;
    }
    
@media (max-width: 1180px) {
    .main section:not(.visual) {
        padding: calc(100vw * (180 / 1180)) 0 0;
    }

    .main h2 {
        margin-bottom: calc(100vw * (60 / 1180));
        font-size: calc(100vw * (40 / 1180));
    }

    .main .main_content {
        padding-bottom: calc(100vw * (180 / 1180));
    }
    
    .mo {
        display: none;
    }
}

@media (max-width: 767px) {
    .main section:not(.visual, .banner) {
        padding: calc(100vw * (180 / 767)) 0 0;
    }

    .main h2 {
        margin-bottom: calc(100vw * (72 / 767));
        font-size: calc(100vw * (56 / 767));
    }

    .main h2 br {
        display: none;
    }

    .main .main_content {
        padding-bottom: calc(100vw * (180 / 767));
    }
}

/* visual */
.main .visual .swiper_visual {
    position: relative;
    height: 72rem;
}

.main .visual .swiper_visual::after {
    content: "scroll down";
    position: absolute;
    left: 50%;
    bottom: 3.4rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.4rem;
    font-weight: 600;
    opacity: 0.6;
    transform: translateX(-50%);
    z-index: 1;
}

.main .visual .swiper_visual .swiper-slide video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main .visual .swiper_visual .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main .visual .swiper_visual .hgroup {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    padding: 0 14rem;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
}

.main .visual .swiper_visual .hgroup .title {
    outline: none;
    display: inline-block;
    line-height: 1.2;
    font-size: 3rem;
    background: linear-gradient(315deg, #0097F6 0%, #09DD8D 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    padding: 1px;
    clip-path: inset(1px);
    opacity: 0;

}

.main .visual .swiper_visual .swiper-slide-active .hgroup .title {
    opacity: 1;
}

.main .visual .swiper_visual .hgroup.typed .txt {
    display: none;
}

.main .visual .swiper_visual .hgroup p {
    margin-top: 2.4rem;
    color: #fff;
    line-height: 1.4;
    font-size: 5rem;
    font-weight: 700;
    opacity: 0;
}

.main .visual .swiper_visual .swiper-slide-active .hgroup p {
    opacity: 1;
}

/* 애니메이션 추가 */
.main .visual .swiper_visual .hgroup.animation .motion {
    overflow: hidden;
}

.main .visual .swiper_visual .swiper-slide-active .hgroup.animation .title {
    animation: fadeInUp 1s both;
}

.main .visual .swiper_visual .swiper-slide-active .hgroup.animation p {
    animation: fadeInUp 1s both;
    animation-delay: .5s;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 50px, 0);
    }

    100% {
        opacity: 1;
        transform: none;
    }
}



/* 커서 스타일 */
.main .visual .swiper_visual .hgroup .typing::after {
    content: "";
    display: inline-block;
    width: .2rem;
    height: 4rem;
    margin-left: .3rem;
    transform: translateY(.3rem);
    background: #fff;
    animation: blink 1.5s infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.main .visual .swiper_visual .hgroup .typed-cursor {
    display: none;
}

.main .visual .swiper_visual .swiper-pagination {
    position: absolute;
    left: 2.6rem;
    bottom: 9.5rem;
    width: auto;
    transform: rotate(90deg);
}

.main .visual .swiper_visual .swiper-pagination-bullet {
    position: relative;
    width: .6rem;
    height: .6rem;
    margin: 0 .4rem;
    background: rgba(255, 255, 255, .4);
    opacity: 1;
    transition: all .1s;
}

.main .visual .swiper_visual .swiper-pagination-bullet-active {
    margin: 0 .9rem;
    background: none;
}

.main .visual .swiper_visual .spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 16px;
    height: 16px;
    border: 4px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(320deg);
    clip-path: circle(50% at 50% 50%);
    opacity: 0;
    transition: all .1s;
}

.main .visual .swiper_visual .spinner::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    inset: -4px;
    border-radius: 50%;
    background: linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
    clip-path: circle(100% at 50% 50%);
    -webkit-mask: radial-gradient(5px, transparent 95%, #000) 0 0;
    mask: radial-gradient(5px, transparent 95%, #000) 0 0;
    opacity: 0;
}

.main .visual .swiper_visual .swiper-pagination-bullet-active .spinner {
    opacity: 1;
}

.main .visual .swiper_visual .swiper-pagination-bullet-active .spinner::after {
    opacity: 1;
    animation: spinner 5.5s linear;
}

@keyframes spinner {
    0% {
        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
    }

    25% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
    }

    50% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
    }

    75% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
    }

    100% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
    }
}

@media (max-width: 1180px) {
    .main .visual .swiper_visual {
        height: calc(100vw * (1000 / 1180));
    }

    .main .visual .swiper_visual::after {
        display: none;
    }

    .main .visual .swiper_visual .hgroup {
        padding: 0 calc(100vw * (140 / 1180));
    }

    .main .visual .swiper_visual .hgroup br {
        display: none;
    }

    .main .visual .swiper_visual .hgroup .title {
        font-size: calc(100vw * (30 / 1180));
        text-shadow: none;
    }

    .main .visual .swiper_visual .hgroup p {
        margin-top: calc(100vw * (48 / 1180));
        font-size: calc(100vw * (50 / 1180));

    }

    /* 커서 스타일 */
    .main .visual .swiper_visual .hgroup .typing::after {
        width: calc(100vw * (3 / 1180));
        height: calc(100vw * (40 / 1180));
        margin-left: calc(100vw * (5 / 1180));
        transform: translateY(calc(100vw * (1 / 1180)));
    }

    .main .visual .swiper_visual .swiper-pagination {
        left: 50%;
        bottom: calc(100vw * (40 / 1180));
        transform: translateX(-50%) rotate(0);
    }

    .main .visual .swiper_visual .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        margin: 0 2px;
    }

    .main .visual .swiper_visual .swiper-pagination-bullet-active {
        margin: 0 6px;
    }

    .main .visual .swiper_visual .spinner {
        width: 16px;
        height: 16px;
        ;
        border-width: 3px;
        transform: translate(-50%, -50%) rotate(50deg);
    }

    .main .visual .swiper_visual .spinner::after {
        inset: -3px;
        -webkit-mask: radial-gradient(5px, transparent 95%, #000) 0 0;
        mask: radial-gradient(5px, transparent 95%, #000) 0 0;
    }
}

@media (max-width: 767px) {
    .main .visual .swiper_visual {
        height: calc(100vw * (1000 / 767));
    }

    .main .visual .swiper_visual .hgroup {
        padding: 0 calc(100vw * (48 / 767));
    }

    .main .visual .swiper_visual .hgroup .title {
        font-size: calc(100vw * (44 / 767));
    }

    .main .visual .swiper_visual .hgroup p {
        margin-top: calc(100vw * (48 / 767));
        font-size: calc(100vw * (64 / 767));

    }

    .main .visual .swiper_visual .hgroup .typing br {
        display: none;
    }

    /* 커서 스타일 */
    .main .visual .swiper_visual .hgroup .typing::after {
        width: calc(100vw * (3 / 767));
        height: calc(100vw * (52 / 767));
        margin-left: calc(100vw * (5 / 767));
        transform: translateY(calc(100vw * (5 / 767)));
    }

    .main .visual .swiper_visual .swiper-pagination {
        bottom: calc(100vw * (64 / 767));
    }

    .main .visual .swiper_visual .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        margin: 0 5px;
    }

    .main .visual .swiper_visual .swiper-pagination-bullet-active {
        margin: 0 16px;
    }

    .main .visual .swiper_visual .spinner {
        width: 36px;
        height: 36px;
        border-width: 6px;
    }

    .main .visual .swiper_visual .spinner::after {
        inset: -6px;
        -webkit-mask: radial-gradient(12px, transparent 95%, #000) 0 0;
        mask: radial-gradient(12px, transparent 95%, #000) 0 0;
    }

}

@media (max-width: 480px) {
    .main .visual .swiper_visual .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        margin: 0 2px;
    }

    .main .visual .swiper_visual .swiper-pagination-bullet-active {
        margin: 0 7px;
    }

    .main .visual .swiper_visual .spinner {
        width: 18px;
        height: 18px;
        border-width: 3px;
    }

    .main .visual .swiper_visual .spinner::after {
        inset: -3px;
        -webkit-mask: radial-gradient(6px, transparent 95%, #000) 0 0;
        mask: radial-gradient(6px, transparent 95%, #000) 0 0;
    }

}

/* scroll menu*/
.scroll_menu {
    position: absolute;
    left: 6rem;
    top: 18rem;
    z-index: 10;
}

.scroll_menu.fixed {
    position: fixed;
}

.scroll_menu li {
    margin-top: 1.6rem;
}

.scroll_menu li a {
    position: relative;
    padding-right: 3.2rem;
    text-transform: uppercase;
    color: rgba(17, 17, 17, .2);
    font-size: 1.6rem;
    font-weight: 600;
}

.scroll_menu li.on a {
    color: #0097F6;
    font-weight: 700;
}

.scroll_menu li.on a::before {
    content: "";
    position: absolute;
    right: 1.3rem;
    top: 50%;
    width: 1rem;
    height: 1rem;
    background: #09DD8D;
    transform: translateY(-50%);
}

.scroll_menu li.on a::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: .9rem;
    height: .9rem;
    background: #0097F6;
    transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 1880px) {
    .scroll_menu {
        display: none;
    }
}

/* business */
.main .swiper_business {
    position: relative;
}

.main .business .swiper-slide {
    width: 100rem;
}

.main .business .hgroup {
    position: relative;
    height: 42rem;
}

.main .business .hgroup img.mo {
    display: none;
}

.main .business .title {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 37rem;
    height: 23.4rem;
    padding: 3rem 4rem 3.6rem 3rem;
}

.main .business .title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
    clip-path: polygon(100% 0, 100% 84%, 89% 100%, 0 100%, 0 0);
    opacity: .8;
}

.main .business .title .paging {
    position: relative;
    display: flex;
    align-items: end;
    z-index: 1;
}

.main .business .title .paging .current {
    color: #fff;
    font-size: 2.4rem;
    font-weight: 600;
}

.main .business .title .paging .total {
    position: relative;
    margin-left: .7rem;
    padding-left: 1.1rem;
    color: #CDECFF;
    opacity: .6;
    font-size: 1.6rem;
}

.main .business .title .paging .total::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: .6rem;
    height: 1.1rem;
    background: url("../images/main/ico_business_slash.svg") no-repeat left top;
    transform: translateY(-50%);
}

.main .business .title .txt {
    position: relative;
    color: #fff;
    line-height: 1.4;
    font-size: 2.4rem;
    font-weight: 600;
    z-index: 1;
}

.main .business .explain {
    display: flex;
    gap: 8rem;
    margin-top: 4rem;
}

.main .business .explain h3 {
    overflow: hidden;
    height: 8.8rem;
    flex-basis: 35%;
    line-height: 1.4;
    font-size: 3.4rem;
    background: linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.main .business .explain .right {
    flex-basis: 65%;
}

.main .business .explain .right .txt {
    color: #111;
    line-height: 1.45;
    font-size: 2.2rem;
    font-weight: 600;
}

.main .business .explain .hash_list {
    overflow: hidden;
    margin-top: 1.6rem;
    margin-left: -.8rem;
}

.main .business .explain .hash_list li {
    float: left;
    margin-top: 1.2rem;
    margin-left: .8rem;
    color: #555;
    font-size: 1.8rem;
    font-weight: 500;
}

.main .business .swiper_top [class^="swiper-button"] {
    width: 2.4rem;
    height: 4.8rem;
    margin: 0;
    background: none;
}

.main .business .swiper_top [class^="swiper-button"]::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("../images/main/ico_business_arrow01.svg") no-repeat left top / 100% 100%;
}

.main .business .swiper_top .swiper-button-next::after {
    transform: rotate(180deg);
}

.main .business .swiper_top .swiper-button-prev {
    top: 18.6rem;
    left: 7.8rem;
}

.main .business .swiper_top .swiper-button-next {
    right: 7.8rem;
    top: 18.6rem;
}

.main .business .swiper_bottom {
    width: 1000px;
    position: relative;
    top: -108px;
    margin: 0 auto;
    z-index: 10;
}

.main .business .swiper_bottom .swiper_bottom_inner {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.main .business .swiper_bottom [class^="swiper-button"] {
    position: relative;
    left: auto;
    right: auto;
    width: 1.3rem;
    height: 2rem;
    margin: 0;
    background: none;
}

.main .business .swiper_bottom [class^="swiper-button"]::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("../images/main/ico_business_arrow02.svg") no-repeat left top / 100% 100%;
    transition: all .2s;
}

.main .business .swiper_bottom .swiper-button-next::after {
    transform: rotate(180deg);
}

.main .business .swiper_bottom .swiper-pagination {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main .business .swiper_bottom .swiper-pagination-bullet {
    position: relative;
    width: .6rem;
    height: .6rem;
    margin: 0 .4rem;
    background: #D9D9D9;
    opacity: 1;
    transition: all .1s;
}

.main .business .swiper_bottom .swiper-pagination-bullet-active {
    margin: 0 .9rem;
    background: none;
}

.main .business .swiper_bottom .swiper-pagination-bullet-active .spinner {
    opacity: 1;
}

.main .business .swiper_bottom .swiper-pagination-bullet-active .spinner::after {
    opacity: 1;
    animation: spinner 4s linear;
}

.main .business .swiper_bottom .spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 16px;
    height: 16px;
    border: 4px solid #D9D9D9;
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(48deg);
    clip-path: circle(50% at 50% 50%);
    opacity: 0;
    transition: all .1s;
}

.main .business .swiper_bottom .spinner::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    inset: -4px;
    border-radius: 50%;
    background: linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
    clip-path: circle(100% at 50% 50%);
    -webkit-mask: radial-gradient(5px, transparent 95%, #000) 0 0;
    mask: radial-gradient(5px, transparent 95%, #000) 0 0;
    opacity: 0;
}

/* business slide animation */
.main .business .swiper-slide :is(.hgroup .title, .hgroup .txt, .explain) {
    visibility: hidden;
    opacity: 0;
    transition: opacity .2s .2s;
}

.main .business .swiper-slide-active :is(.hgroup .title, .hgroup .txt, .explain) {
    visibility: visible;
    opacity: 1;
}

/* only pc */
@media (min-width: 1181px) {
    .main .business .swiper_bottom [class^="swiper-button"]:hover::after {
        background-image: url("../images/main/ico_business_arrow02_hover.svg");
    }
}

@media (max-width: 1180px) {
    .main .business .inner {
        padding: 0;
    }

    .main .business .swiper-slide {
        width: calc(100vw * (1000 / 1180));
    }

    .main .business .hgroup {
        height: calc(100vw * (420 / 1180));
    }

    .main .business .title {
        width: calc(100vw * (370 / 1180));
        height: calc(100vw * (234 / 1180));
        padding: calc(100vw * (30 / 1180)) calc(100vw * (40 / 1180)) calc(100vw * (30 / 1180)) calc(100vw * (30 / 1180));
    }

    .main .business .title .paging .current {
        font-size: calc(100vw * (24 / 1180));
    }

    .main .business .title .paging .total {
        margin-left: calc(100vw * (7 / 1180));
        padding-left: calc(100vw * (11 / 1180));
        font-size: calc(100vw * (16 / 1180));
    }

    .main .business .title .paging .total::before {
        content: "/";
        top: 0;
        bottom: 0;
        margin-top: calc(100vw * (1 / 1180));
        background: none;
        transform: none;
        font-size: calc(100vw * (12 / 1180));
        font-weight: 500;
    }

    .main .business .title .txt {
        font-size: calc(100vw * (24 / 1180));
    }

    .main .business .explain {
        gap: calc(100vw * (165 / 1180));
        margin-top: calc(100vw * (40 / 1180));
    }

    .main .business .explain h3 {
        flex-basis: 35%;
        font-size: calc(100vw * (34 / 1180));
    }

    .main .business .explain .right .txt {
        font-size: calc(100vw * (22 / 1180));
    }

    .main .business .explain .hash_list {
        margin-top: calc(100vw * (16 / 1180));
        margin-left: calc(100vw * (-8 / 1180));
    }

    .main .business .explain .hash_list li {
        margin-top: calc(100vw * (12 / 1180));
        margin-left: calc(100vw * (8 / 1180));
        font-size: calc(100vw * (18 / 1180));
    }

    .main .business .swiper_top [class^="swiper-button"] {
        display: none;
    }

    .main .business .swiper_bottom {
        width: calc(100vw * (1000 / 1180));
        position: relative;
        top: calc(100vw * (-108 / 1180));
    }

    .main .business .swiper_bottom .swiper_bottom_inner {
        gap: calc(100vw * (11 / 1180));
    }

    .main .business .swiper_bottom [class^="swiper-button"] {
        width: calc(100vw * (13 / 1180));
        height: calc(100vw * (20 / 1180));
    }

    .main .business .swiper_bottom .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        margin: 0 4px;
    }

    .main .business .swiper_bottom .swiper-pagination-bullet-active {
        margin: 0 9px;
    }

    .main .business .swiper_bottom .spinner {
        width: 16px;
        height: 16px;
        border-width: 3px;
    }

    .main .business .swiper_bottom .spinner::after {
        inset: -3px;
        -webkit-mask: radial-gradient(5px, transparent 95%, #000) 0 0;
        mask: radial-gradient(5px, transparent 95%, #000) 0 0;
    }
}

@media (max-width: 767px) {
    .main .business .inner {
        padding: 0 calc(100vw * (48 / 767))
    }

    .main .business {
        width: 100%;
    }

    .main .business .swiper-slide {
        width: 100%;
    }

    .main .business .hgroup {
        height: calc(100vw * (840 / 767));
    }

    .main .business .hgroup img.pc {
        display: none;
    }

    .main .business .hgroup img.mo {
        display: block;
        width: 100%;
        height: 100%;
        box-shadow: 0px calc(100vw * (8 / 767)) calc(100vw * (80 / 767)) rgba(62, 176, 191, 0.10);
    }

    .main .business .title {
        top: auto;
        bottom: 0;
        width: calc(100vw * (554 / 767));
        height: calc(100vw * (370 / 767));
        padding: calc(100vw * (50 / 767));
    }

    .main .business .title::before {
        background: linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
        clip-path: polygon(93% 0, 100% 11%, 100% 100%, 0 100%, 0 0);
    }

    .main .business .title .paging {
        position: relative;
        width: fit-content;
        padding: 0 calc(100vw * (45 / 767));
    }

    .main .business .title .paging::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: calc(100vw * (21 / 767));
        height: calc(100vw * (36 / 767));
        background: url("../images/main/ico_business_arrow_m.svg") no-repeat left top / 100% 100%;
        transform: translateY(-50%);
    }

    .main .business .title .paging::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        width: calc(100vw * (21 / 767));
        height: calc(100vw * (36 / 767));
        background: url("../images/main/ico_business_arrow_m.svg") no-repeat left top / 100% 100%;
        transform: translateY(-50%) rotate(180deg);
    }

    .main .business .title .paging .current {
        font-size: calc(100vw * (40 / 767));
    }

    .main .business .title .paging .total {
        margin-left: calc(100vw * (17 / 767));
        padding-left: calc(100vw * (22 / 767));
        font-size: calc(100vw * (28 / 767));
    }

    .main .business .title .paging .total::before {
        font-size: calc(100vw * (24 / 767));
    }

    .main .business .title .txt {
        font-size: calc(100vw * (40 / 767));
    }

    .main .business .explain {
        display: block;
        margin-top: calc(100vw * (72 / 767));
    }

    .main .business .explain h3 {
        height: auto;
        font-size: calc(100vw * (56 / 767));
    }

    .main .business .explain .right .txt {
        margin-top: calc(100vw * (52 / 767));
        font-size: calc(100vw * (36 / 767));
    }

    .main .business .explain .hash_list {
        margin-top: calc(100vw * (36 / 767));
        margin-left: calc(100vw * (-16 / 767));
    }

    .main .business .explain .hash_list li {
        margin-top: calc(100vw * (20 / 767));
        margin-left: calc(100vw * (16 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .main .business .swiper_top [class^="swiper-button"] {
        display: none;
    }

    .main .business .swiper_bottom {
        position: static;
        width: 100%;
        text-align: center;
        margin-top: calc(100vw * (52 / 767));
        padding-bottom: calc(100vw * (10 / 767));
    }

    .main .business .swiper_bottom .swiper_bottom_inner {
        justify-content: center;
    }

    .main .business .swiper_bottom [class^="swiper-button"] {
        display: none;
    }

    .main .business .swiper_bottom .swiper-pagination {
        display: block;
    }

    .main .business .swiper_bottom .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        margin: 0 5px;
    }

    .main .business .swiper_bottom .spinner {
        width: 36px;
        height: 36px;
        border-width: 6px;
    }

    .main .business .swiper_bottom .swiper-pagination-bullet-active {
        margin: 0 16px;
    }

    .main .business .swiper_bottom .spinner::after {
        inset: -6px;
        -webkit-mask: radial-gradient(12px, transparent 95%, #000) 0 0;
        mask: radial-gradient(12px, transparent 95%, #000) 0 0;
    }

}

@media (max-width: 480px) {
    .main .business .swiper_bottom .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        margin: 0 2px;
    }

    .main .business .swiper_bottom .spinner {
        width: 18px;
        height: 18px;
        border-width: 3px;
    }

    .main .business .swiper_bottom .swiper-pagination-bullet-active {
        margin: 0 7px;
    }

    .main .business .swiper_bottom .spinner::after {
        inset: -3px;
        -webkit-mask: radial-gradient(6px, transparent 95%, #000) 0 0;
        mask: radial-gradient(6px, transparent 95%, #000) 0 0;
    }

}


/* product */
.main .product .product_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(34.5rem, auto);
    gap: 2rem;
}

.main .product .product_list li.type01 {
    grid-row: 1 / 3;
}

.main .product .product_list li.type02 {
    grid-column: 2 / span 3;
}

.main .product .product_list li.type04 {
    grid-column: span 2;
}

.main .product .product_list li .content .txt {
    color: #fff;
    line-height: 1.6;
    font-size: 1.9rem;
    font-weight: 500;
}

.main .product .product_list li .title .mo {
    display: none;
}

.main .product .product_list li .bg .mo {
    display: none;
}

@media (max-width: 1180px) {
    .main .product .product_list {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: minmax(calc(100vw * (346 / 1180)), auto);
        gap: calc(100vw * (20 / 1180));
    }

    .main .product .product_list li .content .txt {
        font-size: calc(100vw * (20 / 1180));
    }

    .main .product .product_list li .cover {
        display: none !important;
    }

    .main .product .product_list li.type01 {
        grid-row: 2 / 4;
    }

    .main .product .product_list li.type02 {
        grid-column: span 2;
    }

    .main .product .product_list li.type04 {
        grid-column: span 2;
    }

    .main .product .product_list li:nth-child(1) {
        order: 3;
    }

    .main .product .product_list li:nth-child(2) {
        order: 1;
    }

    .main .product .product_list li:nth-child(3) {
        order: 2;
    }

    .main .product .product_list li:nth-child(4) {
        order: 4;
    }

    .main .product .product_list li:nth-child(5) {
        order: 7;
    }

    .main .product .product_list li:nth-child(6) {
        order: 5;
    }

    .main .product .product_list li:nth-child(7) {
        order: 6;
    }

    .main .product .product_list li:nth-child(8) {
        order: 8;
    }

    .main .product .product_list li:nth-child(9) {
        order: 9;
    }

    .main .product .product_list li:nth-child(10) {
        order: 10;
    }
}

@media (max-width: 767px) {
    .main .product .product_list {
        display: flex;
        flex-direction: column;
        gap: calc(100vw * (24 / 767));
    }

    .main .product .product_list li {
        height: calc(100vw * (436 / 767));
    }

    .main .product .product_list li .content .txt {
        font-size: calc(100vw * (32 / 767));
    }

    .main .product .product_list li.type02 .content .txt {
        display: none;
    }

    .main .product .product_list li.type02 {
        height: calc(100vw * (260 / 767));
    }

    .main .product .product_list li:nth-child(1) {
        order: 2;
    }

    .main .product .product_list li:nth-child(2) {
        order: 1;
    }

    .main .product .product_list li:nth-child(3) {
        order: 3;
    }

    .main .product .product_list li:nth-child(4) {
        order: 4;
    }

    .main .product .product_list li:nth-child(5) {
        order: 5;
    }

    .main .product .product_list li:nth-child(6) {
        order: 6;
    }

    .main .product .product_list li:nth-child(7) {
        order: 7;
    }

    .main .product .product_list li:nth-child(8) {
        order: 8;
    }

    .main .product .product_list li:nth-child(9) {
        order: 9;
    }

    .main .product .product_list li:nth-child(10) {
        order: 10;
    }

    .main .product .product_list li .title .pc {
        display: none !important;
    }

    .main .product .product_list li .title .mo {
        display: block;
    }

    .main .product .product_list li .bg .pc {
        display: none !important;
    }

    .main .product .product_list li .bg .mo {
        display: block;
    }
}

/* type01: 파란색 */
.main .product .product_list li.type01 a {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2.8rem;
    width: 100%;
    height: 100%;
}

.main .product .product_list li.type01 a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: .15rem solid rgba(0, 151, 246, .3);
    background: #0091F0;
    box-shadow: 0px 4px 40px rgba(62, 176, 191, .1);
    z-index: -1;
}

.main .product .product_list li.type01 .title {
    padding: 4.8rem 4rem 0;
}

.main .product .product_list li.type01 .title img {
    width: 20.4rem;
    height: 7.4rem;
}

.main .product .product_list li.type01 .content {
    position: relative;
    height: 100%;
}

.main .product .product_list li.type01 .group {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all .2s;
}

.main .product .product_list li.type01 .group .block {
    height: 100%;
    padding: 0 4rem 4.8rem;
}

.main .product .product_list li.type01 .group .ico {
    position: absolute;
    right: 0;
    bottom: 0;
}

.main .product .product_list li.type01 .group.cover .block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4.1rem;
    opacity: 1;
}

.main .product .product_list li.type01 .group .hash_list li {
    display: inline-block;
    margin-top: 1.2rem;
    border: 1px solid #fff;
    padding: 1.2rem 2rem;
    border-radius: 99.9rem;
    color: #fff;
}

.main .product .product_list li.type01 .group .hash_list li:first-child {
    margin-top: 0;
}

/* only pc */
@media (min-width: 1181px) {
    .main .product .product_list li.type01 .group.cover {
        opacity: 0;
    }

    .main .product .product_list li.type01 a:hover .group {
        opacity: 0;
    }

    .main .product .product_list li.type01 a:hover .group.cover {
        opacity: 1;
    }
}

@media (max-width: 1180px) {
    .main .product .product_list li.type01 a {
        display: block;
    }

    .main .product .product_list li.type01 a::before {
        border-width: 1px;
        box-shadow: 0px calc(100vw * (4 / 1180)) calc(100vw * (40 / 1180)) rgba(62, 176, 191, .1);
    }

    .main .product .product_list li.type01 .content {
        position: static;
        height: auto;
    }

    .main .product .product_list li.type01 .title {
        padding: calc(100vw * (48 / 1180)) calc(100vw * (40 / 1180));
    }

    .main .product .product_list li.type01 .title img {
        width: calc(100vw * (204 / 1180));
        height: calc(100vw * (74 / 1180));
    }

    .main .product .product_list li.type01 .group {
        position: static;
        height: auto;
    }

    .main .product .product_list li.type01 .group .block {
        padding: 0 calc(100vw * (40 / 1180)) calc(100vw * (48 / 1180));
    }

}

@media (max-width: 767px) {
    .main .product .product_list li.type01 {
        background: linear-gradient(180deg, #1A65D7 0%, #3DB3FD 100%);
        box-shadow: 0px calc(100vw * (4 / 767)) calc(100vw * (40 / 767)) rgba(62, 176, 191, 0.10);
    }

    .main .product .product_list li.type01 a::before {
        border-width: 1px;
        box-shadow: 0px calc(100vw * (4 / 767)) calc(100vw * (40 / 767)) rgba(62, 176, 191, .1);
    }

    .main .product .product_list li.type01 .content {
        position: static;
        height: auto;
    }

    .main .product .product_list li.type01 .title {
        padding: calc(100vw * (60 / 767)) calc(100vw * (44 / 767)) calc(100vw * (32 / 767));
    }

    .main .product .product_list li.type01 .title img {
        width: calc(100vw * (464 / 767));
        height: calc(100vw * (44 / 767));
    }

    .main .product .product_list li.type01 .group .txt {
        padding-right: calc(100vw * (300 / 767));
    }

    .main .product .product_list li.type01 .group .ico {
        top: calc(100vw * (130 / 767));
        right: calc(100vw * (15 / 767));
        bottom: auto;
        width: calc(100vw * (278 / 767));
    }

    .main .product .product_list li.type01 .group .block {
        padding: 0 calc(100vw * (44 / 767)) calc(100vw * (60 / 767));
    }
    
    .mo {
        display: block;
    }

}


/* type02: 그라데이션 */
.main .product .product_list li.type02 a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.main .product .product_list li.type02 a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(316deg, #0097F6 0%, #09DD8D 100%);
    clip-path: polygon(96% 0, 100% 11%, 100% 100%, 0 100%, 0 0);
}

.main .product .product_list li.type02 .content {
    position: relative;
    overflow: hidden;
    padding: 4.8rem 47.6rem 4.8rem 4rem;
}

.main .product .product_list li.type02 .title em {
    color: #fff;
    font-size: 2.2rem;
    line-height: 1.45;
    font-weight: 600;
    text-shadow: 0px 0px 15px rgba(0, 114, 121, 0.4);
}

.main .product .product_list li.type02 .title .pc {
    display: block;
    margin-top: 1.6rem;
}

.main .product .product_list li.type02 .title img {
    width: 26.4rem;
    /* height: 3.9rem; */
    height: auto;
}

.main .product .product_list li.type02 .txt {
    margin-top: 2.8rem;
}

.main .product .product_list li.type02 .ico {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.main .product .product_list li.type02 .ico img {
    animation: icoMove 3s linear infinite alternate;
}

@keyframes icoMove {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

@media (max-width: 1180px) {
    .main .product .product_list li.type02 a::before {
        clip-path: none;
    }

    .main .product .product_list li.type02 .content {
        padding: calc(100vw * (48 / 1180)) calc(100vw * (40 / 1180));
    }

    .main .product .product_list li.type02 .title em {
        font-size: calc(100vw * (22 / 1180));
        text-shadow: 0px 0px calc(100vw * (15 / 1180)) rgba(0, 114, 121, 0.4);
    }

    .main .product .product_list li.type02 .title .pc {
        margin-top: calc(100vw * (16 / 1180));
    }

    .main .product .product_list li.type02 .title img {
        width: calc(100vw * (264 / 1180));
        /* height: calc(100vw * (39 / 1180));  */
        height: auto;
    }

    .main .product .product_list li.type02 .txt {
        margin-top: calc(100vw * (20 / 1180));
    }

    .main .product .product_list li.type02 .ico {
        display: none;
    }
}

@media (max-width: 767px) {
    .main .product .product_list li.type02 a {
        display: block;
        height: 100%;
    }

    .main .product .product_list li.type02 a::before {
        clip-path: polygon(93% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
    }

    .main .product .product_list li.type02 .content {
        padding: calc(100vw * (56 / 767)) calc(100vw * (48 / 1180));
    }

    .main .product .product_list li.type02 .title em {
        font-size: calc(100vw * (36 / 767));
        text-shadow: 0px 0px calc(100vw * (30 / 767)) rgba(0, 114, 121, 0.4);
    }

    .main .product .product_list li.type02 .title .mo {
        margin-top: calc(100vw * (16 / 767));
    }

    .main .product .product_list li.type02 .title img {
        width: calc(100vw * (365 / 767));
        /* height: calc(100vw * (53 / 767));  */
        height: auto;
    }

    .main .product .product_list li.type02 .txt {
        margin-top: calc(100vw * (16 / 767));
    }
}

/* type03: 흰색 */
.main .product .product_list li.type03 a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.40) 100%);
    box-shadow: 0px 4px 40px rgba(62, 176, 191, 0.10);
}

.main .product .product_list li.type03 a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-width: 1px;
    border-style: solid;
    border-color: #CDDCE5;
}

.main .product .product_list li.type03 .content {
    position: relative;
    height: 100%;
    padding: 4.8rem 4.5rem 4rem;
    z-index: 1;
}

.main .product .product_list li.type03 .title img {
    width: 25.5rem;
    height: 6.9rem;
}

.main .product .product_list li.type03 .content .txt {
    margin-top: 2.8rem;
    color: #555;
}

.main .product .product_list li.type03 .content .ico {
    position: absolute;
    right: 4rem;
    bottom: 4rem;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    box-shadow: 0px 3px 30px rgba(62, 176, 191, 0.25);
    transition: all .2s;
    pointer-events: none;
}

.main .product .product_list li.type03 .content .ico img {
    width: 100%;
    height: 100%;
}

.main .product .product_list li.type03 .content .ico img:nth-child(2) {
    display: none;
}

/* only pc */
@media (min-width: 1181px) {
    .main .product .product_list li.type03 a:hover::before {
        border-width: 2px;
        border-color: none;
        border-image: linear-gradient(316deg, #0097F6 0%, #09DD8D 100%) 1;
    }

    .main .product .product_list li.type03 a:hover .content .ico img:nth-child(1) {
        display: none;
    }

    .main .product .product_list li.type03 a:hover .content .ico img:nth-child(2) {
        display: block;
    }
}

@media (max-width: 1180px) {
    .main .product .product_list li.type03 a {
        box-shadow: 0px calc(100vw * (4 / 1180)) calc(100vw * (40 / 1180)) rgba(62, 176, 191, 0.10);
    }

    .main .product .product_list li.type03 .content {
        padding: calc(100vw * (48 / 1180)) calc(100vw * (40 / 1180)) calc(100vw * (40 / 1180));
    }

    .main .product .product_list li.type03 .title img {
        width: calc(100vw * (255 / 1180));
        height: calc(100vw * (69 / 1180));
    }

    .main .product .product_list li.type03 .content .txt {
        margin-top: calc(100vw * (28 / 1180));
    }

    .main .product .product_list li.type03 .content .ico {
        right: calc(100vw * (40 / 1180));
        bottom: calc(100vw * (40 / 1180));
        width: calc(100vw * (80 / 1180));
        height: calc(100vw * (80 / 1180));
        box-shadow: 0px calc(100vw * (4 / 1180)) calc(100vw * (40 / 1180)) rgba(62, 176, 191, 0.25);
    }
}

@media (max-width: 767px) {
    .main .product .product_list li.type03 a {
        box-shadow: 0px calc(100vw * (4 / 767)) calc(100vw * (40 / 767)) rgba(62, 176, 191, 0.10);
    }

    .main .product .product_list li.type03 .content {
        padding: calc(100vw * (60 / 767)) calc(100vw * (44 / 767));
    }

    .main .product .product_list li.type03 .title.metahuman img {
        width: calc(100vw * (539 / 767));
        height: calc(100vw * (44 / 767));
    }

    .main .product .product_list li.type03 .title.scraping img {
        width: calc(100vw * (462 / 767));
        height: calc(100vw * (44 / 767));
    }

    .main .product .product_list li.type03 .title.insight img {
        width: calc(100vw * (402 / 767));
        height: calc(100vw * (44 / 767));
    }

    .main .product .product_list li.type03 .title.knowledge img {
        width: calc(100vw * (531 / 767));
        height: calc(100vw * (44 / 767));
    }

    .main .product .product_list li.type03 .title.vision img {
        width: calc(100vw * (377 / 767));
        height: calc(100vw * (44 / 767));
    }

    .main .product .product_list li.type03 .content .txt {
        margin-top: calc(100vw * (32 / 767));
    }

    .main .product .product_list li.type03 .content .ico {
        right: calc(100vw * (40 / 767));
        bottom: calc(100vw * (40 / 767));
        width: calc(100vw * (120 / 767));
        height: calc(100vw * (120 / 767));
        box-shadow: 0px calc(100vw * (3 / 767)) calc(100vw * (30 / 767)) rgba(62, 176, 191, 0.25);
    }
}

/* type04: 배경이미지 */
.main .product .product_list li.type04 .title {
    position: relative;
    padding: 4.8rem 4rem 0;
    z-index: 1;
}

.main .product .product_list li.type04 .title.search {
    margin-top: 0;
}

.main .product .product_list li.type04 .title.search img {
    width: 31.7rem;
    height: 3.4rem;
}

.main .product .product_list li.type04 .title.language img {
    width: 38.2rem;
    height: 3.4rem;
}

.main .product .product_list li.type04 .title.voice img {
    width: 27.6rem;
    height: 3.4rem;
}

.main .product .product_list li.type04 .bg img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    z-index: -1;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.main .product .product_list li.type04 .content {
    position: relative;
    height: 100%;
}

.main .product .product_list li.type04 a {
    position: relative;
    display: flex;
    flex-direction: column;
    /* gap: 2.8rem; */
    height: 100%;
}

.main .product .product_list li.type04 .group {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all .2s;
    /* padding: 0 4rem 4.8rem; */
}

.main .product .product_list li.type04 .group .block {
    height: 13.5rem;
    margin-top: 2.8rem;
    padding: 0 8rem 0 4rem;
    /* height: 100%; */
}

.main .product .product_list li.type04 .group.cover {
    overflow: hidden;
    opacity: 0;
}

.main .product .product_list li.type04 .group.cover .txt {
    /* padding: 0 4rem;  */
    color: #fff;
}

.main .product .product_list li.type04 .group.cover .marquee_wrap {
    padding-top: 1.5rem;
    padding-bottom: 4.8rem;
}

.main .product .product_list li.type04 .group.cover .hash_list {
    width: 100%;
    display: flex;
}

.main .product .product_list li.type04 .group.cover .hash_list li {
    margin: 0 .6rem;
    border: 1px solid #0097F6;
    padding: 1.1rem 2rem;
    border-radius: 4.2rem;
    color: #0097F6;
}

/* only pc */
@media (min-width: 1181px) {
    .main .product .product_list li.type04 a:hover::before {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
    }

    .main .product .product_list li.type04 a:hover .group {
        opacity: 0;
    }

    .main .product .product_list li.type04 a:hover .group.cover {
        opacity: 1;
    }

}

@media (max-width: 1180px) {
    .main .product .product_list li.type04 .title {
        padding: calc(100vw * (48 / 1180)) calc(100vw * (40 / 1180)) 0;
    }

    .main .product .product_list li.type04 .title.search img {
        width: calc(100vw * (317 / 1180));
        height: calc(100vw * (34 / 1180));
    }

    .main .product .product_list li.type04 .title.language img {
        width: calc(100vw * (382 / 1180));
        height: calc(100vw * (34 / 1180));
    }

    .main .product .product_list li.type04 .title.voice img {
        width: calc(100vw * (276 / 1180));
        height: calc(100vw * (34 / 1180));
    }

    .main .product .product_list li.type04 .group .block {
        margin-top: calc(100vw * (28 / 1180));
        padding: 0 calc(100vw * (40 / 1180)) calc(100vw * (40 / 1180));
    }

}

@media (max-width: 767px) {
    .main .product .product_list li.type04 .title {
        padding: calc(100vw * (60 / 767)) calc(100vw * (44 / 767)) calc(100vw * (32 / 767));
    }

    .main .product .product_list li.type04 .title.search img {
        width: calc(100vw * (410 / 767));
        height: calc(100vw * (44 / 767));
    }

    .main .product .product_list li.type04 .title.language img {
        width: calc(100vw * (480 / 767));
        height: calc(100vw * (44 / 767));
    }

    .main .product .product_list li.type04 .title.voice img {
        width: calc(100vw * (357 / 767));
        height: calc(100vw * (44 / 767));
    }

    .main .product .product_list li.type04 .group .block {
        margin-top: 0;
        padding: 0 calc(100vw * (44 / 767)) calc(100vw * (60 / 767));
    }

}

/* reference */
.main .reference .tab_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 7.4rem;
    margin-left: 1px;
}

.main .reference .tab_list li {
    margin-left: -1px;
    margin-top: -1px;
}

.main .reference .tab_list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(17, 17, 17, 0.50);
    font-size: 2.4rem;
    font-weight: 600;
    border: 1px solid #C8DBE7;
    background: #D6E7F1;
}

.main .reference .tab_list li.on a {
    position: relative;
    z-index: 1;
    border-color: #111;
    background: #111;
}

.main .reference .tab_list li.on a {
    color: #FAFDFE;
}

.main .reference .tab_content {
    display: none;
    margin-top: -1px;
    border: 1px solid #CDDCE5;
    background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.40) 100%);
}

.main .reference .tab_content.on {
    display: block;
}

.main .reference .tab_inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 8rem 8rem 8rem 9.4rem;
}

.main .reference .tab_inner .left {
    flex-basis: calc(100% - 50rem);
}

.main .reference .tab_inner .category {
    display: inline-block;
    margin-top: 2rem;
    text-transform: uppercase;
    font-size: 2.4rem;
    background: linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.main .reference .tab_inner h3 {
    margin-top: 1.6rem;
    line-height: 1.45;
    font-size: 3.6rem;
}

.main .reference .tab_inner .txt {
    margin-top: 1.8rem;
    color: #555;
    line-height: 1.45;
    font-size: 1.9rem;
    font-weight: 500;
}

.main .reference .tab_inner .btn_list {
    display: grid;
    grid-template-columns: repeat(2, 26rem);
    gap: 1.2rem;
    margin-top: 4.8rem;
}

.main .reference .right {
    flex-basis: 36rem;
}

.main .reference .right a,
.main .reference .right .thumb {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36rem;
    height: 36rem;
    border-radius: 100%;
    box-shadow: 0px 4px 40px rgba(62, 176, 191, 0.10);
    background: #fff;
}

/* .main .reference .right a img,
.main .reference .right .thumb img {
    width: 100%;
    height: 100%;
} */
.main .reference .right a img:nth-child(1) {
    display: block;
}

.main .reference .right a img:nth-child(2) {
    display: none;
}

.main .reference .dot_list {
    margin-top: 4rem;
}

.main .reference .dot_list li {
    position: relative;
    margin-top: 1.2rem;
    padding-left: 1.2rem;
    color: #111;
    line-height: 1.45;
    font-size: 1.9rem;
    font-weight: 600;
}

.main .reference .dot_list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.2rem;
    width: .4rem;
    height: .4rem;
    border-radius: 100%;
    background: #0097F6;
}

.main .reference .dot_list li:first-child {
    margin-top: 0;
}

.main .reference .marquee_wrap {
    overflow: hidden;
    height: 100%;
}

.main .reference .marquee_list {
    display: flex;
}

.main .reference .marquee_list li {
    margin: 0 4rem;
}

.main .reference .marquee_list li img {
    width: 100%;
    max-width: 23.7rem;
}

.main .reference .marquee_top {
    margin-top: 10rem;
}

.main .reference .marquee_bottom {
    margin-top: 6rem;
}

.main .reference .logo_list {
    display: none;
}

.main .reference :is(.btn_more, .btn_hide) {
    display: none;
}

.main .reference .swiper_tab {
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

/* only pc */
@media (min-width: 1181px) and (max-width: 1300px) {
    .main .reference .tab_inner .left {
        flex-basis: calc(100% - 50rem);
    }

    .main .reference .right {
        flex-basis: 30rem;
    }

    .main .reference .right a,
    .main .reference .right .thumb {
        width: 30rem;
        height: 30rem;
    }
}

/* only pc */
@media (min-width: 1181px) {
    .main .reference .tab_list li a:hover {
        position: relative;
        z-index: 1;
        border-color: #111;
        background: #111;
    }

    .main .reference .tab_list li a:hover {
        color: #FAFDFE;
    }

    .main .reference .right a.hover:hover img:nth-child(1) {
        display: none;
    }

    .main .reference .right a.hover:hover img:nth-child(2) {
        display: block;
    }
}

@media (max-width: 1180px) {
    .main .reference .tab_list {
        grid-auto-rows: calc(100vw * (74 / 1180));
    }

    .main .reference .tab_list li a {
        font-size: calc(100vw * (24 / 1180));
    }

    .main .reference .tab_inner {
        padding: calc(100vw * (70 / 1180)) calc(100vw * (60 / 1180));
    }

    .main .reference .tab_inner .left {
        flex-basis: calc(100% - calc(100vw * (428 / 1180)));
    }

    .main .reference .tab_inner .category {
        margin-top: calc(100vw * (20 / 1180));
        font-size: calc(100vw * (24 / 1180));
    }

    .main .reference .tab_inner h3 {
        margin-top: calc(100vw * (16 / 1180));
        font-size: calc(100vw * (36 / 1180));
    }

    .main .reference .tab_inner .txt {
        margin-top: calc(100vw * (18 / 1180));
        font-size: calc(100vw * (20 / 1180));
    }

    .main .reference .tab_inner .btn_list {
        grid-template-columns: repeat(2, calc(100vw * (260 / 1180)));
        gap: calc(100vw * (12 / 1180));
        margin-top: calc(100vw * (48 / 1180));
    }

    .main .reference .right {
        flex-basis: calc(100vw * (360 / 1180));
    }

    .main .reference .right a,
    .main .reference .right .thumb {
        width: calc(100vw * (360 / 1180));
        height: calc(100vw * (360 / 1180));
        box-shadow: 0px calc(100vw * (4 / 1180)) calc(100vw * (40 / 1180)) rgba(62, 176, 191, 0.10);
    }

    .main .reference .dot_list {
        margin-top: calc(100vw * (40 / 1180));
    }

    .main .reference .dot_list li {
        margin-top: calc(100vw * (12 / 1180));
        padding-left: calc(100vw * (12 / 1180));
        font-size: calc(100vw * (19 / 1180));
    }

    .main .reference .dot_list li::before {
        top: calc(100vw * (10 / 1180));
        width: 4px;
        height: 4px;
    }

    .main .reference .marquee_wrap {
        height: 0;
    }

    .main .reference .logo_list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: calc(100vw * (40 / 1180));
        margin: calc(100vw * (80 / 1180)) calc(100vw * (50 / 1180)) 0;
    }
}

@media (max-width: 960px) {
    .main .reference .right .dot_list li::before {
        width: 3px;
        height: 3px;
    }
}

@media (max-width: 767px) {
    .main .reference .tab_wrap {
        display: none;
    }

    .main .reference .swiper_tab {
        visibility: visible;
        pointer-events: all;
        opacity: 1;
    }

    .main .reference .tab_heading {
        position: relative;
        display: flex;
        padding: calc(100vw * (40 / 767)) 0;
        background: #111;
    }

    .main .reference .tab_heading .title {
        display: block;
        overflow: hidden;
        width: 100%;
        margin: 0 calc(100vw * (80 / 767));
        text-align: center;
        color: #fff;
        font-size: calc(100vw * (36 / 767));
        font-weight: 600;
    }

    .main .reference .tab_heading::before {
        content: "";
        position: absolute;
        left: calc(100vw * (48 / 767));
        top: 50%;
        width: calc(100vw * (15 / 767));
        height: calc(100vw * (24 / 767));
        transform: translateY(-50%);
        background: url("../images/main/ico_reference_arrow_gray.svg") no-repeat left top / 100% 100%;
    }

    .main .reference .tab_heading::after {
        content: "";
        position: absolute;
        right: calc(100vw * (48 / 767));
        top: 50%;
        width: calc(100vw * (15 / 767));
        height: calc(100vw * (24 / 767));
        transform: translateY(-50%) rotate(180deg);
        background: url("../images/main/ico_reference_arrow_gray.svg") no-repeat left top / 100% 100%;
    }

    .main .reference .tab_content {
        display: block;
    }

    .main .reference .tab_inner {
        display: block;
        padding: calc(100vw * (100 / 767)) calc(100vw * (48 / 767));
    }

    .main .reference .tab_inner .category {
        margin-top: 0;
        font-size: calc(100vw * (36 / 767));
    }

    .main .reference .tab_inner h3 {
        margin-top: calc(100vw * (32 / 767));
        font-size: calc(100vw * (52 / 767));
    }

    .main .reference .tab_inner .btn_list {
        display: flex;
        flex-direction: column;
        gap: calc(100vw * (24 / 767));
        margin: calc(100vw * (60 / 767)) calc(100vw * (39 / 767)) 0;
    }

    .main .reference .dot_list {
        margin-top: calc(100vw * (60 / 767));
    }

    .main .reference .dot_list li {
        margin-top: calc(100vw * (20 / 767));
        padding-left: calc(100vw * (24 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .main .reference .dot_list li::before {
        top: calc(100vw * (20 / 767));
        width: 8px;
        height: 8px;
    }

    .main .reference .swiper_tab .swiper-pagination {
        position: static;
        width: auto;
        margin-top: calc(100vw * (52 / 767));
        padding-bottom: calc(100vw * (10 / 767));
    }

    .main .reference .swiper_tab .swiper-pagination-bullet {
        position: relative;
        width: 12px;
        height: 12px;
        margin: 0 5px;
        background: #D9D9D9;
        opacity: 1;
        transition: all .2s;
    }

    .main .reference .swiper_tab .swiper-pagination-bullet-active {
        margin: 0 16px;
        background: none;
    }

    .main .reference .swiper_tab .swiper-pagination-bullet-active .spinner {
        opacity: 1;
    }

    .main .reference .swiper_tab .swiper-pagination-bullet-active .spinner::after {
        opacity: 1;
        animation: spinner 4s linear;
    }

    .main .reference .swiper_tab .spinner {
        position: absolute;
        left: 50%;
        top: 50%;
        display: block;
        width: 36px;
        height: 36px;
        border: 6px solid #D9D9D9;
        border-radius: 50%;
        transform: translate(-50%, -50%) rotate(48deg);
        clip-path: circle(50% at 50% 50%);
        opacity: 0;
        transition: all .2s;
    }

    .main .reference .swiper_tab .spinner::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        box-sizing: border-box;
        inset: -6px;
        border-radius: 50%;
        background: linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
        clip-path: circle(100% at 50% 50%);
        -webkit-mask: radial-gradient(12px, transparent 95%, #000) 0 0;
        mask: radial-gradient(12px, transparent 95%, #000) 0 0;
        opacity: 0;
    }

    .main .reference .logo_list {
        grid-template-columns: repeat(2, 1fr);
        text-align: center;
    }

    .main .reference .logo_list li.none {
        display: none;
    }

    .main .reference :is(.btn_more, .btn_hide) {
        text-align: center;
        margin-top: calc(100vw * (65 / 767));
    }

    .main .reference :is(.btn_more, .btn_hide) button {
        padding: calc(100vw * (20 / 767)) calc(100vw * (32 / 767));
        color: #fff;
        font-size: calc(100vw * (32 / 767));
        font-weight: 600;
        background: #111;
        border-radius: calc(100vw * (72 / 767));
    }

    .main .reference :is(.btn_more.on, .btn_hide.on) {
        display: block;
    }
}

@media (max-width: 480px) {
    .main .reference .dot_list li::before {
        width: 4px;
        height: 4px;
    }

    .main .reference .swiper_tab .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        margin: 0 2px;
    }

    .main .reference .swiper_tab .spinner {
        width: 18px;
        height: 18px;
        border-width: 3px;
    }

    .main .reference .swiper_tab .swiper-pagination-bullet-active {
        margin: 0 7px;
    }

    .main .reference .swiper_tab .spinner::after {
        inset: -3px;
        -webkit-mask: radial-gradient(6px, transparent 95%, #000) 0 0;
        mask: radial-gradient(6px, transparent 95%, #000) 0 0;
    }
}


/* news */
.main .news .news_list {
    border-top: 2px solid #222;
}

.main .news .news_list li a {
    display: flex;
    align-items: center;
    padding: 4.2rem 2rem;
    border-bottom: 1px solid #CDDCE5;
    transition: all .2s;
}

.main .news .news_list li a .category {
    display: block;
    flex-basis: 8rem;
    text-align: center;
    color: #0097F6;
    font-size: 1.9rem;
    font-weight: 500;
}

.main .news .news_list li a .txt {
    flex-basis: calc(90% - 8rem);
    padding: 0 6rem;
    text-align: left;
    color: #111;
    line-height: 1.1;
    font-size: 2.4rem;
    font-weight: 600;
}

.main .news .news_list li a .date {
    flex-basis: 10%;
    text-align: right;
    color: #999;
    font-size: 1.9rem;
}

.main .news .article_list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    gap: 2.8rem;
    margin-top: 4.8rem;
}

.main .news .article_list li a {
    overflow: hidden;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.40) 100%);
    box-shadow: 0px 4px 40px rgba(62, 176, 191, 0.10);
}

.main .news .article_list li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-width: 1px;
    border-style: solid;
    border-color: #CDDCE5;
    z-index: 1;
}

.main .news .article_list li .thumb {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 22rem;
}

.main .news .article_list li .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s ease;
}

.main .news .article_list li .block {
    display: flex;
    flex-direction: column;
    padding: 2.8rem;
}

.main .news .article_list li .block .category {
    color: #0097F6;
    font-size: 1.8rem;
    font-weight: 500;
}

.main .news .article_list li .block .txt {
    margin-top: 1.2rem;
    color: #111;
    line-height: 1.45;
    font-size: 2.1rem;
    font-weight: 600;
}

/* only pc */
@media (min-width: 1181px) {
    .main .news .news_list li a:hover {
        background: #EBF7FF;
    }

    .main .news .article_list li a:hover::before {
        border-width: 2px;
        border-color: none;
        border-image: linear-gradient(316deg, #0097F6 0%, #09DD8D 100%) 1;
    }

    .main .news .article_list li a:hover img {
        transform: scale(1.1);
    }
}

@media (max-width: 1180px) {
    .main .news .news_list li a {
        padding: calc(100vw * (42 / 1180)) calc(100vw * (20 / 1180));
    }

    .main .news .news_list li a .category {
        flex-basis: calc(100vw * (80 / 1180));
        font-size: calc(100vw * (19 / 1180));
    }

    .main .news .news_list li a .txt {
        flex-basis: calc(90% - calc(100vw * (80 / 1180)));
        padding: 0 calc(100vw * (60 / 1180));
        font-size: calc(100vw * (26 / 1180));
    }

    .main .news .news_list li a .date {
        font-size: calc(100vw * (19 / 1180));
    }

    .main .news .article_list {
        grid-auto-rows: auto;
        gap: calc(100vw * (28 / 1180));
        margin-top: calc(100vw * (48 / 1180));
    }

    .main .news .article_list li a {
        box-shadow: 0px calc(100vw * (4 / 1180)) calc(100vw * (40 / 1180)) rgba(62, 176, 191, 0.10);
    }

    .main .news .article_list li .content {
        position: static;
        width: 100%;
        height: 100%;
    }

    .main .news .article_list li .thumb {
        height: calc(100vw * (157 / 1180));
    }

    .main .news .article_list li .block {
        padding: calc(100vw * (28 / 1180)) calc(100vw * (20 / 1180));
    }

    .main .news .article_list li .block .category {
        font-size: calc(100vw * (19 / 1180));
    }

    .main .news .article_list li .block .txt {
        margin-top: calc(100vw * (12 / 1180));
        font-size: calc(100vw * (22 / 1180));
    }
}

@media (max-width: 767px) {
    .main .news .news_list li a {
        display: grid;
        grid-template-columns: auto 1fr;
        padding: calc(100vw * (48 / 767)) 0;
    }

    .main .news .news_list li a .category {
        order: 1;
        padding: 0 calc(100vw * (20 / 767)) 0 0;
        font-size: calc(100vw * (32 / 767));
    }

    .main .news .news_list li a .txt {
        grid-column: span 2;
        order: 3;
        margin-top: calc(100vw * (26 / 767));
        padding: 0;
        line-height: 1.45;
        font-size: calc(100vw * (36 / 767));
    }

    .main .news .news_list li a .ellipsis01 {
        -webkit-line-clamp: 2;
    }

    .main .news .news_list li a .date {
        order: 2;
        text-align: left;
        font-size: calc(100vw * (32 / 767));
    }

    .main .news .article_list {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: calc(100vw * (410 / 767));
        gap: calc(100vw * (24 / 767));
        margin-top: calc(100vw * (80 / 767));
    }

    .main .news .article_list li a {
        box-shadow: 0px calc(100vw * (4 / 767)) calc(100vw * (40 / 767)) rgba(62, 176, 191, 0.10);
    }

    .main .news .article_list li .thumb {
        height: calc(100vw * (210 / 767));
    }

    .main .news .article_list li .block {
        padding: calc(100vw * (28 / 767)) calc(100vw * (20 / 767));
    }

    .main .news .article_list li .block .category {
        font-size: calc(100vw * (28 / 767));
    }

    .main .news .article_list li .block .txt {
        margin-top: calc(100vw * (12 / 767));
        font-size: calc(100vw * (32 / 767));
    }

}


/* bg circle */
.main .bg_circle [class^="circle"]::after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
    z-index: -1;
}

.main .bg_circle .circle01::after {
    left: -30%;
    top: 3%;
    width: 129.1rem;
    height: 129.1rem;
    background-image: url("../images/main/bg_circle01_green.png");
    animation: bgCircleLeft 15s linear infinite;
}

.main .bg_circle .circle02::after {
    left: -13%;
    top: 0;
    width: 160.4rem;
    height: 160.4rem;
    background-image: url("../images/main/bg_circle02_blue.png");
    animation: bgCircleRight 15s linear infinite;
}

.main .bg_circle .circle03::after {
    right: -5%;
    top: 17%;
    width: 160.5rem;
    height: 160.5rem;
    background-image: url("../images/main/bg_circle03_green.png");
    animation: bgCircleRight 15s linear infinite;
}

.main .bg_circle .circle04::after {
    right: -25%;
    top: 21%;
    width: 160.5rem;
    height: 160.5rem;
    background-image: url("../images/main/bg_circle04_blue.png");
    animation: bgCircleRight 15s linear infinite;
}

.main .bg_circle .circle05::after {
    left: -40%;
    top: 42%;
    width: 160.4rem;
    height: 160.4rem;
    background-image: url("../images/main/bg_circle05_blue.png");
    animation: bgCircleLeft 15s linear infinite;
}

.main .bg_circle .circle06::after {
    left: 0;
    top: 56%;
    width: 160.4rem;
    height: 160.4rem;
    background-image: url("../images/main/bg_circle06_green.png");
    animation: bgCircleLeft 15s linear infinite;
}

.main .bg_circle .circle07::after {
    right: 0;
    top: 56%;
    width: 160.4rem;
    height: 160.4rem;
    background-image: url("../images/main/bg_circle07_blue.png");
    animation: bgCircleRight 15s linear infinite;
}

.main .bg_circle .circle08::after {
    left: -3%;
    bottom: -10%;
    width: 185.8rem;
    height: 185.8rem;
    background-image: url("../images/main/bg_circle08_green.png");
    animation: bgCircleLeft 15s linear infinite;
    opacity: .5;
}

.main .bg_circle .circle09::after {
    right: -10%;
    bottom: -10%;
    width: 185.8rem;
    height: 185.8rem;
    background-image: url("../images/main/bg_circle09_blue.png");
    animation: bgCircleRight 15s linear infinite;
    opacity: .7;
}

@media (max-width: 1560px) {
    .main .bg_circle .circle01::after {
        width: calc(100vw * (1291 / 1560));
        height: calc(100vw * (1291 / 1560));
    }

    .main .bg_circle .circle02::after {
        width: calc(100vw * (1604 / 1560));
        height: calc(100vw * (1604 / 1560));
    }

    .main .bg_circle .circle03::after {
        width: calc(100vw * (1605 / 1560));
        height: calc(100vw * (1605 / 1560));
    }

    .main .bg_circle .circle04::after {
        width: calc(100vw * (1605 / 1560));
        height: calc(100vw * (1605 / 1560));
    }

    .main .bg_circle .circle05::after {
        width: calc(100vw * (1604 / 1560));
        height: calc(100vw * (1604 / 1560));
    }

    .main .bg_circle .circle06::after {
        width: calc(100vw * (1604 / 1560));
        height: calc(100vw * (1604 / 1560));
    }

    .main .bg_circle .circle07::after {
        width: calc(100vw * (1604 / 1560));
        height: calc(100vw * (1604 / 1560));
    }

    .main .bg_circle .circle08::after {
        width: calc(100vw * (1858 / 1560));
        height: calc(100vw * (1858 / 1560));
    }

    .main .bg_circle .circle09::after {
        width: calc(100vw * (1858 / 1560));
        height: calc(100vw * (1858 / 1560));
    }
}

@media (max-width: 1180px) {
    .main .bg_circle .circle01::after {
        left: -80%;
        width: calc(100vw * (1291 / 1180));
        height: calc(100vw * (1291 / 1180));
    }

    .main .bg_circle .circle02::after {
        left: -50%;
        width: calc(100vw * (1604 / 1180));
        height: calc(100vw * (1604 / 1180));
    }

    .main .bg_circle .circle03::after {
        right: -60%;
        width: calc(100vw * (1605 / 1180));
        height: calc(100vw * (1605 / 1180));
    }

    .main .bg_circle .circle04::after {
        right: -80%;
        width: calc(100vw * (1605 / 1180));
        height: calc(100vw * (1605 / 1180));
    }

    .main .bg_circle .circle05::after {
        top: 45%;
        left: -50%;
        width: calc(100vw * (1604 / 1180));
        height: calc(100vw * (1604 / 1180));
    }

    .main .bg_circle .circle06::after {
        left: -50%;
        width: calc(100vw * (1604 / 1180));
        height: calc(100vw * (1604 / 1180));
    }

    .main .bg_circle .circle07::after {
        right: -50%;
        width: calc(100vw * (1604 / 1180));
        height: calc(100vw * (1604 / 1180));
    }

    .main .bg_circle .circle08::after {
        left: -50%;
        width: calc(100vw * (1858 / 1180));
        height: calc(100vw * (1858 / 1180));
    }

    .main .bg_circle .circle09::after {
        right: -50%;
        width: calc(100vw * (1858 / 1180));
        height: calc(100vw * (1858 / 1180));
    }
}

@media (max-width: 767px) {
    .main .bg_circle .circle01::after {
        left: -120%;
        width: calc(100vw * (1291 / 767));
        height: calc(100vw * (1291 / 767));
    }

    .main .bg_circle .circle02::after {
        left: -70%;
        width: calc(100vw * (1604 / 767));
        height: calc(100vw * (1604 / 767));
    }

    .main .bg_circle .circle03::after {
        right: -120%;
        width: calc(100vw * (1605 / 767));
        height: calc(100vw * (1605 / 767));
    }

    .main .bg_circle .circle04::after {
        display: none;
    }

    .main .bg_circle .circle05::after {
        top: 45%;
        left: -120%;
        width: calc(100vw * (1604 / 767));
        height: calc(100vw * (1604 / 767));
    }

    .main .bg_circle .circle06::after {
        top: 66%;
        left: -100%;
        width: calc(100vw * (1604 / 767));
        height: calc(100vw * (1604 / 767));
    }

    .main .bg_circle .circle07::after {
        top: 66%;
        right: -100%;
        width: calc(100vw * (1604 / 767));
        height: calc(100vw * (1604 / 767));
    }

    .main .bg_circle .circle08::after,
    .main .bg_circle .circle09::after {
        display: none;
    }
}

/* bg circle animation: main, 404 */
@keyframes bgCircleLeft {
    0% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-5%, 5%);
    }

    50% {
        transform: translate(-10%, 0%);
    }

    80% {
        transform: translate(-5%, -5%);
    }

}

@keyframes bgCircleRight {
    0% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(5%, -5%);
    }

    50% {
        transform: translate(10%, 0%);
    }

    80% {
        transform: translate(5%, 5%);
    }

}


@media (max-width: 1180px) and (min-width: 768px) {
    .main .reference .tab_list {
        grid-auto-rows: calc(100vw * (110 / 1180));
    }
}

/* 제품 이미지 사이즈 재정의 */
.main .product .product_list li.type03 .title.small img {
    width: 25.5rem;
    height: 6.9rem;
}

.main .product .product_list li.type04 .title.large img {
    width: 38.2rem;
    height: 3.4rem;
}

@media (max-width: 1180px) {
    .main .product .product_list li.type03 .title.small img {
        width: calc(100vw * (255 / 1180));
        height: calc(100vw * (69 / 1180));
    }

    .main .product .product_list li.type04 .title.large img {
        width: calc(100vw * (382 / 1180));
        height: calc(100vw * (34 / 1180));
    }

}

@media (max-width: 767px) {
    .main .product .product_list li.type03 .title.small img {
        width: calc(100vw * (539 / 767));
        height: calc(100vw * (44 / 767));
    }

    .main .product .product_list li.type04 .title.large img {
        width: calc(100vw * (480 / 767));
        height: calc(100vw * (44 / 767));
    }

}

/* 다국어 */
@media (min-width: 1181px) {
    :lang(en) .main .visual .swiper_visual .hgroup p {
        max-width: 1400px;
        margin: 2.4rem auto 0;
    }

    :lang(en) .main .product .product_list li.type02 .content {
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    :lang(en) .main .product .product_list li.type01 a .txt {
        font-size: 1.8rem;
    }

    :lang(en) .main .product .product_list {
        grid-auto-rows: minmax(48rem, auto);
    }

    :lang(en) .main .product .product_list li.type04 .group .block {
        height: 65%;
    }
}

@media (min-width: 768px) {
    :lang(en) .main .reference .tab_list li a {
        padding-left: 20px;
        padding-right: 20px;
        word-break: break-word;
        text-align: center;
    }
}


/* 사업분야 */

/* 서브 공통 */
.sub-content {
    position: relative;
}

.container {
    position: relative;
    width: 100%;
    max-width: calc(144rem + 12rem);
    margin: 0 auto;
    padding: 0 6rem;
}

.sub-visual {
    position: relative;
    z-index: 1;
    background: #020417;
    overflow: hidden;
}

.sub-visual.product .sub-title img {
    height: 57px;
}

.sub-visual.height .sub-title-box {
    min-height: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.sub-visual.height .sub-bg {
    position: relative;
}

.sub-visual .sub-bg div {
    height: 100%;
}

.sub-visual .sub-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sub-visual .sub-title-box {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    z-index: 1;
}

.sub-visual .sub-title {
    padding-top: 280px;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
}

.sub-visual .sub-title span {
    color: rgba(255, 255, 255, .5);
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1;
    padding-left: 1.6rem;
}

.sub-visual h2 {
    max-width: 80rem;
    margin: 4.8rem 0 1.6rem;
    color: #FFF;
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.4;
}

.sub-visual p {
    max-width: 80rem;
    margin-bottom: 6rem;
    color: #999;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.6;
}

.sub-visual .cate {
    max-width: 54rem;
    padding-bottom: 10rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.sub-visual .cate li {
    padding: 1.2rem 2rem;
    border-radius: 99.9rem;
    border: 1px solid #0097F6;
    color: #0097f6;
    margin: 0 1.2rem 1.2rem 0;
    font-size: 18px;
}

.sub-visual .sub-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.sub-visual .sub-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: visualScale 5s ease-out alternate both;
}

.sub-visual h3 {
    position: relative;
    color: #FFF;
    text-align: center;
    font-size: 6.8rem;
    font-weight: 600;
    line-height: 1;
}

.sub-visual .flex {
    margin-bottom: 3.2rem;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.sub-visual .flex span {
    display: block;
}

.box-green {
    width: 1.2rem;
    height: 1.2rem;
    background: #09DD8D;
}

.box-blue {
    width: 1rem;
    height: 1rem;
    transform: rotate(45deg);
    background: #0097F6;
}

@keyframes visualScale {
    0% {
        transform: translateZ(0) scale(1) rotate(0deg)
    }

    100% {
        transform: translateZ(0) scale(1.08) rotate(0.0001deg)
    }
}

@-webkit-keyframes visualScale {
    0% {
        transform: translateZ(0) scale(1) rotate(0deg)
    }

    100% {
        transform: translateZ(0) scale(1.08) rotate(0.0001deg)
    }
}

@-ms-keyframes visualScale {
    0% {
        transform: translateZ(0) scale(1) rotate(0deg)
    }

    100% {
        transform: translateZ(0) scale(1.08) rotate(0.0001deg)
    }
}

.flex {
    display: flex;
}

.btnBc {
    display: flex;
    width: 26rem;
    height: 6rem;
    padding: 1.7rem 2.7rem;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid #CDDCE5;
    background: #FFF;
}

.btnBc span {
    display: block;
    width: 100%;
    text-align: left;
    position: relative;
    color: #555;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1;
    padding-right: 2.2rem;
}

.btnBc span::after {
    content: "";
    width: 1rem;
    height: 1rem;
    border-right: 2px solid #555;
    border-top: 2px solid #555;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -5px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

.btn-more {
    width: 10rem;
    height: 4.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #111;
    color: #fff;
    margin: 6rem auto 0;
    cursor: pointer;
    border-radius: 99.9rem;
    font-size: 18px;
}

.btn-more::before {
    content: "더보기";
}

.btn-more.close::before {
    content: "숨기기";
}

.list li {
    position: relative;
    padding-left: 1.2rem;
    margin-bottom: 0.6rem;
    color: #555;
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1.45;
}

.list li:last-child {
    margin-bottom: 0;
}

.list li::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    background: #0097F6;
    border-radius: 50%;
    position: absolute;
    top: 11px;
    left: 0;
}

.pro-mo {
    display: none;
    width: 100%;
    height: 100%;
}

.product-system .system-box2 .tab .zoom {
    position: relative;
}

.audio-box {
    position: absolute;
    right: 135px;
    top: 0;
    width: 290px;
    height: calc(100% - 40px);
    padding: 70px 0 58px;
}

.audio-box span {
    display: block;
    height: calc(100%/3 - 12px);
    margin-bottom: 12px;
}

.audio-box span button {
    background: #fff;
    font-size: 0;
    width: 70px;
    height: 70px;
    opacity: 0;
}

.audio-box span button.on {
    animation: voice .6s .2s infinite linear;
}

.zoom_link {
    display: none;
}

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

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
    }
}

@media (max-width: 1560px) {
    .audio-box {
        right: calc(100vw * (135 / 1560));
        width: calc(100vw * (290 / 1560));
        height: calc(100% - (100vw * (40 / 1560)));
        padding: calc(100vw * (70 / 1560)) 0 calc(100vw * (58 / 1560));
    }

    .audio-box span {
        height: calc(100%/3 - calc(100vw * (12 / 1560)));
        margin-bottom: calc(100vw * (12 / 1560));
    }

    .audio-box span button {
        width: calc(100vw * (70 / 1560));
        height: calc(100vw * (70 / 1560));
    }
}

@media (max-width: 1180px) {
    .audio-box {
        right: calc(100vw * (105 / 1180));
        width: calc(100vw * (214 / 1180));
        height: calc(100% - (100vw * (40 / 1180)));
        padding: calc(100vw * (52 / 1180)) 0 calc(100vw * (40 / 1180));
    }

    .audio-box span {
        height: calc(100%/3 - calc(100vw * (12 / 1180)));
        margin-bottom: calc(100vw * (12 / 1180));
    }

    .audio-box span button {
        width: calc(100vw * (55 / 1180));
        height: calc(100vw * (55 / 1180));
    }
}

@media (max-width: 767px) {
    .audio-box {
        right: calc(100vw * (62 / 767));
        width: calc(100vw * (130 / 767));
        height: calc(100% - (100vw * (40 / 767)));
        padding: calc(100vw * (34 / 767)) 0 calc(100vw * (113 / 767));
    }

    .audio-box span {
        height: calc(100%/3 - calc(100vw * (8 / 767)));
        margin-bottom: calc(100vw * (8 / 767));
    }

    .audio-box span button {
        width: 100%;
        height: 100%;
        display: block;
    }
}


@media (min-width: 1181px) {
    .btnBc:hover {
        border: none;
        background: linear-gradient(305deg, #0097F6 0%, #09DD8D 100%)
    }

    .btnBc:hover span {
        color: #fff;
    }

    .btnBc:hover span::after {
        border-color: #fff
    }
}

@media (max-width: 1560px) {
    .container {
        max-width: calc(144rem + calc(100vw * (120 / 1560)));
        padding: 0 calc(100vw * (60 / 1560));
    }

    .sub-visual .sub-title {
        padding-top: calc(100vw * (280 / 1560));
    }

    .sub-visual.product .sub-title img {
        height: calc(100vw * (57 / 1560));
    }

    .sub-visual .sub-title span {
        font-size: calc(100vw * (28 / 1560));
        padding-left: calc(100vw * (16 / 1560));
    }

    .sub-visual h2 {
        max-width: calc(100vw * (800 / 1560));
        margin: calc(100vw * (48 / 1560)) 0 calc(100vw * (16 / 1560));
        font-size: calc(100vw * (28 / 1560));
    }

    .sub-visual p {
        max-width: calc(100vw * (800 / 1560));
        margin-bottom: calc(100vw * (60 / 1560));
        font-size: calc(100vw * (20 / 1560));
    }

    .sub-visual .cate {
        max-width: calc(100vw * (540 / 1560));
        padding-bottom: calc(100vw * (100 / 1560));
    }

    .sub-visual .cate li {
        padding: calc(100vw * (12 / 1560)) calc(100vw * (20 / 1560));
        border-radius: calc(100vw * (999 / 1560));
        margin: 0 calc(100vw * (12 / 1560)) calc(100vw * (12 / 1560)) 0;
        font-size: calc(100vw * (18 / 1560));
    }

    .sub-visual h3 {
        font-size: calc(100vw * (68 / 1560));
    }

    .sub-visual .flex {
        margin-bottom: calc(100vw * (32 / 1560));
        gap: calc(100vw * (10 / 1560));
    }

    .sub-visual.height .sub-bg {
        height: calc(100vw * (720 / 1560));
    }

    .box-green {
        width: calc(100vw * (12 / 1560));
        height: calc(100vw * (12 / 1560));
    }

    .box-blue {
        width: calc(100vw * (10 / 1560));
        height: calc(100vw * (10 / 1560));
    }

    .btnBc {
        width: calc(100vw * (260 / 1560));
        height: calc(100vw * (52 / 1560));
        padding: calc(100vw * (17 / 1560)) calc(100vw * (28 / 1560));
    }

    .btnBc span {
        font-size: calc(100vw * (18 / 1560));
        padding-right: calc(100vw * (22 / 1560));
    }

    .btnBc span::after {
        width: calc(100vw * (10 / 1560));
        height: calc(100vw * (10 / 1560));
        margin-top: calc(100vw * (-5 / 1560));
    }

    .btn-more {
        width: calc(100vw * (100 / 1560));
        height: calc(100vw * (44 / 1560));
        margin: calc(100vw * (60 / 1560)) auto 0;
        border-radius: calc(100vw * (999 / 1560));
        font-size: calc(100vw * (18 / 1560));
    }

    .list li {
        padding-left: calc(100vw * (12 / 1560));
        margin-bottom: calc(100vw * (12 / 1560));
        font-size: calc(100vw * (19 / 1560));
    }

    .list li::before {
        width: calc(100vw * (4 / 1560));
        height: calc(100vw * (4 / 1560));
        top: calc(100vw * (11 / 1560));
    }
}

@media (max-width: 1180px) {
    .container {
        max-width: calc(144rem + calc(100vw * (120 / 1180)));
        padding: 0 calc(100vw * (60 / 1180));
    }

    .sub-visual .sub-title-box {
        height: calc(100vw * (1000 / 1180));
        min-height: auto;
    }

    .sub-visual.product .sub-title img {
        height: calc(100vw * (57 / 1180));
    }

    .sub-visual .sub-title {
        padding-top: calc(100vw * (220 / 1180));
    }

    .sub-visual .sub-title span {
        font-size: calc(100vw * (28 / 1180));
        padding-left: calc(100vw * (16 / 1180));
    }

    .sub-visual h2 {
        max-width: calc(100vw * (800 / 1180));
        margin: calc(100vw * (48 / 1180)) 0 calc(100vw * (16 / 1180));
        font-size: calc(100vw * (28 / 1180));
    }

    .sub-visual p {
        max-width: calc(100vw * (800 / 1180));
        margin-bottom: calc(100vw * (60 / 1180));
        font-size: calc(100vw * (20 / 1180));
    }

    .sub-visual .cate {
        max-width: calc(100vw * (540 / 1180));
        padding-bottom: calc(100vw * (100 / 1180));
    }

    .sub-visual .cate li {
        padding: calc(100vw * (12 / 1180)) calc(100vw * (20 / 1180));
        border-radius: calc(100vw * (999 / 1180));
        margin: 0 calc(100vw * (12 / 1180)) calc(100vw * (12 / 1180)) 0;
        font-size: calc(100vw * (18 / 1180));
    }

    .sub-visual h3 {
        font-size: calc(100vw * (68 / 1180));
    }

    .sub-visual .flex {
        margin-bottom: calc(100vw * (33 / 1180));
        gap: 0;
    }

    .sub-visual.height .sub-bg {
        height: calc(100vw * (1000 / 1180));
    }

    .sub-visual .flex span {
        margin: 0 calc(100vw * (5 / 1180));
    }

    .box-green {
        width: calc(100vw * (12 / 1180));
        height: calc(100vw * (12 / 1180));
    }

    .box-blue {
        width: calc(100vw * (10 / 1180));
        height: calc(100vw * (10 / 1180));
    }

    .btnBc {
        width: calc(100vw * (260 / 1180));
        height: calc(100vw * (60 / 1180));
        padding: calc(100vw * (17 / 1180)) calc(100vw * (28 / 1180));
    }

    .btnBc span {
        font-size: calc(100vw * (18 / 1180));
        padding-right: calc(100vw * (22 / 1180));
    }

    .btnBc span::after {
        width: calc(100vw * (10 / 1180));
        height: calc(100vw * (10 / 1180));
        margin-top: calc(100vw * (-5 / 1180));
    }

    .btn-more {
        width: calc(100vw * (100 / 1180));
        height: calc(100vw * (44 / 1180));
        margin: calc(100vw * (60 / 1560)) auto 0;
        border-radius: calc(100vw * (999 / 1180));
        font-size: calc(100vw * (18 / 1180));
    }

    .list li {
        padding-left: calc(100vw * (12 / 1180));
        margin-bottom: calc(100vw * (12 / 1180));
        font-size: calc(100vw * (19 / 1180));
    }

    .list li::before {
        width: calc(100vw * (4 / 1180));
        height: calc(100vw * (4 / 1180));
        top: calc(100vw * (11 / 1180));
    }
}

@media (max-width: 767px) {
    .container {
        max-width: 100%;
        padding: 0 calc(100vw * (48 / 767));
    }

    .sub-visual .sub-title {
        display: block;
        padding-top: calc(100vw * (294 / 767));
    }

    .sub-visual.product .sub-title img {
        height: auto;
    }

    .sub-visual .sub-title-box {
        height: calc(100vw * (1000 / 767));
    }

    .sub-visual.product .sub-title-box {
        height: auto;
        min-height: calc(100vw * (1535 / 767));
    }

    .sub-visual.business .sub-title-box {
        height: auto;
        min-height: calc(100vw * (1535 / 767));
    }

    .sub-visual .sub-title span {
        display: block;
        font-size: calc(100vw * (44 / 767));
        padding-left: 0;
        margin: calc(100vw * (48 / 767)) 0 calc(100vw * (60 / 767));
    }

    .sub-visual .sub-title img {
        width: calc(100vw * (420 / 767));
    }

    .sub-visual h2 {
        max-width: 100%;
        margin: calc(100vw * (60 / 767)) 0 calc(100vw * (16 / 767));
        font-size: calc(100vw * (40 / 767));
    }

    .sub-visual p {
        max-width: 100%;
        margin-bottom: calc(100vw * (90 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .sub-visual .cate {
        max-width: 100%;
        padding-bottom: calc(100vw * (164 / 767));
    }

    .sub-visual .cate li {
        padding: calc(100vw * (24 / 767)) calc(100vw * (40 / 767));
        border-radius: calc(100vw * (999 / 767));
        margin: 0 calc(100vw * (20 / 767)) calc(100vw * (20 / 767)) 0;
        font-size: calc(100vw * (32 / 767));
    }

    .sub-visual h3 {
        font-size: calc(100vw * (80 / 767));
    }

    .sub-visual .flex {
        margin-bottom: calc(100vw * (36 / 767));
    }

    .sub-visual.height .sub-bg {
        height: calc(100vw * (1000 / 767));
    }

    .sub-visual .sub-bg video {
        height: 100%;
    }

    .sub-visual .flex span {
        margin: calc(100vw * (10 / 767));
    }

    .box-green {
        width: calc(100vw * (24 / 767));
        height: calc(100vw * (24 / 767));
    }

    .box-blue {
        width: calc(100vw * (20 / 767));
        height: calc(100vw * (20 / 767));
    }

    .btnBc {
        width: calc(100vw * (260 / 767));
        height: calc(100vw * (60 / 767));
        padding: calc(100vw * (17 / 767)) calc(100vw * (28 / 767));
    }

    .btnBc span {
        font-size: calc(100vw * (18 / 767));
        padding-right: calc(100vw * (22 / 767));
    }

    .btnBc span::after {
        width: calc(100vw * (20 / 767));
        height: calc(100vw * (20 / 767));
        margin-top: calc(100vw * (-5 / 767));
    }

    .btn-more {
        width: auto;
        height: calc(100vw * (72 / 767));
        padding: 0 calc(100vw * (32 / 767));
        margin: 0 auto;
        border-radius: calc(100vw * (999 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .list li {
        padding-left: calc(100vw * (24 / 767));
        margin-bottom: calc(100vw * (25 / 767));
        font-size: calc(100vw * (38 / 767));
    }

    .list li::before {
        width: calc(100vw * (8 / 767));
        height: calc(100vw * (8 / 767));
        top: calc(100vw * (18 / 767));
    }

    .pc {
        display: none;
    }

    .pro-mo {
        display: block;
    }

    .sub-bg .pro-mo {
        position: relative;
    }

    .sub-bg .pro-mo::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #020417 0%, rgba(0, 0, 0, 0.43) 100%, rgba(2, 4, 23, 0.00) 100%);

    }

    .zoom {
        position: relative;
        display: block;
    }

    .zoom_link {
        display: block;
        position: absolute;
        right: calc(100vw * (20 / 767));
        bottom: calc(100vw * (60 / 767));
        width: calc(100vw * (64 / 767));
        height: calc(100vw * (64 / 767));
        text-indent: -999px;
        overflow: hidden;
        background: url(../images/common/btn-zoom.svg) no-repeat center center / 100%;
    }
}

/* 서브 공통 끝*/

/* 사업분야 css */
.sub-visual.business .sub-title {
    display: block;
}

.sub-visual.business .sub-title p {
    margin: 0;
    padding: 0;
    background: linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    font-weight: 600;
    line-height: 1.45;
    font-size: 24px;
}

.sub-visual.business .sub-title h3 {
    margin: 36px 0;
    text-align: left;
}

.blue {
    color: #0097F6;
}

.business-txt {
    margin: 180px 0;
    text-align: center;
    overflow: hidden;
}

.business-txt h3 {
    margin-bottom: 36px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.45;
}

.business-txt p {
    color: #555;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.8;
}

.business-slide {
    position: relative;
    padding: 180px 0;
    overflow: hidden;
}

.business-slide::before {
    content: "";
    background: url(../images/business/business-slide-bg.png)no-repeat;
    background-size: contain;
    width: 100%;
    height: 833px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.business-slide::after {
    content: "";
    background: url(../images/business/business-slide-bg2.png)no-repeat;
    background-size: contain;
    width: 1256px;
    height: 913px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    opacity: 0.8;
    filter: blur(300px);
}

.business-slide .tab {
    display: none;
}

.business-slide .product-title-center {
    margin-bottom: 0;
}

.business-slide .product-title-center h2 {
    margin-bottom: 0;
}

.business-slide .title {
    text-align: center;
    font-size: 50px;
    font-weight: 700;
    line-height: 1.4;
    text-transform: capitalize;
}

.business-slide .slide-wrap .container {
    overflow: hidden;
    padding: 6rem 0 7rem;
}

.business-slide .swiper-slide {
    width: 100% !important;
}

.business-slide .item {
    padding: 0 6rem;
}

.business-slide .item li {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
}

.business-slide .item li:nth-child(2) {
    margin-top: 40px;
    flex-direction: row-reverse;
}

.business-slide .item li div {
    width: 50%;
    height: 479px;
}

.business-slide .item li div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.business-slide .item li .txt-box {
    position: relative;
    padding: 80px;
    background: #FFF;
    box-shadow: 0px 4px 40px 0px rgba(62, 176, 191, 0.10);
}

.business-slide .item li .txt-box .inner-box {
    width: calc(100% - 160px);
    height: auto;
    position: absolute;
    bottom: 80px;
    left: 80px;
}

.business-slide .item li .txt-box .num {
    display: block;
    color: #0097F6;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
}

.business-slide .item li .txt-box h4 {
    position: relative;
    display: inline-block;
    max-height: 104px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.45;
    margin: 12px 0 20px;
    z-index: 1;
    overflow: hidden;
}

.business-slide .item li .txt-box h4 span {
    box-shadow: inset 0 -10px 0 #CCEAFD;
}

.business-slide .item li .txt-box p {
    color: #555;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.6;
    max-height: 183px;
    overflow: hidden;
}

.swiper-button .swiper-button-next:after,
.swiper-button .swiper-button-prev:after {
    background: url(../images/business/button.svg)no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
}

.swiper-button .swiper-button-prev:after {
    transform: rotate(180deg);
}

.swiper-button .swiper-button-prev,
.swiper-button .swiper-container-rtl .swiper-button-next {
    left: 80px;
}

.swiper-button .swiper-button-next,
.swiper-button .swiper-cbutton .swiper-button-next,
.swiper-button .swiper-button-prev {
    width: 80px;
    height: 80px;
    background: none;
}

.swiper-button .swiper-button-next,
.swiper-button .swiper-container-rtl .swiper-button-prev {
    right: 80px;
}

/* sub-pagination */
.sub-pagination .swiper-pagination {
    position: absolute;
    left: 50%;
    bottom: 18rem;
    width: auto;
    transform: translateX(-50%);
}

.sub-pagination .swiper-pagination-bullet {
    position: relative;
    width: 0.6rem;
    height: 0.6rem;
    margin: 0 0.4rem;
    background: #d9d9d9;
    opacity: 1;
    transition: all .1s;
}

.sub-pagination .spinner {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 16px;
    height: 16px;
    border: 4px solid rgba(0, 0, 0, .2);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotate(130deg);
    clip-path: circle(50% at 50% 50%);
    opacity: 0;
    transition: all .1s;
}

.sub-pagination .spinner::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    inset: -4px;
    border-radius: 50%;
    background: linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
    clip-path: circle(100% at 50% 50%);
    -webkit-mask: radial-gradient(5px, transparent 95%, #000) 0 0;
    mask: radial-gradient(5px, transparent 95%, #000) 0 0;
    opacity: 0;
}

.sub-pagination .swiper-pagination-bullet-active {
    margin: 0 0.9rem;
    background: none;
}

.sub-pagination .swiper-pagination-bullet-active .spinner {
    opacity: 1;
}

.sub-pagination .swiper-pagination-bullet-active .spinner::after {
    opacity: 1;
    animation: spinner 4s linear;
}

@keyframes spinner {
    0% {
        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
    }

    25% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
    }

    50% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
    }

    75% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
    }

    100% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
    }
}

@-webkit-keyframes spinner {
    0% {
        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
    }

    25% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
    }

    50% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
    }

    75% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
    }

    100% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
    }
}

.business-wrap {
    position: relative;
    padding: 180px 0 124px;
    margin-bottom: 180px;
    background: #0097F6;
    z-index: 1;
    overflow: hidden;
}

.business-wrap::after {
    content: "";
    background: url(../images/business/business-wrap-bg.png)no-repeat;
    background-size: contain;
    z-index: -1;
    width: 867px;
    height: 474px;
    position: absolute;
    bottom: -65px;
    right: 0;
    opacity: 0.2;
}

.business-wrap h2 {
    color: #fff;
}

.business-wrap ul {
    display: flex;
    flex-wrap: wrap;
}

.business-wrap ul>li {
    position: relative;
    width: 339px;
    height: 488px;
    padding: 40px 40px 70px;
    margin: 0 28px 56px 0;
    border: 1px solid #CDDCE5;
    background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.80) 100%);
    box-shadow: 0px 4px 40px 0px rgba(182, 188, 189, 0.10);
    z-index: 1;
}

.business-wrap ul>li::before {
    content: "";
    background: url(../images/business/business-li-bg.png)no-repeat;
    width: 100%;
    height: 264px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    opacity: 0;
}

.business-wrap ul>li:nth-child(4n) {
    margin-right: 0;
}

.business-wrap ul>li .icon {
    display: block;
    width: 60px;
    height: 60px;
    margin-bottom: 36px;
    text-align: right;
}

.business-wrap ul>li .icon img {
    width: 100%;
    height: 100%;
    box-shadow: 0px 3px 30px 0px rgba(62, 176, 191, 0.25);
    border-radius: 50%;
}

.business-wrap ul>li h3 {
    max-height: 76px;
    overflow: hidden;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.45
}

.business-wrap ul>li p {
    color: #555;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.45;
    height: 140px;
    margin: 12px 0 36px;
    overflow: hidden;
}

.business-wrap ul .tag {
    display: flex;
    flex-wrap: wrap;
    height: 52px;
    overflow: hidden;
    position: absolute;
    bottom: 40px;
    width: 257px;
}

.business-wrap ul .tag li {
    margin: 0 8px 12px 0;
    color: #111;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
}

.business-wrap ul>li .hover a {
    position: relative;
}

a.no-after::after {
  content: none !important;
}

.business-wrap ul>li .hover a::after {
    content: "";
    position: absolute;
    right: 2rem;
    top: 50%;
    width: 0.8rem;
    height: 1.2rem;
    transform: translateY(-50%);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
    background-image: url(../images/common/ico_lbtn_arrow_color.svg);
}

@media (min-width: 1181px) {
    .business-wrap ul>li .hover {
        display: none;
        margin-top: 24px;
    }
	
	a.no-after {
		font-size: 16px !important;
		display: flex;
		justify-content: center !important;
	}
	
    .business-wrap ul>li .hover a {
        border-image: linear-gradient(to right, #09DD8D 0%, #0097F6 100%);
        border-image-slice: 1;
        overflow: hidden;
        justify-content: flex-start;
        margin: 0 auto;
        background: linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 600;
        font-size: 18px;
        margin-bottom: 16px;
        height: 52px;
    }

    .business-wrap ul>li .hover a:hover::after {
        background-image: url(../images/common/ico_lbtn_arrow_white.svg);
    }

    .business-wrap ul>li .hover a:last-child {
        margin-bottom: 0;
    }

    .business-wrap ul>li .hover a:hover {
        background: linear-gradient(to right, #09DD8D 0%, #0097F6 100%);
        -webkit-text-fill-color: #fff;
    }

    .business-wrap ul>li:hover {
        background: #111;
        border-color: #111;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0 4rem;
    }

    .business-wrap ul>li:hover .icon {
        display: none;
    }

    .business-wrap ul>li:hover h3 {
        text-align: center;
        color: #fff;
    }

    .business-wrap ul>li:hover p {
        display: none;
    }

    .business-wrap ul>li:hover .tag {
        display: none;
    }

    .business-wrap ul>li:hover .hover {
        display: block;
    }

    .business-wrap ul>li:hover::before {
        opacity: 1;
    }

    .business-wrap .hover a:hover {
        color: #fff;
    }

    .business-slide .sub-pagination .swiper-pagination-bullet-active .spinner::after {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
        animation: none;
    }
}

@media (max-width: 1560px) {
    .sub-visual.business .sub-title p {
        font-size: calc(100vw * (24 / 1560));
    }

    .sub-visual.business .sub-title h3 {
        margin: calc(100vw * (36 / 1560)) 0;
    }

    .business-txt {
        margin: calc(100vw * (180 / 1560)) 0;
    }

    .business-txt h3 {
        margin-bottom: calc(100vw * (36 / 1560));
        font-size: calc(100vw * (36 / 1560));
    }

    .business-txt p {
        font-size: calc(100vw * (19 / 1560));
    }

    .business-slide {
        padding: calc(100vw * (180 / 1560)) 0;
    }

    .business-slide::before {
        height: calc(100vw * (833 / 1560));
    }

    .business-slide::after {
        width: calc(100vw * (1256 / 1560));
        height: calc(100vw * (913 / 1560));
    }

    .business-slide .title {
        font-size: calc(100vw * (50 / 1560));
    }

    .business-slide .slide-wrap .container {
        padding: calc(100vw * (60 / 1560)) 0 calc(100vw * (70 / 1560));
    }

    .business-slide .item {
        padding: 0 calc(100vw * (60 / 1560));
    }

    .business-slide .item li:nth-child(2) {
        margin-top: calc(100vw * (40 / 1560));
    }

    .business-slide .item li div {
        height: calc(100vw * (479 / 1560));
    }

    .business-slide .item li .txt-box {
        padding: calc(100vw * (80 / 1560));
    }

    .business-slide .item li .txt-box .inner-box {
        width: calc(100% - calc(100vw * (160 / 1560)));
        bottom: calc(100vw * (80 / 1560));
        left: calc(100vw * (80 / 1560));
    }

    .business-slide .item li .txt-box .num {
        font-size: calc(100vw * (19 / 1560));
    }

    .business-slide .item li .txt-box h4 {
        max-height: calc(100vw * (104 / 1560));
        font-size: calc(100vw * (36 / 1560));
        margin: calc(100vw * (12 / 1560)) 0 calc(100vw * (20 / 1560));
    }

    .business-slide .item li .txt-box p {
        font-size: calc(100vw * (19 / 1560));
        max-height: calc(100vw * (150 / 1560));
    }

    .business-slide .swiper-button-next,
    .business-slide .swiper-button-prev {
        width: calc(100vw * (80 / 1560));
        height: calc(100vw * (80 / 1560));
    }

    .business-slide .swiper-button-prev,
    .business-slide .swiper-container-rtl .swiper-button-next {
        left: calc(100vw * (80 / 1560));
    }

    .business-slide .swiper-button-next,
    .business-slide .swiper-container-rtl .swiper-button-prev {
        right: calc(100vw * (80 / 1560));
    }

    .sub-pagination .swiper-pagination {
        bottom: calc(100vw * (180 / 1560));
    }

    .sub-pagination .swiper-pagination-bullet {
        width: calc(100vw * (6 / 1560));
        height: calc(100vw * (6 / 1560));
        margin: 0 calc(100vw * (4 / 1560));
    }

    .sub-pagination .swiper-pagination-bullet-active {
        margin: 0 calc(100vw * (9 / 1560));
    }

    .business-wrap {
        padding: calc(100vw * (180 / 1560)) 0 calc(100vw * (124 / 1560));
        margin-bottom: calc(100vw * (180 / 1560));
    }

    .business-wrap::after {
        width: calc(100vw * (867 / 1560));
        height: calc(100vw * (474 / 1560));
        bottom: calc(100vw * (-65 / 1560));
    }

    .business-wrap ul>li {
        width: calc(100vw * (333 / 1560));
        height: calc(100vw * (488 / 1560));
        padding: calc(100vw * (40 / 1560)) calc(100vw * (40 / 1560)) calc(100vw * (70 / 1560));
        margin: 0 calc(100vw * (28 / 1560)) calc(100vw * (56 / 1560)) 0;
    }

    .business-wrap ul>li::before {
        height: calc(100vw * (264 / 1560));
    }

    .business-wrap ul>li .icon {
        width: calc(100vw * (60 / 1560));
        height: calc(100vw * (60 / 1560));
        margin-bottom: calc(100vw * (36 / 1560));
    }

    .business-wrap ul>li .icon img {
        box-shadow: 0px calc(100vw * (3 / 1560)) calc(100vw * (30 / 1560)) 0px rgba(62, 176, 191, 0.25);
    }

    .business-wrap ul>li h3 {
        max-height: calc(100vw * (76 / 1560));
        font-size: calc(100vw * (26 / 1560));
    }

    .business-wrap ul>li p {
        font-size: calc(100vw * (19 / 1560));
        height: calc(100vw * (140 / 1560));
        margin: calc(100vw * (12 / 1560)) 0 calc(100vw * (36 / 1560));
    }

    .business-wrap ul .tag {
        height: calc(100vw * (52 / 1560));
        width: calc(100vw * (257 / 1560));
    }

    .business-wrap ul .tag li {
        margin: 0 calc(100vw * (8 / 1560)) calc(100vw * (12 / 1560)) 0;
        font-size: calc(100vw * (18 / 1560));
    }
}

@media (max-width: 1180px) {
	
	a.no-after {
		display: flex;
		justify-content: center !important;
		padding: 5px !important;
	}
	
    .sub-visual.business .sub-title p {
        font-size: calc(100vw * (24 / 1180));
    }

    .sub-visual.business .sub-title h3 {
        margin: calc(100vw * (36 / 1180)) 0;
    }

    .business-txt {
        margin: calc(100vw * (180 / 1180)) 0;
    }

    .business-txt h3 {
        margin-bottom: calc(100vw * (36 / 1180));
        font-size: calc(100vw * (36 / 1180));
    }

    .business-txt p {
        font-size: calc(100vw * (20 / 1180));
        max-width: calc(100vw * (900 / 1180));
        margin: 0 auto;
    }

    .business-txt p br {
        display: none;
    }

    .business-slide {
        padding: calc(100vw * (180 / 1180)) 0;
    }

    .business-slide::before {
        height: calc(100vw * (833 / 1180));
    }

    .business-slide::after {
        width: calc(100vw * (1256 / 1180));
        height: calc(100vw * (913 / 1180));
    }

    .business-slide .pc {
        display: none;
    }

    .business-slide .tab {
        display: block;
        overflow: hidden;
    }

    .business-slide .title {
        font-size: calc(100vw * (50 / 1180));
    }

    .business-slide .swiper-slide {
        width: 820px !important;
    }

    .business-slide .slide-wrap .container {
        padding: calc(100vw * (60 / 1180)) 0 calc(100vw * (70 / 1180));
        margin: 0 calc(100vw * (60 / 1180));
    }

    .business-slide .item {
        width: 100%;
        padding: 0;
    }

    .business-slide .item li {
        display: block;
    }

    .business-slide .item li:nth-child(2) {
        margin-top: 0;
    }

    .business-slide .item li div {
        width: 100%;
        height: auto;
    }

    .business-slide .item li .txt-box {
        height: calc(100vw * (455 / 1180));
        padding: calc(100vw * (60 / 1180));
    }

    .business-slide .item li .txt-box .inner-box {
        position: relative;
        width: 100%;
        bottom: 0;
        left: 0;
    }

    .business-slide .item li .txt-box .num {
        font-size: calc(100vw * (19 / 1180));
    }

    .business-slide .item li .txt-box h4 {
        max-height: calc(100vw * (104 / 1180));
        font-size: calc(100vw * (36 / 1180));
        margin: calc(100vw * (12 / 1180)) 0 calc(100vw * (20 / 1180));
    }

    .business-slide .item li .txt-box p {
        font-size: calc(100vw * (19 / 1180));
        max-height: calc(100vw * (150 / 1180));
    }

    .business-slide .sub-pagination .swiper-pagination {
        left: calc(50% - calc(100vw * (60 / 1180)));
    }

    .business-slide .swiper-button-next,
    .business-slide .swiper-button-prev {
        display: none;
    }

    .sub-pagination .swiper-pagination {
        bottom: calc(100vw * (4 / 1180));
    }

    .sub-pagination .swiper-pagination-bullet {
        width: calc(100vw * (6 / 1180));
        height: calc(100vw * (6 / 1180));
        margin: 0 calc(100vw * (4 / 1180));
    }

    .sub-pagination .swiper-pagination-bullet-active {
        margin: 0 calc(100vw * (9 / 1180));
    }

    .business-wrap {
        padding: calc(100vw * (180 / 1180)) 0;
        margin-bottom: calc(100vw * (180 / 1180));
    }

    .business-wrap::after {
        display: none;
    }

    .business-wrap ul>li {
        width: 100%;
        height: calc(100vw * (400 / 1180));
        padding: calc(100vw * (40 / 1180)) calc(100vw * (390 / 1180)) calc(100vw * (60 / 1180)) calc(100vw * (40 / 1180));
        margin: 0 0 calc(100vw * (28 / 1180));
    }

    .business-wrap ul>li::before {
        width: 100%;
        height: calc(100vw * (264 / 1180));
        background-size: cover;
    }

    .business-wrap ul>li:last-child {
        margin-bottom: 0;
    }

    .business-wrap ul>li .icon {
        width: calc(100vw * (80 / 1180));
        height: calc(100vw * (80 / 1180));
        margin-bottom: calc(100vw * (26 / 1180));
        text-align: left;
    }

    .business-wrap ul>li .icon img {
        box-shadow: 0px calc(100vw * (3 / 1180)) calc(100vw * (30 / 1180)) 0px rgba(62, 176, 191, 0.25);
    }

    .business-wrap ul>li h3 {
        max-height: 100%;
        font-size: calc(100vw * (26 / 1180));
    }

    .business-wrap ul>li p {
        font-size: calc(100vw * (19 / 1180));
        height: calc(100vw * (60 / 1180));
        margin: calc(100vw * (12 / 1180)) 0 calc(100vw * (36 / 1180));
    }

    .business-wrap ul .tag {
        height: calc(100vw * (23 / 1180));
        position: static;
        width: 100%;
    }

    .business-wrap ul .tag li {
        margin: 0 calc(100vw * (8 / 1180)) 0 0;
        font-size: calc(100vw * (18 / 1180));
    }

    .business-wrap .hover {
        position: absolute;
        top: 50%;
        right: calc(100vw * (60 / 1180));
        transform: translateY(-50%);
    }

    .business-wrap .hover a {
        margin-bottom: calc(100vw * (16 / 1180));
        color: #555;
        font-size: calc(100vw * (18 / 1180));
        font-weight: 600;
        height: calc(100vw * (52 / 1180));
    }

    .business-wrap .hover a:last-child {
        margin-bottom: 0;
    }

    .business-wrap ul>li .hover a::after {
        width: calc(100vw * (8 / 1180));
        height: calc(100vw * (12 / 1180));
        right: calc(100vw * (28 / 1180));
        background: url(../images/business/button-gray.svg)no-repeat;
        background-size: contain;
    }

    /* sub-pagination */
    .sub-pagination .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        margin: 0 4px;
    }

    .sub-pagination .swiper-pagination-bullet-active {
        margin: 0 9px;
    }

    .sub-pagination .spinner {
        width: 16px;
        height: 16px;
        border-width: 3px;
    }

    .sub-pagination .spinner::after {
        inset: -3px;
        -webkit-mask: radial-gradient(5px, transparent 95%, #000) 0 0;
        mask: radial-gradient(5px, transparent 95%, #000) 0 0;
    }

}

@media (max-width: 1023px) and (min-width: 768px) {
    .business-slide .slide-wrap .container {
        margin: 0 calc(100vw * (60 / 1180));
        overflow: hidden;
        position: relative;
    }

    .business-slide .swiper-slide {
        width: 690px !important;
    }
    
    .mo {
        display: none;
    }
}

@media (max-width: 767px) {
    .sub-visual.business .sub-title p {
        font-size: calc(100vw * (36 / 767));
    }

    .sub-visual.business .sub-title h3 {
        margin: calc(100vw * (48 / 767)) 0 calc(100vw * (38 / 767));
    }

    .business-txt {
        margin: calc(100vw * (180 / 767)) 0;
    }

    .business-txt h3 {
        margin-bottom: calc(100vw * (60 / 767));
        font-size: calc(100vw * (52 / 767));
    }

    .business-txt br {
        display: none;
    }

    .business-txt p {
        font-size: calc(100vw * (32 / 767));
        max-width: 100%;
    }

    .business-slide {
        padding: calc(100vw * (180 / 767)) 0;
    }

    .business-slide::before {
        height: calc(100vw * (1600 / 767));
        background-size: cover;
    }

    .business-slide .title {
        font-size: calc(100vw * (64 / 767));
    }

    .business-slide .swiper-slide {
        width: 100% !important;
    }

    .business-slide .tab {
        padding: 0 calc(100vw * (48 / 767));
    }

    .business-slide .slide-wrap .container {
        margin: 0;
        padding: calc(100vw * (72 / 767)) 0 0;
    }

    .business-slide .item {
        width: 100%;
        padding: 0;
    }

    .business-slide .item li div {
        width: 100%;
        height: calc(100vw * (435 / 767));
    }

    .business-slide .item li .txt-box {
        height: calc(130vw * (587 / 767));
        padding: calc(100vw * (48 / 767));
    }

    .business-slide .item li .txt-box .num {
        font-size: calc(100vw * (28 / 767));
    }

    .business-slide .item li .txt-box h4 {
        max-height: calc(100vw * (112 / 767));
        font-size: calc(100vw * (40 / 767));
        margin: calc(100vw * (12 / 767)) 0 calc(100vw * (20 / 767));
    }

    .business-slide .item li .txt-box p {
        font-size: calc(100vw * (32 / 767));
        max-height: calc(160vw * (306 / 767));
    }

    .business-slide .sub-pagination .swiper-pagination {
        left: 50%;
    }

    .sub-pagination {
        height: calc(100vw * (36 / 767));
        margin-top: calc(100vw * (52 / 767));
    }

    .sub-pagination .swiper-pagination {
        display: block;
        bottom: calc(100vw * (8 / 767));
        left: 50%;
    }

    .sub-pagination .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
        margin: 0 5px;
    }

    .sub-pagination .swiper-pagination-bullet-active {
        margin: 0 16px;
    }

    .sub-pagination .spinner {
        width: 36px;
        height: 36px;
        border-width: 6px;
    }

    .sub-pagination .spinner::after {
        inset: -6px;
        -webkit-mask: radial-gradient(12px, transparent 95%, #000) 0 0;
        mask: radial-gradient(12px, transparent 95%, #000) 0 0;
    }

    .business-wrap {
        padding: calc(100vw * (180 / 767)) 0;
        margin-bottom: calc(100vw * (180 / 767));
    }

    .business-wrap ul>li {
        width: 100%;
        height: 100%;
        padding: calc(100vw * (60 / 767));
        margin: 0 0 calc(100vw * (72 / 767));
    }

    .business-wrap ul>li::before {
        display: none;
    }

    .business-wrap ul>li .icon {
        width: calc(100vw * (120 / 767));
        height: calc(100vw * (120 / 767));
        margin: 0 0 calc(100vw * (68 / 767)) auto;
    }

    .business-wrap ul>li .icon img {
        box-shadow: 0px calc(100vw * (6 / 767)) calc(100vw * (60 / 767)) 0px rgba(62, 176, 191, 0.25)
    }

    .business-wrap ul>li h3 {
        height: auto;
        max-height: 100%;
        font-size: calc(100vw * (44 / 767));
    }

    .business-wrap ul>li p {
        font-size: calc(100vw * (32 / 767));
        height: auto;
        margin: calc(100vw * (24 / 767)) 0 calc(100vw * (60 / 767));
    }

    .business-wrap ul .tag {
        height: auto;
    }

    .business-wrap ul .tag li {
        margin: 0 calc(100vw * (8 / 767)) calc(100vw * (8 / 767)) 0;
        font-size: calc(100vw * (32 / 767));
    }

    .business-wrap .hover {
        margin-top: calc(100vw * (60 / 767));
        top: 0;
        right: 0;
        position: relative;
        transform: translateY(0);
    }

    .business-wrap .hover a {
        width: calc(100vw * (480 / 767));
        margin: 0 auto calc(100vw * (24 / 767));
        padding: 0 calc(100vw * (40 / 767));
        height: calc(100vw * (96 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .business-wrap ul>li .hover a::after {
        width: calc(100vw * (13 / 767));
        height: calc(100vw * (20 / 767));
        background-size: contain;
        right: calc(100vw * (40 / 767));
    }
}

@media (max-width: 480px) {
    .sub-pagination .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        margin: 0 2px;
    }

    .sub-pagination .swiper-pagination-bullet-active {
        margin: 0 7px;
    }

    .sub-pagination .spinner {
        width: 18px;
        height: 18px;
        border-width: 3px;
    }

    .sub-pagination .spinner::after {
        inset: -3px;
        -webkit-mask: radial-gradient(6px, transparent 95%, #000) 0 0;
        mask: radial-gradient(6px, transparent 95%, #000) 0 0;
    }
}

/* 다국어 */
@media (min-width: 1561px) {
    :lang(en) .business-slide .item li .txt-box {
        padding: 70px;
    }

    :lang(en) .business-slide .item li .txt-box .inner-box {
        bottom: auto;
    }

    :lang(en) .business-slide .item li .txt-box h4 {
        font-size: 34px;
        line-height: 1.4;
    }

    :lang(en) .business-slide .item li .txt-box p {
        font-size: 16px;
        max-height: 100%;
    }

    :lang(en) .business-wrap ul>li {
        height: 560px;
    }

    :lang(en) .business-wrap ul>li p {
        font-size: 16px;
        height: 185px;
    }

    :lang(en) .business-wrap ul .tag {
        display: block;
        height: auto;
        bottom: auto;
        position: relative;
    }

    :lang(en) .business-wrap ul .tag li {
        display: inline-block;
        margin: 0 6px 0;
        line-height: 1.4;
        font-size: 16px;
    }

    :lang(en) .business-wrap ul>li .icon {
        margin-bottom: 18px;
    }

    :lang(en) .business-wrap ul>li h3 {
        max-height: 100%;
        font-size: 24px;
        line-height: 1.4;
    }
}

@media (max-width: 1561px) and (min-width: 1181px) {
    :lang(en) .business-slide .item li .txt-box {
        padding: calc(100vw * (70 / 1560));
    }

    :lang(en) .business-slide .item li .txt-box h4 {
        font-size: calc(100vw * (34 / 1560));
        max-height: 100%;
    }

    :lang(en) .business-slide .item li .txt-box p {
        font-size: calc(100vw * (16 / 1560));
        max-height: 100%;
    }

    :lang(en) .business-slide .item li .txt-box .inner-box {
        bottom: auto;
        left: calc(100vw * (80 / 1560));
    }

    :lang(en) .business-wrap ul>li {
        height: auto;
    }

    :lang(en) .business-wrap ul>li p {
        font-size: calc(100vw * (16 / 1560));
        height: auto;
    }

    :lang(en) .business-wrap ul .tag {
        display: block;
        height: auto;
        bottom: auto;
        position: relative;
    }

    :lang(en) .business-wrap ul .tag li {
        display: inline-block;
        margin: 0 6px 0;
        line-height: 1.4;
        font-size: calc(100vw * (16 / 1560));
    }

    :lang(en) .business-wrap ul>li .icon {
        margin-bottom: calc(100vw * (18 / 1560));
    }

    :lang(en) .business-wrap ul>li h3 {
        max-height: 100%;
        font-size: calc(100vw * (24 / 1560));
        line-height: 1.4;
    }

}

@media (max-width: 1180px) {
    :lang(en) .business-slide .item li .txt-box {
        height: 100%;
    }

    :lang(en) .business-slide .item li .txt-box p {
        max-height: 100%;
        height: calc(100vw * (210 / 1180))
    }

    :lang(en) .business-slide .item li .txt-box h4 {
        max-height: 100%;
        height: calc(100vw * (100 / 1180));
    }

    :lang(en) .business-wrap ul>li p {
        height: auto;
    }

    :lang(en) .business-wrap ul>li {
        height: auto;
    }

    :lang(en) .business-wrap ul .tag {
        height: auto;
    }

    :lang(en) .business-wrap ul .tag li {
        line-height: 1.3;
    }
}

@media (max-width: 767px) {
    :lang(en) .business-slide .item li .txt-box h4 {
        max-height: 100%;
        height: auto;
    }

    :lang(en) .business-slide .item li .txt-box p {
        height: auto;
    }
}

/* 제품 */
/* 제품 css */

.product-title-center {
    margin-bottom: 6rem;
    text-align: center;
}

.product-title-center h2 {
    margin-bottom: 3.2rem;
    font-size: 5rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: capitalize;
}

.product-title-center p {
    max-width: 91rem;
    margin: 0 auto;
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1.8;
}

.product-title-center strong {
    color: #111;
    margin-bottom: 1.2rem;
    display: block;
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1;
}

.product-special {
    padding: 18rem 0;
    background: #0097F6;
    color: #FFF;
}

.product-special h2 {
    color: #fff;
}

.product-special .special-box {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

.product-special .special-box li {
    position: relative;
    margin-right: 2.8rem;
    padding: 3rem;
    width: 26.5rem;
    height: 26.5rem;
    border: 1px solid #CDDCE5;
    background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.80) 100%);
}

.product-special .special-box li:last-child {
    margin-right: 0;
}

.product-special .special-box li .num {
    display: block;
    color: #0097F6;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
}

.product-special .special-box li h3 {
    overflow: hidden;
    max-height: 7.5rem;
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1.45;
    margin: 2rem 0 0.6rem;
}

.product-special .special-box li p {
    max-width: 14rem;
    max-height: 5.5rem;
    margin-bottom: 4.8rem;
    color: #555;
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1.45;
    overflow: hidden;
}

.product-special .special-box li .icon {
    text-align: right;
    display: block;
    position: absolute;
    bottom: 3rem;
    right: 3rem;
    width: 6rem;
    height: 6rem;
}

.product-special .special-box li .icon img {
    width: 100%;
    height: 100%;
    box-shadow: 0px 4px 40px 0px rgba(62, 176, 191, 0.25);
    border-radius: 50%;
}

.product-system {
    margin: 12rem 0 18rem;
}

.product-system .system-title {
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 3.6rem;
}

.product-system .system-box1 {
    margin-bottom: 12rem;
}

/* .product-system .system-box1 .diagram-box { border: 1px solid #CDDCE5; } */
/* .product-system .diagram-box { width: 100%; padding: 7rem 0; background: #F6F6F6; text-align: center; } */
.product-system .diagram-box {
    width: 100%;
    text-align: center;
}

.product-system .diagram-box img {
    margin-bottom: 40px;
}

.tab {
    display: none;
}

.tab-title {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.tab-title li {
    width: 100%
}

/* .tab-title-1 li { width:100% }
.tab-title-2 li { width:calc(100%/2) }
.tab-title-4 li { width:calc(100%/4) }
.tab-title-5 li { width:calc(100%/5) } */
.tab-title li a {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    height: 7.2rem;
    border-right: 1px solid #C8DBE7;
    border-bottom: 1px solid #C8DBE7;
    background: #D6E7F1;
    color: rgba(17, 17, 17, 0.50);
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1;
}

.tab-title li.on a {
    background: #111;
    color: #fff
}

.product-system .system-box2 .tab-title {
    border: 1px solid #C8DBE7;
    border-bottom: 0;
    border-right: 0;
    /*flex-wrap: wrap;*/
}

.product-system .system-box2 .tab {
    border: 1px solid #C8DBE7;
    padding: 8rem;
}

.product-system .system-box2 .tab h4 {
    text-align: left;
    font-weight: 700;
    line-height: 1.4;
    font-size: 36px;
}

.product-system .system-box2 .tab p.f19 {
    margin: 1.4rem 0 6rem;
    color: #555;
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1.45;
}

.product-system .system-box2 .tab .caption-txt {
    color: #111;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.45;
    text-align: center;
    margin: 28px 0 6px;
}

.product-system .system-box2 .tab .caption {
    color: #555;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.45;
}

.product-system .features-box {
    margin-top: 6rem;
}

.product-system .system-box2 .tab .features-box h4 {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 2.8rem;
    text-align: center;
}

.product-system .features-box ul {
    display: flex;
    flex-wrap: wrap;
    margin-right: -28px;
}

.product-system .features-box ul li {
    position: relative;
    width: calc(33.33% - 28px);
    min-height: 27.6rem;
    margin: 0 2.8rem 4rem 0;
    border-top: 2px solid #0097F6;
    padding-top: 3.2rem;
}

.product-system .features-box ul li .num {
    padding-right: 2rem;
    position: relative;
    top: 0.2rem;
    color: #0097F6;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.product-system .features-box ul li h5 {
    display: flex;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 2.8rem;
}

.product-system .features-box ul li p {
    height: 12.8rem;
    overflow: hidden;
    opacity: 0;
    color: #FFF;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.6
}

.product-system .features-box ul li .icon {
    position: absolute;
    bottom: 6.6rem;
    right: 0;
    width: 6rem;
    height: 6rem;
}

.product-system .features-box ul li .icon img {
    width: 100%;
    height: 100%;
    box-shadow: 0px 3px 30px 0px rgba(62, 176, 191, 0.25);
    border-radius: 50%;
}

.product-talkbot {
    position: relative;
    padding: 18rem 0 calc(18rem - 2.8rem);
}

.product-talkbot::before {
    content: "";
    background: url(../images/product/talkbot-bg.png)no-repeat;
    background-size: contain;
    width: 100%;
    height: 96.7rem;
    position: absolute;
    top: 0;
    left: 0;
}

.product-talkbot ul {
    margin-right: -2.8rem;
    display: flex;
    flex-wrap: wrap;
}

.product-talkbot ul li {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    height: 11rem;
    padding: 2.5rem 4.8rem;
    width: calc(50% - 2.8rem);
    margin: 0 2.8rem 2.8rem 0;
    border: 1px solid #CDDCE5;
    background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.40) 100%);
    box-shadow: 0px 4px 40px 0px rgba(62, 176, 191, 0.10);
}

.product-talkbot ul li p {
    overflow: hidden;
    width: calc(100% - 6rem);
    max-height: 7.2rem;
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1.45;
    color: #111;
}

.product-talkbot ul li .icon {
    width: 6rem;
}

.product-equipment {
    padding: 12rem 0 19.4rem;
    margin-bottom: 18rem;
    background-color: #F9FBFA;
}

.product-equipment h3.title {
    margin-bottom: 3.6rem;
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1;
}

.equipment li {
    background-color: #fff;
    line-height: 1.3;
    margin-bottom: 1.2rem;
}

.equipment li.on .title h3 {
    color: #0097F6;
}

.equipment li:last-child {
    margin-bottom: 0;
}

.equipment .title {
    padding: 2.6rem 4rem;
    position: relative;
    cursor: pointer;
    font-size: 2.6rem;
    font-weight: 600;
    line-height: 1;
}

.equipment .title:after {
    width: 1.3rem;
    height: 1.3rem;
    border-right: 2px solid #555;
    border-top: 2px solid #555;
    position: absolute;
    right: 4.6rem;
    top: 50%;
    margin-top: -0.7rem;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    content: '';
}

.equipment .title h3 {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding-right: 40px;
}

.equipment .title span {
    margin-right: 2rem;
    width: 4.8rem;
    height: 4.8rem;
    background: #F4F9FC;
    border-radius: 50%;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    color: #0097F6;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.equipment .content-box {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-bottom: 0;
    align-items: center;
}

.equipment .content-box .img {
    position: relative;
    padding: 3.6rem 1.5rem;
    z-index: 1;
    width: 35.9rem;
    height: 24.9rem;
}

.equipment .content-box .img::after {
    content: "";
    width: 32.2rem;
    height: 32.2rem;
    border-radius: 50%;
    background: #D6E7F1;
    position: absolute;
    top: 50%;
    right: 0;
    z-index: -1;
    transform: translateY(-50%);
}

.equipment .content-box .img img {
    width: 100%;
    box-shadow: 0px 4px 40px 0px rgba(62, 176, 191, 0.10);
}

.equipment .content-box .img.pc {
    display: flex;
    align-items: center;
    justify-content: center;
}

.equipment .content {
    display: none;
    padding: 7.4rem 8.8rem 10.2rem;
    border-top: 1px solid #EAEFF2;
}

.equipment .content p {
    font-size: 3.6rem;
    font-weight: 400;
    line-height: 1.45;
    color: #111;
    max-width: 70rem;
}

.equipment .content p b {
    font-weight: 600;
}

.equipment .content .list {
    margin-top: 4rem;
}

.equipment .content .btn-area {
    margin-top: 4.8rem;
}

.equipment .content .btn-area .btn {
    width: 30rem;
}

.equipment .on .title:after {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
}


.product-success {
    margin: 16.6rem 0 18rem;
}

.product-success ul {
    flex-wrap: nowrap;
    justify-content: space-between;
}

.product-success .tab {
    padding: 8rem 9rem;
    background: #F9FBFA;
    border: 1px solid #C8DBE7;
    border-top: none;
}

.product-success .txt-box {
    padding-top: 3rem;
    max-width: 74.8rem;
}

.product-success .txt-box>span {
    background: var(--gr, linear-gradient(305deg, #0097F6 0%, #09DD8D 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.45;
    display: inline-block;
}

.product-success .txt-box h3 {
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 1.45;
    margin: 1.6rem 0 1.8rem;
}

.product-success .txt-box p {
    margin-bottom: 4.8rem;
    color: #555;
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1.6;
}

.product-success .txt-box .list li {
    color: #111
}

.product-success .img-box .img {
    box-shadow: 0px 4px 40px 0px rgba(62, 176, 191, 0.10);
    border-radius: 100%;
    width: 36rem;
    height: 36rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-success .img-box .list {
    margin-top: 4rem;
    max-width: 36rem;
}

.product-success .img-box .list li {
    color: #111;
    font-weight: 600;
}

.product-reference {
    margin-bottom: 18rem;
    overflow: hidden;
}

.product-reference .content-border {
    display: flex;
    flex-wrap: wrap;
    margin-right: -2.8rem;
}

.product-reference .content-border.on {
    max-height: 100%;
}

.product-reference .content-border li {
    position: relative;
    padding: 4rem 3rem;
    width: 33.9rem;
    height: 33.9rem;
    margin: 0 2.8rem 2.8rem 0;
    background: #F9FBFA;
    border: 1px solid #CDDCE5;
    display: none;
}

.product-reference .content-border li.on {
    display: block;
}

.product-reference .content-border li .cate {
    display: block;
    max-height: 5.2rem;
    margin-bottom: 1.6rem;
    color: #555;
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1.45;
    overflow: hidden;
}

.product-reference .content-border li h3 {
    max-height: 13rem;
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.45;
    overflow: hidden;
}

.product-reference .content-border li p {
    max-width: 26rem;
    max-height: 11rem;
    display: none;
    color: #111;
    text-align: right;
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1.45;
    position: absolute;
    bottom: 4rem;
    right: 4rem;
    overflow: hidden;
}

.product-reference .content-border li .icon {
    display: block;
    text-align: right;
    position: absolute;
    bottom: 4rem;
    right: 4rem;
}

.product-reference .content-border li .icon img {
    max-width: 14.4rem;
    mix-blend-mode: multiply;
}

.banner {
    overflow: hidden;
}

.banner h2 {
    text-align: center;
    line-height: 1.4;
    font-size: 4rem;
}

.product-talkbot ul li .icon img {
    width: 100%;
    box-shadow: 0px 3px 30.000001907348633px 0px rgba(62, 176, 191, 0.25);
    border-radius: 50%;
}

.product-video {
    background-color: #F9FBFA;
}

.product-video video {
    width: 100%;
}

@media (min-width: 1181px) {
    .tab-title li a:hover {
        background: #111;
        color: #fff
    }

    .product-system .features-box ul li:hover {
        background: #0097F6;
        padding: 3rem;
    }

    .product-system .features-box ul li:hover .num {
        display: none;
    }

    .product-system .features-box ul li:hover h5 {
        color: #fff;
        margin-bottom: 1rem;
    }

    .product-system .features-box ul li:hover p {
        opacity: 1;
    }

    .product-system .features-box ul li:hover .icon {
        display: none;
    }

    .product-reference .content-border li:hover {
        border-image: linear-gradient(to right, #09DD8D 0%, #0097F6 100%);
        border-image-slice: 1;
        border-width: 2px;
    }

    .product-reference .content-border li:hover .cate {
        display: none;
    }

    .product-reference .content-border li:hover h3 {
        background: linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }

    .product-reference .content-border li:hover p {
        display: block;
    }

    .product-reference .content-border li:hover .icon {
        display: none;
    }
}

@media (min-width: 768px) {
    .product-system .features-box ul li:nth-child(1) {
        margin-bottom: 0;
    }

    .product-system .features-box ul li:nth-child(2) {
        margin-bottom: 0;
    }

    .product-system .features-box ul li:nth-child(3) {
        margin-bottom: 0;
    }
}

@media (max-width: 1560px) {
    .product-title-center {
        margin-bottom: calc(100vw * (60 / 1560));
    }

    .product-title-center h2 {
        margin-bottom: calc(100vw * (32 / 1560));
        font-size: calc(100vw * (50 / 1560));
    }

    .product-title-center p {
        max-width: calc(100vw * (910 / 1560));
        font-size: calc(100vw * (19 / 1560));
    }

    .product-title-center strong {
        margin-bottom: calc(100vw * (12 / 1560));
        font-size: calc(100vw * (26 / 1560));
    }

    .product-special {
        padding: calc(100vw * (180 / 1560)) 0;
    }

    .product-special .special-box li {
        margin-right: calc(100vw * (28 / 1560));
        padding: calc(100vw * (30 / 1560));
        width: calc(100vw * (265 / 1560));
        height: calc(100vw * (265 / 1560));
    }

    .product-special .special-box li .num {
        font-size: calc(100vw * (16 / 1560));
    }

    .product-special .special-box li h3 {
        max-height: calc(100vw * (75 / 1560));
        font-size: calc(100vw * (26 / 1560));
        margin: calc(100vw * (20 / 1560)) 0 calc(100vw * (6 / 1560));
    }

    .product-special .special-box li p {
        max-width: calc(100vw * (140 / 1560));
        max-height: calc(100vw * (55 / 1560));
        margin-bottom: calc(100vw * (48 / 1560));
        font-size: calc(100vw * (19 / 1560));
    }

    .product-special .special-box li .icon {
        bottom: calc(100vw * (30 / 1560));
        right: calc(100vw * (30 / 1560));
        width: calc(100vw * (60 / 1560));
        height: calc(100vw * (60 / 1560));
    }

    .product-special .special-box li .icon img {
        box-shadow: 0px calc(100vw * (4 / 1560)) calc(100vw * (40 / 1560)) 0px rgba(62, 176, 191, 0.25);
    }

    .product-system {
        margin: calc(100vw * (120 / 1560)) 0 calc(100vw * (180 / 1560));
    }

    .product-system .system-title {
        font-size: calc(100vw * (34 / 1560));
        margin-bottom: calc(100vw * (36 / 1560));
    }

    .product-system .system-box1 {
        margin-bottom: calc(100vw * (120 / 1560));
    }

    .product-system .diagram-box img {
        margin-bottom: calc(100vw * (40 / 1560));
    }

    .tab-title li a {
        height: calc(100vw * (72 / 1560));
        font-size: calc(100vw * (24 / 1560));
    }

    .product-system .system-box2 .tab {
        padding: calc(100vw * (80 / 1560));
    }

    .product-system .system-box2 .tab h4 {
        font-size: calc(100vw * (36 / 1560));
    }

    .product-system .system-box2 .tab p.f19 {
        margin: calc(100vw * (14 / 1560)) 0 calc(100vw * (60 / 1560));
        font-size: calc(100vw * (19 / 1560));
    }

    .product-system .system-box2 .tab .caption-txt {
        font-size: calc(100vw * (22 / 1560));
        margin: calc(100vw * (28 / 1560)) 0 calc(100vw * (6 / 1560));
    }

    .product-system .system-box2 .tab .caption {
        font-size: calc(100vw * (16 / 1560));
    }

    .product-system .features-box {
        margin-top: calc(100vw * (60 / 1560));
    }

    .product-system .features-box h4 {
        font-size: calc(100vw * (24 / 1560));
        margin-bottom: calc(100vw * (28 / 1560));
    }

    .product-system .features-box ul {
        margin-right: calc(100vw * (-28 / 1560));
    }

    .product-system .features-box ul li {
        width: calc(33.33% - calc(100vw * (28 / 1560)));
        height: calc(100vw * (276 / 1560));
        margin-right: calc(100vw * (28 / 1560));
        padding-top: calc(100vw * (32 / 1560));
    }

    .product-system .features-box ul li .num {
        padding-right: calc(100vw * (20 / 1560));
        top: calc(100vw * (2 / 1560));
        font-size: calc(100vw * (16 / 1560));
    }

    .product-system .features-box ul li h5 {
        font-size: calc(100vw * (24 / 1560));
        margin-bottom: calc(100vw * (28 / 1560));
    }

    .product-system .features-box ul li p {
        height: calc(100vw * (128 / 1560));
        font-size: calc(100vw * (16 / 1560));
    }

    .product-system .features-box ul li .icon {
        bottom: calc(100vw * (66 / 1560));
        width: calc(100vw * (60 / 1560));
        height: calc(100vw * (60 / 1560));
    }

    .product-system .features-box ul li .icon img {
        box-shadow: 0px calc(100vw * (3 / 1560)) calc(100vw * (30 / 1560)) 0px rgba(62, 176, 191, 0.25);
    }

    .product-talkbot {
        padding: calc(100vw * (180 / 1560)) 0 calc(100vw * (152 / 1560));
    }

    .product-talkbot::before {
        height: calc(100vw * (967 / 1560));
    }

    .product-talkbot ul {
        margin-right: calc(100vw * (-28 / 1560));
    }

    .product-talkbot ul li {
        height: calc(100vw * (110 / 1560));
        padding: calc(100vw * (25 / 1560)) calc(100vw * (48 / 1560));
        width: calc(50% - calc(100vw * (28 / 1560)));
        margin: 0 calc(100vw * (28 / 1560)) calc(100vw * (28 / 1560)) 0;
    }

    .product-talkbot ul li p {
        width: calc(100% - calc(100vw * (60 / 1560)));
        max-height: calc(100vw * (72 / 1560));
        font-size: calc(100vw * (26 / 1560));
    }

    .product-talkbot ul li .icon {
        width: calc(100vw * (60 / 1560));
    }

    .product-equipment {
        padding: calc(100vw * (120 / 1560)) 0 calc(100vw * (194 / 1560));
        margin-bottom: calc(100vw * (180 / 1560));
    }

    .product-equipment h3.title {
        margin-bottom: calc(100vw * (36 / 1560));
        font-size: calc(100vw * (34 / 1560));
    }

    .equipment li {
        margin-bottom: calc(100vw * (12 / 1560));
    }

    .equipment .title {
        padding: calc(100vw * (26 / 1560)) calc(100vw * (40 / 1560));
        font-size: calc(100vw * (26 / 1560));
    }

    .equipment .title:after {
        width: calc(100vw * (13 / 1560));
        height: calc(100vw * (13 / 1560));
        right: calc(100vw * (47 / 1560));
        margin-top: calc(100vw * (-7 / 1560));
    }

    .equipment .title h3 {
        padding-right: calc(100vw * (40 / 1560));
    }

    .equipment .title span {
        margin-right: calc(100vw * (20 / 1560));
        width: calc(100vw * (48 / 1560));
        height: calc(100vw * (48 / 1560));
        font-size: calc(100vw * (16 / 1560));
    }

    .equipment .content-box .img {
        padding: calc(100vw * (36 / 1560)) calc(100vw * (15 / 1560));
        width: calc(100vw * (359 / 1560));
        height: calc(100vw * (249 / 1560));
    }

    .equipment .content-box .img::after {
        width: calc(100vw * (322 / 1560));
        height: calc(100vw * (322 / 1560));
    }

    .equipment .content {
        padding: calc(100vw * (74 / 1560)) calc(100vw * (88 / 1560)) calc(100vw * (102 / 1560));
    }

    .equipment .content p {
        font-size: calc(100vw * (36 / 1560));
        max-width: calc(100vw * (700 / 1560));
    }

    .equipment .content .list {
        margin-top: calc(100vw * (40 / 1560));
    }

    .equipment .content .btn-area {
        margin-top: calc(100vw * (48 / 1560));
    }

    .equipment .content .btn-area .btn {
        width: calc(100vw * (300 / 1560));
    }

    .product-success {
        margin: calc(100vw * (166 / 1560)) 0 calc(100vw * (180 / 1560));
    }

    .product-success .tab {
        padding: calc(100vw * (80 / 1560)) calc(100vw * (90 / 1560));
    }

    .product-success .txt-box {
        padding-top: calc(100vw * (30 / 1560));
        max-width: calc(100vw * (748 / 1560));
    }

    .product-success .txt-box>span {
        font-size: calc(100vw * (24 / 1560));
    }

    .product-success .txt-box h3 {
        font-size: calc(100vw * (36 / 1560));
        margin: calc(100vw * (16 / 1560)) 0 calc(100vw * (18 / 1560));
    }

    .product-success .txt-box p {
        margin-bottom: calc(100vw * (48 / 1560));
        font-size: calc(100vw * (19 / 1560));
    }

    .product-success .img-box .img {
        width: calc(100vw * (360 / 1560));
        height: calc(100vw * (360 / 1560));
    }

    .product-success .img-box .list {
        margin-top: calc(100vw * (40 / 1560));
        max-width: calc(100vw * (360 / 1560));
    }

    .product-reference {
        margin-bottom: calc(100vw * (180 / 1560));
    }

    .product-reference .content-border {
        margin-right: calc(100vw * (-28 / 1560));
    }

    .product-reference .content-border li {
        padding: calc(100vw * (40 / 1560)) calc(100vw * (30 / 1560));
        width: calc(100vw * (339 / 1560));
        height: calc(100vw * (339 / 1560));
        margin: 0 calc(100vw * (28 / 1560)) calc(100vw * (28 / 1560)) 0;
    }

    .product-reference .content-border li:nth-child(4n) {
        margin-right: 0;
    }

    .product-reference .content-border li .cate {
        max-height: calc(100vw * (52 / 1560));
        margin-bottom: calc(100vw * (16 / 1560));
        font-size: calc(100vw * (19 / 1560));
    }

    .product-reference .content-border li h3 {
        max-height: calc(100vw * (130 / 1560));
        font-size: calc(100vw * (30 / 1560));
    }

    .product-reference .content-border li p {
        max-width: calc(100vw * (260 / 1560));
        max-height: calc(100vw * (110 / 1560));
        font-size: calc(100vw * (19 / 1560));
        bottom: calc(100vw * (40 / 1560));
        right: calc(100vw * (40 / 1560));
    }

    .product-reference .content-border li .icon {
        bottom: calc(100vw * (40 / 1560));
        right: calc(100vw * (40 / 1560))
    }

    .product-reference .content-border li .icon img {
        max-width: calc(100vw * (144 / 1560))
    }
}

@media (max-width: 1180px) {
    .product-title-center {
        margin-bottom: calc(100vw * (60 / 1180));
    }

    .product-title-center h2 {
        margin-bottom: calc(100vw * (32 / 1180));
        font-size: calc(100vw * (50 / 1180));
    }

    .product-title-center p {
        max-width: calc(100vw * (980 / 1180));
        font-size: calc(100vw * (20 / 1180));
    }

    .product-title-center strong {
        margin-bottom: calc(100vw * (12 / 1180));
        font-size: calc(100vw * (26 / 1180));
    }

    .product-special {
        padding: calc(100vw * (180 / 1180)) 0;
    }

    .product-special .special-box {
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-right: calc(100vw * (-28 / 1180));
    }

    .product-special .special-box li {
        margin: 0 calc(100vw * (28 / 1180)) calc(100vw * (28 / 1180)) 0;
        padding: calc(100vw * (40 / 1180));
        width: calc(33.33% - calc(100vw * (28 / 1180)));
        height: calc(100vw * (334 / 1180));
    }

    .product-special .special-box li .num {
        font-size: calc(100vw * (17 / 1180));
    }

    .product-special .special-box li h3 {
        max-height: calc(100vw * (82 / 1180));
        font-size: calc(100vw * (30 / 1180));
        margin: calc(100vw * (20 / 1180)) 0 calc(100vw * (6 / 1180));
    }

    .product-special .special-box li p {
        max-width: 100%;
        max-height: calc(100vw * (55 / 1180));
        margin-bottom: calc(100vw * (48 / 1180));
        font-size: calc(100vw * (20 / 1180));
    }

    .product-special .special-box li .icon {
        bottom: calc(100vw * (40 / 1180));
        right: calc(100vw * (40 / 1180));
        width: calc(100vw * (60 / 1180));
        height: calc(100vw * (60 / 1180));
    }

    .product-special .special-box li .icon img {
        box-shadow: 0px calc(100vw * (4 / 1180)) calc(100vw * (40 / 1180)) 0px rgba(62, 176, 191, 0.25);
    }

    .product-system {
        margin: calc(100vw * (120 / 1180)) 0 calc(100vw * (180 / 1180));
    }

    .product-system .system-title {
        font-size: calc(100vw * (34 / 1180));
        margin-bottom: calc(100vw * (36 / 1180));
    }

    .product-system .system-box1 {
        margin-bottom: calc(100vw * (120 / 1180));
    }

    .product-system .diagram-box img {
        margin-bottom: calc(100vw * (40 / 1180));
    }

    .tab-title li a {
        padding: 0 calc(100vw * (20 / 1180));
        height: calc(100vw * (90 / 1180));
        font-size: calc(100vw * (24 / 1180));
        text-align: center;
        line-height: 1.4;
    }

    .product-system .system-box2 .tab {
        padding: calc(100vw * (72 / 1180)) calc(100vw * (50 / 1180)) calc(100vw * (32 / 1180));
    }

    .product-system .system-box2 .tab h4 {
        font-size: calc(100vw * (28 / 1180));
        text-align: left;
    }

    .product-system .system-box2 .tab p.f19 {
        margin: calc(100vw * (14 / 1180)) 0 calc(100vw * (48 / 1180));
        font-size: calc(100vw * (20 / 1180));
    }

    .product-system .system-box2 .tab .caption-txt {
        font-size: calc(100vw * (22 / 1180));
        margin: calc(100vw * (22 / 1180)) 0 calc(100vw * (6 / 1180));
    }

    .product-system .system-box2 .tab .caption {
        font-size: calc(100vw * (16 / 1180));
    }

    .product-system .features-box {
        margin-top: calc(100vw * (52 / 1180));
    }

    .product-system .system-box2 .tab .features-box h4 {
        font-size: calc(100vw * (28 / 1180));
        margin-bottom: calc(100vw * (28 / 1180));
        text-align: center;
    }

    .product-system .features-box ul {
        margin-right: calc(100vw * (-28 / 1180));
    }

    .product-system .features-box ul li {
        width: calc(33.33% - calc(100vw * (28 / 1180)));
        min-height: 100%;
        height: 100%;
        margin-right: calc(100vw * (28 / 1180));
        padding-top: calc(100vw * (32 / 1180));
        margin-bottom: 0;
    }

    .product-system .features-box ul li .num {
        padding-right: calc(100vw * (20 / 1180));
        top: calc(100vw * (2 / 1560));
        font-size: calc(100vw * (16 / 1180));
    }

    .product-system .features-box ul li h5 {
        font-size: calc(100vw * (24 / 1180));
        margin-bottom: calc(100vw * (12 / 1180));
    }

    .product-system .features-box ul li p {
        padding-left: calc(100vw * (38 / 1180));
        height: calc(100vw * (160 / 1180));
        font-size: calc(100vw * (17 / 1180));
        opacity: 1;
        color: #555;
        margin-bottom: calc(100vw * (40 / 1180));
    }

    .product-system .features-box ul li .icon {
        display: none;
    }

    .product-talkbot {
        padding: calc(100vw * (180 / 1180)) 0 calc(100vw * (152 / 1180));
    }

    .product-talkbot::before {
        height: calc(100vw * (967 / 1180));
    }

    .product-talkbot ul {
        margin-right: calc(100vw * (-28 / 1180));
    }

    .product-talkbot ul li {
        height: calc(100vw * (110 / 1180));
        padding: calc(100vw * (25 / 1180)) calc(100vw * (48 / 1180));
        width: calc(50% - calc(100vw * (28 / 1180)));
        margin: 0 calc(100vw * (28 / 1180)) calc(100vw * (28 / 1180)) 0;
        box-shadow: none;
    }

    .product-talkbot ul li p {
        width: calc(100% - calc(100vw * (60 / 1180)));
        max-height: calc(100vw * (72 / 1180));
        font-size: calc(100vw * (26 / 1180));
    }

    .product-talkbot ul li .icon {
        width: calc(100vw * (60 / 1180));
    }

    .product-equipment {
        padding: calc(100vw * (120 / 1180)) 0 calc(100vw * (180 / 1180));
        margin-bottom: calc(100vw * (180 / 1180));
    }

    .product-equipment h3.title {
        margin-bottom: calc(100vw * (36 / 1180));
        font-size: calc(100vw * (34 / 1180));
    }

    .equipment li {
        margin-bottom: calc(100vw * (12 / 1180));
    }

    .equipment .title {
        padding: calc(100vw * (26 / 1180)) calc(100vw * (40 / 1180));
        font-size: calc(100vw * (26 / 1180));
    }

    .equipment .title:after {
        width: calc(100vw * (12 / 1180));
        height: calc(100vw * (12 / 1180));
        right: calc(100vw * (50 / 1180));
        margin-top: calc(100vw * (-6 / 1180));
        background-size: contain;
    }

    .equipment .title h3 {
        padding-right: calc(100vw * (40 / 1180));
    }

    .equipment .title span {
        margin-right: calc(100vw * (20 / 1180));
        width: calc(100vw * (48 / 1180));
        height: calc(100vw * (48 / 1180));
        font-size: calc(100vw * (16 / 1180));
    }

    .equipment .content-box .img {
        padding: calc(100vw * (36 / 1180)) calc(100vw * (15 / 1180));
        width: calc(100vw * (359 / 1180));
        height: calc(100vw * (249 / 1180));
    }

    .equipment .content-box .img::after {
        width: calc(100vw * (322 / 1180));
        height: calc(100vw * (322 / 1180));
    }

    .equipment .content {
        padding: calc(100vw * (70 / 1180)) calc(100vw * (50 / 1180)) calc(100vw * (78 / 1180));
    }

    .equipment .content p {
        font-size: calc(100vw * (36 / 1180));
        max-width: calc(100vw * (463 / 1180));
    }

    .equipment .content p br {
        display: none;
    }

    .equipment .content .list {
        margin-top: calc(100vw * (40 / 1180));
    }

    .equipment .content .btn-area {
        margin-top: calc(100vw * (48 / 1180));
    }

    .equipment .content .btn-area .btn {
        width: calc(100vw * (300 / 1180));
    }

    .product-success {
        margin: calc(100vw * (180 / 1180)) 0;
    }

    .product-success .tab {
        padding: calc(100vw * (72 / 1180)) calc(100vw * (50 / 1180));
    }

    .product-success .txt-box {
        padding-top: calc(100vw * (28 / 1180));
        max-width: calc(100vw * (600 / 1180));
    }

    .product-success .txt-box>span {
        font-size: calc(100vw * (24 / 1180));
    }

    .product-success .txt-box h3 {
        font-size: calc(100vw * (36 / 1180));
        margin: calc(100vw * (16 / 1180)) 0 calc(100vw * (18 / 1180));
    }

    .product-success .txt-box p {
        margin-bottom: calc(100vw * (48 / 1180));
        font-size: calc(100vw * (19 / 1180));
    }

    .product-success .txt-box .btn {
        height: calc(100vw * (52 / 1180));
    }

    .product-success .img-box .img {
        width: calc(100vw * (320 / 1180));
        height: calc(100vw * (320 / 1180));
    }

    .product-success .img-box .list {
        margin-top: calc(100vw * (40 / 1560));
        max-width: calc(100vw * (360 / 1560));
    }

    .product-success .btn span {
        white-space: nowrap;
    }

    .product-reference {
        margin-bottom: calc(100vw * (180 / 1180));
    }

    .product-reference .content-border {
        margin-right: calc(100vw * (-28 / 1180));
    }

    .product-reference .content-border li {
        padding: calc(100vw * (40 / 1180)) calc(100vw * (30 / 1180)) calc(100vw * (156 / 1180));
        width: calc(100vw * (334 / 1180));
        height: calc(100vw * (490 / 1180));
        margin: 0 calc(100vw * (28 / 1180)) calc(100vw * (28 / 1180)) 0;
    }

    .product-reference .content-border li:nth-child(3n) {
        margin-right: 0;
    }

    .product-reference .content-border li:nth-child(4n) {
        margin: 0 calc(100vw * (28 / 1180)) calc(100vw * (28 / 1180)) 0;
    }

    .product-reference .content-border li .cate {
        max-height: calc(100vw * (52 / 1180));
        margin-bottom: calc(100vw * (16 / 1560));
        font-size: calc(100vw * (19 / 1180));
    }

    .product-reference .content-border li h3 {
        max-height: calc(100vw * (86 / 1180));
        font-size: calc(100vw * (30 / 1180));
    }

    .product-reference .content-border li p {
        display: block;
        position: relative;
        margin-top: calc(100vw * (20 / 1180));
        max-width: 100%;
        max-height: calc(100vw * (110 / 1180));
        font-size: calc(100vw * (20 / 1180));
        bottom: 0;
        right: 0;
        text-align: left;
    }

    .product-reference .content-border li .icon {
        bottom: calc(100vw * (20/ 1180));
        right: calc(100vw * (30 / 1180))
    }

    .product-reference .content-border li .icon img {
        max-width: calc(100vw * (144 / 1180))
    }

    .banner h2 {
        font-size: calc(100vw * (40 / 1180));
    }

    .product-video {
        overflow: hidden;
    }

    .product-video video {
        margin-left: -15%;
        width: 130%;
    }
}

@media (max-width: 767px) {
    .product-title-center {
        margin-bottom: calc(100vw * (72 / 767));
    }

    .product-title-center h2 {
        margin-bottom: calc(100vw * (32 / 767));
        font-size: calc(100vw * (64 / 767));
    }

    .product-title-center p {
        max-width: 100%;
        font-size: calc(100vw * (32 / 767));
        line-height: 1.6;
    }

    .product-title-center p br {
        display: none;
    }

    .product-title-center strong {
        margin: 12px 0 calc(100vw * (24 / 767));
        font-size: calc(100vw * (40 / 767));
        line-height: 1.4;
    }

    .product-special {
        padding: calc(100vw * (180 / 767)) 0;
    }

    .product-special .special-box {
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-right: calc(100vw * (-24 / 767));
    }

    .product-special .special-box li {
        margin: 0 calc(100vw * (24 / 767)) calc(100vw * (24 / 767)) 0;
        padding: calc(100vw * (40 / 767));
        width: calc(50% - calc(100vw * (24 / 767)));
        height: auto;
        min-height: calc(100vw * (348 / 767));
    }

    .product-special .special-box li .num {
        font-size: calc(100vw * (28 / 767));
    }

    .product-special .special-box li h3 {
        max-height: calc(100vw * (170 / 767));
        font-size: calc(100vw * (40 / 767));
        margin: calc(100vw * (24 / 767)) 0 calc(100vw * (12 / 767));
    }

    .product-special .special-box li p {
        max-height: calc(100vw * (92 / 767));
        margin-bottom: 0;
        font-size: calc(100vw * (32 / 767));
    }

    .product-special .special-box li .icon {
        display: none;
    }

    .product-system {
        margin: calc(100vw * (120 / 767)) 0 calc(100vw * (180 / 767));
    }

    .product-system .system-title {
        font-size: calc(100vw * (52 / 767));
        margin-bottom: calc(100vw * (52 / 767));
    }

    .product-system .system-box1 {
        margin-bottom: calc(100vw * (120 / 767));
    }

    /* .product-system .diagram-box { padding: calc(100vw * (32 / 767)); }     */
    .product-system .diagram-box img {
        margin-bottom: calc(100vw * (40 / 767));
    }

    .product-system .system-box2 .tab-title {
        display: none;
    }

    .product-system .tab {
        display: block;
        margin-bottom: calc(100vw * (52 / 767));
    }

    .product-system .tab:last-child {
        margin-bottom: 0;
    }

    .product-system .system-box2 .tab {
        padding: 0 calc(100vw * (48 / 767)) calc(100vw * (72 / 767));
    }

    .product-system .system-box2 .tab .title {
        margin: 0 calc(100vw * (-48 / 767));
        background: #111;
        width: calc(100% + calc(100vw * (96 / 767)));
        height: calc(100vw * (120 / 767));
        color: #fff;
        font-size: calc(100vw * (36 / 767));
        font-weight: 600;
        line-height: 1;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        margin-bottom: calc(100vw * (100 / 767));
    }

    .product-system .system-box2 .tab h4 {
        font-size: calc(100vw * (52 / 767));
    }

    .product-system .system-box2 .tab p.f19 {
        margin: calc(100vw * (40 / 767)) 0;
        font-size: calc(100vw * (32 / 767));
    }

    .product-system .system-box2 .tab .caption-txt {
        font-size: calc(100vw * (32 / 767));
        margin: calc(100vw * (30 / 767)) 0 calc(100vw * (24 / 767));
    }

    .product-system .system-box2 .tab .caption {
        font-size: calc(100vw * (28 / 767));
    }

    .product-system .features-box {
        margin-top: calc(100vw * (80 / 767));
    }

    .product-system .system-box2 .tab .features-box h4 {
        font-size: calc(100vw * (36 / 767));
        margin-bottom: calc(100vw * (40 / 767));
        text-align: left;
    }

    .product-system .features-box ul {
        display: block;
        margin-right: 0;
    }

    .product-system .features-box ul li {
        width: 100%;
        margin: 0 0 calc(100vw * (80 / 767));
        padding-top: calc(100vw * (24 / 767));
    }

    .product-system .features-box ul li:last-child {
        margin-bottom: 0;
    }

    .product-system .features-box ul li .num {
        display: block;
        margin-bottom: calc(100vw * (188 / 767));
        padding-right: 0;
        top: 0;
        font-size: calc(100vw * (28 / 767));
    }

    .product-system .features-box ul li h5 {
        display: block;
        font-size: calc(100vw * (40 / 767));
        margin-bottom: calc(100vw * (24 / 767));
        display: block;
    }

    .product-system .features-box ul li p {
        padding-left: 0;
        height: calc(100vw * (160 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .product-system .features-box ul li .icon {
        display: block;
        position: absolute;
        top: calc(100vw * (84 / 767));
        left: 50%;
        transform: translateX(-50%);
        width: calc(100vw * (100 / 767));
        height: calc(100vw * (100 / 767));
    }

    .product-system .features-box ul li .icon img {
        box-shadow: 0px calc(100vw * (5 / 767)) calc(100vw * (50 / 767)) 0px rgba(62, 176, 191, 0.25);
    }

    .product-talkbot {
        padding: calc(100vw * (180 / 767)) 0;
    }

    .product-talkbot::before {
        background: url(../images/product/talkbot-bg-m.png)no-repeat;
        width: 100%;
        height: calc(100vw * (966 / 767));
        background-size: cover;
    }

    .product-talkbot ul {
        margin-right: 0;
        display: block;
    }

    .product-talkbot ul li {
        height: calc(100vw * (180 / 767));
        padding: 0 calc(100vw * (40 / 767));
        width: 100%;
        margin: 0 0 calc(100vw * (24 / 767)) 0;
    }

    .product-talkbot ul li:last-child {
        margin-bottom: 0;
    }

    .product-talkbot ul li p {
        width: calc(100% - calc(100vw * (100 / 767)));
        max-height: calc(100vw * (114 / 767));
        font-size: calc(100vw * (40 / 767));
    }

    .product-talkbot ul li .icon {
        width: calc(100vw * (100 / 767));
    }

    .product-equipment {
        padding: calc(100vw * (120 / 767)) 0 calc(100vw * (180 / 767));
        margin-bottom: calc(100vw * (180 / 767));
    }

    .product-equipment h3.title {
        margin-bottom: calc(100vw * (52 / 767));
        font-size: calc(100vw * (52 / 767));
    }

    .equipment li {
        margin-bottom: calc(100vw * (24 / 767));
    }

    .equipment .title {
        padding: calc(100vw * (32 / 767)) calc(100vw * (40 / 767));
        font-size: calc(100vw * (40 / 767));
    }

    .equipment .title:after {
        width: calc(100vw * (24 / 767));
        height: calc(100vw * (24 / 767));
        right: calc(100vw * (40 / 767));
        margin-top: calc(100vw * (-17 / 767));
        background-size: contain;
    }

    .equipment .on .title:after {
        margin-top: calc(100vw * (-7 / 767));
    }

    .equipment .title span {
        margin-right: 0;
        width: calc(100vw * (96 / 767));
        height: calc(100vw * (96 / 767));
        font-size: calc(100vw * (28 / 767));
        position: absolute;
        left: calc(100vw * (40 / 767));
        margin-right: 0;
    }

    .equipment .title h3 {
        padding: 0 calc(100vw * (40 / 767)) 0 calc(100vw * (128 / 767));
        line-height: 1.4;
    }

    .equipment .content-box {
        display: block;
    }

    .equipment .content-box .img {
        padding: calc(100vw * (80 / 767)) 0;
        width: 100%;
        height: 100%;
    }

    .equipment .content-box .img.pc {
        display: none;
    }

    .equipment .content-box .img::after {
        display: none;
    }

    .equipment .content {
        padding: calc(100vw * (100 / 767)) calc(100vw * (40 / 767));
    }

    .equipment .content p {
        font-size: calc(100vw * (52 / 767));
        max-width: 100%;
    }

    .equipment .content .list {
        margin-top: 0;
    }

    .equipment .content .btn-area {
        margin-top: calc(100vw * (48 / 767));
    }

    .equipment .content .btn-area .btn {
        width: calc(100vw * (520 / 767));
        height: calc(100vw * (96 / 767));
        padding: 0 calc(100vw * (40 / 767));
        margin: calc(100vw * (20 / 767)) auto 0;
    }

    .equipment .content .btn-area .btn span {
        font-size: calc(100vw * (32 / 767));
    }

    .product-success {
        margin: calc(100vw * (180 / 767)) 0;
    }

    .product-success-slide {
        position: relative;
        overflow: hidden;
    }

    .product-success-slide strong {
        position: relative;
        background: #111;
        color: #fff;
        height: calc(100vw * (120 / 767));
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        font-size: calc(100vw * (36 / 767));
    }

    .product-success-slide strong::before {
        content: "";
        background: url(../images/product/success-slide-btn.svg)no-repeat;
        width: calc(100vw * (15 / 767));
        height: calc(100vw * (24 / 767));
        background-size: contain;
        position: absolute;
        left: calc(100vw * (50 / 767));
        top: 50%;
        transform: translateY(-50%) rotate(180deg);
    }

    .product-success-slide strong::after {
        content: "";
        background: url(../images/product/success-slide-btn.svg)no-repeat;
        width: calc(100vw * (15 / 767));
        height: calc(100vw * (24 / 767));
        background-size: contain;
        position: absolute;
        right: calc(100vw * (50 / 767));
        top: 50%;
        transform: translateY(-50%);
    }

    .product-success-slide .sub-pagination {
        height: calc(100vw * (36 / 767));
        margin-top: calc(100vw * (52 / 767));
    }

    .product-success .txt-box {
        padding: calc(100vw * (100 / 767)) calc(100vw * (48 / 767));
        border: 1px solid #CDDCE5;
        background: #F9FBFA;
        max-width: 100%;
    }

    .product-success .txt-box>span {
        font-size: calc(100vw * (36 / 767));
    }

    .product-success .txt-box h3 {
        font-size: calc(100vw * (52 / 767));
        margin: calc(100vw * (32 / 767)) 0 calc(100vw * (60 / 767));
    }

    .product-success .txt-box .btn {
        width: calc(100vw * (480 / 767));
        height: calc(100vw * (96 / 767));
        padding: 0 calc(100vw * (40 / 767));
        margin: calc(100vw * (20 / 767)) auto 0;
    }

    .product-success .txt-box .btn span {
        font-size: calc(100vw * (32 / 767));
        line-height: 1.4;
    }

    .product-success .img-box .img {
        width: 100%;
        height: 100%;
    }

    .product-success .img-box .list {
        margin: calc(100vw * (60 / 767)) 0;
        max-width: 100%;
    }

    .product-success .txt-box .list {
        margin-bottom: calc(100vw * (60 / 767));
    }

    .product-success .txt-box .list li {
        margin-bottom: calc(100vw * (20 / 767));
    }

    .product-success .txt-box .list li::before {
        top: calc(100vw * (24 / 767))
    }

    .product-reference {
        margin-bottom: calc(100vw * (180 / 767));
    }

    .product-reference .content-border {
        display: block;
        margin-right: 0;
    }

    .product-reference .content-border li {
        padding: calc(100vw * (40 / 767));
        width: 100%;
        height: auto;
        margin: 0 0 calc(100vw * (60 / 767)) 0 !important;
    }

    .product-reference .content-border li .cate {
        max-height: 100%;
        margin-bottom: calc(100vw * (24 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .product-reference .content-border li h3 {
        max-height: 100%;
        font-size: calc(100vw * (42 / 767));
    }

    .product-reference .content-border li h3 br {
        display: none;
    }

    .product-reference .content-border li p {
        margin-top: calc(100vw * (36 / 767));
        max-width: 100%;
        max-height: 100%;
        font-size: calc(100vw * (32 / 767));
    }

    .product-reference .content-border li .icon {
        bottom: 0;
        right: 0;
        position: relative;
        margin-top: calc(100vw * (100 / 767));
    }

    .product-reference .content-border li .icon img {
        max-width: calc(100vw * (304 / 767));
        width: 100%;
    }

    .banner h2 {
        font-size: calc(100vw * (56 / 767));
    }

    .product-video video {
        margin-left: -20%;
        width: 140%;
    }

}


.pop-wrap.pop-video {
    width: 1180px;
    height: 592px;
    background: transparent;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pop-wrap.pop-video .pop {
    width: 100%;
    height: 100%;
    padding: 0;
}

.pop-wrap.pop-video .pop .pop-content {
    height: 100%;
}

.pop-wrap.pop-video .pop iframe {
    width: 100%;
    height: 100%
}

.pop-bg {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 110;
}

.swiper-button-next,
.swiper-button-prev {
    outline: none;
}

.card-slide {
    position: relative;
    padding: 180px 0;
    background: #F9FBFA;
    overflow: hidden;
}

.card-slide .slide-container {
    overflow: hidden;
}

.card-slide .slide-container .img {
    height: 255px;
}

.card-slide .slide-container .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-slide .slide-container .txt-box {
    padding: 28px;
    background: #fff;
}

.card-slide .slide-container .txt-box span {
    color: #0097F6;
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
}

.card-slide .slide-container .txt-box h3 {
    max-height: 38px;
    overflow: hidden;
    color: #111;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.45;
    margin: 6px 0 20px;
}

.card-slide .slide-container .txt-box p {
    max-height: 55px;
    color: #555;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.45;
    overflow: hidden;
}

.card-slide .swiper-slide {
    box-shadow: 0px 4px 40px 0px rgba(62, 176, 191, 0.10);
}

.card-slide .sub-pagination {
    position: relative;
    height: 18px;
    margin-top: 52px;
}

.card-slide .sub-pagination * {
    outline: none;
}

.card-slide .sub-pagination .swiper-pagination {
    bottom: 0;
}

.card-slide .swiper-button .swiper-button-next,
.card-slide .swiper-button .swiper-container-rtl .swiper-button-prev {
    top: calc(50% + 60px);
}

.card-slide .swiper-button .swiper-button-prev,
.card-slide .swiper-button .swiper-container-rtl .swiper-button-next {
    top: calc(50% + 60px);
}

.open_pop.none {
    cursor: default;
}

.tab-slide-box {
    margin: 120px 0;
    overflow: hidden;
}

.tab-slide-box .title {
    margin-bottom: 68px;
}

.tab-slide-box .title h3 {
    color: #111;
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
}

.tab-slide-box .title p {
    margin-top: 16px;
    color: #555;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.6;
}

.relative {
    position: relative;
}

.tab-slide .tab-human-slide {
    position: relative;
    overflow: hidden;
    margin: 0 110px;
}

.tab-slide .tab-human-slide li {
    width: 126px !important;
    cursor: pointer;
}

.tab-slide .tab-human-slide .swiper-slide-thumb-active .img {
    border: 3px solid transparent;
    border-radius: 50%;
    background-image: linear-gradient(#fff, #fff), linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.tab-slide .tab-human-slide .swiper-slide-thumb-active p {
    background: linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tab-slide .tab-human-slide .img {
    width: 126px;
    height: 126px;
    margin: 0 auto;
    border-radius: 50%;
    border: 1px solid #CDDCE5;
    background: #E2EEF4;
    overflow: hidden;
}

.tab-slide .tab-human-slide .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tab-slide .tab-human-slide p {
    margin-top: 14px;
    color: #111;
    text-align: center;
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
}

.tab-slide .swiper-button {
    position: relative;
    top: -70px;
}

.tab-slide .swiper-button .swiper-button-next,
.tab-slide .swiper-button .swiper-button-prev {
    width: 60px;
    height: 60px;
}

.tab-slide .swiper-button .swiper-button-next,
.tab-slide .swiper-button .swiper-container-rtl .swiper-button-prev {
    top: calc(50% + 20px);
    transform: translateY(-50%);
    right: 0;
}

.tab-slide .swiper-button .swiper-button-prev,
.tab-slide .swiper-button .swiper-container-rtl .swiper-button-next {
    top: calc(50% + 20px);
    transform: translateY(-50%);
    left: 0;
}

.tab-item-slide {
    overflow: hidden;
    margin-top: 50px;
}

.tab-item-slide .item {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    border-radius: 20px;
    border: 1px solid #CDDCE5;
    background: #E2EEF4;
    padding: 100px 90px;
}

.tab-item-slide .item .txt-box {
    width: calc(100% - 400px);
    max-width: 748px;
}

.tab-item-slide .item .txt-box span {
    display: inline-block;
    background: linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 16px;
}

.tab-item-slide .item .txt-box h4 {
    color: #111;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.45;
    max-height: 104px;
    overflow: hidden;
}

.tab-item-slide .item .txt-box p {
    color: #555;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.6;
    margin: 18px 0 48px;
    max-height: 122px;
    overflow: hidden
}

.tab-item-slide .item .txt-box em {
    color: #111;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.45;
}

.tab-item-slide .item .img {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.tab-item-slide .item .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tab-item-slide .item ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    max-height: 100px;
    overflow: hidden;
}

.tab-item-slide .item ol li {
    border-radius: 999px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    padding: 12px 20px;
    color: #555;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
}

.case-box {
    margin: 18rem 0;
    overflow: hidden;
}

.case-box .product-title-center h2 {
    margin-bottom: 12px;
}

.case-slide {
    overflow: hidden;
    width: 100vw;
}

.case-slide .swiper-slide {}

.case-slide .item .txt-box {
    position: absolute;
    bottom: 52px;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 0 52px;
    color: #fff;
    z-index: 1;
}

.case-slide .item .txt-box strong {
    display: block;
    margin-bottom: 6px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.45;
}

.case-slide .item .txt-box p {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.45;
}

.case-slide .item .bg {
    height: 420px;
    overflow: hidden;
    position: relative;
}

.case-slide .item .bg::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, #02182E 0%, rgba(2, 24, 46, 0.00) 100%);
    opacity: 0.8;
}

.case-slide .item .bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-box .sub-pagination {
    position: relative;
    height: 18px;
    margin-top: 52px;
}

.case-box .sub-pagination .swiper-pagination {
    bottom: 2px;
}

@media (max-width: 1560px) {
    .pop-wrap.pop-video {
        width: calc(100vw * (1180 / 1560));
        height: calc(100vw * (592 / 1560));
    }

    .card-slide {
        padding: calc(100vw * (180 / 1560)) 0;
    }

    .card-slide .slide-container .img {
        height: calc(100vw * (255 / 1560));
    }

    .card-slide .slide-container .txt-box {
        padding: calc(100vw * (28 / 1560));
    }

    .card-slide .slide-container .txt-box span {
        font-size: calc(100vw * (19 / 1560));
    }

    .card-slide .slide-container .txt-box h3 {
        max-height: calc(100vw * (38 / 1560));
        overflow: hidden;
        font-size: calc(100vw * (26 / 1560));
        margin: calc(100vw * (6 / 1560)) 0 calc(100vw * (20 / 1560));
    }

    .card-slide .slide-container .txt-box p {
        max-height: calc(100vw * (55 / 1560));
        font-size: calc(100vw * (19 / 1560));
    }

    .card-slide .sub-pagination {
        height: calc(100vw * (18 / 1560));
        margin-top: calc(100vw * (52 / 1560));
    }

    .card-slide .swiper-button .swiper-button-next,
    .card-slide .swiper-button .swiper-container-rtl .swiper-button-prev {
        top: calc(50% + calc(100vw * (60 / 1560)));
    }

    .card-slide .swiper-button .swiper-button-prev,
    .card-slide .swiper-button .swiper-container-rtl .swiper-button-next {
        top: calc(50% + calc(100vw * (60 / 1560)));
    }

    .tab-slide-box {
        margin: calc(100vw * (120 / 1560)) 0;
    }

    .tab-slide-box .title {
        margin-bottom: calc(100vw * (68 / 1560));
    }

    .tab-slide-box .title h3 {
        font-size: calc(100vw * (34 / 1560));
    }

    .tab-slide-box .title p {
        margin-top: calc(100vw * (16 / 1560));
        font-size: calc(100vw * (19 / 1560));
    }

    .tab-slide .tab-human-slide {
        margin: 0 calc(100vw * (110 / 1560));
    }

    .tab-slide .tab-human-slide li {
        width: calc(100vw * (126 / 1560)) !important;
    }

    .tab-slide .tab-human-slide .img {
        width: calc(100vw * (126 / 1560));
        height: calc(100vw * (126 / 1560));
    }

    .tab-slide .tab-human-slide p {
        margin-top: calc(100vw * (14 / 1560));
        font-size: calc(100vw * (19 / 1560));
    }

    .tab-slide .swiper-button {
        top: calc(100vw * (-70 / 1560));
    }

    .tab-slide .swiper-button .swiper-button-next,
    .tab-slide .swiper-button .swiper-button-prev {
        width: calc(100vw * (60 / 1560));
        height: calc(100vw * (60 / 1560));
    }

    .tab-slide .swiper-button .swiper-button-next,
    .tab-slide .swiper-button .swiper-container-rtl .swiper-button-prev {
        top: calc(50% + calc(100vw * (20 / 1560)));
    }

    .tab-slide .swiper-button .swiper-button-prev,
    .tab-slide .swiper-button .swiper-container-rtl .swiper-button-next {
        top: calc(50% + calc(100vw * (20 / 1560)));
    }

    .tab-item-slide {
        margin-top: calc(100vw * (50 / 1560));
    }

    .tab-item-slide .item {
        border-radius: calc(100vw * (20 / 1560));
        padding: calc(100vw * (100 / 1560)) calc(100vw * (90 / 1560));
    }

    .tab-item-slide .item .txt-box {
        width: calc(100% - calc(100vw * (400 / 1560)));
        max-width: calc(100vw * (748 / 1560));
    }

    .tab-item-slide .item .txt-box span {
        font-size: calc(100vw * (24 / 1560));
        margin-bottom: calc(100vw * (16 / 1560));
    }

    .tab-item-slide .item .txt-box h4 {
        font-size: calc(100vw * (36 / 1560));
        max-height: calc(100vw * (104 / 1560));
    }

    .tab-item-slide .item .txt-box p {
        font-size: calc(100vw * (19 / 1560));
        margin: calc(100vw * (18 / 1560)) 0 calc(100vw * (48 / 1560));
        max-height: calc(100vw * (122 / 1560));
    }

    .tab-item-slide .item .txt-box em {
        font-size: calc(100vw * (20 / 1560));
    }

    .tab-item-slide .item .img {
        width: calc(100vw * (400 / 1560));
        height: calc(100vw * (400 / 1560));
    }

    .tab-item-slide .item ol {
        gap: calc(100vw * (10 / 1560));
        margin-top: calc(100vw * (16 / 1560));
        max-height: calc(100vw * (100 / 1560));
    }

    .tab-item-slide .item ol li {
        border-radius: calc(100vw * (999 / 1560));
        padding: calc(100vw * (12 / 1560)) calc(100vw * (20 / 1560));
        font-size: calc(100vw * (18 / 1560));
    }

    .case-box {
        margin: calc(100vw * (180 / 1560)) 0;
    }

    .case-box .product-title-center h2 {
        margin-bottom: calc(100vw * (12 / 1560));
    }

    .case-slide .item .txt-box {
        bottom: calc(100vw * (52 / 1560));
        padding: 0 calc(100vw * (52 / 1560));
    }

    .case-slide .item .txt-box strong {
        margin-bottom: calc(100vw * (6 / 1560));
        font-size: calc(100vw * (26 / 1560));
    }

    .case-slide .item .txt-box p {
        font-size: calc(100vw * (19 / 1560));
    }

    .case-slide .item .bg {
        height: calc(100vw * (420 / 1560));
    }

    .case-box .sub-pagination {
        height: calc(100vw * (18 / 1560));
        margin-top: calc(100vw * (52 / 1560));
    }

    .case-box .sub-pagination .swiper-pagination {
        bottom: calc(100vw * (2 / 1560));
    }
}

@media (max-width: 1180px) {
    .pop-wrap.pop-video {
        width: calc(100vw * (1000 / 1180));
        height: calc(100vw * (501 / 1180));
    }

    .card-slide {
        padding: calc(100vw * (180 / 1180)) 0;
    }

    .card-slide .slide-container .img {
        height: calc(100vw * (194 / 1180));
    }

    .card-slide .slide-container .txt-box {
        padding: calc(100vw * (28 / 1180));
        height: calc(100vw * (295 / 1180));
    }

    .card-slide .slide-container .txt-box span {
        font-size: calc(100vw * (19 / 1180));
    }

    .card-slide .slide-container .txt-box h3 {
        max-height: calc(100vw * (76 / 1180));
        font-size: calc(100vw * (26 / 1180));
        margin: calc(100vw * (20 / 1180)) 0 calc(100vw * (6 / 1180));
    }

    .card-slide .slide-container .txt-box p {
        max-height: calc(100vw * (84 / 1180));
        font-size: calc(100vw * (19 / 1180));
    }

    .card-slide .sub-pagination {
        height: calc(100vw * (18 / 1180));
        margin-top: calc(100vw * (52 / 1180));
    }

    .card-slide .swiper-button {
        display: none;
    }

    .tab-slide-box {
        margin: calc(100vw * (120 / 1180)) 0;
    }

    .tab-slide-box .title {
        margin-bottom: calc(100vw * (36 / 1180));
    }

    .tab-slide-box .title h3 {
        font-size: calc(100vw * (34 / 1180));
    }

    .tab-slide-box .title p {
        margin-top: calc(100vw * (16 / 1180));
        font-size: calc(100vw * (20 / 1180));
    }

    .tab-slide .tab-human-slide {
        margin: 0;
        width: 100vw;
    }

    .tab-slide .tab-human-slide li {
        width: calc(100vw * (120 / 1180)) !important;
    }

    .tab-slide .tab-human-slide .img {
        width: calc(100vw * (120 / 1180));
        height: calc(100vw * (120 / 1180));
    }

    .tab-slide .tab-human-slide p {
        margin-top: calc(100vw * (16 / 1180));
        font-size: calc(100vw * (19 / 1180));
    }

    .tab-slide .swiper-button {
        display: none;
    }

    .tab-item-slide {
        margin-top: calc(100vw * (50 / 1180));
    }

    .tab-item-slide .item {
        border-radius: calc(100vw * (20 / 1180));
        padding: calc(100vw * (72 / 1180)) calc(100vw * (50 / 1180));
    }

    .tab-item-slide .item .txt-box {
        width: calc(100% - calc(100vw * (340 / 1180)));
        max-width: calc(100vw * (560 / 1180));
    }

    .tab-item-slide .item .txt-box span {
        font-size: calc(100vw * (24 / 1180));
        margin-bottom: calc(100vw * (16 / 1180));
    }

    .tab-item-slide .item .txt-box h4 {
        font-size: calc(100vw * (36 / 1180));
        max-height: calc(100vw * (104 / 1180));
    }

    .tab-item-slide .item .txt-box p {
        font-size: calc(100vw * (19 / 1180));
        margin: calc(100vw * (18 / 1180)) 0 calc(100vw * (48 / 1180));
        max-height: calc(100vw * (120 / 1180));
    }

    .tab-item-slide .item .txt-box em {
        font-size: calc(100vw * (20 / 1180));
    }

    .tab-item-slide .item .img {
        width: calc(100vw * (340 / 1180));
        height: calc(100vw * (340 / 1180));
    }

    .tab-item-slide .item ol {
        gap: calc(100vw * (8 / 1180));
        margin-top: calc(100vw * (16 / 1180));
        max-height: calc(100vw * (100 / 1180));
    }

    .tab-item-slide .item ol li {
        border-radius: calc(100vw * (999 / 1180));
        padding: calc(100vw * (12 / 1180)) calc(100vw * (20 / 1180));
        font-size: calc(100vw * (18 / 1180));
    }

    .case-box {
        margin: calc(100vw * (180 / 1180)) 0;
    }

    .case-box .product-title-center h2 {
        margin-bottom: calc(100vw * (12 / 1180));
    }

    .case-slide .item .txt-box {
        bottom: calc(100vw * (32 / 1180));
        padding: 0 calc(100vw * (36 / 1180));
    }

    .case-slide .item .txt-box strong {
        margin-bottom: calc(100vw * (6 / 1180));
        font-size: calc(100vw * (26 / 1180));
    }

    .case-slide .item .txt-box p {
        font-size: calc(100vw * (19 / 1180));
    }

    .case-slide .item .bg {
        height: 320px;
    }

    .case-box .sub-pagination {
        height: calc(100vw * (18 / 1180));
        margin-top: calc(100vw * (52 / 1180));
    }

    .case-box .sub-pagination .swiper-pagination {
        bottom: calc(100vw * (4 / 1180));
    }
}

@media (max-width: 767px) {
    .pop-wrap.pop-video {
        width: calc(100vw * (700 / 767));
        height: calc(100vw * (390 / 767));
    }

    .card-slide {
        padding: calc(100vw * (180 / 767)) 0;
    }

    .card-slide .slide-container .img {
        height: calc(100vw * (370 / 767));
    }

    .card-slide .slide-container .txt-box {
        padding: calc(100vw * (48 / 767)) calc(100vw * (50 / 767));
        height: calc(100vw * (433 / 767));
    }

    .card-slide .slide-container .txt-box span {
        font-size: calc(100vw * (32 / 767));
    }

    .card-slide .slide-container .txt-box h3 {
        max-height: calc(100vw * (116 / 767));
        font-size: calc(100vw * (40 / 767));
        margin: calc(100vw * (32 / 767)) 0 calc(100vw * (16 / 767));
    }

    .card-slide .slide-container .txt-box p {
        max-height: calc(100vw * (138 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .card-slide .sub-pagination {
        height: calc(100vw * (36 / 767));
        margin-top: calc(100vw * (52 / 767));
    }

    .tab-slide-box {
        margin: calc(100vw * (180 / 767)) 0 calc(100vw * (120 / 767));
    }

    .tab-slide-box .title {
        margin-bottom: calc(100vw * (102 / 767));
    }

    .tab-slide-box .title h3 {
        font-size: calc(100vw * (52 / 767));
    }

    .tab-slide-box .title p {
        margin-top: calc(100vw * (32 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .tab-slide .tab-human-slide li {
        width: calc(100vw * (180 / 767)) !important;
    }

    .tab-slide .tab-human-slide .img {
        width: calc(100vw * (180 / 767));
        height: calc(100vw * (180 / 767));
    }

    .tab-slide .tab-human-slide p {
        margin-top: calc(100vw * (32 / 767));
        font-size: calc(100vw * (32 / 767));
        list-style: 1.2;
    }

    .tab-item-slide {
        margin-top: calc(100vw * (90 / 767));
    }

    .tab-item-slide .item {
        border-radius: calc(100vw * (20 / 767));
        padding: calc(100vw * (100 / 767)) calc(100vw * (48 / 767));
    }

    .tab-item-slide .item .txt-box {
        width: 100%;
        max-width: 100%;
    }

    .tab-item-slide .item .txt-box span {
        font-size: calc(100vw * (36 / 767));
        margin-bottom: calc(100vw * (32 / 767));
        line-height: 1.2;
    }

    .tab-item-slide .item .txt-box h4 {
        font-size: calc(100vw * (52 / 767));
        max-height: calc(100vw * (225 / 767));
    }

    .tab-item-slide .item .txt-box p {
        font-size: calc(100vw * (32 / 767));
        margin: calc(100vw * (40 / 767)) 0 calc(100vw * (60 / 767));
        max-height: calc(100vw * (306 / 767));
    }

    .tab-item-slide .item .txt-box em {
        font-size: calc(100vw * (34 / 767));
    }

    .tab-item-slide .item .img {
        display: none;
    }

    .tab-item-slide .item ol {
        gap: calc(100vw * (20 / 767));
        margin-top: calc(100vw * (32 / 767));
        max-height: calc(100vw * (188 / 767));
    }

    .tab-item-slide .item ol li {
        border-radius: calc(100vw * (999 / 767));
        padding: calc(100vw * (24 / 767)) calc(100vw * (40 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .case-box {
        margin: calc(100vw * (180 / 767)) 0;
    }

    .case-box .product-title-center h2 {
        margin-bottom: calc(100vw * (24 / 767));
    }

    .case-slide .swiper-slide {
        width: calc(100vw * (500 / 767)) !important;
    }

    .case-slide .item .txt-box {
        bottom: calc(100vw * (60 / 767));
        padding: 0 calc(100vw * (40 / 767));
    }

    .case-slide .item .txt-box strong {
        margin-bottom: calc(100vw * (6 / 767));
        font-size: calc(100vw * (40 / 767));
    }

    .case-slide .item .txt-box p {
        font-size: calc(100vw * (32 / 767));
    }

    .case-slide .item .bg {
        height: 500px;
    }

    .case-box .sub-pagination .swiper-pagination {
        bottom: calc(100vw * (8 / 767));
    }

    .case-box .sub-pagination {
        height: calc(100vw * (36 / 767));
        margin-top: calc(100vw * (52 / 767));
    }
}

@media (max-width: 500px) {
    .case-slide .swiper-slide {
        width: 250px !important;
    }

    .case-slide .item .bg {
        height: 250px;
    }
}

/* 메타휴면 탭변경 */
.tab-meta .tab-list {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.tab-meta .tab-list li {
    flex-basis: 126px;
    overflow: hidden;
}

.tab-meta .tab-list li a {
    display: block;
    width: 100%;
    height: 100%;
}

.tab-meta .tab-list li .img {
    width: 126px;
    height: 126px;
    margin: 0 auto;
    border-radius: 50%;
    border: 1px solid #CDDCE5;
    background: #E2EEF4;
    overflow: hidden;
}

.tab-meta .tab-list li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tab-meta .tab-list li p {
    margin-top: 14px;
    color: #111;
    text-align: center;
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
    padding-bottom: 2px;
}

.tab-meta .tab-list li.on .img {
    border: 3px solid transparent;
    border-radius: 50%;
    background-image: linear-gradient(#fff, #fff), linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

.tab-meta .tab-list li.on p {
    background: linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tab-meta .tab-content {
    display: none;
    margin-top: 50px;
    padding: 0;
}

.tab-meta .tab-content.on {
    display: block;
}

.tab-meta .tab-content .item {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    border-radius: 20px;
    border: 1px solid #CDDCE5;
    background: #E2EEF4;
    padding: 100px 90px;
}

.tab-meta .tab-content .item .txt-box {
    width: calc(100% - 400px);
    max-width: 748px;
}

.tab-meta .tab-content .item .txt-box span {
    display: inline-block;
    background: linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    padding-bottom: 16px;
}

.tab-meta .tab-content .item .txt-box h4 {
    color: #111;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.45;
    max-height: 104px;
    overflow: hidden;
}

.tab-meta .tab-content .txt-box p {
    color: #555;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.6;
    margin: 18px 0 48px;
    max-height: 122px;
    overflow: hidden
}

.tab-meta .tab-content .txt-box em {
    color: #111;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.45;
}

.tab-meta .tab-content .img {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
}

.tab-meta .tab-content .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tab-meta .tab-content ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    max-height: 100px;
    overflow: hidden;
}

.tab-meta .tab-content ol li {
    border-radius: 999px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    padding: 12px 20px;
    color: #555;
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
}

@media (max-width: 1560px) {
    .tab-meta .tab-list {
        gap: calc(100vw * (40 / 1560));
    }

    .tab-meta .tab-list li {
        flex-basis: calc(100vw * (126 / 1560));
    }

    .tab-meta .tab-list li .img {
        width: calc(100vw * (126 / 1560));
        height: calc(100vw * (126 / 1560));
    }

    .tab-meta .tab-list li p {
        margin-top: calc(100vw * (14 / 1560));
        font-size: calc(100vw * (19 / 1560));
    }

    .tab-meta .tab-content {
        margin-top: calc(100vw * (50 / 1560));
    }

    .tab-meta .tab-content .item {
        border-radius: calc(100vw * (20 / 1560));
        padding: calc(100vw * (100 / 1560)) calc(100vw * (90 / 1560));
    }

    .tab-meta .tab-content .item .txt-box {
        width: calc(100% - calc(100vw * (400 / 1560)));
        max-width: calc(100vw * (748 / 1560));
    }

    .tab-meta .tab-content .item .txt-box span {
        font-size: calc(100vw * (24 / 1560));
        padding-bottom: calc(100vw * (16 / 1560));
    }

    .tab-meta .tab-content .item .txt-box h4 {
        font-size: calc(100vw * (36 / 1560));
        max-height: calc(100vw * (104 / 1560));
    }

    .tab-meta .tab-content .item .txt-box p {
        font-size: calc(100vw * (19 / 1560));
        margin: calc(100vw * (18 / 1560)) 0 calc(100vw * (48 / 1560));
        max-height: calc(100vw * (122 / 1560));
    }

    .tab-meta .tab-content .item .txt-box em {
        font-size: calc(100vw * (20 / 1560));
    }

    .tab-meta .tab-content .item .img {
        width: calc(100vw * (400 / 1560));
        height: calc(100vw * (400 / 1560));
    }

    .tab-meta .tab-content .item ol {
        gap: calc(100vw * (10 / 1560));
        margin-top: calc(100vw * (16 / 1560));
        max-height: calc(100vw * (100 / 1560));
    }

    .tab-meta .tab-content .item ol li {
        border-radius: calc(100vw * (999 / 1560));
        padding: calc(100vw * (12 / 1560)) calc(100vw * (20 / 1560));
        font-size: calc(100vw * (18 / 1560));
    }
}

@media (max-width: 1180px) {
    .tab-meta .tab-list {
        gap: calc(100vw * (40 / 1180));
    }

    .tab-meta .tab-list li {
        flex-basis: calc(100vw * (120 / 1180));
    }

    .tab-meta .tab-list li .img {
        width: calc(100vw * (120 / 1180));
        height: calc(100vw * (120 / 1180));
    }

    .tab-meta .tab-list li p {
        margin-top: calc(100vw * (16 / 1180));
        font-size: calc(100vw * (19 / 1180));
    }

    .tab-meta .tab-content {
        margin-top: calc(100vw * (50 / 1180));
    }

    .tab-meta .tab-content .item {
        border-radius: calc(100vw * (20 / 1180));
        padding: calc(100vw * (72 / 1180)) calc(100vw * (50 / 1180));
    }

    .tab-meta .tab-content .item .txt-box {
        width: calc(100% - calc(100vw * (340 / 1180)));
        max-width: calc(100vw * (560 / 1180));
    }

    .tab-meta .tab-content .item .txt-box span {
        font-size: calc(100vw * (24 / 1180));
        padding-bottom: calc(100vw * (16 / 1180));
    }

    .tab-meta .tab-content .item .txt-box h4 {
        font-size: calc(100vw * (36 / 1180));
        max-height: calc(100vw * (104 / 1180));
    }

    .tab-meta .tab-content .item .txt-box p {
        font-size: calc(100vw * (19 / 1180));
        margin: calc(100vw * (18 / 1180)) 0 calc(100vw * (48 / 1180));
        max-height: calc(100vw * (120 / 1180));
    }

    .tab-meta .tab-content .item .txt-box em {
        font-size: calc(100vw * (20 / 1180));
    }

    .tab-meta .tab-content .item .img {
        width: calc(100vw * (340 / 1180));
        height: calc(100vw * (340 / 1180));
    }

    .tab-meta .tab-content .item ol {
        gap: calc(100vw * (8 / 1180));
        margin-top: calc(100vw * (16 / 1180));
        max-height: calc(100vw * (100 / 1180));
    }

    .tab-meta .tab-content .item ol li {
        border-radius: calc(100vw * (999 / 1180));
        padding: calc(100vw * (12 / 1180)) calc(100vw * (20 / 1180));
        font-size: calc(100vw * (18 / 1180));
    }
}

@media (max-width: 767px) {
    .tab-meta .tab-list {
        gap: 0;
        justify-content: space-between;
    }

    .tab-meta .tab-list li {
        flex-basis: calc(100% / 3)
    }

    .tab-meta .tab-list li .img {
        width: calc(100vw * (180 / 767));
        height: calc(100vw * (180 / 767));
    }

    .tab-meta .tab-list li p {
        margin-top: calc(100vw * (32 / 767));
        font-size: calc(100vw * (32 / 767));
        list-style: 1.2;
    }

    .tab-meta .tab-content {
        margin-top: calc(100vw * (90 / 767));
    }

    .tab-meta .tab-content .item {
        border-radius: calc(100vw * (20 / 767));
        padding: calc(100vw * (100 / 767)) calc(100vw * (48 / 767));
    }

    .tab-meta .tab-content .item .txt-box {
        width: 100%;
        max-width: 100%;
    }

    .tab-meta .tab-content .item .txt-box span {
        font-size: calc(100vw * (36 / 767));
        padding-bottom: calc(100vw * (32 / 767));
        line-height: 1.2;
    }

    .tab-meta .tab-content .item .txt-box h4 {
        font-size: calc(100vw * (52 / 767));
        max-height: calc(100vw * (225 / 767));
    }

    .tab-meta .tab-content .item .txt-box p {
        font-size: calc(100vw * (32 / 767));
        margin: calc(100vw * (40 / 767)) 0 calc(100vw * (60 / 767));
        max-height: calc(100vw * (306 / 767));
    }

    .tab-meta .tab-content .item .txt-box em {
        font-size: calc(100vw * (34 / 767));
    }

    .tab-meta .tab-content .item .img {
        display: none;
    }

    .tab-meta .tab-content .item ol {
        gap: calc(100vw * (20 / 767));
        margin-top: calc(100vw * (32 / 767));
        max-height: calc(100vw * (188 / 767));
    }

    .tab-meta .tab-content .item ol li {
        border-radius: calc(100vw * (999 / 767));
        padding: calc(100vw * (24 / 767)) calc(100vw * (40 / 767));
        font-size: calc(100vw * (32 / 767));
    }
}

/* 다국어 */
:lang(en) .btn-more::before {
    content: "More";
}

:lang(en) .btn-more.close::before {
    content: "Hide";
}

:lang(en) .product-special .special-box li {
    height: auto;
}

:lang(en) .product-special .special-box li p,
:lang(en) .product-special .special-box li h3 {
    max-height: 100%;
    line-height: 1.4;
}

@media (min-width: 1561px) {
    :lang(en) .product-special .special-box li .icon {
        bottom: 2rem
    }

    :lang(en) .product-system .features-box ul li {
        min-height: 30rem;
    }

    :lang(en) .product-system .features-box ul li h5 {
        font-size: 2.3rem;
        line-height: 1.3;
    }

    :lang(en) .product-system .features-box ul li p {
        font-size: 1.4rem;
        line-height: 1.4;
    }

    :lang(en) .product-talkbot ul li p {
        font-size: 2.4rem;
    }

    :lang(en) .product-reference .content-border li .cate {
        margin-bottom: 1.4rem;
    }

    :lang(en) .product-reference .content-border li h3 {
        max-height: 11rem;
        font-size: 2.8rem;
        line-height: 1.3;
    }

    :lang(en) .product-reference .content-border li p {
        line-height: 1.4;
    }

    :lang(en) .card-slide .slide-container .txt-box p {
        height: 85px;
        max-height: 100%;
    }
}

@media (max-width: 1561px) and (min-width: 1181px) {
    :lang(en) .product-system .features-box ul li {
        min-height: calc(100vw * (300 / 1560));
    }

    :lang(en) .product-system .features-box ul li h5 {
        font-size: calc(100vw * (23 / 1560));
        line-height: 1.3;
    }

    :lang(en) .product-system .features-box ul li p {
        height: calc(100vw * (136 / 1560));
        font-size: calc(100vw * (14 / 1560));
        line-height: 1.4;
    }

    :lang(en) .product-talkbot ul li p {
        font-size: calc(100vw * (24 / 1560));
    }

    :lang(en) .product-reference .content-border li .cate {
        margin-bottom: calc(100vw * (14 / 1560));
    }

    :lang(en) .product-reference .content-border li h3 {
        max-height: calc(100vw * (110 / 1560));
        font-size: calc(100vw * (28 / 1560));
        line-height: 1.3;
    }

    :lang(en) .card-slide .slide-container .txt-box p {
        height: calc(100vw * (85 / 1560));
        max-height: 100%;
    }
}

@media (min-width: 1181px) {
    :lang(en) .product-title-center p {
        font-size: 2.1rem;
    }

    :lang(en) .tab-title li a {
        padding: 15px 20px;
        box-sizing: content-box;
        text-align: center;
    }
}

@media (max-width: 1180px) {
    :lang(en) .product-system .features-box ul li p {
        height: auto;
        line-height: 1.4;
    }
}

@media (max-width: 1180px) and (min-width: 768px) {
    :lang(en) .card-slide .slide-container .txt-box h3 {
        font-size: calc(100vw * (24 / 1180));
        line-height: 1.3;
    }

    :lang(en) .card-slide .slide-container .txt-box p {
        max-height: calc(100vw * (100 / 1180));
        font-size: calc(100vw * (17 / 1180));
    }

    :lang(en) .tab-title li a {
        height: calc(100vw * (110 / 1180));
    }

    :lang(en) .product-special .special-box li {
        padding: calc(100vw * (40 / 1180)) calc(100vw * (40 / 1180)) calc(100vw * (60 / 1180));
    }
}

@media (max-width: 767px) {
    :lang(en) .product-system .system-box2 .tab .title {
        padding: 15px
    }

    :lang(en) .product-success-slide strong {
        padding: 0 calc(100vw * (80 / 767));
    }

    :lang(en) .product-success .txt-box .btn {
        height: auto;
        padding: 20px calc(100vw * (40 / 767));
    }

    :lang(en) .product-success .btn span {
        white-space: initial;
    }
}

/* 회사소개 */

/* 회사개요 */
.overview {
    margin-top: 180px;
}

.overview .content p {
    margin-top: 40px;
}

.overview .video-box {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 40px;
    padding: 0 20px;
}

.overview .video-box h4 {
    position: relative;
    width: calc(100% - 676px);
    padding: 0 16px 0 20px;
    margin-bottom: 60px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.45;
}

.overview .video-box h4::before {
    content: "";
    width: 4px;
    height: 76px;
    top: 50%;
    left: 0;
    position: absolute;
    transform: translateY(-50%);
    background: #0ED058;
}

.overview .video-box h4 span {
    display: block;
    margin-bottom: 4px;
    color: #999;
    font-size: 22px;
    font-weight: 600;
}

.overview .video-box .video {
    width: 675px;
    height: 380px;
    border-radius: 8px;
    overflow: hidden;
}

.overview .video-box .video iframe {
    width: 100%;
    height: 100%;
}

.overview .data-box {
    margin-top: 40px;
    padding: 76px 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    background: url(../images/company/data-box-bg.jpg)no-repeat;
    background-size: cover;
}

.overview .data-box li {
    position: relative;
    flex-basis: calc(100% / 3);
    display: flex;
    flex-direction: column;
}

.overview .data-box li::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 2px;
    height: 130px;
    opacity: 0.1;
    background: #FFF;
}

.overview .data-box li:last-child::after {
    display: none;
}

.overview .data-box li span {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.6;
}

.overview .data-box li h4 {
    margin: 20px 0;
    color: #FFF;
    line-height: 1;
    font-size: 18px;
    font-weight: 700;
}

.overview .data-box li h4 b {
    font-size: 56px;
}

.overview .data-box+.img+p {
    margin-top: 32px;
}

.overview .logo-box {
    padding: 99px 0;
    margin-bottom: 40px;
    text-align: center;
    background: #F9FBFA;
}

.overview .logo-txt {
    display: flex;
    flex-wrap: wrap;
}

.overview .logo-txt li:nth-child(1) {
    width: 382px;
    padding-right: 20px;
}

.overview .logo-txt li:nth-child(2) {
    width: calc(100% - 382px);
}

.overview .logo-txt li:nth-child(2) p:first-child {
    margin-top: 0;
}

.overview .zoom::before {
    display: none;
}

.overview .img .mo {
    display: none;
}

@media (max-width: 1560px) {
    .overview {
        margin-top: calc(100vw * (180 / 1560));
    }

    .overview .content p {
        margin-top: calc(100vw * (40 / 1560));
    }

    .overview .video-box {
        margin-top: calc(100vw * (40 / 1560));
        padding: 0 calc(100vw * (20 / 1560));
    }

    .overview .video-box h4 {
        width: calc(100% - calc(100vw * (676 / 1560)));
        padding: 0 calc(100vw * (16 / 1560)) 0 calc(100vw * (20 / 1560));
        margin-bottom: calc(100vw * (60 / 1560));
        font-size: calc(100vw * (36 / 1560));
    }

    .overview .video-box h4::before {
        width: calc(100vw * (4 / 1560));
        height: calc(100vw * (76 / 1560));
    }

    .overview .video-box h4 span {
        margin-bottom: calc(100vw * (4 / 1560));
        font-size: calc(100vw * (22 / 1560));
    }

    .overview .video-box .video {
        width: calc(100vw * (676 / 1560));
        height: calc(100vw * (380 / 1560));
        border-radius: calc(100vw * (8 / 1560));
    }

    .overview .data-box {
        margin-top: calc(100vw * (40 / 1560));
        padding: calc(100vw * (76 / 1560)) 0;
    }

    .overview .data-box li::after {
        width: calc(100vw * (2 / 1560));
        height: calc(100vw * (130 / 1560));
    }

    .overview .data-box li span {
        font-size: calc(100vw * (16 / 1560));
    }

    .overview .data-box li h4 {
        margin: calc(100vw * (20 / 1560)) 0;
        font-size: calc(100vw * (18 / 1560));
    }

    .overview .data-box li h4 b {
        font-size: calc(100vw * (56 / 1560));
    }

    .overview .data-box+.img+p {
        margin-top: calc(100vw * (32 / 1560));
    }

    .overview .logo-box {
        padding: calc(100vw * (99 / 1560)) 0;
        margin-bottom: calc(100vw * (40 / 1560));
    }

    .overview .logo-txt li:nth-child(1) {
        width: calc(100vw * (382 / 1560));
        padding-right: calc(100vw * (20 / 1560));
    }

    .overview .logo-txt li:nth-child(2) {
        width: calc(100% - calc(100vw * (382 / 1560)));
    }
}

@media (max-width: 1180px) {
    .overview {
        margin-top: calc(100vw * (180 / 1180));
    }

    .overview .content p {
        margin-top: calc(100vw * (40 / 1180));
    }

    .overview .video-box {
        margin-top: calc(100vw * (60 / 1180));
        padding: 0 calc(100vw * (20 / 1180));
    }

    .overview .video-box h4 {
        width: calc(100% - calc(100vw * (664 / 1180)));
        padding: 0 calc(100vw * (16 / 1180)) 0 calc(100vw * (23 / 1180));
        margin-bottom: calc(100vw * (60 / 1180));
        font-size: calc(100vw * (36 / 1180));
    }

    .overview .video-box h4::before {
        width: calc(100vw * (4 / 1180));
        height: calc(100vw * (74 / 1180));
    }

    .overview .video-box h4 span {
        margin-bottom: calc(100vw * (4 / 1180));
        font-size: calc(100vw * (22 / 1180));
    }

    .overview .video-box .video {
        width: calc(100vw * (664 / 1180));
        height: calc(100vw * (376 / 1180));
        overflow: hidden;
        border-radius: calc(100vw * (8 / 1180));
    }

    .overview .video-box .video iframe {
        border-radius: calc(100vw * (8 / 1180));
    }

    .overview .video-box+p {
        margin-top: calc(100vw * (60 / 1180));
    }

    .overview .data-box {
        margin-top: calc(100vw * (60 / 1180));
        padding: calc(100vw * (78 / 1180)) 0;
    }

    .overview .data-box li::after {
        width: calc(100vw * (2 / 1180));
        height: calc(100vw * (130 / 1180));
    }

    .overview .data-box li span {
        font-size: calc(100vw * (16 / 1180));
    }

    .overview .data-box li h4 {
        margin: calc(100vw * (20 / 1180)) 0;
        font-size: calc(100vw * (18 / 1180));
    }

    .overview .data-box li h4 b {
        font-size: calc(100vw * (56 / 1180));
    }

    .overview .data-box+.img+p {
        margin-top: calc(100vw * (60 / 1180));
    }

    .overview .logo-box {
        padding: calc(100vw * (98 / 1180)) 0;
        margin-bottom: calc(100vw * (60 / 1180));
    }

    .overview .logo-txt li:nth-child(1) {
        width: calc(100vw * (372 / 1180));
        padding-right: calc(100vw * (90 / 1180));
    }

    .overview .logo-txt li:nth-child(2) {
        width: calc(100% - calc(100vw * (372 / 1180)));
    }
}

@media (max-width: 767px) {
    .overview {
        margin-top: calc(100vw * (180 / 767));
    }

    .overview .content p {
        margin-top: calc(100vw * (40 / 767));
    }

    .overview .video-box {
        display: block;
        margin-top: calc(100vw * (72 / 767));
        padding: 0;
    }

    .overview .video-box h4 {
        width: 100%;
        padding: 0 calc(100vw * (30 / 767));
        margin-bottom: calc(100vw * (60 / 767));
        line-height: 1;
        font-size: calc(100vw * (52 / 767));
    }

    .overview .video-box h4::before {
        width: calc(100vw * (4 / 767));
        height: calc(100vw * (109 / 767));
    }

    .overview .video-box h4 span {
        margin-bottom: calc(100vw * (28 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .overview .video-box .video {
        width: 100%;
        height: calc(100vw * (380 / 767));
        border-radius: calc(100vw * (8 / 767));
    }

    .overview .video-box .video iframe {
        border-radius: calc(100vw * (8 / 767));
    }

    .overview .video-box+p {
        margin-top: calc(100vw * (72 / 767));
    }

    .overview .data-box {
        flex-direction: column;
        margin-top: calc(100vw * (72 / 767));
        padding: calc(100vw * (109 / 767)) 0;
        background-image: url("../images/company/data-box-bg_m.jpg");
    }

    .overview .data-box li {
        margin-bottom: calc(100vw * (60 / 767));
        padding-bottom: calc(100vw * (60 / 767));
    }

    .overview .data-box li:last-child {
        margin: 0;
        padding: 0;
    }

    .overview .data-box li::after {
        top: auto;
        right: auto;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: calc(100vw * (400 / 767));
        height: calc(100vw * (4 / 767));
    }

    .overview .data-box li span {
        font-size: calc(100vw * (32 / 767));
    }

    .overview .data-box li h4 {
        margin: calc(100vw * (16 / 767)) 0;
        font-size: calc(100vw * (32 / 767));
    }

    .overview .data-box li h4 b {
        margin-right: calc(100vw * (8 / 767));
        font-size: calc(100vw * (80 / 767));
    }

    .overview .data-box+.img+p {
        margin-top: calc(100vw * (16 / 767));
    }


    .overview .logo-box {
        padding: calc(100vw * (98 / 767)) 0;
        margin-bottom: calc(100vw * (72 / 767));
    }

    .overview .logo-txt {
        display: block;
    }

    .overview .logo-txt li:nth-child(1) {
        width: 100%;
        padding-right: 0;
    }

    .overview .logo-txt li:nth-child(1) img {
        max-width: none;
        width: calc(100vw * (490 / 767));
        height: calc(100vw * (68 / 767));
    }

    .overview .logo-txt li:nth-child(2) {
        width: 100%;
    }

    .overview .logo-txt li:nth-child(2) p:first-child {
        margin-top: calc(100vw * (50 / 767));
    }

    .overview .logo-txt li:nth-child(2) p:last-child {
        margin-top: calc(100vw * (30 / 767));
    }

    .overview .zoom {
        position: relative;
        padding-bottom: calc(100vw * (95 / 767));
    }

    .overview .zoom::before {
        display: block;
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        width: calc(100vw * (64 / 767));
        height: calc(100vw * (64 / 767));
        background: url("../images/company/recruit-ico-zoom.svg") no-repeat left top / 100% 100%;
    }

    .overview .img .pc {
        display: none;
    }

    .overview .img .mo {
        display: block;
    }
}

/* 사업소개 */
.intro {
    margin-top: 18rem;
}

.content-box {
    display: flex;
    margin-bottom: 18rem;
}

.content-box .title {
    width: 34rem;
    padding: 1.2rem 2rem 0 0;
    color: #0097F6;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
}

.content-box .content {
    width: 110rem;
}

.content-box .content h3 {
    margin-bottom: 4rem;
    font-size: 5rem;
    line-height: 1.4;
    text-transform: capitalize;
}

.content-box .content p {
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1.8;
    color: #111;
}

.content-box .content .img {
    margin-top: 4rem;
}

@media (max-width: 1560px) {
    .intro {
        margin-top: calc(100vw * (180 / 1560));
    }

    .content-box {
        margin-bottom: calc(100vw * (180 / 1560));
    }

    .content-box .title {
        width: calc(100vw * (340 / 1560));
        padding: calc(100vw * (12 / 1560)) calc(100vw * (20 / 1560)) 0 0;
        font-size: calc(100vw * (24 / 1560));
    }

    .content-box .content {
        width: calc(100vw * (1100 / 1560));
    }

    .content-box .content h3 {
        margin-bottom: calc(100vw * (40 / 1560));
        font-size: calc(100vw * (50 / 1560));
    }

    .content-box .content p {
        font-size: calc(100vw * (19 / 1560));
    }

    .content-box .content .img {
        margin-top: calc(100vw * (40 / 1560));
    }
}

@media (max-width: 1180px) {
    .intro {
        margin-top: calc(100vw * (180 / 1180));
    }

    .content-box {
        display: block;
        margin-bottom: calc(100vw * (180 / 1180));
    }

    .content-box .title {
        width: 100%;
        padding: calc(100vw * (12 / 1180)) 0 0;
        font-size: calc(100vw * (24 / 1180));
    }

    .content-box .content {
        width: 100%;
    }

    .content-box .content h3 {
        margin-top: calc(100vw * (24 / 1180));
        margin-bottom: calc(100vw * (40 / 1180));
        font-size: calc(100vw * (50 / 1180));
    }

    .content-box .content p {
        font-size: calc(100vw * (20 / 1180));
    }

    .content-box .content .img {
        margin-top: calc(100vw * (60 / 1180));
    }
}

@media (max-width: 767px) {
    .intro {
        margin-top: calc(100vw * (180 / 767));
    }

    .content-box {
        margin-bottom: calc(100vw * (180 / 767));
    }

    .content-box .title {
        padding: 0;
        font-size: calc(100vw * (36 / 767));
    }

    .content-box .content h3 {
        margin-top: calc(100vw * (24 / 767));
        margin-bottom: calc(100vw * (40 / 767));
        font-size: calc(100vw * (64 / 767));
    }

    .content-box .content p {
        font-size: calc(100vw * (32 / 767));
    }

    .content-box .content .img {
        margin-top: calc(100vw * (72 / 767));
    }
}



/* 특허ㆍ인증ㆍ수상 */
.awards {
    margin-bottom: 18rem;
}

.awards-list li .img {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #F6F6F6;
}

.awards-list li .img img {
    max-width: 16.6rem;
    height: auto;
}

.awards-list li .cate {
    display: block;
    max-height: 19px;
    margin: 2.8rem 0 1.2rem;
    color: #0097F6;
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1;
    overflow: hidden;
}

.awards-list li p {
    font-size: 2.6rem;
    max-height: 76px;
    font-weight: 600;
    line-height: 1.45;
    overflow: hidden;
    color:#111;
}

@media (max-width: 1560px) {
    .awards {
        margin-bottom: calc(100vw * (180 / 1560));
    }

    .awards-list li .img img {
        max-width: calc(100vw * (166 / 1560));
    }

    .awards-list li .cate {
        max-height: calc(100vw * (19 / 1560));
        margin: calc(100vw * (28 / 1560)) 0 calc(100vw * (12 / 1560));
        font-size: calc(100vw * (19 / 1560));
    }

    .awards-list li p {
        max-height: calc(100vw * (76 / 1560));
        font-size: calc(100vw * (26 / 1560));
    }
}

@media (max-width: 1180px) {
    .awards {
        margin-bottom: calc(100vw * (180 / 1180));
    }

    .awards-list li .img img {
        max-width: calc(100vw * (166 / 1180));
    }

    .awards-list li .cate {
        max-height: calc(100vw * (18 / 1180));
        margin: calc(100vw * (28 / 1180)) 0 calc(100vw * (12 / 1180));
        font-size: calc(100vw * (19 / 1180));
    }

    .awards-list li p {
        max-height: calc(100vw * (76 / 1180));
        font-size: calc(100vw * (26 / 1180));
    }
}

@media (max-width: 767px) {
    .awards {
        margin-bottom: calc(100vw * (180 / 767));
    }

    .awards-list li .img img {
        max-width: calc(100vw * (250 / 767));
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .awards-list li .cate {
        max-height: 100%;
        height: auto;
        margin: calc(100vw * (32 / 767)) 0 calc(100vw * (12 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .awards-list li p {
        max-height: 100%;
        font-size: calc(100vw * (36 / 767));
    }
}

/* 인사제도 */
.recruit {
    margin-top: 18rem;
}

.recruit .content-box.last {
    margin-bottom: 12rem;
}

.recruit h4 {
    margin: 8rem 0 3.6rem;
    color: #111;
    font-size: 3.4rem;
    font-weight: 700;
}

.recruit .content .img:first-child {
    margin-top: 0;
}

.recruit .img {
    text-align: center;
}

.recruit img.mo {
    display: none;
}

.recruit .zoom::before {
    display: none;
}

.recruit .culture-list {
    counter-reset: item;
}

.recruit .culture-list li {
    position: relative;
    padding: 4.4rem 0 4.3rem;
}

.recruit .culture-list li .thumb {
    position: absolute;
    right: 6rem;
    top: 0;
    width: 20.2rem;
    height: 25.1rem;
    opacity: 0;
    transition: all .1s;
    z-index: 1;
}

.recruit .culture-list li .thumb img {
    width: 100%;
    height: 100%;
}

.recruit .culture-list li .block {
    position: relative;
    padding-left: 6.3rem;
    padding-bottom: 3.2rem;
}

.recruit .culture-list li .block::before {
    counter-increment: item;
    content: '0' counter(item);
    position: absolute;
    left: 0;
    top: 1rem;
    color: #999;
    line-height: 1.4;
    font-size: 1.8rem;
    font-weight: 700;
}

.recruit .culture-list li .block::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: #D9D9D9;
    transition: all .2s;
}

.recruit .culture-list li .stitle {
    display: block;
    color: #111;
    line-height: 1.4;
    font-size: 4rem;
}

.recruit .culture-list li .txt {
    margin-top: 1.6rem;
    margin-right: 33.7rem;
    color: #555;
    line-height: 1.6;
    font-size: 1.9rem;
}

@media (min-width: 1181px) {
    .recruit .culture-list li:hover .block::after {
        background: #111;
    }

    .recruit .culture-list:hover li:hover .thumb {
        opacity: 1;
    }
}

.recruit .effect-list {
    display: flex;
    justify-content: center;
    gap: 4rem;
}

.recruit .effect-list.mo {
    height: 1px;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

.recruit .effect-list li {
    flex-basis: calc(100% / 4);
    text-align: center;
}

.recruit .effect-list li .stitle {
    display: block;
    margin: 2.4rem 1.2rem 0;
    color: #111;
    line-height: 1.45;
    font-size: 2.4rem;
    font-weight: 600;
}

.recruit .effect-list li .txt {
    margin: 1.2rem 1.2rem 0;
    color: #555;
    line-height: 1.6;
    font-size: 1.6rem;
    font-weight: 500;
}

.recruit .pay-system {
    display: flex;
    margin-top: 6rem;
    gap: 2rem;
}

.recruit .pay-system li {
    flex-basis: calc(100% / 5);
    height: 20.4rem;
    border: 1px solid #D9D9D9;
    background: #F6F6F6;
}

.recruit .pay-system li .stitle {
    display: block;
    margin: 0 2rem;
    padding: 2rem 0 1.2rem;
    border-bottom: 1px solid #D9D9D9;
    text-align: center;
    line-height: 1.45;
    color: #111;
    font-size: 2.2rem;
    font-weight: 600;
}

.recruit .pay-system li .txt {
    margin: 0 2rem;
    padding: 1.2rem 0;
    line-height: 1.45;
    color: #555;
    font-size: 1.9rem;
    font-weight: 500;
}

.recruit .content .welfare_wrap:first-child h4 {
    margin-top: 0;
}

.recruit .welfare-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: minmax(9rem, 1fr);
    gap: 2.8rem;
}

.recruit .welfare-list li {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: 2rem 0 1.4rem;
    border-top: 1px solid #D9D9D9;
}

.recruit .welfare-list li .txt {
    flex-basis: calc(100% - 6.2rem);
    color: #111;
    line-height: 1.45;
    font-size: 1.9rem;
    font-weight: 600;
}

.recruit .welfare-list li .ico {
    display: block;
    flex-basis: 4.2rem;
    height: 4.2rem;
    border-radius: 4.2rem;
    box-shadow: 0px 3px 30px 0px rgba(62, 176, 191, 0.25);
}

.recruit .welfare-list li .ico img {
    width: 100%;
    height: 100%;
}

.recruit .btn-area {
    text-align: center;
    margin-bottom: 18rem;
}

.recruit .btn-area a {
    width: 26rem;
}

@media (min-width: 1181px) {
    :lang(en) .recruit .pay-system li .stitle {
        height: 129px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    :lang(en) .recruit .pay-system li {
        height: auto;
    }
}

@media (max-width: 1180px) and (min-width: 768px) {
    :lang(en) .recruit .pay-system li .stitle {
        height: calc(100vw * (125 / 1180));
        display: flex;
        align-items: center;
        justify-content: center;
    }

    :lang(en) .recruit .pay-system li {
        height: auto;
    }
}

@media (max-width: 1560px) {
    .recruit {
        margin-top: calc(100vw * (180 / 1560));
    }

    .recruit .content-box.last {
        margin-bottom: calc(100vw * (120 / 1560));
    }

    .recruit h4 {
        margin: calc(100vw * (80 / 1560)) 0 calc(100vw * (40 / 1560));
        font-size: calc(100vw * (34 / 1560));
    }

    .recruit .culture-list li {
        padding: calc(100vw * (44 / 1560)) 0 calc(100vw * (43 / 1560));
    }

    .recruit .culture-list li .thumb {
        right: calc(100vw * (60 / 1560));
        width: calc(100vw * (202 / 1560));
        height: calc(100vw * (251 / 1560));
    }

    .recruit .culture-list li .block {
        padding-left: calc(100vw * (63 / 1560));
        padding-bottom: calc(100vw * (32 / 1560));
    }

    .recruit .culture-list li .block::before {
        top: calc(100vw * (10 / 1560));
        font-size: calc(100vw * (18 / 1560));
    }

    .recruit .culture-list li .stitle {
        font-size: calc(100vw * (40 / 1560));
    }

    .recruit .culture-list li .txt {
        margin-top: calc(100vw * (16 / 1560));
        margin-right: calc(100vw * (337 / 1560));
        font-size: calc(100vw * (19 / 1560));
    }

    .recruit .effect-list {
        gap: calc(100vw * (40 / 1560));
    }

    .recruit .effect-list li .stitle {
        margin: calc(100vw * (24 / 1560)) calc(100vw * (12 / 1560)) 0;
        font-size: calc(100vw * (24 / 1560));
    }

    .recruit .effect-list li .txt {
        margin: calc(100vw * (12 / 1560)) calc(100vw * (12 / 1560)) 0;
        font-size: calc(100vw * (16 / 1560));
    }

    .recruit .pay-system {
        margin-top: calc(100vw * (60 / 1560));
        gap: calc(100vw * (20 / 1560));
    }

    .recruit .pay-system li {
        height: calc(100vw * (204 / 1560));
    }

    .recruit .pay-system li .stitle {
        margin: 0 calc(100vw * (20 / 1560));
        padding: calc(100vw * (20 / 1560)) 0 calc(100vw * (12/ 1560));
        font-size: calc(100vw * (22 / 1560));
    }

    .recruit .pay-system li .txt {
        margin: 0 calc(100vw * (20 / 1560));
        padding: calc(100vw * (12 / 1560)) 0;
        font-size: calc(100vw * (19 / 1560));
    }

    .recruit .welfare-list {
        grid-auto-rows: minmax(calc(100vw * (90 / 1560)), 1fr);
        gap: calc(100vw * (28 / 1560));
    }

    .recruit .welfare-list li {
        gap: calc(100vw * (20 / 1560));
        padding: calc(100vw * (20 / 1560)) 0;
    }

    .recruit .welfare-list li .txt {
        flex-basis: calc(100% - calc(100vw * (62 / 1560)));
        font-size: calc(100vw * (19 / 1560));
    }

    .recruit .welfare-list li .ico {
        flex-basis: calc(100vw * (42 / 1560));
        height: calc(100vw * (42 / 1560));
        border-radius: calc(100vw * (42 / 1560));
        box-shadow: 0px calc(100vw * (3 / 1560)) calc(100vw * (30 / 1560)) 0px rgba(62, 176, 191, 0.25);
    }

    .recruit .btn-area {
        margin-bottom: calc(100vw * (180 / 1560));
    }

    .recruit .btn-area a {
        width: calc(100vw * (260 / 1560));
    }

}

@media (max-width: 1180px) {
    .recruit .content-box {
        display: block;
    }

    .recruit .content-box .content {
        width: 100%;
    }

    .recruit {
        margin-top: calc(100vw * (180 / 1180));
    }

    .recruit .content-box .title.mo {
        width: 100%;
        margin-bottom: calc(100vw * (40 / 1180));
        padding: 0;
        color: #111;
        line-height: 1.4;
        font-size: calc(100vw * (50 / 1180));
    }

    .recruit .content-box .content h3.mo {
        display: none;
    }

    .recruit .content-box.last {
        margin-bottom: calc(100vw * (100 / 1180));
    }

    .recruit h4 {
        margin: calc(100vw * (80 / 1180)) 0 calc(100vw * (40 / 1180));
        font-size: calc(100vw * (34 / 1180));
    }

    .recruit .content-box .content h4+.img {
        margin-top: calc(100vw * (40 / 1180));
    }

    .recruit .culture-list li {
        padding: calc(100vw * (22 / 1180)) 0 calc(100vw * (43 / 1180)) calc(100vw * (10 / 1180));
    }

    .recruit .culture-list li .thumb {
        right: 0;
        top: calc(100vw * (10 / 1180));
        width: calc(100vw * (248 / 1180));
        height: calc(100vw * (166 / 1180));
        opacity: 1;
    }

    .recruit .culture-list li .thumb img.pc {
        display: none;
    }

    .recruit .culture-list li .thumb img.mo {
        display: block;
    }

    .recruit .culture-list li .block {
        padding-left: calc(100vw * (63 / 1180));
        padding-right: calc(100vw * (317 / 1180));
        padding-bottom: calc(100vw * (62 / 1180));
    }

    .recruit .culture-list li .block::before {
        top: calc(100vw * (10 / 1180));
        font-size: calc(100vw * (18 / 1180));
    }

    .recruit .culture-list li .stitle {
        font-size: calc(100vw * (40 / 1180));
    }

    .recruit .culture-list li .txt {
        margin-top: calc(100vw * (16 / 1180));
        margin-right: 0;
        font-size: calc(100vw * (20 / 1180));
    }

    .recruit .effect-list {
        gap: calc(100vw * (32 / 1180));
    }

    .recruit .effect-list li .stitle {
        margin: calc(100vw * (24 / 1180)) calc(100vw * (12 / 1180)) 0;
        font-size: calc(100vw * (24 / 1180));
    }

    .recruit .effect-list li .txt {
        margin: calc(100vw * (12 / 1180)) calc(100vw * (12 / 1180)) 0;
        font-size: calc(100vw * (17 / 1180));
    }

    .recruit .pay-system {
        margin-top: calc(100vw * (60 / 1180));
        gap: calc(100vw * (20 / 1180));
    }

    .recruit .pay-system li {
        height: calc(100vw * (200 / 1180));
    }

    .recruit .pay-system li .stitle {
        margin: 0 calc(100vw * (18 / 1180));
        padding: calc(100vw * (20 / 1180)) 0 calc(100vw * (12/ 1180));
        font-size: calc(100vw * (22 / 1180));
    }

    .recruit .pay-system li .txt {
        margin: 0 calc(100vw * (18 / 1180));
        padding: calc(100vw * (12 / 1180)) 0;
        font-size: calc(100vw * (17 / 1180));
    }

    .recruit .welfare-list {
        grid-auto-rows: minmax(calc(100vw * (90 / 1180)), 1fr);
        gap: calc(100vw * (28 / 1180));
    }

    .recruit .welfare-list li {
        gap: calc(100vw * (20 / 1180));
        padding: calc(100vw * (16 / 1180)) 0;
    }

    .recruit .welfare-list li .txt {
        flex-basis: calc(100% - calc(100vw * (62 / 1180)));
        font-size: calc(100vw * (20 / 1180));
    }

    .recruit .welfare-list li .ico {
        flex-basis: calc(100vw * (42 / 1180));
        height: calc(100vw * (42 / 1180));
        border-radius: calc(100vw * (42 / 1180));
        box-shadow: 0px calc(100vw * (3 / 1180)) calc(100vw * (30 / 1180)) 0px rgba(62, 176, 191, 0.25);
    }

    .recruit .btn-area {
        margin-bottom: calc(100vw * (180 / 1180));
    }

    .recruit .btn-area a {
        width: calc(100vw * (260 / 1180));
    }
}

@media (max-width: 767px) {
    .recruit {
        overflow-x: hidden;
        margin-top: calc(100vw * (180 / 767));
    }

    .recruit img.pc {
        display: none;
    }

    .recruit img.mo {
        display: block;
    }

    .recruit .content-box.last {
        margin-bottom: calc(100vw * (180 / 767));
    }

    .recruit .content-box .title.mo {
        margin-bottom: calc(100vw * (72 / 767));
        font-size: calc(100vw * (64 / 767));
    }

    .recruit h4 {
        margin: calc(100vw * (100 / 767)) 0 calc(100vw * (72 / 767));
        font-size: calc(100vw * (52 / 767));
    }

    .recruit .content-box .content h4+.img {
        margin-top: calc(100vw * (72 / 767));
    }

    .recruit .zoom {
        position: relative;
        padding-bottom: calc(100vw * (95 / 767));
    }

    .recruit .zoom::before {
        display: block;
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        width: calc(100vw * (64 / 767));
        height: calc(100vw * (64 / 767));
        background: url("../images/company/recruit-ico-zoom.svg") no-repeat left top / 100% 100%;
    }

    .recruit .culture-list li {
        margin-top: calc(100vw * (72 / 767));
        padding: 0;
    }

    .recruit .culture-list li .thumb {
        position: static;
        width: 100%;
        height: 100%;
    }

    .recruit .culture-list li .block {
        margin-top: calc(100vw * (40 / 767));
        padding-left: calc(100vw * (61 / 767));
        padding-right: 0;
        padding-bottom: calc(100vw * (48 / 767));
    }

    .recruit .culture-list li .block::before {
        top: calc(100vw * (8 / 767));
        font-size: calc(100vw * (28 / 767));
    }

    .recruit .culture-list li .stitle {
        font-size: calc(100vw * (52 / 767));
    }

    .recruit .culture-list li .txt {
        margin-top: calc(100vw * (12 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .recruit .effect-list.pc {
        display: none;
    }

    .recruit .effect-list.mo {
        width: 108%;
        height: 100%;
        visibility: visible;
        pointer-events: all;
        opacity: 1;
    }

    .recruit .effect-list {
        width: 105%;
        gap: 0;
    }

    .recruit .effect-list li {
        flex-basis: calc(100vw * (490 / 767));
    }

    .recruit .effect-list li .thumb img {
        max-width: none;
        width: 100%;
        height: 100%;
    }

    .recruit .effect-list li .stitle {
        margin: calc(100vw * (40 / 767)) calc(100vw * (24 / 767)) 0;
        font-size: calc(100vw * (40 / 767));
    }

    .recruit .effect-list li .txt {
        margin: calc(100vw * (12 / 767)) calc(100vw * (24 / 767)) calc(100vw * (40 / 767));
        font-size: calc(100vw * (28 / 767));
    }

    .recruit .pay-system {
        display: block;
        margin-top: calc(100vw * (72 / 767));
    }

    .recruit .pay-system li {
        height: 100%;
        margin-top: calc(100vw * (24 / 767));
    }

    .recruit .pay-system li:first-child {
        margin-top: 0;
    }

    .recruit .pay-system li .stitle {
        margin: 0 calc(100vw * (40 / 767));
        padding: calc(100vw * (40 / 767)) 0 calc(100vw * (24/ 767));
        text-align: left;
        font-size: calc(100vw * (40 / 767));
    }

    .recruit .pay-system li .txt {
        margin: 0 calc(100vw * (40 / 767));
        padding: calc(100vw * (24 / 767)) 0 calc(100vw * (40 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .recruit .pay-system li .txt br {
        display: none;
    }

    .recruit .welfare_wrap h4 {
        margin-bottom: calc(100vw * (40 / 767));
        font-size: calc(100vw * (52 / 767));
    }

    .recruit .welfare-list {
        display: block;
    }

    .recruit .welfare-list li {
        gap: calc(100vw * (40 / 767));
        min-height: calc(100vw * (180 / 767));
        padding: calc(100vw * (48 / 767)) 0;
    }

    .recruit .welfare-list li .txt {
        flex-basis: calc(100% - calc(100vw * (120 / 767)));
        font-size: calc(100vw * (32 / 767));
    }

    .recruit .welfare-list li .ico {
        flex-basis: calc(100vw * (84 / 767));
        height: calc(100vw * (84 / 767));
        border-radius: calc(100vw * (84 / 767));
        box-shadow: 0px calc(100vw * (6 / 767)) calc(100vw * (60 / 767)) 0px rgba(62, 176, 191, 0.25);
    }

    .recruit .welfare-list li .ico img {
        max-width: none;
    }

    .recruit .btn-area {
        display: none;
    }
}

/* About > history */
.sub-bg .mo {
    display: none
}

.history .mo {
    display: none
}

.history {
    padding-top: 124px;
    margin-bottom: 180px;
    position: relative;
    overflow: hidden;
}

.company-history {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
}

.history-title {
    width: calc(100% - 900px);
    padding-right: 20px;
}

.history-title .year {
    max-width: 356px;
    word-break: break-all;
    top: 123px;
    font-weight: 600;
}

.history-title .year.fix {
    position: fixed;
}

.history-title p.year.bottom {
    position: absolute;
    bottom: 0;
    top: auto;
    transform: translateY(0);
}

.history-title .year em {
    display: block;
    color: #111;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.history-title .text-year {
    font-size: 116px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -0.02em;
    text-transform: capitalize;
    background: linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    overflow: hidden;
}

.history-title div.year {
    display: none;
}

.history-title div.year.fix {
    display: block;
    top: auto;
    bottom: 123px;
}

.history-title div.year p {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    color: #111;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    z-index: -1;
}

.history-title div.year p span {
    position: relative;
    display: block;
    margin-left: 6px;
    width: 16px;
    height: 22px;
}

.history-title div.year p span:before {
    content: "";
    width: 4px;
    height: 4px;
    background: #0097F6;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%) rotate(-135deg);
    animation-name: historyScroll;
    animation-duration: 1.5s;
    animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
    animation-iteration-count: infinite;
}

.history-title div.year p span:after {
    content: "";
    background: url(../images/company/scroll.svg)no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

@keyframes historyScroll {
    0% {
        top: 6px;
    }

    50% {
        top: 12px;
    }

    100% {
        top: 6px;
    }
}

@-webkit-keyframes historyScroll {
    0% {
        top: 6px;
    }

    50% {
        top: 12px;
    }

    100% {
        top: 6px;
    }
}

@-ms-keyframes historyScroll {
    0% {
        top: 6px;
    }

    50% {
        top: 12px;
    }

    100% {
        top: 6px;
    }
}

.history-wrap {
    position: relative;
    width: 900px;
}

.history-cont {
    position: relative;
    margin-top: -120px
}

.history-cont ul {
    padding-top: 180px;
    position: relative;
}

.history-cont ul:last-child {
    padding-bottom: 10px;
}

.history-cont ul.active h2 {
    opacity: 1;
    transition: all .2s;
}

.history-cont ul.active p {
    opacity: 1;
    transition: all .2s;
}

.history-cont ul li {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    line-height: 1.45;
    margin-bottom: 32px;
}

.history-cont ul li:last-child {
    margin-bottom: 0;
}

.history-cont ul li h2 {
    width: 100px;
    text-align: left;
    font-size: 22px;
    font-weight: 600;
    opacity: .5;
}

.history-cont ul li div {
    width: calc(100% - 100px);
    padding-left: 36px;
}

.history-cont ul li p {
    margin-bottom: 12px;
    color: #555;
    font-size: 22px;
    font-weight: 500;
    opacity: .5;
}

.history-cont ul li p:last-child {
    margin-bottom: 0;
}

.history aside {
    display: none;
}

.history .bg-circle {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
}

.history .bg-circle.fix {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.history .bg-circle div {
    position: absolute;
    height: 100%;
    width: 100%;
}

.history .bg-circle div:after {
    content: "";
    position: absolute;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
    z-index: -1;
    animation: bgCircleRight 15s linear infinite;
    width: 404px;
    height: 404px;
    filter: blur(250px);
    border-radius: 50%;
}

.history .bg-circle .circle01:after {
    right: -11px;
    top: -100px;
    opacity: .7;
    background: linear-gradient(0deg, #0ED058 0%, #0ED058 100%), lightgray 50% / cover no-repeat;
}

.history .bg-circle .circle02:after {
    bottom: -35px;
    left: -3%;
    background: linear-gradient(0deg, #0ED058 0%, #0ED058 100%), lightgray 50% / cover no-repeat;
}

.history .bg-circle .circle03:after {
    bottom: -35px;
    left: 8%;
    background: #0097F6;
}

@media (min-width: 2000px) {
    .history {
        margin-bottom: 380px;
    }
}

@media (max-width: 1560px) {
    .history {
        padding-top: calc(100vw * (124 / 1560));
        margin-bottom: calc(100vw * (180 / 1560));
    }

    .history-title {
        width: calc(100% - calc(100vw * (900 / 1560)));
        padding-right: calc(100vw * (20 / 1560));
    }

    .history-title .year {
        max-width: calc(100vw * (356 / 1560));
        top: calc(100vw * (123 / 1560));
    }

    .history-title .year em {
        font-size: calc(100vw * (26 / 1560));
        margin-bottom: calc(100vw * (20 / 1560));
    }

    .history-title .text-year {
        font-size: calc(100vw * (116 / 1560));
    }

    .history-wrap {
        width: calc(100vw * (900 / 1560));
    }

    .history-cont {
        margin-top: calc(100vw * (-120 / 1560))
    }

    .history-cont ul {
        padding-top: calc(100vw * (180 / 1560));
    }

    .history-cont ul:last-child {
        padding-bottom: calc(100vw * (10 / 1560));
    }

    .history-cont ul li {
        margin-bottom: calc(100vw * (32 / 1560));
    }

    .history-cont ul li h2 {
        width: calc(100vw * (100 / 1560));
        font-size: calc(100vw * (22 / 1560));
    }

    .history-cont ul li div {
        width: calc(100% - calc(100vw * (100 / 1560)));
        padding-left: calc(100vw * (36 / 1560));
    }

    .history-cont ul li p {
        margin-bottom: calc(100vw * (12 / 1560));
        font-size: calc(100vw * (22 / 1560));
    }

    .history .bg-circle div:after {
        width: calc(100vw * (404 / 1560));
        height: calc(100vw * (404 / 1560));
        filter: blur(calc(100vw * (250 / 1560)));
        opacity: .6;
    }

    .history .bg-circle .circle02:after {
        top: calc(100vw * (410 / 1560));
    }

    .history .bg-circle .circle03:after {
        top: calc(100vw * (650 / 1560));
    }

    .history-title div.year.fix {
        bottom: calc(100vw * (123 / 1560));
    }

    .history-title div.year p {
        font-size: calc(100vw * (16 / 1560));
    }

    .history-title div.year p span {
        margin-left: calc(100vw * (6 / 1560));
        width: calc(100vw * (16 / 1560));
        height: calc(100vw * (22 / 1560));
    }

    .history-title div.year p span:before {
        width: calc(100vw * (4 / 1560));
        height: calc(100vw * (4 / 1560));
        top: calc(100vw * (6 / 1560));
    }
}

@media (max-width: 1180px) {
    .history {
        padding-top: calc(100vw * (124 / 1180));
        margin-bottom: calc(100vw * (180 / 1180));
    }

    .history-title {
        width: calc(100% - calc(100vw * (680 / 1180)));
        padding-right: calc(100vw * (20 / 1180));
    }

    .history-title .year {
        max-width: calc(100vw * (356 / 1180));
        top: calc(100vw * (220 / 1180));
    }

    .history-title .year em {
        font-size: calc(100vw * (26 / 1180));
        margin-bottom: calc(100vw * (20 / 1180));
    }

    .history-title .text-year {
        font-size: calc(100vw * (100 / 1180));
    }

    .history-wrap {
        width: calc(100vw * (680 / 1180));
    }

    .history-cont {
        margin-top: calc(100vw * (-120 / 1180))
    }

    .history-cont ul {
        padding-top: calc(100vw * (180 / 1180));
    }

    .history-cont ul:last-child {
        padding-bottom: calc(100vw * (10 / 1180));
    }

    .history-cont ul li {
        margin-bottom: calc(100vw * (32 / 1180));
    }

    .history-cont ul li h2 {
        width: calc(100vw * (100 / 1180));
        font-size: calc(100vw * (22 / 1180));
    }

    .history-cont ul li div {
        width: calc(100% - calc(100vw * (100 / 1180)));
        padding-left: calc(100vw * (36 / 1180));
    }

    .history-cont ul li p {
        margin-bottom: calc(100vw * (12 / 1180));
        font-size: calc(100vw * (22 / 1180));
    }

    .history .bg-circle {
        display: none;
    }

    .history-title div.year.fix {
        bottom: calc(100vw * (103 / 1180));
    }

    .history-title div.year p {
        font-size: calc(100vw * (16 / 1180));
    }

    .history-title div.year p span {
        margin-left: calc(100vw * (6 / 1180));
        width: calc(100vw * (16 / 1180));
        height: calc(100vw * (22 / 1180));
    }

    .history-title div.year p span:before {
        width: calc(100vw * (4 / 1180));
        height: calc(100vw * (4 / 1180));
        top: calc(100vw * (6 / 1180));
    }

    @keyframes historyScroll {
        0% {
            top: calc(100vw * (6 / 1180));
        }

        50% {
            top: calc(100vw * (12 / 1180));
        }

        100% {
            top: calc(100vw * (6 / 1180));
        }
    }

    @-webkit-keyframes historyScroll {
        0% {
            top: calc(100vw * (6 / 1180));
        }

        50% {
            top: calc(100vw * (12 / 1180));
        }

        100% {
            top: calc(100vw * (6 / 1180));
        }
    }

    @-ms-keyframes historyScroll {
        0% {
            top: calc(100vw * (6 / 1180));
        }

        50% {
            top: calc(100vw * (12 / 1180));
        }

        100% {
            top: calc(100vw * (6 / 1180));
        }
    }
}

@media (max-width: 820px) {
    .history {
        position: relative;
        margin-bottom: 0;
        padding-bottom: calc(100vw * (180 / 1180));
        overflow: inherit;
        z-index: 1;
        overflow: hidden;
    }

    .history:after {
        content: "";
        background: url(../images/company/tab-bg-circle.png)no-repeat;
        width: 1180px;
        height: calc(100vw * (1272 / 1180));
        position: absolute;
        left: 0;
        bottom: calc(100vw * (-130 / 1180));
        z-index: -1;
    }

    .history-title div.year p:before {
        width: calc(100vw * (4 / 1180));
        height: calc(100vw * (4 / 1180));
        top: calc(100vw * (4 / 1180));
        right: calc(100vw * (6 / 1180));
    }

    .history-cont ul:last-child {
        padding-bottom: calc(100vw * (10 / 1180));
    }

    .history-title .year.fix {
        top: 47vw;
    }
}

@media (max-width: 767px) {
    .history:after {
        display: none;
    }

    .sub-bg .pc {
        display: none
    }

    .sub-bg .mo {
        display: block
    }

    .history .pc {
        display: none
    }

    .history .mo {
        display: block
    }

    .company-history {
        display: block;
    }

    .history {
        padding: calc(100vw * (180 / 767)) 0 0;
        margin-bottom: calc(100vw * (180 / 767));
    }

    .history-wrap {
        width: 100%;
    }

    .history-cont {
        margin-top: 0;
    }

    .history-cont ul:first-child {
        padding-top: calc(100vw * (144 / 767));
    }

    .history-cont ul {
        padding: calc(100vw * (180 / 767)) 0;
        border-bottom: 1px solid #D9D9D9;
    }

    .history-cont ul:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .history-cont ul li.mo .history-title {
        width: 100%;
        font-size: calc(100vw * (160 / 767));
        padding-right: 0;
        font-style: normal;
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.02em;
        text-transform: capitalize;
        background: linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: calc(100vw * (72 / 767));
    }

    .history-cont ul li.mo em {
        color: #111;
        font-size: calc(100vw * (36 / 767));
        font-weight: 700;
        line-height: 1;
        text-transform: uppercase;
    }

    .history-cont ul li {
        margin-bottom: calc(100vw * (72 / 767));
    }

    .history-cont ul li h2 {
        width: calc(100vw * (150 / 767));
        font-size: calc(100vw * (32 / 767));
        opacity: 1;
    }

    .history-cont ul li div {
        width: calc(100% - calc(100vw * (150 / 767)));
        padding-left: calc(100vw * (36 / 767));
    }

    .history-cont ul li p {
        margin-bottom: calc(100vw * (24 / 767));
        font-size: calc(100vw * (32 / 767));
        opacity: 1;
    }

    .history aside {
        display: block;
        position: absolute;
        top: 0;
        width: 100%;
        background: #F8F8F8;
        border-top: 1px solid #E4E4E4;
        z-index: 1;
        transition: .2s linear;
        border-bottom: 1px solid #D9D9D9;
        overflow-x: scroll;
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .history aside::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Opera*/
    }

    .history aside.fix {
        position: fixed;
        top: 0;
    }

    .history aside.fix.top {
        top: calc(100vw * (160 / 767));
    }

    .history aside ul {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        padding: 0 calc(100vw * (18 / 767));
    }

    .history aside ul li a {
        display: block;
        padding: calc(100vw * (68 / 767)) calc(100vw * (30 / 767));
        font-size: calc(100vw * (44 / 767));
        font-weight: 600;
        line-height: 1;
        outline: none;
    }

    .history aside ul li p {
        text-align: center;
        color: #999;
        white-space: nowrap;
    }

    .history aside ul li a.on p {
        color: #0097F6;
    }

    .history-title div.year {
        display: none;
    }
}

/* 다국어 */
:lang(en) .overview .video-box h4 {
    font-size: 34px;
}

@media (max-width: 1180px) {
    :lang(en) .overview .video-box h4 {
        font-size: calc(100vw * (34 / 1180));
    }
}

@media (max-width: 767px) {
    :lang(en) .overview .video-box h4 {
        font-size: calc(100vw * (52 / 767));
    }
}

/* 홍보센터 */
/* 게시판 공통 */
.item-tab {
    margin: 10rem 0 5.2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.6rem;
}

.item-tab li {
    display: flex;
    height: 4.4rem;
    justify-content: center;
    align-items: center;
    padding: 0px 16px;
    border-radius: 999px;
    cursor: pointer;
    color: #808080;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1;
}

.item-tab li.on {
    background: #111;
    color: #fff;
}

.item-tab li.on a {
    color: #fff;
}

.item-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: auto;
    margin-right: -4rem;
}

.item-list li {
    width: calc(100%/3);
    padding: 0 4rem 6rem 0;
}

.item-list li:last-child {
    margin-right: 0;
}

.item-list li .img {
    width: 100%;
    height: 27.5rem;
    text-align: center;
}

.cate-box {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

@media (max-width: 1560px) {
    .item-tab {
        margin: calc(100vw * (100 / 1560)) 0 calc(100vw * (52 / 1560));
        gap: calc(100vw * (16 / 1560));
    }

    .item-tab li {
        height: calc(100vw * (44 / 1560));
        padding: 0px calc(100vw * (16 / 1560));
        border-radius: calc(100vw * (999 / 1560));
        font-size: calc(100vw * (24 / 1560));
    }

    .item-list {
        padding-right: calc(100vw * (-28 / 1560));
    }

    .item-list li {
        padding: 0 calc(100vw * (28 / 1560)) calc(100vw * (60 / 1560)) 0;
    }

    .item-list li .img {
        height: calc(100vw * (275 / 1560));
    }
}

@media (max-width: 1180px) {
    .item-tab {
        margin: calc(100vw * (80 / 1180)) 0 calc(100vw * (52 / 1180));
        gap: calc(100vw * (16 / 1180));
    }

    .item-tab li {
        height: calc(100vw * (44 / 1180));
        padding: 0px calc(100vw * (16 / 1180));
        border-radius: calc(100vw * (999 / 1180));
        font-size: calc(100vw * (24 / 1180));
    }

    .item-list {
        margin-right: calc(100vw * (-28 / 1180));
    }

    .item-list li {
        padding: 0 calc(100vw * (28 / 1180)) calc(100vw * (60 / 1180)) 0;
    }

    .item-list li .img {
        height: calc(100vw * (275 / 1180));
    }
}

@media (max-width: 767px) {
    .item-tab {
        overflow: scroll;
        flex-wrap: nowrap;
        margin: calc(100vw * (100 / 767)) calc(100vw * (-48 / 767)) calc(100vw * (52 / 767));
        padding: 0 calc(100vw * (48 / 767));
        gap: calc(100vw * (8 / 767));
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .item-tab::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari, Opera*/
    }

    .item-tab li {
        height: calc(100vw * (88 / 767));
        padding: 0px calc(100vw * (32 / 767));
        border-radius: calc(100vw * (999 / 767));
        font-size: calc(100vw * (36 / 767));
    }

    .item-list {
        display: block;
        margin-right: 0;
    }

    .item-list li {
        width: 100%;
        padding: 0 0 calc(100vw * (80 / 767));
    }

    .item-list li .img {
        height: calc(100vw * (397 / 767));
    }
}

/* Pagination */
.pagination .nav-links {
    margin-top: 20px;
    text-align: center;
}

.pagination .screen-reader-text {
    display: none;
}

.pagination .page-numbers {
    text-align: center;
    color: rgba(17, 17, 17, 0.4);
    font-size: 19px;
    cursor: pointer;
    font-weight: 600;
    line-height: 1;
}

.pagination .page-numbers.current,
.pagination .page-numbers.current:hover {
    color: #111;
}

.pagination .page-numbers:hover {
    color: #111;
}

.pagination .page-numbers.total {
    position: relative;
    padding-left: 13px;
    margin-left: 6px;
}

.pagination .page-numbers.total:hover {
    color: rgba(17, 17, 17, 0.4);
}

.pagination .page-numbers.total::before {
    content: "/";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 7px;
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next {
    margin: 0 20px;
    background: url(../images/pr/page.svg)no-repeat center;
    background-size: contain;
    width: 9px;
    height: 15px;
    display: inline-block;
}

.pagination .page-numbers.prev {
    transform: rotate(180deg);
}

.pagination .page-numbers.prev.disabled,
.pagination .page-numbers.next.disabled {
    opacity: .2;
    cursor: auto;
    pointer-events: none;
}

@media (max-width: 1180px) {
    .pagination .nav-links {
        margin-top: calc(100vw * (20 / 1180));
    }

    .pagination .page-numbers {
        font-size: calc(100vw * (24 / 1180));
    }

    .pagination .page-numbers.total {
        padding-left: calc(100vw * (19 / 1180));
        margin-left: calc(100vw * (7 / 1180));
    }

    .pagination .page-numbers.total::before {
        width: calc(100vw * (7 / 1180));
    }

    .pagination .page-numbers.prev,
    .pagination .page-numbers.next {
        margin: 0 calc(100vw * (60 / 1180));
        width: calc(100vw * (10 / 1180));
        height: calc(100vw * (16 / 1180));
    }
}

@media (max-width: 767px) {
    .pagination .nav-links {
        margin-top: calc(100vw * (40 / 767));
    }

    .pagination .page-numbers {
        font-size: calc(100vw * (32 / 767));
    }

    .pagination .page-numbers.total {
        padding-left: calc(100vw * (26 / 767));
        margin-left: calc(100vw * (12 / 767));
    }

    .pagination .page-numbers.total::before {
        width: calc(100vw * (10 / 767));
    }

    .pagination .page-numbers.prev,
    .pagination .page-numbers.next {
        margin: 0 calc(100vw * (44 / 767));
        width: calc(100vw * (12 / 767));
        height: calc(100vw * (24 / 767));
    }
}

/* 게시판 공통 끝*/

.search {
    margin-top: 10rem;
}

.search .search-box {
    position: relative;
    max-width: 60rem;
    margin: 0 auto;
}

.search .search-box input {
    width: 100%;
    padding: 1.5rem 2rem;
    font-size: 1.9rem;
    font-weight: 500;
    line-height: 1;
    border: 1px solid #D9D9D9;
    background: #F6F6F6;
    box-sizing: border-box;
    border-radius: 0;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

.search .search-box input::placeholder {
    color: #999;
    font-weight: 500;
}

.search .search-box input:focus-visible {
    outline-color: #0097F6;
}

.search .search-box .btn-search {
    background-size: contain;
    background: url(../images/pr/btn-search.svg)no-repeat;
    width: 25px;
    height: 25px;
    position: absolute;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%);
    cursor: pointer;
}

.pr {
    margin-bottom: 18rem;
}

.item-list.pr-list .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-list.pr-list li p {
    color: #1A1A1A;
    font-size: 2.2rem;
    font-weight: 600;
    line-height: 1.45;
    margin: 2.8rem 0 16px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cate-box span {
    display: block;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.6;
}

.cate-box .cate {
    color: #0097F6;
}

.cate-box .date {
    position: relative;
    padding-left: 1rem;
    margin-left: 0.6rem;
    color: #999;
}

.cate-box .date::before {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #CCC;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 1560px) {
    .search {
        margin-top: calc(100vw * (100 / 1560));
    }

    .search .search-box {
        max-width: calc(100vw * (600 / 1560));
    }

    .search .search-box input {
        padding: calc(100vw * (15 / 1560)) calc(100vw * (20 / 1560));
        font-size: calc(100vw * (19 / 1560));
    }

    .search .search-box .btn-search {
        width: calc(100vw * (25 / 1560));
        height: calc(100vw * (25 / 1560));
        right: calc(100vw * (20 / 1560));
        background-size: contain;
    }

    .pr {
        margin-bottom: calc(100vw * (180 / 1560));
    }

    .item-list.pr-list li p {
        font-size: calc(100vw * (22 / 1560));
        margin: calc(100vw * (28 / 1560)) 0 calc(100vw * (16 / 1560));
    }

    .cate-box span {
        font-size: calc(100vw * (16 / 1560));
    }

    .cate-box .date {
        padding-left: calc(100vw * (10 / 1560));
        margin-left: calc(100vw * (6 / 1560));
    }

    .cate-box .date::before {
        width: calc(100vw * (4 / 1560));
        height: calc(100vw * (4 / 1560));
    }
}

@media (min-width: 1181px) {
    .item-list.pr-list li a .img {
        overflow: hidden;
        border: 2px solid #fff;
    }

    .item-list.pr-list li a .img img {
        transition: 0.3s ease;
    }

    .item-list.pr-list li a:hover .img {
        border-image: linear-gradient(to right, #09DD8D 0%, #0097F6 100%);
        border-image-slice: 1;
        overflow: hidden;
    }

    .item-list.pr-list li a:hover .img img {
        transform: scale(1.1);
    }
}

@keyframes visualScaleSmall {
    0% {
        transform: translateZ(0) scale(1) rotate(0deg)
    }

    100% {
        transform: translateZ(0) scale(1.1) rotate(0.0001deg)
    }
}

@-webkit-keyframes visualScaleSmall {
    0% {
        transform: translateZ(0) scale(1) rotate(0deg)
    }

    100% {
        transform: translateZ(0) scale(1.1) rotate(0.0001deg)
    }
}

@-ms-keyframes visualScaleSmall {
    0% {
        transform: translateZ(0) scale(1) rotate(0deg)
    }

    100% {
        transform: translateZ(0) scale(1.1) rotate(0.0001deg)
    }
}

@media (max-width: 1180px) {
    .search {
        margin-top: calc(100vw * (80 / 1180));
    }

    .search .search-box {
        max-width: calc(100vw * (600 / 1180));
    }

    .search .search-box input {
        padding: calc(100vw * (20 / 1180)) calc(100vw * (23 / 1180));
        font-size: calc(100vw * (22 / 1180));
    }

    .search .search-box .btn-search {
        width: calc(100vw * (24 / 1180));
        height: calc(100vw * (24 / 1180));
        right: calc(100vw * (23 / 1180));
    }

    .pr {
        margin-bottom: calc(100vw * (180 / 1180));
    }

    .item-list.pr-list li p {
        font-size: calc(100vw * (24 / 1180));
        margin: calc(100vw * (28 / 1180)) 0 calc(100vw * (16 / 1180));
    }

    .cate-box span {
        font-size: calc(100vw * (19 / 1180));
    }

    .cate-box .date {
        padding-left: calc(100vw * (10 / 1180));
        margin-left: calc(100vw * (6 / 1180));
    }

    .cate-box .date::before {
        width: calc(100vw * (4 / 1180));
        height: calc(100vw * (4 / 1180));
    }
}

@media (max-width: 767px) {
    .search {
        margin-top: calc(100vw * (100 / 767));
    }

    .search .search-box {
        max-width: calc(100vw * (654 / 767));
    }

    .search .search-box input {
        padding: calc(100vw * (40 / 767)) calc(100vw * (44 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .search .search-box .btn-search {
        width: calc(100vw * (48 / 767));
        height: calc(100vw * (48 / 767));
        right: calc(100vw * (40 / 767));
    }

    .pr {
        margin-bottom: calc(100vw * (180 / 767));
    }

    .item-list.pr-list li p {
        font-size: calc(100vw * (36 / 767));
        margin: calc(100vw * (28 / 767)) 0 calc(100vw * (24 / 767));
    }

    .cate-box span {
        font-size: calc(100vw * (32 / 767));
    }

    .cate-box .date {
        padding-left: calc(100vw * (20 / 767));
        margin-left: calc(100vw * (12 / 767));
    }

    .cate-box .date::before {
        width: calc(100vw * (8 / 767));
        height: calc(100vw * (8 / 767));
    }
}

/* 상세 */
.btn-list {
    display: block;
    position: relative;
    padding-left: 38px;
    line-height: 28px;
    font-weight: 500;
    font-size: 16px;
}

.btn-list:after {
    content: "";
    width: 28px;
    height: 28px;
    background: url(../images/common/btn-list.svg)no-repeat center;
    position: absolute;
    top: 0;
    left: 0;
    background-size: contain;
}

.btnBc.color {
    justify-content: center;
    margin: 0 auto;
    font-weight: 600;
    font-size: 18px;
    background: linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
    -webkit-text-fill-color: #fff;
    cursor: pointer;
}

.btnBc.color2 {
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    background: linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
    -webkit-text-fill-color: #fff;
    cursor: pointer;
    border: 0;
}

.view-box {
    padding-top: 100px;
    margin: 90px 0 180px;
}

.view-box .container {
    max-width: 980px;
}

.view-box .view .title {
    padding: 43px 0 80px;
}

.view-box .view .title h2 {
    margin-bottom: 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.4;
}

.view-box .view .cont {
    padding: 80px 0 60px;
    letter-spacing: -0.01em;
    line-height: 1.7;
    border-top: 1px solid #D9D9D9;
    border-bottom: 1px solid #D9D9D9;
}

.view-box .view .cont h1 {
    line-height: 1.4;
    margin: 40px 0;
}

.view-box .view .cont h2 {
    line-height: 1.5;
    margin: 40px 0;
}

.view-box .view .cont h3 {
    line-height: 1.6;
    margin: 40px 0;
}

.view-box .view .cont h4 {
    line-height: 1.6;
    margin: 40px 0;
}

.view-box .view .cont h5 {
    line-height: 1.7;
    margin: 40px 0;
}

.view-box .view .cont h6 {
    line-height: 1.7;
    margin: 40px 0;
}

.view-box .view .cont li {
    margin: 0 0 0 4px;
    font-size: 19px;
    list-style: disc;
    list-style-position: inside;
    line-height: 1.75
}

.view-box .view .cont a {
    text-decoration: underline;
}

.view-box .view .cont > p {
    /* margin: 40px 0; */
    font-size: 19px !important;
    line-height: 1.8;
    font-weight: 500;
    color: #111;
	font-family: 'Pretendard', AppleGothic, 'Malgun Gothic', '맑은 고딕', 'Dotum', sans-serif !important;
}

.view-box .view .cont > p > span {
    font-size: 19px !important;
	font-family: 'Pretendard', AppleGothic, 'Malgun Gothic', '맑은 고딕', 'Dotum', sans-serif !important;
}

.view-box .view .cont > span {
    font-size: 19px !important;
	font-family: 'Pretendard', AppleGothic, 'Malgun Gothic', '맑은 고딕', 'Dotum', sans-serif !important;
}

.view-box .view .cont p:first-child {
    margin: 0 0 40px 0;
}

.view-box .view .cont figure {
    margin: 40px 0;
}

.view-box .view .cont .wp-block-image .aligncenter {
    margin-left: auto !important;
    margin-right: auto !important;
}

.view-box .view .cont .video,
.view-box .view .cont .wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.view-box .view .cont .video iframe,
.view-box .view .cont .wp-block-embed__wrapper iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.btn-view {
    margin-bottom: 80px;
}

.btn-view li {
    font-weight: 500;
    font-size: 19px;
    line-height: 1.1;
}

.btn-view li:last-child a span:after {
    top: calc(50% - 7px);
    transform: rotate(180deg) translateY(-50%);
}

.btn-view li a {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 80px;
    border-bottom: 1px solid #D9D9D9;
}

.btn-view li a span {
    display: block;
    position: relative;
    width: 120px;
    text-align: center;
}

.btn-view li a span:after {
    content: "";
    background: url(../images/common/btn-view.svg)no-repeat;
    background-size: contain;
    width: 12px;
    height: 7px;
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
    transform: translateY(-50%);
}

.btn-view li a p {
    position: relative;
    padding-left: 40px;
    margin-left: 40px;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn-view li a p::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 20px;
    background: #D9D9D9;
}

.btn-view li.none p {
    color: #999;
}

@media (min-width: 1181px) {
    .btnBc.color {
        border-image: linear-gradient(to right, #09DD8D 0%, #0097F6 100%);
        border-image-slice: 1;
        overflow: hidden;
        justify-content: center;
        margin: 0 auto;
        background: var(--gr, linear-gradient(305deg, #0097F6 0%, #09DD8D 100%));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 600;
        font-size: 18px;
    }
	
    .btnBc.color:hover {
        background: linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
        -webkit-text-fill-color: #fff;
    }
	.btn-view li a:hover {
        background-color: #EBF7FF;
    }
    
	.btnBc.color img.wh-img{
	  display:none;
	}
	.btnBc.color:hover img.bl-img{
	  display:none;
	}
	.btnBc.color:hover img.wh-img{
	  display:block
	}
    
    .new_btn_area a img.bl-img{
	    display:none;
	}
	
	.new_btn_area a:hover img.wh-img{
        display:none;
    }
    
    .new_btn_area a:hover img.bl-img{
        display:block;
    }

    
    
}

@media (max-width: 1180px) {
    .btn-list {
        padding-left: calc(100vw * (38 / 1180));
        line-height: calc(100vw * (28 / 1180));
        font-size: calc(100vw * (16 / 1180));
    }

    .btn-list:after {
        width: calc(100vw * (28 / 1180));
        height: calc(100vw * (28 / 1180));
    }

    .btnBc.color {
        font-size: calc(100vw * (18 / 1180));
        border: 0;
    }

    .btnBc.color2 {
        font-size: calc(100vw * (18 / 1180));
    }

    .view-box {
        padding-top: calc(100vw * (100 / 1180));
        margin: calc(100vw * (90 / 1180)) 0 calc(100vw * (180 / 1180));
    }

    .view-box .container {
        max-width: 100%;
    }

    .view-box .view .title {
        padding: calc(100vw * (52 / 1180)) 0 calc(100vw * (80 / 1180));
    }

    .view-box .view .title h2 {
        margin-bottom: calc(100vw * (20 / 1180));
        font-size: calc(100vw * (40 / 1180));
    }

    .view-box .view .cont {
        padding: calc(100vw * (80 / 1180)) calc(100vw * (50 / 1180));
    }

    .view-box .view .cont h1 {
        margin: calc(100vw * (40 / 1180)) 0;
    }

    .view-box .view .cont h2 {
        margin: calc(100vw * (40 / 1180)) 0;
    }

    .view-box .view .cont h3 {
        margin: calc(100vw * (40 / 1180)) 0;
    }

    .view-box .view .cont h4 {
        margin: calc(100vw * (40 / 1180)) 0;
    }

    .view-box .view .cont h5 {
        margin: calc(100vw * (40 / 1180)) 0;
    }

    .view-box .view .cont h6 {
        margin: calc(100vw * (40 / 1180)) 0;
    }

    .view-box .view .cont li {
        margin: 0 0 0 calc(100vw * (4 / 1180));
        font-size: calc(100vw * (19 / 1180));
    }

    .view-box .view .cont p {
        margin: calc(100vw * (40 / 1180)) 0;
        font-size: calc(100vw * (19 / 1180));
    }

    .view-box .view .cont p:first-child {
        margin: 0 0 calc(100vw * (40 / 1180)) 0;
    }

    .view-box .view .cont figure {
        margin: calc(100vw * (40 / 1180)) 0;
    }

    .btn-view {
        margin-bottom: calc(100vw * (80 / 1180));
    }

    .btn-view li {
        font-size: calc(100vw * (19 / 1180));
    }

    .btn-view li:last-child a span:after {
        top: calc(50% - calc(100vw * (7 / 1180)));
    }

    .btn-view li a {
        height: calc(100vw * (80 / 1180));
    }

    .btn-view li a span {
        width: calc(100vw * (120 / 1180));
    }

    .btn-view li a span:after {
        width: calc(100vw * (12 / 1180));
        height: calc(100vw * (7 / 1180));
        top: calc(50% - calc(100vw * (1 / 1180)));
    }

    .btn-view li a p {
        padding-left: calc(100vw * (40 / 1180));
        margin-left: calc(100vw * (40 / 1180));
    }

    .btn-view li a p::before {
        width: 1px;
        height: calc(100vw * (20 / 1180));
    }
    .new_btn_area a img.bl-img{
	    display:none;
	}
	
}

@media (max-width: 767px) {
    .btn-list {
        padding-left: calc(100vw * (76 / 767));
        line-height: calc(100vw * (56 / 767));
        font-size: calc(100vw * (28 / 767));
    }

    .btn-list:after {
        width: calc(100vw * (56 / 767));
        height: calc(100vw * (56 / 767));
    }

    .btnBc.color {
        width: calc(100vw * (520 / 767)) !important;
        height: calc(100vw * (120 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .btnBc.color2 {
        width: calc(100vw * (360 / 767));
        height: calc(100vw * (100 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .view-box {
        padding-top: calc(100vw * (160 / 767));
        margin: calc(100vw * (92 / 767)) 0 calc(100vw * (180 / 767));
    }

    .view-box .view .title {
        padding: calc(100vw * (52 / 767)) 0 calc(100vw * (80 / 767));
    }

    .view-box .view .title h2 {
        margin-bottom: calc(100vw * (32 / 767));
        font-size: calc(100vw * (52 / 767));
    }

    .view-box .view .cont {
        padding: calc(100vw * (80 / 767)) 0;
    }

    .view-box .view .cont h1 {
        margin: calc(100vw * (80 / 767)) 0;
    }

    .view-box .view .cont h2 {
        margin: calc(100vw * (80 / 767)) 0;
    }

    .view-box .view .cont h3 {
        margin: calc(100vw * (80 / 767)) 0;
    }

    .view-box .view .cont h4 {
        margin: calc(100vw * (80 / 767)) 0;
    }

    .view-box .view .cont h5 {
        margin: calc(100vw * (80 / 767)) 0;
    }

    .view-box .view .cont h6 {
        margin: calc(100vw * (80 / 767)) 0;
    }

    .view-box .view .cont li {
        margin: 0 0 0 calc(100vw * (4 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .view-box .view .cont p {
        margin: calc(100vw * (80 / 767)) 0;
        font-size: calc(100vw * (32 / 767));
        text-align: center;
    }

    .view-box .view .cont p:first-child {
        margin: 0 0 calc(100vw * (80 / 767)) 0;
    }

    .view-box .view .cont figure {
        margin: calc(100vw * (80 / 767)) 0;
    }

    .btn-view {
        margin-bottom: calc(100vw * (120 / 767));
    }

    .btn-view li {
        font-size: calc(100vw * (32 / 767));
    }

    .btn-view li:last-child a span:after {
        top: calc(50% - calc(100vw * (14 / 767)));
    }

    .btn-view li a {
        height: calc(100vw * (160 / 767));
    }

    .btn-view li a span {
        width: calc(100vw * (163 / 767));
    }

    .btn-view li a span:after {
        width: calc(100vw * (24 / 767));
        height: calc(100vw * (14 / 767));
        top: calc(50% - calc(100vw * (1 / 767)));
    }

    .btn-view li a p {
        width: calc(100% - calc(100vw * (163 / 767)));
        padding-left: calc(100vw * (40 / 767));
        margin-left: 0;
    }

    .btn-view li a p::before {
        display: none;
    }
}


/* IR */
.ir {
    margin: 100px 0 180px;
}

.ir h3 {
    margin-bottom: 32px;
    color: #111;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.ir ul {
    margin-bottom: 80px;
    border-top: 2px solid #111;
}

.ir ul li {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 36px 20px;
    border-bottom: 1px solid #CDDCE5;
    cursor: pointer
}

.ir ul li h4 {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #111;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.45;
}

.ir ul li .date {
    width: 100px;
    margin-left: 60px;
    color: #999;
    font-size: 19px;
    font-weight: 500;
    line-height: 1;
    text-align: right;
}

.ir.ver1 ul li {
    padding: 0;
    border-bottom: none;
}

.ir.ver1 ul li a {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 36px 20px;
    border-bottom: 1px solid #CDDCE5;
}

.ir.ver1 ul li h4 {
    width: calc(100% - 302px);
}

.ir.ver1 ul li .ir-down {
    position: relative;
    display: block;
    margin-left: 120px;
    width: 42px;
    height: 42px;
    font-size: 0;
}

.ir.ver1 ul li .ir-down::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/ir/ir-down.svg)no-repeat;
    background-size: contain;
}

.ir.ver2 ul li {
    padding: 0;
    border-bottom: none;
}

.ir.ver2 ul li a {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 36px 20px;
    border-bottom: 1px solid #CDDCE5;
}

.ir.ver2 ul li .cate {
    display: block;
    width: 80px;
    margin-right: 60px;
    color: #0097F6;
    font-size: 19px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
}

.ir.ver2 ul li h4 {
    width: calc(100% - 140px);
    padding-right: 140px;
}

.ir.ver2 ul li .date {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

.ir.ver3 ul li h4 {
    width: calc(100% - 140px);
}

.ir-attachment {
    margin: 80px 0 20px;
    padding: 30px 0 20px;
    border-top: 1px solid #D9D9D9;
    border-bottom: 1px solid #D9D9D9;
}

.view-box .view .cont .ir-attachment a {
    text-decoration: none;
}

.ir-attachment a {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    height: 30px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}

.ir-attachment a span {
    position: relative;
    display: inline-block;
    padding-right: 42px;
}

.ir-attachment a span::after {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: url(../images/ir/ir-attachment.svg)no-repeat;
    background-size: contain;
}

@media (min-width: 1181px) {
    .ir.ver2 ul li:hover {
        background: #EBF7FF;
    }

    .ir.ver1 ul li:hover .ir-down::before {
        background: url(../images/ir/ir-down-on.svg)no-repeat;
        background-size: contain;
    }
}

@media (max-width: 1560px) {
    .ir {
        margin: calc(100vw * (100 / 1560)) 0 calc(100vw * (180 / 1560));
    }

    .ir h3 {
        margin-bottom: calc(100vw * (32 / 1560));
        font-size: calc(100vw * (24 / 1560));
    }

    .ir ul {
        margin-bottom: calc(100vw * (80 / 1560));
    }

    .ir ul li {
        padding: calc(100vw * (36 / 1560)) calc(100vw * (20 / 1560));
    }

    .ir ul li h4 {
        font-size: calc(100vw * (22 / 1560));
    }

    .ir ul li .date {
        width: calc(100vw * (100 / 1560));
        margin-left: calc(100vw * (60 / 1560));
        font-size: calc(100vw * (19 / 1560));
    }

    .ir.ver1 ul li a {
        padding: calc(100vw * (36 / 1560)) calc(100vw * (20 / 1560));
    }

    .ir.ver1 ul li h4 {
        width: calc(100% - calc(100vw * (302 / 1560)));
    }

    .ir.ver1 ul li .ir-down {
        margin-left: calc(100vw * (120 / 1560));
        width: calc(100vw * (42 / 1560));
        height: calc(100vw * (42 / 1560));
    }

    .ir.ver2 ul li a {
        padding: calc(100vw * (36 / 1560)) calc(100vw * (20 / 1560));
    }

    .ir.ver2 ul li .cate {
        width: calc(100vw * (80 / 1560));
        margin-right: calc(100vw * (60 / 1560));
        font-size: calc(100vw * (19 / 1560));
    }

    .ir.ver2 ul li h4 {
        width: calc(100% - calc(100vw * (140 / 1560)));
        padding-right: calc(100vw * (140 / 1560));
    }

    .ir.ver2 ul li .date {
        right: calc(100vw * (20 / 1560));
    }

    .ir.ver3 ul li h4 {
        width: calc(100% - calc(100vw * (140 / 1560)));
    }

    .ir-attachment {
        margin: calc(100vw * (80 / 1560)) 0 calc(100vw * (20 / 1560));
        padding: calc(100vw * (30 / 1560)) 0 calc(100vw * (20 / 1560));
    }

    .ir-attachment a {
        margin-bottom: calc(100vw * (10 / 1560));
        height: calc(100vw * (30 / 1560));
        font-size: calc(100vw * (16 / 1560));
    }

    .ir-attachment a span {
        padding-right: calc(100vw * (42 / 1560));
    }

    .ir-attachment a span::after {
        width: calc(100vw * (30 / 1560));
        height: calc(100vw * (30 / 1560));
    }
}

@media (max-width: 1180px) {
    .ir {
        margin: calc(100vw * (80 / 1180)) 0 calc(100vw * (180 / 1180));
    }

    .ir h3 {
        margin-bottom: calc(100vw * (32 / 1180));
        font-size: calc(100vw * (24 / 1180));
    }

    .ir ul {
        margin-bottom: calc(100vw * (80 / 1180));
    }

    .ir ul li {
        padding: calc(100vw * (36 / 1180)) calc(100vw * (20 / 1180));
    }

    .ir ul li h4 {
        font-size: calc(100vw * (26 / 1180));
    }

    .ir ul li .date {
        width: calc(100vw * (92 / 1180));
        margin-left: calc(100vw * (60 / 1180));
        font-size: calc(100vw * (19 / 1180));
    }

    .ir.ver1 ul li a {
        padding: calc(100vw * (36 / 1180)) calc(100vw * (20 / 1180));
    }

    .ir.ver1 ul li h4 {
        width: calc(100% - calc(100vw * (274 / 1180)));
    }

    .ir.ver1 ul li .ir-down {
        margin-left: calc(100vw * (80 / 1180));
        width: calc(100vw * (42 / 1180));
        height: calc(100vw * (42 / 1180));
    }

    .ir.ver2 ul li a {
        padding: calc(100vw * (36 / 1180)) calc(100vw * (20 / 1180));
    }

    .ir.ver2 ul li .cate {
        width: calc(100vw * (80 / 1180));
        margin-right: calc(100vw * (60 / 1180));
        font-size: calc(100vw * (19 / 1180));
    }

    .ir.ver2 ul li h4 {
        width: calc(100% - calc(100vw * (140 / 1180)));
        padding-right: calc(100vw * (152 / 1180));
    }

    .ir.ver2 ul li .date {
        right: calc(100vw * (20 / 1180));
    }

    .ir.ver3 ul li h4 {
        width: calc(100% - calc(100vw * (152 / 1180)));
    }

    .ir-attachment {
        margin: calc(100vw * (80 / 1180)) calc(100vw * (-50 / 1180)) calc(100vw * (20 / 1180));
        padding: calc(100vw * (30 / 1180)) 0 calc(100vw * (20 / 1180));
    }

    .ir-attachment a {
        margin-bottom: calc(100vw * (10 / 1180));
        height: calc(100vw * (30 / 1180));
        font-size: calc(100vw * (16 / 1180));
    }

    .ir-attachment a span {
        padding-right: calc(100vw * (42 / 1180));
    }

    .ir-attachment a span::after {
        width: calc(100vw * (30 / 1180));
        height: calc(100vw * (30 / 1180));
    }
}

@media (max-width: 767px) {
    .ir {
        margin: calc(100vw * (100 / 767)) 0 calc(100vw * (180 / 767));
    }

    .ir h3 {
        margin-bottom: calc(100vw * (34 / 767));
        font-size: calc(100vw * (40 / 767));
    }

    .ir ul {
        margin-bottom: calc(100vw * (120 / 767));
    }

    .ir ul li {
        padding: calc(100vw * (48 / 767)) 0;
    }

    .ir ul li h4 {
        width: 100%;
        font-size: calc(100vw * (36 / 767));
        -webkit-line-clamp: 2;
        word-break: break-all;
    }

    .ir ul li .date {
        font-size: calc(100vw * (32 / 767));
        text-align: left;
        margin: 0 0 calc(100vw * (16 / 767));
        width: 100%;
    }

    .ir.ver1 ul li a {
        flex-direction: column-reverse;
        padding: calc(100vw * (48 / 767)) 0;
        flex-wrap: wrap;
        position: relative;
    }

    .ir.ver1 ul li h4 {
        width: 100%;
        padding-right: calc(100vw * (164 / 767));
    }

    .ir.ver1 ul li .ir-down {
        margin: 0;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        width: calc(100vw * (84 / 767));
        height: calc(100vw * (84 / 767));
    }

    .ir.ver2 ul li a {
        padding: calc(100vw * (48 / 767)) 0;
        flex-wrap: wrap;
        justify-content: flex-start;
        position: relative;
    }

    .ir.ver2 ul li .cate {
        width: auto;
        margin-right: calc(100vw * (20 / 767));
        font-size: calc(100vw * (32/ 767));
        display: inline-block;
    }

    .ir.ver2 ul li h4 {
        width: 100%;
        margin-top: calc(100vw * (16 / 767));
        padding: 0;
    }

    .ir.ver2 ul li .date {
        position: relative;
        right: 0;
        top: 0;
        width: auto;
        margin: 0;
        text-align: left;
        display: inline-block;
        transform: translateY(0);
    }

    .ir.ver3 ul li {
        flex-direction: column-reverse;
        flex-wrap: wrap;
    }

    .ir.ver3 ul li h4 {
        width: 100%;
    }

    .ir-attachment {
        margin: 0;
        padding: calc(100vw * (48 / 767)) 0 calc(100vw * (32/ 767));
    }

    .ir-attachment a {
        margin-bottom: calc(100vw * (16 / 767));
        height: calc(100vw * (60 / 767));
        font-size: calc(100vw * (28 / 767));
    }

    .ir-attachment a span {
        padding-right: calc(100vw * (80 / 767));
    }

    .ir-attachment a span::after {
        width: calc(100vw * (60 / 767));
        height: calc(100vw * (60 / 767));
    }
}


/* 문의하기 */

/* 문의하기 */
.contact * {
    outline: none
}

.contact {
    position: relative;
    margin-top: 100px;
    padding: 124px 0 180px;
}

.contact::after {
    content: "";
    background: url(../images/contact/contact-bg.png)no-repeat;
    background-size: contain;
    width: 1361px;
    height: 1353px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.contact-title {
    width: 408px;
}

.contact-title h2 {
    font-size: 68px;
    font-weight: 600;
    line-height: 1;
    margin: 32px 0;
}

.contact-title p {
    color: #555;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
    max-width: 400px;
    padding-left: 8px;
}

.contact-title>.flex span {
    display: block;
    margin: 0 6px;
}

.contact .form-wrap {
    width: calc(100% - 408px);
    padding-left: 192px;
}

/* Form */
input:-ms-input-placeholder {
    color: #B6B6B6;
}

input::-webkit-input-placeholder {
    color: #B6B6B6;
}

input::-moz-placeholder {
    color: #B6B6B6;
}

input::-o-placeholder {
    color: #B6B6B6;
}

input:disabled {
    background: transparent;
    color: #666;
    opacity: 1;
}

.form>li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 48px;
    gap: 40px;
}

.form>li input {
    width: 100%;
    height: 60px;
    padding: 0 20px;
    border: 1px solid #D9D9D9;
    background: #F6F6F6;
    box-sizing: border-box;
    font-size: 19px;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

.form>li input:focus-visible {
    outline: #0097F6;
    border-color: #0097F6;
}

.form>li .on label {
    color: #0097F6;
}

.form>li label.on {
    color: #0097F6;
}

.form>li .col {
    flex-basis: calc(100% / 2 - 20px);
}

.form>li .col:last-child {
    margin-right: 0;
}

.form>li .col-full {
    width: 100%
}

.form>li .color input::placeholder {
    color: #111
}

.form>li label {
    position: relative;
    color: #111;
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
    padding-bottom: 16px;
    display: block;
}

.form>li label.required::after {
    content: "*";
    margin-left: 2px;
    font-weight: 400;
    font-size: 19px;
    color: #0097F6;
}

.form>li textarea {
    width: calc(100% - 40px);
    height: 200px;
    padding: 30px 20px;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.45;
    border: 1px solid #D9D9D9;
    background: #F6F6F6;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
}

.form>li textarea::placeholder {
    color: #B6B6B6
}

.form>li .col-full .flex {
    gap: 40px;
    justify-content: space-between;
}

.form .select-box {
    position: relative;
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    height: 60px;
    padding: 0 20px;
    border: 1px solid #D9D9D9;
    background: #F6F6F6;
    box-sizing: border-box;
    cursor: pointer;
    flex-basis: calc(100% / 2 - 20px);
}

.form .select-box:last-child {
    margin-right: 0;
}

.form .select-box .txt {
    width: 100%;
    font-size: 19px;
}

.form .select-box .txt a {
    position: relative;
    display: block;
}

.form .select-box .txt a::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 14px;
    height: 9px;
    background: url(../images/contact/select.svg) no-repeat center center / 100% 100%;
    transform: translateY(-50%) rotate(0deg);
    transition: all .2s;
}

.form .select-box.on .txt a::after {
    transform: translateY(-50%) rotate(180deg);
}

.form .select-box.on .select-inner {
    display: block;
}

.form .select-inner {
    display: none;
    position: absolute;
    left: -1px;
    top: 66px;
    width: calc(100% + 2px);
    max-height: 194px;
    overflow-y: auto;
    padding: 24px 16px;
    z-index: 1;
    border: 1px solid #D9D9D9;
    background: #F6F6F6;
    box-shadow: 0px 4px 8px 0px rgba(182, 188, 189, 0.16);
}

.select {
    position: relative;
    width: 100%;
    height: 60px;
    padding: 0 18px;
    font-family: 'Pretendard';
    font-size: 19px;
    cursor: pointer;
    border: 1px solid #D9D9D9;
    box-sizing: border-box;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -ms-appearance: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #F6F6F6 url('../images/contact/select.svg') no-repeat right 20px center / 14px;
}

.select2 {
    position: relative;
    display: inline-block;
    
  }
  
.select2 button {
    padding: 0 50px 0 18px;
    width: 100%;
    height: 60px;
    font-family: 'Pretendard';
    font-size: 19px;
    text-align: left;
    background: #F6F6F6 url('../images/contact/select.svg') no-repeat right 20px center / 14px;
    border: 1px solid #D9D9D9;
}

.select2 ul li {
    white-space: nowrap;
    /* 줄바꿈 안함 */
    overflow: hidden;
    text-overflow: ellipsis;
    /* 말줄임 적용 */
}

.select2 ul {
    width: 100%;
    border: 1px solid #D9D9D9;
    display: none;
    position: absolute;
    top: 65px;
    left: 0;
    padding:20px;
    max-height: 270px;
    background: #F6F6F6;
    margin: 1px 0 0 -1px;
    cursor: pointer;
    overflow: auto;
    z-index: 10;
}
.select2.active {
    z-index: 2;
}

.select2.active ul {
    display: initial;
}

.select2 ul li {
    padding: 8px 5px;
    font-size: 16px;
    color: #111;
    opacity: 0.5;
}

.select2 ul li:hover {
    opacity: 1;
    font-weight: bold;
}

.modals_pop{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
    z-index: 200;
}

.modals_pop .modals_box{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    width: 100%;
    height: 100%;
}

.modals_pop .modals_box .modals_con{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 600px;
    min-height: 350px;
    padding: 30px;
    background-color: #fff;
}

.modals_pop .modals_box .btn_close{
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    text-indent: -999px;
    overflow: hidden;
    background: none;
}

.modals_pop .modals_box .btn_close::before{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25px;
    height: 2px;
    content: '';
    background-color: #999;
    transform: translate(-50%, -50%) rotate(45deg);
}

.modals_pop .modals_box .btn_close::after{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25px;
    height: 2px;
    content: '';
    background-color: #999;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.modals_pop .modals_box .contact_con {

    text-align: center;

}

.modals_pop .modals_box .contact_con h2{
    margin-bottom: 20px;
    font-size: 30px;
}

.modals_pop .modals_box .contact_con p{
    margin-bottom: 40px;
    line-height: 1.4;
}




.form .select-inner::-webkit-scrollbar {
    width: 2px;
    -webkit-overflow-scrolling: touch;
}

.form .select-inner::-webkit-scrollbar-thumb {
    background: #111;
}

.form .select-inner::-webkit-scrollbar-track {
    background: #FFFFFF;
}

.form .select-inner .select-list li {
    color: #111;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 10px;
}

.form .select-inner .select-list li:last-child {
    margin-bottom: 0;
}

.form .select-inner .select-list li a {
    opacity: 0.5;
}

.form .select-inner .select-list li:hover a {
    opacity: 1;
}

.form .privacy {
    margin-bottom: 80px;
}

.form .privacy .ck-input {
    position: relative;
    display: inline-block;
}

.form .privacy .ck-input .txt {
    margin-top: 16.5px;
    color: #555;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    padding-left: 30px
}

.form .privacy .ck-input .txt a {
    color: #555;
    text-decoration-line: underline;
}

.form .privacy .ck-input label {
    cursor: pointer;
}

.form .privacy .ck-input input {
    width: 100%;
    height: 20px;
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.form .privacy .ck-input span {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    word-break: keep-all;
    line-height: 1;
    font-size: 19px;
    font-style: normal;
    font-weight: 600;
    color: #111;
}

.form .privacy .ck-input span::before {
    content: "";
    background-image: url(../images/contact/check_off.svg);
    top: -1px;
    left: 0;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 10px;
}

.form .privacy .ck-input input:checked+span {
    color: #3E93F2;
}

.form .privacy .ck-input input:checked+span:before {
    background-image: url(../images/contact/check_on.svg);
}

.form .privacy .table {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-top: 30px;
    border: 1px solid #D9D9D9;
}

.form .privacy .table li {
    width: calc(100%/3);
}

.form .privacy .table li span {
    display: block;
    border-bottom: 1px solid #D9D9D9;
    padding: 15px 0;
    color: #111;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    border-right: 1px solid #D9D9D9;
}

.form .privacy .table li:last-child span {
    border-right: 0;
}

.form .privacy .table li div {
    padding: 27px 0;
    color: #555;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    border-right: 1px solid #D9D9D9;
}

.form .privacy .table li:last-child div {
    border-right: 0
}

.form .privacy .table li div p:first-child {
    margin-bottom: 4px;
}

.form .privacy.check {
    margin-bottom: 40px;
}

.form .check .check_list {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem 2rem;
    width: 100%;
    border: 1px solid #D9D9D9;
}

.form .check .check_list .ck-input {
    margin: 1rem 0;
    width: 25%;
}

.form .check .check_list .ck-input:first-child {
    width: 100%;
}

@media (max-width: 1560px) {
    .contact {
        margin-top: calc(100vw * (100 / 1560));
        padding: calc(100vw * (124 / 1560)) 0 calc(100vw * (180 / 1560));
    }

    .contact::after {
        width: calc(100vw * (1361 / 1560));
        height: calc(100vw * (1353 / 1560));
    }

    .contact-title {
        width: calc(100vw * (408 / 1560));
    }

    .contact-title h2 {
        font-size: calc(100vw * (68 / 1560));
        margin: calc(100vw * (32 / 1560)) 0;
    }

    .contact-title p {
        font-size: calc(100vw * (20 / 1560));
        padding-left: calc(100vw * (8 / 1560));
    }

    .contact-title>.flex span {
        margin: 0 calc(100vw * (6 / 1560));
    }

    .contact .form-wrap {
        width: calc(100% - calc(100vw * (408 / 1560)));
        padding-left: calc(100vw * (192 / 1560));
    }

    /* Form */
    .form>li {
        margin-bottom: calc(100vw * (48 / 1560));
        gap: calc(100vw * (40 / 1560));
    }

    .form>li input {
        height: calc(100vw * (60 / 1560));
        padding: 0 calc(100vw * (20 / 1560));
        font-size: calc(100vw * (19 / 1560));
    }

    .form>li .col {
        width: calc(100vw * (400 / 1560));
    }

    .form>li label {
        font-size: calc(100vw * (19 / 1560));
        padding-bottom: calc(100vw * (16 / 1560));
    }

    .form>li label.required::after {
        margin-left: calc(100vw * (2 / 1560));
        font-size: calc(100vw * (19 / 1560));
    }

    .form>li textarea {
        width: calc(100% - calc(100vw * (40 / 1560)));
        height: calc(100vw * (200 / 1560));
        padding: calc(100vw * (30 / 1560)) calc(100vw * (20 / 1560));
        font-size: calc(100vw * (19 / 1560));
    }

    .form .select-box {
        width: calc(100vw * (400 / 1560));
        height: calc(100vw * (60 / 1560));
        padding: 0 calc(100vw * (20 / 1560));
    }

    .form .select-box .txt {
        font-size: calc(100vw * (19 / 1560));
    }

    .form .select-box .txt a::after {
        width: calc(100vw * (14 / 1560));
        height: calc(100vw * (9 / 1560));
    }

    .form .select-inner {
        top: calc(100vw * (66 / 1560));
        max-height: calc(100vw * (194 / 1560));
        padding: calc(100vw * (24 / 1560)) calc(100vw * (16 / 1560));
    }

    .form .select-inner .select-list li {
        font-size: calc(100vw * (16 / 1560));
        margin-bottom: calc(100vw * (10 / 1560));
    }

    .form .privacy {
        margin-bottom: calc(100vw * (80 / 1560));
    }

    .form .privacy .ck-input .txt {
        margin-top: calc(100vw * (16 / 1560));
        font-size: calc(100vw * (16 / 1560));
        padding-left: calc(100vw * (30 / 1560))
    }

    .form .privacy .ck-input input {
        height: calc(100vw * (20 / 1560));
    }

    .form .privacy .ck-input span {
        font-size: calc(100vw * (19 / 1560));
    }

    .form .privacy .ck-input span::before {
        width: calc(100vw * (20 / 1560));
        height: calc(100vw * (20 / 1560));
        margin-right: calc(100vw * (10 / 1560));
    }

    .form .privacy .table {
        margin-top: calc(100vw * (30 / 1560));
    }

    .form .privacy .table li span {
        padding: calc(100vw * (15 / 1560)) 0;
        font-size: calc(100vw * (16 / 1560));
    }

    .form .privacy .table li div {
        padding: calc(100vw * (27 / 1560)) 0;
        font-size: calc(100vw * (16 / 1560));
    }

    .form .privacy .table li div p:first-child {
        margin-bottom: calc(100vw * (4 / 1560));
    }

    .select {
        font-size: calc(100vw*(19 / 1560));
    }
    .select2 button {
        font-size: calc(100vw*(19 / 1560));
    }


    

    
}

@media (max-width: 1180px) {
    .contact {
        margin-top: calc(100vw * (120 / 1180));
        padding: calc(100vw * (124 / 1180)) 0 calc(100vw * (180 / 1180));
    }

    .contact::after {
        display: none;
    }

    .contact .container>.flex {
        display: block;
    }

    .contact-title {
        width: 100%;
        margin-bottom: calc(100vw * (60 / 1180));
    }

    .contact-title h2 {
        font-size: calc(100vw * (68 / 1180));
        margin: calc(100vw * (32 / 1180)) 0;
    }

    .contact-title p {
        max-width: 100%;
        font-size: calc(100vw * (22 / 1180));
        padding-left: calc(100vw * (8 / 1180));
    }

    .contact-title>.flex span {
        margin: 0 calc(100vw * (6 / 1180));
    }

    .contact .form-wrap {
        width: 100%;
        padding-left: 0;
    }

    /* Form */
    .form>li {
        margin-bottom: calc(100vw * (48 / 1180));
        gap: calc(100vw * (40 / 1180));
    }

    .form>li input {
        height: calc(100vw * (60 / 1180));
        padding: 0 calc(100vw * (20 / 1180));
        font-size: calc(100vw * (20 / 1180));
    }

    .form>li .col {
        width: calc(50% - calc(100vw * (20 / 1180)));
    }

    .form>li label {
        font-size: calc(100vw * (20 / 1180));
        padding-bottom: calc(100vw * (16 / 1180));
    }

    .form>li label.required::after {
        position: relative;
        top: calc(100vw * (-7 / 1180));
        margin-left: calc(100vw * (2 / 1180));
        font-size: calc(100vw * (20 / 1180));
    }

    .form>li textarea {
        width: calc(100% - calc(100vw * (40 / 1180)));
        height: calc(100vw * (200 / 1180));
        padding: calc(100vw * (23 / 1180)) calc(100vw * (20 / 1180));
        font-size: calc(100vw * (20 / 1180));
    }

    .form .select-box {
        width: 100%;
        flex-basis: calc(100% / 2 - 20px);
        height: calc(100vw * (60 / 1180));
        padding: 0 calc(100vw * (20 / 1180));
    }

    .form .select-box .txt {
        font-size: calc(100vw * (20 / 1180));
    }

    .form .select-box .txt a::after {
        width: calc(100vw * (14 / 1180));
        height: calc(100vw * (9 / 1180));
    }

    .form .select-inner {
        top: calc(100vw * (66 / 1180));
        max-height: calc(100vw * (194 / 1180));
        padding: calc(100vw * (24 / 1180)) calc(100vw * (16 / 1180));
    }

    .form .select-inner .select-list li {
        font-size: calc(100vw * (16 / 1180));
        margin-bottom: calc(100vw * (10 / 1180));
    }

    .select {
        height: calc(100vw * (60 / 1180));
        padding: 0 calc(100vw * (20 / 1180));
        font-size: calc(100vw*(20 / 1180));
    }

    .select2 button{
        height: calc(100vw * (60 / 1180));
        padding: 0 calc(100vw * (20 / 1180));
        font-size: calc(100vw*(20 / 1180));
    }

    .select2 ul {
        top: calc(100vw * (65 / 1180));
        padding:calc(100vw * (15 / 1180));
        max-height: calc(100vw * (240 / 1180));
    }
    
    .select2 ul li {
        padding: calc(100vw * (8 / 1180));
        font-size: calc(100vw*(20 / 1180));
    }

    .form .check .check_list {
        padding: calc(100vw * (30 / 1180));
    }

    .form>li .col-full .flex {
        gap: calc(100vw * (40 / 1180));
    }

    .form .privacy {
        margin-bottom: calc(100vw * (80 / 1180));
        margin-right: 0;
    }

    .form .privacy .ck-input .txt {
        margin-top: calc(100vw * (16 / 1180));
        font-size: calc(100vw * (17 / 1180));
        padding-left: calc(100vw * (30 / 1180))
    }

    .form .privacy .ck-input input {
        height: calc(100vw * (20 / 1180));
    }

    .form .privacy .ck-input span {
        font-size: calc(100vw * (20 / 1180));
    }

    .form .privacy .ck-input span::before {
        width: calc(100vw * (20 / 1180));
        height: calc(100vw * (20 / 1180));
        margin-right: calc(100vw * (10 / 1180));
    }

    .form .privacy .table {
        margin-top: calc(100vw * (30 / 1180));
    }

    .form .privacy .table li span {
        padding: calc(100vw * (14 / 1180));
        font-size: calc(100vw * (17 / 1180));
    }

    .form .privacy .table li div {
        padding: calc(100vw * (24 / 1180)) 0;
        font-size: calc(100vw * (17 / 1180));
    }

    .form .privacy .table li div p:first-child {
        margin-bottom: calc(100vw * (8 / 1180));
    }

    .modals_pop .modals_box{
        padding: calc(100vw*(20 / 1180));
    }
    
    .modals_pop .modals_box .modals_con{
        padding: calc(100vw*(30 / 1180));
        max-width:calc(100vw*(750 / 1180));
        min-height: calc(100vw*(450 / 1180));
    }
    
    .modals_pop .modals_box .btn_close{
        top: calc(100vw*(15 / 1180));
        right: calc(100vw*(15 / 1180));
        width: calc(100vw*(30 / 1180));
        height: calc(100vw*(30 / 1180));
    }
    
    .modals_pop .modals_box .btn_close::before,
    .modals_pop .modals_box .btn_close::after{
        width: calc(100vw*(25 / 1180));
        height: calc(100vw*(2 / 1180));
    }
    
    
    .modals_pop .modals_box .contact_con h2{
        margin-bottom: calc(100vw*(30 / 1180));
        font-size: calc(100vw*(50 / 1180));
    }
    
    .modals_pop .modals_box .contact_con p{
        margin-bottom: calc(100vw*(50 / 1180));
        font-size: calc(100vw*(30 / 1180));
    }

}

@media (max-width: 767px) {
    .contact {
        margin-top: calc(100vw * (160 / 767));
        padding: calc(100vw * (136 / 767)) 0 calc(100vw * (180 / 767));
    }

    .contact-title {
        margin-bottom: calc(100vw * (100 / 767));
    }

    .contact-title h2 {
        font-size: calc(100vw * (80 / 767));
        margin: calc(100vw * (38 / 767)) 0 calc(100vw * (40 / 767));
    }

    .contact-title p {
        font-size: calc(100vw * (32 / 767));
        padding-left: calc(100vw * (8 / 767));
    }

    .contact-title>.flex span {
        margin: 0 calc(100vw * (10 / 767));
    }

    /* Form */
    .contact .form-wrap .flex {
        display: block;
    }

    .form>li {
        display: block;
        margin-bottom: calc(100vw * (72 / 767));
        margin-right: 0;
        gap: 0;
    }

    .form>li input {
        height: calc(100vw * (120 / 767));
        padding: 0 calc(100vw * (40 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .form>li .col {
        width: 100%;
        margin-right: 0;
        margin-bottom: calc(100vw * (72 / 767));
    }

    .form>li .col:last-child {
        margin-bottom: 0;
    }

    .form>li label {
        font-size: calc(100vw * (32 / 767));
        padding-bottom: calc(100vw * (24 / 767));
    }

    .form>li label.required::after {
        position: relative;
        top: calc(100vw * (-7 / 767));
        margin-left: calc(100vw * (4 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .form>li textarea {
        width: calc(100% - calc(100vw * (80 / 767)));
        height: calc(100vw * (400 / 767));
        padding: calc(100vw * (40 / 767));
        font-size: calc(100vw * (32 / 767));
    }

    .form .select-box {
        margin-right: 0;
        width: 100%;
        height: calc(100vw * (120 / 767));
        padding: 0 calc(100vw * (40 / 767));
    }

    .form .select-box:first-child {
        margin-bottom: calc(100vw * (24 / 767));
    }

    .form .select-box .txt {
        font-size: calc(100vw * (32 / 767));
    }

    .form .select-box .txt a::after {
        width: calc(100vw * (28 / 767));
        height: calc(100vw * (18 / 767));
    }

    .form .select-inner {
        top: calc(100vw * (132 / 767));
        max-height: calc(100vw * (388 / 767));
        padding: calc(100vw * (48 / 767)) calc(100vw * (32 / 767));
    }

    .form .select-inner .select-list li {
        font-size: calc(100vw * (32 / 767));
        margin-bottom: calc(100vw * (20 / 767));
    }

    .form .privacy.check {
        margin-bottom: calc(100vw * (50 / 767));
        ;
    }

    .form .check .check_list {
        padding: calc(100vw * (30 / 767));
    }

    .form .check .check_list .ck-input {
        margin: calc(100vw * (10 / 767)) 0;
        width: 33.33%;
    }

    .select {
        height: calc(100vw * (120 / 767));
        padding: 0 calc(100vw * (40 / 767));
        font-size: calc(100vw*(32 / 767));
    }

    .select2 button{
        height: calc(100vw * (120 / 767));
        padding: 0 calc(100vw * (40 / 767));
        font-size: calc(100vw*(32 / 767));
    }

    .select2 ul {
        top: calc(100vw * (130 / 767));
        padding:calc(100vw * (30 / 767));
        max-height: calc(100vw * (400 / 767));
    }
    
    .select2 ul li {
        padding: calc(100vw * (15 / 767)) calc(100vw * (10 / 767));
        font-size: calc(100vw*(30 / 767));
    }

    .form .privacy {
        margin-bottom: calc(100vw * (120 / 767));
    }

    .form .privacy .ck-input .txt {
        margin-top: calc(100vw * (20 / 767));
        font-size: calc(100vw * (28 / 767));
        padding-left: calc(100vw * (60 / 767));
        line-height: 1.4;
    }

    .form .privacy .ck-input input {
        height: calc(100vw * (32 / 767));
    }

    .form .privacy .ck-input span {
        font-size: calc(100vw * (32 / 767));
    }

    .form .privacy .ck-input span::before {
        width: calc(100vw * (40 / 767));
        height: calc(100vw * (40 / 767));
        margin-right: calc(100vw * (10 / 767));
    }

    .form .privacy .table {
        margin-top: calc(100vw * (36 / 767));
        display: block;
        border: 0;
    }

    .form .privacy .table li {
        width: 100%;
        padding: calc(100vw * (40 / 767));
        margin-bottom: calc(100vw * (24 / 767));
        border: 1px solid #D9D9D9;
    }

    .form .privacy .table li:last-child {
        margin-bottom: 0;
    }

    .form .privacy .table li span {
        padding: 0 0 calc(100vw * (22 / 767));
        font-size: calc(100vw * (28 / 767));
        border-right: 0;
        text-align: left;
    }

    .form .privacy .table li div {
        padding: 22px 0 0;
        font-size: calc(100vw * (28 / 767));
        border-right: 0;
        text-align: left;
    }

    .form .privacy .table li div p:first-child {
        margin-bottom: calc(100vw * (8 / 767));
    }


    .modals_pop .modals_box{
        padding: calc(100vw*(20 / 767));
    }
    
    .modals_pop .modals_box .modals_con{
        padding: calc(100vw*(30 / 767));
        max-width:calc(100vw*(750 / 767));
        min-height: calc(100vw*(500 / 767));
    }
    
    .modals_pop .modals_box .btn_close{
        top: calc(100vw*(30 / 767));
        right: calc(100vw*(30 / 767));
        width: calc(100vw*(50 / 767));
        height: calc(100vw*(50 / 767));
    }
    
    .modals_pop .modals_box .btn_close::before,
    .modals_pop .modals_box .btn_close::after{
        width: calc(100vw*(40 / 767));
        height: calc(100vw*(3 / 767));
    }
    
    
    .modals_pop .modals_box .contact_con h2{
        margin-bottom: calc(100vw*(30 / 767));
        font-size: calc(100vw*(50 / 767));
    }
    
    .modals_pop .modals_box .contact_con p{
        margin-bottom: calc(100vw*(50 / 767));
        font-size: calc(100vw*(30 / 767));
    }

}

/* 팝업 */
.pop-wrap {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4);
}

.open_pop {
    cursor: pointer;
}

.pop {
    display: none;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 643px;
    margin: 0 auto;
    padding: 74px 77px;
    background: #fff;
    z-index: 1;
}

.pop .close {
    position: absolute;
    top: 26px;
    right: 26px;
    width: 24px;
    height: 24px;
    background: url(../images/contact/ic_x.svg)no-repeat;
    background-size: contain;
    cursor: pointer;
}

.pop .pop-content {
    text-align: center;
}

.pop .pop-content h2 {
    margin-bottom: 16px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    letter-spacing: -0.05em;
}

.pop .pop-content p {
    font-size: 17px;
    line-height: 1.76;
    text-align: center;
    letter-spacing: -0.05em;
    word-break: break-all;
}

.pop .pop-btn {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 40px;
}

.pop .pop-btn .btnBc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 50px;
    line-height: 50px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    font-size: 17px;
}

.pop .pop-btn .btnBc:nth-child(2) {
    margin-left: 12px;
}

.pop .pop-btn .btnBc.color {
    margin: 0
}

.pop .pop-btn .btnBc:hover {
    color: #fff
}

@media (max-width: 1180px) {
    .pop {
        width: calc(100vw * (643 / 1180));
        padding: calc(100vw * (74 / 1180)) calc(100vw * (77 / 1180));
    }

    .pop .close {
        top: calc(100vw * (26 / 1180));
        right: calc(100vw * (26 / 1180));
        width: calc(100vw * (24 / 1180));
        height: calc(100vw * (24 / 1180));
    }

    .pop .pop-content h2 {
        margin-bottom: calc(100vw * (16 / 1180));
        font-size: calc(100vw * (32 / 1180));
    }

    .pop .pop-content p {
        font-size: calc(100vw * (17 / 1180));
    }

    .pop .pop-btn {
        margin-top: calc(100vw * (40 / 1180));
    }

    .pop .pop-btn .btnBc {
        width: calc(100vw * (200 / 1180));
        height: calc(100vw * (50 / 1180));
        line-height: calc(100vw * (50 / 1180));
        font-size: calc(100vw * (16 / 1180));
    }

    .pop .pop-btn .btnBc:nth-child(2) {
        margin-left: calc(100vw * (12 / 1180));
    }
}

/* 유효성 체크*/
.form>li input.validity,
.form>li textarea.validity {
    border-color: #F60F00;
}

.form>li label.validity,
.form>li label.required.validity::after {
    color: #F60F00;
}

.form .select-box.validity {
    border-color: #F60F00;
}

.form>li p.validity {
    margin-top: 1.6rem;
    color: #F60F00;
    font-size: 1.6rem;
}

.form>li input::placeholder,
.form>li textarea::placeholder {
    color: #B6B6B6 !important;
}

@media (max-width: 1560px) {
    .form>li p.validity {
        margin-top: calc(100vw * (16 / 1560));
        font-size: calc(100vw * (19 / 1560));
    }
}

@media (max-width: 1180px) {
    .form>li p.validity {
        margin-top: calc(100vw * (16 / 1180));
        font-size: calc(100vw * (19 / 1180));
    }
}

@media (max-width: 767px) {
    .form>li p.validity {
        margin-top: calc(100vw * (32 / 767));
        font-size: calc(100vw * (32 / 767));
    }
}

/* 다국어 */
:lang(en) .form .privacy .table li span {
    height: 73px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

:lang(en) .form .privacy .table li div {
    height: 120px;
}

@media (max-width: 1180px) {
    :lang(en) .form .privacy .table li span {
        height: calc(100vw * (73 / 1180));
    }

    :lang(en) .form .privacy .table li div {
        height: calc(100vw * (120 / 1180));
    }
}

@media (max-width: 767px) {
    :lang(en) .form .privacy .table li span {
        display: block;
        height: auto;
    }

    :lang(en) .form .privacy .table li div {
        height: auto;
    }

    :lang(en) .form .privacy .ck-input span::before {
        position: absolute;
        left: 0;
    }

    :lang(en) .form .privacy .ck-input span {
        padding-left: calc(100vw * (50 / 767));
    }
}


/* 2024/11/21 추가 */
.btnBc.color1 {
    border-image: linear-gradient(to right, #09DD8D 0%, #0097F6 100%);
    border-image-slice: 1;
    overflow: hidden;
    justify-content: center;
    background: var(--gr, linear-gradient(305deg, #0097F6 0%, #09DD8D 100%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    font-size: 18px;
}
.btnBc.color1:hover {
    background: linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
    -webkit-text-fill-color: #fff;
}
.lay_pop{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .75);
    z-index: 500;
}
.lay_pop .pop_box{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding:90px 20px;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.lay_pop .pop_box .pop_con{
    position: relative;
    padding: 60px;
    margin: 0 auto;
    max-width: 730px;
    background-color: #fff;
    border-radius: 15px;
}
.lay_pop .pop_box .pop_con h2{
    margin-bottom: 50px;
    font-size: 30px;
    text-align: center;
    font-weight: bold;
}
.lay_pop .pop_box .pop_con .btn_close{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    text-indent: -999px;
    overflow: hidden;
    background: none;
}
.lay_pop .pop_box .pop_con .btn_close::before{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25px;
    height: 1px;
    content: '';
    background-color: #999;
    transform: translate(-50%, -50%) rotate(45deg);
}
.lay_pop .pop_box .pop_con .btn_close::after{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25px;
    height: 1px;
    content: '';
    background-color: #999;
    transform: translate(-50%, -50%) rotate(-45deg);
}
.btnBc.down {
    justify-content: center;
    font-weight: 600;
    margin: 0 auto;
    font-size: 18px;
    background:url('../images/contact/ico_down_off.svg') no-repeat right 60px center, linear-gradient(305deg, #0097F6 0%, #09DD8D 100%);
    -webkit-text-fill-color: #fff;
    cursor: pointer;
    border: 0;
    text-indent:-20px
}


.form .privacy .ck-input .txt{
    color: #888;
}

.lay_pop .form .privacy{
    margin-bottom: 60px;
}

.select2.active button{
    border: 1px solid #0097F6;
}

@media (min-width: 1180px) and (max-width: 1560px) {

    .btnBc{
        height: calc(100vw*(60 / 1560));
    }

    .btnBc.color,
    .btnBc.color1,
    .btnBc.color2,
    .btnBc.color3,
    .btnBc.down{
        font-size: calc(100vw*(18 / 1560));
    }
    .btnBc.down{
        text-indent: calc(100vw*(-20 / 1560));
        background-position: right calc(100vw*(60 / 1560)) center, left center;
        background-size: calc(100vw*(16 / 1560)), calc(100vw*(260 / 1560));
    }
}

@media (min-width: 1181px) {

    .btn_contact{display: flex;flex-direction: column;justify-content: flex-start;gap: 15px;margin-top: 50px;}
    .btn_contact .btnBc.color{margin: 0;}
    
    

}

@media (max-width: 1180px) {

    .btnBc.color1,
    .btnBc.color3,
    .btnBc.down{
        font-size: calc(100vw*(18 / 1180))
    }

    .btnBc.down{
        text-indent: calc(100vw*(-20 / 1180));
        background-position: right calc(100vw*(60 / 1180)) center, left center;
        background-size: calc(100vw*(16 / 1180)), calc(100vw*(350 / 1180));
    }

    .btn_contact{
        display: flex;
        gap: calc(100vw*(40 / 1180));
        margin-top: calc(100vw*(30 / 1180));
    }
    .btn_contact .btnBc{
        flex: 1;
    }

    .lay_pop .pop_box{
        padding: calc(100vw*(90 / 1180)) calc(100vw*(20 / 1180));
    }
    .lay_pop .pop_box .pop_con{
        padding: calc(100vw*(60 / 1180));
        max-width: calc(100vw*(730 / 1180));
        border-radius: calc(100vw*(15 / 1180));
    }
    .lay_pop .pop_box .pop_con h2{
        margin-bottom: calc(100vw*(50 / 1180));
        font-size: calc(100vw*(30 / 1180));
    }

    .lay_pop .form .privacy{
        margin-bottom: calc(100vw*(80 / 1180));
    }

    .lay_pop .pop_box .pop_con .btn_close{
        top: calc(100vw*(20 / 1180));
        right: calc(100vw*(20 / 1180));
        width: calc(100vw*(30 / 1180));
        height: calc(100vw*(30 / 1180));
    }
    
    .lay_pop .pop_box .pop_con .btn_close::before,
    .lay_pop .pop_box .pop_con .btn_close::after{
        width: calc(100vw*(25 / 1180));
        height: calc(100vw*(1 / 1180));
    }

}

@media (max-width: 767px) {



    .btnBc.color1,
    .btnBc.color2,
    .btnBc.down {
        height: calc(100vw*(100 / 747));
        font-size: calc(100vw*(30 / 747));
    }

    .btnBc.down{
        width: calc(100vw*(330 / 767)); 
        text-indent: calc(100vw*(-20 / 767));
        background-position: right calc(100vw*(50 / 767)) center, left center;
        background-size: calc(100vw*(22 / 767)), calc(100vw*(330 / 767));
    }

    .btn_contact{
        gap: calc(100vw*(16 / 747));
        margin-top: calc(100vw*(60 / 747));
    }

    .btn_contact .btnBc.color2{
        font-size: calc(100vw*(28 / 747));
    }

    .btn_contact .btnBc.color2 i{
        display: none;
    }

    .lay_pop .pop_box{
        padding: calc(100vw*(90 / 747)) calc(100vw*(50 / 747));
    }
    .lay_pop .pop_box .pop_con{
        padding: calc(100vw*(90 / 747)) calc(100vw*(60 / 747));
        max-width: 100%;
        border-radius: calc(100vw*(15 / 747));
    }
    .lay_pop .pop_box .pop_con h2{
        margin-bottom: calc(100vw*(65 / 747));
        font-size: calc(100vw*(42 / 747));
    }

    .lay_pop .form .privacy{
        margin-bottom: calc(100vw*(80 / 747));
    }

    .lay_pop .pop_box .pop_con .btn_close{
        top: calc(100vw*(28 / 747));
        right: calc(100vw*(28 / 747));
        width: calc(100vw*(40 / 747));
        height: calc(100vw*(40 / 747));
    }
    
    .lay_pop .pop_box .pop_con .btn_close::before,
    .lay_pop .pop_box .pop_con .btn_close::after{
        width: calc(100vw*(30 / 747));
        height: calc(100vw*(1 / 747));
    }

}