@media (min-width: 0px) and (max-width: 575px) {
    h1 {
        font-size: 30px;
        line-height: 40px;
    }
    h2 {
        font-size: 27px;
        line-height: 36px;
    }
    h3 {
        font-size: 24px;
        line-height: 32px;
    }
    h4 {
        font-size: 21px;
        line-height: 28px;
    }
    h5 {
        font-size: 18px;
        line-height: 24px;
    }
    h6 {
        font-size: 15px;
        line-height: 20px;
    }

    .container-fluid {
        padding: 0;
    }
    .row {
        margin: 0;
    }
    .nopadding {
        margin: 0 !important;
        padding: 0 !important;
    }
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
    .flex-pc {
        display: none !important;
    }
    .flex-sp {
        display: flex !important;
    }

    /*--------------- COMMON_START --------------*/
    #contain {
        margin: 0px;
        padding: 70px 0 0 0;
    }

    .main-banner-hp.top {
        height: calc(100vh - 70px);
    }
    .banner-middle-hp {
        flex-direction: column;
    }
    .banner-hexagon-hp {
        width: 140px;
        height: 110px;
        padding-top: 15px;
        margin: 0 0 40px 0;
    }
    .banner-hexagon-hp h5 {
        font-size: 18px;
    }
    .banner-right-hp {
        width: 100%;
    }
    .banner-right-hp img {
        width: 150px;
    }
    .banner-right-hp h3 {
        font-size: 24px;
        letter-spacing: 0;
    }
    .banner-right-hp h1 {
        font-size: 30px;
        letter-spacing: 0;
        margin-bottom: 20px;
    }
    
    .banner-product1 {
        left: 0;
        top: 150px;
        width: 200px;
    }
    .banner-product2 {
        left: 100px;
        bottom: 0;
        width: 200px;
    }
    .banner-product3 {
        left: auto;
        right: -100px;
        top: 0;
        width: 300px;
    }

    .oblique-line::before {
        display: none;
    }
    .oblique-line::after {
        display: none;
    }

    .common-btn-hp {
        width: 100%;
    }
    .common-blue-btn-hp {
        font-size: 20px;
        line-height: 25px;
    }
    
    .common-label-hp {
        font-size: 27px;
        line-height: 36px;
    }
    .common-small-label-hp {
        font-size: 18px;
        line-height: 24px;
    }
    /*--------------- COMMON_END --------------*/

    /*--------------- HEADER_START --------------*/
    #header {
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        position: fixed;
        top: 0;
        width: 100%;
    }
    .header-in-hp {
        padding: 0 20px;
        height: 70px;
        flex-direction: row;
        justify-content: space-between;
    }
    .logo-hp img {
        width: auto;
        height: 50px;
    }

    .mobile-menu-icon-hp {
        display: block;
        margin-top: 0px;
        margin-right: 0;
    }
    .menu-toggle-btn {
        margin: 15px auto 15px auto;
    }
    .navigation {
        position: fixed;
        left: 0;
        width: 100%;
        display: none;
        top: 70px;
        clear: both;
        height: calc(100% - 70px);
        overflow: hidden;
        padding-top: 20px;
        background-color: #fff;
    }
    .navbar {
        flex-direction: column;
        row-gap: 40px;
    }
    .navbar-collapse {
        background-color: transparent;
    }
    .navbar-nav {
        flex-direction: column;
    }
    .navbar-nav .nav-link {
        padding: 10px 27px !important;
        text-align: center;
    }
    .navbar-nav .dropdown-item {
        text-align: center;
    }
    .navbar-collapse {
        display: block !important;
    }
    .navbar-nav .nav-item {
        font-size: 14px;
    }
    .navbar-nav .nav-item.bottom {
        display: block;
    }
    .navbar-nav .dropdown-item {
        font-size: 14px;
    }
    .navbar-nav .nav-link:hover {
        color: #fff !important;
    }
    .navbar-nav .nav-link.contact-hp:hover {
        background: #fff;
        color: #2b2b2b !important;
    }
    .header-right-hp {
        width: 100%;
        flex-direction: column;
        row-gap: 7px;
        padding: 0 15px;
    }
    /*--------------- HEADER_END --------------*/

    /*--------------- INDEX_START --------------*/
    .menu-block-content-hp {
        padding: 20px 0;
    }
    .menu-middle-hp {
        flex-direction: column;
        row-gap: 20px;
    }
    
    .news-list-wrap-hp {
        padding: 0 40px;
    }
    .news-list-wrap-hp .swiper-button-prev {
        transform: translate(0, -50%);
    }
    .news-list-wrap-hp .swiper-button-next {
        transform: translate(0, -50%);
    }

    .function-image-hp {
        margin: 20px 0 80px 0;
    }

    .test-block-hp .common-title-hp {
        margin: 40px 0 20px 0;
    }
    .test-middle-hp {
        padding: 60px 0;
    }
    .test-bottom-hp {
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
    }
    .test-content-hp {
        flex-direction: column;
        align-items: center;
        row-gap: 80px;
    }
    .test-content-left-hp {
        width: 100%;
    }
    .test-image-list-wrap-hp {
        width: 100%;
    }
    .test-result-hp {
        width: 100%;
    }
    .test-result-item-hp h4 {
        width: 80px;
        font-size: 15px;
        line-height: 20px;
    }
    .test-result-item-right-hp {
        padding: 0 5px;
    }
    .test-result-item-hp h5 {
        padding: 0 10px;
        font-size: 12px;
        line-height: 15px;
    }
    .test-result-item-hp h3 {
        font-size: 15px;
        line-height: 20px;
    }
    .test-result-item-hp .decrease {
        font-size: 18px;
        line-height: 24px;
    }
    .test-virus-result-top-hp {
        font-size: 18px;
        line-height: 24px;
        padding: 15px;
    }
    .test-virus-result-bottom-hp {
        padding: 0 5px;
    }
    .test-virus-result-bottom-hp .label {
        font-size: 15px;
        line-height: 20px;
    }
    .test-virus-result-bottom-hp .time {
        padding: 10px;
        font-size: 12px;
        line-height: 15px;
    }
    .test-virus-result-bottom-hp .percent {
        font-size: 15px;
        line-height: 20px;
    }
    .test-virus-result-bottom-hp .decrease {
        font-size: 18px;
        line-height: 24px;
    }
    .place-block-hp {
        padding: 60px 0 120px 0;
    }
    .place-list-hp .row {
        row-gap: 20px;
    }
    .faq-item-hp .card-header::after {
        left: 15px;
    }
    .faq-item-hp .card-header a {
        padding: 15px 40px 15px 40px;
    }
    .faq-item-hp .card-header a::after {
        right: 15px;
    }
    .faq-item-hp .card-body::after {
        left: 15px;
    }
    .faq-item-hp .card-body p {
        padding: 15px 15px 15px 40px;
    }
    /*--------------- INDEX_END --------------*/

    /*--------------- MECHANISM_START --------------*/
    .breadcrumb-block-hp {
        padding: 5px 15px;
    }
    .movie-feature-hp .row {
        row-gap: 20px;
    }
    .feature-list-hp {
        padding: 0 0 0 34px;
    }
    .feature-item-hp h4 {
        font-size: 15px;
        line-height: 20px;
    }
    .function-desc-hp {
        column-gap: 20px;
    }
    .function-desc-hp h4 {
        width: 50%;
        font-size: 15px;
        line-height: 20px;
    }
    .material-photocatalyst-top-hp {
        flex-direction: column;
        row-gap: 20px;
    }
    .material-photocatalyst-top-hp h3 {
        font-size: 15px;
        line-height: 20px;
        text-align: center;
    }
    .photocatalyst-stage-hp {
        flex-direction: column;
        row-gap: 118px;
    }
    .photocatalyst-stage-item-hp {
        height: auto;
    }
    .photocatalyst-stage-item-hp::after {
        border-top: 58px solid #E6E6E6;
        border-left: 63px solid transparent;
        border-right: 63px solid transparent;
        right: 50%;
        top: 100%;
        transform: translate(50%, 30px);
    }
    .material-label-hp h5 {
        font-size: 12px;
        line-height: 16px;
    }
    .material-label-hp {
        column-gap: 20px;
    }
    .material-label-hp h3 {
        font-size: 15px;
        line-height: 20px;
    }
    .material-label-hp h3 span {
        font-size: 15px;
        line-height: 15px;
    }
    .material-label-hp h1 {
        font-size: 18px;
        line-height: 24px;
    }
    .silverion-effect-hp {
        width: calc(100% + 30px);
        position: relative;
        margin-bottom: 20px;
    }
    .silverion-effect-hp.sp {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .silverion-feature-hp .row {
        row-gap: 20px;
    }
    .synergy-image-hp {
        border: 5px solid #337AB7;
        border-radius: 15px;
        padding: 15px;
    }
    .synergy-respect-hp {
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
    }
    .place-list-hp .row {
        margin-left: -10px;
        margin-right: -10px;
    }
    .place-list-hp .row>div {
        padding-left: 10px;
        padding-right: 10px;
    }
    .performance-block-hp {
        padding: 70px 0 0 0;
    }
    .details-block-hp {
        padding: 0;
    }
    .details-item-hp {
        flex-direction: column;
        row-gap: 20px;
        padding: 60px 0;
    }
    .details-item-hp p {
        width: 100%;
    }
    .details-item-left-hp>div {
        border-radius: 10px;
        padding: 10px;
    }
    .details-color-hp .row {
        row-gap: 50px;
    }
    /*--------------- MECHANISM_END --------------*/

    /*--------------- ABOUT_START --------------*/
    .about-bottom-hp {
        flex-direction: column;
        row-gap: 20px;
    }
    /*--------------- ABOUT_END --------------*/

    /*--------------- CASES_START --------------*/
    .cases-top-hp {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 20px;
    }
    .case-list-hp .row {
        margin-left: -15px;
        margin-right: -15px;
    }
    /*--------------- CASES_END --------------*/

    /*--------------- TEST_START --------------*/
    .summary-bottom-hp {
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
    }
    .summary-bl-hp {
        width: 100%;
    }
    /*--------------- TEST_END --------------*/

    /*--------------- PRODUCTS_START --------------*/
    .product-item-hp {
        flex-direction: column;
    }
    .product-item-hp.reverse {
        flex-direction: column;
    }
    .product-item-content-hp {
        width: 100%;
        padding: 30px 0 60px 0;
        margin: 0;
        max-width: none;
    }
    .product-item-hp.reverse .product-item-content-hp {
        padding: 30px 0 60px 0;
        max-width: none;
        margin: 0;
    }
    .product-item-content-hp a {
        right: 15px;
        bottom: 15px;
    }
    .product-item-image-hp {
        width: 100%;
        padding: 20px 0;
    }
    .product-item-image-hp img {
        height: 200px;
    }
    /*--------------- PRODUCTS_END --------------*/

    /*--------------- PRODUCTS_FLUORESCENCE_START --------------*/
    .product-spec-top-hp {
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
    }
    .product-spec-tl-hp img {
        height: auto;
    }
    .product-spec-tr-hp {
        width: 100%;
    }
    .product-spec-tr-hp th {
        font-size: 18px;
        line-height: 24px;
    }
    .product-spec-tr-hp td {
        font-size: 15px;
        line-height: 20px;
    }
    .product-spec-bottom-hp .row {
        row-gap: 20px;
    }
    .product-download-hp .row {
        row-gap: 20px;
    }
    .product-install-hp {
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
    }
    .product-install-item-hp img {
        height: auto;
    }
    .product-angle-image-hp .row {
        row-gap: 20px;
    }
    .other-product-list-hp .row {
        row-gap: 20px;
    }
    .other-product-list-hp .row>div {
        padding: 0;
    }
    /*--------------- PRODUCTS_FLUORESCENCE_END --------------*/

    /*--------------- PRODUCTS_LIGHT_BULB_START --------------*/
    .product-easy-bottom-hp {
        flex-direction: column;
        row-gap: 20px;
    }
    .product-easy-bottom-hp img {
        max-width: 100%;
    }
    /*--------------- PRODUCTS_LIGHT_BULB_END --------------*/

    /*--------------- PRODUCTS_DOWNLIGHT_START --------------*/
    .product-work-image-hp {
        flex-direction: column;
        row-gap: 20px;
    }
    .product-category-list-hp .row {
        row-gap: 30px;
    }
    .product-category-item-hp {
        width: 140px;
        height: 140px;
    }
    .product-shape-list-hp .row {
        row-gap: 20px;
    }
    /*--------------- PRODUCTS_DOWNLIGHT_END --------------*/

    /*--------------- PRODUCTS_LAMP_START --------------*/
    /*--------------- PRODUCTS_LAMP_END --------------*/

    /*--------------- PRODUCTS_WATERPROOF_COVER_START --------------*/
    /*--------------- PRODUCTS_WATERPROOF_COVER_END --------------*/

    /*--------------- INSTALLATION_START --------------*/
    .method-link-list-hp .row {
        row-gap: 20px;
    }
    .method-link-list-hp .row>div {
        padding: 0;
    }
    .method-item-hp>img {
        margin: 0 0 30px 0;
        width: calc(100% - 30px);
    }
    .method-item-content-hp {
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
        padding: 30px 15px;
    }
    .method-item-image-hp img {
        height: auto;
    }
    /*--------------- INSTALLATION_END --------------*/

    /*--------------- PURCHASE_START --------------*/
    .purchase-block-hp {
        padding: 50px 0;
    }
    .purchase-method-list-hp .row {
        row-gap: 20px;
    }
    .purchase-middle-hp>.distributor-item-hp {
        margin: 0 0 50px 0;
    }
    .purchase-distributor-hp {
        border-radius: 15px;
        padding: 20px 15px;
    }
    .purchase-introduction-list-hp .row {
        row-gap: 20px;
    }
    .area-item-hp .card-header a {
        padding: 17px 0;
    }
    .area-item-hp .card-header a::after {
        right: 15px;
    }
    .area-item-hp .card-body {
        padding: 0;
    }
    .distributor-item-hp {
        padding: 15px 0;
    }
    /*--------------- PURCHASE_END --------------*/

    /*--------------- QA_START --------------*/
    .category-list-hp .row>div {
        padding: 0;
    }
    /*--------------- QA_END --------------*/

    /*--------------- GUARANTEE_START --------------*/
    /*--------------- GUARANTEE_END --------------*/

    /*--------------- INFORMATION_START --------------*/
    .information-block-hp {
        padding: 50px 0 0 0;
    }
    .information-top-hp {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 20px;
    }
    .tag-item-hp {
        padding: 0 10px;
    }
    .information-content-hp {
        flex-direction: column;
        row-gap: 80px;
    }
    .information-item-hp {
        padding: 27px 0;
        border-bottom: 4px dotted #0081BD;
        flex-direction: column;
        row-gap: 10px;
    }
    .information-item-hp>img {
        width: 100%;
        height: auto;
    }
    .pagination-hp {
        margin-top: 40px;
    }
    .information-content-right-hp {
        width: 100%;
    }
    /*--------------- INFORMATION_END --------------*/

    /*--------------- CONTACT_START --------------*/
    .inquiry-block-hp {
        padding: 40px 0;
    }
    .inquiry-middle-hp table {
        margin-bottom: 20px;
    }
    .inquiry-middle-hp tr {
        display: flex;
        flex-direction: column;
        row-gap: 10px;
    }
    .inquiry-middle-hp th {
        width: 100%;
    }
    .inquiry-privacy-hp {
        margin-bottom: 20px;
    }
    /*--------------- CONTACT_END --------------*/

    /*--------------- COMPANY_START --------------*/
    .company-middle-hp th {
        padding: 20px 20px 20px 0;
    }
    /*--------------- COMPANY_END --------------*/

    /*--------------- CASE_START --------------*/
    /*--------------- CASE_END --------------*/

    /*--------------- NEWS_START --------------*/
    /*--------------- NEWS_END --------------*/

    /*--------------- FOOTER_START --------------*/
    .contact-middle-hp>h3 {
        font-size: 24px;
        line-height: 30px;
    }
    .contact-quiz-list-hp {
        flex-direction: column;
        row-gap: 80px;
    }
    .contact-bottom-hp {
        flex-direction: column;
        row-gap: 20px;
    }
    .download-btn-main-hp .common-btn-hp {
        font-size: 18px;
        line-height: 24px;
    }
    .footer-middle-hp {
        flex-direction: column;
        align-items: center;
        row-gap: 40px;
        padding: 50px 0;
    }
    .footer-links-hp {
        width: 100%;
        justify-content: center;
    }
    .footer-links-hp ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .footer-links-hp ul li a {
        font-size: 12px;
        line-height: 16px;
    }
    .copyright-hp {
        height: auto;
    }
    .copyright-content-hp {
        flex-direction: column;
        row-gap: 20px;
        padding: 20px 0;
    }
    /*--------------- FOOTER_END --------------*/
}

@media (min-width: 576px) and (max-width: 767px) {
    h1 {
        font-size: 30px;
        line-height: 40px;
    }
    h2 {
        font-size: 27px;
        line-height: 36px;
    }
    h3 {
        font-size: 24px;
        line-height: 32px;
    }
    h4 {
        font-size: 21px;
        line-height: 28px;
    }
    h5 {
        font-size: 18px;
        line-height: 24px;
    }
    h6 {
        font-size: 15px;
        line-height: 20px;
    }

    .container-fluid {
        padding: 0;
    }
    .row {
        margin: 0;
    }
    .nopadding {
        margin: 0 !important;
        padding: 0 !important;
    }
    .pc {
        display: none;
    }
    .sp {
        display: block;
    }
    .flex-pc {
        display: none !important;
    }
    .flex-sp {
        display: flex !important;
    }

    /*--------------- COMMON_START --------------*/
    #contain {
        margin: 0px;
        padding: 70px 0 0 0;
    }

    .main-banner-hp.top {
        height: calc(100vh - 70px);
    }
    .banner-middle-hp {
        flex-direction: column;
    }
    .banner-hexagon-hp {
        width: 140px;
        height: 110px;
        padding-top: 15px;
        margin: 0 0 40px 0;
    }
    .banner-hexagon-hp h5 {
        font-size: 18px;
    }
    .banner-right-hp {
        width: 100%;
    }
    .banner-right-hp img {
        width: 150px;
    }
    .banner-right-hp h3 {
        font-size: 24px;
        letter-spacing: 0;
    }
    .banner-right-hp h1 {
        font-size: 30px;
        letter-spacing: 0;
        margin-bottom: 20px;
    }
    
    .banner-product1 {
        left: 0;
        top: 150px;
        width: 200px;
    }
    .banner-product2 {
        left: 100px;
        bottom: 0;
        width: 200px;
    }
    .banner-product3 {
        left: auto;
        right: -100px;
        top: 0;
        width: 300px;
    }

    .oblique-line::before {
        display: none;
    }
    .oblique-line::after {
        display: none;
    }

    .common-btn-hp {
        width: 100%;
    }
    .common-blue-btn-hp {
        font-size: 20px;
        line-height: 25px;
    }
    
    .common-label-hp {
        font-size: 27px;
        line-height: 36px;
    }
    .common-small-label-hp {
        font-size: 18px;
        line-height: 24px;
    }
    /*--------------- COMMON_END --------------*/

    /*--------------- HEADER_START --------------*/
    #header {
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        position: fixed;
        top: 0;
        width: 100%;
    }
    .header-in-hp {
        padding: 0 20px;
        height: 70px;
        flex-direction: row;
        justify-content: space-between;
    }
    .logo-hp img {
        width: auto;
        height: 50px;
    }

    .mobile-menu-icon-hp {
        display: block;
        margin-top: 0px;
        margin-right: 0;
    }
    .menu-toggle-btn {
        margin: 15px auto 15px auto;
    }
    .navigation {
        position: fixed;
        left: 0;
        width: 100%;
        display: none;
        top: 70px;
        clear: both;
        height: calc(100% - 70px);
        overflow: hidden;
        padding-top: 20px;
        background-color: #fff;
    }
    .navbar {
        flex-direction: column;
        row-gap: 40px;
    }
    .navbar-collapse {
        background-color: transparent;
    }
    .navbar-nav {
        flex-direction: column;
    }
    .navbar-nav .nav-link {
        padding: 10px 27px !important;
        text-align: center;
    }
    .navbar-nav .dropdown-item {
        text-align: center;
    }
    .navbar-collapse {
        display: block !important;
    }
    .navbar-nav .nav-item {
        font-size: 14px;
    }
    .navbar-nav .nav-item.bottom {
        display: block;
    }
    .navbar-nav .dropdown-item {
        font-size: 14px;
    }
    .navbar-nav .nav-link:hover {
        color: #fff !important;
    }
    .navbar-nav .nav-link.contact-hp:hover {
        background: #fff;
        color: #2b2b2b !important;
    }
    .header-right-hp {
        width: 100%;
        flex-direction: column;
        row-gap: 7px;
        padding: 0 15px;
    }
    /*--------------- HEADER_END --------------*/

    /*--------------- INDEX_START --------------*/
    .menu-block-content-hp {
        padding: 20px 0;
    }
    .menu-middle-hp {
        flex-direction: column;
        row-gap: 20px;
    }
    
    .news-list-wrap-hp {
        padding: 0 40px;
    }
    .news-list-wrap-hp .swiper-button-prev {
        transform: translate(0, -50%);
    }
    .news-list-wrap-hp .swiper-button-next {
        transform: translate(0, -50%);
    }

    .function-image-hp {
        margin: 20px 0 80px 0;
    }

    .test-block-hp .common-title-hp {
        margin: 40px 0 20px 0;
    }
    .test-middle-hp {
        padding: 60px 0;
    }
    .test-bottom-hp {
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
    }
    .test-content-hp {
        flex-direction: column;
        align-items: center;
        row-gap: 80px;
    }
    .test-content-left-hp {
        width: 100%;
    }
    .test-image-list-wrap-hp {
        width: 100%;
    }
    .test-result-hp {
        width: 100%;
    }
    .test-result-item-hp h4 {
        width: 80px;
        font-size: 15px;
        line-height: 20px;
    }
    .test-result-item-right-hp {
        padding: 0 5px;
    }
    .test-result-item-hp h5 {
        padding: 0 10px;
        font-size: 12px;
        line-height: 15px;
    }
    .test-result-item-hp h3 {
        font-size: 15px;
        line-height: 20px;
    }
    .test-result-item-hp .decrease {
        font-size: 18px;
        line-height: 24px;
    }
    .test-virus-result-top-hp {
        font-size: 18px;
        line-height: 24px;
        padding: 15px;
    }
    .test-virus-result-bottom-hp {
        padding: 0 5px;
    }
    .test-virus-result-bottom-hp .label {
        font-size: 15px;
        line-height: 20px;
    }
    .test-virus-result-bottom-hp .time {
        padding: 10px;
        font-size: 12px;
        line-height: 15px;
    }
    .test-virus-result-bottom-hp .percent {
        font-size: 15px;
        line-height: 20px;
    }
    .test-virus-result-bottom-hp .decrease {
        font-size: 18px;
        line-height: 24px;
    }
    .place-block-hp {
        padding: 60px 0 120px 0;
    }
    .place-list-hp .row {
        row-gap: 20px;
    }
    .faq-item-hp .card-header::after {
        left: 15px;
    }
    .faq-item-hp .card-header a {
        padding: 15px 40px 15px 40px;
    }
    .faq-item-hp .card-header a::after {
        right: 15px;
    }
    .faq-item-hp .card-body::after {
        left: 15px;
    }
    .faq-item-hp .card-body p {
        padding: 15px 15px 15px 40px;
    }
    /*--------------- INDEX_END --------------*/

    /*--------------- MECHANISM_START --------------*/
    .breadcrumb-block-hp {
        padding: 5px 15px;
    }
    .movie-feature-hp .row {
        row-gap: 20px;
    }
    .feature-list-hp {
        padding: 0 0 0 34px;
    }
    .feature-item-hp h4 {
        font-size: 15px;
        line-height: 20px;
    }
    .function-desc-hp {
        column-gap: 20px;
    }
    .function-desc-hp h4 {
        width: 50%;
        font-size: 15px;
        line-height: 20px;
    }
    .material-photocatalyst-top-hp {
        flex-direction: column;
        row-gap: 20px;
    }
    .material-photocatalyst-top-hp h3 {
        font-size: 15px;
        line-height: 20px;
        text-align: center;
    }
    .photocatalyst-stage-hp {
        flex-direction: column;
        row-gap: 118px;
    }
    .photocatalyst-stage-item-hp {
        height: auto;
    }
    .photocatalyst-stage-item-hp::after {
        border-top: 58px solid #E6E6E6;
        border-left: 63px solid transparent;
        border-right: 63px solid transparent;
        right: 50%;
        top: 100%;
        transform: translate(50%, 30px);
    }
    .material-label-hp h5 {
        font-size: 12px;
        line-height: 16px;
    }
    .material-label-hp {
        column-gap: 20px;
    }
    .material-label-hp h3 {
        font-size: 15px;
        line-height: 20px;
    }
    .material-label-hp h3 span {
        font-size: 15px;
        line-height: 15px;
    }
    .material-label-hp h1 {
        font-size: 18px;
        line-height: 24px;
    }
    .silverion-effect-hp {
        width: calc(100% + 30px);
        position: relative;
        margin-bottom: 20px;
    }
    .silverion-effect-hp.sp {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .silverion-feature-hp .row {
        row-gap: 20px;
    }
    .synergy-image-hp {
        border: 5px solid #337AB7;
        border-radius: 15px;
        padding: 15px;
    }
    .synergy-respect-hp {
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
    }
    .place-list-hp .row {
        margin-left: -10px;
        margin-right: -10px;
    }
    .place-list-hp .row>div {
        padding-left: 10px;
        padding-right: 10px;
    }
    .performance-block-hp {
        padding: 70px 0 0 0;
    }
    .details-block-hp {
        padding: 0;
    }
    .details-item-hp {
        flex-direction: column;
        row-gap: 20px;
        padding: 60px 0;
    }
    .details-item-hp p {
        width: 100%;
    }
    .details-item-left-hp>div {
        border-radius: 10px;
        padding: 10px;
    }
    .details-color-hp .row {
        row-gap: 50px;
    }
    /*--------------- MECHANISM_END --------------*/

    /*--------------- ABOUT_START --------------*/
    .about-bottom-hp {
        flex-direction: column;
        row-gap: 20px;
    }
    /*--------------- ABOUT_END --------------*/

    /*--------------- CASES_START --------------*/
    .cases-top-hp {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 20px;
    }
    .case-list-hp .row {
        margin-left: -15px;
        margin-right: -15px;
    }
    /*--------------- CASES_END --------------*/

    /*--------------- TEST_START --------------*/
    .summary-bottom-hp {
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
    }
    .summary-bl-hp {
        width: 100%;
    }
    /*--------------- TEST_END --------------*/

    /*--------------- PRODUCTS_START --------------*/
    .product-item-hp {
        flex-direction: column;
    }
    .product-item-hp.reverse {
        flex-direction: column;
    }
    .product-item-content-hp {
        width: 100%;
        padding: 30px 0 60px 0;
        margin: 0;
        max-width: none;
    }
    .product-item-hp.reverse .product-item-content-hp {
        padding: 30px 0 60px 0;
        max-width: none;
        margin: 0;
    }
    .product-item-content-hp a {
        right: 15px;
        bottom: 15px;
    }
    .product-item-image-hp {
        width: 100%;
        padding: 20px 0;
    }
    .product-item-image-hp img {
        height: 200px;
    }
    /*--------------- PRODUCTS_END --------------*/

    /*--------------- PRODUCTS_FLUORESCENCE_START --------------*/
    .product-spec-top-hp {
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
    }
    .product-spec-tl-hp img {
        height: auto;
    }
    .product-spec-tr-hp {
        width: 100%;
    }
    .product-spec-tr-hp th {
        font-size: 18px;
        line-height: 24px;
    }
    .product-spec-tr-hp td {
        font-size: 15px;
        line-height: 20px;
    }
    .product-spec-bottom-hp .row {
        row-gap: 20px;
    }
    .product-download-hp .row {
        row-gap: 20px;
    }
    .product-install-hp {
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
    }
    .product-install-item-hp img {
        height: auto;
    }
    .product-angle-image-hp .row {
        row-gap: 20px;
    }
    .other-product-list-hp .row {
        row-gap: 20px;
    }
    .other-product-list-hp .row>div {
        padding: 0;
    }
    /*--------------- PRODUCTS_FLUORESCENCE_END --------------*/

    /*--------------- PRODUCTS_LIGHT_BULB_START --------------*/
    .product-easy-bottom-hp {
        flex-direction: column;
        row-gap: 20px;
    }
    .product-easy-bottom-hp img {
        max-width: 100%;
    }
    /*--------------- PRODUCTS_LIGHT_BULB_END --------------*/

    /*--------------- PRODUCTS_DOWNLIGHT_START --------------*/
    .product-work-image-hp {
        flex-direction: column;
        row-gap: 20px;
    }
    .product-category-list-hp .row {
        row-gap: 30px;
    }
    .product-category-item-hp {
        width: 140px;
        height: 140px;
    }
    .product-shape-list-hp .row {
        row-gap: 20px;
    }
    /*--------------- PRODUCTS_DOWNLIGHT_END --------------*/

    /*--------------- PRODUCTS_LAMP_START --------------*/
    /*--------------- PRODUCTS_LAMP_END --------------*/

    /*--------------- PRODUCTS_WATERPROOF_COVER_START --------------*/
    /*--------------- PRODUCTS_WATERPROOF_COVER_END --------------*/

    /*--------------- INSTALLATION_START --------------*/
    .method-link-list-hp .row {
        row-gap: 20px;
    }
    .method-link-list-hp .row>div {
        padding: 0;
    }
    .method-item-hp>img {
        margin: 0 0 30px 0;
        width: calc(100% - 30px);
    }
    .method-item-content-hp {
        flex-direction: column;
        align-items: center;
        row-gap: 20px;
        padding: 30px 15px;
    }
    .method-item-image-hp img {
        height: auto;
    }
    /*--------------- INSTALLATION_END --------------*/

    /*--------------- PURCHASE_START --------------*/
    .purchase-block-hp {
        padding: 50px 0;
    }
    .purchase-method-list-hp .row {
        row-gap: 20px;
    }
    .purchase-middle-hp>.distributor-item-hp {
        margin: 0 0 50px 0;
    }
    .purchase-distributor-hp {
        border-radius: 15px;
        padding: 20px 15px;
    }
    .purchase-introduction-list-hp .row {
        row-gap: 20px;
    }
    .area-item-hp .card-header a {
        padding: 17px 0;
    }
    .area-item-hp .card-header a::after {
        right: 15px;
    }
    .area-item-hp .card-body {
        padding: 0;
    }
    .distributor-item-hp {
        padding: 15px 0;
    }
    /*--------------- PURCHASE_END --------------*/

    /*--------------- QA_START --------------*/
    .category-list-hp .row>div {
        padding: 0;
    }
    /*--------------- QA_END --------------*/

    /*--------------- GUARANTEE_START --------------*/
    /*--------------- GUARANTEE_END --------------*/

    /*--------------- INFORMATION_START --------------*/
    .information-block-hp {
        padding: 50px 0 0 0;
    }
    .information-top-hp {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 20px;
    }
    .tag-item-hp {
        padding: 0 10px;
    }
    .information-content-hp {
        flex-direction: column;
        row-gap: 80px;
    }
    .information-item-hp {
        padding: 27px 0;
        border-bottom: 4px dotted #0081BD;
        flex-direction: column;
        row-gap: 10px;
    }
    .information-item-hp>img {
        width: 100%;
        height: auto;
    }
    .pagination-hp {
        margin-top: 40px;
    }
    .information-content-right-hp {
        width: 100%;
    }
    /*--------------- INFORMATION_END --------------*/

    /*--------------- CONTACT_START --------------*/
    .inquiry-block-hp {
        padding: 40px 0;
    }
    .inquiry-middle-hp table {
        margin-bottom: 20px;
    }
    .inquiry-middle-hp tr {
        display: flex;
        flex-direction: column;
        row-gap: 10px;
    }
    .inquiry-middle-hp th {
        width: 100%;
    }
    .inquiry-privacy-hp {
        margin-bottom: 20px;
    }
    /*--------------- CONTACT_END --------------*/

    /*--------------- COMPANY_START --------------*/
    .company-middle-hp th {
        padding: 20px 20px 20px 0;
    }
    /*--------------- COMPANY_END --------------*/

    /*--------------- CASE_START --------------*/
    /*--------------- CASE_END --------------*/

    /*--------------- NEWS_START --------------*/
    /*--------------- NEWS_END --------------*/

    /*--------------- FOOTER_START --------------*/
    .contact-middle-hp>h3 {
        font-size: 24px;
        line-height: 30px;
    }
    .contact-quiz-list-hp {
        flex-direction: column;
        row-gap: 80px;
    }
    .contact-bottom-hp {
        flex-direction: column;
        row-gap: 20px;
    }
    .download-btn-main-hp .common-btn-hp {
        font-size: 18px;
        line-height: 24px;
    }
    .footer-middle-hp {
        flex-direction: column;
        align-items: center;
        row-gap: 40px;
        padding: 50px 0;
    }
    .footer-links-hp {
        width: 100%;
        justify-content: center;
    }
    .footer-links-hp ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .footer-links-hp ul li a {
        font-size: 12px;
        line-height: 16px;
    }
    .copyright-hp {
        height: auto;
    }
    .copyright-content-hp {
        flex-direction: column;
        row-gap: 20px;
        padding: 20px 0;
    }
    /*--------------- FOOTER_END --------------*/
}

@media (min-width: 768px) and (max-width: 991px) {
    /*--------------- COMMON_START --------------*/
    .container {
        padding: 0 30px 0 30px;
        max-width: 100%;
    }
    #contain {
        margin: 0px;
        padding: 70px 0 0 0;
    }

    .main-banner-hp {
        width: 100%;
        height: 200px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        background: url("../images/banner_bg.png") center center no-repeat;
        background-size: cover;
    }
    .main-banner-hp.flex-pc {
        display: none !important;
    }
    .main-banner-hp.flex-sp {
        display: flex !important;
    }
    .main-banner-center-hp {
    }
    .main-banner-center-hp::before {
        display: none;
    }
    .main-banner-center-hp::after {
        display: none;
    }
    /*--------------- COMMON_END --------------*/

    /*--------------- HEADER_START --------------*/
    #header {
        padding: 0px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        background-color: #fff;
        position: fixed;
        top: 0;
        width: 100%;
    }
    .header-in-hp {
        padding: 0 20px;
        height: 70px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .mobile-menu-icon-hp {
        display: block;
        margin-top: 0px;
        margin-right: 0;
    }
    .menu-toggle-btn {
        margin: 15px auto;
    }
    .navigation {
        position: fixed;
        left: 0;
        width: 100%;
        display: none;
        top: 70px;
        clear: both;
        height: calc(100% - 70px);
        overflow: hidden;
        padding-top: 20px;
        background-color: #fff;
    }
    .navbar {
        flex-direction: column;
        row-gap: 40px;
    }
    .navbar-collapse {
        background-color: transparent;
    }
    .navbar-nav {
        flex-direction: column;
    }
    .navbar-nav .nav-link {
        padding: 10px 27px !important;
        text-align: center;
    }
    .navbar-nav .nav-item.bottom {
        display: block;
    }
    .navbar-nav .dropdown-item {
        text-align: center;
    }
    .navbar-collapse {
        display: block !important;
    }
    .navbar-nav .nav-item {
        font-size: 14px;
    }
    .navbar-nav .dropdown-item {
        font-size: 14px;
    }
    .navbar-nav .nav-link:hover {
        color: #fff !important;
    }
    .navbar-nav .nav-link.contact-hp:hover {
        background: #fff;
        color: #2b2b2b !important;
    }

    .header-right-hp {
        row-gap: 10px;
        padding: 0;
    }
    /*--------------- HEADER_END --------------*/

    /*--------------- INDEX_START --------------*/
    .news-list-wrap-hp {
        padding: 0 40px;
    }
    .news-list-wrap-hp .swiper-button-prev {
        transform: translate(0, -50%);
    }
    .news-list-wrap-hp .swiper-button-next {
        transform: translate(0, -50%);
    }
    .test-result-item-hp h4 {
        width: 80px;
        font-size: 15px;
        line-height: 20px;
    }
    .test-result-item-right-hp {
        padding: 0 5px;
    }
    .test-result-item-hp h5 {
        padding: 0 10px;
        font-size: 12px;
        line-height: 15px;
    }
    .test-result-item-hp h3 {
        font-size: 15px;
        line-height: 20px;
    }
    .test-result-item-hp .decrease {
        font-size: 18px;
        line-height: 24px;
    }
    .test-virus-result-bottom-hp {
        padding: 0 5px;
    }
    .test-virus-result-bottom-hp .label {
        font-size: 15px;
        line-height: 20px;
    }
    .test-virus-result-bottom-hp .time {
        padding: 10px;
        font-size: 12px;
        line-height: 15px;
    }
    .test-virus-result-bottom-hp .percent {
        font-size: 15px;
        line-height: 20px;
    }
    .test-virus-result-bottom-hp .decrease {
        font-size: 18px;
        line-height: 24px;
    }
    /*--------------- INDEX_END --------------*/

    /*--------------- FOOTER_START --------------*/
    .footer-middle-hp {
        flex-direction: column;
        align-items: center;
        row-gap: 40px;
        padding: 50px 0;
    }
    .footer-links-hp ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .copyright-hp {
        height: auto;
    }
    .copyright-content-hp {
        flex-direction: column;
        row-gap: 20px;
        padding: 20px 0;
    }
    /*--------------- FOOTER_END --------------*/
}

@media (min-width: 992px) and (max-width: 1200px) {
    /*--------------- HEADER_START --------------*/
    .navigation {
        display: none !important;
    }
    /*--------------- HEADER_END --------------*/

    /*--------------- INDEX_START --------------*/
    .news-list-wrap-hp {
        padding: 0 40px;
    }
    .news-list-wrap-hp .swiper-button-prev {
        transform: translate(0, -50%);
    }
    .news-list-wrap-hp .swiper-button-next {
        transform: translate(0, -50%);
    }
    /*--------------- INDEX_END --------------*/
}

@media (min-width: 992px) and (max-width: 9999px) {
    .navigation {
        display: block;
    }
    .navbar-nav .dropdown:hover .dropdown-menu {
        display: block;
    }
}