@charset "utf-8";

#halfWrap {display:flex; flex-wrap:wrap}
#halfWrap #titWrap {width:calc(400px - 5%); margin-right:5%;}
#halfWrap #titWrap .eng { margin-bottom:2em; display:inline-block; padding:0.7em 2em; background:#82ce39;
								border:6px solid #d5f4b7; border-radius:100px; font-weight:700; color:#FFF }
#halfWrap #titWrap .month { margin-bottom:1em; display:inline-block; padding:0.5em 1em; background:#82ce39;
								font-size:2.0rem; border:6px solid #d5f4b7; border-radius:100px; font-weight:700; color:#FFF }
#halfWrap #titWrap .month.bg2 {  background:#0a743c; border-color: #bce6c0; }
#halfWrap #titWrap h3 {font-size: 4.0rem; font-weight:700; color:#222; line-height:1.2em}
#halfWrap #titWrap h4 {margin:2em 0 0.7em; font-size:2.4rem; color:#222}
#halfWrap #titWrap .time { padding:1.5em 2em; background:#f9f9f9; border-radius:10px; 	width:fit-content;
								display:flex; flex-wrap:wrap }
#halfWrap #titWrap .t1 {margin-top:1em; font-size:2.0rem; }
#halfWrap #titWrap .time dt {width:83px; font-size:1.8rem; font-weight: 700; color: #222; line-height:1.6em }
#halfWrap #titWrap .time dd { /* width:calc(100% - 83px); */ font-size:1.8rem; font-weight:500; font-family:'Roboto';  line-height:1.6em}
#halfWrap #titWrap .time.dtdd dd { width:calc(100% - 83px);} 
#halfWrap #contWrap {width:calc(100% - 400px);}
#halfWrap #contWrap .img img {width:100%}
#halfWrap #contWrap p.t1 {margin-top:1em; opacity:.8}
#halfWrap #contWrap p.t2 {margin-top:0.3em; font-size:1.6rem; opacity:.8}
#halfWrap #contWrap .courseSlick div img {width:100%}

#halfWrap.guide1 {margin-top:4em; }
#halfWrap.guide1 #titWrap {width:calc(300px - 5%); }
#halfWrap.guide1 #contWrap {width:calc(100% - 300px);}
#halfWrap.guide1 br.br1024 {display:none}

#halfWrap.guide3 #titWrap {width:300px; margin-right:0}
#halfWrap.guide3 #contWrap {width:calc(100% - 300px);}


@media all and (max-width:1399px) {
	#halfWrap.guide1 #titWrap {width:calc(240px - 5%); }
	#halfWrap.guide1 #contWrap {width:calc(100% - 240px);}
}
@media all and (max-width:1280px) {
	#halfWrap.course1 #titWrap {width:calc(370px - 5%); }
	#halfWrap.course1 #contWrap {width:calc(100% - 370px);}
	#halfWrap #titWrap .time { padding:1em 1.5em }

	#halfWrap.guide1 #titWrap {width:calc(220px - 5%); }
	#halfWrap.guide1 #contWrap {width:calc(100% - 220px);}
}
@media all and (max-width:1024px) {
	#halfWrap #titWrap {width:100%; margin-right:0; margin-bottom:3em ;}
	#halfWrap #titWrap .eng { margin-bottom:1em; padding:0.5em 1em; }
	#halfWrap #titWrap h3 br {display:none}
	#halfWrap #titWrap h4 {margin:1.2em 0 0.5em;}
	#halfWrap #titWrap .time { padding:0.7em 1em}
	
	#halfWrap #contWrap {width:100%;}

	#halfWrap.course1 #titWrap {width:100%; margin-right:0 }
	#halfWrap.course1 #contWrap {width:100%;}

	#halfWrap.guide1 #titWrap {width:100%; margin-right:0; margin-bottom:1em ; }
	#halfWrap.guide1 #contWrap {width:100%;}
	#halfWrap.guide1 br.br1024 {display:block}
	#halfWrap.guide1 br.br580 {display:block}

	#halfWrap.guide2 #titWrap {margin-bottom:1em ; }

	#halfWrap.guide3 #titWrap {width:100%; margin-bottom:1em ;}
	#halfWrap.guide3 #contWrap {width:100%;}
}
@media all and (max-width:480px) {
	#halfWrap #titWrap h3 {font-size: 3.6rem; }
	#halfWrap #titWrap h4 img {width:6vw}
}





#dl-Table {margin-top:1em}
#dl-Table dl {display:table; width:100%;  }
#dl-Table dl dt,
#dl-Table dl dd { display:table-cell; vertical-align:middle; padding:1.3em 1em }
#dl-Table dl dt {width:20%; background:#0a743c; font-size:1.8rem; color:#FFF; text-align:center; font-weight:600;
					border-top:1px solid #1f804d}
#dl-Table dl dd {width:80%; font-size:1.8rem;; border-top:1px solid #d4dada; padding-left:2em}
#dl-Table dl:last-child dd { border-bottom:1px solid #d4dada }
#dl-Table dl dd  p {padding-bottom:0.5em;}
#dl-Table dl dd  p.st1 { font-size:1.6rem; }

#dl-Table.guide1 dl dt  {background: #5bb531; border-top:1px solid #61be35}
@media all and (max-width:1280px) {
	#dl-Table dl dt,
	#dl-Table dl dd { padding:1em }
}
@media all and (max-width:640px) {
	#dl-Table dl dt,
	#dl-Table dl dd {display:block;}
	#dl-Table dl dt {width:100%;}
	#dl-Table dl dd {width:100%;}
}




#sMap .root_daum_roughmap .wrap_controllers {display:none}
#sMap .root_daum_roughmap .wrap_map { height: 580px !important;}

@media all and (max-width:1024px) {
	#sMap .root_daum_roughmap .wrap_map { height: 480px !important;}
}
@media all and (max-width:767px) {
	#sMap .root_daum_roughmap .wrap_map { height: 400px !important;}
}






#intro2 { text-align:center}
#intro2 h3 {display:inline-block; width:255px; padding:1em 0; font-size:2.2rem; background:#0a743c; color:#FFF; 
				font-weight:500;  position:relative }
#intro2 h3:before {content:''; width:1px; height:30px; background:#e9e9e9;
										position:absolute; left:50%; bottom:-30px; }
#intro2 #part ul {display:flex; margin-top:60px; position:relative }
#intro2 #part ul li {width:25%;  position:relative }
#intro2 #part ul li:before {content:''; width:1px; height:30px; background:#e9e9e9;
										position:absolute; left:50%; top:-30px;}
#intro2 #part ul li .cont {background:#f9f9f9; width:100%; margin:0 auto }
#intro2 #part ul .cont  p {font-size:1.8rem;; padding:1em; border-bottom:1px solid #f3f3f3;}

#intro2 #part.part2 h3 {width:220px; background:#5bb531 }
#intro2 #part.part2 ul:before {content:''; width:50%; height:1px; border-top:1px  solid #e9e9e9; 
									position:absolute; left:50%; top:-30px; transform:translateX(-50%)}
#intro2 #part.part2 ul li {width:50%; }

#intro2 #part.part3 h3 {width:100%; background:#3f3f3f}
#intro2 #part.part3 h3:before {display:none}
#intro2 #part.part3 ul { justify-content:space-between; }
#intro2 #part.part3 ul:before {content:''; width:75%; height:1px; border-top:1px  solid #e9e9e9; 
									position:absolute; left:50%; top:-30px; transform:translateX(-50%)}
#intro2 #part.part3 ul li {width:23%; margin: 0 1%}

#intro2 #part.part3 .mo {display:none}

@media all and (max-width:976px) {
	#intro2 h3 { padding:0.8em 0; font-size:2.0rem; }
	#intro2 #part ul .cont  p {font-size:1.7rem}
}
@media all and (max-width:680px) {
	#intro2 #part.part2 h3 {width:96%; }

	#intro2 #part.part3 ul {flex-wrap:wrap; margin-top:25px}
	#intro2 #part.part3 ul:before {display:none}
	#intro2 #part.part3 ul li  {width:48%; margin:1%;}
	#intro2 #part.part3 ul li:before {display:none}
	#intro2 #part.part3 ul.pc {display:none}
	#intro2 #part.part3 .mo {display:block}
	#intro2 #part.part3 .mo li h3:nth-child(2) {margin-top:0.5em; }
	
}







#intro3info { padding:4%;  background:#0a743c ; }
#intro3info h3 {margin-bottom:0.7em; font-size:3.2rem; color:#FFF; font-weight:normal; font-weight:700}
#intro3info ul {display:flex; gap:40px;}
#intro3info ul li {font-size:2.0rem; font-weight:600; color:#d4e543}
#intro3info ul li i {padding-right:7px;}
#intro3info ul li span {padding-left:1em; color:#FFF;  font-size:1.8rem; }

@media all and (max-width:1030px) {
	#intro3info ul { gap:20px;}
	#intro3info ul li span {padding-left:0.5em;} 
}
@media all and (max-width:910px) {
	#intro3info ul { gap:20px; flex-wrap:wrap}
	#intro3info ul li {width:calc(50% - 20px)}
	#intro3info ul li:first-child {width:100%}
}
@media all and (max-width:580px) {
	#intro3info { padding:2.5em }
	#intro3info ul { gap:10px 0; }
	#intro3info ul li {width:100%}
	#intro3info h3 .eng {margin-top:1em; display:block }
}
@media all and (max-width:480px) {
	#intro3info { padding:2em }
	#intro3info h3 {font-size:2.5rem}
}





.terms { border: 10px solid #f4fcf3; padding: 4%; max-width: 1600px; line-height: 1.7em; }
.terms h3 { font-size: 2.4rem; color:#212121; }
.terms h4 { font-size: 2rem; color:#212121; margin: 2em 0 0.5em; }
.terms p + p { margin-top: 1em; }
.terms p + h3 { margin-top: 2.5em; }

@media all and (max-width:480px) {
	.terms { border-width: 7px }
}





#intro1 {text-align:center}
#intro1 .bg {width:100%; height:470px; background:url('/images/sub/intro1-img.png') no-repeat right top; }
#intro1 h3 {margin:1em 0; font-size: 4.2rem; color:#222; font-weight:200 }
#intro1 .t1 {margin-bottom:2em; font-size:1.8rem; line-height:1.6em}
#intro1 .name {font-size:2.2rem; color:#222; font-weight:500; }
#intro1 .name .sign {padding-left:0.3em; font-size:3.2rem; font-family: 'KyoboHandwriting2020A';}

@media all and (max-width:1024px) {
	#intro1 .bg {height: 43vw; background-size:auto 100%}
}



.guideSlick div {position:relative}
.guideSlick div img {width:100%}
.guideSlick div .txt {padding:0.7em 2.5em; position:absolute; left:0; top:0; opacity:1;
						font-size:2.2rem; background:#0a743c ; color:#FFF; border-bottom-right-radius:20px}

@media all and (max-width:976px) {
	.guideSlick div .txt {font-size:1.8rem; padding:0.7em 1.5em}
}





#tb-style1{width: 100%; text-align: center; }
#tb-style1 thead tr th{padding: 0.8em 1em; background-color: #5bb531; border-right: 1px solid #61be35; 
						font-size:2.0rem; color:#FFF; font-weight: 500;  }
#tb-style1 thead tr th.bg{background-color: #0a743c; border-right: 1px solid #1f804d}
#tb-style1 thead tr th:last-child{border-right: 0;}
#tb-style1 tbody tr th{background-color: #f5f5f3;  color: #000; font-weight: 500;border-bottom: 1px solid #dedede; border-right: 1px solid #eee;}
#tb-style1 tbody tr td{padding: 12px 6px; border-bottom: 1px solid #dedede; border-right: 1px solid #eee;}
#tb-style1 tbody tr td.bg{background-color: #f6f7fa; color: #212121; font-weight: 500;}
#tb-style1 tbody tr td:last-child{border-right: 0;}
#tb-style1 tbody tr td.bdl{border-left:1px solid #eee;}

#tb-style1.guide3 tbody tr th { font-family:'Roboto'; font-weight:400}
/* @media all and (max-width:786px){
	.scroll table {min-width: 768px;} 
	.scroll{overflow-x: scroll;}
} */ 

@media all and (max-width:480px){
	#tb-style1 thead tr th {font-size:1.8rem}
	#tb-style1 tbody tr th,
	#tb-style1 tbody tr td {font-size:1.5rem}
}











#dotList {padding-top:1.5em}
#dotList li {position:relative; margin-bottom:0.3em}
#dotList li:before {content:''; width:3px; height:3px; border-radius:4px; background:#555; position:absolute; left:0; top:50%;
					margin-top:-2px;}
#dotList li p {font-size:1.7rem; padding-left:13px;}
#dotList li.lt1 p {margin-bottom:0.5em; font-size:2.0rem; color:#222} 



#theme1  {margin:3em 0 }
#theme1 dl {width:fit-content; margin:1.2em auto 0; display:flex;justify-content:center; }
#theme1 dl dt { width:160px; line-height:35px; font-size:2.2rem; font-weight:700; color:#222}
#theme1 dl dt img {padding-right:15px}
#theme1 dl dd {font-size:1.8rem; }
#theme1 dl dd .dot { font-weight:900; padding:0 0.8em }
#theme1 dl dd br.br640 {display:none}

@media all and (max-width:976px){
	#theme1 dl {flex-wrap:wrap}
	#theme1 dl dt { width:100%; text-align:center}
}
@media all and (max-width:640px){
	#theme1 dl dd {margin-top:1em; text-align:center}
	#theme1 dl dd br.br640 {display:block}
	#theme1 dl dd .dot { padding:0 0.5em }
}


#bd-line { display:flex; flex-wrap:wrap; gap:10px 30px }
#bd-line li {background:#f2f6e9; padding:0.7em 1em; border-radius:30px; position:relative}
#bd-line li:before {content:''; width:11px; height:10px; background:url('/images/sub/theme1-arrow.png') no-repeat left top;
					position:absolute; right:-20px; top:50%; transform:translateY(-50%)}
#bd-line li:last-child::before {display:none}






#reserTit {font-size: 4.0rem; font-weight: 300; color: #222; line-height: 1.2em;}
@media all and (max-width:976px){
	#reserTit  {margin:1.5em 0 0.8em; text-align:center}
}
@media all and (max-width:480px){
	#reserTit  {font-size: 3.5rem; margin:1.5em 0 0}
}


#tb-style {width: 100%; border-top: 2px solid #82ce39 ; font-size: 1.8rem; margin-top: 30px;}
#tb-style tbody tr th,
#tb-style tbody tr td { padding:1.5em  }
#tb-style tbody tr th{width:20%; background-color: #f9f9f9;  color: #000; font-weight: 500;border-bottom: 1px solid #dedede; border-right: 1px solid #eee; text-align: center; }
#tb-style tbody tr td{width:80%; border-bottom: 1px solid #dedede; border-right: 1px solid #eee;}
#tb-style tbody tr td.bg{background-color: #f6f7fa; color: #212121; font-weight: 500;}
#tb-style tbody tr td:last-child{border-right: 0;}

#tb-style tbody tr td input, 
#tb-style tbody tr td select { font-size: 1.7rem; color: #3c4552; border: 1px solid #d2d2d2; border-radius: 5px;   
								padding: 13px 24px; outline: none; text-align: left;   font-family: 'SUIT', sans-serif !important;}

#tb-style tbody tr td .box5 input { max-width: 120px; width: 100%;}
#tb-style tbody tr td .box5_2 input { max-width: 280px; }

#tb-style input[type="radio"], 
#tb-style input[type="checkbox"] { width: auto!important; margin:0;  vertical-align: middle;}
#tb-style input[type="radio"],
#tb-style input[type="checkbox"] {border:none; margin:0; margin-right:5px;}
#tb-style input[type="submit"]  {cursor:pointer;}

#tb-style tbody tr td.cont4 .txt { margin-left:10px; font-size:1.6rem}

#tb-style tbody tr td.cont8 .txt {font-size:2.0rem; font-weight:700; color:#222; margin-bottom:10px; }
#tb-style tbody tr td.cont8 .txt #total_cost {color:#e50000}
#tb-style tbody tr td.cont8 #payW_02 { margin-left: 28px; }
#tb-style tbody tr td.cont10 textarea { width: 100%; height: 200px; border: 1px solid #d2d2d2; border-radius: 5px; 
											resize: none; box-sizing: border-box; padding: 13px 24px; font-size: 1.7rem; color: #3c4552; 
											font-weight: 350; letter-spacing: -0.05em; outline: none;  word-break: keep-all;}

#tb-style .radio-check li { margin:7px 0}
#tb-style .cont5 > div {display:flex; margin-bottom:15px; align-items: center;   }
#tb-style .cont5 > div span {width:130px}
#tb-style .cont5 > div .chk_box {width:220px;padding-left:10px; font-size:1.6rem;}
#tb-style .cont5 div.box5_1 #p2 { margin-left: 25px; }

@media all and (max-width:1180px){
	#tb-style .cont5 > div {flex-wrap:wrap}
	#tb-style .cont5 > div .chk_box {padding-left:130px; width:100%; margin-top:1em; }
}
@media all and (max-width:976px){
	#tb-style tbody tr th{width:100%;display:block; border-bottom:0; border-right:0; padding: 0.8em}
	#tb-style tbody tr td{width:100%; display:block; padding:2em 1.5em }

	#tb-style tbody tr td select {width:100%}
	#tb-style .cont5 > div span {margin-bottom:0.5em}
	#tb-style tbody tr td .box5_2 input { max-width: 100%; width: 100%;}
	#tb-style tbody tr td .box5 input { display: inline-block; width: 30%; max-width: none;}
	#tb-style tbody tr td .box5 input .tel1_01, #tb-style tbody tr td .box5 input .tel2_01 { float: left; }
	#tb-style .cont5 > div .chk_box {padding-left:0}
	 
	#tb-style tbody tr td input { font-size: 1.4rem;  padding: 5px 12px; border-radius: 3px;  width: 100%; }
	#tb-style tbody tr td select { font-size: 1.6rem;  padding: 5px 12px; border-radius: 3px;  width: 100%; }

}
@media all and (max-width:480px){
	#tb-style input[type="radio"],
	#tb-style input[type="checkbox"] { margin-right:0;}
	#tb-style tbody tr td.cont8 #payW_02 { margin-left: 15px; }

	#tb-style .cont5 > div span {width:30vw}
	#tb-style .cont5 div.box5_1 #p2 { margin-left: 15px; }
}


#reserCont {margin-top:2em; text-align:center}

#reserBtn {font-size:2.2rem; font-weight:700; background:#24823c; border-radius:5px; padding:0.7em 1.5em; color:#FFF;
			display:inline-block}
#reserBtn i {color:#FFF; padding-right:5px}
#reserBtn:hover {background:#82ce39 ;}
#reserBtn.cancle {background:#999}
#reserBtn.cancle:hover {background:#222}



#reservation2 {margin:0 auto; max-width:580px; width:100%}
#reservation2 .txt_box { margin-bottom:1em; text-align:center; font-size:1.7rem; }
#reservation2 .info_chk form .info_form { border:1px solid #e3e3e3; border-radius: 10px; text-align: left; padding:3em}

#reservation2 .info_chk form .info_form .title { font-size: 1.8rem;color: #3c4552; font-weight: 500; margin-top: 21px; 
														margin-bottom: 11px;}

#reservation2 .info_chk form .info_form .title:first-child { margin-top: 0px;}
#reservation2 .info_chk form .info_form input, 
#reservation2 .info_chk form .info_form select {width: 100%; border: 1px solid #d2d2d2; border-radius: 5px; font-size: 16px; 
												color: #3c4552; font-weight: 350; padding: 14px 18px; outline: none;}
#reservation2 .info_chk form .info_form .name_box>input {margin-bottom: 10px;}
#reservation2 .info_chk form .info_form .name_box div {display: inline-block;}
#reservation2 .info_chk form .info_form .name_box div input { width: auto;}
#reservation2 .info_chk form .info_form .name_box div #p2 {margin-left: 17px;}
#reservation2 .info_chk form .info_form .name_box div label { font-size: 16px; color: #666666; font-weight: 350; margin-left: 2px;}

#reservation2 .info_chk form .info_form .tel_box { display: table; width: 100%; text-align: center;}
#reservation2 .info_chk form .info_form .tel_box input, 
#reservation2 .info_chk form .info_form .tel_box select { display: inline-block;    width: 28%;}

#reservation2 .info_chk form .info_form .tel_box span {display: inline-table; width: 6.5%; padding: 10px 0px; 
											font-size: 18px; text-align: center;}
#reservation2 .info_chk form .info_form .tel_box .tel1 {float: left;}
#reservation2 .info_chk form .info_form .tel_box .tel3 {float: right; }





#tb-style-List {width: 100%; border-top: 2px solid #5bb531 ; }
#tb-style-List thead tr th{padding:1em; background-color: #f6faf0; border-right: 1px solid #dceed0; border-bottom: 1px solid #dceed0; 
						font-size:1.9rem; color:#324f25; font-weight:600;  }
#tb-style-List thead tr th:last-child{border-right: 0;}
#tb-style-List tbody tr td {font-size: 1.7rem;  padding:1em 0; border-bottom: 1px solid #dedede; border-right: 1px solid #eee; text-align:center}
#tb-style-List tbody tr td:last-child{border-right: 0;}

@media all and (max-width:1100px){
	#tb-style-List thead tr th {font-size:1.8rem;}
	#tb-style-List tbody tr td {font-size: 1.6rem;}
}



#reservationList.mo {display:none}
@media all and (max-width:976px){
	#reservationList.pc {display:none}
	#reservationList.mo {display:block}
}


#r-List-mo {padding:2em; border-radius:10px; box-shadow:0 0 20px rgba(85,85,85,0.1) }
#r-List-mo li {padding:1em;border-top:1px solid #dceed0; position:relative}
#r-List-mo li:before {content:''; width:110px; height:2px; background:#5bb531; position:absolute; left:0; top:-1px}
#r-List-mo li:last-child {border-bottom:1px solid #DDD; }
#r-List-mo li dl {display:flex; flex-wrap:wrap; border-bottom:1px dashed #e9e9e9; padding:1em 0}
#r-List-mo li dl:last-child { border-bottom:0}
#r-List-mo li dl dt { width:130px; font-size:2.0rem; color:#222; font-weight:700}
#r-List-mo li dl dd { width:calc(100% - 130px); font-size:1.8rem; }

@media all and (max-width:480px){
	#r-List-mo li {padding:1em 0}
	#r-List-mo li:before {  width:18vw; }
	#r-List-mo li dl { padding:0.7em 0}
	#r-List-mo li dl dt { width:21vw; font-size:1.8rem;}
	#r-List-mo li dl dd { width:calc(100% - 21vw); font-size:1.6rem; }
}