
#main_visual {margin:0 auto;width: 100%;overflow:hidden;position:relative; background: #f2f2f2; padding:45px 0; }
#main_visual .visual_wrap {width:100%; max-width:1460px; margin: 0 auto; }
#main_visual .slick-dotted.slick-slider {margin-bottom:0;}
#main_visual .visual_wrap .slick-list { max-width:1400px; width:100%; height: 530px; margin: 0 auto; border-radius:15px; overflow:hidden;}
#main_visual .visual_wrap .slick-slide > div {width:100%; height: 530px; }

#main_visual .visual_wrap .img {overflow:hidden; position: relative;width:100%;height:100%; display:flex; padding:5%;}
#main_visual .visual_wrap .img .bg {display:block;position:absolute;left:0;top:0;content:'';width:100%;height:100%;background-size:cover;background-repeat:no-repeat;background-position:center;transform: scale(1);-webkit-transform: scale(1);animation-fill-mode: forwards; -webkit-animation-fill-mode:forwards;}
#main_visual .visual_wrap .title {}

.visual01 .bg {background: #87a5f2;}
.visual02 .bg {background: #8164e7;}
.visual03 .bg {background: #ebc0b6;}
.visual04 .bg {background: #d7d290;}
.visual05 .bg {background: #99cfb2;}

#main_visual .slick-prev,
#main_visual .slick-next{width: 55px; height: 55px; border-radius:50%; overflow:hidden; z-index:9; /*background-size:cover !important*/}
.slick-prev:before,
.slick-next:before {display:none;}
#main_visual .slick-prev {background:url(/assets/img/main/prev.png) center center no-repeat; left: 40px;}
#main_visual .slick-next {background:url(/assets/img/main/next.png) center center no-repeat; right: 40px;}
.slick-slide img {width:100%;}

#main_container > div {display:flex; justify-content: space-between;     align-items: stretch;max-width:1400px; margin:0 auto;}
#main_container > div > div {position:relative; width:calc(86% / 3);  margin-left:7%;}
#main_container > div > div:after {content:""; display:block; width:1px; height:100%; background:#eee; position:absolute; left:-12%; top:0;}
#main_container > div > div:first-child {margin-left:0}
#main_container > div > div:first-child:after {display:none;}
#main_container h2 {font-size:22px; margin-bottom:15px; padding-bottom:15px; border-bottom:1px solid #ddd;}
#main_container h2 span {color:#7d7d7d; font-weight:400; font-size:15px; }

#main_container .more {position:absolute; right:0; top:0; background:#ededed; border-radius:5px; width:30px; height:30px;}
#main_container .more span {position:relative;  font-size:0; display:block; width:100%; height:100%;}
#main_container .more span:before {position:absolute; content:""; width:2px; height:16px; top:7px; left:14px; background:#664af1;}
#main_container .more span:after {position:absolute; content:""; width:16px; height:2px; top:14px; left:7px; background:#664af1;}


#main_container #popupzone h2 {padding-bottom:0; border-bottom:0;}
#main_container #popupzone .more span:before,
#main_container #popupzone .more span:after {background:#2459fd;}

#popupzone .slick-list {}
#popupzone .slick-slide {border-radius:10px; padding-bottom:0; overflow:hidden;}
#popupzone .slick-prev,
#popupzone .slick-next{width: 14px; height: 28px; border-radius:50%; overflow:hidden; z-index:9; /*background-size:cover !important*/}
#popupzone .slick-prev:before,
#popupzone .slick-next:before {display:none;}
#popupzone .slick-prev {background:url(/assets/img/main/prev2.png) center center no-repeat; left: 10px;}
#popupzone .slick-next {background:url(/assets/img/main/next2.png) center center no-repeat; right: 10px;}
#popupzone .slick-slide img {border-radius:0px;}

.main_board {}
.main_board li a {display:flex; justify-content: space-between; line-height:30px;} 
.main_board li a h3 {font-weight:400; font-size:inherit}
.main_board li a p {color:#999; font-size:13px;}

input:disabled {
	background-color: #ebebeb; /* 배경색 변경 */
	color: #8d8d8d; /* 글자색 변경 */
}

/********************************/
/****** 여기서 로딩 정의 css 시작 ******/
/********************************/

@font-face {
    font-family: 'cute_r';
    src: url('/fonts/GamjaFlower-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	font-display: block;
}

/* 오버레이 */
.general_loading_container {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.55);
	z-index: 1000;

	/* 처음엔 안 보이게 */
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s ease; /* 페이드 속도 */
}

/* 보일 때 */
.general_loading_container.is-active {
	opacity: 1;
	visibility: visible;
}

/* 가운데 정렬 박스 */
.general_loading_container_center{
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: 240px; height: 240px;
}

/* 중앙 로고 + 텍스트 */
.general_loading_container_logo{
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0px;
	pointer-events: none;
}
.general_loading_container_logo img{
    width: 80px;
    height: 80px;
    object-fit: contain;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .15));
}
.general_loading_container_text{
	color: #fff;
    font-weight: bold;
    font-size: 26px;
    letter-spacing: .02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    font-family: 'cute_r' !important;
}

/* ====== 회전 원 로더 (네가 준 CSS를 변형) ====== */
/*
	조절 변수
	--ring-size: 원 지름
	--ring-thickness: 링 두께(네가 준 --b)
	--ring-gap: 점간 빈칸 각도
	--ring-steps: 분할 개수(steps N)
	--ring-color: 링 색
*/
.general_loading_container_ring{
	--ring-size: 200px;
	--ring-thickness: 10px;   /* 원 두께 */
	--ring-gap: 15deg;        /* 빈칸 각도(점 사이 간격) */
	--ring-steps: 10;         /* 점 개수 느낌(회전 스텝) */
	--ring-color: #ffffff;    /* 링 색상 */

	position: absolute;
	inset: 0;
	margin: auto;
	width: var(--ring-size);
	aspect-ratio: 1;
	border-radius: 50%;
	padding: 1px;

	/* 원형 스트로크 */
	background: conic-gradient(#0000 10%, var(--ring-color)) content-box;

	/* 간헐적(도트 느낌)로 보이게 마스크 */
	-webkit-mask:
		repeating-conic-gradient(
			#0000 0deg,
			#000 1deg calc(20deg - var(--ring-gap)),
			#0000 calc(20deg - var(--ring-gap) + 1deg) 36deg
		),
		radial-gradient(farthest-side,
			#0000 calc(100% - var(--ring-thickness) - 1px),
			#000  calc(100% - var(--ring-thickness))
		);
	-webkit-mask-composite: destination-in;
			mask-composite: intersect;

	animation: general_loading_container_spin 1s infinite steps(var(--ring-steps));
}

@keyframes general_loading_container_spin {
	to { transform: rotate(1turn); }
}

