/* visual sub 공통 start */
.sub_visual{
    width:100%;
    min-width:1400px;
    position: relative;
    overflow: hidden;
}
.sub_visual > img{
    width:100%;
    object-fit: cover;
    height:450px;
    transition: all 1.5s ease-in-out;
    transform:scale(1.5);
}
.sub_visual > img.zoom{transform:scale(1);}
.sub_visual .sub_typo{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width:100%;
    z-index: 99;
}

.sub_visual .sub_typo > span.up{opacity:1; transform:translate(0,0);}

.sub_visual .sub_typo span{
    color:#fff;
    display:block;
    opacity:0;
    transform:translate(0,100%);
    transition:all 1s ease-in-out;
}

.sub_visual .sub_typo span:first-child{font-size:42px; transition-delay:0s;}
/* visual sub 공통 end */

/* tab 메뉴 공통 */
/* .contents{padding:30px 0;} */
.sub_tabmenu{
    position: sticky;
    z-index: 99;
    top:160px;
    transform: translateY(-60px);
    background: rgba(0,0,0,0.6);
    height:60px;
    line-height: 60px;
}

.sub_tabmenu ul{font-size:0;}
.sub_tabmenu li{display:inline-block;}
.sub_tabmenu li a{
    display: block;
    font-size:18px;
    text-align: center;
    color:#fff;
    transition: all .3s ease-in-out;
}
.tabmenu01 li{width:33.333%;}
.tabmenu02 li{width:25%;}
.tabmenu03 li{width:33.333%;}
.tabmenu04 li{width:50%;}
.tabmenu05 li{width:100%;}
.tabmenu06 li{width:50%;}

.sub_tabmenu li a:hover{background-color: #fd7bd6; color:#fff; transition: all .3s ease-in-out;}

.sub01_01 .sub_tabmenu li:nth-child(1) a{background-color: #fd7bd6; color:#fff;}
.sub01_02 .sub_tabmenu li:nth-child(2) a{background-color: #fd7bd6; color:#fff;}
.sub01_03 .sub_tabmenu li:nth-child(3) a{background-color: #fd7bd6; color:#fff;}

.sub02_01 .sub_tabmenu li:nth-child(1) a{background-color: #fd7bd6; color:#fff;}
.sub02_02 .sub_tabmenu li:nth-child(2) a{background-color: #fd7bd6; color:#fff;}
.sub02_03 .sub_tabmenu li:nth-child(3) a{background-color: #fd7bd6; color:#fff;}
.sub02_04 .sub_tabmenu li:nth-child(4) a{background-color: #fd7bd6; color:#fff;}

.sub03_01 .sub_tabmenu li:nth-child(1) a{background-color: #fd7bd6; color:#fff;}
.sub03_02 .sub_tabmenu li:nth-child(2) a{background-color: #fd7bd6; color:#fff;}
.sub03_03 .sub_tabmenu li:nth-child(3) a{background-color: #fd7bd6; color:#fff;}

.sub04_01 .sub_tabmenu li:nth-child(1) a{background-color: #fd7bd6; color:#fff;}
.sub04_02 .sub_tabmenu li:nth-child(2) a{background-color: #fd7bd6; color:#fff;}

.sub05_01 .sub_tabmenu li:nth-child(1) a{background-color: #fd7bd6; color:#fff;}

.sub06_01 .sub_tabmenu li:nth-child(1) a{background-color: #fd7bd6; color:#fff;}
.sub06_02 .sub_tabmenu li:nth-child(2) a{background-color: #fd7bd6; color:#fff;}
/* tab 메뉴 공통 */

/* sub 타이틀 공통 */
.contents_title{
    padding:30px 0;
    position: relative;
    width:1400px;
    margin:0 auto;
    min-width:1400px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
}
.contents_title h2{
    padding:30px 0;
    font-size:64px;
    color:#000;
    font-weight:600;
    text-align: center;
}
.contents_title p{
    font-size:18px;
    color:#000;
    text-align: left;
    font-weight: 600;
}
.contents_title p span{
    display: block;
    font-size:14px;
    color:#333;
    font-weight: 300;
}
/* sub 타이틀 공통 */

/* image_show_wrap 공통 */
section .image_show_wrap,
section .image_show_wrap2{
    position: relative;
    top: 0px;
    left: 0%;
    width: 100%;
}
section .image_show_wrap{overflow: hidden; animation-duration: 1.4s;}
section .image_show_wrap2{animation-duration: 1.4s;}

section .show_img01{animation-name: show_img01;}
@keyframes show_img01{
    0%{opacity: 0; transform: translate3d(-100%, 0, 0);}
}
section .show_img02{animation-name: show_img02;}
@keyframes show_img02{
    0%{opacity: 0; transform: translate3d(100%, 0, 0);}
}
section .show_img03{animation-name: show_img03;}
@keyframes show_img03{
    0%{opacity: 0; transform: translate3d(100%, 0, 0);}
}
section .show_img04{animation-name: show_img04;}
@keyframes show_img04{
    0%{opacity: 0; transform: translate3d(-100%, 0, 0);}
}
section .show_img05{animation-name: show_img05;}
@keyframes show_img05{
    0%{opacity: 0; transform: translate3d(0, 100%, 0);}
}
section .show_img06{animation-name: show_img06;}
@keyframes show_img06{
    0%{opacity: 0; transform: translate3d(0, -100%, 0);}
}
/* image_show_wrap 공통 */

/* image 확대 공통 */
section .clip-animation {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    animation: clipExpand 1s cubic-bezier(0.770, 0.000, 0.175, 1.000) forwards;
}
    @keyframes clipExpand {
    from {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    }
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}
/* image 확대 공통 */

/* ------------------------------------------- sub -------------------------------------------------------- */
/* sub01_01 */
.sub01_01 .brand_wrap {
    width: 100%;
    padding: 80px 0 120px;
    background-color: #fff;
}

/* --- 상단 브랜드 영역 --- */
.sub01_01 .top_sec {
    position: relative;
    width: 100%;
    margin-bottom: 150px;
    overflow: hidden;
}

/* 100% 이미지 영역 */
.sub01_01 .top_sec .img_box {
    width: 100%;
    height: 85vh;
    min-height: 500px;
}
.sub01_01 .top_sec .img_box .image_show_wrap,
.sub01_01 .top_sec .img_box .image_show_wrap2 {
    height: 100%; /* WOW 애니메이션 껍데기도 높이 100% 상속 */
}
.sub01_01 .top_sec .img_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.sub01_01 .top_sec .text_overlay {
    position: absolute;
    bottom: 120px;
    left: 0;
    width: 100%;
    z-index: 10;
}

.sub01_01 .top_sec .text_overlay .inner {
    display: flex;
    justify-content: flex-end;
}

.sub01_01 .top_sec .txt_box {
    display: inline-block;
    background: rgba(255, 255, 255, 0.9);
    padding: 50px 60px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    text-align: left;
    transition: all 1s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 0;
    transform: translateY(50px); 
}
.sub01_01 .top_sec .txt_box.active {
    opacity: 1;
    transform: translateY(0);
}

.sub01_01 .top_sec .txt_box h3 {
    font-size: 36px;
    font-weight: 800;
    color: #111;
    line-height: 1.4;
    margin-bottom: 25px;
    letter-spacing: -1px;
}
.sub01_01 .top_sec .txt_box p {
    font-size: 18px;
    color: #444;
    line-height: 1.7;
    word-break: keep-all;
}
/* --- 하단 어바웃 영역 --- */
.sub01_01 .btm_sec {
    width: 100%;
}
.sub01_01 .btm_sec .sec_tit {
    font-size: 16px;
    font-weight: 700;
    color: #fd7bd6;
    margin-bottom: 40px;
}
.sub01_01 .btm_sec .content_wrap {
    display: flex;
    align-items: center;
    gap: 60px;
}

/* 하단 좌측 이미지 2장 */
.sub01_01 .btm_sec .img_group {width: 35%;}

/* 하단 우측 텍스트 */
.sub01_01 .btm_sec .txt_group {
    width: 65%;
    display: flex;
    flex-direction: column;
    gap: 25px; 
}
.sub01_01 .btm_sec .txt_group p {
    font-size: 18px;
    color: #444;
    line-height: 1.75;
    word-break: keep-all;
}

/* 강조 문구 및 대표이름 디테일 */
.sub01_01 .btm_sec .quote {
    font-weight: 700;
    color: #222 !important;
}
.sub01_01 .btm_sec .ceo_name {
    margin-top: 15px;
    color: #333 !important;
}
.sub01_01 .btm_sec .ceo_name strong {
    font-weight: 700;
}
/* sub01_01 */




/* sub01_02 */
.sub01_02 .salon_wrap {
    width: 100%;
    padding: 50px 0 100px;
}

/* 좌우 분할 Flex 레이아웃 */
.sub01_02 .salon_layout {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

/* --- 좌측 탭 메뉴 --- */
.sub01_02 .salon_tabs {
    width: 200px;
    flex-shrink: 0;
    border-top: 1px solid #ddd;
    position: sticky;
    top: 160px;
}
.sub01_02 .salon_tabs ul li {
    border-bottom: 1px solid #eee;
}
.sub01_02 .salon_tabs ul li a {
    display: block;
    padding: 15px 10px;
    font-size: 16px;
    color: #666;
    transition: all 0.3s ease;
}

/* 탭 활성화 & 호버 (베이지 포인트 #fd7bd6) */
.sub01_02 .salon_tabs ul li.active a,
.sub01_02 .salon_tabs ul li a:hover {
    color: #000;
    font-weight: 600;
    background-color: #fcfcfc;
    border-left: 3px solid #fd7bd6;
}

/* --- 우측 컨텐츠 영역 공통 --- */
.sub01_02 .salon_content {
    flex-grow: 1;
    min-width: 0; 
}

/* 우측 상단 헤더 */
.sub01_02 .salon_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #333;
    padding-bottom: 15px;
    margin-bottom: 30px;
}
.sub01_02 .salon_header .branch_title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
}
.sub01_02 .salon_arrows {
    display: flex;
    gap: 10px;
}
.sub01_02 .salon_arrows button {
    background: none;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 0; /* 배경 이미지로 화살표 처리 시 텍스트 숨김 */
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}
.sub01_02 .salon_arrows button:hover {
    border-color: #fd7bd6;
    background-color: #fd7bd6;
}
/* 버튼 안 화살표 그리기 */
.sub01_02 .salon_arrows button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-top: 2px solid #999;
    border-right: 2px solid #999;
    transition: all 0.2s ease;
}

.sub01_02 .salon_arrows button.btn_prev::before {transform: translate(-35%, -50%) rotate(-135deg);}
.sub01_02 .salon_arrows button.btn_next::before {transform: translate(-65%, -50%) rotate(45deg);}
.sub01_02 .salon_arrows button:hover::before {border-color: #fff; }





/* --- 메인 슬라이드 & 텍스트 --- */
.sub01_02 .salon_main {
    display: flex;
    gap: 40px;
    margin-bottom: 60px;
}
.sub01_02 .main_img_box {
    width: 65%; 
    overflow: hidden;
    position: relative;
}

.sub01_02 .slide_track {
    display: flex;
    width: 100%;
    transition: transform 0.8s ease-in-out;
}
.sub01_02 .slide_track > a {
    display: block;
    width: 100%;
    flex-shrink: 0;
}

.sub01_02 .slide_track > a img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sub01_02 .main_info_box {
    width: 35%; 
    padding-top: 10px;
}
.sub01_02 .info_group {
    margin-bottom: 25px;
}
.sub01_02 .info_group h4 {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}
.sub01_02 .info_group p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    word-break: keep-all; 
}
.sub01_02 .location_tit {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 40px 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}

/* --- 하단 썸네일 갤러리 --- */
.sub01_02 .salon_thumb h4 {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ddd;
}
.sub01_02 .thumb_list {
    display: flex;
    gap: 20px; 
    flex-wrap: wrap;
    align-items: center;
    justify-content: start;
}
.sub01_02 .thumb_list li {
    width:12.78%;
    cursor: pointer;
    position: relative;
    aspect-ratio: 1 / 1; /* 1:1 정사각형 고정 */
    overflow: hidden;
}
.sub01_02 .thumb_list li img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    opacity: 0.5;
    transition: all 0.3s ease;
}

.sub01_02 .thumb_list li.active img,
.sub01_02 .thumb_list li:hover img {
    opacity: 1;
}
.sub01_02 .thumb_list li.active::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid #fd7bd6; 
    pointer-events: none;
    z-index: 2;
}



.sub01_02 .tab_contents_wrap {
    flex-grow: 1;
    min-width: 0;
    position: relative;
    overflow: hidden;
}

/* 2. 개별 탭들: 한 곳(맨 위)에 다 겹쳐서 숨겨두기 */
.sub01_02 .tab_content {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    visibility: hidden;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
}

/* 3. 활성화된 탭: 원래 자리로 돌아와서 높이 잡아주기 */
.sub01_02 .tab_content.active {
    position: relative; 
    visibility: visible;
    opacity: 1;
    z-index: 1;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}



/* 디자이너 소개 영역 */
.sub01_02 .designer {
    margin-top: 80px; 
}

/* 타이틀 및 상단 선 */
.sub01_02 .designer_tit {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    padding-bottom: 15px;
    margin-bottom: 30px;
    border-bottom: 1px solid #ddd; 
}

.sub01_02 .designer_list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.sub01_02 .designer_list li {
    width: calc((100% - 60px) / 4); 
}

.sub01_02 .designer_list li a {
    display: block;
    overflow: hidden; 
    background-color: #fcfcfc; 
}

.sub01_02 .designer_img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease; 
}

.sub01_02 .designer_list li a:hover .designer_img {
    transform: scale(1.03); 
}








/* 매장 정보 & 지도 영역 */
.sub01_02 .store_info_wrap {
    margin-top: 100px;
    background-color: #f8f6f5;
    width: 100%;
}

.sub01_02 .map_area {
    width: 100%;
    position: relative;
}


/* 오시는길 */
.sub01_02 .map_area .location_map .map {position: relative;}
.sub01_02 .map_area .location_map .map .cont{display: none;}

/* 투명막: 기본적으로 스크롤/줌을 막음 */
.sub01_02 .map_area .location_map > .map::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    background: transparent;
    pointer-events: auto;
}

/* Ctrl 눌렀을 때 허용: before를 ‘없애는’ 대신 통과만 시킴 */
.sub01_02 .map_area .location_map > .map.ctrl-zoom::before {
    pointer-events: none;           /* 통과 */
}

/* 기본 안내문구 */
.sub01_02 .map_area .location_map > .map::after {
    content: "Ctrl + 스크롤로 확대 / 축소";
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 11;
    pointer-events: none;   /* 클릭 차단 안 되게 */
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* Ctrl 누른 상태에서는 문구 숨김 */
.sub01_02 .map_area .location_map > .map.ctrl-zoom::after {
    opacity: 0;
}
/* sub01_02 */


/* sub01_03 */
.sub01_03 .News_Event{
    padding:80px 0 120px 0;
}
.sub01_03 .News_Event .board .tit{
    font-size:18px;
    text-align: center;
}
.sub01_03 .News_Event .board .photo_bbs .date{display: none;}
.sub01_03 .News_Event .board .bbs_paging tr td b{background-color: #fd7bd6;}

/* sub01_03 */





/* sub02_01 */
.sub02_01 .mens{padding:80px 0 120px 0}
.sub02_01 .mens .board .bbs_paging tr td b{background-color: #fd7bd6;}
.sub02_01 .mens .board .photo_bbs li:hover img {transform: scale(1.02);}
.sub02_01 .mens .board .photo_bbs .tit a{text-align: center; font-size: 18;}
.sub02_01 .mens .board .photo_bbs .date{display: none;}
/* sub02_01 */


/* sub02_02 */
.sub02_02 .long{padding:80px 0 120px 0}
.sub02_02 .long .board .bbs_paging tr td b{background-color: #fd7bd6;}
.sub02_02 .long .board .photo_bbs li:hover img {transform: scale(1.02);}
.sub02_02 .long .board .photo_bbs .tit a{text-align: center; font-size: 18;}
.sub02_02 .long .board .photo_bbs .date{display: none;}
/* sub02_02 */


/* sub02_03 */
.sub02_03 .medium{padding:80px 0 120px 0}
.sub02_03 .medium .board .bbs_paging tr td b{background-color: #fd7bd6;}
.sub02_03 .medium .board .photo_bbs li:hover img {transform: scale(1.02);}
.sub02_03 .medium .board .photo_bbs .tit a{text-align: center; font-size: 18;}
.sub02_03 .medium .board .photo_bbs .date{display: none;}
/* sub02_03 */


/* sub02_04 */
.sub02_04 .short{padding:80px 0 120px 0}
.sub02_04 .short .board .bbs_paging tr td b{background-color: #fd7bd6;}
.sub02_04 .short .board .photo_bbs li:hover img {transform: scale(1.02);}
.sub02_04 .short .board .photo_bbs .tit a{text-align: center; font-size: 18;}
.sub02_04 .short .board .photo_bbs .date{display: none;}
/* sub02_04 */





/* sub03 */
/* sub03_01, sub03_02, sub03_03 같은 스타일  */
.sub03 .trend_gallery_wrap {
    width: 100%;
    padding:80px 0 120px 0
}
.sub03 .trend_gallery_wrap .gallery_flex_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5%;
}

/* 왼쪽 메인 슬라이드 */
.sub03 .trend_main_slider {
    width: 35%;
    position: relative;
    border: 15px solid #fd7bd6;
    box-sizing: border-box;
    overflow: hidden;
}
.sub03 .trend_main_slider .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background-color: #000;}
.sub03 .trend_main_slider .swiper-pagination-progressbar {
    top: auto;
    bottom: 0;
}
.sub03 .trend_main_slider .img_box img {
    width: 100%;
    display: block;
}
.sub03 .trend_main_slider .txt_box {
    position: absolute;
    top: 30px;
    left: 30px;
    color: #fff;
    z-index: 10;
}
.sub03 .trend_main_slider .txt_box strong {
    display: block;
    font-size: 48px;
    font-weight: 900;
    line-height: 1;
}
.sub03 .trend_main_slider .txt_box span {
    display: block;
    font-size: 18px;
    font-weight: 700;
    margin-top: 10px;
}
.sub03 .trend_main_slider .swiper-button-next,
.sub03 .trend_main_slider .swiper-button-prev {
    color: #fff;
    transform: scale(0.7);
}

.sub03 .right_info_area {
    width: 60%;
    display: flex;
    flex-direction: column;
}


.sub03 .dynamic_txt_box {
    margin-bottom: 60px;
    padding-bottom: 60px;
    border-bottom: 1px solid #ddd;
}

/* 새로 추가된 블랙 뱃지 스타일 */
.sub03 .dynamic_txt_box .badge {
    display: inline-block;
    font-size: 24px;
    color: #fff;
    background: #111;
    padding: 10px 30px;
    border-radius: 200px;
    margin-bottom: 15px;
    font-weight: bold;
    letter-spacing: 1px;
}

.sub03 .dynamic_txt_box h3 {
    font-size: 42px;
    font-weight: 900;
    color: #111;
    line-height: 1.2;
    letter-spacing: -1px;
}

.sub03 .dynamic_txt_box p {
    font-size: 18px;
    color: #666;
    margin-top: 10px;
    font-weight: 400;
}


.sub03 .trend_thumb_slider {
    width: 100%; 
    box-sizing: border-box;
}
.sub03 .trend_thumb_slider .swiper-slide {
    cursor: pointer;
    opacity: 0.4;
    box-sizing: border-box;
    border: 3px solid transparent;
    transition: all 1s ease-in-out;
}
.sub03 .trend_thumb_slider .swiper-slide-thumb-active {
    opacity: 1;
    border: 3px solid #fd7bd6;
    transition: all .3s ease-in-out;
}
.sub03 .trend_thumb_slider img {
    width: 100%;
    display: block;
}
/* sub03 */




/* sub04_01 */
.sub04_01 .academy_curriculum_wrap {
    width: 100%;
    padding: 80px 0 20px 0;
}

.sub04_01 .curriculum_box {
    position: relative;
    background-color: #fff;
    border: 1px solid #eaeaea;
    border-top: 3px solid #111;
    box-shadow: 0 15px 40px rgba(0,0,0,0.04);
    padding: 70px 40px;
    margin-bottom: 100px;
    border-radius: 15px;
}

.sub04_01 .curriculum_box .box_title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #111;
    color: #fff;
    border: none;
    border-radius: 40px;
    padding: 14px 50px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    white-space: nowrap;
}


/* 1번 박스 */
.sub04_01 .curriculum_box .lv_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    width: 100%;
}

.sub04_01 .curriculum_box .lv_list li {
    background: #f9fbfa;
    border: 1px solid #e7eeeb;
    border-radius: 12px;
    padding: 30px;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    margin: 0;
}

.sub04_01 .curriculum_box .lv_list li:hover {
    background: #fff;
    border-color: #111;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transform: translateY(-3px);
}


.sub04_01 .curriculum_box .lv_list li strong {
    font-size: 28px;
    font-weight: 900;
    color: #111;
    width: 100px;
    flex-shrink: 0;
    position: relative;
    display: inline-block;
}

.sub04_01 .curriculum_box .lv_list li strong::after {
    content: "";
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 35px;
    background: #fd7bd6;
}

/* 우측 설명 텍스트 */
.sub04_01 .curriculum_box .lv_list li span {
    font-size: 17px;
    color: #444;
    font-weight: 500;
    line-height: 1.4;
    word-break: keep-all;
}


/* MUI way */
.sub04_01 .curriculum_box .way_list {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 20px;
}

.sub04_01 .curriculum_box .way_list li {
    flex: 1;
    width: 33.333%;
    min-height: 210px;
    margin: 0;
    padding: 35px 30px;
    border: 1px solid #e7eeeb;
    border-radius: 18px;
    background: #f9fbfa;
    transition: all 0.35s ease;
}

.sub04_01 .curriculum_box .way_list li:hover {
    background: #eef6f3;
    border-color: #cbded7;
    transform: translateY(-7px);
    box-shadow: 0 15px 30px rgba(31, 55, 50, 0.07);
}

.sub04_01 .curriculum_box .way_list li strong {
    display: block;
    margin-bottom: 20px;
    color: #fd7bd6;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
}

.sub04_01 .curriculum_box .way_list li p {
    color: #666;
    font-size: 16px;
    padding:10px 0;
    word-break: keep-all;
}


/* =========================================
   sub04_01 MUI VISION (다크 시네마틱 감성)
========================================= */
.sub04_01 .mui_vision_wrap {
    position: relative;
    width: 100%;
    padding: 130px 20px; /* 위아래로 깊이감 있는 넉넉한 패딩 */
    text-align: center;
    color: #fff;
    overflow: hidden;
    border-radius: 24px; /* 투박하지 않게 모서리 라운드 처리 */
    margin-bottom: 80px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

/* 🖤 배경 이미지 & 다크 오버레이 처리 */
.sub04_01 .mui_vision_wrap .vision_bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
}
.sub04_01 .mui_vision_wrap .vision_bg img {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.05); /* 배경이 살짝 커 보이게 해서 공간감 부여 */
}
/* 사진 위에 짙은 검은색 먹물을 깔아 글씨 가독성을 높입니다 */
.sub04_01 .mui_vision_wrap .vision_bg::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(17, 17, 17, 0.75); 
}

/* 텍스트 컨텐츠 공통 레이아웃 */
.sub04_01 .mui_vision_wrap .vision_content {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
}

/* 상단 '무이 비전' 헤더 */
.sub04_01 .mui_vision_wrap .v_header {
    margin-bottom: 60px;
    position: relative;
    display: inline-block;
}
.sub04_01 .mui_vision_wrap .v_header h3 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 4px;
    margin-bottom: 8px;
}
.sub04_01 .mui_vision_wrap .v_header .en {
    display: block;
    font-size: 14px;
    letter-spacing: 5px;
    opacity: 0.6;
}
/* 기획서에 있던 상하단 디테일 장식선 */
.sub04_01 .mui_vision_wrap .v_header::before,
.sub04_01 .mui_vision_wrap .v_header::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 1px;
    background: rgba(255,255,255,0.4);
}
.sub04_01 .mui_vision_wrap .v_header::before { top: -25px; }
.sub04_01 .mui_vision_wrap .v_header::after { bottom: -25px; }

/* 본문 카피 텍스트 */
.sub04_01 .mui_vision_wrap .main_txt {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 40px;
    word-break: keep-all;
    letter-spacing: -0.5px;
}
.sub04_01 .mui_vision_wrap .sub_txt {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
    margin-bottom: 60px;
    word-break: keep-all;
}

/* 🔥 시선 강탈 하이라이트 박스 */
.sub04_01 .mui_vision_wrap .highlight_box {
    display: inline-block;
    background: rgba(255, 255, 255, 0.95); /* 거의 불투명한 화이트 */
    color: #111;
    padding: 15px 40px;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 60px;
    border-radius: 4px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4); /* 입체감을 위한 강한 그림자 */
    letter-spacing: -0.5px;
}

/* 4대 키워드 리스트 (가로 배열) */
.sub04_01 .mui_vision_wrap .keyword_list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 60px;
}
.sub04_01 .mui_vision_wrap .keyword_list li {
    font-size: 20px;
    font-weight: 500;
    position: relative;
    letter-spacing: 1px;
}
.sub04_01 .mui_vision_wrap .keyword_list li::before {
    content: '-'; /* 기획서처럼 키워드 앞에 하이픈(-) 추가 */
    margin-right: 12px;
    opacity: 0.6;
}

/* 하단 맺음말 */
.sub04_01 .mui_vision_wrap .footer_txt {
    font-size: 20px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
    word-break: keep-all;
}
/* sub04_01 */






/* sub04_02 */
.sub04_02 .academy_info_wrap {
    width: 100%;
    padding:80px 0 120px 0;
}

/* 메인 컷 이미지 */
.sub04_02 .academy_info_wrap .img_box {
    width: 100%;
    margin-bottom: 60px;
}

.sub04_02 .academy_info_wrap .img_box img {
    width: 100%;
    display: block;
}

/* 하단 텍스트 묶음 */
.sub04_02 .academy_info_wrap .txt_box {text-align: center;}
.sub04_02 .academy_info_wrap .txt_box h3 {
    font-size: 48px;
    font-weight: 700;
    color: #111;
    margin-bottom: 25px;
}

.sub04_02 .academy_info_wrap .txt_box .sub_desc {
    font-size: 24px;
    color: #222;
    margin-bottom: 40px;
    font-weight: 500;
}

.sub04_02 .academy_info_wrap .txt_box .bullet_list {
    display: inline-block;
    text-align: left;
}

.sub04_02 .academy_info_wrap .txt_box .bullet_list li {
    font-size: 18px;
    color: #555;
    line-height: 2;
    margin-bottom: 5px;
}



/* MUI 교육시스템 */
.sub04_02 .academy_info_wrap .edu_system_box {
    margin-top: 80px;
    padding-top: 70px;
    border-top: 1px solid #eee;
}

/* 상단 타이틀 영역 */
.sub04_02 .academy_info_wrap .box_header {
    text-align: center;
    margin-bottom: 50px;
}
.sub04_02 .academy_info_wrap .box_header span {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #fd7bd6;
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.sub04_02 .academy_info_wrap .box_header h4 {
    font-size: 32px;
    font-weight: 800;
    color: #111;
}

/* 카드 리스트 레이아웃 */
.sub04_02 .academy_info_wrap .system_list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 개별 카드 디자인 */
.sub04_02 .academy_info_wrap .system_list li {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    background-color: #f8f9fa;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}


.sub04_02 .academy_info_wrap .system_list li:hover {
    background-color: #fff;
    transform: translateY(-5px);
    border-color: #fcdbf0; 
    box-shadow: 0 15px 35px rgba(253, 123, 214, 0.08);
}

/* 아이콘 박스 */
.sub04_02 .academy_info_wrap .system_list .icon_box {
    width: 65px;
    height: 65px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}
.sub04_02 .academy_info_wrap .system_list li:hover .icon_box {
    background-color: #fd7bd6; 
}

/* SVG 아이콘 스타일 */
.sub04_02 .academy_info_wrap .system_list .icon_box svg {
    width: 30px;
    height: 30px;
    color: #333;
    transition: all 0.3s ease;
}
.sub04_02 .academy_info_wrap .system_list li:hover .icon_box svg {
    color: #fff; 
}

/* 텍스트 영역 */
.sub04_02 .academy_info_wrap .system_list .txt {
    text-align: left;
}
.sub04_02 .academy_info_wrap .system_list .txt h5 {
    font-size: 22px;
    font-weight: 700;
    color: #111;
    margin-bottom: 12px;
}
.sub04_02 .academy_info_wrap .system_list .txt p {
    font-size: 18px;
    color: #555;
    line-height: 1.7;
    word-break: keep-all;
}
/* sub04_02 */





/* sub05_01 */
.sub05_01 .recruit_job_wrap {
    width: 100%;
}

.sub05_01 .recruit_job_wrap .top_white_area {
    background-color: #fff;
    padding: 80px 0 200px 0;
    text-align: center;
}

.sub05_01 .recruit_job_wrap .part_title {
    font-size: 32px;
    font-weight: 800;
    color: #222;
    position: relative;
    display: inline-block;
    padding-top: 25px;
}
.sub05_01 .recruit_job_wrap .part_title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 3px;
    background-color: #fd7bd6;
}

/* 🖤 하단 다크 영역 */
.sub05_01 .recruit_job_wrap .bottom_dark_area {
    background-color: #2b2b2b; /* 고급스러운 다크 그레이 */
    padding-bottom: 120px;
}

/* 리스트 레이아웃 (가로 3단) */
.sub05_01 .recruit_job_wrap .job_list {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}
.sub05_01 .recruit_job_wrap .job_list li {
    flex: 1;
    width: 33.333%;
}

.sub05_01 .recruit_job_wrap .img_box {
    margin-top: -150px; 
    background-color: #fff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    overflow: hidden;
    border-radius: 30px;
}
.sub05_01 .recruit_job_wrap .img_box img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

.sub05_01 .recruit_job_wrap .img_box img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease, filter 0.5s ease; 
    filter: grayscale(100%); /* 흑백 100% 적용 */
}

.sub05_01 .recruit_job_wrap .job_list li:hover .img_box img {
    transform: scale(1.05);
    filter: grayscale(0%); /* 흑백을 0%로 만들어서 컬러 복구 */
}

/* 하단 텍스트 디자인 */
.sub05_01 .recruit_job_wrap .txt_box {
    padding: 40px 10px 0 10px;
}
.sub05_01 .recruit_job_wrap .txt_box strong {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
}
.sub05_01 .recruit_job_wrap .txt_box p {
    font-size: 18px;
    color: #aaa;
    line-height: 1.7;
    word-break: keep-all;
}



/* sub05_01 채용소식 (하단 게시판 영역) */
.sub05_01 .recruit_notice_wrap {
    background-color: #fff;
    padding: 120px 0 150px 0;
}

/* 타이틀 디자인 */
.sub05_01 .recruit_notice_wrap .notice_title_area {
    text-align: center;
    margin-bottom: 60px;
}
.sub05_01 .recruit_notice_wrap .notice_title_area h3 {
    font-size: 36px;
    font-weight: 800;
    color: #111;
    position: relative;
    display: inline-block;
    padding-top: 25px;
    margin-bottom: 15px;
}
/* 기획서 상단의 주황색 짧은 라인 포인트 */
.sub05_01 .recruit_notice_wrap .notice_title_area h3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background-color: #fd7bd6; 
}
.sub05_01 .recruit_notice_wrap .notice_title_area p {
    font-size: 18px;
    color: #666;
    font-weight: 500;
}

/* 테이블 디자인 */
.sub05_01 .recruit_table {
    width: 100%;
    border-top: 2px solid #fd7bd6;
    border-bottom: 1px solid #ddd;
    text-align: center;
    border-collapse: collapse;
}
.sub05_01 .recruit_table th {
    background-color: #fafafa;
    padding: 20px 0;
    font-size: 16px;
    color: #333;
    font-weight: 700;
    border-bottom: 1px solid #ddd;
}
.sub05_01 .recruit_table td {
    padding: 25px 0;
    font-size: 15px;
    color: #666;
    border-bottom: 1px solid #eee;
}
.sub05_01 .recruit_table .td_title {
    font-weight: 700;
    color: #111;
}

/* 마우스 올리면 클릭 유도 (테이블 행 호버 효과) */
.sub05_01 .recruit_table tbody tr {
    cursor: pointer;
    transition: background-color 0.2s;
}
.sub05_01 .recruit_table tbody tr:hover {
    background-color: #f9f9f9;
}
.sub05_01 .recruit_table tbody tr:hover .td_title {
    text-decoration: underline;
}

/* 다운로드 버튼 디자인 */
.sub05_01 .recruit_notice_wrap .btn_area {
    text-align: center;
    margin-top: 40px;
}
.sub05_01 .recruit_notice_wrap .btn_download {
    display: inline-block;
    background-color: #333;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    padding: 15px 40px;
    border-radius: 5px;
    transition: all 0.3s;
}
.sub05_01 .recruit_notice_wrap .btn_download:hover {
    background-color: #111;
    transform: translateY(-2px);
}
.sub05_01 .recruit_notice_wrap .btn_download .icon_down {
    display: inline-block;
    margin-right: 5px;
    font-weight: bold;
}

/* =========================================
   모달 팝업 (세로 스크롤 적용 버전)
========================================= */
.modal_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none; 
    justify-content: center;
    align-items: center;
    z-index: 9999; 
}

.modal_content {
    position: relative;
    max-width: 800px;
    width: 90%;
    animation: popUp 0.3s ease-out; 
}

/* 🔥 핵심: 이미지를 감싸는 영역에 높이 제한과 스크롤을 줍니다 */
.modal_scroll_area {
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    max-height: 85vh; /* 화면 전체 높이의 85%까지만 커지도록 제한 */
    overflow-y: auto; /* 내용이 넘치면 세로 스크롤바 자동 생성! */
}
.modal_scroll_area img {
    width: 100%;
    display: block;
}

/* 닫기 버튼 (우측 상단 고정) */
.modal_content .btn_close {
    position: absolute;
    top: -45px;
    right: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    line-height: 1;
}

/* ✨ 꿀팁: 촌스러운 기본 스크롤바를 얇고 예쁘게 커스텀 */
.modal_scroll_area::-webkit-scrollbar {
    width: 8px;
}
.modal_scroll_area::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 4px;
}
.modal_scroll_area::-webkit-scrollbar-thumb {
    background: #bbb; 
    border-radius: 4px;
}
.modal_scroll_area::-webkit-scrollbar-thumb:hover {
    background: #888; 
}

@keyframes popUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
/* sub05_01 */





/* sub06_01 */
.sub06_01 .qna{padding:80px 0 120px 0}
.sub06_01 .qna .board{position: relative;}
.sub06_01 .qna .board .answerBasic{border-top:3px solid #fd7bd6!important;}
.sub06_01 .qna .board .answerBasic thead:nth-of-type(1) tr{background-color: #f7f7f7;}
.sub06_01 .qna .board .bbs_paging tr td b{background-color: #fd7bd6;}
.sub06_01 .qna .board .bbs_chip.end{
    display: block;
    border:1px solid #fd7bd6;
    color:#fd7bd6;
    font-weight: 400;
    animation: bbs_chip 1s alternate ease-in-out infinite;
}
@keyframes bbs_chip {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


.sub06_01 .qna .board .Password_input .input-pwd{
    border:1px solid #ccc;
    width:90%;
    margin-left: 10px;
    height: 35px;
}

.Password_input + td button[type="submit"] {
    border: none;
    background: none;
    display: inline-block;
    background-color: #333;
    color: #fff;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.Password_input + td button[type="submit"]:hover {
    background-color: #111;
}

.Password_input + td + td a {
    display: inline-block;
    background-color: #fff;
    color: #666;
    padding: 7px 19px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.Password_input + td + td a:hover {
    background-color: #f8f8f8;
    color: #333;
    border-color: #ccc;
}
/* sub06_01 */


/* sub06_02 */
.sub06_02 .review{padding:80px 0 120px 0}
.sub06_02 .review .board .AW_bbs_table {border-top: 3px solid #fd7bd6;}
.sub06_02 .review .board .AW_bbs_table thead:nth-of-type(1) tr{background-color: #f7f7f7;}
.sub06_02 .review .board .bbs_paging tr td b{background-color: #fd7bd6;}
/* sub06_02 */
/* ------------------------------------------- sub -------------------------------------------------------- */