﻿
.banner {
    float: left;
}

.body_d {
    margin: 0 auto;
   
    margin-top: 10px;
}

.body_box {
    padding: 10px;
}

.header_d {
    
    font-size: 18px;
    font-weight: bold;
        background-color: #F1DABB;
    margin-bottom: 20px;
    background-size:cover;
    color:#440303;
}
.header_d .h1 {
         color: #F1DCC2;
         margin-left:20%;
         padding-top:15px;

}
.header_d .h2 {
            color: #F1DCC2;
         margin-left:20%;
         padding-top:15px;
    }
.header_d .h3 {
            color: #F1DCC2;
         margin-left:20%;
         padding-top:15px;
    }
.header_d .h4 {
            color: #F1DCC2;
         margin-left:20%;
         padding-top:15px;
    }
.header_d .h5 {
            color: #F1DCC2;
         margin-left:20%;
         padding-top:15px;
    }
.header_d .h6 {
            color: #F1DCC2;
         margin-left:20%;
         padding-top:15px;
    }
   
.main_d {
    width: 80%;
    margin:0 auto;


}
/*上一頁標籤*/
.header_d1 h5 {
    margin-left:10%;
    width: 100px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    border-radius: 20px;
    padding: 5px 10px;
    background-color: #342216;
    margin-bottom: 5px;
}
/*產品名稱標籤*/
.header_main h2 {
    margin:0 auto;
    background-color: #F1DCC2;
    width: 80%;
    text-align: center;
    font-size: 30px;
    color: #342216;
    height: auto;
    padding: 8px 0px;
    letter-spacing: 3px;
}
/*咖啡色線*/
.border_1 {
    margin:auto;
    width: 80%;
    height: 1px;
    background-color: #342216;
}

/*.border_3 {
    width: 100%;
    height: 3px;
    background-color: #342216;
}*/
/*內容主標*/
.MiddleBox .page_head {
    text-align: center;
    color: #fff;
    font-size: 22px;
    background-image: url(../../../Images/Rec/product_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 180px;
    padding: 10px;
    margin: 0 auto;
}
/*內容文章*/
.MiddleBox .page_content {
    text-align: center;
    color: #000;
    font-size: 18px;
    letter-spacing: 3px;
    line-height: 35px;
    padding: 10px;
    margin-top: 20px;
}
/*圖片 待刪*/
.MiddleBox {
    width: 100%;
}

.br_04 {
    /*background-color: #454545;*/
    background-color: white;
    padding: 50px 0px 50px 0px;
}
/*List頁圖片效果,需搭配 share.js*/
.ServiceBox {
    width: 100%;
    overflow: hidden;
}

    .ServiceBox a.SBox {
        float: left;
        width: 23.4%;
        position: relative;
        display: block;
        margin: 0px 0.8% 20px 0.8%;
        overflow: hidden;
        border-radius: 6px;
    }

        .ServiceBox a.SBox .bk-Box {
            width: 100%;
            height: 100%;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            /*background: url(../images/icon_go.png) 50% 70% no-repeat;*/
            background-color: #000;
            z-index: 50;
            opacity: 0.6;
        }

.flower_Box a.SBox .bk-Box {
    /*background: url(../images/icon_go.png) 50% 50% no-repeat;*/
    background-color: #000;
}

.ServiceBox a.SBox p {
    position: absolute;
    top: 115px;
    left: 0;
    width: 100%;
    text-align: center;
    color: #FFF;
    font-size: 22px;
    font-weight: bold;
    text-shadow: 0px 0px 5px #666;
    z-index: 60;
}

.flower_Box a.SBox p {
    text-align: left;
    font-size: 27px;
    line-height: 35px;
    width: 90%;
    left: 5%;
    display: block;
    top: auto;
    bottom: 16px;
}

img {
    max-width: 100%;
}

.banner img {
    max-width: none;
}
/*內容頁照片*/
.MiddleBox .DataBox .PhotoBox {
    margin:auto;
    width: 80%;
    padding-top: 30px;
    position: relative;
}


.MiddleBox .DataBox .PhotoBox .Big {
    width: 55%; /*width:585px;*/
    /*height: 352px;*/
    float: left;
    display: block;
    overflow: hidden;
}

.MiddleBox .DataBox .PhotoBox .S_Box {
    width: 45%; /*width:530px;*/
    float: left;
    padding-top: 248px;
}

    .MiddleBox .DataBox .PhotoBox .S_Box .S_photo {
        float: right;
        width: 22.5%;
        margin: 10px 1.2% 0 1.2%;
        overflow: hidden;
        display: block;
    }

.MiddleBox .DataBox .photox6 .S_Box {
    padding-top: 0px;
    width: 33.5%;
}

    .MiddleBox .DataBox .photox6 .S_Box .S_photo {
        width: 46.5%;
        margin: 0px 1.5% 10px 1.5%;
    }

.MiddleBox .DataBox .photox6 .Big {
    width: 66%;
    margin-right: 5px;
    height: 465px;
    overflow: hidden;
}

.MiddleBox .DataBox .PhotoBox p {
    position: absolute;
    left: 60%;
    top: 120px;
    color: #FFF;
}

    .MiddleBox .DataBox .PhotoBox p.t_many {
        left: 60%;
        top: 120px;
    }

@media( max-width:1024px) {
    .ServiceBox a.SBox {
        width: 31.7%;
    }

    .MiddleBox .DataBox .PhotoBox .Big {
        /*height: 342px;*/
    }

    .MiddleBox .DataBox .PhotoBox .S_Box { /*padding-top:195px;*/
    }

    .MiddleBox .DataBox .photox6 .S_Box .S_photo {
        height: 106px;
    }

    .MiddleBox .DataBox .photox6 .Big {
        width: 64%;
    }
}

@media( max-width:800px) {
    .MiddleBox .DataBox .photox6 .Big {
        height: inherit;
    }
}

@media screen and (max-width:768px) {
    .body_d {
        margin: 0 auto;
     
        margin-top: 120px;
    }

    .ServiceBox a.SBox {
        width: 48.4%;
    }

    .MiddleBox .DataBox .PhotoBox .Big {
        height: 262px;
    }

    .MiddleBox .DataBox .photox6 .S_Box .S_photo {
        height: 81px;
    }
}

@media screen and (max-width:599px) {
    .body_d {
        margin: 0 auto;
        width: 90%;
        margin-top: 120px;
    }

    .MiddleBox .DataBox .photox6 .Big {
        margin: 1%;
        width: 98%;
    }

    .MiddleBox .DataBox .photox6 .S_Box {
        margin: 1%;
        width: 98%;
    }

        .MiddleBox .DataBox .photox6 .S_Box .S_photo {
            float: left;
            width: 30%;
            margin: 0px 1.5% 10px 1.5%;
        }
}

@media( max-width:500px) {
    .MiddleBox .DataBox .photox6 .Big {
        margin-bottom: 12px;
    }

    .ServiceBox a.SBox {
        width: 98.4%;
    }
}

@media screen and (max-width:414px) {
    .body_d {
        margin: 0 auto;
        width: 90%;
        margin-top: 120px;
    }
}

@media screen and (max-width:375px) {
    .body_d {
        margin: 0 auto;
        width: 90%;
        margin-top: 120px;
    }
}
