@charset "utf-8";/* 
 * content CSS Document
 *
 */

[data-grid]{display:grid;}
 [data-grid="2"]{grid-template-columns:1fr 1fr;gap: 18rem;}
 [data-grid="3"]{grid-template-columns:1fr 1fr 1fr;gap:20rem;}
 [data-grid="4"]{grid-template-columns:1fr 1fr 1fr 1fr;gap: 47rem;}
 [data-grid="5"]{grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap: 37rem;}


/* 로그인 */

#content{ padding:40rem 0 70rem; } 
#content.page-join{padding:60rem 0 80rem;}
.sub-title { text-align:center; } 
.sub-title > h3 { display:block; margin-bottom:40rem; font-size:40rem; font-weight:bold; color:#222; line-height:1em; } 
.area-subVisual{display:flex; align-items: center; justify-content: space-between; width:100%; height:190rem; margin-bottom:30rem; padding:0 50rem; border-radius:15rem; box-sizing:Border-box; background:#7138F4;}
/* .area-subVisual .txt{} */
.area-subVisual .txt h3{display:block; font-size:36rem; line-height:1em; font-weight:bold; color:#fff; line-height:1em;}
.area-subVisual .txt p{display:block; margin-top:15rem; font-size:15rem; font-weight:300; color:#fff; line-height:1.6em; word-break:keep-all;}
.area-subVisual .icon{position:relative; top:13rem;}
.area-subVisual.mypage{background:#1774dd}
.area-subVisual.mypage .icon{top:5rem;}

.area-subVisual.offline{background:#eff9ff}
.area-subVisual.offline .txt h3{color:#222; font-size:30rem; margin-bottom:10rem;}
.area-subVisual.offline .txt .logo{height:50rem;}
.area-subVisual.offline .txt .logo img{height:100%;}
.area-subVisual.cs{background:#FFB031;}
.area-subVisual.cs .icon{top:0;}

/* navigation */
.area_navigation{margin-bottom:12rem;}
.area_navigation ul{display:flex; gap:10rem; }

/* .page-title{} */
.page-title > h2{display:block; font-size:28rem; font-weight:bold; color:#222; line-height:1em; word-break:keep-all;}

[data-flex]{display:flex}

@media all and (max-width:1100px){
    #content{ padding:20rem 0 50rem; } 
	.area-subVisual.mypage .icon img{height:125rem;}
}
@media all and (max-width:1024px){
    .area-subVisual{padding:0 30rem; height:160rem; border-radius:10rem;}
    .area-subVisual .txt h3{font-size:30rem;}
    .area-subVisual .txt p{margin-top:10rem;}
    .area-subVisual .icon img{height:140rem;}
    .area-subVisual.cs .icon img{height:100rem;}
	.area-subVisual.mypage .icon img{height:105rem;}

}
@media all and (max-width:768px){
    .sub-title > h3{font-size:34rem; margin-bottom:30rem;}
	.area-subVisual.mypage .icon img{height:95rem;}

}
@media all and (max-width:620px){
    .sub-title > h3{font-size:28rem; margin-bottom:25rem;}
	.page-title > h2{font-size:23rem;}

	.area-subVisual.mypage .icon img{height:85rem;}
}
@media all and (max-width:480px){
	#content{padding:20rem 0;}
    #content.page-join{padding:25rem 0 35rem;}
	.area_navigation{margin-bottom:6rem;}
    .sub-title > h3{font-size:20rem; margin-bottom:15rem;}
	.page-title > h2{font-size:18rem;}
    
    .area-subVisual{padding:0 5rem 0 12rem; height:90rem; border-radius:7rem; margin-bottom:15rem;}
    .area-subVisual .txt{width:calc(100% - 88rem);}
    .area-subVisual .txt h3{font-size:17rem;}
    .area-subVisual .txt p{margin-top:7rem; font-size:11rem; line-height:1.4em;}
    .area-subVisual .txt p br{display:none;}
    .area-subVisual .icon{top:2rem;}
    .area-subVisual .icon img{height:auto; width:80rem;}
	.area-subVisual.mypage .icon{top:2rem;}
	.area-subVisual.mypage .icon img{height:auto; width:70rem;}
}


.login-wrap{display: block; padding: 50rem; width: 500rem; margin:0 auto; border: 1px solid #e9e9e9; box-sizing: border-box; border-radius: 20rem;}
.login-wrap > h3{display: block; margin-bottom: 30rem; text-align: center; font-size: 30rem; font-weight: bold; color: #222; line-height: 1em; word-break: keep-all;}
.login-form .login-item{margin:0 0 12rem;}
.login-form .login-item:last-child{margin:0;}
.login-form .login-item input {width: 100%;height: 55rem; padding: 7rem 12rem; border-radius: 10rem; border: 1px solid #e9e9e9; background: #f6f6f6; margin: 0; box-sizing: border-box; font-size: 16rem;}
.login-form .login__social-box{display: flex; justify-content: space-between;  align-items: center; margin:18rem 0 0;}
.login-form .login__check .checkmark{top:1px; width:17rem; height:17rem;}
.login-form .login__check .check_cont .checkmark:after{top: 2rem; left: 4.8rem; width: 5rem; height: 8rem;}
.login-form .login__check em{padding-left:23rem; font-size:15rem; color:#333;}
.login-nonmember{padding-top: 30rem; margin-top: 30rem; border-top: 1px dashed #eee; box-sizing:border-box; text-align:center;}
.login-nonmember h4{display: block; margin-bottom:20rem; text-align: center; font-size:18rem; font-weight:600; color: #222; line-height: 1em; word-break: keep-all;}
.login-form .login__social-box a{font-size:14rem; color:#999;}
.login-form *.basic-btn span{font-size:17rem;}
.login-error{display:block;text-align:center;padding: 8rem;border: 1px solid #ffd7d7; box-sizing:border-box;font-size:14rem; color:red; margin: 0 0 15rem;border-radius: 5rem;line-height: 1.1em; background: #fff6f6;font-weight: 400;}

@media all and (max-width:480px){
	.login-wrap{width:100%; padding: 30rem 20rem; border-radius: 10rem;}
	.login-wrap > h3{font-size:20rem; margin-bottom:15rem;}
	.login-form .login-item{margin:0 0 8rem;}
	.login-form .login-item input {height:36rem; padding: 5rem 10rem; border-radius: 5rem; font-size: 12rem;}
	.login-form .login__check{display:block; line-height:1em;}
	.login-form .login__check em{font-size:12rem;}
	.login-form .login__check .checkmark{top:3rem; width:12rem; height:12rem;}
	.login-form .login__check .check_cont .checkmark:after{top: 1rem; left: 3.2rem;  width: 4rem; height: 6rem; border-width: 0 1px 1px 0;}
	.login-form .login__check em{padding-left:17rem;}
	.login-form .login__social-box{margin:10rem 0 0;}
	.login-form .login__social-box a{font-size:11rem;}
	.login-form *.basic-btn{height:40rem;}
	.login-form *.basic-btn span{font-size:13rem;}
	.login-nonmember{padding-top:20rem; margin-top:20rem;}
	.login-nonmember h4{font-size:15rem; margin-bottom:13rem;}
}

/* 회원유형 */
.join-title{text-align:center; margin-bottom:40rem;}
.join-title > h4{display:block; font-size:30rem; font-weight:bold; color:#333; line-height:1em; } 
.join-title > p{display:block; margin-top:12rem; font-size:16rem; font-weight:400; color:#666; line-height:1.5em; word-break:keep-all;} 
.member-type{ width:1000rem; margin:0 auto; border:1px solid #eee; box-sizing:border-box; padding:70rem 50rem; border-radius:20rem; background:#fbfbfb; } 
.member-type .logo{display:flex; justify-content: center; height:50rem; margin-bottom:20rem;}
.member-type .logo img{height:100%;}
.member-type__list{width:500rem;  margin:0 auto;}
.member-type__list > li{width:100%; height:64rem; margin-bottom:12rem;}
.member-type__list > li > a{display:flex; justify-content: center; align-items: center; padding:20rem; width:100%; height:100%; background:#fff; border:1px solid #e9e9e9; box-sizing:border-box; border-radius:10rem; transition:all 0.3s ease;}
.member-type__list > li > a > span{font-size:17rem; font-weight:600; color:#333; line-height:1em; word-break:keep-all;}
.member-type__list > li > a:hover{border-color:var(--color-point);}
.member-type__list > li > a:hover span{color:var(--color-point);}

@media all and (max-width:1024px){
	.member-type{width:100%;}
}
@media all and (max-width:768px){
	.member-type__list{width:450rem;}
}
@media all and (max-width:620px){
	.member-type{padding:50rem 30rem; border-radius:15rem;}
	.member-type .logo{height:43rem;}
	.join-title{margin-bottom:30rem;}
	.join-title > p{font-size:15rem;}
	.member-type__list > li{height:54rem; margin-bottom:10rem;}
	.member-type__list > li > a{padding:12rem; border-radius:5rem;}
	.member-type__list > li > a > span{font-size:16rem;}
}
@media all and (max-width:480px){
	.member-type{padding:20rem 30rem; border-radius:8rem;}
	.member-type .logo{height:28rem; margin-bottom:13rem;}
	.join-title{margin-bottom:15rem;}
	.join-title > p{font-size:11rem;}
	.member-type__list{width:100%;}
	.member-type__list > li{height:40rem; margin-bottom:6rem;}
	.member-type__list > li > a{padding:10rem;}
	.member-type__list > li > a > span{font-size:12rem;}
}

/* 약관 */
.step-list { display:flex; justify-content: center; gap:50rem; margin-bottom:50rem; } 
.step-list > li { display:flex; justify-content: center; align-items: center; gap:10rem; } 
.step-list > li.on > i { background:var(--color-point); color:#fff; } 
.step-list > li.on > span { color:var(--color-point); } 
.step-list > li > i { display:flex; justify-content: center; align-items: center; width:30rem; height:30rem; border-radius:50rem; background:#ddd; font-size:15px; font-weight:bold; color:#999; } 
.step-list > li > span { display:inline-block; font-size:17rem; font-weight:600; color:#555; line-height:1em; } 
.box-terms { width:1000rem; margin:0 auto; border:1px solid #e9e9e9; box-sizing:border-box; padding:50rem; border-radius:20rem; } 
.box-terms em { padding-left:34rem; font-size:17rem; font-weight:400; color:#333; } 
.chk-all-box em { font-size:18rem; font-weight:600; color:#222; } 
.terms-list { margin-top:30rem; padding-top:30rem; width:100%; border-top:1px solid #e9e9e9; box-sizing:border-box; } 
.terms-item { display:flex; justify-content: space-between; align-items: center; padding:15rem 0; } 
.terms-item > div{width:calc(100% - 60rem);}
.terms-item#li_guardian{display:none; background-color: #f9f9f9; padding-left: 20rem; border-radius:5rem;}
.terms-item a { display:block; padding:7rem 12rem; border:1px solid #eee; background:#eee; box-sizing:border-box; border-radius:5rem; font-size:14rem; font-weight:600; color:#666; transition:all 0.3s ease; } 
.terms-item a:hover { background:var(--color-point); color:#fff; } 
.box-terms .checkmark { width:23rem; height:23rem; } 
.box-terms .check_cont .checkmark:after { top:3rem; left:7rem; width:7rem; height:10rem; } 
.box-btn { display:flex; justify-content: center; gap:12rem; margin:50rem auto 0; } 
/* .box-btn > a { }  */

@media all and (max-width:1024px){
	.box-terms{width:100%;}
}
@media all and (max-width:620px){
	.box-terms{padding:40rem 30rem; border-radius:15rem;}
	.terms-list{margin-top:20rem; padding-top:20rem;}
	.terms-item{padding:10rem 0;}
}
@media all and (max-width:480px){
	.box-terms{padding:20rem; border-radius:8rem;}
	.terms-list{margin-top:15rem; padding-top:15rem;}
	.terms-item{padding:5rem 0;}
	.chk-all-box em{font-size:12rem;}
	.box-terms em{display:block; width: calc(100% - 20rem);font-size:12rem; padding-left:20rem;}
	.box-terms .check_cont{font-size:14rem;}
	.box-terms .checkmark{top:0.5rem; width:14rem; height:14rem; border-radius:3rem;}
	.box-terms .check_cont .checkmark:after{top: 2rem;  left: 4.5rem; width: 4rem; height: 6rem;}
	.terms-item{padding:0 0 8rem;}
	.terms-item > div{width:calc(100% - 31rem);}
	.terms-item a{font-size:10rem; padding:2rem 5rem; border-radius:3rem;}
	.terms-item#li_guardian{padding:5rem 10rem;}
	.terms-item#li_guardian > div{width:100%;}
	.terms-item#li_guardian em{font-size:11rem;}
    .box-btn{margin:20rem auto 0; gap:6rem;}
}


/* 본인인증 */
.join-type { width:1000rem; margin:0 auto; gap:50rem; } 
.join-type > li { border:1px solid #e9e9e9; box-sizing:border-box; padding:60rem 50rem; border-radius:20rem; text-align:center; } 
.join-type > li .icon { display: flex; justify-content: center; align-items: center; width:100rem; height:69rem; margin:0 auto 30rem; } 
.join-type > li .icon img { height:100%; } 
.join-type > li h3 { display:block; font-size:30rem; font-weight:700; color:#222; line-height:1em; word-break:keep-all; } 
.join-type > li p { display:block; margin-top:15rem; font-size:16rem; font-weight:400; color:#555; line-height:1.6em; word-break:keep-all; } 
.join-type > li a { margin-top:25rem; height:50rem; } 
	
@media all and (max-width:1024px){
	.join-type{width:100%; gap:20rem;}
}
@media all and (max-width:768px){
	.join-type{gap:15rem; grid-template-columns:1fr;}
	.join-type > li{padding:40rem; border-radius:15rem;}
	.join-type > li .icon{width:80rem; height:60rem; margin:0 auto 24rem;}
	.join-type > li h3{font-size:25rem;}
	.join-type > li p{width:70%; margin:10rem auto 0; line-height:1.4em;}
}
@media all and (max-width:620px){
	.join-type{gap:15rem;}
	.join-type > li{padding:40rem 30rem; border-radius:10rem;}
	.join-type > li .icon{width:60rem; height:55rem; margin:0 auto 18rem;}
	.join-type > li h3{font-size:23rem;}
	.join-type > li p{width:80%; font-size:15rem;}
	.join-type > li a{margin-top:20rem; height:45rem;}
}
@media all and (max-width:480px){
	.join-type{gap:10rem;}
	.join-type > li{padding:25rem 20rem; border-radius:8rem;}
	.join-type > li .icon{width:50rem; height:40rem; margin:0 auto 13rem;}
	.join-type > li h3{font-size:17rem;}
	.join-type > li p{margin:8rem auto 0; width:100%; font-size:11rem;}
	.join-type > li a{margin-top:12rem; height:34rem;}
}




/* 회원정보입력 */
.join-form__wrap { width:1000rem; margin:0 auto; } 
.join-form {margin-bottom:70rem;} 
.join-form > h3 { display:block; font-size:22rem; font-weight:700; color:#222; line-height:1em; margin-bottom:15rem; } 
.form-list { border-top:2px solid #111; box-sizing:border-box; } 
.form-list.line{border:1px solid #eee; border-top:2px solid #111;}
.form-group{display:grid; grid-template-columns: 1fr 1fr 1fr; border-bottom:1px dashed #e9e9e9; box-sizing:border-box; }
.form-group:last-child{border-bottom:none;}
.form-group[data-grid="1"]{grid-template-columns:1fr; gap:0;}
.form-group[data-grid="2"]{grid-template-columns:1fr 1fr; gap:0;}
.form-item { display:flex; align-items: center; padding:15rem 0; box-sizing:border-box; border-bottom:1px solid #eee; box-sizing:border-box; } 
.form-item .title { width:150rem; } 
.form-item .title h3 { position:relative; display:inline-block; font-size:16rem; font-weight:700; color:#222; } 
.form-item .title i{ position:absolute; top:-5rem; right:-10rem; color:red; } 
.form-item .cont { width:calc(100% - 150rem); } 
.form-item .cont input,
.form-item .cont select{ display:block; padding:10rem; width:300rem; height:45rem; border-radius:5rem; border:1px solid #e9e9e9; box-sizing:border-box; font-size:15rem; font-weight:400; color:#333; line-height:1em; } 
.form-item .cont .info{display:block; margin-top:10rem; font-size:13rem; font-weight:500; color:var(--color-point); word-break:keep-all;}
.form-item .cont .info > i{position:relative; margin-right:3rem; top:2px; }
.form-item .input-box{display: flex; align-items: center; gap:10rem;}
.form-item .input-box.full input{width:calc(100% - 104rem);}
.form-item .input-box.email input,
.form-item .input-box.email select{width:calc((100% / 3) - 46rem);}
.company .form-item .input-box.email input,
.company .form-item .input-box.email select{width:calc((100% / 3) - 14rem);}
.form-item.column{position:relative; flex-direction: column; align-items: flex-start; gap:8rem; padding:15rem 20rem; box-sizing:Border-box; border-bottom:none;}
.form-item.column:before{content:''; position:absolute; top:50%; right:0; width:1px; height:100%; border-right:1px dashed #eee; transform:translateY(-50%);}
.form-item.column:last-child:before{border:none;}
.form-item.column .title{width:100%;}
.form-item.column .title h3{font-size:15rem; font-weight:600;}
.form-item.column .cont{width:100%;}
.form-item.column .cont input{width:100%;}
.form-item.column .cont .input-box select{width:140rem;}
.form-item.column .cont .input-box .info{margin:0;}
.input-addr{display: flex; flex-direction: column; gap: 10rem;}
.input-addr a{width:94rem;}
.input-btn__list{display:flex; gap:10rem;}
.form-item .input-box .input-btn__list{gap:6rem;}
.input-btn{display:flex; justify-content: center; align-items: center; min-width:80rem; height:45rem; padding:10rem 15rem; box-sizing:border-box; border-radius:5rem; background:#334559; font-size:14rem; color:#fff; white-space: nowrap;}
.input-full{width:100% !important;}
.radio-wrap{display:flex; gap:10rem; width:300rem;} 
.radio-box {position: relative; } 
.radio-box input[type="radio"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; appearance: none; } 
.radio-wrap .radio-box { flex: 1; } 
.radio-wrap .radio-box:last-of-type { margin-right: 0; } 
.radio-wrap .radio-box input[type="radio"] + label { position: relative; display: block; padding-left: 0; width: auto; height: 45rem; line-height: 44rem; font-size: 15rem; font-weight: 400; color: #222; text-align: center; border: 1px solid #ddd; border-radius: 6rem; cursor: pointer; transition: color .15s ease-in-out, background .15s ease-in-out, border .15s ease-in-out; } 
.radio-wrap .radio-box input[type="radio"] + label::before { display: none; } 
.radio-wrap .radio-box input[type="radio"]:checked + label { color: #fff; background-color: #222; border-color: #222; } 
.radio-wrap .radio-box input[type="radio"]:disabled + label { color: #222; border-color: #ddd; cursor: default; } 
.radio-wrap .radio-box input[type="radio"]:disabled:checked + label { color: #222; background-color: #fff; border-color:var(--color-point); color:var(--color-point); } 
.radio-wrap .radio-box input[type="radio"]:focus-visible + label { outline: 2px dashed #4369e3; } 
/* .join-agree{} */
.join-agree__wrap{display:block; padding:25rem; border:1px solid #eee; box-sizing:border-box; border-radius:5rem;}
.join-agree__wrap > h3{margin-bottom:10rem; font-size:17rem; font-weight:700; color:#222; line-height:1em;}
.form-policy{border:1px solid #eee; padding:20rem; box-sizing:Border-box; border-radius:5rem; height:200rem; background:#f9f9f9; overflow-y: scroll;}
.box-agree{margin-top:15rem; display: flex; justify-content: flex-start; align-items: center;}
.box-agree .check_cont{padding-left:23rem; font-size:15rem;}
.box-agree input[type=checkbox]{position:relative;}
.box-agree .check_cont .checkmark:after{top: 2rem; left: 5rem; width: 5rem; height: 8rem;}
/* .box-agree em{} */
#company_zipcode {width:120rem;}
#password-strength{margin-top:10rem; width:300rem; font-size: 12rem; }
#password-strength div{margin-top:5rem;}

@media all and (max-width:768px){
	.form-item .input-box.email{flex-wrap: wrap;}
	.form-item .input-box.email input{width:calc((100% / 2) - 13.5rem);}
	#email3{width:calc(100% - 88rem);}
	.form-item .input-box.email{gap:10rem 6rem;}
	.company .form-item .input-box.email input,
	.company .form-item .input-box.email select{width: calc((100% / 3) - 10.5rem);}
}
@media all and (max-width:480px){
	.form-item .input-box.email{gap:8rem 4rem;}
	.form-item .input-box.email input{width:calc((100% / 2) - 9rem);}
	#email3{width:calc(100% - 65rem);}
	.company .form-item .input-box.email select{width: calc((100% / 3) - 7.5rem);}

	
	#password-strength{width:100%; font-size:11rem;}
	#password-strength div{margin-top:3rem;}
}


/* 가입완료 */
.box-join{ width:1000rem; margin:0 auto; border:1px solid #e9e9e9; box-sizing:border-box; padding:50rem; border-radius:20rem; text-align:center;} 
.join-txt{display:flex; flex-direction: column; align-items: center; justify-content: center;}
.join-txt .icon{width:60rem; height:60rem; margin-bottom:25rem;}
.join-txt .icon img{height:100%;}
.join-txt h4{display:block; margin-bottom:16rem; font-size:24rem; font-weight:bold; color:#222; line-height:1em; word-break:keep-all;}
.join-txt p{display:block; font-size:17rem; font-weight:400; color:#555; line-height:1.5em; word-break:keep-all;}
.join-txt p span{font-weight:bold; color:#333;}
.join-txt a{margin-top:30rem;}

@media all and (max-width:1024px){
	.box-join{width:100%;}
    .join-form__wrap{width:100%;}
}
@media all and (max-width:480px){
	.box-join{padding:25rem 20rem; border-radius:8rem;}
	.join-txt .icon{width:40rem; height:40rem; margin-bottom:15rem;}
	.join-txt h4{font-size:20rem; margin-bottom:10rem;}
	.join-txt p{font-size:13rem;}
	.join-txt a{margin-top:15rem;}

	#password-strength{width:100%; font-size:11rem;}
	#password-strength div{margin-top:3rem;}
}


/* 아이디비밀번호 찾기 */
.area-find{width:560rem; margin:0 auto; box-sizing:border-box; border-radius:0rem; text-align:center;} 
.area-find .tabs{gap:0; margin-bottom:40rem; border-bottom:1px solid #e9e9e9; box-sizing:Border-box;}
.area-find .tabs > li{position:relative; display: flex; justify-content: center; align-items: center; width:50%; height:60rem; border:none; border:0; }
.area-find .tabs > li:before{content:''; position:absolute; left:0; bottom:0; width:100%; height:0; background:var(--color-point);}
.area-find .tabs > li.active{background:#fff; color:var(--color-point); font-weight:bold;}
.area-find .tabs > li.active:before{height:2px;}
.area-find .input-wrap{margin-top:30rem;}
.area-find .input-wrap ul > li{margin-bottom:10rem;}
.area-find .input-wrap ul > li input{display:block; padding:10rem 15rem; width:100%; height:55rem; border-radius:5rem; border:1px solid #e9e9e9; background:#fff; box-sizing:border-box; font-size:15rem; font-weight:400; color:#333; outline:none;}
.area-find .basic-btn{width:100%; border-radius:5rem;}
.area_policy { padding-top:0; } 
.area_policy h2 { font-size:17rem; color:#222; font-weight: 700; } 
.area_policy h3 { margin-bottom:5rem; font-weight: 700; font-size:16rem; color:#222; } 
.area_policy ul li,
.area_policy p { line-height:1.6; font-weight:400; font-size:15rem; color:#666; text-align:justify; } 
.area_policy ul li { margin-bottom:3rem; } 
.area_policy ul li:last-child { margin:0; } 
.area_policy ul li ul { margin-left:10rem; margin-top:5rem; margin-bottom:20rem; } 
.area_policy ul li ul li { margin-bottom:2rem; font-size:15rem; } 
.area_policy .inr_policy { padding:25rem 0; border-bottom:1px solid #e9e9e9; } 
.area_policy .inr_policy.first { padding-top:0; } 
.area_policy .inr_policy:last-child { border: none; } 




@media all and (max-width:1024px){
    .join-form__wrap{width:100%;}
}
@media all and (max-width:768px){
    .join-form > h3{font-size:18rem;}
    .step-list{gap:25rem; margin-bottom:40rem;}
    .form-group{ grid-template-columns: 1fr;}
    .form-item .title h3{font-size:15rem;}
    .form-item.column{border-bottom:1px dashed #e9e9e9; padding:15rem;}
    .form-item.column:last-child{border:none;}
    .form-item.column:before{border-right:none;}
	 .form-item .email i{font-size:15rem;}
    
}
@media all and (max-width:620px){
    .join-form > h3{font-size:15rem; margin-bottom:10rem;}
    .step-list{gap:20rem;}
    .step-list > li{gap:5rem;}
    .step-list > li > i{width:25rem;  height:25rem; font-size:14rem;}
    .step-list > li > span{font-size:15rem;}
    .form-item{flex-direction: column; align-items: flex-start; gap:8rem;}
    .form-item .title,
    .form-item .cont{width:100%;}
}
@media all and (max-width:480px){
    .join-form{margin-bottom:20rem;}
    .join-form > h3{font-size:13rem; margin-bottom:10rem;}
    .step-list{gap:13rem; margin-bottom:20rem;}
    .step-list > li{gap:6rem; flex-direction: column;}
    .step-list > li > i{width:20rem; height:20rem; font-size:11rem;}
    .step-list > li > span{font-size:13rem;}

    .form-item{padding:10rem 0; gap:5rem;}
    .form-item .title i{top:-3.5rem; right:-7rem;}
    .form-list.line{border-left:none; border-right:none;}
    .form-item .email i{font-size:11rem;}
    .form-item.column{padding:10rem 0; gap:5rem;}
    .form-item .title,
    .form-item.column .title{line-height:0.85em;}
    .form-item .title h3,
    .form-item.column .title h3{font-size:11rem;}
    .form-item .cont input, 
    .form-item .cont select{padding:6rem; height:34rem; min-height:34rem; font-size:12rem; border-radius:4rem; width:100%;}
    .form-item.column .cont .input-box select{width:100%; min-height:34rem;}
    .form-item .input-box{gap:5rem;}
    .form-item .input-box.column{align-items: flex-start; flex-direction: column;}
    .form-item.column .input-addr .input-box{align-items: flex-start; flex-direction: column;}
    .input-btn__list{width:100%; gap:5rem;}
    .input-btn__list > div{width:50%;}
    .input-btn__list > div a{width:100%;}
    .input-btn{min-width:60rem; height:34rem; font-size:11rem; padding:5rem; border-radius:4rem;}
    .form-item .input-box .input-btn__list{gap:5rem;}
    .form-item .cont .info{font-size:11rem;}

    .radio-wrap{width:100%; gap:5rem;}
    .radio-wrap .radio-box input[type="radio"] + label{height:34rem; line-height:34rem; font-size:12rem; border-radius:4rem;}

    .join-agree__wrap{padding:12rem 10rem;}
    .join-agree__wrap > h3{font-size:12rem; margin-bottom:10rem;}
    .form-policy{padding:10rem;}
    .area_policy .inr_policy{padding:12rem 0;}
    .area_policy h3{font-size:12rem;}
    .area_policy ul li, .area_policy p{font-size:11rem;}
    .area_policy ul li ul li{font-size:11rem;}
    .box-agree{margin-top:10rem;}
    .box-agree .check_cont{padding-left:19rem; font-size:11rem;}
    .box-agree .checkmark{width:13rem; height:13rem; border-radius:3rem;}
    .box-agree .check_cont .checkmark:after{top: 2rem; left: 4rem; width: 4rem; height: 6rem;}
    .box-agree em{font-size:11rem;}


}


/* 통합학습내역 */
.area_navigation ul{display:flex; gap:20rem;}
.area_navigation ul > li{position:relative; display:block; font-size:14rem; font-weight:400; color:#555; line-height:1em;}
.area_navigation ul > li:first-child:before{display:none;}
.area_navigation ul > li:before{content:''; position:absolute; top:-1rem; left:-17rem; width:15rem; height:15rem; background:url(../images/content/ic-navigation-arr.svg)no-repeat center; background-size:5rem;}
.area_navigation ul > li > a{color:#555;}
.search-filter{margin:30rem 0; padding:30rem; width:100%; background:#f9f9f9; border:1px solid #eee; box-sizing:Border-box; border-radius:10rem; display:flex; justify-content: space-between; align-items: center; gap:30rem;}
.search-filter .period{display:flex; border:1px solid #eee; box-sizing:border-box; border-radius:5rem; overflow:hidden; width:550rem;}
.search-filter .period > li{position:relative; display:flex; justify-content: center; align-items: center; padding:10rem; width: calc(100% / 4); height:45rem; background:#fff; border-right:1px solid #eee; }
.search-filter .period > li:before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid var(--color-point); opacity:0; cursor:pointer;}
.search-filter .period > li:nth-child(1):before{ border-radius:5rem 0 0 5rem;}
.search-filter .period > li:nth-child(4):before{ border-radius:0 5rem 5rem 0;}
.search-filter .period > li:last-child{border:none;}
.search-filter .period > li.on:before{opacity:1;}
.search-filter .period > li.on{color:var(--color-point); font-weight:600;}
.search-filter .period > li span{font-size:15rem;}
.box-datepicker{width:calc(100% - 580rem); display:flex; gap:10rem;}
.box-datepicker .date{display:flex; align-items: center; gap:10rem; width:calc(100% - 130rem);}
.box-datepicker input{width:100%; height:45rem; padding:10rem; border-radius:5rem; border:1px solid #eee; box-sizing:border-box; font-size:15rem; outline:none;}
.box-datepicker button{width:120rem; background:var(--color-point); border-radius:5rem; font-size:15rem; color:#fff;}
.lecture-list{border-top:1px solid #eee;}
.lecture-item{position:relative; display:flex; align-items: center; gap:30rem; padding:30rem 0; border-bottom:1px solid #eee; box-sizing:border-box;}
.lecture-item .state{position:absolute;top: 30rem;left: 30rem; display: flex; justify-content: center; align-items: center; padding: 6rem 3rem; height:23rem; font-size:14rem; width:53rem; color:#fff;background:#111;line-height:1em;border-radius: 5rem 0; text-align:center;}
.state.ing { background-color: #0076fd; }   
.state.finish { background-color: #05c275; } 
.state.fail { background-color: #ff2068; }  
.state.cancel { background-color: #aeb5bc; } 
.state.complete{ background-color: #333333; } 
.state.pending { background-color: #ff9f43; }  
.state.refund { background-color: #ff5278; }  



.offline .lecture-item .state{position:relative; display:inline-flex; margin-bottom:12rem; top:0; left:0; width:74rem; border-radius:5rem;}
.lecture-item .img{display:flex; justify-content: center; align-items: center; width:300rem;  height:183rem; background:#eee; border-radius:10rem; box-sizing:border-box; overflow:hidden;}
.lecture-item .img img{width:100%; height:auto; }
.lecture-item .cont{width:calc(100% - 600rem);}
/* .box-lecture .cont .type-wrap{} */
.box-lecture .cont .type-wrap em{display:inline-block; font-size:14rem; font-weight:400; color:var(--color-point);}
.lecture-item .cont h3{display:block; font-weight:600; word-break:keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.lecture-item .cont h3 a{display:block; font-size:19rem; font-weight:600; color:#222; line-height:1.2em; word-break:keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.lecture-item .cont a .type{display:flex; justify-content: center; align-items: center; width:68rem; height:23rem; font-size:14rem; line-height:1em; font-weight:600; border:1px solid var(--color-point); color:var(--color-point); border-radius:5rem;}
.lecture-item .cont .subject a{display:flex; align-items: center; gap:10rem;}
.lecture-item .cont .subject h3{width:calc(100% - 65rem); font-size:19rem;}
.lecture-item .cont p{display:block; margin-top:8rem; font-size:14rem; font-weight:400; color:#999; line-height:1.2em; word-break:keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.box-lecture .cont .price{margin:15rem 0; font-size:14rem; font-weight:500; color:#666; line-height:1em;}
.price .icon{margin-right:6rem;}
.price > em{margin-left:8rem; display:inline-block; padding:4rem 5rem; font-size:12rem; font-weight:500; color:var(--color-point); background:rgba(8,125,194,0.07); border:1px solid rgba(8,125,194,0.07); box-sizing:border-box; line-height:1em; border-radius:3rem;}
.lecture-item .btn-list{display: flex; gap:10rem; flex-direction: column; align-items: center; justify-content: center; min-height: 125rem; width:240rem; height:100%; border-left:1px solid #eee; box-sizing:border-box;}
.lecture-item .btn-list > a{display:block; width:120rem; border:1px solid #e9e9e9; background:#fff; padding:0; margin:0; box-sizing:Border-box; transition:all 0.3s ease;}
.lecture-item .btn-list.icon > a span{position:relative; padding-left:19rem; font-size:14rem; font-weight:400; color:#8d8d8d; line-height:1em;}
.lecture-item .btn-list.icon > a span:before{content:''; position:absolute; top:1px; left:0; width:15rem; height:15rem; transition:all 0.3s ease;}
.lecture-item .btn-list.icon > a.heart span:before{background:url(../images/content/ic-heart-line.svg)no-repeat center; background-size:contain;}
.lecture-item .btn-list.icon > a.cart span:before{background:url(../images/content/ic-cart.svg)no-repeat center; background-size:contain;}
.lecture-item .btn-list.icon > a.detail span:before{background:url(../images/content/ic-detail.svg)no-repeat center; background-size:contain;}
.lecture-item .btn-list.icon > a.play span:before{background:url(../images/content/ic-play-circle.svg)no-repeat center; background-size:contain;}
.lecture-item .btn-list.icon > a.cancel span:before{background:url(../images/content/ic-cancel-circle.svg)no-repeat center; background-size:contain;}
.lecture-item .btn-list.icon > a.review span:before{background:url(../images/content/ic-survey.svg)no-repeat center; background-size:contain;}
.lecture-item .btn-list.icon > a.survey span:before{background:url(../images/content/ic-smile.svg)no-repeat center; background-size:contain;}
.lecture-item .btn-list.icon > a.certi span:before{background:url(../images/content/ic-award.svg)no-repeat center; background-size:contain;}
.lecture-item .btn-list.icon > a.complete span:before{background:url(../images/content/ic-check.svg)no-repeat center; background-size:contain;}
.lecture-item .btn-list > a:hover{border-color:var(--color-point);}
.lecture-item .btn-list > a:hover span{color:var(--color-point);}
.lecture-item .btn-list.icon > a.heart:hover span:before{background:url(../images/content/ic-heart-line-color.svg)no-repeat center; background-size:contain;}
.lecture-item .btn-list.icon > a.cart:hover span:before{background:url(../images/content/ic-cart-color.svg)no-repeat center; background-size:contain;}
.lecture-item .btn-list.icon > a.detail:hover span:before{background:url(../images/content/ic-detail-color.svg)no-repeat center; background-size:contain;}
.lecture-item .btn-list.icon > a.play:hover span:before{background:url(../images/content/ic-play-circle-color.svg)no-repeat center; background-size:contain;}
.lecture-item .btn-list.icon > a.cancel:hover span:before{background:url(../images/content/ic-cancel-circle-color.svg)no-repeat center; background-size:contain;}
.lecture-item .btn-list.icon > a.review:hover span:before{background:url(../images/content/ic-survey-color.svg)no-repeat center; background-size:contain;}
.lecture-item .btn-list.icon > a.survey:hover span:before{background:url(../images/content/ic-smile-color.svg)no-repeat center; background-size:contain;}
.lecture-item .btn-list.icon > a.certi:hover span:before{background:url(../images/content/ic-award-color.svg)no-repeat center; background-size:contain;}
.lecture-item .btn-list.icon > a.complete:hover span:before{background:url(../images/content/ic-check-color.svg)no-repeat center; background-size:contain;}
.type-wrap{display:flex; align-items: center; gap:8rem; margin-bottom:10rem;}
.type-wrap .type{display:flex; justify-content: center; align-items: center; padding:3rem 8rem; height:23rem; border:1px solid var(--color-point); color:var(--color-point); border-radius:4rem; line-height:1em;}
.type-wrap .type span{display:inline-block; font-size:14rem; font-weight:500; line-height:1em; }
.type-wrap em{display: inline-block; font-size: 15rem; font-weight:400; color:#666;}
.info-list{padding-top:15rem;}
.info-list.flex{display:flex; gap:10rem;}
.info-item{position:relative; display:flex; align-items: center; gap:10rem; margin-bottom:10rem;}
.info-item:last-child{margin:0;}
.info-item em{display:inline-block; font-size:15rem; font-weight:500; color:#555;}
.info-item span{display:inline-block; font-size:15rem; font-weight:400; color:#666;}
.info-item i{position:relative; top:-2rem; display:inline-block; margin-left:9rem; padding:4rem 5rem; font-size:12rem; font-weight:500; color:var(--color-point); background:rgba(8,125,194,0.07); border:1px solid rgba(8,125,194,0.07); box-sizing:border-box; line-height:1em; border-radius:3rem;}

.info-item .rate{display:flex; align-items: center; gap:5rem;}
.info-item .rate .bar{position:relative; width:200rem; height:10rem; background:#eee; border-radius:50rem; overflow:hidden;}
.info-list.icon{border-top:1px dashed #eee; box-sizing:border-box;}
.info-list.icon .info-item{margin:0;}
.info-list.icon .info-item{position:relative; padding-left:19rem;}
.info-item:before{content:''; position:absolute; top:0; left:0;}
.info-list.icon .info-item.name:before{top:1rem; width:14rem; height:12rem; background:url(../images/content/ic-teacher.svg)no-repeat center; background-size:contain;}
.info-item.view:before{width:15rem; height:15rem; background:url(../images/content/ic-view.svg)no-repeat center; background-size:contain;}
.info-item.heart:before{top:1rem; width:14rem; height:14rem; background:url(../images/content/ic-heart.svg)no-repeat center; background-size:contain;}
.info-list.icon .info-item span{display:inline-block; font-size:14rem; font-weight:500; color:#666; line-height:1em;}
#progressbar{position:absolute; top:0; left:0; height:100%; background: linear-gradient(to right, #9bb6ff, #4369e3); border-radius:50rem;}


.page-mypage .lecture-list{border:none;}
.page-mypage .lecture-item{border:1px solid #eee; padding:30rem 0 30rem 30rem; border-radius:10rem; margin-bottom:15rem;}


/* 오프라인학습내역 */
/* .lecture-list.offline{} */
.lecture-list.offline .lecture-item .cont{width:calc(100% - 270rem);}
.lecture-list.offline .title{margin-bottom:10rem;}
.lecture-list.offline .info-list{padding-top:5rem;}
.lecture-list.offline .info-item{margin:0;}
.lecture-list.offline .info-wrap{display:flex; align-items: center; gap:5rem;}
.lecture-list.offline .info-wrap .date{font-size:15rem; color:#a5aab2;}
.lecture-list.offline .info-wrap .date i{color:#555; margin-left:3rem;}
.lecture-list.offline .info-wrap .state{position:relative; top:0; left:0;} 
.lecture-list.offline .price-wrap{display: flex; align-items: center; gap: 10rem; margin-top: 12rem; font-size: 16rem; }
.lecture-list.offline .price-wrap em {font-style: normal; color: #666; font-size: 15rem; position: relative; padding-right: 11rem; }
.lecture-list.offline .price-wrap em::after {content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12rem; background-color: #ddd; }
.lecture-list.offline .price-wrap span{font-weight:600; color:#005b99; font-size: 17rem; letter-spacing: -0.5px; line-height:1.1em;}
.payment-nodata{display: block; padding: 100rem 0; text-align: center; color: #999; background: #fff; }

/* 수료증내역 */
/* .page-certi{} */
.page-certi .lecture-list.offline .info-wrap,
.review .lecture-list.offline .info-wrap,
.payment .lecture-list.offline .info-wrap{margin: 0 0 20rem; gap:8rem;}
.page-certi .lecture-list.offline .info-wrap .state,
.review .lecture-list.offline .info-wrap .state{margin:0; width:48rem;}
.page-certi .lecture-list.offline .info-wrap .date,
.review .lecture-list.offline .info-wrap .date{font-size:15rem; color:#666;}
.page-certi .lecture-list.offline .title,
.review .lecture-list.offline .title{margin:0;}

@media (max-width:1024px){
    .lecture-item .img{width:250rem; height:167rem;}
    .lecture-item .cont{width: calc(100% - 510rem);}
    .lecture-item .btn-list{width:200rem;}

	.page-mypage .offline .lecture-item .state{top:0; left:0;}
	.lecture-list.offline .lecture-item .cont{width:calc(100% - 220rem);}

	.search-filter{gap:20rem;}
	.search-filter .period{width:50%;}
	.box-datepicker{width:calc(50% - 20rem);}
	.box-datepicker .date{gap:5rem; width: calc(100% - 110rem);}
	.box-datepicker button{width:100rem;}
	.page-mypage .lecture-item{padding:20rem 0 20rem 20rem; gap:20rem;}
	.page-mypage .lecture-item .cont{width:calc(100% - 490rem);}
	.page-mypage .lecture-item .state{top:20rem; left:20rem; }
}
@media (max-width:768px){
	.search-filter{padding:20rem; flex-direction: column; gap:10rem;}
	.search-filter .period{width:100%;}
	.box-datepicker{width:100%;}
	.page-mypage .lecture-item{flex-direction: column; padding:20rem; gap:12rem;}
	.page-mypage .lecture-item .img{width:100%; display:none;}
	.page-mypage .lecture-item .cont{width:100%;}
	.page-mypage .lecture-item .btn-list{width:100%; flex-direction: row; display: grid; grid-template-columns: repeat(auto-fit, minmax(80rem, 1fr)); border-left:none; min-height:auto;}
	.page-mypage .lecture-item .btn-list > a{width:100%;}
	.page-mypage .lecture-item .state{left:unset; top:10rem; right:10rem; border-radius:5rem;}

	.lecture-list.offline .lecture-item .cont{width:100%;}
	.page-mypage.offline .lecture-item .state{position:absolute; top:10rem; left:unset; right:10rem;}

}
@media (max-width:480px){
    .area_navigation ul{gap:12rem; margin-bottom:8rem;}
    .area_navigation ul > li{font-size:10rem;}
    .area_navigation ul > li:before{left:-10rem; width:10rem; height:10rem; background-size:4rem;}
    .type-wrap{margin-bottom:4rem;}
    .box-lecture .cont .type-wrap em{font-size:10rem;}
    .box-lecture .cont .price{font-size:11rem;}
    .price .icon{margin-right:4rem;}
    .price > em{margin-left:5rem;font-size:10rem; padding:3rem;}
    .info-list{padding-top:8rem;}
    .info-list.flex{gap:6rem;}
    .info-list.icon .info-item{padding-left:13rem;}
    .info-list.icon .info-item span{font-size:10rem;}
    .info-list.icon .info-item.name:before{width:10rem; height:8rem;}
    .info-list.icon .info-item.view:before{width:10rem; height:10rem;}
    .info-list.icon .info-item.heart:before{width:10rem; height:10rem;}

	.search-filter{margin:20rem 0; padding:10rem; border-radius:6rem; gap:6rem;}
	.search-filter .period > li{height:30rem;}
	.search-filter .period > li span{font-size:12rem;}
	.box-datepicker{font-size:12rem; gap:5rem;}
	.box-datepicker .date{width:calc(100% - 65rem);}
	.box-datepicker input{height:30rem; padding:5rem; font-size:12rem;}
	.box-datepicker button{width:60rem; height:30rem; font-size:12rem;}
	.page-mypage .lecture-item{padding:10rem; border-radius:5rem;}
	.page-mypage .type-wrap{gap:4rem; margin-bottom:6rem;}
	.type-wrap .type{padding:3rem 6rem; height:18rem;}
	.type-wrap .type span{font-size:10rem;}
	.type-wrap em{font-size:10rem;}
	.lecture-item .cont h3 a{font-size:13rem;}
	.info-item{margin-bottom:5rem; gap:6rem;}
	.info-item em{width:40rem;}
	.info-item > span,
	.info-item .rate{width:calc(100% - 46rem);}
	.info-item em,
	.info-item span{font-size:11rem;}
	.info-item i{top:0rem; margin-left:4rem; font-size:10rem; padding:3rem;}
	.info-item .rate .bar{height:6rem; width:88%;}
	.page-mypage .lecture-item{gap:12rem; margin-bottom:10rem;}
	.page-mypage .lecture-item .state{font-size:10rem; padding:4rem 6rem; border-radius:3rem; width:38rem; height:18rem;}
	.page-mypage .lecture-item .btn-list{grid-template-columns:1fr; gap:5rem;}
	.lecture-item .btn-list.icon > a{display:flex; justify-content: center; align-items: center; height:30rem;}
	.lecture-item .btn-list.icon > a span{font-size:12rem; padding-left:16rem;}
	.lecture-item .btn-list.icon > a span:before{top:0; width:13rem; height:13rem;}
	

	.page-mypage .info-list.flex{flex-direction: column;}
	.lecture-list.offline .title{margin-bottom:5rem;}
	.page-mypage.offline .lecture-item .state{width:48rem;}

	.page-certi .lecture-list.offline .info-wrap,
	.review .lecture-list.offline .info-wrap,
	.payment .lecture-list.offline .info-wrap{gap:5rem; margin:0 0 12rem;}
	.page-certi .lecture-list.offline .info-wrap .state,
	.review .lecture-list.offline .info-wrap .state{width:30rem;}
	.page-certi .lecture-list.offline .info-wrap .date,
	.review .lecture-list.offline .info-wrap .date{font-size:11rem;}

	.lecture-list.offline .info-wrap .date{font-size:11rem;}
	.lecture-item .cont a .type{width:48rem; height:18rem; font-size:10rem; border-radius:3rem;}
	.lecture-item .cont .subject a{gap:5rem;}
	.lecture-item .cont .subject h3{width:calc(100% - 53rem); font-size:13rem;}
	.lecture-list.offline .price-wrap{margin-top:8rem; gap:5rem;}
	.lecture-list.offline .price-wrap em{font-size:11rem; padding-right:5rem;}
	.lecture-list.offline .price-wrap span{font-size:12rem;}

	.payment-nodata{padding:50rem 0; font-size:12rem;}
}

/* 오프라인학습내역 상세 */

.page-mypage .lecture-view .top{width:100%;}
.page-mypage .lecture-view .top .cont{width:100%;}

/* 마이페이지 */
.page-mypage.main{ background-color: var(--bg-page); padding: 40rem 0; color: var(--text-main);}
.mypage-dashboard{display:Flex; gap:20rem; margin:30rem 0;}
.user-info__wrap{width:500rem; padding:24rem; background: var(--bg-card); border-radius:var(--border-radius); border: 1px solid rgba(229, 231, 235, 1); box-shadow: var(--shadow-soft); box-sizing: border-box; }
.user-info{display:flex; align-items: center; gap:10rem; padding-bottom: 20rem; border-bottom: 1px solid #f0f0f0; margin-bottom: 20rem;}
.user-info .icon {position:relative; display: flex; justify-content: center; align-items: center; width: 60rem; height: 60rem; border-radius:50rem; background: #3CB1F3; background:linear-gradient(153deg, rgba(60, 177, 243, 1) 0%, rgba(0, 108, 210, 1) 100%); }
.user-info .icon:before{content:''; display:block; width:40rem; height:40rem; background:url(../images/common/ic-user.svg)no-repeat center; background-size:contain; }
.user-info .name { font-size: 18rem; font-weight: bold; color: var(--text-main); }
.user-info .id { font-size: 14rem; color: var(--text-sub); margin-left: auto; }
.user-info__list{display:grid; grid-template-columns: repeat(3, 1fr); gap:10rem;}
.user-info__list > li > a { display: block; padding: 10rem; background: #f8f9fa; border:1px solid #eee; border-radius:10rem; text-align: center; font-size: 14rem; font-weight:500; color: var(--text-sub); transition: var(--transition); box-sizing:border-box; }
.user-info__list > li > a span{word-break:break-word;}
.user-info__list > li > a:hover { background: #fff; color: var(--color-point); border-color: var(--color-point); }

.mypage-lecture{width:calc(100% - 520rem);}
.mypage-lecture__list{gap:10rem;}
.mypage-lecture__list > li, 
.mypage-activity__list > li { background: var(--bg-card); border-radius: var(--border-radius);  box-sizing:border-box; border-radius:10rem; border: 1px solid rgba(229, 231, 235, 1); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; transition: var(--transition); cursor: pointer; }
.mypage-lecture__list > li > a, 
.mypage-activity__list > li > a{display:block; padding:26rem 20rem;  box-sizing:border-box;}
.mypage-lecture__list > li:hover, .mypage-activity__list > li:hover { transform: translateY(-4rem); box-shadow: 0 8rem 20rem rgba(0, 0, 0, 0.1); border-color: var(--color-point); }
.mypage-lecture__list .title, .mypage-activity__list .title {display:inline-block; font-size: 14rem; color:var(--text-sub); margin-bottom:10rem; font-weight:500; word-break:break-word;}
.mypage-lecture__list .num, .mypage-activity__list .num {font-size: 32rem; font-weight: 800; line-height:1em; color: var(--text-main);}
.box-mypage { margin-top: 40rem; }
.calendar-detail{box-sizing:border-box; padding:10rem; border-radius:10rem;}

/*.box-mypage h3 { font-size: 20rem; font-weight: 700; color: var(--text-main); margin-bottom: 20rem; display: flex; align-items: center; gap: 8rem; }
.box-mypage h3::before { content: ''; display: block; width: 6rem; height: 6rem; background: var(--color-point); border-radius: 50%; }
*/
.box-calendar { display: flex; gap:40rem; padding:30rem; background: #fff; border-radius:var(--border-radius); border: 1px solid rgba(229, 231, 235, 1); box-shadow: var(--shadow-soft); overflow: hidden; }
.datepicker { flex: 1;}
.calendar-detail { width:450rem; background: #FAFAFA; border-radius: 10rem; padding: 30rem; box-sizing: border-box; border:1px dashed #eee;}
#scheduleList{position:relative; width:100%; height:100%;}
.calendar-detail_list{width:100%; height:100%; padding-left:20rem;}
.calendar-detail_list:before{content:''; position:absolute; top:5rem; left:0; width:1rem; height:100%; background:#e9e9e9; border-radius:50rem; box-sizing:border-box;}
.calendar-detail_list > li{position:relative; display: flex; align-items: flex-start; justify-content: flex-start; gap: 6rem; margin: 0 0 18rem; flex-direction: column; }
.calendar-detail_list > li:last-child{margin:0;}
.calendar-detail_list > li:before{content:''; position:absolute; top:5rem; left:-22.8rem; width: 8rem; height: 8rem; background: var(--color-point); border-radius: 50%;}
.calendar-detail_list > li .date{font-size:14rem; color:#666;}
.calendar-detail_list > li .title{display:block; font-size:16rem; color:#333; font-weight:600; line-height:1em; word-break:keep-all;}
.page-mypage .datepicker-top{padding:0;}
.page-mypage .datepicker-calendar{border:1px solid #eee;}
.page-mypage .datepicker-calendar .date{position:relative; display:flex; justify-content: center; align-items: center; cursor: pointer; }
.page-mypage .date.selected {background-color:rgb(239, 246, 255); font-weight: bold; }
.page-mypage .datepicker .date:hover {color: var(--primary-color); background: rgb(239, 246, 255); }
.page-mypage .datepicker .date-num{position:absolute; top:5rem; left:5rem;}
.page-mypage .schedule-dot {display: block; width: 5rem; height: 5rem; background-color: var(--color-point); border-radius: 50%; margin: 0 auto 0; }
.no-schedule{width:100%; height:100%; text-align: center; padding: 20rem; color: #666; font-size:15rem;}
.no-schedule span{display: flex; justify-content: center; align-items: center; width:100%; height:100%;}

@media (max-width:1024px){
	.user-info__wrap{width: 440rem;}
	.mypage-lecture{width: calc(100% - 460rem);}
	.mypage-lecture__list > li > a, .mypage-activity__list > li > a{padding: 22rem 10rem;}
	.box-calendar{gap:25rem;}
	.calendar-detail{width:45%;}
}
@media (max-width:768px){
	.mypage-dashboard{flex-direction: column;}
	.user-info .icon{width:55rem; height:55rem;}
	.user-info__wrap{width:100%;}
	.mypage-lecture{width:100%;}
	.mypage-activity__list{gap:15rem;}
	.box-calendar{padding:20rem;}
	.box-calendar .datepicker{height:300rem;}
	.calendar-detail{padding:20rem;}
	.calendar-detail_list > li .title{font-size:15rem;}
	.calendar-detail_list{padding-left:15rem;}
	.calendar-detail_list > li{margin-bottom:15rem;}
	.calendar-detail_list > li:before{left:-19rem; width:7rem; height:7rem;}
	.page-mypage .datepicker .date-num{left:2rem; top:2rem;}
}
@media (max-width:620px){
	.mypage-dashboard{margin:20rem 0 0;}
	.user-info__wrap{padding:20rem;}
	.box-mypage{margin-top:30rem;}
	.mypage-activity__list{gap:10rem;}
	.mypage-lecture__list > li > a, .mypage-activity__list > li > a{padding:15rem 10rem;}
	.mypage-lecture__list .num, .mypage-activity__list .num{font-size:28rem;}
	.box-calendar{gap:15rem; flex-direction: column;}
	.box-calendar .datepicker{flex:initial;}
	.calendar-detail{width:100%; height: 127rem; overflow-y:scroll;}
	.calendar-detail::-webkit-scrollbar{width:4rem;}
	.calendar-detail_list > li:before{left:-18rem;}
}
@media (max-width:480px){
	.mypage-dashboard{margin:12rem 0 0; gap:10rem;}
	.user-info__wrap{padding:12rem 14rem 14rem;}
	.user-info .icon{width:40rem; height:40rem;}
	.user-info .icon:before{width:27rem; height:27rem;}
	.user-info{margin-bottom:10rem; padding-bottom:10rem; gap:7rem;}
	.user-info .id{font-size:12rem;}
	.user-info .name{font-size:14rem;}
	.user-info__list{grid-template-columns: repeat(2, 1fr); gap:6rem;}
	.user-info__list > li > a{font-size:11rem; border-radius:6rem; padding:7rem;}
	.mypage-lecture__list{grid-template-columns: repeat(2, 1fr); gap:6rem;}
	.mypage-lecture__list > li, .mypage-activity__list > li{border-radius:8rem;}
	.mypage-lecture__list > li > a, .mypage-activity__list > li > a{padding:8rem 10rem 10rem;}
	.mypage-lecture__list .title, .mypage-activity__list .title{font-size:11rem; margin-bottom:5rem;}
	.mypage-lecture__list .num, .mypage-activity__list .num{font-size:20rem;}
	.page-mypage .box-title{padding-bottom:0;}
	.mypage-activity__list{gap:6rem;}
	.box-calendar{padding:10rem; gap:6rem;}
	.box-calendar .datepicker{height:250rem;}
	.calendar-detail{padding:10rem 12rem; border-radius:8rem; height:90rem; overflow-y:scroll;}
	.no-schedule span{font-size:12rem;}
	.calendar-detail_list{padding-left:10rem;}
	.calendar-detail_list > li{gap:4rem; margin-bottom:8rem;}
	.calendar-detail_list > li:before{width:6px; height:6px; left:-11.8rem;}
	.calendar-detail_list > li .date{font-size:10rem;}
	.calendar-detail_list > li .title{font-size:12rem;}
	.box-mypage{margin-top:20rem;}
}

/* 학습하기 
.area-classroom{width:100%; height:100vh; display:flex;}
.classroom-player{position:relative; width:calc(100% - 500rem); height:100vh; background:#111;}
.classroom-player__header{position:absolute; top:0; left:0; display:flex; align-items: center; gap:10rem; width:100%; height:60rem; padding:10rem; box-sizing:border-box; background:linear-gradient(rgb(20, 21, 23) 0%, rgba(20, 21, 23, 0) 100%); z-index:2;}
.classroom-player__header button{display:flex; justify-content: center; align-items: center;  width:40rem; height:40rem; background:transparent;}
.classroom-player__header button svg{height:25rem;}
.classroom-header__title{font-size:20rem; color:#fff; font-weight:500;}
.player{display: flex; flex-direction: column; width:100%; height:100%;}
.player video{width:100%; height:calc(100% - 60rem);}
.player-control{display:flex; align-items: center; justify-content: space-between; width:100%; height:60rem; padding:10rem; box-sizing:border-box; background:#222;}
.player-control__quality-item{cursor:pointer;}

.classroom-sidebar{width:500rem; height:100%;}
.classroom-sidebar .tabs{position:fixed; top:0; right:0; display:block; margin-bottom:0; width:80rem; height:100%; border-left:1px solid #eee; box-sizing:border-box;}
.classroom-sidebar .tabs > li{display: flex; justify-content: center; align-items: center; width:100%; height:80rem; padding:10rem; border:none; border-radius:0; font-size:15rem;}
.classroom-sidebar .tab_container{width:calc(100% - 80rem); height:100%; box-sizing:border-box;}
.classroom-sidebar .tab_content{height:100%; overflow-y:auto;}
.classroom-sidebar .tab_container .top{padding:20rem; box-sizing:border-box;}
.classroom-sidebar .tab_container .title{display:block; margin-bottom:10rem;}
.chapter-list{display:block; border-top:1px solid #eee;}
.chapter-list > li{position:relative; display:block; border-bottom:1px solid #eee; box-sizing:border-box;}
.chapter-list > li:before{content:''; position:absolute; top:0; width:3rem; height:100%; background:var(--color-point); opacity:0;}
.chapter-list > li > a{padding:20rem; display:flex; align-items: center; justify-content: space-between;}
.chapter-list > li > a .chapter-info{}
.chapter-list > li > a .chapter-info .subject{display:flex; gap:5rem;}
.chapter-list > li > a .chapter-info .subject > *{font-size:15rem; font-weight:500; color:#222; line-height:1.2em; word-break:keep-all;}
.chapter-list > li > a .chapter-info .time{display:inline-block; margin-top:7rem; font-size:14rem; font-weight:300; color:#999; line-height:1em;}
.chapter-list > li > a .chapter-check{display:flex; justify-content: center; align-items: center; width:38rem; height:38rem; background:#eee; border-radius:8rem;}
.chapter-list > li > a .chapter-check svg{height:28rem;}
.chapter-list > li > a .chapter-check svg path{fill:#fff;}
.chapter-list > li:hover{background:#f9f9f9;}
.chapter-list > li.on{background:#f0faff;}
.chapter-list > li.on:before{opacity:1;}
.chapter-list > li.on .chapter-check{background:var(--color-point);}

.classroom-review{position:relative; display:block; width:100%; height:100%; padding:20rem;}
.review-wrap{width:100%;}
.review-box{border:1px solid #eee; box-sizing:border-box; border-radius:10rem; padding:15rem; margin-top:15rem; text-align:center;}
.review-box .rating{margin:15rem 0 0;}
.classroom-review .review-wrap textarea{width:100%; height:500rem; border:none; border-radius:10rem; box-sizing:border-box; }
.classroom-review button.btn_ok,
.classroom-review button.btn-list{position:absolute; left:20rem; right:20rem; bottom:20rem; width:auto;}
.classroom-review .review-item{padding:12rem; border-radius:10rem; border:1px solid #eee;}

.qna-form-item{margin:0 0 15rem;}
.qna-form-item .title{margin:0 0 5rem;}
.qna-form-item .title h3{font-size:15rem; font-weight:600; color:#222;}
.qna-form-item .cont input[type="text"]{height:40rem; border:1px solid #eee; box-sizing:border-box; border-radius:5rem; padding:10rem; font-size:15rem;}
.qna-form-item .cont textarea{width:100%; height:400rem; padding:10rem; border:1px solid #eee; box-sizing:border-box; border-radius:5rem; font-size:15rem;}

.qna-detail{}
.classroom-sidebar .tab_container .qna-detail .title{display:block; margin:0; font-size:18rem; font-weight:600; color:#222; line-height:1.2em; word-break:keep-all;}
.qna-cont{display:block; margin-top:10rem; padding-top:10rem; border-top:1px solid #eee; box-sizing:border-box;}
.qna-cont p{display:block; font-size:15rem; font-weight:400; color:#444; line-height:1.5em; word-break:keep-all;}
.qna-answer{display:block; margin:20rem 0 0; padding:15rem; background:#f1f4f8; border-radius:10rem;}
.qna-answer h3{display:block; margin-bottom:10rem;}
.answer-cont{display:block; margin-top:10rem; box-sizing:border-box;}
.answer-cont p{display:block; font-size:15rem; font-weight:400; color:#444; line-height:1.5em; word-break:keep-all;}


@media (max-width:1024px){
    .area-classroom{display:block; height:auto;}
    .classroom-player{width:100%; height:auto;}
    .classroom-sidebar{width:100%; height:auto;}
    .classroom-sidebar .tabs{position:relative; top:0; left:0; width:100%; height:60rem; display:flex; border-left:none; border-bottom:1px solid #eee;}
    .classroom-sidebar .tabs > li{height:100%;}
    .classroom-sidebar .tab_container{width:100%;}

}
*/


/* 학습하기 */
.area-classroom{position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; display: flex; overflow: hidden; z-index: 10000; background: #fff;}
.classroom-player{position:relative; width:calc(100% - 500rem); height:100vh; background: #000; display: flex; flex-direction: column;}
.classroom-player__header{position:absolute; top:0; left:0; display:flex; align-items: center; gap:10rem; width:100%; height:60rem; padding:10rem; box-sizing:border-box; background:linear-gradient(rgb(20, 21, 23) 0%, rgba(20, 21, 23, 0) 100%); z-index:2;}
.classroom-player__header button{display:flex; justify-content: center; align-items: center;  width:40rem; height:40rem; background:transparent;}
.classroom-player__header button svg{height:25rem;}
.classroom-header__title{font-size:20rem; color:#fff; font-weight:500;}
.classroom-player .player{display: flex; flex-direction: column; width:100%; height:100%; flex: 1; width: 100%; height: 100%; position: relative;}
.classroom-player .player video{width:100%; height:calc(100% - 60rem);}
.classroom-player .player .no-video{color:#fff; display:flex; align-items:center; justify-content:center; height:100%; font-size:15rem;}
.player-control{display:flex; align-items: center; justify-content: space-between; width:100%; height:60rem; padding:10rem 15rem; box-sizing:border-box; background:#222;}
.player-control__btn{display:flex; align-items: center; gap:20rem;}
.player-control__btn button{position:relative; display:block;  box-sizing:border-box; background:transparent;}
.player-control__btn button span{position:relative; color:#fff; font-size:14rem; font-weight:400;}
.player-control__btn button span:before{content:''; position:absolute; top:1px; width:13rem; height:13rem; background:url(../images/content/ic-next-wt.svg)no-repeat center; background-size:contain;}
.player-control__btn button.btn-prev span{padding-left:20rem;}
.player-control__btn button.btn-prev span:before{left:0; transform:rotate(-180deg);}
.player-control__btn button.btn-next span{padding-right:20rem;}
.player-control__btn button.btn-next span:before{right:0;}
.player-control__btn button.btn-next:before{content:''; position:absolute; top:2rem; left:-10rem; width:1px; height:12rem; background:rgba(255,255,255,0.2); }

.player-control__quality-item{cursor:pointer;}
.player-control__quality-item span{position:relative; padding-left:20rem; color:#fff; font-size:14rem; font-weight:400;}
.player-control__quality-item span:before{content:''; position:absolute; top:1px; left:0; width:15rem; height:15rem; background:url(../images/content/ic-fullscreen.svg)no-repeat center; background-size:contain;}


.classroom-sidebar { width: 500rem; height: 100vh; background: #fff; display: flex; }
.classroom-sidebar .tabs{position:fixed; top:0; right:0; display:block; margin-bottom:0; width:80rem; height:100%; gap:0; border-left:1px solid #eee; box-sizing:border-box;}
.classroom-sidebar .tabs > li{display: flex; flex-direction: column; justify-content: center; align-items: center; width:100%; height:80rem; padding:10rem; border:none; border-radius:0; font-size:15rem;}
.classroom-sidebar .tabs > li .icon{display:flex; justify-content: center; align-items: center; width:30rem; height:30rem;}
.classroom-sidebar .tabs > li .icon svg{width:25rem; height:25rem;}
.classroom-sidebar .tabs > li em{display:inline-block; margin-top:5rem; font-size:12rem; color:#555;}
.classroom-sidebar .tabs > li.active{background-color:#fff;}
.classroom-sidebar .tabs > li.active .icon svg path{stroke:var(--color-point);}
.classroom-sidebar .tabs > li.active em{font-weight:600; color:var(--color-point);}
.classroom-sidebar .tabs li.active { background: #f0f7ff; color: #0076fd; }
.classroom-sidebar .tab_container{width:calc(100% - 80rem); height:100%; box-sizing:border-box;}
.classroom-sidebar .tab_content{height:100%; overflow-y:auto;}
.classroom-sidebar .tab_container .top{padding:20rem; box-sizing:border-box;}
.classroom-sidebar .tab_container .title{display:inline-block; margin-bottom:20rem; font-size:17rem; font-weight:600; color:#222;}
.classroom-sidebar .tab_container .course-title{display:block; font-size:20rem; font-weight:600; color:#222; line-height:1.3em; word-break:break-word;}
.classroom-sidebar .tab_container .date{display:block; margin-top:10rem; font-size:15rem; font-weight:400; color:#888; line-height:1em;}
.classroom-sidebar .info-item  em {font-size:15rem; }
.classroom-sidebar .info-item .rate{flex:1; font-size:15rem;}
.classroom-sidebar .info-item .rate .bar{width:calc(100% - 40rem);}

.chapter-list{display:block; border-top:1px solid #eee;}
.chapter-list > li{position:relative; display:block; border-bottom:1px solid #eee; box-sizing:border-box;}
.chapter-list > li:before{content:''; position:absolute; top:0; width:3rem; height:100%; background:var(--color-point); opacity:0;}
.chapter-list > li > a{padding:20rem; display:flex; align-items: center; justify-content: space-between;}
/* .chapter-list > li > a .chapter-info{} */
.chapter-list > li > a .chapter-info .subject{display:flex; gap:5rem;}
.chapter-list > li > a .chapter-info .subject > *{font-size:15rem; font-weight:500; color:#222; line-height:1.2em; word-break:keep-all;}
.chapter-list > li > a .chapter-info .time{display:inline-block; margin-top:7rem; font-size:14rem; font-weight:300; color:#999; line-height:1em;}
.chapter-list > li > a .chapter-check{display:flex; justify-content: center; align-items: center; width:38rem; height:38rem; background:#eee; border-radius:8rem;}
.chapter-list > li > a .chapter-check svg{height:28rem;}
.chapter-list > li > a .chapter-check svg path{fill:#fff;}
.chapter-list > li:hover{background:#f9f9f9;}
.chapter-list > li.on{background:#f0faff;}
.chapter-list > li.on:before{opacity:1;}
.chapter-list > li.on .chapter-check{background:var(--color-point);}
.classroom-review{position:relative; display:block; width:100%; height:100%; padding:20rem; box-sizing:border-box;}
.review-wrap{width:100%;}
.review-box{border:1px solid #eee; box-sizing:border-box; border-radius:10rem; padding:15rem; margin-bottom:15rem; text-align:center;}
.review-box .rating{margin:15rem 0 0;}
/* .classroom-review .box-textarea{} */
.classroom-review .box-textarea textarea{display:block; padding:15rem; width:100%; height:500rem; border:1px solid #eee;  border-radius:10rem; box-sizing:border-box; font-size:15rem; outline:none;}
.classroom-review button.btn_ok,
.classroom-review button.btn-list,
.classroom-qna .basic-btn{position:absolute; left:20rem; right:20rem; bottom:20rem; width:auto;}
.classroom-review .review-item{position:relative; padding:15rem; border-radius:12rem; border:1px solid #eee; margin:0 0 10rem;}
.classroom-review .review-item .info{align-items: flex-start; gap: 8rem; flex-direction: column;}
.classroom-review .review-item .info .user{display:flex; align-items: center; gap:16rem; font-size:14rem; color:#888;}
.classroom-review .review-item .info .user .date{position:relative; margin-top:0; font-size:14rem;}
.classroom-review .review-item .info .user .date:Before{content:''; position:absolute; top:1px; left:-8rem; width:1px; height:10rem; background:#ddd;}
.classroom-review .review-item:last-child{margin:0;}
.classroom-review .review-item p{margin-top:12rem;}
.classroom-review .review-item .btn-delete{position:absolute; top:10rem; right:10rem; width:20rem; height:20rem; vertical-align:middle; background:url(../images/common/ic-close.svg) no-repeat center; background-size:10rem auto; text-indent:-9999px; font-size:0;}

/* 학습질문 */
.classroom-qna{position:relative; display:block; width:100%; height:100%; padding:20rem; box-sizing:border-box;}
.classroom-sidebar .tab_container .qna-form-item{position:relative; margin:0 0 15rem;}
.classroom-sidebar .tab_container .qna-form-item:last-child{margin:0;}
.classroom-sidebar .tab_container .qna-form-item .title{margin:0 0 5rem;}
.classroom-sidebar .tab_container .qna-form-item .title h3{font-size:15rem; font-weight:600; color:#222;}
.classroom-sidebar .tab_container .qna-form-item .cont input[type="text"]{height:40rem; border:1px solid #eee; box-sizing:border-box; border-radius:5rem; padding:10rem; font-size:15rem;}
.classroom-sidebar .tab_container .qna-form-item .cont textarea{width:100%; height:400rem; padding:10rem; border:1px solid #eee; box-sizing:border-box; border-radius:5rem; font-size:15rem;}
.qna-detail{ position: relative; }
.classroom-sidebar .tab_container .qna-detail .title{display:block; margin:0; font-size:18rem; font-weight:600; color:#222; line-height:1.2em; word-break:keep-all;}
.qna-cont{display:block; margin-top:10rem; padding-top:10rem; border-top:1px solid #eee; box-sizing:border-box;}
.qna-cont p{display:block; font-size:15rem; font-weight:400; color:#444; line-height:1.5em; word-break:keep-all;}
.qna-answer{display:block; margin:20rem 0 0; padding:15rem; background:#f1f4f8; border: 1px solid #e5e7eb; border-radius:10rem;}
.qna-answer h3{display:block; margin-bottom:10rem; font-size: 16rem; font-weight: 700; color: var(--color-point);}
.classroom-sidebar .tab_container .qna-answer .info{ justify-content: flex-start; gap: 10rem; }
.classroom-sidebar .tab_container .qna-answer .info .date { margin:0;}
.answer-cont{display:block; margin-top:10rem; box-sizing:border-box;}
.answer-cont p{display:block; font-size:15rem; font-weight:400; color:#444; line-height:1.5em; word-break:keep-all;}
.classroom-qna .qna-detail .info { display: flex; justify-content: space-between; align-items: center; position: relative; }
.classroom-qna .qna-detail .info .user-data { display: flex; align-items: center; gap: 10rem; font-size: 14rem; color: #777; }
.classroom-sidebar .tab_container .qna-detail .info .user-data .date { font-style: normal; position: relative; padding-left: 11rem; margin:0;}
.classroom-qna .qna-detail .info .user-data .date::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 10rem; background: #ddd; }
.more-menu {display: inline-block; }
.more-menu__trigger { width:30rem; height:30rem; background: transparent; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.2s; }
.more-menu__trigger svg{height:20rem;}
.more-menu__trigger:hover, .more-menu.active .more-menu__trigger { background-color: #f5f5f5; }
.more-menu__layer { display: none; position: absolute; top: 100%; right: 0; margin-top: 5rem; min-width: 120rem; background: #fff; border: 1px solid #eee; border-radius: 12rem; box-shadow: 0 4rem 15rem rgba(0,0,0,0.1); z-index: 100; padding: 6rem; overflow: hidden; }
.more-menu.active .more-menu__layer { display: block; animation: fadeIn 0.2s ease; }
.more-menu__list { list-style: none; padding: 0; margin: 0; }
.more-menu__list li button { width: 100%; display: flex; align-items: center; gap: 8rem; padding: 10rem 12rem; border: none; background: #fff; border-radius: 6rem; cursor: pointer; font-size: 14rem; color: #333; font-weight: 500; transition: all 0.2s; }
.more-menu__list li button:hover { background-color: #f3f5f7; color: var(--color-point); }
.more-menu__list li button .icon { display: flex; align-items: center; width: 18rem; height: 18rem; }
.more-menu__list li button .icon svg { width: 100%; height: 100%; stroke: currentColor; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-5rem); } to { opacity: 1; transform: translateY(0); } }
.classroom-qna .qna-list { display: flex; flex-direction: column; gap: 10rem; border-top: none;}
.classroom-qna .qna-item { border: 1px solid #eee; border-radius: 12rem; background: #fff; box-shadow: 0 4rem 10rem rgba(0,0,0,0.03); overflow: hidden; transition: all 0.3s ease; }
.classroom-qna .qna-item:hover { /*transform: translateY(-3rem); */ box-shadow: 0 8rem 20rem rgba(0,0,0,0.08); border-color: var(--color-point); }
.classroom-qna .qna-item a { display: block; padding:15rem; height: 100%; box-sizing: border-box; }
.classroom-qna .qna-item i { display: inline-block; padding: 4rem 10rem; background: #f3f5f7; color: #555; font-size: 12rem; font-weight: 600; border-radius: 4rem; margin-bottom: 12rem; font-style: normal; }
.classroom-qna .qna-item i.complete{background-color:var(--color-point); color:#fff;}
.classroom-qna .qna-title { font-size: 16rem; font-weight: 700; color: #222; margin-bottom: 15rem; line-height: 1.4; display: -webkit-box; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; white-space: normal; }
.classroom-qna .qna-item .info { display: flex; align-items: center; gap: 10rem; padding-top: 15rem; border-top: 1px dashed #eee; font-size: 14rem; color:#222;}
.classroom-qna .qna-item .info .date {position: relative; padding-left: 11rem; font-style: normal; margin:0; font-size:14rem;}
.classroom-qna .qna-item .info .date::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 10rem; background: #ddd; }
.classroom-qna .qna-list .no-data{padding:40rem 20rem; text-align:center; color:#999;}


@media (max-width:1024px){
    .area-classroom{position:relative; display:block; height:auto; width:100%;}
    .classroom-player{width:100%; height:auto;}
    .classroom-sidebar{width:100%; height:auto; display:block;}
    .classroom-sidebar .tabs{position:relative; top:0; left:0; width:100%; height:60rem; display:flex; border-left:none; border-bottom:1px solid #eee;}
    .classroom-sidebar .tabs > li{height:100%; flex-direction: row; flex: 1; gap:3rem;}
    .classroom-sidebar .tabs > li .icon{width:20rem; height:20rem;}
    .classroom-sidebar .tabs > li .icon svg{width:20rem; height:20rem;}
    .classroom-sidebar .tabs > li em{margin:0;}
    .classroom-sidebar .tab_container{width:100%;}

    .classroom-review button.btn_ok, 
    .classroom-review button.btn-list, 
    .classroom-qna .basic-btn{position:relative; left:0; right:0; bottom:0; width:100%; margin:20rem auto 0;}

}

@media (max-width:768px){
	.review-box .rating{margin-top:10rem;}
	.review-box .rating label{width:35rem;}
}
@media (max-width:480px){
    .classroom-player__header{gap:5rem; height:40rem; padding:8rem;}
    .classroom-player__header button{width:20rem; height:20rem;}
    .classroom-player__header button svg{height:20rem;}
    .classroom-header__title{font-size:13rem;}
	.classroom-player .player .no-video{font-size:12rem;}
    .player-control{height:35rem; padding:8rem;}
    .player-control__btn button span:before{width:11rem; height:11rem;}
    .player-control__btn button span{font-size:11rem;}
    .player-control__quality-item span:before{width:12rem; height:12rem;}
    .player-control__quality-item span{font-size:11rem;}
    .classroom-sidebar .tabs{height:40rem;}
    .classroom-sidebar .tabs > li .icon,
    .classroom-sidebar .tabs > li .icon svg{width:15rem; height:15rem;}
    .classroom-sidebar .tabs > li em{font-size:11rem;}
    .classroom-sidebar .tab_container .top{padding:10rem;}
    .classroom-sidebar .tab_container .title{font-size:12rem; margin-bottom:10rem;}
    .classroom-sidebar .tab_container .course-title{font-size:15rem;}
    .classroom-sidebar .tab_container .date{margin-top:5rem; font-size:12rem;}
    .classroom-sidebar .info-item em{font-size:12rem;}
    .classroom-sidebar .info-item .rate{font-size:12rem;}
    .chapter-list > li:before{width:2rem;}
    .chapter-list > li > a{padding:10rem;}
    .chapter-list > li > a .chapter-info .subject > *{font-size:12rem; line-height:1.1em;}
    .chapter-list > li > a .chapter-info .time{margin-top:0rem; font-size:11rem;}
    .chapter-list > li > a .chapter-check{width:25rem; height:25rem; border-radius:5rem;}
    .chapter-list > li > a .chapter-check svg{height:18rem;}

    .classroom-review{padding:10rem;}
    .review-box{padding:10rem; border-radius:6rem; margin-bottom:8rem;}
    .review-box h4{font-size:13rem;}
    .review-box .rating{margin:7rem 0 0;}
	.review-box .rating label{width:28rem; height:28rem;}
    .classroom-review .box-textarea textarea{padding:10rem; height:200rem; border-radius:6rem; font-size:12rem;}
    .classroom-review button.btn_ok, .classroom-review button.btn-list, .classroom-qna .basic-btn{margin:15rem auto 0;}
    .classroom-review .review-item{padding:10rem; border-radius:8rem;}
	.classroom-review .review-item .info .user{gap:12rem;}
	.classroom-review .review-item .info .user,
	.classroom-review .review-item .info .user .date{font-size:11rem;}
	.classroom-review .review-item .info .user .date:Before{left:-7rem; height:9rem;}
    .classroom-review .review-item p{margin-top:6rem;}
    .classroom-review .review-item .btn-delete{width:12rem; height:12rem; top:8rem; right:8rem; background-size:8rem auto;}

    .classroom-qna{padding:10rem;}
    .classroom-qna .qna-list{gap:8rem;}
	.classroom-qna .qna-list .no-data{font-size:12rem;}
    .classroom-qna .qna-item{border-radius:8rem;}
    .classroom-qna .qna-item a{padding:10rem;}
    .classroom-qna .qna-item i{padding:3rem 6rem; font-size:10rem; margin-bottom:6rem;}
    .classroom-qna .qna-title{font-size:13rem; margin-bottom:10rem;}
    .classroom-qna .qna-item .info{padding-top:10rem; font-size:12rem;}
    .classroom-sidebar .tab_container  .qna-item .info .date{margin-top:0;}

    .classroom-sidebar .tab_container .qna-form-item{margin:0 0 10rem;}
    .classroom-sidebar .tab_container .qna-form-item .title h3{font-size:12rem;}
    .classroom-sidebar .tab_container .qna-form-item .cont input[type="text"]{height:30rem; font-size:12rem; padding:6rem;}
    .classroom-sidebar .tab_container .qna-form-item .cont textarea{height:200rem; font-size:12rem; padding:6rem;}

    .classroom-sidebar .tab_container .qna-detail .title{font-size:14rem; margin-bottom:3rem;}
    .classroom-qna .qna-detail .info .user-data{font-size:12rem; gap:5rem;}
    .classroom-sidebar .tab_container .qna-detail .info .user-data .date{padding-left:7rem;}
    .more-menu__trigger{width:20rem; height:20rem;}
    .more-menu__trigger svg{height:15rem;}
    .more-menu__layer{min-width:70rem; border-radius:6rem; padding:4rem;}
    .more-menu__list li button{padding:5rem; gap:4rem; border-radius:4rem;}
    .more-menu__list li button .icon{width:12rem; height:12rem;}
    .more-menu__list li button span{font-size:11rem;}
    .qna-cont p{font-size:12rem; line-height:1.4em;}
    .qna-answer{padding:10rem; margin-top:12rem; border-radius:8rem;}
    .qna-answer h3{font-size:13rem; margin-bottom:6rem;}
    .classroom-sidebar .tab_container .qna-answer .info{gap:5rem;}
    .classroom-qna .qna-detail .info{font-size:12rem;}
    .answer-cont{margin-top:5rem;}
    .answer-cont p{font-size:12rem; line-height:1.3em;}

}


/* 온라인 직무교육 */
/* .box-lecture{} */
.box-lecture .lecture-list{margin-bottom:50rem;}
.box-lecture .lecture-list .no-data{display:flex; justify-content: center; align-items: center; height:350rem; text-align:center; font-size:15rem; color:#666; line-height:1em;}
.box-lecture .top{justify-content: space-between; align-items: flex-end; margin-bottom:10rem;}
.box-category{display:flex; justify-content: space-between; align-items: center;}
.total{font-size:15rem; font-weight:400; color:#222; line-height:1em;}
.total i{font-weight:600;}
.filter{display:flex; gap:6rem;}
.filter select{width:120rem; min-height:35rem; border-radius:3rem; border-color:#eee;}
.category_list{display:flex; height:35rem; border:1px solid #eee; box-sizing:border-box; border-radius:3rem;}
.category_list a{display:flex; width:35rem; height:100%; box-sizing:border-box;}
.category_list a.type01{background:url(../images/content/ic-list-type01.svg)no-repeat center; background-size:14rem auto; border-left:1px solid #eee;}
.category_list a.type02{background:url(../images/content/ic-list-type02.svg)no-repeat center; background-size:14rem auto;}
.category_list a.type01.on{background:url(../images/content/ic-list-type01-on.svg)no-repeat center; background-size:14rem auto; }
.category_list a.type02.on{background:url(../images/content/ic-list-type02-on.svg)no-repeat center; background-size:14rem auto; }
.price{display:flex; align-items: center;}
.lecture-list__gallery{display:grid; gap:40rem 24rem; grid-template-columns: 1fr 1fr 1fr 1fr;}
.lecture-list__gallery > li{width:100%;}
.lecture-list__gallery > li .img{position:relative; display: block; width:100%; height:200rem; background:#eee; border-radius:10rem; overflow:hidden;}
.lecture-list__gallery > li .img img{width:100%; transform:scale(1); transition:all 0.5s ease;}
.lecture-list__gallery > li .img a:hover img{transform:scale(1.05); }
.lecture-list__gallery > li .img a{display:flex; justify-content: center; align-items: center; width:100%; height:100%;}
.lecture-list__gallery > li .cont{margin-top:15rem;}
/* .lecture-list__gallery > li .cont .type-wrap em{} */
.lecture-list__gallery > li .cont h3{display:block; word-break: keep-all;}
.lecture-list__gallery > li .cont h3 a{display:block; font-size:18rem; font-weight:600; word-break:keep-all;}
.lecture-list__gallery > li .cont .price{margin:10rem 0 0;}
.lecture-list__gallery > li .cont .info-list.icon{border-top:0;}
.lecture-list__gallery > li .btn-list{display:none;}

@media (max-width:1300px){
    .lecture-list__gallery > li .img{height:170rem;}

}
@media (max-width:1024px){
    .lecture-list__gallery{grid-template-columns: 1fr 1fr 1fr; gap:35rem 20rem;}
    .lecture-list__gallery > li .img{height:200rem;}

}
@media (max-width:768px){
    .category_list{display:none;}
    #listView{display:none !important;}
    .lecture-list__gallery{display:grid !important; grid-template-columns: 1fr 1fr;}
	.box-lecture .lecture-list .no-data{height:200rem; font-size:12rem;}


}
@media (max-width:620px){
    .lecture-list__gallery > li .img{height:178rem;}
}
@media (max-width:540px){
    .lecture-list__gallery{gap:30rem 15rem;}
}
@media (max-width:480px){
    .total{font-size:11rem;}
    .filter select{width:80rem; min-width:80rem; min-height:25rem; padding-left:5rem; background-position:90% 50% !important; font-size:11rem;}
	.box-lecture .lecture-list{margin-bottom:20rem;}
    .lecture-list__gallery{gap:20rem 10rem;}
    .lecture-list__gallery > li .img{height: 107rem; border-radius: 7rem;}
    .lecture-list__gallery > li .cont{margin-top:10rem;}
    .lecture-list__gallery > li .cont h3{line-height:1em;}
    .lecture-list__gallery > li .cont h3 a{font-size:12rem; line-height:1.2em;}
    .lecture-list__gallery > li .cont .price{margin:5rem 0 0;}
}

/* 직무교육 상세 */
/* .lecture-view{} */
.lecture-view .top{display:flex; gap:50rem; margin-bottom:40rem;}
.lecture-view .top .cont{width:calc(100% - 450rem);}
.lecture-view .top .cont .type-wrap{margin-bottom:8rem; justify-content: space-between;}
.lecture-view .top .cont .type-wrap em{display: inline-block; font-size: 15rem; font-weight:500; color: var(--color-point);}
.lecture-view .top .cont .type-wrap .btn-heart{width:22rem; height:22rem; background:transparent;}
.lecture-view .top .cont .type-wrap .btn-heart svg{width:100%; height:100%;}
.lecture-view .top .cont .type-wrap .btn-heart svg path{transition:all 0.3s ease; fill:transparent; stroke:#aaa;}
.lecture-view .top .cont .type-wrap .btn-heart:hover svg path,
.lecture-view .top .cont .type-wrap .btn-heart.on svg path{fill:#fb1b49; stroke:#fb1b49;}
/* .type-wrap span{} */
/* .type-wrap span.possible{} */
.type-wrap .box-state{display:flex; justify-content: center; align-items: center; width:64rem; height:24rem; background:var(--color-point04); border-radius:3rem;}
.type-wrap .box-state span{font-size:14rem; font-weight:500; color:#fff;}
.type-wrap .box-state.closed{background:#999;}
.type-wrap .box-state.disable{background:#ea2b2b;}
.lecture-view .top .cont h3{display:block; font-size:26rem; font-weight:600; color:#222; line-height:1.2em; word-break:keep-all;}
.lecture-view .top .cont p{display:block; margin-top:10rem; font-size:16rem; font-weight:400; color:#555; line-height:1.5em; word-break:keep-all;}
.lecture-view .top .cont .list-info{margin-top:18rem; padding:15rem 0 0; border-top:1px dashed #eee; box-sizing:border-box;}
.list-info.mobile{display:none;}
.list-info > li{position:relative; display:flex; align-items: center; gap:5rem; margin-bottom:12rem; padding-left:8rem;}
.list-info > li:last-child{margin:0;}
.lecture-view .top .cont .list-info > li:before{content:''; position:absolute; top:7rem; left:0; width:2px; height:2px; background:#aaa; border-radius:50rem;}
.list-info > li em{width:80rem; font-size:15rem; font-weight:400; color:#777; line-height:1em;}
.list-info > li span{display:inline-block; font-size:15rem; font-weight:400; color:#222; line-height:1em; word-break:keep-all;}
.score-wrap{display:flex; align-items: center; gap:5rem;}
.score-wrap span{position:relative; top:1rem; font-size:15rem; font-weight:600; color:#222;}
.lecture-view .top .btn-list.mobile{display:none; margin-top:20rem;}
.lecture-view .top .img{width:400rem; height:250rem; background:#eee; border-radius:10rem; box-sizing:border-box; overflow:hidden;}
.lecture-view .top .img img{width:100%; height:100%; object-fit: cover;}
.lecture-view .bottom{position:relative; display:flex; gap:50rem;}
.lecture-detail{width:calc(100% - 450rem);}
.lecture-nav{position:static; border-bottom: 1px solid #e9e9e9; box-sizing:border-box; margin:0 0 30rem; transition:all 0.3s ease; background:#fff;}
.lecture-nav .inr{margin:0;}
.lecture-nav ul{display:flex; }
/* .lecture-nav ul > li{} */
.lecture-nav ul > li a{position:relative; display:block; padding:15rem; font-size:17rem; font-weight:400; color:#888; line-height:1em; box-sizing:border-box;}
.lecture-nav ul > li a:before{content: ''; display: inline-block; position: absolute; bottom:-3rem; left: 0; width:100%; height: 0; background-color: var(--color-point); z-index:2;}
.lecture-nav ul > li a > i{position:relative; top:-2.5rem; display:inline-flex; justify-content: center; align-items: center; margin-left:5rem; width:auto; height:20rem; padding: 2rem 8rem; font-size:13rem; font-weight:600; color:#fff; line-height:1em; background:var(--color-point); border-radius:50rem; box-sizing:border-box;}
.lecture-nav ul > li a.active{font-weight:700; color:#222;}
.lecture-nav ul > li a.active:before{height:2rem;}
.lecture-nav.fixed{ position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: #fff;}
.lecture-nav.fixed .inr{margin:0 auto;}
.lecture-nav.fixed .inr ul > li > a{padding:20rem 15rem;}
.lecture-view aside{ width:400rem;}
.lecture-summary__wrap{ position: sticky; top: 100px; width:100%;}
.lecture-summary{position:relative; width:100%; border: 1px solid #e9e9e9; box-sizing: border-box; border-radius: 10px;  padding: 25px 20px 20px; box-shadow: 0px 5px 9px 1px rgba(0, 0, 0, 0.04); overflow:hidden;}
.lecture-summary .box-state{position:absolute; top:0; left:0; display:flex; justify-content: center; align-items: center; width:100%; height:36rem; background:var(--color-point04);}
.lecture-summary .box-state span{font-size:15rem; font-weight:500; color:#fff;}
.lecture-summary .box-state.closed{background:#999;}
.lecture-summary .box-state.disable{background:#ea2b2b;}
.lecture-summary .list-info{margin-top:28rem;}
.lecture-summary .list-info > li{padding:0;}
.lecture-summary .list-info > li em{width:70rem;}
.lecture-summary .box-price{display:flex; justify-content: space-between; align-items: center; margin:15rem 0 0; padding:20rem 0; border-top: 1px solid #eee; border-bottom:0px solid #eee; box-sizing:border-box;}
.lecture-summary .box-price .title{ font-size:15rem; font-weight:600; color:#222; line-height:1em;}
.lecture-summary .box-price .price{font-size:18rem; font-weight:600; color:var(--color-point);}
.lecture-summary .btn-list{gap:10rem; border-top: 1px solid #eee; padding-top:15rem;}
.btn-apply{margin-top:12rem;}
.btn-apply a{display:flex; justify-content: center; align-items: center; width:100%; height:54rem; background:var(--color-point); border-radius:10rem; transition:all 0.3s ease;}
.btn-apply a > span{font-size:17rem; font-weight:600; color:#fff;}
.btn-apply a:hover{box-shadow: 0 4px 15px -2px rgb(0 118 253 / 20%);}
.btn-apply.pending a{background:#222;}
.btn-list > a{display:flex; justify-content: center; align-items: center; padding:10rem; background:#eee; border-radius:5rem; text-align:center; background:#f9f9f9; border:1px solid #eee; box-sizing:border-box; }
.btn-list > a span{font-size:15rem; font-weight:600; color:#333;}
.btn-list > a span i{display:block; font-size:13rem; font-weight:500; color:#555;}
.box-detail{/*margin-bottom:50rem;*/ padding:25rem 0;}
.box-detail > h3{margin-bottom:15rem; font-size:18rem; font-weight:700; color:#222; line-height:1em;}
.box-detail > p{display:block; font-size:16rem; font-weight:400; color:#555; line-height:1.5em; word-break:keep-all;}

#area_toc .box-table{margin-bottom:10rem; }

.curriculum-list{border-top:2px solid #222;}
.curriculum-list > li{display:flex; align-items: center; justify-content: space-between; height:60rem; padding:5rem 12rem; border-bottom:1px solid #eee; box-sizing:border-box;}
.curriculum-list > li > span{display:flex; justify-content: center; align-items: center; margin-right:10rem; width:50rem; height:26rem; background:#1F3643; border-radius:50rem; font-size:15rem; font-weight:500; color:#fff;}
.curriculum-list > li .subject{width:calc(100% - 100rem); text-align:left; font-size:17rem; font-weight:500; color:#333; line-height:1.2em; word-break:keep-all;}
.curriculum-list > li .time{position:relative; display:inline-block; padding-left:22rem; font-size:15rem; font-weight:400; color:#666;}
.curriculum-list > li .time:before{content:''; position:absolute; top:-1rem; left:0; width:20rem; height:20rem; background:url(../images/common/ic-history.svg)no-repeat center; background-size:contain; opacity:0.6;}
.curriculum-summary-text{font-size:15rem;}
.box-teacher{display:flex; gap:30rem; padding:25rem; border:1px solid #eee; box-sizing:border-box;}
.box-teacher .img{display:flex; display:flex; justify-content: center; align-items: center; w idth:200rem; height:220rem; background:#eee; overflow:hidden;}
.box-teacher .img img{height:100%;}
.box-teacher .txt{width:calc(100% - 230rem);}
.box-teacher .txt .name{display:flex;  font-size:19rem; font-weight:600; padding-bottom:12rem; margin-bottom:15rem; color:#222; line-height:1em; word-break:keep-all; border-bottom:1px dashed #eee; box-sizing:border-box;}
/* .box-teacher .txt .list{} */
.box-teacher .txt .list > li{position:relative; margin-bottom:9rem; padding-left:10rem; font-size:15rem; font-weight:400; color:#555; line-height:1em; word-break:keep-all;}
.box-teacher .txt .list > li:before{content:''; position:absolute; top:6rem; left:0; width:2px; height:2px; background:#999;}
.box-teacher .txt .list > li:last-child{margin:0;}
.reveiw-top{margin-bottom:10rem;}
.review-avg{display:flex; flex-direction: column; align-items: center; justify-content: center; padding:20rem;border:1px solid #eee; box-sizing:border-box; margin-bottom:20rem; border-radius:10rem;}
.review-avg .score-number{display:block; font-size:40rem; font-weight:bold; color:#222; margin-bottom:6rem; line-height:1em;}
.review-avg .score{gap:4rem;}
.review-avg .score svg,
.review-avg .score img{width:24rem; height:24rem;}
.review-avg .score svg{fill:#ddd;}

/* 별점*/
.score[data-score="1"] li:nth-child(-n+1) svg path { fill: #FFAC33; }
.score[data-score="2"] li:nth-child(-n+2) svg path { fill: #FFAC33; }
.score[data-score="3"] li:nth-child(-n+3) svg path { fill: #FFAC33; }
.score[data-score="4"] li:nth-child(-n+4) svg path { fill: #FFAC33; }
.score[data-score="5"] li:nth-child(-n+5) svg path { fill: #FFAC33; }

.review-avg em{display:inline-block; margin-top:15rem; font-size:16rem; font-weight:500; color:#888; line-height:0.8em;}
.review-write{display:flex; justify-content: space-between; align-items: center; margin-bottom:20rem; padding:20rem; background:#f4f8fb; border-radius:10rem; box-sizing:border-box;}
/* .review-write .txt{} */
.review-write .txt > h3{display:block; font-size:18rem; font-weight:700; color:var(--color-point04); line-height:1em; word-break:keep-all;}
.review-write .txt > p{display:block; margin-top:10rem; font-size:15rem; font-weight:400; color:#666; line-height:1em; word-break:keep-all;}
.review-write button{padding:7rem 10rem; background:var(--color-point04); border-radius:5rem; transition:all 0.3s ease;}
.review-write button span{font-size:15rem; font-weight:500; color:#fff;}
.review-write button:hover{background:var(--color-point);}
#review[data-pop-layer="layer"] .popBox,
#review2[data-pop-layer="layer"] .popBox{--popWid:540rem; --popHig:auto;}
#review .popConts,
#review2 .popConts{border:none; padding:0;}
.rating { display:flex; justify-content:center; align-items:center; gap:5rem; flex-direction:row-reverse; margin-bottom:20rem;}
.rating input { display:none; }
.rating label { cursor:pointer; width:45rem; }
.rating svg path { fill:#eee; transition:0.25s; }
.rating label:hover svg path, .rating label:hover ~ label svg path { fill:#FFAC33; }
.rating input:checked + label svg path, .rating input:checked + label ~ label svg path { fill:#FFAC33; }

/* 별점
.rating[data-score="1"] li:nth-child(-n+1) svg path { fill: #FFAC33; }
.rating[data-score="2"] li:nth-child(-n+2) svg path { fill: #FFAC33; }
.rating[data-score="3"] li:nth-child(-n+3) svg path { fill: #FFAC33; }
.rating[data-score="4"] li:nth-child(-n+4) svg path { fill: #FFAC33; }
.rating[data-score="5"] li:nth-child(-n+5) svg path { fill: #FFAC33; }
*/

.popBtns{margin-top:15rem; gap:10rem;}
.popBtns button{height:50rem; border-radius:10rem; font-size:16rem;}
.popBtns button.btn_ok{background:var(--color-point); color:#fff;}
#review .popConts textarea,
#review2 .popConts textarea{width:100%; height:180rem; border:1px solid #eee; box-sizing:border-box; padding:10rem; font-size:16rem; border-radius:10rem;}
/* .review-item{} */
.review-item{border-bottom:1px solid #eee; box-sizing:border-box; padding:30rem 0;}
.review-item:first-child{border-top:1px solid #eee;}
.review-item > .info{display:flex; align-items: center; gap:18rem;}
.review-item > .info em{position:relative; display:inline-block; font-size: 15rem; font-weight:400; color: #555; line-height:1em;}
.review-item > .info em:before{content:''; position:absolute; top:1px; left:-9rem; width:1px; height:13rem; background:#ddd;}
.review-item > .info .score-wrap{display:flex; gap:5rem;}
.score{display:flex; gap:2rem;}
.review-item > .info .score > li{width:15rem; height:15rem;}
.review-item.nodata{ text-align: center; padding: 40rem 0; color: #999;}
.score svg,
.score img{width:15rem; height:15rem;}
.score svg{fill:#ddd;}

.review-item > p{margin-top:14rem; font-size:15rem; font-weight:400; color:#333; line-height:1.4em; word-break:keep-all;}
.lecture-detail .box-btn .basic-btn{width:100%; height:54rem; border-radius:10rem;}



/* 오프라인직무교육 상세 */
.lecture-view.offline{position: relative; display: flex; gap: 50rem;}
.lecture-view__cont{width:calc(100% - 450rem);}
.lecture-view.offline .top .cont{width:100%;}
.lecture-view.offline .lecture-detail{width:100%;}

@media (max-width:1600px){
	.lecture-nav.fixed .inr{margin:0 80rem;}
}
@media (max-width:1100px){
	.lecture-nav.fixed .inr{margin:0 20rem;}
}
@media (max-width:1024px){
    .lecture-view .top{gap:40rem;}
    .lecture-view .top .cont{width:calc(100% - 340rem);}
    .lecture-view .top .img{width:300rem; height:200rem;}
    .lecture-detail{width:calc(100% - 340rem);}
    .box-teacher{padding:15rem; gap:20rem;}
    .box-teacher .txt{width: calc(100% - 220rem);}
    .lecture-view aside{width:300rem;}
    .lecture-summary .btn-list{grid-template-columns: 1fr; gap:5rem;}
    .lecture-summary .btn-list a{height:50rem;}
}
@media (max-width:768px){
    .lecture-view .top{flex-direction: column-reverse; margin-bottom:30rem;}
    .lecture-view .top .img{width:100%; height:450rem;}
    .lecture-view .top .cont{width:100%;}
    .list-info.pc{display:none;}
    .list-info.mobile{display:block;}
    .lecture-view .top .btn-list.mobile{display:grid; gap:10rem; grid-template-columns: 1fr 1fr;}
    .lecture-view .top .btn-list.mobile a{height:auto;}
    .lecture-view .bottom{display:block;}
    .lecture-detail{width:100%;}
    .box-detail{padding:15rem 0;}
    .lecture-view aside{position:fixed; left:0; bottom:0; width:100%; z-index:10001; border-radius:10rem 10rem 0 0; overflow:hidden;}
    .lecture-summary__wrap{position:initial; top:0; display:flex; align-items: center; gap:10rem; width:100%; height:auto; margin-top:34rem; padding:15rem;  background:#fff;}
    .lecture-view aside .lecture-summary{position:initial; width:190rem;  border:none; box-shadow:none; padding:0; border-radius:0;}
    .lecture-summary .box-state{height:34rem;}
    .lecture-view aside .lecture-summary .list-info,
    .lecture-view aside .lecture-summary .btn-list{display:none;}
    .lecture-view aside .lecture-summary .box-price{margin:0; padding:0; border:none;}
    .lecture-view aside .lecture-summary .box-price .title{display:none;}
    .lecture-view aside .lecture-summary .box-price .price{color:#222; font-size:22rem;}
    .lecture-view aside .btn-apply{margin:0; width:calc(100% - 200rem); }
    .btn-apply a{border-radius:7rem; height:50rem;}

}
@media (max-width:620px){
    .lecture-view .top .img{height:376rem;}
    .review-avg .score-number{font-size:35rem;}
    .review-avg .score svg,
    .review-avg .score img{width:22rem; height:22rem;}
}
@media (max-width:480px){
    .lecture-view .top{gap:10rem; margin-bottom:20rem;}
    .lecture-view .top .img{height:215rem; border-radius:8rem;}
    .lecture-view .top .cont .type-wrap{margin-bottom:4rem;}
    .lecture-view .top .cont .type-wrap em{font-size:11rem;}
    .lecture-view .top .cont .type-wrap .btn-heart{width:15rem; height:15rem;}
    .lecture-view .top .cont h3{font-size:16rem;}
    .lecture-view .top .cont p{margin-top:4rem; font-size:12rem; line-height:1.4em;}
	.lecture-view .top .cont .list-info{margin-top:10rem; padding:14rem 0 0;}
    .list-info > li{margin-bottom:7rem;}
    .list-info > li em,
    .list-info > li span{font-size:12rem;}
    .list-info > li em{width:60rem;}
    .review-item > .info .score > li{width:12rem; height:12rem;}
    .score svg,
    .score img{width:12rem; height:12rem;}
    .lecture-view .top .btn-list.mobile{gap:6rem; margin-top:15rem;}
    .btn-list > a{padding:5rem;}
    .btn-list > a span{font-size:13rem;}
    .btn-list > a span i{font-size:11rem;}
    .lecture-nav.fixed .inr{margin:0 14rem;}
   	.lecture-nav{margin-bottom:20rem;}
	.lecture-nav ul > li a{padding:10rem 5rem; font-size:13rem;}
	.lecture-nav ul > li a:before{bottom:-2rem;}
	.lecture-nav.fixed .inr ul > li > a{padding:10rem 5rem;}
	.lecture-nav ul > li a > i{top:-1px; margin-left:3rem; height:15rem; font-size:11rem; padding:2rem 6rem; line-height:0.8em;}
	
	.box-detail{padding:10rem 0;}
    .box-detail > h3{font-size:14rem; margin-bottom:7rem;}
    .box-detail > p{ font-size:12rem; line-height:1.4em;}
    .curriculum-list > li{padding:5rem 0; height:auto; min-height:45rem;}
    .curriculum-list > li > span{font-size:11rem; width:35rem; height:18rem; margin-right:0;}
    .curriculum-list > li .subject{font-size:12rem;}
    .curriculum-list > li .time{font-size:11rem; padding-left:15rem;}
    .curriculum-list > li .time:before{top:0; width:14rem; height:14rem;}
	.curriculum-summary-text{font-size:12rem; line-height:1.4em;}
    .box-teacher{flex-direction: column; border:none; padding:0; gap:10rem;}
    .box-teacher .img{width:100%; width:100%;}
    .box-teacher .txt{width:100%; padding:12rem; border:1px solid #eee; box-sizing:border-box;}
    .box-teacher .txt .name{font-size:14rem; padding-bottom:10rem; margin-bottom:10rem;}
    .box-teacher .txt .list > li{font-size:12rem; margin-bottom:7rem; padding-left:-7rem;}
    
    .review-avg{padding:12rem; border-radius:7rem; margin-bottom:10rem;}
    .review-avg .score-number{font-size:26rem; margin-bottom:4rem;}
    .review-avg .score svg,
    .review-avg .score img{width:17rem; height:17rem;}
    .review-avg em{margin-top:10rem; font-size:11rem;}
    .review-write{display:block; padding:12rem;}
    .review-write .txt > h3{font-size:14rem;}
    .review-write .txt > p{margin-top:6rem; font-size:11rem;}
    .review-write button{margin-top:7rem; padding:4rem 8rem;}
    .review-write button > span{font-size:11rem;}
    .review-item{padding:15rem 0;}
    .score{gap:1rem;}
	.review-item.nodata{font-size:12rem; padding:30rem 0;}
    .review-item > .info .score{position:relative; top:-4.5rem;}
    .review-item > .info .score > li{width:10rem; height:10rem;}
    .score svg,
    .score img{width:10rem; height:10rem;}
    .score-wrap span{font-size:11rem;}
    .review-item > .info{gap:12rem;}
    .review-item > .info em{top:1px; font-size:11rem;}
    .review-item > .info em:before{top:1rem; left:-6rem; height:9rem;}
    .review-item > p{margin-top:8rem; font-size:12rem;}
    .lecture-detail .box-btn .basic-btn{height:40rem; border-radius:7rem;}
    .lecture-view aside{border-radius:7rem 7rem 0 0;}
    .lecture-summary .box-state{height:23rem;}
    .lecture-summary .box-state span{font-size:11rem;}
    .lecture-summary__wrap{margin-top:23rem; padding:10rem;}
    .lecture-view aside .lecture-summary{width:100rem;}
    .lecture-view aside .lecture-summary .box-price .price{font-size:15rem;}
    .lecture-view aside .btn-apply{width:calc(100% - 110rem);}
    .lecture-view aside .btn-apply a{height:38rem; border-radius:5rem;}
    .btn-apply a > span{font-size:13rem;}

     #review[data-pop-layer="layer"] .popBox{--popWid:90%;}
     .rating{margin-bottom:10rem;}
     .rating label{width:28rem; height:28rem;}
     #review[data-pop-layer="layer"] .popBox .popConts{max-height:fit-content;}
     #review .popConts textarea{height:120rem; font-size:12rem; border-radius:7rem;}
     .popBtns{margin-top:3rem; gap:6rem;}
     .popBtns button{height:35rem; font-size:13rem; border-radius:5rem;}
}


/* 오프라인 집합교육 */
.box-sch-filter{position:relative; background:#f9f9f9; border:1px solid #eee; padding:25rem; box-sizing:border-box; margin-bottom:40rem; border-radius:10rem;}
.filter-item{position:relative; display:flex; align-items: center; gap:10rem; width:100%; margin-bottom:14rem;}
.filter-item .title{width:100rem; font-size:15rem; font-weight:600; color:#222; line-height:1em;}
.filter-item .cont{width:calc(100% - 110rem);}
.filter-item .input-box{display:grid; grid-template-columns: 1fr 1fr; gap:10rem;}
.filter-item .cont input{height:40rem; border:1px solid #eee; box-sizing:border-box; border-radius:5rem; padding:10rem;}
.filter-item .cont select{background-color:#fff !important; width:100%;}
.filter-item .cont .box-datepicker{width:100%;}
.filter-item .cont .box-datepicker .date{width:100%;}
.filter-item .cont .box-datepicker .date input{width:calc((100%/2) - 9.5rem);;}
.box-sch-filter .filter-list{gap:0 50rem;}
.box-sch-filter .filter-list{overflow: hidden; will-change: height;}
.sch-bottom{display: flex; justify-content: flex-end; gap:7rem; margin-top:10rem; padding-top:20rem; border-top:1px solid #eee; box-sizing:border-box;}
.sch-bottom button{min-width:80rem; border-radius:5rem;}
.btn-reset{background:#fff; border:1px solid #ddd;}
.btn-sch{background:var(--color-point); color:#fff;}
.box-sch-filter .btn-open,
.box-sch-filter .btn-close{position:absolute; bottom:-17.5rem; left:50%; transform:translateX(-50%); border:1px solid #333; background:#fff; border-radius:5rem; font-size:15rem; min-width:55rem; color:#333;}
.offline-item{position:relative; border:1px solid #eee; box-sizing:border-box; border-radius:10rem; margin-bottom:12rem;}
.offline-item .top{position:relative; padding:20rem; margin:0;}
.offline-item .top .title{margin-bottom:20rem;}
.offline-item .top .title h3{display:block; font-weight:600; word-break:keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.offline-item .top .title h3 a{font-size:19rem; font-weight:600; color:#222; line-height:1.2em; }
.offline-item .top .title p{display:block; margin-top:6rem; font-size:14rem; font-weight:400; color:#999; line-height:1.2em; word-break:keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.offline-item .top-info{display:flex; justify-content: space-between; align-items: center; margin:0 0 15rem;}
.offline-item .top-info .type-wrap{margin:0;}
.offline-item .top-info .info-list{margin:0;}
.offline-item .top-info .info-item{margin:0; position:relative; padding-left:19rem;}
.offline-item .top-info .info-item span{display:inline-block; font-size:14rem; font-weight:500; color:#666; line-height:1em;}
.offline-item .bottom{display: flex; justify-content: space-between; align-items: center; padding:13rem 20rem; border-top:1px dashed #eee; }
.offline-item .info-list{margin-top:7rem; padding-top:0;}
.offline-item .info-item{margin-bottom: 0rem;}
.offline-item .price{position:absolute; top:50%; right:0; width:150rem; display: flex; flex-direction: column; transform: translateY(-50%);}
.offline-list.type02{ display:flex; gap:40px; flex-wrap:wrap; column-gap:24px;}
.offline-list.type02  > li{width:calc((100% / 4) - 18rem); border:1px solid #eee; box-sizing:border-box; padding:15rem;}
.offline-list.type02 .top{padding:0;}
.offline-list.type02 .offline-item .price{display:block; position:relative; top:0; right:unset; width:auto;  transform:none;}
.offline-list.type02 .bottom .info-item{width:100%; justify-content: space-between;}
.offline-list.type02 .info-item em,
.offline-list.type02 .info-item span{font-size:14rem; letter-spacing:-0.5px;}
.offline-list.type02 .info-item .rate .bar{width:110rem; height:7rem;}

/* 결제하기, 장바구니 */
.payment-wrap{display:flex; gap:50rem;}
.payment-left > h3,
.box-payment > h3{display:block; margin-bottom:10rem; color:#222; font-weight:600;}
.payment-left{width:600rem;}
.payment-left > div{position:sticky; top:100rem;}
.payment-list-head {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom:12rem;}
.payment-list-head .check_cont{display: flex; align-items: center; cursor: pointer; padding-left:25rem;}
.payment-list-head .check_cont em { font-size: 16rem; font-weight: 500; color:#333; }
.btn-delete-selected{padding: 5rem 8rem; border: 1rem solid #e9e9e9; background: #fff; border-radius: 4rem; font-size: 14rem; color: #666; transition: all 0.2s ease; }
.btn-delete-selected:hover { background: #f8f8f8; color: #e74c3c; border-color: #e74c3c; }
.payment-list{border-top:1px solid #eee;}
.payment-item{position:relative; display:flex; align-items: center; gap:15rem; padding:15rem 10rem; border-bottom:1px solid #eee; box-sizing:border-box;}
.payment-item .check_cont{position:absolute; top:15rem; left:0rem;}
.payment-left .check_cont input:checked ~ .checkmark{border-color:var(--color-point); background-color:var(--color-point);}
.payment-left .check_cont .checkmark:after{top:2rem; left:5rem; width:5rem; height:8rem; border-color:#fff; border-width:0 2px 2px 0;}
.payment-item .img{margin-left:20rem; width:130rem; height:85rem; background:#eee; box-sizing:border-box; border-radius:10rem; overflow:hidden;}
.payment-item .img img{width:100%; height:auto;}
.payment-item .txt{width:calc(100% - 150rem);}
.payment-item .txt em{display:inline-block; font-size:13rem; font-weight:500; color:var(--color-point); background:#f2f8ff; padding:5rem 8rem; line-height:1em; border-radius:5rem;}
.payment-item .txt h3{display:block; font-size:16rem; font-weight:400; color:#222; line-height:1.2em; word-break:keep-all;}
.payment-item .txt .price{display:block; margin-top:5rem; color:#222; font-weight:600;}
.payment-item .btn-delete{position:absolute; top:10rem; right:5rem; width:20rem; height:20rem; vertical-align:middle; background:url(../images/common/ic-close.svg) no-repeat center; background-size:10rem auto; text-indent:-9999px; font-size:0;}
.payment-item.offline .txt{margin-left:20rem; width:100%;}
.payment-info{width:calc(100% - 650rem);}
.payment-info .box-payment{margin-bottom:30rem;}
.pay-method__list{display:grid; gap:10rem; grid-template-columns: 1fr 1fr 1fr;}
/* .pay-method__item{} */
.pay-method__item .icon{display: flex; justify-content: center; align-items: center; width:40rem; height:40rem; margin:0 auto 5rem;}
.pay-method__item .icon svg{width:100%; height:100%; opacity:0.5;}
.pay-method__item .icon.bank2 svg{width:32rem; height:32rem;}
.pay-method__item em{font-size:16rem; font-weight:500;}
.pay-method__item label{padding:30rem 0; border:2px solid #e9e9e9; color:#7b7b7b; border-radius:10rem; text-align:center; display:block; cursor:pointer; background-color:#fff;}
.pay-method__item input[type=radio]:checked + label{border:2px solid var(--color-point) !important; color:var(--color-point) !important;}
.pay-method__item input[type="radio"]:checked + .pay_method {color: #0076fd; border-color: #0076fd; background-color: #f0f7ff; font-weight: bold; }
.pay-method__item input[type="radio"]:checked + .pay_method svg{opacity:1;}
.pay-method__item input[type="radio"]:checked + .pay_method .icon.card svg path {fill: #0076fd;}
.pay-method__item input[type="radio"]:checked + .pay_method .icon.bank svg path,
.pay-method__item input[type="radio"]:checked + .pay_method .icon.bank2 svg g,
.pay-method__item input[type="radio"]:checked + .pay_method .icon.bank2 svg path {stroke:var(--color-point); }
.total-price{display: flex; align-items: center; justify-content: center; gap: 7rem; margin-top:10rem; padding:15rem; box-sizing:border-box; text-align:center; background:#f9f9f9; border:1px solid #eee; border-radius:10rem; font-size:17rem; color:#222; font-weight:600;}
.total-price .price{color:var(--color-point);}
/* .payer-list{} */
.payer-item{margin-bottom:14rem;}
.payer-item em{display:inline-block; font-size:15rem; font-weight:600; color:#333; line-height:1em; margin-bottom:8rem;}
.payer-item input{display:block; width:100%; height:45rem; padding:10rem; border:1px solid #eee; box-sizing:border-box; border-radius:7rem; font-size:15rem; color:#333; line-height:1em;} 
/* .payer-info{} */
.payer-info .cont{display:block; margin-top:10rem; border:1px solid #eee; box-sizing:border-box; border-radius:7rem; padding:14rem 12rem}
.payer-info .cont h3{display:block; font-size:17rem; font-weight:600; color:#222; line-height:1em; margin-bottom:6rem;}
.payer-info .cont p{display:block; margin-bottom:8rem; font-size:15rem; font-weight:400; color:#333; line-height:1.2em; word-break:keep-all;}
.payer-info .cont p i{display:inline-block; margin-left:3rem; font-weight:600; color:var(--color-point); font-size:15rem;}
.payer-info .cont .box-btn{margin-top:20rem;}
.payer-info .cont .box-btn a{display:block; width:100%; padding:13rem 10rem; background:var(--color-point04); border-radius:5rem; box-sizing:border-box; text-align:center;}
.payer-info .cont .box-btn a span{color:#fff; font-size:15rem;}
.box-payment .box-policy{border:1px solid #eee; padding:10rem; box-sizing:border-box; border-radius:7rem; height:180rem; overflow-y:scroll;} 
.box-payment .area_policy .inr_policy{padding:0; border-bottom:none;}
.box-payment .box-agree{margin-top:10rem;}
.box-payment .box-agree em{padding-left:0rem;}
.payment-info a{width:100%; border-radius:10rem;}
/* [data-list="dot"]{} */

[data-list="dot"] > li{position:relative; padding-left:7rem; margin-bottom:3rem;}
[data-list="dot"] > li:before{content:''; position:absolute; top:8rem; left:0; width:2px; height:2px; background:var(--color-point); border-radius:50rem;}
[data-list="dot"] > li > span{font-size:15rem; line-height:1.2em; word-break:keep-all;}

[data-list="star"] > li{position:relative; padding-left:10rem; margin-bottom:5rem;}
[data-list="star"] > li:before{content:'*'; position:absolute; top:3rem; left:0; font-size:15rem; color:#666;}
[data-list="star"] > li > span{font-size:15rem; line-height:1.2em; word-break:keep-all; color:#666;}



/* 결제 정보 영역의 2번째, 3번째 박스만 초기 숨김 처리 */
.payment-info .box-payment:nth-of-type(2),
.payment-info .box-payment:nth-of-type(3) { 
	opacity: 0; 
	visibility: hidden; 
	transition: opacity 0.6s ease, visibility 0.6s ease; 
}
.payment-info .box-payment:nth-of-type(2).is-active,
.payment-info .box-payment:nth-of-type(3).is-active { 
	opacity: 1; 
	visibility: visible; 
}


/* 장바구니 데이터 없을 경우 */
.payment-cont{display:block; width:100%; padding:100rem 0; box-sizing:border-box; text-align:center;}
.payment-cont .icon{position:relative; width:180rem;height:180rem;margin:0 auto;background: #f1f7ff;border-radius: 50rem;display: flex;justify-content: center;align-items: center;}
.payment-cont .icon svg{width:93rem; height:93rem;}
.payment-cont.complete .icon svg{width:70rem; height:70rem;}
.payment-cont .txt{margin:30rem 0 0;}
.payment-cont .txt p{display:block; font-size:22rem; font-weight:600; color:#333; line-height:1em; word-break:keep-all;}
.payment-cont .txt em{display:inline-block; margin-top:12rem; font-size:16rem; font-weight:400; color:#666; line-height:1.2em; word-break:keep-all;}
.payment-cont .txt em i{color:var(--color-point); font-weight:500;}
.payment-cont .txt a{display:flex; justify-content: center; align-items: center; width:130rem; height:40rem; line-height:40rem; border:1px solid #ddd; box-sizing:border-box; border-radius:10rem; transition:all 0.3s ease;}
.payment-cont .txt a.color{background:var(--color-point); border-color:var(--color-point); color:#fff;}
.payment-cont .txt a span{font-size:15rem;}
.payment-cont .txt a:hover{background:#f9f9f9;}
.payment-cont .txt a.color:hover{color:var(--color-point);}
.payment-cont .btn-wrap {margin:25rem auto 0; gap:8rem; display: flex; justify-content: center; align-items: center;}
.payment-cont .btn-wrap a{margin:0;}
/* .payment-cont .btn-wrap a{} */

@media (max-width:1024px){
	.payment-wrap{display:block;}
	.payment-left{width:100%;}
	.payment-info{width:100%; margin-top:40rem;}
}
@media (max-width:768px){
	.payment-cont .icon{width:160rem; height:160rem; border-radius:40rem;}
	.payment-cont .icon svg{width:83rem; height:83rem;}
}
@media (max-width:480px){
	.payment-list-head{margin-bottom:10rem;}
	.payment-list-head .check_cont{padding-left:18rem;}
	.payment-list-head .check_cont em{font-size:12rem;}
	.btn-delete-selected{padding:3rem 6rem; font-size:11rem;}
	.payment-item{padding:10rem; gap:10rem;}
	.payment-item .check_cont{top:10rem;}
	.payment-left .check_cont .checkmark:after{top:1.55rem;left:3.8rem;width: 4rem;height: 6rem;}
	.payment-item .img{margin-left:10rem; width:85rem; height:52rem; border-radius:5rem;}
	.payment-item .txt{width:calc(100% - 90rem);}
	.payment-item .txt .type-wrap{margin-bottom:3rem;}
	.payment-item .txt em{font-size:10rem; padding:3rem; border-radius:3rem;}
	.payment-item .txt h3{font-size:12rem;}
	.payment-item .txt .price{margin-top:2rem;font-size:12rem;}
	.payment-item .btn-delete{top:5rem; right:0; width:15rem;  height:15rem; background-size:6rem auto;}
	.payment-item.offline .txt{margin-left:10rem;}

	.payment-left > h3, .box-payment > h3{font-size:15rem; margin-bottom:5rem;}
	.payment-info .box-payment{margin-bottom:15rem;}
	.payment-info{margin-top:20rem;}
	.pay-method__list{gap:5rem;}
	.pay-method__item label{padding:12rem 0; border-radius:8rem;}
	.pay-method__item .icon{width:30rem; height:30rem; margin:0 auto;}
	.pay-method__item .icon.card svg{height:110%;}
	.pay-method__item .icon.bank2 svg{width:25rem; height:25rem;}
	.pay-method__item em{font-size:12rem;}
	.total-price{padding:10rem; margin-top:7rem; gap:5rem; border-radius:5rem; font-size:13rem;}
	.payer-item{margin-bottom:5rem;}
	.payer-item em{font-size:11rem; margin-bottom:5rem;}
	.payer-item input{height:35rem; font-size:12rem; border-radius:5rem;}

	.payer-info .cont h3{font-size:13rem;}
	.payer-info .cont p{margin-bottom:4rem;}
	.payer-info .cont p,
	.payer-info .cont p i{font-size:12rem;}
	[data-list="dot"] > li,
	[data-list="star"] > li{line-height:1em;}
	[data-list="dot"] > li > span{font-size:12rem; line-height:1.2em;}
	[data-list="star"] > li{margin-bottom:2rem;}
	[data-list="star"] > li > span{font-size:11rem; line-height:1.2em;}
	[data-list="star"] > li:before{top:1rem; font-size:12rem;}

	.payer-info .cont .box-btn{margin-top:10rem;}
	.payer-info .cont .box-btn a{padding:8rem;}
	.payer-info .cont .box-btn a span{font-size:12rem;}

	.payment-cont{padding:50rem 0;}
	.payment-cont .icon{width:85rem; height:85rem; border-radius:24rem;}
	.payment-cont .icon svg{width:43rem; height:43rem;}
	.payment-cont.complete .icon svg{width:38rem; height:38rem;}
	.payment-cont .txt{margin:20rem 0 0;}
	.payment-cont .txt p{font-size:16rem;}
	.payment-cont .txt em{margin-top:8rem; font-size:12rem;}
	.payment-cont .txt a{font-size:12rem; width:90rem; height:30rem; line-height:30rem; border-radius:5rem;}
	.payment-cont .btn-wrap{margin:15rem auto 0; gap:5rem;}
}

/* 결제내역 */
/*.payment .tabs{margin-bottom:0;}*/
.payment .lecture-item .cont a .type{width:74rem;}
.payment .offline .lecture-item .state{margin-bottom:0;}

/* 결제상세 */
.box-state__wrap{margin-bottom: 40rem; }
.box-state__wrap .box-state{ display: flex; justify-content: space-between; align-items: center; background-color: #f8f9fa; border: 1px solid #e5e7eb; border-radius: 10rem; padding: 15rem 18rem;}
.box-state__wrap .box-state .state{ display: inline-flex; justify-content: center; align-items: center; height: 32rem; padding: 0 15rem; color: #fff; font-size: 14rem; font-weight: 600; border-radius: 4rem; font-style: normal; }
.box-state__wrap .box-state .date { display: flex; align-items: center; gap: 10rem; font-size: 15rem; color: #555; }
.box-state__wrap .box-state .date em { font-style: normal; color: #888; }
.box-state__wrap .box-state .date span { font-weight: 600; color: #222; }
.payment .lecture-view .top{margin-bottom:12rem;}
.payment .lecture-view .top .cont{border: 1px solid #e9e9e9;padding: 20rem;border-radius: 10rem;}
.payment .lecture-view__cont {padding-top:20rem; width: 100%; margin-top: 40rem; }
.payment .box-detail { margin-bottom:50rem; padding:0;}
.payment .box-detail h3 { font-size: 18rem; font-weight: 700; margin-bottom: 15rem; line-height: 1; }
.desc-list {border: 1px solid #e9e9e9;border-radius: 10rem;overflow: hidden;}
.desc-item { display: flex; border-bottom: 1px solid #e9e9e9; }
.desc-item .title { width: 180rem; background-color: #f8f9fa; border-right:1px solid #e9e9e9; padding: 15rem 20rem; font-weight: 600; color: #222; display: flex; align-items: center; }
.desc-item .desc { flex: 1; padding: 15rem 20rem; font-weight: 400; color: #333; line-height: 1.5; word-break:break-word; }
.desc-item .desc.txt-red{color:#ff0000; font-weight:bold; font-size: 17rem;}
.desc-item .desc.txt-bk{font-weight: bold; color: #333; }
.desc-item:last-child{border-bottom:none;}
.box-detail .desc.txt-blue{ color: var(--color-point); font-weight: 700; font-size: 17rem; }
.box-state__wrap:has(.info-group) .box-state { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 1px dashed #d1d5db; }
.box-state__wrap:has(.info-group) .box-state .date span{color:var(--color-point);}
.box-state__wrap .info-group { background-color: #fff; border: 1px solid #e5e7eb; border-top: none; border-bottom-left-radius: 10rem; border-bottom-right-radius: 10rem; padding:15rem 18rem; }
.box-state__wrap .info-group .row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12rem; font-size: 15rem; }
.box-state__wrap .info-group .row:last-child { margin-bottom: 0; }
.box-state__wrap .info-group .row em { font-style: normal; color: #888; }
.box-state__wrap .info-group .row .account { font-weight:500; color: #333;}
.box-state__wrap .info-group .row .price { font-weight: 600; color:#333; font-size: 16rem; }

@media (max-width:768px){
	.box-state__wrap{margin-bottom:20rem;}
	.box-state__wrap .box-state{border-radius:7rem; padding:15rem;}
	.box-state__wrap .box-state .state{height:28rem;}
	.box-state__wrap .info-group{padding:15rem;}
	.desc-list{border-radius:7rem;}
	.desc-item .title{padding:15rem; width:140rem;}
	.desc-item .desc{padding:15rem;}
	.payment .lecture-view .top .cont{padding:15rem; border-radius:7rem;}
	.payment .lecture-view__cont{margin-top:30rem;}
}

@media (max-width:480px){
	.payment .lecture-item .cont a .type{width:54rem;}
	.payment .offline .lecture-item .state{width:54rem; padding:4rem;}

	.box-state__wrap{margin-bottom:15rem;}
	.box-state__wrap .box-state{border-radius:5rem; padding:8rem 10rem;}
	.box-state__wrap .box-state .state{padding:0 6rem; height:20rem; font-size:10rem;}
	.box-state__wrap .box-state .date{font-size:11rem; gap:5rem;}
	.box-state__wrap .info-group{padding:10rem; border-radius:0 0 5rem 5rem;}
	.box-state__wrap .info-group .row{display:block; font-size:11rem; margin-bottom:6rem;}
	.box-state__wrap .info-group .row em{display:inline-block; margin-bottom:4rem;}
	.box-state__wrap .info-group .row span{display:block;}
	.box-state__wrap .info-group .row .price{font-size:12rem;}
	.payment .box-detail{margin-bottom:20rem;}
	.payment .box-detail h3{font-size:13rem; margin-bottom:8rem;}
	.desc-list{border-radius:5rem;}
	.desc-item .title{padding:8rem 5rem; width:78rem; font-size:11rem;}
	.desc-item .desc{padding:8rem 5rem; font-size:11rem; line-height:1.2em;}
	.box-detail:last-child .desc{font-size:12rem;}
	

	.payment .lecture-view .top{margin-bottom:6rem;}
	.payment .lecture-view .top .cont{padding:10rem; border-radius:5rem;}
	.payment .lecture-view__cont{padding-top:10rem; margin-top:20rem;}
	

}

/* 교육기관 메인 */
/*
.edu-center__visual{border:1px solid #eee; box-sizing:border-box; border-radius:10rem; padding:20rem; margin-bottom:30rem;}
.edu-center__visual .logo{height:50rem;}
.edu-center__visual .logo img{height:100%;}
.edu-center__cont{display:flex; gap:20rem; margin:20rem 0;}
.snb{display:flex; gap:10rem; border:1px solid #eee; box-sizing:border-box; margin-bottom:30rem;}
.snb > li{width:calc(100% / 6); border-right:1px solid #eee; box-sizing:border-box;}
.snb > li:last-child{border:none;}
.snb > li a{position:relative; display:block; text-align:center; padding:15rem; box-sizing:border-box;}
.snb > li a:before{content:''; position:absolute; left:0; bottom:-1px; width:100%; height:0; background:var(--color-point);}
.snb > li.active a:before{height:2px;}
.snb > li.active a{color:var(--color-point); font-weight:bold;}
.edu-center__info .btn-list{display:flex; gap:5rem;}
.year-calendar {border:1px solid #eee; box-sizing:border-box;}
.year-calendar > .area-day{display: grid; grid-template-columns: repeat(32, 1fr); grid-row-gap: 1rem;}
.year-calendar > .area-day > div{display:flex; justify-content: center; align-items: center; height:35rem; border-right:1px solid #eee; border-bottom:1px solid #eee; text-align:center; padding:5rem; font-size:14rem;}
.year-calendar > .area-day > div:last-child{border-right:none;}
.year-calendar .area-month{position:relative;  display: grid; grid-template-columns: repeat(32, 1fr); grid-row-gap: 1rem;}
.year-calendar .area-month > div{display:flex; justify-content: center; align-items: center; height:35rem; border-right:1px solid #eee; border-bottom:1px solid #eee; text-align:center; padding:5rem; font-size:14rem;}
.year-calendar .area-month > div:last-child{border-right:none;}
.year-calendar .area-month:last-child > div{border-bottom:none;}
.year-calendar .area-month > div .event{position:absolute; top:26%; left:3.3%; display: flex; justify-content: center; align-items: center; width:15.2%; height:18rem; border-radius:10rem; background:#eee; color:#fff; font-size:11rem;}
.year-calendar .area-month.oct > div .event{position:absolute; left:28.5%; width:33.6%; border-radius:10rem;}
.year-calendar .area-month > div .event.blue{background:#039be5;}
.year-calendar .area-month > div .event.red{background:#f62c6d;}
/* .m-year-calendar{}
.m-year-calendar .day{position:relative; display:flex; gap:10rem; align-items: center; justify-content: space-between; padding:10rem; height:40rem; border-bottom:1px solid #eee; box-sizing:border-box;}
.m-year-calendar .day .event:before{content:''; position:absolute; top:15rem; left:0; width:10rem; height:10rem; background:#eee; border-radius:50rem;}
.m-year-calendar .day .event.blue:before{background:#039be5;}
.m-year-calendar .day .event.red:before{background:#f62c6d;}
.m-year-calendar .day .date{padding-left:10rem;}
*/


/* 교육기관 메인 */
.edu-center__visual{border:1px solid #eee; box-sizing:border-box; border-radius:10rem; padding:20rem; margin-bottom:30rem;}
.edu-center__visual .logo{height:50rem;}
.edu-center__visual .logo img{height:100%;}
.edu-center__cont{display:flex; gap:20rem; margin:20rem 0;}
.edu-center__cont .board{width:calc(100% - 758rem);border:1px solid #eee;box-sizing:border-box;border-radius:10rem;overflow: hidden;}
.edu-center__cont .board-top{display:flex;align-items: center;justify-content: space-between;padding: 0; margin:0; height:46rem;border-bottom:1px solid #eee;box-sizing:border-box;overflow: hidden;}
.edu-center__cont .board-top .tabs{gap: 0;margin:0;height: 100%;}
.edu-center__cont .board-top .tabs li{border:none;padding: 10rem 25rem;font-size:16rem;font-weight:600;color:#999;line-height:1em;opacity: 1;height: 100%;border-right: 1px solid #eee;border-radius: 0;display: flex;align-items: center;}
.edu-center__cont .board-top .tabs li.active{opacity:1;background:transparent;background: var(--color-point);color: #fff; border-color:var(--color-point);}
.edu-center__cont .board-top .btn-plus{display:block;width:15rem;height:15rem;background:url(../images/main/ic-plus.svg)no-repeat center;background-size: 15rem auto;transition:all 0.3s ease;width: 50rem;height: 100%;border-left: 1px solid #eee; font-size:0;}
.edu-center__cont .board-top .btn-plus:hover{background:url(../images/main/ic-plus-color.svg)no-repeat center; }
.edu-center__cont .tab_content{padding:15rem 15rem; box-sizing:border-box;}
.edu-center__cont .board-list li{position:relative; padding-left:8rem;  margin-bottom:13rem; display:flex; justify-content: space-between; align-items: center;}
.edu-center__cont .board-list li:last-child{margin:0;}
.edu-center__cont .board-list li:before{content:''; position:absolute; top:7rem; left:0; width:2px; height:2px; background:#999; border-radius:50rem;}
.edu-center__cont .board-list li .subject{width:calc(100% - 120rem); font-size:15rem; font-weight:400; color:#333; line-height:1em; word-break:keep-all;   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.edu-center__cont .board-list li .date{font-size:14rem; font-weight:300; color:#999; line-height:1em; }
.edu-center__classroom{width:204rem; background:#1B98FF; border-radius:10rem; z-index:1;}
.edu-center__classroom > a{position:relative; display:block; height:100%; padding:12rem 15rem; box-sizing:border-box;}
.edu-center__classroom > a em{display:inline-block; margin-bottom:7rem; font-size:13rem; font-weight:500; color:#fff; line-height:1em; word-break:keep-all;}
.edu-center__classroom > a h3{display:block; font-size:26rem; font-weight:700; color:#fff; line-height:1em;}
.edu-center__classroom > a .btn-more{display:block; margin-top:5rem;}
.edu-center__classroom > a .btn-more span{position:relative; font-size:14rem; padding-right:23rem; font-weight:400; color:#fff;}
.edu-center__classroom > a .btn-more span:before{content:''; position:absolute; top:0; right:0; width:17rem; height:17rem; border-radius:50rem; background:#fff url(../images/main/ic-myclass-arr.svg)no-repeat center; background-size:10rem auto;}
.edu-center__classroom > a .img{position:absolute; right:20rem; bottom:20rem; height:70rem; z-index:-1;}
.edu-center__classroom > a .img img{height:100%;}
.edu-center__info{display:block; width:524rem; border:1px solid #eee;  border-radius:10rem; overflow:hidden;}
.edu-center__info .top {background-color: #f0f7ff; padding: 24rem; border-bottom: 1px solid #e1e8f0; flex-shrink: 0;}
.edu-center__info .name {font-size: 20rem; font-weight: 700; color: #1864ab; margin-bottom: 12rem; letter-spacing: -0.5px; display: inline-block; position: relative;}
.edu-center__info .top ul { display: flex; flex-wrap: wrap; gap: 0; align-items: center; }
.edu-center__info .top ul li {font-size: 14rem; line-height: 1.4; color: #555; display: flex; align-items: center; position: relative; padding-right: 12rem; margin-right: 12rem; }
.edu-center__info .top ul li:not(:last-child)::after {translateY(-50%); width: 1px; height: 10rem; background-color: #cbd5e0; }
.edu-center__info .top ul li:last-child {margin-right: 0; padding-right: 0; }
.edu-center__info .top ul li em {color: #777; margin-right: 6rem; font-weight: 500; }
.edu-center__info .bottom {background-color: #fff; padding: 24rem; flex-grow: 1; }
.edu-center__info .bottom ul {display: grid; gap: 12rem 20rem; grid-template-columns: repeat(2, 1fr); list-style: none; padding: 0; margin: 0; }
.edu-center__info .bottom li { display: flex; align-items: flex-start; font-size: 15rem; line-height: 1.5; color: #343a40; position: relative; padding-left: 10rem; }
.edu-center__info .bottom li::before {content: ''; position: absolute; left: 0; top: 8rem; width: 4rem; height:4rem; background-color: #ced4da; border-radius: 50%; }
.edu-center__info .bottom li em {font-style: normal; color: #868e96; font-weight: 600; min-width: 70rem; margin-right: 10rem; flex-shrink: 0; }
.edu-center__info .bottom li span {color: #212529; font-weight: 500; word-break: break-all; }

@media (max-width: 768px) {
    .edu-center__info .bottom ul {grid-template-columns: 1fr;}
    .edu-center__info .top ul li {margin-right: 0; padding-right: 0; border: none; width: 100%; margin-bottom: 4rem;}
    .edu-center__info .top ul li::after { display: none; }

	.edu-center__cont{flex-wrap: wrap;}
    .edu-center__cont .board{width:100%;}
    .edu-center__info{width:calc(100% - 224rem);}
    .edu-center__info .bottom{padding:20rem;}
}

@media (max-width: 480px) {
    .edu-center__classroom{width:100%; border-radius:7rem;}
	.edu-center__classroom > a{display:flex; align-items: flex-start; flex-direction: column;; padding:15rem;}
	.edu-center__classroom > a em{font-size:10rem;}
	.edu-center__classroom > a h3{font-size:17rem;}
	.edu-center__classroom > a .btn-more{margin-top:2rem;}
	.edu-center__classroom > a .btn-more span{font-size:11rem; padding-right:18rem;}
	.edu-center__classroom > a .btn-more span:before{width:14rem; height:14rem; background-size:8rem auto;}
	.edu-center__classroom > a .img{height:50rem; top:50%; right:10rem; bottom:unset; transform:translateY(-50%)}


    .edu-center__info{width:100%;}

}

/*
.snb{display:flex; gap:10rem; border:1px solid #eee; box-sizing:border-box; margin-bottom:30rem;}
.snb > li{width:calc(100% / 6); border-right:1px solid #eee; box-sizing:border-box;}
.snb > li:last-child{border:none;}
.snb > li a{position:relative; display:block; text-align:center; padding:15rem; box-sizing:border-box;}
.snb > li a:before{content:''; position:absolute; left:0; bottom:-1px; width:100%; height:0; background:var(--color-point);}
.snb > li.active a:before{height:2px;}
.snb > li.active a{color:var(--color-point); font-weight:bold;}
*/
.snb { display: flex; width: 100%; background-color: #f8f9fa; padding: 6px; border-radius: 12px; margin-bottom: 30px; list-style: none; box-sizing: border-box; gap: 6px; border: 1px solid #f1f3f5; }
.snb li { flex: 1; text-align: center; }
.snb li a { display: flex; align-items: center; justify-content: center; height: 48px; font-size: 15px; color: #868e96; text-decoration: none; border-radius: 8px; transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); font-weight: 500; }
.snb li.active a { background-color: #fff; color: #1864ab; font-weight: 700; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0,0,0,0.05); }
.snb li:hover a { color: #495057; background-color: rgba(255, 255, 255, 0.6); }
.edu-center__info .btn-list{display:flex; gap:5rem;}
.year-calendar {border:1px solid #eee; box-sizing:border-box;}
.year-calendar > .area-day{display: grid; grid-template-columns: repeat(32, 1fr); grid-row-gap: 1rem;}
.year-calendar > .area-day > div{display:flex; justify-content: center; align-items: center; height:35rem; border-right:1px solid #eee; border-bottom:1px solid #eee; text-align:center; padding:5rem; font-size:14rem;}
.year-calendar > .area-day > div:last-child{border-right:none;}
.year-calendar .area-month{position:relative;  display: grid; grid-template-columns: repeat(32, 1fr); grid-row-gap: 1rem;}
.year-calendar .area-month > div{display:flex; justify-content: center; align-items: center; height:35rem; border-right:1px solid #eee; border-bottom:1px solid #eee; text-align:center; padding:5rem; font-size:14rem;}
.year-calendar .area-month > div:last-child{border-right:none;}
.year-calendar .area-month:last-child > div{border-bottom:none;}
.year-calendar .area-month > div .event{position:absolute; top:26%; left:3.3%; display: flex; justify-content: center; align-items: center; width:15.2%; height:18rem; border-radius:10rem; background:#eee; color:#fff; font-size:11rem;}
.year-calendar .area-month.oct > div .event{position:absolute; left:28.5%; width:33.6%; border-radius:10rem;}
.year-calendar .area-month > div .event.blue{background:#039be5;}
.year-calendar .area-month > div .event.red{background:#f62c6d;}
.m-year-calendar{}
.m-year-calendar .day{position:relative; display:flex; gap:10rem; align-items: center; justify-content: space-between; padding:10rem; height:40rem; border-bottom:1px solid #eee; box-sizing:border-box;}
.m-year-calendar .day .event:before{content:''; position:absolute; top:15rem; left:0; width:10rem; height:10rem; background:#eee; border-radius:50rem;}
.m-year-calendar .day .event.blue:before{background:#039be5;}
.m-year-calendar .day .event.red:before{background:#f62c6d;}
.m-year-calendar .day .date{padding-left:10rem;}


@media (max-width:768px){
	.edu-center__visual{border-radius:7rem; padding:15rem; margin-bottom:15rem;}
	.edu-center__visual .logo{height:40rem;}
}
@media (max-width:480px){
	.edu-center__visual{border-radius:5rem; padding:10rem; margin-bottom:10rem;}
	.edu-center__visual .logo{height:25rem;}

	.payment .edu-center__visual{margin-bottom:7rem;}
}

/* 공지사항 list */
.page-board .box-title{padding:0;}
.board-top{display:flex; justify-content: space-between; align-items: flex-end; margin:0 0 14rem;}
.board-top .total{font-size:15rem; color:#333;}
.board-top .total i{color:#111;}
.board-search form{position:relative; width:300rem; height:40rem; border:1px solid #eee; box-sizing:border-box; border-radius:5rem; overflow:hidden;}
.board-search form input[type="text"]{border:none; padding:10rem; box-sizing:border-box; width:100%; height:100%; outline:none; font-size:15rem;}
.board-search form button{position:absolute; top:8rem; right:10rem; background:url(../images/common/ic-sch.svg)no-repeat center; background-size:contain; width:20rem; height:20rem; text-indent:-9999px;}
.bo-list__top{display:flex; border-top:1px solid #222; border-bottom:1px solid #ececec; background:#f9f9f9; box-sizing:border-box;}
.bo-list__top > li{padding:15rem 10rem; box-sizing:border-box; text-align:center; font-size:15rem; font-weight:600; color:#222;}
[data-bo-list="num"]{width:5%;}
[data-bo-list="subject"]{width:80%; text-align:left;}
[data-bo-list="date"]{width:10%;}
[data-bo-list="view"]{width:5%;}
/* .bo-list__cont{} */
.bo-list__cont > li{display:flex; border-bottom:1px solid #ececec; box-sizing:border-box;}
.bo-list__cont > li > div{display: flex; align-items: center; justify-content: center; text-align:center; padding:15rem 10rem; font-size:15rem; font-weight:400; color:#333; line-height:1em;}
.bo-list__cont > li > div .badge-notice{display:inline-block; width:45rem; height:24rem; line-height:24rem; text-align:Center; margin-right:4rem; background:var(--color-point); color:#fff; font-size:13rem; border-radius:50rem;}
.bo-list__cont > li > div[data-bo-list="subject"]{text-align:left; justify-content:  flex-start;}
.bo-list__cont > li > div[data-bo-list="subject"] a{display:block; font-size:15rem; font-weight:400; color:#333; line-height:1.2em; word-break:keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition:all 0.3s ease;}
.bo-list__cont > li > div[data-bo-list="subject"] a:hover{color:var(--color-point);}
/* 공지사항 view */
.board-view-head{border-top:1px solid #222; border-bottom:1px solid #eee; padding:25rem; box-sizing:border-box;}
.board-view-head .subject{font-size:22rem; font-weight:600; color:#222; line-height:1.2em; word-break:keep-all;}
.board-view-head .badge-notice{position:relative; top:-2rem; display:inline-block; width:45rem; height:24rem; line-height:24rem; text-align:Center; margin-right:4rem; background:var(--color-point); color:#fff; font-size:14rem; border-radius:50rem;}
.board-view-head h3{font-size:22rem; font-weight:600; color:#222; line-height:1.2em; word-break:keep-all;}
.board-view-head .info{display:flex; gap:24rem; align-items: center; margin-top:15rem;}
.board-view-head .info span{position:relative; font-size:15rem; color:#666; line-height:1em;}
.board-view-head .info span:before{content:''; position:absolute; top:1rem; right:-12rem; width:1px; height:12rem; background:#ddd; box-sizing:border-box;}
.board-view-head .info span:last-child:before{display:none;}
.board-view-body{display:block; padding:50rem 25rem; border-bottom:1px solid #eee; box-sizing:border-box;}
.board-view-body .content{min-height:300rem; font-size:15rem; color:#555;}
.attachments .label{display:none;}
/* .attachments .file-list{} */
.attachments .file-list > li{display:block; width:100%; padding:14rem; background:#f4f4f4; box-sizing:border-box; border-radius:5rem; margin-bottom:5rem;}
.attachments .file-list > li:last-child{margin:0;}
.attachments .file-list > li a{display:flex; align-items: center; font-size:15rem; font-weight:600; color:#111; line-height:1em;}
.attachments .file-list > li a .ic-file{display:inline-block; width:17rem; height:17rem; margin-right:6rem; background:url(../images/board/ic-download.svg)no-repeat center; background-size:contain;}
.attachments .file-list > li a .size{display:inline-block; margin-left:5rem; font-size:14rem; font-weight:400;}
.board-view-wrap .btn-wrap{margin:40rem auto 0;}



@media all and (max-width:768px){
	.bo-list__top{display:none;}
	.bo-list__cont > li{display:block; padding:15rem 10rem;}
	.bo-list__cont > li:first-child{ border-top:1px solid #222;}
	.bo-list__cont > li > div{display:block; padding:0; text-align:left;}
	[data-bo-list="subject"]{width:100%;}
	[data-bo-list="num"],
	[data-bo-list="date"],
	[data-bo-list="view"]{width:auto;}
	.bo-list__cont > li > div[data-bo-list="num"]{display:none;}
	.bo-list__cont > li.pinned > div[data-bo-list="num"]{display:block; margin-bottom:10rem;}
	.bo-list__cont > li > div[data-bo-list="subject"]{margin:0 0 6rem;}
	.bo-list__cont > li > div[data-bo-list="subject"] > a{font-weight:600;}
	.bo-list__cont > li > div[data-bo-list="date"],
	.bo-list__cont > li > div[data-bo-list="view"]{display:inline-block !important; font-size:14rem; color:#666; line-height:1em;}
	[data-bo-list="date"]{position:relative; margin-right:10rem;}
	[data-bo-list="date"]:before{content:''; position:absolute; top:1px; right:-8rem; width:1px; height:10rem; background:#ddd;}
}
@media all and (max-width:480px){
	.board-top{margin:0 0 6rem; flex-direction: column-reverse; align-items: flex-start; gap:10rem;}
	.board-top .total{font-size:11rem;}
	.board-top .board-search{width:100%;}
	.board-search form{width:100%; height:30rem;}
	.board-search form input[type="text"]{font-size:11rem; padding:5rem;}
	.board-search form button{width:15rem; height:15rem; top:6rem; right:5rem;}
	.bo-list__cont > li{padding:10rem 0rem;}
	.bo-list__cont > li > div{font-size:11rem;}
	.bo-list__cont > li > div .badge-notice{width:34rem; height:16rem; line-height:16rem; font-size:10rem;}
	.bo-list__cont > li.pinned > div[data-bo-list="num"]{margin-bottom:5rem;}
	.bo-list__cont > li > div[data-bo-list="subject"]{margin:0;}
	.bo-list__cont > li > div[data-bo-list="subject"] > a{font-weight:600; font-size:13rem;}
	.bo-list__cont > li > div[data-bo-list="date"],
	.bo-list__cont > li > div[data-bo-list="view"]{font-size:11rem;}
	[data-bo-list="date"]{position:relative; margin-right:8rem;}
	[data-bo-list="date"]:before{content:''; position:absolute; top:1px; right:-6rem; width:1px; height:9rem; background:#ddd;}

	.board-view-head{padding:15rem 0;}
	.board-view-head .badge-notice{width:34rem; height:20rem; line-height:20rem; font-size:10rem;}
	.board-view-head .subject{font-size:14rem;}
	.board-view-head .info{gap:14rem; margin-top:7rem;}
	.board-view-head .info span{font-size:11rem; }
	.board-view-head .info span:before{height:9rem; right:-7rem;}
	.board-view-body{padding:15rem 0;}
	.board-view-body .content{min-height:160rem; font-size:11rem;}
	.board-view-body .content p{font-size:11rem;}
	.attachments .file-list > li{padding:8rem;}
	.attachments .file-list > li a,
	.attachments .file-list > li a .size{font-size:11rem;}
	.attachments .file-list > li a .size{margin-left:3rem;}
	.attachments .file-list > li a .ic-file{width:12rem; height:12rem; margin-right:3rem;}
	.board-view-wrap .btn-wrap{margin:25rem auto 0;}
}


/* faq */
.faq-category-tabs{display: flex; flex-wrap: wrap; gap:6rem; justify-content: flex-start; margin-bottom:15rem;}
.category-btn {display: inline-block; padding:6rem 12rem; border: 1px solid #ddd; background: #fff; color: #666; border-radius:5rem; text-decoration: none; transition: all 0.2s; font-size: 15rem; }
.category-btn:hover {border-color: #0076fd; color: #0076fd; }
.category-btn.active {background: #0076fd; color: #fff; border-color: #0076fd; font-weight: 500; }
.category-badge {color:var(--color-point); margin-right:3rem;}
/* Pagination 스타일 보정 (기존 CSS와 연동) */
/* .pagination { margin-top: 40px; display: flex; justify-content: center; align-items: center; } */
/* .pagination a, .pagination ol 등은 site의 main css(content.css)를 따름 */
/* ==========================================================================
   Pagination 신규 Style
   layout.css 1470~1479 제거
   ========================================================================== */
.pagination { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 6rem; 
    margin: 50rem 0; 
    padding: 20rem 0; 
}

/* 중복 적용 방지 */
.pagination .pagination {
    margin: 0;
    padding: 0;
}

.pagination ol { 
    display: flex; 
    gap: 6rem; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
}

.pagination li { 
    display: flex; 
}

.pagination li a,
.pagination .btn_pager { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 42rem; 
    height: 42rem; 
    border-radius: 12rem; 
    border: 1px solid #e5e7eb; 
    background: #fff; 
    color: #4b5563; 
    font-size: 15rem; 
    font-weight: 600; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* layout.css 적용된 부분 제거용 */
.pagination .btn_pager::after,
.pagination .btn_end::after {
    display: none !important;
    content: none !important;
}

.pagination li a:hover,
.pagination .btn_pager:hover { 
    border-color: var(--color-point); 
    color: var(--color-point); 
    background-color: #f0f7ff; 
    transform: translateY(-1rem) scale(1.03); 
    box-shadow: 0 4rem 12rem rgba(0, 0, 0, 0.08);
}

.pagination li.on a { 
    background: var(--color-point); 
    border-color: var(--color-point); 
    color: #fff; 
    box-shadow: 0 4rem 12rem rgba(0, 118, 253, 0.25); 
}

.pagination .btn_pager { 
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16rem; /* 기본크기 */
}

.pagination .btn_pager:hover {
    background-size: 18rem; /* 호버시 */
}

.pagination .btn_pager.first { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='11 17 6 12 11 7'%3E%3C/polyline%3E%3Cpolyline points='18 17 13 12 18 7'%3E%3C/polyline%3E%3C/svg%3E"); 
}

.pagination .btn_pager.prev { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E"); 
}

.pagination .btn_pager.next { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"); 
}

.pagination .btn_pager.last { 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='13 17 18 12 13 7'%3E%3C/polyline%3E%3Cpolyline points='6 17 11 12 6 7'%3E%3C/polyline%3E%3C/svg%3E"); 
}

/* 호버시 색상 변경 */
.pagination .btn_pager:hover.first { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230076fd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='11 17 6 12 11 7'%3E%3C/polyline%3E%3Cpolyline points='18 17 13 12 18 7'%3E%3C/polyline%3E%3C/svg%3E"); }
.pagination .btn_pager:hover.prev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230076fd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'%3E%3C/polyline%3E%3C/svg%3E"); }
.pagination .btn_pager:hover.next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230076fd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"); }
.pagination .btn_pager:hover.last { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230076fd' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='13 17 18 12 13 7'%3E%3C/polyline%3E%3Cpolyline points='6 17 11 12 6 7'%3E%3C/polyline%3E%3C/svg%3E"); }

@media all and (max-width: 768px) {
    .pagination { gap: 4rem; margin: 30rem 0; }
    .pagination li a, .pagination .btn_pager { width: 36rem; height: 36rem; border-radius: 8rem; font-size: 13rem; }
}

@media all and (max-width: 480px) {
    .pagination { gap: 3rem; margin: 20rem 0; }
    .pagination li a, .pagination .btn_pager { width: 32rem; height: 32rem; border-radius: 6rem; font-size: 11rem; }
}

.accordion {width:100%; border-top:1px solid #222; box-sizing:border-box;}
.accordion > li {border-bottom: 1px solid #e5e5e5;}
.accordion > li > a {position:relative; display:flex; align-items: center; gap:10rem; padding:20rem; box-sizing:border-box;}
.accordion .icon{display:flex; justify-content: center; align-items: center; width:30rem; height:30rem; line-height:30rem; background:#eee; border-radius:5rem; text-align:center;}
.accordion .icon{ flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 32rem; height: 32rem; border-radius:10rem; font-size: 16rem; font-weight: 500; }
.accordion .icon.question { background: #333; color: #fff; }
.accordion .icon.answer { background: var(--color-point, #0076fd); color: #fff; }
.accordion .title { font-size: 16rem; font-weight: 500; color: #222; line-height: 1.5; word-break: keep-all; }
.accordion > li > a::after {content: ""; position: absolute; right: 20rem; top: 50%; width:30rem; height:30rem; background:url(../images/content/ic-accordion-arr.svg)no-repeat center; background-size:10rem auto; transform: translateY(-50%); transition: transform 0.3s ease;}
.accordion > li.active > a{background: #fff;}
.accordion > li.active > a::after {transform: translateY(-50%) rotate(180deg);}
.accordion .list { display: none; padding:20rem; background: #f9f9f9; border-top: 1px dashed #e9e9e9; box-sizing: border-box; }
.accordion .list .box-flex { display: flex; align-items: flex-start; gap: 10rem; }
.accordion .cont-answer { flex: 1; padding-top:4rem; font-size: 15rem; color: #555; line-height: 1.6; word-break: break-all; }
.no-data { font-size: 15rem; color: #999; }
.accordion > li > a:hover { background-color: #f8f9fa; }

@media all and (max-width:768px){
	.accordion > li > a{padding:15rem;}
	.accordion > li > a::after{right:10rem;}
	.accordion .list{padding:15rem;}
}
@media all and (max-width:480px){
	.faq-category-tabs{gap:3rem; margin-top:10rem; margin-bottom:8rem;}
	.category-btn{font-size:11rem; padding:3rem 6rem; border-radius:4rem;}
	.accordion > li > a{padding:10rem; gap:6rem;}
	.accordion > li > a::after{width:20rem; height:20rem; right:5rem; background-size:8rem auto;}
	.accordion .icon{width:20rem; height:20rem; line-height:20rem; font-size:12rem; border-radius:6rem;}
	.accordion .title{font-size:12rem;}
	.accordion .list{padding:10rem;}
	.accordion .list .box-flex{gap:6rem;}
	.accordion .cont-answer{font-size:12rem; padding-top:2rem; line-height:1.4em;}
}

/* 1:1 문의 */
.cs_sub03 .board-search form {width: 350rem;}
.cs_sub03 .search-box { display: flex; }
.cs_sub03 .search-box select { min-width: 100rem; border:none; font-size:15rem; }
.cs_sub03 .search-box input{width:calc(100% - 100rem);}
.cs_sub03 [data-bo-list="category"] { width: 10%; text-align: center; }
.cs_sub03 [data-bo-list="subject"] { width: 55%; text-align: left; }
.cs_sub03 [data-bo-list="writer"] { width: 10%; text-align: center; }
.cs_sub03 [data-bo-list="date"] { width: 15%; text-align: center; }
.cs_sub03 [data-bo-list="status"] { width: 10%; text-align: center; }
.cs_sub03 .bo-list__top {justify-content: center;}
.cs_sub03 .bo-list__cont > li {position:relative; justify-content: center;}
.cs_sub03 .bo-list__cont > li > div {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs_sub03 .bo-list__cont > li > div[data-bo-list="category"] em{display:inline-block; background:#e5ebf1; border:1px solid transparent;  box-sizing:border-box; color:#364254; padding:4rem 10rem; border-radius:5rem; font-size: 13rem; font-weight: 600; } 
.cs_sub03 .secret-icon {position:relative; top:-1rem; margin-right: 5rem; width: 17rem; vertical-align: middle; }
.cs_sub03 .bo-list__cont > li > div[data-bo-list="subject"] a {display: flex !important; align-items: center; width:100%;}
.cs_sub03 .bo-list__cont > li > div[data-bo-list="subject"] a .title{display: flex; align-items: center; flex:1; width:calc(100% - 30rem);}
.cs_sub03 .bo-list__cont > li > div[data-bo-list="subject"] a .title-text{display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; font-size:15rem; color:#333; line-height:1em; word-break:keep-all;}
.cs_sub03 .reply-cnt {display: flex; justify-content: center; align-items: center; margin-left:5rem; height:20rem; padding:2rem 6rem; background:#007bff; font-weight:500; color:#fff; font-size:13rem; line-height:1em; border-radius:50rem;}
.cs_sub03 .bo-list__cont > li > div .badge{display:flex; justify-content: center; align-items: center; padding: 2rem; width: 75rem; height: 27rem; font-size: 14rem; font-weight: 400; color: #a4a4a4; background: #fff;  border: 1px solid #d5d5d5; border-radius:6rem; font-size:14rem; font-weight:600; box-sizing: border-box; text-align: center; cursor:default; }
.cs_sub03 .bo-list__cont > li > div .badge.complete{border-color:var(--color-point); color:var(--color-point);}
.cs_sub03 .btn-wrap{margin-top:30rem;}
.btn-wrap[data-flex]{gap:10rem;}

/* write */
.table-form col.col-th{ width: 16%; transition: width 0.3s; }
.table-form col.col-td{ width: 84%; transition: width 0.3s; }

/* view */
.board-view-head .cate{position: relative; top: -2rem; display:inline-block;  width:70rem; height:26rem; line-height:18rem; margin-right: 4rem; background:#e5ebf1; border:1px solid transparent;  box-sizing:border-box; color:#364254; padding:4rem 10rem; border-radius:5rem; font-size: 14rem; font-weight: 600; text-align:center;} 
.board-view-head .info .state{position:relative; top:-1px; display:inline-block; padding:4rem 7rem; background:#999; font-size:13rem; font-weight:500; line-height:1em; color:#fff; border-radius:3rem;}
.board-view-head .info .state.answered{background:var(--color-point);}
.reply-area{padding-top: 20rem;}
.reply-item{margin-bottom:15rem; padding: 20rem; border-radius: 7rem; box-sizing:border-box;}
.reply-meta{display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12rem; font-weight: bold;  border-bottom: 1px dashed #d8dfe8; padding-bottom: 12rem;}
.reply-meta span.admin{color: #0076fd;}
.reply-meta .date{font-weight: normal; font-size:14rem; color:#999;}
.reply-content{display:block; line-height: 1.6em; font-size:15rem; font-size: 15rem; line-height: 1.4em;  word-break: keep-all;}

@media all and (max-width:768px){
	.cs_sub03 [data-bo-list="num"]{display:none;}
	.cs_sub03 [data-bo-list="num"], [data-bo-list="category"], [data-bo-list="writer"], [data-bo-list="status"] { width: auto; }
	.cs_sub03 [data-bo-list="subject"] { width: 100%; margin:10rem 0;}
	.cs_sub03 [data-bo-list="category"]{width:auto; text-align:left;}
	.cs_sub03 .bo-list__cont > li > div[data-bo-list="category"] em{display:flex; justify-content: center; align-items: center; width:40rem; height:20rem; line-height:1.1em;}
	.cs_sub03 .bo-list__cont > li > div .badge{width:65rem; height:24rem; font-size:13rem; line-height:1.1em;}
	/* .bo-list__cont > li > div[data-bo-list="subject"]{} */
	.cs_sub03 [data-bo-list="writer"],
	.cs_sub03 [data-bo-list="date"]{display:inline-block; width:auto;}
	.cs_sub03 [data-bo-list="status"]{position:absolute; top:15rem; right:10rem; width:auto;}
	.cs_sub03 .reply-cnt{height:18rem;}

}
@media all and (max-width:480px){
	.cs_sub03 .search-box{height:30rem;}
	.cs_sub03 .board-search form{width:100%; min-height:30rem;}
	.cs_sub03 .search-box select{padding-left:7rem; min-width:88rem; min-height:initial; font-size:11rem;}
	.cs_sub03 .search-box input{width:calc(100% - 88rem);}
	.cs_sub03 .bo-list__cont > li > div[data-bo-list="category"] em{font-size:10rem; width:30rem; height:18rem; border-radius:4rem;}
	.cs_sub03 .secret-icon{width:13rem; margin-right:3rem;}
	.cs_sub03 .bo-list__cont > li > div[data-bo-list="subject"]{margin:10rem 0 2rem;}
	/* .cs_sub03 .bo-list__cont > li > div[data-bo-list="subject"] a .title{} */
	.cs_sub03 .bo-list__cont > li > div[data-bo-list="subject"] a .title-text{font-size:13rem;}
	.cs_sub03 .reply-cnt{margin-left:3rem; height:15rem; font-size:10rem; padding:1rem 5rem; line-height:1.2em;}
	.cs_sub03 [data-bo-list="status"]{top:10rem; right:0;}
	.cs_sub03 .bo-list__cont > li > div .badge{width:50rem; font-size:10rem; height:18rem; border-radius:4rem; line-height:1.2em;}
	.cs_sub03 .btn-wrap{margin-top:15rem;}
	.btn-wrap[data-flex]{gap:5rem;}

	.board-view-head .cate{width:50rem; height:18rem; margin-right:2rem; font-size:10rem; line-height:12rem; padding:3rem 5rem; border-radius:3rem;}
	.board-view-head .info .state{font-size:10rem; padding:3rem 5rem; }
	.reply-area{padding-top:12rem;}
	.reply-item{padding:10rem; border-radius:5rem; margin-bottom:8rem;}
	.reply-meta{font-size:12rem; padding-bottom:8rem; margin-bottom:8rem;}
	.reply-meta .date{font-size:11rem;}
	.reply-content{font-size:12rem; line-height:1.3em;}
}


/* 수료증발급 */
#certificate[data-pop-layer="layer"] .popBox{--popWid: 550rem; --popHig:785rem; padding:0; border-radius:0;}
#certificate[data-pop-layer="layer"] .popBox .btn_close{display: flex; justify-content: center; align-items: center; width:40rem; height:40rem; top:0; right:-50rem;}
.area-certificate{position:relative; width:100%; height:100%;}
.area-certificate .img{width:100%; height:100%;}
.area-certificate .img img{width:100%; height:100%;}
.area-certificate .info-box{position:absolute;top:30%;left: 50%;width: 80%;transform: translateX(-50%);}
.area-certificate .info-box .info-list{padding:0;}
.area-certificate .info-box .info-list > li{display:flex; gap:20rem; margin-bottom:10rem;}
.area-certificate .info-box .info-list > li .title{width:90rem; display:flex; align-items: center; justify-content: space-between; }
.area-certificate .info-box .info-list > li .desc{position:relative; width:calc(100% - 100rem);}
.area-certificate .info-box .info-list > li .desc:before{content:':'; position:absolute; top:0; left:-10rem; font-size:15rem; color:#333;}
.cartificate-txt{margin:30rem 0 20rem; text-align:center;}
.certificate-date{text-align:Center;}
.watermark{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); font-size: 70rem; font-weight: bold; color: rgba(0,0,0,0.1); pointer-events: none; white-space: nowrap; z-index: 5;}
#certificate .btn-list{display: flex; flex-direction: column; gap: 7rem; width:40rem; height:auto; position:absolute; bottom:0; right:-50rem;}
#certificate .btn-list a{width:40rem; height:40rem; background:#fff; border-radius:3rem;}
#certificate .btn-list a svg{width:18rem; height:18rem;}


@media (max-width: 768px){
	#certificate[data-pop-layer="layer"] .popBox{--popWid:450rem; --popHig:645rem;}
}
@media (max-width: 620px){
	#certificate[data-pop-layer="layer"] .popBox{--popWid:400rem; --popHig:570rem;}
}
@media (max-width: 480px){
	#certificate[data-pop-layer="layer"] .popBox{--popWid:280rem; --popHig:400rem;}
	.area-certificate .info-box .info-list > li{font-size:11rem; gap:10rem; margin-bottom:3rem;}
	.area-certificate .info-box .info-list > li .desc:before{top:-3rem; left:-6rem; font-size:12rem;}
	.area-certificate .info-box .info-list > li .title{width:45rem;}
	.area-certificate .info-box .info-list > li .desc{width:calc(100% - 55rem);}
	.cartificate-txt{margin:10rem 0 5rem;font-size:11rem;}
	.cartificate-txt br{display:none;}
	.certificate-date{font-size:11rem;}
	.watermark{font-size:50rem;}
	#certificate[data-pop-layer="layer"] .popBox .btn_close{width:24rem; height:24rem; right:-30rem;}
	#certificate .btn-list{flex-direction: row; right:unset; bottom:-40rem; left:50%; width:auto; transform:translateX(-50%);}
	#certificate .btn-list{gap:4rem;}
	#certificate .btn-list a{width:26rem; height:26rem;}
}

/* 나의 학습질문 */
.page-mypage.qna .page-title{margin-bottom:20rem;}
.page-mypage .qna-list{flex-wrap: wrap; gap:20rem;}
.page-mypage .qna-item{display:block; width:calc((100% / 4) - 15rem); padding:12rem; border-radius:10rem; border:1px solid #eee;}
.page-mypage.qna .state{display:inline-block; padding:5rem; font-size:13rem; background:#eee; border-radius:3rem; line-height:1em; color:#777;}
.page-mypage.qna .state.complete{background:var(--color-point); color:#fff;}
.page-mypage .qna-item .title{display:block; margin:10rem 0 0; font-size:17rem; font-weight:600; color:#222; line-height:1.3em; word-break: keep-all; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.page-mypage .qna-item .desc{display:block; margin:5rem 0 0; font-size:15rem; font-weight:400; color:#666; line-height:1.4em; word-break: keep-all; text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;}
.page-mypage .qna-item .date{display:inline-block; margin-top:10rem; font-size:14rem; font-weight:400; color:#999;}
.class-name{display:block; margin-top:12rem; padding-top:8rem; border-top:1px solid #eee; box-sizing:Border-box;}
.class-name span{position:relative; padding-left:18rem; display:inline-block; font-size:14rem; color:#333; font-weight:400;}
.class-name span:before{content:''; position:absolute; top:2rem; left:0; width:13rem; height:13rem; background:url(../images/content/ic-video.svg)no-repeat center; background-size:contain;}
.qna-detail__top{position:relative;}
.more-menu{position:absolute; right:0; bottom:0;}
.page-mypage.qna .qna-detail .state{margin:0 0 10rem;}
.page-mypage.qna .qna-detail .title{display:block; margin:0; font-size:20rem; font-weight:600; color:#222; line-height:1.2em; word-break:keep-all;}
.page-mypage.qna .qna-detail .info{display:flex; gap:20rem; margin:8rem 0 0; font-size:15rem; color:#888;}
.page-mypage.qna .qna-detail .info em{position:relative; }
.page-mypage.qna .qna-detail .info em:before{content:''; position:absolute; top:3rem; left:-10rem; width:1px; height:12rem; background:#ddd;}
.page-mypage.qna .qna-cont{display:block; margin-top:15rem; padding-top:15rem; border-top:1px solid #eee; box-sizing:border-box; min-height:150rem;}
.page-mypage.qna .qna-cont p{display:block; font-size:16rem; font-weight:400; color:#444; line-height:1.5em; word-break:keep-all;}
.class-info{margin:20rem 0 0; display:block; border:1px solid #eee; box-sizing:border-box; border-radius:8rem;}
.class-info > a{position:relative; display:flex; align-items: center; gap:14rem; padding:15rem; box-sizing:border-box;}
.class-info > a .img{width:120rem; border-radius:5rem; overflow:hidden;}
.class-info > a .img img{width:100%; height:100%;}
.class-info > a .title{width:calc(100% - 234rem);}
.class-info > a .title em{display:inline-block; font-size:13rem; font-weight:400; color:#666; line-height:1em; margin-bottom:8rem;}
.class-info > a .title h3{display:block; font-size:17rem; font-weight:600; color:#222; line-height:1em; word-break: keep-all; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.class-info > a .btn-more{position:absolute; top:50%; right:20rem; transform:translateY(-50%) rotate(-180deg); width:35rem; height:35rem; background:#eee url(../images/main/ic-arr.svg) no-repeat center; border-radius:10rem;}
.page-mypage.qna .qna-detail .btn-wrap{margin:40rem auto 0;}
.page-mypage.qna .qna-detail .btn-wrap button{text-align:center;}
.page-mypage.qna .qna-list .nodate{display:block; width:100%; padding:100rem 0; text-align:center;}
.page-mypage.qna .qna-list .nodate p{display:block; font-size:15rem; font-weight:400; color:#666; line-height:1em; word-break:keep-all; color:#999;}


@media (max-width: 1023px){
	.page-mypage .qna-item{width: calc((100% / 3) - 13.5rem);}
}
@media (max-width: 768px){
	.page-mypage .qna-list{gap:14rem;}
	.page-mypage .qna-item{width: calc((100% / 2) - 7rem);}
}
@media (max-width: 480px){
	.page-mypage .qna-list{gap:10rem;}
	.page-mypage .qna-item{padding:10rem; width:100%; border-radius:5rem;}
	.page-mypage.qna .state{font-size:10rem;}
	.page-mypage .qna-item .title{margin:6rem 0 0; font-size:13rem;}
	.page-mypage .qna-item .desc{margin:3rem 0 0; font-size:12rem;}
	.page-mypage .qna-item .date{margin-top:5rem; font-size:11rem;}
	.class-name{margin-top:6rem; padding-top:5rem;}
	.class-name span{font-size:11rem;}
	.page-mypage.qna .qna-list .nodate p{font-size:12rem;}

	.page-mypage.qna .qna-detail .state{margin:0 0 7rem;}
	.page-mypage.qna .qna-detail .title{font-size:13rem;}
	.page-mypage.qna .qna-detail .info{font-size:11rem;}
	.page-mypage.qna .qna-cont p{font-size:12rem;}

	.class-info{border-radius:5rem;}
	.class-info > a{padding:8rem; gap:6rem;}
	.class-info > a .img{width:60rem; border-radius:3rem;}
	.class-info > a .title{width:calc(100% - 105rem);}
	.class-info > a .title h3{font-size:13rem;}
	.class-info > a .title em{font-size:11rem; margin-bottom:4rem;}
	.class-info > a .btn-more{width:25rem; height:25rem; border-radius:5rem; right:10rem;}
	.page-mypage.qna .qna-cont{margin-top:8rem; padding-top:8rem; min-height:100rem;}
	.qna-answer{margin:10rem 0 0; padding:10rem; border-radius:5rem;}
	.qna-answer h3{font-size:15rem; margin-bottom:7rem;}
	.answer-cont{margin-top:5rem;}
	.answer-cont p{font-size:12rem;}
	.page-mypage.qna .qna-detail .btn-wrap{margin:20rem auto 0;}
}


/* 만족도조사 */
#survey[data-pop-layer="layer"] .popBox{--popWid:1000rem;}
#survey[data-pop-layer="layer"] .popBox .popConts{padding:0 10rem 0 0; border:None; border-top:1px solid #eee; border-radius:0; min-height:580rem;}
#survey .survey-item{margin-bottom:15rem;}
#survey .survey-item .subject{display:block; padding:10rem; font-size:17rem; font-weight:500; color:#222; line-height:1.2em; word-break:keep-all; background:#f9f9f9; border:1px solid #eee; box-sizing:border-box; border-radius:5rem;}
#survey .survey-item .radio-list{margin-top:10rem; gap:10rem;}
#survey .survey-item .box-textarea{position:relative; margin-top:10rem;}
#survey .survey-item textarea{width:100%; height:120rem; padding:10rem; border:1px solid #eee; box-sizing:Border-box;}
.txt-count{position:absolute; right:10rem; bottom:10rem;}
#content.survey{padding:0;}
.survey-page { padding: 100rem 0; background: #f8fafc; min-height: calc(100vh - 200rem); }
.survey-container { max-width: 800rem; margin: 0 auto; }
.survey-header{text-align: center; margin-bottom: 40rem; background: #fff; padding: 40rem;  border-radius: 20rem; box-shadow: 0 10rem 25rem rgba(0,0,0,0.05); }
.survey-header .badge {display: inline-block; padding: 6rem 16rem; background: #eff6ff; color: #2563eb; border-radius: 100rem; font-size: 14rem; font-weight: 600; margin-bottom: 16rem; }
.survey-header h2 { font-size: 32rem; color: #1e293b; margin-bottom: 16rem; font-weight: 700; word-break:keep-all; line-height:1.2em;}
.survey-header .desc { color: #64748b; font-size: 16rem; line-height: 1.6; margin-bottom: 24rem; word-break:keep-all;}
.survey-header .course-info { padding: 12rem 20rem; background: #f1f5f9; border-radius: 10rem; display: inline-block; color: #1e293b; }
.question-list { display: flex; flex-direction: column; gap: 24rem; }
.question-item { background: #fff; padding: 30rem; border-radius: 20rem; box-shadow: 0 4rem 6rem rgba(0,0,0,0.02); border: 1rem solid #f1f5f9; transition: transform 0.2s, box-shadow 0.2s; }
.question-item:hover { transform: translateY(-2rem); box-shadow: 0 10rem 15rem rgba(0,0,0,0.05); }
.q-title { display: flex; gap: 12rem; margin-bottom: 20rem; }
.q-title .num { font-size: 20rem; font-weight: 700; color: #2563eb; }
.q-title h3 { font-size: 20rem; color: #1e293b; font-weight: 600; }

.radio-group { display: flex; flex-direction: column; gap: 12rem; }
.radio-label { display: flex; align-items: center; gap: 12rem; cursor: pointer; padding: 12rem 16rem; border: 1px solid #e2e8f0; border-radius: 12rem; transition: all 0.2s; }
.radio-label:hover { background: #f8fafc; border-color: #cbd5e1; }
.radio-label input[type="radio"] { display: none; }
.custom-radio { width: 20rem; height: 20rem; border: 2px solid #cbd5e1; border-radius: 50%; position: relative; transition: all 0.2s; }
.radio-label input[type="radio"]:checked + .custom-radio { border-color: #2563eb; background: #2563eb; }
.radio-label input[type="radio"]:checked + .custom-radio::after { content: ''; position: absolute; width: 8rem; height: 8rem; background: #fff; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.radio-label input[type="radio"]:checked ~ .text { color: #2563eb; font-weight: 600; }
.rating-group { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12rem; }
.rating-label { cursor: pointer; }
.rating-label input { display: none; }
.rating-box { display: flex; flex-direction: column; align-items: center; gap: 10rem; padding: 16rem 8rem; border: 1px solid #e2e8f0; border-radius: 12rem; text-align: center; transition: all 0.2s; height: 100%; }
.rating-box .score { width: 32rem; height: 32rem; display: flex; align-items: center; justify-content: center; background: #f1f5f9; border-radius: 50%; font-weight: 700; font-size: 16rem; color: #64748b; }
.rating-box .label { font-size: 15rem; color: #64748b; word-break: keep-all; }
.rating-label input:checked + .rating-box { background: #eff6ff; border-color: #2563eb; }
.rating-label input:checked + .rating-box .score { background: #2563eb; color: #fff; }
.rating-label input:checked + .rating-box .label { color: #2563eb; font-weight: 600; }
.survey-textarea { width: 100%; min-height: 120rem; padding: 16rem; border: 1px solid #e2e8f0; border-radius: 12rem; font-size: 16rem; resize: vertical; outline: none; transition: border-color 0.2s; }
.survey-textarea:focus { border-color: #2563eb; }
.form-actions { margin-top: 60rem; text-align: center; }
.form-actions .btn-submit { padding: 18rem 60rem; background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: #fff; border: none; border-radius: 50rem; font-size: 18rem; font-weight: 700; cursor: pointer; box-shadow: 0 10rem 20rem rgba(37,99,235,0.2); transition: all 0.3s; }
.form-actions .btn-submit:hover { transform: translateY(-3rem); box-shadow: 0 15rem 30rem rgba(37,99,235,0.3); }

@media (max-width: 768px) {
	.survey-page{padding:50rem 0;}
	.survey-header .badge{margin-bottom:12rem;}
	.survey-header h2{margin-bottom:12rem; font-size:27rem;}
    .rating-group { grid-template-columns: 1fr; }
    .rating-box { flex-direction: row; gap: 12rem; padding: 12rem 16rem; }
	.form-actions{margin-top:40rem;}
	.form-actions .btn-submit{padding:15rem 25rem; font-size:17rem;}
}
@media (max-width: 620px) {
	.survey-header h2{font-size:24rem;}
}
@media (max-width: 480px) {
	.survey-page{padding:20rem 0 30rem;}
	.survey-header{padding:20rem; border-radius:10rem; margin-bottom:20rem;}
	.survey-header .badge{padding:5rem 10rem; font-size:11rem;}
	.survey-header h2{font-size:17rem; margin-bottom:8rem;}
	.survey-header .desc{font-size:12rem; line-height:1.4em; margin-bottom:14rem;}
	.survey-header .course-info{padding:5rem 10rem; font-size:12rem; border-radius:5rem;}
	.question-list{gap:12rem;}
	.question-item{padding:20rem 14rem; border-radius:10rem;}
	.q-title{gap:4rem; margin-bottom:10rem;}
	.q-title .num,
	.q-title h3{font-size:13rem;}
	.radio-group{gap:6rem;}
	.radio-label{gap:5rem; padding:10rem; border-radius:7rem;}
	.custom-radio{width:14rem; height:14rem;}
	.radio-label .text{font-size:12rem;}
	.survey-textarea{padding:10rem; font-size:12rem; border-radius:7rem;}
	.rating-group{gap:6rem;}
	.rating-box{padding:10rem; gap:5rem; border-radius:7rem;}
	.rating-box .score{width:20rem; height:20rem; font-size:12rem;}
	.rating-box .label{font-size:12rem;}
	.form-actions{margin-top:20rem;}
	.form-actions .btn-submit{padding:10rem 20rem; font-size:13rem;}
}

/* 정보변경 */
.myinfo .box-table__wrap{margin-top: 30rem; }
.myinfo .box-table__wrap .box-top{display:flex; justify-content: space-between; align-items: flex-end; margin-bottom:10rem;}
.myinfo .box-table__wrap .box-top h4{margin:0;}
.myinfo .box-table__wrap h4{font-size: 18rem; font-weight: bold; color: #333; margin-bottom: 10rem;}
.myinfo .box-table__wrap input,
.myinfo .box-table__wrap select{ display:block; padding:10rem;  height:40rem; border-radius:5rem; border:1px solid #e9e9e9; box-sizing:border-box; font-size:15rem; font-weight:400; color:#333; line-height:1em; } 
.myinfo table.table tbody td .time{display:block; font-size: 12rem; color: #888; line-height:1em; margin-top:5rem;}
.myinfo table.table tbody td .nodata{font-size:15rem; color:#999; line-height:1em;}
.myinfo .btn-basic{font-size:14rem; padding:5rem 10rem; background:#eee; border-radius:5rem; border:1px solid #ddd; box-sizing:border-box; color:#888; font-weight:500;}
.myinfo .btn-disable{font-size:14rem; padding:5rem 10rem; background:#eee; border-radius:5rem; border:1px solid #ddd; box-sizing:border-box; color:#888; font-weight:500; opacity:0.5;}
.myinfo .list-info{margin-top:15rem;}
.myinfo .btn-wrap{margin:40rem auto;}
.myinfo .btn-wrap .btn-basic{padding: 12rem 40rem; background:var(--color-point); color: #fff; border: none; border-radius: 6rem; cursor: pointer; font-size: 16rem; font-weight: 500;}
.box-withdraw{text-align: right; margin-top: 20rem; border-top: 1px solid #eee; padding-top: 20rem;}
.box-withdraw span{font-size: 13rem; color: #666;}
.box-withdraw span a{color: #dc3545; text-decoration: underline;}

#btn-webauthn-register{padding: 7rem 10rem; background: #007bff; color: #fff; border: none; border-radius: 5rem; font-size: 14rem; display: none;}
.btn-edit-credential{padding: 5px 10px; background: #007bff; color: #fff; border: none; border-radius: 5rem; font-size: 12rem; cursor: pointer; margin-right: 3rem;}
.btn-save-credential{display: none; padding: 5px 10px; background: #28a745; color: #fff; border: none; border-radius: 5rem; font-size: 12rem; cursor: pointer; margin-right: 3rem; }
.btn-delete-credential{padding: 5px 10px; background: #dc3545; color: #fff; border: none; border-radius: 5rem; font-size: 12rem; cursor: pointer; }


@media (max-width: 768px){
	.myinfo .box-table__wrap h4{font-size:14rem;}
	.myinfo .myinfo-form table colgroup{display:none;}
	.myinfo .myinfo-form table.table tbody{display:flex; flex-direction: column;}
	.myinfo .myinfo-form table.table tbody th,
	.myinfo .myinfo-form table.table tbody td{display:block; border-left:none; border-right:none; text-align:left;}

	
}


@media (max-width: 480px){
	.myinfo .box-table__wrap{margin-top:20rem;}
	.myinfo .box-table__wrap h4{font-size:14rem; margin-bottom:7rem;}
	.myinfo .myinfo-form table colgroup{display:none;}
	.myinfo .myinfo-form table.table tbody{display:flex; flex-direction: column;}
	/*
	.myinfo table.table tbody th{background:transparent;}
	*/
	.myinfo .myinfo-form table.table tbody th{font-size:12rem;}
	.myinfo .myinfo-form table.table tbody th,
	.myinfo .myinfo-form table.table tbody td{display:block; padding:8rem; border-left:none; border-right:none;}
	.myinfo .myinfo-form table.table tbody td{min-height:35rem; text-align:left; }
	.myinfo .box-table__wrap input, 
	.myinfo .box-table__wrap select{height:30rem; border-radius:3rem; font-size:12rem; padding:5rem;}
	.myinfo .list-info{margin-top:10rem;}
	#btn-webauthn-register{font-size:11rem; padding:3rem 5rem; border-radius:3rem;}
	.myinfo .btn-basic,
	.myinfo .btn-disable{font-size:10rem; padding:3rem 5rem; border-radius:3rem;}
	.myinfo table.table tbody td strong{display:block; font-size:11rem; line-height:1.2em;}
	.myinfo table.table tbody td .time{font-size:10rem; margin-top:2rem;}
	.myinfo table.table tbody td .nodata{font-size:12rem;}
	.myinfo .btn-wrap{margin:20rem auto; }
	.myinfo .btn-wrap .btn-basic{font-size:13rem; padding:10rem 20rem;}
	.box-withdraw{text-align:center;}
	.box-withdraw span{font-size:11rem;}
	
}


/* 회원탈퇴 */
.withdraw .box_wrap{margin-top: 30rem; max-width: 600rem; margin-left: auto; margin-right: auto;}
.withdraw .message-box{text-align: center; padding: 40rem 30rem; background: #fff; border: 1px solid #ddd; border-top: 2px solid #222;}
.withdraw .message-box.admin{border-top: 2px solid #dc3545;}
.withdraw .message-box h3{font-size: 20px; margin-bottom: 15px; color: #333}
.withdraw .message-box p{line-height: 1.6; color: #666; font-size: 15px; margin-bottom: 30px;}
.withdraw .btn-wrap{justify-content: center;}
.withdraw .btn-wrap .btn-basic{padding: 12rem 24rem; background: #666; color: #fff; border-radius: 5rem; text-decoration: none; font-size:15rem; font-weight:500;}
.withdraw .warning-text{background: #f9f9f9; padding: 30rem; border: 1px solid #eee; margin-bottom: 25rem; border-radius:5rem; color: #555; line-height: 1.6; font-size: 14rem; word-break:keep-all;}
.withdraw .warning-text p{margin-bottom:10rem;}
.withdraw .warning-text em{color: #dc3545;}
#btnWithdrawVerify{background: #dc3545; }

@media (max-width: 480px){
	.withdraw .message-box{padding:20rem;}
	.withdraw .message-box p{font-size:12rem; margin-bottom:15rem;}
	.withdraw .btn-wrap .btn-basic{font-size:12rem; padding:8rem 15rem; border-radius:3rem; }
	.withdraw .warning-text{padding:12rem; margin-bottom:15rem;}
	.withdraw .warning-text em{font-size:11rem;}
}

/* 디지털교육 오프라인 교육기관*/

.edu-list { width: 100%; border-top: 2px solid #222; box-sizing: border-box; list-style: none; padding: 0; gap:0;}
.edu-item { display: flex; align-items: stretch; border-bottom: 1px solid #eee; padding: 30rem 0rem; box-sizing: border-box; transition: background-color 0.2s ease; }
.edu-item:hover { background-color: #f8f9fa; }
.edu-item .col-num { width:60rem; flex-shrink: 0; display: flex; justify-content: center; align-items: center; font-size: 14rem; color: #888; font-weight: 500; letter-spacing: -0.5px; }
.edu-item .col-info { flex: 1.1; padding: 0 20rem; border-right: 1px solid #f0f0f0; box-sizing: border-box; }
.edu-item .col-info .title { display: block; font-size: 18rem; color: #111; margin-bottom:7rem; font-weight: 700; line-height: 1.3; }
.edu-item .col-info .org-name { font-size: 15rem; color: #444; margin-bottom: 15rem; font-weight: 500; }
.edu-item .col-info .info-list { list-style: none; padding: 0; margin: 0; }
.edu-item .col-info .info-list li { font-size: 14rem; color: #666; margin-bottom: 5rem; line-height: 1.5; position: relative; padding-left: 12rem; }
.edu-item .col-info .info-list li:last-child{margin:0;}
.edu-item .col-info .info-list li::before { content: ''; position: absolute; left: 0; top:10rem; width:3rem; height: 3rem; background: #ccc; border-radius: 50%; }
.edu-item .col-detail { flex: 1.3; padding: 0 20rem; display: flex; align-items: flex-start; border-right: 1px solid #f0f0f0; box-sizing: border-box; }
.edu-item .col-detail .detail-list { list-style: none; padding: 0; margin: 0; width: 100%; }
.edu-item .col-detail .detail-list li { font-size: 14rem; color: #555; margin-bottom: 7rem; line-height: 1.5; }
.edu-item .col-detail .detail-list li:last-child{margin:0;}
.edu-item .col-detail .text-point { display: inline-block; color: var(--color-point); font-weight: 600; cursor:pointer; }
.edu-item .col-action { width: 300rem; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 30rem; box-sizing: border-box; gap: 15rem; }
.edu-item .col-action .logo-box { width: 100%; height: 90rem; border: 1px solid #e0e0e0; border-radius: 10rem; display: flex; align-items: center; justify-content: center; font-size: 13rem; color: #aaa; background: #fff; box-shadow: 0 2rem 6rem rgba(0,0,0,0.04); overflow: hidden; }
.edu-item .col-action .logo-box img{height:30rem;}
.edu-item .col-action .btn-link { display: block; width: 100%; padding: 12rem 0; text-align: center;  border-radius: 10rem; background:#efefef; border:1px solid #e9e9e9; box-sizing:border-box; font-size: 15rem; color: #898989; text-decoration: none; transition: all 0.2s ease; font-weight: 600; }
.edu-item .col-action .btn-link:hover { background: #222; border-color:#222; color: #fff; box-shadow: 0 4rem 10rem rgba(0,0,0,0.15); }
.edu-item .status-badge { display: inline-flex; align-items: center; justify-content: center; height: 24rem; padding: 0 8rem; border-radius: 4rem; font-size: 12rem; font-weight: 600; margin-left: 6rem; vertical-align: middle; line-height: 1; }
.edu-item .status-badge.ing { background-color: #e3f2fd; color: #1976d2; }
.edu-item .status-badge.waiting { background-color: #e0f2f1; color: #009688; }
.edu-item .status-badge.end { background-color: #ffebee; color: #d32f2f; }
.edu-item .status-badge.done { background-color: #e9e9e9; color: #616161; }

@media (max-width: 1024px) {
    .edu-item .col-info{flex:1;}
    .edu-item .col-action{width:250rem;}
    .edu-item .col-action .logo-box img{height:26rem;}

}

@media (max-width: 768px) {
    .edu-item { flex-wrap: wrap; padding: 25rem; }
    .edu-item .col-num { width: 100%; justify-content: flex-start; margin-bottom: 15rem }
    .edu-item .col-info { width: 100%; padding: 0; margin-bottom: 20rem; border: none; }
    .edu-item .col-detail {flex:1; width: 100%; padding: 15rem; margin-bottom: 20rem; border: none; background: #f7f8fa; border-radius: 10rem; }
    .edu-item .col-action { width: 100%; padding: 0; align-items: center; gap: 10rem; }
    .edu-item .col-action .logo-box { width:100%; height:70rem; flex-shrink: 0; box-shadow:none;}
    .edu-item .col-action .btn-link { padding: 15rem 0; font-size: 16rem;}
}
@media (max-width: 620px) {
    .edu-item{flex-direction: column; padding:15rem;}
    .edu-item .col-num{margin-bottom:10rem;}
    .edu-item .col-info{margin-bottom:10rem;}
    .edu-item .col-detail{margin-bottom:15rem;}
}
@media (max-width: 480px) {
    .edu-item{padding:10rem;}
    .edu-item .col-num{font-size:10rem; margin-bottom:5rem;}
    .edu-item .col-info .title{font-size:13rem; margin-bottom:4rem;}
    .edu-item .col-info .org-name{font-size:12rem; margin-bottom:10rem;}
    .edu-item .col-info .info-list li{padding-left:8rem; font-size:11rem; margin-bottom:2rem;}
    .edu-item .col-info .info-list li::before{top:7rem; width:2rem; height:2rem;}
    .edu-item .col-detail{margin-bottom:12rem; padding:10rem; border-radius:7rem;}
    .edu-item .col-detail .detail-list li{font-size:11rem; margin-bottom:3rem;}
    .edu-item .col-action{gap:7rem;}
    .edu-item .col-action .logo-box{height:50rem; border-radius:7rem;}
    .edu-item .col-action .logo-box img{height:20rem;}
    .edu-item .col-action .btn-link{font-size:13rem; padding:10rem; border-radius:7rem;}
    .edu-item .status-badge{font-size:10rem; height:18rem; padding:0 4rem; border-radius:3rem; margin-left:3rem;}

}


/* vms */
.edu-item .col-main { flex: 1.2; padding-left:10rem; box-sizing: border-box; }
.edu-item .col-main .title { display: block; font-size: 18rem; color: #222; margin-bottom: 10rem; line-height: 1.4; word-break: keep-all; font-weight: 700; }
.edu-item .col-main .desc { font-size: 14rem; color: #666; margin-top: 8rem; }
.edu-item .col-main .desc .sep { font-style: normal; color: #ddd; margin: 0 6rem; font-size: 11rem; }
.edu-item .col-main .desc .point { color: #1565c0; font-weight: 600; }
.edu-item .badge-group { display: flex; gap: 5rem; margin-bottom: 10rem; }
.badge { display: inline-flex; align-items: center; justify-content: center; height: 24rem; padding: 0 8rem; border-radius: 4rem; font-size: 12rem; font-weight: 600; line-height: 1; }
.badge.ing { background: #e3f2fd; color: #1565c0; } /* 접수중 */
.badge.done {background-color: #e9e9e9; color: #616161; } /* 접수중 */
.badge.gray { background: #f5f5f5; color: #666; } /* 종료/마감 */
.badge.line { background: #fff; border: 1px solid #ddd; color: #555; box-sizing: border-box; } /* 카테고리 */
.edu-item .col-sub { flex: 1; padding: 0 25rem; box-sizing: border-box; border-left: 1px dashed #eee; display: flex; align-items: center; }
.edu-item .info-list { list-style: none; padding: 0; margin: 0; width: 100%; }
.edu-item .info-list li { font-size: 14rem; color: #444; margin-bottom: 6rem; line-height: 1.4; display: flex; }
.edu-item .info-list li .label { display: inline-block; width: 70rem; color: #888; flex-shrink: 0; font-weight: 400; }
.edu-item .btn-list{min-height: 127rem; justify-content: center;}
.edu-item .btn-list .box-item{display:flex; justify-content: center; align-items: center; width:120rem; line-height: 35px; height: 35px; border:1px solid #eee; background:#fff; padding:0; margin:0; box-sizing:Border-box; border-radius:5rem; font-weight: 400; font-size:14rem; font-weight:400; color:#8d8d8d; transition:all 0.3s ease;}
.edu-item .btn-list .box-item span{position:relative; padding-left:19rem; font-size:14rem; font-weight:400; color:#8d8d8d; line-height:1em;}
.edu-item .btn-list .box-item.status-enable{background:var(--color-point04); border:var(--color-point04); color:#fff;}
.edu-item .btn-list .box-item.price{color: #1b4a81;font-weight:600;border-color: #dfe4e7;background: #eff4f7;font-size: 15rem;}

/*
.edu-item .col-action { width: 150rem; flex-shrink: 0; display: flex; flex-direction: column; gap: 8rem; padding: 0 20rem; border-left: 1px solid #e0e0e0; justify-content: center; }
.edu-item .col-action .box-item { display: flex; align-items: center; justify-content: center; height: 36rem; border-radius: 6rem; font-size: 14rem; background: #fff; border: 1px solid #ddd; color: #333; font-weight: 500; box-sizing: border-box; }
.edu-item .col-action .box-item.logo-type { height: 80rem; color: #999; font-size: 13rem; } 
.edu-item .col-action .box-item.status-enable { border-color: #1565c0; color: #1565c0; font-weight: 600; } 
.edu-item .col-action .box-item.price { font-weight: 600; color: #222; border-color: #ccc; } 
.edu-item .col-action .btn-action { display: flex; align-items: center; justify-content: center; height: 36rem; border-radius: 6rem; font-size: 14rem; text-decoration: none; border: 1px solid #333; background: #fff; color: #333; transition: all 0.2s; font-weight: 600; box-sizing: border-box; }
.edu-item .col-action .btn-action:hover, 
.edu-item .col-action .btn-action.dark { background: #333; color: #fff; border-color: #333; }

/*
@media (max-width: 1024px) {
    .edu-item { flex-wrap: wrap; padding: 20rem; position: relative; }
    .col-num { display: none; }
    .col-main { flex: 100%; width: 100%; padding: 0; margin-bottom: 15rem; border: none; }
    .col-sub { flex: 100%; width: 100%; padding: 15rem; background: #f8f9fa; border: none; border-radius: 8rem; margin-bottom: 15rem; }
    .col-action { flex: 100%; width: 100%; padding: 0; border: none; flex-direction: row; }
    .col-action > * { flex: 1; }
    .col-action .box-item.logo-type { height: 50rem; width: 80rem; flex: initial; margin-right: 10rem; }
}
    */

@media (max-width: 768px) {

    .edu-item .col-main{flex:1; width:100%;}
    .edu-item .col-sub{width:100%; margin-top:15rem;padding:15rem; background: #f7f8fa; border-radius: 10rem; border:none; border-radius:10rem;}
    .edu-item .btn-list{margin-top:20rem; width:100%; flex-direction: row; display: grid; grid-template-columns: repeat(auto-fit, minmax(80rem, 1fr)); border-left:none; min-height:auto;}
    .edu-item .btn-list a,	
    .edu-item .btn-list .box-item{width:100%;}	

}
@media (max-width: 480px) {
    .edu-item .btn-list{grid-template-columns: 1fr; gap: 5rem;}
    .edu-item .btn-list a,	
    .edu-item .btn-list .box-item{display: flex;
        justify-content: center;
        align-items: center; height:30rem;}	

}