/*************************************  banner *************************************/

.banner {
    padding-top: 0px;
    margin-bottom: 0px;
}


.banner .bigLeftArrowWhite,
.banner .bigRightArrowWhite {
    width: 30px;
    height: 194px;
    top: 50%;
    margin-top: -60px;
}


.banner .bigLeftArrowWhite {
    background-image: url(../img/icons/bigLeftArrowWhiteD.svg);
}

.banner .bigRightArrowWhite {
    background-image: url(../img/icons/bigRightArrowWhiteD.svg);
}


.banner .bigLeftArrowWhite {
    left: 30px;
}

.banner .bigRightArrowWhite {
    right: 30px;
}


/*************************************  articles *************************************/

.articles {
    padding-left: 0px;
    padding-right: 0px;
    overflow-x: hidden;
}

/* 桌機版：左右兩欄各自往下堆疊，上下圖片連在一起 */
.articles .articlesCol {
    display: block;
}

.articles a .oneArticle {

    margin-bottom: 0px;
    position: relative;
}



/* 卡片高度由圖片決定（圖片完整不裁切），文字區限制在圖片高度內，上下圖片才會連在一起 */
.articles a .oneArticle .row > div:last-child {
    position: relative;
}

.articles a .oneArticle .textArea {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 15px;
    right: 15px;
    overflow: hidden;
    padding: 0px;
    margin-right: 15px;
    padding-top: 30px;
}

.articles a .oneArticle .textArea .myDetail {
    margin-bottom: 0px;
    -webkit-line-clamp: 5;
}

.articles a .oneArticle .textArea h5 {
    margin-top: 15px;
}

/* 較小的桌機螢幕：圖片變矮，字體維持原本大小，減少顯示行數，超過以「...」結尾 */
@media (max-width: 1599px) {
    .articles a .oneArticle .textArea {
        padding-top: 15px;
    }

    .articles a .oneArticle .textArea h5 {
        margin-top: 0px;
    }
}

@media (max-width: 1399px) {
    .articles a .oneArticle .textArea .myDetail {
        -webkit-line-clamp: 4;
    }
}

@media (max-width: 1199px) {
    .articles a .oneArticle .textArea {
        padding-top: 10px;
    }

    .articles a .oneArticle .textArea .myDetail {
        -webkit-line-clamp: 3;
    }
}

.articles a .oneArticle .textArea .date {
    position: absolute;
    bottom: 15px;
    left: 0px;

}


/*************************************  greyArea *************************************/
.greyArea{
    padding-top:45px;
}


.greyArea .whiteBox{
    padding: 60px;
    padding-bottom: 30px;
}


.iconThree {
    text-align: right;
}

.iconRightTextArea{
    text-align: left;
}

.service-intro {
    margin-top: 90px;
}

.service-other {
    padding-top: 90px;
}