@charset "utf-8";

:root {
	--main-color : #5732f4;
	--main-color-d : #2803c5;
	--bg-color : #f4f4f4;
}

@font-face { font-family: "aTitleGothic"; font-style: normal; font-weight: 400;
src:url('/assets/font/AsiaTITGD1R.eot');
src:url('/assets/font/AsiaTITGD1R.eot?#iefix') format('embedded-opentype'),
url('/assets/font/AsiaTITGD1R.woff') format('woff'),
url('/assets/font/AsiaTITGD1R.ttf') format('truetype');
}

@font-face { font-family: "aTitleGothic"; font-style: normal; font-weight: 500;
src:url('/assets/font/AsiaTITGD2R.eot');
src:url('/assets/font/AsiaTITGD2R.eot?#iefix') format('embedded-opentype'),
url('/assets/font/AsiaTITGD2R.woff') format('woff'),
url('/assets/font/AsiaTITGD2R.ttf') format('truetype');
}

@font-face { font-family: "aTitleGothic"; font-style: normal; font-weight: 600;
src:url('/assets/font/AsiaTITGD3R.eot');
src:url('/assets/font/AsiaTITGD3R.eot?#iefix') format('embedded-opentype'),
url('/assets/font/AsiaTITGD3R.woff') format('woff'),
url('/assets/font/AsiaTITGD3R.ttf') format('truetype');
}

@font-face { font-family: "aTitleGothic"; font-style: normal; font-weight: 700;
src:url('/assets/font/AsiaTITGD4R.eot');
src:url('/assets/font/AsiaTITGD4R.eot?#iefix') format('embedded-opentype'),
url('/assets/font/AsiaTITGD4R.woff') format('woff'),
url('/assets/font/AsiaTITGD4R.ttf') format('truetype');
}

@font-face { font-family: "aTitleGothic"; font-style: normal; font-weight: 800;
src:url('/assets/font/AsiaTITGD5R.eot');
src:url('/assets/font/AsiaTITGD5R.eot?#iefix') format('embedded-opentype'),
url('/assets/font/AsiaTITGD5R.woff') format('woff'),
url('/assets/font/AsiaTITGD5R.ttf') format('truetype');
}

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, img { margin:0; padding:0; }
html,body{ height:100%;/* background-color: #f4f4f4;*/ }
body {
	padding: 50px 0 0 0;
	max-width:600px;
	margin:0 auto;
	overflow-x: hidden;
}
body,button,input,label { color:#222; font-size:13px; font-weight:500; font-family: "aTitleGothic",sans-serif; line-height:120%; }
input::placeholder{ color:#999; font-weight:500; font-family: "aTitleGothic",sans-serif; line-height:100%; }


[class*="btn-st-"] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    text-align: center;
    padding: 10px 20px;
    font-weight: 500;
    font-size: 15px;
    line-height: 1.2;
    border-radius: 2px;
    text-decoration: none;
    box-sizing: border-box;
    letter-spacing: -0.6px;
    min-height: 50px;
    background: #fff;
}
.btn-st-1{}

[class*="btn-st-"].c-main{
	background: var(--main-color) !important;
	border:1px solid var(--main-color-d) !important;
    color: #fff !important;
}

[class*="btn-st-"].c-white{
	border:1px solid #ccc !important;
    color: #333;
}
[class*="btn-st-"].c-white i { color: #888; }

[class*="btn-st-"].sm{
	width: auto;
	font-size: 12px;
	padding: 3px 6px;
	min-height: 24px;
	border-radius: 4px;
}

[class*="btn-st-"] i{ margin-right:4px; }


/* 로딩 오버레이 */
.loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.8);
	z-index: 9999;
	display: flex;
	flex-direction: column; /* 세로 방향 정렬 */
	justify-content: center;
	align-items: center;
	visibility: hidden;  /* 기본적으로 숨김 */
}

/* 로딩 스피너 */
.loading-overlay .spinner {
	width: 50px;
	height: 50px;
	border: 5px solid #f3f3f3;
	border-top: 5px solid var(--main-color);
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 15px; /* 문구와 간격 추가 */
}

/* 로딩 문구 */
.loading-overlay .loading-text {
	font-size: 16px;
	color: #333;
	text-align: center;
	line-height: 1.5;
}

/* 스피너 애니메이션 */
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}


#wrap{
	max-width:600px;
	margin:0 auto;
	padding:0 0 80px 0;
	overflow:hidden;
}

#sub_header_wrap{ position: fixed; max-width:600px; top: 0; z-index: 99; width: 100%; height: 50px; box-sizing:border-box;  border-bottom:1px solid #dddddd; 
	background-color: #fff;  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.16); 
}

/* GNB */
.sub-header{
	padding: 8px 18px;
  width: 100%;
  height: 34px;
  box-sizing:border-box; 
  display:table; 
}
#sub_header_wrap .sub-header > ul{ display:table-cell; height: 34px; box-sizing:border-box; vertical-align:middle; }
#sub_header_wrap .sub-header > ul.h-left{ width:40px; text-align:left;  }
#sub_header_wrap .sub-header > ul.h-center{ text-align:left; }
#sub_header_wrap .sub-header > ul.h-right{ width:120px; text-align:right; }
#sub_header_wrap .sub-header .logo{ }
#sub_header_wrap .sub-header .logo img{ height:28px;}
#sub_header_wrap .sub-header > ul button{ background:none; border:none; }
#sub_header_wrap .sub-header > ul button i{ font-size:18px; } 

#sub_header_wrap .header-title{ position:relative; width: 100%; height: 50px; text-align:center; box-sizing:border-box; }
#sub_header_wrap .header-title h1{  font-size:22px; height: 50px; line-height: 50px;}
#sub_header_wrap .btn-history-back {
    position: absolute;
    left: 10px;
    top: 0;
    background: url("/assets/icon/icon_arrow_prev.svg") 50% 50% / 29px no-repeat;
    font-size: 0;
    line-height: 0;
    display: block;
    width: 50px;
    height: 50px;
    text-indent: -9999px;
	outline: none;
    cursor: pointer;
	border: 0;
}

/* 서브페이지 타이틀 */
.subpage-title{
	padding:20px 25px 10px;
}
.subpage-title h2{  display: block; font-size: 18px; font-weight:600;  height:30px;  }
.subpage-title h2::before {
    content: '';
    background-color: var(--main-color);
    padding: 0px 5px 0px 0px;
	margin:0 4px 0 0;
}

/* 푸터 */
#go_footer { position: fixed; z-index: 88; bottom: 0; width: 100%; max-width:600px; height: 65px; border-top: 1px solid #ddd; background-color: #fff; }
#go_footer .inner{ padding:0 10px; }
#go_footer .inner>ul{  font-size:0; }
#go_footer .inner>ul>li {
  width: 20%;
  display: inline-block;
  text-align: center;
  color: #757575;
}

#go_footer .inner > ul > li a,
#go_footer .inner > ul > li p{
  color: #757575;
  display: inline-block;
  padding: 7px 0 0 0;
}
#go_footer i { color: #111; font-size: 19px; }
#go_footer .inner > ul > li span { display: block; color: #999; font-size: 10px; }



#go_footer .active a {
  color: #df3e9a !important;
}

#go_footer .point i,
#go_footer .point p{
  color: #df3e9a !important;
}

#product-footer { position: fixed; z-index: 89; bottom: 0; width: 100%; max-width:600px; height: 65px; border-top: 1px solid #ddd; background-color: #fff; vertical-align: middle;
	padding: 0 6px; box-sizing:border-box; }
#product-footer div{ width:100%; display:table; }
#product-footer div > ul{ display:table-cell; width:50%; box-sizing:border-box; padding:5px 3px; }
#product-footer div > ul button{ width:100%; height: 50px; border: 1px solid #ddd; border-radius:5px; font-size:15px; font-weight:700; }
#product-footer div > ul button i { vertical-align: middle; }
#product-footer div > ul button#wisi{ background-color:var(--main-color); color:#fff; }
#product-footer div > ul button#review{ background-color:#f2f2f2; color:#111; }

/* 공통페이지 */
.sub-container{ padding:20px 25px; }
.page-title-article h1{  display: block; font-size: 20px; font-weight:600;  height:30px;  }
.page-title-article h1::before {
    content: '';
    background-color: var(--main-color);
    padding: 0px 5px 0px 0px;
	margin:0 4px 0 0;
}



/* SUB */
.sub-tab { width:100%; text-align:center; overflow:hidden; }
.sub-tab ul { 
	width:100%; 
    display: flex;
    align-items: center;
}
.sub-tab ul li {
	width:50%; 
}

/*
.sub-tab ul.grid2 li { width:50%; }
.sub-tab ul.grid4 li { width:calc(100% / 4); }
*/
.sub-tab ul li a { position:relative; display: block; height:45px; line-height:43px; font-size:15px; font-weight:500; background:#e9e9e9; color: #555; border-top: 1px solid var(--subtab-non-border-color); 
	border-right: 1px solid var(--subtab-non-border-color); border-left: none; border-bottom: 2px solid var(--subtab-on-color); }
.sub-tab ul li:first-child {  }
.sub-tab ul li:first-child a{ border-left:1px solid var(--subtab-non-border-color);  }

.sub-tab ul li a.on { background:none !important; color: var(--subtab-on-color); border-top:2px solid var(--subtab-on-color); border-right:2px solid var(--subtab-on-color); 
	border-left:2px solid var(--subtab-on-color); border-bottom:1px solid #f5f5f5; font-weight:600; }
.sub-tab ul li a:active{ box-shadow: inset 0px 3px 9px rgba(0, 0, 0, 0.5);}

.sub-tab ul li a.on ~ .sub-tab ul li a{ border-right: 1px solid var(--subtab-non-border-color); }

.sub-tab.radius ul li:first-child a{ border-top-left-radius: 7px; }
.sub-tab.radius ul li:last-child a{ border-top-right-radius:7px; }







/* 메인 */
.main-area-wrap{  overflow-y: hidden; overflow-x: scroll; padding:5px 10px; box-sizing:border-box; }
.main-area{ display:table; width:138%; table-layout: fixed;  }
.main-area > ul{ display:table-cell; width:23%;  padding:5px; text-align:center; }
.main-area .thum{ width:100%; overflow-y: hidden; border-radius:10px; position: relative; }
.main-area .thum::after {
  display: block;
  content: "";
  padding-bottom: 100%;
}
.main-area .thum img{  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;}
.main-area > ul p{ display:inline-block; margin-top:5px; }

.section-title{ font-size:18px; padding:15px 18px 0; }
.section-title span{ color:var(--main-color); }

.prd-list{ width: 100%; font-size:0; box-sizing:border-box; padding:7px}
.prd-list > div{ width:50%; display:inline-block; box-sizing:border-box; padding:7px 7px 15px 7px; vertical-align:top; }
.prd-list > div .prd-unit{} 
.prd-list > div .prd-unit > div{ font-size:12px; }
.prd-list .prd-unit .mainThumb{ position:relative; }/* 250630 유진 */

.prd-list > div .prd-unit .mainThumb .image-box{ width: 100%; background-position: center center; background-size: cover ; border-radius:10px; }
.prd-list > div .prd-unit .mainThumb .image-box::after {
  display: block;
  content: "";
  padding-bottom: 80%;
}

.prd-list .prd-unit .listInfo { margin-top:10px; padding-left:5px; }
.prd-list .prd-unit .listInfo .name-ko{ padding:2px 0 7px; font-size:1rem; line-height:1.3; word-break:keep-all; font-weight:600 }
.prd-list .prd-unit .listInfo .name-en{ font-size:0.8rem; color:#AFAFAF; font-weight:400 }

.prd-list .prd-unit .listInfo .score{ margin-top:5px; display:flex; align-items:center; gap:10px; }
.prd-list .prd-unit .listInfo .score .review-score, .prd-list .prd-unit .listInfo .score .review-score .fa-star{ color:#5732F4; margin-top:1px; }
.prd-list .prd-unit .listInfo .score .mainReview{ padding:.26rem .5rem .25rem; background:#F2F2F2; font-size:0.7rem; color:#5732F4 }
.prd-list .prd-unit .listInfo .score i.fa-heart, .prd-list .prd-unit .listInfo .score .mainSelect{ color:#999 }
.prd-list .prd-unit .listInfo .score p{ display:flex; align-items:center; gap:5px; color:#616060; font-size:0.8rem; }
/* .prd-list > div .prd-unit > div.select_count{ padding:3px 0 0 5px; } */

.prd-list .prd-unit .priceCont{ display:flex; align-items:center; gap:10px; border-radius:10px; margin-top:10px; }
.prd-list .prd-unit .priceCont span{ line-height:1; }
.prd-list .prd-unit .priceCont .product-price-regular{ font-size:0.8rem; color:#B2B2B2; text-decoration:line-through; }
.prd-list .prd-unit .priceCont .product-price-sale{ color:#333; font-weight:700; font-size:0.8rem; }
.prd-list .prd-unit .priceCont span{ display:flex; align-items:center; }
.prd-list .prd-unit .priceCont i{ padding-left:0.15rem }


@media(max-width:380px){
	.prd-list .prd-unit .listInfo .score{ gap:0.5rem; }
	.prd-list .prd-unit .listInfo .score p{ font-size:0.71rem; }
	.prd-list .prd-unit .listInfo .score .mainReview{ padding:.25rem .4rem .25rem }
}

.pagination{
	padding:10px 0 65px;
}

.pagination ul {
    width:100%;
	list-style: none;
    padding: 0;
    display: flex;
	align-items: center;
    justify-content: center;
    gap: 3px;
}

.pagination ul li {
    margin: 0;
    padding: 0;
}

.pagination ul li.first-page,
.pagination ul li.prev-page,
.pagination ul li.next-page,
.pagination ul li.last-page{
	display:none;
}

.pagination ul li a {
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
    color: #333;
	background-color:#fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.pagination ul li.active a {
    background-color:var(--main-color);
    color: #fff;
	/*
    border-color: #007bff;
	*/
}


/* 리뷰쓰기 */
.review-write-section{ 

	padding:10px 25px; 

	.textarea-wrap{
		background: #fff;
		display: block;
		width: 100%;
		border: 1px solid #ccc;
		border-radius: 3px;
		overflow:hidden; 

		textarea{
			width: 100%;
			height: 200px;
			border: none;
			padding:10px;
		}
	}

}

/* 아이콘 */
.fa-star {color:#ffc107;}
.fa-heart {color: #dc3545;}