@charset "utf-8";

#main-col ul li div.clearfix { background: #fff; }
#Wrapper { margin-bottom: 40px; }
#Wrapper .row { position: relative; }


/*----------封面底圖----------*/
#slider {
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/*#slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.9));
    z-index: 1;
}*/
#slider article {
    position: relative;
    z-index: 2;
    color: #fff;
    text-align: center;
    max-width: 820px;
    padding: 3px;
}
#slider article h1 { font-weight:bold; }
#slider article .description { font-size: 20px; padding: 20px 0; text-align: left; }
#slider article .link { display: flex; justify-content: center; margin-top: 20px; }
#slider article .link div { width: 150px; padding: 12px 20px; font-size: 20px; font-weight: 600; background: #e21882; border-radius: 99px; color: #fff; }

/*@media only screen and (max-width: 768px) {
    #slider { height: 220px; margin-top: -20px; }
    #slider:before { height: 218px; }
}
@media only screen and (max-width: 1199px) and (min-width: 990px) {
    #slider { height: 350px; }
    #slider:before { height: 348px; }
}
@media only screen and (min-width: 1199px) {
    #slider { height: 400px; }
    #slider:before { height: 398px; }
}*/


/*----------城市----------*/
#Wrapper { position: relative; padding: 40px 20px; color: #fff; }

#continent_list { position: sticky; top: 76px; background: #000; padding: 0 12px 10px; z-index: 9; }
#continent_list nav { display: flex; justify-content: space-between; font-size: 20px; }
#continent_list nav a { color: #fff; text-decoration: underline; }

/*.continent_title { padding: 20px 0 0 10px; }*/

.country_list { display: flex; flex-wrap: wrap; }
.country_list .country { flex-basis: 33.3333%; overflow-y: scroll; scrollbar-width: none; max-height: 300px; }
.continent_title h2 { padding-left: 10px; }

.country_list .country  { padding: 10px; }
.country_list .country h3 { color: #b9bfc8; font-size: 16px; font-weight: bold; }
.country_list .country ul { display: flex; flex-wrap: wrap; padding-left: 0; }
.country_list .country ul li { list-style: none; padding-bottom: 10px; font-size: 14px; text-decoration: underline; margin-right: 10px; }
.country_list .country ul li a { color: #fff; }

/*#main-col .breadcrumbs { padding: 0; font-size: 18px; }
#main-col .breadcrumbs li { list-style: none; display: inline-block; padding-right: 5px; }
#main-col .breadcrumbs li:not(:last-child)::after { content: '›'; padding-left: 10px; }
#main-col .breadcrumbs li a { color: #fff; }*/

/*#main-col .city_guide { display: flex; padding: 20px 35px; }
#main-col .city_guide > div { width: 50%; }
#main-col .city_guide > div > h3 { font-size: 20px; font-weight: bold; }
#main-col .city_guide > div > p { font-size: 17px; line-height: 1.5; padding: 10px 40px 10px 0; }*/

/*#main-col .city_guide > ul { width: 50%; padding-left: 80px; font-size: 16px; }
#main-col .city_guide > ul li { list-style: none; padding-bottom: 10px; font-size: 18px; font-weight: bold; }
#main-col .city_guide > ul li a { color: #fff; }
#main-col .city_guide > ul li a:hover { color: #e21882; }
#main-col .city_guide > ul li img { width: 30px; margin-right: 10px; }*/

#main-col .other_city { text-align: center; padding: 20px 0; }
#main-col .other_city h2 { font-size: 20px; font-weight: bold; }
#main-col .other_city > ul { padding: 10px 0 20px; }
#main-col .other_city > ul li { list-style: none; display: inline-block; text-decoration: underline; font-size: 16px; padding: 5px; }
#main-col .other_city > ul li a { color: #fff; }
#main-col .other_city .link { display: flex; justify-content: center; margin-top: 20px; }
#main-col .other_city .link div { width: 150px; padding: 12px 20px; font-size: 20px; font-weight: 600; background: #e21882; border-radius: 99px; color: #fff; }


/*----------footer----------*/
footer { background: #e21882; }
footer .link { display: flex; flex-direction: row; align-items: center; justify-content: center; }
footer .left { margin-right: 20px; }
footer .right { margin-left: 20px; }
footer .right div { margin-bottom: 10px; }
footer .right .web { background: #a71e93; padding: 10px 5px; border-radius: 10px; }
footer img { width: 100px; }