@charset "utf-8";

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


/*----------封面底圖----------*/
#slider {
    position: relative;
    background: url('../img/temp/001.png') 50% no-repeat;
    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; }

#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_article > div > h3 { font-size: 20px; font-weight: bold; }
#main-col .city_article > div > p { font-size: 17px; line-height: 1.5; padding: 10px 40px 10px 0; }

#main-col .city_article { text-align: center; }
#main-col .city_article > ul { text-align: left; padding-left: 80px; font-size: 16px; }
#main-col .city_article > ul li { display: flex; list-style: none; padding-bottom: 10px; font-size: 18px; font-weight: bold; }
#main-col .city_article > ul li a { color: #fff; }
#main-col .city_article > ul li a:hover { color: #e21882; }
#main-col .city_article > ul li img { width: 30px; height: 30px; margin-right: 10px; }
#main-col .city_article > ul li div { line-height: 1.4; }

#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; }


@media only screen and (max-width: 768px) {
    #main-col .city_article > ul { padding-left: 0; }

    #main-col .city_guide { display: block; }
    #main-col .city_guide > div { width: 100%; }
    #main-col .city_guide > ul { width: 100%; }
}


/*----------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; }