/*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');
@import url('https://fonts.googleapis.com/css?family=Crimson+Text');
html {min-height: 100%; font-size: 15px}
body {
    height: 100%;
    background: url(../images/layout/bg-body.png) left top repeat-x #ebf0f0;
    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: #0f4ac1; text-decoration: none; padding: 0}
a:hover {color: #f00; 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 {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 {
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.5) 0 0 1rem
}
section.col-lg {max-width: 1200px !important}

header {background: #fff}
header>div.logoTop {max-width: 95%}
header>div.logoTop>div.logo>a {font-size: 2.25rem; font-weight: 400; letter-spacing: .05rem}

dl.telTop {}
dl.telTop>dd {
    font-size: 1.3rem;
    color: #f00;
    text-align: right;
    margin-bottom: 0
}
dl.telTop>dd>span {color: #064bc7}
dl.telTop>dd:first-child {font-size: 1rem; color: #999}

/*nav*/
.bg-light {background: #2d86ca !important}

/*logo*/
.navbar-light .navbar-brand {font-size: 2.25rem; font-weight: 400}
a.logoM {color: #fff !important}

/*nav*/
li.nav-item {border-left: #fff 1px solid; text-align: center; padding: 0 3rem}
li.nav-item>a {
    font-size: 1.3rem;
    color: #fff
}
li.nav-item>a>p {font-size: .85rem; line-height: 1rem; margin-bottom: 0}
li.nav-item:last-child {border-right: #fff 1px solid}


/*moblie nav*/
div.slidebars {
    background: rgba(3, 121, 191, 0.89);
    box-shadow: rgba(0, 0, 0, .15) 1px 0 5px;
    padding: 1rem
}
div.mNacClose {text-align: right}
ul.mNav>li.nav-item {text-align: center; border-right: #fff 1px solid; margin-bottom: 1.5rem}
ul.mNav>li.nav-item>a {}

dl.imgAD {}
dl.imgAD>dd {}
dl.imgAD>dd>img {margin-bottom: .5rem}
dl.imgAD>dd>p {
	text-align: center;
	line-height: 1rem;
	margin-bottom: 0
}
dl.imgAD>dd>p:last-child {font-size: .75rem; text-transform: uppercase}

/*footer*/
footer {
    background: #cbcbcb; /* Old browsers */
    background: -moz-linear-gradient(top, #cbcbcb 0%, #ececec 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #cbcbcb 0%,#ececec 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #cbcbcb 0%,#ececec 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbcbcb', endColorstr='#ececec',GradientType=0 ); /* IE6-9 */
}

dl.footerInfo {}
dl.footerInfo p {font-weight: 300; letter-spacing: .05rem; margin-bottom: .5rem}

div.copyright {
    background: #2f5698;
    font-weight: 200;
    color: #fff;
    text-align: center;
    letter-spacing: .05rem
}

div.bgContainer {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#bbe3d5+0,ffffff+5,ffffff+100 */
background: #bbe3d5; /* Old browsers */
background: -moz-linear-gradient(top, #bbe3d5 0%, #ffffff 5%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #bbe3d5 0%,#ffffff 5%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #bbe3d5 0%,#ffffff 5%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbe3d5', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}