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

.modalsBtn button{
    width: calc(100% /5);
    height: 123px;
    border: none;
    max-height: 12vh;
}

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

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

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

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

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

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

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

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

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

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

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

/* bootstrap popup 調整 */
.modal.fade{
  background: url(../image/bajilao_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: #ff9f54;
    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, th { 
    text-align: center; 
    border: 1px solid #dd6c48;
    padding: 8px;
}

.modal-body td { 
    text-align: center; 
    border: 1px dashed #dd6c48;
    padding: 8px;
}

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

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

@media (max-width: 1440px){

    .title {
        top: 19%;
    }

    .modalsBtn {
        top: 19%;
    }
}

@media (max-width: 1024px){
    .modalsBtn button {
        width: 200px;
        height: 90px;
    }
    .modalsBtn {
        top: 17%;
    }
}

@media (max-width: 768px) {
    .modalsBtn {
        justify-content:space-evenly;
       
    }
}

@media (max-width: 425px) {

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

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

    
}

@media (max-width: 480px) {

    .title .titleBox {
        height: auto;
        max-height : 32vh
    }

}

@media (max-width: 411px) {

    .gsCTA {
        transform: translate(-13px,-100%);
        }

}


@media (max-width: 480px) {

    .title {
        top: 16%;
    }

    .modalsBtn button {
        width: 140px;
        max-height: 8vh;
    }

    .navbar-brand>img {
        width: 30vw;
    }


}

@media (max-width: 320px) {

    .modalsBtn {
        justify-content: space-evenly;
    }

    .title {
        top: 2%;
    }

}