@charset "utf-8";
@import url("base.css");

/*----------------------------------
	common 
----------------------------------*/
body { color: #333; }

/*----------------------------------
	layout elements
----------------------------------*/
#wrap, #header, #container, #contents, #frame, #main { display: block; position: relative;}

#wrap { width: auto; background: url("../img/dq123/share/bg.jpg") no-repeat top center #000; text-align: center;}
#container { width: 960px; margin: 0 auto; padding: 0 0 0; background: url("../img/dq123/share/bg.jpg") no-repeat top ; text-align: center;}
#header { width: 960px; padding: 20px 0 0;}
#contents { width: auto; padding: 12px 0 0;}

/*----------------------------------
	#gNav 
----------------------------------*/
#gNav { display: block; height: 156px; background: url("../img/dq123/share/gNav_bg.png") no-repeat 124px 25px; position: relative; }

#gNav li { display: block; text-indent: -999em; }
#gNav li a { display: block; height: 70px; }

#gNav li.nav00, #gNav li.nav00 a { height: 156px;}
#gNav li.nav01 { display: block; width: 127px; height: 70px; background: url("../img/dq123/share/gNav_01.png") no-repeat;}
#gNav li.nav02 { display: block; width: 127px; height: 70px; background: url("../img/dq123/share/gNav_02.png") no-repeat;}
#gNav li.nav04 { display: block; width: 127px; height: 70px; background: url("../img/dq123/share/gNav_04.png") no-repeat;}
#gNav li.nav03 { display: block; width: 180px; height: 156px; background: url("../img/dq123/share/gNav_03.png") no-repeat;}

#gNav li.nav00 a{ width: 180px; background: url("../img/dq123/share/gNav_00.png") no-repeat left;}
#gNav li.nav01 a{ width: 127px; background: url("../img/dq123/share/gNav_01.png") no-repeat top;}
#gNav li.nav02 a{ width: 127px; background: url("../img/dq123/share/gNav_02.png") no-repeat top;}
#gNav li.nav04 a{ width: 127px; background: url("../img/dq123/share/gNav_04.png") no-repeat top;}
#gNav li.nav03 a{ width: 180px; background: url("../img/dq123/share/gNav_03.png") no-repeat left;}

#gNav li.nav00 a:hover{ background-position: right;}
#gNav li.nav01 a:hover{ background-position: bottom;}
#gNav li.nav02 a:hover{ background-position: bottom;}
#gNav li.nav04 a:hover{ background-position: bottom;}

/*----------------------------------
	bnrRelated
----------------------------------*/
.bnrRelated dl { clear: both; display: block; padding: 20px 0 20px; }
.bnrRelated dt{ display: none; }
.bnrRelated dd{ display: inline; width: 180px; height: 60px; margin: 0 3px; }
.bnrRelated dd img{ width: 180px; height: 60px;}

/*----------------------------------
	#pageEnd
----------------------------------*/
#pageEnd { display: none; }
#footer .note{ display: block; float: left; width: 520px; margin-left: 2em; text-align: left; color: #fff; text-indent: -1em; }
#footer .copy{ display: block; float: right; width: 405px; height: 73px;background: url("../img/dq123/share/copy.gif") no-repeat; text-indent: -999em; }

/*----------------------------------
	home
----------------------------------*/
#wrap.home .logo h1 { display: none; }
#wrap.home #frame { width: 960px; height: 820px; margin: 0 0 10px; background: url("../img/dq123/home/main.jpg") no-repeat center top ; text-indent: -999em;}

#wrap.home #gNav { width: 704px; position: absolute; top: 418px; left: 130px; }
#wrap.home #gNav li.nav00 { position: absolute; top: 0; right: 0;}
#wrap.home #gNav li.nav01 { position: absolute; top: 57px; left: 115px;}
#wrap.home #gNav li.nav02 { position: absolute; top: 57px; left: 249px;}
#wrap.home #gNav li.nav04 { position: absolute; top: 57px; left: 383px;}
#wrap.home #gNav li.nav03 { position: absolute; top: 16PX; left: 2px;}

#wrap.home .info,
#wrap.home h2,
#wrap.home h3,
#wrap.home #frame .note { display: none; }

/*----------------------------------
	games
----------------------------------*/
#wrap.games .logo { display: block; float: left; width: 382px; height: 158px; background:url("../img/dq123/games/logo.png") no-repeat; text-indent: -999em; }
#wrap.games .logo a{ display: block; width: 382px; height: 158px;}

/*　games gNav　*/
#wrap.games #gNav { display: block; float: right; width: 565px; background-position: 5px 30px;}
#wrap.games #gNav li.nav00 { position: absolute; top: 0; left: 398px;}
#wrap.games #gNav li.nav01 { position: absolute; top: 70px; left: -5px;}
#wrap.games #gNav li.nav02 { position: absolute; top: 70px; left: 129px;}
#wrap.games #gNav li.nav04 { position: absolute; top: 70px; left: 263px;}

#wrap.games #gNav li.nav01 a { background-position: bottom;}

/*　games contents　*/
#wrap.games #contents { margin: 0 0 10px; }
#wrap.games #frame { float: right; width: 765px; height: 530px;background: url("../img/dq123/games/main.jpg") no-repeat center top ; text-align: left;}
#wrap.games #main { width: 690px; height: 458px; position: absolute; top: 40px; left: 36px; overflow: auto; }

/*　games subNav　*/
#wrap.games #subNav { float: left; width: 195px; height: 530px; padding: 0; background: url("../img/dq123/games/subNav.png") no-repeat; position: relative;}

#wrap.games #subNav dl { display: block; width: 175px; height: 530px; position: absolute; top: 53px; left: 0; }
#wrap.games #subNav dd.nav00 a { background:url("../img/dq123/games/subNav_00.png") no-repeat; }
#wrap.games #subNav dd.nav01 a { background:url("../img/dq123/games/subNav_01.png") no-repeat; }
#wrap.games #subNav dd.nav02 a { background:url("../img/dq123/games/subNav_02.png") no-repeat; }
#wrap.games #subNav dd.nav03 a { background:url("../img/dq123/games/subNav_03.png") no-repeat; }
#wrap.games #subNav dd.nav04 a { background:url("../img/dq123/games/subNav_04.png") no-repeat; }
#wrap.games #subNav dd.nav05 a { background:url("../img/dq123/games/subNav_05.png") no-repeat; }

#wrap.games #subNav dd { display: block; width: 154px; margin: 0 0 15px 20px; text-indent: -999em; }
#wrap.games #subNav dd a { display: block; width: 154px; height: 54px; }
#wrap.games #subNav dd a:hover { display: block; background-image: none;}
#wrap.games #subNav dd.nav06 { margin-bottom: 0;}

#wrap.games #subNav dd.nav06 a { width: 102px; height: 16px; margin: 0 auto; background:url("../img/dq123/games/subNav_06.png") no-repeat; }
#wrap.games #subNav dd.nav06 a:hover { background-position: bottom ; }

/*　games subNav current　*/
#contents.games00 #subNav dd.nav00 a { background-image: none;}
#contents.games01 #subNav dd.nav01 a { background-image: none; }
#contents.games02 #subNav dd.nav02 a { background-image: none; }
#contents.games03 #subNav dd.nav03 a { background-image: none; }
#contents.games04 #subNav dd.nav04 a { background-image: none; }
#contents.games05 #subNav dd.nav05 a { background-image: none; }

/*　games frame　*/
#contents.games00 #frame { background: url("../img/dq123/games/00/main.jpg") no-repeat; }
#contents.games01 #frame { background: url("../img/dq123/games/01/main.jpg") no-repeat; }
#contents.games02 #frame { background: url("../img/dq123/games/02/main.jpg") no-repeat; }
#contents.games03 #frame { background: url("../img/dq123/games/03/main.jpg") no-repeat; }
#contents.games04 #frame { background: url("../img/dq123/games/04/main.jpg") no-repeat; }
#contents.games05 #frame { background: url("../img/dq123/games/05/main.jpg") no-repeat; }

#wrap.games #frame h2 { display: none; }
#wrap.games #frame p { display: none; }

/*　games00　*/
#contents.games00 #main p{ display: block; visibility: hidden; height: 150px; margin: 20px 0 10px;}
#contents.games00 #main dl{ width: 100%; height: 240px; background:url("../img/dq123/games/00/main_01.jpg") no-repeat center; position: relative;}
#contents.games00 #main dt{ display: none; }
#contents.games00 #main dd a { display: block; width: 120px; height: 140px; position: absolute; text-indent: -999em;}
#contents.games00 #main dd.nav01 a { bottom: 0; left: 5px;}
#contents.games00 #main dd.nav02 a { bottom: 0; left: 153px }
#contents.games00 #main dd.nav03 a { bottom: 0; left: 300px }
#contents.games00 #main dd.nav04 a { height: 225px; bottom: 0; left: 440px }
#contents.games00 #main dd.nav05 a { height: 225px;bottom: 0; left: 560px }

/*----------------------------------
	special
----------------------------------*/
#wrap.special .logo { display: block; float: left; width: 382px; height: 158px; background:url("../img/dq123/special/logo.png") no-repeat; text-indent: -999em; }
#wrap.special .logo a{ display: block; width: 382px; height: 158px;}

/*　special gNav　*/
#wrap.special #gNav { display: block; float: right; width: 565px; background-position: 5px 30px;}
#wrap.special #gNav li.nav00 { position: absolute; top: 0; left: 398px;}
#wrap.special #gNav li.nav01 { position: absolute; top: 70px; left: -5px;}
#wrap.special #gNav li.nav02 { position: absolute; top: 70px; left: 129px;}
#wrap.special #gNav li.nav04 { position: absolute; top: 70px; left: 263px;}

#wrap.special #gNav li.nav02 a { background-position: bottom;}

/*　special contents　*/
#wrap.special #contents { margin: 0 0 10px; background: url("../img/dq123/special/side-mon.png") no-repeat scroll -5px 6px; text-align: left;}
#wrap.special #frame { float: right; width: 765px; height: 1076px;background: url("../img/dq123/special/main.jpg") no-repeat center top ; text-align: left;}

/*　special frame　*/
#wrap.special #frame h2 { display: none; }
#wrap.special #frame p { display: none; }



#pageend 
a.pageTop { display: block; width: 130px; height: 25px; background: url("../img/share/btn_pageTop.png") no-repeat top ; text-indent: -999em; position: absolute; top:1013px; right: 52px;}
a.pageTop:hover { background: url("../img/share/btn_pageTop.png") no-repeat bottom ; }


/*----------------------------------
	movie
----------------------------------*/
#wrap.movie .logo { display: block; float: left; width: 382px; height: 158px; background:url("../img/dq123/special/logo.png") no-repeat; text-indent: -999em; }
#wrap.movie .logo a{ display: block; width: 382px; height: 158px;}

/*　movie gNav　*/
#wrap.movie #gNav { display: block; float: right; width: 565px; background-position: 5px 30px;}
#wrap.movie #gNav li.nav00 { position: absolute; top: 0; left: 398px;}
#wrap.movie #gNav li.nav01 { position: absolute; top: 70px; left: -5px;}
#wrap.movie #gNav li.nav02 { position: absolute; top: 70px; left: 129px;}
#wrap.movie #gNav li.nav04 { position: absolute; top: 70px; left: 263px;}

#wrap.movie #gNav li.nav04 a { background-position: bottom;}

/*　movie contents　*/
#wrap.movie #contents { margin: 0 auto 10px; background: url("../img/dq123/movie/side-mon.png") no-repeat scroll 0px 12px; text-align: left;}
#wrap.movie #frame_movie {
position: relative;
float: right;
background: url("../img/dq123/movie/frame_side.jpg") repeat-y center;
text-align: left;
width: 765px;
}

*:first-child+html .movie_frame_bottom{
	margin-bottom: -5px;
}


#wrap.movie #frame_movie .movie_box{
	position: relative;
	width: 685px;
	margin: 15px auto 20px;
}

/* IE7用*/
*:first-child+html #wrap.movie #frame_movie .movie_box{
	margin-bottom: -5px!important;
}
/* IE7用*/


#wrap.movie #frame_movie .movie_box:after{
	content: "."; 
    display: block; 
    height: 0; 
    font-size:0;	
    clear: both; 
    visibility:hidden
}

#wrap.movie #frame_movie .movie_box h2{
	margin: 0px 0px 23px;
}

#wrap.movie #frame_movie .movie_box img.main{
	float: left;
	margin: 0px 38px 0px;
}

#wrap.movie #frame_movie .movie_box img.delivery_end{
	position: absolute;
	top: 74px;
	left: 38px;
}



#wrap.movie #frame_movie .movie_button{ float: left;}


#wrap.movie #frame_movie .movie_box img.player{margin: 10px 0px 0px;}
#wrap.movie #frame_movie .movie_box ul{margin: 6px 0px;}
#wrap.movie #frame_movie .movie_box li a{
	display: block;
	width: 218px;
	height: 28px;
	margin-bottom: 4px;
	text-indent: -9999px;
	overflow: hidden;
}

#wrap.movie #frame_movie .movie_box li a.large{background: url(../img/dq123/movie/button_large.jpg) no-repeat center top;}
#wrap.movie #frame_movie .movie_box li a.small{background: url(../img/dq123/movie/button_small.jpg) no-repeat center top;}
#wrap.movie #frame_movie .movie_box li a.small02{background: url(../img/dq123/movie/button_small02.jpg) no-repeat center top;}

#wrap.movie #frame_movie .movie_box li a:hover{ background-position:center bottom;}


#wrap.movie #frame_movie .flash_note{
	position: absolute;
	margin: 4px 0 0 61px;
}

.flash_note a{
	color: #333333;
}


#pageend_movie a.pageTop {
display: block;
width: 130px;
height: 25px;
margin: 0 42px 13px auto;
background: url("../img/share/btn_pageTop.png") no-repeat top ;
text-indent: -999em;
}
#pageend_movie a.pageTop:hover { background: url("../img/share/btn_pageTop.png") no-repeat bottom ; }




.how_to_save{
	position: absolute;
	z-index: 1000;
	top: 563px;
	left: 245px;
	letter-spacing: -1px;
}


.how_to_save a{
	color: #003399;
}