/* landscape */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
    #header .list-inline {
        margin-right: 50px;
    }
    #header .list-inline-item {
        margin-right: 0.5rem;
    }
    .q-tab .nav-tabs .nav-link {
        margin-right: 0px;
        font-size: 13px;
    }
    .ir-kit {
        width: 58px;
    }
    .pdf-dld-box li span {
        width: 60%;
    }
    .reports .home-sec4-text {
        font-size: 19px;
    }
}


/* pixcel */

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


/*portrait*/

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
    .key-slider-left, .key-slider-right {
    width: 30px;
    height: 30px;
}
    .ir-kit-menu-container {
        width: 100%;
        right: -100vh;
        margin-top: 0px;
    }
    .subtitle {
        font-size: 30px;
        margin-bottom: 15px;
        line-height: 33px;
    }
    .blue-headline {
        font-size: 17px;
    }
    #header {
        padding-top: 30px;
    }
    .banner-top {
        padding-top: 80px;
    }
    .logo img {
        padding-left: 20px;
    }
    .overlay {
        width: 100%
    }
    .overlay .overlay-menu {
        top: 40%;
    }
    .ham {
        right: 40px;
        top: 12px;
    }
    .ham-kit {
        right: 110px;
    }
    #header.fixed {
        padding-bottom: 0px;
    }
    .q-tab .nav-tabs .nav-link {
        margin-right: 0px;
        font-size: 13px;
    }
    .pdf-dld-box li span {
        width: 60%;
    }
    .reports .home-sec4-text {
        font-size: 21px;
    }
}


/* Ipad Pro Portrait */

@media only screen and (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .callout-main p {
        font-size: 17px;
    }
    .mfg-bg {
        height: auto;
    }
    .sdg .para-text {
        font-size: 12px;
    }
    .people-bg .maintitle,
    .comm-bg .maintitle,
    .env-bg .maintitle {
        font-size: 30px;
    }
    .people-bg .subtitle,
    .comm-bg .subtitle,
    .env-bg .subtitle {
        font-size: 40px;
        line-height: 44px;
    }
    #header {
        padding-top: 30px;
    }
    .overlay {
        width: 100%
    }
    .overlay .overlay-menu {
        top: 30%;
    }
    .ham {
        top: 0px;
        right: 20px;
    }
    #header .list-inline {
        margin-right: 50px;
    }
    #header .list-inline-item {
        margin-right: 0.5rem;
    }
    #header.fixed {
        padding-bottom: 14px;
    }
    .ir-kit {
        width: 58px;
    }
    .q-tab .nav-tabs .nav-link {
        margin-right: 0px;
        font-size: 13px;
    }
}


/* Small */

@media (min-width: 481px) and (max-width: 767px) {
    .ir-kit-menu-container {
        width: 100%;
        right: -100vh;
        margin-top: 0px;
    }
    .maintitle {
        font-size: 18px;
    }
    .subtitle {
        font-size: 25px;
        margin-bottom: 15px;
        line-height: 29px;
    }
    .blue-headline {
        font-size: 18px;
    }
    .bod-years .para-text {
        font-size: 15px;
    }
    #header {
        padding-top: 30px;
    }
    .banner-top {
        padding-top: 100px;
    }
    .chart2 span:before {
        width: 72px;
        font-size: 10px;
    }
    .chart3 span:before {
        width: 72px;
        font-size: 10px;
    }
    .common-container,
    .common-container {
        width: 95%;
    }
    .logo img {
        padding-left: 0px;
    }
    .overlay {
        width: 100%
    }
    .ham {
        top: 12px;
        right: 70px;
    }
    .banner-title {
        font-size: 25px;
    }
    #header.fixed {
        padding-bottom: 0px;
    }
    .ir-kit {
        width: 65px;
    }
    .q-tab .nav-tabs .nav-link {
        margin-right: 0px;
        font-size: 13px;
    }
}


/* Extra small */

@media (min-width: 320px) and (max-width: 480px) {
    .ir-kit-menu-container {
        width: 100%;
        right: -100vh;
        margin-top: 0px;
    }
    .maintitle {
        font-size: 18px;
    }
    .subtitle {
        font-size: 25px;
        margin-bottom: 15px;
        line-height: 29px;
    }
    .blue-headline {
        font-size: 18px;
    }
    .bod-years .blue-headline {
        font-size: 16px;
    }
    .bod-years .para-text {
        font-size: 15px;
    }
    #header {
        padding-top: 30px;
    }
    .banner-top {
        padding-top: 100px;
    }
    .chart2 span:before {
        width: 72px;
        font-size: 10px;
    }
    .chart3 span:before {
        width: 72px;
        font-size: 10px;
    }
    .common-container,
    .common-container {
        width: 95%;
    }
    .logo img {
        padding-left: 0px;
    }
    .overlay {
        width: 100%
    }
    .overlay .overlay-menu {
        top: 55%;
    }
    .shareholder-col-left {
        padding: 30px 15px;
    }
    .shareholder-col-right {
        padding: 30px 15px;
    }
    .ham {
        top: 18px;
    }
    .ham-kit {
        right: 70px;
    }
    .banner-title {
        font-size: 25px;
    }
    #header.fixed {
        padding-bottom: 0px;
    }
    .ir-kit {
        width: 65px;
    }
    .q-tab .nav-tabs .nav-link {
        margin-right: 0px;
        font-size: 13px;
    }
    .reports .home-sec4-text {
        font-size: 13px;
    }
    .reports .fy-year,
    .fy-year:focus {
        font-size: 14px;
    }
    .nav-tabs .nav-link {
        display: block;
        font-size: 12px;
    }
}

@media (max-width: 320px) {
    .maintitle {
        font-size: 18px;
    }
    .subtitle {
        font-size: 25px;
        margin-bottom: 15px;
        line-height: 29px;
    }
    .blue-headline {
        font-size: 18px;
    }
    #header {
        padding-top: 30px;
    }
    .logo img {
        padding-left: 0px;
    }
    .overlay {
        width: 100%
    }
    .overlay .overlay-menu {
        top: 55%;
    }
    .shareholder-col-left {
        padding: 30px 15px;
    }
    .shareholder-col-right {
        padding: 30px 15px;
    }
    .ham {
        top: 17px;
    }
    .ham-kit {
        right: 70px;
    }
    .banner-title {
        font-size: 25px;
    }
    #header.fixed {
        padding-bottom: 0px;
    }
    .ir-kit {
        width: 65px;
    }
    .q-tab .nav-tabs .nav-link {
        margin-right: 0px;
        font-size: 13px;
    }
    .reports .home-sec4-text {
        font-size: 13px;
    }
    .reports .fy-year,
    .fy-year:focus {
        font-size: 14px;
    }
}

@media (min-width: 320px) and (max-width: 767px) {
    /*nav */
    .ham-kit {
        right: 70px;
    }
    /*about */

    .about-title {
    font-size: 22px;
    line-height: 30px;
}
    .core-title {
        text-align: center;
    }
    .panel-body .panel-box {
        padding-right: 10px;
    }
    .strategy .box {
        padding-right: 10px;
    }
    /*faq tab*/
    .faq-tab .nav-tabs a.nav-link {
        font-size: 9px;
    }
    .faq-tab .nav-tabs .nav-link {
        margin-right: 0px;
        padding: 10px;
    }
    .black-pro,
    .blue-light-pro,
    .blue-pro,
    .white-pro {
        height: 330px;
    }
    .black-pro p,
    .blue-light-pro p,
    .blue-pro p,
    .white-pro p {
        margin-top: 0px;
        margin-left: 0px;
        size: 15px;
    }
    .black-pro:hover span,
    .blue-light-pro:hover span,
    .blue-pro:hover span,
    .white-pro:hover span {
        font-size: 12px;
    }
    /*footer */
    .ftr-lhs span,
    .ftr-lhs a {
        margin-right: 10px;
    }
    #footer .social-icon {
        padding-left: 0px;
    }
    #footer .foot-link {
        color: #7e7e7e;
    }
}