html,body,#main { height: 100%; }

#main { position: fixed; width:100vw; padding-top: 80px; overflow-y: scroll; -webkit-overflow-scrolling: touch; font-size: 14px; }

/* #bg 區域 */
#bg { position: absolute; left: 0; top: 0; width: 100vw; height: 100%; z-index: -1; background: url(../../Res/Image/Mission/mission_bg1.svg) center; background-size: cover; overflow: hidden; }

/* #storedBtn 區域 */
#storedBtn { margin: 0 30px; position: relative; height: 40px; }
#storedBtn a { position: absolute; top: 0; width: 53%; padding: 10px; color: #fff; background-color: #8ec31f; border-radius: 6px; opacity: 0.5; text-align: center; }
#storedBtn a:first-of-type { left: 0; }
#storedBtn a:last-of-type { right: 0; }

/* #submenu */
#submenu { margin-bottom: 20px; text-align: center; }
#submenu a { display: inline-block; color: #999; padding: 0 5px; }
#submenu a.current { color: #000; font-weight: bold; }

/* #content 區域 */
#content { margin: 20px; background-color: #fff; border-radius: 6px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); padding: 30px 15px; }
#content h2 { font-weight: 600; color: #8aba28; font-size: 17px; margin-bottom: 15px; }
#content h2 img { height: 17px; width: auto; }
#content h2 img, #content h2 span { vertical-align: middle; }
#content p { margin-bottom: 15px; }
#content p.margin_s { margin-bottom: 5px; }
#content a { color: #8aba28; }
#camera { width: 60px; height: auto; margin-top: 20px; }
#content form { margin: 0; padding: 0; margin-bottom: 40px; }

#content form input[type=text] { text-align: left; padding: 5px 10px; width: 100%; font-size: 16px; line-height: 1em; background: rgba(128, 128, 128, 0.25); border: 0; border-radius: 5px; margin-bottom: 15px; }

#content form input[type=submit] { display: block; background-color: #8aba28!important; color: #fff; border: none; border-radius: 5px; padding: 5px 7px; font-size: 14px; -webkit-appearance: none; width: 60vw; margin: 20px auto; text-align: center; }

#content form input[type=radio] { display: inline-block; vertical-align: middle; }

#content form input::placeholder { font-size: 13px!important; }

#content form select { width: 100%; margin-bottom: 15px; background: rgba(128, 128, 128, 0.25); border: 0; border-radius: 5px; padding: 5px 7px; font-size: 16px; }

#content .desc { vertical-align: middle; display: inline-block; border-radius: 50%; background-color: #999; color: #000; width: 15px; height: 15px; text-align: center; font-weight: bold; margin-left: 5px; }

#content .sub_select { padding-bottom: 15px; }
#content .sub_select p { margin-bottom: 10px; }

#item { margin: 0 5px 0 16px; }
#minus, #plus { width: 16px; height: 16px; vertical-align: middle; border: none; background: transparent; }
#select_num p:last-child input { display: inline-block; width: 80px; vertical-align: middle; margin: 0; text-align: center; }
#content form #pick_num { display: block; width: 60vw; text-align: center; margin: 0 auto 15px; }

#content form p:last-child { font-size: 14px; text-align: justify; }

#content form .gpoints { text-align: center; font-size: 20px; margin-bottom: 40px; }
#content form .gpoints img { height: 25px; width: auto; vertical-align: middle; padding-bottom: 5px; }

.note { font-size: 14px !important; }
.center { text-align: center; }

/* msgArea 區域 */
#msgAreaMask { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.8); z-index: 9; display: none; } 

.msgArea { position: fixed; width: 70vw; left: 50%; top: 50%; transform: translate(-50%,-50%); background-color: #fff; z-index: 9; padding: 5vw; font-size: 14px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); display: none; } 

.msgArea h1 { font-size: 16px; color: #8aba28; border-bottom: 1px solid #bbb; padding-bottom: 5px; }
.msgArea p { padding: 20px 0; color: #333; text-align: justify; }

.msgBtn { background-color: #8aba28; color: #fff; display: block; width: 100%; height: auto; padding: 10px 0; border-radius: 8px; position: static; margin: 0 auto; text-align: center; line-height: 13px; }
.msgBtn img  { height: 15px; width:auto; float: right; margin-right: 20px; transform: translateY(-2px); }

.msgArea.msgShow { display: block; animation: msgAreaAni 0.5s; animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); }
@keyframes msgAreaAni{ 0%{ transform: translate(-50%,-800px); } }

/* loading 區域 */
.loading { text-align: center; }
.loading img { width: 40px; height: auto; margin: 20px; animation: loadingAni 1s linear infinite; }


@keyframes loadingAni {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media(max-width:350px){ 
  #storedBtn, form{margin:10px 20px;} 
}