@charset "utf-8";

/**************************************************
= header 上方登入選單
********************/
header {
  background: #ffffff;
}
header,
header a,
header button,
header .dropdown-content a {
  color: #ffffff;
}
header > a,
header > div {
  color: rgba(84, 84, 84, 0.7);
}
header .fontsize button {
  color: #ffffff;
  background-color: rgba(84, 84, 84, 0.4);
}
header .fontsize button:hover {
  background-color: rgba(84, 84, 84, 1);
}
header .dropdown svg {
  fill: rgba(84, 84, 84, 0.7);
}
header a:hover,
header > div:hover {
  background: none;
  color: rgba(84, 84, 84, 1);
}
header .dropdown:hover svg {
  fill: rgba(84, 84, 84, 1);
}
header .dropdown-content {
  background: #7f7f7f;
}
header .dropdown-content a:hover {
  background: rgb(111, 111, 111);
  color: #ffffff;
}

/*.login .top-space header {
    padding-top: 45px;
}*/
/**************************************************
= navbar 橫式選單模組
********************/
.navbar {
  background-color: rgba(255, 255, 255, 0.7);
}
.navbar ul {
  max-width: 1500px;
}
.navbar li a {
  color: #0099d9;
}
.navbar li:hover a {
  color: #72af2d;
}
.navbar li:hover .navbar-svg {
  fill: #0099d9;
}
.navbar li:hover ul a,
.navbar ul li a:focus + .navrwd + .menuhidden {
  background-color: #0099d9;
}
.navbar li:hover ul a:hover {
  background-color: #0084bc;
}
.navbar li .menuhidden.navbar-menu a {
  background-color: #0099d9;
}
.navbar li .menuhidden.navbar-menu a:hover {
  background-color: #0084bc;
}
.navbar li ul li + li {
  border-top: 1px solid #43b9eb;
}
.navbar .show-menu {
  color: #0099d9;
  background: initial;
  position: absolute;
  top: -40px;
  right: 5px;
}
.navrwd-svg {
  fill: #0099d9;
}
.navbar > ul > li > ul li a {
  color: #ffffff;
}

@media screen and (max-width: 767px) {
  .navbar li a {
    color: #ffffff;
  }
  .navbar ul li,
  .navbar li a {
    background: #0099d9;
  }
  .navbar ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
  .navbar .show-menu .ct-hamburger svg {
    fill: #0099d9;
  }
  .navbar li:hover ul a {
    background-color: #e2f6ff;
    color: #0099d9;
  }
  .navbar li:hover ul a:hover {
    background: #ffffff;
    color: #0099d9;
  }
  .navbar li .menuhidden.navbar-menu a {
    background-color: #e2f6ff;
    color: #0099d9;
  }
  .navbar li .menuhidden.navbar-menu a:hover {
    background: #ffffff;
    color: #0099d9;
  }
  .navrwd-svg {
    background: #27ace3;
    border: none;
  }
  .navbar li ul li {
    border: 0;
  }
  .navbar li ul li + li {
    border-top: 1px solid #9fdaf3;
  }
  .navbar li:hover a {
    color: #ffffff;
  }
}
@media screen and (max-width: 767px) {
  .navbar .show-menu {
    top: -30px;
    z-index: 1;
  }
}
/**************************************************
= breadcrumb 麵包屑
********************/
.breadcrumb-item + .breadcrumb-item::before {
  border-left: 8px solid #c1c1c1;
}
.breadcrumb-item.active {
  color: #1e98d7;
}
.breadcrumb a {
  color: #545454;
}
.breadcrumb a:hover {
  color: #1e98d7;
}

/**************************************************
= footer 最下方聯絡資訊
********************/
.footerbg {
  background-image: url(../img/footerbg.png);
  color: #ffffff;
  background-color: inherit;
  position: relative;
}
.footerbg a {
  color: #2f2f2f;
}
.connect-links,
.connect .text.connect-explorer {
  color: #ffffff;
}
.connect-links:hover {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.7);
}
.copyright {
  background-color: inherit;
  color: #9e9e9e;
}

/**************************************************
= module title 模組標題
********************/
.module-title {
  color: #545454;
}

/**************************************************
= color
********************/

/* tab頁簽 ********************/
.nav-tabs {
  border-bottom-color: #545454;
}
.nav-tabs .nav-item a {
  background: #acacac;
  color: #ffffff;
  border-color: #acacac #acacac #545454;
}
.nav-pills .nav-item a {
  background: #acacac;
  color: #ffffff;
}
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  background: #0099d9;
  color: #ffffff;
  border-color: #0099d9 #0099d9 #545454;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  background: #0099d9;
  color: #ffffff;
  border-color: #0099d9 #0099d9 #545454;
}
.nav-pills .nav-link:focus,
.nav-pills .nav-link:hover {
  background: #0099d9;
  color: #ffffff;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: #0099d9;
  color: #ffffff;
}
.nav-tabs .nav-link.disabled,
.nav-pills .nav-link.disabled {
  color: #c9c9c9;
  border-bottom-color: #545454;
}
.ct-dropdown-menu {
  background-color: #fff;
  border: 1px solid #0099d9;
}
.ct-dropdown-item {
  color: #3a92e9;
}
.nav-tabs .nav-item .ct-dropdown-menu a {
  background: #ffffff;
  color: #0099d9;
}
.nav-tabs .nav-item .ct-dropdown-menu :focus,
.nav-tabs .nav-item .ct-dropdown-menu :hover {
  background-color: #ffedea;
}

/* table表格 ********************/
.ct-table th,
.ct-table td {
  border-top-color: #ccc;
}
.ct-table tbody + tbody {
  border-top-color: #ccc;
}
.table-striped tbody tr:nth-of-type(odd) {
  background-color: #f3f3f4;
}
.ct-table .thead-light th {
  color: #545454;
  background-color: #fff4f2;
  border-top: 1px solid #ffbdaf;
  border-bottom: 1px solid #ffbdaf;
}
.ct-table .thead-dark th {
  color: #ffffff;
  background-color: #0099d9;
  border-color: #0099d9;
}
.table-bordered {
  border-color: #e9ecef;
}
.table-bordered th,
.table-bordered td {
  border-color: #ccc;
}
.table-hover tbody tr:hover {
  background-color: #e6f6ff;
}

@media only screen and (max-width: 575px) {
  .table-responsive .ct-table td:before,
  .table-responsive .ct-table th:before {
    color: #0099d9;
  }
}

/* nav-Vertical 直式選單 ********************/
.nav-Vertical ul li .sub-menu-item {
  background: #f7f7f7;
  color: #545454;
  border-bottom-color: #c4c5c2;
}
.nav-Vertical ul li .sub-menu-item:hover {
  background: #e6f6ff;
  color: #545454;
}
.nav-Vertical ul li .sub-menu-item a {
  color: #545454;
}
.nav-Vertical ul li .sub-menu-item a:hover,
.nav-Vertical ul li .sub-menu-item a:focus,
.nav-Vertical ul li .sub-menu-item a:active,
.nav-Vertical ul li .sub-menu-item .active,
.nav-Vertical ul li .sub-menu-item:hover a {
  color: #545454;
}
.nav-Vertical ul li .menu-arrow svg {
  fill: #545454;
}
.nav-Vertical ul li ul li .sub-menu-item {
  background: #ffffff;
}
.nav-Vertical ul li ul li ul li .sub-menu-item {
  background: #eefefd;
}
.nav-Vertical ul li ul li .sub-menu-item:hover,
.nav-Vertical ul li ul li ul li .sub-menu-item:hover {
  background: #fafafa;
  color: #545454;
  border-left-color: #0099d9;
}
.vertical-hamburger {
  background: #0099d9;
}
.vertical-hamburger svg {
  fill: #ffffff;
}

/* sitemap 導覽頁 ********************/
.ct-sitemap {
  background: #fff4ec;
}
.sitemap-title {
  background: #ff812d;
  color: #ffffff;
}
.sitemap-block {
  background: #ffffff;
}
.sitemap-item a {
  color: #545454;
  border-left-color: #ff6600;
  background: #f5f5f5;
}
.sitemap-item a:hover,
.sitemap-item a:focus {
  background: #e8e8e8;
}
.sitemap-icon svg {
  fill: #ffffff;
}

/* 智慧校園五大項目 ********************/
.smartcampus.gd-xxs4 {
  float: left;
}
.smartcampus {
  position: relative;
  overflow: hidden;
  margin: 0px;
  height: 160px;
  background: #ffffff;
  text-align: center;
  border-right: 1px solid #a3a3a3;
  border-bottom: 1px solid #a3a3a3;
  color: #545454;
  font-weight: 600;
}
a.smartcampus {
  cursor: pointer;
}
.smartcampus .item1,
.smartcampus .item2,
.smartcampus .item3 {
  margin: 20px 10px 10px;
  position: relative;
  display: inline-block;
}
.smartcampus .item1-color,
.smartcampus .item2-color,
.smartcampus .item3-color {
  position: absolute;
  height: 20px;
  width: 100%;
  bottom: 0;
}
.smartcampus.active .item1-color,
.smartcampus.active .item2-color,
.smartcampus.active .item3-color {
  top: 0;
}
.smartcampus .item1-color {
  background: #1e98d7;
}
.smartcampus .item2-color {
  background: #edc201;
}
.smartcampus .item3-color {
  background: #6281a0;
}
.smartcampus .item-title {
  font-size: 1.5rem;
  position: relative;
  top: 0px;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.smartcampus .item1 .item-title {
  padding-left: 140px;
  padding-top: 30px;
}
.smartcampus .item2 .item-title {
  padding-left: 120px;
  padding-top: 30px;
}
.smartcampus .item3 .item-title {
  padding-left: 120px;
  padding-top: 30px;
}
.smartcampus .item-icon {
  position: absolute;
  max-width: 100%;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.smartcampus .item1 .item-icon {
  width: 126px;
  min-height: 97px;
  top: 0px;
  background-image: url(../img/hoticon1.svg);
}
.smartcampus .item2 .item-icon {
  width: 107px;
  min-height: 97px;
  top: 0px;
  background-image: url(../img/hoticon2.svg);
}
.smartcampus .item3 .item-icon {
  width: 98px;
  min-height: 97px;
  top: 0px;
  background-image: url(../img/hoticon3.svg);
}
.smartcampus:hover .item-title {
  padding-top: 20px;
}
.smartcampus:hover .item1 .item-icon,
.smartcampus:hover .item2 .item-icon,
.smartcampus:hover .item3 .item-icon {
  top: -10px;
}
.smartcampus.active .item1,
.smartcampus.active .item2,
.smartcampus.active .item3 {
  margin: 40px 10px 10px;
}
.smartcampus.active:hover .item-title {
  padding-top: 30px;
}
.smartcampus.active:hover .item1 .item-icon,
.smartcampus.active:hover .item2 .item-icon,
.smartcampus.active:hover .item3 .item-icon {
  top: 0;
}
.smartcampus.active .item1-color,
.smartcampus.active .item2-color,
.smartcampus.active .item3-color {
  height: 8px;
}
.smartcampus.active .item1-color::before {
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 15px 20px 0 20px;
  border-color: #1e98d7 transparent transparent transparent;
  position: absolute;
  top: 7px;
  margin-left: -15px;
}
.smartcampus.active .item2-color::before {
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 15px 20px 0 20px;
  border-color: #edc201 transparent transparent transparent;
  position: absolute;
  top: 7px;
  margin-left: -15px;
}
.smartcampus.active .item3-color::before {
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 15px 20px 0 20px;
  border-color: #6281a0 transparent transparent transparent;
  position: absolute;
  top: 7px;
  margin-left: -15px;
}
.smartcampus p {
  position: absolute;
  right: 20px;
  bottom: 30px;
  opacity: 0;
  text-align: center;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: translate3d(0, -100px, 0);
  transform: translate3d(0, -100px, 0);
  letter-spacing: 0.05rem;
  font-size: 1rem;
  line-height: 1.6em;
  border: 1px solid #cccccc;
  width: 100px;
}
.smartcampus:hover p {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.smartcampus.active:hover p {
  display: none;
}

@media only screen and (max-width: 1430px) {
  .smartcampus .item-title {
    font-size: 1.2rem;
  }
  .smartcampus .item1 .item-title {
    padding-left: 120px;
  }
  .smartcampus .item2 .item-title,
  .smartcampus .item3 .item-title {
    padding-left: 100px;
  }
  .smartcampus .item1 .item-icon {
    width: 106px;
    top: 0px;
    min-height: 82px;
  }
  .smartcampus .item2 .item-icon {
    width: 90px;
    min-height: 82px;
  }
  .smartcampus .item3 .item-icon {
    width: 90px;
    min-height: 89px;
  }
}

@media only screen and (max-width: 1200px) {
  .smartcampus {
    height: 216px;
  }
  .smartcampus .item-icon {
    position: relative;
  }
  .smartcampus .item1 .item-title,
  .smartcampus .item2 .item-title,
  .smartcampus .item3 .item-title {
    padding-left: 0;
    padding-top: 10px;
  }
  .smartcampus .item1,
  .smartcampus .item2,
  .smartcampus .item3 {
    margin: 40px 10px 10px;
  }
  .smartcampus:hover .item-title {
    top: -20px;
  }
  .smartcampus p {
    width: 100px;
    position: relative;
    right: 5px;
    bottom: 15px;
    margin: 0 auto;
  }
}

/*個頁面內容背景*/
.bg-org {
  background: #e6f6ff;
}
.bg-gry {
  background: #f2f2f2;
}

/*首頁 ********************/
.home a {
  color: #333;
}
.home .block01 {
  padding: 30px 0;
}
.home .theme-01:hover,
.home .theme-02:hover,
.home .theme-03:hover,
.home .theme-04:hover,
.home .theme-05:hover {
  cursor: pointer;
}
.home .theme-01 {
  margin-top: 150px;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.home .theme-01:hover {
  margin-top: 160px;
}
.home .theme-02 {
  margin-top: 90px;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.home .theme-02:hover {
  margin-top: 100px;
}
.home .theme-03 {
  margin-top: 30px;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.home .theme-03:hover {
  margin-top: 40px;
}
.home .theme-05 {
  margin-top: 30px;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.home .theme-05:hover {
  margin-top: 40px;
}
.home .title {
  color: #0070b0;
  font-size: 2.2rem;
  margin-bottom: 20px;
  letter-spacing: 0.05rem;
  position: relative;
}
.home .title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0%;
  height: 2px;
  background: #0070b0;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.home .theme-01:hover .title::after,
.home .theme-02:hover .title::after,
.home .theme-03:hover .title::after,
.home .theme-04:hover .title::after,
.home .theme-05:hover .title::after {
  width: 100%;
  opacity: 1;
}
.theme-01-img,
.theme-02-img,
.theme-03-img,
.theme-05-img {
  text-align: center;
}
.theme-01-img img {
  width: 500px;
  max-width: 100%;
  margin-top: 0px;
}
.theme-02-img img {
  width: 680px;
  max-width: 100%;
  margin-top: 0px;
}
.theme-03-img img {
  width: 832px;
  max-width: 100%;
  margin: 50px 0;
}
.theme-04-img img {
  width: 830px;
  max-width: 100%;
}
.theme-05-img img {
  width: 563px;
  max-width: 100%;
}
.home .content {
  font-size: 1.1rem;
  line-height: 2.2rem;
  letter-spacing: 0.05rem;
}
.home .theme-03 .content {
  list-style: none;
}
.home .theme-03 .content span {
  color: #0099d9;
  margin-right: 10px;
}
.s-title + .s-title {
  margin-top: 20px;
}
@media only screen and (max-width: 1480px) {
  .home .theme-02 {
    margin-top: 50px;
  }
  .home .theme-02:hover {
    margin-top: 55px;
  }
  .home .theme-03 {
    margin-top: 0;
  }
  .home .theme-03:hover {
    margin-top: 5px;
  }
  .home .theme-05 {
    margin-top: 20px;
  }
  .home .theme-05:hover {
    margin-top: 25px;
  }
  .home .theme-05-img {
    margin-top: 50px;
  }
}
@media only screen and (max-width: 991px) {
  .home .theme-01 {
    margin-top: 30px;
  }
  .home .theme-01:hover {
    margin-top: 30px;
  }
  .home .theme-02 {
    margin-top: 0px;
  }
  .home .theme-02:hover {
    margin-top: 0px;
  }
  .home .theme-03 {
    margin-top: 50px;
  }
  .home .theme-03:hover {
    margin-top: 50px;
  }
  .home .theme-05 {
    margin-top: 0px;
  }
  .home .theme-05:hover {
    margin-top: 0px;
  }
}
@media only screen and (max-width: 520px) {
  .home .title {
    font-size: 1.6rem;
    font-weight: 600;
  }
}

/*特色產品 ********************/
.product .block01 {
  position: relative;
  width: 100%;
}
.product .theme-01 {
  margin-top: 50px;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.product .topword {
  max-width: 1200px;
  margin: 0 auto;
  line-height: 2rem;
}
.product .toptitle {
  letter-spacing: 0.05rem;
  text-align: center;
  margin-top: 50px;
  color: #0099d9;
  font-size: 1.6rem;
}
.product .title {
  color: #0070b0;
  font-size: 2.2rem;
  margin-bottom: 20px;
  letter-spacing: 0.05rem;
  position: relative;
}
.product .content {
  font-size: 1.1rem;
  line-height: 2.2rem;
  letter-spacing: 0.05rem;
}
.product-01-img,
.product-02-img,
.product-05-img,
.product-06-img,
.product3-01-img,
.product4-02-img,
.product6-01-img,
.product6-02-img,
.product7-01-img {
  text-align: center;
}
.product-01-img img {
  width: 400px;
  max-width: 100%;
  margin-top: 0px;
}
.product-02-img img,
.product-05-img img {
  width: 955px;
  max-width: 100%;
  margin-top: 0px;
}
.product-03-img img,
.product-04-img img,
.product2-03-img img,
.product2-04-img img {
  width: 600px;
  max-width: 100%;
  margin-top: 0px;
}
.product-06-img img {
  width: 738px;
  max-width: 100%;
  margin-top: 0px;
}
.product3-01-img img {
  width: 756px;
  max-width: 100%;
  margin-top: 0px;
}
.product4-02-img img {
  width: 1000px;
  max-width: 100%;
  margin-top: 0px;
}
.product7-01-img img {
  width: 600px;
  max-width: 100%;
  margin-top: 0px;
}
.product6-01-img img {
  width: 750px;
  max-width: 100%;
  margin-top: 30px;
}
.product6-02-img img {
  width: 750px;
  max-width: 100%;
  margin-top: 30px;
}
.product6-05-img img {
  max-width: 100%;
  margin-top: 30px;
}
.product .theme-02 .title,
.product .theme-05 .title {
  text-align: center;
  padding-top: 70px;
}
.product .theme-06 .title {
  text-align: center;
  padding-top: 70px;
}
.prodoct-left {
  position: relative;
  background: #1e98d7;
  color: #ffffff;
  list-style: none;
}
.prodoct-right {
  position: relative;
  background: #1e98d7;
  color: #ffffff;
  list-style: none;
}
.product .prodoct-left .title,
.product .prodoct-right .title {
  color: #ffffff;
  font-size: 1.8rem;
}
.product-btn {
  padding: 10px 65px 10px 45px;
  background: #545454;
  display: table;
  margin: 20px auto 0;
  color: #ffffff;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  letter-spacing: 0.1rem;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.product-btn:hover {
  background: #3d3d3d;
}
.product-btn-icon {
  width: 20px;
  position: absolute;
  right: 38px;
  top: 12px;
}
.product .theme-03 {
  margin: 0 auto;
  max-width: 580px;
  padding: 60px 25px;
  height: 340px;
}
.product-03-img {
  text-align: center;
  height: 340px;
  overflow: hidden;
  padding-top: 20px;
  background-image: url(../img/product-bg.jpg);
}
.product .prodoct-left::after {
  border: 22px solid transparent;
  border-left-color: #1e98d7;
  content: '';
  height: 0;
  left: 100%;
  margin-top: -22px;
  position: absolute;
  top: 50%;
  width: 0;
  z-index: 1;
}
.product .theme-03 .content .item,
.product.grwth .theme-04 .content .item {
  position: relative;
  padding-left: 25px;
}
.product .theme-03 .content .item::before,
.product.grwth .theme-04 .content .item::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0;
  top: 8px;
  background-image: url(../img/arrow-icon.svg);
}
.product .theme-04 {
  text-align: center;
}
.product .theme-04 .title {
  padding-top: 50px;
  font-size: 1.8rem;
}
.product .theme-04 .product-04-img,
.product .theme-04 .product2-03-img,
.theme-04 .product2-04-img {
  max-height: 340px;
  overflow: hidden;
}
.product .theme-06 .content {
  text-align: center;
}
.product-06-img img {
  width: 550px;
}
.product .theme-btn {
  max-width: 955px;
  height: auto;
  text-align: right;
  position: relative;
}
.product .theme-btn .btn {
  background: #ffffff;
  border: 1px solid #0099d9;
  border-radius: 2px;
  padding: 5px;
  min-width: 80px;
  color: #0099d9;
  position: absolute;
}
a.product2-hardware {
  cursor: default;
  width: fit-content;
}
.hardware-content {
  max-width: 600px;
  margin: 0 auto;
  letter-spacing: 0.1rem;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-bottom: 10px;
  gap: 20px;
}
.hardware-content div {
  padding: 10px 5px;
  width: 100%;
}
.hardware-content .number {
  width: 40px;
  display: flex;
  justify-content: center;
  background: #ccecfd;
  padding: 10px;
  color: #1e98d7;
  /* margin-right: 10px; */
  /* position: absolute; */
  /* top: 0px; */
}
.product202.content {
  max-width: 1000px;
  margin: 0 auto;
}
.product .feature,
.product .identity .feature8 {
  max-width: 1000px;
  margin: 0 auto;
  letter-spacing: 0.1rem;
  position: relative;
  background: #cae6fe;
  border-radius: 5px;
}
.product .identity .feature8 {
  min-height: 110px;
}
.product .feature .feature-content {
  padding: 15px 30px;
  margin-bottom: 15px;
  font-size: 1.1rem;
  line-height: 2.2rem;
  letter-spacing: 0.05rem;
}
.product .identity .feature-content {
  padding: 10px 30px 10px 0;
  margin-bottom: 15px;
  font-size: 1.1rem;
  line-height: 2rem;
  letter-spacing: 0.05rem;
}
.product .feature .number {
  background: #1c98d8;
  padding: 10px 18px;
  color: #ffffff;
  margin-right: 10px;
  position: absolute;
  top: 0px;
  font-size: 1.5rem;
  border-top-left-radius: 4px;
}
.product .repair-content,
.product .ppt-content,
.product .identity-content {
  max-width: 1000px;
  margin: 0 auto;
  line-height: 2rem;
}
.product .ppt .feature-title {
  color: #0099d9;
  font-size: 1.4rem;
  font-weight: 600;
  padding: 14px 30px 6px;
}
.product .identity .feature-title {
  color: #1e98d7;
  font-size: 1.4rem;
  font-weight: 600;
  padding: 10px 30px 0px 0;
}
.product .identity .feature8 .feature-bg {
  color: #ffffff;
  position: absolute;
  border-style: solid;
  border-width: 85px 85px 0 0;
  border-color: #1e98d7 transparent transparent transparent;
}
.product .identity .feature8 .number {
  color: #ffffff;
  position: absolute;
  font-size: 1.8rem;
  left: 15px;
  top: 10px;
  font-style: italic;
}
.product .identity .feature-title,
.product .identity .feature-content {
  margin-left: 120px;
}
.product.flip .product6-03-img,
.product.flip .product6-04-img {
  max-height: 425px;
  overflow: hidden;
  padding: 5px 10px;
}
.product.flip .product6-03-img img,
.product.flip .product6-04-img img {
  width: 700px;
  max-width: 100%;
  margin-top: 0px;
}
.product .title-s {
  font-size: 1.2rem;
  padding-top: 7px;
}
.product.grwth .title2 {
  color: #0099d9;
  font-size: 1.6rem;
  margin-top: 20px;
  margin-bottom: 20px;
  letter-spacing: 0.05rem;
  position: relative;
}
.product.grwth .product-01-img img {
  width: 200px;
  max-width: 100%;
  margin-top: 50px;
}
.product.grwth .theme-03 {
  height: 380px;
  padding: 60px 10px;
}
.product.grwth .product-03-img {
  text-align: center;
  height: 380px;
  overflow: hidden;
  background-image: url(../img/product-bg.jpg);
  padding: 50px 10px 0;
}
.product.grwth .product-04-img {
  max-height: 368px;
  padding: 20px 10px 0;
}
.product.grwth .product-03-img img,
.product.grwth .product-04-img img,
.product.grwth .product-05-img img {
  width: 650px;
}
.product.grwth .theme-05 {
  margin: 0 auto;
  max-width: 580px;
  padding: 60px 10px;
  height: 500px;
}
.product.grwth .theme-05 .title,
.product.grwth .theme-06 .title {
  text-align: left;
  padding-top: 0px;
}
.product.grwth ol {
  list-style: upper-latin;
}
.product.grwth .prodoct-left2 {
  background-color: #777777;
  color: #ffffff;
}
.product.grwth .prodoct-left2::after {
  border: 22px solid transparent;
  border-left-color: #777777;
  content: '';
  height: 0;
  left: 100%;
  margin-top: -22px;
  position: absolute;
  top: 50%;
  width: 0;
  z-index: 1;
}
.product.grwth .prodoct-left2 .title {
  color: #ffffff;
}
.product.grwth .product-05-img {
  text-align: center;
  height: 500px;
  overflow: hidden;
  padding-top: 50px;
  background-image: url(../img/product-bg.jpg);
  padding: 50px 10px 0;
}
.product.grwth .theme-06 {
  margin: 0 auto;
  max-width: 580px;
  padding: 60px 5px;
  height: 500px;
}
.product.grwth .theme-06 .content {
  text-align: left;
}
.product.grwth .bg-line {
  background-image: url(../img/product-bg.jpg);
}
.product.grwth .theme-03 .title,
.product.grwth .theme-04 .title,
.product.grwth .theme-05 .title,
.product.grwth .theme-06 .title,
.product.grwth .theme-07 .title {
  font-size: 1.6rem;
}
.product.grwth .theme-03 .content,
.product.grwth .theme-05 .content,
.product.grwth .theme-06 .content,
.product.grwth .theme-07 .content {
  font-size: 1rem;
  line-height: 2rem;
}
.product.grwth .product-06-img {
  text-align: center;
  height: 500px;
  overflow: hidden;
  padding-top: 50px;
}
.product.grwth .product-06-img img {
  width: 650px;
  max-width: 100%;
  padding: 0;
}
.product.grwth .theme-07 {
  margin: 0 auto;
  max-width: 580px;
  height: 600px;
  padding: 60px 5px;
}
.product.grwth .product-07-img {
  text-align: center;
  height: 600px;
  overflow: hidden;
  padding-top: 50px;
  padding: 20px 10px 0;
}
.product.grwth .product-07-img img {
  width: 650px;
  max-width: 100%;
  padding-top: 50px;
}
.product.broadcast .product-03-img {
  text-align: center;
  overflow: hidden;
  height: auto;
  padding-top: 0px;
  background-image: url(../img/product-bg.jpg);
}
/*module介紹*/
.product-module {
  min-height: 150px;
  padding: 0 15px;
}
ul.product-module {
  padding-left: 0;
  margin-bottom: 15px;
}
.expand img {
  width: 27px;
  height: 27px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.expand img:hover {
  padding-top: 3px;
}
.product-module ul {
  margin-left: 0px;
}
.product-module li {
  list-style-type: none;
  margin: 5px;
  position: relative;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.product-module > li:hover {
  background: #eaf8ff;
}
.product-module > li {
  padding-top: 5px;
}
.product-module li label {
  padding: 5px;
  cursor: pointer;
  text-align: center;
  display: table;
  margin: 0 auto;
}
.product-module li ul li label {
  padding: 15px 25px;
  line-height: 1.8rem;
  text-align: left;
  color: #545454;
  min-height: 180px;
}
.product-module li a div {
  margin-top: 2px;
  text-align: left;
}
.product-module input {
  display: none;
}
.product-module input ~ ul {
  display: block;
  padding-left: 0;
}
/*.product-module input:checked:not(:disabled) ~ ul {display: block; }*/
.product-module .title {
  color: #0070b0;
  font-size: 1.2rem;
  margin-bottom: 0px;
  margin-top: 5px;
  letter-spacing: 0.05rem;
  font-weight: 600;
}
.product .module-row {
  border-bottom: 1px solid #ccc;
}
.product .module-row + .module-row {
  margin-top: 10px;
}
.product-module .module-icon {
  width: 80px;
  height: auto;
  margin: 0 auto;
}
.product-module .module-icon img {
  max-width: 100%;
}
@media only screen and (max-width: 991px) {
  .product .prodoct-left::after {
    display: none;
  }
  .product .theme-03 {
    padding: 30px 25px;
    height: auto;
    min-height: 260px;
  }
  .product-03-img {
    height: auto;
  }
  .product .prodoct-left::after,
  .product .prodoct-left2::after {
    display: none;
  }
}
@media only screen and (max-width: 520px) {
  .product.grwth .theme-03,
  .product.grwth .theme-05,
  .product.grwth .theme-06,
  .product.grwth .theme-07 {
    height: auto;
    padding: 20px;
  }
  .product.grwth .product-03-img,
  .product.grwth .product-05-img,
  .product.grwth .product-07-img {
    height: auto;
    padding: 20px;
  }
  .product.grwth .product-04-img {
    padding: 20px;
  }
  .product.grwth .product-07-img img {
    padding-top: 0;
  }
  .product .title,
  .product.grwth .theme-03 .title,
  .product.grwth .theme-04 .title,
  .product.grwth .theme-05 .title,
  .product.grwth .theme-06 .title,
  .product.grwth .theme-07 .title,
  .product .theme-04 .title,
  .product .prodoct-left .title,
  .product .prodoct-right .title {
    font-size: 1.5rem;
  }
  .product .title-s {
    font-size: 1rem;
  }
  .product.grwth .title2 {
    font-size: 1.2rem;
  }
  .product .content,
  .product.grwth .theme-03 .content,
  .product.grwth .theme-05 .content,
  .product.grwth .theme-06 .content,
  .product.grwth .theme-07 .content,
  .product .feature .feature-content,
  .product .identity .feature-content {
    font-size: 1rem;
    line-height: 1.6rem;
  }
  .product .theme-02 .title,
  .product .theme-05 .title {
    padding-top: 40px;
  }
  .product.grwth ol li {
    padding-bottom: 12px;
  }
  .product .theme-03 .content .item::before,
  .product.grwth .theme-04 .content .item::before {
    top: 2px;
  }
  .product .ppt .feature-title,
  .product .identity .feature-title {
    font-size: 1.2rem;
  }
}
/*解決方案*/
.solution .title {
  color: #0070b0;
  font-size: 2.2rem;
  margin-bottom: 20px;
  letter-spacing: 0.05rem;
  position: relative;
  padding-top: 50px;
}
.solution .content {
  max-width: 1000px;
  margin: 0 auto;
  line-height: 2rem;
}
.solution .theme-04 {
  margin-top: 60px;
}
.solution.solution2 .theme-02 {
  margin-top: 40px;
}
.solution .theme-04 .content span,
.solution.solution2 .theme-02 .content span {
  color: #1e98d7;
  margin-right: 10px;
  font-weight: 600;
  font-size: 1.2rem;
}
.solution .theme-04 .content li,
.solution.solution2 .theme-02 .content li {
  list-style: none;
  position: relative;
  padding-left: 25px;
  font-size: 1.2rem;
  padding-bottom: 15px;
}
.solution .theme-04 .content li::before,
.solution.solution2 .theme-02 .content li::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0;
  top: 6px;
  background-image: url(../img/arrow-icon-org.svg);
}
.solution .solution-01-img,
.solution .solution-02-img {
  text-align: center;
  margin-top: 30px;
}
.solution .solution-01-img img {
  width: 660px;
  max-width: 100%;
}
.solution .solution-02-img img {
  width: 520px;
  max-width: 100%;
}
.solution-box {
  text-align: center;
}
.solution-box .box {
  padding: 35px 20px 20px;
  display: inline-block;
  min-width: 200px;
  height: 100px;
  border-radius: 2px;
  text-align: center;
  letter-spacing: 0.2rem;
  font-size: 1.4rem;
  margin: 20px;
  vertical-align: middle;
  font-weight: 600;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  cursor: pointer;
}
.solution-box .box,
.solution-box .box a {
  color: #ffffff;
}
.solution-box .box.color01 {
  background: #1e98d7;
}
.solution-box .box.color02 {
  background: #49b776;
}
.solution-box .box.color03 {
  background: #d87cd0;
}
.solution-box .box.color04 {
  background: #ff981d;
}
.solution-box .box.color05 {
  background: #777777;
}
.solution-box .box.color06 {
  background: #65bc6e;
}
.solution-box .box.color07 {
  background: #579bd0;
}
.solution-box .box.color08 {
  background: #ef82af;
}
.solution-box .box.color09 {
  background: #7ea1c5;
}
.solution-box .box:hover.color01 {
  background: #0068a5;
}
.solution-box .box:hover.color02 {
  background: #34a663;
}
.solution-box .box:hover.color03 {
  background: #c359ba;
}
.solution-box .box:hover.color04 {
  background: #f78100;
}
.solution-box .box:hover.color05 {
  background: #565353;
}
.solution-box .box:hover.color06 {
  background: #48ae52;
}
.solution-box .box:hover.color07 {
  background: #3f89c2;
}
.solution-box .box:hover.color08 {
  background: #dd6697;
}
.solution-box .box:hover.color09 {
  background: #5988b9;
}
.solution-box .box-plus {
  display: inline-block;
  background: url(../img/solution-plus.svg);
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
.solution .s-title {
  border-radius: 4px;
  padding: 10px 15px;
  color: #0070b5;
  font-size: 1.4rem;
  font-weight: 600;
  background: #cae6fe;
  text-align: center;
}
.solution-box .box.box-s {
  padding: 25px 10px 20px;
  min-width: 150px;
  height: 80px;
  letter-spacing: 0.1rem;
}
.solution .theme-05 .theme-0501 img {
  max-width: 100%;
  width: 955px;
}
.slash {
  position: absolute;
  width: 100%;
  background: url(../img/sllash.png);
  height: 34px;
  bottom: 0;
}
.solution .block01 {
  position: relative;
}
.solution .block01 .theme-03 {
  margin-bottom: 100px;
}
.solution.solution4 .theme-02 .content {
  font-size: 1.2rem;
}
.solution.solution2 .theme-03-img img {
  width: 600px;
  max-width: 100%;
  margin: 20px 0;
}
.solution.solution3 .theme-03-img img {
  width: 769px;
  max-width: 100%;
  margin: 20px 0;
}
.solution.solution4 .theme-02-img img {
  width: 967px;
  max-width: 100%;
  margin: 0px 0 20px;
}
.solution.solution4 .theme-04-img img {
  width: 830px;
  max-width: 100%;
  margin: 20px 0;
}
.solution.solution5 .theme-02-img img {
  width: 563px;
  max-width: 100%;
  margin: 20px 0;
}

.solution .s-title a {
  color: #0070b5;
}
.solution .s-title a:hover {
  color: #0084bc;
}

@media only screen and (max-width: 1199px) {
  .solution .theme-04 {
    margin-top: 20px;
  }
  .solution .theme-02 .content {
    max-width: 600px;
    line-height: 2rem;
    margin: 0 auto;
    padding: 10px;
  }
}
@media only screen and (max-width: 520px) {
  .solution .title {
    font-size: 1.5rem;
    padding-top: 20px;
  }
  .solution .content {
    font-size: 1rem;
    line-height: 1.6rem;
    padding-left: 20px;
    padding-right: 20px;
  }
  .solution .block01 .theme-03 {
    margin-bottom: 50px;
  }
  .solution .s-title {
    font-size: 1.2rem;
    text-align: left;
  }
  .solution.solution2 .theme-02 .content li {
    font-size: 1rem;
  }
  .solution-box .box,
  .solution-box .box.box-s {
    padding: 15px 20px;
    display: block;
    min-width: inherit;
    height: 50px;
    font-size: 1.2rem;
    margin: 10px;
  }
  .solution-box .box-plus {
    width: 15px;
    height: 15px;
  }
}

/*關於網韻 ********************/
.about img {
  max-width: 100%;
  height: auto;
}
.about .aboutimg {
  text-align: center;
  margin-top: 20px;
}
.about-list .title {
  font-size: 1.3rem;
  color: #ff6600;
  font-weight: 600;
  position: relative;
  padding-left: 25px;
}
.about-list .title::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  background-image: url(../img/arrowicon3.svg);
  background-repeat: no-repeat;
  left: 0;
  top: 5px;
}
.about-list li {
  list-style: none;
  margin-top: 10px;
  margin-bottom: 30px;
  font-size: 1.1rem;
  padding-left: 25px;
}
.about .block01.bg-org {
  background: #e6f6ff;
}
.about .about-content {
  padding: 40px 30px;
  line-height: 2rem;
}
.about .title {
  color: #0070b0;
  font-size: 1.2rem;
  font-weight: 600;
  margin-top: 20px;
}
.shape_1 {
  position: absolute;
  padding: 13px 18px;
  background-color: #ff6600;
  top: 25px;
  left: 50px;
}
.shape_2 {
  position: absolute;
  padding: 26px 36px;
  background: rgba(0, 0, 0, 0.2);
  top: 40px;
  left: 53px;
}
.shape_3 {
  position: absolute;
  padding: 13px 18px;
  background-color: #ff6600;
  top: 262px;
  right: 218px;
}
.shape_4 {
  position: absolute;
  padding: 26px 36px;
  background: rgba(0, 0, 0, 0.2);
  top: 210px;
  right: 240px;
}
.shape_5 {
  position: absolute;
  padding: 11px 16px;
  background-color: #ff6600;
  top: 310px;
  right: 320px;
}
.shape_6 {
  position: absolute;
  padding: 26px 36px;
  background: rgba(0, 0, 0, 0.2);
  top: 360px;
  right: 380px;
}
.animated1 {
  -webkit-animation-duration: 1.4s;
  animation-duration: 1.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}
@media only screen and (max-width: 520px) {
  .about-list li {
    font-size: 1rem;
    line-height: 1.6rem;
  }
}
/* bounceInDown1 */
@-webkit-keyframes bounceInDown1 {
  0% {
    -webkit-transform: translateY(-5px) skewX(-20deg);
    transform: translateY(-5px) skewX(-20deg);
  }
  60% {
    -webkit-transform: translateY(0px) skewX(-20deg);
    transform: translateY(0px) skewX(-20deg);
  }
  100% {
    -webkit-transform: translateY(-5px) skewX(-20deg);
    transform: translateY(-5px) skewX(-20deg);
  }
}

@keyframes bounceInDown1 {
  0% {
    -webkit-transform: translateY(-5px) skewX(-20deg);
    -ms-transform: translateY(-5px) skewX(-20deg);
    transform: translateY(-5px) skewX(-20deg);
  }
  60% {
    -webkit-transform: translateY(0px) skewX(-20deg);
    -ms-transform: translateY(0px) skewX(-20deg);
    transform: translateY(0px) skewX(-20deg);
  }
  100% {
    -webkit-transform: translateY(-5px) skewX(-20deg);
    -ms-transform: translateY(-5px) skewX(-20deg);
    transform: translateY(-5px) skewX(-20deg);
  }
}

.bounceInDown1 {
  -webkit-animation-name: bounceInDown1;
  animation-name: bounceInDown1;
}
/* 成功案例 ********************/
.cases .gd-xxs6 {
  float: left;
}
.casenav .gd-xxs3,
.casenav.gd-xxs6 {
  float: left;
}
.casenav {
  overflow: hidden;
  margin: 0 0 20px;
  background: #ffffff;
  text-align: center;
  border-right: 1px solid #a3a3a3;
  border-bottom: 2px solid #a3a3a3;
  color: #545454;
  font-weight: 600;
  padding: 15px 8px;
}
.casenav:hover .item-title,
.casenav.active .item-title {
  color: #1e98d7;
}
.casenav.active,
.casenav:hover {
  border-bottom: 2px solid #1e98d7;
}
.casenavbar:last-child .casenav {
  border-right: 0px;
}
.cases .block01 {
  position: relative;
  width: 100%;
}
.cases .topword {
  max-width: 1200px;
  margin: 0 auto;
  line-height: 2rem;
}
.cases .case-title {
  max-width: 280px;
  margin: 0 auto;
  font-size: 1rem;
  text-align: center;
  margin-top: 10px;
  line-height: 1.5rem;
  font-weight: 600;
  color: #545454;
  min-height: 40px;
}
.l-project {
  position: relative;
}
.l-project .project-img {
  position: absolute;
}
.l-project .project-text {
  padding-left: 190px;
  line-height: 1.8rem;
}
.l-project .project-title {
  font-weight: 600;
  padding-bottom: 7px;
  font-size: 1.1rem;
  color: #1ba099;
}
.l-project.left {
  padding-right: 30px;
}
.l-project.right {
  padding-left: 30px;
}
.samplecase img {
  max-width: 260px;
  border: 1px solid #cfcfcf;
}
.htmldisplay div.caseimg img {
  max-width: 260px;
}
@media only screen and (max-width: 1500px) {
  .htmldisplay div.caseimg img {
    max-width: 230px;
  }
}
@media only screen and (max-width: 991px) {
  .l-project.left,
  .l-project.right {
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media only screen and (max-width: 519px) {
  .casenav {
    margin: 0;
    padding: 8px;
  }
  .casenavbar:nth-child(2) .casenav {
    border-right: 0px;
  }
  .l-project {
    border-bottom: 1px solid #cccccc;
    padding-bottom: 10px;
  }
  .l-project .project-img {
    position: relative;
    text-align: center;
  }
  .l-project .project-text {
    margin-top: 20px;
    padding-left: 0;
  }
  .casenavbar .casenav.gd-xxs6 {
    float: left;
  }
  .htmldisplay div.caseimg {
    padding: 5px;
  }
  .htmldisplay div.caseimg img {
    max-width: 100%;
  }
  .cases .case-title {
    padding: 0 5px;
  }
}

/*合作夥伴*/
.partner {
  max-width: 1600px;
  margin: 100px auto;
  min-height: 120px;
}
.partner-icon {
  margin: 5px 20px;
  text-align: center;
}
.partner-icon img {
  opacity: 1;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  max-width: 100%;
}
.partner-icon:hover img {
  opacity: 0.7;
}
@media only screen and (max-width: 991px) {
  .partner {
    margin: 50px auto;
  }
  .partner-icon {
    margin: 20px 20px;
  }
}
@media only screen and (max-width: 767px) {
  .partner {
    margin: 20px auto;
  }
  .partner-icon {
    margin: 40px;
  }
}

/*線上報修button-ga009********************/
.repair-basicset .btn-primary {
  color: #ffffff;
  background-color: #0099d9;
  border-color: #0099d9;
  fill: #ffffff;
}
.repair-basicset .btn-primary:hover,
.repair-basicset .btn-primary:focus,
.repair-basicset .btn-primary:active,
.repair-basicset .btn-primary.active,
.repair-basicset .open .ct-dropdown-toggle.btn-primary,
.repair-basicset .btn-primary:active:focus,
.repair-basicset .btn-primary:active:hover,
.repair-basicset .btn-primary.active:hover,
.repair-basicset .btn-primary.active:focus {
  background: #f73d18;
}
.repair-basicset .btn-primary.active.focus,
.repair-basicset .btn-primary.active:focus,
.repair-basicset .btn-primary.active:hover,
.repair-basicset .btn-primary:active.focus,
.repair-basicset .btn-primary:active:focus,
.repair-basicset .btn-primary:active:hover,
.repair-basicset .open > .ct-dropdown-toggle.btn-primary.focus,
.repair-basicset .open > .ct-dropdown-toggle.btn-primary:focus,
.repair-basicset .open > .ct-dropdown-toggle.btn-primary:hover {
  background: #f73d18;
}

/* CGA001 圖文公告換色 ********************/
.ct-focusslider .focus-content .textblock.notice-color {
  background: #e4eef1;
  color: #545454;
  border-bottom: 4px solid #0099d9;
}
/*CGA001 圖文公告箭頭顏色*/
.ct-focusslider .focus-controls .focus-arrow {
  fill: #545454;
}
.ct-focusslider .focus-controls .focus-arrow:hover {
  fill: #0099d9;
}
.ct-focusslider .focus-controls .focus-arrow.focus-end {
  fill: rgba(175, 175, 175, 1);
}

/*應用場景icon*/
.application-icon {
  display: inline-block;
}

@media (min-width: 770px) {
  .application-icon {
    width: 16.66666667%;
    float: left;
  }
}

@media (max-width: 770px) {
  .application-icon {
    margin: 40px;
  }
}

@media (max-width: 376px) {
  .application-icon {
    margin: 10px;
  }
}