@charset "utf-8";
/* 메인페이지 스타일만 정의 */


/* ********************************* PC over : 992 ~  ********************************* */
@media screen and (min-width:992px), print{
	/* ***** 공통 ***** */
	section[class*="main"] {max-width:100%;}
	.main {}
	.main>div {width:1200px; max-width:100%; margin:0 auto; overflow:hidden;}
	.headerH {height:142px;}
	
	/* ***** 슬라이드 ***** */
	.slider {width:100% !important; height:760px;}
	.slider:after {
		content:''; display:block; position:absolute; top:0; right:0; bottom:0; left:0;
		background-color:rgba(0,0,0,0.2);
	}
	.slider h2 {
		position:relative; z-index:9; font-size:140px; color:#fff; text-align:center; padding:165px 0;
		text-shadow:5px 5px 5px rgba(0,0,0,.1); font-family:'YanoljaYacheR'; font-weight:500; letter-spacing:-7px;
	}
	.slider .bgSub {position:relative; bottom:-45px; left:0; z-index:9; width:1200px; margin:0 auto;}
	
	/* ***** 행사팝업  ***** */
	.popWrap {width:100vw; height:100vh; position:relative; background:rgba(0,0,0,.2);}
	.popCon {position:absolute; width:100%; background:#fff;}
	.popCon header {font-size:21px; color:#fff; font-weight:300; line-height:1.4; padding:15px 30px; background:#ffa3cb;}
	.popCon article {padding:30px 3px 35px;}
	.popCon article h3 {position:relative; font-size:30px; line-height:1.4; color:#ff6699;font-weight: 300; margin-bottom:20px;}
	.popCon article p {color:#000; padding:15px; border:1px solid #e5e5e5; border-radius:10px; background:#f7f7f7;}
	.popCon article dl {margin-top:25px;}
	.popCon article dl dt {position:relative; padding-left:15px; margin-top:20px; font-weight: 400; color:#000; line-height:1;}
	.popCon article dl dt:before {content:""; display:block; width:3px; height:3px; position:absolute; left:5px; top:7px; background:#ccc;}
	.popCon article dl dd {padding:5px 0 10px 15px; position:relative;}
	.popCon article dl dd:empty {height:30px;}
	.popCon article dl dd:before {content: ""; display: block; width: 100%; height: 1px; border-bottom: 1px dashed #ddd; position: absolute; left: 0; bottom:0;}
	.popCon article dl dd:last-child:before {display:none;}
	
	/* ***** 카드  ***** */
	.main>div:nth-child(2) {position:relative; z-index:99; margin-top:-300px;}
	.cardWrap {float:right; width:50%; overflow:hidden;}
	.cardWrap li {background:#fff; float:left; width:50%;}
	.cardWrap li a {display:block; padding:50px;}
	.cardWrap li:nth-child(2) {background-color:#ffe258;}
	.cardWrap li:nth-child(3) {background-color:#263a5d;}
	.cardWrap li:nth-child(4) {background-color:#ff6c80;}
	/* .cardWrap li:nth-child(5) {background-color:#75c44e;} */
	/* .cardWrap li:nth-child(6) {background-color:#f2f2f2;} */
	.cardWrap li h3 {font-size:24px; font-weight:400; padding-bottom:15px;}
	.cardWrap li p {font-size:14px; opacity:.5; padding-bottom:60px; transition:all .1s;}
	.cardWrap li:first-child p {padding-bottom:85.19px;}
	.cardWrap li div {height:54px; display:table;}
	.cardWrap li div span {display:table-cell; width:100px; height:100%; background-repeat:no-repeat; transition:all .1s;}
	.cardWrap li div span.arrow {background-image:url(../images/main/arrow.png); background-position:bottom right;}
	.cardWrap li div span[class*="i"] {background-position:center left;}
	.cardWrap li div span.i-intro {background-image:url(../images/main/i-intro.png);}
	.cardWrap li div span.i-edu {background-image:url(../images/main/i-edu.png);}
	.cardWrap li div span.i-notice {background-image:url(../images/main/i-notice.png);}
	.cardWrap li div span.i-guide {background-image:url(../images/main/i-guide.png);}
	.cardWrap li.white a {color:#fff !important;}
	.cardWrap li.white div span.arrow {background-image:url(../images/main/arrow_fff.png);}
	.cardWrap li a:hover div span.arrow {transform:scale(1.3) translate(-11px, -4px);}
	.cardWrap li a:hover h3 {}
	.cardWrap li a:hover p {opacity:1;}
	
	/* ***** 게시판 ***** */
	.infoWrap {float:left; width:50%; margin-top:300px; padding-right:80px;}
	.infoWrap>div {padding:50px 0;}
	
	.infoWrap .noticeWrap {position:relative;}
	.infoWrap .noticeWrap:after {
		content:''; dispaly:block; width:100%; height:1px; background:#ededed;
		position:absolute; bottom:0; left:0;
	}
	.infoWrap .noticeWrap h3 {position:relative; font-size:30px; color:#000; letter-spacing:-1px; font-weight:400; height:40px;}
	.infoWrap .noticeWrap h3>a {
		position:absolute; right:0; top:0; display:block; width:40px; height:40px; 
		background:url(../images/main/plus.png)center no-repeat; border:1px solid #e5e5e5;
	}
	.infoWrap .noticeWrap h3>a:hover {background-color:#f5f5f5;}
	.infoWrap .noticeWrap p {color:#999; letter-spacing:-1px;}
	.infoWrap .noticeWrap ul {padding-top:10px;}
	.infoWrap .noticeWrap ul li {position:relative; padding-left:25px; line-height:1; padding-top:25px;}
	.infoWrap .noticeWrap ul li:before {
		content:''; display:block; width:10px; height:1px; background:#000;
		position:absolute; left:0; top:33px; 
	}
	.infoWrap .noticeWrap ul li a {color:#000;}
	.infoWrap .noticeWrap ul li a:hover {text-decoration:underline !important; text-underline-position:under;}
	
	/* ***** 달력, 식단표 ***** */
	.todayWrap {display:grid; grid-template-columns:repeat(2, 1fr); width:100%; padding:50px 0 60px;}
	.todayWrap div h3 {font-size:30px; color:#000; letter-spacing:-1px; font-weight:400; height:40px}
	.todayWrap>div>p {color:#999; letter-spacing:-1px;}
	.todayWrap .eventWrap {padding-right:80px;}
	.todayWrap .eventWrap article {display:flex; padding-top:20px; justify-content:space-between;}
	.todayWrap .eventWrap .calendar {}
	.todayWrap .eventWrap .calendar h4 {text-align:center; margin-bottom:10px;}
	.todayWrap .eventWrap .calendar h4 a {display:inline-block; width:20px; height:20px; vertical-align:middle;}
	.todayWrap .eventWrap .calendar .before {background:url(../images/common/right-arr.png)no-repeat center; transform:rotate(180deg);}
	.todayWrap .eventWrap .calendar .after {background:url(../images/common/right-arr.png)no-repeat center;}
	.todayWrap .eventWrap .calendar h4 span {font-weight:500; color:#000;}
	.todayWrap .eventWrap .calendar table {width:280px;}
	.todayWrap .eventWrap .calendar table tr td.sun {color:#ec0000;}
	.todayWrap .eventWrap .calendar table tr td.sat {color:#0100ff;}
	.todayWrap .eventWrap .calendar table tr td {position:relative; font-size:14px; padding:5px; text-align:center;}
	.todayWrap .eventWrap .calendar table tr td>a {display:inline-block; color:#fff; background:#ff6c80; border-radius:50%; width:25px; height:25px;}
	.todayWrap .eventWrap .schedule {width:192px; padding:20px 18px; background:#fff6f6; border-radius:1rem; height:242px;}
	.todayWrap .eventWrap .schedule>div {overflow-y:auto; display:flex; flex-direction:column; height:208px;}
	.todayWrap .eventWrap .schedule>div::-webkit-scrollbar-thumb {background-color:#e0c7cb; border-radius:1rem;}
	.todayWrap .eventWrap .schedule p {text-align:center; font-size:14px; color:#333; line-height:1.5;}
		
	.todayWrap .menuWrap {}
	.todayWrap .menuWrap h4 {display:block; text-align:center; font-weight:500; color:#000;margin-bottom:30px;}
	.todayWrap .menuWrap article {position:relative; height:238px; background:#f7fbff; padding:25px 30px; border-radius:1rem; margin-top:20px;}
	.todayWrap .menuWrap article>a {position:absolute; top:50%; transform:translateY(-50%); display:inline-block; width:35px; height:35px;}
	.todayWrap .menuWrap article .prev {background:url(../images/main/main-left-arr.png)no-repeat left center; left:30px;}
	.todayWrap .menuWrap article .next {background:url(../images/main/main-right-arr.png)no-repeat left center; right:30px;}
	.todayWrap .menuWrap article .menu {display:flex; align-items:center; justify-content:center; gap:50px; overflow-y:auto;}
	.todayWrap .menuWrap article .menu .img {width:180px; overflow:hidden; aspect-ratio:1/.7;}
	.todayWrap .menuWrap article .menu .img img {max-width:100%; height:100%; object-fit:cover; border-radius:10px;}
	.todayWrap .menuWrap article .menu>div:nth-of-type(2) {display:block; height:126px; padding:5px; width:170px; overflow-y:auto;}
	.todayWrap .menuWrap article .menu div a {font-size:14px; color:#333;}
	.todayWrap div::-webkit-scrollbar {width:5px;}
	.todayWrap div::-webkit-scrollbar-track {background-color:transparent;}
	.todayWrap .menu>div::-webkit-scrollbar-button {display:none;}
	.todayWrap .menuWrap article .menu>div::-webkit-scrollbar-thumb {background-color:#c7d4e1; border-radius:1rem;}

	/* ***** 포토앨범 ***** */
	.photoWrap {position:relative; width:100%; text-align:center; padding-bottom:50px;}
	.photoWrap h3 {font-size:30px; color:#000; font-weight:400; letter-spacing:-0.02em; padding-bottom:10px;}
	.photoWrap p {font-size:16px; color:#888;}
	.photoWrap ul {width:1200px; max-width:100%; margin:0 auto; padding-top:30px; display:flex; gap:34px;}
	.photoWrap ul li {width:33.333%;}
	.photoWrap ul li a {position:relative; width:100%; display:block; overflow:hidden; border-radius:1rem; aspect-ratio:1/.7;}
	.photoWrap ul li a img {width:100%; height:100%; object-fit:cover;}
	.photoWrap ul li a:hover img {transform:scale(110%);}
	
}


/* ********************************* 모바일 ********************************* */
@media screen and (max-width:991px){
	
	/* ***** 공통 ***** */
	section[class*="main"] {max-width:100%;}
	.main>div {width:100%; overflow:hidden;}
	
	/* ***** 슬라이드 ***** */
	.slider {width:100% !important; height:500px;}
	.slider:after {
		content:''; display:block; position:absolute; top:0; right:0; bottom:0; left:0;
		background-color:rgba(0,0,0,0.2);
	}
	.slider h2 {
		position:relative; z-index:9; font-size:90px; color:#fff; text-align:center; padding:50px 20px; word-break:keep-all;
		text-shadow:5px 5px 5px rgba(0,0,0,.1); font-family:'YanoljaYacheR'; font-weight:500; letter-spacing:-4px;
		line-height:1.2;
	}
	.slider .bgSub {position:absolute; bottom:0; left:0; z-index:9;text-align:center; width:100%;}
	.slider .bgSub img {width:500px;}
	
	/* ***** 행사팝업  ***** */
	.popWrap {width:100vw; height:100vh; position:relative; background:rgba(0,0,0,.2);}
	/* .popCon {position:absolute; min-width:30%; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff;} */
	.popCon {position:absolute; width:100%; background:#fff;}
	.popCon header {font-size:21px; color:#fff; font-weight:300; line-height:1.4; padding:15px 30px; background:#ffa3cb;}
	.popCon article {padding:30px 30px 35px;}
	.popCon article h3 {position:relative; font-size:30px; line-height:1.4; color:#ff6699;font-weight: 300; margin-bottom:20px;}
	.popCon article p {color:#000; padding:15px; border:1px solid #e5e5e5; border-radius:10px; background:#f7f7f7;}
	.popCon article dl {margin-top:25px;}
	.popCon article dl dt {position:relative; padding-left:15px; margin-top:20px; font-weight: 400; color:#000; line-height:1;}
	.popCon article dl dt:before {content:""; display:block; width:3px; height:3px; position:absolute; left:5px; top:7px; background:#ccc;}
	.popCon article dl dd {padding:5px 0 10px 15px; position:relative;}
	.popCon article dl dd:empty {height:30px;}
	.popCon article dl dd:before {content: ""; display: block; width: 100%; height: 1px; border-bottom: 1px dashed #ddd; position: absolute; left: 0; bottom:0;}
	.popCon article dl dd:last-child:before {display:none;}
	
	/* ***** 카드  ***** */
	.main>div:nth-child(2) {position:relative; z-index:99;}
	.cardWrap {width:100%; overflow:hidden;}
	.cardWrap li {background:#fff; float:left; width:50%;}
	.cardWrap li a {display:block; padding:50px;}
	.cardWrap li:nth-child(2) {background-color:#ffe258;}
	.cardWrap li:nth-child(3) {background-color:#263a5d;}
	.cardWrap li:nth-child(4) {background-color:#ff6c80;}
	/* .cardWrap li:nth-child(5) {background-color:#75c44e;} */
	/* .cardWrap li:nth-child(6) {background-color:#f2f2f2;} */
	.cardWrap li h3 {font-size:24px; font-weight:400; padding-bottom:15px;}
	.cardWrap li p {font-size:14px; opacity:.5; padding-bottom:60px; transition:all .1s; word-break:keep-all;}
	.cardWrap li div {height:54px; display:table;}
	.cardWrap li div span {display:table-cell; width:400px; height:100%; background-repeat:no-repeat; transition:all .1s;}
	.cardWrap li div span.arrow {background-image:url(../images/main/arrow.png); background-position:bottom right;}
	.cardWrap li div span[class*="i"] {background-position:center left;}
	.cardWrap li div span.i-intro {background-image:url(../images/main/i-intro.png);}
	.cardWrap li div span.i-edu {background-image:url(../images/main/i-edu.png);}
	.cardWrap li div span.i-notice {background-image:url(../images/main/i-notice.png);}
	.cardWrap li div span.i-guide {background-image:url(../images/main/i-guide.png);}
	.cardWrap li.white a {color:#fff !important;}
	.cardWrap li.white div span.arrow {background-image:url(../images/main/arrow_fff.png);}
	.cardWrap li a:hover div span.arrow {transform:scale(1.2) translate(-18px, -5px);}
	.cardWrap li a:hover p {opacity:1;}
	
	/* ***** 게시판 ***** */
	.infoWrap {float:left; width:100%; padding:0 20px;}
	.infoWrap>div {padding:40px 0;}
	
	.infoWrap .noticeWrap {position:relative;}
	.infoWrap .noticeWrap:after {
		content:''; dispaly:block; width:100%; height:1px; background:#ededed;
		position:absolute; bottom:0; left:0;
	}
	.infoWrap .noticeWrap h3 {position:relative; font-size:30px; color:#000; letter-spacing:-1px; font-weight:400; height:40px;}
	.infoWrap .noticeWrap h3>a {
		position:absolute; right:0; top:0; display:block; width:40px; height:40px; 
		background:url(../images/main/plus.png)center no-repeat; border:1px solid #e5e5e5;
	}
	.infoWrap .noticeWrap h3>a:hover {background-color:#f5f5f5;}
	.infoWrap .noticeWrap p {color:#999; letter-spacing:-1px;}
	.infoWrap .noticeWrap ul {padding-top:10px;}
	.infoWrap .noticeWrap ul li {position:relative; padding-left:25px; line-height:1; padding-top:25px;}
	.infoWrap .noticeWrap ul li:before {
		content:''; display:block; width:10px; height:1px; background:#000;
		position:absolute; left:0; top:33px; 
	}
	.infoWrap .noticeWrap ul li a {display:block; color:#000; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:40px;}
	.infoWrap .noticeWrap ul li a:hover {text-decoration:underline !important; text-underline-position:under;}
	
	/* ***** 달력, 식단표 ***** */
	.todayWrap {display:grid; grid-template-columns:repeat(1, 1fr); width:100%; padding:50px 20px; gap:50px;}
	.todayWrap div h3 {font-size:30px; color:#000; letter-spacing:-1px; font-weight:400; height:40px}
	.todayWrap>div>p {color:#999; letter-spacing:-1px;}
	.todayWrap .eventWrap article {display:flex; padding-top:20px; justify-content:space-between; gap:30px;}
	.todayWrap .eventWrap .calendar {width:60%;}
	.todayWrap .eventWrap .calendar h4 {text-align:center; margin-bottom:10px;}
	.todayWrap .eventWrap .calendar h4 a {display:inline-block; width:20px; height:20px;     vertical-align:middle;}
	.todayWrap .eventWrap .calendar .before {background:url(../images/common/right-arr.png)no-repeat center; transform:rotate(180deg);}
	.todayWrap .eventWrap .calendar .after {background:url(../images/common/right-arr.png)no-repeat center;}
	.todayWrap .eventWrap .calendar h4 span {font-weight:500; color:#000;}
	.todayWrap .eventWrap .calendar table tr td.sun {color:#ec0000;}
	.todayWrap .eventWrap .calendar table tr td.sat {color:#0100ff;}
	.todayWrap .eventWrap .calendar table tr td {position:relative; font-size:14px; padding:5px; text-align:center;}
	.todayWrap .eventWrap .calendar table tr td>a {display:inline-block; color:#fff; background:#ff6c80; border-radius:50%; width:25px; height:25px;}
	.todayWrap .eventWrap .schedule {width:40%; padding:20px 18px; background:#fff6f6; border-radius:1rem;}
	.todayWrap .eventWrap .schedule>div {overflow-y:auto; display:flex; flex-direction:column; height:200px;}
	.todayWrap .eventWrap .schedule>div::-webkit-scrollbar-thumb {background-color:#e0c7cb; border-radius:1rem;}
	.todayWrap .eventWrap .schedule p {text-align:center; font-size:14px; color:#333; line-height:1.5;}
		
	.todayWrap .menuWrap h4 {display:block; text-align:center; font-weight:500; color:#000;margin-bottom:30px;}
	.todayWrap .menuWrap article {position:relative; background:#f7fbff; padding:40px 30px; border-radius:1rem; margin-top:20px;}
	.todayWrap .menuWrap article>a {position:absolute; top:50%; transform:translateY(-50%); display:inline-block; width:35px; height:35px;}
	.todayWrap .menuWrap article .prev {background:url(../images/main/main-left-arr.png)no-repeat left center; left:30px;}
	.todayWrap .menuWrap article .next {background:url(../images/main/main-right-arr.png)no-repeat left center; right:30px;}
	.todayWrap .menuWrap article .menu {display:flex; align-items:center; justify-content:center; gap:50px; overflow-y:auto;}
	.todayWrap .menuWrap article .menu .img {width:35%; overflow:hidden; aspect-ratio:1/.7;}
	.todayWrap .menuWrap article .menu .img img {max-width:100%; height:100%; object-fit:cover; border-radius:10px;}
	.todayWrap .menuWrap article .menu>div:nth-of-type(2) {display:block; height:170px; padding:20px; width:35%; overflow-y:auto; text-align:center;}
	.todayWrap .menuWrap article .menu p {font-size:14px; color:#333; line-height:1.5;}
	.todayWrap div::-webkit-scrollbar {width:5px;}
	.todayWrap div::-webkit-scrollbar-track {background-color:transparent;}
	.todayWrap .menu>div::-webkit-scrollbar-button {display:none;}
	.todayWrap .menuWrap article .menu>div::-webkit-scrollbar-thumb {background-color:#c7d4e1; border-radius:1rem;}

	/* ***** 포토앨범 ***** */
	.photoWrap {position:relative; width:100%; text-align:center; padding:0 20px 50px;}
	.photoWrap h3 {font-size:30px; color:#000; font-weight:400; letter-spacing:-0.02em; padding-bottom:10px;}
	.photoWrap p {font-size:16px; color:#888;}
	.photoWrap ul {width:1200px; max-width:100%; margin:0 auto; padding-top:30px; display:flex; gap:4vw;}
	.photoWrap ul li {width:33.333%;}
	.photoWrap ul li a {position:relative; width:100%; display:block; overflow:hidden; border-radius:1rem; aspect-ratio:1/.7;}
	.photoWrap ul li a img {width:100%; height:100%; object-fit:cover;}
	.photoWrap ul li a:hover img {transform:scale(110%);}
	
}


/* ********************************* 767이하 ********************************* */
@media screen and (max-width:767px){
	
	/* ***** 슬라이드 ***** */
	.slider {height:350px;}
	.slider h2 {font-size:60px; letter-spacing:-2px;}
	.slider .bgSub img {width:280px;}
	
	/* ***** 카드  ***** */
	.cardWrap li {text-align:center;}
	.cardWrap li a {padding:30px;}
	.cardWrap li h3 {font-size:20px; padding-bottom:30px;}
	.cardWrap li p {display:none !important;}
	.cardWrap li div {display:block; width:100%; overflow:hidden; height:auto;}
	.cardWrap li div span {width:100%; display:block; height:54px; background-position:center center !important;}
	.cardWrap li a div span.arrow {display:none !important;}
	
	/* ***** 게시판 ***** */
	.infoWrap {float:left; width:100%; padding:0 20px;}
	.infoWrap>div {padding:30px 0;}
	.infoWrap>div h3 {font-size:24px !important; height:35px !important;}
	.infoWrap>div p {font-size:14px !important;}
	.infoWrap .noticeWrap h3>a {width:35px; height:35px;}
	.infoWrap .noticeWrap ul {padding-top:0 !important;}
	
	/* ***** 달력, 식단표 ***** */
	.todayWrap div h3 {font-size:24px; height:35px;}
	.todayWrap>div>p {font-size:14px;}
	.todayWrap .eventWrap article {flex-direction:column;}
	.todayWrap .eventWrap .calendar {width:100%;}
	.todayWrap .eventWrap .schedule {width:100%;}
	.todayWrap .eventWrap .schedule>div {display:block; height:150px;}
	
	.todayWrap .menuWrap article .menu {flex-direction:column;}
	.todayWrap .menuWrap article .menu .img {width:100%; text-align:center;}
	.todayWrap .menuWrap article .menu>div:nth-of-type(2) {width:100%;}
	.todayWrap .menuWrap article>a {top:30px; transform:none;}
	
	/* ***** 포토앨범 ***** */
	.photoWrap ul {flex-direction:column; padding-top:20px;}
	.photoWrap ul li {width:100%;}
	.photoWrap h3 {font-size:24px;}
	.photoWrap p {font-size:14px;}
	
	
}