/*----------------------------------------------------
HOME
----------------------------------------------------*/

.home h1 {position: relative;}

.top_title {
	position: relative;
	margin-top: 60px;
	height: 200px;
}
.top_title img {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
}

.home h2 { 
	position: relative;
	height: 150px;
}
.home h2 img {
	position: absolute;
	height: 100%;
}

@keyframes zoom {
   0% {
      transform: scale(1);
   }
   100% {
      transform: scale(2);
   }
}

.visual { 
	position: relative;
	margin-bottom: 90px;
    height: 480px;
    overflow: hidden;
}

.visual div.container-fluid {
	position: relative;
	z-index: 2;
}
.visual div.skybar-top {
	position: absolute;
    right: 0;
    bottom: 0;
	overflow: hidden;
    z-index: 1;
}
.visual div.skybar-top:after {
	content: '';
    display: block;
	width: 100%;
	height: 100%;
    background: url(../images/top_bg.jpg) no-repeat;
    background-size: cover;
    animation: zoom 30s 1;
    animation-fill-mode: forwards;
}

.works {
	position: relative;
	overflow: hidden;
}

.works h2 img { 
	top: 0;
	left: 15%;
}

.works .container {
	position: relative;
	z-index: 2;
}

.works-list ul li a {
	position: relative;
}
.works-list ul li .mask  {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.works-list ul li .mask br {
	display: none;
}

.works div.skybar-middle {
	position: absolute;
    right: 0;
    top: 50%;
    margin-top: -135px;
	width: 100%;
	height:  270px;
	overflow: hidden;
    z-index: 1;
}
.works div.skybar-middle:after {
	content: '';
    display: block;
	width: 100%;
	height: 100%;
    background: url("../images/top_bg02.jpg") no-repeat center center;
    background-size: cover;
    animation: zoom 30s 1;
    animation-fill-mode: forwards;
}

.aboutus { overflow: hidden; }

.aboutus h2 img { top: 0; right: 0;  }

.aboutus dt {
	padding-right: 2rem;
	font-size: 1.05rem;
	white-space: nowrap
}

.more {
	position: relative;
	display: inline-block;
	width: 280px;
	height: 54px;
	margin: 0 auto;
	font-family: 'Raleway', sans-serif;
	color: #333;
	font-size: 15px;
	line-height: 48px;
	letter-spacing:2px;
	text-align: center;
	vertical-align: middle;
	background-color: rgba(255,255,255,0);
	border: solid 3px #FFC66E;
}
.more:before {
	content: "";
	display: inline-block;
	position: absolute;
	top:24px;
	right:-15%;   
	width: 60px;
	height: 2px;
	background:#999;
	transition: all .3s;
}

.more:after{
    content: '';
	position: absolute;
	top:19px;
	right:-15%;  
	width: 15px;
	height: 2px;
	background:#999;
	transform: rotate(35deg);
	transition: all .3s;
}

.more:hover {
	color: #333;
	background-color: rgba(255,255,255,0.6);
}

.more:hover::before{
    right:-20%; 
}

.more:hover::after{
    right:-20%;
}


/*---------------------------------------------------------------------------------
	 Responsive
-------------------------------------------------------------------------------*/

@media (min-width: 576px) {
	.visual {
		height: 340px;
	}
	.visual div.skybar-top {
		width: 500px;
		height: 210px;
	}
	.top_title {
		margin-top: 30px;
		height: 210px;
	}
	.home h2 {
		height: 180px;
	}
}

@media (min-width: 768px) {
	.visual {
		height: 400px;
	}
	.visual div.skybar-top {
		width: 800px;
		height: 240px;
	}
	.top_title {
		margin-top: 60px;
		height: 240px;
	}
	.home h2 {
		height: 210px;
	}
}

@media (min-width: 992px) {
	.more {
		float: right;
	}
	.works-list {
		position: relative;
		top: -120px;
	}
	.works-list ul li .mask  {
		width: 100%;
		height:	100%;
		position: absolute;
		top: 0;
		left: 0;
		padding-bottom: 0;
		color: #fff;
		background-color: rgba(68,70,72,0.6);
		-webkit-transition:	all 0.2s ease;
		transition: all 0.2s ease;
		opacity: 0;
	}
	.works-list ul li a:hover .mask {
		opacity: 1;
	}
}

@media (min-width: 1200px) {
	.visual {
		height: 430px;
	}
	.visual div.skybar-top {
		width: 770px;
		height: 220px;
	}
	.top_title {
		margin-top: 60px;
		height: 270px;
	}
	.home h2 {
		height: 240px;
	}
	.works-list {
		position: relative;
		top: -150px;
	}
}

@media (min-width: 1400px) {
}


@media (max-width: 1399.98px) {

}

@media (max-width: 1199.98px) {
}

@media (max-width: 991.98px) {
	.works h2 img {
		left: 50%;
		margin-left: -90px;
	}
	.aboutus h2 img {
		right: 50%;
		margin-right: -90px;
	}
	
	.works-list ul li .mask {
		margin-top: 1rem;
	}
	
	.works-list ul li a {
		color: #372d38;
		transition: color .15s
	}
	.works-list ul li a:hover {
		color: #999;
	}
}

@media (max-width: 767.98px) {
	.visual {
		background-position: 2vw bottom;
	}
	.works h2 img {
		margin-left: -75px;
	}
	.aboutus h2 img {
	    margin-right: -75px;
	}
}

@media (max-width: 575.98px) {
	.visual {
		margin-bottom: 60px;
		height: 240px;
	}
	.visual div.skybar-top {
		left: 50%;
		border: 0;
		width: 500px;
		height: 210px;
	}
	.top_title {
		position: relative;
		margin-top: 30px;
		height: 136px;
	}
	.top_title img {
    	right: -18%;
	}
}