@charset "utf-8";

.onlineClass-intro{--division-width:450rem; --division-height:180rem; display:flex; position:relative; height:100vh;
    *{box-sizing:border-box; word-break:keep-all;}
    
    .class{position:relative; width:50%; height:100%; overflow:hidden;
        &:before{content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:#000; transition:.5s ease;}
        &.class1:before{background:url('/images/onlineClass-intro/class1_bg.jpg')no-repeat center/cover;}
        &.class2:before{background:url('/images/onlineClass-intro/class2_bg.jpg')no-repeat center/cover;}
        &.class2 a{justify-content:flex-end; align-items:flex-end;}
        a{display:flex; position:relative; width:100%; height:100%;}
        span{display:flex; align-items:center; justify-content:center; width:calc(100% - (var(--division-width) / 2)); height:100%; text-align:center;}
        h2{position:relative; font-size:var(--fs50); font-weight:800; line-height:1; color:#fff; z-index:10;}
        h2:before{content:''; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0); transform-origin:center; width:200rem; aspect-ratio:1/1; border-radius:50%; background:var(--color-point); opacity:1; transition:.5s ease; z-index:-1;}
        img{display:block; margin:0 auto -20rem; width:20rem; opacity:0; transition:.5s ease;}
        @media(min-width:861px){
            @media(hover:hover){
                &:hover&:before{transform:scale(1.1);}
                &:hover img{opacity:1; margin-bottom:35rem;}
                &:hover h2:before{transform:translate(-50%,-50%) scale(1); opacity:.5;}
            }
        }
    }
    
    .division{display:flex; align-items:center; justify-content:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:100%; pointer-events:none;
        &:before,&:after{content:''; display:block; position:absolute; left:0; width:50%; height:calc(50% - (var(--division-height) / 2)); border-right:1px solid #fff; opacity:.5;}
        &:before{top:0;}
        &:after{bottom:0;}
        span{display:flex; align-items:center; justify-content:center; width:var(--division-width); height:var(--division-height); border-radius:calc(var(--division-height) / 2); border:1px solid rgba(255,255,255,.5); backdrop-filter:blur(15px); pointer-events:auto;}
        img{display:block; height:40rem;}
    }
    
    @media(max-width:1024px){
        &{--division-width:320rem; --division-height:100rem;}
        .class{
            h2{font-size:var(--fs40);}
            h2:before{width:160rem;}
            img{width:18rem;}
            @media(min-width:861px){
                @media(hover:hover){
                    &:hover img{opacity:1; margin-bottom:25rem;}
                }
            }
        }
        .division{
            img{height:30rem;}
        }
    }
    
    @media(max-width:860px){
        &{flex-direction:column;}
        .class{width:100%; height:50%;
            span{width:100%; height:calc(100% - (var(--division-height) / 2));}
            img{opacity:1; margin-bottom:20rem; width:16rem}
        }
        .division{height:auto; width:100%;
            &:before,&:after{width:calc(50% - (var(--division-width) / 2)); height:50%; border-bottom:1px solid #fff; border-right:0;}
            &:before{top:0;}
            &:after{bottom:auto; top:0; right:0; left:auto;}
        }
    }
    
    @media(max-width:540px){
        &{--division-width:280rem; --division-height:74rem;}
        .division{
            img{height:26rem;}
        }
    }

}