/* ========================= Product List ========================= */ #articleProductList { position:relative;color:var(--inner-text); } #articleProductList #product_list {counter-reset:product-item;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap: clamp(10px,3vw,30px) clamp(10px,3vw,30px);margin:0;padding:0;list-style:none;white-space:normal;} #articleProductList .compobox { counter-increment:product-item;position:relative;min-width:0; } #articleProductList .product_card { display:flex;flex-direction:column;height:100%; } #articleProductList .mi_poname { position:relative;padding:12px 12px 14px 14px; } #articleProductList .product_img_frame {position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid rgba(184,149,110,.55);border-radius: 6px 18px 6px 18px;background:#fff;} #articleProductList .product_img_frame::before {position:absolute;top: 10px;right: 10px;bottom: 10px;left: 10px;z-index:-1;border: 1px solid rgb(218 218 218 / 53%);border-radius:42px 18px 42px 18px;content:"";opacity: 0;} #articleProductList .product_img_frame img {display:block;width:100%;height:100%;object-fit:contain;padding:8%;transition:transform .8s cubic-bezier(.22,.61,.36,1);padding: 0;background: #f9f9f9;} #articleProductList .compobox:hover .product_img_frame img { transform:scale(1.055) translateY(-3px); } #articleProductList .product_no { position:absolute;right:23px;bottom:22px;z-index:4;color:rgba(164,33,29,.18);font-family:"Times New Roman",serif;font-size:34px;font-style:italic;line-height:1;letter-spacing:.02em; } #articleProductList .product_no::before { content:counter(product-item,decimal-leading-zero); } #articleProductList .product_corner { position:absolute;top:0;left:0;width:50px;height:50px;pointer-events:none; } #articleProductList .product_corner span:first-child { position:absolute;top:0;left:0;width:28px;height:1px;background:var(--inner-primary); } #articleProductList .product_corner span:last-child { position:absolute;top:0;left:0;width:1px;height:28px;background:var(--inner-primary); } #articleProductList .info_box { display:flex;flex-direction:column;flex:1;padding:24px 15px 0; } #articleProductList .product_meta { display:flex;align-items:center;gap:12px;margin-bottom:10px;color:var(--inner-gold);font-family:"Montserrat",sans-serif;font-size:16px;font-weight:500;line-height:1.4;letter-spacing:.12em; } #articleProductList .product_meta i { display:block;width:30px;height:1px;background:var(--inner-gold);transition:width .35s ease; } #articleProductList .compobox:hover .product_meta i { width:48px; } #articleProductList .porinfo { flex:1; } #articleProductList .porinfo .h3 { min-height:54px;color:var(--inner-text);font-family:"Noto Serif TC",serif;font-size:clamp(22px,1.55vw,28px);font-weight:600;line-height:1.55;letter-spacing:.08em;transition:color .3s ease; } #articleProductList .compobox:hover .porinfo .h3 { color:var(--inner-primary); } #articleProductList .porinfo article { display:-webkit-box;min-height:62px;margin-top:9px;overflow:hidden;color:var(--inner-text-light);font-family:"Noto Serif TC",serif;font-size:16px;line-height:1.9;letter-spacing:.04em;-webkit-box-orient:vertical;-webkit-line-clamp:2; } #articleProductList .product_bottom { display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px;padding-top:17px;border-top:1px solid rgba(184,149,110,.3); } #articleProductList .product_view { display:flex;align-items:center;gap:13px;color:var(--inner-primary);font-family:"Montserrat",sans-serif;font-size:16px;line-height:1.4;letter-spacing:.11em; } #articleProductList .product_view i { position:relative;display:block;width:30px;height:1px;background:var(--inner-primary);transition:width .35s ease; } #articleProductList .product_view i::after { position:absolute;top:-3px;right:0;width:6px;height:6px;border-top:1px solid var(--inner-primary);border-right:1px solid var(--inner-primary);content:"";transform:rotate(45deg); } #articleProductList .compobox:hover .product_view i { width:48px; } #articleProductList .product_dot { display:flex;align-items:center;gap:5px; } #articleProductList .product_dot span { display:block;width:4px;height:4px;border-radius:50%;background:rgba(184,149,110,.6);transition:transform .3s ease,background .3s ease; } #articleProductList .product_dot span:nth-child(2) { width:6px;height:6px;background:rgba(164,33,29,.5); } #articleProductList .compobox:hover .product_dot span:nth-child(2) { background:var(--inner-primary);transform:scale(1.4); } #articleProductList .atag_item { inset:0;z-index:10; } @media screen and (max-width:1199px) { #articleProductList #product_list { gap:65px 32px; } #articleProductList .info_box { padding-right:10px;padding-left:10px; } } @media screen and (max-width:991px) { #articleProductList #product_list { grid-template-columns:repeat(2,minmax(0,1fr));gap:60px 35px; } #articleProductList .porinfo .h3 { min-height:auto; } } @media screen and (max-width:767px) { #articleProductList #product_list { grid-template-columns:1fr;gap:50px; } #articleProductList .mi_poname { padding:8px 8px 10px 10px; } #articleProductList .product_img_frame { aspect-ratio:16/10;border-radius:32px 15px 32px 15px; } #articleProductList .product_img_frame::before { border-radius:32px 15px 32px 15px; } #articleProductList .product_meta { font-size:15px; } #articleProductList .porinfo .h3 { font-size:22px; } #articleProductList .porinfo article { min-height:auto;font-size:15px;line-height:1.9; } #articleProductList .product_view { font-size:15px; } } @media screen and (max-width:500px) { #articleProductList #product_list { gap:42px; } #articleProductList .product_img_frame { aspect-ratio:4/3; } #articleProductList .product_no { right:18px;bottom:17px;font-size:28px; } #articleProductList .info_box { padding-top:19px; } } /* ==================== Product Detail ==================== */ #productdetail{width:100%;max-width:1200px;margin:0 auto;color:var(--inner-text);} #productdetail *{box-sizing:border-box;} #productdetail .bttmom{margin: 40px 0;} #productdetail .productm_top{display:flex;width:100%;align-items:flex-start;gap:clamp(55px,6vw,90px);} #productdetail .ptcm_left{width: 50%;flex: 0 0 50%;} #productdetail .ptcm_right{width: 46%;flex:1;padding-top:10px;} #productdetail .product_gallery{position:relative;} #productdetail #imglist{position:relative;width:100%;} #productdetail #imglist .slick-list{overflow:hidden;} #productdetail #imglist .slick-slide{outline:none;} #productdetail .main_img{position:relative;width:100%;aspect-ratio: 4/3;overflow:hidden;border:1px solid var(--inner-line);} #productdetail .main_img:before{content:"";position:absolute;z-index:3;top:-1px;left:30px;width:72px;height:3px;background:var(--inner-primary);pointer-events:none;} #productdetail .main_img:after{content:"";position:absolute;z-index:3;right:16px;bottom:16px;width:58px;height:58px;border-right:1px solid rgba(195,154,92,.62);border-bottom:1px solid rgba(195,154,92,.62);pointer-events:none;} #productdetail .main_img>a{width:100%;height:100%;display: flex;} #productdetail .main_img img{display:block;width:100%;height:100%;object-fit: cover;object-position:center;transition:transform .7s cubic-bezier(.22,.61,.36,1);} #productdetail .main_img:hover img{transform:scale(1.025);} #productdetail .sumlist{position:relative;margin-top:12px;padding-right:1px;} #productdetail .sumlist .slick-list{margin:0 -5px;} #productdetail .sumlist .slick-slide{padding:0 5px;outline:none;cursor:pointer;} #productdetail .sumlist .thumb_item{position:relative;width:100%;display: flex;aspect-ratio:1/1;overflow:hidden;border:1px solid rgba(21,40,68,.1);transition:border-color .3s,opacity .3s;} #productdetail .sumlist .thumb_item:before{content:"";position:absolute;z-index:2;bottom:0;left:0;width:0;height:2px;background:var(--inner-primary);transition:width .35s;} #productdetail .sumlist img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .45s;} #productdetail .sumlist .slick-current .thumb_item{border-color:rgba(195,154,92,.6);} #productdetail .sumlist .slick-current .thumb_item:before{width:100%;} #productdetail .sumlist .slick-current img{transform:scale(1.04);} #productdetail .sumlist .thumb_item:hover{border-color:var(--inner-primary);} #productdetail .gallery_meta{display:flex;margin-top:15px;align-items:center;gap:12px;color:#92979b;font-size:13px;font-weight:500;line-height:1.2;letter-spacing:.12em;} #productdetail .gallery_meta>span:first-child{color:var(--inner-primary);} #productdetail .gallery_meta i{display:block;width:42px;height:1px;background:var(--inner-primary);} #productdetail .gallery_counter{font-variant-numeric:tabular-nums;} #productdetail .product_info_head{position:relative;margin-bottom:27px;} #productdetail .product_info_label{display:flex;margin-bottom:15px;align-items:center;gap:12px;color:var(--inner-primary);font-size:13px;font-weight:600;line-height:1.3;letter-spacing:.17em;} #productdetail .product_info_label i{display:block;width:48px;height:1px;background:linear-gradient(90deg,var(--inner-primary),rgba(195,154,92,0));} #productdetail .product_info_title{color:var(--inner-secondary);font-size:clamp(25px,2.2vw,32px);font-weight:600;line-height:1.45;letter-spacing:.05em;} #productdetail .product_info_rule{display:flex;margin-top:20px;align-items:center;} #productdetail .product_info_rule span{display:block;width:72px;height:1px;background:var(--inner-primary);} #productdetail .product_info_rule i{display:block;width:5px;height:5px;margin-left:-2px;background:var(--inner-primary);transform:rotate(45deg);} #productdetail .ptcm_right .item{display:block;width:100%;} #productdetail .ptcm_right .article{color:var(--inner-text);font-size:16px;font-weight:400;line-height:2;} #productdetail .ptcm_right .article p{margin:0 0 15px;white-space: pre-wrap;} #productdetail .ptcm_right .article p:last-child{margin-bottom:0;} #productdetail .btns{margin:35px 0 0;text-align:left;} #productdetail .ask{position:relative;display:inline-flex;min-width:190px;height:56px;padding:0 22px 0 26px;border:1px solid var(--inner-secondary);align-items:center;justify-content:space-between;gap:34px;overflow:hidden;color:var(--inner-secondary);background:transparent;text-decoration:none;transition:color .4s,transform .4s,border-color .4s;} #productdetail .ask:before{content:"";position:absolute;z-index:0;top:0;left:0;width:0;height:100%;background:var(--inner-secondary);transition:width .45s cubic-bezier(.77,0,.18,1);} #productdetail .ask:after{content:"";position:absolute;top:0;left:0;width:42px;height:2px;background:var(--inner-primary);transition:width .4s;} #productdetail .ask span{position:relative;z-index:2;font-size:14px;font-weight:500;letter-spacing:.1em;} #productdetail .ask i{position:relative;z-index:2;display:flex;width:38px;height:18px;align-items:center;transition:transform .35s;} #productdetail .ask svg{display:block;width:38px;height:18px;overflow:visible;} #productdetail .ask path{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;} #productdetail .ask:hover{color:#fff;border-color:var(--inner-secondary);transform:translateY(-3px);} #productdetail .ask:hover span{color:white} #productdetail .ask:hover:before{width:100%;} #productdetail .ask:hover:after{width:100%;} #productdetail .ask:hover i{transform:translateX(5px);} #productdetail .ask:hover i svg path{ stroke: white; } /* ==================== Product Tabs ==================== */ #productTabs{position:relative;width:100%;margin-top:30px;} #productTabs .tabs{display:flex;margin:0;padding:0;border-bottom:1px solid var(--inner-line);list-style:none;overflow-x:auto;overflow-y:hidden;} #productTabs .tabs::-webkit-scrollbar{height:3px;} #productTabs .tabs::-webkit-scrollbar-thumb{background:rgba(195,154,92,.4);} #productTabs .tabs li{position:relative;flex:none;margin:0;} #productTabs .tabs li a{position:relative;display:flex;min-width:170px;height:62px;padding:0 28px;border-left:1px solid var(--inner-line);align-items:center;justify-content:center;color:#666d72;background:transparent;font-size:15px;font-weight:500;line-height:1.3;letter-spacing:.05em;text-decoration:none;transition:color .35s;} #productTabs .tabs li:last-child a{border-right:1px solid var(--inner-line);} #productTabs .tabs li a:before{content:"";position:absolute;top:0;left:0;width:0;height:2px;background:var(--inner-primary);transition:width .4s;} #productTabs .tabs li a:after{content:"";position:absolute;right:14px;bottom:12px;width:8px;height:8px;border-right:1px solid rgba(195,154,92,.35);border-bottom:1px solid rgba(195,154,92,.35);} #productTabs .tabs li a:hover{color:var(--inner-secondary);} #productTabs .tabs li a:hover:before{width:42px;} #productTabs .tabs li.active a{color:var(--inner-secondary);font-weight:600;} #productTabs .tabs li.active a:before{width:100%;} #productTabs .tabs li.active a:after{border-color:var(--inner-primary);} #tabs_container{position:relative;padding:clamp(35px,4vw,55px) 0 0;} #tabs_container .tab_content{display:none;color:var(--inner-text);font-size:15px;line-height:1.9;} #tabs_container .tab_content.active{display:block;} #tabs_container .tab_content p{margin:0 0 16px;} #tabs_container .tab_content p:last-child{margin-bottom:0;} #tabs_container .tab_content table{width:100%;border-collapse:collapse;border-spacing:0;} #tabs_container .tab_content table th,#tabs_container .tab_content table td{padding:15px 18px;border:1px solid var(--inner-line);color:var(--inner-text);font-size:14px;line-height:1.7;text-align:left;vertical-align:middle;} #tabs_container .tab_content table th{color:var(--inner-secondary);font-weight:600;} #tabs_container .tab_content img{max-width:100%;height:auto;} /* ==================== Product Slick Arrow ==================== */ #productdetail #imglist .slick-arrow{position:absolute;z-index:8;top:50%;width:46px;height:46px;border:1px solid rgba(21,40,68,.12);background:rgba(255,255,255,.9);font-size:0;cursor:pointer;transform:translateY(-50%);transition:.35s;} #productdetail #imglist .slick-prev{left:14px;} #productdetail #imglist .slick-next{right:14px;} #productdetail #imglist .slick-arrow:before{content:"";position:absolute;top:50%;left:50%;width:11px;height:11px;border-top:1px solid currentColor;border-right:1px solid currentColor;color:var(--inner-secondary);} #productdetail #imglist .slick-prev:before{transform:translate(-35%,-50%) rotate(-135deg);} #productdetail #imglist .slick-next:before{transform:translate(-65%,-50%) rotate(45deg);} #productdetail #imglist .slick-arrow:hover{border-color:var(--inner-primary);background:var(--inner-secondary);} #productdetail #imglist .slick-arrow:hover:before{color:#fff;} @media screen and (max-width:1470px) { #productdetail .ptcm_left { width: 40%; flex: 0 0 40%; } #productdetail .productm_top { gap: clamp(55px,5vw,90px); } } @media screen and (max-width:1199px) { #productdetail .productm_top { gap: 50px; } #productdetail .ptcm_left { width: 52%; flex-basis: 52%; } #productdetail .ptcm_right { width: 48%; } #productdetail .ptcm_right .article { font-size: 15px; line-height: 1.9; } #productTabs .tabs li a { min-width: 150px; padding: 0 22px; } } @media screen and (max-width:991px) { #productdetail .productm_top { display: block; } #productdetail .ptcm_left,#productdetail .ptcm_right { width: 100%; } #productdetail .ptcm_right { margin-top: 48px; padding-top: 0; } #productdetail .main_img { aspect-ratio: 16/10; } #productdetail .ptcm_right .article { max-width: none; } #productTabs { margin-top: 80px; } } @media screen and (max-width:767px) { #productdetail .main_img { aspect-ratio: 4/3; } #productdetail .main_img:before { left: 20px; width: 55px; } #productdetail .main_img:after { right: 10px; bottom: 10px; width: 46px; height: 46px; } #productdetail .sumlist { margin-top: 8px; } #productdetail .sumlist .slick-list { margin: 0 -3px; } #productdetail .sumlist .slick-slide { padding: 0 3px; } #productdetail .gallery_meta { margin-top: 12px; } #productdetail .ptcm_right { margin-top: 38px; } #productdetail .product_info_title { font-size: 24px; } #productdetail .ptcm_right .article { font-size: 15px; } #productdetail .btns { margin-top: 28px; } #productdetail .ask { min-width: 175px; height: 52px; } #productTabs { margin-top: 70px; } #productTabs .tabs li a { min-width: 135px; height: 56px; padding: 0 18px; font-size: 14px; } #tabs_container { padding-top: 32px; } #tabs_container .tab_content { font-size: 14px; } #tabs_container .tab_content table { display: block; overflow-x: auto; white-space: nowrap; } #tabs_container .tab_content table th,#tabs_container .tab_content table td { padding: 12px 14px; font-size: 13px; } #productdetail #imglist .slick-arrow { width: 40px; height: 40px; } #productdetail #imglist .slick-prev { left: 10px; } #productdetail #imglist .slick-next { right: 10px; } } @media screen and (max-width:480px) { #productdetail .gallery_meta { font-size: 13px; } #productdetail .product_info_label { font-size: 13px; } #productdetail .product_info_title { font-size: 22px; } #productdetail .ask { min-width: 165px; height: 50px; } #productTabs .tabs li a { min-width: 125px; padding: 0 15px; font-size: 13px; } }