@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
/*@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);*/
* {-webkit-text-size-adjust:none;}
* { margin:0;padding:0; }
a { text-decoration: none;color:#000; }
a:visited{ text-decoration: none;color:#000; }
a:hover{ color:#000; }
img{ border:0px; }

body{
	margin:0px;
	padding:0px;
}

/* Table */
table{
	border:0px;
	border-spacing:0px;
	border-collapse:collapse;
}
td, th{
	padding:0px;
	word-break:break-all;
}

/* Etc */
.title_font_family{
	font-family:'Montserrat','Apple SD Gothic Neo',sans-serif;
}

#wrap{ 
	width:100%;
	font-family:'Apple SD Gothic Neo','Noto Sans CJK KR', 'Malgun Gothic',sans-serif;
	letter-spacing: -1px;
}

/* 본문 */
#wrap > #body{
	position:relative;
	width:100%;
	background-color:#fff;
	margin-top:0px;
	padding:30px 0px 0px 0px;
}
#wrap > #body > #body_content{
	position:relative;
	width:100%;
}
#wrap > #body > #body_content > #content_main{
	position:relative;
	width:1000px;
	margin:auto;
}
#wrap > #body > #body_content > #content_main > #content_wrap{
	width:1000px;
	margin:auto;
}

/* content */
#wrap > #body > #body_content > #content_main > #content_wrap > #content{
	position:relative;
	padding-bottom:100px;
}

#goods_area ul > li.on{
	color: #000;
	font-weight: bold;
	border-radius: 5px;
	background-color: #FFD940;
}
#goods_area ul > li {
	float: left;
	list-style: none;
	font-size: 15px;
	padding: 7px 15px;
	cursor: pointer;
	margin-bottom:15px;
}
/* 탭메뉴 */
#wrap > #body > #body_content > #content_main > #content_wrap > #content > #tab_menu_wrap{
	width:100%;
	background-color:#fff;
}
#wrap > #body > #body_content > #content_main > #content_wrap > #content > #tab_menu_wrap > #tab_menu{
	width:1000px;
	margin:auto;
	overflow:hidden;
	display:flex;
}
#wrap > #body > #body_content > #content_main > #content_wrap > #content > #tab_menu_wrap > #tab_menu > i{
	float:left;
	display:block;
	width:calc(50% - 5px);
	height:50px;
	line-height:50px;
	font-style:normal;
	text-align:center;
	box-sizing:border-box;
	border-radius:10px;
	background-color:#fff;
	margin:0 30px;
}
#wrap > #body > #body_content > #content_main > #content_wrap > #content > #tab_menu_wrap > #tab_menu > i.on{
	background-color:#3EB136;
}

#wrap > #body > #body_content > #content_main > #content_wrap > #content > #tab_menu_wrap > #tab_menu > i > a{
	display:block;
	width:100%;
	height:100%;
}
#wrap > #body > #body_content > #content_main > #content_wrap > #content > #tab_menu_wrap > #tab_menu > i > a,
#wrap > #body > #body_content > #content_main > #content_wrap > #content > #tab_menu_wrap > #tab_menu > i > a:visited,
#wrap > #body > #body_content > #content_main > #content_wrap > #content > #tab_menu_wrap > #tab_menu > i > a:hover{
	color:#000;
}
#wrap > #body > #body_content > #content_main > #content_wrap > #content > #tab_menu_wrap > #tab_menu > i.on > a,
#wrap > #body > #body_content > #content_main > #content_wrap > #content > #tab_menu_wrap > #tab_menu > i.on > a:visited,
#wrap > #body > #body_content > #content_main > #content_wrap > #content > #tab_menu_wrap > #tab_menu > i.on > a:hover{
	color:#fff;
}

/* 타이틀 */
#wrap > #body > #body_content > #content_main > #content_wrap > #content > #content_title{
	position:relative;
	color:#000;
	font-size:28px;
	font-weight:bold;
}

/* location */
#wrap > #body > #body_content > #content_main > #content_wrap > #content > #content_title > #location_wrap{
	position:absolute;
	top:-0px;
	right:0;
	font-size:17px;
	font-weight:bold;
	overflow:hidden;
	z-index:1;
}
#wrap > #body > #body_content > #content_main > #content_wrap > #content > #content_title > #location_wrap > li{
	float:left;
	list-style:none;
	color:#999999;
	font-size:14px;
	font-weight:normal;
	text-align:center;
	padding:0px 5px;
}
#wrap > #body > #body_content > #content_main > #content_wrap > #content > #content_title > #location_wrap > li > a,
#wrap > #body > #body_content > #content_main > #content_wrap > #content > #content_title > #location_wrap > li > a:visited,
#wrap > #body > #body_content > #content_main > #content_wrap > #content > #content_title > #location_wrap > li > a:hover{
	color:#999999;
}

/* 서브 메뉴 */
#content_sub_menu{
	position:relative;
	overflow:hidden;
	/*border-top:2px solid #000;
	border-bottom:1px solid #8f8f8f;*/
	padding:10px 0px;
	margin-top:20px;
}
#content_sub_menu > div{
	float:left;
	height:60px;
	line-height:60px;
	color:#666;
	text-align:center;
	box-sizing:border-box;
	border-top:1px solid #e5e5e5;
	border-left:1px solid #e5e5e5;
	border-bottom:1px solid #e5e5e5;
	background-color:#f7f7f7;
	cursor:pointer;
}
#content_sub_menu > div:last-child{
	box-sizing:border-box;
	border-right:1px solid #e5e5e5;
}
#content_sub_menu > div a,
#content_sub_menu > div a:hover,
#content_sub_menu > div a:visited{
	color:#666;
}
#content_sub_menu > div.selected{
	color:#fff;
	font-weight:bold;
	border:1px solid #3435a5;
	background-color:#3435a5;
	cursor:default;
}
#content_sub_menu > div.selected a,
#content_sub_menu > div.selected a:hover,
#content_sub_menu > div.selected a:visited{
	color:#fff;
	cursor:default;
}
.loader_body{
	display:block;
	background: black;
	width:500px;
	height:500px;
	z-index: 999;
}

.loader-container {
	display: flex; /* flexbox 사용 */
	justify-content: center; /* 수평 중앙 정렬 */
	align-items: center; /* 수직 중앙 정렬 */
	position: fixed;
	top: 50%; /* 세로 중앙 */
	left: 50%; /* 가로 중앙 */
	transform: translate(-50%, -50%); /* 정확한 중앙 정렬 */
	width: 120px; /* 로고 크기 */
	height: 120px; /* 로고 크기 */
	z-index: 999;
}

.logo {
	width: 100%; /* 로고를 컨테이너 크기에 맞추기 */
	height: auto; /* 비율 유지 */
	position: absolute; /* 위치를 조정하기 위해 절대 위치 사용 */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /* 중앙 정렬 */
	z-index: 2; /* 로고가 스피너 위에 위치하도록 설정 */
}

.loader {
	width: 120px; /* 스피너의 크기 */
	height: 120px; /* 스피너의 크기 */
	border-radius: 50%; /* 원형으로 만들기 */
	border-top: 3px solid #3CB034; /* 위쪽 선의 색상 및 두께 */
	border-right: 3px solid transparent;
	animation: rotation 1s linear infinite; /* 스피너가 회전하는 애니메이션 */
	position: absolute; /* 스피너 위치 조정 */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /* 중앙 정렬 */
}

/* 스피너의 회전 애니메이션 정의 */
@keyframes rotation {
	0% {
		transform: translate(-50%, -50%) rotate(0deg); /* 회전 애니메이션 */
	}
	100% {
		transform: translate(-50%, -50%) rotate(360deg); /* 회전 애니메이션 */
	}
}