@charset "utf-8";

/* 인트로 재생 부분 */
.video_wr {
    position: relative;
    width: 100%;
    max-width: 1920px;
    height: 100vh;
    margin: 0 auto;
    overflow: hidden;
}

#video_bg {
    width: 100%;
    display: block;
}

/* 전체 진행 바 배경 (회색 줄) */
.video-progress-container {
    position: absolute;
    bottom: 12%;
    left: 6.4%;
    width: 87%;
    height: 2px; /* 바의 두께 */
    background: #5E4531; /* 배경은 반투명하게 */
}

/* 실제 움직이는 바 (파란색 줄) */
.video-progress-bar {
    width: 0%; /* 처음엔 0% */
    height: 100%;
    background: #fff; /* 아까 사용한 포인트 컬러 */
    transition: width 0.5s linear; /* 부드러운 움직임 */
}

.main_st_con {
    width: 94%;
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}

.main_st_con .main_st_tit p{
    font-family: 'Derivia', sans-serif;
    font-size: 9.5rem;
    text-align: right;
    position: absolute;
    top: 19.2rem;
    right: 0;
    letter-spacing: 3%;
    line-height: 1.3;
}

.main_st_con .main_st_desc p{
    font-size: 4.4rem;
    text-align: left;
    font-weight: var(--light);
    position: absolute;
    top: 60.2rem;
    left: 12.5rem;
}

/* 마우스 커서 따라다니기 효과 */

.arrow_btn{
    width: 18.6rem;
    height: 18.6rem;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    will-change: transform;
}

.arrow_btn img{
    width: 100%;
    height: 100%;
    display: block;
}

/* 마우스 커서 따라다니기 효과 */

/* 인트로 재생 부분 */

/* 인트로 → 메인 */

#intro_pg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99999;
    background: #000;
    cursor: pointer;

    /* display: none; */
}

#main_cont {
    width: 100%;
    min-height: 100vh;
}

/* 인트로 → 메인 */

/* 메인 비주얼 영역 */

.main_visual {
    position: relative;
    z-index: 1;
}

.vis_slide_wr {
    z-index: 1004;
    height: 100vh;
}

.vis_slide {
    height: 100%;
    position: relative;
}

.vis_slide .inner {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 30;
}

.vis_slide .txtbox {
    width: 100%;
    padding-top: 34vh;
    position: relative;
}

.vis_slide .txtbox .vis_st_name{
    font-family: 'Derivia', sans-serif;
    color: #fff;
    font-size: 9.5rem;
    text-align: right;
    position: absolute;
    top: 19.2rem;
    right: 7rem;
    letter-spacing: 8%;
    line-height: 1.3;
}

.vis_slide .txtbox h2 {
    font-size: 4.4rem;
    font-weight: 300;
    color: #fff;
    margin-bottom: 1rem;
    position: absolute;
    top: 53.2rem;
    left: 9rem;
}

.vis_slide .txtbox p.vis_desc {
    color: #5E4531;
    font-size: 2.9rem;
    font-weight: 300;
    position: absolute;
    top: 67.2rem;
    left: 9rem;
}

.vis_slide .swiper-slide:nth-of-type(2) .txtbox p.vis_desc {
    color: #fff;
}


.vis_slide .swiper-slide.swiper-slide-active .txtbox>* {
    opacity: 0;
    transform: translateY(5rem);
    animation: txtUp 1s 0.5s forwards;
}

.vis_slide .swiper-slide.swiper-slide-active .txtbox .tit {
    animation-delay: 1s;
}

.vis_slide .swiper-slide.swiper-slide-active .txtbox .disc {
    animation-delay: 1.5s;
}

@keyframes txtUp {
    0% {
    opacity: 0;
    transform: translateY(5rem);
}

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

.vis_slide .slide_bg {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1);
    background: no-repeat center center/cover;
    transform-origin: 50% 50%;
    will-change: transform;
    transition: none !important;
}

.vis_slide .slide_bg.bg01 
    {background-image: url("/img/main/main_visual_01.jpg");
}

.vis_slide .slide_bg.bg02 
    {background-image: url("/img/main/main_visual_02.jpg");
}

.vi_control_box {
    position: relative;
    left: -73rem;
    bottom: 15rem;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.vi_pagi_box {
    display: flex;
    align-items: center;
    gap: 20px;
}

.vi_pagi_box span {
    display: block;
    font-family: "Noto Sans KR", sans-serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: #5E4531;
}

.vi_pagi_box .current{
    color: #fff;
}

.vi_control_box .vis_paging {
    position: relative;
    width: 15rem;
    height: 2px;
    background: #5E4531;
}

.vi_control_box .vis_paging .swiper-pagination-progressbar-fill {
    height: 2px;
    background: #fff;
}

.vi_control_box .vi_control {
    display: flex;
    align-items: center;
    gap: 20px;
}

.vi_control_box .vis_arrow {
    display: block;
    width: 16px;
    height: 13px;
    transition: background 0.5s;
    z-index: 5;
    background: no-repeat center center/cover;
}

.vi_control_box .vis_arrow.vis_prev {
    background: url('/img/common/btn_prev_control.png') no-repeat;
}

.vi_control_box .vis_arrow.vis_next {
    background: url('/img/common/btn_next_control.png') no-repeat;
}

@keyframes tit_ani {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* 메인 비주얼 영역 */


/* 메인01 영역 */

.main01{
    position: relative;
    padding-top: 25rem;
}

.main01 .main_01_img{
    width: 41.9rem;
    height: 41.9rem;
    margin: 0 auto;
}

.main01 .main_01_img img {
    width: 100%;
}

.main01 .main_01_txt p{
    font-family: 'Derivia', sans-serif;
    font-size: 3.9rem;
    text-transform: capitalize;
    color: #5E4531;
    letter-spacing: 6%;
}

.main01 .main_01_txt .care{
    position: relative;
    top: -49rem;
    left: 47.6%;
}

.main01 .main_01_txt .care::after{
    content: "";
    display: block;
    width: 0.7rem;
    height: 0.7rem;
    margin-left: 3.5rem;
    background: url('/img/main/main_01_circle_icon.svg') no-repeat;
}

.main01 .main_01_txt .com{
    position: relative;
    top: -28.3rem;
    left: 27%;
}

.main01 .main_01_txt .com::after{
    content: "";
    display: block;
    width: 0.7rem;
    height: 0.7rem;
    margin-left: 14.5rem;
    margin-top: -2.5rem;
    background: url('/img/main/main_01_circle_icon.svg') no-repeat;
}

.main01 .main_01_txt .com::before{
    content: "";
    display: block;
    height: 1px;
    background: #D8D8D8;
    width: 52rem;
    position: relative;
    top: 2.5rem;
    left: -58rem;
}

.main01 .main_01_txt .res{
    position: relative;
    top: -31.5rem;
    right: -65%;
}

.main01 .main_01_txt .res::before{
    content: "";
    display: block;
    width: 0.7rem;
    height: 0.7rem;
    position: relative;
    top: 2.5rem;
    left: -2rem;
    background: url('/img/main/main_01_circle_icon.svg') no-repeat;
}

.main01 .main_01_txt .res::after{
    content: "";
    display: block;
    height: 1px;
    background: #D8D8D8;
    width: 52rem;
    position: relative;
    top: -2.5rem;
    left: 19rem;
}

.main01 .main_01_txt span{
    position: absolute;
    top: 67%;
    left: 49.5%;
}

.main01 .main_01_desc {
    text-align: center;
    line-height: 1.8;
    margin-top: 6rem;
}

.main01 .main_01_desc p{
    font-size: 3rem;
}

.main01 .main_01_desc span{
    font-size: 3rem;
    color: #C7A194;
}

.main01 .main_01_desc b{
    font-size: 3rem;
    color: #888;
    font-weight: 400;
}

/* 메인01 영역 */

/* 메인02 영역 */

.main02 {
    position: relative;
    width: 100%;
    height: 100vh;
}

.pg_up_cont{
    position: sticky;
    top: 0;
    height: 100vh;
}

.pg_up_cont, .pg_up_slide {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.pg_up_cont, .pg_up_slide .swiper-slide {
    width: 100%;
    height: 100vh;
    position: relative;
}

.pg_up_img{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: -1;
}

.pg_up_img img{
    width:100%;
}

.pg_up_text_box{
    font-family: 'Derivia', sans-serif;
    position: absolute;
    top: 10rem;
    left: 0;
}

.pg_up_text_box .pg_up_tit,
.pg_up_text_box .pg_up_tit02{
    position: relative;
    left: 77.2rem;
}

.pg_up_text_box .pg_up_tit p{
    font-size: 6.9rem;
    color: #5E4531;
    text-transform: none;
    letter-spacing: 5%;
}

.pg_up_text_box .pg_up_tit02 p{
    font-size: 6.9rem;
    color: #fff;
    text-transform: none;
    letter-spacing: 5%;
}

.pg_up_text_box .pg_up_tit p::after,
.pg_up_text_box .pg_up_tit02 p::after{
    content: "";
    display: block;
    height: 1px;
    background: #5E4531;
    opacity: 0.2;
    width: 200rem;
    margin-left: -78rem;
    margin-top: 7rem;
}

.pg_up_text_box .pg_up_left_text{
    display: flex;
    gap: 7rem;
    position: relative;
    top: 14.3rem;
    left: 17rem;
}

.pg_up_text_box .pg_up_left_text .num{
    font-size: 7.7rem;
    color: #5E4531;
    letter-spacing: 8%;
    margin-top: -0.7rem;
    margin-left: 3rem;
}

.pg_up_text_box .pg_up_left_text .num02{
    font-size: 7.7rem;
    color: #fff;
    letter-spacing: 8%;
    margin-top: -0.7rem;
    margin-left: 3rem;
}

.pg_up_text_box .pg_up_left_text .num::before{
    content: "";
    display: block;
    width: 0.7rem;
    height: 0.7rem;
    position: relative;
    top: 4.5rem;
    left: -3rem;
    background: url('/img/main/main_01_circle_icon.svg') no-repeat;
}

.pg_up_text_box .pg_up_left_text .num02::before{
    content: "";
    display: block;
    width: 0.7rem;
    height: 0.7rem;
    position: relative;
    top: 5.3rem;
    left: -3rem;
    background: url('/img/main/main_01_circle_icon.svg') no-repeat;
    filter: brightness(100);
}


.pg_up_text_box .pg_up_left_text .subject p{
    font-family: "Noto Serif KR", serif;
    font-size: 2rem;
    color: #4e321b;
    margin-bottom: 2.6rem;
    line-height: 1.8;
    font-weight: 300;
}

.pg_up_text_box .pg_up_left_text .subject02 p{
    font-family: "Noto Serif KR", serif;
    font-size: 2rem;
    color: #fff;
    margin-bottom: 2.6rem;
    line-height: 1.8;
    font-weight: 300;
}

.pg_up_text_box .pg_up_left_text .subject .desc01{
    font-size: 3.5rem;
    letter-spacing: -2%;
    color: #fff;
}

.pg_up_text_box .pg_up_left_text .subject02 .desc01{
    font-size: 3.5rem;
    letter-spacing: -2%;
    color: #fff;

} 

.pg_up_text_box .pg_up_right_text{
    position: relative;
    top: -19rem;
    left: 112rem;
}

.pg_up_text_box .pg_up_right_text02{
    font-family: "Noto Serif KR", serif;
    position: relative;
    top: -11rem;
    left: 99rem;
}

.pg_up_text_box .pg_up_right_text p,
.pg_up_text_box .pg_up_right_text02 p{
    color: #fff;
    letter-spacing: 5%;
    opacity: 0.2;
    mix-blend-mode: plus-lighter;
    text-transform: lowercase;
    white-space: nowrap;
    display: flex;
    overflow: hidden;
}

.pg_up_text_box .pg_up_right_text02 p{
    text-transform: none;
    letter-spacing: 0%;

}

.pg_up_text_box .pg_up_right_text p span {
    font-size: 13.9rem;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-block;
}

.pg_up_text_box .pg_up_right_text02 p span{
    font-size: 8.5rem;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-block;
}

.pg_up_text_box .pg_up_right_text p span.active,
.pg_up_text_box .pg_up_right_text02 p span.active {
    opacity: 1;
}

/* 메인02 영역 */

/* 메인03 영역 - 진료과목 */

/* 롤링 텍스트 */

.rolling_txt{
    position: absolute;
    top: 3rem;
    left: -10rem;
    animation: rolling_txt 10s linear infinite;
}

@keyframes rolling_txt{
    0%{
        rotate: 0deg;
    }
    100%{
        rotate: 360deg;
    }
}

/* 롤링 텍스트 */

.main03 {
    position: relative;
}

.sj_list .sj_slide {
    margin-top: 12rem;
    padding-left: 12rem;
    height: 59rem;
    z-index: 1;
    overflow: visible !important;
}

.sj_list .sj_slide .swiper-wrapper {
    display: flex;
    align-items: flex-start;
    height: 59rem;
}

.sj_list .sj_slide .swiper-slide {
    width: 35.2rem;
    height: 26.2rem;
    transition: transform 0.5s ease, width 0.5s ease;
    position: relative;
    z-index: 1;
}

.sj_list .sj_slide .swiper-slide-next {
    margin-left: 6.5rem; 
    transition: all 0.5s ease;
}


/* =======================
   2. ACTIVE STATE
======================= */

.sj_list .sj_slide .swiper-slide-active {
    transform: scale(1);
    transform-origin: left center;
    z-index: 5;
    transform: translateX(-17rem);
}

.sj_list .sj_slide .swiper-slide-active + .swiper-slide,
.sj_list .sj_slide .swiper-slide-next {
    transform: translateX(20.2rem);
    transition: transform 0.5s ease;
}

.sj_list .sj_slide .swiper-slide-prev {
    transform: translateX(-17rem);
}

.sj_list .sj_slide .swiper-slide-next ~ .swiper-slide {
    transform: translateX(20rem);
}

.swiper-slide-active .cli_con {
    width: 79.2rem;
    height: 59rem;
}

.swiper-slide-active .cli_img {
    filter: brightness(0.5);
}

.swiper-slide-active .cli_list {
    opacity: 1 !important;
    visibility: visible;
    z-index: 99;
    
}

.swiper-slide-active .cli_caption {
    left: 79.2rem;
}

.swiper-slide-active .cli_caption .cli_cap_line,
.swiper-slide-active .cli_caption .cli_cap_text {
    opacity: 1;
}


/* =======================
   3. IMAGE
======================= */

.cli_con{
    position: relative;
    z-index: 2;
    overflow: visible;
}

.cli_con .cli_img {
    width: 100%;
    height: 100%;
}

.cli_con .cli_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =======================
   4. TEXT (LEFT)
======================= */

.cli_con .cli_list {
    width: 0;
    position: absolute;
    top: 50%;
    left: 10rem;
    transform: translateY(-50%);
    opacity: 0;
    transition: transform 0.3s width 0.5s 0.3s linear;
    z-index: 10;
    overflow: hidden;
}

.swiper-slide-active .cli_con .cli_list{
    width: 63%;
}

.cli_list .cli_tit {
    font-size: 3.6rem;
    color: #fff;
    margin-bottom: 3.8rem;
}

.cli_list .cli_tit span {
    font-size: 3.6rem;
    color: #C3A89F;
}

.cli_list ul li {
    display: flex;
    gap: 19rem;
    color: #fff;
}

.cli_list .desc {
    width: 42%;
    font-size: 2rem;
    font-family: "Noto Sans KR", sans-serif;
}

.cli_list .more_btn {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.cli_list .btn_desc {
    font-size: 1.8rem;
    font-weight: 600;
    color: #fff;
}

.cli_list .more_btn span {
    font-size: 2.5rem;
    color: #C3A89F;
}

.cli_line {
    height: 1px;
    background: #9E9E9E;
    margin-bottom: 2.5rem;
}


/* =======================
   5. CAPTION (RIGHT)
======================= */

.cli_caption {
    position: absolute;
    top: 40rem;
    left: 100%;
}

.cli_caption .cli_cap_line {
    width: 37rem;
    height: 1px;
    background: #D7C7B3;
    opacity: 0;
    position: relative;
}

.cli_caption .cli_cap_line::after {
    content: "";
    position: absolute;
    right: 0;
    top: -0.4rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #D7C7B3;
}

.cli_caption .cli_cap_text {
    position: relative;
    top: -3rem;
    left: 30rem;
    opacity: 0;
    transition: all 0.5s ease;
}

.cli_cap_text .cli_cap_tit {
    font-size: 3.8rem;
    color: #333;
    text-align: right;
    margin-bottom: 1rem;
}

.cli_cap_text .cli_cap_desc {
    font-size: 2rem;
    font-weight: 300;
    color: #333;
    text-align: right;
    line-height: 1.8;
    font-family: "Noto Sans KR", sans-serif;
    margin-bottom: 2rem;
}

.cli_cap_text .cli_cap_btn {
    width: 21.9rem;
    height: 5.5rem;
    margin-left: 15rem;
    border-radius: 40rem 100rem;
    background: #AC9883;
}

.cli_cap_text .cli_cap_btn p {
    font-size: 2.1rem;
    color: #fff;
    text-align: center;
    line-height: 5.5rem;
    letter-spacing: 4%;
    font-weight: 300;
}

.cli_cap_text .cli_cap_btn:hover {
    background: #5E4531;
}

/* 드래그 버튼 : 따라다니는 버튼 */

.view_button{
    position: fixed; /* 부모 요소를 기준으로 배치 */
    top: 0; 
    left: 0;
    transform: translate(50%, 50%) scale(0);
    z-index: 10;
    transition: opactiy 0.3s, transform 0.1s ease-out;
    pointer-events: none;
}

.view_button figure{
    margin-left: 38px;
    margin-bottom: 5px;
}

/* 드래그 버튼 : 따라다니는 버튼 */

/* 메인03 영역 - 진료과목 */


/* 메인04 영역 - 의료진 소개 */

.main04 {
    position: relative;
    width: 100%;
    height: auto;
}

.mod_img{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: -1;
}

.mod_img img{
    width:100%;
}

.mod_tit{
    position: absolute;
    top: 18rem;
    left: 65.8rem;
}

.mod_tit p{
    font-family: 'Derivia', sans-serif;
    font-size: 6.9rem;
    color: #5E4531;
    text-transform: none;
    letter-spacing: 5%;
}

.mod_con{
    position: absolute;
    top: 42.9rem;
    left: 17rem;
    display: flex;
    gap: 21rem;
}

.mod_con .mod_img{
    width: 65.6rem;
    height: 65.6rem;
    overflow: hidden;
}

.mod_con .mod_img img{
    width: 100%;
}

.mod_intro .mod_tit_box{
    margin-top: 3rem;
}

.mod_intro .mod_tit_box .intro_tit{
    font-size: 3.5rem;
    color: #5E4531;
    margin-bottom: 1.3rem;
}

.mod_intro .mod_tit_box .intro_desc{
    font-size: 2rem;
    color: #222;
    font-weight: 300;
    margin-bottom: 8.6rem;
}

.mod_bp_list .mod_bp{
    display: flex;
    justify-content: space-between;
}

.mod_bp_list .mod_bp .bp_name span{
    font-family: "Noto Sans KR", sans-serif;
    font-size: 2rem;
    font-weight: 300;
}

.mod_bp_list .mod_bp .bp_name{
    font-family: "Noto Sans KR", sans-serif;
    font-size: 3.5rem;
    font-weight: 600;
    color: #5E4531;
}

.mod_bp_list .bp_flex{
    display: flex;
    gap: 12rem;
    margin-top: 3rem;
}   

.mod_bp_list ul li{
    font-family: "Noto Sans KR", sans-serif;
    font-size: 1.9rem;
    font-weight: 300;
    margin-bottom: 1.2rem;
    
}

.mod_bp_list ul li span{
    font-size: 1.9rem;
    font-weight: 300;
    color: #777;
}

.hr_line {
    display: block;
    width: 100%; /* 200%보다는 100%로 맞추고 중앙 배치가 관리하기 편합니다 */
    height: 1px;
    background: #D8D8D8;
    position: absolute;
    top: 32.4rem;
    left: 0;
    transform: scaleX(0); /* 시작은 가로 길이 0 */
    transform-origin: center; /* 중앙 기준 */
}

/* 세로선: 위에서 아래로 */
.vt_line {
    display: block;
    width: 1px; /* rotate(90deg) 대신 실제 세로선으로 설정하는 것이 직관적입니다 */
    height: 92rem; /* 원하는 길이만큼 설정 */
    background: #D8D8D8;
    position: absolute;
    top: 32.4rem;
    left: 50%; /* 중앙 기준 예시 */
    transform: scaleY(0); /* 시작은 세로 길이 0 */
    transform-origin: top; /* 위쪽 기준 */
}

/* 메인04 영역 - 의료진 소개  */


/* 메인06 영역 - 둘러보기 */

.main06 {
    position: relative;
    width: 100%;
    height: auto;
}

.around_con .ar_slide .ar_img {
    width: 100%;
}

.around_con .ar_slide .ar_img img{
    display: block;
}

.around_con .ar_slide .ar_desc{
    font-family: 'Derivia', sans-serif;
    font-size: 7.4rem;
    letter-spacing: 5%;
    color: #fff;
    position: absolute;
    bottom: 11rem;
    left: 17rem;
    z-index: 10;
}

.around_con .ar_slide02{
    position: absolute;
    bottom: 10rem;
    right:  10rem;
    width: 65rem;
    z-index: 1;

}

.around_con .ar_slide02 .ar_img{
    width: 10.8rem;
    height: 10.8rem;
    cursor: pointer;
    filter: brightness(0.3);
    transition: all 0.3s;
}

.around_con .ar_slide02 .ar_img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.around_con .ar_slide02 .swiper-slide-thumb-active .ar_img {
    filter: brightness(1);
}

.around_con .ar-swiper-button-prev,
.around_con .ar-swiper-button-next {
    display: block;
    position: absolute ;
    top: 50%;
    transform: translateY(-50%);
    width: 4rem;  
    height: 4rem;
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 3;
}

.around_con .ar-swiper-button-prev{
    left: 4rem;
    background: url("/img/main/aound_prev_icon.svg") no-repeat;
}

.around_con .ar-swiper-button-next{
    right: 4.5rem;
    background: url("/img/main/aound_next_icon.svg") no-repeat;
}

.around_con .ar-swiper-button-prev::after,
.around_con .ar-swiper-button-next::after {
    display: none;
}

/* 메인06 영역 - 둘러보기 */

/* 메인07 영역 - 공지사항 */

.main07 {
    position: relative;
    width: 100%;
    height: auto;
    font-family: "Noto Sans KR", sans-serif;
}

.line_box{
    width: 37.3rem;
    height: 118rem;
    background: #F1EEE9;
    position: absolute;
    top: 0;
    right: 7rem;
}

.notice_flex{
    display: flex;
    justify-content: space-between;
    gap: 14rem;
}

.notice_text .notice_tit{
    font-family: 'Derivia', sans-serif;
    font-size: 6.9rem;
    color: #5E4531;
    letter-spacing: 5%;
    font-weight: 300;
}

.notice_text .notice_desc{
    font-size: 2rem;
    letter-spacing: -5%;
    margin-top: 1rem;
} 

.notice_btn{
    margin-top: 5rem;
    cursor: pointer;
    display: none;
}

.notice_btn ul{
    display: flex;
    gap: 1.5rem;
}

.notice_btn ul li{
    width: 17rem;
    height: 4.6rem;
    font-size: 2rem;
    color: #fff;
    background: #5E4531;
    line-height: 4.6rem;
    text-align: center;
    border-radius: 36rem;
}

.notice_btn ul .on{
    background: #C7A194;
}

.notice_list ul,
.event_list ul{
    width: 79rem;
    height: 40.8rem;
    margin-top: 7.6rem;
}

.notice_list li,
.event_list li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    gap: 3rem;
}

.notice_list a::after,
.event_list a::after{
    content: "";
    display: block;
    height: 1px;
    background: rgba(0,0,0,0.1);
}

.notice_list li .no_date_con,
.event_list li .no_date_con{
    font-family: 'Derivia', sans-serif;
    letter-spacing: 18%;
    text-align: center;
    width: 15%;
}

.notice_list li .no_date_con .date,
.event_list li .no_date_con .date{
    font-size: 3.7rem;
    color: #C3A89F;
    height: 4.5rem;
}

.notice_list li .no_date_con .year,
.event_list li .no_date_con .year{
    font-size: 1.2rem;
    color: #222;
}

.notice_list li .no_desc,
.event_list li .no_desc{
    font-size: 1.9rem;
    color: #333;
    letter-spacing: -5%;
    font-weight: 400;
    text-align: left;
    width: 80%;
}

.notice_list li .no_btn,
.event_list li .no_btn{
    width: 4.3rem;
    height: 4.3rem;
    background: #D9D9D9;
    border-radius: 4.3rem;
    opacity: 1;
    transition: all 0.2s;
}

.notice_list li .no_btn span,
.event_list li .no_btn span{
    color: #fff;
    margin: 0.9rem;
}

/* 공지사항 호버 */

.notice_list a:hover li,
.event_list a:hover li{
    background: #F1EEE9;
}

.notice_list a:hover li .no_btn,
.event_list a:hover li .no_btn{
    opacity: 0;
}

/* 공지사항 호버 */

.notice_list{
    opacity: 1;
    position: relative;
    z-index: 1;
}


.event_list {
    position: absolute;
    top: 42.9rem;
    /* left: 21.6rem; */
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}

.event_list.active {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}

.notice_img{
    width: 62rem;
}

.notice_img .simbal_tag{
    font-family: 'Derivia', sans-serif;
    font-size: 7.5rem;
    color: #D8D8D8;
    text-align: right;
    font-weight: 400;
    letter-spacing: 0;
    margin-top: -0.5rem;
    margin-bottom: 5rem;
}

.notice_img .img_tag{
    width: 62rem;
    height: 52.3rem;
}

.notice_img .img_tag img{
    width: 100%;
}

/* 메인07 영역 - 공지사항 */