/* css reset */
*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.pc-wrapper {
    width: 100%;
    background: rgb(95, 159, 182);
}

body {
    height: 100%; 
    font-family: 微軟正黑體, Arial, Helvetica, sans-serif;
    text-align: center;
    background: #0a1830;
    overflow-x: hidden;
}

body:before {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(../images/bg.jpg);
    background-size: cover;
    /* background-position: 50%; */
    z-index: -2;
}


#mNav {
    display: none;
}



.section-title {
    color: #dfff05;
    font-size: 1.8vw;
    font-weight: 600;
    padding: 2vw;
}

.sec-title img{
    height: 3.5vw;
}

.blue {
    color: #00a1e8;
}

.deep-blue {
    color: #1d4070 !important;
}

.orange-word {
    color:#f1a200;
}

.ss-show {
    display: none;
}


/* section 1 */
#section1 {
    background:rgb(215, 199, 199);
}

.main-bg-mb {
    display: none;
}

/* logo */
.logo,.mobile-logo {
    position: fixed;
    top: 5px;
    z-index: 1001;
}

.logo img{
    height: 40px;
    margin: 12px 8px;
}

/* pc - menu */
.section1 .topnav {
    display: flex;
    justify-content: center;
    position: fixed;
    width: 100vw;
    left: 0;
    right: 0;
    z-index: 999;
    /*border-bottom: 2px solid #262F40;*/
    background: #ffffffe8;
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
    height: 75px;
}

.section1 .topnav a {
    /* float: left; */
    display: block;
    color: #0a0a0a;
    font-weight: 600;
    text-align: center;
    /* border-bottom: 1px solid #3d3d3d; */
    text-decoration: none;
}

.topnav .title-ch {
    font-size: 17px;
}

.section1 .topnav .list-style {
    padding: 6px 7px;
    margin: 21px 8px;
} 

.section1 .topnav .list-style:hover {
    border-bottom: solid 2px #000000;
}

.share-btn {
    position: absolute;
    right: 4vw;
    display: flex;
}

/* .line {
    margin-right: 10px;
} */

.menu-logo:hover {
    opacity: 0.7;
}

.section1 .menu-logo {
    width: 35px;
}

.section1 .logo-style {
    padding: 19px 8px;
}

.main-vision-sec {
    position: relative;
}

.kv-title img{
    width: 12vw;
    padding-top: 7vw;
}

.kv-title-2 img{
    width: 60vw;
    padding-bottom: 5vw;
}

.sunshine {
    overflow: hidden;
}



.blue-back {
    background: #1d4070ca
}

/* section2 */
/* #section-2 {
    background: #1d4070ca
} */

.foreword {
    position: relative;
    width: 53vw;
    left: 50%;
    transform: translatex(-50%);
    text-align: left;
    color:#fff;
    font-size: 1.2vw;
    line-height: 1.8vw;
    margin: 0 0 1vw 0;
}

.first-article-title {
    margin: -0.1vw 23vw;
    background: #ffffff;
    /* padding: 1.5vw 0; */
    font-size: 1.5vw;
    font-weight: 700;
    color: #08a3e8;
}

.first-article-words {
    padding-top: 2vw;
}

.owl-theme .item {
    height: 42vw;
    background: #ffffff;
    /* padding: 13vw; */
    margin: 0vw 23vw;
    position: relative;
}

i.fal {
    font-size: 3.5vw;
}

.fa-angle-left:before {
    position:absolute;
    left:20%;
    top: 40%;
}

.fa-angle-right:before {
    position:absolute;
    right:20%;
    top: 40%;
}

.yellow {
    color:#ffc900;
}

.owl-theme .owl-dots .owl-dot span {
    background:#ffc900 !important;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background:#b9b5a7 !important;
}

.owl-carousel .item h4 {
    color: #fff;
    font-weight: 400;
    font-size: 1.4375rem;
    margin-top: 0rem;
}

.owl-theme .owl-nav {
    height: 0;
}

#chart01, #chart02,#chart03{
    position: relative;
    width: 50vw;
    height: 24vw;
    max-width: 1365px;
    max-height: 618px;
    overflow: hidden;
    padding: 0 20px;
}

#chart04, #chart05, #chart06 {
    position: relative;
    width: 53.5vw;
    height: 10vw;
    top: -50px;
    /* overflow: hidden; */
    padding: 0 5vw 0 3.5vw;
}

#chart07,#chart08 ,#chart09,#chart10 {
    position: relative;
    width: 50vw;
    height: 32vw;
    /* max-width: 1365px; */
    /* max-height: 618px; */
    /* overflow: hidden; */
    padding: 1vw 20px;
}
  

.chart-title {
    text-align: left;
    padding: 1vw 1.5vw;
    font-size: 1.2vw;
    font-weight: 600;
}

.chart-intro {
    font-size: 1.2vw;
    text-align: left;
    width: 45vw;
    line-height: 1.8vw;
    /* justify-content: center; */
    position: relative;
    left: 50%;
    transform: translatex(-50%);
}

.red-word {
    color: #cc1f1f;
}

.blue-word {
    color: #009ee7;
}

/* #chart01::before {
    content: "";
    width: 3.1vw;
    height: 16vw;
    position: absolute;
    /* border: solid 2px #d00d0dca;  
    background: #f3090947;
    right: 3.2vw;
    top: 3.8vw;
} */



/* section3 */
/* #section-3 {
    background: #1d4070ca
} */

.section3-wrapper {
    background: #fff;
    margin: -7vw 23vw 0vw;
    padding-top: 10vw;
    padding-bottom: 5vw;
}

.content-wrapper {
    display: inline-flex;
    align-items: center;
    padding-top: 2vw;
}

.sec-title {
    position: relative;
    padding-top: 3.5vw;
}

.dialog-border-bottom {
    border-bottom: 3px solid #f79d00;
    /* height: 65px; */
    margin-bottom: 10px;
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
    padding: 0 1vw;
    /* width: 50vw; */
    text-align: center;
    font-size: 1.8vw;
    font-weight: 700;
    color: #f79d00;
    }
    
    .dialog-border-bottom:before {
        border-color: #f79d00 transparent transparent;
        border-style: solid solid solid;
        border-width: 16px 16px 16px 16px;
        bottom: -33px;
        content: "";
        height: 0px;
        position: absolute;
        left: 50%;
        transform: translatex(-50%);
        width: 0px;
    }

    .dialog-border-bottom:after {
        border-color: #ffffff transparent transparent;
        border-style: solid solid solid solid;
        border-width: 13px;
        content: "";
        height: 0px;
        position: absolute;
        left: 50%;
        transform: translatex(-50%);
        bottom: -26px;
        width: 0px;
    }

.tb-adm {
    width: 13vw;
    height: 13vw;
    border-radius: 50%;
    padding: 0.2vw;
    border: solid 0.15vw #f1a200;
}

.content {
    text-align: left;
    text-align: left;
    margin: 0 1.5vw;
}

.intro-title {
    font-size: 1.5vw;
    font-weight: 700;
    padding: 1vw 0;
}

.intro {
    width: 26vw;
    text-align: left;
    font-size: 1vw;
}

.read-more-article a { 
    background:#009ee7;
    color:#fff;
    padding: 0.2vw 1vw;
    position: relative;
    right: -21vw;
    bottom: -1vw;
    text-decoration: none;
    font-size: 1vw;
}

.read-more-article:hover {
    opacity: 0.7;
}

/* section4 */
#section-4 {
    background: linear-gradient(#1d4070ca,#6a7792 80%, #6a7792);
    padding-bottom: 2vw;
    position: relative;
}

.article-item {
    display: inline-flex;
    align-items: flex-start;
    margin-bottom: 4vw;
}

.article-item:nth-child(even) .article-content{
    order: -1;
    margin-left: 0;
}

.article-img {
    width: 30vw;
}

.article-container {
    width: 60%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.article-content {
    width: 30vw;
    margin: 0 1vw;
}

.article-title {
    font-size: 1.8vw;
    font-weight: 600;
    color: #fff;
    padding: 0 0 1vw 0;
    text-align: left;
}

.article-intro {
    text-align: left;
    font-size: 1vw;
    line-height: 1.5vw;
    color: #fff;
}

.orange {
    background:#f1a200 !important;
    right: -12vw !important
}

/* section5 */
#section-5 {
    background: #fff;
}

#carousel-2 {
    width: 40%;
    height: 43vw;
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
}

#carousel-2.owl-carousel .owl-item img {
    display: block;
    width: auto;
    height: 30vw;
}

.bottom {
    height: 41vw !important;
    margin: 0vw 0vw !important;
}

.bottom a {
    text-decoration: none;
    text-align: left;

}

.owl-bottom .fal {
    color:#18364f;
    font-weight: 500;
}

.owl-bottom .fa-angle-left:before {
    left: -10%;
}

.owl-bottom .fa-angle-right:before {
    right: -10%;
}

.carousel-title {
    font-size: 1.36vw;
    font-weight: 700;
    margin: 1vw 0;
    color:#000;
}

.carousel-intro {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    font-size: 1vw;
    color:#000;
}

.ground {
    background: #009ee7;
    color: #fff;
    padding: 0.2vw 1vw;
    position: relative;
    right: -17vw;
    bottom: -1vw;
    text-decoration: none;
    font-size: 1vw;
}

.ground:hover {
    opacity: 0.7;
}

/* go to top */
#goToTop {
    position: fixed;
    top: 50%;
    right: 47px;
    background-color: transparent;
    border: none;
    opacity: 0;
    transition-duration: 0.5s;
    z-index: 1000;
}

.icon__balloon {
    position: relative;
    animation:floating 5s infinite;
    -moz-animation:floating 5s infinite;
    -webkit-animation:floating 5s infinite;
    transition-duration: 0.5s;
}

.icon__balloon svg{
    color: #ffffff;
    cursor: pointer;
}

.top-word {
    position: absolute;
    font-size: 20px;
    color: #fff;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
}


#goToTop:hover .icon__balloon{
    opacity: 0.7;;
    
}

#goToTop.show {
    opacity: 1;
}

/* footer */
footer {
    background-color: #2d2d2d;
    padding: 20px 20px;
}

footer p{
    font-family: 'Noto Sans TC';
    text-align: center;
    color: #ffffff;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.6em;
}

@media screen and (max-width: 1280px) {
    /* .feedback-content {
        display: inline-grid;
    } */
}

@media screen and (max-width:1100px) {
    .containerBg {
        overflow: hidden;
    }

    .sec-title {
        padding: 57px 0px 10px 0px;
    }

    .sec-title img {
        height: 7vw;
    }

    .section-title {
        font-size: 3.8vw;
        padding: 13px 13px 30px 13px;
    }

    /* mobile-menu */

    .logo img {
        height: 35px;
        margin: 5px 10px;
    }

    #pcNav {
        display: none;
    }
    
    #mNav {
        display: block;
    }
    
    #myNav {
        z-index: 1200;
    }

    #myNav .title-ch {
        font-size: 1.1em;
    }

    /* The Overlay (background) */
    .menu-overlay {
        height: 0%;
        width: 100%;
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        background-color: #ffffff;
        overflow-y: hidden;
        transition: 0.5s;
    }

    .overlay-content {
        position: relative;
        width: 100%;
        top: 3%;
    }

    .menu-overlay a {
        padding: 8px;
        text-decoration: none;
        font-size: 36px;
        color: #010101;
        display: block;
        transition: 0.3s;
    }

    .menu-overlay a:hover {
        text-decoration: none;
    }

    .menu-overlay a:hover {
        color: #f1f1f14c;
    }

    .menu-overlay .closebtn {
        position: absolute;
        top: 0;
        right: 0.3em;
        font-size: 2.5em;
        text-decoration: none;
        z-index: 1100;
    }

    @media screen and (max-height: 450px) {
        .menu-overlay {overflow-y: auto;}
        .menu-overlay a {font-size: 20px}
        .menu-overlay .closebtn {
        font-size: 40px;
        top: 15px;
        right: 35px;
        }
    }

    #mNav .menu-box {
        /* top: 0.5em; */
        /* right: 1em; */
        width: 100vw;
        height: 50px;
        position: fixed;
        color: #030303;
        background: #ffffffe8;
        /* border: 1px solid #122C94; */
        z-index: 500;
        box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
    } 

    /* #mNav .menu-box:hover {
        background: rgb(125, 125, 125);
    } */


    #mNav .menu-list {
        color: #000000;
        font-size: 1em;
        text-align: left;
        padding-left: 2em;
    }

    #mNav .menu-list:hover {
        color: #000000;
    }

    .overlay-content hr {
        width: 95%;
        margin-top: 1px;
        margin-bottom: 10px;
        opacity: 0.4;
        position: initial;
        display: inline-block;
    }

    #OpenNav {
        font-size: 30px;
        top: 50%;
        right: 2vw;
        transform: translatey(-55%);
        position: absolute;
        color: #050505;
    }

    /* fb&line&ig logo */
    .section1 .logo-style {
        padding: 3px 29px;
        text-align: start;
    }

    .kv-title img {
        width: 18vw;
        padding-top: 20vw;
    }

    .kv-title-2 img {
        width: 77vw;
        padding-bottom: 5vw;
    }

    /* section-2 */
    .foreword-title {
        padding-top: 5vw;
    }

    .foreword {
        width: 76vw;
        font-size: 2vw;
        line-height: 3vw;
    }

    .chart-title {
        font-size: 2vw;
    }

    .first-article-title {
        margin: -0.1vw 12vw;
        font-size: 2.5vw;
    }

    .owl-theme .item {
        height: 81.5vw;
        background: #ffffff;
        margin: 0vw 12vw;
    }

    i.fal {
        font-size: 5vw;
    }

    .fa-angle-left:before {
        left: 8%;
    }

    .fa-angle-right:before {
        right: 8%;
    }
    
    #chart01, #chart02, #chart03 {
        width: 72vw;
        height: 47vw;
    }

    #chart04, #chart05, #chart06 {
        width: 77vw;
        height: 20vw;
        padding: 0 6vw 0 6vw;
    }

    #chart07, #chart08, #chart09, #chart10 {
        width: 72vw;
        height: 66vw;
    }

    .chart-intro {
        width: 62vw;
        font-size: 2vw;
        line-height: 3vw;
    }

    .intro-title {
        font-size: 2.5vw;
    }

    .read-more-chart a {
        right: -28vw !important;
        font-size: 1.7vw !important;
    }

    /* section-3 */
    .section3-wrapper {
        margin: -12vw 12vw 0vw;
        padding-top: 10vw;
    }

    .tb-adm {
        width: 16vw;
        height: 16vw;
    }

    .intro {
        width: 42vw;
        font-size: 1.7vw;
    }

    /* section-4 */
    .article-img {
        width: 36vw;
    }

    .article-container {
        width: 80%;
    }

    .article-content {
        width: 38vw;
    }

    .article-title {
        font-size: 2vw;
    }

    .article-intro {
        font-size: 1.7vw;
        line-height: 3vw;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
    }

    .read-more-article a {
        right: -32vw;
        font-size: 1.7vw;
    }


    .orange {
        right: -14vw !important;
    }

    /* section-5 */

    #carousel-2 {
        width: 40%;
        height: 59vw;
        z-index: 1;
        left: 50%;
        transform: translateX(-50%);
    }

    .carousel-title {
        font-size: 2vw;
    }

    .carousel-intro {
        font-size: 1.7vw;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
    }

    .ground {
        font-size: 1.7vw;
        right: -15vw;
    }

    .bottom {
        height: 55vw !important;
    }

    #goToTop {
        right: 21px;
    }
    
}

@media screen and (max-width: 630px) {
    body:before {
        width: 125%;
        left: -14%;
        overflow-x: hidden;
    }

    .ss-show {
        display: block;
    }

    .lg-show {
        display: none;
    }

    .section-title {
        padding: 0px 13px 27px 13px;
        font-size: 20px;
    }
    
    .foreword-title {
        padding-top: 50px;
    }

    .sec-title {
        padding: 55px 0px 10px 0px;
    }

    .sec-title img {
        height: 12vw;
    }


    /* kv */
    .kv-title img {
        width: 30vw;
        padding-top: 29vw;
    }

    .kv-title-2 img {
        width: 85vw;
        padding-bottom: 18vw;
    }

    

    /* section-2 */
    .foreword {
        width: 86vw;
        margin: 0 0 5vw 0;
        font-size: 4vw;
        line-height: 6vw;
    }

    .first-article-title {
        margin: -0.2vw 7vw;
        font-size: 5vw;
    }

    .first-article-words {
        padding: 2vw 0 5vw 0;
    }

    .owl-theme .item {
        height: 165vw;
        margin: 0vw 7vw;
    }

    .chart-title {
        font-size: 4vw;
    }

    .chart-intro {
        width: 80vw;
        font-size: 4vw;
        line-height: 6.5vw;
        padding-top: 3vw;
    }

    #chart01 {
        width: 87vw;
        height: 74vw;
    }

    #chart02, #chart03 {
        width: 85vw;
        height: 74vw;
    }

    #chart04, #chart05, #chart06 {
        width: 85vw;
        height: 40vw;
        top: -32px;
    }

    #chart07, #chart08, #chart09, #chart10 {
        width: 85vw;
        height: 110vw;
        padding: 0vw 20px;
    }

    i.fal {
        font-size: 10vw;
    }

    .fa-angle-left:before {
        left: 2%;
    }

    .fa-angle-right:before {
        right: 2%;
    }

    .read-more-chart a {
        padding: 0.8vw 2vw !important;
        right: -30vw !important;
        font-size: 4vw !important;
    }

    /* section-3 */
    .section3-wrapper {
        margin: -25vw 7vw 0vw;
        padding-top: 20vw;
    }

    .content-wrapper {
        display: inline-flex;
        align-items: center;
        flex-direction: column;
    }

    

    .tb-adm {
        width: 30vw;
        height: 30vw;
        padding: 0.2vw;
        border: solid 0.18vw #f1a200;
    }

    .intro-title {
        font-size: 4.65vw;
        line-height: 6.8vw;
        padding: 4vw 1vw;
    }

    .intro {
        width: 83vw;
        text-align: left;
        font-size: 4vw;
        line-height: 6vw;
        padding: 0 1vw;
    }

    .article-container {
        width: 70%;
    }

    .article-item:nth-child(even) .article-content {
        order: 1;
    }

    .article-item {
        display: inline-flex;
        align-items: center;
        flex-direction: column;
    }

    .article-img {
        width: 70vw;
    }

    .article-content {
        width: 70vw;
        margin: 4vw 0vw 10vw 0vw;
    }

    .article-title {
        font-size: 4.5vw;
        line-height: 6.5vw;
        padding-bottom: 2vw;
    }

    .article-title br {
        display: none
    }

    .article-intro {
        font-size: 4vw;
        line-height:6vw;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
    }

    .read-more-article a {
        padding: 0.8vw 2vw;
        right: -60vw;
        font-size: 4vw;
    }

    .orange {
        background: #f1a200 !important;
        right: -25.5vw !important;
        bottom: -4vw !important;
    }

    /* section-5 */

    #carousel-2 {
        width: 100%;
        z-index: 1;
        height: initial;
        left: initial;
        transform: initial;

    }

    #carousel-2.owl-carousel .owl-item img {
        width: 100%;
        height: initial;
    }

    .owl-bottom .fa-angle-left:before {
        left: 5%;
    }

    .owl-bottom .fa-angle-right:before {
        right: 5%;
    }

    .bottom {
        height: 100vw !important;
        margin: 0vw 17vw !important;
    }

    .carousel-title {
        font-size: 4.4vw;
        line-height: 6.5vw;
        margin: 2vw 0;
    }

    .carousel-intro {
        font-size: 4vw;
        line-height: 6vw;
        margin-bottom: 2vw;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
    }

    .ground {
        padding: 0.8vw 2vw;
        right: -24vw;
        font-size: 4vw;
    }

    #goToTop {
        right: 5px;
        top: 70%;
    }

    .icon__balloon svg {
        width: 45px;
    }

    .top-word {
        font-size: 15px;
    }

    footer p {
        font-size: 3vw;
    }

}


element.style {
    margin: 0px 0 0;
    line-height: 1.3 !important;
}