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

.banner {
   margin-top: 30px;
   width: 100%;
   background-image: url(../img/sky.png);
   background-repeat: no-repeat;
   background-position: top center;
   background-size: cover;
   background-attachment: fixed;
}
.banner2 {
   width: 100%;
   background-color: #f5af0a;
   background-image: url('../img/pic.png');
   background-repeat: no-repeat;
   background-position: left;
   background-size: cover;
}
.w950 {
   position: relative;
   margin: 0 auto;
   padding: 10em 0;
   max-width: 950px;   
}
.logo {
   position: absolute;
   z-index: 9;
   left: -5px;
   top: 60px;
   max-width: 640px;
   /* top: 50px; */
   /* max-width: 530px; */
   overflow: hidden;
}
.model {
   position: absolute;
   z-index: 3;
   right: 0px;
   bottom: -128px;
   max-width: 350px;
   overflow: hidden;
}
.attendant .model {
   bottom: -102px;
}
.logo img,
.model img {
   width: 100%; 
}
.page {
   position: relative;
   z-index: 10;
   margin: 0 auto;
   padding: 50px 0;  
   max-width: 950px;
   background-color: #ffffff;  
}
.wel {
   margin: 0 auto; 
   max-width: 950px;
   height: 100px;
   color: #ffffff;
   font-size: 40px;
   line-height: 100px;
   text-align: left;
   font-weight: 700;
   font-family: "Noto Sans TC";
   letter-spacing: 2px;
   text-shadow: 1px 1px 2px rgba(97, 68, 0, 0.8);
   /*background-image:url(../img/pic.png);
   background-repeat: no-repeat;
   background-position: center;
   background-size:cover;*/ 
}
.bf {
   display: flex;
   align-items: center;
   margin-bottom: 25px;
   padding-bottom: 10px;
   width: 100%;
   border-bottom: 2px solid #fbc618;
   overflow: hidden;
}
.bf h1 {
   padding-bottom: 2px;
   font-size: 22px;
   color: #5d5b53;
   font-weight: 500;
   font-family: "Noto Sans TC";
}
.bf img {
   float: left;
   margin: 0px 8px 0 0;
}
.bf.tabs {
   padding-bottom: 0;
   border-bottom: 0;
}
.tabs a {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 10px;
   width: 50%;
   background-color: #ffffd4;
   border-width: 1px 1px 2px 1px;
   border-color: #fbc618;
   border-style: solid;
   border-radius: 6px 6px 0 0;
}
.tabs a.focus,
.tabs a:hover,
.tabs a.focus:hover {
   color: #5d5b53;
   background-color: #ffffff;
}
.tabs a.focus,
.tabs a.focus:hover {
   border-bottom-color: transparent;
   cursor: default;
}
.tabs a h1 {
   color: #fbc618;
}
.tabs a.focus h1,
.tabs a:hover h1,
.tabs a.focus:hover h1 {
   color: #5d5b53;
}
.work_list_fly,
.work_list_fly1,
.work_list_fly2 {
   margin-bottom: 25px;
}
.work_list_fly {
   width: 100%;
   list-style: none;
}
.work_list_fly.shrink {
   width: 580px;
   list-style: none;
}
.work_list_fly.flex {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
}
.work_list_fly.bg01 ol {
   margin-bottom: 15px;
}
.work_list_fly br {
   display: none;
}
[class^=work_list_fly] li {
   font-size: 16px;
   color: #5d5b53;
   line-height: 1.8;
}
.work_list_fly1 li {
   margin: 0 0 7px 90px;
   font-size: 16px;
   color: #5d5b53;
   line-height: 1.8; 
   text-indent: -90px;
   list-style: none;
}
.work_list_fly1 li > ul li {
   margin-left: 0;
   text-indent: -24px;
}
.work_list_fly1 .font_four {
   margin-left: 100px;
   text-indent: -100px;
}
.work_list_fly .font_two {
   margin-left: 18px;
   text-indent: -18px;
}
.list_name {
   float: left;
   color: #5d5b53;
   font-weight: bold;
}
.list_name2 {
   margin-bottom: 15px;
   width: 100%;
   font-size: 22px;
   color: #f5af0a;
   font-weight: 500;
   font-family: "Noto Sans TC";
}
.list_name3 {
   margin-bottom: 13px;
   font-weight: bold;
   color: #5d5b53;
}
.work_list_fly2 ,
.work_list_fly3 {
  width: 100%;
  margin-bottom: 28px;
}
.work_list_fly2 ol,
.work_list_fly3 ol {
   list-style: decimal;
   padding-left: 20px;
}
.work_list_fly2 li {
   font-size: 16px;
   color: #5d5b53;
   line-height: 1.8;
   margin-bottom: 5px;
   text-align: justify;
}
.attendant .work_list_fly2 li:last-child {
   margin-left: -20px;
   list-style: none;
}
.bg01 {
   padding: 25px;
   background-color: #ffffd4;
}
.bg02 {
   background-color: #ffffff;
   padding: 0 25px;
}
.bg01 ol,
.bg02 ol {
   padding-left: 20px;
}
.bg01 ol li,
.bg02 ol li {
   font-size: 16px;
   color: #5d5b53;
   line-height: 1.8;
}
.bg01 ol li:last-child {
   color: #e20b4d;
   text-indent: -20px;
   list-style: none;
}
.attendant .bg01 ol li:last-child {
   color: #5d5b53;
   text-indent: 0;
   list-style: decimal;
}
.attendant .bg01 ol li:last-child span {
   color: #e20b4d;
}
.bg02 a {
   color: #ff8400; 
}
.bg02 a:hover {
   text-decoration: underline;
}
.download_font {
   display: inline-block;
   margin-left: 5px;
   padding: 5px 12px;
   color: #ffffff;
   line-height: 1;
   background: #f5af0a;
   border: 1px solid #5d5b53;
   border-radius: 4px;
   transition: all 0.3s;
}
.download_font:hover {
   color: #5d5b53;
   background: #ffffff;
   border-color: #5d5b53;
}
.download_font2 {
   /* font-size: 18px; */
   color: #f5af0a;
   transition: all 0.3s;
}
.download_font2:hover {
   color: #ff8400;
}
.go {
   float: right;
   width: 200px;
   height: 40px;
   font-size: 21px;
   color: #ffffff;
   line-height: 38px;
   text-align: center;
   font-weight: 500;
   font-family: "Noto Sans TC";
   text-indent: -4px;
   letter-spacing: 3px;
   border-radius: 5px;
   background-color: #f5af0a;
   background-image: url(../img/button.png);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   text-shadow: 1px 1px 2px rgba(97, 68, 0, 0.5);
   box-shadow: 0px 1px 2px rgba(97, 68, 0, 0.5);
   transition: all 0.3s;
}
.go.close {
   background-color: #818181;
   cursor: context-menu;
}
.go.close:hover {
   background-color: #818181;
}
.go:hover {
   background-color: #ff8400;
}
.clear {
   clear: both;
}
.photo1 {
   position: absolute;
   right: 7px;
   top: 110px;
   z-index: 3;
   width: 330px;
}
.photo1 img {
   width: 100%;
  border-radius: 16px;
  border: 2px solid #fbc618;
}
.air {
   position: absolute;
   z-index: 2;
   top: 115px;
   left: 410px;
   max-width: 143px;
}
.avoidPhoto {
   width: calc(100% - 340px)
}
.qa {
   margin-bottom: 20px;
}
.qa p {
   margin-bottom: 5px;
   font-size: 16px;
   color: #ad722e;
   line-height: 1.6;
}
.qa .ans {
   padding-left: 37px;
   font-size: 16px;
   color: #5d5b53;
   line-height: 1.6;
}
.qa ol.ans {
   padding-left: 57px;
}

@media screen and (max-width: 980px) {
   .logo {
      max-width: 470px;
      /* max-width: 400px; */
      left: 30px;
      top: 40px;
      /* top: 30px; */
   }
   .model {
      right: 20px;
      bottom: -102px;
      max-width: 260px;
   }
   .attendant .model {
      bottom: -82px;
      max-width: 230px;
   }
   .w950 {
      padding: 7em 0;
   }
   .banner {
      background-attachment: inherit;
   }
   .page {
      padding: 30px 30px 20px;
   }
   .wel {
      padding: 0 30px;
      font-size: 32px;
      height: 80px;
      line-height: 80px;
   }
   .photo1 {
      width: 170px;
      right: 42px;
      top: 90px;
   }
   .air {
      max-width: 110px;
      top: 82px;
      left: 336px;
   }
   .avoidPhoto {
      width: 100%;
   }
   .work_list_fly.shrink {
      width: calc(100% - 205px);
   }
}

@media screen and (max-width: 768px) {
   .logo {
      max-width: 330px;
      /* max-width: 300px; */
      left: 50%;
      margin-left: -165px;
      top: 30px;
      /* margin-left: -150px; */
      /* top: 22px; */
   }
   .model {
      max-width: 280px;
      left: 50%;
      margin-left: -140px;
      bottom: -23px;
   }
   .attendant .model {
      bottom: -2px;
      margin-left: -125px;
      max-width: 250px;
   }
   .w950 {
      padding: 14.5em 0;
      overflow: hidden;
   }
   .page {
      padding: 30px 16px 70px;
   }
   .wel {
      height: 60px;
      font-size: 26px;
      line-height: 60px;
      text-align: center;      
   }
   .list_name,
   .list_name2 {
      width: 100%;
   }
   .work_list_fly.shrink {
      width: 100%;
   }
   .work_list_fly.bg01 ol {
      margin-bottom: 0;
   }
   .work_list_fly br {
      display: block;
   }
   /* .work_list_fly2 ol {
      margin-top: -24px;
   } */
   .work_list_fly1 li {
      margin-left: 65px;
      text-indent: -65px;
   }
   .work_list_fly1 li > ul li {
      margin-left: 24px;
      text-indent: -24px;
   }
   .work_list_fly1 ul li:last-child {
      margin-left: 50px;
      text-indent: -50px;
   }
   .go {
      font-size: 27px;
      width: 100%;
      height: 50px;
      line-height: 48px;
      background-image: none;
      text-indent: -3px;
      position: static;
      right: auto;
      bottom: auto;
   }
   .footergo {
      position: fixed;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 999;
      padding: 10px 16px;
      background-color: rgba(0, 0, 0, 0.4);
   }
   .photo1 {
      width: 100%;
      position: initial;
      margin-bottom: 38px;
   }
   .air {
      max-width: 77px;
      top: 38px;
      left: 260px;
   }
   .avoidPhoto {
      width: 100%;
   }
}

@media screen and (max-width: 480px) {
   .bg01 {
      padding: 18px 18px 10px;
   }
  .bg02 {
      padding: 0 18px;
   }
   .list_name2 {
      margin-bottom: 10px;
      font-size: 20px;
   }
   .btn_go {
      font-size: 24px;
   }
}