html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,table,img,label,abbr,object{margin:0;padding:0;background:transparent;border:0;outline:0;}
html{-webkit-text-size-adjust:none;}
object{line-height:1%}
a{hide-focus:expression(this.hideFocus=true); outline:none;text-decoration: none;}
a:focus{-moz-outline-style:none;}
a:hover{ text-decoration:none !important;}
body{font:12px/1.5 Microsoft YaHei,tahoma,arial; background:#000; color:#fff; }
html,body{ height:100%;}
.pr{position:relative;z-index:0;}
em{font-style:normal;}
img{vertical-align:top;border:0;}
.clearfix{display:block}
.clearfix:after{content:".";display:block;height:0;visibility:hidden;clear:both}
.clearfix{zoom:1}
.l{float:left}
.r{float:right}
.none{ display:none;}
.active{ display:block;}
.loading{ width:100%; height:100%; _height:1200px; overflow:hidden; background:#000; position:fixed;_position:absolute; top:0px; left:0px; _top:expression(documentElement.scrollTop+0+"px");z-index:20; filter:Alpha(Opacity=100); opacity:1; }
.loading span{ width:113px; height:76px; line-height:25px; padding-top:37px; text-align:center; font-size:20px; position:absolute; top:45%; left:45%; background:url(../images/loading.jpg) no-repeat; color:#8299a7; display:block;}
.loading span b{ display:block; font-weight:normal;}
.videobg{ width:100%; height:100%; position:absolute; left:0; top:0; overflow:hidden;}
#bgvideo{background:transparent; display:block; width:auto; height:auto; min-height:100%; min-width:100%;}
#container{ height:100%; left:0; position:relative; top:0; width:100%;}
.section{ height:100%; width:100%; display:none;}
.cover{ background-position:center top; background-repeat:no-repeat; background-size:cover;}
.contain{ background-position:center bottom; background-repeat:no-repeat; background-size:contain;}
#delia{ background-image:url(../images/bg_delia.jpg); height:100%; position:absolute; width:100%; z-index:4;}
.mark{ background:url(../images/mark.png) repeat-y; height:100%; left:0; position:absolute; top:0; width:100%; z-index:2;}
#delia .center{ height:600px; left:50%; margin-left:-500px; position:absolute; top:10%; width:970px; z-index:3;}
#delia .flashbox{ height:100%; left:0; margin:0 auto; position:absolute; top:0; width:100%; z-index:1;}
#delia .solgan{ background:url(../images/solgan.png) no-repeat; height:424px; width:970px;}
#delia .solgan p{ text-indent:-9999px;}
#delia .delia_nav{ height:200px; left:57px; position:relative; width:690px;}
#delia .delia_nav a{ background:url(../images/delia_nav_01.png) no-repeat; color:#57c9ff; display:inline-block; font-size:14px; height:81px; padding-top:35px; position:absolute; text-align:center; width:135px;}
#delia .delia_nav a span{ display:block;}
#delia .delia_nav a:hover{ color:#fff;}
#delia .delia_nav .story{ left:0; top:52px;}
#delia .delia_nav .picture{ left:110px; top:0;}
#delia .delia_nav .video{ left:220px; top:52px;}
#delia .delia_nav .artwork{ left:330px; top:0;}
#delia .delia_nav .skill{ left:440px; top:52px;}
#delia .delia_nav .cos{ left:550px; top:0;}
#delia .delia_nav .story:hover{ background:url(../images/delia_nav_02.png) no-repeat;}
#delia .delia_nav .picture:hover{ background:url(../images/delia_nav_03.png) no-repeat;}
#delia .delia_nav .video:hover{ background:url(../images/delia_nav_04.png) no-repeat;}
#delia .delia_nav .skill:hover{ background:url(../images/delia_nav_05.png) no-repeat;}
#delia .delia_nav .artwork:hover{ background:url(../images/delia_nav_06.png) no-repeat;}
#delia .delia_nav .cos:hover{ background:url(../images/delia_nav_07.png) no-repeat;}
#story{ background-image:url(../images/bg_story.jpg);}
#picture{ background-image:url(../images/bg_picture.jpg);}
#video{ background-image:url(../images/bg_video.jpg);}
#skill{ background-image:url(../images/bg_skill.jpg);}
#artwork{ background-image:url(../images/bg_artwork.jpg);}
#cos{ background-image:url(../images/bg_cos.jpg);}
.page .center{ height:650px; left:50%; margin-left:-500px; position:absolute; top:13%; width:997px; z-index:3;}
.page .center h2{ font-size:46px; font-weight:normal; text-align:center;}
.page .center h2 span{ display:block; font-family:Georgia; font-size:16px; letter-spacing:1px; margin-top:-5px;}
#picture .showpic{ height:548px; margin:18px auto 0; position:relative; width:956px;}
#picture .showpic .showbox{ height:548px; margin:0 auto; overflow:hidden; position:relative; width:858px; z-index:1;}
#picture .showpic .showbox .show{ height:548px; width:20000px; left:0; position:absolute; top:0;}
#picture .showpic .pic{ float:left; height:548px; position:relative; width:858px;}
#picture .showpic .pic .img{ border:2px solid #57c9ff; height:544px; left:0; position:absolute; top:0; width:436px;}
#picture .showpic .pic .img span{ display:none; left:0; position:absolute; top:0;}
#picture .showpic .pic .btn{ left:444px; position:absolute; top:0; width:418px;}
#picture .showpic .pic .btn li{ float:left; height:272px; list-style-type:none; margin:0 4px 4px 0; position:relative; width:205px;}
#picture .showpic .pic .btn li .cover{ background:#000 none repeat; cursor:pointer; display:block; height:272px; left:0; opacity:0.5; filter:Alpha(Opacity=50); position:absolute; top:0; width:205px; z-index:2;}
#picture .showpic .pic .btn li.on .cover, #picture .showpic .pic .btn li:hover .cover{ background:none repeat; border:2px solid #57c9ff; height:268px; opacity:1; filter:Alpha(Opacity=100); width:201px;}
.btn_Left,.btn_Right{ background:url(../images/bg_arr.jpg) no-repeat; cursor:pointer; display:block; height:29px; position:absolute; text-indent:-9999px; top:47%; width:49px;}
#picture .showpic .btn_Left{ background-position:0 0; display:none; left:0; z-index:2;}
#picture .showpic .btn_Right{ background-position:-49px 0; right:0; z-index:2;}
#video .video{ height:555px; margin:25px auto 0; position:relative; width:850px;}
#video .video .vd{ border:2px solid #57c9ff; cursor:pointer; height:226px; width:411px; float:left; margin:5px;}

#story .center{ left:0; margin-left:0; width:100%;}
#story .story{ background:#000 none repeat; display:inline-block; height:470px; margin-top:20px; width:100%;}
#story .story .storybox{ height:400px; margin:70px auto 0; position:relative; width:956px;}
#story .story .txt{ background:#000 none repeat; display:none; height:400px; left:0; position:absolute; top:0;}
#story .story .img{ margin-right:25px; width:532px;}
#story .story p{ float:left; letter-spacing:1px; margin-bottom:10px; text-indent:25px; width:390px;}
#story .story strong{ float:left; letter-spacing:1px; margin-bottom:10px; width:380px;}
#story .story .btn_Left, #story .story .btn_Right{ top:371px;}
#story .story .btn_Left{ background-position:0 0; display:none; right:49px;}
#story .story .btn_Right{ background-position:-49px 0; right:0;}
.movepic .showpic{ height:570px; margin:18px auto 0; position:relative; width:707px;}
.movepic .showpic .showbox{ background:#19323e; height:570px; margin:0 auto; overflow:hidden; position:relative; width:626px;}
.movepic .showpic .showbox .show{ height:570px; left:0; position:absolute; top:0; width:20000px;}
.movepic .showpic .showbox .show .pic{ float:left; height:570px; width:626px;}
.movepic .showpic .showbox .show span{ display:table-cell; height:570px; text-align:center; vertical-align:middle; width:626px; *display:block; *font-size:500px; *font-family:Arial;}
.movepic .showpic .showbox .show .pic img{ vertical-align:middle;}
.movepic .showpic .btn_Left{background-position:0 0; left:0; display:none;}
.movepic .showpic .btn_Right{background-position:-49px 0; right:0;}

#skill .showpic{ height:458px; width:802px; margin:18px auto 0; position:relative; }
#skill .showpic .showbox{ background:#19323e; height:452px; margin:0 auto; overflow:hidden; position:relative; width:728px; border:3px solid #57c9ff;}
#skill .showpic .showbox .show{ height:452px; left:0; position:absolute; top:0; width:20000px; }
#skill .showpic .showbox .show .pic{ float:left; height:452px; width:728px; position:relative;}
#skill .showpic .showbox .show .pic div{ width:100%; height:55px; padding-top:15px; position:absolute; left:0; bottom:0; background:#000; line-height:22px; opacity:0.8; filter:Alpha(Opacity=80);}
#skill .showpic .showbox .show .pic div h3{ width:200px; font-size:18px; color:#57c9ff; float:left; padding-left:60px; }
#skill .showpic .showbox .show .pic div h3 span{ display:block;}
#skill .showpic .showbox .show .pic div p{ width:440px; float:left; font-size:13px; font-family:"Trebuchet MS";}
#skill .showpic .btn_Left{background-position:0 0; left:0; display:none;}
#skill .showpic .btn_Right{background-position:-49px 0; right:0;}
#cos .cosvd{ cursor:pointer;}
.frame div{ position:absolute; z-index:10;}
.frame_left{ border-left:1px dashed #253e4c; bottom:50px; left:50px; top:50px; width:0;}
.frame_right{ border-left:1px dashed #253e4c; bottom:50px; right:50px; top:50px; width:0;}
.frame_top{ border-top:1px dashed #253e4c; height:0; left:50px; right:50px; top:50px;}
.frame_bottom{ border-top:1px dashed #253e4c; bottom:50px; height:0; left:50px; right:50px;}
.nav{ height:600px; left:95px; position:absolute; top:100px; width:131px; z-index:10;}
.nav #obindex{ background:url(../images/logo.png) no-repeat; display:block; height:110px; text-indent:-9999px; width:131px;}
.nav .navlist{ height:480px; margin:70px auto 0; position:relative; width:42px;}
.nav .navlist li{ list-style-type:none;}
.nav .navlist .indexdown{ left:7px; position:absolute; top:150px; z-index:2;}
.nav .navlist .index,.nav .navlist .down{ background:url(../images/nav_bg.png) no-repeat; color:#7e7d7c; display:block; height:22px; line-height:20px; padding-top:22px; text-align:center; width:27px;}
.nav .navlist .index{ background-position:0 0; margin-bottom:30px;}
.nav .navlist .down{ background-position:0 -42px;}
.nav .navlist .line{ border-left:1px solid #353434; height:417px; left:50%; margin-left:-1px; position:absolute; top:0; width:0; z-index:1;}
.nav .navlist .index:hover{ background-position:0 -86px; color:#57c9ff;}
.nav .navlist .down:hover{ background-position:0 -128px; color:#57c9ff;}
.nav .navlist .navitem{ left:0; position:absolute; top:85px; z-index:3;}
.nav .navlist .navitem ul li{ height:60px; position:relative; width:42px; float:left;}
.nav .navlist .navitem ul li a{ background:#898989 none repeat; border-radius:16px; color:#fff; float:left; font-family:Georgia; font-size:14px; font-weight:bold; height:32px; line-height:32px; margin:5px; text-align:center; width:32px; overflow:hidden;}
.nav .navlist .navitem ul li a:hover,.nav .navlist .navitem ul li.on a,.nav .navlist .navitem ul li.hover a{ background:#57c9ff none repeat; border-radius:21px; color:#000; font-size:18px; height:32px; margin:0; padding:5px; width:32px;}
.nav .navlist .navitem ul li span{ color:#fff; font-size:14px; font-weight:normal; height:32px; left:-76px; line-height:32px; position:absolute; text-align:left; top:5px; width:78px;}
.nav .navlist .navitem ul li.last a{ background:#898989 url(../images/index.png) no-repeat scroll left top;}
.nav .navlist .navitem ul li.last a:hover{ background:#57c9ff url(../images/index1.png) no-repeat scroll 5px center;}
.nav .navlist .navitem ul li.last em{ color:#fff; font-size:14px; height:32px; left:0; position:absolute; text-align:center; top:45px; width:42px;}
.footer{ background:#000; width:100%; height:130px; position:absolute; left:0; top:0;}


.delia_nav a{ opacity:0; transform:translate(0px, 100px); -moz-transform:translate(0px, 100px); -ms-transform:translate(0px, 100px); -o-transform:translate(0px, 100px); -webkit-transform:translate(0px, 100px); transition-property:transform,opacity; -moz-transition-property:transform,opacity; -ms-transition-property:transform,opacity; -o-transition-property:transform,opacity; -webkit-transition-property:transform,opacity; transition-duration:1s; -moz-transition-duration:1s; -ms-transition-duration:1s; -o-transition-duration:1s; -webkit-transition-duration:1s;}
.show .delia_nav a{ opacity:1; transform:translate(0px, 0px); -moz-transform:translate(0px, 0px); -ms-transform:translate(0px, 0px); -o-transform:translate(0px, 0px); -webkit-transform:translate(0px, 0px);}
.delia_nav .story{ transition-delay:0.9s; -moz-transition-delay:0.9s; -ms-transition-delay:0.9s; -o-transition-delay:0.9s; -webkit-transition-delay:0.9s;}
.delia_nav .picture{ transition-delay:1s; -moz-transition-delay:1s; -ms-transition-delay:1s; -o-transition-delay:1s; -webkit-transition-delay:1s;}
.delia_nav .video{ transition-delay:1.1s; -moz-transition-delay:1.1s; -ms-transition-delay:1.1s; -o-transition-delay:1.1s; -webkit-transition-delay:1.1s;}
.delia_nav .artwork{ transition-delay:1.2s; -moz-transition-delay:1.2s; -ms-transition-delay:1.2s; -o-transition-delay:1.2s; -webkit-transition-delay:1.2s;}
.delia_nav .skill{ transition-delay:1.3s; -moz-transition-delay:1.3s; -ms-transition-delay:1.3s; -o-transition-delay:1.3s; -webkit-transition-delay:1.3s;}
.delia_nav .cos{ transition-delay:1.4s;}

.frame_top,.frame_bottom,.frame_left,.frame_right{ opacity:0.5; transition:all 1s; -moz-transition:all 1s; -ms-transition:all 1s; -o-transition:all 1s; -webkit-transition:all 1s; transition-delay:0.5s; -moz-transition-delay:0.5s; -ms-transition-delay:0.5s; -o-transition-delay:0.5s; -webkit-transition-delay:0.5s;}
.frame_top,.frame_bottom { transform:scale(0, 1); -moz-transform:scale(0, 1); -ms-transform:scale(0, 1); -o-transform:scale(0, 1); -webkit-transform:scale(0, 1); }
.frame_left,.frame_right{ transform:scale(1, 0); -moz-transform:scale(1, 0); -ms-transform:scale(1, 0); -o-transform:scale(1, 0); -webkit-transform:scale(1, 0); }
.frame_top{ transform-origin:100% 100% 0; -moz-transform-origin:100% 100% 0; -ms-transform-origin:100% 100% 0; -o-transform-origin:100% 100% 0; -webkit-transform-origin:100% 100% 0;}
.frame_right{ transform-origin:0 0 0; -moz-transform-origin:0 0 0; -ms-transform-origin:0 0 0; -o-transform-origin:0 0 0; -webkit-transform-origin:0 0 0;}
.frame_bottom{ transform-origin:0 0 0; -moz-transform-origin:0 0 0; -ms-transform-origin:0 0 0; -o-transform-origin:0 0 0; -webkit-transform-origin:0 0 0;}
.frame_left{ transform-origin:0 100% 0; -moz-transform-origin:0 100% 0; -ms-transform-origin:0 100% 0; -o-transform-origin:0 100% 0; -webkit-transform-origin:0 100% 0; }
.show .frame_top,.show .frame_bottom,.show .frame_left,.show .frame_right{ opacity:1; transform:scale(1, 1); -moz-transform:scale(1, 1); -ms-transform:scale(1, 1); -o-transform:scale(1, 1); -webkit-transform:scale(1, 1);}

.page .center h2{ opacity:0.5;  transform:scale(0.5, 0.5); -moz-transform:scale(0.5, 0.5); -ms-transform:scale(0.5, 0.5); -o-transform:scale(0.5, 0.5); -webkit-transform:scale(0.5, 0.5); transition:all 1s; -moz-transition:all 1s; -ms-transition:all 1s; -o-transition:all 1s; -webkit-transition:all 1s;}
.active .center h2{ opacity:1; transform:scale(1, 1); -moz-transform:scale(1, 1); -ms-transform:scale(1, 1); -o-transform:scale(1, 1); -webkit-transform:scale(1, 1);}

.nav .navlist .navitem ul li a:hover,.nav .navlist .navitem ul li.on a,.nav .navlist .navitem ul li.hover a{ transition:all 0.3s ease 0s; -moz-transition:all 0.3s ease 0s; -ms-transition:all 0.3s ease 0s; -o-transition:all 0.3s ease 0s; -webkit-transition:all 0.3s ease 0s;}
.nav .navlist .navitem ul li span{ opacity:0; transform:translate(24px, 0px); -moz-transform:translate(24px, 0px); -ms-transform:translate(24px, 0px); -o-transform:translate(24px, 0px); -webkit-transform:translate(24px, 0px); transition:all 0.8s; -moz-transition:all 0.8s; -ms-transition:all 0.8s; -o-transition:all 0.8s; -webkit-transition:all 0.8s; *display:none; display:none\9;}
.nav .navlist .navitem ul li.hover span{ opacity:1; transform:translate(0px, 0px); -moz-transform:translate(0px, 0px); -ms-transform:translate(0px, 0px); -o-transform:translate(0px, 0px); -webkit-transform:translate(0px, 0px); *display:block; display:block\9;}


@media screen and (max-height:850px){ 
	#delia .center{ top:3%;}
	.nav .navlist{ margin-top:10px;}
	.page .center{ top:9%;}
}
@media screen and (max-width:1400px){ 
	.nav{ left:55px;}
	#picture .showpic .btn_Left{ left:21px;}
	#picture .showpic .btn_Right{ right:21px;}
}

.mark{ _background:none;}
#picture .showpic .pic .btn li .cover{ _background:none;}
.nav{ *left:55px;}