@charset "utf-8";
/*-------------------------------------------------
Author : WB,Seo
Create date : 2023. 01. 27.
Last update : 9999. 03. 29. 10:47
-------------------------------------------------*/

/* ==================================
    MOBILE
=================================== */
/* ============= VISUAL === */
.visual-inner .slide-cont {
    position: relative;
    height: 100vh;
    background: url(/image/main/visual_m.jpg) no-repeat center/cover;
}
.visual-inner .slide-cont .txt-box {
    position: absolute;
    width: 100%;
    top: 52%; left: 50%; transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
}
.visual-inner .slide-cont .txt-box .cont {
    margin-bottom: 10px;
    font-size: 1.6rem;
}
.visual-inner .slide-cont .txt-box .title {
    font-size: 4rem;
    font-weight: 700;
}
/* ============= GREET === */
.greet-inner {
    position: relative;
    height: 100vh;
    overflow: hidden;
}
.greet-inner .txt-box {
    position: absolute;
    top: 30.57%; left: 0;
    width: 100%;
    text-align: center;
}
.greet-inner .txt-box h3 {
    margin-bottom: 22px;
    font-size: 2.7rem;
    line-height: 34px;
    white-space: pre-line;
}
.greet-inner .txt-box h3 .bold {font-weight: 700;}
.greet-inner .txt-box h3 .color {
    position: relative;
    display: inline-block;
    color: #fff;
}
.greet-inner .txt-box h3 .color:after {
    position: absolute;
    content: '';
    top: 0; left: 50%; transform: translateX(-50%);
    width: 102%; height: 100%;
    background: var(--point);
    z-index: -1;
}
.greet-inner .txt-box .cont {
    font-size: 1.6rem;
    line-height: 19px;
    white-space: pre-line;
}
.greet-inner .logo-img {
    position: absolute;
    bottom: 31px; right: -80px;
    width: 329px;
}
/* ============= BUSINESS === */
.busi-inner {
    padding: 84px 16px 55px;
    color: #fff;
    background: url(/image/main/business_bg_m.jpg) no-repeat center/cover;
}
.busi-inner .title-box {margin-bottom: 60px;}
.busi-inner .title-box h3 {
    margin-bottom: 55px;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 37px;
}
.busi-inner .title-box .flex-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.busi-inner .title-box .flex-box .left {
    font-size: 2rem;
    font-weight: 700;
    line-height: 24px;
    white-space: pre-line;
}
.busi-inner .title-box .flex-box .right {
    width: 61.22%;
    font-size: 1.6rem;
    line-height: 23px;
    white-space: pre-line;
}
.busi-inner .business-lists li:nth-child(n+2) {margin-top: 51px;}
.busi-inner .business-lists a {
    width: 100%;
    color: #fff;
}
.busi-inner .business-lists .img-box {
    margin-bottom: 28px;
    width: 91.25%; height: 430px;
    background: url(/image/main/business_tech01.jpg) no-repeat center/cover;
}
.busi-inner .business-lists .cont-box .title {
    margin-bottom: 12px;
    font-size: 1.8rem;
    font-weight: 700;
}
.busi-inner .business-lists .cont-box .cont {
    font-size: 1.6rem;
    line-height: 20px;
    white-space: pre-line;
}
.busi-inner .business-lists .right a {text-align: right;}
.busi-inner .business-lists .right .img-box {margin-left: 8.75%;}
.busi-inner .business-lists .tech2 .img-box {background-image: url(/image/main/business_tech02.jpg);}
.busi-inner .business-lists .tech3 .img-box {background-image: url(/image/main/business_tech03.jpg);}
.busi-inner .business-lists .tech4 .img-box {background-image: url(/image/main/business_tech04.jpg);}

/* ============= LOWER === */
.lower-inner .lower-area {
    color: #fff;
    position: relative;
    padding: 39px 16px;
    background: url(/image/main/lower_notice_bg_m.jpg) no-repeat center/cover;
}
.lower-inner .lower-area .title {
    margin-bottom: 12px;
    font-size: 2.8rem;
    font-weight: 700;
}
.lower-inner .lower-area .cont {font-size: 1.6rem;}
.lower-inner .lower-area .btn-link {
    position: absolute;
    top: 50%; right: 16px; transform: translateY(-50%);
    width: 110px;
    font-size: 1.5rem; color: #fff;
    line-height: 31px;
    border-radius: 16px;
    background: #000;
    text-align: center;
}
.lower-inner .inquire-area {background-image: url(/image/main/lower_inquire_bg_m.jpg);}


/* ==================================
    PC
=================================== */
@media screen and (min-width:1084px){
    main {overflow: visible;}
    /* ============= VISUAL === */
    .visual-inner .slide-cont {
        height: 900px;
        background-image: url(/image/main/visual.jpg);
    }
    .visual-inner .slide-cont .txt-box {
        width: 1184px;
        top: 644px; transform: translate(-50%, 0);
        color: #fff;
        text-align: left;
    }
    .visual-inner .slide-cont .txt-box .cont {
        margin-bottom: 15px;
        letter-spacing: -0.05rem;
        font-weight: 300;
        font-size: 3.2rem;
    }
    .visual-inner .slide-cont .txt-box .title {
        margin-left: -12px;
        font-size: 8rem;
    }
    /* ============= GREET === */
    #greet {
        position: relative;
        height: 240vh; min-height: 2000px;
        background: #fff;
        z-index: 2;
        transition: 1s;
    }
    #greet.hide {
        opacity: 0;
        pointer-events: none;
    }
    .greet-inner {
        position: sticky;
        top: 0; left: 0;
        width: 100%;
    }
    .greet-inner .txt-box {
        top: 50%; transform: translateY(-50%);
        transition: .3s;
    }
    .greet-inner .txt-box h3 {
        margin-bottom: 37px;
        font-size: 6rem;
        line-height: 74px;
    }
    .greet-inner .txt-box .cont {
        font-size: 2rem;
        line-height: 1;
        white-space: normal;
    }
    .greet-inner .logo-img {
        position: absolute;
        bottom: 34px; right: -46px;
        width: 613px;
        z-index: -1;
    }
    /* ============= BUSINESS === */
    #business {
        position: relative;
        margin-top: -100vh;
    }
    .business-bg {
        position: sticky;
        top: 0; left: 0;
        width: 100%; height: 100vh;
        object-fit: cover;
        z-index: -1;
    }
    .busi-inner {
        width: 1184px;
        margin: -100vh auto 0;
        padding: 243px 0 236px;
        background: none;
    }
    .busi-inner .title-box {margin-bottom: 111px;}
    .busi-inner .title-box h3 {
        margin-bottom: 128px;
        font-size: 10rem;
        line-height: 118px;
        transform: translateY(50px);
        opacity: 0;
        transition: transform 1s;
    }
    #business.active .title-box h3 {
        transform: translateY(0);
        opacity: 1;
    }
    .busi-inner .title-box .flex-box .left {
        font-size: 5rem;
        line-height: 58px;
    }
    .busi-inner .title-box .flex-box .right {
        width: 820px;
        font-size: 3rem;
        line-height: 1.3;
        white-space: normal;
    }
    .busi-inner .business-lists {padding-left: 360px;}
    .busi-inner .business-lists li:nth-child(n+2) {margin-top: -221px;}
    .busi-inner .business-lists a {
        display: inline-block;
        width: 420px;
    }
    .busi-inner .business-lists .img-box {
        margin-bottom: 32px;
        width: 100%; height: 600px;
    }
    .busi-inner .business-lists .cont-box .title {
        margin-bottom: 20px;
        font-size: 3rem;
    }
    .busi-inner .business-lists .cont-box .cont {
        font-size: 2rem;
        line-height: 28px;
    }
    .busi-inner .business-lists .right {text-align: right;}
    .busi-inner .business-lists .right .img-box {margin-left: 71px;}

    /* ============= LOWER === */
    #lower {position: relative;}
    #lower:after {
        position: absolute;
        top: 0; left: 50%; transform: translateX(-50%);
        content: '';
        width: 100%; height: 100%;
        background: url(/image/main/lower_bg.jpg) no-repeat center/cover;
        z-index: -1;
    }
    .lower-inner {
        display: flex;
        padding: 146px 0 89px;
        width: 1184px;
        margin: 0 auto;
    }
    .lower-inner .lower-area {
        padding: 0;
        background: none;
    }
    .lower-inner .lower-area .title {
        margin: 0;
        font-size: 4.5rem;
        font-weight: 700;
    }
    .lower-inner .lower-area .cont {
        margin: 25px 0 51px;
        font-size: 1.8rem;
    }
    .lower-inner .lower-area .btn-link {
        position: static;
        display: block;
        transform: translateY(0);
        width: 180px;
        font-size: 1.8rem;
        line-height: 49px;
        border-radius: 20px;
    }
    .lower-inner .inquire-area {
        margin-left: 606px;
        background: none;
    }
}