/*===========================================================================
    메인페이지
============================================================================*/
.main-wrap {padding: 0;}
.main-wrap .title-box .pagination-box {position: absolute; left: calc(100% + 20px); top: 50%; width: 36px; transform:  translateY(-50%);}
.main-wrap .title-box .pagination-box .swiper-button-prev {left: 0;}
.main-wrap .title-box .pagination-box .swiper-button-next {right: 0;}
.main-wrap .title-box2 .pagination-box {position: absolute; left: calc(100% + 20px); top: 50%; width: 36px; transform:  translateY(-50%);}
.main-wrap .title-box2 .pagination-box .swiper-button-prev {left: 0;}
.main-wrap .title-box2 .pagination-box .swiper-button-next {right: 0;}
.main-wrap .main-banner {margin-bottom: 80px;}
.main-wrap section {margin-bottom: 50px;}
.main-wrap .lecture-sec {}
.main-wrap .lecture-sec .list-box {}
.main-wrap .lecture-sec .list-box li {border-radius: 5px; overflow: hidden;}
.main-wrap .lecture-sec .list-box li .img-box {}
.main-wrap .lecture-sec .list-box li .img-box img {width: 100%; height: 163px}
.main-wrap .lecture-sec .list-box li .text-box {font-size: 1.6rem; padding: 20px 10px; text-align: center; background: #f3f3f3; display: flex; justify-content: center; align-items: center; height: 65px; font-weight: normal;}
.main-wrap .sub-banner {display: flex; justify-content: center; width: 100%; margin: 80px 0 120px 0;}
.main-wrap .sub-banner img {width: 100%;}
.main-wrap .notice-sec {}
.main-wrap .notice-sec .container {flex-wrap: wrap;}
.main-wrap .event-sec {}
.main-wrap .event-sec .container {flex-wrap: wrap;}
.main-wrap .event-sec .cs-center {display: flex; flex-direction: column; justify-content: center; width: 610px; height: 201px; background: #f3f4f6; border-radius: 5px;}
.main-wrap .event-sec .cs-center h2{font-size: 4rem; margin-bottom: 20px;}

/* 유튜브 */
.title-box2 {margin-bottom: 20px; display: flex; align-items: center;}
.title-box2 h2 {position: relative; font-size: 2.4rem; font-weight: bold;}
.title-box2 h2 span {font-size: 1.5rem; margin-left: 10px; font-weight: 300; opacity: 0.5;}
.title-box2 a {font-size: 1.6rem; font-weight: 500; margin-left: auto;}
.title-box2 button {font-size: 1.5rem; font-weight: 500; margin-left: auto; padding: 6px 10px; border-radius: 4px;}


@media (max-width:1200px) {
	.youtube-wrap .thumbnail-group li .img-box img {width: 100%; height: 135px;}
}

@media (max-width:800px) {
	.youtube-wrap .thumbnail-group li .img-box img {width: 100%; height: 170px;}
}

@media (max-width:500px) {
	.youtube-wrap .thumbnail-group li .img-box img {width: 100%; height: 165px;}
}


/* faq */
.board-box2 {}
.board-box2 li {}
.board-box2 li, .board-box2 li a {width: 100%; display: flex; align-items: center;}
.board-box2 li a p {font-size: 1.7rem; line-height: 2;}
.board-box2 li a p.content {width: calc(100% - 100px); white-space: nowrap; word-break: break-all; text-overflow: ellipsis; overflow: hidden;}
.board-box2 li a p.date {text-align: right; margin-left: auto;}


@media (max-width:1200px) {
	.main-wrap .event-sec .mobile-img {width: 100%;}
    .main-wrap .event-sec .mobile-img2 {width: 100%;}
	.main-wrap .event-sec .cs-center {width: 430px; height: 143px;}
	.main-wrap .main-banner .swiper-slide img {width: 100%; height: auto;}
	.main-wrap .sub-banner .swiper-slide img {width: 100%; height: auto;}

}

@media (max-width:1000px) {
	.main-wrap .event-sec .cs-center {width: 347px; height: 100px;}
	.main-wrap .event-sec .cs-center h2{font-size: 3rem; margin-bottom: 0px;}
	.main-wrap .lecture-sec .list-box li .img-box img {width: 100%; height: 220px}

}

@media (max-width:800px) {
    .main-wrap .main-banner {margin-bottom: 60px;}
    .main-wrap .lecture-sec .list-box li {border-radius: 5px;}
    .main-wrap .lecture-sec .list-box li .text-box {font-size: 1.6rem; padding: 10px;}
    .main-wrap .sub-banner {margin: 40px 0 60px 0;}
    .main-wrap .notice-sec .container {gap: 40px;}
    .main-wrap .event-sec .mobile-img2 {width: 100%;}
	.main-wrap .event-sec .cs-center {width: 100%;}
	.main-wrap .lecture-sec .list-box li .img-box img {width: 100%;height:190px;}

}

@media (max-width:500px) {
	.main-wrap .lecture-sec .list-box li .img-box img {width: 100%;height:110px;}

}

/*===========================================================================
    게시판
============================================================================*/
.board-wrap {}
.board-wrap table thead { background: #edf1fe;}
.board-wrap table th { color: #222;}
.board-wrap table td a { color: #222; text-decoration: none;}
.board-wrap .button-group { display: flex; justify-content: flex-end; margin-top: 10px;}
.board-wrap .table-bottom-btn button { font-size: 1.3rem; justify-content: center; gap: 6px;}
.board-wrap .top { border-bottom: 1px solid #ebebeb; margin-bottom: 20px; padding-bottom: 20px; justify-content: space-between;}

/*===========================================================================
    과정목록
============================================================================*/
.lecture-list-wrap {}
.lecture-list-wrap .search-group {padding: 20px; margin-bottom: 30px; border: 1px solid #c8c8c8; border-top: 0; display: flex; align-items: center; justify-content: center;}
.lecture-list-wrap .search-group .select-box {margin-right: 10px;}
.lecture-list-wrap .search-group .select-box p {color: #a0a0a0; border-color: #eeeeee; background-color: #f5f5f5;}
.lecture-list-wrap .search-group .select-box {}
.lecture-list-wrap .table-top {padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #bbbbbb; justify-content: space-between;}
.lecture-list-wrap .table-top .list-num {}
.lecture-list-wrap .table-top .sort-box {gap: 10px;}
.lecture-list-wrap .table-top .sort-box .tabs {border: 0;}
.lecture-list-wrap .table-top .sort-box button {padding: 0; border: 0; border-radius: 10px;}
.lecture-list-wrap .tabs2 button img {display: block;}
.lecture-list-wrap .tabs2 button img.active-img {display: none;}
.lecture-list-wrap .tabs2 button.active img {display: none;}
.lecture-list-wrap .tabs2 button.active img.active-img {display: block;}
.lecture-list-wrap .list-box {justify-content: flex-end; gap: 5px;}
.lecture-list-wrap .list-box2 {justify-content: flex; gap: 5px; margin-bottom: 5px;}
.lecture-list-wrap .icon-list {display: flex; gap: 2px;}
.lecture-list-wrap .list {display: flex; gap: 1px; border-radius: 5px; padding: 0 10px; background: #f00;}
.lecture-list-wrap .list2 {display: flex; gap: 1px; border-radius: 5px; padding: 0 10px;}
.lecture-list-wrap .list p {font-size: 1.3rem; color: #fff; line-height: 1.8;}
.lecture-list-wrap .list2 p {font-size: 1.3rem; color: #fff; line-height: 1.8; margin-bottom: 0px;}
.thumbnail-group li .text-box p {font-size: 1.3rem; margin-bottom: 0px;}
.lecture-list-wrap .top-icon {margin-top: 10px;}
.lecture-list-wrap .top-icon-list {display: inline-block; margin: 10px 0;}
.lecture-list-wrap .button-group .btn-main{border: 1px solid #4876d5;}

@media (max-width:1200px) {

}

@media (max-width:800px) {
    .lecture-list-wrap .list-group li .text-box .desc label {width: 80px; justify-content: center;}
}

@media (max-width:400px) {
	.lecture-list-wrap .list-box {display: inline-flex; flex-direction: row; flex-wrap: wrap; }
	

}

/*===========================================================================
    국민내일배움카드
============================================================================*/
.hrdcard-info1-wrap {padding: 0;}
.hrdcard-info1-wrap .hrdcard-info1-sec {padding: 60px 0 1px 0; }
.hrdcard-info1-wrap .hrdcard-info2-sec {padding: 60px 0 0 0; }
.hrdcard-info1-wrap .hrdcard-group {}
.hrdcard-info1-wrap .hrdcard-group .info-group {margin-bottom: 60px;}
.hrdcard-info1-wrap .hrdcard-group .info-group .info-box {display: flex; gap: 20px; margin-bottom: 40px;}
.hrdcard-info1-wrap .hrdcard-group .info-group .info-box .img-box {width: 400px;}
.hrdcard-info1-wrap .hrdcard-group .info-group .info-box .img-box img {width: 100%;}
.hrdcard-info1-wrap .hrdcard-group .info-group .info-box .cont-box {width: calc(100% - 420px);}
.hrdcard-info1-wrap a.shortcut-btn {margin-top: 20px; text-align: center; max-width: 250px; line-height: 1; padding: 10px; border: 1px solid #bebebe; border-radius: 5px;}
.hrdcard-info1-wrap .text-box {margin-bottom: 80px;}


@media (max-width:1200px) {
    .hrdcard-info1-wrap .hrdcard-group .info-group .info-box .img-box {width: 340px;}
    .hrdcard-info1-wrap .hrdcard-group .info-group .info-box .cont-box {width: calc(100% - 360px)}
}

@media (max-width:800px) {
    .hrdcard-info1-wrap .hrdcard-group .info-group .info-box .cont-box .div-table .th {width: 80px;}
    .hrdcard-info1-wrap .hrdcard-group .info-group .info-box .cont-box .div-table .td {width: calc(100% - 80px);}
    .hrdcard-info1-wrap .hrdcard-group .info-group .info-box {flex-wrap: wrap;}
    .hrdcard-info1-wrap .hrdcard-group .info-group .info-box .img-box {width: 100%;}
    .hrdcard-info1-wrap .hrdcard-group .info-group .info-box .cont-box {width: 100%;}
}

/*===========================================================================
    국민내일배움카드 사용하는 방법?
============================================================================*/
.hrdcard-info2-wrap {padding: 0;}
.hrdcard-info2-sec .step-con {}
.hrdcard-info2-sec .info-menu{ background: #eee; padding: 10px 0; margin-top: 40px; margin-bottom: 20px; border-radius: 5px; text-align: center; width: 100%;}
.hrdcard-info2-sec .step-con .desc {padding-bottom: 20px;}
.hrdcard-info2-sec .step-con .desc:after { position: absolute; content: ""; border-bottom: 1px solid #ccc; width: 1300px; margin: 10px 0; z-index: 2;}
.hrdcard-info2-sec .step-con .desc:last-child::after {display: none;}


/*===========================================================================
    사업주지원 교육이란?
============================================================================*/
.owner-support-wrap {padding: 0;}
.owner-support-wrap .owner-support-sec {padding: 60px 0 1px 0; }
.owner-support-wrap .owner-support2-sec {padding: 60px 0 0 0; }
.owner-support-wrap .owner-support-group {}
.owner-support-wrap .owner-support-group2 {}
.owner-support-wrap .owner-support-group2 .process {background: #f6f6f6;}
.owner-support-wrap .owner-support-group2 .process img {display: block; margin: 0 auto;}
.owner-support-wrap .owner-support-group .info-group {margin-bottom: 60px;}
.owner-support-wrap .owner-support-group .info-group .info-box {display: flex; gap: 20px; margin-bottom: 40px;}
.owner-support-wrap .owner-support-group .info-group .info-box .img-box {width: 400px;}
.owner-support-wrap .owner-support-group .info-group .info-box .img-box img {width: 100%;}
.owner-support-wrap .owner-support-group .info-group .info-box .cont-box {width: calc(100% - 420px);}
.owner-support-wrap a.shortcut-btn {margin-top: 20px; text-align: center; max-width: 250px; line-height: 1; padding: 10px; border: 1px solid #bebebe; border-radius: 5px;}
.owner-support-wrap .text-box {margin-bottom: 80px;}



@media (max-width:1200px) {
    .owner-support-wrap .owner-support-group .info-group .info-box .img-box {width: 340px;}
    .owner-support-wrap .owner-support-group .info-group .info-box .cont-box {width: calc(100% - 360px)}
}

@media (max-width:800px) {
    .owner-support-wrap .owner-support-group .info-group .info-box .cont-box .div-table .th {width: 80px;}
    .owner-support-wrap .owner-support-group .info-group .info-box .cont-box .div-table .td {width: calc(100% - 80px);}
    .owner-support-wrap .owner-support-group .info-group .info-box {flex-wrap: wrap;}
    .owner-support-wrap .owner-support-group .info-group .info-box .img-box {width: 100%;}
    .owner-support-wrap .owner-support-group .info-group .info-box .cont-box {width: 100%;}
	.owner-support-wrap .owner-support-group {}
	.owner-support-wrap .owner-support-group2 .process img {width: 100%;}
}


/*===========================================================================
    과정상세
============================================================================*/
.lecture-detail-wrap {}
.lecture-detail-wrap .lecture-group {}
.lecture-detail-wrap .lecture-group .info-group {margin-bottom: 60px;}
.lecture-detail-wrap .lecture-group .info-group .info-box {display: flex; gap: 20px; margin-bottom: 40px;}
.lecture-detail-wrap .lecture-group .info-group .info-box .img-box {width: 480px;}
.lecture-detail-wrap .lecture-group .info-group .info-box .img-box img {width: 100%; height: 261px;}
.lecture-detail-wrap .lecture-group .info-group .info-box .img-box2 img {width: 180px;}
.lecture-detail-wrap .lecture-group .info-group .info-box .img-box .play-icon{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 65px;}
.lecture-detail-wrap .lecture-group .info-group .info-box .cont-box {width: calc(100% - 420px);}
.lecture-detail-wrap .lecture-group .info-group .info-box .cont-box .select-box.selected p {border: 1px solid #4867d5; color: #4867d5; background: #f1f4ff;}
.lecture-detail-wrap .lecture-group .info-group .info-box .cont-box .self-pay-box {flex-wrap: wrap;}
.lecture-detail-wrap .lecture-group .info-group .info-box .cont-box .self-pay-box .guide-text {margin-left: auto;}
.lecture-detail-wrap .lecture-group .info-group .info-box .button-group {margin-top: 20px;}
.lecture-detail-wrap .lecture-group .info-group .info-box .button-group button {font-size: 1.8rem; line-height: 36px;}
.lecture-detail-wrap .lecture-group .info-group .info-box .button-group button:first-child {flex: 1;}
.lecture-detail-wrap .lecture-group .info-group .info-box .button-group button:last-child {flex: 1;}
.lecture-detail-wrap .lecture-group .info-group .info-box .button-group .btn-main {border: 1px solid #4876d5;}
.lecture-detail-wrap .lecture-group .info-group .info-box .button-group .btn-gray {border: 1px solid #cccccc;}
.lecture-detail-wrap .lecture-group .info-group .label-group {}
.lecture-detail-wrap .lecture-group .info-group .list-label {display: inline-block; margin-bottom: 10px; margin-right: 5px; font-size: 1.4rem; padding: 0 8px; border-radius: 5px;}

.lecture-detail-wrap .lecture-group .detail-group {}
.lecture-detail-wrap .lecture-group .detail-group table thead {background: #f1f4ff;}
.lecture-detail-wrap .lecture-group .detail-group table th {color: #000;}
.lecture-detail-wrap .lecture-group .detail-group .accountant-box {display: flex; gap: 20px;}
.lecture-detail-wrap .lecture-group .detail-group .accountant-box:not(:last-child) {margin-bottom: 20px;}
.lecture-detail-wrap .lecture-group .detail-group .accountant-box .title {margin-bottom: 20px;}
.lecture-detail-wrap .lecture-group .detail-group .teacher-box .accountant-box .img-box {position: relative; width: 200px; height: 250px; border: 1px solid #c8c8c8; border-radius: 5px; overflow: hidden;}
.lecture-detail-wrap .lecture-group .detail-group .teacher-box .accountant-box .img-box img {display: block; margin: 0 auto; height: 205px;}
.lecture-detail-wrap .lecture-group .detail-group .teacher-box .accountant-box .img-box .name {position: absolute; bottom: 0; left: 0; width: 100%; height: 46px; background: #4867d5; font-size: 2rem; color: #fff; display: flex; align-items: center; justify-content: center;}
.lecture-detail-wrap .lecture-group .detail-group .book-box .img-box {max-width: 200px; border-radius: 5px; overflow: hidden;}
.lecture-detail-wrap .lecture-group .detail-group .book-box .img-box img {width: 150px; height: 195px;}
.lecture-detail-wrap .padding-box {position: relative; padding-right: 40px; padding-left: 40px;}
.lecture-detail-wrap .more-lecture-sec {padding: 40px 0; background: #f6f7fd;}
.lecture-detail-wrap .more-lecture-sec .img-box {margin-bottom: 10px;}
.lecture-detail-wrap .more-lecture-sec .text-box {text-align: center;}

.lecture-detail-wrap .classListBox .table-title {padding: 10px 0; word-break: auto-phrase; background: #fff; border-radius: 0; color: #222;}

/* 강사 약력 컨테이너 스타일 */
.lecture-detail-wrap .lecture-group .detail-group .brief-history {display: flex;}
.more-lecture-sec .container .padding-box .swiper .swiper-slide img {width: 100%; height: 230px;}


@media (max-width:1200px) {
    .lecture-detail-wrap .lecture-group .info-group .info-box .img-box {width: 435px;}
    .lecture-detail-wrap .lecture-group .info-group .info-box .cont-box {width: calc(100% - 360px)}
    .lecture-detail-wrap .lecture-group .info-group .info-box .button-group button {font-size: 1.6rem;}
    .lecture-detail-wrap .lecture-group .info-group .info-box .img-box img {width: 100%; height: 262px;}
    .lecture-detail-wrap .lecture-group .detail-group .book-box .img-box img {width: 105px; height: 150px;}
    .more-lecture-sec .container .padding-box .swiper .swiper-slide img {width: 100%; height: 190px;}
    .lecture-detail-wrap .lecture-group .info-group .info-box .select-box .option-box {width: 100%; right: 0;}
    .lecture-detail-wrap .lecture-group .info-group .info-box .select-box .option-box li {text-overflow: ellipsis; overflow: hidden;}
    .lecture-detail-wrap .padding-box {padding-left: 34px;}
}

@media (max-width:800px) {
    .lecture-detail-wrap .lecture-group .info-group .info-box .cont-box .div-table .th {width: 80px;}
    .lecture-detail-wrap .lecture-group .info-group .info-box .cont-box .div-table .td {width: calc(100% - 80px);}
    .lecture-detail-wrap .lecture-group .info-group .info-box {flex-wrap: wrap;}
    .lecture-detail-wrap .lecture-group .info-group .info-box .img-box {width: 100%;}
    .lecture-detail-wrap .lecture-group .info-group .info-box .cont-box {width: 100%;}
    .lecture-detail-wrap .lecture-group .detail-group .accountant-box {margin: 40px 0;}
    .lecture-detail-wrap .lecture-group .detail-group .accountant-box .title {margin-bottom: 10px;}
    .lecture-detail-wrap .lecture-group .detail-group .brief-history {display: flex; flex-direction: column;}
    .lecture-detail-wrap .lecture-group .detail-group .teacher-box .accountant-box .img-box {position: relative; width: 100%; height: 250px; padding: 20px;}
    .lecture-detail-wrap .lecture-group .info-group .info-box .img-box img {width: 100%; height: auto;}
    .lecture-detail-wrap .lecture-group .info-group .info-box .button-group button {line-height: 26px;}
    .lecture-detail-wrap .lecture-group .info-group .info-box .cont-box .self-pay-box .guide-text {margin: 0;}
    .lecture-detail-wrap .lecture-group .detail-group .teacher-box .accountant-box .img-box .name {font-size: 1.8rem;}
    .lecture-detail-wrap .contents-table {table-layout: fixed;}
    .lecture-detail-wrap .contents-table colgroup col:nth-child(1) {width:70px;}
    .lecture-detail-wrap .contents-table colgroup col:nth-child(2) {width:calc(100% - 70px);}
    .lecture-detail-wrap .contents-table td:first-child {text-align: center;}
    .lecture-detail-wrap .contents-table td {text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .lecture-detail-wrap .padding-box {padding-right: 34px;}
    .more-lecture-sec .container .padding-box .swiper .swiper-slide img {width: 100%; height: 180px;}
}

@media (max-width:500px) {
	.more-lecture-sec .container .padding-box .swiper .swiper-slide img {width: 100%; height: 90px;}
}

/*===========================================================================
    학습창_단과 
============================================================================*/
.learning-wrap {}
.learning-wrap .learning-group {}
.learning-wrap .learning-group .head {padding:20px; margin-bottom: 20px; border-radius: 10px; display: flex;}
.learning-wrap .learning-group .head .top {}
.learning-wrap .learning-group .head .top h2 {font-size: 2.4rem; color: #fff;}
.learning-wrap .learning-group .head .top .date {font-weight: 300; color: #fff;}
.learning-wrap .learning-group .head .button-group {margin-left: auto; align-self: self-start;}
.learning-wrap .learning-group .head .button-group button {font-size: 1.4rem;}
.learning-wrap .learning-group .body {padding: 20px; border-top: 2px solid #222; margin-bottom: 40px; background: #f8f8f8; justify-content: space-between;}
.learning-wrap .learning-group .body > div {width: 100%;}
.learning-wrap .learning-group .body .left {}
.learning-wrap .learning-group .body .left .div-table {}
.learning-wrap .learning-group .body .left .div-table .tr {align-items: flex-start;}
.learning-wrap .learning-group .body .left .div-table .th {width: 120px; color: #929292;}
.learning-wrap .learning-group .body .left .div-table .tr:first-child {margin-bottom: 10px;}
.learning-wrap .learning-group .body .left .div-table .tr:first-child .th {color: #222; font-weight: bold;}
.learning-wrap .learning-group .body .left .div-table .tr:first-child .td {font-weight: bold;}
.learning-wrap .learning-group .body .left .div-table .td {width: calc(100% - 120px);}
.learning-wrap .learning-group .body .left .div-table .td button {font-size: 1.4rem; margin-top: 4px;}
.learning-wrap .learning-group .body .right {display: flex; align-items: center; gap: 20px;}
.learning-wrap .learning-group .body .right .progress-circle { width: 120px; height: 120px; border-radius: 50%; position: relative; overflow: hidden;} 
.learning-wrap .learning-group .body .right .progress-circle .pie { width: 120px; height: 120px; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg);} 
.learning-wrap .learning-group .body .right .progress-circle circle { fill: none; stroke: rgb(243, 243, 243); stroke-width: 14; } 
.learning-wrap .learning-group .body .right .progress-circle circle:nth-child(2) { stroke: #3d3ded; stroke-dashoffset: 316px; stroke-dasharray: 333px;} 
.learning-wrap .learning-group .body .right .progress-circle circle:nth-child(2) { stroke: #4867d5; } 
.learning-wrap .learning-group .body .right .progress-circle.on circle:nth-child(2) { stroke-dashoffset: calc(332px - 332px * 70 / 100); } 
.learning-wrap .learning-group .body .right .progress-circle .text-box {position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; text-align: center;}
.learning-wrap .learning-group .body .right .progress-circle .text-box .num {font-size: 1.6rem; color: #4867d5;}
.learning-wrap .learning-group .body .right .progress-circle .text-box .num strong {font-size: 2rem; margin-right: 2px; line-height: 1; color: inherit; font-weight: 500;}
.learning-wrap .learning-group .body .right .progress-circle .text-box .text {font-size: 1.4rem; line-height: 1;}

.learning-wrap .learning-group .body .right .progress-group {position: relative; width: calc(100% - 120px);}
.learning-wrap .learning-group .body .right .progress-group .progress-box {}
.learning-wrap .learning-group .body .right .progress-group .progress-box li {margin-bottom: 10px; justify-content: space-between;}
.learning-wrap .learning-group .body .right .progress-group .progress-box li p {font-size: 1.4rem; width: 50px;}
.learning-wrap .learning-group .body .right .progress-group .progress-box li .progress-bar {width: calc(100% - 115px); height: 20px; background: #eeeeee;}
.learning-wrap .learning-group .body .right .progress-group .progress-box li .progress-bar .progress {height: 100%; transition: 0.2s;}
.learning-wrap .learning-group .body .right .progress-group .progress-box li:nth-child(1) .progress-bar .progress {background: #1b71b8;}
.learning-wrap .learning-group .body .right .progress-group .progress-box li:nth-child(2) .progress-bar .progress {background: #2091d6;}
.learning-wrap .learning-group .body .right .progress-group .progress-box li:nth-child(3) .progress-bar .progress {background: #69c8ff;}
.learning-wrap .learning-group .body .right .info-text {color: #474747; font-size: 1.4rem; text-align: right; position: absolute; right: 0; top: 100%;}
.learning-wrap .learning-group .tabs {border: 0; margin-bottom: 30px;}
.learning-wrap .learning-group .tabs button {border: 1px solid #c8c8c8; border-radius: 10px;}
.learning-wrap .learning-depth {line-height: 54px; border-radius: 10px; font-size: 1.8rem; margin:60px 0 20px; font-weight: 500; color: #fff; text-align: center; }
.learning-wrap .learning-grou.learning-wrap table .tabs .tab-btn {border-bottom: 1px solid #c8c8c8; border-radius: 10px;}
.learning-wrap .overflow-y-auto {max-height: 400px;}
.learning-wrap table thead {background: #edf1fe; }
.learning-wrap table th {color: #222;}
.learning-wrap table tbody th {color: #222; background: #f8f8f8;}
.learning-wrap table td a {color: #222; text-decoration: none;}
.learning-wrap .top-table {margin-bottom: 20px;}
.learning-wrap .top-table td {text-align: left;}
.learning-wrap .table-top-btn {justify-content: flex-start; margin: 40px 0 10px;}
.learning-wrap .table-top-btn button {font-size: 1.3rem; justify-content: center; gap: 6px;}

@media (max-width:1200px) {

}

@media (max-width:800px) {
    .learning-wrap .learning-group .head {flex-wrap: wrap; padding: 14px;}
    .learning-wrap .learning-group .head .top {width: 100%;}
    .learning-wrap .learning-group .head .top h2 {text-align: center;}
    .learning-wrap .learning-group .head .top .date {justify-content: center;}
    .learning-wrap .learning-group .head .button-group {margin: 20px auto 0; flex-direction: column; align-items: normal;}
    .learning-wrap .learning-group .body .left .div-table .th {width: 100px;}
    .learning-wrap .learning-group .body .left .div-table .td {width: calc(100% - 100px);}
    .learning-wrap .learning-group .body {flex-wrap: wrap; gap: 40px;}
    .learning-wrap .learning-depth {line-height: 48px; margin: 50px 0 20px;}
    .learning-wrap .learning-group .tabs {margin-bottom: 0;}
    .learning-wrap .overflow-x-auto table {min-width: 300px;}
    .learning-wrap .overflow-x-auto table col {width: auto;}
    .learning-wrap .modal .overflow-x-auto table {min-width: 400px;}

    /* Mobile 작업 */
    .learning-wrap .table-title {padding: 8px 10px; border-radius: 10px;}
    .learning-wrap .mobile-list {margin-top: 8px;}
    .learning-wrap .tab01 .mobile-list li .list-head > p {width: calc(100% - 100px);}
    .learning-wrap .tab02 .mobile-list li .list-body .bottom-box, .learning-wrap .tab03 .mobile-list li .list-body .bottom-box, .learning-wrap .tab04 .mobile-list li .list-body .bottom-box {align-items: flex-end;}
    .learning-wrap .tab02 .mobile-list li .list-body .top-box, .learning-wrap .tab03 .mobile-list li .list-body .top-box, .learning-wrap .tab04 .mobile-list li .list-body .top-box {margin-bottom: 4px;}

    /* 모바일 리스트 */
    .mobile-list li {border: 1px solid #c8c8c8; border-radius: 10px; overflow: hidden;}
    .mobile-list li:not(:last-child) {margin-bottom: 20px;}
    .mobile-list li .list-head {padding: 4px 10px; border-bottom: 1px solid #c8c8c8; background: #edf1fe; justify-content: space-between;}
    .mobile-list li .list-head > p {font-size: 1.5rem; white-space: pre-wrap; overflow: hidden; text-overflow: ellipsis;}
    .mobile-list li .list-head .score {}
    .mobile-list li .list-head .score .bg-main {z-index: 1; padding: 6px 12px; line-height: 1; color: #fff; border-radius: 14px; margin-right: -18px;}
    .mobile-list li .list-head .score .color-main {padding: 6px 12px 6px 20px; line-height: 1; border: 1px solid #c8c8c8; background: #fff; font-weight: bold; border-radius: 14px; }
    .mobile-list li .list-body {padding: 10px; font-size: 1.5rem;}
    .mobile-list li .list-body .top-box {justify-content: space-between; margin-bottom: 10px;}
    .mobile-list li .list-body .top-box p, .mobile-list li .list-body .top-box a {display: flex; max-width: 100%; font-size: 1.5rem;}
    .mobile-list li .list-body .top-box strong {display: block; margin-left: 4px; font-weight: bold; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
    .mobile-list li .list-body .top-box .test-box {gap: 10px;}
    .mobile-list li .list-body .progress-bar {height: 12px; margin: 10px 0;}
    .mobile-list li .list-body .bottom-box {justify-content: space-between;}
    .mobile-list li .list-body .bottom-box p {font-size: 1.5rem; line-height: 1.3;}
    .mobile-list li .list-body .bottom-box p strong {margin-left: 4px; color: #444; line-height: 1.3; font-weight: bold;}
    .mobile-list li .list-body .bottom-box button {font-size: 1.4rem; font-weight: 300; padding: 4px 6px; border-radius: 4px;}

    /* 모바일 토글 리스트 */
    .mobile-toggle-list { border: 1px solid #c8c8c8;}
    .mobile-toggle-list li {}
    .mobile-toggle-list li .question {padding: 10px; border-bottom: 1px solid #c8c8c8; justify-content: space-between; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;}
    .mobile-toggle-list li:last-child .question {border-bottom: 0;}
    .mobile-toggle-list li .question p {width: calc(100% - 20px); line-height: 1; justify-content: space-between; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    .mobile-toggle-list li .question img {width: 14px; transition: 0.25s;}
    .mobile-toggle-list li .question img.rotated {transform: rotate(-180deg);}
    .mobile-toggle-list li .answer-box {display: none; padding: 10px; height: 120px; background: #f8f8f8; overflow-y: auto; border-bottom: 1px solid #c8c8c8;}
    .mobile-toggle-list li:last-child .answer-box { border-top: 1px solid #c8c8c8; border-bottom: 0;}


}
@media (max-width:500px) {
    .learning-wrap .learning-group .body .right {flex-wrap: wrap; justify-content: center;}
    .learning-wrap .learning-group .body .right .progress-group {width: 100%;}
    .learning-wrap .learning-group .body .right .info-text {top: calc(100% - 6px); font-size: 1.4rem;}
}


/*===========================================================================
    마이페이지
============================================================================*/
.mypage-wrap {padding:40px 0;}
.mypage-wrap .container > h2 {font-size: 2.4rem; margin-bottom: 10px; font-weight: 500;}
.mypage-wrap .mypage-menu {padding: 34px 0; border: 1px solid #e3e3e3; border-radius: 10px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.mypage-wrap .mypage-menu a {flex: 1; position: relative; text-align: center;}
.mypage-wrap .mypage-menu a:not(:last-child)::after {content:''; width: 1px; height: 40px; background: #e3e3e3; position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
.mypage-wrap .mypage-menu a p {font-size: 2rem;}
.mypage-wrap .mypage-menu a p:first-child {line-height: 1; margin-bottom: 4px;}
.mypage-wrap .mypage-menu a p strong {font-size: 2.8rem; font-weight: bold; line-height: 1;}
.mypage-wrap .go-payment {padding: 16px 20px; font-size: 1.8rem; background: #ededed; border-radius: 10px; margin: 0 0 40px; white-space: nowrap;}
.mypage-wrap .go-payment img {margin-right: 10px;}
.mypage-wrap .go-payment span {margin-left: 10px; font-size: 1.5rem; opacity: 0.5;}
.mypage-wrap #order-list-container {margin: 30px 0 30px 0;}

@media (max-width:1200px) {

}

@media (max-width:800px) {
    .mypage-wrap .container > h2 {font-size: 2rem;}
    .mypage-wrap .mypage-menu {padding: 20px 0;}
    .mypage-wrap .mypage-menu a p {font-size: 1.4rem;}
    .mypage-wrap .mypage-menu a p strong {font-size: 1.8rem;}
    .mypage-wrap .go-payment {font-size: 1.5rem;}
    .mypage-wrap .go-payment img {width: 34px;}
    .mypage-wrap .go-payment span {font-size: 1.2rem; width: 100%;}
    .mypage-wrap .mobile-list li .list-head {background: #474747;}
    .mypage-wrap .mobile-list li .list-head p {color: #fff;}
    .mypage-wrap .mobile-list li .list-body .test-box .bg-main {padding: 5px 12px; line-height: 1; font-size: 1.4rem; color: #fff; border-radius: 4px;}
    .mypage-wrap .mobile-list li .list-body .top-box {padding: 5px 12px; line-height: 1; font-size: 1.4rem; color: #444; border-radius: 4px;}
}

@media (max-width:380px) {
    .mypage-wrap .mypage-menu {padding: 0;}
    .mypage-wrap .mypage-menu a {width: 50%; flex: auto; padding: 20px 10px;}
    .mypage-wrap .mypage-menu a:nth-child(1), .mypage-wrap .mypage-menu a:nth-child(2) {border-bottom: 1px solid #e3e3e3;}
    .mypage-wrap .mypage-menu a:nth-child(1), .mypage-wrap .mypage-menu a:nth-child(3) {border-right: 1px solid #e3e3e3;}
    .mypage-wrap .mypage-menu a::after {display: none;}
}

/*===========================================================================
    로그인
============================================================================*/
.login-wrap {width: 100%; height: 100vh; padding: 120px 0; background: #fafafa; display: flex; justify-content: center; align-items: center;}
.login-wrap .container {max-width: 440px; }
.login-wrap .logo {display: block; width: 150px; margin:0 auto 30px;}
.login-wrap h2 {font-size: 3rem; margin-bottom: 30px; text-align: center;}
.login-wrap .input-box {border: 1px solid #c8c8c8; margin-bottom: 20px; border-radius: 10px; overflow: hidden;}
.login-wrap .input-box input {width: 100%; border:0; padding: 15px 20px;}
.login-wrap .input-box input:first-child {border-bottom: 1px solid #c8c8c8; border-radius: 0;}
.login-wrap .login-btn {width: 100%; font-size: 1.8rem; color: #fff; line-height: 30px; margin-bottom: 20px;}
.login-wrap .register-box {justify-content: space-between; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid #c8c8c8;}
.login-wrap .sns-box {}
.login-wrap .sns-box p {font-size: 1.4rem; margin-bottom: 20px; text-align: center;}
.login-wrap .sns-box .col02 {justify-content: center; gap: 20px;}
.login-wrap .sns-box .col02 button {width: auto; padding: 0;}

@media (max-width:1200px) {
    .login-wrap {padding: 40px 0;}
    .login-wrap .container {height: auto;}
}

@media (max-width:800px) {
    
}

/*===========================================================================
    회원가입(개인/기업)
============================================================================*/
.join-wrap {width: 100%; height: 100vh; padding: 120px 0; background: #fafafa; }
.join-wrap .container {max-width: 660px; }
.join-wrap .logo {display: block; width: 150px; margin:0 auto 30px;}
.join-wrap h2 {font-size: 3rem; margin-bottom: 30px; text-align: center;}
.join-wrap .category {width: 100%;}
.join-wrap .category ul {width: 620px; height: 100%; margin: 0 auto;}
.join-wrap .category ul li {width: 300px; height: 60%; margin: 0 5px; padding: 35px 0; float: left; list-style: none; border: 1px solid #e0e0e0; box-sizing: border-box; background-color: #fff; text-align: center;}
.join-wrap .category dl {padding-top: 5%;}
.join-wrap .category dt {font-size: 28px; line-height: 27px; height: 27px; color: #222;}
.join-wrap .category dd {font-size: 16px; color: #666; line-height: 24px; padding-top: 2%;}
.join-wrap .input-box input {width: 80%; border: 1px solid #c8c8c8; padding: 15px 20px; margin-top: 5%;}
.join-wrap .join-btn {width: 80%; font-size: 1.8rem; color: #fff; line-height: 30px; }
.join-wrap .btn-1 {margin-top: 25%;}
.join-wrap .btn-2 {background: #57b396; margin-top: 2%;}

@media (max-width:1200px) {
    .join-wrap {padding: 40px 0; height: 100%;}
    .join-wrap .container {height: auto;}
	.join-wrap .category ul {width: 100%;}
	.join-wrap .category ul li {float: none; margin: 30px auto;}
}

@media (max-width:800px) {
    
}

/*===========================================================================
    아이디 비번찾기
============================================================================*/
.login-find-wrap {width: 100%; padding-top: 100px; background: #fafafa; }
.login-find-wrap .logo {display: block; width: 150px; margin:0 auto 30px;}
.login-find-wrap h2 {font-size: 3rem; margin-bottom: 30px; text-align: center;}
.login-find-wrap .container {max-width: 660px;}
.login-find-wrap .tab-content {background: #fff; text-align: center; border: 1px solid #c8c8c8; border-top: none;}
.login-find-wrap .tab-content .guide-text {margin-top: 10px}
.login-find-wrap .input-box input {width: 80%; border: 1px solid #c8c8c8; padding: 15px 20px; margin: 0 0 5px 0;}
.login-find-wrap .find-btn {width: 80%; margin-top: 20px; font-size: 1.8rem; color: #fff; line-height: 40px; }

@media (max-width:1200px) {
    .login-find-wrap {padding: 40px 0;}
}

@media (max-width:800px) {
    
}


/*===========================================================================
    회원가입 + 정보 입력 형식
============================================================================*/
.signup-wrap .stepper-wrapper {display: flex; justify-content: space-between; margin-bottom: 4%;}
.signup-wrap .stepper-item { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1;}

.signup-wrap .stepper-item:before { position: absolute; content: ""; border-bottom: 2px solid #ccc; width: 100%; top: 20px; left: -50%; z-index: 2;}
.signup-wrap .stepper-item:after { position: absolute; content: ""; border-bottom: 2px solid #ccc; width: 100%; top: 20px; left: 50%; z-index: 2;}
.signup-wrap .stepper-item .step-counter { position: relative; z-index: 5; display: flex;  justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #ccc; margin-bottom: 6px;}
.signup-wrap .stepper-item.active { font-weight: bold;}
.signup-wrap .stepper-item.completed .step-counter { background-color: #4867d5; color: white;}
.signup-wrap .stepper-item.completed::after { position: absolute; content: ""; border-bottom: 2px solid #4867d5; width: 100%; top: 20px; left: 50%; z-index: 3;}
.signup-wrap .stepper-item:first-child::before { content: none;}
.signup-wrap .stepper-item:last-child::after { content: none;}

.register-wrap {}
.register-wrap p {font-size: 1.4rem; line-height: 1.2;}
.register-wrap input:not(input[type="checkbox"], input[type="radio"]) {max-width: 400px; width: 100%;}
.register-wrap textarea {width: 100%; height: 440px;}
.register-wrap .text-title span {font-size: 1.6rem; margin-left: 10px; font-weight: 400;}
.register-wrap table {text-align: left;}
.register-wrap table th {background: #f8f8f8; color: #222; text-align: center;}
.register-wrap .select-box {width: 130px;}
.register-wrap .select-box p {border-radius: 5px;}
.register-wrap .valid-box {margin-top: 10px;}
.register-wrap .valid-box .img-box {width: 20px; margin-right: 4px;}
.register-wrap .valid-box .img-box img {width: 100%;}
.register-wrap .valid-box .progress-area {}
.register-wrap .valid-box .progress-area .progress-box {max-width: 160px; height: 10px; border-radius: 5px; background: #eaeaea;}
.register-wrap .valid-box .progress-area .progress-box .progress {width: 60%; height: 100%; background: #ea5656; border-radius: 5px;}
.register-wrap .valid-box .progress-area p {line-height: 1; margin-top: 2px;}
.register-wrap .email-box {display: flex; align-items: center; gap: 4px;}
.register-wrap .email-box input[type="text"] {max-width: 188px;}
.register-wrap .gap-box {display: flex; align-items: center; gap: 4px;}
.register-wrap .resident-num-box {gap: 4px;}
.register-wrap .resident-num-box input {width: 100%;}
.register-wrap .resident-num-box input:first-child {max-width: 130px;}
.register-wrap .resident-num-box input:nth-child(3) {max-width: 170px;}
.register-wrap .registration-box input:not(input[type="checkbox"], input[type="radio"]) {max-width: 124px;}
.register-wrap .mail-box select {width: 130px;}
.register-wrap .mail-box button {width: auto; font-size: 1.4rem; padding: 8px 10px; margin-left: 4px; border-radius: 5px;}
.register-wrap .mail-box input[type="text"] {max-width: 90px;}
.register-wrap .address-box input[type="text"] {max-width: 400px;}
.register-wrap .phone-box  {gap: 4px; margin-top: 10px;}
.register-wrap .phone-box select {width: 80px;}
.register-wrap .phone-box input[type="text"], .register-wrap .phone-box input[type="number"] {max-width: 130px;}
.register-wrap .file-box {position: relative; display: flex; align-items: center; gap: 0px;}
.register-wrap .file-box .file-btn {font-size: 14px;}
.register-wrap input[type=file]::file-selector-button {width: 120px; height: 30px; background: #fff; border: 1px solid #c8c8c8; border-radius: 5px; cursor: pointer;}
.register-wrap input[type=file]::file-selector-button:hover { background: rgb(77,77,77); color: #fff;}
.register-wrap .file-box .file-btn input {visibility: hidden; position: absolute; top: 0; left: 0; width: 100%;}
.register-wrap .file-box .file-btn span {font-size: 1.4rem;}
.register-wrap .file-box .text-deco {font-size: 1.4rem; position: absolute; top: calc(100% + 6px); right: -10px;}
.register-wrap .button-group {margin-top: 40px;}
@media (max-width:1200px) {

}

@media (max-width:800px) {
    .register-wrap p {}
    .register-wrap textarea {height: 240px;}
    .register-wrap table colgroup col:first-child {width: 100px;}
    .register-wrap table th {white-space: wrap; text-align: center; word-break: auto-phrase;}
    .register-wrap table th.vertical-top {vertical-align: top;}
    .register-wrap table select {max-width: 80px;}
    .register-wrap .text-title {flex-wrap: wrap;}
    .register-wrap .text-title span {font-size: 1.4rem;}
    .register-wrap .valid-box .img-box {width: 20px;}
    .register-wrap .email-box select {max-width: 70px; font-size: 1.3rem; padding: 0 2px 0 4px;}
}

/*===========================================================================
    이패스 소개
============================================================================*/
/*회사연혁*/
.history-wrap {padding: 0;}
.history-wrap .anchor-sec {padding: 60px 0; }
.history-wrap .history-sec {background: #fff; padding: 60px 0; }
.history-wrap .informatin-sec {background: #fff; padding-top: 60px; }
.history-wrap .informatin-sec li{margin-top: 20px;}
.history-wrap .informatin-sec .info-menu{background: #edf1fe; padding: 0 20px; margin-right: 10px; border-radius: 50px; text-align: center;  width: 100px;}
.history-wrap .anchor {}
.history-wrap .anchor h2 {font-size: 3rem; margin-bottom: 10px; font-weight: 600;}
.history-wrap .anchor h4,
.history-wrap .history h4{font-weight: 400; margin: 0 0 10px 0;}

@media (max-width:1200px) {

}

@media (max-width:800px) {   
	.history-wrap .anchor-sec {padding: 30px 0; }
}


/*===========================================================================
    사업영역
============================================================================*/

/*사업영역*/
.business-company-wrap {padding: 0;}
.business-company-wrap .business-sec {padding: 60px 0; }
.business-company-wrap .detail-group {background: #fff; padding: 60px 0 0 0; }
.business-company-wrap .business {}
.business-company-wrap .business h2 {font-size: 3rem; margin-bottom: 10px; font-weight: 600;}
.business-company-wrap .business h4 {font-weight: 400; margin: 0 0 10px 0;}
.business-company-wrap .business-img {width: 100%; display: block; margin: 20px 0 100px 0;}
.business-company-wrap a.shortcut-btn {margin-top: 20px; text-align: center; max-width: 200px; line-height: 1; padding: 10px; border: 1px solid #bebebe; border-radius: 5px;}

@media (max-width:1200px) {

}

@media (max-width:800px) {   
	.business-company-wrap .business-sec {padding: 30px 0; }
}

/*===========================================================================
    오시는 길
============================================================================*/

.map-wrap {padding: 0;}
.map-wrap .map-sec {padding: 60px 0; }
.map-wrap .map {}
.map-wrap .text-box {padding: 30px 0;}
.map-wrap .map h2 {font-size: 3rem; margin-bottom: 10px; font-weight: 600;}
.map-wrap .map h4{font-weight: 400; margin: 0 0 10px 0;}
.map-wrap .map-img {display: block; margin: 20px 0; width: 100%;}
.map-wrap .allmap {display: flex; justify-content: flex-start; margin: 20px 0;}
.map-wrap .map-ico-group {display: flex; align-items: center;}
.map-wrap .second {margin-left: 100px;}
.map-wrap .map-ico-group h2{font-size: 1.8rem; margin-bottom: 10px;}
.map-wrap .map-ico-group .map-text{margin-left: 20px;}
.map-wrap .map-ico {}
.map-wrap hr {margin-top: 0;  border-top: 1px solid #eee; border-left: 0; border-radius: 0;}

/*===========================================================================
    유의사항 안내
============================================================================*/
.note-wrap {padding: 0;}
.note-wrap .note-sec {padding: 30px 0; }
.note-wrap .note {}
.note-wrap .text-box {padding: 30px 0; margin-bottom: 0;}
.note-wrap .note h2 {font-size: 3rem; margin-bottom: 10px; font-weight: 600;}
.note-wrap .note h4{font-weight: 400; margin: 0 0 10px 0;}


@media (max-width:1200px) {

}

@media (max-width:800px) {
	.map-wrap .map-sec {padding: 30px 0; }
	.map-wrap .allmap {display: block;}
	.map-wrap .map-ico-group {display: flex; flex-direction: column;}
	.map-wrap .second {margin-left: 0; margin-top: 20px;}
	.map-wrap .map-text {text-align: center !important; margin: 20px 0 0 0 !important;}
}


/*===========================================================================
    에디터
============================================================================*/
.editor-wrap input:not(input[type="checkbox"], input[type="radio"]) {max-width: 100%;}

@media (max-width:800px) {
    .editor-wrap table colgroup col:first-child {width: 80px;}
}
/*===========================================================================
    나의 강의실
============================================================================*/
.classroom-wrap {padding-top: 0;}
.classroom-wrap .classroom-menu {display: flex; flex-wrap: nowrap; flex-direction: column; justify-content: center; align-items: center;}
.classroom-wrap .classroom-menu .user_welcome {padding: 0 24px; display: flex; justify-content: center; align-items: center;}
.classroom-wrap .container > h2 {font-size: 2.4rem; margin-bottom: 10px; font-weight: 600;}
.classroom-wrap .classroom-top {padding: 50px 0; margin-bottom: 40px; background: #fafafc;}
.classroom-wrap .classroom-menu {gap: 10px;}
.classroom-wrap .classroom-menu > div {flex: 1; height: 140px; padding: 24px; border-radius: 10px;}
.classroom-wrap .classroom-menu .left {gap: 20px;}
.classroom-wrap .classroom-menu .left .img-box {width: 100px; height: 100px; overflow: hidden; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.classroom-wrap .classroom-menu .left .img-box img {width: 50%;}
.classroom-wrap .classroom-menu .left .text-box {}
.classroom-wrap .classroom-menu .left .text-box h3 {font-size: 2rem; color: #fff;}
.classroom-wrap .classroom-menu .left .text-box p {line-height: 1.4; margin-top: 10px; color: #fff; font-weight: 300;}
.classroom-wrap .classroom-menu .right {border:1px solid #c8c8c8; background: #fff;}
.classroom-wrap .classroom-menu .right a {flex: 1;}
.classroom-wrap .classroom-menu .right a:first-child {position: relative;}
.classroom-wrap .classroom-menu .right a:first-child::after {content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 70px; background: #e3e3e3; transform: translateY(-50%);}
.classroom-wrap .classroom-menu .right a:nth-child(2) {position: relative;}
.classroom-wrap .classroom-menu .right a:nth-child(2)::after {content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 70px; background: #e3e3e3; transform: translateY(-50%);}
.classroom-wrap .classroom-menu .right a:nth-child(3) {position: relative;}

.classroom-wrap .classroom-menu .right a p {font-size: 2rem; text-align: center;}
.classroom-wrap .classroom-menu .right a p strong {font-size: 3rem; line-height: 1; font-weight: bold;}
.classroom-wrap .tabs {border-bottom: 0;}
.classroom-wrap .tabs .tab-btn {max-width: 195px; font-size: 1.6rem;}
.classroom-wrap .tab-content {padding: 0;}
.classroom-wrap table thead th {border-top: 0;}
.classroom-wrap table tbody tr:nth-child(2n - 1) td {background: #f8f8f8;}
.classroom-wrap .modal-body table tbody tr:nth-child(2n - 1) td {background: #fff; border: 1px solid #000;}
.close-btn {display: flex; align-items: center;}
#sugang::before {content: ""; display: inline-block; width: 49px; height: 45px; background-image: url("/static/site/img/print.svg"); background-size: contain; background-repeat: no-repeat; vertical-align: middle;}
#sugang {border: none; outline: none; background: none;}
#suryo::before {content: ""; display: inline-block; width: 49px; height: 45px; background-image: url("/static/site/img/print.svg"); background-size: contain; background-repeat: no-repeat; vertical-align: middle;}
#suryo {border: none; outline: none; background: none;}
@media print {.close-btn img {display: none;}}

@media (max-width:1200px) {

}

@media (max-width:800px) {
    .classroom-wrap .classroom-top {padding: 40px 0; margin-bottom: 20px;}
    .classroom-wrap .classroom-menu > div {width: 100%; height: auto; padding: 20px; flex: initial;} 
    .classroom-wrap .classroom-menu .left {gap: 14px;}
    .classroom-wrap .classroom-menu .left .img-box {width: 70px; height: 70px;}
    .classroom-wrap .classroom-menu .right a p {font-size: 1.6rem;}
    .classroom-wrap .classroom-menu .right a p strong {font-size: 2.8rem;}
    .classroom-wrap .tabs {margin-bottom: 20px;}
    .classroom-wrap .tabs .tab-btn {max-width: 50%; border: 1px solid #c8c8c8; font-size: 1.5rem; padding: 14px 4px; border-radius: 10px;}
    .classroom-wrap .mobile-list li .list-head {background: #474747;}
    .classroom-wrap .mobile-list li .list-head p {color: #fff;}
    .classroom-wrap .mobile-list li .list-body .test-box .bg-main {padding: 5px 12px; line-height: 1; font-size: 1.4rem; color: #fff; border-radius: 4px;}
    .classroom-wrap .mobile-list li .list-body .test-box .bg-list {padding: 5px 12px; line-height: 1; font-size: 1.4rem; color: #fff; border-radius: 4px;}
    .classroom-wrap .mobile-list.end li .list-head {background: #c6c6c6;}
    .classroom-wrap .mobile-list.end li .list-body .progress-bar .progress {background: #eeeeee;}
    .classroom-wrap .mobile-list.end li .list-body .top-box strong {color: #444;}
    .classroom-wrap .mobile-list.expected li .list-head {background: #c6c6c6;}
    .classroom-wrap .mobile-list.expected li .list-body .progress-bar .progress {background: #eeeeee;}
    .classroom-wrap .mobile-list.expected li .list-body .top-box strong {color: #444;}
}


/*===========================================================================
    결제정보
============================================================================*/
.payment-info-wrap {}
.payment-info-wrap .text-title {justify-content: space-between;}
.payment-info-wrap .text-title label {font-size: 1.4rem; gap: 4px; font-weight: 400;}
.payment-info-wrap table {border-top: 2px solid #474747;}
.payment-info-wrap table td .book-box {display: flex;}
.payment-info-wrap table td .book-box .img-box {width: 100px; margin-right: 10px;}
.payment-info-wrap table td .book-box .img-box img {width: 100%;}
.payment-info-wrap table td .book-box p {margin: 0;}
.payment-info-wrap table tfoot {background: #f4f6fd;}
.payment-info-wrap table tfoot td {font-size: 2rem; padding: 20px 0;}
.payment-info-wrap table tfoot td strong {font-weight: bold;}
.payment-info-wrap .total-amount {font-size: 2rem; font-weight: bold;}

@media (max-width:1200px) {

}

@media (max-width:800px) {
    .th-container {display: grid; grid-template-columns: 1fr 2fr;}
    .th-container th {border: none; padding: 10px;}
    .td-container {display: grid; grid-template-columns: 1fr;}
    .td-container td {border: none; padding: 10px;}
    .payment-info-wrap  table colgroup col:first-child {width: 90px;}
    .payment-info-wrap table th {text-align: center;}
    .payment-info-wrap .mobile table th.text-left {text-align: left;}
}



/*===========================================================================
    결제완료
============================================================================*/
.order-result-wrap {width: 100%; height: 100vh; padding: 120px 0; background: #fafafa; display: flex; justify-content: center; align-items: center;}
.order-result-wrap .button-group {margin-top: 10px;}
.order-result-wrap .container {max-width: 500px; }
.order-result-wrap .order-result-logo {display: block;  margin:0 auto 30px;}
.order-result-wrap h2 {font-size: 3rem; margin-bottom: 10px; text-align: center;}
.order-result-wrap > div p {font-size: 2rem; font-weight: 300; line-height: 1.4; text-align: center;}

.order-result-wrap .col-group {border:1px solid #c8c8c8; background: #fff; width: 460px; height: 140px; padding: 24px; border-radius: 10px; margin-top: 30px;}
.order-result-wrap .col-group a {flex: 1;}
.order-result-wrap .col-group a:first-child {position: relative;}
.order-result-wrap .col-group a:first-child::after {content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 70px; background: #e3e3e3; transform: translateY(-50%);}

.order-result-wrap .col-group a p {font-size: 1.8rem; text-align: center;}
.order-result-wrap .col-group a p strong {font-size: 1.8rem; line-height: 1; font-weight: bold;}
.order-result-wrap .col-group a p strong {font-size: 1.8rem; line-height: 1; font-weight: bold;}

@media (max-width:1200px) {

}

@media (max-width:800px) {
    .order-result-wrap .col-group {width: 100%; height: auto; padding: 20px 0;}
	.order-result-wrap .col-group a p {font-size: 1.6rem;}
}


/*===========================================================================
    오답노트
============================================================================*/
.note-wrap {}
.note-wrap .note-title {display: flex; justify-content: space-between;}
.note-wrap .out {width: 100px;}
.note-wrap hr {margin-top: -2%;  border-top: 2px solid #474747; border-left: 0; border-radius: 0;}
.note-wrap .note-group {border-bottom: 1px solid #dadada; padding-bottom: 40px;}
.note-wrap .note-group:last-child {border: 0;}
.note-wrap .question {font-size: 2rem; margin-top: 40px;}
.note-wrap .answer {margin-top: 20px; display: flex; flex-direction: column; gap: 15px;}
.note-wrap .explanation {margin-top: 20px; width: 100%; padding: 10px 20px; border-radius: 10px; background: #f1f1f1;}
.note-wrap .explanation p {font-size: 1.5rem;}




/*===========================================================================
    lms 결제정보
============================================================================*/
.lms-payment-info-wrap {}
.lms-payment-info-wrap .text-title {justify-content: space-between;}
.lms-payment-info-wrap .text-title label {font-size: 1.4rem; gap: 4px; font-weight: 400;}
.lms-payment-info-wrap table {border-top: 2px solid #474747; border-left: 0; border-radius: 0;}
.lms-payment-info-wrap table th:first-child, .lms-payment-info-wrap table td:first-child {}
.lms-payment-info-wrap table th:last-child, .lms-payment-info-wrap table td:last-child {}
.lms-payment-info-wrap p {margin-bottom: 10px;}
.lms-payment-info-wrap p:last-child {margin-bottom: 0;}
.lms-payment-info-wrap td select {font-size: 1.4rem; max-width: 500px; width: 100%;}
.lms-payment-info-wrap table {text-align: initial;}
.lms-payment-info-wrap .lms-total-amount {background: #f4f6fd; margin-bottom: 80px;}
.lms-payment-info-wrap .lms-total-amount {font-size: 2.4rem; padding: 20px 0;}
.lms-payment-info-wrap .lms-total-amount strong {font-weight: bold;}
.lms-payment-info-wrap .agree-box h3 {padding: 0;}
.lms-payment-info-wrap .agree-box h3::before {display: none;}
.lms-payment-info-wrap .agree-box table {border: 1px solid #c8c8c8; border-top: 2px solid #474747;}
.lms-payment-info-wrap .agree-box tbody, .lms-payment-info-wrap .agree-box td {}
.lms-payment-info-wrap .agree-box button {width: auto; border-radius: 5px;}
.lms-payment-info-wrap .agree-box tfoot {background:#f8f8f8;}
.lms-payment-info-wrap .agree-box tfoot .col-group {justify-content: space-between;}
.lms-payment-info-wrap .agree-box tfoot td {padding: 4px 10px;}
.lms-payment-info-wrap .agree-box tfoot button {font-size: 1.5rem; text-decoration: underline;}
.lms-payment-info-wrap .verification-box table td > .col-group {gap: 20px;}
.lms-payment-info-wrap .verification-box table tfoot td > .col-group {gap: 0;}
.lms-payment-info-wrap .verification-box table td .label {display: flex; align-items: center; gap: 10px;}
.lms-payment-info-wrap .verification-box table td .label span {font-size: inherit;}
.lms-payment-info-wrap .verification-box table td .label.name input {width: 130px;}
.lms-payment-info-wrap .verification-box table td .label.resident button {width: 90px; font-size: 1.5rem;} 
.lms-payment-info-wrap .consent-box .textarea-box {height: 100px;}
.lms-payment-info-wrap .mail-box {margin-bottom: 6px;}
.lms-payment-info-wrap .pay-td {vertical-align: top;}
.lms-payment-info-wrap .pay-td .pay-radio-box {height: 20px;}
.lms-payment-info-wrap .div-table{display: none; margin-top: 20px;}

.collection-modal-wrap .modal {width: 560px;}
.collection-modal-wrap .modal .text-deco {margin: 30px 0 0;}

@media (max-width:1200px) {

}

@media (max-width:800px) {
    .lms-payment-info-wrap .agree-box > p br {display: none;}
    .lms-payment-info-wrap .verification-box table td > .col-group {flex-wrap: wrap; gap: 10px;}
    .lms-payment-info-wrap .verification-box table td .label {width: 100%; white-space: nowrap;}
    .lms-payment-info-wrap .verification-box table td .label span {width: 70px;}
    .lms-payment-info-wrap .verification-box table td .label.name input {width: calc(100% - 80px);}
    .lms-payment-info-wrap .order-info-box .overflow-y-auto table {min-width: 800px;}
    .lms-payment-info-wrap .book-order-info-box .overflow-y-auto table {min-width: 500px;}
    /* .lms-payment-info-wrap .order-info-box table colgroup col:nth-child(1), .lms-payment-info-wrap .book-order-info-box table colgroup col:nth-child(1) {min-width: 200px;}
    .lms-payment-info-wrap .order-info-box table colgroup col:nth-child(2), .lms-payment-info-wrap .book-order-info-box table colgroup col:nth-child(2) {min-width: 100px;} */
    .lms-payment-info-wrap .text-box .overflow-y-auto table colgroup col:first-child {width: auto;}
    .lms-payment-info-wrap .lms-total-amount {font-size: 1.8rem; margin-bottom: 40px;}
    .lms-payment-info-wrap table tfoot td > .col-group {display: block; padding: 10px 0;}
    .lms-payment-info-wrap .agree-box tfoot .col-group {flex-direction: column; gap: 4px; align-items: flex-start;}
    .lms-payment-info-wrap .agree-box tfoot button {font-size: 1.4rem; margin-top: 0; padding-left: 0;}
    .lms-payment-info-wrap .payment-box table tr {display: grid; grid-template-columns: auto;}
    .lms-payment-info-wrap .payment-box table th {width: 100%; border-left: 1px solid #c8c8c8;}
    .lms-payment-info-wrap .payment-box table td {width: 100%; border-right: 1px solid #c8c8c8; border-top: 0;}
    .lms-payment-info-wrap .gap-box {flex-wrap: wrap;}
    .lms-payment-info-wrap .registration-box {flex-wrap: nowrap;}
    .lms-payment-info-wrap .gap-box .text-desc {font-size: 1.3rem; width: 100%;}
    .collection-modal-wrap .modal {width: calc(100% - 40px);}
}


/*===========================================================================
    이벤트
============================================================================*/
.event-wrap .text-title {border-bottom: 1px solid #ebebeb; margin-bottom: 20px; padding-bottom: 20px;}
.event-wrap .text-title::before {background: #8e8e8e;}
.event-wrap .thumbnail-group {position: relative;}
.event-wrap .thumbnail-group li {position: relative; padding: 0;}
.event-wrap .thumbnail-group li .status {position: absolute; top: 10px; right: 10px; padding: 4px 8px; font-size: 1.3rem; color: #fff; background: rgba(34, 34, 34, 0.6);}
.event-wrap .thumbnail-group li .status_02 {position: absolute; top: 10px; right: 10px; padding: 4px 8px; font-size: 1.3rem; color: #fff; background: #979797;}
.event-wrap .thumbnail-group li .text-box {padding: 0 20px;}

@media (max-width:1200px) {

}

@media (max-width:800px) {
    .event-wrap .text-title {padding-bottom: 14px; margin-bottom: 14px;}
}


/*===========================================================================
    도서몰
============================================================================*/
.mall-wrap {}
.mall-wrap .mall-banner {margin-bottom: 40px;}
.mall-wrap .mall-banner .swiper-pagination-bullet {border: 1px solid #000; }
.mall-wrap .mall-banner .swiper-pagination-bullet-active {background: #000;}
.mall-wrap .mall-sec {display: flex; gap: 40px;}
.mall-wrap .mall-sec .lnb {width: 200px;}
.mall-wrap .mall-sec .lnb > h4 {padding: 20px 14px 20px 20px; line-height: 1; background: #f4f4f4; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb;}
.mall-wrap .mall-sec .lnb h4 {font-size: 18px;}
.mall-wrap .mall-sec .lnb ul {padding: 10px 0 10px 0}
.mall-wrap .mall-sec .lnb > ul > li {border-bottom: 1px solid #ebebeb;}
.mall-wrap .mall-sec .lnb ul li p {padding: 4px 14px 4px 20px; justify-content: space-between; cursor: pointer; line-height: 2; }
.mall-wrap .mall-sec .lnb ul li p img {width: 14px; transition: 0.25s;}
.mall-wrap .mall-sec .lnb ul li p img.rotate {transform: rotate(-180deg);}
.mall-wrap .mall-sec .lnb ul li ul {display: none; padding: 4px 14px 10px 20px;}
.mall-wrap .mall-sec .lnb ul li ul li a {line-height: 1.8;}
.mall-wrap .mall-sec .lnb ul li ul li a:hover {color: #4866d4;}
.mall-wrap .mall-sec .lnb .service-box {padding: 20px; margin-top: 30px; background: #f5f7f9; border: 1px solid #ebebeb;}
.mall-wrap .mall-sec .lnb .service-box h5 {font-size: 1.8rem; margin-bottom: 10px;}
.mall-wrap .mall-sec .lnb .service-box p {line-height: 1.4; font-size: 1.5rem;}
.mall-wrap .mall-sec .lnb .service-box h4 {font-size: 2.4rem; margin: 2px 0 10px 0;}
.mall-wrap .mall-sec .content {width: calc(100% - 240px);}
.mall-wrap .mall-sec .top {border-bottom: 1px solid #ebebeb; margin-bottom: 20px; padding-bottom: 20px; justify-content: space-between;}
.mall-wrap .mall-sec .top .text-title {margin-bottom: 0;}
.mall-wrap .mall-sec .mall-list {display: flex; gap: 86px; margin-bottom: 20px; flex-wrap: wrap;}
.mall-wrap .mall-sec .mall-list li {width: calc(25% - 20px); text-align: center; box-sizing: border-box;}
.mall-wrap .mall-sec .mall-list .img-box {margin:0px 0px 10px 40px;}
.mall-wrap .mall-sec .mall-list .img-box img {width: 120px; height: 180px;}
.mall-wrap .mall-sec .mall-list .short-text03{margin: 4px 0 10px 0; font-size: 1.8rem; width: 200px; overflow: hidden; white-space: normal;}



@media (max-width:1200px) {
    .mall-wrap .mall-sec {flex-wrap:wrap;}
    .mall-wrap .mall-sec .lnb, .mall-wrap .mall-sec .content {width: 100%;}
    .mall-wrap .mall-sec .lnb .service-box {display: none;}
    .mall-wrap .mall-sec .mall-list {display: flex; gap: 55px; margin-bottom: 20px; flex-wrap: wrap;}
    .mall-wrap .mall-sec .mall-list li {width: calc((100% - 40px) / 3);}
    .mall-wrap .swiper-wrapper .swiper-slide img {width: 100%; height: auto;}
    .mall-wrap .swiper-wrapper .swiper-slide .pc-img {display: block;}
}

@media (max-width:800px) {
    .mall-wrap .mall-sec .top {flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 14px;}
    .mall-wrap .mall-sec .top .text-title {width: 100%;}
    .mall-wrap .mall-sec .top .sub-search-box {width: 100%; margin-top: 20px; justify-content: flex-end;}
    .mall-wrap .mall-sec .mall-list li {width: calc((100% - 20px) / 2);}
    .mall-wrap .mall-sec .mall-list li p {font-size: 1.4rem;}
    .mall-wrap .mall-sec .mall-list li .title {font-size: 1.5rem; margin: 4px 0 6px 0;}
    .mall-wrap .swiper-wrapper .swiper-slide .pc-img {display: none;}
}

@media (max-width:500px) {
    .sub-search-box input {max-width: 160px;}
    .mall-wrap .mall-sec .mall-list {gap: 10px;}
    .mall-wrap .mall-sec .mall-list .img-box {margin:0px 0px 10px 36px;}
    .mall-wrap .mall-sec .mall-list .img-box img {width: 100px; height: 140px;}
    .mall-wrap .mall-sec .mall-list .short-text03{margin: 4px 0 10px 0; font-size: 1.2rem; width: 170px;}
}


/*===========================================================================
    장바구니
============================================================================*/
.basket-wrap {background: #ececec;}
.basket-wrap .container {max-width: 1100px; padding: 40px 20px; border-radius: 10px; background: #fff;}
.basket-wrap .text-box {margin-bottom: 80px;}
.basket-wrap .text-box:last-child {margin-bottom: 0;}
.basket-wrap .text-box .table-top {margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;}
.basket-wrap .text-box .table-top .text-title {margin-bottom: 0;}
.basket-wrap .text-box .table-top button {font-size: 1.4rem; border-radius: 5px; display: flex; align-items: center;}
.basket-wrap .text-box .table-top button img {width: 12px; margin-right: 4px;}
.basket-wrap table td {white-space: nowrap;}
.basket-wrap table td a {text-decoration: none;}
.basket-wrap table td .img-box {height: 86px; margin-right: 14px;}
.basket-wrap table td .img-box img {height: 100%;}
.basket-wrap table td .text-overflow {max-width: 500px;}
.basket-wrap .total-group {margin-top: 40px; display: flex;}
.basket-wrap .total-group > div {display: flex; flex: 1; align-items: center; justify-content: center;}
.basket-wrap .total-group > div:first-child {position: relative;}
.basket-wrap .total-group > div:first-child::after {content:''; position: absolute; top: 50%; right: 0; width: 1px; height: 100%; transform: translateY(-50%); background: #c8c8c8;}
.basket-wrap .total-group > div p {font-size: 1.8rem; font-weight: 500; line-height: 1.4; text-align: center;}
.basket-wrap .total-group > div strong {font-weight: bold;}
.basket-wrap .total-group > div button {width: 180px; line-height: 44px; margin-left: 20px; border-radius: 5px; padding: 0;}
.basket-wrap .total-group > div .plus-text {padding: 0 40px; font-size: 2.4rem; color: #a9a9a9;}
.basket-wrap .total-group .total-box p {font-size: 2rem;}
@media (max-width:1200px) {
    .basket-wrap .container {max-width: calc(1100px - 40px); margin-left: 20px; margin-right: 20px;}
}

@media (max-width:1000px) {
    .basket-wrap .total-group {flex-wrap: wrap;}
    .basket-wrap .total-group > div {width: 100%; flex: auto;}
    .basket-wrap .total-group > div:first-child::after {display: none;}
    .basket-wrap .total-group .total-box {margin-top: 20px;}
}

@media (max-width:800px) {
    .basket-wrap {padding: 0; border-radius: 0; background: #fff; text-align: -webkit-center;}
    .basket-wrap .container {max-width: 1100px; margin: 0;}
    .basket-wrap table td .text-overflow {max-width: 300px;}
    .basket-wrap table td {white-space:initial;}
    .basket-wrap .text-box {margin-bottom: 40px;}
    .basket-wrap .total-group {position: relative; width: calc(100% - 40px); padding: 0; margin:0 20px 100px 20px; border: 1px solid #c8c8c8;}
    .basket-wrap .total-group > div p {font-size: 1.5rem;}
    .basket-wrap .total-group > div p strong {font-size: 1.8rem;}
    .basket-wrap .total-group .amount-box {padding: 20px 10px; border-bottom: 1px solid #c8c8c8;}
    .basket-wrap .total-group .total-box {padding: 10px; margin: 0;}
    .basket-wrap .total-group button {position: absolute; top: 100%;}
}

@media (max-width:500px) {
    .basket-wrap .total-group .total-box  {flex-wrap: wrap;}
    .basket-wrap .total-group > div button {width: 100%; margin:20px 0 0;}
}


/*===========================================================================
    결제내역
============================================================================*/
.payment-detail-wrap {}
.payment-detail-wrap table tbody tr:nth-child(2n - 1) {background: #f8f8f8;}
.payment-detail-wrap table td p {font-size: 1.4rem;}
.payment-detail-wrap table td .text-overflow {max-width: 500px; text-align: left;}
.payment-detail-wrap table tbody tr td .status-box {justify-content: center;}
.payment-detail-wrap table tbody tr td .status-box button {width: auto; padding: 6px 10px; margin-left: 6px; font-size: 14px;}
.payment-detail-wrap table tbody tr td:nth-child(6) p {white-space: nowrap;}

@media (max-width:1200px) {

}

@media (max-width:800px) {
    .payment-detail-wrap table td .text-overflow {max-width: 300px;}
    .payment-detail-wrap .mobile-list li.end {pointer-events: none;}
    .payment-detail-wrap .mobile-list li.end .list-head p {color: #808080;}
    .payment-detail-wrap .mobile-list li.end .list-body {position: relative;}
    .payment-detail-wrap .mobile-list li.end .list-body::after {content:''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(153, 153, 153, 0.6);}
    .payment-detail-wrap .mobile-list li.end .list-body a strong {color: #222;}
    .payment-detail-wrap .mobile-list li .list-head {background: #474747;}
    .payment-detail-wrap .mobile-list li .list-head p {color:#fff;}
    .payment-detail-wrap .mobile-list li .list-head button {width: 76px; padding: 4px; background: #fff; border-radius: 4px;}
    .payment-detail-wrap .mobile-list li .list-head button.warning {color: #ea5656;}
    .payment-detail-wrap .mobile-list li .list-body .bottom-box .col-group {gap: 20px;}
}

@media (max-width:500px) {

}

/*===========================================================================
    회원가입 - 약관동의
============================================================================*/
.join-agree-wrap .stepper-wrapper {display: flex; justify-content: space-between; margin-bottom: 4%;}
.join-agree-wrap .stepper-item { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1;}

.join-agree-wrap .stepper-item:before { position: absolute; content: ""; border-bottom: 2px solid #ccc; width: 100%; top: 20px; left: -50%; z-index: 2;}
.join-agree-wrap .stepper-item:after { position: absolute; content: ""; border-bottom: 2px solid #ccc; width: 100%; top: 20px; left: 50%; z-index: 2;}
.join-agree-wrap .stepper-item .step-counter { position: relative; z-index: 5; display: flex;  justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #ccc; margin-bottom: 6px;}
.join-agree-wrap .stepper-item.active { font-weight: bold;}
.join-agree-wrap .stepper-item.completed .step-counter { background-color: #4867d5; color: white;}
.join-agree-wrap .stepper-item.completed::after { position: absolute; content: ""; border-bottom: 2px solid #4867d5; width: 100%; top: 20px; left: 50%; z-index: 3;}
.join-agree-wrap .stepper-item:first-child::before { content: none;}
.join-agree-wrap .stepper-item:last-child::after { content: none;}

.join-agree-wrap .agree-box h3 {padding: 0;}
.join-agree-wrap .agree-box h3::before {display: none;}
.join-agree-wrap .agree-box table {border: 1px solid #c8c8c8; border-top: 2px solid #474747;}
.join-agree-wrap .agree-box tbody, .lms-payment-info-wrap .agree-box td {}
.join-agree-wrap .agree-box button {width: auto; border-radius: 5px;}
.join-agree-wrap .agree-box thead {background:#f8f8f8;}
.join-agree-wrap .agree-box thead .col-group {justify-content: flex-end; line-height: 2;}
.join-agree-wrap .agree-box thead td {padding: 4px 10px;}
.join-agree-wrap .consent-box .textarea-box {height: 300px;}


@media (max-width:800px) {
    .join-agree-wrap .agree-box > p br {display: none;}
    .join-agree-wrap .text-box .overflow-y-auto table colgroup col:first-child {width: auto;}
    .join-agree-wrap table tfoot td > .col-group {display: block; padding: 10px 0;}
    .join-agree-wrap .agree-box tfoot .col-group {flex-direction: column; gap: 4px; align-items: flex-start;}
    .join-agree-wrap .agree-box tfoot button {font-size: 1.4rem; margin-top: 0; padding-left: 0;}
}


/*===========================================================================
    회원가입 - 본인인증
============================================================================*/
.userAuth-wrap .stepper-wrapper {display: flex; justify-content: space-between; margin-bottom: 4%;}
.userAuth-wrap .stepper-item { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1;}

.userAuth-wrap .stepper-item:before { position: absolute; content: ""; border-bottom: 2px solid #ccc; width: 100%; top: 20px; left: -50%; z-index: 2;}
.userAuth-wrap .stepper-item:after { position: absolute; content: ""; border-bottom: 2px solid #ccc; width: 100%; top: 20px; left: 50%; z-index: 2;}
.userAuth-wrap .stepper-item .step-counter { position: relative; z-index: 5; display: flex;  justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #ccc; margin-bottom: 6px;}
.userAuth-wrap .stepper-item.active { font-weight: bold;}
.userAuth-wrap .stepper-item.completed .step-counter { background-color: #4867d5; color: white;}
.userAuth-wrap .stepper-item.completed::after { position: absolute; content: ""; border-bottom: 2px solid #4867d5; width: 100%; top: 20px; left: 50%; z-index: 3;}
.userAuth-wrap .stepper-item:first-child::before { content: none;}
.userAuth-wrap .stepper-item:last-child::after { content: none;}

.userAuth-wrap .col-group {display: flex; align-items: flex-start;}
.userAuth-wrap .userAuth-menu {gap: 10px; margin-top: 4%;}
.userAuth-wrap .userAuth-menu > div {flex: 1; padding: 24px; border-radius: 10px; border:1px solid #c8c8c8;}
.userAuth-wrap .userAuth-menu .left {gap: 20px; position: relative; height: 200px;}
.userAuth-wrap .userAuth-menu .left .img-box {width: 100px; height: 100px; overflow: hidden; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.userAuth-wrap .userAuth-menu .left .img-box img {width: 50%;}
.userAuth-wrap .userAuth-menu .left .text-box {}
.userAuth-wrap .userAuth-menu .left .text-box h3 {font-size: 2rem; color: #222;}
.userAuth-wrap .userAuth-menu .left .text-box p {line-height: 1.4; margin-top: 10px; color: #222; font-weight: 300;}
.userAuth-wrap .userAuth-menu .right {position: relative;}
.userAuth-wrap .userAuth-menu .right .text-box h3 {font-size: 2rem; color: #222;}
.userAuth-wrap .userAuth-menu .right a {flex: 1;}
.userAuth-wrap .userAuth-menu .right a:first-child {position: relative;}
.userAuth-wrap .userAuth-menu .right a:first-child::after {content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 70px; background: #e3e3e3; transform: translateY(-50%);}
.userAuth-wrap .userAuth-menu .right a p {font-size: 2rem; text-align: center;}
.userAuth-wrap .userAuth-menu .right a p strong {font-size: 3rem; line-height: 1; font-weight: bold;}
.userAuth-wrap .button-group {position: absolute; bottom: 0; margin-bottom: 4%;}

@media (max-width:500px) {	
	.userAuth-wrap .userAuth-menu > div {height: 310px !important;}
	.userAuth-wrap .button-group {position: absolute; bottom: 0; margin-bottom: 8%;}	
}

/*===========================================================================
    회원가입 완료
============================================================================*/
.complete-wrap .circle {
  width: 300px;
  margin: 50px auto 20px;
}
.complete-wrap .svg-success {
  display: inline-block;
  vertical-align: top;
  height: 50px;
  width: 300px;
  opacity: 1;
	overflow: visible;}

.complete-wrap .success-tick {
	fill: none;
	stroke-width: 1px;
	stroke: #ffffff;
	stroke-dasharray: 15px, 15px;
	stroke-dashoffset: -14px;
	animation: success-tick 450ms ease 800ms forwards;
	opacity: 0;
}

.complete-wrap .success-circle-outline {
	fill: none;
	stroke-width: 1px;
	stroke: #4867d5;
	stroke-dasharray: 72px, 72px;
	stroke-dashoffset: 72px;
	animation: success-circle-outline 300ms ease-in-out 300ms forwards;
	opacity: 0;
}

.complete-wrap .success-circle-fill {
	fill: #4867d5;
	stroke: none;
	opacity: 0;
	animation: success-circle-fill 300ms ease-out 600ms forwards;
}

  @keyframes success-tick {
    0% {
      stroke-dashoffset: 16px;
      opacity: 1
    }

    100% {
      stroke-dashoffset: 31px;
      opacity: 1
    }
  }

  @keyframes success-circle-outline {
    0% {
      stroke-dashoffset: 72px;
      opacity: 1
    }

    100% {
      stroke-dashoffset: 0px;
      opacity: 1
    }
  }

  @keyframes success-circle-fill {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }


 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
   .complete-wrap .success-tick {
     stroke-dasharray: 0;
     stroke-dashoffset: 0;
     animation: none;
     opacity: 1;
   }

   .complete-wrap .success-circle-outline {
     stroke-dasharray: 0;
     stroke-dashoffset: 0;
     animation: none;
     opacity: 1;
   }

   .complete-wrap .success-circle-fill {
     animation: none;
     opacity: 1;
   }
}

.complete-wrap .title-box {display: flex; flex-direction: column !important; align-items: center;}
.complete-wrap .stepper-wrapper {display: flex; justify-content: space-between; margin-bottom: 4%;}
.complete-wrap .stepper-item { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1;}

.complete-wrap .stepper-item:before { position: absolute; content: ""; border-bottom: 2px solid #ccc; width: 100%; top: 20px; left: -50%; z-index: 2;}
.complete-wrap .stepper-item:after { position: absolute; content: ""; border-bottom: 2px solid #ccc; width: 100%; top: 20px; left: 50%; z-index: 2;}
.complete-wrap .stepper-item .step-counter { position: relative; z-index: 5; display: flex;  justify-content: center; align-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #ccc; margin-bottom: 6px;}
.complete-wrap .stepper-item.active { font-weight: bold;}
.complete-wrap .stepper-item.completed .step-counter { background-color: #4867d5; color: white;}
.complete-wrap .stepper-item.completed::after { position: absolute; content: ""; border-bottom: 2px solid #4867d5; width: 100%; top: 20px; left: 50%; z-index: 3;}
.complete-wrap .stepper-item:first-child::before { content: none;}
.complete-wrap .stepper-item:last-child::after { content: none;}

/*===========================================================================
    신한은행
============================================================================*/
/*cfa*/
.site-nav-wrap {padding: 0;}
.site-nav-wrap .text-box {margin-bottom: 80px !important;}
.site-nav-wrap .text-box:last-child {margin-bottom: 0px !important;}
.site-nav-wrap .anchor-sec {padding: 60px 0; }
.site-nav-wrap .info1-sec,
.site-nav-wrap .info2-sec,
.site-nav-wrap .info3-sec{padding: 60px 0; }
.site-nav-wrap .anchor {}
.site-nav-wrap .anchor h2 {font-size: 3rem; margin-bottom: 10px; font-weight: 600;}
.site-nav-wrap .anchor h4 {font-weight: 400; margin: 0 0 10px 0;}
.site-nav-wrap .table-text {text-align: left;}


@media (max-width:1200px) {

}

@media (max-width:800px) {   
	.site-nav-wrap .anchor-sec {padding: 30px 0; }
}


/*benefit event*/
.benefit-wrap {padding: 0;}
.benefit-wrap .edit-sec {padding: 60px 0; }
.benefit-wrap .banner-sec {background: #c9cff2; }
.benefit-wrap .pc-img, 
.benefit-wrap .mobile-img {width: 100%;  margin-left: 0%;}


/*benefit event*/
.retaking-class-wrap {padding: 0;}
.retaking-class-wrap .edit-sec {padding: 60px 0; }
.retaking-class-wrap .banner-sec {background: #fff0f5; }
.retaking-class-wrap .pc-img, 
.retaking-class-wrap .mobile-img {width: 100%;  margin-left: 0%;}

@media (max-width:600px) {
	.info-group .text-box table th, table td {}
}


/*===========================================================================
    모바일 메인
============================================================================*/
.mobile-main-wrap {padding-top: 0;}
.mobile-main-wrap .container > h2 {font-size: 2.4rem; margin-bottom: 10px; font-weight: 600;}
.mobile-main-wrap .mobile-main-top {padding: 100px 0; margin-bottom: 40px; background: #fafafc;}
.mobile-main-wrap .mobile-main-menu {gap: 10px;}
.mobile-main-wrap .mobile-main-menu > div {flex: 1; padding: 24px; border-radius: 10px;}
.mobile-main-wrap .mobile-main-menu .left {gap: 20px;}
.mobile-main-wrap .mobile-main-menu .left .text-box {display: flex; flex-wrap: nowrap; flex-direction: row; align-items: center;}
.mobile-main-wrap .mobile-main-menu .left .text-box img {width: 40%;}
.mobile-main-wrap .mobile-main-menu .left .text-box h3 {font-size: 2rem; color: #fff; margin-left: 2%;}

.mobile-main-wrap .mobile-main-menu .right .text-box {display: flex; flex-wrap: nowrap; flex-direction: row; align-items: center;}
.mobile-main-wrap .mobile-main-menu .right .text-box img {width: 40%;}
.mobile-main-wrap .mobile-main-menu .right .text-box h3 {font-size: 2rem; color: #222; margin-left: 2%;}

.mobile-main-wrap .mobile-main-menu .right {border:1px solid #c8c8c8; background: #fff;}
.mobile-main-wrap .tabs {border-bottom: 0;}
.mobile-main-wrap .tabs .tab-btn {max-width: 200px; font-size: 1.6rem;}
.mobile-main-wrap .tab-content {padding: 0;}
.mobile-main-wrap table thead th {border-top: 0;}
.mobile-main-wrap table tbody tr:nth-child(2n - 1) td {background: #f8f8f8;}


@media (max-width:1200px) {
    .mobile-main-wrap .mobile-main-top {padding: 100px 0; margin-bottom: 20px;}
    .mobile-main-wrap .mobile-main-top .col02 {display: flex; flex-wrap: nowrap!important;}
    .mobile-main-wrap .mobile-main-menu .left .text-box {display: flex; flex-wrap: nowrap; flex-direction: column; align-items: center;}
    .mobile-main-wrap .mobile-main-menu .left .text-box img {width: 50%;}
    .mobile-main-wrap .mobile-main-menu .left .text-box h3 {font-size: 2rem; color: #fff; margin-top: 2%;}

    .mobile-main-wrap .mobile-main-menu .right .text-box {display: flex; flex-wrap: nowrap; flex-direction: column; align-items: center;}
    .mobile-main-wrap .mobile-main-menu .right .text-box img {width: 50%;}
    .mobile-main-wrap .mobile-main-menu .right .text-box h3 {font-size: 2rem; color: #222; margin-top: 2%;}
	
    .mobile-main-wrap .mobile-main-menu > div {width: 100%; height: auto; padding: 20px; flex: initial;} 
    .mobile-main-wrap .mobile-list li .list-head {background: #474747;}
    .mobile-main-wrap .mobile-list li .list-head p {color: #fff;}
    .mobile-main-wrap .mobile-list li .list-body .test-box .bg-main {padding: 5px 12px; line-height: 1; font-size: 1.4rem; color: #fff; border-radius: 4px;}
    .mobile-main-wrap .mobile-list li .list-body .test-box .bg-list {padding: 5px 12px; line-height: 1; font-size: 1.4rem; color: #fff; border-radius: 4px;}
    .mobile-main-wrap .mobile-list.end li .list-head {background: #c6c6c6;}
    .mobile-main-wrap .mobile-list.end li .list-body .progress-bar .progress {background: #eeeeee;}
    .mobile-main-wrap .mobile-list.end li .list-body .top-box strong {color: #444;}
	.mobile-main-wrap .notice-sec .text-title {margin-bottom: 0 !important;}
}

@media (max-width:800px) {
    .mobile-main-wrap .mobile-main-top {padding: 100px 0; margin-bottom: 20px;}
    .mobile-main-wrap .mobile-main-top .col02 {display: flex; flex-wrap: nowrap!important;}
    .mobile-main-wrap .mobile-main-menu .left .text-box {display: flex; flex-wrap: nowrap; flex-direction: column; align-items: center;}
    .mobile-main-wrap .mobile-main-menu .left .text-box img {width: 50%;}
    .mobile-main-wrap .mobile-main-menu .left .text-box h3 {font-size: 2rem; color: #fff; margin-top: 2%;}

    .mobile-main-wrap .mobile-main-menu .right .text-box {display: flex; flex-wrap: nowrap; flex-direction: column; align-items: center;}
    .mobile-main-wrap .mobile-main-menu .right .text-box img {width: 50%;}
    .mobile-main-wrap .mobile-main-menu .right .text-box h3 {font-size: 2rem; color: #222; margin-top: 2%;}
	
    .mobile-main-wrap .mobile-main-menu > div {width: 100%; height: auto; padding: 20px; flex: initial;} 
    .mobile-main-wrap .mobile-list li .list-head {background: #474747;}
    .mobile-main-wrap .mobile-list li .list-head p {color: #fff;}
    .mobile-main-wrap .mobile-list li .list-body .test-box .bg-main {padding: 5px 12px; line-height: 1; font-size: 1.4rem; color: #fff; border-radius: 4px;}
    .mobile-main-wrap .mobile-list li .list-body .test-box .bg-list {padding: 5px 12px; line-height: 1; font-size: 1.4rem; color: #fff; border-radius: 4px;}
    .mobile-main-wrap .mobile-list.end li .list-head {background: #c6c6c6;}
    .mobile-main-wrap .mobile-list.end li .list-body .progress-bar .progress {background: #eeeeee;}
    .mobile-main-wrap .mobile-list.end li .list-body .top-box strong {color: #444;}
    .mobile-main-wrap .mobile-list.expected li .list-head {background: #c6c6c6;}
    .mobile-main-wrap .mobile-list.expected li .list-body .progress-bar .progress {background: #eeeeee;}
    .mobile-main-wrap .mobile-list.expected li .list-body .top-box strong {color: #444;}
	.mobile-main-wrap .notice-sec .text-title {margin-bottom: 0 !important;}
	.mobile-main-wrap .col-group {display: flex; align-items: center; justify-content: center;}
}
/*===========================================================================
    모바일 공지사항
============================================================================*/
.list-group2 {border-top: 1px solid #bbb; border-bottom: 1px solid #bbbbbb;}
.list-group2 li {padding: 20px 0;}
.list-group2 li:not(:last-child) {border-bottom: 1px solid #bbb;}
.list-group2 li .text-box {margin-bottom: 0;}
.list-group2 li .text-box .apply-label {display: inline-block; margin-bottom: 10px; font-size: 1.4rem; padding: 0 8px; border-radius: 5px;}
.list-group2 li .text-box a {font-size: 1.8rem; margin-bottom: 10px;}
.list-group2 li .text-box .desc {gap: 20px;}
.list-group2 li .text-box .desc label {padding: 4px 8px; margin-right: 10px; border-radius: 5px;}
.list-group2 li .text-box .desc p {}
.list-group2 li .button-group {flex-direction: column; gap: 10px; margin-left: auto;}
.list-group2 li .button-group button {width: 160px;}

@media (max-width:800px) {
	.list-group2 li {flex-wrap:wrap; gap: 20px;}
    .list-group2 li > div {width: 100%;}
    .list-group2 li .text-box .desc {flex-direction: column; gap: 4px; align-items: flex-start;}
    .list-group2 li .button-group {flex-direction: row; justify-content: flex-start;}
    .list-group2 li .button-group button {flex: 1;}
}

/*===========================================================================
    훈련생인증체계 고도화 페이지
============================================================================*/
.input-group { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid #c8c8c8;}

.input-div { width: 50%; border: 1px solid #c8c8c8;border-radius: 10px; overflow: hidden; margin: 0 auto;}
.input-div input { width: 100%; border: 0; padding: 15px 20px;}
.input-div input:first-child { border-bottom: 1px solid #c8c8c8; border-radius: 0;}

.certification-btn {width: 100%; font-size: 1.8rem; color: #fff; line-height: 30px; border-radius: 0 !important;}

.lift-restriction { padding-bottom: 40px;}
.lift-restriction-btn {width: 15%; font-size: 1.8rem; color: #fff; line-height: 30px; display: block; margin: 0 auto;}

.motp-modal .modal {width:50%}
.motp-modal .modal h2 {text-align: center; font-size: 3rem; margin-top: 30px;}
.motp-modal .modal button {justify-content: center; gap: 6px;}
.motp-modal .modal .input-div { width: fit-content; border: 1px solid #c8c8c8;border-radius: 10px; overflow: hidden; margin: 30px auto;}

.motp-modal .col-group {display: flex;}
.motp-modal .auth-menu {gap: 20px; margin: 4%;}
.motp-modal .auth-menu > div {flex: 1; padding: 24px; border-radius: 10px; border:1px solid #c8c8c8;}
.motp-modal .auth-menu .left {position: relative;}
.motp-modal .auth-menu .left .img-box {width: 100px; height: 100px; overflow: hidden; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.motp-modal .auth-menu .left .img-box img {width: 50%;}
.motp-modal .auth-menu .left .text-box {}
.motp-modal .auth-menu .left .text-box h3 {font-size: 2rem; color: #222;}
.motp-modal .auth-menu .left .text-box p {line-height: 1.4; margin-top: 10px; color: #222; font-weight: 300;}
.motp-modal .auth-menu .right {position: relative;}
.motp-modal .auth-menu .right .text-box h3 {font-size: 2rem; color: #222;}
.motp-modal .auth-menu .right a {flex: 1;}
.motp-modal .auth-menu .right a:first-child {position: relative;}
.motp-modal .auth-menu .right a:first-child::after {content: ''; position: absolute; top: 50%; right: 0; width: 1px; height: 70px; background: #e3e3e3; transform: translateY(-50%);}
.motp-modal .auth-menu .right a p {font-size: 2rem; text-align: center;}
.motp-modal .auth-menu .right a p strong {font-size: 3rem; line-height: 1; font-weight: bold;}
.motp-modal .button-group {bottom: 0; margin-top: 10%;}



@media (max-width:800px) {
	.motp-modal .modal {width:70%}
	.motp-modal .modal h2 {text-align: center; font-size: 2rem; margin-top: 30px;}
}

/*===========================================================================
    한림대
============================================================================*/

.site-nav-wrap {padding: 0;}
.site-nav-wrap .text-box {margin-bottom: 80px !important;}
.site-nav-wrap .text-box:last-child {margin-bottom: 0px !important;}
.site-nav-wrap .anchor-sec {padding: 60px 0; }
.site-nav-wrap .info1-sec,
.site-nav-wrap .info2-sec,
.site-nav-wrap .info3-sec{padding: 60px 0; }
.site-nav-wrap .anchor {}
.site-nav-wrap .anchor h2 {font-size: 3rem; margin-bottom: 10px; font-weight: 600;}
.site-nav-wrap .anchor h4 {font-weight: 400; margin: 0 0 10px 0;}
.site-nav-wrap .table-text {text-align: left;}

.site-nav-wrap .main-group {margin-bottom: 40px;}
.site-nav-wrap .main-group:last-child {margin-bottom: 0;}
.site-nav-wrap .main-group .keyword {padding: 10px 20px; border-radius: 10px 10px 0 0; background: #f1f4ff; border: 1px solid #dbdbdb;}
.site-nav-wrap .main-group .keyword-detail {padding: 10px 20px; margin-top: -1px; border-radius: 0 0 10px 10px; border: 1px solid #dbdbdb;}


.members-wrap {}
.members-wrap .member-group {margin-bottom: 40px; display: flex; justify-content: space-between;}
.members-wrap .member-group .accountant-box {display: inline-flex;}
.members-wrap .member-group .accountant-box .img-box {position: relative; border: 1px solid #c8c8c8; border-radius: 10px 0 0 10px; overflow: hidden;}
.members-wrap .member-group .accountant-box .img-box img {display: block; margin: 0 auto;}
.members-wrap .member-group .accountant-box .img-box .name {position: absolute; bottom: 0; left: 0; width: 100%; height: 46px; background: #4867d5; font-size: 2rem; color: #fff; display: flex; align-items: center; justify-content: center;}
.members-wrap .member-group .accountant-box .member_detail {width: 360px; margin-left: -1px; border: 1px solid #c8c8c8; border-radius: 0 10px 10px 0; overflow: hidden;}
.members-wrap .member-group .accountant-box .member_detail ul {padding: 10px;}


@media (max-width:1200px) {	
	.members-wrap {}
	.members-wrap .member-group {display: flex; flex-direction: column; margin-bottom:0;}
	.members-wrap .member-group .accountant-box {display: flex; flex-direction: column; margin-bottom: 40px;}
	.members-wrap .member-group .accountant-box .img-box {border-radius: 10px 10px 0 0;}
	.members-wrap .member-group .accountant-box .member_detail {width: auto; margin-top: -1px; border: 1px solid #c8c8c8; border-radius: 0 0 10px 10px;}

}

@media (max-width:800px) {   
	.site-nav-wrap .anchor-sec {padding: 30px 0; }
	.members-wrap {}
	.members-wrap .member-group {display: flex; flex-direction: column; margin-bottom:0;}
	.members-wrap .member-group .accountant-box {display: flex; flex-direction: column; margin-bottom: 40px;}
	.members-wrap .member-group .accountant-box .img-box {border-radius: 10px 10px 0 0;}
	.members-wrap .member-group .accountant-box .member_detail {width: auto; margin-top: -1px; border: 1px solid #c8c8c8; border-radius: 0 0 10px 10px;}
}