/* 공통요소 */
.main-col-area {position:relative; display:block; margin:0 auto; padding:0; width:1200px; box-sizing:border-box;}
@media (max-width:1200px) {
	.main-col-area {width:100%;}
}



/* 탑배너 */
/* 레이아웃 */
.top-banner {position:relative; padding:16px 0; width:100%; display:flex; align-items:center; justify-content:center; background:var(--primary-darken); color:#fff; box-sizing:border-box;}
.top-banner * {box-sizing:border-box;}
/* 날짜 영역 */
.top-banner .top-banner-box {position:relative; width:100%; max-width:1200px; display:flex; align-items:center; justify-content:center;
	.date {display:flex; align-items:center; gap:30px;}
	.date > div {padding:8px 16px; display:flex; gap:8px; font-size:18px; border-radius:1000px; background:var(--primary); color:#fff;}
	.date > div span {line-height:100%;}
	.date p {margin-top:6px; font-family:'GMarketSans', sans-serif; font-size:36px;}
}
/* 타이머 영역 */
.top-banner .top-banner-box .day-apply {display:flex; align-items:center; justify-content:start;
	.day {margin:6px 30px 0 8px; font-family:'GMarketSans', sans-serif; font-size:36px;}
	.day span {display:inline-block; margin:-6px 4px 0 4px; padding:6px 4px 0 4px; min-width:60px; background:#fff; color:var(--primary-darken); text-align:center; border-radius:8px;}
	.apply-btn {padding:16px; font-size:24px; font-weight:700; background:var(--point); color:#fff; border-radius:4px;}
	.apply-btn:hover {background:var(--point-dark);}
}
/* 닫기 버튼 */
.top-banner .close-btn {position:absolute; right:20px; top:50%; font-size:14px; color:#fff; transform:translateY(-50%); background:none; cursor:pointer;}
@media (max-width:1200px) {
	.top-banner {padding:12px 16px;}
    .top-banner .top-banner-box {max-width:100%; flex-direction:column; align-items:flex-start; gap:8px;
		.date {align-items:start; gap:8px;}
		.date > div {padding:6px 12px; flex:0 0 auto; font-size:14px;}
		.date p {margin-top:7px; font-size:16px;}
		.day-apply .day {margin:6px 8px 0 0; font-size:18px;}
		.day-apply .day span {margin-top:-4px; padding-top:4px; min-width:35px;}
		.day-apply .apply-btn {padding:6px 8px; font-size:16px;}
	}
	.top-banner .close-btn {position:absolute; top:24px; right:16px; font-size:20px;
		span {display:none;}
	}
}



/* 로고 nav 및 메뉴 */
/* pc 모바일 레이아웃 */
.header-area {position:relative; width:100%; background:#fff;
	.pc-nav {width:100%; background-color:#fff;}
	.mo-nav {display:none; width:100%; background-color:#fff;}
}
@media (max-width:1200px) {
	.header-area {
		.pc-nav {display:none;}
		.mo-nav {display:block;}
	}
}

/* pc */
/* 상단 로고 및 유틸리티 영역 */
.pc-nav .main-nav {position:relative; margin:0 auto; width:100%; overflow:hidden; background:#fff; z-index:999;
	& > div {display:flex; align-items:center; justify-content:space-between; padding:30px 0;}
}
.pc-nav .main-nav.scrolled {border-bottom:1px solid var(--border); box-shadow:0px 2px 5px rgba(0,0,0,0.1);
	div.main-col-area {padding:16px 0;}
}
/* 좌측 로고 */
.pc-nav .main-nav .logo-box li {display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-sub-light);
	img {height:40px; display:block;}
}
.pc-nav .main-nav h1 img {height:30px; display:block;}
/* 우측 로그인 박스 */
.pc-nav .main-nav .login-box {display:flex; flex-direction:column; align-items:flex-end; gap:12px;}
.pc-nav .main-nav .login-box .sub-nav-list {display:flex; gap:20px; font-size:14px; color:var(--text-sub-light);
	li {position:relative; display:flex; align-items:center;}
	/*li:not(:last-child)::after {content:''; position:absolute; right:-10px; top:48%; width:1px; height:10px; background:var(--gray-light); transform:translateY(-48%);}*/
	a {font-weight:600; color:var(--text-sub-light);}
	a:hover {color:var(--primary);}
	.user {display:flex; align-items:center; gap:4px; color:var(--mute-dark); font-weight:600;}
}
/* 메인 버튼 리스트 */
.pc-nav .main-nav .login-box .main-nav-list {display:flex; align-items:center; gap:12px;
	li a {display:block; padding:6px 12px; color:#fff; font-size:15px; font-weight:600; border-radius:4px; text-align:center;}
	li a:hover {color:var(--yellow);}
	.cs a {background:var(--point);}
	.pc a {background-color:var(--text-base);}
	.join a {background-color:var(--mute-dark);}
	.login a {background-color:var(--primary-darken);}
	.mylect a {background-color:var(--primary);}
}
/* --- 메인 메뉴 (GNB) --- */
.pc-nav .main-menu {margin:0 auto; width:100%; border-top:1px solid var(--border); border-bottom:1px solid var(--border); box-sizing:border-box;
	& > ul {margin:0 auto; width:1200px; box-sizing:border-box;}
	ul li {position:relative; flex:1; text-align:center;}
	ul li.apply {position:relative;}
	ul li.apply span {position:absolute; top:-12px; left:50%; transform:translateX(-50%); padding:4px 8px; font-size:11px; font-weight:600; border-radius:1000px; background:var(--point); color:#fff; z-index:999;}
	ul li a {display:block; padding:16px 4px; font-size:16px; font-weight:600; transition:color 0.2s;}
	ul li a:hover {color:var(--primary-hover); background:var(--primary-bglight);}
}
/* mobile */
/* 상단 로고 및 햄버거 버튼 */
.mo-nav .main-nav {padding:16px; display:flex; align-items:center; justify-content:space-between;
	h1 img {display:block; height:20px;}
	.login-box {display:flex; align-items:center; justify-content:end; gap:16px;}
	.login-box a {display:none;}
}
@media (min-width:400px) {
	.mo-nav .main-nav .login-box {
		a {display:block; color:var(--text-sub-light); font-size:14px; font-weight:600;}
		.user {display:flex; align-items:end; gap:4px; color:var(--mute-dark);}
		 button {position:relative; font-size:20px; color:var(--text-base);}
		 button::after {content:''; position:absolute; top:-15px; bottom:-15px; left:-15px; right:-15px;}
	}
}
/* 메인 메뉴 */
.mo-nav .main-menu {position:relative; padding-bottom:0; display:flex; flex-wrap:wrap; border-top:1px solid var(--border); transition:0.3s;
	/* 1차 메뉴 버튼 & 링크 스타일 */
	& > li {flex:1; text-align:center; border-bottom:1px solid var(--border);}
	& > li > button, & > li > a {display:block; width:100%; padding:12px 0; font-size:16px; font-weight:600; color:var(--text-base); cursor:pointer; box-sizing:border-box;}
	& > li > button.current {color:var(--primary-hover); font-weight:700;}
}
/* 2차 메뉴  */
.mo-nav .main-menu > li > ul {display:none;}
.mo-nav .main-menu > li > ul::-webkit-scrollbar {display:none;}
.mo-nav .main-menu > li > button.current + ul {display:flex;}
.mo-nav .main-menu:has(> li > button.current) {padding-bottom:53px;}
.mo-nav .main-menu > li > ul {
	align-items:center; gap:16px; width:100%; position:absolute; left:0; bottom:0; padding:12px; box-sizing:border-box;
    white-space:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; border-bottom:1px solid var(--border); background-color:var(--border-light);
}
/* 2차 메뉴 스타일 */
.mo-nav .main-menu > li > ul li a {padding:6px 8px; display:block; border:1px solid var(--border); border-radius:1000px; background:#fff; font-size:14px; line-height:100%; color:var(--text-sub-light);
	&:hover {border:1px solid var(--text-sub); color:var(--text-base);}
	span {margin-left:2px; font-size:12px; color:var(--gray);}
}
/* 모바일 토글 */
.mo-nav .toggle-area {position:fixed; top:0; right:-100%; width:100%; height:100vh; background-color:#fff; z-index:99999; transition:right 0.3s ease-in-out; overflow-y:auto;}
.mo-nav .toggle-area.on {right:0;}
.toggle-area .toggle-nav {display:flex; justify-content:space-between; align-items:center; padding:16px; border-bottom:1px solid var(--border); background-color:var(--border-light);}
/* 좌측 회원 메뉴 리스트 */
.toggle-nav .main-nav-list {display:flex; gap:10px; list-style:none; padding:0; margin:0;}
.toggle-nav .main-nav-list li a {font-size:13px; font-weight:700; color:#555; text-decoration:none; padding:5px 10px; border:1px solid #ddd; border-radius:4px; background:#fff;}
/* 포인트 컬러 (로그인/나의강의실 등) */
.toggle-nav .main-nav-list li.login a, 
.toggle-nav .main-nav-list li.mylect a {background:#1a2254; color:#fff; border-color:#1a2254;}
/* 우측 닫기 버튼 */
.toggle-nav .close-toggle {border:none; background:none; font-size:24px; color:#333; cursor:pointer; padding:5px;}
/* --- 2. 메인: 아코디언 메뉴 리스트 --- */
.toggle-menu {list-style:none; padding:0; margin:0;
	& > li {border-bottom:1px solid #eee;}
}
/* 1차 메뉴 버튼 (대메뉴) */
.toggle-menu > li > button {width:100%; padding:15px 20px; text-align:left; background:#fff; border:none; font-size:16px; font-weight:500; color:#333; cursor:pointer; display:flex; justify-content:space-between; align-items:center;}
.toggle-menu > li > button::after {content:'\f078'; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:12px; color:#aaa; transition:transform 0.3s;}
.toggle-menu > li > button.current {color:var(--primary-hover); font-weight:800; background-color:#fdfdfd;}
.toggle-menu > li > button.current::after {transform:rotate(180deg); color:var(--primary-hover);}
/* 2차 메뉴 리스트 (소메뉴) */
.toggle-menu > li > ul {display:none; background-color:#f5f5f5; padding:10px 0; margin:0; list-style:none;
	li a {display:block; padding:10px 30px; font-size:16px; color:#666; text-decoration:none; position:relative;}
	li a::before {content:'-'; position:absolute; left:20px; top:10px; color:#999;}
}



/* 플로팅 배너 */
.cs-float-banner {position:fixed; bottom:30%; right:2%; transform:translateY(30%); display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:16px; border:3px solid var(--point); background:#fff; border-radius:16px; z-index:2;
	h3 {font-size:24px !important;}
	h3 span {color:var(--point);}
}
.cs-float-banner .cs-input-box {display:flex; flex-direction:column; gap:8px;
	input {padding:12px; max-width:65px; background:var(--border-light); border-radius:8px; text-align:center; box-sizing:border-box;}
	select {padding:12px 40px 12px 12px; width:100%; border:1px solid var(--border-light); background:var(--border-light); border-radius:8px; cursor:pointer; box-sizing:border-box;
		-webkit-appearance:none; -moz-appearance:none; appearance:none; background-repeat:no-repeat; background-position:right 10px center; background-size:16px;
		background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");}
	button {padding:16px 8px; width:100%; background:var(--point); color:#fff; border-radius:8px; font-size:18px; font-weight:600; text-align:center; box-sizing:border-box;}
	button:hover {background:var(--point-dark);}
}
.cs-float-banner .cs-check-box {display:flex; flex-direction:column; justify-content:start; gap:8px;
	li p a {color:var(--primary-dark); text-decoration:underline;}
}
.cs-float-banner .float_top {padding:8px; width:100%; background:var(--mute-light); color:var(--mute-darken); border-radius:8px; box-sizing:border-box;
	&:hover {background:var(--mute-darken); color:#fff;}
}
@media (max-width:1600px) {
	.cs-float-banner {display:none !important;}
}



/* 메인 콘텐츠 */
.main-container {position:relative; display:block; margin:0 auto; padding:0; width:100%; overflow:hidden; background:#fff; box-sizing:border-box;}



/* 메인배너 */
.main-banner-area {position:relative; width:100%; overflow:hidden;}
.main-banner-area .main-banner {width:100%; height:450px;
	.swiper-slide {width:100%; overflow:hidden;}
	.swiper-slide a {display:block; width:100%; height:100%;}
	.swiper-slide img {width:100%; height:100%; object-fit:cover; object-position:center;}
	.swiper-pagination {bottom:20px;}
	.swiper-pagination-bullet {width:12px; height:12px; background:var(--primary);}
	.swiper-pagination-bullet-active {width:24px; border-radius:100px;}
}
@media (max-width:1200px) {
	.main-banner-area .main-banner {height:430px;}
}


/* 개강 일정 */
/* 레이아웃 */
.main-lect-list {padding:30px 0; width:100%; background:var(--mute-bglight); box-sizing:border-box;
	.main-col-area {display:flex; align-items:center; justify-content:center; gap:30px;}
	.main-col-area > li {padding:16px; flex:1; display:flex; align-items:center; justify-content:space-between; flex-flow:row wrap; background:#fff; border-radius:8px; box-sizing:border-box;}
}
/* 내부 요소 */
.main-lect-list .main-col-area > li {
	.day {display:flex; flex-direction:column; align-items:start; gap:8px;}
	.day span {display:block; font-size:16px; font-weight:600; color:var(--point);}
	.day p {font-size:28px; font-weight:600; color:var(--primary-darken);}
	a {padding:12px 16px; font-size:16px; font-weight:600; background:var(--point-bglight); color:var(--point); border:1px solid var(--point); border-radius:4px;}
	a:hover {background:var(--point); color:#fff;}
	ul {width:100%; margin-top:16px; padding-top:16px; display:flex; align-items:center; justify-content:center; gap:8px; text-align:center; color:var(--mute-darken); font-size:15px; border-top:1px dashed var(--border);}
	ul .date {padding:6px; background:var(--mute-light); border-radius:4px;}
}
/* 개수에 따른 디자인 자동 변경*/
/* CASE 1: 3개 이하일 때 */
.main-lect-list > ul:not(:has(> li:nth-child(4))) > li {flex-direction:row;}
/* CASE 2: 4개 이상일 때 (세로 카드형) */
.main-lect-list > ul:has(> li:nth-child(4)) > li {flex-direction:column; text-align:center; gap:16px;}
.main-lect-list > ul:has(> li:nth-child(4)) > li > .day {order:1; align-items:center;}
.main-lect-list > ul:has(> li:nth-child(4)) > li > ul {order:2; margin:0; flex-direction:column;}
.main-lect-list > ul:has(> li:nth-child(4)) > li > a {order:3; width:100%; text-align:center;}
@media (max-width:1200px) {
	.main-lect-list {padding:16px;
		.main-col-area {width:100%; flex-direction:column; gap:16px;}
		.main-col-area:has(> li:nth-child(4)) > li {padding:16px; flex-direction:row;}
		.main-col-area:has(> li:nth-child(4)) > li > a {width:auto;}
	}
	.main-lect-list .main-col-area > li {width:100%; flex-direction:row; padding:16px; align-items:center;
		.day {flex-direction:row; align-items:center;}
		.day p {font-size:24px;}
		ul {display:none;}
	}
}



/* cs 및 로그인 */
/* 레이아웃 */
.main-cs-login {margin:0 auto;padding:80px 0; width:100%; box-sizing:border-box;
	 & > div {display:flex; align-items:stretch; justify-content:center; gap:16px;}
}
@media (max-width:1200px) {
	.main-cs-login {padding:30px 16px;
		& > div {gap:16px; flex-direction:column;}
	}
}

/* cs 배너 */
.main-cs-login .cs-event-box {flex:1;}
.main-cs-login .main-cs-img {width:100%;}
.main-cs-login .cs-banner {margin-top:16px; display:flex; gap:16px;
	& > li {padding:20px; flex:1; display:flex; flex-direction:column; justify-content:center; gap:8px; border-radius:8px; color:#fff;}
	h4 {font-size:18px; font-weight:500;}
	h5 {font-size:28px; font-weight:800; line-height:100%; color:var(--yellow);}
	ul {display:flex; flex-flow:row nowrap; gap:8px; font-size:14px;}
	.apply {background-color:var(--primary-dark);}
	.study {background-color:var(--primary-darken);}
}
@media (max-width:1200px) {
	.main-cs-login .cs-banner {flex-direction:column;
		& > li {padding:16px; align-items:center; border-radius:4px;}
		h5 {font-size:24px;}
	}
}

/* 학습상담 */
.main-cs-login .inq-box {flex:1; padding:24px; border:1px solid var(--border); border-radius:8px; background:#fff; box-sizing:border-box;
	form > div {display:flex; flex-direction:column; gap:16px;}
	h4 {font-weight:600;}
	form > div > label {display:flex; align-items:stretch; gap:8px;}
	form > div > label p {margin:0 4px;}
	form > div > label select {padding:14px 24px 14px 8px; border-radius:8px; box-sizing:border-box; background:#f7f7f7  url("/img/common/select_arrow.png") no-repeat right 10px top 50%; border:none;}
	form > div > label > div {display:flex; align-items:center; justify-content:center; text-align:center;}
	input[type="text"] {padding:16px; width:100%; font-size:16px; background:var(--border-light); border:none; border-radius:8px; text-align:center; box-sizing:border-box;}
	button {padding:16px; width:100%; font-size:18px; font-weight:600; background:var(--black); color:#fff; border-radius:8px; box-sizing:border-box;}
	button:hover {color:var(--yellow);}
	form > div > ul {display:flex; flex-direction:column; gap:8px;}
	form > div > ul li label p a {color:var(--primary-hover); text-decoration:underline;}
}
@media (max-width:1200px) {
	.main-cs-login .inq-box {padding:16px; border:none; background:var(--primary-light); border-radius:4px;
		form > div {padding:16px; background:#fff; border-radius:4px;}
		form > div > label {flex-direction:column;}
	}
}



/* 게시판 */
/* 레이아웃 */
.main-board {margin:0 auto; padding:80px 0; width:100%; border-top:1px solid var(--border); border-bottom:1px solid var(--border); box-sizing:border-box;
	.tab-menu {display:flex; align-items:stretch; gap:60px;}
	.tab-menu > li {flex:1; min-width:0;}
}
/* 타이틀 */
.main-board .board-title {margin-bottom:16px; display:flex; align-items:center; justify-content:space-between;
	h4 {font-size:28px; font-weight:600;}
	a {font-size:16px; color:var(--primary);}
	a:hover {font-weight:600; color:var(--primary-hover);}
}
/* 게시글 리스트 */
.main-board .board-list {display:flex; flex-direction:column; gap:4px;
	li a {padding:8px 0; width:100%; display:flex; align-items:center; justify-content:space-between; font-size:18px; box-sizing:border-box;}
	li a:hover {color:var(--primary-hover); font-weight:600;}
	li a p {flex:1; padding-right:8px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
	li a span {flex-shrink:0; white-space:nowrap; font-size:14px; color:var(--gray);}
	li a .noti_n {margin-right:4px; width:12px; height:12px;}
}
@media (max-width:1200px) {
	.main-board {padding:30px 16px; border-bottom:8px solid var(--border-light);
		.tab-menu {position:relative; flex-wrap:wrap; gap:8px;}
		.tab-menu > li {display:contents;}
		.board-title {order:1; margin-bottom:0; padding:8px 12px; background:var(--border); border-radius:1000px; cursor:pointer; box-sizing:border-box;}
		.board-title h4 {font-size:16px; line-height:100%; }
		.board-title a {display:none;}
		.board-list li a {font-size:16px;}
		.board-list {order:2; display:none; width:100%;}
		.tab-menu > li.current .board-title {background:var(--primary-hover);}
		.tab-menu > li.current .board-title h4 {color:#fff; font-weight:600;}
		.tab-menu > li.current .board-title a {display:block; position:absolute; top:6px; right:0; font-size:15px;}
		.tab-menu > li.current .board-list {display:block;}
	}
}



/* 리뷰 및 과정에 쓰이는 공통 서브 배너 swiper */
.sub-banner {margin:0 auto; padding:80px 0; width:100%; box-sizing:border-box;
	.swiper-wrapper {align-items:stretch;}
}
.sub-banner .sub-banner-box {position:relative; padding:0 60px; box-sizing:border-box;
	.swiper-slide {margin:0 auto; text-align:center;}
	.swiper-slide img {width:100%; height:auto;}
	.swiper-button-prev {left:0; color:var(--mute-dark); font-size:28px;}
	.swiper-button-prev::after {display:none;}
	.swiper-button-next {right:0; color:var(--mute-dark); font-size:28px;}
	.swiper-button-next::after {display:none;}
}
.swiper-navigation-icon {display:none;}
@media (max-width:1200px) {
	.sub-banner {padding:30px 0;
		.sub-banner-box .swiper-button-prev {left:6px;}
		.sub-banner-box .swiper-button-next {right:6px;}
	}
}




/* 특별함 배너 */
.main-feature {margin:0 auto; padding:80px 0; width:100%; text-align:center; background:var(--primary-bglight); box-sizing:border-box;
	h4 {color:var(--text-base);}
	h4 span {color:var(--point);}
	ul {margin-top:30px; display:grid; grid-template-columns:repeat(3, 1fr); gap:30px;}
	ul li {padding:24px 16px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; background:#fff; color:var(--primary-dark); border-radius:16px;}
	ul li > img {margin-bottom:8px; width:100%; max-width:120px;}
	ul li p {font-size:16px; line-height:130%; color:var(--text-sub);}
}
@media (max-width:1200px) {
	.main-feature {padding:30px 16px;
		ul {margin-top:16px; grid-template-columns:repeat(2, 1fr); gap:16px;}
		ul li {padding:16px;}
		ul li > img {width:80%;}
		ul li p {font-size:15px; word-break:keep-all;}
	}
}




/* 과정 배너 */
.main-course {
	a {padding:16px; display:flex; flex-direction:column; align-items:center; gap:16px; border:1px solid var(--border); border-radius:16px; text-align:center; box-sizing:border-box;}
	a:hover {border:1px solid var(--primary);}
	img {width:auto !important; height:120px !important;}
	a > span {color:var(--primary);}
	a:hover > span {color:var(--primary-hover); font-weight:600;}
}
@media (max-width:1200px) {
	.main-course {padding:16px 8px;
		div span {display:none;}
		img {width:auto !important; height:80px !important;}
	}
}




/* 관련 기관 */
.footer-auth {margin:0 auto; padding:16px 0; width:100%; border-top:1px solid var(--border); border-bottom:1px solid var(--border); box-sizing:border-box;
	.footer-auth-list {display:flex; align-items:center; justify-content:space-between; gap:30px;}
}
@media (max-width:1200px) {
	.footer-auth {padding:16px;
		.footer-auth-list {padding-bottom:8px; width:100%; overflow-x:scroll;}
	}
}





/* 전체메뉴 모달 팝업 */
.header-area .nav-full-popup .modal_container {max-width:1200px; min-height:580px;}
.header-area .nav-full-popup .nav-full-list {display:flex; align-items:stretch; justify-content:center; gap:16px;
	& > li {flex:1; display:flex; flex-direction:column; align-items:stretch; justify-content:start; text-align:center;}
	& > li > a {padding:12px; font-size:18px; font-weight:600; background:var(--mute-dark); color:#fff; border-radius:8px;}
	& > li > a:hover {background:var(--mute-darken);}
	& > li > ul {margin-top:8px;}
	& > li > ul li {border:1px solid var(--border); border-bottom:none;}
	& > li > ul li:last-child {border-bottom:1px solid var(--border);}
	& > li > ul li a {display:block; padding:12px 4px;}
	& > li > ul li a:hover {background:var(--primary-bglight); color:var(--primary-dark); font-weight:600;}
}
@media (max-width:1200px) {
	.header-area .nav-full-popup {display:none;}
}



/* 팝업 */
section#popup {
  position: fixed;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  top: 0;
}

section#popup.visible::after {
  content: "";
  display: block;
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

section#popup > .inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.popup-swiper-container {
  width: 100%;
  position: relative;
  max-width: 360px;
  max-height:410px;
  overflow: hidden;
}

.popup-swiper-container .popup-swiper-slide > .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.popup-swiper-container .popup-swiper-slide a {
  display: block;
  width: 360px;
  height: 360px;
  background: #FFFFFF;
  display: flex;
  overflow: hidden;
  justify-content: center;
}

.popup-swiper-container .popup-swiper-slide a img {
  object-fit: contain;
  object-position: center;
  width: 100%;
}

.popup-swiper-container .popup-swiper-slide .popup_btn_area {
  width: 100%;
  max-width: 360px;
  background: #FFFFFF;
  display: flex;
  border-top: 1px solid #ededed;
}

.popup-swiper-container .popup-swiper-slide .popup_btn_area button {
  font-size: 16px;
  line-height: 16px;
  font-weight: 400;
  color: #2D2D2D;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  padding: 16px 8px;
}

.popup-swiper-container .popup-swiper-slide .popup_btn_area button.noshow {
  background: #EDEDED;
}

@media screen and (max-width: 980px) {
  .popup-swiper-container .popup-swiper-slide .popup_btn_area button {
    font-size: 13px;
    line-height: 17px;
    font-weight: 500;
  }
}

.popup-swiper-container .popup-swiper-slide .popup_btn_area button:hover {
  background: #393939;
  color: #E0E0E0;
}

.popup-swiper-container .lec-swiper-button {
  position: absolute;
  top: 45%;
  width: 94%;
  max-width: 94%;
  margin: 0 3%;
  display: flex;
  justify-content: space-between;
  z-index: 999;
}

.popup-swiper-container .lec-swiper-button .button {
  cursor: pointer;
}

.popup-swiper-container .lec-swiper-button .pop-swiper-button-next {
  transform: scaleX(-1);
}

.popup-swiper-container .hideAll {
  display: flex;
  align-items: center;
  justify-content: end;
}

.popup-swiper-container .hideAll > button {
  font-size: 16px;
  line-height: 16px;
  font-weight: 400;
  padding: 8px 16px;
  background: #FFFFFF;
  color: #464646;
  z-index: 10;
  border-radius: 1000px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  margin-top: 8px;
}
@media screen and (max-width: 980px) {
  .popup-swiper-container .hideAll > button {
    font-size: 13px;
    line-height: 17px;
    font-weight: 500;
  }
}

.popup-swiper-container .hideAll > button svg {
  padding-left: 8px;
}

.popup-swiper-container .hideAll > button svg path {
  fill: #A8A8A8;
}