@media only screen and (max-width: 1440px){
    .modal-search .modal-xl {max-width: 95%;}
}
@media only screen and (max-width: 1360px){
	body *{
        --txt_size_ls : 40px;
        --txt_size_ms : 20px;
    }    
    .fix-search .ico{width: 60px;}
    .fix-search .ico >span{font-size: 32px;}
    .fix-search .brn-area > li > a,
    .fix-search .brn-area > li > button{padding-left: 22px; padding-right: 22px;}
}

@media only screen and (max-width: 1200px){
    body *{
        --txt_size_ls : 40px;
        --txt_size_mxl : 32px;
        --txt_size_ml : 28px;
        --txt_size_ms : 20px;
    }
    .section .con-title .t1{font-size: 50px;}
    .section .con-title .t2{font-size: 60px;}
    .main-menu {gap: 40px;}
    .main-visual .txt-box .t3{max-width: 600px;}
    /* .fix-search {
        display: grid;
        grid-template-columns: 60px auto;
        grid-template-rows: 1fr 1fr;
    }
    .fix-search .ico{grid-row: 1 / span 2;} */
    .fix-search .title{max-width: 175px; line-height: 1.25; font-size: 18px;}
    .fix-search .brn-area{flex-wrap: wrap;}
    .fix-search .brn-area{gap: 10px;}
    .fix-search .brn-area > li > a, .fix-search .brn-area > li > button{font-size: 16px;}

    #guide .con .title{max-width: 310px;}
    #guide .con .title h1{font-size: var(--txt_size_mxl);}
    #guide .con > div{flex-direction: column;}
    #guide .con .title{max-width: 100%; flex-direction: row;}
    #guide .con .title > div{position: relative; width: calc(50% - 20px);}
    #guide .con .title > div > img{
        position: absolute; left: 50%; width: 90%; transform: translateX(-50%);
    }
    #guide .con .card-box{
        justify-content: flex-start;
        grid-template-columns: repeat(2, minmax(auto, 1fr));
        grid-template-rows: repeat(2, minmax(auto, 300px));
        /* grid-template-rows: repeat(2, auto); */
    }
    #guide .con .card-box .card{max-width: 100%;}
    #guide .con .card-box .card::after{padding-bottom: 50%;}
    #guide .con .card-box .card-3{top:0; grid-row-start: 2;}
    #guide .con:nth-child(odd) .title{order: 0;}

    footer .brnad-logo{width: 100%; justify-content: flex-end; margin-top: -20px;}
}

@media only screen and (max-width: 980px){
    body *{
        --txt_size_ls : 40px;
        --txt_size_mxl : 32px;
        --txt_size_ml : 28px;
        --txt_size_ms : 20px;
        --txt_size_sl : 16px;        
    }
    .inner{width: 90% !important;}
    .main-menu{display: none;}
    nav.open .main-menu{display: flex;}
    nav.open .main-menu li > a{font-size: 150%;}
    .fix-search{height: 70px;}
    .fix-search.inner{width: 94% !important;}
    .fix-search .ico > img{width: 32px;}
    .fix-search .title{width: fit-content; font-size: 16px; max-width: 160px;}
    .fix-search .brn-area{flex: auto; gap: 7px; margin-right: 15px;}
    .fix-search .brn-area > li > a, 
    .fix-search .brn-area > li > button{font-size: 16px; padding-left: 15px;
        padding-right: 15px; border-radius: 10px;}
    
    .con-title{text-align: center;}
    #about .con-1{align-items: center; flex-direction: column;}
    #about .con-1 .txt-box{text-align: center; order: 1; }
    #about .con-1 .img-box{margin-top:30px; max-width: 250px; width: 90%;}
    #about .con-2{text-align: center;}
    #about .con-2 .ad-1{flex-direction: column;}
    #about .con-2 .ad-1 .img-box{margin-bottom: 30px;}
    #about .con-2 .ad-1 .txt-box{margin-left: 0;}
    #about .con-2 .ad-1 .txt-box ul li{text-align: left;}
    #about .con-3 > img{display: none;}
    #about .con-3 .ver_m{display: block;}

    #schedule .schedule-table dt{max-width: 200px;}
    #schedule .benefit{grid-template-columns: repeat(2, 1fr); gap: 30px;}
    #schedule .useful{grid-template-columns: repeat(1, 1fr);}

    footer > div{flex-direction: column;}
    footer .logo{max-width: 67px;}
    footer .copyright{text-align: center;}
    footer .brnad-logo{justify-content: center; margin-top: 0;}

    .modal-search .modal-body{padding: 30px;}
    
    /* 학원리스트 */
    .search-list dl{flex-wrap: wrap; gap: 5px;}
    .search-list dl.th{display: none;}
    .search-list dl dt.name{order: 1; width: 100%; flex: auto; margin-top: 10px; font-size: 120%;}
    .search-list dl dd.target, .search-list dl dd.subject{width: fit-content; min-width: fit-content;}
    .search-list dl dd.add{order: 2; width: 100%;         line-height: 1.1;}
    .search-list dl dd.tel{order: 3; width: 100%; text-align: left;}
    .search-list dl dt.name, .search-list dl dd.add, .search-list dl dd.tel{padding-left:5px;}

}
@media only screen and (max-width: 768px){
    body *{
        --txt_size_xxl: 100px;
        --padding-xl: 100px;
        --padding-l: 75px;
        --padding-m : 50px;
        --padding-s : 30px;
    }
    .fix-search .title{max-width: fit-content;}
    .fix-search .brn-area > li{display: none;}
    .fix-search .brn-area > li.ver_m{display: block;}
    /* .section .con-title .t2{font-size: 50px;} */
    #guide .con .card-box{
        justify-content: flex-start;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(3, minmax(auto, auto));        
    }
    .main-visual .txt-box .t3{width: 90%;}
    #guide .con .card-box .card::after{padding-bottom: 0;}
    #guide .con .card-box .card-3{grid-row-start: 3;}
    #guide .con .card-box ul{width: calc(100% - 50px);}
    #guide .con .card-box .card-no{font-size: 80px;} 
    #guide .con .title h1{text-align: left; padding: 0; background-color: transparent; color:#222;}
    #guide .con .title h1 b{display: block; font-size: 120%; letter-spacing: 1; font-weight: 800; margin-bottom: 10px;}
    #guide .con .title > div{width: auto; flex: 1;}
    #guide .con .title > div > img{width: auto; height: 200%; top: -50px; left: auto; right: 0; transform: translateX(0%);}

    /* #schedule .schedule-table dt{width: 150px;}
    #schedule .schedule-table dd{padding-left: 20px;} */

    #schedule .schedule-table dl{flex-direction: column;align-items: flex-start; padding: 20px; border-bottom: 1px solid #555;}
    #schedule .schedule-table dt{max-width: fit-content; background: none; min-height: auto; padding: 0; opacity: 0.5; font-size: 120%;}
    #schedule .schedule-table dd{padding: 0; min-height: auto; margin-top: 5px;}

    #schedule .benefit{grid-template-columns: repeat(2, 1fr);}
}

@media only screen and (max-width: 620px){
    .search-list-btns{gap: 10px;}
    .search-list-btns > li > a{padding:7px 15px; }
    .search-list-frame{width: calc(100% - 120px);}
}

@media only screen and (max-width: 550px){
    .modal-search .modal-body{padding: 15px;}
    .search-list-btns > li > a{font-size: 14px;}
    .search-list-frame{width: calc(100% - 90px);}
    .search-list .title .history{margin-top: 15px;}
    .fix-search .title{max-width: 160px;}
}