* {font-family: arial, 'Malgun Gothic',sans-serif; -webkit-text-size-adjust:none;}
html, body, div, span, h1, p, a, abbr,address em, img, dl, dt, dd, ol, ul, li, fieldset, button, textarea, form, label, legend, table, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	vertical-align: baseline;
	font-size: 14px;
	line-height: 1.4;
	color: #222;
	text-decoration: none;
}
html, body {
	height: 100%; width: 100%;
}

li, ul, dl, dd, dt {
  list-style: none
}

a:link, a:visited {
	color: #222;
}

a:hover, a:active {
	color: #222;
}

input,textarea {-webkit-appearance: none;}

body { background: #fcfbf9; }
.top { background: #0e3053 url(/static/image/star.png); background-size: 20%; background-attachment: fixed;}

header { position: fixed; width: 100%;}
.header_wrap { padding: 20px 0; height: 65px; max-width: 1000px; margin: 0 auto;}
header .logo { display: block; float: left; margin: 0 0 0 20px; width: 250px; height: 60px; background: url(/static/image/logo.png) no-repeat; background-size: 250px; }
header .menu { float: right; padding: 0 20px 0 0; }
header .menu a { font-size: 18px; color: #fff; }
header .menu a.app { border-radius: 3px; background: #06223d; display: block; padding: 10px 20px; }

header.on { background: #fff; height: 85px; border-bottom: 1px solid #ccc; }
header.on .logo { background: url(/static/image/logo_gg.png) no-repeat; background-size: 250px; margin-top: 8px;}
header.on .menu a.app { border-radius: 3px; background: #aaa; display: block; padding: 10px 20px; }

.main { background: url(/static/image/main_cover.png) center bottom no-repeat; height: 800px; padding-top: 85px;}
.main p { text-align: center; font-size: 30px; padding-top: 110px; color: #d5dfe9; font-weight: bold;}
.main p.main02 { display: none; }

.bt_area { padding: 40px 30px; text-align: center; }
.bt_area a.bt_down { background: #1e354d; font-size: 22px; padding: 15px 60px; color: #fff; font-weight: bold; border-radius: 3px; display: inline-block; margin: 0 auto; }
.bt_area .txt01 { padding: 30px 0; font-size: 17px; color: #564032;}
.bt_area .txt01_01 { display: none }
.bt_area .txt02 { overflow: auto; margin: 20px auto; max-width: 1000px;}
.bt_area .txt02 li { float: left; width: 31%; padding: 0 1%; }
.bt_area .txt02 li p:first-child { text-align: center; font-size: 25px; font-weight: bold; margin-bottom: 10px; color: #43545a;}
.bt_area .txt02 li p:last-child { text-align: center; font-size: 16px; color: #888;}

.txt03 { text-align: center; padding: 50px 0; overflow: auto;}
.txt_bg { background: #f4f3ee;}
.txt_wrap { margin: 0 auto; max-width: 1000px; }
.txt03.txt_bg .img_area { width: 50%; float: left; }
.txt03 .img_area { width: 50%; float: right; }
.txt03 .img_area.vis_01 { background: url(/static/image/web_02.png) no-repeat center; background-size: 350px; height: 350px; }
.txt03 .img_area.vis_02 { background: url(/static/image/web_03a.png) no-repeat center; background-size: 500px; height: 400px; }
.txt03 .img_area.vis_03 { background: url(/static/image/web_03b.png) no-repeat center; background-size: 500px; height: 360px; }
.txt03 .tex_area01 {  width: 50%; padding-top: 120px; float: left;}
.txt03 .tex_area01_02 { display: none; }
.txt03 .tex_area01_01 { display: block; }
.txt03 .tex_area02 {  width: 50%; padding-top: 140px; float: left;}
.txt03 .tex_area03 {  width: 50%; padding-top: 80px; float: left;}
.txt03 p { font-size: 22px; font-weight: bold; color: #6e5a4d; margin-bottom: 10px; }

.txt04 { text-align: center; overflow: auto; background: url(/static/image/web_04bg.jpg) repeat-x center; height: 450px; background-size: auto 100%;}
.txt04 .tex_area { width: 453px; padding-top: 150px; float: left;}
.txt04 p { font-size: 25px; font-weight: bold; color: #3f3936; margin-bottom: 30px; }
.txt04 .img_area { width: 547px; height: 450px; float: left; vertical-align: bottom; background: url(/static/image/web_04.png) no-repeat; background-size: auto 450px; }
.txt04 a { background: #3f3936; font-size: 22px; padding: 15px 60px; color: #fff; font-weight: bold; border-radius: 3px; display: inline-block; margin: 0 auto; }

footer { padding: 30px 0; text-align: center; }
footer img { width: 200px; }
footer p { color: #ccc; margin-bottom: 20px; }
footer a, footer a:link, footer a:visited, footer a:hover, footer a:active { color: #777;}



@media only screen and (min-width: 320px) and (max-width: 1000px) {
	header { padding: 10px 0; height: 41px; }
	.header_wrap { padding: 0; height: 41px; max-width: 100%; margin: 0 auto;}
	header .logo { width: 180px; height: 22px; margin: 6px 0 0 10px; background: url(/static/image/logo_s.png) no-repeat; background-size: 180px; }
	header .menu { padding: 0 10px 0 0; }
	header .menu a { font-size: 16px; color: #fff; }
	header .menu a.app { background: #06223d; display: block; padding: 5px 10px; }

	header.on { background: #fff; height: 30px; border-bottom: 1px solid #ccc; }
	header.on .logo { background: url(/static/image/logo_gg.png) no-repeat; background-size: 180px; margin-top: 6px;}
	header.on .menu a.app { border-radius: 3px; background: #aaa; display: block; padding: 5px 10px; }

	.main { background-size: 360px; height: 350px; padding-top: 50px; }
	.main p.main01 { display: none; }
	.main p.main02 { display: block; font-size: 22px; padding-top: 50px; }

	.bt_area { padding: 20px 10px; }
	.bt_area a.bt_down { background: #1e354d; font-size: 20px; padding: 10px 40px; color: #fff; font-weight: bold; border-radius: 3px; display: inline-block; margin: 0 auto; }
	.bt_area .txt01_01 { display: block; padding: 20px 0; font-size: 15px; color: #564032;}
	.bt_area .txt01 { display: none }
	.bt_area .txt02 { overflow: auto; margin: 10px; max-width: 100%;}
	.bt_area .txt02 li { clear: both; width: 100%; padding: 0; margin-bottom: 10px;}
	.bt_area .txt02 li p:first-child { text-align: center; font-size: 22px; font-weight: bold; margin-bottom: 5px; color: #43545a;}
	.bt_area .txt02 li p:last-child { text-align: center; font-size: 16px; color: #888;}

	.txt03 { text-align: center; padding: 20px; overflow: auto;}
	.txt_bg { background: #f4f3ee;}
	.txt_wrap { margin: 0 auto; max-width: 100%; }
	.txt03.txt_bg .img_area, .txt03 .img_area { width: 100%; clear: both; }
	.txt03 .img_area.vis_01 { background: url(/static/image/web_02.png) no-repeat center; background-size: 250px; height: 250px; }
	.txt03 .img_area.vis_02 { background: url(/static/image/web_03a.png) no-repeat center; background-size: 320px; height: 260px; }
	.txt03 .img_area.vis_03 { background: url(/static/image/web_03b.png) no-repeat center; background-size: 320px; height: 230px; }
	.txt03 .img_area img.web01 { width: 260px; }
	.txt03 .img_area img.web02 { width: 300px; }
	.txt03 .tex_area01, .txt03 .tex_area02, .txt03 .tex_area03 {  width: 100%; padding-top: 20px; clear: both;}
	.txt03 .tex_area01_01 { display: none; }
	.txt03 .tex_area01_02 { display: block; }
	.txt03 p { font-size: 16px; font-weight: bold; color: #6e5a4d; margin-bottom: 10px; }

	.txt04 { text-align: center; overflow: auto; background: url(/static/image/web_04bg.jpg) repeat-x center; height: auto; background-size: auto 100%;}
	.txt04 .tex_area { width: 100%; padding-top: 20px; clear: both;}
	.txt04 p { font-size: 18px; font-weight: bold; color: #3f3936; margin-bottom: 20px; }
	.txt04 .img_area { height: 263px; width: 100%; clear: both; vertical-align: bottom; background: url(/static/image/web_04.png) no-repeat center bottom; background-size: 320px; }
	.txt04 a { background: #3f3936; font-size: 20px; padding: 10px 20px; color: #fff; font-weight: bold; border-radius: 3px; display: inline-block; margin: 0 auto; }

	footer { padding: 20px 0; text-align: center; }
	footer img { width: 150px; }
	footer p { color: #ccc; margin-bottom: 20px; }
	footer a, footer a:link, footer a:visited, footer a:hover, footer a:active { color: #777;}

}