@charset "utf-8";

/* CSS Document */

* {
    font-family: 微軟正黑體;
    /*	font-size: 24px;*/
}

#index {
    font-size: 14px;
}

body {
    width: 100%;
    overflow-x: hidden;
}

a,
a:hover {
    text-decoration: none;
    outline: none;
}


/*------------後台 HTML編輯器用-------------*/

.img-w800 {
    width: 90%;
    height: auto;
    max-width: 800px;
    margin: 30px 0px;
}

.img-w50per,
.img-w100per {
    width: 100%;
    height: auto;
    margin: 30px 0px;
}

.img-btn {
    max-width: 45%;
    margin: 2.5%;
}

.table-a {
    border: 0px solid transparent;
    min-width: 100%;
}

.table-a th {
    background-color: #B5D8E3;
    color: #444444;
    padding: 10px;
    /*	border-bottom: 1px solid rgba(255,255,255,0.3);*/
}

.table-a tr:nth-child(2n) th {
    background-color: #ABCDD8;
}

.table-a thead th {
    background-color: #0075ad;
    color: white;
    padding: 10px;
}

.table-a td {
    padding: 10px;
}

.table-a tr:nth-child(2n) {
    background-color: #f5f8fc;
}


/*------------後台 HTML編輯器用↑↑↑↑-------------*/

#navbar {
    height: 85px;
    border-bottom: 1px solid #d2d2d2;
    color: #0075ad;
    font-size: 18px;
    background-color: white;
}

#navbar .logo-bg {
    height: 100px;
    width: 260px
}

#navbar .logo {
    top: 0px;
    left: 5px;
}

#navbar .cmtc {
    top: 35px;
    left: 90px;
    font-size: 14px;
}

#navbar .mobile-menu,
#navbar .mobile-close {
    right: 10px;
    bottom: 20px;
    top: 40px;
    z-index: 100;
    transform: rotate(-180deg);
    opacity: 0;
    transition: all .3s;
}

#navbar .mobile-menu.show,
#navbar .mobile-close.show {
    transform: rotate(0deg);
    opacity: 1;
    /*    transition: all .3s ;*/
}

#navbar .nav {
    width: 100vw;
    top: 85px;
    left: -1000px;
    opacity: 0;
    transition: all 0.5s cubic-bezier(.1, .89, .37, 1);
    background-color: #0075ad;
}

#navbar .nav.show {
    top: 85px;
    left: 0px;
    opacity: 1;
    transition: all 0.5s cubic-bezier(.1, .89, .37, 1);
}

#navbar .nav .item {
    width: 100vw;
    top: 10px;
    height: 44px;
    /*	    border-bottom: 1px #000000 solid;*/
    color: white;
    /*    line-height: .8em;*/
    /*	font-size: 18px;*/
    /*	background-color:#0075ad;*/
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.menu-lay1 {
    padding: 10px 15px 0px 15px;
}

.btn-show {
    position: absolute;
    /*	top: 10px;*/
    margin-top: -30px;
    right: 15px;
    /*	z-index: 3;*/
    display: block;
}

.main-menu {
    top: 40px;
    height: 400px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.menu-lay2 {
    margin-left: 0px;
    padding: 16px 0px 8px 30px;
    /*	padding-left: 30px;*/
    color: #0075ad;
    border-left: 0px solid rgba(86, 86, 86, 0.5);
    border-bottom: 1px solid rgba(86, 86, 86, 0.1);
    text-align: left;
    background-color: white;
}

.menu-lay2-car {
    font-size: 14px;
    /*	margin-left: 20px;*/
    padding-top: 0px;
    padding-left: 15px;
    color: #0075ad;
    margin-top: 7px;
    border-left: 1px solid rgba(86, 86, 86, 0.5);
    text-align: center!important;
    height: 18px;
    background-color: white;
}

.menu-lay2-all,
#show-product {
    background-color: white;
}

.index-lay2-car {
    /*	margin-left: 20px;*/
    padding: 0px 15px;
    color: #0075ad;
    margin-top: 7px;
    border-left: 1px solid rgba(86, 86, 86, 0.5);
    text-align: center!important;
    height: 18px;
}

.index-lay2-car.active {
    color: #0075ad;
    font-weight: bold;
    transition: all 0.3s;
}

#menu-lay2-car-all a {
    margin-left: 10px;
}

.menu-car {
    color: #444444!important;
    text-align: center;
    /*	width: 110%!important;*/
}

.menu-car-pic {
    margin-top: 30px;
    width: 120%!important;
    max-width: 280px;
    /*	min-width: 120px;*/
    /*	left:-20px;*/
    /*	margin: 0px 10px 0px -20px;*/
}

.menu-lay2-car.active {
    color: rgba(0, 235, 255, 1);
    transition: all 0.3s;
}


/*	------------------- slick------------------*/

html,
body {
    margin: 0;
    padding: 0;
}

* {
    box-sizing: border-box;
}

.center img {
    width: 180px;
}

.slider {
    width: 80%;
    margin: 0px auto;
}

#sec-honor .slider {
    width: 95%;
    margin: 0px auto;
}

.slick-slide {
    margin: 0px 0px;
}

.slick-slide img {
    width: 100%;
}

.slick-prev:before,
.slick-next:before {
    font-size: 50px!important;
    /*箭頭圖片大小*/
    /*	color: transparent;*/
    /*背景圖於slick-theme.css  .slick-prev:before  .slick-next:before 修改*/
}

.slick-slide {
    transition: all ease-in-out 0s;
    /*	opacity: .2;*/
    /*menu修改 原.3*/
}

.slick-active {
    /*	opacity: .5;*/
}

.slick-current {
    opacity: 1;
}

#sec-banner {
    width: 100%;
    margin: 0px;
}


/*	------------------- slick結束------------------*/

#show-about,
#show-product,
.show-product-car,
#show-service,
#show-opetation,
#show-invest,
#show-csr,
#show-employee {
    position: relative;
    width: 100vw;
}

#car-0,
#car-1,
#car-2,
#car-3 {
    display: none!important;
    /*		visibility: hidden!important;*/
    opacity: 0;
    z-index: 0;
}

#car-0.show,
#car-1.show,
#car-2.show,
#car-3.show {
    display: block!important;
    opacity: 1;
    transition: all 0.3s;
    z-index: 1;
}

#index-car-0,
#index-car-1,
#index-car-2,
#index-car-3 {
    display: none!important;
    /*		visibility: hidden!important;*/
    opacity: 0;
    z-index: 0;
    width: 130%;
    margin-left: -18%;
}

#index-car-0.show,
#index-car-1.show,
#index-car-2.show,
#index-car-3.show {
    display: block!important;
    opacity: 1;
    transition: all 0.3s;
    z-index: 1;
}


/*--------------------------------- footer ----------------------------------*/

.bg-blue {
    width: 100vw;
    left: 0px;
    overflow-x: hidden;
    background-color: #0075ad;
    border: none;
}

.footer-tit {
    margin-left: 10%;
}

footer,
footer a,
footer a:hover {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    text-decoration: none;
}

footer {
    font-size: 10px;
}

.ft-cont-all a {
    font-size: 16px;
}

.ft-cont-all a:hover {
    font-size: 16px;
}

.ft-cont {
    margin-left: 5%;
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 10px 0px 10px 5%;
    width: 90%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-tit,
.footer-tit:hover {
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
}

.line-white {
    background-color: rgba(255, 255, 255, 0.3);
    width: 90%;
    margin: 5px 15px 0px 10px;
    margin-left: 5%;
}

.copyright a,
.copyright a:hover {
    font-size: 8pt;
}


/*--==============================================================   992up ===============================================================================	*/

@media screen and (min-width: 992px) {
    #index {
        font-size: 14px;
    }
    /*------------後台 HTML編輯器用-------------*/
    .img-w50per {
        width: 48%;
        margin: 10px 5px;
    }
    .img-w100per {
        width: 100%;
        margin: 10px 0px;
    }
    .table-a {
        border: 0px solid transparent;
        min-width: auto;
    }
    /*------------後台 HTML編輯器用↑↑↑↑-------------*/
    #navbar {
        font-size: 14px;
    }
    #navbar .nav {
        top: 30px;
        left: 280px;
        right: 10px;
        opacity: 1;
        width: calc(100vw - 280px);
        background-color: transparent;
    }
    #navbar .nav .item {
        position: relative;
        width: auto;
        padding: 0px 10px;
        border-bottom: 1px solid transparent;
        color: #0075ad;
        /*	background-color:#0075ad;*/
        /*	background-color:transparent;*/
    }
    #nav-invest {
        margin-right: 20px;
    }
    #nav-opetation {
        margin-right: 20px;
    }
    #navbar .nav .item.active {
        border-bottom: 3px solid #ff8c00;
        transition: all 0s;
        /*menu修改*/
    }
    #show-about,
    #show-product,
    #show-service,
    #show-opetation,
    #show-invest,
    #show-csr,
    #show-employee {
        position: absolute;
        top: 54px;
        width: 100vw;
        height: 60px;
        /*menu修改*/
        padding-right: 50px;
        /*menu修改*/
        background-color: rgba(0, 117, 173, 1);
        color: white;
        visibility: hidden;
        opacity: 0;
    }
    #index-pro-posi {
        position: relative;
        height: 450px;
    }
    .index-show-product-car {
        /*定位 */
        position: absolute;
        top: 180px;
        /*		background: blue;*/
        right: 0px;
        width: 100%;
    }
    .show-product-car {
        position: absolute;
        top: 60px;
        width: 100vw;
        height: 300px;
        right: 0px;
        /*menu修改 新增*/
        background-color: rgba(255, 255, 255, 1);
        color: white;
        /*	visibility: hidden;*/
        /*	opacity: 0;	*/
    }
    .menu-lay2-car {
        font-size: inherit;
    }
    #show-about a {
        color: white;
    }
    /*------------------  子選單出現  -------------------	*/
    #show-about:hover,
    #nav-about:hover+#show-about,
    /**/
    #show-product:hover,
    #nav-product:hover+#show-product,
    #nav-product:hover+.show-product-car,
    /**/
    #show-service:hover,
    #nav-service:hover+#show-service,
    /**/
    #show-opetation:hover,
    #nav-opetation:hover+#show-opetation,
    /**/
    #show-invest:hover,
    #nav-invest:hover+#show-invest,
    /**/
    #show-csr:hover,
    #nav-csr:hover+#show-csr,
    /**/
    #show-employee:hover,
    #nav-employee:hover+#show-employee {
        visibility: visible;
        opacity: 1;
        transition: all 0.3s;
    }
    /*----子選單出現-結束------*/
    .small-nav {
        z-index: 2;
    }
    .main-menu {
        height: 54px;
        overflow-y: visible;
        overflow-x: visible;
    }
    .menu-lay1 {
        padding: 0px;
        padding-top: 8px;
        text-align: center;
        background-color: transparent;
    }
    .menu-lay2 {
        margin-left: 0px;
        padding: 20px 40px 0px 0px;
        /*menu修改*/
        color: white;
        border-left: 0px;
        text-align: center;
        border-bottom: 0px;
        background-color: transparent;
    }
    .menu-lay2-car {
        margin-left: 00px;
        margin-right: 40px;
        padding: 13px 0px 0px 0px;
        /*menu修改*/
        color: white;
        border-left: 0px solid rgba(86, 86, 86, 0.5);
        /*	border-bottom: 3px solid rgba(255,140,0,0);*/
        text-align: center;
        /*	margin-top: 0px;*/
        height: 33px;
        /*	background-color: rgba(86,86,86,0.5);*/
        background-color: transparent;
    }
    #menu-lay2-car-all {
        /*menu修改 新增此*/
        padding-right: 20px;
    }
    .btn-show {
        display: none;
    }
    .menu-car-pic {
        margin-top: 30px;
        /*		width: 280px;*/
        width: 105%!important;
    }
    .slick-prev:before,
    .slick-next:before {
        color: black;
    }
    #sec-honor .slider {
        width: 100%;
        margin: 0px auto;
    }
    /*slick若使用display:none會顯示異常,使用z-index解決	*/
    #car-0,
    #car-1,
    #car-2,
    #car-3 {
        display: block!important;
        /*		visibility: hidden!important;*/
        opacity: 0;
        z-index: 0;
    }
    #car-0.show,
    #car-1.show,
    #car-2.show,
    #car-3.show {
        /*	display: block!important;*/
        opacity: 1;
        transition: all 0s;
        /*menu修改*/
        z-index: 2;
    }
    #index-car-0,
    #index-car-1,
    #index-car-2,
    #index-car-3 {
        display: block!important;
        /*		visibility: hidden!important;*/
        opacity: 0;
        z-index: 0;
        width: 100%;
        margin-left: 0px;
    }
    #index-car-0.show,
    #index-car-1.show,
    #index-car-2.show,
    #index-car-3.show {
        /*		display: block!important;*/
        opacity: 1;
        transition: all 0s;
        /*menu修改*/
        z-index: 2;
    }
    /*------------------------------footer----------------------------------------------------*/
    footer .item {
        padding-left: 2%;
        width: 14%;
    }
    .ft-cont-all a {
        font-size: 12px;
    }
    .ft-cont-all a:hover {
        font-size: 12px;
    }
    .footer-tit {
        margin-left: 15px;
    }
    .ft-cont {
        margin-left: 0px;
        margin-bottom: 0px;
        margin-top: 10px;
        border-bottom: 0px;
        padding: 0px 0px;
        width: 100%;
    }
    footer,
    footer a,
    footer a:hover {
        color: rgba(255, 255, 255, 0.7);
        font-size: 10px;
        text-decoration: none;
    }
    .copyright a {
        font-size: 10px;
    }
    .line-white {
        background-color: rgba(255, 255, 255, 0.3);
        width: 100%;
        margin: 5px 15px 5px 0px;
        margin-left: 0%;
    }
}


/*------------------------------解決IE10.11問題----------------------------------------------------*/


/*解決IE10.IE11子選單位置問題    參考網站 → https://ithelp.ithome.com.tw/articles/10196809  */

@media screen and (-ms-high-contrast: active),
(-ms-high-contrast: none) {
    #show-about,
    #show-product,
    #show-service,
    #show-opetation,
    #show-invest,
    #show-csr,
    #show-employee {
        left: -280px;
    }
    .show-product-car {
        left: -0px;
    }
    /*解決IE子選單因時間落差無法選到的問題*/
    #show-about:hover,
    #nav-about:hover+#show-about,
    /**/
    #show-product:hover,
    #nav-product:hover+#show-product,
    #nav-product:hover+.show-product-car,
    /**/
    #show-service:hover,
    #nav-service:hover+#show-service,
    /**/
    #show-opetation:hover,
    #nav-opetation:hover+#show-opetation,
    /**/
    #show-invest:hover,
    #nav-invest:hover+#show-invest,
    /**/
    #show-csr:hover,
    #nav-csr:hover+#show-csr,
    /**/
    #show-employee:hover,
    #nav-employee:hover+#show-employee {
        transition: all 0s;
    }
}


/*------------------------------cookie----------------------------------------------------*/

#cmc8007 {
    position: fixed;
    left: 0px;
    right: 0px;
    background-color: rgba(0, 0, 0, 0.7);
    bottom: 0px;
    z-index: 10;
}

#cmc8007 .cookie {
    color: white;
    font-size: 14px;
    /*    padding: 10px;*/
}

#cmc8007 .cookie a,
#cmc8007 .cookie a:hover {
    color: white;
    font-size: 14px;
    text-decoration: none;
    /*    padding: 10px;*/
}


/*------------------------------will-show----------------------------------------------------*/

.will-show {
    opacity: 0;
    transform: translate(0px, 100px);
    transition: 0.5s all;
}

.has-shown {
    opacity: 1;
    transform: translate(0px, 0px);
    transition: 0.5s all;
}


/*------------------------------html元素----------------------------------------------------*/

h2 {
    font-size: 20px;
}

h3::before {
    content: '';
    background-color: #0076ae;
    width: 5px;
    height: 30px;
    position: absolute;
    left: 20px;
}

h3 {
    color: #444444!important;
    /*            border-left: 5px solid #0076ae;*/
    padding-left: 30px!important;
    margin-top: 25px!important;
    font-weight: 600!important;
}

p {
    color: #444444;
    /*	font-size: 16px;*/
}