header{ position:absolute;}
.ShopSection > div{ display:flex; flex-direction: column;}
.ShopSection > div > div{ display:flex; width:100%; flex-direction: column; align-items:center; justify-content:center; position:relative; overflow:hidden; z-index:2; }
.ShopSection > div > div > .text{ width:100%; height:100vh; display:flex; justify-content:center ; align-items:center;  flex-direction: column;}
.ShopSection > div > div > .text > h3{ text-align:center; font-size:64px; margin-bottom:0px;}
.ShopSection > div > div > .text > nav{ display:flex; justify-content:center ; align-items:center; }
.ShopSection > div > div > .text > nav > ul{ display:flex; justify-content:center ; align-items:center; gap:30px; }
.ShopSection > div > div > .text > nav > ul > li > a{ font-size:18px;;}
.ShopSection > div > div > .text > nav > ul > li > a:hover{ color:#ffd400;}


.SafetyHelmetsSection{ width:100%; min-height:100vh; display:flex; justify-content:center; align-items:center; background-color:#0b0b0b;}
.SafetyHelmetsSection > div{ display:flex; flex-direction: column; width:100%; padding:50px 0;}
.SafetyHelmetsSection > div > div{ display:flex;  width:100%; max-width:960px; margin:auto;  flex-direction: column; align-items:center; justify-content:center; position:relative; overflow:hidden; z-index:2; }
.SafetyHelmetsSection > div > div > .text > h3{ text-align:center; font-size:64px; margin-bottom:30px; margin-top:50px;}
.SafetyHelmetsSection > div > div > .text > nav > ul{ min-width:960px; display:flex; flex-wrap:wrap; gap:30px; justify-content:center; }
.SafetyHelmetsSection > div > div > .text > nav > ul > li{ text-align:center; }
.SafetyHelmetsSection > div > div > .text > nav > ul > li > a{ margin-top:30px; }
.SafetyHelmetsSection > div > div > .text > nav > ul > li > a > .TypeImg > img{ width:auto; height:220px;}
.SafetyHelmetsSection > div > div > .text > nav > ul > li > a > .TypeTitle{ font-size:18px;}
.SafetyHelmetsSection > div > div > .text > nav > ul > li > a > .TypeLv{ font-size:15px;}
.SafetyHelmetsSection > div > div > .text > nav > ul > li > a > .TypeTitle:before{ content:""; }
.SafetyHelmetsSection > div > div > .text > nav > ul > li > a > .TypeLv:after{ content:""; }
.SafetyHelmetsSection > div > div > .text > nav > ul > li > a:hover > .TypeTitle{ color:#ffd400;}
.SafetyHelmetsSection > div > div > .text > nav > ul > li > a:hover > .TypeLv{ color:#ffd400;}


.GlovesSection{ width:100%; min-height:100vh; display:flex; justify-content:center; align-items:center; background-color:#000;}
.GlovesSection > div{ display:flex; flex-direction: column; width:100%; padding:50px 0;}
.GlovesSection > div > div{ display:flex;  width:100%; max-width:960px; margin:auto;  flex-direction: column; align-items:center; justify-content:center; position:relative; overflow:hidden; z-index:2; }
.GlovesSection > div > div > .text > h3{ text-align:center; font-size:64px; margin-bottom:30px; margin-top:50px;}
.GlovesSection > div > div > .text > nav > ul{ min-width:960px; display:flex; flex-wrap:wrap; gap:30px; justify-content:center; }
.GlovesSection > div > div > .text > nav > ul > li{ text-align:center; }
.GlovesSection > div > div > .text > nav > ul > li > a{ margin-top:30px; }
.GlovesSection > div > div > .text > nav > ul > li > a > .TypeImg > img{ width:auto; height:220px;}
.GlovesSection > div > div > .text > nav > ul > li > a > .TypeTitle{ font-size:18px;}
.GlovesSection > div > div > .text > nav > ul > li > a > .TypeLv{ font-size:15px;}
.GlovesSection > div > div > .text > nav > ul > li > a > .TypeTitle:before{ content:""; }
.GlovesSection > div > div > .text > nav > ul > li > a > .TypeLv:after{ content:""; }
.GlovesSection > div > div > .text > nav > ul > li > a:hover > .TypeTitle{ color:#ffd400;}
.GlovesSection > div > div > .text > nav > ul > li > a:hover > .TypeLv{ color:#ffd400;}


.ShopPartsStepSection{ display:none; width:100%;}
.ShopPartsStepSection.active{ display:inline-block; margin-top:160px;}

.ShopPartsStepSection > div{ display:block;}

.shopinfodiv{ width:90%; max-width:980px; margin:auto; padding-bottom:100px;}

.iteminfoswiperdiv{ position:relative;}
.zoom-lens {
  position: absolute;
  box-shadow:2px 2px 8px #000;
  background-color:#fff;
  width: 250px;
  height: 250px;
  border-radius:50%;
  
  background-repeat: no-repeat;
  background-size: 800px 800px; /* 이미지보다 2배 크게 */
  pointer-events: none;
  display: none;
  z-index:50;
}

.partslistdiv{ background-color:#fff;}
.partslistdiv > div > img{ width:calc(100vw - 60px); height:calc(100vw - 60px); object-fit:contain;  object-position:center;}
.partslistthuma > img{ width:120px; height:120px; object-fit:contain; object-position:center;}
#ShopDetailThumbSwiper swiper-slide .partslistthuma {
	opacity:0.8;
	border: 2px solid transparent;
	display:flex; justify-content:center; align-items:center;
}

#ShopDetailThumbSwiper swiper-slide.swiper-slide-thumb-active .partslistthuma {
    opacity: 1;
	border: 2px solid #000; /* 활성화 시 테두리 색상 */
}

.shopinfodiv > h3{ margin:16px 0;}
.shopinfodiv > h3 > span{ font-size:40px; font-weight:700;}
.shopinfodiv > .readdiv{ display:flex; gap:50px; flex-wrap:wrap; justify-content: center;}
.shopinfodiv > .readdiv > .img{ width:100%; position:relative;}
.iteminfoswiperdiv{ width:calc(100vw - 60px); height:calc(100vw - 60px); background-repeat:no-repeat; background-position:center; background-size:80% 80%; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%3E%3Cpath%20d%3D%22M26%2C3H6A3%2C3%2C0%2C0%2C0%2C3%2C6V26a3%2C3%2C0%2C0%2C0%2C3%2C3H26a3%2C3%2C0%2C0%2C0%2C3-3V6A3%2C3%2C0%2C0%2C0%2C26%2C3ZM14.59%2C16%2C5%2C25.59V6.41ZM6.41%2C5H25.59L16%2C14.59ZM16%2C17.41%2C25.59%2C27H6.41ZM17.41%2C16%2C27%2C6.41V25.59Z%22%20fill%3D%22%23dddddd%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}
.shopinfodiv > .readdiv > .text{ flex-grow:1;}
.shopinfodiv > .readdiv > .text > div > div{ position:relative;}
.itemaddselectdiv{ position:sticky; top:0;  padding:10px 0; background: linear-gradient(to bottom, white 0%, white calc(100% - 10px), transparent 100%);}
.itemaddselectdiv > h4{ margin-bottom:8px;}
.itemaddselectdiv > h4 > span{ font-size:22px;}

.basketlistdiv > ul{ margin:16px 0; display:flex; flex-direction:column; gap:16px; }
.basketlistdiv > ul > li > h4{ margin:8px 0;}
.basketlistdiv > ul > li > h4 > span{ font-size:24px; font-weight:700;}

.basketlistdiv > ul > li[data-max='0'] > h4:before{ content:"Sold Out"; font-size:13px; font-weight:700; margin-right:16px; background-color:#f00; color:#fff; padding:3px 16px; border:2px solid #fff; box-shadow:0 0 6px #f00;}
.basketlistdiv > ul > li[data-max='0'] > h4:after{ content:"* 물량확보시 순차 발송됩니다."; margin-left:16px; display:inline-block; font-size:14px; font-weight:400; color:#0b0b0b; text-decoration:underline; font-style:italic;}


.basketlistdiv > ul > li > div{ display:flex; justify-content:space-between; align-items:center; gap:4px 30px;}
.basketlistdiv > ul > li > div > .itempricediv{ flex-grow:1; text-align:right;}
.basketlistdiv > ul > li > div > .itempricediv > b{ font-size:30px; font-weight:900;}
.basketlistdiv > ul > li > div > nav{ width:30px; text-align:center;}

.itemcntdiv{ border:1px solid #ddd; display:flex;   background-color:#fff;}
.itemcntdiv > a{ width:30px; background-color:#eee; display:flex; justify-content:center; align-items:center; font-size:20px; font-weight:700;}
.itemcntdiv > input[type=number]{ background-color:#fff; border:0; text-align:center; width:50px; font-size:20px; font-weight:700;}
/* Chrome, Safari, Edge, Opera */
.itemcntdiv > input[type=number]::-webkit-outer-spin-button,
.itemcntdiv > input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.itemcntdiv > input[type=number] {
  -moz-appearance: textfield;
}

.basketsumdiv{ margin:30px 0; gap:30px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;  border-top:2px solid #ddd; padding:30px 0;}
.basketsumdiv > h4 > span{ font-size:30px; font-weight:700;}
.basketsumdiv > p{ display:flex; gap:16px; justify-content:space-between; align-items:center; flex-wrap:wrap; flex-grow:1;} 
.basketsumdiv > p > span{ font-size:22px; color:#bbb;}
.basketsumdiv > p > b{ font-size:22px; font-weight:700; color:#f00;}
.basketsumdiv > p > b > span{ font-size:50px; font-weight:700; color:#f00;}
#additems{ padding-bottom:100px;}
#additems > nav{ display:flex; gap:30px;}
#additems > nav > a{ width:100%; padding:16px 0; text-align:center; background-color:#12176A; }
#additems > nav > a > span{ font-size:40px; font-weight:700; color:#fff;}

.ShopParts2Section > div{ width:90%; margin:auto; max-width:980px; }
.ShopParts2Section .orderaddrdiv > h2{ font-size:32px; font-weight:700;}
.ShopParts2Section .orderaddrdiv > form > ul{ margin:30px 0; display:flex; flex-wrap:wrap; gap:30px 45px;  box-shadow:1px 1px 8px gray; padding:20px 50px; padding-bottom:50px;}
.ShopParts2Section .orderaddrdiv > form > ul > li{  display:flex; gap:8px 15px;  flex-grow:1; align-items:flex-start; flex-wrap:wrap;}
.ShopParts2Section .orderaddrdiv > form > ul > li > label{ font-size:24px; font-weight:700; padding:8px 0; width:100%;}
.ShopParts2Section .orderaddrdiv > form > ul > li > div{ flex-grow:1; }
.ShopParts2Section .orderaddrdiv > form > ul > li > div > input[type=text]
,.ShopParts2Section .orderaddrdiv > form > ul > li > div > input[type=tel]
,.ShopParts2Section .orderaddrdiv > form > ul > li > div > input[type=email]{ font-size:22px; padding:8px;}
.ShopParts2Section .orderaddrdiv > form textarea{ font-size:22px; padding:8px; flex-grow:1; width:calc(100% - 18px);}
.memoli textarea{ min-height:160px;}




.addrli .addrul > li input[type=text]
,.addrli .addrul > li input[type=number]{  font-size:18px; padding:8px; border:0; border-bottom:1px solid #000;}

/* Chrome, Safari, Edge, Opera */
.addrli .addrul > li input[type=number]::-webkit-outer-spin-button,
.addrli .addrul > li input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.addrli .addrul > li input[type=number] {
  -moz-appearance: textfield;
  text-align:center;
}

.ShopParts2Section input[type=text]
,.ShopParts2Section input[type=tel]
,.ShopParts2Section input[type=email]{ width:calc(100% - 18px);}

.AddressFindBtn{ border:1px solid #12176A; display:inline-block; padding:10px 30px; color:#12176A; transition-duration:0.3s; font-size:22px;}
.AddressFindBtn:hover{ background-color:#12176A; color:#fff;}

.orderaddrdiv > form > nav{ margin:50px 0; display:flex; justify-content:center; gap:30px; margin-bottom:100px;}
.orderaddrdiv > form > nav > a{ display:inline-block; padding:16px 80px; background-color:#12176A;}
.orderaddrdiv > form > nav > a > span{font-size:30px; font-weight:700; color:#fff;}

.ShopPartsSection .custom-select {
            position: relative;
            width: 100%;
        }
.ShopPartsSection .select-box {
            background: white;
            border: 1px solid #ccc;
            padding: 10px;
            cursor: pointer;
            user-select: none;
			display:flex;
			gap:8px;
        }
.ShopPartsSection .select-box > img{ width:30px; height:30px; object-fit:contain; border:1px solid #ddd}
.ShopPartsSection .select-box:after{ content:""; width:20px; height:20px; display:inline-block; background-image:url(https://file.k-friends.kr/img/20250410/040858_0.png); position:absolute; right:10px; top:calc(50% - 10px); background-repeat:no-repeat; background-position:center; background-size:contain;}
		
.ShopPartsSection .select-box > b{ font-size:26px; font-weight:700;}
.ShopPartsSection .select-box > span{ font-size:26px; font-weight:300;}

.ShopPartsSection .options {
            display: none;
            position: absolute;
            width: calc(100% - 3px);
            background: white;
            border: 1px solid #ccc;
            max-height: 30vh;
            overflow-y: auto;
			left:0;
			top:68px;
        }
        

.ShopPartsSection .option { cursor: pointer; display:flex; gap:8px; width:100%; padding:10px 0; align-item:center;}




.ShopPartsSection .option:before{ content:""; width:20px; display:inline-block;}
.ShopPartsSection .option[data-limit='0']{ opacity:0.4;}
.ShopPartsSection .option:hover { background: #f0f0f0; }
.ShopPartsSection .option > img{ width:35px; height:35px; object-fit:contain; border:1px solid #ddd; background-color:#fff;}
.ShopPartsSection .option > b{ font-size:26px; font-weight:700;}
.ShopPartsSection .option > span{ font-size:26px; font-weight:300;}

.ShopPartsSection .option.itemselected{ background-color:#bbcce2; position:relative; }
.ShopPartsSection .option.itemselected:after{ content:"Selected"; position:absolute; color:#f00; top:0; right:10px; display:flex; height:100%; align-items:center;}
.ShopPartsSection .option.itemselected > b{ color:#44331d; }

.ShopParts3Section > div{ width:90%; margin:auto; max-width:980px; }

.ShopParts3Section .orderinfodiv > h2{ font-size:32px; font-weight:700;}
.ShopParts3Section .orderinfodiv > p{  margin-bottom:8px;}
.ShopParts3Section .orderinfodiv > p > span{ font-size:20px; font-weight:400; color:#b1b1b1; display:inline-block;}
.ShopParts3Section .orderinfodiv > .tbl{ margin-bottom:30px; width:100%;}
.ShopParts3Section .orderinfodiv > .tbl > thead > tr > th{ border-top:2px solid #000; border-bottom:1px solid #000; padding:8px; font-size:18px; font-weight:700;}
.ShopParts3Section .orderinfodiv > .tbl > tbody > tr > td{ border-bottom:1px solid #000; padding:8px; font-size:18px; font-weight:300; text-align:center;}
.ShopParts3Section .orderinfodiv > .tbl > tbody > tr > td > img{ width:48px; height:48px; object-fit:cover; border:1px solid #ddd;}
.ShopParts3Section .orderinfodiv > .tbl > tbody > tr > td:last-child{ text-align:right;}
.ShopParts3Section .orderinfodiv > .tbl > tbody > tr > td:nth-child(3){ text-align:left;}
.ShopParts3Section .orderinfodiv > .tbl > tfoot > tr > th{ border-bottom:1px solid #000; padding:8px; font-size:18px; font-weight:700; text-align:center;}
.ShopParts3Section .orderinfodiv > .tbl > tfoot > tr > td{ border-bottom:1px solid #000; padding:8px; font-size:18px; font-weight:300; text-align:center;}
.ShopParts3Section .orderinfodiv > .tbl > tfoot > tr > td:last-child{ text-align:right;}


.ShopParts3Section .orderaddrdiv > h2{ font-size:32px; font-weight:700;}
.ShopParts3Section .orderaddrdiv > div> ul{ margin:30px 0; display:flex; flex-wrap:wrap; gap:30px 45px;  box-shadow:1px 1px 8px gray; padding:20px 50px; padding-bottom:50px;}
.ShopParts3Section .orderaddrdiv > div > ul > li{  display:flex; gap:8px 15px;  flex-grow:1; align-items:flex-start; flex-wrap:wrap;}
.ShopParts3Section .orderaddrdiv > div > ul > li > label{ font-size:18px; font-weight:700; padding:8px 0; width:100%;}
.ShopParts3Section .orderaddrdiv > div > ul > li > div{ flex-grow:1; }



.agreediv{ width:100%; display:inline-block; text-align:center; font-size:20px; font-weight:700; color:#12176A}

.orderaddrdiv > div > nav{ margin:50px 0; display:flex; justify-content:center; gap:30px; margin-bottom:100px;}
.orderaddrdiv > div > nav > a{ display:inline-block; padding:16px 80px; background-color:#12176A;}
.orderaddrdiv > div > nav > a > span{font-size:30px; font-weight:700; color:#fff;}


.noread{ display:flex; justify-content:center; align-items:center; width:100%; height:80vh;}
.noread > div{ font-size:32px; font-weight:bold;}

.orderlist{ width:100%; table-layout:fixed; border-top:1px solid #000;}
.orderlist > thead > tr > th{ padding:20px 0;}
.orderlist > tbody > tr > td{ padding:8px 0;}
.orderlist > tbody > tr > td > span{ font-size:15px;}
.orderlist > tbody > tr > td > span:after{ content:",";}
.orderlist > tbody > tr > td > span:last-child:after{ content:"";}
.orderlist > tfoot > tr > th,
.orderlist > tfoot > tr > td
{ padding:20px 0;}
.orderlist td
,.orderlist th{ text-align:center; border-bottom:1px solid #000;}
.orderlist .thumimg{ width:120px; height:120px; object-fit:contain; border:1px solid #ddd;}

.orderresultSection{ margin-top:100px; display:inline-block; width:100%;}
.orderresultSection > div{ padding:50px; width:90%; max-width:980px; margin:auto;}
.orderresultSection > div > div > form > div > div > h3 > span{ font-size:32px;}
.orderresultSection > div > div > form > div > div > div{ padding:20px 0;}
.orderresultSection > div > div > form > div > div > div > ul{ border-top:1px solid #000;}
.orderresultSection > div > div > form > div > div > div > ul > li{ display:flex; gap:20px; border-bottom:1px solid #000;}
.orderresultSection > div > div > form > div > div > div > ul > li > label{ width:200px; display:flex; align-items:center; justify-content:center; background-color:#f1f1f1; font-size:18px; font-weight:bold; padding:16px 0;}
.orderresultSection > div > div > form > div > div > div > ul > li > div{ display:flex; align-items:center; font-size:18px; padding:16px 0;}
.orderresultSection > div > div > form > div > nav{ display:flex; flex-wrap:wrap; gap:30px; padding-bottom:50px; justify-content:center;}
.orderresultSection > div > div > form > div > nav > a{ display:inline-block; padding:8px 50px; background-color:#000000; color:#fff; font-size:28px; font-weight:bold;}
.orderresultSection > div > div > form > div > div > div > .agreediv{ padding:30px 0; text-align:center; font-size:18px; font-weight:bold; color:#004cff;}


.orderprintSection{ margin-top:100px; display:inline-block; width:100%;}
.orderprintSection > div{ padding:50px; width:90%; max-width:1200px; margin:auto;}

.orderprinttbl{ width:100%; }
.orderprinttbl > thead > tr > th{ border:1px solid #000; padding:8px; text-align:center;}
.orderprinttbl > thead > tr > th > h3 > span{ font-size:32px; font-weight:bold;}
.orderprinttbl > tbody > tr > td{ border:1px solid #000; padding:8px; text-align:center;}
.orderprinttbl > tbody > tr > td > h4{ font-size:18px; font-weight:bold;}
.orderprinttbl > tbody > tr > td > label{ display:flex; justify-content:space-between; max-width:60px; margin:auto;}
.orderprinttbl > tbody > tr > td.printprice{ text-align:right;}
.orderprinttbl > tbody > tr:nth-child(7) > td > label{  max-width:40px;}

.orderprinttbl > tbody > tr:nth-child(7) > td > label{  max-width:40px;}
.ceodiv{ display:flex; gap:30px; flex-wrap:wrap; justify-content:center;}
.stamp{ position:relative;}
.stamp > span{ position:absolute; display:inline-block; }


.orderprintSection > div > div > form > div > div > h3 > span{ font-size:32px;}
.orderprintSection > div > div > form > div > div > div{ padding:20px 0;}
.orderprintSection > div > div > form > div > div > div > ul{ border-top:1px solid #000;}
.orderprintSection > div > div > form > div > div > div > ul > li{ display:flex; gap:20px; border-bottom:1px solid #000;}
.orderprintSection > div > div > form > div > div > div > ul > li > label{ width:200px; display:flex; align-items:center; justify-content:center; background-color:#f1f1f1; font-size:18px; font-weight:bold; padding:16px 0;}
.orderprintSection > div > div > form > div > div > div > ul > li > div{ display:flex; align-items:center; font-size:18px; padding:16px 0;}
.orderprintSection > div > div > form > div > div > nav{ display:flex; flex-wrap:wrap; gap:30px; padding:50px 0; justify-content:center;}
.orderprintSection > div > div > form > div > div > nav > a{ display:inline-block; padding:8px 50px; background-color:#000000; color:#fff; font-size:28px; font-weight:bold;}
.orderprintSection > div > div > form > div > div > div > .agreediv{ padding-top:30px; text-align:center; font-size:18px; font-weight:bold; color:#004cff;}


.itemoptiondiv > ul{ margin-bottom:8px; width:100%; gap:16px; border-top:1px solid #ddd;}
.itemoptiondiv > ul > li{ display:flex; gap:8px 16px; justify-content:space-between; border-bottom:1px solid #ddd;}
.itemoptiondiv > ul > li > label{ font-size:20px; font-weight:700; width:100px; padding:8px 10px; min-width:100px; background-color:#eee;}
.itemoptiondiv > ul > li > div{ width:calc(100% - 50px); padding:8px 10px;}
.itemoptiondiv > ul > li > div > ul{ display:flex; gap:8px 16px; flex-wrap:wrap;}
.itemoptiondiv > ul > li > div > ul > li > label{ font-size:20px; font-weight:400; padding:8px;}

.itemoptiondiv > ul > li:has(input:focus){ animation-name:focusGlow; animation-duration:0.7s; animation-iteration-count:1;}
.itemoptiondiv > ul > li:has(input:focus) > label{ animation-name:focusGlow; animation-duration:0.7s; animation-iteration-count:1;}

@keyframes focusGlow {
  0% {
	  	background-color:transparent
  }
 10% {
	  	background-color:rgba(255,255,0,0.1);
 }
  
  90% {
	  	background-color:rgba(255,255,0,0.1);
  }
  
  100% {
		background-color:transparent;
  }
}