/* mixin */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

main {
  display: block;
}

h1 {
  font-size: 2em;
  margin: .67em 0;
}

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace,monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

b, strong {
  font-weight: bolder;
}

code, kbd, samp {
  font-family: monospace,monospace;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

img {
  border-style: none;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button, input {
  overflow: visible;
}

button, select {
  text-transform: none;
}

[type=button], [type=reset], [type=submit], button {
  -webkit-appearance: button;
}

[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: .35em .75em .625em;
}

legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=checkbox], [type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/* RESET plus */
* {
  background-position: center top;
  background-repeat: no-repeat;
}

html, body {
  font-family: "PingFangTC-Regular", "Heiti TC", "Noto Sans TC", "Microsoft JhengHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

input, select, option {
  font-family: "PingFangTC-Regular", "Heiti TC", "Noto Sans TC", "Microsoft JhengHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

ul, li {
  margin: 0;
  padding: 0;
  border: 0;
}

li {
  margin-left: 1.25em;
}

p {
  margin: 1.25em 0;
}

a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.wrapper {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.wrapper * {
  background-size: 100% auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  word-break: break-all;
}

.wrapper *:after {
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}

.wrapper *:before {
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}

.wrapper:after {
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}

.wrapper:before {
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}

.wrapper.mobile *[data-type="dt"] {
  display: none;
}

.wrapper.desktop *[data-type="mb"] {
  display: none;
}

@media screen and (max-width: 768px) {
  .wrapper.desktop *[data-type="mb"] {
    display: initial;
  }
  .wrapper.desktop *[data-type="dt"] {
    display: none;
  }
}

body.ovh {
  overflow: hidden;
}

.btn {
  cursor: pointer;
}

.wrapper.desktop .btn:hover {
  background-position: center bottom;
}

.UNI-footer {
  position: relative;
}

.gbox {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.gbox * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  word-break: break-all;
}

.gbox *:after {
  background-position: center top;
  background-repeat: no-repeat;
}

.gbox *:before {
  background-position: center top;
  background-repeat: no-repeat;
}

body.desktop .gbox-btn:hover {
  background-position: center bottom;
}

@media screen and (max-width: 1000px) {
  #topBar {
    display: none;
  }
}

/* layout */
body {
  background-color: black;
}

.wrapper {
  display: block;
  background-image: url("./img/bg-web.jpg");
  background-size: 1920px 1080px;
  background-position: center 0;
  position: relative;
  min-width: 1200px;
  width: 100%;
  height: 990px;
}

.wrapper .btn-group-top {
  width: 100%;
  height: 85px;
  position: relative;
  min-width: 1200px;
}

.wrapper .btn-group-top .logo {
  position: absolute;
  top: 15px;
  left: 20px;
}

.wrapper .btn-group-top .logo a {
  display: block;
  background-image: url(./img/logo.png);
  background-size: contain;
  width: 228px;
  height: 81px;
}

.wrapper .btn-group-top .right {
  position: absolute;
  right: 15px;
}

.wrapper .btn-group-top .right .y_t1,
.wrapper .btn-group-top .right .y_t2,
.wrapper .btn-group-top .right .home,
.wrapper .btn-group-top .right .f_b {
  display: inline-block;
  background-size: contain;
  vertical-align: middle;
  margin: 20px 8px 0 0;
  cursor: pointer;
}

.wrapper .btn-group-top .right .y_t1 {
  background-image: url(./img/Y_T1-off.png);
  width: 180px;
  height: 42px;
}

.wrapper .btn-group-top .right .y_t1:hover {
  background-image: url(./img/Y_T1-on.png);
}

.wrapper .btn-group-top .right .y_t2 {
  background-image: url(./img/Y_T2-off.png);
  width: 186px;
  height: 42px;
  margin-right: 25px;
}

.wrapper .btn-group-top .right .y_t2:hover {
  background-image: url(./img/Y_T2-on.png);
}

.wrapper .btn-group-top .right .home {
  background-image: url(./img/home-off.png);
  width: 61px;
  height: 62px;
}

.wrapper .btn-group-top .right .home:hover {
  background-image: url(./img/home-on.png);
}

.wrapper .btn-group-top .right .f_b {
  background-image: url(./img/F_B-off.png);
  width: 61px;
  height: 62px;
}

.wrapper .btn-group-top .right .f_b:hover {
  background-image: url(./img/F_B-on.png);
}

.wrapper .main {
  margin: 0 auto;
  min-width: 1200px;
  position: relative;
  height: 900px;
  overflow: hidden;
}

.wrapper .main .activity-group {
  position: absolute;
  top: 0px;
  left: 57.5%;
}

.wrapper .main .activity-group .item1,
.wrapper .main .activity-group .item2,
.wrapper .main .activity-group .item3,
.wrapper .main .activity-group .item4 {
  width: 819px;
  height: 127px;
  background-size: cover;
  display: block;
  margin-bottom: 30px;
  -webkit-box-shadow: 10px 10px 10px gray;
          box-shadow: 10px 10px 10px gray;
}

.wrapper .main .activity-group .item1 {
  background-image: url("./img/item1-off.png");
}

.wrapper .main .activity-group .item2 {
  height: 122px;
  background-image: url("./img/item2-off.png");
  margin-bottom: 35px;
}

.wrapper .main .activity-group .item3 {
  height: 117px;
  background-image: url("./img/item3-off.png");
  margin-bottom: 45px;
}

.wrapper .main .activity-group .item4 {
  height: 105px;
  background-image: url("./img/item4-off.png");
}

.wrapper .main .activity-group .item1:hover {
  background-image: url("./img/item1-on.png");
}

.wrapper .main .activity-group .item2:hover {
  background-image: url("./img/item2-on.png");
}

.wrapper .main .activity-group .item3:hover {
  background-image: url("./img/item3-on.png");
}

.wrapper .main .activity-group .item4:hover {
  background-image: url("./img/item4-on.png");
}

.wrapper .main .btn-group-bottom {
  position: absolute;
  bottom: 160px;
  left: 46%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  white-space: nowrap;
  z-index: 1;
}

.wrapper .main .btn-group-bottom .skill1,
.wrapper .main .btn-group-bottom .skill2,
.wrapper .main .btn-group-bottom .download,
.wrapper .main .btn-group-bottom .act {
  background-size: cover;
  display: inline-block;
  vertical-align: middle;
}

.wrapper .main .btn-group-bottom .skill1 {
  background-image: url("./img/skill1-off.png");
  width: 270px;
  height: 130px;
}

.wrapper .main .btn-group-bottom .skill1:hover {
  background-image: url("./img/skill1-on.png");
}

.wrapper .main .btn-group-bottom .skill2 {
  background-image: url("./img/skill2-off.png");
  width: 280px;
  height: 132px;
  margin-right: 30px;
}

.wrapper .main .btn-group-bottom .skill2:hover {
  background-image: url("./img/skill2-on.png");
}

.wrapper .main .btn-group-bottom .download {
  background-image: url("./img/download-off.png");
  width: 235px;
  height: 87px;
}

.wrapper .main .btn-group-bottom .download:hover {
  background-image: url("./img/download-on.png");
}

.wrapper .main .btn-group-bottom .act {
  background-image: url("./img/act-off.png");
  width: 235px;
  height: 87px;
  position: relative;
}

.wrapper .main .btn-group-bottom .act:hover {
  background-image: url("./img/act-on.png");
}

.wrapper .main .btn-group-bottom .act::after {
  content: "";
  background-image: url("./img/img.png");
  width: 198px;
  height: 240px;
  position: absolute;
  right: -140px;
  top: -60px;
}

.LB .gbox-wrap {
  background: none;
  background-image: url("./img/LB-bg.png");
  width: 997px;
  height: 585px;
  background-size: contain;
  max-width: none;
  position: relative;
}

.LB .gbox-wrap .gbox-content {
  padding-top: 10px;
}

.LB .gbox-wrap .iframe-box {
  margin: 0 auto;
  width: 920px;
  height: 520px;
}

.LB .gbox-wrap .gbox-close {
  color: #fff;
  position: absolute;
  top: -70px;
  right: 10px;
  font-size: 80px;
  font-weight: lighter;
}

@media screen and (max-width: 768px) {
  .wrapper {
    background-image: url("./img/bg-mb.jpg");
    background-size: cover;
    min-width: auto;
    width: 100%;
    height: 100%;
  }
  .wrapper .btn-group-top {
    width: 100%;
    height: 85px;
    min-width: auto;
    margin-bottom: 465px;
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .wrapper .btn-group-top {
    height: 11.06771vw;
    margin-bottom: 60.54688vw;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .btn-group-top .logo {
    top: 85px;
    left: 52%;
    -webkit-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .wrapper .btn-group-top .logo {
    top: 11.06771vw;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .btn-group-top .logo a {
    width: 228px;
    height: 81px;
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .wrapper .btn-group-top .logo a {
    width: 29.6875vw;
    height: 10.54688vw;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .btn-group-top .right {
    right: 15px;
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .wrapper .btn-group-top .right {
    right: 1.95312vw;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .btn-group-top .right .y_t1,
  .wrapper .btn-group-top .right .y_t2,
  .wrapper .btn-group-top .right .home,
  .wrapper .btn-group-top .right .f_b {
    margin: 5px 2px 0 0;
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .wrapper .btn-group-top .right .y_t1,
  .wrapper .btn-group-top .right .y_t2,
  .wrapper .btn-group-top .right .home,
  .wrapper .btn-group-top .right .f_b {
    margin: 0.65104vw 0.26042vw 0 0;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .btn-group-top .right .y_t1 {
    width: 240px;
    height: 52px;
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .wrapper .btn-group-top .right .y_t1 {
    width: 31.25vw;
    height: 6.77083vw;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .btn-group-top .right .y_t2 {
    width: 250px;
    height: 52px;
    margin-right: 10px;
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .wrapper .btn-group-top .right .y_t2 {
    width: 32.55208vw;
    height: 6.77083vw;
    margin-right: 1.30208vw;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .btn-group-top .right .home {
    width: 90px;
    height: 90px;
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .wrapper .btn-group-top .right .home {
    width: 11.71875vw;
    height: 11.71875vw;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .btn-group-top .right .f_b {
    width: 90px;
    height: 90px;
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .wrapper .btn-group-top .right .f_b {
    width: 11.71875vw;
    height: 11.71875vw;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .main {
    min-width: auto;
    height: 900px;
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .wrapper .main {
    height: 117.1875vw;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .main .activity-group {
    position: relative;
    top: 0px;
    left: 0;
  }
  .wrapper .main .activity-group .item1,
  .wrapper .main .activity-group .item2,
  .wrapper .main .activity-group .item3,
  .wrapper .main .activity-group .item4 {
    width: 742px;
    height: 175px;
    background-size: contain;
    background-position: bottom left;
    margin-bottom: 0px;
    -webkit-box-shadow: none;
            box-shadow: none;
    position: relative;
    left: 50px;
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .wrapper .main .activity-group .item1,
  .wrapper .main .activity-group .item2,
  .wrapper .main .activity-group .item3,
  .wrapper .main .activity-group .item4 {
    width: 96.61458vw;
    height: 22.78646vw;
    left: 6.51042vw;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .main .activity-group .item1 {
    background-image: url("./img/item1-mb-off.png");
  }
  .wrapper .main .activity-group .item2 {
    height: 175px;
    background-image: url("./img/item2-mb-off.png");
    margin-bottom: 0px;
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .wrapper .main .activity-group .item2 {
    height: 22.78646vw;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .main .activity-group .item3 {
    height: 175px;
    background-image: url("./img/item3-mb-off.png");
    margin-bottom: 0px;
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .wrapper .main .activity-group .item3 {
    height: 22.78646vw;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .main .activity-group .item4 {
    height: 175px;
    background-image: url("./img/item4-mb-off.png");
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .wrapper .main .activity-group .item4 {
    height: 22.78646vw;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .main .activity-group .item1:hover {
    background-image: url("./img/item1-mb-on.png");
  }
  .wrapper .main .activity-group .item2:hover {
    background-image: url("./img/item2-mb-on.png");
  }
  .wrapper .main .activity-group .item3:hover {
    background-image: url("./img/item3-mb-on.png");
  }
  .wrapper .main .activity-group .item4:hover {
    background-image: url("./img/item4-mb-on.png");
  }
  .wrapper .main .btn-group-bottom {
    position: relative;
    bottom: 0;
    left: 0;
    -webkit-transform: translate(0%, 0);
            transform: translate(0%, 0);
    text-align: center;
    margin-bottom: 35px;
    z-index: 1;
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .wrapper .main .btn-group-bottom {
    margin-bottom: 4.55729vw;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .main .btn-group-bottom .skill1 {
    width: 300px;
    height: 130px;
    margin-right: 20px;
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .wrapper .main .btn-group-bottom .skill1 {
    width: 39.0625vw;
    height: 16.92708vw;
    margin-right: 2.60417vw;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .main .btn-group-bottom .skill2 {
    width: 300px;
    height: 132px;
    margin-right: 0px;
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .wrapper .main .btn-group-bottom .skill2 {
    width: 39.0625vw;
    height: 17.1875vw;
  }
}

@media screen and (max-width: 768px) {
  .wrapper .main .btn-group-bottom .download {
    display: none;
  }
  .wrapper .main .btn-group-bottom .act {
    display: none;
  }
  .LB .gbox-wrap {
    background: none;
    background-image: url("./img/LB-mb.png");
    width: 725px;
    height: 419px;
    background-size: contain;
    max-width: none;
    position: relative;
    padding: 10px;
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .LB .gbox-wrap {
    width: 94.40104vw;
    height: 54.55729vw;
    padding: 1.30208vw;
  }
}

@media screen and (max-width: 768px) {
  .LB .gbox-wrap .iframe-box {
    margin: 0 auto;
    width: 685px;
    height: 385px;
  }
}

@media screen and (max-width: 768px) and (max-width: 768px) {
  .LB .gbox-wrap .iframe-box {
    width: 89.19271vw;
    height: 50.13021vw;
  }
}

@media screen and (max-width: 768px) {
  .LB .gbox-wrap .gbox-close {
    color: #fff;
    position: absolute;
    top: -70px;
    right: 10px;
    font-size: 80px;
    font-weight: lighter;
  }
}

@media screen and (max-width: 500px) {
  .LB .gbox-wrap {
    padding: 0;
  }
}
/*# sourceMappingURL=default.css.map */