@charset "utf-8";

/* ---------------------------------------------------------
    recruit good
   ---------------------------------------------------------*/
.recruitNaviBox{
	position: relative;
	z-index: 30;
}

/* goodBox */
.goodBox{

}

.goodBox section{
	position:relative;
	z-index:20;
}

.goodBox img{
	width:100%;
	display: block;
}

.goodBox .img01{
	margin:80px auto 50px auto;
	width: 90%;
	max-width: 176px;
}

.goodBox .img02{
	width: 90%;
	max-width: 854px;
	margin: 0 auto 60px auto;
}

.goodBox .section1 .img02{ max-width:854px; }
.goodBox .section2 .img02{ max-width:774px; }
.goodBox .section3 .img02{ max-width:612px; }

.goodBox .img03{
	max-width: 650px;
	width: 90%;
	margin: 0 auto 40px auto;
}

.goodBox .img04{
	margin: 100px auto 70px auto;
	max-width: 1053px;
	width: 90%;
}

.goodBox .sep{
	border-top: 2px solid #333;
	border-bottom: 2px solid #333;
	height: 2px;
	max-width: 1100px;
	margin: 0 auto 50px auto;
}

/* background */
.bgBox{
	position:relative;
	z-index:10;
	opacity:0;
}

.bgBox .bgLeft{
/*
	position: fixed;
	left: 0;
	top: 0%;
	width: 50%;
*/
	position: fixed;
	top: 0%;
	width: 50%;
	left: 50%;
	transform: translate(-76%, 0);
	min-width: 1280px;
}

.bgBox .bgRight{
/*
	position: fixed;
	right: 0;
	top: 0%;
	width: 50%;
*/
    position: fixed;
    top: 0%;
    width: 50%;
    right: 50%;
    transform: translate(73%, 0);
    min-width: 1280px;
}

.bgBox .cir{
	background:#FF3196;
	border-radius:200px;
	display:block;
	position:absolute;
	transition:0.8s;
	background:none;
}


.bgBox .cirSize19{  width:19px;  height:19px;  }
.bgBox .cirSize37{  width:37px;  height:37px;  }
.bgBox .cirSize55{  width:55px;  height:55px;  }
.bgBox .cirSize67{  width:67px;  height:67px;  }
.bgBox .cirSize78{  width:78px;  height:78px;  }
.bgBox .cirSize90{  width:90px;  height:90px;  }
.bgBox .cirSize105{ width:105px; height:105px; }
.bgBox .cirSize133{ width:133px; height:133px; }
.bgBox .cirSize134{ width:134px; height:134px; }
.bgBox .cirSize177{ width:177px; height:177px; }

.bgBox .bgLeft .cir1{ left: 30%; }
.bgBox .bgLeft .cir2{ top: 60px; left: 10%;}
.bgBox .bgLeft .cir3{ top: 160px; left: 19%;}
.bgBox .bgLeft .cir4{ top: 300px; left: -4%;}
.bgBox .bgLeft .cir5{ top: 430px; left: 20%;}
.bgBox .bgLeft .cir6{ top: 570px; left: 5%;}
.bgBox .bgLeft .cir7{ top: 800px; left: 23%;}
.bgBox .bgLeft .cir8{ top: 880px; left: 12%;}

.bgBox .bgRight .cir1{ right: 30%; }
.bgBox .bgRight .cir2{ top: 60px;  right: 7%;}
.bgBox .bgRight .cir3{ top: 100px; right: 16%;}
.bgBox .bgRight .cir4{ top: 260px; right: -8%;}
.bgBox .bgRight .cir5{ top: 340px; right: 20%;}
.bgBox .bgRight .cir6{ top: 460px; right: 10%;}
.bgBox .bgRight .cir7{ top: 640px; right: -1%;}
.bgBox .bgRight .cir8{ top: 770px; right: 19%;}
.bgBox .bgRight .cir9{ top: 850px; right: 5%;}

.productBox01footer{
	position:relative;
	z-index:30;
}

#footer{
	z-index:30;
}




@media screen and (max-width: 1640px){

/*
	.bgBox{
		opacity:0.2;
	}
*/

}

@media screen and (max-width: 750px){

	.goodBox .img01{
		max-width:88px;
		margin: 50px auto 50px auto;
	}

	.goodBox .img02{
		max-width: 427px;
		margin: 0 auto 40px auto;
	}

	.goodBox .img03{
		width: 95%;
		margin: 0 auto 20px auto;
	}

	.goodBox .img04{
		margin: 50px auto 50px auto;
	}

	.goodBox .sep{
		margin: 0 auto;
	}

	.bgBox .bgLeft,
	.bgBox .bgRight{
		min-width: inherit;
		transition: inherit;
		opacity: 0.1;
		width: 100%;
		left: 0;
		right: 0;
		transform: inherit;
	}



}