@charset "utf-8";

@import url("owl.carousel.css");

/* reset css */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td { margin: 0; padding: 0; -webkit-text-size-adjust: none; }
th { font-weight: normal; text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; }
ol, ul { list-style: none; }
/* a { hlbr: expression(this.onFocus=this.blur()); text-decoration: none; cursor: pointer; } */
a { text-decoration: none; cursor: pointer; }
input, select, textarea, button { outline: none; border-radius: 0; font-family: arial, "微軟正黑體"; }
button { padding: 0; cursor: pointer; }

body { font-family: arial, "微軟正黑體"; }

/* header */
#header { position: relative; max-width: 110em; margin: 0 auto; padding: 0 250px 0 359px; border: 5px solid #000; box-sizing: border-box; }
#logo { position: absolute; left: 0; top: 0; display: flex !important; justify-content: center; align-items: center; width: 359px; height: 100%; background: url(../images/logo_index.jpg) center center no-repeat; background-size: 100% auto; border-right: 5px solid #333; }
#navigation { width: 100%; background: #FFF; overflow: hidden; }
#navigation li { float: left; width: 25%; border-right: 5px solid #000; box-sizing: border-box; }
#navigation li a { display: block; padding: 20px 0; font-size: 1.875em; color: #000; letter-spacing: 1.2px; font-weight: bold; text-align: center; transition: all .3s; }
#navigation li a:hover { background: #CCC; }
#navigation li a:before { content: ""; display: block; width: 83px; height: 74px; margin: 0 auto 5px auto; }
#navigation li.btn-1 a:before { background-image: url(/accessibility-page/v2/image/comment-dots-solid.svg); }
#navigation li.btn-2 a:before { background-image: url(/accessibility-page/v2/image/magnifying-glass-solid.svg); }
#navigation li.btn-3 a:before { background-image: url(/accessibility-page/v2/image/circle-question-regular.svg); }
#navigation li.btn-4 a:before { background-image: url(/accessibility-page/v2/image/sitemap-solid.svg); }
#navigation li.btn-1 a:before, 
#navigation li.btn-2 a:before,
#navigation li.btn-3 a:before, 
#navigation li.btn-4 a:before {
    background-repeat: no-repeat;
    background-position: initial !important;
}
#font-resize { position: absolute; right: 0; top: 0; width: 250px; padding: 20px 0; background: #f4f4f4; text-align: center; }
#font-resize a { display: inline-block; margin: 0 3px; padding: 2px 5px; background: #002566; font-size: 2.8125em; color: #FFF; font-weight: bold; }
#font-resize a.active { background: #000; }
#font-resize span { display: block; padding-top: 15px; font-size: 1.875em; color: #333; font-weight: bold; }

/* slider */
#slider { position: relative; width: 90%; max-width: 97.5em; margin: 5% auto; }
#slider .item img { display: block; width: 100%; height: auto; }
#slider .owl-buttons > div { position: absolute; top: 50%; width: 86px; height: 86px; margin-top: -43px; background: url(../images/slider_arrow.png); border: 9px solid #FFF; border-radius: 50%; text-indent: -9999px; }
#slider .owl-buttons .owl-prev { left: 20px; background-position: left top; }
#slider .owl-buttons .owl-next { right: 20px; background-position: right top; }
#slider .owl-pagination { display: none; padding-top: 15px; text-align: center; }
#slider .owl-pagination .owl-page { display: inline-block; width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; background: #CCC; }
#slider .owl-pagination .owl-page.active { background: #333; }
#slider p { padding: 10px 0; text-align: left; line-height: 35px; white-space: nowrap; }

/* news */
#news { width: 90%; max-width: 97.5em; margin: 0 auto; }
#news dl { width: 48%; }
#news dt { border: 5px solid #333; text-align: -webkit-center; position: relative; height: 400px; }
#news dt a { display: block; transition: all .3s; }
#news dt a img, #news dt img { position: absolute; display: block; max-width: 100%; max-height: 100%; top: 0px; left: 0px; right: 0px; bottom: 0px; margin: auto; }
#news dt a:hover { opacity: .6; }
#news dd { position: relative; margin-top: 3%; padding-left: 230px; margin-bottom: 140px; }
#news dd:before { content: ""; position: absolute; left: 0; top: 10px; display: block; width: 200px; height: 200px; background: url(../images/index_news_icon.png); }
#news dd b { font-size: 1.875em; letter-spacing: .5px; }
#news dd h2 { font-size: 1.875em; color: #000; letter-spacing: .5px; }
#news dd a { display: inline-block; margin-top: 10px; padding: 0 5px; font-size: 2.1875em; color: #FFF; font-weight: bold; transition: all .3s; }
#news dd a:hover { background: #000 !important; }

#news dl.left { float: left; }
#news dl.right { float: right; }

#news dl.news-1 dd:before { background-color: #002566; background-position: left top; }
#news dl.news-1 dd b { color: #002566; }
#news dl.news-1 dd a { background-color: #002566; }

#news dl.news-2 dd:before { background-color: #002566; background-position: -200px top; }
#news dl.news-2 dd b { color: #002566; }
#news dl.news-2 dd a { background-color: #002566; }

#news dl.news-3 dd:before { background-color: #002566; background-position: -400px top; }
#news dl.news-3 dd b { color: #002566; }
#news dl.news-3 dd a { background-color: #002566; }

#news dl.news-4 dd:before { background-color: #002566; background-position: right top; }
#news dl.news-4 dd b { color: #002566; }
#news dl.news-4 dd a { background-color: #002566; }

/* unit-link */
#unit-link { width: 90%; max-width: 100em; margin: 5% auto; }
#unit-link h2 { margin-bottom: 2%; font-size: 4.0625em; color: #000; letter-spacing: .5px; text-align: center; }
#unit-link ul {overflow: hidden;}
#unit-link li { float: left; width: 20.33%; margin: 2%; }
#unit-link li a { display: block; transition: all .3s; }
#unit-link li a:hover { opacity: .6; }
#unit-link li a img { display: block; width: 100%; height: auto; margin: 10px auto; border: 5px solid #333; box-sizing: border-box; }
#unit-link li a p { padding: 10px; background: #f4f4f4; font-size: 2.1875em; color: #000; font-weight: bold; text-align: center; }

/* footer */
#footer { padding: 3% 0; background: #000; }
#footer .wrap { width: 90%; max-width: 103.75em; margin: 0 auto; }
#footer .wrap:after { content: ""; display: block; clear: both; }
#footer .wrap .info { float: left; font-size: 1.5625em; color: #FFF; line-height: 1.75em; letter-spacing: 1.2px; font-weight: bold; text-shadow: 2px 2px 2px rgba(0,0,0,.8) }
#footer .wrap .other { float: right; }
#footer .wrap .other:after { content: ""; display: block; clear: both; }
#footer .wrap .other a { float: left; transition: all .3s; }
#footer .wrap .other a:hover { opacity: .6; }
#footer .wrap .other .mail { position: relative; top: -10px; display: inline-block; margin-right: 30px; font-size: 1.5625em; color: #FFF; letter-spacing: 1.2px; font-weight: bold; text-shadow: 2px 2px 2px rgba(0,0,0,.8) }
#footer .wrap .other .mail:before { content: ""; display: block; width: 77px; height: 59px; margin: 10px auto; background: url(../images/footer_mail.png); }
#footer .wrap .other .accessibility { display: inline-block; width: 88px; height: 31px; background: url(../images/accessibility.jpg); text-indent: -9999px; /*margin-top: 70px;*/ }
#footer img { width: 15%; }

/* gotop */
#gotop { position: fixed; right: 6%; bottom: 25%; display: block; width: 75px; height: 75px; background: url(../images/gotop.png); text-indent: -9999px; }




@media screen and (max-width:1750px) {
    #unit-link li a p { font-size: 1.9em; }
}
/* RWD */
@media screen and (max-width:1500px) {
    #unit-link li a p { font-size: 1.8em; }
    #unit-link li a { min-height: 280px; }
    #unit-link li { margin-bottom: 1%; }
    /* footer */
    #footer .wrap .info { float: none; width: 100%; text-align: center; }
    #footer .wrap .other { float: none; width: 406px; margin: 20px auto 0 auto; text-align: center; }
}

@media screen and (max-width:1200px) {
    /* header */
    #header { padding: 0 160px 0 230px; }
    #logo { width: 230px; }
    #navigation li a { padding: 13px 0; font-size: 1.125em; }
    #navigation li a:before { width: 50px; height: 43px; }
    #navigation li.btn-2 a:before { background-position: -50px top; }
    #navigation li.btn-3 a:before { background-position: -100px top; }
    #navigation li.btn-4 a:before { background-position: right top; }
    #font-resize { width: 160px; padding: 10px 0; }
    #font-resize a { font-size: 1.875em; }
    #font-resize span { padding-top: 7px; font-size: 1.25em; }
    /* slider */
    #slider p { white-space: pre-wrap; }
    /* news */
    #news dt a img { display: block; height: 200px; width: auto; }
    #news dd { padding-left: 130px; }
    #news dd:before { width: 100px; height: 100px; background-size: 400px auto; }
    #news dd b,
    #news dd h2 { font-size: 1.875em; }
    #news dd a { font-size: 1.5625em; }
    #news dl.news-2 dd:before { background-position: -100px top; }
    #news dl.news-3 dd:before { background-position: -200px top; }
    #news dl.news-4 dd:before { background-color: #ffb540; background-position: right top; }
    /* unit-link */
    #unit-link h2 { font-size: 2.5em; }
    #unit-link li a p { font-size: 1.5625em; }
}

@media screen and (max-width:768px) {
    #unit-link li a { min-height: inherit; }
    #news dt { height: inherit; }
    #news dt a img, #news dt img { position: relative; }
    /* header */
    #header { padding: 0; border: none; text-align: center; }
    #logo { position: static; display: block; width: 100%; height: 100px; background-color: #fff; background-size: 200px auto; border: none; }
    #navigation { border: 3px solid #333; border-bottom: none; box-sizing: border-box; }
    #navigation li { border-right-width: 3px; }
    #navigation li.btn-4 { border: none; }
    #font-resize { position: static; width: 100%; border: 3px solid #333; box-sizing: border-box; }
    /* slider */
    #slider .owl-buttons { display: none; }
    #slider .owl-pagination { display: block; }
    /* news */
    #news dt a img { display: block; width: 100%; height: auto; }
    #news dl { float: none !important; width: 100%; }
    #news dl.left { margin-bottom: 10%; }
    #news dd { margin-bottom: 0px; }

    /* unit-link */
    #unit-link li { width: 46%; }
    /* footer */
    #footer .wrap .other { width: 257px; }
    #footer .wrap .info { font-size: 1.125em; line-height: 1.56em; text-shadow: none; }
    #footer .wrap .other .mail { top: -20px; font-size: 1.125em; }
    #footer .wrap .other .mail:before { width: 45px; height: 34px; background-size: 100% auto; }
    #footer .wrap .other .accessibility { margin-top: 25px; }
    /* gotop */
    #gotop { width: 50px; height: 49px; background-size: 100% auto; }
}

@media screen and (max-width:480px) {
    /* header */
    #navigation { border-width: 1px; }
    #navigation li { width: 50%; border: 1px solid #333 !important; }
    #font-resize { border-width: 2px; }
    /* news */
    #news dd { padding: 0; }
    #news dd:before { display: none; }
    /* unit-link */
    #unit-link li { float: none; width: 100%; margin: 0 auto; padding: 20px 0; }
}