@charset "UTF-8";
html{
    font-size: 16px;
    min-height: 100%;
    height: auto;
}
body
{
    font-size: 100%;
    min-height: 100%;
    height: auto;
    font-family: Arial,Helvetica,"\5FAE\8EDF\6B63\9ED1\9AD4",sans-serif;
	overflow-y: scroll;
	overflow-x: hidden;
}
header{
    min-height: 113px;
    height: auto;
	padding:10px 0;
    background-image: url(../images/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 10px 10%;
}
.h1-style{font-family: Microsoft JhengHei Arial Noto Sans TC;}
a,a:hover{text-decoration:none;}
.logo{
    margin-top: 20px;
}
.menu{
    position: fixed;
    display: block;
    z-index: 500;
    top: 15px;
    right: 15px;
    height: 50px;
    width: 70px;
    border: 1px solid rgb(204,58,65,0);
	background-color: rgb(255,255,255,0.5);
    /*border: 1px solid #eee;*/
}
.bar{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    display: block;
    margin: 0 auto;
    width: 62%;
    height: 3px;
    opacity: 1;
    background-color: rgb(204,58,65);
    transform:rotate(0deg);
    transition: all 0.5s;
    -moz-transition: all 0.5s;  /* Firefox 4 */
    -webkit-transition: all 0.5s;   /* Safari 和 Chrome */
    -o-transition: all 0.5s;    /* Opera */
}
.menu .bar-t{
    top:10.25px;
}
.menu .bar-m{
    opacity: 1;
    top:23.50px;
}
.menu .bar-b{
    top:36.75px;
}
.menu.active .bar-t,.menu.active .bar-b{
    top:22px;
}
/*ＮＡＶ按鈕的旋轉*/
.menu.active .bar-t{transform:rotate(45deg);}
.menu.active .bar-b{transform:rotate(-45deg);}
.menu.active .bar-m{opacity: 0;}
/*NAV內容*/
nav{
    z-index: 495 !important;
    pointer-events: none;
    position: fixed;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,1,0);
    opacity: 0.9;
    padding: 15px; 

    transition: all 0.5s;
    -moz-transition: all 0.5s;  /* Firefox 4 */
    -webkit-transition: all 0.5s;   /* Safari 和 Chrome */
    -o-transition: all 0.5s;    /* Opera */
}
nav.active{
    pointer-events: auto;
    background-color: rgba(0,0,1,0.9);
}
nav ul{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: block;
    margin:  auto;
    width: 100%;
    height: auto;
    transform:translateY(-50%);
    text-align: center;
}
nav ul li{
    padding:15px 0px; 
}
nav ul li a{
    position: relative;
    color: #FFF;
    font-size: 30px;
}
nav ul li a:hover{
    color: rgb(204,58,65);
}
nav ul li a:before{
    content: "";
    position: absolute;
    bottom: -5px;
    left: 0px;
    right: 0px;
    height: 2px;
    width: 0px;

    background-color: rgb(204,58,65);
    transition: all 0.5s;
    -moz-transition: all 0.5s;  /* Firefox 4 */
    -webkit-transition: all 0.5s;   /* Safari 和 Chrome */
    -o-transition: all 0.5s;    /* Opera */
}
nav ul li a:hover:before{
    width: 100%;
}
/*影片*/
#youtube{
    position:relative;
    padding-bottom:56.25%;
}
#youtube:before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255,255,255,0);
    z-index: 2;
}
#youtube a {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 6;
    color: #efefef;
}
#video1{
    position: absolute;width: 100%;height: 100%;z-index: 1;
}

/*部落格*/
#blog{background-color: #000;}
#blog .thumbnail{
    border: hidden;
    background-color: rgb(0,0,0);
	padding: 0px;
}
#blog .thumbnail .caption{
    color: #fff;
}
#blog .thumbnail .caption{
    padding: 15px 25px 15px 25px;
    line-height: 150%;
}
#blog .thumbnail .caption .img-label{
    margin-top: -70px;
}
/*部落格結束*/

/*TAB NAV*/
#tab-nav *{box-sizing: border-box;}
#tab-nav{
    background-image: url(../images/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color: #555;
    padding: 80px 0 45px 0; 
}
#tab-nav h2{
    position: relative;
    font-weight: 600;
    display: inline-block;
}
#tab-nav h2:before{
    content: "";
    position: absolute;
    bottom: -8px;
    height: 3px;
    width: 100%;
    background-color: #555;

}
#tab-nav h2 + p{
    margin-top: 15px;
}
#tab-nav .nav{
    margin-top: 35px;
}

#tab-nav .nav-pills li a{
    position: relative;
    background-color: rgba(0,0,0,0);
    color: #555;
    border: 1px solid #555;
    border-radius: 0px;
    margin-right: 15px;
    z-index: 1;
    display: block;
}
#tab-nav .nav-pills li a:before{
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background-color: rgba(0,0,1,2);
    transition: all 0.5s;
    -moz-transition: all 0.5s;  /* Firefox 4 */
    -webkit-transition: all 0.5s;   /* Safari 和 Chrome */
    -o-transition: all 0.5s;    /* Opera */
}
#tab-nav .nav-pills li a:hover{
    font-weight: 900;
    color: #fff;
}
#tab-nav .nav-pills li a:hover:before{
    width: 100%;
}
#tab-nav .nav-pills li:last-child a{
    margin-right: 0px;
}
#tab-nav .nav-pills li.active a{
    background-color: rgb(0,0,1);
    color: #FFF;
}
#tab-nav .tab-content{
    height: 666px;
    margin-top: 35px;
}
#tab-nav img{display: block;width: 100%;margin: 0 auto; padding:0px;}
.column{
    /*border:1px solid #eee;*/
    display: block;
    height: 100%;width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color:rgba(255, 255, 255, 0.7);
    padding: 25px 15px;
}
.c1{height: 383px;}
.c2{height: 273px;position: relative;}
.c3{height: 360px;position: relative;}
.c4{height: 306px;}
.c2 > .c-body,.c3 > .c-body {position: absolute;left:0;right:0;top: 50%;transform:translateY(-50%);}

/*輪播樣式*/
#carousel h2 span{
    position: relative;
}
#carousel h2 span:before{
    content: "";
    width: 100%;
    height: 3px;
    background-color: #555;
    position: absolute;
    bottom: -5px;
    left: 0px;
}
#carousel{
    position: relative;
    background-image: url(../images/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color: #555;
    padding: 80px 0 45px 0; 
}

#carousel ul.phot-min li{
    position: relative;
    width: 90px;
    height: 90px;
    border: hidden;
    padding: 0px; 
    margin-right: 25px;
    
}

#carousel ul.phot-min li a{
    display: block;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    border-radius: 99%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
#carousel ul.phot-min li.active a:before{
    opacity: 0;
}
#carousel ul.phot-min li a:before{
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 99%;
    background-color: rgba(0,0,1,0.5);
    transition: all 0.5s;
    -moz-transition: all 0.5s;  /* Firefox 4 */
    -webkit-transition: all 0.5s;   /* Safari 和 Chrome */
    -o-transition: all 0.5s;    /* Opera */
}
#carousel .media{
    width: 100%;
    background-color: #fff;
    margin-top: 50px;
}
#carousel .media-left{
    width: 40%;
}
#carousel .media-left img{
    max-width: 100%;
}
#carousel .media-body{
    width: 60%;
    vertical-align: middle;
    padding-left: 45px;
    padding-right: 45px; 
}
#carousel a.prev , #carousel a.next{
    z-index: 10;
    position: absolute;
    top: 50%;
    width: 60px;
    height: 68px;
    background-color: rgba(0,0,1,0.5);
    text-align: center;
    display: block
    transform:translateY(-50%);
    font-size: 50px;
    line-height: 68px;
    color: #fff;
}
#carousel a.prev{
    left: 0;
}
#carousel a.next{
    right: 0;
}
/*獻愛行動*/
#activity{
    background-image: url(../images/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color: #555;
    padding: 80px 0 45px 0; 
}
#activity .container{
    background-color: rgb(244,245,246,0.7);
    padding:35px 0px 50px 50px; 
}
#activity .container.container-title{
    background-color: rgb(244,245,246,0);
}
.title > span{
    position: relative;
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 10px;
}
.title > span:before{
    position: absolute;
    content: "";
    width: 100%;
    height: 2px;
    bottom: -3px;
    left: 0px;
    background-color: #555;
    opacity: 0;
}
.title.bl > span:before{opacity: 1;}
#activity .row .col-xs-12{
    margin-top: 35px;
}
#activity p.content{line-height: 170%;}
.btn-primary{
    background-color:rgb(45.68.133);
}
footer{
    min-height: 100px;
    height: auto;
}
.footer-coyright{
	background-color: rgba(33,35,35,1);
}
.footer-coyright-p{color:#fff;  min-height: 50px;}
footer .container-fluid:first-child{
    background-color: rgb(239,140,144);
}
.link-style{
	background:#fff;
	padding:5px;
	border-radius:25px;
	color:#000;
	margin-top:5px;
}


.blob-3{font-weight: 900 !important;}
.nopadding{padding: 0px !important;}
.text-red{color: rgb(204,58,65);}
.text-xs{font-size: 14px;}
.sp{letter-spacing: 4px;}
.pt-1{padding-top: 5px !important;}
.pt-10{padding-top: 10px !important;}
.pr-0{padding-right: 10px !important;}
.pl-0{padding-left: 0px !important;}
.pr-1{padding-right: 5px !important;}
.pr-20{padding-right: 20px !important;}
.pb-1{padding-bottom: 5px !important;}
.pb-10{padding-bottom: 10px !important;}
.mt-1{margin-top: 5px !important;}
.mr-1{margin-right: 5px !important;}
.mt-15{margin-top: 15px !important;}
.mt-30{margin-top: 30px !important;}
.mr-15{margin-right: 15px !important;}
.border-1{border: 1px solid #eee;}
/*大於1200px PC*/1
@media screen and (min-width: 1200px) {
    
}
/*769 ~ 1199 px PC*/
@media screen and (min-width:769px) and (max-width:1199px){
    .h1-md{font-size: 34px;}
    .text-xs{font-size: 10px;}
    #blog a img{width: auto; max-width: 100%;display: block;margin: 0 auto;}
}
/*481 ~ 768 px 平板*/
@media screen and (min-width:481px) and (max-width:768px){
    h1{font-size: 26px;}

}
/**1199以下**/
@media screen and (max-width:1199px){
    /*tab nav*/
    #tab-nav .tab-content{
        height: auto;
    }
    #tab-nav .nav-pills li a{
        margin-right: 0px;
    }
    #tab-nav .nav-pills li{
        box-sizing: border-box;
        float: left;
        width: 49%;
        margin-right: 1%;
        margin-bottom: 1%;
        margin-left: 0px;
    }
    /*tab nav*/
    /*輪播樣式*/
    #carousel .row{
        margin-left: 0px;
    }
    #carousel .media .media-left,#carousel .media .media-body{
        display: block;
        width: 100%;

    }
    #carousel .media .media-left{
        padding-top: 10px;
        padding-left: 10px;
        max-width: 100%;
    }
    #carousel .media .media-body{
        margin-top: 35px;
        padding-bottom: 35px;
    }
    /*輪播樣式..END*/
}
/*768 px 以下*/
@media screen and (max-width:768px){
    .logo{
        max-width: none;
        height: 80px;
        margin: 0 auto;
    }
    #blog a img{width: auto; max-width: 100%;display: block;margin: 0 auto;}
    #activity .container{
        padding: 35px 15px 35px 15px
    }
    .bg-sm-style{
	}
    #youtube a {
        position: absolute;
        top: 30px;
        right: 30px;
        z-index: 6;
        color: #efefef;
    }
}
/*小於 480 PX Mobile*/
@media screen and (max-width: 480px) {
    .logo{
        max-width: none;
        height: 60px;
        margin: 12px auto 0;
    }
    header{
        min-height: 50px;
    }
    h1{font-size: 30px;}
    h2{font-size: 25px;}
	.text-center-xs{
		text-align:center;
	}
}