@charset "utf-8";
@import url('reset.css');


body { width: 100%; min-width: 768px; min-height: 768px; height: 100%; font: 12px "Nanum Gothic", "Dotum";  color: #383838; background: #fff; overflow: hidden;}
#wrap {  }
img {border: none;}
/*section { width: 100%; position: relative; xz-index: 20; }*/


/*
@media screen and (max-width: 1024px){
	body { min-width: 768px; min-height: 768px; }
}
*/

/*=========================================================================================================
* header
=========================================================================================================*/
#header { display: block; padding-top: 14px; width: 100%; min-width: 768px; height: 68px; background: url("../images/bg/bg_top_nav.gif") repeat-x left top; position: fixed;left:0 ; top: 0; z-index: 900; overflow: hidden;  }
#header h1 {position: absolute; top:-5px;left:20px; float: left; }
#header .top_nav { margin-right: 24px; float: right; overflow: hidden; }
#header .top_nav ul li { margin-left: 42px; float: left; overflow: hidden; }

#header .top_nav ul li a { display: inline-block; height: 38px; }
#header .top_nav ul li.tn_01 a { width: 91px; background: url("../images/layout/top_nav01.png") no-repeat left top; }
#header .top_nav ul li.tn_01 a:hover { background: url("../images/layout/top_nav01_on.png") no-repeat left top; }
#header .top_nav ul li.tn_02 a { width: 165px; background: url("../images/layout/top_nav02.png") no-repeat left top; }
#header .top_nav ul li.tn_02 a:hover { background: url("../images/layout/top_nav02_on.png") no-repeat left top; }
#header .top_nav ul li.tn_03 a { width: 165px; background: url("../images/layout/top_nav03.png") no-repeat left top; }
#header .top_nav ul li.tn_03 a:hover { background: url("../images/layout/top_nav03_on.png") no-repeat left top; }



/*=========================================================================================================
* header
=========================================================================================================*/
#footer { display: block; width: 100%; min-width: 768px; height: 50px; position: fixed; bottom: 0; z-index: 900; overflow: hidden; }
#footer ul li { padding-left: 10px; line-height: 120%;list-style: none;}
#footer ul li.address span { display: inline-block; float: left; }
/*
@media screen and (max-width: 768px){
	#footer { height: 70px; }
	#footer ul li.address span { width: 100%; }

}

*/



/*=========================================================================================================
* contents
=========================================================================================================*/
#content { min-width: 768px; width: 100%; height: 100%; position: relative; overflow: hidden; }

.sub_body { overflow: hidden; }
.sub_body .inner { width: 100%; height: 100%; position: relative; overflow: hidden; }

/*
@media screen and (max-width: 1024px){
	#content { min-width: 768px; }
}
*/


/*main*/
.page01 { adisplay: none; position: fixed; overflow: hidden; width: 100%; height: 100%; }
.page01 .inner .bg { overflow: hidden; width: 100%; height: 100%; background: #170101; position: absolute }
.page01 .inner .bg_img { width: 100%; height: 100%;  position: relative; top:0; right: 0; overflow: hidden; z-index: 0; }
.page01 .inner .bg_img img { min-width: 768px; min-height: 768px; position: absolute; right:0; width: auto; height: 100%; }

.page01 .inner .main_ani { width: 100%; height: 100%; xmin-height: 800px; margin-top: -166px; text-align: center;  position: absolute; top: 50%; overflow: hidden; z-index: 15; }
.page01 .inner .main_ani ul { margin: 0 auto; width: 700px; height: 350px; overflow: hidden; position: relative; }
.page01 .inner .main_ani ul li {  width: 700px; height: 350px; }
.page01 .inner .main_ani ul li.pt_25{ display: none; padding-top: 25px; }



/*About*/
.page02 { display: none; position: fixed; overflow: hidden; width: 100%; height: 100%;  }
.page02 .right_slide { overflow: hidden; }
.page02 .right_slide ul li { padding-top: 100px; float: left; overflow: hidden; }
.page02 .right_slide ul li.slide_01 { adisplay: none; }
.page02 .right_slide ul li.slide_01 { width: 100%; height: 100%; min-width: 768px; min-height: 800px; background: #110013; position: absolute; overflow: hidden;}
.page02 .right_slide ul li.slide_01 .bg_img { width: 100%; height: 100%; position: absolute; bottom:0; right: 0; overflow: hidden; z-index: 10}
.page02 .right_slide ul li.slide_01 .bg_img img { position: absolute; right: 0; bottom: 160px; *bottom: 102px; }	
.page02 .right_slide ul li.slide_01 .con_img { position: relative; left: 51px; z-index: 12}
.page02 .right_slide ul li.slide_01 .btn_img { position: relative; left: 51px;margin-top: 20px; z-index: 22}
.page02 .right_slide ul li.slide_01 .tit_img { overflow: hidden; padding: 0px 48px 0 51px; position: relative; z-index: 12; left: 0px; overflow: hidden;}
.page02 .right_slide ul li.slide_01 .tit_img span {  display: block; width: 100%; height: 55px; background: url("../images/bg/page02_tit_bg.png") repeat-x left top;}

/*History*/
.page02 .right_slide ul li.slide_02 { display: none; width: 100%; height: 100%; min-width: 768px; min-height: 768px; background: #01154d; position: absolute; overflow: hidden;}
.page02 .right_slide ul li.slide_02 .bg_img { width: 100%; height: 100%; position: absolute; bottom:0; right: 0; overflow: hidden; z-index: 10}
.page02 .right_slide ul li.slide_02 .bg_img img { position: absolute; right: 150px; bottom: 160px; *bottom: 102px;  }
.page02 .right_slide ul li.slide_02 .con_img { position: relative; left: 51px; z-index: 12}
.page02 .right_slide ul li.slide_02 .btn_img { position: relative; left: 51px; z-index: 12}
.page02 .right_slide ul li.slide_02 .tit_img { overflow: hidden; padding: 0 48px 0 51px; position: relative; z-index: 12; left: 0px; overflow: hidden;}
.page02 .right_slide ul li.slide_02 .tit_img span {  display: block; width: 100%; height: 103px; background: url("../images/bg/page02_tit_bg.png") repeat-x left top;}




@media screen and (max-width: 1024px){
	.page02 .right_slide ul li.slide_02 .bg_img img {width: 30%; height: auto; }
	.page02 .right_slide ul li.slide_02 .con_img { top: -50px; }
	.page02 .right_slide ul li.slide_02 .btn_img { top: -50px;}
	.page02 .right_slide ul li.slide_02 .tit_img { top: -50px;}


}


@media screen and (max-width: 768px){
	.page02 .right_slide ul li.slide_01 .bg_img img { width: 96%; height: auto; }

}



/*Business & Project*/
.page03 { display: none; none; position: fixed; overflow: hidden; width: 100%; height: 100%; }
.page03 .inner { padding-top: 100px; width: 100%; height: 100%; min-width: 768px; min-height: 810px; background: #012d05; position: absolute; overflow: hidden;}
.page03 .inner .bg_img { width: 100%; height: 100%; position: absolute; bottom:0; right: 150px; overflow: hidden; z-index: 11}
.page03 .inner .bg_img img { position: absolute; right: 0; bottom: 130px; }
.page03 .inner .con_img { position: relative; left: 51px; z-index: 12}
.page03 .inner .btn_img { position: relative; left: 51px;margin-top:100px; z-index: 12}
.page03 .inner .tit_img { overflow: hidden; padding: 0px 0px 0 50px; position: relative; z-index: 10; left: 0px; overflow: hidden;}
.page03 .inner .tit_img span {  display: block; width: 100%; height: 54px; background: url("../images/bg/page02_tit_bg.png") repeat-x left top;}


@media screen and (max-width: 1024px){
	.page03 .inner .bg_img img { width: 72%; height: auto; }
}
@media screen and (max-width: 900px){
	.page03 .inner .bg_img img { width: 62%; height: auto; opacity: 0.4}
}


/*Portfolio & Board(iframe)*/
.page04 { display: none; none; position: fixed; overflow: hidden; width: 100%; height: 100%; }
.page04 .inner { padding-top: 65px; width: 100%; height: 100%; min-width: 768px; min-height: 800px; background: #360101; position: absolute; overflow: hidden;}
.page04 .inner .bg_img { width: 100%; height: 100%; position: absolute; bottom:0; right: 0px; overflow: hidden; z-index: 11}
.page04 .inner .bg_img img { position: absolute; right: 100px; bottom: 272px; overflow: hidden;}
.page04 .inner .con_img { position: relative; left: 51px; z-index: 12}
.page04 .inner .btn_img { position: relative; left: 51px; z-index: 12}
.page04 .inner .tit_img { overflow: hidden; padding: 0px 48px 0 51px; position: relative; z-index: 10; left: 0px; overflow: hidden;}
.page04 .inner .tit_img span {  display: block; width: 100%; height: 54px; background: url("../images/bg/page02_tit_bg.png") repeat-x left top;}


@media screen and (max-width: 1024px){
	.page04 .inner .bg_img img { right: 30px; width: 70%; height: auto; }

}
@media screen and (max-width: 768px){
	.page04 .inner .bg_img img { bottom: 200px; width: 80%; height: auto; }

}





/*=========================================================================================================
* right_nav
=========================================================================================================*/

#btn_nav { amin-height: 800px; amin-width: 1024px; width: 100%; height: 100%; position: absolute; z-index: 500; overflow: hidden; }
#btn_nav ul { width: 153px; margin-top:-70px; position: absolute; right: 30px; top: 50%; text-align: right; }
#btn_nav ul li { padding: 1px 0; height: 30px; cursor: pointer; position: relative;list-style: none; }
#btn_nav ul li a { display: inline-block; width: 12px; height: 12px; background: url("../images/btn/btn_indicator.png") right top no-repeat; position: relative; right:6px; }
#btn_nav ul li a:hover,
#btn_nav ul li.on a { background: url("../images/btn/btn_indicator_on.png") right top no-repeat;}

#btn_nav ul li.location {margin-top: 6px; }
#btn_nav ul li.location a { width: 17px; height: 25px; margin-top: -5px; margin-bottom: 5px; background: url("../images/btn/btn_location.png") right top no-repeat; right: 3px;}
#btn_nav ul li.location a:hover,
#btn_nav ul li.location.on a { background: url("../images/btn/btn_location_on.png") right top no-repeat;}
#btn_nav ul li.set a { width: 22px; height: 21px; margin-top: -3px; background: url("../images/btn/btn_set.png") right top no-repeat; right: 0px; } 
#btn_nav ul li.set a:hover,
#btn_nav ul li.set.on a { background: url("../images/btn/btn_set_on.png") right top no-repeat;}

#btn_nav ul li span { display: none; margin-right: 20px; height: 30px; position: absolute; right: 12px; top: -8px; }
#btn_nav ul li.btn_nav_01 span { width: 61px; background: url("../images/btn/btn_nav04_over.png") right top no-repeat; }
#btn_nav ul li.btn_nav_02 span { width: 98px; background: url("../images/btn/btn_nav03_over.png") right top no-repeat; }
#btn_nav ul li.btn_nav_03 span { width: 153px; background: url("../images/btn/btn_nav02_over.png") right top no-repeat; }
#btn_nav ul li.btn_nav_04 span { width: 153px; background: url("../images/btn/btn_nav01_over.png") right top no-repeat; }
#btn_nav ul li.location span { width: 67px; background: url("../images/btn/btn_nav05_over.png") right top no-repeat; }
#btn_nav ul li.set span { width: 106px; background: url("../images/btn/btn_nav06_over.png") right top no-repeat; }

#btn_nav ul li.on span,
#btn_nav ul li:hover span { display: inline-block; }

/*
#go_page2 { xmin-width: 1024px; left:100px; top:500px; width: 100; height: 100; cursor: pointer; position: absolute; overflow: hidden; }
*/





.mb_45 { margin-bottom: 45px; }
.mb_25 { margin-bottom: 25px; }

.ml_5 {margin-left: 5px;}