@charset "UTF-8";

/*-----------------------------------------------------------------------------------visual----------*/

.main_process{
width:100%;
height:280px;
background:url( ../images/v_process.jpg) no-repeat center center #231815;
/*background-size:cover;*/
}
.main_process_a{
width:100%;
height:280px;
background:url( ../images/v_about_a.jpg) no-repeat center center #c4a978;
/*background-size:cover;*/
}
.main_process_c{
width:100%;
height:280px;
background:url( ../images/v_about_c.jpg) no-repeat center center #190103;
/*background-size:cover;*/
}
@media screen and (max-width: 979px) {

  .main_process{ height:100%; }

}


/*----------------------------------------------------------------------------------page_tit----------*/

@media screen and (min-width: 980px) {

  #title h2{ margin-top:-134px; }

  #title p{ margin:-20px 0 0 80px; }

}

@media screen and (max-width: 979px) {

  #title h2{
  height:46px;
  background: url( ../images/title2_process.png) no-repeat center top;
  }

}


/*----------------------------------------------------------------------------------content----------*/

.intro{ margin-top:50px; }

.intro p:first-child{
width:450px;
float:right;
padding:20px 0 0 30px;
}

#intro-photo{float: left;margin: 0 auto;}

.point li{ margin-top:60px; }

.point li{
float:left;
width:300px;
margin-left:30px;
}

.point li:first-child{ margin-left:0px; }

.point h3, .point h4{ text-align:center; }

.point h4{
font-weight:bold;
color:#c4a978;
margin-top:12px;
letter-spacing:2px;
}

.point p{
line-height:1.8;
margin-top:4px;
}

.wecan{
margin-top:80px;
padding-bottom:66px;
}

.wecan h3, .works h3, .flow h3 {
border-bottom: 1px solid #dddddd;
padding-bottom: 18px;
position: relative;
}

.wecan h3:after, .works h3:after, .flow h3:after {
background-color: #c4a978;
content: "";
height: 1px;
width: 50px;
position: absolute;
bottom: -1px;
left: 0;
}

.wecan .read { margin-top:14px; }

.wecan ul{ margin-top:35px; }

.wecan li{
width:408px;
padding:20px 30px;
background-color:#faf8f5;
float:left;
margin:0 24px 24px 0;
}

.wecan li:nth-child(even){ margin:0 0 24px 0; }

.wecan li span {
text-align:center;
display:block;
}

.wecan li h4 {
margin-top:10px;
text-align:center;
font-weight:bold;
color:#c4a978;
letter-spacing:2px;
}

.wecan li p{
margin-top:6px;
border-top:1px dotted #ccc;
padding-top:8px;
line-height:1.8;
}

/*--------------------------------------------------------------------------------------------------------------slider----------*/

#list_carousel ul{ width:100%; }

#list_carousel li{
width:480px;
height:260px;
float:left;
}

.caroufredsel_wrapper{
width:100% !important;
background-color:#fff;
}

#photo-list li,#photo-list li a{overflow: hidden;background-color: #c4a978;}
#photo-list li a img {
	max-width: 100%;
	-webkit-transition: 0.25s;
	-moz-transition: 0.25s;
	-ms-transition: 0.25s;
	-o-transition: 0.25s;
	transition: 0.25s;
}
#photo-list li a:hover img {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}

.sp-arrow {
	width: 40px;
	height: 40px;
	background-color: #fff;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-transition: 0.2s;
	-moz-transition: 0.2s;
	-ms-transition: 0.2s;
	-o-transition: 0.2s;
	transition: 0.2s;
}
.sp-arrow:hover{opacity: 0.6;}
.sp-next-arrow:after, .sp-next-arrow:before, .sp-previous-arrow:after, .sp-previous-arrow:before {
	width: 10%;
	height: 25%;
	background-color: #c4a978;
}
.sp-arrow:before {
	left: 40%;
	top: 25%;
}
.sp-arrow:after {
	left: 40%;
	top: 50%;
}

.slider-pro a {
	-webkit-transition: 0.2s !important;
	-moz-transition: 0.2s !important;
	-ms-transition: 0.2s !important;
	-o-transition: 0.2s !important;
	transition: 0.2s !important;
}

/*----------------------------------------------------------------------------------content----------*/

.sodan{ margin-top:30px; }

.sodan .text{
background-color:#faf8f5;
padding:26px 30px;
width:419px;
height:185px;
border:1px solid #eee;
border-right:none;
float:left;
}
.sodan .photo{ max-height:239px; overflow:hidden}
.sodan h3{
font-weight:bold;
font-size:15px;
line-height:2.0;
color:#c4a978;
letter-spacing:2px;
}

.sodan p{
line-height:2.0;
margin-top:10px;
}
.text p{ max-height:100px; overflow:hidden}
.works{ margin-top:80px; }

.case{
margin-top:30px;
padding-bottom:20px;
}

.case .text{
width:460px;
padding-top:10px;
}

.case .f_r{ float:right; }
.case .f_l{ float:left; }

.case .text span{
color:#c4a978;
font-size:12px;
font-weight:bold;
}

.case .text h4{
font-size:15px;
font-weight:bold;
letter-spacing:2px;
line-height:1.6;
border-bottom:1px dotted #ccc;
padding-bottom:5px;
}

.case .text p{ margin-top:10px; }

.case .photo{
border:1px solid #ddd;
padding:5px;
width:458px;
height:239px; max-height:239px !important; overflow:hidden !important;
}

.flow{
margin-top:70px;
padding-bottom:70px;
}

.flow h3{ margin-bottom:30px;}

.fw_box .text{
background-color:#faf8f5;
padding:26px 30px;
width:526px;
height:151px;
border-top:1px dotted #ccc;
border-bottom:1px dotted #ccc;
float:right;
}

.fw_box .text span{
font-size:12px;
font-weight:bold;
}

.fw_box .text h4{
color:#c4a978;
font-size:18px;
font-weight:bold;
letter-spacing:2px;
line-height:1.6;
margin-top:5px;
}

.fw_box .text p{ margin-top:5px; }

.fw_box .photo{
border:1px solid #ddd;
padding:5px;
width:350px;
}

.flow .next{
text-align:center;
margin:12px 0;
}

.link a{
color:#c4a978;
text-decoration:underline;
}


@media screen and (max-width: 979px) {

  .intro{
  width:90%;
  margin:50px auto 0;
  text-align:center;
  }

  .intro p:first-child{
  width:100%;
  float:none;
  margin-bottom:30px;
  padding:0;
  text-align:left;
  }

  #intro-photo{float: none;}

  .point li{
  float:none;
  width:480px;
  margin:60px auto 0 !important;
  }

  .wecan{
  width:90%;
  margin:80px auto 0;
  }

  .wecan li{
  box-sizing:border-box;
  width:48%;
  margin-right:3.8%;
  }

  #list_carousel li{
  width:240px;
  height:130px;
  }

  .sodan{
  margin-top:60px;
  padding:26px 30px;
  background-color:#faf8f5;
  border:1px solid #eee;
  }

  .sodan .text{
  width:100%;
  height:auto;
  padding:0 0 30px;
  border:none;
  float:none;
  }

  .sodan .photo{
  text-align:center;
  }

  .works,
  .flow{
  width:90%;
  margin:60px auto 0;
  }

  .case .text{
  width:100%;
  padding-top:0;
  padding-bottom:20px;
  }

  .case .f_r{ float:none; }
  .case .f_l{ float:none; }

  .case .photo{
  box-sizing:border-box;
  width:100%;
  max-width:458px;
  margin:0 auto;
  }

  .fw_box{ position:relative; }

  .fw_box .text{
  padding:14px 20px 20px 250px;
  width:auto;
  height:auto;
  border-top:1px dotted #ccc;
  border-bottom:1px dotted #ccc;
  float:none;
  }

  .fw_box .photo{
  position:absolute;
  left:20px;
  top:50%;
  width:200px;
  margin-top:-60px;
  background:#fff;
  }

}

@media screen and (max-width: 740px) {

  .point li{
  width:80%;
  max-width:300px;
  }

  .wecan li{
  float:none;
  width:100%;
  margin-right:0;
  }

  #list_carousel li{
  width:200px;
  height:108px;
  }

  .fw_box .text{
  width:auto;
  padding:20px;
  height:auto;
  border:none;
  float:none;
  margin:0;
  }

  .fw_box .photo{
  display:none;
  }

}
.pager { list-style: none; clear: both; line-height: 1; margin: 0; padding: 30px 0 66px;; text-align: center;}
.pager li { display: inline; margin: 4px; padding: 0;}
.pager li span,
.pager li a { display: inline-block; padding:9px 6px; background: #fff; text-decoration: none; vertical-align: middle; border:1px solid #ccc; color:#000;}
.pager li a:hover { background-color: #c4a978;color: #fff; border:1px solid #c4a978;}
.pager li.active span { background: #c4a978; color: #fff; border:1px solid #c4a978;}