@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap");

/* ============================================
   Common
============================================ */
.wrapper {
    max-width: 1440px;
}

.img_box img {
    width: 100%;
}

/* Title Box */
.title_box {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 20px;
    margin-bottom: 80px;
    color: #fff;
}

.title_box h2 {
    color: #111;
    font-family: Pretendard;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 135%;
}

.title_box h6 {
    color: #FF5B22;
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    margin-bottom: 30px;
    text-transform: capitalize;
}

/* ============================================
   Hero
============================================ */
.sec_hero .txt_wrap {
    color: #222;
}

.sec_hero .txt_wrap .logo {
    max-width: 628px;
}

.sec_hero .txt_wrap .tit {
    color: #fff;
}

.sec_hero .txt_wrap .tit .color {
    color: var(--primary);
}

.sec_hero .view_more .round {
    background: #FF5B22;
}

/* ============================================
   Info
============================================ */
.sec_info {
    background: #FF5B22;
}

.sec_info .title_box {
    flex-direction: column;
    color: #fff;
    gap: 0;
}

.sec_info .title_box h2 {
    color: #fff;
}

.sec_info .cont {
    color: #fff;
}

/* ============================================
   Section 03 - Desktop View & Overview
============================================ */
.sec_03 {
    padding: var(--sec-padding) 0;
    background: #f2f2f2;
}

.sec_03 .over_view {
    margin-top: 120px;
}

.desktop_view .cont img {
    animation: desktopView 20s linear infinite !important;
}

/* ============================================
   Section 04-1 - Project Goal
============================================ */
.sec_04_1 {
    background-color: #FFF6EC;
    padding: var(--sec-padding) 0;
}

/* ============================================
   Section 04 - Design System
============================================ */
.sec_04 {
    background: url(img/sec_04_bg.jpg) no-repeat center / cover;
    padding: var(--sec-padding) 0;
}

.sec_04 .title_box {
    text-align: left;
    margin-bottom: 60px;
}

.sec_04 .title_box h2 {
    color: #111;
}

.sec_04 .item_box {
    display: flex;
    gap: 40px;
}

/* ============================================
   Banner
============================================ */
.sec_banner {
    display: flex;
    align-items: end;
    width: 100%;
    aspect-ratio: 1920/989;
    background-image: url(img/banner_01.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ============================================
   Overview Wrap - Dashboard Design
============================================ */
.over_view_wrap {
    background: url(img/over_view_bg.jpg) no-repeat center / cover;
    padding: var(--sec-padding) 0px;
}

.over_view_wrap .title_box {
    align-items: center;
}

.over_view_wrap .over_view .swiper-container-horizontal {
    overflow: visible;
    margin-bottom: 60px;
}

.over_view_wrap .over_view .swiper-container-horizontal:last-child {
    margin-bottom: 0px;
}

.over_view_wrap .over_view .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important
}

.over_view_wrap .over_view .swiper-slide {
    width: 850px;
    padding: 0 12px
}

.over_view_wrap .over_view .img_wrap {
    border: solid 1px #F2F2F2;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15)
}

.over_view_wrap .over_view .img_wrap img {
    width: 100%
}

/* ============================================
   Section 05 - Grid Overview
============================================ */
.sec_05 {
    padding: var(--sec-padding) 0;
    background: #FFF6EC;
    position: relative;
    overflow: visible;
}

.sec_05 .float {
    position: absolute;
    right: 170px;
    top: -74px;
}

.sec_05 .float img {
    width: 220px;
}

.sec_05 .item_box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.sec_05 .item_box .img_box {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* ============================================
   Responsive - 1399px
============================================ */
@media all and (max-width: 1399px) {
    .sec_04_1 {
        padding: var(--sec-padding) 0;
    }
}

/* ============================================
   Responsive - 1199px
============================================ */
@media all and (max-width: 1199px) {
    .title_box {
        margin-bottom: 42px;
        flex-direction: column;
        gap: 24px;
    }

    .sec_hero .txt_wrap .logo {
        max-width: 200px;
    }

    .sec_03 .over_view {
        margin-top: 80px;
    }

    .sec_info .cont {
        font-size: 14px;
    }
}

/* ============================================
   Responsive - 767px (Mobile)
============================================ */
@media all and (max-width: 767px) {

    /* Common */
    .title_box {
        margin-bottom: 40px;
    }

    .title_box h2 {
        font-size: 24px;
    }

    .title_box h2 br {
        display: none;
    }

    /* Hero */
    .sec_hero .txt_wrap .logo {
        max-width: 276px;
    }

    .sec_hero .txt_wrap .tit {
        font-size: 20px;
    }

    /* Section 03 */
    .sec_03 .over_view {
        margin-top: 48px;
    }

    /* Section 04 */
    .sec_04 .title_box {
        margin-bottom: 24px;
    }

    .sec_04 .item_box {
        flex-direction: column;
        gap: 20px;
    }

    .sec_04_1 .img_box {
        padding: 0px 20px;
        box-sizing: border-box;
    }

    .over_view_wrap .over_view .swiper-slide {
        width: 286px;
    }
    .over_view_wrap .over_view .img_wrap {
        border-radius: 10px;
    }
    .over_view_wrap .over_view .swiper-container-horizontal {margin-bottom: 20px;}

    .sec_05 .float {right: 20px; top: -50px;}
    .sec_05 .float img {width: 108px;}

}