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


/* ********************************* PC over : 992 ~  ********************************* */
@media screen and (min-width:992px), print{
	
	/*공통::*/
	.headerH {height:80px;}
	section[class*="main"] {max-width:100%;}
	.main div[class*="-wrap"] {width:1200px; max-width:100%; margin:0 auto;}
	.main .slider div[class*="-wrap"] {z-index:99; position:relative;}
	
	
	/*개별::슬라이더*/
	.main .visual {position:relative; display:block; overflow:hidden; max-width:100%; height:820px;}
	.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;}
		
	/*text::*/
	.main .visual .copy {z-index:0; position:absolute; width:100%; height:100%; left:0; color:#fff;}
	.main .visual .copy>* {width:1200px; margin:0 auto; height:100%;}
	.main .visual .copy .up {clear:both; left:0; top:0;}
	.main .visual .copy .up ul {position:relative;}
	.main .visual .copy .up li {
		position:absolute; display:inline-block; top:120px; width:100%; opacity:0;
		color:#fff; letter-spacing:-.3vw; font-size:100px; line-height:1.2;
		font-family:"BMJUA", sans-serif; font-weight:500; text-shadow:5px 5px 5px rgba(0,0,0,.1);
	}
	.main .visual .copy .up li.on {
		letter-spacing:-.2vw; opacity:1;
		transition:all .8s ease-in-out; -webkit-transition:all .8s ease-in-out !important; -moz-transition:all .8s ease-in-out;
	}
	.main .visual .copy .down {position:absolute; width:100%; top:400px;}
	.main .visual .copy .down>ul {width:1200px; margin:0 auto; height:100%; position:relative;}
	.main .visual .copy .down li {
		position:absolute; width:100%; left:0; opacity:0;
		font-size:18px; letter-spacing:-.05vw; line-height:1.6;
	}
	.main .visual .copy .down li.on {
		top:0; opacity:1; letter-spacing:-.03vw;
		transition:all .8s ease-in-out; -webkit-transition:all .8s ease-in-out !important; -moz-transition:all .8s ease-in-out;
	}		
		
	
	/*공통::*/
	section[class*="main"] h3.tit {font-size:40px; font-weight:400; line-height:1; letter-spacing:-1.5px; color:#000;}
	section[class*="main"] p.tit-next {font-size:16px; line-height:1.6; letter-spacing:-1px; color:#999; padding-top:10px; word-break:keep-all;}
	
	
	/* 포토앨범 */
	.main .photo-part {background:#fff; padding:60px 0; position:relative;}
	.main .photo-part div {width:1200px; margin:0 auto; max-width:100%; overflow:hidden;}
	.main .photo-part div a {float:left; display:inline-block; width:33.3333%; padding:20px;}
	.main .photo-part div a dl {overflow:hidden; position:relative;}
	.main .photo-part div a:hover dl {box-shadow:0 0 15px rgba(0,0,0,.2);}
	.main .photo-part div a dl:before {position:absolute; top:0; left:0; content:""; display:block; width:100%; height:100%; background:rgba(0,0,0,.3);}
	.main .photo-part div a dl:after {position:absolute; top:50px; left:40px; content:""; display:block; width:34px; height:30px; background:url(../images/common/i-luv.png)no-repeat center; background-size:cover; transition-duration:.3s !important;}
	.main .photo-part div a:hover dl:after {background:url(../images/common/i-luv-on.png);}
	.main .photo-part div a dl dt {width:100%; min-height:380px; overflow:hidden;}
	.main .photo-part div a dl dd {
		position:absolute; bottom:0; left:0; z-index:3; width:100%;
		font-size:24px; color:#fff; line-height:1; padding:40px 40px 45px; font-weight:300;
		display:block; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
		transition-duration:.3s !important;
	}
	.main .photo-part div a:hover dl dd {
		background:rgba(255,255,255,1); color:#000;
	}
	
	.main .photo-part div a dl dd span {display:block; font-size:14px; padding-top:10px;}
	
	
	/* 알림마당 */
	.main .notice-wrap {padding:0 0 40px;}
	.main .notice-wrap>div {overflow:hidden; display:table; width:100%; position:relative;}
	.main .notice-wrap>div>* {display:table-cell;}
	.main .notice-wrap>div>.tit h3.tit {color:#000;}
	.main .notice-wrap>div>.tit p.tit-next {padding-top:10px;}
	
	.main .notice-wrap>div>article {position:absolute; top:0; right:20px;}
	.main .notice-wrap>div>article a {
		float:left;
		padding:15px 25px; line-height:1; border:1px solid #e5e5e5; border-right:0;
		font-size:16px; color:#000; font-weight:300;
	}
	.main .notice-wrap>div>article a:last-child {border-right:1px solid #e5e5e5;}
	.main .notice-wrap>div>article a:hover {background-color:#f0f0f0;}
	
	.main .notice-wrap ul {padding-top:40px;}
	.main .notice-wrap ul li {line-height:1;}
	.main .notice-wrap ul li a {
		display:inline-block; padding:40px 200px 40px 70px; width:100%; border-top:1px dashed #eaeaea;
		position:relative;
	}
	.main .notice-wrap ul li a:before {
		content:''; display:block;
		position:absolute; left:30px; top:50px;
		width:20px; height:1px; background:#000;
		z-index:2;
	}
	.main .notice-wrap ul li a>* {line-height:1; font-weight:300;}
	.main .notice-wrap ul li a p {font-size:24px; color:#000; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; letter-spacing:-1px;}
	.main .notice-wrap ul li a span {font-size:16px; color:#999; display:block; padding-top:15px;}
	
	.main .notice-wrap ul.subject-next-date li a span {position:absolute; top:30px; right:50px;}
	
	.main .notice-wrap ul li a:hover {background-color:#f9f9f9;}
	.main .notice-wrap ul li a:hover {background-color:#f9f9f9;}
	.main .notice-wrap ul li:last-child a {border-bottom:1px dashed transparent;}
	.main .notice-wrap ul li:last-child a:hover {border-bottom:1px dashed #eaeaea;}
	
	
	/* 메뉴별링크 */
	section.main2 {background-color:#eee;}
	.main2 .link-wrap {padding:80px 0; position:relative;}
	.main2 .link-wrap h3.tit {font-size:30px; font-weight:400;}
	.main2 .link-wrap p.tit-next {padding-top:15px; font-size:14px;}
	.main2 .link-wrap>div {width:1200px; margin:0 auto; max-width:100%; overflow:hidden;}
	.main2 .link-wrap>div .inBox {float:left; display:inline-block; width:33.3333%; padding:0 20px;}
	.main2 .link-wrap>div .inBox .box {overflow:hidden; position:relative; background:#fff; padding:20px 20px 40px;}
	.main2 .link-wrap>div .inBox .box article {width:100%; /* min-height:380px;  */overflow:hidden;}
	.main2 .link-wrap>div .inBox .box>div {margin-top:50px; padding:0 30px;}
	.main2 .link-wrap>div .inBox .box>div .link {margin-top:30px;}
	.main2 .link-wrap>div .inBox .box>div .link li+li {margin-top:5px;}
	.main2 .link-wrap>div .inBox .box>div .link li a {
		width:100%; display:inline-block; padding-left:17px; padding-right:100px; position:relative;
		font-size:18px; font-weight:300;
		background:url(../images/main/arrow-right.png)no-repeat calc(100% - 10px) center;)
	}
	.main2 .link-wrap>div .inBox .box>div .link li a:before {
		position:absolute; top:15px; left:5px;
		content:""; display:block; background:#000; width:5px; height:2px;
	}
	
	.main2 .link-wrap>div .inBox .box>div .link li a:hover {
		background:url(../images/main/arrow-right-on.png)no-repeat right center;)
	}
	.main2 .link-wrap>div .inBox:nth-child(1) .box>div .link li a:hover {color:#7094ef;}
	.main2 .link-wrap>div .inBox:nth-child(2) .box>div .link li a:hover {color:#fea42f;}
	.main2 .link-wrap>div .inBox:nth-child(3) .box>div .link li a:hover {color:#87c83a;}
	.main2 .link-wrap>div .inBox:nth-child(1) .box>div .link li a:hover:before {background:#7094ef;}
	.main2 .link-wrap>div .inBox:nth-child(2) .box>div .link li a:hover:before {background:#fea42f;}
	.main2 .link-wrap>div .inBox:nth-child(3) .box>div .link li a:hover:before {background:#87c83a;}
	
	
	

	
	
}


/* ********************************* 모바일 ********************************* */
@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 .visual {position:relative; display:block; overflow:hidden; max-width:100%; height:700px;}
	.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;}
		
	/*text::*/
	.main .visual .copy {z-index:0; position:absolute; width:100%; height:100%; left:0; color:#fff; padding:10vh 10vw 5vh; word-break:keep-all;}
	.main .visual .copy>* {width:100%;}
	.main .visual .copy .up {clear:both; left:0; bottom:0; height:40%;}
	.main .visual .copy .up ul {position:relative;}
	.main .visual .copy .up li {
		position:absolute; display:inline-block; bottom:0; width:100%; height:50%; opacity:0;
		color:#fff; letter-spacing:-.3vw; font-size:4em; line-height:1.2; text-align:center;
		font-family:"BMJUA", sans-serif; font-weight:500; text-shadow:5px 5px 5px rgba(0,0,0,.1);
	}
	.main .visual .copy .up li.on {
		letter-spacing:-.2vw; opacity:1;
		transition:all .8s ease-in-out; -webkit-transition:all .8s ease-in-out !important; -moz-transition:all .8s ease-in-out;
	}
	.main .visual .copy .down {clear:both; position:absolute; left:50%; top:50%; width:50%; height:100%; margin-left:-25%;}
	.main .visual .copy .down>ul {width:100%; height:100%;}
	.main .visual .copy .down li {
		position:absolute; width:100%; height:30%; left:0; opacity:0;
		font-size:16px; letter-spacing:-.05vw; line-height:1.6;
		display:inline-block; width:100%; text-align:center;
	}
	.main .visual .copy .down li.on {
		top:0; opacity:1; letter-spacing:-.03vw;
		transition:all .8s ease-in-out; -webkit-transition:all .8s ease-in-out !important; -moz-transition:all .8s ease-in-out;
	}	
	
	
	/*공통::*/
	section[class*="main"] h3.tit {font-size:26px; font-weight:400; line-height:1; letter-spacing:-1.5px; color:#000; text-align:center;}
	section[class*="main"] p.tit-next {font-size:14px; line-height:1.6; letter-spacing:-1px; color:#999; padding-top:10px; word-break:keep-all; text-align:center;}
	
	
	
	/* 포토앨범 */
	.main .photo-part {background:#fff; padding:30px; position:relative;}
	.main .photo-part div {width:100%; max-width:100%; overflow:hidden;}
	.main .photo-part div a {float:left; display:inline-block; width:100%;}
	.main .photo-part div a+a {margin-top:30px;}
	.main .photo-part div a dl {overflow:hidden; position:relative;}
	.main .photo-part div a dl:before {position:absolute; top:0; left:0; content:""; display:block; width:100%; height:100%; background:rgba(0,0,0,.3);}
	.main .photo-part div a dl:after {position:absolute; top:30px; left:30px; content:""; display:block; width:28px; height:25px; background:url(../images/common/i-luv.png)no-repeat center; background-size:cover !important; transition-duration:.3s !important;}
	.main .photo-part div a:hover dl:after {background:url(../images/common/i-luv-on.png);}
	.main .photo-part div a dl dt {width:100%; height:420px !important; overflow:hidden;}
	.main .photo-part div a dl dd {
		position:absolute; bottom:0; left:0; z-index:3; width:100%;
		font-size:20px; color:#fff; line-height:1; padding:30px; font-weight:300;
		display:block; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
		transition-duration:.3s !important;
		border:1px solid transparent;
		text-align:center;
	}
	.main .photo-part div a:hover dl dd {
		background:rgba(255,255,255,1);
		border:1px solid #eaeaea;
		color:#000;
	}
	
	.main .photo-part div a dl dd span {display:block; font-size:14px; padding-top:10px;}
	
	
	
	/* 알림마당 */
	.main .notice-wrap {padding:30px !important;}
	.main .notice-wrap>div {overflow:hidden; display:block; width:100%; position:relative;}
	.main .notice-wrap>div>* {display:inline-block; float:left; width:100%;}
	.main .notice-wrap>div>.tit h3.tit {color:#000;}
	.main .notice-wrap>div>.tit p.tit-next {padding-top:10px;}
	
	.main .notice-wrap>div>article {margin-top:20px; display:table; width:100%;}
	.main .notice-wrap>div>article a {
		display:table-cell; vertical-align:middle; width:25%; text-align:center;
		padding:15px 25px; line-height:1; border:1px solid #e5e5e5; border-right:0;
		font-size:16px; color:#000; font-weight:300;
	}
	/* .main .notice-wrap>div>article a:first-child {border-top:1px solid transparent;} */
	.main .notice-wrap>div>article a:last-child {border-right:1px solid #e5e5e5;}
	.main .notice-wrap>div>article a:hover {background-color:#f0f0f0;}
	
	.main .notice-wrap ul {padding-top:0;}
	.main .notice-wrap ul li {line-height:1;}
	.main .notice-wrap ul li a {
		display:inline-block; padding:30px 100px 30px 30px; width:100%; border-bottom:1px dashed #eaeaea;
		position:relative;
	}
	.main .notice-wrap ul li a:before {
		content:''; display:block;
		position:absolute; left:10px; top:40px;
		width:10px; height:1px; background:#000;
		z-index:2;
	}
	.main .notice-wrap ul li a>* {line-height:1; font-weight:300;}
	.main .notice-wrap ul li a p {font-size:18px; color:#000; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; letter-spacing:-1px;}
	.main .notice-wrap ul li a span {font-size:14px; color:#999; display:block; padding-top:3px;}
	
	.main .notice-wrap ul.subject-next-date li a span {position:absolute; top:30px; right:10px;}
	
	.main .notice-wrap ul li a:hover {background-color:#f9f9f9;}
	.main .notice-wrap ul li a:hover {background-color:#f9f9f9;}
	
	
	
	/* 메뉴별링크 */
	section.main2 {background-color:#eee;}
	.main2 .link-wrap {padding:30px; position:relative;}
	.main2 .link-wrap h3.tit {font-size:24px; font-weight:400; text-align:left;}
	.main2 .link-wrap p.tit-next {padding-top:10px; font-size:14px; text-align:left;}
	.main2 .link-wrap>div {width:100%; margin:0 auto; max-width:100%; overflow:hidden;}
	.main2 .link-wrap>div .inBox {float:left; display:inline-block; width:100%; padding:0; border:1px solid #ddd;}
	.main2 .link-wrap>div .inBox+.inBox {margin-top:20px;}
	.main2 .link-wrap>div .inBox .box {overflow:hidden; position:relative; background:#fff; padding:20px;}
	.main2 .link-wrap>div .inBox .box article {width:100%; /* min-height:380px;  */overflow:hidden;}
	.main2 .link-wrap>div .inBox .box>div {margin-top:20px; padding:0;}
	.main2 .link-wrap>div .inBox .box>div .link {margin-top:20px; padding-top:20px; border-top:1px dashed #eaeaea;}
	.main2 .link-wrap>div .inBox .box>div .link li {float:left; width:50%; padding-right:30px;}
	.main2 .link-wrap>div .inBox .box>div .link li a {
		width:100%; display:inline-block; padding-left:17px; padding-right:100px; position:relative;
		font-size:18px; font-weight:300;
		background:url(../images/main/arrow-right.png)no-repeat calc(100% - 10px) center;)
	}
	.main2 .link-wrap>div .inBox .box>div .link li a:before {
		position:absolute; top:15px; left:5px;
		content:""; display:block; background:#000; width:5px; height:2px;
	}
	
	.main2 .link-wrap>div .inBox .box>div .link li a:hover {
		background:url(../images/main/arrow-right-on.png)no-repeat right center;)
	}
	.main2 .link-wrap>div .inBox:nth-child(1) .box>div .link li a:hover {color:#7094ef;}
	.main2 .link-wrap>div .inBox:nth-child(2) .box>div .link li a:hover {color:#fea42f;}
	.main2 .link-wrap>div .inBox:nth-child(3) .box>div .link li a:hover {color:#87c83a;}
	.main2 .link-wrap>div .inBox:nth-child(1) .box>div .link li a:hover:before {background:#7094ef;}
	.main2 .link-wrap>div .inBox:nth-child(2) .box>div .link li a:hover:before {background:#fea42f;}
	.main2 .link-wrap>div .inBox:nth-child(3) .box>div .link li a:hover:before {background:#87c83a;}
	
}


/* ********************************* 767이하 ********************************* */
@media screen and (max-width:767px){
	
	/* body {border:10px solid red;} */
	
	/*text::*/
	.main .visual {height:500px;}
	.main .visual .copy {padding:5vh 20vw 2vh;}
	.main .visual .copy .up li {font-size:3em;}
	
	.main .visual .copy .down {height:30%;}
	.main .visual .copy .down li {font-size:15px;}	
	
	.main .photo-part,
	.main .notice-wrap,
	.main2 .link-wrap {padding:20px !important;}
	
	.main .notice-wrap>div>article a {padding:10px 5px; font-size:14px;}
	.main .notice-wrap ul.subject-next-date li a span {right:20px;}
	.main2 .link-wrap>div .inBox .box>div .link li {width:100%; padding-right:0;}
	.main2 .link-wrap>div .inBox .box>div .link li+li {margin-top:5px;}
	
}