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

html,body{
    font-family:Arial,'jf-openhuninn','Noto Sans TC','微軟正黑體',sans-serif;
    font-size:10px;
    color:#000;
    text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    height:100%
}

@media screen and (max-width: 1336px) {
    html {
        font-size:.7485vw;
    }

}
@media screen and (max-width: 768px) {
    html {
        font-size:10px;
    }
}
@media screen and (max-width: 767px) {
    html {
        font-size: 1.3333vw;
    }
}

@media screen and (max-width: 750px) {
    html {
        font-size:10px;
    }
}
@media screen and (max-width: 749px) {
    html {
        font-size: 1.3333vw;
    }
}

:root{--clr-red:#ca2420;
    --clr-yellow:#f89829;
    --clr-yellow2:#f7b048;
    --clr-blue:#00539b;
    --clr-gray:#6c6c6c;
    /*background: linear-gradient(180deg, #FFEFB8 0%, #FFC6B8 100%);*/
}

/*.arboria{font-family:arboria,Arial,'Noto Sans TC','微軟正黑體',sans-serif}*/

.c-white{color:#fff}
.c-red{color:#e64415}
.c-red-100{color:#ff1743}
.c-yellow{color:#f89829}
.c-yellow2{color:#f7b048}
.c-blue{color:#00539b}
.c-gray{color:#666}
.c-gray-100{color:#e2e2e2}
.fs-s{font-size:1rem}
.fs-b{font-size:1.75rem}
.fs-l{font-size:2rem}
.l-h12{line-height:1.2em}
.l-h14{line-height:1.4em}
.l-h16{line-height:1.6em}
.l-h18{line-height:1.8em}
.l-s-01{letter-spacing:-.1px}
.l-s-02{letter-spacing:-.2px}
.l-s-03{letter-spacing:-.3px}
.l-s-04{letter-spacing:-.4px}
.l-s-05{letter-spacing:-.5px}
.l-s-1{letter-spacing:-1px}
.l-s-2{letter-spacing:-2px}
.l-s-3{letter-spacing:-3px}
.l-s-4{letter-spacing:-4px}
.l-s1{letter-spacing:1px}
.l-s-em-05{letter-spacing:.05em;letter-spacing:.06em}
.v-a-t{vertical-align:top}
.t-justify{text-align:justify;text-justify:distribute}
.m-b100{margin-bottom:100px!important}
.m-b90{margin-bottom:90px!important}
.m-b80{margin-bottom:80px!important}
.m-b70{margin-bottom:70px!important}
.m-b65{margin-bottom:65px!important}
.m-b60{margin-bottom:60px!important}
.m-b50{margin-bottom:50px!important}
.m-b40{margin-bottom:40px!important}
.m-b45{margin-bottom:45px!important}
.m-b35{margin-bottom:35px!important}
.m-b30{margin-bottom:30px!important}
.m-b25{margin-bottom:25px!important}
.m-b20{margin-bottom:20px!important}
.m-b15{margin-bottom:15px!important}
.m-b10{margin-bottom:10px!important}
.m-b5{margin-bottom:5px!important}
.m-t60{margin-top:60px!important}
.m-l5{margin-left:5px}
.m-l10{margin-left:10px}
.m-r5{margin-right:5px}
.m-r10{margin-right:10px}
.m-auto,.mix-box .loadingimg{margin:0 auto}
.t-a-c{text-align:center!important}
.t-a-r{text-align:right!important}
.t-a-l{text-align:left!important}
.loading-txt,.qNum,.t-c{text-align:center}
.d-table{display:table}
.row-l{display:flex;flex-direction:row}
.row-r{display:flex;flex-direction:row-reverse}
.flex-start{justify-content:flex-start}
.flex-end{justify-content:flex-end}
.center{justify-content:center}
.space-between{justify-content:space-between}
.space-around{justify-content:space-around}
.t-d-u{text-decoration:underline}
.pc{display:initial}
.mb{display:none}
.nonscroll{position:static;overflow-y:hidden}
.aifs {
    align-items: flex-start !important;
}
.jcfs {
    justify-content: flex-start !important;
}
img{width: 100%;display: block;}

.wrap{
    position: relative;
    overflow: hidden;
}
.ing{position: absolute;left: 50%;top: 50%;}


.container{
    width: 144rem;
    padding: 0 12rem;
    margin:0 auto;
}


section{
    position: relative;
    font-size: 2.2rem;
    line-height: 1.5em;
}

header{
    background: #F7F7F7 url(../images/header.png) center right no-repeat;
    background-size: auto 100%;
    position: fixed;top: 0;left: 0;
    z-index: 9;
    width: 100%;
    -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  z-index: 99;
}
.header-h{height: 160px;}
header .logo{display: flex;justify-content: center;align-items: center;}
header .logo img{width: 80px;}
header .logo p{color: #23314C;font-size: 32px;margin-left: .5em;line-height: 1.25em;font-weight: bold;}
header .logo p span{font-size: 19px;display: block;line-height: 1em;}
header .container,nav .container{
    padding: 0;
    display: flex;
    margin:0 auto;
    padding: 15px 0;
    justify-content: space-between;
    align-items: center;
}

nav{
    background: #E48039;
    position: fixed;
    top: 109px;
    /*padding: 0 8rem;*/
    width: 100%;
    z-index: 99;
}
nav .container{
    padding: 0;
}

nav ul{
    display: flex;justify-content: center;align-items: center;
}

nav ul li{
    cursor: pointer;
    padding:0 2.8rem;
    

}
nav .serach-bar{
    width: 200px;
    height: 35px;
    border-radius: 20px;
    background: #fff;
    position: relative;
}
nav .serach-bar input{
    background: transparent;
    outline: none;
    border:none;
    width: 100%;
    height: 100%;
    font-size: 18px;
    padding: 0 1em;
}
.search-btn{
    position: absolute;
    width: 20px;
    outline: none;
    border:none;
    background:transparent;
    padding: 0;
    margin:0;
    right: 0;
    z-index: 2;top: 0;
    margin-right: 1em;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.search-btn img{width: 100%;}

.nav-sublist {
    position: absolute;
    width: 100%;
    display: none;
}
.button-style-nav{position: relative;min-width: 190px;}
.button-style-nav div.group-title{display: flex;justify-content: center;align-items: center;color: #FFF;
font-size: 18px;
font-weight: 400;
height: 50px;
padding: 0 1em;

}
.button-style-nav div.group-title p{text-align: center;}
.button-style-nav div.group-title span{display: block;font-size: 9px;}
.button-style-nav > div.group-title::after{
    content: "";
    width: 17px;
    height: 11px;
    background: url(../images/arrow.svg) center center no-repeat;
    margin-left: .5em;
}
.button-style-nav div i{height: 26px;padding: 0 .5em 0 0;}
.button-style-nav div i img{height: 100%;width: auto;}

.button-style-nav .nav-sublist li{
    background: rgba(255, 227, 204, .8);
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
    padding: 0;
}
.nav-item2 .button-style-nav .nav-sublist li{background:rgba(115, 175, 229, .8); }
.nav-item3 .button-style-nav .nav-sublist li{background:rgba(132, 193, 99, .8); }

.button-style-nav .nav-sublist li:not(:last-child){border-bottom: 1px solid #fff;}

.button-style-nav .nav-sublist p{
    color: #FFF;
    font-size: 18px;
    font-weight: 400;
    /*height: 66px;*/
    padding: 0 1em;
    padding: 0;
    background: transparent;
    text-align: center;
    color: #000;
    padding: .75em 0;
}
.button-style-nav .nav-sublist span{
    display: block;
    font-size: 12px;
    color: #000;

}

.fixed-btns{
    position: fixed;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    z-index: 10;
}

.fixed-btns a{
    width: 46px;
    position: relative;
    display: block;
    margin:10px 0;
}
.fixed-btns a img{width: 100%;}



.item-list{
    margin:0 auto;
    width: calc((28rem + 7rem) * 3);
    display: flex;
    flex-wrap: wrap;
}


.item-box{
    width: 28rem;
    margin:1.5rem 3.5rem;
    padding: 1.5rem;
    background: radial-gradient(133.12% 132.65% at 0.23% 1.39%, #F1A250 0%, #E48039 100%);
    border-radius: 0 0 3.5rem 0;
    cursor: pointer;
}
.item-box .item-media{overflow: hidden;margin-bottom: .5em;}
.item-box .item-media img{-webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;}

.item-box p{font-size: 2.4rem;color: #fff;margin: .5em 0;line-height: 1.5em;}
.item-box span{font-size: 1.6rem;line-height: 1.25em;margin:0;color: #fff;display: block;}

.item-section{
     background: url(../images/bg.jpg);
     padding: 5rem 0;
}


.video-he {

}
.search .item-list,.video-he .item-list,.car-section .item-list{
    width: calc((33.6rem + 4rem) * 3);
}
.search .item-box{width: 33.6rem;margin:1.5rem 2rem;}
.video-he .item-box,.car-section .item-box{
    width: 33.6rem;
    margin:1.5rem 2rem;
    padding: 0rem;
    background: transparent;
    border-radius: 0 0 3.5rem 0;
    cursor: pointer;
}

.item-title,.item-txt{
    background: rgba(115, 175, 229, 1);
    color: #fff;
    font-size: 18px;
    line-height: 1em;
    padding: 16px 14px;
    margin-bottom: 1rem;
    border-radius: 0 3.5rem 0 0;
}
.item-txt p{
    font-size: 18px;
}
.item-txt span{
    font-size: 14px;
}
.search .item-box3,.search .item-box2,.search .item-box4{padding: 0rem;background: transparent;}
.search .item-box4 a{display: flex;flex-direction: column-reverse;}
.video-covid19 .item-box,.car-section .item-box{display: flex;flex-direction: column-reverse;}

.video-he .item-txt p{
    margin:0 0 .5em 0;
}
.video-covid19 .item-txt,.car-section .item-txt,.item-box4 .item-txt{
    border-radius: 0 0 8.8rem  0;
    background: #84C163;
    line-height: 1.5em;
    height: 120px;
}
.video-covid19 .item-txt,.car-section .item-txt,.item-box2 .item-txt,.item-box4 .item-txt {
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;align-items: flex-start;
}
.car-section .item-txt p,.video-covid19 .item-txt p,.search .item-txts p{
    font-size: 1.6rem;
    margin:0;
    margin-bottom: .5em;
}
.car-section .item-txt span,.video-covid19 .item-txt span,.search .item-txts span{
    font-size: 1.3rem;
    margin:0;
    
}
.car-section .item-txt span.hash{margin-top: .5em;}
.item-txt span a,.search .item-txts span a{color: #fff;margin-right:.5em;}
.item-txt span a:hover,.search .item-txts span a:hover{color: blue;}
@media screen and (max-width: 1440px) {
    .container{
        width: 100%;
    }
    header .container{
        padding:  15px ;
    }
    nav .container{padding: 0 15px;}
}
@media screen and (min-width: 900px){
    .button-style-nav:hover  .nav-sublist{
        display: block;
        
    }
    .button-style-nav:hover  .nav-sublist li:hover{    background: rgba(255, 227, 204, 1)}
    .nav-item2 .button-style-nav:hover  .nav-sublist li:hover{    background: rgba(115, 175, 229, 1)}
    .nav-item3 .button-style-nav:hover  .nav-sublist li:hover{    background: rgba(132, 193, 99, 1)}

    .item-box:hover .item-media img{
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
    }
}
@media screen and (max-width: 768px) {
    html,body{
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        -webkit-text-size-adjust: 100%;
    }
    .header-h{height: 90px;}
    .mb{display: block;}
    .container{
        width: 100%;
        padding: 0 2rem;
    }
    header{background-position: 0%}
    section{font-size: 1.6rem;}
    header .logo img{width: 50px;}
    header .logo p{font-size: 24px;}
    header .logo p span{font-size: 14.5px;}
    header .container{padding:2rem 2rem;}
    .navBtn{
        position: relative;
        width: 5rem;
        height: 5rem;

    }
    .navBtn span{
        background-color: #000;
        height: 3px;
        width: 100%;
        position: absolute;
        left: 0;
        top: 1rem;
        border-radius: 5px;
        transition: all .3s ease;
    }
    .navBtn span:nth-child(2){
        margin-top: 1.5rem;
    }
    .navBtn span:nth-child(3){
        margin-top: 1.5rem;
    }
    .navBtn span:nth-child(4){
        margin-top: 3rem;
    }
    .navBtn.open span:nth-child(2){
        transform: rotate(45deg);
    }
    .navBtn.open span:nth-child(3){
        transform: rotate(-45deg);
    }
    .navBtn.open span:nth-child(1),
    .navBtn.open span:nth-child(4){
        opacity: 0;
    }
    nav .container{
        flex-direction: column;
    }
    nav .serach-bar{margin-bottom: 3rem;}
    nav{
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 99;
        display: flex;justify-content: center;align-items: center;
            -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
        opacity: 0;
        pointer-events: none;
        z-index: -99;
        top: 90px;
    }
    nav.open{
        opacity: 1;
        pointer-events: initial;
        z-index:99;
    }
    nav ul{
        width: 100%;
        flex-direction: column;
    }
    .button-style-nav .nav-sublist{position: relative;}
    .button-style-nav .nav-sublist li{background: transparent !important;}
    .button-style-nav span{font-size: 36px;height: 2em;}
    .button-style-nav span i{height: 32px;}
    .button-style-nav.active .nav-sublist{display: block;border-top: 1px solid #fff;}
    .button-style-nav .nav-sublist p,.button-style-nav .nav-sublist span{color: #fff;}
    .button-style-nav .nav-sublist li:not(:last-child){border-bottom: none;}
    .button-style-nav p.group-title{height: 2.5em;}
    .item-list{
        margin:0 auto;
        width: calc((28rem + 7rem) * 2);
        display: flex;
        flex-wrap: wrap;
    }


    .item-box{
        width: 28rem;
        margin:1.5rem 3.5rem;
        padding: 1.5rem;
        background: radial-gradient(133.12% 132.65% at 0.23% 1.39%, #F1A250 0%, #E48039 100%);
        border-radius: 0 0 3.5rem 0;
        cursor: pointer;
    }
    .item-box p{font-size: 3rem;}
    .item-box span{font-size: 2rem;}
    .nav-item{margin:1rem 0;}
    .search .item-list,.video-he .item-list,.car-section .item-list{
        width: calc((33.6rem + 3rem) * 2);
    }

    .search .item-box{width: 33.6rem;
        margin:1.5rem 1.5rem;
        /*padding: 0rem;*/
        border-radius: 0 0 3.5rem 0;
        }
    .video-he .item-box,.car-section .item-box{
        width: 33.6rem;
        margin:1.5rem 1.5rem;
        padding: 0rem;
        background: transparent;
        border-radius: 0 0 3.5rem 0;
        cursor: pointer;
    }
    .item-title{
        background: rgba(115, 175, 229, 1);
        color: #fff;
        font-size: 18px;
        line-height: 1em;
        padding: 16px 14px;
        margin-bottom: 1rem;
        border-radius: 0 3.5rem 0 0;
    }
    .video-covid19 .item-title, .car-section .item-txt, .item-box4 .item-txt{

    }
}


@media screen and (max-width: 750px) {
    .fixed-btns{bottom: 25%;transform: translateY(0);top: initial;}
   .fixed-btns a{width: 8.6rem;}
   header .logo img{width: 8rem;}
   header .logo p{font-size: 3.2rem;}
   header .logo p span{font-size: 1.95rem;}
   .header-h{height: 12rem;}
   nav{top: 10rem;}
   .button-style-nav span{font-size: 4rem;}
   .nav-item{margin:1rem 0;}
   .item-list{width: 100%;}
   .video-he .item-list, .car-section .item-list{
    width: 100%;
   }
   .item-box,.video-he .item-box, .car-section .item-box{
    width: calc(50% - 3rem);
    margin:1.5rem;
   }
   .video-covid19 .item-title{
    height: 9rem;
    display: flex;align-items: center;
   }
   .car-section .item-txt,.video-covid19 .item-txt{
    height: auto;
    padding:.5em;
   }
   .item-title{font-size:2rem;}
   .item-title, .item-txt{padding: .5em .5em;}
   .item-txt p,.car-section .item-txt p{font-size:2rem; }
   .item-txt span,.car-section .item-txt span{font-size:1.6rem; }
}

footer{
    background: url(../images/bg.jpg);
    display: flex;
    flex-direction: column;justify-content: center;align-items: center;
    /*height: 80px;*/
    font-size: 16px;
    line-height: 1.5em;
    padding-top: 3.5em;
}
footer .container{
    width: 100%;
    
    font-weight: 500;
}
footer > div{
    display: flex;
    flex-direction: column;justify-content: center;align-items: center; 
}
footer .footer-txt{
    color: #fff;
    background: #F1A250;
    padding: .5em 0;
}
footer .logo{
    width: 119px;
}

footer .copyright{
    color: #F1A250;
    margin:1em 0;
}

@media screen and (max-width: 750px) {
    footer{
        font-size: 3rem;
    }
}