.guide {
    width: 100vw;
    height: 100vh !important;
    background: #000;
}

.guide .guide-content {
    width: 100vw;
    height: 100vh !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.guide .logo_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.guide .logo_title .text {
    font-size: 1.8rem;
    color: #fff;
    letter-spacing: 10px;
    margin-left: 10px;
    margin-top: 5%;
}

.guide .img_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    transform: translateY(-60%) scale(0.9);
    width: 100%;
}
.guide .img_box .img_pos {
    position: relative;
    display: flex;
    justify-content: center;
}

.guide .img_box .img2 {
  animation: reveal 1.5s ease-in forwards; 
}

.guide .img_box .img_pos .img3 {
    position: absolute;
}

.guide .img_box .img_pos .img4 {
    width: 100%;
    height: 100%;
}

@keyframes reveal {  
  0% {  
     -webkit-clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%); 
     -moz-clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%); 
     -ms-clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%); 
     -o-clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);  
     clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);  
  }  
  100% {  
   -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);  
    -moz-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);  
    -ms-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);  
    -o-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);  
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);  
  }  
}
.guide .text_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transform: translateY(90%);
    position: absolute;
}

.guide .text_box .text1 {
    font-size: 1.8rem;
    color: #fff;
    opacity: 0.75;
}

.guide .text_box .text2 > p {
    font-size: 1.4rem;
    color: #fff;
    opacity: 0.75;
    text-align: center;
}

.guide .animate_loop {
    transition: all ease-in-out 0.5s;
    width: 750px;
    height: 750px;
    background: url(../images/index/guide_loop.png) no-repeat;
    animation: guideloop 4.5s step-start infinite;
    position: absolute;
    z-index: 99;
}

.guide .animate_loop_after {
    width: 750px;
    height: 750px;
    background: url(../images/index/guide_loop_after.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    z-index: 99;
}

.guide .img5 {
    width: 42rem;
    height: 42rem;
    position: absolute;
    z-index: 98;
    background: url(../images/index/guide4.png) no-repeat;
    background-size: 100% 100%;
}

.guide .img_button {
  position: absolute;
  left: calc(50% - 22px);
  transform: translateX(-50%) scale(1) ;
  bottom: 6rem;
  z-index: 100000;
  cursor: pointer;
}

@media screen and (min-width: 0px) and (max-width: 400px) {
    .guide .img5 {
        background: url(../images/index/guide4_phone.png) no-repeat;
        background-size: 100% 100%;
    }

    .guide-content {
        transform: scale(0.58);
    }
    .guide .img_button {
        display: none !important;
    }
}

@media screen and (min-width: 400px) and (max-width: 700px) {

    .guide .img5 {
        background: url(../images/index/guide4_phone.png) no-repeat;
        background-size: 100% 100%;
    }

    .guide-content {
        transform: scale(0.7);
    }

    .guide .img_button {
        display: none !important;
    }
}

@media screen and (min-width: 700px) and (max-width: 1800px) {

    .guide-content {
        transform: scale(0.8);
    }

}

@keyframes guideloop {

    0% {
        background-position: -1500px 0px;
    }

    5% {
        background-position: -2250px 0px;
    }

    10% {
        background-position: -3000px 0px;
    }

    15% {
        background-position: -3750px 0px;
    }

    20% {
        background-position: -4500px 0px;
    }

    25% {
        background-position: -5250px 0px;
    }

    30% {
        background-position: -6000px 0px;
    }

    35% {
        background-position: -6750px 0px;
    }

    40% {
        background-position: -7500px 0px;
    }

    45% {
        background-position: -8250px 0px;
    }

    50% {
        background-position: -9000px 0px;
    }

    55% {
        background-position: -9750px 0px;
    }

    60% {
        background-position: -10500px 0px;
    }

    70% {
        background-position: -11250px 0px;
    }

    75% {
        background-position: -12000px 0px;
    }

    80% {
        background-position: -12750px 0px;
    }

    85% {
        background-position: -13500px 0px;
    }

    91% {
        background-position: -14250px 0px;
    }

    94% {
        background-position: -15000px 0px;
    }

    97% {
        background-position: -15750px 0px;
    }

    100% {
        background-position: -16500px 0px;
    }
}