@charset "utf-8";

/*
 * main.css
 * 메인영역 삽입 추가하시면됩니다. 아래 커스텀진행하세요.
 *
 * 1) main visual
 * 
 */
 
/* 1) main visual */
.mainVisual{position:relative; padding-top:var(--hd-height); height:100vh; background:#000;}
.mainVisual *{box-sizing:border-box; word-break:keep-all;}
.mainVisual .swiper{height:100%;}
.mainVisual .swiper-slide:before{content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(1.1); transition:6s ease;}
.mainVisual .swiper-slide-active:before{transform:scale(1);}
.mainVisual .swiper-slide.s1:before{background:url('/images/main/mainVisual1.jpg')no-repeat center/cover;}
.mainVisual .swiper-slide.s2:before{background:url('/images/main/mainVisual2.jpg')no-repeat center/cover;}
.mainVisual .swiper-slide.s3:before{background:url('/images/main/mainVisual3.jpg')no-repeat center/cover;}
.mainVisual .swiper-slide .txt{display:flex; flex-direction:column; justify-content:center; gap:30rem; padding-bottom:60rem; height:100%;}
.mainVisual .swiper-slide .txt em{display:block; font-size:var(--fs25); font-weight:600; color:#fff; line-height:1.4; transform:translateY(30); opacity:0;}
.mainVisual .swiper-slide .txt em > br{display:none;}
.mainVisual .swiper-slide .txt h2{font-size:var(--fs70); font-weight:bold; color:#fff; line-height:1; transform:translateY(30rem); opacity:0;}
.mainVisual .swiper-slide-active .txt em{animation:visualTxt 1.5s both;}
.mainVisual .swiper-slide-active .txt h2{animation:visualTxt 1.5s .2s both;}
.mainVisual .ctrl{display:flex; align-items:center; position:absolute; left:50%; bottom:80rem; transform:translateX(-50%); z-index:1;}
.mainVisual .ctrl .pager_bar{position:relative; width:280rem; height:2px; background:rgba(255,255,255,.3);}
.mainVisual .ctrl .pager_bar:before{content:''; position:absolute; inset:0; width:0; background:#fff;}
.mainVisual .ctrl .pager_bar.active:before{animation:pager_bar 6s linear both;}
.mainVisual .ctrl .swiper-pagination{display:flex; align-items:center; justify-content:center; gap:6rem; position:relative; left:auto; top:auto; right:auto; bottom:auto; margin:0; width:100rem; font-weight:500; font-family:var(--font-eng); font-size:14rem; color:rgba(255,255,255,.4); line-height:1;}
.mainVisual .ctrl .swiper-pagination span{font-size:var(--fs16); font-weight:bold;}
.mainVisual .ctrl .swiper-pagination span.swiper-pagination-current{color:#fff;}
.mainVisual .ctrl .navi{display:flex; gap:20rem; margin-left:30rem;}
.mainVisual .ctrl .navi > div{position:relative; left:auto; top:auto; right:auto; bottom:auto; margin:0; width:20rem; height:20rem;}
.mainVisual .ctrl .navi > div:after{display:none;}
.mainVisual .ctrl .navi > div:before{content:''; display:block; width:13rem; aspect-ratio:1/1; border-top:3rem solid #fff; border-right:3rem solid #fff;}
.mainVisual .ctrl .navi > div.swiper-button-next:before{transform:rotate(45deg);}
.mainVisual .ctrl .navi > div.swiper-button-prev:before{transform:rotate(-135deg);}
.mainVisual .ctrl .scroll_down{position:absolute; bottom:0; right:0;}
.mainVisual .ctrl .scroll_down span{display:block; position:relative; width:34rem; height:54rem; border:2px solid #fff; border-radius:17rem; box-sizing:border-box;}
.mainVisual .ctrl .scroll_down span:before{content:''; display:block; position:absolute; top:10rem; left:50%; width:8rem; height:8rem; border-radius:50%; background:#fff; transform:translateX(-50%); box-sizing:border-box; animation:scrollUi 2s infinite;}
@keyframes visualTxt{
    0%{transform:translateY(30rem); opacity:0;}
    100%{transform:translateY(0); opacity:1;}
}
@keyframes pager_bar{
	0%{width:0%;}
	100%{width:100%;}
}
@keyframes scrollUi{
  0%{transform:translate(-50%, 0); opacity:0;}
  40%{opacity:1;}
  80%{transform:translate(-50%, 20px); opacity:0;}
  100%{opacity:0;}
}
@media(max-width:1830px){
    .mainVisual .ctrl .scroll_down{padding-right:60rem;}
}
@media(max-width:1024px){
    .mainVisual .ctrl{bottom:40rem;}
    .mainVisual .ctrl .scroll_down{padding-right:80rem;}
}
@media(max-width:768px){
    .mainVisual .swiper-slide .txt{gap:25rem;}
    .mainVisual .ctrl .pager_bar{width:250rem;}
    .mainVisual .ctrl .navi{margin-left:20rem;}
}
@media(max-width:480px){
    .mainVisual .swiper-slide .txt{gap:20rem;}
    .mainVisual .swiper-slide .txt em > br{display:block;}
    .mainVisual .swiper-slide .txt h2{font-size:var(--fs60);}
    .mainVisual .ctrl .pager_bar{width:100rem;}
    .mainVisual .ctrl .swiper-pagination{gap:4rem; width:70rem; font-size:13rem;}
    .mainVisual .ctrl .navi{gap:16rem; margin-left:10rem; transform-origin:left; transform:scale(.9);}
    .mainVisual .ctrl .scroll_down{bottom:-10rem; padding-right:70rem; transform-origin:right bottom; transform:scale(.8);}
}


/* main common */
:root{
    --p120:120rem;
    --p150:150rem;
    
    @media(max-width:1024px){
        --p120:80rem;
        --p150:120rem;
    }
    @media(max-width:768px){
        --p120:70rem;
        --p150:80rem;
    }
    @media(max-width:480px){
        --p120:50rem;
        --p150:60rem;
    }
}
main{overflow:hidden;}
main *{box-sizing:border-box; word-break:keep-all;}
.mainTit{display:flex; justify-content:space-between; align-items:center; margin-bottom:35rem;}
.mainTit h2{font-size:var(--fs40); font-weight:bold; line-height:1; color:#090909;}
.mainTit a.btnMore{display:flex; align-items:center; justify-content:center; width:160rem; height:46rem; border-radius:25rem; font-size:var(--fs16); font-family:var(--font-eng); font-weight:600; line-height:1; color:#fff; background:var(--gradient-toLeft); transition:.3s ease;}
@media(hover:hover){
    .mainTit a.btnMore:hover{box-shadow:5rem 10rem 30rem var(--color-shadow);}
}
@media(max-width:1024px){
    .mainTit h2{font-size:var(--fs35);}
}
@media(max-width:768px){
    .mainTit{margin-bottom:25rem;}
    .mainTit h2{font-size:var(--fs40);}
}
@media(max-width:480px){
    .mainTit a.btnMore{width:135rem; height:40rem;}
}


/* 교육신청 */
.apply{padding:var(--p150) 0;}
.applySwiper{overflow:visible;}
.applySwiper .thumb{display:block; position:relative; padding-top:68%; overflow:hidden;}
.applySwiper .thumb img{display:block; position:absolute; left:0; top:0; object-fit:cover; width:100%; height:100%; transition:.5s ease;}
.applySwiper .name{display:block; margin:25rem 0 20rem; font-size:var(--fs20); font-weight:600; line-height:1.4; color:#111; overflow:hidden; text-overflow:ellipsis; text-align:left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.applySwiper .date{display:block; font-size:var(--fs16); line-height:1; color:#7592a1;}
.applySwiper .ctrl{display:flex; align-items:center; justify-content:space-between; margin-top:50rem;}
.applySwiper .ctrl .swiper-scrollbar{position:relative; left:auto; right:auto; top:auto; bottom:auto; width:calc(100% - 120rem); height:4rem; border-radius:2rem; background:rgba(0,0,0,.1);}
.applySwiper .ctrl .swiper-scrollbar-drag{background:#333; border-radius:2rem;}
.applySwiper .ctrl .navi{display:flex; gap:22rem; margin-left:30rem;}
.applySwiper .ctrl .navi > div{position:relative; left:auto; top:auto; right:auto; bottom:auto; margin:0; width:20rem; height:20rem;}
.applySwiper .ctrl .navi > div:after{display:none;}
.applySwiper .ctrl .navi > div:before{content:''; display:block; width:13rem; aspect-ratio:1/1; border-top:3rem solid #333; border-right:3rem solid #333;}
.applySwiper .ctrl .navi > div.swiper-button-next:before{transform:rotate(45deg);}
.applySwiper .ctrl .navi > div.swiper-button-prev:before{transform:rotate(-135deg);}
.applySwiper .ctrl .navi > div.swiper-button-disabled{opacity:.3;}
@media(hover:hover){
    .applySwiper a:hover .thumb img{transform:scale(1.1);}
}
@media(max-width:1024px){
    .applySwiper .ctrl{margin-top:40rem;}
}
@media(max-width:768px){
    .applySwiper .ctrl{margin-top:30rem;}
}
@media(max-width:480px){
    .applySwiper .name{margin:20rem 0 15rem;}
    .applySwiper .ctrl .swiper-scrollbar{width:calc(100% - 80rem);}
    .applySwiper .ctrl .navi{gap:16rem; margin-left:0; transform-origin:right; transform:scale(.9);}
}


/* flexWrap */
.flexWrap{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));}
.flexWrap .cntInr{padding:var(--p120) 15%;}
/* 공지사항 */
.notice{background:url('/images/main/notice_bg.jpg')no-repeat center/cover;}
.noticeList li+li{margin-top:15rem;}
.noticeList li a{display:flex; align-items:center; justify-content:space-between; padding:0 20rem; height:70rem; background:#fff; border-radius:5rem; border:1px solid #fff; transition:.3s ease;}
.noticeList li a em{display:block; width:calc(100% - 100rem); font-size:var(--fs18); line-height:1; color:#111; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.noticeList li a em span{display:inline-block; margin-right:10rem; font-family:var(--font-eng); font-weight:bold; color:var(--color-point);}
.noticeList li a i{display:block; width:100rem; font-size:14rem; line-height:1; color:#aaa; text-align:end;}
/* 교육문의 */
.inquiry{background:url('/images/main/inquiry_bg.jpg')no-repeat center/cover;}
.inquiry .mainTit h2{color:#fff;}
.inquiry .mainTit a.btnMore{opacity:0; visibility:hidden;}
.inquiry .mainTit a.btnMore{opacity:0; visibility:hidden;}
.inquiry .info{display:flex; gap:20rem; height:calc((70rem * 3) + (15rem * 2));}
.inquiry .info > *{padding:0 30rem; width:calc(50% - 10rem); border-radius:5rem;}
.inquiry .info .contact{background:rgba(255,255,255,.2); color:#fff;}
.inquiry .info .contact li{display:flex; flex-direction:column; justify-content:center; height:50%;}
.inquiry .info .contact li+li{border-top:1px solid rgba(255,255,255,.5);}
.inquiry .info .contact li em{display:block; margin-bottom:15rem; font-size:var(--fs18); line-height:1; opacity:.8;}
.inquiry .info .contact li a{display:block; font-size:var(--fs30); font-family:var(--font-eng); font-weight:bold; line-height:1;}
.inquiry .info .contact li p{font-size:var(--fs25); font-family:var(--font-eng); font-weight:bold; line-height:1;}
.inquiry .info .certiSwimming{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:25rem; background:#fff;}
.inquiry .info .certiSwimming span{display:flex; align-items:center; justify-content:center; padding-top:5rem; width:120rem; aspect-ratio:1/1; border-radius:50%; background:#f5f5f5;}
.inquiry .info .certiSwimming span img{display:block; width:54rem;}
.inquiry .info .certiSwimming em{display:block; font-size:var(--fs22); font-weight:bold; line-height:1.3; color:#111; text-align:center;}

@supports(background:rgba(255,255,255,.2)){
    .inquiry .info .contact{background:rgba(255,255,255,.1); backdrop-filter:blur(10px);}
}
@media(hover:hover){
    .noticeList li a:hover{border-color:var(--color-point);}
}
@media(max-width:1720px){
    .flexWrap .cntInr{padding:var(--p120) 8%}
}
@media(max-width:1450px){
    .inquiry .info .contact{width:calc(60% - 20rem);}
    .inquiry .info .certiSwimming{width:40%;}
}
@media(max-width:1024px){
    .noticeList li a em{width:calc(100% - 80rem);}
    .noticeList li a em span{margin-right:7rem;}
    .noticeList li a i{width:80rem;}
    
    .inquiry .info{gap:10rem;}
    .inquiry .info > *{padding:0 20rem;}
    .inquiry .info .contact{width:calc(65% - 10rem);}
    .inquiry .info .contact li a{font-size:var(--fs29);}
    .inquiry .info .certiSwimming{width:35%;}
    .inquiry .info .certiSwimming span{width:100rem;}
    .inquiry .info .certiSwimming span img{width:45rem;}
    .inquiry .info .certiSwimming em{font-size:var(--fs20);}
}
@media(max-width:768px){
    .flexWrap{display:block;}
    .flexWrap .cntInr{padding:var(--p150) 4%;}
    
    .inquiry .info{height:200rem;}
    .inquiry .info .contact{width:calc(55% - 10rem);}
    .inquiry .info .contact li a{font-size:var(--fs35);}
    .inquiry .info .certiSwimming{width:45%;}
}
@media(max-width:480px){
    .noticeList li+li{margin-top:10rem;}
    .noticeList li a{padding:0 15rem; height:60rem;}
    .noticeList li a em{width:calc(100% - 72rem);}
    .noticeList li a i{width:72rem; font-size:12.5rem;}
    .inquiry .info{height:160rem;}
    .inquiry .info > *{padding:0 15rem;}
    .inquiry .info .contact{width:calc(65% - 10rem);}
    .inquiry .info .contact li em{margin-bottom:10rem;}
    .inquiry .info .contact li a{font-size:var(--fs30);}
    .inquiry .info .certiSwimming{gap:10rem; width:35%;}
    .inquiry .info .certiSwimming span{width:80rem;}
    .inquiry .info .certiSwimming span img{width:35rem;}
    .inquiry .info .certiSwimming em{font-size:16rem;}
}