html, body { font:15px 'Noto Sans TC','Microsoft JhengHei', sans-serif; margin:0; padding:0; }
img, iframe { border:0; height:auto; max-width:100%; }
a { color:#5c5b5b; transition:all .38s ease; text-decoration:none; }
a:hover, body .current a, body a.current{ color:#29166f; }
input, a:active, a:focus{ outline:none;}
.table_scroll { overflow-x:auto; }
header{ top:0;background:#fff; position:fixed; z-index:3; box-shadow: 0 0 9px 1px #ccc;width: 100%;}
.header{ margin:0 auto; max-width:1366px; padding:20px 10px; position:relative; text-align:center; z-index:9; display:flex; align-items:flex-end; justify-content:space-between; }
/* .header .logo img{ display:block;  max-width:15vw;} */
.header .menu ul, .header .menu li{ list-style-type:none; margin:0; padding:0; }
.header li:last-child ul{height: 100%; align-items: center; padding: 0 0 0 15px;}
.header .menu>ul>li{ position:relative; }
.header .menu > ul > li:last-child {position: absolute;top: 15px;right: 15px;}
.header .menu>ul>li>a+ul{ display:none; }
.header li:last-child ul li ol li{padding: 5px 0; margin: 0px;}

/* mask bg & plus-icon & hamburg */
body.open .content, body.open footer{ filter:blur(1.5px); }
.mask.open{background:rgba(17, 0, 0, 0.76); position:fixed; width:100%; height:100%; z-index:1; top:0;}
.plus, .minus{ position:absolute; top:0; right:0%; z-index:99; padding:30px;}
.plus::before{ font:normal normal normal 1em FontAwesome; color:#fff; }
.plus::before{ content:"\f067"; }
.plus.minus::before{ content:"\f068"; }
.cms-menu{ color:#29166f; position:absolute; top:6px; right:14px; }
.cms-menu::before{ content:"\f0c9"; font:normal normal normal 2.4rem FontAwesome; }
.cms-menu::after{ content:"MENU"; font-size:.6rem; display: block; color:#29166f; }
.open .cms-menu::before{ content:"\f00d"; }
.open .cms-menu::after{ content:"CLOSE"; }



/* @media only screen and (max-width: 1300px) {
    .header{padding: 20px 115px;}
     html, body {font: 9.5px;}
} */





/* 999 ↑ */
@media only screen and (min-width: 1100px) { 
    html, body {font: 12.5px;}
    body.open .content, body.open footer{ filter:blur(0); }
    .header .logo{ padding:5px 35px; }
    .header .logo a{ display: flex; align-items: center; }
    .header .logo img:last-child{ margin-left: 15px; }
    .cms-menu{ display:none; } /* hidden hamburg */
    .plus{ display:none; } /* hidden menu plus */
    .mask.open{ display:none; }
    .header .menu>ul{ display:flex !important; }
    .header .menu>ul>li{ margin-left:0px; }
    .header .menu>ul>li:first-child{ margin-left:0; }
    .header .menu>ul>li:not(:last-child)::before{ content:''; background:#9c9c9c; height:50%; width:1px; position:absolute; top: 50%; transform: translateY(-50%); }
    .header .menu>ul>li:first-child::before{ content:none; }
    .header .menu>ul>li>a:hover{ color:#29166f; }
    .header .menu>ul>li>a{ font-size:1.2rem; font-weight:bolder; padding:2px 15px 40px 15px; color:#666; }
    .header .menu>ul>li>a+ul{ margin-top: 26px; position:absolute; left:50%; transform:translateX(-50%); top:1.3vw; background:#fff;text-align: left;}
    .header .menu>ul>li>a+ul li:first-child::before{ content:''; background:#29166f; height:4px; width:100%; position:absolute; top:-7px; left:50%; transform:translateX(-50%); transition:.2s ease-in-out; }
    .header .menu>ul>li>a+ul li a, .header .menu>ul>li>a+ul li:last-child a{ white-space:nowrap; background:none; display:block; color:black; font-size:1.06666rem; padding:15px 7px;}
    .header .menu>ul>li>a+ul li a:hover, .products-mid-menu li a.current{color:#29166f; font-weight: bold; }
    .header .menu>ul>li.current > a{ color:#29166f; }
    .header li:last-child ul li ol{position: absolute;padding: 5px; display: none;}
    /* tip */
    .header li:last-child ul{ display:flex; }
    .header li:last-child li{ margin-right:5px; }
    .header li:last-child li:not(:last-child) a{ font-size:.8rem; color:#fff; background:#29166f; padding:0 10px; height:20px; display:flex; justify-content:center; align-items:center; }
    .header li:last-child form { position:relative; }
    .header li .search input{ border:1px solid #29166f; width:auto; padding:2px 30px 2px 15px; color:#777; }
    .header li:last-child form a { position:absolute; right:5px; top:0; color:#29166f;}
    .header .logo {padding: 5px 0 5px 65px;}
    .header .logo img{transition: all .5s;}


    .down .header .menu > ul > li:not(:first-child)::before{ margin:0; }
    .down .header .logo a{ padding:2px 0; }
}



/* 999 ↓ */
@media only screen and (max-width: 1100px) {
    body.open #content, .content.open,footer.open{display: none;}
    html, body { font-size:14px; padding-top: 0 !important; }
    header{position: relative;}
    .header{ height:100%; padding:5px; align-items:center; }
    .header .logo { padding:10px 0; }
    /* .header .logo img { width:105px;  } */
    .header li:last-child ul{padding: 0;}
    .header .logo {padding: 5px 0 5px 25px;}
    .header .logo a {width: 21vw;max-width: inherit; }
    .header .cms-menu{ display:block; }
    .header .menu>ul{ display:none; }
    .header .menu>ul>li{ background:#29166f; border-bottom:thin solid #fff; font-size:1.5rem;}
    .header .menu ul li:last-child{border-bottom:none; padding: 0;}
    .header .menu ul li a{ font-size: 1.5rem; padding: 30px 0; display:block; color:#fff; }
    .header .menu ul li a:hover{text-shadow:0 0 6px rgba(185, 185, 185, .9); color:#fff;}
    .header .menu ul ul {display:block; position:static; margin:0; }
    .header .language,.language:hover{background-color:transparent; font-size: 1em; color:white; vertical-align: middle;font-weight: 600;text-align: center;}
    .header .menu ul{ z-index:999; position:absolute; left:0; top:100%; width:100%; box-shadow:0 9px 22px 1px rgba(38, 18, 2, 0.5); text-align:center; }
    .header .menu>ul>li>a+ul li a,.header .menu>ul>li>a+ul li:last-child a{ white-space:nowrap; background:none;display: block; color: white; font-size: 1.06666rem; padding: 23px 10px;}
    .header .menu a+ul{ background:#c4141d; box-shadow:0 0 34px 7px #580a0f inset}
    .header .menu>ul>li li:not(:last-child) { border-bottom:1px solid #fff; }
    .header .menu li:last-child form a { display:block; margin-left:10px;}
    .header .menu li:last-child li{margin: 0; font-size: 1.5em; padding:30px 0;}
    .header .menu>ul >li:last-child a{padding: 0; border-radius: 0px; background-color:#29166f; font-weight:100; font-size: 1.5rem;}
    .header .search form { display:flex; justify-content:center; padding:0; align-items:center;}
    .header .search input, .header .search input:focus{ border:0 none; }
    .header .search input{ padding:0; background:#fff; width:150px; height:27px; padding:5px 15px; vertical-align:middle; border-radius:30px;}
    .header li ul li .language + ol{display: block !important;position: static;transform: translateX(0);padding: 0;}
    .header .menu li:last-child li li {display: inline-block;border: 0 none;margin: 0 15px; padding: 0;}
    .header .menu > ul > li:last-child a {padding: 0;border-radius: 0px;font-weight: 100;font-size: 1.5rem;}
    .header .menu > ul > li:last-child a.language{display: none;}
    .header .menu > ul > li:last-child{top:0; right: 0; position: static;}
}

@media only screen and (max-width: 1024px) {
    .header .logo a{width: 11vw;}
    /* .header{padding: 5px;} */
    .header{padding:12px 0;}

}

@media only screen and (max-width: 480px) {
    .header .logo a{width: 33vw;}
    .header .logo img:last-child{ display: none; }

}