@charset "utf-8";

.dtList {}
.h2 {margin-top: 30px;}

.ui-process1 .ui-process.type7 {margin:0 0 40px;}
.ui-process1 .ui-process.type7 > li {margin-bottom:0;}
.tab-ul.type3 {margin-top:10px;}
@media only screen and (max-width:1023px){
    .ui-process1 .ui-process.type7 > li:last-child {margin:0 0 0;}
}
.reservationWrap{overflow:hidden;margin-top:40px;padding-top: 10px;}
.reservationWrap .calendarArea{float:left;width:44%}
.reservationWrap .calendarArea .title{float:left;margin-top:0;font-size:22px;font-weight:bold;line-height:88%;font-family:'nsr';font-weight:800;color:#000;letter-spacing:-1px}
.reservationWrap .calendarArea .info{float:right;margin-bottom:15px}
.reservationWrap .calendarArea .info span{display:inline-block;padding:3px 6px;color:#111}
.reservationWrap .calendarArea .info .holiday{border:1px solid #ddd;background:#dbefff;}
.reservationWrap .calendarArea .info .not{border:1px solid #ddd;background:url(/images/lll/prog/bg_pattern2.png)}
.reservationWrap .calendarArea .info .ok{border:1px solid #ccc;background-color:#fcefdb;}
.reservationWrap .calendarArea .info .no{border:1px solid #afafaf;background-color:#ddd;}
.reservationWrap .calendarArea .info .select{border:1px solid #056cb9;background-color:#056cb9;color:#fff}
.reservationWrap .calendarArea .calendar{clear:both;width:100%;padding:40px 20px 35px;border:1px solid #ddd}
.reservationWrap .calendarArea .calendar .calHeader{position:relative;text-align:center}
.reservationWrap .calendarArea .calendar .calHeader .calDate{display:inline;font-size:36px;font-weight:bold;line-height:100%;color:#000;letter-spacing:-2px}
.reservationWrap .calendarArea .calendar .calHeader .calBtn{position:absolute;top:5px;line-height:30px;cursor:pointer}
.reservationWrap .calendarArea .calendar .calHeader .calBtn a{font-size:0;}
.reservationWrap .calendarArea .calendar .calHeader .prev{left:0;padding-left:40px}
.reservationWrap .calendarArea .calendar .calHeader .next{right:0;}
.reservationWrap .calendarArea .calendar .calHeader .prev:before{position:absolute;top:0;left:0;z-index:1;width:32px;height:32px;border-radius:50%;background-color:#424245;content:''}
.reservationWrap .calendarArea .calendar .calHeader .prev:after{position:absolute;top:7px;left:10px;z-index:2;width:9px;height:16px;background:url(/images/lll/prog/arrow_img.png) no-repeat -27px 0;content:''}
.reservationWrap .calendarArea .calendar .calHeader .next:before{position:absolute;top:0;right:0;z-index:1;width:32px;height:32px;border-radius:50%;background-color:#424245;content:''}
.reservationWrap .calendarArea .calendar .calHeader .next:after{position:absolute;top:7px;right:10px;z-index:2;width:9px;height:16px;background:url(/images/lll/prog/arrow_img.png) no-repeat -18px 0;content:''}
.reservationWrap .calendarArea .calendar .schcal_tbl{width:100%;margin-top:27px;border-top:1px solid #555}
.reservationWrap .calendarArea .calendar .schcal_tbl th{padding:12px 0;border-bottom:1px solid #aaa;font-weight:bold;text-align:center}
.reservationWrap .calendarArea .calendar .schcal_tbl td{border-left:1px solid #ccc;border-bottom:1px solid #ccc;font-weight:500;text-align:center;vertical-align:top}
.reservationWrap .calendarArea .calendar .schcal_tbl td:first-child{border-left:none}
.reservationWrap .calendarArea .calendar .schcal_tbl td div{height:69px;padding:2px 0;font-size: 15px;}
.reservationWrap .calendarArea .calendar .schcal_tbl td.ok{background:#fcefdb; content: "";}
.reservationWrap .calendarArea .calendar .schcal_tbl td.no{background:#ddd; content: "";}
.reservationWrap .calendarArea .calendar .schcal_tbl td.holiday{background:#dbefff; content: "";}
.reservationWrap .calendarArea .calendar .schcal_tbl td.not{background:url(/images/lll/prog/bg_pattern2.png); content: "";}
.reservationWrap .calendarArea .calendar .schcal_tbl td.ok button{content: "가능";}
.reservationWrap .calendarArea .calendar .schcal_tbl td.no div{content: "불가";}
.reservationWrap .calendarArea .calendar .schcal_tbl td.holiday div{content: "휴관";}
.reservationWrap .calendarArea .calendar .schcal_tbl td.not div{content: "예약";}
.reservationWrap .calendarArea .calendar .schcal_tbl td.holiday{font-size:12px}
.reservationWrap .calendarArea .calendar .schcal_tbl td a{display:block;width:100%;height:100%;vertical-align: top;line-height: 1;}
.reservationWrap .calendarArea .calendar .schcal_tbl td button {display:block;width:100%;height: 100%;position: relative;}
.reservationWrap .calendarArea .calendar .schcal_tbl td button span {display:block;position: absolute;top: 0;width: 100%;vertical-align:top;font-weight: 500;color: #494949; }
.reservationWrap .calendarArea .calendar .schcal_tbl td.selected button span{color:#fff;}
.reservationWrap .calendarArea .calendar .schcal_tbl td.sun,.reservationWrap .calendarArea .calendar .schcal_tbl td.sun a{color:#c30c57}
.reservationWrap .calendarArea .calendar .schcal_tbl td.sat,.reservationWrap .calendarArea .calendar .schcal_tbl td.sat a{color:#1473b5}
.reservationWrap .calendarArea .calendar .schcal_tbl td.off{background-color:#fafafa}
.reservationWrap .calendarArea .calendar .schcal_tbl td.selected{background-color:#056cb9;font-weight:bold; content: "선택";}
.reservationWrap .calendarArea .calendar .schcal_tbl td.selected a{color:#fff}
.reservationWrap .timeArea{float:right;width:50%}
.reservationWrap .timeArea strong{font-size:22px;font-family:'nsr';line-height:88%;font-weight:800;letter-spacing:-1px}
.reservationWrap .timeArea strong span{display:inline-block;margin-left:20px;font-size:14px;font-weight:normal;vertical-align:baseline}
.reservationWrap .timeArea .timeBtnGroup{width:100%;margin:22px 0 34px;border-collapse:collapse}
.reservationWrap .timeArea .timeBtnGroup:after{display:block;visibility:hidden;clear:both;content:''}
.reservationWrap .timeArea .timeBtnGroup li{display:table;float:left;width:25%;height:100%;margin-left:-1px;margin-top:-1px;vertical-align:middle}
.reservationWrap .timeArea .timeBtnGroup button{display:table-cell;position:relative;width:100%;padding: 35px 5px 20px;border:1px solid #ddd;font-size:15px;font-weight:600;background-color:transparent;}
.reservationWrap .timeArea .timeBtnGroup button span{display:block;margin-top:3px;text-align:center}
.reservationWrap .timeArea .timeBtnGroup button span:first-child{margin-top:0}
.reservationWrap .timeArea .timeBtnGroup button span.ampm1{color:#293855}
.reservationWrap .timeArea .timeBtnGroup button span.ampm2{color:#5e3a46}
.reservationWrap .timeArea .timeBtnGroup button:focus{padding:29px 0 20px;border:4px solid #424245}
.reservationWrap .timeArea .timeBtnGroup button .check{position:absolute;top:10px;left:50%;width:15px;height:12px;margin-left:-8px;background:url(/images/lll/prog/red_check.png) no-repeat}
.reservationWrap .timeArea .timeBtnGroup button.disable .check{display:none}
.reservationWrap .timeArea .timeBtnGroup button.disable:after{position:absolute;top:15px;left:50%;width:15px;height:12px;margin-left:-8px;background:url(/images/lll/prog/red_x.png) no-repeat;content:''}
.reservationWrap .timeArea .result{overflow:hidden;margin-top:12px;padding:23px 0;border:1px solid #ddd}
.reservationWrap .timeArea .result .date{float:left;width:50%;font-size:15px;font-weight:500;color:#635c56;text-align:center}
.reservationWrap .timeArea .result .date:before{display:inline-block;width:18px;height:18px;margin-right:10px;margin-top:-3px;background:url(/images/lll/common/icon_board.png) no-repeat 0 0;vertical-align:middle;content:''}
.reservationWrap .timeArea .result .time{float:left;width:50%;border-left:1px solid #ddd}
.reservationWrap .timeArea .result .time li{margin-top:5px;font-size:15px;font-weight:500;color:#635c56;text-align:center}
.reservationWrap .timeArea .result .time li:first-child{margin-top:0}
.reservationWrap .timeArea .result .time li:before{display:inline-block;width:18px;height:18px;margin-top:0;margin-right:5px;background:url(/images/lll/common/icon_board.png) no-repeat -21px -1px;vertical-align:middle;content:''}
.reservationWrap .timeArea .submitBtn{width:100%;height:68px;margin-top:32px;border:1px solid #1e2446;background-color:#1e2446;font-weight:bold;line-height:55px;font-size:18px;color:#fff;transition:all .2s}
.reservationWrap .timeArea .submitBtn:focus,.reservationWrap .timeArea .submitBtn:hover{background-color:#fafafa;color:#333}
.reservationWrap .timeArea .submitBtn .arrow{display:inline-block;position:relative;width:36px;height:36px;margin-left:15px;border:1px solid #424245;border-radius:50%;background-color:#fff;vertical-align:middle}
.reservationWrap .timeArea .submitBtn .arrow:before{position:absolute;top:9px;right:11px;width:9px;height:16px;background:url(/images/lll/prog/arrow_img.png) no-repeat -9px 0;content:''}
@media screen and (max-width:1199px){
    .reservationWrap .calendarArea .calendar{padding:40px 20px 35px}
}
@media screen and (max-width:799px){
    .reservationWrap .calendarArea{float:none;width:100%;margin-bottom:30px}
    .reservationWrap .timeArea{float:none;width:100%}
    .reservationWrap .timeArea .timeBtnGroup{margin-left:1px}
}
@media screen and (max-width:460px){
    .reservationWrap .timeArea strong span{margin-left:0;margin-top:4px}
}
.userGuideWrap{margin-top:50px;padding:40px 60px;border:1px solid #ccc}
.userGuideWrap .title{position:relative;padding-left: 30px;font-size:20px;font-weight:bold;color:#222}
.userGuideWrap .title:before{position: absolute;top: 7px;left: 8px;width: 18px;height: 18px;background: url(/images/lll/prog/tit.jpg) no-repeat;content: '';}
.userGuideWrap .title b{margin:0 15px;font-size:26px;color:#e43e3e}
.userGuideWrap .title b:first-child{margin-left:10px}
.userGuideWrap .title .exMark{display:inline-block;position:relative;width:24px;height:24px;margin-right:20px;border:1px solid #222;border-radius:50%;background-color:#e43e3e;font-size:18px;line-height:24px;text-align:center;vertical-align:middle;color:#fff}
.userGuideWrap .title .exMark:before{position:absolute;top:-5px;right:-5px;left:-5px;bottom:-5px;border:2px solid #222;border-radius:50%;content:''}
.userGuideWrap ul{overflow:hidden;margin-top:30px}
.userGuideWrap ul li{float:left;position:relative;width:50%;min-height:100px;padding:10px 10px 10px 92px}
.userGuideWrap ul li img{position:absolute;top:10px;left:10px}
.userGuideWrap ul li p{line-height:130%}
.btnArea{margin-top:20px;text-align:right}
@media screen and (max-width:799px){
    .userGuideWrap{padding:30px 20px}
    .userGuideWrap ul li{float:none;width:100%;min-height:90px}
}
@media screen and (max-width:460px){
    .reservationWrap .calendarArea .calendar .calHeader .calDate{font-size:28px}
    .reservationWrap .calendarArea .calendar .calHeader .calBtn{top:-3px}
    .reservationWrap .calendarArea .calendar .calHeader .prev{padding-left:32px}
    .reservationWrap .calendarArea .calendar .calHeader .next{padding-right:32px}
    .reservationWrap .timeArea .result .date,.reservationWrap .timeArea .result .time{float:none;width:100%}
    .reservationWrap .timeArea .result .time{border-left:none}
}



.modal__open #top_link,
.modal__open #top_layout {z-index:1;}
.modal__body {width:600px;min-height:300px;padding: 50px;}
.modal__content {padding:0;}
.modal__content .list-1st li span {margin-right:10px;}
.modal__close-button span {width:50px; height:50px;}
.modal__close-button span:before{left:50%;width:30px;height:1px;margin-top:0;margin-left:-15px}
.modal__close-button span:after{width:1px;height:30px;margin-top:-15px}

@media(max-width:767px){
    .modal__body {overflow-y: auto;width: 80% !important;height: 60%;padding: 50px 20px;}
    .modal__content {}
}
.reservationWrap .calendarArea .calendar .calHeader .next a {display: block;width: 32px;height: 32px;margin-left: 8px;}
.reservationWrap .calendarArea .calendar .calHeader .prev a {display: block;width: 32px;height: 32px;margin-left: -40px;}
.reservationWrap .calendarArea .calendar .calHeader .prev a:focus {border: 1px solid #000 !important;}
.reservationWrap .calendarArea .calendar .calHeader .next a:focus {border: 1px solid #000 !important;}
.reservationWrap .calendarArea .calendar .schcal_tbl td p.small {font-size: 14px;}


.areaInfo { border: 1px solid #dfe2ea; padding: 20px 30px; margin-top: 30px; position: relative;}
.areaInfo::before { display: block; position: absolute; z-index: 1; content: ''; width: 124px; height: 51px; background: url(/images/skin/process_bg.png) no-repeat left top; left: 0;top: 0;}

.areaInfo p img { display: block; width: auto !important; height: auto !important; max-height: 380px; }

@media (max-width:1023px) {
    .areaInfo  {padding: 20px;}
}
@media (max-width:590px) {
    .areaInfo  {padding: 15px;}
}

/* added : 250625 */
.areaInfo-topBox {position: relative;min-height: 310px;padding-right: 540px;}
.areaInfo-topBox .thm-box {position: absolute;right: 0;top: 0;width: 510px;height: auto;}
.areaInfo-topBox .list-1st li {font-size: 19px;}
.list-1st li b {font-size: 19px;}
.areaInfo-topBox .link {display: block;height: 310px;overflow: hidden;}
.areaInfo-topBox .link:focus {outline: 3px solid #000;outline-offset: 0;}
.areaInfo-topBox .thm-inner {display: block;position: relative;width: 100%;height: 100%;}
.areaInfo-topBox .thm-inner img {display: block;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);max-width: none;max-height: none;width: auto;height: 100%;}

@media(max-width: 1023px){
    .areaInfo-topBox {min-height: auto;padding: 0;}
    .areaInfo-topBox .thm-box {position: static;margin: 0 auto 20px;}
}
@media(max-width: 768px){
    .areaInfo-topBox .list-1st li {font-size: 16px;}
    .list-1st li b {font-size: 16px;}
}
@media(max-width: 767px){
    .areaInfo-topBox .thm-box {width: 100%;}
    .areaInfo-topBox .link {height: 40.419vw;}
}
@media(max-width: 420px){
    .areaInfo-topBox .list-1st li {font-size: 15px;}
    .list-1st li b {font-size: 15px;}
}


    /* 이미지 크게보기 스타일 */
    #layerGround {}
    #imgLayer {max-width: none !important;width: 100% !important;height: 100vh;background: none !important;box-shadow: none !important;display: flex;align-items: center;top: 50% !important;left: 50% !important;transform: translate(-50%, -50%) !important;}
    #imgLayer img {vertical-align: top;}
    #imgLayer .thumb { width: auto !important; max-width: 95%; max-height: 70vh; height: auto; position: relative; top: auto; left: auto; transform: translate(0, 0); margin: 0 auto; }
    #imgLayer #exit {position: fixed !important;width: 100px !important;right: 0;top: 0;}
    #imgLayer #exit:focus {border: 1px dashed #FFF;}
    #imgLayer #exit strong {display: none;}
    #imgLayer #exit a {display:block;width:70px!important;height:70px!important;background:rgba(0,0,0,1);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='120' height='120'%3E%3Cpath d='M12.0007 10.5865L16.9504 5.63672L18.3646 7.05093L13.4149 12.0007L18.3646 16.9504L16.9504 18.3646L12.0007 13.4149L7.05093 18.3646L5.63672 16.9504L10.5865 12.0007L5.63672 7.05093L7.05093 5.63672L12.0007 10.5865Z' fill='rgba(255,255,255,1)'%3E%3C/path%3E%3C/svg%3E");background-size:35px;background-repeat:no-repeat;background-position:50%;}
    #imgLayer #exit a img {display: none;}

    @media (max-width:590px) {
        #imgLayer {height: 100svh;}
    }
    /* //이미지 크게보기 스타일 */
/* //added : 250625 */