@font-face {
 font-family:FontAwesome;
 font-style:normal;
 font-weight:900;
 src:url(fontawesome-free-5.0.9/web-fonts-with-css/webfonts/fa-solid-900.woff) format("woff");
}

:root {
    --color:#d9e3fe;
    --text-shadow:1px 1px 0 #5c8abb;
}

html, body { font:14px 'Arial'; 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{ color:#3a3a3a; }
input, a:active, a:focus{ outline:none;}
.table_scroll { overflow-x:auto; }

header{ position:relative; z-index:3; background:#fff; }
.header{ margin:0 auto; max-width:1000px; padding:0 10px; position:relative; z-index:9; }
.header .logo{ position:relative; }
.header .menu{ background:#7395cf; }
.header .menu ul, .header .menu li{ list-style-type:none; margin:0; padding:0; }
.header .menu ul a{ font-size:1.14rem; color:#fff; display:block; }

/* mask bg & plus-icon & hamburg */
body.open .content, body.open footer{ filter:blur(1.5px); }
.mask.open{background:rgba(0,0,0, .3); position:fixed; width:100%; height:100%; z-index:1; top:0;}
.plus{ position:absolute; top:0; right:0%; z-index:99; padding:30px;}
.plus::before{ content:"\f067"; font:normal normal normal 1em FontAwesome; color:#fff; }
.cms-menu{ padding-top:32px; overflow:hidden; position:relative; width:35px; }
.cms-menu span{ font-size:.7rem; display: block; }
.cms-menu::before, .cms-menu::after{ font:normal normal normal 2.4rem FontAwesome; position:absolute; left:0; top:0; width:100%; text-align:center; transition:.28s ease; }
.cms-menu::before{ content:"\f00d"; left:100%;}
.cms-menu::after{ content:"\f0c9"; left:0%;}
.cms-menu.open::before{ left:0; }
.cms-menu.open::after{ left:-100%; }

/* 999 ↑ */
@media only screen and (min-width: 900px) { 
    body.open .content, body.open footer{ filter:blur(0); }
    .cms-menu{ display:none; } /* hidden hamburg */
    .plus{ display:none; } /* hidden menu plus */
    .mask.open{ display:none; }

    .header .menu ul{ display:flex; justify-content:space-around; }
    .header .menu ul a{ padding:8px 30px; font-weight:400;  }
    .header .menu ul a:hover{ background:#5e84c3; }
    .header .tip{ font-size:.92rem; position:absolute; top:13px; right:8px; }
    .header .tip ul{ padding:3px; position:relative; align-items:center; }
    .header .tip ul a{ color:#816244; font-size:.92rem; padding:0; }
    .header .tip ul a::after{ content:none; }
    .header .tip .search form{ display:flex; align-items:center; border:1px solid #e7e7e7; padding:5px 10px; transition:.28s ease;  }
    .header .tip .search form:hover{ border:1px solid #8d8d8d; }
    .header .tip .search input{ color:#777; width:200px; border:0 none; }
    .header .tip .search-btn:hover{ background:none; }
    .header .tip .search-btn::before{ content:'\f002'; font:normal normal normal 1.3rem FontAwesome; color:#777; margin-left:5px; }

}

/* 999 ↓ */
@media only screen and (max-width: 900px) {
    .header{height: 100%; padding: 5px; align-items: center;}
    .header .logo { padding:5px 0; }
    .header .logo img { width:47vw; }
    .header .cms-menu{ display:flex; flex-direction:column; align-items:center; position:absolute; top:3px; right:3px; color:#000;}
    .header .menu { z-index:999; position:absolute; left:0; top:100%; width:100%; box-shadow:0px 9px 22px 1px rgba(38, 18, 2, 0.5); text-align: center; background:rgba(0,0,0,.5); padding-bottom:10px;}
    .header .menu ul li a{ font-size: 1.5rem; padding:10px 0; display:block; color:#fff; }
    .header .menu li:not(.search):not(.icon) { border-bottom:1px solid #ddd; }
    .header .menu ul ul li{display:block; background-color:rgba(0, 0, 0, .3); margin:0; border-bottom:thin solid #fff; font-size:1.5rem; padding:0;}
    .header .menu ul .search, .header .menu ul .icon { display:inline-block; vertical-align:top; margin:10px; }
    .header .menu{display: none;}
    .header .menu li.search input{background-image: none; padding: 0; background: #fff; border: 1px solid #8e6037; width:200px; padding:10px; vertical-align: middle; margin-right:10px;}
    .search form {display:flex; justify-content:center; }
}