/* <---------모든 페이지 공통적용-------> */


.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: 38px;
    line-height: 50px;
    padding-bottom: 20px;
    border-bottom: 1px solid #AAAAAA;
    margin-bottom: 50px;
}
#sub-page .message2 {
    font-weight: 400;
    font-size: 17px;
    line-height: 100%;
    color: #717171;
    margin-bottom: 10px;
}



@media (max-width: 1520px) {
    .padding-80 { 
        padding: 0 80px;
    }
}
@media (max-width: 1280px) {
    .padding-230{
        padding: 0 100px !important;
    }
}

@media (max-width: 768px) {

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

    .padding-80 { 
        padding: 0;
    }

    .padding-230{
        padding: 0 50px !important;
    }
    #sub-page .message2 {
        font-weight: 400;
        font-size: 17px;
        line-height: 26px;
        margin-bottom: 10px;
    }
    #sub-page .title2 {
        font-weight: 500;
        font-size: 38px;
        line-height: 50px;
        padding-bottom: 25px;
        border-bottom: 1px solid #AAAAAA;
        margin-bottom: 50px;
    }

}

@media (max-width: 480px) {
    #sub-page .sec02 .article-header .change br.mob-br {
        display: block !important;
    }
    .padding-230{
        padding: 0 20px !important;
    }
    #sub-page .separator {
        display: none;
    }
    #sub-page .info {
        flex-direction: column;
        align-items: start !important;
        border-left: 1px solid #717171;
        padding-left: 10px;
        gap: 10px !important;
    }
}



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

.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%;
    height: 120px;
    border-bottom: 1px solid #AAAAAA;
    background-color: #FFFFFF;
    z-index: 100;
    isolation: isolate;
}

.header .nav {
    display: flex;
    justify-content: space-between;
    align-items: end;
    height: 100%;
}

.header .nav-left {
    display: flex;
    align-items: flex-end;
    margin: 50px 0 25px 50px;
}

.header .logo {
    width: 200px;
    height: 50px;
    object-fit: contain;
    margin-right: 70px;
}

.header .header-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header .menu-item {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500;
    margin-right: 50px;
    cursor: pointer;
    font-size: 17px;
    transition: color 0.3s;
    display: flex;
    align-items: flex-end;
    height: 25px;
    line-height: 100%;
}


.header .submenu-item {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 500;
    color: #4f4f4f;
    font-size: 15px;
    
    line-height: 100%;
    font-weight: 500;
    padding: 10px 0;
    border-bottom: 0.5px solid #E8E8E8;
    cursor: pointer;
    transition: color 0.3s;
}

.header .menu-item .submenu {
    position: absolute;
    display: none;
    top: 120px;
    width: 240px;
    background-color: #ffffff;
    padding: 25px;
    border: 1px solid #E8E8E8;
    z-index: 999;
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.2);
}
/* .header .dropdown:hover .submenu,
.header .dropdown:focus-within .submenu {
    display: block;
} */

/* 'active' 클래스가 있을 때 서브메뉴 보이기 (강제 적용) */
.header .menu-item.active .submenu {
    display: block;
}

.menu-item.active .submenu {
    display: block;
    opacity: 1;
}

.header .nav-right {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin: 50px 50px 25px 0;
} 

.header .prev-issues {
    font-size: 16px;
    border: 1px solid #000000;
    border-radius: 25px;
    padding: 3px 5px 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: 17px;
    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: 370px;
    transform: translateX(0);
    opacity: 1;
    right: -10px;
    padding: 10px;
}

.header .search-container.active .search-bar {
    right: 0;
}

.header .search-icon {
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 103;
    position: relative;
}

.header .search-input {
    width: 100%;
    height: 35px;
    border: none;
    outline: none;
    background-color: transparent;
    font-size: 16px;
    color: #333;
    font-family: inherit;
    padding: 0 50px 0 10px;
}


.header .search-input::placeholder {
    color: #888;
    opacity: 0.7;
}
.search-close-btn {
    font-size: 28px;
    width: 30px;
    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;
}


/* .header .volSelect {
    padding: 8px 12px !important;
    font-size: 16px;
    border: 2px solid #FF7BAC;
    border-radius: 6px;
    color: #FF7BAC;
    background-color: white;
    cursor: pointer;
} */
/* .header .volSelect:focus {
    outline: none;
    border-color: #FF7BAC;
} */

/* ✅ 모바일 메뉴 */
.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-overlay.active {
    opacity: 1;
    visibility: visible;
}
.mobile-menu-links {
    max-height: 430px;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; 
}

.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: 13px;
    line-height: 100%;
    margin-bottom: 35px;
}

.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: 10px 0;
    width: 100%;
    font-size: 16px;
    letter-spacing: 0%;
    line-height: 100%;
    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: 14px;
    font-weight: 400;
    padding-left: 16px;
    line-height: 100%;
    padding: 10px 20px;
    letter-spacing: -0.5px;
}

.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: 16px;
    border: 1px solid #000000;
    border-radius: 17px;
    padding: 4px 10px;
    cursor: pointer;
    background-color: #FFFFFF;
    white-space: nowrap;
    width: fit-content;
    margin: 20px 0 0 0 ;
    text-align: center;
    display: block; 
    text-align-last: center; 
}
.mobile-menu .prev-issues-wrap {
    width: 100%;
    display: flex;
    justify-content: flex-end; 
}



/* ✅ 컨텐츠 */
.content {
    padding-top: 170px;
}



/* ✅ 모바일 하단바 */
.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;
    line-height: 100%;
}

.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;
}

.floating-buttons .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: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;
    line-height: 100%;
}

.floating-buttons .share-button-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.floating-buttons .share-button {
    opacity: 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: 1280px) {

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

    .header .menu-item {
        margin-right: 30px;
    }

    .header .prev-issues {
        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) {

    /* ✅ 해더 */
    .header {
        height: 65px;
    }

    .header .nav-left {
        margin: 20px 0 15px 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .header .nav-right {
        display: flex;
        align-items: end;
        justify-content: center;
        margin: 20px 20px 15px 0;
        gap: 10px;
    }

    .header .logo {
        width: 100px;
        height: 25px;
    }
    .header .search-input {
        font-size: 14px;
    }
    .header .search-bar.active {
        width: 180px;
        height: 40px;
        right: -5px;
        top: 6px;
    }

    .header .search-bar {
        height: 40px;
        top: 5px;
    }

    .header .search-icon {
        width: 25px;
        height: 25px;
        vertical-align: middle;
        top: 12px;
    }
    .header .search-close-btn {
        font-size: 20px;
        width: 20px;
        line-height: 25px;
        text-align: center;
        background: transparent;
        border: none;
        cursor: pointer;
        margin-left: auto; 
        padding: 0;
    }

    .header .dropdown {
        display: none;
    }

    .header .m-menu {
        width: 30px;
        height: 30px;
        vertical-align: middle;
    }

    .header .menu-toggle {
        display: block;
    }

    .header .search-input {
        padding: 2px;
    }

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

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

    /* ✅ 하단바 */
    .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;
}
#index .sec01 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sec01-header {
    margin-bottom: 50px;
    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: 30px;
    height: 30px;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    z-index: 5;
}

.check-label {
    font-size: 17px;
    line-height: 100%;
    
    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: 17px;
    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: 45px;
    font-weight: 500;
    line-height: 60px;
    
}

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

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

#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: 16px 24px;
    font-weight: 500;
    line-height: 100%;
    font-size: 20px;
    border-radius: 8px;
    transition: scale 0.3s ease-in-out;
}


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

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

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

#index .sec02 .keyword-cloud {
    position: relative;
    height: 500px;
    max-width: 800px;
    margin: 0 auto;
}

#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.03);
}

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

#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: 38%;
    top: 15%;
}

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

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

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

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

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

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

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

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

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

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

#index .sec03 {
    width: 100%;
}

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

#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;
}

#index .sec03 .carousel-img:hover {
    filter: opacity(0.8);
}

#index .sec03 .carousel-img {
    width: 300px;
    height: 430px;
    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%;
}

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

#index .sec03 .small-text {
    font-size: 15px;
    
    line-height: 100%;
    font-weight: 400;
    color: #000000;
    padding: 10px 0;
}

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

#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;

}

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

#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-br2 {
    display: none;
}
#index .sec05 .title {
    padding: 10px 0;
    width: 100%;
    font-size: 21px;
    border-bottom: 1px solid #AAAAAA;
    margin-bottom: 40px;
}

#index .sec05 .grid {
    display: flex;
    height: 920px;
    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;
    z-index: 1;
}

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

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

#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: 60%;
    overflow: hidden;
}

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

#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: 15px;
    
    line-height: 100%;
    margin-bottom: 15px;
    margin-top: 20px;
}

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

#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 36%;
}

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

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

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


#index .sec06 .title {
    padding: 10px 0;
    width: 100%;
    font-size: 21px;
    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: 15px;
    line-height: 100%;
    font-weight: 400;
    color: #000000;
    margin: 5px 0;
}

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

#index .sec07 .title {
    padding: 10px 0;
    width: 100%;
    font-size: 21px;
    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: 18px;
    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: 300px;
    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 {
    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: 18px;
    font-weight: 500;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    z-index: 5;
    line-height: 27px;
}

#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.sec03 .title {
    font-size: 32px !important;
    margin-bottom: 20px;
}
#search .search-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    margin-left: -20px; 
}
#search .search-container .search-item {
    /* margin-right: 0px; */
    transition: transform 0.3s ease-in-out; /* 위로 올라가는 애니 */
}
#search .search-container .search-item:hover {
    transform: translateY(-5px); /* 위로 올라가는 애니 */
}
#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%;
}
#search.sec03 .carousel-track {
    display: flex;
    flex-wrap: wrap; /* 줄바꿈 허용 */
    transition: opacity 0.3s ease-in-out;
}
#search.sec03 .carousel-track > * {
    flex: 0 0 calc(25% - 20px); /* 한 줄에 4개, 여백 고려 */
    margin: 0 0 20px 20px; /* 아이템 간 간격 */
    box-sizing: border-box;
    
}
/* 검색결과 없는 버전 */
#search.sec03 .searchNone .searchNone-title {
    border-bottom: none;
    color: #404040;
}


/* @media screen and (max-width: 1284px) {
    #search .search-container {
        justify-content: space-between;
        gap: 10px;
    }
} */
@media screen and (max-width: 1024px) {
    #search .carousel-track > .search-item {
        flex: 0 0 calc(33.333% - 20px); /* 3개 */
    }
    #search .search-container {
        margin-right: -20px;
    }
}
@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: 100%; /* 화면 너비의 1/4 */
        aspect-ratio: 2 / 1; /* 1:1 비율 유지 */
    }
    #search .search-container {
        gap: 36px !important;
    }
    #search .carousel-track > * {
        flex: 0 0 100%; /* 1개 */
    }
    #search .search-container .search-item {
        margin: 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: 17px;
    line-height: 100%;
}

#sub-page .sec02 .author {
    font-weight: 400;
    font-size: 17px;
    line-height: 100%;
}

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

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

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

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

#sub-page .sec02 .paragraph {
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    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{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#sub-page .sec03 {
    padding-top: 80px;
    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: 25px 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: 15px;
    font-weight: 400;
    line-height: 100%;
    margin-bottom: 5px;
    color: #FFFFFF;
    z-index: 5;
    position: relative;
}
.nav-title {
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 5px;
    color: #FFFFFF;
    z-index: 5;
    position: relative;
}
.nav-description {
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
    color: #FFFFFF;
    z-index: 5;
    position: relative;
}
.pagination .nav-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 30px;
    z-index: 5;
}
.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: start;
    gap: 40px;
}
#sub01-1 .wrap01 .gray-mobile {
    display: none;
}
#sub01-1 .wrap01 .text-section{
    flex: 6.5;
}
#sub01-1 .wrap01 .title-01-1 {
    font-size: 60px;
    font-weight: bold;
    color: #6A6A6A;
    margin-bottom: 10px;
    white-space: nowrap;
}

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

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

#sub01-1 .wrap01 .image-section {
    flex: 3.5;
}
#sub01-1 .wrap01 .image-section {
    max-width: 300px;
}
#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: 30px;
}
#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: 21px;
    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: 15px;
}

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

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

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

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

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

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

#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: 24px;
}

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

#sub01-1 .wrap02 .chatbox.host .text {
    font-size: 18px;
    line-height: 32px;
    color: #222222;
    letter-spacing: -0.5px;
}
#sub01-1 .wrap02 .chatbox.reporter .text {
    font-size: 18px;
    line-height: 32px;
    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: 24px;
    height: 24px;
    display: block;
}
#sub01-1 .wrap03 .title-wrap  {
    display: flex;
    align-items: center;
    gap: 10px;
}

#sub01-1 .wrap03 .reform-title  {
    font-size: 22px;
    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: 153px;
    width: 153px;
    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: 15px 20px 15px 80px;
    width: 100%;
    margin-left: -50px;
    z-index: 1;
}

#sub01-1 .wrap03 .reform-subtitle {
    font-size: 18px;
    margin: 0 0 5px;
    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: 15px;
    color: #333;
    margin-left: 5px;
}
#sub01-1 .wrap03 .reform-p {
    font-size: 18px;
    font-weight: 400;
}



@media (max-width: 1280px) {
    #sub01-1 .wrap01 {
        align-items: center;
    }
    #sub01-1 .wrap01 .title-01-1 {
        margin-bottom: 0px;
        letter-spacing: -0.5px;
    }
    #sub01-1 .wrap01 .text-section{
        flex: 6;
    }
    #sub01-1 .wrap01 .image-section {
        flex: 4;
    }
    #sub01-1 .wrap02 .tabs {
        padding-bottom: 20px;
    }
    #sub01-1 .wrap02 .tabs .tab {
        padding: 10px 25px;
    }
    #sub01-1 .wrap02 .left.mobile .left-title {
        font-size: 24px;
        line-height: 34px;
        font-weight: 700;
        color: #444444;
    }
    #sub01-1 .wrap02 .left.mobile .left-subtitle {
        font-size: 19px;
        color: #444444;
        margin-top: 10px;
        line-height: 30px;
    }
    #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: 20px;
        gap: 10px;
    }
    #sub01-1 .wrap03 .reform-title  {
        font-size: 20px;
        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: 60px;
        height: 60px;
    }
    #sub01-1 .wrap03 .reform-content {
        flex: 1;  
        padding: 0px;
        width: 100%;
        margin-left: 0px;
        z-index: 1;
    }
    #sub01-1 .wrap03 .reform-subtitle {
        font-size: 16px;
    }
    #sub01-1 .wrap03 .reform-p {
        font-size: 16px;
    }
    #sub01-1 .wrap03 {
        margin-bottom: 60px;
    }
}
@media (max-width: 767px) {
    #sub01-1 .wrap01 {
        flex-direction: column;
        gap: 60px;
    }
    #sub01-1 .wrap01 .text-section {
        width: 100%;
    }
    #sub01-1 .wrap01 .title-01-1 {
        font-size: 44px;
        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 .sub01-1-img01 {
        min-width: 0px;
    }
    #sub01-1 .wrap01 .detail-01-1.mobile {
        display: block;
        margin-bottom: 50px;
    }
    #sub01-1 .wrap01 .image-section {
        max-width: 400px;
    }
    #sub01-1 .wrap02{
        margin-top: 0px;
    }
    #sub01-1 .wrap02 .tabs .circle {
        margin-right: 0px;
        font-size: 10px;
    }
    #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: 14px;
        gap: 10px;
    }
}

/* 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: start;
    gap: 40px;
}
#sub01-2 .wrap01 .gray-mobile {
    display: none;
}
#sub01-2 .wrap01 .text-section{
    flex: 6.5;
}
#sub01-2 .wrap01 .title-01-2 {
    font-size: 60px;
    font-weight: bold;
    color: #6A6A6A;
    margin-bottom: 10px;
    white-space: nowrap;
}

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

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

#sub01-2 .wrap01 .image-section {
    flex: 3.5;
}
#sub01-2 .wrap01 .image-section {
    max-width: 300px;
}
#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;
}
/* 탭 공통 */
#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: 120px;
    z-index: 2;
    background: #fff;
}

#sub01-2 .wrap02 .tabs .tab {
    padding: 16px 30px;
    cursor: pointer;
    background-color: #F2F2F2;
    border-radius: 4px;
    color: #6A6A6A;
    font-size: 21px;
    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: 15px;
}

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

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

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

#sub01-2 .wrap02 .left.pc .left-subtitle {
    font-size: 22px;
    color: #444444;
    margin-top: 20px;
    line-height: 30px;
}
#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: 24px;
}

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

#sub01-2 .wrap02 .chatbox.host .text {
    font-size: 18px;
    line-height: 32px;
    color: #222222;
    letter-spacing: -0.5px;
}
#sub01-2 .wrap02 .chatbox.reporter .text {
    font-size: 18px;
    line-height: 32px;
    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: 24px;
}
#sub01-2 .wrap02 .chatboxx .chatbox-img {
    width: 96px;
    height: 96px;
}
#sub01-2 .chatboxx.reporter.re-1 .text {
    font-size: 18px;
    line-height: 32px;
    color: #E05D5D;
    padding: 20px;
    background-color: #F2F2F2;
    border-radius: 20px 0px 20px 20px;
    letter-spacing: -0.5px;
    /* margin-bottom: 16px; */
}
#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: 120px;
}
#sub01-2 .right .graph-title {
    font-size: 18px;
    line-height: 32px;
    font-weight: 600;
}
#sub01-2 .right .graph-text {
    font-size: 18px;
    line-height: 32px;
    margin-top: 16px;
}
#sub01-2 .right .graph-text2 {
    font-size: 15px;
    line-height: 32px;
    margin-bottom: 8px;
    text-align: right;
}
#sub01-2 .right .graph-text3 {
    font-size: 15px;
    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: 120px;
}
#sub01-2 .right .sub01-2_tablebox .graph-title{
    font-size: 18px;
    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,
#sub01-2 .right .table_col3 .col3_sub_category,
#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: 18px;
    line-height: 26px;
    font-weight: 600;
    flex: 35%;
    border-right: 1px solid #222;
}    
#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: 17px;
    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%;
}
#sub-page .sec02 .text-different {
    width: 100%;
}
#sub01-2 img.mob_block {
    display: none;
}


@media (max-width: 1280px) {
    #tabs .tabs  {
        padding: 20px 0 !important; /* 탭 */
    }
    #sub01-2 .wrap01 {
        align-items: center;
    }
    #sub01-2 .wrap01 .title-01-2 {
        margin-bottom: 0px;
        letter-spacing: -0.5px;
    }
    #sub01-2 .wrap01 .text-section{
        flex: 6;
    }
    #sub01-2 .wrap01 .image-section {
        flex: 4;
    }
    #sub01-2 .wrap02 .tabs {
        padding-bottom: 20px;
    }
    #sub01-2 .wrap02 .tabs .tab {
        padding: 10px 25px;
    }
    #sub01-2 .wrap02 .left.mobile .left-title {
        font-size: 24px;
        line-height: 34px;
        font-weight: 700;
        color: #444444;
    }
    #sub01-2 .wrap02 .left.mobile .left-subtitle {
        font-size: 19px;
        color: #444444;
        margin-top: 10px;
        line-height: 30px;
    }
    #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: 768px) {
    #tabs .tabs {
        top: 65px; /* 탭 */
    }
}
@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 .col1_category1, #sub01-2 .col1_category2, #sub01-2 .col1_category3,
    #sub01-2 .right .table_col2 .col2_sub_category, #sub01-2 .right .table_col3 .col3_sub_category, #sub01-2 .right .table_col4 .col4_sub_category, #sub01-2 .right .table_col5 .col5_sub_category, #sub01-2 .right .table_col6 .col6_sub_category
     ,#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
     ,#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
     {
        font-size: 14px;
    } */
 
    #sub01-2 .wrap01 {
        flex-direction: column;
        gap: 60px;
    }
    #sub01-2 .wrap01 .text-section {
        width: 100%;
    }
    #sub01-2 .wrap01 .title-01-2 {
        font-size: 44px;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #717171;
        padding-bottom: 40px;
        line-height: 20px;
    }
    #sub01-2 .wrap01 .detail-01-2.pc{
        display: none;
    }
    #sub01-2 .wrap01 .image-section .sub01-2-img01 {
        min-width: 0px;
    }
    #sub01-2 .wrap01 .detail-01-2.mobile {
        display: block;
        margin-bottom: 50px;
    }
    #sub01-2 .wrap01 .image-section {
        max-width: 400px;
    }
    #sub01-2 .wrap02{
        margin-top: 0px;
    }
    #sub01-2 .wrap02 .tabs .circle {
        margin-right: 0px;
        font-size: 10px;
    }
    #sub01-2 .wrap02 .chatbox.host {
        flex-direction: column;       
        align-items: flex-start;
        align-items: center;
    }
    #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,
    #sub01-4 .wrap02 .tabs .tab {
        padding: 10px 14px !important;
        font-size: 14px !important;
        gap: 10px !important;
    }
}
/* 여기까지 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: start;
    gap: 40px;
}
#sub01-3 .wrap01 .gray-mobile {
    display: none;
}
#sub01-3 .wrap01 .text-section{
    flex: 6.5;
}
#sub01-3 .wrap01 .title-01-3 {
    font-size: 60px;
    font-weight: bold;
    color: #6A6A6A;
    margin-bottom: 10px;
    white-space: nowrap;
}

#sub01-3 .wrap01 .detail-01-3 {
    font-size: 18px;
    line-height: 32px;
    letter-spacing: -0.7px;
    margin-bottom: 20px;
    text-align: justify; 
}

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

#sub01-3 .wrap01 .image-section {
    flex: 3.5;
}
#sub01-3 .wrap01 .image-section {
    max-width: 300px;
}
#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: 21px;
    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: 15px;
}

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

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

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

#sub01-3 .wrap02 .left.pc .left-subtitle {
    font-size: 22px;
    color: #444444;
    margin-top: 20px;
    line-height: 30px;
}
#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: 28px;
    border-top: 1px solid #6A6A6A;
    border-bottom: 1px solid #6A6A6A;
    text-align: center;
}
#sub01-3 .wrap02 .sub01-3-sentence .mob-br-01-3 {
    display: none;
}
#sub01-3 .wrap02 .sub01-3-sentence .mob-br-01-3.zoom01-3 {
    display: none;
}
#sub01-3 .wrap02 .sub01-3-sentence .mob-br-01-3.zoom01-3-1 {
    display: none;
}

#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 .chatbox.reporter {
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    margin-bottom: 40px;
    gap: 24px;
}

#sub01-3 .wrap02 .chatbox .chatbox-img {
    width: 96px;
    height: 96px;
}

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

@media (max-width: 1280px) {
    #sub01-3 .wrap01 {
        align-items: center;
    }
    #sub01-3 .wrap01 .title-01-3 {
        margin-bottom: 0px;
        letter-spacing: -0.5px;
    }
    #sub01-3 .wrap01 .text-section{
        flex: 6;
    }
    #sub01-3 .wrap01 .image-section {
        flex: 4;
    }
    #sub01-3 .wrap02 .tabs {
        padding-bottom: 20px;
    }
    #sub01-3 .wrap02 .tabs .tab {
        padding: 10px 25px;
    }
    #sub01-3 .wrap02 .left.mobile .left-title {
        font-size: 24px;
        line-height: 34px;
        font-weight: 700;
        color: #444444;
    }
    #sub01-3 .wrap02 .left.mobile .left-subtitle {
        font-size: 19px;
        color: #444444;
        margin-top: 10px;
        line-height: 30px;
    }
    #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 .wrap01 {
        flex-direction: column;
        gap: 60px;
    }
    #sub01-3 .wrap01 .text-section {
        width: 100%;
    }
    #sub01-3 .wrap01 .title-01-3 {
        font-size: 44px;
        width: 100%;
        text-align: center;
        border-bottom: 1px solid #717171;
        padding-bottom: 40px;
        line-height: 20px;
    }
    #sub01-3 .wrap01 .detail-01-3.pc{
        display: none;
    }
    #sub01-3 .wrap01 .image-section .sub01-3-img01 {
        min-width: 0px;
    }
    #sub01-3 .wrap01 .detail-01-3.mobile {
        display: block;
        margin-bottom: 50px;
    }
    #sub01-3 .wrap01 .image-section {
        max-width: 400px;
    }
    #sub01-3 .wrap02{
        margin-top: 0px;
    }
    #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: block;
    }
    #sub01-3 .wrap02 .tabs .circle {
        margin-right: 0px;
        font-size: 10px;
    }
    #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 .chatbox .mob-br-01-3 {
    display: block;
    }
}

@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: 14px;
        gap: 10px;
    }
    #sub01-3 .wrap02 .sub01-3-sentence .mob-br-01-3 {
    display: block;
    }
}
/* 여기까지 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: start;
    gap: 40px;
}
#sub01-4 .wrap01 .gray-mobile {
    display: none;
}
#sub01-4 .wrap01 .text-section{
    flex: 6.5;
}
#sub01-4 .wrap01 .title-01-4 {
    font-size: 60px;
    font-weight: bold;
    color: #6A6A6A;
    margin-bottom: 10px;
    white-space: nowrap;
}

#sub01-4 .wrap01 .detail-01-4 {
    font-size: 18px;
    line-height: 32px;
    letter-spacing: -0.7px;
    margin-bottom: 20px;
    text-align: justify; 
}

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

#sub01-4 .wrap01 .image-section {
    flex: 3.5;
}
#sub01-4 .wrap01 .image-section {
    max-width: 300px;
}
#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: 21px;
    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: 15px;
}
#sub01-4 .wrap02 .sub01-4_title1 {
    background-color: #e6e6e6;
    text-align: center;
    font-size: 30px;
    line-height: 44px;
    color: #444;
    font-weight: 600;
    margin-top: 64px;
    margin-bottom: 40px;
    padding: 16px 0;
}
#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: 1280px) {
    #sub01-4 .wrap01 {
        align-items: center;
    }
    #sub01-4 .wrap01 .title-01-4 {
        margin-bottom: 0px;
        letter-spacing: -0.5px;
    }
    #sub01-4 .wrap01 .text-section{
        flex: 6;
    }
    #sub01-4 .wrap01 .image-section {
        flex: 4;
    }
    #sub01-4 .wrap02 .tabs {
        padding-bottom: 20px;
    }
    #sub01-4 .wrap02 .tabs .tab {
        padding: 10px 25px;
    }
    #sub01-4 .wrap02 .left.mobile .left-title {
        font-size: 24px;
        line-height: 34px;
        font-weight: 700;
        color: #444444;
    }
    #sub01-4 .wrap02 .left.mobile .left-subtitle {
        font-size: 19px;
        color: #444444;
        margin-top: 10px;
        line-height: 30px;
    }
    #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 .wrap02 .sub01-4_title1 {
    margin-top: 0;
    }
    #sub01-4 .wrap02 .sub1-4_container_4 {
    margin-bottom: 0;
    }
}

@media (max-width: 767px) {
    #sub01-4 .wrap01 {
        flex-direction: column;
        gap: 60px;
    }
    #sub01-4 .wrap02 .mob-br-01-4 {
    display: block;
    }
    #sub01-4 .wrap01 .text-section {
        width: 100%;
    }
    #sub01-4 .wrap01 .title-01-4 {
        font-size: 44px;
        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: 400px;
    }
    #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 */












/* sub-02page.html */
.sub02 .nav-item.prev {
    background-image: url(../img/sub02/prev-img.jpg);
}
.sub02 .nav-item.next {
    background-image: url(../img/sub02/next-img.jpg);
}
#sub02 .bgBox, #sub02 .icon-b, #sub02 .icon-p {
    font-size: 17px;
}
#sub02 .big-559 { color: #fff; }
#sub02 .desc { font-size: 15px; }

#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: 15px;
}
#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: 5px;
    margin-bottom: 32px;
}
#sub02 .title-img {
    transform: scale(0.8);
    transform-origin: left center;
}
#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 .iconTitle-wrapper .icon-b,
#sub02 .table-container .iconTitle-wrapper .icon-b span  {
    color: #FF8EA8;
    font-size: 30px;
    font-weight: 500;
}
#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;
}

@media (max-width: 958px) {
    #sub02 .big-559 {
        display: block;
    }
}
@media (max-width: 768px) {
    #sub02 .col-flex {
        flex-direction: column;
    }
    #sub02 .m-none { display: none;}
    #sub02 .table-title {
        flex-direction: column;
        align-items: center;
        padding-bottom: 0;
        gap: 0;
    }
    #sub02 .title-img {
        transform: scale(0.7);
        transform-origin: initial;
    }
    #sub02 .gray-box, #sub03 .gray-box {
        margin-bottom: 40px;
    }
    /* 표 본문 */
    #sub02 .w-none {
        /* display: block; */
    }
    #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;
    }
    #sub02 .table-container .table-td-container {
        width: 100%;
        margin-top: 15px;
    }
    #sub02 .big-559 {
        display: inline;
    }
    #sub02 .table-container .td {
        margin: 0;
    }
}
@media (max-width: 480px) {
    #sub02 .sm-br { display: block;}
    #sub02 .big-559 {
        display: block;
    }
}

/* sub-03page.html */
.sub03 .nav-item.prev {
    background-image: url(../img/sub03/prev-img.jpg);
}
.sub03 .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;
}
@media (max-width: 480px) {
    #sub03 .m-br480 {
        display: block;
    }
}


/* 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 .big-br , .sub04-n .big-br {
    display: none;
}
#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.7) translateX(-18%); }
.sub04-n.subTitle { font-size: 20px; }

.sub04-n .listStyle1, .sub04-n .table-text, .sub04-n .f-17 { 
    font-size: 17px; 
}
.sub04-n .subTitle {
    font-size: 20px; 
}
#sub04-3 .pink-flex {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#sub04-3 .ul-info {
    text-align: left;
    margin-top: 10px;
}
.sub04-n .bgTitle {
    transform: scale(0.8);
    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: 18px;
    display: block;
}

/* sub04 피라미드 */
.sub04-n .pyramid .fare-table-wrapper {
    display: flex;
    align-items: start;
}
.sub04-n .pyramidTxt-wrap {
    width: 73%;
    transform: translateX(-29px);
}
.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 .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 .pyramid .flow-text {
        display: block;
        position: relative;
        top: -159px;
        left: 50%;
        transform: translateX(-50%);
    }
    .sub04-n .flow1, .sub04-n .flow2 {
        display: flex;
        justify-content: center;
    }
    .sub04-n .pyramid .flow2 {
        color: #fff;
        margin-top: 47px;
    }
    .sub04-n .pyramidTxt-wrap {
        transform: translateX(0);
    }
    .sub04-n .pyramid .fare-table-wrapper {
        display: flex;
        align-items: end;
    }
}
@media (max-width: 958px) {
    .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%;
    }
    .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: 16px;
    }
    .sub04-n .number {
        transform: scale(0.5) translateX(-50%);
    }
    .sub04-n .subTitle {
        transform: translateX(-20px);
    }
    .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 .nav-item.prev {
    background-image: url(../img/sub06/prev-img.jpg);
}
.sub06 .nav-item.next {
    background-image: url(../img/sub06/next-img.jpg);
}
#sub06 .f-30 {
    font-weight: 100 !important;
    font-size: 30px !important;
    line-height: 42px !important;
}
#sub06 .m-br480 { display: none; }
#sub06 .img-boxy {
    width: auto;
    height: auto;
    margin-bottom: 70px;
    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-boxy2 {
    width: auto;
    height: auto;
    margin-bottom: 36px;
    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 .img45_width {
    width: 100%;
}
@media (max-width: 768px) {
    #sub06 .img-container45 {
        display: block;
        width: 100%;
        margin-bottom: 30px;
    }
    #sub06 .element45-01 {
        margin-bottom: 20px;
    }
    #sub06 .element45-01 {
        margin-bottom: 28px;
    }
    #sub06 .img-boxy2 {
        margin-bottom: 28px;
    }
    #sub06 .flex-2 .f-30 {
        font-size: 24px !important;
        line-height: 33px !important;
    }
}

@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 .img-container45 {
        display: block;
        width: 100%;
        margin-bottom: 30px;
    }
    #sub06 .element45-01 {
        margin-bottom: 20px;
    }
}

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

}/* 여기까지 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: 85px;
    width: 100%;
}
#sub07.sec02 .info-item .info-n {
    margin-bottom: 5px;
}
#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: 10px;
}
/* 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 .bus-img {
    padding: 100px 0 50px;
    margin: 0 auto;
}
#sub07-1 .imgBg-title {
    max-width: 550px;
    padding: 100px 0 50px;
    margin: 0 auto;
}
#sub07-1 .imgBg-containe {
    max-width: 500px;
}
#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: 18px; 
    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 .fare-table-wrapper {
    text-align: center;
    margin-bottom: 20px; 
}
#sub07-1 .infoB-text {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 17px;
    color: #EF89A1;
}
#sub07-1 .fare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 17px;
    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) {
    #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: 15px;
    }
    #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 .mob07-br {
        display: block;
    }
    #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: 610px;
}

#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: none;
} 
@media (max-width: 1280px) {
    .sub08 .mob-br2{
        display: block;
    }
}
@media (max-width: 767px) {
    .sub08  {
        margin-top: 60px;
    }
    .sub08 .mob-br2{
        display: block;
    }
    #sub08 .article-wrap { 
        flex-direction: column;
        gap: 20px;
    }
    #sub08 .article-wrap .wrap-img {
        width: 100%;
    }
}
@media (max-width: 480px) {
    #sub08 .mob-br, #sub08 .mob-br3 {
        display: block !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 .paragraph.sub09-con1 {
    margin-bottom: 50px;
    margin-top: 0;
    }
#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 .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: 114px;
    margin: 0 auto;
}
#sub09.sec02 .title_pink .whitetext,
#sub09.sec02 .title_orange .whitetext {
    color: #fff;
    line-height: 1.5;
    font-size: 26px;
    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: 34px;
    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;
    max-width: 500px;
    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;
    /* line-height: 60px; */
    font-size: 20px;
    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 .content_orange .paragraph.con-1 {
    margin-bottom: 0;
}
#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: 26px;
    text-align: center;
    margin-top: 20px;
}
#sub09.sec02 .title_yellow .bold_text-b {
    font-weight: 700;
    line-height: 1.5;
    font-size: 34px;
    color: #222;
}
#sub09.sec02 .title_yellow .article-img-absol-4 {
    position: absolute;
    max-width: 116px;
    top:12%;
    left: 15%;
}
#sub09.sec02 .title_yellow .article-img-absol-5 {
    position: absolute;
    max-width: 60px;
    top:16%;
    right: 31%;
}
#sub09.sec02 .title_yellow .article-img-absol-6 {
    position: absolute;
    max-width: 186px;
    top:32%;
    right: 11%;
}
#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:21%;
    left: 18%;
}
#sub09.sec02 .title_orange .article-img-absol-8 {
    position: absolute;
    max-width: 55px;
    top:23%;
    right: 32%;
}
#sub09.sec02 .title_orange .article-img-absol-9 {
    position: absolute;
    max-width: 124px;
    top:36%;
    right: 18%;
}
#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;
    max-width: 500px;
    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 .content_pink .mob-br577,
#sub09.sec02 .content_yellow .mob-br577,
#sub09.sec02 .content_orange .mob-br577 {
    display: none;
}
#sub09.sec02 .card3_orange {
    margin-bottom: 50px;
}
#sub09.sec02 .info.sub09-zoom {
    margin-bottom: 32px;
}
@media (min-width: 1281px) {
    #sub09.sec02 .content_orange .pc_only-br {
        display: block;
    }
}
@media (max-width: 1280px) {
    #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: 17%;
    }
    #sub09.sec02 .title_pink .article-img-absol-2 {
        position: absolute;
        max-width: 45px;
        top:26%;
        left: 22%;
    }
    #sub09.sec02 .title_pink .article-img-absol-3 {
        top:20%;
        right: 8%;
    }
    #sub09.sec02 .title_yellow .article-img-absol-4 {
        position: absolute;
        max-width: 102px;
        top:22%;
        left: 10%;
    }
    #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:38%;
        right: 9%;
    }
    #sub09.sec02 .title_orange .article-img-absol-7 {
        position: absolute;
        max-width: 99px;
        top:27%;
        left: 13%;
    }
    #sub09.sec02 .title_orange .article-img-absol-8 {
        position: absolute;
        max-width: 55px;
        top:23%;
        right: 28%;
    }
    #sub09.sec02 .title_orange .article-img-absol-9 {
        position: absolute;
        max-width: 124px;
        top:36%;
        right: 10%;
    }
    #sub09.sec02 .card3_orange .content_orange .por-stategy-all {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    #sub09.sec02 .summary.sub09 {
        margin-bottom: 56px;
    }
    #sub09.sec02 {
        padding-top: 0;
    }
    #sub09.sec02 .paragraph.sub09-con1 {
        margin-bottom: 56px;
        }
    #sub09.sec02 .article-header .title2 {
        font-size: 26px;
        line-height: 36px;
    }
    #sub09.sec02 .img-container-sub09 .article-img {
        margin-bottom: 56px;
        width: 100%;
        max-width: none;
    }
    #sub09.sec02 .title-sub09 {
        font-size: 26px;
        line-height: 36px;
    }
    #sub09.sec02 .title_pink .article-img-absol-1 {
        top:36%;
        left: 21%;
    }
    #sub09.sec02 .title_pink .article-img-absol-2 {
        position: absolute;
        max-width: 45px;
        top:26%;
        left: 73%;
    }
    #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: 68%;
    }
    #sub09.sec02 .title_yellow .article-img-absol-6 {
        top:10%;
        right: 14%;
    }
    #sub09.sec02 .title_orange .article-img-absol-7 {
        display: none;
    }
    #sub09.sec02 .title_orange .article-img-absol-8 {
        top: 18%;
        right: 66%;
    }
    #sub09.sec02 .title_orange .article-img-absol-9 {
        top: 8%;
        right: 16%;
    }
    #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;
        margin-bottom: 3px;
    }
    #sub09.sec02 .content_orange .por-stategy-all .article-img-strategy {
        margin: 0 auto;
        margin-bottom: 8px;
    }
    #sub09.sec02 .card3_orange {
        margin-bottom: 60px;
    }
    #sub09.sec02 .content_pink .paragraph.con,
    #sub09.sec02 .content_yellow .paragraph.con,
    #sub09.sec02 .content_orange .paragraph.con {
    margin-top: 36px;
    }
    #sub09.sec02 .card1_pink,
    #sub09.sec02 .card2_yellow,
    #sub09.sec02 .card3_orange {
        margin-bottom: 32px;
    }
}

@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_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%;
    }
}

@media (max-width: 480px) {
    #sub09.sec02 .all_sub_title_yellow {
        width: 100%;
    }
    #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 .card1_pink .title_pink .sizebox3,
    #sub09.sec02 .card2_yellow .title_yellow .sizebox3,
    #sub09.sec02 .card3_orange .title_orange .sizebox3 {
        width: 9%;
    }
    #sub09.sec02 .card1_pink .title_pink .sizebox1,
    #sub09.sec02 .card2_yellow .title_yellow .sizebox1,
    #sub09.sec02 .card3_orange .title_orange .sizebox1 {
        width: 18%;
    }
}


/* 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: 17px;
    line-height: 26px;
    color: #717171;
}
#sub10 .flex-article {
    padding-top: 24px;
    display: flex;
    justify-content: space-around;
}
#sub10 .articleType1 {
    border-top: 1px solid #000;
}
#sub10 .pb-70 { padding-bottom: 70px; }
#sub10 .pt-36 { padding-top: 36px; }
#sub10 .title-black {
    font-size: 26px;
    line-height: 36px;
    color: #444;
    font-weight: 500;
}
#sub10 .title-pink {
    font-size: 24px;
    line-height: 35px;
    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: 1280px) {
    #sub10 .mob-br {
        display: none !important;
    }
    #sub10 .title-pink .mob-br {
        display: block !important;
    }
}
@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;
    }
    #sub10 .img-container {
        /* margin-bottom: 50px; */
    }
    
}
@media (max-width: 480px) {
    #sub10 .smob-br, #sub10 .br {
        display: block;
    }
}

/* sub-11page.html */
#sub11P .nav-item.prev {
    background-image: url(../img/sub11/prev-img.jpg);
}
#sub11P .nav-item.next {
    background-image: url(../img/sub11/next-img.jpg);
}
#sub11.sec02 .img-container .article-img {
    height: auto;
 }
 #sub11.sec02 .paragraph-sub11 {
     font-weight: 400;
     font-size: 18px;
     line-height: 32px;
     
     margin-top: 30px;
     margin-bottom: 70px;
}
 
 #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: 532px;
     margin: 0 auto;
 }
 #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 .bold_text {
     font-weight: 700;
     line-height: 1.5;
 }
 
 #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;
     align-items: flex-start;
 }
 #sub11.sec02 .pink_container .content_flexx .pin_f3,
 #sub11.sec02 .pink_container .content_flexx .pin_f5 {
     border-bottom: 0.5px dashed #222222;
 }
 #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_f8,
 #sub11.sec02 .pink_container .content_flexx .pin_f10 {
     flex: 1;
     padding: 5px 0 5px 0px;
 }

 #sub11.sec02 .pink_container .content_flexx .pin_f11,
 #sub11.sec02 .pink_container .content_flexx .pin_f13{
    flex: 1;
    padding: 5px 0px 5px 0px;
    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;
 }
 
 
 
 @media (min-width: 1281px) {
     #sub11.sec02 .pink_container .pc_only-br {
         display: block;
     }
 }
 
 @media (max-width: 1280px) {
     #sub11.sec02 .pink_container .padding-topdown-only {
        padding: 100px 0;
     }
 }
 
 @media (max-width: 768px) {
     #sub11.sec02 .img-container.con12 {
         height: auto;
     }
     #sub11.sec02 .pink_container .content_flexx {
       display: block;
       gap: 0
     }
     #sub11.sec02 .paragraph.con13 {
        margin-bottom: 24px;

     }
     #sub11.sec02 .pink_container .pin_f1, .pin_f2 {
         margin-bottom: 20px;
       }
     #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 {
         padding: 0;
         flex-direction: column;
         gap: 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_f8,
     #sub11.sec02 .pink_container .content_flexx .pin_f10,
     #sub11.sec02 .pink_container .content_flexx .pin_f12,
     #sub11.sec02 .pink_container .content_flexx .pin_f14 {
         padding: 10px;
         padding-left: 0;
     }
     #sub11.sec02 .pink_container .content_flexx .pin_f7,
     #sub11.sec02 .pink_container .content_flexx .pin_f9,
     #sub11.sec02 .pink_container .content_flexx .pin_f11,
     #sub11.sec02 .pink_container .content_flexx .pin_f13 {
         border-right: none;
         padding: 10px;
         border-bottom : 0.5px dashed #222222;
         width: 100%;
         padding-left: 0;
     }
     #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 .pink_container .article-img {
        max-width: 250px;
        padding:  50px 0;
    }
        
    #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;
      }
 }






/* sub12.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: 80px;
}
#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 원하는 간격 */
}
/* .item끼리 동일한 높이 */
#sub12 .wrap02 .item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    padding: 15px 0;
    border-bottom: 1px dashed #222222;
}


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

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

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

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

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

#sub12 .wrap03 .cook {
    width: 100%;
    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: 100px !important;
        padding-bottom: 100px !important;
    }

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

    #sub12 .mob-br3 {
        display: none;
    }
    #sub12 .wrap03 .method {
        width: 150%;
    }
}

@media (max-width: 933px) {
    #sub12 .column:first-of-type .item:nth-of-type(5) {
        grid-row: 5;
        grid-column: 1;
        padding-top: 35px;
        padding-bottom: 34px;
    }
}
@media (max-width: 933px) {
    #sub12 .column:last-of-type .item:nth-of-type(4) {
        grid-row: 4;
        grid-column: 2;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}
@media (max-width: 867px) {
    #sub12 .column:first-of-type .item:nth-of-type(4) {
        grid-row: 4;
        grid-column: 2;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}
@media (max-width: 848px) {
    #sub12 .column:first-of-type .item:nth-of-type(2) { /* Refers to the first item after the title */
        grid-row: 2;
        grid-column: 1;
        padding-top: 34px;
        padding-bottom: 34px;
    }
    #sub12 .column:first-of-type .item:nth-of-type(5) {
        grid-row: 5;
        grid-column: 1;
        padding-top: 28px;
        padding-bottom: 28px;
    }
}
@media (max-width: 805px) {
    #sub12 .column:first-of-type .item:nth-of-type(3) {
        grid-row: 3;
        grid-column: 1;
        padding-top: 29px;
        padding-bottom: 29px;
    }
    #sub12 .column:first-of-type .item:nth-of-type(5) {
        grid-row: 5;
        grid-column: 1;
        padding-top: 42px;
        padding-bottom: 42px;
    }
}


@media (max-width: 767px) {
    #sub12 .info-card {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
        display: flex;
        flex-direction: column;
        gap: 40px !important;
    }
    #sub12 .item {
        padding: 15px 0 !important;
    }
    #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;
    }
}




/* 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.sec02 .message, #sub11.sec02 .message {
    padding-bottom: 0px;
}
#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: 161.33%; /* 이미지의 원본 비율에 따른 높이 설정 */
    background-image: url("../img/sub13/article03_pc.jpg");
    background-size: contain; 
    background-position: center;
    background-repeat: no-repeat; 
}
#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, 60%, 960px);
}
#sub13 .bg-container .title {
    width: clamp(220.41px,20vw,378.97px);
}
#sub13 .rule-wraper {
    width: clamp(320px, 60%, 960px);
    /* 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: 15px;
        gap: 8px;
    }
    #sub13 .rule-wraper {
        margin-top: 20px;
    }
    #sub13 .rule-wraper .rule-icon {
        max-width: clamp(50px, 4vw, 55px);
    }
    #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;
    }
    #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 */
#sub14 .big-br {
    display: none;
}
.full-bleed {
    width: 100vw;
    /* 뷰포트 전체 너비 */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    /* 좌우로 밀어서 화면 끝까지 확장 */
    margin-right: -50vw;
    background-color: #FCE7E9;
}
#sub14P {
    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 .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: 19px;
    color: #333;
}

#sub14 .section-icon {
    width: 23px;
    height: 23px;
    margin-right: 10px;
}

#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: 1rem;
    font-weight: 600;
    line-height: 1.2;
    color: #222;
}

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

#sub14 .desc-mob {
    display: none;
}

/* “요즘 뜨는 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: 8px;
    font-size: 17px;
    line-height: 10px;
}

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

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

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

#sub14 .step-list li img {
    width: 48px;
    height: 15px;
    margin-right: 8px;
    margin-top: 5px;
}

#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;
}
@media (max-width: 768px) {
    #sub14 .last-contents .activity-text {
        margin-top: 0;
    }
}
@media (max-width: 480px) {
    #sub14 .last-titleImg {
        display: none;
    }
    #sub14 .last-titleImg-mob {
        max-width: 121px;
        display: block;
    }
}
/* 여기까지 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-page.content {
    padding-top: 120px;
}

#event-page .sec01 {
    padding-top: 50px;
    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: 500px;
}

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

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

#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: 90%;
}
#event-page .sec02-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #FFFFFF;
}

#event-page .sec02 .draw {
    font-size: 17px;
    line-height: 100%;
    height: 25px;
    border-bottom: 2px solid #000000;
    font-weight: 700;
    /* width: 140px; */
}

#event-page .sec02 .event-title {
    font-size: 48px;
    line-height: 66px;
    font-weight: 700;
    margin-top: 50px;
}
#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-1 .comment {
    font-size: 20px;
    line-height: 34px;
    font-weight: 400;
    margin-top: 20px;
    text-align: center;
}

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

#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 20px;
    background-color: black;
    border-radius: 999px;
    font-size: 17px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 30px;
    color: #FFFFFF;
    font-weight: 500;
    font-size: 17px;
    line-height: 100%;
}

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

#event-page .sec03 .step {
    width: 135px;
    height: 135px;
    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: 30px;
    font-weight: 500;
}

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

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

#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: 20px;
    font-weight: 700;
    line-height: 100%;
    
    padding: 8px 0;
    width: 15%;
}

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

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

#event-page .sec03 .subscribe-button {
    margin-top: 30px;
    padding: 8px 48px;
    background-color: #0086DD;
    color: #FFFFFF;
    border-radius: 999px;
    cursor: pointer;
    font-size: 27px;
    
    line-height: 100%;
    font-weight: 700;
}

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

#event-page .sec04 .comment {
    font-size: 17px;
    font-weight: 700;
    line-height: 100%;
    
    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, 20px);
}
.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%);
    }
}
/* 
svg {
    pointer-events: none;
} */

/* 선물 흔들림 애니메이션 */
@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: 10%;
    width: 180px;
    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: 43%;
    top: 10%;
    width: 200px;
    aspect-ratio: 1 / 1; 
    animation-name: float1;
    animation-delay: 0.6s;
    animation-duration: 1s;
}

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

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

#event-page .parallax .gift:nth-of-type(5) {
    width: 170px;
    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: 250px;
    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: 200px;
    aspect-ratio: 1 / 1; 
    position: absolute;
    left: 12%;
    top: 72%;
    animation-name: float2;
    animation-delay: 0.4s;
    animation-duration: 1.9s;
}

#event-page .parallax .gift:nth-of-type(8) {
    width: 160px;
    aspect-ratio: 1 / 1.7; 
    position: absolute;
    left: 43%;
    top: 55%;
    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;
}
#event-page .sec05 .notice1 {
    padding: 25px;
    max-width: 600px;
    background-color: #FFFFFF;
    font-weight: 700;
    font-size: 15px;
    line-height: 22px;
    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: 15px;
    line-height: 21.8px;
    text-align: left;
    max-width: 686px;
    width: 100%;
}
#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;
    line-height: 100%;
    
    margin-bottom: 10px;
    color: #0086DD;
}
#event-page .event-result .sub-message{
    font-weight: 400;
    font-size: 24px;
    line-height: 100%;
    
    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;
    line-height: 100%;
}
#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;
}
#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: 10px;
    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;
}



/* event-추가 스타일링 */
#sub-page .big-m-inline {
    display: block;
}
#event-page .sec03 .info-zone {
    margin: 50px 0;
    max-width: 686px; /* event-모든페이지 공통 */
}
#event-page .sec04 .max-w {
    max-width: 686px; /* event-모든페이지 공통 */
}
#event-page .sec05-btnBox {
    display: flex; /* event-모든페이지 공통 */
    justify-content: center;
    gap: 40px;
}
#event-page .borderButton {
    border: 2px solid #71C0E8; /* event-모든페이지 공통 */
    background: transparent;
    color: #71C0E8;
    padding: 5px 80px;
    font-size: 17px;
    font-weight: 600;
    border-radius: 999px;
    margin-top: 20px;
}
#event-page .btn-bg {
    background: #424242; /* event-모든페이지 공통 */
    color: #fff;
    padding: 6px 60px;
    font-size: 27px;
    border-radius: 999px;
}
/* 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 .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 .sec02 .bg-img {
    width: auto;  /* event-15,16,17,19 공통 */
    max-width: none;
}
#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.sub19 .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.sub19 .sec05 {
    margin-top: 0px; /* event-15,16,17,19 공통 */
    padding-top: 50px;
}



/* event-15page.html */
#event-page.sub15 .sec02-1,
#event-page.sub15 .sec03,
#event-page.sub15 .sec04,
#event-page.sub15 .sec05,
#event-page.sub15 .sec06 {
    background-color: #C7EAFD;
}
#event-page .sec02 .event-title {

}
#event-page.sub15 .sec02 .star {
    position: absolute;
    top: 9%;
    left: 31%;
    max-width: 63px;
}
#event-page.sub15 .sec02 .line {
    max-width: 319px;
}
#event-page.sub15 .sec03 {
    margin-top: 0;
    padding: 0 20px;
}
#event-page.sub15 .sec04 .img-position {
    position: relative;
}
#event-page.sub15 .sec04 .img-position .quiz {
    position: absolute;
    top: 220px;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 213px;
}
#event-page.sub15 .sec04 .desc-dotted-container {
    position: absolute;
    top: 400px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    /* padding: 0 80px; */
}
#event-page.sub15 .sec04 .desc-dotted {
    /* display: block; */
    font-size: 21px;
    border-bottom: 2px dotted #CBD8DF;
    line-height: 38px;
}
#event-page.sub15 .sec04 .initial-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    position: absolute;
    bottom: 135px;
    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: 54.78px;
    height: 54.78px;
    background-color: #FFE196;
    padding: 10px;
    border-radius: 8px;
}
#event-page.sub15 .sec04 .initial-container .f-42 {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 42.67px;
    line-height: 0.8;
}
#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: 768px) {
    #event-page.sub15 .sec04 .initial-container .initialItem {
        width: 38.63px;
        height: 38.63px;
        padding: 6px;
    }
    #event-page.sub15 .sec04 .initial-container .f-42 {
        font-size: 30.08px;
        line-height: 0.8;
    }
    #event-page .sec03 .info-zone {
        margin: 30px 0;
        max-width: 480px;
    }
    #event-page .borderButton {
        font-size: 16px;
        padding: 3px 20px !important;
    }
    #event-page.sub15 .sec04 .desc-dotted {
        display: inline;
        font-size: 17px;
        line-height: 35px;
    }
    #event-page .sec04 .max-w {
        max-width: 320px;
    }
    #event-page.sub15 .mob-br {
        display: block !important;
    }
    #event-page.sub15 .sec04 .img-position .quiz {
        top: 140px;
        max-width: 180px;
    }
    #event-page.sub15 .sec04 .desc-dotted-container {
        top: 370px;
    }
    #event-page.sub15 .sec04 .initial-container {
        flex-direction: column;
        gap: 10px;
        bottom: 90px;
    }
    #event-page.sub15 .sec04 .btn-container {
        bottom: 30px;
    }
    #event-page.sub15 .sec05, #event-page.sub16 .sec05, #event-page.sub17 .sec05, #event-page.sub19 .sec05 {
        padding-top: 10px; /* event-15,16,17,19 공통 */
    }
    #event-page .btn-bg {
        padding: 6px 30px; /* event 공통 */
        font-size: 20px;
    }
    #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: 28.91px;
    }
    #event-page.sub15 .sec02 .line {
        max-width: 147px;
    }
    #event-page.sub15 .sec02 .event-title {
        margin-bottom: 10px;
    }
}/* 여기까지 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 {
    background-color: #ffffff;
}
#event-page.sub16 .sec02 .effect_line {
    position: absolute;
    top: 40%;
    right: 22%;
    max-width: 49px;
}
#event-page.sub16 .sec02-1 {
    background-color: #FFE2E2;
    margin-top: 0;
    padding-top: 0;
}
#event-page.sub16 .sec02-1 .sub16-article-02 {
    max-width: 310px;
}
#event-page.sub16 .sec02-1 .sub16-article-02 {
    max-width: 744px;
}

#event-page.sub16 .sec03 {
    background-color: #FFE2E2;
    margin: 0;
}
#event-page.sub16 .sec03 .coupon-img {
    max-width: 414px;
}
#event-page.sub16 .sec03 .borderButton {
    border: 2px solid #FF8EA8;
    background: transparent;
    color: #FF8EA8;
    padding: 5px 80px;
    font-size: 17px;
    font-weight: 600;
    border-radius: 999px;
    margin-top: 20px;
}
#event-page.sub16 .sec04 {
    background-color: #FFE2E2;
    padding-top: 0;
}
#event-page.sub16 .sec05-btnBox .invit.btn-bg{
    background-color: #FF8EA8;
}
#event-page.sub16 .sec05 {
    background-color: #FFE2E2;
}
#event-page.sub16 .sec05 .notice2 {
    margin-top: 0;
}
#event-page.sub16 .sec06 {
    background-color: #FFE2E2;
    padding-top: 90px;
}
    

@media (max-width: 1280px) {
    #event-page.sub16 .sec02 .effect_line {
        max-width: 38px;
        top: 34%;
        right: 33%;
    }
}
    
@media (max-width: 768px) {
    #event-page.sub16 .sec02 .effect_line {
        max-width: 28px;
        top: 12%;
        right: 32%;
    }
    #event-page.sub16 .sec02-1 .sub16-article-02 {
        max-width: 310px;
    }
    #event-page.sub16 .sec03 {
        padding-top: 30px;
        padding-bottom: 0;
    }
    #event-page.sub16 .sec03 .coupon-img {
        max-width: 276px;
    }
    #event-page.sub16 .sec06 {
        padding-top: 40px;
        padding-bottom: 20px;
    }
    #event-page.sub16 .sec06 .pagination {
        gap: 10px;
    }
}
    
@media (max-width: 480px) {
    #event-page.sub16 .sec02 .effect_line {
        right: 27%;
    }
}

/* 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 .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;
}
#event-page.sub17 .sec02 {
    height: 400px;
}
#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%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 83px;
}
#event-page.sub17 .sec04 .q-icon {
    position: absolute;
    top: 26%;
    left: 75%;
    max-width: 100px;
}
#event-page.sub17 .sec04 .q2 {
    left: 15%;
}
#event-page.sub17 .sec04 .dotted-container {
    position: absolute;
    top: 45%;
    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: 20px;
    line-height: 38px;
}
#event-page.sub17 .m-block {
    display: none;
}
#event-page.sub17 .sec04 .ox-container {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    /* align-items: center; */
    gap:48px
}
#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: 768px) {
    #event-page.sub17 .m-block {
        display: block;
    }
    #event-page.sub17 .m-inline {
        display: none;
    }
    #event-page.sub17 .sec04 .quiz {
        top: 21%;
        max-width: 58px;
    }
    #event-page.sub17 .sec04 .dotted-container .desc-dotted {
        font-size: 17px;
        line-height: 35px;
    }
    #event-page.sub17 .sec04 .ox-container .oxItem {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        font-size: 50px;
        align-items: center;
    }
    #event-page.sub17 .sec04 .dotted-container {
        top: 37%;
    }
    #event-page.sub17 .sec04 .q-icon {
        top: 21%;
        left: 75%;
        max-width: 50px;
    }
}


/* 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);
}


/* event-19page.html */

.sub19 .nav-item.prev {
    background-image: url(../img/sub19/prev-img.jpg);
}
.sub19 .nav-item.next {
    background-image: url(../img/sub19/next-img.jpg);
}
#event-page.sub19 .sec01 {
    background-color: #ffffff;
}
#event-page.sub19 .sec02 .event-title {
    margin-bottom: 0;
}
#event-page.sub19 .sec02 {
    background-color: #ffffff;
}
#event-page.sub19 .sec02-1 {
    background-color: #FBE5F9;
}

#event-page.sub19 .article16-02 {
    max-width: 646px;
}
#event-page.sub19 .sec03 {
    background-color: #FBE5F9;
    margin: 0;
}
#event-page.sub19 .sec03 .coupon-img {
    max-width: 276px;
}
#event-page.sub19 .sec03 .borderButton {
    border: 2px solid #FF8EA8;
    background: transparent;
    color: #FF8EA8;
    padding: 5px 80px;
    font-size: 17px;
    font-weight: 600;
    border-radius: 999px;
    margin-top: 20px;
}
#event-page.sub19 .sec04 {
    background-color: #FBE5F9;
    margin: 0;
    padding-top: 0;
}
#event-page.sub19 .sec05-btnBox .invit.btn-bg{
    background-color: #FF8EA8;
}
#event-page.sub19 .sec05 {
    background-color: #FBE5F9;
    margin-top: 0;
}
#event-page.sub19 .sec05 .notice2 {
    margin-top: 0;
}
#event-page.sub19 .sec06 {
    background-color: #FBE5F9;
}


@media (max-width: 768px) {
    #event-page.sub19 br.mob-br {
        display: block !important;
    }
    #event-page.sub19 .sec03 .coupon-img {
        max-width: 200px;
    }
    #event-page.sub19 .article16-02 {
        max-width: 320px;
    }
    #event-page.sub19 .sec02 {
        height: 330px !important;
    }
    #event-page.sub19 .sec03 {
        padding-top: 30px;
        padding-bottom: 0;
    }
    #event-page.sub19 .sec05 {
        padding-top: 10px;
    }
    #event-page .sec06 {
        padding-top: 40px;
        padding-bottom: 20px;
    }
    #event-page.sub19 .sec06 .pagination {
        gap: 10px;
    }
}




@media (max-width: 1500px) {

    #index .sec05 .item-2 {
        flex: 0 0 40%;
    }
    #index .sec05 .item-4 {
        flex: 0 0 70%;
    }
    
}


@media (max-width: 1280px) {

    /* ✅ index.html */
    #index .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;
        line-height: 100%;
    }

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

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

    #index .sec02 .keyword.medium {
        width: 110px;
        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: 38%;
        top: 20%;
    }

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

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

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

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

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

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

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

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

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

    #index .sec02 .keyword-item:nth-child(11) {
        left: 58%;
        top: 73%;
    }
    #index .sec02 .keyword-item:nth-child(12) {
        left: 83%;
        top: 67%;
    }
    
    #index .sec05 .mob-br2 {
        display: block;
    }
    #index .sec06 .mob-br {
        display: none;
    }
    #index .sec06 .mob-br2 {
        display: none;
    }
    #index .sec07 .event-items {
        margin-left: -5px;
        margin-right: -5px;
    }

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

    #index .sec07 .event-title {
        position: absolute;
        top: 7px;
        left: 10px;
        font-size: 16px;
    }


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

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

    .pagination .pagination {
        gap: 20px;
    }



    /* ✅ event-page.html */
    #event-page .sec02 {
        height: 350px !important;
    }
    #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: 26px;
        line-height: 36px;
        margin-top: 30px;
    }

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

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

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

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

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

    #event-page .parallax .gift:nth-of-type(1) {
        position: absolute;
        left: 12%;
        top: 14%;
        width: 180px;
        aspect-ratio: 1 / 1; 
    }
    
    #event-page .parallax .gift:nth-of-type(2) {
        position: absolute;
        left: 43%;
        top: 15%;
        width: 180px;
        aspect-ratio: 1 / 1; 
    }
    
    #event-page .parallax .gift:nth-of-type(3) {
        width: 160px;
        aspect-ratio: 1 / 1.7; 
        position: absolute;
        left: 75%;
        top: 20%;
    }
    
    #event-page .parallax .gift:nth-of-type(4) {
        width: 170px;
        aspect-ratio: 1 / 1.2; 
        position: absolute;
        left: 48%;
        top: 38%;
    }
    
    #event-page .parallax .gift:nth-of-type(5) {
        width: 160px;
        aspect-ratio: 1 / 1.7; 
        position: absolute;
        left: 20%;
        top: 40%;
    }
    
    #event-page .parallax .gift:nth-of-type(6) {
        width: 230px;
        aspect-ratio: 1 / 1; 
        position: absolute;
        left: 68%;
        top: 55%;
    }
    
    #event-page .parallax .gift:nth-of-type(7) {
        width: 200px;
        aspect-ratio: 1 / 1; 
        position: absolute;
        left: 12%;
        top: 72%;
    }
    
    #event-page .parallax .gift:nth-of-type(8) {
        width: 150px;
        aspect-ratio: 1 / 1.7; 
        position: absolute;
        left: 43%;
        top: 65%;
    }
    
}



@media (max-width: 900px) {
    #index .sec05 .item-2 {
        flex: 0 0 38%;
    }
    #index .sec05 .item-4 {
        flex: 0 0 68%;
    }
    #index .sec05 .mob-br{
        display: none;
    }
}


@media (max-width: 768px) {

    /* ✅ index.html */
    #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 .sec01 {
        padding: 0 20px;
    }
    #index .mob-br3 {
        display: block;
    }

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

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

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

    .check-label {
        font-size: 15px;
        font-weight: 600;
    }

    #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: 14px;
        padding: 6px 24px;
    }


    #index .sec02 {
        padding: 0 20px;
    }

    #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: 320px;
        height: 300px;
    }

    #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: 14px;
    }

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

    #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: 37%;
        top: 25%;
    }

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

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

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

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

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

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

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

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

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

    #index .sec02 .keyword-item:nth-child(11) {
        left: 63%;
        top: 70%;
    }
    #index .sec02 .keyword-item:nth-child(12) {
        left: 62%;
        top: 89%;
    }

    #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: 20px;
        transform: none !important;
        transition: none !important;
    }

    #index .sec03 .carousel-item {
        width: 100%;
        flex-shrink: 0;
        margin-bottom: 20px;
    }

    #index .sec03 .carousel-img {
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
        height: 250px;
    }
    #index .sec03 .carousel-img:nth-of-type(3),
    #index .sec03 .carousel-img:nth-of-type(5) {
        object-position: 0 20%;
    }

    #index .sec03 .small-text {
        padding: 10px 20px;
        font-size: 15px;
    }

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

    #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 .sec04-wrap {
        padding: 10px 60px 30px;

    }
    #index .sec05 .mob-br {
        display: block !important;
    }

    #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;
    }

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

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

    #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 .mob-br {
        display: block !important;
    }
    #index .sec06 .mob-br2 {
        display: block !important;
    }
    #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: 10px 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: 15px;
        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 {
        position: absolute;
        top: 17px;
        left: 20px;
        font-size: 18px;
    }

    #index .sec07 .event-carousel {
        display: block;
    }

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






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

    #sub-page .sec02 .info {
        gap: 5px;
        margin-bottom: 24px;
    }

    #sub-page .sec02 .separator {
        font-weight: 400;
    }

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

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

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

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

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

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

    #sub-page .sec02 .subtitle {
        font-size: 22px;
        line-height: 32px;
        margin-bottom: 15px;
        margin-top: 65px;
    }

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

    #sub-page .sec02 .img-container {
        height: 320px;
        margin-bottom: 40px;
    }

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


    .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: 14px;
        font-weight: 400;
        margin-bottom: 5px;
    }

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

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


    /* ✅ event-page.html */
    #event-page.content {
        padding-top: 65px;
    }
    #event-page .sec02 {
        height: 310px !important;
    }
    #event-page .sec02 .text-content {
        top: 75%;
    }
    #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: -140px;
    }
    #event-page .sec02 .bg-img {
        /* transform: scale(0.6);
        margin-top: -190px; */
    }
    #event-page .sec02 .seagull-1{
        transform: scale(0.6);
        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 .info-zone {
        width: 90%;
    }
    #event-page .sec03 .info-label {
        width: 50%;
        font-size: 17px;
        line-height: 25px;
        margin-right: 0%;
        padding: 3px;
        width: 30%;
    }
    #event-page .sec03 .info-value {
        font-size: 17px;
        font-weight: 400;
        line-height: 25px;
        padding: 3px;
        width: 80%;
    }
    #event-page .sec03 .subscribe-button {
        margin-top: 30px;
        padding: 13px 55px;
        background-color: #0086DD;
        color: #FFFFFF;
        border-radius: 999px;
        cursor: pointer;
        font-size: 18px;
        line-height: 100%;
        font-weight: 700;
    }



    @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%;
    }


    #event-page .sec05 {
        padding-bottom: 0px;
        margin-top: 150px;
    }
    #event-page .sec05 .notice1{
        width: 90%;
    }
    #event-page .sec05 .notice2{
        width: 90%;
        border-top: 1px solid #000;
    }

    #event-page .sec05 .notice1 {
        font-size: 14px;
    }
    #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) {
    
    #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: 80px;
    }
    #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 .sec04 {
        margin-top: 50px;
        padding-top: 0px;
        margin-bottom: 0px;
    }
    #event-page .sec05 {
        padding-bottom: 0px;
        margin-top: 20px;
    }
    #event-page .editorial{
        overflow: visible;
    }
    #event-page .sec04 .mob-br{
        display: block;
    }
    #event-page .sec04 .comment {
        line-height: 22px;
        font-weight: 700;
        font-size: 16px;
    }

    #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;
        line-height: 100%;
        
    }
    
    
    #event-page .event-result .instruction {
        font-size: 14px;
    }
    
    #event-page .event-result .notice {
        font-size: 12px;
        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 .registration-complete-modal .mob-br{
        display: block;
    }

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

    #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: 14px;
    }

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

    #event-page .info-form {
        padding: 20px 10px;
    }
    #event-page .info-form .mob-br {
        display: block;
    }

    #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%; 
    }


}