/***
 *** RESPONSIVE CSS Document
 ***
 ***/

@media (max-width: 1024px) {

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    #header {
        width: 92%;
    }
        #logo {
            margin-left: 1%;
        }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- CONTAINER CSS SETTING ***/
    #container {
        width: 92%;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer {
        width: 92%;
    }

    /*** BEGIN HOME CSS SETTING ***/
    #main_visaul_area {
        width: 100%;
        height: auto;
    }

    /*** BEGIN PRODUCT INTRO CSS SETTING ***/
    #left_column {
        float: left;
        display: inline-block;
        width: 21.762%;
        overflow: hidden;
        margin: 1.912% 0 0 1.063%;
    }
    #right_column {
        width: 61.78%;
    }

}

@media (max-width: 960px) {

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    #nav_area {
        margin-top: 6.85%;
    }

    /*** BEGIN PRODUCT INTRO CSS SETTING ***/
    #right_column {
        width: 63.78%;
    }

}

@media (max-width: 800px) {

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    #nav_area {
        margin-top: 7.85%;
    }

    /*** BEGIN HOME CSS SETTING ***/
    #corp_intro_area {
        width: 57%;
    }
        #corp_intro_area li.title {
            width: 92.5%;
            padding: 1px 0 0 7.5%;
        }

    /*** BEGIN PRODUCT INTRO CSS SETTING ***/
    #right_column {
        width: 66.8%;
        margin: 18px 0 0 0;
    }
    
}

@media (max-width: 720px) {
    
    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    #nav_area {
        margin-top: 8.85%;
    }

    /*** BEGIN HOME CSS SETTING ***/
    #corp_intro_area {
        width: 53.5%;
    }
        #corp_intro_area li.title {
            width: 90.5%;
            padding: 1px 0 0 9.5%;
        }

    /*** BEGIN PRODUCT INTRO CSS SETTING ***/
    #left_column {
        width: 25.5%;
    }
    
}

@media (max-width: 640px) {

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    #nav_area {
        margin-top: 10.25%;
    }
        #nav_area li {
            font-size: 1.15rem;
        }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #info_01 {
        font-size: 1rem;
    }
    #info_02 {
        font-size: 0.813rem;
    }

    /*** BEGIN HOME CSS SETTING ***/
    #corp_intro_area {
        width: 50%;
    }
        #corp_intro_area li.title {
            width: 88.5%;
            padding: 1px 0 0 11.5%;
        }
        #corp_intro_area li.content {
            font-size: 0.875rem;
            line-height: 180%;
        }
    #contact_info_area {
        width: 42%;
        margin: 18px 3% 0 0;
    }
        #contact_info_area li {
            font-size: 0.875rem;
        }
        #map {
            width: 100%;
        }

    /*** BEGIN PRODUCT INTRO CSS SETTING ***/
    #left_column {
        margin-left: 0;
        padding-left: 2%;
    }
        #left_column li.title {
            font-size: 0.938rem;
        }

    /*** BEGIN WORKS CSS SETTING ***/
    #corp_intro_area li.li-work-list {
        width: 50%;
        font-size: 0.875rem;
    }
    
}

@media (max-width: 480px) {

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    #header {
        height: auto;
    }
        .mobile-menu-btn {
            display: block;
        }
        #logo {
            width: 42%;
            height: auto;
            margin: 5.21% 0 3.4% 1%;
        }
        #nav_area {
            display: none;
        }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- CONTAINER CSS SETTING ***/
    #container {
        margin-bottom: 3%;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer_info {
        float: none;
        display: block;
        margin: 4.077% auto 0;
        padding: 0 1.25%;
    }
    #footer_logo {
        display: none;
    }

    /*** BEGIN HOME CSS SETTING ***/
    #main_visaul_area {
        margin: 0 auto 8%;
    }
    #corp_intro_area {
        float: none;
        display: block;
        width: 100%;
        margin: 2.046% auto 0;
    }
        #corp_intro_area li.title {
            width: 92.5%;
            padding: 1px 0 0 7.5%;
        }
        #corp_intro_area li.content {
            width: 98%;
            margin: 2% auto;
        }
    #contact_info_area {
        display: none;
    }

    /*** BEGIN PRODUCT INTRO CSS SETTING ***/
    #left_column {
        display: none;
    }
    #right_column {
        float: none;
        display: block;
        width: 100%;
        margin: 4.077% auto 0;
        padding: 0;
        border: none;
    }
        .product_intro_pic {
            width: 100%;
        }
        table.product_intro {
            width: 100%;
        }
        table.product_series {
            width: 100%;
        }
        #customize_memo {
            font-size: 0.813rem;
        }

}

@media (max-width: 414px) {

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    .mobile-menu-btn {
        margin-top: 6.85%;
    }
    
    /*** BEGIN GLOBAL SETUP CSS SETTING ***/
    body {
        background-size: 0.7%;
    }

    /*** BEGIN HOME CSS SETTING ***/
    #corp_intro_area {
        width: 96%;
    }
        #corp_intro_area li.title {
            font-weight: 400;
            padding-left: 9.5%;
        }
        #corp_intro_area li.content {
            width: 100%;
        }

    /*** BEGIN PRODUCT INTRO CSS SETTING ***/
    #right_column li.title {
        font-weight: 400;
        padding-left: 9.5%;
    }
    
}

@media (max-width: 375px) {
    
}

@media (max-width: 360px) {
    
}

@media (max-width: 320px) {
    
}