@charset "UTF-8";

.main { min-height: 100vh;}
.main-visual { height: calc(100vh - var(--headerH) - 5rem); position: relative; margin:var(--headerH) var(--inPd) 0;  border-radius:5rem; overflow: hidden;}
.main-visual .swiper { height: 100%; }
.main-visual .swiper-slide { position: relative;  height: 100%; background-color: #f8f8f8 ;}
.main-visual .swiper-slide .img { position: absolute; width:100%; height: 100%; left:0; bottom:0; transform: scale(1.1);}
.main-visual .swiper-slide .img > * { height: 100%; width:100%; object-fit: cover;}
.main-visual .swiper-slide.img_fixed .img{display: flex; align-items: center; justify-content: center;}
.main-visual .swiper-slide.img_fixed .img img{width: auto; height: auto; object-fit: contain;}
.main-visual .swiper-slide .txt-box { position: absolute; left:15rem; bottom:15rem; z-index:2; color:#fff;  }
.main-visual .swiper-slide .txt-box .tit { font-size:10rem; font-size:7rem; font-family:var(--en); margin-bottom: 4rem; transform: translateY(8rem); opacity:0; font-weight:700; }
.main-visual .swiper-slide .txt-box .txt { font-size:2.5rem; font-weight:500; transform: translateY(8rem); opacity:0; margin-bottom: 8rem; }
.main-visual .swiper-slide .txt-box .lb { display: flex; transform: translateY(8rem); opacity:0; margin-bottom: 2rem;}
.main-visual .swiper-slide .txt-box .lb p { padding: 0 15px; padding:0 0.7em; line-height: 2em; border-radius:1rem; font-size:var(--p1); background-color: var(--green); color:#fff; }
.main-visual .swiper-slide .txt-box .btns { transform: translateY(8rem); opacity:0;}
.main-visual .swiper-slide .txt-box .btn-main-more  { border-color:#fff;}
.main-visual .swiper-slide .txt-box .btn-main-more svg circle { fill:#fff; }
.main-visual .swiper-slide .txt-box .btn-main-more svg path { fill:var(--black); }
.main-visual .swiper-slide.swiper-slide-active .img { transform: unset; transition: all 2s ease;}
.main-visual .swiper-slide.swiper-slide-active .txt-box .lb { transform: unset; opacity:1; transition: all 1s ease; transition-delay:0; }
.main-visual .swiper-slide.swiper-slide-active .txt-box .tit { transform: unset; opacity:1; transition: all 1s ease; transition-delay: 0.2s;}
.main-visual .swiper-slide.swiper-slide-active .txt-box .txt { transform: unset; opacity:1; transition: all 1.2s ease;transition-delay: 0.5s}
.main-visual .swiper-slide.swiper-slide-active .txt-box .btns { transform: unset; opacity:1; transition: all 1.4s ease;transition-delay: 0.7s}
.main-visual .controls {  position: absolute; left:15rem; bottom:69rem; z-index:2; }
.main-visual .controls .cin { display: flex; align-items: center; }
.main-visual .controls .cin .paging { display: flex; gap:2rem; align-items: center; }
.main-visual .controls .cin .paging .num1,
.main-visual .controls .cin .paging .num2 { width:24px; font-size:var(--p2); font-weight:700; color:#fff;}
.main-visual .controls .cin .paging .bar { width:12rem; height:3px; background-color: rgba(255,255,255,0.3); position: relative;;}
.main-visual .controls .cin .paging .bar em { position: absolute; left:0; top:0; width:0; height:100%; background-color: #fff; }
.main-visual .controls .swiper-pagination { position: static; width:auto; }
.main-visual .controls .play-stop { width:4rem; height: 4rem; display: flex; align-items: center; justify-content: center; margin-left: 1rem}
.main-visual .controls .play-stop .play { display: none;}
.main-visual .controls .play-stop svg { width:1.4rem; fill:#fff;  vertical-align: middle;}
.main-visual .controls .play-stop.active .play { display: block;}
.main-visual .controls .play-stop.active .stop { display: none;}


.main-quick { margin-top:5rem; }
.main-quick .in { max-width:100%; }
.main-quick nav { border-radius:10rem; background-color: var(--green); ;}
.main-quick nav ul { max-width:180rem; margin:0 auto; display: flex;}
.main-quick nav ul li { flex:1; position: relative; text-align: center; border-radius:2rem; transition: background 0.3s ease;}

.main-quick nav ul li + li:before { content: none; width:1px; height:3.5rem;  background-color: #fff; position: absolute; left:0; top:50%; transform: translateY(-50%); }
.main-quick nav ul li a { display: flex; line-height: 10rem; border-radius: 2rem; justify-content: center; align-items: center; font-size:var(--p1);  font-weight:600; color:#fff; fill: #fff; padding: 0 1.5em; transition: background-color 0.3s ease-in-out;}
.main-quick nav ul li a img { width:4rem; height: auto; margin-right:2rem; margin-left: -1px}
.main-quick nav ul li a:hover{background-color: #7FAE39;}







/* 메인 공통 */
.h2-main { font-size:var(--h1); font-weight:700; margin-bottom:4rem; transform: translateY(8rem); transition: all 1s var(--ease1);  opacity:0; }
.h2-main.active { transform: unset; opacity:1; }
.main-desc { font-size:var(--p1); font-weight:500; margin-bottom:6rem; transform: translateY(8rem); transition: all 1s var(--ease1);  opacity:0; }
.main-desc.active { transform: unset; opacity:1; }

.tabs-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5rem; transform: translateY(8rem); transition: all 1s var(--ease1);  opacity:0; }
.tabs-head.active { transform: unset; opacity:1; }
.tabs-head .btns { flex-shrink: 0;}
.tabs-head .controls { flex-shrink: 0; display: flex; align-items: center;}
.tabs-head .controls .swiper-button-prev,
.tabs-head .controls .swiper-button-next { width:40px; height:30px; display: flex; align-items: center; justify-content: center;position: static; margin:0;  }
.tabs-head .controls .swiper-button-prev:before,
.tabs-head .controls .swiper-button-next:before { content: ''; display: block; width: 18px; height: 18px; ; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.831' height='14.831' viewBox='0 0 8.831 14.831'%3E%3Cpath id='패스_13816' data-name='패스 13816' d='M4.916-6l-.706.706-6,6-.709.709L-3.916,0l.706-.706L2.084-6l-5.291-5.294L-3.916-12-2.5-13.416l.706.706,6,6Z' transform='translate(4.916 1.416) rotate(180)' fill='%231c1c1c'/%3E%3C/svg%3E"); background-position: 50% 50%; background-size: contain; background-repeat: no-repeat;}
.tabs-head .controls .swiper-button-next { transform: scaleX(-1);}
.swiper-button-prev:after,
.swiper-button-next:after { display: none;}
.tabs-head .controls .swiper-pagination { width:70px; position: static; font-size:var(--p3); font-weight:500;}
.tabs-head .controls .paging { width:70px; position: static; font-size:var(--p3); font-weight:500; text-align: center;}
.tabs-head .controls .play-stop button { width:6rem; height:6rem; border-radius:100%; background-color: var(--black); display: flex; align-items: center; justify-content: center;  }
.tabs-head .controls .play-stop .play { display: none;}
.tabs-head .controls .play-stop svg { width:1.4rem; fill:#fff;  vertical-align: middle;}
.tabs-head .controls .play-stop.active .play { display: block;}
.tabs-head .controls .play-stop.active .stop { display: none;}

.tabs { display:flex; flex-wrap: wrap;}
.tabs a { line-height: 6rem; border-radius:6rem; background-color: #f6f6f6; font-size:var(--p2); font-weight:600; padding:0 3rem; margin-right:2rem; }
.tabs a.active { background-color: var(--green); color:#fff; }

/* 1. 실천 */
.main-practice { padding-top:var(--mainPd); position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column;  overflow: hidden;}
.main-practice .in{ width:100%; }
.main-practice .bg { position: absolute; left:0; top:0; width:100%; height:100%; z-index:-1;}
.main-practice .bg p { position: absolute;  top:0;  }
.main-practice .bg p img { width:100%; height:100%; object-fit: cover; }
.main-practice .bg p:nth-child(1) { left:45rem; top:-25rem; width:45rem }
.main-practice .bg p:nth-child(2) { left:-10rem; top:35rem; width:50rem; }
.main-practice .bg p:nth-child(3) { right:-10rem; top:30rem; width:60rem; }
.main-practice .in { position: relative; z-index:2; }
.main-practice .slider .swiper-slide a { display: block; ;}
.main-practice .slider .swiper-slide a .img { border-radius:4rem; overflow: hidden;}
.main-practice .slider .swiper-slide a .img img { width:100%; object-fit: cover; aspect-ratio: 1/1; transition: all 1s var(--ease2);}
.main-practice .slider .swiper-slide a .txt-box { margin-top:2.5rem; }
.main-practice .slider .swiper-slide a .txt-box .subj { font-size:22px;  height:8rem; height: 3em; line-height: 1.5; font-weight:600; margin-bottom:2rem;    overflow: hidden;    text-overflow: ellipsis;    display: -webkit-box;    -webkit-box-orient: vertical;    -webkit-line-clamp: 2; transition: color 0.3s ease;}
.main-practice .slider .swiper-slide a .txt-box .date { font-size:var(--p3);  }

.main-practice .slider .swiper-slide a:hover .txt-box .subj{color:var(--green);}
.main-practice .slider .swiper-pagination .swiper-pagination-progressbar-fill { background-color: var(--green); height: 2px; bottom:0; top:unset;}
.main-practice .slider-box { transform: translateY(8rem); opacity:0; transition: all 1s var(--ease1); margin-bottom:0}
.main-practice .slider-box.active { transform: unset; opacity:1;}




.main-miracle {padding-top:var(--mainPd);  position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; padding-bottom: 40rem;; overflow: hidden;}
.main-miracle .in{ width:100%; }
.main-miracle .slider { transform: translateY(8rem); opacity:0; transition: all 1s var(--ease1);}
.main-miracle .slider.active { transform: unset; opacity:1;; }
.main-miracle .slider .swiper { overflow: visible;}

/* .main-miracle .slider .swiper-slide { width:auto !important; } */

/* .main-miracle .slick-slider .slick-list {overflow: visible;}
.main-miracle .slick-slider .slide  {width: 50rem; margin-right: 3rem;}
.main-miracle .slick-slider .slide.slick-active {}
.main-miracle .slick-slider .slide.slick-active + * + * + * + * + *,
.main-miracle .slick-slider .slide.slick-active + * + * + * + *,
.main-miracle .slick-slider .slide.slick-active + * + * + *,
.main-miracle .slick-slider .slide.slick-active + * + *,
.main-miracle .slick-slider .slide.slick-active + * {transform: translateX(40%);}
.main-miracle .slick-slider .slide .img {transition: transform 0.5s ease-in-out; transform-origin: left bottom;}
.main-miracle .slick-slider .slide.slick-active .img {transform: scale(1.4);} */



/* .main-miracle .slick-slider .slide.slick-cloned:nth-child(1) {opacity: 0;} */


.main-miracle .slick-slider .slide a {pointer-events: none;}
.main-miracle .slider .swiper-wrapper { align-items: flex-end;}

.main-miracle .slider .swiper-slide { transition: 0.5s ease 0s; Q}

.main-miracle .slider .swiper-slide a { transition:  transform 0.3s ease;}
.main-miracle .slider .swiper-slide a .img { height: 55rem !important; display: flex; align-items: flex-end;  transform-origin: left bottom; transition: transform 0.5s ease 0s; pointer-events: none;}
.main-miracle .slider .swiper-slide a { display: block; ;}
.main-miracle .slider .swiper-slide a .img {  overflow: hidden; margin-bottom: 5rem;}
.main-miracle .slider .swiper-slide a .img img { width:100%; object-fit: cover; aspect-ratio: 1/1; border-radius:3rem; }
.main-miracle .slider .swiper-slide a .txt-box { position: relative }
.main-miracle .slider .swiper-slide a .txt-box .box { position: absolute; left: 0; width:40rem; top:-2rem; opacity:0; transform: translateY(20px);   transition: opacity 0.5s ease -0.1s, transform 0.5s ease -0.1s; }
.main-miracle .slider .swiper-slide a .txt-box .before-subj { font-size:var(--h3); font-weight:600; margin-bottom:1rem; opacity:0.2;  transition: all 0.5s ease;  }
.main-miracle .slider .swiper-slide a .txt-box .subj { font-size:4rem;  font-weight:700; margin-bottom:2rem; }
.main-miracle .slider .swiper-slide a .txt-box .desc { font-size:var(--p2); font-weight:600; margin-bottom:4rem; }
.main-miracle .slider .swiper-slide a .txt-box .tags { display: flex; flex-wrap: wrap;  }
.main-miracle .slider .swiper-slide a .txt-box .tags p { padding:1rem 1.5rem; border-radius:4rem; border:1px solid #ddd; font-size:var(--p3); font-weight:500; margin:0 1rem 1rem 0; color:var(--gray4); }
.main-miracle .slider .swiper-slide a .txt-box .tags p:before { content: '#'; display: inline;}

/* .main-miracle .slider .swiper-slide:hover a{ width:70rem !important; }
.main-miracle .slider .swiper-slide:hover a .txt-box .box { opacity:1; transform: unset;}
.main-miracle .slider .swiper-slide:hover a .txt-box .before-subj { transform: translateY(20px); opacity:0;} */
/* .main-miracle .slider .swiper-slide.active a{ width:70rem !important; }
.main-miracle .slider .swiper-slide.active a .txt-box .box { opacity:1; transform: unset;}
.main-miracle .slider .swiper-slide.active a .txt-box .before-subj { transform: translateY(20px); opacity:0;} */

@media screen and (max-width: 1640px) {

    /*.main-miracle .slider .swiper-slide {width: 40rem !important;}*/
}
@media screen and (min-width: 1025px) {
    /* .main-miracle .slider .swiper-slide-duplicate-active,
    .main-miracle .slider .swiper-slide-active {transform: 0; } */
    .main-miracle .slider .swiper-slide-duplicate-active a .img,
    .main-miracle .slider .swiper-slide-active a .img { transform: scale(1.3);  }
    .main-miracle .slider .swiper-slide-duplicate-active a .txt-box .box,
    .main-miracle .slider .swiper-slide-active a .txt-box .box { opacity:1; transform: unset; transition: opacity 0.5s ease, transform 0.5s ease, width 0s; width:120%;}
    .main-miracle .slider .swiper-slide-duplicate-active a .txt-box .before-subj,
    .main-miracle .slider .swiper-slide-active a .txt-box .before-subj { transform: translateY(20px); opacity:0;}



    .main-miracle .slider .swiper-slide-next + .swiper-slide + .swiper-slide + .swiper-slide + .swiper-slide,
    .main-miracle .slider .swiper-slide-next + .swiper-slide + .swiper-slide + .swiper-slide,
    .main-miracle .slider .swiper-slide-next + .swiper-slide + .swiper-slide,
    .main-miracle .slider .swiper-slide-next + .swiper-slide,
    .main-miracle .slider .swiper-slide-next {transform: translateX(30%);}
}
@media screen and (max-width: 1024px) {
    .main-miracle .slider .swiper-wrapper { align-items: flex-start;}
    .main-miracle .slider .swiper-slide,
    .main-miracle .slider .swiper-slide a .txt-box .box,
    .main-miracle .slider .swiper-slide a{ width:50rem !important; }
    .main-miracle .slider .swiper-slide a .txt-box .box {width: 50rem;}
    .main-miracle .slider .swiper-slide a .img { height: auto !important;}
    .main-miracle .slider .swiper-slide a .txt-box .box { opacity:1; transform: unset; position: static; width: 100% !important;}
    .main-miracle .slider .swiper-slide a .txt-box .before-subj { transform: translateY(20px); opacity:0; display: none;}

}



.pointer { position: fixed; top: 0; left: 0; z-index: 100; pointer-events: none; }
.pointer .pointer_box { display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0;  width: 18rem; height:18rem;  color: #fff; font-size:2.5rem; font-weight: 600; line-height: 1.4; border-radius: 50%; transition:all .3s ease-out; overflow: hidden; background: rgba(0,0,0,0.6); backdrop-filter: blur(10px);; }
.pointer .pointer_box span { display: block; white-space: nowrap; text-align: center; }
.pointer.on .pointer_box { opacity: 1 }



.main-touch { position: relative; overflow: hidden;}
.main-touch .lines { position: absolute; left: -40rem; right:0; bottom:10rem; z-index:-1; height: 57rem; ;}
.main-touch .lines svg { width:100%; height: auto;}
.main-touch .lines  svg path,
.main-touch .lines  svg g path {
    stroke-dasharray: 4000; /* 충분히 큰 값으로 설정 */
    stroke-dashoffset: 4000;
    transition: stroke-dashoffset 2s ease-out;
}

/* active 클래스가 추가되면 라인이 그려짐 */
.main-touch .lines.active svg path,
.main-touch .lines.active svg g path {
    stroke-dashoffset: 0;
}


.main-touch .touch-wrap{ padding-top: 2vw;position: relative;height: 100vh; display: flex; flex-direction: column; }
.main-touch .title { width:100%; padding:6.5vh 0 0;  text-align: center; }
.main-touch .sect_tit_box {color:#fff}
.main-touch .mo_robot { display: none; }
.main-touch .sectionCercle {flex: 1;overflow: hidden;position: relative;/* margin-left: unset; *//* margin-right: unset; */ transform: translateY(8rem); opacity:0; transition: all 1s var(--ease1);}
.main-touch .sectionCercle.active { transform: unset; opacity:1;}
.main-touch .innerCercle {width: 200vw;height: 200vw;border-radius: 100%;top: 0;left: calc(50% - 100vw); position: absolute; will-change: transform}
.main-touch .innerCercle .cercle {top: 0;left: 0;width: 100%;height: 100%; position: absolute ;pointer-events: none; z-index:10;;}
.main-touch .innerCercle .cercle > div {height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding-top: min(2vw,3.90625vw)}
.main-touch .innerCercle .cercle:nth-child(1) {transform: rotate(0)}
.main-touch .innerCercle .cercle:nth-child(2) {transform: rotate(15deg)}
.main-touch .innerCercle .cercle:nth-child(3) {transform: rotate(30deg)}
.main-touch .innerCercle .cercle:nth-child(4) {transform: rotate(45deg)}
.main-touch .innerCercle .cercle:nth-child(5) {transform: rotate(60deg)}
.main-touch .innerCercle .cercle:nth-child(6) {transform: rotate(75deg)}
.main-touch .innerCercle .cercle:nth-child(7) {transform: rotate(90deg)}
.main-touch .innerCercle .cercle:nth-child(8) {transform: rotate(105deg)}
.main-touch .innerCercle .cercle:nth-child(9) {transform: rotate(120deg)}
.main-touch .innerCercle .cercle:nth-child(10) {transform: rotate(135deg)}
.main-touch .innerCercle .cercle:nth-child(11) {transform: rotate(150deg)}
.main-touch .innerCercle .cercle:nth-child(12) {transform: rotate(165deg)}
.main-touch .innerCercle .cercle .card {width: 17vw; transform: scale(0.9); display: block; position: relative; overflow: hidden; border-radius:4rem; transform-origin: center bottom; transition: transform 0.5s var(--ease1); position: relative; z-index:10; pointer-events: visible;}
.main-touch .innerCercle .cercle .card .img {position: relative; padding-top: 128%;}
.main-touch .innerCercle .cercle .card img { position: absolute; left: 0; top: 0; width:100%; height:100%; object-fit: cover; object-position: center}
.main-touch .innerCercle .cercle .card .txt-box { position: absolute; left:0; top:0; bottom:0; width:100%;  background-color: rgba(0,0,0,0.5); color:#fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; opacity:0; transition: all 0.5s var(--ease1);   }
.main-touch .innerCercle .cercle .card .txt-box .tit { font-size:4rem; font-weight:700; transition: all 0.5s var(--ease1);opacity: 0; transform: translateY(30px);  }
.main-touch .innerCercle .cercle .card .txt-box .desc { font-size:var(--p3); font-weight:600; margin:2rem 0 6rem; transition: all 0.5s var(--ease1); opacity: 0; transform: translateY(30px);}
.main-touch .innerCercle .cercle .card .txt-box .view { font-size:var(--p2); font-weight:500; transition: all 0.5s var(--ease1);opacity: 0; transform: translateY(30px); }
.main-touch .innerCercle .cercle .card .txt-box .view:after { content: ''; display: inline-block; vertical-align: middle; margin:-3px 0 0 5px; width: 10px;   height: 10px;   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg id='_' data-name='+' transform='translate(-1662 -7963)'%3E%3Crect id='사각형_7635' data-name='사각형 7635' width='2' height='10' rx='1' transform='translate(1666 7963)' fill='%23fff'/%3E%3Crect id='사각형_7636' data-name='사각형 7636' width='2' height='10' rx='1' transform='translate(1672 7967) rotate(90)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");   background-repeat: no-repeat;   background-size: contain;   background-position: center;   display: inline-block;}


.main-touch .innerCercle .cercle.active .card { transform: scale(1.05); }
.main-touch .innerCercle .cercle.active .card .txt-box { opacity:1; }
.main-touch .innerCercle .cercle.active .card .txt-box .tit { transform: unset; opacity:1; }
.main-touch .innerCercle .cercle.active .card .txt-box .desc { transform: unset; opacity:1; }
.main-touch .innerCercle .cercle.active .card .txt-box .view { transform: unset; opacity:1; }


/*
.main-touch .innerCercle .cercle.active .card { transform: scale(1.05); }
.main-touch .innerCercle .cercle.active .card .txt-box { opacity:1; }
.main-touch .innerCercle .cercle.active .card .txt-box .tit { transform: unset; opacity:1; }
.main-touch .innerCercle .cercle.active .card .txt-box .desc { transform: unset; opacity:1; }
.main-touch .innerCercle .cercle.active .card .txt-box .view { transform: unset; opacity:1; }
*/


.main-record { position: relative; min-height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; z-index:2;}
.main-record .bg-img { position: absolute; left:0; top:0; width:100%; height:100%; z-index:-1; }
.main-record .bg-img p { width:100%; height: 100%;;}
.main-record .bg-img p img { width:100%; height:100%; object-fit: cover; }
.main-record .in { width:100%; color:#fff; }
.main-record .main-desc { margin-bottom: 5rem;;}
.main-record .btns { transition: all 1s var(--ease1); transform: translateY(8rem); opacity:0; }
.main-record .btns.active { transform: unset; opacity:1;}
.main-record .btn-main-more { border-color:#fff; }
.main-record .btn-main-more svg circle { fill:#fff; }
.main-record .btn-main-more svg path { fill:var(--black); }
.main-record ul { display: flex; margin-top:10rem; flex-wrap: wrap;}
.main-record ul li { flex:1; }
.main-record ul li + li { margin-left: 3rem;}
.main-record ul li .img img { width:100%;}
.main-record ul li .item {   overflow: hidden; border-radius:4rem; position: relative;}
.main-record ul li .item .img{ position: relative; padding-top: 100%;}
.main-record ul li .item .img img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-position: center; object-fit: cover;}
.main-record ul li .item .box { position: absolute; left: 0; top:0; right:0; bottom:0; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.main-record ul li .item i { width:6rem; margin-bottom: 2rem; }
.main-record ul li .item i img { width:100%; height:auto; object-fit: contain;}
.main-record ul li .item .tit { font-size:var(--p1); font-weight:600; margin-bottom:2rem; text-align: center;}
.main-record ul li .item .val { display: flex; align-items: flex-end; line-height: 1;}
.main-record ul li .item .val .num { font-size:5.6rem; font-weight:600; }
.main-record ul li .item .val em { font-size:var(--h2); font-weight:600; align-self: flex-start; line-height: 1; transform: translateY(-1.5rem); }
.main-record ul li .item .val small { font-size:var(--p1); font-weight:500;  transform: translateY(-0.5rem);}
.main-record  ul li .item{ transform: translateY(8rem); opacity:1; transition: transform 1s var(--ease1), opacity 1s var(--ease1);}
.main-record  ul li:nth-child(2) .item{ transition-delay: 0.2s;}
.main-record  ul li:nth-child(3) .item{ transition-delay: 0.4s;}
.main-record  ul li:nth-child(4) .item{ transition-delay: 0.6s;}
.main-record.active ul li .item{ transform: unset; opacity:1; }

.main-partner { padding:var(--mainPd) 0; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column;  overflow: hidden;}
.main-partner .in { width:100%; }
.main-partner .h2-main { text-align: center;}
.main-partner .main-desc { text-align: center; margin-bottom: 15rem;}
.main-partner .partners1 ul { display: flex; flex-wrap: wrap; margin-bottom: 10rem;}
.main-partner .partners1 ul li { flex:1; transform: translateY(8rem); opacity:0; transition: all 1s var(--ease1); position:relative; padding-top:calc(25% - 1.5rem);}
.main-partner .partners1 ul li:nth-child(2) { transition-delay: 0.2s;}
.main-partner .partners1 ul li:nth-child(3) { transition-delay: 0.4s;}
.main-partner .partners1 ul li:nth-child(4) { transition-delay: 0.6s;}
.main-partner .partners1 ul li { transform: unset; opacity:1;}
.main-partner .partners1 ul li + li { margin-left: 3rem;}
.main-partner .partners1 ul li:nth-child(even) { transform: translateY(5rem);}
.main-partner .partners1 ul li .item {position:absolute; top:0; left:0; width: 100%; height: 100%; border-radius:3rem; background-color: #F6F6F6; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 4rem 0;}
.main-partner .partners1 ul li .item .img img { width:9rem; }
.main-partner .partners1 ul li .item p:not(.txt) { display: flex; justify-content: center; align-items: center; font-size:var(--h4); font-weight:700; margin-top:2rem; letter-spacing: -1px; }
.main-partner .partners1 ul li .item p i{width:1.2em;}
.main-partner .partners1 ul li .item p i:last-child { transform: scaleX(-1);}
.main-partner .partners1 ul li .item .txt{font-size:var(--p3); font-weight: 500; text-align: center; margin-top:2rem; padding: 0 3%;}
.main-partner .partners2 { display: flex; white-space: nowrap; overflow: hidden; transform: translateY(8rem); opacity:0; transition: all 1s var(--ease1);}
.main-partner .partners2 div { display: flex; flex-wrap: nowrap; animation:txtAni 50s linear infinite; }
.main-partner .partners2 div p { width:45rem; }
.main-partner .partners2 div p + p {margin-left: -3rem}
.main-partner .partners2 div p img {width: 100%;}
.main-partner .partners2 + .partners2 div {animation-direction: reverse;}
.main-partner .partners2.active { transform: unset; opacity:1; }
.main-partner .bg { position: absolute; left:0; top:0; width:100%; height:100%; z-index:-1;}
.main-partner .bg p { position: absolute;  top:0;  }
.main-partner .bg p img { width:100%; height:100%; object-fit: cover; }
.main-partner .bg p:nth-child(1) { left:45rem; top:-25rem; width:45rem }
.main-partner .bg p:nth-child(2) { left:-10rem; top:35rem; width:50rem; }
.main-partner .bg p:nth-child(3) { right:-10rem; top:30rem; width:60rem; }

.main-donate { padding-bottom:var(--mainPd);  position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; background: linear-gradient(0deg,rgba(246, 239, 234, 1) 0%, rgba(241, 236, 214, 0) 100%);}
.main-donate .in { width:100%; }
.main-donate .tabs { transform: translateY(8rem); opacity:0; transition: all 1s var(--ease1); padding-top: 15px; padding-bottom: 15px;}
.main-donate .tabs.active { transform: unset; opacity:1;}
.main-donate .tabs a { background-color: #fff; transition: all 0.5s ease; box-shadow: 0 0 15px rgba(0,0,0,0.05);}
.main-donate .tabs a.active { background-color: var(--green); color:#fff;}
@keyframes txtAni {
    0% { transform: translate3d(0, 0, 0); }
    100% {  transform: translate3d(-100%, 0, 0); }
}

.main-donate .donate-box  { margin-top:5rem; transform: translateY(8rem); opacity:0; transition: all 1s var(--ease1);}
.main-donate .donate-box.active { transform: unset; opacity:1;}
.main-donate .donate-box .box { display: flex; }
.main-donate .donate-box .box > div { flex:1; min-width: 0;}
.main-donate .donate-box .box .left { margin-right:3rem; padding-top: 50%; position: relative}
.main-donate .donate-box .box .left a { position: absolute;left: 0; top: 0; width: 100%; height: 100%; display: block; border-radius:4rem; background-color: #AAC635; color:#fff; padding: 8rem 0 0 8rem; }
.main-donate .donate-box .box .left a i { position: absolute; right:6rem; bottom:6rem; font-size: 1rem ;width:44em; }
.main-donate .donate-box .box:nth-child(2) .left a i {width: 45em;}
.main-donate .donate-box .box .left a .t1 { font-size:var(--p1); font-weight:700; margin-bottom: 3rem;}
.main-donate .donate-box .box .left a .t2 { font-size:4rem; font-weight:700; margin-bottom: 5rem; max-width:85%; word-break: keep-all; }
.main-donate .donate-box .box .left a svg { width:5.2rem; height: auto; transition: all 1s ease;}

.main-donate .donate-box .box .right { display: flex; flex-direction: column;}
.main-donate .donate-box .box .right a { flex:1; display: flex; align-items: center; border-radius:3rem; overflow: hidden; background-color: #fff; transition: all 1s ease;}
.main-donate .donate-box .box .right a + a { margin-top:3rem}
.main-donate .donate-box .box .right a img { width:22rem; height:100%; object-fit: cover;}
.main-donate .donate-box .box .right a .text { padding:2rem 4rem; min-width: 0; ; }
.main-donate .donate-box .box .right a .text .subj { font-size:var(--h4); font-weight:700; margin-bottom:2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.main-donate .donate-box .box .right a .text .txt { font-size:var(--p3); font-weight:500; line-height: 1.7; margin-bottom:2rem;  overflow: hidden;    text-overflow: ellipsis;    display: -webkit-box;    -webkit-box-orient: vertical;    -webkit-line-clamp: 2;}
.main-donate .donate-box .box .right a .text .date { font-size:var(--p3); color:var(--graya);  }


.main-latest { padding-top:var(--mainPd);  position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; overflow: hidden}
.main-latest .in { width:100%; display: flex; justify-content: space-between}
.main-latest .left_box {position: relative; padding-bottom: 60rem}
.main-latest .h2-main { position: relative; margin-bottom: 10rem; z-index: 3}
.main-latest .h2-main .btn-main-more { margin-top:5rem}
.main-latest .box {  width: 50% ;transform: translateY(8rem); opacity:0; transition: all 1s var(--ease1); padding-bottom: 12rem}
.main-latest .box.active { transform: unset; opacity:1;}
.main-latest .photo { display: flex; align-items: flex-end; position: absolute; left: 0; bottom: -2px; width: 100%; height: 100%;z-index: -1;}
.main-latest .photo img ,
.main-latest .photo video {width: 150%; max-width: none; display: block;}
/*.main-latest .photo { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; overflow: hidden }*/
/*.main-latest .photo video.pc_only { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; transform: translateZ(0) }*/

.main-latest .box ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr));position: relative; z-index: 3; gap: 3.5rem; height: 100%}
.main-latest .box ul li a { display: flex; flex-direction: column; justify-content: space-between; border-radius:4rem;  padding:4.5rem 5rem;  border:1px solid #ddd; transition: all 1s ease; height: 100%}
.main-latest .box ul li a .type { font-size:var(--p2); font-weight:600; color:var(--green); margin-bottom: 1.5rem; }
.main-latest .box ul li a .subj { font-size:var(--h3); font-weight:600; line-height: 1.5; margin-bottom: 2rem; overflow: hidden;text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;}
.main-latest .box ul li a .date { font-size:var(--p3); color:var(--gray6);  }




@media screen and (max-width: 2000px) {
    .main-visual .controls { left: 10rem; bottom:63rem;}
    .main-visual .swiper-slide .txt-box { left: 10rem;bottom:10rem;;}

    .main-practice .slider .swiper-slide a .txt-box .subj{font-size: 18px;}

}


@media screen and (max-width: 1640px) {

    .main-partner .partners1 ul li .item p {font-size: var(--h4); text-align: center;}
    .main-partner .partners1 ul li .item p i{width: 0.9em;}
    .main-donate .donate-box .box .left {padding-top: 35%}
    .main-donate .donate-box .box .right a img {width: 26rem}

    .main-partner .partners1 ul li .item .txt br{display: none;}

}





@media screen and (max-width: 1240px) {


    .btn-main-more i svg {margin-top: -3px;}

    .main-touch .title { padding-bottom: 8vh;}
    .main-touch .innerCercle { width:300vw; height: 300vw; left: calc(50% - 150vw); }
    .main-touch .innerCercle .cercle .card { width:24vw; }
    .main-touch .innerCercle .cercle .card { transform: scale(1.05);}
    .main-touch .innerCercle .cercle .card .txt-box { opacity:1; }
    .main-touch .innerCercle .cercle .card .txt-box .tit,
    .main-touch .innerCercle .cercle .card .txt-box .desc,
    .main-touch .innerCercle .cercle .card .txt-box .view { transform: unset; opacity:1; }
    .main-record { padding: calc(var(--mainPd) / 2) 0; min-height: auto;}

    .main-partner .partners1 ul li .item p:not(.txt){font-size:3rem; padding: 0 3%;}

    .main-visual { height: auto; margin-bottom: 20px}

    .main-visual .swiper-slide .txt-box .lb p {font-size: 12px;}
    .main-visual .swiper-slide .txt-box .tit { font-size:24px; }
    .main-visual .swiper-slide .txt-box .txt { font-size:14px; margin-bottom: 20px;}

    .main-visual .controls {left: 30px; bottom: 55rem}
    .main-visual .swiper-slide .txt-box {left: 30px; bottom: 30px}

    .main-visual {border-radius: 0;}
    .main-visual .swiper-slide {background-color: transparent !important; display: flex; flex-direction: column; }
    .main-visual .swiper-slide .img {position: relative; width:100%; padding-top: max(65% , 230px); height: auto;  border-radius: 20px; overflow: hidden; transform: unset;}
    .main-visual .swiper-slide .img > * {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.1);}
    .main-visual .swiper-slide.swiper-slide-active .img > *  {transition: transform 2s ease; transform: scale(1);}
    .main-visual .swiper-slide .pc_only {display: none;}
    .main-visual .swiper-slide .mo_only {display: block !important;}

    .main-record ul li .item .tit {font-size: var(--p2)}
    .main-record ul li .item .val .num {font-size:5.1rem }
    .main-record ul li + li {margin-left: 10px}
    .main-partner .partners1 ul li {padding-top: 30% }

    .main-latest .box {width: 60%}
    .main-latest .photo img, .main-latest .photo video {transform: translateX(-10%)}






}

@media screen and (max-width: 768px) {

    
    .h2-main {margin-bottom: 20px;}
    .main-latest .h2-main .btn-main-more {margin-top: 20px;}

    /*.main-quick {position: fixed; left: 0; bottom: 0px; width: 100%; z-index: 50; background-color: var(--green);}*/
    .main-quick {margin-top: 00px; padding: 0 var(--inPd)}
    .main-quick .in {padding: 0;}
    .main-quick nav {border-radius: 20px}
    .main-quick nav ul li a {font-size: 13px;padding: 15px 0 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.6; }
    .main-quick nav ul li a img {margin-right: 0; margin-bottom: 5px; width: 25px}
    .main-desc {font-size: 14px; font-weight: 500;}
    .main-desc br {display: none;}

    .btn-main-more {font-size: var(--p3); padding: 0 1em;}
    .btn-main-more i {margin-right: 1.5rem; width: 4rem; transform: scale(1);}
    

    .main-quick nav ul {overflow: auto;}



    .main-desc,
    .main-partner .main-desc,
    .main-latest .h2-main {margin-bottom: var(--contMt);}



    .main-practice .bg { display: none;}
    .slider-box { overflow: visible;}
    .slider-box .swiper { padding:0 var(--inPd); margin:0 calc(-1 * var(--inPd)) }
    .tabs-head { display: block;}
    .tabs-head .tabs { margin-bottom: 0px; }

    .main-practice {padding-top: calc(var(--mainPd) - 0rem);}
    .main-practice .slider-box {margin-bottom: 0;}
    .main-practice .tabs-head {display: flex;flex-direction: column; align-items: flex-start;width: 100%; }
    .main-practice .tabs-head .tabs {order: 2; margin-top: 30px; width: 100%; background-color: #f6f6f6; border-radius: 5em; margin-left: 0; padding: 0;}
    .main-practice .tabs-head .tabs a {flex: 1;text-align: center; font-size: 15px; height: 2.6em; line-height: 2.6em; margin-right: 0;}
    .main-practice .slider .swiper-slide a .txt-box {margin-top: var(--listTxtMt);}

    .main-record ul li .item .val .num {font-size: 4rem;}

    .main-miracle { padding-bottom: var(--mainPd); }
    .main-miracle .tabs {flex-wrap: nowrap; overflow: auto; margin-left: calc(var(--inPd) * -1); width: calc(100% + var(--inPd) * 2); padding: 0 var(--inPd)}
    .main-miracle .tabs::-webkit-scrollbar {display: none}
    .main-miracle .tabs a {flex-shrink: 0}
    .main-miracle .tabs-head .controls {display: none}
    .main-miracle .slider .swiper-slide { width:70% !important;;}
    .main-miracle .slider .swiper-slide a .txt-box .box,
    .main-miracle .slider .swiper-slide a { width:100% !important; }


    .main-miracle .slider .swiper-slide a .txt-box .box,
    .main-miracle .slider .swiper-slide a .img {width: 100%  !important;}
    /*
    .main-miracle .slider .swiper-slide-next {transform: translateX(-20%);}
    .main-miracle .slider .swiper-slide-prev {transform: translateX(20%);}
     */
     
    .main-miracle .slider .swiper-slide {transition: transform 0.3s ease-in-out;}
    

    .main-miracle .slider .swiper-slide a .txt-box .subj {font-size: var(--h4);}
    .main-miracle .slider .swiper-slide a .txt-box .desc {font-weight: 500;}
    


    .main-touch .touch-wrap {height: auto;}
    .main-touch { padding-bottom: var(--mainPd); height: auto;}
    .main-touch .title {padding: 0 var(--inPd);}
    .main-touch .innerCercle { width:auto; height: auto; border-radius: 0; position: static;}
    .main-touch .innerCercle .cercle { position: static; transform: unset !important;}
    .main-touch .innerCercle .cercle > div { height: auto; padding:0; ;}
    .main-touch .innerCercle .cercle .card { aspect-ratio: inherit; width:100%; transform: unset; }
    
    .main-touch .innerCercle .cercle .card .txt-box  {position: static; color:var(--black); background: none; margin-top:20px;}
    .main-touch .innerCercle .cercle .card .txt-box .tit {font-size: var(--h4);}
    .main-touch .innerCercle .cercle .card .txt-box .desc {font-weight: 500; font-size: var(--p2);}
    .main-touch .innerCercle .cercle .card .txt-box .view:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cg id='_' data-name='+' transform='translate(-1662 -7963)'%3E%3Crect id='사각형_7635' data-name='사각형 7635' width='2' height='10' rx='1' transform='translate(1666 7963)' fill='%23000'/%3E%3Crect id='사각형_7636' data-name='사각형 7636' width='2' height='10' rx='1' transform='translate(1672 7967) rotate(90)' fill='%23000'/%3E%3C/g%3E%3C/svg%3E")    }
    .main-touch .innerCercle .cercle .card { transform: unset !important;}
    .main-touch .innerCercle .cercle .card img { border-radius:20px;}
    
    
    .main-record ul { display: grid; grid-template-columns: repeat(2, 1fr); gap:10px; margin-top: 7rem;}
    .main-record ul li + li { margin-left: 0;}
    .main-record ul li .item .tit { font-size:13px; }
    .main-partner .bg { display: none;}
    .main-partner .partners1 ul { display: grid; grid-template-columns: repeat(2, 1fr); gap:10px;}
    .main-partner .partners1 ul li:nth-child(even) {transform: unset; }
    .main-partner .partners1 ul li + li { margin-left: 0;}
    /*.main-partner .partners1 ul li .item .img img { width:50px; }*/
    .main-partner .partners1 ul li .item p { font-size:14px; letter-spacing: -1px;}
    .main-partner .partners1 ul li .item p i {}
    .main-partner .partners2 { opacity:1; transform: unset;}

    .main-partner .partners2 div p{overflow: hidden;}
    .main-partner .partners2 div p img{display: inline-block; width: 120%; height: 100%; object-fit: cover;}
    .main-partner .partners2 div > a{display: inline-block; margin: 0 -20px;}
    .main-partner .partners1 ul li{padding-top: 0;}
    .main-partner .partners1 ul li .item{position:relative;}

    .main-practice .slider .swiper-slide a .txt-box .subj {font-size: 16px;}
    .main-miracle .slider .swiper-slide a .txt-box .tags p {font-size: 12px; padding: 0.25em 0.9em;}
    
    .main-donate {background: linear-gradient(0deg,rgba(246, 239, 234, 1) 50%, rgba(241, 236, 214, 0) 100%); padding-bottom: calc(var(--mainPd) / 2);}
    .main-donate .donate-box .box { display: block;}
    .main-donate .donate-box .box .left { margin-right:0; margin-bottom: 20px; padding-top: 0}
    .main-donate .donate-box .box .left a { padding:30px 30px 150px; position: relative; left: 0; top: 0}
    .main-donate .donate-box .box .right a { align-items: stretch;}
    .main-donate .donate-box .box .right a img { height: auto;}
    .main-donate .donate-box .box .right a .text {padding: 2rem 3rem; word-break: break-all;}
    .main-donate .donate-box .box .right a .text .txt {font-size: var(--p2);}

    .main-latest .in {display: block}
    .main-latest .left_box {padding-bottom: 0px}
    .main-latest .box {width: 100%; }
    .main-latest .box ul {gap: 10px}
    .main-latest .box ul li a {padding: 15px 15px; border-radius: 10px}
    .main-latest .box ul li a .type {font-size: var(--p3);}
    .main-latest .box ul li a .subj {font-size: 15px; }

    .main-latest .box { display: block;}
    .main-latest .box ul { width:auto; }
    .main-latest .box .photo { display: none;}
    .main-latest .box ul li a .type {margin-bottom: 3px;}
    .main-latest .box ul li a .subj {margin-bottom: 5px;}



    .main-touch .lines {bottom: 0; left: 0;width: 300vw;height: 18vw;}

    .main-donate .donate-box .box .left a { padding-bottom:30px;}
    .main-donate .donate-box .box .right a .text { padding-top:20px; padding-bottom:20px;}
    .only-foldon { display:block;}

    .main-partner .partners1 ul li .item p:not(.txt){font-size:2.8rem;}







}


@media screen and (max-width: 630px) {
    .only-foldon { display:none !important;}
    .main-donate .donate-box .box .left a { padding-bottom:160px;}

}

@media screen and (max-width: 600px) {

    .main-visual {margin-bottom: 0}
    .main-visual .swiper-slide .txt-box { position: static; order: 2; margin-top: 30px; }

    .main-visual .swiper-slide .txt-box .tit p {color: #000 !important;}

    .main-visual .swiper-slide .txt-box .txt p {color: #000 !important;}
    .main-visual .swiper-slide .txt-box .btn-main-more {background-color: transparent; border: 1px solid var(--black) !important; color: var(--black) !important;}
    .main-visual .controls {left: 20px;bottom: auto;top: -30px;width: 100%;margin-top: 65%;}
    .main-visual .swiper-slide .txt-box .btn-main-more svg circle {fill: var(--black);}
    .main-visual .swiper-slide .txt-box .btn-main-more svg path {fill: #fff;}
    .main-visual .swiper-slide .txt-box {padding-bottom: 8rem;}

    .main-partner .partners1 ul li .item .txt br.mo_show{display: block;}





}




@media screen and (min-width: 1240px) {
    /*.main-quick nav ul li a:hover {background-color: #78aa32;}*/
    .main-practice .slider .swiper-slide a:hover .img img { transform: scale(1.2);}
    
    .main-touch .innerCercle .cercle .card:hover { transform: scale(1.05); }
    .main-touch .innerCercle .cercle .card:hover .txt-box { opacity:1; }
    .main-touch .innerCercle .cercle .card:hover .txt-box .tit { transform: unset; opacity:1; }
    .main-touch .innerCercle .cercle .card:hover .txt-box .desc { transform: unset; opacity:1; }
    .main-touch .innerCercle .cercle .card:hover .txt-box .view { transform: unset; opacity:1; }
    
    .main-donate .donate-box .box .left a:hover svg { transform:translateX(2rem)}
    .main-donate .donate-box .box .right a:hover {box-shadow: 0 0 4em rgba(0,0,0,0.2);}
    
    .main-latest .box ul li a:hover { box-shadow: 0 0 4em rgba(0,0,0,0.2);}
    /*.main-quick nav ul li a:hover {background-color: transparent;}*/

}