@charset "utf-8";
/* TOP */
#yt_wrap{width:100%; position:fixed; overflow: hidden; z-index:1; top:0;}
#youtube,#yt_bg{position:absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index:2;}
#yt_bg{background:transparent url(../images/top/bg.png) 0 0 repeat; background-size:0.3% auto;}
#logo{position:absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width:90%; z-index:3;}
#logo img{width:100%;}

#topall{width:100%; z-index:4; position:relative;}
#top01{
 padding:40px 0 20px;
	background:#f1f1f1;
}
#top01 .topbox{
 width:90%;
 margin:0 auto;
 border: 1px solid;
 text-align:center;
 overflow:hidden;
 padding:40px 0;
}
#top01 .prdctcopy{
 font-size: 20px;
}
.topbox h2{
 margin-bottom:30px;
 font-size:14px;
 font-weight:normal;
 text-align:center;
}
.topbox h2 img{
 display:block;
 margin:0 auto 20px;
}
#top01 .topbox ul{
}
#top01 .topbox li{
 width:100%;
	list-style:none;
	margin:0 auto 20px;
	line-height:1em;
 text-align:center;
}
#top01 .topbox li a{
 position:relative;
 display:block;
 width:100%;
 height:60px;
 padding-top:220px;
 z-index:2;
}
#top01 .topbox li span{
 position:relative;
 display:block;
 height:60px;
 line-height:60px;
 background: rgba(255,255,255,0.8);
}
.topbtn1 li {
  position: relative;
  overflow: hidden;
  width:280px;
  height:280px;
  text-align: center;
}
.topbtn1 .btn1:after{
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  background:url(../images/top/advtg_pict01.png) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
.topbtn1 .btn2:after{
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  background:url(../images/top/advtg_pict02.png) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
.topbtn1 .btn3:after{
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  background:url(../images/top/advtg_pict03.png) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  background-size: cover;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
.topbtn1 li:hover:after {
  opacity: .8;
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

#top02{
 padding:50px 0 20px;
	background:#ffffff;
}
#top02 .topbox{
 width:100%;
 margin:0 auto;
 text-align:center;
}
#top02 .prdctcopy{
 padding:0 0 15px;
}
#top02 .prdctbg{
 position:relative;
 overflow:hidden;
 height:314px;
 background:rgba(255,255,255,0.7);
 transition: all 1s ease;
}
#top02 .prdctbg.fade{
 background:rgba(255,255,255,0);
}
#top02 .nmbring{
 float:left;
 background:url(../images/top/prdctnum_bg.png);
}
#top02 .nmbring span{
 display:block;
 height:32px;
 padding:31px;
 background:rgba(255,255,255,0.5);
}
#top02 h3{
 padding:120px 0 20px;
 font-size:18px;
 line-height:1em;
 text-indent:0;
 font-weight:normal;
}
#top02 h3 span{
 font-size:14px;
}
#top02 .morebtn{
 display:block;
 width:280px;
 height:14px;
 margin:0 auto;
 padding:23px 0;
 text-align:center;
 background:url(../images/top/more_btnbg.png) no-repeat;
 background-position:0px 280px;
 border:1px solid #101010;
}
#top02 .prdct01{
 height:314px;
 margin:20px 0 0;
 background:transparent url(../images/top/prdct01_bg.png) center 0 no-repeat;
}
#top02 .prdct02{
 height:314px;
 margin:20px 0 0;
 background:transparent url(../images/top/prdct02_bg.png) center 0 no-repeat;
}
#top02 .prdct03{
 height:314px;
 margin:20px 0 0;
 background:transparent url(../images/top/prdct03_bg.png) center 0 no-repeat;
}
#top02 .prdct04{
 height:314px;
 margin:20px 0 0;
 background:transparent url(../images/top/prdct04_bg.png) center 0 no-repeat;
}
#top02 .prdct05{
 height:314px;
 margin:20px 0 0;
 background:transparent url(../images/top/prdct05_bg.png) center 0 no-repeat;
}
#top02 .prdct06{
 height:314px;
 margin:20px 0 0;
 background:transparent url(../images/top/prdct06_bg.png) center 0 no-repeat;
}
#top02 .prdct01 p:nth-of-type(2){
 margin:25px 0 0;
 font-size:12px;
}
#topTopics .imgbox{
 width:96%;
 margin:1em auto;
 text-align:center;
}
#topTopics .imgbox img{
 width:96%;
}