/***header***/
.fcfff{color: #fff;}
.type-m{display: none;}
a:hover{text-decoration:none}

#header,#footer{
    background: linear-gradient(90.9deg, #1A356D 2.47%, #008cbe 93.82%);width: 100%;font-size: 13px;
}
#header .container{max-width:1210px;margin: auto;}
#header a{color: #fff;}
#header i.fa-solid{font-size: 16px;}
/*header-上方區塊*/
#web-ht{color: rgba(255, 255, 255, 0.9);padding: 12px 0;box-sizing: border-box;display: flex;justify-content: space-between;width: 100%;}
#web-ht .site-nav ul{display: flex;flex-wrap: nowrap;}
#web-ht .site-nav li{margin-right: 8px;}
#web-ht .site-nav li i{margin-right: 2px;}

/*header-主要區塊*/
#web-hc{display: flex;flex-wrap: nowrap;width: 100%;margin: 1.5em 0;padding-top: 10px;box-sizing: border-box;}
#web-hc .search{flex-grow: 1;padding-left: 5%;box-sizing: border-box;position: relative;}
#web-hc .search-border{background: #fff;display: flex;justify-content: center;padding:0 0 0 15px;border-radius: 25px;flex-wrap: nowrap;overflow: hidden;max-width: 450px;margin-bottom: 8px;}
#web-hc form{display: flex;flex-wrap: nowrap;width: 100%;}
#web-hc .search-border input{line-height: 35px;border: none;width: 100%;}
.search-border input[name="keywords"]{flex-grow: 1;}
.search-border input:focus-visible{outline: none;font-size: 1.1em;}
#web-hc .btn-searchbg {width: 10%;height: 100%;min-width: 35px;margin: 0;}
#web-hc .btn-searchbg span{width: 100%;height: 35px;display: flex;align-items: center;justify-content: center;background: #333;color: #fff;}
#web-hc .hot-search{display: flex;max-width: 450px;overflow: hidden;}
#web-hc .hot-search>div{white-space:nowrap;}
#web-hc .hot-search ul{display: flex;flex-wrap: nowrap;}
.hot-search li{padding-right: 8px;margin-right: 8px;border-right: 1px solid rgba(255, 255, 255, 0.6);white-space: nowrap;}
#related_cat{width: 100%;max-width: 460px;display: block;position: absolute;background: #fff;top: 36px;border: 2px solid #666;font-size: 1.25em;display: none;z-index: 10001;}
#related_cat li{padding: 0 8px;}
#related_cat li a{display: flex;justify-content: space-between;align-items: center;padding: 6px 6px 3px;color:#333;font-size: .95em;}
#related_cat a strong{color: #000;-webkit-text-stroke: .3px #000;font-weight: bold;}
#related_cat li i{color: #727272;}
#related_cat li:last-child a{padding-bottom: 6px;}
#related_cat li:nth-child(even){background: #eee;}
#related_cat li:hover{background: rgb(255, 179, 205);}

#web-hc .services{display: flex;}
#web-hc .services i{color: #fff;font-size: 45px;}
#web-hc .services>span{margin-right: 15px;}
#web-hc .services i.fa-line{color:#00B900;position: relative;}
#web-hc .services i.fa-line::before{position: relative;z-index: 9;}
#web-hc .services i.fa-line::after{position: absolute;width: 34px;height: 34px;top:calc(50% - 17px) ;left:calc(50% - 17px);display: block;content:"";z-index: 5;background-color: #fff;}
#web-hc .cart{position: relative;}
#web-hc .cart .val{position: absolute;top: -5px;right: -5px;background: red;width: 30px;height: 30px;display: flex;justify-content: center;align-items: center;border-radius: 100%;}


/*header-下方區塊*/
#web-ip{display: flex;justify-content: flex-end;width: 100%;}
#web-ip ul{display: flex;justify-content: center;flex-wrap: nowrap;}
#web-ip li{background:#F08080;box-shadow: 0 0 2px #000;font-size: 1.05em;padding:5px 6px;border-radius: 8px 8px 0 0;color: #fff;font-weight: bold;}
#web-ip a:hover{font-weight: bold;}

/***footer***/
#footer{margin-top: 10em;}
#footer::before{display: block;content: "";width: 100%;height: 14px;background: #C70066;margin-bottom: 3em;}
#footer a{color: rgba(255, 255, 255, 0.85);}
#footer em{font-weight: bold;color: #fff;}
#footer .container{max-width:1210px;margin: auto;align-items: center;margin-bottom: 3em;}
#footer .info{max-width: 380px;}
#footer .info img{max-width: 190px;}
#footer .info .logo{align-items: center;}
#footer .logo>*{width: 50%;}
#footer .info b{width: 100%;display: block;margin: .6em;color: #fff;font-weight: unset;}
#footer .info a img{width: 100%;display: block;}
#footer .about{flex-grow: 1;justify-content: space-around;align-items: flex-start;padding-bottom: 1em;}
#footer .about em{margin-bottom: 5px;display: block;}
#footer .about li{margin-bottom: 3px;}
#footer .qr,#footer .qr a{flex-wrap: wrap;width: 120px;}
#footer .qr img,#footer .qr img{width: 100%;}
#copyright{background: rgb(85, 85, 85);color: #fff;text-align: center;padding: 6px 0;margin-top: 12px;}


/***RWD***/
@media only screen and (max-width:1210px){
    #header{padding: 0 16px;box-sizing: border-box;}
    #web-hc .search{width: 55px;justify-content: center;padding: 12px;}
    #footer .logo{display: flex;}
    #footer .qr{padding: 1em;}
    #related_cat{left:4%;width: 90%;}
}
@media only screen and (max-width:960px){
    .type-m{display: flex;align-items: center;}
    .type-pc{display: none !important;}
    .mmenu{color: #fff;font-size: 20px;display: flex;width: 55px;justify-content: center;padding-left: 12px;}
    #header{padding: 0;z-index: 900;position: relative;}
    #header i.fa-solid{font-size: 33px;}
    #web-hc .search{display: flex;}
    #web-ht{display: none;}
    #web-hc{margin: 0;padding: 0;margin-bottom:8px;background: linear-gradient(90.9deg, #1A356D 2.47%, #0B97C9 93.82%);width: 100%;}
    #web-hc>div{display: flex;align-items: center;height: 55px;}
    #web-hc .logo img{display: none;}
    /* .logo.type-m{width: 100%;} */
    #web-hc .logo{content: "";display: block;width:100%;background:url(/images/logo-mobile.png) no-repeat center ;height: 55px;}
    #web-hc .logo::after{display: block; content: ""; width:65px;}
    #web-hc .search span{display: flex; height: 55px;justify-content: center;align-items: center;}
    #web-hc .search span i{color: #fff;font-size: 30px;}
    #web-hc .search-border{margin: 0;flex-grow: 1;min-width: inherit;}
    #web-hc .hot-search{display: none;}    
    #header .container{min-height: inherit;}
    #web-hc .services i{font-size: 30px;}
    #web-hc .services i.fa-line::after{width: 22px;height: 22px;top:calc(50% - 11px);left:calc(50% - 11px);}

    #search-border{width: 100%;display: flex;flex-wrap: wrap;position: absolute;top:100%;background: rgb(250, 250, 250);height: 150px;align-items: center;justify-content: center;box-shadow:  0 0 3px 1px #666;box-sizing: border-box;padding-bottom: 28px;}
    #search-border form{width:100%;justify-content: center;border-radius: 0;display: flex;padding:0 35px;}
    input#txt_PcSearch{border-radius:7px 0 0 7px;border:1px solid rgb(36, 101, 221);font-size: 1.8em;box-sizing: border-box;width: 100%;padding-left: 12px;}
    input#txt_PcSearch:focus-visible{border:1px solid rgb(36, 101, 221);outline: rgb(36, 101, 221);}
    #search-border .btn-searchbg{border-radius: 0;display: flex;justify-content: center;align-items: center;background: rgb(36, 101, 221);margin:0;width: 45px;height: 45px;}
    #search-border .btn-searchbg i{color: #fff;}
    #search-border .box_bak{width: 100%;background: rgb(199, 199, 199);position: absolute;bottom: 0;height: 28px;display: flex;align-items: center;justify-content: center;}
    #search-border .box_bak i{color: rgb(128, 128, 128);margin-bottom: -2px;}

    #related_cat{top: 48px;}
    #web-ip{background: #6c6767;}
    #footer{margin-top: 3em;}
    #footer .container{/*align-items: flex-start;*/}
    #footer .about{flex-wrap: wrap;justify-content: flex-start;padding-left:3em;box-sizing: border-box;}
    #footer .qr{align-items: center;}
    #footer .about ul{width: 50%;margin-bottom: 12px;}

    #header+.c-box{z-index:999;background:rgba(0,0,0,.67);display:none;position:fixed;width:100%;top:0;bottom:0;left:0}
    #header+.c-box+#menu_2022{z-index: 1000;}
}
@media only screen and (max-width:640px){
    #footer .container{align-items: flex-start;}
    #footer .about,#footer>.qr{padding-top: 2em;}
    #footer .logo a{min-width:100px;}
}

@media only screen and (max-width:600px){
    #web-ip li{display: none;}
}

@media only screen and (max-width:480px){    
    #web-hc{margin-bottom: 3px;}
    #web-hc .search{flex-grow: 0;padding: 0 1%;width:auto;}    
    #web-hc .search-border{flex-grow: 0;width: 80%;}    
    #web-hc .search-border input{width: 100%;}
    /* #web-hc .services>span{margin-right: 8px;} */
    #web-hc .services{margin: auto;}
    #web-hc .services i{font-size: 28px;}
    #web-hc .services i.fa-line::after{width: 18px;height: 18px;top: calc(50% - 9px);left: calc(50% - 9px);}
    #web-hc .email{display: none;}
    #related_cat{display: none !important;}
    #web-ip{width: 100%;overflow: hidden;}
    #web-ip ul{flex-wrap: nowrap;overflow: auto;justify-content: flex-start;}
    #web-ip ul li{white-space:nowrap;}
    #footer .container{flex-wrap: wrap;}
    #footer .container>div{width: 50%;}
    #footer .container>.info{width: 100%;display: flex;flex-wrap: nowrap;border-bottom: 1px solid rgba(255, 255, 255, 0.25);max-width: none;padding:3px 12px;box-sizing: border-box;}    
    #footer .about{padding-left: 1em;}
    #footer .info .logo{align-items: flex-start;}
    #footer .qr{max-width:120px;}
    #footer .logo .qr{padding: 5px;}
    #footer .container>.qr{padding-left: 0;}
}