@charset "UTF-8";

/* ---- wrapper ---- */

#wrapper {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- upper pane ---- */

#upper_pane {
  width: 1000px;
  height: 563px;
  position: relative;
  overflow: hidden;
}

#lower_pane {
  width: 1000px;
  height: 579px;
  position: relative;
  background-color: #ffffff;
}

/* ---- lower pane ---- */

#lower_pane .contents_frame {
  width: 1000px;
  height: 579px;
  position: absolute;
  overflow: hidden;
}

/* ---- slide show ---- */

#slide_show {
	width: 1000px;
	height: 613px;
	position:  absolute;
	left: 0;
	top: 0;
	background-color: #000000;
	overflow: hidden;
}

#slide_show .frame {
  width: 1000px;
  height: 613px;
	position: absolute;
	overflow: hidden;
}

#slide_show .cur_image, #slide_show .next_image {
  width: 1000px;
  height: 613px;
	position: absolute;
	top: 0;
}

#slide_show .frame .image img {
	width: 100%;
	height: auto;
}

/* ---- prev slide btn ---- */

#prev_slide_btn {
  width: 40px;
  height: 613px;
  left: 0;
  top: 0;
  position: absolute;
  cursor: pointer;
  background-image: url(../../img/clear.png);
}

#prev_slide_btn .arrow {
  width: 40px;
  height: 613px;
  background: url(../../img/top/web/upper/l_arrow_btn.png) 6px 286px no-repeat;
}

#prev_slide_btn .arrow:hover {
  background-image: url(../../img/top/web/upper/l_arrow_btn_on.png);
}

/* ---- next slide btn ---- */

#next_slide_btn {
  width: 40px;
  height: 613px;
  left: 960px;
  top: 0;
  position: absolute;
  cursor: pointer;
  background-image: url(../../img/clear.png);
}

#next_slide_btn .arrow {
  width: 40px;
  height: 613px;
  background: url(../../img/top/web/upper/r_arrow_btn.png) 10px 286px no-repeat;
}

#next_slide_btn .arrow:hover {
  background-image: url(../../img/top/web/upper/r_arrow_btn_on.png);
}

/* ---- header ---- */

#header {
  width: 1000px;
  height: 92px;
  position: absolute;
  overflow: hidden;
}

/* ---- logo ---- */

#logo {
  width: 395px;
  height: 86px;
  position: absolute;
  left: 5px;
  top: 6px;
  background: url(../../img/top/web/upper/logo.png) no-repeat;
}

/* ---- lang ---- */

#lang {
  width: 540px;
  height: 25px;
  position: absolute;
  left: 580px;
  /*left: 896px;*/
  top: 0;
  background-image: url(../../img/top/web/upper/language_panel.png);
}

#lang li {
  height: 25px;
  float: left;
  cursor: pointer;
}

#lang .title {
  width: 128px;
  background: url(../../img/top/web/upper/language_close_btn.png) 33px 5px no-repeat;
}

#lang .title:hover {
  background-image: url(../../img/top/web/upper/language_close_btn_on.png);
}

#lang .title_closed {
  background: url(../../img/top/web/upper/language_btn.png) 14px 5px no-repeat;
}

#lang .title_closed:hover {
  background-image: url(../../img/top/web/upper/language_btn_on.png);
}

#lang .ja {
  width: 76px;
  background: url(../../img/top/web/upper/l_japanese_btn.png) 12px 4px / 46px 18px no-repeat;
}

#lang .ja:hover {
  background-image: url(../../img/top/web/upper/l_japanese_btn_on.png);
}

#lang .en {
  width: 81px;
  background: url(../../img/top/web/upper/l_english_btn.png) 18px 4px / 46px 16px no-repeat;
}

#lang .en:hover {
  background-image: url(../../img/top/web/upper/l_english_btn_on.png);
}

#lang .zh-TW {
  width: 91px;
  background: url(../../img/top/web/upper/l_china_trad_btn.png) 15px 5px / 58px 16px no-repeat;
}

#lang .zh-TW:hover {
  background-image: url(../../img/top/web/upper/l_china_trad_btn_on.png);
}

#lang .zh-CN {
  width: 92px;
  background: url(../../img/top/web/upper/l_china_simp_btn.png) 14px 4px / 54px 16px no-repeat;
}

#lang .zh-CN:hover {
  background-image: url(../../img/top/web/upper/l_china_simp_btn_on.png);
}

#lang .ko {
  width: 72px;
  background: url(../../img/top/web/upper/l_hangeul_btn.png) 9px 5px / 45px 15px no-repeat;
}

#lang .ko:hover {
  background-image: url(../../img/top/web/upper/l_hangeul_btn_on.png);
}


#lang .ja-a {
  width: 76px;
  background: url(../../img/top/web/upper/l_japanese_btn2.png) 0px -8px / 76px auto no-repeat;
}

#lang .en-a {
  width: 81px;
  background: url(../../img/top/web/upper/l_english_btn2.png) 0px -8px / 81px auto no-repeat;
}

#lang .zh-TW-a {
  width: 91px;
  background: url(../../img/top/web/upper/l_china_trad_btn2.png) 0px -9px / 80px auto no-repeat;
}

#lang .zh-CN-a {
  width: 92px;
  background: url(../../img/top/web/upper/l_china_simp_btn2.png) 0px -8px / 77px auto no-repeat;
}

#lang .ko-a {
  width: 72px;
  background: url(../../img/top/web/upper/l_hangeul_btn2.png) 0px -8px / 72px auto no-repeat;
}


/* ---- weather ----- */

#weather {
  width: 236px;
  height: 108px;
  position: absolute;
  left: 749px;
  top: 34px;
  line-height: 1.0;
  color: #ffffff;
  background: url(../../img/top/web/upper/weather_bg.png);
}

#weather .time {
  position: absolute;
  left: 6px;
  top: 3px;
}

#weather .time .ampm {
  font-size: 13px;
  font-weight: bold;
}

#weather .time .nums {
  font-size: 24px;
  font-weight: bold;
}

#weather .date {
  position: absolute;
  left: 115px;
  top: 3px;
}

#weather .date .year {
  font-size: 13px;
  font-weight: bold;
}

#weather .date .md {
  font-size: 24px;
  font-weight: bold;
}

#weather .forcast {
  position: absolute;
}

#weather .forcast .label {
  width: 159px;
  height: 32px;
  position: absolute;
  left: 35px;
  top: 28px;
  background: url(../../img/top/web/upper/weather_title.png) no-repeat;
}

#weather .forcast .icons {
  width: 236px;
  height: 58px;
  position: absolute;
  left: 0;
  top: 59px;
  text-align: center;
}

#weather .forcast .icons img {
  vertical-align: middle;
}

#weather .forcast .icons .sep1 {
  margin: 0 0 0 0;
}

/* ---- menu ---- */

#menu {
  width: 498px;
  height: 44px;
  position: absolute;
  left: 487px;
  top: 519px;
  background-image: url(../../img/top/web/upper/menu_panel.png);
}

#menu menu_container {
  /*margin: 7px 9px 0 7px;*/
  width: 1031px;
  height: 44px;
}

#menu .group {
  height: 44px;
  float: left;
  cursor: pointer;
}

#menu .top {
  width: 69px;
  background: url(../../img/top/web/upper/top_btn.png) 22px 15px / 36px 16px no-repeat;
}

#menu .top:hover {
  background-image: url(../../img/top/web/upper/top_btn_on.png);
}

#menu .news {
  width: 78px;
  background: url(../../img/top/web/upper/news_btn.png) 4px 15px / 74px 16px no-repeat;
}

#menu .news:hover {
  background-image: url(../../img/top/web/upper/news_btn_on.png);
}

#menu .knowledge {
  width: 51px;
  background: url(../../img/top/web/upper/knoeledge_btn.png) 0px 15px / 60px 16px no-repeat;
}

#menu .knowledge:hover  {
  background-image: url(../../img/top/web/upper/knoeledge_btn_on.png);
}

#menu .view {
  width: 51px;
  background: url(../../img/top/web/upper/view_btn.png) 10px 15px / 40px 16px no-repeat;
}

#menu .view:hover  {
  background-image: url(../../img/top/web/upper/view_btn_on.png);
}

#menu .walk {
  width: 51px;
  background: url(../../img/top/web/upper/walk_btn.png) 10px 15px / 38px 16px no-repeat;
}

#menu .walk:hover  {
  background-image: url(../../img/top/web/upper/walk_btn_on.png);
}

#menu .learn {
  width: 51px;
  background: url(../../img/top/web/upper/learn_btn.png) 0px 15px / 56px 16px no-repeat;
}

#menu .learn:hover  {
  background-image: url(../../img/top/web/upper/learn_btn_on.png);
}

#menu .join {
  width: 77px;
  background: url(../../img/top/web/upper/sanka_btn.png) 6px 15px / 58px 16px no-repeat;
}

#menu .join:hover  {
  background-image: url(../../img/top/web/upper/sanka_btn_on.png);
}

#menu .link {
  width: 69px;
  background: url(../../img/top/web/upper/link_btn.png) 10px 15px / 30px 16px no-repeat;
}

#menu .link:hover  {
  background-image: url(../../img/top/web/upper/link_btn_on.png);
}

#menu .item_container {
  position: absolute;
  bottom: 44px;
  background-image: url(../../img/top/center/plate_white.png);
  display: none;
}

#menu .item_container .item {
  width: 145px;
  height: 20px;
  padding: 8px 0 0 15px;
  font-size: 13px;
  line-height: 1.0;
  background: url(../../img/top/web/upper/menu_line_s.gif) 5px bottom no-repeat;
}

#menu .item_container .item:hover {
  background-color: #87cefa;
}

#menu .wide_item .item {
  width: 213px;
  background: url(../../img/top/web/upper/menu_line_l.gif) 5px bottom no-repeat;
}

#menu .item_container .item a {
  color: #000000;
  text-decoration: none;
}

#menu .item_container .item:first-child {
  padding-top: 9px;
}

#menu .item_container .item:last-child {
  padding-bottom: 2px;
  background: none;
}

#menu .item_container .item:last-child:hover {
  background-color: #87cefa;
}

/* ---- shortcut ---- */

#shortcut {
  display: none;
}

/* ---- photo info ---- */

#photo_info_container {
  width: 358px;
  height: 198px;
  position: absolute;
  left: 15px;
  top: 365px;
  overflow: hidden;
}

#photo_info {
  width: 358px;
  height: 198px;
  position: absolute;
  left: 0;
  top: 162px;
}

#photo_info .title_bar {
  width: 358px;
  height: 36px;
  background-image: url(../../img/top/web/upper/panel50.png);
  cursor: pointer;
}

#photo_info .title {
  width: 358px;
  height: 36px;
  background: url(../../img/top/web/upper/photo_open_btn.png) 7px 5px no-repeat;
}

#photo_info .title_open {
  background: url(../../img/top/web/upper/photo_close_btn.png) 7px 5px no-repeat;
}

#photo_info .info_list {
  width: 358px;
  height: 162px;
  background-image: url(../../img/top/web/upper/photo_exp_panel.png);
}

#photo_info .info {
  width: 336px;
  height: 150px;
  padding: 12px 11px 0 11px;
  font-size: 13px;
  line-height: 1.6;
  color: #ffffff;
}

/* ---- waiting msg ---- */

#waiting_msg {
  width: 724px;
  height: 60px;
  position: absolute;
  left: 584px;
  top: 510px;
}

#waiting_msg .ja {
  width: 724px;
  height: 60px;
  background: url(../../img/top/center/wait_j.png) no-repeat;
}

#waiting_msg .en {
  width: 724px;
  height: 60px;
  background: url(../../img/top/center/wait_e.png) no-repeat;
}

#waiting_msg .zh {
  width: 724px;
  height: 60px;
  background: url(../../img/top/center/wait_c.png) no-repeat;
}

#waiting_msg .ko {
  width: 724px;
  height: 60px;
  background: url(../../img/top/center/wait_h.png) no-repeat;
}

/* ---- web footer ---- */

#web_footer {
  width: 1000px;
  height: 49px;
  background: #ffffff;
}

#web_footer .logo {
  width: 92px;
  height: 36px;
  margin: 8px 0 0 19px;
  float: left;
  background: url(../../img/top/web/footer/logo_env.jpg) no-repeat;
}

#web_footer .copy_link {
  margin: 21px 0 0 9px;
  width: 500px;
  float: left;
}

#web_footer .copy_link .copy {
  font-size: 9px;
  line-height: 1.0;
}

#web_footer .copy_link .link {
  margin-top: 5px;
  font-size: 9px;
  line-height: 1.0;
}

#web_footer .counter {
  width: 300px;
  margin: 15px 13px 0 0;
  float: right;
  text-align: right;
}

#web_footer .counter .label {
  width: 57px;
  height: 21px;
  margin-right: 7px;
  float: right;
  background: url(../../img/top/web/footer/counter.gif) no-repeat;
}

#web_footer .counter .value {
  /*margin: 5px 8px 0 0;*/
  line-height: 1.0;
  float: right;
}

#web_footer .counter .value .num {
  margin-right: 2px;
}

#web_footer .counter .since {
  clear: both;
  font-size: 9px;
  color: #a3afaf;
}

/* ---- sp mode link ---- */

#sp_mode_link {
  margin: 0 auto 0 auto;
  width: 1000px;
  height: 22px;
  background: url(../../img/sp/header/sp_btn.png) right 0 no-repeat #ffffff;
}


/* ---- loading msg ---- */

#loading_msg {
  position: absolute;
  left: 0;
  top: 288px;
  z-index: 3;
  display: none;
}

#loading_msg .msg {
  width: 1000px;
  height: 18px;
  font-size: 18px;
  line-height: 1.0;
  text-align: center;
}