/* popup button */
.modalsBtn{
    max-width: 1600px;
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    top: 85%;
    left: 50%;
    transform: translateX(-50%);
    max-height: 12vh;
    z-index: 999;
    width: 100%;
}

.modalsBtn button{
    width: calc(100% /6);
    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(../images/mainbtn_1.png) no-repeat 50% 0;
    background-size: contain;
}

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

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

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

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

.modalsBtn button:nth-child(6){
    background: url(../images/mainbtn_6.png) no-repeat 50% 0;
    background-size: contain;
}

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

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

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

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

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

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

/* bootstrap popup 調整 */
.modal.fade{
  background: url(../images/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: 100%;
    margin: 30px auto;
    border-collapse: collapse;
}

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

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

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

.modal-body .txtstyle1{
    color: #fd2626;
}

.modal-body .txtstyle2{
    color: #15df1b;
    font-size: 2.6rem;
}

.modal-body .txtstyle3{
    color: #edd10b;
    font-size: 2.6rem;
}

.modal-body .smallsign{
    font-size: 1.8rem;
    text-align: left;
    font-style:italic;
    color:#ffe0d6;
}

.modal-body .box{
    display:flex;
    justify-content: space-between;
    font-size: 2rem;
    color: #ff9f54;
    margin: 20px 0 0 0;
}

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

@media (max-width: 1440px){

    .title {
        top: 19%;
    }

    
}

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

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

@media (max-width: 425px) {

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

    .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: 540px) {

    .modalsBtn button {
        max-height: 9vh;
    }

}


@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%;
    }

}