.productbox{display:grid;grid-template-columns: 20% 75%;justify-content: space-between;margin: 5vw auto 1vw;}

aside{position:relative;border-top: 5px solid var(--secondary);}
aside::before {content: "";position: absolute;left: 0;top: -5px;width: 20%;height: 5px;background: var(--complement);z-index: 4;}

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: var(--mist);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; 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: var(--white); 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 {background: linear-gradient(300deg, #003995 40%, var(--complement) 90%);}
aside #category_nav>li:hover>.h4>a {padding-left: 16px;color: var(--white);}
aside #category_nav>li:hover>.h4>a:before {width: 9px;}
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;}
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:#7a7a7a;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:#9e9e9e;opacity:0;transform:translate(-8px,-50%);transition:opacity .3s ease,transform .3s ease;}
aside #category_nav .subULHead a:hover{padding-left:20px;color:#474747;}
aside #category_nav .subULHead a:hover:before{background:#000000;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: #000000;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,minmax(0,1fr)); gap: 42px 34px; margin: 0; padding: 0; list-style: none; }
#product_list li {position: relative;overflow: visible;background: #fff;border-top: 3px solid var(--secondary);transition: transform .45s cubic-bezier(.22,.68,.1,1),border-color .35s ease;-webkit-box-align: stretch;-ms-flex-align: stretch;align-items: stretch;clip-path: polygon(30px 0,100% 0,100% calc(100% - 30px),calc(100% - 0px) 100%,0 100%,0 30px);}
#product_list li::before {content: "";position: absolute;left: 0;top: -3px;width: 40%;height: 3px;background: var(--complement);z-index: 4;}
#product_list li .h3::after {content: "";position: absolute;width: 20px;height: 2px;top: 70%;right: 0;background: linear-gradient(90deg,var(--secondary),var(--complement));transition: width .35s ease,opacity .35s ease;}
#product_list li:hover { transform: translateY(-8px); border-color: var(--primary); }
#product_list li:hover::after { width: 72px; opacity: 1; }
#product_list .clip { position: relative; aspect-ratio: 1/1; overflow: hidden; background: #ffffff; padding: 30px; }
#product_list .clip::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg,rgba(var(--primary-rgb),0) 45%,rgba(var(--primary-rgb),.1) 100%); pointer-events: none; transition: background .45s ease; }
#product_list .clip::after { content: ""; position: absolute; left: 0; bottom: 0; z-index: 3; width: 0; height: 3px; background: linear-gradient(90deg,var(--secondary),var(--complement)); transition: width .55s cubic-bezier(.22,.68,.1,1); }
#product_list li:hover .clip::after { width: 100%; }
#product_list .clip svg { display: block; width: 100%; height: auto; }
#product_list .clip img {width: 100%;height: 100%;transform: scale(1);transition: transform .75s cubic-bezier(.22,.68,.1,1),filter .55s ease;object-fit: contain;}
#product_list li:hover .clip img { transform: scale(1.055); filter: saturate(1.05) contrast(1.03); }
#product_list .h3 {position: relative;margin: 0;padding: 20px 10px 0 0px;color: var(--primary);font-size: 17px;font-weight: 700;line-height: 1.45;text-align: left;letter-spacing: .01em;background: #fff;transition: color .3s ease;}
#product_list li:hover .h3 { color: var(--secondary); }
@media (max-width:1024px) {
  #product_list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 34px 26px; }
}
@media (max-width:768px) {
  #product_list { grid-template-columns: 1fr; gap: 28px; }
  #product_list li:hover { transform: translateY(-4px); }
  #product_list .h3 { padding: 20px 44px 22px 18px; font-size: 17px; }
  #product_list .h3::after { right: 18px; }
}
@media (max-width:480px) {
  #product_list { gap: 24px; }
  #product_list .h3 { font-size: 16px; padding: 18px 42px 20px 16px; }
  #product_list .h3::before { font-size: 9px; }
  #product_list li::after { display: none; }
}




/* productdetail */
#productdetail {margin: 0 0 70px;display: grid;grid-template-columns: 50% 45%;justify-content: space-between;}

/* imglist */
#imglist img {margin-bottom: 10px;aspect-ratio: 1/1;object-fit: contain;}
#imglist .img_nav img {margin: 0 10px 0 0;width: 117px;}

/* productinfo */
#productinfo { display: flex; flex-direction: column; justify-content: center; }
#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 .ps-kicker{display:flex;align-items:center;gap:12px;color:var(--secondary);font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.12em;}
#productinfo .ps-kicker span{display:block;width:32px;height:3px;background:linear-gradient(90deg,var(--secondary) 0 72%,var(--complement) 72%);}
#productinfo .title{margin-top:18px;color:var(--primary);font-size: clamp(28px,2.5vw,48px);font-weight:700;line-height:1.05;letter-spacing:-.03em;}

#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);display: none;}
#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 (min-width:1025px) {
	#category_nav { display: flex; justify-content: center; flex-direction: column; gap: 0; }
}

@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;}
}

/*  category_nav  */
#category_nav { position: relative; overflow: visible !important; }
#category_nav > li { position: relative; overflow: visible !important; }
.productbox,.productbox aside,#wrap { overflow: visible !important; }
.hover_product_source {display: none !important;}
#category_product_flyout {display: none;position: absolute;width: 240px;padding: 0;z-index: 999999;background: #fff;border: 1px solid rgba(0,0,0,.08);box-shadow: 0 12px 30px rgba(0,0,0,.16);text-align: left;}
#category_product_flyout.is_open { display: block; }
#category_product_flyout a {display: block;padding: 18px 18px;color: #222;font-size: 15px;line-height: 1.5;text-decoration: none;background: #fff;transition: .2s;}
#category_product_flyout a + a { border-top: 1px solid #eee; }
#category_product_flyout a:hover {color: #d84a36;background: #f7f7f7;padding-left: 23px;}
.mobile_product_toggle,.mobile_product_list { display: none; }

@media(max-width:768px) {
  #category_product_flyout { display: none !important; }
  #category_nav,#category_nav > li { overflow: hidden !important; }
  #category_nav > li > .h4 { position: relative; padding-right: 55px; }
  #category_nav .mobile_product_toggle { display: flex; position: absolute; top: 50%; right: 15px; width: 30px; height: 30px; padding: 0; border: 1px solid rgba(0,0,0,.35); border-radius: 50%; background: transparent; align-items: center; justify-content: center; transform: translateY(-50%); cursor: pointer; z-index: 10; }
  #category_nav .mobile_product_toggle span { display: block; color: #111; font-size: 20px; line-height: 1; font-weight: 400; }
  #category_nav > li.action .mobile_product_toggle,#category_nav > li.product_open .mobile_product_toggle { border-color: rgba(255,255,255,.55); }
  #category_nav > li.action .mobile_product_toggle span,#category_nav > li.product_open .mobile_product_toggle span { color: #fff; }
  #category_nav .mobile_product_list { display: none; width: 100%; margin: 0; padding: 0; background: #fff; }
  #category_nav .mobile_product_list a { display: block; width: 100%; padding: 13px 20px 13px 35px; color: #333; font-size: 14px; line-height: 1.5; text-align: left; text-decoration: none; background: #fff; border-top: 1px solid #e6e6e6; transition: .2s; }
  #category_nav .mobile_product_list a:hover,#category_nav .mobile_product_list a:active { color: #d84a36; background: #f7f7f7; }
}
#category_nav > li{
    position:relative;
}

#category_nav > li > .hover_product_source{
    display:none !important;
    position:relative;
    width:100%;
    margin:0;
    padding:0;
    background:#fff;
    border-top:1px solid #e5e5e5;
}

#category_nav > li:hover > .hover_product_source{
    display:block !important;
}

#category_nav > li > .hover_product_source a{
    position:relative;
    display:block;
    width:100%;
    padding:10px 15px 10px 34px;
    box-sizing:border-box;

    color:#333;
    font-size:14px;
    line-height:1.45;
    text-align:left;
    text-decoration:none;

    background:#fff;
    border-bottom:1px solid #eee;

    transition:
        color .2s ease,
        background .2s ease,
        padding-left .2s ease;
}

#category_nav > li > .hover_product_source a::before{
    content:"-";
    position:absolute;
    left:18px;
    top:10px;
    color:#e74525;
}

#category_nav > li > .hover_product_source a:hover{
    color: var(--complement);
    background: #f2f2f2;
    padding-left:39px;
}
@media(max-width:768px){

    #category_nav > li:hover > .hover_product_source{
        display:none !important;
    }

}