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


/* ********************************* PC over : 992 ~  ********************************* */
@media screen and (min-width:992px), print{
	
	/*공통::*/
	section.main {max-width:100%; padding-bottom:80px;}
	.main div[class*="-wrap"] {width:1200px; max-width:100%; margin:0 auto;}
	.main .slider div[class*="-wrap"] {z-index:99; position:relative;}
	
	
	/*개별::슬라이더*/
	.main .slider {max-width:100%; height:760px; min-height:500px; text-align:center; position:relative;}
	.main .slider:before {position:absolute; content:""; top:0; left:0; width:100%; height:100%; background:rgba(60,193,149,.15); z-index:1;}
	.main .slider:after {position:absolute; content:""; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.2); z-index:1;}
	
	.main .slider .txt-wrap {padding-top:115px; text-align:left;}
	.main .slider .txt-wrap h2 {
		color:#fff; letter-spacing:-.3vw; font-size:120px; line-height:1.1;
		font-family:'BMJUA'; text-shadow:5px 5px 5px rgba(0,0,0,.1); font-weight:normal;
	}
	.main .slider .txt-wrap p {font-size:18px; color:#fff; letter-spacing:-.05vw; line-height:1.6; padding-top:40px;}
	
	
	/*공통::*/
	.main h3.tit {font-size:30px; font-weight:500; line-height:1; letter-spacing:-2px; color:#000;}
	.main p.tit-next {font-size:16px; line-height:1; letter-spacing:-.5px; color:#999;}
	.main div[class*="quick-"] ul li a h3 {font-size:24px; font-weight:400; color:#fff; letter-spacing:-1px;}
	.main div[class*="quick-"] ul li a p {display:inline-block; font-size:14px; font-weight:300; color:#fff; opacity:.5; line-height:1.6; margin-top:15px; transition-duration:.3s !important;}
	.main div[class*="quick-"] ul li a:hover p {opacity:.8;}
	.main div[class*="quick-"] ul li a span {
		position:absolute; bottom:50px; left:50px;
		background-repeat:no-repeat;
		background-position:center;
		width:51px; height:51px;
	}
		.main div[class*="quick-"] ul li a.i-01 span {background-image:url(../images/main/i-01.png);}
		.main div[class*="quick-"] ul li a.i-02 span {background-image:url(../images/main/i-02.png);}
		.main div[class*="quick-"] ul li a.i-03 span {background-image:url(../images/main/i-03.png);}
		.main div[class*="quick-"] ul li a.i-04 span {background-image:url(../images/main/i-04.png);}
		.main div[class*="quick-"] ul li a.i-05 span {background-image:url(../images/main/i-05.png);}
		.main div[class*="quick-"] ul li a.i-06 span {background-image:url(../images/main/i-06.png);}
		
	.main div[class*="quick-"] ul li a article {
		position:absolute; bottom:50px; right:50px;
		background:url(../images/main/arrow-right.png)no-repeat center right;
		width:56px; height:17px;
		transition-duration:.3s !important;
	}
	.main div[class*="quick-"] ul li a:hover article {right:40px;}
	
	/*퀵메뉴::공통*/
	.main div[class*="quick-"]>* {width:50%; display:inline-block; float:left;}
	.main div[class*="quick-"]>ul {overflow:hidden; text-align:left;}
	.main div[class*="quick-"]>ul>li {float:left; width:50%; height:300px;}
	.main div[class*="quick-"]>ul>li>a {display:inline-block; width:100%; height:100%; padding:50px; position:relative;}
	
	.bgc-gre {background-color:#3ec095;}
	.bgc-gre2 {background-color:#089685;}
	.bgc-yel {background-color:#ffc716;}
	.bgc-pin {background-color:#ff6c80;}
	.bgc-blu {background-color:#3963b1;}
	.bgc-blu2 {background-color:#263a5d;}
	
	/*퀵메뉴-단독*/
	.main .quick-single-wrap {position:absolute !important; bottom:0; left:50% !important; margin-left:-600px !important;}
	.main .quick-single-wrap article.i-animal {height:300px; background:url(../images/main/i-animal.png)no-repeat center bottom;}
	
	
	/* 알림마당 */
	.main .quick-include-wrap>article {padding-top:50px; padding-right:80px;}
	.main .quick-include-wrap>article>div {position:relative;}
	.main .quick-include-wrap>article>div>p {margin-top:15px;}
	.main .quick-include-wrap>article>div>a {
		position:absolute; top:0; right:0; display:block; content:""; width:40px; height:40px; line-height:36px;
		border:1px solid #e5e5e5; font-size:24px; color:#595959; text-align:center;
	}
	.main .quick-include-wrap>article>div>a:hover {background:#3ec095; border:1px solid #3ec095; color:#fff;}
	
	.main .quick-include-wrap>article>ul {margin-top:40px; overflow:hidden;}
	.main .quick-include-wrap>article>ul li+li {margin-top:20px;}
	.main .quick-include-wrap>article>ul li a {display:block; padding-left:30px; position:relative; line-height:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:18px; font-weight:300; color:#000;}
	.main .quick-include-wrap>article>ul li a:hover {color:#3ec095;}
	.main .quick-include-wrap>article>ul li a:before {position:absolute; top:10px; left:0; content:""; display:block; width:11px; height:1px; background:#000;}
	
	.main .quick-include-wrap>article>ul.type-quick li {float:left; display:inline-block; line-height:1 !important;}
		.main .quick-include-wrap>article>ul.type-quick li:nth-child(odd) {width:calc(50% - 10px); padding-right:10px;}
		.main .quick-include-wrap>article>ul.type-quick li:nth-child(even) {width:calc(50% - 10px); padding-left:10px;}
		.main .quick-include-wrap>article>ul.type-quick li:nth-child(2)~li {margin-top:20px;}
		
	.main .quick-include-wrap>article>ul.type-quick li+li {margin-top:0;}
	.main .quick-include-wrap>article>ul.type-quick li a {display:inline-block; border:1px solid #e5e5e5; padding:0 30px; text-align:center; width:100%; background:#f7f7f7; font-size:16px; font-weight:400; height:60px; line-height:60px;}
	.main .quick-include-wrap>article>ul.type-quick li a:before {height:2px; width:12px; background:#595959; top:30px; left:20px;}
	.main .quick-include-wrap>article>ul.type-quick li a:hover {border:1px solid #3ec095; background:#3ec095; color:#fff;}
	.main .quick-include-wrap>article>ul.type-quick li a:hover:before {background:#fff;}
	
	.main .quick-include-wrap>ul+article {padding-left:80px; padding-right:0;}
	
	
	
	/* 포토앨범 */
	.main2 {width:100% !important; max-width:100% !important; background:url(../images/main/bg-photo.jpg)center /cover no-repeat;}
	.main2 .photo-wrap {padding:80px 0; position:relative;}
	.main2 .photo-wrap h3.tit {text-align:center; font-size:40px; color:#263a5d; font-weight:700; letter-spacing:5px;}
	.main2 .photo-wrap p.tit-next {padding-top:10px; font-size:16px; color:#263a5d; font-weight:300; text-align:center;}
	.main2 .photo-wrap>div {width:1200px; margin:0 auto; max-width:100%; overflow:hidden; padding:70px 10px 0;}
	.main2 .photo-wrap>div a {float:left; display:inline-block; width:calc((100% - 120px)/3);}
	.main2 .photo-wrap>div a+a {margin-left:60px;}
	.main2 .photo-wrap>div a .img {box-shadow:5px 5px 5px rgba(0,0,0,.1); border:10px solid #fff; position:relative; transition-duration:.3s !important;}
	.main2 .photo-wrap>div a .img: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;}
	.main2 .photo-wrap>div a .img:before {width:100%; height:100%; background:rgba(0,0,0,.2); position:absolute; display:none; content:""; transition-duration:.3s !important;}
	.main2 .photo-wrap>div a:hover .img:before {display:block;}
	.main2 .photo-wrap>div a:hover .img:after {background:url(../images/common/i-luv-on.png);}
	.main2 .photo-wrap>div a:hover .img {border:1px solid #fff;}
	.main2 .photo-wrap>div a p>* {font-weight:300; color:#000; text-align:center; line-height:1; display:block;}
	.main2 .photo-wrap>div a p span:first-child {font-size:18px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; padding-top:20px;}
	.main2 .photo-wrap>div a p span:last-child {font-size:14px; padding-top:15px;}
	
	
		
	
}


/* ********************************* 모바일 ********************************* */
@media screen and (max-width:991px){
	
	body {overflow-x:hidden;}
	
	
	
	
	/*공통::*/
	section.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 .slider {max-width:100%; height:700px; min-height:500px; text-align:center; position:relative;}
	.main .slider:before {position:absolute; content:""; top:0; left:0; width:100%; height:100%; background:rgba(60,193,149,.15); z-index:1;}
	.main .slider:after {position:absolute; content:""; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.2); z-index:1;}
	
	.main .slider .txt-wrap {padding-top:150px; text-align:center;}
	.main .slider .txt-wrap h2 {
		color:#fff; letter-spacing:-.3vw; font-size:7vw; line-height:1.1;
		font-family:'BMJUA'; text-shadow:5px 5px 5px rgba(0,0,0,.1); font-weight:normal;
	}
	/* .main .slider .txt-wrap p {font-size:18px; color:#fff; letter-spacing:-.05vw; line-height:1.6; padding-top:40px;} */
	
	
	/*공통::*/
	.main h3.tit {font-size:26px; font-weight:500; line-height:1; letter-spacing:-2px; color:#000;}
	.main p.tit-next {font-size:14px; line-height:1; letter-spacing:-.5px; color:#999;}
	.main div[class*="quick-"] ul li a h3 {font-size:24px; font-weight:400; color:#fff; letter-spacing:-1px;}
	.main div[class*="quick-"] ul li a p {display:inline-block; font-size:14px; font-weight:300; color:#fff; opacity:.5; line-height:1.6; margin-top:15px; transition-duration:.3s !important;}
	.main div[class*="quick-"] ul li a p br {display:none;}
	.main div[class*="quick-"] ul li a:hover p {opacity:.8;}
	.main div[class*="quick-"] ul li a span {
		position:absolute; bottom:30px; left:40px;
		background-repeat:no-repeat;
		background-position:center;
		width:51px; height:51px;
	}
		.main div[class*="quick-"] ul li a.i-01 span {background-image:url(../images/main/i-01.png);}
		.main div[class*="quick-"] ul li a.i-02 span {background-image:url(../images/main/i-02.png);}
		.main div[class*="quick-"] ul li a.i-03 span {background-image:url(../images/main/i-03.png);}
		.main div[class*="quick-"] ul li a.i-04 span {background-image:url(../images/main/i-04.png);}
		.main div[class*="quick-"] ul li a.i-05 span {background-image:url(../images/main/i-05.png);}
		.main div[class*="quick-"] ul li a.i-06 span {background-image:url(../images/main/i-06.png);}
		
	.main div[class*="quick-"] ul li a article {
		position:absolute; bottom:30px; right:50px;
		background:url(../images/main/arrow-right.png)no-repeat center right;
		width:56px; height:17px;
		transition-duration:.3s !important;
	}
	.main div[class*="quick-"] ul li a:hover article {right:30px;}
	
	/*퀵메뉴::공통*/
	.main div[class*="quick-"]>* {width:100%; display:inline-block; float:left;}
	.main div[class*="quick-"]>ul {overflow:hidden; text-align:left; display:table; width:100%;}
	.main div[class*="quick-"]>ul>li {display:table-cell; width:50%; vertical-align:top;}
	.main div[class*="quick-"]>ul>li>a {display:inline-block; width:100%; height:100%; padding:30px 40px 120px 40px; position:relative;}
	
	.bgc-gre {background-color:#3ec095;}
	.bgc-gre2 {background-color:#089685;}
	.bgc-yel {background-color:#ffc716;}
	.bgc-pin {background-color:#ff6c80;}
	.bgc-blu {background-color:#3963b1;}
	.bgc-blu2 {background-color:#263a5d;}
	
	/*퀵메뉴-단독*/
	.main .quick-single-wrap {position:absolute !important; bottom:0;}
	.main .quick-single-wrap:before {position:absolute; width:100%; height:150px; background:url(../images/main/i-animal.png)no-repeat center bottom; background-size:30%; top:-150px;}
	.main .quick-single-wrap article.i-animal {display:none;}
	.main .quick-single-wrap>ul {width:100%;}
	
	
	/* 알림마당 */
	.main .quick-include-wrap>article {padding:30px 40px;}
	.main .quick-include-wrap>article>div {position:relative;}
	.main .quick-include-wrap>article>div>p {margin-top:15px;}
	.main .quick-include-wrap>article>div>a {
		position:absolute; top:0; right:0; display:block; content:""; width:40px; height:40px; line-height:36px;
		border:1px solid #e5e5e5; font-size:24px; color:#595959; text-align:center;
	}
	.main .quick-include-wrap>article>div>a:hover {background:#3ec095; border:1px solid #3ec095; color:#fff;}
	
	.main .quick-include-wrap>article>ul {margin-top:30px; overflow:hidden;}
	.main .quick-include-wrap>article>ul li+li {margin-top:20px;}
	.main .quick-include-wrap>article>ul li a {display:block; padding-left:30px; position:relative; line-height:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:16px; font-weight:300; color:#000;}
	.main .quick-include-wrap>article>ul li a:hover {color:#3ec095;}
	.main .quick-include-wrap>article>ul li a:before {position:absolute; top:10px; left:0; content:""; display:block; width:11px; height:1px; background:#000;}
	
	.main .quick-include-wrap>article>ul.type-quick li {float:left; display:inline-block; line-height:1 !important; padding:10px; width:50%;}
		/* .main .quick-include-wrap>article>ul.type-quick li:nth-child(odd) {width:calc(50% - 10px); padding-right:10px;} */
		/* .main .quick-include-wrap>article>ul.type-quick li:nth-child(even) {width:calc(50% - 10px); padding-left:10px;} */
		/* .main .quick-include-wrap>article>ul.type-quick li:nth-child(2)~li {margin-top:20px;} */
		
	.main .quick-include-wrap>article>ul.type-quick li+li {margin-top:0;}
	.main .quick-include-wrap>article>ul.type-quick li a {display:inline-block; border:1px solid #e5e5e5; padding:0 30px; text-align:center; width:100%; background:#f7f7f7; font-size:16px; font-weight:400; height:60px; line-height:60px;}
	.main .quick-include-wrap>article>ul.type-quick li a:before {height:2px; width:12px; background:#595959; top:30px; left:20px;}
	.main .quick-include-wrap>article>ul.type-quick li a:hover {border:1px solid #3ec095; background:#3ec095; color:#fff;}
	.main .quick-include-wrap>article>ul.type-quick li a:hover:before {background:#fff;}
	
	/* .main .quick-include-wrap>ul+article {padding-left:80px; padding-right:0;} */
	
	
	
	/* 포토앨범 */
	.main2 {width:100% !important; max-width:100% !important; background:url(../images/main/bg-photo.jpg)center /cover no-repeat;}
	.main2 .photo-wrap {padding:50px 0; position:relative;}
	.main2 .photo-wrap h3.tit {text-align:center; font-size:34px; color:#263a5d; font-weight:700; letter-spacing:3px;}
	.main2 .photo-wrap p.tit-next {padding-top:10px; font-size:16px; color:#263a5d; font-weight:300; text-align:center;}
	.main2 .photo-wrap>div {width:100%; margin:0 auto; max-width:100%; overflow:hidden; padding:10px 40px;}
	.main2 .photo-wrap>div a {float:left; display:inline-block; width:100%; margin-top:40px;}
	.main2 .photo-wrap>div a+a {}
	.main2 .photo-wrap>div a .img {box-shadow:5px 5px 5px rgba(0,0,0,.1); border:10px solid #fff; position:relative; transition-duration:.3s !important; height:500px !important;}
	.main2 .photo-wrap>div a .img: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;}
	.main2 .photo-wrap>div a .img:before {width:100%; height:100%; background:rgba(0,0,0,.2); position:absolute; display:none; content:""; transition-duration:.3s !important;}
	.main2 .photo-wrap>div a:hover .img:before {display:block;}
	.main2 .photo-wrap>div a:hover .img:after {background:url(../images/common/i-luv-on.png);}
	.main2 .photo-wrap>div a:hover .img {border:1px solid #fff;}
	.main2 .photo-wrap>div a p>* {font-weight:300; color:#000; text-align:center; line-height:1; display:block;}
	.main2 .photo-wrap>div a p span:first-child {font-size:18px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; padding-top:20px;}
	.main2 .photo-wrap>div a p span:last-child {font-size:14px; padding-top:15px;}
	
	

	
	
}



/* ************************ 모바일 (~767) ************************ */
@media screen and (max-width: 767px) {
	
	
	.main .slider {height:500px;}
	.main .slider .txt-wrap {padding-top:50px; padding-left:30px; padding-right:30px;}
	.main .slider .txt-wrap h2 {font-size:10vw;}
	.main .quick-single-wrap:before {background-size:50%;}
	
	.main div[class*="quick-"] ul li a h3 {font-size:20px;}
	.main div[class*="quick-"]>ul>li>a {padding:30px 20px 100px 20px;}
	.main div[class*="quick-"] ul li a span {left:20px; width:41px; height:41px; background-size:cover;}
	.main div[class*="quick-"] ul li a article {right:30px;}
	.main div[class*="quick-"] ul li a:hover article {right:20px;}
	.main div[class*="quick-"] ul li a p {word-break:keep-all;}
	
	.main .quick-include-wrap>article {padding:30px 20px;}
	
	.main h3.tit {font-size:22px;}
	.main .quick-include-wrap>article>div.include-link {padding-right:60px;}
	.main .quick-include-wrap>article>div>p {line-height:1.6;}
	.main .quick-include-wrap>article>ul li a {padding-left:20px;}
	.main .quick-include-wrap>article>ul li a:before {width:8px; top:9px;}
	
	.main .quick-include-wrap>article>ul.type-quick li {padding:5px;}
	/* .main .quick-include-wrap>article>ul.type-quick li+li {margin-top:10px;} */
	.main .quick-include-wrap>article>ul.type-quick li a {font-size:.8em; padding:0;}
	.main .quick-include-wrap>article>ul.type-quick li a:before {display:none;}
	
	.main2 .photo-wrap {padding:30px 20px;}
	.main2 .photo-wrap h3.tit {font-size:28px; letter-spacing:1px;}
	.main2 .photo-wrap p.tit-next {font-size:14px; word-break:keep-all;}
	.main2 .photo-wrap>div {padding:0;}
	.main2 .photo-wrap>div a .img {height:300px !important;}
	.main2 .photo-wrap>div a .img:after {top:30px; left:30px;}
	.main2 .photo-wrap>div a p span:first-child {font-size:16px;}
	
	
	
	
}