/* popup button */
.modalsBtn {
    max-width: 1400px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 0 auto;
    z-index: 9;
    bottom: -10%;
}

.modalsBtn button {
    width: 295px;
    height: 83px;
    border: none;
    margin: 0 -10px;
}

.modalsBtn button:hover,
.modalsBtn button:focus,
.modalsBtn button:active {
    border: none;
    outline: none;
}

.modalsBtn button:nth-child(1) {
    background: url(../image/julyver_bt1.png) no-repeat 50% 0;
    background-size: cover;
}

.modalsBtn button:nth-child(2) {
    background: url(../image/julyver_bt2.png) no-repeat 50% 0;
    background-size: cover;
}

.modalsBtn button:nth-child(3) {
    background: url(../image/julyver_bt3.png) no-repeat 50% 0;
    background-size: cover;
}

.modalsBtn button:nth-child(4) {
    background: url(../image/julyver_bt4.png) no-repeat 50% 0;
    background-size: cover;
}

.modalsBtn button:nth-child(5) {
    background: url(../image/julyver_bt5.png) no-repeat 50% 0;
    background-size: cover;
}

/* hover */
.modalsBtn button:nth-child(1):hover {
    background: url(../image/julyver_bt11.png) no-repeat 50% 50%;
    background-size: cover;
}

.modalsBtn button:nth-child(2):hover {
    background: url(../image/julyver_bt22.png) no-repeat 50% 50%;
    background-size: cover;
}

.modalsBtn button:nth-child(3):hover {
    background: url(../image/julyver_bt33.png) no-repeat 50% 50%;
    background-size: cover;
}

.modalsBtn button:nth-child(4):hover {
    background: url(../image/julyver_bt44.png) no-repeat 50% 50%;
    background-size: cover;
}

.modalsBtn button:nth-child(5):hover {
    background: url(../image/julyver_bt55.png) no-repeat 50% 50%;
    background-size: cover;
}

/* bootstrap popup 調整 */
#exampleModal1,
#exampleModal2,
#exampleModal3,
#exampleModal4,
#exampleModal5 {
    background: url(../image/julyver_tbbg.jpg) no-repeat 50% 0;
    background-size: cover;
    background-attachment: fixed;
}

.modal-content {
    background: none;
}

/* poptext */
.modal-body {
    text-align: center;
}

.modal-body ul {
    padding-left: 18px;
    /* Modifier Letter Minus Sign */
    list-style-type: "\2212  ";
    text-align: left;
    margin: 0 0 20px 0;
}

.modal-body p {
    font-size: 2rem;
    color: #ffd200;
    margin: 20px 0 0 0;
    text-align: left;
}

.modal-body ul,
.modal-body table {
    font-size: 1.8rem;
}

.modal-body table {
    width: 80%;
    margin: 30px auto;
    border-collapse: collapse;
}

.modal-body table,
td,
th {
    text-align: center;
    border: 1px solid #4e4f51;
    padding: 8px;
}

.modal-body th {
    background: url(../image/julyver_tbg.png) repeat 50% 0;
    font-size: 2rem;
}

@media (max-width: 1440px) {
    .modalsBtn {
        bottom: 24%;
    }

}

@media (max-width: 1024px) {
    .modalsBtn {
        bottom: 0%;
    }

}

@media (max-width: 768px) {
    .modalsBtn {
        bottom: 10%;
    }

}

@media (max-width: 450px) {
    .modalsBtn {
        top: 30%;
    }

    .modalsBtn button {
        width: 190px;
        height: 56px;
    }

    .modal-body table {
        width: 100%;
    }
}

@media (max-width: 400px) {
    .modalsBtn {
        top: 20%;
    }
}