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

.modalsBtn button{
    width: 272px;
    height: 111px;
    border: none;
}

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

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

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

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

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

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

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

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

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

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

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

/* bootstrap popup 調整 */
#exampleModal1,
#exampleModal2,
#exampleModal3,
#exampleModal4,
#exampleModal5{
  background: url(../image/thirdphase_popbg.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: 70%;
    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/thirdphase_tbg.png) repeat 50% 0;
    font-size: 2rem;
    color: #d60000;
}

.nameYellow tr:nth-child(3n-1) td:first-child{
    font-size: 2rem;
    color: #ffd200;
}

@media (max-width: 1024px){
    .modalsBtn button {
        width: 200px;
        height: 80px;
    }
}

@media (max-width: 425px) {

    .modalsBtn button {
        width: 180px;
        height: 70px;
    }

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

@media (max-width: 400px) {

    .modalsBtn{
        top: 40%;
    }

    .modalsBtn button {
        width: 140px;
        height: 60px;
    }
}