/*body {
    padding-top: 50px;
    padding-bottom: 20px;
}*/

/* Set padding to keep content from hitting the edges */
/*.body-content {
    padding-left: 15px;
    padding-right: 15px;
}*/

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
/*.dl-horizontal dt {
    white-space: normal;
}*/

/* Set width on the form input elements since they're 100% wide by default */
/*input,
select,
textarea {
    max-width: 280px;
}*/
/*html, body {
    height: 100%;
    font-family: "microsoft jhenghei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#wrap {
    min-height: 100%;
}

#main {
    overflow: auto;
    padding-bottom: 10em;
}

.footer {
    position: relative;
    margin-top: -10em;
    height: 10em;
    clear: both;
    padding-top: 20px;
}*/
body {
    font-weight: 500;
    font-display: swap;
    font-family: 'Noto Sans TC', -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", sans-serif;
    color: #333;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 1.125rem; /* 約 18px，現代網頁閱讀的標準大小 */
}
a{
    text-decoration:none;
}
    a:hover, a:focus, a:active {
        color: #004aa0;
    }
.input-validation-error {
    border-color: red;
}

.field-validation-error {
    color: red;
}

.bannerfix {
    padding-left: 45px;
    padding-right: 45px;
}

.header-sub-nav li {
    padding-right: 0rem;
}

    .header-sub-nav li a {
        text-decoration: none;
    }

    .header-sub-nav li::after {
        content: '|';
        padding-left: 0rem;
    }

    .header-sub-nav li:last-child::after {
        content: '';
        padding-left: 0;
    }

.main-nav li {
}

.main-nav a {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-weight: 700;
    color: #004aa0;
}

.main-nav li a:hover, .main-nav li a:focus {
    color: #ffffff;
    background-color: #004aa0;
    width: 100%;
    display: block;
}

.header-sub-nav a {
    font-weight: 500;
}

footer {
    border-top: 1px solid #e5e5e5;
}


.home-college {
    /*  background-position: -170px 0px;
    padding-top: 25px;
    padding-bottom: 45px;*/

    background-color: #eaf7ff;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-repeat: no-repeat;
    background-position: right center;
    background-size:contain;
    -webkit-mask-image: radial-gradient( circle, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 80% );
    mask-image: radial-gradient( circle, rgba(0,0,0,1) 20%, rgba(0,0,0,0) 80% );
}

    .home-college:nth-child(2n+1) {
        background-color: #eaf7ff;
        
    }

    .home-college:nth-child(2n+2) {
        background-color: #f8edff;
    }

    .home-college:nth-child(2n+3) {
        background-color: #fff8f5;
    }

    .home-college:nth-child(2n+4) {
        background-color: #f0fff5;
    }

    .home-college:nth-child(2n+5) {
        background-color: #fff4f4;
    }

    .home-college:nth-child(2n+6) {
        background-color: #fffff3;
    }

    .home-college:nth-child(2n+7) {
        background-color: #fff6f0;
    }

    .home-college:nth-child(2n+8) {
        background-color: #f0fefe;
    }

    .home-college:nth-child(2n+9) {
        background-color: #eaf7ff;
    }

    .home-college:nth-child(2n+10) {
        background-color: #f8edff;
    }

    .home-college:nth-child(2n+11) {
        background-color: #fff8f5;
    }



    .home-college img {
        -webkit-mask-image: radial-gradient(ellipse 70% 55% at center, black 20%, transparent 75%);
        mask-image: radial-gradient(ellipse 70% 55% at center, black 20%, transparent 75%);
    }