/*
 * iweb52-style28
 *
 * Copyright 2017, TANK
 * 
 * 
 * 2017 / 04 / 06
 */


/* + aboutNews
*----------------------------------------------------------------------------*/
#aboutNews {
	padding-top: 30px;
}

#newsBox ,
#aboutBox {
	float: left;
	width: 50%;
	-webkit-animation-name: fadeInLeft;
	-moz-animation-name: fadeInLeft;
	-ms-animation-name: fadeInLeft;
	-o-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
}

#newsBox h3 {
	margin: 0 10px;
	padding: 5px 15px;
	border: 1px #eee solid;
	border-bottom: 1px #fff solid;
	display: inline-block;
	font-size: 20px;
}

#newsBox .bd {
	margin: -1px 30px 0 0;
	border: 1px #eee solid;
}

#newsBox ul li {
	padding: 20px 25px;
	overflow: hidden;
}

#newsBox ul li > div {
	float: left;
	width: 30%;
}

#newsBox ul li .info {
	float: right;
	width: 65%;
}

#newsBox ul li .info h4 a ,
#newsBox ul li .info article ,
#productBox ul li .info h4 a ,
#productBox ul li .info article ,
#sloganBox ul li article {
	overflow: hidden;
	height: 27px;
	font-size: 18px;
	color: #333;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
}

#newsBox ul li .info article {
	margin-top: 20px;
	height: 72px;
	line-height: 180%;
	font-size: 14px;
	color: #777;
	-webkit-line-clamp: 3;
}

#aboutBox {
	-webkit-animation-name: fadeInRight;
	-moz-animation-name: fadeInRight;
	-ms-animation-name: fadeInRight;
	-o-animation-name: fadeInRight;
	animation-name: fadeInRight;
}

#aboutBox h3 {
	overflow: hidden;
	position: relative;
	margin-bottom: 20px;
	font-size: 22px;
}

#aboutBox h3:after {
	position: absolute;
	margin-left: 15px;
	width: 100%;
	height: 6px;
	background: url(/images/28/index/img-aboutTitBg.png);
	display: inline-block;
	bottom: 9px;
	content: "";
}

#aboutBox article {
	padding: 0 20px;
	font-size: 16px;
	line-height: 180%;
}

#aboutBox article p.more {
	text-align: right;
}

#aboutBox article p.more a {
	color: #2eb1a5;
}

#aboutNews .line {
	margin: 70px 0 30px;
	float: left;
	width: 100%;
	border-top: 1px solid #eee;
	text-align: center;
}

#aboutNews .line i {
	position: relative;
	width: 33px;
	height: 33px;
	background: #fff;
	display: inline-block;
	border: 1px #ddd solid;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	text-align: center;
	line-height: 35px;
	color: #ddd;
	top: -17px;
}


/* + productBox
*----------------------------------------------------------------------------*/
#productBox {
	overflow: hidden;
	width: 100%;
}

#productBox h3.tit {
	margin-bottom: 30px;
	text-align: center;
	font-size: 28px;
	font-weight: 700;
}

#productBox .tempWrap {
	margin: auto;
}

#productBox ul {
	overflow: hidden;
}

#productBox ul li {
	float: left;
	width: 16%;
}

#productBox ul li > div {
	margin: 0 10px;
}

#productBox ul li .productPhoto {
	overflow: hidden;
}

#productBox ul li .productPhoto .photo ,
#adBox .list .photo {
	background-size: cover;
}

#productBox ul li:hover .productPhoto a.photo ,
#adBox .list:hover .photo {
	-webkit-transform: scale(0.8,1.8);
	-moz-transform: scale(1.3);
	-ms-transform: scale(1.3);
	-o-transform: scale(1.3);
	transform: scale(1.3);
}

#productBox ul li .info {
	padding: 20px;
	background: #e1eeed;
}

#productBox ul li .info h4 a {
	margin-bottom: 20px;
	color: #2eb1a5;
}

#productBox ul li .info article {
	height: 50px;
	font-size: 14px;
	-webkit-line-clamp: 2;
}

#productBox ul li .info a.more {
	color: #2eb1a5;
}

#productBox .arrow {
	text-align: center;
}

#productBox .arrow a {
	margin: 10px 5px;
	width: 40px;
	height: 40px;
	display: inline-block;
	border: 1px #ddd solid;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	text-align: center;
	line-height: 33px;
	color: #ddd;
	font-size: 20px;
}

#productBox .arrow a:hover {
	border-color: #2eb1a5;
	color: #2eb1a5;
}


/* + sloganBox
*----------------------------------------------------------------------------*/
#sloganBox {
	overflow: hidden;
	position: relative;
	margin: 40px 0;
	padding: 60px 0;
	background: #2eb1a5;
	color: #fff;
}

#sloganBox:before {
	position: absolute;
	width: 100%;
	height: 22px;
	display: block;
	-webkit-border-radius: 60%;
	-moz-border-radius: 60%;
	border-radius: 60%;
	-webkit-box-shadow: 0px 0 22px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0px 0 22px rgba(0, 0, 0, 0.5);
	box-shadow: 0px 0 22px rgba(0, 0, 0, 0.5);
	bottom:-22px;
	content: "";
}

#sloganBox ul {
	text-align: center;
}

#sloganBox ul li {
	margin: 0 1%;
	width: 30%;
	display: inline-block;
	-webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-ms-animation-name: fadeInUp;
	-o-animation-name: fadeInUp;
	animation-name: fadeInUp;
}

#sloganBox ul li:nth-child(2) {
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	-ms-animation-delay: 0.5s;
	-o-animation-delay: 0.5s;
	animation-delay: 0.5s;
}

#sloganBox ul li:nth-child(3) {
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	-ms-animation-delay: 1s;
	-o-animation-delay: 1s;
	animation-delay: 1s;
}

#sloganBox ul li p i {
	margin: 0 auto 20px;
	width: 100px;
	height: 100px;
	display: block;
	border: 1px #fff solid;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	text-align: center;
	line-height: 100px;
	font-size: 40px;
}

#sloganBox ul li:hover p i {
	background: #fff;
	color: #2eb1a5;
}

#sloganBox ul li h4 {
	margin-bottom: 10px;
	font-size: 18px;
	text-align: center;
}

#sloganBox ul li article {
	margin: auto;
	width: 80%;
	height: 50px;
	text-align: center;
	font-size: 14px;
	color: #fff;
	-webkit-line-clamp: 2;
}


/* + adBox
*----------------------------------------------------------------------------*/
#adBox {
	margin: 30px 0;
	text-align: center;
}

#adBox .list {
	overflow: hidden;
	margin: 0 1%;
	width: 22%;
	display: inline-block;
	-webkit-animation-name: fadeInLeftBig;
	-moz-animation-name: fadeInLeftBig;
	-ms-animation-name: fadeInLeftBig;
	-o-animation-name: fadeInLeftBig;
	animation-name: fadeInLeftBig;
}

#adBox .list:nth-child(2) {
	-webkit-animation-name: fadeInUp;
	-moz-animation-name: fadeInUp;
	-ms-animation-name: fadeInUp;
	-o-animation-name: fadeInUp;
	animation-name: fadeInUp;
}

#adBox .list:nth-child(3) {
	-webkit-animation-name: fadeInDown;
	-moz-animation-name: fadeInDown;
	-ms-animation-name: fadeInDown;
	-o-animation-name: fadeInDown;
	animation-name: fadeInDown;
}

#adBox .list:nth-child(4) {
	-webkit-animation-name: fadeInRightBig;
	-moz-animation-name: fadeInRightBig;
	-ms-animation-name: fadeInRightBig;
	-o-animation-name: fadeInRightBig;
	animation-name: fadeInRightBig;
}


/************ = 適應性 = ************/
/* +width:1280 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 1280px) {
	#productBox ul li {
		width: 24%;
	}
}

/* +width:768 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	#newsBox ,
	#aboutBox {
		margin: 30px auto;
		float: none;
		width: 80%;
	}
	#productBox ul li {
		width: 32%;
	}
}

/* +width:480 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 480px) {
	#newsBox ,
	#aboutBox {
		width: 100%;
	}
	#productBox ul li {
		width: 50%;
	}
	#adBox .list {
		margin: 10px 1%;
		width: 47%;
	}
}

/* +width:450 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 450px) {
	#productBox ul li ,
	#sloganBox ul li {
		width: 100%;
	}
	#sloganBox ul li {
		margin: 15px 0;
	}
}