@charset "utf-8";
/* CSS Document */

.txt {
	position: absolute;
	width: 500px;
	height:100%;
	z-index: 10;
}
.mm {
	position: absolute;
	
	right: 0;
	left: 0;
	overflow: auto;
}
.title {
	padding-top: 20px;
}

article {
	padding: 40px;
}
#bg {
	background: url(../images/about/bg.jpg);
	background-size: cover;
	background-position: center;
	opacity:0.2;
}
.lineX {
	position: absolute;
	right: 0;
	bottom: 50px;
	width: 150px;
	height: 1px;
	background: #ccc;
	z-index: 500;
}
.lineY {
	position: absolute;
	right: 150px;
	width: 1px;
	height: 100%;
	background: #ccc;
	z-index: 110;
}
.slogan {
	position: absolute;
	right: 150px;
	bottom: 27px;
	color: #eee;
	font-size: 1.8em;
	font-family: 'Quicksand', sans-serif;
	letter-spacing: -1px;
	z-index: 110;

}
.slogan img{
	vertical-align:-50%;
	width:110px;
	height:50px;
	padding-left:5px;
}
.icon {
	width: 100%;
	text-align:center;
	padding-top:30px;
}
.icon li {
	display: inline-block;
	padding: 0 5px;
	cursor:pointer;
		color:#999;
}
.icon span{
	color:#FFF;
}
.icon li:hover{
	color:#333;
}
.icon .on{
	color:#333;
}
.icon .on span{
	color:#333;
}

@media screen and (min-width:1300px) {
	.txt{
	left:20%;
	margin-left:-250px;
	}
}
@media screen and (max-width:1100px) {
#bg{
	background-position:bottom;
	
	opacity:0.5;
	}
.txt {
	top: 45%;
	width: 100%;
	height:auto;
	
}
.mm{
	background:#000;
}
#bg {
	position:fixed;
	bottom: 45%;
}

.lineX {
	width: 150px;
	top:100px;
	bottom:auto;
}
.lineY {
	right: 20px;
	z-index: 5;
	height: 50%;
	display:none;
}

.slogan {
	    right: 150px;
    top: 74px;
	bottom:auto;
	color: #ccc;
	font-size:1.7em;
	z-index:810;
}
}
@media screen and (max-width:780px) {
.lineX {
	width: 30px;
	display:none;
}
	.lineY {
	right: 10px;
	z-index: 5;
	display:none;
}
.slogan {
	right: 40px;
	display:none;
}
}