/*******************

VISUAL

*******************/
.visual { overflow: hidden; position: relative; height: 510px; border-radius: 0 0 0 200px; } 
.visual-item { overflow: hidden; position: relative; height: 510px; background: url(/wp-content/uploads/2024/12/vis-bg.png) no-repeat bottom center; } 
.visual-main-contents { position: relative; z-index: 100; display: flex; align-items: center; justify-content: space-between; width: 1400px; height: 510px; margin: 0 auto; } 
.visual-main-contents img { opacity: 0; } 
.vis-img img { opacity: 0; transition: opacity 0s; position: absolute; } 
.vis-img .vis-img02 { top: 27px; right: 197px; } 
.vis-img .vis-img03 { top: 95px; right: 460px; } 
.vis-img .vis-img04 { top: 131px; right: 28px; } 

.visual-main-contents .vis-img01.animation { animation: visIme00 .3s ease-in-out forwards; } 
.vis-img .vis-img02.animation { animation: visIme01 1.6s ease-in-out forwards; } 
.vis-img .vis-img03.animation { animation: visIme02 1.2s ease-in-out forwards; } 
.vis-img .vis-img04.animation { animation: visIme03 .8s ease-in-out forwards; } 

@keyframes visIme00 { 
 0% { opacity: 0; } 
 100% { opacity: 1; } 
 }
@keyframes visIme01 { 
 0% { top: 500px; opacity: 0; } 
 50% { opacity: 1; } 
 80% { top: -10px; } 
 100% { top: 27px; opacity: 1; } 
 }
@keyframes visIme02 { 
 0% { top: 500px; opacity: 0; } 
 50% { opacity: 1; } 
 80% { top: 40px; } 
 100% { top: 95px; opacity: 1; } 
 }
@keyframes visIme03 { 
 0% { top: 500px; opacity: 0; } 
 50% { opacity: 1; } 
 80% { top: 90px; } 
 100% { top: 131px; opacity: 1; } 
 }

/* visual txt */
.visual-txt-wrap { position: relative; height: 100%; padding-top: 140px; } 
.visual-txt-wrap .vis-star { content: ""; display: block; position: absolute; } 
.visual-txt-wrap .vis-star01 { left: -95px; top: 75px; width: 53px; height: 55px; background: url(/wp-content/uploads/2024/12/vis-star01.png); } 
.visual-txt-wrap .vis-star02 { right: 110px; bottom: 140px; width: 30px; height: 32px; background: url(/wp-content/uploads/2024/12/vis-star02.png); } 
.visual-txt-wrap p { margin-bottom: 30px; font-size: 2.8rem; font-weight: 500; opacity: 0; } 
.visual-txt-wrap h1 { font-size: 6rem; font-weight: 700; color: #222; opacity: 0; } 
.visual-txt-wrap h1.animation { animation: visualTxt01 1.5s ease-in-out forwards; animation-delay: .4s; } 
.visual-txt-wrap p.animation { animation: visualTxt01 1s ease-in-out forwards; } 


@keyframes visualTxt01 { 
 0% { transform: translate(0, 50px); opacity: 0; } 
 100% { transform: translate(0, 0px); opacity: 1; } 
 }

/* slide */
.visual .slick-dots { position: absolute; width: auto; bottom: 150px; left: 260px; z-index: 1000; font-size: 2.0rem; font-weight: 700; } 
.visual .slick-dots li { display: none; } 
.visual .slick-dots li.slick-active { display: block; } 
.visual .slick-dots li span { font-size: 2rem; font-weight: 700; color: #000; } 
.dot { display: flex; align-items: center; gap: 4px; width: 70px !important; } 
.visual .slick-dots li .all-num { font-size: 1.8rem; font-weight: 400; color: #4a4a4a; } 
.vis-dot-wrap { position: absolute; left: 260px; bottom: 130px; z-index: 1000; display: flex; gap: 10px; } 
.vis-dot-wrap a { display: block; width: 60px; height: 4px; border-radius: 5px; background-color: #d7d7d7; } 
.vis-dot-wrap a.active { background-color: var(--main-color); } 



/*******************

복지관 소식 main01

*******************/
.main01-tab-menu { position: absolute; right: 105px; top: 23px; display: flex; gap: 45px; } 
.main01-tab-menu li { position: relative; font-size: 22px; font-weight: 500; cursor: pointer; } 
.main01-tab-menu li:before { content: ""; position: absolute; left: -10px; top: -1px; display: block; width: 6px; height: 6px; border-radius: 100%; background-color: var(--main-color); opacity: 0; transition: all .3s; } 
.main01-tab-menu li.on:before,
.main01-tab-menu li:hover:before { opacity: 1; } 

.main01-tab-box { overflow: hidden; padding-top: 20px; } 
.main01-tab-box .main01-tab { display: none; } 
.main01-tab-box .main01-tab.on { display: block; } 

.latest-slide-item { position: relative; overflow: hidden; border-radius: 30px; background-color: var(--bg-color); transition: all .3s; } 
.latest-slide-item:before { content: ""; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background: linear-gradient(-98deg, #f1b51a 48%, #e86b11); opacity: 0; transition: all .7s; } 
.latest-slide-item a { position: relative; z-index: 1000; display: block; padding: 60px 40px; } 
.latest-slide-item,
.latest-slide-item a .kboard-default-cut-strings,
.latest-slide-item .kboard-latest-contents,
.latest-slide-item .kboard-latest-date { transition: all .3s; } 
.latest-slide-item a .kboard-default-cut-strings { margin-bottom: 30px; font-size: 2.6rem; font-weight: 600; color: #333; } 
.latest-slide-item .kboard-latest-contents { overflow: hidden; margin-bottom: 65px; font-size: 2rem; font-weight: 400; line-height: 3.4rem; white-space: nowrap; text-overflow: ellipsis; } 
.latest-slide-item .kboard-latest-date { font-size: 1.8rem; font-weight: 400; color: #383838; } 
.latest-slide-item.swiper-slide-active { transform: scale(1.1); background: linear-gradient(98deg, #e86b11 48%, #f1b51a); } 
.latest-slide-item.swiper-slide-active a .kboard-default-cut-strings,
.latest-slide-item.swiper-slide-active .kboard-latest-contents,
.latest-slide-item.swiper-slide-active .kboard-latest-date { color: #fff; } 

.pagination { width: 50px; height: 30px; margin: 40px auto 0 auto; } 
.swiper-pagination-current { font-size: 20px; font-weight: 700; color: #464646; } 
.swiper-pagination-total { font-size: 2rem; font-weight: 500; color: #464646; } 
.pagination em, .pagination span { display: flex; align-items: center; } 
.pagination em { font-size: 2rem; font-weight: 700; } 

.latest-arrow-box { padding-top: 15px; } 
.latest-slide-item.swiper-slide-active .kboard-latest-contents { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: wrap; } 
#kboard-default-latest .swiper-wrapper { align-items: center; } 

.arrow-box { position: absolute; left: 50%; display: flex; justify-content: center; align-items: center; gap: 95px; width: 143px; height: 24px; transform: translate(-50%, 43px); } 
.lastest-slide-btn { width: 14px; height: 24px; cursor: pointer; } 
.lastest-slide-btn-prev { background: url(/wp-content/uploads/2024/12/latast-arrow-prev.png); background-repeat: no-repeat; } 
.lastest-slide-btn-next { background: url(/wp-content/uploads/2024/12/latast-arrow-next.png); background-repeat: no-repeat; } 


/*******************

복지관 안내 main02

*******************/

.main02 { background-color: var(--bg-color); } 
.main02 .container { display: flex; justify-content: space-between; align-items: center; } 
.main02 h2 { background-color: var(--bg-color); } 
.main02 .main-tit-wrap { margin-bottom: 0; } 
.main02-contents { width: calc(100% - 355px); } 
.main02-contents ul { display: flex; gap: 30px; } 
.main02-contents ul li { overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc((100% - 90px) / 4); border-radius: 25px; background-color: #fff; } 
.main02-contents ul li a { display: block; width: 100%; height: 100%; padding: 40px 0; transition: all .3s; } 
.main02-contents ul li a img { display: block; margin: 0 auto 30px auto; } 
.main02-contents ul li a p { font-size: 2rem; font-weight: 600; color: #333; text-align: center; transition: all .3s; } 


/*******************

복지관 안내 main03

*******************/
.main03 .main-tit-wrap { display: flex; justify-content: center; } 
.main03-contents ul { display: flex; gap: 25px; } 

.main03-contents ul li { overflow: hidden; position: relative; width: calc((100% - 50px) / 3); border-radius: 25px; } 
.main03-contents ul li:nth-child(1) { background-color: #fff7dc; } 
.main03-contents ul li:nth-child(2) { background-color: #f6ffdc; } 
.main03-contents ul li:nth-child(3) { background-color: #d7f7ff; } 
.main03-contents ul li a { position: relative; z-index: 100; display: block; padding: 48px 28px; } 
.main03-contents ul li a p { margin-bottom: 65px; font-size: 2.5rem; font-weight: 600; color: #222; } 
.main03-contents ul li a .more-btn { display: flex; justify-content: center; align-items: center; width: 155px; padding: 15px 25px; border-radius: 25px; background-color: #fff; transition: all .3s; } 
.main03-contents ul li a .more-btn span { font-size: 1.8rem; color: #333; transition: all .3s; } 
.main03-contents ul li a .more-btn .more-btn-line { width: 20px; } 
.main03-contents ul li a .more-btn .more-btn-line span { display: block; width: 12px; height: 2px; background-color: var(--main-color); transition: all .3s; } 
.main03-contents ul li a .more-btn .more-btn-line span:nth-child(1) { transform: rotate(45deg) translate(4px, -9px); } 
.main03-contents ul li a .more-btn .more-btn-line span:nth-child(2) { transform: rotate(-45deg) translate(5px, 8px); } 
.main03-contents ul li:before { content: ""; position: absolute; right: 20px; bottom: 20px; display: block; width: 72%; height: 72%; background-size: contain; background-repeat: no-repeat; background-position: right bottom; } 
.main03-contents ul li:nth-child(1):before { background-image: url(/wp-content/uploads/2024/12/main03-img01.png); } 
.main03-contents ul li:nth-child(2):before { background-image: url(/wp-content/uploads/2024/12/main03-img02.png); } 
.main03-contents ul li:nth-child(3):before { background-image: url(/wp-content/uploads/2024/12/main03-img03.png); } 



/*******************

패밀리 사이트 main04

*******************/
.main-fam { padding: 40px 0; background-color: var(--bg-color); } 
.main-fam ul { display: flex; gap: 50px; width: 1400px; margin: 0 auto; } 
.main-fam ul li a { overflow: hidden; display: flex; border-radius: 10px; border: 1px solid #dedede; } 
.main-fam ul li a img { transition: all .3s; } 

/* hover */
.latest-slide-item:hover:before { opacity: 1; } 
.latest-slide-item:hover a .kboard-default-cut-strings,
.latest-slide-item:hover a .kboard-latest-contents,
.latest-slide-item:hover a .kboard-latest-date { color: #fff; } 
.main02-contents ul li a:hover { background-color: var(--sub-color); } 
.main02-contents ul li a:hover p { color: #fff; } 
.main03-contents ul li:hover .more-btn { background-color: var(--main-color); } 
.main03-contents ul li:hover .more-btn span { color: #fff; } 
.main03-contents ul li:hover .more-btn .more-btn-line span { background-color: #fff; } 
.main-fam ul li a:hover img { scale: 1.05; } 


@media screen and (max-width: 1400px){
 .visual { border-radius: 0; } 
 .main-fam ul { width: 100%; padding: 0 1rem; } 
 .visual-main-contents { width: 100%; padding: 0 1rem; } 
 .visual-main-contents img { width: 600px; } 
 .vis-img img:nth-child(2) { right: 260px; width: 597px; } 
 .visual .slick-dots,
 .vis-dot-wrap { left: 1rem; } 

 .main03-contents ul { gap: 1rem; } 
 .main03-contents ul li { width: calc((100% - 20px) / 3); } 
 }

@media screen and (max-width: 1280px){
 .visual-main-contents .vis-img01 { position: absolute; right: 0; } 
 .visual-txt-wrap { position: absolute; z-index: 101; height: 100%; padding-top: 140px; } 

 .latest-slide-item a { padding: 4rem 2rem; } 
 .latest-slide-item a .kboard-default-cut-strings { font-size: 2rem; } 
 .latest-slide-item .kboard-latest-contents,
 .latest-slide-item .kboard-latest-date { font-size: 1.6rem; } 


 .main02 .container { flex-direction: column; gap: 3rem; } 
 .main02-contents { width: 100%; } 

 .main-fam ul { justify-content: center; gap: 1rem; } 
 }


@media screen and (max-width: 1024px){
 .visual,
 .visual-main-contents,
 .visual-item { height: 41rem; } 
 .vis-img { display: none; } 
 .visual-txt-wrap p { font-size: 2rem; } 
 .visual-txt-wrap h1 { font-size: 4rem; } 
 .visual .slick-dots, .vis-dot-wrap { left: 1rem; }
 .vis-dot-wrap { bottom: 35%; } 
 .latest-slide-item a { min-height: 24.5rem; } 

 .visual .slick-dots {
    bottom: 28%;
  }
 }

@media screen and (max-width: 900px){
 .main02-contents ul { flex-wrap: wrap; gap: 1rem; } 
 .main02-contents ul li { width: calc((100% - 1rem) / 2); } 
 }

@media screen and (max-width: 768px){
 .visual-txt-wrap { width: calc(100% - 2rem); } 

 .main-tit h2 { font-size: 3rem; } 
 .latest-slide-item.swiper-slide-active { transform: scale(1); } 
 .main01-tab-menu { right: 70px; gap: 2rem; } 
 .main01-tab-menu li { font-size: 1.8rem; } 

 .main03-contents ul { flex-direction: column; } 
 .main03-contents ul li { width: 100%; } 

 .main-fam ul { flex-wrap: wrap; } 
 .main-fam ul li { width: calc((100% - 2rem) / 3); } 

 .visual, .visual-main-contents, .visual-item { height: 35rem; }
 .vis-dot-wrap { bottom: 40%; } 
 
 .visual-txt-wrap p { margin-bottom: 2rem; font-size: 1.6rem; } 

 .visual-txt-wrap .vis-star { display: none; }

 .visual-main-contents::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
}

  .visual-txt-wrap { padding-top: 110px; }
}

@media screen and (max-width: 600px){
 .main01-tab-menu { position: static; justify-content: center; } 
 .main-tit-wrap { margin-bottom: 3rem; } 
}

@media screen and (max-width: 500px){
 .visual-txt-wrap h1 { font-size: 3rem; } 
 .main-fam ul li { width: calc((100% - 1rem) / 2); } 
}