@charset "utf-8";

/*------------------------------
common
------------------------------*/
.cf:after {
	content: "";
	display: block;
	clear: both;
}
#mainArea {
	padding: 0;
}
#contentsArea {
	width: 1000px;
}
.pic img {
	vertical-align: middle;
}
.pic {
	position: relative;
}
.btn {
	position: absolute;
}
.btn a:hover {
	opacity: 0.9;
}
.btn img {
	max-width: 100%;
}

.pic01 .logo {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	margin: 67px auto 33px;
}
.pic01 .nav {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	width: 570px;
	margin: 0 auto 85px;
}
.pic01 .nav a:hover img {
	opacity: 1;
	filter: alpha(opacity=100);
}
.swiper-container .swiper-wrapper {
	margin-bottom: 120px;
}
.swiper-container .swiper-pagination {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	bottom: 11% !important;
}
.swiper-container .swiper-pagination-bullet {
	background: #4d4d4d;
	width: 72px;
	height: 10px;
	border-radius: 0;
	margin: 0 6px !important;
	opacity: 1;
}
.swiper-container .swiper-pagination-bullet-active {
	background: #949494;
}
.pic01 .item img {
	max-width: 100%;
}
.pic01 .item01 {
	position: absolute;
	top: 22.3%;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 42%;
	z-index: 1;
}
.pic01 .btn01 {
	bottom: 4.4%;
	right: 11.1%;
	width: 21.5%;
	z-index: 1;
}

.pic12 ul {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.pic12 ul li {
	position: absolute;
	width: 45.8%;
}
.pic12 ul li a {
	display: block;
}
.pic12 ul li a img {
	max-width: 100%;
}
.pic12 ul li.btn_01 {
	top: 20%;
	left: 3.8%;
}
.pic12 ul li.btn_02 {
	top: 20%;
	right: 4%;
}
.pic12 ul li.btn_03 {
	bottom: 39%;
	left: 3.8%;
}
.pic12 ul li.btn_04 {
	bottom: 39%;
	right: 4%;
}
.pic12 ul li.btn_05 {
	bottom: 13%;
	right: 50.5%;
}
.pic12 ul li.btn_06 {
	bottom: 13%;
	right: 4%;
}

@media only screen and (max-width: 767px) {
	#contentsArea {
		width: 100%;
		padding: 0;
	}
	.pic01 .logo {
		width: 71.3vw;
		margin: 6vw auto 3vw;
	}
	.pic01 .nav {
		width: 96%;
		margin: 0 auto 8vw;
	}
	.pic01 .nav li {
		width: 33%;
	}
	.swiper-container .swiper-wrapper {
		margin-bottom: 12vw;
	}
	.swiper-container .swiper-pagination-bullet {
		width: 9vw;
		height: 1.4vw;
		margin: 0 0.7vw !important;
	}
	.pic01 .item img {
		max-width: 100%;
	}
	.pic01 .item01 {
		top: 25.3%;
	}
}
