body {
    background-color: #FFF0E5;
}
body.active {
    overflow-y: hidden;
}
body.active::after {
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    z-index: 99;
}
* {
    font-weight: normal;
    letter-spacing: -0.01em;
}
.title {
    font-size: 40rem;
    margin-bottom: 40rem;
    font-family: "04HanwhaGothicB";
}

.title-wrap {
    margin-bottom: 48rem;
}
.title-wrap p {
    line-height: 1.5;
    font-size: 24rem;
}
.title-box {
    gap: 24rem;
    margin-bottom: 24rem;
}
.title-box .title {
    margin-bottom: 0;
}
.text-list li {
    color: #fff;
    line-height: 1.7;
    font-family: "06HanwhaGothicL";
    font-size: 20rem;
    margin-left: 20rem;
}
.text-list li::before{
    content: "•";
    position: relative;
    left: -5rem;
    margin-left: -16rem;
}
.text-list li span {
    color: #fff;
    line-height: 1.7;
    font-family: "03HanwhaL";
    font-size: 20rem;
}

.floating-box {
    z-index: 10;
    bottom: 68rem;
    right: 10%;
    display: none;
    visibility: 0;
    opacity: 0;
    transition: .3s;
}
.floating-box.active {
    display: flex;
    visibility: 1;
    opacity: 1;
}
.floating-box > a {
    text-align: center;
    color: #F37320;
    background-color: #FFF0E5;
    border-radius: 20rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60rem;
    width: 255rem;
    font-size: 24rem;
    border: 2rem solid #F37320;
}
.floating-box > a:hover {
    background-color: #F37320;
    color: #fff;
    border: 2rem solid #fff
}
.floting-m {
    margin-left: auto;
}
.floting-m a {
    width: 80rem;
}
/* .floting-m.active .open-btn {
    transform: rotate(45deg);
}
.floting-m.active .open-box {
    display: flex;
} */

@media (max-width: 1200px) {
    .title {
        font-size: 34rem;
        margin-bottom: 30rem;
    }
    
    .title-wrap {
        margin-bottom: 40rem;
    }
    .floating-box {
        right: 40rem;
    }
    .floating-box > a {
        display: none;
    }
    .floting-m.active {
        display: flex;
    }
}
@media (max-width: 767px) {
    .title {
        font-size: 28rem;
        margin-bottom: 20rem;
    }
    
    .title-wrap {
        margin-bottom: 32rem;
    }
    .floating-box {
        right: 20rem;
    }
}

.tag-box {
    gap: 8rem;
}
.tag-box .title-tag {
    font-family: "04HanwhaGothicB";
    font-size: 24rem;
    padding: 10rem 14rem;
    border-radius: 15rem;
}

/* modal */
.modal-area {
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 130rem 40rem 40rem;
    z-index: 100;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: none;
}
.modal-area.active {
    display: block;
}
.modal-area .close-btn {
    top: 40rem;
    right: 40rem;
    width: 40rem;
    height: 40rem;
    z-index: 5;
}
/* .modal-area .con {
    z-index: 2;
}
.modal-area .modal-title {
    font-size: 32rem;
    line-height: 1.2;
    margin-bottom: 40rem;
    letter-spacing: -0.03rem;
}
.modal-area .text-box {
    gap: 24rem;
}
.modal-area .text-box .box h2 {
    display: inline-flex;
    font-size: 22rem;
}
.modal-area .text-box .box h2::after {
    content: '';
    position: absolute;
    background: url(../img/ico_rest.svg)no-repeat center/cover;
    width: 14rem;
    height: 18rem;
    top: 0;
    right: -18rem;
}
.modal-area .text-box .box ul li {
    line-height: 2;
    color: #444;
    font-size: 15rem;
}
.modal-area .modal-text {
    max-width: 35vh;
    bottom: 0;
}
.modal-area ul li br {
    display: none;
}
.modal-area .modal-kv-img {
    max-width: 65vh;
    bottom: -3%;
    right: -22%;
}
.modal-logo {
    width: 151rem;
    top: 40rem;
    left: 40rem;
} */

/* @media (max-width: 1320px) {
    .modal-logo {
        width: 111rem;
        top: 20rem;
        left: 35rem;
    }
    .modal-area {
        padding-top: 80rem;
    }
    .modal-area .close-btn {
        width: 28rem;
        height: 28rem;
        top: 20rem;
        right: 20rem;
    }
    .modal-area .modal-title {
        font-size: 22rem;
        margin-bottom: 28rem;
    }
    .modal-area .text-box {
        gap: 24rem;
    }
    .modal-area .text-box .box h2 {
        font-size: 17rem;
        margin-bottom: 8rem;
    }
    .modal-area .text-box .box h2::after {
        width: 6rem;
        height: 8rem;
        right: -8rem;
    }
    .modal-area .text-box .box ul li {
        font-size: 14rem;
    }
    .modal-area .modal-text {
        position: absolute;
        top: auto;
        bottom: 0;
        left: 0;
        max-width: 28vh;
    }
    .modal-area ul li br {
        display: block;
    }
    .modal-area .modal-kv-img {
        right: -22%;
    }
} */

@media (max-width: 767px) {
    .modal-area {
        height: 100vh;
        top: 0;
        left: 0;
        transform: translate(0, 0);
        padding: 80rem 20rem 20rem;
    }
    .modal-area .text-box .box ul li {
        line-height: 1.6;
    }
    .modal-logo {
        width: 91rem;
        top: 20rem;
        left: 20rem;
    }
    .modal-area .modal-kv-img {
        right: -30%;
    }


}



/* ------------------------------------------------------------------------------- */

/* 모달 영역-2 */
.modal-area-2 {
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 130rem 40rem 40rem;
    background: rgb(0, 0, 0, 0.8);
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: none;
    z-index: 100;

}
.modal-area-2.active {
    display: block;
}
.modal-area-2 .modal {
    display: none;
}
.modal-area-2 .modal.active {
    display: block;
}
.modal-area-2 .close-btn {
    width: 52rem;
    position: absolute;
    top: 40rem;
    right: 40rem;
}
.modal-area-2 .close-btn:hover > img {
    content: url(../img/ico_close.svg);
}

/* 영상 모달 */
.video-modal {
    width: 900rem;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.video-modal h1 {
    margin-top: 60rem;
    color: #fff;
    font-size: 32rem;
    text-align: center;
    word-break: keep-all;
}
.video-modal .youtube-box {
    margin-top: 28rem;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    position: relative;
    /* 21:9 */
    /* padding-bottom: 42.8571%; */
    /* 16:9 */
    padding-bottom: 56.25%;
    /* 4:3 */
    /* padding-bottom: 75%; */
}
.video-modal .youtube-box iframe {
    z-index: 1;
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

@media (max-width:1320px) {
    .modal-area-2 .x-btn {
        /* width: 52rem; */
        top: auto;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        bottom: 116rem;
    }
    .video-modal {
        width: 580rem;
    }
    .video-modal h1 {
        font-size: 24rem;
    }
    .video-modal .youtube-box {
        margin-top: 20rem;
    }
    .modal-area-2 .close-btn {
        width: 48rem;
    }
}

@media (max-width:768px) {
    .modal-area-2 {
        padding: 40rem;
    }
    .modal-area-2 .x-btn {
        bottom: 68rem;
    }
    .video-modal {
        width: calc(100% - 40px);
    }
    .video-modal h1 {
        font-size: 12rem;
    }
    .video-modal .youtube-box {
        margin-top: 18rem;
    }
    .modal-area-2 .close-btn {
        width: 32rem;
        top: 32rem;
        right: 32rem;
    }
}

@media (max-width:590px) {
    .modal-area-2 {
        padding: 20rem;
    }
    .modal-area-2 .close-btn {
        width: 24rem;
        top: 20rem;
        right: 20rem;
    }
}

/* 모달 영역 3 */
.modal-area-3 {
    align-items: center;
    justify-content: center;
    padding: 40rem;
}
.modal-area-3.active {
    display: flex;
}
.modal-area-3 .swiper-modal {
    overflow: hidden;
    max-width: 800rem;
    padding-bottom: 20rem;
    display: none;
}
.modal-area-3 .swiper-modal.active {
    display: block;
}
.modal-area-3 .swiper-wrapper {
    height: 80vh;
    z-index: 2;
}
.modal-area-3 .swiper-slide {
    background-color: #fff;
    border-radius: 15rem;
    overflow: hidden;
}
.modal-area-3 .swiper-pagination {
    top: 20rem;
}
.modal-area-3 .modal-title {
    background-color: #F37320;
    padding: 24rem 44rem 24rem 52rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-area-3 .modal-title .close-btn {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 24rem;
}
.modal-area-3 .modal-title p {
    color: #fff;
    font-family: "04HanwhaGothicB";
    font-size: 30rem;
}
.modal-area-3 .modal-cont {
    padding: 38rem 52rem 56rem 52rem;
    overflow-x: hidden;
    overflow-y: auto;
    height: calc(80vh - 56px);
    position: relative;
}
.modal-area-3 .modal-cont::-webkit-scrollbar {
    width: 8rem;
    background-color: transparent;
}
.modal-area-3 .modal-cont::-webkit-scrollbar-thumb {
    width: 100%;
    background-color: #ccc;
}
.modal-area-3 .modal-cont > img {
    right: -100rem;
    bottom: -200rem;
    width: 514rem;
}
.modal-area-3 .modal-cont h1 {
    font-family: "04HanwhaGothicB";
    font-size: 30rem;
    line-height: 1.4;
    color: #F37320;
}
.modal-area-3 .modal-cont h2 {
    font-family: "04HanwhaGothicB";
    font-size: 28rem;
    line-height: 1.4;
}
.modal-area-3 .modal-cont .text-box {
    display: flex;
    flex-direction: column;
    gap: 10rem;
    padding: 30rem 0;
}
.modal-area-3 .modal-cont .text-box:not(:last-child) {
    border-bottom: 1rem solid #F37320;
}
.modal-area-3 .modal-cont p,
.modal-area-3 .modal-cont .text-list li {
    color: rgba(0, 0, 0, 0.8);
    line-height: 1.4;
    word-break: keep-all;
    font-size: 22rem;
}
.modal-area-3 .btn-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    max-width: 920rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.modal-area-3 .swiper-button-prev,
.modal-area-3 .swiper-button-next {
    width: 40rem !important;
    height: 40rem !important;
    position: relative;
}
.modal-area-3 .swiper-button-prev {
    left: 0px !important;
}
.modal-area-3 .swiper-button-next {
    right: 0px !important;
}

/* 반응형 */
@media (max-width: 1200px) {

    .modal-area-3 .swiper-button-prev, .modal-area-3 .swiper-button-next {
        width: 28rem !important;
        height: 28rem !important;
    }
    .modal-area-3 .modal-title {
       
        padding: 20rem 32rem;
    }
    .modal-area-3 .modal-title p {
        font-size: 20rem;
    }
    .modal-area-3 .modal-title .close-btn {
        width: 20rem;
        height: 20rem;
    }
    .modal-area-3 .modal-cont {
        padding: 24rem 30rem 30rem;
    }
    .modal-area-3 .modal-cont h1 {
        line-height: 1.6;
        font-size: 24rem;
    }
    .modal-area-3 .modal-cont .text-box:not(:last-child) {
        padding: 20rem 0;
    }
    .modal-area-3 .modal-cont h2 {
        font-size: 19rem;
    }
    .modal-area-3 .modal-cont p, .modal-area-3 .modal-cont .text-list li {
        font-size: 15rem;
    }
    .modal-area-3 .modal-cont > img {
        width: 350rem;
        right: -70rem;
        bottom: -136rem;
    }

}
@media (max-width: 767px) {
    .modal-area-3 {
        padding: 0 20rem;
    }
    .modal-area-3 .modal-title {
        padding: 20rem 18rem 20rem 20rem;
    }
    .modal-area-3 .modal-cont {
        padding: 24rem 20rem;
    }
    .modal-area-3 .modal-cont h1 {
        font-size: 20rem;
    }
    .modal-area-3 .modal-cont .text-box {
        gap: 8rem;
    }
    .modal-area-3 .btn-box {
        z-index: 2;
    }
    .modal-area-3 .swiper-button-next {
        right: 5rem !important;
    }
    .modal-area-3 .swiper-button-prev {
        left: 5rem !important;
    }
    .modal-area-3 .modal-cont > img {
        width: 200rem;
        right: -38rem;
        bottom: -60rem;
    }

}


/********** ↓ header ↓ **********/

header {
    width: 100%;
    height: 88rem;
    position: fixed;
    z-index: 10;
    transition: .3s;
}

header .header-wrap {
    height: 100%;
}
header .header-wrap .logo {
    width: 110rem;
}
header ul li a {
    font-size: 18rem;
    color: #fff;
    font-family: "05HanwhaGothicR";

}
header ul li a span {
    color: #fff;
}
header ul li:last-child a {
    border: 1rem solid #fff;
    padding: 8rem 28rem;
}
header ul li:last-child a:hover {
    transition: all 0.3s ease;
    color: #F37320;
    border-color: #F37320;
}
header ul li a.active {
    font-family: "04HanwhaGothicB";
    color: #F37320;
}

header.active {
    background: #fff;
    /* background-color: rgba(92, 52, 104, 0.5);
    backdrop-filter: blur(20px); */
}
header.active ul li a {
    color: #000;
}
header.active ul li a span{
    color: #000;
}
header.active ul li a.active {
    color: #F37320;
}
header.active ul li:last-child a {
    border: 1rem solid #000;
}
header.active ul li:last-child a:hover{
    border: 1rem solid #F37320;;
}
header.active .header-wrap .logo img {
    content: url(../img/logo-bk.svg);
}

/* side-menu */
.side-menu {
    left: 100%;
}
.side-menu .header,
.side-menu .middle-box {
display: none;
}

@media (max-width: 1200px) {
    header {
        height: 56rem;
    }
    header .header-wrap a {
        font-size: 18rem;
    }
    header .header-wrap .logo,
    .side-menu .logo {
        width: 86rem;
    }
    header .header-wrap ul {
        display: none;
    }
    .menu-btn {
        background: url(../img/menu.svg)no-repeat center/cover;
        width: 28rem;
        height: 28rem;
        display: block;
        cursor: pointer;
    }
    header.active .menu-btn {
        background: url(../img/menu-bk.svg)no-repeat center/cover;
        width: 28rem;
        height: 28rem;
        display: block;
        cursor: pointer;
    }
    .side-menu {
        z-index: 1000;
        top: 0;
        left: 100%;
        width: 100%;
        height: 100%;
        position: fixed;
        transition: all .3s;
      }
      .side-menu.active {
        left: 0;
      }
      .side-menu .header {
        position: relative;
        display: flex;
        height: 68rem;
      }
      .side-menu .middle-box {
        display: block;
        margin-top: 120rem;
      }
      .side-menu ul {
        gap: 30rem;
        align-items: flex-start;
        padding: 0 40rem;
      }
      .side-menu ul li a {
        font-size: 18rem;
        font-family: "05HanwhaGothicR";
        color: #fff;
      }
      .side-menu ul li:last-child a {
        border: 1rem solid #fff;
        padding: 8rem 28rem;
        display: block;
    }
    .side-menu ul li:last-child a:hover {
        color: #F37320;
        border-color: #F37320;
    }
      .side-menu ul li a.active {
        font-family: "04HanwhaGothicB";
        color: #F37320;
      }
      .menu-btn, .close-btn {
        width: 24rem;
        height: 24rem;
      }
}
@media (max-width: 767px) {



}


/********** ↓ sec-1 ↓ **********/

.sec-1 {
    height: 100vh;
    /* background: linear-gradient(#150E19, #4F009D); */
    background-color: #4E2965;
    color: #fff;
    overflow: hidden;
}
.sec-1 .con {
    height: 100%;
}
.sec-1 .main-text {
    position: relative;
    left: 0;
    top: calc(50% - 40px);
    transform: translateY(calc(-50% + 40px));
    z-index: 2;
}
.sec-1 .main-text p {
    margin-bottom: 30rem;
}
.sec-1 .main-text p,
.sec-1 .main-text p span {
    color: #fff;
    font-size: 40rem;
    line-height: 1.2;
}
.sec-1 .main-text .main-text-box {
    max-width: 535rem;
}
.sec-1 .main-text .main-text-box > span {
    color: rgba(255, 255, 255, 0.7);
    margin-top: 16rem;
    display: block;
    font-size: 26rem;
}
.sec-1 .main-text .kv-text-g {
    max-width: 470rem;
    margin-bottom: 7vh;
    margin-left: 10rem;
}
.sec-1 .apply {
    width: 220rem;
    height: 52rem;
    border-radius: 10rem;
    margin-top: 60rem;
}
.sec-1 .con > .apply {
    display: none;
}
.sec-1 .main-text .main-text-box a:hover {
    background-color: #D15403 !important;
}
.sec-1 .main-visual {
        right: -20%;
        bottom: -10%;
        transform: translateY(10%);
        width: 90vh;
}
.sec-1 .main-visual-floating {
    right: 40rem;
    bottom: 40rem;
    max-width: 160rem;
    z-index: 10;
}
.btn-box.floating-m {
    bottom: 0;
    z-index: 10;
    width: 100%;
}
.btn-box.floating-m a {
    width: 100%;
    height: 56rem;
}
.btn-box.floating-m .notice-apply {
    background-color: #F37320;
    color: #fff;
}
.btn-box.floating-m .job-info {
    background-color: #fff;
    color: #4F2A65;
}
.btn-box.floating-m a i {
    background: url(../img/ico_arrow-right-white.svg)no-repeat center/cover;
    width: 24rem;
    height: 24rem;
}
.btn-box.floating-m .job-info i {
    content: url(../img/ico_arrow-right-purple.svg);
}
/* .sec-1 .fire-1 {
    width: 700rem;
    left: -100rem;
    top: -200rem;
}
.sec-1 .fire-2 {
    width: 300rem;
    top: 350rem;
    left: 450rem;
}
.sec-1 .fire-3 {
    width: 300rem;
    top: 150rem;
    right: 100rem;
} */

/* 반응형 */
@media (max-width: 1200px) {

    .floating-m {
        display: flex;
    }
    .sec-1 .con > .apply {
        border-top: 1rem solid #F37320;
        display: flex;
    }
    .sec-1 .main-visual-floating {
        display: none;
    }
    .sec-1 .main-text p,
    .sec-1 .main-text p span {
        font-size: 24rem;
    }
    .sec-1 .main-text {
        left: 0;
        top: 140rem;
        transform: translateY(0);
    }
    .sec-1 .main-text .kv-text-g {
        max-width: 438rem;
        margin-top: 0;
        margin-bottom: 40rem;
    }
    .sec-1 .main-text p, .sec-1 .main-text p span {
        font-size: 36rem;
    }
    .sec-1 .main-text .main-text-box > span {
        font-size: 22rem;
    }
    .sec-1 .main-visual {
        width: 70vh;
        right: -250rem;
        bottom: 0;
    }
    .sec-1 .main-text .main-text-box {
        max-width: 450rem;
    }
    .sec-1 .main-text .main-text-box a {
        display: none;
    }
    .sec-1 .apply {
        position: fixed;
        z-index: 5;
        bottom: 0;
        left: 0;
        width: 100%;
        border-radius: 0;
        font-size: 17rem;
    }
}

@media (max-width: 767px) {

    .sec-1 .main-text {
        top: 80rem;
        transform: translateY(0);
    }
    .sec-1 .main-text p {
        margin-bottom: 18rem;
    }
    .sec-1 .main-text p,
    .sec-1 .main-text p span {
        font-size: 28rem;
        line-height: 1.3;
    }
    .sec-1 .main-text span {
        font-size: 17rem;
    }
    .sec-1 .main-text .kv-text-g {
        max-width: 240rem;
        margin-bottom: 30rem;
        margin-left: 0rem;
    }
    .sec-1 .main-text p br {
        display: block;
    }
    .sec-1 .main-text .main-text-box {
        max-width: 200rem;
    }
    .sec-1 .main-text .main-text-box img {
        content: url(../img/kv-text-g3-m.svg);
    }
    .sec-1 .main-text .main-text-box > span {
        font-size: 14rem;
        margin-top: 8rem;
        line-height: 1.4;
    }
    .sec-1 .main-text .main-text-box > span br {
        display: block;
    }
    .sec-1 .main-visual {
        max-width: 55vh;
        right: -140rem;
    }
}

/********** ↓ sec-2 ↓ **********/

.sec-2 {
    height: 100vh;
}
.sec-2 .con-2 > div {
    margin-top: 24rem;
    margin-bottom: 56rem;
    font-size: 40rem;
}
.sec-2 p {
    font-size: 26rem;
    line-height: 1.4;
    color: #fff;
}

/* 반응형 */
@media (max-width: 1200px) {

    .sec-2 .con-2 > img {
        width: 258rem;
    }
    .sec-2 .con-2 > div {
        font-size: 30rem;
    }
    .sec-2 p {
        font-size: 22rem;
        font-family: "05HanwhaGothicR";
    }
    .sec-2 p br {
        display: block;
    }
}
@media (max-width: 1200px) {
    .sec-2 p {
        font-size: 18rem;
    }
}

/********** ↓ sec-3 ↓ **********/
@keyframes bounce1 {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}
.sec-3 {
    height: 100vh;
}
/* .sec-3 .event-numb {
    top: 0;
    right: 0;
    width: 70rem;
    animation: bounce1 ease-in-out infinite alternate; 
}
.sec-3 .event-img p,
.sec-3 .event-img .p {
    display: flex;
    width: 100%;
    font-size: 28rem;
    font-weight: 500;
    line-height: 1.4;
}
.sec-3 .event-img:nth-child(2) p:before,
.sec-3 .event-img:nth-child(2) p::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 60rem;
    border: 1px dashed #222;
}
.sec-3 .event-img:nth-child(2) p::after {
    left: auto;
    right: 0;
} */

.sec-3 .grid {
    grid-template-columns: 1fr 1fr 1fr;
    width: 1000rem;
}
.sec-3 .card {
    padding: 40rem 20rem;
    border-radius: 15rem;
    transition: .3s;
}
.sec-3 .card:hover {
    margin-top: -10rem;
}
.sec-3 .card img {
    width: 108rem;
}
.sec-3 .card p {
    line-height: 1.4;
}
.sec-3 .card p.text-1::before {
    content: '';
    display: block;
    width: 12rem;
    height: 12rem;
    background: #4F2A65;
    border-radius: 6rem;
    position: relative;
    left: 49%;
    right: 50%;
}
.sec-3 .card p.text-1 {
    margin-top: 20rem;
    font-size: 30rem;
    font-family: "MYRIADPRO-BOLD";
    color: #4F2A65;
    line-height: 1.8;
    letter-spacing: 0.01em;
}
.sec-3 .card p.text-2 {
    margin-top: 10rem;
    font-size: 24rem;
    color: #4F2A65
}
.sec-3 .card p.text-3 {
    margin-top: 28rem;
    font-size: 28rem;
    color: #F37320
}

@media (max-width: 1200px) {
    .sec-3 .grid {
        width: auto;
        max-width: 1000rem;
    }
    .sec-3 .card img {
        width: 88rem;
    }
    .sec-3 .card p.text-1 {
        margin-top: 16rem;
        font-size: 24rem;
    }

    .sec-3 .card p.text-2 {
        margin-top: 0rem;
        font-size: 17rem;
        color: #4F2A65
    }
    .sec-3 .card p.text-3 {
        margin-top: 20rem;
        font-size: 20rem;
    }

}

@media (max-width: 767px) {
    .sec-3 .grid {
        grid-template-columns: 1fr;
        align-items: start;
        width: 100%;
        height: auto;
    }
    .sec-3 .card{
        position: relative;
        padding: 20rem 20rem;
        display: flex;
        flex-direction: column-reverse;
    }
    .sec-3 .card p.text-1::before {
        display: none;
    }
    .sec-3 .card img {
        position: absolute;
        right: 20rem;
        width: 68rem;
    }
    .sec-3 .card p.text-1,
    .sec-3 .card p.text-2,
    .sec-3 .card p.text-3 {
        text-align: left;
    }
    .sec-3 .card p.text-1 {
        margin-top: 0;
        font-size: 20rem;
    }
    .sec-3 .card p.text-2 {
        margin-top: 0rem;
        font-size: 15rem;
        color: #4F2A65
    }
    .sec-3 .card p.text-3 {
        margin-top: 20rem;
        font-size: 16rem;
    }

}


/********** ↓ sec-4 ↓ **********/

.sec-4 {
    height: 100vh;
}
.sec-4 .grid-box {
    grid-template-columns: 1fr 1fr;
    gap: 20rem;
}
.sec-4 .grid-box a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28rem;
    font-weight: 700;
    width: 100%;
    border: 1px solid #fff;
    height: 100rem;
}
.sec-4 .grid-box a span {
    margin-right: 5rem;
}
.sec-4 .grid-box a:hover {
    border-color: #F37320;
    color: #F37320;
}
.sec-4 .grid-box a:hover span {
    color: #F37320;
}
.sec-4 .grid-box a img {
    margin-right: 20rem;
}
.sec-4 .grid-box a:hover:nth-child(1) img {
    content: url(../img/icon-more-1-hover.svg);
}
.sec-4 .grid-box a:hover:nth-child(2) img {
    content: url(../img/icon-more-2-hover.svg);
}
.sec-4 .grid-box a:hover:nth-child(3) img {
    content: url(../img/icon-more-3-hover.svg);
}
.sec-4 .grid-box a:hover:nth-child(4) img {
    content: url(../img/icon-more-4-hover.svg);
}
.sec-4 .date-box {
    z-index: 2;
    max-width: 900rem;
    gap: 45rem;
}
.sec-4 .date-box .box {
    border-top: 2rem solid #fff;
    border-bottom: 2rem solid #fff;
    padding: 45rem 0;
}
.sec-4 .date-box .box h2 {
    font-size: 36rem;
}
.sec-4 .date-box .box > p {
    font-size: 26rem;
    margin-top: 16rem;
    margin-bottom: 20rem;
    line-height: 1.4;
    letter-spacing: 0.01em;
}
.sec-4 .date-box .box .timer > div span {
    font-family: "04HanwhaGothicB";
    color: rgba(255, 255, 255, 0.5);
    font-size: 18rem;
    margin-top: 10rem;
    letter-spacing: 0.01em;
}
.sec-4 .date-box .box .timer p,
.sec-4 .date-box .box .timer > span {
    font-size: 70rem;
    font-family: "04HanwhaGothicB";
    color: #F37320;
}
.sec-4 .date-box .box .timer > span {
    margin-top: -20rem;
}
.sec-4 .bf-img {
    bottom: 0;
}

@media (max-width: 1200px) {
    .sec-4 .date-box {
        flex-direction: column;
        max-width: 400rem;
    }
    .sec-4 .date-box .box {
        padding: 28rem 0;
    }
    .sec-4 .date-box .box h2 {
        font-size: 30rem;
    }
    .sec-4 .date-box .box > p {
        font-size: 20rem;
    }
    .sec-4 .date-box .box .timer p, .sec-4 .date-box .box .timer > span {
        font-size: 50rem;
    }
    .sec-4 .date-box .box .timer > div span {
        font-size: 14rem;
    }
    .sec-4 .bf-img {
        width: 100%;
    }
}

@media (max-width: 1200px) {
    .sec-4 .date-box .box h2 {
        font-size: 26rem;
    }
    .sec-4 .date-box .box > p {
        font-size: 18rem;
    }
    .sec-4 .date-box .box .timer p, .sec-4 .date-box .box .timer > span {
        font-size: 40rem;
    }
    .sec-4 .date-box .box .timer > div span {
        font-size: 12rem;
    }
    .sec-4 .date-box {
        gap: 32px
    }
}

/********** ↓ sec-5 ↓ **********/

.sec-5 {
    padding-top: 195rem;
    padding-bottom: 195rem;
}
.sec-5 .con {
    gap: 113rem;
}
.sec-5 .text-list li {
    color: #000;
}
.sec-5 .text-list li span {
    color: #000;
}
.sec-5 .step-list {
    min-height: 254rem;
}
.sec-5 .step-list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: .3s;
}
.sec-5 .step-list li:hover {
    margin-top: -10rem;
}
.sec-5 .step-list .box > img {
    margin-top: 57rem;
}
.sec-5 .step-list .icon {
    border-radius: 50%;
    width: 130rem;
    height: 130rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sec-5 .step-list h3 {
    border-bottom: 1rem solid #F37320;
    padding-bottom: 10rem;
    margin-bottom: 14rem;
    margin-top: 20rem;
    font-family: "04HanwhaGothicB";
    font-size: 19rem;
}
.sec-5 .step-list .text-box p {
    color: rgba(0, 0, 0, 0.7);
    font-size: 18rem;
    font-family: "06HanwhaGothicL";
}
.sec-5 .step-list .text-box span {
    margin-top: 6rem;
    color: rgba(0, 0, 0, 0.7);
    font-family: "06HanwhaGothicL";
    font-size: 15rem;
}
.sec-5 .step-list .box:last-child {
    margin-left: 12rem;
}

/* 반응형 */
@media(max-width: 1200px) {

    .sec-5 {
        padding-top: 120rem;
        padding-bottom: 120rem;
    }
    .sec-5 .con {
        gap: 60rem;
    }

    .sec-5 .step-list .icon {
        width: 80rem;
        height: 80rem;
    }
    .sec-5 .step-list .icon img {
        width: 50rem;
    }
    .sec-5 .step-list .box > img {
        margin-top: 32rem;
    }
    .sec-5 .step-list h3 {
        font-size: 15rem;
        padding-bottom: 7rem;
        margin-bottom: 7rem;
        margin-top: 10rem;
    }
    .sec-5 .step-list .text-box p {
        font-size: 12rem;
    }
    .sec-5 .step-list .text-box span {
        font-size: 10rem;
        margin-top: 3rem;
    }
    .sec-5 .text-list li span {
        font-size: 18rem;
    }
    .text-list li {
        font-size: 18rem;
    }
    .text-list li br {
        display: block;
    }

}

@media(max-width: 768px) {
    .sec-5 .step-list {
        flex-direction: column;
        min-height: auto;
    }
    .sec-5 .step-list .box:last-child {
        margin-left: 0;
        margin-top: 16rem;
        min-height: 160rem;
    }
    .sec-5 .step-list .box:first-child > img:last-child {
        position: absolute;
        right: -20rem;
    }
}

/********** ↓ sec-6 ↓ **********/

.sec-6 {
    padding-top: 160rem;
    padding-bottom: 190rem;
}
.sec-6 .box {
    z-index: 2;
}
.sec-6 .box-2 {
    margin-top: 100rem;
}
.sec-6 .grid {
    grid-template-columns: 1fr 1fr;
    position: relative;
    height: 214rem;
    gap: 24rem;
}

.sec-6 .card-box {
    width: 100%;
    height: 100%;
    transition: .5s;
    transform-style: preserve-3d;
}

.sec-6 .card-box > div {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    border-radius: 12rem;
    padding: 30rem;
}
.sec-6 .card-box .front {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
}
.sec-6 .card-box .front img{
    width: 100rem;
    position: relative;
    top: 20rem;
}
.sec-6 .card-box .back{
    transform: rotateY(180deg);
    background-color: #FFE9CA;
    word-break: keep-all;
}

.sec-6 .card-box .back p{
    font-size: 18rem;
    margin-top: 20rem;
    line-height: 1.4;
}
.card:hover .card-box{
    transform: rotateY(180deg);  
}
.sec-6 .box-2 .card-box > div {
    height: 100%;
}
.card-box h2 {
    color: #F37320;
    font-weight: bold;
    line-height: 1.4;
    font-size: 24rem;
}
.card-box p {
    color: #F37320;
}
.sec-6 .box-2 .card-box .back .spacing {
    position: relative;
    padding-left: 16rem;
    display: block;
    margin-top: 4rem;
}
.sec-6 .box-2 .card-box .back .spacing::before {
    position: absolute;
    content: '※';
    top: 0;
    left: 0;
}
.sec-6 .bd-img {
    right: -300rem;
    top: -40rem;
    width: 866rem;
}

@media (max-width: 1200px) {
    .sec-6 {
        padding-top: 80rem;
        padding-bottom: 160rem;
    }
    .sec-6 .grid {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 424rem;
        gap: 24rem;
    }
    .sec-6 .card-box > div {
        padding: 24rem;
    }
    .sec-6 .card-box .front img{
        width: 80rem;
    }
    .card-box h2 {
        font-size: 20rem;
    }
    .sec-6 .box-2 .grid,
    .sec-6 .box-1 .grid {
        min-height: 440rem;
    }
    .sec-6 .bd-img {
        top: auto;
        bottom: -300rem;
    }
}

@media (max-width: 767px) {
    .sec-6 {
        padding-top: 40rem;
        padding-bottom: 120rem;
    }
    .sec-6 .grid {
        gap: 15rem;
        min-height: 255rem;
    }
    .sec-6 .card-box > div {
        padding: 20rem;
    }
    .sec-6 .card-box .back p{
        font-size: 15rem;
        margin-top: 16rem;
    }
    .sec-6 .card-box .front img{
        width: 60rem;
    }
    .card-box h2 {
        font-size: 18rem;
    }
    .sec-6 .card-box > div {
        padding: 20rem;
        height: 120rem;
    }
    .sec-6 .box-2 {
        margin-top: 60rem;
    }
    .sec-6 .box-2 .card-box .front img{
        height: 68rem;
        top: 110rem;
    }
    .sec-6 .bd-img {
        width: 500rem;
        right: -130rem;
    }
}

/********** ↓ sec-7 ↓ **********/

.sec-7 {
    padding-top: 140rem;
    padding-bottom: 180rem;
}
.sec-7 table {
    margin-bottom: 120rem;
    border-collapse: separate; 
    border-spacing: 0; 
}

.sec-7 table {
    text-align: center;
    font-size: 20rem;
}

.sec-7 table thead tr{
    height: 58rem;
    color: #fff;
    font-size: 24rem;
}
.sec-7 table thead tr th:first-child{
    border-radius: 15rem 0 0 0;
}
.sec-7 table thead tr th:last-child{
    border-radius: 0 15rem 0 0;
}
.sec-7 table thead tr td{
    border-radius: 0 15rem 0 0;
}
.sec-7 table tbody td:first-child {
    background: rgb(255, 255, 255,0.2);
}
.sec-7 table thead tr.bdl-none{
    border: none;
}
.sec-7 table tbody tr td {
    word-break: keep-all;
    line-height: 1.4;
    height: 80rem;
    border-bottom: 1rem solid #fff;
    border-right: 1rem solid #fff;
    border-left: 1rem solid #fff;
    font-size: 20rem;
}
.sec-7 table tbody tr:hover {
    background: rgb(243, 115, 32, 0.2);
}
.sec-7 table tbody tr td.round1{
    border-bottom-left-radius: 15rem;
}
.sec-7 table tbody tr td.round2{
    border-bottom-right-radius: 15rem;
}

@media (max-width: 1200px) {
    .sec-7 .text-list li {
        font-size: 18rem;
    }
    .sec-7 .text-list li span {
        font-size: 18rem;
    }
    .sec-7 table {
        font-size: 17rem;
    }
    .sec-7 table thead tr{
        height: 58rem;
        color: #fff;
        font-size: 20rem;
    }
}

@media (max-width: 767px) {
    .sec-7 {
        padding-top: 100rem;
        padding-bottom: 100rem;
    }
    .sec-7 .text-list li {
        font-size: 14rem;
    }
    .sec-7 .text-list li span {
        font-size: 14rem;
    }
    .sec-7 table {
        margin-bottom: 70rem;
    }
    .sec-7 table thead tr{
        height: 58rem;
        color: #fff;
        font-size: 17rem;
    }
    .sec-7 table tbody tr td {
        padding: 6rem;
        font-size: 14rem;
    }
}

/********** ↓ sec-8 ↓ **********/

.sec-8 {
    padding-top: 190rem;
    padding-bottom: 190rem;
}
.sec-8 .grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20rem;
}
.sec-8 .grid .box {
    border-radius: 12rem;
    padding: 30rem;
    height: 230rem;
    cursor: pointer;
}
.sec-8 .grid .box h2 {
    color: #F37320;
    font-family: "04HanwhaGothicB";
    font-size: 28rem;
    margin-bottom: 24rem;
}
.sec-8 .grid .box p {
    font-family: "04HanwhaGothicL";
    font-size: 24rem;
    line-height: 1.4;
    word-break: keep-all;
}
.sec-8 .grid .box:hover {
    /* background: linear-gradient( rgba(243,115,32,1) 50%, rgba(255,188,144,1) 100%); */
    background: #f37320;
}
.sec-8 .grid .box:hover h2,
.sec-8 .grid .box:hover p {
    color: #fff;
}

@media (max-width: 1200px){
    .sec-8 .grid {
        grid-template-columns: 2fr 2fr;
        gap: 16rem;
    }
    .sec-8 .grid .box h2 {
        font-size: 24rem;
        margin-bottom: 20rem;
    }
    .sec-8 .grid .box p {
        font-size: 20rem;
    }
    .sec-8 .grid .box {
        padding: 24rem;
        height: 160rem;
    }
}
@media (max-width: 767px){
    .sec-8 {
        padding-top: 100rem;
        padding-bottom: 100rem;
    }
    .sec-8 .grid {
        grid-template-columns: 2fr 2fr;
        gap: 8rem;
    }
    .sec-8 .grid .box {
        border-radius: 14rem;
    }
    .sec-8 .grid .box h2 {
        font-size: 19rem;
        margin-bottom: 10rem;
    }
    .sec-8 .grid .box p {
        font-size: 15rem;
    }
    .sec-8 .grid .box {
        padding: 14rem 10rem 10rem;
        height: 140rem;
    }

}


/* 유튜브 영역 */
.video-thumb img {
    border: 1rem solid #F37320;
    border-radius: 20rem;
    box-sizing: border-box;
  }
  


  
/********** ↓ sec-9 ↓ **********/

.sec-9 {
    padding-top: 200rem;
    padding-bottom:  200rem;
}
.sec-9 .wrap-1 {
    padding: 48rem 84rem;
    background-color: #fff;
    border-radius: 15rem;
}
.sec-9 .wrap-1-title {
    border-bottom: 1rem solid #F37320;
    padding-bottom: 20rem;
    margin-bottom: 32rem;
    width: 100%;
}
.sec-9 .wrap-1-title p {
    font-size: 20rem;
}
.sec-9 .wrap-1-box h3 {
    line-height: 1.3;
    font-size: 30rem;
}
.sec-9 .wrap-1-box h3 span::before {
    display: none;
    content: '';
    position: absolute;
    width: 100%;
    height: 18rem;
    border-radius: 30rem;
    background-color: #4E2965;
    opacity: 0.2;
    bottom: 0;
}
.sec-9 .wrap-1-box h3 span.c-F37320::before {
    background-color: #F37320;
}
.sec-9 .wrap-1-box p {
    line-height: 1.4;
    margin-top: 8rem;
    margin-bottom: 20rem;
    color: rgba(0, 0, 0, 0.7);
}
.sec-9 .wrap-1-box p.tb {
    color: #F37320;
    margin-top: 40rem;
    margin-bottom: 0;
}
.sec-9 .wrap-1-box .btn-box a {
    align-items: center;
    justify-content: center;
    height: 70rem;
    width: 352rem;
    border-radius: 18rem;
    letter-spacing: -0.05em;
    font-size: 24rem;
}

.sec-9 .wrap-1-box .default {
    display: flex;
}
.sec-9 .wrap-1-box .hover {
    display: none;
}
.sec-9 .wrap-1-box .btn-box:hover .default {
    display: none;
}
.sec-9 .wrap-1-box .btn-box:hover .hover {
    display: flex;
}
.sec-9 .wrap-1-title h2 {
    line-height: 2;
    font-size: 36rem;
}
.wrap-2  {
    margin-top: 100rem;
}
.wrap-2 .item {
    height: 580rem;
    width: 100%;
    border-radius: 15rem;
    padding: 48rem 24rem 30rem 24rem;
    transition: .3s;
}

.wrap-2 .item:hover {
    margin-top: -10rem;
}
.wrap-2 .item .tag {
    font-size: 24rem;
    font-family: "04HanwhaGothicB";
    padding: 10rem 22rem;
    border-radius: 15rem;
    top: -22rem;
    letter-spacing: 0.01em;
}
.wrap-2 .item h4 {
    font-size: 24rem;
    font-family: "04HanwhaGothicB";
    color: #4E2965;
    line-height: 1.3;
}
.sec-9 .wrap-2 .item-2 .text-1 {
    /* margin-top: 40rem; */
}
.wrap-2 .item .text-1 {
    font-family: "06HanwhaGothicL";
    margin: 16rem 0;
}
.wrap-2 .item .text-1,
.wrap-2 .item .text-2 {
    font-size: 15rem;
    line-height: 1.4;
}
.wrap-2 .item .text-3 {
    position: absolute;
    bottom: 30rem;
    font-family: "04HanwhaGothicB";
    color: rgba(0, 0, 0, 0.7);
    font-size: 20rem;
}
.wrap-2 .item .img-box {
    width: 180rem;
    position: absolute;
    bottom: 70rem;
}
.wrap-2 .item .img-box .number {
    top: -10rem;
    left: -40rem;
    width: 80rem;
}

/* 반응형 */
@media (max-width: 1200px) {
    .sec-9 .wrap-1-title p br {
        display: block;
    }
    .sec-9 .wrap-1-box {
        flex-direction: column;
        align-items: center;
    }
    .sec-9 .wrap-1-box p.tb {
        margin: 20rem 0 15rem 0;
    }
    .tag-box .title-tag {
        font-size: 20rem;
    }
    .title-box {
        gap: 16rem;
        margin-bottom: 16rem;
        flex-direction: column;
        align-items: flex-start;
    }
    .title-wrap p {
        font-size: 20rem;
    }
    .sec-9 .wrap-1-title h2 {
        font-size: 32rem;
    }
    .sec-9 .wrap-1-title p,
    .sec-9 .wrap-1-box p {
        font-size: 20rem;
    }
    .sec-9 .wrap-1-box p.tb {
        font-size: 30rem;
    }
    .sec-9 .wrap-1 {
        padding: 40rem;
    }
    .sec-9 .wrap-1-box h3 {
        font-size: 26rem;
    }
    .sec-9 .wrap-1-box .btn-box a {
        font-size: 20rem;
        height: 60rem;
        width: 300rem;
    }
    .wrap-2 {
        display: none;
    }
    .mob-slide-1 {
        display: block;
    }
    .mob-slide-2 {
        display: block;
    }
}

@media (max-width: 767px) {
    .title-box {
        gap: 8rem;
    }
    .tag-box .title-tag {
        font-size: 14rem;
        padding: 6rem 14rem;
        border-radius: 10rem;
    }
    .sec-9 {
        padding-top: 100rem;
        padding-bottom: 100rem;
    }
    .sec-9 .wrap-1-title p {
        font-size: 16rem;
    }
    .sec-9 .wrap-1 {
        padding: 30rem 24rem;
    }
    .sec-9 .wrap-1-title h2 {
        font-size: 24rem;
    }
    .sec-9 .wrap-1-box h3 {
        font-size: 24rem;
    }
    .sec-9 .wrap-1-box p {
        font-size: 17rem;
        margin-bottom: 16rem;
    }
    .sec-9 .wrap-1-box .btn-box a {
        font-size: 18rem;
        height: 50rem;
        width: 270rem;
    }
    .wrap-2 .item {
        padding: 48rem 10rem 30rem 10rem;
        height: 505rem;
    }
    .wrap-2 .item .tag {
        font-size: 22rem;
    }
    .wrap-2 .item h4 {
        font-size: 20rem;
    }
    .wrap-2 .item .text-1 {
        font-size: 16rem;
    }
    .wrap-2 .item .text-2 {
        font-size: 14rem;
    }
    .wrap-2 .item .img-box {
        width: 170rem;
    }
    .wrap-2 .item .img-box .number {
        width: 75rem;
    }
    .wrap-2 .item .text-3 {
        font-size: 18rem;
    }
}
/* @media (max-width: 400px) {
    .wrap-2 .item {
        max-width: 100%;
    }
} */


/********** ↓ sec-10 ↓ **********/

.sec-10 {
    padding-top: 160rem;
    padding-bottom:  160rem;
}
.sec-10 .wrap {
    padding: 48rem 40rem;
    border-radius: 15rem;
}
.sec-10 .wrap p {
    margin-bottom: 40rem;
    position: relative;
    padding-left: 10rem;
    font-size: 24rem;
}
.sec-10 .wrap p::before {
    content: '';
    position: absolute;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-color: #000;
    top: 10rem;
    left: 0;
}
.sec-10 .table-box table th:first-child {
    border-right: 1rem solid #fff;
    height: 44rem;
}
.sec-10 .table-box table td {
    border: 1rem solid #F37320;
    text-align: center;
    height: 46rem;
    color: rgba(0, 0, 0, 0.8);
    word-break: keep-all;
    font-size: 20rem;
}
.sec-10 .table-box table {
    box-shadow: 0 0 0 1rem #F37320;
    border-collapse: collapse;
    border-radius: 15rem;
    border-style: hidden;
    overflow: hidden;
}
.sec-10 .table-box a {
    white-space: nowrap;
    border-radius: 18rem;
    width: 230rem;
    padding: 0 58rem;
    font-size: 28rem;
}
.sec-10 .table-box a:hover {
    background-color: #4F2A65 !important;
    transition: all 0.3s ease;
}


/* 반응형 */
@media (max-width: 1200px) {
    .sec-10 .table-box {
        flex-direction: column;
    }
    .sec-10 .table-box a {
        width: 100%;
        padding: 20rem;
    }
    .sec-10 .table-box a br {
        display: none;
    }
}
@media (max-width: 767px) {

    .title-wrap p {
        font-size: 16rem;
    }
    .sec-10 {
        padding-top: 100rem;
        padding-bottom: 100rem;
    }
    .sec-10 .wrap {
        padding: 24rem;
    }
    .sec-10 .wrap p {
        font-size: 18rem;
        line-height: 1.5;
        margin-bottom: 16rem;
    }
    .sec-10 .wrap p br {
        display: block;
    }
    .sec-10 .table-box {
        gap: 20rem;
    }
    .sec-10 .table-box table th {
        height: 30rem !important;
        font-size: 14rem;
    }
    .sec-10 .table-box table td {
        height: auto;
        font-size: 14rem;
        padding: 10rem;
        line-height: 1.5;
    }
    .sec-10 .table-box a {
        font-size: 18rem;
        padding: 20rem 0;
    }

}


/********** ↓ sec-11 ↓ **********/

.sec-11 {
    padding-top: 200rem;
    padding-bottom:  140rem;
    background: linear-gradient(#fff 0%, #FFF0E5 25%);
}
.sec-11 .wrap-2  {
    margin-bottom: 130rem;
}
.sec-11 .apply-box {
    padding: 24rem 30rem;
    border-radius: 15rem;
}
.sec-11 .apply-box ul li:not(:last-child) {
    position: relative;
    padding-left: 10rem;
    font-size: 24rem;
}
.sec-11 .apply-box ul li:not(:last-child)::before {
    content: '';
    position: absolute;
    width: 5rem;
    height: 5rem;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    left: 0;
    top: 16rem;
}
.sec-11 .apply-box ul li:last-child {
    font-size: 20rem;
}
.sec-11 .apply-box ul li,
.sec-11 .apply-box ul li span {
    line-height: 1.9;
    color: rgba(0, 0, 0, 0.7);
}
.sec-11 .apply-box a {
    width: 230rem;
    white-space: nowrap;
    border-radius: 18rem;
    height: 140rem;
}
.sec-11 .apply-box a:hover {
    transition: all 0.3s ease;
    background-color: #4F2A65 !important;
}
.sec-11 .calendar-area {
    overflow: hidden;
    height: 1000rem;
    position: relative;
}
.sec-11 .calendar-area.active {
    height: auto;
}
.sec-11 .more-btn-box {
    position: absolute;
    background: linear-gradient(rgba(255,240,229,0), rgba(255,240,229,1));
    width: 100%;
    height: 300rem;
    left: 0;
    bottom: 0;
}
.sec-11 .more-btn-box button {
    position: absolute;
    bottom: 64rem;
    width: 128rem;
    height: 46rem;
    border-radius: 15rem;
    gap: 4rem;
}
.sec-11 .more-btn-box button i {
    background: url(../img/scroll-down-white.svg)no-repeat center/cover;
    width: 28rem;
    height: 28rem;
}
.sec-11 .more-btn-box button:last-child i {
    transform: rotate(-180deg);
}
.sec-11 .more-btn-box.active {
    position: relative;
    height: 140rem;
    background: none;
}
.sec-11 .more-btn-box.active button:first-child {
    display: none;
}
.sec-11 .more-btn-box.active button:last-child {
    display: flex;
    bottom: 0;
}
.sec-11 .calendar-area .item-2 {
    margin-top: 70rem;
    margin-bottom: 36rem;
}
.sec-11 .calendar-area .item .cal-date p {
    font-family: "04HanwhaGothicB";
    color: #fff;
}
.sec-11 .calendar-area span.sub-text {
    font-size: 16rem;
}
.sec-11 .calendar-area .item .cal-date-pc {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    padding: 16rem 0;
    border-radius: 30rem;
}
.sec-11 .calendar-area .item .cal-date-pc p {
    font-size: 20rem;
    position: relative;
}
.sec-11 .calendar-area .item-2 .cal-date-pc p:first-child::before {
    /* content: "서류접수 시작 !"; */
    content: url(../img/cal-start-text.svg);
    position: absolute;
    top: -44rem;
    left: 40rem;
    color: #4E2965;
    font-family: "04HanwhaGothicB";
}

.sec-11 .calendar-area .item .cal-date-pc p:not(:last-child)::after,
.sec-11 .calendar-area .item .cal-date-m p:first-child::after {
    position: absolute;
    content: '';
    height: 100%;
    width: 1rem;
    background-color: #fff;
    right: 0;
}
.sec-11 .calendar-area .item .cal-date-m {
    border-radius: 40rem;
    padding: 10rem 0;
    display: none;
}
.sec-11 .calendar-area .item .cal-date-m p {
    position: relative;
    width: 100%;
    font-size: 15rem;
}
.sec-11 .calendar-area .item .cal-box {
    grid-template-columns: 1fr 2fr 2fr;
}
.sec-11 .calendar-area .item .cal-box.grid-2 {
    grid-template-columns: 2fr 2fr 1fr;
}
.sec-11 .calendar-area .item .cal-box .box ul {
    display: flex;
    flex-direction: column;
    gap: 10rem;
    margin-top: 16rem;
}
.sec-11 .calendar-area .item .cal-box .box ul.mobile {
    visibility: hidden;
}
.sec-11 .calendar-area .item .cal-box .box ul li {
    width: 196rem;
    height: 180rem;
    border-radius: 8rem;
    margin-right: 4rem;
}
.sec-11 .calendar-area .item .cal-box .box ul li .default {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #F37320;
    font-family: "04HanwhaGothicB";
    font-size: 24rem;
    height: 100%;
    background-color: #fff;
    border: 1rem solid #F37320;
    border-radius: 8rem;
}
.sec-11 .calendar-area .item .cal-box .box ul li .default.online {
    border-color: #4E2965;
    color: #4E2965;
    line-height: 1.2;
}
.sec-11 .calendar-area .item .cal-box .box ul li .hover {
    display: none;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    gap: 20rem;
    background-color: #4E2965;
    height: 100%;
    border-radius: 8rem;
    padding-left: 26rem;
}
.sec-11 .calendar-area .item .cal-box .box ul li .hover > div {
    display: flex;
    flex-direction: column;
    gap: 8rem;
}
.sec-11 .calendar-area .item .cal-box .box ul li .hover p {
    font-family: "04HanwhaGothicB";
    font-size: 18rem;
    color: #fff;
}
.sec-11 .calendar-area .item .cal-box .box ul li .hover span {
    font-family: "05HanwhaGothicR";
    font-size: 16rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 4rem;
}
.sec-11 .calendar-area .item .cal-box .box ul li .hover span i {
    background: url(../img/ico_chk-circle.svg)no-repeat center/cover;
    width: 14rem;
    height: 14rem;
    display: block;
}
.sec-11 .calendar-area .item .cal-box .box ul li:hover .default {
    display: none;
}

.sec-11 .calendar-area .item .cal-box .box ul li:hover .hover {
    display: flex;
}
.sec-11 .wrap-2 .item .text-1 {
    min-height: 70rem;
}
.wrap-2 .item .text-2 {
    color: rgba(0, 0, 0, 0.7);
}
.sec-11 .wrap-2 .item .text-2 {
    font-size: 15rem;
}
.sec-11 .wrap-2 .item .text-2 .spacing {
    padding: 5rem;
}
.sec-11 .wrap-2 .item .img-box {
    bottom: 30rem;
}

/* 반응형 */
@media (max-width: 1200px) {
    .sec-11 {
        padding-top: 100rem;
        padding-bottom: 100rem;
    }
    .sec-11 .calendar-area {
        height: 600rem;
    }
    .sec-11 .calendar-area .item .cal-date-pc {
        display: none;
    }
    .sec-11 .calendar-area .item .cal-date-m {
        display: flex;
    }
    .sec-11 .calendar-area .item .cal-box,
    .sec-11 .calendar-area .item .cal-box.grid-2 {
        grid-template-columns: 1fr;
    }
    .sec-11 .calendar-area .item .cal-box .box-wrap {
        gap: 7rem;
        margin-bottom: 15rem;
    }
    .sec-11 .calendar-area .item-2 {
        margin: 0;
    }
    .sec-11 .calendar-area .item .cal-box .box ul {
        width: 100%;
        gap: 7rem;
        margin-top: 7rem;
    }
    .sec-11 .calendar-area .item .cal-box .box ul li {
        width: 100%;
        height: 70rem;
    }
    .sec-11 .calendar-area .item .cal-box .box ul.mobile {
        visibility: visible;
    }
    .sec-11 .calendar-area .item .cal-box .box ul.pc {
        display: none;
    }
    .sec-11 .calendar-area .item .cal-box .box ul li .default {
        font-size: 18rem;
    }
    .sec-11 .calendar-area .item .cal-box .box ul li:hover {
        height: 148rem;
    }
    .sec-11 .more-btn-box button {
        font-size: 18rem;
        width: 100rem;
        height: 40rem;
        bottom: 40rem;
    }
    .sec-11 .more-btn-box button i {
        width: 20rem;
        height: 20rem;
    }
    .sec-11 .more-btn-box.active {
        height: 60rem;
    }
    .sec-11 .apply-box {
        flex-direction: column;
        padding: 28rem 24rem;
    }
    .sec-11 .apply-box a {
        width: 100%;
        height: auto;
        padding: 20rem 0;
    }
    .sec-11 .apply-box a br {
        display: none;
    }
    .sec-11 .apply-box ul li:not(:last-child),
    .sec-11 .apply-box ul li span {
        font-size: 20rem;
    }
    .sec-11 .calendar-area .item .cal-box .box ul li .default.h-set{
        height: 148rem;
    }
}

@media (max-width: 767px) {
    .sec-11 .more-btn-box button {
        font-size: 16rem;
    }
    .sec-11 .apply-box ul li:not(:last-child),
    .sec-11 .apply-box ul li span {
        font-size: 18rem;
        line-height: 1.5;
    }
    .sec-11 .apply-box ul li:last-child {
        line-height: 1.9;
    }
    .sec-11 .apply-box ul li:last-child {
        font-size: 16rem;
    }
    .sec-11 .apply-box ul li br {
        display: block;
    }
    .sec-11 .apply-box a {
        font-size: 18rem;
    }
    .sec-11 .calendar-area span.sub-text {
        font-size: 14px
    }

}


/********** ↓ sec-12 ↓ **********/
/* 복리후생 */
.sec-12 {
    padding-top: 180rem;
    padding-bottom: 180rem;
    overflow-x: hidden;
}
.sec-12 .obj-1 {
    right: 100rem;
    bottom: 0;
    width: 817rem;
}
.benefits-slide-box {
    gap: 24rem;
}

.benefits-box {
    padding: 32rem;
    border-radius: 16rem;
    box-sizing: border-box;
    height: 200rem;
}

.benefits-box.bg-1 {
    background-color: #fff;
}

.benefits-box.bg-2 {
    background-color: #fff;
}

.benefits-box p {
    color: #F37320;
    font-size: 24rem;
    line-height: 1.4;
    font-family: "04HanwhaGothicB";
}

.benefits-box .img-box {
    width: 80rem;
    margin-left: auto;
}

/* 추가된 스타일 */
.benefits-slide-box .swiper-slide {
    position: relative; /* .benefits-hover를 절대 위치로 배치 */
    height: 200rem; /* .benefits-box와 높이 일치 */
}

.benefits-hover {
    display: none; /* 기본 상태에서는 숨김 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20rem;
    border-radius: 16rem;
    box-sizing: border-box; 
    background-color: #FFF0E5;
    word-break: keep-all;
}

.benefits-hover p {
    color: #4E2965; 
    font-size: 20rem; 
    line-height: 1.4; 
}

.benefits-slide-box .swiper-slide:hover .benefits-box {
    display: none; 
}

.benefits-slide-box .swiper-slide:hover .benefits-hover {
    display: flex; 
}

/* 부드러운 전환 (선택 사항) */
.benefits-box, .benefits-hover {
    transition: opacity 0.3s ease;
}
.benefits-box {
    opacity: 1;
}

.benefits-hover {
    opacity: 0;
}

.benefits-slide-box .swiper-slide:hover .benefits-box {
    opacity: 0;
}

.benefits-slide-box .swiper-slide:hover .benefits-hover {
    opacity: 1;
}
/* .swiper-wrapper {
    transition-timing-function: linear;
} */


.benefit-grid {
    display: grid;
    grid-template-columns: 3fr 3fr 3fr;
    gap: 20rem;
}

@media (max-width: 1200px) {
    .benefits-slide-box {
        gap: 20rem;
    }
    .benefits-area .sub-text {
        font-size: 42rem;
        padding: 40rem 0 28rem 0;
    }
    .benefits-slide-box .swiper-slide {
        height: 200rem;
    }
    .benefits-box {
        padding: 28rem;
        /* height: 168rem; */
    }
    .benefits-box p{
        font-size: 20rem;
    }
    .benefits-hover p {
        font-size: 16rem;
        word-break: keep-all;
    }
    .benefits-box .img-box {
        width: 60rem;
    }

 
}

@media (max-width: 767px) {
    .benefits-area .sub-text {
        font-size: 35rem;
        padding: 32rem 0 24rem 0;
    }
    .benefits-slide-box {
        gap: 12rem;
    }
    .benefits-box {
        padding: 20rem;
        height: 240rem;
    }
    .sec-12 {
        padding-top: 100rem;
        padding-bottom: 100rem;
    }
    .benefits-slide-box .swiper-slide {
        height: 240rem;
    }
    .benefits-box .img-box {
        width: 80rem;
        height: 80rem;
    }
    .benefit-grid {
        display: grid;
        grid-template-columns: 2fr 2fr;
        gap: 12rem;
    }
    .benefits-box p {
        word-break: keep-all;
    }
}


/* 복리후생 */
.sec-13 {
    padding-top: 180rem;
    padding-bottom: 180rem;
}
.person-padding-top{
   padding-top: 180rem;
}
.person-area {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20rem;
}
.person-area li{
    background: #fff;
}
.person-box {
    border-radius: 16rem;
    box-sizing: border-box;
}
.person-box.bg-1 {
   background-color: #fff;
}
.person-box p{
    background: #FFF0E5;
    color: #F37320;
    font-size: 26rem;
    line-height: 1.4;
    padding: 24rem;
    border-radius: 20rem 20rem 0 0;
    box-sizing: border-box;
}
.person-box span {
    font-size: 20rem;
}
.person-box .sub-text-box {
    padding: 20rem;
}
.person-box span img {
    width: 80rem;
}
.up-btn {
    right: 40rem;
    bottom: 30rem;
    width: 48rem;
    height: 48rem;
}
.up-btn:hover img {
    content: url(../img/Icon_Button_top_hover.svg);
}

@media (max-width: 1200px) {
    .person-padding-top{
        padding-top: 120rem;
     }
    .person-box p{
        font-size: 24rem;
        padding: 20rem;
    }
    .person-box span img {
        width: 60rem;
    }
    .sec-12 .obj-1 {
        width: 500rem;
        right: -50rem;
    }

}

@media (max-width: 767px) {
    .up-btn {
        right: 20rem;
        bottom: 20rem;
    }
    .person-area {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto); 
    }
    .person-padding-top{
        padding-top: 60rem;
     }
     
    .person-box p{
        font-size: 20rem;
        padding: 16rem;
    }
    .person-box span {
        font-size: 15rem;
    }
    .person-box span img {
        width: 48rem;
    }
    .sec-13 {
        padding-top: 80rem;
        padding-bottom: 80rem;
    }
    .sec-12 .obj-1 {
        width: 300rem;
    }
}


/********** ↓ sec-13 ↓ **********/
/* faq 탭 컨테이너 */
.tab-menu {
    margin: 20rem auto;
}

.tab-nav {
    overflow: hidden;

    white-space: nowrap;
    font-size: 0;
}

.tab-nav li {
    width: 20%;
    display: inline-block; 
    list-style: none;
    text-align: center;
}

.tab-nav a {
    font-size: 20rem;
    display: block;
    padding: 10rem 20rem;
    text-decoration: none;
    color: #f37320;
    border-bottom: 2rem solid rgba(243, 115, 32, 0.3);
}

.tab-nav a.active {
    border-bottom: 2rem solid #f37320;
}

.tab-content {
    border-top: none;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* 모바일 스타일 (768px 이하) */
@media (max-width: 767px) {
    .tab-menu {
        width: 100%;
    }
    
    .tab-nav {
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch; 
        padding-bottom: 5rem; 
    }
    
    .tab-nav li {
        width: auto;
        min-width: 100rem;
        margin: 0;
        padding: 0; 
    }
    
    .tab-nav a {
        font-size: 16rem; 
        padding: 8rem 15rem; 
        min-width: 130rem;
    }
}

/* faq list */
.faq-box ul {
    margin-top: 30rem;
    display: flex;
    flex-direction: column;
    gap: 20rem;
}
.faq-box ul li {
}
.faq-box ul li a {
    display: block;
    padding: 24rem 24rem 24rem 32rem;
    position: relative;
    font-size: 22rem;
    line-height: 1.4;
    letter-spacing: -0.03em;
    background: #F37320;
    color: #fff;
    border-radius: 15rem;
    font-family: "04HanwhaGothicB";
    word-break: keep-all;
}

.faq-box ul li a::after {
    content: '';
    position: absolute;
    right: 24rem;
    top: 50%;
    transform: translateY(-50%);
    background: url(../img/arrow.svg)no-repeat center/cover;
    width: 40rem;
    height: 40rem;
    transition: .3s;
}
.faq-box ul li.active a::after {
    transform: rotate(180deg) translateY(50%);
  }
.faq-box ul li div {
    background: #fff;
    font-size: 18rem;
    line-height: 1.5;
    letter-spacing: -0.02em;
    padding: 44rem 28rem 24rem 28rem;
    display: none;
    word-break: keep-all;
    border-radius: 0 0 15rem 15rem;
    margin-top: -20rem;
    color: rgba(0, 0, 0, 0.8);
}
.faq-box ul li div span {
    color: rgba(0, 0, 0, 0.8);
}

@media(max-width: 1200px) {
    .faq-box ul {
        gap: 16rem;
    }
    .faq-box ul li a {
        font-size: 20rem;
    }
}

@media (max-width: 767px) {

    .faq-box ul {
        margin-top: 16rem;
        gap: 12rem;
    }
    .faq-box ul li a {
        padding: 16rem 46rem 16rem 20rem;
        font-size: 16rem;
    }
    .faq-box ul li a::before {
        padding-right: 6rem;
    }
    .faq-box ul li a::after {
        width: 24rem;
        height: 24rem;
        right: 12rem;
    }
    .faq-box ul li div {
        /* padding: 44px 28px 24px 28rem; */
        font-size: 14rem;
    }
}
/********** ↓ footer ↓ **********/

footer {
    padding: 20rem 0;
}
footer img {
    height: 50rem;
}
@media (max-width: 1200px) {
    footer {
        padding-bottom: 76rem;
    }
}
@media (max-width: 767px) {
    footer {
        padding: 12rem 0 65rem  0;
    }
    footer img {
        height: 32rem;
    }
}

/* wow animate 수정 */
@keyframes fadeInUpBig {
    0% {
        opacity: 0;
        transform: translateY(1000px);
    }

    100% {
        opacity: 1;
        transform: translateY(10%);
    }
}

@keyframes zoomInOut {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.zoomInOut {
    animation-name: zoomInOut;
    animation-timing-function: cubic-bezier(0.32, 0.32, 0.27, 1.5);
}

@keyframes bellIcon {
    10% {
        transform: rotate(0) translateY(0);
    }
    20% {
        transform: rotate(20deg);
    }
    30% {
        transform: rotate(-20deg);
    }
    40% {
        transform: rotate(20deg);
    }
    50% {
        transform: rotate(0) translateY(0);
    }
}
.bellIcon {
    animation-name: bellIcon;
    /* animation-timing-function: linear; */
    animation-iteration-count: infinite;
    animation-duration: 2s;
}

/* 반응형 */
@media (min-width: 2000px) {
    html {
        font-size: 1.3px;
    }
}
@media (min-width: 2480px) {
    .sec-1 .main-visual {
        right: -45%;
        bottom: -10%;
        transform: translateY(10%);
        width: 90vh;
    }
}
@media (min-width: 3000px) {
    .sec-1 .main-visual {
        right: -42%;
        bottom: -10%;
        transform: translateY(10%);
        width: 90vh;
    }
    html {
        font-size: 1.5px;
    }
}



/* 팝업 스타일 */
.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    border: 2px solid #F37320;
    text-align: center; /* 내용 가운데 정렬 */
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 999;
}
.popup-box img {
    width: 100%;
    max-height: 800px;
    display: block;
    margin: 0 auto; 
}
.popup-close {
    position: absolute;
    top: 10px;
    right: 10px; 
    border: none;
    background: none;
    cursor: pointer;
}
.popup-close img {
    width: 24px;
}
.popup-btn-box {
    position: absolute;
    bottom: 24px;
    width: 100%;
    transform: translate(-50%, -50%);
}
.popup-btn {
    display: inline-block;
    width: 70%;
    font-size: 18px;
    padding: 20px; 
    color: #fff;
    background: #F37320;
    text-decoration: none;
    border-radius: 8px;
}
.popup-btn:hover {
    background-color: #D15403
}
@media (max-width: 767px) {
    .popup-box img {
        width: 90vw;
    } 
    .popup-btn-box {
        bottom: 8px;
    }
    .popup-btn {
        padding: 16px; 
        font-size: 16px;
    }
}

/* 링크 변경 */
.link-before {
    display: block;
}
.link-after {
    display: none;
}