@charset "UTF-8";
/* loading
------------------------------------------------------*/
#loader {
    width: 50px;
    height: 50px;
    display: none;
    position: fixed;
    _position: absolute; /* for IE6 */
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
    z-index: 100;
}
#fade {
    width: 100%;
    height: 150%;
    display: none;
    background-color: #FFFFFF;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 50;
}

/* snav
------------------------------------------------------*/
.snav {
  height: 115px;
}
.snav ul {
  width: 990px;
}
.snav ul.later {
  padding-top: 10px;
  overflow: hidden;
}
.snav ul.third {
  width: 210px;
}

/* main
------------------------------------------------------*/
#mainCol {
  position: relative;
}

/* platinum----------------------------*/
.platinum #fadeBox1 {
  width: 1000px;
  height: 320px;
  background: url(../images/system/platinum/img_01.png) no-repeat center top;
}
.platinum .txt01 { top: 60px; right: 125px; }


/* prologue----------------------------*/
.prologue #fadeBox1 {
  width: 1000px;
  height: 450px;
  background: url(../images/system/prologue/img_03.png) no-repeat center top;
}
.prologue .pic01 { top: 138px; right: 184px; }
.prologue .pic02 { top: 279px; right: 64px; }

.prologue #fadeBox2 {
  width: 1000px;
  height: 222px;
  background: url(../images/system/prologue/img_04.png) no-repeat center top;
}
.prologue .txt01 { top: 5px; left: 66px;}

.prologue #fadeBox3 {
  width: 1000px;
  height: 409px;
  background: url(../images/system/prologue/img_09.png) no-repeat center top;
}
.prologue .txt02 { top: 11px; left: 61px;}
.prologue .txt03 { bottom: 40px; right: 57px;}

.prologue .mainCol-box {
  background: url(../images/system/prologue/img_08.png) no-repeat center bottom;
}
.prologue .picList {
  padding: 0 0 0 64px;
}
.prologue .picList li { padding: 0 13px 0 0; }


/* new----------------------------*/
.mainCol-box {
  background: url(../images/common/bg_main.png) repeat-y center top;
}
.picList {
  padding: 0 0 40px 64px;
  overflow: hidden;
}
.picList li {
  float: left;
  padding: 0 13px 13px 0;
}


/* flow    ----------------------------*/
.flow #fadeBox1 {
  width: 1000px;
  height: 383px;
  background: url(../images/system/flow/img_01.png) no-repeat center top;
}
#thumb01 {
  position: absolute;
  display: block;
  top: 15px;
  right: 65px;
}
.flow .txt01 { bottom: 65px; left: 295px; }
.flow .arrow01 { bottom: 15px; left: 480px; }

.flow #fadeBox2 {
  width: 1000px;
  height: 403px;
  background: url(../images/system/flow/img_02.png) no-repeat center top;
}
.flow .arrow02 { bottom: 10px; left: 480px; }

.flow #fadeBox3 {
  width: 1000px;
  height: 76px;
  background: url(../images/system/flow/img_04.png) no-repeat center top;
}
.flow .arrow03 { bottom: 20px; left: 480px; }

.flow #fadeBox4 {
  width: 1000px;
  height: 543px;
  background: url(../images/system/flow/img_05.png) no-repeat center top;
}
.flow .pic01 { top: 41px; left: 84px; }
.flow .pic02 { top: 262px; left: 162px; }

.flow #picList-left li {
  float: none;
  padding: 0 9px 9px 0;
}
.flow #picList-left {
  float: left;
  padding: 0 0 0 60px;
}
.flow #picList-right {
  float: left;
}
.flow #mainCol-box {
  padding-top: 20px;
}

/* advance    ----------------------------*/
#ss-lesson {
  position: absolute;
  top: 521px;
  left: 63px;
}
#ss-costume {
  position: absolute;
  top: 521px;
  left: 373px;
}

a#ss-lesson:hover,a#ss-costume:hover {
  opacity: 0.6;
}