﻿@media screen and (max-width: 769px) {
    #header > ul.box {
        height: 70px;
    }
        #header > ul.box > li.logo {
            height: 70px;
            padding: 0 10px;
        }
            #header > ul.box > li.logo img {
                max-height: 40px;
            }
        #header > ul.box > li.nav {
            padding: 0;
        }
            #header > ul.box > li.nav > span.tool {
                display: none;
            }
            #header > ul.box > li.nav > i {
                display: block;
                position: absolute;
                top: 15px;
                right: 10px;
                width: 40px;
                height: 40px;
                color: #FFFFFF;
                text-align: center;
                line-height: 40px;
                font-size: 20px;
                border: 1px solid rgba(255,255,255,0.2);
                border-radius: 3px;
                background: rgba(255,255,255,0.1);
            }
            #header > ul.box > li.nav > ul.menu {
                position: fixed;
                top: 70px;
                left: 0;
                width: 100%;
                height: 100%;
                display: none;
                z-index: 99999;
                background: rgba(0,0,0,0.1);
            }
                #header > ul.box > li.nav > ul.menu > li {
                    text-align: left;
                    background: #FFFFFF;
                    border-top: 1px solid #E9E9E9;
                    box-sizing: border-box;
                }
                    #header > ul.box > li.nav > ul.menu > li.m {
                        display: block;
                    }
                    #header > ul.box > li.nav > ul.menu > li > a {
                        color: #333333;
                        font-size: 16px;
                        display: block;
                        height: 46px;
                        line-height: 46px;
                        border-bottom: none;
                        padding: 2px 20px 0 20px;
                        box-sizing: border-box;
                    }
                    #header > ul.box > li.nav > ul.menu > li:hover > a, #header > ul.box > li.nav > ul.menu > li.cur > a {
                        border-bottom: none;
                    }
                    #header > ul.box > li.nav > ul.menu > li.so {
                        padding: 10px 10px 20px 10px;
                    }
                        #header > ul.box > li.nav > ul.menu > li.so > em {
                            position: relative;
                            display: inline-block;
                            width: 100%;
                            height: 40px;
                        }
                    #header > ul.box > li.nav > ul.menu > li > em > input {
                        position: relative;
                        width: 100%;
                        height: 40px;
                        background: rgba(255,255,255,0.9);
                        border-radius: 3px;
                        padding: 0 40px 0 10px;
                        outline: none;
                        border: 1px solid #E2E2E2;
                    }
                    #header > ul.box > li.nav > ul.menu > li > em > a {
                        position: absolute;
                        display: block;
                        top: 0;
                        right: 0;
                        width: 40px;
                        height: 40px;
                        text-align: center;
                        line-height: 40px;
                        cursor: pointer;
                        color: #2EAD39;
                        z-index: 9999;
                    }
                    #header > ul.box > li.nav > ul.menu > li > ul.classify {
                        display: none !important;
                    }

        #footer > ul.menu {
            display: block;
            padding: 30px 20px;
            box-sizing:border-box;
        }
            #footer > ul.menu > li.text {
                position: relative;
                width: 100%;
                padding:0 0 20px 0;
            }
                #footer > ul.menu > li.text > i.logo > img {
                    height: 40px;
                }

    #indexbox > ul.category {
        gap:20px 0;
    }
        #indexbox > ul.category > li > a {
            height: 60px;
            line-height: 60px;
            font-size: clamp(18px, 4vw, 26px);
        }

        #indexbox > ul.brand {
            padding: 50px 10px;
            box-sizing:border-box;
        }

        #indexbox > ul.best {
            padding: 50px 0;
        }
            #indexbox > ul.best > li.title {
                padding: 0 10px 30px 10px;
                box-sizing: border-box;
            }
                #indexbox > ul.best > li.title > b {
                    font-size: clamp(18px, 4vw, 32px);
                }
            #indexbox > ul.best > li.list > div.swiper-container .swiper-slide {
                max-width: 240px;
                padding: 30px 20px;
            }

    #indexbox > ul.cert > li {
        height: 350px;
        max-height: 350px;
    }
        #indexbox > ul.cert > li > div.txt {
            max-width: 100%;
            left: 0;
            transform: none;
            padding: 10px;
        }
            #indexbox > ul.cert > li > div.txt > div.x {
                max-width: 100%;
                padding:20px 0 0 0;
            }
                #indexbox > ul.cert > li > div.txt > div.x h2,
                #indexbox > ul.cert > li > div.txt > div.x h3 {
                    margin-bottom: 8px;
                    font-weight:normal;
                }
                #indexbox > ul.cert > li > div.txt > div.x p {
                    font-size: 14px;
                    line-height: 1.5;
                }

        #indexbox > ul.news {
            padding: 50px 0;
        }
            #indexbox > ul.news > li.title {
                padding: 0 0 30px 0;
            }
                #indexbox > ul.news > li.title > b {
                    font-size: clamp(18px, 4vw, 30px);
                }
            #indexbox > ul.news > li.list {
                grid-template-columns: repeat(1, 1fr);
                gap:30px 20px;
                padding:0 10px;
                box-sizing:border-box;
            }

    #companybox > ul.box {
        padding: 50px 0;
    }

    #channelbox > ul > li.title {
        text-align: left;
        padding:0 0 0 20px;
        box-sizing:border-box;
    }
    #channelbox > ul > li.list {
        grid-template-columns: repeat(1, 1fr);
        gap: 50px 0;
        padding: 30px 10px 50px 10px;
        box-sizing:border-box;
    }

    #classifybox {
        grid-template-columns: repeat(1, 1fr);
        gap: 30px 0;
        padding: 30px 0;
    }
        #classifybox > div.item {
            padding: 0;
        }
            #classifybox > div.item > ul.box {
                padding: 30px 10px;
            }
                #classifybox > div.item > ul.box > li.txt {
                    height: auto;
                    padding:0 0 20px 0;
                }
                #classifybox > div.item > ul.box > li.brand {
                    min-height: 100px;
                }
                #classifybox > div.item > ul.box > li.link {
                    position: relative;
                    text-align: center;
                    height: 100px;
                    padding: 30px 0 0 0;
                }

            #brandsbox > ul.box > li.txt {
                padding:0 10px;
                box-sizing:border-box;
            }
            #brandsbox > ul.box > li.list {
                grid-template-columns: 1fr 1fr;
                gap: 20px;
                padding: 30px 10px;
                box-sizing:border-box;
            }


    #categorybox {
        padding: 50px 0;
    }
        #categorybox > ul.category {
            margin: 0 auto;
            max-width: 100%;
            padding: 0 10px;
        }
            #categorybox > ul.category > li.list {
                position: relative;
                text-align: center;
                padding: 0 0 20px 0;
            }

            #categorybox > ul.item > li.brand {
                padding: 50px 10px;
            }
            #categorybox > ul.item > li.list > div.swiper-container .swiper-slide {
                max-width: 240px;
                padding: 30px 20px;
            }

    #productbox {
        padding: 50px 0;
    }
        #productbox > ul.it {
            grid-template-columns: 1fr;
            gap: 50px;
            padding:10px;
            box-sizing:border-box;
        }

        #searchbox > ul.box > li.sobox {
            padding: 50px 10px;
            box-sizing:border-box;
        }
            #searchbox > ul.box > li.sobox > h2 {
                padding: 0 0 30px 0;
            }
        #searchbox > ul.box > li.list {
            padding: 50px 0;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            padding: 50px 10px;
            box-sizing:border-box;
        }

    #newsbox > ul.box > li.list {
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
        padding: 0 10px 30px 10px;
        box-sizing:border-box;
    }
    #newbox {
        padding: 50px 0;
    }
}
/************************************************************************************/
@media screen and (max-width: 480px) {
    /* disable webkit text size adjust (for iPhone) */
    html {
        -webkit-text-size-adjust: none;
    }
}