.m_menu_open {display: none;}

.mt16 {margin-top:16px;}



/* bigcheckbox */
.bigcheckbox_area {padding:0; max-width:100%; display:inline-flex; flex-flow:row nowrap; flex:0 0 auto; align-items:start; justify-content:start; gap:4px; font-size:14px; cursor:pointer;
	p {flex:1; min-width:0; word-break:break-all; color:#355173;}
	.bigcheckbox {margin:0; padding:0; width:16px; height:16px; display:flex; flex:0 0 auto; align-items:center; justify-content:center; background:#fff; border:1px solid #bfd0e7; border-radius:2px; text-align:center; cursor:pointer; box-sizing:border-box;
		input {display:none;}
		i {opacity:0; font-size:10px; transition: 0.3s;}
		&:has(input:checked) {background:#0A8CF1;}
		input:checked+i {opacity:1; color:#fff; cursor:pointer; user-select:none;}
	}
}
@media (max-width: 980px) {
	.bigcheckbox_area {align-items:start;
		p {text-align:left;}
	}
}



/* 퀵 플로팅 배너 */
.quick-float-banner {position:fixed; top:50%; right:100px; transform:translateY(-50%); width:150px; z-index:1000;
	ul {list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px;}
	.quick-box {padding:4px 0; background:#fff; border:1px solid #ddd; border-radius:8px; overflow:hidden; box-shadow:0 2px 4px rgba(0,0,0,0.1); text-align:center;
		&:hover {border:1px solid #446CF9;}
		&:hover p {color:#446CF9;}
		a {display:block; text-decoration:none; padding:8px;}
		img {display:block; width:auto; height:40px; margin:0 auto 10px;}
		p {margin:0; font-size:16px; font-weight:600; letter-spacing:-0.5px;}
	}
	.lect-open {padding:0; border:1px solid #0C497C;
		&:hover {border:1px solid #0C497C;}
		.lect-tit {border-top:3px solid #0C497C; color:#0C497C; padding:8px 4px; font-size:16px; font-weight:bold;}
		.lect-info {padding:0 8px 8px; display:flex; flex-direction:column; gap:4px;
			p {padding-top:8px; color:#02A7FA; font-size:14px; border-top:1px solid #BFD0E7;}
			h4 {font-size:28px; font-weight:800;}
			span {font-size:12px; color:#666;}
			div {margin-top:4px; padding:8px; background:#0C497C; color:#fff; font-weight:bold; border-radius:4px;}
		}
		a {padding:0;}
		a:hover .lect-info div {background:#02A7FA; color:#fff;}
	}
}
/* 추가 가이드 퀵배너 */
.quick-float-banner {
	.first-guide {margin:8px 0; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#fff; border:1px solid #ddd; border-radius:8px; box-sizing:border-box;
		& > * {flex:1; width:100%;}
		.tit {padding:12px 0; background:#4F6887; color:#fff; text-align:center; border-radius:8px 8px 0 0;
			span {font-size:13px;}
			p {margin-top:2px; font-size:15px; font-weight:600;}
		}
		a {padding:12px; display:flex; flex-direction:column; align-items:start; gap:8px; border-top:1px dashed #BFD0E7; box-sizing:border-box;
			p {font-size:15px;}
			ul {width:100%; display:flex; align-items:center; justify-content:space-between; flex-direction:row; color:#0C497C; font-size:14px;}
			&:hover {background:#E5ECF4;}
		}
	}
	.float-top {padding:8px; width:100%; border:1px solid #BFD0E7; border-radius:8px; background:#f7f7f7; color:#0C497C; box-sizing:border-box;
		&:hover {background:#4F6887; color:#fff;}
	}
}
@media (max-width:1600px){
	.quick-float-banner {display:none;}
}



/* 신규 top */
#header .top-bar {width:100%; padding:12px 0; background:#E6F6FF; color:#354F70;
	.inner {margin:0 auto; width:1200px; display:flex; align-items:center; justify-content:space-between;
		.tit {font-size:14px;}
		ul {display:flex; align-items:center; justify-content:end; gap:20px;
			li {position:relative; font-size:14px;}
			li:not(:last-child)::after {content:""; position:absolute; top:2px; right:-10px; width:1px; height:12px; background:#bfd0e7;}
			a:hover {font-weight:600;}
		}
	}
}



/* header 수정 */
.sticky #header.pc > .inner {padding:20px 0; align-items:center;
	.d_logo {height:48px;}
	.login-box {
		button {color:#0C497C !important;}
		button:hover span {color:#02A7FA; font-weight:600;}
		.signup {padding-right:0;}
	}
	.search input {padding:12px 16px; border:1px solid #0C497C; color:#4F6887; border-radius:1000px; background:#fff;}
	.search button {color:#4F6887;}
}
.sticky #navbar {border-top:1px solid #E5ECF4; border-bottom:1px solid #E5ECF4;
	& > .inner {padding:20px 0;}
}
@media screen and (max-width: 980px) {
	.sticky #header.mob > .inner {max-width:100%; padding:12px 16px; box-sizing:border-box;
		.left {gap:0;
			.d_logo {width:auto; height:30px;
				a {display:flex; width:100%;}
				img {width:auto; height:30px;}
			}
		}
	}
	section#m_sub .row {padding:18px 24px !important;}
}



/* nav 수정 */
section#navbar.pc .inner {
	.left {width:100%; box-sizing:border-box;
		.menu-grp {position:relative; width:100%; justify-content:space-between;
			.menu {position:relative; display:flex; align-items:center; gap:4px;
				&:hover {color:#02A7FA;}
				.sub-menu {display:none !important; position:absolute; top:53px; left:0; padding:0; min-width:130px; display:flex; flex-direction:column; gap:0; 
								color:#666; background:#fff; font-size:15px; font-weight:normal; border:1px solid #E5ECF4; border-top:none; box-shadow:2px 3px 5px rgba(0, 0, 0, 0.2); box-sizing:border-box; z-index:2;
					& > li {padding:12px; border-bottom:1px dashed #E5ECF4;}
					& > li:last-child {border-bottom:none;}
					& > li:hover {color:#02A7FA; background:#E6F6FF; font-weight:600;}
				}
			}
			.menu i {font-size:10px;}
			.mylect {background:#02A7FA; color:#fff; border-radius:4px;
				&:hover {background:#0C497C; color:#fff;}
			}
		}
	}
}
@media screen and (max-width: 980px) {
	section#navbar.pc .inner {padding:8px 16px;
		.left {gap:16px;
			.menu-grp {justify-content:start; gap:16px;
				.menu {padding:6px 4px;
					i {display:none;}
					.sub-menu {display:none; top:43px;}
				}
				.mylect {padding:6px 10px;}
			}
		}
	}
}



/* 신규 푸터 */
#footer-area {position:relative; width:100%; overflow:hidden;
	.inner {margin:0 auto; width:1200px;}

	.footer-cs {padding:30px 0; width:100%; border-top:1px solid #E5ECF4; box-sizing:border-box;
		.inner {display:flex; align-items:stretch; justify-content:space-between;}
		.cs-box {display:flex; flex-direction:column; gap:8px;
			p {font-size:16px; font-weight:600; color:#0C497C;}
			h6 {font-size:40px; font-weight:800; color:#0C497C;}
			ul {display:flex; flex-direction:column; gap:6px; font-size:14px; color:#354F70;}
		}
		.icon-box {display:flex; align-items:center; gap:40px;
			li {display:contents;
				a {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;}
				div {display:flex; align-items:center; justify-content:center; width:60px; height:60px; background:#C2EAFF; border:8px solid #E6F6FF; border-radius:1000px;}
				i {font-size:18px; color:#0C497C;}
				p {font-size:15px; color:#354F70;}
				a:hover p {color:#02A7FA; font-weight:600;}
			}
			li::before {content:""; width:1px; height:120px; background:#E5ECF4;}
		}
	}

	.footer-menu {padding:16px 0; width:100%; border-top:1px solid #E5ECF4; border-bottom:1px solid #E5ECF4; box-sizing:border-box;
		& > ul {display:flex; align-items:center; justify-content:space-between;
			li {display:contents; font-size:15px; color:#354F70;}
			li:not(:last-child)::after {content:""; width:1px; height:12px; background:#E5ECF4;}
			li:hover a {color:#02A7FA; font-weight:600;}
		}
	}

	.footer-info {display:flex; align-items:stretch; justify-content:end; padding:30px 0;
		h1 {margin-right:auto;
			img {width:160px; height:auto;}
		}
		& > div {padding:0 48px; display:flex; flex-direction:column; gap:8px; border-left:1px solid #E5ECF4; box-sizing:border-box;
			& > p {font-size:15px; font-weight:600; color:#0C497C;}
			& > ul {display:flex; flex-flow:column wrap; gap:8px;}
			& > ul > li {font-size:14px; color:#354F70;}
		}
		.info-box {max-width:520px;}
		.bank-box ul {flex-direction:column;}
		.site-box {padding-right:0;
			details {min-width:208px; border:1px solid #E5ECF4; border-radius:4px; color:#0C497C; font-size:14px; cursor:pointer;
				summary {padding:4px 6px; background:#f7f7f7;}
				a {display:block; padding:4px 6px; border-top:1px solid #E5ECF4;}
				a:hover {background:#E6F6FF;}
			}
		}
	}

	.footer-corp {margin:0 auto; padding:16px 0; width:100%; border-top:1px solid #e5ecf4; text-align:center;
		p {font-size:13px; color:#999;}
	}
}
@media screen and (max-width: 980px) {
	#footer-area {position:relative; width:100%; overflow:hidden;
		.inner {margin:0 auto; width:100%;}

		.footer-cs {padding:16px;
			.inner {flex-direction:column; gap:16px;}
			.icon-box {display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; justify-content:center;
				li {font-size:14px;
					a {gap:8px;}
					div {width:48px; height:48px;border:4px solid #edf4ff;}
					p {font-size:14px;}
				}
				li::before {content:none;}
			}
		}

		.footer-menu {padding:16px;
			& > ul {justify-content:start; gap:8px; flex-flow:row wrap;}
			& > ul li {font-size:14px;}
		}

		.footer-info {flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:16px; text-align:center;
			h1 {margin:0;
				img {width:80px;}
			}
			& > div {padding:0; width:100%; border-left:none;
				& > ul {justify-content:center; gap:4px;
					li {width:auto; min-width:0; max-width:100%;}
				}
			}
			.site-box select {min-width:100%;}
		}
	}
}





/* 서브페이지 수정 */

/* 브래드크럼 */
.main_con .titBox {
	.total_num {color:#0A8CF1;}
	.naviBox > ul li.now span {color:#0A8CF1;}
	.naviBox > ul li.now::after {background:#0A8CF1;}
}

/* leftmenu */
.sub_content_inner .leftMenu {
	.mainMenu > li.on a {color:#0A8CF1;}
	.mainMenu > li.on::after {background:#0A8CF1;}
}

/* 과정 상세 */
.main_con {
	.tabBox .tabs > li.current {color:#354F70;}
	.tabBox .tabs > li.current::after {background:#BFD0E7;}
	.contentBox .tab-content .intro .icon {color:#0A8CF1; background:#E6F6FF;}
}

/* FAQ */
.main_con {
	.accordion ul li > p span.q {background:#E6F6FF; color:#0A8CF1;}
}

/* 나의강의실 */
.main_con {
	.toggleSwitch_wrapper .toggleSwitch .toggleButton.active {color:#0A8CF1;}
	.tab_menu > ul li.current {background:#E6F6FF; color:#0C497C;
		&::after {background:#0C497C;}
	}
}

/* 검색 */
.main_con {
	.usr_search > div .usr_search_btn {color:#0A8CF1;
		&:hover {background:#0C497C;}
	}
}

/* 회원가입 로그인 IDPW찾기 내정보수정 */
.sub_con {
	.a_icon {background:linear-gradient(180deg, #0A8CF1, #0C497C); border-color:#0A8CF1;}
	.login_box  .login_box_inner button.login {background:#0A8CF1;
		&:hover {background:#0C497C;}
	}
	.login_box_inner .login_search ul li.join a {color:#0A8CF1;}
	.step_wrap ul .step.current .txt {color:#0A8CF1;}
	.step_wrap ul .step.current .progress {background:#0A8CF1;}
	.joinBox .join_wrap .join-con-wrap input[id=all_c]:checked + .all_c_icon, .joinBox .join_wrap .join-con-wrap input[id=inp_02]:checked + .all_c_icon, .joinBox .join_wrap .join-con-wrap input[id=inp_03]:checked + .all_c_icon, .joinBox .join_wrap .join-con-wrap input[id=inp_04]:checked + .all_c_icon {
		background:#0A8CF1;
	}
	.joinBox .join_wrap .join-con-wrap .text_area > div > div.tit {color:#0C497C;}
	ul li > div label input[type=radio]:checked ~ .background {border:2px solid #0A8CF1;}
	.info_in ul li > div button {border-color:#0A8CF1; color:#0A8CF1;
		&:hover {background:#0A8CF1;}
	}
	ul li > div label input[type=radio]:checked ~ .check_wrp .check {border-color:#0A8CF1;}
	ul li > div label .check_wrp .check::before {background:#0A8CF1;}
	.join_wrap .buttonWrap button.cancel:hover {border-color:#0A8CF1;}
	.join_wrap .buttonWrap button.edit {background:#0A8CF1;}
}




/* modal popup guide */
.modal_info_popup {position:fixed; inset:0; padding:20px; display:flex; justify-content:center; align-items:center; background-color:rgba(0, 0, 0, 0.5); overflow-y:auto; transition:all 0.3s; z-index:999;
	.modal_container {margin:0; padding:0; width:100%; overflow:hidden; max-width:860px; max-height:70vh; display:flex; flex-direction:column; background:#ffffff;
		 .modal_top_menu {padding:20px; display:flex; justify-content:space-between; background:#354F70;
			.modal_title {font-size:18px; line-height:20px; font-weight:500; color:#ffffff;}
			.modal_closebtn {position:relative; font-size:18px; color:#ffffff; cursor:pointer; z-index:1;
				&::before {content:''; position:absolute; top:-16px; bottom:-16px; left:-16px; right:-16px; z-index:-1;}
			}
		 }
		 .modal_content {flex:1; overflow-y:auto; min-height:0; margin:20px;}
	}
}



/* 전체메뉴 모달 팝업 */
#header .nav-full-popup .modal_container {max-width:1200px; min-height:580px;
	.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;
			& > a {padding:12px; font-size:18px; font-weight:600; background:var(--mute-dark); color:#fff; border-radius:8px;}
			& > a:hover {background:var(--mute-darken);}
			& > ul {margin-top:8px;
				li {border:1px solid var(--border); border-bottom:none;}
				li:last-child {border-bottom:1px solid var(--border);}
				li a {display:block; padding:12px 4px;}
				li a:hover {background:var(--secondary-bglight); color:var(--secondary-dark); font-weight:600;}
			}
		}
	}
}
@media (max-width:1200px) {
	.header-area .nav-full-popup {display:none;}
}



/* pc popup zone */
.pc-popup-zone {position:relative; z-index:9999;
	.popup-overlay {position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,0.15); transition:opacity 0.4s ease, visibility 0.4s;}
	.popup-zone {position:fixed; top:50%; left:0; z-index:9999; display:flex; align-items:center; max-width:100%; transform:translateY(-50%); transition:transform 0.5s ease;
		.popup-panel {max-width:calc(100vw - 40px); display:flex; flex-direction:column; overflow:hidden;
			.popup-list {display:flex; align-items:stretch; width:max-content; max-width:900px;
				li {flex:0 0 300px; width:300px; height:420px; min-width:0; background:#fff; box-sizing:border-box;}
				li a {display:block; width:100%; height:100%;}
				li img {display:block; width:100%; height:100%; object-fit:cover;}
				li:last-child {border-radius:0 8px 0 0;}
			}
			.popup-bottom {display:flex; align-items:center; justify-content:center; width:100%; min-height:40px; background:#f7f7f7; border-radius:0 0 8px 0; box-sizing:border-box;
				label {display:flex; align-items:center; gap:6px; font-size:13px; color:#666; cursor:pointer;}
				input {width:14px; height:14px; margin:0; accent-color:#666; cursor:pointer;}
			}
		}
		.popup-toggle {display:flex; flex-direction:column; align-items:center; gap:10px; flex:0 0 40px; width:40px; min-height:110px; padding:15px 0; border-radius:0 8px 8px 0; background:#0C497C; color:#fff; cursor:pointer; box-sizing:border-box;
			span {font-size:14px; font-weight:700; writing-mode:vertical-rl; letter-spacing:1px; animation:popupTextColor 2s ease-in-out infinite;}
			i {font-size:15px; transition:transform 0.3s ease;}
		}
	}
}
.pc-popup-zone.open {
	.popup-overlay {opacity:1; visibility:visible;}
	.popup-zone .popup-toggle i {transform:rotate(0deg);}
}
.pc-popup-zone.close {
	.popup-overlay {opacity:0; visibility:hidden;}
	.popup-zone {transform:translate(calc(-100% + 40px), -50%);
		.popup-toggle i {transform:rotate(180deg);}
	}
}
@keyframes popupTextColor {
    0%, 100% {color:#fff;}
    50% {color:#FFE500;}
}

