html {
  box-sizing: border-box;
}

*, *::after, *::before {
  box-sizing: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin-bottom: 30px;
  background-color: #6f5b47;
  border-top: #28160b 1px solid;
  border-left: #28160b 1px solid;
}
table th, table td {
  border-right: #28160b 1px solid;
  border-bottom: #28160b 1px solid;
  padding: 15px 10px;
}
table th {
  font-weight: bold;
}
table thead th {
  text-align: left;
  background-color: #44321d;
}
table tbody th {
  background-color: #584631;
}
table .thumb {
  background-color: #fff;
  width: 130px;
  text-align: center;
}

/* common
----------------------------------------------------------*/
* {
  -webkit-font-smoothing: antialiased;
}

html {
  background: #020403;
  color: #fff;
  min-width: 960px;
}

p {
  line-height: 1.7;
}

img {
  vertical-align: bottom;
}

h2 {
  text-indent: 0 !important;
  font-size: 30px;
}

a {
  color: #fff;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.inner {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.inner::after {
  clear: both;
  content: "";
  display: table;
}

#gungho {
  width: 100%;
  height: 31px;
  background: #fff;
  border-bottom: 4px solid #ccc;
}
#gungho .inner {
  width: 960px;
  height: 31px;
  margin: 0 auto;
  position: relative;
}
#gungho #ragnarok {
  float: left;
}
#gungho #roInfo {
  text-align: right;
}
#gungho #roInfo li {
  display: inline-block;
  line-height: 31px;
  margin-left: 1.5em;
}
#gungho #roInfo li a {
  font-size: 12px;
  font-weight: bold;
}

#sns {
  position: absolute;
  top: 35px;
  right: 0;
  line-height: 48px;
  text-align: right;
}
#sns li {
  display: inline-block;
}

#nav {
  text-align: center;
}
#nav li {
  display: inline-block;
}
#nav li:first-child:before, #nav li + li:before {
  position: relative;
}
#nav li:last-child:after {
  position: relative;
}
#nav li .navChild {
  display: none;
  position: absolute;
  padding: 15px;
  z-index: 100;
  background: #000;
}
#nav li .navChild li {
  display: block;
  margin: 0 0 10px 0;
  padding: 0 0 10px;
  border-bottom: 1px dotted gray;
}
#nav li .navChild li:first-child {
  margin-right: 0;
  padding-top: 10px;
  border-top: 1px dotted gray;
}
#nav li .navChild li a {
  line-height: 1.3;
}
#nav li .navChild .addNew {
  position: relative;
}
#nav li .navChild .addNew:before {
  content: url(../img/common/icon_new.png);
  position: absolute;
  top: 50%;
  left: -64px;
  margin-top: -33px;
}
#nav li .navChild .addUpdate {
  position: relative;
}
#nav li .navChild .addUpdate:before {
  content: url(../img/common/icon_update.png);
  position: absolute;
  top: 50%;
  left: -64px;
  margin-top: -33px;
}

#pagetop {
  position: absolute;
  bottom: -20px;
  right: 10%;
}
#pagetop:hover {
  bottom: -8px;
}

#footer {
  position: relative;
  background: url(../img/common/bg_footer.jpg);
  padding-top: 30px;
}
#footer .inner {
  width: 960px;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 30px;
}
#footer .inner h2 {
  margin-bottom: 30px;
}
#footer .inner ul li {
  width: 302px;
  display: inline-block;
  vertical-align: top;
}
#footer .inner ul li p {
  text-align: left;
  line-height: 1.2;
  font-size: 14px;
  padding: 0 23px;
}
#footer .inner ul li + li {
  margin-left: 10px;
}
#footer .aside {
  padding: 25px 0;
  background: #000;
}
#footer .aside .inner {
  margin-bottom: 0;
}
#footer .startRO {
  margin: 30px 0 0;
}
#footer .startRO a {
  display: block;
  margin-bottom: 5px;
}
#footer .credit {
  font-size: 12px;
  text-align: center;
  margin-top: 15px;
  color: #fff;
}

/* INDEX page
----------------------------------------------------------*/
.index h2 {
  text-align: center;
}
.index .section {
  margin-bottom: 0;
}
.index #header {
  background: url(../img/index/bg_top.jpg) center top no-repeat;
  width: 100%;
  height: 860px;
}
.index #header .inner {
  width: 960px;
  height: 700px;
  margin: 0 auto 75px;
  text-align: center;
  position: relative;
}
.index #header #title {
  position: relative;
  top: 230px;
  height: 323px;
  text-indent: -9999px;
  margin-bottom: 245px;
  background: url(../img/index/title.png) center top no-repeat;
}
.index #header #copy {
  position: absolute;
  top: 30px;
  left: 50%;
  margin-left: -330px;
}
.index #header #nav {
  background: #000;
}
.index #header #nav li {
  position: relative;
  margin: 0 0 0 25px;
}
.index #header #nav li:first-child:before, .index #header #nav li + li:before {
  content: url("../img/index/nav_icon.png");
  left: -15px;
  top: -23px;
}
.index #header #nav li:last-child:after {
  content: url("../img/index/nav_icon.png");
  right: -15px;
  top: -23px;
}
.index #header #nav li:first-child .navChild {
  left: -15px;
  width: 190px;
}
.index #header #nav li .navChild {
  top: 50px;
  width: 230px;
}
.index #header #nav li .navChild li {
  margin: 0;
  padding: 8px 0;
}
.index #header #nav li .navChild li:before, .index #header #nav li .navChild li:after {
  content: '';
}
.index #news {
  font-size: 13px;
  background: url(../img/index/bg_news.jpg) center bottom repeat-x;
  overflow: hidden;
}
.index #news .innerWrap {
  position: relative;
  overflow: hidden;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 15px;
  padding: 13px 0;
  background: url(../img/index/news_bg_top.gif) center top no-repeat, url(../img/index/news_bg_btm.gif) center bottom no-repeat;
  -pie-background: url(/special/episode/memory-record/img/index/news_bg_top.gif) center top no-repeat, url(/special/episode/memory-record/img/index/news_bg_btm.gif) center bottom no-repeat;
  behavior: url(PIE.htc);
}
.index #news .innerWrap::after {
  clear: both;
  content: "";
  display: table;
}
.index #news .inner {
  overflow: hidden;
  padding: 5px 0 0;
  background: url(../img/index/news_bg_repeat.gif) center top repeat-y;
}
.index #news .inner h2 {
  margin-bottom: 15px;
  text-align: left;
}
.index #news .inner .main {
  margin-left: 40px;
}
.index #news .inner .main a {
  font-size: 13px;
}
.index #news .inner .main span {
  font-size: 13px;
}
.index #news .inner .main p {
  display: inline-block;
  font-size: 13px;
}
.index #news .inner .main p + p {
  margin-left: 104px;
}
.index #news .inner .sub {
  float: right;
  width: 300px;
  margin-right: 40px;
  position: relative;
}
.index #news .bx-wrapper {
  position: absolute;
  right: 0;
  top: 17px;
  width: 250px;
  height: 120px;
  overflow: hidden;
}
.index #news .bx-wrapper .bx-viewport {
  left: 0;
}
.index #news .bx-wrapper .bx-viewport li {
  width: 250px;
}
.index #news .bx-wrapper .bx-pager.bx-default-pager {
  text-align: center;
}
.index #news .bx-wrapper .bx-pager.bx-default-pager a {
  background: #475e4e;
  width: 7px;
  height: 7px;
  margin: 5px;
}
.index #news .bx-wrapper .bx-pager.bx-default-pager a:hover, .index #news .bx-wrapper .bx-pager.bx-default-pager a.active {
  background: #4e7a5b;
}
.index #news .bx-wrapper .bx-pager {
  padding-top: 0;
  bottom: 17px;
}
.index #point {
  padding: 0 0 60px;
  background: url(../img/index/bg_point.jpg) center top no-repeat;
  background-size: cover;
  -ms-behavior: url(backgroundsize.min.htc);
}
.index #point h2 {
  position: relative;
  top: 30px;
}
.index #point h3 {
  text-align: center;
}
.index #point h3 img {
  margin: 0 auto;
}
.index #point .inner {
  height: 480px;
}
.index #point .box {
  width: 510px;
  position: absolute;
  right: 90px;
}
.index #point .slide01 {
  background: url(../img/index/slide01_ss.png) 70px 75px no-repeat;
  height: 400px;
}
.index #point .slide01 .box {
  width: 400px;
}
.index #point .slide02 {
  background: url(../img/index/slide02_ss.png) 20px 110px no-repeat;
  height: 360px;
}
.index #point .slide03 {
  height: 360px;
  background: url(../img/index/slide03_ss.png) 20px 90px no-repeat;
}
.index #point .slide04 {
  height: 360px;
  background: url(../img/index/slide04_ss.png) 20px 80px no-repeat;
}
.index #point .bx-wrapper .bx-prev {
  left: 0;
  background: url(../img/index/slide_prev.png) no-repeat;
}
.index #point .bx-wrapper .bx-prev:hover {
  background: url(../img/index/slide_prev_over.png) no-repeat;
}
.index #point .bx-wrapper .bx-next {
  right: -58px;
  background: url(../img/index/slide_next.png) no-repeat;
}
.index #point .bx-wrapper .bx-next:hover {
  background: url(../img/index/slide_next_over.png) no-repeat;
}
.index #point #pointPager {
  text-align: center;
}
.index #point #pointPager a {
  display: inline-block;
}
.index #point #pointPager .active {
  background-color: #43cac7;
}
.index #point #pointPager .active img {
  opacity: .5;
}
.index #event {
  margin-bottom: 30px;
  padding: 30px 0;
  background: url(../img/index/bg_event.jpg) center top no-repeat;
  background-size: cover;
  -ms-behavior: url(backgroundsize.min.htc);
}
.index #event .innerWrap {
  padding: 2px 0;
  background: url(../img/index/table_bg_top.png) center top no-repeat, url(../img/index/table_bg_bottom.png) center bottom no-repeat;
  -pie-background: url(../img/index/table_bg_top.png) center top no-repeat, url(../img/index/table_bg_bottom.png) center bottom no-repeat;
  behavior: url(PIE.htc);
}
.index #event .inner {
  max-width: 862px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2px;
  background: url(../img/index/table_bg_repeat.png) center repeat-y;
}
.index #event .inner::after {
  clear: both;
  content: "";
  display: table;
}
.index #event table {
  margin-bottom: 0;
}
.index #event table th, .index #event table td {
  padding: 11px 10px;
}
.index #event table thead th {
  background-color: #335f67;
  text-align: center;
  padding: 12px 10px;
}
.index #event table tbody tr th {
  text-align: left;
  font-size: 14px;
}
.index #event table tbody tr td {
  font-size: 14px;
}
.index #event table tbody tr .comingsoon {
  color: #a1a1a1;
}
.index #event table tbody tr:nth-child(n) th {
  background-color: #25464d;
}
.index #event table tbody tr:nth-child(n) td {
  background-color: #172e30;
}
.index #event table tbody tr:nth-child(2n) th {
  background-color: #213f44;
}
.index #event table tbody tr:nth-child(2n) td {
  background-color: #101e1f;
}
.index #banner {
  text-align: center;
  padding: 30px 0;
  background: url(../img/index/bg_banner.jpg) repeat;
}
.index #banner li {
  display: inline;
  margin: 0 3px;
}

/* sec page common
----------------------------------------------------------*/
.sec table {
  margin-bottom: 10px;
}
.sec table thead th {
  text-align: center;
  padding: 10px;
}
.sec table thead td {
  background-color: #44321d;
  color: #a0876f;
  font-weight: bold;
  font-size: 14px;
  padding: 5px;
  text-align: center;
}
.sec table tbody tr th {
  text-align: left;
  font-size: 14px;
  white-space: nowrap;
  padding: 5px 10px;
}
.sec table tbody tr td {
  font-size: 14px;
  padding: 5px 10px;
}
.sec table tbody .category01 th {
  color: #82c56a;
  background-color: #2d3614;
}
.sec table tbody .category01 td {
  background-color: #545032;
}
.sec table tbody .category02 th {
  color: #24b6ed;
  background-color: #0c322e;
}
.sec table tbody .category02 td {
  background-color: #3f4e44;
}
.sec table tbody .category03 th {
  color: #ffb6de;
  background-color: #58322b;
}
.sec table tbody .category03 td {
  background-color: #6f4e42;
}
.sec table tbody .category04 th {
  color: #fff400;
  background-color: #584300;
}
.sec table tbody .category04 td {
  background-color: #6f5923;
}
.sec .note {
  font-size: 14px;
}
.sec #header {
  margin-bottom: 40px;
  background: url(../img/common/nav_bg.jpg) center top no-repeat;
}
.sec #header h1 {
  height: 273px;
  max-width: 1400px;
  margin: -32px auto 0;
  text-indent: -9999px;
}
.sec #header .inner {
  position: relative;
}
.sec #header #sns {
  top: 10px;
}
.sec #nav {
  text-align: inherit;
}
.sec #nav li {
  font-size: 14px;
  font-family: serif;
  font-weight: bold;
  letter-spacing: -.1em;
  position: relative;
  top: -20px;
  margin: 0 0 0 15px;
  color: #bdbdbd;
}
.sec #nav li a {
  font-size: 14px;
  color: #fff;
}
.sec #nav li:first-child {
  margin: 0 175px 0 0;
  top: 0;
}
.sec #nav li:nth-child(2):before, .sec #nav li + li:before {
  content: url("../img/common/nav_icon.png");
  left: -11px;
  top: 6px;
}
.sec #nav li:last-child:after {
  content: url("../img/common/nav_icon.png");
  right: -11px;
  top: 6px;
}
.sec #nav li .navChild {
  top: 20px;
  width: 170px;
  padding: 15px 15px 0;
}
.sec #nav li .navChild li:first-child {
  margin-bottom: 30px;
}
.sec #nav li .navChild li:before, .sec #nav li .navChild li:after {
  content: '';
}
.sec #nav li .navChild li:last-child {
  margin-bottom: 0;
}
.sec .section {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
}
.sec .section::after {
  clear: both;
  content: "";
  display: table;
}
.sec .section h2 {
  height: 60px;
  margin-bottom: 40px;
  padding: 3px 30px;
  font-family: serif;
  font-size: 35px;
  font-weight: 100;
  letter-spacing: -.03em;
  background: url(../img/common/h2_bg.png) center top no-repeat;
}
.sec .section h3 {
  font-family: serif;
  font-size: 27px;
  margin-bottom: 24px;
}
.sec .section .inner {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.sec .section .inner::after {
  clear: both;
  content: "";
  display: table;
}
.sec .content {
  position: relative;
  padding-bottom: 100px;
  background: url(../img/common/bg_content_btm.jpg) bottom repeat-x;
}
.sec .content > *:nth-last-child(2) {
  margin-bottom: 0;
}
.sec .bread a {
  font-size: 12px;
  color: #3d8b15;
}
.sec .bread li {
  font-size: 12px;
  color: #3d8b15;
  display: inline-block;
}
.sec .bread li + li {
  margin-left: 10px;
  padding-left: 30px;
  background: url(../img/common/arrow_bread.png) left center no-repeat;
}
.sec .dn {
  text-indent: -9999px;
}
.sec .dn > * {
  display: none;
}
.sec .cn {
  text-align: center;
}
.sec .cn h2, .sec .cn p {
  text-align: left;
}
.sec .two {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}
.sec .two::after {
  clear: both;
  content: "";
  display: table;
}
.sec .two .main {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 65.88078%;
}
.sec .two .main:last-child {
  margin-right: 0;
}
.sec .two .sub {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 31.76157%;
}
.sec .two .sub:last-child {
  margin-right: 0;
}
.sec .two .sub p {
  font-size: 14px;
}
.sec .half {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}
.sec .half::after {
  clear: both;
  content: "";
  display: table;
}
.sec .half .main {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 48.82117%;
}
.sec .half .main:last-child {
  margin-right: 0;
}
.sec .half .sub {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 48.82117%;
}
.sec .half .sub:last-child {
  margin-right: 0;
}
.sec .add {
  position: relative;
}
.sec .add span {
  position: absolute;
  top: 18px;
  right: 79px;
  color: #ab9735;
}
.sec .add span:before, .sec .add span:after {
  content: url(../img/common/new_line.png);
  position: absolute;
  top: 12px;
}
.sec .add span:before {
  left: -50px;
}
.sec .add span:after {
  right: -50px;
}

/* WORLD page
----------------------------------------------------------*/
.world #header {
  position: relative;
}
.world h1 {
  background: url(../img/world/page_title.jpg) center top no-repeat;
}
.world .section {
  margin-bottom: 0;
  max-width: 100%;
}
.world .section .inner {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.world .section .inner::after {
  clear: both;
  content: "";
  display: table;
}
.world #tabs {
  position: absolute;
  bottom: 9px;
  left: 50%;
  width: 960px;
  margin: 0 auto;
  margin-left: -480px;
  height: 55px;
  background: url(../img/world/common/world_nav_bg.png) no-repeat;
}
.world #tabs ul {
  width: 555px;
  margin: 2px auto;
  overflow: hidden;
}
.world #tabs ul li {
  float: left;
  width: 280px;
}
.world #tabs ul li:last-child {
  margin-left: 35px;
  width: 240px;
}
.world #story {
  background: url(../img/world/bg_story.jpg) -15px top no-repeat;
  background-size: cover;
  -ms-behavior: url(backgroundsize.min.htc);
  text-indent: -9999px;
}
.world #story .inner {
  height: 710px;
  background: url(../img/world/story.png) center 80px no-repeat;
}
.world #history {
  background: url(../img/world/bg_history.jpg) center top no-repeat;
  padding-top: 70px;
  background-size: cover;
  -ms-behavior: url(backgroundsize.min.htc);
}
.world #history table, .world #history th, .world #history td {
  background-color: transparent;
  border: none;
  font-size: 13px;
  font-weight: bold;
}
.world #history th {
  color: #04894f;
  vertical-align: top;
  padding-left: 0px;
  text-align: left;
}
.world #profile {
  padding-top: 70px;
}
.world #profile h2 {
  margin-bottom: 23px;
}
.world #profile ul {
  width: 952px;
  margin: 0 auto;
}
.world #profile li {
  float: left;
  margin-bottom: 30px;
}
.world #profile li:nth-child(2n) {
  margin-left: 10px;
}

.summary #story {
  background: url(../img/world/bg_summary.jpg) center top no-repeat;
  background-size: cover;
  -ms-behavior: url(backgroundsize.min.htc);
  text-indent: -9999px;
  height: 523px;
}
.summary #story .inner {
  height: 286px;
  background: url(../img/world/summary_story.png) 18px 80px no-repeat;
}
.summary .section h3 {
  margin-bottom: 0;
}
.summary .diagram {
  text-align: center;
  padding-top: 30px;
}
.summary .npc {
  width: 900px;
  margin: 0 auto;
  padding: 20px 10px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  behavior: url(PIE.htc);
}
.summary .npc h4 {
  margin-bottom: 8px;
}
.summary .npc ul {
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
}
.summary .npc ul::after {
  clear: both;
  content: "";
  display: table;
}
.summary .npc ul li {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 31.76157%;
}
.summary .npc ul li:last-child {
  margin-right: 0;
}
.summary .npc ul li:nth-child(3n) {
  margin-right: 0;
}
.summary .npc ul li:nth-child(3n+1) {
  clear: left;
}
.summary .npc ul li img {
  float: left;
}
.summary .npc ul li h5 {
  padding-top: 15px;
}
.summary .npc ul li p {
  font-size: 13px;
  color: #F0EEE2;
  overflow: hidden;
}
.summary #kielhyre {
  margin-bottom: 30px;
}
.summary #kielhyre .npc {
  background: #171610;
  border: 1px #4d4935 solid;
}
.summary #sidokusu {
  margin-bottom: 30px;
}
.summary #sidokusu .npc {
  background: #121b1a;
  border: 1px #354d3c solid;
}
.summary #sidokusu .npc ul {
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
}
.summary #sidokusu .npc ul::after {
  clear: both;
  content: "";
  display: table;
}
.summary #sidokusu .npc ul li {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 48.82117%;
}
.summary #sidokusu .npc ul li:last-child {
  margin-right: 0;
}
.summary #sidokusu .npc ul li:nth-child(2n) {
  margin-right: 0;
}
.summary #sidokusu .npc ul li:nth-child(2n+1) {
  clear: left;
}
.summary #sidokusu .npc ul li:nth-child(3n+1) {
  clear: none;
}
.summary #president01 {
  margin-bottom: 30px;
}
.summary #president01 .npc {
  background: #0c181e;
  border: 1px #223842 solid;
}
.summary #president02 {
  margin-bottom: 30px;
}
.summary #president02 .npc {
  background: #12121b;
  border: 1px #1d1e50 solid;
}
.summary #labo {
  margin-bottom: 30px;
}
.summary #labo .npc {
  background: #17121b;
  border: 1px #3f354d solid;
}

/* GUIDE page
----------------------------------------------------------*/
.guide h1 {
  background: url(../img/guide/page_title.jpg) center top no-repeat;
}
.guide #header {
  position: relative;
}
.guide #tabs {
  position: absolute;
  bottom: 9px;
  left: 50%;
  width: 960px;
  margin: 0 auto;
  margin-left: -480px;
  height: 96px;
  background: url(../img/guide/common/nav_bg.png) center 29px no-repeat;
}
.guide #tabs ul {
  width: 880px;
  margin: 2px auto;
  overflow: hidden;
}
.guide #tabs ul li {
  float: left;
  width: 100px;
}
.guide #tabs ul li + li {
  margin-left: 11px;
}
.guide #tabs ul li img {
  vertical-align: top;
}

.root #fun {
  position: relative;
}
.root #fun .dn {
  background: url(../img/guide/root01_img01.jpg) center top no-repeat;
  height: 1085px;
}
.root #fun a {
  position: absolute;
  display: block;
  width: 316px;
  height: 54px;
  top: 520px;
  right: 137px;
}
.root #getekusesion .dn {
  background: url(../img/guide/root03_img01.jpg) center top no-repeat;
  height: 389px;
}
.root #getTip .dn {
  background: url(../img/guide/root04_img01.jpg) center top no-repeat;
  height: 277px;
}

.field #fieldInfo .dn {
  background: url(../img/guide/field01_img01.jpg) center top no-repeat;
  height: 252px;
}
.field #hotToGo .dn {
  background: url(../img/guide/field02_img01.jpg) center top no-repeat;
  height: 536px;
}
.field #map {
  background: url(../img/guide/field03_img01.jpg) center 100px no-repeat;
  height: 819px;
}
.field #upgrade .dn {
  background: url(../img/guide/field04_img02.jpg) center top no-repeat;
  height: 290px;
}
.field .section h3 {
  font-size: 21px;
  margin-bottom: 10px;
  line-height: 1.4;
}
.field .two .main p {
  margin-bottom: 30px;
}
.field table thead th {
  font-size: 14px;
}
.field table thead th:nth-child(5) {
  width: 14%;
}

.main-labo #point {
  background: url(../img/guide/main-labo01_img01.jpg) center 100px no-repeat;
  height: 520px;
}

.charleston #point {
  background: url(../img/guide/charleston01_img01.jpg) center 100px no-repeat;
  height: 487px;
}

.last-room #point {
  background: url(../img/guide/last-room01_img01.jpg) center 100px no-repeat;
  height: 490px;
}

.ekuserion #howToGet .dn {
  background: url(../img/guide/ekuserion02_img01.jpg) center top no-repeat;
  height: 290px;
}
.ekuserion #howToEnchant .dn {
  background: url(../img/guide/ekuserion03_img01.jpg) center top no-repeat;
  height: 705px;
}
.ekuserion table thead th {
  font-size: 12px;
  text-align: left;
}
.ekuserion table thead th:nth-child(4) {
  width: 19%;
}
.ekuserion table thead th:nth-child(5), .ekuserion table thead th:nth-child(6), .ekuserion table thead th:nth-child(7) {
  width: 10%;
}
.ekuserion table .nowrap {
  white-space: nowrap;
}
.ekuserion table p.note {
  font-weight: normal;
}

.tip #howToGetTip h2 {
  margin-bottom: 10px;
}
.tip #howToGetTip .dn {
  background: url(../img/guide/tip02_img01.jpg) center top no-repeat;
  height: 214px;
}

.mechanic #point .dn {
  background: url(../img/guide/mechanic01_img01.jpg) center top no-repeat;
  height: 249px;
}
.mechanic #howToGet .dn {
  background: url(../img/guide/mechanic02_img01.jpg) center top no-repeat;
  height: 521px;
  margin-bottom: 30px;
}
.mechanic #howToGet table tbody th {
  border-right: #28160b 1px solid;
}
.mechanic #howToGet table tbody th:first-child {
  width: 23%;
  text-align: center;
}
.mechanic #howToGet table tbody td {
  border-right: none;
  background-repeat: 0;
}
.mechanic #howToGet table .thumb {
  border-right: #28160b 1px solid;
}
.mechanic #howToGet table .monster {
  text-align: right;
}
.mechanic #howToEnchant .dn {
  background: url(../img/guide/mechanic03_img01.jpg) center top no-repeat;
  height: 614px;
}
.mechanic #point01 {
  background: url(../img/guide/mechanic04_img01.jpg) center top no-repeat;
  height: 232px;
  margin-bottom: 60px;
}
.mechanic #point02 {
  background: url(../img/guide/mechanic04_img02.jpg) center 30px no-repeat;
  height: 262px;
}
.mechanic #effect table {
  margin-bottom: 30px;
}

/* DATABOOK page
----------------------------------------------------------*/
.databook #header {
  position: relative;
}
.databook h1 {
  background: url(../img/databook/page_title.jpg) center top no-repeat;
}
.databook #tabs {
  position: absolute;
  bottom: 9px;
  left: 50%;
  width: 960px;
  margin: 0 auto;
  margin-left: -480px;
  height: 55px;
  background: url(../img/databook/common/data_nav_bg.png) no-repeat;
}
.databook .ui-tabs-nav {
  width: 882px;
}
.databook .ui-tabs-nav li + li {
  margin-left: 7px;
}
.databook .add:before {
  content: '';
}
.databook .add span {
  font-size: 14px;
  top: 12px;
}
.databook .note {
  margin-bottom: 30px;
}

/* WALLPAPER page
----------------------------------------------------------*/
.wallpaper h1 {
  background: url(../img/wallpaper/page_title.jpg) center top no-repeat;
}
.wallpaper .half {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.wallpaper .half::after {
  clear: both;
  content: "";
  display: table;
}
.wallpaper .half ul li {
  margin-bottom: 10px;
}
.wallpaper .half .sub {
  position: absolute;
  top: 56px;
  right: 0;
}
.wallpaper .section h2 {
  background: none;
}
.wallpaper .section h3 {
  font-size: 18px;
  margin-bottom: 0;
}
.wallpaper .section p {
  font-size: 14px;
}
.wallpaper .section a {
  color: #4AE0B8;
}
.wallpaper .two {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0;
}
.wallpaper .two::after {
  clear: both;
  content: "";
  display: table;
}
.wallpaper .two .sub {
  padding: 33px 5px 0;
  text-align: center;
}
.wallpaper .info {
  border: 1px solid #376967;
  margin: 0 auto;
  padding: 10px 30px;
  background: #001F21;
  border-radius: 5px;
  behavior: url(PIE.htc);
}
.wallpaper .info .note {
  font-size: 12px;
  display: inline-block;
  margin-left: 15px;
  color: #cdcdcd;
}
.wallpaper .add {
  top: -50px;
  left: 80px;
}
.wallpaper .add span {
  top: 0;
  right: inherit;
  left: 225px;
}

/*
----------------------------------------------------------*/
#header.fixed {
  width: 100%;
  position: fixed;
  z-index: 100;
}