@charset "utf-8";

/*
 * --------------------------------------------------------------------------
 * descript : 서브 콘텐츠
 * --------------------------------------------------------------------------
 * version	: 2.0.0
 * author	: Yoodaekyung
 * update	: 2018.08.17
 * email	: eorud0818@naver.com
 * --------------------------------------------------------------------------
 */

p {line-height: 1.7em;}

 /* 테이블 기본형(th 중앙정렬, td 좌측정렬) */
.tbl{width:100%; border-top:3px solid #4b5360;}
.tbl th{text-align:center;}
.tbl th, .tbl td{border-collapse: collapse; border:1px solid #ddd; font-size:15px; padding:15px; vertical-align:middle;text-align:center;}
.tbl thead th{background:#efefef; font-weight:700;}
.tbl tbody{}
.tbl tbody th{background:#f8f8f8; font-weight:700;}
.tbl tbody td{}

/* 테이블 가운데정렬(th, td 중앙정렬) */
.tbc{width:100%; text-align:center; border-top:2px solid #9c1662; border-left:1px solid #ddd;}
.tbc th, .tbc td{border-collapse:collapse; border-right:1px solid #ddd; border-bottom:1px solid #ddd; font-size:15px; line-height: 20px; padding:15px; vertical-align:middle;}
.tbc thead th{background:#efefef; font-weight:700;}
.tbc tbody{}
.tbc tbody th{background:#f8f8f8; font-weight:700;}
.tbc tbody td{}

.tbc tbody td[data-name="아침식사"],
.tbc tbody td[data-name="점심식사"],
.tbc tbody td[data-name="준비시간"],
.tbc tbody td[data-name="저녁식사"]{background:#fff1f3;}

/* 테이블 반응형 스타일 */
.responsive-wrap > p{display:none;}
@media(max-width:768px){
	.responsive-wrap{overflow-x:auto; padding:20px; background:#fafafa;}
	.responsive-wrap > p{display:block; min-width:768px; font-size:12px; color:#111; margin-bottom:5px;}
	.responsive-table{min-width:768px;}
}



/* h4 기준 ul */
ul.import-ul{padding-left:15px; text-align:left; margin-top:20px;}
ul.import-ul ul{padding:0 0px; margin-top:30px;}
ul.import-ul li{position:relative; font-size:15px; color:#222; line-height: 1.7em; padding-left: 18px;}
ul.import-ul li::before{display:inline-block; left:-10px; background-repeat:no-repeat; background-position:left center;}
ul.import-ul > li::before{top: 3px; width:20px; height:20px; background-image:url(/assets/img/web/sub/theme/icon_01.png);}
ul.import-ul > li > ul > li::before{top:12px; width:3px; height:3px;}


/* h4 기준 ul */
ul.h4-ul{padding-left:15px; text-align:left; margin-top:20px;}
ul.h4-ul ul{padding:0 0px; margin-top:10px;}
ul.h4-ul li{position:relative; font-size:15px; color:#222; line-height: 1.7em;}
ul.h4-ul li::before{display:inline-block; left:-10px; background-repeat:no-repeat; background-position:left 6px;}
ul.h4-ul > li::before{top: 3px; width:20px; height:20px; background-image:url(/assets/img/web/sub/theme/ul_bullet.png);}
ul.h4-ul > li > ul > li::before{left: 3px; top:10px; width:5px; height:2px; background-image:url(/assets/img/web/sub/theme/ul_ul_bullet.png);}
ul.h4-ul > li > ul > li > ul li::before{top:3px; width:5px; height:2px;}
ul.h4-ul ol{counter-reset:li; padding:0 15px; margin-top:15px;}
ul.h4-ul ol > li{padding-left:15px; line-height: 1.7em; }
ul.h4-ul ol > li::before{display:inline-block; content: counter(li); counter-increment:li; left:-10px; top:4px; font-size:13px; width:20px; height:20px; line-height:20px; text-align:center; background:#3ec2cf; font-weight:700; color:#fff;}

/* h5 기준 ul */
ul.h5-ul{padding-left:50px; text-align:left;}
ul.h5-ul ul{padding:0 15px; margin-top:15px;}
ul.h5-ul li{position:relative; font-size:15px; color:#222;}
ul.h5-ul li::before{display:inline-block; left:-10px; background-repeat:no-repeat; background-position:left center;}
ul.h5-ul > li::before{top:11px; width:5px; height:5px; }
ul.h5-ul > li > ul > li::before{top:12px; width:3px; height:3px; }
ul.h5-ul > li > ul > li > ul li::before{top:13px; width:5px; height:2px; }
ul.h5-ul ol{counter-reset:li; padding:0 15px; margin-top:15px;}
ul.h5-ul ol > li{padding-left:15px;}
ul.h5-ul ol > li::before{display:inline-block; content: counter(li); counter-increment:li; left:-10px; top:4px; font-size:13px; width:20px; height:20px; line-height:20px; text-align:center; background:#3ec2cf; font-weight:700; color:#fff;}

/* h6 기준 ul */
ul.h6-ul{padding-left:30px; text-align:left; margin:10px 0;}
ul.h6-ul ul{padding:0 15px; }
ul.h6-ul li{position:relative; font-size:15px; color:#222; line-height: 1.7em;}
ul.h6-ul li::before{display:inline-block; left:-10px; background-repeat:no-repeat; background-position:left center;}
ul.h6-ul > li::before{top:11px; width:5px; height:5px; }
ul.h6-ul > li > ul > li::before{top:12px; width:3px; height:3px; }
ul.h6-ul > li > ul > li > ul li::before{top:13px; width:5px; height:2px; }
ul.h6-ul ol{counter-reset:li; padding:0 15px; margin-top:15px;}
ul.h6-ul ol > li{padding-left:15px;}
ul.h6-ul ol > li::before{display:inline-block; content: counter(li); counter-increment: li; left:-10px; top:4px; font-size:13px; width:20px; height:20px; line-height:20px; text-align:center; background:#5abdff; font-weight:700; color:#fff;}


/* h6 기준 ol */
ol.h6-ol{counter-reset:li; padding-left:65px; text-align:left;}
ol.h6-ol ol{counter-reset:li; padding:0 15px; margin-top:15px;}
ol.h6-ol ul{padding:0 15px; margin-top:15px;}
ol.h6-ol > li,
ol.h6-ol ol > li{position:relative; font-size:15px; color:#222; padding-left:15px;}
ol.h6-ol li::before,
ol.h6-ol ol > li::before{display:inline-block; content: counter(li); counter-increment: li; left:-10px; top:4px; font-size:13px; width:20px; height:20px; line-height:20px; text-align:center; background:#5abdff; font-weight:700; color:#fff;}
ol.h6-ol ul > li{position:relative; font-size:15px; color:#222; content:'';}


/* 예약하기 -> 실시간 예약 시작 */
.reserve-week{text-align:center; margin-bottom:25px;}
.reserve-week .txt-group{display:inline-block; width:400px; height:80px; line-height:80px; border-radius:80px; border:1px solid #d9d9d9; box-shadow:5px 5px 0 #d9d9d9;}
.reserve-week .txt-group span{font-size:30px; color:#111; font-weight:700; letter-spacing:-1px;}
.reserve-week .txt-group span.week-start{}
.reserve-week .txt-group span.week-start em{color:#1e73c9;}
.reserve-week .txt-group span.week-end{}
.reserve-week .txt-group span.week-end em{color:#ff7e00;}

@media(max-width:768px){
	.reserve-week .txt-group{width:80%; height:60px; line-height:60px;}
	.reserve-week .txt-group span{font-size:18px;}
}


.reserve-info{margin-bottom:10px;}
.reserve-info ul{width:100%; display:inline-block;}
.reserve-info ul li{float:left; width:50%;}
.reserve-info ul li:last-child{text-align:right;}
.reserve-info ul li em{color:#ff7e00;}


.reserve-info ul li span{position:relative; display:inline-block; float:left; height:20px; line-height:20px; padding-left:25px; margin-right:15px;}
.reserve-info ul li span::before{display:inline-block; box-sizing:border-box; width:20px; height:20px; left:0; top:0; background:#aaa;}
.reserve-info ul li span.reserve-standby{}
.reserve-info ul li span.reserve-standby::before{background:#229fba;}
.reserve-info ul li span.reserve-complete{}
.reserve-info ul li span.reserve-complete::before{background:#e8e8e8;}
.reserve-info ul li span.reserve-apply{}
.reserve-info ul li span.reserve-apply::before{background:#fff; border:1px solid #ccc;}

.m-reserve-info{text-align:center; font-size:14px; line-height:20px; padding-bottom:25px; border-bottom:1px solid #ddd; margin-bottom:25px;}
.m-reserve-info em{color:#ff7e00;}


.m-reserve-guide{text-align:center; font-size:14px; line-height:20px; margin-bottom:15px;}
.m-reserve-guide .brick{display:inline-block;}

.m-reserve-guide span{position:relative; display:inline-block; float:left; height:20px; line-height:20px; padding-left:25px; margin-right:15px;}
.m-reserve-guide span::before{display:inline-block; box-sizing:border-box; width:20px; height:20px; left:0; top:0; background:#aaa;}
.m-reserve-guide span.reserve-standby{}
.m-reserve-guide span.reserve-standby::before{background:#229fba;}
.m-reserve-guide span.reserve-complete{}
.m-reserve-guide span.reserve-complete::before{background:#e8e8e8;}
.m-reserve-guide span.reserve-apply{}
.m-reserve-guide span.reserve-apply::before{background:#fff; border:1px solid #ccc;}



.date-picker{margin-bottom:35px;}
.date-picker ul{width:100%; display:inline-block;}
.date-picker ul li{position:relative; float:left; width:14.2857142857%; box-sizing:border-box;}
.date-picker ul li::after{display:inline-block; width:1px; height:60%; border-right:1px dotted #ccc; right:0; top:50%; transform:translate(0, -50%); -webkit-transform:translate(0, -50%);}
.date-picker ul li.active::after,
.date-picker ul li.fri::after,
.date-picker ul li.sat::after,
.date-picker ul li.sun::after{display:none;}

.date-picker ul li.sat input[type="radio"] + label{background:#d7e7f7;}
.date-picker ul li.sun input[type="radio"] + label{background:#f9e2f0;}

.date-picker ul li input[type="radio"]{display:none;}
.date-picker ul li input[type="radio"] + label{display:block; width:100%; height:65px; line-height:65px; text-align:center; background:#f4f4f4; color:#111; font-size:17px; font-weight:700; cursor:pointer;}
.date-picker ul li input[type="radio"]:checked + label{background:#9c1662; color:#fff;}
.date-picker ul li input[type="radio"]:checked + label::after{left:50%; bottom:-15px; display:inline-block; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid #9c1662;  transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0);}

.date-picker ul li.active input[type="radio"] + label{background:#9c1662; color:#fff;}
.date-picker ul li.active input[type="radio"] + label::after{left:50%; bottom:-15px; display:inline-block; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid #9c1662;  transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0);}


.m-date-picker{margin-bottom:35px;}
.m-date-picker ul{width:100%; display:inline-block;}
.m-date-picker ul li{position:relative; float:left; width:25%; box-sizing:border-box;}
.m-date-picker ul li::after{display:inline-block; width:1px; height:60%; border-right:1px dotted #ccc; right:0; top:50%; transform:translate(0, -50%); -webkit-transform:translate(0, -50%);}
.m-date-picker ul li.active::after,
.m-date-picker ul li.thu::after,
.m-date-picker ul li.fri::after,
.m-date-picker ul li.sat::after,
.m-date-picker ul li.sun::after{display:none;}

.m-date-picker ul li.sat input[type="radio"] + label{background:#d7e7f7;}
.m-date-picker ul li.sun input[type="radio"] + label{background:#f9e2f0;}

.m-date-picker ul li input[type="radio"]{display:none;}
.m-date-picker ul li input[type="radio"] + label{display:block; width:100%; height:45px; line-height:45px; text-align:center; background:#f4f4f4; color:#111; font-size:12px; letter-spacing:-1px; font-weight:700; cursor:pointer;}
.m-date-picker ul li input[type="radio"]:checked + label{background:#9c1662; color:#fff;}

.m-date-picker ul li.active input[type="radio"] + label{background:#9c1662; color:#fff;}


.m-court-picker{margin-bottom:35px;}
.m-court-picker ul{width:100%; display:inline-block;}
.m-court-picker ul li{position:relative; float:left; width:20%; box-sizing:border-box;}
.m-court-picker ul li::after{display:inline-block; width:1px; height:60%; border-right:1px dotted #ccc; right:0; top:50%; transform:translate(0, -50%); -webkit-transform:translate(0, -50%);}
.m-court-picker ul li:nth-child(5n + 5)::after{display:none;}
.m-court-picker ul li.active::after{display:none;}

.m-court-picker ul li.sat input[type="radio"] + label{background:#d7e7f7;}
.m-court-picker ul li.sun input[type="radio"] + label{background:#f9e2f0;}

.m-court-picker ul li input[type="radio"]{display:none;}
.m-court-picker ul li input[type="radio"] + label{display:block; width:100%; height:45px; line-height:45px; text-align:center; background:#f4f4f4; color:#111; font-size:12px; letter-spacing:-1px; font-weight:700; cursor:pointer;}
.m-court-picker ul li input[type="radio"]:checked + label{background:#9c1662; color:#fff;}

.m-court-picker ul li.active input[type="radio"] + label{background:#9c1662; color:#fff;}


.calendar-header{text-align:center; padding:25px 0; font-size:20px; font-weight:700; background:#fff5fb; border-top:2px solid #9c1662; color:#111;}
.calendar-header em{color:#ff7e00;}

@media(max-width:768px){
	.calendar-header{font-size:15px;}
}

.calendar-body{}
.calendar-body table{width:100%;}
.calendar-body table caption{display:none;}
.calendar-body table thead{}
.calendar-body table thead th{padding:20px 5px; background:#facfd8; color:#111; font-weight:700; color:#111; font-size:16px; text-align:center; vertical-align:middle; border:1px solid #facfd8; border-right:1px solid #fff;}
.calendar-body table thead th:first-child{padding:20px 40px;}
.calendar-body table thead th:last-child{border-right:1px solid #facfd8;}
.calendar-body table tbody{}
.calendar-body table tbody th{font-size:15px; border:1px solid #ccc; background:#f8f8f8; text-align:center; vertical-align:middle;}
.calendar-body table tbody td{font-size:14px; border:1px solid #ccc; border-left:0; text-align:center; vertical-align:middle;}
.calendar-body table tbody td.reserve-standby{height:50px; background:#229fba; color:#fff;}
.calendar-body table tbody td.reserve-complete{height:50px; background:#e8e8e8; color:#111;}
.calendar-body table tbody td.userck{background:#fffb8a;}
.calendar-body table tbody td input[type="checkbox"]{display:none;}
.calendar-body table tbody td input[type="checkbox"] + label{position:relative; display:block; width:100%; height:50px; line-height:50px; text-align:center; background:none; cursor:pointer;}
.calendar-body table tbody td input[type="checkbox"]:checked + label{background:#c31f7c;}
.calendar-body table tbody td input[type="checkbox"]:checked + label::after{display:block; content:'선택'; width:100%; color:#fff; left:0; top:0;}


.m-calendar-body{}
.m-calendar-body table{width:100%;}
.m-calendar-body table caption{display:none;}
.m-calendar-body table thead{}
.m-calendar-body table thead th{padding:20px 10px; background:#facfd8; color:#111; font-weight:700; color:#111; font-size:16px; text-align:center; vertical-align:middle; border:1px solid #facfd8; border-right:1px solid #fff;}
.m-calendar-body table thead th:first-child{}
.m-calendar-body table thead th:last-child{border-right:1px solid #facfd8;}
.m-calendar-body table tbody{}
.m-calendar-body table tbody th{height:35px; font-size:15px; border:1px solid #ccc; background:#f8f8f8; text-align:center; vertical-align:middle;}
.m-calendar-body table tbody td{height:35px; font-size:14px; border:1px solid #ccc; border-left:0; text-align:center; vertical-align:middle;}
.m-calendar-body table tbody td.reserve-standby{background:#229fba; color:#fff;}
.m-calendar-body table tbody td.reserve-complete{background:#e8e8e8 !important; color:#111;}
.m-calendar-body table tbody td.userck{background:#fffb8a !important; }
.m-calendar-body table tbody td:last-child{background:#f8f8f8;}

.m-calendar-body table tbody td input[type="checkbox"]{display:none;}
.m-calendar-body table tbody td input[type="checkbox"] + label{position:relative; display:inline-block; width:21px; height:21px; border-radius:21px; border:1px solid #ccc; background:#fff;}
.m-calendar-body table tbody td input[type="checkbox"]:checked + label::after{display:inline-block; width:13px; height:13px; border-radius:13px; background:#ff7e00; left:3px; top:3px;}


.m-tit{font-size:20px; color:#111; line-height:40px; text-align:center; margin-bottom:15px; font-weight:700; letter-spacing:-1px;}

/* 예약하기 -> 실시간 예약 끝 */

/* h4, h5, h6 */

h4{margin-bottom:10px; padding-left:27px; font-size:18px; height:35px; line-height:35px; background:url(/assets/img/common/theme/h4_bullets.png) no-repeat left 5px; background-size:20px; font-weight:700;}
h4 span{font-size:12px; color:#aaa; font-weight:100;}
h5{position:relative; font-size:20px; line-height:28px; font-weight:700; color:#222; padding-left:20px;}
h6{position:relative; font-size:18px; font-weight:700; color:#222; padding-left:25px;}



.tbl{width:100%; border-top:2px solid #9c1662; font-size:15px;}
.tbl caption{}
.tbl thead{}
.tbl thead{}
.tbl thead th{height:50px; text-align:center; border-right:1px solid #ccc; vertical-align:middle; font-weight:700; background:#f8f8f8; border-bottom:1px solid #cccccc;}
/* .tbl thead th:last-child{border-right:0;} */
.tbl tbody{}
.tbl tbody th{height:50px; text-align:center; vertical-align:middle; font-weight:700; background:#f8f8f8; border-bottom:1px solid #cccccc;}
.tbl tbody td{height:35px; text-align:left;position:relative; padding:0 10px; border-right:1px solid #ccc; vertical-align:middle; border-bottom:1px solid #ccc;}
/* .tbl tbody td:last-child{border-right:0;} */

.tbl tbody td span.state-cancel{font-weight:700; color:#ff7e00;}
.tbl tbody td span.state-reserve{font-weight:700; color:#ff7e00;}
.tbl tbody td a.more{font-weight:700; color:#ff7e00;}

@media(max-width:768px){

	.tbl{border-top:0;}


	.tbl tr,
	.tbl tr th,
	.tbl tr td{display:block;}

	.tbl tr{margin-bottom:10px; border-top:2px solid #9c1662;}

	.tbl thead{position: absolute; top:-9999px; left:-9999px;}

	.tbl tr th,
	.tbl tr td{position:relative; height:auto; min-height:35px; box-sizing:border-box; vertical-align:middle; padding:10px 0 0 100px; border-left:1px solid #ccc; border-bottom:1px solid #ccc; background:none; font-weight:400; text-align:left;}

	.tbl tr td:last-child{border-right:1px solid #ccc;}

	.tbl tr th::before,
	.tbl tr td::before{position:absolute; display:inline-block; box-sizing:border-box; padding:10px 0 0 10px; height:100%; left:0; top:0; width: 90px; text-align:left;  white-space: nowrap; content: attr(data-column); background:#f8f8f8; font-weight:700;}


}












.tbl-pay{width:100%; border-top:2px solid #9c1662; font-size:15px;}
.tbl-pay caption{}
.tbl-pay thead{}
.tbl-pay thead th{height:50px; text-align:center; border-right:1px solid #ccc; vertical-align:middle; font-weight:700; background:#f8f8f8; border-bottom:1px solid #cccccc;}
.tbl-pay thead th:last-child{border-right:0;}
.tbl-pay tbody{}
.tbl-pay tbody th{height:50px; text-align:center; vertical-align:middle; border-right:1px solid #ccc; font-weight:700; background:#f8f8f8; border-bottom:1px solid #cccccc;}
.tbl-pay tbody td{position:relative; padding:0 10px; border-right:1px solid #ccc; text-align:center; vertical-align:middle; border-bottom:1px solid #ccc;}
.tbl-pay tbody td:last-child{border-right:0;}

.tbl-pay tbody th.total{background:#fff1f3;}
.tbl-pay tbody td.total{background:#fff1f3;}
.tbl-pay tbody td.total em{font-weight:700; color:#ff0000;}



p.info{margin-top:10px; font-weight:700; font-size:14px; line-height:25px; background:url(/assets/img/common/theme/info.png) no-repeat left 2px; background-size:20px; padding-left:25px;}
p.info svg{color:#ff7e00;}
p.info em{color:#ff7e00;}

p.warning{font-weight:700; font-size:14px; line-height:25px; padding-left:25px; margin-bottom:25px;}
p.warning em{color:#ff0000;}
p.payment-standby{color:#ff0000; font-weight:700;}



@media(max-width:1024px){
	.tbl, .tbl-pay{font-size:12px;}
}


@media(max-width:768px){
	.tbl, .tbl-pay{font-size:12px;}

	.tbl-pay{border-top:0;}


	.tbl-pay tr,
	.tbl-pay tr.responsive th,
	.tbl-pay tr.responsive td{display:block;}

	.tbl-pay tr.responsive{margin-bottom:10px; border-top:2px solid #9c1662;}

	.tbl-pay thead{position: absolute; top:-9999px; left:-9999px;}

	.tbl-pay tr.responsive th,
	.tbl-pay tr.responsive td{position:relative; height:auto; min-height:35px; box-sizing:border-box; vertical-align:middle; padding:10px 0 0 160px; border-left:1px solid #ccc; border-bottom:1px solid #ccc; background:none; font-weight:400; text-align:left;}

	.tbl-pay tr.responsive td:last-child{border-right:1px solid #ccc;}

	.tbl-pay tr.responsive th::before,
	.tbl-pay tr.responsive td::before{position:absolute; display:inline-block; box-sizing:border-box; padding:10px 0 0 10px; height:100%; left:0; top:0; width: 150px; text-align:left;  white-space: nowrap; content: attr(data-column); background:#f8f8f8; font-weight:700;}

	.tbl-pay tr.total{border:2px solid #9c1662;}
	.tbl-pay tr.total th{position:absolute; top:-9999px; left:-9999px;}
	.tbl-pay tr.total td{position:relative; display:block; box-sizing:border-box; height:auto; min-height:55px; padding:20px 10px 0 160px; text-align:right; font-size:17px; border-bottom:0;}
	.tbl-pay tr.total td:nth-child(2){display:none; padding:0;}

	.tbl-pay tr.total td::before{position:absolute; display:inline-block; box-sizing:border-box; padding:20px 0 0 10px; height:100%; left:0; top:0; width: 150px; text-align:left;  white-space: nowrap; content: attr(data-column); background:#fff1f3; font-weight:700;}







	.operationg-time{border-left:0;}
	.operationg-time tr,
	.operationg-time tr.responsive th,
	.operationg-time tr.responsive td{display:block;}

	.operationg-time tr.responsive{margin-bottom:10px;}
	.operationg-time tr.responsive:nth-child(n + 2){border-top:2px solid #9c1662;}

	.operationg-time thead{position: absolute; top:-9999px; left:-9999px;}

	.operationg-time tr.responsive th,
	.operationg-time tr.responsive td{position:relative; height:auto; min-height:35px; box-sizing:border-box; border-left:1px solid #ddd; vertical-align:middle; padding:10px 0 0 160px; background:none; font-weight:400; text-align:left;}

	.operationg-time tr.responsive td:last-child{border-right:1px solid #ccc;}

	.operationg-time tr.responsive th::before,
	.operationg-time tr.responsive td::before{position:absolute; display:inline-block; box-sizing:border-box; padding:10px 0 0 10px; height:100%; left:0; top:0; width: 150px; text-align:left;  white-space: nowrap; content: attr(data-column); background:#f8f8f8; font-weight:700;}




















}



.form{width:100%; border-top:2px solid #9c1662; font-size:15px; margin-bottom:50px;}
.form .field{position:relative; display:inline-block; width:100%; box-sizing:border-box; min-height:50px; line-height:50px; padding:8px 10px 0 140px;}
.form .field::after{display:inline-block; width:100%; height:1px; left:0; bottom:-1px; background:#ccc; z-index:1;}
.form .field > label,
.form .field > em{position:absolute; left:0; top:0; width:130px; height:100%; line-height:inherit; text-align:center; background:#f8f8f8; font-weight:700;}
.form .field input[type="text"]{display:inline-block; float:left; width:100%; padding:0 5px; height:35px; line-height:35px; border:1px solid #ddd; box-sizing:border-box;}
.form .field input[data-name="휴대폰 번호"]{width:60px;}
.form .field select{display:inline-block; float:left; padding:0 5px; width:60px; height:35px; line-height:35px; border:1px solid #ddd; box-sizing:border-box; background-size:10px;}
.form .field span.hyphen{display:inline-block; float:left; height:35px; line-height:35px; width:25px; text-align:center;}

.form .field[data-name="이용일자"]{padding:0 10px 0 140px;}
.form .field p{height:35px; line-height:35px; box-sizing:border-box;}

.form .field span.custom-radio{float:left; line-height:30px; margin-right:15px;}

span.custom-radio{display:inline-block;}
span.custom-radio:last-child{margin-right:0;}
span.custom-radio input[type="radio"]{display:none;}
span.custom-radio input[type="radio"] + label{position:relative; padding-left:26px; cursor:pointer; letter-spacing:-0.25px;}
span.custom-radio input[type="radio"] + label::before{position:absolute; left:0; top:-3px; display:inline-block; width:21px; height:21px; border-radius:21px; border:1px solid #ccc; background:#fff;}
span.custom-radio input[type="radio"]:checked + label::after{display:inline-block; width:15px; height:15px; border-radius:13px; background:#ff7e00; left:4px; top:1px;}







.form .two{float:left; width:50%;}

@media(max-width:1024px){
	.form{font-size:12px;}
}

@media(max-width:768px){
	.form .two{float:none; width:100%;}

	.form .field[data-name="이용일자"]{padding:0 10px 0 90px;}
	.form .field{padding:8px 10px 0 90px;}
	.form .field > label,
	.form .field > em{width:80px;}

	.form .field select{width:30%;}
	.form .field input[data-name="휴대폰 번호"]{width:30%;}
	.form .field span.hyphen{width:5%;}

	span.custom-radio{line-height:35px;}
	span.custom-radio input[type="radio"] + label{position:relative; padding-left:22px; cursor:pointer;}
	span.custom-radio input[type="radio"] + label::before{top:-3px; width:17px; height:17px; border-radius:17px;}
	span.custom-radio input[type="radio"]:checked + label::after{width:11px; height:11px; border-radius:11px; left:4px; top:1px;}
}






.agreement{height:300px; overflow-y:auto; border-top:2px solid #9c1662; border-bottom:1px solid #ccc; background:#f8f8f8; padding:15px; font-size:13px; line-height:22px;}
.agreement em{font-weight:700;}

.agreement-btn{text-align:center; margin-top:25px;}





.form-wrap{max-width:640px; margin:0 auto;}
.form-wrap .form-inner{border-top:2px solid #9c1662; background:#f8f8f8;}
.form-wrap .form-inner em{display:block; margin-top:70px; padding:0 100px; font-size:18px; line-height:26px; font-weight:700; color:#111; text-align:center;}

.form-wrap .form-inner ul{border-bottom:1px solid #ccc; padding:25px 100px 35px 100px;}
.form-wrap .form-inner ul li{position:relative; font-size:15px; color:#353535; padding:10px 15px;}
.form-wrap .form-inner ul li::before{display:inline-block; width:5px; height:5px; left:0; top:15px; background:#ff7e00;}
.form-wrap .form-inner input{background:#fff; padding:0 5px; height:25px; line-height:inherit; border:1px solid #ddd; vertical-align: middle;}

@media(max-width:768px){
	.form-wrap .form-inner em{padding:0 50px;}
	.form-wrap .form-inner ul{ padding:25px 20px 35px 20px;}
}



.tbl-search{width:100%; height:40px; margin-bottom:10px; text-align:right;}
.tbl-search .brick{display:inline-block;}
.tbl-search select{float:left; display:inline-block; box-sizing:border-box; width:125px; height:40px; line-height:40px; border:1px solid #979393; border-right:0; padding:0 5px;}
.tbl-search button[type="submit"]{float:left; display:inline-block; box-sizing:border-box; width:85px; height:40px; line-height:40px; background:#979393; color:#fff; font-size:15px; cursor:pointer;}










/* 강사안내 */
.teacher-intro{position:relative; min-height:180px; background:#f8f8f8; border-top:2px solid #9c1662; border-bottom:1px solid #ccc; padding:30px 0; margin-bottom:30px;}
.teacher-intro .teacher-intro-thumb{position:absolute; left:50px; top:50%; width:140px; height:220px; border:1px solid #ddd; box-shadow:7px 10px 0 rgba(0,0,0,0.1); transform:translate(0, -50%); -webkit-transform:translate(0, -50%); -ms-transform:translate(0, -50%);}
.teacher-intro .teacher-intro-thumb img{display:block; background:#000;}
.teacher-intro .teacher-intro-thumb em{display:block; text-align:center; height:40px; line-height:40px; background:#fff; text-align:center; font-size:13px; font-weight:700;}

.teacher-intro .teacher-intro-detail{padding-left:240px;}
.teacher-intro .teacher-intro-detail em{position:relative; display:block; margin-bottom:10px; padding-left:15px; font-size:20px; font-weight:700; color:#111;}
.teacher-intro .teacher-intro-detail em::before{display:inline-block; width:10px; height:6px; background:#9c1762; left:0; top:3px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg);}
.teacher-intro .teacher-intro-detail ul{margin-bottom:35px; padding-bottom:35px; border-bottom:1px dashed #ccc;}
.teacher-intro .teacher-intro-detail ul li{line-height:30px; font-size:15px; color:#111;}

.teacher-intro .teacher-intro-detail ul:last-child{margin-bottom:0; padding-bottom:0; border-bottom:0;}






@media(max-width:768px){
	.teacher-intro .teacher-intro-thumb{left:50%; top:50px; transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0); -ms-transform:translate(-50%, 0);}
	.teacher-intro .teacher-intro-detail{padding:275px 15px 0 15px;}
}






/* 인사말 */

.intro{padding:0 280px 120px 0;  font-size:16px; color:#111; line-height:1.5; background:url(/assets/img/web/sub/theme/kuh2.jpg) no-repeat right center; text-align:justify;}

.intro strong{display:block; font-size:28px; margin-bottom:10px;}
.intro p{font-size:20px; margin-bottom:50px;}
.intro p mark{background:none; color:#ff7e00;}

.intro > em{font-weight:700;}

@media(max-width:1000px){
	.intro{padding:450px 0 0 0; background:url(/assets/img/web/sub/theme/kuh2.jpg) no-repeat center top; }

	.intro strong{text-align:center; font-size:25px;}
	.intro p{text-align:center; font-size:19px;}
}




/* 오시는길 */
.pcode1501{margin-bottom:50px; border-top:2px solid #9c1662;}
.pcode1501 .wrap_controllers,
.pcode1501 .map_border{display:none;}


.pcode1502{}
.pcode1502 .addr{background:#ececec; text-align:center; font-size:20px; font-weight:700; color:#111; height:80px; line-height:16px;}
.pcode1502 .addr img{display:inline-block; width:30px; padding:5px; border-radius:50px; background:#9c1762; margin-right:10px;}
.pcode1502 ul{display:inline-block; width:100%; border-top:1px solid #ddd; border-left:1px solid #ddd;}
.pcode1502 ul li{float:left; width:33.3333333333%; height:350px; display:inline-block; padding:50px 0; text-align:center; box-sizing:border-box; border-right:1px solid #ddd; border-bottom:1px solid #ddd;}
.pcode1502 ul li > img{display:block; margin:0 auto 15px auto; width:45px; height:45px; padding:15px; border-radius:70px; background:#111;}
.pcode1502 ul li em{display:block; font-size:20px; font-weight:700; margin-bottom:25px;}
.pcode1502 ul li span{display:block; font-size:13px; line-height:1.45;}
.pcode1502 ul li span img{display:inline-block; width:60px;}


.pcode1502 ul li.metro > img{background:#6f99d0;}
.pcode1502 ul li.bus > img{background:#e66a4a;}
.pcode1502 ul li.town > img{background:#42ccc7;}

@media(max-width:768px){
	.pcode1502 .addr{font-size:14px;}
	.pcode1502 .addr img{width:25px;}
	.pcode1502 ul li{float:none; width:100%;}
	.pcode1502 ul li em{font-size:17px;}
}


 
 