@charset "UTF-8";
@import url("/_templet3/css/sub.css");
/*-------------------------------------------------
title       : 콘텐츠
Author      : ㅈㅁㅈ
Create date : 2019-08-08
-------------------------------------------------*/
.photo_reser .stripe_box .stbox { padding: 1.5rem 2rem; }

.photo_reser .stripe_box .stbox > .form-btn { width: 445px; display: inline-block; }

.photo_reser .stripe_box .stbox .period { width: 19.5rem; display: inline-block; }

.photo_reser .stripe_box .stbox > a { width: calc(100% - 19.5rem - 455px); display: inline-block; }

.photo_reser .stripe_box .stbox > a > span { width: 100%; }

.photo_reser .BtnWrap { margin: 2rem auto; text-align: center; }

.photo_reser .doc li { font-weight: 300; }

.photo_reser .doc li .ti { width: 5rem; font-weight: 500; }

.photo_reser .ReserTable td input { width: 100%; border: none; height: 2rem; padding: 0 .5rem; }

.photo_reser .ReserTable.write td input { border: 1px solid #ddd; }

.photo_reser .reser_info .txt { width: 40%; float: left; padding-right: 3rem; }

.photo_reser .reser_info .table-wrap { width: 60%; float: left; }

.photo_reser .reser_info .table-wrap tr th { padding: .5rem 1rem; }

.photo_reser .reser_info .table-wrap tr td { text-align: center; }

.photo_reser .reser_info:after { content: ''; display: block; clear: both; }

.photo_reser .place { border: 1px solid #ddd; padding: 1.5rem 2rem; }

.photo_reser .place .title { width: 5rem; float: left; font-weight: 500; line-height: 2rem; color: #333; }

.photo_reser .place .place_cho { float: left; width: calc(100% - 5rem); }

.photo_reser .place .place_cho label.ti { display: none; }

.photo_reser .place .place_cho input.radio_i { display: none; opacity: 0; }

.photo_reser .place .place_cho label.radio_l { width: 9rem; position: relative; padding-left: 1.4rem; height: 2rem; line-height: 2rem; display: inline-block; margin-right: .5rem; }

.photo_reser .place .place_cho label.radio_l:before { position: absolute; left: 0; top: .6rem; width: 0.9rem; height: 0.9rem; border-radius: 100%; border: 1px solid #ddd; background-color: #fff; content: ''; }

.photo_reser .place .place_cho label.radio_l:after { position: absolute; left: 0.25rem; top: 0.85rem; width: 0.4rem; height: 0.4rem; border-radius: 100%; background-color: #ddd; content: ''; -webkit-transition: all 0.2s; transition: all 0.2s; }

.photo_reser .place .place_cho input:checked + label::after { background-color: #3c4165; }

.photo_reser .place .place_cho select { width: 6rem; height: 2rem; padding: 0 .5rem; border: 1px solid #ddd; }

.photo_reser .place:after { content: ''; display: block; clear: both; }

.photo_reser .faciReserWrap .calendar { width: 18.5rem; margin-right: 2.4rem; float: left; border: 1px solid #ddd; position: relative; }

.photo_reser .faciReserWrap .calendar .yearmonth { height: 3rem; line-height: 3rem; text-align: center; background-color: #1a3759; color: #fff; font-size: 1rem; font-weight: 500; }

.photo_reser .faciReserWrap .calendar .arrow a { position: absolute; display: block; font-size: 0; width: 3rem; height: 3rem; border-radius: 50%; top: 0; }

.photo_reser .faciReserWrap .calendar .arrow a.prev { left: 0; }

.photo_reser .faciReserWrap .calendar .arrow a.next { right: 0; }

.photo_reser .faciReserWrap .calendar .arrow a:before { font-family: 'xeicon'; font-size: 1.3rem; width: 3rem; height: 3rem; line-height: 2.307; text-align: center; position: absolute; color: #fff; }

.photo_reser .faciReserWrap .calendar .arrow a.prev:before { content: ''; }

.photo_reser .faciReserWrap .calendar .arrow a.next:before { content: ''; }

.photo_reser .faciReserWrap .calendar .cal { text-align: center; font-size: .8rem; color: #666; margin: 1rem; }

.photo_reser .faciReserWrap .calendar .cal thead tr th { color: #333; padding-bottom: .5rem; }

.photo_reser .faciReserWrap .calendar .cal thead tr th:first-child { color: #9c1c2b; }

.photo_reser .faciReserWrap .calendar .cal thead tr th:last-child { color: #195ba8; }

.photo_reser .faciReserWrap .calendar .cal tbody tr td { height: 1.6rem; }

.photo_reser .faciReserWrap .calendar .cal tbody tr td a { width: 1.2rem; height: 1.2rem; display: block; text-align: center; margin: .2rem auto; line-height: 1.2rem; border-radius: 50%; }

.photo_reser .faciReserWrap .calendar .cal tbody tr td a.today { background-color: #c1a387; color: #fff; }

.photo_reser .faciReserWrap .calendar .cal tbody tr td a:hover { background-color: #9c1c2b; color: #fff; }

.photo_reser .faciReserWrap .calendar .cal tbody tr td a.active { background-color: #9c1c2b; color: #fff; }

.photo_reser .faciReserWrap .faciReserPDBox { float: left; width: calc(100% - 20.9rem); }

.photo_reser .faciReserWrap .faciReserPDBox .faciRPBox { border: .4rem solid #f5f5f5; padding: .8rem 1rem 1rem; margin-bottom: .8rem; }

.photo_reser .faciReserWrap .faciReserPDBox .faciRPBox .title { font-size: 1.2rem; color: #111; font-weight: 500; display: inline-block; margin-bottom: .3rem; }

.photo_reser .faciReserWrap .faciReserPDBox .faciRPBox .info_completion { float: right; padding-left: 1.3rem; position: relative; }

.photo_reser .faciReserWrap .faciReserPDBox .faciRPBox .info_completion:before { content: ''; width: .8rem; height: .8rem; border: 1px solid #ddd; background-color: #f6f6f6; background-image: linear-gradient(-45deg, transparent 40%, #dedede 40%, #dedede 50%, transparent 50%, transparent 90%, #dedede 90%); background-size: 6px 6px; position: absolute; left: 0; top: .2rem; }

.photo_reser .faciReserWrap .faciReserPDBox .faciRDBox { float: left; width: 100%; }

.photo_reser .faciReserWrap .faciReserPDBox .faciRDBox ul { width: calc(100% + .5rem); }

.photo_reser .faciReserWrap .faciReserPDBox .faciRDBox ul li { float: left; width: calc(50% - .5rem); margin-right: .5rem; border: 1px solid #ddd; text-align: center; margin-bottom: .35rem; }

.photo_reser .faciReserWrap .faciReserPDBox .faciRDBox ul li a { display: block; width: 100%; height: 3.1rem; line-height: 3.1rem; }

.photo_reser .faciReserWrap .faciReserPDBox .faciRDBox ul li a.selected { background-color: #c1a387; color: #fff; }

.photo_reser .faciReserWrap .faciReserPDBox .faciRDBox ul li a:hover { background-color: #1a3759; color: #fff; -webkit-transition: all .2s; transition: all .2s; }

.photo_reser .faciReserWrap .faciReserPDBox .faciRDBox ul li a.completion { cursor: not-allowed; color: #888; background-color: #f6f6f6; background-image: linear-gradient(-45deg, transparent 40%, #dedede 40%, #dedede 50%, transparent 50%, transparent 90%, #dedede 90%); background-size: 6px 6px; }

.photo_reser .faciReserWrap .faciReserPDBox .faciRDBox ul:after { content: ''; display: block; clear: both; }

.photo_reser .faciReserWrap .faciReserPDBox:after { content: ''; display: block; clear: both; }

.photo_reser .faciReserWrap:after { content: ''; display: block; clear: both; }

.photo_reser .equipment { border: 1px solid #ddd; padding: 0 0 0 2rem; margin-top: 1rem; }

.photo_reser .equipment .title { width: 5rem; float: left; font-weight: 500; line-height: 2rem; color: #333; padding-top: 1.5rem; }

.photo_reser .equipment .equipment_cho { float: left; width: calc(100% - 5rem); padding-top: 1.5rem; overflow: auto; overflow-y: scroll; height:32rem; }

.photo_reser .equipment .equipment_cho label.ti { display: none; }

.photo_reser .equipment .equipment_cho input.checkbox_i { display: none; opacity: 0; }

.photo_reser .equipment .equipment_cho label.checkbox_l { width: 10rem; position: relative; padding-top: 2rem; line-height: 1.2rem; display: inline-block; margin-right: .5rem; margin-bottom: 1rem; text-align: center; }

.photo_reser .equipment .equipment_cho label.checkbox_l:before { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: .6rem; width: 0.9rem; height: 0.9rem; border: 1px solid #ddd; background-color: #fff; content: ''; }

.photo_reser .equipment .equipment_cho label.checkbox_l:after { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: 0.6rem; width: 0.9rem; height: 0.9rem; content: ''; font-family: 'xeicon'; -webkit-transition: all 0.2s; transition: all 0.2s; line-height: .9rem; font-weight: 900; color: #ddd; }

.photo_reser .equipment .equipment_cho input:checked + label::before { background: #3c4165; border: 1px solid #3c4165; }

.photo_reser .equipment .equipment_cho input:checked + label::after { color: #fff; }

.photo_reser .equipment .equipment_cho .equnum_wrap { width: 60px; position: relative; margin: 0 auto; }

.photo_reser .equipment .equipment_cho .equnum_wrap .num { width: 60px; padding: 0 25px 0 .4rem; height: 30px; margin-top: .5rem; display: block; }

.photo_reser .equipment .equipment_cho .equnum_wrap span { margin-left: -25px; }

.photo_reser .equipment .equipment_cho .equnum_wrap span a { width: 25px; height: 14px; }

.photo_reser .equipment .equipment_cho .equnum_wrap span a:before { font-family: 'xeicon'; width: 25px; height: 15px; font-size: 10px; color: #000; position: absolute; line-height: 15px; text-align: center; font-weight: 600; right: 0; }

.photo_reser .equipment .equipment_cho .equnum_wrap span a.p_up:before { content: ''; top: 1px; }

.photo_reser .equipment .equipment_cho .equnum_wrap span a.p_down:before { content: ''; top: 14px; }

.photo_reser .equipment:after { content: ''; display: block; clear: both; }

.photo_reser .agreeBox { height: 3rem; line-height: 3rem; background: #fafafa; margin-bottom: .2rem; padding: 0 2rem; text-align: right; }

.photo_reser .agreeBox label:first-child { float: left; }

.photo_reser .agreeBox input.radio_i { display: none; opacity: 0; }

.photo_reser .agreeBox label.radio_l { width: 4.5rem; position: relative; padding-left: 1.4rem; height: 2rem; line-height: 2rem; display: inline-block; margin-right: .5rem; text-align: left; }

.photo_reser .agreeBox label.radio_l:before { position: absolute; left: 0; top: .6rem; width: 0.9rem; height: 0.9rem; border-radius: 100%; border: 1px solid #ddd; background-color: #fff; content: ''; }

.photo_reser .agreeBox label.radio_l:after { position: absolute; left: 0.25rem; top: 0.85rem; width: 0.4rem; height: 0.4rem; border-radius: 100%; background-color: #ddd; content: ''; -webkit-transition: all 0.2s; transition: all 0.2s; }

.photo_reser .agreeBox input:checked + label::after { background-color: #3c4165; }

.p_history { padding: 3rem 5rem 1rem; position: relative; }

.p_history:before { content: ''; width: 100%; height: 2px; position: absolute; top: 9rem; left: 0; background-image: -webkit-gradient(linear, left top, right top, from(#fff), color-stop(10%, #8a8a8a), color-stop(90%, #8a8a8a), to(#fff)); background-image: linear-gradient(to right, #fff 0%, #8a8a8a 10%, #8a8a8a 90%, #fff 100%); }

.p_history li { width: 20%; float: left; padding-right: 2rem; word-break: keep-all; }

.p_history li span { font-size: 1.5rem; color: #1a3759; font-weight: 700; position: relative; }

.p_history li span:before { content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: #1a3759; position: absolute; left: -1rem; top: 1rem; }

.p_history li span:after { content: ''; width: 1px; height: calc(5rem - 4px); background-color: #ccc; position: absolute; left: calc(-1rem + 2px); top: calc(1rem + 5px); }

.p_history li:nth-child(even) { padding-top: 8rem; }

.p_history li:nth-child(even) span:after { height: calc(3rem - 3px); top: calc(-2rem + 3px); }

.p_history:after { content: ''; display: block; clear: both; }

@media (max-width: 1400px) { .photo_reser .faciReserWrap .calendar { margin-right: 1rem; }
  .photo_reser .faciReserWrap .faciReserPDBox { width: calc(100% - 19.5rem); } }

@media (max-width: 1280px) { .photo_reser .reser_info .txt { width: 100%; }
  .photo_reser .reser_info .table-wrap { width: 100%; } }

@media (max-width: 1024px) { .photo_reser .stripe_box .stbox > .form-btn { display: block; margin-bottom: 2px; }
  .photo_reser .stripe_box .stbox > a { width: auto; }
  .photo_reser .place { padding: 1rem 1.5rem; }
  .photo_reser .place .place_cho { width: 100%; }
  .photo_reser .equipment { padding: 0 0 0 1.5rem; }
  .photo_reser .equipment .equipment_cho { width: 100%; }
  .p_history li { padding-right: 0; } }

@media (max-width: 768px) { .photo_reser .stripe_box .stbox { padding: 1rem; }
  .photo_reser .faciReserWrap .calendar { width: 100%; margin-bottom: .5rem; }
  .photo_reser .faciReserWrap .faciReserPDBox { width: 100%; }
  .p_history { padding: 2rem 0rem 1rem 3rem; }
  .p_history:before { width: 2px; height: 100%; left: .5rem; top: 0; background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(10%, #8a8a8a), color-stop(90%, #8a8a8a), to(#fff)); background-image: linear-gradient(to bottom, #fff 0%, #8a8a8a 10%, #8a8a8a 90%, #fff 100%); }
  .p_history li { width: 100%; padding-bottom: 1rem; }
  .p_history li span:after { width: 1.3rem; height: 1px !important; top: 1.1rem !important; left: -2.35rem !important; }
  .p_history li:nth-child(even) { padding-top: 0; } }

@media (max-width: 499px) { .photo_reser .table-wrap.ReserTable { table-layout: fixed; }
  .photo_reser .table-wrap.ReserTable caption + colgroup { display: none; }
  .photo_reser .table-wrap.ReserTable caption + colgroup + tbody th { display: block; width: 100%; border-right: 0 none; }
  .photo_reser .table-wrap.ReserTable caption + colgroup + tbody td { display: block; width: 100%; }
  .photo_reser .table-wrap.ReserTable caption + colgroup + tbody > tr:first-child th + td { border-top: 0 none; }
  .photo_reser .table-wrap.ReserTable caption + colgroup + tbody > tr:last-child > th:first-child { border-bottom-color: #e8ebee; }
  .photo_reser .agreeBox { line-height: 2rem; padding: .5rem 1rem; height: auto; }
  .photo_reser .agreeBox label:first-child { float: inherit; display: block; text-align: left; } }

/*-------------------------------------------------
title       : 서브
Author      : ㅈㅁㅈ
Create date : 2019-10-15
-------------------------------------------------*/
#snb .title { background: url("/photo/img/sub/snb.jpg") no-repeat; }

@media (max-width: 1280px) { #snb .title { background-size: cover; } }