@charset "utf-8";
@import url("default.css");

/* LAYOUT */
body {background:#F6F6F6;}
#wrap {max-width:1300px; margin:0 auto; box-sizing:border-box; padding:30px 30px 100px 30px;}

/* #header */
#header {padding:30px 70px 20px 70px; border-bottom:2px solid #555; background:#fff; border-radius:7px; border:1px solid #ccc; border-top:20px solid #313155; box-shadow:0px 2px 3px rgba(0,0,0,0.1);}
#header h1 {padding:00px 0 40px 0; text-align:center; font-size:30px; font-weight:500; color:#222;}
#header .table th {text-align:; padding-bottom:20px; vertical-align:top; width:100px; color:#222; font-weight:500;}
#header .table td {padding:0px 12px 20px 12px; color:#777;}
#header .table td span {display:block; padding-top:5px; font-size:13px;}


/* 하단 고정 */
.bottomFixArea {position:fixed; bottom:0;  left:0px; right:0px; z-index:100; transition:all 0.2s;}
.bottomFixArea ul {max-width:1300px; margin:0 auto; transition:all 0.2s;}
.bottomFixArea ul:after {content:""; display:block; height:0; visibility:hidden; clear:both;}
.bottomFixArea ul li {float:left; width:100%;}
.bottomFixArea ul li a {display:block; height:54px; line-height:54px; background:#ee0000; color:#fff; font-size:18px; text-align:center; transition:all 0.2s; font-weight:500; box-sizing:border-box; position:relative;}
.bottomFixArea ul li a:hover {box-shadow: 0px 0px 12px rgba(0,0,0,0.5); z-index:3; transform: scale(1.05); transform-origin :center bottom }
.bottomFixArea ul li a span.bul_1 {position:relative; padding-right:20px;}
.bottomFixArea ul li a span.bul_1:after {content:"▶"; font-size:8px; position:absolute; top:11px; right:0; line-height:1;}
.bottomFixArea ul li a.bgGr {background:#777;}
.bottomFixArea.size_2 ul li {width:50%;}
.bottomFixArea.size_3 ul li {width:33.33%;}
.bottomFixArea.size_3 ul li:nth-child(2) {width:33.34%;}
.bottomFixArea .testGuideTable {max-width:1300px; margin:0 auto; transition:all 0.2s;}

/* 본문 */
#container .inner {padding:50px 70px; background:#fff; margin-top:40px; box-shadow:0px 2px 3px rgba(0,0,0,0.1); border-radius:7px; border:1px solid #ccc;}
h3.essential {color:#313155; font-size:22px; font-weight:400; padding-bottom:15px; border-bottom:1px solid #313155; margin-bottom:15px;}
h3.essential span {display:block; font-size:15px; color:#222; padding-top:7px;}

@media only all and (max-width:1000px) {
#header {padding:30px 40px 20px 40px;}
#container .inner {padding:40px 40px;}
#header h1 span {display:block;}
}

@media only all and (max-width:700px) {
#wrap {padding:20px 10px 100px 10px;}
#container .inner {padding:15px 15px;margin-top:20px;}
h3.essential {color:#e60039; font-size:22px; font-weight:400; padding-bottom:10px;}
#header {padding:20px 15px 10px 15px;}
#header h1 {font-size:24px;}
#header .table th {text-align:left; width:80px;}
}



/* 테이블 */
.tableStyle th {height:45px; color:#111; font-size:20px; font-weight:300; width:180px; padding:10px 0;}
.tableStyle td {height:45px; font-size:20px; font-weight:300; color:#777; padding:10px 0;}
.tableStyle .essential {color:#e60039; margin-left:7px;}
.tableStyle .thEx {display:block; font-size:12px; padding-top:5px; font-weight:300;}
.tableStyle input[type="text"], .tableStyle select {font-weight:300; width:300px;}
.tableStyle input[type="text"].tel {width:88px; text-align:center;}
.tableStyle .birthday select {width:115px; margin-right:5px;}
.tableStyle .birthday input[type="text"] {width:180px;}
.tableStyle .ex {font-size:13px; color:#999; padding-bottom:4px; line-height:1.4; font-weight:300;}
.tableStyle .ex span {display:block;}
.tableStyle .recommender select {width:200px;}
.tableStyle .recommender input[type="text"] {width:300px;}
.tableStyle .post input[type="text"] {width:300px;}
.tableStyle .checkArea li {padding-bottom:7px;}
.tableStyle .checkArea li:last-child {padding-bottom:0;}
.tableStyle .checkArea li.checkNinput {position:relative; padding-left:65px; margin-top:-2px;}
.tableStyle .checkArea li.checkNinput label {position:absolute; top:7px; left:0;}
.tableStyle .checkArea li.checkNinput input[type="text"] {width:100%; height:36px;}
.tableStyle dl {padding-bottom:25px;}
.tableStyle dl:last-child {padding-bottom:0;}
.tableStyle dt {color:#111; font-size:20px; font-weight:300; padding:10px 0;}
.tableStyle dd th {height:auto; width:auto; border:1px solid #e8e8e8; padding:10px ;}
.tableStyle dd td {height:auto; width:auto; border:1px solid #e8e8e8; padding:10px;}
.tableStyle dd thead th { font-size:15px; font-weight:500;}
.tableStyle dd tbody th { font-size:13px; font-weight:500;}
.tableStyle dd th:nth-child(2) {width:100px;}
.tableStyle dd th:nth-child(3) {width:100px;}
.tableStyle dd th:nth-child(4) {width:100px;}

@media only all and (max-width:1000px) {
.tableStyle input[type="text"], .tableStyle select {width:100%;}
.tableStyle .recommender select {width:150px;}
.tableStyle .recommender input[type="text"] {width:150px;}
}

@media only all and (max-width:700px) {
h3.h3TitTxt {font-size:18px;}
.clauseBox {font-size:12px;}
.tableStyle th {font-size:14px; width:105px; padding:6px 0; letter-spacing:-0.5px; font-weight:500;}
.tableStyle dt {font-size:14px; etter-spacing:-0.5px; font-weight:500;}
.tableStyle td {font-size:14px; padding:6px 0;}
.tableStyle .birthday select {width:100%;}
.tableStyle .birthday input[type="text"] {width:100%;}
.tableStyle .birthday span {display:block; margin-bottom:3px;}
.tableStyle .recommender span {display:block; margin-bottom:3px; display:flex;}
.tableStyle .recommender span select {flex:1; margin-right:5px;}
.tableStyle .recommender span select:last-child {margin-right:0;}
.tableStyle .recommender input[type="text"] {width:100%;}
.tableStyle .post div {position:relative; padding-right:55px;}
.tableStyle .post input[type="text"] {width:100%; text-align:center;}
.tableStyle .post a {position:absolute; top:0; right:0;}
.tableStyle input[type="text"].tel {width:60px; padding:0;}
.tableStyle dd th:nth-child(2) {width:50px;}
.tableStyle dd th:nth-child(3) {width:50px;}
.tableStyle dd th:nth-child(4) {width:50px;}
}


/* 약관 */
.clauseBox { border:1px solid #e3e3e3; line-height:1.7; padding:50px 70px 40px 70px; color:#555; font-weight:300; background:#f8f9fa; margin-top:40px; box-shadow:0px 2px 3px rgba(0,0,0,0.1); border-radius:7px; border:1px solid #ccc;}
.clauseBox .in {background:#fff; border:1px solid #ccc; padding:25px 30px; overflow:auto; height:300px; box-sizing:border-box;}
.clauseBox .in:after {content:""; display:block; height:20px;}
.clauseBox h3 {color:#222; padding-bottom:20px; font-weight:500; font-size:22px; line-height:1;}
.clauseBox .clauseCheck {margin-bottom:0; margin-top:20px;}
.clauseBox h4 {color:#222; font-size:17px; font-weight:500;}
.clauseBox .div {padding-bottom:34px;}
.clauseBox p {padding-top:12px;}
.clauseBox ul {padding-top:12px;}
.clauseBox ol {padding-left:1em;}
.clauseBox strong {color:#222; font-weight:700;}
.clauseBox .table th, .clauseBox .table td {height:40px; border:1px solid #e2ded7; text-align:center; color:#333;}
.clauseBox .table thead th {background:#f3f1ee; border-top:2px solid #555; font-weight:700;}
.clauseBox .table tbody th {background:#f7fafb; color:#222;}
.clauseBox .table th:first-child {border-left:none;}
.clauseBox .table td:last-child {border-right:none;}
.clauseBox .table th:last-child {border-right:none;}
@media only all and (max-width:1000px) {
.clauseBox {padding:30px 40px 25px 30px;}
}
@media only all and (max-width:700px) {
.clauseBox {font-size:12px; padding:20px 15px; margin-top:20px;}
.clauseBox .in {padding:15px 20px; height:240px;}
.clauseBox h3 {font-size:20px;}
.clauseBox h4 {font-size:16px;}
.clauseBox .div {padding-bottom:24px;}
.clauseBox .clauseCheck .txt {font-size:13px !important; letter-spacing:-0.5px; font-weight:500;}
}


#dongTanEx {border-radius:7px; overflow:hidden; margin-bottom:40px; box-shadow:0px 2px 3px rgb(0 0 0 / 10%)}



/*** LAYER COMMON ***/
body.activeHidden {height:100vh; min-height:100vh; position:relative; overflow:hidden !important; touch-action:none;}
body.activeHidden2 {height:100vh; min-height:100vh; position:relative; overflow:hidden !important; touch-action:none;}
body.activeHidden3 {height:100vh; min-height:100vh; position:relative; overflow:hidden !important; touch-action:none;}
#layerPopDepth_2 {z-index:10002; background:rgba(0,0,0,0.4);}
.layerWrap {position:fixed; top:0; left:0; width:100%; height:100%; z-index:10000; display:flex; overflow:auto; flex-wrap:wrap; background:rgba(0,0,0,0.5);}
.layerWrap.hide {display:none;}
.layerWrap.active {display:flex;}
.layerWrap > div {margin:auto; padding:50px;}
.layerWrap > div.wFull {padding:0; width:100%; height:100%;}
.layerWrap > div.wFull > section {height:100%; border-radius:0px;}
.layerWrap > div > section {background:#fff; padding:45px 60px 60px 60px; box-sizing:border-box; animation: layerClose .5s forwards; border-radius:12px;}
.layerWrap.active > div > section {animation: layerOpen .5s forwards;}
.layerWrap > div.fix {flex-shrink:0;} /* 넓이 고정일시 flex:0 0 auto; */
.layerWrap > div.layerTest_1 {width:1000px;} /* 최소 넓이 일시 */
.layerWrap > div.layerTest_2 {flex-shrink:0; width:700px;} /* 넓이 고정일시 flex:0 0 auto; */
.layerWrap > div.layerTest_3 {width:100%;}/* 꽉찬 화면 */

/* 레이어 상단 */
.layerWrap header {border-bottom:1px solid #dadada; position:relative;}
.layerWrap header h2 {font-size:2.0em; font-weight:700; margin-bottom:0.7em; padding-right:50px; color:#333;}
.layerWrap header h2 .em {font-weight:300;}
.layerWrap header .btnLayerClose {position:absolute; top:0; right:0; height:2.6em; width:2.6em; margin-top:0.3em; text-indent:-9999px;}
.layerWrap header .btnLayerClose:after {content:""; position:absolute; top:50%; margin-top:-2px; left:0px; right:0px; height:4px; background:#222; transform:rotate(45deg); border-radius:99px;}
.layerWrap header .btnLayerClose:before {content:""; position:absolute; top:50%; margin-top:-2px; left:0px; right:0px; height:4px; background:#222; transform:rotate(-45deg); border-radius:99px;}
.layerWrap main {padding-top:2.4em; padding-bottom:0;}
@keyframes layerOpen {
	0% {transform:scale(0.8); display:flex; opacity:0.5;}
	100% {transform:scale(1); opacity:1;}
}
@keyframes layerClose {
	0% {transform:scale(1.0);}
	100% {transform:scale(0.9);}
}
@media only all and (max-width:1024px) {
	.layerWrap > div > section {padding:40px 50px 50px 50px; border-radius:10px;}
	.layerWrap > div {padding:40px;}
	.layerWrap > div.tFull {padding:0; width:100%; height:100%;}
	.layerWrap > div.tFull > section {height:100%; padding:0; display:flex; flex-direction:column; border-radius:0px;}
	.layerWrap > div.tFull > section header {margin:20px 20px 0 20px; width:auto;}
	.layerWrap > div.tFull > section main {padding:20px; flex:1; overflow:auto;}
}
@media only all and (max-width:760px) {
	.layerWrap > div {padding:20px;}
	.layerWrap > div > section {padding:20px 20px 30px 20px; border-radius:7px;}
	.layerWrap > div > section main {padding-top:20px;}
	.layerWrap > div.mFull {padding:0; width:100%; height:100%; }
	.layerWrap > div.mFull > section {height:100%; padding:0; display:flex; flex-direction:column; border-radius:0px;}
	.layerWrap > div.mFull > section header {margin:20px 20px 0 20px; width:auto;}
	.layerWrap > div.mFull > section main {padding:20px; flex:1; overflow:auto;}
	.layerWrap header h2 {font-size:1.7em;}
	.layerWrap header .btnLayerClose {width:2em; height:2em;}
}

/* 학교 검색 */
.schoolSearch {width:1000px; font-size:16px;}
.schoolSearch .search {height:3.2em; display:flex; align-items:stretch; font-size:1.25em; margin-bottom:1.2em;}
.schoolSearch .search input {flex-grow: 1; height:100%; border-radius:5px 0 0 5px; box-shadow:none; font-size:1.2em; width:100%;}
.schoolSearch .search a {display:flex; align-items:center; justify-content: center; flex-shrink: 0; width:7em; background:#555; color:#fff; border-radius:0 5px 5px 0;}
.schoolSearch .search a:hover {background:#171833; color:#eee;}
.schoolSearch .table tbody tr {cursor:pointer;}
.schoolSearch .table tbody tr:hover {background:#f5f5fa;}
.schoolSearch .table tbody tr:last-child td {border-bottom:none;}
.schoolSearch .table th {height:4em; background:#eee;; text-align:center; font-size:1.1em; font-weight:300; color:#999;}
.schoolSearch .table td {text-align:center; font-size:1.1em; height:4em; border-bottom:1px solid #ececec; font-weight:300; padding:0 3px;}
.schoolSearch .table th:nth-child(1) {width:90px;}
.schoolSearch .table td:nth-child(1) {width:90px;}
.schoolSearch .table th:nth-child(2) {width:240px;}
.schoolSearch .table td:nth-child(2) {width:240px;}
.schoolSearch .table td:nth-child(3) {text-align:left;}
.schoolSearch .table.tbody {height:22em; overflow:auto; border-bottom:1px solid #ececec;}
.schoolSearch .btnArea {margin-top:2.50em;}
.schoolSearch .btnArea a {background:#d3d3d3; border-radius:5px; display:flex; align-items: center; justify-content: center; width:100%; color:#fff; font-weight:500; height:3.556em; font-size:1.125em;}
.schoolSearch .btnArea a:hover {background:#ccc;}
@media only all and (max-width:1024px) {
	.schoolSearch {width:1000px; font-size:14px;}
	.schoolSearch .table.tbody {height:304px;}
	.schoolSearch .table th:nth-child(1) {display:none;}
	.schoolSearch .table td:nth-child(1) {display:none;}
}

@media only all and (max-width:760px) {
		.schoolSearch {width:1000px; font-size:13px;}
	.schoolSearch main {display:flex; flex-direction:column; padding:0 !important; padding-right:0; padding-bottom:0;}
	.schoolSearch main .btnArea {margin-top:auto;}
	.schoolSearch main .btnArea a {border-radius:0;}
	.schoolSearch main .table.tbody {flex:1; border-bottom:none;}
	.schoolSearch main .table {padding:0 20px;}
	.schoolSearch .search {height:3.4em;font-size:1.1em; padding:20px;}
	.schoolSearch .search input {font-size:1.1em;}
	.schoolSearch .table th {font-size:1em; height:50px;}
	.schoolSearch .table td {font-size:0.9em}
	.schoolSearch .table th:nth-child(2) {width:130px;}
	.schoolSearch .table td:nth-child(2) {width:130px;}
	.schoolSearch .table tbody tr:last-child td {border-bottom:1px solid #ececec;}
}

/*
Live최선 운영 및 유지보수

*/