@import url("layout.css");
/*-------------------------------------------------
Author : SY,CHo
Create date : 2019. 05. 29. 서브레이아웃 및 가이드
-------------------------------------------------*/

#contents {padding: 1rem; line-height: 1.6;}

.h1 {margin: 4rem; text-align: center; font-size: 1.85rem; font-weight: 700; color: #000;}
.h2 {position: relative; margin: 1rem 0 0.5rem; padding-left: 1rem; font-size: 0.95rem; font-weight: 400; color: #333;}
.h2:before {position: absolute; top: 2px; left: 0; font-family: 'xeicon'; font-weight: 900; color: #2b438b; content:"\e91c";}
.h3 {position: relative; margin: 0.75rem 0 0.5rem; padding-left: 1rem; font-size: 0.9rem; font-weight: 400; color: #333;}
.h3:before {position: absolute; top: 10px; left: 0; width: 7px; height: 7px; background-color: #e73079; content: "";}

/* 박스 */
.box {padding: 2.5rem; border: 1px solid #e7e7e7;}

/* 포인트, 강조 */
.point01 {color: #c92e72;}

.box.scroll-box {padding: 1.5rem; height: 150px;margin-bottom: 1em;}

/* 리스트 스타일 */
.list-style:after {clear: both; display: block; content: "";}
.list-style > li {position: relative; padding-left: 15px; color: #666; overflow: hidden;}
.list-style > li + li {margin-top: 0.5rem;}

.list-style.dot > li:before {position: absolute; top: 9px; left: 0; width: 6px; height: 6px; background-color: #767676; border-radius: 50%; content: "";}

/* 신청단계 */
.step {margin-bottom: 2rem; overflow: hidden;}
.step > li {float: left; display: inline-block; padding: 12px; width: 32%; height: 70px; font-size: 0.9rem; color: #c9c9c9; border: 1px solid #e7e7e7; border-radius: 35px;}
.step > li + li {margin-left: 2%;}
.step > li > i {display: inline-block; margin-right: 30px; width: 46px; height: 46px; line-height: 46px; text-align: center; vertical-align: middle; font-size: 1rem; color: #c8c8c8; background-color: #f3f3f3; border-radius: 50%; overflow: hidden;}
.step > li > span {margin-right: 10px; color: #989898;}
/* active */
.step > li.active {position: relative; color: #252a2d;}
.step > li.active:before {position: absolute; top: 35px; right: -7%; width: 20%; height: 1px; background-color: #c10d1b; content: "";}
.step > li:nth-of-type(3).active:before {display: none;}
.step > li.active > i {color: #fff; background-color: #c92e72;}
.step > li.active > span {color: #c92e72;}

/* 상담신청 */
.box.select-element {padding: 0; border: 3px solid #2b438b; overflow: hidden;}
.box.select-element > .inner-box {float: left; width: 50%; border-right: 1px solid #d6d6d6;}
.box.select-element > .inner-box h2 {padding: 0.75rem; text-align: center; font-size: 0.8rem; color: #000; background-color: #f7f8fa;}
.box.select-element > .inner-box > .box {padding: 1.5rem; height: 350px; border: none;}

.calendar-wrap .month {position: relative; font-size: 1.05rem;}
.calendar-wrap .month span {display: inline-block; margin: 0 2.5rem 1.25rem; color: #222;}
.calendar-wrap .month a {position: absolute; top: 3px; display: inline-block; width: 30px; height: 30px; line-height: 30px;}
.calendar-wrap .month i {line-height: inherit; color: #b1b3ba;}
.calendar-wrap .month a.prev {left: 0;}
.calendar-wrap .month a.next {right: 0;}
.calendar-wrap table {width: 100%; border-collapse: collapse;}
.calendar-wrap table th,
.calendar-wrap table td {height: 30px; font-weight: normal; color: #333;}
.calendar-wrap table td.sat {color: #116eb4;}
.calendar-wrap table td.sun {color: #cb152b;}
.calendar-wrap table a {display: inline-block; padding: 0.15rem; width: 100%; text-align: center;}
.calendar-wrap table a.active,
.calendar-wrap table a:hover {color: #fff; background-color: #333; border-radius: 3px;}

.list-style-link:after {clear: both; display: block; content: "";}
.list-style-link > li > a {position: relative; display: block; padding: 0.25rem 1.75rem; color: #666; overflow: hidden;}
.list-style-link > li > a:before {position: absolute; top: 14px; left: 1rem; width: 6px; height: 6px; background-color: #767676; border-radius: 50%; content: "";}
.list-style-link > li > a.active,
.list-style-link > li > a:hover {color: #fff; background-color: #333; border-radius: 3px;}

.inner-box.time .list-style.dot > li {float: left; width: 50%;}
.inner-box.time .list-style.dot > li > ul {margin-top: 0.25rem; /*overflow: hidden;*/}
.inner-box.time .list-style.dot > li > ul > li {float: left; width: 23%;}
.inner-box.time .list-style.dot > li > ul > li + li {margin-left: 2%;}
.inner-box.time .list-style.dot > li > ul > li > a {display: block; height: 28px; line-height: 26px; text-align: center; font-size: 0.7rem; background-color: #fff; border: 1px solid #999;}
.inner-box.time .list-style.dot > li > ul > li > a.active,
.inner-box.time .list-style.dot > li > ul > li > a:hover {color: #fff; background-color: #333; border: 1px solid #333;}

.inner-box.time .list-style.dot > li > ul > li > a.isDisabled {cursor: not-allowed; background: url('../../images/korean/sub/x.png') no-repeat center center; background-color: #cfcfcf !important; background-size: 100% 100%; overflow: hidden;}


.table.write-form input[type=text] {float: none;}
.table.write-form #daumbutton_1,
.table.write-form #daumzipcode_1 { vertical-align: middle; }
.table.write-form #daumbutton_1 { border-right: 0; border-radius:0; height:38px; }
.table.write-form #daumzipcode_1 { width:calc(100% - 45px) !important; text-indent: 0; }
.table.write-form #daumaddress_1,
.table.write-form #address2 { width:100% !important; }
.table.write-form .chk_td label { display:inline-block; width:calc(50% - 4px); margin-top: 5px; padding: 7px 10px; box-sizing:border-box; background:#fafafa; }
.table.write-form .chk_td label:first-child { margin-top: 0; }
.table.write-form .chk_td input[type="checkbox"],
.table.write-form .chk_td span { vertical-align: middle; width:50%; }
.table.write-form .chk_td input[type="checkbox"] { width:20px; height:20px; margin-right: 10px; }
.table.write-form .chk_td #route_etc { margin-top: 10px; }
.table.write-form .chk_td span {  }
td textarea { margin-bottom: 0 !important; }


/* 신청완료 */
.box.complete {display: flex; padding: 4rem; height: 340px; align-items: center; background: url('../../images/korean/sub/box_complete.gif') no-repeat top right;}
.box.complete .float-left + .float-left {margin-left: 4rem;}
.box.complete p strong {display: block; margin-top: 0.5rem; font-size: 1.35rem; color: #333;}
.box.complete .list-style.dot > li > span + span {margin-left: 0.5rem;}

.complete_wrap { text-align: center; }
.complete_wrap img { display:inline-block; }
.complete_wrap .txt { font-size:26px; border-top: 1px solid #eaeaea; box-sizing:border-box; padding-top: 50px; color:#000; font-weight: 300; }
.complete_wrap .txt strong { font-weight: 400; }


.btns + .table,
.btns + .box,
.btns + form {margin-top: 0.5rem;}
.box.select-element + .btns {margin-top: 1rem;}

.list-save-time {overflow: hidden;}
.list-save-time > li {position: relative; padding: 0.5rem 1rem; background-color: #f7f8fa; overflow: hidden;}
.list-save-time > li + li {margin-top: 0.5rem; white-space: nowrap;}
.list-save-time > li > span,
.list-save-time > li > strong {float: left; display: inline-block; margin-right: 3rem;}
.popup-contents .list-save-time > li > span,
.popup-contents .list-save-time > li > strong {min-width: 70px;}
.list-save-time > li > strong {font-weight: normal; color: #333;}
.list-save-time > li a {position: absolute; top: 0; width: 70px; height: 100%; text-align: center; font-size: 0.5rem;}
.list-save-time > li a i {margin-top: 0.85rem;}
.list-save-time > li .btn-del {right: 0;}

/* 신청내역확인 */
#popup-layout {position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); z-index: 1;}
.popup-container {position: absolute; top: 50%; left: 50%; width: 100%; max-width: 600px; background-color: #fff; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);}
.popup-container h2 {padding: 0.5rem; text-align: center; font-size: 1rem; font-weight: 400; color: #fff; letter-spacing: -0.03em; background-color: #19a7cb;}
.popup-container h3 {margin: 1rem 0 0.5rem; font-size: 0.8rem; font-weight: 500; color: #333;}
.popup-contents {position: relative; padding: 1.5rem 1rem; height: 100%; max-height: 600px; overflow-y: auto;}
.popup-contents .box {padding: 1rem; background-color: #f7f8fa; overflow: hidden;}
.popup-contents .box label {display: inline-block; line-height: 36px;}
.popup-contents .btns {margin-top: 1.5rem;}
.popup-contents .name {padding: 0.5rem; text-align: center; color: #333; border: 1px solid #e3e6e8;}
.popup-contents .list-save-time > li {padding-right: 7rem;}
.popup-contents .list-save-time._req_ul > li {padding-right: 1rem;}
.popup-contents .list-save-time > li > span,
.popup-contents .list-save-time > li > strong {margin-right: 1.25rem; line-height: 1.5;}
.popup-contents .list-save-time > li a {font-size: 0.65rem;}
.popup-contents .list-save-time > li a i {margin-top: 0.8rem; margin-right: 5px;}
.popup-contents .list-save-time > li .btn-del {color: #c72c2c;}
.popup-contents .list-save-time > li .btn-alarm {right: 70px; color: #2b438b;}
.popup-contents .change-time {position: absolute; top: 0; left: 0; display: none; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7);}
.popup-contents .change-time .inner-box {position: absolute; top: 50%; left: 50%; padding: 1rem; width: 100%; max-width: 280px; height: 300px; background-color: #fff; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);}
.popup-contents .change-time .inner-box h3 {margin-top: 0;}
.popup-contents .change-time .inner-box .btn-close {position: absolute; top: 0; right: 0; width: 50px; height: 50px; line-height: 50px; text-align: center;}
.popup-contents .change-time .inner-box .list-outer {height: 220px;}
.popup-contents p + .box,
.popup-contents p + form {margin-top: 1.5rem;}

#popup-info {}
#popup-detail {display: none;}

/* 대기자 접수 */
.inner-box.time {position: relative;}
.inner-box.time #popup-layout {position: absolute; display: block; background-color: rgba(255,255,255,0.4);}
.inner-box.time #popup-layout .popup-container {padding: 35px; max-width: 360px; border: 1px solid #333;}
.inner-box.time #popup-layout h2 {margin-bottom: 0.5rem; padding: 0; text-align: left; font-size: 1rem; background-color: inherit;}
.inner-box.time #popup-layout .popup-contents {padding: 0;}



@media screen and (max-width: 1024px){
	.h1 {margin: 2rem;}

	/* 신청단계 */
	.step {margin-bottom: 2rem; overflow: hidden;}
	.step > li {padding: 6px; height: 50px; border-radius: 25px;}
	.step > li > i {width: 36px; height: 36px; line-height: 36px;}
	/* active */
	.step > li.active:before {top: 25px;}
	


	/* 상담신청 */
	.box.select-element > .inner-box {width: 50%;}
	.box.select-element > .inner-box > .box {padding: 1rem; height: 330px;}
	.list-style-link > li > a:before {top: 12px;}

	/* 신청완료 */
	.box.complete .float-left {padding: 1rem; background-color: rgba(255,255,255,0.7); border-radius: 10px;}
}

@media screen and (max-width: 800px) {
}

@media screen and (max-width: 768px) {
	html {font-size: 16px;}

	/* 신청단계 */
	.step > li {width: 100%;}
	.step > li + li {margin-top: 1rem; margin-left: 0;}
	/* active */
	.step > li.active:before {display: none;top: auto; bottom: -1rem; left: 50%; width: 1px; height: 2rem;}
	.save-form textarea { margin-bottom: 20px; }
	.table.write-form { margin-top: 15px; }
	.table.write-form tr,
	.table.write-form th,
	.table.write-form td {display: block; height:auto !important; }
	.table.write-form td { display:inline-block; width:100%; }
	

	/* 신청완료 */
	.box.complete {display: block; padding: 1rem; height: auto; background-size: auto 100%;}
	.box.complete .float-left {float: none;}
	.box.complete .float-left + .float-left {margin-top: 1rem; margin-left: 0;}

	/* 신청내역확인 */
	.popup-contents .list-save-time > li {padding-right: 100px;}
}

@media screen and (max-width: 600px) {
	.table.write-form .chk_td label { width:100%; }

	/* 상담신청 */
	.box.select-element > .inner-box {width: 100%;}
	.box.select-element > .inner-box > .box {height: 300px;}
}

@media screen and (max-width: 414px) {
	.h1 {font-size: 1.5rem;}
}

/* 명찰출력페이지 */
.print-layout .h1 {margin: 0;}
.print-layout .table table + table {margin-top: 1rem;}
.print-layout .write-form {margin: 2.5rem 0 1.5rem; text-align: center;}
.print-layout .write-form label {font-size: 1rem; font-weight: 500; color: #000;}
.print-layout .write-form input[type="text"] {margin: 0 0.5rem 0 1.5rem; width: 50%; height: 50px; line-height: 48px;}
.print-layout .table table + table td {text-align: left;}
.print-layout .table table + table tr td:first-child {text-align: center;}