 @import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;500;700&family=Cormorant:ital,wght@1,500&family=Open+Sans:wght@700;800&display=swap');

 img {
     max-width: 100%;
 }

 .w-100 {
     width: 100%;
 }

 .google-map4 iframe {
     height: 220px;
 }
 .header-section .logo.mar-4 {
    margin: 10px 0;
 }
 .rightbar-speech {

     width: 80px;
     height: 80px;
     overflow: hidden;
     display: block;
 }
.text-dk-blue {
    color: #007cc4;
}
 .fea-box-4 ol {
     padding-left: 20px;
 }

 .fea-box-4 ol li {
     margin-bottom: 8px;
 }

 .fea-box-4:hover ol li {
     color: #fff;
 }

 .service-box .fea-box-4 {
     min-height: 460px;
 }

 .typography-title-6.tw {
     font-size: 36px;
 }

 .member .col-md-6 .text-box {
     margin: 15px 0;
 }

 ol.list-1 {
     margin-top: 10px;
 }

 .rule th,
 .periodicalall th {
     padding: 30px 0;
 }

 .rule .pricing-table-1:hover {
     background-color: #fafafa;
 }

 .pricing-table-1:hover .inner-box {
     border: 1px solid #e9e9e9;
 }

 .pricing-table-2:hover .inner-box {
     border: 1px solid #323335;
 }

 .rule .pricing-table-1 tr,
 .alumni-contact tr,
 .periodicalall tr {
     transition: all 0.3s ease-out 0s;
     border-bottom: 1px solid #e9e9e9;
 }

 .rule .pricing-table-1 tr:last-child {
     border-bottom: none;
 }

 .rule .pricing-table-1 td,
 .alumni-contact td,
 .periodicalall td {
     padding: 20px 0;
 }

 .newlast .text-box-right,
 .newlast .text-box-right.more-padding-1 {
     padding: 0;
 }

 .cbp-l-caption-buttonLeft:hover {
     background-color: #dc3827;
     color: #fff;
 }

 [name="periodical"] .cbp-caption-defaultWrap {
     background-color: #fff;
 }

 .service-download td,
 .table-striped.class td,
 .periodicalall td:last-child,
 .periodicalall th:last-child {
     text-align: center;
 }

 .service-download td:first-child,
 .periodicalall td,
 .periodicalall th {
     text-align: left;
 }

 .alumni a,
 .alumni-contact td a,
 .service-download a,
 .rule a {
     /*text-decoration: underline;*/
     font-weight: 600;
     color: #7ba23f;
 }

 .alumni a:hover,
 .alumni-contact td a:hover,
 .service-download a:hover,
 .rule a:hover {
     color: #53781a;
 }

 .responsive-tabs-panel .col-md-12,
 td {
     padding: 15px;
 }

 .links .cbp-wrapper .cbp-item:first-child {
     width: calc(100% / 2) !important;
     z-index: 5;
 }

 .class-apply .control {
     display: inline-block;
     margin-right: 20px;
 }

 .image-holder {
     margin-top: 40px;
     max-width: 250px;
 }

 input[type="date"]::-webkit-clear-button {
     display: none;
 }

 .table-responsive {
     border: none;
 }

 .bg2-featurebox-3 .img-box {
     padding: 60px;
 }

 .index .post-style-1 .text-box {
     padding: 25px;
 }

 /*.apply{text-align: right;}*/
 .light .iconbox-medium.outline-gray-2 {
     border: 1px solid #b3b0b0;
 }

 .btn {
     font-size: 15px;
 }

 .responsive-tabs-content .responsive-tabs-panel {
     display: none;
 }

 .responsive-tabs-content .responsive-tabs-panel:first-child {
     display: block;
 }

 .gray-bg .pages-sidebar-links li a {
     color: #5c5c5c;
 }

 .gray-bg .pages-sidebar-links li {
     border-bottom: 1px solid #e6dddd;
 }

 .gray-bg .pages-sidebar-links li a:hover,
 .gray-bg .pages-sidebar-links li a.active {
     color: #6f9c29;
 }

 .tp-bgimg.defaultimg {
     background-size: contain !important;
 }

 .yearmember a.btn {
     margin: 5px 2px;
     font-size: 15px;
     padding: 12px 25px;
 }

 .video_box {
     position: relative;
     padding-bottom: 55%;
     margin-bottom: 60px
 }

 .video_box iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

 .app {
     display: inline-block;
     margin-right: 15px;
     margin: 0 auto;
 }

 .phone_demo {
     margin: 0 0 0 auto;
     max-width: 300px;
 }

 .down_load_btn {
     padding-left: 0;
 }

 .down_load_btn li {
     display: inline-block;
     margin: 5px 10px 5px 0
 }

 .intro_box {
     display: flex;
     align-items: center;
     height: 479px;
     overflow: hidden
 }

 .text-gold {
     color: #b6a064
 }

 .text-gold:hover {
     color: #8d7841
 }

 .btn-gold {
     background-color: #b6a064;
     color: #fff !important;
 }

 .label {
     padding: .3em 1em .3em;
     border-radius: 5em;
     letter-spacing: 1px;
 }

 .label-default {
     background-color: rgb(119 119 119 / .8);
 }

 .activity_table {
     margin-top: 50px
 }

 .activity_table th,
 .activity_table td {
     padding: 10px 20px;
 }

 .activity_table th {
     width: 20%;
     vertical-align: text-top;
     position: relative;
 }

 .activity_table th:before {
     content: '';
     position: absolute;
     border: 1px solid #767676;
     height: 22px;
     right: 12px;
 }

 #ani {
     overflow: hidden
 }

 #ani .bg-white {
     z-index: 3;
     position: relative;
 }

 .function-text {
     text-align: right;
 }

 .gift_box {
     margin-top: 30px
 }

 .gift>div {
     width: 80%;
     padding-bottom: 80%;
     border-radius: 200px;
     border: 3px solid #ffc157;
     margin: 0 auto;
     font-family: 'Comfortaa', '微軟正黑體', -apple-system, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
 }

 #subnav {
     top: 90px;
     -webkit-transition: all 0.4s ease;
     -o-transition: all 0.4s ease;
     transition: all 0.4s ease;
 }

 .site-wrapper>.col-md-12 {
     min-height: 90px
 }

 .nav>li {
     display: inline-block;
 }

 .m-15 {
     margin: 0 15px 15px 15px;
 }

 #section2 .container {
     padding: 0
 }

 .table.member_card td {
     font-size: 13px;
     border: 1px solid #ddd;
 }

 .table.member_card th {
     background-color: #b6a064;
     color: #fff
 }

 .give .APP .smk_accordion .accordion_in.style5.acc_active>.acc_head {
     background: #b6a064;
     color: #ffffff;
     border: 1px solid #b6a064;
     margin-bottom: 0
 }

 .give .APP .smk_accordion.acc_with_icon .accordion_in.style5 .acc_content.no-lpadd {
     margin-top: 0;
 }

 .give .APP .smk_accordion .accordion_in.acc_active>.acc_content {
     padding: 20px;
     margin-bottom: 30px;
     border: 1px solid #b6a064;
     background-color: #fff;
     margin-top: -3px;
 }

 .give .APP .smk_accordion .accordion_in.style5.acc_active>.acc_head .acc_icon_expand {
     filter: brightness(3);
 }

 .give .APP .smk_accordion .accordion_in.style5 .acc_head {
     border: 1px solid #edeae1;
     color: #6a6968;
     background-color: #edeae1;
     margin-bottom: 15px;
     font-size: 16px;
 }

 .give .APP .select-box.admin select {
     background-color: #ffefd9;
     border: 1px solid #FF9800;
     border-radius: 50px;
 }

 .select__arrow {
     top: 19px;
 }

 .give .APP .smk_accordion .accordion_in.style5 .acc_head .icon:before {
     content: '\f067';
     font: normal normal normal 14px/1 FontAwesome;
     margin-right: 10px;
 }

 .give .APP .smk_accordion .accordion_in.style5.acc_active .acc_head .icon:before {
     content: '\f068';
     font: normal normal normal 14px/1 FontAwesome;
     margin-right: 10px;
 }

 .APP .smk_accordion .accordion_in.style5 {
     border: none;
 }

 #section5 {
     position: relative;
 }

 #section5:before {
     content: '';
     position: absolute;
     background-image: url(../images/dots_1.png);
     background-size: contain;
     background-repeat: no-repeat;
     width: 641px;
     height: 165px;
     border-radius: 25px;
     max-width: 100%;
 }

 #section5:after {
     content: '';
     position: absolute;
     bottom: 0;
     right: 0px;
     background-image: url(../images/dots_2.png);
     background-size: contain;
     background-repeat: no-repeat;
     width: 1011px;
     height: 340px;
     border-radius: 25px;
 }

 .award_box {
     position: relative;
     border-top: 5px solid #444;
     padding: 20px 0px;
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     min-height: 250px;
 }

 .award_box p {
     border-bottom: 5px solid #444;
     font-size: 18px;
     font-weight: 400;
     padding-bottom: 15px;
     /* flex: 120px; */
 }

 .award_box .num_item {
     position: absolute;
     font-size: 12rem;
     right: 10px;
     bottom: 10px;
 }

 table.award {
     width: 100%;
 }

 table.award th {
     background-color: #f7f7f7;
     padding: 8px 10px;
 }

 table.award td {
     background-color: #f7f7f7;
     text-align: center;
     border-top: 1px solid #e9e9e9;
     padding: 8px 10px;
 }

 figure img {
     margin-bottom: 15px;
 }

 figcaption {
     line-height: 1.8;
     margin-bottom: 15px;
 }

 p {
     word-break: break-all;
 }




 /*****************
    捐款系統css
******************/
 .clearfix {
     float: none;
 }

 .price-box {
     display: inline-block;
     margin-right: 10px;
     margin-bottom: 10px;
     padding: 10px 15px;
     background: #e58d7e;
     border-radius: 5px;
     color: #fff;
     font-size: 18px;
     font-weight: bold;
     width: 100%;
     text-align: center;
 }

 a.price-box:hover,
 a.price-box:active,
 a.price-box:focus {
     color: #ffffff;
     filter: brightness(1.1);
     text-decoration: none
 }

 .give .payment_cover {
     background-position: center;
     -webkit-background-size: cover;
     background-size: cover;
     width: 100%;
     height: 100%;
     /* margin: 5px auto; */
     /* filter: grayscale(0.4) hue-rotate(135deg); */
 }

 .donatebtn+label:hover .payment_cover,
 .donatebtn:checked+label.text-box .payment_cover {
     /* filter: invert(28%) sepia(86%) saturate(1158%) hue-rotate(195deg) brightness(90%) contrast(99%); */
 }

 .donatebtn+label:hover h4 {
     color: #3066ff;
 }

 .give .iconbox-medium.outline-gray-2 {
     border-color: transparent;
 }

 .give .payment_cover.linepay {
     width: 80px;
     height: 29px;
     margin-top: 22px;
 }

 .give label {
     cursor: pointer
 }

 .give .list-1.inline li {
     margin-left: 40px;
     padding: 3px 0 0 20px;
 }

 .give .list-1.inline li:first-child {
     margin-left: 0
 }

 .give .list-1.inline li:before {
     background-color: #bebebe;
 }

 .give .list-1.inline li.active {
     font-weight: 600;
 }

 .give .list-1.inline li.active:before {
     background-color: #8BC34A;
 }

 .give .white.padding-2 {
     padding: 8px 10px;
 }

 .give .white.padding-2 h4 {
     margin-bottom: 0;
     font-size: 16px;
     font-weight: 600;
 }

 .give .bg2-featurebox-3 .img-box {
     padding: 0
 }

 .give .bg2-featurebox-3 .img-box .postdate-box {
     background-color: #7cae41;
 }

 .give .bg2-featurebox-3 .img-box .blog-post-info span {
     color: #fff
 }

 .give [name="way"][disabled]+label {
     cursor: default;
     opacity: .5;
     background-color: #eee;
 }

 .give .give_item_cover {
     background-size: cover;
     background-position: top;
     padding: 50%;
     margin-bottom: 10px;
 }

 .give .give_item {
     /*height: 410px;*/
     border-radius: 4px;
     /* margin-bottom: 15px; */
     /* margin-right: 8px; */
     margin-bottom: 0;
    flex-grow: 1;
 }

 .donatebtn~label::before {
     background-color: white;
     color: white;
     content: " ";
     display: block;
     border-radius: 50%;
     border: 1px solid grey;
     position: absolute;
     top: -10px;
     right: 5px;
     width: 25px;
     height: 25px;
     text-align: center;
     line-height: 24px;
     transition-duration: 0.4s;
     transform: scale(0);
 }

 .donatebtn:checked+label::before {
     content: "\f00c";
     font-family: 'FontAwesome';
     background-color: #3066ff;
     transform: scale(1);
     border-color: #3066ff;
     z-index: 2;
 }

 .donatebtn:checked+label.text-box {
     border: 1px solid #3066ff;
     background-color: #e2eaff;
 }

 .donatebtn:checked+label.text-box p {
     color: #3066ff;
 }

 .give .select-box select {
     background-color: #fff;
     border: 1px solid #d7d7d7;
     border-radius: 4px;
     height: 45px;
 }

 .give .input_innerbox {
     min-height: 400px;
     margin-left: 0
 }

 .give table.mydata th {
     background-color: #f8eeda;
     border: 1px solid #ede3cf;
     width: 35%;
     color: #7e6e64;
 }

 .give table.mydata td {
     background-color: #fff;
     border: 1px solid #ede3cf;
     padding-left: 30px;
     word-break: break-all;
 }

 .give .identity-group .control {
     display: inline-block;
     margin-right: 20px;
 }

 .give .identity-group .esle_identity {
     width: 150px;
     float: none;
     margin-left: 10px;
     word-break: break-word;
     visibility: hidden;
 }

 .give .smk_accordion .accordion_in.style5.acc_active>.acc_head {
     background: #8bc34a;
     color: #ffffff;
     border: 1px solid #8bc34a;
     margin-bottom: 0
 }

 .give .smk_accordion.acc_with_icon .accordion_in.style5 .acc_content.no-lpadd {
     margin-top: 0;
 }

 .give .smk_accordion .accordion_in.acc_active>.acc_content {
     padding: 20px;
     margin-bottom: 30px;
     border: 1px solid #8bc34a;
     background-color: #fff;
     margin-top: -3px;
 }

 .give .smk_accordion .accordion_in.style5 .acc_head {
     border: 1px solid #8bc34a;
     color: #6da033;
     margin-bottom: 15px;
 }

 .give .select-box.admin select {
     background-color: #ffefd9;
     border: 1px solid #FF9800;
     border-radius: 50px;
 }

 .select__arrow {
     top: 19px;
 }

 .give .smk_accordion .accordion_in.style5 .acc_head .icon:before {
     content: '\f067';
     font: normal normal normal 14px/1 FontAwesome;
     margin-right: 10px;
 }

 .give .smk_accordion .accordion_in.style5.acc_active .acc_head .icon:before {
     content: '\f068';
     font: normal normal normal 14px/1 FontAwesome;
     margin-right: 10px;
 }

 .control--checkbox .control__indicator:after {
     left: 8px;
     top: 4px;
     width: 6px;
     height: 10px;
 }

 .give div[step="2"],
 .give div[step="3"] {
     display: none
 }

 .give .form-control {
     height: 42px;
     border: 1px solid #d7d7d7;
     border-radius: 0;
     box-shadow: none;
 }

 .give .input-1 {
     border: 1px solid #d7d7d7;
     border-radius: 4px;
 }

 #else.input-1 {
     /* border:1px solid #cfc9e5; */
 }

 .give .form-control~span button {
     margin: 0
 }

 .give .form-sub-title {
     padding: 20px 8px;
     margin-bottom: 30px;
     background-color: #eee8e7;
     border-bottom: 1px dashed #d9d1cf;
 }

 .give .form-sub-title h4 {
     margin-bottom: 0
 }

 /*.give .pricing-table-1,.give .pricing-table-1:hover{background-color: #fff;border:1px solid #eee }*/
 .rule .pricing-table-1 tr th {
     background-color: #eee;
     padding: 30px 10px;
 }

 .rule .pricing-table-1 tr td {
     padding: 20px 10px;
 }

 .section-pattern {
     /* background:linear-gradient(135deg, rgba(232, 194, 111, 0.2) 0%,rgba(240, 153, 120, 0.3) 100%),url(../images/diamond_upholstery.png) repeat; */
     /*background-size: cover;*/
     background-color: #f8f7f6;
 }

 .section-pattern:before {
     content: '';
     position: absolute;
     top: -7px;
     right: 0;
     width: 40vw;
     height: 27vw;
     background: url(../images/shadow_w.png) center/contain no-repeat;
     background-position: bottom;
 }

 .give .boxshadow {
     padding-left: 0px;
     z-index: 5;
     position: relative;
     box-shadow: 0 0 18px #d7d4be;
 }

 .give .boxshadow.pl-sm {
     padding-left: 25px;
 }

 .give section {
     position: relative;
 }

 .custom-section-curved-top-3 {
     position: absolute;
     top: -210px;
     left: 0;
 }

 .custom-section-curved-top-2 {
     position: absolute;
     top: 0;
     height: 150px;
 }

 .custom-section-curved-top-3~.container {
     margin-top: -120px;
 }

 .flipy {
     -moz-transform: scaleY(-1);
     -webkit-transform: scaleY(-1);
     -o-transform: scaleY(-1);
     transform: scaleY(-1);
     /*IE*/
     filter: FlipV;
 }

 .give .iconbox-medium {
     width: 45px;
     height: 45px;
     display: inline-block;
     margin-bottom: 10px;
 }

 /* .give .step_title h4.font-weight-7{
    background-color: #8BC34A;
    padding: 8px 0;
    color: #fff;
}
.give .step_title h4.font-weight-7:before{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 21.5px;
    border-color: transparent transparent transparent #8bc34a;
    top: 0px;
    right: -28px;
    z-index: 2;
}
.give .step_title h4.font-weight-7:after{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 21.5px;
    border-color: #8bc34a #8bc34a #8bc34a #fff;
    top: 0px;
    left: -4px;
    z-index: 1;
}
.give .step_title:first-child h4.font-weight-7:after{
    border:none;
} */
 .give .circle_num {
     background-color: #fff;
     width: 26px;
     height: 26px;
     display: inline-block;
     margin-right: 8px;
     border-radius: 50px;
     color: #8bc34a;
     font-size: 15px;
     line-height: 29px;
 }

 .give .border-left {
     min-height: 530px;
 }

 .give .border-left:before {
     content: '';
     position: absolute;
     left: 0px;
     border-left: 1px solid #eee;
     height: 88%;
     top: 12%;
 }

 .give .border-white {
     border: 1px solid #d7d7d7;
     border-radius: 8px;
     margin-bottom: 15px;
 }

 .give .donat_title .btn {
     /* position: absolute;
    right: 11px;
    top: -4px;
    height: calc(100% - 17px); */
     background-color: #e6e6e6;
     color: #646464;
     display: flex;
     align-items: center;
     border-radius: 4px;
     border: 1px solid #e6e6e6;
     margin: 0;
     margin-left: 8px;
     flex-shrink: 0;
 }

 .give .donat_title .donatebtn:checked~.btn {
     /* background-color: #e8e5f6; */
 }

 .give .donat_title .font-weight-7,
 .give .donat_title .font-weight-6 {
     display: flex;
     /* padding-right: 78px; */
     letter-spacing: 1;
 }

 .input-1 {
     font-weight: 400;
 }

 .input-1::-moz-placeholder {
     color: #bababa;
 }

 .input-1:-ms-input-placeholder {
     color: #bababa;
 }

 .input-1::-webkit-input-placeholder {
     color: #bababa;
 }

 .give .ishistory {
     display: none;
 }

 .give [area=c] {
     display: none
 }

 input[type="month"] {
     -webkit-appearance: none;
 }

 .btn-main,
 .header-section ul li a.btn-main {
     background-color: #017dc5 !important;
     color: #fff
 }
 
 .btn-main:hover {
     background-color: #0c8dd7 !important;
     color: #fff;
 }

 .btn-main2,
 .header-section ul li a.btn-main2 {
     background-color: #06c755 !important;
     color: #fff
 }
 .btn-main2:hover {
     background-color: #15cd61 !important;
     color: #fff;
 }
 .header-section ul li a.btn-main,
 .header-section ul li a.btn-main2 {
     margin-left: 10px;
     padding: 10px 20px;
     border-radius: 25px;
 }

 .header-section ul li a.btn-main2:hover {
     color: #fff;
 }

 .give .total_count {
     position: relative;
     padding: 15px 25px 15px 56px;
     box-sizing: border-box;
     /* font-style: italic; */
     color: #464646;
     background: #fff4db;
 }

 .give .total_count:before {
     display: inline-block;
     position: absolute;
     top: 50%;
     left: 10px;
     width: 36px;
     height: 36px;
     -ms-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     transform: translateY(-50%);
     text-align: center;
     content: " $ ";
     /* font-family: Fon/Awesome; */
     color: #FFF;
     font-size: 20px;
     line-height: 36px;
     background: #ffd596;
     border-radius: 50%;
     font-weight: 900;
 }

 .give .total_count p {
     position: relative;
     padding: 0;
     margin: 10px 0;
     z-index: 3;
     line-height: 1.7;
 }

 .give .total_count cite {
     display: block;
     text-align: right;
     color: #888888;
     font-size: 0.9em;
 }
 .stepTag {
    padding: 0;
    font-size: 1.3em;
    padding-bottom: 16px;
    margin-bottom: 32px;
    border-bottom: 2px dashed #acacac;
 }
 .stepTag span {
    font-weight: 600;
    font-size: 2em;
 }
 /* add 20221107 */
 .f18 {
     font-size: 18px;
 }

 .d-flex {
     display: flex;
 }

 .ai-end {
     align-items: end;
 }

 .d-inline-block li {
     display: inline-block;
     padding-right: 15px;
 }

 .footer_contact {
     line-height: 1.2;
 }
 .footer_contact h4 {
    font-size: 1.6em;
    margin-bottom: 12px;
 }
 .footer_contact img {
    width: 60%;
    display: block;
    margin-bottom: 32px;
 }
 .footer_contact a {
    color: #484848;
    display: inline-block;
    margin-bottom: 14px;
 }
 .shortDash {
    display: inline-block;
    border-right: 1px solid #484848;
    padding-right: 8px;
    margin-right: 8px;
 }
 .give .StepProgress {
     position: relative;
     padding-left: 0;
     list-style: none;
     display: flex;
 }

 /* .give .StepProgress::before {
  display: inline-block;
  content: '';
  position: absolute;
  top: 0;
  left: 15px;
  width: 10px;
  height: 100%;
  border-left: 2px solid #ade24f;
} */
 .give .StepProgress-item {
     position: relative;
     counter-increment: list;
     /* margin: 25px 0; */
     margin-bottom: 24px;
     background-color: #fff;
     width: 33.33333333%;
 }

 .give .StepProgress-item:not(:last-child) {
     padding-bottom: 16px;
 }

 /* .give .StepProgress-item::before {
  display: inline-block;
  content: '';
  position: absolute;
  left: -30px;
  height: 100%;
  width: 10px;
}
.give .StepProgress-item::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: -37px;
  width: 12px;
  height: 12px;
  border: 2px solid #CCC;
  border-radius: 50%;
  background-color: #FFF;
}
.give .StepProgress-item.is-done::before {
  border-left: 2px solid green;
}
.give .StepProgress-item.is-done::after {
  content: "✔";
  font-size: 10px;
  color: #FFF;
  text-align: center;
  border: 2px solid green;
  background-color: green;
}
.give .StepProgress-item.current::before {
  border-left: 2px solid #ade24f;
}
.give .StepProgress-item.current::after {
    content: counter(list);
    padding-top: 1px;
    width: 35px;
    height: 35px;
    top: -4px;
    left: -47px;
    font-size: 14px;
    text-align: center;
    color: #fff;
    font-weight: 600;
    border: 2px solid #ade24f;
    background-color: #ade24f;
    line-height: 29px;
} */
 .give .StepProgress strong {
    display: block;
    color: #017dc5;
    background-color: #dceefb;
    border-left: 5px solid;
    padding: 10px 20px;
    border-radius: 0;
    letter-spacing: 1px;
 }

 .give .f24 {
     font-size: 24px;
 }

 .lines_ttl {
     border-bottom: solid 3px #ccc;
     position: relative;
     padding-bottom: 15px;
     color: #77ac33;
     letter-spacing: 1.5px;
 }

 .lines_ttl:after {
     position: absolute;
     content: " ";
     display: block;
     border-bottom: solid 3px #77ac33;
     bottom: -3px;
     width: 60px;
     border-radius: 20px;
 }

 .side_btn {
     display: block;
     font-weight: 600;
     padding: 15px 100px 15px 15px;
     border: 1px solid #77ac335e;
     border-radius: 10px;
     margin-bottom: 15px;
     margin-right: 20px
 }

 .side_btn.active {
     background-color: #94d45f;
     color: #fff;
 }

 .side_btn a {
     color: #77ac33;
 }

 .side_btn a small {
     color: #a0a0a0;
 }

 .pages-sidebar-item-title {
     background-color: #eee;
     display: inline-block;
     padding: 3px 15px;
     letter-spacing: 2px;
 }

 h5.pages-sidebar-item-title+span {
     transform: translate(-9px, 7px);
     font-weight: 700;
     color: #cacaca;
     font-family: 'Open Sans', sans-serif;
     font-size: 37px;
     display: inline-block;
 }

 .pricing-table-1.bg-white {
     background-color: #fff !important;
 }

 .pricing-table-1.bg-white .inner-box {
     border: none;
     padding: 0px;
 }

 .name_lsit .pricing-table-1 tr td,
 .name_lsit .pricing-table-1 tr th {
     padding: 15px 10px;
     text-align: left;
 }

 .name_lsit .pricing-table-1 tr th {
     background-color: #1e4080;
     color: #fff;
     border-right: 1px solid rgb(64 102 0 / 24%);
 }

 .name_lsit .pricing-table-1 tr td {
     border: 1px dotted #7bbee5
 }

 .name_lsit .pricing-table-1 tr:nth-child(odd) {
     background-color: #f4f9fa;
 }

 .name_lsit .pricing-table-1 tr td:first-child {
     border-left: none
 }

 .name_lsit .pricing-table-1 tr td:last-child {
     border-right: none
 }

 input[name="keyword"] {
     /* height: 56px !important; */
     padding-right: 60px;
     /* border-radius: 50px !important; */
     transform: translateX(0);
 }

 .search_btn {
     /* border-radius: 50px !important; */
     width: 40px;
     height: 40px;
     text-align: center;
     padding: 0 !important;
     line-height: 42px;
     position: relative;
     /* transform: translateX(-20px); */
     margin-left: 4px !important;
     z-index: 99 !important;
     background-color: #828282 !important;
 }

 .news_box {
     border-bottom: 1px dotted #a6c87a;
     display: flex;
     align-items: center;
 }

 .news_tag {
     padding: 10px 4px;
     color: #fff;
     background-color: #84c350;
     margin: 15px 10px;
     min-width: 128px;
     text-align: center;
     font-size: 14px;
 }

 .news_box p,
 .news_box h4 {
     margin-bottom: 0;
 }

 .news_box p {
     font-size: 13px;
     color: #a0a0a0;
     letter-spacing: 2px
 }

 .en-title {
     color: #fff;
     text-align: center;
     font-size: 2rem;
     letter-spacing: 2px;
     font-family: 'Open Sans', sans-serif;
     position: absolute;
     margin: 0 auto;
     left: 0;
     right: 0;
     bottom: 30px;
 }

 .en-title::before {
     content: '';
     border-top: 1px solid #fff;
     width: 50px;
     position: absolute;
     top: 15px;
     left: calc((100% - 380px) / 2);
 }

 .en-title::after {
     content: '';
     border-top: 1px solid #fff;
     width: 50px;
     position: absolute;
     top: 15px;
     right: calc((100% - 380px) / 2);
 }

 .form_tag {
     background: linear-gradient(transparent 60%, #cfeb9d 60%);
     display: inline-block;
 }

 .border-gold {
     border: 1px solid #e5e1e1;
     border-radius: 4px;
     padding: 20px;
 }

 .thx {
     font-family: 'Cormorant', cursive;
     position: absolute;
     right: 30px;
     width: 150px;
     height: 150px;
     color: #efeae5a3;
     bottom: 18px;
     transform: scale(1.2);
     overflow: hidden;
     background-image: url(../images/deco/heart.png);
     background-size: contain;
     background-repeat: no-repeat;
     background-position: right;
 }

 .header-section logo img {
     width: 100%;
 }

 .dotIcon {
     display: inline-block;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background-color: #fff;
     border: 3px solid #017dc5;
     margin-top: 6px;
     margin-right: 8px;
 }

 .donatebtn:checked+label .dotIcon {
     border: 3px solid orange;
 }

 .fillingContent {
     padding: 20px;
 }

 .donateItem {
     display: inline-flex;
     width: 100%;
     position: relative;
     padding: 10px;
     border: 1px solid #eee;
     border-radius: 4px;
     margin-right: 10px;
     margin-bottom: 15px;
 }

 .outImgWrapper {
     position: relative;
 }

 .outImg {
     width: 250px;
     height: 250px;
     position: absolute;
     top: 0;
     left: 100%;
     box-shadow: 0 0 24px -2px rgba(0, 0, 0, 0.2);
 }
 .page-header {
    background-color: #fff;
    padding: 80px 0;
    background-image: url(../images/pgheader.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    margin-bottom: 0;
    position: relative;
    text-align: center;
    margin: 0;
  }
  .page-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #014271;
    opacity: 0.5;
  }
  .page-header .pageTitle {
    font-size: 3em;
    line-height: 1.4;
    color: #fff;
    font-weight: 500;
    letter-spacing: 0.08em;
    margin-bottom: 0;
    position: relative;
  }
  .page-header .pageEnTitle {
    display: block;
    font-family: serif;
    color: #fff;
    line-height: 1.4;
    position: relative;
    opacity: 0.5;
  }
.iconLabel {
    display: flex;
    align-items: center;
}
.iconLabel .iconbox-medium {
    margin: 0;
    margin-right: 8px;
}
.rankItem {
    padding: 24px;
    background-color: #e7f3f9;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 1.3em;
    border-radius: 8px;
    position: relative;
    box-shadow: 0 2px 6px -1px rgba(0,0,0,0.1);
    overflow: hidden;
    margin-bottom: 16px;
    z-index: 0;
}
.colItem:nth-child(1) .rankItem {
    background-image: url(../images/metal/platinum.jpg);
}
.colItem:nth-child(2) .rankItem {
    background-image: url(../images/metal/gold.jpg);
}
.colItem:nth-child(3) .rankItem {
    background-image: url(../images/metal/silver.jpg);
}

.rankItem h5 {
    /* color: #fff; */
    font-size: 1.2em;
    line-height: 1.4;
    font-weight: 600;
    margin: 0;
    margin-bottom: 6px;
    min-height: 65px;
    position: relative;
}

.rankItem .pNum {
    position: relative;
    display: inline-block;
    padding: 0 4px;
    z-index: 0;
}
.rankItem .pNum::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-bottom: 10px solid #e9debf;
    border-radius: 20px;
    z-index: -1;
}
.rankItem .bottombox {
    background-color: #fff;
    padding: 10px 16px;
    border-radius: 80px;
    box-shadow: inset 0 0 16px -6px rgba(0,0,0,0.2);
}
 /*--------------------------------------------------

 * responsive

 * -----------------------------------------------

*/
@media (max-width: 1536px) {
    .outImg {
        display: none;
    }
}
 @media only screen and (max-width: 1200px) {
     .links .cbp-wrapper .cbp-item:first-child {
         display: none;
     }

 }

 @media only screen and (max-width: 1024px) {
     .header-section.style1 ul li a {
         padding: 35px 10px;
     }

     .tabstyle-9 .responsive-tabs li {
         width: 95px;
     }

     .tabstyle-9 .responsive-tabs li a {
         padding: 15px 10px;
     }
     .give .StepProgress {
        flex-wrap: wrap;
     }
     .give .StepProgress-item {
        width: 100%;
     }
 }

 @media only screen and (max-width: 993px) {

     td,
     th {
         display: table-cell;
     }

     tr {
         display: table-row;
     }

     tbody {
         display: table-row-group;
     }

     .pricing-table-1 .inner-box {
         padding: 20px;
     }
 }

 @media only screen and (max-width: 768px) {
     .index-2btn {
         text-align: center;
     }

     .index-2btn .float-right {
         float: none;
     }

     .index-new .col-md-2.col-xs-12 {
         text-align: center;
     }

     .rule table {
         min-width: 500px;
     }

     th,
     td {
         padding: 30px 10px 30px 10px !important;
     }

     .tabs-left1-holder .feature-box {
         padding: 25px 10px;
     }

     .tabstyle-9 .responsive-tabs li a {
         padding: 13px 10px;
     }

     .apply {
         text-align: center;
     }

     .header-section.style1 ul li a {
         padding: 20px 15px;
     }

     .tp-bgimg.defaultimg {
         background-size: cover !important;
     }

     .index-2btn strong {
         font-size: 32px;
     }

     /* 1012 */
     .triangle-bottomright2:before {
         border-bottom: 500px solid #7BA23F;
         border-left: 100vw solid transparent;
         margin-top: -100px;
     }

     .down_load_btn {
         padding-left: 0;
         text-align: center;
     }

     .cd-item,
     .intro_box {
         height: auto;
     }

     .function-text {
         text-align: left;
     }

     .header-section img {
         max-width: 100%
     }

     .header-section ul li.menu-icon {
         padding: 9px 0 0 30px;
     }

     .navbar-right {
         float: left !important
     }

     #section5:after {
         bottom: -30px;
         width: 800px;
     }

     .activity_table th:before {
         right: 0px;
     }

     .navbar-default .navbar-nav>li>a {
         padding: 13px 6px
     }

     .navbar-collapse .navbar-right {
         float: none !important;
         text-align: center;
     }

     /*****************
       捐款系統css
    ******************/
     .give .border-left:before {
         height: 0
     }

     .give .step_title {
         margin-top: 15px;
     }

     .give .text-box.padding-1 {
         padding: 10px;
     }

     .give .sec-title-container.less-padding-6 {
         padding-bottom: 10px;
     }

     .give .border-left {
         min-height: auto;
     }

     .give .md-block {
         display: block;
         margin-top: 8px;
     }

     .header-section ul {
         display: block;
     }

     .header-section ul li a.btn-main2 {
         border-radius: 0;
         margin: 0
     }

     .header-section {
         padding-bottom: 0
     }

 }

 @media only screen and (max-width: 415px) {

     /*.rev_slider_wrapper{margin-bottom: -96px;}*/
     。 .header-section img {
         max-width: 80%;
     }

     .iconbox-medium {
         width: 70px;
         height: 70px;
         line-height: 73px;
     }

     .text-box-right.more-padding-1 {
         padding: 0px 0px 0px 80px;
     }

     .header-section .logo.mar-4 {
         max-width: 300px;
     }

     .tabstyle-9 .responsive-tabs li {
         width: 93px;
     }

     .tab-navbar-main {
         margin-left: 40px;
         width: auto;
     }

     .bg2-featurebox-3 .postinfo-box,
     .bg2-featurebox-3 .img-box {
         padding: 15px;
     }

     .speech-video .newlast .col-md-3.text-right {
         text-align: left;
         margin-top: 15px;
         padding: 0;
     }

     .avatar-sq {
         position: initial;
     }

     .header-section.style1 ul li.menu-icon a {
         padding: 6px 15px;
     }

     .member .text-box.padding-6 {
         padding: 25px;
     }

     .cbp-l-filters-button .cbp-filter-item {
         padding: 0 14px;
     }

     .typography-title-6.tw {
         font-size: 35px;
     }

     .responsive-tabs-panel .col-md-12 {
         padding: 10px;
     }

     .triangle-bottomright2 {
         border-bottom: 150px solid #f3f3f3;
         border-right: 90.90vw solid transparent;
         /*float: left;*/
     }

     .triangle-bottomright2:before {
         border-bottom: 200px solid #7BA23F;
         border-left: 100vw solid transparent;
         margin-top: -50px;
     }

     .pricing-table-1 .inner-box {
         padding: 0;
     }

     .cbp-l-filters-buttonCenter .cbp-filter-item {
         padding: 0 8px
     }

     .yearmember.post-content {
         padding: 0px !important;
     }

     .yearmember.post-content .btn.btn-medium {
         padding: 13px;
     }

     .intro_box {
         flex-wrap: wrap;
     }

     .phone_demo {
         max-width: 250px;
         margin: 0 auto;
     }

     .sec-title-triangle2 {
         margin-top: -200px
     }

     .cd-folding-panel {
         top: 76px;
     }

     .table.member_card {
         min-width: 1200px
     }

     .table-responsive>.table>tbody>tr>td,
     .table-responsive>.table>tbody>tr>th,
     .table-responsive>.table>tfoot>tr>td,
     .table-responsive>.table>tfoot>tr>th,
     .table-responsive>.table>thead>tr>td,
     .table-responsive>.table>thead>tr>th {
         white-space: inherit;
     }

     .activity_table th:before {
         height: 50px;
     }

     /*****************
       捐款系統css
    ******************/
     .give .padding-2 {
         padding: 20px 10px
     }

     .give .white.padding-2 h4 {
         font-size: 16px
     }

     .give .list-1.inline li:first-child {
         margin-left: 40px
     }

     .give .list-1.inline {
         margin-left: 0;
         text-align: left !important
     }

     .give .input_innerbox.tbl {
         min-height: auto;
         width: auto;
         margin: 0 10px;
     }

     .give .novi-overlay__content table td,
     .give .novi-overlay__content table th {
         padding: 15px 10px !important;
     }

     .give .payment_cover {
         margin: 0px auto 10px;
     }

     .give .payment_cover.linepay {
         width: 70px;
         height: 27px;
         margin-top: 27px;
     }

     .give .StepProgress strong span {
         font-size: 16px;
         display: block;
     }

     footer .row.d-flex.ai-end {
         display: block;
     }

     footer .row.d-flex.ai-end .col-sm-6 {
         text-align: left;
         margin-bottom: 15px
     }


     .thx {
         bottom: 0;
     }

     .header-section .main-nav .nav.top-nav {
         top: 14px;
     }

 }

 @media (max-width: 376px) {
     .tab-content-holder-9 {
         padding: 0;
     }

     .yearmember.post-content .btn.btn-medium {
         padding: 9px;
     }
 }

 @media (max-width: 320px) {
     .yearmember.post-content .btn.btn-medium {
         padding: 12px;
     }
 }

 ::-webkit-scrollbar {
     -webkit-appearance: none;
 }

 ::-webkit-scrollbar:vertical {
     width: 2px;
 }

 ::-webkit-scrollbar:horizontal {
     height: 2px;
 }

 ::-webkit-scrollbar-thumb {
     background-color: rgba(0, 0, 0, .5);
     border-radius: 10px;
     border: 2px solid transparent;
 }

 ::-webkit-scrollbar-track {
     background-color: transparent;
 }