@charset "utf-8";
/* CSS Document */
a:-webkit-any-link {
    text-decoration:none;
}
.hr-line-dashed {
    border-top: 1px dashed #ddd;
    color: #ffffff;
    background-color: #ffffff;
    height: 1px;
    margin: 10px 0;
}
.hr-line-solid {
    border-top: 1px solid #eee;
    color: #ffffff;
    background-color: #ffffff;
    height: 1px;
    margin: 10px 0;
}
.container-380 {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 768px) {
    .container-380 {
        width: 380px;
    }
}

@media (min-width: 992px) {
    .container-380 {
        width: 380px;
    }
}

@media (min-width: 1200px) {
    .container-380 {
        width: 380px;
    }
}

/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
    .m-none {
        display: none;
    }
}
.card-row {
    clear: both;
    overflow: hidden;
}
.card-row .card-left {
    float: left;
    width: 50%;
    background-color: #090;
    text-align: left;
}
.card-row .card-right {
    float: right;
    width: 30%;
    background-color: #f60;
    text-align: right;
}
.card-row .card-right span {
    margin-right: 10px;
}
.card-row .card-right span:last-child {
    margin-right: 0;
}
/*font-size*/
.font-xs {
    font-size: 13px;
}
.font-sm {
    font-size: 14px;
}
.font-md {
    font-size: 16px;
}
.font-lg {
    font-size: 18px;
}
.font-weight {
    font-weight: 400;
}
.btn-xlg {
    padding: 15px 15px;
    font-size: 18px;
}
.btn-sm {
    padding: 6px 10px;
}
/*nav*/
/*.navbar-brand {
    float: left;
    height: 50px;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
}logo或品牌*/
.navbar-default .navbar-nav > li > a {
    position: relative;
}
.navbar-default .navbar-nav > li > a > span.badge {
    position: absolute;
    top: 5px;
    right: 0;
    z-index: 9;
}
.nav > li > span.id {
    position: relative;
    display: block;
    padding: 0px 15px;
    color: #a31f34;
    border-right: 1px dotted #d1d1d1;
}
/*button*/
.btn-ptb8 {
    display: inline-block;
    padding: 8px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.btn-black {
    color: #fafafa;
    background-color: #00b27f;
    border-color: #00b27f;
}
.btn-black:hover, .btn-black:focus, .btn-black.focus, .btn-black:active, .btn-black.active, .open > .dropdown-toggle.btn-black {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
.btn-black:active, .btn-black.active, .open > .dropdown-toggle.btn-black {
    background-image: none;
}
.btn-fb {
    color: #fff;
    background-color: #3b5998;
    border-color: #3b5998;
}
.btn-fb:hover, .btn-fb:focus, .btn-fb.focus, .btn-fb:active, .btn-fb.active, .open > .dropdown-toggle.btn-fb {
    color: #fff;
    background-color: #355089;
    border-color: #355089;
}
.btn-fb:active, .btn-fb.active, .open > .dropdown-toggle.btn-fb {
    background-image: none;
}
.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
    color: #333;
    background-color: #e6e6e6;
    border-color: #adadad;
}
.btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
    background-image: none;
}
.btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #286090;
    border-color: #204d74;
}
.btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
    background-image: none;
}
.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border: none;
    background: linear-gradient(0deg, rgba(0, 175, 215, 1)16%, rgba(5, 126, 154, 1)100%);
    background: -moz-linear-gradient(0deg, rgba(0, 175, 215, 1)16%, rgba(5, 126, 154, 1)100%);
    background: -webkit-linear-gradient(0deg, rgba(0, 175, 215, 1)16%, rgba(5, 126, 154, 1)100%);
    background: -o-linear-gradient(0deg, rgba(0, 175, 215, 1)16%, rgba(5, 126, 154, 1)100%);
    box-shadow: 0 1px 10px rgba(0,0,0,0.1);
}
.btn-success:hover, .btn-success:focus, .btn-success.focus, .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success {
    color: #fff;
    background: rgba(0, 175, 215, 1);
}
.btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled.focus, .btn-success[disabled].focus, fieldset[disabled] .btn-success.focus {
    background-color: #d9d9d9;
    border-color: #d9d9d9;
}

.btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success {
    background-image: none;
}
.btn-success:active:hover, .btn-success.active:hover, .open > .dropdown-toggle.btn-success:hover, .btn-success:active:focus, .btn-success.active:focus, .open > .dropdown-toggle.btn-success:focus, .btn-success:active.focus, .btn-success.active.focus, .open > .dropdown-toggle.btn-success.focus {
    color: #fff;
    background: rgba(176, 143, 108, 1);
}
.btn-info {
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
}
.btn-info:hover, .btn-info:focus, .btn-info.focus, .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc;
}
.btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info {
    background-image: none;
}
.btn-warning {
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning.focus, .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning {
    color: #fff;
    background-color: #ec971f;
    border-color: #d58512;
}
.btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning {
    background-image: none;
}
.btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger.focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
    color: #fff;
    background-color: #c9302c;
    border-color: #ac2925;
}
.btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger {
    background-image: none;
}
.btn-primary-outline {
    color: #2e6da4;
    background-color: #fff;
    border-color: #2e6da4;
}
.btn-primary-outline:hover, .btn-primary-outline:focus, .btn-primary-outline.focus, .btn-primary-outline:active, .btn-primary-outline.active, .open > .dropdown-toggle.btn-primary-outline {
    color: #fff;
    background-color: #286090;
    border-color: #204d74;
}
.btn-primary-outline:active, .btn-primary-outline.active, .open > .dropdown-toggle.btn-primary-outline {
    background-image: none;
}
.btn-success-outline {
    color: rgba(148, 117, 81, 1);
    background-color: #fff;
    border-color: rgba(148, 117, 81, 1);
}
.btn-success-outline:hover, .btn-success-outline:focus, .btn-success-outline.focus, .btn-success-outline:active, .btn-success-outline.active, .open > .dropdown-toggle.btn-success-outline {
    color: #fff;
    background-color: #5cb85c;
    background: linear-gradient(0deg, rgba(148, 117, 81, 1)16%, rgba(176, 143, 108, 1)100%);
    background: -moz-linear-gradient(0deg, rgba(148, 117, 81, 1)16%, rgba(176, 143, 108, 1)100%);
    background: -webkit-linear-gradient(0deg, rgba(148, 117, 81, 1)16%, rgba(176, 143, 108, 1)100%);
    background: -o-linear-gradient(0deg, rgba(148, 117, 81, 1)16%, rgba(176, 143, 108, 1)100%);
    box-shadow: 0 1px 10px rgba(0,0,0,0.1);
}
.btn-success-outline:active, .btn-success-outline.active, .open > .dropdown-toggle.btn-success-outline {
    background-image: none;
}
.btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success {
    background-image: none;
}
.btn-success-outline:active:hover, .btn-success-outline.active:hover, .open > .dropdown-toggle.btn-success-outline:hover, .btn-success-outline:active:focus, .btn-success-outline.active:focus, .open > .dropdown-toggle.btn-success-outline:focus, .btn-success-outline:active.focus, .btn-success-outline.active.focus, .open > .dropdown-toggle.btn-success-outline.focus {
    color: #fff;
    background: rgba(176, 143, 108, 1);
}
.btn-info-outline {
    color: #46b8da;
    background-color: #fff;
    border-color: #46b8da;
}
.btn-info-outline:hover, .btn-info-outline:focus, .btn-info-outline.focus, .btn-info-outline:active, .btn-info-outline.active, .open > .dropdown-toggle.btn-info-outline {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc;
}
.btn-info-outline:active, .btn-info-outline.active, .open > .dropdown-toggle.btn-info-outline {
    background-image: none;
}
.btn-warning-outline {
    color: #eea236;
    background-color: #fff;
    border-color: #eea236;
}
.btn-warning-outline:hover, .btn-warning-outline:focus, .btn-warning-outline.focus, .btn-warning-outline:active, .btn-warning-outline.active, .open > .dropdown-toggle.btn-warning-outline {
    color: #fff;
    background-color: #ec971f;
    border-color: #d58512;
}
.btn-warning-outline:active, .btn-warning-outline.active, .open > .dropdown-toggle.btn-warning-outline {
    background-image: none;
}
.btn-danger-outline {
    color: rgba(212, 22, 40, 0.7) ;
    background-color: #fff;
    border-color: rgba(212, 22, 40, 0.7) ;
}
.btn-danger-outline:hover, .btn-danger-outline:focus, .btn-danger-outline.focus, .btn-danger-outline:active, .btn-danger-outline.active, .open > .dropdown-toggle.btn-danger-outline {
    color: #fff;
    background-color: rgba(212, 22, 40, 0.7) ;
    border-color: rgba(212, 22, 40, 0.7) ;
}
.btn-danger-outline:active, .btn-danger-outline.active, .open > .dropdown-toggle.btn-danger-outline {
    background-image: none;
}
/*bs表單*/

.nav li span.shopping-cart-number {
    background-color: #F00;
    color: #fff;
    border-radius: 30px;
    padding: 1px 8px;
    position: absolute;
    top: 3px;
    right: 3px;
    z-index: 3;
    font-size: 12px;
    text-align: center;
    border: 3px solid #fff;
}
/*單行垂直置中*/
.programs-row {
    border: 1px solid #ddd;
    padding: 0px 0 0px 0;
}
.programs-col {
    border-bottom: 1px solid #eeeeee;
    clear: both;
    overflow: hidden;
    padding: 0 0 0px 0;
    background-color: #fff;
    position: relative;
}
.programs-col button {
    position: absolute;
    top: 13px;
    right: 10px;
    z-index: 3;
}
.programs-col:last-child {
    border-bottom: 0px;
}
.programs-col h3 {
    font-size: 16px;
    padding: 0px 130px 0 30px;
    margin: 0;
    color: #f3f3f3;
    background-color: #636967;
    width: 890px;
    height: 50px;
    margin-left : 0px;
    text-indent : -18px;
    display : table;
    *position : relative;
}
.programs-col h3 a {
    display : table-cell;
    text-align: left;
    vertical-align : middle;
    text-indent : -18px;
    *display : block;
    *position : absolute;
    *top : 50%;
    *width : 100%;
    color: #f8f8f8;
}
.programs-col h3 a:hover {
    color: #fc9f5a;
    text-decoration: none;
}
.programs-col h3 a span {
    *position : relative;
    *top : -50%;
}
/*固定欄位寬度為*/
.col-fixed, .row-fixed {
    float: left;
    margin-left: 0;
    margin-right: 0;
} /*固定欄位寬度300像素*/
.col-fixed {
    background: #CCC;
    width: 300px;
}
.row-fixed {
    background: #EEE;
    width: calc(100% - 300px);
}
.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    position: relative;
}
/*標題中線效果*/

/*h2.title-row {
	margin: 20px 0 30px;
    text-align: center;
    position: relative;
}
h2.title-row span {
	background: #fff;
    padding: 0 10px;
    z-index: 1;
    position: relative;
}
h2.title-row:after {
	content: "";
    display: block;
    height: 1px;
    background: #f60;
    position: absolute;
    top: 20px;
    width: 100%;
}
*/

.icon-wrap {
    width: 128px;
    height: 128px;
    margin: 0 auto;
}
.icon-wrap + h4 {
    text-align: center;
}
.icon-wrap + h4 + p {
    text-align: center;
}
.dropdown-message {
    min-width: 350px;
    background-color: #F93;
}
.dropdown-message h4 {
    padding: 5px 8px;
    margin: 0;
}
.dropdown-message .message-update {
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 5px;
}
/*對話框*/
.mwt_border {
    width: 250px;
    height: 90px;
    text-align: center;
    background: #fff;
    position: relative;
    border: solid 1px #333;
    margin: 0px;
    padding: 15px;
}
/*箭頭右*/
.mwt_border .arrow_r_int {
    width: 0px;
    height: 0px;
    border-width: 15px;
    border-style: solid;
    border-color: transparent transparent transparent #333;
    position: absolute;
    top: 20%;
    right: -30px;
}
/*箭頭右-邊框*/
.mwt_border .arrow_r_out {
    width: 0px;
    height: 0px;
    border-width: 15px;
    border-style: solid;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    top: 20%;
    right: -29px;
}
/*箭頭左*/
.mwt_border .arrow_l_int {
    width: 0px;
    height: 0px;
    border-width: 15px;
    border-style: solid;
    border-color: transparent #333 transparent transparent;
    position: absolute;
    top: 20%;
    left: -30px;
}
/*箭頭左-邊框*/
.mwt_border .arrow_l_out {
    width: 0px;
    height: 0px;
    border-width: 15px;
    border-style: solid;
    border-color: transparent #fff transparent transparent;
    position: absolute;
    top: 20%;
    left: -29px;
}
/*箭頭上*/
.mwt_border .arrow_t_int {
    width: 0px;
    height: 0px;
    border-width: 15px;
    border-style: solid;
    border-color: transparent transparent #333 transparent;
    position: absolute;
    top: -30px;
    left: 40px;
}
/*箭頭上-邊框*/
.mwt_border .arrow_t_out {
    width: 0px;
    height: 0px;
    border-width: 15px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
    position: absolute;
    top: -29px;
    left: 40px;
}
/*箭頭下*/
.mwt_border .arrow_b_int {
    width: 0px;
    height: 0px;
    border-width: 15px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
    position: absolute;
    bottom: -30px;
    right: 50px;
}
/*箭頭下-邊框*/
.mwt_border .arrow_b_out {
    width: 0px;
    height: 0px;
    border-width: 15px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    position: absolute;
    bottom: -29px;
    right: 50px;
}
/*垂直時間軸*/
.timeline {
    list-style: none;
    padding: 20px 0 20px;
    position: relative;
}
.timeline:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 3px;
    background-color: #eeeeee;
    left: 50%;
    margin-left: -1.5px;
}
.timeline > li {
    margin-bottom: 20px;
    position: relative;
}
.timeline > li:before,  .timeline > li:after {
    content: " ";
    display: table;
}
.timeline > li:after {
    clear: both;
}
.timeline > li:before,  .timeline > li:after {
    content: " ";
    display: table;
}
.timeline > li:after {
    clear: both;
}
.timeline > li > .timeline-panel {
    width: 46%;
    float: left;
    border: 1px solid #d4d4d4;
    border-radius: 2px;
    padding: 20px;
    position: relative;
    -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}
.timeline > li > .timeline-panel:before {
    position: absolute;
    top: 26px;
    right: -15px;
    display: inline-block;
    border-top: 15px solid transparent;
    border-left: 15px solid #ccc;
    border-right: 0 solid #ccc;
    border-bottom: 15px solid transparent;
    content: " ";
}
.timeline > li > .timeline-panel:after {
    position: absolute;
    top: 27px;
    right: -14px;
    display: inline-block;
    border-top: 14px solid transparent;
    border-left: 14px solid #fff;
    border-right: 0 solid #fff;
    border-bottom: 14px solid transparent;
    content: " ";
}
.timeline > li > .timeline-badge {
    color: #fff;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    text-align: center;
    position: absolute;
    top: 16px;
    left: 50%;
    margin-left: -25px;
    background-color: #999999;
    z-index: 100;
    border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
}
.timeline > li.timeline-inverted > .timeline-panel {
    float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
}
.timeline-badge.primary {
    background-color: #2e6da4 !important;
}
.timeline-badge.success {
    background-color: #3f903f !important;
}
.timeline-badge.warning {
    background-color: #f0ad4e !important;
}
.timeline-badge.danger {
    background-color: #d9534f !important;
}
.timeline-badge.info {
    background-color: #5bc0de !important;
}
.timeline-title {
    margin-top: 0;
    color: inherit;
}
.timeline-body > p, .timeline-body > ul {
    margin-bottom: 0;
}
.timeline-body > p + p {
    margin-top: 5px;
}

@media (max-width: 767px) {
    ul.timeline:before {
        left: 40px;
    }
    ul.timeline > li > .timeline-panel {
        width: calc(100% - 90px);
        width: -moz-calc(100% - 90px);
        width: -webkit-calc(100% - 90px);
    }
    ul.timeline > li > .timeline-badge {
        left: 15px;
        margin-left: 0;
        top: 16px;
    }
    ul.timeline > li > .timeline-panel {
        float: right;
    }
    ul.timeline > li > .timeline-panel:before {
        border-left-width: 0;
        border-right-width: 15px;
        left: -15px;
        right: auto;
    }
    ul.timeline > li > .timeline-panel:after {
        border-left-width: 0;
        border-right-width: 14px;
        left: -14px;
        right: auto;
    }
}
.fileUpload-btn-style {
    position: relative;
    overflow: hidden;
    margin: 0px;
}
.fileUpload-btn-style input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
/*上傳檔案*/
.fileUpload {
    position: relative;
    overflow: hidden;
    background-color: #f7f7f9;
    border: 1px solid #eeeeee;
    height: 150px;
    width: 150px;
    text-align: center;
    border-radius: 5px;
}
.fileUpload:hover {
    background-color: #eeeeee;
}
.fileUpload i {
    color: #393939;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
    height: 100%;
    text-align: center;
}
.custom-span {
    font-size: 100px;
    color: #FE57A1
}
#uploadFile {
    border: none;
    margin-left: 10px;
    width: 200px;
}
.custom-para {
    font-size: 18px;
    color: #585858;
}
/*評價*/
.starrr {
    display: inline-block;
}
.starrr i {
    font-size: 24px;
    padding: 0 1px;
    cursor: pointer;
    color: #ffd119;
}
.tag-col span a:link {
    padding: 5px 8px;
    background-color: #CCC;
    margin-right: 5px;
    border-radius: 3px;
}
.row-header {
    position: relative;
    background-color: #03F;
}
.left-btn-slider {
    position: absolute;
    z-index: 3;
    top: 85px;
    left: 0px;
    background-color: #F00;
}
.right-btn-slider {
    position: absolute;
    z-index: 3;
    top: 85px;
    right: 0px;
    background-color: #F00;
}
.btn-slider {
    position: absolute;
    z-index: 3;
    top: 0px;
    right: 0px;
    background-color: #F00;
}
.btn-slider ul {
    clear: both;
    overflow: hidden;
}
.btn-slider ul li {
    float: right;
}
ul, ol {
    margin-top: 0;
    margin-bottom: 0px;
    padding: 0;
    list-style: none;
}
.topbar {
    background-color: #4b494f;
    padding: 5px 0;
    color: #999;
}
.topbar-accounts-links li {
    float: left;
    list-style: none;
    color: #f1f1f1;
}
.topbar-accounts-links a:link, .topbar-accounts-links li a:visited, .topbar-accounts-links li a:active {
    color: #999;
    text-decoration: none;
    padding: 0 0px 0 10px;
}
.topbar-accounts-links li a:hover {
    color: #f1f1f1;
    text-decoration: none;
}
.topbar-channel-links li {
    float: left;
    list-style: none;
    color: #f1f1f1;
}
.topbar-channel-links li a:link, .topbar-channel-links li a:visited, .topbar-channel-links li a:active {
    color: #999;
    text-decoration: none;
    padding: 0 15px 0 0px;
}
.topbar-channel-links li a:hover {
    color: #f1f1f1;
    text-decoration: none;
}
.navbar {
    margin-bottom: 0px;
}
.ad-link ul li {
    margin: 5px 0;
}
.ad-link ul li a:link, .ad-link ul li a:visited, .ad-link ul li a:active {
    display: block;
    background: url(../images/arr_1.gif) left center no-repeat;
    padding: 0 0 0 15px;
}
.product-info {
    clear: both;
    overflow: hidden;
}
.product-info ul li {
    padding: 13px 0 0 0;
    clear: both;
    overflow: hidden;
}
.product-info ul li .title {
    float: left;
    width: 20%;
    height: 16px;
}
.product-info ul li .content {
    float: left;
    width: 80%;
    margin: 0 0 0 0px;
    background-color: #f60;
}
.product-info ul li .product_size {
    float: left;
    margin: 0 0 0 0px;
    background-color: #066;
    width: 80%;
}
.product-info ul li .product_size ul {
    clear: both;
    overflow: hidden;
    background-color: #63C;
}
.product-info ul li .product_size ul li {
    display: inline-block;
    padding: 0;
    margin: 0 0px 0 0;
    background-color: #FC3;
}
.product-info ul li .product_size ul li a {
    display: block;
    padding: 9px 8px;
    margin: 0 0 0px 0;
    text-align: center;
    border: 1px solid #f60;
    text-decoration: none;
    font-size: 12px;
    min-width: 80px;
}
.product-info ul li .product_size ul li a:hover {
    border: 1px solid #999;
}
.product-info ul li .product_size ul li.selected a:link, .product-info ul li .product_size ul li.selected a:visited {
    border: 1px solid #F00;
    background-color: #F00;
    color: #fff;
}
.product-info ul li .product_meda {
    float: left;
}
.product-info ul li .product_meda ul li {
    display: inline-block;
    padding: 0;
    margin: 0 5px 0 0;
}
.product-info ul li .product_color {
    float: left;
}
.product-info ul li .product_color ul li {
    display: inline-block;
    padding: 0;
    margin: 0 5px 0 0;
}
.product-info ul li .product_color ul li img {
    width: 36px;
    height: 36px;
    vertical-align: middle;
    padding: 5px;
}
.product-info ul li .product_color ul li a {
    display: inline-block;
    background-color: #fff;
    border: 1px solid #dcdcdc;
}
.product-info ul li .product_color ul li a:hover {
    border: 1px solid #999;
}
.product-info ul li .product_color ul li.selected a:link, .product-info ul li .product_color ul li.selected a:visited {
    border: 1px solid #F00;
}
/*layout*/
/*footer置底時*/
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    /*font-family:"微軟正黑體",Arial, Helvetica, sans-serif;*/
    font-family: 'Poppins', '\5FAE\8F6F\96C5\9ED1', Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
}
/*網站外框*/
#wrapper {
    min-height: 100%;
    position: relative;
}
/*表頭*/
header {
    position: relative;
    /*height:140px;
	overflow:hidden;*/
    clear: both;
    margin: 0 auto;
    border-top: 5px solid #00afd7;
    background-color: #fff;
    padding-top: 38px;
    padding-bottom: 10px;
}
header nav .container {
    position: relative;
}
/*內容*/
#body_content {
    padding: 0px;
    padding-top: 20px;
    padding-bottom: 220px;	/* Height of the footer */
    background-color: #fff;
}
p {
    font-size: 16px;
    color: #777;
}
/*置底*/
footer {
    /*position: absolute;*/
    bottom: 0;
    width: 100%;
    height: 180px;/* Height of the footer */
    background-color: #fff;
    padding: 15px 0 0 0;
    color: #aaaaaa;
}
/*選單設定*/

.menu-ver-style1 {
    position: relative;
    width: 236px;
    padding: 0px;
    margin: 0;
    min-height: 600px;
}
.menu-ver-style1 ul {
    position: absolute;
    z-index: 8;
    top: 0;
    left: 0;
    width: 235px;
    padding: 0 1px 0 0;
    margin: 0 0 0 0;
    border-right: 1px solid #1c1c1c;
    background-color: #3b3b3b;
    min-height: 600px;
}
.menu-ver-style1 ul li {
    width: 235px;
    background-color: #272727;
    border-top: 1px solid #1c1c1c;
    border-left: 1px solid #1c1c1c;
    border-right: none;
    margin: 0 0 0 0;
}
.menu-ver-style1 ul li:last-child {
    border-bottom: 1px solid #1c1c1c;
}
.menu-ver-style1 ul li a:link, .menu-ver-style1 ul li a:visited {
    display: block;
    color: #f8f8f8;
    text-decoration: none;
    padding: 8px 0 8px 5px;
    background-color: #272727;
    border-right: 1px solid #1c1c1c;
}
.menu-ver-style1 ul li.selected a:link, .menu-ver-style1 ul li.selected a:visited {
    background-color: #fff;
    color: #000;
    border-right: 1px solid #fff;
}
.menu-ver-style1 ul li a:hover {
    background-color: #eaeaea;
    color: #000;
}
.menu-ver-style2 {
    width: 220px;
    height: 300px;
    background-color: #003;
}
.menu-ver-style2 ul li {
    background-color: #F00;
    color: #fff;
    width: 220px;
    position: relative;
}
.menu-ver-style2 ul li a:link, .menu-ver-style2 ul li a:visited {
    color: #fff;
    display: block;
    padding: 10px 20px;
}
.menu-ver-style2 ul li a:hover {
    color: #f60;
    text-decoration: none;
}
.menu-ver-style2 ul li.selected a:link, .menu-ver-style2 ul li.selected a:visited {
    background-color: #727272;
    color: #f60;
}
.menu-ver-style2 ul li.selected:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #727272;
    position: absolute;
    top: 0px;
    right: -20px;
}
.menu-ver-style3 {
    width: 220px;
    height: 300px;
    background-color: #003;
}
.menu-ver-style3 ul li {
    background-color: #F00;
    color: #fff;
    width: 220px;
    position: relative;
}
.menu-ver-style3 ul li a:link, .menu-ver-style3 ul li a:visited {
    color: #fff;
    display: block;
    padding: 10px 20px;
}
.menu-ver-style3 ul li a:hover {
    color: #f60;
    text-decoration: none;
}
.menu-ver-style3 ul li.selected a:link, .menu-ver-style3 ul li.selected a:visited {
    background-color: #727272;
    color: #f60;
}
.menu-ver-style3 ul li.selected:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid #fff;
    position: absolute;
    top: 0px;
    right: 0px;
}
/*mouse:hover下拉選單*/
#navbar-down {
    position: relative;
    clear: both;
    background-color: #666;
}
#nav {
    margin: 0px auto 0 auto;
    padding: 0px 0px 0 20px;
    height: 40px;
    background: #219ff7;
    font-size: 100%;
}
#nav li {
    float: left;
    position: relative;
    list-style: none outside none;
}
#nav li.open, #nav li:hover {
    background: #fff;
}
#nav li:hover > a {
    background: #fff;
    color: #219ff7;
}
#nav li a {
    display: block;
    padding: 10px 15px;
    line-height: 20px;
    color: #fff;
    text-decoration: none;
    font-size: 16px;
}
#nav li ul {
    display: none;
    position: absolute;
    z-index: 5;
    top: 40px;
    left: 0;
    width: auto;
    min-width: 130px;
    *width: 130px;
    white-space: nowrap;
    padding: 0 0px 5px 0px;
    background: #fff;
    border-width: 0 1px 1px;
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-bottomright: 4px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.15);
    -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.15);
    box-shadow: 0 3px 3px rgba(0,0,0,0.15);
}
#nav li:hover ul {
    display: block;
}
#nav li ul li {
    float: none;
    list-style: none outside none;
}
#nav li ul li a {
    padding: 8px 8px 8px 13px;
    display: inline-block;
    color: #219ff7;
}
#nav li ul li a {
    display: block;
}
#nav li ul li a:hover {
    color: #fff;
    background-color: #1589d9;
}
#navbar-topnav {
    position: relative;
    height: 82px;
    clear: both;
    overflow: hidden;
}
ul#topnav {
    margin: 0;
    padding: 0;
    float: left;
    width: 100%;
    list-style: none;
    position: relative;
    background-color: #000;
}
ul#topnav li {
    float: left;
    margin: 0;
    padding: 0;
    border-right: 1px solid #555;
}
ul#topnav li a {
    padding: 8px 15px;
    display: block;
    color: #f0f0f0;
    text-decoration: none;
}
ul#topnav li:hover {
    background-color: #1376c9;
}
ul#topnav li span {
    float: left;
    padding: 15px 0;
    position: absolute;
    left: 0;
    top: 31px;
    display: none;
    width: 100%;
    background: #1376c9;
    color: #fff;
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span {
    display: block;
}
ul#topnav li span a {
    display: inline;
}
ul#topnav li span a:hover {
    text-decoration: underline;
}
/*水平導覽選單_內容效果區塊*/
.menu-hor-style1 {
    clear: both;
    overflow: hidden;
    padding: 0 0 25px 0;
}
.menu-hor-style1 ul {
    clear: both;
    margin: 0;
    padding: 0 0 0 0em;
}
.menu-hor-style1 li {
    list-style: none;
    float: left;
}
.menu-hor-style1 li a:link, .menu-hor-style1 li a:visited {
    margin: 0em 10px 0 0;
    margin: 0px 10px 0 0\0/IE8+9;/*IE8 + 9 + IE10*/
    display: block;
    color: #6e6e6e;
    text-decoration: none;
    padding: 10px 15px;
    line-height: 12px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    behavior: url(ie-css3.htc);
    background-color: #f2f2f2;
    border: 1px solid #d9d9d9;
    behavior: url(css/ie-css3.htc);
}
.menu-hor-style1 li a:hover {
    color: #333;
    -moz-box-shadow: 1px 1px 5px #e5e5e5;
    -webkit-box-shadow: 1px 1px 5px #e5e5e5;
    box-shadow: 1px 1px 5px #e5e5e5;
    border: 1px solid #c6c6c6;
}
.menu-hor-style1 ul li.selected a:link, .menu-hor-style1 ul li.selected a:visited {
    background-color: #fff;
    color: #000;
    cursor: default;
}
/*水平導覽選單_內容效果區塊*/
.menu-hor-style2 {
    background-color: #ebebeb;
    padding: 0px;
}
.menu-hor-style2 ul {
    padding: 0 0 34px 0.7em;
    padding: 0 0 34px 0.7em\0/IE8+9;/*IE8 + 9 + IE10*/
    margin: 0;
    border-bottom: 1px solid #d9d9d9;
}
.menu-hor-style2 li {
    float: left;
    border: 1px solid #d9d9d9;
    border-bottom: none;
    list-style: none;
    margin: 0 0.3em 0 0;
    background-color: #f2f2f2;
}
.menu-hor-style2 li:last-child {
    border-right: 1px solid #d9d9d9;
}
.menu-hor-style2 li a:link, .menu-hor-style2 li a:visited {
    display: block;
    color: #6e6e6e;
    text-decoration: none;
    padding: 0.5em 1.5em 6px 1.5em;
    border-bottom: 1px solid #d9d9d9;
}
.menu-hor-style2 ul li.selected a:link, .menu-hor-style2 ul li.selected a:visited {
    color: #333;
    background-color: #fff;
    border-bottom: 1px solid #FFF;
    cursor: default;
}
.menu-hor-style2 ul li a:hover {
    color: #333;
    background-color: #fff;
    border-bottom: 1px solid #FFF;
}
/*水平導覽選單_內容效果區塊*/
.menu-hor-style3 {
    padding: 0px;
}
.menu-hor-style3 ul {
    padding: 0 0 34px 0.7em;
    padding: 0 0 34px 0.7em\0/IE8+9;/*IE8 + 9 + IE10*/
    margin: 0;
    border-bottom: 1px solid #ddd;
}
.menu-hor-style3 li {
    float: left;
    list-style: none;
    margin: 0 0.3em 0 0;
}
.menu-hor-style3 li a:link, .menu-hor-style3 li a:visited {
    display: block;
    color: #6e6e6e;
    text-decoration: none;
    padding: 0.5em 1.5em 6px 1.5em;
}
.menu-hor-style3 ul li.selected a:link, .menu-hor-style3 ul li.selected a:visited {
    color: #333;
    background-color: #fff;
    border-bottom: 2px solid #333333;
    cursor: default;
}
.menu-hor-style3 ul li a:hover {
    color: #959595;
    border-bottom: 2px solid #959595;
}
/*水平導覽選單_內容效果區塊*/
.menu-hor-style4 {
    clear: both;
    overflow: hidden;
    padding: 0 0 25px 0;
}
.menu-hor-style4 ul {
    clear: both;
    margin: 0;
    padding: 0 0 0 0em;
}
.menu-hor-style4 li {
    list-style: none;
    float: left;
}
.menu-hor-style4 li a:link, .menu-hor-style4 li a:visited {
    margin: 0em 10px 0 0;
    margin: 0px 10px 0 0\0/IE8+9;/*IE8 + 9 + IE10*/
    display: block;
    color: #6e6e6e;
    text-decoration: none;
    padding: 10px 15px;
    line-height: 12px;
    -moz-transition: opacity 0.4s; /* Firefox 4 */
    -webkit-transition: opacity 0.4s; /* Safari and Chrome */
    -o-transition: opacity 0.4s; /* Opera */
    transition: opacity 0.4s;
}
.menu-hor-style4 li a:hover {
    color: #333;
}
.menu-hor-style4 ul li.selected a:link, .menu-hor-style4 ul li.selected a:visited {
    background-color: #fff;
    color: #000;
    cursor: default;
}
.menu-hor-style4-toggle {
    opacity: 0.4;
    -moz-transition: opacity 0.4s; /* Firefox 4 */
    -webkit-transition: opacity 0.4s; /* Safari and Chrome */
    -o-transition: opacity 0.4s; /* Opera */
    transition: opacity 0.4s;
}
/*表單設定*/
.form_style1 {
    background-color: #FFF;
    color: #F00;
}
.form-row {
    clear: both;
    overflow: hidden;
    border-bottom: 1px solid #CCC;
}
.form_style1 .form-row .label-row {
    float: left;
    width: 150px;
    height: 60px;
    overflow: hidden;
    line-height: 60px;
    text-align: right;
    color: #690;
}
.form_style1 .form-row .label-row-pa {
    float: left;
    display: block;
    width: 150px;
    height: 60px;
    overflow: hidden;
    line-height: 70px;
    text-align: right;
    color: #690;
}
.form_style1 .form-row .form-content .content-row {
    float: left;
    display: block;
    padding: 7px 0 0 10px;
}
.form-content {
    float: left;
    padding: 15px 5px;
    width: 970px;
}
input[type="text"], input[type="email"], input[type="date"], input[type="time"], input[type="tel"], input[type="password"] {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border: 1px solid #CCC;
}
input[type="radio"], input[type="checkbox"] {
    /*margin:0 3px 0 0;*/
    margin-right: 3px;
}
input[type="text"]:hover, input[type="email"]:hover, input[type="date"]:hover, input[type="time"]:hover, input[type="tel"]:hover, input[type="password"]:hover, input[type="file"]:hover {
    border: 1px solid #09F;
    -moz-box-shadow: 0 0 5px #6CF;
    -webkit-box-shadow: 0 0 5px#6CF;
    box-shadow: 0 0 5px #6CF;
}
input[type="file"] {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border: 1px solid #CCC;
    padding: 3px 2px 5px 2px;
}
select {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border: 1px solid #CCC;
    line-height: 22px;
    margin: 0 0.5em 0 0;
    behavior: url(css/ie-css3.htc);
}
select:hover {
    border: 1px solid #09F;
    -moz-box-shadow: 0 0 5px #6CF;
    -webkit-box-shadow: 0 0 5px#6CF;
    box-shadow: 0 0 5px #6CF;
}
textarea {
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border: 1px solid #CCC;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
}
textarea:hover {
    border: 1px solid #09F;
    -moz-box-shadow: 0 0 5px #6CF;
    -webkit-box-shadow: 0 0 5px#6CF;
    box-shadow: 0 0 5px #6CF;
}
.form-size-default {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-size-default:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
.note {
    color: #F00;
    padding: 0 4px;
    font-weight: bold;
}
.inline-note {
    display: inline;
    padding: 0;
    color: #999;
    margin: 0;
}
.block-note {
    display: block;
    padding: 0;
    color: #999;
    margin: 5px 0 0 0;
}
.btn_submit {
    width: 100%;
    clear: both;
    overflow: hidden;
    text-align: center;
}
.btn_submit ul {
    width: 100%;
    display: inline-block;
    margin: 0;
    padding: 15px 0 0px 0;
}
.btn_submit ul li {
    margin: 0 10px 0 0;
    display: inline-block;
}
.form_style4 {
    background-color: #fff;
}
.form_style4 label.control-label-range-title {
    padding-top: 20px;
    margin-bottom: 0;
    text-align: right;
}
.form_style4 input[type=checkbox].css-checkbox, .form_style4 input[type=checkbox].css-disabled {
    display: none;
}
.form_style4 input[type=checkbox].css-checkbox + label.css-label {
    padding: 0px 0 1px 21px;
    margin: 8px 10px 0 0px;
    display: inline-block;
    line-height: 16px;
    background-repeat: no-repeat;
    background-position: 0 0px;
    font-size: 16px;
    vertical-align: middle;
    cursor: pointer;
}
.form_style4 input[type=checkbox].css-checkbox:checked + label.css-label {
    padding: 0px 0 1px 21px;
    margin: 8px 10px 0 0px;
    background-position: 0 -17px;
}
/*不能按*/
.form_style4 input[type=checkbox].css-disabled + label.css-label {
    padding: 0px 0 1px 21px;
    margin: 8px 10px 0 0px;
    display: inline-block;
    line-height: 16px;
    background-repeat: no-repeat;
    background-position: 0 -34px;
    font-size: 16px;
    vertical-align: middle;
    cursor: no-drop;
}
.form_style4 label.css-label {
    background-image: url(../images/check-icon.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.form_style4 input[type=radio].css-radio, .form_style4 input[type=radio].css-radio-disabled {
    display: none;
}
.form_style4 input[type=radio].css-radio + label.css-label1 {
    padding: 0px 0 0 21px;
    margin: 6px 10px 0 0px;
    height: 16px;
    display: inline-block;
    line-height: 16px;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 16px;
    vertical-align: middle;
    cursor: pointer;
}
.form_style4 input[type=radio].css-radio:checked + label.css-label1 {
    background-position: 0 -16px;
}
/*不能按*/
.form_style4 input[type=radio].css-radio-disabled + label.css-label1 {
    padding: 0px 0 0 21px;
    margin: 6px 10px 0 0px;
    height: 16px;
    display: inline-block;
    line-height: 16px;
    background-repeat: no-repeat;
    background-position: 0 -34px;
    font-size: 16px;
    vertical-align: middle;
    cursor: no-drop;
}
.form_style4 label.css-label1 {
    background-image: url(../images/radio-icon.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.form_style4 .form-row .label-row {
    float: left;
    display: block;
    width: 150px;
    height: 60px;
    overflow: hidden;
    line-height: 60px;
    text-align: right;
}
.form_style4 .form-row .form-content .content-row {
    float: left;
    display: block;
    padding: 7px 0 0 10px;
}
.form_style6 .form-row .label-row {
    float: left;
    display: block;
    width: 150px;
    height: 60px;
    overflow: hidden;
    line-height: 60px;
    text-align: right;
}
.form_style6 input[type="checkbox"] {
    display: none;
}
.filter-form-style1 {
    background-color: #F00;
}
.filter-form-style1 input[type=checkbox].css-checkbox {
    display: none;
}
.filter-form-style1 input[type=checkbox].css-checkbox + label.css-label {
    padding: 6px 0 1px 21px;
    margin: 0 10px 0 0px;
    display: block;
    line-height: 16px;
    background-repeat: no-repeat;
    background-position: 0 7px;
    font-size: 16px;
    vertical-align: middle;
    cursor: pointer;
}
.filter-form-style1 input[type=checkbox].css-checkbox:checked + label.css-label {
    padding: 0px 0 1px 21px;
    margin: 6px 10px 0 0px;
    background-position: 0 -16px;
}
.filter-form-style1 label.css-label {
    background-image: url(../images/check-icon.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.filter-form-style1 input[type=radio].css-radio {
    display: none;
}
.filter-form-style1 input[type=radio].css-radio + label.css-label1 {
    padding: 0px 0 0 21px;
    margin: 6px 10px 0 0px;
    height: 16px;
    display: block;
    line-height: 16px;
    background-repeat: no-repeat;
    background-position: 0 0;
    font-size: 16px;
    vertical-align: middle;
    cursor: pointer;
}
.filter-form-style1 input[type=radio].css-radio:checked + label.css-label1 {
    background-position: 0 -16px;
}
.filter-form-style1 label.css-label1 {
    background-image: url(../images/radio-icon.png);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.filter-form-style1 .filter-radio-row, .filter-form-style1 .filter-checkbox-row {
    padding-bottom: 15px;
}
/*背景色*/
.form_style6 input[type="checkbox"] + label {
    display: inline-block;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    background-color: #CCC;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 3px;
}
.form_style6 input[type="checkbox"]:checked + label {
    background-color: #F00;
}
.form_style6 input[type="checkbox"] + label:hover {
    background-color: #FC0;
}
/*圖片樣式
.form_style6 input[type="checkbox"] + label span {
	display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
    vertical-align:middle;
    background:url(../images/radio-icon.png) left top no-repeat;
    cursor:pointer;
}
.form_style6 input[type="checkbox"]:checked + label span{
    background:url(../images/radio-icon.png) -19px top no-repeat;
}
*/

.form_style6 input[type="radio"] {
    display: none;
}
/*背景色*/
.form_style6 input[type="radio"] + label {
    display: inline-block;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    background-color: #CCC;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 3px;
}
.form_style6 input[type="radio"]:checked + label {
    background-color: #F00;
}
.form_style6 input[type="radio"] + label:hover {
    background-color: #FC0;
}
/*表格1*/
.table_style1 {
    border: 1px solid #cdcdcd;
    border-collapse: collapse;
    width: 100%;
}
.table_style1 caption {
    font-weight: bold;
    font-size: 110%;
    text-align: left;
    padding: 0px 0 6px 5px;
}
.table_style1 td {
    border: 1px solid #cdcdcd;
    padding: 0.5em;
}
.table_style1 th {
    border: 1px solid #cdcdcd;
    background-color: #2f3842;
    color: #FFF;
    padding: 0.5em;
    text-align: center;
    font-weight: bold;
}
.table_style1 tr:nth-child(even) {
    background-color: #eeeeee;
}
.table_style1 tr:hover {
    background-color: #e1f5fe;
    color: #333;
}
/*表格2*/
.table_style2 {
    border: 1px solid #cdcdcd;
    border-collapse: collapse;
    color: #515967;
    width: 100%;
}
.table_style2 caption {
    font-weight: bold;
    font-size: 110%;
    text-align: left;
    padding: 0px 0 6px 5px;
}
.table_style2 td {
    border: 1px solid #cdcdcd;
    padding: 0.5em;
}
.table_style2 th {
    border: 1px solid #cdcdcd;
    background-color: #f5f5f6;
    color: #515967;
    padding: 0.5em;
    text-align: center;
    font-weight: bold;
}
.table_style2 tr:nth-child(even) {
    background-color: #ffffff;
}
.table_style2 tr:nth-child(odd) {
    background-color: #f9f9f9;
}
.table_style2 tr:hover {
    background-color: #e1f5fe;
    color: #333;
}
.table_style3 {
    border: 1px solid #cdcdcd;
    border-collapse: collapse;
    color: #515967;
    -moz-box-shadow: 3px 3px 10px #e6e6e6;
    -webkit-box-shadow: 3px 3px 10px #e6e6e6;
    box-shadow: 3px 3px 10px #e6e6e6;
    width: 100%;
}
.table_style3 caption {
    font-weight: bold;
    font-size: 110%;
    text-align: left;
    padding: 0px 0 6px 5px;
}
.table_style3 td {
    border: 1px solid #cdcdcd;
    padding: 0.5em;
    text-align: right;
}
.table_style3 th {
    border: 1px solid #cdcdcd;
    background-color: #FFF;
    color: #515967;
    padding: 0.5em;
    text-align: center;
    font-weight: bold;
    background-image: url(../images/bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    cursor: pointer;
}
.table_style3 tr:hover {
    background-color: #7ea700;
    color: #FFF;
}
table.table_style3 thead tr .headerSortUp {
    background-image: url(../images/asc.gif);
}
table.table_style3 thead tr .headerSortDown {
    background-image: url(../images/desc.gif);
}
table.table_style3 thead tr .headerSortDown, table.table_style3 thead tr .headerSortUp {
    background-color: #CCC;
    color: #FFF;
}
.table_style4 {
    border: 1px solid #cdcdcd;
    border-collapse: collapse;
    color: #515967;
    width: 100%;
}
.table_style4 caption {
    font-weight: bold;
    font-size: 110%;
    text-align: left;
    padding: 0px 0 0px 0px;
}
.table_style4 td {
    border: 1px solid #cdcdcd;
    padding: 0em;
}
.table_style4 th {
    border: 1px solid #cdcdcd;
    background-color: #f5f5f6;
    color: #515967;
    padding: 0.5em;
    text-align: center;
    font-weight: bold;
}
.form_style4_table input[type="text"] {
    border: 0px;
    width: 100%;
    margin: 0px;
    border-radius: 0px;
}
.form_style4_table input[type="text"]:hover {
    background-color: #e1f5fe;
}
.form_style4_table select {
    border: 0px;
    width: 100%;
    margin: 0px;
}
.form_style4_table select:hover {
    background-color: #e1f5fe;
}
/*表格5*/
.table_style5 {
    border: 1px solid #cdcdcd;
    border-collapse: collapse;
    width: 100%;
}
.table_style5 caption {
    font-weight: bold;
    font-size: 110%;
    text-align: left;
    padding: 0px 0 6px 5px;
}
.table_style5 td {
    border: 1px solid #cdcdcd;
    padding: 0.5em;
}
.table_style5 th {
    border: 1px solid #cdcdcd;
    background-color: #2f3842;
    color: #FFF;
    padding: 0.5em;
    text-align: center;
    font-weight: bold;
}
.table_style5 tr:nth-child(even) {
    background-color: #eeeeee;
}
.table_style5 tr.tr-scale {
    transition: all .2s ease-in-out;
    box-shadow: all .2s ease-in-out;
}
.table_style5 tr.tr-scale:hover {
    background-color: #fff;
    color: #333;
    transform: scale(1.01);
    box-shadow: 0 2px 12px rgba(0,0,0,.1);
}
/*登入*/
.form_style3 {
    width: 245px;
    padding: 15px;
}
.form_style3 label {
    display: inline-block;
    width: 80px;
    margin: 0;
    color: #707070;
    font-weight: 100;
}
.form_style3 label + a {
    display: inline-block;
    width: 100px;
}
.form_style3 input[type="checkbox"] {
    margin: 0px 5px 0 0;
}
.form_style3 span {
    display: block;
    color: #c80515;
}
/*內距和邊界設定*/
.mt0 {
    margin-top: 0 !important;
}
.mt3 {
    margin-top: 3px !important;
}
.mt5 {
    margin-top: 5px !important;
}
.mt10 {
    margin-top: 10px !important;
}
.mt15 {
    margin-top: 15px !important;
}
.mt20 {
    margin-top: 20px !important;
}
.mt25 {
    margin-top: 25px !important;
}
.mt30 {
    margin-top: 30px !important;
}
.mt40 {
    margin-top: 40px !important;
}
.mr3 {
    margin-right: 3px !important;
}
.mr5 {
    margin-right: 5px !important;
}
.mr10 {
    margin-right: 10px !important;
}
.mr15 {
    margin-right: 15px !important;
}
.mr20 {
    margin-right: 20px !important;
}
.mr25 {
    margin-right: 25px !important;
}
.mr30 {
    margin-right: 30px !important;
}
.mr40 {
    margin-right: 40px !important;
}
.mb0 {
    margin-bottom: 0 !important;
}
.mb5 {
    margin-bottom: 5px !important;
}
.mb10 {
    margin-bottom: 10px !important;
}
.mb15 {
    margin-bottom: 15px !important;
}
.mb20 {
    margin-bottom: 20px !important;
}
.mb25 {
    margin-bottom: 25px !important;
}
.mb30 {
    margin-bottom: 30px !important;
}
.mb40 {
    margin-bottom: 40px !important;
}
.ml5 {
    margin-left: 5px !important;
}
.ml3 {
    margin-left: 3px !important;
}
.ml10 {
    margin-left: 10px !important;
}
.ml15 {
    margin-left: 15px !important;
}
.ml20 {
    margin-left: 20px !important;
}
.ml25 {
    margin-left: 25px !important;
}
.ml30 {
    margin-left: 30px !important;
}
.ml40 {
    margin-left: 40px !important;
}
.m0505 {
    margin: 0px 5px !important;
}
.m0405005 {
    margin: 4px 5px 0 5px !important;
}
.pt0 {
    padding-top: 0 !important;
}
.pt3 {
    padding-top: 3px !important;
}
.pt5 {
    padding-top: 5px !important;
}
.pt10 {
    padding-top: 10px !important;
}
.pt15 {
    padding-top: 15px !important;
}
.pt20 {
    padding-top: 20px !important;
}
.pt25 {
    padding-top: 25px !important;
}
.pt30 {
    padding-top: 30px !important;
}
.pr0 {
    padding-right: 0px !important;
}
.pr5 {
    padding-right: 5px !important;
}
.pr8 {
    padding-right: 8px !important;
}
.pr10 {
    padding-right: 10px !important;
}
.pr15 {
    padding-right: 15px !important;
}
.pr20 {
    padding-right: 20px !important;
}
.pr25 {
    padding-right: 25px !important;
}
.pr30 {
    padding-right: 30px !important;
}
.pr35 {
    padding-right: 35px !important;
}
.pr40 {
    padding-right: 40px !important;
}
.pr45 {
    padding-right: 45px !important;
}
.pb5 {
    padding-bottom: 5px !important;
}
.pb10 {
    padding-bottom: 10px !important;
}
.pb15 {
    padding-bottom: 15px !important;
}
.pb20 {
    padding-bottom: 20px !important;
}
.pb25 {
    padding-bottom: 25px !important;
}
.pb30 {
    padding-bottom: 30px !important;
}
.pl0 {
    padding-left: 0px !important;
}
.pl5 {
    padding-left: 5px !important;
}
.pl10 {
    padding-left: 10px !important;
}
.pl15 {
    padding-left: 15px !important;
}
.pl20 {
    padding-left: 20px !important;
}
.pl25 {
    padding-left: 25px !important;
}
.pl30 {
    padding-left: 30px !important;
}
.pl35 {
    padding-left: 35px !important;
}
.pl40 {
    padding-left: 40px !important;
}
.pl45 {
    padding-left: 45px !important;
}
.p1020 {
    padding: 10px 20px !important;
}
.p0515 {
    padding: 5px 15px !important;
}
.p1015 {
    padding: 10px 15px !important;
}
.pa30 {
    padding: 30px !important;
}
.pa0 {
    padding: 0 !important;
}
.p-change-l15 {
    padding: 0 15px 0 0px;
}
.ba1 {
    border: 1px solid #d9d9d9 !important;
}
.bt1 {
    border-top: 1px solid #d9d9d9 !important;
}
.bb1 {
    border-bottom: 1px solid #d9d9d9 !important;
}
.b-t-lr5 {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.w30 {
    width: 30px !important;
}
.w50 {
    width: 50px !important;
}
.w60 {
    width: 50px !important;
}
.w70 {
    width: 70px !important;
}
.w85 {
    width: 85px !important;
}
.w100 {
    width: 100px !important;
}
.w125 {
    width: 125px !important;
}
.w150 {
    width: 150px !important;
}
.w175 {
    width: 175px !important;
}
.w200 {
    width: 200px !important;
}
.w215 {
    width: 215px !important;
}
.w240 {
    width: 240px !important;
}
.w250 {
    width: 250px !important;
}
.w258 {
    width: 258px !important;
}
.w300 {
    width: 300px !important;
}
.w350 {
    width: 350px !important;
}
.w400 {
    width: 400px !important;
}
.w450 {
    width: 450px !important;
}
.w500 {
    width: 500px !important;
}
.w550 {
    width: 550px !important;
}
.w600 {
    width: 600px !important;
}
.w650 {
    width: 650px !important;
}
.w700 {
    width: 700px !important;
}
/*icon*/
.fb-like {
    background-image: url(../images/icon2.png);
    background-repeat: no-repeat;
    background-position: 0;
}
.fb-message {
    background-image: url(../images/icon1.png);
    background-repeat: no-repeat;
    background-position: 0;
}

@media (min-width: 320px) and (max-width: 768px) {
    .p-change-l15 {
        padding: 0 15px 0 15px;
    }
}
.nav-style-1-tabs {
    width: 100%;
}
.nav-style-1-tabs > li:first-child {
}
.nav-style-1-tabs > li {
    float: left;
    margin-bottom: -1px;
    border-bottom: none;
    border-right: none;
}
/*.nav-style-1-tabs > li:first-child {
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
.nav-style-1-tabs > li:last-child {
    border-right:1px solid #dfdfe1;
}*/
.nav-style-1-tabs > li > a {
    line-height: 1.42857143;
    color: #393939;/*margin-right: 2px;
  border: 1px solid transparent;
  border-radius:4px;*/
    /*padding-left:35px;*/
}
.nav-style-1-tabs > li > a:hover {
    /*border-color: #eee #eee #ddd;*/
    background-color: #f2f2f;
    color: #313131;
}
.nav-style-1-tabs > li.active > a, .nav-style-1-tabs > li.active > a:hover, .nav-style-1-tabs > li.active > a:focus {
    cursor: default;
    color: #393939;
    font-weight: bold;
    background-color: #fff;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-top: 1px solid #ddd;
}
.nav-style-2-tabs {
    width: 100%;
}
.nav-style-2-tabs > li:first-child {
    -webkit-border-top-left-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}
.nav-style-2-tabs > li {
    float: left;
    margin-bottom: -1px;
    border: 1px solid #ddd;
    border-right: none;
}
.nav-style-2-tabs > li:last-child {
    border-right: 1px solid #dfdfe1;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}
.nav-style-2-tabs > li > a {
    line-height: 1.42857143;
    color: #393939;/*margin-right: 2px;
  border: 1px solid transparent;
  border-radius:4px;*/
    /*padding-left:35px;*/
}
.nav-style-2-tabs > li > a:hover {
    /*border-color: #eee #eee #ddd;*/
    background-color: #f2f2f2;
    color: #313131;
}
.nav-style-2-tabs > li.active > a, .nav-style-2-tabs > li.active > a:hover, .nav-style-2-tabs > li.active > a:focus {
    cursor: default;
    color: #393939;
    font-weight: bold;
    background-color: #f2f2f2;
}
.nav-style-3-tabs {
    width: 100%;
}
/*.nav-style-3-tabs > li:first-child {
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}*/

.nav-style-3-tabs > li {
    float: left;
    margin-bottom: -1px;
    border-right: 1px solid #f2f2f2;
}
.nav-style-3-tabs > li:last-child {
    border-right: none;
}
.nav-style-3-tabs > li > a {
    line-height: 1.42857143;
    color: #393939;
    /*margin-right: 2px;
  border: 1px solid transparent;
  border-radius:4px;*/
    /*padding-left:35px;*/
    background-color: #fafafa;
}
.nav-style-3-tabs > li > a:hover {
    /*border-color: #eee #eee #ddd;*/
    background-color: #f2f2f2;
    color: #313131;
}
.nav-style-3-tabs > li.active > a, .nav-style-3-tabs > li.active > a:hover, .nav-style-3-tabs > li.active > a:focus {
    cursor: default;
    color: #fff;
    font-weight: bold;
    background-color: #f60;
}
.nav-style-3-tabs > li.active > a:after {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    border: 6px solid transparent;
    border-top-color: #f60;
    top: 100%;
    left: 50%;
    margin-left: -10px;
}
.nav-style-4-tabs {
    width: 100%;
}
/*.nav-style-4-tabs > li:first-child {
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}*/

.nav-style-4-tabs > li {
    float: left;
    margin-bottom: -1px;
    border-right: none;
}
/*
.nav-style-4-tabs > li:last-child {
    border-right:1px solid #dfdfe1;

}
*/
.nav-style-4-tabs > li > a {
    line-height: 1.42857143;
    color: #393939;
    /*margin-right: 2px;
  border: 1px solid transparent;
  border-radius:4px;*/
    /*padding-left:35px;*/
    background: #f8f8f8; /* Fallback */
    background: linear-gradient(-135deg, transparent 0.5em, #f8f8f8 0);
}
.nav-style-4-tabs > li > a:hover {
    /*border-color: #eee #eee #ddd;*/
    color: #313131;
    background: #dcdcdc; /* Fallback */
    background: linear-gradient(-135deg, transparent 0.5em, #dcdcdc 0);
}
.nav-style-4-tabs > li.active > a, .nav-style-4-tabs > li.active > a:hover, .nav-style-4-tabs > li.active > a:focus {
    cursor: default;
    color: #313131;
    font-weight: bold;
    background: #fff; /* Fallback */
    background: linear-gradient(-135deg, transparent 0.5em, #fff 0);
}
.tab-content {
    background-color: #FFF;
    border: 1px solid #ddd;
    padding: 15px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
/*箭頭上*/
.dropdown-menu .arrow_t_int {
    width: 0px;
    height: 0px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #c1c1c1 transparent;
    position: absolute;
    top: -20px;
    right: 10px;
}
/*箭頭上-邊框*/
.dropdown-menu .arrow_t_out {
    width: 0px;
    height: 0px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
    position: absolute;
    top: -19px;
    right: 10px;
}
.animation-col {
    border: 1px solid #d9d9d9;
    position: relative;
    height: 900px;
}
.animation-lv1 {
    position: absolute;
    top: 0px;
    left: 15px;
    padding-bottom: 10px;
    z-index: 3;
}
.animation-lv2 {
    position: absolute;
    top: 0px;
    left: 15px;
    padding-bottom: 10px;
    background-color: #f60;
    z-index: 2;
}
.article-list-row h2.title {
    color: #f60;
    margin: 30px 0 15px 0;
    font-size: 26px;
}
.article-list-col {
    border: 1px solid #060;
    clear: both;
    overflow: hidden;
    padding: 20px 0;
}
.article-list-col:first-child {
    padding-top: 0;
}
.article-list-col > .col-md-4 {
    padding-left: 0;
}
.article-list-col .article-list-img {
    border: 1px solid #f60;
    position: relative;
}
.article-list-col .article-list-content {
    padding: 0 15px 0 0px;
}
.article-list-col .article-list-content h3.title {
    font-size: 22px;
    margin: 0 0 0 0;
    line-height: 1.23;
}
.article-list-col .article-list-content h3.title a {
    color: #f60;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    padding-bottom: 5px;
    max-height: 58px;
}
.article-list-col .article-list-content h3.title a:hover {
    color: #000;
}
.article-list-col .article-list-content p {
    font-size: 16px;
    margin: 0 0 0 0;
    line-height: 1.23;
}
.article-list-col .article-list-other-info {
    background-color: #0C0;
    color: #9A9EA8;
    margin-bottom: 5px;
}

@media (max-width: 767px) {
    .article-list-col > .col-md-4 {
        padding-left: 15px;
    }
    .article-list-col .article-list-content {
        padding: 0 15px 0 15px;
    }
}
.article-detail h1.title {
    font-size: 30px;
    line-height: 1.2;
    margin: 0 0 5px 0;
}
.article-detail span.post-date {
    margin-right: 10px;
    padding-right: 10px;
    color: #a7a7a7;
}
.article-detail .post-meta {
    background-color: #0F0;
}
.article-detail .post-meta span.avatar {
    margin-right: 15px;
}
.article-detail .post-meta span.avatar img.avatar-image {
    border-radius: 50%;
    height: 60px;
    width: 60px;
    background: #9A9EA8;
    border: 1px solid #979797;
    margin: 5px 0;
}
.article-detail .share-btn {
    background-color: #0F0;
}
.tag-row {
    margin-top: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f3f3f3;
}
.tag-row span {
    background-color: #f60;
    padding: 2px 5px;
    font-size: 13px;
    border-radius: 3px;
    color: #fff;
    margin-right: 5px;
}
.tag-row a {
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 4px;
}
/*內頁統計數值*/
#literaryworks_counter {
    overflow: hidden;
    clear: both;
    margin: 15px auto;
    background-color: #f8f8f8;
    border: 1px solid #ddd;
}
#literaryworks_counter ul li {
    width: 33.33333%;
    float: left;
    border-right: 1px solid #ddd;
    text-align: center;
    padding: 10px 0;
}
#literaryworks_counter ul li:last-child {
    border-right: 0px;
}
#literaryworks_counter span {
    color: #f18b01;
    font-size: 170%;
    display: block;
}
#literaryworks_counter strong {
    color: #666666;
    display: block;
    font-size: 81.25%;
}
/*文章分享按鈕*/
#fb-btn-group {
    padding: 0.5em 0 0.5em 1.8em;
    height: 40px;
}
#fb-btn-group ul li {
    float: left;
    margin: 0.7em 1.5em 0 0;
}
.article-detail img {
    margin: 15px 0;
}
.article-detail p {
    font-size: 16px;
    line-height: 1.4;
    color: #666;
}

@media (min-width: 768px) {
    .col-1-12-prl0 {
        padding-left: 0px;
        padding-right: 0px;
        overflow: hidden;
    }
    .row-mlr0 {
        margin-left: 0px;
        margin-right: 0px;
    }
}

@media (max-width: 767px) {
    .row-mlr0 {
        border: 1px solid #000;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 767px) {
    .navbar-default .navbar-collapse,  .navbar-default .navbar-form {
        border-color: transparent;
    }/*隱藏選單最上方的線*/
}
/* define bootstrap 5 columns */
.col-xs-1-5, .col-sm-1-5, .col-md-1-5, .col-lg-1-5 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-1-5 {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-1-5 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-1-5 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-1-5 {
        width: 20%;
        float: left;
    }
}

@media (max-width: 991px) {
    .col-fixed, .row-fixed {
        float: left;
        margin-left: 0;
        margin-right: 0;
    } /*固定欄位寬度300像素*/
    .col-fixed {
        background: #f60;
        width: 100px;
    }
    .row-fixed {
        background: #EEE;
        width: calc(100% - 100px);
    }
    /*固定欄位寬度300像素*/
    .col-fixed {
        background: #CCC;
        width: 140px;
    }
    .sidebar-row {
        background: #EEE;
        width: calc(100% - 140px);
    }
}

@media (min-width: 992px) {
    .modal-w360 {
        width: 360px;
    }
}
.modal-body .signin-row {
    position: relative;
}
.modal-body .signin-row a#back {
    position: absolute;
    top: -40px;
    left: 0;
}
.modal-body .signin-row a#close {
    position: absolute;
    top: -40px;
    right: 0;
}
.modal-body .signin-row a:hover#close {
    color: #f60;
}
.modal-body .signin-row h3 {
    margin: 40px 0 20px;
    font-size: 26px;
    text-align: center;
}
.post-col {
    border: 1px solid #d9d9d9;
    border-radius: 10px;
    box-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.2);
    position: relative;
}
.post-col .post-category {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 3;
    width: 30px;
    height: 30px;
    background-color: #666;
}
.post-col .post-body {
    padding: 10px 20px;
}
.post-col .post-body h2.post-title {
    color: #f60;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.3;
    height: 72px;
}
.post-col .post-body p.post-description {
    color: #963;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 24px;
    height: 72px;
}

/*pad*/
@media (min-width: 768px) and (max-width: 991px) {
}
/*====新增css====*/

/*====表頭_開始====*/
.logo-row {
    clear: both;
    overflow: hidden;
}
.logo-row .brand-img {
    float: left;
}
.logo-row .brand-img img {
    display: block;
    margin: 0 auto;
    max-width: 80px;
    height: auto;
}
.logo-row .brand-info {
    float: left;
    padding-top: 10px;
    padding-left: 10px;
}
.logo-row .brand-info h1 {
    font-size: 28px;
    margin: 0;
    padding: 0 0 5px 0;
}
.logo-row .brand-info h2 {
    font-size: 22px;
    margin: 0;
    padding: 0;
}
.navbar-default .navbar-nav > li > a {
    color: #00afd7;
    border-right: 1px dotted #d1d1d1;
}
.navbar-default .navbar-nav > li > a:hover {
    color: #19338f;
}
.language {
    position: absolute;
    top: 0;
    right: 30px;
}
.language ul {
    overflow: hidden;
    clear: both;
}
.language ul li {
    float: right;
    margin-left: 10px;
}
.language ul li a {
    color: #bbbbbb;
}
.language ul li a:hover {
    color: #00afd7;
}
.language ul li a.active {
    color: #000000;
}
.navbar-default {
    background-color: #fff;
    border-color: #fff;
}
/*漢堡條動畫*/
.navbar-toggle {
    margin-right: 5px;
}
.navbar-toggle {
    border: none;
    background: transparent !important;
}
.navbar-toggle:focus {
    outline: none;
    background: transparent !important;
}
.navbar-toggle .icon-bar {
    background-color: #000;
    transform: rotate(0deg) translate(0px, 0px);
    transition: ease all .2s;
}
.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}
.navbar-toggle .icon-bar+.icon-bar {
    margin-top: 4px;
}
.icon-bar:nth-child(2) {
    width: 16px;
    transition: ease all .2s;
}
.navbar-toggle:hover>.icon-bar:nth-child(2) {
    width: 22px;
    transition: ease all .2s;
}
.navbar-toggle:active>.icon-bar:nth-child(2) {
    width: 22px;
    transition: ease all .2s;
}
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 4px);
    transition: ease all .2s;
}
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) {
    opacity: 0;
    transition: ease all .2s;
}
.navbar-toggle:not(.collapsed) .icon-bar:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
    transition: ease all .2s;
}
/*====表頭_結束====*/

/*====內容_開始====*/
.table-responsive {
    overflow-x:scroll;
}
.table-responsive::-webkit-scrollbar {
    -webkit-appearance: none;
}

.table-responsive::-webkit-scrollbar:vertical {
    width: 12px;
}

.table-responsive::-webkit-scrollbar:horizontal {
    height: 12px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

.table-responsive::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}
/*首頁登入_開始*/
.form-signin-row .panel .panel-body a {
    color: #8c6e4a;;
}
.form-signin-row .panel .panel-body a:hover {
    color: #a31f34;;
}
.signup ul.square li {
    list-style: square;
    margin: 0 20px 5px 20px;
    color: #777;
}
.signup p {
    font-size: 14px;
    color: #777;
    line-height: 1.3;
}
/*首頁登入_結束*/
/*step-by-step-開始*/
.step-by-step-progress {
    list-style: none;
    margin: 0;
    padding: 0;
    display: table;
    table-layout: fixed;
    width: 100%;
    color: #aaa;
}
.step-by-step-progress > li {
    position: relative;
    display: table-cell;
    text-align: center;
    font-size: 0.8em;
}
.step-by-step-progress > li:before {
    content: attr(data-step);
    display: block;
    margin: 0 auto;
    background: #eee;
    width: 40px;
    height: 40px;
    text-align: center;
    margin-bottom: 0.25em;
    line-height: 40px;
    border-radius: 100%;
    position: relative;
    z-index: 1000;
    font-size: 18px;
}
.step-by-step-progress > li:after {
    content: '';
    position: absolute;
    display: block;
    background: #eee;
    width: 100%;
    height: 0.5em;
    top: 1.25em;
    left: 50%;
    margin-left: 1.5em\9;
    z-index: 1;
}
.step-by-step-progress > li:last-child:after {
    display: none;
}
.step-by-step-progress > li.is-complete {
    color: #73c796;
    font-size: 14px;
}
.step-by-step-progress > li.is-complete:before, .step-by-step-progress > li.is-complete:after {
    color: #FFF;
    background: #83e0aa;
}
.step-by-step-progress > li.is-active {
    color: #76acd0;
    font-size: 14px;
}
.step-by-step-progress > li.is-active:before {
    color: #FFF;
    background: #98c7e6;
}
/**
 * Needed for IE8
 */
.step-by-step-progress-last:after {
    display: none !important;
}
/**
 * Size Extensions
 */
.step-by-step-progress--medium {
    font-size: 1.5em;
}
.step-by-step-progress--large {
    font-size: 2em;
}
.step-by-step-progress {
    margin-bottom: 3em;
}
/*step-by-step-結束*/
/*簡章_開始*/
table.table-list-style3 {
    width: 100%;
    border-collapse: collapse;
}
table.table-list-style3 tr {
    background: #fff;
}
table.table-list-style3 th {
    padding: 10px;
    border: 1px solid #eee;
    text-align: left;
    color: #fff;
    background: #333;
    font-weight: bold;
}
table.table-list-style3 td {
    padding: 10px;
    border: 1px solid #eee;
    color: #888;
}
table.table-list-style3 td a {
    color: #8c6e4a;
}
table.table-list-style3 td a:hover {
    color: #a31f34;
}
.circle-inline-block {
    width: 12px;
    height: 12px;
    background-color: #DDDDDD;
    margin: 0 auto;
    display: inline-block;
    border-radius: 50%;
    margin-right: 5px;
}
.circle-block {
    width: 12px;
    height: 12px;
    background-color: #DDDDDD;
    margin: 0 auto;
    display: block;
    border-radius: 50%;
}
/*簡章_結束*/
/*tab_開始*/
#tabs-row .nav-style-1-tabs > li > a {
    padding: 15px 30px;
    font-size: 16px;/* padding-left: 35px; */
}
#tabs-row .nav-style-1-tabs > li.active > a, .nav-style-1-tabs > li.active > a:hover, .nav-style-1-tabs > li.active > a:focus {
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    border-top: 1px solid #eee;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-top: 2px solid #b7282e;
}
#tabs-row .tab-content {
    border-radius: 4px;
    border: 1px solid #eee;
    padding: 15px;
    box-shadow: 0 0px 0px rgba(0, 0, 0,0);
    padding: 30px;
}
#tabs-row #set2 .info p {
    font-size: 14px;
    margin-bottom: 0;
}
#tabs-row #set2 h2 {
    font-size: 20px;
    color: #555;
    margin: 0;
}
#tabs-row #set2 p.cost {
    font-size: 20px;
    font-weight: 600;
    color: #a31f34;
}
#tabs-row .highlight {
    font-weight: 700;
    position: relative;
    font-size: 14px;
    z-index: 1;
}
#tabs-row .highlight:after {
    content: "";
    position: absolute;
    width: 100%;
    bottom: 2px;
    left: 2px;
    right: -16px;
    height: 8px;
    background: #ffea00;
    z-index: -1;
}
/*tab_結束*/
span.edit-date, span.post-date {
    font-size: 13px !important;
    color: #999 !important;
    font-style: italic !important;
}
/*申請進度說明_開始*/
.application-progress-1 {
    padding-top: 30px;
    padding-bottom: 20px;
}
.application-progress-1 span.subtitle {
    margin-left: 10px;
    color: #999;
    font-size: 14px;
}
.application-progress {
    padding-top: 20px;
    padding-bottom: 20px;
}
.application-progress p, .application-progress-1 p {
    color: #333;
}
.application-progress span.subtitle {
    margin-left: 10px;
    color: #999;
    font-size: 14px;
}
/*上傳照片_開始*/
.photo-size-photo {
    position: absolute;
    top: 30px;
    left: 15px;
    z-index: 5;
}
.student-photo h4 {
    text-align: center;
}
.student-photo .example-photo {
    border: 1px solid #ddd;
    width: 230px;
    padding: 10px 5px;
    margin: 0 auto;
    height: 235px;
    overflow: hidden;
}
.student-photo .example-photo img {
    display: block;
    margin: 0 auto;
    max-width: 165px;
    height: auto;
    overflow: hidden;
}
.upload-photo-info {
    border-top: 1px solid #ddd;
    margin-top: 20px;
}
.upload-photo-info span {
    color: #F00;
    display: block;
    margin: 20px 0 10px 0;
}
.upload-photo-info ul li {
    list-style: decimal;
    margin: 0 20px 5px 20px;
    font-size: 13px;
}
.photo {
    width: 180px;
    margin: 0px auto 0 auto;
    text-align: center;
}
.photo .profile-img {
    margin-bottom: 10px;
}
.photo .profile-img img {
    max-width: 180px;
    height: auto;
    border: 1px solid #ddd;
}
.modal-header {
    background-color: #efebe1;
    color: #434343;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
/*上傳照片_結束*/
/*建立新提案(未送出)_開始*/
.table-post-style-1 {
    width: 100%;
    border: 1px solid #eee;
    margin-bottom: 20px;
}
.table-post-style-1 td {
    padding: 15px 10px;
    border: 1px solid #eee;
}
.table-post-style-1 td.content label.radio-block {
    color: #555;
    font-weight: 400;
}
.table-post-style-1 td.content label.radio-block:hover {
    color: #a31f34;
    cursor: pointer
}
.table-post-style-1 td p {
    margin-bottom: 0;
    font-size: 14px;
}
.table-post-style-1 td.title {
    color: #313131;
    font-weight: bold;
}
.table-post-style-1 td.content {
    padding-left: 30px;
}
.table-post-style-1 td.content p.hor-form-help-block {
    font-size: 14px;
}
/*建立新提案(未送出)_結束*/
/*申請表_開始*/
.table-post-style-3 {
    width: 100%;
    border: 1px solid #eee;
    margin-bottom: 0px;
}
.table-post-style-3 td {
    /*    padding: 15px 10px;*/
    padding: 8px 10px;
    border: 1px solid #eee;
}
.table-post-style-3 td.content label.radio-block {
    color: #555;
    font-weight: 400;
}
.table-post-style-3 td.content label.radio-block:hover {
    color: #a31f34;
    cursor: pointer
}
.table-post-style-3 td p {
    margin-bottom: 0;
    font-size: 14px;
}
.table-post-style-3 td.title {
    color: #313131;
    font-weight: bold;
}
.table-post-style-3 td.content {
    padding-left: 30px;
}
.table-post-style-3 td.content p.hor-form-help-block {
    font-size: 14px;
}
.table-post-style-3 td.w10 {
    width: 10%
}
.table-post-style-3 td.w15 {
    width: 15%
}
.table-post-style-3 td.w20 {
    width: 20%
}
.table-post-style-3 td.w30 {
    width: 30%
}
.table-post-style-3 td.w35 {
    width: 35%
}
.table-post-style-3 td.w40 {
    width: 40%
}
.table-post-style-3 td.w50 {
    width: 50%
}
.table-post-style-3 td.w60 {
    width: 60%
}
.table-post-style-3 td.w85 {
    width: 85%
}
.table-post-style-3 td.w100 {
    width: 100%
}
/*申請表_結束*/

.info {
    margin-bottom: 15px;
}
.info ul.decimal li {
    list-style: decimal;
    margin: 5px 20px;
    color: #777;
    font-size: 14px;
}
.info h3 {
    font-weight: 400;
    color: #444;
    font-size: 16px;
}
.info p {
    font-size: 14px;
}
.info ul.square-2 {
    clear: both;
    overflow: hidden;
}
.info ul.square-2 li {
    list-style: none;
    margin: 5px 20px 10px 0;
    color: #777;
    font-size: 14px;
}
.info ul.square-1 {
    clear: both;
    overflow: hidden;
}
.info ul.square-1 li {
    list-style: square;
    margin: 5px 20px 10px;
    color: #777;
    font-size: 14px;
}
.info ul.square {
    clear: both;
    overflow: hidden;
}
.info ul.square li {
    float: left;
    margin-right: 10px;
    color: #777;
    font-size: 14px;
    padding-right: 10px;
    border-right: 1px solid #ddd;
}
.info ul.square li:last-child {
    border-right: none;
}
.info ul.square li span.text-black {
    color: #333;
    font-weight: 600;
}
/*step by step style2_開始*/
.step-by-step-progress-style-2 {
    clear: both;
    overflow: hidden;
    background-color: #eee;
    padding: 15px;
    border-radius: 4px;
}
.step-by-step-progress-style-2.active {
    background-color: #fff;
    color: #f60;
}
.step-by-step-progress-style-2 .left {
    float: left;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
    color: #aaa;
}
.step-by-step-progress-style-2 .right {
    float: left;
    width: 80%;
    padding-left: 10px;
}
.step-by-step-progress-style-2 .right h4 {
    margin: 0;
    padding: 0;
    font-size: 20px;
    color: #aaaaaa;
}
.step-by-step-progress-style-2 .right p {
    margin: 0;
    padding: 0;
    color: #aaaaaa;
}
.step-by-step-progress-style-2.active {
    background-color: #76acd0;
    color: #fff;
}
.step-by-step-progress-style-2.active .left {
    color: #76acd0;
    background-color: #fff;
}
.step-by-step-progress-style-2.active .right {
}
.step-by-step-progress-style-2.active .right h4 {
    color: #fff;
}
.step-by-step-progress-style-2.active .right p {
    color: #fff;
}
/*step by step style2_結束*/

/*step by step style6_開始*/
.step-by-step-progress-style-6 {
    clear: both;
    overflow: hidden;
    background-color: #eee;
    padding: 15px;
    border-radius: 4px;
    height: 205px;
}
.step-by-step-progress-style-6.active {
    background-color: #fff;
    color: #f60;
}
.step-by-step-progress-style-6 .left {
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
    color: #aaa;
}
.step-by-step-progress-style-6 .right {
    width: 100%;
    margin-top: 10px;
    /*    padding-left: 10px;*/
    /*    background-color: #f60;*/
}
.step-by-step-progress-style-6 .right h4 {
    margin: 0;
    padding: 0;
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 5px;
    color: #aaaaaa;
}
.step-by-step-progress-style-6 .right p {
    margin: 0;
    padding: 0;
    font-size: 16px;
    color: #aaaaaa;
}
.step-by-step-progress-style-6 .right h4.for-en {
    margin: 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 5px;
    color: #aaaaaa;
    font-weight: 600;
}
.step-by-step-progress-style-6 .right p.for-en {
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: #aaaaaa;
}
.step-by-step-progress-style-6.active {
    background-color: #76acd0;
    color: #fff;
}
.step-by-step-progress-style-6.active .left {
    color: #76acd0;
    background-color: #fff;
}
.step-by-step-progress-style-6.active .right {
}
.step-by-step-progress-style-6.active .right h4 {
    color: #fff;
}
.step-by-step-progress-style-6.active .right p {
    color: #fff;
}
/*step by step style6_開始*/

span.post-date {
    font-size: 13px;
    color: #999;
    font-style: italic;
}
/*申請表*/
.create-form-horizontal .radio, .create-form-horizontal .checkbox, .create-form-horizontal .radio-inline, .create-form-horizontal .checkbox-inline {
    padding-top: 7px;
    margin-top: 0;
    margin-bottom: 0;
}
.create-form-horizontal .radio, .create-form-horizontal .checkbox {
    min-height: 27px;
}
.create-form-horizontal .form-group:first-child {
    padding-top: 20px;
}
.create-form-horizontal .form-group {
    padding: 10px 0;
    margin: 0;
}

@media (min-width: 768px) {
    .create-form-horizontal .control-label {
        padding-top: 7px;
        margin-bottom: 0;
        text-align: right;
        color: #444;
    }
}
.create-form-horizontal .has-feedback .form-control-feedback {
    right: 15px;
}

@media (min-width: 768px) {
    .create-form-horizontal .form-group-lg .control-label {
        padding-top: 11px;
        font-size: 18px;
    }
}

@media (min-width: 768px) {
    .create-form-horizontal .form-group-sm .control-label {
        padding-top: 6px;
        font-size: 12px;
    }
}
.create-form-horizontal .form-group:before, .create-form-horizontal .form-group:after {
    display: table;
    content: " ";
}
.create-form-horizontal .form-group:after {
    clear: both;
}
.status {
    padding: 20px 0;
}
.highlight {
    font-weight: 600;
    font-size: 20px;
    position: relative;
    z-index: 1;
    color: #333333;
}
.highlight:after {
    content: "";
    position: absolute;
    width: 100%;
    bottom: 2px;
    left: 2px;
    right: -16px;
    height: 8px;
    background: #ffea00;
    z-index: -1;
}
.main .title-row {
    border-bottom: 1px dashed #ddd;
    padding-top: 10px;
    margin-bottom: 10px;
    clear: both;
    overflow: hidden;
}
.main .title-row .title-col {
    float: left;
}
.main .title-row h2.title {
    margin: 0;
    padding: 0;
    font-size: 25px;
    color: #555;
    padding-bottom: 15px;
}
.main .title-row .btn-col {
    float: right;
}
.main h3.title {
    margin: 0;
    padding: 20px 0 10px;
    font-size: 20px;
    color: #555;
}
/*.main h2.title {
	font-size:25px;
	color:#777;
	padding-bottom:15px;
	margin-bottom:10px;
}
.main a {
    position: absolute;
    top: 20px;
    right: 15px;
}*/
.statistical-row .panel-body {
    padding: 0;
}
.region ul li {
    border-bottom: 1px solid #eee;
}
.region ul li a {
    color: #8c6e4a;
    padding: 15px 15px;
    display: block;
    transition: all .5s ease-in-out;
}
.region ul li a:hover {
    background-color: rgba(163, 32, 52, 0.07);
    color: #000;
    padding-left: 25px;
}
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 7px rgba(0,0,0,.05);
    box-shadow: 0 1px 12px rgba(0,0,0,.05);
}
.panel-default {
    border-color: #eee;
}
.panel-default > .panel-heading {
    color: #333;
    background-color: #fff;
    border-color: #eee;
    font-size: 18px;
}
.statistical-row .panel-heading {
    background-color: #a31f34;
    font-size: 16px;
    color: #fff;
}
/*表單*/
#filter .form-group label {
    display: block;
    color: #444;
    font-weight: 400;
}
#create label.radio-block, #create label.checkbox-block {
    color: #777;
    font-weight: 400;
}
label {
    color: #444;
}
#create .form-group label.radio-block, #create .form-group label.checkbox-block {
    color: #777;
}
#create .form-group label.control-label {
    color: #444;
}
#create .col-md-12 label.radio-block:hover, #create .col-md-12 label.checkbox-block:hover {
    color: #000;
    cursor: pointer;
    background: rgba(163, 32, 52, 0.07);
}
#best .col-md-12 label.radio-block:hover, #best .col-md-12 label.checkbox-block:hover {
    color: #000;
    cursor: pointer;
    background: rgba(163, 32, 52, 0.07);
}
#best .table-post-style-2 tr td label.radio-block:hover, #best .table-post-style-2 tr td label.checkbox-block:hover {
    color: #000;
    cursor: pointer;
    background: rgba(163, 32, 52, 0.07);
}

#pay .col-md-12 label {
    font-size: 16px;
}

#pay .col-md-12 label.radio-block:hover, #pay .col-md-12 label.checkbox-block:hover {
    color: #000;
    cursor: pointer;
    background: rgba(163, 32, 52, 0.07);
}
#pay .table-post-style-2 tr td label.radio-block:hover, #pay .table-post-style-2 tr td label.checkbox-block:hover {
    color: #000;
    cursor: pointer;
    background: rgba(163, 32, 52, 0.07);
}
#pay .col-md-12 .pay-method  {
    margin-bottom: 50px;
}

#pay .col-md-12 .pay-method .info {
    padding-left: 17px;
}
#pay .col-md-12 .pay-method .info p {
    line-height: 1.7;
}
/*範例3*/
.font-to {
    width: calc(100% - 504px);
    display: inline-block;
    text-align: center;
}
.form-size-filter-w200-mr5 {
    margin-right: 5px;
    width: 247px;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-size-filter-w200-ml5 {
    margin-left: 5px;
    width: 247px;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-size-default-w200-mr5 {
    margin-right: 5px;
    width: 247px;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-size-default-w200-ml5 {
    margin-left: 5px;
    width: 247px;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

@media (max-width: 1199px) {
    .font-to {
        width: calc(100% - 400px);
    }
    .form-size-filter-w200-mr5 {
        width: 194px;
    }
    .form-size-filter-w200-ml5 {
        width: 194px;
    }
}

@media (max-width: 991px) {
    #tabs-row .nav-style-1-tabs {
        margin-bottom: 10px;
    }
    #tabs-row .nav-style-1-tabs > li > a {
        padding: 8px 10px;
        font-size: 16px;/* padding-left: 35px; */
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-left: 5px;
        margin-bottom: 10px;
    }
    #tabs-row .nav-style-1-tabs > li.active > a, .nav-style-1-tabs > li.active > a:hover, .nav-style-1-tabs > li.active > a:focus {
        border: 1px solid #a31f34;
        background-color: #a31f34;
        color: #fff;
    }
    .main .title-row .title-col {
        float: none;
        padding-bottom: 10px;
    }
    .main .title-row .btn-col {
        float: none;
        padding-bottom: 20px;
    }
    .font-to {
        width: inherit;
        padding: 10px 0;
    }
    .form-size-filter-w200-mr5 {
        width: 100%;
    }
    .form-size-filter-w200-ml5 {
        width: 100%;
    }
    .logo-row .brand-info h1 {
        font-size: 26px;
        padding: 0px 0 5px 0;
    }
    .logo-row .brand-info h2 {
        font-size: 18px;
        padding: 0px 0 5px 0;
    }
}

@media (max-width: 767px) {
    .form-size-filter-w200-mr5 {
        margin-right: 0px;
        margin-bottom: 8px;
        display: block;
        width: 100%;
    }
    .form-size-filter-w200-ml5 {
        margin-left: 0px;
        margin-top: 8px;
        display: block;
        width: 100%;
    }
    .form-size-default-w200-mr5 {
        margin-right: 0px;
        margin-bottom: 8px;
        display: block;
        width: 100%;
    }
    .form-size-default-w200-ml5 {
        margin-left: 0px;
        margin-top: 8px;
        display: block;
        width: 100%;
    }
}
.media-body.post-row {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 0.5rem;
    border: 1px solid #eee;
}
/*表格-提名作業*/
table.table-list-style1 {
    width: 100%;
    border-collapse: collapse;
}
table.table-list-style1 td:nth-of-type(1) {
    width: 20%
}
table.table-list-style1 td:nth-of-type(2) {
    width: 60%
}
table.table-list-style1 td:nth-of-type(3) {
    width: 20%
}
table.table-list-style1 tr:nth-of-type(odd) {
    background: #eee;
}
table.table-list-style1 th {
    background: #333;
    color: white;
    font-weight: bold;
}
table.table-list-style1 td, table.table-list-style1 th {
    padding: 10px;
    border: 1px solid #eee;
}
table.table-list-style1 td {
    color: #888;
}
table.table-list-style1 tr:nth-child(odd) {
    background-color: #fff;
}
table.table-list-style1 tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}
table.table-list-style1 tr:hover {
    background: rgba(163, 32, 52, 0.07);
}
table.table-list-style1 tr:hover td {
    color: #000;
}
table.table-list-style2 {
    width: 100%;
    border-collapse: collapse;
}
table.table-list-style2 td:nth-of-type(1) {
    width: 10%
}
table.table-list-style2 td:nth-of-type(2) {
    width: 15%
}
table.table-list-style2 td:nth-of-type(3) {
    width: 21%
}
table.table-list-style2 td:nth-of-type(4) {
    width: 10%
}
table.table-list-style2 td:nth-of-type(5) {
    width: 12%
}
table.table-list-style2 td:nth-of-type(6) {
    width: 12%
}
table.table-list-style2 td:nth-of-type(7) {
    width: 12%
}
table.table-list-style2 td:nth-of-type(8) {
    width: 8%
}
table.table-list-style2 tr:nth-of-type(odd) {
    background: #eee;
}
table.table-list-style2 th {
    background: #333;
    color: white;
    font-weight: bold;
}
table.table-list-style2 td, table.table-list-style2 th {
    padding: 10px;
    border: 1px solid #eee;
}
table.table-list-style2 td {
    color: #888;
}
table.table-list-style2 tr:nth-child(odd) {
    background-color: #fff;
}
table.table-list-style2 tr:nth-child(even) {
    background-color: #f9f9f9;
}
table.table-list-style2 tr:hover {
    background: rgba(163, 32, 52, 0.07);
}
table.table-list-style2 tr:hover td {
    color: #000;
}
/*建立新提案(未送出)_開始*/
.table-post-style-2 {
    width: 100%;
    border: 1px solid #eee;
    margin-bottom: 20px;
}
.table-post-style-2 td {
    padding: 15px 10px;
    border: 1px solid #eee;
}
.table-post-style-2 td p {
    margin-bottom: 0;
    font-size: 14px;
}
.table-post-style-2 td.title {
    width: 15%;
    color: #555;
    font-weight: bold;
}
.table-post-style-2 td.content {
    width: 85%;
}
.table-post-style-2 td.content p.hor-form-help-block {
    font-size: 14px;
}
/*建立新提案(未送出)_結束*/


/*====內容_結束====*/

/*====footer_開始====*/
.footer-link span {
    border-left: 1px solid #d9d9d9;
    color: #999999;
    margin-left: 18px;
    padding-left: 18px;
}
.footer-link ul {
    padding-top: 20px;
    padding-left: 8px;
}
.footer-link ul li {
    padding-bottom: 10px;
}
.footer-link ul li a {
    color: #00afd7;
}
.footer-link ul li a:hover {
    color: #19338f;
}
.footer-link img {
	width: 150px;
	height: auto;
	opacity: 0.3;
}
footer .support-browser-row {
    position: relative;
    height: 150px;
}
footer .support-browser-row p {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 14px;
}
/*====footer_結束====*/

/*====其它_開始====*/

/*背景色*/
.bg-primary {
    background-color: #007bff !important;
}
a.bg-primary:hover, a.bg-primary:focus, button.bg-primary:hover, button.bg-primary:focus {
    background-color: #0062cc !important;
}
.bg-secondary {
    background-color: #6c757d !important;
}
a.bg-secondary:hover, a.bg-secondary:focus, button.bg-secondary:hover, button.bg-secondary:focus {
    background-color: #545b62 !important;
}
.bg-success {
    color: rgba(21, 87, 36, 0.6) !important;
    background-color: rgba(212, 237, 218, 0.4) !important;
    border: 1px solid rgba(195, 230, 203, 0.3) !important;
}
a.bg-success:hover, a.bg-success:focus, button.bg-success:hover, button.bg-success:focus {
    background-color: #1e7e34 !important;
}
.bg-info {
    background-color: #17a2b8 !important;
}
a.bg-info:hover, a.bg-info:focus, button.bg-info:hover, button.bg-info:focus {
    background-color: #117a8b !important;
}
.bg-warning {
    color: #856404 !important;
    background-color: rgba(255, 243, 205, 0.37) !important;
    border: 1px solid rgba(228, 207, 140, 0.48) !important;
}
a.bg-warning:hover, a.bg-warning:focus, button.bg-warning:hover, button.bg-warning:focus {
    background-color: #d39e00 !important;
}
.bg-danger-circle {
    background-color: rgb(243, 54, 71) !important;
}
.bg-danger {
    color: rgba(212, 22, 40, 0.7) !important;
    background-color: rgba(248, 215, 218, 0.3) !important;
    border: 1px solid rgba(245, 198, 203, 0.3) !important;
}
a.bg-danger:hover, a.bg-danger:focus, button.bg-danger:hover, button.bg-danger:focus {
    background-color: #bd2130 !important;
}
.bg-light {
    background-color: #f8f9fa !important;
}
a.bg-light:hover, a.bg-light:focus, button.bg-light:hover, button.bg-light:focus {
    background-color: #dae0e5 !important;
}
.bg-dark {
    background-color: #343a40 !important;
}
a.bg-dark:hover, a.bg-dark:focus, button.bg-dark:hover, button.bg-dark:focus {
    background-color: #1d2124 !important;
}
.bg-white {
    background-color: #fff !important;
}
.bg-transparent {
    background-color: transparent !important;
}
.title-double-line {
}
.title-double-line h3 {
    margin: 0;
    padding: 0px 0 10px 22px;
    font-size: 20px;
    color: #555;
}
.title-double-line:before {
    content: "";
    position: absolute;
    z-index: 99;
    width: 12px;
    height: 20px;
    top: 2px;
    background: linear-gradient(270deg, rgba(0, 175, 215, 1)52%, rgba(25,51, 143, 1)34%);
    background: -moz-linear-gradient(270deg, rgba(0, 175, 215, 1)52%, rgba(25,51, 143, 1)34%);
    background: -webkit-linear-gradient(270deg, rgba(0, 175, 215, 1)52%, rgba(25,51, 143, 1)34%);
    background: -o-linear-gradient(270deg, rgba(0, 175, 215, 1)52%, rgba(25,51, 143, 1)34%);
}
.section-number {
    font-size: 22px;
    font-weight: bold;
}
.btn-plr-20 {
    padding-left: 20px;
    padding-right: 20px;
}
.btn-br-50 {
    border-radius: 50px;
}
.btn-lg {
    padding: 10px 30px;
    font-size: 16px;
}
/*分頁*/
.pagination-row {
    display: flex;
    justify-content: center;
    align-items: center;
}
.pagination > li.overflow span:before {
    content: "...";
}
#ex2 {
}
.pagination > li > a {
    color: #a78e71;
    border: 1px solid #eee;
}
.page-link {
    position: relative;
    display: block;
    padding: 0.3rem 0.75rem;
    margin-left: 8px;
    margin-right: 8px;
    line-height: 1.25;
    color: #888;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 0.5rem;
}
.page-link:hover {
    z-index: 2;
    color: #ff5a00;
    text-decoration: none;
    background-color: #fff;
    border-color: #ff5a00;
}
.page-item.active .page-link {
    z-index: 1;
    color: #fff;
    background-color: #b7282e;
    border-color: #b7282e;
}
.page-item.active:hover .page-link {
    z-index: 1;
    color: #fff;
    background-color: #b7282e;
    border-color: #b7282e;
}
.pagination > li:first-child > a, .pagination > li:first-child > span {
    margin-left: 0;
    border-top-left-radius: 0.5rem;
    border-bottom-left-radius: 0.5rem;
}
.pagination > li.overflow span:before {
    content: "...";
}
.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
    color: #777;
    cursor: not-allowed;
    background-color: transparent;
    border-color: #ddd;
    border: none;
}

/*====其它_結束====*/

@media (min-width: 768px) {
    .navbar-right {
        padding-top: 10px;
    }
    /*解決表頭按鈕文字過長問題*/
    @media (min-width: 768px) {
        .navbar-header {
            float: none;
        }
    }
    .navbar-nav > li > a {
        padding-top: 0px;
        padding-bottom: 0px;
    }
}

/*====手機_開始====*/
@media (max-width: 767px) {
    #tabs-row .nav-style-1-tabs > li > a {
        padding: 8px 10px;
        font-size: 14px;/* padding-left: 35px; */
        border: 1px solid #ddd;
        border-radius: 4px;
        margin-left: 5px;
        margin-bottom: 10px;
    }
    #tabs-row .tab-content {
        padding: 0px;
        border: none;
    }
    table.table-list-style2 td, table.table-list-style2 th {
        text-align: left;
        padding: 15px;
        border: 1px solid #eee;
    }
    table.table-list-style2 td:nth-of-type(1) {
        width: inherit;
    }
    table.table-list-style2 td:nth-of-type(2) {
        width: inherit;
    }
    table.table-list-style2 td:nth-of-type(3) {
        width: inherit;
    }
    table.table-list-style2 td:nth-of-type(4) {
        width: inherit;
    }
    table.table-list-style2 td:nth-of-type(5) {
        width: inherit;
    }
    table.table-list-style2 td:nth-of-type(6) {
        width: inherit;
    }
    table.table-list-style2 td:nth-of-type(7) {
        width: inherit;
    }
    table.table-list-style2 td:nth-of-type(8) {
        width: inherit;
    }
    table.table-list-style2, table.table-list-style2 thead, table.table-list-style2 tbody, table.table-list-style2 th, table.table-list-style2 td, table.table-list-style2 tr {
        display: block;
    }
    table.table-list-style2 thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    table.table-list-style2 tr {
        border: 1px solid #eee;
        margin-bottom: 20px;
        box-shadow: 0 1px 12px rgba(0,0,0,0.05);
    }
    table.table-list-style2 td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 45%;
    }
    table.table-list-style2 td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 14px;
        left: 15px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        color: #313131;
        font-weight: 600;
    }
    table.table-list-style2 tr:nth-child(even) {
        background-color: #fff;
    }
    table.table-list-style2 td:nth-of-type(1):before {
        content: "類別";
    }
    table.table-list-style2 td:nth-of-type(2):before {
        content: "課程名稱(中文)";
    }
    table.table-list-style2 td:nth-of-type(3):before {
        content: "課程名稱(英文)";
    }
    table.table-list-style2 td:nth-of-type(4):before {
        content: "授課語言";
    }
    table.table-list-style2 td:nth-of-type(5):before {
        content: "開設系所(中文)";
    }
    table.table-list-style2 td:nth-of-type(6):before {
        content: "開設系所(英文)";
    }
    table.table-list-style2 td:nth-of-type(7):before {
        content: "必/選修(R/E)";
    }
    table.table-list-style2 td:nth-of-type(8):before {
        content: "學分數";
    }
    .language {
        right: 15px;
    }
    header {
        padding-top: 10px;
    }
    /*
    .logo-row .brand-info {
        padding-left: 5px;
    }
    .logo-row .brand-info h1 {
        font-size: 18px;
        margin: 0;
        padding: 16px 0 5px 0;
    }
    .logo-row .brand-info h2 {
        font-size: 12px;
        margin: 0;
        padding: 0;
    }
    */
    .region ul li {
        width: 50%;
        float: left;
    }
    .region ul li a {
        color: #8c6e4a;
        padding: 15px 15px;
        display: block;
    }
    .navbar-toggle {
        margin-top: 25px;
    }
    /*logo和名稱置中*/
    .navbar-header {
    }
    .navbar-toggle {
        position: absolute;
        float: none;
        top: 0;
        right: 0px;
        z-index: 9999;
    }
    .logo-row {
        display: block;
    }
    .logo-row .brand-img {
        float: none;
    }
    .logo-row .brand-img img {
        max-width: 70px;
    }
    .logo-row .brand-info {
        float: none;
    }
    .logo-row .brand-info h1 {
        text-align: center;
        margin: 0 0 5px 0;
        padding: 0;
        font-size: 22px;
    }
    .logo-row .brand-info h2 {
        text-align: center;
        font-size: 18px;
    }
    footer .support-browser-row {
        padding-top: 10px;
    }
    footer .support-browser-row p {
        text-align: left;
        font-size: 12px;
    }
    footer .support-browser-row {
        position: relative;
        height: auto;
    }
    footer .support-browser-row p {
        position: relative;
        bottom: inherit;
        right: inherit;
        font-size: 12px;
    }
}

@media (max-width: 575px) {
    .logo-row .brand-info h1 {
        text-align: left;
        font-size: 16px;
    }
    .logo-row .brand-info h2 {
        text-align: left;
        font-size: 14px;
    }
}
/*====手機_結束====*/

/*v1.1*/
.col-fixed {
    float: left;
    margin-left: 0;
    margin-right: 0;
}

.sidebar-row {
    float: left;
    margin-left: 0;
    margin-right: 0;
}

/*固定欄位寬度*/
.col-fixed {
    background: #fff;
    width: 300px;
    padding-left:15px;
    padding-right:15px;
}

.sidebar-row {
    background: #fff;
    width:calc(100% - 300px);
}

@media (max-width: 991px) {

    /*固定欄位寬度*/
    .col-fixed {
        /*	  background: #CCC;*/
        width: 140px;
    }

    .sidebar-row {
        /*	  background: #EEE;*/
        width:calc(100% - 300px);
    }
}
@media (max-width: 767px) {
    /*固定欄位寬度*/
    .col-fixed {
        /*	  background: #CCC;*/
        width: 100%;
    }

    .sidebar-row {
        /*	  background: #EEE;*/
        width:calc(100% - 0px);
    }
}


/*step by step style3_開始*/
.step-by-step-progress-style-3 {
    clear: both;
    overflow: hidden;
    background-color: #eee;
    padding: 15px;
    border-radius: 4px;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
/*step by step style3_開始*/
.step-by-step-progress-style-3 a {
    cursor: default;
}
.step-by-step-progress-style-3.is-active {
    background-color: #fff;
    color: #f60;
}
.step-by-step-progress-style-3 .left {
    position: relative;
    float: left;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    line-height: 40px;
    text-align: center;
    color: #aaa;
}
.step-by-step-progress-style-3.is-complete .left {
    color: #73c796;

}
.step-by-step-progress-style-3.is-complete {
    background-color: #73c796;
    color: #fff;
}
.step-by-step-progress-style-3.is-complete a {
    cursor: pointer;
}
.step-by-step-progress-style-3.is-complete .right h4{
    color: #fff;
}
.step-by-step-progress-style-3.is-complete .right p {
    color: #fff;
}
.step-by-step-progress-style-3.is-complete .left .fa-check-col {
    position: absolute;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    background-color: #0aa94c;
    color: #fff;
    top: 20px;
    right: -5px;
    font-size: 11px;
}



.step-by-step-progress-style-3 .right {
    float: left;
    width: 80%;
    padding-left: 10px;
    padding-top: 5px;
}
.step-by-step-progress-style-3 .right h4 {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    color: #aaaaaa;
    margin-bottom: 8px;
}
.step-by-step-progress-style-3 .right p {
    margin: 0;
    padding: 0;
    color: #aaaaaa;
    font-size: 14px;
    line-height: 1.2;
}
.step-by-step-progress-style-3.is-active {
    background-color: #3699ff;
    color: #fff;
}
.step-by-step-progress-style-3.is-active .left {
    color: #3699ff;
    background-color: #fff;
}
.step-by-step-progress-style-3.is-active .right {
}
.step-by-step-progress-style-3.is-active .right h4 {
    color: #fff;
}
.step-by-step-progress-style-3.is-active .right p {
    color: #fff;
}
/*step by step style3_結束*/

#pagination {
    margin-top: 10px;
}

#pagination a {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    display: block;
    margin-right: 8px;
    border-radius: 0.5rem;
}

#pagination .active a {
    z-index: 1;
    color: #fff;
    background-color: #00afd7;
    border-color: #00afd7;
}
.main .title-row {
    border-bottom: 1px dashed #999;
}
.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 15px;
    -webkit-box-shadow: 0 1px 7px rgba(0,0,0,.05);
    box-shadow: 0 1px 12px rgba(0,0,0,.05);
}