@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@200;300;400;500;600;700;900&display=swap');

* {
    box-sizing: border-box;
    vertical-align: top;
}

/*.setop { display: none }*/
.go2fb,
.scroll2top {
    display: none !important
}

body {
    overflow-x: hidden;
    background: url(../images/bg3.jpg) no-repeat top center;
    background-size: cover;
    background-attachment: fixed;
}

iframe {
    width: 100%;
}

body * {
    vertical-align: top;
}


.mobileMenuButton {
    display: none
}

.mainPageButton {
    position: sticky;
    position: -webkit-sticky;
    top: 0px;
    left: 0;
    width: 100%;
    margin-bottom: -36px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 50
}

.mainPageButton ul {
    margin: 0 auto;
    padding: 0px;
    width: 90%;
    max-width: 1440px;
    text-align: center;
    white-space: nowrap;
}

.mainPageButton ul li {
    display: inline-block;
    margin: 5px 0;
    padding: 5px 10px;
    white-space: nowrap;
}

.mainPageButton ul li a,
.mainPageButton ul li a:link {
    font: 16px/16px "arial", "微軟正黑體";
    color: #fff;
    white-space: nowrap;
}

.mainPageButton ul li a:hover {
    /*text-decoration: underline !important;*/
    border: 1px solid #fff;
}

.hasButton {
    position: relative;
    z-index: 1
}

.hasButton .secButton {
    display: none;
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    z-index: 2;
    background: rgba(0, 0, 0, 0.5)
}

.hasButton .secButton a {
    display: block;
    padding: 5px 0
}

.hasButton>a {
    color: #fff200 !important;
}

header.topBanner {
    position: relative;
    height: 550px;
    background: url(../images/topBanner231221.jpg) top center no-repeat;
    text-align: center;
}

header.topBanner h1 {
    display: block;
}



.allMenu {
    position: relative;
    width: 100%;
    height: auto;
    z-index: 9;
}

.allMenu.sticky {
    position: fixed;
    top: 0;
    left: 0;
}



.pageMenu {
    background: linear-gradient(to left, #3ba5db 0%,#64c7dd 100%); 
    text-align: center;
    /*box-shadow:0px 0px 5px rgba(0,0,0,0.7);*/
}

.pageMenu ul {
    width: 100%;
    margin: 0 auto;
}

.pageMenu ul li {
    display: inline-block;
    margin: 0px -2px;
}

.pageMenu ul li a {
    font: 600 24px/1.2 'Noto Sans TC','微軟正黑體';
    color: #ffffff;
    padding: 9px 30px;
    display: inline-block;
    transition: 0.3s;
    position: relative;
}

.pageMenu ul li a:hover,
.pageMenu ul li a.on {
    background: #fff4a0;
    color: #eb742c;
}

.pageMenu.st0 {
    fill: #FFF;
}

.pageMenu svg {
    width: 22px;
    height: 22px;
    display: inline-block;
}

.pageMenu ul li a:hover svg,
.pageMenu uls li a.on svg {
    transform: translateY(-5px);
}

.pageMenu a.on:after {
    content: "";
    width: 60px;
    position: absolute;
    left: 0px;
    top: -43px;
    height: 55px;
    background: url(../images/here3.png) top center no-repeat;
    z-index: -1;
    background-size: 100%;
}

.allMenu.sticky .pageMenu a.on:after {
    content: none;
}

@media screen and (max-width:1200px) {
    .pageMenu ul li a {
        font: 18px/1.4 "微軟正黑體";
        padding: 10px 10px;
    }
}

@media screen and (max-width:670px) {
    .pageMenu {
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        overflow-x: scroll;
    }

    .pageMenu ul {
        display: flex;
        flex-wrap: nowrap;
    }

    .pageMenu ul li {
        flex-grow: 1;
    }

    .pageMenu ul li a {
        font: 16px/1.4 "微軟正黑體";
        padding: 10px 7px;
        width: 100%;
    }




    .pageMenu a.on:after {
        content: none;
    }


}



/*
.topBanner { position: relative; width: 100%; z-index: -1; }
.topBanner h1 { position: absolute; top:30%; display: inline-block; width: 100%;  text-align: center;  text-shadow: 0 0 20px rgba(0,0,0,1);z-index: 5 }
.topBanner h1 .text { display: inline-block;  padding: 10px;;}
.topBanner h1 .text b { display: block;font: 100px/100px "arial","微軟正黑體"; color: #fff; }
.topBanner h1 .text small { display: inline-block; transform: translateY(-0px); padding: 2px 5px; font: 20px/20px "arial","微軟正黑體"; color: #fff;  letter-spacing: 5px; border:1px solid #fff;background: rgba(0,0,0,0.5)}
.topBanner .img { width: 100%; height: auto; overflow: hidden; display:  flex; vertical-align: top; align-items: center;justify-content:  center}
.topBanner .img img { margin:0 auto; width: auto; vertical-align: top; z-index: 1 }*/

.video-container {
    position: relative;
    padding-bottom: 40%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;
    width: calc(100% - 40px);
    margin: auto;
    position: relative;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 141%;
}



.bannerBase {
    margin: 20px 0 0 0;
    padding: 0;
}

.bannerBase .bannerArea {
    position: relative;
    margin: 0 auto;
    padding: 0px;
    width: 90%;
    max-width: 1440px;
    border-radius: 5px;
    z-index: 1;
    letter-spacing: -0.31em;
    /* Webkit: collapse white-space between units */
    *letter-spacing: normal;
    /* reset IE < 8 */
    *word-spacing: -0.43em;
    /* IE < 8: collapse white-space between units */
    text-rendering: optimizespeed;
    /* Webkit: fixes text-rendering: optimizeLegibility */
}



.bannerBase .bannerArea img {
    width: 100%;
    vertical-align: top
}

.bannerBase .bannerArea .box3 {
    margin: 0 5px;
    display: inline-block;
    width: 30%
}

.itemBase {
    padding: 0;
    max-width: 1400px;
    margin: 0 auto;
}

.itemBase .itemArea {
    margin: 0 auto;
    padding: 0px;
    width: 90%;
    max-width: 1440px;
}

.itemArea.movie {
    margin-bottom: 30px;
}

/*C23 use*/
.carrier {
    margin: 0 0 20px 0;
    width: 100%;
    height: auto;
    text-align: center;
}

.intro-anchors {
    display: none;
}

.box-head {
    display: none;
}

.carrier .box-head p {
    display: block;
}

.carrier h4 {
    position: relative;
    vertical-align: top;
    display: block;
    margin: 0;
    padding: 20px;
    width: 100%;
    height: auto;
    letter-spacing: normal;
    font: 30px/30px "微軟正黑體", "arial";
    color: #f85523;
    text-align: center;
}

.carrier ul {
    display: block;
    padding: 20px;
    width: 100%;
}

.carrier ul li {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 20px 0;
    padding: 0 0 25px 0;
    text-align: left;
    /* border-top:5px solid #f85523*/
    ;
    box-shadow: 5px 5px 10px #c9d0d8;
    transition: .5s;
    -webkit-transition: .5s;
    background: #fff
}

.carrier ul li a {
    display: block;
    padding: 0 0 10px 10px;
    font: 16px/20px "arial", "微軟正黑體";
    color: #0a72ff
}

.carrier ul li a strong {
    margin: 0 0 10px -10px;
    padding: 10px;
    font: 20px/30px "arial", "微軟正黑體";
    display: block;
    text-align: left;
    color: #545454;
    transition: .5s;
    -webkit-transition: .5s;
}

.carrier ul li em {
    position: absolute;
    bottom: 10px;
    right: 20px;
    font: 16px/16px "arial", "微軟正黑體";
    color: #f85523;
}

.carrier ul li em span {
    font: 18px/18px "arial", "微軟正黑體";
}

.carrier ul li:hover {
    border: 1px solid #f85523;
}

.carrier ul li:hover a strong {
    background: #f85523;
    color: #fff
}


/*C26*/
/*
.group-type-ph { text-align: center;display: block; padding-top: 30px; width: 100%; max-width: 1400px;margin:0 auto; padding-bottom: 20px; }
.group-type-ph .ph { display: inline-block; position: relative; margin:10px; width:300px; text-align: left; vertical-align: top; overflow: hidden;}
.group-type-ph .ph a { display: block; width: 300px; height: 200px; }
.group-type-ph .ph .ph-img,.group-type-ph .ph .ph-img img{display: block;width:300px ; height:200px;margin:0 auto;}
.group-type-ph .ph .ph-img { position: absolute; width: 300px; height: 200px; z-index: 1;
transition: 1s;  -webkit-transition: 1s; }
.ph-title { position: absolute; bottom: 0; padding:2% 5%; width: 100% ; font: bold 16px/20px "arial","微軟正黑體"; text-align: center; color: #fff; background: #ae0a02; letter-spacing: 1px; z-index: 2}
.ph-detail { margin: 0 auto; padding:5% 3% 1% 3%; width: 100% ; font: 14px/20px "arial","微軟正黑體"; letter-spacing: 1px; color: #fff; overflow: hidden; background: rgba(0,0,0,0.7);
opacity: 0 ;transition: 1s;  -webkit-transition: 1s;}
.ph img { width: 300px; height: 200px; }
.ph-feature { margin: 0 auto; padding: 0 3%; width:100%; text-align: left;font: bold 14px/20px "arial","微軟正黑體"; color: #fff;background: rgba(0,0,0,0.7);
opacity: 0 ;transition: 1s;  -webkit-transition: 1s; }
.ph em { display: block; padding-bottom: 100px;  width: 100%; font: bold 16px/30px "arial","微軟正黑體"; color: #000; text-align: center; letter-spacing: -2px; color: #fff200; background: rgba(0,0,0,0.7);
opacity: 0;transition: 1s; -webkit-transition: 1s;}
.ph em span{ margin: 0 0 0 -5px ; font: bold 30px/30px "arial","微軟正黑體"; color:  #fff200;}
.ph em i { margin: 0 0 0 -5px }
.ph a,
.ph a:link { color: #000 }

.group-type-ph .ph:hover .ph-img { z-index: -1 ; } 
.group-type-ph .ph:hover .ph-detail { opacity: 1 }
.ph:hover .ph-feature { opacity: 1 }
.ph:hover em { opacity: 1 }
 */


.informationBase {
    margin: 20px 0 100px 0;
    padding: 0;
}

.informationBase h2 {
    margin: 0px 0 20px 0;
    font: 30px/30px "arial", "微軟正黑體";
    color: #457cce;
    text-align: center;
    letter-spacing: normal;
}

.informationBase .informationArea {
    position: relative;
    margin: 0 auto;
    padding: 0px;
    width: 90%;
    max-width: 1440px;
    border-radius: 5px;
    z-index: 1;
    /*text-align: center;*/
    letter-spacing: -0.31em;
    text-rendering: optimizespeed;
}

.informationBase .informationArea * {
    vertical-align: top;
}

.informationBase .informationArea img {
    width: 100%;
    vertical-align: top
}

.informationBase .informationArea h3 {
    padding: 5px 0;
    width: 100%;
    font: 20px/16px "arial", "微軟正黑體";
    color: #fff;
    text-align: center;
    letter-spacing: normal;
    background: #000
}

.informationBase .informationArea p {
    padding: 5px;
    width: 100%;
    font: 16px/24px "arial", "微軟正黑體";
    color: #555;
    text-align: center;
    letter-spacing: normal;
}

.informationBase .informationArea .box3 {
    margin: 0 5px;
    cursor: pointer;
    /*background: #fff; border: solid 1px #eaeaea;*/
}

.informationShow {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999
}

.informationShow .box3 {
    margin: 20px auto 0 auto;
    width: 90%;
    max-width: 800px;
}

.informationShow .box3 img {
    width: 100%
}

.informationShow .box3 h3 {
    padding: 5px 0;
    width: 100%;
    font: 30px/36px "arial", "微軟正黑體";
    color: #fff;
    text-align: center;
    letter-spacing: normal;
}

.informationShow .box3 p {
    padding: 5px;
    width: 100%;
    font: 18px/30px "arial", "微軟正黑體";
    color: #fff;
    text-align: center;
    letter-spacing: normal;
}

.informationShow .closeInformationShow {
    display: inline-block;
    padding: 5px 10px;
    font: 18px/18px "arial", "微軟正黑體";
    color: #fff;
    text-align: center;
    border: 1px solid #fff;
    letter-spacing: normal;
    cursor: pointer;
}


@media only screen and (max-width: 1300px) {
    .topBanner .video video {
        margin-top: 0;
    }
}


@media only screen and (max-width: 768px) {
    .mobileMenuButton {
        display: inline-block;
        position: fixed;
        bottom: 0;
        left: calc(50% + 15px);
        padding: 5px;
        width: auto;
        height: auto;
        z-index: 999;
        background: rgba(0, 0, 0, 0.5)
    }

    .mainPageButton {
        position: fixed;
        top: -100vh;
        left: 0;
        width: 100%;
        height: 100vh;
        margin-bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        z-index: 98;
    }

    .mainPageButton ul {
        margin: 0 auto;
        padding: 0px;
        width: 90%;
        max-width: 1440px;
        text-align: center;
    }

    .mainPageButton ul li {
        display: block;
        margin: 5px 0;
        padding: 5px 10px;
    }

    .mainPageButton ul li a,
    .mainPageButton ul li a:link {
        font: 16px/16px "arial", "微軟正黑體";
        color: #fff
    }


}

@media only screen and (max-width: 768px) {

    header.topBanner {
        height: auto;
        background: none;
    }

    /* header.topBanner h1 {
        display: block;
    }*/

    header.topBanner h1 img {
        width: 100%;
        max-width: 768px;
    } 

    /*.topBanner h1 { position: absolute; top:20%; width: 100%; }
.topBanner h1 .text b { font:30px/30px "arial","微軟正黑體"; color: #fff; text-align: center;  }
.topBanner h1 .text small { display: inline-block; transform: translateY(0px); padding: 2px 5px; font: 16px/16px "arial","微軟正黑體";  letter-spacing: 5px; border:1px solid #fff; }

.topBanner .img { height: auto; }
.topBanner .img img { width: 100% }*/

    .itemBase {
        padding-top: 5%;
        width: 90%;
        margin: 0 auto;
    }

    .hasButton {
        position: relative;
        z-index: 1;
    }

    .hasButton .secButton {
        display: block;
        position: static;
        width: 100%;
        z-index: 2;
        background: rgba(255, 255, 255, 0.2);
    }

    .hasButton .secButton a {
        display: block;
        padding: 5px 0;
    }

    .carrier ul li {
        padding-bottom: 8%;
    }

    .carrier ul li a img {
        display: block;
        margin: 0 auto;
        margin-left: -2%;
        margin-top: -2%;
        width: 104%;
        height: auto;
    }

    .carrier ul li a {
        text-align: left;
        padding: 2%;
    }


    /*C26*/
    /*.group-type-ph .ph { display: inline-block; position: relative; margin:10px; width:300px; text-align: left; vertical-align: top; overflow: hidden;}
.group-type-ph .ph a { display: block; width: 300px; height:auto; }
.group-type-ph .ph .ph-img,.ph-title { position: static;}
.ph-detail,.ph-feature,.ph em { opacity: 1 ; color: #000 ; background: none }
.ph em { display: block; padding-bottom:0; color:#ae0a02 ; }
.ph em span { color:#ae0a02 }*/

}





.goTop{
  display: inline-block;
  position: fixed;
  z-index: 99;
  right: 30px;
  bottom: 30px;
  padding: 10px 10px 2px 10px;
  border-radius: 5em;
  font-size: 12px;
  line-height: 3em;
  text-align: center;
  color: #fff;
  background-color: #eb742c;
  text-decoration: none;
}

.goTop:hover{
    padding-top: 30px;
    background-color: #eb6817;
    transition: all 0.2s;
  }
  .goTop::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 18px;
    width: 0;
    height: 0;
    border: 4px solid #000;
    border-color: transparent transparent #fff;
  }