@charset "utf-8";

/* 메인 공통 */
main .content {padding-top: 0; padding-bottom: 0;}
.section {padding: 8rem 0;}
.sc_title {margin-bottom: 3.5rem; font-size: 3.5rem; font-weight: 600; color: #282828; font-family: 'RiaSans';}

/* 슬라이드 */
main .slide_controls {position: absolute; right: 7.5rem; top: 0.3rem;}

/* 게시판 */
main .info .title {margin-top: 2rem; margin-bottom: 1.5rem; color: #111; font-size: 2rem; font-weight: 600;}
main .info .title.elps2 {height: 5.6rem;}
main .info .desc {margin-bottom: 2rem; color: #333; font-weight: 500;}
main .info .desc.elps2 {height: 4.8rem;}
main .info .progress {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;}
main .info dl {display: flex; flex-wrap: wrap; font-size: 1.6rem;}
main .info dl dt {margin-right: 0.5rem; font-weight: 600;}
main .info dl dd {color: #777; font-weight: 500;}
main .meta_list {display: flex; align-items: center; flex-wrap: wrap; gap: 2rem; padding: 0 2rem 3rem; color: #555; font-size: 1.5rem; font-weight: 500;}
main .meta_list .ico {display: inline-block; padding-left: 2.5rem; background-position: left center; background-repeat: no-repeat;}
main .meta_list .date {padding-left: 0;}
main .meta_list .view {background-image: url("../images/icon/ico_view.png"); background-size: 2.2rem;}
main .meta_list .scrap {background-image: url("../images/icon/ico_bookmark.png"); background-size: 1.7rem;}
main .meta_list .share {width: 2rem; height: 2rem; padding-left: 0; background-image: url("../images/icon/ico_share.png"); background-position: center; background-repeat: no-repeat; background-size: 1.8rem;}
main .meta_list li {position: relative; display: flex; align-items: center; gap: 0.4rem;}
main .meta_list li::before {position: absolute; right: -1rem; top: 0.4rem; width: 1px; height: 1.5rem; background-color: #ddd; content: '';}
main .meta_list li:last-child::before {display: none;}

main .board_slider::before {content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 74%; background: #000; opacity: 0.11; filter: blur(40px);}
main .board_list .swiper-slide {background-color: #fff; border: 2px solid #fff; border-radius: var(--border-radius-base); overflow: hidden;}
main .board_list .swiper-slide > a {display: block; width: 100%; height: 100%;}
main .board_list .thumb {position: relative; width: 100%; height: 0; padding-top: 60.234%; background-color: #f7f7f7; overflow: hidden;}
main .board_list .thumb img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
main .board_list .info {padding: 2.5rem 2rem;}
main .board_list .scrap_btn {position: absolute; top: 2.5rem; right: 2.5rem; font-size: 1.5rem; font-weight: 500; color: #555;}

/* 게시판 type-card */
main .board_list.type-card .swiper-slide {border: 0;}
main .board_list.type-card .scrap_btn {top: auto; bottom: 24rem;}

/* 더보기 버튼 */
main .more_plus {position: absolute; right: 2rem; top: 0.3rem; width: 4.5rem; height: 4.5rem; background-color: #1b224e; border-radius: 50%; background-image: url("../images/icon/ico_plus.svg"); background-position: center; background-repeat: no-repeat;}

/* 메인 비주얼 */
.sc_visual {position: relative; padding: 0;}
.sc_visual .swiper-slide > a {position: relative; display: block; width: 100%; height: 0; padding-top: 36.221%; background-color: #f7f7f7;}
.sc_visual .swiper-slide > a > img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.sc_visual .txt {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 4rem); color: #fff; text-align: center; font-family: 'RiaSans';}
.sc_visual .txt .title {margin-bottom: 2.5rem;}
.sc_visual .txt .title em {display: block; font-size: 4.3rem; font-weight: 600; line-height: 1.2; background: linear-gradient(90deg, #fcc0fc, #9cf8ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;}
.sc_visual .txt .title strong {display: block; font-size: 6rem; font-weight: 600; line-height: 1.2;}
.sc_visual .txt .desc {font-size: 2.4rem;}
.sc_visual .slide_controls {position: absolute; right: 0; top: auto; bottom: 3rem; max-width: 1600px; margin: 0 auto; padding: 0 2rem; display: flex; gap: 0.5rem; flex-wrap: wrap; z-index: 1;}
.sc_visual .slide_controls .swiper-pagination {background-color: rgba(45, 45, 45, 0.5); border-radius: 5rem; color: #fff; font-size: 1.9rem; font-weight: 400;}
.sc_visual .slide_controls .swiper-pagination-current {color: #40d7ba;}
.sc_visual .slide_btn {background-color: rgba(45, 45, 45, 0.5);}
.sc_visual .slide_btn img {filter: brightness(0) invert(1);}

/* 주요 서비스 */ 
.sc_service {position: relative; background-color: #f7f8fd; overflow: hidden;}
.sc_service::before {position: absolute; right: 0; bottom: -35rem; width: 60rem; height: 60rem; background: url("../images/main/service_bg.png") no-repeat; content: '';}
.sc_service .service_slider {position: relative; padding: 0 2rem;}
.sc_service .service_slider::before {content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80%; background: #000; opacity: 0.11; filter: blur(40px);}
.sc_service .swiper-slide > a {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; width: 100%; height: 17rem; padding: 1rem; text-align: center; background-color: #fff; border-radius: 3rem; /*box-shadow: 5px 5px 10px rgba(66, 69, 82, 0.2);*/}
.sc_service .menu {display: block; color: #282828; font-size: 1.9rem; font-weight: 500;}
.sc_service .slide_nav {width: 100%;}
.sc_service .slide_nav .slide_btn {position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem;}
.sc_service .slide_nav .slide_btn img {width: 1.2rem;}
.sc_service .slide_nav .prev {left: -2rem;}
.sc_service .slide_nav .next {right: -2rem;}

/* 스튜디오 예약 */
.sc_studio {position: relative; overflow: hidden;} 
.sc_studio::before {position: absolute; left: 0; top: 0; width: 60rem; height: 100%; background: #f7f8fd url("../images/main/studio_bg.png") top no-repeat; border-radius: 0 0 14rem 0; content: ''; z-index: -1;}
.sc_studio .title_group::before {content: ''; position: absolute; left: 60rem; top: 0; width: 100px; height: 100px; background-color: #f7f8fd; z-index: -1;}
.sc_studio .title_group::after {content: ''; position: absolute; left: 60rem; top: 0; width: 100px; height: 100px; background-color: #fff; border-radius: 100% 0 0 0; z-index: -1;} 
.sc_studio .inner {display: flex; align-items: flex-start; flex-wrap: wrap;}
.sc_studio .title_group {width: 31.6rem; padding-bottom: 8rem; background: url("../images/main/studio_mic.png") bottom right 5rem no-repeat; background-size: 6.8rem;}
.sc_studio .title_group strong {display: block; margin-bottom: 1rem; color: #4850a7; font-size: 2.5rem; line-height: 1.2;}
.sc_studio .title_group .desc {display: block; color: #333; font-size: 1.8rem; font-weight: 500; letter-spacing: -0.1rem; line-height: 1.2; font-family: 'RiaSans';}
.sc_studio .studio_slider {position: relative; width: calc(100% - 31.6rem);}
.sc_studio .studio_slider .swiper-slide a {display: block; width: 100%; height: 100%;}
.sc_studio .slide_controls {position: initial;}
.sc_studio .slide_controls .slide_btn {position: absolute; top: 8rem; box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);}
.sc_studio .slide_controls .prev {left: -2rem;}
.sc_studio .slide_controls .next {right: -2rem;}
.sc_studio .slide_controls .swiper-pagination {position: absolute; bottom: -8rem; left: 50%; transform: translateX(-50%);}
.sc_studio .thumb {position: relative; width: 100%; height: 0; padding-top: 68.97%; border-radius: var(--border-radius-base); background-color: #f7f7f7; overflow: hidden;}
.sc_studio .thumb img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.sc_studio .info .title {margin-bottom: 1rem;}
.sc_studio .info .desc {margin-bottom: 1.2rem;}
.sc_studio .info dl dd {color: #333;}
.sc_studio .more_view {width: 14rem; height: 4.5rem; line-height: 4.5rem; margin-top: 2.5rem; background: linear-gradient(to right, #a2439a 35%, #574db1); color: #fff; text-align: center; border-radius: 5rem; font-size: 1.8rem; font-weight: 500;}
.sc_studio .more_view span {position: relative; display: inline-block; padding-right: 1.6rem;}
.sc_studio .more_view span::after {position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1rem; height: 1.5rem; background-image: url("../images/icon/arr_right_wh.svg"); background-size: 0.8rem; background-repeat: no-repeat; content: '';}

/* 교육정보 */
.sc_edu {background-image: url("../images/main/edu_bg.png"); background-size: cover; background-position: center; background-repeat: no-repeat;}

/* 채용정보 */
.sc_job {background-color: #f7f8fd;}

/* 입주사 소개 */
.sc_company {position: relative; padding-bottom: 15rem; background-color: #5c4ea6;}
.sc_company .sc_title {color: #fff;}
.sc_company .item_list .swiper-slide > a {display: block; width: 100%; height: 100%; padding: 2rem; background-color: #fff; border-radius: var(--border-radius-base); overflow: hidden;}
.sc_company .item_list .thumb {position: relative; width: 100%; height: 0; padding-top: 59.954%; background-color: #f7f7f7; border-radius: var(--border-radius-base); overflow: hidden;}
.sc_company .item_list .thumb img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 75%; max-height: 75%;}
.sc_company .item_list .info {margin: 1.5rem 0; padding: 0;}
.sc_company .item_list .like_btn {position: absolute; right: 2.5rem; bottom: 16.5rem; font-size: 1.5rem; font-weight: 500; color: #555;}
.sc_company .item_list .title {margin-top: 1.2rem; margin-bottom: 1rem; color: #111; font-size: 2rem; font-weight: 600;}
.sc_company .item_list .desc {color: #333; font-weight: 500;}
.sc_company .item_list .desc.elps3 {height: 7rem;}
.sc_company .flowAnimation {position: absolute; left: 0; bottom: -4rem; display: flex; width: 100%; overflow: hidden;}
.sc_company .flowAnimation img {flex-shrink: 0; animation: flowAnimation 50s linear infinite;}

@keyframes flowAnimation {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* *************************************************************************************
*
* 반응형
* 
* **************************************************************************************/

/* Only PC */
@media all and (min-width:1400px){
    .board_slider .slide_controls {display: none;}
    main .board_list {display: flex; gap: 3.3rem; flex-wrap: wrap;}
    main .board_list .swiper-slide {position: relative; width: calc(100% / 4 - 2.475rem);}
    main .board_list .swiper-slide:nth-child(n + 5) {display: none;}

    /* hover */
    main .board_slider .swiper-slide > a:hover .thumb img {transform: scale(1.1); opacity: 0.6; transition: all 0.5s ease-in-out;}
    main .slide_controls .slide_btn:hover {background-color: #1B224E; transition: all 0.3s ease-in-out;}
    main .slide_controls .slide_btn:hover img {filter: brightness(0) invert(1); transition: all 0.3s ease-in-out;}
    .sc_studio .swiper-slide a:hover .thumb img {transform: scale(1.1); transition: all 0.5s ease-in-out;}
    .sc_service .swiper-slide > a:hover img {transform: rotateX(0) rotateY(360deg); transition: all 1.2s ease;}
    .sc_gov .swiper-slide:hover {background: radial-gradient(circle, #eff7fc 0%, #fff 70%); border-color: #1987db; transition: all 0.5s ease-in-out;}
    .sc_job .swiper-slide:hover {background: radial-gradient(circle, #e2eeea 0%, #fff 70%); border-color: #004a25; transition: all 0.5s ease-in-out;}
}

/* Laptop ~ */
@media all and (max-width:1280px){
    .sc_visual .txt .title em {font-size: 3.2vw;}
    .sc_visual .txt .title strong {font-size: 4.5vw;}
    .sc_visual .txt .desc {font-size: 2vw;}
}

/* Tablet */ 
@media all and (max-width:1024px){
    /* 메인 공통 */
    main .board_list .info {padding: 1.8rem;}
    main .board_list .swiper-slide:nth-child(n + 5) {display: block;}
    main .board_list .scrap_btn {top: 2.2rem;}
    main .board_list.type-card .scrap_btn {bottom: 24rem;}
    main .meta_list {padding: 1.8rem;}
    main .meta_list li::before {top: 0.3rem;}
    main .meta_list span {font-size: 1.4rem;}

    /* 주요 서비스 */
    .sc_service .swiper-slide img {width: 10rem;}
    .sc_service .menu {font-size: 1.7rem;}
}

/* Mobile */
@media all and (max-width:780px){
    /* 메인 공통 */
    .section:not(.sc_visual) {padding: 5rem 0;}
    .sc_title {margin-bottom: 2.8rem; font-size: 2.8rem;}
    main .more_plus {width: 3.5rem; height: 3.5rem;}

    /* 메인 비주얼 */
    .sc_visual {padding: 0;}

    /* 주요 서비스 */
    .sc_service .slide_nav .prev {left: -1.5rem;}
    .sc_service .slide_nav .next {right: -1.5rem;}
    
    /* 스튜디오 예약 */
    .sc_studio::before {width: 40rem; height: 50%;}
    .sc_studio .inner {padding: 0;}
    .sc_studio .title_group {padding: 0 20px;}
    .sc_studio .title_group::before {left: 40rem;}
    .sc_studio .title_group::after {left: 40rem;}
    .sc_studio .title_group {width: 100%; padding-bottom: 0; background-position: top right 3rem; background-size: 4.5rem;}
    .sc_studio .title_group strong {font-size: 1.9rem;}
    .sc_studio .title_group .desc {font-size: 1.5rem;}
    .sc_studio .title_group br {display: none;}
    .sc_studio .studio_slider {width: 100%; padding: 3rem 0 8rem 20px;}
    .sc_studio .more_view {width: 10rem; height: 3.5rem; line-height: 3.5rem; font-size: 1.5rem;}
    .sc_studio .slide_controls {position: absolute; top: auto; right: auto; left: 50%; bottom: 0; transform: translateX(-50%);}
    .sc_studio .slide_controls .swiper-pagination {position: initial; transform: none; box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);}
    .sc_studio .slide_controls .slide_btn {position: initial;}
}

@media all and (max-width:480px){
    /* 게시판 */
    .board_slider, .company_slider {padding-bottom: 6.5rem;}
    .board_slider .slide_controls, .company_slider .slide_controls {top: auto; right: auto; left: 50%; bottom: 0; transform: translateX(-50%);}

    /* 메인 비주얼 */
    .sc_visual .swiper-slide > a {padding-top: 66.667%;}
    .sc_visual .txt .title em {font-size: 4vw;}
    .sc_visual .txt .title strong {font-size: 5.5vw;}
    .sc_visual .txt .desc {font-size: 2.8vw;} 
    .sc_visual .slide_controls {right: auto; left: 50%; transform: translateX(-50%);}

    /* 스튜디오 예약 */
    .sc_studio::before {width: 30rem;}
    .sc_studio .title_group::before {left: 30rem;}
    .sc_studio .title_group::after {left: 30rem;}
}