#banner { position:relative; z-index:0;}

#banner:before { content:''; animation:wave1 3s .5s infinite alternate; position:absolute; left:0; bottom:0; z-index:999;background:url(../images/wave2.png) left bottom  repeat-x; background-size:contain; width:200%; height:100%; opacity:0.5;}

@-webkit-keyframes wave1 { from { left:0; } to {left:-50%; } }



#banner:after { content:''; animation:wave2 4s .3s infinite alternate; position:absolute; right:0; bottom:0; z-index:999;background:url(../images/wave2.png) left bottom  repeat-x; background-size:contain; width:200%; height:100%; opacity:0.5;}

@-webkit-keyframes wave2 { from { right:0; } to {right:-80%; } }





marquee {display: block; padding:2% 5%; background:#666; color:#fff; position:relative; overflow:hidden;}

marquee:after { content:''; position:absolute; left:0; top:0; width:100%; height:100%;background:url(../images/bg02.png) center bottom no-repeat; background-size:cover; background-attachment:fixed; opacity:0.05;}



#idea {

  display: -webkit-flex;

  display:         flex;

  -webkit-align-items: center;

          align-items: center;

  -webkit-justify-content: center;

          justify-content: center;
	background:url(../images/bg01.jpg) center center no-repeat;
	background-size:cover;
}

#idea article { padding:10%; margin: 7% 0; position:relative; background:rgba(255, 255, 255, 0.2); text-align:center; }

#idea article:after { content:''; position:absolute; left:2.5%; top:5%; width:95%; height:90%; border:1px solid #fff;}

#idea article p { line-height:100px; }

#idea article img { width:20px; height:100%;}



#products { padding:5%;    text-align: center;}

#products .title { margin-bottom:10px; padding-bottom:10px; line-height:70px;}

#products .news { background:url(../images/p01.jpg) left top no-repeat, #818181; background-size:contain; color:#fff; text-align:center; padding:5% 7% 5% 75%;}

#products .news .title:after { content:''; display:block; border-bottom:4px solid #fff; width:25px; height:100%; text-align:center; margin:auto;}

#products .p01 { display:inline-flex;}

#products .p01 .pro:first-child { margin-right:3%;}

#products .pro { 

  position:relative;

  margin:3% 0 0 ;

  overflow:hidden;

  display: -webkit-inline-flex;

  display:inline-flex;

  -webkit-align-items: center;

          align-items: center;

  -webkit-justify-content: center;

          justify-content: center;

}

#products .pro p { position:absolute; top:45%; text-align:center; margin:auto; color:#fff;}

#products .pro:after { content:''; position:absolute; left:5%; top:5%; width:90%; height:90%; border:1px solid #fff;}

#products .pro:hover img {-webkit-filter:blur(30px); opacity:0.8;-webkit-transition: all 0.3s ease-in-out 0s;

    -moz-transition: all 0.3s ease-in-out 0s;

    -o-transition: all 0.3s ease-in-out 0s;

    -ms-transition: all 0.3s ease-in-out 0s;

	transition: all 0.3s ease-in-out 0s;}









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

	

}

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

	#idea article { margin:15% 0;}

	#idea article p { line-height: 50px;}

	#products .news { padding: 35% 10% 10%;}

}

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

	#idea article { padding:3% 5%; background: rgba(255, 255, 255, 0.6);}

	#products { padding:10%;}

	#products .pro { margin: 10% 0 0;}

	#products .p01 { display:block; }

	#products .p01 .pro:first-child { margin-right:0;}

}

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

	

}