@charset "utf-8";

/* *****************************************
/*+  video  +******************************
/***************************************** */
#videoArea{
	overflow: hidden; position: fixed;  z-index:2; width: 100%; height: 100%;
}

#videoArea #video {
	position:fixed;
    z-index: -1;
 }

#videoArea #video img{
	position:fixed;
    z-index: -1;
}


/* *****************************************
/*+  mv  +******************************
/***************************************** */

#mvArea{
	overflow: hidden; position: fixed;  z-index:2; width: 100%; height: 100%;
}

#mvArea ul {
	position:relative;
    z-index: -1;
}

#mvArea li {
	position:absolute;
	width: 100%;
	left: 0;
	top: 0;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-ms-opacity: 0;
	-o-opacity: 0;
	opacity: 0;
	-webkit-transition: opacity 2s cubic-bezier(0.445, 0.05, 0.55, 0.95);;
	-o-transition: opacity 2s cubic-bezier(0.445, 0.05, 0.55, 0.95);;
	transition:  opacity 2s cubic-bezier(0.445, 0.05, 0.55, 0.95);;
}

#mvArea li img{
	width: 100%;
	height: auto;
	display: block;
}

#mvArea li.active {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-ms-opacity: 1;
	-o-opacity: 1;
	opacity: 1;
}

#mvArea li.moveLtoR.anim {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-animation:moveLtoR 8s linear infinite;
	-moz-animation:moveLtoR 8s linear infinite;
	animation:moveLtoR 8s linear infinite;
}

@-webkit-keyframes moveLtoR {
    0%  {-webkit-transform: translate3d(0,0,0);}
	100%{-webkit-transform: translate3d(5%,0,0);}
}
@keyframes moveLtoR {
    0%  {transform: translate3d(0,0,0);}
	100%{transform: translate3d(5%,0,0);}
}


#mvArea li.moveRtoL.anim {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-animation:moveRtoL 8s linear infinite;
	-moz-animation:moveRtoL 8s linear infinite;
	animation:moveRtoL 8s linear infinite;
}

@-webkit-keyframes moveRtoL {
    0%  {-webkit-transform: translate3d(0,0,0);}
	100%{-webkit-transform: translate3d(5%,0,0);}
}
@keyframes moveRtoL {
    0%  {transform: translate3d(0,0,0);}
	100%{transform: translate3d(-5%,0,0);}
}


/* *****************************************
/*+  raster  +******************************
/***************************************** */
#raster{
	background:url(../common/img/bg-pattern.png) repeat left top;
	overflow:hidden;position: fixed; z-index: 3; width: 100%; height: 100%;

	opacity: 0.4; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=40); /* IE lt 8 */
	-ms-filter: "alpha(opacity=40)"; /* IE 8 */
	-khtml-opacity: 0.40; /* Safari 1.x */
	-moz-opacity: 0.40; /* FF lt 1.5, Netscape */

}


/* *****************************************
/*+  main  +******************************
/***************************************** */
#main{
	width:100%;
	position:relative;
	height:500px;
}

#main #mainCopy{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	max-height:370px;
	width:auto;
	height:auto;
	text-align:center;
	padding:100px 50px;
}

#main #mainCopy img{
	width: auto;
	height:auto;
	max-width:100%;
	max-height: 100%;
}

#main p#mainScroll{
	position:absolute;
	bottom:50px;
	left:0;
	right:0;
	width:46px;
	height:33px;
	margin:auto;
}


/* *****************************************
/*+  ca  +******************************
/***************************************** */
#ca{
	width:100%;
	height:534px;
	text-align:left;
	position:relative;
	overflow:hidden;
    background:url(../img/ca_bg.jpg) no-repeat scroll center top;
	background-size:100% auto;
}

.ie8 #ca{
    background:#e2ded8 url(../img/ca_bg.jpg) no-repeat scroll center top;
}

#ca #caInner{
	background:url(../img/ca_number.png) no-repeat right top;
	background-size:32.5% auto;

	box-sizing:border-box;
	-moz-box-sizing:border-box;
	height:534px;
	padding-top:120px;
}

#ca #caInner h2,
#ca #caInner p{
	text-align:center;
}

#ca #caInner h2{
	margin:0px 0 68px;
}

#ca #caInner p.caBtn{
	margin:32px 0 0;
}


/* *****************************************
/*+  works  +******************************
/***************************************** */
#works{
	width:100%;
	padding:80px 0 1px;
	text-align:left;
	position:relative;
	background:#111726;
	color:#FFF;
	overflow:hidden;
}

#works #worksInner{
	max-width:960px;
	margin:0 auto;
}

#works h2{
	text-align:center;
	margin-bottom:50px;
}

#works ul{
}

#works ul li{
	list-style:none;
	margin:0 0 40px;
	padding:0;
}

#works ul li p{
	position: relative;
	width:83.75%;
	padding-top:23.75%;
	height:0;

	width : -moz-calc(804 / 960 * 100%) ;
	width : -webki-calc(804 / 960 * 100%) ;
	width : calc(804 / 960 * 100%) ;
	padding-top : -moz-calc(228 / 960 * 100%) ;
	padding-top : -webki-calc(228 / 960 * 100%) ;
	padding-top : calc(228 / 960 * 100%) ;
	
	overflow:hidden;
	
	box-sizing:border-box;
}

#works ul li#works1 p,
#works ul li#works3 p,
#works ul li#works5 p,
#works ul li#works7 p,
#works ul li#works9 p,
#works ul li#works11 p,
#works ul li#works13 p,
#works ul li#works15 p{
	margin-left:0;
	margin-right:auto;
}

#works ul li#works2 p,
#works ul li#works4 p,
#works ul li#works6 p,
#works ul li#works8 p,
#works ul li#works10 p,
#works ul li#works12 p,
#works ul li#works14 p{
	margin-left:auto;
	margin-right:0;
}

#works ul li#works1 p{
	margin-left:0;
}

#works ul li#works2 p{
	margin-right:50px;
}

#works ul li#works3 p{
	margin-left:30px;
}

#works ul li#works4 p{
	margin-right:0;
}

#works ul li#works5 p{
	margin-left:25px;
}

#works ul li#works6 p{
	margin-right:50px;
}

#works ul li#works7 p{
	margin-left:0;
}

#works ul li#works8 p{
	margin-right:0;
}

#works ul li#works9 p{
	margin-left:30px;
}

#works ul li#works10 p{
	margin-right:20px;
}

#works ul li#works11 p{
	margin-left:0px;
}

#works ul li#works12 p{
	margin-right:20px;
}

#works ul li#works13 p{
	margin-left:30px;
}

#works ul li#works14 p{
	margin-right:0px;
}

#works ul li#works15 p{
	margin-left:25px;
}


#works ul li a{ 
	display:block;
	position:absolute;
	width: 100%;
	height:100%;
	left:0;
	top:0;
}

#works ul li a .new_left{
	display:inline-block;
	position:absolute;
	overflow:hidden;
	left:0;
	top:10px;
	z-index:10;
}

#works ul li a .new_right{
	display:inline-block;
	position:absolute;
	overflow:hidden;
	right:0;
	top:10px;
	z-index:10;
}

#works ul li a .caPhoto{
	display:block;
	position:absolute;
	overflow:hidden;
	width: 100%;
	height:100%;
	left:0;
	top:0;
}

#works ul li a .caPhoto img{
	max-width:100%;
	height:auto;
	display:block;
	-moz-transform: scale(1,1);
	-webkit-transform: scale(1,1);
	-ms-transform: scale(1,1);
	transform: scale(1,1);
}

/*rollover*/
.no-touchevents.csstransitions #works ul li a .caPhoto img{
	-webkit-transition: -webkit-transform 1.5s;
	transition: transform 1.5s;
	will-change: transform;
	transform: translate3d(0, 0, 0);
}

.no-touchevents.csstransitions #works ul li a:hover .caPhoto img{
	-moz-transform: scale(1.02,1.02);
	-webkit-transform: scale(1.02,1.02);
	-ms-transform: scale(1.02,1.02);
	transform: scale(1.02,1.02);
}

.no-touchevents #works ul li a .overlay{ 
	display:block;
	position:absolute;
	width: 105%;
	height:105%;
	left: -2.5%;
	top: -2.5%;
	background:#000;
	opacity: 0.0; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=0); /* IE lt 8 */
	-ms-filter: "alpha(opacity=0)"; /* IE 8 */
	-khtml-opacity: 0.0; /* Safari 1.x */
	-moz-opacity: 0.0; /* FF lt 1.5, Netscape */
}

.no-touchevents.csstransitions #works ul li a .overlay{ 
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

.no-touchevents #works ul li a:hover .overlay{
	opacity: 0.4;
}

.no-touchevents.csstransitions #works ul li a .new_left,
.no-touchevents.csstransitions #works ul li a .new_right{
	opacity: 1;
	-webkit-transform:translate(0,0);
	transform: translate(0,0);
	-webkit-transition: opacity 0.30s,-webkit-transform 0.45s ease-out;
	transition: opacity 0.30s,transform 0.45s ease-out;
}

.no-touchevents.csstransitions #works ul li a:hover .new_left{
	opacity: 0;
	-webkit-transform:translate(0,0);
	transform: translate(-48px,0);
}

.no-touchevents.csstransitions #works ul li a:hover .new_right{
	opacity: 0;
	-webkit-transform:translate(0,0);
	transform: translate(48px,0);
}


#works ul li a .copyOff,
#works ul li a .copyOn{
	display:block;
	position:absolute;
}

#works ul li a .copyOff img,
#works ul li a .copyOn img{
	max-width:100%;
	height:auto;
}

#works ul li a .copyOn{
	opacity: 0.0; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=0); /* IE lt 8 */
	-ms-filter: "alpha(opacity=0)"; /* IE 8 */
	-khtml-opacity: 0.0; /* Safari 1.x */
	-moz-opacity: 0.0; /* FF lt 1.5, Netscape */
}

#works ul li#works1 a .copyOff, #works ul li#works1 a .copyOn{
	left:77.114%;
	top:34.210%;
	width:16.9154%;
	height:32.456%;

	width : -moz-calc(136 / 804 * 100%) ;
	width : -webki-calc(136 / 804 * 100%) ;
	width : calc(136 / 804 * 100%) ;
	height : -moz-calc(74 / 228 * 100%) ;
	height : -webki-calc(74 / 228 * 100%) ;
	height : calc(74 / 228 * 100%) ;
}

#works ul li#works2 a .copyOff, #works ul li#works2 a .copyOn{
	left:35.074%;
	top:32.894%;
	width:13.681%;
	height:35.0877%;

	width : -moz-calc(110 / 804 * 100%) ;
	width : -webki-calc(110 / 804 * 100%) ;
	width : calc(110 / 804 * 100%) ;
	height : -moz-calc(80 / 228 * 100%) ;
	height : -webki-calc(80 / 228 * 100%) ;
	height : calc(80 / 228 * 100%) ;
}
#works ul li#works3 a .copyOff, #works ul li#works3 a .copyOn{
	left:48.136%;
	top:28.4671%;
	width:25.672%;
	height:45.985%;

	width : -moz-calc(248 / 966 * 100%) ;
	width : -webki-calc(248 / 966 * 100%) ;
	width : calc(248 / 966 * 100%) ;
	height : -moz-calc(126 / 274 * 100%) ;
	height : -webki-calc(126 / 274 * 100%) ;
	height : calc(126 / 274 * 100%) ;
}
#works ul li#works4 a .copyOff, #works ul li#works4 a .copyOn{
	left:31.4699%;
	top:27.007%;
	width:20.703%;
	height:46.7153%;

	width : -moz-calc(200 / 966 * 100%) ;
	width : -webki-calc(200 / 966 * 100%) ;
	width : calc(200 / 966 * 100%) ;
	height : -moz-calc(128 / 274 * 100%) ;
	height : -webki-calc(128 / 274 * 100%) ;
	height : calc(128 / 274 * 100%) ;
}
#works ul li#works5 a .copyOff, #works ul li#works5 a .copyOn{
	left:49.482%;
	top:28.102%;
	width:19.254%;
	height:45.4545%;

	width : -moz-calc(186 / 966 * 100%) ;
	width : -webki-calc(186 / 966 * 100%) ;
	width : calc(186 / 966 * 100%) ;
	height : -moz-calc(120 / 274 * 100%) ;
	height : -webki-calc(120 / 274 * 100%) ;
	height : calc(120 / 274 * 100%) ;
}
#works ul li#works6 a .copyOff, #works ul li#works6 a .copyOn{
	left:9.1365%;
	top:28.030%;
	width:16.265%;
	height:45.985%;

	width : -moz-calc(162 / 996 * 100%) ;
	width : -webki-calc(162 / 996 * 100%) ;
	width : calc(162 / 996 * 100%) ;
	height : -moz-calc(126 / 264 * 100%) ;
	height : -webki-calc(126 / 274 * 100%) ;
	height : calc(126 / 274 * 100%) ;
}

#works ul li#works7 a .copyOff, #works ul li#works7 a .copyOn{
	left:48.1366%;
	top:28.7878%;
	width:26.0869%;
	height:47.7272%;

	width : -moz-calc(252 / 966 * 100%) ;
	width : -webki-calc(252 / 966 * 100%) ;
	width : calc(252 / 966 * 100%) ;
	height : -moz-calc(126 / 274 * 100%) ;
	height : -webki-calc(126 / 274 * 100%) ;
	height : calc(126 / 274 * 100%) ;
}

#works ul li#works8 a .copyOff, #works ul li#works8 a .copyOn{
	left:29.1925%;
	top:28.1%;
	width:23.3954%;
	height:45.45%;

	width : -moz-calc(226 / 966 * 100%) ;
	width : -webki-calc(226 / 966 * 100%) ;
	width : calc(226 / 966 * 100%) ;
	height : -moz-calc(120 / 274 * 100%) ;
	height : -webki-calc(120 / 274 * 100%) ;
	height : calc(120 / 274 * 100%) ;
}

#works ul li#works9 a .copyOff, #works ul li#works9 a .copyOn{
	left:49.896%;
	top:34.84%;
	width:26.50%;
	height:34.09%;

	width : -moz-calc(256 / 966 * 100%) ;
	width : -webki-calc(256 / 966 * 100%) ;
	width : calc(256 / 966 * 100%) ;
	height : -moz-calc(90 / 274 * 100%) ;
	height : -webki-calc(90 / 274 * 100%) ;
	height : calc(90 / 274 * 100%) ;
}

#works ul li#works10 a .copyOff, #works ul li#works10 a .copyOn{
	left:29.1925%;
	top:28.1%;
	width:21.325%;
	height:45.25%;

	width : -moz-calc(204 / 966 * 100%) ;
	width : -webki-calc(204 / 966 * 100%) ;
	width : calc(204 / 966 * 100%) ;
	height : -moz-calc(124 / 274 * 100%) ;
	height : -webki-calc(124 / 274 * 100%) ;
	height : calc(124 / 274 * 100%) ;
}

#works ul li#works11 a .copyOff, #works ul li#works11 a .copyOn{
	left:47.7226%;
	top:26.515%;
	width:28.46%;
	height:48.48%;

	width : -moz-calc(275 / 966 * 100%) ;
	width : -webki-calc(275 / 966 * 100%) ;
	width : calc(275 / 966 * 100%) ;
	height : -moz-calc(128 / 274 * 100%) ;
	height : -webki-calc(128 / 274 * 100%) ;
	height : calc(128 / 274 * 100%) ;
}

#works ul li#works12 a .copyOff, #works ul li#works12 a .copyOn{
	left:27.536%;
	top:29.166%;
	width:26.086%;
	height:48.48%;

	width : -moz-calc(252 / 966 * 100%) ;
	width : -webki-calc(252 / 966 * 100%) ;
	width : calc(252 / 966 * 100%) ;
	height : -moz-calc(128 / 274 * 100%) ;
	height : -webki-calc(128 / 274 * 100%) ;
	height : calc(128 / 274 * 100%) ;
}

#works ul li#works13 a .copyOff, #works ul li#works13 a .copyOn{
	left:46.066%;
	top:27.272%;
	width:30.124%;
	height:46.96%;

	width : -moz-calc(291 / 966 * 100%) ;
	width : -webki-calc(291 / 966 * 100%) ;
	width : calc(291 / 966 * 100%) ;
	height : -moz-calc(124 / 274 * 100%) ;
	height : -webki-calc(124 / 274 * 100%) ;
	height : calc(124 / 274 * 100%) ;
}

#works ul li#works14 a .copyOff, #works ul li#works14 a .copyOn{
	left:29.39%;
	top:27.27%;
	width:18.32%;
	height:46.71%;

	width : -moz-calc(177 / 966 * 100%) ;
	width : -webki-calc(177 / 966 * 100%) ;
	width : calc(177 / 966 * 100%) ;
	height : -moz-calc(128 / 274 * 100%) ;
	height : -webki-calc(128 / 274 * 100%) ;
	height : calc(128 / 274 * 100%) ;
}

#works ul li#works15 a .copyOff, #works ul li#works15 a .copyOn{
	left:51.4%;
	top:33.57%;
	width:18.94%;
	height:32.1%;

	width : -moz-calc(183 / 966 * 100%) ;
	width : -webki-calc(183 / 966 * 100%) ;
	width : calc(183 / 966 * 100%) ;
	height : -moz-calc(88 / 274 * 100%) ;
	height : -webki-calc(88 / 274 * 100%) ;
	height : calc(88 / 274 * 100%) ;
}


/*rollover*/
.no-touchevents.csstransitions #works ul li a .copyOff{
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}

.no-touchevents.csstransitions #works ul li a .copyOn{
	-webkit-transition: opacity 1s;
	transition: opacity 1s;
}

.no-touchevents.csstransitions #works ul li:hover a .copyOff{
	will-change: opacity;
	transform: translate3d(0, 0, 0);
}
.no-touchevents.csstransitions #works ul li:hover a .copyOn{
	will-change: opacity;
	transform: translate3d(0, 0, 0);
}

.no-touchevents.csstransitions #works ul li a:hover .copyOff{
	opacity: 0;
}
.no-touchevents.csstransitions #works ul li a:hover .copyOn{
	opacity: 1;
}