/*------------------------------------------------------------------
# 共通 + 首頁 CSS
-------------------------------------------------------------------*/
.gsc-adBlock {
  display: none !important;
}
*, *:before, *:after {
  margin: 0;
  padding: 0;
  word-wrap: break-word;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;}
html {
  font-size: 100%;
  max-width: 100%;}
body {
  color: #333;
  background-color: hsla(0, 100%, 100%, 1);
  font-family: Universe, Arial, 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;  
  font-size: 18px;
  line-height: 1.5;  
  word-break: break-word;
  word-wrap:break-word;
  overflow-wrap: break-word;
  overflow-x: hidden;}
a {
  -webkit-transition: .3s;
  transition: .3s;}
a:hover, a:focus { 
  text-decoration: none;
  outline: none;}
ul, li {
  list-style: none;}
::-moz-selection {
  color: hsla(0, 100%, 100%, 1);  
  background: #333;
  text-shadow: none;}
::selection, ::-moz-selection, ::-webkit-selection {
  color: hsla(0, 100%, 100%, 1);  
  background: #333;
  text-shadow: none;}
:active, :focus {
  outline: none !important;}

::-webkit-input-placeholder { /* WebKit Edge */
	color: #BBB !important;}
:-moz-placeholder { /* Firefox 4-18 */
	color: #BBB !important;
	opacity: 1;}
::-moz-placeholder { /* Firefox 19+ */
	color: #BBB !important;
	opacity: 1;}
::-ms-input-placeholder { /* Edge */
	color: #BBB !important;}
:-ms-input-placeholder { /* IE 10-11 */
	color: #BBB !important;}

h1, .h1 { font-size: 48px; }
h2, .h2 { font-size: 40px; }
h3, .h3 { font-size: 30px; }
h4, .h4 { font-size: 24px; }
h5, .h5 { font-size: 20px; }
h6, .h6 { font-size: 18px; }

p [lang=”en”] {
	text-align: justify;
	-webkit-hyphens: auto;
	    -ms-hyphens: auto;
	        hyphens: auto;}

/*== 文字編輯器 ==*/
.content_block ul li {
  list-style: initial;}
.content_block ol li {
  list-style: inherit;}
.content_block blockquote {
  font-style: italic;
  font-family: Georgia, Times, "Times New Roman", serif;
  padding: 2px 8px 2px 20px;
  border: 0;
  border-left: 5px solid #ccc;}
.content_block img {
  max-width: 100%;
  height: auto;}

/*--------------------------------------
                 自訂BS             
/*------------------------------------- */
.container .row {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;}

/*== 麵包屑 ==*/
.breadcrumb {
  margin-bottom: 0;
  padding-top: 2rem;
	background-color: transparent;}
@media(max-width: 480px) {
	.breadcrumb {
  padding-top: 1rem;}
}

/*== 頁籤 ==*/
.pagination {
  margin-bottom: 0;
  padding: 1rem 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;}

/*== 卡片 ==*/
.card {
	margin-bottom: 1rem;
  border: 0;
  -webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);
  box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);}
.card-body {
	padding: 1rem;}

/*== 【首頁】Tooltip ==*/
.tooltip.bs-tooltip-bottom .tooltip-inner {
	width: 350px;
  width: clamp(12.5rem,21.875rem,25rem);
	font-size: 1.125rem;/* 18 */
  text-align: left;
	border: 1px solid #333;}
.tooltip .arrow:before {
  border-bottom-color:#444 !important;
  border-top-color:#444 !important;}
.tooltip.show {
  opacity: 1;}
.tooltip_textindent {
  margin-left : 2em;
  text-indent : -1.5em;}
#donate_tooltip {
  padding: 0;}
#donate_tooltip:hover {
  background: transparent;}

/*=================================================================
                              通用
=================================================================*/
/* [data-section] {
  margin: 2em 0;} */

/*--------------------------------------
                    Font             
/*------------------------------------- */
/*== 省略文本 ==*/
.txt-omit-1 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;}
.txt-omit-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;}

/*--------------------------------------
                    Button             
/*------------------------------------- */
.btn { 
  border-radius: 5px;}
.btn-outline-orange {
  margin-top: 2rem;
  font-weight: 600;
  border: 1.5px solid;
  border-radius: 0;}
.link-orange {
  margin-top: 1.5rem;
  text-align: center;}
.link-orange a {
  position: relative;
  padding: .5rem 1.5rem;}
.link-orange a:before {
  content: "";
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;}

/*--------------------------------------
                    Photo             
/*------------------------------------- */
.img-responsive {
  max-width: 100%;
  height: auto;}

/*== img 4:3 aspect ratio ==*/
figure.img_4by3 {
  position: relative;  
  overflow: hidden;  
  width: 100%;
  height: auto;
  margin-bottom: 0;
  padding-top: 75%;}
figure.img_4by3 img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;  
  width: 100%;
  height: 100%;
	-webkit-transition: 1s;transition: 1s;
  -webkit-transition-duration: 4000ms;
          transition-duration: 4000ms;}
figure.img_4by3:hover img {
  -webkit-transform: scale(1.5);transform: scale(1.5);}
.modal-body figure.img_4by3:hover img {
  -webkit-transform: scale(1);transform: scale(1);}

/*--------------------------------------
                 【首頁】卡片            
/*------------------------------------- */
.goods_column.slick-slide,
.issue_column.slick-slide,
.gallery_item.slick-slide,
.youtube_item.slick-slide {
  padding-right: 15px;
  padding-left: 15px;}
@media (max-width: 768px) and (min-width: 480px) {
  .youtube_item.slick-slide {
    margin-top: .5rem;}}

.news_column .slick-list {
	margin: auto -0.5rem;}
@media (max-width: 480px) {
	.news_column .slick-list {
		margin: auto 10px;}}


/*== Select ==*/
select.default_select {
  padding: .5rem; 
  height: 2.5rem;
  width: 100%;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  color: #333;  
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #333;}
select.default_select:focus {
  outline: none;}

/*== Input ==*/
input,  select, 
.form-control:not(textarea) {
	padding-right: .5rem;
  padding-bottom: .5rem;
  font-size: 1.125rem;/* 18 */
  background: transparent;
  border: none;
  border-bottom: 1px solid;
  -webkit-box-shadow: none;box-shadow: none;
  border-radius: 0;}
select::-ms-expand {
  display: none;}
select, select.form-control {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: url(../images/select-icon.svg) no-repeat right 2% bottom 45%;
  background-size: .65rem .65rem;
  min-width: 5rem;}
input:focus,
input.form-control:focus,
select:focus,
select.form-control:focus {
  border-left: none !important;
  border-top: none !important;
  border-right: none !important;
  -webkit-box-shadow: none !important;
          box-shadow: none !important;}
select:focus,
select.form-control:focus {
  background: url(../images/select-icon.svg) no-repeat right 2% bottom 45% !important;
  background-size: .65rem .65rem !important;}

textarea, textarea.form-control {
	font-size: 1.125rem;/* 18 */}

/*-- 日期 Select置中 --*/
.years_group select {
  -moz-text-align-last:center;
       text-align-last:center;}

/*--------------------------------------
               Radio/Checkbox            
/*------------------------------------- */
input[type="radio"] {
  -webkit-appearance: radio;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  width: 16px;
  height: 16px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  background-color: #FFF;
  border: 1px solid #999;}
input[type="checkbox"] {
  -webkit-appearance: checkbox;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  width: 16px;
  height: 16px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  background-color: #FFF;
  border: 1px solid #999;}

/*== 通用 Tabs ==*/
.nav-tabs {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-bottom: none !important;}

/*== 通用 Slick ==*/
.slick-arrow, .slick-prev, .slick-next{
  z-index: 10;
  top: 33%;
  width: 60px;}
.slick-prev { left: 0px; }
.slick-next { right: 0px; }
.slick-prev:before, .slick-next:before {
  content: "";
  opacity: 1;
  display: inline-block;
  width: 60px;
  height: 60px;
  background-size: 80%;
  color: #ccc;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;}
.slick-dots {
  bottom: 5px;}
.slick .slick-track {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;}
.slick .slick-track .slick-slide {
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  height: auto;}
.slick .slick-track .slick-slide img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;}

/*=================================================================
                            Nav 頁籤樣式
=================================================================*/
.nav .nav-item,
.news_filter a {
  min-width: 12%;}
.news_filter a {
  margin: auto -3px;}/*【內頁】最新消息 */

.nav .nav-link,
.nav-tabs .nav-link,
.news_filter a,
.setup_content .nav-link {
	position: relative;
	padding: .5rem 1rem;
	font-size: 22px;
	text-align: center;
	line-height: 1.5;
  border-radius: 0;}

.nav .nav-link.active:after,
.nav-tabs .nav-link.active:after,
.news_filter a.current:after,
.setup_content .nav .nav-link.active:after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #FFF;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);}

/*== 【內頁】文案/捐款 ==*/
.page_tabs {
  margin-bottom: 1rem;
  padding: .5rem;
  border-radius: 2rem;/* 32px */
  -webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.15);
          box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.15);}
.page_tabs .nav-item {
  width: 50%;}
.page_tabs .nav-link {
  margin: auto .25rem;
  border-radius: 2rem;/* 32px */}
.page_tabs .nav-link:after {
  display: none;}

/*=================================================================
                               Header
=================================================================*/
#mainNav {
  height: 80px;
  background: hsla(0, 100%, 100%, 1);
	-webkit-box-shadow: 0 2px 5px hsla(0, 0%, 0%, 0.05);
	box-shadow: 0 2px 5px hsla(0, 0%, 0%, 0.05);}
@media (max-width: 480px) {
  #mainNav {
    padding-top: .5rem;
    padding-bottom: .5rem;
    -webkit-box-shadow: 0 5px 5px hsla(0, 0%, 80%, .2);
            box-shadow: 0 5px 5px hsla(0, 0%, 80%, .2);}}

/* == LOGO ==*/
.top_left {
  position: relative;}

.header .navbar-brand {
  margin-left: 2rem;
  width: 70%;
  max-height: 55px;}
.header .navbar-brand img {
  height: auto;
	-webkit-transition: .3s ease;transition: .3s ease;}
.header .navbar-brand .img-fluid.logo_scale {
  height: 50px;
  -webkit-transition: .3s ease;transition: .3s ease;}

@media (min-width: 992px) {
  .header .navbar-brand img {
    height: 55px;}
  .header .navbar-brand .img-fluid.logo_scale {
    height: 50px;}}

@media (max-width: 768px) {
  .header .navbar-brand {
    width: 45%;
    max-height: 45px;
    margin: 0;}}

@media (max-width: 480px) {
  .header .navbar-brand {
    width: 70%;
    max-height: 65px;}}

/*== 手機版 lang button ==*/
.lang_group {
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  right: 3rem;}
@media only screen and (min-width : 992px) {
  .lang_group {
    display: none;}}
@media only screen and (max-width : 320px) {
  .lang_group {
    right: 2.5rem;}}
.lang_group button {
  padding: .25rem .75rem;}

/* ☰ */
.header .hamburger {
  width: 40px;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
  right: 1rem;}
@media (min-width: 480px) and (max-width: 768px) {
  .header .hamburger {
    top: 75%;}}

/* == 手機mmenu ==*/
#menu:not( .mm-menu ) { display: none; }
/* X */
.mm-menu.mm-menu_opened:before {
	display: inline-block;
	content: "\f00d";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: fixed;
	left: 7%;
	top: 5%;
	font-size: 2rem;}
/* < */
.mm-btn_prev:before {
	left: 15px;
	width: 15px;
	height: 15px;
	border-color: #555;}
/* Menu/會員中心 */
.mm-navbar.mm-navbar_tabs {
  padding: 0 10px;}
.mm-navbar.mm-navbar_tabs a {
  padding: calc((var(--mm-navbar-size) - var(--mm-line-height)) * .4);}
.mm-navbar__tab_selected {
  border: none;}

/*-- Icon --*/
.mm-listitem__text .m_icon_default {
  background-color: transparent;
  border-radius: 0;}
  @media (max-width: 320px) {
    .mm-listitem__text .m_icon_default {
      margin: 5px auto;}}
.mm-listitem__text .m_txt {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 115px;
  line-height: 1;}
.mm-listitem__text .m_icon_default.only {
  margin: 10px auto;}
.mm-listitem__text .m_txt i {
  position: absolute;
  right: 0;
  top: 30%;}

/* == Top ==*/
@media only screen and (max-width : 992px) {
  .top_right {
    display: none;}}
.top_list {
  margin-top: 1rem;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-pack: end;
  -webkit-box-pack: end;
          justify-content: flex-end;
  -ms-flex-align: center;
  -webkit-box-align: center;
          align-items: center;
  height: 100%;}
.list-inline {
  white-space: nowrap;}
.list-inline::-webkit-scrollbar {
  display: none;}
.top_list .list-inline {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  margin: auto 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;}
@media only screen and (max-width : 480px) {
  .top_list .list-inline {
    margin-bottom: 1.25rem;}}

.top_list .list-inline-item {
  margin-right: 0;
  padding: 0 .75rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;}
.top_list .list-inline-item:not(:last-child) {
  border-right: 1px solid #bbb;}
.top_list .list-inline-item:not(:last-child) .dropdown-toggle:after {
  display: none;}
/* .list-inline-item .dropdown-menu { 
  top: 1.5rem !important;} */
.list-inline-item .dropdown-menu a {
  padding: .75rem 1.5rem;}
.list-inline-item .dropdown-menu a:not(:last-child){
  border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);}
.list-inline-item .dropdown-menu a:not(.search_link):hover {
    background: #eee;}

.list-inline-item .share_wrap .dropdown-toggle {
  padding: 0;}
.list-inline-item button {
  border-radius: 0;
  padding: 0 10px;
  -webkit-transition: .3s;transition: .3s;}

/* == Top搜尋框 ==*/
.top_list #dropdown-search:after {
  display: none;}
.search_form {
  padding: .5rem 1rem;}
.search_form .input-group {
  position: relative;
  margin: 5px;}
.search_form input {
  padding: 12px 10px 8px;}
.search_form a {
  position: absolute;
  right: 0;}

/* == Top會員中心 ==*/
.top_list #dropdown-account:after {
  display: inline-block;
  margin-left: .255em;
  vertical-align: .255em;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;}
.list-inline-item .dropdown_account i {
  display: inline-block;
  width: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;}

/*=================================================================
                               主選單
=================================================================*/
.header_nav {
  margin-top: 1.5rem;}
.header_nav nav ul li { 
  float: left;}
.header_nav nav ul li:hover ul.sub_menu {
  display: block;}

#nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  white-space: nowrap;
  margin-bottom: 0;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center; 
  height: 100%;}

/*== 第一層選單 ==*/
.header_nav nav {
  width: 100%;}
.header_nav nav ul li {
  position: relative;
  width: 10%;
  text-align: center;}
.header_nav nav ul li a {
  z-index: 1;
	position: relative;
  display: block;
  padding: 1rem;
  font-size: 1.125rem;/* 18 */
  letter-spacing: 2px;
  -webkit-transition: .1s;
  transition: .1s;
  overflow: hidden;}
.header_nav nav>ul>li>a:before {
  z-index: -1;  
  content: '';
  position: absolute;
  top: 100%;
  right: 0;  
  bottom: 0;
  left: 0;
  -webkit-transition: top 0.09s ease-in;}
.header_nav nav>ul>li>a:hover:before {
  top: 0;}

/*== 第二層選單 ==*/
.header_nav nav .sub_menu {
  z-index: 10;
  display: none;  
  position: absolute;
  top: 58px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  -webkit-box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.05);
  box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.05);
  -webkit-transition: .1s;transition: .1s;}
.header_nav nav .sub_menu:before {
  content: '';  
  position: absolute;
  left: 50%;
  top: -10px;
  margin-left: -4px;
  display: block;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;}
.header_nav nav .sub_menu li {
  position: relative; 
  float: none;
  min-width: 250px;
  width: 270px;}
.header_nav nav ul li:first-child ul.sub_menu {
  left: 0;
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);}  /* 第一個MENU第二層右移 */
.header_nav nav ul li:last-child ul.sub_menu {
  left: 0;}  /* 最後一個MENU第二層左移 */
.header_nav nav .sub_menu li a {  
  white-space: nowrap;
  padding: 1rem !important;
  font-size: 1.125rem;/* 18 */
  letter-spacing: 2px;
  text-align: center;
  border-bottom: 1px solid;
  -webkit-transition: .3s;transition: .3s;}
.header_nav nav .sub_menu li a:hover {
  padding-left: 1rem;}
.header_nav nav .sub_menu li a i {
  position: absolute;
  right: 10px;}

/*== 第三層選單 ==*/
.header_nav nav ul ul ul {
  display: none;  
  position: absolute;
  left: 100%;
  top: auto;
  margin-top: -60px;
  min-width: 250px;
  width: 270px;
  -webkit-box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.05);
  box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.05);}
.header_nav nav ul li:last-child ul.sub_menu li ul {
  left: -270px;}  /* 第三層*/ 
.header_nav nav ul li:hover > ul {
  display: block;}

.menu_scale {
  padding: 0.5rem 1rem !important;}
a.menu_scale + ul.sub_menu {
  top: 42px;}

/*=================================================================
                              BANNER
=================================================================*/
.main-slider {
  padding-top: 2em;}

.slick_banner.slick-slider {
  /*margin-bottom: 62px; 30+32 */}

/*==============================*/
/*            Banner            */
/*=============================*/
/*== Dots ==*/
.slick_banner .slick-dots {
  left: 50%;
  bottom: 5px;
  width: auto;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);}
.slick_banner .slick-dots li button::before {
  font-size: 1.25rem;/* 20 */}
.slick_banner .slick-dots li.slick-active button:before {
  opacity: 1;}

/*== Arrow ==*/
.slick_banner .slick-arrow {
  top: 50%;}
.slick_banner .slick-prev:before {
  opacity: .6;
  content: '\f053';
  font-weight: 700;
  font-size: 2rem;/* 32 */
  font-family: 'Font Awesome 5 Free';}
.slick_banner .slick-next:before {
  opacity: .6;
  content: '\f054';
  font-weight: 700;
  font-size: 2rem;/* 32 */
  font-family: 'Font Awesome 5 Free';}
@media (max-width: 992px) {
  .slick_banner .slick-arrow:before {
    display: none;}
}

.slick_banner .banner {
  position: relative;  
  width: 100%;
  height: auto;}
.banner_img {
  position: relative;  
  display: block;
  width: 100%;
  height: 0; 
  padding-top: 37.5%;/* 100 / (720 / 1920) */
  overflow: hidden;}
  @media (max-width: 480px) {
    .banner_img {
      padding-top: 100%;}}
.banner_img img{
  display: block;      
  position: absolute;
  left: 50%;
  top: 50%;   
  width: 100%;
  height: 100%;
  -webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}

/*==============================*/
/*             Video           */
/*=============================*/
.video-wrapper {
  position: relative;
  padding-bottom: 37.5%;
  height: 0;
  background-color: #000;}
.video-wrapper .banner_img {
  margin: auto;
  width: 66.7%;}
.video-wrapper .banner_img img {
  -webkit-transform: translate(-49.9%, -50%);transform: translate(-49.9%, -50%);}
.video-wrapper-mobile {
  position: relative;
  padding-bottom: 100%;
  height: 0;}
.video-wrapper iframe, .video-wrapper-mobile iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;}

/*== 手機Youtube ==*/
@media (max-width: 480px) {
  .video-wrapper-mobile div[tag="banner_m_youtube"] {
    background-color: #000;}
  .video-wrapper-mobile div[tag="banner_m_youtube"] img {
    height: auto;}}

/*== Youtube button ==*/
.banner_youtube_img,
.project_youtube_img,
.banner_m_youtube_img {
  z-index: 1;
  position: absolute;
  background: #ff0000;
  width: 90px;
  height: 60px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 60px/110px;}

.banner_youtube_img:after,
.project_youtube_img:after,
.banner_m_youtube_img:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-left: 30px solid #f3f1e7;
  border-bottom: 15px solid transparent;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);}

/*== 解決 Slick 閃退 ==*/
.slick_banner,
.slick_news,
.slick_events,
.slick_goods {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
  -webkit-transition: opacity 1s ease;}
.slick_banner.slick-initialized,
.slick_news.slick-initialized,
.slick_events.slick-initialized,
.slick_goods.slick-initialized {
  visibility: visible;
  opacity: 1;}

/*=================================================================
                         【首頁】 Section
=================================================================*/
/*== 主標題 ==*/
.section_title_wrap {
  position: relative;
  text-align: center;
  border-bottom: 1px solid #DDD;}

/*== 首頁 ==*/
.section_title {
  padding: 1rem 0;}
@media (max-width: 480px) {
  .section_title_wrap {
    text-align: left;
  }
  .section_title {
    padding: .5rem 0 0;}
}
.section_title .title {
  display: inline-block;
  position: relative;    
  margin-bottom: 0;
  padding-bottom: 1rem;
  font-size: 1.875rem;/* 30 */
  font-weight: 600;}
@media (max-width: 320px) {
  .section_title .title {
    font-size: 1rem;/* 16 */}
}
.section_title .title:before {
  content:'';
  display:inline-block;
  position: absolute;
  bottom: 0;
  left: 0;  
  width: 100%;
  height: 3px;}	
/*== More ==*/
.title_more {
  position: absolute;
  top: 0;
  right: 0;}
.title_more a {
  display: inline-block;
  padding: 5px 15px;
  line-height: 30px;
  text-transform: uppercase;  
  border-radius: 25px;}

/*== 內頁 ==*/
.section_title.page_title .title_img {
  display: inline-block;
  margin-right: .5rem;
  width: auto;}
.section_title.page_title i {
  font-size: 1.75rem;}/* 28px */
@media (max-width: 480px) {
  .page_title .title {
    margin: 1rem auto;
    font-size: 1.5rem;/* 24 */}}

/*=================================================================
                            【首頁】服務項目
=================================================================*/
.service_content {
  text-align: center;}
.service_content .col-6 {
  margin-top: 1rem;}

/*== 圓圈 ==*/
.service_circle {
  position: relative;
  margin: auto;      
  height: 150px;
  width: 150px;
  border-radius: 50%;}   
@media (max-width : 480px) {
  .service_circle {
    height: 100px;
    width: 100px;}}
@media (max-width : 321px) {
  .service_circle {
    height: 130px;
    width: 130px;}}

/*== 外框線 ==*/
.service_circle:before {
  position: absolute;
  content: '';
  height: calc(100% + 10px);
  width: calc(100% + 10px);
  border: 2px solid;
  top: -5px;
  left: -5px;
  border-radius: inherit;}

/*== 標題 ==*/
.service_content .service_title {
	margin: 2rem auto .5rem;
	font-size: 1.33rem;
	max-width: 18.125rem;/* 290px */
	overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;}
  @media (max-width : 480px) {
    .service_content .service_title {
      font-size: 1.125rem;/* 18 */}}

/*== Icon ==*/
.service_circle i {
  padding-bottom: .75rem;
  color: hsla(0, 100%, 100%, 1);
  font-size: 4.375rem;/*70px*/  
  line-height: 2;}
@media (max-width : 480px) {
  .service_circle i {
    font-size: 3rem;/* 48 */}}

/*=================================================================
                        【首頁】最新消息/活動訊息
=================================================================*/
@media (max-width: 480px) {
  .news_content .nav-item {
    margin-top: 2rem;}
}
.news_content .tab-content {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;}

/*== Cards ==*/
.news_content .news_column,
.news_content .events_column {
  position: relative;
  margin-top: 1.5rem;}

/*== 圖片 ==*/
.news_content .news_card,
.news_content .events_card {
	margin-bottom: .5rem;
  border: 0;
	-webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);
  box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);} 
.news_content .slick-slide .news_card,
.news_content .slick-slide .events_card {
	margin: 1rem .75rem;}
@media (max-width: 480px) {
	.news_content .slick-slide .news_card,
  .news_content .slick-slide .events_card {
		margin: 1rem 10px;}
}

.news_content .news_image figure,
.news_content .events_image figure {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  margin-bottom: 0;
  padding-top: 75%;/* 100 / (800 / 600) */}
.news_content .news_image img,
.news_content .events_image img {
  position: relative;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;  
  width: 100%;
  height: 100%;}

/*== 內容 ==*/
.news_content .news_info,
.news_content_info .news_info,/* 內頁 */
.news_content .events_info {
  position: relative;
  padding: 1rem;
  background-color: #FFF;}
.news_content_info .news_info {/* 內頁 */
  min-height: 175px;}
.news_content .news_info,
.news_content .events_info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;}
.news_content .news_info .card-title,
.news_content_info .news_info .card-title,
.news_content .events_info .card-title {
  margin: 1rem auto;
  font-size: 1.375rem;/* 22 */}
.news_content .news_info > .card-text,
.news_content_info .news_info > .card-text,
.news_content .events_info > .card-text { 
  /* height: 45px; */
  font-size: 1.125rem;/* 18 */}
.news_content .news_info .card-detail,
.news_content_info .news_info .card-detail,
.news_content .events_info .card-detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;}
.news_date, .events_date {
  margin-left: auto;
  font-size: 1rem;/* 16 */}
.date_range {
  margin-bottom: 0;}
.news_tag, .events_tag {
  display: inline-block;
  padding: .25rem .75rem;
  font-size: 1rem;/* 16 */
	max-width: 10.5rem;/* 168px */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;}

/*=================================================================
                            【首頁】 Slick
=================================================================*/
/*--------------------------------------
                 全局設定
----------------------------------------*/
/*== 只有一個時，隱藏 ==*/
.slick-dots > li {
  display: inline-block;}
.slick-dots > li:only-child {
	display: none;}
.slick-dots li button:before {
	font-size: 1.125rem;/* 18 */}

@media (max-width: 768px) {
  .slick-arrow {
    width: 30px;
    height: 30px;}
  .slick-prev {
    left: 55%;}}
@media (max-width: 480px) {
  .slick-prev {
    left: 61%;}}
@media (max-width: 375px) {
  .slick-prev {
    left: 59%;}}
@media (max-width: 320px) {
  .slick-prev {
    left: 47%;}}

@media (min-width: 769px) {
  .slick_news .slick-prev,
  .slick_events .slick-prev,
  .slick_goods .slick-prev {
    left: -35px;}
  .slick_news .slick-next,
  .slick_events .slick-next,
  .slick_goods .slick-next {
    right: -35px;}
  .slick_news .slick-prev:before,
  .slick_events .slick-prev:before {
    content: '\f053';
    font-weight: 700;
    font-size: 2.5rem;
    font-family: 'Font Awesome 5 Free';}
  .slick_news .slick-next:before,
  .slick_events .slick-next:before {
    content: '\f054';
    font-weight: 700;
    font-size: 2.5rem;
    font-family: 'Font Awesome 5 Free';}
  .slick_news .slick-arrow,
  .slick_events .slick-arrow {
    top: 50%;}
}
.slick_photo .slick-next,
.slick_brand .slick-next,
.slick_issuu .slick-next {
	right: 83%;}

@media (max-width: 768px) {
.slick_news .slick-arrow:before,
.slick_events .slick-arrow:before,
.slick_goods .slick-arrow:before,
.slick_photo .slick-arrow:before,
.slick_brand .slick-arrow:before,
.slick_issuu .slick-arrow:before,
.slick_youtube .slick-arrow:before {
  width: 25px;
  height: 25px;}}

/*--------------------------------------
                 個別設定
----------------------------------------*/
/*-- 花絮 --*/
.slick_photo .slick-prev:before, 
.slick_youtube .slick-prev:before {
	background-image: url(../images/banner/left-arrow-white.svg);}
.slick_photo .slick-next:before, 
.slick_youtube .slick-next:before {
	background-image: url(../images/banner/right-arrow-white.svg);}
.photo_info.nonemode .slick_photo .slick-arrow,
.photo_info.nonemode .slick_youtube .slick-arrow {
  top: -4rem;}
.photo_info.chosemode .slick_photo .slick-arrow,
.photo_info.chosemode .slick_youtube .slick-arrow { 
  top: -6.7rem;}

@media (max-width: 768px) {
  .slick_news    .slick-arrow, 
  .slick_events  .slick-arrow,
  .slick_goods   .slick-arrow,
  .slick_brand   .slick-arrow,
  .slick_issuu   .slick-arrow,
  .slick_photo   .slick-arrow,
  .slick_youtube .slick-arrow {
    display: none !important;}
}


/*=================================================================
                        【首頁】幫助我們
=================================================================*/
@media (min-width: 1200px) {
  .container {
    max-width: 1240px;}
}


/*== 手機頁籤 == */
.help_section .d-lg-none.page_tabs .nav-link {
  font-size: 1.5rem;/* 24 */}

/*================================================
                      右：捐款框               
==================================================*/
@media (max-width: 992px) {
  .stepwizard:not(.page) {
    margin-top: 1rem;}}


/*--------------------------------------
                  Step框 
----------------------------------------*/
.stepwizard_top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 1.5rem 1rem 0 1rem;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;}
  /*== 線 ==*/
  .stepwizard_top:before {
    content: '';
    position: absolute;
    top: 35px;
    left: 50px;
    bottom: 0;
    width: 85%;
    height: 5px;
    background: #CCC;}
    @media (max-width : 992px) {
      .page_section .stepwizard_top:before { top: 35px; }/* 內頁 */
      .stepwizard_top:before { top: 50px;width: 85%; }}
    @media (max-width : 768px) {
      .stepwizard_top:before { width: 80%; }}
    @media (max-width : 480px) {
      .stepwizard_top:before { width: 75%; }}
    @media (max-width : 375px) {
      .stepwizard_top:before { width: 70%; }}
    @media (max-width : 320px) {
      .stepwizard_top{
        padding: 1.5rem 0 .5rem;}}

.stepwizard_step {
  position: relative;
  text-align: center;}
.btn_circle {
  padding: 15px;
  border-radius: 50%;
  text-align: center;
  border: 1px solid hsla(0, 100%, 100%, 1);}
  .stepwizard .stepwizard_step:nth-child(3) .btn_circle {
    padding: 15px 18px;}/* 收據icon */
/* == Step文字 == */
.stepwizard_step p {
  margin: 10px auto;
  padding-top: 10px;}
  @media (max-width: 992px) {
    .stepwizard_step p {
      font-size: 1rem;/* 16 */}}


/*--------------------------------------
                  內容 
----------------------------------------*/
.stepwizard_info.index {
  padding: 10px;}
@media (max-width: 480px) {
  .stepwizard_info.index {
    padding: 0;}
}

/*== 按鈕：單次/定期 ==*/
.setup_content .nav {
  margin-bottom: 1rem;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;}
@media (max-width: 480px) {
  .setup_content .nav .nav-link {
    font-size: 1.25rem;/* 20 */}
}

.setup_content a[aria-selected="true"],
.setup_content a:hover,
.setup_content a:focus {
  color: hsla(0, 100%, 100%, 1);}
.setup_content a[aria-selected="false"] {
  color: #333;}
  .setup_content a[aria-selected="false"]:hover,
  .setup_content a[aria-selected="false"]:focus {
    color: hsla(0, 100%, 100%, 1);}

/*== 欄位全設定 ==*/
.stepwizard_info .form-group,
.stepwizard_info_page .form-group {/* 內頁 */
  margin-bottom: .25rem;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;}
.stepwizard_info label,
.stepwizard_info_page label{
  font-weight: bolder;
  font-size: 1rem;/* 16 */}
@media (max-width: 480px) {
	.stepwizard_info label,
	.stepwizard_info_page label{
	  font-size: 0.875rem;/* 14 */}}

/*== 必填 * 號放大 ==*/
.setup_content label span.text-orange {
  font-size: 1.5rem;/* 24 */}


/*--------------------------------------
           Custom column width 
----------------------------------------*/
@media (min-width: 992px) {
  .stepwizard .dynamic .col-lg-3 {
    -ms-flex: 0 0 23%;
    -webkit-box-flex: 0;
            flex: 0 0 23%;
    max-width: 23%;}/* 27%EN */
  .stepwizard .dynamic .col-lg-9 {
    padding-left: 0;
    -ms-flex: 0 0 77%;
    -webkit-box-flex: 0;
            flex: 0 0 77%;
    max-width: 77%;}/* 73%EN */

  .stepwizard .dynamic .col-lg-3:lang(en) {
    -ms-flex: 0 0 27%;
    -webkit-box-flex: 0;
            flex: 0 0 27%;
    max-width: 27%;}
  .stepwizard .dynamic .col-lg-9:lang(en) {
    padding-left: 0;
    -ms-flex: 0 0 73%;
    -webkit-box-flex: 0;
            flex: 0 0 73%;
    max-width: 73%;}
}

/*== 下方按鈕 ==*/
.stepwizard_btn {
  margin-top: 1rem;
  text-align: center;}
.stepwizard_btn button {
  margin-right: 5px;
  padding: .5rem 1.5rem;
  font-size: 1.125rem;/* 18 */}
.stepwizard_btn .btn-outline-success,/* 愛心車 */
.stepwizard_btn .btn-outline-primary {
  border-width: 1.5px;}

@media (min-width: 768px) {
  .stepwizard_btn .btn {
    min-width: 8.4rem;
    height: 3.125rem;}}

@media (max-width: 480px) {
  .stepwizard_btn .btn {
    padding: .5rem .25rem;
    width: 45%;}}

/* 返回 箭頭樣式 */
.stepwizard_btn .previousBtn,
.stepwizard_btn .prev-step3-Btn {
  position: relative;
  margin-right: 1rem;
  padding-bottom: 0; 
  height: 50px;
  color: #333;
  font-size: 1.125rem;
  font-weight: 600;
  border: 0;
  -webkit-transition: .3s;transition: .3s;}
.stepwizard_btn .previousBtn:hover,
.stepwizard_btn .previousBtn:focus,
.stepwizard_btn .prev-step3-Btn:hover,
.stepwizard_btn .prev-step3-Btn:focus {
  padding-left: .5rem;}
.stepwizard_btn .previousBtn:before,
.stepwizard_btn .previousBtn:after,
.stepwizard_btn .prev-step3-Btn:before,
.stepwizard_btn .prev-step3-Btn:after {
  display: block;
  content: '';
  position: absolute;
  height: 2px;}
.stepwizard_btn .previousBtn:after,
.stepwizard_btn .prev-step3-Btn:after  {
  right: 0;
  bottom: 0;
  width: 100%;}
.stepwizard_btn .previousBtn:before,
.stepwizard_btn .prev-step3-Btn:before {
  left: 0;
  bottom: 0;  
  width: 2rem;
  -webkit-transform-origin: bottom left;
  transform-origin: bottom left;
  -webkit-transform: rotate(-30deg);
  transform: rotate(-30deg);}

/*--------------------------------------
                  Step 1
----------------------------------------*/
/*==  捐款項目 ==*/
.setup_content select[name="donation_id"] {
  font-size: 1.25rem;/* 20 */} 

/*==  單選按鈕 ==*/
.setup_content .money_group,/* 捐款金額 */
.setup_content .pay_group,/* 付款方式 */
.setup_content .cycle_group,/* 捐款間隔 */
.setup_content .foreigner_group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-bottom: .5rem;}
.setup_content .money_group button {
  margin: .5rem .5rem 0 0;
  padding: .375rem 0;  
  width: 8.7rem;
  height: 45px;
  font-size: 1.25rem;
  text-align: center;
	border-radius: 0;}
@media (max-width: 480px) {
  .setup_content .money_group button,
  .setup_content .money_div {
    margin: .5rem 0 0 0;
    width: calc( 100% / 2 - 5px );}
  .setup_content .money_group button:not(.d-done):nth-child(odd),
  .setup_content .money_div {
    margin-right: .5rem;}}

/*==  捐款金額 ==*/
/* 按鈕 */
button.btn-gray {
  font-size: 1.125rem;}
.money_group button.btn-gray:hover,
.money_group button.btn-gray:focus,
button.btn-gray.active {
  outline: none;}
/* 輸入框 $ */
.setup_content .money_group input {
  margin: .5rem 0 0 0;
  padding: .375rem .5rem .375rem 0;
  width: 8.7rem;
  height: 45px;
  font-size: 1.25rem;
  text-align: right;}
.setup_content .money_group input:focus {
	text-align: right;}
  @media (max-width: 480px) {
    .setup_content .money_group input {
      width: 100%;
      font-size: 1.25rem;}}
.money_group .money_div {
  position: relative;}
.money_group .money_formcontrol {
  display: inline-block;
  border: 1px solid;}
.money_group .money_InputIcon {
  position: absolute;
  left: 10px;
  top: 35%;}
/* 金額下限 */
.setup_content .numberlimit {
  font-size: 1rem;/* 16 */}

/*== 付款方式 ==*/
.setup_content .pay_group button.btn-pay {
	border-radius: 0;}
.setup_content .pay_group .btn-pay:hover, 
.btn-pay:focus {
  border: 1px solid;}

/*== Icon ==*/
.setup_content .pay_group button {
  margin: .5rem .25rem 0 0;
  padding: .375rem .25rem;
  min-height: 3.75rem;
  height: auto;
  font-size: 1.125rem;/* 18 */
  width: 12rem;
  text-align: center;}
@media (max-width: 480px) {
	.setup_content .pay_group button {
		width: calc( 100% / 2 - 5px );
    font-size: 1.25rem;/* 20 */}}
@media (max-width : 320px) {
  .setup_content .pay_group button {
    font-size: .8rem;/* 12.8 */
    width: 128px;}}
.pay_group button img {
  display: initial;
  width: 1.5rem;}
/* LinePay */
.pay_group button[paytypename="LINE Pay"] img {
  width: 100%;
  height: 24px;  
}
.pay_group button[paytypename="全支付"] img,
.pay_group button[paytypename="悠遊付"] img {
  width: 100%;
  height: 30px;  
}

/*== 捐款間隔 ==*/
.cycle_group button {
  margin: .5rem .75rem .5rem 0;
  padding: .375rem 1.2rem;
	border-radius: 0;}
@media (max-width: 480px) {
  .cycle_group button {
    margin: .5rem .5rem 0 0;
    width: calc( 100% / 2 - 10px );}}

/*== 捐款期間 ==*/
.custom-radio, .custom-checkbox{
  padding-left: 0;}
.tab-pane .custom-radio select {
  display: inline-block;
  margin-bottom: 10px;    
  width: 7rem;
  -moz-text-align-last: center;
       text-align-last: center;}
@media (max-width : 320px) {
  .tab-pane .custom-radio select {
    width: 5.5rem;}}
.tab-pane .custom-radio input:first-child,
.tab-pane .custom-radio select:first-child {
  margin-right: .75rem;}

.credit_group input.form-control {
  display: inline-block;
  width: 5rem;
  text-align: center;}
.credit_group input.form-control:not(:last-child) {
  margin-right: .75rem;}
@media (max-width : 480px) {
  .credit_group label {
    display: block;}    
  .credit_group input.form-control {
    width: calc( 100% / 4 - 20px );}}

/*== 卡片別 ==*/
@media (max-width : 768px) {
  .credit_group .card_inputType {
    display: block;
    margin-top: 1rem;}}

/*== 有效期限 ==*/
.date_group {
  display: -ms-inline-flexbox;
  display: -webkit-inline-box;
  display: inline-flex;}
.date_group select.form-control {
  display: inline-block;
  margin-right: .25rem;
  width: auto;
  text-align: left;}
@media (max-width : 480px) {
  .date_group, .date_group label {
    display: block;}
  .date_group select.form-control {
    margin-right: .75rem;}}

/*== CVC2 ==*/
.cardcvc_group {
  display: -ms-inline-flexbox;
  display: -webkit-inline-box;
  display: inline-flex;}
.cardcvc_group input.form-control {
  display: inline-block;
  width: 8rem;
  text-align: center;}
@media (max-width : 480px) {
  .cardcvc_group {
    display: block;}
  .cardcvc_group input.form-control {
    width: calc( 100% / 4 - 20px );}}

/*--------------------------------------
                  Step 2
----------------------------------------*/
/*== 會員登入 Button ==*/
.donate_accordion .member_link {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;}
/*== 非會員捐款 Button ==*/
.non_member_link {
  padding: 5px 10px;}
a.non_member_link:hover,
a.non_member_link:focus {
  color: #666;
  background-color: transparent;}

/*--------------------------------------
                登入頁面
----------------------------------------*/
.login_section .card-body {
  padding: 0;}

/*== 快速登入 ==*/
.donate_fastlogin {
  margin: 3.5rem 0 1rem;}
.donate_fastlogin button {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;}
.donate_fastlogin button,
.donate_fastlogin:not(.login) a {
  margin: 0 2.5rem;}
@media (max-width: 768px) {/* member_login */
  .donate_fastlogin.login button {
    margin: 0 1rem;}}

@media (max-width: 480px) {
  .donate_fastlogin button,
  .donate_fastlogin:not(.login) a {
    margin: 0 .5rem;}
  .donate_fastlogin.login button {
    margin: 0 .5rem;}}

@media (max-width: 320px) {
  .donate_fastlogin button {
    margin: 0 .3rem;}}

.btn-facebook { background-color: hsla(221, 44%, 41%, 1); }
.btn-line { background-color: hsla(120, 100%, 38%, 1); }
.btn-google { background-color: hsla(0, 100%, 100%, 1);border: 1px solid #bbb;}
.btn-facebook img,
.btn-line img,
.btn-google img {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 40px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);}

/*== or ==*/
.fast_or {
  position: relative;
  margin: 1rem auto;
  padding: 0 5rem;
  text-align: center;}
.fast_or:before, .fast_or:after {
  display: inline-block;  
  content: '';
  position: absolute;
  top: 50%;
  width: 50px;
  height: 1px;}
.fast_or:before { left: 35%; }
.fast_or:after { right: 35%; }

@media (max-width: 768px) {
  .fast_or:before { left: 30%; }
  .fast_or:after { right: 30%; }}

@media (max-width: 480px) {
  .fast_or:before { left: 25%; }
  .fast_or:after { right: 25%; }}

@media (max-width: 320px) {
  .fast_or:before { left: 20%; }
  .fast_or:after { right: 20%; }}

/*== 帳號/密碼 ==*/
.login_section .input_box input,
.donate_fastlogin .input_box input,
.tab-content .input_box input {
	padding: .375rem .75rem .375rem 1rem;}
@media (max-width: 768px) {
  .login_section .input_box input,
  .donate_fastlogin .input_box input,
  .tab-content .input_box input {
    display: inline-block;
    width: 55vw;}}
@media (max-width: 480px) {
  .login_section .input_box input,
  .donate_fastlogin .input_box input {
    width: 100%;}
  .tab-content .input_box input {/* 首頁會員登入 */
    width: 100%;}
}

/*== 登入Button ==*/
.donate_fastlogin_button {
  text-align: center;}
  .donate_fastlogin_button button {
    width: 85%;}
@media (max-width : 768px) {
  .donate_fastlogin_button button {
    width: 100%;}}

/*== 上一步 ==*/
.donate_fastsignup {
  margin-top: 2.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;}
.donate_fastsignup .fastsignup_prev {
  margin-right: 1rem;}  
@media (max-width: 480px) {
  .donate_fastsignup {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-top: 1.5rem;}
  .donate_fastsignup .fastsignup_prev {
    margin-right: 0;
    margin-bottom: 1rem;
    font-size: 1.25rem;/* 20 */}}

/*== 註冊/忘記密碼 ==*/
.donate_fastsignup ul,
.donate_fastsignup ul a {
  margin: auto 0;}  
.donate_fastsignup ul li:not(:last-child) {
  margin-right: 0;
  padding-right: .5rem;
  border-right: 1px solid #333;}
.donate_fastsignup a {
  padding: 0 .5rem;}
.donate_fastsignup + p {
  margin: 1rem auto;
  text-align: center;}

/*== 隱私修款 ==*/
.donate_privacy {
  margin-top: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  font-size: 1rem;/* 16 */}
@media (max-width: 480px) {
  .donate_privacy {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;}}
.donate_privacy a {
  margin: 0;
  padding: 0;}

/*--------------------------------------
                 欄位填寫
----------------------------------------*/
.donate_accordion {
  position: relative;
  margin-top: 1rem;
  height: auto;/*700px*/}
.donate_accordion form {
  position: relative;}


/*================================================
                      動態欄位
==================================================*/
.dynamic .row {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;}
@media (min-width: 1200px) {
  .dynamic .col-form-label {
    padding-right: 0;}}

/*== 信用卡卡號 ==*/
@media (max-width: 480px) {
	.tab-content .dynamic .credits_group .col-lg-9,
	.cart_content .dynamic .credits_group .col-lg-9 {
		padding-left: 15px;}}

.dynamic .credits_group input {
  display: inline-block;
  width: calc( 100% / 4 - 10px );
  height: 44px;}
  .dynamic .credits_group input:not(:last-child){
    margin-right: 5px;}

/*== 信用卡有效期限 ==*/
.dynamic .creditsdate_group select {
  display: inline-block;
  margin-right: 5px;
  padding: .375rem .5rem;
  width: calc( 100% / 4 - 10px );
  height: 44px;
  -moz-text-align-last: center;
       text-align-last: center;}
  @media (max-width : 480px) {
    .dynamic .creditsdate_group select {
      width: calc( 100% / 2 - 9px );}}

/*== 信用卡末3碼(CVC2) ==*/
.dynamic .creditscvc_group input {
  display: inline-block;
  width: calc( 100% / 2 - 10px );
  height: 44px;}
  @media (max-width : 480px) {
    .dynamic .creditscvc_group input {
      width: 100%;}}

/*== 身份 ==*/
button[radiobutton="true"] {
  margin: .5rem 5px;
  padding: .375rem 1.2rem;
	border-radius: 0;}

@media (max-width: 992px) {
  .btn-gray[radiobutton="true"] {
    margin: 0 5px .5rem 0;}
  .dynamic .id_group button {
    padding: .375rem .5rem;}}

@media (max-width: 480px) {
  .dynamic .btn-gray {
    width: calc( 100% / 3 - .5rem);}
  .dynamic .id_group button {
    padding: .375rem 0;}}

@media (max-width: 375px) {
  .btn-gray {
    width: calc( 100% / 3 - 7px);}
  button[radiobutton="true"]:lang(en) {
    padding: .375rem;}
}

/* 錯誤訊息 */
.dynamic .id_group .warning_idno {
  display: block;
  margin-top: .5rem;
  text-align: left;}

/*== 地址 ==*/
.dynamic .address_group input,
.dynamic .address_group select {
  display: inline-block;
  margin-top: .5rem;
  padding: .375rem .25rem;
  width: calc( 100% / 4 - 4px );
  height: 44px;}
.dynamic .address_group input:last-child {
  padding: .375rem .75rem;
  width: 100%;}
@media (max-width: 480px) {
  .dynamic .address_group input,
  .dynamic .address_group select {
    width: calc( 100% / 2 - 5px );}}

/*== 生日 ==*/
.dynamic .birth_group select {
  display: inline-block;
  padding: .375rem .25rem;
  width: calc( 100% / 3 - 5px );
  min-width: auto;
  height: 44px;
  -moz-text-align-last:center;
       text-align-last:center;}

/*== 聯絡電話 ==*/
/* 錯誤訊息 */
.dynamic .phone_group .tel_err {
  display: block;
  margin-top: .5rem;
  text-align: left;}

/*== 性別 ==*/
.dynamic .radio_group {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;}

/*== 多選欄位測試 ==*/
.dynamic .checkbox_group .check_item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;}
.dynamic .checkbox_group .check_item .form-check {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;}
.dynamic .checkbox_group .check_item .addtext {
   width: 100%;}

/*== 日期 ==*/
.dates_group div {
  position: relative;}
.dates_group div:after {
  content: '\f073';
  position: absolute;
  top: 50%;
  left: 3%;
  color: #bbb;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);}
@media (max-width: 1200px) {
  .dates_group div:after {
    left: 4%;}
}
@media (max-width: 480px) {
  .dates_group div:after {
    left: 7%;}
}
@media (max-width: 375px) {
  .dates_group div:after {
    left: 8%;}
}

/*== 顯示芳名錄 ==*/
@media (max-width: 480px) {
  .dynamic .lover_group .form-text {
    display: block;
    margin-top: 1rem;}}

/*== 同意個資蒐集 ==*/
.dynamic .agree_group .form-check-inline {
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;}
.donate_accordion label[for="agree"] {
  display: inline;}
.donate_accordion label[for="agree"] a:hover,
.donate_accordion label[for="agree"] a:focus {
  background-color: transparent;}

/*--------------------------------------
                  Step 3
----------------------------------------*/
/*== 捐款紀錄是否上傳國稅局 ==*/
.up-etax > div {
  display: inline-block;}
.up-etax .btn-gray {
  width: auto;}
@media (max-width: 992px) {
  .up-etax label,
  .up-etax > div {
    width: auto;}}

/*== 您是否需要收據 ==*/
@media (max-width: 480px) {
  .donate_accordion .receipt_group .form-check {
    margin-bottom: 1rem;}
  .donate_accordion .receipt_group .btn-gray {
    padding: .375rem .5rem;}}

@media (max-width: 480px) {
  .donate_accordion .up-etax + .form-group-step3 .form-check button[radiobutton="true"] {
    width: calc( 100% / 2 - 10px );
    min-height: 70px;}
  .donate_accordion .up-etax + .form-group-step3 .form-check button[radiobutton="true"]:lang(en) {
    min-height: 40px;}
  .up-etax button.btn-gray {
    width: 38vw;}}

@media (max-width: 375px) {
  .donate_accordion .up-etax + .form-group-step3 .form-check button[radiobutton="true"]:lang(en) {
    padding: .375rem .25rem;
    font-size: 1rem;/* 16 */}
}

/*== 收據抬頭：同捐款人 ==*/
@media (min-width: 480px) {
  .donate_accordion .form-group-step3 .receip-group {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    min-height: 115px;}}
/*== 個資 ==*/
@media (max-width: 480px) {
  .donate_accordion .form-group-step3 .form-check label.form-group-step3 {
    display: block;}}

/*================================================
                     左：文案框 
==================================================*/
.donate_case {
  position: relative;
  -webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);
  box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);}
@media (max-width: 992px) {
  .donate_case {
    margin-top: 1rem;
    height: auto;}
}

/*== 多專案 4 4 4 ==*/
.donate_case.case_02 {
  position: relative;
  /*min-height: 33.125rem; 530px */}
.donate_case.case_02 .link-orange {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);}

.donate_info {
  padding: 1rem;
  min-height: 150px;}
.donate_info h2,
.donate_info p {
  margin-bottom: .25rem;}

/*== 目標 % 數 ==*/
.progress-bar .percent {
  display: none;}
/* .progress_item {
  margin: 1rem auto;}
.progress_item .progress {
  overflow: visible;
  height: 10px;}
.progress_item .progress-bar {
  position: relative;
  width: 0;
  text-align: left;
  -webkit-transition: all 1s ease 0s;transition: all 1s ease 0s;}
.progress_item .progress-bar .percent {
  position: absolute;
  right: -30px;
  top: -15px;
  width: 40px;
  height: 40px;
  font-size: 13px;
  line-height: 38px;
  text-align: center;
  border: 1px solid;
  border-radius: 50%;} */

/*== 目前/目標金額 ==*/
.progress_money {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;}
.progress_money p:last-child {
  text-align: right;}

/*== 標題 ==*/
.donate_info h2 {
	font-size: 1.375rem;/* 22 */}
.donate_case.case_02 h3 {
  margin-top: 0;}
.donate_info .txt-omit-1 + p {
  margin-bottom: 0px;}

/*== 內文 ==*/
.donate_info .txt-omit-4 {
  font-size: 1.125rem;/* 18 */
  height: 100px;}


/*================================================
                 捐款框：單專案 Slick
==================================================*/
.slick_donatewrap .slick-prev {
  left: -60px;}
.slick_donatewrap .slick-next {
  right: -60px;}
@media (min-width: 480px) and (max-width: 768px) {
  .slick_donatewrap .slick-next {
    right: -30px;}}

/*=================================================================
                            【首頁】義賣專案
=================================================================*/
/*== Ugiving 首頁 ==*/
.goods_section:not(.page_section) .goods_content {
  text-align: center;}
.goods_section:not(.page_section) .goods_column .card {
  padding: 1.5rem 1.5rem 0 1.5rem;}

.goods_column {
	margin-top: 1rem;}
.goods_column .card {
  margin-bottom: 0;}
.goods_column figure {
  border-radius: 5px;}
.goods_column .goods_content {
  padding: 1rem;}
.goods_column .goods_content .card-title {
  font-size: 1.375rem;/* 22 */}

@media (min-width : 480px) and (max-width : 768px) {
  .goods_column .goods_content {
    min-height: 10rem;}
}

.goods_content .goods_bottom span:nth-child(1) {
  font-size: 1.25rem;/* 20 */}
.goods_content .goods_bottom span:nth-child(2) {
  font-size: 1.5rem;/* 24 */
  color: #999;}
.goods_content .goods_bottom a[role="button"] {
  margin-right: .5rem;}

/*=================================================================
                            【首頁】活動花絮
=================================================================*/
.photo_section {
  position: relative;  
  margin-bottom: 0 !important;
  padding: 1.5rem 0 3rem;
  background: url('../images/index/photo_section.jpg') no-repeat center center;    
  background-size: cover;
  background-attachment: fixed;}
@media (max-width: 480px) {
  .photo_content .tab-content .tab-pane > div {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;}}

.photo_section:before {
  content: '';
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;}

.photo_section .section_title,
.photo_section .photo_info { 
  position: relative;}

.photo_section .nav-item .nav-link {
  margin: auto .5rem;
  padding: .5rem 1.5rem;  
  font-weight: 600;
  letter-spacing: 2px;
  border: 2px solid;
  -webkit-transition: .1s;transition: .1s;}
.photo_section .tab-content {
  margin-top: 1.5rem;}

/*== 邊框線 ==*/
.gallery_item .thumb {
  position: relative;}
.gallery_item .thumb:after {
  content: "";  
  display: block;
  position: absolute;
  bottom: -10px;
  right: -10px;  
  width: 100px;
  height: 100px;}
@media (min-width: 768px) {
  .youtube_item {
    margin-top: .6rem;}}

.youtube_item > div {
  position: relative;}
.youtube_item > div:after {
  content: "";  
  display: block;
  position: absolute;
  top: -10px;
  left: -10px;
  width: 40px;
  height: 40px;}
.youtube_item > div:before {
  content: "";  
  display: block;
  position: absolute;
  bottom: -10px;
  right: -10px;
  width: 40px;
  height: 40px;}
@media (max-width : 480px) {
  .gallery_item .thumb:after,
  .youtube_item > div:after,
  .youtube_item > div:before {
    display: none;}}

.gallery_item .thumb img {
  -webkit-transition: all 300ms ease-in-out 0s;
  transition: all 300ms ease-in-out 0s;}
.gallery_item .thumb:hover img {
  -webkit-transform: scale3d(1.2, 1.25, 1.2);
  transform: scale3d(1.2, 1.25, 1.2);}

/*== 遮罩 ==*/
.gallery_item .overlay-shade {
  z-index: 3;
  opacity: 0;
  display: inline-block;  
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; 
  vertical-align: middle;
  pointer-events: none;
  -webkit-transition: opacity 0.3s ease-in-out;transition: opacity 0.3s ease-in-out;}
.gallery_item .thumb:hover .overlay-shade {
  opacity: 0.9;  
  border: 8px solid;
  -webkit-filter: alpha(opacity=90);
  filter: alpha(opacity=90);}

/*== 遮罩：上方資訊 ==*/
.gallery_upper {
  z-index: 4;  
  opacity: 0;
  position: absolute;
  top: -20px;    
  left: 0px;
  padding: .75rem;
  width: 100%;
  -webkit-transition: all 300ms ease 0s;transition: all 300ms ease 0s;}
.gallery_item .thumb:hover .gallery_upper {
  opacity: 1;
  top: 14px;}

/*== 遮罩：下方資訊 ==*/
.gallery_bottom {
  z-index: 4;
  opacity: 0;
  position: absolute;
  bottom: 20px;
  right: 25px;
  -webkit-transition: all 300ms ease 0s;transition: all 300ms ease 0s;}
.gallery_item .thumb:hover .gallery_bottom {
  opacity: 1;}
.gallery_bottom a {
  -webkit-transition: all 300ms ease 0s;transition: all 300ms ease 0s;}
  .gallery_bottom a:hover {
    text-decoration: underline;}

.gallery_item .gallery_title,
.youtube_item .youtube_title {
  margin-top: 1.5rem;
	font-size: 1.125rem;/* 18 */}
.gallery_item .gallery_title a,
.youtube_item .youtube_title {
  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */
  overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.gallery_item .gallery_title a:hover {
	text-decoration: underline;}

/*== More ==*/
@media (min-width: 768px) {
  .photo_section .btn-outline-orange {
    margin-top: 0;}}


/*=================================================================
                            【首頁】期刊
=================================================================*/
.main_content .issue_section { 
  margin: 0!important;
  padding-bottom: 4rem;}
.issue_column .issue_card {
  margin-bottom: 1rem;
  -webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);
  box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1);}
@media (max-width: 480px) {
  .issue_column.slick-slide {
    padding-right: 0;
    padding-left: 0;}}

/*== Image ==*/
.issue_image {
  position: relative;}
.issue_image figure {
  position: relative;  
  overflow: hidden;  
  width: 100%;
  height: auto;
  margin-bottom: 0;
  padding-top: 133%;/* (800 / 600) */}
.issue_image img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;}

/*== 內容 ==*/
.issue_section .issue_info {
  position: relative;
  padding: 1rem;
  background-color: #FFF;}
@media (max-width : 1024px) {
  .issue_section .issue_info {
    min-height: 7rem;}}

/*== 日期 ==*/
.issue_section .issue_info .issue_date {
	margin-bottom: .5rem;}

/*== 標題 ==*/
.issue_section .issue_info .card-title {
	font-size: 1.25rem;/* 20 */}

/*== 按鈕 ==*/
.issue_info .issue_button {
  display: -ms-flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 35px;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;}
.issue_info .issue_button a {
  font-size: 1rem;/* 16 */}

@media (min-width: 480px) and (max-width: 1024px) {
  .issue_info .issue_button {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    min-height: 5rem;}
  .issue_info .issue_button a {
    display: inline-block;
    margin-bottom: .5rem;}
  .issue_info .issue_button a:last-child {
    margin-bottom: 0;}}

/*=================================================================
                            【首頁】活動區塊
=================================================================*/
.custom_column {
	margin-top: 1rem;}
.custom_column .custom_wrap {
  position: relative;
  border: 2px solid;}

.custom_column .custom_wrap h3 {
  position: absolute;
  top: -15px;
  left: 50%;
  padding: 0 2rem; 
  max-width : 300px;
  font-size: 1.25rem;/* 20 */
  text-align: center;    
  -webkit-transform: translateX(-50%);    
          transform: translateX(-50%);
  text-overflow : ellipsis;
  white-space : nowrap;
  overflow : hidden;}
@media (min-width: 480px) and (max-width: 992px) {
  .custom_column .custom_wrap h3 {
    width: 180px;}}

.custom_column .custom_wrap .custom_content {
  padding: 2rem .8rem 1.5rem;
  width: 100%;
  height: 350px;}
.custom_wrap .custom_content img {
  width: 95% !important;
  height: auto;}
@media (max-width: 480px) {
  .custom_wrap .custom_content img {
    width: 100% !important;}}

/*== 處理 Youtube 手機版抖動問題 ==*/
.custom_content .youtube-embed-wrapper {
  padding-top: 0 !important;
  width: 100%;
  height: auto;
  padding-bottom: 56.25%;}

/*=================================================================
                            【首頁】友善連結
=================================================================*/
.slick_brand .brand_item {
  padding: 0;
  position: relative;}
@media (max-width: 480px) {
  .slick_brand .brand_item {
    margin: 0 15px;}}

.slick_brand .brand_item a {
  z-index: 2; 
  opacity: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
  width: 100%;
  height: 100%;   
  font-size: 1.125rem;/* 18 */
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: 600;
  -webkit-transition: .3s;transition: .3s;}
.slick_brand .brand_item a:after {
  content: '\f0c1';
  font-family: 'Font Awesome 5 Free';
  position: absolute;
  bottom: 10px;
  right: 10px;}
.slick_brand .brand_item:hover a, 
.slick_brand .brand_item:focus a {
  opacity: 1;}
@media (min-width: 769px) {
  .slick_brand .slick-prev {
    left: -60px;}
  .slick_brand .slick-next {
    right: -60px;}}

/*=================================================================
                             Footer
=================================================================*/
/*== Footer Toggle button ==*/
.footer_toggle_wrap {
  padding-top: 1em;
  text-align: center;}
#footer_toggle {
  padding: 0 10px;
  color: #FFF;
  border-radius: 80px 80px 0 0;
  border: 0;}
#footer_toggle i {
  vertical-align: middle;}

/*==============================*/
/*           Footer Menu        */
/*=============================*/
.footer_area {
  position: relative;
  padding: 1rem 0;}
#footer .row {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;}
.footer_area h2 {
  margin: .5rem;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	font-size: 1.125rem;/* 18 */
  text-align: center;
  font-weight: 600;}
@media (max-width: 768px) {
  .footer_area h2 {
    padding: .75rem .25rem;
    background: transparent;
    border-bottom: 1px solid;}
}
.footNav_m ul {
  margin-top: 1rem;}
.footer_area ul li {
  padding: .5rem .25rem;
  font-size: 1rem;/* 16 */
  text-align: center;}
@media (max-width: 768px) {
  .footer_area ul li {
    font-size: 1.125rem;/* 18 */}}

@media (min-width: 768px) {
  .footNav_pc {
    padding-bottom: 1rem;}}
.footNav_pc ul li:not(:last-child) {
  border-bottom: 1px solid;}

/*==============================*/
/*             Mobile           */
/*=============================*/
/*== 主選單單一link ==*/
.footer_area .card-header.--link {
	max-width: 100%;}

.footNav_m .card-header {
  padding: .75rem .25rem;
  max-width: 100%;
  background: transparent;
  border-bottom: 1px solid;}
.footNav_m .card-header a {
  display: block;  
  position: relative;  
  width: 100%;}
.footNav_m .card-header a:after {
  content: "";
  position: absolute;
  right: 10px;
  top: 40%;
  width: 10px;
  height: 10px;
  border: 2px solid;
  border-bottom: none;
  border-right: none;
  -webkit-transform: rotate(225deg);transform: rotate(225deg);
  -webkit-transition: -webkit-transform 0.25s ease-in-out;
  transition: -webkit-transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;}
.footNav_m .card-header a[aria-expanded="true"]:after {
  -webkit-transform: rotate(45deg);transform: rotate(45deg);}
 .footNav_m .card-block .list li {
   border-bottom: 0;}

/*================================================
                     Footer 底部               
==================================================*/
.section_footer { 
  position: relative;
  padding: 2rem 0;}
.section_footer .footer_column {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;}
@media (max-width : 768px) {
  .section_footer {
    margin-bottom: 4.5rem;}
}

/*==============================*/
/*              內容            */
/*=============================*/
/*== Footer Logo ==*/
.footer_logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;}
.footer_logo img {
  width: 100%;}

/*== Footer Info ==*/
.footer_info {
  margin-top: 1rem;}
@media (min-width: 992px) {
  .footer_info {
    border-left: 1px solid #CCC;}
}
.footer_info p {
  margin-bottom: .5rem;}
.footer_info a {
  -webkit-transition: 0.3s;
  transition: 0.3s;}
.footer_info .map_icon {
  display: inline-block;
  margin-bottom: 5px;
  width: 20px;
  height: 20px;}

.footer_subInfo {
  text-align: right;
  font-size: 1rem;/* 16 */}
/*== Footer Privacy ==*/
.footer_privacy {
  margin-top: 1rem;
  margin-bottom: .25rem;}
.footer_privacy li {
  display: inline-block;
  padding-right: .5rem;
  border-right: 1px solid #CCC;}
.footer_privacy li:last-child {
  border-right: 0;}
@media (max-width: 480px) {
  .footer_subInfo {
    text-align: center;}
  .footer_privacy li:nth-child(2),
  .footer_privacy li:nth-child(3) {
    display: inline-block;
    margin-top: .5rem;}
}

/*== Footer Social ==*/
.footer_social {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;}
@media (max-width: 480px) {
  .footer_social {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;}
}
.footer_social ul li {
  float: left;}
.footer_social a {        
  position: relative;
  display: inline-block;
  margin: 5px;  
  width: 50px;
  height: 50px;
  color:#FFF;
  font-size: 30px;
  line-height: 50px;
  text-align: center;
  border-radius: 5px;}
.footer_social li a:hover {
  color: #FFF;}
.footer-facebook {
  background-color: #4460ae;}
.footer-line {
  background-color: #00c300;}
.footer-youtube {
  background-color: #ff0000;}
.footer-ig {
  background: #d6249f;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);}

/*== power by ==*/
.footer_copyright span:last-child {
  display: none;} 

/*=================================================================
                        手機 Bottom Bar
=================================================================*/
.fixed_bottom {
  z-index: 1;  
  display: block;
  position: fixed;
  left: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 70px;
  text-align: center;
  -webkit-box-shadow: 0 5px 10px hsla(0, 0%, 0%, 0.2);
          box-shadow: 0 5px 10px hsla(0, 0%, 0%, 0.2);}
@media (min-width: 480px) and (max-width: 768px) {
  .fixed_bottom {
    height: 55px;}}
.fixed_bottom ul {
  height: 100%;    
  padding-top: 1rem;
  border-top: 1px solid;}
.fixed_bottom ul li {
  float: left;
  width: calc(100% / 2);}
.fixed_bottom ul li a {
  display: inline-block;
  width: 100%;
  font-size: 1rem;/* 16 */}
.fixed_bottom i {
  -webkit-transition: all 0.15s ease;transition: all 0.15s ease;}
.fixed_bottom span {
  margin-left: 10px;
  width: 30px;
  height: 30px;}

@media (max-width : 480px) {
	.fixed_bottom {
    height: 75px;
    font-size: 0.875rem;/* 14 */}  
  .fixed_bottom i {
    display: block;
    margin-bottom: .5rem;
	  font-size: 1.125rem;/* 18 */}
  .fixed_bottom ul li a {
    font-size: .85rem;/* 13.6 */}
  .fixed_bottom span {  
    width: 25px; 
    height: 25px;}}

/*== 新增：社群分享 ==*/
.float-circle {
	z-index: -10;
	position: absolute;
	top: 10px;
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	width: 50px;
	height: 50px;
	-webkit-transition: transform 0.5s, background-color 0.5s, opacity 0.2s;
	-webkit-transition: background-color 0.5s, opacity 0.2s, -webkit-transform 0.5s;
	transition: background-color 0.5s, opacity 0.2s, -webkit-transform 0.5s;
	transition: transform 0.5s, background-color 0.5s, opacity 0.2s;
	transition: transform 0.5s, background-color 0.5s, opacity 0.2s, -webkit-transform 0.5s;
	background-color: #fff;
	border-radius: 50%;}
.float-circle.open#facebook {
  background-color: #3b5998;
  -webkit-transform: translate3d(-120%, -180%, 0);
          transform: translate3d(-120%, -180%, 0);}
.float-circle.open#line {
  background-color: #00c300;
  -webkit-transform: translate3d(20%, -180%, 0);
          transform: translate3d(20%, -180%, 0);}
.float-circle.open:hover {
  opacity: 0.9;
  filter: alpha(opacity=90);}
.float-circle.open:active {
  opacity: 0.75;
  filter: alpha(opacity=75);}
.float-circle.no-animation {
  -webkit-animation: none;
          animation: none;}
.share-icon {
  color: #fff;
  font-size: 1.5rem;/* 24 */
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0) rotate(0deg);
          transform: translate3d(-50%, -50%, 0) rotate(0deg);}

@media (max-width: 992px) {
  .fixed_bottom .share_wrap a {
    padding-top: 3px;
    color: #888;}
  .fixed_bottom .share_wrap i {
    font-size: 1rem;/* 16 */}
  .fixed_bottom .share_wrap a > div {
    display: inline-block;}
}
@media (max-width: 480px) {
  .fixed_bottom .share_wrap i {
    font-size: 1.125rem;/* 18 */}
  .fixed_bottom .share_wrap a > div {
    margin-top: .15rem;}  
}

/*=================================================================
                             側邊選單
=================================================================*/
.sidebar_wrap {
  z-index: 50;
  position: fixed;
  right: 0;
  top: 50%;
  font-size: 1rem;
  text-align: center;
  background-color: #FFF;
  border-radius: 5px 0 0 5px;
  -webkit-box-shadow: 0 0 5px rgba(0,0,0,.15);
          box-shadow: 0 0 5px rgba(0,0,0,.15);}
@media only screen and (max-width : 992px) {
  .sidebar_wrap {
    display: none;}
}
.sidebar_list {
  margin-bottom: 0;}
.sidebar_item {
  display: block;
  padding: 10px;}
.sidebar_info {
  cursor: pointer;}
/*== 快速捐款 ==*/
.sidebar_info .icon_donate {
  width: 3rem;}
/*== 愛心車 ==*/
.sidebar_info {
  position: relative;
  font-size: 1.4rem;}
#car_count {
  font-size: 1.3rem;
  position: absolute;
  top: -10px;
  right: 0;}

/*=================================================================
                           Scroll To Top
=================================================================*/
.go_top {
  opacity: 0;
  z-index: 50;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;  
  position: fixed;
  bottom: 3%;
  right: 0.5%;
  width: 60px;
  height: 60px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;    
  cursor: pointer;
  -webkit-transition:.3s;transition:.3s;
  -webkit-animation: gotop 3000ms infinite;
          animation: gotop 3000ms infinite;}
@-webkit-keyframes gotop {
  from{-webkit-transform:translateY(20px);transform:translateY(20px);}
  55%{-webkit-transform:translateY(0px);transform:translateY(0px);}
  60%{-webkit-transform:translateY(10px);transform:translateY(10px);}
  70%{-webkit-transform:translateY(0px);transform:translateY(0px);}
  to{-webkit-transform:translateY(20px);transform:translateY(20px);}
}
@media (max-width: 575px) {
  .go_top{
    width: 40px;
    height: 40px;
    bottom: 0px;
    right: 15px;}}
.go_top--show { 
    opacity: 1;}

/*=================================================================
                               GDPR
=================================================================*/
.GDPR {
  z-index: 9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  left: 0;
  bottom: 0;
  padding: 1.5rem 0;  
  width: 100%;
  text-align: center;
  background: hsla(227, 11%, 16%, .75);
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-transition: all 0.3s ease-in;transition: all 0.3s ease-in;
  -webkit-transform: translateY(100%);transform: translateY(100%);}
	@media (max-width : 768px) {
		.GDPR {
			padding: 1rem 0;}}
  @media (max-width : 480px) {
    .GDPR:lang(en) {
      padding: 1rem 0 2rem;}}

.GDPR.is-active {
  opacity: 1;
  -webkit-transform: translateY(0);transform: translateY(0);}
.GDPR p {
  margin: 0;  
  color: #fff;
  letter-spacing: 2px;}
  @media (max-width : 768px) {
  	.GDPR p {
  		line-height: 1;
  		text-align: left;}}

.GDPR .GDPR_close {
    margin-left: 2em;
    padding: .375rem .75rem;
    -webkit-transform: translate(50%, -50%);
            transform: translate(50%, -50%);
    border: 2px solid #fff;}
    @media (max-width : 768px) {
      .GDPR .GDPR_close {
        margin-left: 15px;
        border: 1px solid #fff;}
      .GDPR .GDPR_links {
        display: inline-block;
        text-align: center;
        margin-top: 1rem;}}
.GDPR_button {
  margin: auto 1rem;}