@charset "utf-8";

/*
main
navi
navi_btn
navi_menu
navi_list
cover
content
infor
screen
*/

:root { --darkRed:#860d0d;
        --brightRed:#db0632;
        --gold:#ba6f44;
        --brightGold:#f6e7c6; } 
  html { height: 100%; }
  html body { -webkit-text-size-adjust:none;
              -moz-text-size-adjust:none;
              -ms-text-size-adjust:none;
              text-size-adjust:none; }
  body { margin:0px;
         color:#fff; 
         font-size: 15px;
         font-family: Helvetica, Arial, 黑體-繁, 微軟正黑體; 
         text-align: justify;
         overflow-x: hidden; 
         background: black; }

  a { color:#fff; text-decoration:none; cursor: pointer;}
  a:hover {color:#fff;}
  div { box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box; }
  img { border:0px; }
  ::selection {background:#660066; color:white; }

  /*--------------------------------------------------------COV--*/
  #cover { width:100%;}
  .coverPort { width: 100%;
               background-size: contain;
               background-repeat: no-repeat; }
  .coverP0 {background-image: url(../img/cover_port0.png); }
  .coverP1 {background-image: url(../img/cover_port1.png); }
  .coverP2 {background-image: url(../img/cover_port2.png); }
  .coverP3 {background-image: url(../img/cover_port3.gif); }
  .coverP4 {background-image: url(../img/cover_port4.png); background-size: cover;
            padding-top: 141.2%; }

  @media (orientation: portrait) {
    .coverPort { display: block; }
    #coverLand { display: none; }
  } 
  @media (orientation: landscape) {
    .coverPort { display: none; }
    #coverLand { display: block; }
    #cover { margin-bottom: -20%; }
  } 

  /*--------------------------------------------------------NAV--*/
  #navi { margin-top: -50px; }
  #menu { display: none; 
          width: 100%; height: 100vh;
          position: fixed;
          z-index: 98;
          top: 0;
          text-align: right;
          font-weight: 900; }
  .nav_bar { display: flex;
             justify-content: space-between;
             align-items: center;
             width: 100%; height: 40px;
             position: fixed;
             z-index: 98;
             top: 0;
             padding-right: 10px;
             text-align: right;
             background:url(../img/navi_bg.png), linear-gradient(to left, #eae3b2 0%, #c4a363 100%);
             background-position: 45px center, 0 0;
             background-repeat: no-repeat;
             background-size: auto 18px, 100% 100%; }
  .nav_bar img { cursor: pointer; }             
  .nav_items { width:100%; height: 100vh; 
               padding-top: 60px;
               text-align: left; 
               background: linear-gradient(to left, #eae3b2 0%, #c4a363 100%); }
  .nav_item { height: 45px;
              padding-left: 42px;
              color:#2F2918; 
              font-size: 20px;
              font-weight: bold;
              line-height: 45px;
              cursor: pointer; }
  .nav_item:hover { color: var(--brightGold); background: var(--darkRed); }
  .nav_close { width:100%; height: 100vh; }

  @media screen and (min-width:768px) { 
    .nav_bar { background-size: auto 24px, 100% 100%; }
  }
  @media screen and (min-width:1024px) { 
    .nav_items { height: 360px; }
  }

  /*--------------------------------------------------------BOX--*/
  #box_main { width:100%; 
              position: relative;
              z-index: 1; }
  .box_title { width: 90%; max-width: 480px;
               height: 60px;
               position: relative; 
               left: 50%; transform: translateX(-50%);
               margin-top: 20px;
               padding:10px; 
               color: #db0632;
               font-weight: bolder;
               font-size: 22px;
               text-align: center;
               white-space:nowrap;
               border-radius: 30px;
               background: #860d0d; }
  .box_title div { width:calc(100% -20px);
                   height: 40px;
                   background: black; 
                   cursor: pointer;}
  .box_title div:hover { background: #b9a764; }
  .box_title img { height: 100%; }

  .box_paragraph { display: none;
                   width: 100%; max-width: 768px;
                   position: relative; 
                   left: 50%; transform: translateX(-50%);
                   margin-top: 5px;
                   padding: 40px 10px 60px 10px;
                   text-align: center;
                   line-height: 1.6em;
                   background-color: var(--darkRed); 
                   background-image: 
                     url(../img/p_background1.png),
                     url(../img/p_background2.png),
                     linear-gradient(to left, #860d0d 0%, #860d0d 100%),
                     linear-gradient(to left, black 0%, black 100%);
                   background-size: 
                     auto 30px, 
                     auto 30px,
                     calc(100% - 20px) calc(100% - 20px),
                     calc(100% - 12px) calc(100% - 12px);
                   background-position: top center , bottom center , center , center;
                   background-repeat: no-repeat,no-repeat,no-repeat,no-repeat; }
  .box_black { padding: 60px 10px 60px 10px;
               background-image: 
               url(../img/p_background1.png),
               url(../img/p_background2.png),
               linear-gradient(to left, black 0%, black 100%),
               linear-gradient(to left, black 0%, black 100%); }
  .box_divide { width: 100%; height: 5px; 
                margin-top: 40px;
                background: black; }
  .box_bgPlane { width: calc(100% - 20px); max-width: 480px;
                 position: relative; 
                 left: 50%; transform: translateX(-50%);
                 margin-top: 5px;
                 padding-top: 10px;
                 padding-bottom: 10px;
                 font-size: 15px;
                 font-weight: normal;
                 text-align: center;
                 background: var(--brightRed); }
  .box_bgRoom { width: 100%;
                margin-top: 10px;
                padding-top: 20px;
                padding-bottom: 30px;
                color:var(--brightGold);
                font-size: 18px;
                font-weight: bolder;
                text-align: center;
                background: var(--brightRed); }
  .box_bgScheme { width: calc(100% - 20px); max-width: 720px;
                  position: relative; 
                  left: 50%; transform: translateX(-50%);
                  margin-top: 10px;
                  padding: 20px 0px 20px 0px;
                  border: 2px solid #c1a45d; 
                  border-radius: 10px; 
                  background-color: var(--brightRed); }
  .box_bgCloud {  background-image: url(../img/p_background3.png);
                  background-size: 120%; 
                  background-position: 30px -30px; }

  .box_slider { width: calc(100% - 10px); max-width: 720px;
                position: relative; 
                left: 50%; transform: translateX(-50%);
                overflow: hidden;
                margin-top: 10px; }
  .box_slider1 { padding-top: 15px;
                 padding-bottom: 15px;
                 background: var(--brightRed);
                 border-radius: 6px; }
  .box_sliderOne { float: left; text-align: center; }
  .box_sliderBtn { display: flex;
                   width: calc(100% - 10px); max-width: 720px;
                   position: relative; 
                   left: 50%; transform: translateX(-50%);
                   justify-content: space-between;
                   align-items: center;
                   vertical-align: middle; 
                   margin-top: 10px;}
  .box_sliderBtn img { height: 26px; vertical-align: middle; } 

  .box_point { position: relative; 
               margin-top: -100px; }


  .box_follow { display: flex;
                justify-content: space-between;
                width: 280px; height: 50px;
                position: relative; 
                left: 50%; transform: translateX(-50%);
                margin-top: 10px;
                padding-top: 10px; }
  .box_follow img { display: block; height: 30px; }
  

  @media screen and (min-width:1200px) { /*>1200*/
    .box_follow { width: 360px; height: 70px; }
    .box_follow img { height: 40px; }
  } 

  /*--------------------------------------------------------CON--*/
  .con_subTitle { margin-top: 40px;
                  color: var(--brightGold);
                  font-size: 27px;
                  font-weight: bolder;
                  text-align: center; }
  .con_schemeSub { width: 240px;
                   margin-top: 10px;
                   margin-left: calc(50% - 120px);
                   padding: 5px;
                   font-size: 20px;
                   font-weight: bold;
                   border-radius: 15px;
                   background-color: var(--gold);}
  .con_schemeSub2 { width: 290px;
                    margin-top: 15px;
                    margin-left: calc(50% - 145px);
                    padding: 5px;
                    font-size: 16px;
                    border: 2px var(--brightGold) solid;
                    border-radius: 15px;
                    background-color: var(--brightRed);}
  .con_strong { display: inline-block;
                margin-top: 20px;
                padding: 5px;
                color: white;
                font-size: 24px;
                font-weight: bolder;
                text-align: center; 
                border-radius: 5px;
                background-color: var(--darkRed);}
  .con_brief { display: inline-block;
               width: 100%; 
               margin-top: 5px;
               font-size: 15px;
               line-height: 1.5em;
               text-align: center; }
  .con_intro { width: calc(100% - 30px); max-width: 720px;
               position: relative; 
               left: 50%; transform: translateX(-50%);
               margin-top: 10px;
               font-size: 15px;
               line-height: 1.7em;
               text-align: justify; } 
  .con_noteTitle { display: block;
                   margin-top: 30px;
                   margin-bottom: -20px;
                   color: var(--brightGold);
                   font-size: 20px;
                   font-weight: bolder; }
  .con_line { width: 90%;
              margin-top: 20px; margin-left: 5%;
              border: 1px solid #c1a45d; }
  .con_link { color:#f2eeaf; font-size: 15px; text-decoration:underline; }

  /*--------------------------------------------------------IMG--*/
  #img_schedule { width: 100%; margin-top: 20px; }
  #img_attractionAll { width: 100vw; max-width: 1280px;
                       position: relative; 
                       left: 50%; transform: translateX(-50%); }
  .img_main { display: block;
              width: calc(100% - 30px); max-width: 720px;
              position: relative; 
              left: 50%; transform: translateX(-50%);
              margin-top: 10px; }
  .img_map { width: 100vw; max-width: 480px;
             margin-top: 40px;}
  .img_icon { width: 120px; }
  .img_lineArrow { width:90px; 
                   margin-bottom: -80px; 
                   position: relative;
                   top:-15px;
                   z-index: 1; }
  .img_lineMenu { width:90%; max-width: 480px; 
                  position: relative
                  z-index:0; }
  .img_flip { display: block;
              width:90%; max-width: 360px; 
              position: relative; 
              left: calc(50% - 4px); transform: translateX(-50%);
              margin-top: 10px; margin-bottom: 10px;
              border-radius: 10px; 
              border: white solid 2px; 
              box-shadow: 6px 6px #6887b5, 6px 6px 0px 2px #cccccc;
              cursor: pointer; }
  .img_point { display: inline-block;
               height: 30px;  
               margin-top: -30px;
               vertical-align: middle; }



  #img_worldPort { display: block; }
  #img_worldLand { display: none; }
  .img_room  { width: calc(100% - 50px); max-width: 680px;
               margin-top: 15px;
               border: 2px #c1a45d solid; }

  .img_guide { width: 100%; }
  .img_slider { width: calc(100% - 40px); margin-top: 10px;border: 2px #c1a45d solid; }
  
  #img_logoPC   { width: 200px; }

  @media (orientation: portrait) {
    #img_logoName { width:210px; }
  } 
  @media (orientation: landscape) {
    #img_logoName { width:270px; }
  } 

  /*--------------------------------------------------------BTN--*/
  .btn { width:fit-content; height: 40px;
         position: relative; 
         left: 50%; transform: translateX(-50%);
         margin-top: 10px;
         padding-left:15px; padding-right:15px; padding-bottom: 4px; 
         font-size: 16px;
         font-weight: bold;
         line-height: 40px;
         vertical-align: middle;
         white-space:nowrap;
         border-radius: 50em;
         background: linear-gradient(#025edb 33%, #0a1e51 100%);
         cursor: pointer; }
  .btn img { display: inline-block;
             height: 26px;  
             margin-top: -4px; margin-left: 6px;
             vertical-align: middle; }
  .btn_gold { margin-top: 0px; background: var(--gold); }
  .btn_red  { margin-top: 0px; background: var(--brightRed); }

  /*--------------------------------------------------------ADJ--*/
  strong     { font-size: 20px; }
  .colorW    { color: white; }
  .colorG    { color: #d7a360; }
  .colorLG   { color: #f2eeaf; }
  .fontS12   { font-size: 12px; } 
  .fontS15   { font-size: 15px; } 
  .fontS18   { font-size: 18px; }
  .fontS21   { font-size: 21px; } 
  .fontS24   { font-size: 24px; } 
  .fontS30   { font-size: 30px; } 
  .bold      { font-weight: bold; }
  .noWrap    { display: inline-block;
               white-space: nowrap;
               position: relative; 
               left: 50%; transform: translateX(-50%); } 
  .marginT0  { margin-top: 0px; }
  .marginT5  { margin-top: 5px; }
  .marginT10 { margin-top: 10px; }
  .marginT15 { margin-top: 15px; }
  .marginT20 { margin-top: 20px; }
  .marginT30 { margin-top: 30px; }
  .marginL10 { margin-left: 10px; }
  .maxWid600 { max-width: 600px; }
  .maxWid300 { max-width: 300px; }
  .boxShadow { box-shadow: 5px 5px 0px #2a49ac;}
  .bgRed     { background-color: var(--darkRed);}
  .alignC_L  { display: block;
               width:fit-content; 
               position: relative; 
               left: 50%; transform: translateX(-50%);
               text-align: left; }       

  @media screen and (min-width:768px) { /*>768*/
    .con_titleSub  { margin-bottom: 0px; }
    #img_worldPort { display: none; }
    #img_worldLand { display: block; }
  }
  @media screen and (min-width:1200px) { /*>1200*/
    .img_schedule img{ margin-left: calc(50% - 600px); }
  }