/* ===================================================================
CSS
 file name  :  menu.css
=================================================================== */
/* header */
	body #header,
	body #container,
	body #footer {
		-webkit-transition: .2s;
		transition: .2s;
	}

	/* spNav active */
	body #header.on,
	body #container.on,
	body #footer.on {
		-webkit-transform: translateX(-85%);
		transform: translateX(-85%);
	}

	/* spNav */
	#spNav {
		position:absolute;
		top:10px;
		right:10px;
		border:1px solid #DDDDDD;
		background:#F6F6F8;
		padding:7px 7px 2px 7px;
		border-radius:5px;
	}

	/* Hamburger menu */
	#spNav #menu,
	#spNav #menu span {
		display: inline-block;
		-webkit-transition: .2s;
		transition: .2s;
		box-sizing: border-box;
	}
	#spNav #menu {
		position: relative;
		width: 24px;
		height: 19px;
		z-index:10000;
	}
	#spNav #menu span {
		position: absolute;
		left: 0;
		width: 100%;
		height: 3px;
		margin-bottom: 0;
		background-color: #31628c;
	}
	#spNav #menu span:nth-of-type(1) {
		top: 0;
	}
	#spNav #menu span:nth-of-type(2) {
		top: 8px;
	}
	#spNav #menu span:nth-of-type(3) {
		bottom: 0;
	}

	/* Hamburger menu ACTIVE */
	#spNav #menu span:nth-of-type(3),
	#spNav #menu.on span:nth-of-type(3) {
		-webkit-transition: none;
		transition: none;
	}
	#spNav #menu.on {
		-webkit-transform: rotateX(720deg);
		transform: rotateX(720deg);
	}
	#spNav #menu.on span:nth-of-type(1) {
		-webkit-transform: translateY(8px) rotate(-45deg);
		transform: translateY(8px) rotate(-45deg);
	}
	#spNav #menu.on span:nth-of-type(2) {
		-webkit-transform: translateY(0) rotate(45deg);
		transform: translateY(0) rotate(45deg);
	}
	#spNav #menu.on span:nth-of-type(3) {
		opacity: 0;
	}



	/* gNav */
	body #gNav {
		position: fixed;
		top: 0;
		right: 0;
		width: 85%;
		height: 100%;
		/*min-height: 100%;*/
		color: #fff;
		padding: 0 0 20px;
		background-color: #00306D;
		z-index: 100 !important;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		-webkit-transition: .2s;
		transition: .2s;
		box-sizing: border-box;
	}
	body #gNav.on {
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		-webkit-overflow-scrolling: touch;
		overflow-scrolling: touch;
	}


	#gNav .wrap {
		padding: 0;
	}
	#gNav ul li {
		border-bottom: 1px solid #5a86ab;
	}
	#gNav ul li.logo {
		display: none;
	}

	#gNav ul li a,
	#gNav ul li.search span,
	#gNav ul li.service span,
	#gNav ul li.company span {
	display: block;
	color: #fff;
	font-size: 14px;
	text-decoration: none;
	padding-top: 10px;
	padding-right: 15px;
	padding-bottom: 10px;
	padding-left: 15px;
	}
	#gNav ul li.search span span,
	#gNav ul li.service span span,
	#gNav ul li.company span span {
		padding:0;
	}


	#gNav ul li .sub {
		display: none;
		background-color: #F6F6F8;
	}
	#gNav ul li .sub li {
		border-bottom: none;
		border-top: 1px solid #cddae5;
	}
	#gNav ul li .sub li a {
		color: #00306D;
		font-size: 14px;
	}

	#gNav ul li.search span,
	#gNav ul li.company span,
	#gNav ul li.service span {
		background-image: url(../imgs/img-arrow_b.png);
		background-repeat: no-repeat;
		background-position: right 15px center;
		background-size: 14px 7px;
	}
	/* #spNavSdw */
	#spNavSdw {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		overflow: hidden;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
	}
	#spNavSdw.show {
        display: block;
		-webkit-animation-duration: .8s;
		animation-duration: .8s;
		-webkit-animation-timing-function: ease;
		animation-timing-function: ease;
		-webkit-animation-name: spNavSdwAnime;
		animation-name: spNavSdwAnime;
	}
    @keyframes spNavSdwAnime {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }

@media print, screen and (min-width: 769px) {
/* PCc”¨a?Ra?1a??a??a?≪e¨?e?° */

/* =====================================
a?°a?-a??a??a?≪a??a?“
======================================== */
/* spNav */
#spNav {
	display:none;
}
/* gNav */
	body #gNav {
		position: fixed;
		top: 95px;
		right: 0;
		width: 100%;
		height: 35px;
		padding: 0;
		background-color: #00306D;
		overflow-x: inherit;
		overflow-y: inherit;
		display: block;
		-webkit-transform: inherit;
		transform: inherit;
		box-sizing:border-box;
	}
	#gNav .wrap {
		margin:auto;
		width: 1000px;
	}
	#gNav ul {
		border-left: 1px solid #7893BE;
	}
	#gNav ul li {
		float: left;
		width: 166px;
		height: 35px;
		color: #306692;
		border-right: 1px solid #7893BE;
		text-align: center;
		-webkit-font-smoothing: antialiased;
		font-smoothing: antialiased;
		border-bottom: none;
		box-sizing: border-box;
	}
	#gNav ul li a {
		display: block;
		color: #FFFFFF;
		-webkit-font-smoothing: antialiased;
		font-smoothing: antialiased;
		text-decoration: none;
		padding: 5px 0 0 0;
		height: 35px;
		box-sizing: border-box;
		-webkit-transition: .2s;
		transition: .2s;
	}
	#gNav ul li > a:hover {
		color: #00306D;
		background-color: #F5F5F5;
	}
	#gNav ul li.search span,
	#gNav ul li.service span,
	#gNav ul li.company span {
		display: block;
		color: #FFFFFF;
		padding: 5px 0 0 0;
		height: 35px;
		border-right:none;
		box-sizing: border-box;
		cursor: pointer;
		-webkit-transition: .2s;
		transition: .2s;
	}
	#gNav ul li.search:hover,
	#gNav ul li.service:hover,
	#gNav ul li.company:hover {
		background-color: #F5F5F5;
	}
	#gNav ul li.search:hover span,
	#gNav ul li.service:hover span,
	#gNav ul li.company:hover span {
		color: #00306D;
	}
	#gNav ul li .sub {
		display: none;
		position: absolute;
	    width: 100%;
	    left: 0;
	    right: 0;
	    text-align: center;
	    padding: 10px 0;
	    background-color: #F5F5F5;
	    z-index: 999;
	}
	#gNav ul li .sub li {
	    float: none;
	    display: inline-block;
	    width: 160px;
	    height: 50px;
	    background-color: #fff;
		border:1px solid #365181;
	    border-radius: 3px;
	}
	#gNav ul li .sub li a {
		padding:11px 0 0 0;
	    height: 50px;
		box-sizing: border-box;
	}
	#gNav ul li .sub li a:hover {
		color: #FFFFFF;
		background-color: #00306D;
	    border-radius: 3px;
	}
}

@media screen and (min-width: 321px) and (max-width: 768px) {
    body #container {
        margin-top: 130px; /* 固定 */
    }
}
@media screen and (max-width: 320px) {
    body #container {
        margin-top: 100px; /* 固定 */
    }

}