/********** 메인 공통 **********/
.more{display: flex; align-items: center; gap: 10px; flex-shrink: 0; font-weight: 600; color: var(--light-sub);}
.more i{width: 25px; height: 6px; transition: all 0.3s; background: url(../img/main/more-arr.svg) no-repeat center center / contain;}
.more:hover i{transform: translateX(10px);}

/* .main-content {padding-top: 60px;} */
.con-box {padding-top: 100px;}
.sec-tit {font-size: 4rem; color: var(--dark-main);}

@media only screen and (max-width: 1023px) {
    .con-box {padding-top: 80px;}
}

div.no-data {width: 100%; padding: 60px 0; border-top: 2px solid var(--main); border-bottom: 1px solid var(--gray-e5);}
div.no-data p {font-size: 2rem; text-align: center;}

.con-box .top .txt-box {display: flex; justify-content: space-between; align-items: flex-end; margin: 20px 0; text-align: left;}
.con-box .top .txt-box p {line-height: 1.2; font-size: 1.8rem; color: #666; word-wrap: break-word; word-break: keep-all;}
.con-box .top .txt-box span {font-size: 1.6rem;}

@media only screen and (max-width: 600px) {
	.con-box .top .txt-box {flex-wrap: wrap; gap: 10px;}
	.con-box .top .txt-box .more {margin-left: auto;}
}

/********************* sec01 ************************/
.search-box{ position: relative; display: flex; align-items: center; gap: 20px; width: 500px; padding-right: 20px; border: 2px solid var(--blue); border-radius: 6px; overflow: hidden;}
.search-box input{ width: 100%; border: 0; padding-left: 20px; font-size: 1.8rem; line-height: 5rem;}
.search-box input::placeholder{font-size: 1.8rem; color: #96A5C2;}
.search-box input:focus{outline: none;}
.search-box button{ position: relative; font-size: 0;}
.search-box button i{ display: inline-block; width: 16px; height: 16px; background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %231A3AC5; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px; %7D %3C/style%3E%3C/defs%3E%3Cellipse class='cls-1' cx='6.51' cy='6.5' rx='5.51' ry='5.5'/%3E%3Cline class='cls-1' x1='10.58' y1='10.58' x2='14' y2='14'/%3E%3C/svg%3E") no-repeat center / contain;}

.concert .top {width: fit-content; margin: 0 auto 40px;}
.concert .search-box {width: 460px;}
.concert .search-box input{ line-height: 6rem;}
.concert .tab-wrap {display: flex; align-items: center; gap: 20px;}
.concert .tab-wrap .lf {flex-shrink: 0; position: relative; font-weight: 500; color: #aaa;}
.concert .tab-wrap .lf::after {content: "/"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.concert .tab-wrap .lf a {padding: 0 6px;}
.concert .tab-wrap .lf a.active {font-weight: 600; color: var(--main);}
.concert .tab-wrap .tab {display: none;}
.concert .tab-wrap .tab.active {display: flex; flex-wrap: wrap; gap: 10px;}
.concert .tab-wrap .tab a {display: block; padding: 10px 15px; border-radius: 40px; background-color: var(--gray-f5); transition: all 0.3s; white-space: nowrap;}
.concert .tab-wrap .tab a.active {font-weight: 600; color: #fff; background-color: var(--main);}

.concert .cont-wrap {position: relative;}
.concert .cont-wrap .swiper-slide a {position: relative; display: block; height: 300px; color: #aeaeae; border-radius: 10px; overflow: hidden;}
.concert .cont-wrap .swiper-slide a img {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.concert .hover {position: absolute; bottom: -100%; left: 0; width: 100%; padding: 15px; background-color: rgba(0,0,0,0.85); transition: all 0.4s;}
.concert .hover p {margin-bottom: 20px; line-height: 1.4; font-size: 1.8rem; color: #fff; word-wrap: break-word; word-break: keep-all;}
.concert .hover span {font-size: 14px;}
.concert .hover em {display: block; margin-top: 10px; font-size: 14px; text-align: right;}
.concert .cont-wrap .swiper-slide a:hover .hover {bottom: 0;}
.concert .cont-wrap .swiper-paging {position: absolute; right: 0; top: -25px;}
.concert .cont-wrap .swiper-paging > div {position: relative; bottom: unset; font-size: 1.8rem; color: #aaa;}
.concert .cont-wrap .swiper-paging .swiper-pagination-current {font-weight: 700; font-size: 2rem; color: var(--main);}
.concert .cont-wrap .swiper-paging .swiper-pagination-lock {display: block;}

.loading-wrap {position: absolute; left: 50%; top: 0; z-index: 10; width: calc(100% + 40px); height: 100%; padding-top: 250px; background-color: rgba(255,255,255,0.9); backdrop-filter: blur(2px); transform: translateX(-50%);}
.loading-wrap .img-wrap {position: absolute; left: 50%; top: 50%; width: 100px; margin: 0 auto; transform: translate(-50%, -50%);}

@media only screen and (max-width: 767px) {
	.concert .cont-wrap .swiper-paging {position: relative; top: 0; margin-top: 10px;}
}

/********************* sec02 & sub03 ************************/
.notice .inner {display: flex; gap: 30px;}

/********************* sec02 ************************/
.recruit .tit-btn {display: flex; justify-content: space-between; width: 100%; margin-top: 40px;}
.recruit .tab {display: flex; gap: 20px; font-size: 2rem; color: #aaa;}
.recruit .tab .active {font-weight: 700; color: var(--main);}
.recruit .cur-list {display: flex; gap: 10px; width: 550px;}
.recruit .cur-list li {flex: 1;}
.recruit .cur-list li a {display: flex; flex-flow: column wrap; justify-content: space-between; height: 220px; padding: 20px; border-radius: 10px; background-color: var(--gray-f8);}
.recruit .cur-list li p {margin-top: 20px; line-height: 1.4; font-size: 2rem;}
.recruit .no-data {width: 550px;}

/********************* sec03 ************************/
/* .notice .sec-tit {position: relative;} */
/* .notice .sec-tit::before {content: ""; position: absolute; top: 20px; left: -74px; width: 230px; height: 28px; background: url(../img/main/notice-bg.svg) no-repeat center center / contain;} */
/* .notice-list .lf {flex-shrink: 0;} */
.notice-list {width: 100%;}
.notice-list .rg {width: 100%; border-top: 2px solid var(--dark-main);}
.notice-list .rg li {border-bottom: 1px solid var(--gray-e5);}
.notice-list .rg li a {display: flex; align-items: center; gap: 30px; width: 100%; height: 100%; padding: 31px 20px;}
.notice-list .rg li span {font-size: 15px; color: #888;}
.notice-list .rg li span em {display: block; margin-top: 5px; font-weight: 600; font-size: 2.5rem;}
.notice-list .rg li p {font-size: 2rem;}
.notice-list .rg li a:hover p {text-decoration: underline;}


/********************* sec04 & 05 ************************/
.info .inner {display: flex; gap: 30px;}

/********************* sec04 ************************/
.count {flex-shrink: 0; display: flex; gap: 40px; width: 550px; padding: 30px; color: #fff; background: linear-gradient(90deg, #1A3AC5 0%, #AB81E4 100%); border-radius: 10px;}
/* .count .inner {display: flex; align-items: center; gap: 40px;} */
.count .lf {flex-shrink: 0; margin-top: 10px;}
.count .lf strong {display: block; margin-bottom: 12px; font-weight: 600; font-size: 3.2rem;}
.count .lf span {font-size: 15px; color: rgba(255, 255, 255, 0.8);}
.count .lf p {font-size: 15px; color: rgba(255, 255, 255, 0.8);}
.count .rg {width: 100%;}
.count .rg li {height: calc(100% / 4); padding: 20px 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.6);}
.count .rg li:last-child {border-bottom: none;}
.count .rg li p {display: flex; align-items: center; gap: 6px; font-size: 1.7rem;}
.count .rg li i {width: 20px; height: 20px;}
.count .rg .count1 i {background-image: url(../img/main/count-icn1.svg);}
.count .rg .count2 i {background-image: url(../img/main/count-icn2.svg);}
.count .rg .count3 i {background-image: url(../img/main/count-icn3.svg);}
.count .rg .count4 i {background-image: url(../img/main/count-icn4.svg);}
.count .rg li span {display: block; margin-top: 5px; text-align: right;}
.count .rg li span b {margin-right: 5px; font-weight: 500; font-size: 2.6rem;}

/********************* sec05 ************************/
.db-list {display: flex; flex-wrap: wrap; gap: 20px;}
.db-list li {flex: 1 1 calc(33.3% - 20px); display: flex; flex-flow: column wrap; justify-content: space-between; height: 133px; padding: 15px; border: 1px solid var(--light-sub); border-radius: 10px; color: #333; transition: all .3s; background-position: left 15px bottom 12px; background-size: 50px; background-repeat: no-repeat; box-shadow: 0px 2px 6px 0px rgba(84, 127, 209, 0.12);}
.db-list .db1 {background-image: url(../img/main/db1.svg); background-size: 58px;}
.db-list .db2 {background-image: url(../img/main/db2.svg);}
.db-list .db3 {background-image: url(../img/main/db3.svg);}
.db-list .db4 {background-image: url(../img/main/db4.svg);}
.db-list .db5 {background-image: url(../img/main/db5.svg);}
.db-list .db6 {background-image: url(../img/main/db6.svg);}
.db-list li p {font-size: 2rem;}
.db-list li span {display: block; text-align: end; font-size: 2rem;}
.db-list li span b {margin-right: 6px; font-weight: 600; font-size: 3.8rem;}

.db-list li:hover {border: 1px solid var(--sub); color: #fff; background-color: var(--sub); box-shadow: none;}

/********************* quick-link ************************/
.quick-link {position: fixed; right: 40px; top: 50%; z-index: 100; transform: translateY(-50%);}
.quick-link li + li {margin-top: 20px;}
.quick-link li a {display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; margin-left: auto; border: 1px solid var(--main); border-radius: 50px; color: #fff; background-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(10px); transition: all 0.3s;}
.quick-link li:first-child i {width: 37px; height: 10px; background-image: url(../img/main/quick1.svg);}
.quick-link li:nth-child(2) i {width: 32px; height: 16px; background-image: url(../img/main/quick2.svg);}
.quick-link li:nth-child(3) i {width: 38px; height: 18px; background-image: url(../img/main/quick3.svg);}
.quick-link li:nth-child(4) i {width: 20px; height: 24px; background-image: url(../img/main/quick4.svg);}
.quick-link li:last-child i {width: 22px; height: 22px; background-image: url(../img/main/quick5.svg);}
.quick-link li a span {display: none;}
.quick-link li a:hover { justify-content: flex-end; gap: 20px; width: fit-content; padding: 20px; border: 1px solid #fff; background: linear-gradient(112deg, #1A3AC5 21.43%, #AB81E4 78.57%);}
.quick-link li a:hover span {display: block;}
.quick-link li a:hover i { filter: brightness(100);}

@media only screen and (max-width: 1400px) {
    .quick-link {display: none;}
}
@media only screen and (max-width: 1200px) {
	.info .inner {flex-flow: column wrap; gap: 80px;}
    .info .rg {width: 100%; height: fit-content;}

	.count {width: 100%;}
	.count .rg {display: flex; flex-wrap: wrap;}
	.count .rg li {width: 50%;}
	.count .rg li:last-child {border-bottom: 1px solid rgba(255, 255, 255, 0.6);}
}
@media only screen and (max-width: 1180px) {
	.notice .inner {flex-flow: column wrap; gap: 80px;}
	.recruit .cur-list {width: 100%;}
	.recruit .no-data {width: 100%;}
}
@media only screen and (max-width: 1023px) {
    .concert .top {margin: 0 auto 30px;}
    .concert .tab-wrap {margin-bottom: 15px;}

    .notice .inner {flex-flow: column wrap;}
    .notice .lf {display: flex; align-items: flex-end; gap: 20px;}
    .notice .lf strong {flex-shrink: 0;}
    .notice .lf p {margin: 0; margin-right: auto; line-height: inherit;}
    .notice .lf p br {display: none;}

    .info .cur-list li a {height: 190px;}
}
@media only screen and (max-width: 767px) {
    .notice .lf {flex-wrap: wrap; justify-content: space-between;}
    .notice .lf p {order: 2; width: 100%; line-height: 1.2; word-wrap: break-word; word-break: keep-all;}
    .notice .rg li {width: 100%;}

    .count {flex-flow: column wrap;}

    .db-list li {flex: 1 1 calc(50% - 10px);}
}
@media only screen and (max-width: 670px) {
    .concert .tab-wrap {flex-flow: column wrap;}
    .concert .tab-wrap .lf {font-size: 2.2rem;}
    .concert .tab-wrap .tab.active {flex-wrap: wrap; justify-content: center;}
}
@media only screen and (max-width: 600px) {
	.recruit .cur-list {flex-flow: column wrap;}
	.recruit .cur-list li a {height: auto; gap: 20px;}
	.recruit .cur-list li p {margin-top: 10px;}
}
@media only screen and (max-width: 520px) {
    .concert .top {width: 100%;}
    .concert .search-box {width: 100%;}

	.count .rg li {width: 100%;}

    .db-list li {flex: 1 1 100%;}
}