@charset "utf-8";

body {
	background: #fafafa;
}

#book {
	margin: 50px auto 0;
}
#book .pg {
	background: #fff;
}

.nav {
	position: relative;
}
.nav ul {
	
}
.nav li {
	position: absolute;
	display: block;
	width: 15px;
	height: 15px;
}
.nav li a {
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
	text-indent: -9999px;
	transition-duration: 1s;
}
.nav li a:hover,
.nav li a.act {
	margin-top: -3px;
}
.nv01 {
	top: 303px;
	left: 173px;
}
.nv02 {
	top: 303px;
	left: 234px;
}
.nv03 {
	top: 303px;
	left: 294px;
}
.nv04 {
	top: 303px;
	left: 355px;
}
.nv01 a {background: #1a9bfc;}
.nv02 a {background: #fecb2e;}
.nv03 a {background: #3cca3f;}
.nv04 a {background: #fc6621;}
.nv01 a:hover, .nv01 a.act {background: #9fd4fc;}
.nv02 a:hover, .nv02 a.act {background: #fee79f;}
.nv03 a:hover, .nv03 a.act {background: #a4efa6;}
.nv04 a:hover, .nv04 a.act {background: #fcba9c;}
.index {
	border: solid 1px #919191;
	border-right: 0;
}
.index.toppage {
	width: 548px;
	border: solid 1px #919191;
}
#p3 img {
	border: solid 1px #919191;
	border-left: 0;
}


#book .inner {
	position: relative;
	width: 549px;
	height: 549px;
	border: solid 1px #919191;
	border-left: 0;
}
#book #p5 .inner {background-color: #fecb2e;background-image: url(../img/img_02_product.png);}
#book #p7 .inner {background-color: #3cca3f;background-image: url(../img/img_03_profile.png);}
#book #p9 .inner {background-color: #fc6621;background-image: url(../img/img_04_contact.png);}

#p7 iframe {
	position: absolute;
	top: 102px;
	left: 262px;
}


#p5 iframe,
#p9 iframe {
	width: 547px;
	height: 547px;
}

#works_to_contact {
	position: absolute;
	top: 400px;
	left: 210px;
	width: 73px;
	height: 20px;
	z-index: 200;
}
#works_to_contact a {
	display: block;
	width: 100%;
	height: 100%;
	background: none;
	text-indent: -9999px;
	cursor: pointer;
}
#works_to_contact a:hover {
	background: rgba(0,0,0,0.1);
}

/* form settings
	------	------	------ */
#form {
	position: relative;
	width: 548px;
	height: 547px;
/* 	background: left top no-repeat url(../img/img_04_contact.png) transparent; */
	background: transparent !important;
	background-image: url(../img/img_04_contact.png) !important;
}
#form input,
#form textarea,
#fitem li {
	position: absolute;
	margin: 0;
	padding: 0;
	font-size: 12px;
	border: none;
}
#form .alertmsg {
	position: absolute;
	top: 100px;
	left: 50px;
	width: 310px;
	height: 70px;
	font-size: 13px;
	font-weight: bold;
	color: #fff;
	background: #fc6621;
}
#form input,
#fitem li {
	line-height: 20px;
}
#fitem li {
	color: #709c1a;
	overflow: hidden;
}
#fitem li .msg {
	color: #e43c17;
}
#name, #fi1,
#corp, #fi9,
#sect,
#mail,
#mlvd,
#tele {
	width: 218px;
	height: 20px;
}

#name, #fi1 {
	top: 212px;
	left: 51px;
}
#corp, #fi2 {
	top: 249px;
	left: 51px;
}
#sect, #fi3 {
	top: 249px;
	left: 282px;
}
#mail, #fi4 {
	top: 286px;
	left: 51px;
}
#mlvd {
	top: 286px;
	left: 282px;
}
#tele, #fi6 {
	top: 360px;
	left: 51px;
}
#addr, #fi5 {
	top: 323px;
	left: 51px;
	width: 448px;
	height: 20px;
}
#pin1 {
	top: 360px;
	left: 282px;
	width: 20px;
	height: 20px;
	opacity: 0;
}
#pin0 {
	top: 360px;
	left: 339px;
	width: 20px;
	height: 20px;
	opacity: 0;
}
#pr1,#pr0 {
	position: absolute;
	display: block;
	width: 20px;
	height: 20px;
	text-indent: -9999px;
}
#pin1:checked + label,
#pin0:checked + label {
	width: 14px;
	height: 14px;
	background-color: #fc6621;/*#fc6621*/
	border: solid 3px #ffffff;
}
#pr1 {
	top: 360px;
	left: 282px;
}
#pr0 {
	top: 360px;
	left: 339px;
}
/*
#fi7 {
	top: 345px;
	left: 280px;
	width: 150px;
	height: 40px;
	background: #fc6621;
	text-indent: -9999px;
}
.mail2mask {
	position: absolute;
	top: 270px;
	left: 280px;
	width: 230px;
	height: 45px;
	background: #fc6621;
}

#body, #fi8 {
	top: 397px;
	left: 51px;
	width: 448px;
	height: 58px;
}
*/
.mail2mask {
	position: absolute;
	top: 270px;
	left: 280px;
	width: 230px;
	height: 45px;
	background: #fc6621;
}

#body, #fi7 {
	top: 397px;
	left: 51px;
	width: 448px;
	height: 58px;
}
#submit_contact {
	top: 463px;
	left: 51px;
}
#form .btns {
	top: 459px;
	left: 51px;
}
#form .btns {
	position: absolute;
}
#form .btns input {
	position: static;
	width: 126px;
	height: 21px;
	font-size: 11px;
	font-weight: bold;
	line-height: 19px;
	text-align: center;
	color: #fff;
	background: #fc6621;/*#e43c17*/
	border: solid 1px #fff;
	cursor: pointer;
}


/* works
	------	------	------ */
#works {
	position: relative;
	width: 548px;
	height: 547px;
	background: transparent !important;
	background-image: url(../img/img_02_product.png) !important;
}
#works .pass {
	position: absolute;
	top: 442px;
	left: 51px;
}
#works .submit {
	position: absolute;
	top: 442px;
	left: 182px;
}
#works .pass input {
	margin: 0;
	padding: 0;
	width: 125px;
	height: 20px;
	font-size: 12px;
	text-align: center;
	border: none;
}

#works .loginmiss {
	display: block;
	margin: 0;
	padding: 0;
	width: 125px;
	height: 20px;
	font-size: 12px;
	text-align: center;
	color: #e43c17;
	background: #FFEEEE;
	border: none;
}
#works .loginretry {
	position: static;
	width: 50px !important;
	height: 21px;
	font-size: 11px;
	font-weight: bold;
	line-height: 19px;
	text-align: center;
	color: #fff;
	background: #fecb2e;/*#e43c17*/
	border: solid 1px #fff;
	cursor: pointer;
}

/* iframe page fix
	------	------	------ */
.pageguard {
	position: absolute;
	z-index: 100;
/* 	background: rgba(0,0,0,0.1); */
}
.pageguard.gt {
	top: 0;
	left: 0;
	width: 100%;
	height: 442px;
}
.pageguard.gl {
	left: 0;
	bottom: 0;
	width: 50px;
	height: 100%;
}
.pageguard.gr {
	top: 0;
	right: 0;
	width: 315px;
	height: 100%;
}
.pageguard.gb {
	left: 0;
	bottom: 0;
	width: 100%;
	height: 86px;
}


.pageguard.fp9_1 {top: 0;left: 0;width: 100%;height: 210px;}
.pageguard.fp9_2 {top: 210px;left: 0;width: 51px;height: 274px;}
.pageguard.fp9_3 {top: 210px;right: 0;width: 50px;height: 274px;}
.pageguard.fp9_4 {top: 232px;left: 51px;width: 448px;height: 18px;}
.pageguard.fp9_5 {top: 269px;left: 51px;width: 448px;height: 18px;}
.pageguard.fp9_6 {top: 306px;left: 51px;width: 448px;height: 18px;}
.pageguard.fp9_7 {top: 342px;left: 51px;width: 448px;height: 18px; z-index: -1;}
.pageguard.fp9_8 {top: 380px;left: 51px;width: 448px;height: 18px;}
.pageguard.fp9_9 {bottom: 0;left: 0;width: 100%;height: 65px;}
.pageguard.fp9_10 {top: 455px;left: 51px;width: 448px;height: 8px;}
.pageguard.fp9_11 {top: 463px;right: 50px;width: 175px;height: 21px;}
.pageguard.fp9_12 {top: 210px;left: 270px;width: 13px;height: 113px;}
.pageguard.fp9_13 {top: 210px;left: 283px;width: 216px;height: 22px;}
.pageguard.fp9_14 {top: 360px;left: 303px;width: 36px;height: 20px;}
.pageguard.fp9_15 {top: 360px;left: 360px;width: 139px;height: 20px;}
.pageguard.fp9_16 {top: 360px;left: 270px;width: 13px;height: 20px;}