@media screen and (max-width: 500px){ 
.wrapper{
    width: 100vw;
    max-width: 100%;
    background-image: url(img/sky.png);
    background-position: 0 center;
    min-height: initial;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    height: auto;
    min-height: 100vh;
}
.background{
    position: absolute;
    /* height: 720px; */
    width: 100vw;
    top: 0;
}
.background.ended{
    top: -18.1vw;
}
.earth{
    position: absolute;
    top: 120.8vw;
    transform: scale(1.4);
}
.shadow{
    position: absolute;
    top: 96.6vw;
    transform: scale(1.4);
}
.tree_l{
    position: absolute;
    top: 79.7vw;
    left: -15px;
    width: 30.7vw;
}
.tree_r{
    position: absolute;
    top: 86.9vw;
    right: -15px;
    width: 31.2vw;
}
.cloud_l{
    position: absolute;
    width: 36.2vw;
    top: 48.3vw;
    left: -16.9vw;
}
.cloud_r{
    position: absolute;
    width: 36.2vw;
    top: 48.3vw;
    right: -16.9vw;
}

.header{
    height: 24.2vw;
    border-radius: 0 0 7.2vw 7.2vw;
    box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.45);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 6.7vw;
}
.step{
    text-align: center;
    position: relative;
}
.step_num{
    width: 6.7vw;
    height: 6.7vw;
    border-radius: 50%;
    background-color: #d6d6d6;
    border: solid 1px #626262;
    font-size: 5vw;
    font-weight: bold;
    margin: auto;
    line-height: 6.7vw;
    margin-bottom: 1.2vw;
    position: relative;
}
.done .step_num{
    background-color: #ffce00;
}
.step_text{
    font-size: 4.3vw;
    font-weight: 500;
    color: #333;
}
.step_num:after{
    content: '';
    height: 2px;
    width: 29vw;
    position: absolute;
    top: 3.4vw;
    left: 7vw;
}
.step .step_num:after{
    background-color: #707070;
}
.step.done .step_num:after{
    background-color: #ffce00;
}
.step3 .step_num:after{
    display: none;
}
.title{
    z-index: 2;
    height: 43.5vw;
    display: flex;
    flex-shrink: 1;
    justify-content: center;
}
.title .logo{
    width: 55.6vw;
    position: relative;
    left: 0px;
    top: 1.2vw;
    z-index: 2;
    flex-shrink: 0;
}
.title_text{
    width: 59.4VW;
    position: relative;
    right: 9.7vw;
    top: 7.2vw;
    z-index: 3;
    flex-shrink: 0;
}
.video_area{
    width: 84.5vw;
    height: 47.3vw;
    border: solid 2.42vw #fff;
    border-radius: 2vw;
    margin: auto;
}
.more{
    text-align: center;
    margin-top: 4.83vw;
}
.more a{
    font-size: 6vw;
    text-align: center;
    font-weight: bold;
    color: #fff;
}
.more span{
    text-decoration: underline;
}

.yellowBtn{
    width: 89.4vw;
    height: 19.3vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffce00;
    margin: 4.83vw auto;
    border-radius: 1.44vw;
    font-size: 6vw;
    font-weight: bold;
    box-shadow: 5px 5px 16px 0 rgba(0, 0, 0, 0.22);
}
.finishVideo img{
    margin: 0 1.2vw;
    position: relative;
    /* top: 0.48vw; */
}
.nextStep{
    display: none;
    font-size: 5.3vw;
}
.nextStep.show{
    display: flex;
}
.nextStep span{
    /* color: #ad0d0d; */
    margin-right: 1vw;
    font-size: 5.6vw;
}
.nextStep img{
    margin: 0;
}
.page1{
    /* display: none; */
    position: relative;
}
.page2{
    display: none;
    position: relative;
}
.input_area{
    width: 89.4vw;
    height: 16vw;
    background-color: #fff;
    margin: 9.6vw auto 0;
    border-radius: 1.5vw;
    font-size: 5.3vw;
    box-shadow: 1.2vw 1.2vw 3.8vw 0 rgba(0, 0, 0, 0.22);
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.input_area input{
    border: none;
    width: 68.3vw;
    text-align: center;
}
.discription{
    color: #333;
    font-size: 5vw;
    font-weight: bold;
    line-height: 1.5;
    margin-top: 7.2vw;
    text-align: center;
    position: relative;
}
.fingerprint_area{
    text-align: center;
    position: relative;
    margin: 7.2vw auto;
    width: 43.5vw;
    z-index: 20;
    transition: 1.5s;
}
.scan{
    position: absolute;
    width: 100%;
    height: 100%;
    top: -100%;
    left: 0;
    opacity: 1;
    background-image: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 3%, rgba(255,255,255,0) 100%);
    transition: .5s;
}
.scan.touched{
    top: 5%;
    opacity: 0;
}
.prevent{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.fingerprint_area.clicked{
    width: 96.6vw;
    transform: translateY(-38.6vw)
}
.frame{
    transition: 1s;
    opacity: 1;
}
.fingerprint_area.clicked .frame{
    opacity: 0;
}
.fingerprint{
    position: absolute;
    width: 21.7vw;
    left: 0;
    right: 0;
    margin: auto;
    top: 6vw;
    filter: grayscale(1);
    transition: 1.5s;
}
.fingerprint.clicked{
    filter: grayscale(0);
    width: 48.3vw;
    /* transform: translateY(-180px) */
}
.overlay{
    background-color: #152b2f;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;
    opacity: .95;
}
#animation_container{
    opacity: 0;
    transition: .2s;
}
#animation_container.show{
    opacity: 1;
}
#canvas{
    width: 75% !important;
    height: auto !important;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 26.57vw;
}

.page3{
    /* display: none; */
    opacity: 0;
    z-index: -1;
    transition: .2s;
    position: relative;
    top: -24.2vw;
}
.photo1{
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;
    width: 28.9vw;
    transform: scale(.1);
    top: 118.4vw;
    transition: 1.4s;
    transition-timing-function: linear;
    transition-delay: .2s;
}
.photo1.started{
    transform: scale(1);
    top: 32.6vw;
}
.photo1.ended{
    transform: scale(1);
    top: 27.8vw;
    transition-delay: 0;
    transition: .5s;
}
.photo2{
    position: absolute;
    width: 16.9vw;
    left: 72.5vw;
    top: 120.7vw;
    opacity: 0;
    transition: .5s;
}
.photo2.ended{
    left: 4.8vw;
    top: 53.1vw;
    opacity: 1;
}
.photo3{
    position: absolute;
    width: 16.9vw;
    right: 72.5vw;
    top: 120.7vw;
    opacity: 0;
    transition: .5s;
}
.photo3.ended{
    right: 4.8vw;
    top: 53.1vw;
    opacity: 1;
}
.text_area{
    position: absolute;
    text-align: center;
    font-size: 5.8vw;
    font-weight: bold;
    color: #ffce00;
    top: 60.4vw;
    transition: .5s;
    opacity: 0;
}
.thank{
    margin-top: -7.25vw;
}
.text_area.ended{
    top: 54.3vw;
    opacity: 1;
}
.counting_area{
    position: absolute;
    font-size: 5.55vw;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin: auto;
    right: 0;
    left: 0;
    top: 96.6vw;
    letter-spacing: 1.2px;
    opacity: 0;
    transition: .5s;
}
.counting_area.ended{
    top: 89.4vw;
    opacity: 1;
}
.counting_area p{
    font-size: 3.86vw;
    position: relative;
    display: inline-block;
}
.counting_area p:before{
    content: '';
    display: block;
    height: 1px;
    width: 28.98vw;
    position: absolute;
    background-color: #fff;
    bottom: 0;
    left: -31.4vw;
    z-index: 5;
}
.counting_area p:after{
    content: '';
    display: block;
    height: 1px;
    width: 28.98vw;
    position: absolute;
    background-color: #fff;
    bottom: 0;
    right: -31.4vw;
    z-index: 5;
}
#flip-counter{
    margin: 20px 0;
}
.share_area_N{
    position: absolute;
    width: 100%;
    top: 140vw;
    opacity: 0;
    transition: .5s;
    transition-delay: .8s;
}
.share_area_N.ended{
    opacity: 1;
}
.shareBtn_wrapper{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.share_btn{
    width: 42.3vw;
    height: 19.3vw;
    border-radius: 1.45vw;
    color: #fff;
    font-size: 5.3vw;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 5px 5px 16px 0 rgba(0, 0, 0, 0.22);
}
.share_fb{
    background-color: #1877f2;
}
.share_line{
    background-color: #4cc764;
}
.share_btn img{
    margin-left: 2.4vw;
}


.pioneer .header{
    align-items: flex-start;
    padding-top: 3.6vw;
    box-sizing: border-box;
}
.pioneer .header span{
    font-size: 3.7vw;
    color: #23b91a;
    font-weight: bold;
    font-family: 'poppins';
    position: relative;
    top: -0.7vw;
}
.lpicon{
    position: relative;
    top: 1px;
}
.pioneer .share_area_N{
    display: block;
}
.linepointbtn{
    width: 89.4vw;
    height: 19.3vw;
    margin: auto;
    background-color: #ffce00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5.3vw;
    font-weight: bold;
    border-radius: 1.45vw;
    box-shadow: 5px 5px 16px 0 rgba(0, 0, 0, 0.22);
}
.linepointbtn img.linepoint{
    width: 8.94vw;
}
.linepointbtn img{
    margin: 0 1.2vw;
}
.shareto{
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 5.3vw;
    font-weight: bold;
    margin-top: 4.8vw;
}
.shareto img{
    margin-left: 4.8vw;
    margin-right: -2.4vw;
}
.flip-counter .man{
    margin-left: 2.4vw;
    font-size: 8.7vw;
}

.yellowBox{
    width: 89.4vw;
    height: 39.9vw;
    background-color: rgba(255,206,0,.89 );
    border-radius: 1.9vw;
    font-size: 4.3vw;
    text-align: center;
    font-weight: bold;
    padding: 2.4vw;
    box-sizing: border-box;
    margin: 7.2vw auto 2.4vw;
    box-shadow: 2.4vw 2.4vw 3.8vw 0 rgba(0, 0, 0, 0.39);
}
.reduce_area{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 3.4vw;
    color: #333;
    line-height: 1.43;
    margin-top: 4.8vw;
    font-weight: 400;
}
.reduce{
    width: 31%;
}
.spoon{
    width: 15vw;
    margin-bottom: 1.2vw;
}
.co2{
    width: 14vw;
    margin-bottom: 1.2vw;
}
.trees{
    width: 17.9vw;
    margin-bottom: 1.2vw;
}
.note{
    font-size: 2.4vw;
    color: #b9b9b9;
    width: 89.4vw;
    margin: auto;
    font-weight: 200;
    text-align: justify;
}
.nextStep .linepoint{
    width: 4.8vw;
    margin-right: 1.2vw;
}

.videoStep1{
    font-size: 6.3vw;
    height: 84.5vw;
    padding-top: 36.2vw;
    display: none;
}
.videoStep1 p,.videoStep2 p{
    font-size: 4.83vw;
}
.videoStep1 img{
    width: 11.1vw;
    margin: 3.62vw auto 0;
}
.videoStep2{
    top: 107vw;
    left: 0;
    font-size: 6.3vw;
    height: 120.7vw;
    padding-top: 27.3vw;
    /* pointer-events: none; */
    display: none;
}
.videoStep2 img{
    width: 25.6vw;
    right: 11.6vw;
    margin: 3.62vw auto 0;
}
}