@CHARSET "UTF-8";
/*------------------------------------------------------------------------------------------------*/
/* common */
#loading {position:fixed;top:0;left:0;background:#fff;width:100%;height:100%;z-index:1000;}
#loading span {display:block;position:absolute;top:50%;left:50%;margin:-59px 0 0 -65px;}
body h1 {top:20px;z-index:999;}
body h1 a {display:block;}
body .s_logo {position:absolute;top:45px;left:340px;display:block;z-index:340;}

.s-nav {position:fixed;top:50%;right:75px;width:100px;height:155px;margin-top:-77.5px;z-index:300;}
.s-nav > ul {width:100%;height:100%;overflow:hidden;display:none;}
.s-nav > ul > li {width:100%;height:26px;margin-bottom:5px;}
.s-nav > ul > li > a {display:block;text-align:right;opacity:0.8;}
.s-nav > ul > li > a:hover {opacity:1;}
.s-nav > ul > li > a.on {opacity:1;}

.scroll {position:absolute;bottom:20px;left:50%;margin-left:-28px;z-index:300;}
.scroll a {dispaly:block;}

/*------------------------------------------------------------------------------------------------*/
/* index */
#index h1 {position:relative;}
#index h1 a {display:block;}
#index #fullpage {}
#index #fp-nav ul li a.active span {
	-webkit-animation:navs 1s infinite alternate linear;
	-moz-animation:navs 1s infinite alternate linear;
	animation:navs 1s infinite alternate linear;
}
@keyframes navs {
	from{
		-webkit-transition: all 0.3s linear;-moz-transition: all 0.3s linear;
		-ms-transition: all 0.3s linear;-o-transition: all 0.3s linear;
		transition: all 0.3s linear;-moz-transform: scale(1);-webkit-transform: scale(1);
		-o-transform: scale(1);-ms-transform: scale(1);transform: scale(1);
	}to{
		-webkit-transition: all 0.3s linear;-moz-transition: all 0.3s linear;
		-ms-transition: all 0.3s linear;-o-transition: all 0.3s linear;
		transition: all 0.3s linear;-moz-transform: scale(2.2);-webkit-transform: scale(2.2);
		-o-transform: scale(2.2);-ms-transform: scale(2.2);transform: scale(2.2);
	}
}
#index #movs {width:100%;height:100%;background:url(/images/mov_bg.png) no-repeat center center;z-index:50;
}
#index #movs .my-btns {
	position:absolute;bottom:30px;left:30px;background:url(../images/btn_mov.png) no-repeat ;z-index:50;
}
#index #movs .my-btns a {display:block;opacity:0.7;}
#index #movs .my-btns a:hover {opacity:1;}
#index #movs .mov_ttl {position:absolute;top:50%;left:50%;width:512px;height:420px;margin-top:-210px;margin-left:-256px;overflow:hidden;z-index:300;}
#index #movs .mov_ttl h2 {height:420px;background:url(/images/mov_ttl.png) no-repeat left top;} 
#index #movs .mov_ttl .mov_line {
	position:absolute;top:0px;left:512px;width:512px;height:3px;
    background:url(/images/mov_ttl_line.png) repeat-x right top; 
}
#index #movs .scroll {opacity:0;}
#index #main-view .view {position:relative;width:100%;height:100%;overflow:hidden;}
#index #main-view .view > div {position:absolute;top:0;left:0;width:100%;height:100%;display:none;}
#index #main-view .view > div.sv_01 {display:block;}
#index #main-view ul {position:absolute;bottom:120px;left:50%;width:350px;height:180px;margin:-90px 0 0 -175px;z-index:300;overflow:hidden;}
#index #main-view ul li {position:relative;float:left;width:50%;height:100%;}
#index #main-view ul li.sv {background:url(/images/mv_line.jpg) no-repeat right 75px;}
#index #main-view ul li a {
	display:block;margin:0 auto;width:110px;height:120px;padding:55px 0 5px;
	background:url(/images/btn_view_on.png) no-repeat center top;
}
#index #main-view ul li a img {opacity:0.7;}
#index #main-view ul li a.active {background:none;}
#index #main-view ul li a.active img {opacity:1;}
#index .slide h3 {position:absolute;bottom:190px;left:50%;margin-left:-375px;z-index:300;}

#index .slide h4 {padding:5% 0 2%;width:500px;margin:0 auto;}
#index .main-fpv {/* background:#d0d0d0;*/ position:relative;width:100%;height:100%;margin:0;padding:0;background:url(/images/brand_bg.png) no-repeat 50% 50%;background-size:cover;}
#index .main-fpv h4 {margin:0;padding:3% 0;width:100%;font-size:36px;font-weight:bold;color:#fff;text-align:center}
#index .main-fpv .lst {height:65%;width:80%;margin:0 auto;overflow:hidden;}
#index .main-fpv .lst ul {width:100%;height:100%;overflow:hidden;}
#index .main-fpv .lst ul li {float:left;width:24%;height:80%;}
#index .main-fpv .lst ul li a {position:relative;width:90%;height:100%;margin:0 auto;display:block;overflow:hidden;opacity:0;}
#index .main-fpv .lst ul li a span {
	position:absolute;top:50%;left:50%;display:block;font-size:22px;text-align:center;
	width:200px;margin:-10px 0 0 -100px;color:#fff;z-index:250;
}

@media only screen and (max-width : 768px) {
#index .main-fpv .lst ul li a span {
	position:absolute;top:50%;left:50%;display:block;font-size:12px;text-align:center;
	width:200px;margin:-10px 0 0 -100px;color:#fff;z-index:250;
}
}

@media only screen and (max-width : 768px) {
#index .slide h4 {padding:5% 0 2%;width:500px;margin:0 auto;}
#index .main-fpv {/* background:#d0d0d0;*/ position:relative;width:100%;height:100%;margin:0;padding:0;background:url(/images/brand_bg.png) no-repeat 50% 50%;background-size:cover;}
#index .main-fpv h4 {margin:0;padding:3% 0;width:100%;font-size:24px;font-weight:bold;color:#fff;text-align:center}
}


#index .main-fpv .lst ul li a .img {
	position:absolute;top:0;left:0;width:100%;height:100%;
	-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;-o-transition: all 0.5s linear;
	transition: all 0.5s linear;-moz-transform: scale(1);-webkit-transform: scale(1);
	-o-transform: scale(1);-ms-transform: scale(1);transform: scale(1);
}
#index .main-fpv .lst ul li a:hover .img {
	-moz-transform: scale(1.05);-webkit-transform: scale(1.05);
	-o-transform: scale(1.05);-ms-transform: scale(1.05);
	transform: scale(1.05);
}
#index .main-fpv .lst ul li.lst_01 a {top:15%;}
#index .main-fpv .lst ul li.lst_03 a {top:15%;}
#index .main-fpv .lst ul li.lst_05 a {top:15%;}
#index .main-fpv .lst ul li.lst_02 a {bottom:15%;}
#index .main-fpv .lst ul li.lst_04 a {bottom:15%;}

#index .main-port {background:#d0d0d0;position:relative;width:100%;height:100%;overflow:hidden;/*background:url(/images/port_bg.png) no-repeat 50% 50%;background-size:cover;*/}
#index .main-port h4 {padding:5% 0 2%;width:500px;margin:0 auto;}
#index .main-port .lst {left:50%;position:absolute;margin-left:-535px;width:1070px;padding:20px;top:50%;margin-top:-15%;}




#index .main-gall{/* background:#333;*/ position:relative;width:100%;height:100%;overflow:hidden;background:url(/images/gall_bg.png) no-repeat 50% 50%;background-size:cover;}
#index .main-gall h4 {padding:5% 0 3%;width:100%;font-size:36px;font-weight:bold;color:#202020;text-align:center}
#index .main-gall .lst {margin:0 auto;position:relative;width:1140px}
#index .main-gall ul.filter {color : #2e2e2e;text-align:center}
#index .main-gall ul.filter li {color : #555;cursor : pointer;display : inline-block;padding :5px 35px;position : relative;margin-bottom:20px;}
#index .main-gall ul.filter li:hover {color : #000;}
#index .main-gall ul.filter li.active {border-bottom : 2px solid #555;font-weight:bold;}
#index .main-gall .all-portfolios {margin-top : 20px;margin-left:0px;}
#index .main-gall .single-portfolio {/*float:left; margin-bottom:10px; min-width : 300px;*/ margin:10px;display :inline-block;}
#index .main-gall .single-portfolio:hover .img_hoverlay {display:block;}

@media only screen and (max-width : 768px) {
#index .main-gall{/* background:#333;*/ position:relative;width:100%;height:100%;overflow:hidden;background:url(/images/gall_bg.png) no-repeat 50% 50%;background-size:cover;}
#index .main-gall h4 {padding:5% 0 3%;width:100%;font-size:24px;font-weight:bold;color:#202020;text-align:center}
#index .main-gall .lst {margin:0 auto;position:relative;width:100%}
#index .main-gall ul.filter {color : #2e2e2e;text-align:center}
#index .main-gall ul.filter li {color : #555;cursor : pointer;display : inline-block;padding :5px 35px;position : relative;margin-bottom:20px;}
#index .main-gall ul.filter li:hover {color : #000;}
#index .main-gall ul.filter li.active {border-bottom : 2px solid #555;font-weight:bold;}
#index .main-gall .all-portfolios {margin-top : 20px;margin-left:0px;}
#index .main-gall .single-portfolio {float:left; margin-bottom:10px; width : 140px;/* height:100px; */margin:10px;display :inline-block;}
#index .main-gall .single-portfolio:hover .img_hoverlay {display:inline-block;}
}



#index .main-news{position:relative;display:block;background:#d0d0d0; width:100%;height:100%;overflow:hidden;/* background:url(/images/news_bg.png) no-repeat 50% 50%;background-size:cover;*/}
#index .main-news h4 {position:relative;display:block;padding:5% 0 2%;width:500px;margin:0 auto;}
#index .main-news .lst {display:block;width:1000px;position:absolute;left:50%;margin-left:-500px;top:50%;margin-top:-13%;}

#index .main-map {position:relative;display:block;width:100%;min-height:100%;overflow:hidden;}
#index .main-map .map_ttl {position:relative;bottom:100px;right:0;width:530px;height:95px;z-index:300;}
#index .main-map h4 {padding:5% 0 2%;width:500px;margin:0 auto;}
#index .main-map .map_ttl h5 img {position:absolute;top:70px;opacity:0;}
#index .main-map .map_ttl .line {position:absolute;bottom:0;right:-100%;width:100%;border-bottom:1px solid #555;}
#index .main-map .my-btns {
	position:absolute;left:50%;top:50%;width:300px;margin-left:-150px;height:184px;
	background:url(../images/btn_mov.png) no-repeat 0 0;z-index:50;}