@charset "UTF-8";
/* CSS Document */

#top_bg {
		z-index:1000;
		position:absolute;
		top:0;
		left:0;
		margin:0;
		padding:0;
}

#top_linear {
		z-index:995;
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		
		
}

.clearfix {
		clear:both;
}

#link_contents {
		margin-top:155px;
}



/*.link {
		text-decoration:underline;
}*/



#contact {
		/*display:inline;
		position:absolute;*/
		left:300px;
		top:-55px;
		
}

#links {
		/*display:inline;
		position:absolute;*/
		right:-50px;
		top:120px;
		
		
}

#studio {
		/*display:inline;
		position:absolute;*/
		left:-190px;
		top:440px;
		
		
}

#location {
		/*display:inline;
		position:absolute;*/
		right:117px;
		top:475px;
		
		
}

#about {
		/*display:inline;
		position:absolute;*/
		right:-103px;
		top:393px;
		
		
}


.top_menu {
		z-index:3000;
		position:absolute;
}

#wrapper_top {
		min-width:1280px;
		height:800px;
		margin:0 auto;
		
		z-index:1;
		
}

#maincontent {
		/*margin:0 auto;*/
		width:785px;
		height:548px;
		
		z-index:2;
		position:absolute;
		margin:auto;
		padding:0;
		top:0;
		left:0;
		right:0;
		bottom:0;
		
}

.no-cssanimations #center_lines {
		z-index:5;
		margin:0 auto;
		text-align:center;
		background:url(../image/top/menu_line.png) no-repeat;
		width:100%;
		height:100%;
}

.no-cssanimations #mainlogo img {
		border:5px solid #000;
		margin:-5px;
		background-color:#fff;
}

.no-cssanimations #decoration_1 {
		background:url(../image/top/decoration_line1.png) no-repeat;
		width:367.868px;
		height:524.094px;
		opacity:0.7;
}

.no-cssanimations #decoration_2 {
		background:url(../image/top/decoration_line2.png) no-repeat;
		width:558.145px;
		height:437.145px;
		opacity:1;
}

.no-cssanimations #decoration_3 {
		background:url(../image/top/decoration_line3.png) no-repeat;
		width:334.565px;
		height:324.681px;
		opacity:0.7;
}

.no-cssanimations #decoration_4 {
		background:url(../image/top/decoration_line4.png) no-repeat;
		width:179.938px;
		height:590.33px;
		opacity:0.7;
}

.no-cssanimations #decoration_5 {
		background:url(../image/top/decoration_line5.png) no-repeat;
		width:745.385px;
		height:273.465px;
		opacity:0.7;
}

/*.no_svg {
		background:url(../image/top/menu_line.png) no-repeat;
}*/

.path {
  stroke-dasharray: 5000;
  stroke-dashoffset: 5000;
  -webkit-animation: dash 7s ease-out forwards;
  animation: dash 5s ease-out forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count:1;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

.path2 {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  -webkit-animation: dash 12s ease-out forwards;
  animation: dash 9s ease-out forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

#logo {
		position:absolute;
		z-index:2000;
		margin:0 auto;
		left:50%;
		top:50%;
		margin-left:-246.5px;
		margin-top:-62.5px;
		text-align:center;
		float:left;
		
}

.flame {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  -webkit-animation: dash 5s ease-out forwards;
  animation: dash 3s ease-out forwards;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
@-webkit-keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}

#mainlogo {
		z-index:1999;
		position:absolute;
		left:50%;
		top:50%;
		margin-left:-250.5px;
		margin-top:-67.5px;
		display: block;
      opacity: 1;
      animation-duration: 5s;
      animation-name: fade-in;
      -moz-animation-duration: 5s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 5s;
      -webkit-animation-name: fade-in;
    	-webkit-animation-delay: 0s;
  		animation-delay: 0s;
      }

      @keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }
	 @-moz-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }

    @-webkit-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }


#decoration_content {
		margin:0 auto;
		width:100%;
		height:100%;
		/*margin-top:134px;*/
		z-index:1;
		position:absolute;
		left:0px;
		/*top:-140px;*/
	/*	z-index:1999;*/
		display: block;
      opacity: 1;
      animation-duration: 12s;
      animation-name: fade-in;
      -moz-animation-duration: 12s;
      -moz-animation-name: fade-in;
      -webkit-animation-duration: 12s;
      -webkit-animation-name: fade-in;
    	-webkit-animation-delay: 0s;
  		animation-delay: 0s;
}

@keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }
	 @-moz-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }

    @-webkit-keyframes fade-in {
      0% {
        display: none;
        opacity: 0;
      }

      1% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }

#decoration_1 {
		margin:0 auto;
		
		z-index:1;
		position:absolute;
		left:-1%;
		top:-1%;
}

#deco_line1 {
		z-index:5;
		margin:0 auto;
		text-align:center;
}

 /*  .deco_path1 {
	   opacity:0.8;
  stroke-dasharray: 400;
  stroke-dashoffset: 1000;
  -webkit-animation: dash2 7s linear forwards;
  animation: dash2 4s linear forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count:infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  opacity:0.6;

}
@-webkit-keyframes dash2 {
  to {
    stroke-dashoffset: -3000;
  }
}
@keyframes dash2 {
  to {
    stroke-dashoffset: -3000;
  }
}*/

#decoration_2 {
		margin:0 auto;
		
		z-index:1;
		position:absolute;
		left:0px;
		bottom:0;
}

#deco_line2 {
		z-index:5;
		margin:0 auto;
		text-align:center;
}

   .deco_path2 {
	   opacity:0.8;
  stroke-dasharray: 800;
  stroke-dashoffset: 1500;
  -webkit-animation: dash3 7s linear forwards;
  animation: dash3 4s linear forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count:infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;

}
@-webkit-keyframes dash3 {
  to {
    stroke-dashoffset: -3000;
  }
}
@keyframes dash3 {
  to {
    stroke-dashoffset: -3000;
  }
}

#decoration_6 {
		margin:0 auto;
		
		z-index:1;
		position:absolute;
		top:0px;
		left:28%;
}

#deco_line6 {
		z-index:5;
		margin:0 auto;
		text-align:center;
}

.deco_path6 {
	   opacity:0.8;
  stroke-dasharray: 800;
  stroke-dashoffset: 1500;
  -webkit-animation: dash7 7s linear forwards;
  animation: dash7 4s linear forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count:infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;

}
@-webkit-keyframes dash7 {
  to {
    stroke-dashoffset: -3000;
  }
}
@keyframes dash7 {
  to {
    stroke-dashoffset: -3000;
  }
}


#decoration_3 {
		margin:0 auto;
		
		z-index:1;
		position:absolute;
		right:0px;
		top:0;
}

#deco_line3 {
		z-index:5;
		margin:0 auto;
		text-align:center;
}

   .deco_path3 {
	   opacity:0.8;
  stroke-dasharray: 500;
  stroke-dashoffset: 1200;
  -webkit-animation: dash4 10s linear forwards;
  animation: dash4 4s linear forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count:infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;

}
@-webkit-keyframes dash4 {
  to {
    stroke-dashoffset: -5000;
  }
}
@keyframes dash4 {
  to {
    stroke-dashoffset: -5000;
  }
}

#decoration_4 {
		margin:0 auto;
		
		z-index:1;
		position:absolute;
		right:0px;
		top:20%;
}

#deco_line4 {
		z-index:5;
		margin:0 auto;
		text-align:center;
}

   .deco_path4 {
	   opacity:0.8;
  stroke-dasharray: 400;
  stroke-dashoffset: 1000;
  -webkit-animation: dash5 7s linear forwards;
  animation: dash5 4s linear forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count:infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;

}
@-webkit-keyframes dash5 {
  to {
    stroke-dashoffset: -5000;
  }
}
@keyframes dash5 {
  to {
    stroke-dashoffset: -5000;
  }
}

#decoration_5 {
		margin:0 auto;
		
		z-index:1;
		position:absolute;
		right:0px;
		top:70%;
}

#deco_line5 {
		z-index:5;
		margin:0 auto;
		text-align:center;
}

   .deco_path5 {
	   opacity:0.8;
  stroke-dasharray: 800;
  stroke-dashoffset: 1500;
  -webkit-animation: dash6 9s linear forwards;
  animation: dash6 4s linear forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count:infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;

}
@-webkit-keyframes dash6 {
  to {
    stroke-dashoffset: -3000;
  }
}
@keyframes dash6 {
  to {
    stroke-dashoffset: -3000;
  }
}		

#decoration_7 {
		margin:0 auto;
		
		z-index:1;
		position:absolute;
		top:15%;
		left:0;
}

#deco_line7 {
		z-index:5;
		margin:0 auto;
		text-align:center;
}

.deco_path7 {
	   opacity:0.8;
  stroke-dasharray: 800;
  stroke-dashoffset: 1500;
  -webkit-animation: dash8 7s linear forwards;
  animation: dash8 4s linear forwards;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count:infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;

}
@-webkit-keyframes dash8 {
  to {
    stroke-dashoffset: -3000;
  }
}
@keyframes dash8 {
  to {
    stroke-dashoffset: -3000;
  }
}


#topnavi {
		top:0;
		left:0;
		width:100%;
		height:100%;
		position:absolute;
		z-index:2005;
}

#topnavi ul {
		display:inline;
		position:absolute;
		height:100%;
		width:100%;
		z-index:2010;
		
}

#Tnavibar li {
		display:inline;
}

.top_menu {
		margin:15px;
		position:absolute;
		animation-duration: 5s;
      animation-name: fade-in2;
      -moz-animation-duration: 5s;
      -moz-animation-name: fade-in2;
      -webkit-animation-duration: 5s;
      -webkit-animation-name: fade-in2;
    	-webkit-animation-delay: 0s;
  		animation-delay: 0s;
      }

      @keyframes fade-in2 {
      0% {
        display: none;
        opacity: 0;
      }

      50% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }
	 @-moz-keyframes fade-in2 {
      0% {
        display: none;
        opacity: 0;
      }

      50% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
    }

    @-webkit-keyframes fade-in2 {
      0% {
        display: none;
        opacity: 0;
      }

      50% {
        display: block;
        opacity: 0;
      }

      100% {
        display: block;
        opacity: 1;
      }
   
}

.top_menu img {
		vertical-align:middle;
		margin:0;
		padding:0;
}

.top_menu a {
	display:block;
}

/*.top_menu a:link {
		text-decoration:none;
		opacity:1;
}

.top_menu a:visited {
		text-decoration:none;
		opacity:1;
}

.top_menu a:hover img{
		text-decoration:none;
		opacity:1;
		
		transform:rotateY(360deg);
		-webkit-transition: all 2.0s ease;
    -moz-transition: all 6.0s ease;
	-transition: all 2.0s ease;
}

.top_menu a:active img{
		text-decoration:none;
		opacity:1;
		transform:rotateY(360deg);
		-webkit-transition: all 2.0s ease;
    -moz-transition: all 6.0s ease;
	-transition: all 2.0s ease;
}*/


.top_menu_off {
		position:absolute;
		z-index:2011;
		margin-left:5px;
		margin-top:15px;
		
}



.top_menu_off a {
		display:block;
}

/*.top_menu_off a:link {
		text-decoration:none;
		opacity:0;
}

.top_menu_off a:visited {
		text-decoration:none;
		opacity:0;
}

.top_menu_off a:hover {
		text-decoration:none;
		opacity:1;
		
		transform:rotateY(360deg);
		-webkit-transition: all 1.0s ease;
    -moz-transition: all 3.0s ease;
	-transition: all 1.0s ease;
}

.top_menu_off a:active {
		text-decoration:none;
		opacity:1;
		transform:rotateY(360deg);
		-webkit-transition: all 1.0s ease;
    -moz-transition: all 3.0s ease;
	-transition: all 1.0s ease;
}*/

#contact_off {
		/*display:inline;
		position:absolute;*/
		left:310px;
		top:-55px;
		
}

#links_off {
		/*display:inline;
		position:absolute;*/
		right:-35px;
		top:120px;
		
		
}

#studio_off {
		/*display:inline;
		position:absolute;*/
		left:-180px;
		top:440px;
		
		
}

#location_off {
		/*display:inline;
		position:absolute;*/
		right:130px;
		top:475px;
		
		
}

#about_off {
		/*display:inline;
		position:absolute;*/
		right:-89px;
		top:393px;
		
		
}

.top_menu a {
	animation-name:out;
	animation-duration:1.5s;
	/* Safari and Chrome: */
	-webkit-animation-name:out;
	-webkit-animation-duration:1.5s;
}

/* .top_menu a:hover{
animation-name:in;
animation-duration:1.5s;
animation-iteration-count:infinite;
animation-direction:normal;
Safari and Chrome: 
-webkit-animation-name:in;
-webkit-animation-duration:1.5s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
}*/

@keyframes in
{
from {transform: rotateY(0deg);}
to   {transform: rotateY(360deg);}
}
@-webkit-keyframes in /* Safari and Chrome */
{
from {transform: rotateY(0deg);}
to   {-webkit-transform: rotateY(360deg);}
}
@keyframes out
{
from {transform: rotateY(360deg);}
to   {transform: rotateY(0deg);}
}
@-webkit-keyframes out /* Safari and Chrome */
{
from {transform: rotateY(360deg);}
to   {-webkit-transform: rotateY(0deg);}
}

.line-t {
		position:absolute;
		top:-3px;
		width:0px;
		height:2px;
		background:#e9fa1a;
}

.line-b {
		position:absolute;
		bottom:-3px;
		width:2px;
		height:0px;
		background:#e9fa1a;
}

.line-l {
		position:absolute;
		right:0px;
		bottom:-3px;
		width:0px;
		height:2px;
		background:#e9fa1a;
}

.line-r {
		position:absolute;
		right:0px;
		width:2px;
		top:-2px;
		height:0px;
		background:#e9fa1a;
}


.links_top a:hover .line-t {
		width:103px;
		transition:all .3s .3s;
		-webkit-transition:all .3s .3s;
		-moz-transition:all .3s .3s;
		-o-transition:all .3s .3s
}

.links_top a:hover .line-r {
		height:36px;
		transition:all .6s .6s;
		-webkit-transition:all .6s .6s;
		-moz-transition:all .6s .6s;
		-o-transition:all .6s .6s;
}

.links_top a:hover .line-b {
		height:37px;
		/*width:105px;*/
		transition:all .6s .6s;
		-webkit-transition:all .6s .6s;
		-moz-transition:all .6s .6s;
		-o-transition:all .6s .6s;
}

.links_top a:hover .line-l {
		width:103px;
		/*height:37px;*/
		transition:all .3s .3s;
		-webkit-transition:all .3s .3s;
		-moz-transition:all .3s .3s;
		-o-transition:all .3s .3s
}

.about_top a:hover .line-t {
		width:147px;
		transition:all .3s .3s;
		-webkit-transition:all .3s .3s;
		-moz-transition:all .3s .3s;
		-o-transition:all .3s .3s;
		background:#baff09;
}

.about_top a:hover .line-r {
		height:36px;
		transition:all .6s .6s;
		-webkit-transition:all .6s .6s;
		-moz-transition:all .6s .6s;
		-o-transition:all .6s .6s;
		background:#baff09;
}

.about_top a:hover .line-b {
		height:37px;
		/*width:105px;*/
		transition:all .6s .6s;
		-webkit-transition:all .6s .6s;
		-moz-transition:all .6s .6s;
		-o-transition:all .6s .6s;
		background:#baff09;
}

.about_top a:hover .line-l {
		width:147px;
		/*height:37px;*/
		transition:all .3s .3s;
		-webkit-transition:all .3s .3s;
		-moz-transition:all .3s .3s;
		-o-transition:all .3s .3s;
		background:#baff09;
}

.contact_top a:hover .line-t {
		width:197px;
		transition:all .3s .3s;
		-webkit-transition:all .3s .3s;
		-moz-transition:all .3s .3s;
		-o-transition:all .3s .3s;
		background:#ffcc34;
		
}

.contact_top a:hover .line-r {
		height:35px;
		transition:all .6s .6s;
		-webkit-transition:all .6s .6s;
		-moz-transition:all .6s .6s;
		-o-transition:all .6s .6s;
		background:#ffcc34;
}

.contact_top a:hover .line-b {
		height:35px;
		/*width:105px;*/
		transition:all .6s .6s;
		-webkit-transition:all .6s .6s;
		-moz-transition:all .6s .6s;
		-o-transition:all .6s .6s;
		background:#ffcc34;
}

.contact_top a:hover .line-l {
		width:197px;
		/*height:37px;*/
		transition:all .3s .3s;
		-webkit-transition:all .3s .3s;
		-moz-transition:all .3s .3s;
		-o-transition:all .3s .3s;
		background:#ffcc34;
}

.studio_top a:hover .line-t {
		width:157px;
		transition:all .3s .3s;
		-webkit-transition:all .3s .3s;
		-moz-transition:all .3s .3s;
		-o-transition:all .3s .3s;
		background:#fae01f;
}

.studio_top a:hover .line-r {
		height:36px;
		transition:all .6s .6s;
		-webkit-transition:all .6s .6s;
		-moz-transition:all .6s .6s;
		-o-transition:all .6s .6s;
		background:#fae01f;
}

.studio_top a:hover .line-b {
		height:37px;
		/*width:105px;*/
		transition:all .6s .6s;
		-webkit-transition:all .6s .6s;
		-moz-transition:all .6s .6s;
		-o-transition:all .6s .6s;
		background:#fae01f;
}

.studio_top a:hover .line-l {
		width:157px;
		/*height:37px;*/
		transition:all .3s .3s;
		-webkit-transition:all .3s .3s;
		-moz-transition:all .3s .3s;
		-o-transition:all .3s .3s;
		background:#fae01f;
}

.location_top a:hover .line-t {
		width:227px;
		transition:all .3s .3s;
		-webkit-transition:all .3s .3s;
		-moz-transition:all .3s .3s;
		-o-transition:all .3s .3s;
		background:#d4ff12;
}

.location_top a:hover .line-r {
		height:36px;
		transition:all .6s .6s;
		-webkit-transition:all .6s .6s;
		-moz-transition:all .6s .6s;
		-o-transition:all .6s .6s;
		background:#d4ff12;
}

.location_top a:hover .line-b {
		height:37px;
		/*width:105px;*/
		transition:all .6s .6s;
		-webkit-transition:all .6s .6s;
		-moz-transition:all .6s .6s;
		-o-transition:all .6s .6s;
		background:#d4ff12;
}

.location_top a:hover .line-l {
		width:227px;
		/*height:37px;*/
		transition:all .3s .3s;
		-webkit-transition:all .3s .3s;
		-moz-transition:all .3s .3s;
		-o-transition:all .3s .3s;
		background:#d4ff12;
}

@media screen and (max-height: 750px) {
#wrapper_top {
		margin:auto;
		padding:0;
		top:0;
		left:0;
		right:0;
		bottom:0;
	
		position:relative;
}
	
	
	
}