@import url("/css/_reset.css");
@import url("fancybox/jquery.fancybox.css");

body { background-color: #000000; }
#XlegendTop { position: fixed; _position: absolute; width:100%; height: 45px; z-index: 999; }

ul, li { list-style-type: none; }
a { text-indent: -99999px; }

#wrapper { position: relative; width:100%; min-width: 950px; overflow : hidden; padding-top: 45px; }
.part { width:100%; height: 910px; }
.logo {
  position: absolute;
  width: 318px;
  height: 223px;
  white-space: nowrap;text-indent: 100%;overflow: hidden;
  /*border: 1px solid #000;*/
left: 50%; margin: 300px 0 0 -200px; 
z-index: 12;
}
.logo a {
  display: block;
  position: relative;
  width: 100%;height: 100%;
}


/*------------------------------------------------------------------------------------------------------------------------------------- 
page
-------------------------------------------------------------------------------------------------------------------------------------*/
#page { background: url('/images/intro_27/bg_main.jpg') top center no-repeat; }
#page #yt { margin: 0 auto; width: 923px; padding: 210px 0 0 23px; }
#page #yt .yt_btn a { display: block; width: 423px; height: 272px; background: url('/images/intro_27/btn_mov.jpg') no-repeat; }
#btn li { float: left; text-indent: -99999px; }
#btn li span { display: block; width: 40px; height: 40px; background: url('/images/intro_27/btn_page.png') no-repeat; }
#btn li a { display: block; width: 40px; height: 40px; background: url('/images/intro_27/btn_page.png') no-repeat; }
#btn li.prev span { background-position: 0 -80px; margin-right: 10px; }
#btn li.prev a { background-position: 0 0; margin-right: 10px; }
#btn li.prev a:hover { background-position: 0 -40px; }
#btn li.next span { background-position: -40px -80px; }
#btn li.next a { background-position: -40px 0; }
#btn li.next a:hover { background-position: -40px -40px; }

.screen { position: relative; width: 100%; height: 301px; background: #000; }
.screen li { position: relative; float: left; width: 20%; height: 301px; }
.screen li a { position: absolute; z-index: 2; display: block; width: 100%; height: 301px; }
.screen li a span { position: absolute; left: 0; top: 0; z-index: 3; width: 100%; height: 301px; background: url('/images/intro_27/btn_zoom.png') center center no-repeat; }

/*-------------------------------------------------------------------------------------------------------------------------------------
page_1
-------------------------------------------------------------------------------------------------------------------------------------*/
#page_1 { padding-top: 45px; background: url('/images/intro_27/bg_1.jpg')  center 45px no-repeat; }
#page_1 #btn { position: relative; display: block; left: 50%; margin: 50px 0 0 427px; width: 100px; height: 40px; }
#tabBox { position: relative;left: 50%;margin:25px 0 25px -470px; width: 928px; height: 529px; }
#tabBox .tabNav { width: 100%; overflow: hidden;margin-left:150px; }
#tabBox .tabNav li { float: left; width: 108px; height: 88px; }
#tabBox .tabNav li a { display: block; width: 108px; height: 88px; background: url('/images/intro_27/menu_3.png') no-repeat; }

#tabBox .tabNav li.m1 a { background-position: 0 0; }
#tabBox .tabNav li.m2 a { background-position: -117px 0; }
#tabBox .tabNav li.m3 a { background-position: -233px 0; }
#tabBox .tabNav li.m4 a { background-position: -350px 0; }
#tabBox .tabNav li.m5 a { background-position: -466px 0; }
#tabBox .tabNav li.m6 a { background-position: -583px 0; }

#tabBox .tabNav li.m1 a:hover, #tabBox .tabNav li.m1 a.active { background-position: 0 -89px; }
#tabBox .tabNav li.m2 a:hover, #tabBox .tabNav li.m2 a.active { background-position: -117px -89px; }
#tabBox .tabNav li.m3 a:hover, #tabBox .tabNav li.m3 a.active { background-position: -233px -89px; }
#tabBox .tabNav li.m4 a:hover, #tabBox .tabNav li.m4 a.active { background-position: -350px -89px; }
#tabBox .tabNav li.m5 a:hover, #tabBox .tabNav li.m5 a.active { background-position: -466px -89px; }
#tabBox .tabNav li.m6 a:hover, #tabBox .tabNav li.m6 a.active { background-position: -583px -89px; }

#tabBox .tabMain { position: relative; overflow: hidden; width: 926px; height: 440px; }
#tabBox .tabMain ul { float: left; }
.tabimg { position: absolute; left: 0px; top: 0px; width:7408px; }
/*-------------------------------------------------------------------------------------------------------------------------------------
page_2
-------------------------------------------------------------------------------------------------------------------------------------*/
#page_2 { padding-top: 45px; background: url('/images/intro_27/bg_2.jpg')  center 45px no-repeat;  }
#page_2 #btn { position: relative; display: block; left: 50%; margin: 50px 0 0 427px; width: 100px; height: 40px; }

#tabBox2 { position: relative;left: 50%;margin:25px 0 25px -470px; width: 928px; height: 529px; }
#tabBox2 .tabNav2 { width: 100%; overflow: hidden;margin-left:200px; }
#tabBox2 .tabNav2 li { float: left; width: 108px; height: 88px; }
#tabBox2 .tabNav2 li a { display: block; width: 108px; height: 88px; background: url('/images/intro_27/menu_3.png') no-repeat; }

#tabBox2 .tabNav2 li.m1 a { background-position: 0 0; }
#tabBox2 .tabNav2 li.m2 a { background-position: -117px 0; }
#tabBox2 .tabNav2 li.m3 a { background-position: -233px 0; }
#tabBox2 .tabNav2 li.m4 a { background-position: -350px 0; }
#tabBox2 .tabNav2 li.m5 a { background-position: -466px 0; }
#tabBox2 .tabNav2 li.m6 a { background-position: -583px 0; }

#tabBox2 .tabNav2 li.m1 a:hover, #tabBox .tabNav li.m1 a.active { background-position: 0 -89px; }
#tabBox2 .tabNav2 li.m2 a:hover, #tabBox .tabNav li.m2 a.active { background-position: -117px -89px; }
#tabBox2 .tabNav2 li.m3 a:hover, #tabBox .tabNav li.m3 a.active { background-position: -233px -89px; }
#tabBox2 .tabNav2 li.m4 a:hover, #tabBox .tabNav li.m4 a.active { background-position: -350px -89px; }
#tabBox2 .tabNav2 li.m5 a:hover, #tabBox .tabNav li.m5 a.active { background-position: -466px -89px; }
#tabBox2 .tabNav2 li.m6 a:hover, #tabBox .tabNav li.m6 a.active { background-position: -583px -89px; }

#tabBox2 .tabMain2 { position: relative; overflow: hidden; width: 926px; height: 440px; }
#tabBox2 .tabMain2 ul { float: left; }
.tabimg2 { position: absolute; left: 0px; top: 0px; width:7408px; }


/*-------------------------------------------------------------------------------------------------------------------------------------
menu
-------------------------------------------------------------------------------------------------------------------------------------*/
#menu { position: absolute; _position: absolute;  z-index: 12; left: 50%; margin-left: -415px; margin-top: 45px; width: 825px; height: 70px; background: url('/images/intro_27/menu_bg.png') no-repeat; }
#menu li  {float: left; margin-left:30px;  }
#menu li a { display : block; width: 120px; height: 30px; background: url('/images/intro_27/menu.png') no-repeat; margin-top:15px;}
#menu .m1 a { background-position: 0 -5px;  width: 200px;margin-right:49px;}
#menu .m2 a { background-position: -275px -5px;margin-right:26px; }
#menu .m3 a { background-position: -451px -5px;margin-right:32px; }
#menu .m4 a { background-position: -640px -5px; }

#menu .m1 a:hover { background-position: 0 -49px  ;width: 200px; margin-right:49px;}
#menu .m2 a:hover { background-position: -275px -49px;margin-right:26px; }
#menu .m3 a:hover { background-position: -451px -49px;margin-right:32px; }
#menu .m4 a:hover { background-position: -640px -49px; }

/*-------------------------------------------------------------------------------------------------------------------------------------
menu_2
-------------------------------------------------------------------------------------------------------------------------------------*/
#menu_2 { position: fixed; _position: absolute; z-index: 12; left: 50%; margin-left: -485px; bottom: 55px; width: 960px; height: 200px;  }
#menu_2 .mBox_1 li {float: left; }
#menu_2 .mBox_1 li a { display: block; width: 480px; height: 180px; background: url('/images/intro_27/menu_2.png') no-repeat; }
#menu_2 .mBox_1 .m1 a { background-position: 0px 0px; }
#menu_2 .mBox_1 .m2 a { background-position: -480px 0px;}
#menu_2 .mBox_1 .m1 a:hover { background-position: 0 -195px; }
#menu_2 .mBox_1 .m2 a:hover { background-position: -480px -195px; }

/*-------------------------------------------------------------------------------------------------------------------------------------
menu_2
-------------------------------------------------------------------------------------------------------------------------------------*/
#copyright { position: absolute; _position: absolute; z-index: 11; left: 50%; margin-left: -470px; bottom: 10px; width: 868px; height: 54px;background: url('/images/intro_27/cr.png') no-repeat;  }
/*-------------------------------------------------------------------------------------------------------------------------------------
footer
-------------------------------------------------------------------------------------------------------------------------------------*/
#footer { position: fixed; _position: absolute; z-index: 12; bottom: 0; width: 100%; min-width: 950px; height: 60px; font-size: 11px; color: #d7d7d7; line-height: 14px; font-family: Arial; -webkit-text-size-adjust: none; background:url('/images/intro_27/bg_footer.gif') repeat-x; }
#footer .icon { float: left; margin: 10px 0 0 15px; width: 43px; height: 43px; background:url('/images/intro_27/icon_15.gif') no-repeat; text-indent: -99999px; }
#footer .icon_txt { float: left; margin: 10px 0 0 7px; width: 190px; height: 43px; }
#footer .share { float: right; margin: 15px 15px 0 0; width: 120px; }
#footer .share li a { float: left; display: block; width: 24px; height: 38px; margin: 0 3px; background:url('/images/intro_27/icon_share.png') no-repeat; }
#footer .share li.fb a { background-position: 0 0; }
#footer .share li.plurk a { background-position: -24px 0; }
#footer .share li.youtube a { background-position: -48px 0; }
#footer .share li.vip a { background-position: -72px 0; }
#footer #center { margin: 18px auto 0; width: 605px; min-width: 590px; padding-left: 100px; }
#center li.logo { float: left; display: block; width: 104px; height: 25px; margin-right: 20px; background:url('/images/intro_27/icon_logo.gif') no-repeat; }
#center li.txt { float: left; margin-top: 5px; }