@charset "UTF-8";
/* 基本樣式設定 */
body, html { height:100%; }
body{
  font-family:'Roboto Slab','Roboto', 'Noto Sans TC', Helvetica,Arial, Microsoft Yahei, SimSun, STXihei, arial, sans-serif;
  margin: 0; color: #000000; word-wrap: break-word; -webkit-text-size-adjust: none;
}
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
img{ border: 0px; vertical-align: middle; line-height: 0; height: auto; }
input{ -webkit-appearance: none; }
input[type="checkbox"] { -webkit-appearance: checkbox; }
a { color: #ffffff; text-decoration: none; }
a:hover, a:focus { color: #80d3fa; text-decoration: none; }
h1, h2, h3, h4, h5, h6{ margin: 0; font-family: inherit; font-weight: 400; }
p{ padding: 0; margin: 0; }
h1,.h1{font-size:2.7rem;line-height: 3.0rem;}
h2,.h2{font-size:2.4rem;line-height: 2.8rem;}
h3,.h3{font-size:2.0rem;line-height: 2.4rem;}
h4,.h4{font-size:1.6rem;line-height: 2.0rem;}
h5,.h5{font-size:1.25rem;line-height: 1.6rem;}
h6,.h6{font-size:1.1rem;line-height: 1.6rem;}
p,.p{font-size: 1rem;line-height: 1.6rem}

/* 輪播背景 */
.wrapper{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; background-color: #333333; }
.wrapper:after{ content:""; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 4; background-color: rgba(0, 0, 0, 0.4); }
.silder_bg{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: no-repeat; background-position: center; background-size: cover; }
.frame1{ background-image: url(images/bg2.jpg); animation: 20s infinite frame1; }
.frame2{ background-image: url(images/bg3.jpg); animation: 20s infinite frame2; }
.frame3{ background-image: url(images/bg1.jpg); animation: 20s infinite frame3; }

@keyframes frame1{ 
  0%,100% { opacity: 1; transform: scale(1.0); }
  33% { opacity: 0; transform: scale(1.0); }
  66% { opacity: 0; transform: scale(1.2);}
}
@keyframes frame2{ 
  0%,100% { opacity: 0; transform: scale(1.2); }
  33% { opacity: 1; transform: scale(1.0); }
  66% { opacity: 0; transform: scale(1.0) }
}
@keyframes frame3{ 
  0%,100% { opacity: 0; transform: scale(1.0) }
  33% { opacity: 0; transform: scale(1.2) }
  66% { opacity: 1; transform: scale(1.0); }
}

/* 隱私權頁 */
.top{ line-height: 3rem; border-bottom: 1px solid #eeeeee; }
.top .logo_box{ padding-left: 3.5rem; }
.top .logo_box .logo{ position: absolute; left: 1rem; top: 0.5rem; width: 2rem; height: 2rem; }
.top .logo_box span{ font-size: 1.2rem; }

.main{ padding: 1rem; }
.main .title{ margin: 0.8rem 0; }
.main .subtitle{ margin: 1rem 0 0.5rem; color: #0066cc; }
.main > ul, .main > ol{ margin: 0 0 0.5rem 0; padding-left: 1.6rem }
.main ul li, .main ol li{ margin: 0.2rem 0; line-height: 1.6rem; }
.main p{ margin: 0.2rem 0; line-height: 1.6rem; }

.footer{ border-top: 1px solid #eeeeee; line-height: 2rem; text-align: center; color: #ffffff;
  padding-bottom: calc(0rem + constant(safe-area-inset-bottom)); 
  padding-bottom: calc(0rem + env(safe-area-inset-bottom));
}
.footer a{ display: inline-block; margin: 0 0.7rem; }
.copyright{ display: block; font-size: 0.8rem; color: #999999; z-index: 10; }

/* 首頁 - Logo */
.index_main .logo_box{ position: absolute; top: 0.8rem; left: 0.8rem; z-index: 10; padding-left: 3.8rem; }
.index_main .logo_box .logo{ position: absolute; width: 3rem; height: 3rem; top: 50%; left: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); border-radius: 21%; box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); }
.index_main .logo_box span{ font-size: 1.6rem; color: #ffffff; line-height: 3rem; letter-spacing: .2rem; text-shadow: 0 0 4px #000000; }

.index_main .slogan{ position: absolute; bottom: 9rem; 
  bottom: calc(9rem + constant(safe-area-inset-bottom)); 
  bottom: calc(9rem + env(safe-area-inset-bottom)); 
  left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); color: #ffffff; z-index: 4; font-size: 1.6rem; text-align: center; white-space:nowrap; text-shadow: 0 0 4px #000000; }

/* 首頁 - 下載按鈕 */
.index_main .download_btn{ position: absolute; bottom: 5rem; 
  bottom: calc(5rem + constant(safe-area-inset-bottom)); 
  bottom: calc(5rem + env(safe-area-inset-bottom)); 
  left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); width: 300px; line-height: 2.8rem; font-size: 1.3rem; text-align: center; color: #000000; border-radius: 2rem; background-color: #ffdb26; z-index: 10; }
.index_main .download_btn:hover{ cursor: pointer; }

.index_main .footer{ position: absolute; bottom: 0.4rem; 
  bottom: calc(0.4rem + constant(safe-area-inset-bottom)); 
  bottom: calc(0.4rem + env(safe-area-inset-bottom)); 
  left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); text-align: center; font-size: 1rem; line-height: 1.5rem; border-top: none; z-index: 10; }