/*!
 * Start Bootstrap - Modern Business (https://startbootstrap.com/template-overviews/modern-business)
 * Copyright 2013-2019 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-logomodern-business-nav/blob/master/LICENSE)
 */


/* @import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
* {
    border-width: 1px;
    border-color: #DDDDDD;
} */

/* 思源黑體 */
/* @import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap");
.font-1 { 
  font-size: 3.5rem;
  font-weight: 300;
  font-family: 'Noto Sans TC', sans-serif; } */

body {
    padding-top: 55px;
    font-family: "Microsoft JhengHei", "微軟正黑", "Times New Roman", "Sans-Serif", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    overflow-y: scroll;
    overflow-x: hidden;
    font-size: 16px;
    font-weight: 500;
    line-height:1.5;
    background-color:#F7F6F6;
    color:#53565A;

}

H1 ,H2 ,H3 ,H4 ,H5 ,H6 {
    color:#53565A;
    margin:0.1em 0;
    font-weight: 600;
    line-height:1.5;
}

H1 {
    font-size: 4.5rem;
}

H2 {
    font-size: 3.5rem;
}

H3  {
     font-size: 2.5rem;
}

H4  {
    font-size: 1.1rem;
}

H5  {
    font-size: 1rem;
}

H6  {
    color: #A5BAC7;
    font-size: 0.8rem;
}

p2 {
    font-size: 0.8rem;
    display: block;
}

p3 {
    font-size: 0.75rem;
    display: block;
}



.tag {
  background-color: white;
  color: #00426A;
  border: 2px solid #00426A;
  border-radius: .3rem;
  text-align: center;
  padding: 0px 6px;
  letter-spacing:1px;
  font-size: 1rem;
  font-weight: 600;
}

html{
    scrollbar-face-color:#FFF0F7;
    scrollbar-highlight-color:#D679AE;
    scrollbar-shadow-color:#D679AE;
    scrollbar-3Dlight-color:#FFF0F7;
    scrollbar-arrow-color:#D679AE;
    scroll-track-color:#FFF0F7;
    scroll-darkshadow-color:#FFF0F7;
}

input [type|="checkbox"],
button,
a,
[type="button"], 
[type="reset"], 
[type="submit"]
{
    -webkit-appearance: none;
    -moz-appearance: none;     /* FireFox */
    appearance: none;
}



::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar:vertical {
    width: 5px;
}
::-webkit-scrollbar:horizontal {
    height: 5px;
}
::-webkit-scrollbar-track {
    -webkit-border-radius: 4px;
    border-radius: 4px;
    margin:5px 0 5px 0;
}
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: rgb(190, 190, 190);
}

embed {
    overflow:hidden !important;
}
.col.road {
    background-image: url(../image/index-2.png);
    background-repeat: no-repeat;
    background-size: 100vw 21.6vw;
}

@media (min-width:1920px) {
    .col.road {
        background-image: url(../image/index-2.png);
        background-repeat: no-repeat;
        background-size: 100vw 400px;
    }
}



@media (min-width:1720px) {
    .wchange {
        width: 1400px;
    }
}

@media (max-width:1719.98px) {
    .wchange {
        width: 1050px;
    }
}

@media (max-width:1050px) {
    .wchange {
        width: 700px;
    }
}

@media (max-width:700px) {
    .wchange {
        width: 350px;
    }
}

a[onclick] {
    cursor: pointer!important;
}

.wchange {
    margin-left: auto;
    margin-right: auto;
}

.container a {
    color:#0041A3;
}

.strategytable2 a:hover {
    text-decoration: underline;
}

.nav-item a:hover {
    text-decoration: none;
}

.overlay {
    position: fixed;
    z-index: 9999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
}

.overlay:target,
.overlay.active {
    visibility: visible;
    opacity: 1;
}



.modal .close,
.sidebar .close {
    transition: background-color 200ms;
    font-weight: bold;
    text-decoration: none;
    border-radius: 100%;
    cursor: pointer;
}

.sidebar .close{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    text-align: center;
    padding: 0;
}


.modal .close{color:#333}

.sidebar .close{color: white}

.sidebar .close:hover,
.sidebar .close:focus {
    background-color: #FF8088;
    color: white!important;
}


@media (max-width: 700px) {
    .box {
        width: 70%;
    }
}

.nav-link {
    font-size: 1.2rem;
}

.row {
    margin-left: 0;
    margin-right: 0;
}

.bg-test {
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08);
    -moz-transition-property: background-color;
    -moz-transition-duration: 0.5s;
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 0.5s;
    -o-transition-property: background-color;
    -o-transition-duration: 0.5s;
}

.bg-light {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08);
    -moz-transition-property: background-color;
    -moz-transition-duration: 0.5s;
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 0.5s;
    -o-transition-property: background-color;
    -o-transition-duration: 0.5s;
}

.carousel-item {
    height: 300px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.carousel-control-prev {
    width: 3%;
}

.carousel-control-next {
    width: 3%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(100%);
}

.portfolio-item {
    margin-bottom: 30px;
}

.btn-outline-secondary {
    color: #000000;
    border-color: #BBBBBB;
}

.btn-outline-secondary:hover {
    color: #fff;
    background-color: #BBBBBB;
    border-color: #BBBBBB;
}


/* 導覽列高度 */

.navbar-brand,
.navbar-nav li a {
    line-height: 38px;
    height: 38px;
    padding-top: 0;
}

.strategycard {
    position: relative;
    height: 270px;
    width: 330px;
    background-color: #FFFFFF;
    padding: 20px 10px;
    margin: 0 10px;

    /* border: #BBBBBB;
    border-width: 1px;
    border-style: solid; */
}

.strategycard h4,
.strategycard h2 {
    pointer-events: none;
}

.strategycard:hover,
.strategycard.active{
    box-shadow: 3px 4px 6px rgba(0, 0, 0, 0.19);
    top:-3px;
    left:-3px ;
}

.strategy-photo {
    background-color: rgb(236, 234, 234);
    height: 90px;
    width: 90px;
    border-radius: 5px;
    overflow:hidden;
    display: block;
}

.strategy-name {
    margin: 0 10px;
    height: 90px;
}


.strategy-name .strategy-star {
    margin-top: 12px;
}

.strategy-star a {
    color:#828282;
}

.strategy-star a:hover{
    text-decoration: underline;
}

.star {
    background-image: url("../image/star.png");
}

.half-star {
    background-image: url("../image/halfstar.png");
}

.empty-star {
    background-image: url("../image/emptystar.png");
}

.star,
.half-star,
.empty-star {
    width: 15px;
    height: 15px;
    background-size: 15px 15px;
    background-repeat: no-repeat;
}

.strategy-number h2 {
    font-size: 1.8rem;
}

.strategy-max {
    font-size: 0.9rem;
}

.strategy-buttons {
    position: absolute;
    bottom: 0px;
    width: 100%;
    border-radius: 0px;
    margin: 0 -10px;

}

.btn-square {
    border-radius: 0px;
    font-size: 16px;
}

.btn-square:disabled:hover {
    color: #6c757d;
    background-color: transparent;
}

.footer-menu ul {
    padding-inline-start: 0px;
}

.footer-menu ul li {
    display: inline-block;
    margin: 10px;
}

.footer-menu ul li a {
    color: white;
    font-weight: 80;
}

.index-text {
    color: #0D1B46;
    font-style: initial;
    text-align: center;
    font-weight: 300;
}

.borderr {
    border-right: solid;
    border-right-color: #EEEEEE;
    border-right-width: 1px;
}

@media (max-width:768px){
    .borderr{
        border:none;
    }
}

.borderb {
    border-bottom-style: solid;
    border-bottom-color: #EEEEEE;
    border-bottom-width: 1px;
}

.userphoto-s {
    width: 45px;
    height: 45px;
    background-color: #EEEEEE;
}

.bar,
.bar-active {
    border-radius: 3px;
    height: 7px;
}

.bar {
    width: 100%;
    background-color: #EEEEEE;
}

.bar-active {
    background-color: #A1B0C6;
}

.btn-messageboard {
    border: #64CCC9 1px solid;
    background-color: #FFF;
    color: #64CCC9;
    border-radius: 5px;
}

.btn-messageboard.active {
    background-color: #64CCC9;
    color: #FFF;
}

.btn-messageboard:hover {
    background-color: rgba(101, 188, 191, 0.61);
}

input {
    margin:10px 0;
}

.commentbox h6 {
    word-wrap:break-word;
}

.navbar-searchbar {
    background-color: #F7F6F6;
    height: 55px;
    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.19);
}




.qsquare {
    background-color: #64CCC9;
    color: white;
    border: 1px solid transparent;
    border-radius: .25rem;
    text-align: center;
    padding: 3px 10px;
    letter-spacing:1px;
    font-weight: 600;
  }


.btn-normal {
    background-color: #64CCC9;
    color: white;
    padding: 0 15px;
}

.qsquare:hover {
    color:white;
    box-shadow: 3px 4px 6px rgba(0, 0, 0, 0.19);
}


.btn-normal:hover {
    color:white;
    box-shadow: 3px 4px 6px rgba(0, 0, 0, 0.19);
}

.btn.active{
    box-shadow: none;
}

.btn-normal:active,
.btn-normal.active{
    color: white;
    background-color: #46A7B1;
}
.btn-normal.disabled,
.btn-normal:disabled{
    color: white;
    background-color: #9FCCD1;
}

.btn-pink {
    background-color:#FF8088;
    color:white;
}

.btn-pink:hover {
    color:white;
    box-shadow: 3px 4px 6px rgba(0, 0, 0, 0.19);
}

.btn-pink:active,
.btn-pink.active{
    color: white;
    background-color: #E2525F;
}
.btn-pink.disabled,
.btn-pink:disabled{
    color: white;
    background-color: #FFBBC1;
}

.commentcontent {
    margin-top: 5px;
    line-height: 1rem;
    border-top: none;
    border-right: none;
    border-left: none;
    border-radius: 0!important;
    padding: 5px 0!important;
}

.commentcontent:focus {
    box-shadow:none;
    border-color:inherit;
}

.searchcontent {
    font-size: 0.9rem;
}

@media (min-width: 576px){
    .searchcontent{
        font-size: inherit;
    } ;
}

.searchselectbar {
    background-color: white;
    z-index: 35;
    width:100%
}
.searchselectitem{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    width: 25%;
    padding-bottom: 10px;
}
.searchselectitem:hover,.searchselectitem.active{
    font-weight: 600;
}

.searchselectitem.active::before{
    background-color: #f8777d;
    display: block;
    position: absolute;
    bottom:0;
    height: 3px;
    width: 20%;
    content: "";
}

.searchselectitem:not(.active):hover::before{
    background-color: #FFBBC1;
    display: block;
    position: absolute;
    bottom:0;
    height: 3px;
    width: 20%;
    content: "";
}
.searchtable thead {
    font-weight: 600;
    color:#A1B0C6;
}
.searchtable {
    text-align: center;
    border-collapse:separate;
    border-spacing: 0 8px;
}
.searchtable tr {
    background-color: white;
}

.searchtable th,
.searchtable td{
    padding: 3px;
}

.searchtable tr.strategydetail.active {
    display: table-row;
}

.searchtable tbody tr:not(.strategydetail):hover,
.searchtable tbody tr.active:not(.strategydetail) {
    box-shadow: 3px 4px 6px rgba(0, 0, 0, 0.19);
}
#searchorder {
    width:100vw;
}
#orderby {
    width: 100%;
    height: 35px;
    margin:10px 0;
}

.searchselectitemlist {
    margin: auto;
    width: 80vw;
}

.searchtable th {
    position: sticky;
    top:0px;
    background-color: white;
    z-index: 34;
}
.strategydetail {
    text-align: start;
}
/* 手機畫面 */
@media (min-width: 576px){
    .searchtable th:nth-child(1) {
        min-width: 180px;
    }

    #searchorder {
        width: calc(100% - 320px);
        order: 13;
    }

    #orderby {
        width: 200px;
        float: right;
    }

    .searchselectitem {
        padding-bottom: 0;
        cursor: pointer;
    }

    .searchselectitem,.searchselectitem.active::before,.searchselectitem:not(.active):hover::before{
        width: 80px;
    }
    
    .searchselectitemlist {
        width: 320px;
    }
}

@media (max-width: 768px){
    .searchtable th:nth-child(3),
    .searchtable th:nth-child(5),
    .searchtable th:nth-child(6),
    .searchtable th:nth-child(7),
    .searchlist td:nth-child(3),
    .searchlist td:nth-child(5),
    .searchlist td:nth-child(6),
    .searchlist td:nth-child(7){
        display: none;
    }
}

.subscribeblock {
    position: fixed;
    right: 0;
    top: 100px;
    z-index: 1000;
}

@media (max-width:576px){
    .subscribeblock {
        bottom: 60px;
        top:auto;
    }
}

.searchresult {
    display: none;
}
.searchresult.active {
    display: block;
}

.information_form {
    opacity: 0;
    width: 100%;
    height: 0;
}
.information_form.active{
    opacity: 100;
    height: auto;
}


.banner {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 0;
    padding-top: 13.86%;
    display: block;
    opacity: 100;
    transition: opacity ease-out 500ms;
}

.banner.imactive {
    opacity: 0;
    padding-top: 0!important;
}

.donatebanner {
    background-image: url('/static/image/strategy/Donate_Banner_lg.jpg');
}

.strategybanner {   
    background-image: url('/static/image/strategy/Strategy_Banner_xl.jpg');

}

@media (max-width: 1200px){
    .strategybanner {   
        background-image: url('/static/image/strategy/Strategy_Banner_md.jpg');
    }

    .donatebanner {
        background-image: url('/static/image/strategy/Donate_Banner_md.jpg');
    }
    .banner {   
        padding-top: 23.19%;
    }
}
@media (max-width: 576px){
    .strategybanner {   
        background-image: url('/static/image/strategy/Strategy_Banner_s.jpg');
    }

    .donatebanner {
        background-image: url('/static/image/strategy/Donate_Banner_s.jpg');
    }
    .banner {   
        padding-top: 54.61%;
    }
}

.Yesicon {
    width: 15px;
    height: 15px;
    background: url('/static/image/all/icons/Yes.png');
    display: inline-block;
}


.Noicon {
    width: 15px;
    height: 15px;
    background: url('/static/image/all/icons/No.png');
    display: inline-block;
}