@charset "utf-8";
/* CSS Document */

body {
    font-family: "Noto Sans TC", "Roboto", "華康中黑體", "微軟正黑體", "新細明體", "標楷體", "Adobe 黑体 Std R", Arial, sans-serif;
    background: url(../image/bg.jpg) center center no-repeat fixed #232529;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media (max-width: 992px) { /*平板手機*/
    body {
        font-family: "Noto Sans TC", "Roboto", "華康中黑體", "微軟正黑體", "新細明體", "標楷體", "Adobe 黑体 Std R", Arial, sans-serif;
        background: url(../image/mo_bg.jpg) center center no-repeat fixed #232529;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

        body:after { /*修正iphone背景圖顯示問題*/
            content: "";
            position: fixed; /* stretch a fixed position to the whole screen */
            top: 0;
            height: 100vh; /* fix for mobile browser address bar appearing disappearing */
            left: 0;
            right: 0;
            z-index: -1; /* needed to keep in the background */
            background: url(../image/mo_bg.jpg) center center #232529;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
}



/*section_01*/
.section_01 {
    position: relative;
    padding-top: 0px;
    padding-bottom: 0px;
}

.section_01_a {
    position: absolute;
    margin: 280px 180px 0 220px;
    width: 170px;
    text-align: center;
    z-index: 999;
}

.section_01_b {
    position: relative;
    margin: 0px auto 0px auto;
    text-align: center;
    z-index: 1;
}

@media (max-width: 1024px) { /*平板,手機*/
    .section_01_a {
        margin: 25% 0 0 15%;
        width: 32%;
    }

        .section_01_a img {
            max-width: 60%;
        }

    .section_01_b {
        margin: 0px;
    }
}

@media (max-width: 992px) { /*平板,手機*/
    .section_01_a {
        margin: 28% 0 0 46%;
        width: 32%;
    }

        .section_01_a img {
            max-width: 60%;
        }

    .section_01_b {
        margin: 0px;
    }
}

@media (max-width: 860px) { /*平板,手機*/
    .section_01_a {
        margin: 26% 0 0 9%;
        width: 35%;
    }

        .section_01_a img {
            max-width: 60%;
        }

    .section_01_b {
        margin: 0px;
    }
}


@media (max-width: 767px) { /*平板,手機*/
    .section_01_a {
        margin: 58% 0 0 35%;
        width: 33%;
    }

        .section_01_a img {
            max-width: 100%;
        }

    .section_01_b {
        margin: 0px;
    }
}



.section_01 h1 {
    color: #333;
}

.section_01_i {
    color: #333;
}

    .section_01_i p a {
        color: #333;
    }
/*.section_01_top{
	background-color:#000;
	
	}*/

/*=====================================*/

/*點選向下滑動的箭頭*/
/*.header_arrow{
	text-align: center;
	padding:2rem 0; 
	
}
.header_arrow a span {
	position:relative;
	width:56px;
	height: 50px;
	display: inline-block;
	background: url(../image/arrow.gif) no-repeat 0px 0px;
	vertical-align: middle;
}*/
.section_02 {
    position: relative;
    clear: both;
    margin: 0px 0;
}

@media (max-width: 991px) {
    .outside_padding {
        padding-left: 25px;
        padding-right: 25px;
    }
}
/*上線*/
.section_02 h1 {
    margin-bottom: 0px;
    line-height: 25px;
}

    .section_02 h1.topline:before, .section_02 h1.topline-normal:before {
        margin-top: -20px;
    }

.topline:before {
    display: block;
    content: "";
    background: #000;
    width: 370px;
    height: 2px;
    margin-top: 13px;
}

.topline-normal:before {
    display: block;
    content: "";
    background: #000;
    width: 370px;
    height: 1px;
    margin-top: 13px;
}

@media (max-width: 991px) {
    .topline:before {
        width: 250px;
    }

    .topline-normal:before {
        width: 250px;
    }
}

.section_02 h1.topline_01:after {
    margin-top: -2px;
}

.topline_01:after {
    display: block;
    content: "";
    background: #000;
    width: 80px;
    height: 5px;
    margin-top: 13px;
}

.section_02 h2 {
    text-align: left;
    font-family: "Noto Sans TC", "Roboto", "華康中黑體", "微軟正黑體", "新細明體", "標楷體", "Adobe 黑体 Std R", Arial, sans-serif;
    font-size: 1.125em;
    font-weight: bold;
    line-height: 28px;
    color: #000000;
    letter-spacing: 2px;
    margin: 0px 0 18px 0;
}

.section_02 h3 {
    text-align: left;
    font-family: "Noto Sans TC", "Roboto", "華康中黑體", "微軟正黑體", "新細明體", "標楷體", "Adobe 黑体 Std R", Arial, sans-serif;
    font-size: 1.125em;
    font-weight: 600;
    line-height: 28px;
    color: #000000;
    letter-spacing: 2px;
    margin: 0px 0 10px 0;
}

.section_02 p {
    text-align: left;
    font-family: "Noto Sans TC", "Roboto", "華康中黑體", "微軟正黑體", "新細明體", "標楷體", "Adobe 黑体 Std R", Arial, sans-serif;
    font-size: 1em;
    font-weight: normal;
    color: #000000;
    line-height: 25px;
    letter-spacing: 1px;
    text-align: justify;
    text-justify: distribute;
    margin-bottom: 30px;
}

.section_02_bg {
    background: url(../image/index-bg.jpg) center top repeat-y;
}

@media (min-width: 1024px) {
    .p_l_r {
        padding: 1.5rem 6.5rem 1.5rem 7rem;
    }

    .p_l_r_00 {
        padding: 1.5rem 2rem 1.5rem 5rem;
    }

    .p_l_r_01 {
        padding: 1.5rem 5rem 1.5rem 4.5rem;
    }

    .p_l_r_02 {
        padding: 1.5rem 5.8rem 1.5rem 5.8rem;
    }

    .p_l_r_03 {
        padding: 0rem 0rem 0rem 6.7rem;
    }

    .p_l_r_04 {
        padding: 1.5rem 5.8rem 5rem 5.8rem;
    }

    .p_l_r_05 {
        padding: 1.5rem 6rem 1.5rem 7rem;
    }

    .p_l_r_06 {
        padding: 0rem 6.7rem 0rem 6.7rem;
    }
}

.p_l_r_0 {
    padding: 5px 0px;
}

.p_t_b_l_r_0 {
    padding: 0px;
}

.p_t_b {
    padding-top: 30px;
    padding-bottom: 30px;
}

.p_l_0 {
    padding-left: 0px;
}

.p_r_0 {
    padding-right: 0px;
}

@media (max-width: 767px) {
    .p_t_b {
        padding-top: 15px;
        padding-bottom: 30px;
    }

    .p_b_30 {
        padding-bottom: 30px;
    }
}

.p_t_50 {
    padding-top: 30px;
}

.m_b_20 {
    margin-bottom: 20px;
}

/*排序*/
@media (min-width: 1024px) {
    .article {
        display: -webkit-inline-flex;
        display: inline-flex;
        -webkit-flex-direction: row;
        flex-direction: row;
        padding-top: 0px;
        padding-bottom: 50px;
    }

        .article > div:nth-of-type(1) {
            -webkit-order: 2;
        }

        .article > div:nth-of-type(2) {
            -webkit-order: 1;
        }

        .article > div:nth-of-type(1) {
            order: 2;
        }

        .article > div:nth-of-type(2) {
            order: 1;
        }
}

/*捐款按鈕*/
button.icon_01 {
    background: url(../image/section_2_03.png) no-repeat center center;
    background-size: 100%;
    border: none;
    outline: none
}

    button.icon_01:hover {
        background: url(../image/section_2a_03.png) no-repeat center center;
        background-size: 100%;
        border: none;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

button.icon_02 {
    background: url(../image/section_2_04.png) no-repeat center center;
    background-size: 100%;
    border: none;
    outline: none
}

    button.icon_02:hover {
        background: url(../image/section_2a_04.png) no-repeat center center;
        background-size: 100%;
        border: none;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

button.icon_03 {
    background: url(../image/section_2_05.png) no-repeat center center;
    background-size: 100%;
    border: none;
    outline: none
}

    button.icon_03:hover {
        background: url(../image/section_2a_05.png) no-repeat center center;
        background-size: 100%;
        border: none;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

/*=======================*/

.section_02_padding {
    padding: 0px;
}

    .section_02_padding > div > h1 {
        font-family: "Noto Sans TC", "Roboto", "華康中黑體", "微軟正黑體", "新細明體", "標楷體", "Adobe 黑体 Std R", Arial, sans-serif;
        font-size: 1.5em;
        color: #FFF;
        line-height: 30px;
        text-align: center;
        padding: 20px 0 10px 0;
    }

    .section_02_padding > div > p {
        font-family: "Noto Sans TC", "Roboto", "華康中黑體", "微軟正黑體", "新細明體", "標楷體", "Adobe 黑体 Std R", Arial, sans-serif;
        font-size: 1.2em;
        color: #FFF;
        line-height: 25px;
        text-align: center;
    }


/*=========================*/
.section_02_video {
    position: relative;
    clear: both;
    margin: 0px 0;
}

/*=====================================*/

/*透明button*/
.btn-default {
    color: #9eabbe;
    background-color: transparent;
    border: none;
    outline: none
}

    .btn-default:hover,
    .btn-default:focus,
    .btn-default.focus,
    .btn-default:active,
    .btn-default.active,
    .open > .dropdown-toggle.btn-default {
        color: #ffffff;
        background-color: transparent;
        border: none;
        outline: none;
    }

    .btn-default:active,
    .btn-default.active,
    .open > .dropdown-toggle.btn-default {
        background-image: none;
        border: none;
        outline: none
    }

    .btn-default.disabled,
    .btn-default[disabled],
    fieldset[disabled] .btn-default,
    .btn-default.disabled:hover,
    .btn-default[disabled]:hover,
    fieldset[disabled] .btn-default:hover,
    .btn-default.disabled:focus,
    .btn-default[disabled]:focus,
    fieldset[disabled] .btn-default:focus,
    .btn-default.disabled.focus,
    .btn-default[disabled].focus,
    fieldset[disabled] .btn-default.focus,
    .btn-default.disabled:active,
    .btn-default[disabled]:active,
    fieldset[disabled] .btn-default:active,
    .btn-default.disabled.active,
    .btn-default[disabled].active,
    fieldset[disabled] .btn-default.active {
        background-color: transparent;
        border: none;
        outline: none
    }

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
    outline: none;
}

.btn:active,
.btn.active {
    outline: 0;
    background-image: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/*=====================================*/
.section_04 {
    position: relative;
    clear: both;
    margin: 0px 0 0px 0;
}

.section_04_a {
    margin: 0px auto;
    text-align: center;
}

.section_04 img {
    padding: 0px;
}

.section_04_bg {
    clear: both;
    background-color: #161c2a;
    text-align: center;
    padding: 8px 0;
}

.section_04_padding {
    padding: 0 50px;
}

.section_04_margin {
    margin-bottom: 20px;
}

@media (max-width: 992px) { /*大平板*/
    .section_04_padding {
        padding: 0 10px;
    }

    .section_04_margin {
        margin-bottom: 10px;
        padding: 0px;
    }
}

@media (max-width: 767px) {
    .section_04_padding {
        padding: 0 0px;
    }

    .section_04_margin {
        margin-bottom: 5px;
        padding: 0px;
    }
}

.img-size > button > img {
    vertical-align: middle;
    width: 100%;
}
/*上粗線*/
.section_04 h1 {
    margin: 0px 0 30px 0;
}

    .section_04 h1.topline_02:after {
        margin-top: -2px;
    }

.topline_02:after {
    display: block;
    content: "";
    background: #000;
    width: 80px;
    height: 5px;
    /*margin:13px auto 0px auto;*/
}

.section_04 h2 {
    text-align: left;
    font-family: "Noto Sans TC", "Roboto", "華康中黑體", "微軟正黑體", "新細明體", "標楷體", "Adobe 黑体 Std R", Arial, sans-serif;
    font-size: 1.8em;
    font-weight: bold;
    line-height: 40px;
    color: #000000;
    letter-spacing: 2px;
    margin: 10px 0 25px 0;
}

.section_04 h3 {
    text-align: left;
    font-family: "Noto Sans TC", "Roboto", "華康中黑體", "微軟正黑體", "新細明體", "標楷體", "Adobe 黑体 Std R", Arial, sans-serif;
    font-size: 1.125em;
    font-weight: 600;
    line-height: 28px;
    color: #000000;
    letter-spacing: 2px;
    margin: 0px 0 10px 0;
}

.section_04 p {
    text-align: left;
    font-family: "Noto Sans TC", "Roboto", "華康中黑體", "微軟正黑體", "新細明體", "標楷體", "Adobe 黑体 Std R", Arial, sans-serif;
    font-size: 1em;
    font-weight: normal;
    color: #000000;
    line-height: 23px;
    letter-spacing: 1px;
}

@media (max-width: 767px) {
    .section_04 h1 {
        margin: 0px 0 20px 0;
    }

    .topline_02:after {
        margin: 13px 0 0 0;
    }

    .section_04 h2 {
        text-align: left;
    }

    .section_04 p {
        text-align: left;
    }
}

/*=====================================*/

/*footer*/

#subfooter {
    position: relative;
    background: #25272a;
    padding-top: 40px;
    padding-bottom: 10px;
    color: #FFF;
    clear: both;
}

.footer_01_a {
    margin: 0px auto;
    text-align: center;
    padding: 5px 0px 15px 0px;
}

.footer_01_b {
    margin: 0px auto;
    text-align: center;
    padding: 40px 0px 5px 0px;
    line-height: 28px;
}

.footer_01_bg {
    position: absolute;
    /*height:198px*/
}

.footer_01_fb {
    position: relative;
    margin-top: 55px;
    margin-left: 40px;
}
/*.footer_01_line{
	position:relative;
	margin-top:70px;
	margin-left:0px;
	}*/

@media (max-width: 992px) { /*平板*/
    .footer_01_b {
        padding: 30px 0px 15px 0px;
        line-height: 28px;
    }

    .footer_01_fb {
        position: relative;
        margin-top: 45px;
        margin-left: 30px;
    }

        .footer_01_fb img {
            max-width: 60%;
        }

    /*.footer_01_line{
	position:relative;
	margin-top:50px;
	margin-left:0px;
	}*/

}

@media (max-width: 767px) {
    .footer_01_bg img {
        max-width: 80%;
    }

    .footer_01_b {
        padding: 80px 0px 15px 0px;
        line-height: 28px;
    }

    .footer_01_fb {
        position: relative;
        margin-top: 60px;
        margin-left: 60px;
    }

        .footer_01_fb img {
            max-width: 80%;
        }

    /*.footer_01_line{
	position:relative;
	margin-top:70px;
	margin-left:20px;
	}
	.footer_01_line img{
		max-width:80%;
		}*/
}

@media (max-width: 689px) {
    .footer_01_bg img {
        max-width: 100%;
    }

    .footer_01_b {
        padding: 40px 0px 15px 0px;
        line-height: 22px;
    }

    .footer_01_fb {
        position: relative;
        margin-top: 55px;
        margin-left: 42px;
    }

        .footer_01_fb img {
            max-width: 75%;
        }

    /*.footer_01_line{
	position:relative;
	margin-top:85px;
	margin-left:60px;
	}
	.footer_01_line img{
		max-width:80%;
		}*/
}

@media (max-width: 480px) { /*手機*/
    .footer_01_bg img {
        max-width: 100%;
    }

    .footer_01_b {
        padding: 40px 0px 15px 0px;
        line-height: 22px;
    }

    .footer_01_fb {
        position: relative;
        margin-top: 42px;
        margin-left: 10px;
    }

        .footer_01_fb img {
            max-width: 60%;
        }

    /*.footer_01_line{
	position:relative;
	margin-top:45px;
	margin-left:25px;
	}
	.footer_01_line img{
		max-width:90%;
		}*/
}

.footer_01_c {
    position: relative;
    margin: 0px auto;
    text-align: center;
    z-index: 5;
}

/*=====================================*/
/*footer-copyright*/

#footer {
    color: #282e3b;
    padding-top: 10px;
    padding-bottom: 5px;
    background: #fff;
    clear: both;
}

    #footer a {
        color: #282e3b;
    }

/*=====================================*/


@media (max-width: 992px) { /*平版*/
    .navbar-custom.affix { /*選單條背景色*/
        background-color: rgba(7,22,45,.75);
        padding: 70px 0 0 0;
    }
}

@media (max-width: 767px) { /*手機*/

    .navbar-custom.affix { /*選單條背景色*/
        background-color: rgba(7,22,45,.75);
        padding: 0px 0 0 0;
    }
}

@media (min-width: 992px) { /*pc版*/
    .navbar-custom.affix {
        background-color: rgba(7,22,45,.75);
        /*border-bottom:1px solid #e9e9e9;*/
        padding: 70px 0 0 0;
    }

        .navbar-custom.affix .navbar-brand {
            font-size: 1.5em
        }
}


.navbar-custom .navbar-toggle {
    position: relative;
    float: right;
    margin-right: 15px;
    padding: 9px 10px;
    margin-top: 8px;
    margin-bottom: 8px;
    background-color: #dddddd;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}

    .navbar-custom .navbar-toggle:hover, .navbar-custom .navbar-toggle:focus {
        background-color: #dddddd
    }



.navbar-custom {
    /*background-color:#a6a6a6;*/
    background-color: rgba(128,101,57,0.3);
    border-color: transparent
}

@media (min-width: 992px) {
    .navbar-custom {
        /*background-color:transparent;*/
        background-color: rgba(128,101,57,0.1);
        padding: 0px 0;
        -webkit-transition: padding 0.3s;
        -moz-transition: padding 0.3s;
        transition: padding 0.3s;
        border: none;
    }

        .navbar-custom .navbar-brand {
            font-size: 2em;
            -webkit-transition: all 0.3s;
            -moz-transition: all 0.3s;
            transition: all 0.3s
        }

        .navbar-custom .navbar-nav > .active > a {
            border-radius: 3px
        }
}

.navbar-custom .nav li a {
    font-family: "微軟正黑體", "新細明體", "標楷體", Arial;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    color: #fff;
    font-size: 16px;
}

    .navbar-custom .nav li a:hover, .navbar-custom .nav li a:focus {
        color: #d7d2ca;
        outline: none
    }

@media (max-width: 991px) { /*手機*/
    .navbar-custom .nav li a {
        color: #fff;
    }

        .navbar-custom .nav li a:hover, .navbar-custom .nav li a:focus {
            color: #fff;
        }
}


.navbar-custom .navbar-nav > .active > a {
    font-family: "Noto Sans TC", "Roboto", "華康中黑體", "微軟正黑體", "新細明體", "標楷體", "Adobe 黑体 Std R", Arial, sans-serif;
    border-radius: 0;
    color: #fff;
    font-weight: bold;
    background-color: transparent; /*執行到選單區塊的底色*/
}

    .navbar-custom .navbar-nav > .active > a:hover, .navbar-custom .navbar-nav > .active > a:focus {
        font-family: "Noto Sans TC", "Roboto", "華康中黑體", "微軟正黑體", "新細明體", "標楷體", "Adobe 黑体 Std R", Arial, sans-serif;
        color: #fff;
        background-color: transparent; /*滑過去選單區塊的底色*/
    }

.navbar-fixed-top {
    top: -80px;
}

@media (min-width: 767px) { /*平版*/
    .navbar-fixed-top {
        top: -70px;
    }
}

@media (max-width: 767px) { /*平版*/
    .affix-top {
        background-color: rgba(7,22,45,.75);
    }

    .affix {
        top: 0px;
        background-color: rgba(7,22,45,.75);
    }
}

/*文字設定*/
div.text-red {
    color: #ff3b3b;
}

div.text-size-i {
    font-size: 16px;
    font-weight: normal;
    padding-top: 0px;
}

div.text-size-02 {
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 1.5px;
    line-height: 28px;
}

.width-5 {
    width: 3%;
    float: left;
    padding-left:10px;
}

.width-95 {
    width: 95%;
    float: left;
}

@media (max-width: 991px) {
    .width-5 {
        width: 4%;
    }

    .width-95 {
        width: 96%;
        padding-left: 10px;
    }
}

h2.title {
    font-size: 26px;
    margin-bottom: 30px;
}

.m-t-15 {
    margin-top: 15px;
}

.m-b-3 {
    margin-bottom: 3px;
}

.m-b-10 {
    margin-bottom: 20px;
}

@media (min-width: 1024px) {
    p.padding-r {
        padding-right: 5.3rem;
    }

    .height-text {
        height: auto;
    }

    .height-text-01 {
        height: 340px;
    }

    .height-text-02 {
        height: 260px;
    }

    .padding_r {
        padding-left: 0px;
        padding-right: 5px;
    }

    .padding_l {
        padding-left: 5px;
        padding-right: 0px;
    }

    .padding_r_01 {
        padding-left: 15px;
        padding-right: 2px;
    }

    .padding_l_01 {
        padding-left: 2px;
        padding-right: 15px;
    }

    .m-t-80 {
        margin-top: 80px;
    }
}

@media (max-width: 1023px) { /*手機版使用*/
    h2.title {
        font-size: 24px;
        margin-bottom: 30px;
        line-height: 40px;
    }

    .padding_r {
        padding-left: 0px;
        padding-right: 0px;
    }

    .padding_l {
        padding-left: 0px;
        padding-right: 0px;
    }

    .padding_r_01 {
        padding-left: 15px;
        padding-right: 15px;
    }

    .padding_l_01 {
        padding-left: 15px;
        padding-right: 15px;
    }
}
/*table*/

.table-bordered {
    border: 1px solid #363636;
}

    .table-bordered > tbody > tr > td {
        border: 1px solid #363636;
        vertical-align: middle;
        padding: 15px;
    }

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #d5e5eb;
}

.table-striped > tbody > tr:nth-of-type(even) {
    background-color: #fff;
}


.table-width-01 {
    width: 22%;
}

.table-width-02 {
    width: 78%;
}

@media (max-width: 991px) {
    .table-width-01 {
        width: 35%;
    }

    .table-width-02 {
        width: 65%;
    }
}