@font-face {
    font-family: NotoSansTC;
    src: url('../fonts/NotoSansTC-Bold.otf'),
         url('../fonts/NotoSansTC-Regular.otf')
}

@font-face {
    font-family: PingFangTC;
    src: url('../fonts/PingFangTC-Regular.otf'),
         url('../fonts/PingFangTC-Thin.otf')
}

body, h1-h6, p, ul, li, nav, header, footer {
    margin: 0;
    padding: 0;
    font-family: NotoSansTC, PingFangTC;
}
*:focus {
    outline: none;
}
.text{
    color:blue;
}

.clothe-cat-word, .logo-img, .dot, .search-img{
    cursor: pointer;
}


a:link {
    text-decoration: inherit;
    color: white;
    cursor: pointer;
}

a:visited {
    text-decoration: inherit;
    color: white;
    cursor: pointer;
}

@media (min-width: 1280px) {
    /* .web-version{
        display: block;
    }

    .mobile-version{
        display: none;
    } */

    header{
        display: flex;
        justify-content: space-between;
        height: 100px;
        align-items: flex-end;
        /* padding-bottom: 28px; */
        font: PingFangTC-Regular;
    }

    .logo{
        padding: 0 96px 28px 60px;
    }

    .logo-img{
        width: 258px;
        height: 48px;
    }

    .clothe-cat {
        height: 28px;
        margin-bottom: 28px;
    }

    .clothe-cat ul{
        display: flex;
    }

    .clothe-cat li{
        list-style: none;
        font-family: PingFangTC;
        font-size: 20px;
    }

    .clothe-cat-word{
        width:100px;
        height: 28px;
        padding-right: 11px;
        letter-spacing: 30px;
    }

    .clothe-cat-word:hover, .category-chose{
        color: #8b572a;
    }

    .clothe-cat-symbol{
        width:34px;
        height: 28px;
        padding-right: 5px; 
        letter-spacing: 30px;
    }

    .function-button {
        width: 60%;
        display: flex;
        justify-content: flex-end;
    }

    .search-box{
        display: flex;
        position: relative;
        margin: 0 40px 28px 0;
    }

    .search-bar{
        display: block;
        border-radius: 50px;
        border-style: solid;
        border-width: 0.1px;
        border-color: black;
        padding-left: 10px;
        height: 40px; 
        width: 210px;
    }

    #search-content{
        /* border-radius: 50px; */
        border: 0;
        appearance: none;
        resize: none;
        opacity: 0.5;
        font-size: 30px;
        height: 40px; 
        width: 210px;
        /* display: flex;
        justify-content: center;
        align-items: center;
        border-color: lightgray; */
    }

    .search-img{
        position: absolute;
        right: 0;
        margin-right: 10px;
    }

    .cart-img{
        width: 44px;
        height: 44px;
        margin: 0 42px 0 0;
    }

    .cart-container{
        display: flex;
        position: relative;
        width: 44px;
        height: 44px;
        margin: 0 42px 0 0;
    }

    .cart-counter{
        position: absolute; 
        background-color: rgba(139, 87, 42, 0.5);
        color: black;
        border-radius: 50%;
        height: 25px;
        width: 25px;
        bottom: 0%;
        right: 0%;
        font-family: PingFangTC;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .member-img{
        width: 44px;
        height: 44px;
        /* padding: 0 3rem 0 2rem ; */
        margin: 0 54px 0 0;
    }

    .spilt-line{
        background-color: #313538;
        height: 40px;
    }

    .change-section{
        position: relative;
        height: 500px;
    }

      
    .change-img{
        background-color: lightgoldenrodyellow;
        height: 500px;
        width: 100vw;
        position: relative;
        /* opacity: 0.5; */
    }

    /* .fade-out{
        visibility: hidden;  
        opacity: 0;
        transition: visibility 1.5s linear, opacity 1.5s linear;
    }

    .fade-in{
        visibility: visible;  
        opacity: 1;
        transition: visibility 1.5s linear, opacity 1.5s linear;
    } */

    .change-section .change-text{
        position: absolute;
        top: 166px;
        bottom: 106px;
        left: 407px;
        font-family: PingFangTC-Thin;
        text-align: left;
        line-height: 1.9;
        color: #070707;
        font-size: 30px;
        height: 228px;
        width: 310px;
    }

    .change-section .change-text .text-style-1{
        font-size: 20px;
        font-family: PingFangTC-Thin;
    }

    .switch-control{
        position: absolute;
        height: 10px;
        bottom: 55px;
        left: 47.8vw;  
        display: flex;
    }
    
    .switch-control ul{
        display: flex;
    }

    .dot{
        color: #ffffff;
        list-style: disc;
        width: 10px;
        height: 10px;
        font-size: 30px;
        margin: 0 22px 0 0;
        transition: color 0.6s ease;
    }


    .active{
        color: #8b572a;
    }

    .sticky-nav{
        display: none;
    }
}

/*********************************************************************/

@media (min-width: 0px) and (max-width: 1279px) {
    /* .web-version{
        display: none;
    }

    .mobile-version{
        display: block;
    } */

    header{
        /* height: 100px; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0;
        margin: 0;
    }

    .logo{
        display: flex;
        /* justify-content: space-around; */
        /* align-items: center; */
        height: 52px;
    }

    .logo-img{
        width: 130px;
        height: 24.1px;
        margin: 0 auto;
        padding-top: 16px; /*16*/
        display: flex;
        
    }

    .m-search-img{
        display: block;
        width: 33px;
        height: 33px;
        object-fit: contain;
        /* position: absolute;
        right: 0%; */
        /* margin-left: 16.9vw; 60.9 */
        /* padding-left: 4.1vw; 15 */
        position: absolute;
        right: 0%;
        padding-right: 4.4vw; /*16*/
        padding-top: 11px;
        padding-bottom: 16px;
    }

    .clothe-cat {
        width: 100%;
        height: 50px;
        background-color: #313538;
        color: #828282;
    }

    .clothe-cat-word:hover, .category-chose{
        color: #ffffff;
    }

    .clothe-cat ul{
        display: flex;
        justify-content: space-evenly;
        margin-top: 17px;
        height: 22px;
        /* margin-bottom: 15px; */
    }

    .clothe-cat li{
        list-style: none;
        font-family: PingFangTC;
        font-size: 16px;
    }

    .cart-img, .member-img {
        display: none;
    }

    .search-img{
        display: block;
        width: 33px;
        height: 33px;
        position: absolute;
        right: 0%;
        top: 0%;
        padding-top: 12px;
        padding-right: 12px;
        z-index: 10;
    }

    .search-img.default{
        z-index: 50;
    }

    .search-bar{
        display: none;
        position: fixed;
        background-color: white;
        top: 0%;
        height: calc(52px * 0.8);
        width: 98vw;
        margin-top: 5px;
        border-radius: 50px;
        border-style: solid;
        border-width: 0.1px;
        border-color: black;
        -webkit-transform: translateZ(0);
    }

    #search-content {
        border: 0;
        appearance: none;
        resize: none;
        opacity: 0.5;
        font-size: 1rem;
        height: 40px; 
        width: 98vw;
        
    }

    /* #search-content.focus {
        display: flex;
    } */

    .cart-img, .member-img{
        width: 44px;
        height: 44px;
        padding: 0 0.5em;
    } 

    .change-section{
        position: relative;
    }

    .change-img-container{
        height: 51.38vw; /*185*/
    }

    .change-img{
        background-color: lightgoldenrodyellow;
        height: 51.38vw; /*185*/
        width: 100vw;
        position: relative;
        /* opacity: 0.5; */
    }

    .change-section .change-text{
        position: absolute;
        white-space: nowrap;
        top: 0%;
        left: 0%;
        margin: 8vw 53.8vw 13.8vw 6.3vw; /* margin: 36px 194px 50px 23px; */
        font-family: PingFangTC-Thin;
        font-size: 4vmin;
        text-align: left;
        line-height: 2;
        color: #070707;
    }

    .change-section .change-text .text-style-1{
        font-size: 3vmin;
    }

    .switch-control{
        position: absolute;
        top: 0%;
        left: 0%;  
        display: flex;
        /* padding: 156px 0 18px 175px; */
        padding: 43.3vw 0 5vw 48.6vw;
    }

    .switch-control ul{
        display: flex;
    }

    .dot{
        color: #ffffff;
        list-style: disc;
        width: 4px;
        height: 4px;
        font-size: 12px;
        margin: 0 8.8px 0 0;
        transition: color 0.6s ease;
    }

    .active{
        color: #8b572a;
    }

    .sticky-nav{
        background-color: #313538;
        color: white;
        display: flex;
        justify-content: space-around;
        position: fixed;
        bottom: 0;
        z-index: 100;
        width: 100%;
        height: 16.6vw; /*60*/
    }
    .sticky-nav div{
        display: flex;
        align-items: center;
        font-family: PingFangTC;
        font-size: 16px;
    }
    .sticky-cart, .sticky-member{
        width: 8.3vw; /*30*/
        height: 8.3vw; /*30*/
        max-width: 60px;
        max-height: 60px;
    }

    .cart-counter{
        display: none;
    }

    .sticky-cart-container{
        position: relative;
    }

    .sticky-cart-counter{
        position: absolute;
        /* left: 50%; */
        transform: translate(+80%, +30%);
        background-color: rgba(139, 87, 42, 0.5);
        border-radius: 50%;
        height: 5vw;
        width: 5vw;
        max-width: 30px;
        max-height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}