/*
 * iweb32-style02
 *
 * Copyright 2016, TANK
 * 
 * 
 * 2016 / 10 / 19
 */


.wow {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
}


/* + recomWrap
*----------------------------------------------------------------------------*/
#recomWrap {
	overflow: hidden;
	background: url(/images/02/index/img-pdBg.png);
	background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100%;
    background-attachment: fixed;
}	

#recomWrap .box {
	margin: 7% 0 8%;
}

#recomWrap .box #recInfo {
	margin: 110px 80px 60px;
}

#recomWrap .box #recInfo .bd {
	margin-bottom: 20px;
	padding: 20px;
	background: #fff;
}

#recomWrap .box #recInfo .bd h3 ,
#newsWrap h3,
#recomWrap h3{
	text-align: center;
	font-size: 26px;
	font-weight: normal;
}

#recomWrap .box #recInfo .bd li p {
	text-align: center;
}

#recomWrap .box #recInfo .bd li p.tit {
	margin: 10px auto;
	width: 70%;
	font-size: 24px;
}

#recomWrap .box #recInfo .hd ul {
	overflow: hidden;
}

#recomWrap .box #recInfo .hd ul li {
	overflow: hidden;
	margin: 10px 1%;
	margin-left: 0;
	float: left;
	width: 15%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 100% auto;
	border: 1px #4e4c4c solid;
	display: block;
}

#recomWrap .box #recInfo .hd ul li img {
	width: 100%;
}

#recomWrap .box #recInfo .hd ul li:hover img {
	background: rgba(0,0,0,0.6);
}

#recomWrap .box:last-child {

}

#recomWrap .box iframe {
	margin: 110px 0 60px;
	width: 100%;
	height: 515px;
}


/* + aboutWrap
*----------------------------------------------------------------------------*/
#aboutWrap {
	overflow: hidden;
	padding: 170px 0 80px;
	background: url(/images/02/index/img-aboutBg.jpg) no-repeat 0 0;
	background-size: cover;
	padding: 90px 0;
	background-attachment: fixed;
}

#aboutWrap section {
	background-size: cover;
	padding: 34px 0;
	background: rgba(255,255,255,0.8) no-repeat 0 0;
	margin-left: 13%;
	width: 28%;
}

#aboutWrap section .info {
	margin: 0 auto;
	width: 73%;
	text-align: center;
	font-size: 18px;
	color: #484848;
}

#aboutWrap section .info .aboutLogo ,
#aboutWrap section .info h3 ,
#aboutWrap section .info p {
	margin-bottom: 15px;
	text-align: center;
}

#aboutWrap section .info .aboutLogo {
	height: 135px;
	width: 60%;
	margin: auto;
}

#aboutWrap section .info .aboutLogo img {
	animation-name: aboutIcon;
	-moz-animation-name: aboutIcon;
	-ms-animation-name: aboutIcon;
	-o-animation-name: aboutIcon;
	-webkit-animation-name: aboutIcon;
	animation-duration: 2.5s;
	-moz-animation-duration: 2.5s;
	-ms-animation-duration: 2.5s;
	-o-animation-duration: 2.5s;
	-webkit-animation-duration: 2.5s;	
	animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	-o-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;	
	animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	-ms-animation-timing-function: linear;
	-o-animation-timing-function: linear;
	-webkit-animation-timing-function: linear;
}

@keyframes aboutIcon{
	0%{margin-top: 10px;}
	50%{margin-top: 0;}
	100%{margin-top: 10px;}
}

@-o-keyframes aboutIcon{
	0%{margin-top: 10px;}
	50%{margin-top: 0;}
	100%{margin-top: 10px;}
}
@-moz-keyframes aboutIcon{
	0%{margin-top: 10px;}
	50%{margin-top: 0;}
	100%{margin-top: 10px;}
}
@-ms-keyframes aboutIcon{
	0%{margin-top: 10px;}
	50%{margin-top: 0;}
	100%{margin-top: 10px;}
}
@-webkit-keyframes aboutIcon{
	0%{margin-top: 10px;}
	50%{margin-top: 0;}
	100%{margin-top: 10px;}
}

#aboutWrap section .info article {
    position: relative;
    /* padding-bottom: 15px; */
    font-size: 15px;
    color: #545454;
    margin-bottom: 6px;
    letter-spacing: 0px;
    font-weight: bold;
}

#aboutWrap section .info h3{
	font-size: 24px;
	color: #545454;
	font-weight: bold;
	margin-bottom: 9px;
	line-height: 160%;
}

#aboutWrap section .info p {
	margin-top: 14px;
	font-size: 12px;
}

#aboutWrap section .info p a {
	border-radius: 0px;
	padding: 6px 29px;
	background: linear-gradient(0deg,#d7000f 22%,#d7000f 80%);
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	font-size: 16px;
	color: #ffffff;
}


/* + products
*----------------------------------------------------------------------------*/

#products h3{text-align: center;font-size: 21px;font-weight: normal;margin: 3px 0;letter-spacing: 2px;}

#products p{text-align: center;font-size: 22px;font-weight: normal;margin: 3px 0 30px;}

#products ul {
	overflow: hidden;
}


#products ul .slick-prev:before ,
#products ul .slick-next:before {font-size: 23px;font: normal normal normal 14px/1 FontAwesome;color: #2d2d2d;content: "\f053";padding: 10px 10px;background: #b3b3b3;border-radius: 35px;display: inline-block;color: #fff;}
.slick-prev
{
    width: auto;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
#products ul .slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    left: 195px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
#products ul .slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}
.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: -110px;
    padding: 0;
    margin-top: -10px\9;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

#products ul li {
	margin: 10px;
	float: left;
	width: 23%;
}

#products ul li .info {
	border-radius: 5px;
	border: 1px solid #e9ecef;
	-webkit-box-shadow: 0 7px 27px #464646;
	-moz-box-shadow: 0 7px 27px #464646;
	-ms-box-shadow: 0 7px 27px #464646;
	box-shadow: 3px 2px 14px #bdbdbdc9;
	-webkit-transition: opacity 0.15s, -webkit-transform 0.15s;
	transition: opacity 0.15s, transform 0.15s;
	background-color: #fff;
}

#products ul li .info .productPhoto {
}
#products ul li .info .productPhoto {
	transition: all 0.4s cubic-bezier(0.39, 0.58, 0.57, 1);
}
#products ul li .info:hover .productPhoto {-webkit-transition:all 0.18s ease-in-out;transition:all 0.18s ease-in-out;-moz-transform: scale(0.95,0.95);-ms-transform: scale(0.95,0.95);-o-transform: scale(0.95,0.95);-webkit-transform: scale(0.95,0.95);transform: scale(0.95,0.95);}
#products ul li .info:hover .productPhoto {
	background-size: 80% auto;
}

#products ul li .info h3 {
	overflow: hidden;
	height: 20px;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	text-align: center;
	font-size: 18px;
	letter-spacing: 0.01em;
	font-family: unset;
	padding: 0 10px;
	margin: 13px 0;
}

#products ul li .info h3 a {
    color: #595757;
    font-weight: bold;
    /* font-family: "Verdana", "微軟正黑體", "Heiti TC", sans-serif; */
}
#products ul li .info p {
    margin-bottom: 15px;
    font-size: 20px;
    color: #161616;
    text-align: center;
    font-weight: bold;
    font-family: "Roboto", Arial, Tahoma, sans-serif;
    letter-spacing: 1px;
}
#products ul li .info article{
	    font-size: 16px;
	    color: #727272;
	    text-align: center;
	    margin-bottom: 4px;
	    font-weight: bold;
	    letter-spacing: 0px;
	}

/* + photoList
*----------------------------------------------------------------------------*/
#photoList {
	overflow: hidden;
}

#photoList .bidPhoto ,
#photoList .bd {
	float: left;
	width: 83%;
}

#photoList .bd {
	margin-left: 1%;
	width: 16%;
}

#photoList .bd ul li {
	margin: 10px 0;
}

#photoList .bidPhoto a ,

#photoList .bd ul li a {
	border: 1px #545353 solid;
}


/* + newsWrap
*----------------------------------------------------------------------------*/
#newsWrap {
	background: url(/images/02/index/img-newsBg.png);
	background-repeat: no-repeat;
	background-position: 14% -10%;
	background-size: auto;
	background-attachment: fixed;
	padding: 70px 0 140px;
}

#newsWrap h3{
	margin: 0px 0;
	text-align: center;
	font-size: 21px;
	font-weight: normal;
	margin: 3px 0;
	letter-spacing: 2px;
}

#newsWrap p {
    text-align: center;
    font-size: 22px;
    font-weight: normal;
    margin: 3px 0 30px;
}

#newsWrap ul {
	margin-bottom: 50px;
}

#newsWrap ul li {
	/* overflow: hidden; */
	margin: 5px 5px 25px 15px;
	border: 1px #ffffff solid;
	animation-name: fadeInDown;
	-webkit-animation-name: fadeInDown;
	width: 31%;
	float: left;
	height: 464px;
	background-color: rgba(255, 255, 255, 0.71);
}

#newsWrap ul li:nth-child(2) {
	-webkit-animation-delay: 0.5s;
}

#newsWrap ul li:nth-child(3) {
	-webkit-animation-delay: 1s;
}

#newsWrap ul li .newPhoto ,
#newsWrap ul li .info {
	float: left;
	width: 100%;
}

#newsWrap ul li .newPhoto a.photo {
	transition: all 0.4s cubic-bezier(0.39, 0.58, 0.57, 1);
}

#newsWrap ul li:hover .newPhoto a.photo {
	background-size: 120% auto;
}

#newsWrap ul li .info {
	position: relative;
	margin: 20px;
	width: 89%;
	transition: all 0.4s cubic-bezier(0.39, 0.58, 0.57, 1);
}

#newsWrap ul li:hover .info {
	padding-left: 1%;
	padding-right: 1%;
}

#newsWrap ul li .info p ,
#newsWrap ul li .info h4 a {
	font-size: 12px;
	color: #000;
	text-align: left;
	margin: 3px 0 6px;
}

#newsWrap ul li .info h4 a {
    overflow: inherit;
    margin: 14px 0;
    height: 28px;
    font-size: 22px;
    font-weight: bold;
    display: block;
}

#newsWrap ul li .info article {
	letter-spacing: 0px;
	max-height: initial;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	margin-bottom: 19px;
}

#newsWrap ul li .info a.more {
	position: absolute;
	display: inline-block;
	right: 11px;
	font-size: 13px;
	color: #272727;
}


/* + situationWrap
*----------------------------------------------------------------------------*/
#situationWrap {
	background: url(/images/02/index/img-situationBg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-color: rgb(212, 229, 243);
	background-position: 50% 10%;
	border-bottom: 30px solid #1d2087;
}

#situationWrap .info {
	padding: 170px 0;
	width: 100%;
}
#situationWrap .info .logoimg{
    margin-bottom: 15px;
    text-align: center;
}
#situationWrap .info p {
	text-align: center;
	font-size: 48px;
	color: #fff;
	text-shadow: 1px 2px 1px #000;
	line-height: 160%;
}


@media screen and (max-width: 1366px){
	#aboutWrap section {
    width: 40%;
}
#situationWrap .info {
    width: 100%;
}
}


/************ = 適應性 = ************/
/* +width:1024 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
	#recomWrap .box {
		width: 100%;
	}
	#recomWrap .box iframe {
		margin: 50px 0;
	}
	#aboutWrap section {
		background-position: 50% 0;
		background-size: cover;
		margin-left: 10%;
	}
	#newsWrap ul li .info h4 a {
		margin: 5px 0;
		height: 50px;
		font-size: 18px;
	}
	#situationWrap .info {
		padding: 130px 0;
	}
	#newsWrap ul li .info {
	margin: 15px;
	width: 92%;
	}
	#newsWrap ul li {
	overflow: hidden;
	margin: 5px 5px 25px 10px;
	border: 1px #696969 solid;
	animation-name: fadeInDown;
	-webkit-animation-name: fadeInDown;
	width: 31%;
	float: left;
	height: 410px;
	}
#aboutWrap {
    background-position: 58% 100%;
}
#newsWrap {
    padding: 70px 0 40px;
}
}

/* +width:768 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	#products ul li {
		width: 48%;
	}
	#photoList .bd ul li {
		margin: 5px 0;
	}
	#prodInfo .box ,
	#prodInfo .box:first-child ,

	#prodInfo .box article {
		width: 100%;
	}
	#prodInfo .box .list:last-child {
		text-align: center;
	}
	#prodInfo .box .list:last-child p {
		margin-top: 10px;
		width: 32%;
	}
	#products ul li {
    	margin: 10px 3px;
    	width: 48%;
    	padding: 30px;
 }
#aboutWrap section {
    width: 60%;
}

	#newsWrap ul li .newPhoto {
		width: 100%;
	}
	#newsWrap ul li .info {
		width: 96%;
	}
	#situationWrap .info p {
		font-size: 38px;
	}
	#recomWrap .box #recInfo {
		margin: 60px 20px;
	}
	#aboutWrap section .info {
		width: 67%;
	}
	#newsWrap ul li .info a.more {
		bottom: 15px;
	}
	#newsWrap ul li {
	overflow: hidden;
	margin: 5px 5px 25px 15px;
	border: 1px #696969 solid;
	animation-name: fadeInDown;
	-webkit-animation-name: fadeInDown;
	width: 95%;
	float: left;
	height: 605px;
	}
	#newsWrap ul li .info h4 a {
		margin: 5px 0;
		height: 30px;
	}
#situationWrap {
    background-position: 50% 60%;
    border-bottom: 30px solid #1d2087;
}
}


/* +width:640 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 640px) {
	#recomWrap .box #recInfo {
		margin: 60px 10px;
	}
	#aboutWrap section .info h3:after {
		width: 110px;
	}
	#newsWrap ul li {
	overflow: hidden;
	margin: 5px 5px 25px 15px;
	border: 1px #696969 solid;
	animation-name: fadeInDown;
	-webkit-animation-name: fadeInDown;
	width: 95%;
	float: left;
	height: 530px;
	}
	#newsWrap ul li .info h4 a {
		margin: 5px 0;
		height: 35px;
	}
}


/* +width:480 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 480px) {
	#recomWrap .box #recInfo .bd li p.tit {
		width: 100%;
	}
	#recomWrap .box #recInfo .hd ul li {
		margin: 10px 1%;
		width: 30%;
	}
	#recomWrap .box #recInfo .hd ul li:nth-child(4n) {
		margin-right: 1%;
	}
	#recomWrap .box #recInfo .hd ul li:nth-child(3n) {
		margin-right: 0;
	}
	#aboutWrap {
		padding: 50px 0;
		background-position: 58% 100%;
	}
	#aboutWrap section .info h3:after {
		width: 80px;
	}
	#newsWrap ul li .info a.more {
		display: none;
	}
	#situationWrap .info {
		padding: 70px 0;
	}
	#situationWrap .info p {
		font-size: 25px;
	}
	#newsWrap ul li {
	overflow: hidden;
	margin: 5px 5px 25px 15px;
	border: 1px #696969 solid;
	animation-name: fadeInDown;
	-webkit-animation-name: fadeInDown;
	width: 95%;
	float: left;
	height: 460px;
	}
	#newsWrap ul li .info {
		width: 93%;
	}
	#newsWrap ul li .info h4 a {
		margin: 5px 0;
		height: 45px;
	}
#aboutWrap section {
    width: 80%;
}
#aboutWrap section .info .aboutLogo {
    height: 80px;
}
#aboutWrap section .info article {
    letter-spacing: 1px;
    line-height: 158%;
}
}


/* +width:450 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 450px) {
	#photoList .bidPhoto, #photoList .bd {
		width: 100%;
	}
	#photoList .bd {
		display: none;
	}
	#product-article ul.tabs li a {
		padding: 0 10px;
		font-size: 14px;
	}
	#prodInfo .box .list:last-child p a {
		font-size: 14px;
	}

	#recomWrap .box #recInfo .bd li p.tit {
		font-size: 20px;
	}
	#aboutWrap section .info h3 {
		font-size: 20px;
	}
	#aboutWrap section .info h3:after {
		width: 60px;
	}
	#situationWrap .info p {
		font-size: 20px;
	}
	#newsWrap ul li {
	overflow: hidden;
	margin: 5px 5px 25px 15px;
	border: 1px #ffffff solid;
	animation-name: fadeInDown;
	-webkit-animation-name: fadeInDown;
	width: 89%;
	float: left;
	height: 420px;
	}
}


/* +width:320 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 320px) {
	#recomWrap .box #recInfo .bd {
		padding: 20px 10px;
	}
	#recomWrap .box #recInfo .bd h3 {
		font-size: 20px;
	}
	#recomWrap .box #recInfo .bd li p.tit {
		font-size: 16px;
	}
	#recomWrap .box #recInfo .bd li p {
		font-size: 12px;
	}
	#newsWrap ul li {
	overflow: hidden;

	margin: 5px 5px 25px 15px;
	border: 1px #696969 solid;
	animation-name: fadeInDown;
	-webkit-animation-name: fadeInDown;
	width: 93%;
    float: left;
	height: 420px;
	}
#aboutWrap section {
    width: 100%;
}
}