@charset "utf-8";

@font-face {
    font-family: "SUIT";
    src: url(../assets/font/SUIT-ExtraBold.otf) format("opentype");
    font-weight: 800;
}

/* Font */
:root {
    --font-2xlarge: 48px;
    --font-maintitle: 40px;
    /* Neutral */
    --color-netural-400: #eeeeee;
    --color-netural-600: #cccccc;
    /* //Neutral */
}
/* //Font */

/* *****************************************************
// 회사소개
// ******************************************************/

/*----------------------Start: section1-비주얼영역---------------------------------------------------- */
.visual-area {
    position: relative;
    height: 600px;
    max-height: 100vh;
    min-height: 480px;
    z-index: 10;
    padding-top: 0;
    overflow: hidden;
    background: 50% 100% / cover no-repeat rgb(0, 0, 0);
    -webkit-transition:
        height 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        padding-top 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition:
        height 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        padding-top 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition:
        height 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        padding-top 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transition:
        height 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        padding-top 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: height, padding-top;
}
.visual-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    transform: scale(1);
    transform-origin: 50% 100%;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    z-index: 0;
    pointer-events: none;
}
.visual-area.scr_on::before {
    transform: scale(0.8);
}
.visual-area .contents-area,
.visual-area .point-visual {
    position: relative;
    z-index: 1;
}
.visual-area.scr_on {
    height: 400px;
    padding-top: 100px;
    min-height: unset;
}
.visual-area.s1 {
    background-image: url(../assets/images/sub1-banner1.png);
}
.point-visual {
    position: absolute;
    top: 100px;
}
.visual-area .contents-area {
    width: 100%;
    max-width: var(--layout-type1);
    height: 100%;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    -webkit-transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    -moz-transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.breadcrumbs-value {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.value-tit {
    font-size: var(--font-large);
    font-weight: 700;
    line-height: 100%;
    letter-spacing: 0.24px;
}
.value-desc {
    padding-top: 30px;
    line-height: 120%;
    color: var(--color-netural-400);
    letter-spacing: -0.48px;
    font-size: var(--font-2xlarge);
    font-weight: 400;
}
.breadcrumbs {
    display: flex;
    height: fit-content;
}
.breadcrumb {
    position: relative;
    padding-right: 40px;
    cursor: pointer;
}
.breadcrumb-tit {
    color: var(--color-netural-600);
}
.breadcrumb::after {
    position: absolute;
    content: "";
    top: -3px;
    right: 3px;
    background-image: url(../assets/icons/breadcrumb-next.svg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 24px;
    height: 24px;
}
.breadcrumb:last-of-type::after {
    content: none;
}
/*----------------------//End: section1-비주얼영역---------------------------------------------------- */

/*----------------------Start: section2---------------------------------------------------- */
.maintit {
    line-height: 130%;
}
.intro-descriptionarea {
    display: flex;
    column-gap: 320px;
    position: relative;
}
.maindesc {
    line-height: 160%;
    font-size: var(--font-medium);
    color: var(--color-netural-700);
    padding-top: 40px;
}
.com-tit {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-netural-800);
    line-height: 240%;
}
.com-desc {
    font-size: 18px;
    font-weight: 300;
    color: var(--color-netural-700);
    line-height: 240%;
}
.topline {
    border-top: 2px solid var(--color-black);
}
.bottomline {
    border-bottom: 1px solid #d7d7d7;
}
.intro-company {
    margin-top: 210px;
}
.intro-company .grid-container {
    padding: 30px 27px;
    max-width: 100%;
}

.intro-imgarea {
    position: relative;
}
.intro-img {
    width: 500px;
    height: 580px;
    background-image: url(../assets/images/sub1-img1.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 100px;
}
/*----------------------//End: section2----------------------------------------------------*/

/*----------------------Start: section3---------------------------------------------------- */
.section3 .contents-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.section3-description {
    padding-top: 48px;
}
.section3-img {
    width: 980px;
    aspect-ratio: 1/1;
    background-image: url(../assets/images/sub1-img2.svg);
    background-repeat: no-repeat;
    margin-top: 110px;
}
/*----------------------//End: section3----------------------------------------------------*/

/*----------------------Start: section4---------------------------------------------------- */
.section4 {
    padding-bottom: unset;
}
.section4 .contents-area {
    padding-top: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.history-area {
    position: relative;
    margin-top: 115px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 45px;
    width: 100%;
    max-width: 1020px;
}
.progress-line {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    bottom: 0;
    z-index: -1;
}
.history-line {
    position: absolute;
    width: 1px;
    top: 14px;
    bottom: 14px;
    left: 200px;
    transform: translateX(-50%);
    background: var(--color-netural-500);
}
.history-line .progress {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: translateX(-50%);
    background: var(--color-sky);
}
.history-description {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 60px;
    width: 100%;
}
.year-tit {
    font-size: 40px;
    font-weight: 600;
    color: var(--color-netural-800);
    width: 200px;
    flex: 0 0 200px;
}
.history-contents {
    width: calc(100% - 200px);
    flex: 1 1 auto;
    min-width: 0;
}
.daytit-historydesc {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.daytit {
    display: inline-block;
    width: 132px;
    flex: 0 0 132px;
    position: relative;
    font-size: 22px;
    line-height: 170%;
    font-weight: 600;
    color: var(--color-netural-800);
}
.daytit::before {
    display: inline-block;
    content: "";
    margin-right: 30px;
    margin-bottom: 2px;
    width: 10px;
    height: 10px;
    border-color: var(--color-netural-500);
    background-color: var(--color-netural-500);
    border-radius: 8px;
    transform: translateX(-50%);
}
.daytit.on::before {
    border-color: var(--color-sky);
    background-color: var(--color-sky);
}

.historydesc {
    width: calc(100% - 132px);
    margin-bottom: 24px;
}
.historydesc span {
    font-size: 20px;
    line-height: 180%;
    font-weight: 300;
    color: var(--color-netural-700);
    display: block;
    position: relative;
    padding-left: 16px;
}

.historydesc span::before {
    position: absolute;
    content: "";
    color: var(--color-netural-700);
    border-radius: 100%;
    border: 1px solid;
    border-color: var(--color-netural-700);
    width: 2px;
    height: 2px;
    top: 15px;
    left: 0;
    background-color: var(--color-netural-700);
}
/*----------------------//End: section4----------------------------------------------------*/
/* 푸터 라인 추가 */
.footer {
    border-top: 1px solid;
    border-color: var(--color-netural-500);
}

@media screen and (max-width: 1280px) {
    section + section {
        padding-top: 52px;
    }
    .visual-area {
        height: 400px;
        max-height: unset;
        min-height: unset;
        -webkit-transition:
            height 0.8s cubic-bezier(0.4, 0, 0.2, 1),
            padding-top 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        -moz-transition:
            height 0.8s cubic-bezier(0.4, 0, 0.2, 1),
            padding-top 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        -o-transition:
            height 0.8s cubic-bezier(0.4, 0, 0.2, 1),
            padding-top 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        transition:
            height 0.8s cubic-bezier(0.4, 0, 0.2, 1),
            padding-top 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .visual-area.scr_on {
        height: 200px;
        min-height: auto;
        padding-bottom: 58px;
        padding-top: 250px;
    }
    .visual-area.scr_on::before {
        transform: none;
    }
    .visual-area .contents-area {
        padding-bottom: 58px;
    }
    .breadcrumbs-value {
        padding-left: 5%;
    }
    .breadcrumbs {
        display: none;
    }
    .value-tit {
        font-size: var(--font-primary);
        letter-spacing: 0.16px;
    }
    .value-desc {
        font-size: var(--font-large);
        letter-spacing: -0.24px;
        line-height: 130%;
        padding-top: 16px;
    }
    /* .maintit.h2 {
        font-size: 22px;
    } */
    .maindesc {
        font-size: var(--font-small);
    }
    .intro-descriptionarea {
        flex-direction: column;
        position: relative;
    }
    .intro-description {
        display: contents;
    }
    .intro-img {
        width: 254.3px;
        height: 295px;
        width: 254.3px;
        height: 295px;
        margin-top: 0;
        align-self: flex-end;
        order: 2;
        margin-top: 52px;
    }
    .intro-company {
        margin-top: 52px;
        order: 3;
    }
    .intro-company .grid-container {
        grid-template-columns: 1fr;
        column-gap: unset;
    }
    .com-tit {
        font-size: var(--font-xsmall);
    }
    .com-desc {
        font-size: var(--font-small);
        padding-bottom: 24px;
        line-height: 140%;
    }

    .section3-description {
        padding-top: 0;
        text-align: center;
    }
    .section3-img {
        background-image: url(../assets/images/sub1-mdimg2.svg);
        width: 330px;
        margin-top: 52px;
    }
    .section4 {
        padding-bottom: 80px;
    }
    .section4 .contents-area {
        padding-top: 0;
    }
    .history-area {
        margin-top: 52px;
        max-width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    .history-description {
        flex-direction: column;
        margin-bottom: 70px;
    }
    .year-tit {
        width: 110px;
        text-align: end;
        flex: unset;
        font-size: 32px;
    }
    .history-contents {
        width: 100%;
        flex: unset;
        margin-top: 40px;
    }
    .history-line {
        position: absolute;
        width: 1px;
        top: 85px;
        bottom: 85px;
        left: 0;
        transform: unset;
    }

    .daytit {
        width: 80px;
        flex: 0 0 80px;
        font-size: 16px;
    }
    .daytit::before {
        margin-right: 20px;
    }
    .historydesc {
        width: calc(100% - 80px);
    }
    .historydesc span {
        font-size: var(--font-small);
    }
    .historydesc span::before {
        top: 11px;
    }
}
/* *****************************************************
// 솔루션-컴플리사이트
// ******************************************************/
.wrap.sol section + section {
    padding-top: 160px;
}
/*----------------------Start: section1---------------------------------------------------- */
.visual-area.s2 {
    background-image: url(../assets/images/sub2-banner1.png);
    background-repeat: no-repeat;
}
/*----------------------//End: section1----------------------------------------------------*/

/*----------------------Start: section2---------------------------------------------------- */
.wrap.sol .section2 .contents-area {
    padding: 0;
}
.site-name {
    font-size: 56px;
    font-family: "SUIT";
    font-weight: 800;
    letter-spacing: 0.56px;
    line-height: 100%;
}
.site-name span {
    font-family: "SUIT";
    font-weight: 800;
    letter-spacing: -1px;
}
.site-desc {
    font-size: 30px;
    font-weight: 400;
    line-height: 130%;
    padding-top: 40px;
}
.buttons.smallgap {
    column-gap: 10px;
    margin-top: 80px;
}
.solution-img {
    width: 100%;
    min-width: 795px;
    height: 530px;
    box-shadow: 8px 8px 48px rgba(0, 0, 0, 0.16);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px;
}
.solution-img.comply {
    background-image: url(../assets/images/sub2-img1.png);
}

.bg-banner {
    margin-top: 160px;
    width: 100%;
    height: 460px;
    border: 1px solid;
    border-color: transparent;
    display: inline-block;
    align-content: center;
    text-align: center;
}
.banner-tit {
    font-size: var(--font-maintitle);
    font-weight: 600;
    line-height: 1.3;
}
.banner-desc {
    font-size: var(--font-medium);
    font-weight: 400;
    line-height: 1.6;
    padding-top: 30px;
}
.blue-gradient {
    background: linear-gradient(90deg, #5c9ee2 0%, #005cb9 100%);
}
/*----------------------//End: section2----------------------------------------------------*/

/*----------------------Start: section3---------------------------------------------------- */
.slogan-text {
    font-size: var(--font-maintitle);
    font-weight: 400;
    line-height: 120%;
    color: var(--color-black);
    z-index: unset;
    width: 100%;
}
.service-types {
    margin-top: 80px;
    grid-template-columns: repeat(4, 1fr);
}
.service-type {
    border-right: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 60px;
}
.service-type:last-of-type {
    border-right: none;
}
.small-circle {
    width: 160px;
    height: 160px;
    background-color: #f2f6f9;
    border-radius: 100%;
    display: inline-block;
    align-content: center;
    text-align: center;
}
.small-circle img {
    width: fit-content;
    height: fit-content;
}
.service-desc {
    font-size: var(--font-medium);
    font-weight: 400;
    line-height: 130%;
    text-align: center;
}
/*----------------------//End: section3----------------------------------------------------*/

/*----------------------Start: section4---------------------------------------------------- */
.wrap.sol .section4 {
    min-height: unset;
}
.h2 {
    line-height: 130%;
}
.big-circle {
    width: 878px;
    height: 878px;
    aspect-ratio: 1/1;
    display: block;
    align-content: center;
    text-align: center;
    mix-blend-mode: darken;
}
.big-circle.bluebg {
    background: radial-gradient(50% 50% at 50% 50%, rgba(56, 255, 255, 0.08) 0%, rgba(244, 248, 249, 0.08) 100%);
}
.system-description {
    padding-top: 61px;
    display: flex;
    flex-direction: column;
    row-gap: 30px;
}
.system-desc {
    line-height: 160%;
    white-space: nowrap;
}

/*----------------------//End: section4----------------------------------------------------*/

/*----------------------Start: section5---------------------------------------------------- */
.title-boxarea {
    width: 100%;
    display: flex;
    column-gap: 114px;
}
.boxarea {
    width: 1110px;
}
.subtit {
    font-size: var(--font-maintitle);
    font-weight: 400;
    line-height: 130%;
}
.subtit.type1 {
    font-size: 32px;
    font-weight: 500;
}
.wrap.sol .maintit {
    font-size: var(--font-3xlarge);
    font-weight: 400;
    line-height: 130%;
}
.boxs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-height: 584px;
    gap: 24px;
}
.box {
    position: relative;
    background-color: #e7eef2;
    width: 543px;
    border-radius: 16px;
    padding: 54px 34px;
    transition: all 0.3s ease-in-out;
}
.box.bluebg {
    background-color: var(--color-blue);
}
.box:hover {
    z-index: 1;
}
.box.small {
    height: 240px;
}
.box.medium {
    height: 320px;
}
.box.large {
    height: 420px;
}
.box-tit {
    font-size: var(--font-large);
    font-weight: 700;
    line-height: 130%;
    color: var(--color-black);
}

.box-desc {
    font-size: var(--font-medium);
    font-weight: 400;
    line-height: 130%;
    color: var(--color-black);
    padding-top: 19px;
}
.box.bluebg .box-tit,
.box.bluebg .box-desc {
    color: var(--color-white);
}
.box.bottom-left {
    margin-top: -73px;
}
/*----------------------//End: section5----------------------------------------------------*/

/*----------------------Start: section6---------------------------------------------------- */
.section6 {
    padding-bottom: 0;
}

.contents-wrap {
    padding-top: 100px;
}
.contents-wrap .imgonly {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.contents-wrap.center {
    display: block;
    align-content: center;
    text-align: center;
}
/*----------------------//End: section6----------------------------------------------------*/

/*----------------------Start: section7---------------------------------------------------- */

.tabcontents {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    position: relative;
}
.tabcontent {
    flex: 0 0 8%;
    cursor: pointer;
    position: static;
    overflow: visible;
    transition:
        flex-basis 0.7s cubic-bezier(0.4, 0, 0.2, 1),
        flex-grow 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.tabcontent.is-open {
    flex: 1 1 0%;
    min-width: 0;
    transition:
        flex-basis 0.7s cubic-bezier(0.4, 0, 0.2, 1),
        flex-grow 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-descriptions {
    position: absolute;
    left: 0;
    width: 100%;
    margin-top: 0;
    z-index: 2;
}
.tabbox-bg {
    width: 100%;
    height: 220px;
    border-radius: 16px;
    display: block;
    padding: 34px;
    margin-top: 24px;
    position: relative;
    transition:
        width 0.7s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}
.tabbox-bg.full {
    position: relative;
    width: 100%;
    border-radius: 16px;
    transition:
        width 1s cubic-bezier(0.4, 0, 0.2, 1),
        transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.tabbox-bg.blue {
    background: linear-gradient(166deg, #e7eef2 0%, #94c7fb 100%);
}
.tabbox-bg.full.blue {
    background: linear-gradient(90deg, #5c9ee2 0%, #5c70e2 100%);
}
.tabbox-tit {
    font-size: 30px;
    font-weight: 700;
    line-height: 130%;
    color: var(--color-white);
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 34px;
    left: 34px;
    right: 34px;
    margin: 0;
    opacity: 0;
    transform: none;
    transition: opacity 0.2s ease 0s;
}
.tabbox-bg.full .tabbox-tit {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease 0.5s;
}
.tabbox-bg.full + .tab-descriptions {
    display: flex;
}
.tabbox-subtit {
    font-size: var(--font-large);
    font-weight: 700;
    line-height: 160%;
    color: var(--color-blue);
    position: relative;
}
.tabbox-subtit::before {
    display: inline-block;
    content: "";
    background-color: var(--color-blue);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-right: 10px;
    margin-bottom: 3px;
}
.tabbox-description {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-left: 30px;
}
.tabbox-desc {
    font-size: var(--font-large);
    font-weight: 400;
    line-height: 160%;
    color: var(--color-black);
    width: 100%;
    white-space: normal;
}
.tabbox-desc.sub {
    padding-left: 10px;
}
/*----------------------//End: section7----------------------------------------------------*/

/* *****************************************************
// 솔루션-미어캐치
// ******************************************************/
.solution-img.meercatch {
    background-image: url(../assets/images/sub3-img1.png);
}
.red-gradient {
    background: linear-gradient(90deg, #f86b81 0%, #9d1f32 100%);
}
.big-circle.redbg {
    background: radial-gradient(50% 50% at 50% 50%, rgba(248, 107, 129, 0.16) 0%, rgba(244, 248, 249, 0.16) 100%);
}
.tabbox-bg.red {
    background: linear-gradient(166deg, #e7eef2 0%, #ffb6c1 100%);
}
.tabbox-bg.full.red {
    background: linear-gradient(90deg, #f86b81 0%, #e86fb8 100%);
}
.tabbox-desc.dot {
    position: relative;
}
.tabbox-desc.dot::before {
    display: inline-block;
    content: "";
    background-color: var(--color-black);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-right: 10px;
    margin-bottom: 3px;
}
.circle-mini {
    width: 20px;
    height: 20px;
    outline: 1px solid;
    border-radius: 100%;
    outline-color: var(--color-netural-700);
    display: inline-block;
    align-content: center;
    text-align: center;
}
td.gradientbg .circle-mini {
    outline: 3px solid;
    outline-color: var(--color-red);
}
.slogan-text.small {
    font-size: 32px;
    line-height: 140%;
}
.service-desc.txt-bold {
    font-weight: 600;
}
/* *****************************************************
// 솔루션-랜섬스톱
// ******************************************************/
.solution-img.ransomstop {
    background-image: url(../assets/images/sub4-img1.png);
}
/* *****************************************************
// 솔루션-아이아티
// ******************************************************/
.solution-img.aiatti {
    background-image: url(../assets/images/sub5-img1.png);
}
.green-gradient {
    background: linear-gradient(90deg, #4ecac1 0%, #138d84 100%);
}
.big-circle.greenbg {
    background: radial-gradient(50% 50% at 50% 50%, rgba(78, 202, 193, 0.16) 0%, rgba(244, 248, 249, 0.16) 100%);
}
.tabbox-bg.green {
    background: linear-gradient(166deg, #fef5f7 0%, #83e6df 100%);
}
.tabbox-bg.full.green {
    background: linear-gradient(90deg, #4ecac1 0%, #67c97d 100%);
}
.service-type.noline {
    border-right: none;
    row-gap: 24px;
    align-items: flex-start;
}
.service-tit {
    font-size: 28px;
    color: var(--color-black);
    font-weight: 600;
    line-height: 160%;
}
.service-img {
    min-width: 340px;
    height: 240px;
    background-size: cover;
    background-repeat: no-repeat;
}
.service-img.type1 {
    background-image: url(../assets/images/sub5-img2.png);
}
.service-img.type2 {
    background-image: url(../assets/images/sub5-img3.png);
}
.service-img.type3 {
    background-image: url(../assets/images/sub5-img4.png);
}
.service-img.type4 {
    background-image: url(../assets/images/sub5-img5.png);
}
.tabbox-desc.small {
    font-size: 18px;
    padding-left: 10px;
}
.tabbox-desc.small.dot::before {
    width: 4px;
    height: 4px;
    margin-bottom: 4px;
}

/* *****************************************************
// 비즈니스 - ai
// ******************************************************/
.visual-area.s3 {
    background-image: url(../assets/images/sub3-banner1.png);
    background-repeat: no-repeat;
}
/* section2 */
.wrap.sol .maintit.small {
    font-size: var(--font-2xlarge);
}
.business-desc {
    font-size: 18px;
    line-height: 140%;
    color: var(--color-netural-700);
    margin-top: 40px;
}
.tabbox-bg.type1 {
    width: 100%;
    transition: none;
    height: auto;
    border-radius: 0;
    padding: 35px 40px;
    margin-top: 40px;
}

.tab-description.column {
    flex-direction: column;
}
.bg-banner.ai {
    background-image: url(../assets/images/ai-banner.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* //section2 */

/* section3 */

.title-boxarea.type1 {
    column-gap: 213px;
}
.titles {
    row-gap: 8px;
}
.box-subtit {
    font-size: var(--font-primary);
    line-height: 130%;
    font-weight: 300;
    color: var(--color-black);
}
.bluebg .box-subtit {
    color: var(--color-white);
}
.box-desc.type1 {
    padding-top: 30px;
    font-weight: 300;
    letter-spacing: 0;
}
.box.bottom-right.type1 {
    margin-top: -95px;
}
/* //section3 */

/* section4 */
.contents-area.align-start {
    align-items: flex-start;
}
.box.type2 {
    padding: 21px 51px;
    border-radius: unset;
    width: auto;
    display: block;
    align-content: center;
    background-color: #f2f6f9;
}
.box.type2.whiteline {
    border-bottom: 1px solid var(--color-white);
}
.tit {
    font-size: 18px;
    font-weight: 500;
    line-height: 130%;
    transition: color 0.3s ease;
}
.service-description {
    padding: 26px 30px;
}
.service-desc.small {
    font-size: 18px;
    font-weight: 300;
    line-height: 160%;
}
.service-desc.txt-left {
    text-align: left;
}
/* //section4 */

/* section5 */
.solutions {
    display: flex;
    margin-left: 40px;
    gap: 40px;
}
.solution.box {
    border-radius: 8px;
    height: 90px;
    min-width: 286px;
    display: block;
    align-content: center;
    text-align: center;
    transition: background-color 0.3s ease;
    cursor: pointer;
}
.solution.box:hover {
    background-color: var(--color-black);
}
.solution.box:hover .tit {
    color: var(--color-white);
    text-decoration-line: underline;
    text-decoration-color: var(--color-white);
    text-underline-offset: 6px;
}
.box.transparent {
    background-color: transparent;
}
.tit.type1 {
    font-size: var(--font-medium);
}
/* //section5 */

/* section6 */
.clip-area {
    margin-top: 160px;
    padding-bottom: 180px;
}
.clip-area .h1 {
    font-size: 56px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}
.clip-area .body1 {
    font-size: 22px;
    line-height: 160%;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}
.bg-clip.type1.rev {
    clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%);
}
.item-description.align-center {
    align-items: center;
}
.item-description.type1 {
    row-gap: 70px;
    padding-top: 70px;
    z-index: 1;
    position: relative;
}

.item-description .btn.contact {
    margin-top: 70px;
}
/* //section6 */
.footer.type1 {
    border-top: unset;
    margin-top: 0;
}
/* *****************************************************
// 비즈니스 - bigdata
// ******************************************************/
.bg-banner.bigdata {
    background-image: url(../assets/images/bigdata-banner.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* *****************************************************
// 비즈니스 - 컴퓨터비전
// ******************************************************/
.bg-banner.computervision {
    background-image: url(../assets/images/computervision-banner.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* *****************************************************
// 비즈니스 - 보안
// ******************************************************/
.bg-banner.security {
    background-image: url(../assets/images/security-banner.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* *****************************************************
// 비즈니스 - 온디바이스
// ******************************************************/
.bg-banner.device {
    background-image: url(../assets/images/device-banner.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/* *****************************************************
// 문의하기 - 솔루션
// ******************************************************/
.visual-area.s4 {
    background-image: url(../assets/images/sub4-banner1.png);
    background-repeat: no-repeat;
}

.solution-form {
    margin-top: 80px;
}
.form-contents {
    display: grid;
    grid-template-columns: 286px minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
    width: 100%;
}
.form-contents + .form-contents {
    margin-top: 32px;
}
.radio-group {
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px 35px;
    column-gap: 60px;
}
.partnership-group {
    row-gap: 16px;
}

.form-control {
    width: 100%;
    padding: 20px 35px;
    box-sizing: border-box;
    border: 1px solid var(--color-netural-500);
    border-radius: 8px;
    background-color: var(--color-white);
    color: var(--color-black);
    font-size: var(--font-medium);
    font-weight: 400;
    line-height: 150%;
    outline: none;
    transition: border-color 0.3s ease;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.form-control::placeholder {
    color: #999;
    font-weight: 300;
}
.form-control:focus {
    border: 2px solid var(--color-primary-500);
}
.label.type1 {
    display: block;
}
textarea.form-control {
    resize: vertical;
    min-height: 240px;
    padding: 27px 35px;
}
/* .proposal-file__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.proposal-file {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 62px;
    padding: 20px 35px;
    box-sizing: border-box;
    border: 1px solid var(--color-netural-500);
    border-radius: 8px;
    background-color: #f2f4f7;
    cursor: pointer;
}
.proposal-file__text {
    font-size: var(--font-medium);
    font-weight: 300;
    line-height: 150%;
    color: #999;
}
.proposal-file__input:focus + .proposal-file {
    border: 2px solid var(--color-primary-500);
} */

.tabbox-bg.type2 {
    border-radius: 8px;
    min-height: 250px;
    transition: none;
}
.service-desc.last {
    margin-top: 30px;
}
.require-check {
    display: flex;
    margin-top: 40px;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    padding-right: 20px;
}
.require-check .rdo-txt {
    order: 1;
}
.require-check .rdo-txt::before {
    order: 2;
}
.solution-form .buttons {
    margin-top: 120px;
    align-items: center;
    justify-content: center;
    column-gap: 40px;
}

@media screen and (max-width: 1280px) {
    /* *****************************************************
// 솔루션-컴플리사이트
// ******************************************************/
    .wrap.sol section + section {
        padding-top: 80px;
    }
    /* section2 */
    .wrap.sol .section2 {
        padding-top: 58px;
    }
    .wrap.sol .section2 .contents-area {
        padding: 0 5%;
    }
    .site-desc {
        padding-top: 24px;
        font-size: var(--font-primary);
    }
    .site-name {
        font-size: 32px;
        letter-spacing: 0.32px;
    }
    .buttons.smallgap {
        margin-top: 24px;
        width: 100%;
    }
    .btn.whitebg,
    .btn.blackbg {
        max-width: 50%;
        height: 40px;
    }
    .btn.tit-middle {
        font-size: var(--font-small);
        line-height: 100%;
    }
    .solution-img {
        max-width: 690px;
        min-width: 335px;
        width: unset;
        height: auto;
        aspect-ratio: 3 / 2;
        margin-top: 40px;
        margin-left: auto;
        margin-right: auto;
    }
    .solution-img.comply {
        background-image: url(../assets/images/sub2-mdimg1.png);
    }
    .bg-banner {
        margin-top: 80px;
        height: 385px;
    }
    .banner-tit {
        font-size: 22px;
    }
    .banner-desc {
        font-size: var(--font-small);
        padding-top: 60px;
    }
    /* //section2 */

    /* section3 */
    .section3 .contents-area {
        padding: 0 5%;
    }
    .slogan-text {
        font-size: var(--font-large);
    }
    .service-types {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 24px;
    }
    .service-type {
        border-right: none;
        row-gap: 24px;
    }
    .small-circle {
        width: 120px;
        height: 120px;
    }
    .small-circle img {
        width: fit-content;
        height: fit-content;
        max-width: 40%;
        margin-left: auto;
        margin-right: auto;
    }
    .service-desc {
        font-size: var(--font-small);
    }
    /* //section3 */

    /* section4 */
    .big-circle {
        width: 345px;
        height: 345px;
    }
    .h2 {
        font-size: 28px;
    }
    .system-description {
        padding-top: 40px;
        row-gap: 20px;
    }
    /* //section4 */

    /* section5 */
    .section5 .contents-area {
        padding: 0 5%;
    }
    .title-boxarea {
        flex-direction: column;
        column-gap: unset;
        row-gap: 40px;
    }
    .subtit {
        font-size: var(--font-medium);
    }
    .wrap.sol .maintit {
        font-size: 32px;
    }
    .boxarea {
        width: 100%;
    }
    .boxs {
        height: auto;
        min-height: 368px;
        gap: 8px;
    }
    .box {
        width: 48%;
        padding: 20px;
    }
    .box-tit {
        font-size: var(--font-primary);
    }
    .box-desc {
        padding-top: 24px;
        letter-spacing: -0.75px;
        line-height: 160%;
        font-size: var(--font-xsmall);
    }
    .box.small {
        height: 160px;
    }
    .box.medium {
        height: 200px;
    }
    .box.bottom-left {
        margin-top: -36px;
    }
    /* //section5 */

    /* section6 */
    .section6 .contents-area {
        padding: 0 5%;
    }
    .contents-wrap {
        padding-top: 40px;
    }

    .contents-wrap .imgonly {
        max-width: 920px;
    }
    /* //section6 */

    /* section7 */
    .section7 .contents-area {
        padding: 0 5%;
    }

    .section7 .slogan-text {
        font-size: var(--font-large);
    }

    .slogan-text span {
        font-size: 32px;
        line-height: 120%;
    }
    .tabcontents {
        gap: 4px;
    }
    .tabcontent {
        flex: 0 0 1%;
    }

    .tabbox-bg {
        width: 5%;
        margin-top: 40px;
        border-radius: 8px;
        padding: 25px 20px;
    }
    .tabbox-tit {
        font-size: var(--font-large);
        top: 25px;
        left: 20px;
        right: 20px;
    }
    .tab-description {
        flex-direction: column;
    }
    .tabbox-description {
        margin-left: 0;
        margin-top: 8px;
    }
    .tabbox-subtit {
        font-size: var(--font-primary);
    }
    .tabbox-desc {
        font-size: var(--font-small);
    }
    /* //section7 */

    /* *****************************************************
// 솔루션-미어캐치
// ******************************************************/
    .solution-img.meercatch {
        background-image: url(../assets/images/sub3-mdimg1.png);
    }
    .slogan-text.small {
        font-size: var(--font-medium);
        line-height: 140%;
    }
    .circle-mini {
        width: 12px;
        height: 12px;
    }
    td.gradientbg .circle-mini {
        outline: 1px solid;
        outline-color: var(--color-red);
    }
    /* *****************************************************
// 솔루션-아이아티
// ******************************************************/
    .service-types.aiatti {
        grid-template-columns: 1fr;
    }
    .service-type.noline {
        gap: 16px;
    }
    .service-tit {
        font-size: var(--font-medium);
    }
    .service-img {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
    }
    .tabbox-desc.small {
        font-size: var(--font-small);
    }
    /* *****************************************************
// 비즈니스 - ai
// ******************************************************/
    .wrap.sol .maintit.small {
        font-size: 22px;
    }
    .business-desc {
        font-size: var(--font-small);
    }
    .tabbox-bg.type1 {
        padding: 16px;
    }
    .tabbox-desc.small.md {
        font-size: var(--font-xsmall);
    }
    .tabbox-desc.small.md.dot::before {
        width: 3px;
        height: 3px;
        margin-bottom: 3px;
        margin-right: 4px;
    }

    .box.large {
        height: 320px;
        padding: 34px 20px;
    }
    .box.medium.md {
        height: 280px;
        padding: 34px 20px;
    }
    .box.bottom-right.type1 {
        margin-top: -40px;
    }
    .box-subtit {
        font-size: var(--font-xsmall);
    }
    .box-desc.type1 {
        padding-top: 20px;
    }
    .box.type2 {
        padding: 21px 20px;
    }
    .service-description {
        padding: 16px;
    }
    .tit {
        font-size: var(--font-xsmall);
    }
    .service-desc.small {
        font-size: var(--font-xsmall);
    }
    .grid-container.type3 {
        grid-template-columns: minmax(40%, 40%) minmax(60%, 60%);
    }
    .grid-container.type4 {
        grid-template-columns: 1fr;
    }
    .solutions {
        margin-left: 0;
        gap: 8px;
        flex-wrap: wrap;
    }
    .solution.box {
        min-width: auto;
        height: 60px;
        width: 48%;
        padding: 0;
    }
    .subtit.type1 {
        font-size: 22px;
    }
    .tit.type1 {
        font-size: 18px;
    }

    .clip-area {
        margin-top: 80px;
        padding-bottom: 100px;
    }
    .clip-area .h1 {
        font-size: 28px;
        text-align: center;
    }
    .clip-area .body1 {
        font-size: var(--font-primary);
        text-align: center;
    }
    .item-description.type1 {
        align-items: flex-end;
        padding-top: 50px;
        padding-right: 7px;
        row-gap: 36px;
        max-width: 100%;
    }
    /* *****************************************************
// 비즈니스 - 컴퓨터비전
// ******************************************************/
    .solution.box.md-full {
        width: 100%;
    }
    /* *****************************************************
//  문의하기 - 솔루션
// ******************************************************/
    .solution-form {
        margin-top: 32px;
    }
    .form-contents {
        grid-template-columns: 1fr;
    }
    .form-contents > .label {
        padding: 0 0 8px;
    }
    .radio-group {
        padding: 20px 15px;
        column-gap: unset;
        gap: 20px;
    }
    .radio-group label {
        width: 46%;
    }
    .label {
        font-size: var(--font-small);
    }
    .form-control {
        padding: 0px 15px;
        font-size: var(--font-small);
        height: 40px;
    }
    textarea.form-control {
        padding: 20px 15px;
        min-height: 120px;
    }
    .form-contents .proposal-file {
        min-height: 40px;
        padding: 0 15px;
    }
    .proposal-file__text {
        font-size: var(--font-small);
    }
    .require-check {
        margin-top: 20px;
    }
    .solution-form .buttons {
        margin-top: 80px;
        column-gap: 10px;
    }
}