body{ background-color: #F8F8F8; } .sectionContainer{ display: flex; justify-content: center; } .elementorContainer{ max-width: 13.2rem; flex: 1; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .footerContainer{ padding-bottom: 1.2rem; } .productContainer{ padding-top: .3rem; display: flex; justify-content: space-between; margin-bottom: .6rem; } .productImgContainer{ width: 6.48rem; } .prViewImgBox{ background-color: #fff; width: 100%; height: 6.48rem; overflow: hidden; font-size: 0; position: relative; } .prViewImgBox .prViewImg{ width: 100%; height: 100%; } .prImgContainer{ width: 100%; overflow: hidden; position: relative; } .prImgList{ padding-top: .3rem; cursor: pointer; width: 100%; white-space: nowrap; font-size: 0; transition: transform 0.3s ease; } .prImgList .prImgItem{ display: inline-block; width: 1.42rem; height: 1.42rem; overflow: hidden; font-size: 0; background-color: #fff; margin-right: .25rem; } .prImgList .prImgItem:last-child{ margin-right: 0; } .prImgList .prImgItem img{ width: 100%; height: 100%; } .prevArrow, .nextArrow { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; background-color: #000; color: #fff; text-align: center; line-height: 30px; cursor: pointer; display: none; } .prevArrow { left: 10px; } .nextArrow { right: 10px; } .productInfoContainer{ flex: 1; border: .02rem solid rgba(0, 0, 0, .1); min-height: 8.36rem; margin-left: .34rem; padding: 0 .28rem; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; } .productTitle{ color: #434343; line-height: 1.6; padding-top: .6rem; font-size: .24rem; word-break: break-all; } .productPrice p{ color: #333333; font-weight: bold; font-size: .32rem; padding-top: .32rem; } .productPrice p span{ padding-right: .02rem; } .productNContainer{ display: flex; align-items: center; padding: .28rem 0; border-top: .02rem solid rgba(0, 0, 0, .02); border-bottom: .02rem solid rgba(0, 0, 0, .02); margin-bottom: .24rem; } .productNumberBox{ display: flex; align-items: center; height: .62rem; box-sizing: border-box; border: .02rem solid rgba(0, 0, 0, .1); cursor: pointer; } .numberReduce,.numberAdd{ height: 100%; width: .6rem; border-right: .02rem solid rgba(0, 0, 0, .1); display: flex; align-items: center; justify-content: center; font-size: .2rem; } .numberAdd{ border-right: none; border-left: .02rem solid rgba(0, 0, 0, .1); } #numberInput{ height: 100%; flex: 1; font-size: .2rem; border: none; width: .8rem; text-align: center; } .addToCart{ background-color: rgba(191, 77, 240, 1); height: .62rem; display: flex; align-items: center; justify-content: center; width: 3rem; color: #fff; font-weight: bold; font-size: .2rem; cursor: pointer; margin-left: .24rem; border-radius: .08rem; } .addToCart .tag{ font-weight: 400; margin-right: .08rem; } .safeContainer{ width: 100%; min-height: .9rem; border: .02rem solid rgba(0, 0, 0, .05); border-radius: .06rem; position: relative; margin-bottom: .32rem; } .safeContainer .safeTag{ position: absolute; height: .2rem; padding: 0 .12rem; background: #F8F8F8; font-size: .16rem; color: #666666; left: 50%; transform: translateX(-50%); top: -.1rem; z-index: 1; } .safeList{ display: flex; flex-wrap: wrap; gap: .12rem; align-items: center; justify-content: center; padding-top: .28rem; padding-bottom: .12rem; } .safeList .safeItem{ width: .6rem; height: .42rem; } .safeList .safeItem img{ width: 100%; height: 100%; } .articleContainer{ } .articleTabBox{ display: flex; border-top: .02rem solid rgba(0, 0, 0, .1); } .articleTabItem{ position: relative; min-width: .6rem; margin-right: .24rem; cursor: pointer; } .articleTabItem .tabTag{ width: 80%; left: 0; top: -.04rem; height: .08rem; background-color: rgba(191, 77, 240, 1); z-index: 1; display: none; position: absolute; } .articleTabTitle{ font-size: .2rem; font-weight: 400; padding-top: .12rem; color: #666666; display: flex; align-items: center; } .active .articleTabTitle{ font-weight: bold; color: #333333; } .active .tabTag{ display: block; } .articleInfo{ padding: .36rem 0; } .articleTitle{ color: #333333; font-size: .28rem; line-height: 1.4; } #richTextConatiner, #richTextConatiner h1, #richTextConatiner h2, #richTextConatiner h3, #richTextConatiner h4, #richTextConatiner h5, #richTextConatiner h6, #richTextConatiner p, #richTextConatiner ul, #richTextConatiner ol { font-style: .24rem; color: #434343; line-height: 1.5; margin-bottom: .32rem; word-break: break-all; } .fixedAddSection{ display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; height: 1.1rem; background: #FFF; -webkit-box-shadow: 0 -.02rem .05rem rgba(0,0,0,.01); box-shadow: 0 -.02rem .05rem rgba(0,0,0,.01); } .fixedAddContainer{ height: 100%; display: flex; justify-content: center; } .fixedAddBox{ display: flex; justify-content: space-between; align-items: center; height: 100%; } .fPrInfo{ display: flex; align-items: center; flex: 1; } .fPrInfo img{ width: .67rem; height: .67rem; } .fPrInfo .fTitle{ color: #666666; font-size: .18rem; padding-left: .12rem; font-weight: 400; } .fPrNumberContainer{ display: flex; align-items: center; box-sizing: border-box; cursor: pointer; } .fPrPrice{ color: #333333; font-size: .24rem; font-weight: bold; padding-right: .24rem; } .fPrNumberBox{ display: flex; align-items: center; border: .02rem solid rgba(0, 0, 0, .1); height: .4rem; } .fPrNumberReduce,.fPrNumberAdd{ height: 100%; width: .4rem; border-right: .02rem solid rgba(0, 0, 0, .1); display: flex; align-items: center; justify-content: center; font-size: .18rem; } .fPrNumberAdd{ border-right: none; border-left: .02rem solid rgba(0, 0, 0, .1); } #fPrNumberInput{ height: 100%; flex: 1; font-size: .18rem; border: none; width: .4rem; text-align: center; } .fPrAddToCart{ background-color: rgba(191, 77, 240, 1); height: .4rem; display: flex; align-items: center; justify-content: center; width: 2.1rem; color: #fff; font-weight: bold; font-size: .18rem; cursor: pointer; margin-left: .24rem; border-radius: .08rem; } .fPrAddToCart .tag{ font-weight: 400; margin-right: .08rem; } @media (max-width: 1320px) { .sectionContainer{ padding: 0 .12rem; } .fixedAddBox{ padding: 0 .12rem; } .productContainer{ } .productImgContainer{ width: 5.4rem; } .prViewImgBox{ height: 5rem; } .prImgList .prImgItem{ width: 1.16rem; height: 1.16rem; } .productInfoContainer{ min-height: 6.46rem; } } @media (max-width: 1199px) { .elementorContainer{ width: 100%; max-width: none; } .productInfoContainer{ padding-left: .24rem; } .productNumberBox{ height: .5rem; } .numberReduce, .numberAdd{ width: .5rem; } .addToCart{ width: auto; flex: 1; height: .5rem; } .productImgContainer{ width: 4.8rem; } .prImgList .prImgItem{ width: 1.01rem; height: 1.01rem; } .productInfoContainer{ min-height: 6.3rem; } } @media (max-width: 1080px) { .sectionContainer{ padding: 0 .24rem; } .productContainer{ display: block; } .productImgContainer{ width: 7rem; margin: 0 auto; } .prViewImgBox{ height: 7rem; } .prImgList .prImgItem{ width: 1.56rem; height: 1.56rem; } .productInfoContainer{ margin-top: .4rem; margin-left: 0; height: auto; min-height: auto; } .productTitle{ padding-top: .24rem; } #numberInput{ width: 1.2rem; } .productNContainer{ padding: .20rem 0; margin-top: .12rem; } .productNumberBox{ height: .64rem; } .numberReduce,.numberAdd{ width: .64rem; } .addToCart{ height: .64rem; font-size: .22rem; } .articleTabTitle{ font-size: .26rem; padding-top: .16rem; } .articleTitle{ font-size: .32rem; } #richTextConatiner, #richTextConatiner h1, #richTextConatiner h2, #richTextConatiner h3, #richTextConatiner h4, #richTextConatiner h5, #richTextConatiner h6, #richTextConatiner p, #richTextConatiner ul, #richTextConatiner ol { font-size: .24rem; } .fixedAddSection{ height: 1.2rem; } .fPrInfo{ display: none; } .fPrNumberContainer{ flex: 1; } .fPrPrice{ flex: 1; font-size: .28rem; } .fPrNumberBox{ height: .5rem; } .fPrNumberReduce,.fPrNumberAdd{ width: .5rem; font-size: .22rem; } #fPrNumberInput{ font-size: .22rem; width: 1rem; } .fPrAddToCart{ height: .6rem; font-size: .2rem; } } @media (max-width: 750px) { .prViewImgBox{ width: 100%; } }