@charset "utf-8";
/*�����������Ʈ�ε�(��Ʈ ����Ұ���font-family:'Nanum Gothic', '�������', '����', 'Gulim', 'sans-serif', 'Tahoma';�߰�)*/
@import url(https://fonts.googleapis.com/earlyaccess/nanumgothic.css);
.layout_wrap{position: relative;width: 980px;margin: 0 auto;height: 100%;}
.layout_wrap:after{content: "";display: block;clear: both;}
.layout_center{position: relative;width: 1200px;margin: 0 auto;height: 100%;}

#main{padding-top: 88px;}
/* header */
#header{position: absolute;left: 0;right: 0;top: 0;width: 100%;z-index: 99;height: 93px;overflow: hidden;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
#header.active{height: 290px;background: rgba(0,0,0,0.8);border-bottom: 1px solid #14408b;}
#header .header_top{position: relative;width: 100%;height: 93px;background: url('../../images/header/header_top_bg.png') repeat-x center top;}
#header .header_top .layout_center{height: 100%;background: url('../../images/header/header_top_bg.png') repeat-x center top;}
#header .logo{float: left;width: 155px;padding-top: 15px;text-align: center;}
/* �޴� */
#gnb{float: right;width: 740px;}
#gnb .gnb_list{padding-top: 33px;}
#gnb .gnb_list:after{content: "";display: block;clear: both;}
#gnb .gnb_list > li{float: left;width: 14.2587%;text-align: center;}
#gnb .gnb_list > li > a{display: inline-block;width: 70px;height: 25px;text-indent: -9999em;font-size:0;overflow: hidden;background-repeat: no-repeat;background-position: center top;}
#gnb .gnb_list > li.menu01 > a{background-image: url('/images/header/gnb_menu01.png');}
#gnb .gnb_list > li.menu02 > a{background-image: url('/images/header/gnb_menu02.png');}
#gnb .gnb_list > li.menu03 > a{background-image: url('/images/header/gnb_menu03.png');}
#gnb .gnb_list > li.menu04 > a{background-image: url('/images/header/gnb_menu04.png');}
#gnb .gnb_list > li.menu05 > a{background-image: url('/images/header/gnb_menu05.png');}
#gnb .gnb_list > li.menu06 > a{background-image: url('/images/header/gnb_menu06.png');}
#gnb .gnb_list > li.menu07 > a{background-image: url('/images/header/gnb_menu07.png');}
#gnb .gnb_list > li:hover > a{background-position: center -25px;}
#gnb .gnb_list > li .depth02{margin-top: 32px;padding-top: 10px;}
#gnb .gnb_list > li .depth02 > li{padding: 5px 0;}
#gnb .gnb_list > li .depth02 > li > a{font-size: 14px;color: #fff;text-decoration: none;font-family:'Nanum Gothic';
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
#gnb .gnb_list > li .depth02 > li:hover > a{color: #ffd402;}

/* visual */
#top_visual.main{position: relative;width: 100%;height: 369px;background: url('/images/header/visual_bg.jpg') repeat-x center top;margin-bottom: 14px;overflow: hidden;}
#top_visual.sub{position: relative;width: 100%;height: 263px;background-repeat: repeat-x;background-position: center top;margin-bottom: 14px;overflow: hidden;}
#top_visual.main .layout_center{background: url('/images/header/visual_bg.jpg') no-repeat center top;}
#top_visual .login{position: absolute;left: 0px;bottom: 0px;background: none; cursor: pointer;z-index: 20;}
#top_visual .login span{position:absolute; left:0; bottom:0; right:0; top:0; z-index:1;}
#top_visual .login img{display: block;}
#top_visual .login_rumble {position: absolute;right: 0px;bottom: 15px;background: none;cursor: pointer;z-index: 20;}
#top_visual .login_rumble span {position: absolute;left: 0;bottom: 0;right: 0;top: 0;z-index: 1;}
#top_visual .login_rumble img {display: block;}
.frag_list li{position: absolute;} 
.frag_list li.frag1{left: 87px;top: 88px;}
.frag_list li.frag2{left: 647px;top: 153px;}
.frag_list li.frag3{left: 237px;top: 35px;}
.frag_list li.frag4{left: 295px;top: 75px;}
.frag_list li.frag5{left: 395px;top: 74px;}
.frag_list li.frag6{left: 395px;top: 21px;}
.frag_list li.frag7{left: 490px;top: 91px;}
.frag_list li.frag8{left: 521px;top: 60px;}
.frag_list li.frag9{left: 633px;top: 75px;}
.frag_list li.frag10{left: 21px;top: 149px;}
.frag_list li.frag11{left: 96px;top: 167px;}
.frag_list li.frag12{left: 176px;top: 99px;}
.frag_list li.frag13{left: 219px;top: 207px;}

.digimon_list li{position: absolute;display: none;}
.digimon_list li.digimon1{left: 195px;top: 66px;}
.digimon_list li.digimon2{left: 343px;top: 49px;}
.digimon_list li.digimon3{left: 569px;top: 32px;}

.vg_text{position: absolute;right: 46px;top: 171px;width: 241px;text-align: right;}
.vg_text span{display: none;margin-bottom: 5px;}
.vg_text span.txt01{
	display: inline-block;
	-webkit-animation: txt_right01 1.2s ease-in 0s 1 normal ;
	animation: txt_right01 1.2s ease-in 0s 1 normal ;
}
.vg_text span.txt02{
	display: inline-block;
	-webkit-animation: txt_right02 1.5s ease-in 0s 1 normal ;
	animation: txt_right02 1.5s ease-in 0s 1 normal ;
}


/* ���ϸ��̼� ���� */
@keyframes txt_right01  {
  from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
  0% {opacity: 0; transform: translate3d(-50px, 0, 0);}
  60% {  transform: translate3d(25px, 0, 0); }
  75% { transform: translate3d(-5px, 0, 0); }
  90% { opacity: 1;transform: translate3d(5px, 0, 0); }
  to { transform: none; }
}
@-webkit-keyframes  txt_right01  {
  from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
  0% {opacity: 0; transform: translate3d(-50px, 0, 0);}
  60% {  transform: translate3d(25px, 0, 0); }
  75% { transform: translate3d(-5px, 0, 0); }
  90% { opacity: 1;transform: translate3d(5px, 0, 0); }
  to { transform: none; }   
}
@keyframes txt_right02  {
   from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
  0% {opacity: 0; transform: translate3d(-50px, 0, 0);}
  60% { opacity: 1; transform: translate3d(25px, 0, 0); }
  75% { transform: translate3d(-5px, 0, 0); }
  90% { transform: translate3d(5px, 0, 0); }
  to { transform: none; }
}
@-webkit-keyframes txt_right02  {
   from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
  0% {opacity: 0; transform: translate3d(-50px, 0, 0);}
  60% { opacity: 1; transform: translate3d(25px, 0, 0); }
  75% { transform: translate3d(-5px, 0, 0); }
  90% { transform: translate3d(5px, 0, 0); }
  to { transform: none; }
}


.ani_digimon1{
  animation: dig_ani01 ease-in-out 0.6s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: dig_ani01 ease-in-out 0.6s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: dig_ani01 ease-in-out 0.6s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: dig_ani01 ease-in-out 0.6s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: dig_ani01 ease-in-out 0.6s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes dig_ani01{
  0% { opacity:0.1; transform:  translate(-10px,10px)  scaleX(0.50) scaleY(0.50) ;  }
  50% { opacity:0.55; transform:  translate(25px,-25px)  scaleX(0.75) scaleY(0.75) ;  }
  100% { opacity:1; transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;  }
}

@-moz-keyframes dig_ani01{
  0% { opacity:0.1; transform:  translate(-10px,10px)  scaleX(0.50) scaleY(0.50) ;  }
  50% { opacity:0.55; transform:  translate(25px,-25px)  scaleX(0.75) scaleY(0.75) ;  }
  100% { opacity:1; transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;  }
}

@-webkit-keyframes dig_ani01 {
  0% { opacity:0.1; transform:  translate(-10px,10px)  scaleX(0.50) scaleY(0.50) ;  }
  50% { opacity:0.55; transform:  translate(25px,-25px)  scaleX(0.75) scaleY(0.75) ;  }
  100% { opacity:1; transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;  }
}

@-o-keyframes dig_ani01 {
 0% { opacity:0.1; transform:  translate(-10px,10px)  scaleX(0.50) scaleY(0.50) ;  }
  50% { opacity:0.55; transform:  translate(25px,-25px)  scaleX(0.75) scaleY(0.75) ;  }
  100% { opacity:1; transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;  }
}

@-ms-keyframes dig_ani01 {
  0% { opacity:0.1; transform:  translate(-10px,10px)  scaleX(0.50) scaleY(0.50) ;  }
  50% { opacity:0.55; transform:  translate(25px,-25px)  scaleX(0.75) scaleY(0.75) ;  }
  100% { opacity:1; transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;  }
}


.ani_digimon2{
  animation: dig_ani02 ease-in 0.8s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: dig_ani02 ease-in 0.8s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: dig_ani02 ease-in 0.8s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: dig_ani02 ease-in 0.8s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: dig_ani02 ease-in 0.8s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes dig_ani02{
  0% { opacity:0.3; transform:  translate(20px,20px)  scaleX(0.80) scaleY(0.80) ;  }
  50% { opacity:0.5; transform:  translate(20px,20px)  scaleX(0.86) scaleY(0.86) ;  }
  100% { opacity:1; transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;  }
}

@-moz-keyframes dig_ani02{
  0% { opacity:0.3; transform:  translate(20px,20px)  scaleX(0.80) scaleY(0.80) ;  }
  50% { opacity:0.5; transform:  translate(20px,20px)  scaleX(0.86) scaleY(0.86) ;  }
  100% { opacity:1; transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;  }
}

@-webkit-keyframes dig_ani02 {
  0% { opacity:0.3; transform:  translate(20px,20px)  scaleX(0.80) scaleY(0.80) ;  }
  50% { opacity:0.5; transform:  translate(20px,20px)  scaleX(0.86) scaleY(0.86) ;  }
  100% { opacity:1; transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;  }
}

@-o-keyframes dig_ani02 {
 0% { opacity:0.3; transform:  translate(20px,20px)  scaleX(0.80) scaleY(0.80) ;  }
  50% { opacity:0.5; transform:  translate(20px,20px)  scaleX(0.86) scaleY(0.86) ;  }
  100% { opacity:1; transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;  }
}

@-ms-keyframes dig_ani02 {
  0% { opacity:0.3; transform:  translate(20px,20px)  scaleX(0.80) scaleY(0.80) ;  }
  50% { opacity:0.5; transform:  translate(20px,20px)  scaleX(0.86) scaleY(0.86) ;  }
  100% { opacity:1; transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;  }
}



.ani_digimon3{
  animation: dig_ani03 ease-in 0.9s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: dig_ani03 ease-in 0.9s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: dig_ani03 ease-in 0.9s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: dig_ani03 ease-in 0.9s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: dig_ani03 ease-in 0.9s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}

@keyframes dig_ani03{
  0% { opacity:0.3; transform:  translate(-5px,5px)  scaleX(0.50) scaleY(0.50) ;  }
  33% { opacity:0.4; transform:  translate(15px,-15px)  scaleX(1.05) scaleY(1.05) ;  }
  67% { opacity:0.66; transform:  translate(-3px,3px)  scaleX(1.05) scaleY(1.05) ;  }
  100% { opacity:1; transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;  }
}

@-moz-keyframes dig_ani03{
  0% { opacity:0.3; transform:  translate(-5px,5px)  scaleX(0.50) scaleY(0.50) ;  }
  33% { opacity:0.4; transform:  translate(15px,-15px)  scaleX(1.05) scaleY(1.05) ;  }
  67% { opacity:0.66; transform:  translate(-3px,3px)  scaleX(1.05) scaleY(1.05) ;  }
  100% { opacity:1; transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;  }
}

@-webkit-keyframes dig_ani03 {
  0% { opacity:0.3; transform:  translate(-5px,5px)  scaleX(0.50) scaleY(0.50) ;  }
  33% { opacity:0.4; transform:  translate(15px,-15px)  scaleX(1.05) scaleY(1.05) ;  }
  67% { opacity:0.66; transform:  translate(-3px,3px)  scaleX(1.05) scaleY(1.05) ;  }
  100% { opacity:1; transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;  }
}

@-o-keyframes dig_ani03 {
  0% { opacity:0.3; transform:  translate(-5px,5px)  scaleX(0.50) scaleY(0.50) ;  }
  33% { opacity:0.4; transform:  translate(15px,-15px)  scaleX(1.05) scaleY(1.05) ;  }
  67% { opacity:0.66; transform:  translate(-3px,3px)  scaleX(1.05) scaleY(1.05) ;  }
  100% { opacity:1; transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;  }
}

@-ms-keyframes dig_ani03 {
  0% { opacity:0.3; transform:  translate(-5px,5px)  scaleX(0.50) scaleY(0.50) ;  }
  33% { opacity:0.4; transform:  translate(15px,-15px)  scaleX(1.05) scaleY(1.05) ;  }
  67% { opacity:0.66; transform:  translate(-3px,3px)  scaleX(1.05) scaleY(1.05) ;  }
  100% { opacity:1; transform:  translate(0px,0px)  scaleX(1.00) scaleY(1.00) ;  }
}