@charset "utf-8";

/* Nav */
.item-nav { line-height:22px; margin-bottom:15px; }
.item-nav .page-nav { margin-top:4px; }
@media all and (max-width:460px) {
	.responsive .item-nav .page-nav { display:none; }
}

/* Item Head */
.item-head { padding: 0px; border: 0px currentColor; border-image: none; margin-bottom:30px; width:100%; }
.item-head h1 { font-weight:bold; padding:0 !important; border: 0px currentColor; border-image: none; color: rgb(59, 62, 67); line-height: 30px; font-size: 22px; letter-spacing:-1px; margin:0px; margin-bottom:10px; }
.item-head ul.item-buy-btn { padding:0px; margin:0px; list-style:none; overflow:hidden; margin:0px -3px; }
.item-head ul.item-buy-btn li { float:left; width:25%; padding:3px; }
.item-head .item-thumb { width : 100%; display:flex; gap:5px; justify-content: center; align-content: center; flex-wrap:wrap; overflow:visible; padding-top:5px; transition: all 0.3s ease;}
/* item-thumb 이미지 관련 스타일은 item.skin,php에 직접입력 */
/*.item-head .item-thumb a { display:inline-block; margin-top:8px; padding:4px; width:68px; height:68px; }*/
.item-head .item-form th, .item-head .item-form label { font-weight:normal; }
.item-head .item-tag { margin:0px 0px 10px; padding:0px; color:#888; }
.item-head .item-tag a { color:#888; }
.item-head .item-tag a:hover { color:crimson; }

.btnf {  border: 1px solid green; border-radius : 3px; padding: 4px 6px; font-size: 1.1rem; font-weight:600; cursor: pointer; transition: 0.1s; }
.btnf:hover { background-color: green; color: white; }

.btnf-more { display : inline-block; margin-left : 10px; border: 1px solid green; border-radius : 3px; padding: 6px 6px; font-size: 0.8rem; font-weight:600; cursor: pointer; transition: 0.1s; }
.btnf-more:hover { background-color: green; color: white; }


#it_v_sns {margin:4px 0 15px;padding:0;list-style:none;zoom:1}
#it_v_sns:after {display:block;visibility:hidden;clear:both;content:""}
#it_v_sns li {float:left;margin:0 5px 0 0}

@media all and (max-width:460px) {
	.responsive .item-head h1 { font-size:18px; line-height:24px; }
	.responsive .item-head ul.item-buy-btn li { width:50%; }
}

/* 옵션 display*/
.item-opt-box {
	display : grid;
	grid-template-columns : 100px 2fr 1fr 1fr 1fr 1fr;
	grid-template-areas:
	"item1 item2 item3 item4 item5 item6";

	justify-content: stretch;
	align-content: center;
	width : 100%;
	border-bottom : 1px solid gray;
	box-sizing: border-box;
}

.item1 { grid-area : item1; }
.item2 { grid-area : item2; }
.item3 { grid-area : item3; }
.item4 { grid-area : item4; }
.item5 { grid-area : item5; }
.item6 { grid-area : item6; }


.head {
	justify-items: center;
	/*border-bottom : 2px solid gray;*/
	padding-top : 4px;
	background-color : Teal;
	color : white;
	box-shadow: 1px 1px 2px gray;
	text-shadow : 2px 2px 2px black;
}
.dsp { align-items : baseline; justify-items: stretch; }

.item2, .item3, .item4, .item5, .item6 { height : 30px;  align-self : center; }
.item3, .item4, .item5, .item6 { justify-self: center; }

.item-opt-box .pic { width : 80px; height : 80px; margin : 4px; }
.item-opt-box .pic img { width : 80px; height : 80px; }

.dsp .trans { height : 20px;  padding : 4px 10px; border : 1px solid silver; border-radius : 5px; font-size: 14px; align-content: center; }
.dsp .item4 { width : 90%; text-align : right; padding-right : 10px; }

/*box-shadow : h-offset(x ��) v-offset(y ��) blur spread color */
.cart2 { padding : 4px 10px 6px 10px; border-style:none; border-radius: 5px; background : Indigo; color : white; text-align : center; font-size: 14px; font-weight : 400; cursor:pointer;
	box-shadow: 1px 1px 2px Indigo;
				inset -1px -1px 1px Indigo;
	position:relative;
	left:0;
	bottom : 8px;
	text-shadow : 1px 1px 1px gray;
  	transition: .1s;
}

/*.cart2 > .cartAdd { display : none; }*/

/*.cart2:hover, .cart2:focus, .cart2:active { */
.cart2:hover, cart2:focus { 
	background : DarkViolet;
	transform : scale(1.1);
	/*transform : translateY(-6px);*/

	}

/*.cart2:hover, .cart2:focus, .cart2:active { transform : translateY(-6px); }*/
.cart::after { 
    display: block;
    content:"Add to Cart";
}
/*.cart2:hover .cart, .cart2:focus .cart, .cart2:active .cart { display : none; }*/
/*.cart2:hover .cartAdd { display : block; }*/
/*.cart2:hover .cartAdd, .cart2:focus .cartAdd, .cart2:active .cartAdd { display : block; }*/


.cart2:active { 
	box-shadow: inset -2px -2px 2px rgba(255,255,255,.2),
				inset 2px 4px 2px rgba(128,128,128,.6);
 }

.sound_only { display : none; }

@media (max-width:800px) {
.item-opt-box {
grid-template-columns : 80px 1fr 1fr 1fr 1fr;
grid-template-areas:
	"item1 item2 item2 item2 item3"
	"item1 item4 item5 item5 item6";
padding : 4px 0;
}

.head .item1 { padding-bottom : 4px; align-self: center; }
.head .item2, .head .item3 { width:98%; margin-bottom : 4px;  border-bottom : 1px groove white; text-align : center; }
.dsp .item2 { padding-top : 6px;  border-bottom : 1px solid silver; }
.item-opt-box .pic { width : 60px; height : 60px; margin : 8px; }
.item-opt-box .pic img { width : 60px; height : 60px; }
/*.cart2:hover, .cart2:focus, .cart2:active { transform : translateY(-12px); }*/
.cart2 { bottom : 0px; }
.cart::after { display: none; }
.cart2:hover .cart::after, .cart2:focus .cart::after { 
    display: block;
    content:"Add to Cart";
}
.cart2:hover, .cart2:focus { transform : translateY(-10px); }

} /*end of media*/

.item5 { display : flex; gap : 1px; }

.numbtn {
	width: 24px;
	height: 30px;
	font-size: 18px;
	/*line-height: 30px;*/
	border-radius: 2px;
	outline: none;
	border: none;
	cursor: pointer;
	background: transparent;
	box-shadow: inset 1px 1px 1px rgba(128,128,128,.2),
				inset -1px -1px 2px rgba(128,128,128,.8);
}


.numbtn:active{
	box-shadow: inset -1px -1px 2px rgba(255,255,255,.2),
				inset 1px 2px 2px rgba(128,128,128,.8);
}

.item5 input {
	border-radius: 2px;
	outline: none;
	border: 1px solid gray;
	padding: 2px 0;
	width: 50px;
	text-align: center;
	font-size: 16px;
	margin: 0 2px;
}



/* Item View Box */
.item-view-box { text-align:center; }
.item-view-box a { margin:0 10px 15px; width:80px; height:80px; display:inline-block; }
.item-view-box i { background: rgb(245, 245, 245); padding: 10px; border-radius: 50%; width: 80px; height: 80px; text-align: center; color: rgb(143, 143, 143); font-size: 40px; display: inline-block; }
.item-view-box i:hover { background: rgb(0, 0, 0); color: rgb(255, 255, 255); }

/* Item Explan */
.bar-divider { font-family: "noto sans kr"; display:flex; align-items:center; justify-content:center; font-size: 12px; max-width: 100%; height:min(max-content, max(min-content, 100%)); position:relative; }
.bar-divider label { display:inline-block; padding:4px 1rem; align-self: center; margin: 10px auto; border:2px solid transparent; background:linear-gradient(white, white) padding-box, linear-gradient( to right, red, orange, green, purple, blue, orange, red ) border-box; border-radius:5px; }
.bar-divider:before { content: ""; display:block; width: 100%; height:2px; background: linear-gradient( to right, red, orange, green, purple, blue, orange, red ); position: absolute; left: 0; top: 50%; transform : translate(0,-50%); z-index: -2; }

.label-item { margin-top:4px; }
.item-explan { font-size:16px; margin:30px auto; padding: 1rem;}
.item-explan p { text-align: justify; }
/*.item-explan > p:first-of-type::first-letter { font-size : 1.5rem; font-weight: bold; margin-left : 1rem; }*/
/*.item-explan > p:where(p:first-of-type)::first-letter { font-size : 1.5rem; font-weight: bold; margin-left : 1rem; }*/
.item-explan > p:is(:first-child)::first-letter { font-size : 2rem; font-weight: bold; margin-left : 1rem; } /* is()는 최상위 명시위치 where()는 명시도 0 */
.item-explan img { max-width:100%; }

.down {
	opacity : 0;
	transform : translateY(100%) scale(0.8);
	transition : all 1s ease;
}

.updown {
	opacity : 0;
	transform : translateY(-100%) scale(0.8);
	transition : all 1s ease;
}

.down.show, .updown.show {
	opacity : 1;
	transform : translateX(0) scale(1);
}


.detailHeading { position: relative; margin:1rem auto; padding: 6px 15px; min-width: 300px; max-width : 100%; height : min(max-content, max(min-content, 100%)); text-align:center; box-shadow: 0px 15px 15px -15px rgba(0, 0, 0, 0.5); }
.detailHeading h1 { margin:auto; padding-bottom : 4px; }

.detailHeading .font28 h1 { font-size: 5rem; font-weight: 900; text-transform: uppercase; }
.detailHeading .font32 h1 { font-size: 7rem; font-weight: 900; text-transform: uppercase; }
.detailHeading p { font-size: 14px; font-weight: 400; margin:auto; padding:8px 0; }
@media (max-width:767px) {
.detailHeading .font28 h1 { font-size: 2rem; }
.detailHeading .font32 h1 { font-size: 3rem; }
}


/* Item Explan*/
.dl { margin-top : 1rem; }
.dl > div > dt { font-weight : 600; }
.dl > dd { padding : 10px; }
.dl-bordered {  }
.dl > div { padding : 10px; border-bottom : 1px solid Azure; }
.dl > div:nth-child(odd) { background-color: rgba(0, 100, 0, 0.2); }
.dl > div:nth-child(even) { background-color: rgba(0, 100, 0, 0.1); }

.item-explan dt { font-weight : 600; }
.item-explan dd { padding-left: 1rem; }

.item-explan > ul {  
  display: block;
  margin-top : 1rem; 
  list-style-type: none;
  padding : 1rem;
  width : fit-content;
  line-height: 1.5;
  list-style-position: inside;
  margin-block-start: 0px;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 1rem;
  border:1px solid gray;
  border-radius : 5px;
}

.item-explan > ul > ul { list-style-type: none }

.item-explan > ul li:not(:is(:last-child)) { margin-bottom : 1rem; padding-bottom : 10px; border-bottom : 1px solid gray; }

ul.species-disc { list-style-type: disc; }
ul.species-disc li::marker { color: RoyalBlue; }

.item-explan > ol {  
  display: block;
  padding : 1rem;
  width : fit-content;
  line-height: 1.5;
  list-style-position: inside;
  margin-block-start: 0px;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 1rem;
  border:1px solid gray;
  border-radius : 5px;
}

#austine_t { 
	display : grid;
	grid-template-columns : repeat(auto-fit, minmax(min(400px,100%), 1fr));
	width : 100%;
	gap : 0.2rem;
	box-sizing : border-box;
	justify-content : space-around;
	list-style: none;
	padding : 0;
	margin : 0;
	margin-top : 1rem;
	font-size : 0.8rem;
}

#austine_t li { padding : 0.5rem; }
#austine_t li:nth-child(odd) { background-color: #f2f2f2; }
#austine_t li:nth-child(even) { background-color: #e8e8e8; }
#austine {}


@media (max-width:800px) {
.item-explan > table { width : 100%; border : none; border-collapse: collapse; }
.item-explan > table tbody tr { display : grid; grid-template-colums : 1fr; }
.item-explan > table tbody tr:nth-child(odd) { background-color: rgba(0, 100, 0, 0.3); }
.item-explan > table tbody tr:nth-child(even) { background-color: rgba(0, 100, 0, 0.1); }
.item-explan > table tbody tr th,
.item-explan > table tbody tr td { width : 100%; border : none; }
.item-explan > table tbody tr td:first-child { font-weight : 600; }
.item-explan > table tbody tr td:last-child {  padding-bottom : 10px; }
.item-explan > table tbody tr td > p { margin : 0; }
.item-explan .font28 h1 { font-size: 24px; }
.item-explan .font32 h1 { font-size: 26px; }
}

/* qr code */
.qr-box { min-width: 250px; max-width: 320px; border-radius: 1rem; padding : 1rem; display : flex; flex-direction : column; align-self : center; margin : 1rem auto; box-shadow: 2px 2px 4px 2px SeaGreen; }
.qr-img { width: 180px; height: 180px; margin: 15px auto; }
.qr-img img { width: 100%; border:3px solid LimeGreen; padding:2px; }
.qr-box h2 { font-size: 18px; font-weight: 700; text-align: center; }
.qr-box p { text-align: center; font-size: 12px; font-weight: 400; color: #7b879d; }


/* Item Good Box */
.item-good-box { text-align:center; }
.item-good-box span { margin:15px 6px; width:80px; height:80px; display:inline-block; }
.item-good-box a { background: rgb(245, 245, 245); padding: 15px; border-radius: 50%; width: 80px; height: 80px; text-align: center; color: rgb(51, 51, 51); font-size: 22px; line-height:26px; display: inline-block; }
.item-good-box .item-good a:hover { background: rgb(223, 17, 25); color: rgb(255, 255, 255); }
.item-good-box .item-nogood a:hover { background: rgb(0, 0, 0); color: rgb(255, 255, 255); }

/* Item Seller */
.item-seller .img-photo i { background: rgb(245, 245, 245); padding: 16px; border-radius: 50%; width: 80px; height: 80px; text-align: center; color: rgb(143, 143, 143); font-size: 40px; display: inline-block; }
.item-seller .img-photo img { border-radius: 50%; width: 80px !important; height: 80px !important; display:inline-block; }
.item-seller .auth-photo { width:160px; padding-right:15px; }
@media all and (max-width:480px) {
	.responsive .item-seller .auth-photo { float:none; width:100%; padding-right:0px; }
}

/* Relation Items */
#relation-item { overflow:hidden; line-height:20px; margin-bottom:30px; }
#relation-item .txt-normal { letter-spacing:0; }
#relation-item .txt-short { letter-spacing:-1px; padding-right:1px; }
#relation-item .item-row { float:left; }
#relation-item .item-image { position:relative; overflow:hidden; }
#relation-item .item-content { padding-top:10px; margin:0px 4px; text-align:center; }
#relation-item .item-star { text-align:center; overflow:hidden; letter-spacing:-1px; font-size:18px; line-height:20px; height:20px; margin-bottom:4px; }
#relation-item .item-name { overflow:hidden; letter-spacing:-1px; padding-right:1px; text-align:center; font-size:14px; }
#relation-item .item-text { font-size:12px; color:#888; }
#relation-item .item-price { margin-top:4px; line-height:22px; }
#relation-item .item-price b { font-size:16px; display:inline-block; margin:0px 4px; }
#relation-item .item-price b i { font-size:12px; }
#relation-item .item-price strike { color:#888; margin:0px 4px; font-size:14px; display:inline-block; }
#relation-item .item-details { color:#888; margin-top:4px; padding:0px 1px; font-size:13px; text-align:center; }
#relation-item .item-sp { margin:0px 4px; white-space:nowrap; }
#relation-item .item-sp i { margin-right:2px; color:#888; }
#relation-item .item-sns { margin-top:15px; text-align:center; }
#relation-item .item-sns img { width:15%; max-width:34px; border-radius:50%; }

/* Review */
.use-media .div-title-wrap { margin:0px; }
.use-media .media { margin:0px 0px 15px; padding:12px; }
.use-media .media .circle { background: rgb(235,235,235); color:#fff; }
.use-media .media .media-body { padding-left:0px; padding-top:5px; }
.use-media.use-mobile .media .media-body { padding-top:0px; }
.use-media .media .media-info { line-height:20px; padding:0px 0px 4px; }
.use-media .media .media-info .sp { display:inline-block; width:20px; text-align:center; font-size:11px; color:#888; }
.use-media .media .media-desc { padding:0px 0px 4px; }
.use-media .media-content { margin-top:15px; padding:15px 12px 0px; border-top:1px dotted #606060; }
.use-media .media-content p { margin:0px; padding:0px; }
.use-media .media-content img { max-width:100%; }
.use-media .media-reply { padding:15px 12px 0px; }
.use-media .media-btn { margin-top:15px; }
.use-page { margin-bottom:15px; }
.use-page .pagination { margin:0; }

/* Q & A */
.qa-media .div-title-wrap { margin:0px; }
.qa-media .media { margin:0px 0px 15px; padding:12px; }
.qa-media .media .circle { background: rgb(235,235,235); color:#fff; }
.qa-media .media .media-body { padding-left:0px; padding-top:5px; }
.qa-media.qa-mobile .media .media-body { padding-top:0px; }
.qa-media .media .media-info { line-height:20px; padding:0px 0px 4px; }
.qa-media .media .media-info .sp { display:inline-block; width:20px; text-align:center; font-size:11px; color:#888; }
.qa-media .media .media-desc { padding:0px 0px 4px; }
.qa-media .media-content { margin-top:15px; padding:15px 12px 0px; border-top:1px dotted #606060; }
.qa-media .media-content p { margin:0px; padding:0px; }
.qa-media .media-content img { max-width:100%; }
.qa-media .media-btn { margin-top:15px; }
.qa-media .media-ans { padding:15px 12px 0px; }
.qa-media .media-ans p { margin:0px; padding:0px; }
.qa-media .media-ans img { max-width:100%; }
.qa-page { margin-bottom:15px; }
.qa-page .pagination { margin:0; }

/* Comment */
.comment-media { }
.comment-media .photo i { background: rgb(245, 245, 245); padding: 15px; border-radius: 50%; width: 64px; height: 64px; text-align: center; color: rgb(143, 143, 143); font-size: 30px; display: inline-block; }
.comment-media .photo img { border-radius: 50%; width: 64px !important; height: 64px !important; display:inline-block; }
.comment-media.comment-mobile .photo i { padding: 10px; width: 54px; height: 54px; }
.comment-media.comment-mobile .photo img { width: 54px !important; height: 54px !important; }
.comment-media .media { border-top:1px solid #eee; margin:7px 0px; padding:7px 0px 0px; }
.comment-media :first-child.media { border-top:0px; margin-top:0px; padding-top:0px; }
.comment-media h5 { margin:2px 0px; line-height: 22px; }
.comment-media .media .media-body { padding-left:0px; }
.comment-media .media .media-info { margin-left:10px; }
.comment-media .media .media-content { margin-top:8px; }
.comment-media .media .media-btn {	margin-left:4px; }
.comment-page { margin:15px 0px; }
.comment-page .pagination { margin:0; }

#it_vc_opt ol {	margin:0;padding:0;list-style:none;zoom:1; }
#it_vc_opt ol:after { display:block;visibility:hidden;clear:both;content:""; }
#it_vc_opt ol li { float:left;margin:0; }
#it_vc_send_sns ul { margin:0;padding:0;list-style:none;zoom:1; }
#it_vc_send_sns ul:after { display:block;visibility:hidden;clear:both;content:""; }
#it_vc_send_sns ul li { float:left;margin:0 0 0 20px; }
#it_vc_send_sns input {	margin:0 0 0 5px; }
@media all and (max-width:460px) {
	.responsive .comment-btn { text-align:center; }
	.responsive .comment-btn .pull-right { float:none !important; }
}

/* Table Box */
.tbox-head { padding:12px 0px 8px !important; margin:0px 0px 15px; font-weight:bold; border-bottom:1px dotted #606060; background: #fff; }
.tbox-head.no-line { margin:0px; border:0px }
.tbox-body { padding:0px; margin:0px 0px 15px; background: #fff; }
.tbox-body ul { padding:0px; margin:0px; }
.tbox-body ul li { margin-left:15px; }
.tbox-body p { padding:0px; margin:0px; } 
.tbox-body table { width:100%; border-collapse:collapse; padding:0px; margin:0px; border:0px; } 
.tbox-body table.top-border { border-top:2px solid #606060; } 
.tbox-body caption { display:none; }
.tbox-body thead th { text-align:center; padding:8px 12px; border-bottom:0px; color:#fff; background:#606060; white-space:nowrap; line-height:22px;}
.tbox-body tbody th { text-align:left; padding:8px 12px; border-bottom:1px solid #ddd; background:#fafafa; line-height:22px; }
.tbox-body tbody td { padding:8px 10px; border-bottom:1px solid #ddd; line-height:22px;}

@media all and (max-width:767px) {
	.responsive #item-tab .nav-justified li a { border-right:1px solid #ddd; }
	.responsive #item-tab .nav-justified li:last-child a { border-right:0px; border-bottom:1px solid #ddd; }
}