@charset "utf-8";

/* 메인페이지 스타일만 정의 */

.main {}
.catch {display:block !important;}
header {top:120px !important;}

/* ************************ PC (992~) ************************ */
@media screen and (min-width: 992px) {
	
	.main {margin-top:40px;}
	article {padding-bottom:50px;}
	#gotop {display:block !important;}

	
	/* ******* 슬라이드 ******* */
	.slideWrap {width:calc((100%/2) - 10px); height:320px; display:flex; gap:20px; flex-direction:column; flex-wrap:wrap;}
	.slideWrap .swiper-container {width:100%; height:100%; border-radius:20px;}
	.slideWrap .swiper-slide {display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
	.slideWrap .swiper-slide img {width:100%; height:100%; object-fit:cover;}
	.slideWrap .swiper-button-prev, .swiper-container-rtl .swiper-button-next {background-image: url(../images/common/i-arrow.png); left: 20px; right: auto; width: 45px; height: 45px; background-size:45px;}	
	.slideWrap .swiper-button-next, .swiper-container-rtl .swiper-button-prev {background-image: url(../images/common/i-arrow.png);right: 20px; left: auto; width: 45px; height: 45px; background-size:45px; transform: rotate(180deg);}
	.slideWrap .swiper-pagination-bullet {width: 13px;height: 13px;display: inline-block;border-radius: 100%;background: #000;opacity: 1;border:2px solid #fff;}
	.slideWrap .swiper-pagination-bullet-active {opacity: 1;background: #0087c3;border:2px solid #fff;}
	.slideWrap .slideWrap .swiper-pagination {position: absolute;bottom: 0px;left: 50%;transform: translate(-50%, -50%);width: auto !important;margin: 0;}
	
	/* ******* 공지사항 ******* */
	.noticeWrap {width:100%; max-width:590px; height:320px; background:#0087c3; border-radius:20px; padding:50px; color:#fff;}
	.noticeWrap h3 {font-size:24px; font-weight:600;}
	.noticeWrap>div {display:flex; justify-content: space-between;}
	.noticeWrap div a {color:#0087c3; border-radius:100px; background:#fff url(../images/common/i-arrow-b.png) no-repeat 85px; padding:10px 25px 10px 15px; font-size:14px;}
	.noticeWrap div a:nth-child(2) {background:#fff url(../images/common/i-arrow-b.png) no-repeat 72px;}
	.noticeWrap ul {margin-top:34px;}
	.noticeWrap ul li {line-height:1.4;}
	.noticeWrap ul li a {width: calc(100% - 100px); display:inline-block; position:relative; color:#fff !important; padding-left:14px; font-size:18px; margin-bottom: 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
	.noticeWrap ul li a:hover {text-decoration:underline !important;}
	.noticeWrap ul li a:before {position:absolute; content:""; top:50%; left:0; width:4px; height:4px; background:#fff;}
	.noticeWrap ul li span {width:95px; float:right;}
	
	/* ******* 퀵메뉴 ******* */
	.quickWrap {overflow:hidden;}
	.quickWrap li {position:relative; width: calc(100% / 8); float:left; text-align:center;}
	.quickWrap li:before {position:absolute; top:50%; right:0; content:""; width:7px; height:7px; border-radius:100px; background:#e5e5e5;}
	.quickWrap li:nth-child(8):before {content:none;}
	.quickWrap li:nth-child(1) i {background:url(../images/main/quick-1.png) no-repeat center top;}
	.quickWrap li:nth-child(2) i {background:url(../images/main/quick-2.png) no-repeat center top;}
	.quickWrap li:nth-child(3) i {background:url(../images/main/quick-3.png) no-repeat center top;}
	.quickWrap li:nth-child(4) i {background:url(../images/main/quick-4.png) no-repeat center top;}
	.quickWrap li:nth-child(5) i {background:url(../images/main/quick-5.png) no-repeat center top;}
	.quickWrap li:nth-child(6) i {background:url(../images/main/quick-6.png) no-repeat center top;}
	.quickWrap li:nth-child(7) i {background:url(../images/main/quick-7.png) no-repeat center top;}
	.quickWrap li:nth-child(8) i {background:url(../images/main/quick-8.png) no-repeat center top;}
	.quickWrap li a {width:100%; height:105px; display:inline-block; font-size:18px; color:#000;}
	.quickWrap li a i {display:block; width:100%; height:80px;}
	.quickWrap li:hover a {color:#0087c3;}
	.quickWrap li:hover i {transform: rotateY(360deg); transition: transform .8s;}
	
	/* ******* 포토갤러리 ******* */
	.galleryWrap {text-align:center; margin-top:50px;}
	.galleryWrap .title {margin-bottom:30px;}
	.galleryWrap .title h3 {font-size:30px; font-family:'NEXON Bold'; margin-bottom:5px; color:#0087c3;}
	.galleryWrap .title>span {font-size:15px;}

	.galleryWrap ul {overflow:hidden;}
	.galleryWrap ul li {width: calc((100% - 60px)/4); float:left; margin-right:20px;}
	.galleryWrap ul li:last-child {margin-right:0;}
	.galleryWrap ul li .imgWrap {position:relative; display:block; overflow:hidden; border-radius:20px; height:195px; background:#fff; border:1px solid #ebebeb;}
	.galleryWrap ul li .imgWrap .img {position:absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all 1s ease !important; -webkit-transition: all 1s ease !important; -moz-transition: all 1s ease !important;}
	.galleryWrap ul li a:hover .imgWrap .img {transform: scale(1.1);}
	.galleryWrap ul li .con {padding-top:20px;}
	.galleryWrap ul li .con p {height:45px; overflow: hidden; font-size:18px; color:#000; line-height:1.2;}
	
	
	
	  
	  
	  
	  
	  
}	  

/* ************************ 태블릿 (0~991) ************************ */
@media screen and (max-width: 991px) {
	
	.main {margin:20px;}
	hr {margin-top:50px; margin-bottom:35px; width: 100vw; margin-left: calc(-50vw + 50%);}

	/* ******* 슬라이드 ******* */
	.slideWrap {width:calc((100%/2) - 10px); height:320px; display:flex; gap:20px; flex-direction:column; flex-wrap:wrap;}
	.slideWrap .swiper-container {width:100%; height:100%; border-radius:20px;}
	.slideWrap .swiper-slide {display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}
	.slideWrap .swiper-slide img {width:100%; height:100%; object-fit:cover;}
	.slideWrap .swiper-button-prev, .swiper-container-rtl .swiper-button-next {background-image: url(../images/common/i-arrow.png); left: 20px; right: auto; width: 45px; height: 45px; background-size:45px;}	
	.slideWrap .swiper-button-next, .swiper-container-rtl .swiper-button-prev {background-image: url(../images/common/i-arrow.png);right: 20px; left: auto; width: 45px; height: 45px; background-size:45px; transform: rotate(180deg);}
	.slideWrap .swiper-pagination-bullet {width: 13px;height: 13px;display: inline-block;border-radius: 100%;background: #000;opacity: 1;border:2px solid #fff;}
	.slideWrap .swiper-pagination-bullet-active {opacity: 1;background: #0087c3;border:2px solid #fff;}
	.slideWrap .slideWrap .swiper-pagination {position: absolute;bottom: 0px;left: 50%;transform: translate(-50%, -50%);width: auto !important;margin: 0;}
	
	/* ******* 공지사항 ******* */
	.noticeWrap {width:100%; max-width:590px; height:320px; background:#0087c3; border-radius:20px; padding:50px; color:#fff;}
	.noticeWrap h3 {font-size:24px; font-weight:600;}
	.noticeWrap>div {display:flex; justify-content: space-between;}
	.noticeWrap div a {color:#0087c3; border-radius:100px; background:#fff url(../images/common/i-arrow-b.png) no-repeat 85px; padding:10px 25px 10px 15px; font-size:14px;}
	.noticeWrap div a:nth-child(2) {background:#fff url(../images/common/i-arrow-b.png) no-repeat 72px;}
	.noticeWrap ul {margin-top:34px;}
	.noticeWrap ul li {line-height:1.4;}
	.noticeWrap ul li a {width: calc(100% - 100px); display:inline-block; position:relative; color:#fff !important; padding-left:14px; font-size:18px; margin-bottom: 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
	.noticeWrap ul li a:hover {text-decoration:underline !important;}
	.noticeWrap ul li a:before {position:absolute; content:""; top:50%; left:0; width:4px; height:4px; background:#fff;}
	.noticeWrap ul li span {width:95px; float:right;}
	
	/* ******* 퀵메뉴 ******* */
	.quickWrap {overflow:hidden; border-radius: 10px; box-shadow: 5px 5px 10px rgb(0 0 0 / 5%); margin:50px 0 0 0; border-left:1px solid #eee; border-top:1px solid #eee;}
	.quickWrap li {position:relative; width: calc(100% / 4); float:left; text-align:center; padding:25px 0; border:1px solid #eee; border-top:none; border-left:none;}
	.quickWrap li:nth-child(1) i {background:url(../images/main/quick-1.png) no-repeat center top;}
	.quickWrap li:nth-child(2) i {background:url(../images/main/quick-2.png) no-repeat center top;}
	.quickWrap li:nth-child(3) i {background:url(../images/main/quick-3.png) no-repeat center top;}
	.quickWrap li:nth-child(4) i {background:url(../images/main/quick-4.png) no-repeat center top;}
	.quickWrap li:nth-child(5) i {background:url(../images/main/quick-5.png) no-repeat center top;}
	.quickWrap li:nth-child(6) i {background:url(../images/main/quick-6.png) no-repeat center top;}
	.quickWrap li:nth-child(7) i {background:url(../images/main/quick-7.png) no-repeat center top;}
	.quickWrap li:nth-child(8) i {background:url(../images/main/quick-8.png) no-repeat center top;}
	.quickWrap li a {width:100%; height:105px; display:inline-block; font-size:18px; color:#000;}
	.quickWrap li a i {display:block; width:100%; height:80px;}
	.quickWrap li:hover a {color:#0087c3;}
	.quickWrap li:hover i {transform: rotateY(360deg); transition: transform .8s;}
	
	/* ******* 포토갤러리 ******* */
	.galleryWrap {text-align:center; margin-top:50px;}
	.galleryWrap .title {margin-bottom:30px;}
	.galleryWrap .title h3 {font-size:30px; margin-bottom:5px; color:#0087c3;}
	.galleryWrap .title>span {font-size:15px;}

	.galleryWrap ul {overflow:hidden;}
	.galleryWrap ul li {width: calc((100% - 20px)/2); float:left;}
	.galleryWrap ul li:nth-child(-n+2) {margin-bottom:20px;}
	.galleryWrap ul li+li {margin-left:20px;}
	.galleryWrap ul li:nth-child(3) {margin-left:0}
	
	.galleryWrap ul li .imgWrap {position:relative; display:block; overflow:hidden; border-radius:20px; height:260px; background:#fff; border:1px solid #ebebeb;}
	.galleryWrap ul li .imgWrap .img {position:absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all 1s ease !important; -webkit-transition: all 1s ease !important; -moz-transition: all 1s ease !important;}
	.galleryWrap ul li a:hover .imgWrap .img {transform: scale(1.1);}
	.galleryWrap ul li .con {padding-top:20px;}
	.galleryWrap ul li .con p {height:45px; overflow: hidden; font-size:18px; color:#000; line-height:1.2;}

	
	
}


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

	/* ******* 슬라이드 ******* */
	.slideWrap {width:100%; height:100%; gap:0;}
	.slideWrap .swiper-container {height:100%; border-radius:10px;}
	.slideWrap .swiper-button-prev, .swiper-container-rtl .swiper-button-next {background-image: url(../images/common/i-arrow.png); left: 0px; right: auto; width: 45px; height: 45px; background-size:45px;}	
	.slideWrap .swiper-button-next, .swiper-container-rtl .swiper-button-prev {background-image: url(../images/common/i-arrow.png);right: 0px; left: auto; width: 45px; height: 45px; background-size:45px; transform: rotate(180deg);}
	
	/* ******* 공지사항 ******* */ 
	.noticeWrap {max-width:100%; height:100%; margin-top:20px; padding:20px; border-radius:10px;}
	.noticeWrap h3 {font-size:20px;}
	.noticeWrap>div {align-items: center; overflow: hidden;}
	.noticeWrap>div div {margin-bottom: 5px; margin-top: 5px; float: right;}
	.noticeWrap ul {margin-top:30px;}
	.noticeWrap ul li {line-height:1; margin-bottom:7px;}
	.noticeWrap ul li:last-child {margin-bottom:0;}
	.noticeWrap ul li a {font-size:15px;}
	.noticeWrap div a {padding:8px 25px 8px 15px;}
	

	/* ******* 퀵메뉴 ******* */
	.quickWrap {overflow:hidden; margin-top:20px;}
	.quickWrap li {position:relative; width: 50%; float:left; text-align:center;}
	.quickWrap p {font-size:16px;}
	
	/* ******* 포토갤러리 ******* */
	.galleryWrap {margin-top:20px;}
	.galleryWrap .title {margin-bottom:20px;}
	.galleryWrap ul li .con p {height:100%;}
	.galleryWrap .title h3 {line-height:1.2;}
	.galleryWrap ul li {float:none; width:100%; margin-bottom:20px;}
	.galleryWrap ul li+li {margin-left:0}
	.galleryWrap ul li:last-child {margin-bottom:0}
	.galleryWrap ul li .imgWrap {height:280px;}
		
}