:root{
    --color-default:#000;
    --color-red:#a80e0e;
    --color-blue:#157bf0;
    --border-radius:0px;
    --max-width:760px;
    --header-height:90px;
}
html,body{width: 100%; height: 100%;}
html{ font-size: 14px;}
body{ color: var(--color-default); font-family: "Microsoft JhengHei", "微軟正黑體", "Microsoft YaHei", Arial, sans-serif;}

html,body,ol,ul,li,form,p,h1,h2,h3{ margin: 0; padding: 0; }
ul,li{ list-style: none;}
i,em{ font-style: normal;}
a{ text-decoration: none; color: #bbb6b6;}

/* gototop */
#backTop {
    height: 30px;
    width: 30px;
    position: fixed;
    bottom: 50px;
    right: 20px;
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
    text-align: center;
    line-height: 30px;
}
#backTop .layui-icon{ font-size: 26px; color: #FFF;}
#backTop:hover{ background-color: var(--color-red);}

/* common  */
.container{  max-width: var(--max-width); margin-left: auto; margin-right: auto;}

/* header  */
.header{ background-color: #FFF;}
.header .container{ position: relative;}
.header-top{ position: relative;}
.header-top-logo{ padding: 20px 0;}
.header-top-logo img{ height: 80px;}
.header-top-search, .header-top-menu{  position: absolute; top: 50%; margin-top: -15px;}
.header-top-search img, .header-top-menu img{ width: 30px; height: 30px;}
.header-top-search{ right: 20px;}
.header-top-menu{ left: 20px; display: none;}

.header-menu{ background-color: #f1f1f1;}
.header-menu ul{ display: flex; max-width: var(--max-width); margin-left: auto; margin-right: auto;}
.header-menu ul a{ display: block; color: #222; padding: 15px 15px; font-size: 16px;}
.header-menu ul a.active{ position: relative; font-weight: bold; background-color: #940808; color: #FFF;}
.header-menu ul a:hover{ text-decoration: underline;}

.header-search{ width: 300px; position: absolute; top: 45px; right: 0;}
.header-search .layui-btn{ background-color: var(--color-red);}
.header-top-search{ display: none;}

/* footer  */
.footer{background-color: #f1f1f1; border-top: 1px solid #EEE; color: #333; padding-top: 20px;}
.footer-contact{ display: flex; justify-content: space-between; }
.footer-contact-left h3{ padding-bottom: 5px;}
.footer-contact-left p{ margin-top: 5px;}
.footer-contact-right{ text-align: center;}
.footer-contact-right img{ width: 100px;}
.footer-contact-right span{ display: inline-block; margin-top: 10px;}
.copyright{ text-align: center; color: #CCC; background-color: #646d7d; margin-top: 20px; padding: 10px 0;}


/* layui  */
.layui-laypage .layui-laypage-curr .layui-laypage-em{ background-color: var(--color-red);}

/* mobile  */
@media screen and (max-width: 640px) {
    .header{ position: fixed; width: 100%; left: 0; top: 0; z-index: 10; border-bottom: 1px solid #EEE;}
    .header-top-logo{ text-align: center;}
    .header-top-menu{ display: block;}
    .header-top-logo img {
        height: 50px;
    }
    .header-top{ position: relative; z-index: 9; background-color: #FFF;}
    .header-top-logo {
        padding: 10px 0;
    }
    .header-search{ display: none;}
    .header-top-search, .header-top-menu {
        display: block;
        margin-top: -10px;
    }
    .header-top-search img, .header-top-menu img {
        width: 20px;
        height: 20px;
    }
    .header-menu{ transition: all 0.5s; transform: translateY(-350px);  position:absolute; width: 100%; left: 0; top: 70px; z-index: 8; background-color: rgba(175, 9, 9, 0.95);}
    .header-menu ul {
        display: block;
        padding: 20px 0;
    }
    .header-menu ul li{  text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.1);}
    .header-menu ul li:nth-child(1){ border-top: none;}
    .header-menu ul a{  padding: 10px 20px; color: #FFF;}
    .header.active .header-menu{ transform: translateY(0);}
    .header-menu ul a.active {
        background-color:transparent;
        color: #ccc;
    }
    .header.active .container::after{ content: ''; position: fixed; z-index: 7; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.5);}

    .header .btn-open{ display: inline-block;}
    .header .btn-close{ display: none;}
    .header.active .btn-open{ display: none;}
    .header.active .btn-close{ display: inline-block;}
    

    /* footer  */
    .footer{ padding-top: 20px;}
    .footer-contact-right img {
        width: 80px;
    }
    .footer .container{ margin: 0 15px;}

    .footer-contact{ font-size: 13px;}
    .copyright{ font-size: 12px; margin-top: 15px; padding: 10px 0;}
}