@charset "UTF-8";




/************************************* 共用設定 *************************************/

body {
    background-color: #f2f2f2;
    text-align: center;

    font-family: 'Noto Sans TC', sans-serif;
    /*font-family: 'Roboto', sans-serif;*/
    font-weight: 400;
    color: #3F3F3F;
    font-size: 15px;
    line-height: 25px;

}

a,
a:hover,
a:active,
a:visited,
a:focus {
    text-decoration: none;
}


a:hover {
    opacity: 0.8;
}

.myBtn {
    display: inline-block;
    background-color: #0870E5;
    color: #fff;
    font-size: 15px;
    line-height: 1.8;
    padding: 8px 24px;
    border-radius: 999px;
    font-weight: bold;
}

.myBtn:after {
    content: url(../img/buttonRIghtArrow.svg);
    float: right;
    margin-left: 7px;
}

.donateBtn {
    background-color: #0870E5 !important;
    margin-bottom: 15px;
}

.donateBtn:after {
    content: url(../img/love.svg);
    margin-top: 4px;
}




/* loading */

.loading {
    background: #fff;
    width: 100%;
    height: 100%;
    z-index: 100;
    position: fixed;
    top: 0;
    left: 0;

}


/* titleSet */

.titleSet {
    font-weight: 500;
    margin-bottom: 15px;
}

.titleSet .en {
    font-size: 16px;
    line-height: 30px;
    font-family: 'roboto', sans-serif;
    margin-bottom: 0px;
}

.titleSet .tw {
    font-size: 25px;
    line-height: 35px;
    margin-bottom: 0px;
}

.underTitle {
    text-align: left;
    font-size: 17px;
    line-height: 33px;
    margin-bottom: 15px;
}

/* titleSet2 */
.titleSet2 {
    margin-bottom: 15px;
}

.titleSet2 h5 {
    font-size: 15px;
    line-height: 21px;
    font-weight: bold;
    margin-bottom: 5px;
}

.titleSet2 h5 span {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 21px;
    padding-right: 5px;
    font-weight: 500;
}

.titleSet2 h4 {
    font-size: 21px;
    line-height: 30px;
    font-weight: 500;
    margin-bottom: 0px;
}

.titleSet2 p.small {
    font-size: 11px;
    font-weight: normal;
}

.mb0 {
    margin-bottom: 0px;
}

.mb5 {
    margin-bottom: 5px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb15 {
    margin-bottom: 15px;
}

.mb30 {
    margin-bottom: 30px;
}

.fwBold{
    font-weight: bold;
}

.fwBold500{
    font-weight: bold;
}



/************************************* form *************************************/


.custom-control-label::before,
.custom-control-label::after {
    top: 0.3rem;
    width: 1.25rem;
    height: 1.25rem;
}

.form-control {
    color: #3F3F3F;
    border-radius:0px;
    background-color: #f2f2f2;
    border:none;
    border-bottom: 3px solid #FFAD31;
}

.search .form-control{
    border-color: #0870E5;
}


.food .form-control {
    border-color: #DC3D51;
}

.cultureAndArts .form-control {
    border-color: #00ADB9;
}

.charity .form-control {
    border-color: #CFA78C;
}

.impact .form-control {
    border-color: #3C9584;
}

.csr .form-control {
    border-color: #E2BE00;
}



.form-control:focus {
  background-color: #f2f2f2;
}


/************************************* modal裡面的留言的星號的顏色 *************************************/

.starColor{
    color: #FFAD31;
}

.search .starColor{
    color: #0870E5;
}


.food .starColor {
    color: #DC3D51;
}

.cultureAndArts .starColor {
    color: #00ADB9;
}

.charity .starColor {
    color: #CFA78C;
}

.impact .starColor {
    color: #3C9584;
}

.csr .starColor {
    color: #E2BE00;
}




/************************************* modal *************************************/
.modal-backdrop.show {
   background-color: #000;
   opacity: 0.8;
}
/*為了X按鈕，要縮進去一點*/
@media (max-width: 991px) {
    .modal .modal-dialog {
        margin-top: 30px;
        margin-left: 20px;
        margin-right: 20px;
    }
}

.modal .modal-dialog .modal-content {
    border-radius: 0px;
}

.myClose {
    float: right;
    margin-bottom: 15px;
    z-index: 1;
    position: absolute;
    right: -18px;
    top: -18px;
    cursor: pointer;
}

.myClose:hover {
    opacity: 0.9;
}


#edm .myBtn{
    background-color: #0870E5 !important;
}

#edm input{
    border-color: #0870E5 !important;
}



/************************************* footer EmailArea-form *************************************/


.footer .EmailArea .form-control {
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    border: 1px solid #fff;
    padding: 1.5rem 1.2rem;
    border: none;
}

.footer .EmailArea select .form-control {
    background-color: #fff;
}

.footer .EmailArea .input-group-append .btn {

    border-bottom-right-radius: 999px;
    border-top-right-radius: 999px;
    background-color: #0870E5;
    color: #fff;
    cursor: pointer;
    border: 1px solid #0870E5;
    padding-right: 1.2rem;
    padding-left: 1.2rem;
    border: 2px solid #fff;
}

.footer .EmailArea .input-group-append .btn:hover {
    opacity: 0.8;
}


/************************************* color *************************************/


.Culture_and_Arts_color {
    color: #00ADB9;
}

.Culture_and_Arts_colorBg {
    background-color: #00ADB9 !important;
}

.Education_color {
    color: #FFAD31;
}

.Education_colorBg {
    background-color: #FFAD31 !important;
}

.Charity_color {
    color: #CFA78C;
}

.Charity_colorBg {
    background-color: #CFA78C !important;
}

.Food_color {
    color: #DC3D51;
}

.Food_colorBg {
    background-color: #DC3D51 !important;
}

.CSR_color {
    color: #FBE414;
}

.CSR_colorBg {
    background-color: #FBE414 !important;
}

.impact_color {
    color: #3C9584;
}

.impact_colorBg {
    background-color: #3C9584 !important;
}

.Green_02_color {
    color: #417505;
}

.Gray_02_color {
    color: #BBBBBB;
}

.Gray_01_color {
    color: #F2F2F2;
}

.Dark_Gray_color {
    color: #3F3F3F;
}

.Carrefour_Blue_03_color {
    color: #0870E5;
}


.Carrefour_Blue_02_color {
    color: #004E9F;
}

.carrefour_blue_01_color {
    color: #103476;
}





/************************************* header *************************************/
.headerD {
    display: none;
}

.header {
    z-index: 100;
    position: fixed;
    width: 100%;
    border-top: 4px solid rgba(255, 255, 255, 0);
    height: 64px;
}

.header.bgWhite {
    background-color: #fff;
    border-color: #004E9F;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, .07));
}

.header a .logo {
    position: absolute;
    top: 11px;
    left: 15px;
    width: 128px;
    height: 38px;
    background-image: url(../img/logoWhite.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.header.bgWhite a .logo {
    background-image: url(../img/logoColor.svg);
}

.header a:hover .logo {
    opacity: 0.8;
}

.header .burger {
    position: absolute;
    top: 12px;
    right: 15px;
    cursor: pointer;
}

.header .burger:hover {
    opacity: 0.8;
}

.header a .search {
    position: absolute;
    top: 19px;
    right: 66px;
    width: 22px;
    height: 22px;
    background-image: url(../img/searchWhite.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.header.bgWhite a .search {
    background-image: url(../img/search.svg);
}

.header a:hover .search {
    opacity: 0.8;
}

.header .navContainer {
    display: none;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    position: fixed;
    top: 64px;
    background-color: white;
    /*    padding-top: 8px;*/
}

.header .navContainer .navs .oneNav,
.header .navContainer .navs a .oneNav {
    padding-top: 20px;
    padding-bottom: 16px;
    border-bottom: 4px solid #fff;
    border-top: 1px #0870E5 solid;
    text-align: left;
}


/*
.header .navContainer .navs a:hover .oneNav.n1 {
    border-bottom: 4px solid #00ADB9;
}

.header .navContainer .navs a:hover .oneNav.n2 {
    border-bottom: 4px solid #FFAD31;
}

.header .navContainer .navs a:hover .oneNav.n3 {
    border-bottom: 4px solid #CFA78C;
}

.header .navContainer .navs a:hover .oneNav.n4 {
    border-bottom: 4px solid #DC3D51;
}

.header .navContainer .navs a:hover .oneNav.n5 {
    border-bottom: 4px solid #E2BE00;
}

.header .navContainer .navs a:hover .oneNav.n6 {
    border-bottom: 4px solid #3C9584;
}
*/

.header .navContainer .navs a .oneNav .tw {
    font-size: 15px;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 0px;
    color: #3F3F3F;
    margin-right: 10px;
}

.header .navContainer .navs a .oneNav .en {
    font-size: 13px;
    font-weight: normal;
    font-family: 'Roboto', sans-serif;
    display: inline-block;
    margin-bottom: 0px;
    color: #3F3F3F;
}

.header .navContainer .navs .oneNav .icons a {
    padding-right: 5px;
}


/************************************* footer *************************************/

.footer {
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: #103476;
    color: #fff;
}

.footer .container-fluid {
    max-width: 1400px;
}

.footer .container-fluid .logo {
    width: 189px;
    height: auto;
    margin-bottom: 15px;
}

.footer .container-fluid .icons {
    margin-bottom: 30px;
}

.footer .container-fluid .icons .littleBluesIcon {
    width: 33px;
    height: auto;
    margin: 0 5px;
}

.footer .container-fluid .lists {
    text-align: left;
    margin-bottom: 0px;
}

.footer .container-fluid .lists .oneList .ulTitle {
    padding-left: 0px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #F9F9F9;
    border-bottom: 1px solid #0870E5;
    padding-bottom: 10px;
    margin-bottom: 12px;
}

.footer .container-fluid .lists .oneList ul {
    padding-left: 0px;
}

.footer .container-fluid .lists .oneList ul li {
    list-style-type: none;
}

.footer .container-fluid .lists .oneList ul li,
.footer .container-fluid .lists .oneList ul li a {
    color: #F9F9F9;
    margin-bottom: 5px;
}


.footer .container-fluid .SDGArea {
    margin-bottom: 15px;
}

.footer .container-fluid .SDGArea .SDGTilte {
    padding-left: 0px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #F9F9F9;
    margin-bottom: 5px;

}

.footer .container-fluid .SDGArea .SDGIconList img {
    float: left;
    margin-right: 5px;
    margin-bottom: 5px;
}

.footer .container-fluid .SDGArea .SDGIconList img:last-child {
    margin-right: 0px;

}

.footer .container-fluid .EmailArea{
    margin-bottom: 15px;
}

.footer .container-fluid .EmailArea .EmailTItle {
    font-weight: bold;
    margin-bottom: 10px;
}

.footer .container-fluid .EmailArea .EmailInputGroup .form-control {
    font-size: 12px;
}

.footer .container-fluid .EmailArea .EmailInputGroup .input-group-append .btn {
    font-size: 12px;
}


.footerBottomText2{
    font-size: 12px;
    line-height: 1.6;
}
.footerBottomText2 a{
    color: #fff;
}


.footer .container-fluid .footerBottomText {
    font-size: 12px;
    margin-bottom: 0px;
}


.followMe {
    position: fixed;
    bottom: 10px;
    right: 10px;
    color: #0870E5;
    font-size: 12px;
    z-index: 10;
}

.followMe .oneFollowMe {
    margin-bottom: 10px;
    /*    cursor: pointer;*/
}

.followMe .oneFollowMe img {
    width: 44px;
    height: auto;
}

.followMe a:hover .oneFollowMe {
    opacity: 0.9;
    color: #0870E5;
}

.followMe .oneFollowMe p {
    margin-bottom: 0px;
}

.followMe .oneFollowMe.f2,
.followMe .oneFollowMe.f3 {
    display: none;
}



/************************************* searchBar *************************************/
.searchBar{
    position:fixed;
    width:100%;
    top:64px;
    z-index: 10;
     display: none;
}


.searchBar .form-control {
    border-color: #0870E5;
}

.searchBar .form-control.white {
    background-color: #fff;
    border: none;
}

.searchBar {
    background-color: #0870E5;
}

.searchBar .input-group {
    padding-top: 15px;
    padding-bottom: 15px;
}

.searchBar .form-control {
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    border: 1px solid #fff;
    padding: 1.5rem 1.2rem;
    border: none;
    background-color: #fff;
}

.searchBar .form-control::placeholder {
    color: #ccc;
    opacity: 1;
}

.searchBar .input-group-append .btn {
    border-bottom-right-radius: 999px;
    border-top-right-radius: 999px;
    background-color: #0870E5;
    color: #fff;
    cursor: pointer;
    border: 1px solid #0870E5;
    padding-right: 1.2rem;
    padding-left: 1.2rem;
    border: 2px solid #fff;
}

.searchBar .input-group-append .btn:after {
    content: url(../img/search/search.svg);
    float: right;
    margin-top:3px;
    margin-left: 7px;
}

.searchBar .input-group-append .btn:hover {
    opacity: 0.8;
}