@charset "utf-8";
/* CSS Document */
body { background-image: url(../img/bodyBg.jpg);}
a { transition: 0.3s;}
.btn .fas:first-child { margin-right: 10px;}

.mt-0 { margin-top: 0 !important;}
.mt-10 { margin-top: 10px;}
.mt-15 { margin-top: 15px;}
.mt-20 { margin-top: 20px;}
.mt-30 { margin-top: 30px;}
.mt-40 { margin-top: 40px;}
.mt-50 { margin-top: 50px;}
.mt-60 { margin-top: 60px;}
.mt-70 { margin-top: 70px;}

.mb-0 { margin-bottom: 0 !important;}
.mb-10 { margin-bottom: 10px;}
.mb-15 { margin-bottom: 15px;}
.mb-20 { margin-bottom: 20px;}
.mb-30 { margin-bottom: 30px;}
.mb-40 { margin-bottom: 40px;}
.mb-50 { margin-bottom: 50px;}
.mb-60 { margin-bottom: 60px;}
.mb-70 { margin-bottom: 70px;}

.pt-0 { padding-top: 0 !important;}
.pt-10 { padding-top: 10px;}
.pt-15 { padding-top: 15px;}
.pt-20 { padding-top: 20px;}
.pt-30 { padding-top: 30px;}
.pt-40 { padding-top: 40px;}
.pt-50 { padding-top: 50px;}
.pt-60 { padding-top: 60px;}
.pt-70 { padding-top: 70px;}

.pb-0 { padding-bottom: 0 !important;}
.pt-10 { padding-bottom: 10px;}
.pt-15 { padding-bottom: 15px;}
.pt-20 { padding-bottom: 20px;}
.pt-30 { padding-bottom: 30px;}
.pt-40 { padding-bottom: 40px;}
.pt-50 { padding-bottom: 50px;}
.pt-60 { padding-bottom: 60px;}
.pt-70 { padding-bottom: 70px;}


/* Header */
header { position: relative; padding-top: 25px;}

.page header:before,
.page header:after,
.page header .navbar:before,
.page header .navbar:after  { position: absolute; display: block; content: ""; width: 50px; height: 50px; background-image: url(../img/header-frame.png);}
.page header:before { left: 1px; top: 1px; background-position: 0 0;}
.page header:after { right: 1px; top: 1px; background-position: 100% 0;}
.page header .navbar:before { left: 0; bottom: 0; background-position: 0 100%;}
.page header .navbar:after { right: 0; bottom: 0; background-position: 100% 100%;}

.page header .navbar { height: 100%;}
.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand { margin-left: 0;}
.navbar-brand { margin: 0; padding: 0; width: 90px; height: 260px; background-image: url(../img/logo.png); background-repeat: no-repeat;}
.nav>li>a { padding-left: 10px; padding-right: 10px;}
.nav-link { font-family: "新細明體", sans-serif; font-size: 18px; font-weight: 600; color: #222; letter-spacing: 3px;}
.navbar-nav>li>a:focus,
.navbar-nav>li>a:hover { color:#AB2C26; background-color: transparent;}
.navbar-nav>.active>a,
.navbar-nav>.active>a:focus,
.navbar-nav>.active>a:hover { color:#AB2C26; background-color: transparent;}
.nav-link span { display: block; font-family: "Times New Roman", sans-serif; font-size: 11px; color: #444; text-transform: uppercase;}

.navbar-toggle .icon-bar { background-color: #222; transition: 0.3s;}
.navbar-toggle:hover .icon-bar,
.navbar-toggle:focus .icon-bar { background-color: #AB2C26;}

@media (min-width: 993px) and (max-width: 1199px) {
	.navbar-nav>li>a { padding-left: 10px; padding-right: 10px; font-size: 16px;}
	.nav-link { letter-spacing: 0;}
}
@media (min-width: 768px) and (max-width: 992px) {
	.navbar { padding-top: 0px;}
	.navbar-brand { width: 50px; height: 144px; background-size: 50px auto;}
	.navbar-nav>li>a { padding-left: 10px; padding-right: 0;}
	.nav-link { font-size: 14px; letter-spacing: 0;}
}
@media (max-width: 767px) {
	.navbar.navbar-fixed-top { position: relative; padding: 15px 15px 0;}
	.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse { max-height: none;}
	
	.navbar-brand { position: absolute; width: 118px; height: 50px; background-image: url(../img/logo-mobile.png); background-size: 118px auto;}
	.nav-link span { float: right; display: inline; margin-left: 10px; line-height: 22px;}
	.navbar-nav>li>a { border-bottom: 1px solid rgba(0,0,0,0.15);}
	.navbar-nav>li:last-child>a { border-bottom: none;}
}

/* Banner */
.banner { position: relative;}
.item-mask,
.item-img { width: 100%; height: 677px;}
.item-mask { overflow: hidden; background: url(../img/banner-mask.png); -webkit-mask-image: url(../img/banner-mask.png);}

/* Marquee */
#newsBox { position: relative; z-index: 3; margin-top: -36px;}
.marquee-box { position: relative; margin-left: 11px; margin-right: 11px; padding-top: 10px; height: 36px; background-image: url(../img/newsBg.png); color: #AB2C27; font-size: 14px; line-height: 16px; text-align: center;}
.marquee-box:before,
.marquee-box:after { position: absolute; top: 0; display: block; content:""; width: 11px; height: 36px; background-image: url(../img/newsBdr.png);}
.marquee-box:before { left:0; transform: translateX(-11px);}
.marquee-box:after { right: 0; background-position: -11px 0; transform: translateX(11px)}
.marquee-box a { color: #AB2C27;}

/* Footer */
footer { position: relative; padding: 20px 0; background-image: url(../img/footerBg.jpg); color: #fff; font-size: 12px; border-top: 3px solid #e7cc00;}
footer:before { position: absolute; top: 0; left: 50%; transform: translate(-50%,-3px); display: block; content: ""; width: 47px; height: 12px; background-image: url(../img/footerBorderBg.png);}
footer a { color: #fff;}
footer a:hover { color: inherit;}


.audio-box { display: none; padding: 8px 15px; width: 170px; height: 40px; background-image: url(../img/soundBg.png); text-align: center; line-height: 24px;}
.audio-box i { margin-right: 10px; width: 30px; height: 24px; background-color: #8D2521; font-size: 14px; line-height: 24px; border-radius: 3px; box-shadow: inset 0 0 3px rgba(0,0,0,0.15);}
@media (max-width: 575px) {
	footer { text-align: center;}
	.audio-box { margin: 0 auto;}
	footer .widget-info { margin-bottom: 5px;}
}

@media (min-width: 576px) {
	.audio-box { margin: 0 auto;}
	footer .widget-info { margin-bottom: 15px;}
}
@media (min-width: 992px) {
	.audio-box { float: right;}
	footer .widget-info { margin-bottom: 0px;}
}

/* Pages - Main */
.page header { height: 270px; background: #ffeb00/*#f4d300*/; border: 3px solid #c80105;}
.page .navbar-brand { position: absolute; left: 50%; transform: translateX(-50%); width: 70px; height: 202px; background-size: 70px auto;}
.page .nav.navbar-nav { padding: 0 2%; width: 100%;}
.page .nav.navbar-nav li { padding: 10px 0 0; width: 10%; text-align:center;}
.page .nav.navbar-nav li:nth-child(4) { margin-right: 20%;}
.page .nav-link { position: relative; margin: 0 auto; padding: 0; width: 20px;line-height: 1.2;}
.page .nav-link span { display: block; letter-spacing: 0; position: absolute; right: -30px; top: 0;}
.page .navbar-nav li:nth-child(1) .nav-link span { height: 16px; width: 65px; transform: rotate(90deg) translate(20px,-10px);}
.page .navbar-nav li:nth-child(2) .nav-link span { height: 16px; width: 50px; transform: rotate(90deg) translate(13px,-3px);}
.page .navbar-nav li:nth-child(3) .nav-link span { height: 16px; width: 73px; transform: rotate(90deg) translate(25px,-14px);}
.page .navbar-nav li:nth-child(4) .nav-link span { height: 16px; width: 70px; transform: rotate(90deg) translate(23px,-14px);}
.page .navbar-nav li:nth-child(5) .nav-link span { height: 16px; width: 64px; transform: rotate(90deg) translate(20px,-10px);}
.page .navbar-nav li:nth-child(6) .nav-link span { height: 16px; width: 98px; transform: rotate(90deg) translate(37px,-26px);}
.page .navbar-nav li:nth-child(7) .nav-link span { height: 16px; width: 93px; transform: rotate(90deg) translate(35px,-26px);}
.page .navbar-nav li:nth-child(8) .nav-link span { height: 16px; width: 145px; transform: rotate(90deg) translate(59px,-50px);}

.page .navbar-nav>.active>a span { color: #fff;}
.page .navbar-nav>.active:nth-child(1)>a span { background: url(../img/navItemBg01.png) no-repeat 0px -2px;}
.page .navbar-nav>.active:nth-child(2)>a span { background: url(../img/navItemBg02.png) no-repeat 0px -2px;}
.page .navbar-nav>.active:nth-child(3)>a span { background: url(../img/navItemBg03.png) no-repeat 0px -2px;}
.page .navbar-nav>.active:nth-child(4)>a span { background: url(../img/navItemBg04.png) no-repeat 0px -2px;}
.page .navbar-nav>.active:nth-child(5)>a span { background: url(../img/navItemBg05.png) no-repeat 0px -2px;}
.page .navbar-nav>.active:nth-child(6)>a span { background: url(../img/navItemBg06.png) no-repeat 0px -2px;}
.page .navbar-nav>.active:nth-child(7)>a span { background: url(../img/navItemBg07.png) no-repeat 0px -2px;}
.page .navbar-nav>.active:nth-child(8)>a span { background: url(../img/navItemBg08.png) no-repeat 4px -2px;}

@media (max-width: 767px) {
	.page header { padding-top: 0; height: auto;}
	header .navbar { margin:  0; padding: 10px 25px 10px 35px }
	.page .nav.navbar-nav { padding: 0; width: auto;}
	.page .nav.navbar-nav li { padding: 0; width: auto; text-align: left;}
	.page .nav.navbar-nav li:nth-child(4) { margin-right: auto;}
	.page .nav-link { padding: 10px 15px; width: auto;}

	.page .navbar-brand { position: static; width: 118px; height: 50px; transform: none; background-size: 118px auto;}
	.page .nav-link span { float: right; position: static; display: inline; margin-left: 10px; background: none !important; color: #999 !important; line-height: 22px; transform: none !important;}
	.page .navbar-nav>li>a { border-bottom: 1px solid rgba(0,0,0,0.15);}
	.page .navbar-nav>li:last-child>a { border-bottom: none;}
	
}

.bg01 { background-image: url(../img/bodyBg-Green.png);}
.bg02 { background-image: url(../img/bodyBg-Blue.png);}
.bg03 { background-image: url(../img/bodyBg-Purple.png);}

.main { padding-bottom: 40px; box-shadow: inset 0 5px 5px rgba(0,0,0,0.15);}
.main .fck-box { padding: 40px 0; font-size: 16px;}
.main .fck-box h1,
.main .fck-box h2,
.main .fck-box h3,
.main .fck-box h4,
.main .fck-box h5,
.main .fck-box h6 { font-family: "Times New Roman", "標楷體", sans-serif; font-weight: bold;}
.main .fck-box p { margin-bottom: 1.5em; line-height: 1.8; color: #444; text-indent: 2em;}
.main .fck-box p:last-child { margin-bottom: 0;}
.main .fck-box .text-center.lead { margin-bottom: 40px; font-size: 24px; text-indent: 0;}
.main .fck-box h2.title.text-center { margin: 40px 0; color: #AB2C26;}
.main .fck-box h3.subtitle.text-center { margin: 30px 0; color: #1b2d92;}
.main .fck-box .gallery { margin: 0 0 30px 0;}
.main .fck-box .gallery img { margin: 0 auto;}
.main .fck-box .gallery figcaption { margin-top: 15px; color: #009688; font-family: "Times New Roman", "標楷體", sans-serif;}

/* Search */
#searchBox { position: absolute; left: 50%; display: inline-block; transform: translate(-50%, -50%);}
#searchBox form { position: relative; padding: 5px 30px; background: #cc261e; border-top: 1px solid #611916; border-bottom: 1px solid #611916; box-shadow: 0 5px 10px rgba(0,0,0,0.15);}
#searchBox form:before,
#searchBox form:after { display: block; position: absolute; content: ""; top: -5px; width: 10px; height: 56px;}
#searchBox form:before { left: 0; background: url(../img/searchBorder.png);}
#searchBox form:after { right: 0; background: url(../img/searchBorder.png);}

#searchBox .form-group { margin: 0; background: #fff; height: 36px; border: 1px solid #611916; border-radius: 5px; box-shadow: inset 0px 2px 6px rgba(0,0,0,0.15);}
#searchBox .form-group input,
#searchBox .form-group button,
#searchBox .form-group .input-group-addon { padding: 0 10px; background: transparent; text-align: center; border: 0; box-shadow: none;}

@media (max-width: 575px) {
	#searchBox { position: static; transform: none; margin: 15px 0 -30px;}
}

/* Crumb */
.crumb { margin: 30px 0; padding: 0; text-align: center; font-size: 17px;}
.crumb ul,
.crumb li { display: inline; margin: 0; padding: 0; list-style: none;}
.crumb li:after { display: inline; content: "◆"; color: #AB2C26; margin: 0 15px;}
.crumb li:last-child:after { display: none;}
.crumb li > a { color: #333; text-decoration: none;}
.crumb li > a:hover { color: #AB2C26;}

.crumb.gallery { margin-top: 60px; }

.page-title { margin: 35px 0; padding: 0; font-size: 35px; font-weight: bolder; font-family: "Times New Roman", "標楷體", sans-serif; line-height: 40px; color: #AB2C26; transition: all 0.3s;}
.page-title .page-info { display: block; }
.media.charactor { position: relative; margin-bottom: 40px; padding: 10px; background: #fff; box-shadow: 0 10px 10px rgba(0,0,0,0.15); border-radius: 10px; transition: all 0.3s;}
.media.charactor .media-left { position: relative; width: 100px;}
.media.charactor .media-left, .media.charactor >.pull-left { padding-right: 15px;}
.media.charactor .media-left .media-object { width: 100px; border-radius: 3px;}
.media.charactor .media-left .fas { position: absolute; right: 20px; top: 5px; color: #fff;}
.media.charactor .media-heading { font-size: 19px; font-family: "Times New Roman", "新細明體", sans-serif; font-weight: bold; line-height: 30px;}
.media.charactor .media-body {}
.media.charactor .media-body > p { font-size: 17px; color: #222;}
.media.charactor .media-body p:last-child { position: absolute; bottom: 0; color: #222;}

.media.charactor:hover { background: #F8F0BE; transform: translateY(5px) scale(1.1);}
.media.charactor:hover .media-heading { color: #AB2C26;}

.thecaption { display: none;}
.fck-box h4.text-center { color: #ec4b18; }
@media (max-width: 575px) {
	.page-title { padding-top: 0;}
	.page-title.text-center { padding-top: 35px; }
}


/* Application */
.box-01,
.box-02,
.box-03 { margin-bottom: 20px; padding-bottom: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-radius: 10px;}
.box-01 { background-color: rgba(255,255,255,0.5); border: 1px solid #fff;}
.box-02 { background-color: rgba(205, 230, 255, 0.5); border: 1px solid #fff;}
.box-03 { background-color: rgba(255, 255, 205, 0.5); border: 1px solid #fff;}

/* Writing */
.media.books-item { position: relative; margin-bottom: 20px; padding: 20px; background: #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.15); border-radius: 10px;}
.media.books-item .media-left { position: relative; width: 160px;}
.media.books-item .media-left, .media.books-item >.pull-left { padding-right: 0px;}
.media.books-item .media-left .media-object { width: 160px; border-radius: 3px;}
.media.books-item .media-left .fas { position: absolute; right: 10px; top: 10px; color: #fff;}
.media.books-item .media-heading { margin-bottom: 10px; font-size: 19px; font-family: "Times New Roman", "新細明體", sans-serif; font-weight: bold; line-height: 30px;}
.media.books-item .media-body { padding-left: 20px;}
.media.books-item .media-body > p { font-size: 15px; color: #777;
/*display: -webkit-box; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical;*/
}
.media.books-item .media-body > .btn { margin-top: 20px;}


/* Celebration */
.thumbnail.celebration { padding: 7px; box-shadow: 0 10px 20px rgba(0,0,0,0.15); border-radius: 10px; transition: all 0.3s;}
.thumbnail.celebration:hover { transform: translateY(5px) scale(0.95); box-shadow: 0 5px 5px rgba(0,0,0,0.05);}
.thumbnail.celebration .charactor-item { position: relative; display: block;}
.thumbnail.celebration .charactor-item:hover { opacity: 0.65;}
.thumbnail.celebration .charactor-item img { border-radius: 3px;}
.thumbnail.celebration .charactor-item .fas { position: absolute; right: 10px; top: 10px; color: #fff;}
.thumbnail.celebration .caption h3 { font-family: "Times New Roman", "標楷體", sans-serif; font-weight: bolder; color: #000;}


/* Offers*/
.thumbnail.offers { position: relative; padding: 6px; box-shadow: 0 10px 20px rgba(0,0,0,0.15); border-radius: 10px; transition: all 0.3s;}
.thumbnail.offers .media-object { border-radius: 3px;}
.thumbnail.offers .media-object img { border-radius: 3px;}
.thumbnail.offers:hover { z-index: 999; background: #F8F0BE; transform: scale(1.5);}
.thumbnail.offers:hover .media-heading { color: #AB2C26;}
.thumbnail.offers .caption h3 { margin: 0; font-size: 17px; text-align: center; font-family: "Times New Roman", "標楷體", sans-serif; font-weight: bolder; color: #000;}

.offers-box .sub-title { margin-bottom: 30px;}
.offers-box .sub-title:after { display: block; content: ""; margin: 15px auto; width: 30px; height: 2px; background-color: #c3190d; border-radius: 10px;}
.wrap .inner p > b,
.service-box b { color: #c3190d;}
.btn-more { display: block; margin: 30px 0 30px; padding-bottom: 10px; color: ; text-align: center; border-bottom: 1px dotted #666;

}

/* Service */
.service-box ul li { margin-bottom: 10px;}
.div-line { margin-top: 40px; background: url(../img/line.png) no-repeat center; height: 60px;}

/* Chart */
.chart .box-01 { padding: 3.3333333333% 6.6666666667%;}
.chart .table { text-align: center;}
.table>tbody>tr>td { vertical-align: middle; border-top: none;}
.table>tbody>tr>td.active { background: #f00; color: #fff; border-radius: 4px;}

/* Happy New Year */
.fixed-elem { position: absolute; right: 0; bottom: 0;}

.tab-option { margin-bottom: -20px; text-align: center;}
.tab-option .nav-tabs { display: table; margin: 0 auto; padding: 0; border: none;}
.tab-option .nav-tabs li { float: none; display: table-cell; }
.tab-option .nav-tabs li a { display: block; margin: 0; padding: 10px 15px; height: 40px; background: #fff; font-size: 16px; line-height: 20px; color: #333; text-decoration: none; border: none; box-shadow: 0 0 1px rgba(0,0,0,0.15); outline: none; outline-offset: 0;}
.tab-option .nav-tabs li a:hover { border: none; }
.tab-option .nav-tabs li.active a { background: #AB2C26; color: #fff; }
.tab-option .nav-tabs li:first-child a { border-radius: 4px 0 0 4px; }
.tab-option .nav-tabs li:last-child a { border-radius: 0 4px 4px 0; }

.radio-inline { margin-left: 0 !important;}

.fixed-left { display: none; position: absolute; left: 0; top: 75px; width: 110px; height: 455px; background: url(../img/light-left.png); }
.fixed-right { display: none; position: absolute; right: 0; top: 75px; width: 110px; height: 455px; background: url(../img/light-right.png); }

#scrollUp {
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: #AB2C26;
    color: #fff;
    border-radius: 4px;
}