@charset "utf-8";

/* ==========================================================================
   1. 헤더 (Header) 공통 및 PC버전
   ========================================================================== */
#header {
    position: absolute;
    /* 💡 PC는 absolute 고정 */
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    z-index: 9999;
}

#header .gnb_wrap svg {
    stroke: #ffffff;
    transition: all 0.3s ease;
}

/* 스크롤 시 반전 (.header-scrolled) */
#header.header-scrolled {
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid #eee;
}

#header.header-scrolled .gnb_wrap a {
    color: #000000 !important;
}

#header.header-scrolled .gnb_wrap svg {
    stroke: #000000;
}

/* --- 2. PC 레이아웃 (로고 좌측, 메뉴들 우측 정렬) --- */
.gnb_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 💡 좌우 완벽 분리 */
    height: 90px;
    padding: 0 40px;
}

.logo_wrap img {
    height: auto;
    max-height: 40px;
}

/* PC 우측 메뉴 컨테이너 */
.pc_menu_wrap {
    display: flex;
    align-items: center;
    gap: 50px;
    /* 💡 GNB와 SNB 사이 여백 */
}

/* GNB 메뉴 */
.rows_gnb_wrap nav>ul {
    display: flex;
    gap: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rows_gnb_wrap nav>ul>li {
    position: relative;
}

/* SNB 메뉴 */
.right_menu_wrap ul.right_menu {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.right_menu_wrap ul.right_menu a {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 모바일 전용 요소들 숨김 */
.mobile_btn,
.mobile_full_menu {
    display: none;
}

.rows_gnb_wrap nav>ul>li:hover .cbp-hrsub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.cbp-hrsub ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cbp-hrsub a {
    font-size: 15px !important;
}

/* ==========================================================================
   3. 모바일 레이아웃 (1024px 이하)
   ========================================================================== */
@media all and (max-width: 1024px) {

    /* 모바일 헤더 무조건 하얗게 상단 고정 */
    #header {
        position: fixed !important;
        background-color: #ffffff !important;
        border-bottom: 1px solid #eee;
    }

    /* 💡 로고(좌) / 햄버거(우) 한 줄에 강제 고정 */
    .gnb_wrap {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 60px;
        padding: 0 20px;
    }

    /* 로고 크기 및 영역 제한 (밑으로 안 밀리게) */
    .logo_wrap {
        width: auto !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
    }

    .logo_wrap img {
        height: 40px !important;
        /* 모바일 로고 크기 */
    }

    /* 모바일에서는 PC 메뉴들 숨김 */
    .pc_menu_wrap {
        display: none !important;
    }

    /* 💡 모바일 햄버거 버튼 활성화 및 색상 변경 */
    .mobile_btn {
        display: block !important;
        flex: 0 0 auto !important;
        background: none;
        border: none;
        cursor: pointer;
        padding: 5px 0 5px 15px;
        /* 우측 끝 정렬을 위해 왼쪽 패딩만 줌 */
    }

    /* 🎨 햄버거 버튼 색상 변경 (기본값: 테마 포인트 컬러인 파란색) */
    .mobile_btn svg {
        stroke: #00A7F8 !important;
        /* 검은색을 원하시면 #000000 으로 변경하세요 */
    }

    /* 💡 모바일 전체화면 메뉴 팝업 */
    .mobile_full_menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #f4f5f6;
        /* 연한 배경색 */
        z-index: 100000;
        display: none;
        flex-direction: column;
    }

    .m_menu_top {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 80px;
        padding: 0 20px;
        margin: 10px;
        background-color: #ffffff;
    }

    .m_logo img {
        height: 26px;
    }

    .m_close_btn {
        background: none;
        border: none;
        cursor: pointer;
    }

    /* 모바일 팝업 메뉴 글자들 정렬 */
    .m_menu_body {
        flex: 1;
        overflow-y: auto;
        padding: 30px 20px;
        text-align: center;
    }

    .m_gnb_ul {
        list-style: none;
        padding: 0;
        margin: 0 0 50px 0;
    }

    .m_gnb_ul li {
        margin-bottom: 40px;
    }

    .m_gnb_ul a {
        font-size: 30px;
        color: #000000;
        text-decoration: none;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .m_snb_ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .m_snb_ul li {
        margin-bottom: 40px;
    }

    .m_snb_ul a {
        font-size: 30px;
        color: #000000;
        text-decoration: none;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
}


/* ==========================================================================
   2. 공통 유틸리티
   ========================================================================== */
.uppercase {
    text-transform: uppercase;
}

.rb_bbs_wrap .btns_gr_wrap {
    top: 185px !important;
}

/* 게시판 fixed 버튼 위치조정 */


/* ==========================================================================
   3. 메인 콘텐츠 섹션 (유튜브, myoSonic)
   ========================================================================== */
.youtube_section,
.myosonic_section {
    width: 100%;
}

.youtube_section .inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
}

.myosonic_section .inner {
    max-width: 100%;
    /* 기존 1200px 제한 해제 (화면 전체 너비 사용) */
    margin: 0;
    /* 가운데 정렬 해제 */
    padding-left: 10%;
    /* 모니터 끝에 너무 딱 붙지 않도록 약간의 좌측 여백만 부여 */
    padding-right: 10%;
}

/* --- myoSonic 가로 배치 레이아웃 (새로 추가된 부분) --- */
.inner.myosonic_flex_container {
    display: flex;
    justify-content: space-between;
    /* 양쪽 끝으로 밀어내기 */
    align-items: center;
    /* 세로 중앙 정렬 */
    gap: 50px;
    /* 텍스트와 이미지 사이 간격 */
}

.myosonic_content_col {
    flex: 1;
    /* 남은 공간 차지 */
    max-width: 50%;
    /* 텍스트 영역이 화면의 절반을 넘지 않도록 제한 */
}

.myosonic_image_col {
    flex: 1;
    max-width: 50%;
    /* 이미지 영역 제한 */
    text-align: right;
    /* 이미지를 오른쪽 끝으로 붙임 */
}

.m_right_image {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

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


/* --- 유튜브 영상 섹션 --- */
.youtube_section {
    padding: 80px 0 0 0;
    background-color: #000;
}

.video_container {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 비율 */
    height: 0;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.video_container iframe {
    position: absolute;
    /* top, left 0 대신 화면 중앙으로 이동시킵니다 */
    top: 50%;
    left: 50%;
    /* 요소 자신의 크기 절반만큼 다시 위/왼쪽으로 당겨와서 완벽한 중앙을 맞춥니다 */
    transform: translate(-50%, -50%);

    width: 80%;
    height: 80%;
    border: none;
}

/* --- myoSonic 섹션 --- */
.myosonic_section {
    padding: 150px 0;
    /* 배경을 넓게 쓰기 위해 상하 여백 150px 할당 */
    text-align: left;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.myosonic_content .m_title_logo {
    /* 이전에 얘기했던 로고 하얗게 만드는 필터 유지 */
    filter: brightness(0) invert(1);
    -webkit-font-smoothing: antialiased;

    max-width: 350px;
    width: 100%;
    height: auto;
    margin-bottom: 30px;
    display: block;
}

.myosonic_content .m_subtitle {
    font-size: 30px;
    color: #fff;
    margin-bottom: 25px;
}

.myosonic_content .m_desc {
    font-size: 20px;
    color: #fff;
    line-height: 1.6;
    margin-bottom: 40px;
    word-break: keep-all;
}

/* LEARN MORE 버튼 */
.btn_learn_more {
    display: inline-block;
    padding: 16px 45px;
    background-color: #061224;
    color: #ffffff !important;
    font-size: 16px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #fff;
}

.btn_learn_more:hover {
    background-color: #00A7F8;
    transform: translateY(-2px);
    border: 0px;
}

/* 모바일 화면 대응 (1024px 이하일 때 세로로 떨어지게 처리) */
@media all and (max-width: 1024px) {

    body {
            padding-top: 80px !important;
            /* 모바일 헤더 높이(60px)만큼 띄우기 */
        }

    /* 가로 배치를 세로 배치로 변경 */
    .inner.myosonic_flex_container {
        flex-direction: column;
        text-align: center;
    }

    /* 컬럼 넓이를 100%로 변경하고 가운데 정렬 */
    .myosonic_content_col,
    .myosonic_image_col {
        max-width: 100%;
        width: 100%;
        text-align: center;
    }

    /* 로고 가운데 정렬 */
    .myosonic_content .m_title_logo {
        max-width: 250px;
        margin: 0 auto 20px auto;
    }

    /* 텍스트 줄바꿈 숨김 */
    .pc_br {
        display: none;
    }

    /* 디바이스 이미지 위쪽 여백 주기 */
    .myosonic_image_col {
        margin-top: 50px;
    }

    .m_right_image {
        margin: 0 auto;
    }

    /* 섹션 위아래 여백 줄이기 */
    .myosonic_section {
        padding: 100px 0;
    }
}

/* ==========================================================================
   4. 반응형 미디어 쿼리 (1024px 이하)
   ========================================================================== */
@media all and (max-width: 1024px) {

    /* 헤더 및 검색 */
    .search_top_wrap {
        display: none !important;
    }

    .gnb_wrap .snb_wrap .qm_wrap a {
        width: auto;
        padding-left: 0px;
    }

    .mobile_cb {
        clear: both;
    }

    .search_top_wrap {
        display: block;
        float: none !important;
        width: 100%;
        margin-top: 10px;
    }

    .gnb_wrap .snb_wrap .my_btn_wrap {
        display: block !important;
    }

    .gnb_wrap .snb_wrap .my_btn_wrap .btn_round.arr_bg {
        padding-left: 15px;
        padding-right: 35px;
        min-width: 92px;
        flex-shrink: 0;
        background-position: center right 15px;
    }

    .gnb_wrap .snb_wrap .qm_wrap a span {
        right: 10px;
        left: auto;
    }

    .gnb_wrap {
        flex-direction: column;
        height: auto;
        padding: 15px;
        justify-content: center;
    }

    .gnb_wrap .inner {
        gap: 10px;
        width: 100% !important;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .gnb_wrap .tog_wrap {
        margin-right: 0px;
    }

    .gnb_wrap .snb_wrap {
        gap: 10px;
    }

    .gnb_wrap .rows_gnb_wrap {
        display: flex;
        width: 100% !important;
        justify-content: flex-start;
    }

    .rows_gnb_wrap .cbp-hrmenu {
        position: relative;
        width: 100%;
        height: auto;
    }

    /* .rows_gnb_wrap .cbp-hrmenu .cbp-hrsub {
        display: none !important;
    } */

    .row_gnbs .cbp-hrmenu>ul>li {
        padding: 0 15px 0 0;
    }

    .gnb_wrap .snb_q_wrap {
        display: none;
    }

    .right_menu_wrap {
        display: none;
    }

    /* 유튜브 및 myoSonic 섹션 */
    .youtube_section {
        padding: 50px 0 30px;
    }

    .myosonic_section {
        padding: 100px 0;
    }

    /* 모바일에서 섹션 여백 축소 */

    .myosonic_content .m_title {
        font-size: 32px;
    }

    .myosonic_content .m_subtitle {
        font-size: 20px;
    }

    .myosonic_content .m_desc {
        font-size: 16px;
    }

    .pc_br {
        display: none;
    }

    /* 자연스러운 줄바꿈을 위해 br 태그 숨김 */
}

/* ==========================================================================
   5. 반응형 미디어 쿼리 (768px 이하 모바일 전용 추가)
   ========================================================================== */
@media all and (max-width: 768px) {
    .myosonic_section {
        padding: 80px 0;
        /* 작은 화면에서는 여백을 더 줄임 */
    }
}

#header .gnb_wrap .cbp-hrsub a,
#header.header-scrolled .gnb_wrap .cbp-hrsub a {
    color: #000 !important;
}


/* ==========================================================================
   1. 헤더 (Header) 기본 설정
   ========================================================================== */
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    z-index: 9999;
}

/* 모든 텍스트 및 로고 기본색: 흰색 / 💡 폰트 사이즈 확대 */
#header .gnb_wrap a {
    color: #ffffff !important;
    font-size: 18px !important;
    /* 폰트 크기 확대 */
    transition: color 0.3s ease;
    text-decoration: none;
}

#header .gnb_wrap .cbp-hrsub a {
    font-size: 15px !important;
    /* 서브메뉴에 어울리는 크기로 수정 (예: 15px) */
    font-weight: 400 !important;
    /* 너무 두껍지 않게 굵기 조절 (선택사항) */
}

#header .gnb_wrap svg {
    stroke: #ffffff;
    fill: transparent;
    transition: all 0.3s ease;
    margin-right: 5px;
}

#header .gnb_wrap #tog_gnb_mobile svg {
    fill: #ffffff;
    stroke: none;
}

/* 스크롤 시 반전 (.header-scrolled) */
#header.header-scrolled {
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid #eee;
}

#header.header-scrolled .gnb_wrap a {
    color: #000000 !important;
}

#header.header-scrolled .gnb_wrap svg {
    stroke: #000000;
}

#header.header-scrolled #tog_gnb_mobile svg {
    fill: #000000;
}

/* ==========================================================================
   2. PC 레이아웃 (로고 좌측, 메뉴 전체 우측 정렬)
   ========================================================================== */
.gnb_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 💡 로고와 메뉴를 양 끝으로 배치 */
    height: 90px;
    /* 헤더 높이 살짝 확대 */
    padding: 0 40px;
}

/* 왼쪽 로고 */
.logo_wrap {
    flex-shrink: 0;
}

.logo_wrap img {
    height: auto;
    max-height: 40px;
}

/* 오른쪽 메뉴 컨테이너 (GNB + SNB) */
.nav_wrap {
    display: flex;
    align-items: center;
    gap: 40px;
    /* GNB와 SNB 사이 여백 */
}

/* 모바일 전용 요소들 숨김 */
.mobile_btn,
.mobile_close_btn,
.mobile_dim {
    display: none;
}

/* GNB 메뉴 정렬 */
.gnb_ul {
    display: flex;
    gap: 30px;
    /* 메뉴 간 여백 넓게 */
    list-style: none;
    margin: 0;
    padding: 0;
}

.gnb_li {
    position: relative;
}

/* 우측 SNB (SHOP, ENG) */
.right_menu {
    display: flex;
    gap: 25px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.right_menu li a {
    display: flex;
    align-items: center;
}

/* ==========================================================================
   3. GNB 서브 메뉴 드롭다운 (PC)
   ========================================================================== */
/* .cbp-hrsub {
    position: absolute;
    top: 40px;
    left: -10px;
    background-color: #00A7F8;
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 15px 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
} */

.gnb_li:hover .cbp-hrsub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sub_ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sub_li {
    margin-bottom: 10px;
}

.sub_li:last-child {
    margin-bottom: 0;
}

.cbp-hrsub a {
    font-size: 15px !important;
}

#header .gnb_wrap a.active-menu,
#header.header-scrolled .gnb_wrap a.active-menu {
    color: #00A7F8 !important;
}

/* 모바일 전체메뉴 창 */
#mobile_full_menu .m_gnb_ul a.active-menu,
#mobile_full_menu .m_snb_ul a.active-menu {
    color: #00A7F8 !important;
}

#header .gnb_wrap .cbp-hrsub a:hover {
    font-size:16px !important;
    /* 파란 배경에 잘 보이는 노란색 (원하는 색상으로 변경 가능) */
    opacity: 0.9;
    color:#00A7F8 !important;
}

/* 현재 그 페이지에 접속해 있을 때(active) */
#header .gnb_wrap .cbp-hrsub a.active-menu {
    color: #fff !important;
    /* 글자색 화이트 고정 */
    font-weight: 700 !important;
    /* 밑줄로 현재 페이지 표시 */
}

/* ==========================================================================
   4. 모바일 레이아웃 (우측 햄버거 슬라이드 메뉴) 1024px 이하
   ========================================================================== */
@media all and (max-width: 1024px) {

    /* 헤더 기본 높이 축소 */
    .gnb_wrap {
        height: 70px;
        padding: 0 20px;
    }

    /* 햄버거 버튼 보이기 */
    .mobile_btn {
        display: block;
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
    }

    /* 💡 네비게이션 메뉴창을 우측 화면 밖에 숨김 처리 */
    .nav_wrap {
        position: fixed;
        top: 0;
        right: -100%;
        /* 화면 밖으로 숨김 */
        width: 300px;
        /* 슬라이드 메뉴 넓이 */
        height: 100vh;
        background-color: #ffffff;
        /* 모바일 메뉴창 배경은 흰색 */
        flex-direction: column;
        align-items: flex-start;
        padding: 80px 30px 40px;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.1);
        transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
        /* 부드러운 슬라이드 */
        z-index: 10001;
        overflow-y: auto;
    }

    /* JS로 .active 클래스가 붙으면 우측에서 튀어나옴 */
    .nav_wrap.active {
        right: 0;
    }

    /* 모바일 창에서는 스크롤 상관없이 텍스트 무조건 검은색 적용 */
    #header .gnb_wrap .nav_wrap a {
        color: #000000 !important;
        font-size: 20px !important;
        /* 모바일 메뉴 글자 크기 더 큼직하게 */
    }

    #header .gnb_wrap .nav_wrap svg {
        stroke: #000000 !important;
    }

    /* 모바일 닫기 (X) 버튼 */
    .mobile_close_btn {
        display: block;
        position: absolute;
        top: 25px;
        right: 25px;
        cursor: pointer;
    }

    /* 메뉴 세로 정렬 */
    .rows_gnb_wrap,
    .right_menu_wrap {
        width: 100%;
    }

    .gnb_ul,
    .right_menu {
        flex-direction: column;
        gap: 25px;
        /* 세로 간격 넉넉하게 */
        width: 100%;
    }

    /* 오른쪽 메뉴 구분을 위한 구분선 */
    .right_menu_wrap {
        margin-top: 40px;
        padding-top: 30px;
        border-top: 1px solid #eee;
    }

    /* 모바일 서브메뉴(드롭다운)는 항상 펼쳐지게 혹은 하단 블록으로 표시 */
    .cbp-hrsub {
        position: relative;
        top: 0;
        left: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
        background-color: #f8f8f8;
        box-shadow: none;
        margin-top: 15px;
    }

    .cbp-hrsub a {
        font-size: 16px !important;
    }

    /* 메뉴 열릴 때 뒤에 깔리는 어두운 배경 */
    .mobile_dim {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        z-index: 10000;
    }

    /* 1. 마우스를 올렸을 때 (Hover) */
    #header .gnb_wrap .nav_wrap .cbp-hrsub a:hover {
        font-size: 16px !important;
        /* PC처럼 16px 크기로 지정 */
        color: #00A7F8 !important;
        /* 모바일 포인트 컬러인 파란색 적용 */
        opacity: 0.9;
        /* 살짝 투명하게 효과 */
        text-decoration: none !important;
        /* 밑줄 없음 */
    }

    /* 2. 현재 그 페이지에 접속해 있을 때 (Active) */
    #header .gnb_wrap .nav_wrap .cbp-hrsub a.active-menu {
        color: #00A7F8 !important;
        /* 현재 페이지는 선명한 파란색 고정 */
        font-weight: 700 !important;
        /* 글자 두껍게 강조 */
        text-decoration: none !important;
        /* 밑줄 없음 */
    }
}