
#product{
    width: 100%;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 0 0 15px 0;
    letter-spacing:10px;
}
#product .title{
    font-size: 2.3rem;
    letter-spacing: 10px;
}
#product .title-en{
font-size: 1.5rem;
letter-spacing: 10px;
}

#product .category{
width: 100%;
display: flex;
}

.childDiv{
position: relative;
width: 100%;
letter-spacing: 2px;
}
.childDiv .bgImg{
width: 100%;
/* height: 100%; */
    
    /* z-index: -2; */
    /* object-fit: cover; */
}
.category-content{
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    text-align: center;

}
.category-content h2{
    font-weight: 100;
    margin: 1rem;
    font-size: 1.6em;
}
.category-content p{
    font-size: .77rem;
    color: rgb(224, 224, 224);
}
.category-icon{
    width: 3rem;
}

/* .childDiv .category-content{
    background:rgba(0,0,0,0.85);
    width: 100%;
    height: 100%;
    padding: 30px 20px 20px 20px;
    box-sizing: border-box;
    visibility:hidden;
}
.childDiv .category-content.show{
    visibility:visible;
    -webkit-animation: categoryContentShow 0.2s both;
    animation: categoryContentShow 0.2s both;
}
@keyframes categoryContentShow {
    0% {
        height: 0%;
    }
    30% {
        height: 30%;
    }
    40% {
        height: 40%;
    }
    50% {
        height: 50%;
    }
    65% {
        height: 65%;
    }
    75% {
        height: 75%;
    }
    100% {
        height: 100%;
    }
}

.category-description{
    font-size: .8rem;
}
.category-title {
    font-size: 1.2rem;
    margin-top: 1rem;
}
.carousel-control-next-icon.category-icon, .carousel-control-prev-icon.category-icon{
    width: 2rem;
    height: 2rem;
    display: inline-block;
}
.carousel-control-next.my-category, .carousel-control-prev.my-category{
    width: unset;
} */

#recommend{
    text-align: center;
    letter-spacing: 2px;
}
.recommend-content img{
    width: 50%;
}
.recommend-title{
    font-size: 1.5rem;
}
.recommend-description{
    color: rgb(212, 212, 212);
}
.recommend-type{
    font-size: 1.25rem;
}
.trait li {
    font-size: .9rem;
    margin-bottom: .4rem;
    color: rgb(194, 194, 194);
    list-style: none;
}
.trait li::before{
    content:"\2022";
    margin-right: .4rem;
    color: rgb(231, 31, 24);
}

.recommend-more, .aesthetics-more{
    padding: 6px 25px;
    color: #fff;
    background-color: transparent;
    font-size: .9rem;
    border: 1px solid rgb(109, 3, 3);
    /*width: 120px;*/
    white-space:normal;
    cursor:pointer;
}

#aesthetics{
    /*background-image: url(../images/cooking-is-much-easier.jpg);*/
    background-repeat: no-repeat;
    background-size: cover;
    letter-spacing: 2px;
    margin-top: 2rem;
}
.aesthetics-content{
    width: 100%;
    padding: 2.5rem;
    box-sizing: border-box;
}
.aesthetics-content>a{
    margin-left: 4%;
}

.aesthetics-title{
    font-size: 1.2rem;
    letter-spacing: .35rem;
}
#aesthetics .aesthetics-title-en{
    font-size: .8rem;
    color: rgb(207, 207, 207);
    letter-spacing: .2rem;
}
.aesthetics-title-en img{
    height: .5rem;
}
.aesthetics-description{
    font-size: .9rem;
    margin: 2rem 1rem;
}
#aesthetics .aesthetics-more{
    margin-top: 2rem;
}

.brand-content{
    width: 100%;
    padding-bottom: 2rem;
}
.brand-content img{
    width: 100%;
    margin-bottom: 1.5rem;
}
.brand-title{
    font-size: 1.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.brand-description{
    margin-top: 1.3rem;
    font-size: .9rem;
    padding: 0 1.8rem;
    color: rgb(187, 187, 187);
}
#brand .brand-more{
    margin-top: 1.2rem;
}

#service-support{
    padding-top: 2rem;
    border-top: 1px dashed rgb(20, 20, 20);
}
#service-support img{
    width: 100%;
}
.service-support-title{
    font-size: 1.5rem;
}
#service-support .service-support-more {
    margin-bottom: 1.5rem;
    margin-top: 1rem;
    /*width: 110px;*/
}
.Otherrecommended{
    width: 100%;
}
.recommended-item{
    width:31%;
}
.recommended-item>img:nth-of-type(1){
    width: 100%;
    height: 15.5rem;
}
.product-title-border{
    padding: 8%;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
}

.service-support-border{
    margin-left: 7%;
}