/* 共用 */
html{
    height: 100%;
}

p, ul{
    margin-bottom: 0;
}
body{
    line-height: 1.5;
}
p{
    font-size: 1.4rem;
    text-align: justify;
}
.img-fluid{
    display: block;
    width: 100%;
    height: auto;
}
.footer-bg{
    background-color: #026565;
}
.bg-ctbc{
    background: #dfe7f0;
}

.bg-ctbc1{
    background: #eff3f7;
}

.bg-white{
    background: #fff;
}

.bg-yellow{
    background-color: #ffde43 !important;
}

.color-yellow{
    color: #f5cb12 !important;
    fill:#f5cb12 !important;
}

.bg-green{
    background-color: #85c37c !important;
}

.color-green{
    color: #85c37c !important;
}

.bg-blue{
    background-color: #232930 !important;
    color: #ffffff !important;
}

.bg-purple{
    background-color: #4e6db3 !important;
    color: #ffffff !important;
}
.color-purple{
    color: #4e6db3 !important;
}

.box-space{
    position: relative;
    padding: 40px 40px;
}

@media (min-width:768px){
    .box-space{
        padding: 50px;
    }
}


@media (min-width:1024px){
    .box-space{
        padding: 80px;
    }
}

.box-space-content{
    padding: 20px;
}

.btn{
    display: inline-block;
    width: auto;
    margin-top: 40px;
    padding: 10px 30px;
    border-radius: 35px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    font-size: 1rem;
    font-family: Arial, Helvetica, sans-serif;
    transition: all .5s;
}

.btn:hover{
    background: #026565;
    letter-spacing: .1rem;
}
.btn span{
    margin-left: 10px;
    padding: 3px 7px;
    display: inline-block;
    border-radius: 50%;
    background: #fff;
    font-size: 1rem;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.6);
    transition: all .5s;
}

.btn:hover span{
    margin-left: 20px;
    background-color: #013d3d;
    color: #fff;
}

.pos-relative{
    position: relative;
}
.z-10{
    z-index: 10;
}

.z-5{
    z-index: 5;
}
.h-100{
    height: 100vh;
}

.box-mask{
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100%;
    height: 40%;
    transform: translate(-50%, 0);
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+0,000000+100&0+1,0.65+100 */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 1%,rgba(0,0,0,0.85) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

}


.box-margin{
    margin-top: 50px;
    margin-bottom: 50px;
}

.box-radius{
    border-radius: 15px;
    overflow: hidden;
}


.box-radius-xl{
    border-radius: 35px;
    overflow: hidden;
}



.text-top{
    margin-top: 8%;
}


.svg-pos{
    position: absolute;
    margin-left: -20px;
    width: 45%;
    z-index: 1;
}

.text-center{
    text-align: center;
}

.overflow-hidden{
    overflow: hidden;
}


@media (min-width:768px){
    .text-pr{
        padding-right: 40px;
        text-align: justify;
    }
    
    .text-pl{
        padding-left: 40px;
        text-align: justify;
    }
}

@media (min-width:1200px){
    .text-top{
        margin-top: 20%;
    }
    .text-pr{
        padding-right: 80px;
        text-align: justify;
    }
    
    .text-pl{
        padding-left: 80px;
        text-align: justify;
    }
}