@charset "utf-8";

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

.main {}


/* ************************ PC (992~) ************************ */
@media screen and (min-width: 992px) {
	
	.main {}
	.main .main-visual {height:calc(100vh - 150px);}
	.main-slider .slide-item {height:calc(100vh - 150px);}
	.main-slider-txt {width:1200px; position:absolute; top:250px; left:calc(50% - 600px); z-index:9; color:#fff; text-align:center;}
	.main-slider-txt h2 {padding:0 0 30px; font-size:50px; font-weight:700; position:relative; font-family:'NanumGothic'; line-height:1.3;}
	.main-slider-txt p {font-size:18px; font-weight:400; line-height:1.9;}
	
	/* 버튼 */
	.main .main-slider .slick-arrow {top:calc(100% - 150px);}
	.main .main-slider .slick-arrow::before {content:''; width:12px; height:20px;}
	.main .main-slider .slick-arrow::before {}
	.main .main-slider .slick-prev {left:calc(50% - 150px);}
	.main .main-slider .slick-next {left:calc(50% + 150px);}
	.main .slick-next:before {background:url(../images/main/slider-arrow-right.svg)center /100% no-repeat;}
	.main .slick-prev:before {background:url(../images/main/slider-arrow-left.svg)center /100% no-repeat;}
	/* 페이징 */
	.main .main-slider .slick-dots {width:20%; left:55%; bottom:150px;}
	.main .main-slider .slick-dots:before {content:''; display:block; width:62%; height:40px; position:absolute; left:-15px; top:-20px; background:#000; z-index:9; opacity:0;}
	.main .main-slider .slick-dots > li {width:50%; position:absolute; left:0; top:0; opacity:0;}
	.main .main-slider .slick-dots > li > button {background-color:rgba(255,255,255,0);}
	.main .main-slider .slick-dots > li > button > .s-indicator {overflow:visible; left:0; transform:none; width:100%;}
	.main .main-slider .slick-dots > li > button > .s-indicator > .inner-txt {opacity:1; transform:translate(-25px,50%); text-align:left; font-family:'NanumGothic'; font-size:21px; font-weight:400;}
	/* .main .main-slider .slick-dots > li:nth-child(1) > button > .s-indicator > .inner-txt {transform:translate(-25px,50%);} */
	.main .main-slider .slick-dots > li > button:hover > .s-indicator > .inner-txt {transform:translate(-25px,50%); padding-bottom:0;}
	.main .main-slider .slick-dots > li > button > .s-line-fill {background-color:#f00;}
	.main .main-slider .slick-dots > li > button > .total {position:absolute; left:108%; bottom:-12px; font-family:'NanumGothic'; font-size:21px; font-weight:400; color:#fff;}
	
	.main .main-slider .slick-dots > li.slick-active {opacity:1;}
	.main .main-slider .slick-dots > li.slick-active > button {background-color:rgba(255,255,255,.3);}
	.main .main-slider .slick-dots > li.slick-active > button > .s-indicator > .inner-txt {opacity:1;}
	.main .main-slider .slick-dots > li.slick-active > button > .s-line-fill {animation:slick-progressbar 5s 1;}
	
	.main-community {padding:100px 0;}
	.main-community-tab {text-align:center; padding-bottom:40px;}
	.main-community-tab button {padding-bottom:2px; border-bottom:4px solid;margin:0 5px; font-size:36px; font-weight:700; color:#999; display:inline-block; font-family:'NanumGothic'; line-height:1;}
	.main-community-tab button.on {color:#003685;}
	.main-community-inner {}
	.main-community-inner>div {display:none;}
	.main-community-inner>div.on {display:block;}
	.main-community ul li a {padding:35px 200px 35px 100px; display:block; position:relative; border-bottom:1px solid #666;opacity:.7; transition:all .2s;}
	.main-community ul li:hover a {opacity:1; border-color:#003685;}
	.main-community ul li span {position:absolute; left:0; top:26px; line-height:1; font-size:14px; text-align:center;}
	.main-community ul li span b {display:block; font-size:42px; color:#003685; padding-bottom:10px; font-weight:700;}
	.main-community ul li p.tit {padding-bottom:15px; font-size:21px; font-weight:700; color:#000; line-height:1; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
	.main-community ul li p.desc {line-height:1; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
	.main-community ul li i.plus {width:55px; height:55px; border:1px solid #999; border-radius:50%; display:block; position:absolute; right:0; top:33px; transition:all .2s;}
	.main-community ul li i.plus:before, .main-community ul li i.plus:after {content:''; display:block;position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:#999; transition:all .2s;}
	.main-community ul li i.plus:before {width:22px; height:2px; }
	.main-community ul li i.plus:after {width:2px; height:22px;}
	.main-community ul li:hover i.plus {background:#003685; border-color:transparent}
	.main-community ul li:hover i.plus:before {background:#fff;}
	.main-community ul li:hover i.plus:after {background:#fff;}
	
	
	.main-tit {padding-bottom:50px; text-align:center; font-size:36px; font-weight:700; font-family:'NanumGothic'; color:#fff; line-height:1;}
	.main-tit.blue {color:#003685;}
	
	.main-gallery {padding:100px 0; background:url(../images/main/gallery-img.jpg)center /cover no-repeat; position:relative;}
	.main-gallery-tit {position:absolute; left:0; top:100px;}
	.main-gallery-wrap {}
	.main-gallery-slider.swiper-container {padding-bottom:45px;}
	.main-gallery-wrapper .slick-slide {margin:0 10px;}
	.main-gallery-item a {display:block; position:relative;}
	.main-gallery-item a:after {content:''; display:flex;align-items:center; justify-content:center; position:absolute; left:0;top:0; right:0;bottom:0;transition:all .3s; color:#fff; opacity:0; background:rgba(0,0,0,.7);}
	.main-gallery-item a:hover:after {opacity:1;}
	.main-gallery-item .img {height:400px;}
	
	.main-gallery .swiper-container-horizontal>.swiper-pagination {top:auto; left:0; bottom:0; height:5px; background:rgba(255,255,255,.4);}
	.main-gallery .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#ef3f3e;}
	
	.viewBtn {opacity:0; position:fixed; width:100px; height:100px; border:1px solid; display:flex; justify-content:center; align-items:center; color:#fff; border-radius:50%; z-index:99; /*transform:translate(-50%,-50%);*/}
	.viewBtn.on {opacity:1;}
	
	
	.main-about {padding:100px 0;}
	.main-about-list {}
	.main-about-list ul {text-align:center;}
	.main-about-list ul li {display:inline-block; padding:0 35px;}
	.main-about-list ul li a {}
	.main-about-list ul li i {display:flex; justify-content:center;	align-items:center; width:150px; height:150px; border:1px solid #e5e5e5; border-radius:50%; transition:border .2s;}
	.main-about-list ul li:hover i {border-color:#003685; transform:rotateY(360deg); transition:transform .5s;}
	.main-about-list ul li p {font-size:18px; color:#000; font-weight:400; line-height:1; padding-top:25px;}
	
	
}

/* ************************ 태블릿 (0~991) ************************ */
@media screen and (max-width: 991px) {
	
	.main {}
	.main .main-visual {height:500px;}
	.main-slider .slide-item {height:500px;}
	.main-slider-txt {padding:0 20px; position:absolute; top:130px; left:0; width:100%; z-index:9; color:#fff; text-align:center;}
	.main-slider-txt h2 {padding:0 0 15px; font-size:42px; font-weight:700; position:relative; font-family:'NanumGothic'; line-height:1.3;}
	.main-slider-txt p {font-size:18px; font-weight:400; line-height:1.9;}
	
	/* 버튼 */
	.main .main-slider .slick-arrow {top:calc(100% - 50px);}
	.main .main-slider .slick-arrow::before {content:''; width:12px; height:20px;}
	.main .main-slider .slick-arrow::before {}
	.main .main-slider .slick-prev {left:30%;}
	.main .main-slider .slick-next {left:70%;}
	.main .slick-next:before {background:url(../images/main/slider-arrow-right.svg)center /100% no-repeat;}
	.main .slick-prev:before {background:url(../images/main/slider-arrow-left.svg)center /100% no-repeat;}
	/* 페이징 */
	.main .main-slider .slick-dots {width:30%; left:50%; bottom:50px;}
	.main .main-slider .slick-dots:before {content:''; display:block; width:62%; height:40px; position:absolute; left:-15px; top:-20px; background:#000; z-index:9; opacity:0;}
	.main .main-slider .slick-dots > li {width:100%; position:absolute; left:0; top:0; opacity:0;}
	.main .main-slider .slick-dots > li > button {background-color:rgba(255,255,255,0);}
	.main .main-slider .slick-dots > li > button > .s-indicator {overflow:visible; left:0; transform:none; width:100%;}
	.main .main-slider .slick-dots > li > button > .s-indicator > .inner-txt {opacity:1; transform:translate(-25px,50%); text-align:left; font-family:'NanumGothic'; font-size:19px; font-weight:300;}
	/* .main .main-slider .slick-dots > li:nth-child(1) > button > .s-indicator > .inner-txt {transform:translate(-25px,50%);} */
	.main .main-slider .slick-dots > li > button:hover > .s-indicator > .inner-txt {transform:translate(-25px,50%); padding-bottom:0;}
	.main .main-slider .slick-dots > li > button > .s-line-fill {background-color:#f00;}
	.main .main-slider .slick-dots > li > button > .total {position:absolute; left:108%; bottom:-9px; font-family:'NanumGothic'; font-size:19px; font-weight:300; color:#fff;}
	
	.main-slider .slick-dots > li > button, 
	.main-slider .slick-dots > li > button > .s-line-fill {height:3px;}

	.main .main-slider .slick-dots > li.slick-active {opacity:1;}
	.main .main-slider .slick-dots > li.slick-active > button {background-color:rgba(255,255,255,.3);}
	.main .main-slider .slick-dots > li.slick-active > button > .s-indicator > .inner-txt {opacity:1;}
	.main .main-slider .slick-dots > li.slick-active > button > .s-line-fill {animation:slick-progressbar 5s 1;}
	
	.main-community {padding:50px 20px;}
	.main-community-tab {text-align:center; padding-bottom:20px;}
	.main-community-tab button {padding-bottom:2px; border-bottom:3px solid;margin:0 5px; font-size:30px; font-weight:400; color:#999; display:inline-block; font-family:'NanumGothic'; line-height:1;}
	.main-community-tab button.on {color:#003685;}
	.main-community-inner {}
	.main-community-inner>div {display:none;}
	.main-community-inner>div.on {display:block;}
	.main-community ul li a {padding:20px 100px 20px 80px; display:block; position:relative; border-bottom:1px solid #666;opacity:.7; transition:all .2s;}
	.main-community ul li:hover a {opacity:1; border-color:#003685;}
	.main-community ul li span {position:absolute; left:0; top:10px; line-height:1; font-size:14px; text-align:center;}
	.main-community ul li span b {display:block; font-size:36px; color:#003685; padding-bottom:10px; font-weight:400;}
	.main-community ul li p.tit {padding-bottom:15px; font-size:21px; font-weight:400; color:#000; line-height:1; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
	.main-community ul li p.desc {line-height:1; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
	.main-community ul li i.plus {width:55px; height:55px; border:1px solid #999; border-radius:50%; display:block; position:absolute; right:0; top:20px; transition:all .2s;}
	.main-community ul li i.plus:before, .main-community ul li i.plus:after {content:''; display:block;position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:#999; transition:all .2s;}
	.main-community ul li i.plus:before {width:22px; height:2px; }
	.main-community ul li i.plus:after {width:2px; height:22px;}
	.main-community ul li:hover i.plus {background:#003685; border-color:transparent}
	.main-community ul li:hover i.plus:before {background:#fff;}
	.main-community ul li:hover i.plus:after {background:#fff;}
	
	
	.main-tit {padding-bottom:30px; text-align:center; font-size:30px; font-weight:400; font-family:'NanumGothic'; color:#fff; line-height:1;}
	.main-tit.blue {color:#003685;}
	
	.main-gallery {padding:50px 20px; background:url(../images/main/gallery-img.jpg)center /cover no-repeat;}
	.main-gallery-tit {position:absolute; left:0; top:100px;}
	.main-gallery-wrap {}
	.main-gallery .swiper-wrapper {padding:0;}
	.main-gallery-slider.swiper-container {padding-bottom:30px;}
	.main-gallery-wrapper .slick-slide {margin:0 10px;}
	.main-gallery-item a {display:block; position:relative;}
	.main-gallery-item .img {height:40vw;}
	
	.main-gallery .swiper-container-horizontal>.swiper-pagination {top:auto; left:0; bottom:0; height:5px; background:rgba(255,255,255,.4);}
	.main-gallery .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#ef3f3e;}
	
	
	.main-about {padding:50px 20px;}
	.main-about-list {}
	.main-about-list ul {display:flex; flex-wrap:wrap; justify-content:center; text-align:center; margin-top:-20px;}
	.main-about-list ul li {display:inline-block; padding:0 20px; margin-top:20px;}
	.main-about-list ul li a {}
	.main-about-list ul li i {display:flex; justify-content:center;	align-items:center; width:130px; height:130px; margin:0 auto; border:1px solid #e5e5e5; border-radius:50%; transition:border .2s;}
	.main-about-list ul li i img {width:65%;}
	.main-about-list ul li:hover i {border-color:#003685; transform:rotateY(360deg); transition:transform .5s;}
	.main-about-list ul li p {font-size:18px; color:#000; font-weight:400; line-height:1; padding-top:15px;}
	
	
}


/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width: 767px) {
	
	.main .main-visual {height:400px;}
	.main-slider .slide-item {height:400px;}
	.main .main-slider .slick-prev {left:25%;}
	.main .main-slider .slick-next {left:75%;}
	.main-slider-txt {top:100px;}
	.main-slider-txt h2 {font-size:32px; font-weight:700;}
	.main-slider-txt p {font-size:16px; font-weight:400; line-height:1.6;}
	.main-slider-txt p br {display:none;}
	
	.main-community-tab button {font-size:24px;}
	.main-community ul li a {padding:16px 60px 16px 60px;}
	.main-community ul li p.tit {font-size:19px; padding-bottom:10px;}
	.main-community ul li span {font-size:13px; top:12px;}
	.main-community ul li span b {padding-bottom:5px; font-size:30px}
	.main-community ul li i.plus {width:40px; height:40px;}
	.main-community ul li i.plus:before {width:18px; height:1px;}
	.main-community ul li i.plus:after {width:1px; height:18px;}
	
	.main-tit {font-size:24px; padding-bottom:20px;}
	
	.main-about-list ul li {padding:0 10px;}
	.main-about-list ul li i {width:100px; height:100px;}
	.main-about-list ul li p {font-size:16px; padding-top:10px;}
	
	
}