@charset "UTF-8";
body { font-family: "Noto Sans", "微軟正黑體", Verdana, Geneva, sans-serif; color: #323232; line-height: 28px; font-size: 15px; position: relative; background-color: #fff; -webkit-text-size-adjust: none; }

a { color: #323232; text-decoration: none; }
a:hover { color: #2f439d; text-decoration: none; }

.hide { display: none; }

.clean { clear: both; line-height: 0; height: 0; }

.left { float: left; }

.right { float: right; }

.wrapper { width: 100%; max-width: 1200px; margin: 0 auto; position: relative; }

.red { color: #e60012; }

.wrap { width: 100%; margin: 0 auto; }

header { width: 100%; padding: 0 10px 8px 10px; position: absolute; box-sizing: border-box; background-color: rgba(59, 88, 202, 0.9); z-index: 99; }
header:after { content: ""; width: 100%; height: 1px; background-color: rgba(255, 246, 0, 0.7); position: absolute; left: 0; bottom: 7px; }

nav { float: right; }
nav .nav { margin: 30px 0 28px 0; display: inline-block; vertical-align: middle; }
nav .nav li { margin: 0 7px; display: inline-block; vertical-align: middle; font-size: 18px; line-height: 23px; }
nav .nav li a { display: block; color: #fff; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
nav .nav li a:hover { color: #fff600; }
nav .link { margin: 30px 0 28px 0; display: inline-block; vertical-align: middle; }
nav .link li { display: inline-block; vertical-align: middle; }
nav .link li a { display: block; }
nav .link li a img { display: block; }
nav.nav-open, nav.nav-small { width: -moz-calc(100% - 40px); width: -webkit-calc(100% - 40px); width: calc(100% - 40px); max-width: 320px; float: none; padding: 20px 0; position: fixed; right: -100%; top: 60px; z-index: 2; background-color: rgba(59, 88, 202, 0.9); overflow: hidden; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; }
nav.nav-open .nav, nav.nav-small .nav { margin: 0; display: block; }
nav.nav-open .nav li, nav.nav-small .nav li { width: 100%; margin: 0; padding: 0 15px; display: block; text-align: center; box-sizing: border-box; }
nav.nav-open .nav li a, nav.nav-small .nav li a { padding: 5px 0; }
nav.nav-open .nav li a:hover, nav.nav-small .nav li a:hover { background-color: #2949cf; }
nav.nav-open .link, nav.nav-small .link { margin: 0; display: block; text-align: center; }
nav.nav-open .link li, nav.nav-small .link li { width: 100%; margin: 0; padding: 0 15px; display: block; text-align: center; box-sizing: border-box; }
nav.nav-open .link li a, nav.nav-small .link li a { padding: 5px 0 0 0; }
nav.nav-open .link li a:hover, nav.nav-small .link li a:hover { background-color: #2949cf; }
nav.nav-open .link li a img, nav.nav-small .link li a img { display: inline-block; }
nav.active { overflow: auto; right: 20px; }

.logo { float: left; margin: 17px 0 13px 0; position: relative; }
.logo a { display: block; }
.logo a img { width: 100%; display: block; }
.logo h1 { font-size: 12px; color: #fff; line-height: 12px; font-weight: bold; position: absolute; right: -14px; bottom: 0; font-family: Arial; }
.logo h1 span { position: absolute; text-indent: -9999px; }

/*footer */
.foot-nav { width: 100%; background-color: #2949cf; border-bottom: 1px solid #ffcc00; }
.foot-nav ul { text-align: center; }
.foot-nav ul li { margin: 0 10px; display: inline-block; }
.foot-nav ul li a { padding: 10px 0; font-size: 18px; color: #fff; display: block; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
.foot-nav ul li a:hover { color: #fcff00; }

.footer { width: 100%; padding: 20px 15px 15px 15px; text-align: center; background-color: #516bd5; box-sizing: border-box; }
.footer .foot-logo { margin-bottom: 15px; display: inline-block; }
.footer .foot-logo img { display: inline-block; }
.footer .foot-logo h2 { font-size: 14px; color: #fff; line-height: 15px; font-weight: bold; font-family: Arial; position: relative; }
.footer .foot-logo h2 span { position: absolute; text-indent: -9999px; }
.footer .foot-list { display: block; }
.footer .foot-list li { margin: 0 10px; display: inline-block; font-size: 17px; color: #fff; line-height: 17px; }

.copyright { width: 100%; padding: 15px 15px 10px 15px; background-color: #778ff4; color: #fff; text-align: center; box-sizing: border-box; }
.copyright .ework { color: #b9c5f8; }
.copyright .ework a { color: #b9c5f8; }
.copyright .ework a:hover { color: #ffcc00; }