@charset "utf-8";

/**************************************************
*
*   main.css
*
***************************************************/
#container.main-container {padding: 0 0 80px;}
.com-mb-inner {margin: 0 auto; width: 100%;}




/******************************************************

*  퀵메뉴

*******************************************************/
.quickmenu-wrap {padding: 0 20px; /* padding-right: 0; */ width: 100%; overflow-x: auto; margin-bottom: 24px;}
.quickmenu-wrap::-webkit-scrollbar {display: none;}
.quickmenu-list {min-width: 690px; display: flex; align-items: center; gap: 8px;}
.quickmenu-list > li {width: calc(100% / 6); }
.quickmenu-list > li  > a {display: block; width: 100%; text-align: center; background: #F5F5F5; font-size: var(--body-s-400); font-weight: 600; color: var(--career--secondary); padding: 8px 8px; border-radius: 5px;}
.quickmenu-list > li  > a.active {background: #5887dd; color: #fff; font-weight: 600;}
.quickmenu-list .q-sub-menu {position: absolute; left: 50%; transform: translateX(-50%); width: calc(100% - 40px); background: #fff; margin-top: 8px; padding: 8px; display: none; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.11);border: 1px solid #5887dd;border-radius: 5px;}
.quickmenu-list .q-sub-menu li a {display: block; padding: 8px 12px; font-size: var(--body-s-400); color: #555; font-weight: 500;border-bottom: 1px solid #eee;}
.quickmenu-list .q-sub-menu li:last-child a{border:none;}
.quickmenu-list .q-sub-menu li a:focus {text-decoration: underline; text-underline-offset: 3px;}
.quickmenu-list .q-sub-menu.active {display: block;}




/******************************************************

*  메인 비주얼 영역 - 통합검색 / 직업정보 및 직업인 인터뷰

*******************************************************/
.main-top-section {display: flex; flex-direction: column; align-items: center; justify-content: space-between;}

.main-top-section .top {width: 100%;padding: 0 20px;}
.main-top-section .title-box {background: rgba(225, 233, 249, 0.3); text-align: left; padding:30px; line-height: 1.2; background: url(/cloud/m/img/main/top_section_bg-b0a834b1c9667bd2568015535214d7c4.jpg) no-repeat right center; background-size: cover; min-height: 180px; border-radius: 15px; box-shadow: 0 1px 7px rgba(0, 0, 0, 0.15) ;}
.main-top-section .title-box .title {font-size: 30px; font-weight: 400; color: #222;}
.main-top-section .title-box .title span {font-weight: 600;}
.main-top-section .title-box .info {margin-bottom: 8px;}
.main-top-section .title-box img{width:160px;margin: 10px 0 0 0;}

/* 직업정보 / 직업인 인터뷰 */
.main-brd-section {width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;}
.main-brd-section.login .brd-box {width: 100%; min-width: auto; padding: 24px 20px 30px 20px;}
.main-brd-section.login .brd-box:first-of-type {background: #F3F8FC;}
.main-brd-section.login .brd-box:last-of-type {background: #fff;}
.main-brd-section .brd-box {width: 100%; min-width: auto; padding: 24px 20px 30px 20px;}
.main-brd-section .brd-box:last-of-type {background: #F3F8FC;}
.main-brd-section .brd-hd {display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;}
.main-brd-section .brd-hd .title {font-size: var(--title-m-700); font-weight: 600; color: #111;}
.main-brd-section .brd-hd .btn-more {display: flex; align-items: center; justify-content: center; width: 19px; height: 19px;}
.main-brd-section .brd-hd .btn-more::after {content: ''; display: block; width: 29px; height: 29px; border-radius: 50%; background: #6DA3DF url(/cloud/m/img/common/icon_btn_more_w-8c6f7e72ada08a4d501ad4e80bcdb54c.svg) no-repeat center; flex-shrink: 0;}
.main-brd-section .job-video-list {display: flex; padding-bottom:5px;}
.main-brd-section .job-video-list li {width: 50%; height:auto;}
.main-brd-section .job-video-list li a {display: block; position: relative; width: 100%; height:100%; background:#fff; border-radius: 25px; overflow: hidden; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);}
.main-brd-section .job-video-list li a img {width: 100%; aspect-ratio: 3 / 1.7; object-fit:cover;}
.main-brd-section .job-video-list li a .info {padding: 16px; width: 100%; background: #fff;}
.main-brd-section .job-video-list li a .info h3 {font-weight: 600; color: #444;overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height:1.2em; height:2.4em;}
.main-brd-section .job-video-list li a .info p {display:none; font-size: 14px; color: #666; white-space: nowrap;  overflow: hidden; text-overflow: ellipsis;}


.main-brd-section .job-interview-box {display: flex; flex-direction: column; gap: 24px;}
.main-brd-section .job-interview-box a {display: flex; align-items: center; justify-content: center; gap: 24px;}
.main-brd-section .job-interview-box a .img-box {width: 105px; /*height: 112px;*/ border-radius: 15px; overflow: hidden; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.12);}
.main-brd-section .job-interview-box a .img-box img {width: 100%;}
.main-brd-section .job-interview-box a .con-box {width: calc(100% - 121px);}
.main-brd-section .job-interview-box a .con-box .title {width: fit-content; font-size: var(--title-s-700); font-weight: 600; color: #111; margin-bottom: 8px;}
.main-brd-section .job-interview-box a .con-box .info {font-size: var(--body-m-700); font-weight: 500; color: #616161; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;}
.main-brd-section .job-interview-box a:hover .con-box .title {text-decoration: underline;}
.main-brd-section .job-interview-box a:hover .con-box .info {text-decoration: underline;}


@media screen and (max-width: 360px) {
    .main-top-section .title-box .title {font-size: 26px;}

    .main-top-section .bt .brd-box {width: 100%; min-width: auto;}

    .main-brd-section .job-video-list li {width: 100%;}

    .main-brd-section .job-interview-box a .con-box .title {font-size: var(--body-m-700);}
    .main-brd-section .job-interview-box a .con-box .info {font-size: var(--body-s-400);}


}




/**************************************************

    추천서비스 리스트

***************************************************/
.main-service-wrap {display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 30px 0 30px 20px;}
.main-service-wrap h3 {font-size: var(--title-m-700); font-weight: 700; color: #242424;}
.main-service-wrap h3.teacher span {color: #1B76BA; margin-right: 4px;}
.main-service-wrap .recommand-service-list-wrap {width: 100%; overflow-x: auto;}
.main-service-wrap .recommand-service-list-wrap::-webkit-scrollbar {display: none;}
.main-service-wrap .recommand-service-list {min-width: 435px; display: flex; align-items: flex-start; justify-content: flex-start;}
.main-service-wrap .recommand-service-list li {width: 130px;}
.main-service-wrap .recommand-service-list li a {display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 13px; transition: none; font-weight: 500; font-size: var(--body-s-400);}
.main-service-wrap .recommand-service-list li a p {text-align: center; line-height: 1.2; color: #666;}
.main-service-wrap .recommand-service-list li a:hover p {color: #444;}

.main-service-wrap .recommand-service-list li a {display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px; width: 100px;}
.main-service-wrap .recommand-service-list li a .img-box{display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 26px;}
.main-service-wrap .recommand-service-list li:first-child a .img-box {background: #69B3E8} 
.main-service-wrap .recommand-service-list li:nth-child(2) a .img-box {background: #90C5D4} 
.main-service-wrap .recommand-service-list li:nth-child(3) a .img-box {background: #A7CB74} 
.main-service-wrap .recommand-service-list li:nth-child(4) a .img-box {background: #9EB4CB} 
.main-service-wrap .recommand-service-list li:last-child a .img-box {background: #F19A60} 
.main-service-wrap .recommand-service-list li a:hover::before {filter: brightness(0.7);} 

.main-service-wrap .recommand-service-list li a .img-box img{filter: invert(10) brightness(10);}

@media screen and (max-width: 360px) {
    .main-service-wrap .recommand-service-list li {width: 28%;}
    .main-service-wrap .recommand-service-list li a {font-size: var(--body-s-400);}

}




/**************************************************

*  진로심리검사 / 직업 정보 / 학과 정보

***************************************************/
.main-md-section {background: #9EB4CB; padding: 40px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px;}
.main-md-section > div {box-shadow: 0 1px 10px rgba(0, 0, 0, 0.11);}

/* 진로심리검사 */
.jobtest-box {width: 100%; margin: 0 auto; height: 230px; background: #fff; border-radius: 25px; padding: 32px; background: #fff url(/cloud/m/img/main/main_job_test_bg-5f4b9b3f9b3ffe0ff1bbb4165883a078.png) no-repeat right center; display: flex; flex-direction: column; justify-content: space-between;}
.jobtest-box .con-box h3 {font-size:  var(--title-m-700); font-weight: 600; color: #222; margin-bottom: 8px;}
.jobtest-box .con-box p {font-size:  var(--body-m-400); width: 70%; color: #666; font-weight: 500;}
.jobtest-box .btn-more {width: fit-content; padding: 8px 16px; background: #6DA3DF; border-radius: 5px; display: flex; align-items: center; gap: 16px; font-size: var(--body-s-700); font-weight: 500; color: #fff;}
.jobtest-box .btn-more::after {content: ''; display: block; width: 8px; height: 12px; background: url(/cloud/m/img/main/icon_arrow_right_blue-df087edbfc6a06407cdc11c71c1453e0.svg) no-repeat center; filter: invert(10) grayscale(10) brightness(10);}

.sr-only {position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;}

/* 직업 정보 및 학과 정보 */
.main-info-box {width: 100%; margin: 0 auto; /*height: 230px;*/ background: #fff; padding: 32px; display: flex; flex-direction: column; justify-content: space-between;}
.main-info-box .con-hd {display: flex; align-items: center; justify-content: space-between;}
.main-info-box .con-hd .title {font-size: 20px; font-weight: 700;}

/* 메인 배너 슬라이드 */
.main-info-box .btn-more {display: flex; align-items: center; justify-content: center; width: 19px; height: 19px;}
.main-info-box .btn-more::after {content: ''; display: block; width: 29px; height: 29px; border-radius: 50%; background: #6DA3DF url(/cloud/m/img/common/icon_btn_more_w-8c6f7e72ada08a4d501ad4e80bcdb54c.svg) no-repeat center; flex-shrink: 0;}
.main-swiper-indicator {margin-left: auto; margin-right: 25px; display: flex; align-items: center; justify-content: space-between; gap: 16px;}
.main-swiper-indicator .com-carousel-pagination .swiper-pagination-bullet {width: 10px; height: 10px; background: #CFD0D2;}
.main-swiper-indicator .com-carousel-pagination .swiper-pagination-bullet-active {background: #6DA3DF; width: 30px; height: 10px;}
.main-banner-wrap {display: flex; align-items: center; justify-content: space-between; gap: 24px;}
.main-banner-wrap button {width: 15px; height: 18px; background: url(/cloud/m/img/main/navi_btn-e9625d2d33cabd39503a1c969db85f90.svg) no-repeat center; background-size: contain;}
.main-banner-wrap button.prev-btn {transform: rotate(180deg);}
.main-banner-wrap button.swiper-button-disabled {filter: brightness(3);}
.main-banner-slide {width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: space-between;}
.main-banner-slide .swiper-slide {display: flex; flex-direction: column; justify-content: space-between; gap: 24px;}
.main-banner-slide .swiper-slide a:focus {text-decoration: underline;}
.main-banner-slide .swiper-slide .title {margin-bottom: 4px; color: #3878BA;}
.main-info-box .title {font-size: var(--body-l-700); font-weight: 700;}
.main-info-box .con {line-height: 150%; font-size: var(--body-s-400); color: var(--career--gray-70); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.main-info-box .tail-item-list {display: flex; flex-wrap: wrap; align-items: center; gap: 16px;}
.main-info-box .tail-item-list > div {font-size: var(--body-s-700); font-weight: 600;  display: inline-flex; align-items: center; gap: 4px; color: var(--career--gray-90);}
.main-info-box .bt-box {display: flex; align-items: center; justify-content: space-between;}
.main-info-box .detail-btn-more {color: #666; font-size: var(--body-s-400); display: flex; align-items: center; justify-content: flex-end; gap: 8px;}

/* 직업 정보 */
.job-terms-list {display: flex; align-items: center; justify-content: flex-start; gap: 24px;}
.job-terms-list li {color: #3084FA; font-size: var(--body-s-400);}
.job-terms-list li span {font-size: 16px; color: #1d1d1d; margin-left: 8px; font-weight: 600;}

/* 학과 정보 */
.depart-badge {padding: 4px 8px; border: 1px solid #7bb2fe; background: #d6e7fb; border-radius: 4px; font-size: 14px; font-weight: 500; color: #1974D9; margin-left: 4px;}


@media screen and (max-width: 360px) {
    .jobtest-box {background-size: 120px;}
    .jobtest-box .con-box p {font-size:  var(--body-s-400); width: 80%;}

    .main-banner-wrap {gap: 16px;}

}




/**************************************************

*  이벤트 소식 / 공지사항

***************************************************/
.main-bt-section {width: 100%; margin: 0 auto; padding: 0 20px;}
.main-bt-section .com-mb-inner {display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 24px;}

.main-md-section .com-mb-inner {border-radius: 20px; padding: 0 30px; background: #fff;}
.main-md-section .com-mb-inner > div { padding: 32px 0;}
.main-md-section .com-mb-inner > div:nth-last-of-type(2) {border-top: 1px dashed #bfbfbf; border-bottom: 1px dashed #bfbfbf;}
.main-md-section .con-hd {margin-bottom: 24px;}

/* 이벤트 소식 */
.main-info-box.event-box {height: auto; padding: 32px 0;}
.main-info-box.event-box .con-hd {margin-bottom: 32px;}
.main-event-wrap{display: flex; gap: 10px;}
.main-event-wrap .main-event-banner{width: 50%; border-radius: 10px; overflow: hidden;}
.main-event-wrap .main-event-banner img{width: 100%; height: 100%;}
.main-event-slide-wrap, .main-evbanner-slide-wrap{position: relative; overflow: hidden; width: 50%; margin: 0;}
.main-event-slide, .main-evbanner-slide {width: 100%;}
.main-event-slide .swiper-slide, .main-evbanner-slide .swiper-slide { border-radius: 10px; overflow: hidden;}
.main-event-slide .swiper-slide img, .main-evbanner-slide .swiper-slide img {width: 100%; height: 100%;}
.main-event-wrap .main-swiper-indicator{margin-top: 20px; margin-right: 0;}
.main-event-wrap .main-swiper-indicator .com-carousel-pagination{justify-content: flex-end;}

/* 공지사항 */
.main-info-box.notice-box {height: auto; padding: 0; padding: 32px 0;}
.main-info-box.notice-box .con-hd {margin-bottom: 24px;}
.main-notice-brd {display: flex; flex-direction: column; gap: 16px;}
.main-notice-brd li {width: 100%;}
.main-notice-brd li a {display: flex; align-items: center; gap: 10px;}
.main-notice-brd li a p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 17px;}
.main-notice-brd li a .com-badge.sm {padding: 1px 8px;}
.main-notice-brd li a .com-badge.sm.notice.main {background: #EFF5FF; border: 1px solid #C3D3EC; color: #1D56BC;}
.main-notice-brd li a .com-badge.sm.notice {background: #F4F4F4; border: 1px solid #79808894; color: #798088;}


@media screen and (max-width: 360px) {
    .main-info-box {padding: 20px 16px;}

}



/**************************************************
    로그인 - 학생
***************************************************/
.main-top-section .title-box.student {background: url(/cloud/m/img/main/top_section_bg_student-33a7ac2b364a3239e6a7d1f805d3b9be.jpg) no-repeat; background-size: cover;}

.main-service-wrap h3.student span {color: #A560EB; margin-right: 8px;}
.main-service-wrap .recommand-service-list.student li:first-child a .img-box{background: #B6A0C4;} 
.main-service-wrap .recommand-service-list.student li:nth-child(2) a .img-box{background: #8393B5;} 
.main-service-wrap .recommand-service-list.student li:nth-child(3) a .img-box{background: #8ACACC;} 
.main-service-wrap .recommand-service-list.student li:nth-child(4) a .img-box{background: #E9A0B1;} 
.main-service-wrap .recommand-service-list.student li:last-child a .img-box{background: #6AB3E8;} 


.main-md-section.student {background: #EEE9F0; gap: 0;}
.main-md-section.student .com-mb-inner {border-radius: 20px; padding: 0 30px; background: #fff;}
.main-md-section.student .com-mb-inner > div { padding: 32px 0;}
.main-md-section.student .com-mb-inner > div:nth-last-of-type(2) {border-top: 1px dashed #BABABA; border-bottom: 1px dashed #BABABA;}
.main-md-section.student .main-info-box .main-banner-wrap {border-radius: 6px; background: #F3F8FE; border: 1px solid #539FF8; padding: 8px 14px;}
.main-md-section.student .main-info-box .main-banner-wrap a {display: block; text-align: center; color: #3275C7;}
.main-md-section.student .main-info-box .main-banner-wrap button {width: 7px; height: 12px; background: url(/cloud/m/img/main/navi_btn-e9625d2d33cabd39503a1c969db85f90.svg) no-repeat center; background-size: contain;}
.main-md-section.student .main-info-box .con-hd span b {color: #3071B7;}
.main-md-section.student .main-info-box.none .con-hd span b {color: #464B51;}
.main-md-section.student .main-info-box.depart-info.none .main-banner-wrap {justify-content: center; gap: 8px; border-radius: 6px; background: #FCFCFA; border: 1px solid #989896; padding: 12px 14px;}
.main-md-section.student .main-info-box.depart-info.none .main-banner-wrap p {font-weight: 600;}
.main-md-section.student .main-info-box.depart-info.none .main-banner-wrap .btn-more {width: 25px; height: 25px;}
.main-md-section.student .main-info-box.depart-info.none .main-banner-wrap .btn-more::after {content: ''; display: block; width: 100%; height: 100%; border-radius: 50%; background: #42454D url(/cloud/m/img/common/icon_btn_more_w-8c6f7e72ada08a4d501ad4e80bcdb54c.svg) no-repeat center; flex-shrink: 0;}
.main-md-section.student .main-info-box.depart-info.none .main-info-box .con-hd span {}
.main-md-section.student .main-info-box {height: auto; border-radius: 0;}



/* 나의 진로심리검사 */
.my-jobtest-box {display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; width: 100%;}
.my-jobtest-box .con-hd {width: 100%; display: flex; align-items: center; justify-content: space-between;}
.my-jobtest-box .title {font-size: var(--title-m-700); font-weight: 700;}
.my-jobtest-box .btn-more::after {content: ''; display: block; width: 29px; height: 29px; border-radius: 50%; background: #6DA3DF url(/cloud/m/img/common/icon_btn_more_w-8c6f7e72ada08a4d501ad4e80bcdb54c.svg) no-repeat center; flex-shrink: 0;}
.my-jobtest-box button {margin: 0 auto;}
.jobtest-status-list {width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;}
.jobtest-status-list li {display: flex; width: calc(100% / 3);}
.jobtest-status-list li a {font-size: 16px; display: block; width: 100%; height: 50px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; text-align: center; border-radius: 8px; font-weight: 600;}
.jobtest-status-list li a.complete {border: 1px solid #aaa; color: #555;}
.jobtest-status-list li a.progress {border: 1px solid #519EFA; color: #2369BD; background: #F3F7FE;}
.jobtest-status-list li a.unchecked {border: 1px solid #F936A9; color: #F936A9; background: #FFFBFD;}






/**************************************************
    로그인 - 교사
***************************************************/
.main-top-section .title-box.teacher {background: url(/cloud/m/img/main/top_section_bg_teacher-9d479affd9e780f2a1fb42a062f56fac.jpg) no-repeat; background-size: cover;}

.main-service-wrap h3.student span {color: #A560EB; margin-right: 8px;}
.main-service-wrap .recommand-service-list.teacher li:first-child a .img-box{background: #719AB6;} 
.main-service-wrap .recommand-service-list.teacher li:nth-child(2) a .img-box{background: #CCA38F;} 
.main-service-wrap .recommand-service-list.teacher li:nth-child(3) a .img-box{background: #8ACACC;} 
.main-service-wrap .recommand-service-list.teacher li:nth-child(4) a .img-box{background: #C2C188;} 
.main-service-wrap .recommand-service-list.teacher li:last-child a .img-box{background: #6AB3E8;} 
 

.main-md-section.teacher {background: #E2EEEE; gap: 0;}
.main-md-section.teacher .com-mb-inner > div:nth-last-of-type(2) {border-top: 1px dashed #BABABA; border-bottom: 1px dashed #BABABA;}
.main-md-section.teacher .main-info-box .main-banner-wrap {border-radius: 6px; background: #F2F8F8; border: 1px solid #C3D8E5; padding: 8px 14px;}
.main-md-section.teacher .main-info-box .main-banner-wrap a {display: block; text-align: center; color: #257D89;}
.main-md-section.teacher .main-info-box .main-banner-wrap button {width: 7px; height: 12px; background: url(/cloud/m/img/main/navi_btn-e9625d2d33cabd39503a1c969db85f90.svg) no-repeat center; background-size: contain;}
.main-md-section.teacher .main-info-box .con-hd span b {color: #3071B7;}
.main-md-section.teacher .main-info-box.none .con-hd span b {color: #464B51;}
.main-md-section.teacher .main-info-box.none .main-banner-wrap {justify-content: center; gap: 8px; border-radius: 6px; background: #FCFCFA; border: 1px solid #989896; padding: 12px 14px;}
.main-md-section.teacher .main-info-box.none .main-banner-wrap p {font-weight: 600;}
.main-md-section.teacher .main-info-box.none .main-banner-wrap .btn-more {width: 25px; height: 25px;}
.main-md-section.teacher .main-info-box.none .main-banner-wrap .btn-more::after {content: ''; display: block; width: 25px; height: 25px; border-radius: 50%; background: #42454D url(/cloud/m/img/common/icon_btn_more_w-8c6f7e72ada08a4d501ad4e80bcdb54c.svg) no-repeat center; flex-shrink: 0;}
.main-md-section.teacher .main-info-box.none .main-info-box .con-hd span {}
.main-md-section.teacher .main-info-box {height: auto; border-radius: 0;}
.main-md-section.teacher .con-hd {margin-bottom: 24px;}
.main-md-section.teacher .main-banner-slide .swiper-wrapper{align-items: center;}
 

/* 진로 메이트 */
.jobmate-box {display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 15px; width: 100%; border-radius: 20px 20px 0 0;}
.jobmate-box .title {font-size: var(--title-m-700); font-weight: 700;}
.jobmate-box .btn-more::after {content: ''; display: block; width: 29px; height: 29px; border-radius: 50%; background: #6DA3DF url(/cloud/m/img/common/icon_btn_more_w-8c6f7e72ada08a4d501ad4e80bcdb54c.svg) no-repeat center; flex-shrink: 0;}
.jobmate-status-list {width: 100%; display: flex; align-items: flex-start; justify-content: space-between; align-items: stretch; gap: 8px;}
.jobmate-status-list li {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; flex:1;}
.jobmate-status-list li a {line-height: 1.2; font-size: var(--body-l-700); display: flex; align-items: center; justify-content: space-between; width: 100%; height:100%; padding: 16px 20px;text-align: center; border-radius: 8px; font-weight: 600;}
.jobmate-status-list li a.mate {background: #F2F8F8;}
.jobmate-status-list li a.mate span {color: #257D89;}
.jobmate-status-list li a.accept {color: #fff; background: #257D89;}
/* .jobmate-status-list li a span {display: block; font-size: 36px;} */
.jobmate-box .hd {width: 100%; display: flex; align-items: center; justify-content: space-between;}
.jobmate-status-list li .accept-btn {background: #3C6B8C; color: #fff; padding: 8px 26px; border-radius: 8px; font-size: var(--link-s-400); transform: translateY(-25px); display: flex; align-items: center; justify-content: center; gap: 10px;}
.jobmate-status-list li .accept-btn::after {content: ''; display: block; width: 7px; height: 12px; background: url(/cloud/m/img/common/ic_cpt_arrow_right_white-563739ce54c11f126ae5c3faff17a7af.svg) no-repeat center;}

/* 진로교육 추천자료 */
.data-list {border-radius: 0; box-shadow: none; background: none; padding: 0;}
.data-list li {width: 100%;}
.data-list-slide ul li a {display: block; width: 100%;}
.data-list-slide ul li a .title {display: flex; align-items: center; gap: 8px;}
.data-list-slide ul li a .title p {font-size: 20px; color: #3878BA; font-weight: 600;}
.data-list-slide ul li a .ect-info {font-size: 16px; display: inline-flex; align-items: center; gap: 16px; color: #444;}
.data-list-slide ul li a .badge {margin-right: 16px; display: inline-block; flex-shrink: 0; border-radius: 5px; font-size: 13px; padding: 1px 4px; color: #fff; font-weight: 400;}
.data-list-slide ul li a .badge.common {color: #3C6B8C;}
.data-list-slide ul li a .badge.ect {color: #997665;}
.data-list-slide ul li a .badge.primary {color: #F74A14;}
.data-list-slide ul li a .badge.middle {color: #52A806;}

/* 진로교육 최신자료 */
.recent-data-list-slide ul li a {display: block; width: 100%;}
.recent-data-list-slide ul li a .title {display: flex; align-items: center; gap: 8px;}
.recent-data-list-slide ul li a .title p {font-size: 20px; color: #3878BA; font-weight: 600;}
.recent-data-list-slide ul li a .ect-info {font-size: 16px; display: inline-flex; align-items: center; gap: 16px; color: #444;}
.recent-data-list-slide ul li a .badge {margin-right: 16px; display: inline-block; flex-shrink: 0; border-radius: 5px; font-size: 13px; padding: 1px 4px; color: #fff; font-weight: 400;}
.recent-data-list-slide ul li a .badge.common {color: #3C6B8C;}
.recent-data-list-slide ul li a .badge.ect {color: #997665;}
.recent-data-list-slide ul li a .badge.primary {color: #F74A14;}
.recent-data-list-slide ul li a .badge.middle {color: #52A806;}



@media screen and (max-width: 360px) {
    .main-info-box .title {font-size: var(--body-m-700);}

    .main-md-section.student .com-mb-inner {padding: 0 20px;}
    
    .my-jobtest-box .title {font-size: var(--title-s-700);}

    .jobmate-status-list {flex-wrap: wrap;}
    .jobmate-status-list li {width: 100%;}
    .jobtest-status-list li a {font-size: var(--body-s-700); flex-direction: column; padding: 8px; height: auto;}

    .main-md-section.student .main-info-box.depart-info.none .main-banner-wrap p {font-size: var(--body-s-700);}
    .main-md-section.student .main-info-box.depart-info.none .main-banner-wrap .btn-more {width: 20px; height: 20px;}
    .main-md-section.student .main-info-box.depart-info.none .main-banner-wrap .btn-more::after {background-size: 12px;}

}






@media screen and (max-width: 1560px) {
    
}
@media screen and (max-width: 1400px) {
    
}
@media screen and (max-width: 1240px) {
    
}
@media screen and (max-width: 1080px) {
    
}
@media screen and (max-width: 768px) {
    
}
@media screen and (max-width: 480px) {
    
}




/**********************************************************
*  개인화서비스 추가 및 수정 적응향  20251103 RHD
***********************************************************/
.sr-only {position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;}

.main-md-section {position: relative; width: 100%; background: #5987D1; display: flex; flex-direction: column; align-items: flex-start; gap: 20px;}
.main-md-section::before {position: absolute; left: 0; width:30%; height: 100%; background: url(/cloud/w/img/main/img_md_patten_left-8f5c7fcfe444d5e190fcec50a6fdcbe0.png) left bottom no-repeat; background-size: 100%; content: '';}
.main-md-section::after {position: absolute; top:0; right: 0; width:20%; height: 100%; background: url(/cloud/w/img/main/img_md_patten_right-65b5684af541ae156379b359c7b3cd49.png) right top no-repeat; background-size: 100%; content: '';}
.main-md-section .main-info-box {position: relative; z-index: 1; flex-shrink: 0; width: 100%; height: auto; background: #E9F1FF; border-radius: 20px !important; padding:20px 15px; display: flex; flex-direction: column; justify-content: space-between !important;}
.main-md-section .main-info-box .con-hd {position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 15px;}
.main-md-section .main-info-box .con-hd .title {display:flex; align-items: center; gap:10px; line-height:1; font-size: var(--body-l-700); font-weight: 700;}
.main-md-section .main-info-box .con-hd .title img {width:24px;}
.main-md-section .main-info-box a:hover:not(.com-card) {box-shadow: inset -9999px -9999px rgba(0, 0, 0, 0.2);}
.main-md-section .main-info-box .con-box {background-color:#fff; padding: 15px; border-radius: 12px; }
.main-md-section .main-info-box .con-btn {width: 100%; margin-top: 10px;}
.main-md-section .main-info-box .con-btn a {width:100%; display:flex; justify-content:center; align-items:center; padding:15px 20px; line-height:1; font-size: var(--body-m-400); color:#fff; background-color:var(--career--primary); border-radius:60px; }
.main-md-section .main-info-box .con-btn a::after {display:inline-block; width:20px; height:20px; background: url(/cloud/w/img/main/icon_md_arr_right-bfd6361d7af5537f3b2158eda5106603.png) center center no-repeat; background-size:50%; content: '';}

@media screen and (max-width: 400px) {
    .main-md-section .main-info-box .con-hd {margin-bottom: 10px;}
    .main-md-section .main-info-box .con-hd .title {gap: 5px; line-height: 1; font-size: 17px;}
    .main-md-section .main-info-box .con-hd .title img {width: 20px;}
    .main-md-section .main-info-box .con-btn a {padding: 10px 15px; font-size: 15px;}
    .main-md-section .main-info-box .con-btn a::after {width: 16px; height: 16px;}
}

/* 추천, 관심 추가 */
.main-md-section .btns-add {position: absolute; z-index: 1; right: 0; display: flex; align-items: center; gap: 5px;}
.main-md-section .btns-add button {display: flex; align-items: center; gap: 3px; height: 27px; padding:0 10px; font-size: 13px; color: #000; background-color: #F0F4FC; border-radius: 24px;}
.main-md-section .btns-add button::before {display: inline-block; width: 15px; height: 15px; background-size:auto 100%; background-repeat: no-repeat; content: ''; }
.main-md-section .btns-add .recommendation::before {background-image: url(/cloud/w/img/common/icon_recommendation-b4cf181e4da45df090cdf57c55f326c8.svg); }
.main-md-section .btns-add .bookmark::before {background-image: url(/cloud/w/img/common/icon_bookmark-eb2d64aba59c6e794ff25c7f546b1b4e.svg); }
.main-md-section .btns-add button.active {color: #fff; background-color: var(--career--primary);}
.main-md-section .btns-add .active::before {filter: brightness(0) invert(1);}

@media screen and (max-width: 400px) {
    .main-md-section .btns-add button {height: 24px; line-height: 24px;}
}


/* 메인 배너 슬라이드 */
.main-md-section .com-carousel-control {display:flex; align-items:center;}
.main-md-section .com-carousel-control button {display:flex; width: 24px; height:24px; background-size:30% !important; border-radius: 50%; }
.main-md-section .com-carousel-control button.prev-btn {background: #222 url(/cloud/w/img/main/icon_md_arr_left-0b3632e24010fb42522a042b25352674.png) center center no-repeat; }
.main-md-section .com-carousel-control button.next-btn {background: #222 url(/cloud/w/img/main/icon_md_arr_right-bfd6361d7af5537f3b2158eda5106603.png) center center no-repeat; }
.main-md-section .com-carousel-control button.control-btn {background-size:70% !important; border-radius:0;}
.main-md-section .com-carousel-control button.stop {background: url(/cloud/w/img/main/icon_md_control_stop-73b2b7f1cd8816f6102206e1f68d49db.png) center center no-repeat; } 
.main-md-section .com-carousel-control button.play {background: url(/cloud/w/img/main/icon_md_control_play-86f38209871bd065c2dfbca3d2ddfdf3.png) center center no-repeat; } 

.main-banner-slide {width: 100%; overflow: hidden;}
.main-banner-slide .swiper-slide {position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;}
.main-banner-slide .swiper-slide a {display: block; background-color:#fff; border-radius: 12px; border:1px solid #fff; overflow: hidden;}

/* 비로그인 */
.main-info-box.login-info {display: flex; flex-direction: column; justify-content: space-between; background-color:#fff; text-align:center;}
.login-info .img-box {width:100%; display:flex; justify-content: center; border-bottom: 1px solid var(--career--primary);}
.login-info .img-box img {max-width:60%;}
.login-info .con-box p {font-size:16px; color:#222; }
.login-info .con-box p strong {color: var(--career--primary);}

/* 나의 진로심리검사 현황 */
.main-md-section .my-jobtest-box {position: relative; text-align:center; background-color:#fff !important;}
.main-md-section .my-jobtest-box .con-hd .title {justify-content: center; width:100%; padding:10px 0; line-height:24px; font-size: var(--body-l-700);; font-weight: 600; color: #000; background-color: #F0F4FC; border-radius:50px;}
.main-md-section .my-jobtest-box .con-box {position: relative; width: 100%; height:100%; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 0; }
.main-md-section .my-jobtest-box .con-box p {margin:10px 0 20px 0; line-height:1.3; width: 100%; font-size:18px; color: #222;}
.main-md-section .my-jobtest-box .con-box p strong {color: var(--career--primary);}
.main-md-section .my-jobtest-box .con-box .jobtest-list {position: relative; width: 100%; display: flex; flex-direction: column; gap:7px; }
.main-md-section .my-jobtest-box .con-box .jobtest-list a {position: relative; z-index: 2; width: 100%; height: 38px; padding:0 15px; border-radius: 8px; display: flex; align-items: center; gap: 5px; font-size: var(--body-s-700); font-weight: 600; color: #fff; background: var(--career--primary); }
.main-md-section .my-jobtest-box .con-box .jobtest-list a::after {position: absolute; right:10px; display:inline-block; width:20px; height:20px; background: url(../img/main/icon_md_arr_right.png) center center no-repeat; background-size:50%; content:''; }
.main-md-section .my-jobtest-box .con-box .jobtest-list a > img {width:20px;}

@media screen and (max-width: 400px) {
    .main-md-section .my-jobtest-box .con-hd .title {font-size: 17px;}
    .main-md-section .my-jobtest-box .con-box p {font-size: 16px;}
    .main-md-section .my-jobtest-box .con-box .jobtest-list a {font-size: 14px; letter-spacing: -1px;}
}


/* 나의 진로상담 현황 */
.main-md-section .my-counsel-box .con-box dl {display: flex; flex-direction: column;}
.main-md-section .my-counsel-box .con-box dl span { display:inline-block; vertical-align:top; height:25px; margin-right: 5px; padding: 0 10px; line-height: 25px; font-size: var(--body-s-400); color: #fff; background-color: var(--career--primary); border-radius: 30px;}
.main-md-section .my-counsel-box .con-box dl dt {line-height: 120%; font-size: var(--body-m-400); color: var(--career--primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.main-md-section .my-counsel-box .con-box dl dd.date {display: flex; gap:5px; margin-top: 10px; line-height: 1; font-size: var(--body-m-400); color: #666; font-weight: 400;}
.main-md-section .my-counsel-box .con-box dl dd.date img {width: 17px; }
.main-md-section .my-counsel-box .con-box dl dd.con {-webkit-line-clamp: 3; line-clamp: 3; height: auto;  line-height: 150%; font-size: var(--body-m-700); color: var(--career--gray-70); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; margin-top: 10px; padding-top: 10px; border-top: 1px solid #E7E5FF; }

@media screen and (max-width: 400px) {
    .main-md-section .my-counsel-box .con-box dl dt {line-height: 20px; font-size: 16px;}
    .main-md-section .my-counsel-box .con-box dl span {height: 20px; line-height: 20px; font-size: 13px;}
    .main-md-section .my-counsel-box .con-box dl dd.date {font-size: 14px;}
    .main-md-section .my-counsel-box .con-box dl dd.date img {width: 13px;}
    .main-md-section .my-counsel-box .con-box dl dd.con {font-size: 14px;}
}

/* 직업정보, 학과정보 */
.main-md-section .swiper-slide > .btns-add {top: 16px; right: 15px;}
.main-md-section .com-card {display: block; background-color:#fff; border-radius: 12px; border:1px solid #fff; overflow: hidden; } 
.main-md-section .com-card .con-box {display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap:0; margin:0; } 
.main-md-section .com-card .con-box .con-hd {display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; justify-content:space-between; } 
.main-md-section .com-card .con-box .title {position: relative; margin:0 0 10px 0; font-size: 18px; color: var(--career--gray-90); font-weight: 700; width: 100%; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
.main-md-section .com-card .con-box .con {margin-top:5px; -webkit-line-clamp: 2; line-clamp: 2; height: 43px;  line-height: 150%; font-size: var(--body-s-700); color: var(--career--gray-70); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; } 
.main-md-section .com-card .con-box .img-box {display: flex; width: 70%; height: 100%; border:1px solid #d9d9d9; border-radius:8px; overflow: hidden;} 
.main-md-section .com-card .con-box .img-box img {width: 100%; object-fit: cover; aspect-ratio: 3 / 2.4; }
.main-md-section .com-card .con-hd .terms-list {width: 27%; display: flex; flex-direction: column; padding-top: 0; border: none;} 
.main-md-section .com-card .con-hd .terms-list li {width: 100%; text-align: left; padding: 6px 0; text-align: left; border: none; border-top: 1px solid #C0C1C3; }
.main-md-section .com-card .con-hd .terms-list li:first-child {padding-top:0; border-top: none; }
.main-md-section .com-card .con-hd .terms-list li:last-child {padding-bottom:0; }
.main-md-section .com-card .con-hd .terms-list li p {font-size: 14px; color:var(--career--primary); }
.main-md-section .com-card .con-hd .terms-list li span {padding: 0; margin: 0; border-radius: 0; border: none; background-color: transparent; font-size: 16px; letter-spacing: -1px; padding-top: 0; font-weight: 700; } 

@media screen and (max-width: 400px) {
    .main-md-section .com-card .con-box .title {font-size: 16px;}
    .main-md-section .com-card .con-box .img-box {width: 64%;}
    .main-md-section .com-card .con-hd {margin-bottom: 5px;}
    .main-md-section .com-card .con-hd .terms-list {width: 32%;}
    .main-md-section .com-card .con-hd .terms-list li {flex-direction: column; align-items: flex-start; line-height: 1.2;}
    .main-md-section .com-card .con-hd .terms-list li span {width: 100%; font-size: 15px;}
    .main-md-section .com-card .con-box .con {height: auto; font-size: 14px;}
}
@media screen and (max-width: 340px) {
    .main-md-section .com-card .con-hd .terms-list li span {font-size: 14px;}

}

/* 진로교육 추천, 최신 자료 */
.main-md-section .com-card2 {display: block; background-color:#fff; border-radius: 12px; border:1px solid #fff; overflow: hidden; } 
.main-md-section .com-card2 .con-box {display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap:10px; margin:0; padding:15px;}
.main-md-section .com-card2 .con-box .con-tp {position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content:space-between; width: 100%; } 
.main-md-section .com-card2 .con-box .con-tp .grade {display: flex; gap: 5px;}
.main-md-section .com-card2 .con-box .con-tp .grade span {padding: 4px 8px; font-size:13px; color: #fff; border-radius: 4px;}
.main-md-section .com-card2 .con-box .con-tp .grade span.no1 {background-color: #FF9123;}
.main-md-section .com-card2 .con-box .con-tp .grade span.no2 {background-color: #246BEB;}
.main-md-section .com-card2 .con-box .con-tp .grade span.no3 {background-color: #464D8C;}
.main-md-section .com-card2 .con-box .con-tp .btns-add button:hover, .main-md-section .com-card2 .con-box .con-tp .btns-add button.active {color: #fff; background-color: #00A4C0;}
.main-md-section .com-card2 .con-box .con-md {display: flex; align-items: flex-start; gap: 5px; flex-wrap: wrap; justify-content:space-between; width: 100%; } 
.main-md-section .com-card2 .con-box .img-box {display: flex; width: 100%; height: 100%; border:1px solid #d9d9d9; border-radius:16px; overflow: hidden;} 
.main-md-section .com-card2 .con-box .img-box img {width: 100%; object-fit: cover; aspect-ratio: 3 / 1.7; }
.main-md-section .com-card2 .con-box .title {margin: 10px 0 0 0; line-height: 1; font-size: var(--body-m-700); color: var(--career--gray-90); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } 
.main-md-section .com-card2 .con-box .type {line-height: 1; font-size: var(--body-s-400); color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;}
.main-md-section .main-info-box.recommendation-info .btns-add {top:14px; right: 15px;}

@media screen and (max-width: 400px) {
    .main-md-section .com-card2 .con-box .title {font-size: 16px;}
    .main-md-section .com-card2 .con-box .con-tp .grade {gap: 3px;}
    .main-md-section .com-card2 .con-box .con-tp .grade span {padding: 3px 5px; font-size: 12px;}
    .main-md-section .com-card2 .con-box .type {font-size: 13px;}
    .main-md-section .main-info-box.recommendation-info .btns-add {top:15.5px; }

}

/* 교사서비스 */
.main-md-section.teacher {gap:20px;}
.main-md-section .main-info-box.teacher-service {display: flex; flex-direction: column; justify-content: space-between; background-color:#DFFAFF; text-align:center;}
.main-md-section .teacher-service a {display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 20px; padding: 5px 10px; font-size: var(--body-s-700); color: #00A4C0; font-weight: 600; background-color: #fff; border-radius: 40px;}
.main-md-section .teacher-service a img {height: 12px;}
.main-md-section .teacher-service a.link-go {position: absolute; top: 0; right: 0; margin: 0; padding:2px 20px; color: #fff; background-color: #00A4C0;}
.main-md-section .teacher-service .con-box {display: flex; gap: 20px; flex-direction: row; justify-content: space-between; height:230px; padding: 20px ; }
.main-md-section .teacher-service .con-box .jopmate-box {display: flex; justify-content: space-between; flex-direction: column; width: 100%; padding:30px 20px; background-color: #00A4C0; border-radius: 20px; }
.main-md-section .teacher-service .con-box .jopmate-box:first-of-type {background:#00A4C0 url(/cloud/w/img/main/img_jobmate-7ac17cfbbb851fc8a163f50501a8900a.png) center bottom no-repeat; background-size:auto 28%;}
.main-md-section .teacher-service .con-box .jopmate-box .con {display: flex; gap: 10px; flex-direction: column; overflow: visible;}
.main-md-section .teacher-service .con-box .jopmate-box .title {line-height: 1.2; font-size: var(--body-s-700); color:#fff; font-weight: 600; }
.main-md-section .teacher-service .con-box .jopmate-box .number {font-size: 40px; color:#fff; font-weight: 700; }

@media screen and (max-width: 400px) {
    .main-md-section .teacher-service .con-box {gap: 10px;}
    .main-md-section .teacher-service a {font-size: 14px; letter-spacing: -1px;}
    .main-md-section .teacher-service a.link-go {top: -1.5px; padding: 1px 12px;}
}

/* 학생 상단 */
.main-md-section-tp {position: relative; z-index: 1; width: 100%; display: flex; justify-content: space-between; align-items: center; box-shadow: none !important;}
.main-md-section-tp .title {position: relative; padding-left: 44px; line-height: 28px; font-size: 22px; color: #fff; text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
.main-md-section-tp .title > img {position: absolute; top: -4px; left: 0; display: inline-block; width:36px; margin-right: 10px;}
.main-md-section-tp .title span {margin-right: 5px;}
.main-md-section-tp .title strong {color: #FFF704;}
.main-md-section-tp .title a {position: relative; top: 2px; display:inline-block; width: 150px; padding: 6px 12px; vertical-align: top; text-align: center; line-height: 1; font-size: 14px; color: #fff; font-weight: 400; background-color: rgba(0, 0, 0, 0.5); border-radius: 40px;}
.main-md-section-tp .title a img {display: inline-block; height: 12px; margin-left: 5px;}

.main-md-section-tp .btn-pick {min-width: 200px; display: flex; flex-grow: 0; justify-content: center; align-items: center; padding: 6.5px 10px; font-size: 18px; color: #594FC6; letter-spacing: -1px; font-weight: 600; background-color: #fff; border-radius: 60px;}
.main-md-section-tp .btn-pick:hover {background-color: #E7E5FF;}
.main-md-section-tp .btn-pick > img {width: 20px; margin-right: 5px;}
.main-md-section-tp .btn-pick span {flex-grow: 0; width: 20px; height: 20px; margin-left: 5px; background:#594FC6 url(/cloud/w/img/main/icon_md_arr_right-bfd6361d7af5537f3b2158eda5106603.png) center center no-repeat; background-size:30%; content:'';  border-radius: 50%;}

@media screen and (max-width: 980px) {
    .main-md-section-tp .btn-pick {font-size: 16px;}
}
@media screen and (max-width: 640px) {
    .main-md-section-tp {flex-direction: column;}
    .main-md-section-tp .title {margin-bottom: 10px; padding-left: 36px; font-size: 20px;}
    .main-md-section-tp .title > img {top:0; width: 30px; margin-right: 5px;}
    .main-md-section-tp .btn-pick {width: 100%; min-width: auto;}
}



/* 데이터 없을때 */
.main-md-section .no-data {display: flex; gap: 0; flex-direction: column; justify-content: center; align-items: center;  }
.main-md-section .no-data .box-wrap {display: flex; gap: 10px; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 20px; background-color: #fff; border-radius: 12px; border: 1px solid #fff; overflow: hidden;}
.main-md-section .no-data .box-wrap .img-attention {display:inline-block; width: 50px; height: 50px; background: url(/cloud/w/img/main/img_attention-032325ded384a3d9aa8ac0997406b728.png) center center no-repeat; background-size: 100% !important; }
.main-md-section .no-data .box-wrap p {width: 100%; font-size: 17px; text-align: center;}
.main-md-section .no-data .box-wrap p strong {color: var(--career--primary);}

@media screen and (max-width: 400px) {
    .main-md-section .no-data .box-wrap p {font-size: 15px;}
    .main-md-section .no-data .box-wrap p br {display: none;}
}

/* 모달 나의 관심직업 Pick */
.pick-modal { padding: 10px;}
.pick-modal > .inner {max-height: 100%; padding: 20px;}
.pick-modal .blue {color: var(--career--primary);}
.pick-modal .btn-refresh {display: flex; gap: 5px; justify-content: center; align-items: center; min-width: 30px; height: 30px; font-size: 13px; color: #fff; background-color: #F05A21; border-radius: 50%;}
.pick-modal .btn-refresh img {width: 16px;}
.pick-modal button:not(.btn-del , .btn-cls):hover {box-shadow: inset -9999px -9999px rgba(0, 0, 0, 0.3);}

.pick-modal .modal-hd-box {display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 10px; padding: 0 20px; background-color: var(--career--primary); border-radius: 60px; }
.pick-modal .modal-hd-box h2 {display: flex; gap: 5px; align-items: center; padding: 5px 0; font-size: 22px; color: #fff; }
.pick-modal .modal-hd-box h2 img {width: 28px; margin-right: 5px;}
.pick-modal .modal-hd-box h2 .yellow {color: #FFF704;}
.pick-modal .modal-hd-box .btn-cls {background-color: transparent;}
.pick-modal .modal-hd-box .btn-cls img {filter: invert(10) brightness(10);}
.pick-modal .pick-txt {position: relative; text-align: center; line-height: 1.2; font-size: 15px; color: #333;}
.pick-modal .pick-txt br {display: none;}
.pick-modal .pick-txt h3 {font-size: 22px; color: #000;}
.pick-modal .pick-txt h3 img {display: inline-block; vertical-align: top; width: 24px; margin:5px 0 0 2px;}
.pick-modal .pick-txt h3 strong {font-size: 28px;}
.pick-modal .pick-category {display: flex; flex-wrap: wrap; justify-content: center; gap: 5px;  position: relative; margin: 15px 0;}
.pick-modal .pick-category button {padding: 3px 10px; font-size: 13px; color: #fff; letter-spacing: -1px; background-color: #666; border-radius: 34px;}
.pick-modal .pick-category button.active {background-color: var(--career--primary);}
.pick-modal .pick-box {padding: 10px; background-color: #E8F4FF; border-radius: 10px;}
.pick-modal .pick-box .pick-box-tp {padding: 10px; background-color: #fff; border-radius: 10px;}
.pick-modal .pick-box .pick-box-tp .pick-num {display: flex; gap: 10px; align-items: center; font-size: 18px; color: var(--career--primary); font-weight: 600;}
.pick-modal .pick-box .pick-box-tp .pick-num span {padding: 2px 20px; font-size: 16px; color: #fff; background-color: var(--career--primary); border-radius: 30px;}
.pick-modal .pick-box .pick-box-tp .pick-sel-list {display: flex; gap: 10px; align-items: flex-start; margin-top: 5px;}
.pick-modal .pick-box .pick-box-tp .pick-sel-list ul {display: flex; flex-wrap: wrap; gap:5px; }
.pick-modal .pick-box .pick-box-tp .pick-sel-list ul li {flex-shrink: 0; height: 30px; padding:0 10px; line-height: 30px; font-size: 13px; color: #000; background-color: #E8F4FF; border-radius: 30px;}
.pick-modal .pick-box .pick-box-tp .pick-sel-list ul li .btn-del {margin-left: 5px; background-color: transparent;}
.pick-modal .pick-box .bubble-chart {position: relative; margin-top: 10px;}
.pick-modal .pick-box .bubble-chart .chart-tp {display: flex; justify-content: flex-end;}
.pick-modal .pick-box .bubble-chart .chart-tp .btn-refresh { padding: 0 15px; border-radius: 30px;}
.pick-modal .pick-box .bubble-chart .chart-w {position: relative; width: 100%; min-height: 300px;}
.pick-modal .pick-search {position: relative; margin-top: 15px; padding:10px 10px 10px 100px; background:#F0F4FC url(/cloud/w/img/main/img_modal_search-e0fcc9936dec47cad4d664cc691faa79.png) left bottom no-repeat; background-size: 80px; border-radius: 10px; }
.pick-modal .pick-search p {margin-bottom: 10px; font-size: 15px; color: #000;}
.pick-modal .pick-search .pick-search-w {position: relative; padding-right: 100px;}
.pick-modal .pick-search .pick-search-w .search-input {position: relative; width: calc(100% - 10px);}
.pick-modal .pick-search .pick-search-w .search-input input {position: relative; z-index: 1; width: 100%; height: 40px; padding: 0 10px; line-height: 40px; background-color: #fff; border: 1px solid #c9c9c9; border-radius: 44px;}
.pick-modal .pick-search .pick-search-w .search-input .btn-auto-job {position: absolute; z-index: 1; top: 0; right: 0; width: 40px; height: 40px; background: url(/cloud/w/img/common/icon_angle_down-0213b2cf8f925283505fb8cacfded4fa.svg) center center no-repeat; background-size: 30%; border-radius: 40px; transition: all 0.2s; box-shadow: none; }
.pick-modal .pick-search .pick-search-w .btn-auto-job.show {transform: rotate(-180deg) ;}
.pick-modal .pick-search .pick-search-w .auto-job-list {display: none; opacity: 0; transform: translateY(-5px); transition: all 0.2s ease; gap: 5px; flex-wrap: wrap;  position: absolute; left: 0; bottom: 22px; width: 100%; max-height: 120px; overflow-y: auto;  padding: 20px 20px 36px 20px; background-color: #fff; border: 1px solid #c9c9c9; border-radius: 12px 12px 0 0; box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1); }
.pick-modal .pick-search .pick-search-w .auto-job-list button {position: relative; width: auto; height: 24px; line-height: 24px; padding: 0 10px; font-size: 13px; color: var(--career--primary); background-color: #d6e7fb; border-radius: 34px; box-shadow: none;  }
.pick-modal .pick-search .pick-search-w .auto-job-list button.selected {color: #fff; background-color: var(--career--primary);}
.pick-modal .pick-search .pick-search-w .show + .auto-job-list {display: flex; opacity: 1; transform: translateY(0);}
.pick-modal .pick-search .pick-search-w > button {position: absolute; top:0; right:0; z-index: 1; flex-shrink: 0; width: 100px; height: 40px; padding: 0 15px; line-height: 40px; color: #fff; background-color: #666; border-radius: 44px;}
.pick-modal .pick-search .pick-search-w {display: flex; gap: 10px; align-items: center; margin-top: 5px;}
.pick-modal .pick-search .pick-search-w input {width: 100%; height: 40px; padding: 0 15px; line-height: 40px; font-size: 14px; background-color: #fff; border: 1px solid #D9D9D9; border-radius: 40px;}
.pick-modal .pick-search .pick-search-w button {flex-shrink: 0; height: 40px; padding: 0 15px; line-height: 40px; font-size: 14px; color: #fff; background-color: #666; border-radius: 40px;}
.pick-modal .pick-btns {position: relative; margin-top: 15px; text-align: center;}
.pick-modal .pick-btns button {min-width: 160px; font-size: 15px; color: #fff; padding: 10px 30px; background-color: #000; border-radius: 46px;}
.pick-modal .pick-btns button.primary {background-color: var(--career--primary);}

@media screen and (max-width: 440px) {
    .pick-modal .pick-search {padding: 10px; background:#F0F4FC; }
    .pick-modal .pick-search .pick-search-w .auto-job-list {max-height: 200px; padding: 10px 10px 26px 10px;}
    .pick-modal .pick-search .pick-search-w {padding-right: 80px;}
    .pick-modal .pick-search .pick-search-w > button {width: 80px;}
}
/**************************************************
    로그인 후 계정별 수정
***************************************************/
/* 일반 */
.main-md-section.normal .com-card .con-box .title {max-width: calc(100% - 120px);} 

/* 학생 */
.main-md-section.student {gap: 20px; background: #756CD3;}
.main-md-section.student .main-info-box {background-color: #E7E5FF;}
.main-md-section.student .com-card .con-box .title {max-width: calc(100% - 120px);} 
.main-md-section.student .my-jobtest-box .con-box p strong {color: #594FC6;}
.main-md-section.student .my-jobtest-box .con-box .jobtest-list {flex-wrap: wrap; flex-direction: row; justify-content: space-between; gap: 7px 0;}
.main-md-section.student .my-jobtest-box .con-box .jobtest-list a {width:calc(50% - 3.5px); background-color: #594FC6;}
.main-md-section.student .my-counsel-box .con-box dl span {background-color: #594FC6;}
.main-md-section.student .my-counsel-box .con-box dl dt {color: #594FC6;}
.main-md-section.student .main-info-box .con-btn a {background-color: #594FC6;}
.main-md-section.student .btns-add button.active {color: #fff; background-color: #594FC6;}
.main-md-section.student .no-data .box-wrap p strong {color: #594FC6;}
.main-md-section.student .no-data .box-wrap .img-attention {background: url(/cloud/w/img/main/img_attention_student-4dc699154d0bef14bd559e2503690159.png) center center no-repeat; }

@media screen and (max-width: 400px) {
    .main-md-section.student .my-jobtest-box .con-box .jobtest-list {flex-direction: column;}
    .main-md-section.student .my-jobtest-box .con-box .jobtest-list a {width: 100%; font-size: 14px; letter-spacing: -1px;}
}

/* 교사 */
.main-md-section.teacher {background: #2FBBD3;}
.main-md-section.teacher .main-info-box {background-color: #DFFAFF;}
.main-md-section.teacher .com-card .con-box .title {max-width: calc(100% - 120px);} 
.main-md-section.teacher .btns-add button.active {color: #fff; background-color: #2FBBD3;}
.main-md-section.teacher .no-data .box-wrap p strong {color: #2FBBD3;}
.main-md-section.teacher .no-data .box-wrap .img-attention {background: url(/cloud/w/img/main/img_attention_teacher-5a9ff2d63c5f2a03a6aafd0137ee8150.png) center center no-repeat; }