@charset "UTF-8";
/* 頁面區塊(header/footer) 元素樣式(a/select) 組件樣式(card/list) 規則(margin/float) 表單系統(form) 表格系統(table/RWD table) */
:root{
    --main:#bb292e;
    --dark:#b8282e;
    --light:#c0a397;
    --darker:#651d1f;
    --sup_title:#f3b4a1;
    --a-main:#337ab7;
    --a-dark:#0B2D4E;
    --a-inverse:#ffffff;
    --second:#ffe082;
    --text:#4a4a4a;
}
*,html {
    font-size:16px;
    font-family:'WenQuanYi Zen Hei','文泉驛正黑','Heiti TC','黑體-繁','LiHei Pro','儷黑 Pro','PingFang TC','Microsoft JhengHei','微軟正黑體',sans-serif;
}
body {background-color:#eaeaea}
.row {float:none;clear:both}
.glyphicon{font-family:'Glyphicons Halflings'}
.index-step {
    background:rgb(184, 184, 184);
    background:url(../img/index_bgpattern.png) no-repeat right, linear-gradient(0deg, rgb(224, 224, 224) 0%, rgba(255, 255, 255, 0) 100%);
    background-size:contain;
}
/* 頁面區塊(header/footer) */
.indexNav [class^="container"] {background:#fff;background-repeat:repeat-x}
nav.indexNav {z-index:999}
nav.navbar,.sub-menu {
    border:0;
    margin:0;
    padding:0;
    border-radius:0px;
    margin-bottom:0
}
.subMenu {
    clear:both;
    right:0px;
    float:right !important;
    position:absolute;
    top:0;
    width:100%;
    background:rgb(255,118,86);
    background:linear-gradient(90deg, rgba(255,118,86,1) 0%, rgba(212,53,59,1) 100%);
    padding:0 20px;
}
.subMenu.nav li {float:right !important}
.subMenu.nav li>a,.subMenu.nav li .time {
    padding:15px 10px;
    line-height:20px;
    vertical-align:middle;
    color:#fff;
}
.subMenu.nav li>a:hover,.subMenu.nav li>a:active,.subMenu.nav li>a:focus,.subMenu.nav li :is(.time,.timeless) {color:#f5b335}
.mainMenu>li>a {font-size:18px}
.secNav {background-image:url(../img/bg_header.png);z-index:9}
.content-discription {background:rgba(255, 255, 255, 0.6);border-radius:7px;padding:10px}
/*S1*/
.indexSearch {
    position:absolute;
    width:80%;
    background:rgba(0,0,0,.6);
    padding:15px 30px!important;
    z-index:2
}
.indexSearch:hover,.indexSearch:active,.indexSearch:focus{background:rgba(0,0,0,1)}
.indexSearch .form-control{border-radius:4px 0 0 4px!important}
.indexSearch .input-group .select-default{
    border:0;
    background:#ffffff;
    background-image:url("../img/select-arrow.png");
    background-position:calc(100% - 5px) 50%;
    background-repeat:no-repeat;
    border-left:1px solid #ccc;
    width:100%;
    border-top-left-radius:0;
    border-bottom-left-radius:0;
}
.input-group-btn{width:200px}
.indexSearch .input-group{width:calc(100% - 55px)}
.indexSearch .btn-lg{padding:0 5px;background-color:transparent;border:none}
.indexSearch .glyphicon-search{font-size:40px}
.index-carousel{
    height:400px;
    overflow:hidden;
    margin:0;
    padding:0;
    display:flex;
    justify-content:center;
    align-items:center;
}
.index-title::after{
    content:'';
    display:block;
    width:60px;
    margin:20px auto;
    height:2px;
    background:#f5b335;
}
/*S2*/
.index-about,.index-news,.index-class,.index-copy{padding-top:50px;padding-bottom:50px}
.index-about,.index-class{background-color:#ffffff}
/*S3*/
.bg-animation {
    background:-moz-linear-gradient(45deg, #02e1ba 0%, #26c9f2 29%, #d911f2 66%, #ffa079 100%);
    background:-webkit-linear-gradient(45deg, #02e1ba 0%, #26c9f2 29%, #d911f2 66%, #ffa079 100%);
    background:linear-gradient(45deg, #02e1ba 0%, #26c9f2 29%, #d911f2 66%, #ffa079 100%);
    background-size:400% 400%;
    -webkit-animation:Gradient 15s ease infinite;
    -moz-animation:Gradient 15s ease infinite;
    animation:Gradient 15s ease infinite;
    min-height:520px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:space-evenly;
    overflow:hidden;
    position:relative;
}
.bg-animation::before,.bg-animation::after {
    content:"";
    width:70vmax;
    height:70vmax;
    position:absolute;
    background:rgba(255, 255, 255, 0.07);
    left:-20vmin;
    top:-20vmin;
    animation:morph 15s linear infinite alternate, spin 20s linear infinite;
    z-index:1;
    will-change:border-radius, transform;
    transform-origin:30% 30%;
    pointer-events:none;
}
.bg-animation::after {
    width:70vmin;
    height:70vmin;
    left:auto;
    right:-10vmin;
    top:auto;
    bottom:0;
    animation:morph 10s linear infinite alternate, spin 26s linear infinite reverse;
    transform-origin:10% 10%;
}
@-webkit-keyframes Gradient {
    0% {background-position:0 50%}
    50% {background-position:100% 50%}
    100% {background-position:0 50%}
}
@-moz-keyframes Gradient {
    0% {background-position:0 50%}
    50% {background-position:100% 50%}
    100% {background-position:0 50%}
}
@keyframes Gradient {
    0% {background-position:0 50%}
    50% {background-position:100% 50%}
    100% {background-position:0 50%}
}
@keyframes morph {
    0% {border-radius:40% 60% 60% 40% / 70% 30% 70% 30%}
    100% {border-radius:40% 60%}
}
@keyframes spin {to {transform:rotate(1turn)}}
.footer {color:#fff;background:rgb(255,118,86);
    background:linear-gradient(90deg, rgba(255,118,86,1) 0%, rgba(212,53,59,1) 100%)}
.footer .container-fluid {padding:15px}
.footer p {line-height:2;font-size:1rem;margin-bottom:0}

/* 元素樣式(a/select) */
a {color:#15518c;text-decoration:none}
a:focus,a:active,a:hover {color:#00366b;text-decoration:underline;-webkit-transition:all 0.24s ease-in-out;-moz-transition:all 0.24s ease-in-out;-o-transition:all 0.24s ease-in-out;transition:all 0.24s ease-in-out}
.a-inverse,.inverse {color:#fff}
.a-inverse:focus,.a-inverse:active,.a-inverse:hover,.active .a-inverse {color:#f5b335}
.mainMenu.a-inverse>li>a{color:var(--a-main)}
.mainMenu.a-inverse>li>a:focus,.mainMenu.a-inverse>li>a:active,.mainMenu.a-inverse>li>a:hover,.mainMenu.a-inverse>li.active>a{color:var(--a-dark)}
.navbar-default .navbar-nav.a-inverse>li.active>a,
.navbar-default .navbar-nav.a-inverse>li.open>a {
    background-image:none;
    box-shadow:none;
    background-color:#fff !important
}
a.a-inverse::after,.mainMenu.a-inverse>li>a::after {
    content:'';
    display:block;
    width:0;
    height:2px;
    background:#f5b335;
    transition:width .3s;
}
a.a-inverse:hover::after,.mainMenu.a-inverse>li>a:hover::after {width:100%;transition:width .3s}
a.more {
    background:#90c2e799;
    color:#ffffff;
    font-weight:bold;
    text-align:center;
    border-radius:20px;
    padding:5px 20px;
    font-size:0.8rem;
}
a.more:focus,a.more:hover,a.more:active {background:#90c2e7;color:#ffffff}
p {line-height:2;font-size:1.2rem}
input {float:left}
::selection {background-color:#ff574d;color:#fff}
/*清除ie的預設樣式，隱藏小三角*/
select::-ms-expand {display:none}
select {
    /*Chrome和Firefox裡面的邊框不同*/
    border:solid 1px #000;
    /*將預設的select選取框樣式清除*/
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    /*選擇框最右顯示小三角下拉*/
    font-size:14px;
    height:34px;
    overflow:hidden;
    text-overflow:clip;
    white-space:nowrap;
    text-align:left!important;
    max-width:100%;
}
.select-default {
    border:1px solid #ccc;
    padding:6px 12px;
    font-size:14px;
}
hr.hr-blank {background-color:transparent}
hr {
    height:1px !important;
    background-color:#eee;
    display:inline-block;
    width:100%;
    border:0 !important;
    clear:both;
}

/* 組件樣式(card/list) */
.btn-default {
    color:#fff;
    background-image:none;
    background-color:rgba(192, 27, 27, 0.8);
    border-color:rgba(192, 27, 27, 0.8);
    text-shadow:none;
}
.btn-default:focus,.btn-default.focus,
.btn-default:active,.btn-default.active,
.btn-default:hover,.open>.dropdown-toggle.btn-default {
    color:#fff;
    background-color:#c01b1b;
    border-color:#c01b1b;
}
.btn-seemore {
    border-radius:20px;
    color:#50607b;
    background:rgba(250, 250, 250, 0.9);
    padding:8px 16px;
    box-shadow:0 2px 8px rgba(0,0,0,.24);
}
.btn-seemore:is(:focus,:active,:hover){
    color:#263d5d;
    background:#fff;
    box-shadow:0 4px 10px rgba(0,0,0,.24);
    transition:all .24s;
}

.title-h2{font-weight:900;line-height:2}
.deg-img{
    position:relative;
    z-index:4;
    padding:0 10px 0 40px;
    margin-bottom:-60px;
}
.deg-content{
    padding:60px 30px 30px;
    background:#ffffff;
    transform:skew(-12deg);
}
.list-default dl{
    border-bottom:1px solid #90c2e7;
    padding:24px 15px;
    margin-bottom:0;
}
.list-default dl:hover{
    -webkit-transition:all 0.24s ease-in-out;
    -moz-transition:all 0.24s ease-in-out;
    -o-transition:all 0.24s ease-in-out;
    transition:all 0.24s ease-in-out;
    background:#ffffff;
}
.list-default dt{font-weight:900;margin-bottom:1em}
.list-default dd{width:100%;font-weight:300}
.bg-animation .title-h2,.bg-gradient-1 .title-h2{color:#fff;text-shadow:1px 2px 3px #333}
.bg-gray{
    background:rgb(184, 184, 184);
    background:linear-gradient(0deg, rgb(224, 224, 224) 100%, rgba(255, 255, 255, 0) 0%);
}
.bg-gray .title-h2{color:#286090;text-shadow:1px 2px 3px #969696}
.bg-gradient-1{
    background:rgb(255,68,155);
    background:-moz-linear-gradient(90deg, rgba(255,68,155,1) 0%, rgba(245,107,107,1) 35%, rgba(194,121,255,1) 100%);
    background:-webkit-linear-gradient(90deg, rgba(255,68,155,1) 0%, rgba(245,107,107,1) 35%, rgba(194,121,255,1) 100%);
    background:linear-gradient(90deg, rgba(255,68,155,1) 0%, rgba(245,107,107,1) 35%, rgba(194,121,255,1) 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff449b",endColorstr="#c279ff",GradientType=1);
}

/*icon會變的手風琴效果*/
.panel-group .panel {
    border-radius:0;
    box-shadow:none;
    border-color:transparent;
    background-color:transparent;
}
.panel-title>a {
    display:block;
    padding:10px;
    text-decoration:none;
    color:#4e8198;
}
.more-less {float:right;color:#4e8198}
.panel-default>.panel-heading+.panel-collapse>.panel-body {border-top-color:#EEEEEE}
.css-beforeImg::before {
    content:' ';
    border-top-left-radius:50% 0px;
    border-top-right-radius:50% 0px;
    border-bottom-right-radius:1000%;
    border-bottom-left-radius:50% 0px;
    width:36px;
    height:36px;
    background:#90c2e7;
    z-index:-2;
    position:absolute;
    margin-left:-8px;
    margin-top:-8px;
}
.css-beforeImg {color:#fff;font-weight:900}
h4.css-beforeTriangle {padding:10px;background:rgba(255, 255, 255, .9)}
.css-beforeTriangle,.panel-title {border:2px solid #a1bbc6;position:relative;margin-bottom:20px}
.css-beforeTriangle:before,.panel-title:before {
    border-color:#a1bbc6 transparent transparent;
    border-style:solid solid solid;
    border-width:20px 20px 20px 20px;
    bottom:-40px;
    content:'';

    height:0px;
    left:20px;

    /* 必須指定，否則會變梯形 */
    position:absolute;

    width:0px;
}
.css-beforeTriangle:before {border-color:#4e8198 transparent transparent}
.css-beforeTriangle {border:2px solid #4e8198}
.css-beforeTriangle:after,.panel-title:after {
    border-color:transparent transparent transparent;
    border-style:solid solid solid solid;
    border-width:20px;
    bottom:-33px;
    content:'';

    height:0px;
    left:20px;

    /* 必須指定，否則會變梯形 */
    position:absolute;

    width:0px;
}
/*/icon會變的手風琴效果*/
.checkbox-table {position:absolute;right:8px;top:8px}
.tag-table {position:absolute;right:8px;bottom:24px}
.label-tag {background-color:#a1bbc6;border-radius:0 .25em .25em 0}
.label-tag::before {
    border-color:transparent #a1bbc6 transparent transparent;
    border-style:solid solid solid;
    border-width:10px 10px 10px 10px;
    content:'';
    height:0px;
    left:-20px;
    top:2px;
    position:absolute;
    width:0px;
}

.nav-pills>li>a {font-size:1.2rem;border-radius:4px 4px 0 0}
.nav-pills>li.active>a,.nav-pills>li.active>a:hover,.nav-pills>li.active>a:focus{
    color:#fff;
    background-color:#a31621;
    font-weight:bold;
    font-size:1.2rem;
}

.panel-default .panel-footer {
    background-color:transparent;
    text-align:center;
    padding:10px 15px;
    margin-bottom:20px;
}
.panel-group.panel-default .panel-heading+.panel-collapse>.list-group,
.panel-group.panel-default .panel-heading+.panel-collapse>.panel-body {border-top:none;box-shadow:none}

.panel-default>.list-group .list-group-item,
.panel-default>.panel-collapse>.list-group .list-group-item,
.content-method .list-group .list-group-item {
    margin-bottom:0;
    border-width:0;
    border:none;
    background-color:transparent;
}

.panel-default>.panel-collapse>ol.list-group,.content-method ol.list-group {counter-reset:num}
.panel-default>ol.list-group .list-group-item::before,
.panel-default>.panel-collapse>ol.list-group .list-group-item::before,
.content-method ol.list-group .list-group-item::before,
.content-method ol.list-group .list-group-item::before {
    background:rgba(240, 126, 105, 0.8);
    color:#fff;
    font-weight:bold;
    text-align:center;
    position:absolute;
    display:inline-block;
    left:15px;
    border-radius:7px;
    counter-increment:num;
    content:counter(num);
    width:1.8em;
    text-indent:0;
}

.panel-default>ol.list-group .list-group-item:hover::before,
.panel-default>.panel-collapse>ol.list-group .list-group-item:hover::before,
.content-method ol.list-group .list-group-item:hover::before,
.content-method ol.list-group .list-group-item:hover::before {background:#d9444a}

.panel-default>ol.list-group .list-group-item,
.panel-default>.panel-collapse>ol.list-group .list-group-item,
.content-method ol.list-group .list-group-item,
.content-method ol.list-group .list-group-item {
    text-indent:2em;
    -webkit-transition:all 0.24s ease-in-out;
    -moz-transition:all 0.24s ease-in-out;
    -o-transition:all 0.24s ease-in-out;
    transition:all 0.24s ease-in-out;
}

.panel-default>.list-group .list-group-item>a,
.panel-default>.panel-collapse>.list-group .list-group-item>a {
    width:100%;
    display:block;
}

.panel-default .list-group .list-group-item:hover,
.content-method .list-group .list-group-item:hover {
    background-color:rgba(255, 255, 255, 0.6);
    -webkit-transition:all 0.24s ease-in-out;
    -moz-transition:all 0.24s ease-in-out;
    -o-transition:all 0.24s ease-in-out;
    transition:all 0.24s ease-in-out;
}

.panel-default>.panel-heading {
    padding:0;
    border-radius:0;
    background-image:none;
    border-color:none;
}

.panel-default .panel-title>a {font-size:1.3rem;font-weight:bold}

.panel-default .panel-title>a:hover {
    background-color:rgba(255, 255, 255, 0.4);
    -webkit-transition:all 0.24s ease-in;
    -moz-transition:all 0.24s ease-in;
    -o-transition:all 0.24s ease-in;
    transition:all 0.24s ease-in;
}

/*統一的側邊欄框線*/
.tab-contentWrapper {padding:15px 0}
.mainTabs>li>a,.tabBar .nav.navbar-nav>li>a {font-size:1.3rem}
.mainTabs.nav-tabs>li.active>a,
.mainTabs.nav-tabs>li.active>a:focus,
.mainTabs.nav-tabs>li.active>a:hover {color:#fff;background-color:#662b72;font-weight:bold}
.tab-pane .tab-content .tab-content {border:1px solid #EEEEEE;padding:10px 0}

.sub a,.sub p,.sub span,.sub font,.sub i,.sub li {opacity:0.9}
.sub i {color:#f74f2e}

/* 規則(margin/float) */
.p-0 {padding:0 !important}
.pv-10 {padding:10px 0}
.m-0 {margin:0 !important}
.mt-0 {margin-top:0}
.mt-20 {margin-top:20px}
.mb-10{margin-bottom:10px}
.mb-20{margin-bottom:20px}
.border-unstyled,.b-0 {border:none!important}
.w-full {width:100%}
.inline-block{display:inline-block}
.flex{display:flex;justify-content:center;align-items:center}
.ellipsis{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 表單系統(form) */
.form-control:focus{
    border-color:#281c1b;
    outline:0;
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgb(40 28 27);
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgb(40 28 27);
}
/* 表格系統(table/RWD table) */
.table-bordered>tbody>tr>td,.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>td,.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,.table-bordered>thead>tr>th,
.table>tbody>tr>td,.table>tbody>tr>th,
.table>tfoot>tr>td,.table>tfoot>tr>th,
.table>thead>tr>td,.table>thead>tr>th {border:0}
.table-bordered>tbody>tr,tr {border-bottom:1px solid #90c2e7}
tr:hover,tr:focus {
    background:rgba(255, 255, 255, 0.4);
    -webkit-transition:all 0.24s ease-in-out;
    -moz-transition:all 0.24s ease-in-out;
    -o-transition:all 0.24s ease-in-out;
    transition:all 0.24s ease-in-out;
}
td {position:relative}

/*斷點們*/
/*當螢幕小於767px時*/
@media screen and (max-width:767px) {
    .navbar-brand>img {height:32px;width:auto}
    .navbar-brand {padding:9px 0 0 5px}
    .navbar-toggle+.navbar-toggle{margin-right:0}
    .indexSearch {width:100%;padding:15px 10px!important}
    .indexSearch .input-group-lg input.form-control{width: calc(100% - 116px)}
    .indexNav [class^="container"] {background-position:contain;margin-top:0;height:50px}
    nav.indexNav>div>.navbar-collapse {background:#fff}
    .mainMenu.a-inverse>li>a {color:#505050;font-weight:bold}

    .mainMenu.a-inverse>li>a:focus,.mainMenu.a-inverse>li>a:active,.mainMenu.a-inverse>li>a:hover,
    .mainMenu.a-inverse>li.active>a {
        color:#333333;
        font-weight:700;
        text-shadow:2px 2px 0px #fff;
    }
    .indexNav>div>.collapse.in ul.visible-xs{border-top:1px solid #ccc;border-bottom:1px solid #ccc}
    .indexNav>div>.collapse.in ul.visible-xs{
        display: grid!important;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-gap: 1px;
        background: #ccc;
        padding:1px 0;
        overflow: hidden;
    }
    .indexNav>div>.collapse.in ul.visible-xs::before,.indexNav>div>.collapse.in ul.visible-xs::after{
        content:unset!important;display:none}
    .indexNav>div>.collapse.in ul.visible-xs>li.time{order:999;grid-column:auto/ span 2}
    .indexNav>div>.collapse.in ul.visible-xs>li:not(.time)>a {
        background:#fff;
        color:#333;
        font-weight:bold;
        width:100%;
    }
    .indexNav>div>.collapse.in ul.visible-xs>li.time>a{
        border-radius:0;
        color:#fff;
        background-image:none;
        background-color:rgba(50, 140, 230,.8);
        border-color:rgba(59, 96, 138,.8);
        text-shadow:none
    }
    .indexNav>div>.collapse.in ul.visible-xs>li.time>a:is(:hover,:focus,:active){color:#fff;background-color:#328ce6;border-color:#3b608a}
    .indexNav>div>.collapse.in ul.visible-xs>li:nth-child(2n-1)>a{border-right: 1px solid #ccc}
    .indexNav>div>.collapse.in ul.visible-xs>li:not(:last-child)>a{border-bottom: 1px solid #ccc}
    .indexNav>div>.collapse.in ul.visible-xs>li>a {
        background:#fff;
        color:#333;
        font-weight:bold;
        border-radius: 0;
        width:50%;
        float:left
    }
    
    .container-wrapper>.row>div {padding:10px}
    .mainContent {margin-bottom:20px}
    [class*="subContent"] {padding:0}
    .navbar-header{background-color:#fff}

    .navbar-default .navbar-toggle:focus,
    .navbar-default .navbar-toggle:hover {background-color:#eaeaea;border-color:#eaeaea}
    .navbar-default .navbar-toggle {border-color:transparent;padding:0 6px;height:34px}
    .navbar-default .navbar-toggle .icon-bar {background-color:var(--main);width:26px;height:3px}
    .navbar-toggle .icon-bar+.icon-bar{margin-top:7px}
    .navbar-toggle .glyphicon-search{color:var(--main);font-size:30px}

    /*S1*/
    .indexSearch {position:absolute;width:100%;top:50px;z-index:999}
    .indexSearch .input-group{display:inline-flex}

    /*s2*/
    .index-carousel{height:200px}
    /* S2 */
    .btn-cta{background-color:#c01b1b}
    .deg-wrapper{padding:0 20px}
    /* 調整其他css的bug */
    .ui-widget.ui-widget-content{z-index:1000;max-width:100%!important}

}

/*當螢幕大於768px時*/
@media screen and (min-width:768px) {
    .navbar-brand>img {
        height:36px;
        width:auto;
    }
    .navbar-brand {
        height:36px;
        padding:0 0 0 20px;
    }
    .indexNav .mainMenu>li>a {padding:0 10px;font-size:15px}
    .indexNav [class^="container"] {
        background:#fff;
        background-repeat:repeat-x;
        margin-top:50px;
        height:114px;
        padding-top:20px;
    }
    .flex-sm{display:flex;justify-content:center;align-items:center}
    .flex-row-reverse{flex-direction:row-reverse}

    #indexCarousel{width:100%}
    .index-carousel .carousel-inner > .item > img{width:100%;object-fit:cover}

}

/*當螢幕大於992px時*/
@media screen and (min-width:992px) {
    .navbar-brand {padding:0px 0 0 20px;height:48px}
    .navbar-brand>img {height:48px;width:auto}
    .mainMenu {clear:both}
    /* S1 */
    .indexSearch{width:800px}
}

/*當螢幕大於1200px時*/
@media screen and (min-width:1200px) {
    .navbar-brand {padding:8px 0 8px 20px;height:70px}
    .navbar-brand>img {height:42px;width:auto}
    .mainMenu {margin-top:26px;margin-right:-15px;clear:none}
}

/*當螢幕大於1300px時*/
@media screen and (min-width:1300px) {
    .mainMenu {margin-top:13px}
    .indexNav .mainMenu>li>a {padding:15px 10px;font-size:18px}
}
/*當螢幕大於1400px時*/
@media screen and (min-width:1400px) {.navbar-brand>img {height:50px;width:auto}}