body {
    margin-top: 0px; /* Required margin for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
     font-family: 'Segoe UI', 'Open Sans', "微軟正黑體", "Microsoft JhengHei", 'Lucida Grande', 'Lucida Sans Unicode', Arial, Helvetica, Verdana, sans-serif;
    font-size: 16px;
    color: #000;
    /*background: #ffffff;ffee8c aace37*/
	background-image: url(../img/bg.png);
    background-repeat: repeat
}
a img {
    border: none;
    outline: none;
}
.red {
    color: #ff0000
}
.blue {
    color: #0000ff
}
.black {
    color: #000000
}
a {
    color: #ffffff;
    text-decoration: none
}
a.active, a:active, a:focus, a:hover {
    color: #ffffff;
    text-decoration: none
}
.red-bg {
    background-color: #ff0000;
    color: #fff;
    padding: 2px
}
.image-bg-fluid-height, .image-bg-fixed-height {
    text-align: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
.image-bg-fluid-height {
    background-image : url(../img/bg2.gif),  url(../img/bg.png),  url(../img/bg.gif);
    background-repeat : repeat-x,  no-repeat,  repeat;
    background-position: bottom center,  bottom center,  left;
    background-size: auto;
    /*background-color:#fdd303;*/
    padding: 20px 0;
}
.image-bg-fixed-height {
    background: url('http://lorempixel.com/g/1920/500/') no-repeat center center scroll;
    height: 450px;
}
.img-center {
    margin: 0 auto;
}
.img-width {
    width: 60%;
    margin: 5px 0px 5px 0px;
	-webkit-animation: bounce 2s infinite;
    animation: bounce 2s infinite;
}
.img-title {
    width: 70%;
    margin: 5px 0px 5px 0px;
}
@media (min-width: 320px) and (max-width: 991px) {
	.img-width {
    width: 50%;
    margin: 5px 0px 5px 0px;
	-webkit-animation: headShake 2s infinite;
    animation: headShake 2s infinite;
}
	.img-title {
    width: 100%;
    margin: 5px 0px 5px 0px;
}
}
.mb-20 {
    margin: 0px 0px 20px 0px;
}
.mb-30 {
    margin: 0px 0px 30px 0px;
}
.mt-20 {
    margin: 20px 0px 0px 0px;
}
.btn-lg {
    padding: 10px 16px;
    font-size: 24px;
    line-height: 1.3333333;
    border-radius: 6px;
    width: 100%;
}
.logo {
    z-index: 999
}
section {
    padding: 0px 0;
}
.apply {
    padding: 50px 0;
    background: #a2f3ff;
    font-size: 1.2em;
}
.section-heading {
    margin: 10px 0;
    font-size: 28px;
    font-family: 微軟正黑體;
    font-weight: bold;
    text-shadow: rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px, rgb(0, 0, 0) 0px 0px 3px;
    font-weight: bold;
    color: #fff;
}
.section-lead {
    margin: 30px 0;
}
.section-paragraph {
    margin: 30px 0;
}
footer {
    padding: 20px;
    background-position: left top;
    background-repeat: repeat-x;
    background-color: #000000;
    color: #fff;
    font-size: 17px;
    font-weight: normal;
    text-align: center;
    margin: 0;
}

@media(max-width:768px) {
.section-heading {
    font-size: 2em;
}
}
#confetti {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
table {
    /*border: 3px solid #000!important;*/
    background-color: #fff;
    margin-bottom: 0px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #000
}
.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #fcffcb!important;
}
#no-more-tables {
    padding: 10px 80px
}
table th {
    background: #000;
    color: #fff;
    text-align: center;
}
table td {
    text-align: center
}
.table-bordered>tbody>tr>td, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>td, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
    border: 0px solid #ddd;
    padding: 10px
}
table td:nth-child(3), table td:nth-child(4), table td:nth-child(5) {
    color: #ff0000
}
table caption {
    background-color: #00a0e9;
    color: #fff;
    border: 3px solid #000!important;
    text-align: center;
}

@media only screen and (max-width: 800px) {
table {
    border: 0px solid #fff!important;
    margin: 0px;
    font-size: 24px;
}
#no-more-tables {
    padding: 0px
}
/* Force table to not be like tables anymore */
#no-more-tables table,  #no-more-tables thead,  #no-more-tables tbody,  #no-more-tables th,  #no-more-tables td,  #no-more-tables tr {
    display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#no-more-tables thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
#no-more-tables tr {
    border: 3px solid #fff;
    border-bottom: 3px solid #000
}
#no-more-tables td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #999;
    position: relative;
    padding-left: 45%;
    white-space: normal;
    height: auto;
    text-align: left;
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #000;
    display: block;
}
#no-more-tables td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 0px;
    width: 40%;
    height: auto;
    padding-right: 0px;
    float: left;
    text-align: left;
    font-weight: bold;
    padding-top: 4px;
    padding-bottom: 10px;
    padding-left: 10px;
    color: #000;
    word-break: break-all;
    display: block;
}
#no-more-tables table td:nth-child(3), #no-more-tables table td:nth-child(4), #no-more-tables table td:nth-child(5) {
    color: #ff0000
}
table caption {
    display: block;
}
/*
	Label the data
	*/
#no-more-tables td:before {
    content: attr(data-title);
}
.numeric {
    display: block!important;
    _height: 80px;
    min-height: 80px
}
}
.custom-counter {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.custom-counter li {
    counter-increment: step-counter;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: bold
}
.custom-counter li::before {
    content: counter(step-counter);
    margin-right: 10px;
    font-size: 1.2em;
    background-color: #000;
    color: #fff;
    font-weight: bold;
    text-align: center;
    width: 34px;
    height: 34px;
    display: inline-block;
    border-radius: 50px;
    font-family: Georgia, "Times New Roman", Times, serif;
    -moz-box-shadow: 2px 2px 0px #fff;
    -webkit-box-shadow: 2px 2px 0px #fff;
    box-shadow: 2px 2px 0px #fff;
}
/*apply*/
i {
    margin-top: 12px;
    margin-bottom: 14px;
}
.button {
    position: relative;
    display: inline-block;
    color: #fff;
    text-align: center;
    outline: none;
    text-shadow: -1px 2px 0 rgba(26, 26, 26, 0.5);
    background: #29a739;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -moz-box-shadow: inset 0 -1px 1px #10701c, 0 10px 0 #065910, 0 10px 15px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: inset 0 -1px 1px #10701c, 0 10px 0 #065910, 0 10px 15px rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 -1px 1px #10701c, 0 10px 0 #065910, 0 10px 15px rgba(0, 0, 0, 0.35);
    -moz-transition: all 100ms ease-in-out;
    -o-transition: all 100ms ease-in-out;
    -webkit-transition: all 100ms ease-in-out;
    transition: all 100ms ease-in-out;
    /* Pass any colors you like, I hope the mixin will handle it */
    padding: 10px 20px;
    font-size: 22px;
    margin-right: 20px;
    font-weight: bold;
    text-decoration: none;
    width: 60px;
}
.button:hover {
    text-shadow: 0 0 5px rgba(241, 241, 241, 0.65), -1px -1px 0 rgba(26, 26, 26, 0.5);
    background: #14af28;
    -moz-box-shadow: inset 0 -1px 1px #107d1e, 0 8px 0 #107d1e, 0 10px 15px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: inset 0 -1px 1px #107d1e, 0 8px 0 #107d1e, 0 10px 15px rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 -1px 1px #107d1e, 0 8px 0 #107d1e, 0 10px 15px rgba(0, 0, 0, 0.35);
    text-decoration: none;
    color: #fff
}
.button:active, .button:focus {
    top: 4px;
    -moz-box-shadow: inset 0 -1px 1px #107d1e, 0 5px 0 #107d1e, 0 6px 8px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: inset 0 -1px 1px #107d1e, 0 5px 0 #107d1e, 0 6px 8px rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 -1px 1px #107d1e, 0 5px 0 #107d1e, 0 6px 8px rgba(0, 0, 0, 0.35);
    text-decoration: none;
    color: #fff
}
.nav-tabs {
    border-bottom: 5px solid #DDD;
    font-size: 1.4em
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    border-width: 0;
}
.nav-tabs > li > a {
    border: none;
    color: #000;
}
.nav-tabs > li.active > a, .nav-tabs > li > a:hover {
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.nav-tabs > li > a::after {
    content: "";
    background: #000;
    height: 5px;
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: -4px;
    transition: all 250ms ease 0s;
    transform: scale(0);
}
.nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after {
    transform: scale(1);
}
.nav-tabs > li> a:hover {
    background-color: #f6a901
}
.tab-pane {
    padding: 0px;
}
.nav-tabs>li {
    float: left;
    margin-bottom: -1px;
    width: 50%;
    -webkit-border-top-left-radius: 15px;
    -webkit-border-top-right-radius: 15px;
    -moz-border-radius-topleft: 15px;
    -moz-border-radius-topright: 15px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    -moz-box-shadow: 0px -4px 8px rgba(0,0,0,.5);
    -webkit-box-shadow: 0px -4px 8px rgba(0,0,0,.5);
    box-shadow: 0px -4px 8px rgba(0,0,0,.3);
    background-color: #f6a901
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #000;
    cursor: default;
    background-color: #f6e201;
    border-bottom-color: transparent;
}
.tab-content {
    padding: 0px;
    background: #fff
}
.card {
    background: #fff none repeat scroll 0% 0%;
    margin-bottom: 0px;
}
hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 3px dotted #000;
}
.scroll-top-wrapper {
    position: fixed;
    opacity: 1;
    text-align: center;
    z-index: 99999999;
    background-color: #000;
    color: #ffff00;
    width: 120px;
    height: 60px;
    line-height: 60px;
    right: 10px;
    top: 330px;
    padding-top: 2px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover {
    background-color: #fff;
    color: #000
}
.scroll-top-wrapper.show {
    visibility: visible;
    cursor: pointer;
    opacity: 1.0;
}
.scroll-top-wrapper i.fa {
    line-height: inherit;
}
.alert-labeled {
    padding: 0px;
}
.alert-labeled-row {
    display: table-row;
    padding: 0px;
}
.alert-labelled-cell {
    padding: 10px;
    display: table-cell;
    vertical-align: middle;
}
.alert-labeled .close > * {
    padding: 10px;
    display: table-cell;
    vertical-align: middle;
}
.alert-label {
    vertical-align: middle;
    background: #ff0000;
    width: auto;
    color: #fff;
    padding: 10px 15px;
    height: 100%;
    font-size: 1.1em;
}
.alert-info {
    color: #ff0000;
    background-color: #fff;
    border-color: #fff;
}
/*ad*/
#abgne_float_ad {
    display: none;
    position: absolute;
}
#abgne_float_ad img {
    border: none;
}
div.bigDiv {
    height: 3000px;
}
.social {
    display: block;
    width: 100%;
    text-align: right;
    clear: both;
    position: relative;
    background-color: #00aacf;
    padding: 10px;
    margin-left: 0px;
}
.social img {
    padding: 0px;
    height: 45px
}
.social a {
    margin-left: 3px;
    color: #fff
}
/*video*/
.video-container {
    margin-left: 20px;
    margin-right: 20px;
    padding: 20px 0px 20px 0px;
}
.bg-w {
    padding: 0px 0;
	background-color: #ffffff;
    /*background-image: url(../img/bg.jpg)*/
}
#Top {
    display: none;
    position: absolute;
    z-index: 9;
}
.scrollToTop {
    bottom: 105px;
    /*display: none;*/
    font-size: 35px;
    font-weight: bold;
    border-radius: 10px;
    height: 50px;
    /*position: fixed;*/
    right: 10px;
    text-align: center;
    text-decoration: none;
    width: 60px;
    color: #3e4cbd;
    background-color: transparent;
    padding: 0px 16px 0px 16px;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s
}
.scrollToTop:hover, .scrollToTop:focus {
    text-decoration: none;
    outline: none;
    color: #000;/*e17342*/
}
.resp-container {
    position: relative;
    overflow: hidden;
}
.traffic-1 {
    font-size: 20px;
    font-weight: bold;
    color: #1231C1;
    line-height: 2em
}
.traffic-1:before {
    content: url(../img/icon1.png);
    display: inline;
    margin-right: 2px;
    vertical-align: sub;
}
.traffic-2 {
    font-size: 20px;
    font-weight: bold;
    color: #1231C1;
    line-height: 2em
}
.traffic-2:before {
    content: url(../img/icon2.png);
    display: inline;
    margin-right: 2px;
    vertical-align: sub;
}
/*page2 form*/
.form {
    margin: 0px;
    padding: 10px 24px 10px 24px;
    line-height: 1em;
    font-size: 1.1em;
    /*background-image: url(../img/bg2.jpg);
    background-repeat: repeat;*/
	background-color: #ffffff;
/*    -webkit-border-top-left-radius: 20px;
    -webkit-border-top-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-topright: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;*/
}
form > div {
    clear: both;
    overflow: hidden;
    padding: 0px;
    margin: 0 0 10px 0;
}
form > div > fieldset > div > div {
    margin: 0 0 5px 0;
}
form > div > label, legend {
    width: 14%;
    float: left;
    font-weight: normal;
}
form > div > div, form > div > fieldset > div {
    width: 82%;
    float: right;
}
form > div > fieldset label {
    font-weight: bold
}
h3 {
    color: #404dbd;
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 20px;/*#e8457e*/
}
@media screen and (max-width:420px) {
h3 {
    color: #e83c17;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 0px;/*#e8457e*/
	margin-top: 0px;
}
	}
fieldset {
    border: 0;
    padding: 0;
}
input[type=text], input[type=email], input[type=url], input[type=password], textarea {
    width: 100%;
    border: 2px solid #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 10px;
}
select {
    width: 100%;
    border: 2px solid #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height: 44px;
    padding: 5px;
    margin: 0px
}
input[type=text], input[type=email], input[type=url], input[type=password] {
    width: 50%;
    height: 35px;
    padding: 0px 5px
}
input[type=text]:focus, input[type=email]:focus, input[type=url]:focus, input[type=password]:focus, textarea:focus, .select:focus {
    outline: 0;
    border: 2px solid #ff0000;
}
.form-inline {
    display: contents;
    padding-left: 0;
    margin-left: 20px
}
.basic {
    width: 50%!important
}
.small {
    width: 15%!important
}
.space {
    padding: 10px;
    background: #f4f4f4;
    font-size: 1.1em;
    border: 2px solid #d4d4d4
}
input[type=checkbox], input[type=radio] {
    margin: 10px 0 0;
    margin-top: 1px\9;
    line-height: normal;
}

@media screen and (max-width:767px) {
.form {
    margin: 0px;
    line-height: 2em;
}
form > div {
    margin: 0 15px 15px 0;
}
form > div > label, legend {
    width: 100%;
    float: none;
    margin: 0 0 5px 0;
}
form > div > div, form > div > fieldset > div {
    width: 100%;
    float: none;
}
input[type=text], input[type=email], input[type=url], input[type=password], textarea, select {
    width: 90%;
    margin-bottom: 10px;
}
form header div {
    font-size: 18px;
    color: #02469b;
    font-weight: bold
}
.small {
    width: 35%!important
}
.basic {
    width: 70%!important
}
.video-title {
    position: absolute;
    width: 50%;
    top: -30px;
    left: 6px;
    z-index: 3
}
}

@media screen and (max-width:640px) {
.b-btn {
    display: block
}
.topline {
    position: absolute;
    left: -242px;
    top: -50px;
    width: 150%;
}
.footline {
    position: absolute;
    left: 0px;
    bottom: -161px;
    width: 110%;
}
}


th {
    background-color: #675791;/*#00a8ff*/
    color: #fff!important;
    padding: 10px;
    text-align: center;
    border: 1px solid #fff;
	font-size: 20px;
    padding: 8px 5px 8px 5px;
    vertical-align: middle;
    font-weight: normal;
	line-height: 34px;
}
td {
    padding: 10px;
    border: 1px solid #ddd;
	font-weight: normal;
	font-size: 18px;
	line-height: 34px;
}
@media screen and (max-width:420px) {
th {
    background-color: #675791;/*#00a8ff*/
    color: #fff!important;
    padding: 10px;
    text-align: center;
    border: 1px solid #fff;
	font-size: 16px;
    padding: 8px 5px 8px 5px;
    vertical-align: middle;
    font-weight: normal;
	line-height: 34px;
}
td {
    padding: 10px;
    border: 1px solid #ddd;
	font-weight: normal;
	font-size: 15px;
	line-height: 34px;
}
	}
table a {
    color: #675791;
    border-bottom: 1px solid #675791;
}
table a:active {
    color: #675791;
	border-bottom: 1px solid #675791;
}
table a:focus {
    color: #852c24;
	border-bottom: 1px solid #852c24;
}
table a:hover {
    color: #852c24;
    border-bottom: 1px solid #852c24;
}
.tb-hover table tr:hover {
    background-color: #e6e5e1!important;
}
table.dataTable tbody td {
    padding: 8px 10px;
}
table.dataTable thead th, table.dataTable thead td {
    padding: 5px 25px 5px 10px;
}
.tb-hover .table-vertical>tbody>tr:nth-of-type(odd) {
    background: #E7F2FA;/*#f9f9f9*/
}
.table-vertical>tbody {
    background: #fff;
}
.table-vertical>thead>tr>th {
    color: #000;
    font-weight: bold;
}
.table-vertical>tbody>tr>td, .table-vertical>thead>tr>th {
    border-top: 1px solid #ddd;
    vertical-align: middle;
}
.first-head {
	color: #fff;
    background: #675791;/*#f9f9f9 #E7F2FA*/
}
.first-title {
    background: #f8fcc0;/*#f9f9f9 #E7F2FA*/
}
.first-name {
    background: #ececec;/*#f9f9f9 #E7F2FA #f8fcc0*/
}
.first-second {
    background: #E7F2FA;/*#f9f9f9 #E7F2FA #f8fcc0*/
}
.first-width{
    width: 25%;	
	text-align: left;
}
.tb-select {
    width: 20%;
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (max-width: 991px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
    display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
.table-vertical thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
.table-vertical>thead>tr, .table-vertical>tbody>tr {
    border: 1px solid #ccc;
}
.table-vertical>thead>tr>td, .table-vertical>tbody>tr>td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #ddd;
}
.table-vertical>tbody>tr>td:before {
    /* Now like a table header */

    padding-right: 10px;
    white-space: nowrap;
}
.table-vertical>tbody>tr>td, .table-vertical>thead>tr>th {
    text-align: left;
}
/*
	Label the data
	*/
.table-vertical>tbody>tr>td:before {
    content: attr(data-th);
    display: block;
    font-weight: bold
}
.first {
    background: #f8fcc0;/*#f9f9f9 #E7F2FA*/
}
.first-name {
    background: #ececec;/*#f9f9f9 #E7F2FA #f8fcc0*/
}
.first-width{
    width: auto;	
	text-align: left;
}
.tb-select {
    width: 100%;
}
}