@charset "UTF-8";

.dvd{
	position: absolute;
	bottom:195px;
	left:35px;
}

#op{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#000;
	overflow: hidden;
}
#op .inner{
	position: relative;
	width:100%;
	height:100%;
	max-width: 1400px;
	margin:0 auto;
}
#op ul.op1{
	width:100%;
	height:100%;
	position: absolute;
	top:0;
	left:0;
	display: block;
	-webkit-transform: scale(1,1);
	   -moz-transform: scale(1,1);
	    -ms-transform: scale(1,1);
	     -o-transform: scale(1,1);
	        transform: scale(1,1);
}
#op ul.op2{
	width:100%;
	height:100%;
	position: absolute;
	top:0;
	left:0;
	display: block;
	-webkit-transform: scale(1,1);
	   -moz-transform: scale(1,1);
	    -ms-transform: scale(1,1);
	     -o-transform: scale(1,1);
	        transform: scale(1,1);
}
#op li{
	-webkit-transform: translateZ(0);
	   -moz-transform: translateZ(0);
	    -ms-transform: translateZ(0);
	     -o-transform: translateZ(0);
	        transform: translateZ(0);
	position: absolute;
	opacity: 0;
}
#op li.c1{
	top: 50%;
    left: 40%;
    margin-left: 160px;
    margin-top: -220px;
}
#op li.c2{
	top: 50%;
    right: 17%;
    margin-right: -90px;
    margin-top: -183px;
}
#op li.c3{
	top: 50%;
    left: 28%;
    margin-top: -132px;
    margin-left: -230px;
}
#op li.c4{
	top: 53%;
    right: 25%;
    margin-right: -250px;
    margin-top: 30px;
}
#op li.c5{
	top: 50%;
    right: 36%;
    margin-right: -55px;
    margin-top: 173px;
}
#op li.c6{
	top: 50%;
    left: 21%;
    margin-left: -142px;
    margin-top: 13px;
}
#op li.c7{
	top: 50%;
    left: 20%;
    margin-left: -192px;
    margin-top: -250px;
}
/*#op li.c4{
	top: 50%;
	right: 33%;
    margin-right: -230px;
    margin-top: 10px;
}
#op li.c5{
	top: 50%;
    right: 36%;
    margin-right: -55px;
    margin-top: 173px;
}
#op li.c6{
	top: 50%;
    left: 36%;
    margin-left: -192px;
    margin-top: 37px;
}*/
#op.op .inner ul.op1{
	-webkit-transition: all 10s linear 0s;
	   -moz-transition: all 10s linear 0s;
	    -ms-transition: all 10s linear 0s;
	     -o-transition: all 10s linear 0s;
	        transition: all 10s linear 0s;
	-webkit-transform: scale(.9,.9);
	   -moz-transform: scale(.9,.9);
	    -ms-transform: scale(.9,.9);
	     -o-transform: scale(.9,.9);
	        transform: scale(.9,.9);
}
#op.op .inner ul.op2{
	-webkit-transition: all 10s linear 3.5s;
	   -moz-transition: all 10s linear 3.5s;
	    -ms-transition: all 10s linear 3.5s;
	     -o-transition: all 10s linear 3.5s;
	        transition: all 10s linear 3.5s;
	-webkit-transform: scale(.9,.9);
	   -moz-transform: scale(.9,.9);
	    -ms-transform: scale(.9,.9);
	     -o-transform: scale(.9,.9);
	        transform: scale(.9,.9);
}
#op.hide .inner{
	opacity:0;
	-webkit-transition: all 2s ease-in-out 0s;
	   -moz-transition: all 2s ease-in-out 0s;
	    -ms-transition: all 2s ease-in-out 0s;
	     -o-transition: all 2s ease-in-out 0s;
	        transition: all 2s ease-in-out 0s;
}
#op.op li{

	opacity: 1;
	-webkit-transition: all 1.5s ease-in-out 0s;
	   -moz-transition: all 1.5s ease-in-out 0s;
	    -ms-transition: all 1.5s ease-in-out 0s;
	     -o-transition: all 1.5s ease-in-out 0s;
	        transition: all 1.5s ease-in-out 0s;
}

#op.op li.c7{
	-webkit-transition-delay:.8s;
	-moz-transition-delay:.8s;
	-ms-transition-delay:.8s;
	-o-transition-delay:.8s;
	transition-delay:.8s;
}
#op.op li.c4{
	-webkit-transition-delay:.9s;
	-moz-transition-delay:.9s;
	-ms-transition-delay:.9s;
	-o-transition-delay:.9s;
	transition-delay:.9s;
}
#op.op li.c1{
	-webkit-transition-delay:1s;
	-moz-transition-delay:1s;
	-ms-transition-delay:1s;
	-o-transition-delay:1s;
	transition-delay:1s;
}
#op.op li.c6{
	-webkit-transition-delay:1.1s;
	-moz-transition-delay:1.1s;
	-ms-transition-delay:1.1s;
	-o-transition-delay:1.1s;
	transition-delay:1.1s;
}

#op.op li.c2{
	-webkit-transition-delay:3.5s;
	-moz-transition-delay:3.5s;
	-ms-transition-delay:3.5s;
	-o-transition-delay:3.5s;
	transition-delay:3.5s;
}
#op.op li.c3{
	-webkit-transition-delay:4.5s;
	-moz-transition-delay:4.5s;
	-ms-transition-delay:4.5s;
	-o-transition-delay:4.5s;
	transition-delay:4.5s;
}
#op.op li.c5{
	-webkit-transition-delay:5.5s;
	-moz-transition-delay:5.5s;
	-ms-transition-delay:5.5s;
	-o-transition-delay:5.5s;
	transition-delay:5.5s;
}

#content .shadow{
	position: absolute;
	bottom:0;
	left:0;
	height:409px;
	width:100%;
	background:url(../img/top2/shadow.png) repeat-x;
}
#content .comment{
	position: absolute;
	left:0;
	top:0;
	width:698px;
	height:437px;
	background:url(../img/top3/shadow2.png) no-repeat left top;
}
#content .comment img{
	display: block;
	margin:0 auto;
	opacity: 0;
}
#content .comment img.active{
	opacity: 1;
	-webkit-transition: all .5s ease 0.5s;
	   -moz-transition: all .5s ease 0.5s;
	    -ms-transition: all .5s ease 0.5s;
	     -o-transition: all .5s ease 0.5s;
	        transition: all .5s ease 0.5s;
}

#content .comment div{
	width:380px;
}
#content .comment ul{
	display: block;
	position: relative;
	width: 380px;
    height: 220px;
}
#content .comment ul li{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:0;
	-webkit-transition: all .5s ease-in-out 0s;
	   -moz-transition: all .5s ease-in-out 0s;
	    -ms-transition: all .5s ease-in-out 0s;
	     -o-transition: all .5s ease-in-out 0s;
	        transition: all .5s ease-in-out 0s;
}
#content .comment ul li.active{
	opacity:1;
	-webkit-transition: all .5s ease-in-out .5s;
	   -moz-transition: all .5s ease-in-out .5s;
	    -ms-transition: all .5s ease-in-out .5s;
	     -o-transition: all .5s ease-in-out .5s;
	        transition: all .5s ease-in-out .5s;
}
#content .comment ul li.c1{
	background:url(../img/top3/ct7.png) no-repeat center center;
}
#content .comment ul li.c2{
	background:url(../img/top3/ct8.png) no-repeat center center;
}
#content .comment ul li.c3{
	background:url(../img/top3/ct9.png) no-repeat center center;
}
#content .comment ul li.c4{
	background:url(../img/top3/ct1.png) no-repeat center center;
}
#content .comment ul li.c5{
	background:url(../img/top3/ct2.png) no-repeat center center;
}
#content .comment ul li.c6{
	background:url(../img/top3/ct3.png) no-repeat center center;
}
#content .comment ul li.c7{
	background:url(../img/top3/ct4.png) no-repeat center center;
}
#content .comment ul li.c8{
	background:url(../img/top3/ct5.png) no-repeat center center;
}
#content .comment ul li.c9{
	background:url(../img/top3/ct6.png) no-repeat center center;
}
#content .comment ul li.c10{
	background:url(../img/top3/ct10.png) no-repeat center center;
}
#content .comment a{
	display: block;
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}
#content .comment a:hover{
	opacity: 0.6;
}

#bl{
	position: absolute;
	bottom:10px;
	left:20px;
	width:100%;
}
#copy2{
	display: block;
	/*float: left;*/
	padding:2px 20px 2px 0;
	/*border-right:1px solid #fff;*/
	margin-right:20px;
	margin-bottom:12px;
}
#copy2 img{
	display: block;
}
#biling{
	width:348px;
	height:78px;
	margin-bottom:12px;
	background:url(../img/top2/biling.png) no-repeat center center;
	background-size:contain;
	overflow: hidden;
}
#biling *{
	text-indent: -9999px;
}

#copy{
	/*position: absolute;
    top: 10%;
    left: 0;
    margin: 0px;
	max-width:246px;*/
	display: block;
	position: relative;
	width:100%;
	height:100%;
	background:url(../img/top2/copy4.png) no-repeat left top;
	background-size:contain;
}
#copy img{
	max-width:100%;
	/*height:35px;*/
}
#bg{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:url(../img/top2/v2.jpg) no-repeat center center #000;
	background-size:cover;
}
#side{
	/*border-right:0px solid #eee;*/

}

#full-credit {
	background:rgba(0,0,0,.9);
	display:none;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
#full-credit div{
	transform:translate(-50%,-50%);
	position:absolute;
	left:50%;
	top:50%;
	width:100%;
}

#full-credit img{
	display:block;
	margin:0 auto;
}
#full-credit img:first-child{
	margin-bottom:42px;
}


#wrapper .scroll{
	position: absolute;
	bottom:0;
	left:50%;
	margin-left:-50px;
	display: block;
	width:100px;
	height:50px;
	background:url(../img/top2/scroll-txt.png) no-repeat center 10px rgba(0,0,0,0.5);
	-webkit-transition: all .25s ease;
	   -moz-transition: all .25s ease;
	    -ms-transition: all .25s ease;
	     -o-transition: all .25s ease;
	        transition: all .25s ease;
}

#wrapper .scroll:hover{
	background-color:rgba(0,0,0,0.8);
	height: 55px;
}
#wrapper .scroll-inner{
	position: relative;
	width: 100%;
	height: 100%;
}
.scroll-inner img{
	position: absolute;
	bottom:10px;
	left:50%;
	margin-left:-11px;
			    animation: updown .5s ease-in-out 0s infinite alternate;
	     -o-animation: updown .5s ease-in-out 0s infinite alternate;
	    -ms-animation: updown .5s ease-in-out 0s infinite alternate;
	   -moz-animation: updown .5s ease-in-out 0s infinite alternate;
	-webkit-animation: updown .5s ease-in-out 0s infinite alternate;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
@-webkit-keyframes updown {
	0%{ -webkit-transform: translate(0px,-2px); }
	100%{ -webkit-transform: translate(0px,3px); }
}
@-moz-keyframes updown {
	0%{ -moz-transform: translate(0px,-2px); }
	100%{ -moz-transform: translate(0px,3px); }
}
@-ms-keyframes updown {
	0%{ -ms-transform: translate(0px,-2px); }
	100%{ -ms-transform: translate(0px,3px); }
}
@-o-keyframes updown {
	0%{ -o-transform: translate(0px,-2px); }
	100%{ -o-transform: translate(0px,3px); }
}
@keyframes updown {
	0%{ transform: translate(0px,-2px); }
	100%{ transform: translate(0px,3px); }
}
#wrapper .banners{
	position: absolute;
	bottom:8px;
	right:10px;
	width:504px;
	text-align: right;
}
#wrapper .banners li{
	display: inline-block;
	
	line-height: 0;
	padding-top:3px;
	width:32%;
}
#wrapper .banners li a{
	display: block;
}
#wrapper .banners img{
	display: block;
	height: 50px;
}
body.active #bg{
	     -o-animation: show2 8s ease-out 0s ;
	    -ms-animation: show2 8s ease-out 0s ;
	   -moz-animation: show2 8s ease-out 0s ;
	-webkit-animation: show2 8s ease-out 0s ;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}

body.active #copy{
	     -o-animation: show 2.5s ease 1.5s ;
	    -ms-animation: show 2.5s ease 1.5s ;
	   -moz-animation: show 2.5s ease 1.5s ;
	-webkit-animation: show 2.5s ease 1.5s ;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}
body.active #bl,
body.active .dvd{
	     -o-animation: show 2.5s ease 3.5s ;
	    -ms-animation: show 2.5s ease 3.5s ;
	   -moz-animation: show 2.5s ease 3.5s ;
	-webkit-animation: show 2.5s ease 3.5s ;
	-webkit-animation-fill-mode:both;
	animation-fill-mode:both;
}

@-webkit-keyframes show {
	0%{ opacity:0;}
	100%{ opacity:1;}
}
@-moz-keyframes show {
	0%{ opacity:0;}
	100%{ opacity:1;}
}
@-ms-keyframes show {
	0%{ opacity:0;}
	100%{ opacity:1;}
}
@-o-keyframes show {
	0%{ opacity:0;}
	100%{ opacity:1;}
}
@keyframes show {
	0%{ opacity:0;}
	100%{ opacity:1;}
}


@-webkit-keyframes show2 {
	0%{ -webkit-transform: scale3D(1.1,1.1,1);}
	100%{ -webkit-transform: scale3D(1,1,1);}
}
@-moz-keyframes show2 {
	0%{ -moz-transform: scale3D(1.1,1.1,1);}
	100%{ -moz-transform: scale3D(1,1,1);}
}
@-ms-keyframes show2 {
	0%{ -ms-transform: scale3D(1.1,1.1,1);}
	100%{ -ms-transform: scale3D(1,1,1);}
}
@-o-keyframes show2 {
	0%{ -o-transform: scale3D(1.1,1.1,1);}
	100%{ -o-transform: scale3D(1,1,1);}
}
@keyframes show2 {
	0%{ transform: scale3D(1.1,1.1,1);}
	100%{ transform: scale3D(1,1,1);}
}