@charset "utf-8";

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');

@font-face {
	font-family: 'one_mobile_title';
	src: url('../../lib/fonts/one_mobile_title.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/******************************************
	기본 여백 및 태그 초기화
*******************************************/
html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, sub, sup, var, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, header, hgroup, menu, nav, section, summary, time, mark, audio, video, textarea, button {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font-weight: normal;
	box-sizing: border-box; /* 레이아웃 계산 편의를 위해 추가 */
}

body {
	width: 100%;
	font-family: 'Pretendard', sans-serif;
	font-size: 14px;
	color: #000;
	line-height: 1.5; /* 가독성을 위한 기본 줄간격 */
}

ul, li { list-style: none; }
p { margin: 0; padding: 0; }
img { vertical-align: middle; max-width: 100%; } /* 이미지 넘침 방지 */

/******************************************
	링크 및 버튼 초기화
*******************************************/
a {
	text-decoration: none;
	color: inherit;
	background: transparent;
}

button {
	cursor: pointer;
	background: none;
	border: none;
	font-family: inherit;
	color: inherit;
}

/******************************************
	폼 요소 초기화
*******************************************/
input, select, textarea {
	font-family: 'Pretendard', sans-serif;
	font-size: 18px;
	color: #444;
	outline: none;
	box-sizing: border-box;
}

input::placeholder, textarea::placeholder {
	color: #9E9E9E;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

/******************************************
	유틸리티 (최소한의 필수 요소)
*******************************************/
.after_clear::after {
	display: block;
	clear: both;
	content: "";
}

.no_data {
	width: 100% !important;
	margin: 0 !important;
	padding: 100px 0 !important;
	text-align: center;
	color: #777;
	font-size: 16px;
}

.pc { display: block; }
.mob { display: none; }

/* 반응형 기초 */
@media screen and (max-width: 500px) {
	body, input, button, select { font-size: 4.4vw; }
	.pc { display: none; }
	.mob { display: block; }
	
	.no_data {
		padding: 20vw 0 !important;
		font-size: 2.8vw;
	}
	
	.table_pc {
		display: none !important;
	}
}

/******************************************
	테마 변수 (브랜드 색상 유지)
*******************************************/
:root {
	--main-color: #006DFF;
}

/******************************************
	폰트 관련
*******************************************/
.ff-one-mobile {
	font-family: 'one_mobile_title', sans-serif;
}

/******************************************
	체크박스, 라디오 공통 css
*******************************************/
.default_label {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	font-size: 18px;
	margin-right: 90px;
}

.default_label input[type="radio"] {
	appearance: none;
	-webkit-appearance: none;
	width: 30px;
	height: 30px;
	border: 1px solid #767676;
	border-radius: 50%;
	background-color: #fff;
	position: relative;
	cursor: pointer;
	outline: none;
	margin: 0 8px 0 0;
	flex-shrink: 0;
}

.default_label input[type="radio"]:checked::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 20px;
	height: 20px;
	background-color: #000;
	border-radius: 50%;
}

.default_label input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 30px;
	height: 30px;
	border: 1px solid #767676;
	background-color: #fff;
	position: relative;
	cursor: pointer;
	outline: none;
	margin: 0 8px 0 0;
	flex-shrink: 0;
}

/* 체크되었을 때의 스타일 */
.default_label input[type="checkbox"]:checked {
	background-color: #333;
	border-color: #333;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
}

.default_label input[type="checkbox"].small {
	width: 20px;
	height: 20px;
}

.default_label input[type="checkbox"].small:checked {
	background-size: 15px 15px;
}

@media screen and (max-width: 500px) {
	.default_label {
		position: relative;
		top: -0.5vw;
		font-size: 3.6vw;
		margin-right: 10vw;
	}
	
	.default_label input[type="radio"] {
		width: 4.2vw;
		height: 4.2vw;
		margin: 0 1.5vw 0 0;
	}
	
	.default_label input[type="radio"]:checked::after {
		width: 2.8vw;
		height: 2.8vw;
	}
	
	.default_label input[type="checkbox"] {
		width: 4.2vw;
		height: 4.2vw;
		margin: 0 1.5vw 0 0;
	}
	
	/* 체크되었을 때의 스타일 */
	.default_label input[type="checkbox"]:checked {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
		background-size: 3vw 3vw;
	}
	
	.default_label input[type="checkbox"].small {
		width: 3.6vw;
		height: 3.6vw;
	}
	
	.default_label input[type="checkbox"].small:checked {
		background-size: 2.6vw 2.6vw;
	}
}



/******************************  
	페이징  
******************************/
.paging{
	width:100%;
	text-align:center;
	margin:15px 0 150px;
}

.paging ul{
	display: inline-block;
}

.paging ul::after{
	display: block;
	content: "";
	clear: both;
}

.paging ul li{
	float: left;
	width:30px;
	height: 30px;
	line-height: 30px;
	font-size:18px;
	font-weight: 500;
	text-align:center;
	color:#DDDDDD;
	margin-right: 5px;
}

.paging ul li a,.paging ul li a:hover, .paging ul li a:link, .paging ul li a:focus, .paging ul li a:active{
 color:inherit;
 display:block;
 width:100%;
 height:100%;
}

.paging ul li:hover, .paging ul li.over{
	cursor:pointer;
}


.paging ul li.now_page{
	color: #000;
}

.paging ul li.prev{
	background:url('../images/m_ico_page_prev.png') no-repeat center / 10px;
}

.paging ul li.next{
	background:url('../images/m_ico_page_next.png') no-repeat center / 10px;
}

@media screen and (max-width: 500px) {
	.paging{
		margin:2vw 0 25vw;
	}
	
	.paging ul li{
		width:5vw;
		height: 5vw;
		line-height: 5vw;
		font-size:3vw;
		margin-right: 1vw;
	}
	
	.paging ul li.prev,
	.paging ul li.next {
		background-size: 2vw;
	}
}


/******************************************
	상품 리스트 썸네일
*******************************************/
.pd_list > li .thumb {
	position: relative;
	width: 310px;
	height: 310px;
	border-radius: 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	overflow: hidden;
}

.pd_list > li .thumb .hover_img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 0.4s ease-in-out;
}

.pd_list > li .thumb:hover .hover_img {
	opacity: 1;
}

.pd_list > li .thumb::after {
	position: absolute;
	top: 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	content: "";
}

.pd_list > li .thumb.fc::after { left: 13px; width: 23px; height: 12px; background-image: url('../images/m_label_fc.png'); }
.pd_list > li .thumb.in::after { left: 20px; width: 12px; height: 27px; background-image: url('../images/m_label_ir.png'); }
.pd_list > li .thumb.cp::after { left: 20px; width: 17px; height: 20px; background-image: url('../images/m_label_cp.png'); }

.pd_list > li .info {
	margin-top: 28px;
	padding-bottom: 130px;
}

.pd_list > li .info .brand_color {
	display: flex;
	justify-content: space-between;
}

.pd_list > li .info .brand_color .brand {
	font-size: 16px;
	font-weight: 300;
}

.pd_list > li .info .brand_color .color_list {
	position: relative;
	top: 3px;
}

.pd_list > li .info .brand_color .color_list .color {
	float: left;
	width: 17px;
	height: 17px;
	margin-right: 3px;
	border-radius: 50%;
	background: blue;
}

.pd_list > li .info .brand_color .color_list .more {
	position: relative;
	float: left;
	top: -3px;
	font-size: 16px;
}

.pd_list > li .info .collection {
	display: inline-block;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 300;
	color: #777777;
}

.pd_list > li .info .product_naem {
	display: block;
	font-size: 18px;
	font-weight: 500;
}

.pd_list > li .info .keyword {
	font-size: 14px;
	font-weight: 300;
	color: #777777;
}

.pd_list > li .info .price_box {
	margin-top: 10px;
}

.pd_list > li .info .price_box .rate {
	margin-right: 20px;
	font-size: 18px;
	font-weight: 600;
	color: #DF7829;
}

.pd_list > li .info .price_box .price {
	font-size: 22px;
	font-weight: 500;
}

.pd_list > li .info .tag_box {
	margin-top: 17px;
}

.pd_list > li .info .tag_box .tag {
	display: inline-block;
	height: 27px;
	margin-right: 3px;
	margin-bottom: 3px;
	padding: 0 10px;
	border-radius: 5px;
	background: #000;
	color: #fff;
	font-size: 14px;
	line-height: 27px;
	font-weight: 300;
}

.pd_list > li .info .collection,
.pd_list > li .info .product_naem,
.pd_list > li .info .keyword {
	display: block; 
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media screen and (max-width: 500px) {
	.pd_list > li .thumb {
		width: 46.5vw;
		height: 46.5vw;
		border-radius: 2vw;
	}
	
	.pd_list > li .thumb::after {
		top: 2vw;
	}
	
	.pd_list > li .thumb.fc::after { left: 2vw; width: 4.5vw; height: 2.3vw; }
	.pd_list > li .thumb.in::after { left: 2vw; width: 2vw; height: 4.5vw; }
	.pd_list > li .thumb.cp::after { left: 2vw; width: 2.5vw; height: 3vw; }
	
	.pd_list > li .info {
		margin-top: 2.8vw;
		padding-bottom: 8vw;
	}
	
	.pd_list > li .info .brand_color .brand {
		font-size: 3vw;
	}
	
	.pd_list > li .info .brand_color .color_list {
		top: 0.8vw;
	}
	
	.pd_list > li .info .brand_color .color_list .color {
		width: 3vw;
		height: 3vw;
		margin-right: 0.3vw;
	}
	
	.pd_list > li .info .brand_color .color_list .more {
		top: -0.7vw;
		font-size: 3vw;
	}
	
	.pd_list > li .info .collection {
		margin-top: 1.5vw;
		font-size: 2.8vw;
	}
	
	.pd_list > li .info .product_naem {
		font-size: 3.2vw;
	}
	
	.pd_list > li .info .keyword {
		font-size: 2.8vw;
	}
	
	.pd_list > li .info .price_box {
		margin-top: 2vw;
	}
	
	.pd_list > li .info .price_box .rate {
		margin-right: 6vw;
		font-size: 3.6vw;
	}
	
	.pd_list > li .info .price_box .price {
		font-size: 3.6vw;
	}
	
	.pd_list > li .info .tag_box {
		margin-top: 2vw;
	}
	
	.pd_list > li .info .tag_box .tag {
		height: 4.5vw;
		padding: 0 1vw;
		border-radius: 0.5vw;
		font-size: 2.8vw;
		line-height: 4.5vw;
	}
}


/******************************************
	레이어 기본 설정
*******************************************/
#layer_popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 9999;
}

#layer_popup .layer_box {
	position: absolute;
	top: calc(50% - 344px);
	left: calc(50% - 602px);
	width: 1204px;
	height: 688px;
	padding: 80px 30px;
	border-radius: 20px;
	background: #fff;
	overflow-y: auto;
}

#layer_popup .layer_close {
	position: absolute;
	top: 30px;
	right: 35px;
}

#layer_popup .layer_close .toggle {
	position: absolute;
	top: 0;
	left: 0;
	width: 15px;
	height: 2px;
	background: #A2A2A2;
}

#layer_popup .layer_close .toggle:first-child {
	transform: rotate(45deg);
}

#layer_popup .layer_close .toggle:last-child {
	transform: rotate(-45deg);
}

@media screen and (max-width: 500px) {	
	#layer_popup .layer_box {
		top: calc(50% - 62vw);
		left: 2%;
		width: 96%;
		height: 123vw;
		padding: 11vw 3vw;
		border-radius: 2vw;
	}
	
	#layer_popup .layer_close {
		position: absolute;
		top: 3vw;
		right: 5vw;
	}
	
	#layer_popup .layer_close .toggle {
		width: 3vw;
		height: 1px;
	}
}


/******************************************
	쇼핑정보 리스트 상단 전체선택, 선택삭제 css
*******************************************/
.cart_top {
	margin-top: 40px;
	padding: 0 20px;
}

.cart_top label {
	font-size: 18px;
}

.cart_top label input[type="checkbox"] {
	margin-right: 10px;
}

.cart_top button {
	float: right;
	font-size: 18px;
	color: #666666;
}

@media screen and (max-width: 500px) {
	.cart_top {
		margin-top: 5vw;
		padding: 0 2vw;
	}
	
	.cart_top label {
		font-size: 3.2vw;
	}
	
	.cart_top label input[type="checkbox"] {
		margin-right: 1vw;
	}
	
	.cart_top button {
		font-size: 3.2vw;
	}
}


/******************************************
	게시판 리스트
*******************************************/
.default_list {
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

.default_list th,
.default_list td {
	padding: 25px 0;
	font-size: 18px;
	text-align: center;
}

.default_list th {
	border-bottom: 1px solid #eeeeee;
	font-weight: 500;
}

.default_list td {}

.default_list td .default_list_btn {
	margin: 0 3px;
	padding: 7px 14px;
	border-radius: 5px;
	border: 1px solid #000;
	font-size: 18px;
}

@media screen and (max-width: 500px) {
	.default_list th,
	.default_list td {
		padding: 4vw 0;
		font-size: 3vw;
	}
	
	.default_list .list_pc {
		display: none;
	}
	
	.default_list td.btns {
		text-align: right;
	}
	
	.default_list td .date_state {
		color: #808080;
	}
	
	.default_list td .default_list_btn {
		margin: 0 0.3vw;
		padding: 1.7vw 7vw;
		border-radius: 1vw;
		font-size: 3vw;
	}
}


/******************************************
	게시판 글쓰기
*******************************************/
.default_write {
	border-top: 1px solid #000;
}

.default_write > tbody > tr > th,
.default_write > tbody > tr > td {
	padding: 10px 0;
	border-bottom: 1px solid #000;
	font-size: 18px;
}

.default_write > tbody > tr > th {
	width: 120px;
	border-right: 1px solid #000;
	font-weight: 500;
}

.default_write > tbody > tr > td {
	padding-left: 45px;
}

.default_write > tbody > tr > td.no_padding {
	padding-left: 0;
}

@media screen and (max-width: 500px) {
	.default_write {
		display: block;
		border: 0;
	}
	
	.default_write > tbody > tr > th,
	.default_write > tbody > tr > td {
		display: block;
		width: 96vw;
		padding: 10px 0;
		overflow: hidden;
		border: 0;
	}
	
	.default_write > tbody > tr > th {
		border: 0;
		border-bottom: 1px solid #000;
		font-size: 3.2vw;
		text-align: left;
	}
	
	.default_write > tbody > tr > td {
		font-size: 3vw;
		padding-left: 0;
	}
	
	.default_write .table_pc {
		display: none;
	}
}


/******************************************
	폼 요소
*******************************************/
select.default_select {
	border: 0;
}

input.default_input {
	border: 0;
}

textarea.default_textarea {}

button.write_btn {
	padding: 10px 15px;
	border: 1px solid #000;
	border-radius: 9px;
	font-size: 18px;
}

.attached_imgs {
	display: flex;
	gap: 12px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}

.img_item, .btn_attach {
	width: 120px;
	height: 120px;
	border-radius: 10px;
	position: relative;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.img_item {
	background-color: #f5f5f5;
}

.img_item.existing {
	overflow: hidden;
}

.img_item.existing img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.btn_close {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 20px;
	height: 20px;
	background: url('../images/m_btn_photo_close.png') no-repeat center / contain;
	border: none;
	cursor: pointer;
	background-color: #fff;
	border-radius: 50%;
}

.btn_attach {
	border: 1px solid #ccc;
	background-image: url('../images/icon_photo_plus.png');
	background-size: 24px;
	cursor: pointer;
	background-color: #fff;
}

.attach_notice {
	display: block;
	font-size: 14px;
	color: #DF7829;
	margin-top: 15px;
}

@media screen and (max-width: 500px) {
	select.default_select {
		border: 0;
		width: 100%;
		height: 10vw;
		border: 1px solid #ddd;
		font-size: 3vw;
	}
	
	input.default_input {
		border: 0;
		width: 100%;
		height: 10vw;
		border: 1px solid #ddd;
		font-size: 3vw;
	}
	
	textarea.default_textarea {}
	
	button.write_btn {
		width: 100%;
		padding: 2vw 0;
		border-radius: 1vw;
		font-size: 3vw;
	}
	
	.attached_imgs {
		display: flex;
		gap: 1.5vw;
		margin-bottom: 10px;
		flex-wrap: wrap;
	}
	
	.img_item, .btn_attach {
		width: 12.5vw;
		height: 12.5vw;
		border-radius: 1vw;
	}
	
	.btn_close {
		top: 0.5vw;
		right: 0.5vw;
		width: 3vw;
		height: 3vw;
	}
	
	.btn_attach {
		background-size: 2.5vw;
	}
	
	.attach_notice {
		font-size: 2.4vw;
		margin-top: 2vw;
	}
}


/******************************************
	버튼 요소
*******************************************/
.btn_area01 {
	margin: 80px 0;
	text-align: center;
}

.default_btn {
	width: 350px;
	height: 55px;
	margin: 0 5px;
	border: 1px solid #000;
	border-radius: 10px;
	font-size: 18px;
}

.default_btn.line {}

.default_btn.solid {
	background: #000;
	color: #fff;
}


@media screen and (max-width: 500px) {
	.btn_area01 {
		margin: 10vw 0;
	}
	
	.default_btn {
		width: 100%;
		height: 11vw;
		margin: 0;
		margin-bottom: 2vw;
		border-radius: 1vw;
		font-size: 3.6vw;
	}
}