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

@media (max-width: 800px) {

    /*** BEGIN MAIN STRUCTURE CSS SETTING ***/
    #wrapper {
        width: 100%;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    #main_nav_btn_area {
        border-radius: 0;
    }
        #main_nav_btn_area li {
            width: 16.45%;
        }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- CONTAINER CSS SETTING ***/
    
    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer ul.copyright_info {
        width: 53%;
    }
    
    /*** BEGIN HOME CSS SETTING ***/
    #main_visual {
        width: 99.2%;
        margin: 0 auto;
        border: #FFF 3px solid;
        border-radius: 0;
    }
    #corp_intro_area {
        width: 47.45%;
        height: auto;
        margin: 1.102%;
    }
    #index_sub_content_area {
        width: 43.16%;
        margin: 1.102% 1.102% 1.102% 0;
    }
        #index_sub_content_area li.index_product_intro {
            width: 32.1%;
            margin: 0 0.64% 0 0;
        }
            .index_product_desc {
                font-size: 0.813em;
            }
    /*** BEGIN HOME ENG CSS SETTING ***/
    #corp_intro_area_eng {
        width: 93.5%;
    }
    #index_sub_content_area_eng {
        width: 45%;
        margin: 0.862% 0.75% 0.862% 1.35%;
    }
        #index_sub_content_area_eng li.index_product_intro {
            width: 31.92%;
        }

    /*** BEGIN PRODUCT CSS SETTING ***/
    #content_page_main_banner {
        margin-top: 0;
        border-radius: 0;
    }
    #sub_menu_area {
        width: 24.105%;
        margin-left: 1.292%;
    }
    #main_content {
        width: 72%;
        margin-right: 1.292%;
    }
        .prod_title {
            width: 13.5%;
        }
        .prod_pic {
            width: 52%;
        }

    /*** BEGIN CLIP CSS SETTING ***/
    .clip_thumb {
        width: 100%;
        border: none;
    }
        .clip_thumb iframe {
            width: 96% !important;
        }
    .clip_title {
        width: 95%;
        letter-spacing: 0.2em;
        border: none;
    }

    /*** BEGIN HOME ENG CSS SETTING ***/
    #index_sub_content_area_eng li.index_product_intro {
        width: 31.75%;
    }
    
}

@media (max-width: 720px) {
    
    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    #main_nav_btn_area li {
        width: 16.35%;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer ul.copyright_info {
        width: 55%;
    }

    /*** BEGIN HOME CSS SETTING ***/
    #index_sub_content_area li.index_product_intro {
        width: 32%;
    }
    
}

@media (max-width: 640px) {

    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer ul.copyright_info {
        width: 61%;
    }

    /*** BEGIN HOME CSS SETTING ***/
    #corp_intro_area {
        width: 95%;
    }
    #index_sub_content_area {
        width: 45.1%;
    }

    /*** BEGIN HOME ENG CSS SETTING ***/
    #index_sub_content_area_eng {
        width: 44.5%;
        margin: 0.862% 0.6% 0.862% 1.35%;
    }
        #index_sub_content_area_eng li.index_product_intro {
            width: 31.5%;
        }

    /*** BEGIN PRODUCT CSS SETTING ***/
    #sub_menu_area li.corp_intro_text {
        width: 88%;
    }
    #sub_menu_area li.more {
        width: 88%;
    }
    .prod_title {
        width: 14.5%;
    }
    .prod_pic {
        width: 50%;
    }
    
}

@media (max-width: 480px) {

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    #main_nav_btn_area li {
        width: 16.25%;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer ul.copyright_info {
        width: 81%;
    }

    /*** BEGIN HOME CSS SETTING ***/
    #main_visual {
        width: 98.8%;
        height: 358px;
    }
    #corp_intro_area {
        float: none;
        display: block;
        width: 93.5%;
        margin: 2.25% auto;
    }
    #index_sub_content_area {
        float: none;
        display: block;
        width: 93.5%;
        margin: 2.25% auto;
    }

    /*** BEGIN HOME ENG CSS SETTING ***/
    #index_sub_content_area_eng {
        float: none;
        display: block;
        width: 93%;
        margin: 0.862% auto;
    }

    /*** BEGIN PRODUCT CSS SETTING ***/
    #sub_menu_area {
        display: none;
    }
    #main_content {
        float: none;
        display: block;
        width: 96.5%;
        margin: 2.75% auto 1.936%;
    }
    
}

@media (max-width: 414px) {
    
    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer ul.copyright_info {
        width: 94%;
    }

    /*** BEGIN HOME CSS SETTING ***/
    #main_visual {
        width: 98.8%;
        height: 307px;
    }
    #corp_intro_area {
        width: 92%;
    }
    #index_sub_content_area {
        width: 92%;
    }
    
}

@media (max-width: 375px) {
    
    /*** BEGIN MAIN STRUCTURE CSS SETTING ***/
    #header {
        height: auto;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    .mobile-menu-btn {
        display: inline-block;
        float: right;
        width: 6%;
        overflow: hidden;
        margin: 10.5% 5% 0 0;
        padding: 0;
    }
    #logo {
        width: 110px;
        margin: 6px 0 8px 16px;
    }
    #language_area {
        display: none;
    }
    #main_nav_btn_area {
        display: none;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- CONTENT PAGE CSS SETTING ***/
    #content_page_main_banner {
        width: 98.5%;
        height: auto;
        border: #FFF 3px solid;
    }
        #content_page_main_banner img {
            width: 200%;
        }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer li.copyright_info_text {
        float: none;
        display: block;
        margin: 0.6% auto 0
    }
    #footer li.fb_like {
        float: none;
        display: block;
        margin: 5% auto 0
    }

    /*** BEGIN HOME CSS SETTING ***/
    #main_visual {
        width: 98.5%;
        height: 278px;
    }
        
}

@media (max-width: 360px) {
    
    /*** BEGIN HOME CSS SETTING ***/
    #main_visual {
        width: 98.2%;
        height: 265px;
    }

}

@media (max-width: 320px) {

    /*** BEGIN HOME CSS SETTING ***/
    #main_visual {
        height: 235px;
    }
    
}