@import url("fontawesome-free-5.15.4-web/css/all.css");\n
html {
  margin: 0px;
  padding: 0px; }

.okicss {
  
   }
  .okicss body, .okicss input, .okicss select, .okicss textarea {
    margin: 0px;
    padding: 0px;
    font-family: "微軟正黑體", "Helvetica Neue", Helvetica, Arial, sans-serif, "新細明體";
    -font-family: '*Raleway*', 'Lato', "PingFang TC", "Heiti TC", "Noto Sans TC", aktiv-grotesk, source-han-sans-traditional, "Segoe UI", Roboto, "Helvetica Neue", "Microsoft JhengHei", "Microsoft YaHei", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
  .okicss .wrap {
    scroll-behavior: smooth; }
  .okicss .hide, .okicss .none {
    display: none; }
  .okicss a, .okicss a:hover, .okicss a:active {
    text-decoration: none;
    color: inherit; }
  .okicss .csr, .okicss .ptr {
    cursor: pointer; }
  .okicss .relbox {
    position: relative;
    display: block;
    width: 100%;
    height: 100%; }
  .okicss .abs {
    position: absolute; }
  .okicss .tleft {
    text-align: left; }
  .okicss .tjustfy {
    text-align: justify; }
  .okicss .tright {
    text-align: right; }
  .okicss .tcenter {
    text-align: center; }
  .okicss .full {
    width: 100%;
    display: block; }
  .okicss .alpha0 {
    opacity: 0; }
  @media screen and (max-width: 1280px) {
  .okicss {
     } }
  @media screen and (max-width: 640px) {
  .okicss {
     }
    .okicss button, .okicss select, .okicss a:active, .okicss a:focus, .okicss a:hover {
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      tap-highlight-color: transparent;
      outline: none !important;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none; } }

.okicss {
   }
  .okicss header {
    display: block;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 10;
     }
    .okicss header .wmid {
      position: relative;
      width: 100%;
      max-width: 480px;
      margin: auto; }
      .okicss header .wmid .hd, .okicss header .wmid .hdh {
        width: 100%;
        left: 0;
        top: 0;
        z-index: 9990; }
      .okicss header .wmid .logo {
        z-index: 9993;
        left: 50%;
        top: 37px;
        width: 94px;
        min-width: 94px;
        transform: translateX(-50%); }
      .okicss header .wmid .opn {
        width: 12%;
        right: 10px;
        top: 35px;
        z-index: 9991; }
        .okicss header .wmid .opn img {
          display: block; }
    .okicss header .menu {
      left: 0;
      top: 0;
      z-index: 9980;
      width: 100%;
      height: 0vh;
      background: rgba(0, 0, 0, 0);
      transition: height 0.3s cubic-bezier(0.09, 0.75, 0.64, 1.04);
      overflow: hidden; }
      .okicss header .menu .mbox {
        transition: all 0.5s cubic-bezier(0.09, 0.75, 0.64, 1.04);
        position: absolute;
        z-index: 9980;
        width: 100%;
        opacity: 0;
        height: 100vh;
        text-align: right;
        background: rgba(255, 255, 255, .9); }
        .okicss header .menu .mbox .wmid {
          position: relative; }
        .okicss header .menu .mbox .logom {
          width: 94px;
          left: 50%;
          top: 30px;
          transform: translateX(-50%); }
        .okicss header .menu .mbox .mseg {
          display: block;
          width: 100%;
          padding-bottom: 24%; }
        .okicss header .menu .mbox a {
          text-align: right; }
          .okicss header .menu .mbox a img.hvr {
            display: none; }
          .okicss header .menu .mbox a .def {
            desplay: block; }
          .okicss header .menu .mbox a:hover img.hvr {
            display: block; }
            .okicss header .menu .mbox a:hover img.def {
              display: none; }
        .okicss header .menu .mbox img {
          display: block;
          width: 100%; }
    .okicss header[class~=on] .hd {
      display: none; }
      .okicss header[class~=on] .menu {
        top: 0;
        z-index: 9992;
        width: 100%;
        height: 100vh;
        transition: height 0.3s cubic-bezier(0.09, 0.75, 0.64, 1.04);
        overflow: hidden; }
        .okicss header[class~=on] .menu .mbox {
          position: absolute;
          opacity: 1;
          height: 100vh;
          text-align: right; }
          .okicss header[class~=on] .menu .mbox .logom {
            width: 94px;
            top: 40px;
            opacity: 0; }
          .okicss header[class~=on] .menu .mbox .mseg {
            display: block;
            width: 100%;
            padding-bottom: 24%; }
          .okicss header[class~=on] .menu .mbox a {
            text-align: right; }
          .okicss header[class~=on] .menu .mbox img {
            display: block;
            width: 100%; }
    @media screen and (max-width: 750px) {
  .okicss header {
     } }


.okicss {
   }
  .okicss .footer {
    width: 100%;
    display: block;
    aspect-ratio: 750 / 90;
    position: relative; }
    .okicss .footer .flogo {
      position: absolute;
      bottom: 0px;
      left: 0px;
      width: 100%; }
  @media screen and (max-width: 1280px) {
  .okicss {
     } }
  @media screen and (max-width: 750px) {
  .okicss {
     } }
  @media screen and (max-width: 640px) {
  .okicss {
     } }

.okicss {
  
   }
  .okicss body {
    width: 100%;
    display: block;
    background-color: #f4e8da; }
  .okicss .wmid {
    margin: auto;
    width: 100%;
    max-width: 1380px;
    box-sizing: border-box;
    display: block;
    height: 100%;
    min-height: 0;
    position: relative; }
  .okicss .okiwrap {
    display: block;
    width: 100%;
    max-width: 750px;
    margin: auto; }
  .okicss .wrap {
    width: 100%;
    height: auto;
    display: block;
    position: absolute;
    left: 0;
    top: 0; }
  .okicss .bwrap {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    left: 0;
    top: 0;
    background-color: #f2f2f2; }
  .okicss .okiwrap .wbg {
    overflow: hidden;
    background-color: #fff;
     }
  .okicss .okiwrap .pbg {
    background-size: 100%;
    background-position: center top;
    background-repeat: repeat-y; }
  .okicss .top-seg {
    display: block;
    width: 100%;
    padding-bottom: 19%;
    xaspect-ratio: 750 / 90; }
  .okicss .sec {
    display: block;
    width: 100%;
    height: 100%; }
  .okicss .secbg {
    background-size: 100vw 100vh;
    background-position: left center;
     }
  .okicss .sidebtn {
    width: 40px;
    position: fixed;
    left: calc(50% + 220px);
    top: 35%;
    transform: translate(-50%, -50%);
    z-index: 9;
     }
    .okicss .sidebtn img {
      width: 100%; }
  .okicss .scrollmsg {
    display: none;
    position: fixed;
    left: 10px;
    top: 10px;
    background: rgba(0, 0, 0, .8);
    color: #fff;
    width: auto;
    height: auto;
    min-width: 100px;
    min-height: 100px;
    font-size: 9pt;
    padding: 20px; }
  .okicss .local .scrollmsg {
    display: block;
    z-index: 9999;
     }
  .okicss .abtn {
    display: block;
    cursor: pointer; }
  .okicss .abtn img {
    width: 100%;
    height: 100%; }
  .okicss[class~=local] {
     }
    .okicss[class~=local] .sec, .okicss[class~=local] .wmid {
      border: 1px solid #f00;
      box-sizing: border-box; }
    .okicss[class~=local] .bwrap {
      border: 1px solid #0f0;
      box-sizing: border-box; }
    .okicss[class~=local] .abtn {
      background-color: rgba(255, 0, 0, .6); }
  .okicss .show640 {
    display: none; }
  @media screen and (max-width: 640px) {
  .okicss .show640 {
    display: block; } }
  @media screen and (max-width: 480px) {
  .okicss .sidebtn {
    width: 30px;
    left: calc(100% - 30px);
    transform: translate(0%, -50%); }
  .okicss .top-seg {
    padding-bottom: 24.5vw; } }


.okisiema {
box-sizing:border-box;
position:relative;	
}

.okisiema .siema img {
  width: 100%;
}


.okisiema .rb {
xborder:1px solid #f00;	
}

.okisiema .tab{
position:absolute;
top:50%;
width:100px;
height:100px;
display:block;
margin-top:-50px;
z-index:4;
cursor:pointer;
}
.okisiema .tab[class~=tleft]{
position:absolute;
left:0px;
}
.okisiema .tab[class~=tright]{
position:absolute;
right:0px;
}

.okisiema .tab img{
width:100%;
}



.okisiema .siema .relbox {
  position:relative;
}




.okisiema .pagerbox{
position:absolute;
left:0px;
bottom:0px;
height:50px;
display:block;
width:100%;
text-align:center;
z-index:4;
}

.okisiema .pagerbox i{
 width:8px;
 height:8px;
 border:3px solid rgba(0,0,0,0);
 margin:5px;
 display:inline-block;
 border-radius:10px;
 background-color:#999;
 cursor:pointer;
 
}

.okisiema .pagerbox i[class~=on]{
 width:8px;
 height:8px;
 border:3px solid rgba(0,0,0,0);
 margin:5px;
 display:inline-block;
 border-radius:10px;
 background-color:#333;
 cursor:pointer;
 
}




.okisiema .siema {
  width: 100%;
  opacity:1;
}

.okisiema .siema[class~=on] {
  width: 100%;
  opacity:1;
  z-index:2;
  position:relative;
}


.okisiema .fbg {
 position:relative;
 z-index:1;
 display:none;
}


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

.okisiema .tab{
position:absolute;
top:50%;
width:60px;
height:50px;
display:block;
margin-top:-25px;
z-index:4;
cursor:pointer;
}
 
.okisiema .pagerbox{
xdisplay:none;
bottom:0px;
height:30px;
}



.okisiema .pagerbox i{
 width:4px;
 height:4px;
 
 margin:3px;
 display:inline-block;
 border-radius:10px;
 background-color:#999;
 cursor:pointer;
 
}

.okisiema .pagerbox i[class~=on]{
 width:4px;
 height:4px;
 margin:3px;
 display:inline-block;
 border-radius:10px;
 background-color:#333;
 cursor:pointer;
 
}



}

.okisiema-m {
box-sizing:border-box;
position:relative;	
}

.okisiema-m .siema img {
  width: 100%;
}


.okisiema-m .rb {
xborder:1px solid #f00;	
}

.okisiema-m .tab{
position:absolute;
top:50%;
width:50px;
height:50px;
display:block;
margin-top:-25px;
z-index:4;
cursor:pointer;
}
.okisiema-m .tab[class~=tleft]{
position:absolute;
left:0px;
}
.okisiema-m .tab[class~=tright]{
position:absolute;
right:0px;
}

.okisiema-m .pagerbox{
position:absolute;
left:0px;
bottom:0px;
height:50px;
display:block;
width:100%;
text-align:center;
z-index:4;
}

.okisiema-m .pagerbox i{
 width:8px;
 height:8px;
 border:3px solid rgba(0,0,0,0);
 margin:5px;
 display:inline-block;
 border-radius:10px;
 background-color:#333;
 cursor:pointer;
 
}
.okisiema-m .pagerbox i[class~=on]{
 width:10px;
 height:10px;	
 border:3px solid #3DBDBF;
 background-color:#fff;
 xbox-shadow:3px 3px 3px rgba(0,0,0,.6); 
 transform:translateY(1px);
 -webkit-transform:translateY(1px); 
}



.okisiema-m .siema {
  width: 100%;
  opacity:0;
}

.okisiema-m .siema[class~=on] {
  width: 100%;
  opacity:1;
  z-index:2;
  position:relative;
}


.okisiema-m .fbg {
 position:relative;
 z-index:1;
}
.okisiema-m .fbg img {
 position:absolute;
 left:0px;
 top:0px;
 width:100%;	
 z-index:0;
 opacity:0;
 transition:all .3s;
}
.okisiema-m .fbg img[class~=on] {
 opacity:1;
 z-index:1;
}


@media screen  and (max-width: 640px) {
 
.okisiema-m .pagerbox{
display:none;
}
}


.okicss {   }  .okicss .oki-swing {    animation: oki-swing ease-in-out 1s infinite alternate; }  .okicss .oki-zoom {    animation: oki-zoom ease-in-out 2.5s infinite alternate; }  .okicss .oki-updown {    animation: oki-updown ease-in-out 2.5s infinite alternate; }  .okicss .oki-bounce {    animation: oki-bounce ease-in-out 2.5s infinite; }@keyframes oki-swing {  0% {    transform: rotate(3deg); }  100% {    transform: rotate(-3deg); } }@keyframes oki-zoom {  0% {    transform: scale(1); }  50% {    transform: scale(1.1); }  100% {    transform: scale(1); } }@keyframes oki-updown {  0% {    transform: translateY(-5%); }  50% {    transform: translateY(5%); }  100% {    transform: translateY(-5%); } }@keyframes oki-bounce {  0% {    transform: scale(1); }  10% {    transform: scale(1); }  20% {    transform: scale(1); }  30% {    transform: scale(1); }  45% {    transform: scale(1.2); }  50% {    transform: scale(0.8); }  60% {    transform: scale(1.1); }  70% {    transform: scale(0.9); }  80% {    transform: scale(1.05); }  90% {    transform: scale(0.95); }  100% {    transform: scale(1); } }@keyframes oki-bounce-z {  0% {    transform: scale(0.55); }  15% {    transform: scale(1.35); }  30% {    transform: scale(0.7); }  45% {    transform: scale(1.2); }  60% {    transform: scale(0.8); }  70% {    transform: scale(1.1); }  80% {    transform: scale(0.9); }  90% {    transform: scale(1); }  100% {    transform: scale(1); } }

.okicss {   }  .okicss .anibtn-zoom {    transform: scale(1, 1);    transition: 0.3s all ease-in-out; }    .okicss .anibtn-zoom:hover {      transform: scale(1.2, 1.2); }

[data-scrollbar],[scrollbar],scrollbar{display:block;position:relative}[data-scrollbar] .scroll-content,[scrollbar] .scroll-content,scrollbar .scroll-content{-webkit-transform:translateZ(0);transform:translateZ(0)}[data-scrollbar].sticky .scrollbar-track,[scrollbar].sticky .scrollbar-track,scrollbar.sticky .scrollbar-track{background:hsla(0,0%,87%,.75)}[data-scrollbar] .scrollbar-track,[scrollbar] .scrollbar-track,scrollbar .scrollbar-track{position:absolute;opacity:0;z-index:1;transition:opacity .5s ease-out,background .5s ease-out;background:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}[data-scrollbar] .scrollbar-track.show,[data-scrollbar] .scrollbar-track:hover,[scrollbar] .scrollbar-track.show,[scrollbar] .scrollbar-track:hover,scrollbar .scrollbar-track.show,scrollbar .scrollbar-track:hover{opacity:1}[data-scrollbar] .scrollbar-track:hover,[scrollbar] .scrollbar-track:hover,scrollbar .scrollbar-track:hover{background:hsla(0,0%,87%,.75)}[data-scrollbar] .scrollbar-track-x,[scrollbar] .scrollbar-track-x,scrollbar .scrollbar-track-x{bottom:0;left:0;width:100%;height:8px}[data-scrollbar] .scrollbar-track-y,[scrollbar] .scrollbar-track-y,scrollbar .scrollbar-track-y{top:0;right:0;width:4px;height:100%}[data-scrollbar] .scrollbar-thumb,[scrollbar] .scrollbar-thumb,scrollbar .scrollbar-thumb{position:absolute;top:0;left:0;width:4px;height:8px;background:rgba(0,0,0,.5);border-radius:4px}[data-scrollbar] .overscroll-glow,[scrollbar] .overscroll-glow,scrollbar .overscroll-glow{position:absolute;top:0;left:0;width:100%;height:100%}

/*=== home === in*/

/*

*/
.okicss {
  /*okicss*/ }
  .okicss .ctr-home {
    min-height: calc(100vh - 50px); }
  .okicss .sec-1 {
    width: 100%;
    height: 810px;
    xaspect-ratio: 750 / 1260; }
    .okicss .sec-1 .wmid {
      height: 100%;
      width: 100%;
      position: relative; }
  .okicss .bg {
    width: 100%;
    left: 0%;
    top: 0%;
    opacity: 0;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .okicss .animated .bg {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.6s; }
  .okicss .btn1 {
    width: 35%;
    left: 8.5%;
    top: 73%;
    opacity: 0;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .okicss .animated .btn1 {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.3s; }
  .okicss .btn2 {
    width: 35%;
    left: 59.5%;
    top: 73%;
    opacity: 0;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .okicss .animated .btn2 {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.3s; }
  .okicss .btnmid {
    width: 18%;
    left: 43%;
    top: 74%;
    opacity: 0;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .okicss .animated .btnmid {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.3s; }
  .okicss .p {
    width: 100%;
    left: 0%;
    top: 36%;
    opacity: 0;
    transform: translate(0%, -10%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .okicss .animated .p {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.3s; }
  .okicss .pcat {
    width: 43%;
    left: 52.5%;
    top: 21%;
    opacity: 0;
    transform: translate(0%, 10%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .okicss .animated .pcat {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.2s; }
  .okicss .pdog {
    width: 39%;
    left: 5.5%;
    top: 21%;
    opacity: 0;
    transform: translate(0%, 10%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .okicss .animated .pdog {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 0.9s; }
  .okicss .t1 {
    width: 61%;
    left: 4%;
    top: 1%;
    opacity: 0;
    transform: translate(10%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .okicss .animated .t1 {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.5s; }
  .okicss .t2 {
    width: 56%;
    left: 42%;
    top: 8%;
    opacity: 0;
    transform: translate(-10%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .okicss .animated .t2 {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.6s; }
  .okicss .t3 {
    width: 37%;
    left: 62%;
    top: 3%;
    opacity: 0;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .okicss .animated .t3 {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.9s; }
  .okicss .tf {
    width: 72%;
    left: 14%;
    top: 58%;
    opacity: 0;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.1s;
    transition-delay: 0s; }
  .okicss .animated .tf {
    opacity: 1;
    transform: translate(0%, 0%) scale(1, 1) rotate(0deg);
    transition: all 0.6s cubic-bezier(0.09, 0.75, 0.64, 1.04);
    transition-delay: 1.2s; }
  @media screen and (max-width: 1280px) {
  .okicss {
    /*@media:w1280*/ } }
  @media screen and (max-width: 750px) {
  .okicss {
    /*@media:w640*/ } }
  @media screen and (max-width: 480px) {
  .okicss {
    /*@media:w640*/ }
    .okicss .sec-1 {
      height: 168vw; } }