

/**************************************************
*   2.8 - section8(예약신청)
**************************************************/
@media (min-width:0) {
    #dialog { display:none; }
    #section8 { background:url('../images/contents/section8_bg.jpg') no-repeat 0 0; background-size:cover; }
    #section8 .row { box-sizing:border-box; font-size:0; padding:20px 20px; overflow:hidden; text-align:left; }
    #section8 .row .col { background-color:#fff; box-sizing:border-box; display:inline-block; width:100%; padding:10px; }
    #section8 .row .col .info { background-color:#f5f5f5; box-sizing:border-box; display:block; font-size:15px; line-height:1.4; padding:10px; text-align:left; color:#333; }
    #section8 .row .col .reservation { box-sizing:border-box; margin-bottom:30px; padding:10px 0 0; }
    #section8 .row .col .reservation .input label { cursor:inherit; display:inline-block; width:90px; color:#333; }
    #section8 .row .col .reservation .input label b { font-size:14px; font-weight:normal; color:#666; }
    #section8 .row .col .reservation .input input { display:inline-block; width:calc(100% - 90px); }
    #section8 .row .col .reservation .input textarea { display:inline-block; vertical-align:middle; width:calc(100% - 90px); }
	
	#section8 .row .col .reservation .input.select_wrap2 { /* margin:7px 0; */ font-size:0; }
    #section8 .row .col .reservation .input.select_wrap2 .dropdown { display:inline-block; width:calc(100% - 90px); }
    #section8 .row .col .reservation .input.select_wrap2 .dropdown select { margin:7px 0; display:block; background-color:#fff; border:1px solid #ccc; color:#787878; height:29px; line-height:29px; padding:0 5px; text-align:left; width:100%; }
    /* #section8 .row .col .reservation .input.select_wrap2 .dropdown .dropbtn i { float:right; line-height:29px; } */
    #section8 .row .col .reservation .input.select_wrap2 .dropdown-content { box-sizing:border-box; min-width:100%; }
	
    #section8 .row .col .reservation .input.select_wrap { /* margin:7px 0; */ }
    #section8 .row .col .reservation .input.select_wrap .dropdown { margin-right:1px; }
    #section8 .row .col .reservation .input.select_wrap .dropdown select { margin:7px 0; display:block; background-color:#fff; border:1px solid #ccc; color:#787878; height:29px; line-height:29px; padding:0 5px; text-align:left; width:50px; }
    /* #section8 .row .col .reservation .input.select_wrap .dropdown .dropbtn i { float:right; line-height:29px; } */
    #section8 .row .col .reservation .input.select_wrap .dropdown-content { box-sizing:border-box; min-width:100%; }

    #section8 .row .col .reservation .input select.last { margin-right:0; }
    #section8 .row .col .responsive { border:1px solid #cccccc; border-collapse:collapse; table-layout:fixed; width:100%; }
    #section8 .row .col .responsive th { background-color:#f5f5f5; border-bottom:1px solid #cccccc; padding:10px 0; color:#333; font-weight:400; text-align:center; }
    #section8 .row .col .responsive th span { font-size:14px; }
    #section8 .row .col .responsive td { padding:10px 0; text-align:center; vertical-align:middle; font-weight:400; color:#666; }
    #section8 .row .col .responsive td:hover { color:#222; }
    #section8 .row .col .responsive td.even { background-color:#f5f5f5; }
    #section8 .row .col .responsive td.con { text-align:left; }
    #section8 .row .col .responsive td.con span { position:relative; }
    #section8 .row .col .responsive td.con span a { display:block; width:80%; }
    #section8 .row .col .responsive td.con span i { color:#ff0000; position:absolute; right:15px; top:0; }
    #section8 .row .col .responsive td.con span i:nth-of-type(2) { right:0; }
    #section8 .row .col .responsive td span { display:block; font-size:12px; }
    #section8 .row .col .board { background-color:#fff; box-sizing:border-box; padding:10px 0; }
    #section8 .row .col .board .tx9 { font-size:12px; margin-bottom:10px; color:#333; }
    #section8 .reservation .textbox { border:1px solid #cccccc; box-sizing:border-box; font-size:14px; height:110px; line-height:1.4; margin:10px 0; overflow-y:auto; padding:10px; width:100%; }
    #section8 .reservation .form_row input { margin:0; }
    #section8 .reservation .form_row span { display:inline-block; font-size:12px; margin:8px 0; vertical-align:middle; }
    
    #section8 .reservation .input .captchabox { display:inline-block; width:calc(100% - 90px); vertical-align:middle; }
    #section8 .reservation .input .captchabox .imgbox { border:1px solid #ccc; overflow:hidden; }
    #section8 .reservation .input .captchabox input[type='text'] { float:left; width:calc(100% - 84px); }
    #section8 .reservation .input .captchabox a { display:inline-block; width:30px; height:30px; font-size:14px; padding:7px; border:1px solid #ccc; margin:7px 0; margin-left:3px; }
    
    #section8 .box { border:1px solid #ccc; box-sizing:border-box; font-size:14px; line-height:1.4; padding:15px; height:110px; overflow-y:auto; color:#666; }
    #section8 .cbox { clear:both; }
    #section8 .cbox input { margin-right:5px; }
    #section8 .cbox label { color:#666; font-size:13px; }
    
}

@media (min-width:640px) { 	
    #section8 .row .col .reservation .input.select_wrap .dropdown { margin-right:5px; }
}
@media (min-width:768px) {
    #section8 .box { padding:20px; }
}
@media (min-width:992px) {
    #section8 .row .col { padding:20px; }
    #section8 .row .col .reservation .input label b { font-size:16px; }
}
@media (min-width:1280px) { 	
	#section8 .row .col .reservation { margin-bottom:0; }
	#section8 .row .col { vertical-align:top; width:calc(50% - 5px); height:940px; }
	#section8 .row .col .info { margin-top:0; }
	#section8 .row .col1 { margin-right:5px; }
	#section8 .row .col2 { margin-left:5px; }
	#section8 .row .col .reservation .input.select_wrap .dropdown .dropbtn { width:60px; }
	#section8 .row .col .responsive td span { font-size:13px; }
}

@media (max-width: 640px) {
    #section8 .row .col .reservation .input label { display:block; }
    #section8 .row .col .reservation .input input[type='text'], #section8 .row .col .reservation .input input[type='password'], #section8 .row .col .reservation .input textarea, #section8 .row .col .reservation .input.select_wrap2 .dropdown {
        width: 100%;
    }
    #section8 .row .col .reservation .input .captchabox { width: 100%; margin: 7px 0; }
    #section8 .row .col .reservation .input .captchabox input[type='text'] { width: calc(100% - 84px); }
} 


/* 모달창 */
.ui-widget-content { border-color:#ccc; background:#fff; color:#545454; border-radius:0; font-size:14px; padding:0; }
.ui-dialog .ui-dialog-titlebar { border:none; background:none; color:#232323; border-radius:0; font-weight:normal; padding:0; font-size:16px; margin:10px; border-bottom:1px solid #ccc; padding-bottom:10px; }
.ui-dialog .ui-dialog-titlebar-close { border:0; background:none; font-weight:normal; color:#00529b; border-radius:0; }
.ui-state-default .ui-icon { background:url('../images/contents/btn_close_01.png') no-repeat center; top:5px; }
.ui-widget input { border-radius:0; }
#dialog { margin:0 0 10px; }
.ui-widget-overlay { background:rgba(0,0,0,0.6); opacity:1; }
#dialog .ui-state-default { border-radius:0; border-color:#00529b; background:none; font-weight:normal; color:#00529b; -webkit-transition:all 0.5s; transition:all 0.5s; }
#dialog .ui-state-default:hover { background-color:#00529b; color:#fff; }

/**************************************************
*   2.8 - section8 (예약확인)
**************************************************/
@media (min-width:0) {
    #myModal8 .modal-content { padding:10px; text-align:left; }
    #myModal8 .info { background-color:#fbf5e1; border:1px solid #cccccc; clear:both; padding:10px; line-height:1.4; font-size:14px; }
    #myModal8 .info span { color:#ec2027; }
    #myModal8 .table_layout { margin-top:20px; }
    #myModal8 .table_layout .th, #myModal8 .table_layout .td { padding:10px; font-size:15px; color:#666; }
    #myModal8 .table_layout .th { background-color:#eeeeee; }
    #myModal8 .table_layout .th b { font-weight:400; }
    #myModal8 .table_layout .td span { color:#003cd4; text-decoration:underline; }
    #myModal8 .btn_group { margin-top:20px; }
}
@media (min-width:768px) { 	
    #myModal8 .info { padding:20px; font-size:15px; }
	#myModal8 .table_layout { border-collapse:collapse; display:table; width:100%; }
	#myModal8 .table_layout .row { display:table-row; }
	#myModal8 .table_layout .th, #myModal8 .table_layout .td { border:1px solid #cccccc; display:table-cell; padding:15px; }
	#myModal8 .table_layout .th { width:150px; }
	#myModal8 .btn_group { margin-top:40px; }
}
@media (min-width:992px) {
    #myModal8 .modal-content { padding:20px; }
}

/**************************************************
*   2.8 - section8 (예약수정)
**************************************************/
@media (min-width:0) {
    #myModal9 > * { color:#787878; }
    #myModal9 .modal-content { padding:10px; text-align:left; }
    #myModal9 .section_inner .form_row label { cursor:inherit; width:100%; font-size:15px; }
    #myModal9 .section_inner .form_row label b { font-weight:400; color:#666; }
    #myModal9 .section_inner .form_row small { color:#ec2027; vertical-align:middle; }
    
    #myModal9 .section_inner .form_row .input_wrap { width:100%; }
    #myModal9 .section_inner .form_row .input_wrap select { border:1px solid #cccccc; height:30px; line-height:29px; margin:7px 0; padding-left:10px; color:#787878; font-size:14px; width:200px; background:url("../images/contents/icon_down_01.png") no-repeat 95% 50%; }
    #myModal9 .section_inner .form_row .input_wrap.select_wrap .dropdown { }
    #myModal9 .section_inner .form_row .input_wrap.select_wrap .dropdown select { background-color:#fff; border:1px solid #ccc; color:#787878; height:29px; line-height:29px; padding:0 5px; text-align:left; width:50px; }
    #myModal9 .section_inner .form_row .input_wrap.select_wrap .dropdown .dropbtn i { float:right; line-height:29px; }
    #myModal9 .section_inner .form_row .input_wrap.select_wrap .dropdown-content { box-sizing:border-box; min-width:100%; }
    
	#myModal9 .section_inner .form_row .input_wrap.select_wrap2 { font-size:0; }
    /* #myModal9 .section_inner .form_row .input_wrap.select_wrap2 .dropdown { width:100%; margin:10px 1px 10px 0; } */
    #myModal9 .section_inner .form_row .input_wrap.select_wrap2 .dropdown { width:100%;  }

    #myModal9 .section_inner .form_row .input_wrap.select_wrap2 .dropdown select { background-color:#fff; border:1px solid #ccc; color:#787878; height:29px; line-height:29px; padding:0 5px; text-align:left; width:100%; }
    #myModal9 .section_inner .form_row .input_wrap.select_wrap2 .dropdown .dropbtn i { float:right; line-height:29px; }
    #myModal9 .section_inner .form_row .input_wrap.select_wrap2 .dropdown-content { box-sizing:border-box; min-width:100%; }
	
	
	#myModal9 .section_inner .form_row .input_wrap ul { width:100%; }
	#myModal9 .section_inner .form_row .input_wrap ul li { float:left; width:30%; }
	#myModal9 .section_inner .form_row .input_wrap ul li.w10 { text-align:center; width:auto; font-size:11px; padding:17px 5px; }
	#myModal9 .section_inner .form_row .input_wrap ul li.w15 { padding:12px 3px; text-align:center; width:auto; }
    #myModal9 .section_inner .form_row .input_wrap ul li select { width:100%; }
    #myModal9 .section_inner .form_row .input_wrap ul li.last { margin-left:1%; }

    #myModal9 .section_inner .form_row .input_wrap.captchabox { display:inline-block; vertical-align:middle; }
    #myModal9 .section_inner .form_row .input_wrap.captchabox .imgbox { border:1px solid #ccc; overflow:hidden; margin-top:8px; }
    #myModal9 .section_inner .form_row .input_wrap.captchabox input { float:left; width:calc(100% - 84px); }
    #myModal9 .section_inner .form_row .input_wrap.captchabox a { display:inline-block; width:30px; height:30px; font-size:14px; padding:7px; border:1px solid #ccc; margin:7px 0; margin-left:3px; }
    
    #myModal9 .box { border:1px solid #ccc; box-sizing:border-box; font-size:14px; line-height:1.4; padding:15px; height:110px; overflow-y:auto; }
    #myModal9 .cbox { clear:both; }
    #myModal9 .cbox input { margin-right:5px; }
	#myModal9 .cbox label { color:#333; }
}
@media (min-width:640px) { 	
    #myModal9 .section_inner .form_row .input_wrap.select_wrap .dropdown { margin-right:3px; }
}
@media (min-width:768px) { 	
    #myModal9 .section_inner .form_row { background-color:#f9f9f9; border-bottom:1px solid #cccc; overflow:hidden; }
    #myModal9 .section_inner .form_row:nth-of-type(1) { border-top:1px solid #cccccc; }
    #myModal9 .section_inner .form_row:nth-last-of-type(1) { border-bottom:1px solid #cccccc; }
    #myModal9 .section_inner .form_row label { float:left; line-height:50px; width:100px; padding:0 0 0 5px; }
	
    #myModal9 .section_inner .form_row .input_wrap, #myModal9 .section_inner .form_row .text_wrap { float:left; vertical-align:middle; width:calc(100% - 100px); background-color:#ffffff; box-sizing:border-box; padding:0 10px; }
    
    #myModal9 .section_inner .form_row .input_wrap select { margin:10px 0; }
    #myModal9 .section_inner .form_row .input_wrap input { margin:10px 0; width:60%; }
    #myModal9 .section_inner .form_row .input_wrap.select_wrap .dropdown .dropbtn { width:60px; }
    
    #myModal9 .section_inner .form_row .input_wrap .file_input_textbox { width:80%; }
    #myModal9 .section_inner .form_row .input_wrap .file_input_div { right:20%; top:10px; }
    
	#myModal9 .section_inner .form_row .text_wrap textarea { margin:11px 0; }
	#myModal9 .section_inner .form_row .input_wrap .dropdown .dropbtn_default { width:210px; }
    #myModal9 .section_inner .form_row .input_wrap ul li.w15 { padding:17px 7px; }
    #myModal9 .section_inner .form_row .input_wrap ul li input { width:100%; }
    
    #myModal9 .section_inner .form_row .input_wrap.captchabox a { margin:10px 0; margin-left:3px; }
    #myModal9 .box { padding:20px 40px; }
}
@media (min-width:992px) {
    #myModal9 .section_inner .form_row label { padding:0 5px; width:105px; }
    #myModal9 .section_inner .form_row .input_wrap, #myModal9 .section_inner .form_row .text_wrap { padding:0 15px; width:calc(100% - 105px); }
}
@media (min-width:1024px) { 	
	#myModal9 .section .btn_group { margin-top:40px; }
}
