@charset "UTF-8";

.wrap {background-color: var(--light-gray);}

.main-content>section {margin-bottom: 30px;}
.main-content .visual, 
.main-content .visual2 {height: 760px; background: linear-gradient(rgba(23, 106, 227, 0.10), rgba(23, 106, 227, 0.10)), linear-gradient(#fff, #fff);}
.main-content .visual .inner, 
.main-content .visual .slogan-area {height: 100%;}
.main-content .visual .slogan-area {
    padding: 83px 5px 0; 
    background-image: url(../img/main/visual1@2x.png); background-repeat: no-repeat; 
    background-size: clamp(0px, 52.08333333333vw, 1000px) clamp(0px, 34.16666666667vw, 656px); 
    background-position: clamp(0px, calc(100% + 3.02083333333vw), calc(100% + 58px)) calc(100% + 5px);
}
.visual .slogan-tit {color: var(--dark); font-family: "Danjunghae", sans-serif; font-size: 6rem; font-weight: 400; line-height: 140%; letter-spacing: var(--ls-title-ko); white-space: pre-line;}
.visual .slogan-tit .tint {color: var(--highlight);}
.visual .slogan-tit + .slogan-txt, 
.visual2 .slogan-tit + .slogan-txt {margin-top: 16px;}
.visual .slogan-txt {color: var(--dark); font-family: "Maru Buri", serif; font-size: 2rem; font-weight: 600; line-height: 140%; letter-spacing: var(--ls-text-ko); white-space: pre-line;}

.main-content .visual2 {display: -webkit-flex; display: flex; justify-content: center; align-items: stretch;}
.visual2>* {width: 50%;}

.visual2 .left {padding: 0 94px; display: -webkit-flex; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(rgba(23, 106, 227, 0.10), rgba(23, 106, 227, 0.10)), linear-gradient(#fff, #fff);}
.visual2 .slogan-area {margin: 0 auto;}
.visual2 .slogan-tit {color: var(--highlight); font-family: "Danjunghae", sans-serif; font-size: 6rem; font-weight: 400; line-height: 120%; letter-spacing: 0.03em; white-space: pre-line;}
.visual2 .slogan-txt {color: var(--dark); font-family: "Maru Buri", serif; font-size: 2rem; font-weight: 600; line-height: 140%; letter-spacing: var(--ls-text-ko); white-space: pre-line;}

.visual2 .right {padding: 0 3px; background: #fff; display: -webkit-flex; display: flex; justify-content: center; align-items: center; column-gap: 340px;}
.visual2 .right>* {-webkit-flex-shrink: 0; flex-shrink: 0; position: relative;}
.visual2 .right .test::before, 
.visual2 .right .activity::before {content: ''; width: 326px; height: 10.37px; background: var(--highlight); border-radius: 1px; display: block; position: absolute;}

.visual2 .right .test::before {top: 94.29px; left: calc(100% - 12px);}

.visual2 .right .activity::before {bottom: 105.09px; right: calc(100% - 12px);}

.visual2 .right .test::after, 
.visual2 .right .activity::after {content: ''; width: 39.78px; height: 45.66px; background-repeat: no-repeat; background-position: center; background-size: contain; display: block; position: absolute;}

.visual2 .right .test::after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 39.78 45.66'%3E%3Cpath d='M39.28,21.96L1.5.14C.83-.25,0,.23,0,1v43.66c0,.77.83,1.25,1.5.87l37.78-21.83c.67-.38.67-1.35,0-1.73Z' fill='%23176AE3'/%3E%3C/svg%3E"); top: 76.63px; left: calc(100% + 340px - (39.78px - 12px));}

.visual2 .right .activity::after {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 39.78 45.66'%3E%3Cpath d='M.5,21.96L38.28.14c.67-.39,1.5.1,1.5.87v43.66c0,.77-.83,1.25-1.5.87L.5,23.7c-.67-.38-.67-1.35,0-1.73Z' fill='%23176AE3'/%3E%3C/svg%3E%0A"); bottom: 87.51px; right: calc(100% + 340px - (39.78px - 12px));}

.visual2 .right img {width: 280px; height: 280px; object-fit: contain; display: block;}
.visual2 .menu, 
.visual2 .content {color: var(--dark); text-align: center; margin-top: -7px;}
.visual2 .content {position: absolute; white-space: nowrap;}
.visual2 .right .test .content {top: 55px; left: calc(100% - 12px + 326px/2); transform: translateX(-50%);}
.visual2 .right .activity .content {bottom: 62.96px; right: calc(100% - 12px + 326px/2); transform: translateX(50%);}







@media screen and (min-width:1025px) and (max-width:1920px){
    .main-content .visual, 
    .main-content .visual2 {height: 39.58333333333vw;}

    .main-content .visual .slogan-area {padding-top: 4.32291666667vw;}

    .visual .slogan-tit, 
    .visual2 .slogan-tit {font-size: 5vw;}

    .visual .slogan-txt, 
    .visual2 .slogan-txt {font-size: 1.66666666667vw;}

    .visual2 .left {padding: 0 4.89583333333vw;}

    .visual2 .right {column-gap: 17.70833333333vw;}

    .visual2 .right .test::before, 
    .visual2 .right .activity::before {width: 16.97916666667vw; height: 0.54010416667vw;}

    .visual2 .right .test::before {top: 4.9109375vw;}

    .visual2 .right .activity::before {bottom: 5.4734375vw;}
    
    .visual2 .right .test::after, 
    .visual2 .right .activity::after {width: 2.071875vw; height: 2.378125vw;}

    .visual2 .right .test::after {top: 3.99114583333vw; left: calc(100% + 17.70833333333vw - (2.071875vw - 12px));}

    .visual2 .right .activity::after {bottom: 4.5578125vw; right: calc(100% + 17.70833333333vw - (2.071875vw - 12px));}

    .visual2 .right img {width: 14.58333333333vw; height: 14.58333333333vw;}
    .visual2 .menu, 
    .visual2 .content {font-size: 1.04166666667vw;}
    .visual2 .right .test .content {top: 2.86458333333vw; left: calc(100% - 12px + 16.97916666667vw/2);}
    .visual2 .right .activity .content {bottom: 3.27916666667vw; right: calc(100% - 12px + 16.97916666667vw/2);}
}

@media screen and (max-width:1024px){
    .main-content .visual2 {height: auto; flex-direction: column;}
    
    .visual2>* {width: 100%;}
    .visual2 .left {padding: 0 var(--inner-padding-l);}
    .visual2 .slogan-area {margin: 0;}
}

@media screen and (min-width:481px) and (max-width:1024px){
    .main-content .visual {height: 45vw;}
    .main-content .visual .slogan-area {padding: 7vw 0 0;}
    
    .visual .slogan-tit, 
    .visual2 .slogan-tit {font-size: 6vw;}
    
    .visual .slogan-txt, 
    .visual2 .slogan-txt {font-size: 2.1vw;}
    
    .visual2>* {height: 40vw;}

    .visual2 .right {column-gap: 30vw;}
    
    .visual2 .right .test::before, 
    .visual2 .right .activity::before {width: 31vw; height: 0.55vw;}
    
    .visual2 .right .test::before {top: 5vw; left: calc(100% - 1vw);}

    .visual2 .right .activity::before {bottom: 5.5vw; right: calc(100% - 1vw);}
    
    .visual2 .right .test::after, 
    .visual2 .right .activity::after {width: 2.1vw; height: 2.4vw;}
    
    .visual2 .right .test::after {top: calc(5vw - 2.4vw/2 + 0.55vw/2); left: calc(100% + 30vw - (2.1vw - 1vw));}

    .visual2 .right .activity::after {bottom: calc(5.5vw - 2.4vw/2 + 0.55vw/2); right: calc(100% + 30vw - (2.1vw - 1vw));}

    .visual2 .right img {width: 25vw; height: 25vw;}
    .visual2 .right .test .content {top: 3vw; left: calc(100% - 1vw + 31vw/2);}
    .visual2 .right .activity .content {bottom: 2.4vw; right: calc(100% - 1vw + 31vw/2);}
}

@media screen and (min-width:481px) and (max-width:768px){
    .visual2 .menu, 
    .visual2 .content {font-size: 1.9vw;}
}

@media screen and (max-width:480px){
    .main-content .visual {height: 130vw;}
    .main-content .visual .slogan-area {padding: 15vw 0 0; background-size: 100vw auto; background-position-x: center;}
    
    .visual .slogan-tit, 
    .visual2 .slogan-tit {font-size: 12vw; text-align: center;}
    
    .visual .slogan-txt, 
    .visual2 .slogan-txt {font-size: 4vw; text-align: center;}
    
    .visual2>* {height: 60vw;}

    .visual2 .right {column-gap: 24vw;}
    
    .visual2 .right .test::before, 
    .visual2 .right .activity::before {width: 25vw; height: 0.8vw;}
    
    .visual2 .right .test::before {top: 13vw; left: calc(100% - 1vw);}

    .visual2 .right .activity::before {bottom: 14vw; right: calc(100% - 1vw);}
    
    .visual2 .right .test::after, 
    .visual2 .right .activity::after {width: 2.4vw; height: 2.6vw;}
    
    .visual2 .right .test::after {top: calc(13vw - 2.6vw/2 + 0.8vw/2); left: calc(100% + 24vw - (2.4vw - 1vw));}

    .visual2 .right .activity::after {bottom: calc(14vw - 2.6vw/2 + 0.8vw/2); right: calc(100% + 24vw - (2.4vw - 1vw));}

    .visual2 .right img {width: 38vw; height: 38vw;}
    .visual2 .menu, 
    .visual2 .content {font-size: 2.5vw;}
    .visual2 .right .test .content {top: 10vw; left: calc(100% - 1vw + 25vw/2);}
    .visual2 .right .activity .content {bottom: 9vw; right: calc(100% - 1vw + 25vw/2);}
}