* {
    margin: 0;
    padding: 0;
}

body {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
    background-image: url(/video/camera.png);
}

.camera {
    position: absolute;
    display: flex;
    width: 255px;
    height: 156px;
    vertical-align: end;
    animation-duration: 2s;
}

.border_set {
    border-radius: 4px;
    border: 4px solid #6A635A;
}

.border_set_cir {
    border-radius: 50%;
    border: 4px solid #6A635A;
}

.borderclass_re {
    border: 7px solid #6A635A;
    border-radius: 10px;
}


.borderclass_li {
    border: 7px solid #6A635A;
    border-radius: 2px;
}

.borderclass_cir {
    border: 7px solid #6A635A;
    border-radius: 50%;
}

.borderclass1 {
    border: 6px solid #6A635A;
}

.camera_btn {
    position: absolute;
    left: 10%;
    width: 0%;
    height: 0%;
}

#glass {
    width: 0px;
    height: 0px;
    position: absolute;
    left: 38%;
    top: 6.8%;
}

/*畫紙大小*/
.body {
    position: absolute;
    bottom: 0%;
    width: 100%;
    height: 90%;
}

.line {

    position: absolute;
    left: 0px;
    top: 27%;
    width: 0%;
    height: 0%;
    border-radius: 2px;
}

.Mvcamera {
    display: flex;
    justify-content: center;
    align-self: flex-end;
    width: 800px;
    height: 156px;
    vertical-align: middle;
}

/*circle 定義*/
.circle {
    position: absolute;
    left: 38%;
    top: 6.8%;
    width: 0%;
    height: 0%;
}

#top {
    height: 0%;
    width: 0%;

}

.btn_line {
    border-left: 10px solid #6A635A;
}



.pointer {
    cursor: pointer;
}

.bottom_pad {
    position: absolute;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-between;
    bottom: 12%;
    height: 27.5%;
    width: 100%;
}


.ncutube_text {
    color: #6A635A;
    height: 86px;
    width: 100%;
    text-align: center;
    font-size: 72px;
}


.menu {
    display: flex;
    height: 500px;
    width: 800px;
    align-self: center;
    background-color: black;

}

.second_pad {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    height: 375px;

}

.first_pad {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    height: 60%;
    width: 100%;
}


.first_bottom {
    position: absolute;
    width: 670px;
    height: 300px;
    display: flex;
    justify-content: center;
}

.img_size {
    width: 0px;
    height: 0px;
}

.real_size {
    width: 115px;
    height: 115px;
}

#l3.real_size {
    width: 90px;
    height: 90px;
}

#r3.real_size {
    width: 100px;
    height: 100px;
}

#l3.bye {
    width: 0px;
    height: 0px;
}

#r3.bye {
    width: 0px;
    height: 0px;
}

#tapheretext {
    position: absolute;
    font-size: 24px;
    top: 20px;
    left: -19px;
    width: 100%;
    height: 40%;
    color: #686890;
}

#tapherebox {
    position: absolute;
    top: 50px;
    left: 52px;
    width: 0px;
    height: 0px;
}

#imgtaphere {
    position: absolute;
    bottom: 0px;
    right: 0px;
    transform: rotate(45deg);
    width: 37%;
    height: 46%;
}

.img_size_back {
    width: 0px;
    height: 0px;
}

.img_size_back3 {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 120px;
    height: 120px;
    pointer-events: none;
}

#bl3.img_size_back3 {
    top: -10px;
    left: -10px;

}

.ncutube_text {
    font-family: 'NSimSun', "SongTiTc", serif;
}

.insideimg {
    width: 100%;
    height: 100%;
}

.img_initposi {
    position: absolute;
    top: 0%;
    left: 0%;
}

.menu_inti_posi {
    position: absolute;
    height: 115px;
    width: 115px;
    top: 180px;
    left: 45%;
}


.bye {
    width: 0px;
    height: 0px;
}


.camera_move {
    display: flex;
    justify-content: center;
    align-self: flex-end;

    width: 100%;
    height: 156px;
    vertical-align: end;
}

.img_l1 {
    top: 50%;
    left: 10%;
}

.img_l2 {
    top: 35%;
    left: 25%;

}

.img_l3 {
    top: 20%;
    left: 40%;
}

.img_r1 {
    top: 50%;
    left: 80%;
}

.img_r2 {
    top: 35%;
    left: 65%;
}

.img_r3 {
    top: 20%;
    left: 50%;
}



.img_back {
    position: absolute;
    height: 75px;
    width: 75px;
    border-radius: 50%;
}

.upline {
    height: 100px;
    width: 100%;
}

.last_line {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: flex-end
}

p.viw {
    text-align: left;
    color: white;
    font-size: 14px;
    background-color: #6A635A;
    font-family: 仿宋體;
    width: 200px;
    height: 25px;
}

p.login_text {
    color: #686890;
    font-size: 20px;
    text-align: center
}

#box1-1 {
    width: 300px;
    height: 85px;

}

#box1-3 {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 100%;
    width: 160px;
}

.big-body {
    width: 100%;
    height: 500px;
    display: flex;
    flex-direction: column;
}

.middle_pad {
    height: 0px;
    width: 100%;
}

.fonttype {
    font-family: myfont;
}

@font-face {
    font-family: myfont;
    src: url('../video/font/GenSenRoundedTW-M-01.ttf'),
        url('../video/font/GenSenRoundedTW-R-01.ttf'),
        url('../video/font/GenSenRoundedTW-B-01.ttf');
}

@media (max-height: 680px) {
    .first_pad {
        height: 70%;
    }

    .bottom_pad {
        bottom: 0%;
    }
}

/* 大螢幕 (e.g.橫躺平板) 922~1200px */
@media (max-width: 1200px) {}

/* 中螢幕 (e.g.直立平板) 768~922px */
@media (max-width: 992px) {}

/* 小螢幕 (e.g.橫躺手機) 577~767px */
@media (max-width: 767px) {}

/* 超小螢幕 (e.g.直立手機), 576px以下 */
@media (max-width: 576px) {

    .bottom_pad {
        width: 100%;
        height: 100%;
    }

    .first_bottom {
        width: 100%;
    }

    .camera_move {
        height: 100%;
        ;

    }

    .camera {
        top: 70%;
    }

    .first_bottom {
        top: 0px;
        height: 50%;
        width: 100%;
    }

    .middle_pad {
        height: 40%;
        width: 100%;
    }

    .first_pad {
        height: 100%;
    }
}