@charset "utf-8";

/* Rest
-----------------------------------------------------------------------------------------------------------*/
body, h1, p, ul { margin: 0; }
ul, ol { padding: 0; }
ul, ol { list-style: none; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus { outline: none; }
img { border: 0; }
section, article, footer { display: block; }

/* Font
-----------------------------------------------------------------------------------------------------------*/
body { font: 12px/1.8 \5FAE\8F6F\96C5\9ED1, Tahoma, Geneva, sans-serif; }

/* Pendant
-----------------------------------------------------------------------------------------------------------*/
.pr { position: relative; }
.pa { position: absolute; }
.fl { float: left; _display: inline; }
.fr { float: right; _display: inline; }
.bc { margin-left: auto; margin-right: auto; }
.tc { text-align: center; }
.nt { text-indent: -38888px; outline: none; }

/* layout */
html { background-color: #000; }
.container { max-width: 1920px; min-width: 1000px; overflow: hidden; }
.wrap { width: 1000px; }
.logo { display: block; top: 20px; left: 95px; width: 189px; height: 103px;}
.logo img { width: 100%; }
.logo1 { top: 124px; left: 1120px; }
.logo2 { top: 44px; left: 667px; }
.logo3 { top: 30px; left: 545px; }
.logo4 { top: 77px; left: 629px; }
.cross, .footer { width: 1920px; margin-left: -460px; }
.wrap, .screen, .screen .story { height: 987px; }
.back { display: block; top: 440px; right: -80px; width: 42px; height: 189px; background: url(back.png) no-repeat 0 0; }
.shadow { display: block; bottom: 111px; left: -460px; width: 1920px; height: 246px; background: url(shadow.png) no-repeat 0 0; }
.screen { z-index: 1; }
.logo, .back, .shadow, .footer { z-index: 2; }
.screen-menu-story, .screen-menu-youth { z-index: 3; }

/* footer */
.footer, .footer a { color: #585858; }
.footer { position: absolute; top: 876px; left: 0; height: 111px; padding-top: 30px; background-color: #000; }
.footer p { margin: 2px 0; }

/* screen */
.screen, .screen .story { top: 0; left: 0; }
.screen .story { display: none; width: 100%; background-repeat: no-repeat; background-position: 0 0; }
.screen .story1 { background-image: url(s1.jpg); }
.screen .story2 { background-image: url(s2.jpg); }
.screen .story3 { background-image: url(s3.jpg); }
.screen .story4 { background-image: url(s4.jpg); }
.screen .story5 { background-image: url(s5.jpg); }
.screen .story6 { background-image: url(s6.jpg); }
.screen .youth1 { background-image: url(y1.jpg); }
.screen .youth2 { background-image: url(y2.jpg); }
.screen .youth3 { background-image: url(y3.jpg); }
.screen .youth4 { background-image: url(y4.jpg); }

.screen-menu-story, .screen-menu-story li a { background: url(menu_story.png) no-repeat 0 0; }
.screen-menu-story { position: absolute; top: 755px; left: -460px; width: 1920px; height: 49px; padding-left: 565px; background-position: 0 -102px; }
.screen-menu-story li { float: left; _display: inline; width: 49px; margin-right: 61px; }
.screen-menu-story li a { display: block; height: 49px; }
.screen-menu-story li .m1 { background-position: -565px 0; }
.screen-menu-story li .m2 { background-position: -675px 0; }
.screen-menu-story li .m3 { background-position: -785px 0; }
.screen-menu-story li .m4 { background-position: -895px 0; }
.screen-menu-story li .m5 { background-position: -1005px 0; }
.screen-menu-story li .m6 { background-position: -1115px 0; }
.screen-menu-story li .m1:hover { background-position: -565px -49px; }
.screen-menu-story li .m2:hover { background-position: -675px -49px; }
.screen-menu-story li .m3:hover { background-position: -785px -49px; }
.screen-menu-story li .m4:hover { background-position: -895px -49px; }
.screen-menu-story li .m5:hover { background-position: -1005px -49px; }
.screen-menu-story li .m6:hover { background-position: -1115px -49px; }
.screen-menu-story .current .m1, .screen-menu-story .current .m1:hover { background-position: -565px -49px; }
.screen-menu-story .current .m2, .screen-menu-story .current .m2:hover { background-position: -675px -49px; }
.screen-menu-story .current .m3, .screen-menu-story .current .m3:hover { background-position: -785px -49px; }
.screen-menu-story .current .m4, .screen-menu-story .current .m4:hover { background-position: -895px -49px; }
.screen-menu-story .current .m5, .screen-menu-story .current .m5:hover { background-position: -1005px -49px; }
.screen-menu-story .current .m6, .screen-menu-story .current .m6:hover { background-position: -1115px -49px; }

.screen-menu-youth, .screen-menu-youth li a { background: url(menu_youth.png) no-repeat 0 0; }
.screen-menu-youth { position: absolute; top: 755px; left: -460px; width: 1920px; height: 50px; padding-left: 652px; background-position: 0 -102px; }
.screen-menu-youth li { float: left; _display: inline; width: 43px; margin-right: 97px; }
.screen-menu-youth li a { display: block; height: 50px; }
.screen-menu-youth li .m1 { background-position: -652px 0; }
.screen-menu-youth li .m2 { background-position: -792px 0; }
.screen-menu-youth li .m3 { background-position: -932px 0; }
.screen-menu-youth li .m4 { background-position: -1072px 0; }
.screen-menu-youth li .m1:hover { background-position: -652px -50px; }
.screen-menu-youth li .m2:hover { background-position: -792px -50px; }
.screen-menu-youth li .m3:hover { background-position: -932px -50px; }
.screen-menu-youth li .m4:hover { background-position: -1072px -50px; }
.screen-menu-youth .current .m1, .screen-menu-youth .current .m1:hover { background-position: -652px -50px; }
.screen-menu-youth .current .m2, .screen-menu-youth .current .m2:hover { background-position: -792px -50px; }
.screen-menu-youth .current .m3, .screen-menu-youth .current .m3:hover { background-position: -932px -50px; }
.screen-menu-youth .current .m4, .screen-menu-youth .current .m4:hover { background-position: -1072px -50px; }

.switch { background: url(switch.png) no-repeat 0 0; z-index: 3; }
.switch_story { display: block; top: 709px; left: 779px; width: 111px; height: 129px; background-position: 0 0; }
.switch_story:hover { background-position: -111px 0; }
.switch_youth { display: block; top: 720px; left: 770px; width: 115px; height: 115px; background-position: -222px 0; }
.switch_youth:hover { background-position: -337px 0; }