@charset "utf-8";
/* CSS Document */
body{
	/*background-color:#ececec;*/
}
.limited{ display: none;}
	
.banner{
	/*background-image: url("../images/banner/1.png");*/
	height: 700px;
	/*background-position: center center;*/
}

@media only screen and (max-width:480px) {
	.banner{ height: 200px;}
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
	.banner{ height: 400px;}
}
@media only screen and (min-width:1025px) {
}


.pageBody {
}


.module{ background-repeat: no-repeat; background-position: center center;}
.module .titleBar{}
.module .titleBar .columnName{ font-size: 24px; color: #A0A0A0; display: inline; color: #9F9F9F}
.module .titleBar .slaveColumnName{ font-size: 50px; display: inline; font-weight: bold;text-transform:uppercase; color: #2B2B34}
.module .content{}
.module .more{ width: 30px; height: 30px; background-color: #de281a; color: #fff; display: block; text-align: center; line-height: 30px;font-size: 18px; border-radius: 50%;}



@media only screen and (max-width:480px) {
	.module .titleBar .columnName{ display: block; }
	.module .titleBar .slaveColumnName{ display: block;}
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
}
@media only screen and (min-width:1025px) {
}





#about{}
#about .titleBar{ padding-top: 60px; padding-bottom: 30px;}
#about .titleBar .columnName{ display: block;}
#about .titleBar .slaveColumnName{ display: block;}

#about .content{ width: 540px; height: 390px; background-color: #f8f8f8; padding: 30px; position: relative;}
#about .content p{ line-height: 30px; color: #999; width: 330px;}
#about .more{ margin-top: 50px;}







@media only screen and (max-width:480px) {
	#about .video{ width: 100%;}
	#about .content{ width:90%; height: auto;}
	#about .content p{ width: auto;}
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
	#about .video{ width: 100%;}
	#about .content{ width:90%; height: auto}
	#about .content p{ width: auto;}
}
@media only screen and (min-width:1025px) {
	#about .titleBar{ padding-top: 120px; padding-bottom: 30px;}
	#about .video{ width: 783px; height: 450px; position: absolute; top: 110px; right: 0;}
}















#links{ height: 360px;}
#links ul{ display: flex; flex-wrap: wrap;}
#links li{ width: 16.66%; height: 250px;}
#links li a{ width:100%; display:block; text-align: center; padding-top: 30px;}
#links li .icon{ display:block; width:100px; height:100px; margin:auto; margin-bottom: 30px; background-position: center center; background-repeat: no-repeat; border: solid 1px #de281a; border-radius: 50%;}
#links li .columnName{ display: block; font-size: 18px; margin-bottom: 0px; color: #000;}
#links li .slaveColumnName{display: block; color: #B9B9BD;}


@media only screen and (max-width:480px) {
	#links{ height: auto;}
	#links li{ width: 33.33%; height: 250px;}
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
	#links li{ width: 16.66%; height: 250px;}
	#links li a{padding-top: 90px;}
}
@media only screen and (min-width:1025px) {
	#links li{ width: 16.66%; height: 250px;}
	#links li a{padding-top: 90px;}
}





#link_1 .icon{ background-image: url("../images/links/01.png");}
#link_2 .icon{ background-image: url("../images/links/02.png");}
#link_3 .icon{ background-image: url("../images/links/03.png");}
#link_4 .icon{ background-image: url("../images/links/04.png");}
#link_5 .icon{ background-image: url("../images/links/05.png");}
#link_6 .icon{ background-image: url("../images/links/06.png");}


#link_1:hover .icon{ background-image: url("../images/links/001.png");}
#link_2:hover .icon{ background-image: url("../images/links/002.png");}
#link_3:hover .icon{ background-image: url("../images/links/003.png");}
#link_4:hover .icon{ background-image: url("../images/links/004.png");}
#link_5:hover .icon{ background-image: url("../images/links/005.png");}
#link_6:hover .icon{ background-image: url("../images/links/006.png");}





#news{ background-color: #f8f8f8;}
#news .titleBar{padding-top: 40px; padding-bottom: 40px;}
#news .titleBar .columnName{ display: inline; }
#news .titleBar .slaveColumnName{ display: inline; }
#news .more{ position: absolute; right: 0; top: 60px;}
#news .wrapper{}
#news ul{ display: flex; flex-wrap: wrap;}

#news li{ width:50%; height:300px; /*display: flex; flex-direction: column*/ margin: 0; margin-bottom: 10px; padding: 0;}
#news .preview{ width: 300px; height: 300px; margin: 0;}
#news .container{ position: absolute; right: 30px; top: 20px;width: 270px; height: 170px;  background-color: #fff; padding: 25px}

#news .title{ text-align: left; font-size: 16px; width: 100%; order: 2; height: 60px; line-height: 30px; padding: 5px 0; height: 60px;overflow: hidden;}
#news .description{ display: block; width: 100%; order: 3; flex-grow: 1; color: #A0A0A0;}
#news .updateDate{ display: block; order: 1; border-bottom: solid 1px #bbbbbb;}


#news .updateDate .day{ font-size: 35px; color:#de281a; font-weight: bold; font-style: italic;}
#news .updateDate .yearAndMonth{}



@media only screen and (max-width:480px) {
	#news li{ width: 100%;}
	#news .container{ right: 0px; top: auto; bottom: 0; width: 200px;}
	#news .description{ display: none;}
	#news .container{ height: auto;}
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
}
@media only screen and (min-width:1025px) {
	#news{ height: 830px;}
}













#service{}
#service .titleBar{ display: none;}
#service .wrapper{ background-color: #000;/*height: 315px;*/smax-width: 100%; width: 100%;}
#service ul{ display: flex; max-width: 1200px; margin: auto; flex-wrap: wrap;}
#service li{ width: 200px; height: 450px;text-align: center; background-color: #fff; cursor: pointer;}
#service .preview{ height: 315px; width: 100%;overflow: hidden;background-color: #eee; display: block;filter: grayscale(100%);}
#service .preview img{ width:100%;height: 315px;object-fit: cover;}
#service li.focus .preview{filter: grayscale(00%);}

#service .icon{ width: 30px; height: 2px; overflow: hidden; background-color: #fff;display: block; margin: auto;margin-top: 20px; }
#service .columnName{ display: block; margin-top: 10px; font-size: 16px; line-height: 1.5em;}
#service .slaveColumnName{ display: block; font-size: 16px; line-height: 1.5em;}

#service li.focus{ background-color: #d82133; color: #fff;}
#service li.focus a{color: #fff;}


@media only screen and (max-width:480px) {
	#service li{ width:33.33%;}
	#service .slaveColumnName{ display: none;}
	#service li{height: 300px;}
	#service .preview{ height: 200px;}
	#service .preview img{ height: 200px;}
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
	#service li{ width:33.33%;}
}
@media only screen and (min-width:1025px) {
	#service li{ width:16.66%;}
	#service{ height: 450px;}
}







#contact{
}
#contact .wrapper{ max-width: 1000px;}
#contact .titleBar{ text-align: center; padding-top: 80px;}
#contact ul{ display: flex; padding-top: 50px;}
#contact li{ width: 33.33%; text-align: center; line-height: 24px;}
#contact .icon{width: 120px; height: 120px; background-color: #f5f7f9; border-radius: 50%;margin: auto; margin-bottom: 40px;}



@media only screen and (max-width:480px) {
	#service li{ width:33.33%;}
	#service .slaveColumnName{ display: none;}
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
}
@media only screen and (min-width:1025px) {
	#contact{
		height: 420px;
	}
}



#message{ height: 350px; padding-top: 20px;}
#message .wrapper{ max-width: 1000px;}
#message .titleBar{ text-align: center; padding-top: 30px; display: none;}

#message li{ padding: 10px 0; max-width: 990px;}
#message label{ display: none;}

#message input{border: none; border: solid 1px #cdcdcd; padding: 0; height: 40px; width: 100%; font-size: 18px;/* max-width: 970px;*/ padding: 0 10px;box-sizing: border-box}
#message textarea{border: none; border: solid 1px #cdcdcd; padding: 0; height:80px; width: 100%; font-size: 18px;/* max-width: 970px;*/ padding: 0 10px; display: block; box-sizing: border-box}
#message input[type=submit]{ background-color: #111111; border: none; color: #fff; width: 100%; cursor: pointer;}




@media only screen and (max-width:480px) {
}
@media only screen and (min-width : 481px) and (max-width : 1024px) {
}
@media only screen and (min-width:1025px) {
	#message{ height: 350px;}
	#message .form ul:nth-child(1) li{ width:47%;}
	#message .form ul:nth-child(1){display: flex;justify-content: space-between; max-width: 990px;}
}