@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap&subset=korean');
body,html { height: 100%; }


#main { width: 100%; height:887px; position: relative; top:0x; left:0; right:0; margin:0 auto; background-color:#2a2a2a;}


.main_bg { width:1274px; height:671px; position: absolute; top:145px; left:50%; margin-left:-880px; z-index: 5; background: url('../img/main.jpg') 0 0 no-repeat; background-position: center; background-size: cover; }
#main-line { width:100%; height:7px; background-image: url(../img/line.jpg); top:910px; position: absolute; left:0; right:0; margin:0 auto; z-index:10;}
.open-pop { position: absolute; right:3%; top:680px; z-index:16;  animation-duration: 4s; animation-name:open; }


@media all and (min-width:1930px) { 

	.open-pop { position: absolute; right:50%; margin-right:-900px;}
	

	}


@keyframes open{

  from {opacity:0; margin-right: -100px; }
  70% { opacity:0; margin-right: -100px; }

  to { }
  
}



#vis .vis .bg {position:relative; z-index:0;transition:7s;transform:scale(1.2,1.2); width:100%; height:100% !important; max-height:100%; }
#vis,
#vis .vis {width:100%; height:887px; position: absolute; z-index:0; top:0; left:0; right:0;  z-index: 10; background-color:#000; overflow: hidden;}
#vis .vis .info:before {content:"";display:inline-block;width:0;height:100%;}
#vis .vis .info:after { 
	content:"";
	display:none;
	z-index:0;
	width: 1424px;
	height:990px;
	position:absolute;
	left:50%;
	top:54%;
	margin:-163px 0 0 -417.5px;
	border:1px solid rgba(255,255,255,0.5);
	transition:5s;
}
.bx-prev { display: none; }
.bx-next { display: none; }

.vimeo { opacity:0.8;}
.main-bin { position:absolute; top:0; width:1920px; left:50%; margin-left:-960px; }

#vis .vis.active .bg {transform:scale(1,1);}
#vis .vis.active .info:after {transform:scale(1,1);}

#vis .vis0 .info:after {background:none;}
#vis .vis1 .info:after {background:rgba(0,0,0,0.0);}
#vis .vis2 .info:after {background:rgba(0,0,0,0.0);}
#vis .vis3 .info:after {background:rgba(0,0,0,0.0);}
#vis .vis4 .info:after {background:rgba(0,0,0,0.0);}


#vis .bx-pager {position:absolute;z-index:120; top: 540px;left:50%;margin-left:-644px;width:200px;text-align:center; animation-duration: 4s; animation-name: txt1-4; }

#vis .bx-pager .bx-pager-item {display:inline;}
#vis .bx-pager .bx-pager-item a {
	display:inline-block;
	margin:0 7px;
	width:12px;
	height:12px;
	border:1px solid #000;
	text-indent:-9999px;
	text-align:left;
	overflow:hidden;
	border-radius:50%;
	transition:0.3s; display: none;
}
#vis .bx-pager .bx-pager-item a.active {background:#000; }

/*
#vis .bx-controls-direction a {position: absolute; z-index:100;display:block; width:50px;height:50px; top:430px; text-indent:-9999px; z-index: 99999;}
#vis .bx-controls-direction .bx-prev {background:url('../img/space-prev.png') no-repeat; left: 0;}
#vis .bx-controls-direction .bx-next {background:url('../img/space-next.png') no-repeat; right: 496px;}
*/


/*

#main_text01 {width:800px;  position:absolute; top:235px; left:50%; margin-left:-400px; z-index: 10;}
#main_txt01-1 { animation-duration: 1.5s; animation-name: txt1-1;}
#main_txt01-2 { animation-duration: 2s; animation-name: txt1-2;}
#main_txt01-3 { animation-duration: 2.5s; animation-name: txt1-3;}
#main_txt01-4 { animation-duration: 3s; animation-name: txt1-4;}
*/

#main_text01 {width:800px;  position:absolute; top:205px; left:50%; margin-left:-400px; z-index:20;}
#main_txt01-1 { opacity:0;}
#main_txt01-2 { opacity:0; margin-top:-10px;}
#main_txt01-3 { opacity:0; margin-top:-10px;}
#main_txt01-4 { opacity:0;}
#main_txt01-5 { opacity:0;}
#main_txt01-6 { opacity:0;}


.main-ori { position:absolute; top:850px; z-index:21; font-size:18px; color:#fff; left:40px;  font-family:'Noto Sans KR', 'Malgun Gothic', dotum, '돋움', '굴림', Gulim, sans-serif; font-weight:200; }


@keyframes txt1-1 {

  from { opacity:0; }
  40% {  opacity:0; }
/*  40% { transform:rotate(-180deg) }*/
  to { }
  
}

@keyframes txt1-2 {

  from {opacity:0; margin-top: -30px;}
  60% { opacity:0; margin-top: -30px;}

  to { }
  
}

@keyframes txt1-3 {

  from {opacity:0; margin-top: -30px;}
  80% { opacity:0; margin-top: -30px;}

  to { }
  
}

@keyframes txt1-4 {

  from {opacity:0; margin-top: -30px; }
  80% { opacity:0; margin-top: -30px; }

  to { }
  
}






#main_con2 { display:none;}
.main_wrap02 {position:relative; margin-top:0px;}



.main_03 {height:765px; }

.pre-tit { position:absolute; width:1100px; left:50%; margin-left:-550px; text-align:center; top:-10px; opacity:0;}

#life { width: 100%; height:622px; position: relative; top:195px; left: 0; right: 0; margin: auto; }
#life_left { width: 50%; height:622px; position: absolute; top: 0; left: -700px; opacity:0; background: url('../img/life_leftimg.jpg') 0 0 no-repeat; background-position: center; background-size: cover;  }
#life_left > img{ position:absolute; top:0; right:0; }

#life_right { width: 50%; height:622px; position: absolute; top: 0; right: -700px; opacity:0;  background: url('../img/life_rightimg.jpg') 0 0 no-repeat; background-position: center; background-size: cover;}
#life_rightimg {  }









.main_04 {width:100%; height:430px; position:relative; text-align:center; left:0; right:0; top:0; }
.life-roll { position:absolute; width:1240px; left:50%; margin-left:-620px; top:-40px; }
.life-bg { position:absolute; margin:0 auto; width:100%; background-image:url(../img/life-bg3.jpg); background-repeat:repeat-x; height:184px; bottom:0; text-align:center;  }

.l-bg {animation-duration:80s; animation-name:life-bg; animation-iteration-count:infinite; position:absolute; right:0;}

.arrow { position:absolute; width:100%; left:0; right:0; top:-230px; }

@keyframes life-bg {

  from { }
  to { margin-right:-3000px;  }
  
}


.sns {float:right; margin-top:33px;}
.sns  li {float:left; margin-left:8px;}
.sns01 {display:block; width:28px; height:28px; background:url('../img/face_icon.png') no-repeat;}
.sns01:hover {background:url('../img/face_icon_o.png') no-repeat;}
.sns02 {display:block; width:28px; height:28px; background:url('../img/twi_icon.png') no-repeat;}
.sns02:hover {background:url('../img/twi_icon_o.png') no-repeat;}
.private {display:block; width:120px; line-height:30px; font-size:12px; border:1px solid #404242; box-sizing:border-box; text-align:center; margin-left:10px;}



#footer {background-color:#303334; width:100%; height:55px; position:relative; left:0; right:0; margin:0 auto; top:0;}
#footer-left { left:0; }
#footer-right { right:0;}



#footer_wrap { width: 100%; background-color:#303334;}

#footer-left { float: left; }
#footer-right { float: right;}


#footer-re { display:none; }
#footer-re  #footer-left { display:none; }
#footer-re  #footer-right { display:none; }


#sub-footer{height:55px; background-color:#303334; position:absolute; z-index:201; margin:0 auto; text-align:center; width:100%;}
.f01 { position:absolute; top:0; left:0;}
.f02 { position:absolute; top:0; right:0;}



@media all and (max-width:1380px) { 
		.f01 { position:absolute; left:50%; margin-left:-650px;}
		.f02 { position:absolute; right:50%; margin-right:-650px;}
	}



@media all and (min-width:1930px) { 

	}




@media all and (max-width:1580px) { 

		#vis .vis .bg {width:100%; height:900px !important; }


		/*#main_text01 {position:absolute; top:220px; left:0; margin-left:-60px; z-index: 10;}*/
		#pre li {margin-left:55px; opacity:1;}

		/*.main_03 {height:auto;}
		.main_03 ul li {height:auto;}*/

		#main_con2 { width: 100%;  position: absolute; top:951px; left: 0; right: 0; margin: auto; z-index:888; display: block; }

				
		#footer-re { display: block; max-width: 1920px; height:55px; position: relative; top:0; left: 0; right: 0; margin: auto; z-index: 9999; background-color:#303334; }
		#footer { display:none;}
		#footer-re  #footer-left { display:block; position:absolute; left:0; }
		#footer-re  #footer-right { display:block; position:absolute; right:0; }

	}

@media all and (max-width:1380px) { 

		#footer-re { display: block; max-width: 1920px; height:55px; position: relative; top:0; left: 0; right: 0; margin: auto; z-index: 9999; background-color:#303334; }
		#footer { display:none;}
		#footer-re  #footer-left { display:block; position:absolute; left:50%; margin-left:-690px; }
		#footer-re  #footer-right { display:block; position:absolute; right:50%; margin-right:-690px; }

}







/*서브*/

#container{ width:100%; margin:0 auto;} 
.sub-bottom {width:100%; background-image:url(../img/life-bg3.jpg); background-repeat:repeat-x; height:184px; bottom:0; text-align:center; position:relative; }
.s-bg {animation-duration:80s; animation-name:life-bg; animation-iteration-count:infinite; position: absolute; right:0;}

#sub-vi { width:100%; height:385px; top:0; left:0; right:0; margin:0 auto; position: absolute;  z-index:8; background-color:#edeae7;}
#sub-top01 {position: absolute; width:1500px; height:281px; overflow:hidden; left:50%; margin-left:-750px; top:300px; box-shadow:0px 0px 140px -60px rgba(0,0,0,.60); background-image:url(../img/sub-top.jpg); background-repeat: no-repeat; }
.sub-vimeo { margin-top:-260px;}

#sub-logo { position:absolute; left:50%; margin-left:-38px; top:264px;}


#sub-tit{position: absolute; top:190px; left:50%; margin-left:-550px; width:1100px; }
#sub-tit>h1{font-size:44px; width:1100px; position:absolute; left:50%;  margin-left:-550px; margin-top:-60px; font-weight:500; color:#1c1c1c; 
			text-align:center; letter-spacing:-4px; font-family:'NotoSansCJKkr-Medium', sans-serif;  }
#sub-tit .sub-txt {position:absolute; font-size:12px; left:50%; margin-left:-550px; letter-spacing:-0.5px; color: #1c1c1c; opacity:0.5; top:10px; font-weight:600; width:1100px; height:20px; text-align: center; font-family: 'Noto Sans KR', sans-serif; text-transform:uppercase; } 


@media all and (min-width:1930px) { 

	}
	
#snb_wrap { width:100%; max-width:1100px; height:55px; background:#f2f2f2; z-index:98; position:absolute; top:550px; left:0; right:0; margin:0 auto;}
	
#snb_wrap ul li a { display: block; font-family:'Noto Sans KR', 'Malgun Gothic', dotum, '돋움', '굴림', Gulim, sans-serif; font-size:16px; color:#404040;}
#snb_wrap ul li:hover { background-color:#fff; border-left:1px solid #fff;}
/*#snb_wrap ul #snb_sel:hover a { color:#404040; }*/
#snb_wrap ul li:first-child { border:none;}
#snb_sel {background-color:#a59487 !important; border-left:1px solid #a59487;}
#snb_wrap ul #snb_sel a {color:#fff;}
	

#container{ width:100%; position:relative; left: 0; right: 0; margin: auto; top:340px; } 
.sub { position: relative; width:1920px; left:50%; margin-left:-960px; background-color:#fff; top:0;}


#sub_wrap { width:100%; left: 0; right: 0; margin: auto; position:relative; height:auto; margin-top:283px; }
#sub_page { width:1100px; position:relative; left:50%; margin-left:-550px; top:180px; margin-bottom:250px;}

#sub-title{position:absolute; left:50%; margin-left:-550px; width:1100px; font-family: 'Noto Sans KR', sans-serif; }
#sub-title>h1{font-size:42px; width:1100px; position:absolute; left:50%;  margin-left:-550px; top:30px; margin-top:0px; font-weight:400; color:#101010;  text-align:center; letter-spacing:-4px; z-index:2;  }
#sub-title .line{position:absolute; left:50%; margin-left:0px; top:116px; width:1px; height:33px; background-color:#8b8b8b;} 



.bb-tit{font-size:30px; color:#000; font-family:'Noto Sans KR', 'Malgun Gothic', dotum, '돋움', '굴림', Gulim, sans-serif;}

.nav {width:100%; background:#4e3e31; height:45px; padding:0px; margin:0px; font-family:'Noto Sans KR', 'Malgun Gothic', dotum, '돋움', '굴림', Gulim, sans-serif;}

.nav table{width:1100px; margin:0 auto; color:#fff; text-align:center; font-size:15px;height:45px; padding:0px;}
.nav table th{background:#fff; width:50%; color:#292019; }
.nav table td{background:#292019; width:50%; }
.nav table a{color:#fff;}

@media (max-width: 800px) {


.nav table{width:100%; margin:0 auto; color:#fff; text-align:center; font-size:14px;height:45px; padding:0px;}
.bb {width:100%; position:relative; margin:0 auto; padding-top:60px;}

}

#container2{ padding-left:0px; padding:5px 0 100px 0;} 

ul.tabs2 { font-family:'Noto Sans KR', 'Malgun Gothic', dotum, '돋움', '굴림', Gulim, sans-serif;
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    width: 100%;
    font-size:14px;
	height:40px;
}


ul.tabs2 li { margin-bottom:-1px; color:#232222; margin-left:10px;
    float: left;
    text-align:center;
    cursor: pointer;
    width:16.5%;
    height: 45px;
    line-height: 45px;
    border: 1px solid #ccc;
    font-weight: 400;
    background: #fff;
    overflow: hidden;
    position: relative;
	
}


ul.tabs2 li.selected, ul.tabs li.selected:hover
{
    position: relative;
    top: 0px;
	color:#fff; background: #4e3e31; border:1px solid #4e3e31;}
	
ul.tabs2 li.selected a, ul.tabs li.selected a:hover { color:#fff;}
        

ul.tabs2 li a { padding:10px 180px; color:#444; display: block;}
        
ul.tabs2 li.selected a:hover
{
    text-decoration: none;
}

ul.tabs2 li.active { color:#fff; background: #4e3e31;  border:1px solid #4e3e31;}


.tab_container2 {
    border: none;
    border-top: none;
    clear: both;
    float: left;
    width: 100%;
    background: #FFFFFF;max-width:900px;
}
.tab_content2 { position: absolute;
    margin:40px 0px 0px 0px; padding-right:60px;
    font-size: 1em;
    display: none;
}
.tab_container2 .tab_content2 ul {
    width:100%;
    margin:0px;
    padding:0px;
}
.tab_container2 .tab_content2 ul li {
    padding:5px;
    list-style:none;
}
 #container2 {
    width: 1100px;
    margin: 0 auto;
}

/* clear */
.clearfix02:after {content:""; display:block; clear:both;}



/*메인비쥬얼 스크롤표시*/
.main_bg_scroll .scroll {width:35px; position:absolute; bottom:50px; left:50%; margin-left:-17.5px; animation:ani_scroll 1.5s infinite ease-in-out;}
@keyframes ani_scroll{0%{transform:translateY(0%);}	50%{transform:translateY(8%);} 100%{transform:translateY(0%);}}