@font-face {
  font-family: myFont;
  src: url(../font/Eurostile.ttf); }
* {
  margin: 0;
  padding: 0;
  font-family: Microsoft Jhenghei; }

body {
  overflow-x: hidden;
  background: #4d4948; }
  body > div {
    max-width: 1920px;
    margin: auto;
    background: #E1D3BB;
    padding: 50px;
    box-shadow: 0 0 30px 1px #333;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2eade+0,e1d3bb+100 */
    background: #E1D3BB;
    /* Old browsers */
    background: -moz-linear-gradient(top, #f2eade 0%, #e1d3bb 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #f2eade 0%, #e1d3bb 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #f2eade 0%, #e1d3bb 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2eade', endColorstr='#e1d3bb',GradientType=0 );
    /* IE6-9 */ }
    body > div h2 {
      color: #4d4948;
      text-align: center;
      text-shadow: 2px 2px 5px #ccc;
      border-bottom: #66523F 4px dotted;
      padding-bottom: .5em; }
  body nav a {
    color: #e37d11; }

.KV {
  position: relative;
  max-width: 1920px;
  height: 1080px;
  overflow: hidden;
  overflow-x: hidden;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2eade+0,e1d3bb+100 */
  background: #ffb82a;
  /* Old browsers */
  background: -moz-linear-gradient(top, #ffb82a 0%, #ff8a15 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ffb82a 0%, #ff8a15 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ffb82a 0%, #ff8a15 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb82a', endColorstr='#ff8a15',GradientType=0 );
  /* IE6-9 */ }
  .KV > * {
    position: absolute; }
  .KV h1 {
    color: #fff;
    z-index: 100;
    font-weight: bolder;
    font-size: 6rem;
    text-shadow: 5px 5px 20px #c1691a;
    text-align: center;
    padding: 1rem;
    top: 35%;
    margin: auto;
    position: relative; }
    .KV h1 span {
      font-weight: 100;
      display: block;
      font-size: 3rem;
      text-align: right;
      max-width: 1340px;
      margin: auto; }
  .KV img.KV_circle {
    left: 4.2%;
    bottom: 5.6%;
    width: 80%;
    max-width: 685px;
    animation: rotation 10s infinite linear; }
@-webkit-keyframes rotation {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(359deg); } }
  .KV .KV_date {
    font-family: Microsoft Jhenghei;
    font-size: 25px;
    font-weight: 100;
    color: #8C5900;
    text-align: right;
    top: 5%;
    right: 5%; }
    .KV .KV_date span {
      font-family: Helvetica;
      font-size: 70px;
      display: block;
      font-weight: bolder;
      margin-bottom: -.1em; }
      .KV .KV_date span div {
        display: inline-block;
        height: 50px;
        margin: 0 .2em;
        border-left: #8C5900 1px solid; }
  .KV div {
    font-family: myFont;
    color: #321C02; }
    .KV div.KV_B5G {
      left: 12%;
      top: 8%;
      animation: fadeAnimate 5s linear 10s infinite alternate;
      font-size: 10em;
      opacity: .2; }
    .KV div.KV_5G {
      left: 40%;
      top: 20%;
      animation: fadeAnimate 1s linear 6s infinite alternate;
      font-size: 6em;
      opacity: .2; }
    .KV div.KV_NBIOT {
      left: 25%;
      top: 55%;
      animation: fadeAnimate 4s linear 8s infinite alternate;
      font-size: 4em;
      opacity: .2; }
    .KV div.KV_AIOT {
      left: 15%;
      top: 65%;
      animation: fadeAnimate 2s linear 12s infinite alternate;
      font-size: 5em;
      opacity: .2; }
    .KV div.KV_Bio {
      left: 60%;
      top: 80%;
      animation: fadeAnimate 5s linear 10s infinite alternate;
      font-size: 3em;
      opacity: .2; }
    .KV div.KV_SAR {
      left: 35%;
      top: 80%;
      animation: fadeAnimate 12s linear 1s infinite alternate;
      font-size: 6em;
      opacity: .2; }
    .KV div.KV_mmWave {
      left: 60%;
      top: 55%;
      animation: fadeAnimate 5s linear 10s infinite alternate;
      font-size: 3em;
      opacity: .2; }
    .KV div.KV_Telecom {
      left: 75%;
      top: 65%;
      animation: fadeAnimate 7s linear 4s infinite alternate;
      font-size: 5em;
      opacity: .2; }
@-webkit-keyframes fadeAnimate {
  0% {
    opacity: 1;
    filter: hue-rotate(0deg) saturate(2) brightness(0); }
  25% {
    opacity: .7;
    filter: hue-rotate(25deg) saturate(18) brightness(50); }
  50% {
    opacity: .4;
    filter: hue-rotate(5deg) saturate(8) brightness(100); }
  75% {
    opacity: .6;
    filter: hue-rotate(15deg) saturate(32) brightness(50); }
  100% {
    opacity: .8;
    filter: hue-rotate(5deg) saturate(6) brightness(0); } }
  .KV .KV_line2 {
    left: 11%;
    top: 54%;
    right: 0;
    bottom: 16.7%; }
    .KV .KV_line2 img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%; }
@keyframes Line2FadeInOut {
  0% {
    opacity: 1; }
  20% {
    opacity: 1; }
  40% {
    opacity: 0; }
  60% {
    opacity: 0; }
  80% {
    opacity: 0; }
  100% {
    opacity: 1; } }
  .KV .KV_line1 {
    left: 5%;
    top: 7%;
    right: 56%;
    bottom: 82%; }
    .KV .KV_line1 img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      animation: Line1FadeInOut 6s linear infinite alternate; }
      .KV .KV_line1 img:nth-of-type(1) {
        animation-delay: 4s; }
      .KV .KV_line1 img:nth-of-type(2) {
        animation-delay: 2s; }
      .KV .KV_line1 img:nth-of-type(3) {
        animation-delay: 0; }
@keyframes Line1FadeInOut {
  0% {
    opacity: 1; }
  17% {
    opacity: 1; }
  25% {
    opacity: 0; }
  100% {
    opacity: 1; } }
  .KV a {
    display: block;
    width: 30px;
    height: 30px;
    border: #4d4948 1px solid;
    border-radius: 50%;
    padding: 10px;
    margin: auto;
    left: 50%;
    right: 50%;
    bottom: 5%;
    background-image: url(../img/down-.png);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center 60%;
    animation: dropDown 1s infinite linear alternate; }
    .KV a:hover {
      background: #e37d11;
      border: #fff 1px solid;
      background-image: url(../img/down.png);
      background-size: 60%;
      background-repeat: no-repeat;
      background-position: center 60%; }
@-webkit-keyframes dropDown {
  from {
    transform: translateY(0);
    opacity: .1; }
  to {
    transform: translateY(10px);
    opacity: 1; } }
#intro div {
  table-layout: fixed;
  overflow: auto;
  word-wrap: break-word;
  word-break: normal;
  text-align: justify;
  text-justify: inter-ideograph; }
  #intro div p {
    font-size: 20px;
    line-height: 1.6em;
    padding: .1em 0; }

#agenda {
  background: #fff; }
  #agenda > div {
    background: #fff;
    font-size: 16px; }
    #agenda > div div {
      padding: 0;
      margin: 0; }
    #agenda > div .row {
      background: transparent; }
    #agenda > div .session {
      padding: 10px;
      color: #fff;
      background: #e37d11;
      text-align: center;
      border-bottom: #999 1px dotted;
      font-size: 24px; }
    #agenda > div .time {
      position: relative; }
      #agenda > div .time span {
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
    #agenda > div .row {
      padding: 10px;
      border-bottom: #999 1px dotted; }
      #agenda > div .row.break {
        background: #E5E5E5; }
    #agenda > div .topic {
      padding: 10px; }
      #agenda > div .topic span {
        font-weight: bolder;
        font-size: 1.2em; }
      #agenda > div .topic.TrackA, #agenda > div .topic.TrackC {
        background: #FAFAFA; }
      #agenda > div .topic.TrackB {
        background: #FFF; }

#speaker .row div {
  margin-bottom: 20px; }
  #speaker .row div h3 {
    font-size: 24px;
    color: #000; }
  #speaker .row div p {
    margin: 0;
    padding: 0;
    color: #666; }

#sponsor div div {
  margin: 15px 0; }
  #sponsor div div img {
    border: #F4EFDC 1px dotted;
    border-radius: 20px; }
    #sponsor div div img:hover {
      border: #333 1px solid;
      border-radius: 20px; }

#venue > div div h3 {
  font-size: 24px;
  margin-bottom: .5em; }
#venue > div div h5 {
  font-size: 16px;
  margin-top: .5em; }
  #venue > div div h5 span {
    font-size: 12px;
    font-weight: 200; }
#venue > div div ul li {
  font-weight: 300;
  margin-left: 1.5em; }

#join div ul li {
  padding: 1em 0; }

#intro > div, #agenda > div, #sponsor > div, #venue > div, #join > div {
  padding: 1em 5em;
  color: #4d4948; }

.PM_mobile {
  display: none; }

@media screen and (max-width: 768px) {
  .KV {
    position: relative;
    height: 500px;
    width: 100%;
    overflow: hidden;
    overflow-x: hidden; }
    .KV > * {
      position: absolute; }
    .KV h1 {
      z-index: 100;
      font-weight: bolder;
      font-size: 2rem;
      text-align: center;
      padding: 0;
      top: 30%;
      width: 100%;
      margin: auto;
      position: relative; }
      .KV h1 span {
        font-weight: 100;
        display: block;
        font-size: 1rem;
        text-align: right;
        max-width: 90%; }
    .KV img.KV_circle {
      left: 4.2%;
      bottom: 5.6%;
      width: 40%;
      animation: rotation 10s infinite linear; }
    .KV .KV_date {
      font-family: Microsoft Jhenghei;
      font-size: 12px;
      font-weight: 100;
      text-align: right;
      top: 5%;
      right: 5%; }
      .KV .KV_date span {
        font-family: Helvetica;
        font-size: 28px;
        display: block;
        font-weight: bolder;
        margin-bottom: -.1em; }
        .KV .KV_date span div {
          display: inline-block;
          height: 20px;
          margin: 0 .2em; }
    .KV div.KV_B5G {
      left: 12%;
      top: 8%;
      animation: fadeAnimate 5s linear 10s infinite alternate;
      font-size: 5em;
      opacity: .2; }
    .KV div.KV_5G {
      left: 40%;
      top: 20%;
      animation: fadeAnimate 1s linear 6s infinite alternate;
      font-size: 3em;
      opacity: .2; }
    .KV div.KV_NBIOT {
      left: 20%;
      top: 55%;
      animation: fadeAnimate 4s linear 8s infinite alternate;
      font-size: 2em;
      opacity: .2; }
    .KV div.KV_AIOT {
      left: 10%;
      top: 70%;
      animation: fadeAnimate 2s linear 12s infinite alternate;
      font-size: 2.5em;
      opacity: .2; }
    .KV div.KV_Bio {
      left: 40%;
      top: 72%;
      animation: fadeAnimate 5s linear 10s infinite alternate;
      font-size: 1em;
      opacity: .2; }
    .KV div.KV_SAR {
      left: 25%;
      top: 80%;
      animation: fadeAnimate 12s linear 1s infinite alternate;
      font-size: 3em;
      opacity: .2; }
    .KV div.KV_mmWave {
      left: 60%;
      top: 55%;
      animation: fadeAnimate 5s linear 10s infinite alternate;
      font-size: 1.5em;
      opacity: .2; }
    .KV div.KV_Telecom {
      left: 55%;
      top: 75%;
      animation: fadeAnimate 7s linear 4s infinite alternate;
      font-size: 2.5em;
      opacity: .2; }
    .KV .KV_line2 {
      left: 0;
      top: 50%;
      right: -50%;
      bottom: 5%; }
      .KV .KV_line2 img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        animation: Line2FadeInOut 10s linear infinite alternate; }
    .KV .KV_line1 {
      left: 5%;
      top: 7%;
      right: 40%;
      bottom: 70%; }
      .KV .KV_line1 img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        animation: Line1FadeInOut 6s linear infinite alternate; }
    .KV a {
      display: block;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      padding: 10px;
      margin: auto;
      left: 50%;
      right: 50%;
      bottom: 5%;
      background-image: url(../img/down-.png);
      background-size: 60%;
      background-repeat: no-repeat;
      background-position: center 60%;
      animation: dropDown 1s infinite linear alternate; }
      .KV a:hover {
        background: #A09781;
        border: #e37d11 1px solid; }

  #intro > div, #agenda > div, #sponsor > div, #venue > div, #join > div {
    padding: 0;
    margin: 0; }
    #intro > div div, #agenda > div div, #sponsor > div div, #venue > div div, #join > div div {
      margin: 0; }

  div.PM_large {
    display: none; }

  div.PM_mobile {
    display: block; } }