/* RESET */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

.clear {
	clear: both;
}

.cover {
	background-size: cover;
	background-position: center center;
}

.transition( @target: all, @duration: 400ms, @type: ease, @delay: 0s ) {
	-webkit-transition: @target @duration @type @delay;
	-moz-transition: @target @duration @type @delay;
	-ms-transition: @target @duration @type @delay;
	-o-transition: @target @duration @type @delay;
	transition: @target @duration @type @delay;
}

.border-radius( @value: 1000px ) {
	-webkit-border-radius: @value;
	border-radius: @value;
	-webkit-background-clip: padding-box; 
	-moz-background-clip: padding; 
	background-clip: padding-box;
}

.contain {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.rotate( @value: 0deg ) {
	-webkit-transform: rotate( @value );
	-moz-transform: rotate( @value );
	-ms-transform: rotate( @value );
	-o-transform: rotate( @value );
	transform: rotate( @value );
}

.box-sizing {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.scale( @value: 1 ) {
	-webkit-transform: scale( @value );
	-moz-transform: scale( @value );
	-ms-transform: scale( @value );
	-o-transform: scale( @value );
	transform: scale( @value );
}

.no-select {
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html, body {
}

/*================================*/

.page {
    position: relative;
    overflow: hidden;
    width: 100%;
    
    .bg, .glass {
    	display: block;
    	position: fixed;
    	z-index: 1;
    	left: 0;
    	top: 0;
    	width: 100%;
    	height: 100%;
    }
    
    .glass {
    	z-index: 2;
    }
    
    .all {
    	position: relative;
    	padding-top: 1px;
    	z-index: 3;
    }
    
    .container {
    	width: 1200px;
    	margin: 0 auto;
    }
    
    .intro {
    	position: relative;
    	background-image: url(../images/title.png);
    	background-repeat: no-repeat;
    	width: 799px;
    	height: 1080px;
    	margin: 0 auto;
    	margin-top: 50px;
    	
    	.text {
    		position: absolute;
    		width: 420px;
    		color: #ffffff;
    		font-size: 16px;
    		line-height: 22px;
    		font-family: 'trivia-grotesk';
    		left: 50px;
    		top: 640px;
    	}
    }
    
    .items {
    	background-color: fadeout(#00AF97, 30%);
    	border: 3px dotted #ffffff;
    	border-left: none;
    	border-right: none;
    	padding: 40px 0;
    	text-align: center;
    	font-size: 0;
    	
    	.container {
    		width: 900px;
    	}
    	
    	.item {
    		display: inline-block;
    		width: 300px;
    		height: 200px;
    		background-repeat: no-repeat;
    		background-position: center top;
    		
    		&-1 {
    			background-image: url(../images/1.png);
    		}
    		
    		&-2 {
    			background-image: url(../images/2.png);
    		}
    		
    		&-3 {
    			background-image: url(../images/3.png);
    		}
    		
    		&-4 {
    			background-image: url(../images/4.png);
    		}
    		
    		&-5 {
    			background-image: url(../images/5.png);
    		}
    		
    		&-6 {
    			background-image: url(../images/6.png);
    		}
    		
    		&-7 {
    			background-image: url(../images/7.png);
    		}
    		
    		&:hover:not(.no) {
    			opacity: 0.7;
    		}
    	}
    }
    
    .footer {
    	.container {
    		position: relative;
    		width: 900px;
    		height: 200px;
    		margin-top: 50px;
    		
    		.item {
    			display: block;
    			position: absolute;
    			background-repeat: no-repeat;
    			background-position: center center;
    			
    			
    			&-1 {
    				background-image: url(../images/a1.png);
    				width: 68px;
    				height: 103px;
    				left: 0;
    				top: 14px;
    			}
    			
    			&-2 {
    				background-image: url(../images/a2.png);
    				width: 200px;
    				height: 116px;
    				left: 200px;
    				top: 6px;
    			}
    			
    			&-3 {
    				background-image: url(../images/a3.png);
    				width: 154px;
    				height: 132px;
    				left: 530px;
    				top: 0;
    			}
    			
    			&-4 {
    				background-image: url(../images/a4.png);
    				width: 151px;
    				height: 62px;
    				left: 730px;
    				top: 32px;
    			}
    		}
    	}
    }
}