@media (max-width: 1350px) {

    section[class="content"] {
        padding-left: 20px;
        padding-right: 20px;
    }


    .program-content-img img {
        height: auto;
        aspect-ratio: 32 / 49;
    }

    .content-fourth-left-main-grid {
        width: calc((180px * 4) + (30px * 3));
        max-width: 100%;
        /* 2개의 이미지 + 간격 */
    }

    .book-content img {
        width: 180px;
        /* 270의 2/3 */
        height: 271px;
        /* 406의 2/3 */
        object-fit: cover;
        /* 이미지 비율 유지 */
    }

    .book-content-container {
        flex: 180px;
    }

    .book-content p {
        font-size: 16px;
        width: 180px;
    }

    .book-content-container {
        margin-right: 30px;
    }
}

@media (max-width: 1200px) {
    #banner {
        display: none;
    }

    .content-first-text-container {
        padding-top: 220px;
    }

    #container-third {
        height: fit-content;
    }

    .content-closed_info {
        padding-left: 20px;
        padding-right: 20px;
    }

    .content-second-grid {
        display: block;
    }

    #container-second {
        height: fit-content;
    }

    .content-second-flex-right-popup-top {
        width: 100%;
        max-width: 645px;
    }

    #popup-content {
        max-width: 645px;
        width: 100%;
        aspect-ratio: 1 / 1;
    }

    .content-second-flex-right {
        align-items: center;
    }

    .content-second-flex-left-notice {
        width: 100%;
        max-width: 645px;
        margin: 0 auto;
    }

    .content-second-flex-left-calendar {
        padding: 40px 0;
    }

    .program-content-text-top-type,
    .program-content-text-top-subject {
        font-size: 18px;
    }

    .content-fourth-left-main {
        max-width: calc((180px * 4) + (30px * 3));
        margin: 0 auto;
    }

    .content-fourth-flex-container {
        flex-direction: column;
    }

    .content-fourth-right {
        margin: 0 auto;
    }

    #container-fourth {
        height: fit-content;
    }

    #absolute-closed_info .content-closed_info {
        padding-top: 25px;
        padding-bottom: 25px;
    }
    .fixed-end{
        min-height: 94px;
    }
    #calendar-container{
        max-height: none;
    }
}

@media (max-width: 720px) {
    #content-second{
        overflow: hidden;
    }
    .content-fourth-left-top{
        padding-bottom: 15px;
    }
	
    .calendar-body {
        flex-direction: column;
    }

    .calendar-left {
        width: 100%;
        align-items: center;
        padding-top: 20px;
    }

    .calendar-legend{
        margin-top: 20px;
    }

    .calendar-title {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .calendar-title-name {
        width: 100%;
    }

    .calendar-month-number {
        font-size: 40px;
    }

    .search-container.expanded {
        width: 100%;
    }

    .content-first-text-container {
        width: 85%;
    }

    .content-fourth-left-main {
        max-width: calc((180px * 2) + (30px * 1));
        margin: 0 auto;
    }

    .content-fourth-top-left-title,
    .content-fourth-right-top-title {
        text-align: center;
        font-size: 26px;
    }

    .content-fourth-right-top-title {
        text-align: center;
    }

    .content-fourth-top-left-category .guide-menu> :not([hidden])~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(0.625rem* var(--tw-space-x-reverse));
        margin-left: calc(0.625rem* calc(1 - var(--tw-space-x-reverse)));
    }

    .content-fourth-top-left-category .guide-menu {
        font-size: 16px;
    }

    .content-closed_info {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .closed_info-month {
        font-size: 20px;
    }

    .closed_info-text {
        font-size: 16px;
    }

    .closed_info-right> :not([hidden])~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(1rem var(--tw-space-x-reverse));
        margin-left: calc(1rem* calc(1 - var(--tw-space-x-reverse)));
    }

    #fixed-closed_info {
        height: fit-content;
    }

    .content-third-top-left-title {
        font-size: 26px;
    }

    .content-first-text-container .first-text-name{
        font-size: 24px;
    }

    .content-first-text-container .first-text-subject{
        font-size: 28px;
    }

    .content-first-text-container .first-text-content{
        font-size: 20px;
    }

    .content-third-program-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:580px){
    .closed_info-right{
        flex-direction: column;
        align-items: flex-start;
    }
    .closed_info-right> :not([hidden])~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: 0;
        margin-left: 0;
    }
    .content-fourth-left-main-grid{
        max-width: calc((180px * 1));
    }
    .content-fourth-left-main{
        max-width: calc((180px * 1));
        margin: 0 auto;
    }
    .book-content-container{
        margin-right: 0;
    }
    .content-fourth-top-left{
        flex-direction: column;
        align-items: flex-start;
    }

    .content-fourth-top-left> :not([hidden])~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right:0;
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .search-container {
        padding: 10px 20px;
        min-width: 160px;
    }
	
	#page-first {
		/* background: url(../css/index/main_1.jpg) no-repeat;
		background-size: 100% 100%; */
		position: relative;
		height: calc(100vh + 80px);
	}
	
	.content-first-search-container {
		padding-top: 30px;
	}
	
	.moveButton {
		padding: 10px 20px;
		min-width: 160px;
	}
	
	.moveButton2 {
		padding: 10px 20px;
	}

    .search-label {
        font-size: 14px;
    }
	
	.moveButton {
		font-size: 14px;
	}
	
	.moveButton2 {
		font-size: 14px;
	}
	
	#fixed-closed_info{display: none !important;}

    #fixed-closed_info2 {
        width: 100%;
        position: absolute;
        left: 0;
        z-index: 100;
        margin-top: 20px;
        height: auto;
        max-height: 100px;
        display: block;
    }
	
	.closed_info-month{font-size: 18px;}
    .closed_info-text{font-size: 14px;}
	.content-first-text-container .first-text-content{line-height: 30px;}


    .content-third-top-left> :not([hidden])~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(0.5rem* var(--tw-space-x-reverse));
        margin-left: calc(0.5rem* calc(1 - var(--tw-space-x-reverse)));
    }
    .content-third-top-left-title{
        padding-bottom: 10px;
    }
    .content-third-top-left-category .program-menu{
        font-size: 13px;
    }

    #program-more{
        margin-top : 10px;
        font-size: 12px;
    }
    .content-third-top-left{
        flex-direction: column;
    }
    .content-third-top{
        flex-direction: column;
    }
}

@media (max-width: 360px) {
    .content-second-flex-left-notice-tab-left .notice-tab.on{
        font-size: 15px;
    }

    .content-second-flex-left-notice-tab-left .notice-tab {
        font-size: 13px;
    }

    .notice-content p {
        font-size: 14px;
    }
    .calendar-tab{
        font-size: 13px;
    }
    .legend{
        font-size: 12px;
    }
    .calendar-days{
        font-size: 12px;
    }
    .calendar-dates div{
        font-size: 13px;
    }
    .calendar-notice-content a{
        font-size: 12px;
    }
    .legend-link{
        font-size: 12px;
    }
    .closed_info-text{
        font-size: 13px;
    }
}
