@charset "utf-8";
/*google web fonts*/
@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: 15px}
body {
    height: 100%;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0
}
* { /*使用邊框不影響 div or table 本身寬度設定*/
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
input, select, textarea {
    width: 100%;
    background: #fff;
    border: #ccc 1px solid;
    color: #333;
    padding-left: .5rem;
    padding-right: .5rem
}
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: initial !important}

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

a:link, a:visited {color: #051636; text-decoration: none; padding: 0}
a:hover {color: #bd4802; text-decoration: none}
a, button, figure, figcaption {
    -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
}

.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, h5, p, ul, li, dl, dt, dd, button, input, textarea, select, option, a, div {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}
}

section.container {max-width: 1140px}

header {max-width: 1140px; padding: 1rem}

/*nav*/
nav.bg-light {
    background: #103a68; /* Old browsers */
    background: -moz-linear-gradient(top, #103a68 0%, #051637 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #103a68 0%,#051637 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #103a68 0%,#051637 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#103a68', endColorstr='#051637',GradientType=0 ); /* IE6-9 */
    border: #151c27 1px solid;
    box-shadow: rgba(0, 0, 0, 0.35) 0 1px 3px inset
}
div.navbar-collapse {}
.navbar-nav {max-width: 1140px}
.navbar-light .navbar-nav .nav-link {
    font-size: 1.4rem;
    color: #fff;
    text-align: center;
    text-shadow: rgba(0, 0, 0, 0.29) 1px 1px 3px;
    padding: 1rem 0
}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link, .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    background: #ad2d01; /* Old browsers */
    background: -moz-linear-gradient(top, #ad2d01 0%, #ca5d03 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ad2d01 0%,#ca5d03 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ad2d01 0%,#ca5d03 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ad2d01', endColorstr='#ca5d03',GradientType=0 ); /* IE6-9 */
    box-shadow: rgba(0, 0, 0, 0.35) 0 1px 3px inset;
    color: #fff
}
.navbar-light .navbar-toggler {color: #fff; border-color: #fff}

/*moblie nav*/
div.slidebars {
    background: rgba(3, 121, 191, 0.89);
    box-shadow: rgba(0, 0, 0, .15) 1px 0 5px;
    padding: 1rem
}
div.closeBtn {text-align: right}
div.closeBtn>button {}
div.closeBtn>button>i {color: #fff}

dl.navMobile {margin-top: 1.5rem}
dl.navMobile>dd {border-bottom: #fff 1px solid; text-align: center}
dl.navMobile>dd>a {
    font-size: 2rem;
    color: #fff
}
dl.navMobile>dd>a:hover, dl.navMobile>dd>a:focus {color: #ad2d01}

/*footer*/
footer {
    background: #242424; /* Old browsers */
    background: -moz-linear-gradient(top, #242424 0%, #000000 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #242424 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #242424 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#242424', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
    font-weight: 300
}
dl.contactInfo {margin-bottom: 0}
dl.contactInfo>dd {color: #fff; margin-bottom: 0}

div.copyright {color: #fff; text-align: center}