@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%;}

/************ page number ************/
#page-num { clear: both; width: 100%; margin: 30px 0 0 0;}
#page-num ul.page-num { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
#page-num ul.page-num li { padding: 0; margin: 0 5px 20px 5px;}
#page-num ul.page-num li a { width: 36px; height: 36px; color: #AE7D21; font-size: 1.2em; line-height: 1em; text-decoration: none; border-radius: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center;}
#page-num ul.page-num li a:hover { background-color: #ccc;}
#page-num ul.page-num li a.sel { color: #fff; background-color: #AE7D21;}


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

  /************ aside ************/

  aside { width: 108px; text-align: center; position: fixed; top: 300px; right: 10px; z-index: 990;}
  aside img.schedule-search-bt { width: 108px; height: auto;}
  aside img.line { width: 60px; height: auto; margin: 20px 0 0 0;}
  aside a { text-decoration: none;}
  aside span.text { color: #000; font-size: 0.8em; line-height: 1em;}


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

  header { width: 100%; height: 100px; background-color: #F1F3F0; display: flex; justify-content: space-between; align-items: center; position: relative;}

  .header-logo { width: 255px; padding: 0 0 0 calc(50% - 720px); margin: 0 0 0 10px; position: relative; z-index: 998;}
  .header-logo img { width: 100%; height: auto;}
  
  nav#mo { display: none;}

  nav#pc { width: 100%; position: absolute; top: 0; left: 0; z-index: 990;}
  nav#pc ul.hd-nav { width: 100%; padding: 0 calc(50% - 720px + 70px) 0 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: stretch; box-sizing: border-box;}
  nav#pc ul.hd-nav li { padding: 0; margin: 0 15px; position: relative;}
  nav#pc ul.hd-nav li a { height: 100px; color: #414141; font-size: 1.2em; font-weight: 300; text-decoration: none; display: flex; align-items: center; cursor: pointer;}
  nav#pc ul.hd-nav li a:hover { font-weight: 500;}
  nav#pc ul.hd-nav li a.sel { font-weight: 500;}
  nav#pc .bg-bar { width: 100%; height: 32px; background-color: rgba(174,125,33,0.6); display: none; position: absolute; top: 100px; left: 0; z-index: 991;}
  nav#pc ul.hd-nav li ul.hd-nav-snd { width: 400px; height: 32px; padding: 0; margin: 0; list-style: none; display: none; justify-content: flex-start; position: absolute; top: 100px; left: -10px; z-index: 999;}
  nav#pc ul.hd-nav li ul.hd-nav-snd li { height: 100%; padding: 0; margin: 0;}
  nav#pc ul.hd-nav li ul.hd-nav-snd li a { height: 100%; padding: 0 15px; color: #fff; font-size: 1.1em; line-height: 1em; font-weight: 300; text-decoration: none; display: flex; align-items: center;}
  nav#pc ul.hd-nav li ul.hd-nav-snd li a:hover { font-weight: 500; background-color: #AE7D21;}

  .social-icon { width: 30px; padding: 0 calc(50% - 720px) 0 0; margin: 0 20px; position: relative; z-index: 998;}
  .social-icon img { width: 30px; height: auto;}


  /************ banner (index) ************/

  .index-banner-box { clear: both; width: 100%;}
  .index-banner-box div { width: 100%; position: relative;}
  .index-banner-box div img { width: 100%; height: auto;}
  .index-banner-box div img.banner-hp-text { width: 21vw; height: auto; position: absolute; bottom: 0; left: 15vw;}


  /************ section (index) ************/

  section#index { clear: both; width: 100%; background-image: url("../images/index_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #index-about { width: 100%; padding: 50px calc(50% - 660px); box-sizing: border-box;}

  .index-about-pic { width: 610px; display: flex; justify-content: flex-start; align-items: flex-start; float: left;}
  .index-about-pic img.pic1 { width: calc(100% / 3 - 10px); height: auto; margin: 0 10px 0 0;}
  .index-about-pic img.pic2 { width: calc(100% / 3 - 10px); height: auto; margin: 150px 10px 0 0;}
  .index-about-pic img.pic3 { width: calc(100% / 3 - 10px); height: auto; margin: 60px 0 0 0;}

  .index-about-main { width: calc(100% - 610px); padding: 165px 60px 0 70px; box-sizing: border-box; position: relative; float: right;}
  .index-about-main .title-box { width: 100%; box-sizing: border-box;}
  .index-about-main .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .index-about-main .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .index-about-main .text-slogan { width: 100%; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .index-about-main .text-content { width: 100%; margin: 20px 0 0 0; font-size: 1em; line-height: 1.8em; letter-spacing: 0.1em; box-sizing: border-box;}
  .index-about-main .shape { height: 160px; width: 160px; border-right: 3px solid #D4D4D4; -moz-transform: skew(-45deg); -webkit-transform: skew(-45deg); transform: skew(-45deg); position: absolute; top: 165px; left: 290px;}
  .index-about-main .more-bt { clear: both; width: 190px; margin: 30px 0 0 0;}
  .index-about-main .more-bt img { width: 100%; height: auto;}

  #index-brand { clear: both; width: 100%; padding: 50px calc(50% - 660px); box-sizing: border-box;}

  .index-brand-main { width: calc(100% - 355px); padding: 0 80px 0 185px; box-sizing: border-box; position: relative; float: left;}
  .index-brand-main .title-box { width: 100%; box-sizing: border-box;}
  .index-brand-main .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .index-brand-main .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .index-brand-main .text-slogan { width: 100%; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .index-brand-main .text-content { width: 100%; margin: 20px 0 0 0; font-size: 1em; line-height: 1.8em; letter-spacing: 0.1em; box-sizing: border-box;}
  .index-brand-main .shape { height: 160px; width: 160px; border-right: 3px solid #D4D4D4; -moz-transform: skew(45deg); -webkit-transform: skew(45deg); transform: skew(45deg); position: absolute; top: 5px; left: -70px;}
  .index-brand-main .more-bt { clear: both; width: 190px; margin: 30px 0 0 0;}
  .index-brand-main .more-bt img { width: 100%; height: auto;}

  .index-brand-pic { width: 355px; padding: 0 80px 0 0; box-sizing: border-box; float: left;}
  .index-brand-pic img { width: 100%; height: auto;}

  #index-works { clear: both; width: 100%; margin: 50px 0; background-image: url("../images/index_works_bg.png"); background-repeat: no-repeat; background-position: center top;}

  .index-works-list-full { clear: both; width: 1420px; padding: 25px 0 0 0; margin: 0 auto; box-sizing: border-box; overflow: hidden;}
  .index-works-list-full .works-list { width: 1320px; padding: 0 60px;}
  .index-works-list-full .works-list .pic { width: 780px; float: left;}
  .index-works-list-full .works-list .pic img { width: 100%; height: auto;}
  .index-works-list-full .works-list .works-infor { width: calc(100% - 780px); padding: 120px 80px 0 80px; box-sizing: border-box; position: relative; float: left;}
  .index-works-list-full .works-list .works-infor .title-box { width: 100%; box-sizing: border-box;}
  .index-works-list-full .works-list .works-infor .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .index-works-list-full .works-list .works-infor .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .index-works-list-full .works-list .works-infor .name { width: 100%; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .index-works-list-full .works-list .works-infor .intro { width: 100%; font-size: 1rem; line-height: 1.8em;}
  .index-works-list-full .works-list .works-infor .intro span { color: #AE7D21; border-bottom: 2px #AE7D21 solid;}
  .index-works-list-full .works-list .works-infor .more-bt { width: 100%; position: absolute; top: 480px; left: 80px;}
  .index-works-list-full .works-list .works-infor .more-bt img { width: 190px; height: auto;}

  .slider {
    width: 90%;
    margin: 0 auto;
  }

  .slick-slide {
    margin: 0px;
  }

  .slick-slide img {
    width: 100%;
  }

  .slick-prev:before,
  .slick-next:before {
    color: black;
  }

  .slick-slide {
    transition: all ease-in-out .3s;
    opacity: 1;
  }

  .slick-active {
    opacity: 1;
  }

  .slick-current {
    opacity: 1;
  }
  
  #sec-service .serv-column-rt { width: 31px; height: 301px; background-image: url("../images/hp_service_bg_right.png"); background-repeat: no-repeat;}

  #index-news { clear: both; width: 100%; padding: 0 calc(50% - 660px) 60px calc(50% - 660px); box-sizing: border-box;}

  .index-news-title { width: 100%; margin: 0 0 50px 0; display: flex; justify-content: flex-start; align-items: flex-end;}
  .index-news-title .title-box { width: 240px; margin: 0 0 15px 100px;}
  .index-news-title .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .index-news-title .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .index-news-title .text-slogan { font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .index-news-title .shape { width: 160px; height: 160px; margin: 0 0 10px -80px; border-right: 3px solid #D4D4D4; -moz-transform: skew(45deg); -webkit-transform: skew(45deg); transform: skew(45deg);}

  .index-news-list { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .index-news-list .news-list { width: calc(100% / 3 - 30px); margin: 0 15px;}
  .index-news-list .news-list a { color: #414141; text-decoration: none; display: block;}
  .index-news-list .news-list .pic { width: 100%; height: 200px; margin: 0 0 10px 0; overflow: hidden;}
  .index-news-list .news-list .pic img { width: 100%; height: auto;}
  .index-news-list .news-list .date { width: 100%; padding: 0 5px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .index-news-list .news-list .date span.mon-day { color: #AE7D21; font-size: 3em; font-weight: 600;}
  .index-news-list .news-list .date span.week-year { padding: 0 0 0 10px; color: #99800F; font-size: 1.1em; line-height: 1.2em;}
  .index-news-list .news-list .title { width: 100%; padding: 0 5px; box-sizing: border-box; font-size: 1.2em; font-weight: 600; letter-spacing: 0.1em;}
  .index-news-list .news-list .hr { width: 70px; margin: 5px 0 10px 5px; border-bottom: 2px #99800F solid; display: block;}
  .index-news-list .news-list .intro { clear: both; width: 100%; padding: 0 5px; box-sizing: border-box; margin: 10px 0 0 0; font-size: 1em; line-height: 1.8em; letter-spacing: 0.1em;}


  /************ banner (page) ************/

  .banner-box { clear: both; width: 100%;}
  .banner-box div { width: 100%; position: relative;}
  .banner-box div img { width: 100%; height: auto;}
  .banner-box div img.banner-text { width: auto; height: 13vw; position: absolute; bottom: 4vw; left: 12vw;}
  .banner-box div img.banner-text2 { width: auto; height: 13vw; position: absolute; bottom: 4vw; left: 12vw;}
  .banner-box div img.banner-text3 { width: auto; height: 13vw; position: absolute; bottom: 4vw; left: 12vw;}
  .banner-box div img.banner-text4 { width: auto; height: 13vw; position: absolute; bottom: 3vw; right: 24vw;}
  
  img.banner-text-works { clear: both; width: auto; height: 13vw;}


  /************ section (about) ************/

  section#page-about { clear: both; width: 100%; background-image: url("../images/about_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #about { width: 100%; padding: 45px calc(50% - 630px); box-sizing: border-box;}

  .about-pic { width: 450px; padding: 0 10px 0 0; margin: 0 10px 0 0; border-right: 1px #fff solid; box-sizing: border-box; float: left;}
  .about-pic img { width: 100%; height: auto; margin: 0 0 15px 0;}

  .about-main { width: calc(100% - 470px); padding: 60px 0; box-sizing: border-box; float: right; position: relative;}
  .about-main .title-box { width: 100%; padding: 0 0 0 60px; box-sizing: border-box;}
  .about-main .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .about-main .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .about-main .text-slogan { width: 100%; padding: 0 0 0 60px; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .about-main .text-content { width: 100%; margin: 10px 0 0 0; padding: 30px 40px 30px 60px; font-size: 1em; letter-spacing: 0.1em; line-height: 1.8em; background-color: #fff; box-sizing: border-box;}
  .about-main .shape { height: 160px; width: 160px; border-right: 3px solid #D4D4D4; -moz-transform: skew(-45deg); -webkit-transform: skew(-45deg); transform: skew(-45deg); position: absolute; top: 65px; left: 290px;}

  #brand { clear: both; width: 100%; padding: 45px calc(50% - 630px); box-sizing: border-box;}

  .brand-pic { width: 380px; padding: 0 0 0 10px; margin: 0 0 0 10px; border-left: 1px #fff solid; box-sizing: border-box; float: left;}
  .brand-pic img { width: 100%; height: auto; margin: 0 0 15px 0;}

  .brand-main { width: calc(100% - 400px); padding: 35px 0; box-sizing: border-box; float: left; position: relative;}
  .brand-main .title-box { width: 100%; padding: 0 0 0 50px; box-sizing: border-box;}
  .brand-main .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .brand-main .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .brand-main .text-slogan { width: 100%; padding: 0 0 0 50px; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .brand-main .text-content { width: 100%; margin: 15px 0 0 0; padding: 30px 50px; font-size: 1em; letter-spacing: 0.1em; line-height: 1.8em; background-color: #fff; box-sizing: border-box;}
  .brand-main .shape { height: 160px; width: 160px; border-right: 3px solid #D4D4D4; -moz-transform: skew(-45deg); -webkit-transform: skew(-45deg); transform: skew(-45deg); position: absolute; top: 40px; left: 290px;}

  #organization { clear: both; width: 100%; position: relative;}

  .about-org-content { width: 100%; padding: 0 calc(50% - 650px); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; position: absolute; top: 0; left: 0;}
  .about-org-content .title-logo { width: 330px; margin: 14vw 0 0 0;}
  .about-org-content .title-logo .org-title { width: 220px; margin: 0 0 10px 0;}
  .about-org-content .title-logo .org-title .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .about-org-content .title-logo .org-title .title-2 { width: 170px; height: 30px; margin: -12px 0 0 100px; color: #fff; border: 1px #fff solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .about-org-content .title-logo img.org-logo { width: 280px; height: auto;}
  .about-org-content .org-tree { width: calc(100% - 330px); margin: 2vw 0 0 0;}
  .about-org-content .org-tree img.org-tree { width: 13vw; height: auto;}

  img.org-bg { width: 100%; height: auto;}

  #architect { clear: both; width: 100%; padding: 45px calc(50% - 630px); box-sizing: border-box;}

  .architect-main { width: calc(100% - 400px); padding: 35px 0; box-sizing: border-box; float: left; position: relative;}
  .architect-main .title-box { width: 100%; padding: 0 0 0 50px; box-sizing: border-box;}
  .architect-main .title-box .title-1 { width: 140px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .architect-main .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 130px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .architect-main .text-slogan { width: 100%; padding: 0 0 0 50px; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .architect-main .text-content { width: 100%; margin: 15px 0 0 0; padding: 30px 50px; font-size: 1em; letter-spacing: 0.1em; line-height: 1.8em; background-color: #fff; box-sizing: border-box;}
  .architect-main .shape { height: 160px; width: 160px; border-right: 3px solid #D4D4D4; -moz-transform: skew(-45deg); -webkit-transform: skew(-45deg); transform: skew(-45deg); position: absolute; top: 40px; left: 200px;}

  .architect-pic { width: 380px; padding: 0 0 0 10px; margin: 0 0 0 10px; box-sizing: border-box; float: left;}
  .architect-pic img.pic-1 { width: 100%; height: auto;}
  .architect-pic img.pic-2 { width: 70%; height: auto;}
  .architect-pic .pic-text { clear: both; width: 100%; margin: 10px 0; display: flex; justify-content: flex-start; align-items: center;}
  .architect-pic .pic-text .text1 { width: 180px; font-size: 0.8em; letter-spacing: 0.1em;}
  .architect-pic .pic-text .line1 { width: calc(100% - 180px); border-bottom: 1px #414141 solid; display: block;}
  .architect-pic .pic-text .text2 { width: 120px; font-size: 0.8em; letter-spacing: 0.1em;}
  .architect-pic .pic-text .line2 { width: calc(100% - 120px); border-bottom: 1px #414141 solid; display: block;}
  .architect-pic .pic-text2 { clear: both; width: 70%; margin: 10px 0; display: flex; justify-content: flex-start; align-items: center;}
  .architect-pic .pic-text2 .text { width: 110px; font-size: 0.8em; letter-spacing: 0.1em;}
  .architect-pic .pic-text2 .line { width: calc(100% - 110px); border-bottom: 1px #414141 solid; display: block;}


  /************ section (milestones) ************/

  section#page-milestones { clear: both; width: 100%; background-image: url("../images/about_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #milestones { width: 100%; padding: 60px calc(50% - 450px); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}

  .mile-column-lf { width: 50%; border-right: 2px #AE7D21 solid; box-sizing: border-box;}
  .mile-column-lf .mile-title { width: 100%; padding: 60px 0 0 30px; margin: 0 0 80px 0; position: relative;}
  .mile-column-lf .mile-title .title-box { width: 100%;}
  .mile-column-lf .mile-title .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .mile-column-lf .mile-title .title-box .title-2 { width: 140px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .mile-column-lf .mile-title .text-slogan { width: 100%; padding: 0 0 10px 0; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em;}
  .mile-column-lf .mile-title .shape { height: 160px; width: 160px; border-right: 3px solid #D4D4D4; -moz-transform: skew(-45deg); -webkit-transform: skew(-45deg); transform: skew(-45deg); position: absolute; top: 5px; left: 205px;}
  .mile-column-lf .extend-line-1 { clear: both; width: 150px; height: 15px; margin: -20px 0 0 0; border-top: 1px #000 solid; border-left: 1px #000 solid; display: block; float: right; position: relative; z-index: 2;}
  .mile-column-lf .pic-1 { clear: both; width: 186px; margin: -4px 60px 0 0; float: right; position: relative; z-index: 1;} 
  .mile-column-lf .pic-1 img { width: 100%; height: auto;}
  .mile-column-lf .extend-line-2 { clear: both; width: 180px; margin: -20px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2; float: right;}
  .mile-column-lf .extend-line-2 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; display: block;}
  .mile-column-lf .intro-text-2 { clear: both; width: 300px; margin: -40px 80px 0 0; font-size: 1.2em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: right;}
  .mile-column-lf .intro-text-2 span.date { color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em;}
  .mile-column-lf .extend-line-3 { clear: both; width: 200px; height: 15px; margin: -20px 0 0 0; border-top: 1px #000 solid; border-left: 1px #000 solid; display: block; float: right; position: relative; z-index: 2;}
  .mile-column-lf .pic-3 { clear: both; width: 238px; margin: -4px 88px 0 0; float: right; position: relative; z-index: 1;} 
  .mile-column-lf .pic-3 img { width: 100%; height: auto;}
  .mile-column-lf .extend-line-4 { clear: both; width: 190px; margin: -20px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2; float: right;}
  .mile-column-lf .extend-line-4 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; display: block;}
  .mile-column-lf .intro-text-4 { clear: both; width: 300px; margin: -40px 100px 0 0; font-size: 1.2em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: right;}
  .mile-column-lf .intro-text-4 .date { color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em; text-align: center;}
  .mile-column-lf .extend-line-5 { clear: both; width: 150px; height: 15px; margin: -20px 0 0 0; border-top: 1px #000 solid; border-left: 1px #000 solid; display: block; float: right; position: relative; z-index: 2;}
  .mile-column-lf .pic-5 { clear: both; width: 186px; margin: -4px 60px 0 0; float: right; position: relative; z-index: 1;} 
  .mile-column-lf .pic-5 img { width: 100%; height: auto;}
  .mile-column-lf .extend-line-6 { clear: both; width: 190px; margin: -20px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2; float: right;}
  .mile-column-lf .extend-line-6 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; display: block;}
  .mile-column-lf .intro-text-6 { clear: both; width: 300px; margin: -40px 100px 0 0; font-size: 1.2em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: right;}
  .mile-column-lf .intro-text-6 .date { color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em; text-align: center;}
  .mile-column-lf .extend-line-7 { clear: both; width: 150px; height: 15px; margin: -20px 0 0 0; border-top: 1px #000 solid; border-left: 1px #000 solid; display: block; float: right; position: relative; z-index: 2;}
  .mile-column-lf .pic-7 { clear: both; width: 186px; margin: -4px 60px 0 0; float: right; position: relative; z-index: 1;} 
  .mile-column-lf .pic-7 img { width: 100%; height: auto;}
  .mile-column-lf .extend-line-8 { clear: both; width: 190px; margin: -20px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2; float: right;}
  .mile-column-lf .extend-line-8 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; display: block;}
  .mile-column-lf .intro-text-8 { clear: both; width: 380px; margin: -40px 60px 0 0; font-size: 1.2em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: right;}
  .mile-column-lf .intro-text-8 .date { color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em; text-align: center;}

  .mile-time-dot-1 { clear: both; width: 40px; height: 40px; margin: 0 -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-2 { clear: both; width: 40px; height: 40px; margin: 100px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-3 { clear: both; width: 40px; height: 40px; margin: 145px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-4 { clear: both; width: 40px; height: 40px; margin: 70px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-5 { clear: both; width: 40px; height: 40px; margin: 160px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-6 { clear: both; width: 40px; height: 40px; margin: 50px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-7 { clear: both; width: 40px; height: 40px; margin: 98px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-8 { clear: both; width: 40px; height: 40px; margin: 30px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}

  .mile-column-rt { width: 50%; padding: 276px 0 0 0; border-left: 2px #AE7D21 solid; box-sizing: border-box;}
  .mile-column-rt .extend-line-1 { clear: both; width: 100px; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .extend-line-1 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; float: right; display: block;}
  .mile-column-rt .intro-text-1 { clear: both; width: 200px; margin: -26px 0 0 80px; font-size: 1.2em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: left;}
  .mile-column-rt .intro-text-1 span.date { color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em;}
  .mile-column-rt .extend-line-2 { clear: both; width: 100px; margin: 320px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .pic-2 { clear: both; width: 186px; margin: -93px 0 0 100px; position: relative; z-index: 1;} 
  .mile-column-rt .pic-2 img { width: 100%; height: auto;}
  .mile-column-rt .extend-line-3 { clear: both; width: 100px; margin: 115px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .extend-line-3 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; float: right; display: block;}
  .mile-column-rt .intro-text-3 { clear: both; width: 350px; margin: -26px 0 0 50px; font-size: 1.2em; line-height: 1.2em; letter-spacing: 0.1em; float: left;}
  .mile-column-rt .intro-text-3 .date { width: 100%; padding: 0 0 0 70px; color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em; box-sizing: border-box;}
  .mile-column-rt .extend-line-4 { clear: both; width: 100px; margin: 343px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .pic-4 { clear: both; width: 186px; margin: -93px 0 0 100px; position: relative; z-index: 1;} 
  .mile-column-rt .pic-4 img { width: 100%; height: auto;}
  .mile-column-rt .extend-line-5 { clear: both; width: 100px; margin: 154px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .extend-line-5 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; float: right; display: block;}
  .mile-column-rt .intro-text-5 { clear: both; width: 170px; margin: -26px 0 0 90px; font-size: 1.2em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: left;}
  .mile-column-rt .intro-text-5 span.date { color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em;}
  .mile-column-rt .extend-line-6 { clear: both; width: 100px; margin: 270px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .pic-6 { clear: both; width: 186px; margin: -93px 0 0 100px; position: relative; z-index: 1;} 
  .mile-column-rt .pic-6 img { width: 100%; height: auto;}
  .mile-column-rt .extend-line-7 { clear: both; width: 100px; margin: 68px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .extend-line-7 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; float: right; display: block;}
  .mile-column-rt .intro-text-7 { clear: both; width: 260px; margin: -26px 0 0 60px; font-size: 1.2em; line-height: 1.2em; text-align: center; letter-spacing: 0.1em; float: left;}
  .mile-column-rt .intro-text-7 .date { width: 100%; padding: 0 0 0 70px; color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em; text-align: left; box-sizing: border-box;}
  .mile-column-rt .extend-line-8 { clear: both; width: 100px; margin: 251px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .pic-8 { clear: both; width: 238px; margin: -125px 0 0 100px; position: relative; z-index: 1;} 
  .mile-column-rt .pic-8 img { width: 100%; height: auto;}
  .mile-column-rt .logo-8 { clear: both; width: 274px; margin: 20px 0 0 85px; position: relative; z-index: 1;} 
  .mile-column-rt .logo-8 img { width: 100%; height: auto;}


  /************ section (works) ************/

  section#page-works { clear: both; width: 100%; padding: 60px calc(50% - 690px); box-sizing: border-box; background-image: url("../images/works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #works-hot { width: 100%; padding: 30px 30px 10px 30px; margin: 0 0 50px 0; background-color: rgba(255,255,255,0.8); box-sizing: border-box; position: relative; z-index: 9;}
  #works-hot .border-line { width: 100%; height: 575px; border: 1px #99800F solid; box-sizing: border-box; display: block;}
  #works-hot .works-hot-full { clear: both; width: 100%; margin: -575px 0 0 0; box-sizing: border-box;}
  #works-hot .works-hot-full .works-hot-box { width: 90%; margin: 0 auto; padding: 30px; box-sizing: border-box; position: relative;}
  #works-hot .works-hot-full .works-hot-box .new-icon { width: 70px; position: absolute; top: 10px; right: 0;}
  #works-hot .works-hot-full .works-hot-box .new-icon img { width: 100%; height: auto;}
  #works-hot .works-hot-full .works-hot-box .pic { width: 700px; float: left;}
  #works-hot .works-hot-full .works-hot-box .pic img { width: 100%; height: auto;}
  #works-hot .works-hot-full .works-hot-box .infor { width: calc(100% - 700px); padding: 115px 0 0 80px; box-sizing: border-box; float: left;}
  #works-hot .works-hot-full .works-hot-box .infor .title-box { width: 100%; box-sizing: border-box;}
  #works-hot .works-hot-full .works-hot-box .infor .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  #works-hot .works-hot-full .works-hot-box .infor .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  #works-hot .works-hot-full .works-hot-box .infor .name { width: 100%; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  #works-hot .works-hot-full .works-hot-box .infor .intro { width: 100%; font-size: 1rem; line-height: 1.8em;}
  #works-hot .works-hot-full .works-hot-box .infor .intro span { color: #AE7D21; border-bottom: 2px #AE7D21 solid;}
  #works-hot .works-hot-full .works-hot-box .infor .icons-bt { width: 100%; margin: 80px 0 0 0; display: flex; justify-content: flex-start;}
  #works-hot .works-hot-full .works-hot-box .infor .icons-bt .icon { width: 74px;}
  #works-hot .works-hot-full .works-hot-box .infor .icons-bt .icon a { width: 100%; color: #AE7D21; font-size: 0.9em; text-align: center; text-decoration: none; display: block;}
  #works-hot .works-hot-full .works-hot-box .infor .icons-bt .icon a img { width: auto; height: 30px; margin: 0 auto;}

  #works-list { clear: both; width: 100%;}
  
  .works-list-title .title-box { width: 100%; margin: 0 0 30px 0; box-sizing: border-box; display: flex; justify-content: center; flex-wrap: wrap;}
  .works-list-title .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .works-list-title .title-box .title-2 { width: 140px; height: 30px; margin: 15px 0 0 -10px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .works-list-title .title-box .title-slogan { clear: both; width: 100%; margin: 20px 0 0 0; font-size: 2.2em; font-weight: 300; line-height: 1.4em; text-align: center;}
  .works-list-title .title-box .title-slogan span.big { font-size: 2.2rem; font-weight: 700;}
  .works-list-title .title-box .title-text { clear: both; width: 380px; margin: 10px 0 0 0; font-size: 1em; line-height: 1.6em; text-align: center;}

  .works-list-full { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .works-list-full .works-box { width: calc(100% / 3 - 40px); margin: 0 20px 40px 20px;}
  .works-list-full .works-box a { color: #414141; text-decoration: none;}
  .works-list-full .works-box .pic { width: 420px; height: 420px; margin: 0 0 20px 0; border-radius: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center;}
  .works-list-full .works-box .pic img { width: auto; height: 100%;}
  .works-list-full .works-box .year { width: 100%; color: #AE7D21; font-size: 1.4em; text-align: center;}
  .works-list-full .works-box .name { width: 100%; font-size: 2.2em; font-weight: 700; line-height: 1.4em; text-align: center;}
  .works-list-full .works-box .build { width: 100%; padding: 10px 0; font-size: 1.1em; line-height: 1em; text-align: center;}
  .works-list-full .works-box .build span { padding: 0 5px; background-color: #E6D1A8;}
  .works-list-full .works-box .intro { width: 100%; color: #99800F; font-size: 1em; text-align: center; letter-spacing: 0.1em;}


  /************ section (works content) ************/

  section#page-works-content { clear: both; width: 100%; padding: 0 calc(50% - 600px) 30px calc(50% - 600px); box-sizing: border-box; background-image: url("../images/works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #works-content-infor { width: 100%; padding: 0 0 40px 0; display: flex; justify-content: flex-start;}
  #works-content-infor .pic { width: 750px; margin: -70px 0 0 0; position: relative; z-index: 9;}
  #works-content-infor .pic img { width: 90%; height: auto; margin: 0 auto; border: 20px #fff solid; box-sizing: border-box;}
  #works-content-infor .infor { width: calc(100% - 750px); padding: 80px 0 0 65px; box-sizing: border-box;}
  #works-content-infor .infor .name { width: 100%; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  #works-content-infor .infor .intro { width: 100%; font-size: 1rem; line-height: 1.8em;}
  #works-content-infor .infor .intro span { color: #AE7D21; border-bottom: 2px #AE7D21 solid;}
  #works-content-infor .infor .text { width: 100%; margin: 25px 0 0 0; font-size: 1em; line-height: 2em;}
  #works-content-infor .infor .icons-bt { width: 100%; margin: 30px 0 0 0; display: flex; justify-content: flex-start;}
  #works-content-infor .infor .icons-bt .icon { width: 74px;}
  #works-content-infor .infor .icons-bt .icon a { width: 100%; color: #AE7D21; font-size: 0.8em; text-align: center; text-decoration: none; display: block;}
  #works-content-infor .infor .icons-bt .icon a img { width: auto; height: 30px; margin: 0 auto;}

  #works-content-intro { clear: both; width: 100%; padding: 0 40px; font-size: 1em; line-height: 2em; box-sizing: border-box;}
  #works-content-intro span.title { font-size: 2.2rem; font-weight: 700; line-height: 2em;}
  #works-content-intro .map { width: 100%; margin: 0 0 60px 0;}
  #works-content-intro .map img { width: 100%; height: auto;}

  #goback-bt { clear: both; width: 60px; margin: 0 auto;}
  #goback-bt a { width: 100%; color: #AE7D21; font-size: 0.9em; text-align: right; text-decoration: none; display: block;}
  #goback-bt img { width: 100%; height: auto;}


  /************ section (works hot content) ************/

  #works-hot-content { width: 100%; margin: 0 0 20px 0;}
  #works-hot-content .photos-list { width: 100%; position: relative; z-index: 9;}
  #works-hot-content .photos-list img { width: 100%; height: auto;}
  #works-hot-content .infor-box { clear: both; width: 100%; padding: 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  #works-hot-content .infor-box .title-column-lf { width: 300px; margin: 0 0 10px 0; border-right: 1px #AE7D21 solid; box-sizing: border-box;}
  #works-hot-content .infor-box .title-column-lf .year { width: 100%; color: #AE7D21; font-size: 1.4em; line-height: 1em;}
  #works-hot-content .infor-box .title-column-lf .name { width: 100%; font-size: 2.2em; font-weight: 700; line-height: 1em;}
  #works-hot-content .infor-box .title-column-rt { width: calc(100% - 300px); margin: 0 0 10px 0; padding: 0 0 0 25px; color: #AE7D21; font-size: 1.2em; letter-spacing: 0.1em; box-sizing: border-box;}
  #works-hot-content .infor-box .intro-box { clear: both; width: 100%;}
  #works-hot-content .infor-box .intro-box .list { width: 100%; padding: 15px 0; font-size: 1em; border-bottom: 1px #BABABA solid;}

  #back-next-bt { clear: both; width: 100%; display: flex; justify-content: center; align-items: flex-end;}
  #back-next-bt .back { margin: 0 25px;}
  #back-next-bt .back a { color: #AE7D21; font-size: 0.9em; text-decoration: none; display: block;}
  #back-next-bt .back img { width: 60px; height: auto; margin: 0 0 0 38px;}
  #back-next-bt .back2 { margin: 0 25px; text-align: right;}
  #back-next-bt .back2 a { color: #AE7D21; font-size: 0.9em; text-decoration: none; display: block;}
  #back-next-bt .back2 img { width: 60px; height: auto;}
  #back-next-bt .list { margin: 0 25px;}
  #back-next-bt .list a { color: #AE7D21; font-size: 0.9em; text-decoration: none; display: block;}
  #back-next-bt .list a img { width: 20px; height: 20px; margin: 0 auto;}
  #back-next-bt .prev { margin: 0 25px;}
  #back-next-bt .prev a { color: #AE7D21; font-size: 0.9em; text-decoration: none; display: block;}
  #back-next-bt .prev img { width: 60px; height: auto;}


  /************ section (news) ************/

  section#page-news { clear: both; width: 100%; padding: 60px calc(50% - 680px) 40px calc(50% - 680px); box-sizing: border-box; background-image: url("../images/news_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #news-list-full { clear: both; width: 100%; padding: 45px 15px 10px 15px; background-color: #fff; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; position: relative; z-index: 9;}
  #news-list-full .news-list { width: calc(100% / 3 - 30px); margin: 0 15px 30px 15px;}
  #news-list-full .news-list a { color: #414141; text-decoration: none; display: block;}
  #news-list-full .news-list .pic { width: 100%; height: 200px; margin: 0 0 10px 0; overflow: hidden;}
  #news-list-full .news-list .pic img { width: 100%; height: auto;}
  #news-list-full .news-list .date { width: 100%; padding: 0 5px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  #news-list-full .news-list .date span.mon-day { color: #AE7D21; font-size: 3em; font-weight: 600;}
  #news-list-full .news-list .date span.week-year { padding: 0 0 0 10px; color: #99800F; font-size: 1.1em; line-height: 1.2em;}
  #news-list-full .news-list .title { width: 100%; padding: 0 5px; box-sizing: border-box; font-size: 1.2em; font-weight: 600; letter-spacing: 0.1em;}
  #news-list-full .news-list .hr { width: 70px; margin: 5px 0 10px 5px; border-bottom: 2px #99800F solid; display: block;}
  #news-list-full .news-list .intro { clear: both; width: 100%; padding: 0 5px; box-sizing: border-box; margin: 10px 0 0 0; font-size: 1em; line-height: 1.8em; letter-spacing: 0.1em;}

  #news-content { clear: both; width: 100%; padding: 45px 35px; margin: 0 0 50px 0; background-color: #fff; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-direction: row-reverse; position: relative; z-index: 9;}
  #news-content .pics { width: 730px; padding: 0 30px 0 0; border-right: 1px #AE7D21 solid; box-sizing: border-box;}
  #news-content .pics .pic-big { width: 100%; padding: 0 0 30px 0; border-bottom: 1px #ccc solid; overflow: hidden;}
  #news-content .pics .pic-big ul#big { padding: 0; margin: 0; list-style: none; display: block;}
  #news-content .pics .pic-big ul#big li { height: 480px; padding: 0; margin: 0; overflow: hidden; float: left; display: none;}
  #news-content .pics .pic-big ul#big li img { width: 100%; height: auto;}
  #news-content .pics .pic-thumb { clear: both; width: 100%; margin: 30px 0 0 0;}
  #news-content .pics .pic-thumb ul#thumb { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  #news-content .pics .pic-thumb ul#thumb li { width: calc(100% / 4 - 10px); height: 100px; margin: 0 5px 10px 5px; overflow: hidden;}
  #news-content .pics .pic-thumb ul#thumb li img { width: 100%; height: auto; cursor: pointer;}
  #news-content .infor { width: calc(100% - 730px); padding: 0 0 0 30px; box-sizing: border-box;}
  #news-content .infor .date { width: 100%; padding: 0 5px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  #news-content .infor .date span.mon-day { color: #AE7D21; font-size: 3em; font-weight: 600;}
  #news-content .infor .date span.week-year { padding: 0 0 0 10px; color: #99800F; font-size: 1.1em; line-height: 1.2em;}
  #news-content .infor .title { width: 100%; padding: 0 5px; box-sizing: border-box; font-size: 1.2em; font-weight: 700; letter-spacing: 0.1em;}
  #news-content .infor .hr { width: 100%; margin: 5px 0 10px 5px; border-bottom: 2px #99800F solid; display: block;}
  #news-content .infor .intro { clear: both; width: 100%; padding: 0 5px; box-sizing: border-box; margin: 10px 0 0 0; font-size: 1em; line-height: 2.2em; letter-spacing: 0.1em;}


  /************ section (service) ************/

  section#page-service { clear: both; width: 100%; position: relative;}
  
  img.service-bg { width: 100%; height: auto;}
  img.service-bg-mo { display: none;}

  #service { width: 100%; padding: 12vw 15vw 0 15vw; box-sizing: border-box; position: absolute; top: 0; left: 0;}
  
  #service img.service-title { width: auto; height: 13vw; position: absolute; top: 4vw; left: 25vw;}
  
  #service .step-box { width: 100%; margin: -4vw 0 0 0; position: relative;}
  #service .step-box img.service-step-bg { width: 100%; height: auto;}
  #service .step-box img.service-step-bg-mo { display: none;}
  #service .step-box .step-text-intro { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; position: absolute; top: 0; left: 0;}
  #service .step-box .step-text-intro .text-intro { width: calc(100% / 5);}
  #service .step-box .step-text-intro .text-intro .text { width: 100%; margin: 8.5vw 0 4vw 0; color: #000; font-size: 2vw; font-weight: 500; line-height: 2.4vw; text-align: center;}
  #service .step-box .step-text-intro .text-intro .text2 { width: 100%; margin: 15vw 0 8vw 0; color: #000; font-size: 2vw; font-weight: 500; line-height: 2.4vw; text-align: center;}
  #service .step-box .step-text-intro .text-intro .text3 { width: 100%; margin: 14vw 0 6.5vw 0; color: #000; font-size: 2vw; font-weight: 500; line-height: 2.4vw; text-align: center;}
  #service .step-box .step-text-intro .text-intro .text4 { width: 100%; margin: 8.5vw 0 4vw 0; color: #000; font-size: 2vw; font-weight: 500; line-height: 2.4vw; text-align: center;}
  #service .step-box .step-text-intro .text-intro .text5 { width: 100%; margin: 8.5vw 0 4vw 0; color: #000; font-size: 2vw; font-weight: 500; line-height: 2.4vw; text-align: center;}
  #service .step-box .step-text-intro .text-intro .intro { clear: both; margin: 0 auto; color: #000; font-size: 1.1vw; line-height: 2vw; letter-spacing: 0.1vw; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;}
  #service .step-box .step-text-intro .text-intro .intro2 { clear: both; margin: 0 auto; color: #000; font-size: 1.1vw; line-height: 2vw; letter-spacing: 0.1vw; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;}
  #service .step-box .step-text-intro .text-intro .intro3 { clear: both; margin: 0 auto; color: #000; font-size: 1.1vw; line-height: 2vw; letter-spacing: 0.1vw; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;}
  #service .step-box .step-text-intro .text-intro .intro4 { clear: both; margin: 0 auto; color: #000; font-size: 1.1vw; line-height: 2vw; letter-spacing: 0.1vw; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;}
  #service .step-box .step-text-intro .text-intro .intro5 { clear: both; margin: 0 auto; color: #000; font-size: 1.1vw; line-height: 2vw; letter-spacing: 0.1vw; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;}
  #service .step-box .step-text-intro .text-intro .intro a.line-pc { display: block;}
  #service .step-box .step-text-intro .text-intro .intro a.line-pc img.line { width: 1.4vw; height: auto;}
  #service .step-box .step-text-intro .text-intro .intro a.line-mo { display: none;}
  
  .service-title-text { width: 5vw; color: #fff; font-size: 3.7vw; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; position: absolute; bottom: 13vw; right: 29vw;}

  .serv-line-qrode { width: 8vw; color: #fff; font-size: 1vw; text-align: center; position: absolute; bottom: 13vw; right: 13vw;}
  .serv-line-qrode img.serv-qrcode { width: 100%; height: auto;}

  
  /************ section (service search) ************/

  section#page-serv-search { clear: both; width: 100%; position: relative;}
  
  img.serv-search-bg { width: 100%; height: auto;}

  #serv-search { width: 100%; padding: 19vw 16vw 0 16vw; box-sizing: border-box; position: absolute; top: 0; left: 0;}
  
  #serv-search img.serv-search-title { width: auto; height: 13vw; position: absolute; top: 12vw; left: 16vw;}

  #serv-search .serv-search-form { width: 32vw; position: absolute; top: 10vw; right: 16vw;}
  #serv-search .serv-search-form .row { width: 100%; padding: 1vw 0; border-bottom: 3px #fff solid; display: flex; justify-content: flex-start; align-items: center;}
  #serv-search .serv-search-form .row:first-child { margin: 0 0 2.5vw 0;}
  #serv-search .serv-search-form .row .caption { width: 7vw; color: #F7EBDF; font-size: 1.2vw; letter-spacing: 0.1vw; display: flex; justify-content: flex-start; align-items: center;}
  #serv-search .serv-search-form .row .caption img.icon { width: 1.8vw; height: auto; margin: 0 1vw 0 0;}
  #serv-search .serv-search-form .row .column { width: calc(100% - 7vw);}
  #serv-search .serv-search-form .row .column input[type=text], 
  #serv-search .serv-search-form .row .column input[type=password] 
  { width: 100%; padding: 0.2vw 0.5vw; color: #fff; font-size: 1.1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: rgba(255,255,255,0.4); box-sizing: border-box;}
  #serv-search .serv-search-form .row2 { clear: both; width: 100%; padding: 1.5vw 0; color: #E1CCA3; font-size: 1.2vw; letter-spacing: 0.1vw;}
  #serv-search .serv-search-form input[type=submit] { width: 100%; padding: 1.6vw; color: #fff; font-size: 1.2vw; font-weight: 600; letter-spacing: 0.1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 4px #fff solid; background-color: transparent; box-sizing: border-box; cursor: pointer;}


  /************ section (service search content) ************/

  section#page-serv-search-content { clear: both; width: 100%; background-image: url("../images/serv_search_con_bg.jpg"); background-repeat: no-repeat; background-position: center top; background-size: cover;}
  
  img.serv-search-con-bg { width: 100%; height: auto;}

  #serv-search-content { width: 100%; padding: 120px calc(50% - 700px) 60px calc(50% - 700px); box-sizing: border-box;}
  
  #serv-search-content img.serv-search-title { width: auto; height: 240px; margin: 0 0 0 90px;}

  #serv-search-content .search-content { clear: both; width: 100%; padding: 30px; background-color: #fff; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-direction: row-reverse;}
  #serv-search-content .search-content .infor .pics-mo { display: none;}
  #serv-search-content .search-content .pics { width: 900px; padding: 0 30px 0 0; border-right: 1px #AA7D21 solid; box-sizing: border-box;}
  #serv-search-content .search-content .pics > div { display: none;}
  #serv-search-content .search-content .pics ul.pics-big { width: 100%; padding: 0 0 20px 0; margin: 0; border-bottom: 1px #ccc solid; list-style: none; display: block;}
  #serv-search-content .search-content .pics ul.pics-big li { width: 100%; padding: 0; margin: 0; display: none;}
  #serv-search-content .search-content .pics ul.pics-big li img { width: 100%; height: auto;}
  #serv-search-content .search-content .pics ul.pics-thumb { width: 100%; padding: 0; margin: 20px 0 0 0; list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  #serv-search-content .search-content .pics ul.pics-thumb li { width: calc(100% / 4 - 20px); height: 120px; margin: 0 10px 20px 10px; padding: 0; overflow: hidden;}
  #serv-search-content .search-content .pics ul.pics-thumb li img { width: 100%; height: auto; cursor: pointer;}
  #serv-search-content .search-content .infor { width: calc(100% - 900px);}
  #serv-search-content .search-content .infor .title-date { width: 100%; border-bottom: 1px #95800F solid; display: flex; justify-content: flex-start; align-items: stretch;}
  #serv-search-content .search-content .infor .title-date .title { width: 200px; padding: 4px 0 6px 0; color: #fff; font-size: 2em; font-weight: 500; letter-spacing: 0.1em; text-align: center; background-color: #A97D21;}
  #serv-search-content .search-content .infor .title-date .date { width: calc(100% - 200px); padding: 3px 10px 0 10px; color: #95800F; font-size: 2em; font-weight: 500; box-sizing: border-box;}
  #serv-search-content .search-content .infor .name { width: 100%; padding: 0 30px 20px 30px; font-size: 2.4em; font-weight: 600; letter-spacing: 0.1em; box-sizing: border-box;}
  #serv-search-content .search-content .infor .step { width: 100%; padding: 20px 30px; font-size: 2em; font-weight: 500; letter-spacing: 0.1em; box-sizing: border-box;}
  #serv-search-content .search-content .infor .text { width: 100%; padding: 20px 30px; box-sizing: border-box;}
  #serv-search-content .search-content .infor .search { width: 100%; padding: 20px 30px; box-sizing: border-box;}
  #serv-search-content .search-content .infor .search select { width: 100%; padding: 10px; color: #414141; font-size: 1.2em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #9C9C9C solid; background-color: #fff; box-sizing: border-box;}
  #serv-search-content .search-content .infor .back-bt { clear: both; width: 60px; margin: 30px 30px 0 0; text-align: right; float: right;}
  #serv-search-content .search-content .infor .back-bt a { color: #A97D21; font-size: 0.9rem; letter-spacing: 0.1em; text-decoration: none;}
  #serv-search-content .search-content .infor .back-bt img { width: 100%; height: auto;}
  #serv-search-content .search-content .infor .search-select { width: 100%; padding: 0 30px; font-size: 1.2rem; box-sizing: border-box;}
  #serv-search-content .search-content .infor .search-select select { padding: 3px 5px; border: 1px #ccc solid; font-size: 1.2rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial;}

  ul.search-steps-tab { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
  ul.search-steps-tab li { width: 100%; padding: 0; margin: 0;}
  ul.search-steps-tab li a { width: 100%; padding: 10px 0; text-decoration: none; display: flex; justify-content: flex-start;}
  ul.search-steps-tab li a.sel { background-color: #F7EBDF;}
  ul.search-steps-tab li .date { width: 100px; color: #414141; font-size: 1rem; font-weight: 600; line-height: 1.2rem;}
  ul.search-steps-tab li .step-name { width: calc(100% - 100px); color: red; font-size: 1.4rem; font-weight: 600; line-height: 1.2rem;}
  ul.search-steps-tab li ul.detail { width: 100%; padding: 0; margin: 10px 0 0 0; list-style: none; display: block;}
  ul.search-steps-tab li ul.detail li { width: 100%; padding: 5px 0; margin: 0; color: #444; font-size: 1rem; font-weight: 400;}


  /************ section (contact) ************/

  section#page-contact { clear: both; width: 100%; background-image: url("../images/contact_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #contact { width: 100%; padding: 45px calc(50% - 690px); box-sizing: border-box;}

  .contact-title .title-box { width: 100%; margin: 0 0 30px 0; box-sizing: border-box; display: flex; justify-content: center; flex-wrap: wrap;}
  .contact-title .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .contact-title .title-box .title-2 { width: 140px; height: 30px; margin: 15px 0 0 -10px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .contact-title .title-box .title-slogan { clear: both; width: 100%; margin: 20px 0 0 0; font-size: 2.2rem; font-weight: 300; line-height: 1.4em; text-align: center;}
  .contact-title .title-box .title-slogan span.big { font-size: 2.2rem; font-weight: 700;}
  .contact-title .title-box .title-text { clear: both; width: 480px; margin: 10px 0 0 0; font-size: 1em; line-height: 1.6em; text-align: center;}

  .contact-main { clear: both; width: 100%; margin: 65px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .contact-main .contact-table { width: 530px;}
  .contact-main .contact-table .list { width: 100%; padding: 15px 0; font-size: 1.4em; border-bottom: 1px #B5B5B5 solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .contact-main .contact-table .list .caption-1 { width: 90px;}
  .contact-main .contact-table .list .caption-1 span.star { color: #AE7D21;}
  .contact-main .contact-table .list .column-1 { width: calc(100% - 90px);}
  .contact-main .contact-table .list .column-1 input[type=text].style1 { width: 55%; padding: 5px; color: #414141; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; box-sizing: border-box;}
  .contact-main .contact-table .list .column-1 input[type=text].style2 { width: 100%; padding: 5px; color: #414141; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; box-sizing: border-box;}
  .contact-main .contact-table .list .column-1 textarea { width: 100%; height: 85px; padding: 5px; color: #414141; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; box-sizing: border-box;}
  .contact-main .contact-table .list .caption-2 { width: 120px;}
  .contact-main .contact-table .list .caption-2 span.star { color: #AE7D21;}
  .contact-main .contact-table .list .column-2 { width: calc(100% - 120px); display: flex; justify-content: flex-start;}
  .contact-main .contact-table .list .column-2 input[type=text].style1 { width: 55%; padding: 5px; color: #414141; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; box-sizing: border-box;}
  .contact-main .contact-table .list .column-2 img.code { margin: 0 0 0 10px;}
  .contact-main .contact-table .input-submit { width: 100%; padding: 15px 0; text-align: right;}
  .contact-main .contact-table .input-submit input[type=reset] { color: #414141; font-size: 1.4rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; cursor: pointer;}
  .contact-main .contact-table .input-submit input[type=submit] { color: #AE7D21; font-size: 1.4rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; cursor: pointer;}
    
  .contact-main .pic { width: 430px;}
  .contact-main .pic img { width: 370px; height: auto; margin: 210px 0 0 0; float: right;}
  .contact-main .infor { width: calc(100% - 530px - 430px); margin: 0 0 0 -90px; font-size: 1.4em; line-height: 1.4em;}


  /************ section (sitemap) ************/

  .banner-sitemap { clear: both; width: 100%; height: 30vw; overflow: hidden; position: relative;}
  .banner-sitemap img { width: 100%; height: auto;}
  .banner-sitemap img.banner-text { width: auto; height: 13vw; position: absolute; bottom: 4vw; left: 12vw;}

  section#page-sitemap { clear: both; width: 100%; background-image: url("../images/contact_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #sitemap { width: 100%; padding: 100px calc(50% - 600px); box-sizing: border-box;}

  ul.sitemap { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  ul.sitemap li { padding: 0; margin: 0 25px 40px 25px;}
  ul.sitemap li a { color: #414141; font-size: 1.4em; font-weight: 600; letter-spacing: 0.1em; text-decoration: none;}
  ul.sitemap li a:hover { border-bottom: 1px #414141 solid;}
  ul.sitemap li ul.sitemap-snd { padding: 0 0 0 10px; margin: 0; list-style: none; display: block;}
  ul.sitemap li ul.sitemap-snd li { padding: 0; margin: 20px 0;}
  ul.sitemap li ul.sitemap-snd li a { color: #414141; font-size: 1.2rem; font-weight: 500; letter-spacing: 0.1em; text-decoration: none;}
  ul.sitemap li ul.sitemap-snd li a:hover { border-bottom: 1px #414141 solid;}


  /************ section (error) ************/

  section#page-error { clear: both; width: 100%; background-image: url("../images/contact_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #error404 { width: 100%; padding: 160px calc(50% - 600px); box-sizing: border-box;}
  #error404 .title-1 { width: 100%; margin: 0 0 40px 0; font-size: 4em; font-weight: 700; font-family: Arial; letter-spacing: 0.1em; text-align: center;}
  #error404 .title-2 { width: 100%; font-size: 2em; font-weight: 500; letter-spacing: 0.1em; text-align: center;}
  #error404 .goback-bt { clear: both; width: 200px; margin: 80px auto 0 auto;}
  #error404 .goback-bt a { width: 100%; padding: 6px 0; color: #fff; font-size: 1.2em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #A97D21; display: block;}
  #error404 .goback-bt a:hover { background-color: #AE7D21;}


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

  footer { clear: both; width: 100%; padding: 40px calc(50% - 630px); background-color: #000C1F; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}

  .logo-column { width: 320px;}
  .logo-column img.ft-logo { width: 270px; height: auto; margin: 0 auto;}

  .infor-column { width: calc(100% - 320px); padding: 0 0 0 25px; box-sizing: border-box;}
  .infor-column .ft-nav-icon { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .infor-column .ft-nav-icon ul.footer-nav { padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start;}
  .infor-column .ft-nav-icon ul.footer-nav li { padding: 0; margin: 0 10px;}
  .infor-column .ft-nav-icon ul.footer-nav li a { color: #fff; font-size: 0.9em; font-weight: 500; text-decoration: none;}
  .infor-column .ft-nav-icon ul.footer-nav li a:hover { border-bottom: 1px #fff solid;}
  .infor-column .ft-nav-icon ul.social-icons { padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: center;}
  .infor-column .ft-nav-icon ul.social-icons li { padding: 0; margin: 0 0 0 20px;}
  .infor-column .ft-nav-icon ul.social-icons li img { width: auto; height: 30px;}
  .infor-column .ft-addr-infor { width: 100%; padding: 10px 0 0 10px; box-sizing: border-box; display: flex; justify-content: flex-start;}
  .infor-column .ft-addr-infor div { margin: 0 40px 0 0; color: #C9A481; font-size: 0.9em; font-weight: 500;}
  .infor-column .ft-copyright { width: 100%; padding: 10px 0 0 10px; color: #fff; font-size: 0.8em; font-weight: 500;}


}

@media screen and (min-width: 1280px) and (max-width: 1439px) {

  /************ aside ************/

  aside { width: 108px; text-align: center; position: fixed; top: 300px; right: 10px; z-index: 990;}
  aside img.schedule-search-bt { width: 108px; height: auto;}
  aside img.line { width: 60px; height: auto; margin: 20px 0 0 0;}
  aside a { text-decoration: none;}
  aside span.text { color: #000; font-size: 0.8em; line-height: 1em;}


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

  header { width: 100%; height: 100px; background-color: #F1F3F0; display: flex; justify-content: space-between; align-items: center; position: relative;}

  .header-logo { width: 255px; padding: 0 0 0 40px; margin: 0 0 0 10px; position: relative; z-index: 998;}
  .header-logo img { width: 100%; height: auto;}
  
  nav#mo { display: none;}

  nav#pc { width: 100%; position: absolute; top: 0; left: 0; z-index: 990;}
  nav#pc ul.hd-nav { width: 100%; padding: 0 110px 0 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: stretch; box-sizing: border-box;}
  nav#pc ul.hd-nav li { padding: 0; margin: 0 15px; position: relative;}
  nav#pc ul.hd-nav li a { height: 100px; color: #414141; font-size: 1.2em; font-weight: 300; text-decoration: none; display: flex; align-items: center; cursor: pointer;}
  nav#pc ul.hd-nav li a:hover { font-weight: 500;}
  nav#pc .bg-bar { width: 100%; height: 32px; background-color: rgba(174,125,33,0.6); display: none; position: absolute; top: 100px; left: 0; z-index: 991;}
  nav#pc ul.hd-nav li ul.hd-nav-snd { width: 400px; height: 32px; padding: 0; margin: 0; list-style: none; display: none; justify-content: flex-start; position: absolute; top: 100px; left: -10px; z-index: 999;}
  nav#pc ul.hd-nav li ul.hd-nav-snd li { height: 100%; padding: 0; margin: 0;}
  nav#pc ul.hd-nav li ul.hd-nav-snd li a { height: 100%; padding: 0 15px; color: #fff; font-size: 1.1em; line-height: 1em; font-weight: 300; text-decoration: none; display: flex; align-items: center;}
  nav#pc ul.hd-nav li ul.hd-nav-snd li a:hover { font-weight: 500; background-color: #AE7D21;}

  .social-icon { width: 30px; padding: 0 40px 0 0; margin: 0 20px; position: relative; z-index: 998;}
  .social-icon img { width: 30px; height: auto;}


  /************ banner (index) ************/

  .index-banner-box { clear: both; width: 100%;}
  .index-banner-box div { width: 100%; position: relative;}
  .index-banner-box div img { width: 100%; height: auto;}
  .index-banner-box div img.banner-hp-text { width: 22vw; height: auto; position: absolute; bottom: 0; left: 15vw;}


  /************ section (index) ************/

  section#index { clear: both; width: 100%; background-image: url("../images/index_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #index-about { width: 100%; padding: 50px calc(50% - 600px); box-sizing: border-box;}

  .index-about-pic { width: 610px; display: flex; justify-content: flex-start; align-items: flex-start; float: left;}
  .index-about-pic img.pic1 { width: calc(100% / 3 - 10px); height: auto; margin: 0 10px 0 0;}
  .index-about-pic img.pic2 { width: calc(100% / 3 - 10px); height: auto; margin: 150px 10px 0 0;}
  .index-about-pic img.pic3 { width: calc(100% / 3 - 10px); height: auto; margin: 60px 0 0 0;}

  .index-about-main { width: calc(100% - 610px); padding: 165px 60px 0 70px; box-sizing: border-box; position: relative; float: right;}
  .index-about-main .title-box { width: 100%; box-sizing: border-box;}
  .index-about-main .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .index-about-main .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .index-about-main .text-slogan { width: 100%; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .index-about-main .text-content { width: 100%; margin: 20px 0 0 0; font-size: 1em; line-height: 1.8em; letter-spacing: 0.1em; box-sizing: border-box;}
  .index-about-main .shape { height: 160px; width: 160px; border-right: 3px solid #D4D4D4; -moz-transform: skew(-45deg); -webkit-transform: skew(-45deg); transform: skew(-45deg); position: absolute; top: 165px; left: 290px;}
  .index-about-main .more-bt { clear: both; width: 190px; margin: 30px 0 0 0;}
  .index-about-main .more-bt img { width: 100%; height: auto;}

  #index-brand { clear: both; width: 100%; padding: 50px calc(50% - 600px); box-sizing: border-box;}

  .index-brand-main { width: calc(100% - 355px); padding: 0 80px 0 185px; box-sizing: border-box; position: relative; float: left;}
  .index-brand-main .title-box { width: 100%; box-sizing: border-box;}
  .index-brand-main .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .index-brand-main .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .index-brand-main .text-slogan { width: 100%; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .index-brand-main .text-content { width: 100%; margin: 20px 0 0 0; font-size: 1em; line-height: 1.8em; letter-spacing: 0.1em; box-sizing: border-box;}
  .index-brand-main .shape { height: 160px; width: 160px; border-right: 3px solid #D4D4D4; -moz-transform: skew(45deg); -webkit-transform: skew(45deg); transform: skew(45deg); position: absolute; top: 5px; left: -70px;}
  .index-brand-main .more-bt { clear: both; width: 190px; margin: 30px 0 0 0;}
  .index-brand-main .more-bt img { width: 100%; height: auto;}

  .index-brand-pic { width: 355px; padding: 0 80px 0 0; box-sizing: border-box; float: left;}
  .index-brand-pic img { width: 100%; height: auto;}

  #index-works { clear: both; width: 100%; margin: 50px 0; background-image: url("../images/index_works_bg.png"); background-repeat: no-repeat; background-size: 160% auto; background-position: center top;}

  .index-works-list-full { clear: both; width: 1200px; padding: 25px 0 0 0; margin: 0 auto; box-sizing: border-box; overflow: hidden;}
  .index-works-list-full .works-list { width: 1000px; padding: 0 60px;}
  .index-works-list-full .works-list .pic { width: 600px; float: left;}
  .index-works-list-full .works-list .pic img { width: 100%; height: auto;}
  .index-works-list-full .works-list .works-infor { width: calc(100% - 600px); padding: 80px 100px 0 80px; box-sizing: border-box; position: relative; float: left;}
  .index-works-list-full .works-list .works-infor .title-box { width: 100%; box-sizing: border-box;}
  .index-works-list-full .works-list .works-infor .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .index-works-list-full .works-list .works-infor .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .index-works-list-full .works-list .works-infor .name { width: 100%; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .index-works-list-full .works-list .works-infor .intro { width: 100%; font-size: 1rem; line-height: 1.8em;}
  .index-works-list-full .works-list .works-infor .intro span { color: #AE7D21; border-bottom: 2px #AE7D21 solid;}
  .index-works-list-full .works-list .works-infor .more-bt { width: 100%; position: absolute; top: 480px; left: 80px;}
  .index-works-list-full .works-list .works-infor .more-bt img { width: 190px; height: auto;}

  .slider {
    width: 90%;
    margin: 0 auto;
  }

  .slick-slide {
    margin: 0px;
  }

  .slick-slide img {
    width: 100%;
  }

  .slick-prev:before,
  .slick-next:before {
    color: black;
  }

  .slick-slide {
    transition: all ease-in-out .3s;
    opacity: 1;
  }

  .slick-active {
    opacity: 1;
  }

  .slick-current {
    opacity: 1;
  }
  
  #sec-service .serv-column-rt { width: 31px; height: 301px; background-image: url("../images/hp_service_bg_right.png"); background-repeat: no-repeat;}

  #index-news { clear: both; width: 100%; padding: 0 calc(50% - 600px) 60px calc(50% - 600px); box-sizing: border-box;}

  .index-news-title { width: 100%; margin: 0 0 50px 0; display: flex; justify-content: flex-start; align-items: flex-end;}
  .index-news-title .title-box { width: 240px; margin: 0 0 15px 100px;}
  .index-news-title .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .index-news-title .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .index-news-title .text-slogan { font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .index-news-title .shape { width: 160px; height: 160px; margin: 0 0 10px -80px; border-right: 3px solid #D4D4D4; -moz-transform: skew(45deg); -webkit-transform: skew(45deg); transform: skew(45deg);}

  .index-news-list { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch;}
  .index-news-list .news-list { width: calc(100% / 3 - 30px); margin: 0 15px;}
  .index-news-list .news-list a { color: #414141; text-decoration: none; display: block;}
  .index-news-list .news-list .pic { width: 100%; height: 170px; margin: 0 0 10px 0; overflow: hidden;}
  .index-news-list .news-list .pic img { width: 100%; height: auto;}
  .index-news-list .news-list .date { width: 100%; padding: 0 5px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .index-news-list .news-list .date span.mon-day { color: #AE7D21; font-size: 3em; font-weight: 600;}
  .index-news-list .news-list .date span.week-year { padding: 0 0 0 10px; color: #99800F; font-size: 1.1em; line-height: 1.2em;}
  .index-news-list .news-list .title { width: 100%; padding: 0 5px; box-sizing: border-box; font-size: 1.2em; font-weight: 600; letter-spacing: 0.1em;}
  .index-news-list .news-list .hr { width: 70px; margin: 5px 0 10px 5px; border-bottom: 2px #99800F solid; display: block;}
  .index-news-list .news-list .intro { clear: both; width: 100%; padding: 0 5px; box-sizing: border-box; margin: 10px 0 0 0; font-size: 1em; line-height: 1.8em; letter-spacing: 0.1em;}


  /************ banner (page) ************/

  .banner-box { clear: both; width: 100%; }
  .banner-box div { width: 100%; position: relative;}
  .banner-box div img { width: 100%; height: auto;}
  .banner-box div img.banner-text { width: auto; height: 13vw; position: absolute; bottom: 4vw; left: 12vw;}
  .banner-box div img.banner-text2 { width: auto; height: 13vw; position: absolute; bottom: 4vw; left: 12vw;}
  .banner-box div img.banner-text3 { width: auto; height: 13vw; position: absolute; bottom: 4vw; left: 12vw;}
  .banner-box div img.banner-text4 { width: auto; height: 13vw; position: absolute; bottom: 3vw; right: 24vw;}
  
  img.banner-text-works { clear: both; width: auto; height: 13vw;}


  /************ section (about) ************/

  section#page-about { clear: both; width: 100%; background-image: url("../images/about_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #about { width: 100%; padding: 45px 40px; box-sizing: border-box;}

  .about-pic { width: 450px; padding: 0 10px 0 0; margin: 0 10px 0 0; border-right: 1px #fff solid; box-sizing: border-box; float: left;}
  .about-pic img { width: 100%; height: auto; margin: 0 0 15px 0;}

  .about-main { width: calc(100% - 470px); padding: 60px 0; box-sizing: border-box; float: right; position: relative;}
  .about-main .title-box { width: 100%; padding: 0 0 0 60px; box-sizing: border-box;}
  .about-main .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .about-main .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .about-main .text-slogan { width: 100%; padding: 0 0 0 60px; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .about-main .text-content { width: 100%; margin: 10px 0 0 0; padding: 30px 40px 30px 60px; font-size: 1em; letter-spacing: 0.1em; line-height: 1.8em; background-color: #fff; box-sizing: border-box;}
  .about-main .shape { height: 160px; width: 160px; border-right: 3px solid #D4D4D4; -moz-transform: skew(-45deg); -webkit-transform: skew(-45deg); transform: skew(-45deg); position: absolute; top: 65px; left: 290px;}

  #brand { clear: both; width: 100%; padding: 45px 40px; box-sizing: border-box;}

  .brand-pic { width: 380px; padding: 0 0 0 10px; margin: 0 0 0 10px; border-left: 1px #fff solid; box-sizing: border-box; float: left;}
  .brand-pic img { width: 100%; height: auto; margin: 0 0 15px 0;}

  .brand-main { width: calc(100% - 400px); padding: 35px 0; box-sizing: border-box; float: left; position: relative;}
  .brand-main .title-box { width: 100%; padding: 0 0 0 50px; box-sizing: border-box;}
  .brand-main .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .brand-main .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .brand-main .text-slogan { width: 100%; padding: 0 0 0 50px; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .brand-main .text-content { width: 100%; margin: 15px 0 0 0; padding: 30px 50px; font-size: 1em; letter-spacing: 0.1em; line-height: 1.8em; background-color: #fff; box-sizing: border-box;}
  .brand-main .shape { height: 160px; width: 160px; border-right: 3px solid #D4D4D4; -moz-transform: skew(-45deg); -webkit-transform: skew(-45deg); transform: skew(-45deg); position: absolute; top: 40px; left: 290px;}

  #organization { clear: both; width: 100%; position: relative;}

  .about-org-content { width: 100%; padding: 0 calc(50% - 550px); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; position: absolute; top: 0; left: 0;}
  .about-org-content .title-logo { width: 330px; margin: 12vw 0 0 0;}
  .about-org-content .title-logo .org-title { width: 220px; margin: 0 0 10px 0;}
  .about-org-content .title-logo .org-title .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .about-org-content .title-logo .org-title .title-2 { width: 170px; height: 30px; margin: -12px 0 0 100px; color: #fff; border: 1px #fff solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .about-org-content .title-logo img.org-logo { width: 280px; height: auto;}
  .about-org-content .org-tree { width: calc(100% - 330px); margin: 2vw 0 0 0;}
  .about-org-content .org-tree img.org-tree { width: 13vw; height: auto;}

  img.org-bg { width: 100%; height: auto;}

  #architect { clear: both; width: 100%; padding: 45px 40px; box-sizing: border-box;}

  .architect-main { width: calc(100% - 400px); padding: 35px 0; box-sizing: border-box; float: left; position: relative;}
  .architect-main .title-box { width: 100%; padding: 0 0 0 50px; box-sizing: border-box;}
  .architect-main .title-box .title-1 { width: 140px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .architect-main .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 130px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .architect-main .text-slogan { width: 100%; padding: 0 0 0 50px; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .architect-main .text-content { width: 100%; margin: 15px 0 0 0; padding: 30px 50px; font-size: 1em; letter-spacing: 0.1em; line-height: 1.8em; background-color: #fff; box-sizing: border-box;}
  .architect-main .shape { height: 160px; width: 160px; border-right: 3px solid #D4D4D4; -moz-transform: skew(-45deg); -webkit-transform: skew(-45deg); transform: skew(-45deg); position: absolute; top: 40px; left: 200px;}

  .architect-pic { width: 380px; padding: 0 0 0 10px; margin: 0 0 0 10px; box-sizing: border-box; float: left;}
  .architect-pic img.pic-1 { width: 100%; height: auto;}
  .architect-pic img.pic-2 { width: 70%; height: auto;}
  .architect-pic .pic-text { clear: both; width: 100%; margin: 10px 0; display: flex; justify-content: flex-start; align-items: center;}
  .architect-pic .pic-text .text1 { width: 180px; font-size: 0.8em; letter-spacing: 0.1em;}
  .architect-pic .pic-text .line1 { width: calc(100% - 180px); border-bottom: 1px #414141 solid; display: block;}
  .architect-pic .pic-text .text2 { width: 120px; font-size: 0.8em; letter-spacing: 0.1em;}
  .architect-pic .pic-text .line2 { width: calc(100% - 120px); border-bottom: 1px #414141 solid; display: block;}
  .architect-pic .pic-text2 { clear: both; width: 70%; margin: 10px 0; display: flex; justify-content: flex-start; align-items: center;}
  .architect-pic .pic-text2 .text { width: 110px; font-size: 0.8em; letter-spacing: 0.1em;}
  .architect-pic .pic-text2 .line { width: calc(100% - 110px); border-bottom: 1px #414141 solid; display: block;}


  /************ section (milestones) ************/

  section#page-milestones { clear: both; width: 100%; background-image: url("../images/about_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #milestones { width: 100%; padding: 60px calc(50% - 450px); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}

  .mile-column-lf { width: 50%; border-right: 2px #AE7D21 solid; box-sizing: border-box;}
  .mile-column-lf .mile-title { width: 100%; padding: 60px 0 0 30px; margin: 0 0 80px 0; position: relative;}
  .mile-column-lf .mile-title .title-box { width: 100%;}
  .mile-column-lf .mile-title .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .mile-column-lf .mile-title .title-box .title-2 { width: 140px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .mile-column-lf .mile-title .text-slogan { width: 100%; padding: 0 0 9px 0; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em;}
  .mile-column-lf .mile-title .shape { height: 160px; width: 160px; border-right: 3px solid #D4D4D4; -moz-transform: skew(-45deg); -webkit-transform: skew(-45deg); transform: skew(-45deg); position: absolute; top: 5px; left: 205px;}
  .mile-column-lf .extend-line-1 { clear: both; width: 150px; height: 15px; margin: -20px 0 0 0; border-top: 1px #000 solid; border-left: 1px #000 solid; display: block; float: right; position: relative; z-index: 2;}
  .mile-column-lf .pic-1 { clear: both; width: 186px; margin: -4px 60px 0 0; float: right; position: relative; z-index: 1;} 
  .mile-column-lf .pic-1 img { width: 100%; height: auto;}
  .mile-column-lf .extend-line-2 { clear: both; width: 180px; margin: -20px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2; float: right;}
  .mile-column-lf .extend-line-2 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; display: block;}
  .mile-column-lf .intro-text-2 { clear: both; width: 300px; margin: -40px 80px 0 0; font-size: 1.2em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: right;}
  .mile-column-lf .intro-text-2 span.date { color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em;}
  .mile-column-lf .extend-line-3 { clear: both; width: 200px; height: 15px; margin: -20px 0 0 0; border-top: 1px #000 solid; border-left: 1px #000 solid; display: block; float: right; position: relative; z-index: 2;}
  .mile-column-lf .pic-3 { clear: both; width: 238px; margin: -4px 88px 0 0; float: right; position: relative; z-index: 1;} 
  .mile-column-lf .pic-3 img { width: 100%; height: auto;}
  .mile-column-lf .extend-line-4 { clear: both; width: 190px; margin: -20px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2; float: right;}
  .mile-column-lf .extend-line-4 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; display: block;}
  .mile-column-lf .intro-text-4 { clear: both; width: 300px; margin: -40px 100px 0 0; font-size: 1.2em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: right;}
  .mile-column-lf .intro-text-4 .date { color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em; text-align: center;}
  .mile-column-lf .extend-line-5 { clear: both; width: 150px; height: 15px; margin: -20px 0 0 0; border-top: 1px #000 solid; border-left: 1px #000 solid; display: block; float: right; position: relative; z-index: 2;}
  .mile-column-lf .pic-5 { clear: both; width: 186px; margin: -4px 60px 0 0; float: right; position: relative; z-index: 1;} 
  .mile-column-lf .pic-5 img { width: 100%; height: auto;}
  .mile-column-lf .extend-line-6 { clear: both; width: 190px; margin: -20px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2; float: right;}
  .mile-column-lf .extend-line-6 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; display: block;}
  .mile-column-lf .intro-text-6 { clear: both; width: 300px; margin: -40px 100px 0 0; font-size: 1.2em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: right;}
  .mile-column-lf .intro-text-6 .date { color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em; text-align: center;}
  .mile-column-lf .extend-line-7 { clear: both; width: 150px; height: 15px; margin: -20px 0 0 0; border-top: 1px #000 solid; border-left: 1px #000 solid; display: block; float: right; position: relative; z-index: 2;}
  .mile-column-lf .pic-7 { clear: both; width: 186px; margin: -4px 60px 0 0; float: right; position: relative; z-index: 1;} 
  .mile-column-lf .pic-7 img { width: 100%; height: auto;}
  .mile-column-lf .extend-line-8 { clear: both; width: 190px; margin: -20px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2; float: right;}
  .mile-column-lf .extend-line-8 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; display: block;}
  .mile-column-lf .intro-text-8 { clear: both; width: 380px; margin: -40px 60px 0 0; font-size: 1.2em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: right;}
  .mile-column-lf .intro-text-8 .date { color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em; text-align: center;}

  .mile-time-dot-1 { clear: both; width: 40px; height: 40px; margin: 0 -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-2 { clear: both; width: 40px; height: 40px; margin: 100px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-3 { clear: both; width: 40px; height: 40px; margin: 145px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-4 { clear: both; width: 40px; height: 40px; margin: 70px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-5 { clear: both; width: 40px; height: 40px; margin: 160px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-6 { clear: both; width: 40px; height: 40px; margin: 50px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-7 { clear: both; width: 40px; height: 40px; margin: 98px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-8 { clear: both; width: 40px; height: 40px; margin: 30px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}

  .mile-column-rt { width: 50%; padding: 276px 0 0 0; border-left: 2px #AE7D21 solid; box-sizing: border-box;}
  .mile-column-rt .extend-line-1 { clear: both; width: 100px; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .extend-line-1 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; float: right; display: block;}
  .mile-column-rt .intro-text-1 { clear: both; width: 200px; margin: -26px 0 0 80px; font-size: 1.2em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: left;}
  .mile-column-rt .intro-text-1 span.date { color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em;}
  .mile-column-rt .extend-line-2 { clear: both; width: 100px; margin: 320px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .pic-2 { clear: both; width: 186px; margin: -93px 0 0 100px; position: relative; z-index: 1;} 
  .mile-column-rt .pic-2 img { width: 100%; height: auto;}
  .mile-column-rt .extend-line-3 { clear: both; width: 100px; margin: 115px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .extend-line-3 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; float: right; display: block;}
  .mile-column-rt .intro-text-3 { clear: both; width: 350px; margin: -26px 0 0 50px; font-size: 1.2em; line-height: 1.2em; letter-spacing: 0.1em; float: left;}
  .mile-column-rt .intro-text-3 .date { width: 100%; padding: 0 0 0 70px; color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em; box-sizing: border-box;}
  .mile-column-rt .extend-line-4 { clear: both; width: 100px; margin: 343px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .pic-4 { clear: both; width: 186px; margin: -93px 0 0 100px; position: relative; z-index: 1;} 
  .mile-column-rt .pic-4 img { width: 100%; height: auto;}
  .mile-column-rt .extend-line-5 { clear: both; width: 100px; margin: 154px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .extend-line-5 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; float: right; display: block;}
  .mile-column-rt .intro-text-5 { clear: both; width: 170px; margin: -26px 0 0 90px; font-size: 1.2em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: left;}
  .mile-column-rt .intro-text-5 span.date { color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em;}
  .mile-column-rt .extend-line-6 { clear: both; width: 100px; margin: 270px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .pic-6 { clear: both; width: 186px; margin: -93px 0 0 100px; position: relative; z-index: 1;} 
  .mile-column-rt .pic-6 img { width: 100%; height: auto;}
  .mile-column-rt .extend-line-7 { clear: both; width: 100px; margin: 68px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .extend-line-7 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; float: right; display: block;}
  .mile-column-rt .intro-text-7 { clear: both; width: 260px; margin: -26px 0 0 60px; font-size: 1.2em; line-height: 1.2em; text-align: center; letter-spacing: 0.1em; float: left;}
  .mile-column-rt .intro-text-7 .date { width: 100%; padding: 0 0 0 70px; color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em; text-align: left; box-sizing: border-box;}
  .mile-column-rt .extend-line-8 { clear: both; width: 100px; margin: 251px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .pic-8 { clear: both; width: 238px; margin: -125px 0 0 100px; position: relative; z-index: 1;} 
  .mile-column-rt .pic-8 img { width: 100%; height: auto;}
  .mile-column-rt .logo-8 { clear: both; width: 274px; margin: 20px 0 0 85px; position: relative; z-index: 1;} 
  .mile-column-rt .logo-8 img { width: 100%; height: auto;}


  /************ section (works) ************/

  section#page-works { clear: both; width: 100%; padding: 60px calc(50% - 600px); box-sizing: border-box; background-image: url("../images/works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #works-hot { width: 100%; padding: 30px 40px 10px 30px; margin: 0 0 50px 0; background-color: rgba(255,255,255,0.8); box-sizing: border-box; position: relative; z-index: 9;}
  #works-hot .border-line { width: 100%; height: 575px; border: 1px #99800F solid; box-sizing: border-box; display: block;}
  #works-hot .works-hot-full { width: 100%; margin: -575px 0 0 0;}
  #works-hot .works-hot-full .works-hot-box { width: 90%; padding: 30px; margin: 0 auto; box-sizing: border-box; position: relative;}
  #works-hot .works-hot-full .works-hot-box .new-icon { width: 70px; position: absolute; top: 10px; right: 0;}
  #works-hot .works-hot-full .works-hot-box .new-icon img { width: 100%; height: auto;}
  #works-hot .works-hot-full .works-hot-box .pic { width: 600px; float: left;}
  #works-hot .works-hot-full .works-hot-box .pic img { width: 100%; height: auto;}
  #works-hot .works-hot-full .works-hot-box .infor { width: calc(100% - 600px); padding: 115px 0 0 80px; box-sizing: border-box; float: left;}
  #works-hot .works-hot-full .works-hot-box .infor .title-box { width: 100%; box-sizing: border-box;}
  #works-hot .works-hot-full .works-hot-box .infor .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  #works-hot .works-hot-full .works-hot-box .infor .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  #works-hot .works-hot-full .works-hot-box .infor .name { width: 100%; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  #works-hot .works-hot-full .works-hot-box .infor .intro { width: 100%; font-size: 1rem; line-height: 1.8em;}
  #works-hot .works-hot-full .works-hot-box .infor .intro span { color: #AE7D21; border-bottom: 2px #AE7D21 solid;}
  #works-hot .works-hot-full .works-hot-box .infor .icons-bt { width: 100%; margin: 80px 0 0 0; display: flex; justify-content: flex-start;}
  #works-hot .works-hot-full .works-hot-box .infor .icons-bt .icon { width: 74px;}
  #works-hot .works-hot-full .works-hot-box .infor .icons-bt .icon a { width: 100%; color: #AE7D21; font-size: 0.9em; text-align: center; text-decoration: none; display: block;}
  #works-hot .works-hot-full .works-hot-box .infor .icons-bt .icon a img { width: auto; height: 30px; margin: 0 auto;}

  #works-list { clear: both; width: 100%;}
  
  .works-list-title .title-box { width: 100%; margin: 0 0 30px 0; box-sizing: border-box; display: flex; justify-content: center; flex-wrap: wrap;}
  .works-list-title .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .works-list-title .title-box .title-2 { width: 140px; height: 30px; margin: 15px 0 0 -10px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .works-list-title .title-box .title-slogan { clear: both; width: 100%; margin: 20px 0 0 0; font-size: 2.2em; font-weight: 300; line-height: 1.4em; text-align: center;}
  .works-list-title .title-box .title-slogan span.big { font-size: 2.2rem; font-weight: 700;}
  .works-list-title .title-box .title-text { clear: both; width: 380px; margin: 10px 0 0 0; font-size: 1em; line-height: 1.6em; text-align: center;}

  .works-list-full { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .works-list-full .works-box { width: calc(100% / 3 - 40px); margin: 0 20px 40px 20px;}
  .works-list-full .works-box a { color: #414141; text-decoration: none;}
  .works-list-full .works-box .pic { width: 360px; height: 360px; margin: 0 0 20px 0; border-radius: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center;}
  .works-list-full .works-box .pic img { width: auto; height: 100%;}
  .works-list-full .works-box .year { width: 100%; color: #AE7D21; font-size: 1.4em; text-align: center;}
  .works-list-full .works-box .name { width: 100%; font-size: 2.2em; font-weight: 700; line-height: 1.4em; text-align: center;}
  .works-list-full .works-box .build { width: 100%; padding: 10px 0; font-size: 1.1em; line-height: 1em; text-align: center;}
  .works-list-full .works-box .build span { padding: 0 5px; background-color: #E6D1A8;}
  .works-list-full .works-box .intro { width: 100%; color: #99800F; font-size: 1em; text-align: center; letter-spacing: 0.1em;}


  /************ section (works content) ************/

  section#page-works-content { clear: both; width: 100%; padding: 0 calc(50% - 600px) 30px calc(50% - 600px); box-sizing: border-box; background-image: url("../images/works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #works-content-infor { width: 100%; padding: 0 0 40px 0; display: flex; justify-content: flex-start;}
  #works-content-infor .pic { width: 750px; margin: -70px 0 0 0; position: relative; z-index: 9;}
  #works-content-infor .pic img { width: 100%; height: auto; border: 20px #fff solid; box-sizing: border-box;}
  #works-content-infor .infor { width: calc(100% - 750px); padding: 80px 0 0 65px; box-sizing: border-box;}
  #works-content-infor .infor .name { width: 100%; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  #works-content-infor .infor .intro { width: 100%; font-size: 1rem; line-height: 1.8em;}
  #works-content-infor .infor .intro span { color: #AE7D21; border-bottom: 2px #AE7D21 solid;}
  #works-content-infor .infor .text { width: 100%; margin: 25px 0 0 0; font-size: 1em; line-height: 2em;}
  #works-content-infor .infor .icons-bt { width: 100%; margin: 30px 0 0 0; display: flex; justify-content: flex-start;}
  #works-content-infor .infor .icons-bt .icon { width: 74px;}
  #works-content-infor .infor .icons-bt .icon a { width: 100%; color: #AE7D21; font-size: 0.8em; text-align: center; text-decoration: none; display: block;}
  #works-content-infor .infor .icons-bt .icon a img { width: auto; height: 30px; margin: 0 auto;}

  #works-content-intro { clear: both; width: 100%; padding: 0 40px; font-size: 1em; line-height: 2em; box-sizing: border-box;}
  #works-content-intro span.title { font-size: 2.2rem; font-weight: 700; line-height: 2em;}
  #works-content-intro .map { width: 100%; margin: 0 0 60px 0;}
  #works-content-intro .map img { width: 100%; height: auto;}

  #goback-bt { clear: both; width: 60px; margin: 0 auto;}
  #goback-bt a { width: 100%; color: #AE7D21; font-size: 0.9em; text-align: right; text-decoration: none; display: block;}
  #goback-bt img { width: 100%; height: auto;}


  /************ section (works hot content) ************/

  #works-hot-content { width: 100%; margin: 0 0 20px 0;}
  #works-hot-content .photos-list { width: 100%; position: relative; z-index: 9;}
  #works-hot-content .photos-list img { width: 100%; height: auto;}
  #works-hot-content .infor-box { clear: both; width: 100%; padding: 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  #works-hot-content .infor-box .title-column-lf { width: 300px; margin: 0 0 10px 0; border-right: 1px #AE7D21 solid; box-sizing: border-box;}
  #works-hot-content .infor-box .title-column-lf .year { width: 100%; color: #AE7D21; font-size: 1.4em; line-height: 1em;}
  #works-hot-content .infor-box .title-column-lf .name { width: 100%; font-size: 2.2em; font-weight: 700; line-height: 1em;}
  #works-hot-content .infor-box .title-column-rt { width: calc(100% - 300px); margin: 0 0 10px 0; padding: 0 0 0 25px; color: #AE7D21; font-size: 1.2em; letter-spacing: 0.1em; box-sizing: border-box;}
  #works-hot-content .infor-box .intro-box { clear: both; width: 100%;}
  #works-hot-content .infor-box .intro-box .list { width: 100%; padding: 15px 0; font-size: 1em; border-bottom: 1px #BABABA solid;}

  #back-next-bt { clear: both; width: 100%; display: flex; justify-content: center; align-items: flex-end;}
  #back-next-bt .back { margin: 0 25px;}
  #back-next-bt .back a { color: #AE7D21; font-size: 0.9em; text-decoration: none; display: block;}
  #back-next-bt .back img { width: 60px; height: auto; margin: 0 0 0 38px;}
  #back-next-bt .back2 { margin: 0 25px; text-align: right;}
  #back-next-bt .back2 a { color: #AE7D21; font-size: 0.9em; text-decoration: none; display: block;}
  #back-next-bt .back2 img { width: 60px; height: auto;}
  #back-next-bt .list { margin: 0 25px;}
  #back-next-bt .list a { color: #AE7D21; font-size: 0.9em; text-decoration: none; display: block;}
  #back-next-bt .list a img { width: 20px; height: 20px; margin: 0 auto;}
  #back-next-bt .prev { margin: 0 25px;}
  #back-next-bt .prev a { color: #AE7D21; font-size: 0.9em; text-decoration: none; display: block;}
  #back-next-bt .prev img { width: 60px; height: auto;}


  /************ section (news) ************/

  section#page-news { clear: both; width: 100%; padding: 60px calc(50% - 600px) 40px calc(50% - 600px); box-sizing: border-box; background-image: url("../images/news_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #news-list-full { clear: both; width: 100%; padding: 45px 15px 10px 15px; background-color: #fff; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; position: relative; z-index: 9;}
  #news-list-full .news-list { width: calc(100% / 3 - 30px); margin: 0 15px 30px 15px;}
  #news-list-full .news-list a { color: #414141; text-decoration: none; display: block;}
  #news-list-full .news-list .pic { width: 100%; height: 170px; margin: 0 0 10px 0; overflow: hidden;}
  #news-list-full .news-list .pic img { width: 100%; height: auto;}
  #news-list-full .news-list .date { width: 100%; padding: 0 5px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  #news-list-full .news-list .date span.mon-day { color: #AE7D21; font-size: 3em; font-weight: 600;}
  #news-list-full .news-list .date span.week-year { padding: 0 0 0 10px; color: #99800F; font-size: 1.1em; line-height: 1.2em;}
  #news-list-full .news-list .title { width: 100%; padding: 0 5px; box-sizing: border-box; font-size: 1.2em; font-weight: 600; letter-spacing: 0.1em;}
  #news-list-full .news-list .hr { width: 70px; margin: 5px 0 10px 5px; border-bottom: 2px #99800F solid; display: block;}
  #news-list-full .news-list .intro { clear: both; width: 100%; padding: 0 5px; box-sizing: border-box; margin: 10px 0 0 0; font-size: 1em; line-height: 1.8em; letter-spacing: 0.1em;}

  #news-content { clear: both; width: 100%; padding: 45px 35px; margin: 0 0 50px 0; background-color: #fff; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-direction: row-reverse; position: relative; z-index: 9;}
  #news-content .pics { width: 730px; padding: 0 30px 0 0; border-right: 1px #AE7D21 solid; box-sizing: border-box;}
  #news-content .pics .pic-big { width: 100%; padding: 0 0 30px 0; border-bottom: 1px #ccc solid; overflow: hidden;}
  #news-content .pics .pic-big ul#big { padding: 0; margin: 0; list-style: none; display: block;}
  #news-content .pics .pic-big ul#big li { height: 460px; padding: 0; margin: 0; overflow: hidden; float: left; display: none;}
  #news-content .pics .pic-big ul#big li img { width: 100%; height: auto;}
  #news-content .pics .pic-thumb { clear: both; width: 100%; margin: 30px 0 0 0;}
  #news-content .pics .pic-thumb ul#thumb { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  #news-content .pics .pic-thumb ul#thumb li { width: calc(100% / 4 - 10px); height: 100px; margin: 0 5px 10px 5px; overflow: hidden;}
  #news-content .pics .pic-thumb ul#thumb li img { width: 100%; height: auto; cursor: pointer;}
  #news-content .infor { width: calc(100% - 630px); padding: 0 0 0 30px; box-sizing: border-box;}
  #news-content .infor .date { width: 100%; padding: 0 5px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  #news-content .infor .date span.mon-day { color: #AE7D21; font-size: 3em; font-weight: 600;}
  #news-content .infor .date span.week-year { padding: 0 0 0 10px; color: #99800F; font-size: 1.1em; line-height: 1.2em;}
  #news-content .infor .title { width: 100%; padding: 0 5px; box-sizing: border-box; font-size: 1.2em; font-weight: 700; letter-spacing: 0.1em;}
  #news-content .infor .hr { width: 100%; margin: 5px 0 10px 5px; border-bottom: 2px #99800F solid; display: block;}
  #news-content .infor .intro { clear: both; width: 100%; padding: 0 5px; box-sizing: border-box; margin: 10px 0 0 0; font-size: 1em; line-height: 2.2em; letter-spacing: 0.1em;}


  /************ section (service) ************/

  section#page-service { clear: both; width: 100%; position: relative;}
  
  img.service-bg { width: 100%; height: auto;}
  img.service-bg-mo { display: none;}

  #service { width: 100%; padding: 10vw 10vw 0 10vw; box-sizing: border-box; position: absolute; top: 0; left: 0;}
  
  #service img.service-title { width: auto; height: 14vw; position: absolute; top: 4vw; left: 21.5vw;}
  
  #service .step-box { width: 100%; margin: -3.8vw 0 0 0; position: relative;}
  #service .step-box img.service-step-bg { width: 100%; height: auto;}
  #service .step-box img.service-step-bg-mo { display: none;}
  #service .step-box .step-text-intro { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; position: absolute; top: 0; left: 0;}
  #service .step-box .step-text-intro .text-intro { width: calc(100% / 5);}
  #service .step-box .step-text-intro .text-intro .text { width: 100%; margin: 9vw 0 5vw 0; color: #000; font-size: 2.6vw; font-weight: 500; line-height: 3vw; text-align: center;}
  #service .step-box .step-text-intro .text-intro .text2 { width: 100%; margin: 17vw 0 9.5vw 0; color: #000; font-size: 2.6vw; font-weight: 500; line-height: 2.4vw; text-align: center;}
  #service .step-box .step-text-intro .text-intro .text3 { width: 100%; margin: 16vw 0 8vw 0; color: #000; font-size: 2.6vw; font-weight: 500; line-height: 2.4vw; text-align: center;}
  #service .step-box .step-text-intro .text-intro .text4 { width: 100%; margin: 9vw 0 5vw 0; color: #000; font-size: 2.6vw; font-weight: 500; line-height: 3vw; text-align: center;}
  #service .step-box .step-text-intro .text-intro .text5 { width: 100%; margin: 9vw 0 5vw 0; color: #000; font-size: 2.6vw; font-weight: 500; line-height: 3vw; text-align: center;}
  #service .step-box .step-text-intro .text-intro .intro { clear: both; margin: 0 auto; color: #000; font-size: 1.6vw; line-height: 2.6vw; letter-spacing: 0.2vw; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;}
  #service .step-box .step-text-intro .text-intro .intro2 { clear: both; margin: 0 auto; color: #000; font-size: 1.6vw; line-height: 2.6vw; letter-spacing: 0.2vw; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;}
  #service .step-box .step-text-intro .text-intro .intro3 { clear: both; margin: 0 auto; color: #000; font-size: 1.6vw; line-height: 2.6vw; letter-spacing: 0.2vw; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;}
  #service .step-box .step-text-intro .text-intro .intro4 { clear: both; margin: 0 auto; padding: 0 2vw 0 0; color: #000; font-size: 1.6vw; line-height: 2.6vw; letter-spacing: 0.2vw; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; box-sizing: border-box;}
  #service .step-box .step-text-intro .text-intro .intro5 { clear: both; margin: 0 auto; color: #000; font-size: 1.6vw; line-height: 2.6vw; letter-spacing: 0.2vw; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;}
  #service .step-box .step-text-intro .text-intro .intro a.line-pc { display: block;}
  #service .step-box .step-text-intro .text-intro .intro a.line-pc img.line { width: 2vw; height: auto;}
  #service .step-box .step-text-intro .text-intro .intro a.line-mo { display: none;}
  
  .service-title-text { width: 5vw; color: #fff; font-size: 3.7vw; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; position: absolute; bottom: 13vw; right: 29vw;}

  .serv-line-qrode { width: 9vw; color: #fff; font-size: 1.5vw; text-align: center; position: absolute; bottom: 13vw; right: 12.8vw;}
  .serv-line-qrode img.serv-qrcode { width: 100%; height: auto;}


  /************ section (service search content) ************/

  section#page-serv-search-content { clear: both; width: 100%; background-image: url("../images/serv_search_con_bg.jpg"); background-repeat: no-repeat; background-position: center top; background-size: cover;}
  
  img.serv-search-con-bg { width: 100%; height: auto;}

  #serv-search-content { width: 100%; padding: 120px calc(50% - 600px) 60px calc(50% - 600px); box-sizing: border-box;}
  
  #serv-search-content img.serv-search-title { width: auto; height: 240px; margin: 0 0 0 90px;}

  #serv-search-content .search-content { clear: both; width: 100%; padding: 30px; background-color: #fff; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-direction: row-reverse;}
  #serv-search-content .search-content .infor .pics-mo { display: none;}
  #serv-search-content .search-content .pics { width: 700px; padding: 0 30px 0 0; border-right: 1px #AA7D21 solid; box-sizing: border-box;}
  #serv-search-content .search-content .pics > div { display: none;}
  #serv-search-content .search-content .pics ul.pics-big { width: 100%; padding: 0 0 20px 0; margin: 0; border-bottom: 1px #ccc solid; list-style: none; display: block;}
  #serv-search-content .search-content .pics ul.pics-big li { width: 100%; padding: 0; margin: 0; display: none;}
  #serv-search-content .search-content .pics ul.pics-big li img { width: 100%; height: auto;}
  #serv-search-content .search-content .pics ul.pics-thumb { width: 100%; padding: 0; margin: 20px 0 0 0; list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  #serv-search-content .search-content .pics ul.pics-thumb li { width: calc(100% / 4 - 20px); height: 90px; margin: 0 10px 20px 10px; padding: 0; overflow: hidden;}
  #serv-search-content .search-content .pics ul.pics-thumb li img { width: 100%; height: auto; cursor: pointer;}
  #serv-search-content .search-content .infor { width: calc(100% - 700px);}
  #serv-search-content .search-content .infor .title-date { width: 100%; border-bottom: 1px #95800F solid; display: flex; justify-content: flex-start; align-items: stretch;}
  #serv-search-content .search-content .infor .title-date .title { width: 200px; padding: 4px 0 6px 0; color: #fff; font-size: 2em; font-weight: 500; letter-spacing: 0.1em; text-align: center; background-color: #A97D21;}
  #serv-search-content .search-content .infor .title-date .date { width: calc(100% - 200px); padding: 3px 10px 0 10px; color: #95800F; font-size: 2em; font-weight: 500; box-sizing: border-box;}
  #serv-search-content .search-content .infor .name { width: 100%; padding: 0 30px 20px 30px; font-size: 2.4em; font-weight: 600; letter-spacing: 0.1em; box-sizing: border-box;}
  #serv-search-content .search-content .infor .step { width: 100%; padding: 20px 30px; font-size: 2em; font-weight: 500; letter-spacing: 0.1em; box-sizing: border-box;}
  #serv-search-content .search-content .infor .text { width: 100%; padding: 20px 30px; box-sizing: border-box;}
  #serv-search-content .search-content .infor .search { width: 100%; padding: 20px 30px; box-sizing: border-box;}
  #serv-search-content .search-content .infor .search select { width: 100%; padding: 10px; color: #414141; font-size: 1.2em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #9C9C9C solid; background-color: #fff; box-sizing: border-box;}
  #serv-search-content .search-content .infor .back-bt { clear: both; width: 60px; margin: 30px 30px 0 0; text-align: right; float: right;}
  #serv-search-content .search-content .infor .back-bt a { color: #A97D21; font-size: 0.9rem; letter-spacing: 0.1em; text-decoration: none;}
  #serv-search-content .search-content .infor .back-bt img { width: 100%; height: auto;}
  #serv-search-content .search-content .infor .search-select { width: 100%; padding: 0 30px; font-size: 1.2rem; box-sizing: border-box;}
  #serv-search-content .search-content .infor .search-select select { padding: 3px 5px; border: 1px #ccc solid; font-size: 1.2rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial;}

  ul.search-steps-tab { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
  ul.search-steps-tab li { width: 100%; padding: 0; margin: 0;}
  ul.search-steps-tab li a { width: 100%; padding: 10px 0; text-decoration: none; display: flex; justify-content: flex-start;}
  ul.search-steps-tab li a.sel { background-color: #F7EBDF;}
  ul.search-steps-tab li .date { width: 100px; color: #414141; font-size: 1rem; font-weight: 600; line-height: 1.2rem;}
  ul.search-steps-tab li .step-name { width: calc(100% - 100px); color: red; font-size: 1.4rem; font-weight: 600; line-height: 1.2rem;}
  ul.search-steps-tab li ul.detail { width: 100%; padding: 0; margin: 10px 0 0 0; list-style: none; display: block;}
  ul.search-steps-tab li ul.detail li { width: 100%; padding: 5px 0; margin: 0; color: #444; font-size: 1rem; font-weight: 400;}


  /************ section (service search) ************/

  section#page-serv-search { clear: both; width: 100%; position: relative;}
  
  img.serv-search-bg { width: 100%; height: auto;}

  #serv-search { width: 100%; padding: 19vw 14vw 0 14vw; box-sizing: border-box; position: absolute; top: 0; left: 0;}
  
  #serv-search img.serv-search-title { width: auto; height: 13vw; position: absolute; top: 12vw; left: 16vw;}

  #serv-search .serv-search-form { width: 32vw; position: absolute; top: 10vw; right: 16vw;}
  #serv-search .serv-search-form .row { width: 100%; padding: 1vw 0; border-bottom: 3px #fff solid; display: flex; justify-content: flex-start; align-items: center;}
  #serv-search .serv-search-form .row:first-child { margin: 0 0 2.5vw 0;}
  #serv-search .serv-search-form .row .caption { width: 7vw; color: #F7EBDF; font-size: 1.2vw; letter-spacing: 0.1vw; display: flex; justify-content: flex-start; align-items: center;}
  #serv-search .serv-search-form .row .caption img.icon { width: 1.8vw; height: auto; margin: 0 1vw 0 0;}
  #serv-search .serv-search-form .row .column { width: calc(100% - 7vw);}
  #serv-search .serv-search-form .row .column input[type=text], 
  #serv-search .serv-search-form .row .column input[type=password] 
  { width: 100%; padding: 0.2vw 0.5vw; color: #fff; font-size: 1.1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: rgba(255,255,255,0.4); box-sizing: border-box;}
  #serv-search .serv-search-form .row2 { clear: both; width: 100%; padding: 1.5vw 0; color: #E1CCA3; font-size: 1.2vw; letter-spacing: 0.1vw;}
  #serv-search .serv-search-form input[type=submit] { width: 100%; padding: 1.6vw; color: #fff; font-size: 1.2vw; font-weight: 600; letter-spacing: 0.1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 4px #fff solid; background-color: transparent; box-sizing: border-box; cursor: pointer;}


  /************ section (contact) ************/

  section#page-contact { clear: both; width: 100%; background-image: url("../images/contact_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #contact { width: 100%; padding: 45px calc(50% - 600px); box-sizing: border-box;}

  .contact-title .title-box { width: 100%; margin: 0 0 30px 0; box-sizing: border-box; display: flex; justify-content: center; flex-wrap: wrap;}
  .contact-title .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .contact-title .title-box .title-2 { width: 140px; height: 30px; margin: 15px 0 0 -10px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .contact-title .title-box .title-slogan { clear: both; width: 100%; margin: 20px 0 0 0; font-size: 2.2em; font-weight: 300; line-height: 1.4em; text-align: center;}
  .contact-title .title-box .title-slogan span.big { font-size: 2.2rem; font-weight: 700;}
  .contact-title .title-box .title-text { clear: both; width: 480px; margin: 10px 0 0 0; font-size: 1em; line-height: 1.6em; text-align: center;}

  .contact-main { clear: both; width: 100%; margin: 65px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .contact-main .contact-table { width: 530px;}
  .contact-main .contact-table .list { width: 100%; padding: 15px 0; font-size: 1.4em; border-bottom: 1px #B5B5B5 solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .contact-main .contact-table .list .caption-1 { width: 90px;}
  .contact-main .contact-table .list .caption-1 span.star { color: #AE7D21;}
  .contact-main .contact-table .list .column-1 { width: calc(100% - 90px);}
  .contact-main .contact-table .list .column-1 input[type=text].style1 { width: 55%; padding: 5px; color: #414141; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; box-sizing: border-box;}
  .contact-main .contact-table .list .column-1 input[type=text].style2 { width: 100%; padding: 5px; color: #414141; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; box-sizing: border-box;}
  .contact-main .contact-table .list .column-1 textarea { width: 100%; height: 85px; padding: 5px; color: #414141; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; box-sizing: border-box;}
  .contact-main .contact-table .list .caption-2 { width: 120px;}
  .contact-main .contact-table .list .caption-2 span.star { color: #AE7D21;}
  .contact-main .contact-table .list .column-2 { width: calc(100% - 120px); display: flex; justify-content: flex-start;}
  .contact-main .contact-table .list .column-2 input[type=text].style1 { width: 55%; padding: 5px; color: #414141; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; box-sizing: border-box;}
  .contact-main .contact-table .list .column-2 img.code { margin: 0 0 0 10px;}
  .contact-main .contact-table .input-submit { width: 100%; padding: 15px 0; text-align: right;}
  .contact-main .contact-table .input-submit input[type=reset] { color: #414141; font-size: 1.4rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; cursor: pointer;}
  .contact-main .contact-table .input-submit input[type=submit] { color: #AE7D21; font-size: 1.4rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; cursor: pointer;}
    
  .contact-main .pic { width: 430px;}
  .contact-main .pic img { width: 370px; height: auto; margin: 210px 0 0 0; float: right;}
  .contact-main .infor { width: calc(100% - 530px - 430px); margin: 0 0 0 -90px; font-size: 1.4em; line-height: 1.4em;}


  /************ section (sitemap) ************/

  .banner-sitemap { clear: both; width: 100%; height: 30vw; overflow: hidden; position: relative;}
  .banner-sitemap img { width: 100%; height: auto;}
  .banner-sitemap img.banner-text { width: auto; height: 13vw; position: absolute; bottom: 4vw; left: 12vw;}

  section#page-sitemap { clear: both; width: 100%; background-image: url("../images/contact_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #sitemap { width: 100%; padding: 100px calc(50% - 600px); box-sizing: border-box;}

  ul.sitemap { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  ul.sitemap li { padding: 0; margin: 0 25px 40px 25px;}
  ul.sitemap li a { color: #414141; font-size: 1.4em; font-weight: 600; letter-spacing: 0.1em; text-decoration: none;}
  ul.sitemap li a:hover { border-bottom: 1px #414141 solid;}
  ul.sitemap li ul.sitemap-snd { padding: 0 0 0 10px; margin: 0; list-style: none; display: block;}
  ul.sitemap li ul.sitemap-snd li { padding: 0; margin: 20px 0;}
  ul.sitemap li ul.sitemap-snd li a { color: #414141; font-size: 1.2rem; font-weight: 500; letter-spacing: 0.1em; text-decoration: none;}
  ul.sitemap li ul.sitemap-snd li a:hover { border-bottom: 1px #414141 solid;}


  /************ section (error) ************/

  section#page-error { clear: both; width: 100%; background-image: url("../images/contact_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #error404 { width: 100%; padding: 160px calc(50% - 600px); box-sizing: border-box;}
  #error404 .title-1 { width: 100%; margin: 0 0 40px 0; font-size: 4em; font-weight: 700; font-family: Arial; letter-spacing: 0.1em; text-align: center;}
  #error404 .title-2 { width: 100%; font-size: 2em; font-weight: 500; letter-spacing: 0.1em; text-align: center;}
  #error404 .goback-bt { clear: both; width: 200px; margin: 80px auto 0 auto;}
  #error404 .goback-bt a { width: 100%; padding: 6px 0; color: #fff; font-size: 1.2em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #A97D21; display: block;}
  #error404 .goback-bt a:hover { background-color: #AE7D21;}


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

  footer { clear: both; width: 100%; padding: 40px; background-color: #000C1F; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}

  .logo-column { width: 270px;}
  .logo-column img.ft-logo { width: 270px; height: auto; margin: 0 auto;}

  .infor-column { width: calc(100% - 270px); padding: 0 0 0 25px; box-sizing: border-box;}
  .infor-column .ft-nav-icon { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .infor-column .ft-nav-icon ul.footer-nav { padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start;}
  .infor-column .ft-nav-icon ul.footer-nav li { padding: 0; margin: 0 10px;}
  .infor-column .ft-nav-icon ul.footer-nav li a { color: #fff; font-size: 0.9em; font-weight: 500; text-decoration: none;}
  .infor-column .ft-nav-icon ul.footer-nav li a:hover { border-bottom: 1px #fff solid;}
  .infor-column .ft-nav-icon ul.social-icons { padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: center;}
  .infor-column .ft-nav-icon ul.social-icons li { padding: 0; margin: 0 0 0 20px;}
  .infor-column .ft-nav-icon ul.social-icons li img { width: auto; height: 30px;}
  .infor-column .ft-addr-infor { width: 100%; padding: 10px 0 0 10px; box-sizing: border-box; display: flex; justify-content: flex-start;}
  .infor-column .ft-addr-infor div { margin: 0 40px 0 0; color: #C9A481; font-size: 0.9em; font-weight: 500;}
  .infor-column .ft-copyright { width: 100%; padding: 10px 0 0 10px; color: #fff; font-size: 0.8em; font-weight: 500;}


}

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

  /************ aside ************/

  aside { width: 108px; text-align: center; position: fixed; top: 300px; right: 10px; z-index: 990;}
  aside img.schedule-search-bt { width: 108px; height: auto;}
  aside img.line { width: 60px; height: auto; margin: 20px 0 0 0;}
  aside a { text-decoration: none;}
  aside span.text { color: #000; font-size: 0.8em; line-height: 1em;}


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

  header { width: 100%; height: 100px; padding: 0 20px; background-color: #F1F3F0; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}

  .header-logo { width: 255px; margin: 0 0 0 10px;}
  .header-logo img { width: 100%; height: auto;}
  
  nav#pc { display: none;}

  nav#mo { width: calc(100% - 265px - 50px);}
  nav#mo .nav-icon { width: 50px; color: #AE7D21; font-size: 2.6em; text-align: center; cursor: pointer; float: right;}
  nav#mo ul.hd-nav { width: 100%; padding: 40px; margin: 0; background-color: #AE7D21; list-style: none; display: none; box-sizing: border-box; position: absolute; top: 100px; left: 0; z-index: 999;}
  nav#mo ul.hd-nav li { width: 100%; padding: 0; margin: 0; position: relative;}
  nav#mo ul.hd-nav li a { width: 100%; padding: 15px 0; color: #fff; font-size: 1.4em; text-decoration: none; display: flex; justify-content: center; align-items: center; cursor: pointer;}
  nav#mo ul.hd-nav li ul.hd-nav-snd { width: 100%; padding: 20px; margin: 0; background-color: rgba(255,255,255,0.6); list-style: none; display: none; box-sizing: border-box;}
  nav#mo ul.hd-nav li ul.hd-nav-snd li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #fff solid;}
  nav#mo ul.hd-nav li ul.hd-nav-snd li:last-child { border-bottom: 0;}
  nav#mo ul.hd-nav li ul.hd-nav-snd li a { width: 100%; padding: 15px 0; color: #AE7D21; font-size: 1.4em; text-align: center; text-decoration: none; display: block;}

  .social-icon { width: 30px; margin: 0 0 0 20px;}
  .social-icon img { width: 30px; height: auto;}


  /************ banner (index) ************/

  .index-banner-box { clear: both; width: 100%; overflow: hidden;}
  .index-banner-box div { width: 100%; position: relative;}
  .index-banner-box div img { width: 120%; height: auto; margin: 0 0 0 -10%;}
  .index-banner-box div img.banner-hp-text { width: 30vw; height: auto; position: absolute; bottom: 0; left: 20vw;}


  /************ section (index) ************/

  section#index { clear: both; width: 100%; background-image: url("../images/index_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #index-about { width: 100%; padding: 50px 40px; box-sizing: border-box;}

  .index-about-pic { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .index-about-pic img.pic1 { width: calc(100% / 3 - 10px); height: auto; margin: 0 10px 0 0;}
  .index-about-pic img.pic2 { width: calc(100% / 3 - 10px); height: auto; margin: 150px 10px 0 0;}
  .index-about-pic img.pic3 { width: calc(100% / 3 - 10px); height: auto; margin: 60px 0 0 0;}

  .index-about-main { width: 100%; padding: 40px; box-sizing: border-box; position: relative;}
  .index-about-main .title-box { width: 100%; box-sizing: border-box;}
  .index-about-main .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .index-about-main .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .index-about-main .text-slogan { width: 100%; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .index-about-main .text-content { width: 100%; margin: 20px 0 0 0; font-size: 1em; line-height: 1.8em; letter-spacing: 0.1em; box-sizing: border-box;}
  .index-about-main .shape { height: 160px; width: 160px; border-right: 3px solid #D4D4D4; -moz-transform: skew(-45deg); -webkit-transform: skew(-45deg); transform: skew(-45deg); position: absolute; top: 45px; left: 290px;}
  .index-about-main .more-bt { clear: both; width: 190px; margin: 30px 0 0 0;}
  .index-about-main .more-bt img { width: 100%; height: auto;}

  #index-brand { clear: both; width: 100%; padding: 50px 40px; box-sizing: border-box;}

  .index-brand-main { width: 100%; padding: 0 40px 40px 40px; box-sizing: border-box; position: relative;}
  .index-brand-main .title-box { width: 100%; padding: 0 0 0 185px; box-sizing: border-box;}
  .index-brand-main .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .index-brand-main .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .index-brand-main .text-slogan { width: 100%; padding: 0 0 0 185px; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .index-brand-main .text-content { width: 100%; margin: 20px 0 0 0; font-size: 1em; line-height: 1.8em; letter-spacing: 0.1em; box-sizing: border-box;}
  .index-brand-main .shape { height: 160px; width: 160px; border-right: 3px solid #D4D4D4; -moz-transform: skew(45deg); -webkit-transform: skew(45deg); transform: skew(45deg); position: absolute; top: 5px; left: -70px;}
  .index-brand-main .more-bt { clear: both; width: 190px; margin: 30px 0 0 0;}
  .index-brand-main .more-bt img { width: 100%; height: auto;}

  .index-brand-pic { width: 100%;}
  .index-brand-pic img { width: 100%; height: auto;}

  #index-works { clear: both; width: 100%; margin: 50px 0; background-image: url("../images/index_works_bg.png"); background-repeat: no-repeat; background-size: 180% auto; background-position: center top;}

  .index-works-list-full { clear: both; width: 100%; padding: 50px 20px 0 20px; margin: 0 auto; box-sizing: border-box; overflow: hidden;}
  .index-works-list-full .works-list { width: 100%; padding: 0 60px; box-sizing: border-box}
  .index-works-list-full .works-list .pic { width: 100%;}
  .index-works-list-full .works-list .pic img { width: 100%; height: auto;}
  .index-works-list-full .works-list .works-infor { width: 100%; padding: 30px 0 0 0; position: relative;}
  .index-works-list-full .works-list .works-infor .title-box { width: 100%; box-sizing: border-box;}
  .index-works-list-full .works-list .works-infor .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .index-works-list-full .works-list .works-infor .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .index-works-list-full .works-list .works-infor .name { width: 100%; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .index-works-list-full .works-list .works-infor .intro { width: 100%; font-size: 1rem; line-height: 1.8em;}
  .index-works-list-full .works-list .works-infor .intro span { color: #AE7D21; border-bottom: 2px #AE7D21 solid;}
  .index-works-list-full .works-list .works-infor .more-bt { clear: both; width: 100%; padding: 40px 0;}
  .index-works-list-full .works-list .works-infor .more-bt img { width: 190px; height: auto;}

  .slider {
    width: 90%;
    margin: 0 auto;
  }

  .slick-slide {
    margin: 0px;
  }

  .slick-slide img {
    width: 90%;
    height: auto;
    margin: 0 auto;
  }

  .slick-prev:before,
  .slick-next:before {
    color: black;
  }

  .slick-slide {
    transition: all ease-in-out .3s;
    opacity: 1;
  }

  .slick-active {
    opacity: 1;
  }

  .slick-current {
    opacity: 1;
  }
  
  #sec-service .serv-column-rt { width: 31px; height: 301px; background-image: url("../images/hp_service_bg_right.png"); background-repeat: no-repeat;}

  #index-news { clear: both; width: 100%; padding: 0 40px 60px 40px; box-sizing: border-box;}

  .index-news-title { width: 100%; padding: 0 0 50px 0; position: relative;}
  .index-news-title .title-box { width: 100%; padding: 60px 0 0 185px; box-sizing: border-box;}
  .index-news-title .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .index-news-title .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .index-news-title .text-slogan { width: 100%; padding: 0 0 0 185px; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .index-news-title .shape { height: 160px; width: 160px; border-right: 3px solid #D4D4D4; -moz-transform: skew(45deg); -webkit-transform: skew(45deg); transform: skew(45deg); position: absolute; top: 5px; left: -70px;}

  .index-news-list { clear: both; width: 100%; padding: 0 20px; box-sizing: border-box;}
  .index-news-list .news-list { width: 100%; margin: 0 0 40px 0;}
  .index-news-list .news-list a { color: #414141; text-decoration: none; display: block;}
  .index-news-list .news-list .pic { width: 100%; height: 40vw; margin: 0 0 10px 0; overflow: hidden;}
  .index-news-list .news-list .pic img { width: 100%; height: auto;}
  .index-news-list .news-list .date { width: 100%; padding: 0 5px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .index-news-list .news-list .date span.mon-day { color: #AE7D21; font-size: 3em; font-weight: 600;}
  .index-news-list .news-list .date span.week-year { padding: 0 0 0 10px; color: #99800F; font-size: 1.1em; line-height: 1.2em;}
  .index-news-list .news-list .title { width: 100%; padding: 0 5px; box-sizing: border-box; font-size: 1.2em; font-weight: 600; letter-spacing: 0.1em;}
  .index-news-list .news-list .hr { width: 70px; margin: 5px 0 10px 5px; border-bottom: 2px #99800F solid; display: block;}
  .index-news-list .news-list .intro { clear: both; width: 100%; padding: 0 5px; box-sizing: border-box; margin: 10px 0 0 0; font-size: 1em; line-height: 1.8em; letter-spacing: 0.1em;}


  /************ banner (page) ************/

  .banner-box { clear: both; width: 100%; overflow: hidden;}
  .banner-box div { width: 100%; position: relative;}
  .banner-box div img { width: 120%; height: auto; margin: 0 0 0 -10%;}
  .banner-box div img.banner-text { width: auto; height: 20vw; position: absolute; bottom: 8vw; left: 12vw;}
  .banner-box div img.banner-text2 { width: auto; height: 20vw; position: absolute; bottom: 8vw; left: 12vw;}
  .banner-box div img.banner-text3 { width: auto; height: 20vw; position: absolute; bottom: 8vw; left: 12vw;}
  .banner-box div img.banner-text4 { width: auto; height: 20vw; position: absolute; bottom: 3vw; right: 12vw;}
  
  img.banner-text-works { clear: both; width: auto; height: 20vw;}


  /************ section (about) ************/

  section#page-about { clear: both; width: 100%; background-image: url("../images/about_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #about { width: 100%; padding: 45px 40px; box-sizing: border-box;}

  .about-pic { width: 100%; padding: 10px 0 0 0; margin: 10px 0 0 0; border-top: 1px #fff solid;}
  .about-pic img { width: 100%; height: auto; margin: 0 0 15px 0;}

  .about-main { width: 100%; margin: 0 0 15px 0; position: relative;}
  .about-main .title-box { width: 100%; padding: 0 0 0 60px; box-sizing: border-box;}
  .about-main .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .about-main .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .about-main .text-slogan { width: 100%; padding: 0 0 0 60px; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .about-main .text-content { width: 100%; margin: 10px 0 0 0; padding: 30px 40px 30px 60px; font-size: 1em; letter-spacing: 0.1em; line-height: 1.8em; background-color: #fff; box-sizing: border-box;}
  .about-main .shape { height: 160px; width: 160px; border-right: 3px solid #D4D4D4; -moz-transform: skew(-45deg); -webkit-transform: skew(-45deg); transform: skew(-45deg); position: absolute; top: 5px; left: 290px;}

  #brand { clear: both; width: 100%; padding: 45px 40px; box-sizing: border-box;}

  .brand-pic { width: 100%; padding: 10px 0 0 0; margin: 10px 0 0 0; border-top: 1px #fff solid;}
  .brand-pic img { width: 100%; height: auto; margin: 0 0 15px 0;}

  .brand-main { width: 100%; margin: 0 0 15px 0; box-sizing: border-box; position: relative;}
  .brand-main .title-box { width: 100%; padding: 0 0 0 60px; box-sizing: border-box;}
  .brand-main .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .brand-main .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .brand-main .text-slogan { width: 100%; padding: 0 0 0 60px; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .brand-main .text-content { width: 100%; margin: 10px 0 0 0; padding: 30px 40px 30px 60px; font-size: 1em; letter-spacing: 0.1em; line-height: 1.8em; background-color: #fff; box-sizing: border-box;}
  .brand-main .shape { height: 160px; width: 160px; border-right: 3px solid #D4D4D4; -moz-transform: skew(-45deg); -webkit-transform: skew(-45deg); transform: skew(-45deg); position: absolute; top: 5px; left: 290px;}

  #organization { clear: both; width: 100%; overflow: hidden; position: relative;}

  .about-org-content { width: 100%; padding: 0 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; position: absolute; top: 0; left: 0;}
  .about-org-content .title-logo { width: 330px; margin: 12vw 0 0 0;}
  .about-org-content .title-logo .org-title { width: 220px; margin: 0 0 10px 0;}
  .about-org-content .title-logo .org-title .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .about-org-content .title-logo .org-title .title-2 { width: 170px; height: 30px; margin: -12px 0 0 100px; color: #fff; border: 1px #fff solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .about-org-content .title-logo img.org-logo { width: 280px; height: auto;}
  .about-org-content .org-tree { width: calc(100% - 330px); margin: 2vw 0 0 0;}
  .about-org-content .org-tree img.org-tree { width: 16vw; height: auto;}

  img.org-bg { width: 120%; height: auto; margin: 0 0 0 -20%;}

  #architect { clear: both; width: 100%; padding: 45px 40px; box-sizing: border-box;}

  .architect-main { width: 100%; padding: 35px 0; position: relative;}
  .architect-main .title-box { width: 100%; padding: 0 0 0 50px; box-sizing: border-box;}
  .architect-main .title-box .title-1 { width: 140px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .architect-main .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 130px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .architect-main .text-slogan { width: 100%; padding: 0 0 0 50px; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .architect-main .text-content { width: 100%; margin: 15px 0 0 0; padding: 30px 50px; font-size: 1em; letter-spacing: 0.1em; line-height: 1.8em; background-color: #fff; box-sizing: border-box;}
  .architect-main .shape { height: 160px; width: 160px; border-right: 3px solid #D4D4D4; -moz-transform: skew(-45deg); -webkit-transform: skew(-45deg); transform: skew(-45deg); position: absolute; top: 40px; left: 200px;}

  .architect-pic { width: 100%; margin: 10px 0 0 0;}
  .architect-pic img.pic-1 { width: 100%; height: auto;}
  .architect-pic img.pic-2 { width: 70%; height: auto;}
  .architect-pic .pic-text { clear: both; width: 100%; margin: 10px 0; display: flex; justify-content: flex-start; align-items: center;}
  .architect-pic .pic-text .text1 { width: 180px; font-size: 0.8em; letter-spacing: 0.1em;}
  .architect-pic .pic-text .line1 { width: calc(100% - 180px); border-bottom: 1px #414141 solid; display: block;}
  .architect-pic .pic-text .text2 { width: 120px; font-size: 0.8em; letter-spacing: 0.1em;}
  .architect-pic .pic-text .line2 { width: calc(100% - 120px); border-bottom: 1px #414141 solid; display: block;}
  .architect-pic .pic-text2 { clear: both; width: 70%; margin: 10px 0; display: flex; justify-content: flex-start; align-items: center;}
  .architect-pic .pic-text2 .text { width: 110px; font-size: 0.8em; letter-spacing: 0.1em;}
  .architect-pic .pic-text2 .line { width: calc(100% - 110px); border-bottom: 1px #414141 solid; display: block;}


  /************ section (milestones) ************/

  section#page-milestones { clear: both; width: 100%; background-image: url("../images/about_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #milestones { width: 100%; padding: 60px 0; display: flex; justify-content: flex-start; align-items: stretch;}

  .mile-column-lf { width: 50%; border-right: 2px #AE7D21 solid; box-sizing: border-box;}
  .mile-column-lf .mile-title { width: 100%; padding: 60px 0 0 30px; margin: 0 0 80px 0; position: relative;}
  .mile-column-lf .mile-title .title-box { width: 100%;}
  .mile-column-lf .mile-title .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .mile-column-lf .mile-title .title-box .title-2 { width: 140px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .mile-column-lf .mile-title .text-slogan { width: 100%; padding: 0 0 9px 0; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em;}
  .mile-column-lf .mile-title .shape { display: none;}
  .mile-column-lf .extend-line-1 { clear: both; width: 150px; height: 15px; margin: -20px 0 0 0; border-top: 1px #000 solid; border-left: 1px #000 solid; display: block; float: right; position: relative; z-index: 2;}
  .mile-column-lf .pic-1 { clear: both; width: 186px; margin: -4px 60px 0 0; float: right; position: relative; z-index: 1;} 
  .mile-column-lf .pic-1 img { width: 100%; height: auto;}
  .mile-column-lf .extend-line-2 { clear: both; width: 180px; margin: -20px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2; float: right;}
  .mile-column-lf .extend-line-2 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; display: block;}
  .mile-column-lf .intro-text-2 { clear: both; width: 300px; margin: -40px 80px 0 0; font-size: 1.2em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: right;}
  .mile-column-lf .intro-text-2 span.date { color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em;}
  .mile-column-lf .extend-line-3 { clear: both; width: 200px; height: 15px; margin: -20px 0 0 0; border-top: 1px #000 solid; border-left: 1px #000 solid; display: block; float: right; position: relative; z-index: 2;}
  .mile-column-lf .pic-3 { clear: both; width: 238px; margin: -4px 88px 0 0; float: right; position: relative; z-index: 1;} 
  .mile-column-lf .pic-3 img { width: 100%; height: auto;}
  .mile-column-lf .extend-line-4 { clear: both; width: 190px; margin: -20px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2; float: right;}
  .mile-column-lf .extend-line-4 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; display: block;}
  .mile-column-lf .intro-text-4 { clear: both; width: 200px; margin: -40px 140px 0 0; font-size: 1.2em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: right;}
  .mile-column-lf .intro-text-4 .date { color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em; text-align: center;}
  .mile-column-lf .extend-line-5 { clear: both; width: 150px; height: 15px; margin: -20px 0 0 0; border-top: 1px #000 solid; border-left: 1px #000 solid; display: block; float: right; position: relative; z-index: 2;}
  .mile-column-lf .pic-5 { clear: both; width: 186px; margin: -4px 60px 0 0; float: right; position: relative; z-index: 1;} 
  .mile-column-lf .pic-5 img { width: 100%; height: auto;}
  .mile-column-lf .extend-line-6 { clear: both; width: 190px; margin: -20px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2; float: right;}
  .mile-column-lf .extend-line-6 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; display: block;}
  .mile-column-lf .intro-text-6 { clear: both; width: 300px; margin: -40px 100px 0 0; font-size: 1.2em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: right;}
  .mile-column-lf .intro-text-6 .date { color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em; text-align: center;}
  .mile-column-lf .extend-line-7 { clear: both; width: 150px; height: 15px; margin: -20px 0 0 0; border-top: 1px #000 solid; border-left: 1px #000 solid; display: block; float: right; position: relative; z-index: 2;}
  .mile-column-lf .pic-7 { clear: both; width: 186px; margin: -4px 60px 0 0; float: right; position: relative; z-index: 1;} 
  .mile-column-lf .pic-7 img { width: 100%; height: auto;}
  .mile-column-lf .extend-line-8 { clear: both; width: 190px; margin: -20px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2; float: right;}
  .mile-column-lf .extend-line-8 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; display: block;}
  .mile-column-lf .intro-text-8 { clear: both; width: 200px; margin: -40px 140px 0 0; font-size: 1.2em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: right;}
  .mile-column-lf .intro-text-8 .date { color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em; text-align: center;}

  .mile-time-dot-1 { clear: both; width: 40px; height: 40px; margin: 0 -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-2 { clear: both; width: 40px; height: 40px; margin: 100px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-3 { clear: both; width: 40px; height: 40px; margin: 145px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-4 { clear: both; width: 40px; height: 40px; margin: 70px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-5 { clear: both; width: 40px; height: 40px; margin: 160px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-6 { clear: both; width: 40px; height: 40px; margin: 50px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-7 { clear: both; width: 40px; height: 40px; margin: 98px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-8 { clear: both; width: 40px; height: 40px; margin: 30px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}

  .mile-column-rt { width: 50%; padding: 276px 0 0 0; border-left: 2px #AE7D21 solid; box-sizing: border-box;}
  .mile-column-rt .extend-line-1 { clear: both; width: 100px; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .extend-line-1 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; float: right; display: block;}
  .mile-column-rt .intro-text-1 { clear: both; width: 200px; margin: -24px 0 0 80px; font-size: 1.2em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: left;}
  .mile-column-rt .intro-text-1 span.date { color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em;}
  .mile-column-rt .extend-line-2 { clear: both; width: 100px; margin: 320px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .pic-2 { clear: both; width: 186px; margin: -93px 0 0 100px; position: relative; z-index: 1;} 
  .mile-column-rt .pic-2 img { width: 100%; height: auto;}
  .mile-column-rt .extend-line-3 { clear: both; width: 100px; margin: 115px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .extend-line-3 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; float: right; display: block;}
  .mile-column-rt .intro-text-3 { clear: both; width: 200px; margin: -24px 0 0 80px; font-size: 1.2em; line-height: 1.2em; letter-spacing: 0.1em; float: left;}
  .mile-column-rt .intro-text-3 .date { width: 100%; color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em; text-align: center}
  .mile-column-rt .extend-line-4 { clear: both; width: 100px; margin: 342px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .pic-4 { clear: both; width: 186px; margin: -93px 0 0 100px; position: relative; z-index: 1;} 
  .mile-column-rt .pic-4 img { width: 100%; height: auto;}
  .mile-column-rt .extend-line-5 { clear: both; width: 100px; margin: 200px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .extend-line-5 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; float: right; display: block;}
  .mile-column-rt .intro-text-5 { clear: both; width: 170px; margin: -24px 0 0 80px; font-size: 1.2em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: left;}
  .mile-column-rt .intro-text-5 span.date { color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em;}
  .mile-column-rt .extend-line-6 { clear: both; width: 100px; margin: 273px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .pic-6 { clear: both; width: 186px; margin: -93px 0 0 100px; position: relative; z-index: 1;} 
  .mile-column-rt .pic-6 img { width: 100%; height: auto;}
  .mile-column-rt .extend-line-7 { clear: both; width: 100px; margin: 68px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .extend-line-7 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; float: right; display: block;}
  .mile-column-rt .intro-text-7 { clear: both; width: 260px; margin: -24px 0 0 50px; font-size: 1.2em; line-height: 1.2em; text-align: center; letter-spacing: 0.1em; float: left;}
  .mile-column-rt .intro-text-7 .date { width: 100%; padding: 0 0 0 70px; color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em; text-align: left; box-sizing: border-box;}
  .mile-column-rt .extend-line-8 { clear: both; width: 100px; margin: 250px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .pic-8 { clear: both; width: 238px; margin: -125px 0 0 100px; position: relative; z-index: 1;} 
  .mile-column-rt .pic-8 img { width: 100%; height: auto;}
  .mile-column-rt .logo-8 { clear: both; width: 274px; margin: 20px 0 0 75px; position: relative; z-index: 1;} 
  .mile-column-rt .logo-8 img { width: 100%; height: auto;}


  /************ section (works) ************/

  section#page-works { clear: both; width: 100%; padding: 60px 40px; box-sizing: border-box; background-image: url("../images/works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #works-hot { width: 100%; padding: 30px 40px 10px 30px; margin: 0 0 50px 0; background-color: rgba(255,255,255,0.8); box-sizing: border-box; position: relative; z-index: 9;}
  #works-hot .border-line { width: 100%; height: 40vw; border: 1px #99800F solid; box-sizing: border-box; display: block;}
  #works-hot .works-hot-full { width: 100%; margin: -40vw 0 0 0;}
  #works-hot .works-hot-full .works-hot-box { width: 90%; padding: 30px; margin: 0 auto; box-sizing: border-box; position: relative;}
  #works-hot .works-hot-full .works-hot-box .pic { width: 100%;}
  #works-hot .works-hot-full .works-hot-box .pic img { width: 100%; height: auto;}
  #works-hot .works-hot-full .works-hot-box .infor { width: 100%; margin: 30px 0 0 0; position: relative;}
  #works-hot .works-hot-full .works-hot-box .infor .new-icon { width: 70px; position: absolute; top: 0; right: 0;}
  #works-hot .works-hot-full .works-hot-box .infor .new-icon img { width: 100%; height: auto;}
  #works-hot .works-hot-full .works-hot-box .infor .title-box { width: 100%; box-sizing: border-box;}
  #works-hot .works-hot-full .works-hot-box .infor .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  #works-hot .works-hot-full .works-hot-box .infor .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  #works-hot .works-hot-full .works-hot-box .infor .name { width: 100%; margin: 10px 0 0 0; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  #works-hot .works-hot-full .works-hot-box .infor .intro { width: 100%; font-size: 1rem; line-height: 1.8em;}
  #works-hot .works-hot-full .works-hot-box .infor .intro span { color: #AE7D21; border-bottom: 2px #AE7D21 solid;}
  #works-hot .works-hot-full .works-hot-box .infor .icons-bt { width: 100%; margin: 80px 0 0 0; display: flex; justify-content: flex-start;}
  #works-hot .works-hot-full .works-hot-box .infor .icons-bt .icon { width: 74px;}
  #works-hot .works-hot-full .works-hot-box .infor .icons-bt .icon a { width: 100%; color: #AE7D21; font-size: 0.9em; text-align: center; text-decoration: none; display: block;}
  #works-hot .works-hot-full .works-hot-box .infor .icons-bt .icon a img { width: auto; height: 30px; margin: 0 auto;}

  #works-list { clear: both; width: 100%;}
  
  .works-list-title .title-box { width: 100%; margin: 0 0 30px 0; box-sizing: border-box; display: flex; justify-content: center; flex-wrap: wrap;}
  .works-list-title .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .works-list-title .title-box .title-2 { width: 140px; height: 30px; margin: 15px 0 0 -10px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .works-list-title .title-box .title-slogan { clear: both; width: 100%; margin: 20px 0 0 0; font-size: 2.2em; font-weight: 300; line-height: 1.4em; text-align: center;}
  .works-list-title .title-box .title-slogan span.big { font-size: 2.2rem; font-weight: 700;}
  .works-list-title .title-box .title-text { clear: both; width: 380px; margin: 10px 0 0 0; font-size: 1em; line-height: 1.6em; text-align: center;}

  .works-list-full { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .works-list-full .works-box { width: calc(100% / 2 - 40px); margin: 0 20px 40px 20px;}
  .works-list-full .works-box a { color: #414141; text-decoration: none;}
  .works-list-full .works-box .pic { width: 41vw; height: 41vw; margin: 0 auto 20px auto; border-radius: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center;}
  .works-list-full .works-box .pic img { width: auto; height: 100%;}
  .works-list-full .works-box .year { clear: both; width: 100%; color: #AE7D21; font-size: 1.4em; text-align: center;}
  .works-list-full .works-box .name { width: 100%; font-size: 2.2em; font-weight: 700; line-height: 1.4em; text-align: center;}
  .works-list-full .works-box .build { width: 100%; padding: 10px 0; font-size: 1.1em; line-height: 1em; text-align: center;}
  .works-list-full .works-box .build span { padding: 0 5px; background-color: #E6D1A8;}
  .works-list-full .works-box .intro { width: 100%; color: #99800F; font-size: 1em; text-align: center; letter-spacing: 0.1em;}


  /************ section (works content) ************/

  section#page-works-content { clear: both; width: 100%; padding: 0 40px 30px 40px; box-sizing: border-box; background-image: url("../images/works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #works-content-infor { width: 100%; padding: 0 40px 40px 40px; box-sizing: border-box;}
  #works-content-infor .pic { width: 100%; margin: -10vw 0 0 0; position: relative; z-index: 9;}
  #works-content-infor .pic img { width: 100%; height: auto; border: 20px #fff solid; box-sizing: border-box;}
  #works-content-infor .infor { width: 100%; padding: 30px 0 0 0; box-sizing: border-box;}
  #works-content-infor .infor .name { width: 100%; font-size: 2.2em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  #works-content-infor .infor .intro { width: 100%; font-size: 1rem; line-height: 1.8em;}
  #works-content-infor .infor .intro span { color: #AE7D21; border-bottom: 2px #AE7D21 solid;}
  #works-content-infor .infor .text { width: 100%; margin: 25px 0 0 0; font-size: 1em; line-height: 2em;}
  #works-content-infor .infor .icons-bt { width: 100%; margin: 30px 0 0 0; display: flex; justify-content: flex-start;}
  #works-content-infor .infor .icons-bt .icon { width: 74px;}
  #works-content-infor .infor .icons-bt .icon a { width: 100%; color: #AE7D21; font-size: 0.8em; text-align: center; text-decoration: none; display: block;}
  #works-content-infor .infor .icons-bt .icon a img { width: auto; height: 30px; margin: 0 auto;}

  #works-content-intro { clear: both; width: 100%; padding: 0 40px; font-size: 1em; line-height: 2em; box-sizing: border-box;}
  #works-content-intro span.title { font-size: 2.2rem; font-weight: 700; line-height: 1.2em;}
  #works-content-intro .map { width: 100%; margin: 0 0 60px 0;}
  #works-content-intro .map img { width: 100%; height: auto;}

  #goback-bt { clear: both; width: 60px; margin: 0 auto;}
  #goback-bt a { width: 100%; color: #AE7D21; font-size: 0.9em; text-align: right; text-decoration: none; display: block;}
  #goback-bt img { width: 100%; height: auto;}


  /************ section (works hot content) ************/

  #works-hot-content { width: 100%; margin: 0 0 20px 0;}
  #works-hot-content .photos-list { width: 100%; position: relative; z-index: 9;}
  #works-hot-content .photos-list img { width: 100%; height: auto;}
  #works-hot-content .infor-box { clear: both; width: 100%; padding: 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  #works-hot-content .infor-box .title-column-lf { width: 300px; margin: 0 0 10px 0; border-right: 1px #AE7D21 solid; box-sizing: border-box;}
  #works-hot-content .infor-box .title-column-lf .year { width: 100%; color: #AE7D21; font-size: 1.4em; line-height: 1em;}
  #works-hot-content .infor-box .title-column-lf .name { width: 100%; font-size: 2.2em; font-weight: 700; line-height: 1em;}
  #works-hot-content .infor-box .title-column-rt { width: calc(100% - 300px); margin: 0 0 10px 0; padding: 0 0 0 25px; color: #AE7D21; font-size: 1.2em; letter-spacing: 0.1em; box-sizing: border-box;}
  #works-hot-content .infor-box .intro-box { clear: both; width: 100%;}
  #works-hot-content .infor-box .intro-box .list { width: 100%; padding: 15px 0; font-size: 1em; border-bottom: 1px #BABABA solid;}

  #back-next-bt { clear: both; width: 100%; display: flex; justify-content: center; align-items: flex-end;}
  #back-next-bt .back { margin: 0 25px;}
  #back-next-bt .back a { color: #AE7D21; font-size: 0.9em; text-decoration: none; display: block;}
  #back-next-bt .back img { width: 60px; height: auto; margin: 0 0 0 38px;}
  #back-next-bt .back2 { margin: 0 25px; text-align: right;}
  #back-next-bt .back2 a { color: #AE7D21; font-size: 0.9em; text-decoration: none; display: block;}
  #back-next-bt .back2 img { width: 60px; height: auto;}
  #back-next-bt .list { margin: 0 25px;}
  #back-next-bt .list a { color: #AE7D21; font-size: 0.9em; text-decoration: none; display: block;}
  #back-next-bt .list a img { width: 20px; height: 20px; margin: 0 auto;}
  #back-next-bt .prev { margin: 0 25px;}
  #back-next-bt .prev a { color: #AE7D21; font-size: 0.9em; text-decoration: none; display: block;}
  #back-next-bt .prev img { width: 60px; height: auto;}


  /************ section (news) ************/

  section#page-news { clear: both; width: 100%; padding: 60px 40px 40px 40px; box-sizing: border-box; background-image: url("../images/news_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #news-list-full { clear: both; width: 100%; padding: 45px 15px 10px 15px; background-color: #fff; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; position: relative; z-index: 9;}
  #news-list-full .news-list { width: calc(100% / 2 - 30px); margin: 0 15px 30px 15px;}
  #news-list-full .news-list a { color: #414141; text-decoration: none; display: block;}
  #news-list-full .news-list .pic { width: 100%; height: 19vw; margin: 0 0 10px 0; overflow: hidden;}
  #news-list-full .news-list .pic img { width: 100%; height: auto;}
  #news-list-full .news-list .date { width: 100%; padding: 0 5px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  #news-list-full .news-list .date span.mon-day { color: #AE7D21; font-size: 3em; font-weight: 600;}
  #news-list-full .news-list .date span.week-year { padding: 0 0 0 10px; color: #99800F; font-size: 1.1em; line-height: 1.2em;}
  #news-list-full .news-list .title { width: 100%; padding: 0 5px; box-sizing: border-box; font-size: 1.2em; font-weight: 600; letter-spacing: 0.1em;}
  #news-list-full .news-list .hr { width: 70px; margin: 5px 0 10px 5px; border-bottom: 2px #99800F solid; display: block;}
  #news-list-full .news-list .intro { clear: both; width: 100%; padding: 0 5px; box-sizing: border-box; margin: 10px 0 0 0; font-size: 1em; line-height: 1.8em; letter-spacing: 0.1em;}

  #news-content { clear: both; width: 100%; padding: 45px 35px; margin: 0 0 50px 0; background-color: #fff; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-direction: row-reverse; position: relative; z-index: 9;}
  #news-content .pics { width: 50%; padding: 0 30px 0 0; border-right: 1px #AE7D21 solid; box-sizing: border-box;}
  #news-content .pics .pic-big { width: 100%; padding: 0 0 30px 0; border-bottom: 1px #ccc solid; overflow: hidden;}
  #news-content .pics .pic-big ul#big { padding: 0; margin: 0; list-style: none; display: block;}
  #news-content .pics .pic-big ul#big li { height: 24vw; padding: 0; margin: 0; overflow: hidden; float: left; display: none;}
  #news-content .pics .pic-big ul#big li img { width: 100%; height: auto;}
  #news-content .pics .pic-thumb { clear: both; width: 100%; margin: 30px 0 0 0;}
  #news-content .pics .pic-thumb ul#thumb { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  #news-content .pics .pic-thumb ul#thumb li { width: calc(100% / 3 - 10px); height: 7VW; margin: 0 5px 10px 5px; overflow: hidden;}
  #news-content .pics .pic-thumb ul#thumb li img { width: 100%; height: auto; cursor: pointer;}
  #news-content .infor { width: 50%; padding: 0 0 0 30px; box-sizing: border-box;}
  #news-content .infor .date { width: 100%; padding: 0 5px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  #news-content .infor .date span.mon-day { color: #AE7D21; font-size: 3em; font-weight: 600;}
  #news-content .infor .date span.week-year { padding: 0 0 0 10px; color: #99800F; font-size: 1.1em; line-height: 1.2em;}
  #news-content .infor .title { width: 100%; padding: 0 5px; box-sizing: border-box; font-size: 1.2em; font-weight: 700; letter-spacing: 0.1em;}
  #news-content .infor .hr { width: 100%; margin: 5px 0 10px 5px; border-bottom: 2px #99800F solid; display: block;}
  #news-content .infor .intro { clear: both; width: 100%; padding: 0 5px; box-sizing: border-box; margin: 10px 0 0 0; font-size: 1em; line-height: 2.2em; letter-spacing: 0.1em;}


  /************ section (service) ************/

  section#page-service { clear: both; width: 100%; position: relative;}
  
  img.service-bg { width: 100%; height: auto;}
  img.service-bg-mo { display: none;}

  #service { width: 100%; padding: 10vw 10vw 0 10vw; box-sizing: border-box; position: absolute; top: 0; left: 0;}
  
  #service img.service-title { width: auto; height: 14vw; position: absolute; top: 4vw; left: 21.5vw;}
  
  #service .step-box { width: 100%; margin: -3.8vw 0 0 0; position: relative;}
  #service .step-box img.service-step-bg { width: 100%; height: auto;}
  #service .step-box img.service-step-bg-mo { display: none;}
  #service .step-box .step-text-intro { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; position: absolute; top: 0; left: 0;}
  #service .step-box .step-text-intro .text-intro { width: calc(100% / 5);}
  #service .step-box .step-text-intro .text-intro .text { width: 100%; margin: 9vw 0 5vw 0; color: #000; font-size: 2.6vw; font-weight: 500; line-height: 3vw; text-align: center;}
  #service .step-box .step-text-intro .text-intro .text2 { width: 100%; margin: 17vw 0 9.5vw 0; color: #000; font-size: 2.6vw; font-weight: 500; line-height: 2.4vw; text-align: center;}
  #service .step-box .step-text-intro .text-intro .text3 { width: 100%; margin: 16vw 0 8vw 0; color: #000; font-size: 2.6vw; font-weight: 500; line-height: 2.4vw; text-align: center;}
  #service .step-box .step-text-intro .text-intro .text4 { width: 100%; margin: 9vw 0 5vw 0; color: #000; font-size: 2.6vw; font-weight: 500; line-height: 3vw; text-align: center;}
  #service .step-box .step-text-intro .text-intro .text5 { width: 100%; margin: 9vw 0 5vw 0; color: #000; font-size: 2.6vw; font-weight: 500; line-height: 3vw; text-align: center;}
  #service .step-box .step-text-intro .text-intro .intro { clear: both; margin: 0 auto; color: #000; font-size: 1.6vw; line-height: 2.6vw; letter-spacing: 0.2vw; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;}
  #service .step-box .step-text-intro .text-intro .intro2 { clear: both; margin: 0 auto; color: #000; font-size: 1.6vw; line-height: 2.6vw; letter-spacing: 0.2vw; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;}
  #service .step-box .step-text-intro .text-intro .intro3 { clear: both; margin: 0 auto; color: #000; font-size: 1.6vw; line-height: 2.6vw; letter-spacing: 0.2vw; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;}
  #service .step-box .step-text-intro .text-intro .intro4 { clear: both; margin: 0 auto; padding: 0 3vw 0 0; color: #000; font-size: 1.6vw; line-height: 2.6vw; letter-spacing: 0.2vw; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; box-sizing: border-box;}
  #service .step-box .step-text-intro .text-intro .intro5 { clear: both; margin: 0 auto; color: #000; font-size: 1.6vw; line-height: 2.6vw; letter-spacing: 0.2vw; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl;}
  #service .step-box .step-text-intro .text-intro .intro a.line-pc { display: block;}
  #service .step-box .step-text-intro .text-intro .intro a.line-pc img.line { width: 2vw; height: auto;}
  #service .step-box .step-text-intro .text-intro .intro a.line-mo { display: none;}
  
  .service-title-text { width: 5vw; color: #fff; font-size: 3.7vw; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; position: absolute; bottom: 13vw; right: 29vw;}

  .serv-line-qrode { width: 10vw; color: #fff; font-size: 1.5vw; text-align: center; position: absolute; bottom: 13vw; right: 12vw;}
  .serv-line-qrode img.serv-qrcode { width: 100%; height: auto;}


  /************ section (service search content) ************/

  section#page-serv-search-content { clear: both; width: 100%; background-image: url("../images/serv_search_con_bg.jpg"); background-repeat: no-repeat; background-position: center top; background-size: cover;}
  
  img.serv-search-con-bg { width: 100%; height: auto;}

  #serv-search-content { width: 100%; padding: 120px 40px 60px 40px; box-sizing: border-box;}
  
  #serv-search-content img.serv-search-title { width: auto; height: 200px; margin: 0 0 0 90px;}

  #serv-search-content .search-content { clear: both; width: 100%; padding: 30px; background-color: #fff; box-sizing: border-box;}
  #serv-search-content .search-content .infor .pics-mo { display: none;}
  #serv-search-content .search-content .pics { width: 100%;}
  #serv-search-content .search-content .pics > div { display: none;}
  #serv-search-content .search-content .pics ul.pics-big { width: 100%; padding: 0 0 20px 0; margin: 0; border-bottom: 1px #ccc solid; list-style: none; display: block;}
  #serv-search-content .search-content .pics ul.pics-big li { width: 100%; padding: 0; margin: 0; display: none;}
  #serv-search-content .search-content .pics ul.pics-big li img { width: 100%; height: auto;}
  #serv-search-content .search-content .pics ul.pics-thumb { width: 100%; padding: 0; margin: 20px 0 0 0; list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  #serv-search-content .search-content .pics ul.pics-thumb li { width: calc(100% / 4 - 20px); height: 12vw; margin: 0 10px 20px 10px; padding: 0; overflow: hidden;}
  #serv-search-content .search-content .pics ul.pics-thumb li img { width: 100%; height: auto; cursor: pointer;}
  #serv-search-content .search-content .infor { width: 100%;}
  #serv-search-content .search-content .infor .title-date { width: 100%; border-bottom: 1px #95800F solid; display: flex; justify-content: flex-start; align-items: stretch;}
  #serv-search-content .search-content .infor .title-date .title { width: 200px; padding: 4px 0 6px 0; color: #fff; font-size: 2em; font-weight: 500; letter-spacing: 0.1em; text-align: center; background-color: #A97D21;}
  #serv-search-content .search-content .infor .title-date .date { width: calc(100% - 200px); padding: 3px 10px 0 10px; color: #95800F; font-size: 2em; font-weight: 500; box-sizing: border-box;}
  #serv-search-content .search-content .infor .name { width: 100%; padding: 0 30px 20px 30px; font-size: 2.4em; font-weight: 600; letter-spacing: 0.1em; box-sizing: border-box;}
  #serv-search-content .search-content .infor .step { width: 100%; padding: 20px 30px; font-size: 2em; font-weight: 500; letter-spacing: 0.1em; box-sizing: border-box;}
  #serv-search-content .search-content .infor .text { width: 100%; padding: 20px 30px; box-sizing: border-box;}
  #serv-search-content .search-content .infor .search { width: 100%; padding: 20px 30px; box-sizing: border-box;}
  #serv-search-content .search-content .infor .search select { width: 100%; padding: 10px; color: #414141; font-size: 1.2em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #9C9C9C solid; background-color: #fff; box-sizing: border-box;}
  #serv-search-content .search-content .infor .back-bt { clear: both; width: 60px; margin: 30px 30px 30px 0; text-align: right; float: right;}
  #serv-search-content .search-content .infor .back-bt a { color: #A97D21; font-size: 0.9rem; letter-spacing: 0.1em; text-decoration: none;}
  #serv-search-content .search-content .infor .back-bt img { width: 100%; height: auto;}
  #serv-search-content .search-content .infor .search-select { width: 100%; padding: 0 30px; font-size: 1.2rem; box-sizing: border-box;}
  #serv-search-content .search-content .infor .search-select select { padding: 3px 5px; border: 1px #ccc solid; font-size: 1.2rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial;}

  ul.search-steps-tab { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
  ul.search-steps-tab li { width: 100%; padding: 0; margin: 0;}
  ul.search-steps-tab li a { width: 100%; padding: 10px 0; text-decoration: none; display: flex; justify-content: flex-start;}
  ul.search-steps-tab li a.sel { background-color: #F7EBDF;}
  ul.search-steps-tab li .date { width: 100px; color: #414141; font-size: 1rem; font-weight: 600; line-height: 1.2rem;}
  ul.search-steps-tab li .step-name { width: calc(100% - 100px); color: red; font-size: 1.4rem; font-weight: 600; line-height: 1.2rem;}
  ul.search-steps-tab li ul.detail { width: 100%; padding: 0; margin: 10px 0 0 0; list-style: none; display: block;}
  ul.search-steps-tab li ul.detail li { width: 100%; padding: 5px 0; margin: 0; color: #444; font-size: 1rem; font-weight: 400;}


  /************ section (service search) ************/

  section#page-serv-search { clear: both; width: 100%; overflow: hidden; position: relative;}
  
  img.serv-search-bg { width: 120%; height: auto; margin: 0 0 0 -20%;}

  #serv-search { width: 100%; padding: 19vw 8vw 0 8vw; box-sizing: border-box; position: absolute; top: 0; left: 0;}
  
  #serv-search img.serv-search-title { width: auto; height: 14vw; position: absolute; top: 12vw; left: 8vw;}

  #serv-search .serv-search-form { width: 42vw; position: absolute; top: 10vw; right: 8vw;}
  #serv-search .serv-search-form .row { width: 100%; padding: 1.5vw 0; border-bottom: 3px #fff solid; display: flex; justify-content: flex-start; align-items: center;}
  #serv-search .serv-search-form .row:first-child { margin: 0 0 3vw 0;}
  #serv-search .serv-search-form .row .caption { width: 8vw; color: #F7EBDF; font-size: 1.5vw; letter-spacing: 0.1vw; display: flex; justify-content: flex-start; align-items: center;}
  #serv-search .serv-search-form .row .caption img.icon { width: 2.2vw; height: auto; margin: 0 1.2vw 0 0;}
  #serv-search .serv-search-form .row .column { width: calc(100% - 8vw);}
  #serv-search .serv-search-form .row .column input[type=text], 
  #serv-search .serv-search-form .row .column input[type=password] 
  { width: 100%; padding: 0.2vw 0.5vw; color: #fff; font-size: 1.1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: rgba(255,255,255,0.4); box-sizing: border-box;}
  #serv-search .serv-search-form .row2 { clear: both; width: 100%; padding: 1.5vw 0; color: #E1CCA3; font-size: 1.2vw; letter-spacing: 0.1vw;}
  #serv-search .serv-search-form input[type=submit] { width: 100%; padding: 1.6vw; color: #fff; font-size: 1.2vw; font-weight: 600; letter-spacing: 0.1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 4px #fff solid; background-color: transparent; box-sizing: border-box; cursor: pointer;}


  /************ section (contact) ************/

  section#page-contact { clear: both; width: 100%; background-image: url("../images/contact_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #contact { width: 100%; padding: 45px 40px; box-sizing: border-box;}

  .contact-title .title-box { width: 100%; margin: 0 0 30px 0; box-sizing: border-box; display: flex; justify-content: center; flex-wrap: wrap;}
  .contact-title .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .contact-title .title-box .title-2 { width: 140px; height: 30px; margin: 15px 0 0 -10px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .contact-title .title-box .title-slogan { clear: both; width: 100%; margin: 20px 0 0 0; font-size: 2.2em; font-weight: 300; line-height: 1.4em; text-align: center;}
  .contact-title .title-box .title-slogan span.big { font-size: 2.2rem; font-weight: 700;}
  .contact-title .title-box .title-text { clear: both; width: 480px; margin: 10px 0 0 0; font-size: 1em; line-height: 1.6em; text-align: center;}

  .contact-main { clear: both; width: 100%; margin: 65px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .contact-main form { width: 100%;}
  .contact-main .contact-table { width: 100%; margin: 0 0 30px 0;}
  .contact-main .contact-table .list { width: 100%; padding: 15px 0; font-size: 1.4em; border-bottom: 1px #B5B5B5 solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .contact-main .contact-table .list .caption-1 { width: 90px;}
  .contact-main .contact-table .list .caption-1 span.star { color: #AE7D21;}
  .contact-main .contact-table .list .column-1 { width: calc(100% - 90px);}
  .contact-main .contact-table .list .column-1 input[type=text].style1 { width: 55%; padding: 5px; color: #414141; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; box-sizing: border-box;}
  .contact-main .contact-table .list .column-1 input[type=text].style2 { width: 100%; padding: 5px; color: #414141; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; box-sizing: border-box;}
  .contact-main .contact-table .list .column-1 textarea { width: 100%; height: 85px; padding: 5px; color: #414141; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; box-sizing: border-box;}
  .contact-main .contact-table .list .caption-2 { width: 120px;}
  .contact-main .contact-table .list .caption-2 span.star { color: #AE7D21;}
  .contact-main .contact-table .list .column-2 { width: calc(100% - 120px); display: flex; justify-content: flex-start;}
  .contact-main .contact-table .list .column-2 input[type=text].style1 { width: 55%; padding: 5px; color: #414141; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; box-sizing: border-box;}
  .contact-main .contact-table .list .column-2 img.code { margin: 0 0 0 10px;}
  .contact-main .contact-table .input-submit { width: 100%; padding: 15px 0; text-align: right;}
  .contact-main .contact-table .input-submit input[type=reset] { color: #414141; font-size: 1.4rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; cursor: pointer;}
  .contact-main .contact-table .input-submit input[type=submit] { color: #AE7D21; font-size: 1.4rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; cursor: pointer;}
  .contact-main .pic { clear: both; width: 430px;}
  .contact-main .pic img { width: 370px; height: auto; margin: 210px 0 0 0; float: right;}
  .contact-main .infor { width: calc(100% - 430px); margin: 0 0 0 -90px; font-size: 1.4em; line-height: 1.4em;}


  /************ section (sitemap) ************/

  .banner-sitemap { clear: both; width: 100%; height: 35vw; overflow: hidden; position: relative;}
  .banner-sitemap img { width: 120%; height: auto; margin: 0 0 0 -10%;}
  .banner-sitemap img.banner-text { width: auto; height: 20vw; position: absolute; bottom: 4vw; left: 12vw;}

  section#page-sitemap { clear: both; width: 100%; background-image: url("../images/contact_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #sitemap { width: 100%; padding: 100px 20px; box-sizing: border-box;}

  ul.sitemap { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  ul.sitemap li { padding: 0; margin: 0 20px 40px 20px;}
  ul.sitemap li a { color: #414141; font-size: 1.4em; font-weight: 600; letter-spacing: 0.1em; text-decoration: none;}
  ul.sitemap li a:hover { border-bottom: 1px #414141 solid;}
  ul.sitemap li ul.sitemap-snd { padding: 0 0 0 10px; margin: 0; list-style: none; display: block;}
  ul.sitemap li ul.sitemap-snd li { padding: 0; margin: 20px 0;}
  ul.sitemap li ul.sitemap-snd li a { color: #414141; font-size: 1.2rem; font-weight: 500; letter-spacing: 0.1em; text-decoration: none;}
  ul.sitemap li ul.sitemap-snd li a:hover { border-bottom: 1px #414141 solid;}


  /************ section (error) ************/

  section#page-error { clear: both; width: 100%; background-image: url("../images/contact_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #error404 { width: 100%; padding: 160px 20px; box-sizing: border-box;}
  #error404 .title-1 { width: 100%; margin: 0 0 40px 0; font-size: 4em; font-weight: 700; font-family: Arial; letter-spacing: 0.1em; text-align: center;}
  #error404 .title-2 { width: 100%; font-size: 2em; font-weight: 500; letter-spacing: 0.1em; text-align: center;}
  #error404 .goback-bt { clear: both; width: 200px; margin: 80px auto 0 auto;}
  #error404 .goback-bt a { width: 100%; padding: 6px 0; color: #fff; font-size: 1.2em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #A97D21; display: block;}
  #error404 .goback-bt a:hover { background-color: #AE7D21;}


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

  footer { clear: both; width: 100%; padding: 40px; background-color: #000C1F; box-sizing: border-box;}

  .logo-column { width: 100%; margin: 0 0 30px 0;}
  .logo-column img.ft-logo { width: 270px; height: auto; margin: 0 auto;}

  .infor-column { width: 100%;}
  .infor-column .ft-nav-icon { width: 100%; margin: 0 0 30px 0;}
  .infor-column .ft-nav-icon ul.footer-nav { width: 100%; padding: 0; margin: 0 0 20px 0; list-style: none; display: flex; justify-content: center;}
  .infor-column .ft-nav-icon ul.footer-nav li { padding: 0; margin: 0 10px;}
  .infor-column .ft-nav-icon ul.footer-nav li a { color: #fff; font-size: 0.9em; font-weight: 500; text-decoration: none;}
  .infor-column .ft-nav-icon ul.footer-nav li a:hover { border-bottom: 1px #fff solid;}
  .infor-column .ft-nav-icon ul.social-icons { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  .infor-column .ft-nav-icon ul.social-icons li { padding: 0; margin: 0 0 0 20px;}
  .infor-column .ft-nav-icon ul.social-icons li img { width: auto; height: 30px;}
  .infor-column .ft-addr-infor { width: 100%; margin: 0 0 25px 0;}
  .infor-column .ft-addr-infor div { width: 100%; margin: 0 0 5px 0; color: #C9A481; font-size: 0.9em; font-weight: 500; text-align: center;}
  .infor-column .ft-copyright { width: 100%; color: #fff; font-size: 0.8em; font-weight: 500; text-align: center;}


}

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

  /************ aside ************/

  aside { width: 68px; text-align: center; position: fixed; top: 200px; right: -10px; z-index: 990;}
  aside img.schedule-search-bt { width: 68px; height: auto;}
  aside img.line { width: 40px; height: auto; margin: 20px 0 0 0;}
  aside a { text-decoration: none;}
  aside span.text { color: #000; font-size: 0.6em; line-height: 1em;}


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

  header { width: 100%; height: 80px; padding: 0 20px; background-color: #F1F3F0; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}

  .header-logo { width: 180px;}
  .header-logo img { width: 100%; height: auto;}
  
  nav#pc { display: none;}

  nav#mo { width: calc(100% - 180px - 50px);}
  nav#mo .nav-icon { width: 50px; color: #AE7D21; font-size: 2.6em; text-align: center; cursor: pointer; float: right;}
  nav#mo ul.hd-nav { width: 100%; padding: 40px 20px; margin: 0; background-color: #AE7D21; list-style: none; display: none; box-sizing: border-box; position: absolute; top: 80px; left: 0; z-index: 999;}
  nav#mo ul.hd-nav li { width: 100%; padding: 0; margin: 0; position: relative;}
  nav#mo ul.hd-nav li a { width: 100%; padding: 15px 0; color: #fff; font-size: 1.4em; text-decoration: none; display: flex; justify-content: center; align-items: center; cursor: pointer;}
  nav#mo ul.hd-nav li ul.hd-nav-snd { width: 100%; padding: 20px; margin: 0; background-color: rgba(255,255,255,0.6); list-style: none; display: none; box-sizing: border-box;}
  nav#mo ul.hd-nav li ul.hd-nav-snd li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #fff solid;}
  nav#mo ul.hd-nav li ul.hd-nav-snd li:last-child { border-bottom: 0;}
  nav#mo ul.hd-nav li ul.hd-nav-snd li a { width: 100%; padding: 15px 0; color: #AE7D21; font-size: 1.4em; text-align: center; text-decoration: none; display: block;}

  .social-icon { width: 30px; margin: 0 0 0 20px;}
  .social-icon img { width: 30px; height: auto;}


  /************ banner (index) ************/

  .index-banner-box { clear: both; width: 100%; overflow: hidden;}
  .index-banner-box div { width: 100%; position: relative;}
  .index-banner-box div img { width: 120%; height: auto; margin: 0 0 0 -10%;}
  .index-banner-box div img.banner-hp-text { width: 50vw; height: auto; position: absolute; bottom: 0; left: 20vw;}


  /************ section (index) ************/

  section#index { clear: both; width: 100%; background-image: url("../images/index_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #index-about { width: 100%; padding: 50px 20px; box-sizing: border-box;}

  .index-about-pic { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .index-about-pic img.pic1 { width: calc(100% / 3 - 10px); height: auto; margin: 0 10px 0 0;}
  .index-about-pic img.pic2 { width: calc(100% / 3 - 10px); height: auto; margin: 150px 10px 0 0;}
  .index-about-pic img.pic3 { width: calc(100% / 3 - 10px); height: auto; margin: 60px 0 0 0;}

  .index-about-main { width: 100%; padding: 40px 0; position: relative;}
  .index-about-main .title-box { width: 100%;}
  .index-about-main .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .index-about-main .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .index-about-main .text-slogan { width: 100%; margin: 10px 0 0 0; font-size: 1.8em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em;}
  .index-about-main .text-content { width: 100%; margin: 20px 0 0 0; font-size: 1em; line-height: 1.8em; letter-spacing: 0.1em; box-sizing: border-box;}
  .index-about-main .shape { display: none;}
  .index-about-main .more-bt { clear: both; width: 190px; margin: 30px 0 0 0;}
  .index-about-main .more-bt img { width: 100%; height: auto;}

  #index-brand { clear: both; width: 100%; padding: 50px 20px; box-sizing: border-box;}

  .index-brand-main { width: 100%; padding: 0 0 40px 0; box-sizing: border-box; position: relative;}
  .index-brand-main .title-box { width: 100%;}
  .index-brand-main .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .index-brand-main .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .index-brand-main .text-slogan { width: 100%; margin: 10px 0 0 0; font-size: 1.8em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em;}
  .index-brand-main .text-content { width: 100%; margin: 20px 0 0 0; font-size: 1em; line-height: 1.8em; letter-spacing: 0.1em; box-sizing: border-box;}
  .index-brand-main .shape { display: none;}
  .index-brand-main .more-bt { clear: both; width: 190px; margin: 30px 0 0 0;}
  .index-brand-main .more-bt img { width: 100%; height: auto;}

  .index-brand-pic { width: 100%;}
  .index-brand-pic img { width: 100%; height: auto;}

  #index-works { clear: both; width: 100%; margin: 50px 0 0 0; background-image: url("../images/index_works_bg.png"); background-repeat: no-repeat; background-size: 280% auto; background-position: center 20px;}

  .index-works-list-full { clear: both; width: 100%; padding: 0 20px; margin: 0 auto; box-sizing: border-box; overflow: hidden;}
  .index-works-list-full .works-list { width: 100%; padding: 0 20px; box-sizing: border-box}
  .index-works-list-full .works-list .pic { width: 100%;}
  .index-works-list-full .works-list .pic img { width: 100%; height: auto;}
  .index-works-list-full .works-list .works-infor { width: 100%; padding: 30px 0 0 0; position: relative;}
  .index-works-list-full .works-list .works-infor .title-box { width: 100%; box-sizing: border-box;}
  .index-works-list-full .works-list .works-infor .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .index-works-list-full .works-list .works-infor .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .index-works-list-full .works-list .works-infor .name { width: 100%; margin: 10px 0 0 0; font-size: 1.8em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .index-works-list-full .works-list .works-infor .intro { width: 100%; font-size: 1rem; line-height: 1.8em;}
  .index-works-list-full .works-list .works-infor .intro span { color: #AE7D21; border-bottom: 2px #AE7D21 solid;}
  .index-works-list-full .works-list .works-infor .more-bt { clear: both; width: 100%; padding: 40px 0;}
  .index-works-list-full .works-list .works-infor .more-bt img { width: 190px; height: auto;}

  .slider {
    width: 90%;
    margin: 0 auto;
  }

  .slick-slide {
    margin: 0px;
  }

  .slick-slide img {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }

  .slick-prev:before,
  .slick-next:before {
    color: black;
  }

  .slick-slide {
    transition: all ease-in-out .3s;
    opacity: 1;
  }

  .slick-active {
    opacity: 1;
  }

  .slick-current {
    opacity: 1;
  }
  
  #index-news { clear: both; width: 100%; padding: 0 20px 60px 20px; box-sizing: border-box;}

  .index-news-title { width: 100%; padding: 0 0 50px 0; position: relative;}
  .index-news-title .title-box { width: 100%; padding: 60px 0 0 0;}
  .index-news-title .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .index-news-title .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .index-news-title .text-slogan { width: 100%; margin: 10px 0 0 0; font-size: 1.8em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em;}
  .index-news-title .shape { display: none;}

  .index-news-list { clear: both; width: 100%;}
  .index-news-list .news-list { width: 100%; margin: 0 0 40px 0;}
  .index-news-list .news-list a { color: #414141; text-decoration: none; display: block;}
  .index-news-list .news-list .pic { width: 100%; height: 42vw; margin: 0 0 10px 0; overflow: hidden;}
  .index-news-list .news-list .pic img { width: 100%; height: auto;}
  .index-news-list .news-list .date { width: 100%; padding: 0 5px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .index-news-list .news-list .date span.mon-day { color: #AE7D21; font-size: 2.6em; font-weight: 600;}
  .index-news-list .news-list .date span.week-year { padding: 0 0 0 10px; color: #99800F; font-size: 1.1em; line-height: 1.2em;}
  .index-news-list .news-list .title { width: 100%; padding: 0 5px; box-sizing: border-box; font-size: 1.2em; font-weight: 600; letter-spacing: 0.1em;}
  .index-news-list .news-list .hr { width: 70px; margin: 5px 0 10px 5px; border-bottom: 2px #99800F solid; display: block;}
  .index-news-list .news-list .intro { clear: both; width: 100%; padding: 0 5px; box-sizing: border-box; margin: 10px 0 0 0; font-size: 1em; line-height: 1.8em; letter-spacing: 0.1em;}


  /************ banner (page) ************/

  .banner-box { clear: both; width: 100%; overflow: hidden;}
  .banner-box div { width: 100%; position: relative;}
  .banner-box div img { width: 140%; height: auto; margin: 0 0 0 -10%;}
  .banner-box div img.banner-text { width: auto; height: 26vw; position: absolute; bottom: 8vw; left: 12vw;}
  .banner-box div img.banner-text2 { width: auto; height: 26vw; position: absolute; bottom: 8vw; left: 12vw;}
  .banner-box div img.banner-text3 { width: auto; height: 26vw; position: absolute; bottom: 8vw; left: 12vw;}
  .banner-box div img.banner-text4 { width: auto; height: 26vw; position: absolute; bottom: 3vw; right: 4vw;}

  img.banner-text-works { clear: both; width: auto; height: 26vw;}


  /************ section (about) ************/

  section#page-about { clear: both; width: 100%; background-image: url("../images/about_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #about { width: 100%; padding: 45px 20px; box-sizing: border-box;}

  .about-pic { width: 100%; padding: 10px 0 0 0; margin: 10px 0 0 0; border-top: 1px #fff solid;}
  .about-pic img { width: 100%; height: auto; margin: 0 0 15px 0;}

  .about-main { width: 100%; margin: 0 0 15px 0; position: relative;}
  .about-main .title-box { width: 100%;}
  .about-main .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .about-main .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .about-main .text-slogan { width: 100%; margin: 10px 0 0 0; font-size: 1.8em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .about-main .text-content { width: 100%; margin: 10px 0 0 0; padding: 30px 20px; font-size: 1em; letter-spacing: 0.1em; line-height: 1.8em; background-color: #fff; box-sizing: border-box;}
  .about-main .shape { display: none;}

  #brand { clear: both; width: 100%; padding: 45px 20px; box-sizing: border-box;}

  .brand-pic { width: 100%; padding: 10px 0 0 0; margin: 10px 0 0 0; border-top: 1px #fff solid;}
  .brand-pic img { width: 100%; height: auto; margin: 0 0 15px 0;}

  .brand-main { width: 100%; margin: 0 0 15px 0; box-sizing: border-box; position: relative;}
  .brand-main .title-box { width: 100%; box-sizing: border-box;}
  .brand-main .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .brand-main .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .brand-main .text-slogan { width: 100%; margin: 10px 0 0 0; font-size: 1.8em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  .brand-main .text-content { width: 100%; margin: 10px 0 0 0; padding: 30px 20px; font-size: 1em; letter-spacing: 0.1em; line-height: 1.8em; background-color: #fff; box-sizing: border-box;}
  .brand-main .shape { display: none;}

  #organization { clear: both; width: 100%; overflow: hidden; position: relative;}

  .about-org-content { width: 100%; padding: 10vw 20px; box-sizing: border-box; position: absolute; top: 0; left: 0;}
  .about-org-content .title-logo { width: 330px;}
  .about-org-content .title-logo .org-title { width: 220px; margin: 0 0 10px 0;}
  .about-org-content .title-logo .org-title .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .about-org-content .title-logo .org-title .title-2 { width: 170px; height: 30px; margin: -12px 0 0 100px; color: #fff; border: 1px #fff solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .about-org-content .title-logo img.org-logo { clear: both; width: 280px; height: auto;}
  .about-org-content .org-tree { clear: both; width: 100%; margin: 5vw 0 0 0;}
  .about-org-content .org-tree img.org-tree { width: 60%; height: auto; margin: 0 auto;}

  img.org-bg { width: 480%; height: auto; margin: 0 0 0 -200%;}

  #architect { clear: both; width: 100%; padding: 45px 20px; box-sizing: border-box;}

  .architect-main { width: 100%; padding: 35px 0; position: relative;}
  .architect-main .title-box { width: 100%;}
  .architect-main .title-box .title-1 { width: 140px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .architect-main .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 130px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .architect-main .text-slogan { width: 100%; margin: 10px 0 0 0; font-size: 1.8em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em;}
  .architect-main .text-content { width: 100%; margin: 15px 0 0 0; padding: 30px 20px; font-size: 1em; letter-spacing: 0.1em; line-height: 1.8em; background-color: #fff; box-sizing: border-box;}
  .architect-main .shape { display: none;}

  .architect-pic { width: 100%; margin: 10px 0 0 0;}
  .architect-pic img.pic-1 { width: 100%; height: auto;}
  .architect-pic img.pic-2 { width: 70%; height: auto;}
  .architect-pic .pic-text { clear: both; width: 100%; margin: 10px 0; display: flex; justify-content: flex-start; align-items: center;}
  .architect-pic .pic-text .text1 { width: 180px; font-size: 0.8em; letter-spacing: 0.1em;}
  .architect-pic .pic-text .line1 { width: calc(100% - 180px); border-bottom: 1px #414141 solid; display: block;}
  .architect-pic .pic-text .text2 { width: 120px; font-size: 0.8em; letter-spacing: 0.1em;}
  .architect-pic .pic-text .line2 { width: calc(100% - 120px); border-bottom: 1px #414141 solid; display: block;}
  .architect-pic .pic-text2 { clear: both; width: 70%; margin: 10px 0; display: flex; justify-content: flex-start; align-items: center;}
  .architect-pic .pic-text2 .text { width: 110px; font-size: 0.8em; letter-spacing: 0.1em;}
  .architect-pic .pic-text2 .line { width: calc(100% - 110px); border-bottom: 1px #414141 solid; display: block;}


  /************ section (milestones) ************/

  section#page-milestones { clear: both; width: 100%; background-image: url("../images/about_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #milestones { width: 100%; padding: 60px 0; display: flex; justify-content: flex-start; align-items: stretch;}

  .mile-column-lf { width: 50%; padding: 60px 0 0 0; margin: 100px 0 0 0; border-right: 2px #AE7D21 solid; box-sizing: border-box;}
  .mile-column-lf .mile-title { width: 200%; padding: 20px; margin: -200px 0 30px 0; box-sizing: border-box; position: relative;}
  .mile-column-lf .mile-title .title-box { width: 100%;}
  .mile-column-lf .mile-title .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .mile-column-lf .mile-title .title-box .title-2 { width: 140px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .mile-column-lf .mile-title .text-slogan { width: 100%; padding: 0 0 9px 0; margin: 10px 0 0 0; font-size: 1.8em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em;}
  .mile-column-lf .mile-title .shape { display: none;}
  .mile-column-lf .extend-line-1 { clear: both; width: 100px; height: 15px; margin: -20px 0 0 0; border-top: 1px #000 solid; border-left: 1px #000 solid; display: block; float: right; position: relative; z-index: 2;}
  .mile-column-lf .pic-1 { clear: both; width: 140px; margin: -4px 30px 0 0; float: right; position: relative; z-index: 1;} 
  .mile-column-lf .pic-1 img { width: 100%; height: auto;}
  .mile-column-lf .extend-line-2 { clear: both; width: 90px; margin: -20px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2; float: right;}
  .mile-column-lf .extend-line-2 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; display: block;}
  .mile-column-lf .intro-text-2 { clear: both; width: 150px; margin: -10px 20px 0 0; font-size: 1em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: right;}
  .mile-column-lf .intro-text-2 span.date { color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em;}
  .mile-column-lf .extend-line-3 { clear: both; width: 100px; height: 15px; margin: -20px 0 0 0; border-top: 1px #000 solid; border-left: 1px #000 solid; display: block; float: right; position: relative; z-index: 2;}
  .mile-column-lf .pic-3 { clear: both; width: 150px; margin: -4px 20px 0 0; float: right; position: relative; z-index: 1;} 
  .mile-column-lf .pic-3 img { width: 100%; height: auto;}
  .mile-column-lf .extend-line-4 { clear: both; width: 90px; margin: -20px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2; float: right;}
  .mile-column-lf .extend-line-4 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; display: block;}
  .mile-column-lf .intro-text-4 { clear: both; width: 150px; margin: -10px 20px 0 0; font-size: 1em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: right;}
  .mile-column-lf .intro-text-4 .date { color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em; text-align: center;}
  .mile-column-lf .extend-line-5 { clear: both; width: 100px; height: 15px; margin: -20px 0 0 0; border-top: 1px #000 solid; border-left: 1px #000 solid; display: block; float: right; position: relative; z-index: 2;}
  .mile-column-lf .pic-5 { clear: both; width: 140px; margin: -4px 30px 0 0; float: right; position: relative; z-index: 1;} 
  .mile-column-lf .pic-5 img { width: 100%; height: auto;}
  .mile-column-lf .extend-line-6 { clear: both; width: 90px; margin: -20px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2; float: right;}
  .mile-column-lf .extend-line-6 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; display: block;}
  .mile-column-lf .intro-text-6 { clear: both; width: 150px; margin: -10px 20px 0 0; font-size: 1em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: right;}
  .mile-column-lf .intro-text-6 .date { width: 100%; color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em; text-align: center;}
  .mile-column-lf .extend-line-7 { clear: both; width: 100px; height: 15px; margin: -20px 0 0 0; border-top: 1px #000 solid; border-left: 1px #000 solid; display: block; float: right; position: relative; z-index: 2;}
  .mile-column-lf .pic-7 { clear: both; width: 140px; margin: -4px 30px 0 0; float: right; position: relative; z-index: 1;} 
  .mile-column-lf .pic-7 img { width: 100%; height: auto;}
  .mile-column-lf .extend-line-8 { clear: both; width: 90px; margin: -20px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2; float: right;}
  .mile-column-lf .extend-line-8 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; display: block;}
  .mile-column-lf .intro-text-8 { clear: both; width: 150px; margin: -10px 20px 0 0; font-size: 1em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: right;}
  .mile-column-lf .intro-text-8 .date { color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em; text-align: center;}

  .mile-time-dot-1 { clear: both; width: 40px; height: 40px; margin: 0 -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-2 { clear: both; width: 40px; height: 40px; margin: 100px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-3 { clear: both; width: 40px; height: 40px; margin: 145px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-4 { clear: both; width: 40px; height: 40px; margin: 70px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-5 { clear: both; width: 40px; height: 40px; margin: 160px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-6 { clear: both; width: 40px; height: 40px; margin: 50px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-7 { clear: both; width: 40px; height: 40px; margin: 98px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}
  .mile-time-dot-8 { clear: both; width: 40px; height: 40px; margin: 30px -22px 0 0; border-radius: 100%; background-color: #AE7D21; display: block; float: right; position: relative; z-index: 3;}

  .mile-column-rt { width: 50%; padding: 66px 0 0 0; margin: 100px 0 0 0; border-left: 2px #AE7D21 solid; box-sizing: border-box;}
  .mile-column-rt .extend-line-1 { clear: both; width: 90px; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .extend-line-1 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; float: right; display: block;}
  .mile-column-rt .intro-text-1 { clear: both; width: 150px; margin: 0 0 0 20px; font-size: 1em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: left;}
  .mile-column-rt .intro-text-1 span.date { color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em;}
  .mile-column-rt .extend-line-2 { clear: both; width: 100px; height: 15px; margin: 275px 0 0 0; border-top: 1px #000 solid; border-right: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .pic-2 { clear: both; width: 140px; margin: 0 0 0 30px; position: relative; z-index: 1;} 
  .mile-column-rt .pic-2 img { width: 100%; height: auto;}
  .mile-column-rt .extend-line-3 { clear: both; width: 90px; margin: 100px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .extend-line-3 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; float: right; display: block;}
  .mile-column-rt .intro-text-3 { clear: both; width: 150px; margin: 0 0 0 20px; font-size: 1em; line-height: 1.2em; letter-spacing: 0.1em; float: left;}
  .mile-column-rt .intro-text-3 .date { width: 100%; color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em; text-align: center}
  .mile-column-rt .extend-line-4 { clear: both; width: 100px; height: 15px; margin: 252px 0 0 0; border-top: 1px #000 solid; border-right: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .pic-4 { clear: both; width: 140px; margin: 0 0 0 30px; position: relative; z-index: 1;} 
  .mile-column-rt .pic-4 img { width: 100%; height: auto;}
  .mile-column-rt .extend-line-5 { clear: both; width: 90px; margin: 153px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .extend-line-5 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; float: right; display: block;}
  .mile-column-rt .intro-text-5 { clear: both; width: 150px; margin: 0 0 0 20px; font-size: 1em; text-align: center; line-height: 1.2em; letter-spacing: 0.1em; float: left;}
  .mile-column-rt .intro-text-5 span.date { color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em;}
  .mile-column-rt .extend-line-6 { clear: both; width: 100px; height: 15px; margin: 224px 0 0 0; border-top: 1px #000 solid; border-right: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .pic-6 { clear: both; width: 140px; margin: 0 0 0 30px; position: relative; z-index: 1;} 
  .mile-column-rt .pic-6 img { width: 100%; height: auto;}
  .mile-column-rt .extend-line-7 { clear: both; width: 90px; margin: 34px 0 0 0; border-top: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .extend-line-7 .line-dot { width: 7px; height: 7px; margin: -4px 0 0 0; border-radius: 100%; background-color: #000; float: right; display: block;}
  .mile-column-rt .intro-text-7 { clear: both; width: 150px; margin: 0 0 0 20px; font-size: 1em; line-height: 1.2em; text-align: center; letter-spacing: 0.1em; float: left;}
  .mile-column-rt .intro-text-7 .date { width: 100%; color: #AE7D21; font-size: 1.6rem; font-weight: 600; line-height: 1.6em; box-sizing: border-box;}
  .mile-column-rt .extend-line-8 { clear: both; width: 90px; height: 15px; margin: 203px 0 0 0; border-top: 1px #000 solid; border-right: 1px #000 solid; display: block; position: relative; z-index: 2;}
  .mile-column-rt .pic-8 { clear: both; width: 150px; margin: 0 0 0 15px; position: relative; z-index: 1;} 
  .mile-column-rt .pic-8 img { width: 100%; height: auto;}
  .mile-column-rt .logo-8 { clear: both; width: 150px; margin: 20px 0 0 10px; position: relative; z-index: 1;} 
  .mile-column-rt .logo-8 img { width: 100%; height: auto;}


  /************ section (works) ************/

  section#page-works { clear: both; width: 100%; padding: 60px 20px; box-sizing: border-box; background-image: url("../images/works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #works-hot { width: 100%; padding: 20px 0 10px 0; margin: 0 0 50px 0; background-color: rgba(255,255,255,0.8); box-sizing: border-box; position: relative; z-index: 9;}
  #works-hot .border-line { width: 90%; height: 40vw; margin: 0 auto; border: 1px #99800F solid; box-sizing: border-box; display: block;}
  #works-hot .works-hot-full { width: 100%; margin: -43vw 0 0 0;}
  #works-hot .works-hot-box { width: 100%; padding: 30px 10px; box-sizing: border-box; position: relative;}
  #works-hot .works-hot-full .works-hot-box .pic { width: 90%; margin: 0 auto;}
  #works-hot .works-hot-full .works-hot-box .pic img { width: 100%; height: auto;}
  #works-hot .works-hot-full .works-hot-box .infor { width: 90%; margin: 30px auto 0 auto; position: relative;}
  #works-hot .works-hot-full .works-hot-box .infor .new-icon { width: 40px; position: absolute; top: 0; right: 0;}
  #works-hot .works-hot-full .works-hot-box .infor .new-icon img { width: 100%; height: auto;}
  #works-hot .works-hot-full .works-hot-box .infor .title-box { width: 100%; box-sizing: border-box;}
  #works-hot .works-hot-full .works-hot-box .infor .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  #works-hot .works-hot-full .works-hot-box .infor .title-box .title-2 { width: 110px; height: 30px; margin: -12px 0 0 100px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  #works-hot .works-hot-full .works-hot-box .infor .name { width: 100%; margin: 10px 0 0 0; font-size: 1.8em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  #works-hot .works-hot-full .works-hot-box .infor .intro { width: 100%; font-size: 1rem; line-height: 1.8em;}
  #works-hot .works-hot-full .works-hot-box .infor .intro span { color: #AE7D21; border-bottom: 2px #AE7D21 solid;}
  #works-hot .works-hot-full .works-hot-box .infor .icons-bt { width: 100%; margin: 30px 0 0 0; display: flex; justify-content: flex-start;}
  #works-hot .works-hot-full .works-hot-box .infor .icons-bt .icon { width: 74px;}
  #works-hot .works-hot-full .works-hot-box .infor .icons-bt .icon a { width: 100%; color: #AE7D21; font-size: 0.9em; text-align: center; text-decoration: none; display: block;}
  #works-hot .works-hot-full .works-hot-box .infor .icons-bt .icon a img { width: auto; height: 30px; margin: 0 auto;}

  #works-list { clear: both; width: 100%;}
  
  .works-list-title .title-box { width: 100%; margin: 0 0 30px 0; box-sizing: border-box; display: flex; justify-content: center; flex-wrap: wrap;}
  .works-list-title .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .works-list-title .title-box .title-2 { width: 140px; height: 30px; margin: 15px 0 0 -10px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .works-list-title .title-box .title-slogan { clear: both; width: 100%; margin: 20px 0 0 0; font-size: 1.8em; font-weight: 300; line-height: 1.4em; text-align: center;}
  .works-list-title .title-box .title-slogan span.big { font-size: 1.8rem; font-weight: 700;}
  .works-list-title .title-box .title-text { clear: both; max-width: 100%; width: 380px; margin: 10px 0 0 0; font-size: 1em; line-height: 1.6em; text-align: center;}

  .works-list-full { clear: both; width: 100%;}
  .works-list-full .works-box { width: 84vw; margin: 0 auto 40px auto;}
  .works-list-full .works-box a { color: #414141; text-decoration: none;}
  .works-list-full .works-box .pic { width: 84vw; height: 84vw; margin: 0 auto 20px auto; border-radius: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center;}
  .works-list-full .works-box .pic img { width: auto; height: 100%;}
  .works-list-full .works-box .year { clear: both; width: 100%; color: #AE7D21; font-size: 1.4em; text-align: center;}
  .works-list-full .works-box .name { width: 100%; font-size: 1.8em; font-weight: 700; line-height: 1.4em; text-align: center;}
  .works-list-full .works-box .build { width: 100%; padding: 10px 0; font-size: 1.2em; line-height: 1em; text-align: center;}
  .works-list-full .works-box .build span { padding: 0 5px; background-color: #E6D1A8;}
  .works-list-full .works-box .intro { width: 100%; color: #99800F; font-size: 1em; text-align: center; letter-spacing: 0.1em;}


  /************ section (works content) ************/

  section#page-works-content { clear: both; width: 100%; padding: 0 20px 30px 20px; box-sizing: border-box; background-image: url("../images/works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #works-content-infor { width: 100%; padding: 0 0 40px 0;}
  #works-content-infor .pic { width: 100%; margin: -10vw 0 0 0; position: relative; z-index: 9;}
  #works-content-infor .pic img { width: 100%; height: auto; border: 20px #fff solid; box-sizing: border-box;}
  #works-content-infor .infor { width: 100%; padding: 30px 0 0 0; box-sizing: border-box;}
  #works-content-infor .infor .name { width: 100%; font-size: 1.8em; font-weight: 700; line-height: 1.4em; letter-spacing: 0.2em; box-sizing: border-box;}
  #works-content-infor .infor .intro { width: 100%; font-size: 1rem; line-height: 1.8em;}
  #works-content-infor .infor .intro span { color: #AE7D21; border-bottom: 2px #AE7D21 solid;}
  #works-content-infor .infor .text { width: 100%; margin: 25px 0 0 0; font-size: 1em; line-height: 2em;}
  #works-content-infor .infor .icons-bt { width: 100%; margin: 30px 0 0 0; display: flex; justify-content: flex-start;}
  #works-content-infor .infor .icons-bt .icon { width: 74px;}
  #works-content-infor .infor .icons-bt .icon a { width: 100%; color: #AE7D21; font-size: 0.8em; text-align: center; text-decoration: none; display: block;}
  #works-content-infor .infor .icons-bt .icon a img { width: auto; height: 30px; margin: 0 auto;}

  #works-content-intro { clear: both; width: 100%; font-size: 1em; line-height: 2em;}
  #works-content-intro span.title { font-size: 1.8rem; font-weight: 700; line-height: 1.2em;}
  #works-content-intro .map { width: 100%; margin: 0 0 60px 0;}
  #works-content-intro .map img { width: 100%; height: auto;}

  #goback-bt { clear: both; width: 60px; margin: 0 auto;}
  #goback-bt a { width: 100%; color: #AE7D21; font-size: 0.9em; text-align: right; text-decoration: none; display: block;}
  #goback-bt img { width: 100%; height: auto;}


  /************ section (works hot content) ************/

  #works-hot-content { width: 100%; margin: 0 0 20px 0;}
  #works-hot-content .photos-list { width: 100%; position: relative; z-index: 9;}
  #works-hot-content .photos-list img { width: 90%; height: auto; margin: 0 auto;}
  #works-hot-content .infor-box { clear: both; width: 100%; padding: 20px 0; box-sizing: border-box;}
  #works-hot-content .infor-box .title-column-lf { width: 100%; margin: 0 0 10px 0; border-bottom: 1px #AE7D21 solid;}
  #works-hot-content .infor-box .title-column-lf .year { width: 100%; padding: 0 0 10px 0; color: #AE7D21; font-size: 1.2em; line-height: 1em;}
  #works-hot-content .infor-box .title-column-lf .name { width: 100%; padding: 0 0 20px 0; font-size: 1.8em; font-weight: 700; line-height: 1em;}
  #works-hot-content .infor-box .title-column-rt { width: 100%; margin: 0 0 10px 0; color: #AE7D21; font-size: 1.2em; letter-spacing: 0.1em;}
  #works-hot-content .infor-box .intro-box { clear: both; width: 100%;}
  #works-hot-content .infor-box .intro-box .list { width: 100%; padding: 15px 0; font-size: 1em; border-bottom: 1px #BABABA solid;}

  #back-next-bt { clear: both; width: 100%; display: flex; justify-content: center; align-items: flex-end;}
  #back-next-bt .back { margin: 0 15px;}
  #back-next-bt .back a { color: #AE7D21; font-size: 0.9em; text-decoration: none; display: block;}
  #back-next-bt .back img { width: 60px; height: auto; margin: 0 0 0 38px;}
  #back-next-bt .back2 { margin: 0 25px; text-align: right;}
  #back-next-bt .back2 a { color: #AE7D21; font-size: 0.9em; text-decoration: none; display: block;}
  #back-next-bt .back2 img { width: 60px; height: auto;}
  #back-next-bt .list { margin: 0 15px;}
  #back-next-bt .list a { color: #AE7D21; font-size: 0.9em; text-decoration: none; display: block;}
  #back-next-bt .list a img { width: 20px; height: 20px; margin: 0 auto;}
  #back-next-bt .prev { margin: 0 15px;}
  #back-next-bt .prev a { color: #AE7D21; font-size: 0.9em; text-decoration: none; display: block;}
  #back-next-bt .prev img { width: 60px; height: auto;}


  /************ section (news) ************/

  section#page-news { clear: both; width: 100%; padding: 60px 20px 40px 20px; box-sizing: border-box; background-image: url("../images/news_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #news-list-full { clear: both; width: 100%; padding: 45px 15px 10px 15px; background-color: #fff; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; position: relative; z-index: 9;}
  #news-list-full .news-list { width: 100%; margin: 0 0 30px 0;}
  #news-list-full .news-list a { color: #414141; text-decoration: none; display: block;}
  #news-list-full .news-list .pic { width: 100%; height: 42vw; margin: 0 0 10px 0; overflow: hidden;}
  #news-list-full .news-list .pic img { width: 100%; height: auto;}
  #news-list-full .news-list .date { width: 100%; padding: 0 5px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  #news-list-full .news-list .date span.mon-day { color: #AE7D21; font-size: 2.6em; font-weight: 600;}
  #news-list-full .news-list .date span.week-year { padding: 0 0 0 10px; color: #99800F; font-size: 1.1em; line-height: 1.2em;}
  #news-list-full .news-list .title { width: 100%; padding: 0 5px; box-sizing: border-box; font-size: 1.2em; font-weight: 600; letter-spacing: 0.1em;}
  #news-list-full .news-list .hr { width: 70px; margin: 5px 0 10px 5px; border-bottom: 2px #99800F solid; display: block;}
  #news-list-full .news-list .intro { clear: both; width: 100%; padding: 0 5px; box-sizing: border-box; margin: 10px 0 0 0; font-size: 1em; line-height: 1.8em; letter-spacing: 0.1em;}

  #news-content { clear: both; width: 100%; padding: 45px 15px; margin: 0 0 50px 0; background-color: #fff; box-sizing: border-box; position: relative; z-index: 9;}
  #news-content .pics { width: 100%;}
  #news-content .pics .pic-big { width: 100%; padding: 0 0 30px 0; border-bottom: 1px #ccc solid; overflow: hidden;}
  #news-content .pics .pic-big ul#big { padding: 0; margin: 0; list-style: none; display: block;}
  #news-content .pics .pic-big ul#big li { height: 50vw; padding: 0; margin: 0; overflow: hidden; float: left; display: none;}
  #news-content .pics .pic-big ul#big li img { width: 100%; height: auto;}
  #news-content .pics .pic-thumb { clear: both; width: 100%; margin: 30px 0 0 0;}
  #news-content .pics .pic-thumb ul#thumb { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  #news-content .pics .pic-thumb ul#thumb li { width: calc(100% / 3 - 10px); height: 16VW; margin: 0 5px 10px 5px; overflow: hidden;}
  #news-content .pics .pic-thumb ul#thumb li img { width: 100%; height: auto; cursor: pointer;}
  #news-content .infor { width: 100%; margin: 0 0 30px 0;}
  #news-content .infor .date { width: 100%; padding: 0 5px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  #news-content .infor .date span.mon-day { color: #AE7D21; font-size: 2.6em; font-weight: 600;}
  #news-content .infor .date span.week-year { padding: 0 0 0 10px; color: #99800F; font-size: 1.1em; line-height: 1.2em;}
  #news-content .infor .title { width: 100%; padding: 0 5px; box-sizing: border-box; font-size: 1.2em; font-weight: 700; letter-spacing: 0.1em;}
  #news-content .infor .hr { width: 100%; margin: 5px 0 10px 5px; border-bottom: 2px #99800F solid; display: block;}
  #news-content .infor .intro { clear: both; width: 100%; padding: 0 5px; box-sizing: border-box; margin: 10px 0 0 0; font-size: 1em; line-height: 2.2em; letter-spacing: 0.1em;}


  /************ section (service) ************/

  section#page-service { clear: both; width: 100%; overflow: hidden; position: relative;}
  
  img.service-bg { display: none;}
  img.service-bg-mo { width: 120%; height: auto; margin: 0 0 0 -20%;}

  #service { width: 100%; padding: 15vw 2vw 0 2vw; box-sizing: border-box; position: absolute; top: 0; left: 0;}
  
  #service img.service-title { width: auto; height: 24vw; position: absolute; top: 6vw; left: 24vw;}
  
  #service .step-box { width: 100%; margin: -8vw 0 0 0; position: relative;}
  #service .step-box img.service-step-bg { display: none;}
  #service .step-box img.service-step-bg-mo { width: 46vw; height: auto; margin: 8vw 0 0 2vw;}
  #service .step-box .step-text-intro { width: 100%; position: absolute; top: 0; left: 0;}
  #service .step-box .step-text-intro .text-intro { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  #service .step-box .step-text-intro .text-intro .text { width: 40vw; padding: 11vw 0 0 22vw; color: #000; font-size: 4vw; font-weight: 500; line-height: 5vw; text-align: center; box-sizing: border-box;}
  #service .step-box .step-text-intro .text-intro .text2 { width: 40vw; padding: 8vw 0 0 4vw; color: #000; font-size: 4vw; font-weight: 500; line-height: 5vw; text-align: center; box-sizing: border-box;}
  #service .step-box .step-text-intro .text-intro .text3 { width: 40vw; padding: 14vw 0 0 4vw; color: #000; font-size: 4vw; font-weight: 500; line-height: 5vw; text-align: center; box-sizing: border-box;}
  #service .step-box .step-text-intro .text-intro .text4 { width: 40vw; padding: 17vw 0 0 22vw; color: #000; font-size: 4vw; font-weight: 500; line-height: 5vw; text-align: center; box-sizing: border-box;}
  #service .step-box .step-text-intro .text-intro .text5 { width: 40vw; padding: 14vw 0 0 22vw; color: #000; font-size: 4vw; font-weight: 500; line-height: 5vw; text-align: center; box-sizing: border-box;}
  #service .step-box .step-text-intro .text-intro .intro { width: calc(100% - 40vw); padding: 0 5.5vw 0 10vw; color: #fff; font-size: 3.2vw; line-height: 3.6vw; letter-spacing: 0.3vw; box-sizing: border-box;}
  #service .step-box .step-text-intro .text-intro .intro2 { width: calc(100% - 40vw); padding: 5vw 0 0 0; color: #fff; font-size: 3.2vw; line-height: 3.6vw; letter-spacing: 0.3vw; box-sizing: border-box;}
  #service .step-box .step-text-intro .text-intro .intro3 { width: calc(100% - 40vw); padding: 15vw 0 0 10vw; color: #fff; font-size: 3.2vw; line-height: 3.6vw; letter-spacing: 0.3vw; box-sizing: border-box;}
  #service .step-box .step-text-intro .text-intro .intro4 { width: calc(100% - 40vw); padding: 15vw 0 0 0; color: #fff; font-size: 3.2vw; line-height: 3.6vw; letter-spacing: 0.3vw; box-sizing: border-box;}
  #service .step-box .step-text-intro .text-intro .intro5 { width: calc(100% - 40vw); padding: 15vw 0 0 10vw; color: #fff; font-size: 3.2vw; line-height: 3.6vw; letter-spacing: 0.3vw; box-sizing: border-box;}
  #service .step-box .step-text-intro .text-intro .intro a.line-pc { display: none;}
  #service .step-box .step-text-intro .text-intro .intro a.line-mo { display: block;}
  #service .step-box .step-text-intro .text-intro .intro a.line-mo img.line { width: auto; height: 4vw;}
  
  .service-title-text { width: 8vw; color: #fff; font-size: 6vw; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; position: absolute; bottom: 24vw; right: 34vw;}

  .serv-line-qrode { width: 18vw; color: #fff; font-size: 3vw; text-align: center; position: absolute; bottom: 23vw; right: 12vw;}
  .serv-line-qrode img.serv-qrcode { width: 100%; height: auto;}


  /************ section (service search) ************/

  section#page-serv-search { clear: both; width: 100%; overflow: hidden; position: relative;}
  
  img.serv-search-bg { width: 220%; height: auto; margin: 0 0 0 -80%;}

  #serv-search { width: 100%; padding: 19vw 8vw 0 8vw; box-sizing: border-box; position: absolute; top: 0; left: 0;}
  
  #serv-search img.serv-search-title { width: auto; height: 20vw; position: absolute; top: 12vw; left: 8vw;}

  #serv-search .serv-search-form { width: 76vw; position: absolute; top: 36vw; left: 8vw;}
  #serv-search .serv-search-form .row { width: 100%; padding: 2.5vw 0; border-bottom: 3px #fff solid; display: flex; justify-content: flex-start; align-items: center;}
  #serv-search .serv-search-form .row:first-child { margin: 0 0 5vw 0;}
  #serv-search .serv-search-form .row .caption { width: 20vw; color: #F7EBDF; font-size: 4vw; letter-spacing: 0.3vw; display: flex; justify-content: flex-start; align-items: center;}
  #serv-search .serv-search-form .row .caption img.icon { width: 4vw; height: auto; margin: 0 2vw 0 0;}
  #serv-search .serv-search-form .row .column { width: calc(100% - 10vw);}
  #serv-search .serv-search-form .row .column input[type=text], 
  #serv-search .serv-search-form .row .column input[type=password] 
  { width: 100%; padding: 1.5vw; color: #fff; font-size: 4vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: rgba(255,255,255,0.4); box-sizing: border-box;}
  #serv-search .serv-search-form .row2 { clear: both; width: 100%; padding: 5vw 0; color: #E1CCA3; font-size: 4vw; letter-spacing: 0.3vw;}
  #serv-search .serv-search-form input[type=submit] { width: 100%; padding: 3vw; color: #fff; font-size: 4vw; font-weight: 600; letter-spacing: 0.3vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 4px #fff solid; background-color: transparent; box-sizing: border-box; cursor: pointer;}


  /************ section (service search content) ************/

  section#page-serv-search-content { clear: both; width: 100%; background-image: url("../images/serv_search_con_bg.jpg"); background-repeat: no-repeat; background-position: center top; background-size: cover;}
  
  img.serv-search-con-bg { width: 100%; height: auto;}

  #serv-search-content { width: 100%; padding: 120px 20px 60px 20px; box-sizing: border-box;}
  
  #serv-search-content img.serv-search-title { width: auto; height: 120px;}

  #serv-search-content .search-content { clear: both; width: 100%; padding: 30px 20px; background-color: #fff; box-sizing: border-box;}
  #serv-search-content .search-content .pics { display: none;}
  #serv-search-content .search-content .infor { width: 100%;}
  #serv-search-content .search-content .infor .title-date { width: 100%; border-bottom: 1px #95800F solid;}
  #serv-search-content .search-content .infor .title-date .title { width: 200px; padding: 4px 0 6px 0; color: #fff; font-size: 1.4em; font-weight: 500; letter-spacing: 0.1em; text-align: center; background-color: #A97D21;}
  #serv-search-content .search-content .infor .title-date .date { width: 100%; padding: 3px 10px 5px 10px; color: #95800F; font-size: 1.4em; font-weight: 500; box-sizing: border-box;}
  #serv-search-content .search-content .infor .name { width: 100%; padding: 0 0 20px 0; font-size: 1.8em; font-weight: 600; letter-spacing: 0.1em; box-sizing: border-box;}
  #serv-search-content .search-content .infor .step { width: 100%; padding: 20px 0; font-size: 1.4em; font-weight: 500; letter-spacing: 0.1em; box-sizing: border-box;}
  #serv-search-content .search-content .infor .text { width: 100%; padding: 20px 0; box-sizing: border-box;}
  #serv-search-content .search-content .infor .search { width: 100%; padding: 20px 0; box-sizing: border-box;}
  #serv-search-content .search-content .infor .search select { width: 100%; padding: 10px; color: #414141; font-size: 1.2em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #9C9C9C solid; background-color: #fff; box-sizing: border-box;}
  #serv-search-content .search-content .infor .back-bt { clear: both; width: 60px; margin: 30px 0; text-align: right; float: right;}
  #serv-search-content .search-content .infor .back-bt a { color: #A97D21; font-size: 0.9rem; letter-spacing: 0.1em; text-decoration: none;}
  #serv-search-content .search-content .infor .back-bt img { width: 100%; height: auto;}
  #serv-search-content .search-content .infor .search-select { width: 100%; font-size: 1.2rem;}
  #serv-search-content .search-content .infor .search-select select { padding: 3px 5px; border: 1px #ccc solid; font-size: 1.2rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial;}
  #serv-search-content .search-content .infor .pics-mo { width: 100%; margin: 20px 0 0 0;}
  #serv-search-content .search-content .infor .pics-mo > div { display: none;}
  #serv-search-content .search-content .infor .pics-mo ul.pics-big { width: 100%; padding: 0 0 20px 0; margin: 0; border-bottom: 1px #ccc solid; list-style: none; display: block;}
  #serv-search-content .search-content .infor .pics-mo ul.pics-big li { width: 100%; padding: 0; margin: 0; display: none;}
  #serv-search-content .search-content .infor .pics-mo ul.pics-big li img { width: 100%; height: auto;}
  #serv-search-content .search-content .infor .pics-mo ul.pics-thumb { width: 100%; padding: 0; margin: 20px 0 0 0; list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  #serv-search-content .search-content .infor .pics-mo ul.pics-thumb li { width: calc(100% / 2 - 20px); height: 20vw; margin: 0 10px 20px 10px; padding: 0; overflow: hidden;}
  #serv-search-content .search-content .infor .pics-mo ul.pics-thumb li img { width: 100%; height: auto; cursor: pointer;}

  ul.search-steps-tab { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
  ul.search-steps-tab li { width: 100%; padding: 0; margin: 0;}
  ul.search-steps-tab li a { width: 100%; padding: 10px 0; text-decoration: none; display: flex; justify-content: flex-start;}
  ul.search-steps-tab li a.sel { background-color: #F7EBDF;}
  ul.search-steps-tab li .date { width: 100px; color: #414141; font-size: 1rem; font-weight: 600; line-height: 1.2rem;}
  ul.search-steps-tab li .step-name { width: calc(100% - 100px); color: red; font-size: 1.4rem; font-weight: 600; line-height: 1.2rem;}
  ul.search-steps-tab li ul.detail { width: 100%; padding: 0; margin: 10px 0 0 0; list-style: none; display: block;}
  ul.search-steps-tab li ul.detail li { width: 100%; padding: 5px 0; margin: 0; color: #444; font-size: 1rem; font-weight: 400;}


  /************ section (contact) ************/

  section#page-contact { clear: both; width: 100%; background-image: url("../images/contact_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #contact { width: 100%; padding: 45px 20px; box-sizing: border-box;}

  .contact-title .title-box { width: 100%; margin: 0 0 30px 0; box-sizing: border-box; display: flex; justify-content: center; flex-wrap: wrap;}
  .contact-title .title-box .title-1 { width: 110px; height: 30px; color: #fff; font-size: 1.2em; letter-spacing: 0.1em; background-color: #AE7D21; display: flex; justify-content: center; align-items: center; position: relative; z-index: 2;}
  .contact-title .title-box .title-2 { width: 140px; height: 30px; margin: 15px 0 0 -10px; color: #AE7D21; border: 1px #AE7D21 solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .contact-title .title-box .title-slogan { clear: both; width: 100%; margin: 20px 0 0 0; font-size: 1.8em; font-weight: 300; line-height: 1.4em; text-align: center;}
  .contact-title .title-box .title-slogan span.big { font-size: 1.8rem; font-weight: 700;}
  .contact-title .title-box .title-text { clear: both; max-width: 100%; width: 480px; margin: 10px 0 0 0; font-size: 1em; line-height: 1.6em; text-align: center;}

  .contact-main { clear: both; width: 100%; margin: 65px 0 0 0;}
  .contact-main form { width: 100%;}
  .contact-main .contact-table { width: 100%; margin: 0 0 30px 0;}
  .contact-main .contact-table .list { width: 100%; padding: 15px 0; font-size: 1.2em; border-bottom: 1px #B5B5B5 solid;}
  .contact-main .contact-table .list .caption-1 { width: 100%; margin: 0 0 10px 0;}
  .contact-main .contact-table .list .caption-1 span.star { color: #AE7D21;}
  .contact-main .contact-table .list .column-1 { width: 100%;}
  .contact-main .contact-table .list .column-1 input[type=text].style1 { width: 100%; padding: 5px; color: #414141; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; box-sizing: border-box;}
  .contact-main .contact-table .list .column-1 input[type=text].style2 { width: 100%; padding: 5px; color: #414141; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; box-sizing: border-box;}
  .contact-main .contact-table .list .column-1 textarea { width: 100%; height: 85px; padding: 5px; color: #414141; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; box-sizing: border-box;}
  .contact-main .contact-table .list .caption-2 { width: 100%; margin: 0 0 10px 0;}
  .contact-main .contact-table .list .caption-2 span.star { color: #AE7D21;}
  .contact-main .contact-table .list .column-2 { width: 100%; display: flex; justify-content: flex-start;}
  .contact-main .contact-table .list .column-2 input[type=text].style1 { width: 55%; padding: 5px; color: #414141; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; box-sizing: border-box;}
  .contact-main .contact-table .list .column-2 img.code { margin: 0 0 0 10px;}
  .contact-main .contact-table .input-submit { width: 100%; padding: 15px 0; text-align: right;}
  .contact-main .contact-table .input-submit input[type=reset] { color: #414141; font-size: 1.2rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; cursor: pointer;}
  .contact-main .contact-table .input-submit input[type=submit] { color: #AE7D21; font-size: 1.2rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: transparent; cursor: pointer;}
  .contact-main .pic { clear: both; width: 100%;}
  .contact-main .pic img { max-width: 100%; width: 360px; height: auto; margin: 0 auto;}
  .contact-main .infor { clear: both; width: 100%; font-size: 1.2em; line-height: 1.4em;}


  /************ section (sitemap) ************/

  .banner-sitemap { clear: both; width: 100%; height: 44vw; overflow: hidden; position: relative;}
  .banner-sitemap img { width: 140%; height: auto; margin: 0 0 0 -20%;}
  .banner-sitemap img.banner-text { width: auto; height: 20vw; position: absolute; bottom: 4vw; left: 24vw;}

  section#page-sitemap { clear: both; width: 100%; background-image: url("../images/contact_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #sitemap { width: 100%; padding: 100px 20px; box-sizing: border-box;}

  ul.sitemap { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
  ul.sitemap li { padding: 0; margin: 0 0 40px 0;}
  ul.sitemap li a { color: #414141; font-size: 1.4em; font-weight: 600; letter-spacing: 0.1em; text-decoration: none;}
  ul.sitemap li a:hover { border-bottom: 1px #414141 solid;}
  ul.sitemap li ul.sitemap-snd { padding: 0 0 0 10px; margin: 0; list-style: none; display: block;}
  ul.sitemap li ul.sitemap-snd li { padding: 0; margin: 20px 0;}
  ul.sitemap li ul.sitemap-snd li a { color: #414141; font-size: 1.2rem; font-weight: 500; letter-spacing: 0.1em; text-decoration: none;}
  ul.sitemap li ul.sitemap-snd li a:hover { border-bottom: 1px #414141 solid;}


  /************ section (error) ************/

  section#page-error { clear: both; width: 100%; background-image: url("../images/contact_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}

  #error404 { width: 100%; padding: 160px 20px; box-sizing: border-box;}
  #error404 .title-1 { width: 100%; margin: 0 0 40px 0; font-size: 4em; font-weight: 700; font-family: Arial; letter-spacing: 0.1em; text-align: center;}
  #error404 .title-2 { width: 100%; font-size: 2em; font-weight: 500; letter-spacing: 0.1em; text-align: center;}
  #error404 .goback-bt { clear: both; width: 200px; margin: 80px auto 0 auto;}
  #error404 .goback-bt a { width: 100%; padding: 6px 0; color: #fff; font-size: 1.2em; text-align: center; text-decoration: none; border-radius: 20px; background-color: #A97D21; display: block;}
  #error404 .goback-bt a:hover { background-color: #AE7D21;}


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

  footer { clear: both; width: 100%; padding: 40px 20px; background-color: #000C1F; box-sizing: border-box;}

  .logo-column { width: 100%; margin: 0 0 30px 0;}
  .logo-column img.ft-logo { width: 250px; height: auto; margin: 0 auto;}

  .infor-column { width: 100%;}
  .infor-column .ft-nav-icon { width: 100%; margin: 0 0 30px 0;}
  .infor-column .ft-nav-icon ul.footer-nav { width: 100%; padding: 0; margin: 0 0 20px 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
  .infor-column .ft-nav-icon ul.footer-nav li { padding: 0; margin: 0 10px 20px 10px;}
  .infor-column .ft-nav-icon ul.footer-nav li a { color: #fff; font-size: 0.9em; font-weight: 500; text-decoration: none;}
  .infor-column .ft-nav-icon ul.footer-nav li a:hover { border-bottom: 1px #fff solid;}
  .infor-column .ft-nav-icon ul.social-icons { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  .infor-column .ft-nav-icon ul.social-icons li { padding: 0; margin: 0 10px;}
  .infor-column .ft-nav-icon ul.social-icons li img { width: auto; height: 30px;}
  .infor-column .ft-addr-infor { width: 100%; margin: 0 0 25px 0;}
  .infor-column .ft-addr-infor div { width: 100%; margin: 0 0 5px 0; color: #C9A481; font-size: 0.9em; font-weight: 500; text-align: center;}
  .infor-column .ft-copyright { width: 100%; color: #fff; font-size: 0.8em; font-weight: 500; text-align: center;}
  

}