.top-prod {
  margin-top: -13%;
  margin-bottom: 10%;
  font-family: "Noto Sans TC", "microsoft jhenghei", sans-serif; }
  .top-prod .img1 {
    max-width: 600px; }
  .top-prod h2 {
    font-size: 1.2rem;
    font-weight: 300; }
  .top-prod p {
    font-size: .9rem;
    font-weight: 300; }
  @media screen and (max-width: 992px) {
    .top-prod {
      margin-top: -5%; }
      .top-prod .txt {
        max-width: 75%;
        margin-top: 5%; } }
  @media screen and (max-width: 767px) {
    .top-prod {
      margin-bottom: 15%; }
      .top-prod .img1 {
        max-width: 100%; } }

.cen {
  font-family: "Century Gothic", "Lato", sans-serif; }

.hr16-outer h2 {
  font-family: "Noto Sans TC", "microsoft jhenghei", sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  color: #22AB39; }

.hr16-outer .cirlce {
  margin-bottom: 5%;
  max-width: 79%; }

@media screen and (max-width: 767px) {
  .hr16-outer h2 {
    font-size: 1.1rem; }
  .hr16-outer p {
    font-size: 15px; } }

.lens-title {
  margin: 10% auto 5%;
  text-align: center;
  width: 100%;
  font-family: "Noto Sans TC", "microsoft jhenghei", sans-serif;
  font-weight: 300; }
  .lens-title > h2 {
    margin: 0;
    padding: 10px 15px;
    display: block;
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 15px; }
  .lens-title > h3 {
    color: #2D86B2;
    font-size: 1.1rem;
    margin: 35px auto 20px;
    font-weight: 300;
    line-height: 2rem; }
  .lens-title p {
    font-size: .9rem; }

.lens-title-1 {
  margin-top: 0; }
  .lens-title-1 > h2 {
    background: #FFF100;
    color: #2D86B2; }

.lens-title-2 > h2 {
  background: #FF6600;
  color: #fff; }

.lens-outer {
  width: 80%;
  margin: 5% auto 5%; }

.lens {
  position: absolute;
  left: 0; }

.lens_wrap > p {
  margin-bottom: 10px; }

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 10px 0 10px;
  border-color: #3688BC transparent transparent transparent;
  display: inline-block;
  vertical-align: middle; }

.txt_distance {
  color: #5195CA;
  text-align: right;
  margin-top: 18px; }

.eyes_distance {
  width: 60%;
  margin-bottom: 20px;
  display: block;
  float: right;
  clear: both; }

.eyes_txt {
  text-align: left;
  font-size: .9rem;
  line-height: 1.9; }
  .eyes_txt > img {
    margin: 0 auto 30px; }

.lens-container {
  max-width: 1140px; }

@media screen and (max-width: 1700px) {
  .txt_distance {
    margin-top: 37px; }
  .eyes_distance {
    width: 55%; } }

@media screen and (max-width: 1200px) {
  .txt_distance {
    margin-top: 65px; } }

@media screen and (max-width: 1000px) {
  .txt_distance {
    margin-top: 5%; }
  .eyes_distance {
    width: 54%; } }

@media screen and (max-width: 768px) {
  .txt_distance {
    margin-top: 0; } }

@media screen and (max-width: 767px) {
  .txt_distance {
    font-size: 15px; }
    .txt_distance .fa {
      top: -3px;
      position: relative; }
  .triangle {
    border-width: 10px 5px 0 5px; }
  .lens-outer {
    width: 100%;
    margin-top: 15%; }
  .lens_wrap {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 0; }
  .eyes_txt {
    width: 100%;
    font-size: 15px;
    text-align: center; }
    .eyes_txt p {
      text-align: left; } }

@media screen and (max-width: 500px) {
  .txt_distance {
    margin-top: 3%; } }

@media screen and (max-width: 400px) {
  .txt_distance {
    margin-top: 2%; }
  .eyes_distance {
    width: 52%; } }

.distance {
  font-family: "Noto Sans TC", "microsoft jhenghei", sans-serif;
  font-weight: bold;
  margin: 5% 0 10%; }
  .distance .block_title {
    color: #4491C5;
    border: 0;
    line-height: 1.5;
    font-size: 1.1rem; }
  .distance .block_title > br {
    display: none; }
  .distance .block_title > small {
    font-size: 1rem;
    display: block;
    color: #4491C5;
    font-weight: 300; }

@media screen and (max-width: 1200px) {
  .lens {
    width: 65%;
    margin-top: 5%; } }

@media screen and (max-width: 1024px) {
  .lens_wrap {
    padding-bottom: 30%; }
  .lens {
    width: 65%;
    margin-top: 0; }
  .distance_icon {
    width: 90%;
    margin: 0 auto; } }

@media screen and (max-width: 768px) {
  .lens {
    margin-top: -8%; }
  .eyes_distance {
    margin-right: 0; } }

@media screen and (max-width: 767px) {
  .distance .block_title {
    font-size: 20px; }
    .distance .block_title > small {
      font-size: 16.7px; }
  .txt_distance {
    margin-bottom: 0; }
  .eyes_distance {
    margin-right: 10px; } }

@media screen and (max-width: 480px) {
  .distance_type > li {
    font-size: 13px; }
  .ytext {
    top: 60%; }
  .lens {
    width: 60%;
    margin-top: 0;
    margin-left: 10px; }
  .distance_icon {
    margin-bottom: 50px; }
  .distance_icon h3 {
    font-size: 18px; }
  .eyes_distance {
    margin-bottom: 5%; } }

.feature {
  margin-top: 10%;
  margin-bottom: 10%; }
  @media screen and (max-width: 600px) {
    .feature {
      margin-top: 20%;
      margin-bottom: 0; } }

.page-text-content .other-note {
  font-size: 13px;
  line-height: 1.2;
  text-indent: -6px;
  margin-bottom: 10px; }

.block-2025-note {
  font-size: 15px;
  padding: 2% 0 1%; }
  .block-2025-note ul {
    padding-left: 1.2em; }

.block-2025-1 {
  background: #89BE71;
  background: -webkit-gradient(linear, left top, right top, from(#C5DEAA), to(#89BE71));
  background: -webkit-linear-gradient(left, #C5DEAA, #89BE71);
  background: -o-linear-gradient(left, #C5DEAA, #89BE71);
  background: linear-gradient(to right, #C5DEAA, #89BE71); }

.block-2025-2 {
  background: #B9D9A5; }

@media screen and (max-width: 768px) {
  .block-2025-1 .container, .block-2025-2 .container {
    padding: 0; } }