/* ¼­ºêÆäÀÌÁö °øÅë ¿ä¼Ò*/

/* ¼­ºêÆäÀÌÁö ÀÎÆ®·Î */
.sub-intro {position:relative; margin:0 auto; padding:40px; width:100%; height:180px; overflow:hidden; display:flex; align-items:center; box-sizing:border-box;
				background:var(--secondary); color:#fff;}
.sub-intro::before {content:""; position:absolute; inset:0; background-image:var(--sub-intro-bg); background-size:cover; background-position:center; z-index:0;}
.sub-intro::after {content:""; position:absolute; inset:0; background:rgba(0,0,0,.2); z-index:0;}
.sub-intro-inner {position:relative; margin:0 auto; width:100%; max-width:1400px; display:flex; flex-direction:column; gap:20px; text-align:center; z-index:1;}
.sub-intro ul {display:flex; justify-content:center; align-items:center; gap:10px;}
.sub-intro ul li {position:relative; font-size:16px; white-space:nowrap;}
.sub-intro ul li+li {padding-left:20px;}
.sub-intro ul li+li::before {content:"\f054"; position:absolute; left:0; top:50%; transform:translateY(-50%); font-size:16px;
									font:var(--fa-font-solid, normal 400 12px/1 "Font Awesome 6 Free"); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
@media (max-width:768px){
  .sub-intro {height:auto; padding:40px 20px;}
  .sub-intro-inner {gap:8px;}
}

/* ¼­ºêÆäÀÌÁö ¸ÞÀΠŸÀÌƲ */
.main-title {margin-bottom:40px; padding-bottom:20px; display:flex; align-items:end; justify-content:space-between; border-bottom:1px solid var(--gray-10); --icon-size:24px;}
.main-title .breadcrum {font-size:15px; color:var(--gray-40);}
.main-title .breadcrum ul {display:flex; justify-content:center; align-items:center; gap:10px;}
.main-title .breadcrum ul li {position:relative; font-size:16px; white-space:nowrap;}
.main-title .breadcrum ul li+li {padding-left:20px;}
.main-title .breadcrum ul li+li::before {content:"\f054"; position:absolute; left:0; top:50%; transform:translateY(-50%); font-size:16px;
									font:var(--fa-font-solid, normal 400 12px/1 "Font Awesome 6 Free"); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
@media (max-width:768px) {
	.main-title {padding-bottom:16px;}
	.main-title .breadcrum {font-size:13px;}
	.main-title .breadcrum ul {display:none;}
}


/* total °¹¼ö */
.total-area {margin-bottom:8px; font-size:18px;}
.total-area span {color:var(--primary); font-weight:600;}

/* °úÁ¤ */
/* °úÁ¤ ¸®½ºÆ® */
.course-list-area {margin:0; padding:20px 0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; border-top:1px solid var(--primary); border-bottom:1px solid var(--gray-10);}
.course-list-area > li {min-width:0; width:auto; margin:0; float:none; position:relative; display:flex; flex-direction:column; box-shadow:none; box-sizing:border-box; }
.course-list-area .course-list-thumb {position:relative; height:auto; aspect-ratio:390/200; overflow:hidden;}
.course-list-area .course-list-thumb::before {content:""; display:block; padding-top:66.6667%;}
.course-list-area .course-list-thumb img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform .35s ease;}
.course-list-area > li:hover .course-list-thumb img {transform:scale(1.04);}
.course-list-area .course-list-body {padding:20px; display:flex; flex-direction:column; gap:16px; border:1px solid var(--gray-10);}
.course-list-body .course-list-title {display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; color:var(--primary);}
.course-list-body .course-list-info {width:100%; display:flex; flex-direction:column; gap:4px;}
.course-list-body .course-list-info li {display:flex; gap:8px; font-size:14px; color:var(--gray-50);}
.course-list-body .course-list-info .tit {width:56px;}
.course-list-body .course-list-btn {width:100%; display:flex; align-items:center; justify-content:center; gap:8px; box-sizing:border-box;}
.course-list-body .course-list-btn a {flex:1 1 auto; text-align:center;}
@media (max-width:768px){
	.course-list-area {grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;} 
	.course-list-area .course-list-body {padding:16px;}
	.course-list-body .course-list-btn {flex-flow:column wrap;}
	.course-list-body .course-list-btn a {width:100%; flex:1;}
}
/* °úÁ¤ ºä */
.card-view-area {width:100%; display:flex; flex-direction:column; gap:80px;}
/* °úÁ¤ head */
.card-view-area .card-view-head {width:100%; display:flex; gap:40px;}
.card-view-head .card-view-thumb {display:flex; flex-direction:column; gap:20px; flex:0 0 320px;}
.card-view-head .card-view-thumb img {width:100%; aspect-ratio:390 / 200; overflow:hidden; border-radius:8px;}
.card-view-head .card-view-thumb .card-view-btn {display:flex; flex-direction:column; gap:16px;}
.card-view-head .card-view-thumb .card-view-btn button {padding:16px 20px; border-radius:8px;}
.card-view-head .card-view-thumb .card-view-btn div {display:flex; gap:16px;}
.card-view-head .card-view-thumb .card-view-btn div button {padding:12px 16px; flex:1; font-size:16px;}
.card-view-head .card-view-info {flex:1;}
.card-view-head .card-view-info .card-view-title {margin-bottom:16px; }
.card-view-head .card-view-info .card-view-infolist {display:flex; flex-direction:column; gap:20px; padding:20px; background:var(--gray-5); border:1px solid var(--gray-10);}
.card-view-head .card-view-info .card-view-infolist li {display:flex; align-items:center;}
.card-view-head .card-view-info .card-view-infolist li .tit {min-width:100px; color:var(--primary); font-weight:600;}
.card-view-head .card-view-info .card-view-infolist li .con {flex:1;}
.card-view-head .card-view-info .card-view-infolist li .con .selectBox {position:relative; display:block; width:100%; box-sizing:border-box; }
.card-view-head .card-view-info .card-view-infolist li .con .selectBox .select {position:relative; padding:8px; color:var(--secondary); background:#fff; border:1px solid var(--gray-10); cursor:pointer;}
.card-view-head .card-view-info .card-view-infolist li .con .selectBox .select::after {position:absolute; content:'\f078'; font-family:'FontAwesome'; font-size:14px; right:10px; top:50%; transform:translateY(-50%);}
.card-view-head .card-view-info .card-view-infolist li .con .selectBox .select a {width:90%; display:-webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow:hidden; text-overflow:ellipsis; box-sizing:border-box;}
.card-view-head .card-view-info .card-view-infolist li .selectBox .optionBox {position:absolute; top:100%; left:0; right:0; cursor:pointer; z-index:10; box-sizing:border-box;
								background:#fff; border-left:1px solid var(--gray-10); border-right:1px solid var(--gray-10); border-bottom:1px solid var(--gray-10);}
.card-view-head .card-view-info .card-view-infolist li .selectBox .optionBox ul {display:flex; flex-direction:column;}
.card-view-head .card-view-info .card-view-infolist li .selectBox .optionBox ul li {padding:8px;}
.card-view-head .card-view-info .card-view-infolist li .selectBox .optionBox ul li:hover {color:var(--secondary);}
.card-view-head .card-view-info .card-view-infolist #review_day {color:var(--secondary); font-weight:600;}
.card-view-head .card-view-info .card-view-infolist #cls_price {color:var(--red); font-weight:600;}
/* ¹öÆ° */
.card-view-area .course-view-foot {display:flex; align-items:center; justify-content:center; gap:20px;}
@media (max-width:768px){
	.card-view-area .card-view-head {flex-direction:column;}
}



/* ³ªÀÇ °­ÀÇ½Ç */
.tab-content .search-area {margin-top:40px;}
.mylect-area .search-area .search-date-box {width:100%;}
.mylect-area .search-area .search-date-box input {width:48.5%;}
.mylect-area .search-area .search-date-box span {width:5%;}
















/* ȸ¿ø°¡ÀÔ */
/* ¾à°ü */
.join-area {width:100%; max-width:800px;}
.join-term-cont {display:flex; flex-direction:column; gap:40px;}
.join-term-cont .term-box {width:100%; overflow:hidden;}
.join-term-cont .term-box .term-box-inner {margin-bottom:8px; padding:20px; height:300px; resize:none; overflow-y:auto; 
															border:1px solid var(--gray-10); background:var(--gray-5); box-sizing:border-box;}

/* Á¤º¸ÀÔ·Â */
.join-enter-area ul {display:flex; flex-direction:column; gap:20px;}
.join-enter-area ul li {width:100%;}
.join-enter-area ul li .tit {margin-bottom:8px; display:flex; align-items:center; gap:4px; font-size:14px;}
.join-enter-area ul li .tit span {color:#ff0000;}
.join-enter-area ul li > input {width:100%;}
/* ÀÏÁ¤ °¹¼ö ÀÌ»ó Çʵå*/
.join-enter-area div {display:flex; width:100%; align-items:center; gap:8px;}
.join-enter-area div input {flex:1;}
/* ¾ÆÀ̵ð */
.join-enter-area .usr_id {display:flex; gap:8px;}
.join-enter-area .usr_id input {flex:1; min-width:0;}
.join-enter-area .usr_id button {flex:0 0 auto;}
/* »ý³â¿ùÀÏ */
.join-enter-area .usr_birth {display:flex; gap:16px;}
.join-enter-area .usr_birth label input {margin-right:8px; max-width:65px; text-align:center;}
.join-enter-btn {display:flex; justify-content:center; gap:20px;}


/* ·Î±×ÀÎ */
.login-area {margin:0 auto; width:100%; max-width:480px; text-align:center;}
.login-area .login-icon {margin-bottom:40px; font-size:40px; color:var(--primary);}
.login-area .login-input ul {display:flex; flex-direction:column; gap:16px;}
.login-area .login-input li {position:relative; padding:16px; width:100%; border-radius:1000px; border:1px solid var(--primary); box-sizing:border-box;}
.login-area .login-input i {position:absolute; top:17px; left:16px; color:var(--gray-50);}
.login-area .login-input input {margin-left:20px; padding:0; width:calc(100% - 20px); border:none; outline:0 none; box-sizing:border-box;}
.login-area .login-btn {margin-top:16px; width:100%;}
/* idpw ã±â ȸ¿ø°¡ÀÔ */
.idjn-box {margin-top:40px; padding-top:40px; display:flex; align-items:center; justify-content:center; gap:20px; border-top:1px dotted var(--gray-10);}
.idjn-box a {display:block; padding:8px 16px; font-size:16px;}


/* id pw ã±â */
.idpw-find-area {display:flex; justify-content:space-between;}
.idpw-find-area > li {margin:0 auto; padding:0 80px; display:flex; flex-direction:column; gap:20px; flex:0 0 50%; text-align:center;}
.idpw-find-area > li h3 {font-size:24px;}
.idpw-find-area > li h3 .find-icon {font-size:18px;}
.idpw-find-area > li .form ul {display:flex; flex-direction:column; justify-content:center; height:140px; gap:16px;}
.idpw-find-area > li .form li {display:flex; align-items:center;}
.idpw-find-area > li .form li label {width:20%; text-align:left;}
.idpw-find-area > li .form li input {width:80%;}
.idpw-find-area > li .form li.email-find input {width:calc(40% - 15px);}
.idpw-find-area > li .form li.email-find span {display:inline-block; padding:0 8px;}
.idpw-find-area  .find-btn {margin-top:20px;}
/* id */
.idpw-find-area .id-find-box {border-right:1px dotted var(--gray-10);}
.idpw-find-area .id-find-box h3 span {color:var(--primary);}
.idpw-find-area .id-find-box h3 .find-icon {color:var(--primary);}
/* pw */
.idpw-find-area .pw-find-box h3 span {color:var(--secondary);}
.idpw-find-area .pw-find-box h3 .find-icon {color:var(--secondary);}
@media (max-width:768px){
	.idpw-find-area {flex-direction:column; gap:40px;}
	.idpw-find-area > li {padding:0;}
	.idpw-find-area > li .form ul {height:auto;}
	.idpw-find-area .id-find-box {padding-bottom:40px; border-right:none; border-bottom:1px dotted var(--gray-10);}
	.idpw-find-area > li .form li.email-find input#usr_email1 {width:calc(40% - 15px) !important;}
	.idpw-find-area > li .form li.email-find input#usr_email2 {width:calc(40% - 15px) !important;}
}
/* ã±â °á°ú */
.find-result-box {margin-bottom:40px; text-align:center; }
.find-result-box p {display:inline-block; padding:40px; border:1px solid var(--gray-10); border-radius:8px;}






/* °Ô½ÃÆÇ */
/* ºä ¸®½ºÆ® ¹öÆ° */
.bbsview-btn-area {padding:20px 0; display:flex; align-items:center; justify-content:space-between; gap:8px;}
.bbsview-btn-area.center {justify-content:center;}
.bbsview-btn-area.right {align-items:end; justify-content:flex-end;}
.bbsview-btn-area button {order:2;}
.bbsview-btn-area > div {order:1;}
.bbsview-btn-area > div button {font-size:14px; color:var(--gray-70);}
.bbsview-btn-area > div button:hover, .bbsview-btn-area > div button:focus {color:var(--secondary);}

/* °øÁö»çÇ× */
.noticebbs li:nth-child(1) {width:10%}
.noticebbs li:nth-child(2) {flex:1; text-align:left;}
.noticebbs li:nth-child(3) {width:10%}
.noticebbs li:nth-child(4) {width:10%}
.noticebbs li:nth-child(5) {width:15%}
.noticebbs li:nth-child(6) {width:10%}
@media (max-width:768px){
	.noticebbs li:nth-child(1), .noticebbs li:nth-child(3), .noticebbs li:nth-child(4), .noticebbs li:nth-child(6) {display:none;}
	.noticebbs li:nth-child(5) {width:35%;}
}