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


/*전체공통*/
.only-mobile {display:none !important;}

/*박스별 색상*/
.bgc01 {background-color:#ff9c9c;}
.bgc02 {background-color:#ff7676;}
.bgc03 {background-color:#ff5151;}




/* ********************************* PC over : 992 ~  ********************************* */
@media screen and (min-width:992px), print{

	/*공통::*/
	.headerH {height:80px;}
	section[class*="main"] {max-width:100%;}
	.main .slider div[class*="-wrap"] {z-index:99; position:relative;}

	/*레이아웃 분할*/
	.main>div[class*="part-"] {float:left;}
	.main>div.part-left {width:calc(100% - 440px);}
	.main>div.part-right {width:440px;}

	
	/* ***** 왼쪽 시작 ***** */
	/*개별::슬라이더*/
	.main .visual {position:relative; display:block; overflow:hidden; max-width:100%; height:1320px;}
	.main .visual:before {position:absolute; bottom:0; left:0; width:100%; height:100%; background:rgba(255,217,217,.3); display:block; content:""; z-index:1;}
	.main .visual .sliderObj li {opacity:0; image-rendering:-webkit-optimize-contrast;}
	.main .visual .sliderObj li:first-child {opacity:1;}
	.main .visual .sliderObj li.on {opacity:1;}

	.main .visual .txt-wrap {color:#fff; padding:500px 10vw 0; text-align:center; text-shadow:3px 0 3px rgba(0,0,0,.1);}
	.main .visual .txt-wrap>* {padding:0 3vw; word-break:keep-all;}
	.main .visual .txt-wrap h2 {font-size:4.8em; font-weight:700; letter-spacing:-.1vw; line-height:1.2;}
	.main .visual .txt-wrap p {font-size:1.1em; font-weight:400; letter-spacing:-.02vw; line-height:1.6; padding-top:3vh;}
	
	/*퀵메뉴*/
	.main article.quick {position:relative; display:block; overflow:hidden; max-width:100%; height:240px; margin-top:60px; z-index:2;}
	.main article.quick ul {font-size:0; text-align:center;}
	.main article.quick ul li {display:inline-block;}
	.main article.quick ul li+li {margin-left:2vw;}
	.main article.quick ul li a {display:block; width:240px; height:240px; border-radius:50%; position:relative;}
	.main article.quick ul li a:after {
		content:""; border:2px solid #fff; position:absolute; top:8px; left:8px;
		display:block; width:225px; height:225px; border-radius:50%;
		transition-duration:.2s;
	}
		/*hover효과*/
		.main article.quick ul li a:before {
			position:absolute; top:50%; left:50%; z-index:3; margin-top:-18px; margin-left:-28px;
			content:"더보기"; font-size:20px; color:transparent; font-weight:400;
		}
		.main article.quick ul li a:hover:before {color:#fff;}
	.main article.quick ul li:nth-child(1) a:hover:after {background:#ff9c9c;}
	.main article.quick ul li:nth-child(2) a:hover:after {background:#ff7676;}
	.main article.quick ul li:nth-child(3) a:hover:after {background:#ff5151;}
	
		/*아이콘*/
		.main article.quick ul li a {background-repeat:no-repeat; background-size:103px; background-position:center 55px;}
		.main article.quick ul li:nth-child(1) a {background-image:url(../images/icon/quick-01.png);}
		.main article.quick ul li:nth-child(2) a {background-image:url(../images/icon/quick-02.png);}
		.main article.quick ul li:nth-child(3) a {background-image:url(../images/icon/quick-03.png);}
	
	.main article.quick ul li a h3 {font-size:18px; color:#fff; font-weight:400; padding-top:160px; text-align:center;}


	/* ***** 오른쪽 박스들 시작 ***** */
	/*박스별 공통*/
	.layout-1 .part-right .link-Box {height:440px;}

	.main .link-Box {padding:50px;}
	.main .link-Box h3.tit {font-weight:400; font-size:26px; letter-spacing:-1.5px; line-height:1.2;}
	.main .link-Box p.tit-next {font-weight:300; font-size:16px; margin-top:15px; line-height:1.6; word-break:keep-all;}
	.main .link-Box .titWrap.color-black .tit,
	.main .link-Box .titWrap.color-black .tit-next {color:#000;}
	.main .link-Box .titWrap.color-white .tit,
	.main .link-Box .titWrap.color-white .tit-next {color:#fff;}

	.main .link-Box .titWrap.include-moreBtn {position:relative;}
	.main .link-Box .titWrap.include-moreBtn h3 {padding-right:50px;}
	.main .link-Box .titWrap.include-moreBtn>a {
		position:absolute; top:0; right:0; width:30px; height:30px; border:1px solid rgba(255,255,255,.6);
		background-image:url(../images/main/i-more.png);
		background-repeat:no-repeat;
		background-position:center;
	}
	.main .link-Box .titWrap.include-moreBtn>a:hover {background-color:rgba(255,255,255,1); background-image:url(../images/main/i-more-on.png);}
	.main .link-Box .titWrap+ul {margin-top:30px; overflow:hidden;}
	.main .link-Box .titWrap+ul li a {background:#fff; display:block;}


	/*포토앨범::*/
	.main .slider.photo {
		z-index:11;
		width:440px; height:440px;
		position:relative;
	}
	.main .slider.photo>h3.tit {position:absolute; top:50px; left:50px; color:#fff; font-size:26px; font-weight:400; z-index:99999;}
	.main .slider.photo .sliderObj {background-color:#fff; width:100%; height:100%;}
	.main .slider.photo .date-wrap {display:table; width:100%; height:100%; background:rgba(255,156,156,.3);}
	.main .slider.photo .date-wrap>div {display:table-cell; vertical-align:bottom; text-align:right; padding:50px;}
	.main .slider.photo .date-wrap>div>span {color:#fff; display:block; line-height:1.2; letter-spacing:0; text-shadow:1px 1px 1px rgba(0,0,0,.05);}
	.main .slider.photo .date-wrap>div .yyyy-mm {font-size:14px;}
	.main .slider.photo .date-wrap>div .dd {font-size:56px; font-weight:400; letter-spacing:-1px;}
		
		.main .slider.photo .no-img .date-wrap>div {background:#ff9c9c url(../images/test/no-img.png)no-repeat center;}
		.main .slider.photo .no-img .date-wrap>div span{font-size:14px;}


	/*알림마당::*/
	.link-Box.notice {
		background-image:url(../images/main/bg-notice.png);
		background-repeat:no-repeat;
		background-position:center bottom;
		background-size:100%;
	}
	.link-Box.notice ul {background:#fff; padding:30px 30px 20px;}
	.link-Box.notice ul li:nth-of-type(1) {padding:0 0 20px;}
	.link-Box.notice ul li:nth-of-type(1) a p {font-size:16px; color:#000; font-weight:400; line-height:1.6; height:50px; overflow:hidden;}
	.link-Box.notice ul li:nth-of-type(1) a span {font-size:12px; color:#999; font-weight:400; display:block; text-align:right; line-height:1; margin-top:5px;}
	.link-Box.notice ul li:nth-of-type(1)+li {border-top:1px solid #eee; padding-top:20px;}
	.link-Box.notice ul li:nth-of-type(1)~li a p {
		overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-left:15px; position:relative;
		font-size:14px; color:#555; font-weight:400;
	}
	.link-Box.notice ul li:nth-of-type(1)~li a p:before {
		content:""; position:absolute; top:11px; left:5px; width:2px; height:2px; background:#555;
	}
	
	.link-Box.notice ul li:nth-of-type(2)~li {margin-top:5px;}
	
	.link-Box.notice ul li a:hover p {transition-duration:.3s;}
	.link-Box.notice ul li a:hover p {text-decoration:underline !important;}


	/*학부모 전용 메뉴::*/
	.link-Box.parents {
		background-image:url(../images/main/bg-parents.png);
		background-repeat:no-repeat;
		background-position:center bottom;
		background-size:100%;
	}
	.link-Box.parents ul li {float:left; display:inline-block; width:50%;}
	
	.link-Box.parents ul li a {
		background-color:#fff; color:#000; font-size:15px; font-weight:400; text-align:center;
		padding:20px;
	}
	
	.link-Box.parents ul li:nth-child(odd) a {border-right:1px solid #ff5151;}
	.link-Box.parents ul li:nth-child(2)~li a {border-top:1px solid #ff5151;}
	
	.link-Box.parents ul li a span {position:relative;}
	.link-Box.parents ul li a span:before {
		position:absolute; top:-5px; left:-15px;
		content:""; width:10px; height:10px; border-radius:50%; background:transparent;
		transition-duration:.3s;
	}
	.link-Box.parents ul li a:hover span:before {background:#ff5151;}
	
	section.main+.pc-except {display:none;}



		







}


/* ********************************* 모바일 ********************************* */
@media screen and (max-width:991px){

	body {overflow-x:hidden;}

	/*공통::*/
	.headerH {height:0;}
	section[class*="main"] {max-width:100%;}
	.main div[class*="-wrap"] {width:100%; max-width:100%; margin:0 auto;}
	.main .slider div[class*="-wrap"] {z-index:99; position:relative;}


	/*레이아웃 분할*/
	.main>div[class*="part-"] {float:left; width:100%;}

	
	/* ***** 왼쪽 시작 ***** */
	/*개별::슬라이더*/
	.main .visual {position:relative; display:block; overflow:hidden; max-width:100%; height:600px;}
	.main .visual:before {position:absolute; bottom:0; left:0; width:100%; height:100%; background:rgba(255,217,217,.3); display:block; content:""; z-index:1;}
	.main .visual .sliderObj li {opacity:0; image-rendering:-webkit-optimize-contrast;}
	.main .visual .sliderObj li:first-child {opacity:1;}
	.main .visual .sliderObj li.on {opacity:1;}

	.main .visual .txt-wrap {color:#fff; padding:100px 10vw 0; text-align:center; text-shadow:3px 0 3px rgba(0,0,0,.1);}
	.main .visual .txt-wrap>* {padding:0 3vw; word-break:keep-all;}
	.main .visual .txt-wrap h2 {font-size:50px; font-weight:700; letter-spacing:-.1vw; line-height:1.2;}
	.main .visual .txt-wrap p {font-size:16px; font-weight:400; letter-spacing:-.02vw; line-height:1.6; padding-top:30px;}
	
	/*퀵메뉴*/
	.main article.quick {position:relative; display:block; overflow:hidden; max-width:100%; height:240px; margin-top:60px; z-index:2;}
	.main article.quick ul {font-size:0; text-align:center;}
	.main article.quick ul li {display:inline-block;}
	.main article.quick ul li+li {margin-left:2vw;}
	.main article.quick ul li a {display:block; width:25vw; height:25vw; border-radius:50%; position:relative;}
	.main article.quick ul li a:after {
		content:""; border:2px solid #fff; position:absolute; top:1vw; left:1vw;
		display:block; width:23vw; height:23vw; border-radius:50%;
		transition-duration:.2s;
	}
		/*hover효과*/
		.main article.quick ul li a:before {
			position:absolute; top:50%; left:50%; z-index:3; margin-top:-18px; margin-left:-28px;
			content:"더보기"; font-size:20px; color:transparent; font-weight:400;
		}
		.main article.quick ul li a:hover:before {color:#fff;}
	.main article.quick ul li:nth-child(1) a:hover:after {background:#ff9c9c;}
	.main article.quick ul li:nth-child(2) a:hover:after {background:#ff7676;}
	.main article.quick ul li:nth-child(3) a:hover:after {background:#ff5151;}
	
		/*아이콘*/
		.main article.quick ul li a {background-repeat:no-repeat; background-size:40%; background-position:center 30%;}
		.main article.quick ul li:nth-child(1) a {background-image:url(../images/icon/quick-01.png);}
		.main article.quick ul li:nth-child(2) a {background-image:url(../images/icon/quick-02.png);}
		.main article.quick ul li:nth-child(3) a {background-image:url(../images/icon/quick-03.png);}
	
	.main article.quick ul li a h3 {font-size:18px; color:#fff; font-weight:400; padding-top:65%; text-align:center;}


	/* ***** 오른쪽 박스들 시작 ***** */
	/*박스별 공통*/
	.layout-1 .part-right .link-Box {height:auto;}

	.main .link-Box {padding:50px;}
	.main .link-Box h3.tit {font-weight:400; font-size:26px; letter-spacing:-1.5px; line-height:1.2;}
	.main .link-Box p.tit-next {font-weight:300; font-size:16px; margin-top:15px; line-height:1.6; word-break:keep-all;}
	.main .link-Box .titWrap.color-black .tit,
	.main .link-Box .titWrap.color-black .tit-next {color:#000;}
	.main .link-Box .titWrap.color-white .tit,
	.main .link-Box .titWrap.color-white .tit-next {color:#fff;}

	.main .link-Box .titWrap.include-moreBtn {position:relative;}
	.main .link-Box .titWrap.include-moreBtn h3 {padding-right:50px;}
	.main .link-Box .titWrap.include-moreBtn>a {
		position:absolute; top:0; right:0; width:30px; height:30px; border:1px solid rgba(255,255,255,.6);
		background-image:url(../images/main/i-more.png);
		background-repeat:no-repeat;
		background-position:center;
	}
	.main .link-Box .titWrap.include-moreBtn>a:hover {background-color:rgba(255,255,255,1); background-image:url(../images/main/i-more-on.png);}
	.main .link-Box .titWrap+ul {margin-top:30px; overflow:hidden;}
	.main .link-Box .titWrap+ul li a {background:#fff; display:block;}


	/*포토앨범::*/
	.main .slider.photo {
		z-index:11;
		width:100%; height:550px;
		position:relative;
	}
	.main .slider.photo>h3.tit {position:absolute; top:50px; left:50px; color:#fff; font-size:26px; font-weight:400; z-index:99999;}
	.main .slider.photo .sliderObj {background-color:#fff; width:100%; height:100%;}
	.main .slider.photo .date-wrap {display:table; width:100%; height:100%; background:rgba(255,156,156,.3);}
	.main .slider.photo .date-wrap>div {display:table-cell; vertical-align:bottom; text-align:right; padding:50px;}
	.main .slider.photo .date-wrap>div>span {color:#fff; display:block; line-height:1.2; letter-spacing:0; text-shadow:1px 1px 1px rgba(0,0,0,.05);}
	.main .slider.photo .date-wrap>div .yyyy-mm {font-size:14px;}
	.main .slider.photo .date-wrap>div .dd {font-size:56px; font-weight:400; letter-spacing:-1px;}
		
		.main .slider.photo .no-img .date-wrap>div {background:#ff9c9c url(../images/test/no-img.png)no-repeat center;}
		.main .slider.photo .no-img .date-wrap>div span{font-size:14px;}


	/*알림마당::*/
	.link-Box.notice {
		background-image:url(../images/main/bg-notice.png);
		background-repeat:repeat-x;
		background-position:center bottom;
		background-size:auto;
	}
	.link-Box.notice ul {background:#fff; padding:30px;}
	.link-Box.notice ul li:nth-of-type(1) {padding:0 0 20px;}
	.link-Box.notice ul li:nth-of-type(1) a p {font-size:16px; color:#000; font-weight:400; line-height:1.6; height:50px; overflow:hidden;}
	.link-Box.notice ul li:nth-of-type(1) a span {font-size:12px; color:#999; font-weight:400; display:block; text-align:right; line-height:1; margin-top:10px;}
	.link-Box.notice ul li:nth-of-type(1)+li {border-top:1px solid #eee; padding-top:20px;}
	.link-Box.notice ul li:nth-of-type(1)~li a p {
		overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-left:15px; position:relative;
		font-size:14px; color:#555; font-weight:400;
	}
	.link-Box.notice ul li:nth-of-type(1)~li a p:before {
		content:""; position:absolute; top:11px; left:5px; width:2px; height:2px; background:#555;
	}
	
	.link-Box.notice ul li:nth-of-type(2)~li {margin-top:15px;}
	
	.link-Box.notice ul li a:hover p {transition-duration:.3s;}
	.link-Box.notice ul li a:hover p {text-decoration:underline !important;}


	/*학부모 전용 메뉴::*/
	.link-Box.parents {
		background-image:url(../images/main/bg-parents.png);
		background-repeat:repeat-x;
		background-position:center bottom;
		background-size:auto;
		padding-bottom:80px;
	}
	.link-Box.parents ul li {float:left; display:inline-block; width:50%;}
	
	.link-Box.parents ul li a {
		background-color:#fff; color:#000; font-size:15px; font-weight:400; text-align:center;
		padding:20px;
	}
	
	.link-Box.parents ul li:nth-child(odd) a {border-right:1px solid #ff5151;}
	.link-Box.parents ul li:nth-child(2)~li a {border-top:1px solid #ff5151;}
	
	.link-Box.parents ul li a span {position:relative;}
	.link-Box.parents ul li a span:before {
		position:absolute; top:-5px; left:-15px;
		content:""; width:10px; height:10px; border-radius:50%; background:transparent;
		transition-duration:.3s;
	}
	.link-Box.parents ul li a:hover span:before {background:#ff5151;}


	section.main+.pc-except {clear:both; height:10px; background:#eee; box-shadow:3px 3px 3px #ddd inset;}



}


/* ********************************* 767이하 ********************************* */
@media screen and (max-width:767px){

	/* body {border:10px solid red;} */
	.only-mobile {display:block !important;}

	.main .visual .txt-wrap>* {padding:0 10vw;}
	.main .visual .txt-wrap h2 {font-size:36px;}
	.main .visual .txt-wrap p {font-size:14px;}
	
	
	.main article.quick ul li a {width:30vw; height:30vw;}
	.main article.quick ul li a:after {
		width:27vw; height:27vw; border:1px solid #fff;
		top:1.5vw; left:1.5vw;
	}
	.main article.quick ul li a h3 {font-size:3vw;}
	
	.main .slider.photo {height:400px;}
	
	.main .link-Box {padding:30px;}
	.main .slider.photo>h3.tit {position:absolute; top:30px; left:30px; color:#fff; font-size:26px; font-weight:400; z-index:99999;}
	.main .slider.photo .date-wrap>div {padding:30px;}


}