﻿@charset "utf-8";
/*header*/
#header{
	width:100%;
	text-align:center;
}
#topHead{
	width:100%;
	background-color:#fff;
	padding:10px 0;
	position:relative;
}
#topHead .container{
	display:flex;
	flex-wrap:wrap;
}
#topHead .logo {margin:0;}
#topHead .logo a {
    display:inline-block;
    width:190px;
    height:44px;
	background:url(../images/logo_gis.png) no-repeat 0 50%;
    background-size:contain;
}
#topHead .logo a em{
	width:1px;
	height:1px;
	display:block;
	overflow:hidden;
	position:absolute;
}
#topHead .logo a:hover,
#topHead .logo a:focus {
    opacity:0.7;
}
#topHead .links{}
#topHead .links ul{
	list-style:none;
	width:auto;
}
#topHead .links ul > li{
	display:inline-block;
	vertical-align:middle;
}
#topHead .links ul > li > a {
	display:flex;
    align-items:center;
	font-size:1.7em;
    font-weight:bold;
	color:#000;
	padding-right:10px;
}
#topHead .links ul > li > a.acKey {
	width:inherit;
	height:inherit;
	color:#FFF;
	padding:0;
}
#topHead .links ul > li > a:hover,
#topHead .links ul > li > a:focus{
	color:#e84417;
}
#topHead .links ul > li > a::before {
    content:"";
    width:40px;
    height:40px;
    display:inline-block;
    background-repeat:no-repeat;
    background-position:center top;
	transition:all 0s ease;
}
#topHead .links ul > li > a.acKey::before {
	display:none;
}
#topHead .links ul > li:nth-of-type(2) > a::before {
    background-image:url(../images/addon_ico1.svg);
}
#topHead .links ul > li:nth-of-type(3) > a::before {
    background-image:url(../images/addon_ico2.svg);
}
#topHead .links ul > li:nth-of-type(4) > a::before {
    background-image:url(../images/addon_ico5.svg);
}
#topHead .links ul > li > a:hover::before,
#topHead .links ul > li > a:focus::before{
	background-position:center bottom;
}
@media screen and (max-width:680px) {
	#topHead .container{
		justify-content:center;
		flex-direction:column;
	}
}
@media screen and (min-width:601px) {
	#topHead .container{
		align-items:center;
		justify-content:space-between;
	}
}
@media screen and (min-width:991px) {
	#header{border-top:5px solid #e84417;}
	#topHead{padding:15px 0;}
}
@media screen and (min-width:1200px) {
	#topHead .logo{ position:relative; left:auto;top:auto;}
	#topHead .logo a {
		width:260px;
		height:60px;
		margin-left:0;
		margin-right:10px;
    }
}
