/********************header ********************/
header {
	width:100%;
	position:fixed;
	background:#fff;
	border-bottom:1px solid #eeeeee;
	box-sizing:border-box;
	z-index:99;
}
header::before {
	content:'';
	position:absolute;
	top:120px;
	left:0;
	width:100%;
	height:400px;
	/*2depth 높이 설정*/
	background:#fff;
	display:none;
	border-top:1px solid #eee;
	border-bottom:1px solid #eee;
}
.header-scroll .viewport header::before {
	top:80px
}
header.on::before {
	display:block;
}
header .in_header,header .top_header .top_header_wrap {
	width:1280px;
	margin:0 auto;
	padding:0 20px;
}
header .top_header {
	border-bottom:1px solid #eeeeee;
	box-sizing:border-box;
}
header .top_header .top_header_wrap {
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:10px 20px;
}
header .top_header .list {
	display:flex;
	align-items:center;
	font-size:14px;
	color:#666666;
}
header .top_header .list.num .data span {
	color:#004097;
	margin-right:30px;
	font-weight:bold;
}
header .top_header .list.num .down span {
	color:#26A0FC;
	font-weight:bold;
}
header .top_header .list.user li a {
	display:block;
	padding-left:20px;
	box-sizing:border-box;
	position:relative;
	background-repeat:no-repeat;
	background-position:center left;
	margin-left:30px;
	color:#222;
}
header .top_header .list.user .login a {
	background-image:url('../images/new/ico-login.svg');
}
header .top_header .list.user .join a {
	background-image:url('../images/new/ico-join.svg');
}
header .in_header .bottom_header {
	display:flex;
	align-items:center;
	justify-content:space-between;
}
header .in_header .bottom_header .navList {
	display:flex;
	align-items:center;
}
header .in_header .bottom_header .navList.mob {
	display:none;
}
header .in_header .bottom_header .navList>li {
	position:relative;
}
header .in_header .bottom_header .navList>li .detp1 {
	display:block;
	padding:0 40px;
	text-align:center;
	height:80px;
	line-height:80px;
	color:#222;
	font-weight:500;
	font-size:18px;
}
header .in_header .bottom_header .navList>li .detp1.on {
	color:#004097;
}
header .in_header .bottom_header .navList>li .detp2 {
	display:none;
	position:absolute;
	width:100%;
	text-align:center;
	padding:25px 0;
	height:400px;
	/*2depth 높이 설정*/
}
header .in_header .bottom_header .navList>li .detp2.on {
	display:block;
}
header .in_header .bottom_header .navList>li .detp2.active {
	background:#004097;
}
header .in_header .bottom_header .navList>li .detp2.active a {
	color:#fff;
}
header .in_header .bottom_header .navList>li .detp2 a {
	display:block;
	padding-bottom:20px;
	color:#444;
}
header .in_header .bottom_header .navList>li .detp2 a:hover {
	text-decoration:underline;
}
header .in_header .bottom_header .mobBtn {
	display:none;
	text-indent:-9999px;
	width:18px;
	height:18px;
	background:url('../images/new/close_menu.png') no-repeat;
	background-size:100%;
}
header .in_header .bottom_header .menuBtn button {
	text-indent:-9999px;
	width:18px;
	height:18px;
	background-size:100%;
	background-repeat:no-repeat;
}
header .in_header .bottom_header .menuBtn .open {
	background-image:url('../images/new/open_menu.png');
}
header .in_header .bottom_header .menuBtn .close {
	background-image:url('../images/new/close_menu.png');
	display:none;
}
header .in_header .bottom_header .menuBtn.on .open {
	display:none;
}
header .in_header .bottom_header .menuBtn.on .close {
	display: block;
}
/* 반응형 */
@media screen and (max-width:1280px) {
	header .in_header,header .top_header .top_header_wrap {
		width:90%;
	}
}
@media screen and (max-width:1200px) {
	.header-top {
		height:60px;
	}
	header.on::before {
		display:none;
	}
	header .in_header,header .top_header .top_header_wrap {
		width:95%;
	}
	header .alarm{
		display: none;
	}
	header .cart{
		display: none;
	}
	header .adminpage{
		display: none;
	}
	header .top_header .top_header_wrap {
		padding:10px 0;
	}
	.header-scroll header .top_header {
		display:block !important;
		height:60px !important;
	}
	header .top_header {
		position:absolute;
		background:#fff;
		width:100%;
		opacity:0;
		z-index:-1;
	}
	header .top_header.on {
		opacity:1;
		z-index:1;
	}
	header .top_header .list {
		gap:10px;
	}
	header .top_header .list.num {
		flex-wrap:wrap;
		row-gap:0;
	}
	header .top_header .list.num li {
		white-space:nowrap;
		display:block;
		width:100%;
	}
	header .top_header .list.user {
		flex-shrink:0;
	}
	header .in_header .bottom_header {
		padding:15px 0;
	}
	header .in_header .bottom_header nav {
		position:absolute;
		top:49px;
		left:-100%;
		width:100%;
		height:calc(100vh - 60px);
		background:#fff;
		overflow-y:scroll;
	}
	header .in_header .bottom_header nav.on {
		left:0;
	}
	header .in_header .bottom_header .navList.pc {
		display:none;
	}
	header .in_header .bottom_header .navList.mob {
		display:flex;
	}
	header .in_header .bottom_header .navList {
		flex-direction:column;
		margin-top:60px;
	}
	header .in_header .bottom_header .navList>li {
		width:100%;
	}
	header .in_header .bottom_header .navList>li .detp1 {
		height:50px;
		line-height:50px;
		color:#222;
	}
	header .in_header .bottom_header .navList>li .detp1.on {
		font-weight:bold;
		;
	}
	header .in_header .bottom_header .navList.mob>li .detp2 {
		position:static;
		height:100%;
		background:#f8f8f8;
	}
	header .in_header .bottom_header .navList.mob>li .detp2 a {
		color:#666;
	}
	header .in_header .bottom_header .navList>li .detp2 li:last-child a {
		padding-bottom:0;
	}
	header .in_header .bottom_header .mobBtn {
		display:block;
		position:absolute;
		top:30px;
		right: 30px;
	}
}
/********************Main ********************/
/*.main {
	padding-top:150px;
	background:url('../images/new/main-txt.png') right bottom no-repeat;
	padding-bottom:50px;
}*/
.sub-con {
	padding-top:100px;
}
/*#mainVisualWrap {*/
/*	color:#fff;*/
/*}*/
/*#mainVisual {*/
/*	overflow:hidden;*/
/*	display:flex;*/
/*	justify-content:space-between;*/
/*	margin:0 auto;*/
/*	align-items: center;*/
/*}*/
/*!* mainVisual *!*/
/*#mainVisual .mainSwiper {*/
/*	width:640px;*/
/*	height:354px*/
/*}*/
/*#mainVisual .main_img li {*/
/*	width:100%;*/
/*	height:100%;*/
/*}*/
/*#mainVisual .main_img li.img01 {*/
/*	background:url('../images/new/main-visual01.png') left top no-repeat;*/
/*}*/
/*#mainVisual .slider {*/
/*	position:relative;*/
/*}*/
/*#mainVisual .swiper-pager {*/
/*	position:absolute;*/
/*	left:90px;*/
/*	display:flex;*/
/*	align-items:flex-end;*/
/*	justify-content:center;*/
/*	z-index:101;*/
/*	bottom:50px;*/
/*	transform:translateX(-50%);*/
/*	z-index:90*/
/*}*/
/*#mainVisual .swiper-pager span {*/
/*	position:relative;*/
/*	opacity:.3;*/
/*	width:10px;*/
/*	height:10px;*/
/*	border-radius:50px;*/
/*	background:#00285E;*/
/*	transition:all .3s*/
/*}*/
/*#mainVisual .swiper-pager span+span {*/
/*	margin-left:10px*/
/*}*/
/*#mainVisual .swiper-pager span.on {*/
/*	opacity:1;*/
/*	width:25px;*/
/*}*/
/*#mainVisual .slider .swiper-slide {*/
/*	border-radius:20px;*/
/*	background:#fff*/
/*}*/
/*#mainVisual .slide-tit {*/
/*	padding:50px 0 0 50px;*/
/*}*/
/*#mainVisual .slide-tit h4 {*/
/*	color:#222;*/
/*	font-size:40px;*/
/*	font-family:'GmarketSans';*/
/*	line-height:1.2;*/
/*	padding-bottom:20px;*/
/*}*/
/*#mainVisual .slide-tit p {*/
/*	color:#00285E;*/
/*	font-size:16px;*/
/*	opacity:38;*/
/*}*/
/*#mainVisual .search {*/
/*	margin-left:70px;*/
/*	width:calc(100% - 640px);*/
/*}*/
/*#mainVisual .search .main-tit h4 {*/
/*	font-size:4rem;*/
/*	font-family:'GmarketSans';*/
/*	font-weight:500;*/
/*	line-height:1.2;*/
/*	margin-bottom:30px;*/
/*}*/
/*#mainVisual .search .main-tit h4 b {*/
/*	font-weight:900;*/
/*}*/
/*#mainVisual .search-area {*/
/*	margin-bottom:30px;*/
/*	width:100%;*/
/*	height:60px;*/
/*	background:linear-gradient(to right,#2883FF,#004097);*/
/*	border:3px solid transparent;*/
/*	border-radius:30px;*/
/*	background-clip:padding-box,border-box;*/
/*	position:relative;*/
/*	z-index:0;*/
/*}*/
/*#mainVisual .search-area::before {*/
/*	content:"";*/
/*	position:absolute;*/
/*	top:-3px;*/
/*	left:-3px;*/
/*	right:-3px;*/
/*	bottom:-3px;*/
/*	background:linear-gradient(to right,#2883FF,#004097);*/
/*	border-radius:30px;*/
/*	z-index:-1;*/
/*}*/
/*#mainVisual .search-area .search-area-in {*/
/*	display:flex;*/
/*	align-items:center;*/
/*	background-color:#fff;*/
/*	border-radius:40px;*/
/*	padding:0 5px*/
/*}*/
/*#mainVisual .search-area input[type=text] {*/
/*	border:0;*/
/*	font-size:1.8rem;*/
/*	height:54px;*/
/*}*/
/*#mainVisual .search-area .btn-main-search {*/
/*	background:#004097;*/
/*	width:52px;*/
/*	height:48px;*/
/*	border-radius:50px;*/
/*	display:block;*/
/*	box-shadow:0 5px 5px rgba(38,160,252,0.2);*/
/*}*/
/*#mainVisual .search .rank {*/
/*	display:flex;*/
/*	width:100%;*/
/*}*/
/*#mainVisual .search .rank h5 {*/
/*	font-size:1.4rem;*/
/*	color:#004097;*/
/*	font-weight:bold;*/
/*	padding-right:30px;*/
/*}*/
/*#mainVisual .search .rank ul li {*/
/*	display:inline-block;*/
/*	padding-right:15px;*/
/*}*/
/*#mainVisual .search .rank ul li a {*/
/*	color:#666;*/
/*	font-size:1.4rem;*/
/*}*/
.quick-menu {
	height:100px;
	width:100%;
	background:#004097;
	margin:0 0 70px 0;
}
.quick-menu .app-inner {
	position:relative;
}
.quick-menu .app-inner .quick-label {
	position:absolute;
	left:20px;
	margin-top:-20px;
	width:95px;
	height:40px;
	border-radius:15px 15px 0 15px;
	box-shadow:0 5px 10px rgba(38,160,252,0.3);
	background:linear-gradient(to right,#70C1FF,#26A0FC);
	line-height:44px;
	color:#fff;
	font-family:'GmarketSans';
	font-weight:500;
	font-size:1.3rem
}
.quick-menu .app-inner ul li {
	display:inline-block;
	margin:8px 0;
}
.quick-menu .app-inner ul li a {
	color:#fff;
	padding:20px 35px;
	display:block;
	transition:all .3s ease;
}
.quick-menu .app-inner ul li a:hover {
	background:rgba(255,255,255,0.2);
	border-radius:15px;
}
.quick-menu .app-inner ul li a img {
	margin-right:15px;
}
.grid-div.flex {
	display:flex;
}
.data-section .app-title .right {
	display:flex;
	align-items:center;
}
.data-section .box-card {
	display:block;
	border-radius:20px;
	background:#fff;
	border:1px solid #e1e1e1;
	overflow:hidden;
	position:relative;
	min-height:170px;
}
.board-section .box-card {
	display:block;
	border-radius:20px;
	background:#fff;
	border:0;
	overflow:hidden;
	position:relative;
	min-height:200px;
}
.board-section a.box-card:hover {
	box-shadow:none;
}
.data-section .box-card .box-head,.board-section .box-card .box-head {
	padding:20px;
}
.data-section .box-card .box-head .icon {
	width:100px;
	height:130px;
	border-radius:10px;
	background:#EDEEF2;
	text-align:center;
	position:relative;
	margin-right:40px;
}
.data-section .box-card .box-head .icon img {
	width:50%;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
}
.data-section .box-card .box-head .info,.board-section .box-card .box-head .info {
	display:flex;
	align-items:center;
	padding-left:0;
	padding-top:0;
	text-align:left;
}
.data-section .box-card-tit,.board-section .box-card-tit {
	font-size:2.2rem;
	color:#222;
	font-weight:bold;
	margin:5px 0;
	line-height:1.5;
	text-align:left;
	overflow:hidden;
	-o-text-overflow:ellipsis;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.data-section .box-card .box-head .info .data-caption,.board-section .box-card .box-head .info .data-caption {
	padding:3px 10px;
	font-size:1.4rem;
	line-height:1.5;
	color:#fff;
	margin-right:10px;
	border-radius:20px;
}
.data-section .box-card .box-head .info .data-caption.red,.board-section .box-card .box-head .info .data-caption.red {
	background:#DE5D5D;
}
.data-section .box-card .box-head .info .data-date,.board-section .box-card .box-head .info .data-date {
	font-size:1.4rem;
	color:#888888;
	line-height:1.5;
}
.data-section .box-card .desc,.board-section .box-card .desc {
	font-size:1.4rem;
	text-align:left;
	color:#888888;
	line-height:26px;
	display:-webkit-box;
	display:-ms-flexbox;
	display:box;
	max-height:20px;
	min-height:20px;
	overflow:hidden;
	vertical-align:top;
	-o-text-overflow:ellipsis;
	text-overflow:ellipsis;
	word-break:break-all;
	-webkit-box-orient:vertical;
	line-clamp:1;
	-webkit-line-clamp:1;
	word-break:break-word;
	margin-bottom:10px;
}
.board-section .box-card .list-info {
	padding-top:30px;
}
.data-section .box-card .list-info li,.board-section .box-card .list-info li {
	position:relative;
	width:auto;
	margin-right:40px;
}
.data-section .box-card .list-info li:first-child:after,.board-section .box-card .list-info li:first-child:after {
	content:'';
	position:absolute;
	width:1px;
	height:14px;
	background:#ddd;
	top:8px;
	margin-left:60px;
}
.data-section .box-card .list-info li dl dt,.board-section .box-card .list-info li dl dt {
	text-align:left;
	padding:0;
	color:#888888;
	font-size:1.4rem;
	font-weight:400;
	border:0;
}
.data-section .box-card .list-info li dl dd,.board-section .box-card .list-info li dl dd {
	color:#222;
	padding:0 15px;
}
.btn-more {
	background:#565666;
	width:33px;
	height:33px;
	border-radius:30px;
	display:inline-block;
	line-height:30px;
	text-align:center;
	margin-left:20px;
}
.graphBnr .graph {
	height:364px;
	border:1px solid #e5e5e5;
	padding:20px;
	border-radius:20px 20px 0 20px;
	margin-bottom:30px;
}
.graphBnr .service-bnr {
	background:linear-gradient(to right,#1A67CF,#004097);
	height:140px;
	position:relative;
	border-radius:20px 0 20px 20px;
}
.graphBnr .service-bnr a {
	display:block;
	color:#fff;
	padding:15px 0 0 35px;
}
.graphBnr .service-bnr .tit {
	text-align:left;
	font-size:1.8rem;
}
.graphBnr .service-bnr .tit a {
	display:block;
	margin-top:0;
}
.graphBnr .service-bnr .img {
	position:absolute;
	bottom:0;
	right:30px;
}
.board-section {
	display:block;
	margin-top:70px;
	margin-left:-10px;
	margin-right:-10px;
}
.board-section:after {
	content:"";
	display:block;
	clear:both;
}
.board-section .app-title {
	margin-bottom:10px;
	padding:0 10px;
}
.board-section .app-title .tit {
	color:#222;
	font-size:3rem;
	font-weight:900;
}
.board-section .app-title .tit b {
	color:#004097
}
.board-section.default {
	margin-bottom:60px;
}
.board-section .row {
	float:left;
	width:55%;
}
.board-section .row+.row {
	margin-left:50px;
	width: calc(45% - 50px);
}
/* 조회수 상품 Top5 */
.top-prd {
	display:flex;
	overflow:hidden;
	align-items:center;
	border:1px solid #e5e5e5;
	border-radius:20px;
	box-shadow:0 10px 10px rgba(0,0,0,0.05);
}
.top-prd>.left {
	border-right:1px dashed #e5e5e5;
	width:270px;
}
.top-prd>.right {
	width:calc(100% - 270px)
}
.top-prd>.left,.top-prd>.right {
	padding:20px;
	box-sizing:border-box;
}
.top-prd>.left {
	border-right:1px dashed #ddd;
}
.top-prd>.right {
	background-color:#ffffff;
	position:relative;
}
.top-prd .left ul {
	list-style:none;
	padding:0;
}
.top-prd .left li {
	margin:5px 0;
	padding:5px;
	cursor:pointer;
	text-align:left;
	font-weight:bold;
	transition:background 0.3s;
	color:#9FA1AA;
	font-size:1.8rem
}
.top-prd .left li span {
	padding-right:20px;
}
.top-prd .left li:hover {
	color:#004097;
	text-decoration:underline;
}
.top-prd .right .content {
	display:none;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	padding:20px;
}
.top-prd .right .content.active {
	display:flex;
	align-items:center;
	justify-content: left;
}
/* 게시판 탭 */
.board-section .tabs {
	background:#EDEEF3;
	border-radius:10px;
}
.board-section .tabs li {
	float:left;
	width:20%;
}
.board-section .tabs a {
	display:block;
	text-align:center;
	text-decoration:none;
	text-transform:uppercase;
	color:#666;
	font-size:1.6rem;
	padding:10px 0;
}
.board-section .tabs a:hover,.board-section .tabs a.active {
	background:#004097;
	color:#fff;
	border-radius:10px;
	transition:all .3s ease;
}
.board-section .tabgroup div {
	text-align:left;
}
.board-section .tabgroup .top a {
	display:flex;
	align-items:center;
	border-bottom:1px dashed #ccc;
	padding:20px 0;
}
.board-section .tabgroup .top .date {
	display:block;
	width:80px;
	height:80px;
	background:#707780;
	text-align:center;
	margin-right:30px;
	font-size:1.4rem;
	color:#fff;
	border-radius:20px;
	font-family:'GmarketSans';
	padding:14px 0;
}
.board-section .tabgroup .top .date span {
	font-weight:bold;
	font-size:2.4rem;
}
.board-section .tabgroup .top .txt {
	width:calc(100% - 110px)
}
.board-section .tabgroup .top .txt h6 span {
	font-size:2rem;
	color:#222;
	display:inline-block;
	width:90%;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.board-section .tabgroup .top .txt h6 .new {
	background:#DE5D5D;
	color:#fff;
	width:20px;
	height:20px;
	border-radius:20px;
	font-size:12px;
	display:inline-block;
	text-align:center;
}
.board-section .tabgroup .top .txt p {
	font-size:1.4rem;
	color:#666;
	padding-top:5px;
	width:100%;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.board-section .tabgroup ul {
	margin-top:20px;
}
.board-section .tabgroup li {
	line-height:200%;
	display:flex;
	justify-content:space-between;
}
.board-section .tabgroup li a {
	color:#444;
	width:80%;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.board-section .tabgroup li .date {
	color:#888;
}
@media screen and (max-width:1200px) {
	/*.main {*/
	/*	padding-top:120px;*/
	/*}*/
	.sub-con {
		padding-top:100px;
	}
}
/* 반응형 [e] */
@media screen and (max-width:750px) {
	/*.main {*/
	/*	padding-top:100px;*/
	/*}*/
	#mainVisual {
		overflow:hidden;
		display:block;
		margin:0 auto;
	}
	#mainVisual .mainSwiper {
		width:100%;
	}
	#mainVisual .slide-tit {
		padding:50px 0 0 30px;
	}
	#mainVisual .swiper-pager {
		left:70px;
	}
	#mainVisual .search {
		margin:40px 0 0 0;
		width:100%;
	}
	#mainVisual .search .main-tit h4 {
		font-size:3rem;
		margin-bottom:20px;
	}
	.quick-menu {
		height:auto;
	}
	.quick-menu .app-inner .quick-label {
		left:10px;
		font-size:14px;
		height:30px;
		line-height:30px;
	}
	.quick-menu .app-inner ul li {
		margin:5px 0;
	}
	.quick-menu .app-inner ul li a {
		padding:10px;
	}
	.quick-menu .app-inner ul li a img {
		height:25px;
	}
	.data-section .grid-div .left .icon {
		display:none;
	}
	.data-section .box-card .box-head .icon {
		margin-right:20px;
	}
	.data-section .box-card-tit {
		font-size:1.8rem;
	}
	.data-section .box-card .box-head .info .data-caption {
		font-size:1.3rem
	}
	.board-section {
		margin-top:35px;
		margin-left:0;
		margin-right:0;
	}
	.board-section .app-title {
		padding:0;
	}
	.board-section .app-title .tit {
		font-size:2.2rem;
	}
	.board-section .row {
		float:none;
		width:100%;
	}
	.board-section .row+.row {
		width:100%;
		margin-top:30px;
		margin-left:0;
	}
	.board-section .row .column {
		width:100%;
		float:none;
	}
	.board-section .row .column+.column {
		margin-top:10px;
	}
	.news-section .row.col-4 .column {
		width:calc(100% / 2 - 20px);
		margin:10px;
	}
	.top-prd {
		display:block;
		height:auto;
	}
	.top-prd>.left {
		border-bottom:1px dashed #e5e5e5;
		border-right:0;
		width:100%;
	}
	.top-prd .left ul li {
		font-size:1.6rem;
		margin:0;
	}
	.top-prd>.right {
		width:100%;
		clear:both;
		overflow:hidden;
		padding:0;
	}
	.board-section .box-card {
		height:auto;
		width:100%;
		min-height:150px;
	}
	.top-prd .right .content {
		position:relative;
		padding:0;
	}
	.board-section .box-card .list-info {
		padding-top:10px;
	}
	.board-section .tabgroup .top .date {
		margin-right: 15px;
	}
}

/******************** 데이터 검색 ********************/
.checkbox-container {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom:30px;
}

.checkbox-button {
	width: calc(100% / 7 - 10px);
	height: 100px;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.3s, border-color 0.3s;
}

.checkbox-button img {
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.checkbox-button span {
	margin-top: 10px;
	font-size: 14px;
	color: #333;
	display: block;
}

.checkbox-button input[type="checkbox"] {
	display: none;
}

.checkbox-button input[type="checkbox"]:checked + .content {
	background-color: #004097;
	border-color: #004097;
	width: 100%;
	height: 100px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.checkbox-button input[type="checkbox"]:checked + .content span {
	color: #fff;
}

.toggle-button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 20px;
	background-color: #E1E9F0;
	color: #003878;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	font-size: 1.8rem;
	margin:10px 0 0 0 ;
	width:100%;
	transition: all .3s ease;
}

.toggle-button:hover {
	/*background-color: #003878;*/
	/*color:#fff;*/
}

.toggle-icon {
	background: #fff;
	width:34px;
	height: 34px;
	border-radius: 30px;
	line-height: 34px;
	font-weight: bold;
	color:#004097
}

.styled-checkbox {
	position:absolute;
	opacity:0;
}
.styled-checkbox+label {
	position:relative;
	cursor:pointer;
	padding:0;
	font-size:1.6rem;
}
.styled-checkbox+label:before {
	content:"";
	margin-right:10px;
	display:inline-block;
	vertical-align:text-top;
	width:20px;
	height:20px;
	background:white;
	border-radius:3px;
	border:1px solid #ddd;
}
.styled-checkbox:hover+label:before {
	background:#004097;
}
.styled-checkbox:checked+label:before {
	background:#004097;
		border:1px solid #004097;
}
.styled-checkbox:checked+label:after {
	content:"";
	position:absolute;
	left:5px;
	top:9px;
	background:white;
	width:2px;
	height:2px;
	box-shadow:2px 0 0 white,4px 0 0 white,4px -2px 0 white,4px -4px 0 white,4px -6px 0 white,4px -8px 0 white;
	transform:rotate(45deg);
}
.filter-section {
	background:#F4F8FB;
		padding:30px;
	border-radius:10px;
}
.filter-section .filter-search .input-serach {
	display:flex;
	gap:10px;
}
.details-box {
	margin-top:10px;
	display:none;
	/* 기본적으로 숨김 */
}
.details-box .search-tag {
	margin:0 10px;
}
.details-box .search-tag .like-label,.filter-group-inner .like-label {
	font-size:1.8rem;
	color:#222;
	font-weight:600;
	text-align:left;
	font-family:'GmarketSans';
	display:block;
	margin-bottom:10px;
}

.detail-item {
	margin-bottom: 10px;
	padding: 10px;
	background-color: #f0f0f0;
	border: 1px solid #ccc;
	border-radius: 3px;
}

.detail-item:last-child {
	margin-bottom: 0;
}

.filter-section .filter-search .input-serach input {
	color:#222;
	background:#fff;
	font-weight:600;
	font-size:1.6rem;
	border:1px solid #003878;
	border-radius:8px;
	height:54px;
	line-height:54px;
	padding-left:20px;
}
.filter-section .filter-search .input-serach .search {
		background:#EBF4FF;
	border-radius:10px;
	color:#004097;
	padding:10px 20px;
	height:54px;
	display:flex;
	align-items:center;
	text-indent:0;
	border:1px solid #004097;
	gap:10px;
	font-size:1.8rem;
	font-weight:500;
	width:115px;
}
.filter-section .filter-search .input-serach .search img {
	height:18px;
}
.filter-section .filter-search .input-serach input::-webkit-input-placeholder {
	color:#888;
	font-weight:400;
}
.filter-search {
	position:relative;
}
.search-history {
	position:absolute;
	top:63px;
	width:100%;
	min-height:100px;
	background:white;
	border:1px solid #e5e5e5;
	border-radius:5px;
	box-shadow:0 4px 6px rgba(0,0,0,0.05);
	display:none;
	z-index:90;
}
.search-history ul {
	list-style:none;
	margin:0;
	padding:0;
}
.search-history li {
	display:flex;
	justify-content:space-around;
	align-items:center;
	padding:8px 12px;
	border-bottom:1px solid #eee;
}
.search-history li:last-child {
	border-bottom:none;
}
.search-history li:hover {
	background:#F4F4F7;
}
.search-history li a {
	display:block;
	width:100%;
}
.search-history li span {
	flex:1;
	text-align:left;
}
.search-history li div span {
	color:#888;
	font-size:1.3rem;
}
.search-history li .delete-btn {
	color:#dc3545;
	border:none;
	padding:4px 8px;
	border-radius:4px;
	cursor:pointer;
	font-size:1.3rem;
}
.filter-group-inner .row {
	display:flex;
	background:#fff;
}
.filter-group-inner .tit {
	display:flex;
	padding-left:25px;
	font-weight:500;
	align-items:center;
	width:200px;
	background:#DFE4F0;
	font-size:1.8rem;
	color:#222;
	border-bottom:1px solid #fff;
}
.filter-group-inner .input-item {
	width:calc(100% - 40px);
	display:flex;
		align-items:center;
	justify-content:start;
	padding:20px;
	border-bottom:1px solid #ddd;
}
.filter-group-inner .input-item .input-item-inner {
	width:100%;
	display:flex;
		align-items:center;
	justify-content:start;
	flex-wrap:wrap;
}
.filter-group-inner .input-item .input-item-inner label {
	width:calc(100% / 7 - 10px);
	margin:5px;
}
span.cate1 {
	background:#de5d5d;
}
span.cate2 {
	background:#478edf;
}
span.cate3 {
	background:#ff6f01;
}
span.cate4 {
	background:#AD3EA6;
}
span.cate5 {
	background:#4ab296;
}
span.cate6 {
	background:#004097;
}
span.TBC {
	background:#C8C8C8;
}
.sr-only {
	position:absolute !important;
	width:1px;
	height:1px;
	padding:0;
	margin:-1px;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border: 0;
}
/* 버튼 영역 */
.toggle-button {
	display:flex;
	align-items:center;
	justify-content:center;
	/* 글자+아이콘 모두 중앙 */
	gap:10px;
	/* 글자와 아이콘 간격 */
	padding:10px 20px;
	background-color:#fff;
	color:#444;
	border:1px solid #444;
	border-radius:8px;
	cursor:pointer;
	font-size:1.8rem;
	margin:10px 0 0 0;
	width:100%;
	transition:all .3s ease;
	text-align:center;
}
/* 아이콘 기본 */
.toggle-icon {
	width:11px;
	height:6px;
	display:inline-block;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:center;
}
.toggle-icon {
	background-image:url('/assets/user/images/new/arrow_up.svg');
}
#details-toggle:checked+.toggle-button .toggle-icon {
	background-image: url('/assets/user/images/new/arrow_down.svg');
}
/* 텍스트 토글 */
.txt-close {
	display:none;
}
#details-toggle:checked+.toggle-button .txt-open {
	display:none;
}
#details-toggle:checked+.toggle-button .txt-close {
	display: inline;
}
/* 상세 영역 토글 */
#details-box {
	display:none;
}
#details-toggle:checked+.toggle-button+#details-box {
	display:block;
	animation:slideDown .25s ease;
}
.view-toggle {
	display:flex;
	gap:8px;
	align-items:center;
	margin-right:12px;
}
.view-toggle .btn-view {
	padding:8px 10px;
	line-height:1;
	cursor:pointer;
}
.list-board-data {
	display:grid;
	gap:10px;
	grid-template-columns: repeat(3,minmax(0,1fr));
	/* 3열 갤러리 */
}
/* 카드 기본(갤러리) 형태 유지 */
.list-board-data .list-board-data-item .box-card {
	display:block;
	height:100%;
}
.list-board-data .box-body .keyword {
	float:left;
	position:relative;
}
.list-board-data .box-body .keyword span {
	border:1px solid #dedede;
	font-size:1.5rem;
	border-radius:3px;
	padding:5px 10px;
	display:inline-block;
}
.list-board-data .box-body .date {
	font-size:1.4rem;
	color:#888;
	clear:both;
	padding-top:10px;
}
.list-board-data .box-body .date ul {
	display:flex;
}
.list-board-data .box-body .date li {
	padding-left:30px;
	position:relative;
}
.list-board-data .box-body .date li::after {
	content:'';
	position:absolute;
	width:1px;
	height:13px;
	background:#ddd;
	top:2px;
	left:15px;
}
.list-board-data .box-body .date li:first-child {
	padding-left:0;
}
.list-board-data .box-body .date li:first-child:after {
	display:none;
}
.list-board-data.is-list {
	display:block;
	/* 블록으로 바꾸고 각 항목을 세로로 쌓기 */
}
.list-board-data.is-list .list-board-data-item {
	margin-bottom:16px;
}
.list-board-data.is-list .box-card {
	display:flex;
	gap:30px;
	align-items:stretch;
	border:1px solid #ddd;
	border-radius:12px;
	background:#fff;
}
.list-board-data.is-list .img-box {
	width:360px;
	flex:0 0 360px;
	border-radius:8px;
	overflow:hidden;
}
.list-board-data.is-list .img-box img {
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.list-board-data.is-list .box-card .con-box {
	padding: 35px 25px 35px 0;
}
/* 텍스트/메타 영역을 가로로 펼치기 */
.list-board-data.is-list .box-head,.list-board-data.is-list .box-inner,.list-board-data.is-list .box-price,.list-board-data.is-list .box-body {
	/* 기존 여백/정렬을 약간 조정 */
}
.list-board-data.is-list .box-head {
	margin-top:0;
}
.list-board-data.is-list .box-card-tit {
	font-size:2.2rem;
	font-weight: 700;
}
/* 리스트 모드에서 정보 블록 정렬 */
.list-board-data.is-list .box-inner {
}
.list-board-data.is-list .img-box-logo {
	width:72px;
	height:auto;
}
.list-board-data.is-list .box-price {
	margin-left:auto;
	display:flex;
	align-items:flex-start;
}
.list-board-data.is-list .box-price em {
	font-weight:700;
}
.list-board-data.is-list .box-body {
	margin-top:10px;
	display:flex;
	justify-content:space-between;
}
.list-board-data.is-list .list-info {
	display:flex;
	flex-wrap:wrap;
	gap:16px;
}
.list-board-data.is-list .list-info li {
	min-width:140px;
}
@keyframes slideDown {
	from {
		opacity:0;
		transform:translateY(-5px);
	}
	to {
		opacity:1;
		transform: translateY(0);
	}
}
/* 반응형 [e] */
@media screen and (max-width:750px) {
	.filter-section {
			padding:15px;
	}
	.checkbox-button {
			width:calc(100% / 3 - 10px);
	}
	.checkbox-button,.checkbox-button input[type="checkbox"]:checked+.content {
			height:80px;
	}
	.checkbox-button img {
			width:30px;
			height:30px;
	}
	.search-history {
			top:40px;
	}
	.search-history li .delete-btn {
			display:block;
			text-align:right;
			width:100%;
	}
	.toggle-button {
			height:40px;
			font-size:1.6rem;
	}
	.details-box {
			background:none;
			padding:0;
	}
	.toggle-icon {
		width:24px;
		height: 24px;
		line-height: 24px;
	}
	.details-box .search-tag .like-label,.filter-group-inner .like-label {
			font-size:1.6rem;
	}
	.details-box .search-tag {
			margin:0;
	}
	.filter-group-inner .input-item {
			width:100%;
			padding:15px 10px;
			display:block;
				align-items:center;
					justify-content:space-between;
	}
	.filter-group-inner .row {
			display:block;
	}
	.filter-group-inner .tit {
			width:100%;
			font-size:1.6rem;
			justify-content:center;
					padding:10px 0;
	}
	.filter-group-inner .input-item .input-item-inner label {
		width:calc(100% / 3 - 10px);
		margin:5px;
	}
	.list-board-data {
		grid-template-columns:1fr;
		/* 3열 갤러리 */
	}
	.list-board-data>li,.list-board-data .box-card,.list-board-data .box-inner {
		min-width:0;
	}
	.list-board-data.is-list .box-card {
		/* flex-direction:column;*/ gap:0;
	}
	.list-board-data.is-list .img-box {
		width:100px;
		height:80px;
	}
	.list-board-data.is-list .img-box {
		flex:0 0 100px;
	}
	.list-board-data.is-list .box-price {
		margin-left:0;
	}
	.list-board-data.is-list .box-card .con-box {
		padding:10px 15px 10px 0;
		position:relative;
		overflow:hidden;
	}
	.list-board-data.is-list .box-body {
		display:block;
		margin-top:0;
	}
	.list-board-data.is-list .box-body .keyword span {
		font-size:1.3rem
	}
	.list-board-data.is-list .box-card-tit {
		font-size:2rem;
	}
	.list-board-data .box-body .date li {
		font-size:1.3rem;
	}
	.list-board-data .box-body .keyword {
		text-align:left;
	}
	.list-board-data .box-body .keyword span {
		font-size: 1.3rem
	}
}
/*서브탑*/
.top-visual {
	height:280px;
	width:100%;
	text-align:center;
	/* 가운데 정렬 */
	padding:100px 20px;
	position:relative;
}
.top-visual.visual01 {
	background:url('/assets/user/images/top-visual01.jpg') center top;
}
.top-visual .inner {
	max-width:1200px;
	margin: 0 auto;
}
/* 제목 */
.top-visual .page-title {
		font-family:'GmarketSans';
		color:#fff;
	font-size:4rem;
	font-weight:700;
	margin-bottom: 16px;
}
/* breadcrumb */
.top-visual .breadcrumb {
	position:absolute;
	bottom:0;
	display:flex;
	font-size:14px;
	color:#fff;
	width:100%;
	max-width:1200px;
	margin:0 auto;
	background:rgba(0,0,0,0.5);
	border-radius:15px 15px 0 0;
	padding:20px 0;
	justify-content:center;
}
.top-visual .breadcrumb li {
	list-style:none;
	position:relative;
	display:flex;
	align-items:center;
}
.top-visual .breadcrumb li::after {
	content:"";
	display:inline-block;
	width:9px;
	height:8px;
	margin:0 8px;
	background:url("/assets/user/images/new/ico-breadcrumb.svg") no-repeat center;
	background-size:contain;
}
.top-visual .breadcrumb li:last-child::after {
	content:none;
}
.top-visual .breadcrumb a {
	color:#fff;
	text-decoration:none;
}
@media screen and (max-width:750px) {
		.top-visual {
		height:150px;
		padding-top:40px;
	}
	.top-visual .breadcrumb {
		padding:15px 0;
		position:relative;
	}
	.top-visual .page-title {
		font-size: 3rem;
	}
}
/* ===== Side Floating Menu ===== */
.side-float-menu {
	position:fixed;
	right:30px;
	top:450px;
	transform:translateY(-100%);
	z-index:1000;
	width: 80px;
}
/* 박스:닫힘 80px → 열림 130px */
.side-float-box {
	position:absolute;
	top:0;
	right:0;
	/* ← 여기 덕분에 우상단이 앵커 */
	box-sizing:border-box;
	width:80px;
	/* 닫힘 폭 */
	height:130px;
	/* 닫힘 높이 */
	background:#fff;
	border:1px solid #004097;
	border-radius:12px;
	box-shadow:0 8px 24px rgba(0,64,151,.1);
	display:flex;
	flex-direction:column;
	overflow:hidden;
	transition:width .25s ease,height .25s ease;
	pointer-events:auto;
	/* 버튼 클릭 가능 */
}
/* 열림 상태 높이 */
.side-float-box[data-state="expanded"] {
	width:130px;
	height:470px;
}
.side-float-box[data-state="expanded"] .side-float-head-img {
	display: none;
}
/* 상단 영역 */
.side-float-head {
	flex:0 0 auto;
	padding:12px 6px 0;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
	text-align:center;
}
.side-float-head-img {
	display:block;
}
.side-float-head-text {
	font-size:1.6rem;
	font-weight:500;
	line-height:1.3;
	color: #004097;
}
/* 토글 버튼 */
.side-float-toggle {
	flex:0 0 26px;
	/* 버튼 높이 */
	width:100%;
	border:0;
	margin-top:15px;
	background:#004097;
	cursor:pointer;
	display:grid;
	place-items:center;
}
.side-float-toggle img {
	width:14px;
	height:14px;
	transition:transform .2s ease;
}
.side-float-toggle[aria-expanded="true"] img {
	transform: rotate(180deg);
}
/* 리스트 래퍼:박스 내부에서 슬라이드 되듯 열림/닫힘 */
.side-float-listwrap {
	flex:1 1 auto;
	overflow:hidden;
	max-height:0;
	opacity:0;
	transition: max-height .25s ease,opacity .2s ease;
}
/* 열림일 때 내부 영역 표시량 조절 (130px 전체 높이 안에 들어오도록) */
.side-float-box[data-state="expanded"] .side-float-listwrap {
	 width:130px;
	max-height:500px;
	opacity: 1;
}
/* 리스트 스타일 (80px 폭에 맞춰 세로형) */
.side-float-list {
	list-style:none;
	margin:6px 0;
	padding:0;
	display:grid;
	gap:6px;
}
.side-float-item {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:4px;
	text-decoration:none;
	border-radius:6px;
	padding:4px 0;
	background:#fff;
	transition:background-color .15s ease,border-color .15s ease;
}
.side-float-item:hover {
	background:#f7f9ff;
	border-color:#dfe6ff;
}
.side-float-thumb {
	width:110px;
	height:80px;
	object-fit:cover;
	border-radius:4px;
	display:block;
}
.side-float-title {
	font-size:1.5rem;
	height:1.6rem;
	line-height:1.2;
	color:#111;
	text-align:center;
	word-break:keep-all;
	width:90%;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
@media (max-width:1200px) {
	 .side-float-menu {
		display: none;
	}
}



@media (max-width:768px) {
	.side-float-menu {
		right:16px;
		top: 250px
	}
}

.product-like-select {
	height: 33px;
}

.product-like-select.default {
	min-width: 91px;
	height: 30px;
}

.product-like-select.default .product-like-select-link {
	font-size: 1.4rem;
	line-height: 30px;
	padding-left: 10px;
	padding-right: 25px;
}

.product-like-select.default .product-like-select-link:after {
	width: 4px;
	height: 8px;
	right: 15px;
}

.product-like-select.default .product-like-select-link + ul {
	top: 40px;
}

.product-like-select.default .product-like-select-link + ul.active {
	top: 40px;
}

.product-like-select.default .product-like-select-link + ul > li > a {
	font-size: 1.3rem;
	line-height: 2;
	padding-left: 10px;
	padding-right: 10px;
}

.product-like-select-link {
	font-size: 1.2rem;
	line-height: 33px;
	padding-left: 20px;
	padding-right: 60px;
}

.product-like-select-link + ul {
	width: 90%;
	margin: auto;
	left: 0;
	right: 0;
}

.product-like-select-link + ul.active {
	bottom: 33px;
}

.product-like-select-link + ul > li > a {
	font-size: 1.2rem;
	line-height: 33px;
	height: 33px;
	padding-left: 20px;
	padding-right: 20px;
}

.footer .product-like-select {
	float: right;
}

.grid-div.reverse p,.grid-div.reverse .product-like-select {
	display: inline-block;
}

.box-card .data-caption span {
	margin-right:3px;
	display:inline-block;
	height:30px;
	padding:5px 10px;
	color:#fff;
	border-radius:5px;
	font-size:1.4rem;
}

.box-card .data-caption .type {
	background:#003878;
	right:10px;
}

.box-card .con-box {
	width:100%;
	padding:15px 30px 25px 30px;
	position:relative;
	overflow:hidden;
}

.box-card .con-box {
	padding:15px 25px;
}

.box-card .data-caption {
	display:flex;
	justify-content:space-between;
}

.box-card .product-box-inner {
	position:relative;
}

.list-board-data.is-list .list-board-data-item{
	width: 100%;
	/* 블록으로 바꾸고 각 항목을 세로로 쌓기 */
}

.filter-group-inner .input-item .input-item-inner ul li {
	width:calc(100% / 7 - 10px);
	margin:5px;
}

.filter-section .input-item-inner.toggle.list-select {
	background: #fff;
	text-align: left;
	overflow: auto;
	/*border:1px solid #dedede;*/
	border-radius: 5px;
	height: 100%;
}

.filter-section .filter-group-inner {
	clear:both;
	margin:20px 0;
	position:relative;
	overflow:hidden;
	border-radius:8px;
}

.filter-section .list-select-group .filter-tit {
	display:block;
	font-size:1.8rem;
	font-weight:500;
	font-stretch:normal;
	font-style:normal;
	line-height:50px;
	margin-top:20px;
	color:#222;
	text-align:center;
	background:#DFE4F0;
	border-radius:8px 8px 0 0;
}

