/*layout*/
header{box-shadow:none}
header:after{display:none;}

/*main*/
#main{/*max-width:1260px;*/margin:0 auto;/* padding:0 40px; */ padding:40px 40px; background-color: #fefaee;}
#main .visual{text-align:center;}
#main .visual:after{content:'';display:block;clear:both}
#main .visual h3{
	padding-top:30px;
	font-family: 'Moebius_en', 'Moebius';text-align:center;font-size:34px;color:#333;font-weight:600;line-height:1.3em
}
#main .visual dl{
	float:left;position:relative;
	width:50%;
	box-sizing:border-box;padding:0 50px;text-align:left
}
#main .visual dl dt{font-size:24px;color:#e16c51;font-family: 'Moebius_en', 'Moebius';font-weight:600;letter-spacing:-1px}
#main .visual dl dd{font-size:17px;color:#333;font-weight:500;line-height:1.7em}
#main .visual dl:before{
	content:'';
	display:inline-block;width:1px;height:30px;
	background:#d68479
}
#main .visual dl.a{text-align:right}
#main .visual dl.a dt{color:#2a427c;}
#main .visual dl.a:before{background:#94adea}

#main .family{padding:50px 0 110px;text-align:center;font-size:0}
#main .family a{display:inline-block;vertical-align:top}
#main .family a+a{margin-left:100px}

#main h4{position:relative;margin-bottom:17px;font-size:0}
#main h4 a{
	position:absolute;right:0;top:0;
	display:block;
	padding-right:20px;
	background:url(../img/arrow.png) no-repeat right center;background-size:8px auto;
	font-size:16px;color:#333
}

#main .list{white-space:nowrap;}
#main .list .slide{display:inline-block;vertical-align:top;}
#main .list li a{
	position:relative;
	display:block;padding-bottom:156px;
	background:#fff;border-radius:8px;
	box-shadow:0 3px 10px rgba(0,0,0,0.1);
	overflow:Hidden;
}
#main .list li a p{background-size:cover;background-position:center;font-size:0;transition:.3s;}
#main .list li a p img{width:100%}
#main .list li dl{position:absolute;bottom:0;left:0;width:100%;box-sizing:border-box;padding:20px 22px;transition:.3s;}
#main .list li dl dt{
	margin-bottom:5px;
	font-size:18px;color:#353535;font-weight:500;
	overflow: hidden;white-space:nowrap;text-overflow:ellipsis;
}
#main .list li dl dd{
	transition:.3s;
	height:84px;
	overflow: hidden;
	white-space:normal;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	word-wrap:break-word;
	font-size:14px;color:#878787
}
.web #main .list li a:hover dl{
	padding-top:50px;
	background: rgb(0,0,0);
	background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 57%, rgba(0,0,0,0.6825105042016807) 76%, rgba(255,255,255,0) 100%);
}
.web #main .list li a:hover dl dt{color:#fff}
.web #main .list li a:hover dl dd{
	height:126px;
	-webkit-line-clamp: 6;
	color:rgba(255,255,255,0.8);
}
.web #main .list li a:hover p{transform:scale(1.1)}

#main .pagination{text-align:center;font-size:0}
#main .pagination span{
	display:inline-block;width:17px;height:17px;
	margin:0 7px;
	background:#e3dfdf;border-radius:50%;
	cursor:pointer
}
#main .pagination span.swiper-pagination-bullet-active{background:#0e296b}

@media all and (max-width:1024px){
	#main .family{padding:50px 0}
	#main .family a{width:calc(50% - 10px);padding:10px 0;border:1px solid #e3e2e2;box-sizing:border-box;}
	#main .family a,
	#main .family a+a{margin:5px}
}

@media all and (max-width:760px){
	#main{padding:0 20px}
	#main .visual h3{font-size:18px}
	#main .visual p{/* margin:0 -80px */ margin: 0 -10px}
	#main .visual dl dt{font-size:14px}
	#main .visual dl dd{font-size:12px}
	#main .visual dl{padding:0 20px}
	#main .visual dl.a{padding-left:0}
	#main .visual dl.b{padding-right:0}
	#main .family a{width:calc(50% - 4px)}
	#main .family a, #main .family a+a{margin:2px}
	#main .family a img{height:30px}
	#main h4 img{height:14px}
	#main h4 a{font-size:14px;padding-right:10px;background-size:5px auto}
	#main .list li dl dt{font-size:15px}
}

@media all and (max-width:480px){
	#main .list_wrap{padding-right:80px}
	#main .visual p{/* margin:0 -170px */ margin: 0 -15px}
}