/* subpage */
.subpage_movie {width: 100%; min-width: auto; } 
.subpage_session { font-size: clamp(20px, 1.5vw, 22px); word-break: auto-phrase; }
.gaemi_bg {
	background-image:url(/assets/img/gaemi/2.png); 	background-size: cover;  	justify-content: space-between; 
	color:white;  height: auto;
	padding-top:10%; padding-bottom:10%;
}
@media (min-width: 0px) and (max-width: 940px) {
	.gaemi_bg {
			padding-bottom: 90vw;
	}
}

.subpage_session .image_slick img {		border-radius: 15px;}
.subpage_session .explanation {color: #EC8080; font-size: 16px;font-weight:100 !important;}
.subpage_session .process_no { font-size: 40px; border-bottom: 1px solid black; margin-bottom: 20px; padding-bottom: 30px}
 

/* ceo message */
.ceo_box { background: url("/assets/img/bg/ceo_bg_back.webp") no-repeat ; }
.ceo_box .ceo_img { width: 100%; min-height: 530px; background: url("/assets/img/img_ceo.png") no-repeat bottom right; background-size: 42%; overflow: hidden;}
.con_tit_bar_w { position: absolute; width: 1px; height: 35px; left: 50%; margin-left: -0.5px; top: 61px; background: #fff;}
.ceo_box .ceo_img .ceo_text { width: 57%; margin: 100px 0 0 50px; padding-left: 20px; background: url("/assets/img/ceo_bg_txt_1.png") no-repeat top left;}

.ceo_box .ceo_img .ceo_text .sign  { text-align: right; margin: 0 40px 10px 0; color: #fff;}

.ceo_mov { width: 80%; margin: 150px auto;}
.ceo_mov iframe { height: 500px;}



/* 배경으로 바둑판 모양을 만드는 가상 요소 */
.bg_badook {	padding: 4rem 0;	text-align: center;	position: relative;	overflow: hidden;	}
.bg_badook::before {

	content: ''; 		position: absolute;		top: 0;		left: 0;		right: 0;		bottom: 0;
	
	/* 1. 바둑판 선 그리기 (가로선, 세로선) */
	background-image: 
		linear-gradient(to right, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
	
	/* 2. 바둑판 칸 크기 조절 (40px x 40px) */
	background-size: 40px 40px;
	
	/* 3. 중앙에서부터 외곽으로 갈수록 투명해지는 마스크 효과 */ 
	-webkit-mask-image: radial-gradient(ellipse at center, black, transparent 80%);
	mask-image: radial-gradient(ellipse at center, black, transparent 80%);
	
	pointer-events: none; /* 클릭 방해 금지 */
	z-index: 0;

}

/* 컨텐츠가 배경 위로 올라오도록 설정 */
.bg_badook > div {		position: relative;		z-index: 1;	}

@media screen and (max-width: 996px) {
	.bg_badook { padding: 2rem; }
}
/* 바둑판 모양을 만드는 가상 요소 끝 */


/* products 페이지 레이아웃 */
.product_features .feature_box {margin-top: 1.4rem; display: flex; justify-content: space-between; position: relative;}
.product_features .feature_box dl {background: rgba(57, 113, 179,.13);border-radius: 0.1rem; width: 45%; padding:1rem; box-sizing: border-box; border-radius: .5rem;}
.product_features .feature_box .product_img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.product_features .feature_box  dd:first-child {margin-top: 0;}
.product_features .feature_box .left { padding-left: 4%;}
.product_features .feature_box .right { padding-left: 10%;}
@media screen and (min-width: 200px) and (max-width: 1028px) {
    .product_features { padding-top:5px;  } 
    .product_features .feature_box { flex-wrap: wrap;   } 
    .product_features .feature_box dl { width: 100%; }
		.product_features .feature_box .product_img { position: relative; left: 0; top: 0; transform: none;  text-align: center; width: 100%; margin-bottom:-100px;}
		.product_features .feature_box .left { margin-bottom:0; order: 1 !important; border-radius:0; padding-top: 100px;}
		.product_features .feature_box .right { padding: 4%; order: 2 !important; border-radius:0;}
}

/* 세부사양표 */
.spec_table ul {margin-top: .8rem; overflow: hidden;}
.spec_table ul li { padding: .2rem;box-sizing: border-box;position: relative;border-top: 1px solid #E7E7E7;list-style:disc;}
.spec_table ul li .num {color: #172ce7;font-weight: 400;}
.spec_table ul li:nth-child(1) {	border-top: 0;}


/* feature_group & feature-item */
.feature_group .col-12 {display: grid;grid-template-columns: repeat(2, 1fr);gap: 1.5rem;}
.feature-item {	background: #fff;	border: 1px solid #e9ecef;	border-radius: 1rem;	padding: 2rem;	transition: box-shadow 0.3s ease;}
.feature-item:hover {	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);}
.feature-item > div:first-child {	font-size: 1.8rem;	margin-bottom: 0.8rem;}
.feature-item h3 {	font-size: 1.15rem;	font-weight: 700;	margin-bottom: 0.8rem;	line-height: 1.4;	color: #212529;}
.feature-item p {	font-size: 0.95rem;	color: #6c757d;	line-height: 1.7;	margin-bottom: 0;}
@media screen and (max-width: 768px) {
	.feature_group .col-12 {grid-template-columns: 1fr;	gap: 1rem;}
	.feature-item {	padding: 1.5rem;}
}

/* video-list */
.video-list {display: grid;grid-template-columns: repeat(3, 1fr);	gap: 1.5rem;}
.video-card {	border-radius: 1rem;overflow: hidden;background: #fff;border: 1px solid #e9ecef;transition: box-shadow 0.3s ease;}
.video-card:hover {	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);}
.video-card a {text-decoration: none;color: inherit;display: block;}
.video-card-thumb {position: relative;overflow: hidden;aspect-ratio: 16 / 9;background: #f0f0f0;}
.video-card-thumb img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;}
.video-card:hover .video-card-thumb img {transform: scale(1.05);}
.video-card-thumb .play-icon {
	position: absolute;	top: 50%;	left: 50%;	transform: translate(-50%, -50%);	width: 3rem;	height: 3rem;
	background: rgba(0, 0, 0, 0.6);	color: #fff;	border-radius: 50%;	display: flex;	align-items: center;
	justify-content: center;	font-size: 1rem;	opacity: 0;	transition: opacity 0.3s ease;
}
.video-card:hover .play-icon {	opacity: 1;}
.video-card-body {	padding: 1.2rem 1.5rem;}
.video-card-body h3 {	font-size: 1.05rem;font-weight:700;margin-bottom: 0.5rem;color: #212529;line-height: 1.4;}
.video-card-body p {font-size: 0.9rem;color: #6c757d;line-height: 1.6;margin-bottom: 0;}
@media screen and (max-width: 992px) {
	.video-list {grid-template-columns: repeat(2, 1fr);}
}
@media screen and (max-width: 576px) {
	.video-list {grid-template-columns: 1fr; gap: 1rem;}
	.video-card-body {padding: 1rem;}
}


/* products 페이지 레이아웃 끝 */