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

@media (max-width: 800px) {

    /*** BEGIN TEMPLATE MAIN COMPONENT -- CONTAINER CSS SETTING ***/
    .page-title {
        width: 97.5%;
    }
    .page-title-deco-pic {
        width: 82%;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer ul.ul-corp-logo-area {
        width: 30%;
    }

    /*** BEGIN HOME CSS SETTING ***/
    #corp-intro-area .cia-left-block {
        width: 36%;
        margin: 4.3% 0 0 1%;
    }
    
}

@media (max-width: 720px) {

    /*** BEGIN TEMPLATE MAIN COMPONENT -- CONTAINER CSS SETTING ***/
    .page-title-deco-pic {
        width: 80%;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer ul.ul-corp-logo-area {
        width: 32%;
    }
    #footer ul.ul-corp-info-area {
        width: 51%;
    }

    /*** BEGIN HOME CSS SETTING ***/
    #corp-intro-area .cia-left-block {
        width: 39%;
        margin: 5.6% 0 0 1%;
    }
    .home-h2-deco {
        width: 73%;
    }

    /*** BEGIN CONTACT CSS SETTING ***/
    .contact-pt-rwd {
        width: 90.5%;
    }
    .contact-ptdc-rwd {
        width: 78%;
    }
    
}

@media (max-width: 640px) {

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    #logo-area {
        width: 13%;
    }
    #main-nav-area {
        margin: 5% 0 0;
    }
        #main-nav-area li {
            font-size: 0.938rem;
        }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- CONTAINER CSS SETTING ***/
    .page-title-deco-pic {
        width: 78%;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer ul.ul-corp-logo-area {
        width: 35%;
    }
    #footer ul.ul-corp-info-area {
        width: 60%;
    }
    #footer ul.ul-corp-line-area {
        display: none;
    }

    /*** BEGIN HOME CSS SETTING ***/
    #corp-intro-area .cia-left-block {
        width: 39%;
        margin: 7.6% 0 0 1%;
    }
    .home-h2-deco {
        width: 70%;
    }
    #corp-intro-area p {
        font-size: 0.875rem;
        line-height: 180%;
    }

    /*** BEGIN CONTACT CSS SETTING ***/
    .contact-ptdc-rwd {
        width: 77%;
    }
    
}

@media (max-width: 480px) {

    /*** BEGIN GLOBAL CSS SETTING ***/
    .mobile-menu-close {
        float: right;
        width: 3.5%;
        overflow: hidden;
        margin: 0 7.25% 0 0;
        padding: 0;
    }
        .mobile-menu-close img {
            width: 100%;
        }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    .mobile-menu-btn {
        display: inline-block;
        float: left;
        width: 5%;
        overflow: hidden;
        margin: 4.5% 0 0 3%;
        padding: 0;
    }
    #logo-area {
        width: 16%;
        margin: 1.85% 0 1.15% 2.35%;
    }
    #main-nav-area {
        display: none;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- CONTAINER CSS SETTING ***/
    .page-title {
        width: 92%;
        font-size: 1.35rem;
        letter-spacing: 0.15rem;
    }
    .page-title-deco-pic {
        width: 75%;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer ul.ul-corp-logo-area {
        display: none;
    }
    #footer ul.ul-corp-info-area {
        float: none;
        display: block;
        width: 92%;
        margin: 5.75% auto;
    }

    /*** BEGIN HOME CSS SETTING ***/
    #corp-intro-area .cia-left-block {
        display: none;
    }
    #corp-intro-area .cia-right-block {
        float: none;
        display: block;
        width: 92%;
        margin: 0 auto;
    }
    .home-h2-deco {
        width: 75%;
    }
    #main-service-item-area {
        width: 94%;
    }

    /*** BEGIN PRODUCT CSS SETTING ***/
    #prod-item-area {
        width: 94%;
    }

    /*** BEGIN PRODUCT INTRO CSS SETTING ***/
    .pdf-download {
        float: none;
        width: 100%;
        text-align: left;
        margin: 5% 0 0;
    }
        .pdf-download .material-icons {
            margin-right: 0 !important;
        }
    #prod-intro-area {
        width: 94%;
    }
    
}

@media (max-width: 414px) {

    /*** BEGIN TEMPLATE MAIN COMPONENT -- CONTAINER CSS SETTING ***/
    .page-title {
        font-size: 1.25rem;
    }
    .page-title-deco-pic {
        width: 72%;
    }

    /*** BEGIN HOME CSS SETTING ***/
    .home-h2-deco {
        width: 72%;
    }

    /*** BEGIN PRODUCT CSS SETTING ***/
    #prod-item-area {
        width: 92%;
        padding: 2.5% 0 5%;
    }
        #prod-item-area ul {
            float: none;
            display: block;
            width: 100%;
            height: 115px;
            margin: 0 auto 5%;
        }
            #prod-item-area li img {
                float: left;
                width: 45%;
                margin-right: 3%;
                vertical-align: middle;
            }
            #prod-item-area li .prod-item-text {
                float: left;
                width: 48%;
                font-size: 0.938rem;
                font-weight: 500;
                text-align: left;
                margin: 10% 0 0;
            }

    /*** BEGIN PRODUCT INTRO CSS SETTING ***/
    .pdf-download {
        font-size: 0.875rem;
    }
    #prod-intro-area li .prod-name-text {
        font-size: 0.875rem;
    }

    #prod-intro-area {
        width: 92%;
        padding: 2.5% 0 5%;
    }
        #prod-intro-area ul {
            float: none;
            display: block;
            width: 100%;
            margin: 0 auto 5%;
        }
            #prod-intro-area li img {
                float: left;
                width: 45%;
                margin-right: 3%;
                vertical-align: middle;
            }
            #prod-intro-area li .prod-name-text {
                float: left;
                width: 48%;
                font-size: 0.938rem;
                font-weight: 500;
                text-align: left;
                margin: 12% 0 0;
            }

}

@media (max-width: 375px) {

    /*** BEGIN TEMPLATE MAIN COMPONENT -- FOOTER CSS SETTING ***/
    #footer-copyright {
        font-size: 0.813rem;
    }
    
    /*** BEGIN HOME CSS SETTING ***/
    .home-h2-deco {
        width: 70%;
    }
    
}

@media (max-width: 360px) {

    /*** BEGIN TEMPLATE MAIN COMPONENT -- HEADER CSS SETTING ***/
    #logo-area {
        width: 22%;
    }

    /*** BEGIN TEMPLATE MAIN COMPONENT -- CONTAINER CSS SETTING ***/
    .page-title-deco-pic {
        width: 70%;
    }

    /*** BEGIN HOME CSS SETTING ***/
    .home-h2-deco {
        width: 69%;
    }
    
}

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