
.productbox{display:grid;grid-template-columns: 20% 75%;justify-content: space-between;margin: 5vw auto 1vw;}

aside{position:relative;border-top:3px solid #a7b05b;}
aside *{box-sizing:border-box;}
aside #category_nav{margin:0;padding:0;border-right:1px solid #deded8;border-left:1px solid #deded8;list-style:none;text-align:left;}
aside #category_nav>li{position:relative;margin:0;border-bottom:1px solid #deded8;background:#fff;transition:background-color .3s ease;display: block;}
aside #category_nav>li>.h4{position:relative;margin:0;font-size:15px;font-weight:400;line-height:1.6;padding: 0;}
aside #category_nav>li>.h4>a{display:block;padding:18px 52px 18px 25px;color:#4a4a46;text-decoration:none;transition:color .3s ease,padding .3s ease,background-color .3s ease;}
aside #category_nav>li>.h4>a:before{content:"";position:absolute;top:50%;left:0;width:0;height:1px;background:#a7b05b;transform:translateY(-50%);transition:width .3s ease;}
aside #category_nav>li>.h4>b{position:absolute;top:50%;right:15px;display:flex;align-items:center;justify-content:center;width:30px;aspect-ratio:1/1;border:1px solid #cfcfc8;border-radius:50%;color:#6f7d45;cursor:pointer;transform:translateY(-50%);transition:color .3s ease,background-color .3s ease,border-color .3s ease,transform .3s ease;padding: 0;}
aside #category_nav>li>.h4>b i{font-size:11px;}
aside #category_nav>li:hover>.h4>a{padding-left:38px;color:#6f7d45;}
aside #category_nav>li:hover>.h4>a:before{width:25px;}
aside #category_nav>li>.h4>b:hover{border-color:#6f7d45;background:#6f7d45;color:#fff;}
aside #category_nav>li.action{background:rgba(167,176,91,.13);}
aside #category_nav>li.action>.h4>a{padding-left:38px;color:#6f7d45;}
aside #category_nav>li.action>.h4>a:before{width:25px;}

aside #category_nav .subUL{margin:0;padding: 17px 30px;background:#f7f6f1;list-style:none;position: relative;display: none;left: 0;box-shadow: unset;width: 100%;}
aside>ul#category_nav >li[data-type="2"] .subUL{display:block;}
aside #category_nav .subUL>li{position:relative;margin:0;padding:0;border-bottom:1px solid rgba(207,207,200,.65);}
aside #category_nav .subUL>li:last-child{border-bottom:0;}
aside #category_nav .subULHead{margin:0;}
aside #category_nav .subULHead p{margin:0;}
aside #category_nav .subULHead a{position:relative;display:block;padding:13px 25px 13px 15px;color:#8b857b;font-size: 15px;line-height:1.6;letter-spacing:.05em;text-decoration:none;transition:color .3s ease,padding .3s ease;}
aside #category_nav .subULHead a:before{content:"";position:absolute;top:50%;left:0;width:5px;aspect-ratio:1/1;border-radius:50%;background:#c7b79f;transform:translateY(-50%);transition:background-color .3s ease,transform .3s ease;}
aside #category_nav .subULHead a:after{content:"→";position:absolute;top:50%;right:3px;color:#a7b05b;opacity:0;transform:translate(-8px,-50%);transition:opacity .3s ease,transform .3s ease;}
aside #category_nav .subULHead a:hover{padding-left:20px;color:#6f7d45;}
aside #category_nav .subULHead a:hover:before{background:#6f7d45;transform:translateY(-50%) scale(1.35);}
aside #category_nav .subULHead a:hover:after{opacity:1;transform:translate(0,-50%);}
aside #category_nav>li.open>.subUL,aside #category_nav>li.subOpen>.subUL,aside #category_nav>li[data-open="true"]>.subUL{display:block;}
aside #category_nav>li.open>.h4>b,aside #category_nav>li.subOpen>.h4>b,aside #category_nav>li[data-open="true"]>.h4>b{border-color:#6f7d45;background:#6f7d45;color:#fff;transform:translateY(-50%) rotate(45deg);}

aside .mb_nav p{position:relative;margin:0;padding:17px 55px 17px 22px;background:#6f7d45;color:#fff;font-size:15px;line-height:1.5;letter-spacing:.08em;cursor: pointer;}
aside .mb_nav b{position:absolute;top:50%;right:17px;display:flex;align-items:center;justify-content:center;width:30px;aspect-ratio:1/1;border:1px solid rgba(255,255,255,.55);border-radius:50%;cursor:pointer;transform:translateY(-50%);}
aside .mb_nav i{font-size:11px;color: antiquewhite;transform: translateY(2px);}

/* product_list */
#product_list{display:grid;grid-template-columns: repeat(3, 1fr);gap: 40px;margin-bottom: 50px;}
#product_list li{margin: 0 !important;}
#product_list li .clip {margin: 0 auto 10px;clip-path: polygon(  28px 0,100% 0,100% 100%,0 100%,0 28px );}
#product_list li .h3 {height: auto;font-size: 17px;font-weight: 500;}

/* productdetail */
#productdetail {margin: 0 0 80px;display: grid;grid-template-columns: 50% 45%;justify-content: space-between;}

/* imglist */
#imglist img {margin-bottom: 10px;aspect-ratio: 4/3;}
#imglist .img_nav img {margin: 0 10px 0 0;width: 117px;}

/* productinfo */
#productinfo .cate { padding: 2px 15px; max-width: calc(100% - 105px); height: 22px; font-weight: 100; font-size: 13px; z-index: 6; }
#productinfo .title {margin: 0 0 20px;font-size: 28px;letter-spacing: 0.04em;}
#productinfo .txt { margin-bottom: 15px; }
#productinfo .txt label { margin-right: 15px; width: 50px; }
#productinfo .price font { font-weight: 600; font-size: 25px; }
#productinfo article { margin-bottom: 30px; padding-bottom: 15px; border-bottom: 1px rgba(var(--primary-rgb), .6) dashed; font-weight: 300; font-size: 14px; }
#productinfo .sell_box >* { line-height: 100%; font-size: 17px; vertical-align: baseline; }
#productinfo .sell_box span { margin: 0 3px 0 15px; }
#productinfo .sell_box b { font-size: 36px; }
#productinfo .buyBtns { margin-top: 30px; }
#productinfo .buyBtns a {padding: 10px 0;border-radius: 50px;background: var(--primary);}
#productinfo .buyBtns a:hover{background:var(--triadic1)}

/* orderfunction */
#orderfunction a[data-action="plusBtn"] { margin: 0 2px; width: 35px; height: 35px; background: rgba(var(--secondary-rgb), .3); border-radius: 5px; line-height: 30px; font-weight: 600; font-size: 28px; }
#orderfunction a.limit[data-action="plusBtn"] { line-height: 27px; font-size: 33px; }
#orderfunction input { margin: 0 5px; width: 30px; border-width: 0 0 1px; }
#orderfunction .addcar { float: right; }

/* productTabs */
#productTabs .tabs { margin-bottom: 30px; background: rgba(var(--black-rgb), .08); }
#productTabs .tabs li a { padding: 15px 30px; }
#productTabs .tabs li a:before { position: absolute; width: 0; height: 3px; background: var(--primary); display: block; bottom: 0; left: 0; content: ""; }
#productTabs .tabs li.active a:before { width: 100%; }

@media screen and (max-width: 1024px){
	.productbox{display: block;}
    aside{border-top:0;}
aside .mb_nav{display:block;padding: 0;}
aside #category_nav{border-top:0;display: none;}
aside.open #category_nav,aside.action #category_nav,aside[data-open="true"] #category_nav{display:block;}
aside #category_nav>li>.h4>a{padding:16px 52px 16px 22px;}
aside #category_nav>li:hover>.h4>a,aside #category_nav>li.action>.h4>a{padding-left:34px;}
aside #category_nav .subUL{padding-left:32px;}
}
@media screen and (max-width: 980px){
	#productinfo { margin-top: 5vw; }
    #product_list{grid-template-columns: repeat(2, 1fr);}
}
@media screen and (max-width: 768px){
    #productdetail{display:block;}
}
@media screen and (max-width: 640px){
    #product_list{gap: 35px 15px;}
}