@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700&display=swap");

html,
body {
    position: relative;
}

body {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: rgb(59, 59, 59);
    margin: 0;
    padding: 0;
/*    background-color: #e76533;*/
}

#corner-logo-outline {
    position: absolute;
    /*width:1400px;*/
    margin: 0 auto;
}

#corner-logo {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 450px
}

    #corner-logo img {
        width: 100%;
    }

.swiper {
    width: 100%;
    box-sizing: border-box;
    height: 2200px;
}

.swiper-slide {
    text-align: center;
    font-size: 17px;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

    .swiper-slide.slide1 {
        background-image: url(../Images/slide1_1500_2000.jpg);
        /* background: url(../Images/bg1.jpg);*/
        background-size: cover;
        background-position: top center;
        background-repeat: no-repeat;
    }

    .swiper-slide.slide2 {
        background-image: url(../Images/slide2_1500_2000.jpg);
        /* background: url(../Images/bg1.jpg);*/
        background-size: cover;
        background-position: top center;
        background-repeat: no-repeat;
    }

.slide1 .info-left {
    position: absolute;
    width: 650px;
    height: 600px;
    bottom: 6%;
    /*right: 10%;*/
    left: calc(50% + 650) !important;
    overflow: hidden;
    text-align: center;
}

.slide1 .slogn {
    position: absolute;
    width: 15%;
    top: 8%;
    left: 16%;
}

.slide1 .hyper_text {
    text-align: left;
    color: white;
    text-shadow: 2px 2px 3px rgb(0, 0, 0);
    line-height: 2.2em;
    font-size: 19px;
    font-weight: 300;
    padding: 2.5rem 0 3.5rem 0rem;
    letter-spacing: 2px;
    font-family: "Noto Sans TC", sans-serif;
}

.slide2 .info-right {
    position: absolute;
    width: 650px;
    height: 600px;
    bottom: 6%;
    /*right: 10%;*/
    left: calc(50% + 650) !important;
    overflow: hidden;
    text-align: center;
}

.slide2 .slogn {
    position: absolute;
    width: 15%;
    top: 8%;
    left: 16%;
}

.slide2 .hyper_text {
    text-align: left;
    color: white;
    text-shadow: 2px 2px 3px rgb(0, 0, 0);
    line-height: 2.2em;
    font-size: 19px;
    font-weight: 300;
    padding: 2.5rem 0 3.5rem 0rem;
    letter-spacing: 2px;
    font-family: "Noto Sans TC", sans-serif;
}

#bn-bottom-deco {
    position: relative;
    padding: 0;
    margin: 0;
    z-index: 10;
    margin-top: -75px;
}

    #bn-bottom-deco li {
        float: left;
        background-color: rgb(255, 255, 255);
        padding: 0;
        margin: 0;
        list-style-type: none;
        height: 75px;
    }

    #bn-bottom-deco .left-deco {
        width: 32%;
        border-radius: 0 75px 0 0;
    }

    #bn-bottom-deco .right-deco {
        width: 68%;
        border-radius: 75px 0 0 0;
    }

#m-info {
    display: none;
    position: relative;
}

#clinic-area {
    position: relative;
    min-height: 700px;
    background-color: white;
    background-image: url(../Images/pc-clinic-bg.jpg);
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding-bottom: 100px;
}

#pc-model {
    position: absolute;
    right: 25px;
    bottom: 5px;
}

/* 認證診所 */
#clinic-area h1 {
    text-align: center;
    padding-top: 3.5rem;
    font-size: 39px;
    letter-spacing: 2px;
    font-weight: 700;
    font-family: "Noto Sans TC", sans-serif;
    color: #222222;
}

#clinic-area .hr {
    border-bottom: 2px solid #DCDCE4;
    width: 130px;
    margin-top: 1rem;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 1.8rem;
}

/* 認證診所 - 下方文字 */
#clinic-area .text01 {
    font-weight: 500;
    text-align: center;
    font-family: "Noto Sans TC", sans-serif;
    font-size: 22px;
    color: #333333;
    margin: 1rem auto 2rem auto;
}

/* 認證診所 - 表單 */
#clinic-area .formArea {
    text-align: center;
    font-size: 125%;
    margin: 2.5rem auto 2rem auto;
    width: 680px;
}

.formArea ul {
    padding: 0;
    margin: 0;
}

    .formArea ul li:first-child {
        float: left;
        padding: 0;
        margin: 0;
        width: 260px;
    }

    .formArea ul li:last-child {
        float: left;
        margin: 0;
        padding: 0;
        width: 390px;
        position: relative;
        margin-left: 20px;
    }

    .formArea ul li:first-child select {
        appearance: none;
        width: calc(100%);
        font-size: 19px;
        font-family: "Noto Sans TC", sans-serif;
        border: 1px solid rgb(116, 116, 116);
        border-radius: 25px;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        padding-top: 0;
        padding-bottom: 0;
        color: rgb(53, 53, 53);
        background: url("../Images/arrow-down.gif") 88% no-repeat #f5f5f5;
    }

#searchText {
    appearance: none;
    width: calc(100% - 20px);
    font-size: 19px;
    font-family: "Noto Sans TC", sans-serif;
    border: 1px solid rgb(116, 116, 116);
    border-radius: 25px;
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    padding-top: 0;
    padding-bottom: 0;
    color: rgb(53, 53, 53);
    background-color: #f5f5f5;
}

#searchBtnDiv {
    position: absolute;
    top: 2px;
    right: 0px;
}

    #searchBtnDiv input {
        cursor: pointer;
        background-image: url(../Images/search.png);
        background-color: #f5f5f5;
        background-position: center center;
        background-repeat: no-repeat;
        width: 48px;
        height: 36px;
        border-width: 0px;
        border-radius: 18px;
    }

#clinic-area .clean {
    clear: both;
}

/* 診所列表 */
#clinic-list {
    width: 1000px;
    margin: 2rem auto 50px auto;
}

    #clinic-list dl .ccertified,
    #clinic-list dl .cname,
    #clinic-list dl .ctel,
    #clinic-list dl .caddr {
        float: left;
        font-size: 18px;
        /* font-weight: 400; */
        color: #777777;
        /* font-family: "Noto Sans TC", sans-serif; */
        letter-spacing: 1px;
        text-decoration: none;
        color: #666666;
        cursor: default;
    }

        #clinic-list dl .cname a {
            color: #777777;
        }

    #clinic-list dl {
        height: 65px;
        line-height: 65px;
        border-bottom: 1px solid #c4c4c4;
    }

        #clinic-list dl:last-child {
            border-bottom: 0 solid #888787;
        }

        #clinic-list dl .ccertified  {
           text-align:center
        }

            #clinic-list dl .ccertified img {
                width: 50px;
                vertical-align: middle;
            }



        #clinic-list dl .ccertified {
            width: 10%;
        }

        #clinic-list dl .cname {
            width: 30%;
        }

        #clinic-list dl .ctel {
            width: 20%;
        }

        #clinic-list dl .caddr {
            width: 40%;
        }
        #clinic-list dl span {
            overflow: hidden;
        }

        #clinic-list dl .caddr {
            width: 40%;
        }


    #clinic-list dl {
        clear: both;
    }


#bottom-bn-area {
    width: 1000px;
    margin: 1rem auto 400px auto;
}

    #bottom-bn-area img {
        width: 90%;
        margin: 0 auto;
        display:block
    }

        #bottom-bn-area img.MB {
            display: none !important
        }


/* 全區、北部、中部、南部 分類 */
ul.area4 {
    font-size: 125%;
    margin: 1.5rem auto 2rem auto;
    width: 680px;
}

    ul.area4 li {
        display: block;
        float: left;
        width: 25%;
    }

.eachArea {
    border-radius: 20px;
    height: 38px;
    line-height: 38px;
    background-color: #f5f5f5;
    text-align: center;
    font-size: 19px;
    font-family: "Noto Sans TC", sans-serif;
    font-weight: 400;
    color: #777777;
    border: 1px solid rgb(116, 116, 116);
    cursor: pointer;
}

    .eachArea.a2,
    .eachArea.a3,
    .eachArea.a4 {
        margin-left: 20px;
    }

.active {
    border: 1px solid #ea5206;
    background-color: #ea5206;
    color: white;
}

footer {
    background-color: #DCDCE4;
    height: 75px;
    line-height: 75px;
    text-align: center;
    color: white;
    min-width: 900px;
}