img{
    max-width: 100%;
}
.first , .second , .third , .forth{
    padding: 0 0 !important;
    position: relative;
}
.icon{
    flex-wrap: nowrap !important;
    position: absolute;
}
.line:hover , .fb:hover{
    opacity: .4;
    animation: flash 1.5s;
}
@keyframes flash {
    0% {
        opacity: 1;
    }
    100% {
        opacity: .4;
    }
}
@media screen and (min-width: 1921px){
    .back{
        width: 488px;
        height: 540px;
    }
}
@media screen and (min-width: 641px) and (max-width: 1920px){
    .back{
        width: 25vw;
        height: 28vw;
    }
}
@media screen and (min-width: 451px) and (max-width: 640px){
    .back{
        width: 90vw;
        height: 580px;
    }
}
@media screen and (max-width: 450px){
    .back{
        width: 90vw;
        height: 131vw;
    }
}
@media screen and (max-width: 640px){
    .web{
        display: none;
    }
    .icon{
        top: 2%;
        left: 5%;
        width: 17%;
    }
    .line{
        padding-right: 4% !important;
    }
    .fb{
        padding-left: 4% !important;
    }
    .logo{
        position: absolute;
        top: 8%;
        left: 0%;
    }
    .join{
        position: absolute;
        top: 57%;
        left: 15%;
        width: 69%;
    }
    .download{
        position: absolute;
        bottom: 21%;
        width: 70%;
        left: 15%;
    }
    .carousel-indicators{
        margin-bottom: -3rem !important;
    }
    .carousel-indicators button{
        width: 15px !important;
        height: 15px !important;
        border-radius: 100%;
        background-color: red !important;
        margin-right: 10px !important;
        margin-left: 10px !important;
    }
    .carousel-indicators .active{
        background-color: white !important;
    }
    .slide{
        position: absolute !important;
        top: 0;
    }
    .carousel-img{
        width: 75%;
        margin-left: 12.5%;
    }
    .carousel-btn{
        width: 55%;
        margin-left: 22%;
        margin-top: -22%;
        transform: scale(1.2) !important;
        transition: .3s ease-in-out !important;
    }
    .carousel-btn:hover{
        transform: scale(1) !important;
    }
    .back{
        position: absolute ;
        top: 13%;
        left: 5%;
    }
    #fb-root {
        display: none;
    }
    .fb-page{
        width: 100%;
    }
    .fb-page{
        position: absolute !important;
        top: 17%;
        left: 11%;
    }
    .fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
        width: 78vw !important;
        height: 117vw !important;
    }
    .youtube{
        position: absolute;
        left: 10vw;
        top: 32vw;
        width: 80vw;
        height: 105vw;
    }
}
@media screen and (min-width: 641px) {
    .phone{
        display: none;
    }
    .web{
        overflow: hidden;
    }
    .logo{
        position: absolute;
        top: 0%;
        width: 35%;
        left: 33%;
    }
    .qr-code{
        position: absolute;
        top: 15%;
        left: 9%;
        width: 11%;
    }
    .icon{
        top: 2%;
        right: 9%;
        width: 6%;
    }
    .join{
        width: 43%;
        position: absolute;
        top: 48%;
        left: 29%;
    }
    .download{
        position: absolute;
        bottom: 20%;
        left: 37%;
        width: 28%;
    }
    .server{
        position: absolute;
        top: 0;
        left: 11%;
        width: 23%;
    }
    .home{
        position: absolute;
        bottom: 11%;
        left: 15%;
        width: 15%;
    }
    .present{
        position: absolute;
        top: 0;
        right: 11%;
        width: 23%;
    }
    .home , .get{
        transform: scale(1.2) !important;
        transition: .3s ease-in-out !important;
    }
    .home:hover , .get:hover{
        transform: scale(1) !important;
    }
    .get{
        position: absolute;
        bottom: 11%;
        width: 15%;
        right: 15%;
    }
    .intro{
        position: absolute;
        top: 7%;
        left: 6.5%;
        width: 87%;
    }
    .text-1{
        position: absolute;
        left: 28%;
        bottom: 17%;
        width: 45%;
    }
    .text-2{
        margin-left: 4%;
    }
    .people{
        width: 60%;
        position: absolute;
        bottom: -31%;
        left: 0%;
    }
    .people-animate{
        animation: 4s linear 0s alternate slidein;
        animation-iteration-count: 3;
    }
    @keyframes slidein {
        0% {
            bottom: -20%;
        }
        25% {
            bottom: -23%
        }
        50% {
            bottom: -26%
        }
        75% {
            bottom: -29%
        }
        100% {
            bottom: -31%;
        }
    }
    .fb-board{
        position: absolute;
        right: 25%;
        top: 20%;
    }
    #fb-root {
        display: none;
    }
    .fb-page{
        width: 100%;
    }
    .fb-page{
        position: absolute !important;
        left: 5.5%;
        top: 3.5%;
    }
    .fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
        width: 22vw !important;
        height: 26vw !important;
    }
    .youtube{
        position: absolute;
        right: -15vw;
        top: 6vw;
        width: 39vw;
        height: 21vw;
    }
}