/************************************* bigBanner *************************************/


.bigBanner img {
    width: 100%;
    height: auto;
}

/************************************* section1  *************************************/


.section1 {
    text-align: left;
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: #fff;
}


.formBar {
    margin-bottom: 30px;

}










.threeCharts {
    margin-bottom: 15px;
    margin-top: 0px;
}


.threeCharts .onePieChart {
    /*    border: 1px solid red;*/
    max-width: 300px;
    position: relative;
    margin: 0 auto;
    margin-bottom: 0px;
}


.threeCharts .onePieChart .circular-chart {
    /*    border: 1px solid red;*/
    display: block;
}

.threeCharts .onePieChart .circular-chart .circle-bg {
    fill: none;
    stroke: #f2f2f2;
    stroke-width: 2;
}

.onePieChart .circular-chart .circle {
    fill: none;
    stroke-width: 2;
    stroke-linecap: butt;

}

.threeCharts .circleAnimation {
    animation: progress 2s ease-out forwards;
}



@keyframes progress {
    0% {
        stroke-dasharray: 0 100;
    }
}

.circular-chart .circle {
    stroke: #0870E5;
}



.threeCharts .onePieChart .textArea {
/*        border: 1px solid red;*/
    text-align: center;
    width: 100%;
    height: 100px;
    display: block;
    position: absolute;
    top: 50%;
/*
    margin-top: -45px;
    margin-top: -55px;
*/
    margin-top: -45px;
    left: 50%;
    margin-left: -50%;
}

.threeCharts .onePieChart .textArea h2 {
    font-family: "Roboto", sans-serif;
    font-weight: 900;
      font-size: 43px;
    margin-bottom: 3px;
}

.threeCharts .onePieChart .textArea h2 span {
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 900;
    font-size: 16px;
     padding-left: 3px;
}

.threeCharts .onePieChart .description {
    font-size: 14px;
    line-height: 21px;
    font-weight: bold;

}









/************************************* section6 *************************************/

.section6 {
    position: relative;
    top:-20px;
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #F2F2F2;
    text-align: left;
}



.section6 .fiveChart {
    position: relative;

}

.section6 .fiveChart .oneChart {
    position: relative;
    height: 100px;
    float: left;
    width: 20%;
    padding-left: 5px;
    padding-right: 5px;

}



.section6 .fiveChart .oneChart .bg {
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: relative;
}

.section6 .fiveChart .oneChart .bg .content {
    position: absolute;
    width: 100%;
    bottom: 0px;
    height: 0%;
    background-color: #0870E5;
    color: #0870E5;

    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;

}


.section6 .fiveChart .oneChart .bg .content .people {
    text-align: center;
    width: 100%;
    color: #fff;
    position: relative;
    top: 5px;
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
    font-weight: 900;
    z-index: 1;
}

.section6 .fiveChart .oneChart .year {
    text-align: center;
    font-size: 12px;
    font-family: 'Roboto', sans-serif;
}

.section6 .fiveChart .happyPeople {
    width:40px;
    height: 40px;
    
    position: absolute;
    left: 50%;
    margin-left: -20px;
    top: 0px;
    opacity: 0;

    animation-duration: 0.7s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}





/************************************* section2 *************************************/


.section2 {
    padding-top: 30px;
    padding-bottom: 0px;
    background-color: #fff;
}

.section2 .container-fluid .table {
    margin-top: 30px;
    border: none;
    text-align: left;
    font-weight: 500;
}

/*
.section2 .container-fluid .table tr td:first-child {
    color: #0870E5;
}
*/


table.table > thead > tr > th {
    border-top: none;
    border-bottom: 2px solid #3f3f3f;
}

table.table > tbody > tr > td {
    border-bottom: 1px solid #BBBBBB;
}

.section2 .container-fluid table.table tr th.c1{
    width:80%;
}

.section2 .container-fluid table.table .year{
    color: #0870E5;
}

.section2 .container-fluid table.table ol{
    margin-bottom: 0px;
    padding-left:2em;
}

.section2 .container-fluid table.table ol li{
    list-style-type: disc;
}

.section2 .container-fluid table.table ol li a{
    color: #3F3F3F;
    text-decoration: underline;
}


.section2 .container-fluid table.table ol li a span{
    font-weight: bold;
}










.pageControll {
    margin: 0 auto;
    text-align: center;
    width: 200px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.pageControll .nowNumber {

    color: #0870E5;
}

.pageControll .left,
.pageControll .right,
.pageControll p {
    display: inline-block;
}

.pageControll .left {
    margin-right: 8px;
    margin-top: -2px;
    cursor: pointer;
}

.pageControll .left:hover,
.pageControll .right:hover {
    opacity: 0.7;
}

.pageControll .right {
    margin-left: 8px;
    margin-top: -2px;
    cursor: pointer;
}

.pageControll p {
    color: #3F3F3F;
}







/************************************* section7 *************************************/

.section7{
    position: relative;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: #f2f2f2;
}

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