@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?kikvbn');
    src: url('../fonts/icomoon.eot?kikvbn#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?kikvbn') format('truetype'), url('../fonts/icomoon.woff?kikvbn') format('woff'), url('../fonts/icomoon.svg?kikvbn#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

@font-face {
    font-family: 'comforta';
    src: url('../fonts/Comfortaa-Bold-2.ttf'), url('../fonts/Comfortaa-Light-3.ttf'), url('../fonts/Comfortaa-Regular-1.ttf');
}

.choose-cont {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 99;
    font-family: 'comforta';
}

.choose {
    overflow: hidden;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #fff;
}

.choose-top {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: .8rem;
    line-height: .8rem;
    color: #fff;
    background-color: #444;
}

.choose-top h2 {
    font-size: .35rem;
    font-weight: 400;
    text-align: center;
}

.choose-top i {
    position: absolute;
    right: 0;
    top: 0;
    float: right;
    font-family: 'icomoon';
    margin-right: 3vw;
    cursor: pointer;
}

.choose-top i::before {
    content: "\e9be";
    display: inline-block;
    font-family: 'icomoon';
    font-size: 0.5rem;
    color: #fff;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@media (max-width:700px) {
    .choose {
        display: block;
        width: 74vw;
    }
    .choose-left {
        display: block;
        width: 74vw;
        float: left;
        padding: 5vw;
    }
    .cliparea {
        width: 64vw;
        height: 64vw;
    }
    .choose-file {
        display: none!important;
    }
    .label-file {
        float: left;
        width: 31vw;
        height: 7vw;
        border-radius: 2vw;
        text-align: center;
        line-height: 7vw;
        font-size: .2rem;
        margin-top: 3vw;
        border: 1px solid #FA8072;
        color: #FA8072;
        background-color: #fff;
    }
    .clipbtn {
        display: block;
        float: left;
        width: 31vw;
        height: 7vw;
        border-radius: 2vw;
        text-align: center;
        line-height: 7vw;
        font-size: .2rem;
        font-weight: 700;
        margin-top: 3vw;
        margin-left: 2vw;
        color: #fff;
        background-color: #FA8072;
    }
    .choose-right {
        display: block;
        float: right;
        width: 70vw;
        padding: 5vw;
        padding-top: 0;
    }
    .view1 {
        float: left;
        width: 14vw;
        height: 14vw;
        margin-left: 5.5vw;
    }
    .view2 {
        float: left;
        width: 14vw;
        height: 14vw;
        margin-left: 6vw;
        border-radius: 1000px;
    }
    .view3 {
        float: left;
        width: 10vw;
        height: 10vw;
        margin-left: 6vw;
        margin-top: 2vw;
        border-radius: 1000px;
    }
}

@media (min-width:700px) {
    .choose {
        display: block;
        width: 44vw;
    }
    .choose-left {
        display: block;
        width: 29vw;
        float: left;
        padding: 2vw;
        /* background-color: pink; */
    }
    .cliparea {
        width: 25vw;
        height: 25vw;
    }
    .choose-file {
        display: none!important;
    }
    .label-file {
        float: left;
        width: 8vw;
        height: 3vw;
        border-radius: .5vw;
        text-align: center;
        line-height: 3vw;
        font-size: .2rem;
        margin-top: 2vw;
        margin-left: 3vw;
        border: 1px solid #FA8072;
        color: #FA8072;
        background-color: #fff;
    }
    .clipbtn {
        display: block;
        float: left;
        width: 8vw;
        height: 3vw;
        border-radius: .5vw;
        text-align: center;
        line-height: 3vw;
        font-size: .2rem;
        font-weight: 700;
        margin-top: 2vw;
        margin-left: 2vw;
        color: #fff;
        background-color: #FA8072;
    }
    .choose-right {
        display: block;
        float: left;
        width: 14vw;
        padding: 3.5vw;
        /* background-color: lightblue; */
    }
    .view1 {
        float: left;
        width: 8vw;
        height: 8vw;
    }
    .view2 {
        float: left;
        width: 8vw;
        height: 8vw;
        margin-top: 2vw;
        border-radius: 1000px;
    }
    .view3 {
        float: left;
        width: 5vw;
        height: 5vw;
        margin-top: 2vw;
        margin-left: 1.5vw;
        border-radius: 1000px;
    }
}

.view2,
.view3 {
    display: block;
    background-color: rgb(102, 102, 102);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url()
}