/* ******************* *
* 체험클래스 예약
* ******************* */
#classRes {}
#classRes.bd-page {padding: 100px 0 200px;}
#classRes .cinner {max-width: 1400px;}
#classRes .page-tit {margin-bottom: 100px;}
#classRes .page-tit > .tit {color: var(--color-main);font-family: "SebangGothic";font-size: 3.0em;font-weight: 600;text-align: center;}
#classRes .adm-btns {display: flex;justify-content: flex-end;gap: 10px;margin-bottom: 10px;}
#classRes .adm-btns > a {display: block;padding: 5px 10px;background: #E04545;color: #fff;font-size: 14px;font-weight: 500;}
#classRes .list-wrap {}
#classRes .list-wrap:not(:last-child) {margin-bottom: 150px;}
#classRes .list-wrap > .title {margin-bottom: 50px;color: #3a2703;font-family: "SebangGothic";font-size: 2.0em;font-weight: 600;text-align: center;}
#classRes .list-wrap .gall-ul {display: flex;flex-wrap: wrap;gap: 50px 100px;}
#classRes .list-wrap .gall-ul > li {width: calc(50% - 50px);padding: 50px;border-radius: 25px;background: #fff;overflow: hidden;position: relative;}
#classRes .list-wrap .gall-ul > li.empty_list {width: 100%;padding: 50px 0 !important;}
#classRes .list-wrap .gall-ul > li .gall_chk {position: absolute;top: 10px;left: 10px;z-index: 10;}
#classRes .list-wrap .gall-ul > li > .img-cont {width: 100%;position: relative;}
#classRes .list-wrap .gall-ul > li > .img-cont::before {content: '';display: block;width: 0;padding-top: 57.80%;}
#classRes .list-wrap .gall-ul > li > .img-cont img {width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
#classRes .list-wrap .gall-ul > li > .img-cont .no_image {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #eaeaea;color: #666;font-size: 18px;font-weight: 500;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
#classRes .list-wrap .gall-ul > li > .tag {max-height: 30px;padding: 5px 12px;border-radius: 5px;box-sizing: border-box;background: var(--color1);color: #fff;font-size: 15px;font-weight: 600;position: absolute;top: 10px;right: 10px;}
#classRes .list-wrap .gall-ul > li > .info-cont {margin-top: 25px;padding: 0 5px;box-sizing: border-box;}
#classRes .list-wrap .gall-ul > li > .info-cont > .title {display: flex;align-items: baseline;gap: 10px;margin-bottom: 10px;}
#classRes .list-wrap .gall-ul > li > .info-cont > .title > .tit {color: #111;font-size: 1.30em;font-weight: 600;display: -ms-flexbox;display: -webkit-box;text-overflow: ellipsis;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 1;}
#classRes .list-wrap .gall-ul > li > .info-cont > .title > .loc {color: #606060;font-size: 18px;}
#classRes .list-wrap .gall-ul > li > .info-cont >.btn-link {display: flex;justify-content: center;align-items: center;gap: 8px;max-width: 160px;margin-left: auto;padding: 9px 0;box-sizing: border-box;border-radius: 5px;background: #03CF5D;color: #fff;font-size: 17px;font-weight: 600;}
#classRes .list-wrap .gall-ul > li > .info-cont >.btn-link::before {content: '';display: block;width: 14px;height: 14px;background: url(../img/sub/ico-naver.svg) center center / cover no-repeat;}
#classRes .list-wrap .gall-ul > li > .edit{font-size: 14px;font-weight: 500;color: #fff !important;background: #333;padding: 3px 6px;border-radius: 3px;cursor: pointer;position: absolute;top: 20px;right: 20px;z-index: 10;}

@media all and (max-width: 1399px){
    #classRes .list-wrap .gall-ul {gap: 50px;}
    #classRes .list-wrap .gall-ul > li {width: calc(50% - 25px);}
}
@media all and (max-width: 1199px){
    #classRes .list-wrap .gall-ul {gap: 50px 30px;}
    #classRes .list-wrap .gall-ul > li {width: calc(50% - 15px);padding: 30px 30px 40px;border-radius: 15px;}
}
@media all and (max-width: 1024px){
    #classRes .list-wrap .gall-ul {gap: 50px 20px;}
    #classRes .list-wrap .gall-ul > li {width: calc(50% - 10px);}
    #classRes .list-wrap .gall-ul > li > .info-cont {margin-top: 15px;}
    #classRes .list-wrap .gall-ul > li > .info-cont >.btn-link {max-width: 132px;font-size: 15px;}
}
@media all and (max-width: 768px){
    #classRes .list-wrap .gall-ul > li {padding: 25px 25px 35px;}
    #classRes .list-wrap .gall-ul > li > .info-cont > .title {gap: 5px;}
    #classRes .list-wrap .gall-ul > li > .info-cont > .title > .tit {font-size: 1.22em;}
}
@media all and (max-width: 640px){
    #classRes .list-wrap .gall-ul {max-width: 500px;margin: 0 auto;}
    #classRes .list-wrap .gall-ul > li {width: 100%;padding: 30px 30px 40px;}
}