@charset "UTF-8";


/* -- Structure [Index] -----------------------------------------------------*/
@media screen and (max-width: 767px) {
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
	.headline { position: relative; background: #000; overflow: hidden; height: 600px;}
	video { width: 100%; object-fit: cover; height: 600px;  }
	.headline .in { position: absolute; top: 150px; left: 0; right: 0; margin: 0 auto; z-index: 10; }
	.headline .in h1 { font-size: 60px; text-align: center; color: #fff; margin: 0 auto; }
	.headline .in h2 { text-align: center; font-size: 21px; color: #fff; font-weight:600; margin: 0 auto;}
	.headline .in h3 { text-align: center; font-size: 36px; color: #fff; font-weight: 700; margin: 0 auto 80px; font-family:'Roboto Condensed', sans-serif;}

	.overlay {
	  width: 100%;
	  height: 100vh;
	  position: absolute;
	  top: 0;
	  left: 0;
	  background-image: linear-gradient(45deg, rgba(0,0,0,.7) 50%, rgba(0,0,0,.9) 50%);
	  background-size: 4px 4px;
	  z-index: 2;
	}
}
@media screen and (min-width: 1025px) {	
	.headline { position: relative; background: #000; overflow: hidden; height: 600px;}
	video { width: 100%; object-fit: cover; height: 600px;  }
	.headline .in { position: absolute; top: 180px; left: 0; right: 0; margin: 0 auto; z-index: 10; }
	.headline .in h1 { font-size: 60px; text-align: center; color: #fff; margin: 0 auto; }
	.headline .in h2 { text-align: center; font-size: 21px; color: #fff; font-weight:600; margin: 0 auto;}
	.headline .in h3 { text-align: center; font-size: 36px; color: #fff; font-weight: 700; margin: 0 auto 80px; font-family:'Roboto Condensed', sans-serif;}

	.overlay {
	  width: 100%;
	  height: 100vh;
	  position: absolute;
	  top: 0;
	  left: 0;
	  background-image: linear-gradient(45deg, rgba(0,0,0,.7) 50%, rgba(0,0,0,.9) 50%);
	  background-size: 4px 4px;
	  z-index: 2;
	}
}


@media screen and (max-width: 767px) {
	.bx-wrapper .bx-viewport { width: 280px !important; margin: 0 auto 30px; }
	.bx-wrapper li { width: 110px !important; padding: 0 15px;}
	.bx-wrapper li p { text-align: center; font-size: 13px; }
	.bx-wrapper li img { text-align: center;}
	.bx-wrapper .bx-prev {
		left: -10px !important;
		background:url("../img/common/arrow_left.png") no-repeat 0 0px;
		background-size: 100%;
	}

	.bx-wrapper .bx-next {
		right: -10px !important;
		background:url("../img/common/arrow_right.png") no-repeat 0px 0px;
		background-size: 100%;
	}
	
	.dbList { margin-bottom: 20px; }
	.dbList li { float: left; width: 48%; margin-right: 2.6%; background: #f4f4f4; border: 1px solid #dedede; position: relative; height: 180px; margin-bottom: 10px; }
	.dbList li:nth-child(2n) { margin-right: 0px; }
	.dbList li div { position: absolute; top: 25px; margin: 0 auto; left: 0; right: 0; width: 60px;}
	.dbList li p { position: absolute; bottom: 25px; margin: 0 auto; left: 0; right: 0; text-align: center; font-size: 13px; line-height: 1.4; }
	/*.dbList li:nth-child(5) div { position: absolute; top: 15px; margin: 0 auto; left: 0; right: 0; width: 60px;}
	.dbList li:nth-child(5) p { position: absolute; bottom: 15px; margin: 0 auto; left: 0; right: 0; text-align: center; font-size: 13px; line-height: 1.4; }*/
	
	.dbList02 li { float: left; width: 100px !important; margin-right: 10px !important;}
	.dbList02 li.dbotom p { position: absolute; bottom: 15px; }
	.dbList02 li.dbotom02 p { position: absolute; bottom: 5px; }
}
@media screen and (min-width: 768px) {
	.bx-wrapper .dbSlider li p { text-align: center; }
	.bx-wrapper .dbSlider li div { text-align: center; margin-bottom: 10px;}
	.bx-wrapper .bookSlider li div img { width: 115px; margin: 0 auto 10px; }
	
	.dbList { margin-bottom: 20px; }
	.dbList li { float: left; width: 15%; margin-right: 1.5%; background: #f4f4f4; border: 1px solid #dedede; position: relative; height: 180px; }
	.dbList li:last-child { margin-right: 0px; }
	.dbList li div { position: absolute; top: 25px; margin: 0 auto; left: 0; right: 0; width: 60px;}
	.dbList li p { position: absolute; bottom: 25px; margin: 0 auto; left: 0; right: 0; text-align: center; font-size: 13px; line-height: 1.4; }
	
	.dbList02 li { float: left; width: 135px !important; margin-right: 10px; background: #f4f4f4; border: 1px solid #dedede; position: relative; height: 180px; }
	.dbList02 li.dbotom p { position: absolute; bottom: 15px; }
	.dbList02 li.dbotom02 p { position: absolute; bottom: 5px; }
}
@media screen and (min-width: 768px) and (max-width: 960px)  {
	.bx-wrapper  { width: 515px !important; margin: 0 auto 30px !important; max-width: 515px !important; }
	.bx-wrapper li { padding: 0 5px; }
	
	.dbList li { float: left; width: 15.5%; margin-right: 1%;}
	.dbList li p { font-size: 12px;}
	
	.dbList02 li { float: left; width: 145px !important; margin-right: 10px;}
}
@media screen and (min-width: 961px) and (max-width: 1024px)  {
	.bx-wrapper  { width: 700px !important; margin: 0 auto 30px !important; max-width: 700px !important; }
	.bx-wrapper li { padding: 0 10px; }
	
	.dbList { width: 960px;  margin:0 auto 20px; }
}
@media screen and (min-width: 1025px) and (max-width: 1279px)  {
	.bx-wrapper  { width: 950px !important; margin: 0 auto 30px !important; max-width: 950px !important; }
	.bx-wrapper li { padding: 0 20px; }
	
	.dbList { width: 960px;  margin:0 auto 20px; }
}
@media screen and (min-width: 1280px) {
	.bx-wrapper  { width: 950px !important; margin: 0 auto 30px !important; max-width: 950px !important; }
	.bx-wrapper li { padding: 0 22px; }
	
	.dbList { width: 960px;  margin:0 auto 20px; }
}

/* -- APPEND ----------------------------------------------------------------*/