﻿#Product_Detail {
}

    #Product_Detail .Category {
        display: block;
        padding: 8px 15px;
        margin-bottom: 20px;
        background-color: #f5f5f5;
        border-radius: 4px;
        color: #777;
        font-size: 16px;
    }

    #Product_Detail #KeyInformation {
    }

        #Product_Detail #KeyInformation .MainPic {
            float: left;
            width: 50%;
        }

            #Product_Detail #KeyInformation .MainPic img {
                width: 100%;
            }

    #Product_Detail .ProducrInfo {
        float: left;
        margin-left: 2%;
        width: 48%;
        font-size: 16px;
    }

        #Product_Detail .ProducrInfo .Status {
            width: 100%;
        }

        #Product_Detail .ProducrInfo .Category {
            margin: 5px 0;
        }

            #Product_Detail .ProducrInfo .Category a {
                font-size: 16px;
                color: #24bfcd;
            }

            #Product_Detail .ProducrInfo .Category span {
                margin-left: 5px;
                font-size: 14px;
            }

            #Product_Detail .ProducrInfo .Category .Question {
                float: right;
                color: #fff;
                background: #aaa;
                border-radius: 5px;
                width: 33%;
                padding: 5px 0;
                text-align: center;
            }

        #Product_Detail .ProducrInfo .Title {
            font-size: 26px;
            font-weight: 800;
        }

        #Product_Detail .ProducrInfo .Status .Brief {
            line-height: 18px;
            text-align: justify;
            font-weight: 800;
        }

        #Product_Detail .ProducrInfo .Status .Price {
            text-align: right;
            padding: 5px 0;
            border-top: #ccc 1px solid;
            border-bottom: #ccc 1px solid;
            color: #ff0000;
        }

            #Product_Detail .ProducrInfo .Status .Price .SalePrice {
                font-size: 34px;
                font-weight: 800;
                vertical-align: middle;
            }

            #Product_Detail .ProducrInfo .Status .Price .OriginalPrice {
                margin-left: 10px;
                color: #666;
                font-size: 16px;
            }

            #Product_Detail .ProducrInfo .Status .Price .DiscountBp {
                color: #23cb28;
                font-size: 20px;
                font-weight: 800;
                vertical-align: middle;
            }

            #Product_Detail .ProducrInfo .Status .Price .CheckOut {
                margin-left: 10px;
                display: inline-block;
                text-align: center;
                padding: 6px 12px;
                border-radius: 5px;
                background: #c32323;
                color: #fff;
                vertical-align: middle;
            }

        #Product_Detail .ProducrInfo .Point {
            padding: 7px 0;
            width: 100%;
            text-align: right;
            font-size: 16px;
            font-weight: 800;
        }

            #Product_Detail .ProducrInfo .Point .Numerical {
                font-size: 34px;
                line-height: 34px;
            }

        #Product_Detail .ProducrInfo .Status .Add {
            display: inline-table;
            text-align: center;
            width: 33%;
            padding: 5px 0px;
            border-radius: 5px;
            color: #fff;
            background: #aaa;
        }

        #Product_Detail .ProducrInfo .Status .Quantity {
            display: inline-table;
            width: 29%;
            padding: 2px 0px;
            border: #25ad40 1px solid;
            border-radius: 5px;
        }

            #Product_Detail .ProducrInfo .Status .Quantity label {
                width: 36%;
                text-align: center;
                margin: 2px 2%;
            }

            #Product_Detail .ProducrInfo .Status .Quantity input {
                width: 60%;
                border: none;
                font-size: 20px;
            }

        #Product_Detail .ProducrInfo .Status .Chick {
            display: inline-table;
            text-align: center;
            padding: 5px 0px;
            width: 33%;
            border-radius: 5px;
            background: #25ad40;
            color: #fff;
        }

            #Product_Detail .ProducrInfo .Status .Chick.SoldOut {
                display: inline-table;
                text-align: center;
                padding: 5px 0px;
                width: 33%;
                border-radius: 5px;
                background: #c32323;
                color: #fff;
            }

        #Product_Detail .ProducrInfo .Status .GroupProduct {
            /*padding-bottom: 10px;
            font-size: 14px;*/
            width: 70%;
            float: left;
        }

            #Product_Detail .ProducrInfo .Status .GroupProduct select {
                width: 99%;
                font-size: 20px;
            }

        #Product_Detail .ProducrInfo .Status .Stock {
            width: 30%;
            padding-bottom: 10px;
            font-size: 14px;
            float: right;
        }



    #Product_Detail .ProductInformation {
        width: 100%;
    }

        #Product_Detail .ProductInformation h3 {
            margin: 20px 0;
            width: 100%;
            text-align: center;
            border-bottom: #aaa 1px solid;
        }

            #Product_Detail .ProductInformation h3 span {
                position: absolute;
                margin-top: -10px;
                padding: 0 10px;
                background: #fff;
            }

        #Product_Detail .ProductInformation .content {
            color: #000;
            font-size: 16px;
            line-height: 28px;
        }

            #Product_Detail .ProductInformation .content img {
                width: 100%;
            }


    #Product_Detail .Share {
        text-align: center;
        line-height: 52px;
    }

        #Product_Detail .Share span {
            display: inline-block;
        }

        #Product_Detail .Share a {
            display: inline-block;
        }

    #Product_Detail .LineShare,
    #Product_Detail .FbShhare {
        display: inline-block;
        margin: 0 10px;
        width: 60px;
    }

    #Product_Detail .ProducrInfo div#countdown span {
        padding: 10px;
        display: inline-block;
        width: 45px;
        height: 30px;
        line-height: 30px;
        font-size: 35px;
        background-color: red;
        color: white;
        text-align: right;
        vertical-align: bottom;
    }

/*--------------------
         RWD
----------------------*/

@media screen and (max-width:950px) {
    #Product_Detail .Category {
        margin: 0 5%;
        width: 90%;
    }

    #Product_Detail #KeyInformation .MainPic {
        margin: 0 5%;
        width: 90%;
    }

    #Product_Detail .ProducrInfo {
        margin: 0 5%;
        width: 90%;
    }

    #Product_Detail .ProductInformation {
        margin: 0 5%;
        width: 90%;
    }
}

@media screen and (max-width:420px) {
    #Product_Detail .ProducrInfo .Status .Add {
        font-size: 14px;
    }

    #Product_Detail .ProducrInfo .Status .Quantity label {
        width: 54%;
        font-size: 14px;
    }

    #Product_Detail .ProducrInfo .Status .Quantity input {
        width: 40%;
    }
}

@media screen and (max-width:900px) {
    /*#Product_Detail .Share{
        display: none;
    }*/
}


/* 單選框 */
.Feature input[type="radio"] {
    display: none;
}

    .Feature input[type="radio"] + label {
        display: inline-block;
        background-color: #eee;
        cursor: pointer;
        padding: 5px 10px;
        border-radius: 5px;
        margin: 2px;
        min-width: 59px;
        text-align: center;
    }

    .Feature input[type="radio"]:checked + label {
        background-color: #25ad40;
        color: #fff;
    }
