@charset "utf-8";

.mo{
    display:none;
}
.loader{
	background-color: #B9FF98;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	opacity:0;
	z-index: 99;
	transform:translateY(-100%);
	-webkit-animation:loader 1.2s cubic-bezier(0.5, 0.6, 0.2, 1);
	-moz-animation:loader 1.2s cubic-bezier(0.5, 0.6, 0.2, 1);
	animation:loader 1.2s cubic-bezier(0.5, 0.6, 0.2, 1);
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
    animation-delay:0.1s;
    display:flex;
    justify-content: center;
    align-items: center;
}

@keyframes loader {
	0% {
		opacity:1;
		transform:translateY(0%);
	}
    60%{
        opacity:1;
        transform:translateY(0%);
        }
	100% {
		opacity:1;
		transform:translateY(-100%);
        display:none;
	}
}


.main{
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;
    padding:0;
    margin-bottom:10rem;
}

.main .bg{
    background: url(../img/main/mainBg.png) center center no-repeat;
    background-size:cover;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
}

.main .content-wrap{
    display:flex;
    align-items: center;
    justify-content: center;
    width:100%;
    height:100%;
    flex-direction: column;
    z-index:1;

}

.main .content-wrap img{
    margin-bottom:4rem;
    animation: reveal 1s;
    animation-fill-mode: forwards;
    display:none;
}

@keyframes reveal {
    0% {
        transform: scale(0);
    }
    50%{
        transform: scale(2);
    }
    100% {
        transform: scale(1);
    }
}

.main .txt{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:1rem;
    opacity:0;
}

.animate > div{
  /* width: 100%; */
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
  transform: translateY(-50px);
  animation: titleAnimation 1s ease;
  animation-fill-mode: forwards;
}

@keyframes titleAnimation {
    0% {
      transform: translateY(-50px);
      opacity: 0;
      -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
      clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 80%);
    }
    100% {
      transform: translateY(0);
      opacity: 1;
      -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0%);
      clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0%);
    }
}

.txt .txtBox01 {
    /* opacity: 0; */
    display:flex;
    animation-delay:1.2s;
}

.txt .txtBox01 .money{
    animation: openclose01 0.5s ease-in-out;
    animation-delay:1.6s;
    margin-right:0.5rem;
    animation-fill-mode: forwards;
    width:0;
}

@keyframes openclose01 {
    0% {
      width: 0;
    }
    5% {
        width: 0;
      }
    100% {
      width: 96px;
      padding-right:0.5rem;
    }
    
  }

.txt .txtBox02{
    opacity: 0;
    animation-delay:2s;
    display: flex;
}

.txt .txtBox03 {
    opacity: 0;
    animation-delay: 3s;
    display:flex;
}

.main .content-wrap .txt div{
    font-size: 6rem;
    font-family:"Black Han Sans","Pretendard",Sans-serif;
    height:110px
}

.main .txt ul{
    display:flex;
    align-items: center;
    font-size:6rem;
    background-color: var(--primary);
    overflow: hidden;
    padding-left:0.5rem;
    width:0;
    height:104px;
}

.main .txt ul li{
    height:104px;
}


.main .txt .txtBox02 ul{
    animation: openclose 0.8s ease-in-out;
    animation-delay:2.3s;
    animation-fill-mode: forwards;
    background-color:transparent;
    color: var(--black500);
    text-shadow:4px 4px var(--primary);
}


.main .txt .txtBox02 ul li{
    animation-name: wiggleWiggle;
    animation-duration: 1.25s;
    animation-direction: alternate;
    animation-timing-function: steps(2, end);
    animation-iteration-count: infinite;
    height:113px;
}

.N {
    animation-delay: 2s;
  }
  
.T {
    animation-delay: 2.1s;
  }
  
.G {
    animation-delay: 2.15s;
  }
  
.L {
    animation-delay: 2.2s;
  }


@keyframes wiggleWiggle {
    20%,
    100% {
      transform: translate(0, 6px);
    }
  
    0% {
      transform: translate(0, 0px);
    }
    10% {
      transform: translate(0, 6px);
    }
  }


.main .txt .txtBox03 ul{
    animation: openclose 0.8s ease-in-out;
    animation-delay:3.3s;
    animation-fill-mode: forwards;
}

@keyframes openclose {
0% {
    width: 0;
}
5% {
    width: 0;
}
100% {
    width: 334px;
    padding-right:0.5rem;
}

}


section { 
    width: 100%;
    position: relative; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    overflow:hidden;
}


section .container{
    display:flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom:10rem;
}

section .left-section div h1{
    font-size: 5rem;
    line-height:1.3;
}

section .left-section .green{
    color:var(--secondary);
    position:relative;
    display:inline-block;
    font-weight:800;
    font-size:5.25rem;
}

.section01 .left-section img{
    width:290px;
    margin-bottom:3rem;
}

.section01 .right-section p{
    font-size:2rem;
    font-weight:600;
    margin-bottom:3rem;
    line-height:1.5;
    margin-left:8px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.20);
}

.section01-slide {
    width: 850px;
    height: 100%;
    margin-bottom:3rem;
    position: relative;
}

.section01 .section01-slide .swiper-slide img{
    width:100%;
    object-fit: cover;
}

.section01 .section01-slide .swiper-slide p{
    position:absolute;
    top:56px;
    left:64px;
    font-weight:600;
    color:#fff;
    line-height:1.5;
}

.section01 .right-section .light{
    font-weight:300;
}

.section02 button{
    margin-top:3.75rem;
}

.section02 .right-section{
    width:56%;
}

.section02 .right-section .sec02-boxWrap{
    width: 100%;
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    max-width:100%;
}

.section02 .right-section .sec02-box{
    width:calc( 100% / 3 - 1rem);
    height: 320px;
    position:relative;
    overflow: hidden;
    border-radius:10px;
}

.section02 .right-section .sec02-box img{
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    object-fit: cover;
    transition: all .3s ease;
}

.section02 .right-section .sec02-box h3{
    position:absolute;
    top:1.5rem;
    left:1.5rem;
    z-index:33;
    font-size:1.5rem;
    color:#fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.section02 .right-section .sec02-box .back{
    width:100%;
    height:100%;
    position:absolute;
    bottom:-100%;
    background-color: rgba(0,0,0,0.5);
    z-index:3;
    display:flex;
    align-items: flex-end;
    border-radius:10px;
    transition: all .3s ease;
}

.section02 .right-section .sec02-box .back p{
    font-size:0.875rem;
    color:#fff;
    padding: 1rem;
    letter-spacing:0;
    line-height:1.5;
}

.section02 .right-section .sec02-box:hover .back{
    bottom:0;
}

.section02 .right-section .sec02-box:hover img{
    transform: scale(1.04);
}

.section03{
    background: #F9FFE8;
    height:440px;
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    margin-bottom:10rem;
    overflow: hidden;
    position: relative;
}

.section03 > img{
    position: absolute;
}

.section03 .left01{
    top:-80px;
    left:180px;
    max-width:170px;
}

.section03 .left02{
    top:40px;
    left:380px;
    max-width:170px;
}

.section03 .left03{
    bottom:-80px;
    left:-120px;
    max-width:760px;
}

.section03 .right01{
    bottom:-64px;
    right:-40px;
    max-width:420px;
}

.section03 .right02{
    top:-32px;
    right:300px;
    max-width:140px;
}

.section03 .right03{
    bottom: -80px;
    right:400px;
    max-width:220px;
}


.section03 div > img{
    max-width: 560px;
}


.section04 .container{
    justify-content: flex-start;
    gap:2rem 7rem;
}

.section04 .left-section img{
    max-width:850px;
}

.section04 .right-section p{
    font-size:1.875rem;
    font-weight:400;
    color:var(--gray500);
    line-height:1.5;
}

.section04 .right-section .title{
    font-weight:700;
    font-size:2.25rem;
    margin-bottom:2rem;
}

.section04 .right-section > p span{
    font-weight:600;
}

.section04 .right-section .btn-wrap{
    margin-top:3.75rem;
    display: flex;
    gap:0.5rem;
}

.section04 .right-section .btn-wrap button:hover a{
    color: var(--black500);
}

.line{
    width:100%;
    height:30px;
    background: var(--gray50);
}

.video-wrap{
    padding-top:10rem;
}

.video-wrap h4{
    font-size: 2.25rem;
    margin-bottom:5rem;
}

.video-wrap .container{
    flex-direction: column;
}

.video-wrap .container2{
    flex-direction: column;
    width:100%;
    display: flex;
    justify-content: space-between;
    gap:2rem 1rem;
}

.video-wrap .youtube-wrap{
    width:100%;
    display: flex;
    justify-content: space-between;
    gap:2rem 1rem;
}

.video-wrap .youtube-wrap div{
    position: relative;
    padding-bottom: 20%;
    overflow: hidden;
    width:100%;
}

.video-wrap .youtube-wrap iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius:10px;
}

.solution-wrap{
    padding:10rem 0 0;
}

.solution-wrap .container{
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
}

.solution-wrap h4{
    font-size: 2.25rem;
    margin-bottom:5rem;
}

.solution-wrap .solutionBox-wrap{
    width:100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:2rem 1rem;
    margin-bottom:9rem;
}

.solutionBox-wrap .solutionBox{
    width: calc(100% / 3);
    height:180px;
    padding: 2rem;
    border-radius:10px;
    background: var(--gray50);
    border:1px solid var(--gray500);
    display: flex;
    align-items: center;
    gap:1rem 3rem;
}

.solutionBox .txt-wrap .title{
    font-size:1.5rem;
    font-weight:700;
    margin-bottom:1rem;
}

.solutionBox .txt-wrap p{
    font-size:1.125rem;
    letter-spacing:0;
    color: var(--gray400);
    word-break: keep-all;
}

.solution-wrap .btn-wrap{
    display:flex;
    gap:1rem;
}

.solution-wrap .btn-wrap button{
    background-color: transparent;
    border: 1px solid var(--black500);
}

.solution-wrap .btn-wrap button a{
    color: var(--black500);
}





/* ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 반응형 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */

@media (max-width:1560px){

    @keyframes openclose01 {
        0% {
          width: 0;
        }
        5% {
            width: 0;
          }
        100% {
          width: 90px;
          padding-right:0.5rem;
        }
        
    }

    @keyframes openclose {
        0% {
            width: 0;
        }
        5% {
            width: 0;
        }
        100% {
            width: 314px;
            padding-right:0.5rem;
        }
        
        }

    .section01 .left-section, .section02 .left-section{
        padding-left:2rem;
    }

    .section03 .left02{
        top:10px;
    }

    .section03 .left03{
        bottom:-130px;
    }

    .section04 .left-section img{
        max-width:720px;
    }
    
    
}

@media (max-width:1400px){

    section .left-section div h1,section .left-section .green{
        font-size:3.5rem;
    }

    .section01-slide {
        width: 800px;
    }

    .section03 .left01{
        left:90px;
    }

    .section03 .left02{
        left:270px;
    }

    .section03 .left03{
        bottom:-160px;
        left:-180px;
    }

    .section03 .right01{
        bottom:-114px;
        right:-80px;
    }

    .section04 .left-section img{
        max-width:100%;
    }

    .section02 .right-section{
        width:64%;
    }

}

@media (max-width:1200px){

    @keyframes openclose01 {
        0% {
          width: 0;
        }
        5% {
            width: 0;
          }
        100% {
          width: 86px;
          padding-right:0.5rem;
        }
        
    }

    @keyframes openclose {
        0% {
            width: 0;
        }
        5% {
            width: 0;
        }
        100% {
            width: 293px;
            padding-right:0.5rem;
        }
        
        }

    .main .content-wrap .txt div{
        height:95px;
    }

    .section01-slide {
        width: 720px;
    }

    .section02 .right-section .sec02-box{
        width: calc(100% / 2 - 1rem);
    }

    .section02 .right-section .sec02-box .back p{
        font-size:1rem;
    }

    .section03 .right01{
        max-width:32%;
        bottom:-104px;
        right:-50px;

    }

    .section03 .left01{
        left:40px;
    }

    .section03 .left02{
        left:250px;
        top:-10px;
    }

    .section03 .left03{
        max-width:70%;
    }

    .section03 .right02{
        top:-42px;
        right:130px;
    }

    .section03 .right03{
        bottom:-60px;
        right:310px;
        max-width:170px;
    }

    .section04 .btn-wrap button{
        min-width:230px;
    }
    
}

@media (max-width:1024px){
    .pc{display:none;}

    .title-section.pc{
        display:flex;
    }

    .mo{display:block;}

    .loader img{
        max-width:80%;
    }

    @keyframes openclose01 {
        0% {
          width: 0;
        }
        5% {
            width: 0;
          }
        100% {
          width: 62px;
          padding-right:0.5rem;
        }
        
    }

    @keyframes openclose {
    0% {
        width: 0;
    }
    5% {
        width: 0;
    }
    100% {
        width: 199px;
        padding-right:0.5rem;
    }
    
    }
    
    .main .content-wrap .txt div{
        font-size:4rem;
        height:65px;
    }

    .main .txt ul{
        font-size:4rem;
    }

    section .container{
        flex-direction: column;
        align-items: baseline;
    }

    .section01 .section01-slide .swiper-slide p{
        top:40px;
        left:48px;
    }

    .section01 .right-section{
        width:100%;
    }

    .section01 .left-section, .section02 .left-section{
        padding-left:0;
        width:100%;
    }

    .section02{
        overflow:auto;
    }

    section .left-section div h1{
        font-size: 3rem;
        margin-bottom:2rem;
    }

    section .left-section .green{
        font-size:3rem;
    }

    .swiper {
        width: 100%;
    }

    .section02 .left-section > div{
        display:flex;
        justify-content: space-between;
    }

    .section02 button{
        margin-top:0;
        height:56px;
        width:100%;
    }


    .section02 .right-section{
        width:100%;
        margin-bottom:2rem;
    }

    .section02 .right-section .sec02-boxWrap{
        flex-wrap:nowrap;
        overflow-y:auto;
    }

    .section02 .right-section .sec02-box{
        min-width:270px;
    }

    .video-wrap{
        padding-top:6rem;
    }

    .video-wrap .youtube-wrap{
        flex-direction: column;
    }

    .video-wrap .youtube-wrap div{
        padding-bottom:55.65%;
    }

    .solution-wrap{
        padding:6rem 0 0;
    }

    .solution-wrap h4{
        margin-bottom:3rem;
    }

    .solution-wrap .container{
        align-items: center;
    }

    .solutionBox-wrap .solutionBox{
        flex-direction:column;
        height:auto;
    }

    .solution-wrap .solutionBox-wrap{
        margin-bottom:4rem;
    }
}

@media (max-width:768px){

    .title-section.pc{
        display:none;
    }

    .wrap{
        padding-top:56px;
    }

    @keyframes openclose01 {
        0% {
          width: 0;
        }
        5% {
            width: 0;
          }
        100% {
          width: 48px;
          padding-right:0.5rem;
        }
        
    }

    @keyframes openclose {
    0% {
        width: 0;
    }
    5% {
        width: 0;
    }
    100% {
        width: 152px;
        padding-right:0.5rem;
    }
    
    }


    .main .txt ul{
        font-size:3rem;
        height:fit-content;
    }

    .main .content-wrap .txt div{
        font-size:3rem;
        height:fit-content;
    }

    .main .txt ul li{
        height:fit-content;
    }

    .main .txt .txtBox02 ul{
        height:43px;
    }

    .main .txt .txtBox02 ul li{
        height:fit-content;
    }

    .section01 .section01-slide .swiper-slide p{
        top:32px;
        left:32px;
        font-size:1.5rem;
    }
    
    .section02 .left-section > div{
        flex-direction: column;
    }
    
    .section03 div > img{
        max-width:400px;
    }

    .section03 .left01{
        left:20px;
    }

    .section03 .left02{
        max-width:150px;
        left:150px;
        top:10px;
    }

    .section03 .left03{
        max-width:100%;
        bottom:-80px;
        left:-210px;
    }

    .section03 .right01{
        bottom:-34px;
    }

    .section03 .right02{
        right:20px;
    }

    .section03 .right03{
        right:80px;
        max-width:130px;
        bottom:-10px;
    }

    .section02 .right-section .sec02-box .back{
        bottom:0;
        background-color: rgba(0,0,0,0.1);

    }

    .solution-wrap .solutionBox-wrap{
        flex-direction: column;
    }

    .solutionBox-wrap .solutionBox{
        width:100%;
        flex-direction: row;
    }

    .solution-wrap .btn-wrap{
        display: flex;
        width:100%;
        gap: 1rem;
        justify-content: center;
    }



    

}

@media (max-width:520px){
    

    .loader{
        width:100vw;
        /* animation: loader 1.5s cubic-bezier(0.5, 0.6, 0.2, 1); */
    }

    .main{
        margin-bottom:6rem;
    }

    .main .content-wrap img{
        width:28px;
        margin-bottom:2rem;
    }

    .main .content-wrap .txt div{
        font-size:2.25rem;
    }

    .main .txt ul{
        font-size:2.25rem;
    }

    .main .txt ul li{
        height:fit-content;
    }

    .main .txt .txtBox02 ul{
        height:35px;
    }

    .main .txt .txtBox02 ul li{
        height:47px;
    }

    @keyframes openclose01 {
        0% {
          width: 0;
        }
        5% {
            width: 0;
          }
        100% {
          width: 39px;
          padding-right:0.5rem;
        }
        
    }

    @keyframes openclose {
    0% {
        width: 0;
    }
    5% {
        width: 0;
    }
    100% {
        width: 118px;
        padding-right:0.5rem;
    }
    
    }

    section .container{
        margin-bottom:6rem;
    }

    section .right-section{
        width:100%;
    }

    section .left-section .green:after{
        height:3px;
    }

    section .left-section div h1{
        font-size: 2rem;
        margin-bottom:1rem;
    }

    section .left-section .green{
        font-size:2rem;
        margin-bottom:0;
    }

    .section01-slide{
        margin-bottom:2rem;
    }

    .swiper {
        width: 100%;
      }

    .section01 .section01-slide .swiper-slide p{
        font-size:1rem;
        top:24px;
        left:24px;
    }

    .section03{
        margin-bottom:6rem;
    }

    .section03 .left01{
        left:-30px;
        top:-60px;
        max-width:140px;
    }

    .section03 .left02{
        max-width:140px;
        left:90px;
        top:30px;
    }

    .section03 .left03{
        max-width:90%;
        bottom:-30px;
        left:-170px;
    }

    .section03 .right01{
        max-width:42%;
    }

    .section03 .right02{
        top:-22px;
        right:0;
        max-width:110px;
    }

    .section03 .right03{
        bottom:20px;
    }

    .section03 div > img{
        max-width:300px;
    }
    

    .section04 .right-section .title{
        font-size:1.5rem;
        margin-bottom:1rem;
    }

    .section04 .right-section p{
        font-size:1.25rem;
    }

    .solutionBox-wrap .solutionBox{
        padding:24px;
    }

    .section04 .right-section .btn-wrap{
        margin-top:2rem;
    }

    .section04 .btn-wrap button,section .btn-wrap button{
        min-width:auto;
        width:100%;
        padding:16px;
    }

    button{
        font-size:1rem;
    }

}