@charset "utf-8";
/* CSS Document */

/* # =================================================================
   # global-nav
   # ================================================================= */

#top-main-img .drawer-hamburger {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 9999;
}

#top-main-img .drawer-hamburger-icon,
#top-main-img .drawer-hamburger-icon:before,
#top-main-img .drawer-hamburger-icon:after {
  background-color: #fff;
}

.drawer-open #top-main-img .drawer-hamburger-icon {
  background-color: transparent;
}

.drawer-open #top-main-img .drawer-hamburger-icon:before,
.drawer-open #top-main-img .drawer-hamburger-icon:after {
  top: 0;
	background-color: #aaa;
}

.drawer-open #top-main-img .drawer-hamburger-icon:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

#top-main-img .drawer-open .drawer-hamburger-icon:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

@media (min-width: 640px) {
	#top .drawer-navbar {
		height: 780px;
		background-color: #fff;
	}
	
	#top .drawer-navbar .drawer-navbar-header{
		height: 700px;
		width: 100%;
		position: relative;
		background: url(../img/top/top_main_img.jpg) no-repeat;
		background-size: cover;
		background-position: 50% 20%;
	}
	
	#top .drawer-navbar .drawer-navbar-header::after{
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url(../img/common/img_cover.png) center center;
		opacity: 0.4;
	}
	
	#top .drawer-navbar .drawer-navbar-header h1 img {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		z-index: 2;
		width: 300px;
	}
}

/*!------------------------------------*\
    cb-header
\*!------------------------------------*/
.cb-header {
  position: fixed;
  left: 0;
  visibility: hidden;
}

@media screen and (min-width: 640px){
	.cb-header {
		position: static;
		visibility: visible;
	}
}


/* # =================================================================
   # main-img
   # ================================================================= */
#top-main-img {
	height: 100vh;
	position: relative;
	background: url(../img/top/top_main_img.jpg) no-repeat;
	background-size: cover;
	background-position: 55% 50%;
}

#top-main-img::after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/common/img_cover.png) center center;
	opacity: 0.4;
}

#top-main-img p img {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	width: 70%;
	z-index: 1;
}


/* # =================================================================
   # top-contents
   # ================================================================= */
#top-product{
	width: 100%;
	/*background: linear-gradient(-45deg, rgba(138, 0, 235, .8), rgba(0, 235, 227, .8)), url(../img/top/top_product_bg.jpg);*/
	/*background: #7f9aac;*/
	background: linear-gradient(-45deg, rgba(57, 100, 133, 0.9), rgba(91, 91, 151, 0.9)), url(../img/top/top_product_bg.jpg);
	background-size: cover;
	padding: 80px 0; 
}

#top-product h3,
#top-bland h3,
#top-forming h3,
#top-news h3{
	color: #fff;
	text-align: center;
	font-size: 2.4rem;
	margin-bottom: 20px;
}

#top-product .pcNone{
	color: #fff;
	text-align: center;
}

.bx-wrapper{
	display: none;
}

p.btn-detail a{
	display: block;
	border: 1px solid #fff;
	width: 80%;
	height: 5rem;
	color: #fff;
	margin: 0 auto;
	line-height: 5rem;
	font-weight: bold;
	margin-top: 80px;
}

p.btn-detail a::after{
	content: "";
	display: inline-block;
	width: 0.6em;
	height: 0.6em;
	margin-left: .5em;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	vertical-align: 2px;
	-webkit-transition: -webkit-transform 0.35s;
	transition: all 0.35s;
}

#top-bland,
#top-forming{
	text-align: center;
	background: #ccc;
	color: #fff;
	padding: 80px 0;
}

#top-bland{
	background: url(../img/top/top_bland_bg.jpg) no-repeat;
	background-size: cover;
	background-position: 50% 30%;
}

#top-forming{
	background: url(../img/top/top_forming_bg.jpg) no-repeat;
	background-size: 170%;
	background-position: 40% 50%;
}

#top-news {
	padding: 50px 2%;
}

#top-news h3{
	color: #396485;
}

#top-news dl{
	margin: 0 auto;
}

#top-news dl dt{
	font-weight: bold;
	color: #6f6fa6;
	padding: 10px 5px 5px;
}

#top-news dl dd{
	border-bottom: 1px dotted #d9d9d9;
	padding: 0px 5px 10px;
}

@media screen and (min-width: 640px){
	#top-product{
		width: 100%;
		background: #b0c2ce;
		padding: 40px 0 50px;
	}
	
	#top-product h3,
	#top-bland h3,
	#top-forming h3,
	#top-news h3{
		font-size: 3rem;
		margin-bottom: 15px;
	}
	.bx-wrapper{
		display: block;
	}
	
	.maker-slider{
		height: 260px;
		overflow: hidden;
		width: 960px;
		margin: 0 auto;
	}
	
	.maker-slider li{
		width: 300px;
		height: 260px;
		margin: 0 30px 0 0;
		background: rgba(255,255,255,0.4);
		box-sizing: border-box;
		border: 1px solid #fff;
		text-align: center;
		font-size: 1.6rem;
		font-weight: bold;
		line-height: 2rem;
		position: relative;
		-webkit-transition: -webkit-transform 0.35s;
		transition: all 0.35s;
	}
	
	.maker-slider li:hover{
		background: rgba(255,255,255,1.0);
	}
	
	.maker-slider li figure{
		margin: 50px 15px 5px;
	}
	
	.maker-slider li p.link-more,
	.maker-slider li p.link-blank{
		position: absolute;
		display: block;
		width: 100%;
		bottom: 0;
		line-height: 3.6rem;
		background: #396485;
		color: #fff;
		font-weight: normal;
		-webkit-transition: -webkit-transform 0.35s;
		transition: all 0.35s;
		font-size: 1.4rem;
	}
	
	.maker-slider li:hover p.link-more,
	.maker-slider li:hover p.link-blank{
		background: #5b5b97;
	}
	
	.maker-slider li p.link-more::after{
		content: "";
		display: inline-block;
		width: 0.6em;
		height: 0.6em;
		margin-left: .5em;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		vertical-align: 2px;
		-webkit-transition: -webkit-transform 0.35s;
		transition: all 0.35s;
	}
	
	.maker-slider li p.link-blank::after{
		content: "\f08e";
		font-family: "FontAwesome";
		display: inline-block;
		padding-left: 0.8rem;
	}
	
	a.block-link{
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-indent: -9999px;
		text-align: left;
		z-index: 2;
	}
	
	p.btn-detail a{
		display: none;
	}
	
	.top-harf-wrap{
		min-width: 960px;
	}
	
	#top-bland,
	#top-forming{
		width: 50%;
		float: left;
		text-align: center;
		background-image: none;
		color: #fff;
		position: relative;
		overflow: hidden;
	}
	
	.bg-scale {
		position: relative;
		overflow: hidden;
		background: #fff;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}
	#top-bland.bg-scale:after {
		background: url(../img/top/top_bland_bg.jpg) no-repeat center center;
	}
	#top-forming.bg-scale:after {
		background: url(../img/top/top_forming_bg.jpg) no-repeat center center;
	}
	.bg-scale:after {
		position: absolute;
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		top: 0;
		background-size: cover;
		-webkit-transition: -webkit-transform 0.35s ease-out;
		transition: all .35s ease-out;
		z-index: 0;
	}
	.bg-scale:hover:after {
		opacity: .9;
		filter: blur(5px);
		-webkit-transform: scale(1.03);
		transform: scale(1.03);
	}
	
	.bg-scale h3,
	.bg-scale p{
		z-index: 1;
		position: relative;
	}
	
	.btn-detail-txt{
		width: 280px;
		height: 50px;
		line-height: 50px;
		margin: 60px auto 0;
		display: block;
		color: #fff;
		font-weight: bold;
		border: 1px solid #fff;
		-webkit-transition: -webkit-transform 0.35s;
		transition: all 0.35s;
		position: relative;
		overflow: hidden;
		z-index: 1;
	}
	.btn-detail-txt::after {
		content: "";
		display: inline-block;
		width: 0.6em;
		height: 0.6em;
		margin-left: .5em;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		vertical-align: 2px;
		-webkit-transition: -webkit-transform 0.35s;
		transition: all 0.35s;
	}
	.btn-detail-txt::before{
		content: "";
		width: 100%;
		height: 100%;
		display: block;
		position: absolute;
		bottom: 0;
		top: 0;
		right: 0;
		left: 0;
		background: rgba(255,255,255,0);
		-webkit-transition: -webkit-transform 0.35s ease;
		transition: all 0.35s ease;
		z-index: -1;
	}
	
	.bg-scale:hover .btn-detail-txt::before{
		background: rgba(255,255,255,0.7);
	}

	.bg-scale:hover .btn-detail-txt{
		color: #5b5b97;
	}
	.bg-scale:hover .btn-detail-txt::after {
		border-color: #5b5b97;
	}
	
	#top-news{
		padding: 60px 0;
	}
	
	#top-news dl dt,
	#top-news dl dd{
		padding: 15px 5px;
	}
	
	#top-news dl dt{
		float: left;
		width: 10rem;
		font-weight: bold;
		color: #6f6fa6;
	}
	
	#top-news dl dd{
		padding-left: 10rem;
		border-bottom: 1px dotted #d9d9d9;
	}
}