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

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

/* #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; }


/* #content 區域 */
#container { border-top: 2px solid #8aba28; background-color: #fff; }
#content { padding: 0 30px; }
#content h1 { font-size: 15px; color: #8aba28; padding: 10px 0; }
#content h1 img { margin-right: 3px; transform: translateY(-2px); }
#content img { height: 16px; width: auto; vertical-align: middle; }

#list li { padding: 20px 0; border-top: 1px solid #ccc; font-size: 13px; }
#list li img.rec { height: 13px; width: auto; vertical-align: middle; transform: translateY(-2px); }
#list li p { margin-bottom: 3px; }
#list li p:nth-of-type(1) { color: #000; }
#list li p:nth-of-type(1) span { color: #f6ac19; }
#list li p:nth-of-type(2) { color: #000; padding-left: 16px; }
#list li p:nth-of-type(2) img { width: 180px; height: auto; }
#list li p:nth-of-type(3) { color: #a5a5a5; }
#list li p:nth-of-type(4) { color: #8aba28; }
#list li p:nth-of-type(5) { text-align: center; margin-top: 20px; }
#list li p:nth-of-type(5) a { color: #8aba28; display: inline-block; padding: 3px 15px; margin: 0 7px; border: 1px solid #8aba28; border-radius: 5px; }

#list li p .right { float: right; }
#list li p .right img { height: 16px; width: auto; }


/* #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; text-align: center; padding: 15px; font-size: 18px; border-radius: 6px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); display: none; } 
.msgArea h1 { font-size: 15px; color: #8aba28; border-bottom: 1px solid #ccc; padding-bottom: 5px; text-align: left; }
.msgArea p { font-size: 13px; padding: 20px 0; }
.msgArea .msgBtn { display: inline-block; padding: 5px 20px; border-radius: 5px; position: static; background-color: #8aba28; color: #fff; font-size: 13px; }
.msgArea .msgCloseBtn { display: block; }
.msgArea #noBtn { background-color: #999; }
.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;} 
}