/*===========================
1. COMMON css 
===========================*/
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700&family=Oswald:wght@200;300;400;500;600;700&display=swap');
body {
font-family: 'Noto Sans TC', sans-serif;
font-weight: normal;
font-style: normal;
color: #121212; letter-spacing: 1px;}
@media only screen and (max-width:467px){
body{font-size:15px;}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }

img {max-width: 100%; }
a{ color:#000000;}
a:focus,
input:focus,
textarea:focus,
button:focus {
text-decoration: none;
outline: none; }

a:focus,
a:hover {text-decoration: none; color:#9D291F; }

i,
span,
a {display: inline-block;}

h1,
h2,
h3,
h4,
h5,
h6 {font-family: 'Oswald','Noto Sans TC', sans-serif;
font-weight: 700;
color: #121212;
margin: 0px; }

h1 {font-size: 48px; }
h2 {font-size: 36px; }
h3 {font-size: 28px; }
h4 {font-size: 22px; }
h5 {font-size: 18px; }
h6 {font-size: 16px; }
@media only screen and (max-width:767px){
h1 {font-size: 38px; }
h2 {font-size: 30px; }
h3 {font-size: 24px; }
h4 {font-size: 20px; }
h5 {font-size: 16px; }
h6 {font-size: 15px; }
}
ul, ol {
margin: 0px;
padding: 0px;
list-style-type: none; }

p {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #121212;
margin: 0px; }
.container p{line-height: 1.6rem; text-align:justify; text-justify: auto;}
.container p+p{margin-top:1.5rem;}

.bg_cover {background-position: center center;background-size: cover;background-repeat: no-repeat;width: 100%;height: 100%; }

section{padding-top:50px; padding-bottom:50px; padding-left:50px; padding-right:50px;}
section ul, section ol {margin: 0px 0 0px 30px;list-style-type: disc; }
section ol {list-style-type:decimal;}
section ol ol{list-style-type: circle;}
section ul li, section ol li {line-height: 1.5rem; margin-top:5px; margin-bottom:5px;}
@media only screen and (max-width:467px){
section {padding-left:20px; padding-right:20px;}
}

.fs-1 { font-size: 2.5rem!important;}
.fs-2 { font-size: 2rem!important;}
.fs-3 { font-size: 1.75rem!important;}
.fs-4 { font-size: 1.5rem!important;}
.fs-5 { font-size: 1.25rem!important;}
.fs-6 { font-size: 1rem!important;}
.text-decoration-underline {text-decoration: underline!important;}

@media (max-width: 767px){
.justify-content-md-center { -ms-flex-pack: center!important; justify-content: center!important;}
}
/*===== All Button Style =====*/

.main-btn {
display: inline-block;
font-weight: 700;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 2px solid transparent;
padding: 0 32px;
font-size: 16px;
line-height: 48px;
color: #0067f4;
cursor: pointer;
z-index: 5;
-webkit-transition: all 0.4s ease-out 0s;
-moz-transition: all 0.4s ease-out 0s;
-ms-transition: all 0.4s ease-out 0s;
-o-transition: all 0.4s ease-out 0s;
transition: all 0.4s ease-out 0s;
position: relative;
text-transform: uppercase; }
@media (max-width: 767px) {
.main-btn {
font-size: 14px;
padding: 0 20px;
line-height: 40px; } }


/*===== All Section Title Style =====*/
.section-title .title {font-size:36px;color:#A1291F; padding:1rem 2rem; text-transform: uppercase;}
.section-title .title span{font-size:0.7em;letter-spacing: 3px; font-weight: 400; padding-left:5px;}
.section-title h4{padding:0.5rem 2rem; color:#42210B;}
.btn-more{position: absolute; right:0; top:0; margin-top:10px;margin-right: 40px;}
.btn-more a{background-color:#C7B88D; display:flex; justify-content: center; align-items: center; color:#42210B; width:80px; height:80px; text-align: center; border-radius: 99px; flex-direction: column; font-size:13px; line-height: 1.2rem;}
.btn-more a em{font-style: normal; font-size:18px;}
.btn-more a:after { content: ''; width: 40px; height: 25px; background-color: transparent; border-bottom: 1px solid #C7B88D; border-right: 1px solid #C7B88D; -webkit-transform: skewX(45deg); -ms-transform: skewX(45deg); transform: skewX(45deg); position: absolute;  margin-left: 90px; margin-top:-20px;}
.btn-more a:hover{color:#ffffff;}
.text-secondary { color: #9D291F!important; font-size:1.3rem;}
.text-success{color:#C7B88D !important;}
@media (max-width: 767px) {
.section-title .title {font-size: 28px; padding-left:0; padding-right:0;line-height: 40px; } 
.section-title h4{font-size:18px;}
    .text-secondary {font-size:16px;}
}


.section-title .text {
font-size: 16px;
line-height: 24px;
color: #6c6c6c;
margin-top: 24px; }

@media (min-width: 576px){
.container { max-width: 100%;}
}
@media (min-width: 768px){
.container { max-width: 100%;}
}
@media (min-width: 992px){
.container { max-width: 100%;}
}
@media (min-width: 1200px){
.container { max-width: 1140px;}
}

/*===========================
2.HEADER css 
===========================*/
/*===== NAVBAR ONE =====*/
.container-fluid {padding-left:25px; padding-right:25px;}
.navgition {padding: 20px 0;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s; }
.navgition.navgition-transparent {
background-color: rgba(0,0,0,0.5);
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 99; }
.navgition.sticky { padding-top:10px; padding-bottom:10px;
position: fixed;
background-color:rgba(0,0,0,0.95);
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s; }
.navgition .navbar {
position: relative;
padding: 0; }
.navgition .navbar .navbar-toggler .toggler-icon {
width: 26px;
height: 2px;
background-color: #ffffff;
margin: 5px 0;
display: block;
position: relative;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s; }
.navgition .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 7px; }
.navgition .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) {
opacity: 0; }
.navgition .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
top: -7px; }
.navbar-brand img{max-width:300px;}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.navgition .navbar .navbar-collapse {
position: absolute;
top: 116%;
left: 0;
width: 100%;
background-color: #fff;
z-index: 8;
padding: 10px 0;
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); } }
@media (max-width: 767px) {
.navgition {padding: 15px 0;}
.container-fluid {padding-left:15px; padding-right:15px;}
.navbar-brand img{max-width:190px;}
.navgition .navbar .navbar-collapse {
position: absolute;
top: 116%;
left: 10%;
width: 90%;
background-color: rgba(0,0,0,0.9);
z-index: 8;
padding: 10px 0;
-webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); } }
.navgition .navbar .navbar-nav .nav-item {
margin: 0 16px;
position: relative; }
.navgition .navbar .navbar-nav .nav-item a {
font-size: 17px;
line-height: 24px;
font-weight: 400;
padding: 26px 0;
color: #ffffff;
text-transform: uppercase;
position: relative;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.navgition .navbar .navbar-nav .nav-item a {
padding: 10px 0;
display: block; } }
@media (max-width: 767px) {
.navgition .navbar .navbar-nav .nav-item a {
padding: 10px 0;
display: block; } }
.navgition .navbar .navbar-nav .nav-item a::before {
position: absolute;
content: '';
width: 100%;
height: 3px;
background-color: #9D291F;
left: -2px;
margin: 0 2px;
top: 16px;
opacity: 0;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.navgition .navbar .navbar-nav .nav-item a::before, .navgition .navbar .navbar-nav .nav-item a::after {
display: none; } }
@media (max-width: 767px) {
.navgition .navbar .navbar-nav .nav-item a::before, .navgition .navbar .navbar-nav .nav-item a::after {
display: none; } }
.navgition .navbar .navbar-nav .nav-item a::after {
left: auto;
right: 50%; }
.navgition .navbar .navbar-nav .nav-item.active > a, .navgition .navbar .navbar-nav .nav-item:hover > a {
color: #ffffff; }
.navgition .navbar .navbar-nav .nav-item.active > a::before, .navgition .navbar .navbar-nav .nav-item.active > a::after, .navgition .navbar .navbar-nav .nav-item:hover > a::before, .navgition .navbar .navbar-nav .nav-item:hover > a::after {
opacity: 1; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.navgition .navbar .navbar-social {
position: absolute;
right: 70px;
top: 7px; } }
@media (max-width: 767px) {
.navgition .navbar .navbar-social {position: absolute;right: 40px;top: 7px; margin-right:0 !important;} 
}
.navbar-toggler{padding-left:0; padding-right:0;}
.navgition .navbar .navbar-social{flex-direction: column; margin-right:14px;padding-bottom:20px;}
.navgition .navbar .navbar-social span {font-size: 13px;font-weight: 400;color: #fff;line-height: 24px;}
.navgition .navbar .navbar-social ul{display: flex;}
.navgition .navbar .navbar-social ul li {display: inline-block;margin-right: 5px; }
.navgition .navbar .navbar-social ul li a {display:flex; align-items: center; justify-content: center;background-color: #B7272D; line-height: 24px;font-size: 16px; width:24px; height:24px; text-align: center;text-transform: uppercase;font-weight: 400;color: #ffffff;border-radius: 99px;-webkit-transition: all 0.3s ease-out 0s;-moz-transition: all 0.3s ease-out 0s;-ms-transition: all 0.3s ease-out 0s;-o-transition: all 0.3s ease-out 0s;transition: all 0.3s ease-out 0s; }
.navgition .navbar .navbar-social ul li a img{max-width:15px; width:100%; height:auto;}
.navgition .navbar .navbar-social ul li a:hover {color: #ffffff; background-color: #666666;}
@media only screen and (max-width:1389px) and (min-width:1200px){
.container-fluid {padding-left:15px; padding-right:15px;}
.navgition .navbar .navbar-social{ margin-right:0px;}
.navgition .navbar .navbar-nav .nav-item{margin: 0 9px;}
.navbar-brand img{max-width:250px;}
.navgition .navbar .navbar-nav .nav-item a{text-align: center;}
}
@media only screen and (max-width:1199px) and (min-width:768px){
.navgition .navbar .navbar-social { position: absolute; right: 50px;top: 7px; margin-right: 0 !important;}
.navgition .navbar .navbar-collapse{position: absolute;  top: 116%; left: 0%;  width: 100%;  background-color: rgba(0,0,0,0.9); z-index: 8; padding: 10px 0; -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);}
.navbar-nav {flex-direction: column; flex-wrap: wrap;}
.navbar-nav li{flex-basis: 25%;text-align: center;}
.navgition .navbar .navbar-nav .nav-item{margin:0;}
.navgition .navbar .navbar-nav .nav-item a{text-align: center;}
}
@media (max-width: 767px) {
.navgition .navbar .navbar-social span {font-size: 10px;}
.navgition .navbar .navbar-social{padding-bottom:0; top:0;}
.navgition .navbar .navbar-social ul li{ margin-right:3px;}
}
.navgition .navbar .page-scroll .sub-nav-toggler.hover{transform: rotate(180deg);}
.navgition .navbar .page-scroll .sub-nav-toggler{display:none;}
.navgition .navbar .navbar-nav .nav-item:hover > ul.sub-menu { position: absolute;opacity: 1;-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s; }
.navgition .navbar .navbar-nav .nav-item > ul.sub-menu{width:200px; background-color:#C7B88D; padding:0.5rem;}
.navgition .navbar .navbar-nav .nav-item > ul.sub-menu li{margin:0;}
.navgition .navbar .navbar-nav .nav-item > ul.sub-menu li a{padding:0.5rem; color: #42210B; font-weight: 400;display:block; font-size: 15px;}
.navgition .navbar .navbar-nav .nav-item > ul.sub-menu li:hover a{color:#ffffff;background-color: #9D291F;}
@media only screen and (min-width:1200px){
.sub-menu.collapse:not(.show){position: absolute; opacity: 0;-webkit-transition: all 0.3s ease-out 0s;}
.sub-menu.collapse.show{display: block;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s; }
}
@media only screen and (max-width:1199px){
.navgition .navbar .page-scroll .sub-nav-toggler{display:inline-block;margin-left: 1rem;}
.navgition .navbar .navbar-nav .nav-item > ul.sub-menu{width:100%; position: static !important}
.navgition .navbar .navbar-nav .nav-item a{display: inline-block; padding:10px 0 10px 30px;}
.navgition .navbar .navbar-nav .nav-item a::before{display: none;}
.navgition .navbar .navbar-collapse{padding:10px;}
}
.nav-item a[data-target='sub-nav2'] .sub-nav-toggler, .nav-item a[data-target='sub-nav8'] .sub-nav-toggler{opacity: 0 !important;}
@media only screen and (max-width:767px){
.navgition .navbar .navbar-nav .nav-item a{padding-left:0;}
}







.header-hero { position: relative; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header-hero { } }
@media (max-width: 767px) {
.header-hero { } }
.header-hero::before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;}
.header-hero .header-content {
padding-top: 195px;
position: relative;
z-index: 9; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.header-hero .header-content {
padding-top: 130px; } }
@media (max-width: 767px) {
.header-hero .header-content {
padding-top: 120px; } }
.header-hero .header-content .header-title {
font-size: 44px;
line-height: 55px;
color: #121212;
font-weight: 600; }
@media (max-width: 767px) {
.header-hero .header-content .header-title {
font-size: 30px;
line-height: 40px; } }
.header-hero .header-content .text {
font-size: 20px;
line-height: 32px;
color: #6c6c6c;
margin-top: 16px; }
@media (max-width: 767px) {
.header-hero .header-content .text {
font-size: 16px;
line-height: 24px; } }
.header-hero .header-content .header-btn {
margin-top: 22px; }
.header-hero .header-content .header-btn li {
display: inline-block;
margin: 10px 10px 0; }
.header-hero .header-content .header-btn li a.main-btn {
border-radius: 50px;
overflow: hidden;
background-color: #fff;
-webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
border: 0;
line-height: 50px; }
.header-hero .header-content .header-btn li a.main-btn i {
margin-left: 5px; }
.header-hero .header-content .header-btn li a.main-btn.btn-one {
color: #fff; }
.header-hero .header-content .header-btn li a.main-btn.btn-one::before {
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: -webkit-linear-gradient(left, #0067f4, #2bdbdc);
background-image: -o-linear-gradient(left, #0067f4, #2bdbdc);
background-image: linear-gradient(to right, #0067f4, #2bdbdc);
background-position: right center;
z-index: -1;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s; }
.header-hero .header-content .header-btn li a.main-btn.btn-one:hover::before {
background-image: -webkit-linear-gradient(right, #0067f4, #2bdbdc);
background-image: -o-linear-gradient(right, #0067f4, #2bdbdc);
background-image: linear-gradient(to left, #0067f4, #2bdbdc);
background-position: left center;
-webkit-transition: all none ease-out 0s;
-moz-transition: all none ease-out 0s;
-ms-transition: all none ease-out 0s;
-o-transition: all none ease-out 0s;
transition: all none ease-out 0s; }
.header-hero .header-content .header-btn li a.main-btn.btn-two:hover {
-webkit-box-shadow: 0 3px 25px 0 rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0 3px 25px 0 rgba(0, 0, 0, 0.16);
box-shadow: 0 3px 25px 0 rgba(0, 0, 0, 0.16); }
.header-hero .header-shape {
position: absolute; 
bottom: -10.6vw;
left: 0;
width: 100%; }
.header-hero .header-shape img {
width: 100%; }

/*===========================
3.SERVICES css 
===========================*/
.services-area {background:url(../images/bg-timeline.png) no-repeat bottom right; background-size: 100% auto;
padding-top: 120px;
padding-bottom: 120px;
position: relative; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.services-area {
padding-top: 100px;
padding-bottom: 100px; } }
@media (max-width: 767px) {
.services-area {
padding-top: 80px;
padding-bottom: 80px; } }

.services-content .services-icon i {
font-size: 64px;
color: #0067f4; }

.services-content .services-content {
padding-left: 15px; }
@media (max-width: 767px) {
.services-content .services-content {
padding-left: 0;
padding-top: 15px; } }
@media only screen and (min-width: 576px) and (max-width: 767px) {
.services-content .services-content {
padding-left: 15px;
padding-top: 0; } }
.services-content .services-content .services-title {
font-size: 24px;
font-weight: 500;
line-height: 30px;
color: #121212; }
.services-content .services-content .text {
font-size: 14px;
line-height: 20px;
color: #121212;
margin-top: 8px; }

.services-image {
position: absolute;
width: 40%;
height: 100%;
top: 0;
right: 0; }
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.services-image {
width: 34%; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.services-image {
position: relative;
width: 720px;
margin: 0 auto; } }
@media (max-width: 767px) {
.services-image {
position: relative;
width: 100%;
padding-left: 15px;
padding-right: 16px;
margin: 0 auto; } }
@media only screen and (min-width: 576px) and (max-width: 767px) {
.services-image {
position: relative;
width: 540px;
margin: 0 auto; } }
.services-image .image {
max-width: 580px;
width: 100%; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.services-image .image {
margin: 0 auto;
padding-top: 50px; } }
@media (max-width: 767px) {
.services-image .image {
margin: 0 auto;
padding-top: 50px; } }
.services-image .image img {
width: 100%; }

/*===========================
4.PRICING css 
===========================*/
.pricing-area {
padding-top: 120px;
padding-bottom: 120px;
background-color: #f4f6f7; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.pricing-area {
padding-top: 100px;
padding-bottom: 100px; } }
@media (max-width: 767px) {
.pricing-area {
padding-top: 80px;
padding-bottom: 80px; } }

.single-pricing {display:flex;
-webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
padding: 24px 20px 50px;
border-radius: 8px;
position: relative;
overflow: hidden;
background-color: #fff; }
.single-pricing .pricing-header{flex-basis: 200px;}
.single-pricing .pricing-header .sub-title { margin-top:12px;
font-size: 20px;
font-weight: 600;
line-height: 25px;
color: #121212;
position: relative;
padding-bottom: 8px; }
.single-pricing .pricing-header .sub-title::before {
position: absolute;
content: '';
width: 100%; max-width:150px;
height: 4px;
bottom: 0;
left: 0;
right: 0;
background-color: #9D291F;
margin: 0 auto; }
.single-pricing .pricing-header .price {
display: block;
font-size: 64px;
font-weight: 600;
line-height: 80px;
margin-top: 32px;
color: #121212; }
.single-pricing .pricing-list ul li {  flex-basis: 25%;}
.single-pricing .pricing-list ul { display: flex; flex-wrap: wrap; width:100%; }
@media only screen and (min-width: 992px) and (max-width: 1200px) {

.single-pricing .pricing-header .price {
font-size: 50px;
margin-top: 16px; } }
@media (max-width: 820px) {
    .single-pricing{flex-direction: column;}
    .single-pricing .pricing-header{flex-basis: auto;}
    .single-pricing .pricing-header .sub-title{margin-top:10px; margin-bottom:10px;}
}
@media (max-width: 467px) {
    .single-pricing .pricing-list ul li{flex-basis: 50%;}
    }
@media (max-width: 767px) {
.single-pricing .pricing-header .price {
font-size: 50px;
margin-top: 16px; } }
@media only screen and (min-width: 576px) and (max-width: 767px) {
.single-pricing .pricing-header .price {
font-size: 64px;
margin-top: 32px; } }
.single-pricing .pricing-header .year {
font-size: 20px;
font-weight: 500;
line-height: 25px;
color: #6c6c6c;
margin-top: 3px; }
.single-pricing .pricing-list { flex-basis: calc(100% - 200px);}
.single-pricing .pricing-list ul li {
font-size: 16px;
line-height: 24px;
color: #121212;
margin-top: 16px; }
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.single-pricing .pricing-list ul li {
font-size: 15px;
margin-top: 12px; } }
@media (max-width: 767px) {
.single-pricing .pricing-list ul li {
font-size: 15px;
margin-top: 12px; } }
@media only screen and (min-width: 576px) and (max-width: 767px) {
.single-pricing .pricing-list ul li {
font-size: 16px;
margin-top: 16px; } }
.single-pricing .pricing-list ul li i {
color: #C7B88D;
margin-right: 8px; }
.single-pricing .pricing-btn {
margin-top: 42px; }
.single-pricing .pricing-btn .main-btn {
background-color: #C7B88D;
border-radius: 50px;
color: #fff;
border-color: #C7B88D; }
.single-pricing .pricing-btn .main-btn:hover {
background-color: #9D291F;
border-color: #9D291F; }
.single-pricing .buttom-shape {
position: absolute;
bottom: -20px;
left: 0;
width: 101%; background:url(../images/bg-vision.png) no-repeat bottom right; background-size:100% auto; height:200px;}

.single-pricing.pro .pricing-header .sub-title::before {
right: auto;
left: 0;
background-color: #9D291F; }

.single-pricing.pro .pricing-baloon {
position: absolute;
top: 0;
right: -78px;
width: 156px; }

.single-pricing.enterprise .pricing-header .sub-title::before {
right: 0;
left: auto;
background-color: #0067f4; }

.single-pricing.enterprise .pricing-flower {
position: absolute;
top: 10px;
left: 10px;
width: 144px; }
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.single-pricing.enterprise .pricing-flower {
width: 110px; } }
@media (max-width: 767px) {
.single-pricing.enterprise .pricing-flower {
width: 110px; } }
@media only screen and (min-width: 576px) and (max-width: 767px) {
.single-pricing.enterprise .pricing-flower {
width: 144px; } }
.single-pricing.enterprise .pricing-flower img {
width: 100%; }

/*===========================
5.CALL TO ACTION css 
===========================*/
.call-to-action {
background-color: #0067f4;
position: relative; }

.call-action-image {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.call-action-image {
position: relative;
width: 100%; } }
@media (max-width: 767px) {
.call-action-image {
position: relative;
width: 100%; } }
.call-action-image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center; }

.call-action-content {
max-width: 560px;
margin: 0 auto;
padding-top: 230px;
padding-bottom: 236px; }
@media (max-width: 767px) {
.call-action-content {
padding-top: 80px;
padding-bottom: 80px; } }
.call-action-content .call-title {
font-size: 44px;
font-weight: 600;
color: #fff;
line-height: 55px; }
@media (max-width: 767px) {
.call-action-content .call-title {
font-size: 28px;
line-height: 38px; } }
.call-action-content .text {
font-size: 16px;
color: #fff;
line-height: 24px;
margin-top: 16px; }
@media (max-width: 767px) {
.call-action-content .text {
font-size: 14px; } }
.call-action-content .call-newsletter {
max-width: 410px;
position: relative;
margin: 24px auto 0; }
.call-action-content .call-newsletter i {
font-size: 26px;
color: #0067f4;
position: absolute;
left: 18px;
top: 15px; }
.call-action-content .call-newsletter input {
width: 100%;
height: 56px;
border: 0;
border-radius: 50px;
background-color: #fff;
padding-left: 60px;
padding-right: 30px; }
.call-action-content .call-newsletter input::placeholder {
opacity: 1;
color: #6c6c6c; }
.call-action-content .call-newsletter input::-moz-placeholder {
opacity: 1;
color: #6c6c6c; }
.call-action-content .call-newsletter input::-moz-placeholder {
opacity: 1;
color: #6c6c6c; }
.call-action-content .call-newsletter input::-webkit-input-placeholder {
opacity: 1;
color: #6c6c6c; }
.call-action-content .call-newsletter button {
border: 0;
border-radius: 50px;
height: 48px;
padding: 0 32px;
font-size: 16px;
font-weight: 700;
color: #fff;
text-transform: uppercase;
cursor: pointer;
position: absolute;
top: 4px;
right: 4px;
background-color: #0067f4;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s; }
@media (max-width: 767px) {
.call-action-content .call-newsletter button {
position: relative;
right: auto;
margin-top: 15px;
background-color: #fff;
color: #0067f4; } }
.call-action-content .call-newsletter button:hover {
background-color: #005ad5;
color: #fff; }

/*===========================
6.CALL TO ACTION css 
===========================*/
.contact-area {
padding-top: 120px;
padding-bottom: 120px; }
@media only screen and (min-width: 768px) and (max-width: 991px) {
.contact-area {
padding-top: 100px;
padding-bottom: 100px; } }
@media (max-width: 767px) {
.contact-area {
padding-top: 80px;
padding-bottom: 80px; } }

.form-group {
margin: 0; }

p.form-message.success,
p.form-message.error {
font-size: 16px;
color: #121212;
background: #cbced1;
padding: 10px 15px;
margin-left: 15px;
margin-top: 15px; }

p.form-message.error {
color: #f00; }

.contact-form .single-form {
margin-top: 30px; }
.contact-form .single-form textarea,
.contact-form .single-form input {
width: 100%;
height: 56px;
border: 1px solid #cbced1;
border-radius: 5px;
padding: 0 25px;
background-color: #fff;
font-size: 16px; }
.contact-form .single-form textarea::placeholder,
.contact-form .single-form input::placeholder {
opacity: 1;
color: #a4a4a4; }
.contact-form .single-form textarea::-moz-placeholder,
.contact-form .single-form input::-moz-placeholder {
opacity: 1;
color: #a4a4a4; }
.contact-form .single-form textarea::-moz-placeholder,
.contact-form .single-form input::-moz-placeholder {
opacity: 1;
color: #a4a4a4; }
.contact-form .single-form textarea::-webkit-input-placeholder,
.contact-form .single-form input::-webkit-input-placeholder {
opacity: 1;
color: #a4a4a4; }
.contact-form .single-form textarea {
height: 160px;
padding-top: 15px;
resize: none; }
.contact-form .single-form .main-btn {
border-radius: 50px;
background-color: #0067f4;
color: #fff; }
.contact-form .single-form .main-btn:hover {
background-color: #005ad5; }

.list-unstyled li {
font-size: 13px;
margin-left: 2px;
margin-top: 5px;
color: #f00; }

/*===========================
7.FOOTER css 
===========================*/
.footer-area { background-color: #9D291F; }

.footer-widget {padding-top: 30px; padding-bottom: 30px; }
.footer-area .footer-widget .container .row{justify-content: center;}
.footer-area .footer-widget .container .row > div{margin-top:1rem; margin-bottom:1rem;text-align: center; }
.footer-area .footer-widget .container .row > div:last-child li a{display:flex;width: 28px;  height: 28px; background-color: #000000; border-radius: 99px; line-height: 29px;margin-left: auto; margin-right: auto; align-items: center;justify-content: center;}
.footer-area .footer-widget .container .row > div:last-child li a:hover{color:#ffffff; background-color: #666666;}
.footer-area .footer-widget .container .row > div:last-child li a img{max-width:16px; width:100%; height:auto;}
@media (min-width: 768px){
.footer-area .footer-widget .container .row > div { flex-basis: content; max-width: none; padding-left:20px; padding-right:20px;} 
.footer-title:before {content: ''; display: inline-block; height: 1em; width: 2px; background-color: #ffffff; position: absolute; margin-left: -20px; margin-top: 1px;}
.footer-area .footer-widget .container .row > div:first-child .footer-title:before{display: none;}
}
@media (min-width: 1200px){
.footer-area .container{max-width:1100px;}}
@media (max-width: 1199px){
.footer-area .container{max-width:1100px;}
}
@media (max-width: 1199px) and (min-width:768px){
.footer-area .footer-widget .container .row > div{flex-basis: 25%; margin-top:1rem; margin-bottom:1rem;}
.footer-title:before{display: none;}
}
.footer-logo-support .footer-logo .social {
margin-left: 35px; }
.footer-logo-support .footer-logo .social li {
display: inline-block;
margin-right: 10px; }
.footer-logo-support .footer-logo .social li a {
font-size: 24px;
color: #6c6c6c;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s; }
.footer-logo-support .footer-logo .social li a:hover {
color: #0067f4; }

.footer-logo-support .footer-support span { font-size: 20px; line-height: 25px; color: #6c6c6c; font-weight: 600; }
@media (max-width: 767px) {
.footer-logo-support .footer-support span { display: block; } }
.footer-logo-support .footer-support span.mail {margin-left: 32px; }
@media (max-width: 767px) {
.footer-logo-support .footer-support span.mail {  margin-left: 0; } }

.footer-title {font-size: 18px;font-weight: 700;line-height: 18px;color: #ffffff; }

.footer-link {}
.footer-link ul {
margin-top: 8px; }
.footer-link ul li a {
font-size: 15px;
line-height: 20px;
color: #ffffff;
margin-top: 10px;
font-weight: 300;
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s; }
.footer-link ul li a:hover {color: #C7B88D; }

.footer-newsletter {}
.footer-newsletter .newsletter {
margin-top: 24px;
position: relative; }
.footer-newsletter .newsletter input {
width: 100%;
height: 44px;
border-radius: 50px;
padding: 0 24px;
border: 0;
background-color: rgba(33, 33, 33, 0.12);
font-weight: 500; }
.footer-newsletter .newsletter input::placeholder {
opacity: 1;
color: #6c6c6c; }
.footer-newsletter .newsletter input::-moz-placeholder {
opacity: 1;
color: #6c6c6c; }
.footer-newsletter .newsletter input::-moz-placeholder {
opacity: 1;
color: #6c6c6c; }
.footer-newsletter .newsletter input::-webkit-input-placeholder {
opacity: 1;
color: #6c6c6c; }
.footer-newsletter .newsletter button {
position: absolute;
top: 0;
right: 0;
height: 44px;
width: 44px;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
border: 0;
font-size: 20px;
color: #121212;
cursor: pointer;
background: none; }
.footer-newsletter .text { margin-top: 16px; }
.footer-copyright {background-color: #000000; }

.copyright {padding: 18px 0; }
.copyright .text { color: #fff; font-size:14px; letter-spacing: 0;}
.copyright .text a{color:#ffffff;}
.copyright .text a:hover{color:#9D291F;}
@media only screen and (max-width:1024px){
.copyright .text span{display: block;}
}

.back-to-top {
position: fixed;
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
text-align: center;
background-color: #C7B88D;
bottom: 10px;
right: 20px;
z-index: 999;
color: #fff;
font-size: 20px;
-webkit-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
display: block; }
.back-to-top:hover {background-color: #C7B88D;color: #9D291F; }

#why, #price, #enter {display: inline-block; width:100%; height:1px;}

/* 輪播 */
.carousel-caption{bottom:20%; text-align: left; color: #ffffff; line-height: 2em;}
.carousel-caption > *{color: #ffffff; line-height: 1.5em; letter-spacing: 1px;}
.carousel-indicators {bottom:100px;}
.carousel-indicators li {width:20px; height:20px; border-radius: 99px; border:none;opacity: 1;box-shadow: 0 0 15px #333333;margin-right: 5px; margin-left: 5px;}
.carousel-indicators .active {background-color:#B7272D;}
.carousel-caption .slider-btn{float:right; width:200px; margin-top:2rem;}
.carousel-caption .slider-btn img:hover{opacity: 0.9;}
.carousel-caption h2{text-shadow: 0 0 15px #333333;}
.carousel-caption h2 img{width:100%;max-width:600px; height:auto;}
.carousel-caption h3{margin-bottom:1rem;}
.carousel-caption h3 strong{background-color:#9D291F; border-radius: 99px; padding:4px 1rem 5px 1.5rem; letter-spacing: 5px;}
@media only screen and (max-width:1024px){
.carousel-indicators {bottom:40px;}
.carousel-indicators li{width:12px; height:12px;}
.carousel-caption{top:auto;     bottom: 15%;}
.carousel-caption h2 img{max-width:400px;}
.carousel-caption .slider-btn{float:right; width:100px; margin-top:1rem;}
}
@media only screen and (max-width:767px){
.carousel-indicators {bottom:20px;}
.carousel-indicators li{width:12px; height:12px;}
.carousel-caption{bottom:0; left:5%; right:5%;}
.carousel-caption h2 img{max-width:400px;}
.carousel-caption .slider-btn{float:right; width:100px; margin-top:2rem;}
}

/* home section */
#home-about.bg-about{background:url(../images/bg-home-about.png) no-repeat center top; background-size: 100% 100%; padding-top:0px; padding-bottom:30px;}
#home-about h2{text-align: center;}
#home-about h2 span{display:block;}
#home-about .btn-more {margin-right:130px;}
@media only screen and (max-width:992px){
#home-about .btn-more {position: inherit; display: block; flex-basis: 100%; text-align: center; margin-right: 0; justify-content: center;} 
#home-about .btn-more a{margin:auto;}
.header-hero .header-shape{bottom:-10.6vw;}
#home-about.bg-about{background-size:150% auto;}
}
.carousel-inner > .carousel-item > .row{margin-left:0; margin-right:0;}
#home-news.bg-news{background:url(../images/bg-home-news.png) no-repeat left center; background-size: 100% auto; padding-top:30px; padding-bottom:30px;}
#home-news h3{text-align: left;}
#home-news h3 span{display:inline-block; font-size:0.6em; padding-left:10px;}
#home-news .btn-more{position: inherit; padding-top:25px;}
#home-news .btn-more a{margin:auto;}
#home-news .btn-more a:after{background:url(../images/icon-arrow-top.png) no-repeat center center; background-size: 100% 100%;-webkit-transform: skewX(0deg); -ms-transform: skewX(0deg);
transform: skewX(0deg);border: none; width: 25px; height: 40px; margin-top: -110px; margin-left: 18px;}
#home-news .home-video{padding-top:80px;}
#home-news .carousel-inner{padding:30px 45px;background:url(../images/bg-home-news-border.png) no-repeat center center; background-size: 100% 100%;}
section .news-block {background-color:#C7B88D; padding:10px;}
section .news-block:hover{box-shadow: 0 0 5px #42210B;}
section .news-content{padding-top:1rem; padding-bottom:0.5rem;}
section .news-content .news-data{color:#ffffff;}
section .news-content .news-title {font-size:18px; line-height: 2rem; height:100px;}
section .news-content .news-title > a{overflow: hidden;  display: -webkit-box;  text-overflow: ellipsis;  -webkit-line-clamp: 3;  -webkit-box-orient: vertical;  white-space: normal;}
section .news-block .news-img .badge{position: absolute; z-index: 10; margin-top: 10px; margin-left: 10px; border-radius: 0; font-size: 85%; font-weight: normal; color: #42210B; padding: 0.4rem 0.5rem; display: none;}
section .news-block .news-img a{position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
section .news-block .news-img{padding-bottom: 75%; position: relative; width: 100%;}
#home-news .carousel-control-next, #home-news .carousel-control-prev{color:#000000; opacity: 1; width:80px;border: none; background-color: transparent;}
section .news-block .news-img a img{height:100%;}
#home-news .carousel-control-next{margin-right:-40px;}
#home-news .carousel-control-next:after { content: ''; width: 70px; height: 25px; background-color: transparent; border-bottom: 1px solid #C7B88D; border-right: 1px solid #C7B88D; -webkit-transform: skewX(45deg); -ms-transform: skewX(45deg); transform: skewX(45deg); position: absolute;  margin-left: 40px; margin-top:-20px;}
#home-news .carousel-control-prev{margin-left:-40px;}
#home-news .carousel-control-prev:after { content: ''; width: 70px; height: 25px; background-color: transparent; border-bottom: 1px solid #C7B88D; border-left: 1px solid #C7B88D; -webkit-transform: skewX(-45deg); -ms-transform: skewX(-45deg); transform: skewX(-45deg); position: absolute;  margin-left: -40px; margin-top:-20px;}
#home-news .carousel-control-next-icon, #home-news .carousel-control-prev-icon{background-color:#ffffff;width:4rem; height:4rem; background-image:none;display: flex;  align-items: center;justify-content: center;font-size: 50px; border-radius: 99px; border:1px solid #C7B88D;}
#home-news .carousel-control-next:hover, #home-news .carousel-control-prev:hover{opacity: .75;}
@media only screen and (max-width:1024px){
#home-news .news-content .news-title{font-size:16px; height:100px;}
}
@media only screen and (max-width:767px){
#home-news .news-content .news-title{font-size:16px;}
#home-news .col-10{margin:auto;}
#home-news .carousel-inner{padding-top:15px; padding-bottom:15px; padding-left:20px; padding-right:20px;}
#home-news .carousel-control-next-icon, #home-news .carousel-control-prev-icon{width:2.5rem; height:2.5rem;}
#home-news .carousel-control-prev:after, #home-news .carousel-control-next:after{width:40px;margin-top:-20px; height:20px;}
#home-news .carousel-control-prev:after{margin-left:-20px;}
#home-news .carousel-control-next:after{margin-left:20px;}
#home-news .btn-more{margin-right:0;}
}
@media only screen and (max-width:467px){
    section .news-content .news-title > a{-webkit-line-clamp: 4; }
    #home-news .news-content .news-title{height:128px;}
}

#home-service.bg-service{background:url(../images/bg-home-service.png) no-repeat center center; background-size: auto 100%; padding-top:30px; padding-bottom:30px;}
#home-service .row > div{padding:8%;}
#home-service .row a img {border-radius: 999px;}
#home-service .row a:hover img{box-shadow: 0 0 5px #42210B;}
@media only screen and (max-width:767px){
#home-service.bg-service{background:none;}
#home-service .row > div{padding:10px 8%;}
}

#home-donation.bg-donation{background:url(../images/bg-donation-hart.png) no-repeat center bottom; background-size: 100% auto;}
#home-donation {padding-top:30px; padding-bottom:30px;}
#home-donation h3 span{display:block; }
blockquote{background-color:#9D291F; color:#ffffff; border-radius: 10px; margin:1rem 0; padding:5px 1rem 8px 1rem; text-align: center; font-size: 1.2rem;}
#home-donation .section-title {background:url(../images/bg-home-donation-title.png) no-repeat center center; background-size: 100% 100%; padding-top: 100px;}
#home-donation .bg-donation-left{position: absolute; left:0; margin-top:20%;}
#home-donation .bg-donation-phone{display:none;}
@media only screen and (min-width:768px) and (max-width:1024px){
#home-donation .bg-donation-left{display: none;}
#home-donation.bg-donation {background-size: 150% auto; background-position: 65% 90% ;}
}
@media only screen and (max-width:767px){
#home-donation .bg-donation-left{display: none;}
#home-donation.bg-donation {background-size: 280% auto; background-position: 65% 90% ;}

#home-donation h3 span{line-height:1.5rem;}
#home-donation .section-title{padding-top:58px; background-size: 150% 100%; background-position: 15% center;}
    blockquote{font-size:1.05rem;}
}


#home-pay.bg-pay{background:url(../images/bg-home-donation-bottom.png) no-repeat center bottom; background-size: auto;}
#home-pay{ text-align: center;}
#home-pay .row img, #home-pay .row a{margin:auto;}
#home-pay .row a{margin-top:-110px;}
#home-pay .row a:hover img{opacity: 0.9;}

@media only screen and (max-width:1200px){
#home-pay a img{max-width:130px;}
}

#home-map {background:url(../images/bg-map.jpg) no-repeat center bottom; background-size: cover; padding-top:30px; padding-bottom:30px;}
#home-map h2{text-align: left;}
#home-map h2 span{display:block;}
#home-map .contact-block {background-color: rgba(0,0,0,0.6); color:#ffffff; padding:30px;}
#home-map .contact-block ol{margin-left:0; list-style: none;}
#home-map .contact-block li{text-indent: -40px; margin-left:80px;word-wrap:break-word;}
#home-map .contact-block li+li{ margin-top:0.5rem;}
#home-map .contact-block li a{color:#ffffff;word-wrap:break-word; width:100%;}
#home-map .contact-block li a:hover{color:#C7B88D;}
#home-map .contact-block li a img{margin-bottom:2px; margin-right:5px;}
@media only screen and (min-width:768px) and (max-width:1024px){
#home-map .contact-block{ padding:20px;}
}
@media only screen and (max-width:767px){
#home-map .contact-block{padding:10px;}
#home-map{padding-left:10px; padding-right:10px;}
}


/*============= all page ===========*/
/* 次標題 */
#page .section-title-h3{color:#42210B;padding-bottom: 1rem; margin-bottom: 1rem; font-size: 30px;}
#page .section-title-h3 strong { text-decoration: underline #9E9E9E dashed 3px; text-underline-offset: 11px;}
/* 邊框 */
#page .block-border{background:url(../images/bg-home-news-border.png) no-repeat left top; background-size: 100% 100%; padding:30px; margin:30px 0;}
@media only screen and (max-width:767px){
#page .block-border{padding:15px; margin:15px 0;}
}
/* 標題底線 */
#page .section-title {border-bottom:2px dotted #808080; margin-bottom:1.5rem;}
@media only screen and (max-width:1200px){
#page .section-title-h3 {font-size:22px;}
}
@media only screen and (max-width:467px){
#page .section-title-h3{font-size:21px; margin-bottom: 0.5rem;}
}
section hr{border-top-width:5px; border-style: double; border-color: #C7B88D; margin-top: 2rem;
margin-bottom: 2rem;}
section h4{color:#42210B;}
section h5, section h3{color:#8B291F;}
/* 輪播按鈕 */
#page .carousel-control-next, #page .carousel-control-prev{background-color: transparent; border:none;}
#page .carousel-control-next{margin-right:-75px;}
#page .carousel-control-next:after { content: ''; width: 70px; height: 25px; background-color: transparent; border-bottom: 1px solid #C7B88D; border-right: 1px solid #C7B88D; -webkit-transform: skewX(45deg); -ms-transform: skewX(45deg); transform: skewX(45deg); position: absolute;  margin-left: 40px; margin-top:-20px;}
#page .carousel-control-prev{margin-left:-75px;}
#page .carousel-control-prev:after { content: ''; width: 70px; height: 25px; background-color: transparent; border-bottom: 1px solid #C7B88D; border-left: 1px solid #C7B88D; -webkit-transform: skewX(-45deg); -ms-transform: skewX(-45deg); transform: skewX(-45deg); position: absolute;  margin-left: -40px; margin-top:-20px;}
#page .carousel-control-next-icon, #page .carousel-control-prev-icon{background-color:#ffffff;width:4rem; height:4rem; background-image:none;display: flex;  align-items: center;justify-content: center;font-size: 50px; border-radius: 99px; border:1px solid #C7B88D;}
#page .carousel-control-next:hover, #page .carousel-control-prev:hover{opacity: .75;}
@media only screen and (max-width:1200px){
#page .carousel-control-next{margin-right:-38px;}
  #page .carousel-control-prev{margin-left:-38px;}  
}
@media only screen and (max-width:767px){
#page .carousel-control-next{margin-right:-20px;}
#page .carousel-control-prev{margin-left:-20px;}
#page .carousel-inner{padding-top:15px; padding-bottom:15px;}
#page .carousel-control-next-icon, #page .carousel-control-prev-icon{width:2rem; height:2rem;}
#page .carousel-control-prev:after, #page .carousel-control-next:after{width:36px;margin-top:-16px; height:16px;}
#page .carousel-control-prev:after{margin-left:-20px;}
#page .carousel-control-next:after{margin-left:20px;}
#page .btn-more{margin-right:0;}
}


/* about */
#page{}


#page.page-chairman {background:url(../images/bg-Chairman.jpg) no-repeat center center; background-size:cover;}
#page.page-chairman .section-title .title{color: #ffffff; padding-left:0; padding-right:0;}
#page.page-chairman .section-title{border-bottom:none; margin-bottom:0;}
#page.page-chairman .chairman-block{width:100%; height:auto; color:#42210B; text-align: center; margin:0;  padding:0.6rem 0.5rem;display: flex;  flex-direction: column; justify-content: center;border-top: 2px dotted #aaaaaa;margin-bottom:2rem;}
#page.page-chairman .chairman-list{display: flex;flex-wrap: wrap; margin-top:1.5rem;}
#page.page-chairman .chairman-block span{ background-color: #C7B88D; border-radius: 99px; display:block; padding:0.5rem 1.5rem; min-height: 30px; line-height: 30px; z-index: 5;}
#page.page-chairman .chairman-block h4{font-weight: 400; margin-top:0.5rem;color:#ffffff;}
#page.page-chairman .chairman-block .chairman-text{ padding-top: 1.4rem;}
#page.page-chairman .chairman-block span:before { content: ''; display: block; width: 16px; height: 16px; position: absolute; background-color: #92291F; border-radius: 99px; top: 0; left: 50%;margin-top: -8px;  margin-left: -8px;}
#page.page-chairman .chairman-block span:after {  content: '';  display: block;  width: 1px;  height: 2rem;  position: absolute;  background-color: #92291F; top: 0; left:50%; z-index: 0;}
#page.page-chairman .former-ceo{align-items: center; color:#ffffff;}
#page.page-chairman .former-ceo span strong{ font-size: 1.25rem;}
#page.page-chairman .former-ceo h4{color:#C7B88D;}
#page.page-chairman .former-ceo .chairman-block{padding:0.6rem 0; margin-bottom:2rem;}
@media only screen and (max-width:1100px){

#page.page-chairman .former-ceo .chairman-block{padding:0.5rem;}
}
@media only screen and (max-width:767px){
    #page.page-chairman .chairman-block{margin-bottom:2rem;}
}
@media only screen and (max-width:467px){

}


#page.page-timeline {background:url(../images/bg-timeline.png) no-repeat bottom right; background-size:100% auto;}
.timeline { width: 100%; max-width: 760px; margin: auto;}
.timeline.timeline-one .timeline-item .timeline-year{ font-size:26px; font-weight: 400; color: #42210B;border-bottom: 2px dashed #9E9E9E; padding-bottom: 0.5rem; margin-bottom:0.5rem;}
.timeline.timeline-one .timeline-item:nth-child(2n+1) { margin-left: 0; padding-right: 3.3rem;  padding-left: 0; text-align: right;}
.timeline.timeline-one .timeline-item:nth-child(2n+1) p{text-align: right;}
.timeline.timeline-one .timeline-item { position: relative; width: 50%; margin-left: 50%; padding-bottom: 0; padding-left: 3rem; text-align: left; margin-bottom: -10px;}
.timeline.timeline-one .timeline-item:nth-child(2n+1):after, .timeline.timeline-one .timeline-item:nth-child(2n+1):before {  right: 0;  left: auto;}
.timeline.timeline-one .timeline-item:before { content: ""; position: absolute; top: 0; left: 0; width: 30px; height: 30px; margin-top: 1.5rem; margin-left: -1.2rem; border: 0.5rem solid #C7B88D; border-radius: 50%; background-color: #ffffff; z-index: 1;}
.timeline.timeline-one .timeline-item:nth-child(2n+1):before {margin-right: -0.7rem;}
.timeline.timeline-one .timeline-item:after { content: ""; position: absolute; top: 0; left: 0; bottom: -2.1875rem; width: 0.5rem; margin-top: 1.6rem; margin-left: -0.5rem; background-color: #C7B88D;}
.timeline.timeline-one .timeline-item h5.timeline-year:before{content:''; display:block; width:22px; height:26px; background:url(../images/timeline-arrow.png) no-repeat center center; background-size: 100% 100%; margin-left:-31px; margin-top:1.6rem; position: absolute;}
.timeline.timeline-one .timeline-item:nth-child(2n+1) h5.timeline-year:before{margin-left:auto; margin-right:25px; right:0;-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);
transform:scaleX(-1);}
.timeline.timeline-one .timeline-item:last-child::after{display: none;}
.timeline.timeline-one .timeline-item > p > img { max-width: 10px; height: auto; vertical-align: baseline; margin-right: 5px;}
@media only screen and (max-width:467px){
#page.page-timeline {padding-left:10px; padding-right:10px;}
}


#page.page-vision {background:url(../images/bg-vision.png) no-repeat bottom right; background-size:100% auto;}
#page.page-vision1 {background:url(../images/bg-vision2.png) no-repeat bottom left; background-size:100% auto; padding-bottom: 10vw;}

#page.page-mission {background:url(../images/bg-mission.jpg) no-repeat center bottom; background-size:cover; padding-top:10vh; padding-bottom:10vh;}
#page.page-mission .section-title{border-color: #ffffff;}
#page.page-mission .title{text-align: center; color:#42210B;}
#page.page-mission p{color:#ffffff; text-shadow: 0 0 3px #333333; font-size:20px; line-height: 2.5rem; text-align: center; letter-spacing: 2px;}
@media only screen and (max-width:467px){
#page.page-mission p{font-size:16px; line-height: 2rem;}
}

#page.page-pay{background:url(../images/bg-page-pay.jpg) no-repeat center center; background-size: cover;}
#page.page-pay{ text-align: center;}
#page.page-pay .row img, #page.page-pay .row a{margin:auto;}
#page.page-pay .row a:hover img{opacity: 0.9;}
#page.page-pay h4{text-align: left; color:#42210B; line-height: 3rem;}
@media only screen and (max-width:467px){
#page.page-pay h4 {font-size:18px; line-height: 2.5rem;}
}

@media only screen and (max-width:1200px){
#page.page-pay a img{max-width:130px; width:100%;}
#page.page-pay h4 {font-size:19px; line-height: 2.5rem;}
}

#page.page-recognized{background:url(../images/bg-page-recognized.png) no-repeat left center; background-size: 100% auto;}
#page.page-recognized .section-title span{display: block; padding-left: 0;}

#page.page-recognized .grateful-list{ display: flex;flex-wrap: wrap;}
#page.page-recognized .grateful-list a{flex-basis: calc(100% / 6); width: calc(100% / 6);padding:1.5rem;}
@media only screen and (max-width:1199px){
#page.page-recognized .grateful-list a{flex-basis: calc(100% / 3); width: calc(100% / 3);}   
}
@media only screen and (max-width:467px){
#page.page-recognized .grateful-list a{flex-basis: calc(100% / 2); width: calc(100% / 2);}   
}

.ekko-lightbox{display:-ms-flexbox!important;display:flex!important;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding-right:0!important}.ekko-lightbox-container{position:relative; max-height:80vh;}.ekko-lightbox-container>div.ekko-lightbox-item{position:absolute;top:0;left:0;bottom:0;right:0;width:100%; /*max-width:1200px;*/ height:auto; max-height:90vh; text-align: center;}.ekko-lightbox iframe{width:100%;height:100%}.ekko-lightbox-nav-overlay{z-index:1;position:absolute;top:0;left:0;width:100%;height:100%;display:-ms-flexbox;display:flex; margin-left:0;}.ekko-lightbox-nav-overlay a{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:0.5;transition:opacity .5s;color:#9D291F;font-size:40px;z-index:1}.ekko-lightbox-nav-overlay a>*{-ms-flex-positive:1;flex-grow:1}.ekko-lightbox-nav-overlay a>:focus{outline:none}.ekko-lightbox-nav-overlay a span{padding:0 0px}.ekko-lightbox-nav-overlay a:last-child span{text-align:right}.ekko-lightbox-nav-overlay a:hover{text-decoration:none}.ekko-lightbox-nav-overlay a:focus{outline:none}.ekko-lightbox-nav-overlay a.disabled{cursor:default;visibility:hidden}.ekko-lightbox a:hover{opacity:1;text-decoration:none}.ekko-lightbox .modal-dialog{display:none; margin:0 auto;}.ekko-lightbox .modal-footer{text-align:left}.ekko-lightbox-loader{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.ekko-lightbox-loader>div{width:40px;height:40px;position:relative;text-align:center}.ekko-lightbox-loader>div>div{width:100%;height:100%;border-radius:50%;background-color:#fff;opacity:.6;position:absolute;top:0;left:0;animation:a 2s infinite ease-in-out}.ekko-lightbox-loader>div>div:last-child{animation-delay:-1s}.modal-dialog .ekko-lightbox-loader>div>div{background-color:#333}@keyframes a{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}
.ekko-lightbox-container>div.ekko-lightbox-item>img{ height:100%; width:auto !important;}
.modal-header{display: block !important;}
.modal-title {display: none;}
.modal-body {padding:2rem;}


#page.page-report{background:url(../images/bg-page-report.png) no-repeat center top; background-size: 100% auto;}
#page.page-report .section-title {border:none;}
#page.page-report .section-title span{display: block; padding-left: 0;}

#page.page-report .carousel-control-next, #page.page-report .carousel-control-prev{color:#000000; opacity: 1; width:80px;border: none; background-color: transparent;}
#page.page-report .carousel-control-next{margin-right:-80px; }
#page.page-report .carousel-control-next:after { content: ''; width: 70px; height: 25px; background-color: transparent; border-bottom: 1px solid #C7B88D; border-right: 1px solid #C7B88D; -webkit-transform: skewX(45deg); -ms-transform: skewX(45deg); transform: skewX(45deg); position: absolute;  margin-left: 40px; margin-top:-20px;}
#page.page-report .carousel-control-prev{margin-left:-80px;}
#page.page-report .carousel-control-prev:after { content: ''; width: 70px; height: 25px; background-color: transparent; border-bottom: 1px solid #C7B88D; border-left: 1px solid #C7B88D; -webkit-transform: skewX(-45deg); -ms-transform: skewX(-45deg); transform: skewX(-45deg); position: absolute;  margin-left: -40px; margin-top:-20px;}
#page.page-report .carousel-control-next-icon, #page.page-report .carousel-control-prev-icon{background-color:#ffffff;width:4rem; height:4rem; background-image:none;display: flex;  align-items: center;justify-content: center;font-size: 50px; border-radius: 99px; border:1px solid #C7B88D;}
#page.page-report .carousel-control-next:hover, #page.page-report .carousel-control-prev:hover{opacity: .75;}
#page.page-report .bg-report-block{background-color: rgba(199,184,141,0.4); padding:2rem 3rem; }
#page .report-all .list{display: flex;}
#page .report-all .list+.list{margin-top:1rem;}
#page .report-all .list p{flex-basis: 80%; font-size:20px; padding-left:0.5rem; padding-right:0.5rem;}
#page .report-all .list a{flex-basis: 20%;}
#page .report-all .list a:hover{opacity: 0.85;}
@media only screen and (min-width:1200px){
#page.page-report .bg-report-block{ margin-left:-25px; margin-right:-25px;}   
}
@media only screen and (max-width:1199px){
#page .report-all .list a img{max-width: 100px;float: right; margin-top:0.5rem;}
#page .report-all .list p{font-size:18px;}
}
@media only screen and (max-width:767px){
#page.page-report .carousel-inner{padding-top:15px; padding-bottom:15px;}
#page.page-report .carousel-control-next-icon, #page.page-report .carousel-control-prev-icon{width:2.5rem; height:2.5rem;}
#page.page-report .carousel-control-prev:after, #page.page-report .carousel-control-next:after{width:40px;margin-top:-20px; height:20px;}
#page.page-report .carousel-control-prev:after{margin-left:-20px;}
#page.page-report .carousel-control-next:after{margin-left:20px;}
#page .report-all{margin-top:2rem;}
#page .report-all .list p{font-size:16px; padding-right:1rem; padding-left: 0;}

}


/* news */
#page.page-news {background:url(../images/bg-page-contact.png) no-repeat left bottom ;background-size: 100% auto;}
#page.page-news .section-title h3{font-size:26px; padding-left:2rem; padding-right:2rem; padding-bottom: 1rem; font-weight: 400; color:#42210B;}
#page.page-news .news-date{padding-left:2rem; padding-right:2rem; color:#C7B88D; text-align: right; margin-top:-1rem; margin-bottom: 2rem;}
#page.page-news .news-author{padding-left:2rem; padding-right:2rem; color:#42210B; text-align: left; margin-top:-1rem; margin-bottom: 2rem; font-size:18px;}
#page.page-news .news-date+.news-author{margin-top:-2rem;}
#page.page-news .news-content{}
#page.page-news .news-content p{margin:1rem 0; line-height: 2rem;}
#page.page-news .page-num {border-top:1px solid #9E9E9E; margin-top:2rem; padding-top:1rem;}
#page.page-news .news-list{width: 100%; margin:0; padding:15px; }
#page.page-news .news-list .news-date{margin:0; padding:3px;    flex-basis: 150px;text-align: center;}
#page.page-news .news-list .badge {border-radius: 0; background-color: #42210B;width: 100px; font-size: 15px; font-weight: normal;}
#page.page-news .news-list a{flex-basis: calc(100% - 100px - 150px);}
#page.page-news .news-list .list-group-item{border-left:none; border-right:none; border-top:none; border-radius: 0; background-color: transparent;}
@media only screen and (max-width:767px){
    #page.page-news .section-title h3{padding-left:0; padding-right:0; font-size:24px;}
#page.page-news .section-title h5{font-size:20px; padding-left:0; padding-right:0; }
#page.page-news .news-date{padding-right:0;}
#page.page-news .news-list .list-group-item{flex-direction: column;align-items: start !important;padding-left: 0; padding-right: 0;}
#page.page-news .news-list .news-date{flex-basis: auto;}
}


/* 換頁 */
.page-num .carousel-control-next, .page-num .carousel-control-prev{color:#000000; opacity: 1; width:80px;border: none; background-color: transparent;position: static;}
.page-num .carousel-control-next{float:right;}
.page-num .carousel-control-next:after { content: ''; width: 70px; height: 25px; background-color: transparent; border-bottom: 1px solid #C7B88D; border-right: 1px solid #C7B88D; -webkit-transform: skewX(45deg); -ms-transform: skewX(45deg); transform: skewX(45deg); position: absolute;  margin-left: 40px; margin-top:-20px;}
.page-num .carousel-control-prev{float:left;}
.page-num .carousel-control-prev:after { content: ''; width: 70px; height: 25px; background-color: transparent; border-bottom: 1px solid #C7B88D; border-left: 1px solid #C7B88D; -webkit-transform: skewX(-45deg); -ms-transform: skewX(-45deg); transform: skewX(-45deg); position: absolute;  margin-left: -40px; margin-top:-20px;}
.page-num .carousel-control-next-icon, .page-num .carousel-control-prev-icon{background-color:#ffffff;width:4rem; height:4rem; background-image:none;display: flex;  align-items: center;justify-content: center;font-size: 50px; border-radius: 99px; border:1px solid #C7B88D;}
.page-num .carousel-control-next:hover, .page-num .carousel-control-prev:hover{opacity: .75;}
.page-num .btn-more{left:calc((100% - 80px) / 2); margin-top:-1rem; width:80px; margin-right: 0;}
.page-num .btn-more a:after{display: none;}

section .pagination{margin-left:0;}
.page-link {color:#42210B; background-color: transparent; border:none;}
.page-link:hover {color: #C7B88D;    background-color: transparent;  border-color: transparent;}
.page-item.active .page-link { color: #9D291F;background-color: transparent;  border-color: transparent;}
.carousel-control-prev .page-link{float:left;}
.carousel-control-next .page-link:hover, .carousel-control-prev .page-link:hover{opacity: .75;}
.carousel-control-prev .page-link, .carousel-control-next .page-link {background-color:#ffffff !important;width:3rem; height:3rem; background-image:none;display: flex;  align-items: center;justify-content: center;font-size: 50px; border-radius: 99px !important; border:1px solid #C7B88D !important; font-size: 1px; text-indent: -9999px; opacity: 1;}
.nav-page-link .carousel-control-next, .nav-page-link .carousel-control-prev {opacity: 1; position: static; width:85px;}
@media only screen and (max-width:767px){
.carousel-control-prev .page-link, .carousel-control-next .page-link{width:2rem; height:2rem;}
.carousel-control-prev .page-link:after, .carousel-control-next .page-link:after{width:40px; height:14px;}
.carousel-control-prev .page-link:after{margin-left:-25px; margin-top:-14px;}
.carousel-control-next .page-link:after{margin-left:25px; margin-top:-14px;}
}
/* 戒癮 */
#page.page-quit-addiction{background:url(../images/bg-timeline.png) no-repeat bottom right; background-size:100% auto; padding-bottom:25vh;}
#page.page-quit-addiction h3{color:#A7272D; margin: 0.5rem 0;font-size:24px;}
#page.page-quit-addiction p{margin:0.5rem 0;}
#page.page-addiction-price{background:url(../images/bg-addiction-price.jpg) no-repeat left center; background-size:cover;}
#page.page-addiction-price .price-text p{text-align: center; font-size:1.2rem; color:#42210B; line-height: 2rem;}
#page.page-addiction-case{background:url(../images/bg-page-case.png) no-repeat center center; background-size:100% auto;}
#page.page-addiction-case .price-height{height:100%;}
#page.page-addiction-case .price-block{background-color:#E82637; border-radius: 35px; padding:0;  box-shadow: 0 0 3px #666666; margin:5px;    height: 100%;  display: flex; flex-direction: column;}
#page.page-addiction-case .price-block h4{text-align: center; padding: 1rem; padding-top:2rem;  color:#000000; height:130px;display: flex;  align-items: center;  justify-content: center;}
#page.page-addiction-case .price-block h4:before {content: '';display: block;width: 19px;height: 19px;background-color: #ffffff;border-radius: 99px;position: absolute;left: 20px;top: 15px;border: 1px solid #999999;}
#page.page-addiction-case .price-block .block-text{background-color:#CCCCCC; text-align: center; padding:2rem; border-top-left-radius: 35px; border-bottom-left-radius: 35px; border-bottom-right-radius: 35px;height: calc(100% - 100px); font-size:18px;}
#page.page-addiction-case .price-block.block-dark{background-color:#C7B88D; margin:0; z-index:10;}
#page.page-addiction-case .price-block.block-dark h4 {font-size:30px;}
#page.page-addiction-case .price-block.block-dark .block-text{background-color:#333333; color:#ffffff; font-size:22px;}
#page.page-addiction-case .price-block.block-dark .block-text a{color:#ffffff;}
#page.page-addiction-case .price-block.block-dark .block-text img{max-width:400px; width:100%; height:auto;}
@media only screen and (max-width:1200px){
    #page.page-addiction-case .price-block{margin-bottom: 20px; height:auto;}
    #page.page-quit-addiction{padding-bottom:15vh;}
}
@media only screen and (max-width:767px){
    #page.page-quit-addiction h3{font-size:22px;}

    #page.page-addiction-price .price-text p{font-size:1.05rem;}
}
#page.page-share{background:url(../images/bg-page-contact.png) no-repeat right bottom; background-size:100% auto; padding-bottom: 20vh;}
#page.page-share .card{background-color: transparent;border-top: none; border-left: none; border-right: none; margin-bottom: 2rem; padding-bottom:2rem;}
#page.page-share .card-body{padding-top:0; padding-bottom:0;}
#page.page-share .card-text+.card-text{margin-top:0.5rem;}
#page.page-share .card-title a{color:#42210B;}
#page.page-share .card-title a:hover{color:#C7B88D;}
#page.page-share .card img:hover{opacity: 0.85;}
@media only screen and (max-width:1200px){
    #page.page-share{padding-bottom: 10vh;}
}


/* 反毒 */
#page.page-anti-drug {background:url(../images/bg-home-news.png) no-repeat left bottom; background-size:contain;}
.anti-drug-card{border-radius: 30px; box-shadow: 0 0 15px rgb(0 0 0 / 15%); border:none;}
.anti-drug-card .no-gutters > div:first-child{background-color: #D71C24; border-top-left-radius: 30px; border-bottom-left-radius: 30px; padding: 1.5rem; text-align: center;}
.anti-drug-card .no-gutters > div:last-child {display: flex; align-items:center;}
.anti-drug-card .no-gutters{border-radius: 30px;}
.anti-drug-card .card-text{ color:#603813; font-size:18px;}
@media only screen and (max-width:1200px){
    .anti-drug-card .no-gutters > div:first-child img{max-width:90px;}
}
@media only screen and (max-width:767px){
    .anti-drug-card .no-gutters > div:first-child{border-radius: 30px;}
    .anti-drug-card .no-gutters > div:first-child img{max-width:80px;}
}
#page.page-anti-drug.bg-plan {background:url(../images/bg-timeline.png) no-repeat left bottom; background-size:100% auto;}
#page.page-anti-drug.bg-report {background:url(../images/bg-page-contact.png) no-repeat right bottom; background-size:100% auto; padding-bottom: 20vh;}

#page.bg-no{background: none;}

/* 兒少關懷 */
#page.page-care{background:url(../images/bg-page-contact.png) no-repeat right bottom; background-size:100% auto; padding-bottom:30vh;}
#page.page-care .block-text{/*background:url(../images/bg-care.png) no-repeat center top; background-size:100% 100%; padding:2rem 5%;*/ line-height: 3rem;}
#page.page-care .block-text > p, #page.page-care .block-text2 > p{line-height:3rem; font-size:18px;}
/*#page.page-care .block-img {position: absolute;right: 0;flex-basis: 42%;  max-width: 42%;}*/
@media only screen and (max-width:1200px){
    #page.page-care{padding-bottom: 10vh;}
    #page.page-care .block-img{flex-basis: 37%;  max-width: 37%; right:-30px;}
}
@media only screen and (max-width:767px){
    #page.page-care .block-img{position: static;flex-basis: 100%;  max-width: 100%; }
    #page.page-care .block-text > p, #page.page-care .block-text2 > p{line-height:1.6rem; font-size:15px;}
}

/* 復歸 */
#page.page-endowment{background:url(../images/bg-page-contact.png) no-repeat right bottom; background-size:100% auto; padding-bottom:30vh;}
#page.page-endowment.bg-step{background:url(../images/bg-home-news.png) no-repeat left bottom; background-size:contain;}
@media only screen and (max-width:1200px){
    #page.page-endowment{padding-bottom: 10vh;}
}
/* 捐款 */
#page.page-donate{background:url(../images/bg-home-news.png) no-repeat left top; background-size:contain; padding-bottom: 0;}
#page.page-donate-detail{background:url(../images/bg-donation-hart.png) no-repeat center 105%; background-size:100% auto; padding-bottom:25vh;}
#page.page-donate h3, #page.page-donate h4{margin-bottom:0.8rem; font-size:28px;}
#page.page-donate hr{border-style: dashed; border-color:#B0B0B0; border-width: 1px;}
#page.page-donate .tab-content .btn{margin:0.5rem; font-size:20px; padding:1rem; min-width: 120px; background-color: #C7B88D; color:#000000; border-color: #C7B88D; white-space:pre-wrap;max-width:120px;}
#page.page-donate .tab-content .btn:hover{box-shadow: 0 0 5px #42210B; color:#8B291F;}
#page.page-donate .tab-content .btn.active{background-color:#8B291F; color:#ffffff;}
#page.page-donate .custom-control-label{font-size:18px; font-weight: bold;}
#page.page-donate .form-control{font-size:20px;}
#page.page-donate .tab-pane ul > li, #page.page-donate .form-check-label{font-size:18px;}
@media only screen and (max-width:1200px){
    #page.page-donate-detail{background-position: center bottom; background-size: 150% auto; padding-bottom: 5vh;}
}
@media only screen and (max-width:767px){
    #page.page-donate-detail{background-size: 270% auto; }
}
@media only screen and (max-width:467px){
#page.page-donate .tab-content .btn{margin:0.3rem; font-size:18px; padding:0.5rem; min-width: 90px; max-width:90px; white-space:pre-wrap;}
}
form.login-box, .tab-content{width:100%;}
input:focus,button:focus,.form-control:focus{outline: none;box-shadow: none;}
.form-control:disabled, .form-control[readonly]{background-color: #fff;}
/*----------step-wizard------------*/
.d-flex{display: flex;}
.justify-content-center{justify-content: center;}
.align-items-center{align-items: center;}
/*---------signup-step-------------*/
.bg-color{background-color: #333;}
.signup-step-container{padding: 50px 0px;padding-bottom: 60px;width:100%;}
.wizard .nav-tabs {position: relative;margin-bottom: 0;border-bottom-color: transparent; margin-left:0; width:100%;}
.wizard > div.wizard-inner { position: relative;margin-bottom: 20px;text-align: center;width:100%;}
.connecting-line {height: 1px;background: #B0B0B0;position: absolute;width: 75%;margin: 0 auto;left: 0;right: 0;top: 15px;z-index: 1;}
.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {color: #555555;cursor: default;border: 0;border-bottom-color: transparent;}
span.round-tab {width: 80px;height:80px;line-height: 80px;display: inline-block;border-radius: 50%;background: #4D4D4D;z-index: 2;position: absolute;left: 0;text-align: center;font-size: 30px;color: #ffffff;font-weight: 500;border: 1px solid #ddd;}
span.round-tab i{color:#555555;}
.wizard{width:100%;min-width: 600px;}
.wizard li.active span.round-tab {background: #8B291F;color: #fff;border-color: #8B291F;}
.wizard li.active span.round-tab i{color: #5bc0de;}
.wizard .nav-tabs > li.active > a i{color: #8B291F;}
.wizard .nav-tabs > li {width: 25%;}
.wizard li:after {content: " ";position: absolute;left: 46%;opacity: 0;margin: 0 auto;bottom: 0px;border: 5px solid transparent;border-bottom-color: red;transition: 0.1s ease-in-out;}
.wizard .nav-tabs > li a {width: 80px;height: 80px;margin: 0px auto;border-radius: 100%;padding: 0;background-color: transparent;position: relative;top: -30px; margin-bottom: 20px; }
.wizard .nav-tabs > li a i{position: absolute;bottom: -35px;font-style: normal;font-weight: 400;white-space: nowrap;left: 50%;transform: translate(-50%, -50%);font-size: 20px;font-weight: 400;color: #000;}
.wizard .nav-tabs > li a:hover {background: transparent;}
.wizard .tab-pane {position: relative;padding-top: 0px; width:100%; min-width: 500px;}
.wizard .tab-pane h4{background-color: #B0B0B0; border-radius: 30px; text-align: center; padding:0.5rem 0.5rem 0.6rem 0.5rem; margin-bottom: 1rem; margin-top:1rem;}
.wizard .custom-control-inline{ margin-bottom:0.7rem;}
.wizard h3 {margin-top: 0;}
.wizard h5{background-color: #9D291F; color:#ffffff;padding: 5px 1rem; border-radius: 20px;}
.form-check-label a{color:#9D291F;}
.form-check-label a:hover{color:#C7B88D;}
.prev-step,
.next-step{font-size: 18px;padding: 8px ;border: none;border-radius: 10px;margin-top: 30px; width:100%; color:#ffffff;background-color: #8B291F;}
.prev-step+.next-step{margin-left:1rem;}
.prev-step:hover,
.next-step:hover{background-color: #C7B88D; color:#000000;}
.next-step{background-color: #8B291F;}
.skip-btn{background-color: #8B291F;}
.step-head{font-size: 20px;text-align: center;font-weight: 500;margin-bottom: 20px;}
.term-check{font-size: 14px;font-weight: 400;}
.custom-file {position: relative;display: inline-block;width: 100%;height: 40px;margin-bottom: 0;}
.custom-file-input {position: relative;z-index: 2;width: 100%;height: 40px;margin: 0;opacity: 0;}
.custom-file-label {position: absolute;top: 0;right: 0;left: 0;z-index: 1;height: 40px;padding: .375rem .75rem;font-weight: 400;line-height: 2;color: #495057;background-color: #fff;border: 1px solid #ced4da;border-radius: .25rem;}
.custom-file-label::after {position: absolute;top: 0;right: 0;bottom: 0;z-index: 3;display: block;height: 38px;padding: .375rem .75rem;line-height: 2;color: #495057;content: "Browse";background-color: #e9ecef;border-left: inherit;border-radius: 0 .25rem .25rem 0;}
.footer-link{margin-top: 30px;}
.all-info-container{}
.list-content{margin-bottom: 10px;}
.list-content a{padding: 10px 15px;width: 100%;display: inline-block;background-color: #f5f5f5;position: relative;color: #565656;font-weight: 400;border-radius: 4px;}
.list-content a[aria-expanded="true"] i{transform: rotate(180deg);}
.list-content a i{text-align: right;position: absolute;top: 15px;right: 10px;transition: 0.5s;}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {background-color: #fdfdfd;}
.list-box{padding: 10px;}
.signup-logo-header .logo_area{width: 200px;}
.signup-logo-header .nav > li{padding: 0;}
.signup-logo-header .header-flex{display: flex;justify-content: center;align-items: center;}
.list-inline li{display: inline-block;}

/*-----------custom-checkbox-----------*/
/*----------Custom-Checkbox---------*/
input[type="checkbox"]{position: relative;display: inline-block;margin-right: 5px;}
input[type="checkbox"]::before,
input[type="checkbox"]::after {position: absolute;content: "";display: inline-block;   }
input[type="checkbox"]::before{height: 16px;width: 16px;border: 1px solid #999;
left: 0px;top: 0px;background-color: #fff;border-radius: 2px;}
input[type="checkbox"]::after{height: 5px;width: 9px;left: 4px;top: 4px;}
input[type="checkbox"]:checked::after{content: "";border-left: 1px solid #fff;border-bottom: 1px solid #fff;transform: rotate(-45deg);}
input[type="checkbox"]:checked::before{background-color: #18ba60;border-color: #18ba60;}

@media (max-width: 767px){
.sign-content h3{font-size: 40px;}
.wizard .nav-tabs > li a i{font-size:16px; letter-spacing: -0.01rem;}
.signup-logo-header .navbar-toggle{margin: 0;margin-top: 8px;}
.signup-logo-header .logo_area{margin-top: 0;}
.signup-logo-header .header-flex{display: block;}
.wizard, .wizard .tab-pane{min-width: 500px;}
    .wizard .nav-tabs > li, .wizard .nav-tabs > li a{margin-bottom: 0;}
}
@media only screen and (max-width:467px){
.wizard, .wizard .tab-pane{min-width: 300px;}
    span.round-tab{width:50px; height:50px; line-height: 50px; margin-left:15px;}
    .connecting-line{top:2px;}
    .wizard .nav-tabs > li a i{bottom:-11px;}
}


/* video */
#page.page-video {background:url(../images/bg-home-news.png) no-repeat left bottom; background-size:contain;}
#page.page-video-list{background:url(../images/bg-page-contact.png) no-repeat right bottom; background-size:100% auto;}
#page.page-video-list .list-block{padding:1rem;}
#page.page-video-list .list-block h5{margin-top:0.5rem;}

/* contact */
#page.page-contact{background:url(../images/bg-page-contact.png) no-repeat right bottom; background-size: 100% auto;}
#page.page-contact .contact-block ol{margin-left:0; list-style: none;}
#page.page-contact .contact-block li{text-indent: -40px; margin-left:80px; width:100%;}
#page.page-contact .contact-block li+li{ margin-top:0.5rem;}
#page.page-contact .contact-block li a{color:#000000; width:100%;word-wrap:break-word;}
#page.page-contact .contact-block li a:hover{color:#C7B88D;}
#page.page-contact .contact-block li a img{margin-bottom:2px; margin-right:5px;}


/* 404 */
#page.page-404{padding-bottom: 30vh;}
#page.page-404 .block-404{min-height:300px; text-align: center;padding: 5vh 0;}
#page.page-404 .block-404 h3{font-size:60px;margin-top:5vh;}
#page.page-404 .block-404 h1{font-size:80px; }
#page.page-404 .block-404 h2{font-size:40px; margin-top:5vh;}
#page.page-404 .block-404 .btn-more{position: static;width: auto; display: flex; justify-content: center; margin-top:5vh;}
#page.page-404 .block-404 .btn-more a{margin-left: 46px;}
@media only screen and (max-width:767px){
    #page.page-404 .block-404 h1{font-size:50px;}
    #page.page-404 .block-404 .btn-more a{margin-left: 0px;}
    #page.page-404{padding-bottom: 10vh;}
}

/* accound */
.accordion>.card .card-header, .accordion>.card {border:none; background-color: transparent;    padding: 0.2rem 0;}
.accordion .card-header button, .accordion .card-header button:active{padding-left:0; color:#42210B; font-size:18px;}
.accordion .card-header h2 button:hover{color:#C7B88D; text-decoration: none;}
.accordion .card-body {display: flex; padding-top:10px; padding-left:1rem; padding-right:1rem;}
.accordion .card-body dd{flex-basis: 40px; color:#9D291F; text-align: center; font-weight: 700; font-size: 18px;}
.accordion .card-body dt{font-weight: 400;}

/* page type */
.btn-type{margin-bottom: 1.5rem;}
.btn-type .btn-outline-primary{border-radius: 0; color:#42210B; border-color: #C7B88D;margin-bottom: 0.5rem;}
.btn-type .btn-outline-primary:hover, .btn-type .btn-outline-primary.active{background-color: #C7B88D !important; color:#ffffff !important; border-color: #C7B88D !important;}

#show_zipcode{width:100%;  display: flex; flex-direction: row; flex-wrap: wrap;}
#show_zipcode select[name='order_county'], #show_zipcode select[name='order_area'], #show_zipcode input[name='order_zipcode']{margin-left:1rem; border:1px solid #ced4da;padding: 0.375rem 0.75rem;color: #495057;border-radius: 0.25rem;flex-grow: 1; font-size:20px;}
#show_zipcode input[name='order_zipcode'] { margin-right: 1rem;}
@media only screen and (max-width:467px){
    #show_zipcode input[name='order_zipcode']{margin-top:1rem;}
    #show_zipcode select[name='order_area'] { margin-right: 1rem;}
}

.volunteer a:hover img{opacity:0.85;}
.volunteer .col-12 {display:flex; flex-wrap: wrap;justify-content:space-between;}
.volunteer .col-12 a{flex-shrink:0; flex-basis:32%;margin-top:0.55rem; margin-bottom:0.55rem;}
@media only screen and (max-width:767px){
    .volunteer .col-12 a{flex-basis:48%;}
}


/* 捐款流程說明 */
.donate-directions { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.donate-directions a.process-btn-mo { display: none;}
.donate-directions a.process-btn, 
.donate-directions #pdf-popup { width: 300px; padding: 5px 0; margin: 10px; color: #fff; text-align: center; text-decoration: none; border: 0; border-radius: 16px; background-color: green; display: block; cursor: pointer;}
.donate-directions a.process-btn:hover, 
.donate-directions #pdf-popup:hover { background-color: #286410;}

#process-desc { width: 100%; height: 100%; padding: 40px; box-sizing: border-box; background-color: rgba(0,0,0,0.6); position: fixed; top: 0; left: 0; z-index: 999999;}
#process-desc .close-btn { width: 40px; margin: 0 0 40px 0; float: right; cursor: pointer;}
#process-desc .close-btn img { width: 100%; height: auto;}

#process-desc .content { clear: both; width: 100%; height: calc(100% - 100px); padding: 40px 5vw; box-sizing: border-box; text-align: center; background-color: #fff; overflow-y: auto;}
#process-desc .content .title { width: 100%; padding: 0 0 40px 0; color: #ff0000; font-size: 2.4rem; font-weight: 600; text-align: center;}
#process-desc .content img.step-pic { max-width: 800px; width: 100%; height: auto; margin: 0 auto;}
#process-desc .content .text { width: 100%; padding: 30px 0; font-size: 1.4rem;}

@media only screen and (max-width:767px){
    #process-desc { width: 100%; height: 100%; padding: 40px 20px; box-sizing: border-box; background-color: rgba(0,0,0,0.6); position: fixed; top: 0; left: 0; z-index: 999999;}

    .donate-directions a.process-btn { display: none;}
    .donate-directions a.process-btn-mo { width: 300px; padding: 5px 0; margin: 10px; color: #fff; text-align: center; text-decoration: none; border: 0; border-radius: 16px; background-color: green; display: block; cursor: pointer;}
    .donate-directions a.process-btn-mo:hover { background-color: #286410;}
}