/*google web fonts*/

/* @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 */

@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);/*繁中*/
@import url('https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900');
html {min-height: 100%; font-size: 16px} /*16px x 93.75% = 15px 網站字型大小預設值*/
body {
	height: 100%;
	background: url(../images/layout/bg-body.jpg) left top repeat;
    font-family: 'Roboto', 'Noto Sans TC', MS UI Gothic, MS Gothic, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	color: hsl(0, 0%, 0%);
	letter-spacing: 0
}
h1, h2, h3, h4, p, ul, li, dl, dt, dd, button, input, textarea, select, option {font-family: 'Roboto', 'Noto Sans TC', MS UI Gothic, MS Gothic, sans-serif}
* { /*使用邊框不影響 div or table 本身寬度設定*/
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box
}
a:link, a:visited {color: #000; text-decoration: none}
a:hover {color: #f00; text-decoration: none}
a, button, ul, li, dl, dt, dd, div, p, img, input, select, textarea {
	-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
}

input, select, textarea {
	width: 100%;
	background: #fff;
	border: #ccc 1px solid;
	color: #333;
	padding: .7rem 1rem
}
input:hover, select:hover, textarea:hover {
	border: #999 1px solid;
	outline: none
}
input:focus, select:focus, textarea:focus {
	border: #f00 1px solid;
	outline: none
}
input::placeholder {font-weight: 300; color: #999}

input[type="checkbox"], input[type="radio"] {width: inherit !important}

button {background: none}
button:hover {background: none}

.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: #f90}

img {
	width: 100%;
	max-width: 100%;
	height: auto!important;
	border: none
}

*[onclick], button {cursor: pointer}
button {border: none; padding: .25rem 1rem}

/*font setting*/
h1, h2, h3, h4, p, ul, li, dl, dt, dd, button, input, textarea, select, option {font-family: 'Roboto', '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}

/*goTOP use only*/
.cd-top {
	display: inline-block;
	height: 40px;
	width: 40px;
	position: fixed;
	bottom: 40px;
	right: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	/* image replacement properties */
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: hsla(0, 0%, 0%, .75) /*改變按鈕顏色*/ url(../images/layout/cd-top-arrow.svg) no-repeat center 50%; 
	border-radius: .5rem;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity .3s 0s, visibility 0s .3s;
	-moz-transition: opacity .3s 0s, visibility 0s .3s;
	transition: opacity .3s 0s, visibility 0s .3s;
	z-index: 9999
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
	-webkit-transition: opacity .3s 0s, visibility 0s 0s;
	-moz-transition: opacity .3s 0s, visibility 0s 0s;
	transition: opacity .3s 0s, visibility 0s 0s
}
.cd-top.cd-is-visible {visibility: visible; opacity: .75}
/* the button becomes visible */
/* .cd-top.cd-fade-out {opacity: .25} */
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
.cd-top:hover {background: hsla(0, 0%, 0%, 1) /*改變按鈕顏色*/ url(../images/layout/cd-top-arrow.svg) no-repeat center 50%} /*改變按鈕顏色*/
@media only screen and (min-width: 1024px) {
	.cd-top { 
		height: 60px;
		width: 60px;
		right: 30px;
		bottom: 30px
	}
}
@media only screen and (min-width: 768px) {
	.cd-top {right: 1.5rem; bottom: 6.5rem}
}

/*header*/
div.header {margin: 0; padding: 1rem}
div.logo {}
img.mainLogo {width: 20% !important}
img.subLogo {width: 50% !important}
div.freeCall {text-align: center; padding-top: 3.5rem}
div.freeCallTitle {
    background: #00a0e9;
    border-radius: .5rem;
    font-size: 1.5rem;
    font-weight: 400;
    color: #fff;
    text-align: center;
    padding: .35rem .5rem
}
div.freeCallNo {
    font-size: 2.5rem;
    font-weight: 600;
    color: #f00
}

/*nav*/
.bg-faded {background: #005293; border-top: #00a0e9 3px solid; padding: .5rem 2rem}

/*logo*/
.navbar-light .navbar-brand img {width: 400px !important; max-width: 380px !important}

ul.navbar-nav {}
ul.navbar-nav>li.nav-item {
    background: url(../images/layout/icon-nav.png) left 48% no-repeat;
	font-size: 1.25rem;
    text-shadow: rgba(72, 72, 72, 0.5) 1px 1px 2px;
	text-align: center;
	padding: .75rem 2rem .75rem 1.75rem
}
ul.navbar-nav>li.nav-item a {color: #fff}
ul.navbar-nav>li.nav-item a:hover, ul.navbar-nav>li.nav-item[active] a  {color: #00a0e9}
.dropdown-toggle::after {display: none}

.nav-link, .dropdown-toggle {padding: 0}
.navbar-light .navbar-nav .nav-link {color: #fff}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {color: #00a0e9}

.navbar-toggleable-md .navbar-nav .nav-link {padding: 0}
.show>.dropdown-menu {background: #005293}


/*navbar right*/
ul.navbarRight {}
ul.navbarRight>li.nav-item {
	font-size: .95rem;
	padding: .5rem
}
ul.navbarRight>li.nav-item>i {font-size: 1.2rem; margin-right: .25rem}



/*moblie nav*/
div.slidebars {
	background: rgba(0, 82, 147, 0.9);
	box-shadow: rgba(0, 0, 0, .15) 1px 0 5px;
	padding: 1rem
}
div.closeBtn {padding: 1rem 0; text-align: right}
div.closeBtn>button {background: none}
div.closeBtn>button>img {width: auto !important}

/*footer*/
footer {
    background: #282828;
	border-top: #ccc 1px solid;
	padding-top: 2rem
}
footer p, footer dl, footer dl dd {margin-bottom: 0}
dl.footer {max-width: 1110px}
dl.footer>dd {color: #fff; margin-bottom: 1rem}
dl.footer>dd>p {display: inline-block; margin-bottom: 0; padding-right: 1rem}
dl.footer>dd>img {width: auto !important; max-width: 300px !important}
dl.footer>dd:last-child {text-align: right}

/*copyright*/
div.copyright {
	font-size: 0.9333333333333333rem;
    color: #fff;
    text-align: center;
	margin-top: 1.5rem;
    padding: .5rem 0
}

/*section content*/
section.container {}