@font-face {
	font-family:"Open Sans"; src:url("/font/OpenSans.woff2") format("woff2");
	font-weight:400; font-style:normal; font-display:swap;
}

@font-face {
	font-family:"Open Sans 700"; src:url("/font/OpenSans-700.woff2") format("woff2");
	font-weight:700; font-style:normal; font-display:swap;
}

* { box-sizing:border-box; margin:0; padding:0; border:0; outline:0; font-family:"Open Sans", sans-serif }
a { text-decoration:none }
body { background:#EEEDEE }
h1, h2, h3 { font-family:"Open Sans 700", sans-serif }
h1 { font-size:35px }
h2 { font-size:25px; line-height:36px }
h3 { font-size:22.5px; line-height:30px }
img { vertical-align:middle }
li::marker { color:#222 }
p { margin:20px 0; line-height:24px }
p a, ul a { padding-bottom:2px; color:#0064A1; border-bottom:2px solid #FFF }
p a:hover, p a:active, ul a:hover, ul a:active { color:#5B9E55; border-bottom:2px solid #5B9E55 }

.center { text-align:center }
.button { padding:5px 20px 6px 20px; background:#5B9E55; color:#FFF; border:1px solid #5B9E55; border-radius:20px }
.button:hover, .button:active, #nav.button:hover, #nav.button:active { background:#FFF; color:#0064A1; border:1px solid #0064A1; transition:0.3s }
.buttons { margin:40px 0 30px }
.buttons a { margin:0 15px }
.col-2 { display:grid; align-items:center; grid-template-columns:50% 50% }
.col-2-m { margin:50px 0; padding-top:50px; border-top:1px solid #E6E6E6 }
.col-2-p { grid-template-columns:62% 38% }
.col-2-p-l { padding-right:50px }
.col-2-p-r { padding-bottom:15px }
.col-2-p-r img { max-width:320px; width:80%; margin:40px 0 }
.margin-b-0 { margin-bottom:0 }
.margin-t-0 { margin-top:0 }
.padding-b-40 { padding-bottom:40px }
.section { padding:50px 0 20px; border-top:1px solid #E6E6E6 }
.section-bottom { padding:50px 0 10px }
.section-in { width:75%; margin:0 auto }
.section-in img { margin-bottom:30px }
.title { text-align:center; margin-bottom:20px; padding:40px 15px; background:#F5F3EB; font-size:30px; border-radius:20px }

#container { width:1080px; margin:30px auto; padding:0 60px; background:#FFF; border-radius:40px; box-shadow:0 0 25px rgba(0, 0, 0, 0.08) }
#content { padding:40px 0; border-top:1px solid #E6E6E6 }

header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; padding:30px 0; border-bottom:1px solid #E6E6E6 }
nav a { margin:0 12.5px; padding-bottom:3px; color:#222; font-size:17px; border-bottom:2px solid #FFF }
nav a:hover, nav a:active { color:#0064A1; border-bottom:2px solid #0064A1; transition:0.4s }
#nav .button { display:none; width:125px; margin:15px auto 0; padding:5px 0 6px; color:#FFF; border:1px solid #5B9E55 }
#nav-i { display:none; cursor:pointer }

#app { display:flex; align-items:center; gap:60px; margin-bottom:40px; padding:20px 60px 0 }
#app-info, #app-image { flex:1 }
#app-image { display:flex; justify-content:center; padding:0 15px }
#app-img { width:100%; max-width:380px }
#download { margin:30px 0 }
.download-cta { text-align:center; margin:40px 0; font-size:20px }

.p-title { margin-top:40px; padding:15px 25px; background:#D1E3FF; border-radius:15px }
.p-text { padding:20px 25px; background:#DFF3CA; border-radius:15px }
.p-ex { margin-bottom:40px; padding:20px 25px; background:#F7F0C1; font-style:italic; border-radius:15px }
.p-related { list-style:none; margin:30px 0 }
.p-related li { margin:12.5px 0 }

#sitemap { margin:0 40px }
#sitemap li { margin:10px 0 }
#sitemap li.liin { margin-left:15px }

footer { padding:30px 0; border-top:1px solid #E6E6E6 }
#social { text-align:center; margin-bottom:30px; padding:40px 0; background:#E6F2FC; border-radius:20px }
#social-text { margin: 20px 0 30px; color:#222; font-size:20px }
#social-icons img { margin:0 12.5px }
#social-icons img:hover, #social-icons img:active { opacity:0.75; transition:0.3s }
#menu { display:flex; padding:40px 0; border-top:1px solid #E6E6E6 }
#menu ul { list-style:none }
#menu a:hover, #menu a:active { color:#222; border-bottom:2px solid #222 }
.menu-col { flex:1; padding:0 50px }
.menu-col li { margin:10px 0 }
.menu-title { margin-bottom:15px; padding-bottom:15px; color:#222; font-size:20px; font-family:"Open Sans 700", sans-serif; border-bottom:2px solid #5B9E55 }
#copy { text-align:center; padding-top:30px; color:#888; font-size:14px; border-top:1px solid #E6E6E6 }

@media(max-width:1100px) {
	body { padding:20px }
	#container { width:100%; margin:0; padding:0 40px }
	#app { padding:20px 30px 0 }
	#col-2-1 { margin-right:30px }
}

@media(max-width:960px) {
	h1 { font-size:30px }
	nav a { margin:0 5px }
	#app { padding:20px 0 0 }
	.section-in { width:90% }
	.hide { display:none }
}

@media(max-width:800px) {
	h2 { font-size:24px }
	nav, #nav-c { display:none }
	#nav-i, #nav .button { display:block }
	.navm { position:absolute; width:calc(100% - 120px); top:136px; left:60px; padding-bottom:15px; background:#FFF; border-radius:0 0 20px 20px; box-shadow:0 15px 25px rgba(0,0,0,0.1) }
	#nav a { text-align:center; display:block; margin:0; padding:10px 0; color:#0064A1; border-bottom:1px solid #E6E6E6 }
	#nav a:hover, #nav a:active { color:#222 }
	#app, #menu { flex-direction:column; text-align:center; gap:20px }
	.col-2 { grid-template-columns:100%; row-gap:30px }
	.col-2-m { margin:40px 0; padding-top:40px }
	.col-2-o > div:nth-child(1) { order:2 }
	.col-2-o > div:nth-child(2) { order:1 }
	.col-2-p-l { padding-right:0 }
	.col-2-p-r { border-bottom:1px solid #E6E6E6 }
	#col-2-1 { margin-right:0 }
}

@media(max-width:600px) {
	body { padding:10px }
	h2 { font-size:22px }
	header { padding:20px 0 }
	#logo { width:225px }
	#nav-i { margin-right:10px }
	.navm { width:calc(100% - 60px); top:97px; left:30px }
	#container { padding:0 20px }
	.title { font-size:25px }
}