@charset "utf-8";

/*
 * main.css
 * 메인영역 삽입 추가하시면됩니다. 아래 커스텀진행하세요.
 *
 * 1) main visual
 * 
 */
 
/* 1) main visual */
[data-mainVisual]{position:relative; height:100vh;}
[data-mainVisual] *{box-sizing:border-box; word-break:keep-all;}
[data-mainVisual] .visual-list{height:100%;}
	/* img */
[data-visual="img"]{overflow:hidden; display:block; height:100%;}
[data-visual="img"] img{object-fit:cover; width:100%; height:100%; transform:scale(1.1); transition:transform 7000ms linear;}
[data-visual="img"].motion__in img{transform:scale(1);}
	/* text */
[data-visual="text"]{display:flex; flex-direction:column; gap:30rem; position:absolute; top:50%; left:50%; margin-top:-45rem; z-index:5; width:92%; box-sizing:content-box; color:#fff; transform:translate(-50%, -50%); z-index:2; text-align:center;}
[data-visual="text"] em{font-size:var(--fs65); font-weight:500; line-height:1.3; transform:translateY(30rem); opacity:0; animation:visualTxt 2s ease both;}
[data-visual="text"] em b{font-weight:bold;}
[data-visual="text"] span{font-size:var(--fs28); line-height:1.4; transform:translateY(30rem); opacity:0; animation:visualTxt 1.8s .2s ease both;}
@keyframes visualTxt{
    100%{transform:translateY(0); opacity:1;}
}
    /* quick */
[data-visual="menu"]{display:flex; align-items:flex-end; position:absolute; left:0; bottom:0; z-index:2; width:100%; }
[data-visual="menu"] li{width:calc(100% / 3);}
[data-visual="menu"] a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:15rem; position:relative; height:120rem; border-top:1px solid rgba(255,255,255,.3); border-right:1px solid rgba(255,255,255,.3); transition:.5s ease; background:rgba(0,0,0,.2); }
[data-visual="menu"] a:before{content:''; display:block; position:absolute; left:0; bottom:0; width:100%; height:0; background:linear-gradient(to top, var(--color-point), transparent); transition:.5s ease;}
[data-visual="menu"] li:last-child a{border-right:none;}
[data-visual="menu"] a em{display:block; position:relative; margin-top:32rem; font-size:var(--fs22); font-weight:500; line-height:1; color:#fff; transition:.5s ease;}
[data-visual="menu"] a i{display:block; position:relative; font-family:var(--font-eng); font-size:var(--fs15); font-weight:bold; line-height:1; color:rgba(255,255,255,.6); transition:.5s ease; opacity:0;}
@supports(background:rgba(0,0,0,.2)){
    [data-visual="menu"] a{backdrop-filter:blur(10px); background:none;}
}
@media(hover:hover){
    [data-visual="menu"] a:hover{border-color:transparent; backdrop-filter:blur(0); background:transparent;}
    [data-visual="menu"] a:hover:before{height:200rem;}
    [data-visual="menu"] a:hover em{margin-top:-35rem;}
    [data-visual="menu"] a:hover i{opacity:1;}
}

@media(min-width:481px){
    [data-mainVisual] br.show480{display:none;}
}
@media(max-width:1024px){
    [data-visual="text"]{margin-top:-30rem;}
    [data-visual="text"] em{font-size:var(--fs60);}
    [data-visual="text"] span{font-size:var(--fs25);}
    [data-visual="menu"] a{height:80rem;}
    [data-visual="menu"] a em{margin-top:35rem; font-size:var(--fs18);}
    @media(hover:hover){
        [data-visual="menu"] a:hover:before{height:150rem;}
    }
}
@media(max-width:768px){
    [data-visual="text"]{gap:25rem;}
    [data-visual="menu"] a{gap:12rem; height:60rem;}
    [data-visual="menu"] a em{margin-top:30rem;}
    @media(hover:hover){
        [data-visual="menu"] a:hover:before{height:120rem;}
    }
}
@media(max-width:480px){}


/* main 공통 */
:root{
    --p150:150rem;
    --p250:250rem;
    
    @media(max-width:1400px){
        --p250:200rem;
    }
    @media(max-width:1024px){
        --p150:100rem;
        --p250:150rem;
    }
    @media(max-width:768px){
        --p150:70rem;
        --p250:100rem;
    }
    @media(max-width:480px){
        --p150:60rem;
        --p250:80rem;
    }
}
main *{box-sizing:border-box; word-break:keep-all;}
section{position:relative;}
@media(max-width:1024px){}
@media(max-width:768px){}
@media(max-width:480px){}


/* totur */
.tutor{padding:var(--p250) 0; overflow:hidden;}
.tutor .line{display:grid; grid-template-columns:1fr 1fr 1fr; position:absolute; left:0; top:0; width:100%; height:100%;}
.tutor .line li{border-right:1px solid rgba(187,187,187,.25);}
.tutor .line li:last-child{border-right:none;}
.tutor .box{display:flex; justify-content:space-between;}
.tutor .box+.box{margin-top:80rem;}
.tutor .box .txt{display:flex; flex-direction:column; justify-content:center; white-space:nowrap; height:380rem;}
.tutor .box .txt span{display:block; font-family:var(--font-eng); font-size:180rem; font-weight:900; line-height:1; color:#f2f2f2;}
.tutor .box .txt h2{position:relative; margin-top:-70rem; font-size:80rem; font-weight:900; line-height:1; color:#090909; z-index:1;}
.tutor .box .img img{display:block; width:380rem; height:380rem; border-radius:190rem; object-fit:cover; opacity:0; transition:1.5s ease 0s;}
.tutor .box .img.motion_in img{width:100%; opacity:1;}
.tutor .box:nth-child(1) .txt{width:715rem;}
.tutor .box:nth-child(1) .img{width:calc(100% - 715rem);}
.tutor .box:nth-child(2) .txt{width:740rem;}
.tutor .box:nth-child(2) .img{width:calc(100% - 740rem);}
.tutor .box:nth-child(3) .txt{width:945rem;}
.tutor .box:nth-child(3) .img{width:calc(100% - 945rem);}
.tutor .box:nth-child(odd) .txt h2{padding-left:100rem;}
.tutor .box:nth-child(odd) .img{display:flex; justify-content:flex-end;}
.tutor .box:nth-child(even){flex-direction:row-reverse;}
.tutor .box:nth-child(even) .txt{text-align:end;}
.tutor .box:nth-child(even) .txt h2{padding-right:100rem;}
.tutor .box .txt h2 em{position:relative;}
.tutor .box .txt h2 em:before{content:''; display:block; position:absolute; left:0; bottom:0; width:0; height:35%; background:var(--color-point); opacity:.3; z-index:-1; transition:.5s ease;}
.tutor .more{position:relative; margin-top:100rem;}
.tutor .box .txt.motion_in h2 em:before{width:100%; transition-delay:.5s;}
.tutor .moreBtn{display:flex; align-items:center; justify-content:center; flex-direction:column; gap:25rem; position:relative; margin:auto; width:250rem; aspect-ratio:1/1; border-radius:50%; background:linear-gradient(to bottom,#006396,#000e16); z-index:1; box-shadow:15rem 30rem 60rem rgba(0,128,196,.25);}
.tutor .moreBtn img{display:block; width:35rem;}
.tutor .moreBtn em{display:block; font-size:var(--fs25); font-weight:bold; line-height:1.4; color:#fff; text-align:center;}
.tutor .moreMarquee{display:flex; align-items:center; white-space:nowrap; will-change:transform; animation:marquee 45s linear infinite; position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%;}
.tutor .moreMarquee_cnt{display:flex; align-items:center; gap:150rem; font-family:var(--font-eng); font-size:120rem; font-weight:bold; line-height:1; color:#f7f7f7;}
@keyframes marquee {
  0% {transform: translateX(0) translateY(-50%);}
  100% {transform: translateX(-70%) translateY(-50%);}
}
@media(max-width:1600px){
    .tutor .box:nth-child(1) .txt{width:615rem;}
    .tutor .box:nth-child(1) .img{width:calc(100% - 615rem);}
    .tutor .box:nth-child(2) .txt{width:640rem;}
    .tutor .box:nth-child(2) .img{width:calc(100% - 640rem);}
    .tutor .box:nth-child(3) .txt{width:845rem;}
    .tutor .box:nth-child(3) .img{width:calc(100% - 845rem)}
    .tutor .box:nth-child(odd) .txt h2{padding-left:60rem;}
    .tutor .box:nth-child(even) .txt h2{padding-right:60rem;}
}
@media(max-width:1400px){
    .tutor .box .txt span{font-size:150rem;}
    .tutor .box .txt h2{margin-top:-50rem; font-size:70rem;}
    .tutor .box:nth-child(1) .txt{width:545rem;}
    .tutor .box:nth-child(1) .img{width:calc(100% - 545rem);}
    .tutor .box:nth-child(2) .txt{width:570rem;}
    .tutor .box:nth-child(2) .img{width:calc(100% - 570rem);}
    .tutor .box:nth-child(3) .txt{width:775rem;}
    .tutor .box:nth-child(3) .img{width:calc(100% - 775rem);}
}
@media(max-width:1024px){
    .tutor .box+.box{margin-top:60rem;}
    .tutor .box .txt{height:300rem;}
    .tutor .box .txt span{font-size:110rem;}
    .tutor .box .txt h2{margin-top:-40rem; font-size:var(--fs60);}
    .tutor .box:nth-child(odd) .txt h2{padding-left:30rem;}
    .tutor .box:nth-child(even) .txt h2{padding-right:30rem;}
    .tutor .box .img img{width:300rem; height:300rem;}
    .tutor .box:nth-child(1) .txt{width:430rem;}
    .tutor .box:nth-child(1) .img{width:calc(100% - 430rem);}
    .tutor .box:nth-child(2) .txt{width:445rem;}
    .tutor .box:nth-child(2) .img{width:calc(100% - 445rem);}
    .tutor .box:nth-child(3) .txt{width:595rem;}
    .tutor .box:nth-child(3) .img{width:calc(100% - 595rem);}
    .tutor .more{margin-top:80rem;}
    .tutor .moreBtn{gap:20rem; width:200rem;}
    .tutor .moreBtn img{width:22rem;}
    .tutor .moreBtn em{font-size:var(--fs20);}
    .tutor .moreMarquee_cnt{gap:120rem; font-size:90rem;}
}
@media(max-width:768px){
    .tutor .box+.box{margin-top:50rem;}
    .tutor .box .txt{height:220rem;}
    .tutor .box .txt span{font-size:75rem;}
    .tutor .box .txt h2{margin-top:-25rem; font-size:var(--fs50);}
    .tutor .box:nth-child(odd) .txt h2{padding-left:20rem;}
    .tutor .box:nth-child(even) .txt h2{padding-right:20rem;}
    .tutor .box .img img{width:220rem; height:220rem;}
    .tutor .box:nth-child(1) .txt{width:290rem;}
    .tutor .box:nth-child(1) .img{width:calc(100% - 290rem);}
    .tutor .box:nth-child(2) .txt{width:300rem;}
    .tutor .box:nth-child(2) .img{width:calc(100% - 300rem);}
    .tutor .box:nth-child(3) .txt{width:395rem;}
    .tutor .box:nth-child(3) .img{width:calc(100% - 395rem);}
    .tutor .more{margin-top:70rem;}
    .tutor .moreBtn{gap:15rem; width:170rem;}
    .tutor .moreBtn img{width:18rem;}
    .tutor .moreMarquee{animation:marquee 30s linear infinite;}
    .tutor .moreMarquee_cnt{gap:80rem; font-size:70rem;}
}
@media(max-width:480px){
    .tutor .box{display:block;}
    .tutor .box .txt{margin-bottom:30rem; height:auto; width:100% !important;}
    .tutor .box .txt h2{font-size:var(--fs55);}
    .tutor .box:nth-child(odd) .txt h2{padding-left:30rem;}
    .tutor .box:nth-child(even) .txt h2{padding-right:30rem;}
    .tutor .box .img{width:100% !important;}
    .tutor .box .img img{width:180rem; height:180rem;}
    .tutor .more{margin-top:60rem;}
    .tutor .moreBtn{width:150rem;}
    .tutor .moreMarquee{animation:marquee 20s linear infinite;}
    .tutor .moreMarquee_cnt{gap:40rem; font-size:50rem;}
}


/* cs */
.cs{padding:var(--p150) 0; overflow:hidden;}
.cs:before{content:''; display:block; position:absolute; left:0; top:0; width:100%; height:calc(100% - (var(--p150) + 230rem)); background:url('/images/main/tutor_bg.jpg')no-repeat center/cover;}
    /* notice */
.notice{padding-bottom:var(--p150)}
.notice .top{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:75rem;}
.notice .top h2{font-size:var(--fs55); font-weight:600; line-height:1; color:#090909}
.notice .top h2 em{display:block; margin-bottom:30rem; font-family:var(--font-eng); font-size:var(--fs20); font-weight:bold; color:var(--color-point);}
.notice .top .btn{display:flex; align-items:center; gap:60rem; margin-bottom:-3rem;}
.notice .top .btnNavi{display:flex; align-items:center; gap:25rem;}
.notice .top .btnNavi > div{display:flex; align-items:center; position:relative; left:auto; right:auto; top:auto; bottom:auto; margin:0; width:33rem; height:30rem;}
.notice .top .btnNavi > div img{display:block; width:100%;}
.notice .top .btnNavi > div:after{display:none;}
.notice .top .btnNavi i{display:block; width:1px; height:30rem; background:rgba(0,0,0,.2);}
.notice .top .btnNavi_next img{transform:rotate(180deg);}
.notice .btnMore{display:flex; align-items:center; justify-content:center; width:200rem; height:65rem; font-family:var(--font-eng); font-size:var(--fs16); font-weight:bold; line-height:1; color:#fff; border-radius:33rem; background:linear-gradient(to right, var(--color-point), #006396);}
.notice .btnMore_mo{display:none;}
.notice .swiper a{display:block; padding:50rem 40rem; background:#fff; border-radius:10rem; border:3rem solid #fff; transition:.3s ease;}
.notice .swiper a span{display:flex; align-items:center; justify-content:center; width:55rem; height:26rem; font-size:var(--fs16); font-weight:600; line-height:1; color:#fff; border-radius:5rem; background:var(--color-point);}
.notice .swiper a span.general{color:rgba(255,255,255,.8); background:#333;}
.notice .swiper a h3{margin:25rem 0 45rem; font-size:var(--fs22); font-weight:600; line-height:1.5; 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; height:65rem;}
.notice .swiper a h3.new em{display:inline-block; font-weight:900; color:var(--color-point);}
.notice .swiper a p{font-size:var(--fs16); line-height:1; color:#666; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.notice .swiper a i{display:block; margin-top:65rem; font-size:var(--fs14); line-height:1; color:#aaa; text-align:end;}
.notice .swiper-pagination{display:none; align-items:center; justify-content:center; gap:10rem; position:relative; top:auto; bottom:auto; left:auto; right:auto; margin-top:30rem;}
.notice .swiper-pagination-bullet{margin:0 !important;}
.notice .swiper-pagination-bullet-active{background:var(--color-point);}
    /* login banner */
.log{position:relative; padding-left:100rem; width:100%; height:460rem; background:var(--color-point); border-radius:30rem; overflow:hidden;}
.log em{display:block; margin-top:80rem; font-size:var(--fs50); font-weight:600; line-height:1.4; color:#fff;}
.log em b{font-weight:800;}
.log a{display:flex; align-items:center; justify-content:center; gap:15rem; position:relative; margin-top:60rem; width:220rem; height:75rem; font-size:var(--fs20); font-weight:bold; line-height:1; color:var(--color-point); border-radius:38rem; background:#fff;}
.log a i{display:block; margin-top:2rem; font-size:var(--fs24);}
.log img{display:block; position:absolute; right:0; top:0; height:100%;}
.log img.mo{display:none;}
@media(hover:hover){
    .notice .swiper a:hover{border-color:var(--color-point);}
}
@media(max-width:1650px){
    .log{padding-left:80rem;}
    .log img{left:520rem; right:auto;}
}
@media(max-width:1400px){
    .cs:before{height:calc(100% - (var(--p150) + 200rem));}
    .log{height:400rem;}
    .log em{margin-top:70rem;}
    .log a{margin-top:35rem;}
}
@media(max-width:1024px){
    .notice .top h2{font-size:var(--fs40);}
    .notice .top h2 em{margin-bottom:25rem;}
    .notice .top{margin-bottom:60rem;}
    .notice .top .btn{gap:40rem; margin-bottom:-10rem;}
    .notice .btnMore{width:180rem; height:60rem;}
    .notice .swiper a{padding:35rem 20rem;}
    .notice .swiper a h3{margin:20rem 0 30rem; font-size:var(--fs20);}
    .notice .swiper a i{margin-top:50rem;}
    .log{padding-left:50rem; height:320rem;}
    .log em{margin-top:50rem; font-size:var(--fs40);}
    .log a{margin-top:35rem; width:200rem; height:65rem;}
    .log img{left:370rem;}
}
@media(max-width:768px){
    .notice .top{margin-bottom:40rem;}
    .notice .top h2 em{margin-bottom:15rem;}
    .notice .top .btn{display:none;}
    .notice .swiper a h3{height:48rem;}
    .notice .swiper-pagination{display:flex;}
    .notice .btnMore_mo{display:flex; margin:35rem auto 0; width:170rem; height:50rem;}
    .log{padding-left:30rem; height:260rem; border-radius:15rem;}
    .log em{margin-top:40rem;}
    .log a{margin-top:30rem; width:160rem; height:50rem;}
    .log img{left:265rem;}
}
@media(max-width:480px){
    .notice .top{margin-bottom:35rem;}
    .notice .swiper{overflow:visible;}
    .notice .swiper a{padding:25rem 15rem;}
    .notice .swiper a span{width:45rem; height:23rem; font-size:13rem;}
    .notice .swiper a h3{margin:15rem 0 25rem;}
    .notice .swiper a i{margin-top:40rem;}
    .notice .swiper-pagination{margin-top:20rem;}
    .notice .btnMore_mo{margin-top:30rem;}
    .log{height:450rem;}
    .log a{margin-top:20rem; z-index:1;}
    .log img.pc{display:none;}
    .log img.mo{display:block; left:0; top:auto; bottom:0; width:105%; height:auto;}
}