@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(../img/main/top_section_bg.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(../img/common/icon_btn_more.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(../img/main/total_srch_btn.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(../img/common/icon_angle_down.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(../img/main/job_video_play_btn.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;}




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

    추천서비스 리스트

***************************************************/
.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(../img/main/icon_arrow_round.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(../img/main/jobtest_bg.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(../img/main/jobtest_title_dot.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(../img/common/icon_right_arrow_gray.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: 14px; height: 14px; background: url(../img/common/icon_btn_more.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(../img/common/icon_right_arrow_gray.svg) no-repeat center;}

/* 직업 정보 */
.job-terms-list {display: flex; align-items: center; justify-content: space-between;}
.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-terms-list {display: flex; align-items: center; gap: 32px;}
.depart-terms-list li {color: #3084FA; 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: #1974D9; 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(../img/main/top_section_bg_student.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: #F936A9; 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(../img/main/interest_job_bg.png) no-repeat right 40px center; border-radius: 20px; padding: 32px;}
.main-info-box.job-info.major{width: 443px; height: 253px; background: #fff url(../img/main/interest_major_bg.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(../img/common/icon_arrow_right_white.svg);}



/**************************************************
    로그인 - 교사
***************************************************/
.main-top-section.teacher {background: url(../img/main/top_section_bg_teacher.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(../img/common/ic_cpt_arrow_right_white.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(../img/main/icon_arrow_right_green.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: #F74A14;}
.data-list li .badge.middle {background: #52A806;}
.data-list li .badge.high {background: #18a0fb;}
.data-list li .badge.uni {background: #a781f1;}

/* 자료 박스 배경 
.main-md-section.teacher .com-inner-1360 > div:nth-of-type(2) {background: #fff url(../img/main/info_box_bg_01.png) no-repeat; background-size: cover;}
.main-md-section.teacher .com-inner-1360 > div:last-of-type  {background: #fff url(../img/main/info_box_bg_02.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(../img/common/icon_btn_more.svg) no-repeat center;}
.main-bt-section .hd {display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;}
.main-bt-section .hd h2 {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 .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(../img/common/icon_angle_right.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;}
.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: 12px; height: 12px;}
.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(../img/main/pause_btn.svg) no-repeat center;}
.main-event-wrap .play-btn-box button.play-btn {background: url(../img/main/play_btn.svg) no-repeat center; display: none;}



/* 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(../img/common/icon_arrow_right.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: 14px; height: 14px;}
.com-carousel-pagination .swiper-pagination-bullet-active {width: 37px; height: 14px; }


.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: 14px; height: 14px; background-color:#fff; border:2px solid #7d98b3;;}
.main-top-section .rb .com-carousel-pagination .swiper-pagination-bullet-active {width: 14px; height: 14px; background-color:#7d98b3;}

.main-top-section .play-btn-box {position:relative; width: 14px; height: 14px;}
.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(../img/main/pause_btn.svg) no-repeat center; background-size:auto 100%;}
.main-top-section .play-btn-box button.play-btn {background: url(../img/main/play_btn.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;}



@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) {

}