/* <---------모든 페이지 공통적용-------> */
.caption, .caption-4 {
    display: block;
    margin-top: 5px;
    font-size: 24px;
}
.f-24 {
    font-size: clamp(30px, 2vw, 36px) !important;
    line-height: clamp(48px, 7vh, 60px) !important;
}
.f-18 {
    font-size: clamp(24px, 2vw, 27px) !important;
    line-height: clamp(39px, 6vh, 45px) !important;
}
.m-top-90{
    margin-top: 90px !important;
}

.padding-80 { 
    margin: 0 auto;
    max-width: 1440px;
}

.padding-230{ 
    margin: 0 auto;
    max-width: 980px;
}
#sub-page .title2 {
    font-weight: 500;
    font-size: 57px;
    line-height: 75px;
    padding-bottom: 20px;
    border-bottom: 1px solid #AAAAAA;
    margin-bottom: 50px;
}
#sub-page .message2 {
    font-weight: 400;
    font-size: 25.5px;
    color: #717171;
    margin-bottom: 10px;
}
#sub-page .big-m-inline {
    display: block;
}

@media (max-width: 1520px) {
    .padding-80 { 
        padding: 0 80px;
    }
    #event-page.sub15 .padding-80, #event-page.sub16 .padding-80, #event-page.sub17 .padding-80, #event-page.sub19 .padding-80 {
        padding: 0; /* event-15,16,17,19 공통 */
    }
}
@media (max-width: 1280px) {
    .padding-230{
        padding: 0 100px !important;
    }
    /* #event-page.sub15 .sec02-1, #event-page.sub15 .sec03, #event-page.sub15 .sec04, #event-page.sub15 .sec05, #event-page.sub15 .sec06 {
        padding: 20px 80px 75px !important;
    } */
    #event-page.sub15 .sec02-1, #event-page.sub15 .sec03, #event-page.sub15 .sec04, #event-page.sub15 .sec05, #event-page.sub15 .sec06 {
        padding: 20px 80px 75px ;
    }
}

@media (max-width: 768px) {

    .m-top-90{
        margin-top: 30px !important;
    }

    .padding-80 { 
        padding: 0;
    }

    .padding-230{
        padding: 0 40px !important;
    }
    #sub-page .title2 {
        font-size: 39px;
        line-height: 54px;
        padding-bottom: 25px;
        border-bottom: 1px solid #AAAAAA;
        margin-bottom: 50px;
    }
    #sub-page .message2 {
        font-weight: 400;
        font-size: 22.5px;
        line-height: 29px;
        margin-bottom: 5px;
    }
    #event-page.sub15 .sec02-1, #event-page.sub15 .sec03, #event-page.sub15 .sec04, #event-page.sub15 .sec05 {
        padding: 0 20px !important;
    }

}

@media (max-width: 480px) {
    .padding-230{
        padding: 0 20px !important;
    }
    #sub-page .info {
        flex-direction: column;
        align-items: start !important;
        border-left: 1px solid #717171;
        padding-left: 10px;
        /* gap: 5px !important; */
    }
    .big-m-inline {
        display: inline !important;
    }
}


/* ✅ 메뉴 효과 */
.menu-item.active,
.menu-item:hover {
    color: #FF8EA8;
}
.menu-item a:hover,
.menu-item a:focus {
    color: #FF8EA8;
}

.submenu-item:hover,
.submenu-item:focus {
    color: #FF8EA8;
}

.submenu-item a:focus {
    color: #FF8EA8;
}

.submenu-item.focused,
.submenu-item.focused .submenu-link {
    color: #FF8EA8;
}

.menu-item.active .menu-link {
    color: #FF8EA8;
}

.page-wrapper {
    transition: transform 0.3s ease-in-out;
    width: 100%;
}

body.menu-open .page-wrapper {
    transform: translateX(-240px);
}

.body .menu-open {
    overflow: hidden;
}

/* ✅ PC 해더 */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    border-bottom: 1px solid #AAAAAA;
    background-color: #FFFFFF;
    z-index: 100;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header .nav {
    display: flex;
    justify-content: space-between;
    align-items: end;
    min-height: 75px;
    width: 100%;
    padding: 40px 0 30px 0;
}
.header .nav-left {
    margin: 0 0 0 50px;
    display: flex;
    align-items: baseline;
}
.header .logo {
    width: 290px;
    height: 65px;
    object-fit: contain;
    margin-right: 100px;
}
.header .header-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.header .menu-wrapper {
    display: flex;           
    gap: 30px;                
    list-style: none;      
    padding: 0;              
    margin: 0;
}
.header .menu-item {
    font-family: 'Poppins', sans-serif !important;
    margin-right: 40px;
    cursor: pointer;
    font-size: 25.5px;
    transition: color 0.3s;
    display: flex;
    align-items: flex-end;
    height: 25px;
}
.header .submenu-item {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500;
    color: #4f4f4f;
    font-size: 15px;
    font-weight: 500;
    padding: 20px 15px;
    border-bottom: 0.5px solid #E8E8E8;
    cursor: pointer;
    transition: color 0.3s;
    font-size: 22.5px;
}
.header .menu-item .submenu {
    display: none;
    position: absolute;
    top: 135px;
    left: 790px;
    width: 350px;
    background-color: #ffffff;
    padding: 25px;
    border: 1.5px solid #E8E8E8;
    z-index: 999;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.2);
}
.menu-item:nth-child(1) .submenu { /*left: 430px; */}
.menu-item:nth-child(2) .submenu { left: 430px; }
.menu-item:nth-child(3) .submenu { left: 520px;}
.menu-item:nth-child(4) .submenu { left: 700px;}
.menu-item:nth-child(4) .submenu { /* left: 890px; */}

/* .header .dropdown:hover .submenu,
.header .dropdown:focus-within .submenu {
    display: block;
} */
.header .menu-item.active .submenu {
    display: block;
}
.header .nav-right {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 0 50px 0 0;
}
.header .prev-issues {
    font-size: 24px;
    border: 1px solid #000000;
    border-radius: 25px;
    padding: 3px 12px 4px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    background-color: #FFFFFF;
    font-weight: 500;
    text-align: center;
    text-align-last: center;
}
.header .volume {
    font-size: 25px;
    font-weight: 500;
}
.header .search-container {
    position: relative;
    z-index: 101;
    height: 40px;
}
.header .search-bar {
    position: absolute;
    top: -16%;
    right: 0;
    transform: translateX(10px);
    width: 0;
    height: 55px;
    background-color: #F0F0F0;
    opacity: 0;
    transition: width 1s ease-out, opacity 0.8s ease-out, transform 1s ease-out;
    overflow: hidden;
    z-index: 102;
    display: flex;
    align-items: center;
    padding: 0;
}
.header .search-bar.active {
    width: 500px;
    transform: translateX(0);
    opacity: 1;
    right: -10px;
    padding: 10px;
}
.header .search-container.active .search-bar {
    right: 0;
}
.header .search-icon {
    width: 45px;
    height: 45px;
    cursor: pointer;
    z-index: 103;
    position: relative;
}
.header .search-input {
    width: 100%;
    height: 35px;
    border: none;
    outline: none;
    background-color: transparent;
    font-size: 24px;
    color: #333;
    font-family: inherit;
    padding: 0 50px 0 10px;
}
.header option[hidden] {
    display: none;
}
.header option {
    padding: 0 10px;
}
.header .search-input::placeholder {
    color: #888;
    opacity: 0.7;
}
.search-close-btn {
    font-size: 28px;
    width: 30px;
    height: 30;
    line-height: 40px;
    text-align: center;
    background: transparent;
    border: none;
    cursor: pointer;
    margin-left: auto; 
    padding: 0;
}

/* ✅ PC 메뉴 */
.header .menu-toggle {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}
.header .menu-toggle .m-menu {
    width: 25px;
    height: 25px;
}



/* ✅ 모바일 메뉴 */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 240px;
    height: 100vh;
    background-color: #fff;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.2);
    padding: 15px;
    display: flex;
    flex-direction: column;
}
.mobile-menu.open {
    transform: translateX(0);
}
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 1000;
}
.mobile-menu-links {
    max-height: 700px;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;         
    -ms-overflow-style: none; 
}
.mobile-menu-links::-webkit-scrollbar {
    display: none;                 
}
.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}
.mobile-menu .mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 10px;
}
.mobile-menu .mobile-logo {
    width: 175px;
    height: 45px;
}
.mobile-menu .m-volume {
    font-size: 19.5px;
    margin-bottom: 15px;
}
.mobile-menu .close-menu {
    border: none;
    cursor: pointer;
    background-color: black;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}
.mobile-menu .slide-menu-close {
    width: 10px;
    height: 10px;
    fill: white;
}
.mobile-menu .submenu-button {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid #AAAAAA;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.mobile-menu .menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    width: 100%;
    font-size: 24px;
    cursor: pointer;
    position: relative;
    border-bottom: 0.5px solid #AAAAAA;
}
.mobile-menu .submenu-item {
    border-bottom: 0.5px solid #AAAAAA;
}
.mobile-menu .submenu-item:last-child {
    border-bottom: none;
}
.mobile-menu .submenu {
    display: none;
    flex-direction: column;
    width: 100%;
    transition: all 0.3s ease;
}
.mobile-menu .submenu-link {
    display: block;
    color: #909090;
    font-size: 20px;
    font-weight: 400;
    padding-left: 16px;
    padding: 10px 15px;
}
.mobile-menu .menu-item.open .submenu {
    display: flex;
}
.menu-item.open .submenu-toggle .submenu-toggle-svg {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}
.mobile-menu .submenu-toggle-svg {
    transition: transform 0.3s ease;
}
.mobile-menu .m-prev-issues {
    font-size: 19.5px;
    border: 1px solid #000000;
    border-radius: 999px;
    padding: 4px 10px;
    cursor: pointer;
    display: inline-block;
    background-color: #FFFFFF;
    width: fit-content;
    text-align: center;
    display: block;  
    margin: 20px 0 0 0 ;
    text-align-last: center;
}
.mobile-menu .prev-issues-wrap {
    width: 100%;
    display: flex;
    justify-content: flex-end; 
}

/* ✅ 컨텐츠 */
#index.content {
    padding-top: 200px;
}
#sub-page.content {
    padding-top: 200px;
}

/* ✅ 모바일 하단바 */
.mobile-bottom-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 45px;
    background-color: #FFFFFF;
    border-top: 1px solid #AAAAAA;
    justify-content: space-between;
    padding: 0 10px;
    align-items: center;
    z-index: 2000;
    margin: 0 auto;
}
.mobile-bottom-bar .bar-icon {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    flex-basis: 0;
}
.mobile-bottom-bar .icon-path {
    fill: #757575;
    transition: fill 0.3s;
}

/* ✅  하단바 팝업 */
.share-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 998; /* 팝업 바로 아래에 위치하도록 설정 */
    opacity: 0;
    transition: opacity 0.3s ease;
}
.share-popup-overlay.active {
    display: block;
    opacity: 1;
}
.bar-popup {
    display: none;
    width: 100%;
    position: fixed;
    bottom: -100%;
    background-color: white;
    border: 1px solid #ccc;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 10px;
    z-index: 1500;
    padding: 10px 16px 16px;
    gap: 10px;
    opacity: 0;
    transition: bottom 0.5s ease, opacity 0.3s ease;
}
.bar-popup .line {
    margin-bottom: 10px;
    width: 15px;
    height: 2px;
    margin: 0 auto;
    border-radius: 5px;
    background-color: #D9D9DA;
}
.bar-popup.show {
    display: block;
    opacity: 1;
    bottom: 40px;
}
.bar-popup .icon-container {
    display: flex;
    justify-content: space-around;
    gap: 10px;
    padding-top: 10px;
}
.bar-popup .popup-icon {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d9d9da;
    color: #a9aaaa;
    font-weight: 400;
    font-size: 13px;
}
.bar-popup .popup-icon-img {
    width: 100%;
    height: 100%;
}

/* ✅ 떠있는 메뉴 */
.floating-buttons {
    position: fixed;
    bottom: 10%;
    right: 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 500;
    align-items: flex-end;
    transition: bottom 0.3s ease, opacity 0.3s ease;
}
.floating-buttons .circle-button {
    width: 40px;
    height: 40px;
    background-color: black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: relative;
}
.floating-buttons .circle-button:hover {
    background-color: #444;
}
.subscribe-link {
    display: flex;
    align-items: center;
    justify-content: center;
}
.floating-buttons .share-wrap {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 40px;
    overflow: hidden;
    transition: width 0.3s ease, padding 0.3s ease;
    background-color: #fff;
    box-shadow: inset 0 0 0 1px #000;
    border-radius: 9999px;
    padding-left: 0;
}
.floating-buttons .share-wrap.open {
    width: 280px;
    /* 펼쳐졌을 때의 크기 */
    padding: 0px 0px 0px 240px;
}
.floating-buttons .share-panel {
    position: absolute;
    top: 6px;
    right: calc(15% + 8px);
    display: flex;
    gap: 8px;
    transition: transform 0.4s ease, opacity 0.4s ease;
    transform: translateX(calc(100% + 8px));
    opacity: 0;
    pointer-events: none;
    z-index: 9999;
}
.floating-buttons .share-panel.active {
    transform: translateX(0);
    opacity: 1;
    pointer-events: all;
}
.floating-buttons .share-toggle {
    width: 40px;
    height: 40px;
    background-color: black;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
}
.floating-buttons .share-toggle:hover {
    background-color: #444;
}
.floating-buttons .share-panel .share-button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d9d9da;
    color: #a9aaaa;
    font-weight: 400;
    font-size: 10px;
}
.floating-buttons .share-button-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.floating-buttons .share-button {
    opacity: 0;
    /* 초기 투명도 0 */
}
.floating-buttons .share-panel.active .share-button {
    animation: fadeIn 0.3s ease-in-out forwards;
    /* 나타나는 애니메이션 적용 */
}

/* 각 버튼에 순차적인 딜레이 적용 */
.floating-buttons .share-panel.active .share-button:nth-child(1) {
    animation-delay: 0.05s;
}
.floating-buttons .share-panel.active .share-button:nth-child(2) {
    animation-delay: 0.1s;
}
.floating-buttons .share-panel.active .share-button:nth-child(3) {
    animation-delay: 0.15s;
}
.floating-buttons .share-panel.active .share-button:nth-child(4) {
    animation-delay: 0.2s;
}
.floating-buttons .share-panel.active .share-button:nth-child(5) {
    animation-delay: 0.25s;
}
.floating-buttons .share-panel.active .share-button:nth-child(6) {
    animation-delay: 0.3s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ✅ 푸터 */
.footer {
    width: 100%;
    height: auto;
    background-color: #d4d4d4;
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 14px;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footer-content {
    max-width: 1440px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 60px 150px;
}
.footer-left,
.footer-center,
.footer-right {
    min-width: 200px;
}
.footer-logo {
    height: 50px;
    width: 210px;
    display: flex;
    align-items: center;
}
.footer-icons {
    display: flex;
    gap: 10px;
}
.footer-icons .footer-link {
    background: #fff;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    text-decoration: none;
    border: 1px solid #ccc;
    font-size: 14px;
}
.footer-right {
    max-width: 540px;
    line-height: 1.5;
}
@media (max-width: 1600px) {
    .header .logo {
        margin-right: 40px;
    }
    .header .menu-item {
        margin-right: 25px;
    }
    .header .mob-br {
        display: block;
    }
    .header .volume {
        text-align: right;
        line-height: 140%;
        font-size: 22px;
    }
    .header .search-bar.active {
        width: 440px;
    }
    .header .nav-right {
        justify-content: end;
        align-items: end;
    }
    .header .prev-issues{
        padding: 3px 12px 4px;
        font-size: 21px;
    }
    .header .menu-item .submenu {
        display: none;
        position: absolute;
        top: 135px;
        left: 690px;
        width: 350px;
        background-color: #ffffff;
        padding: 25px;
        border: 1.5px solid #E8E8E8;
        z-index: 999;
        box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.2);
    }
    .menu-item:nth-child(2) .submenu { left: 375px; }
    .menu-item:nth-child(3) .submenu { left: 450px;}
    .menu-item:nth-child(4) .submenu { left: 615px;}
}

@media (max-width: 1280px) {

    /* ✅ 해더 */
    .header .volume {
        display: none;
    }

    .header .prev-issues {
        display: none;
    }
    .header {
        height: 80px;
    }
    .header .nav-left {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    .header .nav-right {
        display: flex;
        align-items: end;
        justify-content: end;
        gap: 10px;
        padding-bottom: 0px;
    }
    .header .logo {
        width: 153px;
        height: 38.4px;
        margin-bottom: 0px;
    }
    .header .search-bar.active {
        width: 210px;
        height: 45px;
        right: -5px;
    }
    .header .search-bar {
        height: 45px;
    }
    .header .nav {
        padding: 0;
        height: auto;
        padding: 30px 0 20px;  /* 위아래 16px, 좌우 20px */
        box-sizing: border-box;
    }
    .header .nav-right {
        margin: 0 20px 0 0;
    }
    .header .nav-left {
        margin: 0 0 0 20px;
    }
    .header .search-icon {
        width: 35px;
        height: 35px;
        vertical-align: middle;
    }
    .header .dropdown {
        display: none;
    }
    .header .m-menu {
        width: 100%;
        height: 100%;
        display: block;
    }
    .header .menu-toggle {
        width: 45px;     
        height: 45px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .header .search-input {
        padding: 5px;
    }
    #index.content {
        padding-top: 150px;
    }
    #sub-page.content {
        padding-top: 150px;
    }

    /* .header .prev-issues,
    .header.volume {
        display: none;
    } */

    /* ✅ 푸터 */
    .footer-content {
        flex-direction: column;
        gap: 20px;
        padding-top: 50px;
        padding-bottom: 50px;
        padding-left: 0;
        padding-right: 0;
    }
    .footer-right {
        text-align: center;
    }
    .footer .mob-br {
        display: block !important;
    }
    .footer-logo {
        width: 180px;
        height: 45px;
    }
    .footer-icons {
        gap: 5px;
    }
}


@media (max-width: 768px) {
    #index img.carousel-img-mob ,
    #index img.post-img-mob {
        display: block !important;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #index img.carousel-img,
    #index img.post-img {
        display: none !important;
    }
    #index.content {
        padding-top: 130px;
    }

    /* ✅ 섹션 */
    .section {
        padding: 20px 0;
    }

    /* ✅ 컨텐츠 */
    .content {
        margin: 0 auto;
        padding: 0;
        padding-top: 120px;
    }

    /* ✅ 하단바 */
    .mobile-bottom-bar {
        display: flex;
    }

    .bar-popup {
        display: block;
    }

    /* ✅ 푸터 */
    .footer-content {
        padding-bottom: 95px;
        padding-right: 20px;
        padding-left: 20px;
    }
}






/* <---------개별 페이지 적용-------> */


/* ✅ index.html */
#index img.carousel-img-mob,
#index img.post-img-mob {
    display: none;
}
#easy .sec01 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#index .sec01 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sec01-header {
    margin-bottom: 70px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    user-select: none;
}

.check-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    z-index: 5;
}

.check-label {
    font-size: 25.5px;
    line-height: 43.5px;
    font-weight: 600;
}

.sec01-header.active .check-path {
    stroke: #fff;
}

.sec01-header.active .check-svg .check-circle {
    fill: #000;
    stroke: #000;
}

.check-svg .check-circle {
    stroke: #AAAAAA;
}

.check-svg .check-path {
    stroke: #AAAAAA;
}

#index .sec01 .content-box {
    width: 100%;
    font-size: 17px;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #FFE2E2;
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.25);
    padding: 25px;
}

#index .sec01 .black-box {
    background-color: #000;
    color: #fff;
    padding: 8px 24px;
    border-radius: 30px;
    font-size: 25.5px;
    display: inline-block;
    margin: 10px auto 30px;
}

#index .sec01 .content-wrapper {
    width: 100%;
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
    align-items: stretch;
}

#index .sec01 .content-left,
#index .sec01 .content-right {
    flex: 1;
}

#index .sec01 .content-right {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-between;
}

#index .sec01 .text-area {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 20px;
    gap: 8px;
    flex: 1;
}

#index .sec01 .title {
    font-size: 54px;
    font-weight: 500;
    line-height: 90px;
    letter-spacing: -1;
}

#index .sec01 .catagory {
    font-weight: 500;
    font-size: 25.5px;
    
}

#index .sec01 .sub-title {
    font-weight: 400;
    font-size: 30px;
}

#index .sec01 .sec01-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#index .sec01 .sec01-btn {
    width: 100%;
    padding: 10px auto;
    box-shadow: 4px 4px 16px rgba(4, 4, 4, 0.20);
    background-color: #FFFFFF;
    color: #000000;
    padding: 20px 25px;
    font-weight: 500;
    
    font-size: 30px;
    border-radius: 8px;
    transition: scale 0.3s ease-in-out;
}


#index .sec01 .sec01-btn:hover {
    scale: 1.05;
}


#index .sec02 {
    padding: 100px 20px 170px ;
    text-align: center;
}

#index .sec02 .title {
    color: #FF7BAC;
    margin-bottom: 40px;
    font-size: 30px;
    font-weight: 700;
}

#index .sec02 .keyword-cloud {
    position: relative;
    height: 500px;
    max-width: 800px;
    margin: 0 auto;
}
#index .sec02 .keyword-cloud * {
    transform: scale(1.4);
    transform-origin: center;
}

#index .sec02 .keyword-item {
    position: absolute;
    transform: translate(-50%, -50%);
    margin-top: 50px;
    line-height: 1.2;
}


#index .sec02 .keyword {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #000000;
    font-size: 25px;
    font-weight: 500;
    transition: transform 0.3s ease-in-out;
}

#index .sec02 .keyword:hover {
    transform: scale(1.6);
}

#index .sec02 .keyword.main {
    width: 190px;
    height: 190px;
    background-color: #FFDBDD;
    color: #FF7BAC;
    font-size: 30px;
    font-weight: 500;
    border: 3px solid #FF7BAC;
    
}

#index .sec02 .keyword.emphasized {
    width: 105px;
    height: 105px;
    background-color: #FFDBDD;
    color: #FF7BAC;
    border: 3px solid #FF7BAC;
}

#index .sec02 .keyword.nano {
    width: 80px;
    height: 80px;
    font-size: 20px;
}

#index .sec02 .keyword.small {
    width: 90px;
    height: 90px;
    font-size: 20px;
}

#index .sec02 .keyword.medium {
    width: 110px;
    height: 110px;
}

#index .sec02 .keyword.mbig {
    width: 150px;
    height: 150px;
}

#index .sec02 .keyword.gray {
    background-color: #F0F0F0;
}

#index .sec02 .keyword.big {
    width: 180px;
    height: 180px;
    font-size: 26px;
}

/* 키워드 위치 설정 */
#index .sec02 .keyword-item.center {
    left: 40%;
    top: 14%;
}

#index .sec02 .keyword-item:nth-child(2) {
    left: -4%;
    top: 5%;
}

#index .sec02 .keyword-item:nth-child(3) {
    left: 21%;
    top: 5%;
}

#index .sec02 .keyword-item:nth-child(4) {
    left: 18%;
    top: 73%;
}

#index .sec02 .keyword-item:nth-child(5) {
    left: 14%;
    top: 35%;
}

#index .sec02 .keyword-item:nth-child(6) {
    left: 39%;
    top: 70%;
}

#index .sec02 .keyword-item:nth-child(7) {
    left: 66%;
    top: 50%;
}

#index .sec02 .keyword-item:nth-child(8) {
    left: -14%;
    top: 38%;
}

#index .sec02 .keyword-item:nth-child(9) {
    left: 101%;
    top: 30%;
}

#index .sec02 .keyword-item:nth-child(10) {
    left: 74%;
    top: 0%;
}

#index .sec02 .keyword-item:nth-child(11) {
    left: 83%;
    top: 50%;
}
#index .sec02 .keyword-item:nth-child(12) {
    left: 63%;
    top: 77%;
}


#index .sec03 {
    width: 100%;
}

#index .sec03 .title {
    padding: 10px 0;
    /* width: 100%; */
    font-size: 30px;
    border-bottom: 1px solid #AAAAAA;
    margin-bottom: 40px;
    font-weight: 800;
}

#index .sec03 .carousel-container {
    position: relative;
    width: 100%;
}

#index .sec03 .carousel-wrapper {
    margin: 0 auto;
    overflow: hidden;
    width: 100%;
}

#index .sec03 .carousel-track {
    display: flex;
    transition: opacity 0.3s ease-in-out;
}

#index .sec03 .carousel-item {
    width: 300px;
    flex: 0 0 auto;
    margin-right: 20px;
    text-align: left;
    overflow: hidden;
}
#search .sec03 .carousel-track {
    display: flex;
    flex-wrap: wrap; /* 줄바꿈 허용 */
    transition: opacity 0.3s ease-in-out;
}
#search .sec03 .carousel-track > * {
    flex: 0 0 23%; /* 한 줄에 4개 = 100% / 4 = 25% */
    box-sizing: border-box;
}
#index .sec03 .carousel-img:hover {
    filter: opacity(0.8);
}

#index .sec03 .carousel-img {
    width: 300px;
    height: 420px;
    object-fit: cover;
    display: block;
    transition: background-image 0.3s ease-in-out;
    background-image: linear-gradient(to bottom, transparent, transparent);
    background-size: 100% 200%;
    transform: scale(1.1);
}

#index .sec03 .caption {
    margin-top: 20px;

}

#index .sec03 .small-text {
    padding: 10px 0;
    font-size: 22.5px;
    font-weight: 400;
    color: #000000;
}

#index .sec03 .title-text {
    font-size: 27px;
    line-height: 40.5px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    letter-spacing: -1px;
}

#index .sec03 .carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-140%);
    font-size: 1rem;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    width: 50px;
    height: 50px;
}

#index .sec03 .carousel-button.left {
    left: -60px;
}

#index .sec03 .carousel-button.right {
    right: -60px;
}

#index .sec04 {
    padding-top: 40px;
    background-color: #F0F0F0;
}


#index .sec04 .sec04-wrap {
    padding: 0px 80px 60px;
    position: relative;
}

#index .sec04 .title {
    width: 100%;
    font-size: 30px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 10px 80px;
    font-weight: 900;
}

#index .sec04 .slider-section {
    width: 80%;
    max-width: 740px;
    margin-inline: auto;
    position: relative;
    margin: 0 auto;
}

#index .sec04 .line {
    height: 5px;
    border-bottom: 1px solid #AAAAAA;
    margin-bottom: 40px;
}


#index .sec04 .swiper-slider {
    overflow: hidden;
    height: 100%;
}

#index .sec04 .swiper-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

#index .sec04 .swiper-item {
    flex: 0 0 auto;
    width: 100%;
}

#index .sec04 .swiper-frame {
    display: block;
    width: 100%;
    object-fit: cover;
}

#index .sec04 .swiper-button {
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

#index .sec04 .swiper-button-prev:hover,
#index .sec04 .swiper-button-next:hover {
    opacity: 1;
}

#index .sec04 .swiper-button.prev {
    left: -80px;
}

#index .sec04 .swiper-button.next {
    right: -80px;

}

#index .sec04 .swiper-button-svg {
    width: 50px;
    height: 50px;
}
#index .sec05 .mob-br3 {
    display: none;
}

#index .sec05 .title {
    padding: 10px 0;
    width: 100%;
    font-size: 30px;
    border-bottom: 1px solid #AAAAAA;
    margin-bottom: 40px;
    font-weight: 900;
}

#index .sec05 .grid {
    display: flex;
    height: 1005px;
    gap: 20px;
    overflow: hidden;
}

#index .sec05 .left-col {
    flex: 0 0 calc(50% - 10px);
    height: 100%;
}

#index .sec05 .post-item {
    transition: transform 0.3s ease-in-out;
}

#index .sec05 .post-item:hover {
    transform: scale(1.02);
}

#index .sec05 .left-col .post-item {
    position: relative;
    overflow: hidden;
    height: 100%;
}

#index .sec05 .left-col .post-item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

#index .sec05 .left-col .post-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#index .sec05 .left-col .text-overlay {
    position: absolute;
    bottom: 40px;
    left: 40px;
    font-style: normal;
    z-index: 1;
}

#index .sec05 .left-col .text-overlay .sub-title {
    font-weight: 500;
    font-size: 22.5px;
    
    
    margin-bottom: 15px;
    color: #FFFFFF;
}

#index .sec05 .left-col .text-overlay .post-title {
    font-weight: 700;
    font-size: 30px;
    margin-top: 0;
    color: #FFFFFF;
    line-height: 1.5;
}

#index .sec05 .right-col {
    display: flex;
    flex-direction: column;
    flex: 0 0 calc(50% - 10px);
    height: calc(100% - 20px);
    gap: 20px;
}

#index .sec05 .right-row {
    display: flex;
    flex: 1;
    gap: 20px;
}

#index .sec05 .item-2 .img-container,
#index .sec05 .item-5 .img-container {
    height: 50%;
    overflow: hidden;
}

#index .sec05 .item-3 .img-container {
    height: 60%;
}

#index .sec05 .item-4 .img-container {
    height: 70%;
}


#index .sec05 .post-img {
    height: 100%;
    display: block;
    width: 100%;
    object-fit: cover;
}

#index .sec05 .item-3 .post-img {
    height: 100%;
    display: block;
    width: 100%;
    object-fit: cover;
}

#index .sec05 .text-wrap {
    display: none;
    margin-bottom: 20px;
}

#index .sec05 .sub-title {
    font-weight: 400;
    font-size: 22.5px;
    margin-bottom: 15px;
    margin-top: 20px;
}

#index .sec05 .post-title {
    font-weight: 500;
    font-size: 27px;
    line-height: 40px;
    margin-top: 0;
    letter-spacing: -1px;
}

#index .sec05 .item-2-3-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    gap: 20px;
}

#index .sec05 .item-4-5-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    gap: 20px;
}

#index .sec05 .item-2 {
    flex: 0 0 45%;
}

#index .sec05 .item-3 {
    flex: 0 0 60%;
}

#index .sec05 .item-4 {
    flex: 0 0 60%;
}

#index .sec05 .item-5 {
    flex: 0 0 40%;
}

#index .sec06 .title {
    padding: 10px 0;
    width: 100%;
    font-size: 30px;
    border-bottom: 1px solid #AAAAAA;
    margin-bottom: 40px;
}


#index .sec06 .culture-items {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
}

#index .sec06 .item {
    width: calc(25% - 20px);
    margin: 10px;
    transition: transform 0.3s ease-in-out;
}

#index .sec06 .item:hover {
    transform: translateY(-5px);
}

#index .sec06 .img-container {
    width: 100%;
    height: 170px;
    overflow: hidden;
    position: relative;
    background-color: #f0f0f0;
    margin-bottom: 20px;
}

#index .sec06 .culture-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}


#index .sec06 .sub-title {
    font-size: 22.5px;
    
    
    font-weight: 400;
    color: #000000;
    margin: 5px 0;
}

#index .sec06 .post-title {
    font-size: 27px;
    line-height: 40.5px;
    font-weight: 500;
    color: #000000;
    margin: 0;
    letter-spacing: -1px;
}

#index .sec07 .title {
    padding: 10px 0;
    width: 100%;
    font-size: 30px;
    border-bottom: 1px solid #AAAAAA;
    margin-bottom: 40px;
}

#index .sec07 {
    padding-bottom: 90px;
}

#index .sec07 .event-items {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    margin-left: -10px;
    margin-right: -10px;
}

#index .sec07 .event-items .item {
    width: calc(20% - 20px);
    margin: 10px;
    box-sizing: border-box;
    border: 6px solid transparent;
    transition: border-color 0.3s ease-in-out;
}

#index .sec07 .event-items .item:hover {
    /* border-color: rgba(255, 123, 172, 0.5);  */
    border-color: #FF7BAC;
    /* border-color: hsla(335, 100%, 55%, 0.8); */
}

#index .sec07 .image-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    overflow: hidden;
}

#index .sec07 .image-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
    z-index: 1;
    /* 텍스트보다 아래에 위치 */
}

#index .sec07 .event-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 이미지 비율 유지하며 채우기 */
}

#index .sec07 .event-title {
    position: absolute;
    top: 17px;
    left: 20px;
    color: white;
    font-size: 22.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    z-index: 5;
    line-height: 27px;
    
}


#index .sec07 .event-carousel {
    display: none;
    position: relative;
    height: 400px;
    width: 100%;
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
}


#index .sec07 .carousel-items {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease-out;
}

#index .sec07 .eventItem {
    position: absolute;
    transition: all 0.5s ease-in-out;
    width: 240px;
    box-sizing: border-box;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, scale 0.3s ease-in-out;
}


#index .sec07 .event-img {
    top: 50%;
    left: 50%;
    width: 105%;
    height: 105%;
    object-fit: cover;
    object-fit: cover;
    object-position: center;
    transform: translate(-50%, -50%);
}

#index .sec07 .event-title {
    position: absolute;
    top: 17px;
    left: 20px;
    color: white;
    font-size: 27px;
    font-weight: 500;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    z-index: 5;
    line-height: 40.5px;
    
}

#index .sec07 .visible-center {
    z-index: 3;
    transform: translateX(0) scale(1);
    opacity: 1;
}

#index .sec07 .visible-left {
    z-index: 2;
    transform: translateX(calc(-110% - 10px + 20%)) scale(0.8);
    opacity: 1;
}

#index .sec07 .visible-right {
    z-index: 2;
    transform: translateX(calc(110% + 10px - 20%)) scale(0.8);
    ;
    opacity: 1;
}

#index .sec07 .hidden {
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

/* ------------여기서부터 검색페이지 시작 */
#search {
    margin-bottom: 80px;
}
#search .title {
    font-size: 48px !important;
}
#search .search-container {
    justify-content: space-between;
    gap: 20px;
}
#search .search-container .search-item {
    margin-right: 0px;
    transition: transform 0.3s ease-in-out; /* 위로 올라가는 애니 */
}
#search .search-container .search-item:hover {
    transform: translateY(-10px); /* 위로 올라가는 애니 */
}
#search .search-container .search-img {
    width: 25vw; /* 화면 너비의 1/4 */
    aspect-ratio: 1 / 1; /* 1:1 비율 유지 */
    object-fit: cover;
    display: block;
    transition: background-image 0.3s ease-in-out;
    background-image: linear-gradient(to bottom, transparent, transparent);
    background-size: 100% 200%;
}
@media screen and (max-width: 909px) {
    #search .search-container {
        gap: 18px;
    }
    #index .sec03 .carousel-track > * {
        flex: 0 0 31%;
    }
}

@media screen and (max-width: 768px) {
    #search {
        margin-bottom: 40px;
    }
    #search .title  {
        margin: 10px 20px 40px !important;
        width: auto;
        padding: 10px 0 !important;
    }
    #search .search-container .search-img {
        width: 100vw; /* 화면 너비의 1/4 */
        aspect-ratio: 2 / 1; /* 1:1 비율 유지 */
    }
    #search .search-container {
        /* flex-direction: column; */
        /* align-items: center; */
        gap: 60px !important;
    }
    #search .search-container .search-item {
        margin-right: 0px;
        width: 100%;
    }
    
}













#sub-page .sec01 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#sub-page .mob-br {
    display: none;
}

#sub-page .sec02 .info {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: flex-start;
    margin-bottom: 20px;
}

#sub-page .sec02 .separator {
    color: #717171;
}

#sub-page .sec02 .category {
    font-weight: 700;
    font-size: 25.5px;
    
}

#sub-page .sec02 .author {
    font-weight: 400;
    font-size: 25.5px;
    
}

#sub-page .sec02 .title {
    font-weight: 500;
    font-size: 57px;
    line-height: 75px;
    margin-bottom: 10px;
}

#sub-page .sec02 .message {
    font-weight: 400;
    font-size: 25.5px;
    color: #717171;
    padding-bottom: 20px;
    border-bottom: 1px solid #AAAAAA;
    margin-bottom: 50px;
}

#sub-page .sec02 .summary {
    font-weight: 500;
    font-size: 27px;
    line-height: 48px;
    color: #FF8EA8;
    margin-bottom: 70px;
}

#sub-page .sec02 .subtitle {
    font-weight: 500;
    font-size: 39px;
    line-height: 54px;
    margin-bottom: 10px;
}

#sub-page .sec02 .paragraph {
    font-weight: 400;
    font-size: 27px;
    line-height: 48px;
    margin-bottom: 50px;
    margin-top: 30px;
}

#sub-page .sec02 .img-container {
    width: auto;
    height: 440px;
    margin-bottom: 70px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center; 
}

#sub-page .sec02 .article-img {
    max-width: 100%;
    /* width: 105%; */
    height: auto;
    display: block;
}
#sub02 .table-container .iconTitle-wrapper .icon-b, #sub02 .table-container .iconTitle-wrapper .icon-b span {
    color: #FF8EA8;
    font-size: 30px;
    font-weight: 500;
}
#sub-page .sec03 {
    padding-top: 60px;
    padding-bottom: 75px;
}

.pagination {
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    gap: 40px;
}

.pagination .nav-item {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 40px;
    position: relative;
}

.pagination .nav-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.pagination .nav-item.next {
    background-image: url('../img/sub-page/next-img.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: right;
    cursor: pointer;
}

.pagination .nav-item.prev {
    background-image: url('../img/sub-page/prev-img.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.pagination .nav-content {
    flex: 1;
}

.pagination .nav-label {
    display: block;
    font-size: 22.5px;
    font-weight: 400;
    margin-bottom: 5px;
    color: #FFFFFF;
    z-index: 5;
    position: relative;
}

.nav-title {
    font-size: 22.5px;
    font-weight: 500;
    line-height: 36px;
    margin-bottom: 5px;
    color: #FFFFFF;
    z-index: 5;
    position: relative;
}

.nav-description {
    font-size: 22.5px;
    font-weight: 400;
    line-height: 36px;
    color: #FFFFFF;
    z-index: 5;
    position: relative;
}

.pagination .nav-button {
    background: none;
    border: none;
    cursor: pointer;
    z-index: 5;
    padding: 10px 30px;
}

.pagination .nav-arrow {
    width: 30px;
    height: 30px;
    color: #fff;
}

/* sub-01-1page.html */
#sub01-1 {
    width: 0 auto;
}
.sub01-1 .pagination .nav-item.prev {
    background-image: url('../img/sub01/pagenation-prev.png');
}
.sub01-1 .pagination .nav-item.next {
    background-image: url('../img/sub01-3/pagenation-next.png');
}
#sub01-1 .wrap01 {
    display: flex;
    align-items: center;
    gap: 40px;
}
#sub01-1 .wrap01 .gray-mobile {
    display: none;
}
#sub01-1 .wrap01 .text-section{
    flex: 6;
}
#sub01-1 .wrap01 .title-01-1 {
    font-size: 80px;
    font-weight: bold;
    color: #6A6A6A;
    margin-bottom: 10px;
    white-space: nowrap;
}

#sub01-1 .wrap01 .detail-01-1 {
    font-size: 27px;
    line-height: 45px;
    letter-spacing: -0.2px;
    margin-bottom: 20px;
    text-align: justify; 
}

#sub01-1 .wrap01 .detail-01-1.mobile {
    display: none;
}

#sub01-1 .wrap01 .image-section {
    flex: 4;
}
#sub01-1 .wrap01 .image-section {
    max-width: 400px;
}
#sub01-1 .wrap01 .image-section .sub01-1-img01 {
    width: 100%;
    border-radius: 100%;
    border: 1px solid #6A6A6A;
    min-width: 250px;
}
#sub01-1 .wrap02{
    margin-top: 60px;
}
#sub01-1 .wrap02 .tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #6A6A6A;
    font-weight: bold;
    gap: 8px;
    padding-bottom: 30px;
}

#sub01-1 .wrap02 .tabs .tab {
    padding: 16px 30px;
    cursor: pointer;
    background-color: #F2F2F2;
    border-radius: 4px;
    color: #6A6A6A;
    font-size: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#sub01-1 .wrap02 .tabs-wrap{
    display: flex;
    gap: 10px;
}

#sub01-1 .wrap02 .tabs .active {
    background-color: #222222;
    color: #FFFFFF;
}
#sub01-1 .wrap02 .tabs .circle {
    color: #E05D5D;
    margin-right: 5px;
    font-size: 22.5px;
}

/* 본문 */
#sub01-1 .wrap02 .container01 {
    display: flex;
    border-bottom: 1px solid #6A6A6A;
}

#sub01-1 .wrap02 .left.pc {
    width: 40%;
    border-right: 1px solid #6A6A6A;
    padding-top: 50px ;
}

#sub01-1 .wrap02 .left.pc .left-title {
    font-size: 40px;
    line-height: 60px;
    font-weight: 700;
    color: #444444;
}

#sub01-1 .wrap02 .left.pc .left-subtitle {
    font-size: 33px;
    line-height: 50px;
    color: #444444;
    margin-top: 30px;
}
#sub01-1 .wrap02 .left.mobile{
    display: none;
}

#sub01-1 .wrap02 .right {
    width: 70%;
    padding-left: 20px;
    padding-top: 50px ;
}

#sub01-1 .wrap02 .pig-img {
    height: 350px;
    width: auto;
}

#sub01-1 .wrap02 .chatbox.first{
    margin-top: 50px;
    display: flex;
    align-items: flex-start !important;
}
#sub01-1 .wrap02 .chatbox:last-of-type {
    margin-bottom: 60px !important;
}
#sub01-1 .wrap02 .chatbox.host {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    gap: 24px;
    
}
#sub01-1 .wrap02 .chatbox.reporter {
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    margin-bottom: 40px;
    gap: 40px;
}

#sub01-1 .wrap02 .chatbox .chatbox-img {
    width: 140px;
    height: 140px;
}

#sub01-1 .wrap02 .chatbox.host .text {
    font-size: 25px;
    line-height: 40.5px;
    color: #222222;
    letter-spacing: -0.5px;
}
#sub01-1 .wrap02 .chatbox.reporter .text {
    font-size: 25px;
    line-height: 40.5px;
    color: #E05D5D;
    padding: 20px;
    background-color: #F2F2F2;
    border-radius: 20px 0px 20px 20px;
    letter-spacing: -0.5px;
}

#sub01-1 .wrap03 {
    margin-top: 60px;
    margin-bottom: 30px;
}
#sub01-1 .wrap03 .light-svg{
    width: 35px;
    height: 35px;
    display: block;
}
#sub01-1 .wrap03 .title-wrap  {
    display: flex;
    align-items: center;
    gap: 10px;
}

#sub01-1 .wrap03 .reform-title  {
    font-size: 33px;
    color: #444444;
    font-weight: 400;
}

#sub01-1 .wrap03 .reform-wrap {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

#sub01-1 .wrap03 .reform-item {
    display: flex;
    align-items: center;
}

#sub01-1 .wrap03 .icon {
    flex-shrink: 0;
    width: 250px;
    width: 250px;
    z-index: 10;
    object-fit: cover;
}

#sub01-1 .wrap03 .icon .reform-img{
    width: 100%;
    height: 100%;
    z-index: 10;
}
#sub01-1 .wrap03 .reform-content {
    background-color: #FCE7E9;
    border-radius: 4px;
    padding: 22.5px 20px 22.5px 80px;
    width: 100%;
    margin-left: -50px;
    z-index: 1;
}

#sub01-1 .wrap03 .reform-subtitle {
    font-size: 27px;
    margin: 0 0 10px;
    font-weight: 600;
}

#sub01-1 .wrap03 .reform-ul {
    list-style-type: disc; 
    padding-left: 20px;  
    margin: 0;
}

#sub01-1 .wrap03 .reform-li {
    margin-bottom: 8px;
    font-size: 22.5px;
    color: #333;
    margin-left: 5px;
}
#sub01-1 .wrap03 .reform-p {
    font-size: 25px;
    font-weight: 400;
}


@media (max-width: 1000px) {
    .sub01-1 .nav-content .mob-br3 {
        display: none ;
    }
}

@media (max-width: 1280px) {
    #sub01-1 .wrap01 {
        flex-direction: column;
        gap: 60px;
    }
    #sub01-1 .wrap01 .text-section {
        width: 100%;
    }
    #sub01-1 .wrap01 .title-01-1 {
        font-size: 60px;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #717171;
        padding-bottom: 40px;
        line-height: 20px;
    }
    #sub01-1 .wrap01 .detail-01-1.pc{
        display: none;
    }
    #sub01-1 .wrap01 .image-section {
        max-width: 500px;
    }
    #sub01-1 .wrap01 .image-section .sub01-1-img01 {
        min-width: 0;
    }
    #sub01-1 .wrap01 .detail-01-1.mobile {
        display: block;
        margin-bottom: 50px;
    }
    #sub01-1 .wrap02 .container01 {
        margin-bottom: 50px;
    }
    #sub01-1 .wrap02 .pig-img {
        height: auto;
        width: 100%;
    }
    #sub01-1 .wrap02 .tabs {
        padding-bottom: 20px;
    }
    #sub01-1 .wrap02 .tabs .tab {
        padding: 10px 25px;
    }
    #sub01-1 .wrap02 .left.mobile .left-title {
        font-size: 40px;
        line-height: 60px;
        font-weight: 700;
        color: #444444;
    }
    #sub01-1 .wrap02 .left.mobile .left-subtitle {
        font-size: 33px;
        line-height: 50px;
        color: #444444;
        margin-top: 25px;
    }
    #sub01-1 .wrap02 .left.mobile{
        display: block;
        margin-top: 30px;
        text-align: center;
    }
    #sub01-1 .wrap02 .left.pc {
        display: none;
    }
    #sub01-1 .wrap02 .right {
        width: 100%;
        padding: 50px 0 0 0 ;
    }
    #sub01-1 .wrap03 .reform-wrap {
        margin-top: 40px;
        gap: 10px;
    }
    #sub01-1 .wrap03 .reform-title  {
        font-size: 30px;
        align-items: start;
    }
    #sub01-1 .wrap03 .reform-item {
        background-color: #FCE7E9;
        padding: 20px;
        gap: 20px;
        align-items: start;
    }
    #sub01-1 .wrap03 .icon {
        display: flex;
        width: 120px;
        height: 120px;
    }
    #sub01-1 .wrap03 .reform-content {
        flex: 1;  
        padding: 0px;
        width: 100%;
        margin-left: 0px;
        z-index: 1;
    }
    #sub01-1 .wrap03 .reform-subtitle {
        font-size: 24px;
    }
    #sub01-1 .wrap03 .reform-p {
        font-size: 24px;
    }
    #sub01-1 .wrap03 {
        margin-bottom: 60px;
    }
}
@media (max-width: 767px) {

    #sub01-1 .wrap02{
        margin-top: 0px;
    }
    #sub01-1 .wrap02 .tabs .circle {
        margin-right: 0px;
        font-size: 15px;
    }
    #sub01-1 .wrap02 .chatbox.host {
        flex-direction: column;       
        align-items: flex-start;
    }
    #sub01-1 .wrap02 .chatbox-img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #sub01-1 .wrap02 .chatbox.reporter {
        flex-direction: column;       
        align-items: flex-start;
    }
    #sub01-1 .wrap03 {
        margin-top: 0px;
    }
    #sub01-1 .wrap02 .container01{
        border-bottom: none;
    }
}

@media (max-width: 480px) {
    #sub01-1 .wrap01 .image-section .sub01-1-img01 {
        min-width: 0px;
    }
    #sub01-1 .wrap02 .tabs .tab {
        padding: 10px 14px;
        font-size: 21px;
        gap: 10px;
    }
    #sub01-1 .mob-br3 {
        display: none;
    }
    #sub01-1 .mob-br {
        display: block !important;
    }
    #sub01-1 .wrap03 .icon {
        display: flex;
        width: 90px;
        height: 90px;
    }
}


/* sub-01-2page.html */
#sub01-2 {
    width: 0 auto;
}
.sub01-2 .pagination .nav-item.prev {
    background-image: url('../img/sub01/pagenation-prev.png');
}
.sub01-2 .pagination .nav-item.next {
    background-image: url('../img/sub01-3/pagenation-next.png');
}
#sub01-2 .wrap01 {
    display: flex;
    align-items: center;
    gap: 40px;
}
#sub01-2 .wrap01 .gray-mobile {
    display: none;
}
#sub01-2 .wrap01 .text-section{
    flex: 6;
    width: 100%;
}
#sub01-2 .wrap01 .title-01-2 {
    font-size: 80px;
    font-weight: bold;
    color: #6A6A6A;
    margin-bottom: 10px;
    white-space: nowrap;
}

#sub01-2 .wrap01 .detail-01-2 {
    font-size: 27px;
    line-height: 45px;
    letter-spacing: -0.2px;
    margin-bottom: 20px;
    text-align: justify; 
}

#sub01-2 .wrap01 .detail-01-2.mobile {
    display: none;
}

#sub01-2 .wrap01 .image-section {
    flex: 4;
}
#sub01-2 .wrap01 .image-section {
    max-width: 400px;
}
#sub01-2 .wrap01 .image-section .sub01-2-img01 {
    width: 100%;
    border-radius: 100%;
    border: 1px solid #6A6A6A;
    min-width: 250px;
}
#sub01-2 .wrap02{
    margin-top: 30px;
}
#sub01-2 .wrap02 .tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #6A6A6A;
    font-weight: bold;
    gap: 8px;
    padding-bottom: 30px;
}

#sub01-2 .wrap02 .tabs .tab {
    padding: 16px 30px;
    cursor: pointer;
    background-color: #F2F2F2;
    border-radius: 4px;
    color: #6A6A6A;
    font-size: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#sub01-2 .wrap02 .tabs-wrap{
    display: flex;
    gap: 10px;
}

#sub01-2 .wrap02 .tabs .active {
    background-color: #222222;
    color: #FFFFFF;
}
#sub01-2 .wrap02 .tabs .circle {
    color: #E05D5D;
    margin-right: 5px;
    font-size: 22.5px;
}

/* 본문 */
#sub01-2 .wrap02 .container01 {
    display: flex;
    border-bottom: 1px solid #6A6A6A;
}

#sub01-2 .wrap02 .left.pc {
    width: 40%;
    border-right: 1px solid #6A6A6A;
    padding-top: 50px ;
}

#sub01-2 .wrap02 .left.pc .left-title {
    font-size: 40px;
    line-height: 60px;
    font-weight: 700;
    color: #444444;
}

#sub01-2 .wrap02 .left.pc .left-subtitle {
    font-size: 33px;
    color: #444444;
    margin-top: 30px;
    line-height: 50px;
}
#sub01-2 .wrap02 .left.mobile{
    display: none;
}

#sub01-2 .wrap02 .right {
    width: 70%;
    padding-left: 20px;
    padding-top: 50px ;
}

#sub01-2 .wrap02 .main-img {
    width: 200px;
    display: block;
    margin-bottom: 24px;
}
#sub01-2 .wrap02 .pig-img {
    width: 100%;
}

#sub01-2 .wrap02 .chatbox.first{
    margin-top: 50px;
    display: flex;
    align-items: flex-start !important;
}
#sub01-2 .wrap02 .chatbox:last-of-type {
    margin-bottom: 60px !important;
}
#sub01-2 .wrap02 .chatbox.host {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    gap: 24px;
    
}
#sub01-2 .wrap02 .chatbox.reporter {
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    margin-bottom: 40px;
    gap: 40px;
}

#sub01-2 .wrap02 .chatbox .chatbox-img {
    width: 140px;
    height: 140px;
}

#sub01-2 .wrap02 .chatbox.host .text {
    font-size: 25px;
    line-height: 40.5px;
    color: #222222;
    letter-spacing: -0.5px;
}
#sub01-2 .wrap02 .chatbox.reporter .text {
    font-size: 25px;
    line-height: 40.5px;
    color: #E05D5D;
    padding: 20px;
    background-color: #F2F2F2;
    border-radius: 20px 0px 20px 20px;
    letter-spacing: -0.5px;
}
#sub01-2 .wrap02 .chatboxx.reporter {
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    margin-bottom: 16px;
    gap: 40px;
}
#sub01-2 .wrap02 .chatboxx .chatbox-img {
    width: 140px;
    height: 140px;
}
#sub01-2 .chatboxx.reporter.re-1 .text {
    font-size: 25px;
    line-height: 40.5px;
    color: #E05D5D;
    padding: 20px;
    background-color: #F2F2F2;
    border-radius: 20px 0px 20px 20px;
    letter-spacing: -0.5px;
    /* margin-bottom: 16px; */
}
#sub01-2 .right .mob-br-01-2 {
    display: none;
}
#sub01-2 .right .graph-img {
    background-color: #F2F2F2;
    border-radius: 16px 0px 16px 16px;
    font-size: 15px;
    line-height: 32px;
    padding: 20px;
    margin-bottom: 40px;
    margin-right: 178px;
}
#sub01-2 .right .graph-title {
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    margin-bottom: 10px;
}
#sub01-2 .right .graph-text {
    font-size: 25px;
    line-height: 42px;
    margin-top: 16px;
}
#sub01-2 .right .graph-text2 {
    font-size: 18px;
    line-height: 32px;
    margin-bottom: 8px;
    text-align: right;
}
#sub01-2 .right .graph-text3 {
    font-size: 18px;
    line-height: 32px;
    margin-top: 8px;
}
/* sub01-2__tablebox */
#sub01-2 .right .sub01-2_tablebox {
    background-color: #F2F2F2;
    border-radius: 16px 0px 16px 16px;
    padding: 20px;
    margin-bottom: 40px;
    margin-right: 178px;
}
#sub01-2 .right .sub01-2_tablebox .graph-title{
    font-size: 24px;
    line-height: 32px;
    font-weight: 600;
    margin-bottom: 16px;
}
#sub01-2 .right .real_tablebox {
    display: block;
}
#sub01-2 .right .table_col1 {
    display: flex;
    font-size: 18px;
    line-height: 32px;
    font-weight: 600;
}
#sub01-2 .right .table_col1 .col1_category1 {
    background-color: #fff;
    text-align: center;
    flex: 35%;
    padding: 4px 0;
}
#sub01-2 .right .table_col1 .col1_category2 {
    background-color: #747678;
    text-align: center;
    flex: 35%;
    padding: 4px 0;
    color: #fff;
}
#sub01-2 .right .table_col1 .col1_category3 {
    background-color: #FF8EA8;
    text-align: center;
    flex: 30%;
    padding: 4px 0;
    color: #fff;
}
#sub01-2 .right .real_tablebox .for_diver-gap {
    gap: 16px;
    display: flex;
    flex-direction: column;
    margin-top: 8px;
}
#sub01-2 .right .real_tablebox .table-divider {
    border-bottom: 1px dashed #222;
}
#sub01-2 .right .table_col2,
#sub01-2 .right .table_col3,
#sub01-2 .right .table_col4,
#sub01-2 .right .table_col5,
#sub01-2 .right .table_col6 {
    display: flex;
    align-items: center;
} 
#sub01-2 .right .table_col6 {
    padding-bottom: 16px;
    border-bottom: 1px dashed #222;
}
#sub01-2 .right .table_col2 .col2_sub_category{
    padding: 8px 14px 8px 0;
    text-align: center;
    font-size: 22px;
    line-height: 32px;
    font-weight: 600;
    flex: 34%;
    border-right: 1px solid #222;
    flex-shrink: 0;
}
#sub01-2 .right .table_col4 .col4_sub_category,
#sub01-2 .right .table_col5 .col5_sub_category,
#sub01-2 .right .table_col6 .col6_sub_category {
    padding: 8px 14px 8px 0;
    text-align: center;
    font-size: 22px;
    line-height: 32px;
    font-weight: 600;
    flex: 35%;
    border-right: 1px solid #222;
}    
#sub01-2 .right .table_col3 .col3_sub_category {
    padding: 8px 14px 8px 0;
    text-align: center;
    font-size: 22px;
    line-height: 32px;
    font-weight: 600;
    flex: 34%;
    border-right: 1px solid #222;
    flex-shrink: 0;
}
#sub01-2 .right .table_col2 .col_text,
#sub01-2 .right .table_col3 .col_text,
#sub01-2 .right .table_col4 .col_text,
#sub01-2 .right .table_col5 .col_text,
#sub01-2 .right .table_col6 .col_text {
    text-align: center;
    font-size: 22px;
    line-height: 32px;
    padding: 8px 24px;
}
#sub01-2 .right .table_col2 .col_text.flex-35,
#sub01-2 .right .table_col3 .col_text.flex-35,
#sub01-2 .right .table_col4 .col_text.flex-35,
#sub01-2 .right .table_col5 .col_text.flex-35,
#sub01-2 .right .table_col6 .col_text.flex-35 {
    flex: 35%;
    border-right: 1px solid #222;
}
#sub01-2 .right .table_col2 .col_text.flex-30,
#sub01-2 .right .table_col3 .col_text.flex-30,
#sub01-2 .right .table_col4 .col_text.flex-30,
#sub01-2 .right .table_col5 .col_text.flex-30,
#sub01-2 .right .table_col6 .col_text.flex-30 {
    flex: 30%;
}
#sub01-2 img.mob_block {
    display: none;
}
/* 탭 공통 */
#tabs.wrap02 {
    margin-top: 0;
}
#tabs .tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #6A6A6A;
    font-weight: bold;
    gap: 8px;
    padding: 30px 0;
    position: sticky;
    top: 136px;
    z-index: 2;
    background: #fff;
}
@media (max-width: 1000px) {
    .sub01-2 .nav-content .mob-br3 {
        display: none ;
    }
}
@media (max-width: 1280px) {
    #tabs .tabs {
        top: 80px; /* 탭 */
    }
}
@media (max-width: 1280px) {
    #tabs .tabs  {
        padding: 20px 0 !important; /* 탭 */
    }
    #sub01-2 .wrap01 {
        flex-direction: column;
        gap: 60px;
    }
    #sub01-2 .wrap01 .title-01-2 {
        font-size: 60px;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #717171;
        padding-bottom: 40px;
        line-height: 20px;
        font-weight: bold;
        color: #6A6A6A;
        margin-bottom: 10px;
        white-space: nowrap;
    }
    #sub01-2 .wrap01 .detail-01-2.pc{
        display: none;
    }
    #sub01-2 .wrap01 .image-section {
        max-width: 500px;
    }
    #sub01-2 .wrap01 .image-section .sub01-2-img01 {
        min-width: 0;
    }
    #sub01-2 .wrap01 .detail-01-2.mobile {
        display: block;
        margin-bottom: 50px;
    }
    #sub01-2 .wrap02 .container01 {
        margin-bottom: 50px;
    }
    #sub01-2 .wrap02 .pig-img {
        height: auto;
        width: 100%;
    }
    #sub01-2 .wrap02 .tabs {
        padding-bottom: 20px;
    }
    #sub01-2 .wrap02 .tabs .tab {
        padding: 10px 25px;
    }
    #sub01-2 .wrap02 .left.mobile .left-title {
        font-size: 40px;
        line-height: 60px;
        font-weight: 700;
        color: #444444;
    }
    #sub01-2 .wrap02 .left.mobile .left-subtitle {
        font-size: 33px;
        line-height: 50px;
        color: #444444;
        margin-top: 25px;
    }
    #sub01-2 .wrap02 .left.mobile{
        display: block;
        margin-top: 30px;
        text-align: center;
    }
    #sub01-2 .wrap02 .left.pc {
        display: none;
    }
    #sub01-2 .wrap02 .right {
        width: 100%;
        padding: 50px 0 0 0 ;
    }
}
    
@media (max-width: 767px) {
    #sub01-2 .sub01-2_tablebox {
        display: none !important;
    }
    #sub01-2 img.mob_block {
        display: block !important;
        margin-bottom: 40px;
    }
    #sub01-2 .wrap02{
        margin-top: 0px;
    }
    #sub01-2 .wrap02 .tabs .circle {
        margin-right: 0px;
        font-size: 15px;
    }
    #sub01-2 .wrap02 .chatbox.host {
        flex-direction: column;       
        align-items: flex-start;
        align-items: center;
    }
    #sub01-2 .right .mob-br-01-2 {
    display: block;
    }
    #sub01-2 .wrap02 .chatbox-img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #sub01-2 .wrap02 .chatbox.reporter {
        flex-direction: column;       
        align-items: flex-start;
    }
    #sub01-2 .wrap02 .chatboxx.reporter {
        flex-direction: column;       
        align-items: flex-start;
    }
    #sub01-2 .wrap02 .container01{
        border-bottom: none;
    }
    #sub01-2 .right .graph-img {
    margin-right: 0;
    }
    #sub01-2 .right .sub01-2_tablebox {
    margin-right: 0;
    }
}

@media (max-width: 480px) {
    #sub01-2 .wrap01 .image-section .sub01-2-img01 {
        min-width: 0px;
    }
    #sub01-2 .wrap02 .tabs .tab {
        padding: 10px 14px;
        font-size: 21px;
        gap: 10px;
    }
}
/* 여기까지 sub01-2 */


/* sub-01-3page.html */
#sub01-3 {
    width: 0 auto;
}
.sub01-3 .pagination .nav-item.prev {
    background-image: url('../img/sub01/pagenation-prev.png');
}
.sub01-3 .pagination .nav-item.next {
    background-image: url('../img/sub01-3/pagenation-next.png');
}
#sub01-3 .wrap01 {
    display: flex;
    align-items: center;
    gap: 40px;
}
#sub01-3 .wrap01 .gray-mobile {
    display: none;
}
#sub01-3 .wrap02 .zoom_no {
    display: none;
}
#sub01-3 .wrap01 .text-section{
    flex: 6;
    width: 100%;
}
#sub01-3 .wrap01 .title-01-3 {
    font-size: 80px;
    font-weight: bold;
    color: #6A6A6A;
    margin-bottom: 10px;
    white-space: nowrap;
}
#sub01-3 .wrap01 .detail-01-3 {
    font-size: 27px;
    line-height: 45px;
    letter-spacing: -0.2px;
    margin-bottom: 20px;
    text-align: justify; 
}

#sub01-3 .wrap01 .detail-01-3.mobile {
    display: none;
}

#sub01-3 .wrap01 .image-section {
    flex: 4;
}
#sub01-3 .wrap01 .image-section {
    max-width: 400px;
}
#sub01-3 .wrap01 .image-section .sub01-3-img01 {
    width: 100%;
    border-radius: 100%;
    border: 1px solid #6A6A6A;
    min-width: 250px;
}
#sub01-3 .wrap02{
    margin-top: 30px;
}
#sub01-3 .wrap02 .tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #6A6A6A;
    font-weight: bold;
    gap: 8px;
    padding-bottom: 30px;
}
#sub01-3 .wrap02 .tabs .tab {
    padding: 16px 30px;
    cursor: pointer;
    background-color: #F2F2F2;
    border-radius: 4px;
    color: #6A6A6A;
    font-size: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#sub01-3 .wrap02 .tabs-wrap{
    display: flex;
    gap: 10px;
}

#sub01-3 .wrap02 .tabs .active {
    background-color: #222222;
    color: #FFFFFF;
}
#sub01-3 .wrap02 .tabs .circle {
    color: #E05D5D;
    margin-right: 5px;
    font-size: 22.5px;
}

/* 본문 */
#sub01-3 .wrap02 .container01 {
    display: flex;
    border-bottom: 1px solid #6A6A6A;
}

#sub01-3 .wrap02 .left.pc {
    width: 40%;
    border-right: 1px solid #6A6A6A;
    padding-top: 50px ;
}
#sub01-3 .wrap02 .left.pc .left-title {
    font-size: 40px;
    line-height: 60px;
    font-weight: 700;
    color: #444444;
}

#sub01-3 .wrap02 .left.pc .left-subtitle {
    font-size: 33px;
    color: #444444;
    margin-top: 30px;
    line-height: 50px;
}
#sub01-3 .wrap02 .left.mobile{
    display: none;
}

#sub01-3 .wrap02 .right {
    width: 70%;
    padding-left: 20px;
    padding-top: 50px ;
}
#sub01-3 .wrap02 .main-img {
    width: 200px;
    display: block;
    margin-bottom: 24px;
}
#sub01-3 .wrap02 .pig-img {
    width: 100%;
}
#sub01-3 .right .sub01-3-sentence {
    margin-bottom: 40px;
    padding: 10px 0 10px 0;
    font-size: 43px;
    border-top: 1px solid #6A6A6A;
    border-bottom: 1px solid #6A6A6A;
    text-align: center;
}

#sub01-3 .wrap02 .chatbox.first{
    margin-top: 50px;
    display: flex;
    align-items: flex-start !important;
}
#sub01-3 .wrap02 .chatbox:last-of-type {
    margin-bottom: 60px !important;
}
#sub01-3 .wrap02 .chatbox.host {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    gap: 24px;
    
}
#sub01-3 .wrap02 .sub01-3-sentence .mob-br-01-3.zoom01-3 {
    display: block;
}
#sub01-3 .wrap02 .sub01-3-sentence .mob-br-01-3.zoom01-3-1 {
    display: none;
}
#sub01-3 .wrap02 .chatbox.reporter {
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    margin-bottom: 40px;
    gap: 40px;
}

#sub01-3 .wrap02 .chatbox .chatbox-img {
    width: 140px;
    height: 140px;
}
#sub01-3 .wrap02 .chatbox.host .text {
    font-size: 25px;
    line-height: 40.5px;
    color: #222222;
    letter-spacing: -0.5px;
}
#sub01-3 .wrap02 .chatbox.reporter .text {
    font-size: 25px;
    line-height: 40.5px;
    color: #E05D5D;
    padding: 20px;
    background-color: #F2F2F2;
    border-radius: 20px 0px 20px 20px;
    letter-spacing: -0.5px;
}
#sub01-3 .wrap02 .sub01-3-sentence .mob-br-01-3 {
    display: none;
}

@media (max-width: 1000px) {
    .sub01-3 .nav-content .mob-br3 {
        display: none ;
    }
}

@media (max-width: 1280px) {
    #sub01-3 .wrap01 {
        flex-direction: column;
        gap: 60px;
    }
    #sub01-3 .right .sub01-3-sentence {
    margin-bottom: 40px;
    padding: 16px 0 10px 0;
    font-size: 43px;
    border-top: 1px solid #6A6A6A;
    border-bottom: 1px solid #6A6A6A;
    text-align: center;
    }
    #sub01-3 .wrap01 .title-01-3 {
        font-size: 60px;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #717171;
        padding-bottom: 40px;
        line-height: 20px;
        font-weight: bold;
        color: #6A6A6A;
        margin-bottom: 10px;
        white-space: nowrap;
    }
    #sub01-3 .wrap01 .detail-01-3.pc{
        display: none;
    }
    #sub01-3 .wrap01 .image-section {
        max-width: 500px;
    }
    #sub01-3 .wrap01 .image-section .sub01-3-img01 {
        min-width: 0;
    }
    #sub01-3 .wrap01 .detail-01-3.mobile {
        display: block;
        margin-bottom: 50px;
    }
    #sub01-3 .wrap02 .container01 {
        margin-bottom: 50px;
    }
    #sub01-3 .wrap02 .pig-img {
        height: auto;
        width: 100%;
    }
    #sub01-3 .wrap02 .tabs {
        padding-bottom: 20px;
    }
    #sub01-3 .wrap02 .tabs .tab {
        padding: 10px 25px;
    }
    #sub01-3 .wrap02 .left.mobile .left-title {
        font-size: 40px;
        line-height: 60px;
        font-weight: 700;
        color: #444444;
    }
    #sub01-3 .wrap02 .left.mobile .left-subtitle {
        font-size: 33px;
        line-height: 50px;
        color: #444444;
        margin-top: 25px;
    }
    #sub01-3 .wrap02 .left.mobile{
        display: block;
        margin-top: 30px;
        text-align: center;
    }
    #sub01-3 .wrap02 .left.pc {
        display: none;
    }
    #sub01-3 .wrap02 .right {
        width: 100%;
        padding: 50px 0 0 0 ;
    }
}

@media (max-width: 767px) {
    #sub01-3 .wrap02{
        margin-top: 0px;
    }
    #sub01-3 .wrap02 .tabs .circle {
        margin-right: 0px;
        font-size: 15px;
    }
    #sub01-3 .wrap02 .chatbox.host {
        flex-direction: column;       
        align-items: flex-start;
        /* align-items: center; */
    }
    #sub01-3 .wrap02 .chatbox-img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    #sub01-3 .wrap02 .chatbox.reporter {
        flex-direction: column;       
        align-items: flex-start;
    }
    #sub01-3 .wrap02 .container01{
        border-bottom: none;
    }
    #sub01-3 .wrap02 .sub01-3-sentence .mob-br-01-3 {
    display: block;
    }
    #sub01-3 .wrap02 .sub01-3-sentence .mob-br-01-3.zoom01-3-1 {
        display: block;
    }
    #sub01-3 .wrap02 .zoom_no {
    display: block;
    }
#sub01-3 .right .sub01-3-sentence {
    line-height: 64px;
    }
}

@media (max-width: 480px) {
    #sub01-3 .wrap01 .image-section .sub01-3-img01 {
        min-width: 0px;
    }
    #sub01-3 .wrap02 .tabs .tab {
        padding: 10px 14px;
        font-size: 21px;
        gap: 10px;
    }
    #sub01-3 .mob-br3 {
        display: none;
    }
    #sub01-3 .mob-br {
        display: block !important;
    }
}
/* 여기까지 sub01-3 */


/* sub-01-4page.html */
#sub01-4 {
    width: 0 auto;
}
.sub01-4 .pagination .nav-item.prev {
    background-image: url('../img/sub01/pagenation-prev.png');
}
.sub01-4 .pagination .nav-item.next {
    background-image: url('../img/sub01-3/pagenation-next.png');
}
#sub01-4 .wrap01 {
    display: flex;
    align-items: center;
    gap: 40px;
}
#sub01-4 .wrap01 .gray-mobile {
    display: none;
}
#sub01-4 .wrap02 .zoom_no {
    display: none;
}
#sub01-4 .wrap01 .text-section{
    flex: 6;
    width: 100%;
}
#sub01-4 .wrap01 .title-01-4 {
    font-size: 80px;
    font-weight: bold;
    color: #6A6A6A;
    margin-bottom: 10px;
    white-space: nowrap;
}
#sub01-4 .wrap01 .detail-01-4 {
    font-size: 27px;
    line-height: 45px;
    letter-spacing: -0.2px;
    margin-bottom: 20px;
    text-align: justify; 
}

#sub01-4 .wrap01 .detail-01-4.mobile {
    display: none;
}

#sub01-4 .wrap01 .image-section {
    flex: 4;
}
#sub01-4 .wrap01 .image-section {
    max-width: 400px;
}
#sub01-4 .wrap01 .image-section .sub01-4-img01 {
    width: 100%;
    border-radius: 100%;
    border: 1px solid #6A6A6A;
    min-width: 250px;
}
#sub01-4 .wrap02{
    margin-top: 30px;
}
#sub01-4 .wrap02 .tabs {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #6A6A6A;
    font-weight: bold;
    gap: 8px;
    padding-bottom: 30px;
}
#sub01-4 .wrap02 .tabs .tab {
    padding: 16px 30px;
    cursor: pointer;
    background-color: #F2F2F2;
    border-radius: 4px;
    color: #6A6A6A;
    font-size: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#sub01-4 .wrap02 .tabs-wrap{
    display: flex;
    gap: 10px;
}

#sub01-4 .wrap02 .tabs .active {
    background-color: #222222;
    color: #FFFFFF;
}
#sub01-4 .wrap02 .tabs .circle {
    color: #E05D5D;
    margin-right: 5px;
    font-size: 22.5px;
}
#sub01-4 .wrap02 .mob-br-01-4 {
    display: none;
}
#sub01-4 .wrap02 .sub01-4_title1 {
    background-color: #e6e6e6;
    text-align: center;
    font-size: 44px;
    line-height: 54px;
    color: #444;
    font-weight: 600;
    /* margin-top: 64px; */
    margin-bottom: 40px;
    padding: 16px 0;
}
#sub01-4 .wrap02 .right {
    width: 100%;
    /* padding-left: 20px; */
    padding-top: 64px ;
}
#sub01-4 .wrap02 .sub1-4_container_1,
#sub01-4 .wrap02 .sub1-4_container_2,
#sub01-4 .wrap02 .sub1-4_container_3,
#sub01-4 .wrap02 .sub1-4_container_4 {
margin-bottom: 24px;
}
#sub01-4 .wrap02 .card_img {
    flex: 1;
}
#sub01-4 .wrap02 .block_1,
#sub01-4 .wrap02 .block_2,
#sub01-4 .wrap02 .block_3,
#sub01-4 .wrap02 .block_4 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;    
}
#sub01-4 .wrap02 .mob-br-01-4 {
    display: none;
}

@media (max-width: 1000px) {
    .sub01-4 .nav-content .mob-br3 {
        display: none ;
    }
}

@media (max-width: 1280px) {
    #sub01-4 .wrap01 {
        flex-direction: column;
        gap: 60px;
    }
    #sub01-4 .wrap01 .title-01-4 {
        font-size: 60px;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #717171;
        padding-bottom: 40px;
        line-height: 20px;
        font-weight: bold;
        color: #6A6A6A;
        margin-bottom: 10px;
        white-space: nowrap;
    }
    #sub01-4 .wrap01 .detail-01-4.pc{
        display: none;
    }
    #sub01-4 .wrap01 .image-section {
        max-width: 500px;
    }
    #sub01-4 .wrap01 .image-section .sub01-4-img01 {
        min-width: 0;
    }
    #sub01-4 .wrap01 .detail-01-3.mobile {
        display: block;
        margin-bottom: 50px;
    }
    #sub01-4 .wrap02 .container01 {
        margin-bottom: 50px;
    }
    #sub01-4 .wrap02 .pig-img {
        height: auto;
        width: 100%;
    }
    #sub01-4 .wrap02 .tabs {
        padding-bottom: 20px;
    }
    #sub01-4 .wrap02 .tabs .tab {
        padding: 10px 25px;
    }
    #sub01-4 .wrap02 .left.mobile .left-title {
        font-size: 40px;
        line-height: 60px;
        font-weight: 700;
        color: #444444;
    }
    #sub01-4 .wrap02 .left.mobile .left-subtitle {
        font-size: 33px;
        line-height: 50px;
        color: #444444;
        margin-top: 25px;
    }
    #sub01-4 .wrap02 .left.mobile{
        display: block;
        margin-top: 30px;
        text-align: center;
    }
    #sub01-4 .wrap02 .left.pc {
        display: none;
    }
    #sub01-4 .wrap02 .right {
        width: 100%;
        padding: 50px 0 0 0 ;
    }
    #sub01-4 .wrap01 .detail-01-4.mobile {
        display: block;
        margin-bottom: 50px;
    }
}

@media (max-width: 767px) {
    #sub01-4 .wrap01 {
        flex-direction: column;
        gap: 60px;
    }
    #sub01-4 .wrap02{
        margin-top: 0px;
    }
    #sub01-4 .wrap02 .tabs .circle {
        margin-right: 0px;
        font-size: 15px;
    }
    #sub01-4 .wrap02 .mob-br-01-4 {
    display: block;
    }
    #sub01-4 .wrap01 .text-section {
        width: 100%;
    }
    #sub01-4 .wrap01 .title-01-4 {
        font-size: 60px;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #717171;
        padding-bottom: 40px;
        line-height: 20px;
    }
    #sub01-4 .wrap01 .detail-01-4.pc{
        display: none;
    }
    #sub01-4 .wrap01 .image-section .sub01-4-img01 {
        min-width: 0px;
    }
    #sub01-4 .wrap01 .detail-01-4.mobile {
        display: block;
        margin-bottom: 50px;
    }
    #sub01-4 .wrap01 .image-section {
        max-width: 500px;
    }
    #sub01-4 .wrap02{
        margin-top: 0px;
    }
    #sub01-4 .wrap02 .mob-br-01-4 {
    display: block;
    }
    #sub01-4 .wrap02 .tabs .circle {
        margin-right: 0px;
        font-size: 10px;
    }
    #sub01-4 .wrap02 .container01{
        border-bottom: none;
    }
    #sub01-4 .wrap02 .block_1,
    #sub01-4 .wrap02 .block_2,
    #sub01-4 .wrap02 .block_3,
    #sub01-4 .wrap02 .block_4 {
        flex-direction: column;   
    }
    #sub01-4 .wrap02 .sub01-4_title1 {
    padding: 16px 0;
    }
    #sub01-4 .wrap02 .sub1-4_container_4 {
        margin-bottom: 60px;
    }
    #sub01-4 .wrap02 .right {
       padding: 56px 0 0 0 ;
    }
}
/* 여기까지 sub01-4 */










/* sub-02page.html */
.sub02 .pagination .nav-item.prev {
    background-image: url(../img/sub02/prev-img.jpg);
}
.sub02 .pagination .nav-item.next {
    background-image: url(../img/sub02/next-img.jpg);
}
/* #sub02 .big-brW { display: block; } */
#sub02 .big-none, #sub02 .icon-b .m-none { display: none; }
#sub02 .big-559 { color: #fff; }
#sub02 .bgBox, #sub02 .icon-b, #sub02 .icon-p {
    font-size: 25.5px;
}
#sub02 .desc { font-size: 22.5px; }

#sub02 .f-pink { 
    color: #FF8EA8;
    display: block;
}
#sub02 .img-box,
#sub04 .img-box {
    margin-bottom: 50px;
}
#sub02 .article-img,
#sub04 .article-img {
    max-width: 610px;
    margin: 0 auto;
}
#sub02 .gray-box, #sub03 .gray-box, #sub04-5 .gray-box {
    background-color: #F3F2F2;
    padding: 10px 20px;
    font-size: 22.5px;
}
#sub04-5 .inner {
    padding-bottom: 40px;
}
#sub04-5 {
    padding-bottom: 0;
}
#sub02 .paragraph.mb-4 {
    margin-bottom: 40px !important;
}
/* 표 스타일링 */
/* #sub02 .w-none { display: none; } */
#sub02 .col-flex {
    display: flex;
    gap: 24px;
}
#sub02 .table-title {
    border-bottom: 1px solid #222;
    padding: 15px 0;
    display: flex;
    justify-content: start;
    gap: 4px;
    margin-bottom: 32px;
}
#sub02 .title-img {
    transform: scale(1);
    transform-origin: left center;
    padding-right: 5px;
}
#sub02 .table-container .table-col {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #F3F2F2;
    border-radius: 24px;
    padding: 24px;
    box-sizing: border-box;
}
#sub02 .table-container .table-th {
    /* width: 20%; */
    display: flex;
    flex-direction: column;
}
#sub02 .table-container .table-td-container {
    /* width: 80%; */
}
#sub02 .table-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
#sub02 .table-container .bgBox {
    background: #F3F2F2;
    text-align: center;
    font-weight: 600;
    padding: 8px 0;
    border-radius: 24px;
}
#sub02 .bgBox.bg-b { background: #747678; color: #fff; }
#sub02 .bgBox.bg-p { background: #FF8EA8; color: #fff; }
#sub02 .table-container .iconTitle-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
    margin: 16px 0;
    border-bottom: 1px solid #222;
    flex: 1;
    margin-top: 0;
    flex-direction: row-reverse;
}
#sub02 .table-container .table-img {
    width: clamp(50px, 4vw, 64px);
}
#sub02 .table-container .td {
    flex: 1; 
    display: flex;
    align-items: start;
    padding: 8px 15px;
    margin: 16px 0;
}
#sub02 .td, #sub02 .iconTitle-wrapper {
    min-height: 80px;
}
#sub02 .table-container .line {
    border-right: 1px dashed #222;
    margin: 0 10px;
}
#sub02 .table-td-container {
    display: flex;
    align-items: stretch;
}
#sub02 .table-td-container .table-td {
    display: flex;
    flex-direction: column; /* 내용이 세로로 배치되게 */
    flex: 1;
}
#sub02 .sup {
    vertical-align: baseline;
}
#sub02 .desc {
    display: block;
    text-align: right;
    margin: 8px 0 50px;
}
#sub02 .big-559 {
    display: block;
}
@media (max-width: 1280px) {
    #sub02 .col-flex {
        flex-direction: column;
    }
}
@media (max-width: 768px) {
    #sub02 .big-brW { display: none; }
    #sub02 .m-none { display: none;}

    #sub02 .table-title {
        flex-direction: column;
        align-items: center;
        padding-bottom: 10px;
        gap: 10px;
        flex-direction: column;
        align-items: center;
    }
    #sub02 .title-img {
        transform: scale(1);
        transform-origin: initial;
        /* margin-bottom: ; */
    }
    #sub02 .gray-box, #sub03 .gray-box {
        margin-bottom: 40px;
    }
    /* 표 본문 */
    /* #sub02 .w-none {
        display: block;
    } */
    #sub02 .table-container .table-col {
        border-bottom: 1px solid #222;
        flex-direction: column;
    }
    #sub02 .table-container .table-col:not(:first-child) {
        margin-top: 24px;
    }
    #sub02 .table-container .table-th {
        width: 100%;
        background: #F3F2F2;
    }
    #sub02 .table-container .iconTitle-wrapper {
        margin: 0;
        /* border-right: none; */
        padding: 8px 16px;
        padding: 8px 16px;
    }
    #sub02 .table-container .iconTitle-wrapper .icon-b,
    #sub02 .table-container .iconTitle-wrapper .icon-b span {
        color: #FF8EA8;
        font-size: 30px;
        font-weight: 500;
    }
    #sub02 .table-container .table-td-container {
        width: 100%;
    }
    #sub02 .table-container .td {
        margin: 0;
    }
}
@media (max-width: 559px) {
    #sub02 .big-559 {
        display: block;
    }
}
@media (max-width: 480px) {
    #sub02 .sm-br { display: block;}
}








/* sub-03page.html */
.sub03 .pagination .nav-item.prev,
.sub04 .pagination .nav-item.prev {
    background-image: url(../img/sub03/prev-img.jpg);
}
.sub03 .pagination .nav-item.next {
    background-image: url(../img/sub03/next-img.jpg);
}
#sub03 .m-br480 {
    display: none;
}
#sub03 .article-img {
    max-width: 610px;
}
#sub03 .w-450 {
    max-width: 450px;
}
#sub03 .img-container {
    height: auto !important;
}
#sub04-3 .pink-flex {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#sub04-3 .listStyle1 {
    text-align: left;
}


/* sub-04page.html */
.sub04 .nav-item.prev {
    background-image: url(../img/sub04/prev-img.jpg);
}
.sub04 .nav-item.next {
    background-image: url(../img/sub04/next-img.jpg);
}
#sub04 {
    margin-bottom: 100px;
}
.sub04.sec03, #sub04-1, #sub04-3, #sub04-5 { background: #FCE7E9 !important; }
#sub04-2, #sub04-4 { background: #FFF4D6; }
/* #sub04-1 { padding-top: 100px; } */
/* #sub04-1 .imgBg-container { margin-top: 100px; } */
.sub04-n { padding: 48px 0px; }
.sub04-n .number { transform: scale(0.9) translateX(-18%); }
.sub04-n.subTitle { font-size: 30px; }

.sub04-n .listStyle1, .sub04-n .table-text, .sub04-n .f-17 { 
    font-size: 25.5px; 
    line-height: 1.5;
}
.sub04-n .subTitle {
    font-size: 30px; 
}
.sub04-n .pyramidImg {
    transform: scale(1.3) translateY(55px) !important;}
.sub04-n .bgTitle {
    transform: scale(1);
    margin: 0 auto;
}
.sub04-n .border-bottom {
    border-bottom: 1px solid #222;
    padding: 50px 50px 30px 50px;
    margin-bottom: 70px;
}
.sub04-n .imgBg-container { 
    max-width: 980px;
    margin: 0 auto;
}
.sub04-n .inner { 
    max-width: 980px; 
    margin: 0 auto;
    display: flex;
    gap: 24px;
}
.sub04-n .subTitle-box {
    width: 25%;
    display: flex;
    align-items: start;
}
.sub04-n .w-75 {
    width: 80%;
}
.sub04-n .subTitle-box .subT-inner {
    display: flex;
    /* gap: 10px; */
    align-items: center;
}
.sub04-n .ul-info {
    list-style-type: disc;   
    padding-left: 20px;     
  }
  
.sub04-n .ul-info .listStyle1 {
    margin-bottom: 8px; 
}
.sub04-n .f-white {
    color: #fff;
    display: block;
}
.sub04-n .font-b {
    font-weight: 600;
    font-size: 27px;
    display: block;
}
.sub04-n .m-inline {
    display: none;
}
/* sub04 피라미드 */
.sub04-n .pyramid .fare-table-wrapper {
    display: flex;
    align-items: start;
}
.sub04-n .pyramidTxt-wrap {
    width: 73%;
    transform: translateX(28px) !important;
}
.sub04-n .pyramidTxt-wrap .f-17 {
    background-color: #FFC525;
    border-radius: 999px;
    padding: 5px 20px;
    width: fit-content;
    margin-bottom: 10px;
    margin-top: 10px;
}
.sub04-n .pyramidTxt-wrap .pink {
    background-color: #FF8EA8;
    color: #fff;
    /* margin-top: 32px; */
}
.sub04-n .pyramid .ul-info {
    text-align: left;
}
.sub04-n .pyramid .flow-text {
    display: none;
}
/* sub04 표 */
.sub04-n .fare-table-wrapper {
    text-align: center;
    margin-bottom: 20px; 
}
.sub04-n .fare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 17px;
    table-layout: fixed; 
    color: #2F2725;
}
.sub04-n .fare-table .fare-content {
    border-right: 1px solid #2F2725;
    padding: 0 10px;
    text-align: center;
}
.sub04-n .fare-table .fare-content:last-child {
    border: none;
}
.sub04-n .pink-flex {
    display: flex;
}
.sub04-n .bg-box {
    background: #FF8EA8;
    border-radius: 8px;
    line-height: 25px;
    padding: 8px;
}
.sub04-n .flex {
    display: flex;
    gap: 16px;
    width: 50%;
}
.sub04-n .yellow-flex {
    display: flex;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid #222;
}
.sub04-n .w-100 {
    width: 100%;
}
.sub04-n .icon-box {
    min-width: 92px;
    height: 92px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}
.sub04-n .bg-box.yellow {
    background: #FFC525;
}
.sub04-n .bg-text {
    padding: 10px 0;
    text-align: left;
}
.sub04-n .yellow-flex:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
}
.sub04-n .w-75 .fare-table-wrapper {
    margin-bottom: 0;
}
.sub04 .pagination .nav-item.prev {
    background-image: url(../img/sub04/prev-img.jpg);
}
.sub04 .pagination .nav-item.next {
    background-image: url(../img/sub04/next-img.jpg);
}
@media (max-width: 1280px) {
    .sub04-n .pyramidImg {
        transform: scale(1.1) translateY(-3px) !important;
    }
    .sub04-n .pyramid .flow-text {
        display: block;
        position: relative;
        top:  -181px;
        left: 50%;
        transform: translateX(-50%);
    }
    .sub04-n .pyramid .flow2 {
        color: #fff;
        margin-top: 69px;
    }
    .sub04-n .pyramidTxt-wrap {
        transform: translateX(0);
    }
    .sub04-n .pyramid .fare-table-wrapper {
        display: flex;
        align-items: end;
    }
}
@media (max-width: 958px) {
    .sub04-n .big-br {
        display: none;
    }
    .sub04-n .inner { 
        flex-direction: column;
    }
    .sub04-n .subTitle-box,
    .sub04-n .w-75 {
        width: 100%;
    }
    .sub04-n .m-inline {
        display: none;
    }
}
@media (max-width: 768px) {
    #sub-page .sec02 {
        margin-top: 0 !important;
    }
    .sub04-n .yellow-flex {
        flex-direction: column;
    }
    .sub04-n .flex {
        width: 100%;
    }
    .sub04-n .fare-table .fare-content:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid #2F2725;
        margin-bottom: 13px;
        padding-bottom: 13px;
    }
    .sub04-n .pink-flex {
        display: flex; flex-direction: column;
    }
    .sub04-n .bg-text {
        padding-bottom: 0;
    }
    .sub04-n .fare-table .fare-content {
        padding: 0;
    }
    .sub04-n .pyramid .fare-table-wrapper {
        flex-direction: column;
        align-items: stretch;
    }
    .sub04-n .pyramidImg {
        padding: 0;
    }
    .sub04-n .pyramidImg-wrap {
        height: 300px;
    }
    .sub04-n .pyramidTxt-wrap {
        width: 100%;
        margin-top: 40px;
    }
    .sub04-n .pyramid .flow-text {
        top: -201px;
    }
    .sub04-n .pyramid .flow2 {
        margin-top: 76px;
    }
    .sub04-n .flow-info:last-child {
        margin-top: 40px;
    }
}
@media (max-width: 480px) {
    .sub04-n {
        padding: 20px 0;
    }
    .sub04-n .subTitle, .sub04-n .listStyle1, .sub04-n .table-text, .sub04-n .f-17 {
        font-size: 24px;
    }
    .sub04-n .number {
        transform: scale(0.7) translateX(-18%);
    }
    .sub04-n .subTitle {
        transform: translateX(-10px);
    }
    .sub04-n .inner {
        gap: 0;
    }
}



/* sub-05page.html */
.sub05 .nav-item.prev {
    background-image: url(../img/sub05/prev-img.jpg);
}
.sub05 .nav-item.next {
    background-image: url(../img/sub05/next-img.jpg);
}
#sub05 .summary {
    margin-bottom: 130px !important;
}

#sub05 .video-bg {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

#sub05 .video-bg .article-img-dot {
    max-width: 118px;
    margin-top: 50px;
}

#sub05 .video-top-bar {
    position: absolute;
    width: 66%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

#sub05 .video-top-bar .article-img {
    /* max-width: 610px; */
    margin: 0 auto;
    /* position: absolute;
    width: 66%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
}

#sub05 .video-wrapper {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

#sub05 .video-wrapper iframe {
    width: 100%;
    height: 340px;
}

#sub05 .for-paragraph {
margin-top: 140px;
}
@media (max-width: 980px) {
    #sub05 .video-wrapper iframe {
        width: 100%;
        height: 280px;
    }
}
@media (max-width: 767px) {
    #sub05 .video-wrapper iframe {
        width: 100%;
        height: 200px;
    }
    #sub05 .summary {
        margin-bottom: 50px !important;
    }
    #sub05 .for-paragraph {
        margin-top: 50px;
    }
}
@media (max-width: 480px) {
    #sub05 .video-bg .article-img-dot {
        max-width: 80px;
        margin-top: 20px;
    }
    #sub05 .video-wrapper iframe {
        /* height: 165px; */
        height: auto;
    }
}

/* sub-06page.html */
.sub06 .pagination .nav-item.prev {
    background-image: url(../img/sub06/prev-img.jpg);
}
.sub06 .pagination .nav-item.next {
    background-image: url(../img/sub06/next-img.jpg);
}
#sub06 .m-br480 { display: none; }
#sub06 .f-30 {
    font-weight: 100 !important;
    font-size: 45px !important;
    line-height: 63px !important;
}
#sub06 .img-boxy {
    width: auto;
    height: auto;
    margin-bottom: 60px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center; 
    position: relative;   
}
#sub06 .img-boxy2 {
    width: auto;
    height: auto;
    margin-bottom: 36px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center; 
    position: relative;   
}
#sub06 .img-boxy-river {
    width: auto;
    height: auto;
    margin-bottom: 26px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center; 
    position: relative;   
}
#sub06 .img-boxy-portugal {
    position: absolute;
    width: 30%;
    top: 95%;
    left: 36%;
    transform: translate(-50%, -50%);
} 
#sub06 .summary-flex {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}
#sub06 .summary {
    width: 50%;
}
#sub06 .img-container {
    height: auto !important;
}

#sub06 .flex-2 {
    display: flex;
    justify-content: flex-start;
    margin: 0;
    align-items: stretch;
    color: #FF8EA8;
}
#sub06 .flex-2 .summary {
    width: 100%;
}
#sub06 .img-container45 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 70px;
    gap: 30px;
}

#sub06 .img-container45.con12 {
    margin-bottom: 28px;
}

#sub06 .img-container45-boxy {
    display: flex;
    justify-content: space-between;
    margin-bottom: 26px;
    gap: 30px;
}
#sub06.sec02 .element45-01 .caption-4 {
    display: block;
    margin-top: 5px;
}
#sub06 .mob-inline {
    display: none;
}

@media (max-width: 768px) {
    #sub06 .summary {
        width: 50%;
    }
    #sub06 .img-container45 {
        display: block;
        width: 100%;
        margin-bottom: 30px;
    }
    #sub06 .img-container45 .img45_width {
        width: 100%;
    }
    #sub06.sec02 .element45-01 .caption-4 {
        margin-bottom: 28px;
    }
    #sub06 .element45-01 {
        margin-bottom: 28px;
    }
    #sub06 .img-boxy2 {
        margin-bottom: 28px;
    }
    #sub06 .flex-2 .f-30 {
        font-size: 36px !important;
        line-height: 49px !important;
    }
}

@media (max-width: 664px) {
    #sub06 .summary {
        width: 100%;
    }
}

@media (max-width: 480px) {
    #sub06 .m-br480 { display: block; }
    #sub06 .summary-flex {
        justify-content: flex-start;
    }
    #sub06 .summary {
        width: 100%;
    }
    #sub06 .only-pc {
        display: none;
    }
    #sub06 .element45-01 {
        margin-bottom: 20px;
    }
}/* 여기까지 sub06.html */

/* sub07.html */
.sub07 .nav-item.prev {
    background-image: url(../img/sub07/prev-img.jpg);
}
.sub07 .nav-item.next {
    background-image: url(../img/sub07/next-img.jpg);
}
#sub07 .mob07-br {
    display: none;
}
#sub07 .f-pink {
    color: #FF8EA8;
    display: block;
}
#sub07 .title {
    padding-bottom: 20px;
    border-bottom: 1px solid #AAAAAA;
}
#sub07.sec02 .img-box {
    position: relative;
    max-width: clamp(100px, 11vw, 200px);
}
#sub07.sec02 .articleImg {
    position: absolute;
    top: -146px;
    left: 700px;
}
#sub07 .course-line {
    background-color: #fff;
    max-width: 300px;
    width: 100%;
    height: 1px;
}
#sub07 .course-box {
    background-color: #FF8EA8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 20px;
}
#sub07 .course-box .icon {
    max-width: 40px;
}
#sub07 .article-title-inner {
    color: #fff;
    font-size: 25px;
    width: 100%;
    margin: 0 5px;
    text-align: center;
    min-width: 213px;
}
#sub07 .course-box {
    margin: 46px 0;
}
#sub07 .t-r {
    width: 50%;
    float: right;
}
#sub07 .flex-article {
    display: flex;
    justify-content: space-between;
    gap: 22px;
    align-items: flex-start;
    margin-top: 32px;
}

#sub07.sec02 .paragraph {
    margin-top: 0;
}

#sub07 .flex-article .left-text, #sub07 .flex-article .right-img {
    width: 50%;
} 
#sub07 .flex-article .left-text .dashed {
    border-top: 1px dashed #2F2725;
    padding-top: 16px;
}
#sub07.sec02 .info-item {
    display: flex;
}
#sub07.sec02 .info-item .info-b {
    font-weight: 700;
    max-width: 105px;
    width: 100%;
}
#sub07.sec02 .info-item .info-b, #sub07.sec02 .info-item .info-n , #sub07-1 .listStyle1, #sub07-1 .fare-table td,
#sub07-1 .note, #sub07-1 .f-16  {
    font-size: 24px;
}  
#sub07.sec02 .info-item .info-n {
    margin-bottom: 5px;
    font-size: 24px;
}
#sub07.sec02 .paragraph {
    margin-bottom: 30px;
}
#sub07 .flex-article .location {
    display: flex;
    gap: 3px;
    align-items: baseline;
    margin-top: 5px;
}
#sub07 .flex-article .location .gps-icon {
    width: 15px;
}
/* swiper 스와이퍼 */
#sub07 .swiper-button-next, #sub07 .swiper-button-prev {
    width: 32px;
    height: 32px;
    background-color: rgba(0, 0, 0, 0.4);
}
#sub07 .swiper-button-prev:after, #sub07 .swiper-rtl .swiper-button-next:after,
#sub07 .swiper-button-next:after, #sub07 .swiper-rtl .swiper-button-prev:after {
    color: #ccc;
    font-size: 17px;
    font-weight: 700;
}
#sub07 .swiper-slide img {
  width: 100%;
  display: block;
  object-fit: cover;
}
#sub07-1 .imgBg-container {
    background-image: url(../img/sub07/imgBg_pc.png);
    background-repeat: no-repeat;
    background-size: cover;
    margin-top: 120px;
}
#sub07-1 .inner {
    max-width: 980px;
    margin: 0 auto;
}
#sub07-1 .imgBg-title, #sub07-1 .bus-img {
    padding: 100px 0 48px;
    margin: 0 auto;
}
#sub07-1 .imgBg-title {
    max-width: 550px;
}
#sub07-1 .imgBg-container .f-18 {
    margin-bottom: 48px;
}
#sub07-1 .tour-info {
    border-top: 1px solid #2F2725;
    padding: 20px 0 40px;
    margin-top: 48px;
}
#sub07-1 .listStyle1 {
    margin-bottom: 5px;
    padding-left: 15px; /* 하이픈을 위한 왼쪽 여백 */
    position: relative; /* ::before 가상 요소 위치 지정을 위함 */
}
#sub07-1 .listStyle2 {
    margin-bottom: 5px;
    padding-left: 27px; 
    position: relative; 
}
#sub07-1 .listStyle1::before {
    content: '- '; /* 하이픈과 공백 추가 */
    position: absolute;
    left: 0; /* li의 왼쪽에 위치 */
    color: #2F2725; 
}
#sub07-1 .note {
    font-weight: bold;
}
#sub07-1 .listStyle2::before {
    content: '※ '; /* 하이픈과 공백 추가 */
    position: absolute;
    left: 0; /* li의 왼쪽에 위치 */
    color: #2F2725; 
}
/* 탑승료 테이블 스타일 */
#sub07-1 .b-br {
    display: block;
}
#sub07-1 .fare-table-wrapper {
    text-align: center;
    margin-bottom: 20px; 
}
#sub07-1 .infoB-text {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 25.5px;
    color: #EF89A1;
}
#sub07-1 .fare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 25.5px;
    table-layout: fixed; /* 열 너비를 균등 */
    color: #2F2725;
}
#sub07-1 .fare-table td {
    border-right: 1px solid #2F2725;
    padding: 12px 10px;
    text-align: center;
    width: 33.33%; 
}
#sub07-1 .fare-table td:last-child {
    border: none;
}
#sub07-1 .fare-table tr:nth-child(1) td:first-child {
    background: #D5B7CC;
}
#sub07-1 .fare-table tr:nth-child(2) td:first-child {
    background: #E6D797;
}
#sub07-1 .fare-table tbody tr:nth-child(odd) { 
    background-color: #DFCCD9; 
}
#sub07-1 .fare-table tbody tr:nth-child(even) { 
    background-color: #F3E7B4;
}
/* 하단 정보 섹션 스타일 */
#sub07-1 .info-section {
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding-bottom: 50px;
}
#sub07-1 .table-infoItem {
    flex: 1;
    /* min-width: 180px; */
    padding: 0 10px;
    border-right: 1px solid #2F2725;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
#sub07-1 .table-infoItem .infoB-text {
    margin: 0;
}
#sub07-1 .table-infoItem:last-child {
    border-right: none; 
}
#sub-page .sub07.sec03 {
    background: #FFE4E6;
    padding-top: 120px;
}
@media (max-width: 1280px) {
    #sub07-1 .inner {
        padding: 0 100px !important;
    }
    #sub07.sec02 .img-box {
        max-width: clamp(100px,11vw ,130px);
    }
    #sub07.sec02 .articleImg {
        top: -75px;
        left: 450%;
    }
}
@media (max-width: 768px) {
    #sub09.sec02 .all_sub_title_yellow {
        width: 100%;
    }
    #sub07 .m-br, #sub07-1 .m-br { display: block;}
    #sub07-1 .inner {
        padding: 0 50px !important;
    }
    #sub07 .article-title-inner {
        font-size: 20px;
        min-width: 171px;
    }
    #sub07 .t-r {
        width: 100%;
        float: initial;
    }
    #sub07.sec02 .img-box {
        display: none;
    }
    #sub07-1 .imgBg-container {
        background-image: url(../img/sub07/imgBg_m.png);
    }
    #sub07 .flex-article {
        flex-direction: column;
        margin-top: 0;
    }
    #sub07 .flex-article .left-text, #sub07 .flex-article .right-img {
        width: 100%;
    }
    #sub07.sec02 .paragraph {
        margin-top: 1px !important;
        margin-bottom: 16px !important;
    }
    #sub07 .caption {
        font-size: 22.5px;
    }
    #sub07-1 .imgBg-container {
        margin-top: 60px;
    }
    #sub07-1 .imgBg-title {
        padding: 50px 0 48px;
    }
    #sub07-1.section {
        padding: 0;
    }
    .sub07.sec03 {
        padding-left: 20px;
        padding-right: 20px;
    }
    
}
@media (max-width: 602px) {
    #sub07 .m-br, #sub07-1 .m-br { display: block;}
}
@media (max-width: 480px) {
    #sub07 .sm-br, #sub07-1 .sm-br { display: block;}
    #sub07-1 .sm-br.inli { display: inline;}
    #sub07-1 .m-br.none { display: inline;}
    #sub07-1 .inner {
        padding: 0 20px !important;
    }
    #sub07-1 .fare-table td {
        text-align: left;
    }
    #sub07-1 .info-section {
        flex-direction: column;
        gap: 20px;
        padding-bottom: 0;

    }
    #sub07-1 .table-infoItem {
        border-right: none;
        border-bottom: 1px solid #2F2725;
        padding-bottom: 20px;
    }
    #sub07-1 .table-infoItem:last-child {
        border: none;
    }
}


/* sub08.html */
.mt-70 {
    margin-top: 70px;
}

.sub08 .mob-br2 {
    display: none;
}

#sub08 .img-div08 {
    margin: 0 auto;
    max-width: 800px;
}

#sub08 .article-wrap { 
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

#sub08 .article-wrap .wrap-img {
    width: calc(50% - 10px); 
    height: auto;
    object-fit: cover;
    display: block;
}
.sub08 {
    margin-top: 130px;
}
.sub08 .pagination .nav-item.prev {
    background-image: url(../img/sub08/pagenation-prev.png);
}
.sub08 .pagination .nav-item.next {
    background-image: url(../img/sub08/pagenation-next.png);
}
#sub08 .mob-br3 {
    display: block;
} 

@media (max-width: 1500px) {
    .sub08 .mob-br2{
        display: block;
    }
}
@media (max-width: 1280px) {
    #sub08 .article-wrap { 
        flex-direction: column;
        gap: 20px;
    }
    #sub08 .article-wrap .wrap-img {
        width: 100%;
    }
}

@media (max-width: 885px) {
    .sub08 .mob-br2{
        display: none;
    }
}
@media (max-width: 767px) {
    .sub08  {
        margin-top: 60px;
    }
    #sub08 .mob-br{
        display: block !important;
    }
}
@media (max-width: 480px) {
    #sub08 .mob-br{
        display: block !important;
    }
}
@media (max-width: 400px) {
    #sub08 .mob-br3 {
        display: none !important;
    } 
}


/* sub09.html */
.sub09.sec03 .pagination .nav-item.prev {
    background-image: url(../img/sub09/prev-img.jpg);
}
.sub09.sec03 .pagination .nav-item.next {
    background-image: url(../img/sub09/next-img.jpg);
}
#sub09.sec02 .sub09-zoom .mob-br480-easy {
    display: none
}
#sub09.sec02 .img-container-sub09 {
    display: flex;
    justify-content: center;
}
#sub09.sec02 .img-container-sub09 .article-img {
    max-width: 610px;
    margin-bottom: 70px;
}
#sub09.sec02 .card1_pink,
#sub09.sec02 .card2_yellow {
    margin-bottom: 48px;
}
#sub09.sec02 .card3_orange {
    margin-bottom: 50px;
}
#sub09.sec02 .card1_pink .title_pink {
    background-color: #FF8EA8;
    margin: 0 auto;
    position: relative;
    padding: 30px 0;
    border-radius: 32px 32px 0 0;
}
#sub09.sec02 .title_pink .article-img-keyword,
#sub09.sec02 .title_yellow .article-img-keyword,
#sub09.sec02 .title_orange .article-img-keyword {
    max-width: 170px;
    margin: 0 auto;
}
#sub09.sec02 .title_pink .whitetext,
#sub09.sec02 .title_orange .whitetext {
    color: #fff;
    line-height: 1.5;
    font-size: 33px;
    text-align: center;
    margin-top: 20px;
}
#sub09.sec02 .title_pink .bold_text,
#sub09.sec02 .title_orange .bold_text {
    font-weight: 700;
    line-height: 1.5;
    font-size: 46px;
    color: #fff;
}
#sub09.sec02 .title_pink .article-img-absol-1 {
    position: absolute;
    max-width: 28px;
    top:46%;
    left: 28%;
}
#sub09.sec02 .title_pink .article-img-absol-2 {
    position: absolute;
    max-width: 45px;
    top:26%;
    left: 32%;
}
#sub09.sec02 .title_pink .article-img-absol-3 {
    position: absolute;
    max-width: 88px;
    top:16%;
    right: 22%;
}
#sub09.sec02 .card1_pink .content_pink {
    background-color: #FCE7E9;
    margin: 0 auto;
    padding: 36px;
    border-radius: 0 0 32px 32px ;
}
#sub09.sec02 .card1_pink .content_pink .at_all_sub_title_pink,
#sub09.sec02 .card2_yellow .content_yellow .at_all_sub_title_yellow,
#sub09.sec02 .card3_orange .content_orange .at_all_sub_title_orange {
    display: flex;
    justify-content: center;
}
#sub09.sec02 .card1_pink .content_pink .sub_title_1_pink,
#sub09.sec02 .card1_pink .content_pink .sub_title_2_pink,
#sub09.sec02 .card2_yellow .content_yellow .sub_title_1_yellow,
#sub09.sec02 .card2_yellow .content_yellow .sub_title_2_yellow {
    display: flex;gap: 10px;
    padding: 8px;
    border-bottom: 0.5px dashed #222222;
    width: auto;
    align-items: start;
}
#sub09.sec02 .content_pink .dot_pink,
#sub09.sec02 .content_yellow .dot_pink {
    color: #FF8EA8;
}
#sub09.sec02 .content_orange .dot_pink {
    color: #EF6250;
}
#sub09.sec02 .content_pink .notoserif-sub09,
#sub09.sec02 .content_yellow .notoserif-sub09,
#sub09.sec02 .content_orange .notoserif-sub09 {
    font-weight: 100;
    font-size: 30px;
    font-style: normal;
    font-family: "Noto Serif KR", serif;
}
#sub09.sec02 .content_pink .paragraph.con,
#sub09.sec02 .content_yellow .paragraph.con,
#sub09.sec02 .content_orange .paragraph.con {
    margin-bottom: 0;
    margin-top: 36px;
}
#sub09.sec02 .card2_yellow .title_yellow {
    background-color: #FFD255;
    margin: 0 auto;
    position: relative;
    padding: 30px 0;
    border-radius: 32px 32px 0 0;
    z-index: -1;
}
#sub09.sec02 .title_yellow .blacktext {
    color: #222;
    line-height: 1.5;
    font-size: 33px;
    text-align: center;
    margin-top: 20px;
}
#sub09.sec02 .title_yellow .bold_text-b {
    font-weight: 700;
    line-height: 1.5;
    font-size: 46px;
    color: #222;
}
#sub09.sec02 .title_pink .article-img-absol-1 {
    position: absolute;
    max-width: 28px;
    top:46%;
    left: 25%;
}
#sub09.sec02 .title_pink .article-img-absol-2 {
    position: absolute;
    max-width: 45px;
    top:26%;
    left: 29%;
}
#sub09.sec02 .title_pink .article-img-absol-3 {
    top: 21%;
    right: 18%;
    max-width: 88px;
}
#sub09.sec02 .title_yellow .article-img-absol-4 {
    position: absolute;
    max-width: 116px;
    top:12%;
    left: 12%;
}
#sub09.sec02 .title_yellow .article-img-absol-5 {
    position: absolute;
    max-width: 60px;
    top:16%;
    right: 28%;
}
#sub09.sec02 .title_yellow .article-img-absol-6 {
    position: absolute;
    max-width: 186px;
    top:44%;
    right: 8%;
}
#sub09.sec02 .card2_yellow .content_yellow {
    background-color: #FFF9E2;
    margin: 0 auto;
    padding: 36px;
    border-radius: 0 0 32px 32px ;
}
#sub09.sec02 .card3_orange .title_orange {
    background-color: #EF6250;
    margin: 0 auto;
    position: relative;
    padding: 30px 0;
    border-radius: 32px 32px 0 0;
}
#sub09.sec02 .title_orange .article-img-absol-7 {
    position: absolute;
    max-width: 99px;
    top:19%;
    left: 18%;
}
#sub09.sec02 .title_orange .article-img-absol-8 {
    position: absolute;
    max-width: 55px;
    top:21%;
    right: 29%;
}
#sub09.sec02 .title_orange .article-img-absol-9 {
    position: absolute;
    max-width: 124px;
    top:48%;
    right: 14%;
}
#sub09.sec02 .card3_orange .content_orange {
    background-color: #FAE7E4;
    margin: 0 auto;
    padding: 36px;
    border-radius: 0 0 32px 32px ;
}
#sub09.sec02 .card3_orange .content_orange .sub_title_1_orange,
#sub09.sec02 .card3_orange .content_orange .sub_title_2_orange {
    display: flex;
    gap: 10px;
    padding: 8px;
    border-bottom: 0.5px dashed #222222;
    width: auto;
    align-items: start;
}
#sub09.sec02 .card3_orange .content_orange .por-stategy-all {
    margin: 32px 0 32px 0;
    display: flex;
    gap: 40px;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    padding-top: 24px;
    padding-bottom: 24px;
}
#sub09.sec02 .card3_orange .content_orange .por-strategy1,
#sub09.sec02 .card3_orange .content_orange .por-strategy2 {
    flex: 1;
    display: flex;
    gap: 16px;
}
#sub09.sec02 .content_orange .article-img-strategy {
    max-width: 98px;
}
#sub09.sec02 .content_orange .bold_text {
    font-weight: 700;
}
#sub09.sec02 .content_orange .divider {
    width: 1px;
    background-color: #222;
}
#sub09.sec02 .content_orange .pc_only-br {
    display: none;
}
#sub09.sec02 .content_pink .mob-br480,
#sub09.sec02 .content_yellow .mob-br480,
#sub09.sec02 .content_orange .mob-br480 {
    display: none;
}
#sub09.sec02 .por-stategy-all .strategy1-textbox,
#sub09.sec02 .por-stategy-all .strategy2-textbox {
    font-weight: 400;
    font-size: 27px;
    line-height: 48px;
}
#sub09.sec02 .content_pink .mob-br577,
#sub09.sec02 .content_yellow .mob-br577,
#sub09.sec02 .content_orange .mob-br577 {
    display: none;
}
#sub09.sec02 .paragraph.sub09-con1 {
    margin-bottom: 50px;
    margin-top: 0;
}
#sub09.sec02 .info.sub09-zoom {
    margin-bottom: 32px;
}



@media (max-width: 1280px) {
    #sub09.sec02 .info.sub09-zoom {
        gap: 12px;
    }
    #sub09.sec02 .card1_pink .title_pink .sizebox1,
    #sub09.sec02 .card2_yellow .title_yellow .sizebox1,
    #sub09.sec02 .card3_orange .title_orange .sizebox1 {
        width: 16%;
    }
    #sub09.sec02 .card1_pink .title_pink .sizebox2,
    #sub09.sec02 .card2_yellow .title_yellow .sizebox2,
    #sub09.sec02 .card3_orange .title_orange .sizebox2 {
        width: 14%;
    }
    #sub09.sec02 .card1_pink .title_pink .sizebox3,
    #sub09.sec02 .card2_yellow .title_yellow .sizebox3,
    #sub09.sec02 .card3_orange .title_orange .sizebox3 {
        width: 8%;
    }
    #sub09.sec02 .title_pink .article-img-absol-1 {
        position: absolute;
        max-width: 28px;
        top:46%;
        left: 14%;
    }
    #sub09.sec02 .title_pink .article-img-absol-2 {
        position: absolute;
        max-width: 45px;
        top:26%;
        left: 19%;
    }
    #sub09.sec02 .title_pink .article-img-absol-3 {
        top: 25%;
        right: 12%;
        max-width: 66px;
    }
    #sub09.sec02 .title_yellow .article-img-absol-4 {
        position: absolute;
        max-width: 102px;
        top:30%;
        left: 5%;
    }
    #sub09.sec02 .title_yellow .article-img-absol-5 {
        position: absolute;
        max-width: 60px;
        top:16%;
        right: 23%;
    }
    #sub09.sec02 .title_yellow .article-img-absol-6 {
        position: absolute;
        max-width: 166px;
        top:44%;
        right: 4%;
    }
    #sub09.sec02 .title_orange .article-img-absol-7 {
        position: absolute;
        max-width: 99px;
        top:14%;
        left: 10%;
    }
    #sub09.sec02 .title_orange .article-img-absol-8 {
        position: absolute;
        max-width: 55px;
        top:20%;
        right: 25%;
    }
    #sub09.sec02 .title_orange .article-img-absol-9 {
        position: absolute;
        max-width: 124px;
        top:38%;
        right: 6%;
    }
    #sub09.sec02 .card3_orange .content_orange .por-stategy-all {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    #sub09.sec02 .info.sub09-zoom {
        gap: 8px;
    }
    #sub09.sec02.sub09 {
    padding: 0;
    }
    #sub09.sec02 .card1_pink,
    #sub09.sec02 .card2_yellow {
    margin-bottom: 32px;
    }
    #sub09.sec02 .summary.sub09 {
        margin-bottom: 56px;
    }
    #sub09.sec02 .img-container-sub09 .article-img {
        margin-bottom: 56px;
        width: 100%;
        max-width: none;
    }
    #sub09.sec02 .title_pink .article-img-absol-1 {
        top:34%;
        left: 16%;
    }
    #sub09.sec02 .title_pink .article-img-absol-2 {
        top:26%;
        left: 79%;
    }
    #sub09.sec02 .title_pink .article-img-absol-3 {
        display: none;
    }
    #sub09.sec02 .title_yellow .article-img-absol-4 {
        display: none;
    }
    #sub09.sec02 .title_yellow .article-img-absol-5 {
        top:16%;
        right: 76%;
    }
    #sub09.sec02 .title_yellow .article-img-absol-6 {
        top:12%;
        right: 12%;
    }
    #sub09.sec02 .title_orange .article-img-absol-7 {
        display: none;
    }
    #sub09.sec02 .title_orange .article-img-absol-8 {
        top:23%;
        right: 78%;
    }
    #sub09.sec02 .title_orange .article-img-absol-9 {
        top:14%;
        right: 10%;
    }
    #sub09.sec02 .content_orange .por-stategy-all {
        display: block !important;
    }
    #sub09.sec02 .content_orange .por-stategy-all .por-strategy1,
    #sub09.sec02 .content_orange .por-stategy-all .por-strategy2 {
        display: block;
    }
    #sub09.sec02 .content_orange .por-stategy-all .por-strategy1 {
        border-bottom: 1px solid #222;
        padding-bottom: 24px;
    }
    #sub09.sec02 .content_orange .por-stategy-all .por-strategy2 {
        margin-top: 24px;
    }
    #sub09.sec02 .content_orange .por-stategy-all .strategy1-title,
    #sub09.sec02 .content_orange .por-stategy-all .strategy2-title  {
        text-align: center;
    }
    #sub09.sec02 .content_orange .por-stategy-all .article-img-strategy {
        margin: 0 auto;
        margin-bottom: 16px;
    }
    #sub09.sec02 .card3_orange {
        margin-bottom: 60px;
    }
    #sub09.sec02 .paragraph.sub09-con1 {
        margin-bottom: 56px;
    }
    #sub09.sec02 .content_pink .paragraph.con,
    #sub09.sec02 .content_yellow .paragraph.con,
    #sub09.sec02 .content_orange .paragraph.con {
    margin-top: 36px;
    }
}

@media (max-width: 577px) {
    #sub09.sec02 .title_pink .article-img-absol-1 {
        top:28%;
        left: 15%;
    }
    #sub09.sec02 .title_pink .article-img-absol-2 {
        top:26%;
        left: 82%;
    }
    #sub09.sec02 .title_pink .article-img-absol-3 {
        display: none;
    }
    #sub09.sec02 .title_yellow .article-img-absol-4 {
        display: none;
    }
    #sub09.sec02 .title_yellow .article-img-absol-5 {
        max-width: 32px;
        top:18%;
        right: 81%;
    }
    #sub09.sec02 .title_yellow .article-img-absol-6 {
        max-width: 74px;
        top:10%;
        right: 4%;
    }
    #sub09.sec02 .title_orange .article-img-absol-7 {
        display: none;
    }
    #sub09.sec02 .title_orange .article-img-absol-8 {
        /* position: absolute; */
        max-width: 55px;
        top:20%;
        right: 81%;
    }
    #sub09.sec02 .title_orange .article-img-absol-9 {
        /* position: absolute; */
        max-width: 60px;
        top:15%;
        right: 10%;
    }
    #sub09.sec02 .content_pink .mob-br577,
    #sub09.sec02 .content_yellow .mob-br577,
    #sub09.sec02 .content_orange .mob-br577 {
    display: block;
    }
}

@media (max-width: 480px) {
    #sub09.sec02 .all_sub_title_yellow {
        width: 100%;
    }
    #sub09.sec02 .article-header .title2 {
        font-size: 39px;
        line-height: 54px;
    }
    #sub09.sec02 .sub09-zoom .mob-br480-easy {
        display: block
    }
    #sub09.sec02 .content_pink .mob-br577,
    #sub09.sec02 .content_yellow .mob-br577,
    #sub09.sec02 .content_orange .mob-br577 {
    display: none;
    }
    #sub09.sec02 .content_pink .mob-br480,
    #sub09.sec02 .content_yellow .mob-br480, 
    #sub09.sec02 .content_orange .mob-br480  {
        display: block;
    }
    #sub09.sec02 .card3_orange .title_orange .sizebox1 {
        width: 17%;
    }
}

/* sub10.html */
.sub10 .nav-item.prev {
    background-image: url(../img/sub10/prev-img.jpg);
}
.sub10 .nav-item.next {
    background-image: url(../img/sub10/next-img.jpg);
}
#sub10 .mob-br {
    /* display: block !important; */
}
#sub10.sec02 .img-container {
    height: auto;
}
#sub10 .smob-br {
    font-weight: 400;
    font-size: 25.5px;
    line-height: 39px;
    color: #717171;
}
#sub10 .flex-article {
    padding-top: 24px;
    display: flex;
    justify-content: space-around;
    align-items: start;
}
#sub10 .articleType1 {
    border-top: 1px solid #000;
}
#sub10 .pb-70 { padding-bottom: 70px; }
#sub10 .pt-36 { padding-top: 36px; }
#sub10 .title-black {
    font-size: 39px;
    line-height: 54px;
    color: #444;
    font-weight: 500;
}
#sub10 .title-pink {
    font-size: 36px;
    line-height: 52px;
    color: #FF8EA8;
    font-weight: 100 !important;
}
#sub10 .title-black, #sub10 .title-pink, #sub10 .paragraph, #sub10 .img-box {
    width: 49%;
}
#sub10 .paragraph {
    margin: 0 !important;
}
#sub10.sec02 .article-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media (max-width: 768px) {
    #sub10 .flex-article {
        flex-direction: column;
    }
    #sub10 .articleType2 {
        flex-direction: column-reverse;
    }
    #sub10 .title-black, #sub10 .title-pink, #sub10 .paragraph, #sub10 .img-box {
        width: 100%;
    }
    #sub10.sec02 .img-container {
        height: auto !important;
        margin-bottom: 50px !important;
    }
    #sub10 .paragraph {
        margin-top: 24px !important;
    }
    #sub10 .title-pink {
        padding-top: 24px;
    }
    #sub10 .articleType2.img-wrap {
        flex-direction: column;
        gap: 20px;
    }
    #sub10 .pb-70 {
        padding-bottom: 50px;
    }  
}
@media (max-width: 480px) {
    #sub10 .smob-br, #sub10 .br {
        display: block;
    }
}


/* sub-11page.html */
#sub11.sec02 .paragraph-sub11 {
    font-weight: 400;
    font-size: 27px;
    line-height: 48px;
    margin-top: 30px;
    margin-bottom: 50px;
}
#sub11.sec02 .pink_container {
    background-color: #FCE7E9;
    margin-bottom: 70px;
}
#sub11.sec02 .pink_content {
    padding-top: 80px;
    padding-bottom: 80px;
}
#sub11.sec02 .pink_container .title_img {
    padding-bottom: 50px;
    border-bottom: 1px solid #231815;
}
#sub11.sec02 .pink_container .article-img {
    max-width: 852px;
    margin: 0 auto;
}
#sub11.sec02 .pin_f1 .art-img56 {
    content: url(../img/sub11/article05-e.jpg);
}
#sub11.sec02 .pin_f2 .art-img56 {
    content: url(../img/sub11/article06-e.jpg);
}
#sub11.sec02 .pink_container .content_flexx {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  margin-top: 40px;
  margin-bottom: 20px;
}
#sub11.sec02 .pink_container .content_flexx .pin_f1 .art-img56 {
    width: 100%;
}
#sub11.sec02 .pink_container .content_flexx .pin_f1,
#sub11.sec02 .pink_container .content_flexx .pin_f2{
    flex: 1;
}

#sub11.sec02 .pink_container .content_flexx .pin_f3,
#sub11.sec02 .pink_container .content_flexx .pin_f5 {
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    gap: 10px;
    border-bottom: 0.5px dashed #222222;
    justify-content: center;
}

#sub11.sec02 .pink_container .bold_text {
    font-weight: 700;
    line-height: 1.5;
}

#sub11.pink_container .content_flexx .pin_f2 .art-img56 {
    max-width: 100%;
}

#sub11.sec02 .pink_container .divider {
    width: 1px;
    background-color: #231815;
}

#sub11.sec02 .pink_container .content_flexx .pin_f5,
#sub11.sec02 .pink_container .content_flexx .pin_f6,
#sub11.sec02 .pink_container .content_flexx .pin_f3,
#sub11.sec02 .pink_container .content_flexx .pin_f4{
    display: flex;
    padding: 10px 0;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    display: flex;
    align-items: flex-start;
}

#sub11.sec02 .pink_container .content_flexx .pin_f8,
#sub11.sec02 .pink_container .content_flexx .pin_f10 {
    flex: 1;
    padding: 5px 0 5px 0px;
}


#sub11.sec02 .pink_container .content_flexx .pin_f7,
#sub11.sec02 .pink_container .content_flexx .pin_f9 {
    flex: 1;
    padding: 5px 10px 5px 0px;
    border-right: 0.5px dashed #222222;
    display: flex;
    align-items: start;
}
#sub11.sec02 .pink_container .content_flexx .pin_f11,
#sub11.sec02 .pink_container .content_flexx .pin_f13{
    flex: 1;
    padding: 5px 0px 5px 0px;
    /* border-left: 0.5px dashed #222222; */
    display: flex;
    align-items: start;
}
#sub11.sec02 .pink_container .content_flexx .pin_f12,
#sub11.sec02 .pink_container .content_flexx .pin_f14{
    flex: 1;
    padding: 5px 0px 5px 10px;
    border-left: 0.5px dashed #222222;
    display: flex;
    align-items: start;
}
#sub11.sec02 .pink_container .tip_pink_box {
    background-color: #FF8EA8;
    text-align: center;
    padding: 8px;
}
#sub11.sec02 .pink_container .whitetext {
    color: #ffffff;
}
#sub11.sec02 .pink_container .tip_pink_box .mob480-br {
    display: none;
}
#sub11.sec02 .pink_container .pc_only-br {
    display: none;
}

#sub11.sec02 .paragraph-easy {
    font-weight: 400;
    font-size: 27px;
    line-height: 48px;
    /* margin-top: 30px;
    margin-bottom: 50px; */
}
#sub11.sec02 .pink_container .pc_only-br {
    display: none;
}



@media (max-width: 1280px) {
    #sub11.sec02 .pink_container .padding-topdown-only {
       padding: 100px 0;
    }
    #sub11.sec02 .pink_container .article-img {
        width: 100%;
    }
    #sub11.sec02 .img-container.con12 {
        height: auto;
        margin-bottom: 56px;
    }
}

@media (max-width: 768px) {
    #sub11.sec02 .img-container.con12 {
        height: auto;
    }
    #sub11.sec02 .pink_container .content_flexx {
      display: block;
      gap: 0
    }
    
    #sub11.sec02 .pink_container .content_flexx .pin_f2 .art-img56 {
        width: 100%;
    }
    #sub11.sec02 .paragraph.con13 {
       margin-bottom: 24px;

    }
    #sub11.sec02 .pin_f1 .art-img56 {
        content: url(../img/sub11/article05-em.jpg);
    }
    #sub11.sec02 .pin_f2 .art-img56 {
        content: url(../img/sub11/article06-em.jpg);
    }
    #sub11.sec02 .pink_container .pin_f1, .pin_f2 {
        margin-bottom: 20px;
      }
    #sub11.sec02 .pink_container .content_flexx .pin_f5,
    #sub11.sec02 .pink_container .content_flexx .pin_f6,
    #sub11.sec02 .pink_container .content_flexx .pin_f3,
    #sub11.sec02 .pink_container .content_flexx .pin_f4{
        padding: 0;
        flex-direction: column;
        gap: 0;
    }

    #sub11.sec02 .pink_container .content_flexx .pin_f12,
    #sub11.sec02 .pink_container .content_flexx .pin_f14,
    #sub11.sec02 .pink_container .content_flexx .pin_f8,
    #sub11.sec02 .pink_container .content_flexx .pin_f10 {
        padding: 10px;
        padding-left: 0;
    }
    #sub11.sec02 .pink_container .content_flexx .pin_f11,
    #sub11.sec02 .pink_container .content_flexx .pin_f13,
    #sub11.sec02 .pink_container .content_flexx .pin_f7,
    #sub11.sec02 .pink_container .content_flexx .pin_f9 {
        border-right: none;
        padding: 10px;
        border-bottom : 0.5px dashed #222222;
        width: 100%;
        padding-left: 0;
    }
    #sub11.sec02 .pink_container .content_flexx .pin_f3,
    #sub11.sec02 .pink_container .content_flexx .pin_f5 {
        padding-top: 16px;
    }
    #sub11.sec02 .pink_container .content_flexx .pin_f4 {
        border-bottom: 1px solid #231815;
        padding-bottom: 30px;
    }
    #sub11.sec02 .pink_container .content_flexx .pin_f6 {
        border-bottom: 0.5px dashed #222222;
    }
    #sub11.sec02 .pink_container .content_flexx .pin_f12,
    #sub11.sec02 .pink_container .content_flexx .pin_f14{
    border-left: 0;
    }
}

@media (max-width: 480px) {
    #sub11.sec02 .mob-br {
        display: block !important;
    }
    #sub11.sec02 .pink_container {
        margin-bottom: 60px;
    }
    
    #sub11.sec02 .pink_container .tip_pink_box .mob480-br {
        display: block;
    }
    #sub11.sec02 .pink_container .title_img {
        padding-bottom: 0;
    }
    #sub11.sec02 .pink_container .padding-topdown-only {
        padding-top: 0;
        padding-bottom: 50px;
     }
     #sub11.sec02 .pink_container .content_flexx .pin_f3,
     #sub11.sec02 .pink_container .content_flexx .pin_f4,
     #sub11.sec02 .pink_container .content_flexx .pin_f5,
     #sub11.sec02 .pink_container .content_flexx .pin_f6 {
        gap: 0;
    }
    #sub11.sec02 .pink_container .content_flexx .pin_f7,
    #sub11.sec02 .pink_container .content_flexx .pin_f8,
    #sub11.sec02 .pink_container .content_flexx .pin_f9,
    #sub11.sec02 .pink_container .content_flexx .pin_f10,
    #sub11.sec02 .pink_container .content_flexx .pin_f11,
    #sub11.sec02 .pink_container .content_flexx .pin_f12,
    #sub11.sec02 .pink_container .content_flexx .pin_f13,
    #sub11.sec02 .pink_container .content_flexx .pin_f14 {
        padding-left: 0;
    }
}

/* sub-12page.html */
#sub12 .mob-br2{
    display: none;
}

#sub12 .wrap01 .article-img12 {
    width: 100%;
    max-width: 610px;
    box-sizing: border-box;
    margin: 0 auto;
}
#sub12 .wrap01 .article-content {
    padding-bottom: 130px
}

#sub12 .wrap02 {
    background-color: #FCE7E9;
}
#sub12 .wrap02 .title-zone{
    border-bottom: 1px solid #222222 ;
    padding-bottom: 20px;
}

#sub12 .wrap02 .title-img {
    max-height: 120px;
}
#sub12 .wrap02 .info-card {
    display: flex;
    gap: 20px;
    padding: 100px 0;
}

/* 각 column을 flex column으로 설정 */
#sub12 .wrap02 .column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0; /* or 원하는 간격 */
}


#sub12 .column:first-of-type .item:nth-of-type(2) { 
    grid-row: 2;
    grid-column: 1;
    padding-top: 33px;
    padding-bottom: 33px;
}
#sub12 .column:first-of-type .item:nth-of-type(3) {
    grid-row: 3;
    grid-column: 1;
    padding-top: 33px;
    padding-bottom: 33px;
}
#sub12 .column:first-of-type .item:nth-of-type(4) {
    grid-row: 4;
    grid-column: 1;
    padding-top: 17px;
    padding-bottom: 17px;
}
#sub12 .column:first-of-type .item:nth-of-type(5) {
    grid-row: 5;
    grid-column: 1;
    padding-top: 53px;
    padding-bottom: 53px;
}

#sub12 .wrap02 .item {
    display: flex;
    align-items: center;
    padding: 25px 0;
    border-bottom: 1px dashed #222222 ;
}

#sub12 .wrap02 .item-img {
    max-width: 105px;
}

#sub12 .wrap02 .text {
    flex: 1;
    font-size: 27px;
    line-height: 40.5px;
    padding-left: 15px;
}

#sub12 .wrap03 {
    padding-top: 120px;
    background-image: url(../img/sub12/wrap03-bg.png);
}

#sub12 .wrap03 .cook {
    width: 150%;
    margin-bottom: 30px;
}
#sub12 .wrap03 .cook.two {
    width: 70%;
    margin: 50px auto;
}

#sub12 .wrap03 .method-wrap {
    width: 100%;
    padding-bottom: 55px;
    border-bottom: 1px solid #222222;
}
#sub12 .wrap03 .mob-method {
    display: none;
}
#sub12 .wrap03 .pc-method.three-2 {
    margin-top: 30px;
}
#sub12 .wrap03 .cook.three-1 {
    width: 60%;
    margin: 0 auto;
}
#sub12 .wrap03 .cook.three-2 {
    width: 50%;
}
#sub12 .wrap03 .cook.three-3 {
    width: 50%;
}
#sub12 .wrap03 .three-wrap{
    display: flex;
    justify-content: space-between;
}

#sub12 .four-wrap {
    position: relative;
    display: inline-block;
    width: 100%; 
}
#sub12 .cook.four-1 {
    display: block;
    width: 100%;
}
#sub12 .cook.four-2 {
    position: absolute;
    width: 45%;
    transform: translate(-50%, -50%);
    top: 5%;
    left: 30%;
    z-index: 20;
}
#sub12 .cook.four-2 {
    animation-duration: 6s !important;
}
#sub12 .five-wrap {
    position: relative;
    display: inline-block;
    width: 100%; 
}
#sub12 .cook.five-1 {
    position: absolute;
    width: 25%;
    transform: translate(-50%, -50%);
    top: 15%;
    left: 13%;
    z-index: 20;
}
#sub12 .cook.five-2 {
    position: absolute;
    width: 15%;
    transform: translate(-50%, -50%);
    top: 22%;
    left: 36%;
    z-index: 20;
}
#sub12 .cook.five-3 {
    position: absolute;
    width: 15%;
    transform: translate(-50%, -50%);
    top: 8%;
    left: 51%;
    z-index: 20;
}
#sub12 .cook.five-4 {
    position: absolute;
    width: 15%;
    transform: translate(-50%, -50%);
    top: 20%;
    left: 61%;
    z-index: 20;
}
#sub12 .cook.five-5 {
    position: absolute;
    width: 20%;
    transform: translate(-50%, -50%);
    top: 15%;
    left: 68%;
    z-index: 20;
}
#sub12 .six-wrap {
    position: relative;
    display: inline-block;
    width: 100%; 
}
#sub12 .cook.six-1 {
    position: absolute;
    width: 40%;
    transform: translate(-50%, -50%);
    top: 10%;
    left: 3%;
    z-index: 20;
}
#sub12 .cook.six-2 {
    position: absolute;
    width: 25%;
    transform: translate(-50%, -50%);
    top: 10%;
    left: 38%;
    z-index: 20;
}
#sub12 .cook.six-3 {
    position: absolute;
    width: 45%;
    transform: translate(-50%, -50%);
    top: 10%;
    left: 53%;
    z-index: 20;
}

#sub12 .cook.two,
#sub12 .cook.five-1,
#sub12 .cook.five-2,
#sub12 .cook.five-3,
#sub12 .cook.five-4,
#sub12 .cook.six-1,
#sub12 .cook.six-2,
#sub12 .cook.six-3 {
    animation-duration: 6s !important;
}
#sub12 .cook.five-2,
#sub12 .cook.five-4 {
    animation-duration: 6.5s !important;
}
#sub12 .cook.five-5 {
    animation-duration: 7.5s !important;
}

#sub12 .wrap03 .pagination {
    padding-top: 260px;
    padding-bottom: 60px;
}

#sub12 .pagination .nav-item.prev {
    background-image: url(../img/sub12/pagenation-prev.png);
}
#sub12 .pagination .nav-item.next {
    background-image: url(../img/sub12/pagenation-next.png);
}

@media (max-width: 1280px) {
    #sub12 .info-card {
        padding-top: 150px !important;
        padding-bottom: 150px !important;
        display: flex;
        flex-direction: column;
        gap: 80px !important;
    }
    #sub12 .item {
        padding: 25px 0 !important;
    }
    #sub12 .mob-br3 {
        display: none;
    }
    #sub12 .wrap03 .method {
        width: 150%;
    }
}



@media (max-width: 767px) {

    #sub12 .wrap03 .pagination {
        padding: 0 20px 20px;
    }
    #sub12 {
        padding: 0px;
    }
    #sub12 .wrap03 .pc-method {
        display: none;
    }
    #sub12 .wrap03 .mob-method {
        width: 80%;
        margin: 0 auto;
        display: block;
    }
    #sub12 .wrap03 .mob-method.three-2 {
        margin-top: 30px;
    }
    #sub12 .wrap03 .cook.two {
        width: 80%;
        margin: 30px auto;
    }

    #sub12 .wrap03 .pagination {
        padding-top: 50px;
        padding-bottom: 20px;
    }
    
}

@media (max-width: 480px) {
    #sub12 .wrap03 .mob-method {
        width: 100%;
    }
    #sub12 .mob-br2{
        display: block;
    }
}




#event-page.content {
    padding-top: 120px;
}

#event-page .sec01 {
    padding-top: 200px !important;
    padding-bottom: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #91DDFF;
}

#event-page .sec02 {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #91DDFF;
    position: relative;
    overflow: hidden;
    height: 650px;
}
#event-page .sec02 .cloud-img {
    margin-top: 20px;
    margin-left: 20px;
    width: auto; 
    min-width: 120%;
    flex-shrink: 0;
    max-width: none;
}
#event-page .sec02 .seagull-1 {
    position: absolute;
    top: 7%;
    left: 22%;
    max-width: 219px;
    width: 100%;
}
#event-page .sec02 .seagull-2 {
    position: absolute;
    top: 7%;
    right: 32%;
    max-width: 142.5px;
    width: 100%;
}
#event-page .sec02 .text-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: absolute;
    top: 80%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}
#event-page .sec02-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #FFFFFF;
}

#event-page .sec02 .draw {
    font-size: 22.5px;
    height: 40px;
    border-bottom: 2px solid #000000;
    font-weight: 700;
    /* width: 180px; */
}

#event-page .sec02 .event-title {
    font-size: 72px;
    line-height: 99px;
    font-weight: 700;
    margin-top: 50px;
}

#event-page .sec02-1 .comment {
    font-size: 30px;
    line-height: 51px;
    font-weight: 400;
    margin-top: 20px;
    text-align: center;
}

#event-page .sec02-1 .coupon-img {
    margin-top: 50px;
    max-width: 500px;
    width: 60%;
}

#event-page .sec03 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
    margin-top: 30px;
    width: 100%;
}

#event-page .sec03 .section-title {
    padding: 10px 30px;
    background-color: black;
    border-radius: 999px;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 30px;
    color: #FFFFFF;
    font-weight: 500;
    
}

#event-page .sec03 .steps-container {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}

#event-page .sec03 .step {
    width: 180px;
    height: 180px;
    padding-top: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: start;
    text-align: center;
    border: 2px solid #000000;
}

#event-page .sec03 .step-number {
    font-size: 45px;
    font-weight: 500;
}

#event-page .sec03 .step-description {
    margin-top: 5px;
    font-size: 22px;
    line-height: 35px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
}

#event-page .sec03 .info-zone {
    margin-top: 30px;
    width: 90%;
}

#event-page .sec03 .divider {
    margin: 8px 0;
    border: 1px solid #000000;
    width: 100%;
}

#event-page .sec03 .info-row {
    display: flex;
    justify-content: space-between;
}

#event-page .sec03 .info-label {
    font-size: 30px;
    font-weight: 700;
    
    
    padding: 8px 0;
    width: 15%;
}

#event-page .sec03 .info-value {
    font-size: 30px;
    font-weight: 500;
    
    
    padding: 8px;
    text-align: left;
    width: 80%;
}

#event-page .sec03 .button-container {
    text-align: center;
}

#event-page .sec03 .subscribe-button {
    margin-top: 30px;
    padding: 6px 60px;
    background-color: #0086DD;
    color: #FFFFFF;
    border-radius: 999px;
    cursor: pointer;
    font-size: 40px;
    font-weight: 700;
}

#event-page .sec04 {
    margin-top: 50px;
    padding-top: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: -150px;
}

#event-page .sec04 .comment {
    font-size: 22.5px;
    font-weight: 700;
    text-align: center;
    color: #1375DB;
}

.wave {
    filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.5));
}
.parallax {
    height: 700px;
    position: relative;
    width: 100%;
    transform: translate(0, 30px);
}

.parallax svg {
    pointer-events: none;
}

#event-page .parallax .editorial1 {
    position: absolute;
    top: 100px;
    transform: translateY(-50%);
}
#event-page .parallax .editorial2 {
    position: absolute;;
    top: 280px;
    transform: translateY(-50%);
}
#event-page .parallax .editorial3 {
    position: absolute;
    top: 280px;
    transform: translateY(-50%);
}
#event-page .parallax .editorial4 {
    position: absolute;
    top: 480px;
    transform: translateY(-50%);
}
#event-page .parallax .editorial5 {
    position: absolute;
    top: 480px;
    transform: translateY(-50%);
}
#event-page .parallax .editorial6 {
    position: absolute;
    top: 650px;
    transform: translateY(-50%);
}


#event-page .parallax .wave1 {
    animation-delay: -1s;
    animation: move-forever2 8s linear infinite;
}
#event-page .parallax .wave2 {
    animation-delay: -8s;
    animation: move-forever3 8s linear infinite;
}

#event-page .parallax .wave3 {
    animation-delay: -2s;
    animation: move-forever2 9s linear infinite;
}
#event-page .parallax .wave4 {
    animation: move-forever3 7s linear infinite;
}
#event-page .parallax .wave5 {
    animation-delay: -1s;
    animation: move-forever2 10s linear infinite;
}

#event-page .parallax .wave6 {
    animation-delay: -5s;
    animation: move-forever 11s linear infinite;
}


@keyframes move-forever2 {
    0% {
        transform: rotate(8deg) translate(-20px, 0%);
    }

    100% {
        transform: rotate(8deg) translate(85px, 0%);
    }
}
@keyframes move-forever3 {
    0% {
        transform: rotate(-8deg) translate(-50px, 0%);
    }

    100% {
        transform: rotate(-8deg) translate(35px, 0%);
    }
}


/* 선물 흔들림 애니메이션 */
@keyframes float1 {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px) }
    100% { transform: translateY(0) } 
}

@keyframes float2 {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}


@keyframes float3 {
    0% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0); }
}


#event-page .parallax .gift {
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    transition: filter 0.1s ease-in-out;
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
    cursor: pointer;
    pointer-events: all;
}

#event-page .parallax .gift:hover,
#event-page .parallax .gift.clicked,
#event-page .parallax .gift.touched {
    animation-play-state: paused; 
    filter: drop-shadow(0 0 10px white);
}


#event-page .parallax .gift:nth-of-type(1) {
    position: absolute;
    left: 12%;
    top: 8%;
    width: 230px;
    aspect-ratio: 1 / 1; 
    animation-name: float1;
    animation-delay: 0.2s;
    animation-duration: 1.5s;
}

#event-page .parallax .gift:nth-of-type(2) {
    position: absolute;
    left: 40%;
    top: 7%;
    width: 230px;
    aspect-ratio: 1 / 1; 
    animation-name: float1;
    animation-delay: 0.6s;
    animation-duration: 1s;
}

#event-page .parallax .gift:nth-of-type(3) {
    width: 200px;
    aspect-ratio: 1 / 1.7; 
    position: absolute;
    left: 75%;
    top: 15%;
    animation-name: float2;
    animation-delay: 0s;
    animation-duration: 1.8s;
}

#event-page .parallax .gift:nth-of-type(4) {
    width: 220px;
    aspect-ratio: 1 / 1.3; 
    position: absolute;
    left: 55%;
    top: 28%;
    animation-name: float2;
    animation-delay: 0.8s;
    animation-duration: 2.1s;
}

#event-page .parallax .gift:nth-of-type(5) {
    width: 200px;
    aspect-ratio: 1 / 1.7; 
    position: absolute;
    left: 25%;
    top: 36%;
    animation-name: float3;
    animation-delay: 0.1s;
    animation-duration: 2.2s;
}

#event-page .parallax .gift:nth-of-type(6) {
    width: 280px;
    aspect-ratio: 1 / 1; 
    position: absolute;
    left: 68%;
    top: 54%;
    animation-name: float3;
    animation-delay: 1.2s;
    animation-duration: 2.5s;
}

#event-page .parallax .gift:nth-of-type(7) {
    width: 240px;
    aspect-ratio: 1 / 1; 
    position: absolute;
    left: 12%;
    top: 68%;
    animation-name: float2;
    animation-delay: 0.4s;
    animation-duration: 1.9s;
}

#event-page .parallax .gift:nth-of-type(8) {
    width: 200px;
    aspect-ratio: 1 / 1.7; 
    position: absolute;
    left: 43%;
    top: 50%;
    animation-name: float3;
    animation-delay: 0.9s;
    animation-duration: 2.0s;
}


#event-page .sec05 {
    margin-top: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative; 
    background-color: #D3FFFD;
    z-index: 5;
    padding: 0 80px;
}

#event-page .sec05 .notice1 {
    padding: 25px;
    max-width: 900px;
    background-color: #FFFFFF;
    font-weight: 700;
    font-size: 22.5px;
    line-height: 35px;
    text-align: left;
    padding-left: 40px;
    list-style-type: disc;
}

#event-page .sec05 .notice2 {
    margin-top: 50px;
    padding: 30px 0 30px 20px;
    border-top: 1px solid #222;
    list-style-type: disc;
    text-align: left;
    font-weight: 400;
    font-size: 22.5px;
    line-height: 35px;
    text-align: left;
    max-width: 1050px;
}

#event-page .sec06 {
    background-color: #D3FFFD;
    padding-top: 130px;
    padding-bottom: 75px;
}

#event-page .event-modal {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    justify-content: center;
    align-items: center;
    z-index: 2500;
    overflow: auto;
}

#event-page .event-modal .modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 70%;
    height: auto; 
    position: relative; 
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
}

#event-page .event-modal .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    border: none;
    background: none;
    color: black;
    opacity: 0.7;
}

#event-page .event-modal .close-button:hover {
    opacity: 1;
}

#event-page .event-result {
    text-align: center;
    padding: 90px 10px 30px;
    background-image: url('../img/event-page/deco.png');
    background-repeat: no-repeat; 
    background-position: center top;
    background-size: contain
}

#event-page .event-result .result-message {
    font-weight: 400;
    font-size: 40px;
    
    
    margin-bottom: 10px;
    color: #0086DD;
}
#event-page .event-result .sub-message{
    font-weight: 400;
    font-size: 24px;
    
    
    margin-bottom: 30px;
}


#event-page .event-result .gift-img {
    width: 70%; 
    height: auto;
    margin-bottom: 10px;
}

#event-page .event-result .gift-card {
    margin: 10px 50px;
    padding: 20px;
    border-radius: 5px;
    border: 1px solid #ccc; 
    font-weight: 400;
    font-size: 15px;
    
    
}


#event-page .event-result .instruction {
    margin-top: 20px;
    font-weight: 400;
    font-size: 18px;
}

#event-page .event-result .notice {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 400;
}

#event-page .event-result .submit-button {
    background-color: #0086DD;
    color: white;
    padding: 5px 30px;
    border: none;
    border-radius: 999px;
    margin-top: 20px;
    font-size: 25px;
    width: 200px;
}

#event-page .event-result .submit-button:hover {
    background-color: #0056b3;
}

#event-page .info-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 2600;
    overflow: auto;
}

#event-page .info-modal .modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 90%;
    width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    box-sizing: border-box;
    position: relative;
}

#event-page .info-modal .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    border: none;
    background: none;
    color: black;
    opacity: 0.7;
}

#event-page .info-modal .form-title {
    text-align: center;
    margin-bottom: 20px;
}


#event-page .info-form {
    padding: 20px;
    margin: 0 auto;
    text-align: center;
}

#event-page .info-form .form-title {
    font-size: 24px;
    color: #0086DD;
    text-align: center;
    margin-bottom: 10px;
    font-weight: 400;
}

#event-page .info-form .form-description {
    font-weight: 400;
    text-align: center;
    margin-bottom: 15px;
    font-size: 15px;
}



#event-page .form-group {
    display: flex;
    margin-bottom: 15px;
    align-items: center;
    width: 100%;
}

#event-page .form-group .phone,
#event-page .form-group .email,
#event-page .form-group .name{
    width: 90px;
    margin-right: 15px;
    text-align: left;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 500;
}

#event-page .form-group .name-input,
#event-page .form-group .email-input {
    flex-grow: 1;
    height: 35px;
    border: 2px solid #ccc;
    border-radius: 5px;
    padding: 5px;
    font-size: 15px;
    font-weight: 500;
    min-width: 0;
    box-sizing: border-box;
}

#event-page .form-group .phone-inputs {
    flex-grow: 1;
    display: flex;
    align-items: center;
}

#event-page .phone-group .phone-select,
#event-page .phone-group .phone-input { 
    font-size: 14px;
    height: 35px;
    border: 2px solid #ccc;
    border-radius: 5px;
    padding: 5px;
}
#event-page .form-group .name-input:focus,
#event-page .form-group .email-input:focus,
#event-page .form-group .phone-select:focus,
#event-page .form-group .phone-input:focus {
    outline: none; 
    border-color: #0086DD; 
    box-shadow: 0 0 5px rgba(0, 134, 221, 0.5); 
}

#event-page .phone-group .phone-select {
    width: 100px;   
    height: 35px;
    font-size: 15px;
    padding: 0px 10px;
    background-repeat: no-repeat;
    background-image: url('../img/event-page/select-arrow.svg');
    background-position: right 2px center;
}

#event-page .phone-group .phone-option {
    font-size: 16px;
    padding: 10px;
}




#event-page .phone-group .phone-input {
    width: 40%;
    box-sizing: border-box;
}

#event-page .phone-group .hyphen {
    display: inline-block;
    width: auto;
    text-align: center;
    font-size: 16px;
    margin: 0 5px;
    height: 35px;
    line-height: 35px;
    flex-shrink: 0;
}

#event-page .info-form .agreement-title {
    margin-top: 20px;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
}

#event-page .info-form .agreement-group {
    margin-top: 10px;
    padding: 15px;
    border-radius: 4px;
    background-color: #F2F2F2;
    max-height: 150px;
    overflow-x: auto;
    text-align: left;
}



#event-page .info-form .agreement-group .agreement-subtitle {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 5px;
}


#event-page .info-form .agreement-group .agreement-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

#event-page .info-modal .checkbox-row {
    display: flex;
    align-items: center;
    justify-items: center;
    gap: 8px;
    margin-top: 15px;
    cursor: pointer;
    user-select: none;
}
#event-page .info-modal .styled-checkbox {
    position: absolute;
    opacity: 0;
}

#event-page .info-modal .checkbox-label {
    position: relative;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center; 
    font-size: 15px;
    font-weight: 500;
}

#event-page .info-modal .checkbox-label:before {
    content: '';
    margin-right: 5px;
    display: inline-block;
    vertical-align: text-top;
    width: 20px;
    height: 20px;
    background: white;
    border: 2px solid #ccc;
    vertical-align: middle;
    box-sizing: border-box;
    border-radius: 5px;
}

#event-page .info-modal .styled-checkbox:checked + .checkbox-label:before {
    background: #0086DD;
}

#event-page .info-modal .styled-checkbox:checked + .checkbox-label:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 15px;
    background: white;
    width: 2px;
    height: 2px;
    box-shadow:
        2px 0 0 white,
        4px 0 0 white,
        4px -2px 0 white,
        4px -4px 0 white,
        4px -6px 0 white,
        4px -8px 0 white;
    transform: rotate(45deg);
}
/* .checkbox-label:before {
    transform: translateY(-1px); 
} */

#event-page .info-modal .submit-button {
    background-color: #0086DD;
    color: white;
    padding: 5px 30px;
    border: none;
    border-radius: 999px;
    margin: 20px auto 0 auto;
    font-size: 25px;
    width: 200px;
}

#event-page .info-modal .submit-button:hover {
    background-color: #0056b3;
}

#event-page .registration-complete-modal {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center; 
    z-index: 2500;
}

#event-page .registration-complete-modal .modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 80%; 
    max-width: 400px;
}

#event-page .registration-complete-modal .form-title {
    font-weight: 400;
    font-size: 40px;
    margin-bottom: 20px;
    color: #0086DD;
}

#event-page .registration-complete-modal .form-description1 {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 400;
}

#event-page .registration-complete-modal .form-description2 {
    font-size: 15px;
    margin-bottom: 20px;
    font-weight: 400;
}

#event-page .registration-complete-modal .close-button {
    color: #FFFFFF;
    background-color: #B2B2B2;
    padding: 5px 30px;
    border: none;
    border-radius: 999px;
    font-size: 25px;
    width: 200px;
    margin-top: 10px;
}

#event-page .registration-complete-modal .close-button:hover {
    background-color: #969696;
}

#event-page .unlucky-modal {
    display: none; 
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    justify-content: center; 
    align-items: center; 
    z-index: 2500;
}

#event-page .unlucky-modal .modal-content {
    background-color: #fff;
    padding: 70px 20px 50px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 90%;
    max-width: 450px; 
}

#event-page .unlucky-modal .form-title {
    font-size: 40px;
    color: #0086DD;
}

#event-page .unlucky-modal .unlucky-img {
    width: 55%; 
    padding-bottom: 20px;
    margin: 0 auto;
}
#event-page .unlucky-modal .form-description {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
}

#event-page .unlucky-modal .close-button {
    color: #FFFFFF;
    background-color: #B2B2B2;
    padding: 5px 30px;
    border: none;
    border-radius: 999px;
    font-size: 25px;
    width: 200px;
    margin-top: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#event-page .unlucky-modal .close-button:hover {
    background-color: #969696;
}

#event-page .already-applied-modal {
    display: none; 
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); 
    justify-content: center; 
    align-items: center; 
    z-index: 1000; 
}

#event-page .already-applied-modal .modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 80%; 
    max-width: 400px;
}

#event-page .already-applied-modal .form-title {
    font-size: 24px;
}

#event-page .already-applied-modal .close-button {
    color: #FFFFFF;
    background-color: #B2B2B2;
    padding: 5px 30px;
    border: none;
    border-radius: 999px;
    font-size: 25px;
    width: 200px;
    margin-top: 20px; 
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#event-page .already-applied-modal .close-button:hover {
    background-color: #969696; 
}

#event-page .event-ended-modal {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000; 
}

#event-page .event-ended-modal .modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 80%; 
    max-width: 400px;
}

#event-page .event-ended-modal .form-title {
    font-size: 24px;
}

#event-page .event-ended-modal .close-button {
    color: #FFFFFF;
    background-color: #B2B2B2;
    padding: 5px 30px;
    border: none;
    border-radius: 999px;
    font-size: 25px;
    width: 200px;
    margin-top: 20px; 
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#event-page .event-ended-modal .close-button:hover {
    background-color: #969696;
}

    /* sub13.html */
    .sub13 .nav-item.prev {
        background-image: url(../img/sub13/prev-img.jpg);
    }
    .sub13 .nav-item.next {
        background-image: url(../img/sub13/next-img.jpg);
    }
    #sub13 .flex-2 {
        display: flex;
        justify-content: space-between;
        gap: 20px; /* 간격 조절 (선택사항) */
        margin-bottom: 100px;
        align-items: stretch;
    }
    #sub13 .flex-2 .summary {
        width: 50%;
        box-sizing: border-box;
        margin-bottom: 0 !important;
    }
    #sub13 .flex-2 .img-container {
        width: 50%;
        box-sizing: border-box;
        height: auto;
        margin-bottom: 0;
        align-items: stretch;
    }
    #sub13 .flex-2 .article-img {
        object-position: 70% center;
    }
    /* flex-wraper: 전체 컨테이너 */
    #sub13 .flex-wraper {
        display: flex;
        gap: 20px; 
        flex-direction: column;
    }
    #sub13 .flex-3 {
        display: flex;
        flex: 1; 
        gap: 20px; 
    }
    #sub13 .flexItem {
        display: flex; 
        align-items: center; 
        justify-content: center; 
        height: auto; 
        min-height: 80px; 
        box-sizing: border-box; 
    }
    #sub13 .flex-3:first-child .flexItem:first-child {
        display: flex;
        flex: 0 0 calc((100% - 40px) * 2 / 3 + 20px);
        justify-content: center;
        align-items: center;

    }
    #sub13 .flex-3:first-child .flexItem:nth-child(2) {
        flex: 1;
    }
    #sub13 .flex-3:nth-child(2) .flexItem,
    #sub13 .flex-3:nth-child(3) .flexItem {
        flex-grow: 1; 
    }
    #sub13 .flexItem {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }
    #sub13 .flexItem-topContent {
        background: #FFE2E2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        width: 100%;
    }
    #sub13 .flexItem-topContent .title-img {
        max-width: 77.22px;
    }
    #sub13 .flex-wraper .flex-3:last-child .flexItem:last-child .title-img {
        max-width: 104px;
    }
    #sub13 .flex-wraper .item4 .flexItem-bottomContent {
        min-height: 302.77px;
    }
    #sub13 .flexItem-topContent .danger-textBox {
        display: flex;
        align-items: center;
        gap: 6px;
    }
    #sub13 .flexItem-topContent .danger-textBox .danger {
        max-width: 50px;
    }
    #sub13 .flexItem-topContent .danger-textBox .flexItem-desc {
        font-size: 18px;
        color: #484848;
    }

    #sub13 .flexItem-bottomContent {
        background: #F1F1F1;
        padding: 16px;
        width: 100%;
    }
    #sub13 .flexItem-bottomContent .icon-flex {
        display: flex;
        gap: 10px;
    }
    #sub13 .flexItem-bottomContent .desc-list {
        margin-top: 16px;
    }
    #sub13 .flexItem-bottomContent .flexItem-desc {
        font-size: 18px;
        /* background: #F1F1F1; */
    }
    #sub13 .flexItem-bottomContent .desc-blod {
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -0.03em;
    }
    #sub13 .flexItem-bottomContent .desc-normal {
        font-size: 18px;
        margin-top: 5px;
    }
    #sub13 .flexItem-bottomContent .caution {
        font-size: 17px;
        /* margin-top: 5px; */
        color: #404040;
        font-weight: 300;
    }





    /* bg-container */
    #sub13 .bg-container {
        /* position: relative; */
        display: flex; 
        justify-content: center;
        align-items: center;
        text-align: center;
        /* height: 0;
        padding-bottom: 200.33%; 
        background-image: url("/img/sub13/article03_pc.jpg");
        background-size: 130%; 
        background-position: center;
        background-repeat: no-repeat;  */
        background: #EDE9E6;
        padding: 50px 20px;
    }
    #sub13 .bg-container .bg-content {
        /* position: absolute;  */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex; 
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* padding: 20px;  */
        box-sizing: border-box; 
    }
    #sub13 .bg-container .title-box {
        border-bottom: 1px solid #FF8EA8;
        padding-bottom: 15px;
        width: clamp(320px, 92%, 900px);
    }
    #sub13 .bg-container .title {
        /* width: clamp(220.41px,20vw,378.97px); */
    }
    #sub13 .rule-wraper {
        width: clamp(320px, 92%, 900px);
        /* margin-top: clamp(25px, 8vh, 68px); */
        margin-top: 68px;
    }
    #sub13 .rule-wraper .rule-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
        margin-bottom: 40px;
        gap: clamp(0px, 2vw, 30px);
    }
    #sub13 .rule-wraper .rule-icon {
        max-width: clamp(50px,5vw,91px);
    }
    #sub13 .rule-wraper .rule-textBox {
        text-align: left;
    }
    #sub13 .rule-wraper .rule-textBox .rule-subTItle {
        font-weight: 500;
    }
    #sub13 .rule-wraper .rule-textBox .rule-desc {
        font-weight: 400;
    }



    @media (max-width: 1280px) {
        #sub13 .flex-3 {
            flex-direction: column;
        }
        #sub13 .rule-wraper {
            /* width: clamp(320px, 69%, 540px); */
        }
        #sub13 .bg-container .title-box {
            /* width: clamp(320px, 67%, 520px); */
        }
        #sub13 .rule-wraper .rule-item {
            margin-bottom: 30px;
            gap: 8px;
        }
        #sub13 .rule-wraper {
            margin-top: 20px;
        }
        #sub13 .rule-wraper .rule-icon {
            max-width: clamp(75px, 7vw, 82.5px);
        }
        #sub13 .f-24 {
            /* font-size: 20px !important; */
        }
        #sub13 .bg-container {
            /* background-size: 107% auto; */
        }
    }
    @media (max-width: 960px) {
        #sub13 .bg-container {
            background-size: 120% auto;
            /* padding-bottom: 200%; */
        }
    }
    @media (max-width: 873px) {
        #sub13 .bg-container {
            background-size: 130% auto;
            /* padding-bottom: 230%; */
        }
        #sub13 .rule-wraper,
        #sub13 .bg-container .title-box {
            /* width: clamp(450px, 87%, 580px); */
        }
    }

    @media (max-width: 768px) {
        #sub13 .flex-3 {
            flex-direction: column;
        }
        #sub13 .flex-2  {
            margin-bottom: 50px;
            flex-direction: column;
            gap: 48px;
        }
        #sub13 .flex-2 .summary,
        #sub13 .flex-2 .img-container {
            width: 100%;
        }
        #sub13 .flex-2 .img-container {
            height: auto !important;
        }
        #sub13 .bg-container {
            /* background-image: url("../img/sub13/article03_m.jpg");
            padding-bottom: 472.42%;
            background-size: 100% auto; */
            margin-bottom: 40px;
        }
        #sub13 .rule-wraper .rule-item {
            flex-direction: column;
            align-items: start;
            gap: 0;
            /* margin-bottom: 80px; */
        }
        #sub13 .rule-wraper {
            margin-top: 80px;
        }
        #sub13 .rule-wraper,
        #sub13 .bg-container .title-box {
            /* width: clamp(320px, 69%, 540px); */
            /* width: 270px; */
        }
    }

    @media (max-width: 567px) {
        #sub13 .rule-wraper {
            margin-top: 30px;
        }
        #sub13 .rule-wraper .rule-item {
            /* margin-bottom: 30px; */
        }
    }
    @media (max-width: 480px) {
        .flex-wraper {
            gap: 15px;
        }
        .flex-3 {
            gap: 10px;
        }
        #sub13 .bg-container {
            /* padding-bottom: 564.42%; */
            background-size: 120% auto;
        }
        #sub13 .rule-wraper .rule-item {
            margin-bottom: 11%;
        }
    }

    /* ---- sub14 -- */
/* sub14.html */
.full-bleed {
    width: 100vw;
    /* 뷰포트 전체 너비 */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    /* 좌우로 밀어서 화면 끝까지 확장 */
    margin-right: -50vw;
    background-color: #FCE7E9;
}
#sub14P, .big-view {
    background-color: #FCE7E9;
}
.sub14.pagination .nav-item.prev {
    background-image: url(../img/sub14/prev-img.jpg);
}
.sub14.pagination .nav-item.next {
    background-image: url(../img/sub14/next-img.jpg);
}
#sub14 .article-content {
    margin-top: 56px;
}

#sub14 .subtitle {
    margin: 100px 0 32px !important;
}

#sub14 .flex-2 {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}
#sub14 .big-none {
    display: none;
}
#sub14 .flex-2 .summary {
    color: #222;
    width: 50%;
    box-sizing: border-box;
    margin-bottom: 0 !important;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    text-decoration-color: #ccc;
    /* 회색으로 더 자연스럽게 */
    line-height: 1.8;
    /* word-break: keep-all; */
}

#sub14 .flex-2 .img-container {
    width: 50%;
    box-sizing: border-box;
    height: auto;
    margin-bottom: 0;
    align-items: stretch;
}

#sub14 .flex-2 .img-container-mob {
    display: none;
}


/* AI Platform Section */
#sub14 .full-bleed {
    width: 100vw;
    /* 뷰포트 전체 너비 */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    /* 좌우로 밀어서 화면 끝까지 확장 */
    margin-right: -50vw;
    background-color: #FCE7E9;
}

#sub14 .full-bleed .container {
    max-width: 980px;
    margin: 100px auto 0;
    padding: 70px 0;
    box-sizing: border-box;
}

#sub14 .full-bleed .container-2 {
    max-width: 980px;
    margin: 100px auto 0;
    padding: 70px 0 0;
    box-sizing: border-box;
}

#sub14 .full-bleed .container-last {
    max-width: 980px;
    margin: 0 auto;
    padding-top: 70px;
    box-sizing: border-box;
}

#sub14 .container {
    max-width: 1200px;
    margin: 70px auto;
    width: 100%;

    background-color: #FCE7E9;
    /* 핑크 */

    /* 상하 60, 좌우 20 */
    box-sizing: border-box;
    /* padding 포함해서 높이/너비 계산 */
}

#sub14 .container-2 {
    max-width: 1200px;
    margin: 70px auto;
    width: 100%;

    background-color: #FCE7E9;
    /* 핑크 */

    /* 상하 60, 좌우 20 */
    box-sizing: border-box;
    /* padding 포함해서 높이/너비 계산 */
}


#sub14 .section-title {
    display: flex;
    align-items: center;
    font-size: 28.5px;
    color: #333;
}

#sub14 .section-icon {
    width: 23px;
    height: 23px;
    margin-right: 15px;
    transform: scale(1.5);
}
#sub14 .icon-border {
    border: 1px solid #222;
    margin: 16px 0 32px;
}

#sub14 .cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    align-items: start;
}

#sub14 .card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
}

#sub14 .card-header {
    text-align: center;
    flex-shrink: 0;
    margin-bottom: 24px;
}

#sub14 .card-icon {
    width: 100%;
    height: auto;
    /* max-width: 480px; */
}

#sub14 .platform-list {

    list-style: none;
    margin: 0;
    flex: 1;
    /* 남은 공간 채우기 */
}

#sub14 .platform {
    display: grid;
    grid-template-columns: 70px 1fr;
    /* 왼쪽 70px 로고, 오른쪽 가변폭 텍스트 */
    column-gap: 16px;
    /* 로고 ↔ 텍스트 사이 16px */
    align-items: start;
    /* 세로 정렬은 시작점에 고정 */
    padding: 0 0 16px;
    border-bottom: 1px dashed #222;
}

/* 2번째부터 마지막까지 */
#sub14 .platform:nth-child(n+2) {
    padding: 16px 0;
}


/* ▶ 여기에 로고 사이즈 고정 70×70 추가 */
#sub14 .logo {
    width: 70px;
    height: 70px;
    object-fit: contain;
    grid-row: span 2;
    /* name/desc 둘 다 가로채도록 */
}

#sub14 .info_name {
    display: flex;
    flex-direction: column;
}

#sub14 .name {
    margin: 0;
    font-size: 25.5px;
    font-weight: 600;
    line-height: 1.2;
    color: #222;
}

#sub14 .desc {
    margin: 0;
    font-size: 25.5px;
    color: #555;
}

#sub14 .desc-mob {
    display: none;
}
#sub14 .big-br {
    display: block !important;
}

/* “요즘 뜨는 AI 활용법” */
#sub14 .ai-activity {
    margin-top: 32px;
}

/* 전체 리스트 초기화 */
#sub14 .activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 각각의 항목 간 간격 */
#sub14 .activity-item+.activity-item {
    margin-top: 40px;
}

/* 제목 영역 (번호 아이콘 + 텍스트) */
#sub14 .activity-header {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
}

#sub14 .activity-icon {
    width: 35px;
    height: 35px;
    margin-right: 8px;
}

#sub14 .activity-icon-2 {
    height: 27px;
    margin-right: 8px;
}

#sub14 .activity-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #222;
    line-height: 1.2;
}

/* 본문 영역: 왼쪽 이미지, 오른쪽 텍스트 */
#sub14 .activity-content {
    display: flex;
    gap: 24px;
    /* 이미지 ↔ 텍스트 사이 간격 */
    align-items: flex-start;
    /* 상단 정렬 */
}

#sub14 .activity-image {
    overflow: hidden;
    width: 33%;
}

#sub14 .activity-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 잘림 없이 영역 꽉 채우기 */
    display: block;
}

#sub14 .activity-text {
    flex: 1;
}

#sub14 .activity-text .activity-text-border {
    border: 1px dashed rgb(82, 81, 81);
    margin: 15px 0;
}

/* 강조 문구 */
#sub14 .activity-text strong {
    display: block;
    font-weight: 600;
    margin-bottom: 16px;
    font-size: 25.5px;
    line-height: 10px;
}

/* 본문 문장 */
#sub14 .activity-text p {
    margin: 0 0 16px;
    line-height: 1.6;
    color: #333;
    font-size: 24px;
}

/* 단계별 가이드 */
#sub14 .step-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#sub14 .step-list li {
    display: flex;
    align-items: start;
    font-size: 24px;
}

#sub14 .step-list li img {
    width: 48px;
    height: 15px;
    margin-right: 14px;
    transform: scale(1.2);
    margin-top: 12px;
}

#sub14 .step-list li:last-child {
    margin-bottom: 0;
}

#sub14 .container-last {
    margin: 40px 0 130px;
}
/* 0604 추가 */
#sub14 .inner-last {
    background: #fff;
    border-radius: 8px;
    padding: 36px;
}
#sub14 .last-title {
    padding-bottom: 16px;
    border-bottom: 1px solid #222;
}
#sub14 .last-titleImg {
    max-width: 275px;
}
#sub14 .last-titleImg-mob {
    display: none;
}
#sub14 .last-contents {
    padding-top: 24px;
}
#sub14 .content-item {
    display: flex;
    align-items: start;
    gap: 5px;
}
#sub14 .content-item .number {
    background: #F591A8;
    border-radius: 4px;
    min-width: 16px;
}
#sub14 .content-item .number span {
    font-size: 12px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
#sub14 .last-contents .content-item:last-child p  {
    margin-bottom: 0;
}
#sub14 .last-titleImg, #sub14 .last-titleImg-mob, #sub14 .activity-icon, #sub14 .activity-icon-2 {
    transform: scale(1.5) translateX(46px);
}
#sub14 .activity-icon {
    transform: scale(1.5) translateX(5px);
}
#sub14 .activity-icon-2.x-1 {
    transform: scale(1.5) translateX(52px);
}
#sub14 .activity-icon-2.x-3 {
    transform: scale(1.5) translateX(62px);
}

@media (max-width: 768px) {
    #sub14 .last-contents .activity-text {
        margin-top: 0;
    }
    #sub14 .last-titleImg {
        display: none;
    }
    #sub14 .last-titleImg-mob {
        max-width: 121px;
        display: block;
    }
    #sub14 .last-titleImg, #sub14 .activity-icon, #sub14 .activity-icon-2 {
        transform: scale(1) !important;
    }
    #sub14 .last-titleImg-mob {
        transform: scale(1.2) translateX(12px);
    }
    #sub14 .activity-text strong {
        line-height: 25px;
    }
}
/* 여기까지 0604 추가 */

/* 공통 */
.full-bleed .responsive-img {
    width: 100%;
    height: auto;
    display: block;
}

/* 기본: PC 이미지만 보인다 */
.full-bleed .img-mob {
    display: none;
}

#sub14 .section-icon-mob {
    display: none;
}
@media (max-width: 1280px) {
    #sub14 .full-bleed .container, #sub14 .full-bleed .container-2 {
        padding-right: 100px;
        padding-left: 100px;
    }
}
/* 모바일 레이아웃 전환 시 */
@media (max-width: 768px) {
    #sub14 br.mob-br {
        display: block !important;
    }
    #sub14 .desc-mob {
        display: block;
    }

    #sub14 .desc {
        font-size: 16px;
    }

    #sub14 .section-icon-mob {
        display: block;
    }
    #sub14 .full-bleed .container, #sub14 .full-bleed .container-2 {
        margin: 56px 0;
        padding: 50px !important;
    }
    /* full-bleed 영역에만 좌우 20px 패딩 적용 */
    #sub14 .card {
        align-items: center;
        max-width: 480px;
        margin: 0 auto;
    }

    /* PC 이미지는 숨기고 */
    #sub14 .full-bleed .img-pc {
        display: none;
    }

    /* 모바일 이미지만 보이게 */
    #sub14 .full-bleed .img-mob {
        display: block;
    }

    #sub14 .full-bleed .container {
        margin: 56px 0;
        padding: 50px 0;
    }

    #sub14 .full-bleed .container-2 {
        margin: 56px auto 0;
        padding: 50px 0 0;
    }

    #sub14 .subtitle {
        margin: 16px 0 24px !important;
    }

    #sub14 .flex-2 {
        flex-direction: column-reverse;
        gap: 24px;
        /* 필요에 따라 간격 줄임 */
    }

    #sub14 .flex-2 .img-container {
        display: none;
    }

    #sub14 .flex-2 .summary,
    #sub14 .flex-2 .img-container-mob {
        width: 100%;
        display: block;
        /* 한 줄 차지 */
        margin: 0;
        /* 혹시 남아 있는 여백 제거 */
    }

    #sub14 .flex-wraper {
        margin-bottom: 56px;
    }

    #sub14 .activity-content {
        display: block;
    }

    #sub14 .activity-icon {
        width: 31px;
        height: 31px;
        margin-right: 12px;
    }

    #sub14 .activity-icon-2 {
        height: 22px;
    }

    #sub14 .activity-image {
        width: 100%;
    }

    #sub14 .activity-text {
        margin-top: 24px;
    }

    #sub14 .container-2 .section-title {
        display: flex;
        align-items: flex-start;
        /* 아이콘과 텍스트를 상단 기준으로 정렬 */
        gap: 10px;
    }

    /* 아이콘을 텍스트 위쪽으로 살짝 올리는 추가 마진 */
    #sub14 .container-2 .section-icon {
        align-self: flex-start;
        /* 위치 보정 */
        margin-top: 2px;
        margin-right: 0;
        /* 필요에 따라 조절 */
    }
}
@media (max-width: 480px) {
    #sub14 .full-bleed .container, #sub14 .full-bleed .container-2 {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }
}



    /* event-추가 스타일링 */
    #event-page .sec03 .info-zone {
        margin: 50px 0;
        max-width: 1059px; /* event-모든페이지 공통 */
    }
    #event-page .sec04 .max-w {
        max-width: 1059px; /* event-모든페이지 공통 */
    }
    #event-page .sec05-btnBox {
        display: flex; /* event-모든페이지 공통 */
        justify-content: center;
        gap: 40px;
        margin-top: 50px;
    }
    #event-page .borderButton {
        border: 2px solid #71C0E8; /* event-모든페이지 공통 */
        background: transparent;
        color: #71C0E8;
        padding: 5px 80px;
        font-size: 25.5px;
        font-weight: 600;
        border-radius: 999px;
        margin-top: 20px;
    }
    #event-page .btn-bg {
        background: #424242; /* event-모든페이지 공통 */
        color: #fff;
        padding: 6px 60px;
        font-size: 40px;
        border-radius: 999px;
    }
    #event-page .sec02 .bg-img { /* event-모든페이지 공통 */
        /* margin-top: 20px; */
        /* margin-left: 20px; */
        width: auto; 
        /* min-width: 120%; */
        /* flex-shrink: 0; */
        max-width: none;
    }
    #event-page.sub15 .sec05 .notice2 {
        max-width: 1059px;
        width: 100%;
    }
    #event-page.sub15 .sec01,#event-page.sub15 .sec02,
    #event-page.sub16 .sec01,#event-page.sub16 .sec02 
    #event-page.sub17 .sec01,#event-page.sub17 .sec02 
    #event-page.sub19 .sec01,#event-page.sub19 .sec02 {
        background-color: initial; /* event-15,16,17,19 공통 */
    }
    #event-page.sub15 .sec02 .text-content,
    #event-page.sub16 .sec02 .text-content,
    #event-page.sub17 .sec02 .text-content,
    #event-page.sub19 .sec02 .text-content {
        top: 50%; /* event-15,16,17,19 공통 */
    }
    #event-page.sub15 .sec04,
    #event-page.sub16 .sec04,
    #event-page.sub17 .sec04,
    #event-page.sub18 .sec04 {
        margin-top: 0px; /* event-15,16,17,19 공통 */
        margin-bottom: 0px;
    }
    #event-page.sub15 .sec05,
    #event-page.sub16 .sec05,
    #event-page.sub17 .sec05,
    #event-page.sub18 .sec05 {
        margin-top: 0px; /* event-15,16,17,19 공통 */
        padding-top: 50px;
    }
    #event-page.sub15 .sec06, #event-page.sub16 .sec06, #event-page.sub17 .sec06, #event-page.sub18 .sec06 {
        padding: 160px 80px 75px; /* event-15,16,17,19 공통 */
    }


    /* event-15page.html */
    #event-page.sub15 .sub15P .nav-item.prev {
        background-image: url(../img/sub15/prev-img.jpg);
    }
    #event-page.sub15 .sub15P .nav-item.next {
        background-image: url(../img/sub15/next-img.jpg);
    }
    #event-page.sub15 .sec02-1,
    #event-page.sub15 .sec03,
    #event-page.sub15 .sec04,
    #event-page.sub15 .sec05/*,
    #event-page.sub15 .sec06 */ {
        background-color: #C7EAFD;
        padding: 0 40px;
    }
    #event-page.sub15 .sec06 {
        background-color: #C7EAFD;
    }
    #event-page.sub15 .sec02 .star {
        position: absolute;
        top: 2%;
        left: 21%;
        max-width: 94.5px;
    }
    #event-page.sub15 .sec02 .line {
        max-width: 717.75px;
    }
    #event-page.sub15 .note {
        min-width: 700px;
    }
    #event-page.sub15 .section {
        margin-top: 0;
        /* padding: 0 20px; */
    }
    #event-page.sub15 .sec04 .img-position {
        position: relative;
    }
    #event-page.sub15 .sec04 .img-position .quiz {
        position: absolute;
        top: 250px;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 319.5px;
    }
    #event-page.sub15 .sec04 .desc-dotted-container {
        position: absolute;
        top: 580px;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        text-align: center;
        /* padding: 0 80px; */
    }
    #event-page.sub15 .sec04 .desc-dotted {
        /* display: block; */
        font-size: 31.5px;
        border-bottom: 2px dotted #CBD8DF;
        line-height: 57px;
    }
    #event-page.sub15 .sec04 .initial-container {
        display: flex;
        justify-content: center;
        gap: 30px;
        position: absolute;
        bottom: 170px;
        transform: translate(-50%);
        left: 50%;
    }
    #event-page.sub15 .sec04 .initial-container .initial-top,
    #event-page.sub15 .sec04 .initial-container .initial-bottom  {
        display: flex;
        gap: 10px;
        justify-content: center;
    }
    #event-page.sub15 .sec04 .initial-container .initialItem {
        width: 82.72px;
        height: 82.72px;
        background-color: #FFE196;
        /* padding: 0px; */
        border-radius: 8px;
    }
    #event-page.sub15 .sec04 .initial-container .f-42 {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 64px;
        line-height: 1.2;
    }
    #event-page.sub15 .sec04 .btn-container {
        position: absolute;
        bottom: 60px;
        transform: translate(-50%);
        left: 50%;
    }
    #event-page.sub15 .sec04 .fw-normal {
        font-weight: normal;
    }
    #event-page.sub15 .sec04 .borderButton {
        color: #222;
        padding: 5px 20px;
    }
    #event-page.sub15 .sec05-btnBox .invit  {
        background-color: #71C0E8;
    }
    @media (max-width: 1280px) {
        #event-page.sub15 .sec02 .star {
            top: -3%;
            left: 28%;
        }
        #index .sec07 .image-wrapper {
            transform: scale(1.2);
        }
    }
    @media (max-width: 1163px) {
        #event-page.sub15 .sec04 .initial-container .initialItem {
            width: 62px;
            height: 62px;
            padding: 6px;
        }
        #event-page.sub15 .sec04 .initial-container .f-42 {
            font-size: 64px;
            line-height: 0.7;
        }
        #event-page.sub15 .sec04 .img-position .quiz {
            top: 250px;
            max-width: 250px;
        }
        #event-page.sub15 .sec04 .desc-dotted-container {
            top: 480px;
        }
    }
    @media (max-width: 1050px) {
        #event-page.sub15 .mob-br {
            display: block !important;
        }
        #event-page.sub15 .sec04 .initial-container {
            flex-direction: column;
            gap: 50px;
            bottom: 290px;
        }
        #event-page.sub15 .sec04 .img-position .quiz {
            top: 300px;
            max-width: 250px;
        }
        #event-page.sub15 .sec04 .desc-dotted-container {
            top: 720px;
        }
        #event-page.sub15 .sec04 .btn-container {
            bottom: 120px;
        }
    }
    @media (max-width: 768px) {
        #event-page.sub15 .sec04 .initial-container .initialItem {
            width: 58px;
            height: 58px;
            padding: 9px;
        }
        #event-page.sub15 .sec04 .initial-container .f-42 {
            font-size: 45.12px;
            line-height: 0.8;
        }
        #event-page .sec03 .info-zone {
            margin: 30px 0;
            /* max-width: 480px; */
        }
        #event-page .borderButton {
            /* font-size: 24px;
            padding: 5px 30px !important; */
        }
        #event-page.sub15 .sec04 .desc-dotted {
            display: inline;
            font-size: 25.5px;
            line-height: 52.5px;
        }
        #event-page .sec04 .max-w {
            /* max-width: 320px; */
        }
        #event-page.sub15 .sec04 .img-position .quiz {
            top: 170px;
            max-width: 270px;
        }
        #event-page.sub15 .sec04 .desc-dotted-container {
            top: 500px;
        }
        #event-page.sub15 .sec04 .initial-container {
            gap: 30px;
            bottom: 150px;
        }
        #event-page.sub15 .sec04 .btn-container {
            bottom: 30px;
        }
        #event-page.sub15 .sec05, #event-page.sub16 .sec05, #event-page.sub17 .sec05, #event-page.sub18 .sec05 {
            padding-top: 10px; /* event-15,16,17,19 공통 */
        }
        #event-page .btn-bg {
            padding: 6px 30px; /* event 공통 */
            font-size: 30px;
        }
        #event-page.sub15 .sec02 .text-content, #event-page.sub16 .sec02 .text-content, #event-page.sub17 .sec02 .text-content, #event-page.sub19 .sec02 .text-content {
            top: 65%; /* event-15,16,17,19 공통 */
        }
        /* event-15page.html */
        #event-page.sub15 .sec02 .star {
            max-width: 44px;
            top: 9%;
            left: 32%;
        }
        #event-page.sub15 .sec02 .line {
            max-width: 220.5px;
        }
        #event-page.sub15 .sec02 .event-title {
            margin-bottom: 10px;
        }
        #event-page .sec06 {
            padding: 60px 0px 20px !important; /* event 공통 */
        }
        #event-page.sub15 .note {
            min-width: 360px;
        }
        
    }
    @media (max-width: 630px) {
        #event-page.sub15 .sec02 .star {
            top: 26px;
            left: 172px;
        }
    }
    @media (max-width: 560px) {
        #event-page.sub15 .sec02 .star {
            left: 90px;
        }
    }
    @media (max-width: 480px) {
        #event-page.sub15 .sec04 .img-position .quiz {
            top: 170px;
            max-width: 200px;
        }
        #event-page.sub15 .sec04 .desc-dotted-container {
            top: 470px;
        }
        #event-page.sub15 .sec04 .desc-dotted {
            font-size: 22px;
            line-height: 1.8;
        }
        #event-page .borderButton {
            padding: 5px 10px !important;
        }
        #event-page.sub15 .sec04 .initial-container .initialItem {
            width: 40px;
            height: 40px;
            padding: 0px;
        }
        #event-page.sub15 .sec04 .initial-container {
            gap: 10px;
            bottom: 130px;
        }
    }
    @media (max-width: 427px) {
        #event-page.sub15 .sec04 .img-position .quiz {
            top: 130px;
            max-width: 200px;
        }
        #event-page.sub15 .sec04 .desc-dotted-container {
            top: 380px;
        }
        #event-page.sub15 .sec04 .desc-dotted {
            font-size: 22px;
            line-height: 1.8;
        }
        #event-page .borderButton {
            padding: 5px 10px !important;
        }
        #event-page.sub15 .sec04 .initial-container .initialItem {
            width: 40px;
            height: 40px;
            padding: 0px;
        }
        #event-page.sub15 .sec04 .initial-container {
            gap: 10px;
            bottom: 130px;
        }
        #event-page .btn-bg {
            padding: 6px 15px;
            font-size: 30px;
        }
    }  /* 여기까지 sub15 */


    /* event-16page.html */
    .sub16 .nav-item.prev {
        background-image: url(../img/sub16/prev-img.jpg);
    }
    .sub16 .nav-item.next {
        background-image: url(../img/sub16/next-img.jpg);
    }
    #event-page.sub16 .sec02-1.pink {
        background-color: #FFE2E2;
        /* padding: 0 40px; */
    }
    #event-page.sub16 .sec02 .effect_line {
        position: absolute;
        top: 34%;
        right: 10%;
    }
    #event-page.sub16 .sec02-1.pink .sub16-article-02 {
        margin-bottom: 30px;
    }

    #event-page.sub16 .sec03.pink {
        background-color: #FFE2E2;
    }
    #event-page.sub16 .sec03 .coupon-img {
        margin-top: 20px;
    } 

    #event-page.sub16 .sec04.pink {
        background-color: #FFE2E2;
    }
    #event-page.sub16 .sec04.pink .sec05-btnBox {
        margin-top: 0   ;
    }

    #event-page.sub16 .sec05.pink {
        background-color: #FFE2E2;
    }

    #event-page.sub16 .sec06.pink {
        background-color: #FFE2E2;
    }

    @media (max-width: 1280px) {
    #event-page.sub16 .sec02 .effect_line {
        max-width: 46px;
        top: 38%;
        right: 26%;
        }
        #event-page.sub16 .sec02-1.pink .comment {
            text-align: center;
        }
    #event-page.sub16 .sec03 .coupon-img {
        margin-top: 50px;
    }    

    }
    @media (max-width: 1050px) {
        #event-page.sub16 .sec02 .effect_line {
        max-width: 46px;
        top: 10%;
        right: 32%;
        }
    }
    @media (max-width: 768px) {
        #event-page.sub16 .sec02 .effect_line {
        max-width: 36px;
        top: 18%;
        right: 32%;
        }
    }
    @media (max-width: 480px) {
        #event-page.sub16 .sec02 .effect_line {
        max-width: 36px;
        top: 18%;
        right: 24%;
        }
    }


    /* event-17page.html */
    .sub17 .nav-item.prev {
        background-image: url(../img/sub17/prev-img.jpg);
    }
    .sub17 .nav-item.next {
        background-image: url(../img/sub17/next-img.jpg);
    }
    #event-page.sub17 .big-none {
        display: block;
    }
    #event-page.sub17 .sec01, #event-page.sub17 .sec02 {
        background-color: #fff;
    }
    #event-page.sub17 .sec02-1, #event-page.sub17 .sec03, #event-page.sub17 .sec04 , #event-page.sub17 .sec05, #event-page.sub17 .sec06 {
        background-color: #DBFFDE;
    }
    #event-page.sub17 .invit {
        background-color: #FF8EA8 !important;
    }
    #event-page.sub17 .sec02 {
        height: 400px;
    }
    #event-page.sub17 .sec02-1 .comment {
        margin-top: 0px;
    }
    #event-page.sub17 .sec03 {
        padding-top: 40px;
        margin-top: 0px;
    }
    #event-page.sub17 .line {
        max-width: 126px;
    }
    #event-page.sub17 .sec02-1 .coupon-img {
        max-width: 276px;
    }
    #event-page.sub17 .borderButton {
        border: 2px solid #FF8EA8;
        color: #FF8EA8;
    }
    #event-page.sub17 .sec02 {
        padding-bottom: 0;
    }
    #event-page.sub17 .sec02-1 {
        padding-top: 0;
    }
    /* 퀴즈 */
    #event-page.sub17 .sec04 {
        /* position: relative; */
    }
    #event-page.sub17 .sec04 .img-position {
        position: relative;
    }
    #event-page.sub17 .sec04 .img-position:nth-child(2), #event-page.sub17 .sec04 .img-position:nth-child(3) {
        margin-top: 50px;
    }
    #event-page.sub17 .sec04 .quiz {
        position: absolute;
        top: 30% !important;
        left: 50%;
        transform: translateX(-50%);
        max-width: 83px;
    }
    #event-page.sub17 .sec04 .q-icon {
        position: absolute;
        top: 23%;
        left: 74%;
        max-width: 120px;
    }
    #event-page.sub17 .sec04 .img-position .q2 {
        left: 11%;
    }
    #event-page.sub17 .sec04 .dotted-container {
        position: absolute;
        top: 41%;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 30px;
        text-align: center;
        width: 100%;
    }
    #event-page.sub17 .sec04 .dotted-container .desc-dotted {
        border-bottom: 2px dotted #FF8EA8;
        font-size: 40px;
        line-height: 85.5px;
    }
    #event-page.sub17 .m-block {
        display: none;
    }
    #event-page.sub17 .sec04 .ox-container {
        position: absolute;
        bottom: 15%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        /* align-items: center; */
        gap:48px
    }
    #event-page.sub17 .sec04 .img-position:nth-child(3) .ox-container {
        bottom: 5%;
    }
    #event-page.sub17 .sec04 .ox-container .oxItem {
        width: 120px;
        height: 120px;
        border-radius: 24px;
        background-color: #F1EFE0;
        font-size: 100px;
        align-items: center;
        display: flex;
        justify-content: center;
    }
    #event-page.sub17 .sec04 .ox-container .oxItem .inter-7 {
        color: #61C669;
    }
    #event-page.sub17 .sec04 .ox-container .oxItem.right .inter-7 {
        color: #FF8EA8;
    }


    @media (max-width: 1130px) {
        #event-page.sub17 .m-block {
            display: block;
        }
        #event-page.sub17 .m-inline {
            display: none;
        }
        #event-page.sub17 .sec04 .img-position .quiz {
            top: 21%;
            max-width: 87px;
        }
        #event-page.sub17 .sec04 .dotted-container .desc-dotted {
            font-size: 25.5px;
            line-height: 52.5px;
        }
        #event-page.sub17 .sec04 .ox-container .oxItem {
            width: 90px;
            height: 90px;
            border-radius: 12px;
            font-size: 75px;
            align-items: center;
        }
        #event-page.sub17 .sec04 .dotted-container {
            top: 40%;
        }
        #event-page.sub17 .sec04 .q-icon {
            top: 21%;
            left: 75%;
            max-width: 75px;
        }
    }
    @media (max-width: 768px) {
        #event-page.sub17 .sec04 .ox-container {
            bottom: 10%;
        }
    }
    @media (max-width: 500px) {
        #event-page.sub17 .sec04 .ox-container,
        #event-page.sub17 .sec04 .img-position:nth-child(3) .ox-container {
            bottom: 5%;
        }
        #event-page.sub17 .sec04 .dotted-container .desc-dotted {
            font-size: 20.4px;
            line-height: 42px;
        }
        #event-page.sub17 .sec04 .ox-container .oxItem {
            width: 72px;
            height: 72px;
            border-radius: 14.4px;
            font-size: 60px;
            align-items: center;
        }
    }
    
/* event-18page.html */
.comment.sub18-mt-50 {
    margin-top: 50px !important;
}
.sub18.nav-item.prev {
    background-image: url(../img/event-page/prev-img.png);
}
.sub18.nav-item.next {
    background-image: url(../img/event-page/next-img.png);
}
.sub18.nav-item.prev {

}

/* event-19page.html */
#event-page.sub19 .sec02-1.purple {
    background-color: #FBE5F9;
}
#event-page.sub19 .sec02-1.purple .article16-02 {
    margin-bottom: 30px;
}
#event-page.sub19 .sec03.purple {
    background-color: #FBE5F9;
}

#event-page.sub19 .sec04.purple {
    background-color: #FBE5F9;
}
#event-page.sub19 .sec04.purple .sec05-btnBox {
    margin-top: 0   ;
}

#event-page.sub19 .sec05.purple {
    background-color: #FBE5F9;
}

#event-page.sub19 .sec06.purple {
    background-color: #FBE5F9;
}

@media (max-width: 1280px) {
    #event-page.sub16 .sec02-1.purple .comment {
            text-align: center;
        }
}
@media (max-width: 1050px) {
    #event-page.sub19 .sec02.purple .text-content {
        margin-top: 20px;
    }
    #event-page.sub19 .sec02-1.purple .article16-02 {
        margin-top: 20px;
    }
}
@media (max-width: 768px) {
    #event-page.sub19 .sec02.purple .text-content {
        margin-top: 0px;
    }
    #event-page.sub19 br.mob-br {
        display: block !important;
    }
}








@media (max-width: 1500px) {

    #index .sec05 .item-2 {
        flex: 0 0 49%;
    }
    #index .sec05 .item-4 {
        flex: 0 0 65%;
    }
    #index .sec05 .mob-br2 {
        display: none;
    }
    #index .sec06 .mob-br {
        display: none;
    }
}



@media (max-width: 1280px) {

    /* ✅ index.html */
    #index .sec01 .title {
        font-size: 50px;
        line-height: 70px;
    }
    #index .sec01 .mob-br3{
        display: none;
    }

    #index .sec01 .mob-br {
        display: block;
    }


    #index .sec02 .keyword-item {
        margin-top: 0px;
    }

    #index .sec02 .keyword-cloud {
        height: 350px;
        max-width: 570px;
    }

    #index .sec02 .keyword {
        width: 130px;
        height: 65px;
        border-radius: 999px;
    }

    #index .sec02 .keyword.main {
        width: 190px;
        height: 110px;
        border-radius: 999px;
        border: 1.5px solid #FF7BAC;
        
    }

    #index .sec02 .keyword.nano {
        width: 80px;
        height: 60px;
        border-radius: 999px;
    }

    #index .sec02 .keyword.small {
        width: 100px;
        height: 60px;
        border-radius: 999px;
        font-size: 19px;
    }

    #index .sec02 .keyword.medium {
        width: 120px;
        height: 70px;
        border-radius: 999px;
    }

    #index .sec02 .keyword.mbig {
        width: 150px;
        height: 70px;
        border-radius: 999px;
    }

    #index .sec02 .keyword.big {
        width: 180px;
        height: 80px;
        font-size: 26px;
        border-radius: 999px;
    }

    #index .sec02 .keyword.emphasized {
        width: 105px;
        height: 70px;
        border-radius: 999px;
        border: 1.5px solid #FF7BAC;
    }

    #index .sec02 .keyword-item.center {
        left: 37%;
        top: 30%;
    }

    #index .sec02 .keyword-item:nth-child(2) {
        left: 83%;
        top: 45%;
    }

    #index .sec02 .keyword-item:nth-child(3) {
        left: 95%;
        top: 15%;
    }

    #index .sec02 .keyword-item:nth-child(4) {
        left: 15%;
        top: 100%;
    }

    #index .sec02 .keyword-item:nth-child(5) {
        left: 0%;
        top: 30%;
    }

    #index .sec02 .keyword-item:nth-child(6) {
        left: 36%;
        top: 75%;
    }

    #index .sec02 .keyword-item:nth-child(7) {
        left: 25%;
        top: 3%;
    }

    #index .sec02 .keyword-item:nth-child(8) {
        left: -5%;
        top: 65%;
    }

    #index .sec02 .keyword-item:nth-child(9) {
        left: 70%;
        top: 3%;
    }

    #index .sec02 .keyword-item:nth-child(10) {
        left: 75%;
        top: 78%;
    }

    #index .sec02 .keyword-item:nth-child(11) {
        left: 45%;
        top: 105%;
    }
    #index .sec02 .keyword-item:nth-child(12) {
        left: 82%;
        top: 113%;
    }
    #event-page .sec05 {
        margin-top: 180px;
    }
    #index .sec05 .mob-br3 {
        display: block;
    }
    #index .sec05 .item-2 {
        flex: 0 0 48%;
    }
    #index .sec05 .item-4 {
        flex: 0 0 64%;
    }
    #index .sec05 .item-2 .img-container, 
    #index .sec05 .item-5 .img-container {
        height: 50%;
    }
    #index .sec05 .item-4 .img-container {
        height: 60%;
    }
    #index .sec07 .event-carousel {
        display: block;
    }

    #index .sec07 .event-items {
        display: none;
    }


    /* ✅ sub-page.html */
    .pagination .nav-button {
        padding: 5px 10px;
    }

    .pagination .nav-item {
        padding: 20px 10px;
    }

    .pagination .pagination {
        gap: 20px;
    }
    /* .prev .nav-button {
        padding-right: 0px 0px 10px 0px;
    }
    .next .nav-button {
        padding-right: 0px 10px 0px 0px;
    } */




    /* ✅ event-page.html */
    #event-page.content{
        padding-top: 80px;
    }
    #event-page .sec02 {
        height: 450px;
    }
    #event-page .sec02 .text-content {
        top: 80%;
    }

    #event-page .sec02 .seagull-1 {
        position: absolute;
        top: 5%;
        left: 5%;
    }

    #event-page .sec02 .seagull-2 {
        position: absolute;
        top: 5%;
        right: 15%;
    }

    #event-page .sec02 .event-title {
        font-size: 43px;
        line-height: 60px;
        margin-top: 30px;
    }

    #event-page .sec02-1 .comment {
        text-align: left;
        font-size: 22.5px;
        line-height: 32px;
        font-weight: 400;
        margin-top: 20px;
    }

    #event-page .sec02 .coupon-img {
        margin-top: 30px;
    }

    #event-page .sec03 .info-zone {
        width: 100%;
    }

    #event-page .sec03 .info-label {
        width: 20%;
    }

    #event-page .sec03 .info-value {
        width: 80%;
    }

    #event-page .sec06 .carousel-navigation {
        gap: 20px;
    }

    @keyframes move-forever2 {
        0% {
            transform: rotate(3deg) translate(-20px, 0%);
        }
    
        100% {
            transform: rotate(3deg) translate(85px, 0%);
        }
    }
    @keyframes move-forever3 {
        0% {
            transform: rotate(-3deg) translate(-50px, 0%);
        }
    
        100% {
            transform: rotate(-3deg) translate(35px, 0%);
        }
    }
    #event-page .parallax .editorial1 {
        top: 50px;
    }
    #event-page .parallax .editorial2 {
        top: 180px;
    }
    #event-page .parallax .editorial3 {
        position: absolute;
        top: 280px;
        transform: translateY(-50%);
    }
    #event-page .parallax .editorial4 {
        position: absolute;
        top: 400px;
        transform: translateY(-50%);
    }
    #event-page .parallax .editorial5 {
        position: absolute;
        top: 480px;
        transform: translateY(-50%);
    }
    #event-page .parallax .editorial6 {
        position: absolute;
        top: 600px;
        transform: translateY(-50%);
    }

    #event-page .parallax .gift:nth-of-type(1) {
        position: absolute;
        left: 12%;
        top: 10%;
        width: 140px;
        aspect-ratio: 1 / 1; 
    }

    #event-page .parallax .gift:nth-of-type(2) {
        position: absolute;
        left: 68%;
        top: 10%;
        width: 150px;
        aspect-ratio: 1 / 1; 
    }

    #event-page .parallax .gift:nth-of-type(3) {
        width: 120px;
        aspect-ratio: 1 / 1.7; 
        position: absolute;
        left: 43%;
        top: 20%;
    }

    #event-page .parallax .gift:nth-of-type(4) {
        width: 140px;
        aspect-ratio: 1 / 1.1; 
        position: absolute;
        left: 65%;
        top: 38%;
    }

    #event-page .parallax .gift:nth-of-type(5) {
        width: 120px;
        aspect-ratio: 1 / 1.7; 
        position: absolute;
        left: 15%;
        top: 38%;
    }

    #event-page .parallax .gift:nth-of-type(6) {
        width: 170px;
        aspect-ratio: 1 / 1; 
        position: absolute;
        left: 38%;
        top: 53%;
    }

    #event-page .parallax .gift:nth-of-type(7) {
        width: 150px;
        aspect-ratio: 1 / 1; 
        position: absolute;
        left: 12%;
        top: 70%;
    }

    #event-page .parallax .gift:nth-of-type(8) {
        width: 110px;
        aspect-ratio: 1 / 1.7; 
        position: absolute;
        left: 72%;
        top: 65%;
    }
        
    
}


@media (max-width: 1100px) {

    #index .sec05 .item-2 {
        flex: 0 0 45%;
    }
    #index .sec05 .item-4 {
        flex: 0 0 61%;
    }
    #index .sec05 .item-3 .img-container {
        height: 40%;
    }
    #index .sec05 .item-4 .img-container {
        height: 50%;
    }
}
@media (max-width: 1100px) {

    #index .sec05 .item-2 {
        flex: 0 0 57%;
    }
    #index .sec05 .item-4 {
        flex: 0 0 61%;
    }
    #index .sec05 .item-3 .img-container {
        height: 40%;
    }
    #index .sec05 .item-4 .img-container {
        height: 50%;
    }
}
@media (max-width: 840px) {

    #index .sec05 .item-2 {
        flex: 0 0 49%;
    }
    #index .sec05 .item-4 {
        flex: 0 0 62%;
    }
    #index .sec05 .item-3 .img-container {
        height: 40%;
    }
    #index .sec05 .item-4 .img-container {
        height: 55%;
    }
    #index .sec05 .item-2 .img-container, 
    #index .sec05 .item-5 .img-container {
        height: 37%;
    }
}





@media (max-width: 768px) {

    /* ✅ index.html */
    #index .sec01 {
        padding: 0 20px;
    }

    #index .sec01 .title {
        line-height: 35px;
        font-size: 28px;
    }

    .sec01-header {
        margin-bottom: 40px;
    }

    .check-icon {
        width: 37.5px;
        height: 37.5px;
    }

    .check-label {
        font-size: 22.5px;
        font-weight: 600;
    }
    #index .sec01 .mob-br3{
        display: block;
    }
    #index .sec01 .content-wrapper {
        flex-direction: column;
        gap: 10px;
    }

    #index .sec01 .content-box {
        display: grid;
        grid-template-areas:
            "black-box"
            "text-area"
            "content-left"
            "sec01-btn";
    }

    #index .sec01 .black-box {
        grid-area: black-box;
        margin: 0 auto 20px;
    }

    #index .sec01 .content-left {
        grid-area: content-left;
        order: 3;
        width: 100%;
    }

    #index .sec01 .content-right {
        display: contents;
    }

    #index .sec01 .text-area {
        grid-area: text-area;
        order: 2;
        margin-bottom: 10px;
        padding: 0px;
    }

    #index .sec01 .sec01-btn {
        grid-area: sec01-btn;
        order: 4;
        font-size: 17px;
    }

    #index .sec01 .black-box {
        font-size: 21px;
        padding: 6px 24px;
    }

    #index .sec01 .title {
        font-size: 42px;
        line-height: 52.5px;
    }

    #index .sec01 .catagory {
        font-size: 24px;
    }

    #index .sec01 .sub-title {
        font-size: 25.5px;
        line-height: 37.5px;
    }
    #index .sec01 .sec01-btn {
        font-size: 25.5px;
    }

    #index .sec06 .mob-br2 {
        display: block;
    }


    #index .sec02 {
        padding: 0 20px;
    }
    #index .sec06 .mob-br2 {
        display: block;
    }

    #index .sec02 {
        padding: 70px 0px;
        text-align: center;
    }

    #index .sec02 .title {
        color: #FF7BAC;
        margin-bottom: 0px;
        font-size: 20px;
        font-weight: 700;
    }

    #index .sec02 .keyword-cloud {
        max-width: 300px;
        height: 450px;
    }

    #index .sec02 .keyword {
        width: 100px;
        height: 50px;
        border-radius: 999px;
        font-size: 17px;
    }

    #index .sec02 .keyword.main {
        width: 110px;
        height: 80px;
        border-radius: 999px;
        border: 1px solid #FF7BAC;
        font-size: 20px;
    }

    #index .sec02 .keyword.nano {
        width: 60px;
        height: 50px;
        border-radius: 999px;
        font-size: 18px;
    }

    #index .sec02 .keyword.small {
        width: 70px;
        height: 50px;
        border-radius: 999px;
        font-size: 18px;
    }

    #index .sec02 .keyword.medium {
        width: 80px;
        height: 50px;
        border-radius: 999px;
        font-size: 17px;
    }

    #index .sec02 .keyword.mbig {
        width: 110px;
        height: 50px;
        font-size: 17px;
        border-radius: 999px;
    }

    #index .sec02 .keyword.big {
        width: 125px;
        height: 50px;
        font-size: 17px;
        border-radius: 999px;
    }

    #index .sec02 .keyword.emphasized {
        width: 75px;
        height: 50px;
        border-radius: 999px;
        font-size: 16px;
        border: 1px solid #FF7BAC;
    }

    #index .sec02 .keyword-item.center {
        left: 34%;
        top: 29%;
    }

    #index .sec02 .keyword-item:nth-child(2) {
        left: 55%;
        top: 52%;
    }

    #index .sec02 .keyword-item:nth-child(3) {
        left: 78%;
        top: 36%;
    }

    #index .sec02 .keyword-item:nth-child(4) {
        left: 2%;
        top: 38%;
    }

    #index .sec02 .keyword-item:nth-child(5) {
        left: 35%;
        top: 85%;
    }

    #index .sec02 .keyword-item:nth-child(6) {
        left: 8%;
        top: 53%;
    
    }

    #index .sec02 .keyword-item:nth-child(7) {
        left: 7%;
        top: 22%;
    }

    #index .sec02 .keyword-item:nth-child(8) {
        left: 33%;
        top: 13%;
    }
    #index .sec02 .keyword-item:nth-child(9) {
        left: 77%;
        top: 20%;
    }

    #index .sec02 .keyword-item:nth-child(10) {
        left: 12%;
        top: 69%;
    }

    #index .sec02 .keyword-item:nth-child(11) {
        left: 65%;
        top: 67%;
    }
    #index .sec02 .keyword-item:nth-child(12) {
        left: 90%;
        top: 52%;
    }

    #index .sec03 .title {
        margin-bottom: 0px;
        padding: 10px 20px;
    }

    #index .sec03 .carousel-button {
        display: none;
    }

    #index .sec03 .carousel-track {
        display: flex;
        flex-direction: column;
        gap: 40px;
        transform: none !important;
        transition: none !important;
    }

    #index .sec03 .carousel-item {
        width: 100%;
        flex-shrink: 0;
        height: auto;
    }

    #index .sec03 .carousel-img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
        height: 250px;
    }

    #index .sec03 .small-text {
        padding: 0px 20px 5px;
    }

    #index .sec03 .title-text {
        padding: 0px 20px;
    }

    #index .sec04 .title {
        border-bottom: 1px solid #AAAAAA;
        margin-bottom: 20px;
        padding: 10px 20px;

    }

    #index .sec04 .line {
        display: none;
    }

    #index .sec04 .slider-section {
        width: 100%;
    }

    #index .sec04 .swiper-button {
        width: 30px;
        height: 30px;
    }
    #index .sec04 .swiper-frame {
        max-height: 300px;
    }
    #index .sec04 .swiper-button.prev {
        left: -40px;
    }

    #index .sec04 .swiper-button.next {
        right: -40px;

    }
    
    #index .sec04 .swiper-frame {
        max-height: 300px;
    }

    #index .sec04 .sec04-wrap {
        padding: 10px 60px 30px;

    }
    #index .sec05 .mob-br2 {
        display: block;
    }
    #index .sec05 .title {
        margin-bottom: 0px;
        padding: 10px 20px;
    }

    #index .sec05 .grid {
        display: block;
        height: auto;
        gap: 20px;
        overflow: visible;
    }

    #index .sec05 .text-overlay {
        display: none;
    }

    #index .sec05 .text-wrap {
        display: block;
    }

    #index .sec05 .left-col .text-overlay .post-title {
        font-weight: 500;
        font-size: 18px;
        line-height: 27px;
        margin-top: 0;
    }

    #index .sec05 .left-col .post-item::after {
        opacity: 0;
    }

    #index .sec05 .sub-title {
        padding: 0 20px;
        margin-bottom: 0px;
    }

    #index .sec05 .post-title {
        padding: 0 20px;
    }

    #index .sec05 .text-wrap {
        padding-bottom: 10px;
    }

    #index .sec05 .item-2 .img-container,
    #index .sec05 .item-3 .img-container,
    #index .sec05 .item-4 .img-container,
    #index .sec05 .item-5 .img-container {
        height: 300px;

    }

    #index .sec05 .post-img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    

    #index .sec05 .right-row {
        flex-direction: column;
    }

    #index .sec05 .item-2-3-col,
    #index .sec05 .item-4-5-col {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    #index .sec05 .post-item {
        margin-bottom: 20px;
    }

    #index .sec05 .left-col .post-item {
        height: 300px;
    }

    #index .sec06 {
        padding: 20px 0px;
        background-color: #F0F0F0;
    }

    #index .sec06 .title {
        padding: 10px 20px;
        margin-bottom: 20px;
    }

    #index .sec06 .culture-items {
        flex-direction: column;
        margin-left: 0;
        margin-right: 0;
    }

    #index .sec06 .item {
        display: flex;
        width: 100%;
        margin: 15px 0;
    }

    #index .sec06 .img-container {
        width: 30%;
        height: 150px;
        overflow: hidden;
        position: relative;
        margin-bottom: 0px;
    }

    #index .sec06 .culture-img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }

    #index .sec06 .text-wrap {
        width: 70%;
        padding-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #index .sec06 .sub-title {
        margin-top: 0px;
    }
    #index .sec07 {
        padding-bottom: 50px;
    }

    #index .sec07 .title {
        padding: 10px 20px;
        margin-bottom: 0px;
    }

    #index .sec07 .event-items {
        margin-left: -10px;
        margin-right: -10px;
    }

    #index .sec07 .event-items .item {
        margin: 10px;
        width: calc(20% - 20px);
    }

    #index .sec07 .event-title {
        top: 7px;
        left: 20px;
    }




    /* ✅ sub-page.html */
    #sub-page .sec02 {
        margin-top: 20px;
    }

    #sub-page .sec02 .info {
        gap: 5px;
        margin-bottom: 24px;
        flex-direction: column;
        align-items: flex-start;
    }

    #sub-page .sec02 .separator {
        display: none;
    }

    #sub-page .sec02 .category {
        font-size: 24px;
    }

    #sub-page .sec02 .author {
        font-size: 24px;
    }

    #sub-page .sec02 .title {
        font-size: 39px;
        line-height: 54px;
        margin-bottom: 5px;
    }

    #sub-page .sec02 .mob-br {
        display: block;
    }

    #sub-page .sec02 .message {
        font-weight: 400;
        font-size: 22.5px;
        line-height: 29px;
        padding-bottom: 25px;
        border-bottom: 1px solid #AAAAAA;
        margin-bottom: 50px;
    }

    #sub-page .sec02 .summary {
        font-size: 25.5px;
        line-height: 43.5px;
        margin-bottom: 50px;
    }

    #sub-page .sec02 .subtitle {
        font-size: 33px;
        line-height: 48px;
        margin-bottom: 15px;
    }

    #sub-page .sec02 .paragraph {
        font-size: 24px;
        line-height: 42px;
        margin-bottom: 40px;
        margin-top: 20px;
    }

    #sub-page .sec02 .img-container {
        height: 330px;
        margin-bottom: 40px;
    }
    #sub-page .sec02 .article-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        padding: 50px 0;
    }

    #sub-page .sec03 {
        padding-bottom: 20px;
    }

    #sub-page .sec03.padding-80 {
        /* padding: 60px 20px 75px !important; */
        padding: 0px 20px 20px !important;
        
    }

    .pagination {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .pagination .nav-item {
        flex: none;
    }
    .pagination .prev .nav-button{
        padding: 0 10px 0 0 
    }

    .pagination .next .nav-button{
        padding: 0 0 0 10px 
    }
    .pagination .nav-label {
        font-size: 22px;
        font-weight: 400;
        margin-bottom: 5px;
    }

    .pagination .nav-title {
        font-size: 22px;
        line-height: 33px;
        margin-bottom: 3px;
    }

    .pagination .nav-description {
        font-size: 22px;
        line-height: 33px;
    }
    




    


    /* ✅ event-page.html */
    #event-page.content {
        padding-top: 65px;
    }
    #event-page .sec01 {
        padding-top: 100px !important;
    }
    #event-page .sec02 {
        height: 350px;
    }
    #event-page .sec02 .event-title {
        font-size: 32px;
        line-height: 40px;
    }
    #event-page .sec02 .text-content {
        top: 70%;

    }
    #event-page .sec02-1 .comment {
        width: 80%;
        text-align: left;
    }
    #event-page .sec02-1 .gone {
        display: none;
    }

    #event-page .sec02 .cloud-img {
        transform: scale(0.6);
        margin-top: -146px;
    }
    #index .sec02 .keyword-cloud * {
        transform: scale(1.2);
        transform-origin: center;
    }
    

    #event-page .sec02 .seagull-1{
        max-width: 130px;
        top: 7%;
        left: 60%;
    }

    #event-page .sec02 .seagull-2 {
        display: none;
    }
    #event-page .sec03 .steps-container {
        display: grid; 
        grid-template-columns: repeat(2, 1fr); 
        gap: 30px;
    }

    #event-page .sec02 .mob-br {
        display: block !important;
    }

    #event-page .sec03 {
        padding-top: 0px;
        margin-top: 30px;
    }

    #event-page .sec03 .step {
        width: 150px;
        height: 150px;
        padding-top: 10px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: start;
        text-align: center;
        border: 2px solid #000000;
    }

    #event-page .sec03 .step-description {
        margin-top: 10px;
        font-size: 19px;
        line-height: 32px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 50px;
    }

    #event-page .sec03 .info-zone {
        width: 90%;
    }

    #event-page .sec03 .info-label {
        width: 30%;
        font-size: 22.5px;
        line-height: 35px;
        margin-right: 0%;
        padding: 3px;
    }

    #event-page .sec03 .info-value {
        font-size: 22.5px;
        font-weight: 400;
        line-height: 35px;
        padding: 3px;
        width: 80%;
    }
    #event-page .sec04 .mob-br {
        display: block !important;
    }

    #event-page .sec05 {
        padding-bottom: 0px;
        margin-top: 150px;
    }
    
    #event-page .sec05 .notice1{
        /* width: 90%; */
        font-size: 22px;
    }

    #event-page .sec05 .notice2{
        /* width: 90%; */
        border-top: 1px solid #000;
    }

    #event-page .sec05 .notice2 {
        margin-top: 30px;
        font-weight: 400;
        letter-spacing: -5%;
    }
    #event-page .sec06 {
        padding-top: 0px;
    }

    #event-page .sec06 .padding-80 {
        padding: 0 20px;
    }


    #event-page .event-modal .modal-content { 
        max-width: 80%;
    }
    
    #event-page .event-result .gift-img {
        width: 70%; 
    }

    #event-page .event-result .gift-card {
        margin: 10px 0px;
    }


    #event-page .eventModal .form-title,
    #event-page .infoModal .form-title{
        font-size: 35px;
    }
    #event-page .unluckyModal .form-description{
        font-size: 25px;
    }
    
}


@media (max-width: 480px) {
    #event-page .sec05 {
        padding: 0 20px;
        margin-top: -120px;
    }
    #event-page .sec01.padding-230{ 
        padding: 10px 0;
    }

    #event-page .sec03.padding-230{ 
        padding: 10px 0;
    }
    #index .sec01 .mob-br3{
        display: none;
    }
    #index .sec02 .keyword-item:nth-child(12) {
        left: 77%;
        top: 82%;
    }
    #index .sec03 .mob-br3{
        display: none;
    }
    #index .sec04 .swiper-frame {
        max-height: 150px;
    }

    #index .sec03 .carousel-img {
        height: 180px;
    }

    #index .sec05 .left-col .post-item {
        height: 180px;
    }

    #index .sec05 .post-img {
        height: 180px;
    }

    #index .sec05 .item-2 .img-container,
    #index .sec05 .item-3 .img-container,
    #index .sec05 .item-4 .img-container,
    #index .sec05 .item-5 .img-container {
        height: 180px;
    }

    #index .sec06 .img-container {
        height: 130px;
    }
    #index .sec06 .mob-br2 {
        display: none;
    }
    #event-page .sec01.padding-230{ 
        padding: 10px 0;
    }

    #event-page .sec03.padding-230{ 
        padding: 10px 0;
    }
    #event-page .sec02-1 .coupon-img {
        width: 80%;
    }
    #event-page .sec02-1 .comment {
        width: 90%;
    }
    #event-page .sec02 .draw {
        border-bottom: 1px solid #000000;
    }

    #event-page .sec03 .divider {
        border: 0.5px solid #000000;
    }
    #event-page .sec03 .info-label {
        width: 40%;
    }

    #event-page .sec04 {
        margin-top: 30px;
        padding-top: 0px;
        margin-bottom: 200px;
    }
    #event-page .parallax {
        height: 500px;
    }

    #event-page .parallax .editorial1 {
        top: 50px;
    }
    #event-page .parallax .editorial2 {
        top: 140px;
    }
    #event-page .parallax .editorial3 {
        top: 210px;
    }
    #event-page .parallax .editorial4 {
        top: 300px;
    }
    #event-page .parallax .editorial5 {
        top: 390px;
    }
    #event-page .parallax .editorial6 {
        top: 480px;
    }

    #event-page .parallax .gift:nth-of-type(1) {
        position: absolute;
        left: 8%;
        top: 12%;
        width: 100px;
        aspect-ratio: 1 / 1; 
    }

    #event-page .parallax .gift:nth-of-type(2) {
        position: absolute;
        left: 64%;
        top: 10%;
        width: 110px;
        aspect-ratio: 1 / 1; 
    }

    #event-page .parallax .gift:nth-of-type(3) {
        width: 100px;
        aspect-ratio: 1 / 1.7; 
        position: absolute;
        left: 38%;
        top: 18%;
    }

    #event-page .parallax .gift:nth-of-type(4) {
        width: 110px;
        aspect-ratio: 1 / 1.1; 
        position: absolute;
        left: 64%;
        top: 40%;
    }

    #event-page .parallax .gift:nth-of-type(5) {
        width: 100px;
        aspect-ratio: 1 / 1.7; 
        position: absolute;
        left: 10%;
        top: 40%;
    }

    #event-page .parallax .gift:nth-of-type(6) {
        width: 140px;
        aspect-ratio: 1 / 1.2; 
        position: absolute;
        left: 30%;
        top: 58%;
    }

    #event-page .parallax .gift:nth-of-type(7) {
        width: 120px;
        aspect-ratio: 1 / 1; 
        position: absolute;
        left: 10%;
        top: 80%;
    }

    #event-page .parallax .gift:nth-of-type(8) {
        width: 90px;
        aspect-ratio: 1 / 1.7; 
        position: absolute;
        left: 68%;
        top: 73%;
    }

    #event-page .event-modal .modal-content { 
        max-width: 90%;
    }
    

    #event-page .event-result {
        text-align: center;
        padding: 40px 10px 20px;
    }
    

    #event-page .event-result .result-message {
        font-size: 32px;
    }
    #event-page .event-result .sub-message{
        font-size: 18px;
    }
    
    
    #event-page .event-result .gift-img {
        width: 90%; 
        margin-bottom: 5px;
    }
    
    #event-page .event-result .gift-card {
        margin: 10px 0;
        padding: 10px 20px;
        border-radius: 5px;
        border: 1px solid #ccc; 
        font-weight: 400;
        font-size: 15px;
        
        
    }
    
    
    #event-page .event-result .instruction {
        font-size: 16px;
    }
    
    #event-page .event-result .notice {
        font-size: 16px;
        font-weight: 400;
    }
    
    #event-page .event-result .submit-button {
        font-size: 20px;
        font-weight: 400;
    }

    
    #event-page .registration-complete-modal .form-title{
        font-size: 30px;
    }

    #event-page .unlucky-modal .form-title{
        font-size: 30px;
    }
    #event-page .unlucky-modal .form-description{
        font-size: 23px;
    }

    #event-page .info-modal .form-description{
        font-size: 14px;
    }
    #event-page .registration-complete-modal .form-description1{
        font-size: 15px;
    }
    #event-page .registration-complete-modal .form-description2{
        font-size: 14px;
    }
    #event-page .registration-complete-modal .modal-content {
        padding: 30px 20px;
        width: 85%; 
    }
    #event-page .form-group .phone,
    #event-page .form-group .email,
    #event-page .form-group .name {
        width: 85px;
        margin-right: 5px;
        font-size: 16px;
    }

    #event-page .info-modal .modal-content {
        padding: 20px 10px;
    }

    #event-page .info-form {
        padding: 20px 10px;

    }

    #event-page .info-form .agreement-group {
        padding: 10px;
    }

    #event-page .info-form .agreement-title {
        font-size: 14px;
    }

    #event-page .info-form .agreement-subtitle {
        font-size: 14px;
    }
    #event-page .info-form .agreement-text {
        font-size: 14px;
    }
    #event-page .unlucky-modal .unlucky-img {
        width: 75%; 
    }


}