@charset "utf-8";

ul.tabs {
    margin: 0;
    padding: 0;
    float: left;
    list-style: none;
    width: 100%;
    font-size: 15px;
    border-left: 1px solid #ddd;
	box-sizing: border-box;
    height: 40px;
}
ul.tabs li.active {
    background: #461469;
    color: #fff;
}


.bg-black{width: 1920px;
    z-index: 1;
    height: 734px;
    position: absolute;
    top: 0;
    opacity: 25%;
    background: #000;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
    filter: alpha(opacity=25); }

.bg-black2{width: 1920px;
    z-index: 1;
    height: 734px;
    position: absolute;
    top: 0;
     }




/*인트로*/
.start {
    position: fixed;
    height: 100%;
    width: 1920px; left:50%; margin-left:-960px;
    z-index: 99999999999999999;
    top: -1px;
    animation-duration: 4.5s;
    animation-name: slidein;
/*    background-image: url(images/intro/intro_bg.jpg);*/
    background-size: 100%;
    background-repeat: no-repeat;
    margin-top: -2650px;
}
.intro-txt {
    position: absolute;
   
    z-index: 9999;
    display: inline-block;
    width: 1920px;
    height: 1010px;
    text-align: center;
    background: url(../img/intro/int_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.int-txt01 {
    animation: 1.4s slidein1 ease;
    position: absolute;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}
.int-txt02 {
    animation: 2s slidein2;
    position: absolute;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.int-txt03 {
    animation: 3s slidein3;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

#intro-bar { width: 100%; height: 5px; position:absolute; bottom: -1px; left: 0; background-color: #c91755; z-index: 999999999999999; animation-name: slidein4; animation-duration: 3.3s;}



@keyframes slidein {

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

@keyframes slidein1 {
    0% {margin-top: -80px;}
/*    50% {margin-top: -40px;}*/
    50% { }
}

@keyframes slidein2 {
    0% { opacity: 0;}
   40% {margin-top: -15px;opacity: 0;}
    80% { }
}

@keyframes slidein3 {
    0% { opacity: 0;}
    50% {bottom: -30px; opacity: 0;}
    100% { }
}

@keyframes slidein4 {
    0% { width: 0%;}
/*    50% {margin-top: -40px;}*/
    100% { }
}


/*퀵버튼*/
.q_btn{
    position: fixed;
    top: 89px;
    z-index: 99999999;
    right: 50%;
    margin-right: -800px;
animation-duration:3s; animation-name: q-btn;
}


@keyframes q-btn{
    from { opacity: 0;  margin-right: -1130px;}
  80% { opacity: 0; margin-right: -1130px; }
  to { }
}

.bgov { position:absolute; bottom:0; left:0; right:0; width:100%; z-index:3;} 
.bin{ position:absolute; z-index:5; opacity:1; left:50%; margin-left:-600px; top:0; }
.bg1 { z-index:1; position:fixed; top:0; left:0; width:100%; height:100%; opacity:1; background:url('../img/sec01-bg.jpg') no-repeat center center; background-size:cover; animation:sec01 12s; z-index: -1;}


#vis,
#vis .vis {width:1920px;height:1000px; position: fixed; z-index:0;overflow:hidden; top:0px; left:50%; margin-left:-960px; }
#vis .vis .bg {position: absolute; left:50%;margin-left:-960px;z-index:0;transition:3.5s;transform:scale(1.4,1.4);  }

#vis .vis .info { width: 662px; height: 1000px;  overflow: hidden; position: fixed; right: 0; background: url(../img/tit_bg.jpg) repeat center;}

#vis .vis .info:before {content:"";display:inline-block;width:0;height:100%;vertical-align:middle;}
#vis .vis .info:after { 
	content:"";
	display:none;
	z-index:0;
	width:825px;
	height:316px;
	position:absolute;
	left:50%;
	top:54%;
	margin:-163px 0 0 -417.5px;
	border:1px solid rgba(255,255,255,0.5);;
	transform:scale(1.35,1.35);
	transition:5s;
}


#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;bottom:150px;left:50%;margin-left:-100px;width:200px;text-align:center; display: none; }
#vis .bx-pager .bx-pager-item {display:inline;}
#vis .bx-pager .bx-pager-item a {
	display:inline-block;
	margin:0 5px;
	width:10px;
	height:10px;
	border:1px solid #fff;
	text-indent:-9999px;
	text-align:left;
	overflow:hidden;
	border-radius:50%;
	transition:0.3s;
}
#vis .bx-pager .bx-pager-item a.active {background:#fff; }

#main2-bin { position: absolute; top: 0; left: 50%; margin-left: -960px; z-index: 10; }

#main_text01 {width: 662px; height: 1000px; position: fixed; z-index:10; top:0px;}

#main_txt01 { width: 748px; height: 1000px; position: absolute; z-index:10; top:0px; left:50%; margin-left: -374px; animation-duration: 2s; animation-name: txt1;}
#main_txt01-2 { width: 748px; position: absolute; z-index:10; top:349px; left:50%; margin-left: -374px; animation-duration: 2.5s; animation-name: txt1-2;}
#main_txt01-3 { width: 748px; position: absolute; z-index:10; top:447px; left:50%; margin-left: -374px; animation-duration: 3s; animation-name: txt1-3; }


#main_text02 {width:576px;height:500px; position:absolute; z-index:10; font-family: 'Noto Sans KR', sans-serif; }
#main_txt02 { position:absolute; top:0px; left:0; animation-duration: 3.5s; animation-name: txt1-4;}

#main_text03{width:576px;height:500px; position:absolute; right: 0; z-index:10; font-family: 'Noto Sans KR', sans-serif;}
#main_txt03{ position:absolute; top:0px; right:0; z-index: 100; animation-duration: 4s; animation-name: txt1-5; }
@keyframes txt1 {

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

@keyframes txt1-2 {

  from {opacity:0;}
  40% {opacity:0;}

  to { }
  
}


@keyframes txt1-3 {

  from {  opacity:0;}
  50% { opacity:0;}

  to { }
  
}

@keyframes txt1-4 {

  from {  opacity:0; margin-top: -10px;}
  70% { opacity:0; margin-top: -10px;}

  to { }
  
}

@keyframes txt1-5 {

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

  to { }
  
}





#content { width: 1920px; height: auto; position: relative; top: 1000px; left: 50%; margin-left: -960px; background-color: #fff; }

#premium-wrap { width: 1920px; height:324px; position: relative; top: 0; left: 50%; margin-left: -960px; }
#premium-bg { position: absolute; top: 0; left: 0; }
#premium-con-wrap { width:1920px; height:324px;  position: absolute; top: 0; left: 50%; margin-left: -960px; background-image: url("../img/pre-bg.png"); background-repeat: no-repeat;}

.pre { width:1200px ; position: absolute; left: 50%; margin-left: -580px; top: 0;}
.pre li { float: left; opacity: 0; margin-top: -10px;}


.pr-wrap { position: relative; width: 1920px; height:853px ; background-color: #e8e8e8; text-align: center; left: 50%; margin-left: -960px;}
#player03 { position: absolute; left: 50%; margin-left: -600px;  margin-top:80px;}


#vision-wrap { width: 1920px; height:907px; position: relative; top:0px; left: 50%; margin-left: -960px; background-color: #fff;  }
.visionmv { width: 1920px; height: 734px; position: absolute; top: 0; left: 50%; margin-left: -960px; overflow: hidden; }
#vision-tit { width: 1100px; position: absolute; top: 0; left: 50%; margin-left: -550px; opacity: 0; z-index: 2;}


/*main-vis*/



#vis .vis .info dl {
    display: inline-block;
    position: relative;
    z-index: 10;
    top: 89px;
    left: 0;
    width: 661px;
}


.tit01 { animation-duration:2.5s; animation-name:tit1;}
.tit02 { animation-duration:3s; animation-name:tit2;}
.tit03 { animation-duration:3.5s; animation-name:tit3;}
.tit04 { animation-duration:4s; animation-name:tit4;}
.tit05 { animation-duration:5s; animation-name:tit5; z-index: -1;}

@keyframes tit1 {

	from { opacity:0;}
	60% {opacity:0;}
	to { }
		  
	}
	
@keyframes tit2 {

	from { opacity:0; }
	70% {opacity:0;}
	to { }
		  
	}

@keyframes tit3 {

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

@keyframes tit4 {

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

@keyframes tit5 {

	from { left: 100px; opacity:0;}
	80% { left: 100px; opacity:0;}
	to { }
		  
	}




.arrow { position: absolute; z-index: 100;  width: 1354px; top:50%; left: 50%; transform: translate(-53.5%,-50%); overflow: visible;}
/*.swiper-wrapper .swiper-slide{overflow: hidden;}*/



.swiper-wrapper .swiper-slide>img{ position: absolute; top:0; right: 0; }
.swiper-wrapper .swiper-slide>img:nth-child(2) { right: 0px; opacity: 0; transition:0.5s; cursor: pointer;}
.swiper-wrapper .swiper-slide>img:nth-child(2):hover { right: 0px; opacity: 1; }



.benefit { position: relative; width: 1920px; left: 50%; margin-left: -960px; top:0; height:600px ; background-color: #fff; text-align: center;}
.bene-tit { opacity: 0; }
.bene { width: 1200px; position: relative; left: 50%; margin-left: -600px; top:0px; }
.bene01 { position: absolute; left:480px; top: 100px; opacity: 0;}
.bene02 {position: absolute; left:480px; top: 100px; opacity: 0;}
.bene03 {position: absolute; left:480px; top: 100px; opacity: 0;}
.bene04 {position: absolute; left:480px; top: 100px; opacity: 0;}

.bene05 {position: absolute; left:480px; top: 100px; opacity: 0;}
.bene06 {position: absolute; left:480px; top: 100px; opacity: 0;}
.bene07 {position: absolute; left:480px; top: 100px; opacity: 0;}
.bene08 {position: absolute; left:480px; top: 100px; opacity: 0;}


/*
.bene02 { width: 1200px; position: absolute; left: 50%; margin-left: -600px; top:365px; }
.bene02 li { float: left; margin-left:18px ;}
.bene02 li:first-child { margin-left: 0; }
*/


		#footer {max-width: 1920px;   width: 100% !important; height:168px; position: relative; top: 1000px; left: 0; right: 0; margin: auto; z-index: 9999; background-color: #070707; }
		#footer-left { position: absolute; top: 0px; left: 0px; z-index: 11;}
		#footer-right { position: absolute; top: 0px; right: 70px; z-index: 13;}


		@media all and (max-width:1380px) { 
/*
				#footer-left { position:absolute; left: 50%; margin-left: -680px;}
				#footer-right{ position:absolute; right: 50%; margin-right: -600px;}
                #vis .vis .info {position: absolute; right:0; margin-left: 311.5px;}
*/
			}
/*
        @media all and (min-width:1380px) and (max-width:1600px) { 
                #vis .vis .info {position: absolute; right:0; margin-left: 511.5px;}
			}
*/
		@media all and (min-width:1930px) { 
				#footer-left { position:absolute; left: 50%; margin-left: -960px;}
				#footer-right{ position:absolute; right: 50%; margin-right: -960px;}
				#vis .vis .info {position: absolute; right:0; }
				#main_text01 { right: 50%; margin-right: -960px;}
				#pop { z-index:190; width: 380px; position: fixed; left:50%; margin-left:-960px; top:89px; animation-duration:4s; animation-name:popup; }
				
				
				
				
				}



}