.wide-content {
 	width: 100%;
 }

 .max-row {
 	width: calc(1232px + 32px);
 	max-width: 100%;
 	margin: 0 auto;
 	padding-right: 16px;
 	padding-left: 16px;
 }

 .section-detail-wrap {
 	min-height: calc(100vh - 270px);
 	height: 100%;
 	padding-bottom: 50px;
 }



 /********* header********************************************************************************************/
 /**********************************************************************************************************/
 #header {
 	position: fixed;
 	top: 0;
 	width: 100%;
 	margin: 0 auto;
 	z-index: 1050;
 	transition: all .5s;
 	background: var(--primary-500);

 	.top_logo {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		width: 100%;
 		cursor: pointer;

 		.logo {
 			width: 150px;
 			filter: var(--filter-white);
 		}
 	}

 	.header_pc {
 		.logo {
 			cursor: pointer;
 		}

 		.btn_wrap_auth {
 			display: flex;

 			.btn {
 				border-radius: 20px;
 				display: block;
 				font-size: .9rem;
 				min-width: 90px;
 				padding: .592rem .75rem;
 				width: 100%;
 			}
 		}

 		.btn_wrap_mypage {
 			.dropdown_menu {
 				background-color: #212121;
 				border-color: #373737;
 				border-radius: 10px;
 				color: #d4d4d4;
 				width: 200px;

 				.user_name {
 					width: 123px;
 				}
 			}

 			.dropdown_item {
 				color: #d4d4d4;
 				display: block;
 				padding: .25rem 1rem;
 			}
 		}
 	}
 }

 @media all and (max-width: 768px) {
 	#header {
 		.top_logo {
 			padding-left: 16px;

 			.logo {
 				padding-top: 4px;
 				width: 100px;
 			}
 		}

 	}
 }


 /***네비 슬라이드**************************/
 .navMenu-slides-wrap {
 	position: relative;
 	overflow: hidden;
 	height: 50px;
 	max-width: 700px;
 	padding-left: 30px;

 	.swiper-wrapper {
 		display: flex;
 		align-items: center;

 		&>li {
 			width: auto !important;

 			&>a {
 				display: flex;
 				align-items: center;
 				position: relative;
 				height: 100%;
 				padding: 0 20px;
 				font-size: 16px;
 				font-weight: 500;
 				color: var(--black);
 				cursor: pointer;
 				z-index: 100;
 			}

 			/* &.active {
 				&>a {
 					background: rgb(var(--rgb-white), 6%);
 					border-radius: 20px;
 					color: var(--white);
 				}
 			} */
 		}
 	}
 }

 @media all and (max-width: 768px) {
 	.navMenu-slides-wrap {
 		height: 60px;
 		max-width: 100%;
 		width: 100%;
 		padding-left: 40px;
 		border-radius: 100px;
 		display: flex;
 		align-items: center;



 		.swiper-wrapper {
 			&>li {
 				&>a {
 					padding: 0 10px;
 					font-size: 15px;
 				}

 				&.active {
 					&>a {
 						border-radius: 14px;
 					}
 				}
 			}
 		}
 	}
 }

 /******/
 .top-utill-wrap {
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	width: 100%;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	gap: 16px;
 	font-size: 14px;
 	text-align: center;
 	overflow: hidden;
 	transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
 	padding: 6px 16px;

 	.update_date {
 		color: var(--white);
 		font-weight: 400;
 		font-size: clamp(12px, 2.6vw, 14px);
 	}

 	.btn-ad-inquiry {
 		display: flex;
 		align-items: center;
 		border: 1px solid var(--white);
 		border-radius: 100px;
 		padding: 0 16px;
 		height: clamp(32px, 0.256vw + 31.077px, 36px);
 		font-size: clamp(12px, 2.6vw, 14px);
 		font-weight: 600;
 		color: var(--white);
 	}
 }

 @media all and (max-width: 1024px) {
 	.top-utill-wrap {
 		top: 0;
 		left: 0;
 		transform: translate(0, 0);
 		font-size: 13px;


 		.btn-home-add {
 			display: none;
 		}

 		.update_date {}

 		.btn-ad-inquiry {
 			color: var(--white) !important;
 			all: unset;
 		}
 	}
 }


 /*검색*/
 .top-search-wrap {
 	display: flex;
 	align-items: center;

 	&>form {
 		position: relative;
 		display: flex;
 		align-items: center;
 		gap: 10px;
 		width: 150px;
 	}

 	.ico {
 		position: absolute;
 		top: 50%;
 		left: 20px;
 		transform: translate(-50%, -50%);
 		background: url('/images/ico-search.svg')no-repeat center;
 		width: 22px;
 		height: 22px;
 		background-size: 100%;
 		display: block;
 		filter: var(--filter-gray-600);
 		border: none;
 		cursor: pointer;
 	}

 	.search-input-box {
 		width: 100%;
 		background: transparent !important;
 		border: 2px solid var(--white);
 		color: var(--gray-100) !important;
 		padding: 0 40px 0 16px;
 		display: flex;
 		align-items: center;
 		height: 40px;

 		&::placeholder {
 			color: var(--white);
 		}
 	}

 	.btn_search {
 		position: absolute;
 		top: 50%;
 		right: 0px;
 		transform: translate(-50%, -50%);
 		background: url('/images/ico-search.svg')no-repeat center;
 		display: flex;
 		align-items: center;
 		width: 26px;
 		height: 26px;
 		background-size: 100%;
 		font-size: 0;
 		cursor: pointer;
 		filter: var(--filter-white);
 	}
 }

 @media all and (max-width: 768px) {
 	.top-search-wrap {
 		position: absolute;
 		top: 8px;
 		right: 16px;

 		&>form {
 			width: 120px;
 			flex: 1 0 0;
 		}

 		.search-input-box {
 			border: 1px solid var(--white);
 			padding: 0 30px 0 10px;
 			height: 32px;
 		}

 		.btn_search {
 			right: -5px;
 			width: 20px;
 			height: 20px;
 		}
 	}
 }


 /***네비영역**********************************************************************************************************************************/
 @media all and (max-width: 768px) {
 	.sec-Navigator-wrap.max-row {
 		padding: 0 !important;
 	}
 }


 .hd-nav-warp {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	gap: 30px;
 	padding: 20px 0;

 	position: relative;

 	.menu {
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		width: 50px;
 		height: 100%;
 		position: absolute;
 		top: 50%;
 		left: 0;
 		transform: translate(0, -50%);
 		z-index: 50;
 	}
 }

 /***/
 .dropdown-container {
 	display: flex;
 	justify-content: center;
 	gap: 32px;

 	.dropdown-wrap {
 		position: relative;

 		.btn-dropdown {
 			background: transparent;
 			border: none;
 			font-size: 16px;
 			cursor: pointer;
 			display: flex;
 			align-items: center;
 			gap: 4px;
 			white-space: nowrap;
 			font-family: 'BM DOHYEON';
 			color: var(--white);

 			.arrow-icon {
 				display: inline-block;
 				width: 24px;
 				height: 24px;
 				background: url('/images/ico-arrow.svg') no-repeat center;
 				background-size: contain;
 				transition: transform 0.3s;
 				filter: var(--filter-white);
 			}
 		}

 		&.active .arrow-icon {
 			transform: rotate(180deg);
 		}

 		.dropdown-list {
 			position: absolute;
 			top: 100%;
 			left: 0;
 			margin-top: 6px;
 			background: white;
 			border-radius: 4px;
 			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
 			display: none;
 			min-width: 140px;
 			padding: 8px 0;
 			z-index: 10;

 			li {
 				padding: 8px 16px;
 				font-size: 14px;
 				color: #333;
 				cursor: pointer;

 				&:hover {
 					background: #f2f2f2;
 				}
 			}
 		}

 		&.active .dropdown-list {
 			display: block;
 		}
 	}
 }

 @media all and (max-width: 768px) {

 	.dropdown-container {
 		display: flex;
 		justify-content: space-around;
 		align-items: center;
 		width: 100%;
 		background: rgb(var(--rgb-black), 15%);
 		gap: 20px;
 		height: 38px;
 		padding: 0 16px;

 		.dropdown-wrap {
 			.btn-dropdown {
 				font-size: 15px;
 				gap: 2px;

 				.arrow-icon {
 					width: 20px;
 					height: 24px;
 				}
 			}


 			.dropdown-list {
 				li {
 					padding: 4px 10px;
 				}
 			}
 		}
 	}
 }




 .category_wrap {
 	display: grid;
 	align-items: center;
 	grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
 	gap: 0;
 	max-width: 700px;
 	height: 100%;

 	.category_item {
 		.category_link {
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			color: var(--gray-500);
 			font-size: clamp(15px, 0.125vw + 14.600px, 17px);
 			font-weight: 700;
 			height: 50px;
 			line-height: 100%;

 			&:hover,
 			&:active,
 			.active {
 				position: relative;
 				color: var(--white);
 				background: var(--black);
 				height: 42px;
 				border-radius: 20px;
 				/* &::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;
					height: 3px;
					background: var(--primary-gradient-red);
				} */
 			}
 		}
 	}
 }

 @media all and (max-width: 768px) {
 	.hd-nav-warp {
 		gap: 12px;
 		flex-direction: column;
 		padding: 10px 0 0 0;
 		background: transparent;
 	}

 	.category_wrap {
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
 		padding: 6px 6px;

 		.category_item {
 			.category_link {
 				display: flex;
 				align-items: center;
 				justify-content: center;
 				height: 30px;

 				&:hover,
 				&:active,
 				.active {
 					height: 30px;
 				}
 			}
 		}
 	}
 }

 .btn-menu-control {
 	width: 100%;
 	height: 30px;
 	background: rgb(var(--rgb-black), 45%);
 	color: var(--white);
 	font-size: 13px;
 	border-radius: 0;
 }

 /***광고영역**********************************************************************************************************************************/
 .ad-fix-wrap {
 	padding-top: 40px;

 	.ad-stage-box {
 		background: var(--gray-800);
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		height: 150px;
 		flex-shrink: 0;
 		color: var(--white);

 		font-size: 40px;
 	}

 	@media all and (max-width: 768px) {
 		margin-top: 10px;

 		.ad-stage-box {
 			height: 65px;
 			font-size: 16px;
 			border-radius: 4px;
 		}
 	}
 }


 @media all and (max-width: 768px) {
 	.ad-fix-wrap {
 		padding-top: 10px;
 	}
 }


 /**index >  카드*********************/
 .content_grid {
 	margin: 40px auto;
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 	flex-wrap: wrap;
 	justify-content: flex-start;
 	gap: 10px;

 	.content_card {
 		background: var(--gray-900);
 		border-radius: var(--border-radius-40);
 		overflow: hidden;
 		padding: 10px 16px 16px;

 		.main_title {
 			display: flex;
 			justify-content: space-between;
 			align-items: center;

 			height: clamp(36px, 0.625vw + 34.000px, 46px);
 			padding: 0 14px;
 			font-size: clamp(16px, 0.125vw + 15.600px, 18px);
 			word-break: break-all;
 			cursor: pointer;
 			line-height: 100%;

 			.m-title {
 				color: var(--white) !important;
 				font-weight: 800;
 				text-transform: uppercase;

 			}

 			.small-title {
 				padding-left: 4px;
 				font-size: 14px;
 				color: var(--gray-500);
 			}


 			.btn-more {
 				font-weight: 400;
 				font-size: 12px;
 				line-height: 100%;
 				display: flex;
 				align-items: center;
 				color: var(--primary-500) !important;
 				/* &::after {
 					content: "+";
 					font-size: 24px;
 					font-weight: 400;
 					color: var(--white);
 				} */
 			}
 		}

 		.card_body {
 			display: flex;
 			flex-direction: column;

 			.top3_wrapper {
 				background: rgb(var(--rgb-black), 70%);
 				border: 1px solid #1C1C1C;
 				border-radius: var(--border-radius-20);
 				padding: 6px 8px;
 				margin-bottom: 4px;
 			}

 			.point-color-0,
 			.point-color-1,
 			.point-color-2 {
 				color: var(--white);

 				.rank-number {
 					display: flex;
 					justify-content: center;
 					font-size: clamp(16px, 0.192vw + 16.308px, 18px) !important;
 					/* transform: skewX(-10deg); */
 					color: var(--white);
 					flex: 0 0 20px;
 				}
 			}
 		}

 		.card_item {
 			position: relative;
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
 			align-self: stretch;
 			gap: 10px;
 			font-weight: 500;
 			padding: 0 4px;
 			height: clamp(36px, 0.125vw + 35.600px, 38px);


 			&:hover {
 				margin: 0 auto;
 				color: var(--primary-500);

 				.rank-number {
 					color: var(--primary-500);
 				}

 				&::after {
 					content: "";
 					position: absolute;
 					top: 0;
 					left: 0;
 					border-radius: clamp(6px, 0.250vw + 5.200px, 10px);
 					border: 1px solid var(--gray-700);
 					height: 40px;
 					width: 100%;
 					background: var(--gray-800);

 				}
 			}

 			.rank-number {
 				display: flex;
 				justify-content: center;
 				font-weight: 800 !important;
 				font-size: clamp(13px, 0.188vw + 12.400px, 16px);
 				letter-spacing: -1px;
 				flex: 0 0 20px;
 				line-height: 100%;
 				/* transform: skewX(-10deg); */
 				z-index: 50;
 			}

 			.site-name {
 				font-size: clamp(15px, 0.125vw + 14.600px, 17px);
 				flex: 1 0 0;
 				overflow: hidden;
 				white-space: nowrap;
 				text-overflow: ellipsis;
 				line-height: 1.2;
 				z-index: 50;
 			}

 			.video_date {
 				line-height: 100%;
 				font-size: 12px;
 			}
 		}
 	}
 }


 @media (max-width: 768px) {
 	.content_grid {
 		margin: 0 auto 16px auto;
 		grid-template-columns: repeat(1, 1fr);

 		.content_card {
 			.card_body {
 				display: flex;
 				flex-direction: column;
 				padding-top: 6px;

 				.point-color-0,
 				.point-color-1,
 				.point-color-2 {
 					.rank-number {}
 				}

 				.card_item {
 					padding: 0 10px;
 					gap: 4px;

 					.video_date {
 						display: none;
 					}
 				}
 			}
 		}
 	}
 }

 @media (max-width: 360px) {
 	.content_grid {
 		margin: 8px auto;


 		.content_card {
 			.card_body {
 				padding-top: 4px;

 				.card_item {
 					padding: 0 8px;
 					gap: 4px;

 					.rank-number {
 						letter-spacing: -1px;
 						flex: 0 0 20px;
 					}
 				}
 			}
 		}
 	}
 }


 /***커뮤니티****************************************************************************************************************/
 .community--wrap {
 	display: grid;
 	grid-template-columns: repeat(2, 1fr);
 	gap: 16px;
 	padding-top: 48px;
 	padding-bottom: 48px;


 	.col-box-wrap {
 		display: flex;
 		flex-direction: column;
 		background: var(--white);
 		border-radius: 10px;
 		overflow: hidden;
 		border: 1px solid var(--primary-500);
 	}

 	.comm-title {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		background: var(--white);
 		height: 50px;
 		padding: 0 26px;

 		font-size: 18px;
 		font-weight: 700;
 		line-height: 100%;
 		border: 1px solid var(--primary-200);

 		.btn-more {
 			font-size: 0;
 			display: flex;
 			align-items: center;

 			&::after {
 				content: "+";
 				font-size: 24px;
 				font-weight: 400;

 			}
 		}
 	}

 	.board--body {
 		padding: 16px 26px;

 		.tr-item {
 			display: flex;
 			align-items: center;
 			gap: 5px;
 			border-bottom: 1px solid rgb(var(--rgb-white), 10%);
 			height: 30px;


 			.acc-subjectBox {
 				display: flex;
 				gap: 2px;
 				align-items: center;
 				width: 78%;

 				.subject {

 					white-space: nowrap;
 					text-overflow: ellipsis;
 					overflow: hidden;
 				}
 			}

 			.date {
 				font-size: clamp(12px, 0.063vw + 11.800px, 13px);
 				text-align: right;
 				font-family: "Montserrat", sans-serif;
 				margin-left: auto;
 			}

 			&:hover {
 				background: rgb(var(--rgb-white), 3%);
 				cursor: pointer;
 			}
 		}
 	}
 }


 @media all and (max-width: 768px) {
 	.community--wrap {
 		gap: 8px;
 		padding-top: 16px;
 		padding-bottom: 16px;
 		grid-template-columns: repeat(1, 1fr);

 		.col-box-wrap {
 			border-radius: 6px;
 		}

 		.comm-title {
 			height: 38px;
 			padding: 0 10px;
 			font-size: 15px;
 		}

 		.board--body {
 			padding: 10px 14px;

 			.tr-item {
 				height: 26px;

 				.acc-subjectBox {
 					display: flex;
 					gap: 2px;
 					align-items: center;
 					width: 80%;

 				}
 			}
 		}
 	}
 }

 @media all and (max-width: 320px) {
 	.community--wrap {
 		.acc-subjectBox {
 			width: 70% !important;

 		}
 	}
 }


 /*추천,인기, 조회수 뱃지*/
 .badge-group {
 	display: flex;
 	gap: 2px;
 	z-index: 20;

 	&>span {
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		width: 16px;
 		height: 16px;
 		z-index: 202;
 		font-weight: 400;
 		border-radius: 3px;
 		color: var(--white);
 		font-size: 10px;
 		line-height: 100%;
 	}

 	.badge-view {
 		font-size: clamp(12px, 0.063vw + 11.800px, 13px) !important;
 		color: var(--primary-500);
 		font-family: "Montserrat", sans-serif;
 		font-weight: 500;
 	}

 	.badge-hot {
 		background: var(--primary-500);
 	}

 	.badge-new {
 		border: 1px solid var(--primary-300);
 		background: var(--primary-100);
 		color: var(--primary-500);
 	}
 }


 /* footer 카테고리 리스트 */
 .bottom_list {
 	padding-top: clamp(16px, 1.500vw + 11.200px, 40px);
 	padding-bottom: clamp(16px, 1.500vw + 11.200px, 40px);

 	.list {
 		width: 100%;
 		display: grid;
 		justify-items: center;
 		grid-template-columns: repeat(8, 1fr);
 		border: 1px solid var(--white);
 		border-radius: clamp(6px, 0.250vw + 5.200px, 10px);
 		background: rgb(var(--rgb-white), 5%);

 		.content_list {
 			display: flex;
 			flex-direction: column;
 			gap: clamp(8px, 0.375vw + 6.800px, 14px);
 			width: 100%;
 			border-right: 1px solid rgb(var(--rgb-white), 15%);
 			padding: clamp(10px, 0.375vw + 8.800px, 16px);

 			&:last-child {
 				border-right: 0;
 			}
 		}

 		.title {
 			display: flex;
 			align-items: center;
 			gap: 2px;
 			margin-bottom: clamp(4px, 0.750vw + 1.600px, 16px);
 			font-size: clamp(14px, 0.250vw + 13.200px, 18px);
 			color: var(--white);
 			font-weight: 700;

 			.content_img {
 				width: clamp(20px, 0.375vw + 18.800px, 26px);
 				height: clamp(20px, 0.375vw + 18.800px, 26px);
 			}
 		}

 		.name {
 			font-size: clamp(14px, 0.125vw + 13.600px, 16px);

 			&>a {
 				color: var(--gray-200);
 			}
 		}
 	}
 }


 @media all and (max-width: 1024px) {
 	.bottom_list {
 		.list {
 			grid-template-columns: repeat(4, 1fr);
 		}
 	}
 }

 @media all and (max-width: 767px) {
 	.bottom_list {
 		.list {
 			grid-template-columns: repeat(2, 1fr);
 		}
 	}
 }


 /***서브 상세 리스트 *******************************************/

 .video_list,
 .play_list {
 	display: grid;
 	grid-template-columns: repeat(4, 1fr);
 	gap: 16px;
 	padding: 20px 0;


 	&>li {
 		background: var(--white);
 		overflow: hidden;
 		border: 1px solid var(--gray-200);
 	}

 	.img_centered {
 		display: flex;
 		justify-content: center;
 		align-items: center;
 	}

 	.thumbnail-img {
 		position: relative;
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		height: 130px;
 		/* border: 1px solid var(--gray-200); */
 		padding: 10px;

 		&>img {
 			width: 100%;
 			height: 56px;
 			object-fit: contain;
 		}
 	}

 	.medal {
 		position: absolute;
 		top: 0;
 		left: 0;
 		background: var(--primary-500);
 		display: flex;
 		justify-content: center;
 		align-items: center;
 		width: 24px;
 		height: 24px;

 		.ranking {
 			color: var(--white);
 			font-weight: 700;
 			font-size: 12px;
 		}

 		&>img {
 			width: 100%;
 			height: auto;
 		}
 	}

 	.title-row {
 		flex-direction: row !important;
 		align-items: center;
 		justify-content: space-between;
 		padding: 0 16px;
 		height: 30px;
 	}

 	.video_title {
 		display: flex !important;
 		flex-direction: column;
 		overflow: hidden;
 		justify-content: center;
 		padding: 10px;

 		&>a {
 			text-align: center;
 		}

 		&>span {
 			/* width: 100%; */
 			display: flex;
 			justify-content: center;
 			align-items: center;
 			height: 32px;
 		}

 		.shop-name {
 			text-align: center;
 		}

 		.btn-shop {
 			display: flex;
 			gap: 16px;
 			color: var(--gray-100);
 			background: var(--gray-800);
 			font-size: 13px;

 			&::after {
 				content: "";
 				background: url("/images/arrow-right.svg") no-repeat;
 				background-size: 100% auto;
 				width: 14px;
 				height: 14px;
 				filter: var(--filter-gray-100);
 				display: block;
 			}
 		}

 		.ranking {
 			line-height: 100%;
 			font-size: 12px;
 			font-weight: 500;
 		}
 	}

 	.thumb_over {
 		border: 1px solid #9929ea;
 		border-radius: 6px;
 		height: 100%;
 		width: 100%;
 		position: absolute;
 		top: 0;
 		left: 0;
 		opacity: 0;
 		transition: all 0.2s linear;
 	}

 	.icon {
 		position: absolute;
 		top: 0;
 		left: 0;
 		width: 100%;
 		height: 100%;

 		.count {
 			background: rgba(0, 0, 0, 0.5);
 			border-radius: 3px;
 			color: #fff;
 			font-size: 1rem;
 			position: absolute;
 			top: 7%;
 			left: 3%;
 			padding: 0 6px;
 			overflow: hidden;
 			width: 50px;
 			white-space: nowrap;
 			transform: scale(0.8) translate(-4px, -2px);
 			transition: all 0.3s linear;

 			.fas {
 				font-size: 0.6rem;
 				margin-right: 5px;

 				&:before {
 					display: inline-block;
 					height: 18px;
 					vertical-align: middle;
 				}
 			}
 		}

 		.hd {
 			background: rgba(0, 0, 0, 0.5);
 			border-radius: 3px;
 			color: #fff;
 			font-size: 0.9rem;
 			font-style: italic;
 			font-weight: 900;
 			line-height: 1;
 			padding: 5px 2px 5px 0;
 			text-align: center;
 			position: absolute;
 			top: 7%;
 			right: 3%;
 			width: 30px;
 			transition: all 0.3s linear;
 		}
 	}
 }

 li:hover {
 	.thumbnail {
 		.thumb_over {
 			border-width: 2px;
 			opacity: 1;
 		}
 	}

 	.video_title {

 		color: var(--gray-100);
 		transition: all 0.2s linear;
 	}
 }

 .video_list {
 	.ellipsis_multiLine {
 		-webkit-line-clamp: 2;
 	}
 }

 @media all and (max-width: 650px) {

 	.video_list,
 	.play_list {
 		grid-template-columns: repeat(3, 1fr);
 		gap: 16px 6px;

 		.video_title {
 			padding: 6px;
 		}

 		.thumbnail-img {
 			height: 100px;
 		}

 	}
 }

 @media all and (max-width: 360px) {

 	.video_list,
 	.play_list {
 		grid-template-columns: repeat(2, 1fr);
 	}
 }



 /***************************/
 .detail-1depth-title {
 	font-size: 40px;
 	line-height: 100%;
 	padding: 0 0 26px;
 	font-family: 'BM DOHYEON';
 	text-align: center;

 	.m-title {
 		color: var(--gray-900);
 	}

 	@media all and (max-width: 1023px) {
 		font-size: 20px;
 		padding: 4px 0 14px;
 	}
 }

 /**/
 .detail-2depth-title {
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-size: 36px;
 	font-weight: 500;
 	border-radius: 16px;
 	padding: 45px 0 16px;
 	font-family: 'BM DOHYEON';

 	@media all and (max-width: 768px) {
 		flex-direction: column;
 		font-size: 20px;
 		padding: 20px 0 0;
 	}
 }

 .search-results-title {
 	padding: 16px 0;
 	text-align: center;
 	background: var(--gray-200);


 	.title {
 		font-size: clamp(16px, 0.125vw + 15.600px, 18px);
 		font-weight: 700;
 		line-height: 100%;


 		&::after {
 			content: "＂";
 			font-size: 14px;
 		}

 		&::before {
 			content: "＂";
 			font-size: 14px;
 		}
 	}

 	.text {
 		font-weight: 500;
 	}

 	.number {
 		color: var(--secondary-orange-500);
 		font-weight: 500;
 	}
 }

 @media all and (max-width: 768px) {
 	.search-results-title {
 		padding: 10px 0;
 		margin: 16px 0 10px;
 	}
 }

 /***/

 .detail_card {
 	position: relative;
 	width: 70%;
 	margin: 0 auto;

 	.detail_content {
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		flex-direction: column;
 		gap: 16px;
 		border-radius: var(--border-radius-40);
 		background: var(--gray-700);
 		padding: 40px 30px;
 	}

 	.detail_content_text {
 		gap: 10px;
 		font-weight: 400;
 		width: 100%;
 		line-height: 1.6;
 		background: rgb(var(--rgb-white), 2%);
 		margin-top: 8px;
 		padding: 26px 36px;
 		border-radius: var(--border-radius-30);
 		color: var(--gray-500);

 		br {
 			display: none;
 		}
 	}
 }

 @media all and (max-width: 768px) {
 	.detail_card {
 		width: 100%;

 		.detail_content {
 			padding: 20px 14px;
 		}

 		.detail_content_text {
 			width: 100%;
 			margin-top: 0;
 			padding: 12px 10px;
 			border-radius: 6px;
 		}
 	}
 }




 .detail_button {
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	color: var(--white);
 	padding: 0 26px;
 	border-radius: var(--border-radius-20);
 	height: 46px;
 	font-size: 16px;
 	background: var(--primary-500);
 }

 .detail_thumbnail {
 	display: flex;
 	justify-content: center;
 	align-items: center;

 	&>img {
 		width: 250px;
 		height: 80px;
 		object-fit: contain;
 	}
 }

 /**/
 .detail_status {
 	display: flex;
 	align-items: center;
 	font-size: clamp(11px, 0.188vw + 10.400px, 14px);

 	&>span {
 		&::after {
 			content: "●";
 			font-size: 4px;
 			padding: 0 4px;
 			display: flex;
 			align-items: center;

 			color: var(--gray-600);
 		}
 	}

 	&>span:last-child {
 		&::after {
 			all: unset;
 		}
 	}

 	.detail_views {
 		display: flex;
 		align-items: center;
 		gap: 2px;

 		&::before {
 			content: "";
 			background: url("/images/ico-views.svg") no-repeat;
 			background-size: 100% auto;
 			width: clamp(14px, 0.375vw + 12.800px, 20px);
 			height: clamp(14px, 0.375vw + 12.800px, 20px);
 			filter: var(--filter-primary-500);
 			display: block;
 		}
 	}

 	.detail_date {
 		color: var(--gray-500);
 	}

 	.text-success {
 		display: flex;
 		align-items: center;
 		gap: 2px;
 		color: var(--secondary-blue-500) !important;

 		&::before {
 			content: "";
 			background: url("/images/ico-success.svg") no-repeat;
 			background-size: 100% auto;
 			width: clamp(14px, 0.375vw + 12.800px, 20px);
 			height: clamp(14px, 0.375vw + 12.800px, 20px);
 			filter: var(--filter-red);
 			display: block;
 		}
 	}
 }





 /************************/

 #footer {
 	margin-bottom: 50px;

 	.copyright {
 		display: flex;
 		align-items: center;
 		background: var(--gray-800);
 		padding: 20px;
 		text-align: center;
 		font-size: 13px;
 	}
 }

 @media all and (max-width: 768px) {
 	#footer {
 		margin-bottom: 16px;

 		.copyright {
 			padding: 20px;
 		}
 	}
 }

 /* top  버튼*/
 .top_arrow {
 	border-radius: 100px;
 	display: none;
 	z-index: 999;
 	position: fixed;
 	bottom: 50px;
 	right: 10px;
 	text-align: center;
 	cursor: pointer;
 	background: var(--white);
 	background: var(--gray-400);
 	padding: 10px;

 	&>img {
 		width: 30px;
 		filter: var(--filter-white);
 	}

 	&:hover {
 		background: var(--primary-500);

 		&>img {
 			filter: var(--filter-white);

 		}
 	}
 }


 /*******************/
 /* 슬라이 메뉴 */
 .nav-menu-wrap {
 	overflow: hidden;
 	max-width: 700px;
 	background: #c3e4fa;

 	.menu {
 		display: flex;
 		align-items: center;

 		&>li {
 			&>last-child {
 				padding-right: 0;
 			}

 			&>a {
 				display: flex;
 				align-items: center;
 				position: relative;
 				height: 65px;
 				padding: 0 20px;
 				font-size: 18px;
 				font-weight: 500;
 				letter-spacing: -0.025em;

 				text-decoration: none;
 			}

 			&.active {
 				&>a {
 					color: #2762bb;

 					&:after {
 						content: '';
 						position: absolute;
 						bottom: 0;
 						left: 0;
 						width: 100%;
 						height: 2px;
 						background: #2762bb;
 					}
 				}
 			}
 		}
 	}
 }


 /***페이지네이션*****************************************************************/
 .contents_pagination {
 	padding: 30px 16px 50px;

 	.page-item.disabled .page-link {}

 	.fas {
 		font-size: .9rem;
 		line-height: .9rem
 	}

 	.page-item:first-child .page-link {
 		/*border-bottom-left-radius: .25rem;
        border-top-left-radius: .25rem;*/
 		margin-left: 0
 	}

 	.page-item:last-child .page-link {
 		/*border-bottom-right-radius: .25rem;
        border-top-right-radius: .25rem*/
 	}

 	.page-item.active .page-link {
 		background: transparent;
 		border: 1px solid var(--primary-500);
 		color: var(--primary-500);
 		z-index: 3
 	}

 	.page-item.disabled .page-link {
 		background: var(--gray-100) !important;
 		color: var(--gray-300) !important;

 		cursor: auto;
 		pointer-events: none
 	}

 	.pagination {
 		display: flex;
 		gap: 4px;


 		.page-link {
 			position: relative;
 			display: flex;
 			justify-content: center;
 			align-items: center;
 			border: 1px solid var(--gray-200);
 			color: var(--gray-800);
 			font-size: 13px;
 			width: 40px;
 			height: 40px;

 			/* &:hover {
                background: var(--gray-800);
                color: var(--gray-400);
                z-index: 2
            } */

 			&:focus {

 				outline: 0;
 				z-index: 3
 			}
 		}

 		@media all and (max-width: 768px) {
 			gap: 2px;

 			.page-link {
 				font-size: 12px;
 				width: 28px;
 				height: 28px;
 			}
 		}
 	}
 }



 /**쿠폰**/
 .main-layout {
 	display: flex;
 	gap: 20px;
 	min-height: 100vh;
 	padding-top: 100px;
 	padding-bottom: 20px;


 	@media all and (max-width: 1023px) {
 		padding-top: 100px;

 		&.max-row {
 			padding-left: 0 !important;
 			padding-right: 0 !important;
 		}
 	}
 }



 .sidebar {
 	width: 260px;
 	background: var(--white);
 	padding: 16px;

 	.logo {
 		margin-bottom: 32px;

 		img {
 			max-width: 100%;
 		}
 	}

 	.category-group {
 		margin-bottom: 32px;

 		.category-title {
 			font-size: 16px;
 			margin-bottom: 12px;
 			background: rgb(var(--rgb-primary-500), 15%);
 			padding: 12px 16px 10px;
 			cursor: pointer;
 			font-family: 'BM DOHYEON';
 			line-height: 1;


 			&>ico {
 				padding-right: 2px;
 			}
 		}


 		.category-list {
 			display: flex;
 			flex-wrap: wrap;
 			gap: 4px;

 			&>li {
 				position: relative;
 				font-size: 15px;
 				color: var(--gray-700);
 				cursor: pointer;
 				background: var(--gray-100);
 				padding: 10px;

 				&:hover,
 				&.active {
 					background: var(--white);


 					&::after {
 						content: "";
 						border: 1px solid var(--primary-500);
 						width: 100%;
 						height: 100%;
 						position: absolute;
 						top: 0;
 						left: 0;
 					}

 					&>a {
 						color: var(--primary-500) !important;
 					}
 				}
 			}
 		}
 	}

 	.category-list li a {
 		position: relative;
 		z-index: 1;
 	}

 	@media all and (max-width: 1023px) {
 		display: none !important;
 	}
 }


 .main-content-body {
 	flex: 1;
 	/* margin-left: 20px; */
 	background: var(--white);


 	.coupon-hot {
 		background: var(--gray-800);
 		padding: clamp(16px, 0.875vw + 13.200px, 30px);

 		.section-title {
 			font-family: 'BM DOHYEON';
 			text-align: center;
 			color: var(--white);
 			font-size: clamp(20px, 0.438vw + 18.600px, 27px);
 			margin-bottom: clamp(12px, 0.500vw + 10.400px, 20px);
 		}

 		.coupon-list-wrap {
 			.coupon-item {
 				.pro-viewbox {
 					border: 0 !important;
 				}


 			}
 		}
 	}
 }


 .middle-content {
 	padding: 30px;

 	@media all and (max-width: 1023px) {
 		padding: 16px;
 	}
 }

 .common-tab-wrap {
 	display: flex;
 	flex-wrap: wrap;
 	gap: 5px;
 	margin-bottom: 12px;
	margin-top: 12px;

 	.tab-item {
 		white-space: nowrap;
 		padding: 12px 14px;
 		background: var(--gray-150);
 		font-size: 15px;
 		cursor: pointer;
 		border-radius: 0;
 		color: var(--gray-700);

 		&.active {
 			background: var(--gray-800);
 			color: var(--white);
 		}
 	}
 }

 @media all and (max-width: 768px) {
 	.common-tab-wrap {
 		gap: 5px;
 		margin-bottom: 16px;

 		.tab-item {
 			padding: 10px 8px;
 			background: #eee;
 			font-size: 13px;
 			text-align: center;
 		}
 	}
 }

 .coupon-title {
 	font-size: 13px;
 	padding: 10px 8px;
 	text-align: center;
 	color: var(--gray-800);
 	background: var(--gray-100);

 	&>span {
 		display: block;

 		line-height: 1.3;
 		font-size: 14px;
 	}

 	.cop-subj {}

 	.cop-sale {
 		background: var(--primary-500);
 		color: var(--white);
 		width: fit-content;
 		margin: 2px auto 0 auto;
 		padding: 1px 4px;
 	}
 }





 /**/
 .coupon-list-wrap {
 	display: grid;
 	grid-template-columns: repeat(4, 1fr);
 	gap: 15px;

 	.coupon-item {
 		text-align: center;

 		.pro-viewbox {
 			display: flex;
 			justify-content: center;
 			align-items: center;
 			width: 100%;
 			height: 150px;
 			background: var(--white);
 			border: 1px solid var(--gray-200);

 			&>img {
 				width: 100px;
 				height: 60px;
 				object-fit: contain;
 				margin-bottom: 8px;
 			}
 		}


 	}
 }

 @media all and (max-width: 768px) {
 	.coupon-list-wrap {
 		grid-template-columns: repeat(2, 1fr);
 		gap: 16px 4px;
 	}
 }

 /***/
 .promotion-box {
 	display: flex;
 	flex-direction: column;
 	gap: 16px;
	margin-top: 10px;

 	.pro-item {
 		display: flex;
 		align-items: flex-start;
 		background: #fff;
 		border: 1px solid var(--gray-700);
 		color: #000;
 		box-shadow: 2px 2px 0 0 rgba(0, 0, 0, 0.10);
 	}

 	.right-wrap {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
 		/* border-right: 1px solid var(--gray-100); */
 		align-self: stretch;
 		gap: 20px;
 		padding: 26px;
 		max-width: 200px;
 		min-width: 200px;
 		background: var(--gray-100);

 		.brand-logo {
 			flex-shrink: 0;
 			width: 100px;

 			img {
 				max-width: 100%;
 				display: block;
 			}
 		}

 		.promoDiscount {
 			display: flex;
 			flex-direction: column;
 			align-items: center;
 			justify-content: center;
 			gap: 10px;
 			font-family: 'BM DOHYEON';
 			letter-spacing: 0;

 			.number {
 				font-size: 45px;
 			}

 			.text {
 				font-size: 17px;
 			}
 		}
 	}

 	.promo-content {
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
 		gap: 16px;
 		flex: 1;
 		align-self: stretch;
 		padding: 16px 16px 16px 30px;

 		.info-tags {
 			display: flex;
 			gap: 4px;

 			.tag-expire {
 				font-size: 12px;
 				padding: 4px 8px;
 				background: rgb(var(--rgb-primary-500), 15%);
 				color: var(--gray-800);
 			}

 			.tag-used {
 				font-size: 12px;
 				padding: 4px 8px;
 				border: 1px solid rgb(var(--rgb-primary-500), 25%);
 				color: rgb(var(--rgb-primary-500), 90%);

 			}
 		}

 		.promo-title {
 			font-size: 16px;
 			font-weight: 700;
 			line-height: 1.3;
 		}

 		.code-box {
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
 			gap: 30px;
 			background: var(--gray-900);
 			padding: 8px 10px;
 			margin: 6px 0;
 			max-width: 280px;

 			.code-text {
 				font-weight: 900;
 				color: var(--white);
 				font-size: 16px;
 			}

 			.btn-copy {
 				font-size: 13px;
 				color: var(--white);
 				cursor: pointer;
 				white-space: nowrap;
 				border-radius: 0;
 			}
 		}

 		.promo-desc {
 			display: flex;
 			flex-direction: column;
 			gap: 4px;
 			counter-reset: item;

 			&>h4 {
 				font-size: 14px;
 				font-weight: 700;
 				color: var(--black) !important;
 			}

 			&>li {
 				position: relative;
 				padding-left: 20px;
 				line-height: 1.2;
 				counter-increment: item;
 				font-size: 13px;
 				color: var(--gray-700);

 				&::before {
 					content: counter(item) ".";
 					position: absolute;
 					left: 0;
 					top: 0;
 					font-size: 13px;
 				}
 			}
 		}

 	}
 }

 @media all and (max-width: 767px) {
 	.promotion-box {
 		gap: 10px;

 		.pro-item {
 			flex-direction: column;
 			gap: 16px;
 		}

 		.right-wrap {
 			flex-direction: row;
 			border-right: 0;
 			border-bottom: 1px solid var(--gray-100);
 			gap: 20px;
 			padding: 16px 0 16px;
 			max-width: 100%;
 			min-width: 100%;

 			.brand-logo {
 				flex-shrink: 0;
 				width: 100px;

 				img {
 					max-width: 100%;
 					display: block;
 				}
 			}

 			.promoDiscount {
 				flex-direction: row;
 				gap: 2px;

 				.number {
 					font-size: 26px;
 				}

 				.text {
 					font-size: 17px;
 				}
 			}
 		}

 		.promo-content {
 			gap: 8px;
 			padding: 0 16px 16px;
 			align-items: center;


 			.info-tags {
 				display: flex;
 				gap: 4px;

 				.tag-expire,
 				.tag-used {
 					font-size: 12px;
 					padding: 4px 8px;

 				}

 			}

 			.promo-title {
 				font-size: 14px;
 				text-align: center;
 			}

 			.code-box {
 				padding: 6px 6px 6px 14px;
 				max-width: 100%;
 				width: 100%;


 				.code-text {
 					font-weight: 900;
 					color: var(--white);
 					font-size: 16px;
 				}

 				.btn-copy {}
 			}

 			.promo-desc {
 				align-items: center;
 				font-size: 12px;


 				>li {
 					padding-left: 13px;
 					line-height: 1.25;
 					text-align: center;


 					&::before {
 						font-size: 12px;
 					}
 				}
 			}
 		}
 	}

 }

 .btn-site-go {
 	margin-top: 8px;
 	border: 1px solid var(--gray-200);
 	padding: 8px 10px 7px;
 	width: fit-content;
 	color: var(--gray-900);
 }

 /*====쿠폰 상세===*/
 /* 콘텐츠 박스 공통 스타일 */
 .content-box {
 	background: var(--gray-100);

 	padding: clamp(10px, 0.375vw + 8.800px, 16px);
 	max-width: 900px;
 	font-size: 16px;
 	color: #555;
 	line-height: 1.8;
 	border: 1px solid var(--gray-200);
 	overflow: hidden;

 	&>p {
 		font-size: clamp(15px, 0.063vw + 14.800px, 16px);
 		line-height: 1.4;
 	}
 }

 /* 제목 스타일 */
 .content-title {
 	font-size: clamp(20px, 0.250vw + 19.200px, 24px);
 	margin-bottom: 15px;
 	color: var(--black);
 	font-family: 'BM DOHYEON';
 	background: var(--white);
 	padding: 16px 10px 12px;
 }

 /* 소제목 스타일 */
 .content-subtitle {
 	font-size: clamp(16px, 0.125vw + 15.600px, 18px);
 	color: #333;
 	font-weight: 800;
 	margin-top: clamp(18px, 0.375vw + 16.800px, 24px);
 	margin-bottom: clamp(6px, 0.250vw + 5.200px, 10px);
 }

 /* 목록 스타일 */
 .content-box ul {
 	padding-left: 10px;
 	margin: 4px 0;


 	&>li {
 		font-size: 14px;
 		padding: 4px 0;
 	}

 	li::marker {
 		content: '- ';

 	}
 }

 @media all and (max-width: 768px) {
 	.content-box ul {


 		&>li {
 			padding: 2px 0;
 			font-size: 13px;
 			line-height: 1.4;
 		}
 	}
 }



 /* 링크 스타일 */


 /* 굵은 텍스트 */
 strong {
 	font-weight: bold;
 }

 /* 기본 버튼 스타일 */
 .btn-copy {
 	background-color: #007bff;
 	color: #fff;
 	padding: 10px 20px;
 	border: none;
 	border-radius: 5px;
 	cursor: pointer;
 	transition: background-color 0.3s ease;
 }

 .btn-copy:hover {
 	background-color: #0056b3;
 }

 /* 실시간 채팅 링크 버튼 */
 .content-box .chat-link {
 	display: inline-block;
 	padding: 10px 20px;
 	background-color: #28a745;
 	color: #fff;
 	border-radius: 5px;
 	text-align: center;
 	margin-top: 10px;
 	transition: background-color 0.3s ease;
 }

 .content-box .chat-link:hover {
 	background-color: #218838;
 }

 .section-title2 {
	font-size: 1.8rem;
	font-weight: 700;
	color: #2c3e50; /* 짙은 블루-그레이 */
	border-left: 6px solid #3498db; /* 포인트 컬러 */
	padding-left: 12px;
	margin: 10px 0 20px;
	position: relative;
}

.section-title2::after {
	content: '';
	display: block;
	width: 40px;
	height: 3px;
	background-color: #3498db;
	margin-top: 10px;
}