/* productIntro */ #product-detail .productIntro { overflow: hidden; } #product-detail .productIntro .p-album { float: left; width: 48%; } #product-detail .productIntro .p-album .slider-for { padding: 0 0px; } #product-detail .productIntro .p-album .slider-for div div { background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } #product-detail .productIntro .p-album .slider-for div div .fixedimg { display: none; } #product-detail .productIntro .p-album .slider-for div div img { display: block; width: 400px; padding-bottom: 0px; } #product-detail .productIntro .p-album .slider-nav { width: 70%; margin: 20px auto 0; } #product-detail .productIntro .p-album .slider-nav .slick-prev { left: -50px; } #product-detail .productIntro .p-album .slider-nav .slick-next { right: -50px; } #product-detail .productIntro .p-album .slider-nav div div { margin: 0 3px; background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } #product-detail .productIntro .p-album .slider-nav div div img { width: calc(100% - 0px); } #product-detail .productIntro .p-txt .p-txt-detail {} #product-detail .productIntro .p-txt .p-txt-detail .subname { color: #99897a; font-size: 14px; } #product-detail .productIntro .p-txt .p-txt-detail h1 { color: #bdb097; font-size: 38px; line-height: 110%; margin: 10px 0; font-weight: normal; } #product-detail .productIntro .p-txt .p-txt-detail .proSubDes { color: #6a6a6a; font-size: 16px; } #product-detail .productIntro .p-txt .p-txt-detail .proSubDes2 { color: #d7d7d7; font-size: 14px; margin: 20px 0; } #product-detail .productIntro .p-txt .p-txt-detail .howmuch {} #product-detail .productIntro .p-txt .p-txt-detail .howmuch .shopcount, #product-detail .productIntro .p-txt .p-txt-detail .howmuch .shoptype { color: #3d3d3d; font-size: 14px; display: inline-block; } #product-detail .productIntro .p-txt .p-txt-detail .howmuch .shoptype {} #product-detail .productIntro .p-txt .p-txt-detail .howmuch select { display: inline-block; border: 1px solid #cfcfcf; padding: 3px 5px; font-size: 14px; } #product-detail .productIntro .p-txt .p-txt-detail .howmuch dd { display: inline-block; margin-left: 0; } #product-detail .productIntro .p-txt .p-txt-detail .price { margin: 10px 0 20px; } #product-detail .productIntro .p-txt .p-txt-detail .price p { color: #5d5c58; font-size: 16px; text-align: right; } #product-detail .productIntro .p-txt .p-txt-detail .price strong { color: #a89a7f; font-size: 24px; margin-left: 15px; } #product-detail .productIntro .p-txt .p-txt-detail .shophelper { text-align: right; } #product-detail .productIntro .p-txt .p-txt-detail .shophelper a { color: #fff; background: #8f3454; display: inline-block; font-size: 16px; padding: 10px 20px; margin-left: 10px; } #product-detail .productIntro .p-txt .p-txt-detail .shophelper a b { margin-left: 20px; } #product-detail .productIntro .p-txt .p-txt-detail .shophelper a.add { background: #413e37; } #product-detail #product-article .tabs { padding-bottom: 5px; margin-bottom: 20px; } #product-detail #product-article .tabs li { display: inline-block; margin-right: 15px; padding: 23px 10px; } #product-detail #product-article .tabs li.active { background-image: url(/images/03/product-detail-txt-title.png); background-repeat: no-repeat; background-position: 100%; } #product-detail #product-article .tabs li a { color: #4c4c4c; font-size: 19px; } #product-detail .productIntro { overflow: hidden; } /* products */ #products-top { overflow: hidden; } #products ul { overflow: hidden; display: flex; flex-wrap: wrap; } #products ul li { display: inline-block; vertical-align: top; width: calc((100%/3) - 40px); text-align: center; position: relative; height: 100%; -webkit-box-shadow: 0px 5px 15px 0px rgb(128 128 128 / 0%); box-shadow: 0px 5px 15px 0px rgb(128 128 128 / 0%); margin: 10px 10px 30px; background: #fff; padding: 10px; border-radius: 35px; filter: drop-shadow(2px 4px 6px #ddd); overflow: hidden; border-bottom: 0px; } #products ul li .info { border-radius: 5px; } #products ul li .info .productPhoto { margin-bottom: 10px; } #products ul li .info .productPhoto { overflow: hidden; position: relative; z-index: 0; } #products ul li .info .productPhoto { transition: all 0.4s cubic-bezier(0.39, 0.58, 0.57, 1); overflow: hidden; border-radius: 35px; } #products ul li .info:hover .productPhoto { -webkit-transition: all 0.18s ease-in-out; transition: all 0.18s ease-in-out; -moz-transform: scale(0.95, 0.95); -ms-transform: scale(0.95, 0.95); -o-transform: scale(0.95, 0.95); -webkit-transform: scale(0.95, 0.95); transform: scale(0.95, 0.95); } #products ul li .info:hover .productPhoto a.photo { opacity: 0.65; } #products ul li .info .raise_box { margin-top: 20px; } #products ul li .info .raise_box .progress_box { overflow: hidden; margin-bottom: 10px; padding: 2px 3px; height: 8px; border: 1px #d8d8d8 solid; border-radius: 1em; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); } #products ul li .info .raise_box .progress_box >div { height: 100%; background: #b7a179; border-radius: 1em; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); } #products ul li .info .raise_box .progress_box.full >div { background: #ff5a5a; } #products ul li .info .raise_box .raise_txt { display: flex; justify-content: center; align-items: center; } #products ul li .info .raise_box .raise_txt font { margin: 0 .5em; font-size: 15px; } #products ul li .info .raise_box .raise_txt font b { margin: 0 .2em; font-size: 20px; } #products ul li .info h3 { letter-spacing: 0.5px; line-height: 1.5; min-height: 160%; border-bottom: 1px solid #d8d8d8; margin-bottom: 15px; padding: 10px 10px 15px 10px; text-align: center; position: relative; } #products ul li .info h3 a { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; letter-spacing: 1px; font-size: 18px; font-weight: 600; line-height: 1.5; text-align: center; font-family: 'Noto Serif TC', serif; } #products ul li .info span { padding: 10px; font-size: 17px; font-weight: 600; color: #707070; display: none; } #products ul li .info p { padding: 0px 10px; text-align: center; font-weight: 600; font-size: 17px; color: #1d1d1d; font-family: 'Noto Serif TC', serif; } #products ul li .info .addcar { border-radius: 7px; padding: 2px 0px; background: linear-gradient(0deg, #CA2A18 22%, #E96C5E 80%); -webkit-box-shadow: 0 2px 12px rgba(70, 70, 70, 0.64); -moz-box-shadow: 0 2px 12px rgba(70, 70, 70, 0.64); -ms-box-shadow: 0 2px 12px rgba(70, 70, 70, 0.64); box-shadow: 3px 4px 8px 1px rgba(70, 70, 70, 0.64); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; font-size: 18px; color: #ffffff; text-align: center; width: 72%; } #products ul li .info .addcar a { color: #ffffff; } #products ul li .info .addcar a:hover { color: #ffc7c1; text-decoration: none; } /* photoList */ #photoList { overflow: hidden; float: left; width: 450px; } #photoList .bidPhoto { transition: all 0.4s cubic-bezier(0.39, 0.58, 0.57, 1); margin: 10px; } #photoList .bd { float: none; width: 92%; margin-left: 3%; } #photoList .bd { margin-left: 1%; } #photoList .bd ul li { margin: 10px 3px; float: left; width: 25%; } /* prodInfo */ #prodInfo { overflow: hidden; margin: 0px 0 10px 0px; float: right; width: calc(100% - 500px); color: #2e2e2e; } #prodInfo .box, #prodInfo .box .list { overflow: hidden; } #prodInfo .box .list { overflow: hidden; margin: 0px 0 10px; line-height: 200%; } #prodInfo .box .list2 p a.trail { overflow: hidden; margin: 0px 6px; color: #6f6f6f; font-weight: bold; padding: 0px 0; } #prodInfo .box .list2 p a.trail span { overflow: hidden; margin: 0px 6px; color: #ca2a18; font-weight: bold; } #prodInfo .box h3 { font-weight: 600; font-size: 24px; color: #000; line-height: 1.5; margin-bottom: 25px; padding-bottom: 10px; border-bottom: 1px solid #b5b5b5; font-family: 'Noto Serif TC', serif; letter-spacing: .1em; color: #6e3a19; } #prodInfo .box span { font-weight: 400; font-size: 14px; vertical-align: initial; margin-right: 5px; } #prodInfo .box article { line-height: 170%; font-size: 15px; padding: 20px 0; font-weight: 400; font-family: 'Noto Sans TC'; } #prodInfo .box .list p, #prodInfo .box .howmuch p { color: #4c4c4c; font-size: 14px; display: inline-block; margin-bottom: 10px; } #prodInfo .box .list #proType, #prodInfo .box .howmuch #quantity { height: 45px; line-height: 43px; padding: 0 20px 0 15px; font-size: 15px; color: #666; width: calc(100% - 10px); display: inline-block; vertical-align: middle; background-image: url(/images/02/selectbutton.png); background-repeat: no-repeat; background-position: 96% 53%; background-size: 10px; border: 0; -webkit-appearance: none; border: 1px solid #ddd; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: 0 0 0 rgba(0%, 0%, 0%, 0); box-shadow: inset 0 0 0 rgba(0%, 0%, 0%, 0); } #prodInfo .box .list:last-child { width: 100%; text-align: left; margin: 0px 0 10px; display: flex; align-items: center; } #prodInfo .box .list:last-child p { display: inline-block; font-size: 16px; padding: 6px 2px 8px; width: calc(100% / 3); } #prodInfo .box .list p.price { font-size: 25px; color: #222222; font-weight: bold; } #prodInfo .box .list p a { color: #fff; display: inline-block; font-size: 14px; padding: 10px 0px; background-color: #975124; text-align: center; border-radius: 50px; } #prodInfo .box .list p a.buyNow, #prodInfo .box .list p a.caradd, #prodInfo .box .list p a.trail { display: block; } #prodInfo .box .list p a.caradd { color: #020202; background-color: #f1e5d4; } #prodInfo .box .list:last-child p a.trail { color: #020202; background-color: #f1e5d4; } #prodInfo .box .list-inline>li { vertical-align: top; box-sizing: border-box; padding: 0; font-family: 'Noto Sans TC'; } #prodInfo .box .list-inline { display: flex; align-items: baseline; } #prodInfo .box .list-inline>li b { margin-right: 8px; letter-spacing: 0; color: #f00; font-size: 1.4rem; font-weight: 500; } #prodInfo .box .list-inline li.active { margin-right: 6px; text-decoration: line-through; } #prodInfo .box .list-inline li.active span, #prodInfo .box .list-inline li.active b { font-size: 14px; color: #2e2e2e; } #prodInfo .Txt { display: flex; padding: 0 0 10px 0; } /* addBuy */ #products .addBuy .hd { text-align: right; } #products .addBuy .hd a { margin: 0 2px; font-size: 20px; } #products .addBuy ul li { width: 23%; } #products .addBuy ul li .info { position: relative; } #products .addBuy ul li .adBtn { position: absolute; padding: 2px 0; width: 100%; background: #347880; border-radius: 5px 5px 0 0; text-align: center; font-size: 16px; color: #fff; } #products .addBuy ul li .adBtn input { margin-right: 5px; vertical-align: middle; } /* product-article */ #product-article { overflow: hidden; position: relative; } #product-article ul.tabs { width: 100%; overflow: visible; border-bottom: double; border-color: #d6d6d6; } #product-article ul.tabs li { height: 45px; overflow: hidden; position: relative; color: #d6d6d6; font-weight: 500; letter-spacing: 0.5px; line-height: 1.5; padding-bottom: 10px; display: inline-block; margin-right: 20px; padding: 0 20px; } #product-article ul.tabs li a { height: 38px; line-height: 36px; font-size: 18px; font-weight: 500; } #product-article ul.tabs li.active:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: #000000; } #product-article ul.tabs li.active a { color: #000000; } #product-article #tabs_container { width: 100%; margin-top: 20px; } #products-top #prodInfo .box .howmuch .shoptype { color: #3d3d3d; font-size: 14px; display: inline-block; } #products-top #prodInfo .box .howmuch dd { display: inline-block; margin-left: 0; } #products-top #prodInfo .box .howmuch select { display: inline-block; border: 1px solid #cfcfcf; padding: 3px 5px; font-size: 14px; } #products .other-title h2 { width: auto; background: none; color: #707070; font-size: 30px; writing-mode: initial; -webkit-writing-mode: initial; text-align: center; padding: 17px 0px; width: 100%; height: 48px; border-top: 1px #e4e4e4 solid; overflow: visible; } #products-detail .productIntro { overflow: hidden; } #products-detail .productIntro { overflow: hidden; background: #efefef66; mix-blend-mode: multiply; padding: 80px 60px; margin-top: 30px; } #products-detail .productIntro .p-album { float: left; width: 460px; } #products-detail .productIntro .p-album .slider-for { padding: 0 0px; margin-bottom: 10px; } #products-detail .productIntro .p-album .slider-for div div { background-repeat: no-repeat; background-position: 50% 50%; background-size: contain; } #products-detail .productIntro .p-album .slider-for div div .fixedimg { display: none; } #products-detail .productIntro .p-album .slider-for div div img { display: block; padding-bottom: 0px; } #products-detail .productIntro .p-album .slider-nav { width: 90%; margin: 0px auto 0; } #products-detail .productIntro .p-album .slider-nav .slick-prev { left: -25px; } #products-detail .productIntro .p-album .slider-nav .slick-next { right: -25px; } #products-detail .productIntro .p-album .slider-nav div div { margin: 0 3px; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; } #products-detail .productIntro .p-album .slider-nav div div img { width: calc(100% - 0px); } #imglist img { margin-bottom: 20px; width: 100%; object-fit: contain; height: 100%; } #imglist .img_nav img { object-fit: cover; object-position: 50% 0; width: 95%; } #products-detail { overflow: hidden; } #products-detail .sub-pro-img { width: 460px; margin-bottom: 30px; float: left; } #products-detail .sub-pro-img .slick-slider { margin-bottom: 0px; } #products-detail .sub-pro-img .img_nav { margin-top: 10px; } #products-detail .sub-pro-img .slick-dots { bottom: -10px; } #products-detail .sub-pro-img .img_nav .slick-slider { width: 100%; margin: 0px auto 0; } #products-detail .sub-pro-img .img_nav .slick-prev { left: -23px; background: rgb(255 255 255 / 0%); } #products-detail .sub-pro-img .img_nav .slick-next { background: rgb(255 255 255 / 0%); right: -23px; } #products-detail .sub-pro-img .img_nav .slick-prev:before, #products-detail .sub-pro-img .img_nav .slick-next:before { color: #000000; opacity: .65; } .productinfo { display: flex; align-items: center; justify-content: flex-end; margin-top: 30px; } .productinfo .back { text-align: center; } .productinfo .back a { border: 1px solid #975124; color: #975124; font-size: 15px; letter-spacing: 1px; line-height: 1.8; display: block; width: 150px; padding: 5px 0px; transition: 0.5s ease; margin-right: 0; border-radius: 50px; background: #fff9ef; transition: 0.5s ease; } @media screen and (max-width: 1280px) { #product-detail .productIntro .p-album .slider-for { padding: 0; } #product-detail .productIntro .p-album .slider-nav { width: 70%; } } @media screen and (max-width: 980px) { #product-detail .productIntro .p-txt .p-txt-detail .shophelper a { padding: 10px 10px; } } @media screen and (max-width: 1024px) { #prodInfo { width: 100%; } #products-detail .sub-pro-img { width: 100%; } } @media screen and (max-width: 980px) { #photoList { overflow: hidden; float: left; width: 100%; } #product-detail .productIntro .p-album { float: none; width: 100%; } #photoList .bidPhoto { margin: 0; } #prodInfo { overflow: hidden; margin: 20px 0px 0px; float: right; width: 100%; color: #707070; } #products-detail { margin-bottom: 10px; } } @media screen and (max-width: 768px) { #products ul li { width: calc((100%/2) - 40px); } #photoList .bd ul li { margin: 5px 0; } #prodInfo .box, #prodInfo .box:first-child, #prodInfo .box article { width: 100%; } #prodInfo .box .list:last-child { text-align: center; margin: 0px 0 10px; display: flex; flex-direction: row; flex-wrap: wrap; } #prodInfo .box .list:last-child p { margin-top: 0px; width: calc((100% / 2) - 8px); padding: 3px 4px 4px; display: block; } #prodInfo .box .list:last-child p:nth-child(3) { margin-top: -10px; width: 100%; } #product-detail .productIntro .p-album { width: 100%; margin-bottom: 20px; } #product-detail .productIntro .p-txt { width: 100%; } #product-detail .productIntro .p-txt .p-txt-detail h1 { font-size: 30px; } .productIntro #albumBox, .productIntro #introBox { width: 100%; } #products ul li .info h3 { margin-bottom: 15px; margin-top: 0; } #products ul li .info h3 a { font-size: 16px; } } @media screen and (max-width: 640px) { #products ul li .info .productPhoto { padding: 2px; background-color: #fff; margin-bottom: 0; } #products ul li { margin: 10px 5px; } #content-main .productIntro #albumBox, #content-main .productIntro #introBox { width: 100%; } } @media screen and (max-width: 480px) { #product-detail .productIntro .p-txt .p-txt-detail .shophelper a { padding: 5px 15px; font-size: 14px; } .productIntro #addBuy .photoWrap div { width: 48.25%; margin-bottom: 10px; } .productIntro #introBox #detail-view a { display: inline-block; padding: 10px 15px; background: #000; border-radius: 30px; margin-top: 20px; color: #fff; font-size: 15px; font-weight: bold; border: 1px solid #000; } #products-detail .productIntro { padding: 20px 20px; margin-top: 10px; } } @media screen and (max-width: 450px) { #products ul li { margin: 10px 5px; width: calc((100%/2) - 20px); padding: 10px 5px; } #photoList .bidPhoto, #photoList .bd { width: 100%; } #photoList .bd { display: none; } #product-article ul.tabs li a { padding: 0 10px; } #prodInfo .box .list:last-child p a { font-size: 14px; text-align: center; } } @media screen and (max-width: 390px) { #product-detail .productIntro .p-txt .p-txt-detail .shophelper a { display: block; text-align: center; margin-bottom: 5px; } } @media screen and (max-width: 360px) { .productIntro #albumBox #auction-photo .article-img a img { height: 200px; } }