/*公司標準色#2F2F2F 深藍1 ｜#F6F5F1 米灰｜#969697 深灰
#2A3F58 深藍2 ｜ #5985B9 藍 ｜ #FC875B 橘*/


@media  (max-width: 1000px), (orientation: portrait) {



#filter-buttons button{font-size:4vw;border-radius:4vw;margin:5px 0px}
.sort-btn{font-size:4vw;border-radius:4vw;margin:5px 0px}

  .all{background:#F6F5F1;box-sizing:border-box;max-width:100%;padding:10px;}
  .all2{all:unset;align-self:center;background:#F6F5F1;box-sizing:border-box;max-width:80%;margin-left:10px;}

  html,body{
    background:#F6F5F1;
      scrollbar-gutter: stable;
      overflow: -moz-hidden-unscrollable;
      -ms-overflow-style: none;
      box-sizing: content-box;
      font-size:3.5vw;-webkit-font-smoothing: antialiased; /* for safari & conrome */
      -moz-osx-font-smoothing: grayscale; /* for firefox */
  }
  
  
#div1, #div2, #div3, #div4, #div6, #div7, #div4_2{
      min-height:100vh;
      max-width:100%;
      box-sizing: content-box;
      overflow:hidden;
      overflow: -moz-hidden-unscrollable;
      -ms-overflow-style: none;
}
  

  
#gotop{display:none;}
.contact_button{display: none;}
.contact_button img{display:none;}
  
  
  
.contact_button2{display:flexbox;z-index:99;
vertical-align:middle;align-items:center;
justify-content:center;justify-self:center;
justify-items:center;/*自己垂直置中*/align-self:center;
/*內容物垂直置中*/align-content:center;overflow:hidden;
width:100%;height:12vw;
background:#FC875B;position:fixed;
          right:0px;bottom:0px;padding:0px;
          cursor:pointer;font-size:6vw;
          line-height:1.2;
          transition: all .4s ease-in-out;}
      
      .contact_button2-2 {text-align:center;font-family:'poppins';display:block;overflow:hidden;width:calc(100% - 2px);height:100%;
        vertical-align:middle;align-items:center;justify-content:center;justify-items:center;align-self:center;align-content: center;}
      .contact_button2-2 img{width:calc(100% - 2px);height:100%;}
      .contact_button2-2 a{display:block;width:calc(100% - 2px);height:100%;}
  
  
  
  
  .contact_button2:hover{background:#f3784c;}
  .contact_button2 a{color:#e4e2da;
      text-decoration:none;transition:.6s ease-in-out;}
  
  .contact_button2 a:hover{color:#FFFFFF;text-shadow:#d76941 0px 0px 3px;}
  
  
  
  
  #divz{display:flex;flex-direction:row;justify-content:center;padding-bottom:50px;}

  #div1{display:flex;flex-direction:row;justify-content:center;padding-bottom:0px;}
  #div1_1{display:flex;flex-direction:row;justify-content:center;padding-bottom:0px;min-height:fit-content;height:130vw;}
  .sec1{box-sizing:content-box;width:100%;min-height:50vw;height:180vw;overflow:hidden;
      background:transparent;
      -webkit-backdrop-filter: blur(9px);
      backdrop-filter: blur(80px);/*自己垂直置中*/align-self: center;/*自己垂直置中*/align-self: center;}
  
  
  .sec1 a{color: #2F2F2F;transition:0.5s ease-in;text-decoration: none;}
  .sec1 a:hover{color:#FC875B;}
  .index__1:hover{border-bottom: #fff 1px solid 0.5px;}
  .underline1 {
      display: inline;
      height: 130%;
      background-image:none;
      background-repeat: no-repeat;
      padding-top:4px;
      background-size: 40% 1px;
      background-position: 50% 88%;
      transition:5s ease-in;
      transition-delay: 3s;
      &:hover {
          background-image: linear-gradient(120deg, #FFFFFF 0%, rgba(0,0,0,0)  100%);
          transition:5s ease-out;
          transition-delay: 3s;
      }
    }
  
  .sec{
      margin: 0;
      border: 0;
      padding: 0;
      background-size: cover;
      -webkit-background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      background: url(./img/header.webm);
      background-position-x: 50%;
      background-position-y: 0%;
      position: fixed;
      -webkit-postion: fixed;
      -webkit-overflow-scrolling: touch;
      height:100%;
      width:100%;
      z-index:-1 ;  
  
      }
  
      @keyframes bgmshine{
          0%{opacity:1;}
          70%{opacity:0.5}
          100%{opacity:1;}}
  
  
  
  #all{position: relative;}
  
  
  /* typing animation*/
  
  
  [text-split] {
      opacity: 1;
    }
    
    html.w-editor [text-split] {
      opacity: 0;
    }
    
    .word,
    .char {
      overflow: hidden;
      padding-bottom: 0.1em;
      margin-bottom: -0.1em;
      transform-origin: bottom;
      vertical-align: bottom;
    }
    
    .gradient-text {
      font-size: 48px;
      font-weight: bold;
      background: linear-gradient(to bottom, #a3a3ec 0%, #2A3F58 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .spacer {
      width:100%;
      height: 100vh;
    }
  
  /* typing end */
  
  
  /*menu sticky*/
  
  /*menu*/
  
  .navigation{
    position:fixed;
    margin:0px;width:100%;
    box-sizing:border-box;
    height: 90px;
      -webkit-backdrop-filter: blur(9px);
      backdrop-filter: blur(50px);
  }
      .navigation.ab{width:100%;
          position:fixed;
          box-sizing:content-box;
          position: -webkit-fixed;}
  .menu-ok{z-index:9999;position: fixed;display:flex;top:30px;right:30px;transition:all 0.3s ease-in-out;justify-content: center;flex-direction: row nowrap;}
  .navigation.ab .menu-ok{padding-right:70px;}
  
  .menu-ok-svg:hover{fill: #FC875B;}
  .menu-ok-svg a:hover{fill: #FC875B;}
  .menu-ok:hover {
    cursor: pointer;
    fill: #FC875B;
    stroke:#FC875B;
    transition:all 0.3s ease-in-out;
    transition:fill 0.3s ease-in-out;}
  
  .menu-word {display:none;}
  .menu-right {display:none;}
  
  #content {
      width:100%;height:100%;
      padding:0px 0px 25px 200px;
      right:0px;
      top:0px;
      font-size: 20px;
      border-radius:0px;
      margin:0px;overflow-y:scroll;
    }
  
  
  #content::before {opacity:0;transition:.4s;}
  #content::after {opacity:1;}
  
  #content:active::before{opacity:0;transition:.4s;}
  #content:active::after{opacity:1;}
  
  
  .menu-top{cursorpointer;position:fixed;z-index:9999999;padding-top:0px;padding-right:0px;}
  .menu-top-c{fill:#2A3F58;stroke:#2A3F58}
  .menu-top-c:hover{fill:#5E8EBC;stroke:#5E8EBC}
  
  #btn {position: fixed;float: right;}
  
  
  .logo__left{display:block;fill: #969697;stroke:#969697}
  #close {display: none;}
  .close {display: none;}
  
  .blank{display: inline-block;width: 50px;height: 50px;}
  
  .menulist_all{align-content: center;gap:10px}
  .menulist_blank{display:none;}
  .menu-list{padding:15px 30px;font-size:6vw;font-family: 'Outfit';font-weight: 500;line-height:1;}
  .list{font-size:4vw;font-weight: 400;}
  
  .menu-list a{color: #2F2F2F;text-decoration: none;transition: all 0.5s ease-in-out;text-transform:uppercase;}
  .menu-list a:hover{color: #969697;margin-left:10px;}
  .sns{color:#969697;font-size:4vw;font-family: 'outfit';font-weight: 400;}
  .sns a{color:#2F2F2F;}
  .sns a:hover{font-size:4vw;color: #969697;margin-left:0px;}
  
  @keyframes cs{
      0%{opacity:0;}
      100%{opacity:1;}}
  
  
  
  /*menu end*/
  
  
  /**/
  
  svg {
      transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  path {
      transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1),    stroke-dasharray 500ms cubic-bezier(0.4, 0, 0.2, 1),    stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  path:nth-child(1) {
      transform-origin: 36% 40%;
  }
  path:nth-child(2) {
      stroke-dasharray: 29 299;
  }
  path:nth-child(3) {
      transform-origin: 35% 63%;
  }
  path:nth-child(4) {
      stroke-dasharray: 29 299;
  }
  path:nth-child(5) {
      transform-origin: 61% 52%;
  }
  path:nth-child(6) {
      transform-origin: 62% 52%;
  }
  
  
  
  
  /*x*/
  
  .active svg {
      transform: rotate(90deg);
  }
  .active path:nth-child(1) {
      transform: translateX(9px) translateY(1px) rotate(45deg);
  }
  .active path:nth-child(2) {
      stroke-dasharray: 225 299;
      stroke-dashoffset: -72px;
  }
  .active path:nth-child(3) {
      transform: translateX(9px) translateY(1px) rotate(-45deg);
  }
  .active path:nth-child(4) {
      stroke-dasharray: 225 299;
      stroke-dashoffset: -72px;
  }
  .active path:nth-child(5) {
      transform: translateX(9px) translateY(1px) rotate(-45deg);
  }
  .active path:nth-child(6) {
      transform: translateX(9px) translateY(1px) rotate(45deg);
  }
  
  /*x_done*/
  
  
  
  
   .font1{font-family:'Tajawal';font-weight: 100;font-style: normal;vertical-align: baseline;}
   .font2{font-family:'Tajawal';font-weight: 500;font-style: normal;vertical-align:bottom;line-height:1.2;}
   .font3{font-family:'Unna';font-style: italic;font-weight: 400;vertical-align:baseline;}
   .font4{font-family:'Noto Sans JP''Noto Sans TC';font-style: normal;font-weight: 400;letter-spacing: 1px;}
   .font5{font-family:'Tajawal';font-weight: 300;font-style: normal;vertical-align: middle;align-self: center;}
   .font6{font-family:'Tajawal';font-weight: 600;font-style: normal;vertical-align:bottom;}
   .font7{font-size:110px;}
  
   #font1{font-family:'Emblema One';}
   #font2{font-family: 'Rubik Glitch';}
   #font3{font-family: 'Rubik 80s Fade';}
   #font4{font-family: 'Kaushan Script';vertical-align: bottom;}
  
   .cfont0{font-size: 120px;font-family:'Tajawal';font-weight: 700;font-style: normal;vertical-align:baseline;}
   .cfont1{font-size:14vw;text-align:justify;letter-spacing:-1px;}
   .cfont2{font-size:4vh;text-align:justify;vertical-align: baseline;}
   .cfont3{width:100%;vertical-align: baseline;}
   .cfont4{width:100%;font-size:25px;font-weight:300;text-align:right;}
   .cfont5{letter-spacing: 10px;width:100%;font-size:25px;font-weight:300;text-align:right;}
   .cfont6{font-size:4.5vw;}
   .cfont7{font-size:15vw;vertical-align: baseline;}
   .cfont8{font-size:155px}
   .cfont9{font-size:18vw}
  
   .white{color: #FFFFFF;}
   .orange{color:#FC875B}
  
   .f300{font-weight:600;}
   
  
  .word1{display: hidden;}
  
  
  .sec0 {box-sizing:content-box;width:100%;height:80vw;overflow:hidden;
    background:transparent;/*自己垂直置中*/align-self: center;}
  
  .slogan{padding-top:10%;font-size:7vw;line-height: 1.5;min-width:150px;}
  .slogan_c{font-size:6vw;min-width:200px;}
  .topcenter{border:0px;width:100%;display: inline-flex;flex-flow:column nowrap;justify-content: space-between;transition:all .3s ease-in-out;}
  .scroll{align-content:end;align-items:baseline;}
  .downlink{width:30vw;display:inline-block;border:0px;transition: all .3s ease-in;text-align:left;}
  .downlink{}
  
  



  
  u{text-decoration: underline solid 0.5px;bottom: 3px;}
  .label__1{display: block;font-family: 'Poppins';font-size:3.5vw;color: #969697;float:center;padding-top: 0px;z-index: 10;width:50%;text-align:left;height:30px;cursor: default;padding-left:39%;padding-bottom:0px;padding-top:40px;}
  .label__pic{width:3vw;}
  .desk{display:none;height:0px;;width:0;}
  .desk4{display:none;height:0px;;width:0;}
  .desk3{display:none;height:0px;width:0;}
  .desktop{display:none;height:0px;}
  
  .index__1{display:flex;text-align: center;width:100%;height:40%;
      width:100%;flex-direction: column;align-self: center;justify-content: center;}
  
  .context__1{font-size:18px;}
  .deco__1{padding-bottom:2px;}
  .en__title1{line-height:normal;text-align: center;height:100px;}
  
  
  .sec2{overflow:hidden;margin:10vw;width:100%;min-height:550px;overflow:hidden;/*自己垂直置中*/align-self: center;}
  
  .label__2{position:relative;font-family:'Poppins';font-size:4vw;color: #969697;float:center;text-align:center;height:30px;cursor: default;padding-top:10px;padding-left:33%;padding-bottom:40px;}
  .label__3{position:relative;font-family:'Poppins';font-size:4vw;color: #969697;float:left;text-align: left;height: 30px;cursor: default;padding-top:0;padding-left:0;}
  .index__2{display:inline-flex;text-align:left;font-size:17px;padding-left:5vw;
      width:80vw;flex-direction: column;vertical-align:middle;align-self: center;justify-content: left;}
  
  .en__title2_1{display:inline-block;position:relative;}
  .en__title2{display:inline-block;flex-flow:column;height:fit-content;width:;}
  .en__title2-2{height:18vw;}
  .en__title2-3{padding-top:4vw;}
  .wd1160{width:100%;}
  
  .right__2{font-family:'poppins';font-size:4vw;text-align: right;color: #969697;line-height:2;justify-content:center;align-items:center;padding-right:6vw;}
  .table__2{min-height:100%;display:flex;flex-flow:column-reverse;justify-content: space-between;padding-bottom:150px;transition:all .3s ease-in-out;padding-left:5vw;}
  .table__2-1{width:90vw;height:100vw;padding-top:0px;padding-bottom:10vw;display:flex;flex-direction:column;justify-content:space-between}
  .table__2-3{height:10vw;width:70vw;padding-top:0px;justify-content:center;text-align: center;}
  .table__2-2{width:90vw;height:90vw;padding-bottom:5vw;}
  .content__2{width:70vw;font-size:4vw;line-height:2;padding-bottom:70px;}
  
  .pic__2-1{overflow:hidden;cursor:s-resize;display:block;width:70vw;height:90vw;padding-bottom:0px;padding-left:0px;transition:all 0.3s ease-in-out;overflow:hidden;transform:rotate(0deg);text-align: right;transition:all 0.3s ease-in-out;scale:100%;border-radius:40px}
  .pic__2-1 img{scale:100%;width:150vw;height:100vw;justify-content:end;padding-right:10%;transition:all 0.3s ease-in-out;}
  .pic__2-1:hover img{scale:120%;width:150vw;height:100vw;transition:all 0.3s ease-in-out;}
  .pic__2-1:hover::before img{scale:100%;transition:scale .3s ease-in-out;}
  .pic__2-1:hover{cursor:s-resize;border-radius:40px;width:70vw;height:100vw;
    transition:all .3s ease-in-out;}
  
  
  .pic__2-2{overflow:hidden;cursor:s-resize;display: block;width:70vw;height:90vw;padding-bottom:0px;padding-left:0px;transition:all 0.3s ease-in-out;overflow:hidden;transform:rotate(0deg);text-align: right;transition:all 0.3s ease-in-out;scale:100%;border-radius:40px}
  .pic__2-2 img{scale:100%;width:100vw;height:100vw;justify-content:end;transition:all 0.3s ease-in-out;}
  .pic__2-2:hover img{scale:110%;width:100vw;height:100vw;transition:all 0.3s ease-in-out;}
  .pic__2-2:hover::before img{scale:100%;transition:scale .3s ease-in-out;}
  .pic__2-2:hover{cursor:sw-resize;border-radius:40px;
    /* background-size:auto 550px; */
    transition:all .3s ease-in-out;}
  
  
  
  .optimal{}
  
  
  
  .w{line-height:1;display:inline-block;will-change:auto;transform:translate3d(.5em,0,0) rotate(10deg) rotateY(120deg) rotateX(-30deg) scale(1.1);opacity:0;}
  
  
  #div3{background: #5985B9;min-height:200vw;display: flex;flex-direction: row;justify-content: center;border-top-left-radius:50px;border-top-right-radius:50px;z-index: 40;position:relative;top:-150px;}
  .sec3{margin:10vw;width:95%;min-height:200vw;overflow:hidden;/*自己垂直置中*/align-self: center;/*內容物垂直置中*/align-content: center;}
  
  .down{fill:none;stroke:#F6F5F1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
  .down4{width:30px;display:block;fill:#2F2F2F;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;margin-top:-50px;}
  .down2_d{display:block;top:-50px;svg{width:30px;}}
  
.vw6{padding-left:5vw;}

  .right{align-self: self-end;}
  .index__3{padding-left:4vw;font-size:4.5vw;width:90%;padding-top:0px;vertical-align:top;align-items:center;align-content:center;}
  .en__title3{width:100vw;position:relative;cursor:default;top:0px;}
  .en__title3-1{background:transparent;z-index:101;line-height:normal;vertical-align: bottom;}
  
  .block2{display: block;padding-bottom:20px;}
  .bt40{padding-bottom:40px;}
  .bt20{padding-bottom:20px;}
  
  .content__3{flex-direction:column-reverse;padding-top:0vw;padding-left:0;width:100%;align-self:center;align-content:center;align-items:center;}
  .pic__3{width:73vw;height:100vw;margin-top:18px;right:0px;display: block;background:url(img/social.png);background-size: cover;background-position: center center;border-radius:40px;transition: all .3s ease-in-out;justify-content: right;}
  .pic__3:hover{width:73vw;height:100vw;background-position: center center;border-radius:40px;background-size:cover;cursor:e-resize;transition:.3s ease-in-out;}
  .content__3-1{display:flex;flex-direction: column;width:100%;height:100%;align-items:flex-end;align-items:end;text-align:right;padding-top:0px;}
  .content__3-2{display:flex;height:100px;align-self:center;align-content:center;padding-left:0px;}
  .text__3{flex-grow:2;width:95%;height:60%;text-align:left;align-self: flex-end;line-height:2;font-size:4vw;}
  
  
  
  
  #sectiono{position: relative;z-index:50;}
  .o2{position:absolute;right:0vw;top:86%;z-index: 70;width:41vw;overflow:hidden;}
  .o2_pic{width:51vw;}
  
  #div4{min-height:100%;display: flex;flex-direction: row;position:relative;padding-bottom: 50px;z-index:40;justify-content:left;margin-bottom:0px}
  .sec4{margin:0px;margin-left:17vw;width:83%;}
  #div4_2{background:url(./img/c2.png) no-repeat;min-height:100%;display: flex;flex-direction: row;position:relative;padding-bottom: 50px;z-index:40;justify-content:left;margin-bottom:0px;padding-bottom:300px;}
  
  
  .index__4{display: flex;text-align:left;font-size: 26px;
      width: 90%;flex-direction: column;vertical-align:middle;align-self: center;}
  .en__title4{line-height:normal;text-align:center;vertical-align: bottom;}
  .contact__pic{width:65vw;align-self:flex-start;}
  .contactus__bt{position:relative;top:-50px;left:14%;text-align:right;right:0px;padding-right:0px;}
  
  .contactus {
      color: #788FF7;
      padding: 50px;
      width:90vw;
      height:100%;
      gap:30px;
      background-color:rgba(0,0,0,0);
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: center;
      align-items: center;
      vertical-align:middle;
      }
     
     form {
      display: flex;
      flex-direction: column;
      justify-content: center;
      row-gap: 2rem;
     }
     
     .input__container {
      display: flex;
      flex-direction: column;
      row-gap: 0.5rem;
     }
  
     input{height: 5px;}
     .input__container input,
     textarea {
      padding: 1rem 2rem;
      border-radius: 5px;
      border: 1px solid #d7d7d7;
      resize: none;
      width:400px;
      text-align: center;
      color: #788FF7;
     }
  
     .input__container  textarea
     {height:200px;text-align: left;}
     
     .btn {
      align-self: flex-end;
      padding: 1rem 2rem;
      border-radius: 5px;
      border: none;
      background: #333;
      color: #fff;
      cursor: pointer;
  
     }
  
  
  
  
     .left-right a{
      position:relative;
      transition:all 0.8s ease-in-out;
    }
   
    .left-right a:hover{
      position: relative;transition:top 0.8s ease-in-out;}
  
    .left-right a::after{
      content:"";
      display:block;
      width: 0;
      height:3px;
      background-color: #FC875B;
      position:absolute;
      bottom:0px;
      right: 0;
      transition:.4s;
    }
  
    
    .left-right a:hover::after{
      width:100%;
      left: 0;
    }
  
  
  
  
  .c{width:0px;display:none;}
  .c2{background:url(./img/c.png) no-repeat;background-position:50% 50%;}

#div5{position:relative;display:flex;flex-direction:column;justify-content: center;border: 0px;
padding-top:50px;width:100%;box-sizing:border-box;z-index:60;background: #000000;align-content: center;}

#div5_2{position:relative;display:flex;flex-direction:column;justify-content: center;border: 0px;
padding-top:-50px;width:100%;box-sizing:border-box;z-index:60;background: #000000;align-content: center;}
.button6{font-size:80px;}
.c3{background-size:50px auto;background-position:0% 300px;}


.ptft{width:100%px;height:200px;display:block}


.ft{color: #FFFFFF;padding-top:60px;
  position: relative;font-size:5vw;margin-top:0px;width:100%;overflow:hidden;align-self: center;align-content: center;}
  
  .ft a{text-decoration: none;transition:0.5s ease-in;font-family: 'Poppins';vertical-align:bottom;}
  .ft a:hover{color:#FC875B;}
  
  .ft__0{vertical-align:baseline;display: flex;flex-flow:column;padding-bottom:50px;justify-content:left;width:100%;}
  .ft__1{height:fit-content;display: block;width:80%;align-self: center;padding-bottom:60px;}
  .ft__2{display:flex;justify-content:left;padding-bottom: 0;flex-flow: column nowrap;width:83%;align-self: center;font-size:3vw;}
  .ft__3{margin-left:9vw;font-size:3.7vw;color: #eaeae9;line-height:1.8;padding:0px 5px;padding-bottom:1.5vw;}
  .ft__4{display: flex;flex-flow: column nowrap;justify-content: flex-start;font-family: 'Poppins';font-size:24px;width: fit-content;width:80%;align-self: center;}
  .ft__5{display:none;}
  
  .ft__title{padding-top:-10px;padding-bottom:20px;align-self:flex-end;display:block;font-size:13vw;line-height:1.1;}
  .ft__sns{width:190px;padding-bottom:5px;}
  .down3{width:3vw;}
  .ft__2 a{color:#eaeae9;}
  .ft__4 a{color:#fff;}
  
  .app{display:inline-flex;width:100%;height:100%;}

  .lr {font-size:5vw;line-height:1.2;width:80%;}
  
  .lr a{position:relative;}
    .lr a::after{
      content:"";
      display:block;
      width: 0;
      height: 1px;
      background-color: #FC875B;
      position:absolute;
      right: 0;
      transition:.4s;}

    .lr a:hover::after{width:100%;left:0;}
  
  
  .ft4 a{font-size:5vw;}
  .ft__sns{padding-top:1.5vw}
  .ft2 {}
  
  
  
  
  .typing_text-heading {
      margin: 0;
      font-size: 2rem;
      font-weight: 400;
    }
    
    .section-typing_text {
      padding: 3rem;
    }
    
    .typing_text-heading {
      width:100%;
      max-width: 24rem;
      max-height: none !important;
      height: auto !important;
    }
  
    .section-typing_text .cursor {
      animation: cursorBlink 0.5s alternate infinite;
    }
  
  .text{display: none;}
  
  
  
  
  
  
  
  
  
  
  
  /*article botton1*/
  
    
  
    .button {
      cursor: pointer;
      position: relative;
      padding: 15px 64px;
      font-size: 22px;
      color: #2F2F2F;
      letter-spacing: 1px;
      outline: 1px solid #2F2F2F;
      border: 0px;
      border-radius: 10px;
      background-color:#FFFFFF;
      transition: all 0.3s cubic-bezier(50, 50, 50, 50) ease-in-out;
      transition: all 0.6s ease-in-out;
      overflow: hidden;
      align-self: left;
      font-family: 'poppins','Noto Sans JP','noto sans tc';
      font-weight: 400;
    }
    
    .button::before {
      content: '';
      position: absolute;
      inset: 0;
      margin: auto;
      width: 50px;
      height: 50px;
      border-radius: inherit;
      scale: 0;
      z-index: -1;
      border:0px;outline:none;
      background-color: #2F2F2F;
      transition: all 0.3s cubic-bezier(50, 50, 50, 50) ease-in-out;
      transition: all 0.3s ease-in-out;
      animation: fadeIn 0.3s ease-in-out;
    -webkit-animation: fadeIn 0.3s ease-in-out;
    -moz-animation: fadeIn 0.3s ease-in-out;
    -o-animation: fadeIn 0.3s ease-in-out;
    -ms-animation: fadeIn 0.3s ease-in-out;
    }
    
    
    .button:hover::before {
      scale: 8;
      border:0px;outline:none;
      transition: all 0.3s ease-in-out;
      animation: fadeIn 0.3s ease-in-out;
    -webkit-animation: fadeIn 0.3s ease-in-out;
    -moz-animation: fadeIn 0.3s ease-in-out;
    -o-animation: fadeIn 0.3s ease-in-out;
    -ms-animation: fadeIn 0.3s ease-in-out;
  }
  
  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-moz-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-o-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-ms-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
    
    .button:hover {
      color: #FFFFFF;
      scale: 1;
      border:0px;outline:none;
      transition: all 0.3s ease-in-out;
      animation: fadeIn 0.3s ease-in-out;
    -webkit-animation: fadeIn 0.3s ease-in-out;
    -moz-animation: fadeIn 0.3s ease-in-out;
    -o-animation: fadeIn 0.3s ease-in-out;
    -ms-animation: fadeIn 0.3s ease-in-out;
    }
    
    .button:active {
      scale: 1;
      border:2px;outline:none;
      transition: all 0.3s ease-in-out;
    }
    
    
    
  
  /*botton2*/
  
  
  
  .button2 {
      cursor: pointer;
      position: relative;
      padding: 15px 60px;
      font-size: 22px;
      color: #FFFFFF;
      letter-spacing: 1px;
      outline: 1px solid #FFFFFF;
      border:0px;
      border-radius: 10px;
      background-color:transparent;
      transition: all 0.3s cubic-bezier(50, 50, 50, 50) ease-in-out;
      transition: all 0.6s ease-in-out;
      overflow: hidden;
      font-family: 'poppins','Noto Sans JP','noto sans tc';
      font-weight: 400;
    }
    
    .button2::before {
      content: '';
      position: absolute;
      inset: 0;
      margin: auto;
      width: 50px;
      height: 50px;
      border-radius: inherit;
      scale: 0;
      z-index: -1;
      outline:none;
      background-color: #2F2F2F;
      transition: all 0.3s cubic-bezier(50, 50, 50, 50) ease-in-out;
      transition: all 0.3s ease-in-out;
      animation: fadeIn 0.3s ease-in-out;
    -webkit-animation: fadeIn 0.3s ease-in-out;
    -moz-animation: fadeIn 0.3s ease-in-out;
    -o-animation: fadeIn 0.3s ease-in-out;
    -ms-animation: fadeIn 0.3s ease-in-out;
    }
    
    
    .button2:hover::before {
      scale: 5;
      outline:none;
      transition: all 0.3s ease-in-out;
      animation: fadeIn 0.3s ease-in-out;
    -webkit-animation: fadeIn 0.3s ease-in-out;
    -moz-animation: fadeIn 0.3s ease-in-out;
    -o-animation: fadeIn 0.3s ease-in-out;
    -ms-animation: fadeIn 0.3s ease-in-out;
  }
  
  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-moz-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-o-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @-ms-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
    
    .button2:hover {
      color: #FFFFFF;
      scale: 1;
      border:3px;
      outline:none;
      background-color: #2F2F2F;
      transition: all 0.3s ease-in-out;
      animation: fadeIn 0.3s ease-in-out;
    -webkit-animation: fadeIn 0.3s ease-in-out;
    -moz-animation: fadeIn 0.3s ease-in-out;
    -o-animation: fadeIn 0.3s ease-in-out;
    -ms-animation: fadeIn 0.3s ease-in-out;
    }
    
    .button2:active {
      scale: 1;
      outline:none;
      transition: all 0.3s ease-in-out;
    }
  
  
    /*botton3*/
  
  
  
  .button3 {
    cursor: pointer;
    position: relative;
    padding: 15px 20px;
    font-size: 20px;
    color: #2F2F2F;
    letter-spacing: 1px;
    outline: 1px solid #2F2F2F;
    border:0px;
    border-radius: 10px;
    background-color:transparent;
    transition: all 0.3s cubic-bezier(50, 50, 50, 50) ease-in-out;
    transition: all 0.6s ease-in-out;
    overflow: hidden;
    font-family: 'poppins','Noto Sans JP','noto sans tc';
    font-weight: 400;
  }
  
  .button3:hover img{margin-left:5px;margin-right: -5px;transition: all 0.6s ease-in-out;}
  .button3:hover span{margin-left:-3px;padding-right: 3px;transition: all 0.6s ease-in-out;}
  .button3:hover::after span{transition: all 0.6s ease-in-out;}
  
  
  .button3::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 50px;
    height: 50px;
    border-radius: inherit;
    scale: 0;
    z-index: -1;
    outline:none;
    background-color: #FFFFFF;
    transition: all 0.3s cubic-bezier(50, 50, 50, 50) ease-in-out;
    transition: all 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;
  -webkit-animation: fadeIn 0.3s ease-in-out;
  -moz-animation: fadeIn 0.3s ease-in-out;
  -o-animation: fadeIn 0.3s ease-in-out;
  -ms-animation: fadeIn 0.3s ease-in-out;
  }
  
  
  .button3:hover::before {
    scale: 5;
    outline:none;
    transition: all 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;
  -webkit-animation: fadeIn 0.3s ease-in-out;
  -moz-animation: fadeIn 0.3s ease-in-out;
  -o-animation: fadeIn 0.3s ease-in-out;
  -ms-animation: fadeIn 0.3s ease-in-out;
  }
  
  .button3:hover {
    color: #2F2F2F;
    scale: 1;
    border:3px;
    outline:none;
    background-color: #FFFFFF;
    outline: 1px solid #2F2F2F;
    transition: all .3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;
  -webkit-animation: fadeIn 0.3s ease-in-out;
  -moz-animation: fadeIn 0.3s ease-in-out;
  -o-animation: fadeIn 0.3s ease-in-out;
  -ms-animation: fadeIn 0.3s ease-in-out;
  }
  
  .button3:active {
    scale: 1;
    outline:none;
    transition: all .3s ease-in-out;
  }
    
  
    /*botton4*/
  
  
  
    .button4 {
      cursor: pointer;
      position: relative;
      padding: 15px 30px;
      font-size: 22px;
      color: #2F2F2F;
      letter-spacing: 1px;
      outline: 1px solid #FC875B;
      background:#FC875B;
      border:0px;
      border-radius: 10px;
      transition:all 0.3s cubic-bezier(50, 50, 50, 50) ease-in-out;
      transition:all .6s ease-in-out;
      overflow: hidden;
      font-family: 'poppins','Noto Sans JP','noto sans tc';
      font-weight: 400;}
    
    .button4:hover img{margin-left:5px;margin-right: -5px;transition: all 0.6s ease-in-out;}
    .button4:hover span{display: block;margin-top:-3px;padding-bottom: 3px;transition:all .6s ease-in-out;}
    .button4:hover::after span{transition: all 0.6s ease-in-out;}
    
    
    .button4::before {
      content: '';
      position: absolute;
      inset: 0;
      margin: auto;
      width: 50px;
      height: 50px;
      border-radius: inherit;
      scale: 0;
      z-index: -1;
      outline:none;
      color:#FFFFFF;
      background-color: #000000;
      transition: all 0.3s cubic-bezier(50, 50, 50, 50) ease-in-out;
      transition: all 0.3s ease-in-out;
      animation: fadeIn 0.3s ease-in-out;
    -webkit-animation: fadeIn 0.3s ease-in-out;
    -moz-animation: fadeIn 0.3s ease-in-out;
    -o-animation: fadeIn 0.3s ease-in-out;
    -ms-animation: fadeIn 0.3s ease-in-out;
    }
    
    
    .button4:hover::before {
      scale: 5;
      outline:none;
      transition: all 0.3s ease-in-out;
      animation: fadeIn 0.3s ease-in-out;
    -webkit-animation: fadeIn 0.3s ease-in-out;
    -moz-animation: fadeIn 0.3s ease-in-out;
    -o-animation: fadeIn 0.3s ease-in-out;
    -ms-animation: fadeIn 0.3s ease-in-out;
    }
    
    .button4:hover {
      color: #FFFFFF;
      scale: 1;
      border:3px;
      outline:none;
      background-color: #2F2F2F;
      outline: 1px solid #2F2F2F;
      transition: all .3s ease-in-out;
      animation: fadeIn 0.3s ease-in-out;
    -webkit-animation: fadeIn 0.3s ease-in-out;
    -moz-animation: fadeIn 0.3s ease-in-out;
    -o-animation: fadeIn 0.3s ease-in-out;
    -ms-animation: fadeIn 0.3s ease-in-out;
    }
    
    .button4:active {
      scale: 1;
      outline:none;
      transition: all .3s ease-in-out;
    }
  
  
  
    
  
  
  
    /*GSAP Transition CSS*/
  
    #loader {
      display: flex;
      z-index:999999999999;
      position: relative;
      background:#FFFFFF;
      width:100vw ;
      height: 100vh;
      justify-content:center;
      align-items: center;
      align-self: center;
      text-align: center;
      border:0px;
      margin: auto;
      overflow:hidden;
  }
  
  .center {
    font-family: 'poppins';
    font-size: 20px;
    text-align: center;
    align-self: center;
    position: absolute;}
  
  .cen{text-align:left;align-items:flex-start;}
  .righ{text-align:left;}
  .lh120{line-height:1.1;}
  
  
  /*about*/
  #div6{display: flex;justify-content: center;}
  .sec_a{cursor:default;width:100%;min-height:300px;overflow:hidden;/*自己垂直置中*/align-self: center;padding-bottom:0px 5vw 100px 5vw;}
  
  .page__title{display: block;font-size:12vw;line-height: 1;padding-bottom:0;padding-top:0px;margin-left:0;}
  .page__title>span{font-family:'Unna';font-style: italic;font-weight:400;vertical-align:baseline;font-size:15vw;}
  .head{display:flex;font-size:14vw;line-height: 1;padding-bottom:20vw;padding-top:15vw;margin-left:8vw;vertical-align:baseline;font-weight: 500;}
  .head>span{font-family: 'Unna';font-style: italic;font-weight: 400;vertical-align:baseline;font-size:18vw;margin-top:-5px;}
  .page__title4{display:block;font-size:15vw;line-height: 1;}
  .page__title4>span{font-family: 'Unna';font-style: italic;font-weight: 400;vertical-align:baseline;font-size:19vw;}
  
  
  .en__title2-2>span{font-family: 'Unna';font-style: italic;font-weight: 400;vertical-align:baseline;font-size:18vw;margin-top:-5px;}
  
  .h100{height:100%;}
  #logo{width:18vw;}
  .logos2{display:flex;}
  .logos2:hover:after{transition:filter 2s ease-in-out;transition:2s ease-in-out;}
  /*.logos2:hover{transition:filter 2s ease-in-out;transition:2s ease-in-out;filter:blur(10px);}*/
  .vw5{width:50vw;}
  .vw4{width:40vw;padding-left:4vw;}
  .vw3{padding-left:6vw;}

  
  .context__2{font-size:4vw;padding-left:0;line-height:2;}
  .logos{display:none;}
  .logos:hover:after{transition:filter 2s ease-in-out;transition:2s ease-in-out;}
  /*.logos:hover{transition:filter 2s ease-in-out;transition:2s ease-in-out;filter:blur(10px);}*/
  .about__words{padding-left:10vw;width:80vw;text-align: justify;}
  .about__hover{transition:all .3s ease-in-out;}
  .about__hover:hover{color: #FC875B;}
  
  
.pt210b{padding-top:0px;}
  .div7{box-sizing:border-box;display:flex;flex-direction:column;border:0px;width:100%;box-sizing:border-box;justify-content:center;/*內容物垂直置中*/align-content:center;align-items:center;padding-bottom:0px;position:relative;}
  .sec_b{cursor:default;display:flex;flex-direction:column;justify-content:space-between;width:80%;min-height:100%;padding:0;box-sizing:border-box;}
  
  .error {height:100vw;width:80vw;min-height:550px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;}
  .error_pics {
  display:block;width:70vw;height:40vw;
  background:url("./img/404.png");
  background-size:100%;background-repeat:no-repeat;
  transition: 1s ease-in-out;
  position:50% 0%;}
  
  .service__left{display:inline-flex;flex-direction:column;height:fit-content;width:80%;min-width:80%;justify-content: space-between;}
  .service__left2{display:flex;flex-direction:row;height:30vw;width:100%;justify-content: space-between;}
  .service__title{height:fit-content;align-self:flex-start;font-size:12.9vw;line-height:1.5;width:100%;}
  .service__title2{height:40vw;align-self: flex-start;font-size:12.9vw;line-height:1.5;width:100%;}
  .service__titleZH{display:block;font-family:'Noto Sans JP','NOTO SANS TC';font-size:5.5vw;font-weight:400;padding-top:15px;line-height:1.5;width:100%;}
  .service__subtitleZH{width:100%;display: block;font-family:'Noto Sans JP','NOTO SANS TC';font-size:4vw;font-weight:400;padding-top:15px;line-height:2;text-align:justify;}
  
  .service__button{height:fit-content;width:100%;}
  .service__right{box-sizing:border-box;width:100%;min-width:100%;padding:0;margin:0px;box-sizing:border-box;justify-content:flex-end;line-height:2;}
  .service__right img{border:0px;right:0vw;}
  

  .service-wrapper{box-sizing:border-box;flex-direction:row;font-size:4vw;line-height:2;width:85%;
    height:auto;;overflow: hidden;cursor: default;margin:0px;min-width:80%;
    background:#FFFFFF;color:#969697;transition:all .6s ease-in-out;}
  .service-wrapper:hover{background:#F6F5F1;transition:all .6s ease-in-out;}
  
  .service-wrapper2{box-sizing:border-box;flex-direction:row;font-size:4vw;line-height:2;width:100%;
    height:auto;;overflow: hidden;cursor: default;margin:0px;min-width:80%;
    background:#FFFFFF;color:#969697;transition:all .6s ease-in-out;}
  .service-wrapper2:hover{background:#F6F5F1;transition:all .6s ease-in-out;}
  



  .top{border-top: 1px solid #000000;}
  .btm{padding-top:30px;}
  .bottom{border-bottom: 1px solid #000000;border-right:1px solid #000000;border-left:1px solid #000000;}
  .service__content-title{height: auto;color: #2F2F2F;
      font-size:4vw;letter-spacing: 0.8px;width:100%;padding-bottom:5px;display: block;}
  
  .logo__right{display:flex;flex-direction:row;width:100%;padding-left:0vw;padding-right:0vw;align-self:flex-end;transition:all 1s ease-in-out;}
  .logowall{width:100%;flex-wrap:wrap;margin-top:0px;justify-content:space-between;margin:0px}
  .logowrapper{width:38vw;height:38vw;background:#FFFFFF;border-radius:10px;margin-bottom:4vw;margin-right:0;text-align:center;align-content:center;transition: all .6s ease-in-out;align-self:flex-start;}
  .logowrapper>img{width:70%;height:auto;align-self:center;vertical-align:middle;filter:grayscale(100%);cursor:default;transition:all 1s ease-in-out;border-bottom:20px;}
  .logowrapper>img:hover{filter:grayscale(0);transition:filter 1s ease-in-out;}
  
  .hiring__right{width:70vw;padding-right:0px}
  .hiring__right2{width:70vw;padding-right:0px}
  .hiring__right img{width:85vw;padding-top:10vw;margin-bottom:-10vw;margin-left:-20vw;}
  .hiring__right2 img{width:85vw;padding-top:10vw;padding-bottom:10vw;margin-bottom:0vw;margin-left:0vw;}
  
  .hiring__hover{color:#000000;text-decoration: none;transition:all .3s ease-in-out;}
  .hiring__hover:hover{color: #5985B9;}
  
  .hiring__img{width:80%;height:auto;border:0;left:0px;margin-left:-20%;}
  
  .marquee-container {display: flex;justify-content: center;width:100%;
  height:300px;line-height: 1;overflow: hidden;border-top:#FC875B;
  border-bottom: #FC875B;color: #FC875B;font-size: 150px;}
  
  
  .marquee-content {width: fit-content;display: inline-block;white-space: nowrap;animation: marquee 10s linear infinite;}
  .marquee-content2 {width: fit-content;display: inline-block;white-space: nowrap;animation: marquee 10s linear infinite;}
  .marquee-content3 {width: fit-content;display: inline-block;white-space: nowrap;animation: marquee 10s linear infinite;}
  
  @keyframes marquee {
    0% {transform: translateX(0);}
    100% {transform: translateX(-100%);}}
  
  @keyframes marquee2 {
    0% {transform: translateX(0);}
    100% {transform: translateX(-100%);}}
  
  @keyframes marquee3 {
    0% {transform: translateX(0);}
    100% {transform: translateX(-100%);}}
  

.sti{float:left;top:0px;position:relative;padding-bottom:0px;}
.sti2{float:left;top:0px;padding-top:0;position:relative;padding-bottom:0px;}

  .header {
    width:100%;
    height: 100vh;
    background: #FFFFFF;
    font-size: 40px;
    font-family: 'Tajawal', sans-serif;
    font-weight: 700;
    justify-content: center;
    text-align: center;
    align-items: center;
    align-self: center;
    text-transform: uppercase;
    grid-column: 3 / 9;
    grid-row: 1 / 1;
    color: #000000;}
  
    /*SNS*/
  .mg6{margin-left:6vw;}
  .div8{width:100%;box-sizing:border-box;display: flex;flex-direction: row;border:0px;justify-content: center;/*內容物垂直置中*/align-content: center;padding-bottom: 30px;padding-left:0vw;}
  .sec_c{width:85%;cursor:default;display: flex;flex-direction:column;justify-content:space-between;min-height:100%;padding:0px;box-sizing:border-box;justify-self:left;align-self:left;font-size:5vw;}
  .div9{display: flex;flex-direction:column;border: 0px;width:100%;box-sizing:border-box;justify-content: center;/*內容物垂直置中*/align-content: center;padding-bottom: 100px;padding-left:0;padding-top:10vw}
  .page__title2{font-family:'Tajawal';display:block;line-height: 1;font-size:8.5vw;font-weight:500;width:100%;}
  .sns__titleZH{display:block;font-family:'Noto Sans JP','NOTO SANS TC';font-size:25px;font-weight:400;}
  .page__title2>span{font-family:'Unna';font-style:italic;font-weight:500;vertical-align:baseline;font-size:9vw;}
  .pt180{display:block;height:180px;width:80%;}
  .pt90{display:block;height:90px;width:80%;}
  .pt70{display:block;height:65px;width:80%;}
  .pt65{display:block;height:65px;width:80%;}
.pt60{display:none;height:0px;}

  
  .sns__left{display:flex;flex-direction:column;height:fit-content;width:90%;justify-content:space-between;cursor:default;transition:all .4 ease-in-out;padding-top:10vw;padding-bottom:5vw;}
  .sns__right{flex-direction:row;width:85vw;text-align:justify;padding:0px;margin:0px;justify-self: flex-end;box-sizing:border-box;justify-content: flex-end;padding-left:0vw;}
  .pl10{padding-left:0px;gap:0; img{height:unset;width:101vw;padding:unset;padding:0;margin:unset;gap:0;}}
.videobox{height:unset;width:100vw;height:56vw;padding:unset;padding:0;margin:unset;gap:0;}
.videobox iframe {position:absolute;top:0;left:0;width:100%;height:100%;}

  .sns__wall{display:flex;flex-direction:column;width:100%;flex-wrap:wrap;justify-content:space-between;color:#FFFFFF;align-self:center;align-content: center;font-size:19px;transition:all .3s ease-in-out;}
  .sns__wrapper{display:flex;width:83vw;height:83vw;background:#2F2F2F url(./img/snsbg.png);background-size:cover;border-radius:4vw;margin-bottom:30px;align-content: center;align-items: center;box-sizing: content-box;transition:all .3s ease-in-out;}
  .sns_pic{padding-right:30px;float:unset;width:150px;height:auto;align-self:self-start;cursor:default;transition:all 1s ease-in-out;}
  .sns_no{width:7vw;cursor:default;border:0px;padding:0px;padding-right:10px;}
  .sns__wrapper>img:hover{transition:filter 1s ease-in-out;}
  
  .snst{width:90%;height:fit-content;align-self: center;align-content: center;justify-content: center;margin-left:0px;padding:10vw;padding-bottom:20vw;font-size:4vw;line-height:2;}
  .snst>span{display:inline-block;height:7vw;justify-items: flex-start;font-size:6vw;font-weight:600;line-height:1.5;vertical-align:super;}
  
  .div10{width:100%;box-sizing:border-box;padding-bottom:150px}
  .sec_d{margin:5vw;cursor:default;display: flex;flex-direction:column;justify-content: space-between;width:80%;min-height: 100%;box-sizing: content-box;vertical-align: middle;}
  .logo__wrapper{display: flex;flex-direction:column;width:100%;padding-top:5vw;}
  .sns__logos{padding:20px;padding-top:10vw;width:100%;display:flex;flex-direction:column;justify-content:space-around;align-items: center;align-self: center;}
  .sec_d img{filter:grayscale(100);width:40vw;transition:all .3s ease-in-out;clear: both;padding-bottom:5vw;}
  .sec_d img:hover{filter:grayscale(0);}
  
  .div11{display:flex;justify-content: center;border-top-left-radius:50px;border-top-right-radius:50px;
  position:relative;background: #eaeae9;z-index: 60;padding-bottom: 150px;position:relative;top:-100px;margin-bottom:-100px;}
  .service__content-title>sup{font-family:'Tajawal';color:#FC875B;font-weight:500;}
  .service-wrapper input{font-family:'Tajawal';font-size:16px;color:#969697;height:10vw;width:calc(100% - 20px);border:0px;outline:0px;background:transparent;padding:0px 10px 0px 10px;}
  .service-wrapper textarea{font-family:'Tajawal';font-size:16px;text-align:left;color:#969697;height:100px;width:calc(100% - 20px);border:0px;outline:0px;padding:10px;background:transparent;resize: horizional;}
  .service-wrapper input{}
  input:focus, textarea:focus, select:focus{border-bottom:#FC875B 1px solid;color:#2F2F2F;background: #FFFFFF;}
  /*privacy*/
  .page__title3{display:block;font-size:9.5vw;line-height:1.5;}
  .page__title3>span{font-family:'Unna';font-style:italic;font-weight:400;vertical-align:baseline;font-size:13vw;line-height:1}
  .lh12{line-height:1.2;}

  .policy-contentBlock{padding-bottom:70px;font-size:17px;}
  .policy-contentBlock-EN{font-family:'Tajawal';font-weight:500;}
  .policy-contentBlock span{font-family:'Tajawal';color:#5985B9;font-size:20px;font-weight:600;}
  .policy__subtitle{font-family:'Tajawal';font-weight:600;font-size:30px;color:#5985B9;}
  .policy-list, .policy-list li{
    list-style-position:outside;padding-bottom:1vw;
    list-style-type:disc;}
  
  /*work*/

  .sec_j{margin:6vw;padding-left:35px;cursor:default;display:flex;flex-direction:column;justify-content:space-between;width:70%;min-height: 100%;box-sizing: content-box;vertical-align: middle;}
  .sec_j2{margin:6vw;padding-left:35px;cursor:default;display:flex;flex-direction:column;justify-content:space-between;width:70%;min-height: 100%;box-sizing: content-box;vertical-align: middle;}
.sec_j3{flex-direction:column;justify-content:flex-start;}
#sort-buttons{text-align:left;}

  .mt10{margin-top:10vw;}

  .effect-box img {filter: grayscale(0);}
  .effect-box h2,
  .effect-box p {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);}
  
  .figcaption::before {
    background:transparent;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  
  .effect-box img,
  .effect-box p {opacity: 1;}
  
  .effect-box img,
  .effect-box h2,
  .effect-box p {
    filter: grayscale(0);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);}
  
  
  .div6{display:inline-block;}
  
  .hvrbox,
  .hvrbox * {cursor:pointer;
    box-sizing: padding-box;
  }
  .hvrbox {
    position: relative;
    display: inline-block;
    box-sizing: padding-box;
    overflow: hidden;
    text-shadow: #2F2F2F 1px 0 15px;
  }
  
  
  
  .hvrbox:hover img {
    transform:scale(120%);
    filter: grayscale(0);}
  
  .hvrbox .hvrbox-layer_bottom {
    display: block;object-fit: cover;}
  
  .hvrbox .hvrbox-layer_top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:100%;
    height: 100%;
    color: #fff;
    padding: 25px;
    -moz-transition: all 0.4s ease-in-out 0s;
    -webkit-transition: all 0.4s ease-in-out 0s;
    -ms-transition: all 0.4s ease-in-out 0s;
    transition: all 0.4s ease-in-out 0s;
  }
  
  
  .hvrbox:hover .hvrbox-layer_top,
  .hvrbox.active .hvrbox-layer_top {
    opacity: 1;
  }
  .hvrbox .hvrbox-text {
    width:80%;cursor:pointer;
    padding:25px;
    padding-top:0px;
    text-align: justify;
    line-height:2;
    display: inline-block;
    position: absolute;
    top: 48%;
    left: 75%;
    -moz-transform: translate(-85.5%, 0%);
    -webkit-transform: translate(-85.5%, 0%);
    -ms-transform: translate(-85.5%, 0%);
    transform: translate(-85.5%, 30%);
    transition:.4s;
  }
  
  
  
  
  .hvrbox{font-size: 14px;}
  .hvrbox .title{font-size: 17px;}
  .hvrbox .no{line-height:2;}
  .hvrbox-text{font-size: 13px;transition:.4s;}
  .hvrtest {line-height: 1.5;padding:0px;}
  .hvrtest .hvrbox-text{opacity:0;}
  .hvrbox:hover .hvrbox-text{opacity:1;}
  
  
  .hvrbox .hvrbox-text_mobile {
    
    font-size: 18px;
    border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
    border-top: 1px solid rgba(179, 179, 179, 0.7);
    margin-top: 10px;
    padding-top: 2px;
    display:none;
  }
  .hvrbox.active .hvrbox-text_mobile {
    display: block;
  }
  .hvrbox .hvrbox-layer_image {
    padding: 0;
    background: none;
  }
  .hvrbox .hvrbox-layer_slideup {
    -moz-transform: translateY(15%);
    -webkit-transform: translateY(15%);
    -ms-transform: translateY(15%);
    transform: translateY(25%);
  }
  
  .hvrbox:hover .hvrbox-layer_slideup,
  .hvrbox.active .hvrbox-layer_slideup {
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  
  .hvrbox img{border:0px;padding:0px;margin:0px;}
  
  #div10{width:100%;border:0px;}
  .head2{display:inline-flex;line-height:1;padding-bottom:0px;padding-top:0px;margin-left:5vw;vertical-align:baseline;font-weight:500;width:100%;overflow:hidden;}
  .sec_e{margin:10vw;cursor:default;display: flex;flex-direction:row;justify-content:start;justify-items:left;align-content:flex-end;width:90%;box-sizing:border-box;}
  

  
  
  @media screen and (min-width: 470) and (max-width:700px) {
    .hvrbox-text{font-size:14px;transition:.4s;line-height:0.8;}
  }
  
  
  @media screen and (min-width: 700) and (max-width:999px) {
    .hvrbox-text{font-size: 20px;transition:.4s;}
  }
  
  @media screen and (min-width: 470px) and (max-width:999px) {
  
    .hvrbox{cursor:default;width:100vw;height:54.43vw;min-width:470px;min-height:280px;transition:.4s ease-in-out}
    .hvrbox img{width:100vw;height:54.43vw;min-width:470px;min-height:280px;filter: grayscale(100);transition:.4s ease-in-out;}
    .hvrbox:hover img {transform:scale(120%);filter: grayscale(0);}
    }
  
  @media screen and (min-width: 1000px) and (max-width:1400px) {
  
  .hvrbox{cursor:default;width:49.6vw;height:30.2vw;transition:.4s ease-in-out}
  .hvrbox img{width:49.6vw;height:30.2vw;filter: grayscale(100);transition:.4s ease-in-out;}
  .hvrbox:hover img {transform:scale(120%);filter: grayscale(0);}
  }
  
  @media screen and (min-width:1401px){
  
  .hvrbox{cursor:default;width:33.07vw;height:20vw;min-width:470px;min-height:280px;text-align:justify;font-family:'poppins';padding:0px;margin:0px;border:0px;transition:.4s ease-in-out;}
  .hvrbox img {min-width:470px;min-height:280px;width:33.07vw;height:20vw;filter: grayscale(100);transition:.4s ease-in-out}
  .hvrbox:hover img {transform:scale(120%);filter: grayscale(0);}
  }
  
/*single-work*/
.sec_h{width:100%;box-sizing:border-box;padding:0 30px;gap:0}
.sec_f{width:100%;box-sizing:border-box;cursor:default;display:flex;flex-direction:row;flex-flow:column;justify-content:space-between;min-height:100%;padding:0px;box-sizing:content-box;justify-self:center;align-self:center;gap:30px;margin-left:60px;}
.label__4{color:#cecece;padding-top:130px;padding-bottom:30px;font-size:3.5vw;text-shadow:0 0 6px #000000; a{text-decoration:none;color:#cecece;cursor:pointer;}a:hover{color:#F6F5F1}}
.label__div{display:flex;flex-direction:column;padding-top:0px;;width:100%;}
.down5{fill:none;stroke:#cecece;drop-shadow(0 0 6px #000000);}
.mwork{color:#e4e2da;text-shadow:0 0 6px #2F2F2F}
.pd40{width:100%;font-size:4vw;padding-top:30px;}
.app__workbg{box-sizing:content-box;display:flex;color:#e4e2da;background-repeat:no-repeat;position:relative;max-width:100%;height:fit-content;z-index:0;background:#000000;margin-bottom:20px;}
.bg002{background:url(./img/w002.png);background-size:auto 100%;background-position:40% center;}
.bg003{background:url(./img/w003.png);background-size:auto 100%;background-position:40% center;}
.bg004{background:url(./img/w004.png);background-size:auto 100%;background-position:50% center;}
.bg005{background:url(./img/w005.png);background-size:auto 100%;background-position:50% center;}
.bg006{background:url(./img/w006.png);background-size:auto 100%;background-position:50% center;}
.bg008{background:url(./img/w008_1.png);background-size:auto 100%;background-position:50% center;}
.bg009{background:url(./img/w009_2.png);background-size:auto 100%;background-position:20% center;}
.bg010{background:url(./img/w011_2.png);background-size:auto 100%;background-position:50% 100%;}
.bg013{background:url(./img/w013_0.png);background-size:auto 120%;background-position:100% center;}
.bg014{background:url(./img/w014.png);background-size:auto 100%;background-position:0% center;}
.bg015{background:url(./img/w015_2.png);background-size:auto 100%;background-position:59% center;}
.bg016{background:url(./img/w016_5.png);background-size:auto 100%;background-position:50% center;}
.bg017{background:url(./img/w017_3.png);background-size:auto 130%;background-position:0% top;}
.bg018{background:url(./img/w018-4.png);background-size:100% auto;background-position:50% center;}
.bg019{background:url(./img/w019_4.png);background-size:auto 100%;background-position:30% 0%;}
.bg020{background:url(./img/w020.png);background-size:auto 100%;background-position:60% bottom;}
.bg021{background:url(./img/w021_1.png);background-size:auto 100%;background-position:60% bottom;}


.app__workbgb{box-sizing:content-box;display:flex;overflow:hidden;min-width:90%;max-width:fit-content;height:100%;z-index:-1;background-image:radial-gradient(ellipse farthest-corner at 45px 45px, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 1) 100%);padding:40px;background-repeat:no-repeat}
.div12{padding-bottom:0px;justify-content:center;align-items:center;}
.eng{letter-spacing:0px;font-size:4vw;}
.smallc{font-size:3.3vw;}
.smallt{font-size:4vw;}

.sec_i{width:100%;overflow-x:hidden;box-sizing:border-box;cursor:default;display:flex;flex-direction:row;flex-flow:column;justify-content:space-between;min-height:100%;padding:0px;box-sizing:content-box;justify-self:center;align-self:center;gap:0px;}
.works__left{flex-shrink:unset;flex-grow:unset;justify-content:flex-start;box-sizing:content-box;display:flex;flex-direction:column;height:fit-content;width:100%;justify-content:space-between;cursor:default;transition:all .4 ease-in-out;padding-bottom:5vw;}
.works__right{flex-shrink:unset;flex-grow:unset;justify-content:flex-start;box-sizing:content-box;flex-direction:column;width:100%;text-align:justify;padding:0px;margin:0px;justify-self:flex-end;box-sizing:border-box;justify-content:flex-end;padding-left:0vw;gap:unset;gap:0;;}
.works__l{display:none;}

.page__title5{display:block;width:80%;font-size:8.5vw;line-height:1.5;}
.spanfont{font-size:6vw;line-height:1;
span{font-family:'Unna';font-style:italic;font-weight:400;vertical-align:baseline;font-size:8vw;line-height:1.2;}}


.work__left, .work__right{display:flex;min-width:100px;width:40%;a{font-size:3.5vw}}
.work__left{text-align:right;}
.work__right{text-align:left;}
.work__cen{min-width:fit-content;line-height:1.2;padding:0px 30px; a{font-size:3.5vw;}}
.sec_w{font-size:3.5vw;display:flex;width:fit-content;gap:20px;justify-content:center;justify-self:center;align-items:center;padding:20px 0 50px;}
.cap{width:80%;font-size:3.5vw;margin:unset;margin:20px;}
.sec_g{width:100%;min-height:fit-content;cursor:default;margin-left:0;}

.div12_2{padding-bottom:0px;color:#e4e2da;padding-top:0px;}
.smallsub{font-size:5vw;color:#e4e2da;padding-bottom:20px;}
.italic{line-height:1.2;padding-bottom:10px;font-size:6vw;}
.italic2{line-height:1.2;padding-bottom:10px;font-size:5vw;}


  /*contact*/
  
  .map_pics2:hover img{cursor: pointer;}
  
  .map_pics {
    display:block;
    margin:0 -5vw;
    width:85vw;
    height:60vw;
    background:url("./img/map-xinyi.png");
    background-size:cover;
    transition: 1s ease-in-out;
    cursor: pointer;
  }
  
  .map_pics:hover {
    display:block;
    background:url("./img/map-xinyi.png");
    background-size:cover;
    transition: 1s ease-in-out;
    -webkit-transition: background 1s ease-in-out;
    -moz-transition: background 1s ease-in-out;
    -o-transition: background 1s ease-in-out;
    transition: background 1s ease-in-out;
    cursor: pointer;
  }
  
  .map_dec{width:3vw;}
  
  .map_des{display:inline-flex;width:80vw;font-size:13vw;}
  .map_des a{width:80vw;font-size:3.5vw;margin-left:-4vw;padding-bottom:7vw;}
  
  .map_pics2 {
    margin:0 -5vw;
    width:85vw;
    height:55vw;
    background:url("./img/map-xin.png");
    background-size:100% 100%;
    transition: 1s ease-in-out;
  }
  
  .map_pics2:hover {
    background:url("./img/map-xin.png");
    background-size:100% 100%;
    transition: 1s ease-in-out;
    -webkit-transition: background 1s ease-in-out;
    -moz-transition: background 1s ease-in-out;
    -o-transition: background 1s ease-in-out;
    transition: background 1s ease-in-out;
    cursor: pointer;
  }
  

  .office {font-family:'poppins';font-size:4vw;padding-bottom:40px;line-height:2;}
  .map>span, .map2>span{display:inline-block;color:#FC875B;font-size:4.5vw;font-family:'Noto sans JP','Noto sans TC';font-weight:800;padding-bottom:2vw;}
  
  .map a{font-size:4vw;color:#2F2F2F;text-decoration:none;transition:.4s;cursor: pointer;}
  .map a:hover{color:#FC875B;}
  hr{border:#969697 0.5px solid;width:calc(100% - 2px);}
  .map font{font-size:4.5vw;}
  .map2 font{font-size:4.5vw;}
  .map2 a{font-size:4vw;color:#2F2F2F;cursor: pointer;text-decoration:none;transition:.4s;}
  .map2 a:hover{color:#5985B9;}


  select {line-height:2}




.navigation .my-edit-icon3 {
  padding-top:25.5px;
  padding-left:23px;
  fill: #F6F5F1;
  background: transparent;
  transition: fill 0.8s ease-in-out;
  transition: filter 1s ease-in-out;
  transition: 1s ease-in-out;
}

.navigation.ab .my-edit-icon3 {
  fill:#969697;
  transition: fill 0.8s ease-in-out;
  transition: filter 1s ease-in-out;
  transition: 1s ease-in-out;
  filter: blur(0);
}

.navigation .my-edit-icon3:hover {
  fill: #FFFFFF;
  transition: 1s ease-in-out;
  transition: fill 0.8s ease-in-out;
  transition: filter 1s ease-in-out;
}


  }

  a {cursor:pointer;}