@charset "utf-8";

/**************************************************
*
*   main.css
*
***************************************************/
#container.main-container {padding: 0; height: fit-content;}

@media screen and (max-width: 1360px) {
    /* .com-inner-1360 {width: 100%; max-width: 1360px;} */
    
}

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

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

*******************************************************/
.main-top-section {display: flex; flex-direction: column; background: url(/cloud/w/img/main/top_section_bg-14ef22d2c896f279e86082a3be0f1b89.jpg) center no-repeat; background-size: cover;}
.main-top-section .com-inner-1360 {display: flex; align-items: center; justify-content: space-between; padding: 30px 0;}



.main-top-section .copy-box {margin-bottom: 40px;}
.main-top-section .copy-box P {font-size: 29px; font-weight: 600; color: #3A3A3A;}
.main-top-section .copy-box h1 {font-size: 40px; color: #3a3a3a;}
.main-top-section .copy-box h1 span {color: #222; font-weight: bold;}

.main-top-section .rb .brd-hd .btn-more {display: flex; align-items: center; justify-content: center; width: 19px; height: 19px;}
.main-top-section .rb .brd-hd .btn-more::after {content: ''; display: block; width: 14px; height: 14px; background: url(/cloud/w/img/common/icon_btn_more-eeda011e6f4d62b1b122a30431c9ca1c.svg) no-repeat center;}

/* 통합검색 */
.srch-box-wrap {display: flex;}
.srch-box-wrap .total-srch-box {width: 380px; height: 56px; display: flex; align-items: center; border-radius: 50px; background: #fff; border: 1px solid #ddd; box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); position: relative;}
.srch-box-wrap .total-srch-box input {width: calc(100% - 0px); height: 100%; border: none; padding: 0 20px; border-radius: 50px; padding-right:50px;}
.srch-box-wrap .total-srch-box input::placeholder {font-size: 18px; color: #888;}
.srch-box-wrap .total-srch-box .btn-srch {width: 37px; height: 37px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #222 url(/cloud/w/img/main/total_srch_btn-7542464f4cc6a92624794c1b91914b7f.svg) no-repeat center; position:absolute; right:10px;}

/* 통합검색 - 추천검색어 */
.srch-box-wrap .keyword-list {display: flex; align-items: center; gap: 16px; padding-left: 30px; margin-top: 12px;}
.srch-box-wrap .keyword-list li::before {content: '\0023'; color: #555; font-size: 17px;}
.srch-box-wrap .keyword-list li a {display: inline-block; color: #555; font-weight: 500;}

/* 통합검색 - 검색필드 */
.srch-box-wrap .select-field {font-weight: 600;}
.srch-box-wrap .select-field > li {position: relative; margin-right: 24px; height: 50px; width: 108px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 5px; border-bottom: 1px solid #717171;}
.srch-box-wrap .select-field > li::after {content: ''; display: block; width: 12px; height: 16px; background: url(/cloud/w/img/common/icon_angle_down-0213b2cf8f925283505fb8cacfded4fa.svg) no-repeat center;}
.srch-box-wrap .select-field > li.active::after {transform: rotate(180deg);}
.srch-box-wrap .field-list {position: absolute; bottom: -130px; left: 50%; transform: translateX(-50%); background: #fff; padding: 12px 20px; border-radius: 8px; border: 1px solid #ddd; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); display: none;}
.srch-box-wrap .field-list li a {display: block; margin: 4px 0;}
.srch-box-wrap .field-list li a:hover {color: var(--career--primary); font-weight: 600;}
.srch-box-wrap .field-list.active {display: flex; }


/* 직업정보 / 직업인 인터뷰 */
.main-top-section .rb {width: 320px; display: grid; gap: 16px;}
.main-top-section .rb .brd-box {width: 320px; padding: 25px 25px 35px 25px; border-radius: 20px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); background: #fff;}
.main-top-section .rb .brd-hd {display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;}
.main-top-section .rb .brd-hd .title-box {display: flex; align-items: center; gap: 10px;}
.main-top-section .rb .brd-hd .title {font-size: var(--title-s-700); font-weight: 700; color: #111;}
.main-top-section .rb .job-video-list-box {overflow:hidden;}
.main-top-section .rb .job-video-list {display: flex; align-items: center; justify-content: space-between;}
.main-top-section .rb .job-video-list li a {display: block; position: relative; width: 127px; height: 100px; border-radius: 10px; overflow: hidden;}
.main-top-section .rb .job-video-list li a img {width: 100%; height: 100%;}
.main-top-section .rb .job-video-list li a::before {content: ''; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 25px; height: 25px; background: #000 url(/cloud/w/img/main/job_video_play_btn-5ef87cd4ac44686b47bb48967cb37ae0.svg) no-repeat center; border-radius: 50%;}
.main-top-section .rb .job-video-list li a:hover::before {filter: invert(10);}

.main-top-section .rb .job-interview-box {overflow: hidden;}
.main-top-section .rb .job-interview-box a {display: flex; align-items: center; gap: 16px;}
.main-top-section .rb .job-interview-box a .img-box {width: 95px; height: 95px; border-radius: 10px; overflow: hidden; background: #f7f8fc; display: flex;}
.main-top-section .rb .job-interview-box a .img-box img {width: 100%; object-fit: cover;}
.main-top-section .rb .job-interview-box a .con-box {width: 156px;}
.main-top-section .rb .job-interview-box a .con-box .title {width: fit-content; font-size: var(--body-m-700); font-weight: 600; color: #616161;}
.main-top-section .rb .job-interview-box a .con-box .info {margin-top: 8px; font-size: var(--body-s-700); font-weight: 600; color: var(--career--primary);}
.main-top-section .rb .job-interview-box a .con-box .info span {font-size: var(--body-m-700); display: block;}
.main-top-section .rb .job-interview-box a:hover .con-box .title {text-decoration: underline;}
.main-top-section .rb .job-interview-box a:hover .con-box .info {text-decoration: underline;}

/* 웹접근성 추가 RHD 20250825 */
.main-top-section .rb .job-video-list li a:focus-visible {outline-offset:-2px;}
.main-top-section .rb .job-interview-box a:focus-visible {outline-offset:-2px;}




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

    추천서비스 리스트

***************************************************/
.main-service-wrap {width: 100%; padding: 15px 0 10px 0; background: rgba(247, 247, 247, 0.9);}
.main-service-wrap > div {width: 950px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 64px;}
.main-service-wrap h3 {display: flex; align-items: center; font-size: 20px; font-weight: 700; color: #555;}
.main-service-wrap h3 span {color: #333; margin-right: 4px;}
.main-service-wrap h3::after {content: ''; display: block; margin-left: 8px; width: 5px; height: 7px; background: url(/cloud/w/img/main/icon_arrow_round-87109d46affd28382d2562765f5b938a.svg) no-repeat center;}
.main-service-wrap p {line-height: 1.2;}
.main-service-wrap .recommand-service-list {display: flex; align-items: flex-start; gap: 40px; width: 780px;}
.main-service-wrap .recommand-service-list li {width: calc(100% / 5);}
.main-service-wrap .recommand-service-list li a {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; font-size: var(--link-s-400);}
.main-service-wrap .recommand-service-list li a .img-box {display: flex; align-items: center; justify-content: center; width: 65px; height: 65px; background: #fff; border-radius: 50%; transition: all ease .3s;}
.main-service-wrap .recommand-service-list li a:hover .img-box {background: #F67F1A;}
.main-service-wrap .recommand-service-list li a:hover .img-box img {filter: invert(10) brightness(10);}
.main-service-wrap .recommand-service-list li a:hover {font-weight: 600;}




/**************************************************
*  진로심리검사 / 직업 정보 / 학과 정보
***************************************************/
.main-md-section {width: 100%; padding: 53px 0; background: #3767B3; display: flex; flex-direction: column; align-items: flex-start; gap: 40px;}
.main-md-section .com-inner-1360 {display: flex; align-items: center; justify-content: space-between; gap: 24px;}

/* 진로심리검사 */
.jobtest-box {position: relative;}
.jobtest-box::after {content: ''; display: block; position: absolute; bottom: -80px; right: -10px; z-index: 0; width: 580px; height: 330px; background: url(/cloud/w/img/main/jobtest_bg-f9020df4a349a97d6c06f15edad391b8.png) no-repeat center; background-size: cover;}
.jobtest-box .con-box {position: relative; z-index: 2;}
.jobtest-box .con-box h3 {font-size:  var(--title-l-700); width: 208px; font-weight: 600; color: #fff; position: relative;}
.jobtest-box .con-box h3::after {content: ''; display: block; width: 208px; height: 20px; position: absolute; top: -20px; right: 16px;  background: url(/cloud/w/img/main/jobtest_title_dot-7c45b981f0ce86c21c65bcff01443acd.png) no-repeat right 10px;}
.jobtest-box .con-box p {font-size:  var(--body-m-400); width: 50%; margin: 24px 0; color: #fff;}
.jobtest-box .detail-btn-more {position: relative; z-index: 2; width: 153px; height: 41px; border-radius: 8px; border: 1px solid #3084FA; display: flex; align-items: center; justify-content: center; gap: 16px; background: #fff; font-size: var(--body-s-700); font-weight: 600; color: #444;}
.jobtest-box .detail-btn-more::after {content: ''; display: block; width: 18px; height: 9px; background: url(/cloud/w/img/common/icon_right_arrow_gray-8da972b4cdbd94e867e43acd38969b8b.svg) no-repeat center;}

.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: 443px; height: 253px; background: #fff; border-radius: 20px; 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; width: 100%;}
.main-info-box .con-hd .title {font-size:  23px; 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: 17px; height: 17px; background: url(/cloud/w/img/common/icon_btn_more-eeda011e6f4d62b1b122a30431c9ca1c.svg) no-repeat center;}
.main-swiper-indicator {display: flex; align-items: center; justify-content: space-between; gap: 16px;}
.main-banner-slide {width: 100%; overflow: hidden;}
.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: 10px;}
.main-info-box .title {font-size: var(--body-l-700); font-weight: 700;}
.main-info-box .con {line-height: 150%; font-size: var(--body-m-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;}
.main-info-box .detail-btn-more::after {content: ''; display: block; width: 18px; height: 9px; background: url(/cloud/w/img/common/icon_right_arrow_gray-8da972b4cdbd94e867e43acd38969b8b.svg) no-repeat center;}

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

/* 학과 정보 */
.depart-terms-list {display: flex; align-items: center; gap: 32px;}
.depart-terms-list li {color: #2770d5; font-size: var(--body-s-400);}
.depart-terms-list li span {font-size: 16px; color: #1d1d1d; margin-left: 8px; font-weight: 600;}

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


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

    로그인 

***************************************************/
/* .main-md-section .com-inner-1360.login {background: #fff; border-radius: 20px; gap: 0; padding: 32px 0;} */
/* .main-md-section .com-inner-1360.login > div {width: 33%; height: 189px;}
.main-md-section .com-inner-1360.login > div:nth-of-type(2) {border-left: 1px solid #ddd; border-right: 1px solid #ddd;}
.main-md-section .com-inner-1360.login .main-info-box {border-radius: 0; padding: 0 32px;} */


/**************************************************
    로그인 - 학생
***************************************************/
.main-top-section.student {background: url(/cloud/w/img/main/top_section_bg_student-e06a3649b54a54f62ecba8a310a3504a.jpg) center no-repeat; background-size: cover;}

.main-md-section.student {background: #5C518B;} 

/* 나의 진로심리검사 */
.my-jobtest-box {display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; width: 443px; height: 253px; background: #fff; border-radius: 20px; padding: 32px;}
.my-jobtest-box .title {font-size: 23px; font-weight: 700;}
.jobtest-status-list {width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;}
.jobtest-status-list li {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%;}
.jobtest-status-list li a{font-size: 16px; display: block; width: 100%; height: 50px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; text-align: center; border-radius: 8px; font-weight: 600;}
.jobtest-status-list .complete {border: 1px solid #aaa; color: #555;}
.jobtest-status-list .progress {border: 1px solid #519EFA; color: #2369BD; background: #F3F7FE;}
.jobtest-status-list .unchecked {border: 1px solid #F936A9; color: #E2187A; background: #FFFBFD;}
.my-jobtest-box .btn-box {display: flex; align-items: center; gap: 20px;}
.my-jobtest-box .btn-box p {font-size: var(--body-s-400); color: #333;}


/* 나의 관심직업 */
.main-info-box.job-info.interest {width: 443px; height: 253px; background: #fff url(/cloud/w/img/main/interest_job_bg-e3276196ca52f0caa3b0e68ede22fea7.png) no-repeat right 40px center; border-radius: 20px; padding: 32px;}
.main-info-box.job-info.major{width: 443px; height: 253px; background: #fff url(/cloud/w/img/main/interest_major_bg-64199fc758235d6ed6d67faa067c03f9.png) no-repeat right 40px center; border-radius: 20px; padding: 32px;}
.job-info .con-hd {align-items: flex-start; gap: 16px;}
.job-info.interest .con-hd,  .job-info.major .con-hd{flex-direction: column;}
.job-info .con-hd p {font-size: var(--body-m-400);}
.job-info button {background: none; width: fit-content;}
.job-info button a {width: fit-content; display: flex; align-items: center; justify-content: center; gap: 8px; color: #fff; background: #3084FA; padding: 8px 24px; border-radius: 20px; font-size: 16px;}

/* 진로심리검사 버튼 */
.btn-test-link {width: 185px; padding: 8px 26px; background: #2369BD !important; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff;}
.btn-test-link::after {content: ''; display: block; width: 7px; height: 12px; background: url(/cloud/w/img/common/icon_arrow_right_white-662ed613ce9e09b3d1ab0c8fd1df3d60.svg);}



/**************************************************
    로그인 - 교사
***************************************************/
.main-top-section.teacher {background: url(/cloud/w/img/main/top_section_bg_teacher-609763271c2ba8ee74d5bcdba19aaa29.jpg) center no-repeat; background-size: cover;}

.main-service-wrap h3 b {color: #1F759D; margin-right: 8px;}

.main-md-section.teacher {background: #3C6B8C;}
.main-md-section.teacher .main-info-box{justify-content: space-around;}

/* 진로 메이트 */
.jobmate-box {display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 15px; width: 443px; height: 253px; background: #fff; border-radius: 20px; padding: 32px;}
.jobmate-box .title {font-size: 23px; font-weight: 700;}
.jobmate-status-list {width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;}
.jobmate-status-list li {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%;}
.jobmate-status-list li a {line-height: 1.2; font-size: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 120px; padding: 0 20px;text-align: center; border-radius: 8px; font-weight: 600;}
.jobmate-status-list li a.mate {border: 1px solid #aaa; color: #555;}
.jobmate-status-list li a.accept {border: 1px solid #398384; color: #398384; background: #F3FFFD;}
.jobmate-status-list li a span {display: block; font-size: 36px;}
.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/w/img/common/ic_cpt_arrow_right_white-563739ce54c11f126ae5c3faff17a7af.svg) no-repeat center;}
.jobmate-box .hd {width: 100%; display: flex; align-items: center; justify-content: space-between;}
.jobmate-box .hd a {display: flex; align-items: center; font-size: 18px; color: #1F759D; font-weight: 600; gap: 10px;}
.jobmate-box .hd a::after {content: ''; display: block; width: 7px; height: 12px; background: url(/cloud/w/img/main/icon_arrow_right_green-05f946f1c744a4b03f32c4573f883327.svg) no-repeat center;}

/* 자료 박스 */
.data-list {width: 100%; height: 126px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;}
.data-list li {width: 100%;}
.data-list li a {display: block; width: 100%;}
.data-list li .title {display: flex; align-items: center; gap: 8px;}
.data-list li .title p {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; color: #232323; font-weight: 500;}
.data-list li .data-title{width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.data-list li .ect-info {display: inline; font-size: 16px; color: #777;}
.data-list li .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 li .badge.common {background: #717171}
.data-list li .badge.ect {background: #997665;}
.data-list li .badge.primary {background: #E71825;}
.data-list li .badge.middle {background: #008A1E;}
.data-list li .badge.high {background: #0074E5;}
.data-list li .badge.uni {background: #6D6DC7;}

/* 자료 박스 배경 
.main-md-section.teacher .com-inner-1360 > div:nth-of-type(2) {background: #fff url(/cloud/w/img/main/info_box_bg_01-1af2b19337569e577ea1ca25dcd7bd33.png) no-repeat; background-size: cover;}
.main-md-section.teacher .com-inner-1360 > div:last-of-type  {background: #fff url(/cloud/w/img/main/info_box_bg_02-716eafe3ca944761b950e5f4640041ce.png) no-repeat; background-size: cover;}
*/

/**************************************************
*  공지사항 / 홍보 이미지 배너
***************************************************/
.main-bt-section {width: 100%; padding: 52px 0; background: #EFF4FF;}
.main-bt-section .com-inner-1360 {display: flex; align-items: flex-start; justify-content: space-between;}
.main-bt-section .btn-more {background: transparent;}
.main-bt-section .btn-more::after {content: ''; display: block; width: 19px; height: 19px; background: url(/cloud/w/img/common/icon_btn_more-eeda011e6f4d62b1b122a30431c9ca1c.svg) no-repeat center;}
.main-bt-section .hd {display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;}
.main-bt-section .hd p {font-size: var(--title-m-700); font-weight: 600;}
.main-bt-section .com-tab-content {margin-bottom:0; padding:0; border-bottom:0; display:none;}
.main-bt-section .com-tab-content.active {display:flex;}
.main-bt-section h2 button.active {color:var(--career--secondary); font-weight:bold;}
.main-bt-section h2 button {background:transparent; color:#555; font-weight:normal;}
.main-bt-section h2 button + button {margin-left:30px; position:relative;}
.main-bt-section .hd .tab-box {font-size: var(--title-m-700); font-weight: 600;}
.main-bt-section .tab-box button.active {color:var(--career--secondary); font-weight:bold;}
.main-bt-section .tab-box button {background:transparent; color:#555; font-weight:normal;}
.main-bt-section .tab-box button + button {margin-left:30px; position:relative;}


/* 공지사항 */
.main-bt-section .lb {width: 870px; height:375px; display: flex; flex-direction: column; justify-content: flex-end;}
.main-notice-brd {display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 24px; height: 323px;}
.main-notice-brd div .title {font-size: var(--body-l-700); font-weight: 600;}
.main-notice-brd div .date {font-size: var(--body-s-400); color: var(--career--gray-70);}
.main-notice-brd div.main-notice {width: 100%; background: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; padding: 24px 32px;}
.main-notice-brd div.main-notice .title {text-align: left; width: 80%;}
.main-notice-brd div.main-notice .title a {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.notice-list {display: flex; align-items: center; justify-content: space-between; gap: 24px;}
.notice-list div.notice {background: #fff; border-radius: 10px; padding: 24px 32px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; justify-content: center;}
.notice-list div.notice .title a {height: 57px; line-height: 150%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.notice-list div.notice .con {line-height: 150%; font-size: var(--body-m-400); color: var(--career--gray-70); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}

.main-evevt-brd {height:100%;}
.event-list {display: flex; align-items: center; justify-content: space-between; gap: 24px;}
.event-list .event .img-box {height:160px; width:calc(100% + 20px); margin:-10px -10px 5px;}
.event-list .event .img-box img {width:100%; height:100%;}
.event-list .event {width:33.3%; height: 100%; background: #fff; border:1px solid rgba(0,0,0,0.1); border-radius: 10px; padding:20px 20px 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; justify-content: start;}
.event-list .event .title {height: 57px; line-height: 150%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
.event-list .event .state {font-size: 15px; font-weight:normal; color:#fff; padding:4px 10px; background: var(--career--primary); border-radius:5px;}
.event-list .event .state.end { background: var(--career--gray-70);}


/* 홍보 이미지 배너 */
.main-event-wrap { width: 442px; height: 385px;}
.main-event-wrap .slide-box {position: relative;}
.main-event-wrap .slide-box > button {position: absolute; z-index: 5; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: #fff url(/cloud/w/img/common/icon_angle_right-2f50dd3310ba997104c1bbf24ffcfce0.svg) no-repeat center; background-size: 15px; border-radius: 50%; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);}
.main-event-wrap .slide-box > button.prev-btn {left: 0; transform: translateY(-50%) rotate(180deg);}
.main-event-wrap .slide-box > button.next-btn {right: 0;}
.main-event-wrap .swiper-slide a {border-radius: 10px;overflow: hidden;display: flex;width: 374px;height: 374px;margin: 0 auto;justify-content: center;align-items: center;background: #f7f8fc; outline-offset: -2px;}
.main-event-wrap .swiper-slide a img {width: 100%; height: 100%;}
.main-event-wrap .main-swiper-indicator {display: flex; justify-content: flex-end; gap: 8px; padding-right: 36px; margin-top: 16px;}
.main-event-wrap .com-carousel-pagination {width: fit-content;}
.main-event-wrap .play-btn-box {position: relative; width: 17px; height: 17px;}
.main-event-wrap .play-btn-box button {position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); width: 100%; height: 100%}
.main-event-wrap .play-btn-box button.pause-btn {background: url(/cloud/w/img/main/pause_btn-fc2d7568faea7d38f6798966efe7851e.svg) no-repeat center;}
.main-event-wrap .play-btn-box button.play-btn {background: url(/cloud/w/img/main/play_btn-75d34377360c763eec44370f86f4fea2.svg) no-repeat center; display: none;}
/* .main-event-wrap .slide-box .main-event-slide {overflow:visible;} /* 웹접근성 추가 RHD 20250825 */

/* TOP 버튼 */
.go-top {position: fixed; z-index: 5; bottom: 40px; right: 40px; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 70px; height: 70px; border-radius: 50%; border: 1px solid var(--career--gray-40);}
.go-top::before {content: ''; width: 15px; height: 15px; background: url(/cloud/w/img/common/icon_arrow_right-37a2925a4552d8a701891e9eb8151e38.svg) no-repeat center; object-fit: cover; transform: rotate(-90deg);}
/* .go-top.active {position: sticky; right: 40px; bottom: 40px; } */

.com-carousel-pagination .swiper-pagination-bullet {width: 17px; height: 17px;}
.com-carousel-pagination .swiper-pagination-bullet-active {width: 37px; height: 17px; }


.main-info-box .data-list li .badge + .badge {margin-left:-10px;}
.main-bt-section .event-list {width:100%;}
.main-bt-section .event-list .event {justify-content:space-between;}
.main-bt-section .event-list .event .img-box {overflow:hidden;}
.main-bt-section .event-list .event .img-box img {object-fit:cover;}
.main-event-wrap .com-carousel-pagination {width:fit-content !important;}
.main-notice-brd .notice-list div.notice {height:210px; width:33.3%; justify-content:space-between;}

.main-top-section .rb .main-swiper-indicator {gap:6px;}
.main-top-section .rb .com-carousel-pagination {gap:5px;}
.main-top-section .rb .com-carousel-pagination .swiper-pagination-bullet {width: 17px; height: 17px; background-color:#fff; border:2px solid #7d98b3;;}
.main-top-section .rb .com-carousel-pagination .swiper-pagination-bullet-active {width: 17px; height: 17px; background-color:#7d98b3;}

.main-top-section .play-btn-box {position:relative; width: 17px; height: 17px; flex-shrink: 0;}
.main-top-section .play-btn-box button {position: absolute; top: 50%; left: 50%; transform: translate(-50% , -50%); width: 100%; height: 100%}
.main-top-section .play-btn-box button.pause-btn {background: url(/cloud/w/img/main/pause_btn-fc2d7568faea7d38f6798966efe7851e.svg) no-repeat center; background-size:auto 100%;}
.main-top-section .play-btn-box button.play-btn {background: url(/cloud/w/img/main/play_btn-75d34377360c763eec44370f86f4fea2.svg) no-repeat center;  background-size:auto 100%; display: none;}

.play-btn-box.play .pause-btn {display: none !important;}
.play-btn-box.play .play-btn  {display: block !important;}
.play-btn-box.stop .pause-btn {display: block !important;}
.play-btn-box.stop .play-btn  {display: none !important;}

/* 플로팅 메뉴 */
.float-box-wrap{position: relative;}
.float-box-side {
  position: fixed; 
  z-index: 5; 
  /* right: -192px;  */
  right: calc(50% - 870px);
  display: flex; 
  justify-content: flex-start; 
  /* gap: 8px; */
  gap: 6px;
  flex-direction: column; 
  align-items: center; 
  width: 180px; 
  /* height: 239px;  */
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  /* padding-bottom: 8px; */
  /* padding-bottom: 4px; */
} 
.float-box{
  position: fixed; top: 198px; z-index: 5; 
  right: 20px; 
  display: flex; 
  justify-content: flex-start; 
  /* gap: 8px; */
  gap: 6px;
  flex-direction: column; 
  align-items: center; 
  width: 180px; 
  /* height: 239px;  */
  border-radius: 15px; 
  background-color: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  /* padding-bottom: 8px; */
  /* padding-bottom: 4px; */
  }
.float-box .img-box
,.float-box-side .img-box {
  width: 166px; 
  /* height: 90px;  */
  height: 93px; 
  border-radius: 10px; 
  overflow: hidden; 
  margin-bottom: 6px; 
  /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid #DDD
}
.float-box .img-box img
,.float-box-side .img-box img{ 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  object-position: center; 
  display: block;}

.float-box .btn-box 
,.float-box-side .btn-box {
  position: relative;
  bottom: 40px;
  right: -80px;
}
.float-box .event 
,.float-box-side .event {
  display: block;
  height: 80px;
  margin-bottom: 8px; 
}

.float-box ul li
,.float-box-side ul li{
  /* height: 93px; */
  height: 96px;
  margin-bottom: 4px;
}

.float-box ul li .mca-btn-view
,.float-box-side ul li .mca-btn-view{
    display: inline-flex;
    align-items: center;
    justify-content: end;
    border: 1px solid #7bb2fe;
    background: #d6e7fb;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 400;
    color: #1362b9;
    padding: 1px 8px;
    margin-left: 10px;
}
.float-box ul li .mca-btn-view span
,.float-box-side ul li .mca-btn-view span{
  display: inline-block;
    width: 10px;
    height: 10px;
    background: url(/cloud/m/img/common/icon_search_blue-f9178c37cf5fcd6eabfed7a72b191240.svg) no-repeat center center;
    background-size: 10px auto;
    text-indent: -9999px;
    border-radius: 25px;
    margin-left: 5px;
}

.float-toggle{
  position: fixed; 
  z-index: 5; 
  top: 175px;
  right: 47px; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  width: 55px; 
  height:55px; 
  border-radius: 50%;  
  background-color: #fff;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  border: solid 1px #ddd;
  /* box-shadow:
  8px 8px 16px rgba(0, 0, 0, 0.15),
    -8px -8px 16px rgba(255, 255, 255, 0.8); */
}



.float-toggle-img{
  width: 40px; 
  height: 40px;
}

.float-close-btn{ 
  width: 20px; 
  height: 20px; 
  cursor: pointer; }

.event-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: #3767B3;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  padding : 5px 8px;
  border-radius: 15px 15px 0px 0px;

}

.event-title {
  display: flex;
  align-items: center;
}

.event-title-img{
  width: 30px;
  height: 30px;
  margin-right: 4px;
}

 @media screen and (max-width: 1770px) {
  /* .float-box{
    position: absolute; top: 198px; z-index: 5; 
    right: 20px; display: flex; flex-direction: column; align-items: center; width: 160px; border-radius: 15px; 
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  }
  .float-box-side{
    display: none;
    transform: translateX(200%); 
  } */
}
@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) {

}

/**********************************************************
*  개인화서비스 추가 및 수정  20251021 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%; padding: 25px 0; background: #5987D1; display: flex; flex-direction: column; align-items: flex-start; gap: 40px;}
.main-md-section::before {position: absolute; left: 0; width:12%; 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:12%; 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 .com-inner-1360 {display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.main-info-box {position: relative; z-index: 1; flex-shrink: 0; width: 440px; height: 360px; background: #E9F1FF; border-radius: 20px; padding: 25px 32px; display: flex; flex-direction: column; justify-content: space-between !important;}
.main-info-box .con-hd {position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%;}
.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-info-box .con-hd .title img {width:24px;}
.main-info-box a:hover:not(.com-card) {box-shadow: inset -9999px -9999px rgba(0, 0, 0, 0.2);}
.main-info-box .con-box {background-color:#fff; border-radius: 12px; }
.main-info-box .con-btn {width: 100%;}
.main-info-box .con-btn a {width:100%; display:flex; justify-content:center; align-items:center; padding:15px 20px; line-height:1; font-size:20px; color:#fff; background-color:var(--career--primary); border-radius:60px; }
.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: '';}

/* 추천, 관심 추가 */
.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: 30px; padding:0 10px; font-size: 14px; 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:hover, .main-md-section .btns-add button.active {color: #fff; background-color: var(--career--primary);}
.main-md-section .btns-add button:hover::before, .main-md-section .btns-add .active::before {filter: brightness(0) invert(1);}

/* 메인 배너 슬라이드 */
.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-banner-slide .swiper-slide a:focus {text-decoration: underline;}
.main-banner-slide .swiper-slide a:hover {border: 1px solid var(--career--primary); }
.main-md-section.student .main-banner-slide .swiper-slide a:hover {border: 1px solid #594FC6; }
.main-md-section.teacher .main-banner-slide .swiper-slide a:hover {border: 1px solid #00A4C0; }
.main-banner-slide .swiper-slide a:hover .con-box .con {text-decoration: underline; text-decoration-color: var(--career--gray-60); }

/* 비로그인 */
.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:54%;}
.login-info .con-box p {line-height: 1.3; font-size:var(--title-s-700); color:#222; }
.login-info .con-box p strong {color: var(--career--primary);}

/* 나의 진로심리검사 현황 */
.my-jobtest-box {position: relative; text-align:center; background-color:#fff !important;}
.my-jobtest-box .con-hd .title {justify-content: center; width:100%; padding:6px 0; line-height:24px; font-size: var(--body-l-700); font-weight: 600; color: #000; background-color: #F0F4FC; border-radius:50px;}
.my-jobtest-box .con-box {position: relative; width: 100%; height:100%; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; }
.my-jobtest-box .con-box p {display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;  line-height:1.3; font-size:20px; color: #222;}
.my-jobtest-box .con-box p strong {color: var(--career--primary);}
.my-jobtest-box .con-box .jobtest-list {position: relative; width: 100%; display: flex; flex-direction: column; gap:7px; }
.my-jobtest-box .con-box .jobtest-list a {position: relative; z-index: 2; width: 100%; height: 40px; 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); }
.my-jobtest-box .con-box .jobtest-list a::after {position: absolute; right:10px; 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:''; }
.my-jobtest-box .con-box .jobtest-list a > img {width:18px;}

/* 나의 진로상담 현황 */
.my-counsel-box .con-box {padding: 20px;}
.my-counsel-box .con-box dl {display: flex; flex-direction: column;}
.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;}
.my-counsel-box .con-box dl dt {line-height: 120%; font-size: var(--title-s-700); color: var(--career--primary); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.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;}
.my-counsel-box .con-box dl dd.date img {width: 17px; }
.my-counsel-box .con-box dl dd.con {-webkit-line-clamp: 3; line-clamp: 3; height: 98px;  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: 20px; padding-top: 20px; border-top: 1px solid #E7E5FF; }

/* 직업정보, 학과정보 */
.main-md-section .swiper-slide > .btns-add {top: 15px; 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; padding:15px;} 
.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: var(--body-l-700); 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:10px; -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: 230px; height: 151px; max-height:151px; border:1px solid #d9d9d9; border-radius:8px; overflow: hidden;} 
.main-md-section .com-card .con-box .img-box img {width: 100%; object-fit: cover; }
.main-md-section .com-card .con-hd .terms-list {display: block; width: calc(100% - (240px + 18px)); } 
.main-md-section .com-card .con-hd .terms-list li {width: 100%; text-align: left; padding: 6px 0; text-align: left; }
.main-md-section .com-card .con-hd .terms-list li:first-child {padding-top:0; }
.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 {line-height: 1.2; font-size: var(--body-s-400); 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; line-height: 1.3;  font-size: var(--body-m-400); padding-top: 0; font-weight: 700; } 

.main-md-section .com-card:hover {border: 1px solid var(--career--primary); }
.main-md-section .com-card:hover .con-box .title {color: var(--career--primary); }

/* 진로교육 추천, 최신 자료 */
.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: 151px; max-height:151px; border:1px solid #d9d9d9; border-radius:16px; overflow: hidden;} 
.main-md-section .com-card2 .con-box .img-box img {width: 100%; object-fit: cover; }
.main-md-section .com-card2 .con-box .title {margin: 10px 0 0 0; line-height: 1; font-size: var(--body-l-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 .com-card2:hover {border: 1px solid #00A4C0; }
.main-md-section .com-card2:hover .con-box .title {color: #1680A3; }
.main-md-section.student .com-card2:hover .con-box .title {color: #594FC6; }

/* 교사서비스 */
.main-info-box.teacher-service {display: flex; flex-direction: column; justify-content: space-between; background-color:#DFFAFF; text-align:center;}
.teacher-service a {display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 20px; padding: 5px 10px; font-size: var(--body-m-400); color: #00A4C0; font-weight: 600; background-color: #fff; border-radius: 40px;}
.teacher-service a img {height: 12px;}
.teacher-service a.link-go {position: absolute; top:-2px; right: 0; margin: 0; padding:2px 15px; font-size: var(--body-s-400); color: #fff; background-color: #00A4C0;}
.teacher-service .con-box {display: flex; flex-direction: row; justify-content: space-between; height:274px; padding: 30px; }
.teacher-service .con-box .jopmate-box {display: flex; justify-content: space-between; flex-direction: column; width: 47.5%; padding:30px 20px; background-color: #00A4C0; border-radius: 20px; }
.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: 50%;}
.teacher-service .con-box .jopmate-box .con {display: flex; gap: 10px; flex-direction: column; overflow: visible;}
.teacher-service .con-box .jopmate-box .title {line-height: 1.2; font-size: var(--title-s-700); color:#fff; font-weight: 600; }
.teacher-service .con-box .jopmate-box .number {font-size: 40px; color:#fff; font-weight: 700; }

/* 학생 상단 */
.main-md-section-tp {width: 100%; display: flex; justify-content: space-between; align-items: center;}
.main-md-section-tp .title {display: flex; align-items: center; font-size: 28px; color: #fff; text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
.main-md-section-tp .title > img {display: inline-block; width:42px; margin-right: 10px;}
.main-md-section-tp .title strong {color: #FFF704;}
.main-md-section-tp .title a {display: flex; justify-content: center; align-items: center; gap: 5px; margin-left: 5px; padding: 0 12px; font-size: var(--body-m-400); color: #000; font-weight: 400; background-color: #E7E5FF; border-radius: 40px;}
.main-md-section-tp .title a i {display: inline-block; width: 40px; height: 34px; background: url(/cloud/w/img/main/icon_ai-49895b3a020333038867189608936dbf.png) center center no-repeat; background-size: 100%;}
.main-md-section-tp .title a:hover {color: #fff; background-color: #594FC6;}
.main-md-section-tp .title a:hover img {filter: none;}
.main-md-section-tp .title a img {height: 12px; filter: brightness(9) invert(1);}

.main-md-section-tp .btn-pick {display: flex; align-items: center; padding: 5px 12px; font-size: 20px; color: #594FC6; 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: 34px; margin-right: 5px;}
.main-md-section-tp .btn-pick span {width: 30px; height: 30px; margin-left: 10px; background:#594FC6 url(/cloud/w/img/main/icon_md_arr_right-bfd6361d7af5537f3b2158eda5106603.png) center center no-repeat; background-size:30%; content:'';  border-radius: 50%;}

/* 데이터 없을때 */
.main-md-section .no-data {display: flex; gap: 12.5px; flex-direction: column; justify-content: center; align-items: center; height: 274px; }
.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: 70px; height: 70px; 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);}

/* 모달 나의 관심직업 Pick */
.pick-modal .blue {color: var(--career--primary);}
.pick-modal .btn-refresh {display: flex; gap: 5px; justify-content: center; align-items: center; min-width: 36px; height: 36px; font-size: 15px; color: #fff; background-color: #F05A21; border-radius: 50%;}
.pick-modal .btn-refresh img {width: 16px;}
.pick-modal button:not(.btn-del , .btn-cls, .btn-auto-job):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: 20px; 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: 40px; 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: 18px; color: #333;}
.pick-modal .pick-txt h3 {font-size: 30px; color: #000;}
.pick-modal .pick-txt h3 img {display: inline-block; vertical-align: top; width: 44px; margin-left: 5px;}
.pick-modal .pick-txt h3 strong {font-size: 34px;}
.pick-modal .pick-category {display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;  position: relative; margin: 15px 0;}
.pick-modal .pick-category button {padding: 5px 15px; font-size: 16px; color: #fff; background-color: #666; border-radius: 34px;}
.pick-modal .pick-category button.active {background-color: var(--career--primary);}
.pick-modal .pick-box {padding: 20px; background-color: #E8F4FF; border-radius: 20px;}
.pick-modal .pick-box .pick-box-tp {padding: 20px; background-color: #fff; border-radius: 20px;}
.pick-modal .pick-box .pick-box-tp .pick-num {display: flex; gap: 10px; align-items: center; font-size: 24px; color: var(--career--primary); font-weight: 600;}
.pick-modal .pick-box .pick-box-tp .pick-num span {padding: 3px 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: center; 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: 36px; padding:0 10px; line-height: 36px; font-size: 16px; 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: 36px;}
.pick-modal .pick-box .bubble-chart .chart-w {position: relative; width: 100%; min-height: 300px;}
.pick-modal .pick-search {position: relative; margin-top: 20px; padding:20px 20px 20px 130px; background:#F0F4FC url(/cloud/w/img/main/img_modal_search-e0fcc9936dec47cad4d664cc691faa79.png) left bottom no-repeat; background-size: 110px; border-radius: 20px; }
.pick-modal .pick-search p {margin-bottom: 10px; font-size: 18px; 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: 44px; padding: 0 15px; line-height: 44px; 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: 44px; height: 44px; background: url(/cloud/w/img/common/icon_angle_down-0213b2cf8f925283505fb8cacfded4fa.svg) center center no-repeat; background-size: 30%; border-radius: 50px; transition: all 0.2s; }
.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: 34px; line-height: 34px; 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: 44px; padding: 0 15px; line-height: 44px; color: #fff; background-color: #666; border-radius: 44px;}
.pick-modal .pick-btns {position: relative; margin-top: 20px; text-align: center;}
.pick-modal .pick-btns button {font-size: 17px; color: #fff; padding: 10px 30px; background-color: #000; border-radius: 46px;}
.pick-modal .pick-btns button.primary {background-color: var(--career--primary);}

/**************************************************
    로그인 후 계정별 수정  20251021 RHD
***************************************************/
/* 일반 */
.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:hover, .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; }

/* 교사 */
.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:hover, .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; }