
@lost gutter 0px;
@require '/require/_var.styl'

p
	display: block
	font-size 1.2rem
	font-weight 300
	line-height 30px
	max-width 700px
	margin 0px auto
	+below(880px)
		max-width 600px
		font-size 1rem
	+below(480px)
		max-width 100%
		width 100%
		line-height 1.5rem

#main
	animation-fill-mode both
	opacity 0
	header
		position relative
		width 100%
		display block
		padding 100px 0 120px 0
		lost-utility clearfix
		text-align center
		background: $lightgrey
		+below(880px)
			padding 30px 0
			.imgBox
				lost-center 100%
				margin-top 30px
				padding 15px
			.contentBox
				lost-center 100%
				.brand-title
					font-size 2.4rem
					line-height 40px
					padding 20px 0
				.brand-describe
					padding 0px 0 10px 0
					font-size 1rem
					font-weight 400
					color $grey
			.headerDownload
				lost-center 100%
				padding 30px
				a
					padding 10px 30px
					font-size 1rem
					font-weight 300
		+below(480px)
			.imgBox
				padding 0px
				height 70px
				img
					height 100%
					width: auto
			.contentBox
				padding 0 20px
				.brand-title
					font-size 2rem
				.brand-describe
					text-align left
					word-break break-all
					word-wrap break-word
		.imgBox
			position: relative
			display: block
			lost-center 85%
			padding 30px
			img
				height auto
				width: auto
		.contentBox
			position: relative
			lost-center 85%
			.brand-title
				position: relative
				display inline-block
				margin 0px auto
				font-size 4rem
				font-weight 100
				line-height 100px
				&::after
					position: absolute
					display: inline-block
					content ''
					background: url('/lib/image/guideline.svg') no-repeat
					height 30px
					width 30px
					top 20px
					right -40px
			.brand-describe
				position: relative
				padding 30px 30px 0 30px
				color $darkgrey
				font-size 1.1rem
				font-weight 300
		.headerDownload
			position: relative
			lost-center 85%
			padding 60px 0
			a
				display: inline-block
				padding 15px 40px
				background: $lightred
				border-radius 50px
				color $white
				font-size 1.4rem
				font-weight 100
				line-height 30px
				box-shadow 0px 25px 50px 0px alpha($black, 15%)
				transition box-shadow 0.23s ease-in-out 0s, background 0.23s ease-in-out 0s
				&:hover
					background: darken($lightred, 10%)
					box-shadow 0px 50px 100px alpha($black, 15%)
			h6
				padding 20px 0
				color $darkgrey
				font-size 0.8rem
	
	.s1
		position: relative
		lost-center 100%
		text-align center
		+below(1080px)
			.shadowBox
				max-width 880px
		+below(880px)
			.shadowBox
				display none
				visibility hidden
		.shadowBox
			position: relative
			max-width 1080px
			height auto
			margin 0px auto
			transform translate3d(0,0,0)
			.tutorial
				position: relative
				display: block
				width 100%
				background: $white
				height auto
				transform translateY(-100px)
				box-shadow 0 2px 2px alpha(black, 20%)
				border-radius 4px
				video
					width 100%
					height auto
					
				&::before
					position absolute
					background transparent
					content ""
					bottom 0px
					left 1%
					width 98%
					height 20px
					border-radius 0 0 50% 50%
					box-shadow 0 5px 15px alpha(black, 25%)
					z-index -1
					transition-duration 0.5s
			// .videoimage
			// 	position: absolute
			// 	width 100%
			// 	height 100%
			// 	top 0
			// 	left 0
			// 	background $lightred
			// 	background: url('/lib/video/box.png') no-repeat
			// 	background-size cover
			// 	background-positio/n: bottom center
			// 	transition opacity 0.17s ease-in-out 0s
			// 	transform translate3d(0,0,0)
			// 	p
			// 		position: relative
			// 		display: block
			// 		top 50%
			// 		transform translateY(-50%)
			// 		color $white
			// 		font-size 1rem
			// 		font-weight 200
					
	.s2
		position: relative
		lost-center 100%
		text-align center
		margin-bottom 100px
		+below(880px)
			margin-top 60px
			margin-bottom 60px
			img
				max-width 100%
			p
				font-size 1rem
				font-weight 400
				color $grey
		p
			padding 30px
			font-weight 300
			color $darkgrey
		img
			display: block
			margin 0px auto
			padding 30px
			max-width 830px
			height auto
		+below(480px)
			p
				text-align left
				word-break break-all
				word-wrap break-word
	.s3
		position: relative
		lost-center 100%
		background: $darkgrey
		padding 100px 0 60px 0
		overflow-x hidden
		+below(1080px)
			padding 30px 0 30px 0
			.left-content
				lost-column 1/1
				padding 30px
				.box
					padding-top 0
					text-align center
			.right-img
				lost-column 1/1
				max-height auto
				.screen
					height auto
					width 100%
					transform translateX(0px)
				.controltool
					top 0
					right 0
					width 70%
					padding 20px
		+below(880px)
			.left-content
				.box
					p
						color $smoggrey
						font-size 1rem
						font-weight 400
		+below(480px)
			.left-content
				.box
					p
						text-align left
						word-break break-all
						word-wrap break-word
		.left-content
			position: relative
			lost-column 2/5
			padding-left 60px
			.box
				position: relative
				padding-top 45%
				// transform translateY(-50%)
				h2
					color $white
				p
					color $lightgrey
					padding-top 30px
		.right-img
			position: relative
			lost-column 3/5
			max-height 1100px
			text-align right
			.screen
				height 100%
				transform translateX(20px)
				z-index: 1
			.controltool
				position: absolute
				transform translate3d(0,0,0)
				top 10%
				right 30%
				width 500px
				height auto
				z-index 2
	.s4
		position: relative
		lost-center 100%
		background: $white
		padding 100px 0
		text-align center
		+below(880px)
			padding 60px 20px
			.content
				p
					padding 10px
					font-size 1rem
					margin-top 20px
					font-weight 400
					color $grey
			.download
				a
					padding 5px 15px
					margin 20px 0 5px 0
					font-size 1rem
					font-weight 300
		+below(480px)
			.content
				p
					text-align left
					word-break break-all
					word-wrap break-word
			.donate
				margin-top 100px
				&::before
					height 50px
					bottom 110px
		.content
			p
				padding 30px
				color $darkgrey
				a
					color rgba(50,90,200,1)
					&:hover
						color $lightred
		.download
			a
				display: inline-block
				padding 15px 40px
				margin 25px 0 15px 0
				background: transparent
				border-radius 50px
				border 1px solid $lightred
				color $lightred
				font-size 1.4rem
				font-weight 200
				line-height 30px
				transition background 0.17s ease-in-out 0s, color 0.17s ease-in-out 0s
				&:hover
					background: $red
					color $white
		.donate
			position: relative
			margin-top 250px
			&::before
				content ''
				position: absolute
				bottom 160px
				// left 100px
				width 1px
				height 100px
				background: $smoggrey
			h6 
				display: block
				padding 30px 0
				font-size 1rem
				font-weight 200
				color $black
		



// iframe
// 	html
// 		body
// 			#player
// 				top 0
// 				position: absolute
// 				height 110%
// 				background none
// 				.video-wrapper
// 					background none
// 					.video
// 						height auto
// 				.controls-wrapper
// 					.controls
// 						position: absolute
// 						top 50%
// 						margin 0
// 						left calc(50% - 39px)
// 						transform translateY(-50%)
// 						button.play
// 							position: absolute
// 						.play-bar
// 							display hidden







		