/*온라인예매 > 예약하기 ************************************************************************************/
.reserve_guide{position: relative;}

.res_info{position: relative;background: #f8f8f8;text-align: center; padding: 60px; margin-bottom: 80px; border-radius: 20px;}
.res_info:before{position: absolute; content: ''; display: block; background: url("/resource/dino/images/dinosaur/inc/sub03_shadow.png") top center no-repeat; background-size: contain; width: 100%; height: 34px; left: 0; bottom:-34px;}
#content .res_info h4{font-size: 36px; font-weight: 700;color: #111;margin-bottom: 30px; background: url("/resource/dino/images/dinosaur/inc/sub03_icon.png") top center no-repeat;padding: 0; padding-top: 170px;}
#content .res_info h4 strong{color: #ff6000; font-weight: 700;}
.res_info ul{display: inline-block; text-align: left;}
.res_info ul li{color: #333; font-size: 18px;margin-bottom: 5px;word-break: keep-all; background: url("/resource/dino/images/dinosaur/inc/dot02.gif") left 10px no-repeat; padding-left: 15px;}

/*온라인예매 > 예약시스템오픈************************************************************************************/
#content .open_day h4{background: url("/resource/dino/images/dinosaur/inc/sub03_icon0.png") top center no-repeat;padding-top: 140px;word-break: keep-all;}
.open_day ul li:nth-last-of-type(1){background:none;padding-left: 0;}


@media all and (max-width :1024px) {
	#content .res_info h4{font-size: 30px; margin-bottom: 10px;  background-size:200px; padding: 0; padding-top: 120px;}
	.res_info ul li{color: #333; font-size: 16px;}

	#content .open_day h4{background-size:400px;padding-top: 100px;}
}

@media all and (max-width :767px) {
	#content .res_info h4{font-size: 24px; background-size:150px; padding: 0; padding-top: 90px;}
	#content .res_info h4 strong{display: block;}

	#content .open_day h4{background-size:220px;padding-top: 55px;}
}




.res_calendar_guide{ display: flex; justify-content: space-between;}
.res_calendar_guide > div{width: 49%; border: 1px solid #ddd; border-radius: 20px; box-shadow: 0 0 8px rgba(0,0,0,0.1); padding: 40px;}

@media all and (max-width :1024px) {
	.res_info{padding: 40px; margin-bottom: 40px;}
	.res_calendar_guide{flex-direction: column;}
	.res_calendar_guide > div{width: 100%;}

}

@media all and (max-width :767px) {
	.res_calendar_guide > div{padding: 20px 15px;}
}


/*온라인예매 > 예약하기 > 왼쪽박스*/
.left_guide{}
.left_guide .calendar_tit{ display: flex; align-items: center; justify-content: space-between;  margin-bottom: 20px; height: 30px;}
.left_guide .calendar_tit *{display: inline-block;}
.left_guide .calendar_tit > button{ border-radius: 50%; border:none; height: 30px; width: 30px; text-align: center; background: none;}
.left_guide .calendar_tit > button.off{ opacity: 0.2;}
.left_guide .calendar_tit strong{font-size: 28px;margin: 0 14px;font-weight: 700; line-height: 30px; letter-spacing: -1px;vertical-align: middle;}
.left_guide .calendar_tit a.bbs_sbtn {font-size: 0.75rem; background: #333; padding: 5px;  border-radius: 5px; color: #fff;transition:.2s ease;}
.left_guide .calendar_tit a.bbs_sbtn:hover, .left_guide .calendar_tit a.bbs_sbtn:active, .left_guide .calendar_tit a.bbs_sbtn:focus  {background: #ff6000;color: #333;    text-decoration: none; font-weight: 500;}
.left_guide .calendar_tit span{position: relative; height: 35px; line-height: 35px; padding-left: 15px; font-size: 14px;}
.left_guide .calendar_tit span:before{position: absolute; content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #ccc; left: 0; top:8px;}
.left_guide .calendar_tit:after{display: block;clear: both; content: '';}
.left_guide .calendar{ width: 100%;}
.left_guide .calendar thead th{font-size: 14px; padding: 5px 0;border-top:1px solid #ddd;border-bottom:1px solid #ccc;}
.left_guide .calendar thead th:first-of-type,
.left_guide .calendar td:first-of-type a{color: #df3333;}
.left_guide .calendar td:first-of-type{color: #ec8585;}

.left_guide .calendar thead th:last-of-type,
.left_guide .calendar td:last-of-type a{color: #3c53c8; }
.left_guide .calendar td:last-of-type{color: #8a98de; }


.left_guide .calendar td{ border-left:1px solid #ddd;border-bottom:1px solid #ddd; font-size: 16px; padding: 15px 0; text-align: center; color:#888; width: calc(100% / 7);}
.left_guide .calendar td:first-of-type{border-left:none;}

.left_guide .calendar .holiday{position: relative; color: #111;}
.left_guide .calendar .holiday:after{content: ''; display: inline-block; position: absolute;width: 35px; height: 35px; background: #ccc; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1;}
.left_guide .calendar .able{background:#f5f4f9;}
.left_guide .calendar .able a{ color: #111; text-decoration: none; font-weight: 500;}
.left_guide .calendar .today{position: relative; color: #111;}
.left_guide .calendar .today:after{content: ''; display: inline-block; position: absolute;width: 35px; height: 35px; border:3px dotted #0c4ec9;  border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%);}


.left_guide dl{}
.left_guide dl dt{ font-size: 18px;margin-top: 20px;}
.left_guide dl dd{ color: #555; background: url("/resource/dino/images/dinosaur/inc/dot01.gif") left 10px no-repeat; padding-left: 10px;}

@media all and (max-width :1024px) {

	.left_guide{ margin-bottom: 20px;}


}
.left_guide .calendar_tit span:before {width: 20px; height: 20px; top: 8px;}
.left_guide .calendar_tit span {    float: right;font-size: 18px; padding-left: 30px;    margin-left: 20px;}
.left_guide .calendar_tit { display: block;}
.left_guide .calendar_tit a.bbs_sbtn { float: right; margin-top: -5px;font-size: 16px;padding: 10px 20px; border-radius: 7px;}

@media all and (max-width :767px) {
	.left_guide .calendar_tit{height: 25px;}
	.left_guide .calendar_tit strong{font-size: 24px;margin: 0 0px;line-height: 25px;}
	.left_guide .calendar_tit span{height: 30px; line-height: 30px; text-align: center;}
	.left_guide .calendar_tit span:before{ top:10px;}

	.left_guide .calendar td{ font-size: 15px; padding: 12px 0; }

	.left_guide .calendar .holiday:after{width: 30px; height: 30px;	}
	.left_guide .calendar .today:after{width: 30px; height: 30px;	}
}


/*온라인예매 > 예약하기 > 오른쪽박스*/

.right_guide{}

.right_guide .start_txt{ text-align: center; padding: 50px 0; font-size: 18px; line-height: 1.8em;}
.right_guide .start_txt strong{display: block; color: #ff0000;font-size: 20px;}

.right_guide h5{background: none !important; padding-left: 0 !important; height: 30px; }
.right_guide h5 strong{font-size: 28px;font-weight: 700;letter-spacing: -1px;background: url("/resource/dino/images/dinosaur/inc/icon_calendar.png") left center no-repeat; padding-left: 40px;}

.res_talbe{width: 100%;border-bottom:1px solid #3a268b;border-top:2px solid #3a268b;text-align: center;margin-bottom: 20px;}
.res_talbe thead th{font-size: 15px; color: #523bb6;; border-bottom:1px solid #3a268b; background:#f5f4f9; word-break:keep-all;padding:10px 1%;}
.res_talbe td{font-size: 16px; color: #000;border-bottom:1px solid #e7e7e7;word-break:keep-all;padding: 15px 1%;}
.res_talbe input{ border:1px solid #ddd; border-radius: 5px; padding: 5px; height: 40px; margin: 1px;}
.res_talbe select{border:1px solid #ddd; border-radius: 5px;height: 40px; }
.res_talbe textarea{border:1px solid #ddd; border-radius: 5px; padding: 10px;height: 150px; width: 100%;}
.right_guide a{ text-decoration: none; font-size: 14px;}
.right_guide .s_btn{background:#ffb400; border-radius: 20px; padding: 5px 10px;}
.right_guide .no_btn{background:#e7e7e7; border-radius: 20px; padding: 5px 10px;color: #555;}


.right_guide > ul{}
.right_guide > ul > li{background: url("/resource/dino/images/dinosaur/inc/dot01.gif") left 10px no-repeat; padding-left: 10px;}

.res_write_guide{ margin-bottom: 50px;}
.res_write_guide .res_talbe{ text-align: left;}
.res_write_guide .res_talbe tbody th{font-size: 16px; color: #523bb6;; border-bottom:1px solid #e7e7e7;border-right:1px solid #e7e7e7; padding:20px 1%; text-align: left;}
.res_write_guide .res_talbe tbody th > span{display: inline-block; width: 6px; height: 6px; border-radius: 50%; overflow: hidden; text-indent: -300px; background: #ff0000; vertical-align: top; margin-top: 5px; margin-left: 5px;}
.res_write_guide .res_talbe td{padding: 5px 1%;}

.res_write_guide .res_talbe .people{}
.res_write_guide .res_talbe .people li > em{display: inline-block; width: 260px;}
.res_write_guide .res_talbe .people li em strong{color:#ff0000;}

@media all and (max-width :767px) {

	.right_guide .start_txt{ padding: 30px 0; font-size: 15px;}
	.right_guide .start_txt strong{font-size: 16px;}

	.right_guide h5{height: 25px; }
	.right_guide h5 strong{font-size: 22px;background: url("/resource/dino/images/dinosaur/inc/icon_calendar.png") left center no-repeat; padding-left: 35px;letter-spacing: -0.08em;}

	.right_guide .res_talbe td{font-size: 15px;}

	.res_write_guide .res_talbe tbody td{ display: inline-block;padding:7px 2%;width:100%;}
	.res_write_guide .res_talbe tbody th{ display: inline-block; font-size:14px; border-right:none; border-bottom:none; text-align:left; padding:10px 2% 5px 2%; width:100%;}

	.res_write_guide .res_talbe .people li{font-size: 15px; }
	.res_write_guide .res_talbe .people li > em{ width: 230px;}
}



/*온라인예매 > 예약하기 > 예약조회*/
.res_search{ border-radius: 20px; border:1px solid #ddd; padding: 50px; width: 650px; margin: 0 auto;}
#content .res_search h4{ text-align: center; font-size: 36px; font-weight: 700;color: #111;margin-bottom: 40px; background: url("/resource/dino/images/dinosaur/inc/sub03_icon04.png") top center no-repeat;padding: 0; padding-top: 170px;}
.res_search .txt{font-size: 16px; background: url("/resource/dino/images/dinosaur/inc/dot03.gif") left 8px no-repeat; padding-left: 15px; margin-bottom: 10px; word-break: keep-all; vertical-align: top;}
.res_search .btn_guide{ margin-top: 20px;}
.res_search .btn{ display: block;width: 100%; text-align: center; background: #000; color: #fff; font-size: 20px; padding: 20px 0;}



@media all and (max-width :1024px) {
	#content .res_search h4{font-size: 30px; margin-bottom: 20px;  background-size:200px; padding: 0; padding-top: 150px;}

}


@media all and (max-width :767px) {
	.res_search{padding: 30px; width: 100%;}
	#content .res_search h4{font-size: 24px; background-size:150px; padding: 0; padding-top: 110px;}
	.res_search .txt{font-size: 15px;}

}


/*온라인예매 > 예약하기 > 예약조회 > 예약리스트*/
.res_list{}
.res_list ul{position: relative; border-radius: 20px; border:1px solid #ddd; padding: 30px 50px; margin-bottom: 20px;}
.res_list ul li{padding: 5px 0;}
.res_list ul li > span{display: inline-block; width: calc(100% - 130px);padding-left: 20px; vertical-align: top;}
.res_list ul li > span:first-of-type{position: relative; width: 130px;padding-left: 00px; color:#523bb6; }
.res_list ul li > span:first-of-type:before{ position: absolute; content: ''; display: inline-block; width: 1px; height: 12px; top: 50%; right: 0; transform: translateY(-50%); background: #a89dda;}
.res_list ul .btn{ position: absolute; display: inline-block; width: 170px; top: 50%; right: 5%; transform: translateY(-50%);}
.res_list ul .btn a{ display: block;border-radius: 30px; padding: 20px 0; background: #523bb6; color: #fff; text-align: center;}
.res_list ul .btn a > span{display: inline-block; background: url("/resource/dino/images/dinosaur/inc/sub03_icon06.png") right center no-repeat; padding-right: 30px;}



@media all and (max-width :1024px) {
	.res_list ul{padding: 30px; }
	.res_list ul li > span{width: calc(100% - 100px);}
	.res_list ul li > span:first-of-type{width: 100px;}
	.res_list ul .btn{ width: 150px; right: 3%;}

}


@media all and (max-width :768px) {
	.res_list ul{padding: 20px; }
	.res_list ul li > span{width: calc(100% - 90px);padding-left: 10px; }
	.res_list ul li > span:first-of-type{width: 90px;}
	.res_list ul .btn{ position: relative;width: 100%; top: inherit; right: inherit; transform: translateY(0%); margin-top: 10px;}
	.res_list ul .btn a{padding: 10px 0; }
}



/*개인정보*/
.agree_box{ border:1px dashed #ccc; padding:20px; margin-bottom:10px; height: 250px; overflow: auto;}
.agree_box h5{color: #134aa9; background: none; padding-left: 0;}
.agree_txt{ margin-bottom: 50px; text-align: center;}
.agree_txt > span{display: inline-block; padding-right: 30px; word-break: keep-all;}

@media all and (max-width :767px) {
	.agree_txt > span{display:block; padding-right: 0px;}
}


/*본인인증************************************************************************************/
.certify_guide{ position: fixed; display: none;width: 100%; height: 100%; background: rgba(0,0,0,0.8); left: 0; top:0; z-index: 99999;}
.certify_guide .certify_box{position: absolute; display: inline-block; width: 500px; left: 50%; top:50%; transform: translate(-50%, -50%); background: #fff; border:1px solid #ddd; border-radius: 20px; overflow: hidden;box-shadow: 0 0 8px rgba(0,0,0,0.1);}
.certify_guide .certify_box h4{ font-size: 30px; padding: 15px 30px; border-bottom: 1px solid #ddd;}
.certify_guide .certify_box .btn_close{position: absolute; display: inline-block; width: 45px; height: 45px; background: url("/resource/dino/images/dinosaur/inc/sub03_icon03.png") center no-repeat; overflow: hidden; text-indent: -500px; right: 30px; top: 15px;}
.certify_guide .certify_content{ padding: 40px; text-align: center;}
.certify_guide .certify_content h5{font-size: 26px;}
.certify_guide .certify_content dl{position: relative; padding-top: 180px; display: inline-block; text-align: left; margin-top: 20px;}
.certify_guide .certify_content dl:before{position: absolute; display: inline-block; content: ''; height: 160px; width: 160px; border-radius: 50%; background: #f6f6f6 url("/resource/dino/images/dinosaur/inc/sub03_icon02.png") center no-repeat; top: 0; left: 50%; transform: translateX(-50%);}
.certify_guide .certify_content dl dt{ font-size: 18px; color: #111; margin-bottom: 10px;}
.certify_guide .certify_content dl dd{color:#666;}
.certify_guide .certify_content p{text-align: center; margin-top: 20px;}
.certify_guide .certify_content .btn{display: inline-block;  background: #000; color: #fff;font-size: 20px; padding: 15px 30px; }

@media all and (max-width :600px) {

	.certify_guide .certify_box{position: absolute; display: inline-block; width: 90%; }
	.certify_guide .certify_box h4{ font-size: 24px; }
	.certify_guide .certify_box .btn_close{background-size:30px;right: 20px; top: 5px; }
	.certify_guide .certify_content{ padding: 20px;}
	.certify_guide .certify_content h5{font-size: 22px;}
	.certify_guide .certify_content dl{padding-top: 140px;}
	.certify_guide .certify_content dl:before{height: 120px; width: 120px; background-size:80px; }
}

/*버튼 스타일************************************************************************************/
.bbs_btn_guide{ margin-bottom:50px; vertical-align:top; font-size: 0;}
.bbs_btn_guide *{box-sizing: border-box;}
.cbtn_style{display:inline-block; font-size:13px; padding:0px 7px; border-radius:10px; letter-spacing:-0.05em;line-height:20px; margin: 0 1px;}/*컨텐츠내 버튼*/
.sbtn_style{display:inline-block; font-size:13px; padding:0px 7px; letter-spacing:-0.05em; height:30px !important; line-height:30px; vertical-align:top;}/*작은버튼*/
.btn_style{display:inline-block; font-size:15px; padding:0px 30px; letter-spacing:-0.05em;  height:50px; line-height:50px; vertical-align:top; border-radius: 25px; margin: 0 5px;}/*기본버튼
.bbs_btn {letter-spacing: -0.05em;
    line-height: 50px;
    vertical-align: top;
    border-radius: 5px;
    margin: 0 5px;
    color: #fff;
    background: #333;
    font-size: .8rem;
    padding: 10px;
    line-height: normal;
    margin: 0 2px;
    position: absolute;}*/


.btn_red {color: #fff;background:#ea2c00;}
.btn_blue {color: #fff;background:#202e9a;}
.btn_purple {color: #fff;background:#4e00de;}
.btn_navy {color: #fff;background:#1e2459;}
.btn_orange{color: #fff;background:#ff6000;}
.btn_green {color: #fff;background:#539801;}
.btn_black {color: #fff;background:#000;}
.btn_gray {color: #fff;background:#555;}
.btn_lgray {color: #111;background:#e5e5e5; border:1px solid #ccc !important;}
.btn_lgray:hover, .btn_lgray:focus{ border:1px solid #ccc !important;}

.btn_white {color:#111;background:#fff; border:1px solid #ccc !important;}
.btn_white:hover, .btn_white:focus{ border:1px solid #ccc !important;}