@charset "utf-8";

/* nav
====================================================*/
ul.business{
	width:200px;
	height:auto;
	position:absolute;
	top:-50px;
	right:100px;
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	align-content:center;
	justify-content:center;
}
ul.business li{
	width:48%;
	height:auto;
	margin:0 1%;
	text-align:center;
	font-size:11px;
	border:1px solid #00aabb;
	border-top-right-radius:20px;
	border-bottom-left-radius:20px;
	overflow:hidden;
}
ul.business li a{
	width:100%;
	height:auto;
	padding:5px 0;
	display:block;
	color:#000;
	background:#fff;
}
ul.business li a:hover{
	color:#fff;
	background:#0ab;
}
ul.business li a.current{
	color:#fff;
	background:#0ab;
}
ul.business li a.current:hover{
	cursor:default;
}

/* page oem
====================================================*/
div#oem.contents{
	height:auto;
	padding:0 100px 100px 100px;
	margin:0 auto;
	overflow:visible;
}
div#oem.contents .secBlock{
	margin:0 auto 50px auto;
	overflow:visible;
}
/* title */
div#oem.contents div#title{
	position:relative;
}
div#oem.contents div#title h1{
	width:100%;
	height:auto;
	margin:180px auto 0 auto;
	font-size:50px;
}
div#oem.contents div#title h2{
	width:100%;
	position:absolute;
	top:20px;
	left:0;
	text-align:right;
	font-size:12px;
	font-weight:bold;
}
/* sec */
div.secBlock div.secInner{
	width:100%;
	padding:30px;
	display:block;
	border:1px solid #0ab;
	border-top:none;
	position:relative;
	overflow:visible;
}
div#sec01 div.secInner{border-left:none;}
div#sec02 div.secInner{border-right:none;}

div#oem.contents div.secInner h1{
	width:auto;
	position:absolute;
	top:50%;
	margin-top:-75px;
	font-size:60px;
	font-weight:bold;
	color:rgba(0, 170, 187, 0.3);
	overflow:visible;
}
div.secBlock div.secInner h1::before{
	content:"";
	width:70px;
	height:70px;
	position:absolute;
	top:-90px;
	left:50%;
	margin-left:-35px;
	background:rgba(0, 170, 187, 0.3);
	display:block;
}
div.secBlock div.wrap{
	display:flex;
	justify-content:center;
	align-items:center;
	align-content:center;
	position:relative;
}
div.wrap div{
	height:360px;
	margin:50px 0;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	align-content:center;
	position:relative;
}
div.wrap > div:nth-child(1){
	width:300px;
	height:400px;
}
div.wrap > div:nth-child(2){
	width:calc(100% - 300px);
}
div.wrap div h2{
	width:100%;
	text-align:center;
	font-size:24px;
	color:#fff;
}
div.wrap div h3{
	width:100%;
	margin:20px auto;
	text-align:center;
	font-size:20px;
}
div.wrap div p{
	width:90%;
	max-width:550px;
}

/*sec01*/
div#sec01 div.secInner h1{right:-50px;}
div#sec01 div.wrap{flex-direction:row;}
div#sec01 div.wrap > div:nth-child(1){
	background:#ddd url("../img/oem01.jpg") center center no-repeat;
	background-size:cover;
}
div#sec01 div.wrap div ul{
	width:90%;
	max-width:350px;
	padding:10px 0 0 20px;
	margin:0 auto 30px auto;
	line-height:2;
	border-left:1px solid #000;
	border-right:1px solid #000;
}

div#sec01 div.wrap div ul li{
	padding:0 0 10px 10px;
	position:relative;
	letter-spacing: 4px;
	line-height:1.4;
}
div#sec01 div.wrap div ul li::before{
	content:"";
	width:5px;
	height:1px;
	position:absolute;
	top:7px;
	left:0;
	background:#000;
}
/*sec02*/
div#sec02 div.secInner h1{left:-50px;}
div#sec02 div.wrap{flex-direction:row-reverse;}
div#sec02 div.wrap > div:nth-child(1){
	background:#ddd url("../img/oem02.jpg") center center no-repeat;
	background-size:cover;
}
div#sec02 div.wrap div dl{
	width:90%;
	max-width:440px;
	padding:10px 0 1px 10px;
	margin:0 auto 30px auto;
	line-height:2;
	border-left:1px solid #000;
	border-right:1px solid #000;
}
div#sec02 div.wrap div dl dt{
	padding:0 0 0 30px;
	margin:0 0 10px 30px;
	font-weight:normal;
	position:relative;
	display:block;
	line-height:1.4;
}
div#sec02 div.wrap div dl dt:hover{
	cursor: pointer;
}
div#sec02 div.wrap div dl dt::before{
	content:"open";
	width:auto;
	height:15px;
	padding:0 2px;
	position:absolute;
	top:0;
	left:-20px;
	font-size:10px;
	line-height:1.1;
	letter-spacing:0;
	color:#000;
	background:#fff;
	border:1px solid #000;
	display:block;
	transition:all 0.4s ease-in-out;
}
div#sec02 div.wrap div dl dt:hover::before{
	color:#fff;
	background:#000;
}
div#sec02 div.wrap div dl dd{
	display:none;
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	color:#fff;
	background:rgba(0,0,0,0.9);
	flex-direction:column;
	justify-content:center;
	align-items:center;
	align-content:center;
	z-index:999;
}
div#sec02 div.wrap div dl dd span{
	width:90vw;
	max-width:500px;
	display:block;
}
div#sec02 div.wrap div dl dd span:nth-child(1){
	width:100%;
	margin:0 auto 30px auto;
	text-align:center;
	font-size:24px;
}
div#sec02 div.wrap div dl dd span:last-child{
	width:120px;
	height:auto;
	margin:50px auto 0 auto;
	text-align:center;
	letter-spacing:2px;
	border:1px solid #fff;
	background:#000;
	transition:all 0.4s ease-in-out;
}
div#sec02 div.wrap div dl dd span.close:hover{
	cursor:pointer;
	color:#000;
	border:1px solid #fff;
	background:#fff;
}
/*  W:-1040px
====================================================*/
@media screen and (max-width: 1040px) {
	div#oem.contents{padding:0 50px 50px 50px;}
	ul.business{right:50px;}
}
/*  W:-940px
====================================================*/
@media screen and (max-width: 1040px) {
	div#sec02 div.wrap div dl dt span{display:block}
	div.secBlock div.secInner{padding:0;}
	div#oem.contents div.secInner h1{top:408px;margin-top:0;}
	div.wrap{display:block!important;}
	div.wrap > div:nth-child(1){width:calc(100% - 100px)!important;height:300px!important;}
	div.wrap > div:nth-child(2){width:calc(100% - 100px)!important;}
	div.wrap div{height:auto;margin:0 auto 30px auto;display:block;}
	div.wrap div p{width:100%;}
	div#sec02 div.wrap div dl dt span{display:none}
}
/*  W:-670px
====================================================*/
@media screen and (max-width: 670px) {
	ul.business{top:-25px;left:5px;}
	div#oem.contents div#title h1{margin:30px auto 0 auto;}
}

/*  W:-600px
====================================================*/
@media screen and (max-width: 600px) {
	ul.business{top:-25px;left:5px;}
	div#oem.contents{padding:0 10px;}
	div#sec01 div.secInner h1{right:5px;}
	div#sec02 div.secInner h1{left:5px;}
	div.wrap div{margin:0 auto 10px auto;}
	div.wrap > div:nth-child(1){width:100%!important;height:300px!important;}
	div.wrap > div:nth-child(2){width:96%!important;}
	div#sec01 div.wrap div ul{padding:0;border:none;}
	div#sec02 div.wrap div dl{padding:0;border:none;}
}