@charset "utf-8";
/* CSS Document */
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');
*{ margin:0; padding:0; font-family:'Noto Sans TC', sans-serif; font-size:1rem; color:#333; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
a{ text-decoration:none; }
*:focus{ outline:2px solid #F30; }

.sr-only {  position: absolute; width: 0.063rem; height: 0.063rem; padding: 0; margin: -0.063rem; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; z-index:101; color: #fff; }
.sr-only-focusable:active,.sr-only-focusable:focus { position:absolute !important; top:0; left:0; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }


/*header*/
.header{ background:#14305b; position:fixed; top:0; left:0; right:0; margin:auto; height:150px; z-index:100; }
.header:before{ content:""; display:block; width:100%; height:5px; background:#fc8738; position:absolute; top:0; left:0; right:0; margin:auto; }

.header .logo{ position:absolute; top:0; bottom:0; left:50px; margin:auto; width:356px; height:110px; background-image:url(../images/layout/logo.svg); background-repeat:no-repeat; background-position:center; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; }
.header .logo span{ font-size:0; }
.header .menubox{ display:flex; align-content: center; flex-wrap:wrap; padding-right:50px; height:100%; }
.header .menubox .fun{ display:flex; justify-content: flex-end; width:100%; margin-bottom:20px; }
.header .menubox .fun .grids{ padding:0 20px; border-right:1px solid #43597c; display:block; }
.header .menubox .fun .grids img{ width:24px; }
.header .menubox .fun .grids .latxt{ display:inline-block; vertical-align:middle; width:26px; height:26px; line-height:23px; border:1px solid #fff; color:#fff; font-size:0.75rem; text-align:center; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; margin:0 1px; }
.header .menubox .fun .grids .latxt.hold{ background:#fc8738; }
.header .menubox .fun .grids:last-child{ border:0; padding-right:0; }
.header .menubox .menus{ display:flex; justify-content: flex-end; width:100%; }
.header .menubox .menus .grids{ margin:0 0 0 30px; color:#fff; font-weight:300; position:relative; }
.header .menubox .menus .grids:after{ content:""; display:block; width:0%; height:2px; background:#fc8738; position:absolute; left:0; bottom:-5px; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; }

.header .menubtn{ display:none; }

.header .closebtn{ display:none; }


/*footer*/
.footer{ background:#f5f5f5; padding:95px 15px; position:relative; z-index:1; }
.footer .mar{ max-width:1280px; margin:auto; }
.footer .mar .ftxt{ display:flex; width:100%; }
.footer .mar .ftxt .imgs .logo{ display:block; margin-bottom:15px; }
.footer .mar .ftxt .imgs .logo img{ height:50px; }
.footer .mar .ftxt .imgs .logo:last-child{ margin:0; }
.footer .mar .ftxt .ftext{ flex:1; padding:0 0 0 85px; }
.footer .mar .ftxt .ftext .mbox{ display:flex; margin:0 0 20px 0; }
.footer .mar .ftxt .ftext .mbox .mgrids{ margin-right:20px; display:block; }
.footer .mar .ftxt .ftext .mbox .mgrids span{ font-weight:300; }
.footer .mar .ftxt .ftext .mbox_2{ display:flex; margin:10px 0; }
.footer .mar .ftxt .ftext .mbox_2 .links{ display:flex; align-items: center; margin-right:20px; }
.footer .mar .ftxt .ftext .mbox_2 .links .j1{ width:22px; height:22px; background-position:center; background-repeat:no-repeat;  background-size:22px; }
.footer .mar .ftxt .ftext .mbox_2 .links .j1 img{ width:100%; }
.footer .mar .ftxt .ftext .mbox_2 .links .j2{ padding:0 0 0 5px; font-size:0.875rem; color:#333; font-weight:300; }
.footer .mar .ftxt .ftext .mtext{ margin:0 0 5px 0; font-size:0.875rem; color:#333; line-height:1.6; font-weight:300; }
.footer .h6{ font-size:14px; font-weight:300; color:#aaa;}
.footer .h6 a{ font-size:14px; font-weight:300; color:#333;}

.nolinks{ display:inline-block; margin-top:5px; }

.top_noscript{ max-width:1820px; padding:0 15px; }
/*================================●●●●●●●●●●●●Hover●●●●●●●●●●●●================================*/
@media screen and (min-width:1024px){
.top_noscript{ margin:150px auto -148px; }
.header .menubox .menus .grids:hover:after{ width:100%; }
}

/*================================●●●●●●●●●●●●平板●●●●●●●●●●●●================================*/
@media screen and (min-width:768px) and (max-width:1023px){
.top_noscript{ margin:100px auto -98px; }

/*header*/
.header{ height:100px; }
.header .logo{ left:20px; width:200px; height:62px; }
.header .menubox{ display: block; position: fixed; top: 0; right: 0; padding: 20px; background: #14305b; z-index:100; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; transform: translateX(460px); -webkit-transform: translateX(460px); -moz-transform: translateX(460px); box-shadow: -5px 0 10px rgba(0,0,0,0.3); }
.header .menubox.open{ transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; }
.header .menubox .menus{ width:100%; display:block; }
.header .menubox .menus .grids{ display:block; width:100%; border-bottom: 1px solid #43597c; padding: 0 0 10px 0; margin: 0 0 10px 0; }
.header .menubtn{ display:block; position:absolute; top:0; bottom:0; margin:auto; right:20px; width:28px; height:22px; cursor:pointer; }
.header .menubtn:before{ content:""; display:block; width:100%; height:2px; background:#fff; }
.header .menubtn:after{ content:""; display:block; width:100%; height:2px; background:#fff; }
.header .menubtn span{ display:block; width:100%; height:2px; background:#fff; margin:8px 0; }

.header .closebtn{ display:block; text-align:right; margin-bottom:30px; padding: 15px 0 0 0; }
.header .closebtn .btn{ width:30px; height:30px; display:inline-block; position:relative; cursor:pointer; transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; }
.header .closebtn .btn:before{ content:""; display:block; width:2px; background:#fff; position:absolute; left:0; right:0; bottom:0; top:0; margin:auto; }
.header .closebtn .btn:after{ content:""; display:block; height:2px; background:#fff; position:absolute; left:0; right:0; bottom:0; top:0; margin:auto; }

.header .menubox.open .closebtn .btn{ transform:rotate(135deg); -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); transition: 0.5s 0.3s all; -webkit-transition: 0.5s 0.3s all; -moz-transition: 0.5s 0.3s all; }
	
}

/*================================●●●●●●●●●●●●手機●●●●●●●●●●●●================================*/
@media screen and (max-width:767px){
.top_noscript{ margin:70px auto -68px; }

/*header*/
.header{ height:70px; }
.header .logo{ left:20px; width:140px; height:43px; }
.header .menubox{ display: block; position: fixed; top: 0; right: 0; padding: 20px; background: #14305b; z-index:100; transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; transform: translateX(100%); -webkit-transform: translateX(100%); -moz-transform: translateX(100%); width:100%; }
.header .menubox.open{ transform: translateX(0px); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; }
.header .menubox .menus{ width:100%; display:block; }
.header .menubox .menus .grids{ display:block; width:100%; border-bottom: 1px solid #43597c; padding: 0 0 10px 0; margin: 0 0 10px 0; }
.header .menubox .fun{ justify-content: flex-start; flex-wrap: wrap; }
.header .menubox .fun .grids{ padding:0 10px; width:20%; text-align:center; border:none; border-left: 1px solid #43597c; }
.header .menubox .fun .grids:first-child{ padding:0 10px 0 0; border:none; }
.header .menubox .fun .grids:last-child{ padding:15px 0 0 0; width:100%; }
.header .menubox .fun .grids .latxt{ margin:0 5px; }
.header .menubtn{ display:block; position:absolute; top:0; bottom:0; margin:auto; right:20px; width:24px; height:18px; cursor:pointer; }
.header .menubtn:before{ content:""; display:block; width:100%; height:2px; background:#fff; }
.header .menubtn:after{ content:""; display:block; width:100%; height:2px; background:#fff; }
.header .menubtn span{ display:block; width:100%; height:2px; background:#fff; margin:6px 0; }

.header .closebtn{ display:block; text-align:right; margin-bottom:30px; padding:3px 0 0 0; }
.header .closebtn .btn{ width:24px; height:24px; display:inline-block; position:relative; cursor:pointer; transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; }
.header .closebtn .btn:before{ content:""; display:block; width:2px; background:#fff; position:absolute; left:0; right:0; bottom:0; top:0; margin:auto; }
.header .closebtn .btn:after{ content:""; display:block; height:2px; background:#fff; position:absolute; left:0; right:0; bottom:0; top:0; margin:auto; }

.header .menubox.open .closebtn .btn{ transform:rotate(135deg); -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); transition: 0.5s 0.3s all; -webkit-transition: 0.5s 0.3s all; -moz-transition: 0.5s 0.3s all; }

/*footer*/
.footer{ padding:40px 0; }
.footer .mar .ftxt{ display:block; }
.footer .mar .ftxt .ftext{ padding:20px 0 0 0; }

.footer .mar .ftxt .ftext .mbox{ flex-wrap:wrap; padding:0 10px; }
.footer .mar .ftxt .ftext .mbox .mgrids.long{ width:100%; }
.footer .mar .ftxt .ftext .mbox .mgrids{ margin:0; width:50%; padding:5px; }
.footer .mar .ftxt .ftext .mbox .mgrids span{ background:#ddd; padding:5px; width:100%; display:block; text-align:center; font-size:0.875rem; }
.footer .mar .ftxt .ftext .mbox_2{ padding:0 15px; }
.footer .mar .ftxt .ftext .mtext{ line-height:1.8; padding:0 15px; }

.footer .mar .ftxt .imgs .logo{ text-align:center; margin-bottom:10px; }
.footer .mar .ftxt .imgs .logo img{ height:40px; }

.footer .h6{ position:static; padding:30px 15px 0 15px;}

.nolinks{ margin:5px 15px 0 15px; }
}