@charset "UTF-8";
/* CSS Document */

section, article, aside, footer, header, nav, h2 { display:block;}

body { padding:0; margin:0 auto; color: #000; font-size:1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #F9F9F9; position: relative;}
img { border:0; display: block;}

html, body { height: 100%;}

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

div.brk { clear: both;}


/************ video box ************/
.video-container { position:relative; padding-bottom:56.25%; padding-top:30px; width:100%; height: 0px; overflow:hidden;}
.video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%;}


@media screen and (min-width: 1370px) {

  /************ header + nav ************/

  header { width: 100%; padding: 5vw 10vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}

  img.header-logo { width: 223px; height: auto;}

  nav#mo { display: none;}
  nav#pc { width: calc(100% - 223px - 170px); padding: 0 20px; box-sizing: border-box;}
  nav#pc ul.nav-menu { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  nav#pc ul.nav-menu li { padding: 0; margin: 0 20px;}
  nav#pc ul.nav-menu li a { color: #000; font-size: 1.1rem; font-weight: 600; text-decoration: none;}
  nav#pc ul.nav-menu li a:hover { color: #000; border-bottom: 1px #000 solid;}

  ul.nav-menu-mo { display: none;}

  .header-download-bt-mo { display: none;}
  .header-download-bt { width: 170px;}
  .header-download-bt a { width: 100%; padding: 15px 0; color: #000; font-size: 1.1rem; font-weight: 600; text-align: center; text-decoration: none; border-radius: 30px; background-color: #D9F27E; display: block;}
  .header-download-bt a:hover { color: #222;}


  /************ section#search-act-box ************/

  section#search-act-box { clear: both; width: 100%;}

  .search-act-box { width: 1012px; height: 157px; margin: 0 auto; background-image: url("../images/search_box_bg.png"); background-repeat: no-repeat; background-size: 1012px 157px; background-position: left top; display: flex; justify-content: flex-end; align-items: center;}
  .search-act-box input[type=search].search-input { width: 770px; height: 120px; color: #000; font-size: 4rem; font-weight: 500; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; margin: 0 80px 0 0; border: 0; background-color: #fff;}
  .search-act-box .search-input::placeholder { color: #CDCDCD; line-height: 1em;}
  .search-act-box .search-input:focus { outline: none;}


  /************ section#sec-1 ************/

  section#sec-1 { clear: both; width: 100%; overflow: hidden;}

  .sec-1-text-slogen { width: 100%; padding: 0 0 100px 0; font-size: 3rem; font-weight: 600; line-height: 1.6em; text-align: center;}

  .sec-1-showpics { clear: both; width: 100%; padding: 0 0 55px 0; display: flex; justify-content: center; align-items: flex-start;}
  .sec-1-showpics img.sec-1-card-1 { width: 19.5vw; height: auto; position: relative; top: 10px; left: 12vw; z-index: 1; cursor: pointer;}
  .sec-1-showpics img.sec-1-card-2 { width: 19.5vw; height: auto; position: relative; top: 45px; left: 6vw; z-index: 2; cursor: pointer;}
  .sec-1-showpics img.sec-1-card-3 { width: 19.5vw; height: auto; position: relative; z-index: 3; cursor: pointer;}
  .sec-1-showpics img.sec-1-card-4 { width: 19.5vw; height: auto; position: relative; top: 55px; left: -7vw; z-index: 5; cursor: pointer;}
  .sec-1-showpics img.sec-1-card-5 { width: 19.5vw; height: auto; position: relative; top: 40px; left: -14vw; z-index: 4; cursor: pointer;}
  .sec-1-showpics img.sec-1-card-1:hover, 
  .sec-1-showpics img.sec-1-card-2:hover, 
  .sec-1-showpics img.sec-1-card-3:hover, 
  .sec-1-showpics img.sec-1-card-4:hover, 
  .sec-1-showpics img.sec-1-card-5:hover { z-index: 6;}

  .sec-1-showpics-mo { display: none;}


  /************ section#sec-2 ************/

  section#sec-2 { clear: both; width: 100%; overflow: hidden;}

  .sec-2-text-slogen { width: 100%; padding: 0 0 150px 0; font-size: 3rem; font-weight: 600; line-height: 1.6em; text-align: center;}

  .sec-2-showpics { clear: both; width: 100%; display: flex; justify-content: center; align-items: flex-start;}
  .sec-2-showpics img.sec-2-photo-1 { width: 35vw; height: auto; position: relative; top: -4.5vw; left: 10vw; z-index: 1;}
  .sec-2-showpics img.sec-2-photo-2 { width: 35vw; height: auto; position: relative; z-index: 2;}
  .sec-2-showpics img.sec-2-photo-3 { width: 35vw; height: auto; position: relative; top: -4.75vw; left: -15vw; z-index: 1;}

  .sec-2-showpics-mo { display: none;}


  /************ section#sec-3 ************/

  section#sec-3 { clear: both; width: 100%; overflow: hidden;}

  .sec-3-slide-box { width: 100%; margin: 100px 0;}
  .sec-3-slide-box img.mobile-1, 
  .sec-3-slide-box img.mobile-2, 
  .sec-3-slide-box img.mobile-3 { margin: 0 auto; position: relative; z-index: 1;}
  .sec-3-slide-box .infor-text-1 { width: 400px; position: absolute; top: 140px; left: calc(50% - 200px + 460px); z-index: 3;}
  .sec-3-slide-box .infor-text-1 .step-num { width: 100%; font-size: 7rem; font-weight: 600; font-family: sans-serif;}
  .sec-3-slide-box .infor-text-1 .sub-title { width: 100%; margin: 30px 0 0 0; font-size: 3.4rem; font-weight: 600;}
  .sec-3-slide-box .infor-text-1 .text { width: 100%; margin: 20px 0 0 0; font-size: 1.6rem; font-weight: 500;}
  .sec-3-slide-box .infor-text-2 { width: 400px; position: absolute; top: 140px; left: calc(50% - 200px - 460px); z-index: 3;}
  .sec-3-slide-box .infor-text-2 .step-num { width: 100%; font-size: 7rem; font-weight: 600; font-family: sans-serif;}
  .sec-3-slide-box .infor-text-2 .sub-title { width: 100%; margin: 30px 0 0 0; font-size: 3.4rem; font-weight: 600;}
  .sec-3-slide-box .infor-text-2 .text { width: 100%; margin: 20px 0 0 0; font-size: 1.6rem; font-weight: 500;}
  .sec-3-slide-box img.finger { position: absolute; bottom: 30px; left: calc(50% - 200px + 240px); z-index: 2;}
  .sec-3-slide-box img.arrow-next, 
  .sec-3-slide-box img.arrow-prev { position: absolute; bottom: 250px; right: calc(50% - 200px - 30vw); z-index: 4; cursor: pointer;}
  .sec-3-slide-box img.tag-1 { position: absolute; bottom: 300px; left: calc(50% - 200px - 330px); z-index: 2;}
  .sec-3-slide-box img.tag-2 { position: absolute; bottom: 255px; left: calc(50% - 200px - 185px); z-index: 2;}
  .sec-3-slide-box img.tag-3 { position: absolute; top: 230px; left: calc(50% - 200px + 480px); z-index: 2;}
  .sec-3-slide-box img.tag-4 { position: absolute; top: 285px; left: calc(50% - 200px + 590px); z-index: 2;}
  .sec-3-slide-box img.tag-5 { position: absolute; top: 120px; right: calc(50% - 200px - 26vw); z-index: 2;}
  .sec-3-slide-box img.tag-6 { position: absolute; bottom: 380px; left: calc(50% - 200px + 630px); z-index: 2;}


  /************ section#sec-3-mo ************/

  section#sec-3-mo { display: none;}


  /************ section#sec-4 ************/

  section#sec-4 { clear: both; width: 100%; overflow: hidden;}

  .sec-4-content { clear: both; width: 100%; display: flex; justify-content: center; align-items: flex-start;}
  .sec-4-content .col-lf { width: 60%; padding: 0 0 0 0; box-sizing: border-box; display: flex; justify-content: flex-end; align-items: flex-start; flex-wrap: wrap;}
  .sec-4-content .col-lf img.action-1 { width: 21vw; height: auto; margin: 4vw 1vw 0 0; position: relative; z-index: 1;}
  .sec-4-content .col-lf img.action-2 { width: 21vw; height: auto; position: relative; z-index: 1;}
  .sec-4-content .col-lf img.action-3 { width: 21vw; height: auto; margin: 4vw 1.5vw 0 0; position: relative; z-index: 1;}
  .sec-4-content .col-lf img.action-4 { width: 21vw; height: auto; position: relative; top: -2.5vw; right: 5vw; z-index: 2;}
  .sec-4-content .col-rt { width: 40%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .sec-4-content .col-rt img.icon-location { width: 10.65vw; height: auto; margin: 10vw 0 0 0; position: relative; z-index: 1;}
  .sec-4-content .col-rt img.hand { width: 32.15vw; height: auto; position: relative; top: 0; right: 7vw; z-index: 2;}


  /************ section#sec-4-mo ************/

  section#sec-4-mo { display: none;}


  /************ section#sec-5 ************/

  section#sec-5 { clear: both; width: 100%; padding: 0 0 300px 0;}

  .sec-5-download { width: 260px; margin: 0 auto;}
  .sec-5-download a { width: 100%; padding: 20px 0; color: #000; font-size: 1.8rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 60px; background-color: #D9F27E; display: block;}
  .sec-5-download a:hover { color: #222;}

  .sec-5-text { clear: both; width: 100%; padding: 10px 0 0 0; font-size: 1.2rem; font-weight: 500; text-align: center; text-align: center;}

  .sec-5-store-dl { clear: both; width: 100%; margin: 60px 0 0 0; display: flex; justify-content: center; align-items: center;}
  .sec-5-store-dl img.store { width: 284px; height: auto; margin: 0 30px;}


  /************ section#page-privacy ************/

  section#page-privacy { clear: both; width: 100%; padding: 0 calc(50% - 640px) 100px calc(50% - 640px); box-sizing: border-box;}

  .page-privacy-con { width: 100%; font-size: 1.2rem; line-height: 2em;}
  .page-privacy-con .page-title { width: 100%; padding: 0 0 40px 0; font-size: 2.4rem; font-weight: 600;}
  .page-privacy-con .sub-title { width: 100%; margin: 20px 0; color: #222; font-size: 1.8rem; font-weight: 500; border-bottom: 4px #2980b9 solid;}


  /************ footer#pc ************/

  footer#pc { clear: both; width: 100%; padding: 100px 10vw; background-color: #222; box-sizing: border-box;}

  img.footer-logo { width: 223px; height: auto; margin: 0 auto;}

  .footer-links { clear: both; width: 100%; margin: 100px 0 0 0; color: #fff; font-size: 1rem; font-weight: 500; line-height: 2em; text-align: center;}
  .footer-links a { color: #fff; text-decoration: none;}
  .footer-links a:hover { color: #fff; border-bottom: 1px #fff solid;}

  .footer-notice { clear: both; width: 100%; margin: 40px 0 0 0; color: #fff; font-size: 1rem; font-weight: 500; line-height: 2em; text-align: center;}


  /************ footer#mo ************/

  footer#mo { display: none;}


}

@media screen and (min-width: 1024px) and (max-width: 1369px) {

  /************ header + nav ************/

  header { width: 100%; padding: 5vw 10vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}

  img.header-logo { width: 223px; height: auto;}

  nav#mo { display: none;}
  nav#pc { width: calc(100% - 223px - 170px); padding: 0 20px; box-sizing: border-box;}
  nav#pc ul.nav-menu { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  nav#pc ul.nav-menu li { padding: 0; margin: 0 20px;}
  nav#pc ul.nav-menu li a { color: #000; font-size: 1.1rem; font-weight: 600; text-decoration: none;}
  nav#pc ul.nav-menu li a:hover { color: #000; border-bottom: 1px #000 solid;}

  ul.nav-menu-mo { display: none;}

  .header-download-bt-mo { display: none;}
  .header-download-bt { width: 170px;}
  .header-download-bt a { width: 100%; padding: 15px 0; color: #000; font-size: 1.1rem; font-weight: 600; text-align: center; text-decoration: none; border-radius: 30px; background-color: #D9F27E; display: block;}
  .header-download-bt a:hover { color: #222;}


  /************ section#search-act-box ************/

  section#search-act-box { clear: both; width: 100%;}

  .search-act-box { width: 700px; height: 109px; margin: 0 auto; background-image: url("../images/search_box_bg_700.png"); background-repeat: no-repeat; background-size: 700px 109px; background-position: left top; display: flex; justify-content: flex-start; align-items: center;}
  .search-act-box input[type=search].search-input { width: 560px; height: 80px; color: #000; font-size: 3rem; font-weight: 500; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; margin: 0 0 0 110px; border: 0; background-color: #fff;}
  .search-act-box .search-input::placeholder { color: #CDCDCD; line-height: 1em;}
  .search-act-box .search-input:focus { outline: none;}


  /************ section#sec-1 ************/

  section#sec-1 { clear: both; width: 100%; overflow: hidden;}

  .sec-1-text-slogen { width: 100%; padding: 0 0 100px 0; font-size: 3rem; font-weight: 600; line-height: 1.6em; text-align: center;}

  .sec-1-showpics { clear: both; width: 100%; padding: 0 0 55px 0; display: flex; justify-content: center; align-items: flex-start;}
  .sec-1-showpics img.sec-1-card-1 { width: 19.5vw; height: auto; position: relative; top: 10px; left: 12vw; z-index: 1; cursor: pointer;}
  .sec-1-showpics img.sec-1-card-2 { width: 19.5vw; height: auto; position: relative; top: 45px; left: 6vw; z-index: 2; cursor: pointer;}
  .sec-1-showpics img.sec-1-card-3 { width: 19.5vw; height: auto; position: relative; z-index: 3; cursor: pointer;}
  .sec-1-showpics img.sec-1-card-4 { width: 19.5vw; height: auto; position: relative; top: 55px; left: -7vw; z-index: 5; cursor: pointer;}
  .sec-1-showpics img.sec-1-card-5 { width: 19.5vw; height: auto; position: relative; top: 40px; left: -14vw; z-index: 4; cursor: pointer;}
  .sec-1-showpics img.sec-1-card-1:hover, 
  .sec-1-showpics img.sec-1-card-2:hover, 
  .sec-1-showpics img.sec-1-card-3:hover, 
  .sec-1-showpics img.sec-1-card-4:hover, 
  .sec-1-showpics img.sec-1-card-5:hover { z-index: 6;}

  .sec-1-showpics-mo { display: none;}


  /************ section#sec-2 ************/

  section#sec-2 { clear: both; width: 100%; overflow: hidden;}

  .sec-2-text-slogen { width: 100%; padding: 0 0 150px 0; font-size: 3rem; font-weight: 600; line-height: 1.6em; text-align: center;}

  .sec-2-showpics { clear: both; width: 100%; display: flex; justify-content: center; align-items: flex-start;}
  .sec-2-showpics img.sec-2-photo-1 { width: 35vw; height: auto; position: relative; top: -4.5vw; left: 10vw; z-index: 1;}
  .sec-2-showpics img.sec-2-photo-2 { width: 35vw; height: auto; position: relative; z-index: 2;}
  .sec-2-showpics img.sec-2-photo-3 { width: 35vw; height: auto; position: relative; top: -4.75vw; left: -15vw; z-index: 1;}

  .sec-2-showpics-mo { display: none;}


  /************ section#sec-3 ************/

  section#sec-3 { clear: both; width: 100%; overflow: hidden;}

  .sec-3-slide-box { width: 100%; margin: 50px 0;}
  .sec-3-slide-box img.mobile-1 { width: 17.6vw; height: auto; margin: 0 auto; position: relative; z-index: 1;}
  .sec-3-slide-box img.mobile-2 { width: 17.75vw; height: auto; margin: 0 auto; position: relative; z-index: 1;}
  .sec-3-slide-box img.mobile-3 { width: 18.1vw; height: auto; margin: 0 auto; position: relative; z-index: 1;}
  .sec-3-slide-box .infor-text-1 { width: 24vw; position: absolute; top: 8vw; left: calc(50% - 12vw + 23vw); z-index: 3;}
  .sec-3-slide-box .infor-text-1 .step-num { width: 100%; font-size: 6vw; font-weight: 600; font-family: sans-serif;}
  .sec-3-slide-box .infor-text-1 .sub-title { width: 100%; margin: 1.5vw 0 0 0; font-size: 3vw; font-weight: 600;}
  .sec-3-slide-box .infor-text-1 .text { width: 100%; margin: 1vw 0 0 0; font-size: 1.6vw; font-weight: 500;}
  .sec-3-slide-box .infor-text-2 { width: 24vw; position: absolute; top: 8vw; left: calc(50% - 12vw - 23vw); z-index: 3;}
  .sec-3-slide-box .infor-text-2 .step-num { width: 100%; font-size: 6vw; font-weight: 600; font-family: sans-serif;}
  .sec-3-slide-box .infor-text-2 .sub-title { width: 100%; margin: 1.5vw 0 0 0; font-size: 3vw; font-weight: 600;}
  .sec-3-slide-box .infor-text-2 .text { width: 100%; margin: 1vw 0 0 0; font-size: 1.6vw; font-weight: 500;}
  .sec-3-slide-box img.finger { width: 21vw; height: auto; position: absolute; bottom: 1vw; left: calc(50% - 12vw + 14vw); z-index: 2;}
  .sec-3-slide-box img.arrow-next, 
  .sec-3-slide-box img.arrow-prev { width: 5.15vw; height: auto; position: absolute; bottom: 11vw; right: 10vw; z-index: 4; cursor: pointer;}
  .sec-3-slide-box img.tag-1 { width: 9vw; height: auto; position: absolute; top: 30vw; left: calc(50% - 10vw - 16.5vw); z-index: 2;}
  .sec-3-slide-box img.tag-2 { width: 7.5vw; height: auto; position: absolute; top: 32.5vw; left: calc(50% - 10vw - 9.25vw); z-index: 2;}
  .sec-3-slide-box img.tag-3 { width: 7.8vw; height: auto; position: absolute; top: 15vw; left: calc(50% - 10vw + 24vw); z-index: 2;}
  .sec-3-slide-box img.tag-4 { width: 9.7vw; height: auto; position: absolute; top: 17.8vw; left: calc(50% - 10vw + 29.5vw); z-index: 2;}
  .sec-3-slide-box img.tag-5 { width: 7.5vw; height: auto; position: absolute; top: 9vw; right: calc(50% - 10vw - 26vw); z-index: 2;}
  .sec-3-slide-box img.tag-6 { width: 9.6vw; height: auto; position: absolute; bottom: 19vw; left: calc(50% - 10vw + 31.5vw); z-index: 2;}


  /************ section#sec-3-mo ************/

  section#sec-3-mo { display: none;}


  /************ section#sec-4 ************/

  section#sec-4 { clear: both; width: 100%; overflow: hidden;}

  .sec-4-content { clear: both; width: 100%; display: flex; justify-content: center; align-items: flex-start;}
  .sec-4-content .col-lf { width: 60%; padding: 0 0 0 0; box-sizing: border-box; display: flex; justify-content: flex-end; align-items: flex-start; flex-wrap: wrap;}
  .sec-4-content .col-lf img.action-1 { width: 21vw; height: auto; margin: 4vw 1vw 0 0; position: relative; z-index: 1;}
  .sec-4-content .col-lf img.action-2 { width: 21vw; height: auto; position: relative; z-index: 1;}
  .sec-4-content .col-lf img.action-3 { width: 21vw; height: auto; margin: 4vw 1.5vw 0 0; position: relative; z-index: 1;}
  .sec-4-content .col-lf img.action-4 { width: 21vw; height: auto; position: relative; top: -2.5vw; right: 5vw; z-index: 2;}
  .sec-4-content .col-rt { width: 40%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .sec-4-content .col-rt img.icon-location { width: 10.65vw; height: auto; margin: 10vw 0 0 0; position: relative; z-index: 1;}
  .sec-4-content .col-rt img.hand { width: 32.15vw; height: auto; position: relative; top: 0; right: 7vw; z-index: 2;}


  /************ section#sec-4-mo ************/

  section#sec-4-mo { display: none;}


  /************ section#sec-5 ************/

  section#sec-5 { clear: both; width: 100%; padding: 0 0 300px 0;}

  .sec-5-download { width: 260px; margin: 0 auto;}
  .sec-5-download a { width: 100%; padding: 20px 0; color: #000; font-size: 1.8rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 60px; background-color: #D9F27E; display: block;}
  .sec-5-download a:hover { color: #222;}

  .sec-5-text { clear: both; width: 100%; padding: 10px 0 0 0; font-size: 1.2rem; font-weight: 500; text-align: center; text-align: center;}

  .sec-5-store-dl { clear: both; width: 100%; margin: 60px 0 0 0; display: flex; justify-content: center; align-items: center;}
  .sec-5-store-dl img.store { width: 284px; height: auto; margin: 0 30px;}


  /************ section#page-privacy ************/

  section#page-privacy { clear: both; width: 100%; padding: 40px calc(50% - 480px) 100px calc(50% - 480px); box-sizing: border-box;}

  .page-privacy-con { width: 100%; font-size: 1.2rem; line-height: 2em;}
  .page-privacy-con .page-title { width: 100%; padding: 0 0 40px 0; font-size: 2.4rem; font-weight: 600;}
  .page-privacy-con .sub-title { width: 100%; margin: 20px 0; color: #222; font-size: 1.8rem; font-weight: 500; border-bottom: 4px #2980b9 solid;}


  /************ footer#pc ************/

  footer#pc { clear: both; width: 100%; padding: 100px 10vw; background-color: #222; box-sizing: border-box;}

  img.footer-logo { width: 223px; height: auto; margin: 0 auto;}

  .footer-links { clear: both; width: 100%; margin: 100px 0 0 0; color: #fff; font-size: 1rem; font-weight: 500; line-height: 2em; text-align: center;}
  .footer-links a { color: #fff; text-decoration: none;}
  .footer-links a:hover { color: #fff; border-bottom: 1px #fff solid;}

  .footer-notice { clear: both; width: 100%; margin: 40px 0 0 0; color: #fff; font-size: 1rem; font-weight: 500; line-height: 2em; text-align: center;}


  /************ footer#mo ************/

  footer#mo { display: none;}


}

@media screen and (min-width: 768px) and (max-width: 1023px) {

  /************ header + nav ************/

  header { width: 100%; padding: 5vw 4vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}

  img.header-logo { width: 223px; height: auto;}

  nav#mo { display: none;}
  nav#pc { width: calc(100% - 223px - 170px); padding: 0 20px; box-sizing: border-box;}
  nav#pc ul.nav-menu { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  nav#pc ul.nav-menu li { padding: 0; margin: 0 20px;}
  nav#pc ul.nav-menu li a { color: #000; font-size: 1.1rem; font-weight: 600; text-decoration: none;}
  nav#pc ul.nav-menu li a:hover { color: #000; border-bottom: 1px #000 solid;}

  ul.nav-menu-mo { display: none;}

  .header-download-bt-mo { display: none;}
  .header-download-bt { width: 170px;}
  .header-download-bt a { width: 100%; padding: 15px 0; color: #000; font-size: 1.1rem; font-weight: 600; text-align: center; text-decoration: none; border-radius: 30px; background-color: #D9F27E; display: block;}
  .header-download-bt a:hover { color: #222;}


  /************ section#search-act-box ************/

  section#search-act-box { clear: both; width: 100%;}

  .search-act-box { width: 600px; height: 93px; margin: 0 auto; background-image: url("../images/search_box_bg_700.png"); background-repeat: no-repeat; background-size: 600px 93px; background-position: left top; display: flex; justify-content: flex-start; align-items: center;}
  .search-act-box input[type=search].search-input { width: 480px; height: 73px; margin: 0 0 0 85px; color: #000; font-size: 3rem; font-weight: 500; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #fff;}
  .search-act-box .search-input::placeholder { color: #CDCDCD; line-height: 1em;}
  .search-act-box .search-input:focus { outline: none;}


  /************ section#sec-1 ************/

  section#sec-1 { clear: both; width: 100%; overflow: hidden;}

  .sec-1-text-slogen { width: 100%; padding: 0 0 100px 0; font-size: 3rem; font-weight: 600; line-height: 1.6em; text-align: center;}
  
  .sec-1-showpics { clear: both; width: 100%; padding: 0 0 55px 0; display: flex; justify-content: center; align-items: flex-start;}
  .sec-1-showpics img.sec-1-card-1 { width: 19.5vw; height: auto; position: relative; top: 10px; left: 12vw; z-index: 1; cursor: pointer;}
  .sec-1-showpics img.sec-1-card-2 { width: 19.5vw; height: auto; position: relative; top: 45px; left: 6vw; z-index: 2; cursor: pointer;}
  .sec-1-showpics img.sec-1-card-3 { width: 19.5vw; height: auto; position: relative; z-index: 3; cursor: pointer;}
  .sec-1-showpics img.sec-1-card-4 { width: 19.5vw; height: auto; position: relative; top: 55px; left: -7vw; z-index: 5; cursor: pointer;}
  .sec-1-showpics img.sec-1-card-5 { width: 19.5vw; height: auto; position: relative; top: 40px; left: -14vw; z-index: 4; cursor: pointer;}
  .sec-1-showpics img.sec-1-card-1:hover, 
  .sec-1-showpics img.sec-1-card-2:hover, 
  .sec-1-showpics img.sec-1-card-3:hover, 
  .sec-1-showpics img.sec-1-card-4:hover, 
  .sec-1-showpics img.sec-1-card-5:hover { z-index: 6;}

  .sec-1-showpics-mo { display: none;}


  /************ section#sec-2 ************/

  section#sec-2 { clear: both; width: 100%; overflow: hidden;}

  .sec-2-text-slogen { width: 100%; padding: 0 0 150px 0; font-size: 3rem; font-weight: 600; line-height: 1.6em; text-align: center;}

  .sec-2-showpics { clear: both; width: 100%; display: flex; justify-content: center; align-items: flex-start;}
  .sec-2-showpics img.sec-2-photo-1 { width: 35vw; height: auto; position: relative; top: -4.5vw; left: 10vw; z-index: 1;}
  .sec-2-showpics img.sec-2-photo-2 { width: 35vw; height: auto; position: relative; z-index: 2;}
  .sec-2-showpics img.sec-2-photo-3 { width: 35vw; height: auto; position: relative; top: -4.75vw; left: -15vw; z-index: 1;}

  .sec-2-showpics-mo { display: none;}


  /************ section#sec-3 ************/

  section#sec-3 { clear: both; width: 100%; overflow: hidden;}

  .sec-3-slide-box { width: 100%; margin: 50px 0;}
  .sec-3-slide-box img.mobile-1 { width: 17.6vw; height: auto; margin: 0 auto; position: relative; z-index: 1;}
  .sec-3-slide-box img.mobile-2 { width: 17.75vw; height: auto; margin: 0 auto; position: relative; z-index: 1;}
  .sec-3-slide-box img.mobile-3 { width: 18.1vw; height: auto; margin: 0 auto; position: relative; z-index: 1;}
  .sec-3-slide-box .infor-text-1 { width: 24vw; position: absolute; top: 8vw; left: calc(50% - 12vw + 23vw); z-index: 3;}
  .sec-3-slide-box .infor-text-1 .step-num { width: 100%; font-size: 6vw; font-weight: 600; font-family: sans-serif;}
  .sec-3-slide-box .infor-text-1 .sub-title { width: 100%; margin: 1.5vw 0 0 0; font-size: 3vw; font-weight: 600;}
  .sec-3-slide-box .infor-text-1 .text { width: 100%; margin: 1vw 0 0 0; font-size: 1.6vw; font-weight: 500;}
  .sec-3-slide-box .infor-text-2 { width: 24vw; position: absolute; top: 8vw; left: calc(50% - 12vw - 23vw); z-index: 3;}
  .sec-3-slide-box .infor-text-2 .step-num { width: 100%; font-size: 6vw; font-weight: 600; font-family: sans-serif;}
  .sec-3-slide-box .infor-text-2 .sub-title { width: 100%; margin: 1.5vw 0 0 0; font-size: 3vw; font-weight: 600;}
  .sec-3-slide-box .infor-text-2 .text { width: 100%; margin: 1vw 0 0 0; font-size: 1.6vw; font-weight: 500;}
  .sec-3-slide-box img.finger { width: 21vw; height: auto; position: absolute; bottom: 1vw; left: calc(50% - 12vw + 14vw); z-index: 2;}
  .sec-3-slide-box img.arrow-next, 
  .sec-3-slide-box img.arrow-prev { width: 5.15vw; height: auto; position: absolute; bottom: 11vw; right: 10vw; z-index: 4; cursor: pointer;}
  .sec-3-slide-box img.tag-1 { width: 9vw; height: auto; position: absolute; top: 30vw; left: calc(50% - 10vw - 16.5vw); z-index: 2;}
  .sec-3-slide-box img.tag-2 { width: 7.5vw; height: auto; position: absolute; top: 32.5vw; left: calc(50% - 10vw - 9.25vw); z-index: 2;}
  .sec-3-slide-box img.tag-3 { width: 7.8vw; height: auto; position: absolute; top: 15vw; left: calc(50% - 10vw + 24vw); z-index: 2;}
  .sec-3-slide-box img.tag-4 { width: 9.7vw; height: auto; position: absolute; top: 17.8vw; left: calc(50% - 10vw + 29.5vw); z-index: 2;}
  .sec-3-slide-box img.tag-5 { width: 7.5vw; height: auto; position: absolute; top: 9vw; right: calc(50% - 10vw - 26vw); z-index: 2;}
  .sec-3-slide-box img.tag-6 { width: 9.6vw; height: auto; position: absolute; bottom: 19vw; left: calc(50% - 10vw + 31.5vw); z-index: 2;}


  /************ section#sec-3-mo ************/

  section#sec-3-mo { display: none;}


  /************ section#sec-4 ************/

  section#sec-4 { clear: both; width: 100%; overflow: hidden;}

  .sec-4-content { clear: both; width: 100%; display: flex; justify-content: center; align-items: flex-start;}
  .sec-4-content .col-lf { width: 60%; padding: 0 0 0 0; box-sizing: border-box; display: flex; justify-content: flex-end; align-items: flex-start; flex-wrap: wrap;}
  .sec-4-content .col-lf img.action-1 { width: 21vw; height: auto; margin: 4vw 1vw 0 0; position: relative; z-index: 1;}
  .sec-4-content .col-lf img.action-2 { width: 21vw; height: auto; position: relative; z-index: 1;}
  .sec-4-content .col-lf img.action-3 { width: 21vw; height: auto; margin: 4vw 1.5vw 0 0; position: relative; z-index: 1;}
  .sec-4-content .col-lf img.action-4 { width: 21vw; height: auto; position: relative; top: -2.5vw; right: 5vw; z-index: 2;}
  .sec-4-content .col-rt { width: 40%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .sec-4-content .col-rt img.icon-location { width: 10.65vw; height: auto; margin: 10vw 0 0 0; position: relative; z-index: 1;}
  .sec-4-content .col-rt img.hand { width: 32.15vw; height: auto; position: relative; top: 0; right: 7vw; z-index: 2;}


  /************ section#sec-4-mo ************/

  section#sec-4-mo { display: none;}


  /************ section#sec-5 ************/

  section#sec-5 { clear: both; width: 100%; padding: 0 0 300px 0;}

  .sec-5-download { width: 260px; margin: 0 auto;}
  .sec-5-download a { width: 100%; padding: 20px 0; color: #000; font-size: 1.8rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 60px; background-color: #D9F27E; display: block;}
  .sec-5-download a:hover { color: #222;}

  .sec-5-text { clear: both; width: 100%; padding: 10px 0 0 0; font-size: 1.2rem; font-weight: 500; text-align: center; text-align: center;}

  .sec-5-store-dl { clear: both; width: 100%; margin: 60px 0 0 0; display: flex; justify-content: center; align-items: center;}
  .sec-5-store-dl img.store { width: 284px; height: auto; margin: 0 30px;}


  /************ section#page-privacy ************/

  section#page-privacy { clear: both; width: 100%; padding: 80px 40px 100px 40px; box-sizing: border-box;}

  .page-privacy-con { width: 100%; font-size: 1.2rem; line-height: 2em;}
  .page-privacy-con .page-title { width: 100%; padding: 0 0 40px 0; font-size: 2.4rem; font-weight: 600;}
  .page-privacy-con .sub-title { width: 100%; margin: 20px 0; color: #222; font-size: 1.8rem; font-weight: 500; border-bottom: 4px #2980b9 solid;}


  /************ footer#pc ************/

  footer#pc { clear: both; width: 100%; padding: 100px 6vw; background-color: #222; box-sizing: border-box;}

  img.footer-logo { width: 223px; height: auto; margin: 0 auto;}

  .footer-links { clear: both; width: 100%; margin: 100px 0 0 0; color: #fff; font-size: 1rem; font-weight: 500; line-height: 2em; text-align: center;}
  .footer-links a { color: #fff; text-decoration: none;}
  .footer-links a:hover { color: #fff; border-bottom: 1px #fff solid;}

  .footer-notice { clear: both; width: 100%; margin: 40px 0 0 0; color: #fff; font-size: 1rem; font-weight: 500; line-height: 2em; text-align: center;}


  /************ footer#mo ************/

  footer#mo { display: none;}


}

@media screen and (max-width: 767px) {

  /************ header + nav ************/

  header { width: 100%; padding: 20px; box-sizing: border-box; position: relative;}

  img.header-logo { width: 142px; height: auto; margin: 0 auto;}

  nav#pc { display: none;}
  nav#mo { width: 50px; position: absolute; top: 15px; right: 20px; z-index: 9;}
  nav#mo .nav-icon { width: 50px; color: #000; font-size: 2.2rem; text-align: center;}
  
  ul.nav-menu { display: none;}
  ul.nav-menu-mo { width: 100%; padding: 80px 0; margin: 0; list-style: none; background-color: #222; display: none; position: absolute; top: 80px; left: 0; z-index: 9999;}
  ul.nav-menu-mo li { width: 100%; padding: 0; margin: 0;}
  ul.nav-menu-mo li a { width: 100%; padding: 20px; color: #fff; font-size: 1.1rem; font-weight: 600; text-decoration: none; box-sizing: border-box; display: block;}
  ul.nav-menu-mo li a:hover { color: #fff;}

  .header-download-bt { display: none;}
  .header-download-bt-mo { width: 170px; margin: 40px auto 0 auto;}
  .header-download-bt-mo a { width: 100%; padding: 15px 0; color: #000; font-size: 1.1rem; font-weight: 600; text-align: center; text-decoration: none; border-radius: 30px; background-color: #D9F27E; display: block;}
  .header-download-bt-mo a:hover { color: #222;}


  /************ section#search-act-box ************/

  section#search-act-box { clear: both; width: 100%;}

  .search-act-box { width: 80vw; height: 12.4vw; margin: 0 auto; background-image: url("../images/search_box_bg.png"); background-repeat: no-repeat; background-size: 80vw 12.4vw; background-position: left top; display: flex; justify-content: flex-start; align-items: center;}
  .search-act-box input[type=search].search-input { width: 64vw; height: 10vw; color: #000; font-size: 6vw; font-weight: 500; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; margin: 0 0 0 12vw; border: 0; background-color: #fff;}
  .search-act-box .search-input::placeholder { color: #CDCDCD; line-height: 1em;}
  .search-act-box .search-input:focus { outline: none;}


  /************ section#sec-1 ************/

  section#sec-1 { clear: both; width: 100%; overflow: hidden;}

  .sec-1-text-slogen { width: 100%; padding: 0 0 100px 0; font-size: 7vw; font-weight: 600; line-height: 1.6em; text-align: center;}

  .sec-1-showpics { display: none;}

  .sec-1-showpics-mo { clear: both; width: 70vw; margin: 0 auto;}
  .sec-1-showpics-mo img.sec-1-card-1 { width: 70vw; height: auto;}
  .sec-1-showpics-mo img.sec-1-card-2 { width: 70vw; height: auto;}
  .sec-1-showpics-mo img.sec-1-card-3 { width: 70vw; height: auto;}
  .sec-1-showpics-mo img.sec-1-card-4 { width: 70vw; height: auto;}
  .sec-1-showpics-mo img.sec-1-card-5 { width: 70vw; height: auto;}


  /************ section#sec-2 ************/

  section#sec-2 { clear: both; width: 100%; overflow: hidden;}

  .sec-2-text-slogen { width: 100%; padding: 0 0 100px 0; font-size: 7vw; font-weight: 600; line-height: 1.6em; text-align: center;}

  .sec-2-showpics { display: none;}
  .sec-2-showpics-mo { clear: both; width: 70vw; margin: 0 auto;}
  .sec-2-showpics-mo img.sec-2-photo-1 { width: 70vw; height: auto; position: relative; z-index: 1;}
  .sec-2-showpics-mo img.sec-2-photo-2 { width: 70vw; height: auto; margin: -22vw 0 0 0; position: relative; z-index: 2;}
  .sec-2-showpics-mo img.sec-2-photo-3 { width: 70vw; height: auto; margin: -20vw 0 0 0; position: relative; z-index: 3;}


  /************ section#sec-3 ************/

  section#sec-3 { display: none;}


  /************ section#sec-3-mo ************/

  section#sec-3-mo { clear: both; width: 100%; padding: 100px 20px 50px 20px; box-sizing: border-box; background-color: #fff; overflow: hidden;}

  .sec-3-slide-box { width: 100%; margin: 0 auto;}
  .sec-3-slide-box .sub-title { width: 100%; font-size: 7vw; font-weight: 600; text-align: center;}
  .sec-3-slide-box .text { width: 100%; margin: 2vw 0 0 0; font-size: 4vw; font-weight: 500; text-align: center;}
  .sec-3-slide-box .mobile-pic { width: 100%; margin: 60px 0 0 0; display: flex; justify-content: center; align-items: center;}
  .sec-3-slide-box .mobile-pic img.mobile { width: 70%; height: auto;}
  .sec-3-slide-box .mobile-pic img.arrow-next-mo { width: 5vw; height: auto; margin: 0 0 0 5vw;}
  .sec-3-slide-box .mobile-pic img.arrow-prev-mo { width: 5vw; height: auto; margin: 0 5vw 0 0;}


  /************ section#sec-4 ************/

  section#sec-4 { display: none;}


  /************ section#sec-4-mo ************/

  section#sec-4-mo { clear: both; width: 100%; overflow: hidden;}

  .sec-4-content { clear: both; width: 100%; position: relative;}
  .sec-4-content img.action-1 { width: 66vw; height: auto; margin: 0 0 0 10vw; position: relative; z-index: 1;}
  .sec-4-content img.hand { width: 55vw; height: auto; margin: -27vw 0 0 64vw; position: relative; z-index: 2;}
  .sec-4-content img.action-2 { width: 66vw; height: auto; margin: -10vw 0 0 25vw; position: relative; z-index: 3;}
  .sec-4-content img.action-3 { width: 66vw; height: auto; margin: -4.5vw 0 0 10vw; position: relative; z-index: 1;}
  .sec-4-content img.action-4 { width: 66vw; height: auto; margin: -4.5vw 0 0 25vw; position: relative; z-index: 2;}
  .sec-4-content img.location { width: 18vw; height: auto; margin: -26vw 0 0 3vw; position: relative; z-index: 3;}


  /************ section#sec-5 ************/

  section#sec-5 { clear: both; width: 100%; padding: 0 0 200px 0;}

  .sec-5-download { display: none;}

  .sec-5-text { display: none;}

  .sec-5-store-dl { clear: both; width: 100%; margin: 60px 0 0 0;}
  .sec-5-store-dl img.store { width: 284px; height: auto; margin: 0 auto 30px auto;}


  /************ section#page-privacy ************/

  section#page-privacy { clear: both; width: 100%; padding: 80px 20px 100px 20px; box-sizing: border-box;}

  .page-privacy-con { width: 100%; font-size: 1.2rem; line-height: 2em;}
  .page-privacy-con .page-title { width: 100%; padding: 0 0 40px 0; font-size: 2.4rem; font-weight: 600;}
  .page-privacy-con .sub-title { width: 100%; margin: 20px 0; color: #222; font-size: 1.8rem; font-weight: 500; border-bottom: 4px #2980b9 solid;}


  /************ footer#pc ************/

  footer#pc { display: none;}

  
  /************ footer#mo ************/

  footer#mo { clear: both; width: 100%; padding: 100px 20px; background-color: #222; box-sizing: border-box;}

  img.footer-logo { width: 142px; height: auto; margin: 0 auto;}

  .social-icons { clear: both; width: 100%; margin: 60px 0; display: flex; justify-content: center; align-items: center;}
  .social-icons a { padding: 0 20px; color: #fff; font-size: 2rem; display: block;}
  .social-icons a:hover { color: #CDCDCD;}

  .footer-links { clear: both; width: 100%; margin: 100px 0 0 0; color: #fff; font-size: 0.8rem; line-height: 2em; text-align: center;}
  .footer-links a { color: #fff; text-decoration: none;}
  .footer-links a:hover { color: #fff; border-bottom: 1px #fff solid;}

  .footer-notice { clear: both; width: 100%; margin: 40px 0 0 0; color: #fff; font-size: 0.8rem; line-height: 2em; text-align: center;}
  

}