/*共通*/
body{
    width: 100%;
    margin: 0;
    overflow-x: scroll;
    overflow-y: scroll;
}

main{
    width: 100%;
    margin: 0;
}

body::-webkit-scrollbar{
    /*display: none;*/
}

ul,
li{
    list-style-type: none;
}

a{
    text-decoration: none;
}

p{
    margin: 0;
}


/*商品頁
--------------------------------------------*/
#product_page .background{
    position: fixed;
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
}

#product_page::-webkit-scrollbar{
    display: none;
}

#prod_wrapper{
    position: relative;
    max-width: 100%;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: start;
}

#product_page #backtop{
    position: fixed;
    background-color: transparent;
    border: 0;
    bottom: 30%;
    right: 3%;
    width: 50px;
    height: 50px;
    z-index: 999;
}

#product_page #backtop img{
    width: 100%;
    height: 100%;
}

.leff_wrapper{
    position: relative;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.top{
    background-color: #000;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin: 0;
}

.top a{
    padding-right: 1rem;
    color: #fff;
}

/**/
#product_page .background{
    position: relative;
    width: 100%;
    height: auto;
}

.li_wra,
.bi_wra{
    position: relative;
    /*background-color: black;*/
    width: 100%;
    height: 150px;
    margin: 0;
        background-color: transparent;
}

.vani{
    display: none;
}

.bir{
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    align-self: center;
}

.inv{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 500px;
    /*background-color: black;*/
    display: none;
    z-index: 99;
    background-color: transparent;
    border: 0;
}

.inv_div{
    width: 70%;
    height: auto;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 5%;
    padding: 6% 15% 0 15%;
}

.inv_div img{
    max-width: 20%;
}

.inv img{
    width: 300px;
    height: auto;
}

#product_page .temp,#rineABOUTUS .temp,#demo .temp,#Front_Page .temp{
    width: auto;
}

.inv_text{
    width: 100%;
    position: relative;
    display: inline-block;
    text-align: start;
    z-index: 999;
    color: #e7e7e7;
    height: auto;
    font-size: 1.2rem;    
}

.inv_text p{
    line-height: 170%;
    font-weight: 400;
    opacity: .85;
}

.inv_text h1{
    font-size: 1.5rem;
    opacity: .9;
}

.inv h1{
    font-weight: bolder;
    font-size: 200%;
    font-weight: 400;
    font-size: 1.65rem;
    letter-spacing: 0.4rem;
    text-align: center;
}

.black{
    position: absolute;
    background-color: black;
    width: 100%;
    height: 0;
    z-index: 999;

    display: none;
}

.li_wra:hover .black{
    height: 700px;
    transform-origin: bottom;
    transition: all ease-out 2s;
}

#product_page .li_wra img,
#product_page .bi_wra img{
    height: 50%;
    width: 15%;
    padding-left: 3%;
    padding-right: 2%;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

#product_page .li_wra h1,
#product_page .bi_wra h1{
    color: rgb(255, 255, 255);
    font-size: 200%;
    font-weight: bolder;
    padding-top: 3.5rem;
}

.duck,.duck1,
.dp2,.dp3,
.dp4,.dp5{
    position: relative;
}

.duck li,.duck1 li,
.dp2 li,.dp3 li,
.dp4 li,.dp5 li{
    position: relative;
    display: flex;
    justify-content: space-between;
    /*解決flex圖片變形*/
    align-items: center;
    padding-bottom: 5%;

    max-width: 100%;
}



.list_div{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

.dp2,.dp3,.dp4,.dp5{
    display: none;
}

.l1st_item a img,.l1st_item1 a img{
    width: 200px;
}

.l1st_item a:nth-child(1),.l1st_item1 a:nth-child(1){
    min-height: 250px;
    display: flex;
    justify-content: center;
    align-items: end;
}

.l1st_item,.l1st_item1{
    width: 100%;
    justify-content: space-evenly;
}

/*單純先想想賣光的sold out標籤
--------------------------------------------
.dp2li .l1st_item:nth-child(1){
    filter: blur(0px);
}

.dp2li .l1st_item:nth-child(1) p{
    text-decoration: line-through;
}

.dp2li .l1st_item:nth-child(1):after{
    position: absolute;
    content: "sold out";
    color: #000000;
    font-size: 5rem;
    top: 0;
    left: 0;
    padding-top: 5%;
    background-color: transparent;
    width: 100%;
    height: 100%;
    z-index: 999;
}

.dp2li .l1st_item:nth-child(1):hover{
    filter: blur(0px);
}*/

.product-group{
    display: none;
    justify-content: start;
}

.product-card {
    position: relative;
    padding-bottom: 3%;
    width: 30%; 
}

.pro ul{
    padding-top: 5%;
    text-align: center;
}

.product-card.sold-out {
    opacity: 0.6;
}

.product-card.sold-out:before {
    content: "Sold Out";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-20deg); /* 讓文字居中並傾斜 */
    background-color: rgba(255, 0, 0, 0.8); /* 紅色半透明背景 */
    color: white;
    padding: 5px 10px;
    font-size: 1.5em;
    font-weight: bold;
    border-radius: 5px;
    z-index: 1000; /* 確保標籤在圖片上方 */
}

.product-card.sold-out:after{
    position: absolute;
    content: "sold out";
    color: #000000;
    font-size: 5rem;
    top: 0;
    left: 0;
    padding-top: 5%;
    background-color: transparent;
    width: 100%;
    height: 100%;
    z-index: 999;
}

.product-card.sold-out .add-to-cart-button {
    background-color: #ccc;
    cursor: not-allowed;
}

.product-image-wrapper{
    position: relative;
    display: inline-block;
}

/* 售罄狀態的樣式 */
.product-image-wrapper.sold-out{
    opacity: 0.6;
}

.product-image-wrapper.sold-out::before{
    content: "Sold Out";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-20deg);
    background-color: rgba(255, 0, 0, 0.8);
    color: white;
    padding: 10px 20px;
    font-size: 2em;
    font-weight: bold;
    border-radius: 8px;
    z-index: 999;
}

.product-image-wrapper.sold-out:after{
    position: absolute;
    content: "sold out";
    color: #000000;
    font-size: 5rem;
    top: 0;
    left: 0;
    padding-top: 5%;
    background-color: transparent;
    width: 100%;
    height: 100%;
    z-index: 999;
}


.in{
    display: none;
}

.out{
    display: block;
}

.l1st_item,.l1st_item1{
    position: relative;
    text-align: center;
    max-width: 75%;
}

.l1st_item img,.l1st_item1 img{
    padding-bottom: 2rem;
    width: 230px;
}

.l1st_item img:hover,.l1st_item1 img:hover{
    opacity: .6;
}

.gray{
    color: gray;
}

.Price{
    color:rgb(131, 44, 38);
    line-height: 2rem;
    font-size: 1.3rem;
    font-weight: 500;
    font-family: sans-serif;
}

.pbut{
    position: relative;
    display: flex;
    justify-content: center;
}

.pbut li{
    margin-left: 10px;
    max-width: 100%;
}

.pbut button{
    
    border: #5f5f5f 2px solid;
    width: 50px;
    height: 35px;
    border-radius: 25px;
}

.pbut p{
    font-weight: 600;
    font-size: 0.8rem;
}

.pbut button:hover,.pbutbor{
    background-color: #5f5f5f; 
    transition: all 0.85s ease-in-out;}

.pbut p:hover,.pbutbor p{
    color: #fff;
    transition: all 0.65s ease-in-out;}

/*頁數按鈕*/
.pbut_color{
    background-color: #5f5f5f;
}

.pbp_color{
    color: #ffffff;
}

#product_page section{
    overflow-y: hidden;
    overflow-x: hidden;
}

/*自適應ui還是調整一下*/
#product_page #menu-but p{
    color: #ffffff;
    font-weight: 600;
    font-size: 2rem;
}

#product_page .aboutt-menu{
    z-index: 999;
}
/*測試*/
#product_page .index_logo{
    padding-right: 30%;
    left: 3%;
}

.l1st_item img,.l1st_item1 img{
    max-width: 100%;
}

.pro_sec{
    width: 100%;
    position: relative;
}

.pro_sec_div2 .li_wra img,.pro_sec_div2 .bi_wra img{

}

.pro_sec_div{
    position: relative;
    width: 100%;
    height: auto;
    background-image: url(https://storage.googleapis.com/rine_bucket_for/img/leotang718%E6%A8%B9150dpi.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    z-index: -1;    
}
    .pro_sec_div2 {
        width: 100%;
        background-color: rgba(53, 53, 53, 0.5);
        padding-bottom: 5%;
        position: relative;
    }

#product_page .bir{
    opacity: .3;
}

@media screen and (max-width:800px) {
#outside{
    display: none;
}

.pro_sec_div2 .li_wra img,.pro_sec_div2 .bi_wra img{
    display: inline-block;
}

.pro_sec_div2{
    width: 100%;
    background-color: rgba(53, 53, 53, 0.5);
}

.pro_sec_div{

}    
}


@media screen and (min-width : 800px) {
#product_page .menu_wrapper{
    justify-content: start;
}

.list_div{
    justify-content: center;
}

#product_page .l1st_item,#product_page .l1st_item1{
    justify-content: start;    
}

/*.pro_sec{
    display: flex;
    justify-content: start;
}*/

.li_wra,.bi_wra{
    /*width: 30%;
    background-color: #fff;
    background-color: transparent;*/
}

.inv{
    position: relative;
}

#outside{
    display: none;
}

/*.pro{
    width: 70%;
}*/

.pro li{
    padding-bottom: 0;
}

#product_page .li_wra img,#product_page .bi_wra img{
    width: 50%;
}

#product_page .bir{
    padding-left: 8%;
}

#product_page .bir .black{
    display: none;
}

    .boxx{
        background-color: #eb0000;
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 50px;
        border: 0;
    }

    .inv:hover{
        width: 100px;
    }
}

@media screen and (max-width : 1250px) {
    #product_page .index_logo{
        display: none;
    }

    .lr-list-container .l1st_item a img,.lr-list-container .l1st_item1 a img{
    width: 150px;
}

.lr-list-container .l1st_item a:nth-child(1),.lr-list-container .l1st_item1 a:nth-child(1){
    min-height: 200px;
    display: flex;
    justify-content: center;
    align-items: end;
}
}

@media screen and (max-width : 1000px) {
    .l1st_item a img,.l1st_item1 a img{
    width: 100px;
}

.l1st_item a:nth-child(1),.l1st_item1 a:nth-child(1){
    min-height: 150px;
    display: flex;
    justify-content: center;
    align-items: end;
}

/*#product_page .li_wra, #product_page .bi_wra{
    width: 20%;
}*/
}

@media screen and (max-width : 800px) {
    .l1st_item a img,.l1st_item1 a img{
    width: 50px;
}

.l1st_item a:nth-child(1),.l1st_item1 a:nth-child(1){
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: end;
}

    #product_page #menu{
        display: none;
    }

    #product_page .bir img{
        width: 50%;
    }

    .leff_wrapper{
        width: 100%;
        max-width: 100%;
    }

    .pro{
        position: relative;
        width: 100%;
        height: auto;
    }

.list_div{
    padding-left: 0;
}

    .duck,.duck1{
        align-self: center;
        justify-content: space-evenly;
        display: flex;
        padding: 0;
        height: 0;
        margin: 0;
    }

    .dp2,.dp3,.dp4,.dp5{
        padding: 0;
        margin: 0;
    }

    .duck li,.duck1 li,
    .dp2 li, .dp3 li,.dp4 li,.dp5 li{
        position: relative;
        display: flex;
        justify-content: center;
        /*解決flex圖片變形*/
        align-items: center;
        padding-bottom: 0;
    }


    .l1st_item .l1st_item1{
        display: none;
    }

    #product_page .right_wrapper{
        display: none;
    }

    #prod_wrapper{
        width: 100%;
    }
    
    .bir{
        justify-content: center;
    }

    /*#product_page .li_wra,#product_page .bi_wra{
        width: 100%;
    }*/

    #product_page .li_wra h1,
    #product_page .bi_wra h1{
        padding-top: 1rem;
    }

    .black{
        display: none;
    }

    .inv{
        display: flex;
        position: relative;
    }

    .inv_div img{
        max-width: 30%;
    }

    /*.pbut{
        background-color: #000;
        margin: 0;
        padding-top: 5%;
        padding-left: 0;
    }

    .pbut button{
    background-color: transparent;
    border: #ffffff 2px solid;
    width: 75px;
    height: 50px;
    border-radius: 50px;
    color: #ffffff;
    }

    .pbut button:hover{
    background-color: #ffffff;
    transition: all 0.85s ease-in-out;}

    .pbut p:hover{
    color: #000000;
    transition: all 0.65s ease-in-out;}*/

    /*頁數按鈕*/
.pbut_color{
    background-color: #ffffff;
}

.pbp_color{
    color: #000000;
}

    .bi_wra{
        max-width: 100%;
    }

    .inv{
        padding-bottom: 100px;}

    .inv_text{
        margin: 0 5% 0 5%;
    }

    .inv_text h1{
        margin-top: 0;
    }

        /*.inv:hover ~ .duck*/
    .inv_click
    {
        align-self: center;
        justify-content: space-evenly;
        display: block;
        height: auto;
        transition: all ease 1.5s;
   
    }

    .duck_click{
        display: block;
        opacity: 1;
        transition: all ease-in-out 2.5s;
    }

    .im_click{
        padding-bottom: 50px;
        transition: 1s ease-in-out all;
    }

    .duck button:hover,.duck1 button:hover{
        background-color: #ffffff;
    }

    .dp2, .dp3,.dp4,.dp5{
    display: none;
}

    .in{
    display: none;
}

    .out{
    display: block;
}
}

@media screen and (max-width : 600px) {
    .duck,.duck1,
    .dp2,.dp3,.dp4,.dp5{
        width: 100%;
        height: auto;
        align-self: center;
        display: block;
        padding-left: 15%;
        padding-top: 10%;
    }

    .duck li,.duck1 li,
    .dp2 li, .dp3 li,.dp4 li,.dp5 li{
        display: block;
        width: 100%;
    }

    .dp2,.dp3,.dp4,.dp5{
        display: none;
    }
    
    .l1st_item,.l1st_item1{
        position: relative;
        text-align: center;
        display: block;
    }

    .l1st_item img,.l1st_item1 img{
        width: 45%;
    }

    .inv{
        max-height: 525px;
    }

    .inv_div{
        display: block;
    }

    .inv_div img{
        max-width: 100%;
        
    }

    .inv_text{
        margin: 0;
    }

    #product_page section{
overflow-x: hidden;
    }

    .pbut button{
        width: 50px;
        height: 35px;
    }
    
        .in{
    display: none;
}

    .out{
    display: block;}

    .list_div{
        padding-left: 0;
    }
}

@media (any-hover: hover){
    #backtop:hover{
        opacity: .6;
        transition: all ease-in-out 0.5s;
    }
}



/*這裡是商品葉
-------------------------------------------------*/

/*第一部分
-------------------------------------------------*/
#demo{
    overflow-x: hidden;
}

.first_wrapper{
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    margin-top: 50px;
}

.lef_w{
    position: relative;
    align-self: center;
    float: left;
}

.lef_w ul{
    position: relative;
    display: flex;
    justify-content: space-evenly;
}

.lef_w a:hover{
    opacity: .6;
}
.SHOW_LIT a{
    /*display: flex;
    justify-content: center;
    align-items: center;*/
}
.SHOW{
    width: 400px;
    /*height: 679px;*/
    height: auto;
    overflow: hidden;
    margin: 0 auto;
    display: inline-block;
}

.SHOW_LIT{
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.SHOW_LIT li{
    margin-left: 10px;
}

.SHOW_LIT li img{
    height: auto;
}

/*.mag{
    position: absolute;
    top: 2%;
    right: 5%;
    width: 25px;
    height: 25px;
    
    z-index: 999;
}*/

.mag img{
    width: 100%;
    height: 100%;
}

/*.related-products:after{
    content: "";
    background-image: url(https://storage.googleapis.com/rine_bucket_for/icon/magnifier.png);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    display: inline-block;
    top: 0;
    right: 5%;
    width: 40px;
    height: 40px;
}*/

.SHOW img{
    width: 100%;
    height: 100%;
    transform: scale(1,1);
    transition: all 0.3s ease-out;
    object-fit: cover;
}

.SHOW:hover img{
    transform: scale(1.2,1.2);
    object-fit: cover;
}

.glass{
    position: absolute;
    top: 25%;
    left: 25%;
    width: 200px;
    height: 200px;
    border: 2px solid black;
    background: rgba(0, 0, 0, 0.5) url(https://storage.googleapis.com/rine-bucket/img/no.png) no-repeat;
    background-size: 1030px 1358px;
    transition: all 0.3s ease-out;
    opacity: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
}

.SHOW:hover .glass{
    opacity: 1;
    z-index: 99;
    pointer-events: auto;
}

.SHOW:hover .glass::before{
    position: absolute;
    top: 25%;
    left: 25%;
}


.righ_w{
    padding-top: 5%;
    position: relative;
    float: left;
    width: 600px;
}

.righ_w h2{
    margin-top: 55px;
    font-weight: 600;
    letter-spacing: 0.8rem;
    color: rgb(175, 155, 125) ;
}

.intro_text{
    margin-top: 10%;
    position: relative;
    /*letter-spacing: 0.1rem;
    max-width: 100%;
    margin-bottom: 10%;*/
    padding: 0 5% 0 5%;
}

.size{
    font-weight: 550;
    padding-top: 5%;
}

.event_wrapper{
    font-size: 80%;
    /*border-left: 5px solid black;
    padding-left: 3%;*/
    padding-top: 2.5%;

}

.event_wrapper span{
    border-left: 5px solid black;
}

.m_wrapper{
    margin-top: 2.5rem;
    line-height: 0.5;
    font-size: 145%;
    font-weight: 600;
    color: #858585;
}

.m_wrapper p{
    color: rgb(175, 155, 125) ;
}

.m_wrapper del{
    font-weight: 400;
}

.way_wrapper{
    color: #000;
    font-size: 100%;
    font-weight: 600;
}

.way_wrapper ul{
    border-left: 3px solid black;
    padding-left: 3%;
}

.way_wrapper li{
    font-weight: 500;
    font-size: 90%;
}

.sec_wrapper{
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 150px;
}

.intro_more{
    position: relative;
    padding-bottom: 100px;
    border-bottom: 1px solid black;
    width: 100%;
}

@media screen and (min-width:1010px) {}
    .h2div{
        width: 70%;
        padding: 0 15% 5% 15%;
    }

    .intro_more h2{
    padding: 0px 5px 5px 0px;
    border: 0px solid  rgb(175, 155, 125);
    background-color: rgb(175, 155, 125);
    color: rgb(255, 255, 255);
    font-weight: 600;
    letter-spacing: 0.8rem;
    font-size: 1.5em;
    }

    .intro_more h2:after{
        display: none;
    }
#intro-more{
    padding-top: 5%;
}

/*.intro_more h2{
    font-weight: 600;
    margin-left: 30px;
    margin-top: 5%;
    margin-bottom: 5%;
    letter-spacing: 0.8rem;
    font-size: 1.5em;
    text-align: center;
    color: rgb(175, 155, 125);
    position: relative;
}
.intro_more h2:after{
    content: '';
    position: absolute;
    bottom: -50px;
  left: 50%; 
  width: 70%; 
    height: 2px; 
  background-color:rgb(175, 155, 125); 
  transform: translateX(-50%);
}*/

.intro_more ul{
    display: flex;
    justify-content: center;
    padding-left: 0;
}

.intro_more,.introm_ul{
    width: 100%;
    text-align: center;
}

.introm_ul div a{
    position: relative;
    align-items: center;
}

.related-products{
    position: relative;
    display: flex;
    width: 100%;
    height: 300px;
    align-items: center;
    justify-content: center;
}

.related-products img{
    width: 50%;
    transform: scale(1,1);
    object-fit: cover;
    transition: all ease-in-out 1s;
    object-fit: cover;
}

.related-products img:hover{
    transform: scale(1.1,1.1);
    transition: all ease-in-out 1s;
    object-fit: cover;
}

.introm_ul p{
    margin-left: 5%;
    font-size: 1.5em;
    font-weight: 500;
    letter-spacing: 0.5rem;
    color: rgb(175, 155, 125);
}

.related-product-card{
    width: 25%;
}

.related-product-card p:nth-child(3){
    font-size: 1.5em;
    font-weight: 600;
    color: rgb(175, 155, 125);
}

.img1,.img2,.img3{
    width: 345px;
    height: auto;
}

.img1:hover,.img2:hover,.img3:hover{
    opacity: .6;
}

.inm_text{
    position: relative;
    display: flex;
    justify-content: space-evenly;
    font-weight: 700;
    letter-spacing: 0.5rem;
}

.ntd{
    position: relative;
    display: flex;
    justify-content: space-evenly;
    color: rgb(100, 100, 100);
    font-weight: 600; 
}

/*按鈕
*/
.but_wrapper{
    position: relative;
    padding-top: 10%;
}

.but_ul{
    display: flex;
    justify-content: space-evenly;
}

.btn1{
    position: relative;
    font-size:small;
    font-weight: 600;
    padding: 5px 5px 5px 5px;
    border: 2px solid #3d4044;
    color: #3d4044;
    transition: all 0.5s;
    animation-delay: 0.5s;
    background-color: transparent;
}

.btn1:hover,.btn1:focus{
    color: rgb(255, 255, 255);
    background-color: #3d4044;
}

.btn2{
    position: relative;
    font-size:small;
    font-weight: 600;
    padding: 5px 5px 5px 5px;
    border: 3px solid #3d4044;
    background-color: #3d4044;
    color: rgb(255, 255, 255);
    transition-duration: 0.4s;
    animation-delay: 0.1s;
}


.btn2:hover,.btn2:focus{
    color: #000;
    background-color: #ffffff;
}

.inlist.btn1,.inlist.btn2{
   margin-top: 5%;
}

/*回到頂部
-------------------------------------------------*/
#page_top{
    position: fixed;
    z-index: 9999;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    display: flex;
    flex-direction: column;
    text-align: center;

}

#page_top a{
    color: rgb(61, 61, 61);
    text-decoration: none;
    font-weight: 600;
}

#page_top a:hover{
    opacity: .6;
}

#page_top.UpMove{
    animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
    from{
        opacity: 0;
        transform: translateY(100px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

#page_top.DownMove{
    animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
    from{
        opacity: 1;
        transform: translateY(0);
    }
    to{
        opacity: 1;
        transform: translateY(100px);
    }
}

@media screen and (max-width:1200px) {
    .img1, .img2, .img3 {
    width: 250px;
}

    .SHOW{
        width: 400px;
    }

    .SHOW img{
        width: 100%;
    }
}

@media screen and (max-width:1024px){
    .index_div{
        display: none;
    }

    .lef_w{
        float: none;
    }

    .righ_w{
        float: none;
    }

    .first_wrapper{
        display: flex;
        align-items: center;
        flex-direction: column;

    }

    .intro_more ul{
        flex-direction: column;
        padding: 0;
    }
.related-products img{
    width: 100%;
}

.related-product-card p{
    position: relative;
}

.related-product-card p:nth-last-child(1):after{
        content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    width: 60%;
    height: 2px;
    background-color: rgb(175, 155, 125);
    transform: translateX(-50%);
}

    .introm_ul{
        align-items: center;
    }

    .introm_ul div{
        margin-bottom: 5%;
    }

    .introm_ul p{
        margin-left: 5%;
        font-size: 120%;
        font-weight: 500;
        letter-spacing: 0.5rem;
        color: rgb(175, 155, 125) ;
    }

    .intro_more h2{
        font-size: 2.5rem;
        text-align: center;
    }

    #g-nav-list img{
        display: none;
    }

    .left_wrapper{
        float: none;
        display: flex;
        justify-content: center;
        width: 100%;
        font-size: 200%;
    }

    .right_wrapper{
        width: 100%;
        max-width: 100%;
    }

    /*#demo .color_black ul{
        width: 100%;
    }

    #demo .color_black a,#demo .color_black p{
        font-size: 2.5rem;
        font-weight: 550;
    }

    #demo .color_black ul h1{
        font-size: 3rem;
        font-weight: 800;
    }

    #demo .sns_logo{
        min-width: 35%;
        padding-top: 3.5%;
    }

    #demo .sns_logo img{
        width: 30%;
        height: auto;
    }*/

    .img1, .img2, .img3 {
    width: 345px;
    height: auto;
    
}
    .m_wrapper{
        width: 90%;
        text-align: center;
        font-weight: 500;
        margin: 0;
        padding-left: 5%;
        padding-right: 5%;

    }

    .m_wrapper p{
        text-align: center;
        font-weight: 500;
        margin: 0;
    }

    .righ_w{
        width: 80%;
        padding: 0 10% 0 10%;
    }

    .righ_w h2{
        font-size: 2.5em;
    }

    .SHOW{
        width: 100%;
        height: auto;
    }

.SHOW:hover img{
    transform: scale(1,1);
    object-fit: cover;
}
}

@media all and (max-width : 1010px) {
    .big_wrapper{
        position: relative;
    }

    .left_wrapper{
        display: none;
        position: relative;
    }

    .right_wrapper{
        width: 100%;
        display: flex;
    }

    .img_wrapper{
        display: block

    }

    .img_ul{
        margin-left: 0;
        display: flex;
        justify-content: space-evenly;
    }

    .img_ul li{

        margin-bottom: 30px;
    }

    .img_ul :nth-child(2){
        padding-left: 15px;
    }

    .ft_wrapper_r{
        position: relative;
        display: block;
        justify-content: center;
    }

    .ft_span_2{
        display: flex;
        justify-content: start;
        align-items:end;
        font-size: 125%;
        font-weight: 500;
    }

    .ft_span_3{
        display: flex;
        font-size: 125%;
        max-width: 100%;
        letter-spacing: 1.5;
        color: rgb(122, 91, 44);
    }

    .ft_bt{
        padding-left: 1.5rem;
    }

    .ft_wrapper{
        margin-top: 1.2rem;
    }

    .ft_span_1{
        justify-content: space-between;
    }
    
    .ft_span_1 :nth-child(3){
        margin-right: 3%;
    }

    .righ_w h2,.m_wrapper,.introm_ul p{
        text-align: center;
    }

    /*.way_wrapper{
        padding:10px 0 10px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #000;

    }

    .way_wrapper p,.way_wrapper li{
        color: #ffffff;
    }*/

    .intro_text{
        padding: 0 15px 0 15px;
    }

    .index_logo{
        display: none;
    }

    .but_wrapper{
        padding-bottom: 10%;
    }
}

@media all and (max-width : 800px){
    .tthing{
        top: 0;
        right: 0;
        width: 200px;
        height: 1200px;
        background-color: #ffffff;
        display: block;
        margin-top: 100px;
        position: absolute;
        z-index: 2;
    }
    
    .tthing::after{
        content: '';
        z-index: 3;
        position: absolute;
        display: block;
    
        width: 0;
        height: 0;
        border-left: 200px solid transparent;
        border-bottom: 1200px solid #ffffff;
        border-right: 200px solid transparent;
        top: 0;
        right: 0;
    }

    .img1,.img2,.img3{
    width: 500px;}

    .introm_ul div p{
        font-size: 1.5rem;
    }

    .related-products{
        padding-top: 20%;
    }
}

@media screen and (max-width : 715px) {
    #g-nav-list a{
        font-size: 100%;
    }
}

@media screen and (max-width : 600px) {
    /*.introm_ul div{
        position: relative;
        width: 100%;
        text-align: center;
    }*/

    .img1,.img2,.img3{
    width: 300px;}

        .introm_ul div p{
        font-size: 1.2rem;
    }
}

/*菜單
-------------------------------------------------*/
.menu_wrapper{
    position: relative;
    background-color: rgb(255, 255, 255);
    z-index: 99;
    display: flex;
    justify-content:space-evenly;
    top: 0;
    left: 0;
    
}

.index_div{
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0px 50px 0px 50px;
    padding-right: 10%;
}

.index{
    position: relative;
    display: flex;
    justify-content: space-evenly;
    margin-top: 8%;

}

.menu_wrapper a{
    color: rgb(0, 0, 0);
    text-decoration: none;
}

.index a{
    font-size: 125%;
    font-weight: 500;
    letter-spacing: 0.5rem;
    margin: 0px 7px 0px 7px;
    padding-right: 1.5rem;
    padding-left: 1rem;
}

.index a:hover{

    color: rgb(130, 143, 130);
    transition-duration: 0.5s;
    animation-delay: 0.5s;
}

.index_logo{
    position: relative;
    left: 5%;
    padding-top: 20px;
    max-width: 100%;
    height: auto;
}

/*真菜單
-------------------------------------------------*/
#g-nav{
    position: fixed;
    z-index: -1;
    opacity: 0;
    top: 0;
    background-color: rgb(255, 255, 255);
    transition: all 0.3s;
    display: flex;
    justify-content: center;
    max-width: 100%;
    top: 0;
    left: 0;
    padding-left: 5%;
    width: 100%;
    display: none;
    
}

/*#g-nav-list img{
    padding-top: 2.5%;
}*/

#g-nav-list a{
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 1rem;
    margin: 0px 7px 0px 7px;
    text-decoration: none;
    color: black;
    
}

#g-nav-list{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#g-nav-list ul{
    display: flex;
    justify-content: space-evenly;
    margin-top: 10%;
}

#g-nav-list li{
    padding-left: 1rem;
    padding-right: 0.5rem;
}

#g-nav.m_fixed{
    opacity: 1;
    z-index: 99;
    display: flex;
}

#g-nav.m_notfixed{
    display: none;
}


/*頂部
-------------------------------------------------*/
.Top_wrapper{
    position: relative;
    border: 1px solid black;
    background-color: aqua;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.player_wrapper{
    position: relative;
    border: 1px solid rgb(255, 0, 0);
    margin: 100px 150px 100px 150px;
    
    width: 1076px;
    height: 572px;
}

.player_wrapper img{
    z-index: 5;
    /*max-width: 100%;*/
}

.player_wrapper a{
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-animation: silder 15s linear infinite;
    animation: silder 15s linear infinite;
}


/*不知道為什麼首頁在這裡
------------------------------------------------*/
.main_main,#main_banner img,#main_banner,#main_background{
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
}

#main_background{
    border: 0;
    z-index: 99;
    display: flex;
    justify-content: start;
    height: 100vh;
}

#Front_Page .menu_wrapper{
    justify-content: start;
}

#Front_Page .index_logo{
    padding-right: 30%;
    left: 3%;
}

#main_blank{
    width: 30%;
    height: 500px;
    right: 0;
}

#main_blank img{
    position: absolute;
    top: 0%;
    left: 17%;
    width: 15%;
    height: auto;
}

#main_nav{
    position: absolute;
    top: 0;
    left: 2%;
    width: 300px;
    height: 500px;
}

#main_nav img{
    width: 60%;
    height: auto;
}

#main_nav img:nth-child(2),#main_nav img:nth-child(3){
    padding-top: 30%;
}

.tree{
    position: absolute;
    /*width: 150px;*/
    width: 15%;
    height: auto;
    top: 60%;
    right: 3%;
}

#main_banner{
    max-width: 100%;
    width: 70%;
    height: 50%;
}

.hole{
    position: absolute;
    width: 150px;
    height: 150px;
    top: 25%;
    left: 65%;
    background-color: #ffffff;
    z-index: 99;
    border: 0;
    border-radius: 150px;
}

#bird_hop{
    position: absolute;
    width: 150px;
    height: 150px;
    background-color: transparent;
    z-index: 99;
    top: 40%;
    left: 25%;
}

#bird_hop img{
    width: 40%;
    height: auto;
}

#main_banner.bird_anime ~#bird_hop{
    animation:5s bird  steps(1,end);
    animation-delay: 1s;
    animation-fill-mode: forwards;
}

@keyframes bird{
    25%{
        top: 32%;
        left: 35%;
    }

    50%{
        left: 50%;
        top: 35%;
    }

    65%{
        top: 40%;
        left: 65%;
    }

    80%{
        top: 70%;
        left: 70%;
    }

    100%{
        top: 68%;
        left: 85%;
    }
}

/*首頁
-----------------------------------*/

#Front_Page{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    min-width: 100%;
}


#Front_Page .ui_RW{
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    background: linear-gradient(to right,rgba(255, 255, 255, 0.4),rgba(255, 255, 255, 0));

    display: none;
}

.none{
    display: none;
}

#Front_Page .ui_RW ul{
    display: flex;
    justify-content: center;
}

#Front_Page .ui_RW li{
    position: relative;
}

#Front_Page .ui_RW a{
    font-size: 200%;
    font-weight: 600;
    letter-spacing: 0.5rem;
    color: #fff;
}

#Front_Page #g-nav{
    z-index: 999;
}

.li_ab{
    width: 100%;
    position: relative;
    padding: 5% 0 5% 0;
    background-image: url(https://storage.googleapis.com/rine_bucket_for/img/photo/74455_0.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;

    z-index: 1;
}

.abtext{
    position: relative;
    width: 70%;
    height: auto;
    background-color: rgba(0, 0, 0, 0.6);

    padding-left: 15%;
    padding-right: 15%;
    padding-bottom: 5%;
    padding-top: 2rem;
}

.abtext::after{
    content: "";
    position: absolute;
    /*background-color: ;*/
    top: 0;
    right: 0;
    width: 50%;
    height: 100px;
}

.abtext h1,.abtext p{
    color: #ffffff;
}

.li_ab h1{
    text-align: center;
    font-size: 2.0rem;
    font-weight: 400;
    letter-spacing: 1.2rem;

    padding-bottom: 2%;
}

.abtext p{
    padding-bottom: 5%;
    font-size: 1.35rem;
    line-height: 215%;
    font-weight: 320;
}

.toab_btn{
    left: 40%;
    font-size: 1.3rem;
}

.toab_btn a{
    color: #ffffff;
    font-weight: 400;
    letter-spacing: 0.3rem;
}

#Front_Page .li_wra,#Front_Page .bi_wra,#Front_Page .li_div,#Front_Page .bi_div{
    position: relative;
    width: 100%;
    height: auto;
}

#Front_Page .li_wra,#Front_Page .bi_wra{
    background-color: transparent;
    }

#Front_Page .bir{
    justify-content: start;
    text-align: center;
    padding: 2% 0 2% 0;
    padding-left: 10%;
    width: 100%; 
}

#Front_Page .li_div .bir{
    width: 125%;
}


#Front_Page .bir img{
    width: 200px;
    padding-right: 3%;
}
#Front_Page .bi_wra .bir img{
    width: 195px;
}

#Front_Page .li_div,#Front_Page .bi_div{
    display: flex;
    justify-content: space-evenly;
background-color: #ffffffb0;
align-items: center;}

#Front_Page .li_div{
border-bottom: #868686 solid 1px;
}

#Front_Page .bi_text,#Front_Page .li_text{
    color: #424242;
    padding-bottom: 5%;
    padding-right: 5%;

    width: 50%;
}

#Front_Page .bird_div{
    text-align: center;
    position: relative;
    width: 50%;
    
}

#Front_Page .bird_sp{
    width: 75%;
}

#Front_Page .li_div .bird_sp{
    width: 30%;
}

#Front_Page .bi_div .bird_sp{
    width: 25%;
}

#Front_Page .bi_text h1,#Front_Page .bi_text p,
#Front_Page .li_text h1,#Front_Page .li_text p{
    text-align: start;
}

#Front_Page .bi_text h1,#Front_Page .li_text h1{
    font-weight: 400;
    font-size: 1.65rem;
    letter-spacing: 0.4rem;
}

#Front_Page .bi_text p,#Front_Page .li_text p{
    padding-bottom: 5%;
    font-size: 1.2rem;
    line-height: 170%;
    font-weight: 400;
}

.toab_btn{
    background-color: transparent;
    border: rgba(255, 255, 255, 0.4) solid 1px;
    position: relative;
    padding: 7.5px 15px 7.5px 15px;

    outline: rgba(255, 255, 255, 0.4) 1px solid;
    outline-offset: 0px;
    transition: 0.5s all ease-in-out;
}

.pd_btn,.pd_btn:focus{
    border: rgba(0, 0, 0, 0.4) solid 2px;
    border-radius: 3rem;
    padding: 1rem 1rem 1rem 1rem;
    background-color: transparent;
    position: relative;
    text-decoration: none;
        transition: all ease-in-out 0.8s;
}

.pd_btn a{
    color: #5a5a5a;
    font-weight: 666;
    font-size: 1.2em;
}

.pd_btn:hover{
    background-color: #5a5a5a;
    border-color: #5a5a5a;

    transition: all ease-in-out 0.8s;
}

.pd_btn:hover a{
    color: white;
    transition: all 0.5s;
}

.toab_btn:hover{
    outline-offset: 10px;
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.2);
        outline: rgba(255, 255, 255, 0) 1px solid;
        transition: 0.5s all ease-in-out;
}

    #Front_Page .index a,#product_page .index a,#rineABOUTUS .index a{
        font-size: 1rem;
    }

#login .index a,#register .index a,#checkout .index a,#veri .index a,#demo .index a,#reset_form .index a{
    font-size: 0.8rem;
    letter-spacing: 0.1rem;
}

#Front_Page .background{
    overflow-x: hidden;
}
    @media screen and (max-width:1520px) {
    #Front_Page .index a,#product_page .index a,#rineABOUTUS .index a{
        font-size: 0.8rem;
        letter-spacing: 0.1rem;
    }
}

    #Front_Page .index_logo img,#product_page .index_logo img,#rineABOUTUS .index_logo img,#demo .index_logo img{
        width: 280px;
        height: auto;
        padding-bottom: 5%;
    }

@media screen and (min-width:1400px) {
    #Front_Page .bi_text,#Front_Page .li_text{
        padding-top: 0%;
    }

    #Front_Page .bir{
        justify-content: start;
        padding-left: 10%;
        padding-top: 0;
        margin-top: 0;
        width: 100%;       
    }

    #Front_Page .li_div .bir{
        width: 125%;
    }

    #Front_Page .li_text h1,#Front_Page .bi_text h1{
        letter-spacing: 0.3rem;
        font-size: 1.5rem;
        padding-bottom: 0;
    }


    #Front_Page .bir h1{
        font-size: 1.2rem;
        letter-spacing: 1rem;
    }

    #Front_Page .bir img{
        width: 20%;
    }

    #Front_Page .bi_wra .bir img{
        width: 28%;
    }

    #Front_Page .bird_sp{
        width: 50%;
    }

}

@media screen and (max-width:1250px) {
    #Front_Page .index_logo{
        display: none;
    }

    #Front_Page .menu_wrapper{
        justify-content: center;
    }

    #Front_Page .index_div{
        padding: 0;
    }

    #Front_Page #menu{
        padding-bottom: 5%;
    }

    #Front_Page .index a,#login .index a,#reset_form .index a{
        font-size: 1rem;
        letter-spacing: 0.5rem;
    }

    .tree{
    position: absolute;
    width: 8%;
    height: auto;
    bottom: 0;
    right: 3%;
}

#main_banner img{
    width: 100%;
    height: auto;
}

#main_blank img{
    width: 15%;
    left: 17%;
}

.hole{
    top: 15%;
    width: 125px;
    height: 125px;
}

}

@media screen and (max-width:1200px) {
    #Front_Page .li_div,#Front_Page .bi_div{
        align-items: start;
    }

    #Front_Page .bir{
        padding-bottom: 25%;
    }
}

@media screen and (max-width:1000px) {
    #Front_Page .li_ab{
        padding: 0 0 0 0;}

    #Front_Page .toab_btn{
    left: 5%;}

    #Front_Page .abtext p,#Front_Page .abtext{
    padding-bottom: 10%;}

    #Front_Page .abtext p,#Front_Page .toab_btn a{
        font-size: 1rem;
    }

    #Front_Page .background{
        position: relative;
    }

    #Front_Page .aboutt-menu{
        z-index: 99999;
        position: absolute;
        width: 100%;
        height: 100%;
        /*background-color: #3d4044;*/
        background-image: url(https://storage.googleapis.com/rine_bucket_for/img/photo/74455_0.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        display: none
    }



        #Front_Page .but_click{
        display: inline-block;
    }

        #Front_Page .c_click{
            transform: rotate(90deg);
            transition: all ease-in-out 1s;
    }

    #Front_Page #menu-but p{
        color: #ffffff;
        font-size: 2rem;
        font-weight: 700;
    }

    /*#Front_Page .menu-but{
        display: block;
    }*/

    .hole{
        width: 100px;
        height: 100px;
    }

    .tree{
        width: 15%;
    }

#bird_hop{
    top: 22%;
    left: 35%;
}

    @keyframes bird{
    25%{
        top: 22%;
        left: 35%;
    }

    50%{
        left: 50%;
        top: 25%;
    }

    65%{
        top: 23%;
        left: 67%;
    }

    80%{
        top: 70%;
        left: 70%;
    }

    100%{
        top: 68%;
        left: 85%;
    }
}
}

@media screen and (max-width:1000px) {
    #Front_Page .toab_btn{
    left: 5%;}

    #Front_Page .abtext p,#Front_Page .abtext{
    padding-bottom: 10%;}

    #Front_Page .abtext p,#Front_Page .toab_btn a{
        font-size: 1.5rem;
    }

    #Front_Page .li_text p,#Front_Page .bi_text p{
        font-size: 1.2rem;
    }

    #Front_Page .ui a{
        display: none;
    }

    #Front_Page .ui li :nth-child(1){
        left: 50%
    }

    #Front_Page #g-nav{
        display: none;
    }

    .bird_sp{
        width: 120%;
        height: auto;
    }

    #main_blank{
        width: 20%;
    }

    #main_banner{
        width: 80%;
    }
    #main_blank img {
        top: 60%;
    }

    #main_background{
        height: auto;
    }

    #main_nav{
        max-width: 200px;
    }
}

@media screen and (max-width:800px) {
    #Front_Page #menu{
        display: flex;
        justify-content: center;
    }

    #Front_Page .li_div,#Front_Page .bi_div{
        align-items: center;
    }

    #Front_Page #main_background{
        height: auto;
        padding-bottom: 50px;
    }

    #Front_Page #main_banner{
        width: 100%;
        top: 15%;
    }

    #Front_Page #main_banner img{
        width: 100%;
        height: auto;
    }

    #Front_Page #main_blank{
        position: absolute;
        width: 100%;
        height: auto;
        left: 0;
        bottom: 33%;

        display: none;
    }

    #main_blank img{
        width: 16%;
    }

    .hole{
        width: 75px;
        height: 75px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

    #main_nav{
        width: 40%;
        height: 40%;
        display: flex;
        justify-content: start;
        display: none;
    }

#bird_hop{
    top: 45%;
    left: 15%;
}

#bird_hop img{
    width: 30%;
    height: auto;
}

    @keyframes bird{


    50%{
        left: 30%;
        top: 45%;
    }

    100%{
        left: 45%;
        top: 45%;
    }
}
}

@media screen and (max-width : 600px) {
    #Front_Page .index a{
        font-size: 0.8rem;
        letter-spacing: 0.3rem;
    }
    #Front_Page .li_div .bird_sp{
        width: 75%;
    }
    #Front_Page .bi_div .bird_sp{
        width: 100%;
    }    
}

@media (any-hover: hover){
    #Front_Page .ui_RW a:hover,#Front_Page .ui a:hover{
        opacity: .6;
        transition: 1s;}

}


/*關於我們/新Q&A
----------------------------------------------------*/
body {
    position: relative;
    overflow-anchor: none;}
  
img {
    max-width: 100%;
    flex-shrink: 0; }

    #rineQA{
        margin: 0;
        line-height: 0;
        opacity: 1;
        background-image: url(https://storage.googleapis.com/rine_bucket_for/img/photo/74462.jpg);
        background-position: center;
        background-repeat: no-repeat; 
    } 

    #rineQA p{
        text-align: center;
        line-height: 2rem;
        font-size: 1.5rem;
    }

    #rineQA p,#rineQA h1{
        color: #ffffff;
    }

        /*想到用處前隱藏
----------------------------------------------------*/
    .x-but{
        display: none;
        position: fixed;
        top: 32%;
        left: 15%;
        width: 100px;
        height: 100px;
        letter-spacing: 2rem;
        border: 0;
        /*background-color: #000;*/
        background-color: transparent;
        z-index: 1000;
    }

    .x-but p,#rineQA .x-but p{
        color: #fff;
        font-weight: 600;
        z-index: 999;
        font-size: 1.5rem;
        line-height: normal;
        border: #000 px solid;
    }

    #rineQA .background {
        background-image: url(https://storage.googleapis.com/rine_bucket_for/img/photo/74462.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        position: relative;
        height: auto;
        overflow: hidden;
        width: 100%;}
    
    #rineQA main{
        overflow: hidden;
    }

    #rineQA header{
        position: fixed;
        bottom: 0;
        right: 0;
        width: 22.5%;
        height: 50vh;
        z-index: 998;
        text-align: center;
        box-sizing: border-box;
        background-color: transparent;
        overflow: hidden;}

     #rineQA header a{
        font-weight: 600;
        font-size: 200%;
        letter-spacing: 0.5rem;
        line-height: 5rem;
        color: #ffffff;
     }

    main article .main_block .main_inner{
        background: url();
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        position: relative; }

    main article .main_block{
        background-color: rgba(0,0,0,0.6);
        width: 32.8%;
        margin: 0px 22.5% 0 auto;
        box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.6); }

.left_block{
    width: 100%;
}

    .left_block .inner{
        position: fixed;
        top: 75%;
        left: 5%;
    }

    .left_block  img{
        width: 40%;
    }

    .main_inner{
        padding: 0 2% 0 2%;
    }
        
    #rineQA .sns{
        position: relative;
        display: flex;
        width: 100%;
        padding-left: 0;

    }
    
    #rineQA .sns li{
        width: 100%;
    }

    #rineQA .sns a{
        display: flex;
        justify-content: center;
        padding: 0;
    }

    #aboutus{
        position: relative;
        width: 100%;
        height: auto;
    }

    #aboutus h1{
       margin: 0;
       padding-top: 10vh;
       padding-bottom: 7vh;
    }

    #aboutus p{
        padding-top: 5%;
    }

    #aboutus a{
        padding-top: 5%;
        color: #ffffff;
    }

    #rineQA .sns .inner,#rineQA .logo{
        position: relative;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
        padding-bottom: 5%;

    }

    #rineQA .logo{
        width: 80%;
        padding: 0 10% 0 10%;
    }

.inden{
    text-indent: 3%;
}

    .fadeUp .sns{
        justify-content: center;
    }

    #rineQA .logo a{
        display: flex;
        justify-content: start;
    }

    #rineQA .logo img{
        width: 100%;
    }

    #rineQA .inner img{
        max-width: 100%;
    }

    #rineQA .sns img{
        width: 80px;
        max-width: 50%;
    }

    .fadeUp {
        animation-name: fadeUpAnime;
        animation-duration: 0.8s;
        animation-fill-mode: forwards;
        padding-bottom: 10vh;
        opacity: 0; }
      
      @keyframes fadeUpAnime {
        from {
          opacity: 0;
          transform: translateY(100px); }
        to {
          opacity: 1;
          visibility: inherit;
          transform: translateY(0); } }

    .main_inner h1{
        font-weight: 400;
        font-size: 1.3rem;
        display: flex;
        justify-content: center;
        padding-bottom: 5%
    }

    .main_inner p{
        font-weight: 500;
        font-size: 100%;
    }

    #rineQA .fadeUp p{
        font-size: 1.2rem;
        font-weight: 300;
        line-height: 170%;
        text-align: start;
        padding: 0 4% 0 4%;
    }


    #rineQA .fadeUp span{
color: #ffffff;
text-align: right;
    }

    #rineQA .fadeUp:nth-child(2),#rineQA .fadeUp:nth-child(3){
        text-align: center;
        font-weight: 400;
    }

    .aboutt-menu{
        position: absolute;
    }

    .invi{
        display: none;
    }

    .aboutt-menu ul{
        width: 100%;
        position: fixed;
        top: 40%;
        text-align: center;
        z-index: 999;
    }

    .aboutt-menu a{
        color: #ffffff;
        line-height: 3.5rem;
        font-size: 1.5rem;
        letter-spacing: 0.5rem;
    }

    #rineQA footer{
        display: none;

        position: relative;
        width: 100%;
    }

#rineQA footer p{
    text-align: start;
}

    #menu-but{
        position: fixed;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        z-index: 1000;
        /*background-color: #000000;*/
        background-color: transparent;
        border: 0;

        display: none;
    }
    
    #rineQA .about-menu a{
        letter-spacing: 0.3rem;
        font-size: 1.3rem;
    padding: 7.5px 15px 7.5px 15px;
    outline: rgba(0, 0, 0, 0.5) 1px solid;
    outline-offset: 0px;
    transition: 0.5s all ease-in-out;
    background-color: rgba(0, 0, 0, 0.4);
    }

    #rineQA .about-menu a:hover{
            outline-offset: 5px;
             padding: 12.5px 20px 12.5px 20px;
    transition: 0.5s all ease-in-out;
    }

    .x-x{
    display: none;}

    @media screen and (max-width:1200px) {
        header .about-menu a{
           letter-spacing: 0rem;      
        }
    }

    @media screen and (min-width:1500px){
        .left_block .inner{
        top: 60%;
        left: 9%;
        }
    }

        @media screen and (min-width:1000px){
        .left_block .inner{
        top: 60%;
        left: 2%;
        }
    }

    @media screen and (max-width:1000px) {
        header{
            display: none;
        }

        main article .main_block{
            margin-right: 0;
            width: 60%;
        }
        
        .left_block .inner{
            left: 1%;
        }

        #rineQA .logo img{
            max-width: 80%;
        }

        #aboutus{
            width: 100%;
            position: relative;
        }

        #aboutus p{
            padding: 0 5% 0 5%;
        }

        #rineQA p{
        line-height: 2rem;
        font-size: 1.5rem;
    }
    }

@media screen and (max-width:900px) {

}

    @media screen and (max-width:800px) {
        .left_block{
            display: none;
        }

        main,article,.main_block,.main_inner{
            min-width: 100%;
        }

        .main_inner div{
            padding-left: 10%;
            align-self: center;
        }

        .main_inner h1{
            font-weight: 500;
            font-size: 1.5rem;
        }

        #rineQA p{
            font-size: 1.0rem;
            line-height: 1.4rem;
        }

        #service p{
            font-weight: 550;
            font-size: 1.5rem;
            line-height: 1.8rem;
        }

        #rineQA header{
            display: none;
        }

        #rineQA header a{
            font-size: 10px;
            max-width: 30%;
            color: #000;
            z-index: 999;
        }

        #rineQA button{
            display: block;
            z-index: 999;
        }

        .fadeUp{
            max-width: 75%;
        }

        .about-menu{
            position: fixed;
            top: 0;
            left: 0;
            line-height: 1.2rem;}

        .about-menu a{
            color: #ffffff;
        }

        #rineQA footer{
            display: inline-block;
        }

        .aboutt-menu{
        z-index: 99999;
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url(https://storage.googleapis.com/rine_bucket_for/img/photo/74455_0.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        display: none
    }

        #rineQA #menu-but,#product_page #menu-but{
            display: block;
        }

        #rineQA #menu-but p{
            display: inline-block;
            font-size: 200%;
            transform: rotate(90deg);
        }

        .but_click{
        display: inline-block;
    }

        .c_click{
            transform: rotate(90deg);
            transition: all ease-in-out 1s;
    }

        .cc{
            display: none;
        }

        #rineQA .color_black{
            display: flex;
            justify-content: space-evenly;
        }

        #rineQA .color_black ul:nth-child(1){
            line-height: 150%;
        }

        #rineQA .color_black ul:nth-child(2),#rineQA .color_black ul:nth-child(2) p{
            text-align: start;
        }

        #rineQA .color_black .en{
            font-size: 1.45rem;
        }

            .footer_p3 li{
    text-align: start;
    }
    #rineQA .copyright p{
        color: #000;
    }
    }

    @media (any-hover: hover){
        #rineQA button:active{
            background-color: #eb0000;
        }

        #rineQA .about-menu a:hover{
            opacity: .6;
            transition: all ease-in-out 1s;
         }

         #riQAne .sns a:hover{
            opacity: .6;
            transition: all ease-in-out 0.6s;
         }

    }


/*新關於我們
----------------------------------------------------*/
#rineABOUTUS{
    margin: 0;
    /*height: 100vh;*/
    position: relative;
    width: 100%;
    background-image: url(https://storage.googleapis.com/rine_bucket_for/img/photo/74462.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;

}

#rineABOUTUS .menu_wrapper{
    justify-content: start;
}

#rineABOUTUS .index_logo{
    padding-right: 30%;
    left: 3%;
}

#rineABOUTUS .background{
    position: relative;
    width: 100%;

    z-index: -1;
    background-position: 15%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: rgba(40, 44, 63, 0.45);    
}



.blur{
    backdrop-filter: blur(10px);
    transition: all ease-in-out 1.2s;
}

#rineABOUTUS main article{
    position: relative;
}

/*#rineABOUTUS footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
}*/

.backkk{
    filter: blur(10px);
    opacity: .9;
    transition: 5s ease-in-out all;
}

.can_scroll{
    overflow-y: scroll;
}

/*.bakabaka{
    background-image: url(../麻雀.jpg);
}*/

#rineABOUTUS article{
    width: 100%;

}

#rineABOUTUS .ui{
    position: relative;
    width: 100%;
    height: auto;
    overflow-x: hidden;

    background: linear-gradient(rgba(255, 255, 255, 1),rgba(255, 255, 255, 0.4));
}

#rineABOUTUS .ui ul{   
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100%;
    justify-content: space-evenly;
}

#rineABOUTUS .ui li:nth-child(n+2){
    display: flex;
    align-items: center;
    font-style: italic;
}

#rineABOUTUS .ui a{
    font-weight: 600;
    color: #000;
    font-size: 1.3rem;
}

#rineABOUTUS .ui_RW{
    display: none;

    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
}

#rineABOUTUS .ui_RW a{
    color: #ffffff;
    font-size: 2rem;
    line-height: 2.5rem;
    font-weight: 600;
    font-style: italic;
}

#inv{
    display: none;

    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: #eb0000;
    z-index: 999;
}

.invv{
    display: block;
}

#rineABOUTUS .main h1{
    font-weight: 600;
    font-size: 3rem;
    text-align: center;
}



#rineABOUTUS .auimg,#rineABOUTUS .auimg2,#rineABOUTUS .auimg3{
    position: absolute;
    background-color: #ffffff;
    display: none;
}
.au-text-div h1{
    text-align: center;
    font-size: 1.5rem;
    padding-bottom: 5%;
}
.au-text-div{
    width: 60%;
left: 0px;
padding-left: 20%;
padding-right: 20%;
    font-weight: 320;
    line-height: 215%;
    color: rgb(255, 255, 255);
    opacity: 0.8;
    letter-spacing: 0.1rem;
    font-size: 1.2rem;
    padding-bottom: 5%;
}
.au-text-div:nth-child(1){
    padding-top: 5%;
}
.au-img-div{
    padding: 0 10% 0 10%;
    width: 80%;
    position: relative;
    display: flex;
    justify-content: center;
}
.au-img-div img{
    width: 300px;
    max-width: 30%
}

.au-img-div img:nth-child(1),.au-img-div img:nth-child(2){
    padding-right: 0.5%;
}

.au-img-div{
    padding-bottom: 10%;
}

.au-img-div div{
    height: auto;
    width: 50%;
    display: flex;
    align-self: center;
    justify-content: center;
}

#rineABOUTUS .auimg{
    top: 45vh;
    right: 10%;
    width: 200px;
    height: 200px;
}

#rineABOUTUS .auimg2{
    top: 75vh;
    left: 15%;
    width: 100px;
    height: 100px;
}

#rineABOUTUS .auimg3{
    top: 150vh;
    left: 15%;
    width: 300px;
    height: 300px;
}

/*.wwwwa{
    background-image: url(https://storage.googleapis.com/rine_bucket_for/img/no.jpg);
    transition: all ease-in-out 1s;
}*/

#rineABOUTUS .main{
    width: 100%;
    height: calc(100vh - 100px);
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.6);
}

#rineABOUTUS .main::-webkit-scrollbar{
    display: none;
}

#rineABOUTUS .fade:nth-child(3),#rineABOUTUS .fade:nth-child(4){
    padding-top: 10vh;
}

#rineABOUTUS .fade:nth-child(5){
    text-align: center;
}

#rineABOUTUS .inner{
    width: 100%;
    height: 150vh;
}

.innertop{
    padding-top: 10%;
    transition: all ease-in-out 1s;
}

.innertop_del{
    padding-top: 0;
    transition: all ease-in-out 1s;
}

#abu-co,#abu-co2,#abu-co3{
    width: 100%;
}

#abu-co3{
    padding-bottom: 10%;
}

.fade_img{
    position: relative;
    display: flex;
    justify-content: center;
    padding: 5% 0 5% 0;
}

.fade_img img{
    max-width: 50%;
    width: 500px;
    height: auto;
    text-align: center;
}

#rineABOUTUS .intro{
    position: relative;
    text-align: start;
    align-items: center;
    width: 80%;
    padding: 0 10% 0 10% ;
}

#rineABOUTUS .intro h1{
    color: #ffffff;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 1.2rem;
    opacity: .8;
}

#rineABOUTUS .intro p{
    font-size: 1.3rem;
    font-weight: 320;
    line-height: 215%;
    color: #ffffff;
    opacity: .8;
    letter-spacing: 0.1rem;
}

#fimg3{
    padding-bottom: 10%;
}

#fimg2 img:nth-child(2){
    padding-left: 3%;
}

#rineABOUTUS .intro a,#rineABOUTUS .intro h1{
    z-index: 999;
}

.nocolor{
    opacity: 0;
}

.yescolor{
    opacity: 1;
    transition: all ease-in-out 3s;
    animation-name: fadeUpAnime;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
}

.color_black{
    background-color: #3d4044;
    display: flex;
}

.color_blue{
    background-color: #ffffff;
    width: 100%;
    text-align: start;
}

#rineABOUTUS .sns_logo{
    display: flex;
    justify-content: end;

}

/*#rineABOUTUS .sns_logo a{
    padding-left: 1rem;
}*/

.color_black ul,.color_black ul p,.color_black ul a{
    color: #ffffff;
}

    .foot_p3 p{
        position: relative;
        text-align: start;
    }

#rineABOUTUS .copyright p{
    color: #000000;
    font-size: 1.2rem;
} 

#rineABOUTUS .color{
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0;
    left: 100px;
    z-index: 1000;
    background-color: #eb0000;
}

#rineABOUTUS .color2{
    position: absolute;
    width: 150px;
    height: 300px;
    top: 0;
    left: 100px;
    z-index: -1;
    background-color: rgb(255, 0, 221);
}

#rineABOUTUS .color3{
    position: absolute;
    width: 250px;
    height: 200px;
    top: 0;
    left: 100px;
    background-color: #00eeff;
    z-index: -1;
    display: none;
}

#rineABOUTUS .color4{
    position: absolute;
    width: 250px;
    height: 150px;
    top: 0;
    right: 350px;
    z-index: 10;
    background-color: #00ff4c;

    display: none;
}

#rineABOUTUS .colorshow{
    display: inline-block;
    animation: colorshow 1.2s;
}

#fufufu{
    position: fixed;
    top: 50%;
    right: 15%;
    width: 50px;
    height: 50px;
    background-color: #00eeff;
}

#rineABOUTUS #menu-but p{
    color: #ffffff;
}

@keyframes colorshow{
    0%{
        opacity: .6;
        transform: translateY(100px);
    }

    100%{
        opacity: 1;
        transform: translateY(0px);
    }
}

@media screen and (max-width:1250px) {
#rineABOUTUS .index_logo{
    display: none;
}

    #rineABOUTUS .auimg{
    top: 45vh;
    left: 5%;
    width: 300px;
    height: 400px;
}

#rineABOUTUS .menu_wrapper{
    justify-content: center;
}

#rineABOUTUS .index a{
    font-size: 1rem;
    letter-spacing: 0.5rem;
}

#rineABOUTUS .index_div{
padding: 0;
}

    #rineABOUTUS #menu{
    padding-bottom: 5%;
    background-color: #ffffff;
}

#rineABOUTUS .auimg2{
    top: 75vh;
    left: 15%;
    width: 100px;
    height: 100px;
}

#rineABOUTUS .auimg3{
    top: 150vh;
    left: 5%;
}

#rineABOUTUS .intro{
    padding-bottom: 10%;
}

#abu-co3{
    padding-bottom: 30%;
}

#rineABOUTUS .fade:nth-child(3), #rineABOUTUS .fade:nth-child(4) {
    padding-top: 0;
}
}

@media screen and (max-width:1000px) {

}

@media screen and (max-width :900px) {


    #rineABOUTUS .intro{
        width: 50%;
    }

    #rineABOUTUS .intro:nth-child(5) img{
    display: none;
}

    #rineABOUTUS .auimg3{
        width: 250px;
        height: 250px;
    }

    #rineABOUTUS .auimg{
    top: 45vh;
    left: 5%;
    width: 250px;
    height: 250px;
}
    
}

@media screen and (max-width :800px){
        #rineABOUTUS .ui{
        display: none;
    }

        #rineABOUTUS .intro{
            width: 90%;
            left: 0;
            padding-left: 5%;
            padding-right: 5%;
        }

}

@media screen and (max-width :600px){


    #rineABOUTUS .ui_RW{
        display: inline-block;
    }

    #rineABOUTUS ul{
        display: block;
        flex-direction: column;
    }

    .color_black{
        display: flex;
        justify-content: center;
    }

    .color_black ul:nth-child(3){
        display: inline-block;
    }
}

@media (any-hover: hover){
    #ui_RW,#ui :hover{
        opacity: .6;
        transition: all ease-in-out 0.5s;
    }

    #rineABOUTUS .sns_logo a:hover{
        filter: blur(4px);
    }
}
    .temp{
        position: absolute;
        width: 100%;
        height: auto;
        top: 0;
        left: 75%;
        z-index: 999;
    }
    #rineQA .temp{
        line-height: normal;
        display: flex;
    }
    #rineQA #cart-count{
        top: 0;
    }
    .cart{
        position: relative;
    }
    .cart img{
        position: relative;
    }

    #cart-count{
        position: absolute;
        top: -40%;
        left: 5%;
        background-color: red;
        color: white;
        border-radius: 50%;
        padding: 2px 6px;
        font-size: 1rem;
    }

    .auth-button{
    background-color:transparent;
    border: 0;
}

.auth-button:hover{
    opacity: -6;
}

    #auth-img,.cart img{
        width: 30px;
        background-color: transparent;
    }

    @media screen and (max-width : 800px) {
        .temp{
            position: fixed;
        }
    }

        #register { font-family: Arial, sans-serif; margin: 0; }
        #register .background{display: flex; justify-content: center; align-items: center; height: 100vh; background-image: url(https://storage.googleapis.com/rine_bucket_for/img/photo/74455_0.jpg);background-repeat: no-repeat;background-attachment: fixed;background-size: cover;}
        #register .register-container { background-color: #fff; padding: 20px 40px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 300px; text-align: center; }
        #register h1 { margin-bottom: 20px; color: #333; }
        #register .form-group { margin-bottom: 15px; text-align: left; }
        #register label { display: block; margin-bottom: 5px; color: #555; }
        #register input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
        #register .subbut { width: 100%; padding: 10px; background-color: #7a7563; border: none; color: #fff; border-radius: 4px; cursor: pointer; font-size: 16px; }
        #register .subbut:hover { background-color: #9c9681; opacity: .8; }
        #message { margin-top: 15px; font-weight: bold; }
        #register .success { color: #28a745; }
        #register .error { color: #dc3545; }
        #register ul h1{color: #fff;}
        #register label span{
            color: #555;
            font-size: 0.8rem;
            font-weight: 450;
        }

        #login .login_wrapper{position: relative; display: flex; justify-content: center; align-items: center; height: 100vh; background-image: url(https://storage.googleapis.com/rine_bucket_for/img/photo/74455_0.jpg);background-repeat: no-repeat;background-attachment: fixed;background-size: cover;z-index: 2;padding: 5% 0 5% 0;}
#login .login-container {position: relative; background-color: #fff; padding: 20px 40px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 300px; text-align: center;z-index: 9999; }
#login h1 { margin-bottom: 20px; color: #333; }
#login .form-group { margin-bottom: 15px; text-align: left; }
#login label { display: block; margin-bottom: 5px; color: #555; }
#login input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
#login .subbut { width: 100%; padding: 10px; background-color: #9c9681; border: none; color: #fff; border-radius: 4px; cursor: pointer; font-size: 16px; }
#login .subbut:hover { background-color: #9c9681; opacity: .8; }
#login #message { margin-top: 15px; font-weight: bold; }
#login .success { color: #28a745; }
#login .error { color: #dc3545; }
#login ul h1{color: #fff;}
#login .login-container::before{
    display: block;
    content: "";
    background-image: url(img/Rine小圖.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 3%;
    right:10%;
    width: 100px;
    height: 100px;
    background-color: transparent;
    z-index: 999;
}

#login .index_logo,#register .index_logo,#checkout .index_logo,#cart .index_logo,
#veri .index_logo,#demo .index_logo,#reset_form .index_logo{
    left: 3%;
    padding-right: 30%;
}
#login .index_logo img,#register .index_logo img,#checkout .index_logo img,#cart .index_logo,
#veri .index_logo img,#demo .index_logo,#reset_form .index_logo img{
    width: 280px;
    height: auto;
    padding-bottom: 5%;
}

#login .menu_wrapper,#register .menu_wrapper,#checkout .menu_wrapper,#veri .menu_wrapper,#demo .menu_wrapper,#reset_form .menu_wrapper{
    justify-content: start;
}

#veri,#reset_form{
    position: relative;
    width: 100%;
    height: auto;
    max-height: 100vh;
}

.veri_main{
    max-width: 80%;
    width: 700px;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: fixed;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.reset_main{
    text-align: center;
    position: relative;
    width: 100%;
    height: 80vh;
    align-items: center;
    display: flex;
}

#veri .index a{
    font-size: 1rem;
}

#veri .background{
    width: 100%;
    height: 80vh;
}

#login #menu-but img{
    position: relative;
    z-index: 1;
}

@media screen and (max-width : 1350px) {
    #orderok .index a,#veri .index a{
        font-size: 0.8rem;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    #orderok .index_div,#veri .index_div{
        padding: 0;
    }
}

@media screen and (max-width : 1260px){
    #login .index_div,#register .index_div,#product_page .index_div,#rineABOUTUS .index_div,#demo .index_div,#reset_form .index_div{
        padding-right:0;
    }
    #login .index_logo,#register .index_logo,#product_page .index_logo,#rineABOUTUS .index_logo,#demo .index_logo,#reset_form .index_logo{
        padding-right: 20%;
    }
}

@media screen and (max-width : 1000px) {
#login .menu_wrapper,#register .menu_wrapper,#checkout .menu_wrapper,#cart .menu_wrapper,
#veri .menu_wrapper,#orderok .menu_wrapper,#reset_form .menu_wrapper{
    justify-content: center;
}
    #orderok #menu-but,#veri .menu_wrapper #menu-but{
        display:none;
    }
    #orderok .index a{
        font-size: 1rem;
        padding-right: 1.5rem;
        padding-left: 1rem;
    }

    #register .menu_wrapper,#login .menu_wrapper,#reset_form .menu_wrapper{
        padding-bottom: 5%;
    }
}

@media screen and (max-width : 600px) {
    #orderok #menu{
        display: none;
    }
    #orderok #menu-but{
        display:block;
    }
    .container p{
        font-size: 0.8rem;
    }
}

#cart-items-container{position: relative;width: 100%;height: auto;}

        #checkout{ font-family: Arial, sans-serif;margin: 0 }
        #checkout .background{display: flex; justify-content: center; align-items: center; height: 100%; background-image: url(https://storage.googleapis.com/rine-bucket/img/photo/74432_0.jpg);background-repeat: no-repeat;background-attachment: fixed;background-size: cover;
        padding-top: 5%;padding-bottom: 5%;}
        #checkout .checkout-container { display: flex; justify-content: space-evenly; background-color: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); width: 100%; max-width: 80%; }
        #checkout h1, h2 { color: #333; text-align: center; }
        #checkout .cart-items { border: 1px solid #ddd; border-radius: 4px; padding: 15px; margin-bottom: 20px;width: 100%; }
        #checkout .cart-item { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #eee; }
        #checkout .cart-item:last-child { border-bottom: none; }
        #checkout .cart-item-name { font-weight: bold; }
        #checkout .cart-total { font-size: 1.2em; font-weight: bold; text-align: right; margin-top: 10px; }
        #checkout .form-group { margin-bottom: 15px; }
        #checkout label { display: block; margin-bottom: 5px; color: #555; font-weight: bold; }
        #checkout select,#checkout input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
        #checkout button { width: 100%; padding: 12px; background-color: #000000; border: none; color: #fff; border-radius: 4px; cursor: pointer; font-size: 18px; margin-top: 20px; }
        #checkout button:hover { background-color: #000000; opacity: .6;}
        #checkout #message { margin-top: 20px; text-align: center; font-weight: bold; }
        .success { color: #28a745; }
        .error { color: #dc3545; }
        #checkout .red{color: #9b313b;padding-left: 1%;}
        #checkout ul h1{color: #fff;}
        #order-comment{width: 100%;height: 100px; resize: none;}
        #checkout .flex{width: 30%;}
        #checkout .cart-item span{max-width:30%;}
        .cart-fake-bg{
            width: 30%;
            height: auto;
        }
        .fake-bg{
            width: 20%;
            height: auto;
            display: flex;
            justify-content: center;
        }

        #info-checkbox{width: 100%;position: relative;display: flex;justify-content: start;}
        #info-checkbox input{width: 30%;}

#checkout .cart-item-url{
    width: 50px;
    height: auto;
}
#checkout .payment-option-guide p{
    font-weight: 350;
    font-size: 0.85rem;
}
#checkout .payment-option-guide{
    padding-top: 3%;
}
#checkout .payment-option-guide h3{
    text-align: center;
}

        @media screen and (max-width : 1000px) {
            #checkout .checkout-container{max-width: 100%;display: block;}

            #checkout .flex{width: 100%;}
        }


        #orderok .background{width: 100%;height: 80vh;background-size: cover;}
        #orderok .container { max-width: 600px; margin: auto; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1);background-color: rgb(255, 255, 255);position: fixed;top: 30%;left: 35%;top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);}
        #orderok .menu_wrapper{justify-content: start;}
        #orderok .index a{font-size: 1rem;letter-spacing: 0.1rem;}
        #orderok .index_logo{left: 3%;padding-right: 30%;}
        #orderok .index_logo img{width: 280px;height: auto; }
        #orderok .container a{
            color: rgb(112, 109, 92);
        }

/* 容器樣式 */
.payment-selector {
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-width: 400px;
}

/* Label 設定為 Flex 容器，讓它變成一個可點擊區塊 */
.payment-option {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 2px solid #e0e0e0; /* 預設邊框 */
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: #fff;
}

/* 當滑鼠移過去時的效果 */
.payment-option:hover {
  border-color: #b0b0b0;
}

/* --- 核心區 --- */


.custom-radio {
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  margin-right: 15px;
  position: relative;
  display: flex; /* 為了讓中間的點置中 */
  justify-content: center;
  align-items: center;
}

/* 3. 自製圓點 (內圈 - 選中時才出現) */
.custom-radio::after {
  content: "";
  width: 10px;
  height: 10px;
  background-color: #007bff; /* 選中時的顏色 */
  border-radius: 50%;
  transform: scale(0); /* 預設縮小隱藏 */
  transition: transform 0.2s ease;
}

/* --- 選中狀態 (Checked State) --- */

/* 2. 當 custom-radio 被選中時，讓內圈圓點放大出現 */
.custom-radio.selected::after { /* 🚨 關鍵修改：依賴 .selected 類別 */
  transform: scale(1);
}

/* 3. 當外層 Label 被選中時，改變邊框 */
.payment-option.selected { /* 🚨 關鍵修改：依賴 .selected 類別 */
  border-color: #007bff;
  background-color: #f0f8ff;
}

/* 4. 改變 .custom-radio 外圈的邊框 */
.payment-option.selected .custom-radio {
  border-color: #007bff;
}

/* 內容文字樣式 */
.content {
  display: flex;
  flex-direction: column;
}
.title {
  font-weight: bold;
  color: #333;
}
.desc {
  font-size: 0.85em;
  color: #666;
}

.order-success-container{
    width: 80%;
    padding: 0 10% 0 10%;
    height: auto;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.priv_main{

    width: 60%;
    padding: 0 20% 0 20%;
    height: auto;
    position: relative;

    padding-bottom: 5%;
}

.priv_sec{
    padding-top: 1%;

    align-items: center;
}

.priv_div{
    padding: 1% 0 1% 0;
    padding-left: 15%;
    padding-right: 15%;
    width: 70%;
    padding-bottom: 3%;
}

.priv_div p{
    align-items: center;
}

#priv_Page{
position: relative;
width: 100%;

overflow-x: hidden;
overflow-y: scroll;
min-width: 100%;
height: 100vh;
}

.priv_main h1{
text-align: center;
padding-top: 3%;
}

.priv_main h2{
    text-align: center;
}
.info-block h3{
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width:950px) {
    .color_black ul{
        max-width: 25%;
    }

    .sns_logo{
        padding: 0%;
    }
}
@media screen and (max-width:800px){
.au-text-div{
    font-size: 1rem;
}
.inv_div img{
    max-width: 30%;
}
.inv_text{
    font-size: 1rem;
}
    .SHOW{
        max-width: 60%;
        justify-content: center;
        display: flex;
    }
    .SHOW_LIT li img{
        max-width: 70%;
    }    
}


@media screen and (max-width:700px) {
    #Front_Page #menu{
        display: none;
    }

    #footsp ul p,#footsp li a{
        font-size: 0.7rem;
    }

    #footsp ul h1{
        font-size: 1.5rem;
    }

    .sns_logo img{
        width: 25px;
        height: 25px;
    }
    #register #menu,#login #menu,#rineABOUTUS #menu{
        display: none;
    }
    #menu-but{
        display: block;
    }
    #demo #menu-but{
        display: none;
    }

    .related-product-card {
    width: 45%;
}
}

@media screen and (max-width:600px) {
    .color_black ul:nth-child(1),.color_black ul:nth-child(3){
        display: none;
    }
    .color_black ul{
        max-width: 50%;
    }
    #rineABOUTUS .color_black ul:nth-child(1){
        display: none;
    }
    #rineABOUTUS .color_black{
        justify-content: space-evenly;
    }

    #rineABOUTUS .intro p{
        font-size: 1rem;
    }
    #demo .SHOW img {
        width: 80%;
        padding: 0 10% 0 10%;
    }
    #rineABOUTUS main{
        height: 100vh;
    }
#demo .m_wrapper{
    height: auto;
    padding-top: 10%;
}
.inv_div{
    text-align: center;
}
.inv_text{
    padding: 0 5% 0 5%;
    width: 90%;
}
}

@media screen and (max-width:500px){
    #Front_Page .abtext p, #Front_Page .toab_btn a {
        font-size: 1rem;
    }
    #Front_Page .li_text p, #Front_Page .bi_text p {
        font-size: 1rem;
    }
    #Front_Page .bi_div,#Front_Page .li_div{
        display: inline-block;
        padding-bottom: 10%;
    }
    #Front_Page .bird_div,#Front_Page .bi_text,#Front_Page .li_text{
        width: 80%;
        padding: 0 10% 0 10%;
    }
    #Front_Page .bir{
        display: block;
        width: 100%;
        padding-left: 0;
        padding-top: 10%;
        align-self: center;
    }
    #Front_Page .bir img{
        width: 200px;
    }
    #Front_Page .bi_div .bird_sp{
        max-width: 50%;
    }
    .color_black ul{
        padding: 0;
    }

    #product_page .bi_wra,#product_page .li_wra{
        display: none;
    }

    #checkout .index_div a,#rineABOUTUS .index_div a,#demo .index_div a{
        font-size: 0.7rem;
        margin: 0;
        letter-spacing: 0.1rem;
    }
}
    #checkout .index_div,#rineABOUTUS .index_div,#demo .index_div{padding: 0;}
@media screen and (max-width:450px){
    #rineABOUTUS .temp,#rineQA .temp,#product_page .temp,.temp{
    left: 70%;
}
}

@media screen and (max-width:400px) {
    .color_black{
        display: block;
        padding: 4% 0 4% 0;
        
    }

    #footsp ul p,#footsp li a{
        font-size: 1rem;
    }

    #footsp ul h1{
        font-size: 1.7rem;
    }

    .color_black ul{
        max-width: 100%;
    }
#rineABOUTUS .sns_logo{
    display: none;
}
    #rineABOUTUS .intro p{
        font-size: 0.9rem;
    }

    #demo #menu-but{
        display: block;
    }
    #demo #menu{
        display: none;
    }
    .inv{
        padding-bottom: 5%;

    }
}

        .pagination-button.current-page {
    font-weight: bold;
    border: 2px solid #007bff;
}

@media screen and (min-width:1400px) {
    #product_page .li_wra,#product_page .bi_wra{
        display: none;
    }
}