@charset "UTF-8";

.topBgWrap{
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../images/bg-top.png);
}
.topBgWrap:before{
	content: "";
	position: absolute;
	z-index: 0;
	top: 0;
	left: 50%;
	max-width: 2000px;
	width: 100%;
	height: 100%;
	background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 10%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 90%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 10%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 90%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}

.contentWrap{
	width: 1200px;
	margin: auto;
}
.sliderArea{margin: 52px auto 0;}
.sliderWrap{
	width: 900px;
	height: 500px;
	border: 4px solid #92909e;
	float: left;
	overflow: hidden;
}
.sliderNavArea{
	position: relative;
	z-index: 0;
	width: 280px;
	height: 500px;
	background-color: #fffcb9;
	float: right;
}
.sliderNav{
	width: 245px;
	margin: auto;
}
.sliderNav.-slideNum2{padding-top: 66px;}
.sliderNavArea .sliderNav.-slideNum2 .slick-track,
.sliderNavArea .sliderNav.-slideNum3 .slick-track{
    -webkit-transform: translate3d(0, 0, 0) !important;
       -moz-transform: translate3d(0, 0, 0) !important;
        -ms-transform: translate3d(0, 0, 0) !important;
         -o-transform: translate3d(0, 0, 0) !important;
            transform: translate3d(0, 0, 0) !important;
}
.sliderWrap .banner,
.sliderWrap .banner img{
	display: block !important;
	width: 100%;
}
.arrowWrap {
	position: absolute;
	z-index: 1;
	left: 0;
	width: 100%;
	height: 25px;
	text-align: center;
	background-color: #08d6ff;
	cursor: pointer;
}
.arrowWrap img{
	width: 26px;
	margin-top: 4px;
}
.arrowWrap01{
	top: 0;
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}
.arrowWrap02{bottom: 0;}


.sliderNavArea .slick-list{margin-top: 40px;}
.sliderNavArea .slick-slide{
	position: relative;
	z-index: 0;
}
.sliderNavArea .slick-slide:not(.slick-current):before{
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,.5);
}
.sliderNavArea .slick-slide img{display: block !important;}

.unitWrap{
	width: 1170px;
	margin: auto;
}
.unitWrap .unit{
	position: relative;
	z-index: 0;
	display: block;
	width: 19%;
	margin-left: .9%;
	float: left;
}
.unitWrap .unit img{
	display: block;
	width: 100%;
}

.unitWrap .unit .hoverWrap {
	display: block;
	position: absolute;
	z-index: 10;
	width: 100%;
	height: 0%;
	bottom: 0;
	left: 0;
	overflow: hidden;
	-webkit-transition: height .3s;
	-ms-transition: height .3s;
	transition: height .3s;
}
.unitWrap .unit .hoverWrap:before,
.unitWrap .unit .hoverWrap:after{
	content: "";
	position: absolute;
	width: 100%;
	height: 0;
	padding-top: 322px;
	border-radius: 10px;
	bottom: 0;
	left: 0;
}
.unitWrap .unit .hoverWrap:before,
.unitWrap .unit .hoverWrap:after{padding-top: 222px;}
.unitWrap .unit .hoverWrap:before{
	z-index: 10;
	background-image: url(../images/app-logo.png);
	background-repeat: no-repeat;
	background-size: 50%;
	background-position: 50% 50%;
}
.unitWrap .unit .hoverWrap:after{
	z-index: 0;
	background-color: rgba(0,0,0,.4);
}
.unitWrap .unit:hover .hoverWrap{height: 100%;}


.newsArea{
	width: 98%;
	margin: auto;
}
.newsArea .buttonArea{margin: 3% auto 10%;}

.twitterArea{
	position: relative;
	z-index: 0;
}
.twitterWrap{
	width: 720px;
	margin: auto;
}
.twitterWidget{border: 2px solid #e6e6e6;}
.twitterWrap #twitter-widget-1{
	width: 100% !important;
}

.twitterBgWrap{
    position: relative;
    z-index: -1;
    width: 100%;
    margin-top: 150px;
}
.twitterBgWrap img{
    position: absolute;
    z-index: 0;
    width: 390px;
    bottom: 0;
}
.twitterBgWrap img:nth-child(1){left:  0;}
.twitterBgWrap img:nth-child(2){right: 0;}


.followButton{
	margin: 10px 0 0;
	text-align: right;
}

footer{margin-top: 0;}


@media screen and (max-width: 768px){
	.topBgWrap{display: none;}

	.twitterBgWrap img{width: 40%;}

	.unitWrap{
		width: 94%;
		overflow: scroll;
	}
	.unitWrap .scrollArea{width: 1025px;}
	.unitWrap .scrollArea .unit{
		width: 200px;
		margin-left: 5px;
	}
	.unitWrap .unit .hoverWrap:before,
	.unitWrap .unit .hoverWrap:after{padding-top: 200px;}

	.sliderArea{margin: 52px auto 0;}
	.sliderArea{
		width: 98%;
		margin: 5% auto 0;
	}
	.sliderWrap{
		width: 100%;
		height: auto;
		margin: auto;
		float: none;
	}
	.sliderNavArea {
		width: 100%;
		height: auto;
		margin-top: 3%;
		padding: 3% 0;
		float: none;
	}
	.sliderNav.-slideNum2{
		padding-top: 0;
		padding-left: 24%;
	}
	.sliderNav.-slideNum3{width: 90%;}

	.sliderNav .slick-slide:not(:last-child){margin-right: .2%;}
	.sliderNav.-slideNum2 .slick-slide:first-child{margin-right: 3%;}
	.sliderNav.-slideNum3 .slick-slide:not(:last-child){margin-right: 3%;}
	.sliderNav{
		width: 100%;
	}
	.sliderNavArea .slick-list{margin-top: 0;}

	.arrowWrap{
		width: 5%;
		height: 100%;
	}
	.arrowWrap02{left: auto; right: 0;}
	.arrowWrap img {
	    width: 90%;
	    display: block;
	    position: absolute;
	    z-index: 1;
	    top: 50%;
	    left: 50%;
	    -webkit-transform: rotate(-90deg) translate(40%, -68%);
	    -ms-transform: rotate(-90deg) translate(40%, -68%);
	    transform: rotate(-90deg) translate(40%, -68%);
	}
	.arrowWrap02 img{}

	.contentWrap{width: 100%;}
	.twitterWrap{width: 95%;}
}