body {
	margin: 0;
	padding: 0;
}
:root {
	--main-softbluecolor: #c4d0f2;
	--main-softerbluecolor: rgba(196, 208, 242, 0.2);
	--main-darkbluecolor: #0b2570;
	--main-font-family: 'DM Sans', sans-serif;
	--main-h1-fontsize: 85px;
	--main-h1-lineheight: 75px;
	--regular-fontsize: 16px;
	--medium-font-size: 30px;
	--main-h1-fontsize_mobile: 42px;
	--main-h1-lineheight_mobile: 40px;
	--regular-fontsize_mobile: 13px;
	--medium-font-size_mobile: 19px;
}
/*header*/
@media screen and (max-width: 500px) {
	header {
		width: 100%;
		overflow: auto;
		font-family: var(--main-font-family);
		position: absolute;
		background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 0) 100%);
		background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 0) 100%);
		background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 0) 100%);
		background-position: 50% 50%;
		-webkit-background-origin: padding-box;
		background-origin: padding-box;
		-webkit-background-clip: border-box;
		background-clip: border-box;
		-webkit-background-size: auto auto;
		background-size: auto auto;
		z-index: 101;
	}
	header>.wrap {
		width: 100%;
		overflow: auto;
		max-width: 2000px;
		margin: 0 auto;
		padding: 0 10px 20px 10px;
		box-sizing: border-box;
	}
	header a.logo {
		float: left;
		width: auto;
		padding: 10px 0 0 0;
	}
	header a.logo img {
		width: 60vw;
	}
	header nav {
		float: right;
		width: auto;
		padding: 30px 0 50px 0;
		position: relative;
	}
	header nav a {
		display: none;
	}
	header nav #open_mobi_menu {
		position: absolute;
		top: 18px;
		right: 0;
		height: 30px;
		width: 72px;
		background-image: url(images/mobi_menu_btn.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
	}
	.mobi_menu {
		position: absolute;
		width: 100vw;
		height: 100vh;
		left: 0;
		top: -100vh;
		background-color: var(--main-softerbluecolor);
		font-family: var(--main-font-family);
		z-index: 100;
		background-color: var(--main-softbluecolor);
	}
	.mobi_menu #close_mobi_menu {
		position: absolute;
		font-size: 24px;
		font-weight: bold;
		height: 60px;
		width: 60px;
		line-height: 60px;
		text-align: center;
		top: 110px;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 3;
		color: var(--main-darkbluecolor);
	}
	.mobi_menu .top {
		position: absolute;
		width: 100%;
		bottom: 0px;
	}
	.mobi_menu .top .social {
		overflow: auto;
		width: 60%;
		margin: 0 auto;
		padding: 20px 0 80px 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.mobi_menu .top .social a {
		width: 45px;
		height: 45px;
		float: left;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 50%;
		background-color: white;
		border-radius: 100px;
	}
	.mobi_menu .btm {
		position: absolute;
		top: 0;
		width: 100%;
		height: 80vh;
		overflow: hidden;
	}
	.mobi_menu .btm nav {
		height: 100%;
		width: 90%;
		margin: 0 auto;
		padding-top: 180px;
	}
	.mobi_menu .btm nav a {
		text-decoration: none;
		font-size: 20px;
		text-align: center;
		display: block;
		padding: 20px 0;
		color: var(--main-darkbluecolor);
	}
}
@media screen and (min-width: 501px) and (max-width: 800px) {
	header {
		width: 100%;
		overflow: auto;
		font-family: var(--main-font-family);
		position: absolute;
		background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 0) 100%);
		background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 0) 100%);
		background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 0) 100%);
		background-position: 50% 50%;
		-webkit-background-origin: padding-box;
		background-origin: padding-box;
		-webkit-background-clip: border-box;
		background-clip: border-box;
		-webkit-background-size: auto auto;
		background-size: auto auto;
		z-index: 10;
	}
	header>.wrap {
		width: 100%;
		overflow: auto;
		max-width: 2000px;
		margin: 0 auto;
		padding: 0 10%;
		box-sizing: border-box;
	}
	header a.logo {
		float: left;
		width: auto;
		padding: 10px 0 0 0;
	}
	header a.logo img {
		height: 100%;
	}
	header nav {
		float: right;
		width: auto;
		padding: 30px 0 50px 0;
	}
	header nav a {
		padding: 30px 20px;
		text-decoration: none;
		font-size: var(--regular-fontsize);
		color: var(--main-darkbluecolor);
	}
	header nav a:first-child {
		background-image: url(images/header_nav_a_bg.png);
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 100% 100%;
	}
	header nav a:hover {
		background-image: url(images/header_nav_a_bg.png);
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 100% 100%;
	}
	header nav a:last-of-type {
		/*	padding-right: 0px;*/
	}
}
@media screen and (min-width: 801px) {
	.mobi_menu {
		display: none;
	}
	header {
		width: 100%;
		overflow: auto;
		font-family: var(--main-font-family);
		position: absolute;
		background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 0) 100%);
		background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 0) 100%);
		background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 0) 100%);
		background-position: 50% 50%;
		-webkit-background-origin: padding-box;
		background-origin: padding-box;
		-webkit-background-clip: border-box;
		background-clip: border-box;
		-webkit-background-size: auto auto;
		background-size: auto auto;
		z-index: 10;
	}
	header>.wrap {
		width: 100%;
		overflow: auto;
		max-width: 2000px;
		margin: 0 auto;
		padding: 0 10%;
		box-sizing: border-box;
	}
	header a.logo {
		float: left;
		width: auto;
		padding: 10px 0 0 0;
	}
	header a.logo img {
		height: 100%;
	}
	header nav {
		float: right;
		width: auto;
		padding: 30px 0 50px 0;
	}
	header nav a {
		padding: 30px 20px;
		text-decoration: none;
		font-size: var(--regular-fontsize);
		color: var(--main-darkbluecolor);
	}
	header nav a:first-child {
		background-image: url(images/header_nav_a_bg.png);
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 100% 100%;
	}
	header nav a:hover {
		background-image: url(images/header_nav_a_bg.png);
		background-repeat: no-repeat;
		background-position: top center;
		background-size: 100% 100%;
	}
	header nav a:last-of-type {
		/*	padding-right: 0px;*/
	}
}