@charset "utf-8";

/* main : common */
.sec-tit {font-size: 36px;font-weight: 600;position: relative;width: fit-content;line-height: normal;margin-bottom: 26px;}
.sec-tit::after {content:"";width: 100%;height: 21px;background: #ABF9FF;display: none;position: absolute;left: 0;bottom: -1px;z-index: -1;}
/* main-visual */
.main-visual {height: calc(100vh - 0px);overflow: hidden;position: relative;}
/* .main-visual::after {content:"";background:linear-gradient(to bottom, #828282, #C2C2C200);display: block;width:100%;height:100%;position: absolute;top:0;left:0;z-index: 2;mix-blend-mode: multiply;} */
/* .main-visual .txt-wrap {color: #121212;position: absolute;left: 50%;top: calc((100% - 60vh - 24px)/2); transform: translateX(-50%);z-index: 3;width: 100%;text-align: center;}
.main-visual .txt-wrap p {}
.main-visual .txt-wrap p:nth-child(1) {font-size: 30px;font-weight: 800;margin-bottom: 12px;}
.main-visual .txt-wrap p:nth-child(2) {font-size: 24px;font-weight: normal;} */
/* .main-visual .visual-img {width:1200px;height:60vh;margin: 0 auto;border-radius: 24px;overflow: hidden;position: absolute;bottom: 24px;left: 50%;transform: translateX(-50%);} */
/* .main-visual .visual-img img {width: 100%;height:100%;object-fit: cover;} */

.main-visual .scroll-down {position: absolute;left:50%;bottom: 140px;px;z-index: 3;}
.main-visual .mouse {width: 30px;height: 50px;border: 2px solid #fff;border-radius: 60px;position: relative;}
.main-visual .mouse::before {content: '';width: 8px;height: 8px;position: absolute;top: 8px;left: 50%;transform: translateX(-50%);background-color:#fff;border-radius: 50%;opacity: 1;animation: wheel 2s infinite;-webkit-animation: wheel 2s infinite ease;}
.main-visual .mouse::after {content:'SCROLL';color: #fff;white-space:nowrap;position: absolute;left:50%;transform:translateX(-50%);top: -24px;font-size: 14px;}
@keyframes wheel {
    to {opacity: 0;top: 25px;}
}

@-webkit-keyframes wheel {
    to {opacity: 0;top: 25px;}
}

.main-visual .swiper-slide {position: relative;padding-top:126px;}
.main-visual .swiper-slide .visual-img {width: 100%;height: 100%;}
.main-visual .swiper-slide .visual-img img {width: 100%;height: 100%;object-fit: cover;}
.main-visual .swiper-slide .visual-txt {position: absolute;left: 50%;top: 60%; transform: translate(-50%, -50%);text-align: center;width: 100%;}
.main-visual .swiper-slide .visual-txt.white {color: #000;}
.main-visual .swiper-slide .visual-txt p:nth-child(1) {font-size: 52px;font-weight: 800;color:#fff}
.main-visual .swiper-slide .visual-txt p:nth-child(2) {font-size: 34px;font-weight: normal;margin-bottom: 12px;color:#fff;}
.main-visual .swiper-slide .visual-txt p:nth-child(3) {font-size: 36px;font-weight: 800;color:var(--color-main01)}
.main-visual .swiper-slide .visual-txt p:nth-child(4) {font-size: 30px;font-weight: normal;color:#555;}

/* main-visual : controller */

.main-visual .controller-wrap {position: absolute;display: flex;align-items: center;gap: 40px;bottom: 64px;right:50%;transform: translateX(50%);z-index: 3;width: 100%;}
.main-visual .controller-wrap .swiper-scrollbar {height:10px;width:100%;}
.main-visual .controller-wrap .swiper-pagination {width: 100%;height: 8px;border-radius: 4px;}
.main-visual .controller-wrap .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: var(--color-main00);border-radius: 4px;}
.main-visual .controller-wrap .swiper-pagination-progressbar {background: #eef1f350 !important;position: relative !important;border-radius: 4px;}

.main-visual .controls {display: flex;justify-content: center;align-items: center;gap: 24px;}
.main-visual .controls .swiper-nav {display: flex;align-items: center;justify-content:space-around;border-radius: 20px;border: 1px solid #eee;width:140px;height:40px;}
.main-visual .controls .swiper-nav .btn-prev,
.main-visual .controls .swiper-nav .btn-next {width: 29px;height: 36px;background: url("../images/common/icon/icon_mainvisual_prev.png") center center no-repeat;cursor: pointer;padding: 10px;filter: invert(1);}
.main-visual .controls .swiper-nav .btn-next {background: url("../images/common/icon/icon_mainvisual_next.png") center center no-repeat;}
.main-visual .controls .swiper-nav .btn-play {width: 35px;height: 34px;background: url("../images/common/icon/icon_mainvisual_stop.png") center center no-repeat;cursor: pointer;padding: 10px;filter: invert(1);}
.main-visual .controls .swiper-index {display: flex;align-items: center;gap: 4px;}
.main-visual .controls .swiper-index span {font-size: 18px;font-weight: 600;color: #fff;}
.main-visual .controls .swiper-index .swiper-index-last {color: #777;white-space: nowrap;font-size: 16px;font-weight: normal;}
.main-visual .controls .swiper-index .swiper-index-last::before {content: "/ ";}
.main-visual .controls .swiper-index .swiper-pagination {width: 135px;height: 3px;}
.main-visual .controls .swiper-index .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: var(--color-main);}
.main-visual .controls .swiper-index .swiper-pagination-progressbar {background: #EEF1F3 !important;position: relative !important;}


.main-sec-tit {margin-bottom: 48px;text-align: center;position: relative;}
.main-sec-tit .desc {font-size: 24px;font-weight: 600;color: var(--color-main00);margin-bottom: 16px;}
.main-sec-tit .tit {font-size: 32px;font-weight: 800;}
.main-sec-tit .btn-viewmore {position: absolute;margin-left: 16px;}

.main-section1 {margin-top: 58px;}
.main-section1 {}
.main-section1 .facilities-list {height: 400px;}
.main-section1 .facilities-list li {grid-column: span 2;border-radius: 24px;overflow: hidden;position: relative;}
.main-section1 .facilities-list li {}
.main-section1 .facilities-list li .txt {width:100%;position: absolute;top: 30px;color: #fff;padding: 0 24px;}
.main-section1 .facilities-list li .txt .tit {font-size: 20px;font-weight: 700;margin-top: 0px;}
.main-section1 .facilities-list li .txt .desc {font-size: 16px;}
.main-section1 .facilities-list li a {display: block;height: 100%;position: relative;}
.main-section1 .facilities-list li a::before {content:"";display: block;background: var(--color-main00);width: 100%;height:0%;bottom:0;transition: .2s ease-in-out;mix-blend-mode: screen;position: absolute;}
.main-section1 .facilities-list li a:hover::before {content:"";height: 100%;}
.main-section1 .facilities-list li a:hover .txt {color: #121212;}
.main-section1 .facilities-list li:nth-child(1) a {background: linear-gradient(135deg, var(--color-main00), var(--color-main01));}
.main-section1 .facilities-list li:nth-child(2) a {background: linear-gradient(135deg, var(--color-main00), var(--color-main01));}
.main-section1 .facilities-list li:nth-child(3) a {background: linear-gradient(135deg, var(--color-main00), var(--color-main01));}
.main-section1 .facilities-list li:nth-child(4) a {background: linear-gradient(135deg, var(--color-main00), var(--color-main01));}


.main-section9 {margin-top: 58px;}
.main-section9 {}
.main-section9 .facilities-list {height: 400px;}
.main-section9 .facilities-list li {grid-column: span 2;border-radius: 24px;overflow: hidden;position: relative;}
.main-section9 .facilities-list li {}
.main-section9 .facilities-list li .txt {width:100%;position: absolute;bottom: 40px;color: #fff;padding: 0 24px;}
.main-section9 .facilities-list li .txt .tit {font-size: 24px;font-weight: 700;margin-bottom: 12px;}
.main-section9 .facilities-list li .txt .desc {font-size: 16px;}
.main-section9 .facilities-list li a {display: block;height: 100%;position: relative;}
.main-section9 .facilities-list li a::before {content:"";display: block;background: var(--color-main00);width: 100%;height:0%;bottom:0;transition: .2s ease-in-out;mix-blend-mode: screen;position: absolute;}
.main-section9 .facilities-list li a:hover::before {content:"";height: 100%;}
.main-section9 .facilities-list li a:hover .txt {color: #121212;}
.main-section9 .facilities-list li:nth-child(1) a {background:url("http://jfcenter.or.kr/storage/app/public/images/facility_2.jpg") center center no-repeat;background-size: cover;}
.main-section9 .facilities-list li:nth-child(2) a {background:url("http://jfcenter.or.kr/storage/app/public/images/facility_4.jpg") center center no-repeat;background-size: cover;}
.main-section9 .facilities-list li:nth-child(3) a {background:url("../images/sub/img_hello.png") center center no-repeat;background-size: cover;}
.main-section9 .facilities-list li:nth-child(4) a {background: linear-gradient(135deg, var(--color-main00), var(--color-main01));}
.main-section9 .facilities-list li:nth-child(4) .tit {position: relative;display: flex;justify-content: space-between;width:100%;align-items: center;}
.main-section9 .facilities-list li:nth-child(4) .tit::after {content: "";display: block;background: url("/images/common/icon/icon_arrow_right_w.svg") center center no-repeat;width: 28px;height: 15px;}


.main-section8 {margin-top: 58px;}
.main-section8 {}
.main-section8 .facilities-list {height: 220px;}
.main-section8 .facilities-list li {grid-column: span 4;border-radius: 24px;overflow: hidden;position: relative;border:2px solid var(--color-main00);
 
	}
.main-section8 .facilities-list li .thumb-icon{
		display:grid;justify-items:center;align-items:center;padding-top:20px;;
	}
.thumb-icon > img{
		 width:120px;
}
.main-section8 .facilities-list li .txt {width:100%;position: absolute;bottom: 10px;color: #999;padding: 0 24px;}
.main-section8 .facilities-list li .txt .tit {font-size: 24px;font-weight: 700;margin-bottom: 12px;display:grid;justify-items:center;align-items:center;}
.main-section8 .facilities-list li a {display: block;height: 100%;position: relative;}
.main-section8 .facilities-list li a::before {content:"";display: block;background: var(--color-main00);width: 100%;height:0%;bottom:0;transition: .2s ease-in-out;mix-blend-mode: screen;position: absolute;}
.main-section8 .facilities-list li a:hover::before {content:"";height: 100%;}
.main-section8 .facilities-list li a:hover .txt {color: #121212;}
.main-section8 .facilities-list li:nth-child(1) a {background:#fff center center no-repeat;background-size: cover;}
.main-section8 .facilities-list li:nth-child(2) a {background:#fff center center no-repeat;background-size: cover;}



.main-section2 {margin-top: 120px;}
.main-section2 .facility-list {/*display: flex;gap: 40px 16px;flex-wrap: wrap;*/}
.main-section2 .facility-list li {/*width: calc((100% - 72px)/4);*/grid-column: span 2; padding-bottom:50px;}
.main-section2 .facility-list li a {display: block;}
.main-section2 .facility-list li .fa-thumb {border-radius: 16px 16px 0 0;overflow: hidden;width: 100%;height: 240px;}
.main-section2 .facility-list li .fa-thumb img {width: 100%;height:100%; object-fit: cover;transition: .2s ease;}
.main-section2 .facility-list li .fa-cont {  border-left:1px solid var(--color-main01);border-right:1px solid var(--color-main01);border-bottom:1px solid var(--color-main01);border-radius:0 0 24px 24px;padding:20px}
.main-section2 .facility-list li .fa-cont .fa-tit {font-weight: 700;margin-bottom: 12px;transition: .2s ease;}
.main-section2 .facility-list li .fa-cont dl {font-size: 14px;}
.main-section2 .facility-list li .fa-cont dl div {display: flex;margin-bottom: 4px;}
.main-section2 .facility-list li .fa-cont dl dt {width: 80px;font-weight: 600;}
.main-section2 .facility-list li .fa-cont dl dd {}
.main-section2 .facility-list li a:hover .fa-thumb {box-shadow: 0 4px 16px #d3cbcb;}
.main-section2 .facility-list li a:hover .fa-thumb img {transform: scale(1.1);}
.main-section2 .facility-list li a:hover .fa-tit {color: var(--color-main00);}

.main-section3 {margin-top: 50px;margin-bottom: 140px;}
.main-section3 {}
.main-section3 .notice-wrap, 
.main-section3 .goverment-wrap {grid-column: span 4;}
.main-section3 .tit-wrap .tit {padding-left:20px;font-size: 24px;font-weight: 800;display: flex;align-items: center;margin-bottom: 24px;}
.main-section3 .notice-wrap {}
.main-section3 .notice-wrap .notice {border: 2px solid var(--color-main00); border-radius: 24px;}
.main-section3 .notice-wrap .notice a {display: flex; border-bottom: 1px dotted var(--color-main00);padding: 24px 16px;justify-content: space-between;transition: .2s ease;gap: 8px;}
.main-section3 .notice-wrap .notice a:hover {color: var(--color-main00);}
.main-section3 .notice-wrap .notice li:last-child a {border: none;}
.main-section3 .notice-wrap .notice .bd-tit {font-weight: 600;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: break-all;white-space: nowrap;}
.main-section3 .notice-wrap .notice .bd-date {}
.main-section3 .goverment-wrap {}
.main-section3 .goverment-wrap .goverment {overflow: hidden;height: calc(100% - 64px);}
.main-section3 .goverment-wrap .goverment a {display: block;background: var(--color-main00) url("../images/main/img_main_obj.png") 90% 90% no-repeat;height: 100%;border-radius: 24px;position: relative;padding: 40px 24px;color: #fff;transition: .2s ease;}
.main-section3 .goverment-wrap .goverment a:hover {background-color: #f19a20;}
.main-section3 .goverment-wrap .goverment .bd-tit {font-weight: 700;font-size: 24px;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;word-break: break-all;}
.main-section3 .goverment-wrap .goverment .bd-date {position: absolute;bottom: 48px;left: 24px;display: flex;align-items: center;justify-content: space-between;width: calc(100% - 48px);}
.main-section3 .goverment-wrap .goverment .bd-date::after {content: "";display: block;background: url("/images/common/icon/icon_arrow_right_w.svg") center center no-repeat;width: 28px;height: 15px;}


@media all and (max-width:1280px) { 
  .main-visual .visual-img {width: calc(100% - 48px)}
  .main-section1 .facilities-list{ height: auto;}
  .main-section1 .facilities-list li {height: 320px;grid-column: span 4;margin: 8px 0;}
  .main-section9 .facilities-list{ height: auto;}
  .main-section9 .facilities-list li {height: 320px;grid-column: span 4;margin: 8px 0;}

  .main-section8 .facilities-list{ height: auto; padding-bottom:30px}
  .main-section8 .facilities-list li {height: 320px;grid-column: span 4;margin: 8px 0;}

  .main-section2 .facility-list {display: flex;}
  .main-section2 .facility-list li {height: 320px;}
  .main-section2 .facility-list li:last-child {display: none;}

  .main-section3 .goverment-wrap .goverment .bd-tit {font-size: 20px;}
} 

@media all and (max-width:1024px) { 
  .main-section3 .notice-wrap {margin-bottom: 48px;}
  .main-section2 .facility-list {display: grid;}
  .main-section2 .facility-list li {height: auto;margin: 8px 0;}
  .main-section2 .facility-list li:last-child {display: block;}

  .main-section3 .goverment-wrap .goverment {height: 240px;}
  .header.fixed .header-left .logo-img-color{display:none;}

  .main-section3 {margin-top: 450px;}

  .main-section8 .facilities-list {height: 200px;}
  .main-section8{padding-bottom:50px}

} 

@media all and (max-width:767px) {
    .main-visual .txt-wrap p {line-height: 1.5;}
    .main-visual .txt-wrap p:nth-child(1) {font-size: 24px;}
    .main-visual .txt-wrap p:nth-child(2) {font-size: 18px;}
    .main-sec-tit .tit {font-size: 18px;font-weight: 500;line-height: 1.5;}
    .main-section1 .facilities-list li {grid-column: span 1;}
    
	.header.fixed .header-left .logo-img-color{display:none;}

	
    .main-section8 .facilities-list {height: 200px;}
	.main-section8{padding-bottom:50px}
	.thumb-icon > img{
		width:30%;
	}
	  .main-section3 {margin-top: 450px;}

	  .main-visual .swiper-slide .visual-txt p:nth-child(1) {font-size: 38px;font-weight: 600;margin-bottom: -5px;}
	  .main-visual .swiper-slide .visual-txt p:nth-child(2) {font-size: 26px;font-weight: normal;margin-bottom: 12px;}
	  .main-visual .swiper-slide .visual-txt p:nth-child(3) {font-size: 28px;font-weight: 600;}
	  .main-visual .swiper-slide .visual-txt p:nth-child(4) {font-size: 22px;font-weight: normal;}

} 

@media all and (max-width:480px) {
  .main-sec-tit {margin-bottom: 32px;}
  .main-sec-tit .desc {margin-bottom: 12px;}
  .main-section1 .facilities-list {padding: 0;}
  .main-section1 .facilities-list li {height: 200px;}
  .main-section1 .facilities-list li .txt .tit {font-size: 16px;}

  .main-section9 .facilities-list {padding: 0;}
  .main-section9 .facilities-list li {height: 200px;}
  .main-section9 .facilities-list li .txt .tit {font-size: 24px;}
  
  .main-section8 .facilities-list {padding: 0;}
  .main-section8 .facilities-list li {height: 200px;}
  .main-section8 .facilities-list li .txt .tit {font-size: 24px;}

  .main-section2 .facility-list {padding: 0;}
  .main-section2 .facility-list li {grid-column: span 1;}
  .main-section2 .facility-list li .fa-thumb {height: 200px;border-radius: 16px 16px 0 0;}
  .main-section3 .notice-wrap .notice {border-radius: 16px;}
  .main-section3 .notice-wrap .notice a {padding: 12px 16px;}
  .main-section3 .notice-wrap .notice .bd-date {font-size: 14px;white-space: nowrap;}

  .main-section3 .grid-wrap {padding: 0;}
  .main-section3 .notice-wrap {margin-bottom: 24px;}
  .main-section3 .tit-wrap .tit {margin-bottom: 16px;}
  .main-section3 .goverment-wrap .goverment a {border-radius: 16px;padding: 24px 16px;}
  .main-section3 .goverment-wrap .goverment .bd-tit {font-size: 16px;}
  .main-section3 .goverment-wrap .goverment .bd-date {white-space: nowrap;font-size: 14px;}

  .main-section2 {margin-top: 64px;}
  .main-section3 {margin-bottom: 100px;margin-top: 5px;}

  .header.fixed .header-left .logo-img-color{display:none;}
  .main-section8{padding-bottom:50px}
  .main-section1 .facilities-list li .txt {top: 0px;color: #fff;padding: 25px;}
  .main-section1 {margin-top: 20px;}

  .main-visual .swiper-slide .visual-txt p:nth-child(1) {font-size: 32px;font-weight: 600;}
  .main-visual .swiper-slide .visual-txt p:nth-child(2) {font-size: 22px;font-weight: normal;padding-top:-10px;}
  .main-visual .swiper-slide .visual-txt p:nth-child(3) {display:none;font-size: 24px;font-weight: 600;}
  .main-visual .swiper-slide .visual-txt p:nth-child(4) {display:none;font-size: 22px;font-weight: normal;}

  .main-visual { } .swiper-wrapper{height:320px} .main-visual .swiper-slide 
		{padding-top:60px;} 
  .main-visual .swiper-slide .visual-img {height: 200px;} 
  .swiper-container-initialized{height:300px} 
  .html5-video-player{height:85%;} 

  .thumb-icon > img{ width:30%; }  
  
  .main-section8 .facilities-list {height: 200px;}
  .main-section3 {margin-top: 200px;margin-bottom: 50px;}
}