:root {
  --primary-color: #5da9a8;
  --color-snow-white: #fffafa;
}
* {
  font-family: '微軟正黑體';
  user-select:none;
}
html, body {
  width: 100%;
  margin: 0px;
  /* overflow-x: hidden; */
  body {min-width: 280px;}
}

/*------ 導覽列 Navbar Start ------*/
.nav-bar {
  width: 100%;
  height: 90px;
  background-color: var(--primary-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}
.logo {
  height: 100%;
  margin-left: 2vw;
  display: flex;
  align-items: center;
}
.logo>a {height: 100%;}
.logo>a>img {
  height: 100%;
  filter: drop-shadow(rgb(0,0,0,0.3) 1px 1px 10px);
}
/* 右邊項目 */
ul {
  margin: 0 ; 
  padding: 0;
  list-style: none;
}
.nav-items {
  height: 100%;
  display: flex;
  align-items: center;
}
.nav-btn {
  height: 100%;
  display: flex;
  align-items: center;
  padding-right: 4vw;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--color-snow-white);
  text-shadow: 1px 1px 10px rgb(0,0,0,0.4);
  position: relative;
}
.nav-items a {
  display: block;
  text-decoration: none;
}
.nav-btn>a {
  height: 100%;
  display: flex;
  align-items: center;
}
.nav-subbtn>a {
  line-height: 2rem;
  border-bottom: solid 4px rgba(0,0,0,0);
}
.nav-subitems {
  width: 100%;
  text-align: center;
  background-color: var(--primary-color);
  position: absolute;
  top: calc(100% - 1px);
  display: none;
}
.nav-subbtn {
  padding: 1vw;
}
/* 次導覽列hover */
ul.nav-subitems > li:hover > a {
  border-bottom: solid 4px #73c3c4;
}
/* 主導覽列&次導覽列hover時，都要顯示 */
ul.nav-items li:hover > ul {
  display: block;
}
/* 主導覽列hover (circle) */
.nav-btn { z-index: 1; }
.nav-btn::before {  
  content: '';
  position: absolute;
  top: 1vw;
  left: 0.3vw;
  width: 1.5vw;
  height: 1.5vw;
  border-radius: 1.5vw;
  display: block;
  background-color: #73c3c4;
  transition: all 0.5s ease;
  z-index: -1;
}
.nav-btn:hover::before {
  transform: scale(2) translate(0.3vw,0.3vw);
}
.nav-btn a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.nav-btn i {padding: 1vw;}
/*------ 導覽列 Navbar End------*/
/*------ 頁尾 Footer Start------*/
footer {
  background: linear-gradient(45deg, #5da9a8, hsl(139 31% 51% / 1), hsl(59 51% 51% / 1));
  height: fit-content;
}
footer .foot-up {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
footer img {
  width: 100%;
  filter: drop-shadow(rgb(0,0,0,0.3) 1px 1px 10px);
  margin-left: 1vw;
}
footer .nav-btn::before {
  top: -0.5vw;
  left: -0.5vw;
  background-color: #c4c473;
}
footer hr { border-color: var(--color-snow-white); }
footer .foot-dn {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info {/*.info1, .info2*/
  margin: 1.5vw 1.2vw;
  font-size: 1.4rem;
  color: white;
}
/*------ 頁尾 Footer End------*/
/*------ 至頂按鈕 To-top Button Start------*/
.to-top {
  width: 60px;
  height: 200px;
  position: sticky;
  bottom: 0px;
  left: 92vw;
  & a {
    text-decoration: none;
    color: inherit;
  }
}
.topbtn {
  width: 76px;
  height: 76px;
  border-radius: 100%;
  background-color: var(--primary-color);
  cursor: pointer;
  position: relative;
  top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-snow-white);
  opacity: 0;
  transform: translateY(80px);
}
.topbtn i {
  font-size: 2.5rem;
}
.topbtn.show { 
  opacity: 1;
  transform: translateY(0);
  transition-duration: .3s; 
}
.topbtn:hover { 
  color: var(--primary-color);
  background-color: #ffffff;
  width: 70px;
  height: 70px;
  border: var(--primary-color) solid 3px;
  transition-duration: 0s;
}
.page1 .topbtn { 
  color: #5eb6b8;
  background-color: #c3e8e9;
}
.page1 .topbtn:hover {
  color: var(--color-snow-white);
  background-color: hsl(179, 51%, 31%);
  border: transparent;
  transition-duration: 0s; 
}
/*------ 至頂按鈕 To-top Button End------*/

/*------ all pages ------*/
.bigtitle {
  font-size: 2rem;
  font-weight: bold;
  line-height: 6rem;
  padding: 1vw 2vw 1vw 2vw;
  letter-spacing: 1vw;/*15px*/
}
.paragraph {
  height: fit-content;
  font-size: 1.4rem;
  line-height: 2rem;
  display: flex;
  justify-content: center;
  flex-direction: row;
}
/*------ index.html ------*/
.page1 .container { padding: 2vw 10vw 5vw 10vw;}
.page1 { 
  text-align: center;
  position: relative;
  /* height: 354vw; */
}
.page1 td { text-align: left; }
/*------ other page ------*/
.container { padding: 2vw 5vw;}

/* ------------------------------------------------ */
/*------ page1 : index.html ------*/
#pics {
  width: 100%;
  height: 40vw;
  background-color: hsl(179, 45%, 45%);
}
#pic1, #pic2 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
.block {
  width: calc(100% / 42);
  height: calc(100% / 16);
  background: linear-gradient(45deg, #5da9a8, #8fdbda, #d8f8f8);
}
#pics2 {
  width: 100%;
  height: 130vw;
  background-color: hsl(179, 45%, 45%);
  display: none;
}
.block2 {
  width: calc(100% / 14);
  height: calc(100% / 18);
  background: linear-gradient(45deg, #5da9a8, #8fdbda, #d8f8f8);
}
/* document: animation.css */
.dots {
  display: flex;
  flex-direction: column;
  color: var(--primary-color);
  padding: 1rem;
  & i {
    font-size: 30px;
    height: 1.4rem;
    animation: scrolldown 0.8s infinite ease-in-out;
  }
}
@keyframes scrolldown {
  0% {transform: translateY(0px);}
  50% {transform: translateY(10px);}
  100% {transform: translateY(0px);}
}

/*------ index-news & page2-news ------*/
table {
  width: 100%;
  font-size: 1.4rem;
  border-spacing: 5px;
  border: 3px solid var(--primary-color); 
}
td {
  padding: 1vw;
  
}
tbody tr:nth-child(even){
  background-color: hsl(179, 41%, 81%);
}
tbody tr:nth-child(odd) {
  background-color: hsl(179, 41%, 91%);
}
thead td {
  background-color: hsl(179, 41%, 51%);
  color: #fff;
  font-weight: bold;
}
.page1 thead>tr>td:nth-child(1), 
.page1 thead>tr>td:nth-child(4),
.page2 thead>tr>td:nth-child(1), 
.page2 thead>tr>td:nth-child(4)
 {white-space: nowrap;}


/*------ index #sections ------*/
#news .more_container {
  width: 100%;
  height: 8vw; 
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.more {
  width: 300px;/*20vw*/
  height: 50px;/*3vw*/
  border-radius: 50px;
  border: solid 3px #5DA9A8;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;  
  position: relative;
  cursor: pointer;
  font-size: 1.4rem;
  text-decoration: none;
}
.more::before {
  content: "";
  width: 0%;
  height: 100%;
  display: block;
  border-radius: 50px;
  background-color: #5DA9A8;
  position: absolute;
  top: 0;
  left: 0;
  transition-duration: .4s;
}
.more p {
  color: #5DA9A8;
  font-weight: bold;
  position: relative;
}
.more:hover::before {width: 100%;}
.more:hover p {color: #fff;}
#system {
  background-color: var(--primary-color);
  height: 54vw;
}
#system .container {
  height: 48vw;
  padding: 3vw 5vw 3vw 5vw;
}
#system .bigtitle {
  color: white;
  text-shadow: -0.5px 0.5px rgb(140, 140, 140), 
  -1px 1px rgb(135, 135, 135), -1px 1px rgb(130, 130, 130), 
  -1.5px 1.5px rgb(125, 125, 125), -2px 2px rgb(120, 120, 120), 
  -2.5px 2.5px rgb(115, 115, 115), -3px 3px rgb(110, 110, 110), 
  -3.5px 3.5px rgb(105, 105, 105), -4px 4px rgb(100, 100, 100);
}
.sys_pic1 {width: 43%;}
#system img {width: 100%;}
.dialog_boxes {
  width: 100%;
  height: 37vw;
  position: relative;
  top: -38vw;
}
.box1, .box2, .box3 {
  position: absolute;
  width: 22vw;
  height: 10vw;
  background-color: rgba(250, 250, 250, 1);
  border-radius: 15px;
  box-shadow: -10px 8px 1px rgba(210, 210, 210, 1);
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.7rem;
  text-align: left;
  padding: 1vw 1.5vw 1vw 1.5vw;
}
.box1 {
  left: 6vw;
  top: -1vw;
}
.box2 {
  right: 0vw;
  top: 12vw;
}
.box3 {
  left: 0vw;
  bottom: 4vw;
}
#wisdom .bigtitle, #vision .bigtitle, #digit .bigtitle {
  padding: 0vw 6vw 3vw 6vw;
}
#wisdom .title_dialog, #vision .title_dialog, #digit .title_dialog {
  background-color: hsl(175, 31%, 71%);
  position: relative;
}
#wisdom .title_dialog::after, 
#vision .title_dialog::after, 
#digit .title_dialog::after {
  content: "";
  border-color: hsl(175, 31%, 61%) hsl(175, 31%, 61%) transparent transparent;
  border-style: solid solid solid solid;
  border-width: 14px 10px;
  position: absolute;
  bottom: -27px;
  right: 50px;
}
#vision .title_dialog::after {
  left: 50px;
  right: initial;
  border-color: hsl(175, 31%, 61%) transparent transparent hsl(175, 31%, 61%);
}
#wisdom img, #vision img, #digit img {
  width: 100%;
}
#wisdom .text, #vision .text, #digit .text {
  text-align: left;
  margin-left: 6vw;
}
#client {background-color: var(--primary-color);}
#client .bigtitle {
  color: white;
  text-shadow: -0.5px 0.5px rgb(140, 140, 140), 
  -1px 1px rgb(135, 135, 135), -1px 1px rgb(130, 130, 130), 
  -1.5px 1.5px rgb(125, 125, 125), -2px 2px rgb(120, 120, 120), 
  -2.5px 2.5px rgb(115, 115, 115), -3px 3px rgb(110, 110, 110), 
  -3.5px 3.5px rgb(105, 105, 105), -4px 4px rgb(100, 100, 100);
}
.cli_pic_container {
  width: 18vw;
  height: 36vw;
  margin: 0.7vw;
}
.client_text {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
  background-color: rgba(255,255,255,0.85);
  color: #339e9c;
  text-shadow: 0.3px 0.3px 1px rgba(0,0,0,.3);  
  /* opacity: 0; */
}
.cli_pic_container {
  position: relative;
}
.cli_pic1, .cli_pic2, .cli_pic3, .cli_pic4, .client_text {
  position: absolute;
  backface-visibility: hidden;
  transition: transform .3s ease-in-out;
} 
.cli_pic1, .cli_pic2, .cli_pic3, .cli_pic4 {
  transform: rotateY(0deg);
}
.client_text {
  transform: rotateY(-180deg);
}
.cli_pic_container:hover .client_text {
  transform: rotateY(0deg);
}
.cli_pic_container:hover .cli_pic1
, .cli_pic_container:hover .cli_pic2
, .cli_pic_container:hover .cli_pic3
, .cli_pic_container:hover .cli_pic4 {
  transform: rotateY(180deg);
}
.cli_pic1, .cli_pic2, .cli_pic3, .cli_pic4 {
  width: 100%;
  height: 100%;
  background-size: 100%;
  background-position: center;
}
.cli_pic1 {background-image: url(/pics/index_client1.png);}
.cli_pic2 {background-image: url(/pics/index_client2.png);}
.cli_pic3 {background-image: url(/pics/index_client3.png);}
.cli_pic4 {background-image: url(/pics/index_client4.png);}
/* 3D map */
#hoonemap .maparea {
  width: 100%;
  height: 600px;
  background-color: #999;
}
#map3d{
  overflow:hidden;
  outline:none;
  user-select:none;
  width:100%;
  height:100%;
  margin: 0;padding: 0;
  font-family:"微軟正黑體","Microsoft JhengHei";}
.office {
  height: 50px;
  width: 50px;
  background-image: url(https://web.hoone.com.tw/img/mapicon/pin_hoone2.png);
  background-size: contain;
  cursor: pointer;
}
.mrt {
  height: 40px;
  width: 40px;
  background-image: url(https://web.hoone.com.tw/img/mapicon/mrt.png);
  background-size: contain;
  cursor: pointer;
}
.bus {
  height: 40px;
  width: 40px;
  background-image: url(https://web.hoone.com.tw/img/mapicon/bus.png);
  background-size: contain;
  cursor: pointer;
}
/*---- page2 : about.html -----*/
.page2 {
  width: 100%;
  height: fit-content;
  font-size: 0;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.page2>.photo {
  width: 100%;
  height: 220px;
  background-image: url(/pics/office1.png);
  background-size: cover;
  background-position: 50% 60%;
}
/* left side */
.leftarea {
  width: 18%;
  /* height: 360vw; */
  /* position: relative; */
  /* penny add below 20250806 */
  height: 100vh;
  position: sticky;
  top: 0;
}
.sidebar {
  /* width: 55%; */
  /* height: 100vh; */
  background-color: hsl(181, 41%, 81%);
  padding: 20%;
  padding-left: 25%;
  /* position: sticky; */
  /* top: 0px; */
  /* penny add below 20250806 */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.items {
  width: 100%;
  font-size: 1.5rem;
}
.items>a {
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
}
.circle {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 100%;
  background-color: #000;
}
.title {margin-left: 1vw;}
.line {
  width: 2px;
  height: 30px;
  background-color: #000;
  margin-left: 0.6rem;
  transition-duration: 0.5s;
}
.sidebar .items:hover + .line,
.sidebar .items.clicked + .line {height: 60px;}
.clicked {
  font-weight: bold;
  color: #277677;
}
/* right side */
.rightarea {
  width: 82%;
  /* height: 360vw; */
  /* position: relative; */
}
.content {
  width: 100%;
  height: fit-content;
  overflow-x: hidden;
  position: relative;
}
.page2 .bigtitle>p, .page4 .bigtitle>p {
  border:solid 3px black;
  text-align: center;
  box-shadow: -8px 8px 0px #5da8a9;
}
.left, .right {
  height: 100%;
  padding: 2vw;
  &.left {width: 40%;}
  &.right {width: 60%;}
}
#intro_p2 .left { 
  display: flex;
  justify-content: center;
}
#intro_p2 img { width: 100%; }
#news_p2 .left {width: 30%;}

#location_p2 .right {width: 40vw;}
#location_p2 .left {width: 34%;}
/* 2D map */
#map{width: 40vw;height: 36vw;}
/* 2D map - 顯示zoom數字 */
#xylocdiv{position: absolute;top: 0px;left: 60px;font-size: 20px;color: #000000;/*padding: 3px;*/border-radius: 6px;font-weight: bold;text-shadow: 0px 2px 3px #636363,1px 1px #fff;font-family: monospace;z-index: 3;}
#zleveldiv{position: absolute;top:23px;left:60px;font-size: 20px;color: #000000;/*padding: 3px;*/border-radius: 6px;font-weight: bold;text-shadow: 0px 2px 3px #636363,1px 1px #fff;font-family: monospace;z-index: 3;}
#villagediv{position: absolute;top:23px;left:142px;font-size: 15px;color: #000000;padding: 3px;border-radius: 6px;font-weight: bold;text-shadow: 0px 2px 3px #636363,1px 1px #fff;font-family: monospace;z-index: 3;}
/* 2D map - 標題 */
#hoone {
  position: relative;
  top: -36vw;left:19.8vw;
  font-size: 20px;
  color: #55b4bf;
  padding: 3px;border-radius: 6px;
  font-weight: bold;text-shadow: 1px 1px #fff,0px 2px 3px #000,1px 1px #7d7d7d;font-family: monospace;
  background-color: #96e2eb7a;
  z-index: 2;
  width: 20vw;
}
.logoSection {
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.headerLogo {height: 40px;}
.headerTitle {font-size: 25px;font-weight: bolder;}
.headerTitle1 {font-size: 20px;font-weight: bolder;}
#location_p2 .left img {width: 2rem;}
#location_p2 .category {font-size: 1.8rem;}
#location_p2 .title {
  display: flex;
  align-items: center;
  margin-left: -2vw;
  line-height: 4rem;
}
#location_p2 .left>a {
  text-decoration: none;
  color: #5DA9A8;
  text-shadow: 0px 1px 1px #444;
  font-size: 1.6rem;
}
#organize_p2 img {
  width: 80%;
  padding: 2%;
  margin: 2%;
  box-shadow: -1px 1px 10px rgb(0,0,0,0.5);
}
#certify_p2 .paragraph {
  flex-direction: column;
}
#certify_p2 .record {
  height: fit-content;
  margin: 0.5vw 0vw;
  padding: 1vw 2vw;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.certify_pic {
  width: 20%;
  cursor: pointer;
}
.iso {width: 50%;display: flex;}
.certify_text {width: 80%;padding: 1vw;}
.record img {width: 96%;}

#certify_p2 .record:nth-of-type(odd) {
  background-color: hsl(181, 41%, 88%);
}
#certify_p2 .record:nth-of-type(even) {
  background-color: hsl(181, 41%, 80%);
}
/* google calendar */
/* #news_p2 iframe html body {
  background-color: #3f88b5;
} */

/*---- page3 : services.html -----*/
.page3>.photo {
  width: 100%;
  height: 220px;
  background-image: url(/pics/office2.png);
  background-size: cover;
  background-position: 50% 30%;
}
.page3 img {width: 100%;height: 100%;}
.toparea {
  width: 100%;
  padding: 2vw 0;
  /* height: 200px; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.top-navbar {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1.5vw;
}
.top-navbar>.items {
  width: 12vw;
  /* height: 5rem; */
  border-radius: 3rem;
  font-size: 1.5rem;
  font-weight: bold;
  border: 3px solid var(--primary-color);
  /* margin: 0 1vw; */
  /* padding: 0 1vw; */
  padding: 1vw 1vw;
  position: relative;
  cursor: pointer;
  & p {
    width: 100%;
    height: 100%;
    border-radius: 3rem;
    text-align: center;
    color: var(--primary-color);
    margin: 0;
    padding: 0 1vw;
    position: relative;
    top: 0vw;
    left: -1vw;
    /* z-index: 1; */
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.top-navbar .items::before {
  content: "";
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 3rem;
  background-color: var(--primary-color);
  position: absolute;
  top: 0;
  left: 0;
  transition: all .2s cubic-bezier(0, 0.35, 1, 0.75);
}
.top-navbar .items:hover::before {
  width: 100%;
}
.top-navbar .items:hover p {
  color: var(--color-snow-white);
}

.hidden {
  display: none;
}
.items.selected {
  background-color: var(--primary-color);
  & p {
    color: var(--color-snow-white);
  }
}
.page3 .bigtitle {
  background-color: var(--primary-color);
  color: white;
  letter-spacing: 10px;
  line-height: 3rem;
  width: 25vw;
  margin-bottom: 1rem;
  text-align: center;
  /* border-radius: 3vw 3vw 0 0; */
  border-radius: 20px 20px 0 0;
}
/*---- page4 : ideas.html -----*/
.page4>.photo {
  width: 100%;
  height: 220px;
  background-image: url(/pics/office3.png);
  background-size: cover;
  background-position: 50% 56%;
}
.page4 {
  width: 100%;
  height: fit-content;
  font-size: 0;
  display: flex;
  flex-wrap: wrap;
}

#policy_p4 img {
  width: 100%;
}
#policy_p4 b {
  text-shadow: -1px 1px 0px white, -2px 2px 0px #a7a7a7;
}
#benefits_p4 .paragraph {
  flex-direction: column;
  padding: 0 2vw;
  row-gap: 1.5vw;
}
.sentence {
  border: solid 3px var(--primary-color);
  line-height: 4rem;
  border-radius: 2.5rem;
  display: flex;
  align-items: flex-start;
  padding: 0 2vw;
  box-shadow: -1px 5px 0px var(--primary-color);
  & i {margin-right: 3px;}
}

/* navbar - phone version (<768px) */
.list {
  display: none;
  width: 6vw;
  height: 100%;
  margin-right: 5vw;
}
.list-icon {
  width: 6vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-shadow: 1px 1px 10px rgba(0,0,0,.3);
}
.list-icon>i {
  font-size: 2.5rem;
  line-height: 1rem;
  color: var(--color-snow-white);
}
.list-table {
  width: 100vw;
  z-index: 1;
  position: relative;
  right: 89vw;
  top: -1px;
  display: none;
}
.show-listtable {
  display: block;
}
.list-table>table {
  border: none;
  border-spacing: 0px;
  background-color: var(--primary-color);
  padding: 4vw;
  line-height: 7vw;
  font-size: 3.5vw;
  & th {
    border-right: 3px solid #95cccb;
    color: var(--color-snow-white);
    text-shadow: 1px 1px 10px rgb(0, 0, 0, 0.5);
    padding: 0vw 2vw;
  }
  & th:nth-child(4) {
    border-right: none;
  }
  & td {
    background-color: inherit;
    text-align: center;
    padding: 5px;
    color: #004a49;
    font-weight: bold;
    text-shadow: 1px 1px 10px rgb(237 255 255 / 50%);
  }
  & a {
    text-decoration: none;
    color: inherit;
  }
}
.list-table>table>tbody {vertical-align: top;}



/* break point : 1400px(1399.98) 1200px(1199.98) 992px(991.98)
                  768px(767.98)  576px(575.98)  */
@media (min-width: 2559.98px) { /* above 2560px */
  .nav-bar {height: 110px;}
  .logo {height: 110%;}
  .nav-btn {font-size: 2rem;}
  .nav-btn::before {top: 15px;left: 6px;}
  .page2>.photo, .page3>.photo, .page4>.photo {height: 300px;}
  .bigtitle {font-size: 2.5rem;}
  table {font-size: 2rem;}
  .paragraph { font-size: 2rem;line-height: 4rem; }
  .dots i {font-size: 40px;height: 2rem;}
  .more {width: 360px;height: 60px;font-size: 1.8rem;}
  .box1, .box2, .box3 {font-size: 1.8rem;line-height: 2.4rem;}
  #wisdom .bigtitle, #vision .bigtitle, #digit .bigtitle {line-height: 7rem;}
  .leftarea>.sidebar>.items {font-size: 2rem;height: 3rem;}
  #myIframe {width: 540px;height: 500px;}
  #xylocdiv {top: -20px;}
  #zleveldiv, #villagediv {top: 0px;}
  #location_p2 .left img {width: 2.6rem;}
  #location_p2 .category {font-size: 2.4rem;}
  #location_p2 .left>a {font-size: 2.2rem;}
  footer .nav-btn::before {top: -0.2vw;left: -0.5vw;}
  .info {font-size: 2rem;}
  /* page3 */
  .page3 .container {padding: 2vw 27vw;}
  /* page4 */
  #benefits_p4 .paragraph {row-gap: 1vw;}
} 
@media (max-width: 2559.98px) {
  .page3 .container {padding: 2vw 27vw;}
}
@media (max-width: 1500.02px) {
  #news_p2 .left {width: 35%;padding-left: 0;}
}

/*----------------------------------------------------------*/
@media (max-width: 1399.98px) {
  .nav-btn::before {width: 2vw;height: 2vw;top: 1.5vw;}
  .to-top {left: 90vw;}
  /* page1 */
  
  .box1, .box2, .box3 { font-size: 1.1rem; line-height: 1.5rem; }
  #wisdom .text, #vision .text, #digit .text {margin-left: 4vw;}
  /* page2 */
  #news_p2 .paragraph { flex-direction: column; }
  #news_p2 .left, #news_p2 .right {width: 95%;padding: 2vw;}
  #myIframe {width: 65vw; height: 35vw;}
  #location_p2 .paragraph {flex-direction: column-reverse;align-items: center;}
  #location_p2 .paragraph>.left {width: 90%;}
  #location_p2 .paragraph>.right {width: 50vw;}
  #map {width: 50vw;height: 50vw;}
  #hoone {top: -50vw;left: 24.5vw;width: 25vw;}
  /* page2 & 4 */
  .leftarea>.sidebar {padding: 16%;}
  /* page3 */
  .top-navbar>.items {font-size: 1.3rem;}
  .page3 .container {padding: 2vw 18vw;}
}

@media (max-width: 1199.98px) {
  html {font-size: 14px;}

  .nav-bar {height: 70px;}
  footer img {width: 90%;}
  footer .nav-btn {padding-right: 3vw;}
  /* page1 */
  .sys_pic1 { width: 40%; }
  .dialog_boxes {top: -35vw;}
  .box1, .box2, .box3 { font-size: 1rem; line-height: 1.3rem; }
  #client .client_text {font-size: 1.7rem;}
  /* page2 & 4 */
  .page2>.photo, .page3>.photo, .page4>.photo {height: 180px;}
  .leftarea>.sidebar>.items>a>.circle {width: 1rem;height: 1rem;}  
  .leftarea>.sidebar>.line {margin-left: 0.4rem;}

  /* -------- */
  #xylocdiv, #zleveldiv {font-size: 16px;}
  #villagediv {font-size: 13px;left: 130px;top: 20px;}
}

@media (max-width: 991.98px) {
  html {font-size: 12px;}

  .nav-bar {height: 65px;}
  .nav-btn::before {top: 1.5vw;left: 0.7vw;}
  .nav-items a {padding: 0 0.5vw;}
  .more {width: 200px;}
  #news .more_container {height: 12vw;}
  footer .nav-items {display: none;}
  footer .foot-dn {flex-direction: column-reverse;align-items: flex-start;}
  .to-top {left: 88vw;}
  .topbtn {width: 65px;height: 65px;}
  .topbtn i {font-size: 2.3rem;}
  /* page1 */

  #system {height: 72vw;}
  #system .container {height: 66vw;}
  #system .paragraph {height: 70%;align-items: center;}
  .dialog_boxes {height: 45vw;top: -44vw;}
  .box1, .box2, .box3 {
    height: 18vw;
    width: 24vw;
    font-size: 1.2rem;
    &.box1 {top: -5vw;}
    &.box2 {top: 8vw;}
    &.box3 {bottom: 0vw;}
  }
  #wisdom .text, #vision .text, #digit .text {margin-left: 2vw;}
  #wisdom .bigtitle, #vision .bigtitle, #digit .bigtitle {
    line-height: 4rem;
    padding: 0vw 6vw 5vw 6vw;}
  #client .client_text {font-size: 1.4rem;}
  /* page2 & 3 & 4 */
  .page2>.photo, .page3>.photo, .page4>.photo {height: 160px;}
  .leftarea>.sidebar>.items>a>.circle {width: 0.8rem;height: 0.8rem;}  
  .leftarea>.sidebar>.line {margin-left: 0.3rem;}

  /* -------- */
  #myIframe {width: 68vw; height: 45vw;}
  #hoone {width: 30vw;left: 19vw;}
  #hoone>.logoSection {height: 7vw;}
  .headerLogo {height: 34px;margin-left: 2px;}
  #xylocdiv {left: 45px;}
  #zleveldiv {top: 40px;left: 45px;}
  #villagediv {left: 45px;padding: 0;}
  #certify_p2 .record {margin: 1vw 0vw;}
  /* page3 */
  .page3 .bigtitle {width: 30vw;}
  /* page4 */
  .sentence {box-shadow: -1px 3px 0px var(--primary-color);}
}
@media (max-width: 767.98px) {
  .nav-items {display: none;}/*change navbar*/
  .list {display: block;}
  .nav-bar {height: 90px;}
  .logo {margin-left: 4vw;}
  table {font-size: 1.4rem;}

  td {padding: 2vw;}
  .more {font-size: 1.4rem;}
  .to-top {left: 86vw;}
  .topbtn {width: 60px;height: 60px;}
  .topbtn i {font-size: 2rem;}
  /* page1 */

  #picture #pics {display: none;}/*change animation*/
  #pics2 {display: block;}
  #news .more_container {height: 20vw;}
  #system {height: 126vw;}
  #system>.container {height: 120vw;}
  #system>.container>.paragraph {height: 90%;align-items: center;}
  #system .sys_pic1 {width: 68%;}
  #system .dialog_boxes {height: 90vw;top: -98vw;}
  #system .box1, #system .box2, #system .box3 {
    width: 36vw;
    height: 24vw;
    line-height: 1.4rem;
    &.box1 {left: 0vw; top: -7vw;}
    &.box2 {right: -3vw; top: 5vw;}
    &.box3 {left: 6vw; bottom: 0vw;}
  }
  #wisdom .paragraph, #digit .paragraph {
    flex-direction: column;
    align-items: center;
  }
  #vision .paragraph {
    flex-direction: column-reverse;
    align-items: center;
  }
  #wisdom .container, #digit .container, #vision .container {
    padding: 5vw 10vw;
  }
  #wisdom .left, #vision .left, #digit .left {width: 80%;}
  #wisdom .right, #vision .right, #digit .right {width: 90%;}
  #wisdom .bigtitle, #digit .bigtitle, #vision .bigtitle {
    padding: 3vw 6vw 10vw 6vw;
    line-height: 5rem;
  }
  #client .paragraph {
    flex-direction: column;
    align-items: center;
  }
  #client .container {padding: 2vw 10vw 15vw 10vw;}
  .cli_pic_container {width: 70vw;margin: 2vw;}
  .cli_pic1, .cli_pic2, .cli_pic3, .cli_pic4 {
    background-size: 50%;
    background-repeat: no-repeat;
    background-color: #fff;
  }
  #client .client_text {font-size: 1.6rem;}
  /* page2 & 3 & 4 */
  .page2>.photo, .page3>.photo, .page4>.photo {height: 140px;}
  .rightarea {width: 85%;}
  .leftarea {width: 15%;}
  .leftarea>.sidebar {padding-left: 45%;}
  .leftarea>.sidebar>.items>a>.title {display: none;}

  .page2 .bigtitle, .page4 .bigtitle {line-height: 5rem;}
  #index_news tr>td:nth-child(4), #index_news tr>td:nth-child(3) {display: none;}
  #about_news tr>td:nth-child(4), #about_news tr>td:nth-child(3) {display: none;}
  /* -------- */
  #intro_p2 .paragraph {
    flex-direction: column-reverse;align-items: center;
  }
  #intro_p2 .paragraph>.right {width: 95%;}
  #intro_p2 .paragraph>.left {width: 70%;}
  #location_p2 .paragraph>.right {width: 65vw;}
  #map {width: 65vw;}
  #hoone {left: 34vw;}
  #hoone>.logoSection {height: 5vw;}
  .headerLogo {height: 30px;margin-left: 4px;}
  #xylocdiv {display: none;}
  #villagediv {top: -4px;}
  #zleveldiv {top: 12px;}
  #certify_p2 .record {
    flex-direction: column;
    padding: 4vw 2vw;
  }
  .certify_pic {width: 40%;}
  .iso {width: 80%;}
  /* page3 */
  .top-navbar{flex-wrap: wrap;}
  .top-navbar>.items {width: 25vw;}
  .page3 .bigtitle {width: 52vw;}
  .page3 .container {padding: 2vw 10vw;}
  /* page4 */
  #policy_p4 .paragraph {flex-direction: column-reverse;align-items: center;}
  #policy_p4 .paragraph>.left {width: 95%;}
  #policy_p4 .paragraph>.right {width: 95%;}
  #benefits_p4 .paragraph {row-gap: 3vw;}
}

@media (max-width: 575.98px) {
  .nav-bar {height: 70px;}
  .list-table>table {line-height: 8vw;font-size: 4vw;}
  .list-icon>i {font-size: 6vw;}
  .bigtitle {font-size: 1.6rem;}
  table {font-size: 1.2rem;}
  .page2 table {table-layout: auto;}
  .to-top {left: 82vw;}
  .topbtn {width: 60px;height: 60px;}
  .topbtn i {font-size: 2rem;}
  /* page1 */
  #news .more_container {height: 25vw;}
  .more {font-size: 1.2rem;}
  #system {height: 190vw;}
  #system>.container {height: 184vw;}
  #system>.container>.paragraph {align-items: start;height: 40%;margin-top: -6vw;}
  #system .sys_pic1 {width: 75%;}
  #system .dialog_boxes {height: 95vw;top: -10vw;}
  #system .box1, #system .box2, #system .box3 {
    line-height: 1.6rem;
    width: 60vw;
    height: 24vw;
    &.box1 {left: 5vw; top: 0vw;}
    &.box2 {right: 0vw; top: 33vw;}
    &.box3 {left: 12vw; bottom: 3vw;}
  }
  /* page2 & 3 & 4 */
  .page2>.photo, .page3>.photo, .page4>.photo {height: 120px;}
  .rightarea {width: 90%;}
  .leftarea {width: 10%;}
  .leftarea>.sidebar {padding-left: 30%;}
  .left, .right {padding: 0 0 4vw 0;}
  .page2 .bigtitle>p, .page4 .bigtitle>p {border-width: 2.5px;}
  /* -------- */
  #intro_p2 .paragraph>.left {width: 90%;}
  #about_news {font-size: 1.2rem;}
  #myIframe {width: 75vw; height: 70vw;}
  #location_p2 .paragraph>.right {width: 75vw;}
  #map {width: 75vw;height: 75vw;}
  #hoone {width: 34vw;left: 40vw;top: -75vw;}
  #hoone>.logoSection {height: 6vw;}
  .headerLogo {height: 25px;}
  #villagediv {top: 0px;left: 40px;}
  #zleveldiv {top: 15px;left: 40px;}
  #organize_p2 img {width: 90%;}
  #certify_p2 .record {padding: 5vw;}
  /* page3 */
  .top-navbar>.items {width: 30vw;}
  .page3 .bigtitle {
    width: 50vw;
    letter-spacing: 6px;
  }
  .page3 .container {padding: 2vw 5vw;}
  /* page4 */
  #benefits_p4 .paragraph {
    align-items: inherit;
    row-gap: 4vw;
  }
  .sentence {
    line-height: 2.5rem;
    box-shadow: 0px 3px 0px var(--primary-color);
  }
}
@media (max-width: 475.02px) {
  .nav-bar {height: 55px;} 
  .list-icon>i {font-size: 7vw;} 
  .info {font-size: 1.2rem;}
  /* page1 */
  #news .more_container {height: 30vw;}
  #system .box1, #system .box2, #system .box3 {font-size: 1rem;line-height: 1.4rem;}
  /* page2 */
  #hoone {display: none;}
  #myIframe {width: 76vw; height: 76vw;}
  /* page3 */
  .top-navbar>.items {
    width: 40vw;
    font-size: 1rem;
  }
  .page3 .bigtitle {
    width: 60vw;
    letter-spacing: 5px;
  }
}
@media (max-width: 365.02px) {
  .nav-bar {height: 45px;} 
  .list-icon>i {font-size: 8vw;}
  table {font-size: 1rem;}
  .info {font-size: 1rem;}
  .topbtn {width: 55px;height: 55px;}
  .to-top {left: 80vw;}
  /* page1 */
  #news .more_container {height: 35vw;}
  .more {font-size: 1rem;width: 180px;}
  #system {height: 230vw;}
  #system>.container {height: 225vw;}
  #system>.container>.dialog_boxes {height: 128vw;top: -26vw;}
  #system .box1, #system .box2, #system .box3 {
    height: 34vw; 
    &.box2 {top: 44vw;}
  }
  #myIframe {height: 90vw;}
  #certify_p2 .record {padding: 4vw;margin: 2vw 0;}
  /* page3 */
  .page3 .bigtitle {width: 65vw;}
}

@media (max-width: 310.02px) {
  /* page2 */
  #location_p2 .paragraph>.right {display: none;}
  #myIframe {display: none;}
}

@media (max-width: 290.02px) {
  table {font-size: 1rem;}
  .paragraph { font-size: 1rem; }
  /* page3 */
  .page3 .bigtitle {width: 70vw; }
}
/* ~280px */