@charset "utf-8";

/* @todo: This is a todo */
/* @note: This is a note */
/* @fixme: This is a fixme */
/* @changes: This is a chages */
/* @future: This is a future */

/*google web fonts*/
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);/*繁中*/
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);/*繁中*/
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,800');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700');
html {min-height: 100%; font-size: 15px} /*16px x 93.75% = 15px 網站字型大小預設值*/
body {
	height: 100%;
	background: #000;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 1px;
	color: hsl(0, 0%, 20%)
}
* { /*使用邊框不影響 div or table 本身寬度設定*/
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box
}
a:link, a:visited {color: #231815; text-decoration: none}
a:hover {color: #de0010; text-decoration: none}
img {
	max-width: 100%;
	max-height: 100%;
	height: auto !important;
	display: inline-block;
	vertical-align: middle;
	line-height: 1
}
button {border: none; padding: .25rem 1rem; cursor: pointer}
a:hover, a:focus, button:hover, button:focus, li:hover, li:focus {
	-webkit-transition: all 0.30s ease-in-out;
	-moz-transition: all 0.30s ease-in-out;
	-ms-transition: all 0.30s ease-in-out;
	-o-transition: all 0.30s ease-in-out;
	outline: none
}

/*@todo: font setting*/
h1, h2, h3, h4, p, ul, li, dl, dt, dd, button, input, textarea, select, option {font-family: 'Roboto', 'Noto Sans Japanese', 'Noto Sans TC', MS UI Gothic, MS Gothic, sans-serif}
h1 {font-size: 1.73rem}
h2 {font-size: 1.5rem}
p, li {font-size: 1rem}
li {list-style: none}
div.clearfix {clear: both}

.slide-left-right {
	text-decoration:none;
	display: inline-block
}
/* add a empty string after the elment with class .slide-left-right */
.slide-left-right:after {
	content: '';
	display: block;
	height: 2px;
	width: 0;
	background: transparent;
	transition: width .5s ease, background-color .5s ease; /* .5 seonds for changes to the width and background-color */
	-webkit-transition: width .5s ease, background-color .5s ease; /* Chrome and Safari */
	-moz-transition: width .5s ease, background-color .5s ease; /* FireFox */
}
/* Change the width and background on hover, aka sliding out */
.slide-left-right:hover:after {width: 100%; background: #de0010}

/*@todo: header*/
header {
	height: 60px;
	background: #a4020e
}
.navbar-brand {padding-top: .75rem}
.navbar-toggler {
	position: absolute;
	top: 5px
}
.navbar-toggler-icon {
	width: 40px;
	height: 40px;
	background-image: url(../images/layout/nav-bar.svg);
	background-size: 100%;
}
div.top_link {max-width: 1170px}
div.top_link>a>img {padding: .8rem .5rem .5rem}
dl.language {float: right; margin-bottom: 0; padding: 1rem 1.1rem 0}
dl.language>dd {display: inline-block; margin-left: .5rem}
dl.language>dd img {margin-right: .25rem}
dl.language>dd>a {color: #fff}
dl.language>dd>a:hover, dl.language>dd>a:focus {color: #0a0a0a}

/*@todo: nav*/
.navbar-light .navbar-toggler {border: none}
.navbar-light .navbar-toggler-icon {
	width: 40px;
	height: 40px;
	background-image: url(../images/layout/nav-bar.svg);
	background-size: 100%;
}

.bg-faded {background: url(../images/layout/bg-header.png) left bottom repeat-x; padding: 0}

div.navbar-collapse {max-width: 1110px}
.navbar-nav>li.nav-item {border-left: #5f5f5f 1px solid; padding: 0}
.navbar-nav>li.nav-item:first-child {border-left: none}
.navbar-light .navbar-nav .nav-link {
	font-size: 1.2rem;
	color: #fff;
	text-shadow: rgba(0, 0, 0, .5) 1px 1px 2px;
	padding: .8rem 2rem .7rem
}
.navbar-light .navbar-nav .nav-link:hover {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1a1a1a+0,696969+100 */
	background: rgb(26,26,26); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(26,26,26,1) 0%, rgba(105,105,105,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(26,26,26,1) 0%,rgba(105,105,105,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(26,26,26,1) 0%,rgba(105,105,105,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a1a1a', endColorstr='#696969',GradientType=0 ); /* IE6-9 */
	border-bottom: #ba0102 5px solid;
	color: #fff;
	padding: .8rem 2rem .37rem
}

/*todo: moblie nav*/
div.slidebars {background: rgba(0, 0, 0, .9); padding: 1.5rem}
div.slidebars dl dd {
	font-size: 1.65rem;
	color: #fff;
	margin-bottom: 1.25rem
}
div.slidebars dl dd:first-child {text-align: right}
div.slidebars dl dd>button {background: none}
div.slidebars dl dd>a {color: #fff}
div.slidebars dl.mlanguage {margin-top: 3rem}
div.slidebars dl.mlanguage dd {
	width: 31.8452%;
	display: inline-block
}
div.slidebars dl.mlanguage dd>a>img {width: 100%}

/*note: footer*/
footer {border-top: #1b1a1a 1px solid; margin-top: 3rem}

div.flink {color: #fff; padding: .75rem}
div.flink dl, div.flink dl dd {text-align: center; margin-bottom: 0}
div.flink dl dd {
	display: inline-block;
	width: 145px;
	border-left: #5f5f5f 1px solid;
	padding: .75rem 0
}
div.flink dl dd:last-child {border-right: #5f5f5f 1px solid}
div.flink a {color: #fff}
div.flink a:hover {color: #de0010}
div.add_info {
	background: url(../images/layout/bg-flink.gif) left top repeat;
	padding: 2rem
}
div.add_info>dl>dd {color: #fff; text-align: center}
div.add_info>dl>dd a {color: #fff !important}
div.add_info>dl>dd>span {padding: 0 1rem}

/*note: copyright*/
div.copyright { 
	color: #fff;
	text-align: center;
	margin-top: 1rem;
	padding: .5rem 0
}

/*@note: section content*/
section.container {max-width: 1170px; width: auto; padding: 0}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	body {font-size: 15px}
	p, li {font-size: 15px}
	.navbar-light .navbar-nav .nav-link {max-height: 49.55px; font-size: 18px}
	div.skdslider {margin: 30px 0}
	div.extra>select {font-size: 18px}
}