html, body{
    background: #f7f7f7;
}

*{
    box-sizing: border-box;
}

main{
    font-family: Noto Sans KR;
    letter-spacing: -1px;
    /* max-width: 1920px; */
    min-width: 360px;
    width: 100%;
    margin: 0 auto;
    color: #fff;

    header{
        display: flex;
        justify-content: center;
        height: 140px;
        padding-top: 34px;
        background: #fff;
        border-bottom: 20px solid #3E7AF2;

        h1{
            margin: 0;
            img{
                vertical-align: top;
                width: 190px;
            }
        }
    }

    .section1{
        background: url(../img/main1.png) no-repeat 50% 0/cover;
        padding: 253px 0 183px;
        text-align: center;
        color: #fff;

        .txt1{
            margin-bottom: 60px;

            span{
                display: block;
                font-weight: 400;
                font-size: 64px;
                line-height: 79px;
                letter-spacing: -2px;
                
                strong{
                    font-weight: 700;
                }
            }
        }

        .txt2{
            font-weight: 300;
            font-size: 32px;
            line-height: 42px;

            span{
                color: #2ADFD2;
                display: block;
                margin-bottom: 20px;

                i{
                    font-style: normal;
                    display: block;
                }
            }
        }
    }

    .section2{
        background: #3E7AF2;
        color: #fff;
        padding: 75px 0;
        text-align: center;

        strong{
            display: block;
            margin-bottom: 20px;
            font-weight: 600;
            font-size: 40px;
            line-height: 46px;
        }

        p{
            margin: 0;
            font-weight: 300;
            font-size: 24px;
            line-height: 33px;
        }
    }

    .section3{
        color: #000;
        .customer-container{
            max-width: 1440px;
            margin: 0 auto;
            width: 100%;
            padding: 66px 30px 74px;
            background: #F7F7F7;

            h4{
                font-weight: 700;
                font-size: 32px;
                line-height: 46px;
                text-align: center;
                margin: 0 0 26px;
            }

            ul{
                margin: 0;
                padding: 0;
                list-style: none;
                display: flex;
                justify-content: space-between;

                li{
                    flex: 1 0 30%;
                    margin-right: 15px;

                    &:last-of-type{
                        margin-right: 0;
                    }

                    .img-wrapper{
                        display: flex;
                        height: 160px;
                        align-items: center;
                        justify-content: center;
                        margin-bottom: 20px;

                        &.img-wrapper1{
                            background: #EBEFF4;
                        }
                        &.img-wrapper2{
                            background: #EAEAF2;
                        }
                        &.img-wrapper3{
                            background: #F3EFE0;
                        }

                        img{
                            height: 100px;
                        }

                    }

                    .frame{
                        text-align: center;
                        margin-bottom: 20px;

                        font-weight: 500;
                        font-size: 24px;
                        line-height: 28px;

                        span{
                            display: block;
                        }
                        
                        strong{
                            font-family: Lato;
                            font-weight: 700;
                            font-size: 40px;
                            margin-top: 10px;
                            line-height: 43px;
                            display: block;
                        }
                        
                        &.frame2{
                            strong{
                                font-size: 34px;
                            }
                        }
                        &.frame3{
                            strong{
                                font-size: 32px;
                            }
                        }
                    }

                    p{
                        margin: 0;
                        line-height: 26px;

                        font-weight: 300;
                        font-size: 16px;
                        text-align: center;
                    }

                    
                    .work-time{
                        font-weight: 500;
                        font-size: 18px;
                        color: rgba(0, 0, 0, .87);
                        text-align: center;

                        div{
                            line-height: 26px;
                            display: flex;
                            justify-content: center;
                            margin-bottom: 8px;

                            span{
                                margin-right: 10px;
                                opacity: .6;
                            }

                            strong{
                                font-family: Lato;
                                font-weight: 700;
                                font-size: 18px;
                                color: #000;
                            }
                        }

                        i{
                            display: block;
                            font-style: normal;
                            font-weight: 300;
                            line-height: 24px;
                        }
                    }

                }
            }
        }
    }

    .section4{
        position: relative;
        color: #fff;

        .txt1{
            position: absolute;
            max-width: 1440px;
            padding-left: 649px;
            width: 100%;
            top: 50%;
            right: 50%;
            transform: translate(50%, -50%);
            white-space: nowrap;

            h3{
                margin: 0 0 20px;

                font-weight: 300;
                font-size: 48px;
                line-height: 55px;
            }

            & > strong{
                display: block;
                margin-bottom: 50px;

                font-weight: 700;
                font-size: 48px;
                line-height: 48px;
            }

            p{
                margin: 0;
                /* margin: 0 0 27px; */

                font-weight: 400;
                font-size: 24px;
                line-height: 30px;
                
                span{
                    font-weight: 300;
                }
                
                strong{
                    font-weight: 500;
                }
            }

            &:before{
                content: '';
                position: absolute;
                height: 600px;
                top: 50%;
                transform: translateY(-50%);
                left: -17%;
                right: -17%;
                background: linear-gradient(to left, rgba(0, 1, 36, 0.75) 48.56%, rgba(67, 67, 67, 0) 74.52%), url(../img/main2.png) no-repeat 0/cover;
                z-index: -1;
                display: none;
            }
        }

        .bg{
            background: linear-gradient(270deg, rgba(0, 1, 36, 0.75) 48.56%, rgba(67, 67, 67, 0) 74.52%), url(../img/main2.png) no-repeat 0/cover;
            height: 600px;
        }
    }

    .section5{
        color: #000;

        & > div{
            padding: 80px 18px 94px;
            max-width: 1476px;
            width: 100%;
            margin: 0 auto;

            h2{
                font-weight: 700;
                font-size: 32px;
                line-height: 46px;
                margin: 0 0 20px;
            }

            .wrapper{
                display: flex;
                flex-wrap: wrap;

                h4{
                    font-weight: 700;
                    font-size: 24px;
                    line-height: 32px;

                    margin: 0;
                }

                address{
                    font-weight: 400;
                    font-size: 18px;
                    line-height: 32px;
                    font-style: normal;
                }

                .call{
                    display: flex;
                    margin-bottom: 30px;

                    span{
                        display: flex;

                        font-weight: 400;
                        font-size: 18px;
                        line-height: 26px;

                        &:nth-of-type(2){
                            margin-left: 20px;
                        }

                        strong{
                            margin-left: 6px;
                            font-weight: 700;
                            font-size: 18px;
                        }
                    }
                }

                .map-field{
                    display: flex;
                    align-items: flex-end;
                    margin-bottom: 40px;

                    & > img{
                        width: 100%;
                        vertical-align: top;
                    }

                    .link-list{
                        margin-left: 10px;
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        flex-direction: column;

                        img{
                            width: 40px;
                            margin-bottom: 8px;
                            vertical-align: top;

                            &:last-of-type{
                                margin-bottom: 0;
                            }
                        }
                    }
                }

                .sss, .kkk{
                    margin-bottom: 30px;
                    &.sss{
                        margin-right : 50px;
                    }

                    .route-info{
                        &:nth-child(2n){
                            margin-top : 30px;
                        }
    
                        & > strong{
                            display: flex;
                            align-items: center;
                            margin-bottom: 10px;

                            font-weight: 600;
                            font-size: 20px;
                            
                            img{
                                width: 32px;
                                margin-right: 4px;
                            }
                        }
    
                        ul{
                            margin: 0;
                            padding: 0;
                            list-style: none;
    
                            li{
                                line-height: 30px;
                                display: flex;
                                font-weight: 400;
                                font-size: 20px;
                                
                                span{
                                    font-weight: 700;
                                }
                            }
                        }

                        p{
                            font-weight: 400;
                            font-size: 20px;
                            line-height: 30px;
                            margin: 0;
                            
                            strong{
                                font-weight: 700;
                            }
                        }
                    }
                }
            }

        }
    }

    footer{
        background: #001038;
        padding: 100px 0 96px;

        & > div{
            max-width: 1440px;
            padding: 0 16px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;

            i{
                letter-spacing: 0;
                font-style: normal;
            }

            h2{
                margin: 0;
                margin-right: 100px;
                img{
                    vertical-align: top;
                }
            }

            ul{
                margin: 0;
                padding: 0;
                list-style: none;
            }

            .section-center{
                margin-right: 70px;

                h4{
                    margin: 0 0 16px;

                    font-weight: 700;
                    font-size: 15px;
                    line-height: 18px;
                }

                ul{
                    margin-bottom: 30px;
                    li{
                        font-weight: 300;
                        font-size: 14px;
                        line-height: 17px;
                        margin-bottom: 10px;

                        &:last-of-type{
                            margin-bottom: 0;
                        }

                        strong{
                            margin: 0 16px;
                            font-weight: 400;
                            display: inline-block;
                        }

                        
                    }
                }

                p{
                    margin: 0;
                    font-weight: 300;
                    font-size: 11px;
                    line-height: 13px;
                }
            }
            .section-end{
                ul{
                    li{
                        &:first-of-type{
                            margin-bottom: 16px;
                        }

                        h4{
                            margin: 0 0 10px;

                            font-weight: 700;
                            font-size: 15px;
                            line-height: 18px;
                        }

                        address{
                            font-weight: 300;
                            font-size: 14px;
                            line-height: 17px;
                            font-style: normal;
                        }
                        
                    }
                }

                p{
                    display: none;
                    margin: 30px 0 0;
                    font-weight: 300;
                    font-size: 11px;
                    line-height: 13px;
                }
            }
        }
        
    }
}

@media (max-width: 1920px){
    main{
        
        .section4{
            overflow: hidden;
            .txt1{
                &:before{
                    display: block;
                }
            }

            .bg{
                /* background: linear-gradient(270deg, rgba(0, 1, 36, 0.75) 48.56%, rgba(67, 67, 67, 0) 74.52%), url(../img/main2.png) no-repeat 0/cover; */
                background: 0;
            }
        }
    }
}

@media (max-width: 1320px){
    main{
        .section3{
            .customer-container {
                ul {
                    li {
                        p {
                            font-size: 12px;
                            line-height: 18px;
                        }

                        .frame{
                            &.frame2{
                                strong{
                                    font-size: 30px;
                                }
                            }
                            &.frame3{
                                strong{
                                    font-size: 28px;
                                }
                            }

                            strong{
                                font-size: 32px;
                            }
                        }

                        .work-time{
                            font-size: 14px;

                            div{
                                margin: 0;
                                strong{
                                    font-size: 14px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media(max-width: 1200px){
    main{
        .section4{
            .txt1{
                padding-left: 500px;
                max-width: 920px;
                &:before{
                    background: linear-gradient(to left, rgba(0, 1, 36, 0.75) 48.56%, rgba(67, 67, 67, 0) 74.52%), url(../img/main2.png) no-repeat 0/auto 75%;
                }
                h3{
                    font-weight: 300;
                    font-size: 36px;
                    line-height: normal;
                    height: auto;
                    margin: 0 0 8px;
                }

                & > strong{
                    font-weight: 700;
                    font-size: 32px;
                    line-height: 29px;
                    margin-bottom: 32px;
                }

                p{
                    font-weight: 500;
                    font-size: 20px;
                    line-height: 24px;
                }
            }

            .bg{
                height: 400px;
            }
        }
        footer{
            & > div{
                h2{
                    margin-right: 50px;
                }

                .section-center{
                    margin-right: 35px;
                }
            }
        }
    }
}
@media(max-width: 1080px){
    main{

        .section1{
            /* padding: 93px 0 70px; */
            background: url(../img/main1.png) no-repeat 75% 0/cover;

            .txt1{
                /* margin-bottom: 50px; */

                /* img{
                    width: 192px;
                } */

                span{
                    /* font-weight: 300;
                    font-size: 38px;
                    line-height: 44px; */

                    strong{
                        display: block;
                        /* font-weight: 600;
                        line-height: 38px; */
                    }
                }
            }

            .txt2{
                i{
                    display: block;
                }
            }
        }

        footer{
            padding: 48px 0 44px;
            & > div{
                max-width: 520px;
                h2{
                    margin: 0 0 30px;
                }

                .section-center{
                    margin: 0 0 30px;
                    ul{
                        li{
                            span{
                                display: block;
                                margin-top: 10px;

                                strong{
                                    display: none;
                                }
                            }
                        }
                    }
                    p{
                        display: none;
                    }
                }
                .section-end{
                    p{
                        display: block;
                    }
                }
            }
        }
    }
}
@media (max-width: 1000px){
    main {
        .section3 {
            .customer-container {
                ul {
                    li {
                        .frame{
                            margin-bottom: 0;

                            &.frame2{
                                strong{
                                    font-size: 22px;
                                }
                            }
                            &.frame3{
                                strong{
                                    font-size: 20px;
                                }
                            }

                            strong{
                                font-size: 28px;
                            }
                        }


                        .over-1000{
                            display: none;
                        }
                    }
                }

                
            }
        }
    }
}
@media (max-width: 900px){
    main{
        .section4{
            .txt1{
                h3{
                    font-size: 30px;
                    line-height: 32px;
                }

                & > strong{
                    font-size: 28px;
                    line-height: 25px;
                    margin-bottom: 24px;
                }

                span{
                    font-size: 22px;
                    line-height: 26px;
                }
                padding-left: 360px;
                &:before{
                    background: linear-gradient(to left, rgba(0, 1, 36, 0.75) 48.56%, rgba(67, 67, 67, 0) 74.52%), url(../img/main2.png) no-repeat 35% 50%/auto 58%;
                }
            }

            .bg{
                height: 300px;
            }
        }
    }
}
@media (max-width: 761px){
    main{
        .section3{
            .customer-container {
                padding: 0;
                h4{
                    display: none;
                }
                ul {
                    display: block;
                    
                    li {
                        display: flex;
                        align-items: center;
                        height: auto;
                        margin-right: 0;
                        padding: 21px 0;
                        padding-left: 16px;

                        &:nth-of-type(1){
                            background: #EBEFF4;
                        }
                        &:nth-of-type(2){
                            background: #EAEAF2;
                        }
                        &:nth-of-type(3){
                            background: #F3EFE0;
                        }

                        .img-wrapper{
                            margin-bottom: 0;
                            margin-right: 20px;
                            height: auto;

                            img{
                                height: 48px;
                            }
                        }

                        .frame{
                            margin-bottom: 0;

                            font-weight: 400;
                            font-size: 14px;
                            line-height: 17px;
                            text-align: left;

                            &.frame strong:nth-of-type(1){
                                margin-top: 4px;
                                font-weight: 500;
                                font-size: 18px;
                                line-height: 22px;
                            }
                        }


                        .over-1000{
                            display: none;
                        }
                    }
                }
            }
        }

        .section4{
            .txt1{
                padding: 50px 0;
                color: #000;
                position: relative;
                top: 0;
                left: 0;
                transform: translate(0, 0);
                width: 100%;
                background: #fff;
                text-align: center;

                h3{
                    font-weight: 300;
                    font-size: 24px;
                    line-height: normal;
                    height: 64px;
                    margin: 0 0 8px;
                }

                & > strong{
                    font-weight: 700;
                    font-size: 28px;
                    line-height: 29px;
                    margin-bottom: 32px;
                }

                p{
                    font-weight: 500;
                    font-size: 14px;
                    line-height: 17px;

                    span{
                        font-size: inherit;
                        line-height: inherit;
                    }
                }

                &:before{
                    display: none;
                }
            }

            .bg{
                background: linear-gradient(270deg, rgba(0, 1, 36, 0.75) 48.56%, rgba(67, 67, 67, 0) 74.52%), url(../img/main2.png) no-repeat 10% 0/cover;
                
                height: 290px;
            }
        }

        .section5{
            & > div{
                padding: 30px 30px 0;

                h2{
                    font-weight: 700;
                    font-size: 18px;
                    line-height: 21px;
                }

                .wrapper{
                    display: flex;
                    flex-wrap: wrap;

                    h4{
                        font-weight: 700;
                        font-size: 14px;
                        line-height: 23px;

                        margin: 0;
                    }

                    address{
                        font-weight: 400;
                        font-size: 14px;
                        line-height: 23px;
                        margin-bottom: 6px;
                    }

                    .call{
                        margin-bottom: 20px;
    
                        span{
                            display: flex;

                            font-weight: 400;
                            font-size: 12px;
                            line-height: 17px;

    
                            &:nth-of-type(2){
                                margin-left: 15px;
                            }
    
                            strong{
                                margin-left: 5px;
                                font-weight: 700;
                                font-size: 14px;
                            }
                        }
                    }
    
                    .map-field{
                        display: block;
                        margin-bottom: 8px;

                        & > img{
                            width: 100%;
                            vertical-align: top;
                            margin-bottom: 6px;
                        }
    
                        .link-list{
                            margin-left: 0;
                            display: flex;
                            align-items: center;
                            justify-content: flex-end;
                            flex-direction: row;
    
                            img{
                                width: 24px;
                                margin-bottom: 0;
                                margin-right: 6px;
                                vertical-align: top;
    
                                &:last-of-type{
                                    margin-right: 0;
                                }
                            }
                        }
                    }
    
                    .sss, .kkk{
                        margin-bottom: 30px;
                        width: 100%;

                        &.sss{
                            margin-right : 0;
                        }
    
                        .route-info{
                            &:nth-child(2n){
                                margin-top : 20px;
                            }
        
                            & > strong{
                                margin-bottom: 6px;
                                font-weight: 600;
                                font-size: 14px;
                                
                                img{
                                    width: 24px;
                                    margin-right: 0;
                                }
                            }
        
                            ul{
                                margin: 0;
                                padding: 0;
                                list-style: none;
        
                                li{
                                    line-height: 18px;
                                    font-size: 12px;
                                    
                                    span{
                                        font-weight: 700;
                                    }
                                }
                            }
    
                            p{
                                font-size: 12px;
                                line-height: 18px;
                                margin: 0;
                            }
                        }
                    }
                }

            }
        }

    }
}
@media(max-width: 600px){
    main{
        header{
            height: 94px;
            padding-top: 20px;
            border-bottom: 16px solid #3E7AF2;

            h1{
                img{
                    width: 130px;
                }
            }
        }

        .section1{
            padding: 93px 0 70px;

            .txt1{
                margin-bottom: 50px;

                img{
                    width: 192px;
                }

                span{
                    font-weight: 300;
                    font-size: 38px;
                    line-height: 44px;

                    strong{
                        display: block;
                        font-weight: 600;
                        line-height: 38px;
                    }
                }
            }

            .txt2{
                line-height: normal;
                font-size: 18px;

                span{
                    font-weight: 400;
                    line-height: 22px;
                    margin: 2px 0 20px;
                }
            }
        }

        .section2{
            padding: 50px 0;

            strong{
                font-weight: 500;
                font-size: 24px;
                line-height: 34px;
                margin-bottom: 8px;
            }
            p{
                font-weight: 300;
                font-size: 14px;
                line-height: 14px;
            }
        }

        .section4{
            .bg{
                background: linear-gradient(270deg, rgba(0, 1, 36, 0.75) 16.56%, rgba(67, 67, 67, 0) 74.52%), url(../img/main2.png) no-repeat 10% 0/cover;
            }
        }
    }
    
}
@media(max-width: 500px){
    main{
        footer{
            padding: 48px 0 44px;
            & > div{
                max-width: 400px;
                h2{
                    img{
                        width: 100px;
                    }
                }

                .section-center{
                    margin: 0 0 30px;
                    h4{
                        margin: 0 0 4px;

                        font-weight: 500;
                        font-size: 14px;
                        line-height: 17px;
                    }
                    ul{
                        margin: 0;
                        li{
                            font-weight: 300;
                            font-size: 12px;
                            line-height: 18px;
                            margin-bottom: 0;

                            span{
                                margin: 0;
                            }
                        }
                    }
                    p{
                        display: none;
                    }
                }

                .section-end{
                    ul{
                        li{
                            &:first-of-type{
                                margin-bottom: 20px;
                            }
                            h4{
                                margin: 0 0 4px;
    
                                font-weight: 500;
                                font-size: 14px;
                                line-height: 17px;
                            }

                            address{
                                font-weight: 300;
                                font-size: 12px;
                                line-height: 16px;
                            }
                        }
                    }
                }

            }
        }
    }
}