@charset "UTF-8";
/*思源黑體*/
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
/*reset*/
body {font:normal 16px/100% "Noto Sans TC","微軟正黑體","Helvetica Neue",sans-serif; color:#666666; background-color:#e4ecef; margin:0; padding:0;}
body.text-big{font-size: 18px;}
body.text-small{font-size: 14px;}
a {text-decoration:none; color:#666666; cursor:pointer; /*outline: none;*/}
div, p, span, ul, ol, li, h1, h2, h3, h4, h5, h6, input, table, td, th, img {margin: 0;padding: 0;border: none; box-sizing: border-box;}
img {border: none;display:block;}
ul, li {list-style: none;}
input[type="button"]{ cursor:pointer;}
/*rwd*/
.web{display: block;}
.phone{display: none;}
/*無障礙*/
.sr-only{position: absolute; top:0; left: 0; display: block; overflow: hidden; }
nav .sr-only{color:#fff;}
.topGuid .sr-only{color:#fff; width:1px; height: 1px; }
aside .sr-only{color:#fff; }
.content .sr-only{color:#e4ecef; }
.content table .sr-only{color:#fff; width:0px; height: 0px; display: block; overflow: hidden;}
#menu .sr-only{color:#06559a; width:0px; height: 0px; display: block; overflow: hidden;}
/*h1*/
h1{ width:180px; height: 74px; display: block;}
h1 a{width:100%; height: 100%; display: block;}
h1 a img{width:100%; height: 100%; display: block;}
h2{font-size:1.250em; color:#06559a; }
h2 span{ font-size:14px; color:#a8adb5;  line-height: 1; }
h3 {font-size:1.250em;}
h3 span{ font-size:14px; color:#a8adb5;  line-height: 1; }
h4 {font-size:1.125em;}
h5 {font-size:1em;}
/*goMain*/
a.goMain{position: absolute; top:0; left: 0; color:#fff; font-size: 1em;}
a.goMain:focus{background: #f5a552; }
a.link-fb{ width:22px; height: 22px; display: block; }
a.link-fb img{width:22px; height: 22px;}
a.go-top{ position: absolute; bottom: 10px; right:10px; width:20px; height:20px; padding: 3px; display: block ; border-radius:99em; background: #aaaaaa; color:#fff; font-size: 14px; font-weigt:bold;}

#pageSize{position: relative; width:100%; border-top:5px solid #0060a3;}


/*header*/
header{ background: #fff; }
header .in{width:1000px;height:110px; margin:0 auto; display: flex; justify-content: space-between; align-items: center; background: #fff;}
.hd-Rbox{ width:calc(100% - 180px); height: 100%; display: flex; flex-direction: column; justify-content: space-between;  }
.hd-Rbox ul{ display: flex; justify-content: flex-end; align-items: center;}

.hd-Rbox ul.topGuid{ padding: 18px 0 0;}
.hd-Rbox ul.topGuid li{  position: relative;margin: 0 0 0 10px;}
.hd-Rbox ul.topGuid li:first-child a{ width:6px; height: 6px; display: block; background:#fff;}
.hd-Rbox ul.topGuid li:last-child{  width:180px; height: 22px; display: flex; background:#fff; border:1px solid #dddddd; border-bottom-right-radius: 4px; border-top-right-radius: 4px; overflow: hidden;}
.hd-Rbox ul.topGuid label{ text-indent: -999px;}
.hd-Rbox ul.topGuid input[type="text"]{ width:130px; height:21px; box-sizing: border-box; padding: 0 5px 2px 20px ; font-size: 0.875em; background:url("../images/icon-search.svg") 2px  no-repeat;  background-size:16px auto; }
.hd-Rbox ul.topGuid input[type="submit"]{ width:50px; height:21px; display: block;  padding: 0  ; text-align: center; font-size: 0.875em; color:#fff;  font-weight:500; background: #aaaaaa; border-radius: 0;}

.hd-Rbox nav{ position: relative;}
.hd-Rbox nav li:first-child a{border-top-left-radius: 6px; }
.hd-Rbox nav li:last-child a{border-top-right-radius: 6px; }
.hd-Rbox nav li a{padding: 0 15px; width: 100%; height:50px;  display: flex; align-items: center;color:#fff; font-weight:500;  box-sizing: border-box; 
background: #05a2f7; /* Old browsers */
background: -moz-linear-gradient(top, #05a2f7 0%, #0290ef 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #05a2f7 0%,#0290ef 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #05a2f7 0%,#0290ef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05a2f7', endColorstr='#0290ef',GradientType=0 ); /* IE6-9 */
}
.hd-Rbox nav li a:hover, .hd-Rbox nav li a.current{text-shadow: 0px 0px 5px rgba(50,90,10,.3);
background: #61c700; /* Old browsers */
background: -moz-linear-gradient(top, #61c700 0%, #b6f605 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #61c700 0%,#b6f605 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #61c700 0%,#b6f605 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#61c700', endColorstr='#b6f605',GradientType=0 ); /* IE6-9 */
}
.hd-Rbox nav li a::before{content: ' '; width:18px; height: 18px;  margin: 0 4px 0 0; display: block;}
.hd-Rbox nav li:nth-child(1) a::before{ background:url("../images/icon-nav01.svg") no-repeat; }
.hd-Rbox nav li:nth-child(2) a::before{ background:url("../images/icon-nav02.svg") no-repeat; }
.hd-Rbox nav li:nth-child(3) a::before{ background:url("../images/icon-nav03.svg") no-repeat; }
.hd-Rbox nav li:nth-child(4) a::before{ background:url("../images/icon-nav04.svg") no-repeat; }
.hd-Rbox nav li:nth-child(5) a::before{ background:url("../images/icon-nav05.svg") no-repeat; }
.hd-Rbox nav li:nth-child(6) a::before{ background:url("../images/icon-nav06.svg") no-repeat; }
.hd-Rbox nav li:nth-child(7) a::before{ background:url("../images/icon-nav07.svg") no-repeat; }

/*menu*/
.menu{ display: none; width: 24px; height: 30px; z-index: 99;}
.menu div{ display: none; width: 100%; height: 100%;}
.icon_menu {}
.icon_menu { width: 100%; height: 100%;}
.icon_menu::after, .icon_menu::before, .icon_menu span { background-color: #0598f7; border-radius: 3px; content: ''; display: block; height: 3px; margin: 4px 0;transition: all .2s ease-in-out;}
.icon_menu::before { transform: translateY(0) rotate(0);}
.icon_menu::after { transform: translateY(0) rotate(0);}
.mm-wrapper_opening .icon_menu::before { transform: translateY(8px) rotate(135deg);}
.mm-wrapper_opening .icon_menu::after { transform: translateY(-6px) rotate(-135deg);}
.mm-wrapper_opening .icon_menu span { transform: scale(0);}
/*訪客人數*/
.view{ width:100%;display: block; }
.view .in{ position: relative;width:1000px; margin: 0 auto;}
.view .in .visitNum{position: absolute;  color:#ffcc00;  }
.view .in .visitNum::before{content: "訪客人數"; color:#fff; margin-right: 5px;}
.view .txt_m{display:none;}
/*main*/
#main{position: relative; width:1000px; margin: 0 auto 40px; display: flex; justify-content: center;}
/*aside*/
aside{ width:250px;  margin: 0 20px 0 0; }
aside h2{padding: 30px 15px 20px; background: #fff; }
aside h2 span{ display: block; padding: 5px 0 0;}
aside ul {margin: 0 0 20px;}
aside ul li a{ position: relative; padding: 10px 10px 10px 15px; display: flex; align-items: center; background: #effbff;}
aside ul li a.current, aside ul li a:hover{ color:#fff;
background: #0597f7; /* Old browsers */
background: -moz-linear-gradient(left, #0597f7 0%, #09ebfe 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #0597f7 0%,#09ebfe 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #0597f7 0%,#09ebfe 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0597f7', endColorstr='#09ebfe',GradientType=1 ); /* IE6-9 */}
aside ul li a::before{ content:" ";  border-color:  transparent transparent transparent #666666;
    border-style: solid solid solid solid; border-left-width: 6px;width:0; height: 0; display: block; margin: 0 5px 0 0;}
aside ul li a.current::before, aside ul li a:hover::before{border-color:  transparent transparent transparent #fff;}
aside ul li.sub a{padding: 7px 10px 7px 30px; font-size:14px; }
aside ul li.sub a::before{ border-left-width: 4px;border-color:  transparent transparent transparent #999999;}
aside ul li.sub a.current, aside ul li.sub a:hover{padding: 7px 10px 7px 30px; font-size:14px;  background: #effbff; color:#0597f7;}
aside ul li.sub a.current::before, aside ul li.sub a:hover::before{border-color:  transparent transparent transparent #0597f7;}
/*content*/
.content{ position: relative; width:calc(100% - 270px);  }
/*route*/
.route{ height: 40px; line-height: 40px; font-size: 14px; }
.route a{display: inline-flex; align-items: center; }
.route a::after{ content:" ";  border-color:  transparent transparent transparent #aaaaaa;
    border-style: solid solid solid solid; border-left-width: 6px;width:0; height: 0; display:block;  margin: 0 2px 0 5px;}
.route a:hover{color:#0597f7;}
/*footer*/
footer .topBox{background: #024a79; padding: 20px 0; box-sizing: border-box;}
footer .butBox{background: #002e4c; padding: 20px 0 10px; box-sizing: border-box;}
footer ul{width:100%; margin: 0 auto; display: flex; justify-content: center; align-items: center; }
footer ul li {margin: 0 10px;}
footer ul li a{ color:#fff; }
footer .butBox .in{ width:1000px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; color:#fff; font-size: 12px;box-sizing: border-box;}
footer .butBox img{ width:130px; height: auto;}
footer .butBox .in p{margin: 0 0 10px;}
footer .butBox .in p span:first-child{padding: 0 0 2px 25px; background: url("../images/ico-ft-phone.svg") no-repeat; background-size: 20px 20px; margin: 0 20px 0 0;}
footer .butBox .in p span:last-child{padding: 0 0 2px 25px; background: url("../images/ico-ft-clock.svg") no-repeat; background-size: 18px 18px;}
footer .butBox .in p:last-child span:first-child, footer .butBox .in p:last-child span:last-child{ padding: 0; background: none;}

@media screen and (max-width: 999px) {
    /*h1*/
    h1{ width:140px; height: 57px; }
    /*header*/
    header .in{width:100%; padding: 0 20px;}
    .hd-Rbox{ width:calc(100% - 140px); }
    .hd-Rbox nav li a{padding: 0 8px; }
    /*view*/
    .view .in{width:100%; }
    /*main*/
    #main{width:100%; padding: 0 20px;  margin: 0 auto 30px; box-sizing: border-box;}
    /*footer*/
    footer ul li {margin: 0 10px;}
    footer .butBox .in{ width:100%; padding: 0 20px; }
    footer .butBox .in p span{display: block;}
    footer .butBox .in p span:first-child{padding: 0 0 0 25px; background: url("../images/ico-ft-phone.svg") no-repeat; margin:  0 0 10px 0;}
    footer .butBox .in a{ margin: 0 0 0 20px;}
    
}
/*pad*/
@media screen and (max-width: 900px) {
    /*header*/
    .hd-Rbox nav li a{padding: 0 10px; flex-direction: column; justify-content: center; }
    .hd-Rbox nav li a::before{ margin: 0 0 2px 0; display: block;}
}
/*mobile*/
@media screen and (max-width: 767px) {
    /*rwd*/
    .web{display:none ;}
    .phone{display: block;}
    /*h1*/
    h1{ width:116px; height: 50px; z-index: 1;}
    h2{font-size:1.5em; font-weight: 500; }
    /*header*/
    header .in{height:60px; padding: 0 20px}
    .hd-Rbox{ display: none; }
    /*menu*/
	.menu{ display: block;}
	.menu a{ display:  block;}
    /*view*/
    .view .txt_m{ position: absolute; width:100%; height: 100%;  display: flex; justify-content: center; align-items: center;flex-direction: column;}
    /*main*/
    #main{display: block; margin: 0 auto 20px;}
    /*subMenu*/
    .subMenu{ display: flex; justify-content: space-between; align-items: center; }
    .subMenu a.call-sub-menu{ width:100%;  font-size: 1.250em; color:#fff; font-weight:bold; text-align: center; background: #0598f7; line-height: 1.2; border-radius: 20px; padding: 8px 0 ;}
    .subMenu a.call-sub-menu span{display: block;font-size: 14px; font-family:  "Helvetica Neue", Helvetica, Arial, "sans-serif"; font-weight: 500; text-transform: uppercase; color: #bfe6ff;}
    .subMenu a.call-qrCode{width:48px; height: 48px; display: block; margin-left: 20px; vertical-align: middle;}
    /*content*/
    .content{ position: relative; width:100%;  }
    /*footer*/
    footer ul li {margin: 0 3px;}
    footer .butBox .in{ flex-direction: column-reverse; }
    footer .butBox .in a{ margin: 0 0 15px;}
    footer .butBox .in p{text-align: center;}
    footer .butBox .in p span.web{display: none;}
    footer .butBox .in p span:first-child{padding: 0 ; background: none;  margin: 0 0 10px;}
    footer .butBox .in p span:last-child{padding: 0 ;  background: none;  margin: 0;}
    footer .butBox .in p span:first-child::before{content:""; width:20px; height: 20px; display: inline-block; background: url("../images/ico-ft-phone.svg") no-repeat; background-size: 20px 20px; margin: 0 5px 0 0; vertical-align: middle;}
    footer .butBox .in p span:last-child::before{content:""; width:20px; height: 20px; display: inline-block; background: url("../images/ico-ft-clock.svg") no-repeat; background-size: 20px 20px; margin: 0 5px 0 0;vertical-align: middle;}
    footer .butBox .in p:last-child span:last-child::before{display: none;}
    
}
@media screen and (max-width: 374px) {
    #main{ padding:0 10px;}
    footer .butBox .in{padding: 0 10px;}
}