html,body,.container{
    width:100%;
    height:100%;
    padding: 0;
    margin: 0;
    /* overflow:hidden; */
}

/* #region Taiwan map */
.container{
    display:-webkit-box;
    display:flex;
    justify-content:space-around;
    background:#000000;
    /* background:-webkit-gradient(linear, left top, right top, from(#414345), to(#232526));
    background:-webkit-linear-gradient(left, #414345, #232526);
    background:linear-gradient(to right, #414345, #232526) */
}

.taiwan-map,.shop-list{
    width:50%;
    height:100%
}
    
#map{
    display:-webkit-box;
    display:flex;
    -webkit-box-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    align-items:center;
    width:100%;
    height:100%;
}

#map svg{
    max-height:100vh
}

#map path{
    fill:transparent;
    /* fill: */
    stroke:#FFF;
    cursor:pointer;
    -webkit-transition:fill .2s ease, stroke .2s ease, -webkit-transform .2s ease;
    transition:fill .2s ease, stroke .2s ease, -webkit-transform .2s ease;
    transition:fill .2s ease, stroke .2s ease, transform .2s ease;
    transition:fill .2s ease, stroke .2s ease, transform .2s ease, -webkit-transform .2s ease
}

#map path:hover,#map path.active{
    fill:rgba(255,202,40,0.5);
    stroke:#FFCA28;
    -webkit-transform:translateY(-5px);
    transform:translateY(-5px)
}
    
h1,h2{position:relative;line-height:2;
    text-align:center;
    font-weight:bold
}

h1{
    font-size:5vw;
    /* color:#FFCA28 */
    color: white
}

h1::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:0;
    width:80%;
    height:2px;background:-webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)), color-stop(30%, rgba(255,255,255,0.8)), color-stop(50%, rgba(255,255,255,0.8)), color-stop(70%, rgba(255,255,255,0.8)), to(rgba(255,255,255,0)));
    background:-webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0) 100%);
    background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 30%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0) 100%);
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%)}h2{font-size:4vw;
    color:rgba(255,255,255,0.8)
}

.shop-list{
    display:-webkit-box;
    display:flex;
    -webkit-box-pack:center;
    justify-content:center;
    -webkit-box-align:center;
    align-items:center;
    align-content:center;
    flex-wrap:wrap
}

.shop-list h1,.shop-list h2{
    width:100%
}
/* #endregion */

/* #region Color bar */
.colorContainer{
    padding-right: 10px;
    /* margin-right: 100px; */
}

.colorChart{
    display: block;
    width: 100px;
}

.colorBar{
    position: relative;
    display: inline-block;
    margin: -5px;
    padding: 0;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 2px solid #000;
}

.text{
    position: relative;
    display: inline-block;
    color: #ffffff;
    margin-left: 10px;
}

.color-1{
    background: #ea0000;
}

.color-2{
    background: #f9331d;
}

.color-3{
    background: #ff593f;
}

.color-4{
    background: #ff7963;
}

.color-5{
    background: #92d2f5;
}

.color-6{
    background: #66a5df;
}

.color-7{
    background: #3c7ac4;
}

.color-8{
    background: #0051a6 ;
}
/* #endregion */

@media screen and (max-width: 480px){
    .container{
        flex-wrap:wrap
    }
    
    .taiwan-map,.shop-list{
        width:100%
    }
    
    .taiwan-map{
        height:50vh
    }
    
    .shop-list{
        height:20vh
    }
    
    h1{
        font-size:8vw
    }
    
    h2{
        font-size:6vw
    }
    .text{
        padding-left: 10px;
        font-size: 15px;
    }

    /* .colorBar{
        width: 15px;
        height: 15px;
    } */

    /* .colorChart{
        width: 10%;
    } */
}