@charset "UTF-8";
/* CSS Document */

section, article, aside, footer, header, nav, h2 { display:block;}

body { padding:0; margin:0 auto; color: #414141; font-size:1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; position: relative;}
img { border:0; display: block;}

html, body { height: 100%;}

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

div.brk { clear: both;}


/************ video box ************/
.video-container { position:relative; padding-bottom:56.25%; padding-top:30px; width:100%; height: 0px; overflow:hidden;}
.video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%;}


@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


@media screen and (min-width: 1370px) {

  /************ aside(left) ************/

  aside { width: 8vw; height: 100%; background-color: rgba(255,255,255,0.9); position: fixed; top: 0; left: 0; z-index: 10;}

  aside .logo-slogan { width: 100%; height: calc(100% - 10vw); padding: 1.5vw 2.4vw 0 2.4vw; box-sizing: border-box;}
  aside .logo-slogan img.logo-img { width: 100%; height: auto; margin: 0 0 1.5vw 0;}
  aside .logo-slogan img.logo-img-mo { display: none;}
  aside .logo-slogan img.slogan-img { width: 1.6vw; height: auto; margin: 0 auto;}
  aside .tel-box { width: 8vw; height: 5vw; padding: 0.8vw 0 0 0; box-sizing: border-box; color: #fff; font-size: 0.8vw; text-align: center; background-color: #00a63c; cursor: pointer;}
  aside .tel-box a { color: #fff; text-decoration: none;}
  aside .tel-box img.icon { width: 2.2vw; height: auto; margin: 0 auto;}
  aside .address-box { width: 8vw; height: 5vw; padding: 0.8vw 0 0 0; box-sizing: border-box; color: #fff; font-size: 0.8vw; text-align: center; background-color: #f29600; cursor: pointer;}
  aside .address-box a { color: #fff; text-decoration: none;}
  aside .address-box img.icon { width: 1.4vw; height: auto; margin: 0 auto;}


  /************ #side-bar ************/

  #side-bar { width: 3vw; position: fixed; top: 16vw; right: 2.5vw; z-index: 10;}
  #side-bar .inquiry-online { width: 100%; background-color: #eee;}
  #side-bar .inquiry-online a { width: 100%; padding: 1vw 0.8vw; box-sizing: border-box; color: #000; font-size: 1.2vw; font-weight: 500; line-height: 1.3vw; text-align: center; text-decoration: none; display: block;}
  #side-bar .social-icon { width: 3vw; height: 3vw; padding: 0 0.5vw; box-sizing: border-box; background-color: #008645;}
  #side-bar .social-icon a { width: 100%; height: 100%; text-decoration: none; border-bottom: 1px #006837 solid; box-sizing: border-box; display: block; display: flex; justify-content: center; align-items: center; cursor: pointer;}
  #side-bar .social-icon a img { width: 1.5vw; height: auto;}
  #side-bar .social-icon:last-child a { border-bottom: 0;}


  /************ header + nav ************/

  header#nav-top-1 { width: 100%; position: absolute; top: 0; left: 0; z-index: 2;}

  header#nav-top-1 nav#mo { display: none;}
  header#nav-top-1 nav#pc { width: 100%;}
  header#nav-top-1 nav#pc ul.nav-menu { width: 100%; padding: 1.8vw 0 0 11vw; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: flex-start; align-items: flex-start;}
  header#nav-top-1 nav#pc ul.nav-menu li { padding: 0 1.2vw; margin: 0; position: relative;}
  header#nav-top-1 nav#pc ul.nav-menu li a { width: 7vw; color: #fff; font-size: 1.2vw; font-weight: 500; text-align: center; text-decoration: none; display: block; cursor: pointer;}
  header#nav-top-1 nav#pc ul.nav-menu li a img.arrow { width: 100%; height: auto; margin: 0.5vw 0 0 0; display: none;}
  /*header#nav-top-1 nav#pc ul.nav-menu li a:hover img.arrow { display: block; animation: fadeIn 2s;}*/
  header#nav-top-1 nav#pc ul.nav-menu li a.sel img.arrow {display: block; animation: fadeIn 2s;}
  header#nav-top-1 nav#pc ul.nav-menu li ul.nav-memu-popup { width: 10vw; padding: 4.5vw 0 1vw 0; margin: 0; box-sizing: border-box; background-color: rgba(255,255,255,0.2); list-style: none; display: none; position: absolute; top: -0.5vw; left: calc(50% - 5vw); z-index: 999;}
  header#nav-top-1 nav#pc ul.nav-menu li ul.nav-memu-popup li { width: 100%; padding: 0; margin: 0;}
  header#nav-top-1 nav#pc ul.nav-menu li ul.nav-memu-popup li a { width: 100%; padding: 0.5vw 0; color: #fff; font-size: 1.1vw; font-weight: 500; text-align: center; text-decoration: none; display: block;}
  header#nav-top-1 nav#pc ul.nav-menu li ul.nav-memu-popup li a:hover { color: #444; background-color: rgba(255,255,255,06);}


  header#nav-top-2 { width: 100%; position: absolute; top: 0; left: 0; z-index: 2;}

  header#nav-top-2 nav#mo { display: none;}  
  header#nav-top-2 nav#pc { width: 100%;}  
  header#nav-top-2 nav#pc ul.nav-menu { width: 100%; padding: 1.8vw 0 0 11vw; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: flex-start; align-items: flex-start;}
  header#nav-top-2 nav#pc ul.nav-menu li { padding: 0 1.2vw; margin: 0; position: relative;}
  header#nav-top-2 nav#pc ul.nav-menu li a { width: 7vw; color: #4d4d4d; font-size: 1.2vw; font-weight: 500; text-align: center; text-decoration: none; display: block;}
  header#nav-top-2 nav#pc ul.nav-menu li a img.arrow { width: 100%; height: auto; margin: 0.5vw 0 0 0; display: none;}
  /*header#nav-top-2 nav#pc ul.nav-menu li a:hover img.arrow { display: block; animation: fadeIn 2s;}*/
  header#nav-top-2 nav#pc ul.nav-menu li a.sel img.arrow {display: block; animation: fadeIn 2s;}
  header#nav-top-2 nav#pc ul.nav-menu li ul.nav-memu-popup { width: 10vw; padding: 4.5vw 0 1vw 0; margin: 0; box-sizing: border-box; background-color: rgba(0,0,0,0.2); list-style: none; display: none; position: absolute; top: -0.5vw; left: calc(50% - 5vw); z-index: 999;}
  header#nav-top-2 nav#pc ul.nav-menu li ul.nav-memu-popup li { width: 100%; padding: 0; margin: 0;}
  header#nav-top-2 nav#pc ul.nav-menu li ul.nav-memu-popup li a { width: 100%; padding: 0.5vw 0; color: #444; font-size: 1.1vw; font-weight: 500; text-align: center; text-decoration: none; display: block;}
  header#nav-top-2 nav#pc ul.nav-menu li ul.nav-memu-popup li a:hover { color: #fff; background-color: rgba(0,0,0,0.6);}

  img.header-top-2-illu { width: 26vw; height: auto; position: absolute; top: 2.5vw; right: 0;}


  img.header-fb-icon { width: 2vw; height: auto; position: absolute; top: 1.7vw; right: 20vw;}


  /************ index banner ************/
  
  .banner-box { width: 100%; height: 100%; max-height: 50vw; overflow: hidden; position: relative; z-index: 1;}
  .banner-box img { width: 100%; height: auto;}

  img.banner-illu-1 { width: 18vw; height: auto; position: absolute; top: 2.5vw; right: 0; z-index: 2;}
  img.banner-illu-2 { width: 70vw; height: auto; position: absolute; bottom: 2vw; left: calc(8vw + 2vw); z-index: 2;}
  img.banner-illu-3 { width: 32vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}

  
  /************ section #index-sec1 ************/

  section#index-sec1 { clear: both; width: 100%; position: relative; z-index: 1;}

  img.index-sec1-bg { width: 100%; height: auto;}
  img.index-sec1-title { width: 19.2vw; height: auto; position: absolute; top: 6vw; left: 12.5vw;}
  img.index-sec1-photo { width: 39vw; height: auto; position: absolute; top: 6vw; right: 10.4vw;}

  .index-sec1-item { width: 28vw; display: flex; justify-content: flex-start; align-items: flex-start;}
  .index-sec1-item.item-1 { position: absolute; top: 28vw; left: 33vw;}
  .index-sec1-item.item-2 { position: absolute; top: 36vw; left: 25.5vw;}
  .index-sec1-item.item-3 { position: absolute; top: 43.5vw; left: 19vw;}
  .index-sec1-item.item-4 { position: absolute; top: 51vw; left: 12.4vw;}
  .index-sec1-item.item-5 { position: absolute; top: 5vw; right: 8.4vw;}
  .index-sec1-item img.item-num { width: 4.2vw; height: auto;}
  .index-sec1-item .item-text { width: calc(100% - 4.2vw); padding: 2.4vw 0 0 1.3vw; box-sizing: border-box; font-size: 1vw; font-weight: 500; line-height: 1.5vw;}
  .index-sec1-item .item-text span.title { color: #e78b00; font-size: 1.6vw; font-weight: 500;}


  /************ section #index-sec2 ************/

  section#index-sec2 { clear: both; width: 100%; position: relative; z-index: 1;}

  img.index-sec2-bg { width: 100%; height: auto;}
  img.index-sec2-photo { width: 52vw; height: auto; position: absolute; top: 2.6vw; left: 8vw;}

  .index-sec2-item { width: 26vw; display: flex; justify-content: flex-start; align-items: flex-start;}
  .index-sec2-item.item-5 { position: absolute; top: 5vw; right: 8.4vw;}
  .index-sec2-item img.item-num { width: 4.2vw; height: auto;}
  .index-sec2-item .item-text { width: calc(100% - 4.2vw); padding: 2.4vw 0 0 1.3vw; box-sizing: border-box; font-size: 1vw; font-weight: 500; line-height: 1.5vw;}
  .index-sec2-item .item-text span.title { color: #e78b00; font-size: 1.6vw; font-weight: 500;}

  img.index-sec2-title { width: 53vw; height: auto; position: absolute; top: 29vw; left: 11.5vw;}
  img.index-sec2-illu { width: 52vw; height: auto; position: absolute; top: 44vw; right: 11.5vw;}

  .index-sec2-text { width: 35.5vw; font-size: 1.4vw; font-weight: 500; line-height: 2vw; position: absolute; top: 52.5vw; left: 14.6vw;}
  .index-sec2-text span.en-text { color: #a8a8a8; font-size: 1vw;}
  .index-sec2-text span.slogan-text { color: #007d2d;}

  .index-sec2-more-bt { width: 21vw; border-radius: 3vw; background-color: #009a3c; position: absolute; bottom: 2.5vw; left: calc(50% - 10.5vw); overflow: hidden;}
  .index-sec2-more-bt a { width: 100%; padding: 0.8vw 2vw; color: #fff; font-size: 1.4vw; font-weight: 500; text-decoration: none; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}


  /************ section #index-sec3 ************/

  section#index-sec3 { clear: both; width: 100%; padding: 0 0 2vw 0; position: relative; z-index: 1;}

  img.index-sec3-title { width: 26vw; height: auto; margin: 0 auto; position: relative; z-index: 2;}
 
  .index-sec3-case-photos { clear: both; width: 100%; padding: 0 0 0 8vw; margin: 1vw 0 0 0; box-sizing: border-box; overflow: hidden; position: relative; z-index: 2;}
  .index-sec3-case-photos img { width: calc(100% - 2vw); height: auto; margin: 0 1vw;}
  .index-sec3-case-photos .photo-text { width: 100%; padding: 0.5vw 0 2vw 0; font-size: 1.3vw; font-weight: 500; line-height: 2vw; text-align: center;}
  .index-sec3-case-photos .photo-text span.case-name { color: #00395a; font-size: 1.5vw; font-weight: 500;}

  .index-sec3-photos-bg { width: 100%; height: 30vw; background-color: rgba(136,194,63,0.3); display: block; position: absolute; bottom: 0; left: 0; z-index: 1;}


  /************ section #index-sec4 ************/

  section#index-sec4 { clear: both; width: 100%; position: relative; z-index: 1;}

  img.index-sec4-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  img.index-sec4-title { width: 26vw; height: auto; position: absolute; top: 5vw; left: 10vw; z-index: 2;}

  .index-sec4-items-box { width: 54vw; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; position: absolute; top: 18vw; left: 10vw; z-index: 2;}
  .index-sec4-items-box .item-box { width: calc(100% / 4); padding: 0 3vw 0 0; margin: 0 0 2vw 0; box-sizing: border-box;}
  .index-sec4-items-box .item-box img.icon { width: 90%; height: auto; margin: 0 auto;}
  .index-sec4-items-box .item-box .text-title { clear: both; width: 100%; padding: 0.2vw 0; margin: 1vw 0 0 0; color: #fff; font-size: 1.2vw; text-align: center; border-radius: 2vw; background-color: #00395a;}

  .index-sec4-text-con { width: 50vw; font-size: 1.4vw; font-weight: 500; line-height: 2vw; position: absolute; top: 49vw; left: 10vw; z-index: 2;}
  .index-sec4-text-con span.en-text { color: #fff; font-size: 1vw;}
  .index-sec4-text-con span.title-text { color: #007d2d; font-size: 1.6vw;}

  .index-sec4-more-bt { width: 21vw; border-radius: 3vw; background-color: #009a3c; position: absolute; bottom: 4.5vw; left: 10vw; z-index: 2; overflow: hidden;}
  .index-sec4-more-bt a { width: 100%; padding: 0.8vw 2vw; color: #fff; font-size: 1.4vw; font-weight: 500; text-decoration: none; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}


  /************ section #index-sec5 ************/

  section#index-sec5 { clear: both; width: 100%; position: relative; z-index: 1;}

  img.index-sec5-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  img.index-sec5-title { width: 27vw; height: auto; position: absolute; top: 3vw; left: 14vw; z-index: 2;}

  .index-sec5-text-con { width: 40vw; font-size: 1.4vw; font-weight: 500; line-height: 2vw; position: absolute; top: 26vw; left: 18vw; z-index: 2;}
  .index-sec5-text-con span.en-text { color: #a9a9a9; font-size: 1vw;}
  .index-sec5-text-con span.title-text { color: #007d2d; font-size: 1.6vw;}

  .index-sec5-more-bt { width: 21vw; border-radius: 3vw; background-color: #009a3c; position: absolute; top: 30vw; right: 15vw; z-index: 2; overflow: hidden;}
  .index-sec5-more-bt a { width: 100%; padding: 0.8vw 2vw; color: #fff; font-size: 1.4vw; font-weight: 500; text-decoration: none; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}


  /************ page banner ************/

  img.page-banner-illu-2 { width: 81vw; height: auto; position: absolute; bottom: 2vw; left: calc(8vw + 2vw); z-index: 2;}
  img.about-banner-title { width: 36vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.service-banner-title { width: 42vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.case-banner-title { width: 44vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.case-progress-banner-title { width: 46vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.news-banner-title { width: 37vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.knowledge-banner-title { width: 64vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.contact-banner-title { width: 64vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}


  /************ section #about-sec1 ************/

  section#about-sec1 { clear: both; width: 100%; padding: 0 0 15vw 0; position: relative; z-index: 1;}

  img.about-sec1-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  img.about-sec1-title { width: 53vw; height: auto; position: absolute; top: 5vw; left: 17vw; z-index: 3;}
  img.about-sec1-illu { width: 61vw; height: auto; position: absolute; top: 20vw; left: 30vw; z-index: 2;}

  .about-sec1-text-con { width: 28vw; font-size: 1.4vw; font-weight: 500; line-height: 2vw; position: absolute; top: 29vw; left: 20vw; z-index: 2;}
  .about-sec1-text-con span.text-title { color: #0bb3ac; font-size: 1.9vw;}
  .about-sec1-text-con span.en-text { color: #a8a8a8; font-size: 1vw;}


  /************ section #about-sec2 ************/

  section#about-sec2 { clear: both; width: 100%; padding: 4vw 0 2.5vw 8vw; box-sizing: border-box; background-color: rgba(124,223,20,0.2); position: relative; z-index: 1;}

  .about-sec2-item-row { width: 100%; display: flex; justify-content: center; align-items: center;}
  .about-sec2-item-row img.item-icon { width: 9vw; height: auto; margin: 0 4.5vw;}

  .about-sec2-slogan { width: 100%; color: #1a1a1a; font-size: 2.5vw; font-weight: 500; line-height: 5.5vw; letter-spacing: 0.1em; text-align: center;}
  .about-sec2-slogan-mo { display: none;}

  .about-sec2-title { width: 100%; margin: 2vw 0 0 0; text-align: center;}
  .about-sec2-title span.text-title { color: #149dbe; font-size: 1.9vw; font-weight: 500; line-height: 2.5vw}
  .about-sec2-title span.text-en { color: #a8a8a8; font-size: 1vw;}


  /************ section #about-sec3 ************/

  section#about-sec3 { clear: both; width: 100%; padding: 0 0 6.3vw 0; background-color: #fff; position: relative; z-index: 1;}

  .about-sec3-pic-text { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .about-sec3-pic-text img.pic { width: 50%; height: auto;}
  .about-sec3-pic-text .text-con { width: 50%; padding: 7vw 7vw 0 7.6vw; font-size: 1.4vw; font-weight: 500; line-height: 2vw; box-sizing: border-box; }
  .about-sec3-pic-text .text-con span.text-title { color: #149dbe; font-size: 1.9vw;}
  .about-sec3-pic-text .text-con span.text-en { color: #a8a8a8; font-size: 1vw;}

  img.about-sec3-flow { width: 80%; height: auto; padding: 0 0 0 8vw; margin: 6.3vw auto 0 auto; box-sizing: border-box;}


  /************ section #service-sec1 ************/

  section#service-sec1 { clear: both; width: 100%; padding: 5.5vw 0 7vw 8vw; box-sizing: border-box; background-image: url("../images/about_sec1_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  img.service-sec1-title { width: 30.5vw; height: auto; margin: 0 0 2.4vw 9vw;}

  .service-sec1-items { clear: both; width: 54vw; margin: 0 0 0 14vw; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .service-sec1-items .item-box { width: calc(100% / 4); padding: 0 1.5vw; margin: 0 0 2vw 0; box-sizing: border-box;}
  .service-sec1-items .item-box img.item-pic { width: 90%; height: auto; margin: 0 auto;}
  .service-sec1-items .item-box .text-title { clear: both; width: 100%; padding: 0.2vw 0; margin: 0.5vw 0 0 0; color: #fff; font-size: 1.2vw; text-align: center; border-radius: 2vw; background-color: #00395a;}

  .service-sec1-text-con { width: 45vw; margin: 4.2vw 0 0 18vw; font-size: 1.4vw; font-weight: 500; line-height: 2vw; text-align: center;}
  .service-sec1-text-con span.text-title { color: #007d2d; font-size: 1.9vw;}
  .service-sec1-text-con span.text-en { color: #a7a7a7; font-size: 1vw;}


  /************ section #service-sec2 ************/

  section#service-sec2 { clear: both; width: 100%; padding: 0 0 0 8vw; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap; position: relative; z-index: 1;}

  .service-sec2-intro { width: 50%; position: relative; z-index: 1;}
  .service-sec2-intro img.intro-bg { width: 100%; height: auto;}
  .service-sec2-intro .intro-text { width: 100%; padding: 0 4.5vw 3vw 4.5vw; box-sizing: border-box; color: #fff; font-size: 1vw; line-height: 1.8vw; position: absolute; top: 25vw; left: 0; z-index: 2;}
  .service-sec2-intro .intro-text span.text-title { font-size: 1.6vw; font-weight: 500;}


  /************ section #service-sec3 ************/

  section#service-sec3 { clear: both; width: 100%; padding: 6vw 0 6vw 8vw; box-sizing: border-box;}

  .service-sec3-intro { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .service-sec3-intro .intro-text { width: 24vw; padding: 0 4vw 0 4.5vw; box-sizing: border-box; color: #000; font-size: 1vw; line-height: 1.8vw;}
  .service-sec3-intro .intro-text span.text-title { color: #009f3c; font-size: 1.6vw; font-weight: 500;}
  .service-sec3-intro .intro-illu { width: calc(100% - 24vw); padding: 0 10vw 0 0; box-sizing: border-box;}
  .service-sec3-intro .intro-illu img { width: 100%; height: auto;}


  /************ section #service-sec4 ************/

  section#service-sec4 { clear: both; width: 100%; padding: 0 0 0 8vw; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap; position: relative; z-index: 1;}

  .service-sec4-intro-full { width: 100%; position: relative; z-index: 1;}
  .service-sec4-intro-full img.intro-bg { width: 100%; height: auto;}
  .service-sec4-intro-full .intro-text { width: 32vw; padding: 0 4vw 0 4.5vw; box-sizing: border-box; color: #fff; font-size: 1vw; line-height: 1.8vw; position: absolute; top: 8.5vw; left: 0;}
  .service-sec4-intro-full .intro-text span.text-title { font-size: 1.6vw; font-weight: 500;}


  /************ section #case-sec1 ************/

  section#case-sec1 { clear: both; width: 100%; position: relative; z-index: 1;}

  img.case-sec1-bg-top { width: 100%; height: auto; position: relative; z-index: 1;}
  img.case-sec1-title { width: 26.5vw; height: auto; position: absolute; top: 3.5vw; left: 14vw; z-index: 2;}
  
  .case-sec1-text-con { width: 36vw; font-size: 1.4vw; font-weight: 500; line-height: 2vw; position: absolute; top: 12vw; left: 47vw; z-index: 2;}
  .case-sec1-text-con span.text-title { color: #009d3c; font-size: 1.9vw;}
  .case-sec1-text-con span.en-text { color: #a5a5a5; font-size: 1vw;}

  img.case-sec1-illu { width: 50vw; height: auto; position: absolute; top: 21.5vw; right: 10vw; z-index: 2;}


  /************ section #case-sec2 ************/

  section#case-sec2 { clear: both; width: 100%; padding: 0 0 3vw 8vw; box-sizing: border-box; background-image: url("../images/case_bg_bottom.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left bottom; position: relative; z-index: 1;}

  .case-sec2-list-1 { width: 100%; margin: 3vw 0 0 0; display: flex; justify-content: flex-start; align-items: center;}
  .case-sec2-list-1 .photo-bx { width: 55vw; padding: 0 0 0 7vw; box-sizing: border-box; position: relative; z-index: 1;}
  .case-sec2-list-1 .photo-bx img { width: 100%; height: auto;}
  .case-sec2-list-1 .info-bx { width: 23.2vw; margin: 0 0 0 -3.5vw; background-color: #f1f4f5; position: relative; z-index: 2;}
  .case-sec2-list-1 .info-bx a { width: 100%; padding: 6.9vw 0 1.5vw 0; color: #414141; text-decoration: none; display: block;}
  .case-sec2-list-1 .info-bx a:hover { -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}
  .case-sec2-list-1 .info-bx .date { width: 100%; padding: 0.5vw 2.8vw; box-sizing: border-box; color: #f08c1e; font-size: 1.4vw;}
  .case-sec2-list-1 .info-bx .location { width: 100%; padding: 0.5vw 2.8vw; box-sizing: border-box; color: #fff; font-size: 1.8vw; font-weight: 500; background-color: #009d3c;}
  .case-sec2-list-1 .info-bx .type { width: 100%; padding: 0.5vw 2.8vw; box-sizing: border-box; font-size: 1.4vw; line-height: 2.4vw;}

  .case-sec2-list-2-mo { display: none;}
  .case-sec2-list-2 { width: 100%; margin: 3vw 0 0 0; display: flex; justify-content: flex-start; align-items: center;}
  .case-sec2-list-2 .info-bx { width: 23.2vw; margin: 0 0 0 7vw; background-color: #f1f4f5; position: relative; z-index: 2;}
  .case-sec2-list-2 .info-bx a { width: 100%; padding: 6.9vw 0 1.5vw 0; color: #414141; text-decoration: none; display: block;}
  .case-sec2-list-2 .info-bx a:hover { -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}
  .case-sec2-list-2 .info-bx .date { width: 100%; padding: 0.5vw 2.8vw; box-sizing: border-box; color: #f08c1e; font-size: 1.4vw;}
  .case-sec2-list-2 .info-bx .location { width: 100%; padding: 0.5vw 2.8vw; box-sizing: border-box; color: #fff; font-size: 1.8vw; font-weight: 500; background-color: #009d3c;}
  .case-sec2-list-2 .info-bx .type { width: 100%; padding: 0.5vw 2.8vw; box-sizing: border-box; font-size: 1.4vw; line-height: 2.4vw;}
  .case-sec2-list-2 .photo-bx { width: 55vw; padding: 0 7vw 0 0; margin: 0 0 0 -3.5vw; box-sizing: border-box; position: relative; z-index: 1;}
  .case-sec2-list-2 .photo-bx img { width: 100%; height: auto;}


  section#case-progress-sec1 { clear: both; width: 100%; padding: 0 0 3vw 8vw; box-sizing: border-box; background-image: url("../images/about_sec1_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; position: relative; z-index: 1;}

  img.case-progress-login-title-bg-mo { display: none;}
  img.case-progress-login-title-bg { width: 76vw; height: auto; margin: 0 0 0 3.5vw; position: relative; z-index: 1;}

  .case-progress-login-box { width: 30vw; position: absolute; top: 7vw; left: 60vw; z-index: 2;}
  .case-progress-login-box .form-table { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .case-progress-login-box .form-table .caption { width: 6.5vw; padding: 0.3vw 0; margin: 0.4vw 0; color: #00395a; font-size: 2vw; font-weight: 300; border-right: 3px #2bce6f solid;}
  .case-progress-login-box .form-table .column { width: calc(100% - 6.5vw - 3px); padding: 0.3vw 0.5vw; margin: 0.4vw 0; text-align: center; box-sizing: border-box;}
  .case-progress-login-box .form-table .column input[type=text], 
  .case-progress-login-box .form-table .column input[type=password] { width: 100%; padding: 0.5vw; font-size: 1.6vw; border: 0; background-color: #e0e0e0; box-sizing: border-box;}
  .case-progress-login-box .form-confirm { width: 100%; padding: 0.5vw 0; margin: 1vw 0 0 0; background-color: #2bce6f;}
  .case-progress-login-box .form-confirm img.login-bt { width: 6vw; height: auto; margin: 0 auto;}


  /************ section #case-progress-steps ************/

  .banner-box-2 { width: 100%; overflow: hidden; position: relative; z-index: 1;}
  
  img.case-progress-steps-banner { width: 100%; height: auto; position: relative; z-index: 1;}
  img.case-progress-steps-banner-title { width: 25vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}

  section#case-progress-steps { clear: both; width: 100%; padding: 3vw 10vw 0 calc(8vw + 7vw); box-sizing: border-box; background-image: url("../images/case_progress_steps_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; position: relative; z-index: 1;}

  .page-case-progress-steps-title { width: 33.5vw; padding: 1vw 0; margin: 0 0 2.5vw 0; font-size: 2.2vw; font-weight: 500; text-align: center; line-height: 2.2vw; border: 3px #00395a solid;}
  .page-case-progress-steps-title span.title { color: #1a1a1a;}
  .page-case-progress-steps-title span.numbers { color: #bb272d;}

  ul.progress-steps-list { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; position: relative;}
  ul.progress-steps-list li { width: calc(100% / 7); padding: 0; margin: 0; background-image: url("../images/progress_step_line_bg.png"); background-repeat: no-repeat; background-size: auto 0.1vw; background-position: left 0 top 10.2vw; cursor: pointer;}
  ul.progress-steps-list li:first-child { background-position: left 5vw  top 10.2vw;}
  ul.progress-steps-list li:last-child { background-position: right 5vw top 10.2vw;}
  ul.progress-steps-list li.unstep { opacity: 0.5;}
  ul.progress-steps-list li .step-box { width: 100%; padding: 0 1.1vw; box-sizing: border-box;}
  ul.progress-steps-list li .step-box img.icon { width: 6vw; height: auto; margin: 0 auto 0.5vw auto;}
  ul.progress-steps-list li .step-box .sub-title { clear: both; width: 100%; color: #fff; font-size: 1.1vw; text-align: center; border-radius: 1vw; background-color: #00395a;}
  ul.progress-steps-list li .step-box .dot-line { clear: both; width: 3vw; height: 4.5vw; margin: 0 auto; background-image: url("../images/progress_step_dot_line.png"); background-repeat: no-repeat; background-size: 0.2vw auto; background-position: center center; display: flex; justify-content: center; align-items: center; position: relative;}
  ul.progress-steps-list li .step-box .dot-line .dot { width: 1.5vw; height: 1.5vw; border-radius: 100%; background-color: #00395a; display: block;}
  ul.progress-steps-list li .step-box .step-num { clear: both; width: 90%; padding: 0.2vw 0; margin: 0 auto; color: #00395a; font-size: 2vw; font-weight: 500; letter-spacing: -0.1em; line-height: 2vw; text-align: center; border: 3px #00395a solid; border-radius: 1vw;}
  ul.progress-steps-list li.sel .step-box .step-num { clear: both; width: 90%; padding: 0.2vw 0; margin: 0 auto; color: #fff; font-size: 2vw; font-weight: 500; letter-spacing: -0.1em; line-height: 2vw; text-align: center; border: 3px #00395a solid; background-color: #00395a; border-radius: 1vw;}
  ul.progress-steps-list li.sel .step-box .dot-line .dot { width: 1.3vw; height: 1.3vw; border: 0.3vw #2bce6f solid; border-radius: 100%; background-color: #00395a; display: block;}

  .progress-step-content { clear: both; width: 100%; padding: 4vw 3vw; box-sizing: border-box;}
  .progress-step-content div.content { width: 100%; display: none; justify-content: flex-start; align-items: flex-start;}
  .progress-step-content div.content span.comingsoon { font-size: 1.6vw;}
  .progress-step-content div.content .col-left { width: 33vw; padding: 0 6vw 0 0; box-sizing: border-box}
  .progress-step-content div.content .col-left img.step-sofar-title { width: 100%;}
  .progress-step-content div.content .col-left .step-title { width: 100%; padding: 0.5vw 1.5vw; margin: 1vw 0; color: #fff; font-size: 2vw; font-weight: 500; background-color: #e48800; box-sizing: border-box;}
  .progress-step-content div.content .col-left .step-con-list { width: 100%; padding: 1vw 1.5vw; color: #000; font-size: 1.6vw; border-bottom: 1px #939393 solid; box-sizing: border-box;}
  .progress-step-content div.content .col-left .step-con-list span.color-red { color: #bb272d;}
  .progress-step-content div.content .col-left .step-con-list:first-child { border-top: 1px #939393 solid;}
  .progress-step-content div.content .col-left .step-con-list span.dw-bt { font-size: 1.4vw;}
  .progress-step-content div.content .col-left .step-con-list span.dw-bt a { padding: 0.3vw 2vw; color: #fff; text-align: center; text-decoration: none; border-radius: 3vw; background-color: #007d2d;}
  .progress-step-content div.content .col-right { width: calc(100% - 33vw); position: relative;}
  .progress-step-content div.content .col-right img.progress-step-paper, 
  .progress-step-content div.content .col-right img { max-width: 100%; height: auto; border: 1vw #939393 solid; box-sizing: border-box; position: relative; z-index: 2;}
  .progress-step-content div.content .col-right img.step-arrow-ill { width: 16vw; height: auto; border: 0;}


  /************ section #case-details-sec1 ************/

  .case-details-top { width: 100%; padding: 7vw 0 0 0; background-color: #ebebeb;}

  .breadcrumbs-box { clear: both; width: 100%; padding: 1vw 1vw 1vw 9vw; color: #149abb; font-size: 0.8vw; line-height: 1.4vw; box-sizing: border-box;}
  .breadcrumbs-box a { color: #149abb; text-decoration: none;}
  .breadcrumbs-box a:hover { border-bottom: 1px #149abb solid;}

  section#case-details-sec1-mo { display: none;}

  section#case-details-sec1 { clear: both; width: 100%; padding: 0 0 2vw calc(8vw); box-sizing: border-box; background-image: url("../images/case_bg_bottom.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left bottom; display: flex; justify-content: flex-start; align-items: flex-start; position: relative; z-index: 1;}

  .case-details-photo { width: 62vw; padding: 0 3vw 6vw 3vw; box-sizing: border-box;}
  .case-details-photo img.photo { width: 100%; height: auto; padding: 0 0 1vw 0;}

  .case-details-info { width: calc(100% - 62vw);}
  .case-details-info .case-info { width: 100%; position: relative;}
  .case-details-info .case-info img.details-bg { width: 19vw; height: auto; position: relative; z-index: 1;}
  .case-details-info .case-info .info-bx { width: 20vw; position: absolute; top: 3vw; left: 3.5vw; z-index: 2;}
  .case-details-info .case-info .info-bx .date { width: 100%; padding: 0.5vw 0; color: #f08c1e; font-size: 1.4vw;}
  .case-details-info .case-info .info-bx .location { width: 100%; color: #009d3c; font-size: 1.8vw; font-weight: 500;}
  .case-details-info .case-info .info-bx .type { width: 100%; padding: 0.5vw 0; font-size: 1.4vw; line-height: 2.4vw;}
  .case-details-info .case-title { width: 100%; margin: 14vw 0 0 0; position: relative;}
  .case-details-info .case-title img.case-details-title-bg { width: 24vw; height: auto; position: relative; z-index: 1;}
  .case-details-info .case-title .title-bx { width: 24vw; color: #00973c; font-size: 1.2vw; font-weight: 500; position: absolute; top: 1vw; left: 1vw; z-index: 2;}


  /************ section #news-sec1 ************/

  section#news-sec1 { clear: both; width: 100%; padding: 0 0 26vw 0; background-image: url("../images/news_bg_bottom.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: left bottom; position: relative; z-index: 1;}

  img.news-sec1-top-bg { width: 100%; height: auto; position: absolute; top: 0; left: 0; z-index: 1;}

  .news-sec1-con { width: 100%; padding: 1.5vw 0 0 13.5vw; box-sizing: border-box; position: relative; z-index: 2;}
  .news-sec1-con img.news-title { width: 26vw; height: auto;}
  .news-sec1-con ul.news-list { width: 65vw; padding: 2vw 0 0 0; margin: 0 0 0 3vw; list-style: none; display: block;}
  .news-sec1-con ul.news-list li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #2bcf6f solid;}
  .news-sec1-con ul.news-list li a { width: 100%; padding: 1.5vw 0; text-decoration: none; display: flex; justify-content: flex-start; align-items: flex-start;}
  .news-sec1-con ul.news-list li a .icon { width: 13vw;}
  .news-sec1-con ul.news-list li a .icon img.icon-on { width: 5vw; height: auto; margin: 0 auto; display: block;}
  .news-sec1-con ul.news-list li a .icon img.icon-over { display: none;}
  .news-sec1-con ul.news-list li a .date-title { width: calc(100% - 13vw);}
  .news-sec1-con ul.news-list li a .date-title .date { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .news-sec1-con ul.news-list li a .date-title .date .ymd { width: 7vw; color: #f28e1e; font-size: 1.1vw;}
  .news-sec1-con ul.news-list li a .date-title .date .latest { width: 6vw; padding: 0.1vw 0; color: #fff; font-size: 0.9vw; text-align: center; background-color: #008d45;}
  .news-sec1-con ul.news-list li a .date-title .title { width: 100%; padding: 0.5vw 0 0 0; color: #006837; font-size: 1.2vw; font-weight: 500; line-height: 1.4vw;}
  .news-sec1-con ul.news-list li a:hover { background-color: #008d45;}
  .news-sec1-con ul.news-list li a:hover .icon img.icon-on { display: none;}
  .news-sec1-con ul.news-list li a:hover .icon img.icon-over { width: 5vw; height: auto; margin: 0 auto; display: block;}
  .news-sec1-con ul.news-list li a:hover .date-title .date .ymd { color: #fff;}
  .news-sec1-con ul.news-list li a:hover .date-title .date .latest { color: #008d45; background-color: #fff;}
  .news-sec1-con ul.news-list li a:hover .date-title .title { color: #fff;}

  ul.news-page-num { clear: both; width: 65vw; padding: 0; margin: 3vw 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.news-page-num li { padding: 0; margin: 0 0.3vw 0.5vw 0.3vw;}
  ul.news-page-num li a { padding: 0.3vw; color: #008d45; font-size: 1.1vw; text-decoration: none; display: block;}
  ul.news-page-num li a:hover { color: #fff; background-color: #008d45;}
  ul.news-page-num li a.sel { color: #fff; background-color: #008d45;}


  /************ section #news-content-sec1 ************/

  section#news-content-sec1 { clear: both; width: 100%; padding: 0 0 20vw 8vw; box-sizing: border-box; background-image: url("../images/news_bg_bottom.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: left bottom; position: relative; z-index: 1;}

  .news-con-title { width: 100%; padding: 1.5vw 0 0 5vw; box-sizing: border-box; position: relative; z-index: 1;}
  .news-con-title img.news-con-title-bg { width: 26.5vw; height: auto; position: relative; z-index: 1;}
  .news-con-title .date { width: 6vw; color: #f28e1e; font-size: 1.6vw; position: absolute; top: 6.4vw; left: 8vw; z-index: 2;}
  .news-con-title .latest { width: 8vw; padding: 0.1vw 0; color: #fff; font-size: 1.4vw; text-align: center; background-color: #008d45; position: absolute; top: 6.5vw; left: 17vw; z-index: 2;}
  .news-con-title .title { width: 69vw; color: #000; font-size: 1.6vw; font-weight: 500; line-height: 2vw; position: absolute; top: 16.3vw; left: 7.8vw; z-index: 2;}

  .news-con-text { clear: both; width: 69vw; margin: 2vw 0 0 7.8vw; font-size: 1.2vw; line-height: 2vw; word-break: break-all;}
  .news-con-text a { color: #414141; text-decoration: none; border-bottom: 1px #414141 solid;}
  .news-con-text a:hover { color: #008d45; border-bottom: 1px #008d45 solid;}
  .news-con-text img { max-width: 100%; height: auto;}

  .news-con-goback { clear: both; width: 69vw; margin: 3.5vw 0 0 7.8vw; display: flex; justify-content: center; align-items: flex-end;}
  .news-con-goback .prev-news, 
  .news-con-goback .next-news { width: 22vw; position: relative;}
  .news-con-goback .prev-news img, 
  .news-con-goback .next-news img { width: 100%; height: auto; position: relative; z-index: 1;}
  .news-con-goback .prev-news a { color: #00973c; font-size: 1.2vw; text-decoration: none; display: block; position: absolute; bottom: 0.5vw; right: 0; z-index: 2;}
  .news-con-goback .next-news a { color: #00973c; font-size: 1.2vw; text-decoration: none; display: block; position: absolute; bottom: 0.5vw; left: 0; z-index: 2;}
  .news-con-goback .prev-news a:hover, 
  .news-con-goback .next-news a:hover { color: #f28e1e;}
  .news-con-goback .goback { width: 11.5vw; margin: 0 5vw;}
  .news-con-goback .goback a { width: 100%; padding: 0.5vw 0; color: #fff; font-size: 1.1vw; text-align: center; text-decoration: none; border-radius: 6vw; background-color: #00973c; display: block;}
  .news-con-goback .goback a:hover { background-color: #f28e1e;}


  /************ section #knowledge-qa-sec1 ************/

  section#knowledge-qa-sec1 { clear: both; width: 100%; padding: 6vw 0 2.5vw 8vw; box-sizing: border-box; background-image: url("../images/about_sec1_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left top; position: relative; z-index: 1;}

  .knowledge-qa-title { width: 100%; position: relative; z-index: 1;}
  .knowledge-qa-title img.kn-qa-title { width: 52vw; height: auto; margin: 0 0 0 19vw; position: relative; z-index: 2;}
  .knowledge-qa-title img.kn-qa-illu { width: 30vw; height: auto; margin: -18.5vw 0 0 10.5vw; position: relative; z-index: 1;}
  .knowledge-qa-title .kn-qa-title { width: 24vw; margin: -4.2vw 0 0 11vw; position: relative; z-index: 3;}
  .knowledge-qa-title .kn-qa-title span.title-cn { color: #0bb2ab; font-size: 2vw; font-weight: 500;}
  .knowledge-qa-title .kn-qa-title span.text-en { color: #a7a7a7; font-size: 1.3vw;}

  ul.knowledge-qa-list { width: 100%; padding: 0; margin: 1vw 0 0 0; list-style: none; display: block; position: relative; z-index: 1;}
  ul.knowledge-qa-list li { width: 100%; padding: 1vw 13vw 1vw 11vw; margin: 0; font-size: 1.1vw; line-height: 2vw; box-sizing: border-box;}
  ul.knowledge-qa-list li:nth-child(even) { background-color: rgba(135,193,63,0.2);}
  ul.knowledge-qa-list li .kn-qa-q { width: 100%; padding: 0 0 10px 0; display: flex; justify-content: space-between; align-items: flex-start; cursor: pointer;}
  ul.knowledge-qa-list li .kn-qa-q span.icon-close { display: none;}
  ul.knowledge-qa-list li .kn-qa-a { width: 100%; padding: 10px 0 0 0; border-top: 1px #006837 dashed; display: none;}
  ul.knowledge-qa-list li span.title { font-size: 1.2vw; font-weight: 500;}
  ul.knowledge-qa-list li .kn-qa-a a { color: #006837; border-bottom: 1px #006837 dashed; text-decoration: none;}


  /************ section #knowledge-article-sec1 ************/

  section#knowledge-article-sec1 { clear: both; width: 100%; padding: 3.5vw 0 3.5vw 8vw; box-sizing: border-box; background-image: url("../images/kn_article_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left top; position: relative; z-index: 1;}

  .knowledge-art-title { width: 100%; position: relative; z-index: 2;}
  .knowledge-art-title img.kn-art-title { width: 54vw; height: auto; margin: 0 0 0 27.5vw; position: relative; z-index: 1;}
  .knowledge-art-title img.kn-art-top-illu { width: 85vw; height: auto; margin: -7.5vw 0 0 0; position: relative; z-index: 2;}

  .knowledge-art-list { width: 85vw; padding: 0 2vw 3vw 2vw; margin: -20vw 0 0 0; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; position: relative; z-index: 2;}
  .knowledge-art-list .kn-art-list-title { width: 100%; margin: 0 auto 5vw auto; text-align: center;}
  .knowledge-art-list .kn-art-list-title span.title-cn { color: #008d45; font-size: 2vw; font-weight: 500;}
  .knowledge-art-list .kn-art-list-title span.text-en { color: #a7a7a7; font-size: 1.3vw;}
  .knowledge-art-list .article-box { width: calc(100% / 3); padding: 1vw; margin: 0 0 1vw 0; box-sizing: border-box;}
  .knowledge-art-list .article-box a { width: 100%; color: #000; text-decoration: none;}
  .knowledge-art-list .article-box a img.article-pic { width: 100%; height: auto;}
  .knowledge-art-list .article-box a:hover { color: #008d45;}
  .knowledge-art-list .article-box a .text-title { width: 100%; padding: 0.3vw 0 0 0; font-size: 1.4vw; font-weight: 500; text-align: center;}


  .kn-article-con-title { width: 100%; padding: 1.5vw 0 0 5vw; box-sizing: border-box; position: relative; z-index: 1;}
  .kn-article-con-title img.news-con-title-bg { width: 26.5vw; height: auto; position: relative; z-index: 1;}
  .kn-article-con-title .date { width: 6vw; color: #f28e1e; font-size: 1.6vw; position: absolute; top: 6.4vw; left: 8vw; z-index: 2;}
  .kn-article-con-title .latest { width: 10.5vw; padding: 0.1vw 0; color: #fff; font-size: 1.4vw; text-align: center; background-color: #008d45; position: absolute; top: 6.5vw; left: 17vw; z-index: 2;}
  .kn-article-con-title .title { width: 69vw; color: #000; font-size: 1.6vw; font-weight: 500; line-height: 2vw; position: absolute; top: 16.3vw; left: 7.8vw; z-index: 2;}

  .kn-article-con-text { clear: both; width: 69vw; margin: 2vw 0 0 7.8vw; font-size: 1.2vw; line-height: 2vw; word-break: break-all;}
  .kn-article-con-text a { color: #414141; text-decoration: none; border-bottom: 1px #414141 solid;}
  .kn-article-con-text a:hover { color: #008d45; border-bottom: 1px #008d45 solid;}
  .kn-article-con-text img { max-width: 100%; height: auto;}


  /************ section #contact-sec1 ************/
  
  section#contact-sec1 { clear: both; width: 100%; background-image: url("../images/about_sec1_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  img.contact-sec1-title-illu { width: 58.5vw; height: auto; margin: 0 0 0 15.5vw; position: relative; z-index: 1;}
  img.contact-sec1-title-illu-2 { width: 100%; height: auto; margin: -39.5vw 0 0 0; position: relative; z-index: 2;}

  .contact-info { width: 28vw; position: absolute; bottom: 4vw; right: 14vw; z-index: 3;}
  .contact-info .logo-social { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .contact-info .logo-social img.logo { width: 19.5vw; height: auto; margin: 0 1vw 0 0;}
  .contact-info .logo-social img.social-icon { width: 2vw; height: auto; margin: 0 0.2vw;}
  .contact-info .addr-tel { width: 100%; padding: 1.5vw 0 0 0.5vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .contact-info .addr-tel .caption { width: 1.5vw; color: #00a63c; font-size: 1.4vw;}
  .contact-info .addr-tel .info { width: calc(100% - 1.5vw); padding: 0.4vw 0 0 0; color: #717071; font-size: 1.2vw; line-height: 1.2vw;}
  .contact-info .addr-tel .info { width: calc(100% - 1.5vw); color: #717071;}
  .contact-info .addr-tel .info span.addr { color: #231815; font-size: 1.2vw; font-weight: 500;}
  .contact-info .addr-tel .info span.addr-en { padding: 0.5vw 0 0 0; font-size: 1vw; display: block;}


  /************ section #contact-sec2 ************/

  section#contact-sec2 { clear: both; width: 100%; padding: 2.5vw 0 2.5vw 8vw; box-sizing: border-box; background-color: #149cbd;}

  .contact-sec2-con { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .contact-sec2-con img.contact-sec2-title { width: 26vw; height: auto; margin: -5vw 0 0 2.7vw;}
  .contact-sec2-con .contact-form { width: 45vw; margin: 0 0 0 4.4vw; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .contact-sec2-con .contact-form .caption { width: 6vw; padding: 0 0 1vw 0; color: #fff; font-size: 1.1vw;}
  .contact-sec2-con .contact-form .column { width: calc(100% - 6vw); padding: 0 0 0.8vw 0; color: #fff; font-size: 1.1vw; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .contact-sec2-con .contact-form .column input[type=text], 
  .contact-sec2-con .contact-form .column input[type=tel], 
  .contact-sec2-con .contact-form .column input[type=email] { width: 100%; padding: 0.3vw 0.5vw; color: #414141; font-size: 1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #fff; box-sizing: border-box;}
  .contact-sec2-con .contact-form .column input[type=radio] { position: absolute; opacity: 0;}
  .contact-sec2-con .contact-form .column input[type="radio"] + .radio-label:before { content: ''; background: #149cbd; border-radius: 100%; border: 0.1vw solid #fff; display: inline-block; width: 1.1vw; height: 1.1vw; position: relative; top: 0.2vw; margin-right: 0.5vw; vertical-align: top; cursor: pointer; text-align: center;}
  .contact-sec2-con .contact-form .column input[type="radio"]:checked + .radio-label:before { background-color: #fff; box-shadow: inset 0 0 0 0.25vw #149cbd;}
  .contact-sec2-con .contact-form .column input[type="radio"]:focus + .radio-label:before {outline: none; border-color: #fff;}
  .contact-sec2-con .contact-form .column input[type="radio"]:disabled + .radio-label:before { box-shadow: inset 0 0 0 4px #fff; border-color: #fff; background: #fff;}
  .contact-sec2-con .contact-form .column input[type="radio"] + .radio-label:empty:before { margin-right: 0;}
  .contact-sec2-con .contact-form .column textarea { width: 100%; height: 6vw; padding: 0.3vw 0.5vw; color: #414141; font-size: 1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #fff; box-sizing: border-box;}
  .contact-sec2-con .contact-form .column-bt { clear: both; width: 100%; padding: 0.5vw 0 0 0; display: flex; justify-content: flex-end;}
  .contact-sec2-con .contact-form .column-bt .form-submit { width: 12vw;}
  .contact-sec2-con .contact-form .column-bt .form-submit a { width: 100%; padding: 0.3vw 0; color: #fff; font-size: 1.4vw; text-align: center; text-decoration: none; border-radius: 3vw; background-color: #87c13f; display: block;}
  .contact-sec2-con .contact-form .column-bt .form-submit a:hover { background-color: #00973c;}


  /************ section #contact-sec3 ************/

  section#contact-sec3 { clear: both; width: 100%; padding: 0 0 0 8vw; box-sizing: border-box;}

  iframe { width: 100%; height: 24vw; padding: 0; margin: 0; border: 0;}


  /************ #sitemap ************/

  ul#sitemap { clear: both; width: 69vw; padding: 4vw 0; margin: 0 0 0 7.8vw; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; position: relative; z-index: 2;}
  ul#sitemap li { width: calc(100% / 6); padding: 0; margin: 0;}
  ul#sitemap li a { width: 100%; color: #f28e1e; font-size: 1.4vw; font-weight: 500; text-align: center; text-decoration: none; border-bottom: 2px #f28e1e solid; display: block;}
  ul#sitemap li a:hover { color: #00973c;}
  ul#sitemap li ul.sitemap-popup { width: 100%; padding: 1vw 0 0 0; margin: 0; list-style: none; display: block;}
  ul#sitemap li ul.sitemap-popup li { width: 100%; padding: 0.5vw 0; margin: 0;}
  ul#sitemap li ul.sitemap-popup li a { width: 100%; color: #666; font-size: 1.2vw; text-align: center; text-decoration: none; border-bottom: 0; display: block;}
  ul#sitemap li ul.sitemap-popup li a:hover { color: #f28e1e;}


  /************ 404 ************/

  .error-404 { clear: both; width: 69vw; padding: 4vw 0; margin: 0 0 0 7.8vw; text-align: center; position: relative; z-index: 2;}
  .error-404 span.text-con-1 { font-size: 4vw; font-weight: 700; line-height: 8vw;}
  .error-404 span.text-con-2 { font-size: 3vw; font-weight: 500;}


  /************ footer ************/

  footer { clear: both; width: 100%; padding: 0 0 0 8vw; box-sizing: border-box;}

  .footer-top { width: 100%; padding: 2vw 6vw 2vw 0; box-sizing: border-box; background-color: #333; display: flex; justify-content: flex-start; align-items: center;}
  .footer-top ul.footer-nav { width: calc(100% - 8.5vw); padding: 0 6vw; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: center; align-items: stretch;}
  .footer-top ul.footer-nav li { width: calc(100% / 7); padding: 0; margin: 0; text-align: center; border-right: 1px #f38f1e solid; box-sizing: border-box;}
  .footer-top ul.footer-nav li:first-child { border-left: 1px #f38f1e solid;}
  .footer-top ul.footer-nav li a { color: #fff; font-size: 1.3vw; font-weight: 500; text-decoration: none;}
  .footer-top ul.footer-nav li a:hover { border-bottom: 1px #fff solid;}
  .footer-top ul.footer-nav li ul.footer-nav-popup { width: 100%; padding: 0.5vw 0 0 0; margin: 0; list-style: none; display: block;}
  .footer-top ul.footer-nav li ul.footer-nav-popup li { clear: both; width: 100%; padding: 0; margin: 0; line-height: 1.8vw; text-align: center; border: 0;}
  .footer-top ul.footer-nav li ul.footer-nav-popup li a { color: #fff; font-size: 1vw; font-weight: 400; text-decoration: none;}
  .footer-top ul.footer-nav li ul.footer-nav-popup li a:hover { border-bottom: 1px #fff solid;}
  .footer-top .footer-logo { width: 8.5vw;}
  .footer-top .footer-logo img { width: 100%; height: auto;}

  .footer-copyright { clear: both; width: 100%; padding: 0.5vw 0; box-sizing: border-box; color: #000; line-height: 1.2vw; text-align: center; background-color: #f38f1e;}
  .footer-copyright span.info { padding: 0 1vw; font-size: 1vw; font-weight: 500;}
  .footer-copyright span.copyright { padding: 0 1vw; font-size: 0.8vw;}
  .footer-copyright span.sitemap { padding: 0 1vw; font-size: 1vw; font-weight: 500;}
  .footer-copyright a { color: #000; text-decoration: none;}
  .footer-copyright a:hover { border-bottom: 1px #000 solid;}
  

}

@media screen and (min-width: 1024px) and (max-width: 1369px) {

  /************ aside(left) ************/

  aside { width: 8vw; height: 100%; background-color: rgba(255,255,255,0.9); position: fixed; top: 0; left: 0; z-index: 10;}

  aside .logo-slogan { width: 100%; height: calc(100% - 10vw); padding: 1.5vw 2.4vw 0 2.4vw; box-sizing: border-box;}
  aside .logo-slogan img.logo-img { width: 100%; height: auto; margin: 0 0 1.5vw 0;}
  aside .logo-slogan img.logo-img-mo { display: none;}
  aside .logo-slogan img.slogan-img { width: 1.6vw; height: auto; margin: 0 auto;}
  aside .tel-box { width: 8vw; height: 5vw; padding: 0.8vw 0 0 0; box-sizing: border-box; color: #fff; font-size: 0.8vw; text-align: center; background-color: #00a63c; cursor: pointer;}
  aside .tel-box a { color: #fff; text-decoration: none;}
  aside .tel-box img.icon { width: 2.2vw; height: auto; margin: 0 auto;}
  aside .address-box { width: 8vw; height: 5vw; padding: 0.8vw 0 0 0; box-sizing: border-box; color: #fff; font-size: 0.8vw; text-align: center; background-color: #f29600; cursor: pointer;}
  aside .address-box a { color: #fff; text-decoration: none;}
  aside .address-box img.icon { width: 1.4vw; height: auto; margin: 0 auto;}


  /************ #side-bar ************/

  #side-bar { width: 3vw; position: fixed; top: 16vw; right: 2.5vw; z-index: 10;}
  #side-bar .inquiry-online { width: 100%; background-color: #eee;}
  #side-bar .inquiry-online a { width: 100%; padding: 1vw 0.8vw; box-sizing: border-box; color: #000; font-size: 1.2vw; font-weight: 500; line-height: 1.3vw; text-align: center; text-decoration: none; display: block;}
  #side-bar .social-icon { width: 3vw; height: 3vw; padding: 0 0.5vw; box-sizing: border-box; background-color: #008645;}
  #side-bar .social-icon a { width: 100%; height: 100%; text-decoration: none; border-bottom: 1px #006837 solid; box-sizing: border-box; display: block; display: flex; justify-content: center; align-items: center; cursor: pointer;}
  #side-bar .social-icon a img { width: 1.5vw; height: auto;}
  #side-bar .social-icon:last-child a { border-bottom: 0;}


  /************ header + nav ************/

  header#nav-top-1 { width: 100%; position: absolute; top: 0; left: 0; z-index: 2;}

  header#nav-top-1 nav#mo { display: none;}
  header#nav-top-1 nav#pc { width: 100%;}
  header#nav-top-1 nav#pc ul.nav-menu { width: 100%; padding: 1.8vw 0 0 11vw; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: flex-start; align-items: flex-start;}
  header#nav-top-1 nav#pc ul.nav-menu li { padding: 0 1.2vw; margin: 0; position: relative;}
  header#nav-top-1 nav#pc ul.nav-menu li a { width: 7vw; color: #fff; font-size: 1.2vw; font-weight: 500; text-align: center; text-decoration: none; display: block; cursor: pointer;}
  header#nav-top-1 nav#pc ul.nav-menu li a img.arrow { width: 100%; height: auto; margin: 0.5vw 0 0 0; display: none;}
  /*header#nav-top-1 nav#pc ul.nav-menu li a:hover img.arrow { display: block; animation: fadeIn 2s;}*/
  header#nav-top-1 nav#pc ul.nav-menu li a.sel img.arrow { display: block; animation: fadeIn 2s;}
  header#nav-top-1 nav#pc ul.nav-menu li ul.nav-memu-popup { width: 10vw; padding: 4.5vw 0 1vw 0; margin: 0; box-sizing: border-box; background-color: rgba(255,255,255,0.2); list-style: none; display: none; position: absolute; top: -0.5vw; left: calc(50% - 5vw); z-index: 999;}
  header#nav-top-1 nav#pc ul.nav-menu li ul.nav-memu-popup li { width: 100%; padding: 0; margin: 0;}
  header#nav-top-1 nav#pc ul.nav-menu li ul.nav-memu-popup li a { width: 100%; padding: 0.5vw 0; color: #fff; font-size: 1.1vw; font-weight: 500; text-align: center; text-decoration: none; display: block;}
  header#nav-top-1 nav#pc ul.nav-menu li ul.nav-memu-popup li a:hover { color: #444; background-color: rgba(255,255,255,06);}


  header#nav-top-2 { width: 100%; position: absolute; top: 0; left: 0; z-index: 2;}

  header#nav-top-2 nav#mo { display: none;}  
  header#nav-top-2 nav#pc { width: 100%;}  
  header#nav-top-2 nav#pc ul.nav-menu { width: 100%; padding: 1.8vw 0 0 11vw; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: flex-start; align-items: flex-start;}
  header#nav-top-2 nav#pc ul.nav-menu li { padding: 0 1.2vw; margin: 0; position: relative;}
  header#nav-top-2 nav#pc ul.nav-menu li a { width: 7vw; color: #4d4d4d; font-size: 1.2vw; font-weight: 500; text-align: center; text-decoration: none; display: block;}
  header#nav-top-2 nav#pc ul.nav-menu li a img.arrow { width: 100%; height: auto; margin: 0.5vw 0 0 0; display: none;}
  /*header#nav-top-2 nav#pc ul.nav-menu li a:hover img.arrow { display: block; animation: fadeIn 2s;}*/
  header#nav-top-2 nav#pc ul.nav-menu li a.sel img.arrow {display: block; animation: fadeIn 2s;}
  header#nav-top-2 nav#pc ul.nav-menu li ul.nav-memu-popup { width: 10vw; padding: 4.5vw 0 1vw 0; margin: 0; box-sizing: border-box; background-color: rgba(0,0,0,0.2); list-style: none; display: none; position: absolute; top: -0.5vw; left: calc(50% - 5vw); z-index: 999;}
  header#nav-top-2 nav#pc ul.nav-menu li ul.nav-memu-popup li { width: 100%; padding: 0; margin: 0;}
  header#nav-top-2 nav#pc ul.nav-menu li ul.nav-memu-popup li a { width: 100%; padding: 0.5vw 0; color: #444; font-size: 1.1vw; font-weight: 500; text-align: center; text-decoration: none; display: block;}
  header#nav-top-2 nav#pc ul.nav-menu li ul.nav-memu-popup li a:hover { color: #fff; background-color: rgba(0,0,0,0.6);}

  img.header-top-2-illu { width: 26vw; height: auto; position: absolute; top: 2.5vw; right: 0;}


  img.header-fb-icon { width: 2vw; height: auto; position: absolute; top: 1.7vw; right: 20vw;}


  /************ index banner ************/
  
  .banner-box { width: 100%; height: 100%; max-height: 50vw; overflow: hidden; position: relative; z-index: 1;}
  .banner-box img { width: 100%; height: auto;}

  img.banner-illu-1 { width: 18vw; height: auto; position: absolute; top: 2.5vw; right: 0; z-index: 2;}
  img.banner-illu-2 { width: 70vw; height: auto; position: absolute; bottom: 2vw; left: calc(8vw + 2vw); z-index: 2;}
  img.banner-illu-3 { width: 32vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}


  /************ section #index-sec1 ************/

  section#index-sec1 { clear: both; width: 100%; position: relative; z-index: 1;}

  img.index-sec1-bg { width: 100%; height: auto;}
  img.index-sec1-title { width: 19.2vw; height: auto; position: absolute; top: 6vw; left: 12.5vw;}
  img.index-sec1-photo { width: 39vw; height: auto; position: absolute; top: 6vw; right: 10.4vw;}

  .index-sec1-item { width: 28vw; display: flex; justify-content: flex-start; align-items: flex-start;}
  .index-sec1-item.item-1 { position: absolute; top: 28vw; left: 33vw;}
  .index-sec1-item.item-2 { position: absolute; top: 36vw; left: 25.5vw;}
  .index-sec1-item.item-3 { position: absolute; top: 43.5vw; left: 19vw;}
  .index-sec1-item.item-4 { position: absolute; top: 51vw; left: 12.4vw;}
  .index-sec1-item.item-5 { position: absolute; top: 5vw; right: 8.4vw;}
  .index-sec1-item img.item-num { width: 4.2vw; height: auto;}
  .index-sec1-item .item-text { width: calc(100% - 4.2vw); padding: 2.4vw 0 0 1.3vw; box-sizing: border-box; font-size: 1vw; font-weight: 500; line-height: 1.5vw;}
  .index-sec1-item .item-text span.title { color: #e78b00; font-size: 1.6vw; font-weight: 500;}


  /************ section #index-sec2 ************/

  section#index-sec2 { clear: both; width: 100%; position: relative; z-index: 1;}

  img.index-sec2-bg { width: 100%; height: auto;}
  img.index-sec2-photo { width: 52vw; height: auto; position: absolute; top: 2.6vw; left: 8vw;}

  .index-sec2-item { width: 26vw; display: flex; justify-content: flex-start; align-items: flex-start;}
  .index-sec2-item.item-5 { position: absolute; top: 5vw; right: 8.4vw;}
  .index-sec2-item img.item-num { width: 4.2vw; height: auto;}
  .index-sec2-item .item-text { width: calc(100% - 4.2vw); padding: 2.4vw 0 0 1.3vw; box-sizing: border-box; font-size: 1vw; font-weight: 500; line-height: 1.5vw;}
  .index-sec2-item .item-text span.title { color: #e78b00; font-size: 1.6vw; font-weight: 500;}

  img.index-sec2-title { width: 53vw; height: auto; position: absolute; top: 29vw; left: 11.5vw;}
  img.index-sec2-illu { width: 52vw; height: auto; position: absolute; top: 44vw; right: 11.5vw;}

  .index-sec2-text { width: 35.5vw; font-size: 1.4vw; font-weight: 500; line-height: 2vw; position: absolute; top: 52.5vw; left: 14.6vw;}
  .index-sec2-text span.en-text { color: #a8a8a8; font-size: 1vw;}
  .index-sec2-text span.slogan-text { color: #007d2d;}

  .index-sec2-more-bt { width: 21vw; border-radius: 3vw; background-color: #009a3c; position: absolute; bottom: 2.5vw; left: calc(50% - 10.5vw); overflow: hidden;}
  .index-sec2-more-bt a { width: 100%; padding: 0.8vw 2vw; color: #fff; font-size: 1.4vw; font-weight: 500; text-decoration: none; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}


  /************ section #index-sec3 ************/

  section#index-sec3 { clear: both; width: 100%; padding: 0 0 2vw 0; position: relative; z-index: 1;}

  img.index-sec3-title { width: 26vw; height: auto; margin: 0 auto; position: relative; z-index: 2;}
 
  .index-sec3-case-photos { clear: both; width: 100%; padding: 0 0 0 8vw; margin: 1vw 0 0 0; box-sizing: border-box; overflow: hidden; position: relative; z-index: 2;}
  .index-sec3-case-photos img { width: calc(100% - 2vw); height: auto; margin: 0 1vw;}
  .index-sec3-case-photos .photo-text { width: 100%; padding: 0.5vw 0 2vw 0; font-size: 1.3vw; font-weight: 500; line-height: 2vw; text-align: center;}
  .index-sec3-case-photos .photo-text span.case-name { color: #00395a; font-size: 1.5vw; font-weight: 500;}

  .index-sec3-photos-bg { width: 100%; height: 30vw; background-color: rgba(136,194,63,0.3); display: block; position: absolute; bottom: 0; left: 0; z-index: 1;}


  /************ section #index-sec4 ************/

  section#index-sec4 { clear: both; width: 100%; position: relative; z-index: 1;}

  img.index-sec4-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  img.index-sec4-title { width: 26vw; height: auto; position: absolute; top: 5vw; left: 10vw; z-index: 2;}

  .index-sec4-items-box { width: 54vw; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; position: absolute; top: 18vw; left: 10vw; z-index: 2;}
  .index-sec4-items-box .item-box { width: calc(100% / 4); padding: 0 3vw 0 0; margin: 0 0 2vw 0; box-sizing: border-box;}
  .index-sec4-items-box .item-box img.icon { width: 90%; height: auto; margin: 0 auto;}
  .index-sec4-items-box .item-box .text-title { clear: both; width: 100%; padding: 0.2vw 0; margin: 1vw 0 0 0; color: #fff; font-size: 1.2vw; text-align: center; border-radius: 2vw; background-color: #00395a;}

  .index-sec4-text-con { width: 50vw; font-size: 1.4vw; font-weight: 500; line-height: 2vw; position: absolute; top: 49vw; left: 10vw; z-index: 2;}
  .index-sec4-text-con span.en-text { color: #fff; font-size: 1vw;}
  .index-sec4-text-con span.title-text { color: #007d2d; font-size: 1.6vw;}

  .index-sec4-more-bt { width: 21vw; border-radius: 3vw; background-color: #009a3c; position: absolute; bottom: 4.5vw; left: 10vw; z-index: 2; overflow: hidden;}
  .index-sec4-more-bt a { width: 100%; padding: 0.8vw 2vw; color: #fff; font-size: 1.4vw; font-weight: 500; text-decoration: none; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}


  /************ section #index-sec5 ************/

  section#index-sec5 { clear: both; width: 100%; position: relative; z-index: 1;}

  img.index-sec5-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  img.index-sec5-title { width: 27vw; height: auto; position: absolute; top: 3vw; left: 14vw; z-index: 2;}

  .index-sec5-text-con { width: 40vw; font-size: 1.4vw; font-weight: 500; line-height: 2vw; position: absolute; top: 26vw; left: 18vw; z-index: 2;}
  .index-sec5-text-con span.en-text { color: #a9a9a9; font-size: 1vw;}
  .index-sec5-text-con span.title-text { color: #007d2d; font-size: 1.6vw;}

  .index-sec5-more-bt { width: 21vw; border-radius: 3vw; background-color: #009a3c; position: absolute; top: 30vw; right: 15vw; z-index: 2; overflow: hidden;}
  .index-sec5-more-bt a { width: 100%; padding: 0.8vw 2vw; color: #fff; font-size: 1.4vw; font-weight: 500; text-decoration: none; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}


  /************ page banner ************/

  img.page-banner-illu-2 { width: 81vw; height: auto; position: absolute; bottom: 2vw; left: calc(8vw + 2vw); z-index: 2;}
  img.about-banner-title { width: 36vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.service-banner-title { width: 42vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.case-banner-title { width: 44vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.case-progress-banner-title { width: 46vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.news-banner-title { width: 37vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.knowledge-banner-title { width: 64vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.contact-banner-title { width: 64vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}


  /************ section #about-sec1 ************/

  section#about-sec1 { clear: both; width: 100%; padding: 0 0 15vw 0; position: relative; z-index: 1;}

  img.about-sec1-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  img.about-sec1-title { width: 53vw; height: auto; position: absolute; top: 5vw; left: 17vw; z-index: 3;}
  img.about-sec1-illu { width: 61vw; height: auto; position: absolute; top: 20vw; left: 30vw; z-index: 2;}

  .about-sec1-text-con { width: 28vw; font-size: 1.4vw; font-weight: 500; line-height: 2vw; position: absolute; top: 29vw; left: 20vw; z-index: 2;}
  .about-sec1-text-con span.text-title { color: #0bb3ac; font-size: 1.9vw;}
  .about-sec1-text-con span.en-text { color: #a8a8a8; font-size: 1vw;}


  /************ section #about-sec2 ************/

  section#about-sec2 { clear: both; width: 100%; padding: 4vw 0 2.5vw 8vw; box-sizing: border-box; background-color: rgba(124,223,20,0.2); position: relative; z-index: 1;}

  .about-sec2-item-row { width: 100%; display: flex; justify-content: center; align-items: center;}
  .about-sec2-item-row img.item-icon { width: 9vw; height: auto; margin: 0 4.5vw;}

  .about-sec2-slogan { width: 100%; color: #1a1a1a; font-size: 2.5vw; font-weight: 500; line-height: 5.5vw; letter-spacing: 0.1em; text-align: center;}
  .about-sec2-slogan-mo { display: none;}

  .about-sec2-title { width: 100%; margin: 2vw 0 0 0; text-align: center;}
  .about-sec2-title span.text-title { color: #149dbe; font-size: 1.9vw; font-weight: 500; line-height: 2.5vw}
  .about-sec2-title span.text-en { color: #a8a8a8; font-size: 1vw;}


  /************ section #about-sec3 ************/

  section#about-sec3 { clear: both; width: 100%; padding: 0 0 6.3vw 0; background-color: #fff; position: relative; z-index: 1;}

  .about-sec3-pic-text { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .about-sec3-pic-text img.pic { width: 50%; height: auto;}
  .about-sec3-pic-text .text-con { width: 50%; padding: 7vw 7vw 0 7.6vw; font-size: 1.4vw; font-weight: 500; line-height: 2vw; box-sizing: border-box; }
  .about-sec3-pic-text .text-con span.text-title { color: #149dbe; font-size: 1.9vw;}
  .about-sec3-pic-text .text-con span.text-en { color: #a8a8a8; font-size: 1vw;}

  img.about-sec3-flow { width: 80%; height: auto; padding: 0 0 0 8vw; margin: 6.3vw auto 0 auto; box-sizing: border-box;}


  /************ section #service-sec1 ************/

  section#service-sec1 { clear: both; width: 100%; padding: 5.5vw 0 7vw 8vw; box-sizing: border-box; background-image: url("../images/about_sec1_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  img.service-sec1-title { width: 30.5vw; height: auto; margin: 0 0 2.4vw 9vw;}

  .service-sec1-items { clear: both; width: 54vw; margin: 0 0 0 14vw; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .service-sec1-items .item-box { width: calc(100% / 4); padding: 0 1.5vw; margin: 0 0 2vw 0; box-sizing: border-box;}
  .service-sec1-items .item-box img.item-pic { width: 90%; height: auto; margin: 0 auto;}
  .service-sec1-items .item-box .text-title { clear: both; width: 100%; padding: 0.2vw 0; margin: 0.5vw 0 0 0; color: #fff; font-size: 1.2vw; text-align: center; border-radius: 2vw; background-color: #00395a;}

  .service-sec1-text-con { width: 45vw; margin: 4.2vw 0 0 18vw; font-size: 1.4vw; font-weight: 500; line-height: 2vw; text-align: center;}
  .service-sec1-text-con span.text-title { color: #007d2d; font-size: 1.9vw;}
  .service-sec1-text-con span.text-en { color: #a7a7a7; font-size: 1vw;}


  /************ section #service-sec2 ************/

  section#service-sec2 { clear: both; width: 100%; padding: 0 0 0 8vw; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap; position: relative; z-index: 1;}

  .service-sec2-intro { width: 50%; position: relative; z-index: 1;}
  .service-sec2-intro img.intro-bg { width: 100%; height: auto;}
  .service-sec2-intro .intro-text { width: 100%; padding: 0 4.5vw 3vw 4.5vw; box-sizing: border-box; color: #fff; font-size: 1vw; line-height: 1.8vw; position: absolute; top: 25vw; left: 0; z-index: 2;}
  .service-sec2-intro .intro-text span.text-title { font-size: 1.6vw; font-weight: 500;}


  /************ section #service-sec3 ************/

  section#service-sec3 { clear: both; width: 100%; padding: 6vw 0 6vw 8vw; box-sizing: border-box;}

  .service-sec3-intro { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .service-sec3-intro .intro-text { width: 24vw; padding: 0 4vw 0 4.5vw; box-sizing: border-box; color: #000; font-size: 1vw; line-height: 1.8vw;}
  .service-sec3-intro .intro-text span.text-title { color: #009f3c; font-size: 1.6vw; font-weight: 500;}
  .service-sec3-intro .intro-illu { width: calc(100% - 24vw); padding: 0 10vw 0 0; box-sizing: border-box;}
  .service-sec3-intro .intro-illu img { width: 100%; height: auto;}


  /************ section #service-sec4 ************/

  section#service-sec4 { clear: both; width: 100%; padding: 0 0 0 8vw; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap; position: relative; z-index: 1;}

  .service-sec4-intro-full { width: 100%; position: relative; z-index: 1;}
  .service-sec4-intro-full img.intro-bg { width: 100%; height: auto;}
  .service-sec4-intro-full .intro-text { width: 32vw; padding: 0 4vw 0 4.5vw; box-sizing: border-box; color: #fff; font-size: 1vw; line-height: 1.8vw; position: absolute; top: 8.5vw; left: 0;}
  .service-sec4-intro-full .intro-text span.text-title { font-size: 1.6vw; font-weight: 500;}


  /************ section #case-sec1 ************/

  section#case-sec1 { clear: both; width: 100%; position: relative; z-index: 1;}

  img.case-sec1-bg-top { width: 100%; height: auto; position: relative; z-index: 1;}
  img.case-sec1-title { width: 26.5vw; height: auto; position: absolute; top: 3.5vw; left: 14vw; z-index: 2;}
  
  .case-sec1-text-con { width: 36vw; font-size: 1.4vw; font-weight: 500; line-height: 2vw; position: absolute; top: 12vw; left: 47vw; z-index: 2;}
  .case-sec1-text-con span.text-title { color: #009d3c; font-size: 1.9vw;}
  .case-sec1-text-con span.en-text { color: #a5a5a5; font-size: 1vw;}

  img.case-sec1-illu { width: 50vw; height: auto; position: absolute; top: 21.5vw; right: 10vw; z-index: 2;}


  /************ section #case-sec2 ************/

  section#case-sec2 { clear: both; width: 100%; padding: 0 0 3vw 8vw; box-sizing: border-box; background-image: url("../images/case_bg_bottom.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left bottom; position: relative; z-index: 1;}

  .case-sec2-list-1 { width: 100%; margin: 3vw 0 0 0; display: flex; justify-content: flex-start; align-items: center;}
  .case-sec2-list-1 .photo-bx { width: 55vw; padding: 0 0 0 7vw; box-sizing: border-box; position: relative; z-index: 1;}
  .case-sec2-list-1 .photo-bx img { width: 100%; height: auto;}
  .case-sec2-list-1 .info-bx { width: 23.2vw; margin: 0 0 0 -3.5vw; background-color: #f1f4f5; position: relative; z-index: 2;}
  .case-sec2-list-1 .info-bx a { width: 100%; padding: 6.9vw 0 1.5vw 0; color: #414141; text-decoration: none; display: block;}
  .case-sec2-list-1 .info-bx a:hover { -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}
  .case-sec2-list-1 .info-bx .date { width: 100%; padding: 0.5vw 2.8vw; box-sizing: border-box; color: #f08c1e; font-size: 1.4vw;}
  .case-sec2-list-1 .info-bx .location { width: 100%; padding: 0.5vw 2.8vw; box-sizing: border-box; color: #fff; font-size: 1.8vw; font-weight: 500; background-color: #009d3c;}
  .case-sec2-list-1 .info-bx .type { width: 100%; padding: 0.5vw 2.8vw; box-sizing: border-box; font-size: 1.4vw; line-height: 2.4vw;}

  .case-sec2-list-2-mo { display: none;}
  .case-sec2-list-2 { width: 100%; margin: 3vw 0 0 0; display: flex; justify-content: flex-start; align-items: center;}
  .case-sec2-list-2 .info-bx { width: 23.2vw; margin: 0 0 0 7vw; background-color: #f1f4f5; position: relative; z-index: 2;}
  .case-sec2-list-2 .info-bx a { width: 100%; padding: 6.9vw 0 1.5vw 0; color: #414141; text-decoration: none; display: block;}
  .case-sec2-list-2 .info-bx a:hover { -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}
  .case-sec2-list-2 .info-bx .date { width: 100%; padding: 0.5vw 2.8vw; box-sizing: border-box; color: #f08c1e; font-size: 1.4vw;}
  .case-sec2-list-2 .info-bx .location { width: 100%; padding: 0.5vw 2.8vw; box-sizing: border-box; color: #fff; font-size: 1.8vw; font-weight: 500; background-color: #009d3c;}
  .case-sec2-list-2 .info-bx .type { width: 100%; padding: 0.5vw 2.8vw; box-sizing: border-box; font-size: 1.4vw; line-height: 2.4vw;}
  .case-sec2-list-2 .photo-bx { width: 55vw; padding: 0 7vw 0 0; margin: 0 0 0 -3.5vw; box-sizing: border-box; position: relative; z-index: 1;}
  .case-sec2-list-2 .photo-bx img { width: 100%; height: auto;}


  /************ section #case-progress-sec1 ************/

  section#case-progress-sec1 { clear: both; width: 100%; padding: 0 0 3vw 8vw; box-sizing: border-box; background-image: url("../images/about_sec1_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; position: relative; z-index: 1;}

  img.case-progress-login-title-bg-mo { display: none;}
  img.case-progress-login-title-bg { width: 76vw; height: auto; margin: 0 0 0 3.5vw; position: relative; z-index: 1;}

  .case-progress-login-box { width: 30vw; position: absolute; top: 7vw; left: 60vw; z-index: 2;}
  .case-progress-login-box .form-table { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .case-progress-login-box .form-table .caption { width: 6.5vw; padding: 0.3vw 0; margin: 0.4vw 0; color: #00395a; font-size: 2vw; font-weight: 300; border-right: 3px #2bce6f solid;}
  .case-progress-login-box .form-table .column { width: calc(100% - 6.5vw - 3px); padding: 0.3vw 0.5vw; margin: 0.4vw 0; text-align: center; box-sizing: border-box;}
  .case-progress-login-box .form-table .column input[type=text], 
  .case-progress-login-box .form-table .column input[type=password] { width: 100%; padding: 0.5vw; font-size: 1.6vw; border: 0; background-color: #e0e0e0; box-sizing: border-box;}
  .case-progress-login-box .form-confirm { width: 100%; padding: 0.5vw 0; margin: 1vw 0 0 0; background-color: #2bce6f;}
  .case-progress-login-box .form-confirm img.login-bt { width: 6vw; height: auto; margin: 0 auto;}


  /************ section #case-details-sec1 ************/

  .case-details-top { width: 100%; padding: 7vw 0 0 0; background-color: #ebebeb;}

  .breadcrumbs-box { clear: both; width: 100%; padding: 1vw 1vw 1vw 9vw; color: #149abb; font-size: 0.8vw; line-height: 1.4vw; box-sizing: border-box;}
  .breadcrumbs-box a { color: #149abb; text-decoration: none;}
  .breadcrumbs-box a:hover { border-bottom: 1px #149abb solid;}

  section#case-details-sec1-mo { display: none;}

  section#case-details-sec1 { clear: both; width: 100%; padding: 0 0 2vw 8vw; box-sizing: border-box; background-image: url("../images/case_bg_bottom.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left bottom; display: flex; justify-content: flex-start; align-items: flex-start; position: relative; z-index: 1;}

  .case-details-photo { width: 62vw; padding: 0 3vw 6vw 3vw; box-sizing: border-box;}
  .case-details-photo img.photo { width: 100%; height: auto; padding: 0 0 1vw 0;}

  .case-details-info { width: calc(100% - 62vw);}
  .case-details-info .case-info { width: 100%; position: relative;}
  .case-details-info .case-info img.details-bg { width: 19vw; height: auto; position: relative; z-index: 1;}
  .case-details-info .case-info .info-bx { width: 20vw; position: absolute; top: 3vw; left: 3.5vw; z-index: 2;}
  .case-details-info .case-info .info-bx .date { width: 100%; padding: 0.5vw 0; color: #f08c1e; font-size: 1.4vw;}
  .case-details-info .case-info .info-bx .location { width: 100%; color: #009d3c; font-size: 1.8vw; font-weight: 500;}
  .case-details-info .case-info .info-bx .type { width: 100%; padding: 0.5vw 0; font-size: 1.4vw; line-height: 2.4vw;}
  .case-details-info .case-title { width: 100%; margin: 14vw 0 0 0; position: relative;}
  .case-details-info .case-title img.case-details-title-bg { width: 24vw; height: auto; position: relative; z-index: 1;}
  .case-details-info .case-title .title-bx { width: 24vw; color: #00973c; font-size: 1.2vw; font-weight: 500; position: absolute; top: 1vw; left: 1vw; z-index: 2;}


  /************ section #case-progress-steps ************/

  .banner-box-2 { width: 100%; overflow: hidden; position: relative; z-index: 1;}
  
  img.case-progress-steps-banner { width: 100%; height: auto; position: relative; z-index: 1;}
  img.case-progress-steps-banner-title { width: 25vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}

  section#case-progress-steps { clear: both; width: 100%; padding: 3vw 10vw 0 calc(8vw + 7vw); box-sizing: border-box; background-image: url("../images/case_progress_steps_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; position: relative; z-index: 1;}

  .page-case-progress-steps-title { width: 33.5vw; padding: 1vw 0; margin: 0 0 2.5vw 0; font-size: 2.2vw; font-weight: 500; text-align: center; line-height: 2.2vw; border: 3px #00395a solid;}
  .page-case-progress-steps-title span.title { color: #1a1a1a;}
  .page-case-progress-steps-title span.numbers { color: #bb272d;}

  ul.progress-steps-list { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; position: relative;}
  ul.progress-steps-list li { width: calc(100% / 7); padding: 0; margin: 0; background-image: url("../images/progress_step_line_bg.png"); background-repeat: no-repeat; background-size: auto 0.1vw; background-position: left 0 top 10.2vw; cursor: pointer;}
  ul.progress-steps-list li:first-child { background-position: left 5vw  top 10.2vw;}
  ul.progress-steps-list li:last-child { background-position: right 5vw top 10.2vw;}
  ul.progress-steps-list li.unstep { opacity: 0.5;}
  ul.progress-steps-list li .step-box { width: 100%; padding: 0 1.1vw; box-sizing: border-box;}
  ul.progress-steps-list li .step-box img.icon { width: 6vw; height: auto; margin: 0 auto 0.5vw auto;}
  ul.progress-steps-list li .step-box .sub-title { clear: both; width: 100%; color: #fff; font-size: 1.1vw; text-align: center; border-radius: 1vw; background-color: #00395a;}
  ul.progress-steps-list li .step-box .dot-line { clear: both; width: 3vw; height: 4.5vw; margin: 0 auto; background-image: url("../images/progress_step_dot_line.png"); background-repeat: no-repeat; background-size: 0.2vw auto; background-position: center center; display: flex; justify-content: center; align-items: center; position: relative;}
  ul.progress-steps-list li .step-box .dot-line .dot { width: 1.5vw; height: 1.5vw; border-radius: 100%; background-color: #00395a; display: block;}
  ul.progress-steps-list li .step-box .step-num { clear: both; width: 90%; padding: 0.2vw 0; margin: 0 auto; color: #00395a; font-size: 2vw; font-weight: 500; letter-spacing: -0.1em; line-height: 2vw; text-align: center; border: 3px #00395a solid; border-radius: 1vw;}
  ul.progress-steps-list li.sel .step-box .step-num { clear: both; width: 90%; padding: 0.2vw 0; margin: 0 auto; color: #fff; font-size: 2vw; font-weight: 500; letter-spacing: -0.1em; line-height: 2vw; text-align: center; border: 3px #00395a solid; background-color: #00395a; border-radius: 1vw;}
  ul.progress-steps-list li.sel .step-box .dot-line .dot { width: 1.3vw; height: 1.3vw; border: 0.3vw #2bce6f solid; border-radius: 100%; background-color: #00395a; display: block;}

  .progress-step-content { clear: both; width: 100%; padding: 4vw 3vw; box-sizing: border-box;}
  .progress-step-content div.content { width: 100%; display: none; justify-content: flex-start; align-items: flex-start;}
  .progress-step-content div.content span.comingsoon { font-size: 1.6vw;}
  .progress-step-content div.content .col-left { width: 33vw; padding: 0 6vw 0 0; box-sizing: border-box}
  .progress-step-content div.content .col-left img.step-sofar-title { width: 100%;}
  .progress-step-content div.content .col-left .step-title { width: 100%; padding: 0.5vw 1.5vw; margin: 1vw 0; color: #fff; font-size: 2vw; font-weight: 500; background-color: #e48800; box-sizing: border-box;}
  .progress-step-content div.content .col-left .step-con-list { width: 100%; padding: 1vw 1.5vw; color: #000; font-size: 1.6vw; border-bottom: 1px #939393 solid; box-sizing: border-box;}
  .progress-step-content div.content .col-left .step-con-list span.color-red { color: #bb272d;}
  .progress-step-content div.content .col-left .step-con-list:first-child { border-top: 1px #939393 solid;}
  .progress-step-content div.content .col-left .step-con-list span.dw-bt { font-size: 1.4vw;}
  .progress-step-content div.content .col-left .step-con-list span.dw-bt a { padding: 0.3vw 2vw; color: #fff; text-align: center; text-decoration: none; border-radius: 3vw; background-color: #007d2d;}
  .progress-step-content div.content .col-right { width: calc(100% - 33vw); position: relative;}
  .progress-step-content div.content .col-right img.progress-step-paper, 
  .progress-step-content div.content .col-right img { max-width: 100%; height: auto; border: 1vw #939393 solid; box-sizing: border-box; position: relative; z-index: 2;}
  .progress-step-content div.content .col-right img.step-arrow-ill { width: 16vw; height: auto; border: 0;}


  /************ section #news-sec1 ************/

  section#news-sec1 { clear: both; width: 100%; padding: 0 0 26vw 0; background-image: url("../images/news_bg_bottom.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: left bottom; position: relative; z-index: 1;}

  img.news-sec1-top-bg { width: 100%; height: auto; position: absolute; top: 0; left: 0; z-index: 1;}

  .news-sec1-con { width: 100%; padding: 1.5vw 0 0 13.5vw; box-sizing: border-box; position: relative; z-index: 2;}
  .news-sec1-con img.news-title { width: 26vw; height: auto;}
  .news-sec1-con ul.news-list { width: 65vw; padding: 2vw 0 0 0; margin: 0 0 0 3vw; list-style: none; display: block;}
  .news-sec1-con ul.news-list li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #2bcf6f solid;}
  .news-sec1-con ul.news-list li a { width: 100%; padding: 1.5vw 0; text-decoration: none; display: flex; justify-content: flex-start; align-items: flex-start;}
  .news-sec1-con ul.news-list li a .icon { width: 13vw;}
  .news-sec1-con ul.news-list li a .icon img.icon-on { width: 5vw; height: auto; margin: 0 auto; display: block;}
  .news-sec1-con ul.news-list li a .icon img.icon-over { display: none;}
  .news-sec1-con ul.news-list li a .date-title { width: calc(100% - 13vw);}
  .news-sec1-con ul.news-list li a .date-title .date { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .news-sec1-con ul.news-list li a .date-title .date .ymd { width: 7vw; color: #f28e1e; font-size: 1.1vw;}
  .news-sec1-con ul.news-list li a .date-title .date .latest { width: 6vw; padding: 0.1vw 0; color: #fff; font-size: 0.9vw; text-align: center; background-color: #008d45;}
  .news-sec1-con ul.news-list li a .date-title .title { width: 100%; padding: 0.5vw 0 0 0; color: #006837; font-size: 1.2vw; font-weight: 500; line-height: 1.4vw;}
  .news-sec1-con ul.news-list li a:hover { background-color: #008d45;}
  .news-sec1-con ul.news-list li a:hover .icon img.icon-on { display: none;}
  .news-sec1-con ul.news-list li a:hover .icon img.icon-over { width: 5vw; height: auto; margin: 0 auto; display: block;}
  .news-sec1-con ul.news-list li a:hover .date-title .date .ymd { color: #fff;}
  .news-sec1-con ul.news-list li a:hover .date-title .date .latest { color: #008d45; background-color: #fff;}
  .news-sec1-con ul.news-list li a:hover .date-title .title { color: #fff;}

  ul.news-page-num { clear: both; width: 65vw; padding: 0; margin: 3vw 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.news-page-num li { padding: 0; margin: 0 0.3vw 0.5vw 0.3vw;}
  ul.news-page-num li a { padding: 0.3vw; color: #008d45; font-size: 1.1vw; text-decoration: none; display: block;}
  ul.news-page-num li a:hover { color: #fff; background-color: #008d45;}
  ul.news-page-num li a.sel { color: #fff; background-color: #008d45;}


  /************ section #news-content-sec1 ************/

  section#news-content-sec1 { clear: both; width: 100%; padding: 0 0 20vw 8vw; box-sizing: border-box; background-image: url("../images/news_bg_bottom.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: left bottom; position: relative; z-index: 1;}

  .news-con-title { width: 100%; padding: 1.5vw 0 0 5vw; box-sizing: border-box; position: relative; z-index: 1;}
  .news-con-title img.news-con-title-bg { width: 26.5vw; height: auto; position: relative; z-index: 1;}
  .news-con-title .date { width: 6vw; color: #f28e1e; font-size: 1.6vw; position: absolute; top: 6.4vw; left: 8vw; z-index: 2;}
  .news-con-title .latest { width: 8vw; padding: 0.1vw 0; color: #fff; font-size: 1.4vw; text-align: center; background-color: #008d45; position: absolute; top: 6.5vw; left: 17vw; z-index: 2;}
  .news-con-title .title { width: 69vw; color: #000; font-size: 1.6vw; font-weight: 500; line-height: 2vw; position: absolute; top: 16.3vw; left: 7.8vw; z-index: 2;}

  .news-con-text { clear: both; width: 69vw; margin: 2vw 0 0 7.8vw; font-size: 1.2vw; line-height: 2vw; word-break: break-all;}
  .news-con-text a { color: #414141; text-decoration: none; border-bottom: 1px #414141 solid;}
  .news-con-text a:hover { color: #008d45; border-bottom: 1px #008d45 solid;}
  .news-con-text img { max-width: 100%; height: auto;}

  .news-con-goback { clear: both; width: 69vw; margin: 3.5vw 0 0 7.8vw; display: flex; justify-content: center; align-items: flex-end;}
  .news-con-goback .prev-news, 
  .news-con-goback .next-news { width: 22vw; position: relative;}
  .news-con-goback .prev-news img, 
  .news-con-goback .next-news img { width: 100%; height: auto; position: relative; z-index: 1;}
  .news-con-goback .prev-news a { color: #00973c; font-size: 1.2vw; text-decoration: none; display: block; position: absolute; bottom: 0.5vw; right: 0; z-index: 2;}
  .news-con-goback .next-news a { color: #00973c; font-size: 1.2vw; text-decoration: none; display: block; position: absolute; bottom: 0.5vw; left: 0; z-index: 2;}
  .news-con-goback .prev-news a:hover, 
  .news-con-goback .next-news a:hover { color: #f28e1e;}
  .news-con-goback .goback { width: 11.5vw; margin: 0 5vw;}
  .news-con-goback .goback a { width: 100%; padding: 0.5vw 0; color: #fff; font-size: 1.1vw; text-align: center; text-decoration: none; border-radius: 6vw; background-color: #00973c; display: block;}
  .news-con-goback .goback a:hover { background-color: #f28e1e;}


  /************ section #knowledge-qa-sec1 ************/

  section#knowledge-qa-sec1 { clear: both; width: 100%; padding: 6vw 0 2.5vw 8vw; box-sizing: border-box; background-image: url("../images/about_sec1_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left top; position: relative; z-index: 1;}

  .knowledge-qa-title { width: 100%; position: relative; z-index: 1;}
  .knowledge-qa-title img.kn-qa-title { width: 52vw; height: auto; margin: 0 0 0 19vw; position: relative; z-index: 2;}
  .knowledge-qa-title img.kn-qa-illu { width: 30vw; height: auto; margin: -18.5vw 0 0 10.5vw; position: relative; z-index: 1;}
  .knowledge-qa-title .kn-qa-title { width: 24vw; margin: -4.2vw 0 0 11vw; position: relative; z-index: 3;}
  .knowledge-qa-title .kn-qa-title span.title-cn { color: #0bb2ab; font-size: 2vw; font-weight: 500;}
  .knowledge-qa-title .kn-qa-title span.text-en { color: #a7a7a7; font-size: 1.3vw;}

  ul.knowledge-qa-list { width: 100%; padding: 0; margin: 1vw 0 0 0; list-style: none; display: block; position: relative; z-index: 1;}
  ul.knowledge-qa-list li { width: 100%; padding: 1vw 13vw 1vw 11vw; margin: 0; font-size: 1.1vw; line-height: 2vw; box-sizing: border-box;}
  ul.knowledge-qa-list li:nth-child(even) { background-color: rgba(135,193,63,0.2);}
  ul.knowledge-qa-list li .kn-qa-q { width: 100%; padding: 0 0 10px 0; display: flex; justify-content: space-between; align-items: flex-start; cursor: pointer;}
  ul.knowledge-qa-list li .kn-qa-q span.icon-close { display: none;}
  ul.knowledge-qa-list li .kn-qa-a { width: 100%; padding: 10px 0 0 0; border-top: 1px #006837 dashed; display: none;}
  ul.knowledge-qa-list li .kn-qa-a a { color: #006837; border-bottom: 1px #006837 dashed; text-decoration: none;}
  ul.knowledge-qa-list li span.title { font-size: 1.2vw; font-weight: 500;}


  /************ section #knowledge-article-sec1 ************/

  section#knowledge-article-sec1 { clear: both; width: 100%; padding: 3.5vw 0 3.5vw 8vw; box-sizing: border-box; background-image: url("../images/kn_article_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left top; position: relative; z-index: 1;}

  .knowledge-art-title { width: 100%; position: relative; z-index: 2;}
  .knowledge-art-title img.kn-art-title { width: 54vw; height: auto; margin: 0 0 0 27.5vw; position: relative; z-index: 1;}
  .knowledge-art-title img.kn-art-top-illu { width: 85vw; height: auto; margin: -7.5vw 0 0 0; position: relative; z-index: 2;}

  .knowledge-art-list { width: 85vw; padding: 0 2vw 3vw 2vw; margin: -20vw 0 0 0; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; position: relative; z-index: 2;}
  .knowledge-art-list .kn-art-list-title { width: 100%; margin: 0 auto 5vw auto; text-align: center;}
  .knowledge-art-list .kn-art-list-title span.title-cn { color: #008d45; font-size: 2vw; font-weight: 500;}
  .knowledge-art-list .kn-art-list-title span.text-en { color: #a7a7a7; font-size: 1.3vw;}
  .knowledge-art-list .article-box { width: calc(100% / 3); padding: 1vw; margin: 0 0 1vw 0; box-sizing: border-box;}
  .knowledge-art-list .article-box a { width: 100%; color: #000; text-decoration: none;}
  .knowledge-art-list .article-box a img.article-pic { width: 100%; height: auto;}
  .knowledge-art-list .article-box a:hover { color: #008d45;}
  .knowledge-art-list .article-box a .text-title { width: 100%; padding: 0.3vw 0 0 0; font-size: 1.4vw; font-weight: 500; text-align: center;}


  .kn-article-con-title { width: 100%; padding: 1.5vw 0 0 5vw; box-sizing: border-box; position: relative; z-index: 1;}
  .kn-article-con-title img.news-con-title-bg { width: 26.5vw; height: auto; position: relative; z-index: 1;}
  .kn-article-con-title .date { width: 6vw; color: #f28e1e; font-size: 1.6vw; position: absolute; top: 6.4vw; left: 8vw; z-index: 2;}
  .kn-article-con-title .latest { width: 10.5vw; padding: 0.1vw 0; color: #fff; font-size: 1.4vw; text-align: center; background-color: #008d45; position: absolute; top: 6.5vw; left: 17vw; z-index: 2;}
  .kn-article-con-title .title { width: 69vw; color: #000; font-size: 1.6vw; font-weight: 500; line-height: 2vw; position: absolute; top: 16.3vw; left: 7.8vw; z-index: 2;}

  .kn-article-con-text { clear: both; width: 69vw; margin: 2vw 0 0 7.8vw; font-size: 1.2vw; line-height: 2vw; word-break: break-all;}
  .kn-article-con-text a { color: #414141; text-decoration: none; border-bottom: 1px #414141 solid;}
  .kn-article-con-text a:hover { color: #008d45; border-bottom: 1px #008d45 solid;}
  .kn-article-con-text img { max-width: 100%; height: auto;}


  /************ section #contact-sec1 ************/
  
  section#contact-sec1 { clear: both; width: 100%; background-image: url("../images/about_sec1_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  img.contact-sec1-title-illu { width: 58.5vw; height: auto; margin: 0 0 0 15.5vw; position: relative; z-index: 1;}
  img.contact-sec1-title-illu-2 { width: 100%; height: auto; margin: -39.5vw 0 0 0; position: relative; z-index: 2;}

  .contact-info { width: 28vw; position: absolute; bottom: 4vw; right: 14vw; z-index: 3;}
  .contact-info .logo-social { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .contact-info .logo-social img.logo { width: 19.5vw; height: auto; margin: 0 1vw 0 0;}
  .contact-info .logo-social img.social-icon { width: 2vw; height: auto; margin: 0 0.2vw;}
  .contact-info .addr-tel { width: 100%; padding: 1.5vw 0 0 0.5vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .contact-info .addr-tel .caption { width: 1.5vw; color: #00a63c; font-size: 1.4vw;}
  .contact-info .addr-tel .info { width: calc(100% - 1.5vw); padding: 0.4vw 0 0 0; color: #717071; font-size: 1.2vw; line-height: 1.2vw;}
  .contact-info .addr-tel .info { width: calc(100% - 1.5vw); color: #717071;}
  .contact-info .addr-tel .info span.addr { color: #231815; font-size: 1.2vw; font-weight: 500;}
  .contact-info .addr-tel .info span.addr-en { padding: 0.5vw 0 0 0; font-size: 1vw; display: block;}


  /************ section #contact-sec2 ************/

  section#contact-sec2 { clear: both; width: 100%; padding: 2.5vw 0 2.5vw 8vw; box-sizing: border-box; background-color: #149cbd;}

  .contact-sec2-con { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .contact-sec2-con img.contact-sec2-title { width: 26vw; height: auto; margin: -5vw 0 0 2.7vw;}
  .contact-sec2-con .contact-form { width: 45vw; margin: 0 0 0 4.4vw; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .contact-sec2-con .contact-form .caption { width: 6vw; padding: 0 0 1vw 0; color: #fff; font-size: 1.1vw;}
  .contact-sec2-con .contact-form .column { width: calc(100% - 6vw); padding: 0 0 0.8vw 0; color: #fff; font-size: 1.1vw; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .contact-sec2-con .contact-form .column input[type=text], 
  .contact-sec2-con .contact-form .column input[type=tel], 
  .contact-sec2-con .contact-form .column input[type=email] { width: 100%; padding: 0.3vw 0.5vw; color: #414141; font-size: 1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #fff; box-sizing: border-box;}
  .contact-sec2-con .contact-form .column input[type=radio] { position: absolute; opacity: 0;}
  .contact-sec2-con .contact-form .column input[type="radio"] + .radio-label:before { content: ''; background: #149cbd; border-radius: 100%; border: 0.1vw solid #fff; display: inline-block; width: 1.1vw; height: 1.1vw; position: relative; top: 0.2vw; margin-right: 0.5vw; vertical-align: top; cursor: pointer; text-align: center;}
  .contact-sec2-con .contact-form .column input[type="radio"]:checked + .radio-label:before { background-color: #fff; box-shadow: inset 0 0 0 0.25vw #149cbd;}
  .contact-sec2-con .contact-form .column input[type="radio"]:focus + .radio-label:before {outline: none; border-color: #fff;}
  .contact-sec2-con .contact-form .column input[type="radio"]:disabled + .radio-label:before { box-shadow: inset 0 0 0 4px #fff; border-color: #fff; background: #fff;}
  .contact-sec2-con .contact-form .column input[type="radio"] + .radio-label:empty:before { margin-right: 0;}
  .contact-sec2-con .contact-form .column textarea { width: 100%; height: 6vw; padding: 0.3vw 0.5vw; color: #414141; font-size: 1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #fff; box-sizing: border-box;}
  .contact-sec2-con .contact-form .column-bt { clear: both; width: 100%; padding: 0.5vw 0 0 0; display: flex; justify-content: flex-end;}
  .contact-sec2-con .contact-form .column-bt .form-submit { width: 12vw;}
  .contact-sec2-con .contact-form .column-bt .form-submit a { width: 100%; padding: 0.3vw 0; color: #fff; font-size: 1.4vw; text-align: center; text-decoration: none; border-radius: 3vw; background-color: #87c13f; display: block;}
  .contact-sec2-con .contact-form .column-bt .form-submit a:hover { background-color: #00973c;}


  /************ section #contact-sec3 ************/

  section#contact-sec3 { clear: both; width: 100%; padding: 0 0 0 8vw; box-sizing: border-box;}

  iframe { width: 100%; height: 24vw; padding: 0; margin: 0; border: 0;}


  /************ #sitemap ************/

  ul#sitemap { clear: both; width: 69vw; padding: 4vw 0; margin: 0 0 0 7.8vw; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; position: relative; z-index: 2;}
  ul#sitemap li { width: calc(100% / 6); padding: 0; margin: 0;}
  ul#sitemap li a { width: 100%; color: #f28e1e; font-size: 1.4vw; font-weight: 500; text-align: center; text-decoration: none; border-bottom: 2px #f28e1e solid; display: block;}
  ul#sitemap li a:hover { color: #00973c;}
  ul#sitemap li ul.sitemap-popup { width: 100%; padding: 1vw 0 0 0; margin: 0; list-style: none; display: block;}
  ul#sitemap li ul.sitemap-popup li { width: 100%; padding: 0.5vw 0; margin: 0;}
  ul#sitemap li ul.sitemap-popup li a { width: 100%; color: #666; font-size: 1.2vw; text-align: center; text-decoration: none; border-bottom: 0; display: block;}
  ul#sitemap li ul.sitemap-popup li a:hover { color: #f28e1e;}


  /************ 404 ************/

  .error-404 { clear: both; width: 69vw; padding: 4vw 0; margin: 0 0 0 7.8vw; text-align: center; position: relative; z-index: 2;}
  .error-404 span.text-con-1 { font-size: 4vw; font-weight: 700; line-height: 8vw;}
  .error-404 span.text-con-2 { font-size: 3vw; font-weight: 500;}
  

  /************ footer ************/

  footer { clear: both; width: 100%; padding: 0 0 0 8vw; box-sizing: border-box;}

  .footer-top { width: 100%; padding: 2vw 6vw 2vw 0; box-sizing: border-box; background-color: #333; display: flex; justify-content: flex-start; align-items: center;}
  .footer-top ul.footer-nav { width: calc(100% - 8.5vw); padding: 0 6vw; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: center; align-items: stretch;}
  .footer-top ul.footer-nav li { width: calc(100% / 7); padding: 0; margin: 0; text-align: center; border-right: 1px #f38f1e solid; box-sizing: border-box;}
  .footer-top ul.footer-nav li:first-child { border-left: 1px #f38f1e solid;}
  .footer-top ul.footer-nav li a { color: #fff; font-size: 1.3vw; font-weight: 500; text-decoration: none;}
  .footer-top ul.footer-nav li a:hover { border-bottom: 1px #fff solid;}
  .footer-top ul.footer-nav li ul.footer-nav-popup { width: 100%; padding: 0.5vw 0 0 0; margin: 0; list-style: none; display: block;}
  .footer-top ul.footer-nav li ul.footer-nav-popup li { clear: both; width: 100%; padding: 0; margin: 0; line-height: 1.8vw; text-align: center; border: 0;}
  .footer-top ul.footer-nav li ul.footer-nav-popup li a { color: #fff; font-size: 1vw; font-weight: 400; text-decoration: none;}
  .footer-top ul.footer-nav li ul.footer-nav-popup li a:hover { border-bottom: 1px #fff solid;}
  .footer-top .footer-logo { width: 8.5vw;}
  .footer-top .footer-logo img { width: 100%; height: auto;}

  .footer-copyright { clear: both; width: 100%; padding: 0.5vw 0; box-sizing: border-box; color: #000; line-height: 1.2vw; text-align: center; background-color: #f38f1e;}
  .footer-copyright span.info { padding: 0 1vw; font-size: 1vw; font-weight: 500;}
  .footer-copyright span.copyright { padding: 0 1vw; font-size: 0.8vw;}
  .footer-copyright span.sitemap { padding: 0 1vw; font-size: 1vw; font-weight: 500;}
  .footer-copyright a { color: #000; text-decoration: none;}
  .footer-copyright a:hover { border-bottom: 1px #000 solid;}


}

@media screen and (min-width: 768px) and (max-width: 1023px) {

  /************ aside(left) ************/

  aside { width: 8vw; height: 100%; background-color: rgba(255,255,255,0.9); position: fixed; top: 0; left: 0; z-index: 10;}

  aside .logo-slogan { width: 100%; height: calc(100% - 16vw); padding: 1.5vw 2.4vw 0 2.4vw; box-sizing: border-box;}
  aside .logo-slogan img.logo-img { width: 100%; height: auto; margin: 0 0 1.5vw 0;}
  aside .logo-slogan img.logo-img-mo { display: none;}
  aside .logo-slogan img.slogan-img { width: 1.6vw; height: auto; margin: 0 auto;}
  aside .tel-box { width: 8vw; height: 8vw; padding: 2vw 0 0 0; box-sizing: border-box; color: #fff; font-size: 0.8vw; text-align: center; background-color: #00a63c; cursor: pointer;}
  aside .tel-box a { color: #fff; text-decoration: none;}
  aside .tel-box img.icon { width: 2.2vw; height: auto; margin: 0 auto;}
  aside .address-box { width: 8vw; height: 8vw; padding: 2vw 0 0 0; box-sizing: border-box; color: #fff; font-size: 0.8vw; text-align: center; background-color: #f29600; cursor: pointer;}
  aside .address-box a { color: #fff; text-decoration: none;}
  aside .address-box img.icon { width: 1.4vw; height: auto; margin: 0 auto;}


  /************ #side-bar ************/

  #side-bar { width: 3vw; position: fixed; top: 16vw; right: 2.5vw; z-index: 10;}
  #side-bar .inquiry-online { width: 100%; background-color: #eee;}
  #side-bar .inquiry-online a { width: 100%; padding: 1vw 0.8vw; box-sizing: border-box; color: #000; font-size: 1.2vw; font-weight: 500; line-height: 1.3vw; text-align: center; text-decoration: none; display: block;}
  #side-bar .social-icon { width: 3vw; height: 3vw; padding: 0 0.5vw; box-sizing: border-box; background-color: #008645;}
  #side-bar .social-icon a { width: 100%; height: 100%; text-decoration: none; border-bottom: 1px #006837 solid; box-sizing: border-box; display: block; display: flex; justify-content: center; align-items: center; cursor: pointer;}
  #side-bar .social-icon a img { width: 1.5vw; height: auto;}
  #side-bar .social-icon:last-child a { border-bottom: 0;}


  /************ header + nav ************/

  header#nav-top-1 { width: 100%; position: absolute; top: 0; left: 0; z-index: 2;}

  header#nav-top-1 nav#mo { display: none;}
  header#nav-top-1 nav#pc { width: 100%;}
  header#nav-top-1 nav#pc ul.nav-menu { width: 100%; padding: 1.8vw 0 0 11vw; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: flex-start; align-items: flex-start;}
  header#nav-top-1 nav#pc ul.nav-menu li { padding: 0 1.2vw; margin: 0; position: relative;}
  header#nav-top-1 nav#pc ul.nav-menu li a { width: 7vw; color: #fff; font-size: 1.2vw; font-weight: 500; text-align: center; text-decoration: none; display: block; cursor: pointer;}
  header#nav-top-1 nav#pc ul.nav-menu li a img.arrow { width: 100%; height: auto; margin: 0.5vw 0 0 0; display: none;}
  /*header#nav-top-1 nav#pc ul.nav-menu li a:hover img.arrow { display: block; animation: fadeIn 2s;}*/
  header#nav-top-1 nav#pc ul.nav-menu li a.sel img.arrow { display: block; animation: fadeIn 2s;}
  header#nav-top-1 nav#pc ul.nav-menu li ul.nav-memu-popup { width: 10vw; padding: 4.5vw 0 1vw 0; margin: 0; box-sizing: border-box; background-color: rgba(255,255,255,0.2); list-style: none; display: none; position: absolute; top: -0.5vw; left: calc(50% - 5vw); z-index: 999;}
  header#nav-top-1 nav#pc ul.nav-menu li ul.nav-memu-popup li { width: 100%; padding: 0; margin: 0;}
  header#nav-top-1 nav#pc ul.nav-menu li ul.nav-memu-popup li a { width: 100%; padding: 0.5vw 0; color: #fff; font-size: 1.1vw; font-weight: 500; text-align: center; text-decoration: none; display: block;}
  header#nav-top-1 nav#pc ul.nav-menu li ul.nav-memu-popup li a:hover { color: #444; background-color: rgba(255,255,255,06);}


  header#nav-top-2 { width: 100%; position: absolute; top: 0; left: 0; z-index: 2;}

  header#nav-top-2 nav#mo { display: none;}
  header#nav-top-2 nav#pc { width: 100%;}  
  header#nav-top-2 nav#pc ul.nav-menu { width: 100%; padding: 1.8vw 0 0 11vw; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: flex-start; align-items: flex-start;}
  header#nav-top-2 nav#pc ul.nav-menu li { padding: 0 1.2vw; margin: 0; position: relative;}
  header#nav-top-2 nav#pc ul.nav-menu li a { width: 7vw; color: #4d4d4d; font-size: 1.2vw; font-weight: 500; text-align: center; text-decoration: none; display: block;}
  header#nav-top-2 nav#pc ul.nav-menu li a img.arrow { width: 100%; height: auto; margin: 0.5vw 0 0 0; display: none;}
  /*header#nav-top-2 nav#pc ul.nav-menu li a:hover img.arrow { display: block; animation: fadeIn 2s;}*/
  header#nav-top-2 nav#pc ul.nav-menu li a.sel img.arrow {display: block; animation: fadeIn 2s;}
  header#nav-top-2 nav#pc ul.nav-menu li ul.nav-memu-popup { width: 10vw; padding: 4.5vw 0 1vw 0; margin: 0; box-sizing: border-box; background-color: rgba(0,0,0,0.2); list-style: none; display: none; position: absolute; top: -0.5vw; left: calc(50% - 5vw); z-index: 999;}
  header#nav-top-2 nav#pc ul.nav-menu li ul.nav-memu-popup li { width: 100%; padding: 0; margin: 0;}
  header#nav-top-2 nav#pc ul.nav-menu li ul.nav-memu-popup li a { width: 100%; padding: 0.5vw 0; color: #444; font-size: 1.1vw; font-weight: 500; text-align: center; text-decoration: none; display: block;}
  header#nav-top-2 nav#pc ul.nav-menu li ul.nav-memu-popup li a:hover { color: #fff; background-color: rgba(0,0,0,0.6);}

  img.header-top-2-illu { width: 26vw; height: auto; position: absolute; top: 2.5vw; right: 0;}


  img.header-fb-icon { width: 2vw; height: auto; position: absolute; top: 1.7vw; right: 20vw;}


  /************ index banner ************/
  
  .banner-box { width: 100%; height: 100%; max-height: 50vw; overflow: hidden; position: relative; z-index: 1;}
  .banner-box img { width: 100%; height: auto;}

  img.banner-illu-1 { width: 18vw; height: auto; position: absolute; top: 2.5vw; right: 0; z-index: 2;}
  img.banner-illu-2 { width: 70vw; height: auto; position: absolute; bottom: 2vw; left: calc(8vw + 2vw); z-index: 2;}
  img.banner-illu-3 { width: 32vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}


  /************ section #index-sec1 ************/

  section#index-sec1 { clear: both; width: 100%; position: relative; z-index: 1;}

  img.index-sec1-bg { width: 100%; height: auto;}
  img.index-sec1-title { width: 19.2vw; height: auto; position: absolute; top: 6vw; left: 12.5vw;}
  img.index-sec1-photo { width: 39vw; height: auto; position: absolute; top: 6vw; right: 10.4vw;}

  .index-sec1-item { width: 28vw; display: flex; justify-content: flex-start; align-items: flex-start;}
  .index-sec1-item.item-1 { position: absolute; top: 28vw; left: 33vw;}
  .index-sec1-item.item-2 { position: absolute; top: 36vw; left: 25.5vw;}
  .index-sec1-item.item-3 { position: absolute; top: 43.5vw; left: 19vw;}
  .index-sec1-item.item-4 { position: absolute; top: 51vw; left: 12.4vw;}
  .index-sec1-item.item-5 { position: absolute; top: 5vw; right: 8.4vw;}
  .index-sec1-item img.item-num { width: 4.2vw; height: auto;}
  .index-sec1-item .item-text { width: calc(100% - 4.2vw); padding: 2.4vw 0 0 1.3vw; box-sizing: border-box; font-size: 1vw; font-weight: 500; line-height: 1.5vw;}
  .index-sec1-item .item-text span.title { color: #e78b00; font-size: 1.6vw; font-weight: 500;}


  /************ section #index-sec2 ************/

  section#index-sec2 { clear: both; width: 100%; position: relative; z-index: 1;}

  img.index-sec2-bg { width: 100%; height: auto;}
  img.index-sec2-photo { width: 52vw; height: auto; position: absolute; top: 2.6vw; left: 8vw;}

  .index-sec2-item { width: 26vw; display: flex; justify-content: flex-start; align-items: flex-start;}
  .index-sec2-item.item-5 { position: absolute; top: 5vw; right: 8.4vw;}
  .index-sec2-item img.item-num { width: 4.2vw; height: auto;}
  .index-sec2-item .item-text { width: calc(100% - 4.2vw); padding: 2.4vw 0 0 1.3vw; box-sizing: border-box; font-size: 1vw; font-weight: 500; line-height: 1.5vw;}
  .index-sec2-item .item-text span.title { color: #e78b00; font-size: 1.6vw; font-weight: 500;}

  img.index-sec2-title { width: 53vw; height: auto; position: absolute; top: 29vw; left: 11.5vw;}
  img.index-sec2-illu { width: 52vw; height: auto; position: absolute; top: 44vw; right: 11.5vw;}

  .index-sec2-text { width: 35.5vw; font-size: 1.4vw; font-weight: 500; line-height: 2vw; position: absolute; top: 52.5vw; left: 14.6vw;}
  .index-sec2-text span.en-text { color: #a8a8a8; font-size: 1vw;}
  .index-sec2-text span.slogan-text { color: #007d2d;}

  .index-sec2-more-bt { width: 21vw; border-radius: 3vw; background-color: #009a3c; position: absolute; bottom: 2.5vw; left: calc(50% - 10.5vw); overflow: hidden;}
  .index-sec2-more-bt a { width: 100%; padding: 0.8vw 2vw; color: #fff; font-size: 1.4vw; font-weight: 500; text-decoration: none; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}


  /************ section #index-sec3 ************/

  section#index-sec3 { clear: both; width: 100%; padding: 0 0 2vw 0; position: relative; z-index: 1;}

  img.index-sec3-title { width: 26vw; height: auto; margin: 0 auto; position: relative; z-index: 2;}
 
  .index-sec3-case-photos { clear: both; width: 100%; padding: 0 0 0 8vw; margin: 1vw 0 0 0; box-sizing: border-box; overflow: hidden; position: relative; z-index: 2;}
  .index-sec3-case-photos img { width: calc(100% - 2vw); height: auto; margin: 0 1vw;}
  .index-sec3-case-photos .photo-text { width: 100%; padding: 0.5vw 0 2vw 0; font-size: 1.3vw; font-weight: 500; line-height: 2vw; text-align: center;}
  .index-sec3-case-photos .photo-text span.case-name { color: #00395a; font-size: 1.5vw; font-weight: 500;}

  .index-sec3-photos-bg { width: 100%; height: 30vw; background-color: rgba(136,194,63,0.3); display: block; position: absolute; bottom: 0; left: 0; z-index: 1;}


  /************ section #index-sec4 ************/

  section#index-sec4 { clear: both; width: 100%; position: relative; z-index: 1;}

  img.index-sec4-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  img.index-sec4-title { width: 26vw; height: auto; position: absolute; top: 5vw; left: 10vw; z-index: 2;}

  .index-sec4-items-box { width: 54vw; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; position: absolute; top: 18vw; left: 10vw; z-index: 2;}
  .index-sec4-items-box .item-box { width: calc(100% / 4); padding: 0 3vw 0 0; margin: 0 0 2vw 0; box-sizing: border-box;}
  .index-sec4-items-box .item-box img.icon { width: 90%; height: auto; margin: 0 auto;}
  .index-sec4-items-box .item-box .text-title { clear: both; width: 100%; padding: 0.2vw 0; margin: 1vw 0 0 0; color: #fff; font-size: 1.2vw; text-align: center; border-radius: 2vw; background-color: #00395a;}

  .index-sec4-text-con { width: 50vw; font-size: 1.4vw; font-weight: 500; line-height: 2vw; position: absolute; top: 49vw; left: 10vw; z-index: 2;}
  .index-sec4-text-con span.en-text { color: #fff; font-size: 1vw;}
  .index-sec4-text-con span.title-text { color: #007d2d; font-size: 1.6vw;}

  .index-sec4-more-bt { width: 21vw; border-radius: 3vw; background-color: #009a3c; position: absolute; bottom: 4.5vw; left: 10vw; z-index: 2; overflow: hidden;}
  .index-sec4-more-bt a { width: 100%; padding: 0.8vw 2vw; color: #fff; font-size: 1.4vw; font-weight: 500; text-decoration: none; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}


  /************ section #index-sec5 ************/

  section#index-sec5 { clear: both; width: 100%; position: relative; z-index: 1;}

  img.index-sec5-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  img.index-sec5-title { width: 27vw; height: auto; position: absolute; top: 3vw; left: 14vw; z-index: 2;}

  .index-sec5-text-con { width: 40vw; font-size: 1.4vw; font-weight: 500; line-height: 2vw; position: absolute; top: 26vw; left: 18vw; z-index: 2;}
  .index-sec5-text-con span.en-text { color: #a9a9a9; font-size: 1vw;}
  .index-sec5-text-con span.title-text { color: #007d2d; font-size: 1.6vw;}

  .index-sec5-more-bt { width: 21vw; border-radius: 3vw; background-color: #009a3c; position: absolute; top: 30vw; right: 15vw; z-index: 2; overflow: hidden;}
  .index-sec5-more-bt a { width: 100%; padding: 0.8vw 2vw; color: #fff; font-size: 1.4vw; font-weight: 500; text-decoration: none; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}


  /************ page banner ************/

  img.page-banner-illu-2 { width: 81vw; height: auto; position: absolute; bottom: 2vw; left: calc(8vw + 2vw); z-index: 2;}
  img.about-banner-title { width: 36vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.service-banner-title { width: 42vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.case-banner-title { width: 44vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.case-progress-banner-title { width: 46vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.news-banner-title { width: 37vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.knowledge-banner-title { width: 64vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.contact-banner-title { width: 64vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}


  /************ section #about-sec1 ************/

  section#about-sec1 { clear: both; width: 100%; padding: 0 0 15vw 0; position: relative; z-index: 1;}

  img.about-sec1-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  img.about-sec1-title { width: 53vw; height: auto; position: absolute; top: 5vw; left: 17vw; z-index: 3;}
  img.about-sec1-illu { width: 61vw; height: auto; position: absolute; top: 20vw; left: 30vw; z-index: 2;}

  .about-sec1-text-con { width: 28vw; font-size: 1.4vw; font-weight: 500; line-height: 2vw; position: absolute; top: 29vw; left: 20vw; z-index: 2;}
  .about-sec1-text-con span.text-title { color: #0bb3ac; font-size: 1.9vw;}
  .about-sec1-text-con span.en-text { color: #a8a8a8; font-size: 1vw;}


  /************ section #about-sec2 ************/

  section#about-sec2 { clear: both; width: 100%; padding: 4vw 0 2.5vw 8vw; box-sizing: border-box; background-color: rgba(124,223,20,0.2); position: relative; z-index: 1;}

  .about-sec2-item-row { width: 100%; display: flex; justify-content: center; align-items: center;}
  .about-sec2-item-row img.item-icon { width: 9vw; height: auto; margin: 0 4.5vw;}

  .about-sec2-slogan { width: 100%; color: #1a1a1a; font-size: 2.5vw; font-weight: 500; line-height: 5.5vw; letter-spacing: 0.1em; text-align: center;}
  .about-sec2-slogan-mo { display: none;}

  .about-sec2-title { width: 100%; margin: 2vw 0 0 0; text-align: center;}
  .about-sec2-title span.text-title { color: #149dbe; font-size: 1.9vw; font-weight: 500; line-height: 2.5vw}
  .about-sec2-title span.text-en { color: #a8a8a8; font-size: 1vw;}


  /************ section #about-sec3 ************/

  section#about-sec3 { clear: both; width: 100%; padding: 0 0 6.3vw 0; background-color: #fff; position: relative; z-index: 1;}

  .about-sec3-pic-text { width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .about-sec3-pic-text img.pic { width: 50%; height: auto;}
  .about-sec3-pic-text .text-con { width: 50%; padding: 7vw 7vw 0 7.6vw; font-size: 1.4vw; font-weight: 500; line-height: 2vw; box-sizing: border-box; }
  .about-sec3-pic-text .text-con span.text-title { color: #149dbe; font-size: 1.9vw;}
  .about-sec3-pic-text .text-con span.text-en { color: #a8a8a8; font-size: 1vw;}

  img.about-sec3-flow { width: 80%; height: auto; padding: 0 0 0 8vw; margin: 6.3vw auto 0 auto; box-sizing: border-box;}


  /************ section #service-sec1 ************/

  section#service-sec1 { clear: both; width: 100%; padding: 5.5vw 0 7vw 8vw; box-sizing: border-box; background-image: url("../images/about_sec1_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  img.service-sec1-title { width: 30.5vw; height: auto; margin: 0 0 2.4vw 9vw;}

  .service-sec1-items { clear: both; width: 54vw; margin: 0 0 0 14vw; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .service-sec1-items .item-box { width: calc(100% / 4); padding: 0 1.5vw; margin: 0 0 2vw 0; box-sizing: border-box;}
  .service-sec1-items .item-box img.item-pic { width: 90%; height: auto; margin: 0 auto;}
  .service-sec1-items .item-box .text-title { clear: both; width: 100%; padding: 0.2vw 0; margin: 0.5vw 0 0 0; color: #fff; font-size: 1.2vw; text-align: center; border-radius: 2vw; background-color: #00395a;}

  .service-sec1-text-con { width: 45vw; margin: 4.2vw 0 0 18vw; font-size: 1.4vw; font-weight: 500; line-height: 2vw; text-align: center;}
  .service-sec1-text-con span.text-title { color: #007d2d; font-size: 1.9vw;}
  .service-sec1-text-con span.text-en { color: #a7a7a7; font-size: 1vw;}


  /************ section #service-sec2 ************/

  section#service-sec2 { clear: both; width: 100%; padding: 0 0 0 8vw; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap; position: relative; z-index: 1;}

  .service-sec2-intro { width: 50%; position: relative; z-index: 1;}
  .service-sec2-intro img.intro-bg { width: 100%; height: auto;}
  .service-sec2-intro .intro-text { width: 100%; padding: 0 4.5vw 3vw 4.5vw; box-sizing: border-box; color: #fff; font-size: 1vw; line-height: 1.8vw; position: absolute; top: 22vw; left: 0; z-index: 2;}
  .service-sec2-intro .intro-text span.text-title { font-size: 1.6vw; font-weight: 500;}


  /************ section #service-sec3 ************/

  section#service-sec3 { clear: both; width: 100%; padding: 6vw 0 6vw 8vw; box-sizing: border-box;}

  .service-sec3-intro { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .service-sec3-intro .intro-text { width: 24vw; padding: 0 4vw 0 4.5vw; box-sizing: border-box; color: #000; font-size: 1vw; line-height: 1.8vw;}
  .service-sec3-intro .intro-text span.text-title { color: #009f3c; font-size: 1.6vw; font-weight: 500;}
  .service-sec3-intro .intro-illu { width: calc(100% - 24vw); padding: 0 10vw 0 0; box-sizing: border-box;}
  .service-sec3-intro .intro-illu img { width: 100%; height: auto;}


  /************ section #service-sec4 ************/

  section#service-sec4 { clear: both; width: 100%; padding: 0 0 0 8vw; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap; position: relative; z-index: 1;}

  .service-sec4-intro-full { width: 100%; position: relative; z-index: 1;}
  .service-sec4-intro-full img.intro-bg { width: 100%; height: auto;}
  .service-sec4-intro-full .intro-text { width: 32vw; padding: 0 4vw 0 4.5vw; box-sizing: border-box; color: #fff; font-size: 1vw; line-height: 1.8vw; position: absolute; top: 7vw; left: 0;}
  .service-sec4-intro-full .intro-text span.text-title { font-size: 1.6vw; font-weight: 500;}


  /************ section #case-sec1 ************/

  section#case-sec1 { clear: both; width: 100%; position: relative; z-index: 1;}

  img.case-sec1-bg-top { width: 100%; height: auto; position: relative; z-index: 1;}
  img.case-sec1-title { width: 26.5vw; height: auto; position: absolute; top: 3.5vw; left: 14vw; z-index: 2;}
  
  .case-sec1-text-con { width: 36vw; font-size: 1.4vw; font-weight: 500; line-height: 2vw; position: absolute; top: 12vw; left: 47vw; z-index: 2;}
  .case-sec1-text-con span.text-title { color: #009d3c; font-size: 1.9vw;}
  .case-sec1-text-con span.en-text { color: #a5a5a5; font-size: 1vw;}

  img.case-sec1-illu { width: 50vw; height: auto; position: absolute; top: 21.5vw; right: 10vw; z-index: 2;}


  /************ section #case-sec2 ************/

  section#case-sec2 { clear: both; width: 100%; padding: 0 0 3vw 8vw; box-sizing: border-box; background-image: url("../images/case_bg_bottom.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left bottom; position: relative; z-index: 1;}

  .case-sec2-list-1 { width: 100%; margin: 3vw 0 0 0; display: flex; justify-content: flex-start; align-items: center;}
  .case-sec2-list-1 .photo-bx { width: 55vw; padding: 0 0 0 7vw; box-sizing: border-box; position: relative; z-index: 1;}
  .case-sec2-list-1 .photo-bx img { width: 100%; height: auto;}
  .case-sec2-list-1 .info-bx { width: 23.2vw; margin: 0 0 0 -3.5vw; background-color: #f1f4f5; position: relative; z-index: 2;}
  .case-sec2-list-1 .info-bx a { width: 100%; padding: 6.9vw 0 1.5vw 0; color: #414141; text-decoration: none; display: block;}
  .case-sec2-list-1 .info-bx a:active { -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}
  .case-sec2-list-1 .info-bx .date { width: 100%; padding: 0.5vw 2.8vw; box-sizing: border-box; color: #f08c1e; font-size: 1.4vw;}
  .case-sec2-list-1 .info-bx .location { width: 100%; padding: 0.5vw 2.8vw; box-sizing: border-box; color: #fff; font-size: 1.8vw; font-weight: 500; background-color: #009d3c;}
  .case-sec2-list-1 .info-bx .type { width: 100%; padding: 0.5vw 2.8vw; box-sizing: border-box; font-size: 1.4vw; line-height: 2.4vw;}

  .case-sec2-list-2-mo { display: none;}
  .case-sec2-list-2 { width: 100%; margin: 3vw 0 0 0; display: flex; justify-content: flex-start; align-items: center;}
  .case-sec2-list-2 .info-bx { width: 23.2vw; padding: 6.9vw 0 1.5vw 0; margin: 0 0 0 7vw; background-color: #f1f4f5; position: relative; z-index: 2;}
  .case-sec2-list-2 .info-bx a { width: 100%; color: #414141; text-decoration: none; display: block;}
  .case-sec2-list-2 .info-bx a:active { -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}
  .case-sec2-list-2 .info-bx .date { width: 100%; padding: 0.5vw 2.8vw; box-sizing: border-box; color: #f08c1e; font-size: 1.4vw;}
  .case-sec2-list-2 .info-bx .location { width: 100%; padding: 0.5vw 2.8vw; box-sizing: border-box; color: #fff; font-size: 1.8vw; font-weight: 500; background-color: #009d3c;}
  .case-sec2-list-2 .info-bx .type { width: 100%; padding: 0.5vw 2.8vw; box-sizing: border-box; font-size: 1.4vw; line-height: 2.4vw;}
  .case-sec2-list-2 .photo-bx { width: 55vw; padding: 0 7vw 0 0; margin: 0 0 0 -3.5vw; box-sizing: border-box; position: relative; z-index: 1;}
  .case-sec2-list-2 .photo-bx img { width: 100%; height: auto;}


  /************ section #case-progress-sec1 ************/

  section#case-progress-sec1 { clear: both; width: 100%; padding: 0 0 3vw 8vw; box-sizing: border-box; background-image: url("../images/about_sec1_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; position: relative; z-index: 1;}

  img.case-progress-login-title-bg-mo { display: none;}
  img.case-progress-login-title-bg { width: 76vw; height: auto; margin: 0 0 0 3.5vw; position: relative; z-index: 1;}

  .case-progress-login-box { width: 30vw; position: absolute; top: 7vw; left: 60vw; z-index: 2;}
  .case-progress-login-box .form-table { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .case-progress-login-box .form-table .caption { width: 6.5vw; padding: 0.3vw 0; margin: 0.4vw 0; color: #00395a; font-size: 2vw; font-weight: 300; border-right: 3px #2bce6f solid;}
  .case-progress-login-box .form-table .column { width: calc(100% - 6.5vw - 3px); padding: 0.3vw 0.5vw; margin: 0.4vw 0; text-align: center; box-sizing: border-box;}
  .case-progress-login-box .form-table .column input[type=text], 
  .case-progress-login-box .form-table .column input[type=password] { width: 100%; padding: 0.5vw; font-size: 1.6vw; border: 0; background-color: #e0e0e0; box-sizing: border-box;}
  .case-progress-login-box .form-confirm { width: 100%; padding: 0.5vw 0; margin: 1vw 0 0 0; background-color: #2bce6f;}
  .case-progress-login-box .form-confirm img.login-bt { width: 6vw; height: auto; margin: 0 auto;}


  /************ section #case-details-sec1 ************/

  .case-details-top { width: 100%; padding: 7vw 0 0 0; background-color: #ebebeb;}

  .breadcrumbs-box { clear: both; width: 100%; padding: 1vw 1vw 1vw 9vw; color: #149abb; font-size: 0.8vw; line-height: 1.4vw; box-sizing: border-box;}
  .breadcrumbs-box a { color: #149abb; text-decoration: none;}
  .breadcrumbs-box a:hover { border-bottom: 1px #149abb solid;}

  section#case-details-sec1-mo { display: none;}

  section#case-details-sec1 { clear: both; width: 100%; padding: 0 0 2vw 8vw; box-sizing: border-box; background-image: url("../images/case_bg_bottom.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left bottom; display: flex; justify-content: flex-start; align-items: flex-start; position: relative; z-index: 1;}

  .case-details-photo { width: 62vw; padding: 0 3vw 6vw 3vw; box-sizing: border-box;}
  .case-details-photo img.photo { width: 100%; height: auto; padding: 0 0 1vw 0;}

  .case-details-info { width: calc(100% - 62vw);}
  .case-details-info .case-info { width: 100%; position: relative;}
  .case-details-info .case-info img.details-bg { width: 19vw; height: auto; position: relative; z-index: 1;}
  .case-details-info .case-info .info-bx { width: 20vw; position: absolute; top: 3vw; left: 3.5vw; z-index: 2;}
  .case-details-info .case-info .info-bx .date { width: 100%; padding: 0.5vw 0; color: #f08c1e; font-size: 1.4vw;}
  .case-details-info .case-info .info-bx .location { width: 100%; color: #009d3c; font-size: 1.8vw; font-weight: 500;}
  .case-details-info .case-info .info-bx .type { width: 100%; padding: 0.5vw 0; font-size: 1.4vw; line-height: 2.4vw;}
  .case-details-info .case-title { width: 100%; margin: 14vw 0 0 0; position: relative;}
  .case-details-info .case-title img.case-details-title-bg { width: 24vw; height: auto; position: relative; z-index: 1;}
  .case-details-info .case-title .title-bx { width: 24vw; color: #00973c; font-size: 1.2vw; font-weight: 500; position: absolute; top: 1vw; left: 1vw; z-index: 2;}


  /************ section #case-progress-steps ************/

  .banner-box-2 { width: 100%; overflow: hidden; position: relative; z-index: 1;}
  
  img.case-progress-steps-banner { width: 100%; height: auto; position: relative; z-index: 1;}
  img.case-progress-steps-banner-title { width: 25vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}

  section#case-progress-steps { clear: both; width: 100%; padding: 3vw 10vw 0 calc(8vw + 7vw); box-sizing: border-box; background-image: url("../images/case_progress_steps_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; position: relative; z-index: 1;}

  .page-case-progress-steps-title { width: 33.5vw; padding: 1vw 0; margin: 0 0 2.5vw 0; font-size: 2.2vw; font-weight: 500; text-align: center; line-height: 2.2vw; border: 3px #00395a solid;}
  .page-case-progress-steps-title span.title { color: #1a1a1a;}
  .page-case-progress-steps-title span.numbers { color: #bb272d;}

  ul.progress-steps-list { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; position: relative;}
  ul.progress-steps-list li { width: calc(100% / 7); padding: 0; margin: 0; background-image: url("../images/progress_step_line_bg.png"); background-repeat: no-repeat; background-size: auto 0.1vw; background-position: left 0 top 10.2vw; cursor: pointer;}
  ul.progress-steps-list li:first-child { background-position: left 5vw  top 10.2vw;}
  ul.progress-steps-list li:last-child { background-position: right 5vw top 10.2vw;}
  ul.progress-steps-list li.unstep { opacity: 0.5;}
  ul.progress-steps-list li .step-box { width: 100%; padding: 0 1.1vw; box-sizing: border-box;}
  ul.progress-steps-list li .step-box img.icon { width: 6vw; height: auto; margin: 0 auto 0.5vw auto;}
  ul.progress-steps-list li .step-box .sub-title { clear: both; width: 100%; color: #fff; font-size: 1.1vw; text-align: center; border-radius: 1vw; background-color: #00395a;}
  ul.progress-steps-list li .step-box .dot-line { clear: both; width: 3vw; height: 4.5vw; margin: 0 auto; background-image: url("../images/progress_step_dot_line.png"); background-repeat: no-repeat; background-size: 0.2vw auto; background-position: center center; display: flex; justify-content: center; align-items: center; position: relative;}
  ul.progress-steps-list li .step-box .dot-line .dot { width: 1.5vw; height: 1.5vw; border-radius: 100%; background-color: #00395a; display: block;}
  ul.progress-steps-list li .step-box .step-num { clear: both; width: 90%; padding: 0.2vw 0; margin: 0 auto; color: #00395a; font-size: 2vw; font-weight: 500; letter-spacing: -0.1em; line-height: 2vw; text-align: center; border: 3px #00395a solid; border-radius: 1vw;}
  ul.progress-steps-list li.sel .step-box .step-num { clear: both; width: 90%; padding: 0.2vw 0; margin: 0 auto; color: #fff; font-size: 2vw; font-weight: 500; letter-spacing: -0.1em; line-height: 2vw; text-align: center; border: 3px #00395a solid; background-color: #00395a; border-radius: 1vw;}
  ul.progress-steps-list li.sel .step-box .dot-line .dot { width: 1.3vw; height: 1.3vw; border: 0.3vw #2bce6f solid; border-radius: 100%; background-color: #00395a; display: block;}

  .progress-step-content { clear: both; width: 100%; padding: 4vw 3vw; box-sizing: border-box;}
  .progress-step-content div.content { width: 100%; display: none; justify-content: flex-start; align-items: flex-start;}
  .progress-step-content div.content span.comingsoon { font-size: 1.6vw;}
  .progress-step-content div.content .col-left { width: 33vw; padding: 0 6vw 0 0; box-sizing: border-box}
  .progress-step-content div.content .col-left img.step-sofar-title { width: 100%;}
  .progress-step-content div.content .col-left .step-title { width: 100%; padding: 0.5vw 1.5vw; margin: 1vw 0; color: #fff; font-size: 2vw; font-weight: 500; background-color: #e48800; box-sizing: border-box;}
  .progress-step-content div.content .col-left .step-con-list { width: 100%; padding: 1vw 1.5vw; color: #000; font-size: 1.6vw; border-bottom: 1px #939393 solid; box-sizing: border-box;}
  .progress-step-content div.content .col-left .step-con-list span.color-red { color: #bb272d;}
  .progress-step-content div.content .col-left .step-con-list:first-child { border-top: 1px #939393 solid;}
  .progress-step-content div.content .col-left .step-con-list span.dw-bt { font-size: 1.4vw;}
  .progress-step-content div.content .col-left .step-con-list span.dw-bt a { padding: 0.3vw 2vw; color: #fff; text-align: center; text-decoration: none; border-radius: 3vw; background-color: #007d2d;}
  .progress-step-content div.content .col-right { width: calc(100% - 33vw); position: relative;}
  .progress-step-content div.content .col-right img.progress-step-paper, 
  .progress-step-content div.content .col-right img { max-width: 100%; height: auto; border: 1vw #939393 solid; box-sizing: border-box; position: relative; z-index: 2;}
  .progress-step-content div.content .col-right img.step-arrow-ill { width: 16vw; height: auto; border: 0;}


  /************ section #news-sec1 ************/

  section#news-sec1 { clear: both; width: 100%; padding: 0 0 26vw 0; background-image: url("../images/news_bg_bottom.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: left bottom; position: relative; z-index: 1;}

  img.news-sec1-top-bg { width: 100%; height: auto; position: absolute; top: 0; left: 0; z-index: 1;}

  .news-sec1-con { width: 100%; padding: 1.5vw 0 0 13.5vw; box-sizing: border-box; position: relative; z-index: 2;}
  .news-sec1-con img.news-title { width: 26vw; height: auto;}
  .news-sec1-con ul.news-list { width: 65vw; padding: 2vw 0 0 0; margin: 0 0 0 3vw; list-style: none; display: block;}
  .news-sec1-con ul.news-list li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #2bcf6f solid;}
  .news-sec1-con ul.news-list li a { width: 100%; padding: 1.5vw 0; text-decoration: none; display: flex; justify-content: flex-start; align-items: flex-start;}
  .news-sec1-con ul.news-list li a .icon { width: 13vw;}
  .news-sec1-con ul.news-list li a .icon img.icon-on { width: 5vw; height: auto; margin: 0 auto; display: block;}
  .news-sec1-con ul.news-list li a .icon img.icon-over { display: none;}
  .news-sec1-con ul.news-list li a .date-title { width: calc(100% - 13vw);}
  .news-sec1-con ul.news-list li a .date-title .date { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .news-sec1-con ul.news-list li a .date-title .date .ymd { width: 10vw; color: #f28e1e; font-size: 1.1vw;}
  .news-sec1-con ul.news-list li a .date-title .date .latest { width: 10vw; padding: 0.1vw 0; color: #fff; font-size: 0.9vw; text-align: center; background-color: #008d45;}
  .news-sec1-con ul.news-list li a .date-title .title { width: 100%; padding: 0.5vw 0 0 0; color: #006837; font-size: 1.2vw; font-weight: 500; line-height: 1.4vw;}
  .news-sec1-con ul.news-list li a:hover { background-color: #008d45;}
  .news-sec1-con ul.news-list li a:hover .icon img.icon-on { display: none;}
  .news-sec1-con ul.news-list li a:hover .icon img.icon-over { width: 5vw; height: auto; margin: 0 auto; display: block;}
  .news-sec1-con ul.news-list li a:hover .date-title .date .ymd { color: #fff;}
  .news-sec1-con ul.news-list li a:hover .date-title .date .latest { color: #008d45; background-color: #fff;}
  .news-sec1-con ul.news-list li a:hover .date-title .title { color: #fff;}

  ul.news-page-num { clear: both; width: 65vw; padding: 0; margin: 3vw 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.news-page-num li { padding: 0; margin: 0 0.3vw 0.5vw 0.3vw;}
  ul.news-page-num li a { padding: 0.3vw; color: #008d45; font-size: 1.1vw; text-decoration: none; display: block;}
  ul.news-page-num li a:hover { color: #fff; background-color: #008d45;}
  ul.news-page-num li a.sel { color: #fff; background-color: #008d45;}


  /************ section #news-content-sec1 ************/

  section#news-content-sec1 { clear: both; width: 100%; padding: 0 0 20vw 8vw; box-sizing: border-box; background-image: url("../images/news_bg_bottom.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: left bottom; position: relative; z-index: 1;}

  .news-con-title { width: 100%; padding: 1.5vw 0 0 5vw; box-sizing: border-box; position: relative; z-index: 1;}
  .news-con-title img.news-con-title-bg { width: 26.5vw; height: auto; position: relative; z-index: 1;}
  .news-con-title .date { width: 6vw; color: #f28e1e; font-size: 1.6vw; position: absolute; top: 6.4vw; left: 8vw; z-index: 2;}
  .news-con-title .latest { width: 8vw; padding: 0.1vw 0; color: #fff; font-size: 1.4vw; text-align: center; background-color: #008d45; position: absolute; top: 6.5vw; left: 17vw; z-index: 2;}
  .news-con-title .title { width: 69vw; color: #000; font-size: 1.6vw; font-weight: 500; line-height: 2vw; position: absolute; top: 16.3vw; left: 7.8vw; z-index: 2;}

  .news-con-text { clear: both; width: 69vw; margin: 2vw 0 0 7.8vw; font-size: 1.2vw; line-height: 2vw; word-break: break-all;}
  .news-con-text a { color: #414141; text-decoration: none; border-bottom: 1px #414141 solid;}
  .news-con-text a:hover { color: #008d45; border-bottom: 1px #008d45 solid;}
  .news-con-text img { max-width: 100%; height: auto;}

  .news-con-goback { clear: both; width: 69vw; margin: 3.5vw 0 0 7.8vw; display: flex; justify-content: center; align-items: flex-end;}
  .news-con-goback .prev-news, 
  .news-con-goback .next-news { width: 22vw; position: relative;}
  .news-con-goback .prev-news img, 
  .news-con-goback .next-news img { width: 100%; height: auto; position: relative; z-index: 1;}
  .news-con-goback .prev-news a { color: #00973c; font-size: 1.2vw; text-decoration: none; display: block; position: absolute; bottom: 0.5vw; right: 0; z-index: 2;}
  .news-con-goback .next-news a { color: #00973c; font-size: 1.2vw; text-decoration: none; display: block; position: absolute; bottom: 0.5vw; left: 0; z-index: 2;}
  .news-con-goback .prev-news a:hover, 
  .news-con-goback .next-news a:hover { color: #f28e1e;}
  .news-con-goback .goback { width: 11.5vw; margin: 0 5vw;}
  .news-con-goback .goback a { width: 100%; padding: 0.5vw 0; color: #fff; font-size: 1.1vw; text-align: center; text-decoration: none; border-radius: 6vw; background-color: #00973c; display: block;}
  .news-con-goback .goback a:hover { background-color: #f28e1e;}


  /************ section #knowledge-qa-sec1 ************/

  section#knowledge-qa-sec1 { clear: both; width: 100%; padding: 6vw 0 2.5vw 8vw; box-sizing: border-box; background-image: url("../images/about_sec1_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left top; position: relative; z-index: 1;}

  .knowledge-qa-title { width: 100%; position: relative; z-index: 1;}
  .knowledge-qa-title img.kn-qa-title { width: 52vw; height: auto; margin: 0 0 0 19vw; position: relative; z-index: 2;}
  .knowledge-qa-title img.kn-qa-illu { width: 30vw; height: auto; margin: -18.5vw 0 0 10.5vw; position: relative; z-index: 1;}
  .knowledge-qa-title .kn-qa-title { width: 24vw; margin: -4.2vw 0 0 11vw; position: relative; z-index: 3;}
  .knowledge-qa-title .kn-qa-title span.title-cn { color: #0bb2ab; font-size: 2vw; font-weight: 500;}
  .knowledge-qa-title .kn-qa-title span.text-en { color: #a7a7a7; font-size: 1.3vw;}

  ul.knowledge-qa-list { width: 100%; padding: 0; margin: 1vw 0 0 0; list-style: none; display: block; position: relative; z-index: 1;}
  ul.knowledge-qa-list li { width: 100%; padding: 1vw 13vw 1vw 11vw; margin: 0; font-size: 1.1vw; line-height: 2vw; box-sizing: border-box;}
  ul.knowledge-qa-list li:nth-child(even) { background-color: rgba(135,193,63,0.2);}
  ul.knowledge-qa-list li .kn-qa-q { width: 100%; padding: 0 0 10px 0; display: flex; justify-content: space-between; align-items: flex-start; cursor: pointer;}
  ul.knowledge-qa-list li .kn-qa-q span.icon-close { display: none;}
  ul.knowledge-qa-list li .kn-qa-a { width: 100%; padding: 10px 0 0 0; border-top: 1px #006837 dashed; display: none;}
  ul.knowledge-qa-list li .kn-qa-a a { color: #006837; border-bottom: 1px #006837 dashed; text-decoration: none;}
  ul.knowledge-qa-list li span.title { font-size: 1.2vw; font-weight: 500;}


  /************ section #knowledge-article-sec1 ************/

  section#knowledge-article-sec1 { clear: both; width: 100%; padding: 3.5vw 0 3.5vw 8vw; box-sizing: border-box; background-image: url("../images/kn_article_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left top; position: relative; z-index: 1;}

  .knowledge-art-title { width: 100%; position: relative; z-index: 2;}
  .knowledge-art-title img.kn-art-title { width: 54vw; height: auto; margin: 0 0 0 27.5vw; position: relative; z-index: 1;}
  .knowledge-art-title img.kn-art-top-illu { width: 85vw; height: auto; margin: -7.5vw 0 0 0; position: relative; z-index: 2;}

  .knowledge-art-list { width: 85vw; padding: 0 2vw 3vw 2vw; margin: -20vw 0 0 0; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; position: relative; z-index: 2;}
  .knowledge-art-list .kn-art-list-title { width: 100%; margin: 0 auto 5vw auto; text-align: center;}
  .knowledge-art-list .kn-art-list-title span.title-cn { color: #008d45; font-size: 2vw; font-weight: 500;}
  .knowledge-art-list .kn-art-list-title span.text-en { color: #a7a7a7; font-size: 1.3vw;}
  .knowledge-art-list .article-box { width: calc(100% / 3); padding: 1vw; margin: 0 0 1vw 0; box-sizing: border-box;}
  .knowledge-art-list .article-box a { width: 100%; color: #000; text-decoration: none;}
  .knowledge-art-list .article-box a img.article-pic { width: 100%; height: auto;}
  .knowledge-art-list .article-box a:hover { color: #008d45;}
  .knowledge-art-list .article-box a .text-title { width: 100%; padding: 0.3vw 0 0 0; font-size: 1.4vw; font-weight: 500; text-align: center;}


  .kn-article-con-title { width: 100%; padding: 1.5vw 0 0 5vw; box-sizing: border-box; position: relative; z-index: 1;}
  .kn-article-con-title img.news-con-title-bg { width: 26.5vw; height: auto; position: relative; z-index: 1;}
  .kn-article-con-title .date { width: 6vw; color: #f28e1e; font-size: 1.6vw; position: absolute; top: 6.4vw; left: 8vw; z-index: 2;}
  .kn-article-con-title .latest { width: 10.5vw; padding: 0.1vw 0; color: #fff; font-size: 1.4vw; text-align: center; background-color: #008d45; position: absolute; top: 6.5vw; left: 17vw; z-index: 2;}
  .kn-article-con-title .title { width: 69vw; color: #000; font-size: 1.6vw; font-weight: 500; line-height: 2vw; position: absolute; top: 16.3vw; left: 7.8vw; z-index: 2;}

  .kn-article-con-text { clear: both; width: 69vw; margin: 2vw 0 0 7.8vw; font-size: 1.2vw; line-height: 2vw; word-break: break-all;}
  .kn-article-con-text a { color: #414141; text-decoration: none; border-bottom: 1px #414141 solid;}
  .kn-article-con-text a:hover { color: #008d45; border-bottom: 1px #008d45 solid;}
  .kn-article-con-text img { max-width: 100%; height: auto;}


  /************ section #contact-sec1 ************/
  
  section#contact-sec1 { clear: both; width: 100%; background-image: url("../images/about_sec1_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  img.contact-sec1-title-illu { width: 58.5vw; height: auto; margin: 0 0 0 15.5vw; position: relative; z-index: 1;}
  img.contact-sec1-title-illu-2 { width: 100%; height: auto; margin: -39.5vw 0 0 0; position: relative; z-index: 2;}

  .contact-info { width: 38vw; position: absolute; bottom: 4vw; right: 4vw; z-index: 3;}
  .contact-info .logo-social { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .contact-info .logo-social img.logo { width: 19.5vw; height: auto; margin: 0 1vw 0 0;}
  .contact-info .logo-social img.social-icon { width: 2vw; height: auto; margin: 0 0.2vw;}
  .contact-info .addr-tel { width: 100%; padding: 1.5vw 0 0 0.5vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .contact-info .addr-tel .caption { width: 1.5vw; color: #00a63c; font-size: 1.4vw;}
  .contact-info .addr-tel .info { width: calc(100% - 1.5vw); padding: 0.4vw 0 0 0; color: #717071; font-size: 1.2vw; line-height: 1.2vw;}
  .contact-info .addr-tel .info { width: calc(100% - 1.5vw); color: #717071;}
  .contact-info .addr-tel .info span.addr { color: #231815; font-size: 1.2vw; font-weight: 500;}
  .contact-info .addr-tel .info span.addr-en { padding: 0.5vw 0 0 0; font-size: 1vw; display: block;}


  /************ section #contact-sec2 ************/

  section#contact-sec2 { clear: both; width: 100%; padding: 2.5vw 0 2.5vw 8vw; box-sizing: border-box; background-color: #149cbd;}

  .contact-sec2-con { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .contact-sec2-con img.contact-sec2-title { width: 26vw; height: auto; margin: -5vw 0 0 2.7vw;}
  .contact-sec2-con .contact-form { width: 48vw; margin: 0 0 0 4.4vw; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .contact-sec2-con .contact-form .caption { width: 8vw; padding: 0 0 1vw 0; color: #fff; font-size: 1.1vw;}
  .contact-sec2-con .contact-form .column { width: calc(100% - 8vw); padding: 0 0 0.8vw 0; color: #fff; font-size: 1.1vw; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .contact-sec2-con .contact-form .column input[type=text], 
  .contact-sec2-con .contact-form .column input[type=tel], 
  .contact-sec2-con .contact-form .column input[type=email] { width: 100%; padding: 0.3vw 0.5vw; color: #414141; font-size: 1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #fff; box-sizing: border-box;}
  .contact-sec2-con .contact-form .column input[type=radio] { position: absolute; opacity: 0;}
  .contact-sec2-con .contact-form .column input[type="radio"] + .radio-label:before { content: ''; background: #149cbd; border-radius: 100%; border: 0.1vw solid #fff; display: inline-block; width: 1.1vw; height: 1.1vw; position: relative; top: 0.2vw; margin-right: 0.5vw; vertical-align: top; cursor: pointer; text-align: center;}
  .contact-sec2-con .contact-form .column input[type="radio"]:checked + .radio-label:before { background-color: #fff; box-shadow: inset 0 0 0 0.25vw #149cbd;}
  .contact-sec2-con .contact-form .column input[type="radio"]:focus + .radio-label:before {outline: none; border-color: #fff;}
  .contact-sec2-con .contact-form .column input[type="radio"]:disabled + .radio-label:before { box-shadow: inset 0 0 0 4px #fff; border-color: #fff; background: #fff;}
  .contact-sec2-con .contact-form .column input[type="radio"] + .radio-label:empty:before { margin-right: 0;}
  .contact-sec2-con .contact-form .column textarea { width: 100%; height: 6vw; padding: 0.3vw 0.5vw; color: #414141; font-size: 1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #fff; box-sizing: border-box;}
  .contact-sec2-con .contact-form .column-bt { clear: both; width: 100%; padding: 0.5vw 0 0 0; display: flex; justify-content: flex-end;}
  .contact-sec2-con .contact-form .column-bt .form-submit { width: 12vw;}
  .contact-sec2-con .contact-form .column-bt .form-submit a { width: 100%; padding: 0.3vw 0; color: #fff; font-size: 1.4vw; text-align: center; text-decoration: none; border-radius: 3vw; background-color: #87c13f; display: block;}
  .contact-sec2-con .contact-form .column-bt .form-submit a:hover { background-color: #00973c;}


  /************ section #contact-sec3 ************/

  section#contact-sec3 { clear: both; width: 100%; padding: 0 0 0 8vw; box-sizing: border-box;}

  iframe { width: 100%; height: 24vw; padding: 0; margin: 0; border: 0;}


  /************ #sitemap ************/

  ul#sitemap { clear: both; width: 69vw; padding: 4vw 0; margin: 0 0 0 7.8vw; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; position: relative; z-index: 2;}
  ul#sitemap li { width: calc(100% / 6); padding: 0; margin: 0;}
  ul#sitemap li a { width: 100%; color: #f28e1e; font-size: 1.4vw; font-weight: 500; text-align: center; text-decoration: none; border-bottom: 2px #f28e1e solid; display: block;}
  ul#sitemap li a:hover { color: #00973c;}
  ul#sitemap li ul.sitemap-popup { width: 100%; padding: 1vw 0 0 0; margin: 0; list-style: none; display: block;}
  ul#sitemap li ul.sitemap-popup li { width: 100%; padding: 0.5vw 0; margin: 0;}
  ul#sitemap li ul.sitemap-popup li a { width: 100%; color: #666; font-size: 1.2vw; text-align: center; text-decoration: none; border-bottom: 0; display: block;}
  ul#sitemap li ul.sitemap-popup li a:hover { color: #f28e1e;}


  /************ 404 ************/

  .error-404 { clear: both; width: 69vw; padding: 4vw 0; margin: 0 0 0 7.8vw; text-align: center; position: relative; z-index: 2;}
  .error-404 span.text-con-1 { font-size: 4vw; font-weight: 700; line-height: 8vw;}
  .error-404 span.text-con-2 { font-size: 3vw; font-weight: 500;}
  

  /************ footer ************/

  footer { clear: both; width: 100%; padding: 0 0 0 8vw; box-sizing: border-box;}

  .footer-top { width: 100%; padding: 2vw 6vw 2vw 0; box-sizing: border-box; background-color: #333; display: flex; justify-content: flex-start; align-items: center;}
  .footer-top ul.footer-nav { width: calc(100% - 8.5vw); padding: 0 6vw; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: center; align-items: stretch;}
  .footer-top ul.footer-nav li { width: calc(100% / 7); padding: 0; margin: 0; text-align: center; border-right: 1px #f38f1e solid; box-sizing: border-box;}
  .footer-top ul.footer-nav li:first-child { border-left: 1px #f38f1e solid;}
  .footer-top ul.footer-nav li a { color: #fff; font-size: 1.3vw; font-weight: 500; text-decoration: none;}
  .footer-top ul.footer-nav li a:hover { border-bottom: 1px #fff solid;}
  .footer-top ul.footer-nav li ul.footer-nav-popup { width: 100%; padding: 0.5vw 0 0 0; margin: 0; list-style: none; display: block;}
  .footer-top ul.footer-nav li ul.footer-nav-popup li { clear: both; width: 100%; padding: 0; margin: 0; line-height: 1.8vw; text-align: center; border: 0;}
  .footer-top ul.footer-nav li ul.footer-nav-popup li a { color: #fff; font-size: 1vw; font-weight: 400; text-decoration: none;}
  .footer-top ul.footer-nav li ul.footer-nav-popup li a:hover { border-bottom: 1px #fff solid;}
  .footer-top .footer-logo { width: 8.5vw;}
  .footer-top .footer-logo img { width: 100%; height: auto;}

  .footer-copyright { clear: both; width: 100%; padding: 0.5vw 0; box-sizing: border-box; color: #000; line-height: 1.2vw; text-align: center; background-color: #f38f1e;}
  .footer-copyright span.info { padding: 0 1vw; font-size: 1vw; font-weight: 500;}
  .footer-copyright span.copyright { padding: 0 1vw; font-size: 0.8vw;}
  .footer-copyright span.sitemap { padding: 0 1vw; font-size: 1vw; font-weight: 500;}
  .footer-copyright a { color: #000; text-decoration: none;}
  .footer-copyright a:hover { border-bottom: 1px #000 solid;}


}

@media screen and (max-width: 767px) {

  /************ aside(left) ************/

  aside { width: 100%; background-color: rgba(255,255,255,0.9); display: flex; justify-content: flex-start; align-items: center;}

  aside .logo-slogan { width: calc(100% - 120px); padding: 0 0 0 10px; box-sizing: border-box;}
  aside .logo-slogan img.logo-img { display: none;}
  aside .logo-slogan img.logo-img-mo { width: 180px; height: auto;}
  aside .logo-slogan img.slogan-img { display: none;}
  aside .tel-box { width: 60px; height: 60px; padding: 5px 0 0 0; box-sizing: border-box; color: #fff; font-size: 0.8rem; text-align: center; background-color: #00a63c; cursor: pointer;}
  aside .tel-box a { color: #fff; text-decoration: none;}
  aside .tel-box img.icon { width: auto; height: 30px; margin: 0 auto;}
  aside .address-box { width: 60px; height: 60px; padding: 5px 0 0 0; box-sizing: border-box; color: #fff; font-size: 0.8rem; text-align: center; background-color: #f29600; cursor: pointer;}
  aside .address-box a { color: #fff; text-decoration: none;}
  aside .address-box img.icon { width: auto; height: 30px; margin: 0 auto;} 


  /************ #side-bar ************/

  #side-bar { width: 30px; position: fixed; top: 200px; right: 0; z-index: 10;}
  #side-bar .inquiry-online { width: 100%; background-color: #eee;}
  #side-bar .inquiry-online a { width: 100%; padding: 10px 0; box-sizing: border-box; color: #000; font-size: 1rem; font-weight: 500; line-height: 1em; text-align: center; text-decoration: none; display: block;}
  #side-bar .social-icon { width: 30px; height: 30px; background-color: #008645;}
  #side-bar .social-icon a { width: 100%; height: 100%; text-decoration: none; border-bottom: 1px #006837 solid; box-sizing: border-box; display: block; display: flex; justify-content: center; align-items: center; cursor: pointer;}
  #side-bar .social-icon a img { width: 20px; height: auto;}
  #side-bar .social-icon:last-child a { border-bottom: 0;}


  /************ header + nav ************/

  header#nav-top-1 { width: 100%; position: absolute; top: 60px; left: 0; z-index: 99;}

  header#nav-top-1 nav#pc { display: none;}
  header#nav-top-1 nav#mo { width: 100%;}
  header#nav-top-1 nav#mo .nav-bt { width: 50px; color: #fff; font-size: 2.2rem; text-align: center;}
  header#nav-top-1 nav#mo ul.nav-menu { width: 100%; padding: 40px; margin: 0; box-sizing: border-box; background-color: rgba(243,143,30,0.8); list-style: none; display: none; position: absolute; top: 0; left: 0; z-index: 99;}
  header#nav-top-1 nav#mo ul.nav-menu .nav-close { width: 50px; margin: 0 0 10px 0; color: #000; font-size: 2.4rem; text-align: center; position: absolute; top: 0; right: 0;}
  header#nav-top-1 nav#mo ul.nav-menu li { width: 100%; padding: 5px 0; margin: 0;}
  header#nav-top-1 nav#mo ul.nav-menu li a { color: #000; font-size: 1.4rem; font-weight: 500; text-align: center; text-decoration: none; display: block;}
  header#nav-top-1 nav#mo ul.nav-menu li ul.nav-memu-popup { width: 100%; padding: 20px 10px; margin: 0; box-sizing: border-box; background-color: rgba(255,255,255,0.4); list-style: none; display: none;}
  header#nav-top-1 nav#mo ul.nav-menu li ul.nav-memu-popup li { width: 100%; padding: 0; margin: 0;}
  header#nav-top-1 nav#mo ul.nav-menu li ul.nav-memu-popup li a { width: 100%; padding: 10px 0; color: #000; font-size: 1.2rem; font-weight: 500; text-align: center; text-decoration: none; display: block;}


  header#nav-top-2 { width: 100%; position: absolute; top: 60px; left: 0; z-index: 99;}

  header#nav-top-2 nav#pc { display: none;}
  header#nav-top-2 nav#mo { width: 100%;}
  header#nav-top-2 nav#mo .nav-bt { width: 50px; color: #4d4d4d; font-size: 2.2rem; text-align: center;}
  header#nav-top-2 nav#mo ul.nav-menu { width: 100%; padding: 40px; margin: 0; box-sizing: border-box; background-color: rgba(243,143,30,0.8); list-style: none; display: none; position: absolute; top: 0; left: 0; z-index: 99;}
  header#nav-top-2 nav#mo ul.nav-menu .nav-close { width: 50px; margin: 0 0 10px 0; color: #000; font-size: 2.4rem; text-align: center; position: absolute; top: 0; right: 0;}
  header#nav-top-2 nav#mo ul.nav-menu li { width: 100%; padding: 5px 0; margin: 0;}
  header#nav-top-2 nav#mo ul.nav-menu li a { color: #000; font-size: 1.4rem; font-weight: 500; text-align: center; text-decoration: none; display: block;}
  header#nav-top-2 nav#mo ul.nav-menu li ul.nav-memu-popup { width: 100%; padding: 20px 10px; margin: 0; box-sizing: border-box; background-color: rgba(255,255,255,0.4); list-style: none; display: none;}
  header#nav-top-2 nav#mo ul.nav-menu li ul.nav-memu-popup li { width: 100%; padding: 0; margin: 0;}
  header#nav-top-2 nav#mo ul.nav-menu li ul.nav-memu-popup li a { width: 100%; padding: 10px 0; color: #000; font-size: 1.2rem; font-weight: 500; text-align: center; text-decoration: none; display: block;}
  

  img.header-top-2-illu { width: 200px; height: auto; position: absolute; top: 15px; right: 0; z-index: 2;}


  img.header-fb-icon { width: 30px; height: auto; position: absolute; top: 12px; left: 18vw;}


  /************ index banner ************/
  
  .banner-box { width: 100%; height: 100%; max-height: 50vw; overflow: hidden; position: relative; z-index: 1;}
  .banner-box img { width: 100%; height: auto;}

  img.banner-illu-1 { width: 18vw; height: auto; position: absolute; top: 2.5vw; right: 0; z-index: 2;}
  img.banner-illu-2 { width: 70vw; height: auto; position: absolute; bottom: 2vw; left: calc(8vw + 2vw); z-index: 2;}
  img.banner-illu-3 { width: 32vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}


  /************ section #index-sec1 ************/

  section#index-sec1 { clear: both; width: 100%; padding: 40px 20px; box-sizing: border-box; background-image: url("../images/index_sec1_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top; position: relative; z-index: 1;}

  img.index-sec1-bg { display: none;}
  img.index-sec1-title { width: 300px; height: auto;}
  img.index-sec1-photo { width: 90%; height: auto; margin: 30px auto;}

  .index-sec1-item { width: 100%; margin: 0 0 20px 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .index-sec1-item.item-1 { }
  .index-sec1-item.item-2 { }
  .index-sec1-item.item-3 { }
  .index-sec1-item.item-4 { }
  .index-sec1-item.item-5 { }
  .index-sec1-item img.item-num { width: 60px; height: auto;}
  .index-sec1-item .item-text { width: calc(100% - 60px); padding: 40px 0 0 10px; box-sizing: border-box; font-size: 1rem; font-weight: 500; line-height: 1.4em;}
  .index-sec1-item .item-text span.title { color: #e78b00; font-size: 1.2rem; font-weight: 500;}


  /************ section #index-sec2 ************/

  section#index-sec2 { clear: both; width: 100%; padding: 40px 20px; box-sizing: border-box; background-image: url("../images/index_sec2_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top; position: relative; z-index: 1;}

  img.index-sec2-bg { display: none;}
  img.index-sec2-photo { width: 100%; height: auto;}

  .index-sec2-item { clear: both; width: 100%; margin: 30px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .index-sec2-item.item-5 { }
  .index-sec2-item img.item-num { width: 60px; height: auto;}
  .index-sec2-item .item-text { width: calc(100% - 60px); padding: 40px 0 0 10px; box-sizing: border-box; font-size: 1rem; font-weight: 500; line-height: 1.4em;}
  .index-sec2-item .item-text span.title { color: #e78b00; font-size: 1.2rem; font-weight: 500;}

  img.index-sec2-title { clear: both; width: 100%; height: auto; margin: 30px 0 0 0;}
  img.index-sec2-illu { clear: both; width: 100%; height: auto; margin: 30px 0 0 0;}

  .index-sec2-text { clear: both; width: 100%; margin: 30px 0 0 0; font-size: 1.1rem; font-weight: 500; line-height: 1.6em;}
  .index-sec2-text span.en-text { color: #a8a8a8; font-size: 1rem;}
  .index-sec2-text span.slogan-text { color: #007d2d;}

  .index-sec2-more-bt { width: 240px; margin: 30px auto 0 auto; border-radius: 30px; background-color: #009a3c; overflow: hidden;}
  .index-sec2-more-bt a { width: 100%; padding: 8px 20px; color: #fff; font-size: 1.4rem; font-weight: 500; text-decoration: none; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}


  /************ section #index-sec3 ************/

  section#index-sec3 { clear: both; width: 100%; padding: 0 0 40px 0; position: relative; z-index: 1;}

  img.index-sec3-title { width: 510px; max-width: 100%; height: auto; padding: 0 20px; margin: 0 auto; box-sizing: border-box; position: relative; z-index: 2;}
 
  .index-sec3-case-photos { clear: both; width: 100%; margin: 30px 0 0 0; box-sizing: border-box; overflow: hidden; position: relative; z-index: 2;}
  .index-sec3-case-photos img { width: calc(100% - 20px); height: auto; margin: 0 10px;}
  .index-sec3-case-photos .photo-text { width: 100%; padding: 10px 0 20px 0; font-size: 1.2rem; font-weight: 500; line-height: 1.6em; text-align: center;}
  .index-sec3-case-photos .photo-text span.case-name { color: #00395a; font-size: 1.4rem; font-weight: 500;}

  .index-sec3-photos-bg { width: 100%; height: 55vw; background-color: rgba(136,194,63,0.3); display: block; position: absolute; bottom: 0; left: 0; z-index: 1;}


  /************ section #index-sec4 ************/

  section#index-sec4 { clear: both; width: 100%; padding: 40px 20px; box-sizing: border-box; background-image: url("../images/index_sec4_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top; position: relative; z-index: 1;}

  img.index-sec4-bg { display: none;}
  img.index-sec4-title { width: 500px; max-width: 100%; height: auto;}

  .index-sec4-items-box { clear: both; width: 90%; margin: 30px auto 0 auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .index-sec4-items-box .item-box { width: calc(100% / 2); padding: 0 3vw 0 0; margin: 0 0 2vw 0; box-sizing: border-box;}
  .index-sec4-items-box .item-box img.icon { width: 90%; height: auto; margin: 0 auto;}
  .index-sec4-items-box .item-box .text-title { clear: both; width: 100%; padding: 6px 0; margin: 10px 0 0 0; color: #fff; font-size: 1.2rem; text-align: center; border-radius: 20px; background-color: #00395a;}

  .index-sec4-text-con { width: 100%; margin: 30px 0 0 0; font-size: 1.1rem; font-weight: 500; line-height: 1.6em;}
  .index-sec4-text-con span.en-text { color: #fff; font-size: 1rem;}
  .index-sec4-text-con span.title-text { color: #007d2d; font-size: 1.4rem;}

  .index-sec4-more-bt { clear: both; width: 240px; margin: 30px 0 0 0; border-radius: 30px; background-color: #009a3c; overflow: hidden;}
  .index-sec4-more-bt a { width: 100%; padding: 8px 20px; color: #fff; font-size: 1.4rem; font-weight: 500; text-decoration: none; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}


  /************ section #index-sec5 ************/

  section#index-sec5 { clear: both; width: 100%; padding: 40px 20px; box-sizing: border-box; background-image: url("../images/index_sec5_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top; position: relative; z-index: 1;}

  img.index-sec5-bg { display: none;}
  img.index-sec5-title { width: 515px; max-width: 100%; height: auto;}

  .index-sec5-text-con { clear: both; width: 100%; margin: 30px 0 0 0; font-size: 1.1rem; font-weight: 500; line-height: 1.6em;}
  .index-sec5-text-con span.en-text { color: #a9a9a9; font-size: 1rem;}
  .index-sec5-text-con span.title-text { color: #007d2d; font-size: 1.4rem;}

  .index-sec5-more-bt { clear: both; width: 240px; margin: 30px 0 0 0; border-radius: 30px; background-color: #009a3c; overflow: hidden;}
  .index-sec5-more-bt a { width: 100%; padding: 8px 20px; color: #fff; font-size: 1.4rem; font-weight: 500; text-decoration: none; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}


  /************ page banner ************/

  img.page-banner-illu-2 { width: 81vw; height: auto; position: absolute; bottom: 2vw; left: calc(8vw + 2vw); z-index: 2;}
  img.about-banner-title { width: 36vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.service-banner-title { width: 42vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.case-banner-title { width: 44vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.case-progress-banner-title { width: 46vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.news-banner-title { width: 37vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.knowledge-banner-title { width: 64vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}
  img.contact-banner-title { width: 64vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}


  /************ section #about-sec1 ************/

  section#about-sec1 { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box; background-image: url("../images/about_sec1_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top; position: relative; z-index: 1;}

  img.about-sec1-bg { display: none;}
  img.about-sec1-title { width: 100%; height: auto;}
  img.about-sec1-illu { width: 100%; height: auto;}

  .about-sec1-text-con { width: 100%; margin: 30px 0 0 0; font-size: 1.1rem; font-weight: 500; line-height: 1.6em;}
  .about-sec1-text-con span.text-title { color: #0bb3ac; font-size: 1.6rem;}
  .about-sec1-text-con span.en-text { color: #a8a8a8; font-size: 0.9rem;}


  /************ section #about-sec2 ************/

  section#about-sec2 { clear: both; width: 100%; padding: 40px 20px; box-sizing: border-box; background-color: rgba(124,223,20,0.2); position: relative; z-index: 1;}

  .about-sec2-item-row { width: 100%; display: flex; justify-content: center; align-items: center;}
  .about-sec2-item-row img.item-icon { width: 90px; height: auto; margin: 0 10px;}

  .about-sec2-slogan { display: none;}
  .about-sec2-slogan-mo { width: 100%; padding: 20px 0; color: #1a1a1a; font-size: 2.2rem; font-weight: 500; line-height: 1.4em; letter-spacing: 0.1em; text-align: center;}

  .about-sec2-title { width: 100%; margin: 30px 0 0 0; text-align: center;}
  .about-sec2-title span.text-title { color: #149dbe; font-size: 1.6rem; font-weight: 500; line-height: 1.6em}
  .about-sec2-title span.text-en { color: #a8a8a8; font-size: 0.9rem;}


  /************ section #about-sec3 ************/

  section#about-sec3 { clear: both; width: 100%; padding: 0 0 80px 0; background-color: #fff; position: relative; z-index: 1;}

  .about-sec3-pic-text { width: 100%;}
  .about-sec3-pic-text img.pic { width: 100%; height: auto;}
  .about-sec3-pic-text .text-con { width: 100%; padding: 40px 20px; font-size: 1.1rem; font-weight: 500; line-height: 1.6em; box-sizing: border-box;}
  .about-sec3-pic-text .text-con span.text-title { color: #149dbe; font-size: 1.6em;}
  .about-sec3-pic-text .text-con span.text-en { color: #a8a8a8; font-size: 0.9em;}

  img.about-sec3-flow { width: 94%; height: auto; margin: 0 auto;}


  /************ section #service-sec1 ************/

  section#service-sec1 { clear: both; width: 100%; padding: 40px 20px; box-sizing: border-box; background-image: url("../images/about_sec1_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; position: relative; z-index: 1;}

  img.service-sec1-title { width: 600px; max-width: 100%; height: auto; margin: 0 0 30px 0;}

  .service-sec1-items { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .service-sec1-items .item-box { width: calc(100% / 2 - 20px); padding: 0 10px; margin: 0 10px 20px 10px; box-sizing: border-box;}
  .service-sec1-items .item-box img.item-pic { width: 90%; height: auto; margin: 0 auto;}
  .service-sec1-items .item-box .text-title { clear: both; width: 100%; padding: 8px 0; margin: 10px 0 0 0; color: #fff; font-size: 1.2rem; text-align: center; border-radius: 24px; background-color: #00395a;}

  .service-sec1-text-con { width: 100%; margin: 40px 0 0 0; font-size: 1.2rem; font-weight: 500; line-height: 1.6em; text-align: center;}
  .service-sec1-text-con span.text-title { color: #007d2d; font-size: 1.6rem;}
  .service-sec1-text-con span.text-en { color: #a7a7a7; font-size: 1rem;}


  /************ section #service-sec2 ************/

  section#service-sec2 { clear: both; width: 100%; position: relative; z-index: 1;}

  .service-sec2-intro { width: 100%; position: relative; z-index: 1;}
  .service-sec2-intro img.intro-bg { width: 100%; height: auto;}
  .service-sec2-intro .intro-text { width: 100%; padding: 0 20px; box-sizing: border-box; color: #fff; font-size: 1rem; line-height: 1.6em; position: absolute; bottom: 10px; left: 0; z-index: 2;}
  .service-sec2-intro .intro-text span.text-title { font-size: 1.4rem; font-weight: 500;}


  /************ section #service-sec3 ************/

  section#service-sec3 { clear: both; width: 100%; padding: 40px 20px; box-sizing: border-box;}

  .service-sec3-intro { width: 100%;}
  .service-sec3-intro .intro-text { width: 100%; color: #000; font-size: 1rem; line-height: 1.6em;}
  .service-sec3-intro .intro-text span.text-title { color: #009f3c; font-size: 1.4rem; font-weight: 500;}
  .service-sec3-intro .intro-illu { width: 100%; margin: 30px 0 0 0;}
  .service-sec3-intro .intro-illu img { width: 100%; height: auto;}


  /************ section #service-sec4 ************/

  section#service-sec4 { clear: both; width: 100%; position: relative; z-index: 1;}

  .service-sec4-intro-full { width: 100%; overflow: hidden; position: relative; z-index: 1;}
  .service-sec4-intro-full img.intro-bg { width: 220%; height: auto; margin: 0 0 0 -100%;}
  .service-sec4-intro-full .intro-text { width: 100%; padding: 0 20px 0 20px; box-sizing: border-box; color: #fff; font-size: 1rem; line-height: 1.6em; position: absolute; bottom: 10px; left: 0;}
  .service-sec4-intro-full .intro-text span.text-title { font-size: 1.4rem; font-weight: 500;}


  /************ section #case-sec1 ************/

  section#case-sec1 { clear: both; width: 100%; padding: 60px 20px 0 20px; box-sizing: border-box; background-image: url("../images/about_sec1_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left top; position: relative; z-index: 1;}

  img.case-sec1-bg-top { display: none;}
  img.case-sec1-title { width: 512px; max-width: 100%; height: auto;}
  
  .case-sec1-text-con { width: 100%; margin: 30px 0 0 0; font-size: 1.2rem; font-weight: 500; line-height: 1.6em;}
  .case-sec1-text-con span.text-title { color: #009d3c; font-size: 1.4rem;}
  .case-sec1-text-con span.en-text { color: #a5a5a5; font-size: 1rem;}

  img.case-sec1-illu { width: 100%; height: auto; margin: 30px 0 0 0;}


  /************ section #case-sec2 ************/

  section#case-sec2 { clear: both; width: 100%; padding: 0 20px 60px 20px; box-sizing: border-box; background-image: url("../images/case_bg_bottom.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left bottom; position: relative; z-index: 1;}

  .case-sec2-list-1 { width: 100%; margin: 30px 0 0 0;}
  .case-sec2-list-1 .photo-bx { width: 100%;}
  .case-sec2-list-1 .photo-bx img { width: 100%; height: auto;}
  .case-sec2-list-1 .info-bx { width: 100%; background-color: #f1f4f5;}
  .case-sec2-list-1 .info-bx a { width: 100%; color: #414141; text-decoration: none; display: block;}
  .case-sec2-list-1 .info-bx a:active { -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}
  .case-sec2-list-1 .info-bx .date { width: 100%; padding: 10px 20px; box-sizing: border-box; color: #f08c1e; font-size: 1.2rem;}
  .case-sec2-list-1 .info-bx .location { width: 100%; padding: 10px 20px; box-sizing: border-box; color: #fff; font-size: 1.6rem; font-weight: 500; background-color: #009d3c;}
  .case-sec2-list-1 .info-bx .type { width: 100%; padding: 10px 20px; box-sizing: border-box; font-size: 1.2rem; line-height: 2em;}

  .case-sec2-list-2 { display: none;}
  .case-sec2-list-2-mo { width: 100%; margin: 30px 0 0 0;}
  .case-sec2-list-2-mo .photo-bx { width: 100%;}
  .case-sec2-list-2-mo .photo-bx img { width: 100%; height: auto;}
  .case-sec2-list-2-mo .info-bx { width: 100%; background-color: #f1f4f5;}
  .case-sec2-list-2-mo .info-bx a { width: 100%; color: #414141; text-decoration: none; display: block;}
  .case-sec2-list-2-mo .info-bx a:active { -moz-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.5);}
  .case-sec2-list-2-mo .info-bx .date { width: 100%; padding: 10px 20px; box-sizing: border-box; color: #f08c1e; font-size: 1.2rem;}
  .case-sec2-list-2-mo .info-bx .location { width: 100%; padding: 10px 20px; box-sizing: border-box; color: #fff; font-size: 1.6rem; font-weight: 500; background-color: #009d3c;}
  .case-sec2-list-2-mo .info-bx .type { width: 100%; padding: 10px 20px; box-sizing: border-box; font-size: 1.2rem; line-height: 2em;}


  /************ section #case-progress-sec1 ************/

  section#case-progress-sec1 { clear: both; width: 100%; padding: 0 0 60px 0; box-sizing: border-box; background-image: url("../images/about_sec1_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; position: relative; z-index: 1; overflow: hidden;}

  img.case-progress-login-title-bg { display: none;}
  img.case-progress-login-title-bg-mo { width: 220vw; height: auto; margin: 0 0 0 -10vw; position: relative; z-index: 1;}

  .case-progress-login-box { clear: both; width: 100%; padding: 0 20px; box-sizing: border-box;}
  .case-progress-login-box .form-table { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .case-progress-login-box .form-table .caption { width: 90px; padding: 8px 0; margin: 10px 0; color: #00395a; font-size: 1.6rem; font-weight: 300; border-right: 3px #2bce6f solid;}
  .case-progress-login-box .form-table .column { width: calc(100% - 90px - 3px); padding: 5px 10px; margin: 4px 0; text-align: right; box-sizing: border-box;}
  .case-progress-login-box .form-table .column input[type=text], 
  .case-progress-login-box .form-table .column input[type=password] { width: 100%; padding: 10px; font-size: 1.6rem; border: 0; background-color: #e0e0e0; box-sizing: border-box;}
  .case-progress-login-box .form-confirm { clear: both; width: 100%; padding: 5px 0; margin: 30px 0 0 0; background-color: #2bce6f;}
  .case-progress-login-box .form-confirm img.login-bt { width: 100px; height: auto; margin: 0 auto;}


  /************ section #case-details-sec1 ************/

  .case-details-top { width: 100%; padding: 55px 0 0 0; box-sizing: border-box; background-color: #ebebeb;}

  .breadcrumbs-box { clear: both; width: 100%; padding: 20px; color: #149abb; font-size: 0.8rem; line-height: 1.2em; box-sizing: border-box;}
  .breadcrumbs-box a { color: #149abb; text-decoration: none;}
  .breadcrumbs-box a:hover { border-bottom: 1px #149abb solid;}

  section#case-details-sec1 { display: none;}

  section#case-details-sec1-mo { clear: both; width: 100%; padding: 0 20px 40px 20px; box-sizing: border-box; background-image: url("../images/case_bg_bottom.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left bottom; position: relative; z-index: 1;}

  .case-details-photo { width: 100%; margin: 30px 0 0 0;}
  .case-details-photo img.photo { width: 100%; height: auto; padding: 0 0 10px 0;}

  .case-details-info { width: 100%;}
  .case-details-info .case-info { width: 100%; margin: 30px 0 0 0; position: relative;}
  .case-details-info .case-info img.details-bg { width: 300px; height: auto; position: relative; z-index: 1;}
  .case-details-info .case-info .info-bx { width: 100%; padding: 0 0 0 50px; box-sizing: border-box; position: absolute; top: 40px; left: 0; z-index: 2;}
  .case-details-info .case-info .info-bx .date { width: 100%; padding: 0.5vw 0; color: #f08c1e; font-size: 1.4rem;}
  .case-details-info .case-info .info-bx .location { width: 100%; color: #009d3c; font-size: 1.8rem; font-weight: 500;}
  .case-details-info .case-info .info-bx .type { width: 100%; padding: 0.5vw 0; font-size: 1.4rem; line-height: 2.2em;}
  .case-details-info .case-title { width: 100%; position: relative;}
  .case-details-info .case-title img.case-details-title-bg { width: 340px; max-width: 100%; height: auto; position: relative; z-index: 1;}
  .case-details-info .case-title .title-bx { width: 300px; color: #00973c; font-size: 1.4rem; font-weight: 500; position: absolute; top: 10px; left: 10px; z-index: 2;}


  /************ section #case-progress-steps ************/

  .banner-box-2 { width: 100%; overflow: hidden; position: relative; z-index: 1;}
  
  img.case-progress-steps-banner { width: 100%; height: auto; position: relative; z-index: 1;}
  img.case-progress-steps-banner-title { width: 25vw; height: auto; position: absolute; bottom: 5vw; right: 7vw; z-index: 2;}

  section#case-progress-steps { clear: both; width: 100%; padding: 60px 20px 0 20px; box-sizing: border-box; background-image: url("../images/case_progress_steps_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; position: relative; z-index: 1;}

  .page-case-progress-steps-title { width: 100%; padding: 10px 0; margin: 0 0 50px 0; font-size: 1.8rem; font-weight: 500; text-align: center; line-height: 1.2em; border: 3px #00395a solid;}
  .page-case-progress-steps-title span.title { color: #1a1a1a;}
  .page-case-progress-steps-title span.numbers { color: #bb272d;}

  ul.progress-steps-list { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; position: relative;}
  ul.progress-steps-list li { width: calc(100% / 4); padding: 0; margin: 0 0 20px 0; background-image: url("../images/progress_step_line_bg.png"); background-repeat: no-repeat; background-size: auto 1px; background-position: left 0 top 27vw; cursor: pointer;}
  ul.progress-steps-list li:first-child { background-position: left 10vw  top 27vw;}
  ul.progress-steps-list li:last-child { background-position: right 10vw top 27vw;}
  ul.progress-steps-list li.unstep { opacity: 0.5;}
  ul.progress-steps-list li .step-box { width: 100%; padding: 0 5px; box-sizing: border-box;}
  ul.progress-steps-list li .step-box img.icon { width: 16vw; height: auto; margin: 0 auto 2vw auto;}
  ul.progress-steps-list li .step-box .sub-title { clear: both; width: 100%; color: #fff; font-size: 3vw; text-align: center; border-radius: 1.4vw; background-color: #00395a;}
  ul.progress-steps-list li .step-box .dot-line { clear: both; width: 6vw; height: 10vw; margin: 0 auto; background-image: url("../images/progress_step_dot_line.png"); background-repeat: no-repeat; background-size: 0.4vw auto; background-position: center center; display: flex; justify-content: center; align-items: center; position: relative;}
  ul.progress-steps-list li .step-box .dot-line .dot { width: 4vw; height: 4vw; border-radius: 100%; background-color: #00395a; display: block;}
  ul.progress-steps-list li .step-box .step-num { clear: both; width: 90%; padding: 1vw 0; margin: 0 auto; color: #00395a; font-size: 4.4vw; font-weight: 500; letter-spacing: -0.1em; line-height: 2vw; text-align: center; border: 2px #00395a solid; border-radius: 3vw;}
  ul.progress-steps-list li.sel .step-box .step-num { clear: both; width: 90%; padding: 1vw 0; margin: 0 auto; color: #fff; font-size: 4.4vw; font-weight: 500; letter-spacing: -0.1em; line-height: 2vw; text-align: center; border: 2px #00395a solid; background-color: #00395a; border-radius: 3vw;}
  ul.progress-steps-list li.sel .step-box .dot-line .dot { width: 3vw; height: 3vw; border: 0.8vw #2bce6f solid; border-radius: 100%; background-color: #00395a; display: block;}

  .progress-step-content { clear: both; width: 100%; padding: 40px 0; box-sizing: border-box;}
  .progress-step-content div.content { width: 100%; display: none; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .progress-step-content div.content span.comingsoon { font-size: 1.4rem;}
  .progress-step-content div.content .col-left { width: 100%; margin: 0 0 30px 0;}
  .progress-step-content div.content .col-left img.step-sofar-title { width: 100%;}
  .progress-step-content div.content .col-left .step-title { width: 100%; padding: 10px 20px; margin: 20px 0; color: #fff; font-size: 1.8rem; font-weight: 500; background-color: #e48800; box-sizing: border-box;}
  .progress-step-content div.content .col-left .step-con-list { width: 100%; padding: 15px 0; color: #000; font-size: 1.4rem; border-bottom: 1px #939393 solid;}
  .progress-step-content div.content .col-left .step-con-list span.color-red { color: #bb272d;}
  .progress-step-content div.content .col-left .step-con-list:first-child { border-top: 1px #939393 solid;}
  .progress-step-content div.content .col-left .step-con-list span.dw-bt { font-size: 1.4rem;}
  .progress-step-content div.content .col-left .step-con-list span.dw-bt a { padding: 5px 30px; color: #fff; text-align: center; text-decoration: none; border-radius: 20px; background-color: #007d2d;}
  .progress-step-content div.content .col-right { width: 100%; position: relative;}
  .progress-step-content div.content .col-right img.progress-step-paper, 
  .progress-step-content div.content .col-right img { max-width: 100%; height: auto; border: 20px #939393 solid; box-sizing: border-box; position: relative; z-index: 2;}
  .progress-step-content div.content .col-right img.step-arrow-ill { display: none;}


  /************ section #news-sec1 ************/

  section#news-sec1 { clear: both; width: 100%; padding: 0 0 26vw 0; background-image: url("../images/news_bg_bottom.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: left bottom; position: relative; z-index: 1;}

  img.news-sec1-top-bg { width: 100%; height: auto; position: absolute; top: 0; left: 0; z-index: 1;}

  .news-sec1-con { width: 100%; padding: 30px 20px 0 20px; box-sizing: border-box; position: relative; z-index: 2;}
  .news-sec1-con img.news-title { width: 500px; max-width: 100%; height: auto;}
  .news-sec1-con ul.news-list { clear: both; width: 100%; padding: 20px 0 0 0; margin: 0; list-style: none; display: block;}
  .news-sec1-con ul.news-list li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #2bcf6f solid;}
  .news-sec1-con ul.news-list li a { width: 100%; padding: 20px 0; text-decoration: none; display: flex; justify-content: flex-start; align-items: flex-start;}
  .news-sec1-con ul.news-list li a .icon { width: 80px;}
  .news-sec1-con ul.news-list li a .icon img.icon-on { width: 50px; height: auto; margin: 0 auto; display: block;}
  .news-sec1-con ul.news-list li a .icon img.icon-over { display: none;}
  .news-sec1-con ul.news-list li a .date-title { width: calc(100% - 80px);}
  .news-sec1-con ul.news-list li a .date-title .date { width: 100%; padding: 0 0 5px 0;}
  .news-sec1-con ul.news-list li a .date-title .date .ymd { width: 100%; padding: 0 0 5px 0; color: #f28e1e; font-size: 1rem;}
  .news-sec1-con ul.news-list li a .date-title .date .latest { width: 100px; padding: 5px 0; color: #fff; font-size: 0.9rem; text-align: center; background-color: #008d45;}
  .news-sec1-con ul.news-list li a .date-title .title { width: 100%; color: #006837; font-size: 1.2rem; font-weight: 500; line-height: 1.4em;}
  .news-sec1-con ul.news-list li a:hover { background-color: #008d45;}
  .news-sec1-con ul.news-list li a:hover .icon img.icon-on { display: none;}
  .news-sec1-con ul.news-list li a:hover .icon img.icon-over { width: 50px; height: auto; margin: 0 auto; display: block;}
  .news-sec1-con ul.news-list li a:hover .date-title .date .ymd { color: #fff;}
  .news-sec1-con ul.news-list li a:hover .date-title .date .latest { color: #008d45; background-color: #fff;}
  .news-sec1-con ul.news-list li a:hover .date-title .title { color: #fff;}

  ul.news-page-num { clear: both; width: 100%; padding: 0; margin: 40px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.news-page-num li { padding: 0; margin: 0 3px 6px 3px;}
  ul.news-page-num li a { padding: 5px; color: #008d45; font-size: 1rem; text-decoration: none; display: block;}
  ul.news-page-num li a:hover { color: #fff; background-color: #008d45;}
  ul.news-page-num li a.sel { color: #fff; background-color: #008d45;}


  /************ section #news-content-sec1 ************/

  section#news-content-sec1 { clear: both; width: 100%; padding: 0 20px 25vw 20px; box-sizing: border-box; background-image: url("../images/news_bg_bottom.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: left bottom; position: relative; z-index: 1;}

  .news-con-title { width: 100%; position: relative; z-index: 1;}
  .news-con-title img.news-con-title-bg { width: 340px; height: auto; position: absolute; top: 0; left: 0; z-index: 1;}
  .news-con-title .date { width: 100%; padding: 10px 0 0 100px; box-sizing: border-box; color: #f28e1e; font-size: 1.6rem; position: relative; z-index: 2;}
  .news-con-title .latest { width: 160px; padding: 5px 0; margin: 0 0 0 100px; color: #fff; font-size: 1.4rem; text-align: center; background-color: #008d45; position: relative; z-index: 2;}
  .news-con-title .title { width: 100%; padding: 100px 0 0 20px; box-sizing: border-box; color: #000; font-size: 1.6rem; font-weight: 500; line-height: 1.2em; position: relative; z-index: 2;}

  .news-con-text { clear: both; width: 100%; margin: 50px 0 0 0; font-size: 1rem; line-height: 1.8em; word-break: break-all;}
  .news-con-text a { color: #414141; text-decoration: none; border-bottom: 1px #414141 solid;}
  .news-con-text a:hover { color: #008d45; border-bottom: 1px #008d45 solid;}
  .news-con-text img { max-width: 100%; height: auto;}

  .news-con-goback { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: center; align-items: flex-end;}
  .news-con-goback .prev-news, 
  .news-con-goback .next-news { width: 30%; position: relative;}
  .news-con-goback .prev-news img, 
  .news-con-goback .next-news img { width: 100%; height: auto; position: relative; z-index: 1;}
  .news-con-goback .prev-news a { color: #00973c; font-size: 0.8rem; text-decoration: none; display: block; position: absolute; bottom: 5px; right: 0; z-index: 2;}
  .news-con-goback .next-news a { color: #00973c; font-size: 0.8rem; text-decoration: none; display: block; position: absolute; bottom: 5px; left: 0; z-index: 2;}
  .news-con-goback .prev-news a:hover, 
  .news-con-goback .next-news a:hover { color: #f28e1e;}
  .news-con-goback .goback { width: 40%;}
  .news-con-goback .goback a { width: 80%; padding: 3px 0; margin: 0 auto; color: #fff; font-size: 1rem; text-align: center; text-decoration: none; border-radius: 6vw; background-color: #00973c; display: block;}
  .news-con-goback .goback a:hover { background-color: #f28e1e;}


  /************ section #knowledge-qa-sec1 ************/

  section#knowledge-qa-sec1 { clear: both; width: 100%; padding: 30px 0; background-image: url("../images/about_sec1_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left top; position: relative; z-index: 1;}

  .knowledge-qa-title { width: 100%; padding: 0 20px; box-sizing: border-box; position: relative; z-index: 1;}
  .knowledge-qa-title img.kn-qa-title { width: 100%; height: auto; position: relative; z-index: 2;}
  .knowledge-qa-title img.kn-qa-illu { display: none;}
  .knowledge-qa-title .kn-qa-title { width: 100%; margin: 20px 0 0 0; position: relative; z-index: 3;}
  .knowledge-qa-title .kn-qa-title span.title-cn { color: #0bb2ab; font-size: 2rem; font-weight: 500;}
  .knowledge-qa-title .kn-qa-title span.text-en { color: #a7a7a7; font-size: 1.1rem;}

  ul.knowledge-qa-list { width: 100%; padding: 0; margin: 30px 0 0 0; list-style: none; display: block; position: relative; z-index: 1;}
  ul.knowledge-qa-list li { width: 100%; padding: 20px; margin: 0; font-size: 1.1rem; line-height: 1.8em; box-sizing: border-box;}
  ul.knowledge-qa-list li:nth-child(even) { background-color: rgba(135,193,63,0.2);}
  ul.knowledge-qa-list li .kn-qa-q { width: 100%; padding: 0 0 10px 0; display: flex; justify-content: space-between; align-items: flex-start; cursor: pointer;}
  ul.knowledge-qa-list li .kn-qa-q span.icon-close { display: none;}
  ul.knowledge-qa-list li .kn-qa-a { width: 100%; padding: 10px 0 0 0; border-top: 1px #006837 dashed; display: none;}
  ul.knowledge-qa-list li .kn-qa-a a { color: #006837; border-bottom: 1px #006837 dashed; text-decoration: none;}
  ul.knowledge-qa-list li span.title { font-size: 1.2rem; font-weight: 500;}


  /************ section #knowledge-article-sec1 ************/

  section#knowledge-article-sec1 { clear: both; width: 100%; padding: 30px 20px 60px 20px; box-sizing: border-box; background-image: url("../images/kn_article_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left top; position: relative; z-index: 1;}

  .knowledge-art-title { width: 100%; position: relative; z-index: 2;}
  .knowledge-art-title img.kn-art-title { width: 100%; height: auto; position: relative; z-index: 1;}
  .knowledge-art-title img.kn-art-top-illu { width: 100%; height: auto; margin: -7.5vw 0 0 0; position: relative; z-index: 2;}

  .knowledge-art-list { width: 100%; margin: -20vw 0 0 0; position: relative; z-index: 2;}
  .knowledge-art-list .kn-art-list-title { width: 100%; margin: 0 auto 30px auto; text-align: right;}
  .knowledge-art-list .kn-art-list-title span.title-cn { color: #008d45; font-size: 2rem; font-weight: 500;}
  .knowledge-art-list .kn-art-list-title span.text-en { color: #a7a7a7; font-size: 1.1rem;}
  .knowledge-art-list .article-box { width: 80%; margin: 0 auto 30px auto; box-sizing: border-box;}
  .knowledge-art-list .article-box a { width: 100%; color: #000; text-decoration: none;}
  .knowledge-art-list .article-box a img.article-pic { width: 100%; height: auto;}
  .knowledge-art-list .article-box a:hover { color: #008d45;}
  .knowledge-art-list .article-box a .text-title { width: 100%; padding: 10px 0 0 0; font-size: 1.2rem; font-weight: 500; line-height: 1.2em; text-align: center;}
  .knowledge-art-list .empty-green { display: none;}


  .kn-article-con-title { width: 100%; position: relative; z-index: 1;}
  .kn-article-con-title img.news-con-title-bg { width: 340px; height: auto; position: absolute; top: 0; left: 0; z-index: 1;}
  .kn-article-con-title .date { width: 100%; padding: 10px 0 0 100px; box-sizing: border-box; color: #f28e1e; font-size: 1.6rem; position: relative; z-index: 2;}
  .kn-article-con-title .latest { width: 160px; padding: 5px 0; margin: 0 0 0 100px; color: #fff; font-size: 1.4rem; text-align: center; background-color: #008d45; position: relative; z-index: 2;}
  .kn-article-con-title .title { width: 100%; padding: 100px 0 0 20px; box-sizing: border-box; color: #000; font-size: 1.6rem; font-weight: 500; line-height: 1.2em; position: relative; z-index: 2;}

  .kn-article-con-text { clear: both; width: 100%; margin: 50px 0 0 0; font-size: 1rem; line-height: 1.8em; word-break: break-all;}
  .kn-article-con-text a { color: #414141; text-decoration: none; border-bottom: 1px #414141 solid;}
  .kn-article-con-text a:hover { color: #008d45; border-bottom: 1px #008d45 solid;}
  .kn-article-con-text img { max-width: 100%; height: auto;}


  /************ section #contact-sec1 ************/
  
  section#contact-sec1 { clear: both; width: 100%; background-image: url("../images/about_sec1_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top; overflow: hidden; position: relative; z-index: 1;}

  img.contact-sec1-title-illu { width: 160%; height: auto; margin: 0 0 0 -45%; position: relative; z-index: 1;}
  img.contact-sec1-title-illu-2 { width: 220%; height: auto; margin: -70vw 0 0 -25%; position: relative; z-index: 2;}

  .contact-info { clear: both; width: 100%; padding: 30px 20px; box-sizing: border-box; position: relative; z-index: 3;}
  .contact-info .logo-social { width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .contact-info .logo-social img.logo { width: 100%; height: auto;}
  .contact-info .logo-social img.social-icon { width: 36px; height: auto; margin: 20px 5px;}
  .contact-info .addr-tel { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .contact-info .addr-tel .caption { width: 35px; color: #00a63c; font-size: 1.4rem;}
  .contact-info .addr-tel .info { width: calc(100% - 35px); padding: 2px 0 0 0; color: #717071; font-size: 1.2rem; line-height: 1.2em;}
  .contact-info .addr-tel .info span.addr { color: #231815; font-size: 1.2rem; font-weight: 500;}
  .contact-info .addr-tel .info span.addr-en { padding: 5px 0 0 0; font-size: 1rem; display: block;}


  /************ section #contact-sec2 ************/

  section#contact-sec2 { clear: both; width: 100%; padding: 60px 20px; box-sizing: border-box; background-color: #149cbd;}

  .contact-sec2-con { width: 100%;}
  .contact-sec2-con img.contact-sec2-title { width: 515px; max-width: 100%; height: auto;}
  .contact-sec2-con .contact-form { width: 100%; margin: 30px 0 0 0;}
  .contact-sec2-con .contact-form .caption { width: 100%; padding: 0 0 5px 0; color: #fff; font-size: 1.1rem; font-weight: 500;}
  .contact-sec2-con .contact-form .column { width: 100%; padding: 0 0 20px 0; color: #fff; font-size: 1.1rem;}
  .contact-sec2-con .contact-form .column input[type=text], 
  .contact-sec2-con .contact-form .column input[type=tel], 
  .contact-sec2-con .contact-form .column input[type=email] { width: 100%; padding: 10px; color: #414141; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #fff; box-sizing: border-box;}
  .contact-sec2-con .contact-form .column input[type=radio] { position: absolute; opacity: 0;}
  .contact-sec2-con .contact-form .column input[type="radio"] + .radio-label:before { content: ''; background: #149cbd; border-radius: 100%; border: 1px solid #fff; display: inline-block; width: 20px; height: 20px; position: relative; top: 2px; margin-right: 5px; vertical-align: top; cursor: pointer; text-align: center;}
  .contact-sec2-con .contact-form .column input[type="radio"]:checked + .radio-label:before { background-color: #fff; box-shadow: inset 0 0 0 4px #149cbd;}
  .contact-sec2-con .contact-form .column input[type="radio"]:focus + .radio-label:before {outline: none; border-color: #fff;}
  .contact-sec2-con .contact-form .column input[type="radio"]:disabled + .radio-label:before { box-shadow: inset 0 0 0 4px #fff; border-color: #fff; background: #fff;}
  .contact-sec2-con .contact-form .column input[type="radio"] + .radio-label:empty:before { margin-right: 0;}
  .contact-sec2-con .contact-form .column textarea { width: 100%; height: 100px; padding: 10px; color: #414141; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #fff; box-sizing: border-box;}
  .contact-sec2-con .contact-form .column-bt { clear: both; width: 100%; padding: 10px 0 0 0;}
  .contact-sec2-con .contact-form .column-bt .form-submit { width: 200px;}
  .contact-sec2-con .contact-form .column-bt .form-submit a { width: 100%; padding: 5px 0; color: #fff; font-size: 1.4rem; text-align: center; text-decoration: none; border-radius: 30px; background-color: #87c13f; display: block;}
  .contact-sec2-con .contact-form .column-bt .form-submit a:hover { background-color: #00973c;}


  /************ section #contact-sec3 ************/

  section#contact-sec3 { clear: both;}

  iframe { width: 100%; height: 400px; padding: 0; margin: 0; border: 0;}


  /************ #sitemap ************/

  ul#sitemap { clear: both; width: 100%; padding: 40px; box-sizing: border-box; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; position: relative; z-index: 2;}
  ul#sitemap li { width: 100%; padding: 0; margin: 0 0 30px 0;}
  ul#sitemap li a { width: 100%; color: #f28e1e; font-size: 1.8rem; font-weight: 500; text-align: center; text-decoration: none; border-bottom: 2px #f28e1e solid; display: block;}
  ul#sitemap li a:hover { color: #00973c;}
  ul#sitemap li ul.sitemap-popup { width: 100%; padding: 10px 0 0 0; margin: 0; list-style: none; display: block;}
  ul#sitemap li ul.sitemap-popup li { width: 100%; padding: 5px 0; margin: 0;}
  ul#sitemap li ul.sitemap-popup li a { width: 100%; color: #666; font-size: 1.4rem; text-align: center; text-decoration: none; border-bottom: 0; display: block;}
  ul#sitemap li ul.sitemap-popup li a:hover { color: #f28e1e;}


  /************ 404 ************/

  .error-404 { clear: both; width: 100%; padding: 60px 20px; box-sizing: border-box; text-align: center; position: relative; z-index: 2;}
  .error-404 span.text-con-1 { font-size: 3.4rem; font-weight: 700; line-height: 2em;}
  .error-404 span.text-con-2 { font-size: 2rem; font-weight: 500;}
  

  /************ footer ************/

  footer { clear: both; width: 100%;}

  .footer-top { width: 100%; padding: 30px 20px; box-sizing: border-box; background-color: #333;}
  .footer-top ul.footer-nav { width: 100%; padding: 0; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .footer-top ul.footer-nav li { width: calc(100% / 3); padding: 0; margin: 10px 0; text-align: center; border-right: 1px #f38f1e solid; box-sizing: border-box;}
  .footer-top ul.footer-nav li:first-child { border-left: 1px #f38f1e solid;}
  .footer-top ul.footer-nav li:nth-child(3n+1) { border-left: 1px #f38f1e solid;}
  .footer-top ul.footer-nav li a { color: #fff; font-size: 1.1rem; font-weight: 500; text-decoration: none;}
  .footer-top ul.footer-nav li a:hover { border-bottom: 1px #fff solid;}
  .footer-top ul.footer-nav li ul.footer-nav-popup { width: 100%; padding: 5px 0 0 0; margin: 0; list-style: none; display: block;}
  .footer-top ul.footer-nav li ul.footer-nav-popup li { clear: both; width: 100%; padding: 0; margin: 0; line-height: 1.8rem; text-align: center; border: 0;}
  .footer-top ul.footer-nav li ul.footer-nav-popup li a { color: #fff; font-size: 0.9rem; font-weight: 400; text-decoration: none;}
  .footer-top ul.footer-nav li ul.footer-nav-popup li a:hover { border-bottom: 1px #fff solid;}
  .footer-top .footer-logo { clear: both; width: 100%; margin: 30px 0 0 0;}
  .footer-top .footer-logo img { width: 170px; height: auto; margin: 0 auto;}

  .footer-copyright { clear: both; width: 100%; padding: 20px; box-sizing: border-box; color: #000; line-height: 1.6em; text-align: center; background-color: #f38f1e;}
  .footer-copyright span.info { width: 100%; padding: 5px 0; font-size: 1rem; font-weight: 500; display: block;}
  .footer-copyright span.copyright { width: 100%; padding: 5px 0; font-size: 0.8rem; display: block;}
  .footer-copyright span.sitemap { width: 100%; padding: 5px 0; font-size: 1rem; font-weight: 500; display: block;}
  .footer-copyright a { color: #000; text-decoration: none;}
  .footer-copyright a:hover { border-bottom: 1px #000 solid;}
  

}