nav, main, footer {
    width: 1920px;
    margin: 0 auto;
}

.font_kr {
    font-family: 'IBMPlexSans';
}

nav {
    height: 132px;
    padding-top: 48px;
    overflow: hidden;
}

    nav a .mobile_menu {
        background: url('/assets/mobile/btn/btn_tap.png') no-repeat;
        width: 38px;
        height: 28px;
        margin: 10px 0 0 20px;
        float: left;
        display: none;
    }

    nav a .logo {
        background: url('/assets/common/logo_mecca.png') no-repeat;
        width: 193px;
        height: 48px;
        margin: 0 40px 0 100px;
        float: left;
        background-position: center;
    }

    nav .menu_container {
        float: left;
        height: 48px;
        position: relative;
    }

        nav .menu_container .menu {
            width: 100px;
            height: 40px;
            margin-top: 4px;
            display: inline-block;
            text-align: center;
            font-size: 14px;
        }

            nav .menu_container .menu a {
                color: #fff;
            }

                nav .menu_container .menu a:hover {
                    color: #aaa;
                }

    nav a .labs_container {
        float: right;
        width: 143px;
        height: 48px;
        margin: 3px 101px 0 0;
        border: solid;
        border-color: #fff;
        border-width: 1px;
        text-align: center;
    }

        nav a .labs_container .labs {
            font-weight: 800;
            font-size: 14px;
            line-height: 19px;
            letter-spacing: 0.03em;
            color: #FFFFFF;
        }

main {
}

    main .about .about_container {
        background: url('/assets/pc/bg/bg_about.png') no-repeat;
        height: 720px;
    }

        main .about .about_container .title_block {
            padding-top: 166px;
            text-align: center;
        }

            main .about .about_container .title_block .title_logo_icon {
                background: url('/assets/common/logo_color.png') no-repeat;
                width: 193px;
                height: 48px;
                display:inline-block;
            }

        main .about .about_container .contents_block {
            margin: 64px 32px 0 32px;
            text-align: center;
        }

            main .about .about_container .contents_block .contents {
                font-family: "IBMPlexSans";
                font-size: 18px;
                color: #fff;
                font-weight: 300;
                line-height: 18px;
                letter-spacing: 0.03em;
            }

    main .work .work_main {
    }

    main .work .work_tab {
        height: 320px;
    }

        main .work .work_tab .title_box {
            text-align: center;
            padding-top: 90px;
        }

            main .work .work_tab .title_box .title {
                font-weight: 800;
                font-size: 32px;
                line-height: 32px;
                letter-spacing: 0.03em;
                color: #FFFFFF;
            }

        main .work .work_tab .tab_box {
            text-align: center;
            margin-top: 48px;
        }

            main .work .work_tab .tab_box .tab {
                width: 125px;
                margin-right: 19px;
                text-align: center;
                display: inline-block;
            }

                main .work .work_tab .tab_box .tab a {
                    letter-spacing: 0.03em;
                    font-weight: 800;
                    font-size: 18px;
                    line-height: 32px;
                    color: #FFFFFF;
                }

                main .work .work_tab .tab_box .tab:last-child {
                    margin-right: 0;
                }

            main .work .work_tab .tab_box .select {
                position: relative;
            }

                main .work .work_tab .tab_box .select:before {
                    content: '';
                    position: absolute;
                    left: 50%;
                    top: -10px;
                    margin-left: -5px;
                    border-top: 5px solid #fff;
                    border-left: 5px solid transparent;
                    border-right: 5px solid transparent;
                }

    main .work .work_container {
    }

        main .work .work_container .container {
            max-width: 1920px;
            padding: 0 0;
        }

            main .work .work_container .container .row {
                margin: 0 99px;
            }

                main .work .work_container .container .row .col {
                    width: 850px;
                    margin-bottom: 90px;
                }

                    main .work .work_container .container .row .col:nth-child(2n) {
                        margin-left: 20px;
                    }

                    main .work .work_container .container .row .col .work_title {
                        display: block;
                        font-weight: 800;
                        font-size: 18px;
                        line-height: 32px;
                        letter-spacing: 0.03em;
                        color: #FFFFFF;
                        margin-bottom: 16px;
                    }

    main .work .work_more {
        margin-bottom: 90px;
        text-align: center;
    }

        main .work .work_more .more {
            border: solid;
            padding-top: 15px;
            border-color: #fff;
            border-width: 1px;
            display: inline-block;
            width: 311px;
            height: 78px;
        }

            main .work .work_more .more a {
                font-weight: 800;
                font-size: 20px;
                line-height: 27px;
                letter-spacing: 0.03em;
                color: #FFFFFF;
            }

    main .people {
    }

        main .people .people_title {
            text-align: center;
        }

            main .people .people_title .title {
                font-weight: 800;
                font-size: 18px;
                line-height: 32px;
                letter-spacing: 0.03em;
                color: #FFFFFF;
            }

        main .people .people_contents {
            margin: 64px 0;
            text-align: center;
        }

            main .people .people_contents .contents {
                font-weight: 300;
                font-size: 18px;
                line-height: 24px;
                letter-spacing: 0.03em;
                color: #FFFFFF;
            }

        main .people .people_gallery {
            position: relative;
            margin: 0 100px;
        }

            main .people .people_gallery .img_container {
            }

                main .people .people_gallery .img_container a {
                    position: relative;
                }

                    main .people .people_gallery .img_container a img {
                        width: 415px;
                        height: 520px;
                    }

                    main .people .people_gallery .img_container a .gradation {
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        background: url('/assets/pc/bg/bg_people_gra.png') no-repeat;
                    }

                        main .people .people_gallery .img_container a .gradation .job {
                            margin: 420px 0 0 20px;
                            font-weight: 800;
                            font-size: 18px;
                            line-height: 32px;
                            letter-spacing: 0.03em;
                            color: #FFFFFF;
                        }

                        main .people .people_gallery .img_container a .gradation .name {
                            margin: 0 0 0 20px;
                            font-weight: 400;
                            font-size: 24px;
                            line-height: 32px;
                            letter-spacing: 0.03em;
                            color: #FFFFFF;
                        }


                    main .people .people_gallery .img_container a:hover .gradation .job {
                        color: #aaa;
                    }

                    main .people .people_gallery .img_container a:hover .gradation .name {
                        color: #aaa;
                    }

            main .people .people_gallery .slick-prev {
                position: absolute;
                left: -50px;
                top: 47%;
                width: 32px;
                height: 32px;
                background: rgba(0, 0, 0, 0);
                display: inline-block;
                text-indent: -9999px;
                text-decoration: none;
                font: normal normal normal 14px/1 FontAwesome;
                z-index: 1;
            }

                main .people .people_gallery .slick-prev::before {
                    content: "\f104";
                    color: #FFF;
                    font-size: 30px;
                    width: 32px;
                    text-indent: 0;
                    position: absolute;
                    left: 0;
                }


            main .people .people_gallery .slick-next {
                position: absolute;
                right: -40px;
                top: 47%;
                width: 32px;
                height: 32px;
                background: rgba(0, 0, 0, 0);
                display: inline-block;
                text-indent: -9999px;
                font: normal normal normal 14px/1 FontAwesome;
                z-index: 1;
            }

                main .people .people_gallery .slick-next::before {
                    content: "\f105";
                    color: #FFF;
                    font-size: 30px;
                    width: 32px;
                    text-indent: 0;
                    position: absolute;
                    left: 0;
                }

        main .people .people_info {
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            overflow: hidden;
            width: 100%;
            height: 1408px;
            background: rgba(0, 0, 0, 0.9);
            z-index: 2;
            animation: fadein 0.2s;
            -moz-animation: fadein 0.2s; /* Firefox */
            -webkit-animation: fadein 0.2s; /* Safari and Chrome */
            -o-animation: fadein 0.2s; /* Opera */
        }

            main .people .people_info a {
                float: right;
            }

                main .people .people_info a .close {
                    margin: 75px 66px 0 0;
                    background: url('/assets/pc/btn/btn_x.png') no-repeat;
                    width: 33px;
                    height: 34px;
                }

            main .people .people_info .info_container {
                text-align: center;
                margin-top: 305px;
            }

                main .people .people_info .info_container .job_container {
                    text-align: center;
                }

                    main .people .people_info .info_container .job_container .job {
                        font-weight: 800;
                        font-size: 18px;
                        line-height: 32px;
                        letter-spacing: 0.03em;
                        color: #FFFFFF;
                    }

                main .people .people_info .info_container .name_container {
                    margin-top: 16px;
                    text-align: center;
                }

                    main .people .people_info .info_container .name_container .name {
                        font-weight: 400;
                        font-size: 24px;
                        line-height: 32px;
                        letter-spacing: 0.03em;
                        color: #FFFFFF;
                    }

                main .people .people_info .info_container .contents_container {
                    margin-top: 64px;
                    text-align: center;
                }

                    main .people .people_info .info_container .contents_container li .head {
                        font-weight: 700;
                        font-size: 18px;
                        line-height: 24px;
                        letter-spacing: 0.03em;
                        color: #FFFFFF;
                    }

                    main .people .people_info .info_container .contents_container li .contents {
                        font-weight: 300;
                        font-size: 18px;
                        line-height: 24px;
                        letter-spacing: 0.03em;
                        color: #FFFFFF;
                        font-style: normal;
                        margin-left:10px;
                    }

    main .contact {
    }

        main .contact .contact_box {
            background-color: #fff;
            padding: 100px 0;
            text-align:center;
        }

            main .contact .contact_box .title_box {
                text-align: center;
                margin: 20px 0;
            }

                main .contact .contact_box .title_box .title {
                    font-weight: 800;
                    font-size: 18px;
                    line-height: 32px;
                    letter-spacing: 0.03em;
                    color: #000000;
                }

            main .contact .contact_box .map {
                background: url('/assets/common/map.png') no-repeat;
                background-size:cover;
                width: 800px;
                height: 454px;
                display: inline-block;
            }

            main .contact .contact_box .contents_box {
                text-align: center;
            }

                main .contact .contact_box .contents_box .contents {
                    font-weight: 300;
                    font-size: 18px;
                    line-height: 10px;
                    letter-spacing: 0.03em;
                    color: #000000;
                }

footer {
    margin: 120px auto !important;
    text-align: center;
}

    footer .logo {
        background: url('/assets/common/logo_mecca.png') no-repeat;
        width: 193px;
        height: 48px;
        display: inline-block;
        margin-bottom: 30px;
    }

    footer div {
        text-align: center;
    }

        footer div span {
            font-size: 14px;
            line-height: 30px;
            color: #fff;
        }



/* È­¸é ³Êºñ 0 ~ 1940px */
@media (max-width: 1940px) {
    nav, main, footer {
        width: 100%;
    }
}

/* È­¸é ³Êºñ 0 ~ 1440px */
@media (max-width: 1440px) {
    nav {
        text-align: center;
    }

        nav a .mobile_menu {
            display: initial;
        }

        nav .menu_container {
            position: absolute;
            width: 100%;
            height: 100%;
            left: -100%;
            top: 132px;
            background: #000;
            text-align: center;
            z-index: 2;
        }

            nav .menu_container .menu {
                width: auto;
                height: auto;
                margin-top: 120px;
                display: block;
                font-weight: 800;
                font-size: 40px;
                line-height: 55px;
            }

                nav .menu_container .menu:first-child {
                    margin-top: 270px;
                }

        nav a .logo {
            float: initial;
            width: 283px;
            display: inline-block;
            margin: 0 0 0 120px;
        }

        nav a .labs_container {
            margin: 3px 22px 0 0;
        }

    main .home .main_player iframe {
        width: 100%;
        height: 720px;
    }

    main .about .about_container {
        background: url('/assets/mobile/bg_about.png') no-repeat;
        height: 1280px;
    }

        main .about .about_container .title_block {
            padding-top: 216px;
        }

    main .work .work_main iframe {
        width: 100%;
        height: 358px;
    }

    main .work .work_tab .tab_box .tab {
        width: 105px;
        margin-right: 0;
    }

    main .work .work_container .container .row {
        margin: 0 20px;
    }

        main .work .work_container .container .row .col {
            margin-bottom: 90px;
        }

            main .work .work_container .container .row .col:nth-child(2n) {
                margin-left: 0;
            }

            main .work .work_container .container .row .col iframe {
                width: 90vw;
                height: 50vw;
                max-width: 678px;
                max-height: 376px;
            }

    main .people .people_info {
        height: 1654px;
    }

    main .people .people_gallery {
        margin: 0 0;
    }

    main .people .people_title {
        padding-top: 246px;
    }

    main .people .people_gallery .slick-prev {
        display: none;
        left: -9999px;
    }

    main .people .people_gallery .slick-next {
        display: none;
        left: -9999px;
    }

    main .people .people_info .info_container {
        margin-top: 462px;
    }

    main .contact .contact_box {
        padding: 133px 0;
    }

}