/*<!--共用元素-->*/
body{
    position: relative;
    font-family: sans-serif, "微軟正黑體";
}

.wrapper{
    /*height: 100vh;*/


}
/*<!--共用元素 end-->*/

/*header*/


/*------------------商品細節頁----------------------*/

.main_nav{
    background-color: #EF024C;
    width: 100vw;
    height: 85px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:center;
}

header img{
    max-width: 100%;
}

/*header end*/

/*section*/
.main_sec{
    width: 100vw;
    height: 1500px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.banner{
    /*background: url("../image/banner1.png") no-repeat right top;*/
    /*background-size: cover;*/
    width: 90%;
    margin-top: 10px;
}

.banner img{
    width: 100%;
}

.main_goods{
    /*border: solid 1px pink;*/
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    width: 80%;
    align-items: center;
    justify-content: center;
}
.goods_pic{
    width: 40%;
}

.goods_pic img{
    width: 100%;
}

.goods_content{
    /*border: solid 1px pink;*/
    padding: 0 21px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.goods_title{
    font-size: 20px;
    padding-bottom: 10px;
    text-align: center;
    border-bottom: solid 1px #979797;
    width: 105%;
    margin-top: 10px;
}
.goods_number{
    display: flex;
    flex-direction: row;
    margin: 10px 0;
    /*width: 90%;*/
}

.number{
    width: 15%;
    font-size: 20px;
    padding: 5px 15px;;
}

.price{
    width: 30%;
    color: #EF024C;
    font-size: 30px;
    font-weight: bold;
    padding: 0 40px;
}

.bt_buy{
    width: 85%;
    height: 40px;
    background-color:#EF024C ;
    border-radius: 10px;
    margin: 10px 80px;
    color: #ffffff;
    font-size: 18px;
    text-align: center;
    border: solid 1px #EF024C;
}

.bt_car{
    width: 85%;
    height: 40px;
    background-color:#EF024C ;
    border-radius: 10px;
    color: #ffffff;
    font-size: 18px;
    text-align: center;
    border: solid 1px #EF024C;
}

.bt_buy:hover{
    cursor: pointer;
    background: #E82360;
}

.bt_car:hover{
    cursor: pointer;
    background: #E82360;
}

.goods_info{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: .5;
}

.content_title{
    border-bottom: solid 1px #979797;
    margin-top: 15px;
    padding-bottom: 10px;
    width: 80%;
    text-align: left;
    font-size: 18px;

}
.content_detail{
    /*border: solid 1px pink;*/
    width: 75%;
    margin: 10px 10px;
    padding: 10px 10px;
    font-size: 16px;
}

.content_photo{
    height: 170px;
    width: 80%;
}
/*section end*/

/*footer*/

.foot_nav{
    background-color: #4A4A4A;
    width: 100vw;
    height: 85px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:space-around;

}

.foot_title{
    color: white;
    font-size: 14px;
    opacity: .5;
}

.foot_title2{
    color: white;
    font-size: 14px;
    opacity: .5;

}

/*footer end*/

/*----------------------------------------------*/




/*!*以下針對671畫面調整*!*/

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

    /*商品細節頁*/
    .main_goods {
        display: flex;
        flex-direction: column;
    }

    .goods_pic {
        width: 90%;
    }
}

    /*!*商品細節頁 end*!*/

/*}*/

/*以下針對414畫面調整*/

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

    /*商品細節頁*/
    .main_goods{
        display: flex;
        flex-direction: column;
    }

    .foot_nav{
        height: 150px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content:space-around;
    }

    .foot_title{
        font-size: 12px;
    }

    .foot_title2{
        font-size: 10px;
        width: 70%;
    }

    /*商品細節頁 end*/

}

/*------------------商品細節頁 end----------------------*/




/*------------------訂單結帳資訊頁面----------------------*/

/*<!--section-->*/
.pay_sec{
    /*border: solid 1px pink;*/
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cart{
    border-bottom: solid 1px #979797;
    width: 90%;
    text-align: left;
    font-size: 18px;
    margin-top: 15px;
    padding-bottom: 10px;
    opacity: .5;
    color: #4A4A4A;
}

.cart_content{
    /*border: solid 1px lightgray;*/
    width: 80%;
    display: flex;
    flex-direction: row;
    padding: 10px 10px;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.cart_pic{
    width: 30%;
    margin-left: 5%;
}

.cart_pic img{
    width: 100%;
}

.cart_detail{
    /*border: solid 1px pink;*/
    width: 100%;
    height: 100%;
}

.cart_title{
    /*border: solid 1px pink;*/
    font-size: 20px;
    text-align: start;
    width: 90%;
    margin-bottom: 10px;
    color: #4A4A4A;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 0;
}

.cart_info{
    /*border: solid 1px pink;*/
    width: 90%;
    display: flex;
    flex-direction:column;
    align-items: flex-end;
    justify-content: space-around;
    padding: 0 0;
}

.cart_price{
    color: #EF024C;
    font-weight: bold;
    font-size: 24px;
}
.cart_count{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
}
.cart_delete{
    color: #EF024C;
}

.cart_line{
    border-bottom: solid 1px #979797;
    opacity: .5;
    width: 90%;
    margin-top: 15px;
}

.check_pay{
    /*border: solid 1px pink;*/
    margin-top: 30px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
}

.check_bt{
    width: 40%;
}

.shopping{
    width: 80%;
    height: 40px;
    background-color: #EF024C;
    border-radius: 10px;
    margin: 5px;
    color: #ffffff;
    font-size: 16px;
    text-align: center;
    border: solid 1px #EF024C;
}

.shopping:hover{
    cursor: pointer;
    background: #E82360;
}

.shopping:disabled {
    width: 80%;
    height: 40px;
    background-color: #A9A9A9;
    border-radius: 10px;
    margin: 5px;
    color: #ffffff;
    font-size: 16px;
    text-align: center;
    border: solid 1px #A9A9A9;
}

.pay_google:hover{
    cursor: pointer;
}

.pay_google{
    width: 80%;
    height: 40px;
    background-color:#ffffff ;
    border-radius: 10px;
    margin: 5px;
    color: #4A4A4A;
    font-size: 18px;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: solid 1px lightgray;
}

.google_logo{
    width:7%;
    margin: 0 5px;
}

.check_total{
    width: 30%;
}
.price_total{
    font-weight: bold;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.total_title{
    font-size: 20px;
    color: #4A4A4A;
}

.price2{
    color: #EF024C;
    font-size: 20px;
}

.price3{
    font-size: 18px;
    color: #4A4A4A;
}

.price4{
    color: #EF024C;
    font-size: 20px;
}

.price_total2{
    font-weight: bold;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    color: #4A4A4A;
    border-bottom:  solid 1px #979797;
    margin-bottom: 30px;
    padding-bottom: 10px;
}




/*以下針對414畫面調整*/

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

    .cart_pic {
        width: 35%;
    }

    .cart_title{
        font-size: 14px;
    }

    .cart_price{
        font-size: 18px;
    }

    .cart_info{
        display: flex;
        flex-direction: row;
    }

    .cart_count{
        margin-bottom: 0px;
    }

    .check_pay{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .check_bt{
        width: 80%;
        margin-bottom: 10px;
    }

    .check_total{
        width: 70%;
    }

    .pay_google{
        margin-left: 32px;
    }

}

/*------------------------------------------------------*/

/*以下針對414畫面調整*/
@media only screen and (max-width: 415px){

    .pay_sec{
        height: 800px;
    }

    .check_bt{
        width: 80%;
        position: relative;
       /* top: 210px;*/
    }

    .check_total{
        width: 70%;
        position: absolute;
        bottom: 350px;
    }
}


/*以下針對375畫面調整*/

@media only screen and (max-width: 376px){
    .cart_title{
        font-size: 12px;
    }

    .cart_price{
        font-size: 16px;
    }

    /*.check_total{*/
    /*width: 70%;*/
    /*position: absolute;*/
    /*bottom: 350px;*/
    /*}*/

}


/*以下針對320畫面調整*/
@media only screen and (max-width: 321px){
    .pay_sec{
        height: 750px;
    }

    .cart_price{
        font-size: 14px;
    }

    .pay_google{
        margin-left: 25px;
    }

    .cart_info{
        font-size: 14px;
    }
}




/*針對ipad*/

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px){
    .wrapper_pay {
        height: 100vh;
        position: relative;
    }

    .footer_pay{
        position: absolute;
        bottom: 0;
    }
}

/*------------------------------------------------------*/

/*------------------訂單結帳資訊頁面 end----------------------*/