@charset "utf-8";
/* CSS Document */
* {
    box-sizing: border-box;
    /*margin: 0 auto;*/
}

html, body, form {
    height: 100%; 
    margin: 0;
    padding: 0;
}
body {
    background-image: url('../image/BigBack.png');
    margin: 0;
    background-size: cover;
    background-position: center 1050px;
    padding: 0;
    /*height: 4638px;*/
    /*min-width: 1800px;*/
    font-family: "微軟正黑體", "Microsoft JhengHei","Helvetica", "Microsoft JhengHei";
    overflow-x: hidden;
}
a {
    cursor: pointer;
}
    a, a:hover, a:link, a:visited, a:active {
        text-decoration: none;
    }
ul, li {
    margin: 0;
    padding: 0;
}

p {
    color: #000;
}

/*HEADER*/
.header {
    width: 100%;
    height: 780px;
    background-image: url('../image/banner.png');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.header_top {
    width: 100%;
    height: 90px;
    padding: 5px;
    background-color: #008C74;
    display: flex;
    align-items: center;
}
.header_top .LOGO{
    padding-left: 85.2px;
}
.header_bottom{
        bottom: 0;
    position: absolute;
    margin-bottom: -50px;
    width: 100%;
}
/*HEADER*/


.BannerPic{
}
.BannerTitle{
    padding-top: 200px;
}
/*HEADER*/


/*PAGE*/
.container {
    display: flex;
    /* 水平置中 */
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}
.title_intro {
    font-size: 22px;
    text-align: center;
}
.title_intro span{
    display: block;
    text-align: center;
}
.div_intro {
    font-size: 20px;
    /*text-indent: 2.8rem;*/
}
.div_intro .text{
    padding-left: 25px;
    margin-bottom: 10px;
}
.div_intro ul{
    list-style: decimal;
    margin-left: 50px;
}
.div_intro li{
    margin-bottom: 10px;
}
.carousel{
}

.carousel-control.left {
    background-image: none;
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
    left: auto;
    right: 0;
    background-image: none;
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}

.IMG_Title{
    
}
.TitleBoxA{
    padding-left: 0px;
    margin-left: 110px; 
}
.TitleBoxB{
    margin-left: -75px;
}
.Page1{
    padding-top: 50px;
}
.Page2{ 
    padding-top: 50px;
}
.Page3{}
.Page4{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 80%;
    margin: 0 auto;
    /*padding-left: 8%;
    padding-right: 8%;*/
}
.Page5{
}
.Page5Color{
    /*width: 700px;*/
    height: 386px;
    border-radius: 30px;
    background-color: #FAE7B2;
    padding: 37px 65px 0 65px;
}
.Page6{
}
.Page6Color{
    /*width: 700px;*/
    height: 386px;
    border-radius: 30px;
    background-color: #B2DEE4;    
}

.Page6 .carousel{
    width: 700px;
    height: 300px;
    margin-top: 40px;
}
.Page6 .carousel video{
    width: 500px;
    height: 300px;
}
.Page6 .carousel-inner{
    margin-left: 85px;
}
.Page7{
    margin-bottom: 50px;
}
.Page7Color{
    width: 80%;
    height: 597px;
    border-radius: 30px;
    background-color: #D1D5EE;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; 
}

.Page7Color .row{
    width: 100%;
}
.carousel-inner{
    height: 100%;
}
.carouselBOX{
    height: 100%;
    padding-left: 0;
    padding-right: 0;
}
.Page7Color .item{
    height: 100%;
}
.Page7Color .item .container{
        height: 100%;
    flex-wrap: nowrap;
    justify-content: space-evenly;
}
.Page7 .carousel{
    /*width: 1550px;*/
    width: 100%;
     height: 100%;
    /*margin-top: 55.95px;*/
}
.Page7 .carousel-inner .container {
    align-items: center;
}
.Page8{
    margin-bottom: 100px;
}
.Page8Color{
    width: 80%;
    /*height: 370px;*/
    border-radius: 30px;
    background-color: #D1E6C3;
    /*margin-left: 30px;*/
    padding: 30px 40px;
}

.img-area{
    width: 420px;
    height: 420px;
}
.img-area2{
    width: 297px;
    height: 420px;
}
.img-area3{
    width: 554px;
    height: 420px;
}

.img-area img,.img-area2 img,.img-area3 img{
    text-align: center;
}
.img-text{
    width: 100%;
    /*height: 67px;*/
    text-align: center;
}
.showPicBox_APP{
    display:none;
}
.TextBox{
    padding-top: 20px;
    padding-right: 10px;
    border-radius: 12px;
    width: 80%;
    margin:20px auto 0 auto;
    height: 142px;
    background-color: #F2F2F2;
}
.paperFlowClass{
    display: inline-flex;
    
}
.paperFlowBOX{
    height: 335px;
    /*width: 420px;*/
    margin-right: 15px;
    text-align: center;
}
.paperFlowIMG{
    border-radius: 40px;
    /*width: 420px;*/
    height: 290px;
}
.paperFlowTEXT{
    font-size: 20px;
}
.paperCarBox{
    width: 70%;
}
.paperCarPIC{ 
    padding-top: 40px;
    margin-bottom: 50px;
    text-align: center;
}
.paperCarPIC img {
    margin: 0 auto;
}
.paperCarPictureBox{
    display: inline-flex;
    width: 100%;
    justify-content: center;
}
.paperCarPicture{
    margin-right: 15px;
    margin-left: 15px;
    width: 100%;
}
.paperCarPicturePic{
    /*width: 420px;*/
    height: 290px;
    border-radius: 40px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.paperCarPicture img{
    border-radius: 40px;
    /*width: 420px;*/
    /*height: 290px;*/
}
.paperCarPictureText{
    color: #8F5E42;
    font-size: 22px;
    text-align: center;
}
.sample2{
    background-image: url("../image/sample2.png");
}
.sample3{
    background-image: url("../image/sample3.png");
}
.sample4{
    background-image: url("../image/sample4.png");
}
.yellowTitle{
    width: max-content;
    height: 40px;
    padding: 0 15px;
    border-radius: 20px;
    background-color: #B28402;
    margin-left: -15px;
    text-align: center;
    margin-bottom: 12px;
}
.span_text{
    line-height: 40px;
    color: #FFF;
    font-size: 22px;
}
.yellowText{
    /*width: 564.69px;*/
    height: 56.14px;
    font-size: 20px;
}
.donTitle{
    font-size: 24px;
}
.greenTitleBox{
    margin-bottom: 20px;
}
.greenTitle{
    width: 179px;
    height: 40px;
    border-radius: 20px;
    background-color: #808080;
    text-align: center;
    cursor: pointer;
    display: inline-block;
    margin-right: 15px;
}
.greenTitle.active{
    background-color: rgb(0, 140, 116);
}
.greenText{
    font-size: 20px;
}
/*PAGE*/


.d-block{
    display: block;
}

/*FOOTER*/
.footer{    
    background-color: #008C74;
    height: 210px;
    position: relative;
}
.footer_top{
    width: 80%;
    /* height: 137px; */
    padding-top: 30px;
    margin: 0 auto;
    padding-bottom: 30px;
}
.footerLOGObox{
    margin-bottom: 10px;
}
.footerLOGO{
    /*margin-left: 212px;*/
    color: #FFF;
    font-size: 22px;
}
.footerLOGOline{
    /*margin-left: 212px;*/
    width: 220px;
    height: 5px;
    background-color: #00A78A;
}
.footerTextBox{
    justify-content: flex-start;
    padding: 0;
}
.footerTextBox span{
    color: #FFF;
    font-size: 18px;
    margin-right: 25px;
}
.footer_bottom{
    background-color: #00A78A;
    position: absolute;
    width: 100%;
    height: 70px;
    bottom: 0;
    padding: 20px 0;
}
.footer_bottomTextBOX{
    width: 80%;
    margin: 0 auto;
}
.footer_bottomText{
    color: #7CD1C3;
    font-size: 18px;
}
/*FOOTER*/


@media screen and (min-width: 1601px) and (max-width: 1920px){
}
@media screen and (min-width: 1401px) and (max-width: 1600px){
    .title_intro {
        font-size: 20px;
    }
    .div_intro {
        font-size: 18px;
    }
    .Page7Color .item{
        width: 90%;
        margin: 0 auto;
    }
    .paperFlowClass {
        width: 80%;
    }
    .paperFlowTEXT {
        font-size: 18px;
    }
    .Page6 .carousel video {
        width: 68%;
    }
    .div_intro {
        font-size: 18px;
        text-indent: 2.8rem;
    }
    .paperCarPictureText {
        font-size: 20px;
    }
    .span_text {
        font-size: 20px;
    }
    .yellowText {
        font-size: 18px;
    }
    .donTitle{
        font-size: 22px;
    }
    .greenText {
        font-size: 18px;
    }
    .img-area3{
        width: 465px;
        height: 355px;
    }
}

@media (max-width: 1400px){
    .header{
        /*height: 670px;      */        
        padding-bottom: 50px;
        background-image: url(../image/banner_APP.png);
        background-size: cover;
        background-position: top center;
        
    }
    .header .showPicBox{
        display: none;
    }
    .header .showPicBox_APP{
        display:block;
    } 
    .BannerTitle {
        padding-top: 10px;
    }
    .BannerTitlePic {
        padding-top: 3.5%;
        width: 40%;
        margin: 0 auto;
    }
    .Page7Color .item{
        width: 90%;
        margin: 0 auto;
    }
}
@media (max-width: 1200px){
    .title_intro {
        font-size: 16px;
    }
    .div_intro {
        font-size: 16px;
    }
    .paperFlowTEXT {
        font-size: 16px;
    }
    .paperCarPictureText {
        font-size: 18px;
    }
    .span_text {
        font-size: 18px;
    }
    .yellowText {
        font-size: 16px;
    }
    .donTitle{
        font-size: 20px;
    }
    .greenText {
        font-size: 16px;
    }
}
@media screen and (min-width: 1024px) and (max-width: 1400px){
    .TitleBoxA{
        margin-left: 0px;
    }
    .TitleBoxB {
        margin-left: -45px;
    }
    .paperFlowClass{
        width: 85%;
    }
    .paperFlowBOX{
        height: auto;
    }
    .paperFlowIMG{
        height: auto;
    }
    .paperCarPicturePic{
        height: 215px;
    }
    .Page4{
        width: 90%;
    }
    .Page5Color{
        padding: 15px 30px 40px 30px;
        height:auto;
        min-height: 285px;
    }
    .yellowText {
        padding-bottom: 20px;
        height: auto;
    }
        /*carousel*/
    .Page6 .carousel {
        width: 100%;
        height: auto;
        margin-top: 0;
        margin-bottom: 0;
    }
    .Page6 .carousel video {
        width: 75%;
        height: auto;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        padding-top: 10px;
    }
    .Page6 .carousel-inner {
        margin-left: 0;
        height: 100%
    }
    .Page6Color{
        height: 285px; 
        /*min-height: 285px;*/
    }
    .Page6Color .container{
        padding-right: 0;
        padding-left: 0;
        height: 100%;
        align-items: center;
    }
    .Page7Color{
        width: 90%;
        height: 415px;
    }
    .Page7Color .row{
        width: 100%;
    }
    .Page7 .carousel{
        width: 100%;
        margin-top: 0;
        height: 415px;
    }
    .Page7 .carousel-inner .container{
        height: 415px;
        padding: 20px 15px;
        align-items: center;
    }
    .img-area, .img-area2, .img-area3 {
        width: 60%;
        margin: 0 auto;
        height: auto;
    }
    .single-box{
        width: 50%;
    }
    .carousel-inner{
        width: 100%;
        height: 100%;
        padding-bottom: 19px;
    }
    /*carousel*/
    .TextBox{
        width: 90%;
        height: auto;
    }
    .Page8Color {
        width: 90%;
    }
    .footer_top{
        width: 85%;
    }
    .footerTextBox span{
        font-size: 16px;
    }
    .footer_bottomText {
        font-size: 16px;
    }
    .footer_bottomTextBOX{
        width: 85%;
    }
}
@media screen and (min-width: 997px) and (max-width: 1023px){
}
@media screen and (min-width: 1201px) and (max-width: 1400px){

}
@media (max-width: 1023px){
    body {
        background: none;
    }
    /*.header{
        height: 670px;              
        padding-bottom: 50px;
        background-image: url(../image/banner_APP.png);
        background-size: cover;
        background-position: center;
        
    }*/
    .header_bottom{
        margin-bottom: -2px; 
    }
    .header_top{
        height: auto;
        padding: 5px 0;
    }
    .BannerTitle{
        padding-top:10px;         
    }
    .BannerTitlePic{
        padding-top:120px;     
        width: 90%;
        margin: 0 auto;
    }
    
    .title_intro span{
        display:inline-block;
    }

    /*FOOTER*/
    .footer{    
        height:auto;
    }
    .footerTextBox span {
        font-size: 16px;
        margin-right: 10px;
        display: block;
    }
    .footer_bottom{
        position:relative;
        height:auto;
        overflow: hidden;
    }
    .footer_bottomText {
        font-size: 16px;
        float: none !important;
    }
    .footer_bottomText span{
        display: block;
    }
    /*FOOTER*/
}
@media (max-width: 996px){
    .header{
        height: 100%;
        padding-bottom: 120px;
    }
    /*.header .showPicBox{
        display: none;
    }
    .header .showPicBox_APP{
        display:block;
    } 
    .BannerTitle {
        padding-top: 10px;
    }
    .BannerTitlePic {
        padding-top: 13%;
        width: 70%;
    }*/
    .TitleBoxA{
        margin-left: 0;
    }
    .TitleBoxB {
        margin-left: 0;
        text-align: center;    
    }
    .Page1 {
        padding-top: 30px;
    }
    .Page3 {
        padding-bottom: 50px;
    }
    .Page4{
        width: 90%;
        margin-bottom: 50px;
    }
    .Page5{
        padding-bottom: 50px;
        width: 100%;
    }
    .Page6{
        width: 100%;
    }
    .Page7 {
        /*padding-bottom: 50px;*/
    }
    .TextBox{
        width: 90%;
        height: auto;
        padding: 20px 10px;
    }
    .div_intro .text {
        padding-left: 5px;
    }
    .div_intro ul {
        margin-left: 25px;
    }
    .paperCarBox {
        width: 100%;
    }
    .d-block{
        display: none;
    }
    .paperFlowIMG{
        height: auto;
        width: 100%;
    }
    .paperFlowBOX{
        height: auto;
    }
    .paperCarPicturePic{
        height: 200px;
        border-radius: 20px;
    }
    .Page5Color{
        padding: 20px 30px 50px 30px;
        height:auto;
    }
    /*carousel*/
    .Page6 .carousel {
        width: 100%;
        height: auto;
        margin-top: 30px;
        margin-bottom: 20px;
    }
    .Page6 .carousel video {
        width: 75%;
        height: auto;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .Page6 .carousel-inner {
        margin-left: 0;
    }
    .Page6Color{
        height: auto;    
    }
    .Page6Color .container{
        padding-right: 0;
        padding-left: 0;
    }
    .Page7Color{
        width: 90%;
        height: 415px;
    }
    .Page7Color .row{
        width: 100%;
    }
    .Page7 .carousel{
        width: 100%;
        margin-top: 0;
        height: 415px;
    }
    .Page7 .carousel-inner .container{
        height: 415px;
        padding: 20px 15px;
        align-items: center;
    }
    .img-area, .img-area2, .img-area3 {
        width: 40%;
        margin: 0 auto;
        height: auto;
    }
    .carousel-inner{
        width: 100%;
        height: 100%;
        padding-bottom: 19px;
    }
    /*carousel*/
    
    .Page8Color{
        width: 90%;
        padding: 20px;
    }
    .greenTitle{
        width: 145px;
        margin-right: 5px; 
    }
    .greenTitleBox {
        margin-bottom: 20px;
        display: inline-flex;
        align-content: center;
        flex-wrap: nowrap;
        justify-content: center;
    }
    .text_aera{
        margin-bottom: 10px;
    }  
    .Page7 .showPicBox{
        display: none;
    }
    .Page7 .showPicBox_APP{
        display:block;
    } 
}

@media (max-width: 767px){
    .header{
        height: 100%;
        padding-bottom: 80px;
    }
    .BannerTitle {
        padding-top: 10px;
    }
     .BannerTitlePic {
        padding-top: 15%;
        width: 90%;
    }


    .IMG_Title {
        height: 52px;
    }
    .paperCarPictureBox{
        flex-direction: column;
        align-items: center;
    }
    .paperCarPicture{
        width: 70%;
        margin-bottom: 10px;
    }
    .paperCarPicturePic{
        height: 170px;
        border-radius: 20px;
    }
    .paperFlowClass {
        flex-direction: column;
        align-items: center;
    }
    .paperFlowIMG{
        height: auto;
        width: 80%;
        margin: 0 auto;
    }
    .paperFlowBOX{
        height: auto;
        margin-bottom: 25px;
    }
    .img-area, .img-area2, .img-area3 {
        width: 50%;
        margin: 0 auto;
        height: auto;
    }
}
@media (max-width: 580px){
    .img-area, .img-area2, .img-area3 {
        width: 80%;
        margin: 0 auto;
        height: auto;
    }
}