//LESS

@import 'base';

#content{
	position: relative;
	
	#article{
		position: absolute;
		top: -15px;
		left: 0;
		width: 48%;
		height: 580px;
		background: lighten(gray,45%);
		.box-shadow(0 0 7px lighten(gray,10%));
		display: none;
		
		.wrap{
			margin: 10px;
			padding: 30px;
			height: 500px;
			overflow-y: auto;
			overflow-x: hidden;
			background: white;
			line-height: 22px;
			
			h2{
				color: @red;
				font-size: 17px;
				margin: 28px 0 5px 0;
				font-weight: 600;
			}
			
			p{
				margin: 20px 0;
			}
			
			a{
				color: @red;
				text-decoration: underline;
				transition: 0.5s;
				-webkit-transition: 0.5s;

				&:hover{
					color: lighten(@red,10%);
				}
			}
			
			#closeArticle{
				cursor: pointer;
				width: 21px;
				height: 21px;
				text-indent: -9999px;
				float: right;
				background: url(../images/close.png) no-repeat left bottom;
				transition: none;
				-webkit-transition: none;
				margin: -10px 0 0 0;
				
				&:hover{
					background-position: left top;
				}
			}
			
			.article{
				border-top: 1px @red solid;
				padding-top: 10px;
				margin-top: 10px;
			}
			
			.datetime{
				color: gray;
				font-size: 12px;
			}
		}
	}
	.column{
		position: relative;
		display: inline-block;
		width: 100%;
		vertical-align: top;
		min-height: 445px;
		
		&.left{
			margin-right: 2%;
		}
		
		.companyName{
			margin-top: 40px;
			font-size: 18px;
			
			.upperCase{
				color: @red;
				font-size: 28px;
			}
		}
		
		.slogan{
			font-size: 16px;
			color: @red;
		}
		
		p{
			margin: 20px 0;
		}
		
		h2{
			color: @red;
			font-size: 18px;
			margin: 20px 0;

			span{
				color: gray;
				font-size: 14px;
				margin-left: 10px;
			}
		}
		
		.timeline{
			margin-left: 0;
			list-style: none;
			margin-top: 20px;
			
			li{
				padding-bottom: 10px;
				span{
					display: inline-block;
					margin-left: 10px;
					width: 350px;
					vertical-align: top;
				}
			}
		}
		
		.image-set img{
			width: 250px;
		}
		
		.news{
			margin-left: 10px;
			list-style: none;
			width: 85%;
			
			li{
				padding: 20px 10px;
				border-bottom: 1px lighten(gray, 20%) dashed;
				cursor: pointer;
				transition: 0.3s;
				-webkit-transition: 0.3s;
				
				&:hover{
					color: @red;
				}
				
				&.current{
					background-color: lighten(gray,45%);
				}
				
				.title{
					display: inline-block;
					vertical-align: top;
					width: 300px;
				}
				.date{
					color: gray;
					font-size: 12px;
					margin-right: 10px;
					display: inline-block;
					vertical-align: top;
					width: 55px;
				}
				
				a{
					color: black;
					
					&:hover{
						color: @red;
					}
				}
			}
		}
		
		.page{
			position: absolute;
			bottom: -60px;
			right: 0;
			display: none;
			margin: 20px 55px 0 0;
			width: 85px;
			
			li{
				width: 40px;
				height: 40px;
				line-height: 38px;
				font-size: 35px;
				display: inline-block;
				cursor: pointer;
				text-indent: -9999px;
				background-color: lighten(gray,25%);
				background-image: url(../images/pageArrow.png);
				background-repeat: no-repeat;
				transition: background-color 0.3s;
				-webkit-transition: background-color 0.3s;
				
				&#prev{
					background-position: 12px 9px;
				}
				
				&#next{
					background-position: 16px -26px;
				}
				
				&.disable{
					background-color: lighten(gray,40%);
					cursor: default;
					&:hover{
						background-color: lighten(gray,40%);
					}
				}
				
				&:hover{
					background-color: @red;
				}
			}
		}
	}
}

.video{
	display: none;
	width: 425px;
	height: 240px;
	background: url(../images/companyVideo.jpg) no-repeat;
	background-size: contain;
	position: relative;
	float: right;
	margin: 0 95px 0 40px;

	&:before{
		content: "";
		display: block;
		width: 86px;
		height: 59px;
		background: url(../images/videoPlay.png) no-repeat top left;
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -29px 0 0 -43px;
	}

	&:hover:before{
		background-position: bottom left;
	}
}

#youtube{
	position: fixed;
	z-index: 100;
	width: 100%;
	top: 0;
	left: 0;
	display: none;

	.wrap{
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -247px 0 0 -480px;
		width: 960px;
		background: lighten(gray,45%);
		.box-shadow(0 0 7px lighten(gray,10%));
		z-index: 2;

		.content{
			background: white;
			margin: 10px;
    		padding: 30px;
		}

		#closeVideo{
			position: absolute;
			z-index: 2;
			top: -25px;
			right: 0;
			cursor: pointer;
			width: 21px;
			height: 21px;
			text-indent: -9999px;
			float: right;
			background: url(../images/close.png) no-repeat left bottom;
			transition: none;
			-webkit-transition: none;
			margin: -10px 0 0 0;
			
			&:hover{
				background-position: left top;
			}
		}
	}

	.mask{
		content: "";
		background: white;
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		opacity: 0.8;
	}
}