@charset "UTF-8";
/*===========================================
General Info / General Information
===========================================*/

/*-------------------------------------------
General Information
-------------------------------------------*/
.about{
    background-color:#fff;
}
    .about__intro{
        position:relative;
    }
        .about__intro figure{
            width:40%;
            float:right;
            margin:0 0 20px 5%;
        }
            .about__intro figure img{
                display:block;
                width:100%;
            }
            .about__intro figure figcaption{
                font-size:.75rem;
                margin-top:5px;
            }
                .about__intro figure figcaption a{
                    color:#111;
                }
        .about__intro p{
            flex:1;
            line-height:1.75;
            margin-top:0;
            align-self:center;
        }
        .about__intro::after{
            content:"";
            clear:both;
            display:block;
        }
        .electricity__img{
            display:flex;
            float:right;
            margin-left:5%;
        }
            .electricity__img img{
                width:260px;
            }
.useful__websites{
    background-color:#fff;
    margin-top:50px;
}
    .web__list{
        --web-padding:20px;
        --web-col-width:25%;
        list-style:none;
        margin:calc(0px - var(--web-padding)) calc(0px - var(--web-padding)) 0;
        padding:0;
        display:flex;
        flex-wrap:wrap;
    }
        .web__list > li{
            width:var(--web-col-width);
            position:relative;
            padding:var(--web-padding);
        }
            .web__list a{
                display:block;
                border:1px solid #ddd;
                border-radius:5px;
                color:#333;
                font-weight:700;
                line-height:1.2;
                height:100%;
                position:relative;
                padding:15px;
                text-align:center;
                transition:.2s;
            }
            .web__list a:focus,
            .web__list a:hover{
                border-color:var(--link-color);
                color:var(--link-color);
            }
                .web__logo{
                    display:block;
                    position:relative;
                    width:100%;
                    height:0px;
                    padding-top:28%;
                    margin:0 auto 10px;
                }
                .web__logo.tourismBureau{
                    width:85%;
                }
                .web__logo.weatherBureau{
                    width:40%;
                }
                .web__logo.taipeiWifi{
                    width:80%;
                }
                .web__logo.taiwanRailway{
                    width:34%;
                }
                .web__logo.metroTaoyuan{
                    width:36%;
                }
                .web__logo.metroTaipei{
                    width:45%;
                }
                .web__logo.taipeiBus{
                    width:70%;
                }
                    .web__logo img{
                        display:block;
                        object-fit:contain;
                        position:absolute; top:0; left:0;
                        width:100%;
                        height:100%;
                    }
@media screen and (max-width:1280px){/* Air Mac */
    .web__list{
        --web-padding:15px;
    }
}
@media screen and (max-width:1180px){/* iPad Air Landscape */
    .web__list{
        --web-col-width:33.3333%;
    }
}
@media screen and (max-width:1024px){
    .electricity__img img{
        width:200px;
    }
    .web__list{
        --web-padding:10px;
    }
}
@media screen and (max-width:768px){
    .about__intro figure{
        width:45%;
    }
    .electricity__img{
        float:none;
        display:flex;
        justify-content:space-around;
        margin:0 auto;
        text-align:center;
    }
        .electricity__img img{
            width:100%;
        }
    .web__list{
        --web-col-width:50%;
    }
}
@media screen and (max-width:576px){
    .about__intro figure{
        width:100%;
        float:none;
        margin-left:0;
    }
    .useful__websites{
        margin:50px -15px 0;
        padding:30px 15px;
    }
        .web__list{
            --web-padding:10px;
            --web-col-width:100%;
        }
            .web__logo{
                width:85%;
            }
}
@media screen and (max-width:440px){/* i16 Pro Max */
    .web__list{
        --web-padding:5px;
    }
        .web__list a{
            
        }
            .web__logo.weatherBureau{
                width:35%;
            }
            .web__logo.taipeiWifi{
                width:65%;
            }
            .web__logo.taoyuanAirport{
                width:58%;
            }
            .web__logo.taiwanRailway{
                width:25%;
            }
            .web__logo.metroTaoyuan{
                width:30%;
            }
            .web__logo.metroTaipei{
                width:38%;
            }
            .web__logo.taipeiBus{
                width:55%;
            }
}
@media screen and (max-width:320px){/* i5, SE */
    .useful__websites{
        margin:0 -10px;
    }
}