#content_wrap{padding-top: 1vw;} /* sidenav */ #sidenav{position: relative;margin-left: 0;display: inline-block;vertical-align: top;width: 100%;} #sidenav a#showSide {padding: 10px 20px;background: #e8e8e8;border: 1px #e8e8e8 solid;box-shadow: 0 0 3px rgb(0 0 0 / .2);display: block;color: #080808;} #sidenav a#showSide i {margin-right: 10px;color: #080808;} #sidenav h3.sideTitle {font-weight: 900;font-size: 30px;color: var(--primary);font-family: 'Montserrat', sans-serif;text-transform: uppercase;font-weight: bold;margin-bottom: 20px;padding: 5px;border-bottom: solid 1px #3c3c3c;} #sidenav ul.cate >li h4 , #sidenav ul.cate >li ul li .subULHead { position: relative; } #sidenav ul.cate >li a {padding: 12px 20px 12px 30px;display: block;font-weight: 400;color: #303030;padding-top: 15px;padding-left: 42px;padding-bottom: 15px;border-bottom: solid 1px #bfbfbf;position: relative;} #sidenav ul.cate >li a:after {display: inline-block;content: "";width: 7px;height: 7px;border-top: 1px solid #939393;border-right: 1px solid #939393;transform: translateY(-50%) rotate(45deg);vertical-align: 1px;position: absolute;left: 20px;top: 50%;} #sidenav ul.cate >li.action >h4 a {background: #ffffff00;color: #000000;} #sidenav ul.cate >li >ul a:after{left: 25px;transform: translateY(0%) rotate(0deg);border-right: 0px solid #939393;} #sidenav ul.cate >li ul {display: none;-webkit-transition: none;transition: none;} #sidenav ul.cate >li.action >ul , #sidenav ul.cate >li >ul >li.action >ul {display: block;} #sidenav ul.cate >li >ul a {padding-left: 50px;border-left: 2px transparent solid;} #sidenav ul.cate >li >ul >li.action >div p a {border-left-color: var(--primary);color: var(--primary);} #sidenav ul.cate >li >ul >li >ul li a {padding-left: 60px;color: #7b7b7b;} #sidenav ul.cate >li >ul >li >ul li.action a { font-style: italic; } #sidenav ul.cate >li b[data-action="sideOpen"] {position: absolute;padding: 0 10px;right: 20px;width: 35px;height: 40px;display: inline-block;text-align: center;line-height: 41px;top: calc((100% - 41px) / 2);left: auto;cursor: pointer;} #sidenav ul.slist li { padding: 12px 5px; } #sidenav ul.slist li a { color: #626262; } /* sidenav */ #sidenav{position: relative;margin-left: 0;margin-bottom: 0;display: inline-block;vertical-align: top;width: 260px;} #sidenav a#showSide {padding: 5px 10px;background: #202020;border: 1px #202020 solid;box-shadow: 0 0 3px rgb(0 0 0 / .2);display: block;color: #202020;color: #fff;} #sidenav a#showSide i {margin-right: 10px;color: #ffffff;} #sidenav h3.sideTitle {font-weight: 900;font-size: 30px;color: var(--primary);font-family: 'Montserrat', sans-serif;text-transform: uppercase;font-weight: bold;margin-bottom: 20px;padding: 5px;border-bottom: solid 1px #3c3c3c;} #sidenav ul.cate >li h4 , #sidenav ul.cate >li ul li .subULHead { position: relative; } #sidenav ul.cate >li a {padding: 12px 20px 12px 30px;display: block;font-weight: 400;color: #747474;padding-top: 15px;padding-left: 42px;padding-bottom: 15px;border-bottom: solid 1px #bfbfbf;position: relative;} #sidenav ul.cate >li a:after {display: inline-block;content: "";width: 7px;height: 7px;border-top: 1px solid #939393;border-right: 1px solid #939393;transform: translateY(-50%) rotate(45deg);vertical-align: 1px;position: absolute;left: 20px;top: 50%;} #sidenav ul.cate >li.action >h4 a {background: #ffffff00;} #sidenav ul.cate >li >ul a:after{left:25px;transform:translateY(0%) rotate(0deg);border-right:0px solid #939393} #sidenav ul.cate >li ul { display: none; -webkit-transition: none; transition: none; } #sidenav ul.cate >li.action >ul , #sidenav ul.cate >li >ul >li.action >ul {display: block;} #sidenav ul.cate >li >ul a {padding-left: 50px;border-left: 2px transparent solid;} #sidenav ul.cate >li >ul >li.action >div p a {border-left-color: var(--primary);color: var(--primary);} #sidenav ul.cate >li >ul >li >ul li a { padding-left: 60px; color: #2196F3; } #sidenav ul.cate >li >ul >li >ul li.action a { font-style: italic; } #sidenav ul.cate >li b[data-action="sideOpen"] {position: absolute;padding: 0 10px;right: 20px;padding-left: calc(100% - 40px);width: 35px;height: 40px;display: inline-block;text-align: center;line-height: 41px;top: calc((100% - 41px) / 2);left: 0;cursor: pointer;} #sidenav ul.slist li { padding: 12px 5px; } #sidenav ul.slist li a { color: #626262; } /* imglist */ #imglist img {height: auto;object-fit: contain;} #imglist .img_nav{display: none;} #imglist .img_nav img {margin: 0 10px 0 0;width: 140px;height: 80px;} /* productinfo */ #imglist h2 {font-size: 25px;color: #2d2d2d;font-weight: bold;border-bottom: 1px #e5e4e4 solid;padding-bottom: 1.7vw;text-align: center;} #imglist .txt , .buyBtns {margin-bottom: 10px;text-align: center;} .buyBtns{margin-top: 20px;} #productinfo .txt label { margin-right: 15px; width: 50px; } #productinfo .price font { font-size: 18px; } #productinfo article {font-weight: 400;margin-bottom: 1.7vw;font-size: .875rem;line-height: 1.6em;color: #898989;display: none;} #productinfo #community { margin-top: 15px; } #tabSp .info { margin: 15px 0; } #tabSp .info .txt {margin: 0;padding: 12px 0px;border-bottom: 1px #e5e4e4 solid;display: flex;justify-content: space-between;} #tabSp .info .txt label {color: #0f2942;width: 150px;} #tabSp .info .txt a , #tabSp .info .txt b {display: inline-block;vertical-align: middle;font-weight: bold;line-height: 1.125em;font-size: 20px;color: #191f23;font-family: 'Montserrat', sans-serif;} /* product_area */ #product_area{padding: 0vw 0 2vw;} #product_area .title_box p,#product_area .title_box .page_title{text-align: center;padding-left: 0;} #product_area .title_box .page_title::before{display: none;} #product_area ul{display:flex;flex-wrap:wrap;flex-direction: row;} #product_area ul li{padding:0px;margin-bottom: 60px;width: calc((100% / 3) - 30px);position: relative;box-shadow: rgba(0, 0, 0, 0.04) 2px 2px 4px 0px, rgb(0 0 0 / 11%) -5px -5px 24px 0px;background-color: #fff;} #product_area ul li::before{content:'';position:absolute;bottom:-20px;height:calc(100% - 0px);/* background-color:#ffffff; */right: calc(0% - 0px);width: calc(100% + 0px);z-index: -1;} #product_area ul li .info_box{top:280px;right:0;z-index:10;width:100%;height:auto;margin:0 0 0 auto;display: flex;flex-direction: column;} #product_area ul li .info_box .img_box{ position: relative; } #product_area ul li .info_box .img_box img{ height: 260px; object-fit: cover; object-position: center; } #product_area .row .info_box .Txt{display:flex;flex-direction:column;margin: 15px;} #product_area .row .info_box h3 {margin: 0px 0 0;overflow: hidden;white-space: unset;color: var(--info);height: auto;font-size: clamp(21px, 1.05vw, 40px);line-height: 160%;font-weight: 500;display: block;padding-bottom: 16px;margin-bottom: 10px;border-bottom: 1px solid #d6dadb;-webkit-line-clamp: 2;} #product_area .row .info_box .line {margin: 20px -40px 10px;width: 50px;height: 1px;background: #161616;opacity: .7;display: none;} #product_area .row .info_box article {height: 45px;font-weight: 300;font-size: 16px;-webkit-line-clamp: 3;color: #000;} #product_area .row .info_box .price { margin-top: 15px; min-height: 30px; } #product_area .row .info_box .price font { margin-left: 20px; font-weight: 300; } #productdetail{overflow:hidden;position:relative;padding: 55px;background:#ffffff;margin-bottom:15px} .producintroBox h1{font-size: clamp(18px, 1.05vw, 40px);font-weight: 400;color: #1b1b1b;letter-spacing:1px;position:relative;margin-bottom:30px;text-align: left;line-height: 160%;} .producintroBox h1::after{content:"";position:absolute;bottom: -35px;width:35px;height:1px;background: #666666;left: 0;} /* orderfunction */ #productinfo #orderfunction { margin-bottom: 25px; } #orderfunction a { line-height: 24px; } #orderfunction a.limit { line-height: 21px; } #orderfunction input { width: 50px; } #product_area_p,#productinfo_p{padding: 0px 0px 0px;display:flex;flex-wrap:wrap;justify-content: flex-start;} #product_area_p b,#productinfo_p b{font-size: 16px;color: #545454;width:100%;font-family: 'Poppins',sans-serif;font-weight: 500;} #product_area_p b{color:#464646;font-weight:500;font-family:'Poppins',sans-serif;font-size: 15px;width: calc((100% / 2) - 0px);} #product_area_p b.Ttext0{ width: 100%; } #product_area_p b span{ width: 1px; height: 15px; background-color: #b1b1b1; display: inline-block; margin: 0 15px; } #product_area_p label{width: 56px;text-align-last:justify;display:inline-block;padding-right:5px;font-weight:400;font-size:14px} #productinfo_p label{width: 80px;text-align-last:justify;display:inline-block;padding-right:10px;font-weight: 400;} .addtrack{width:150px;border:1px solid;border-radius:50px;cursor:pointer;margin:10px 0px 0px 0px;text-align: center;padding: 10px;} #productdetail .shopbox{margin-top: 50px;} #productdetail .infoBox{display:flex;flex-wrap:wrap;margin-bottom:20px} #productdetail .infoBox li{padding: 0.3rem 5px 1.3rem 5px;border-bottom:1px solid #dfdfdf;width: calc((100% / 2) - 10px);color:#464646;font-weight:600;font-family:'Poppins',sans-serif} #productdetail .infoBox li p{vertical-align:initial;color:#464646;font-weight:500;font-family:"Noto Sans TC",sans-serif} #productdetail .infoBox li p.p-detail-item{width:120px;color:#616161} #productdetail .infoBox li p{float:left;color:#606060;width:calc(100% - 120px)} /* buyBtns */ .buyBtns a {padding: 10px 0;background: var(--primary);} /* productTabs */ #productTabs{ position: absolute; background-color: #fff; z-index: 10; top: -50px; -webkit-box-shadow: 0px 0px 15px 0px rgb(4 4 4 / 18%); box-shadow: 0px 0px 15px 0px rgb(4 4 4 / 18%); } #productTabs ul.tabs {margin: 0px 0 0px;z-index: 2;position: relative;text-align: center;font-family: "Noto Sans TC", sans-serif;display: flex;flex-direction: row;flex-wrap: wrap;} #tab2{ font-family: "Noto Sans TC", sans-serif;} #productTabs ul.tabs li a { padding: 10px 40px; font-family: "Noto Sans TC",sans-serif;} #productTabs ul.tabs li.active a {color: #ffffff;background-color: var(--primary);} #tabs_container .tab_content img{width:100%;} table{width:100%;border-collapse:collapse} td, th{padding: 4px;border:1px solid #a2a9b1;text-align: center;} td p{text-align: center;} #tabs_container .tab_content td img{width:auto;} #tabs_container .tab_content span{font-size:18px;line-height:170%} table{overflow-x: auto;white-space: nowrap;padding-bottom: 10px;} table::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);background-color:#f9f9f9;} table::-webkit-scrollbar{height:6px;background-color:black;} table::-webkit-scrollbar-thumb{background-color:#a2a1a1;border-radius:50px;} @media screen and (min-width: 1281px){ #sidenav a#showSide { display: none; } .producintroBox h1{ width: 290px; } #productdetail{overflow:hidden;position:relative;display:flex;align-items:flex-start;justify-content:space-between} #productdetail .shopbox{display:flex;align-items:center;justify-content: flex-end;text-align:justify;align-content: flex-start;flex-direction: column;margin-left: 60px;margin-top: 0;width: calc(100% - 250px);} #sidenav{position:relative;margin-left:0;display:inline-block;vertical-align:top;width: 210px;padding:10px 30px} .producbox{margin-left: 0%;display:inline-block;vertical-align:top;margin-top:0%} .bannerArea .title-box h2{padding-bottom:20px} #product_area .row:hover .info_box .line{width:100%;background:#172a88} } @media screen and (max-width: 1280px){ #sidenav h3.sideTitle { display: none; } #sidenav ul.cate {position: absolute;width: calc(100% - 2px);background: #fff;border: 1px #e1e1e1 solid;box-shadow: 0 0 3px rgb(0 0 0 / .2);z-index: -1;opacity: 0;-webkit-transform-origin: 50% 0;-ms-transform-origin: 50% 0;transform-origin: 50% 0;-webkit-transform: scale(0.75) translateY(-21px);-ms-transform: scale(0.75) translateY(-21px);transform: scale(0.75) translateY(-21px);-webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;} #sidenav ul.cate[data-type="1"] { z-index: 99; opacity: 1; -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0); } #productinfo {margin-top: 5vw;width: 100%;} #imglist { width: 100%; } #content_wrap{padding: 7vw 0 1vw 0;} .bannerArea .title-box{position:relative;padding: 45px 0px;} #product_area .row .img_box {opacity: 1;} #product_area ul li::before{/* width:calc(70vw + 50px); */} #sidenav{ position: absolute; right: 0; top: 75px; z-index: 100; width: 200px; } #productTabs ul{ display: flex; } #productTabs{ width: 88%; } #productTabs ul.tabs li a{ padding: 10px 11px; } } @media screen and (max-width: 1024px){ #tabs_container .tab_content{padding:0;margin-top: 30px;} #imglist img{height: auto;} #tabs_container .tab_content{padding:0;margin-top: 30px;} #productdetail .infoBox{display:flex;flex-direction:column;margin-bottom: 10px;} #productdetail .infoBox li{width:calc(100% / 1);padding:0.7rem 0} #product_area ul li{width: calc((100% / 2) - 30px);} #sidenav ul.cate >li a{ padding-top: 8px; padding-left: 38px; padding-bottom: 8px; } #sidenav ul.cate >li a:after{ left: 15px; } } @media screen and (max-width: 761px){ #product_area .list_box { margin: auto; width: 400px; } #product_area .row .info_box >div {width: calc(100% - 0px);} #product_area .row .info_box article { height: 50px; -webkit-line-clamp: 2; } } @media screen and (max-width: 640px){ #content_wrap{padding: 5vw 0 1vw 0;} #product_area ul li{padding:0px;margin: 0 0px 60px;width: calc((100% / 1) - 0px);background-color: #fff;} #product_area .row .info_box h3{margin: 10px 0 10px;} #product_area ul li::before{display:none} #product_area .row .info_box .Txt{margin:auto;width:calc(100% - 30px);padding: 20px 0;} #product_area ul li .info_box{display:flex;flex-direction:column;align-items:flex-start} #productdetail{padding:35px} } @media screen and (max-width: 500px){ #product_area .list_box { width: 100%; } } #objectLabel { width: 70px; position: absolute; left: 5px; top: 5px; padding: 5px; color: white; text-align: center; }