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

#about
	opacity 0
	animation-fill-mode both		
	header
		position relative
		lost-center 100%
		lost-utility clearfix
		+below(880px)
			display: none
		.headerInfo
			position absolute
			width 500px
			height auto
			display block
			left calc(50% - 250px)
			vCenter()
			z-index 9
			.title
				position relative
				display block
				text-align left
				opacity 1
				topTitle()
				font-family 'SF UI Display', 'Helvetica Neue', 'Helvetica', sans-serif
				transform translateY(0px)
			.content
				position relative
				display block
				text-align right
				font-style italic
				Content()
				opacity 1
				transition opacity 0.8s linear 0.8s
				padding-top 10px
			
		.headerLeft
			position relative
			lost-column 3/5
			background $whitegrey
			height 100%
			z-index 2
		.headerRight
			position relative
			lost-column 2/5
			text-align center
			overflow hidden
			height 100%
			// background url(../lib/image/avatar4.jpg) no-repeat
			// background-position center bottom
			// background-size cover
			background $white
			z-index 2

	main
		position relative
		lost-center 80%
		margin-bottom 150px
		+below(880px)
			margin-top 100px
			.infoBox
				.info
					lost-column 1/1
					p
						padding 0
			.workBox
				.info
					lost-column 1/1
					p
						padding 0
		+below(480px)
			margin-top 0px
			.workBox
				.info
					.box
						lost-column 1/1
		.infoBox
			position: relative
			width 100%
			lost-utility clearfix
			margin-top 100px
			.info
				lost-column 3/5
				text-align justify
				position relative
				h2
					position relative
					display block
					padding 10px 0
					subTitle()
				span
					position: relative
					display: block
					margin-top 50px
					Caption()
					font-size 14px
					color $black
				p
					position relative
					display block
					margin-top 25px
					padding-right 10%
					Content()
					wordbreak()
					color $grey
					line-height 30px
		.workBox
			position: relative
			width 100%
			.info
				position relative
				lost-column 3/5
				.box
					lost-column 1/2
					position relative
					margin-top 60px
					Caption()
					color $grey
					font-weight 300
					font-size 14px
					.group
						font-size 16px
						font-weight 400
					.position
						padding 10px 0
					.located
						color $grey
					.timing
						color $grey
						padding 10px 0
						// font-size 14px
					.current
						color $black



