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


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

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

  header#header-mo { display: none;}
  header#header-pc { width: 100%; height: 125px; background-image: url("../images/header_bg.jpg"); background-repeat: repeat; background-position: left top; display: flex; justify-content: flex-start; align-items: center; position: relative;}

  img.header-logo { width: 280px; height: auto; margin: 0 0 0 200px;}

  nav#mo { display: block;}
  nav#pc { width: calc(100% - 280px - 200px - 100px - 110px);}
  nav#pc ul.menu-nav { width: 100%; padding: 0 50px 0 0; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  nav#pc ul.menu-nav li { padding: 10px 30px; margin: 0; border-right: 1px #fff solid; box-sizing: border-box;}
  nav#pc ul.menu-nav li:last-child { border-right: 0;}
  nav#pc ul.menu-nav li a { color: #fff; font-size: 1.1rem; text-decoration: none;}
  nav#pc ul.menu-nav li a:hover { border-bottom: 1px #fff solid;}

  img.header-illu { width: 100px; height: auto; margin: 0 110px 0 0;}


  /************ section #sec-1 ************/

  section#sec-1 { clear: both; width: 100%; padding: 0; position: relative;}

  img.sec-1-bg-mo { display: none;}
  img.sec-1-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  img.sec-1-title-logo { /*width: 410px;*/width: 20.5vw; height: auto; position: absolute; top: 5.7vw; left: 16vw; z-index: 2;}
  img.sec-1-text { /*width: 622px;*/width: 31.1vw; height: auto; position: absolute; top: 13.5vw; right: 18vw; z-index: 2;}


  /************ section #sec-2 ************/

  section#sec-2 { clear: both; width: 100%; padding: 0; position: relative;}

  img.sec-2-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  .sec-2-text { width: 100%; position: absolute; top: 6.5vw; left: 0; z-index: 2;}
  .sec-2-text .font-style-1 { width: 100%; color: #1b3967; font-size: 3vw; font-weight: 500; letter-spacing: 0.1em; display: flex; justify-content: center; align-items: center;}
  .sec-2-text .font-style-1 img.sec-2-x { /*width: 43px;*/width: 2.2vw; height: auto; margin: 0 2vw;}
  .sec-2-text .font-style-2 { width: 100%; padding: 3vw 0 0 0; color: #231815; font-size: 2vw; font-weight: 500; text-align: center; letter-spacing: 0.1em;}


  /************ section #sec-3 ************/

  section#sec-3 { clear: both; width: 100%; padding: 0; background-image: url("../images/sec_3_bg.jpg"); background-repeat: repeat; background-position: left top; position: relative;}

  .sec-3-intro { width: 100%; padding: 9vw 14.5vw 6vw 14.5vw; box-sizing: border-box;}
  .sec-3-intro .intro-text { width: 100%; padding: 1vw 0 0 3vw; border-left: 5px #ff8d27 solid; box-sizing: border-box;}
  .sec-3-intro .intro-text .style-1 { width: 100%; color: #fff; font-size: 3vw; font-weight: 500; letter-spacing: 0.1em;}
  .sec-3-intro .intro-text .style-2 { width: 100%; padding: 2vw 0 0 0; color: #fff; font-size: 1.3vw; line-height: 3vw;}

  img.sec-3-photo-view { clear: both; width: 100%; height: auto;}

  .sec-3-map { clear: both; width: 100%; padding: 7.5vw 8vw 8vw 8vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .sec-3-map img.map-pic { /*width: 1200px;*/width: 60vw; height: auto; margin: 0 2vw 0 0;}
  .sec-3-map span.map-text-v { color: #fff; font-size: 3vw; font-weight: 500; letter-spacing: 0.2em; line-height: 5vw; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr;}


  /************ section #sec-4 ************/

  section#sec-4 { clear: both; width: 100%; padding: 7vw 0; background-image: url("../images/sec_4_bg.jpg"); background-repeat: repeat; background-position: left top; position: relative;}

  .sec-4-title-mo { display: none;}
  .sec-4-title { width: 100%; padding: 0 11vw; color: #1b3967; font-size: 2.6vw; font-weight: 500; text-align: center; box-sizing: border-box;}

  .sec-4-photos { clear: both; width: 60vw; margin: 6vw auto 0 auto;}
  .sec-4-photos img.photo { width: 100%; height: auto;}
  .sec-4-photos .text { width: 100%; padding: 2vw 0; color: #000; font-size: 1.1vw; text-align: center;}


  /************ section #sec-5 ************/

  section#sec-5 { clear: both; width: 100%; padding: 0; position: relative;}

  img.sec-5-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  img.sec-5-text-1 { /*width: 797px;*/width: 40vw; height: auto; position: absolute; top: 8.5vw; left: calc(50% - 20vw); z-index: 2;}
  img.sec-5-text-2 { /*width: 638px;*/width: 32vw; height: auto; position: absolute; top: 21.5vw; left: calc(50% - 16vw); z-index: 2;}


  /************ section #sec-6 ************/

  section#sec-6-environment { clear: both; width: 100%; padding: 0; position: relative; overflow: hidden;}

  .sec-environment-location { width: 100%;}
  .sec-environment-location .point-tip { display: none;}
  .sec-environment-location img.sec-6-photo-view { width: 100%; height: auto;}


  /************ section #sec-7 ************/

  section#sec-7 { clear: both; width: 100%; padding: 8.5vw 0; background-image: url("../images/sec_4_bg.jpg"); background-repeat: repeat; background-position: left top; display: flex; justify-content: flex-start; align-items: flex-start; position: relative;}

  .sec-7-text-intro { width: 50%; padding: 1.5vw 0 0 14.3vw; box-sizing: border-box;}
  .sec-7-text-intro .intro-title { width: 100%; padding: 0 0 0 3vw; margin: 0 0 5.8vw 0; color: #1b3967; font-size: 2.6vw; font-weight: 500; letter-spacing: 0.1em; border-left: 3px #ff8d27 solid; box-sizing: border-box;}
  .sec-7-text-intro .intro-list { width: 100%; padding: 0 0 1.4vw 3vw; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .sec-7-text-intro .intro-list .sub { width: 5.3vw; height: 5.3vw; color: #fff; font-size: 1.4vw; background-color: #ff9327; border-radius: 100%; display: flex; justify-content: center; align-items: center;}
  .sec-7-text-intro .intro-list .intro { width: calc(100% - 5.3vw); padding: 0 0 0 2vw; color: #000; box-sizing: border-box;}
  .sec-7-text-intro .intro-list .intro span.style-b { font-size: 1.4vw; font-weight: 500; letter-spacing: 0.1em;}
  .sec-7-text-intro .intro-list .intro span.style-s { font-size: 0.9vw;}

  img.sec-7-photo { width: 50%; height: auto;}


  /************ section #sec-8 ************/

  section#sec-8 { clear: both; width: 100%; padding: 0; position: relative;}

  img.sec-8-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  img.sec-8-text-1 { /*width: 733px;*/width: 36.6vw; height: auto; position: absolute; top: 8.5vw; left: calc(50% - 18.3vw); z-index: 2;}
  img.sec-8-text-2 { /*width: 539px;*/width: 27vw; height: auto; position: absolute; top: 21.5vw; left: calc(50% - 13.5vw); z-index: 2;}


  /************ section #contact-form ************/

  section#contact-form { clear: both; width: 100%; padding: 5vw 0 0 0; background-image: url("../images/sec_3_bg.jpg"); background-repeat: repeat; background-position: left top; position: relative;}

  .contact-title { width: 100%;}
  .contact-title .title { width: 12vw; margin: 0 auto; color: #fff; font-size: 3vw; font-weight: 500; text-align: center;}
  .contact-title .underline { width: 12vw; margin: 0.5vw auto 0 auto; display: flex; justify-content: flex-end;}
  .contact-title .underline .line { width: 6vw; height: 5px; background-color: #ff8d27; display: block;}
  .contact-title .text-s-mo { display: none;}
  .contact-title .text-s { width: 100%; margin: 2.5vw 0 0 0; color: #fff; font-size: 1.2vw; text-align: center;}

  .contact-form-table { clear: both; width: 60%; padding: 4vw 0; margin: 0 auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .contact-form-table .caption { width: 12vw; padding: 0 0.5vw 0 0; margin: 0 0 2vw 0; color: #fff; font-size: 1.4vw; font-weight: 500; text-align: right; box-sizing: border-box;}
  .contact-form-table .column { width: calc(100% - 12vw); margin: 0 0 2vw 0;}
  .contact-form-table .column input[type=text], 
  .contact-form-table .column input[type=tel], 
  .contact-form-table .column input[type=email], 
  .contact-form-table .column select { width: 100%; padding: 0.5vw 1vw; font-size: 1.1vw; border: 0; background-color: #fff; box-sizing: border-box;}
  .contact-form-table .column img.code { width: 10vw; height: auto; margin: 0.5vw 0 0 0;}
  .contact-form-table .column input[type=submit], 
  .contact-form-table .column input[type=button] { width: 10vw; padding: 0.5vw 0; color: #fff; font-size: 1.2vw; border: 0; border-radius: 2vw; background-color: #ff8d27; cursor: pointer;}
  .contact-form-table .column input[type=submit]:hover, 
  .contact-form-table .column input[type=button]:hover { background-color: #de7b22;}

  .contact-add-logo { clear: both; width: 60%; padding: 1vw 0 4vw 0; margin: 0 auto; display: flex; justify-content: flex-start; align-items: center;}
  .contact-add-logo img.logo { /*width: 214px;*/width: 10.7vw; height: auto; margin: 0 5vw 0 0;}
  .contact-add-logo .add-infor { width: calc(100% - 10.7vw - 5vw); display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .contact-add-logo .add-infor img.icon { /*width: 25px;*/width: 1.3vw; height: auto; margin: 0.5vw 1.5vw 0.5vw 0;}
  .contact-add-logo .add-infor .infor { width: calc(100% - 1.3vw - 1.5vw); margin: 0.5vw 0; color: #fff; font-size: 1.1vw;}
  
  .copyright { clear: both; width: 100%; padding: 2vw 18vw; color: #fff; font-size: 0.8vw; text-align: right; border-top: 1px #fff solid; box-sizing: border-box;}


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

  footer { display: none;}


}

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

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

  header#header-mo { display: none;}
  header#header-pc { width: 100%; height: 125px; padding: 0 40px; box-sizing: border-box; background-image: url("../images/header_bg.jpg"); background-repeat: repeat; background-position: left top; display: flex; justify-content: flex-start; align-items: center; position: relative;}

  img.header-logo { width: 240px; height: auto;}

  nav#mo { display: block;}
  nav#pc { width: calc(100% - 240px - 80px);}
  nav#pc ul.menu-nav { width: 100%; padding: 0; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  nav#pc ul.menu-nav li { padding: 10px 30px; margin: 0; border-right: 1px #fff solid; box-sizing: border-box;}
  nav#pc ul.menu-nav li:last-child { border-right: 0;}
  nav#pc ul.menu-nav li a { color: #fff; font-size: 1.1rem; text-decoration: none;}
  nav#pc ul.menu-nav li a:hover { border-bottom: 1px #fff solid;}

  img.header-illu { width: 80px; height: auto;}


  /************ section #sec-1 ************/

  section#sec-1 { clear: both; width: 100%; padding: 0; position: relative; overflow: hidden;}

  img.sec-1-bg-mo { display: none;}
  img.sec-1-bg { width: 120%; height: auto; margin: 0 0 0 -10%; position: relative; z-index: 1;}

  img.sec-1-title-logo { /*width: 410px;*/width: 22vw; height: auto; position: absolute; top: 8vw; left: 16vw; z-index: 2;}
  img.sec-1-text { /*width: 622px;*/width: 34vw; height: auto; position: absolute; top: 15vw; right: 18vw; z-index: 2;}


  /************ section #sec-2 ************/

  section#sec-2 { clear: both; width: 100%; padding: 0; position: relative;}

  img.sec-2-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  .sec-2-text { width: 100%; position: absolute; top: 5.5vw; left: 0; z-index: 2;}
  .sec-2-text .font-style-1 { width: 100%; color: #1b3967; font-size: 4.4vw; font-weight: 500; letter-spacing: 0.1em; display: flex; justify-content: center; align-items: center;}
  .sec-2-text .font-style-1 img.sec-2-x { /*width: 43px;*/width: 3.2vw; height: auto; margin: 0 2vw;}
  .sec-2-text .font-style-2 { width: 100%; padding: 3vw 0 0 0; color: #231815; font-size: 3vw; font-weight: 500; text-align: center; letter-spacing: 0.1em;}


  /************ section #sec-3 ************/

  section#sec-3 { clear: both; width: 100%; padding: 0; background-image: url("../images/sec_3_bg.jpg"); background-repeat: repeat; background-position: left top; position: relative;}

  .sec-3-intro { width: 100%; padding: 9vw 14.5vw 6vw 14.5vw; box-sizing: border-box;}
  .sec-3-intro .intro-text { width: 100%; padding: 1vw 0 0 2vw; border-left: 5px #ff8d27 solid; box-sizing: border-box;}
  .sec-3-intro .intro-text .style-1 { width: 100%; color: #fff; font-size: 4vw; font-weight: 500; letter-spacing: 0.1em;}
  .sec-3-intro .intro-text .style-2 { width: 100%; padding: 2vw 0 0 0; color: #fff; font-size: 1.6vw; line-height: 3vw;}

  img.sec-3-photo-view { clear: both; width: 100%; height: auto;}

  .sec-3-map { clear: both; width: 100%; padding: 7.5vw 8vw 8vw 6vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .sec-3-map img.map-pic { /*width: 1200px;*/width: 60vw; height: auto; margin: 0 2vw 0 0;}
  .sec-3-map span.map-text-v { color: #fff; font-size: 4vw; font-weight: 500; letter-spacing: 0.2em; line-height: 5vw; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr;}


  /************ section #sec-4 ************/

  section#sec-4 { clear: both; width: 100%; padding: 7vw 0; background-image: url("../images/sec_4_bg.jpg"); background-repeat: repeat; background-position: left top; position: relative;}

  .sec-4-title-mo { display: none;}
  .sec-4-title { width: 100%; padding: 0 11vw; color: #1b3967; font-size: 3.6vw; font-weight: 500; text-align: center; box-sizing: border-box;}

  .sec-4-photos { clear: both; width: 64vw; margin: 6vw auto 0 auto;}
  .sec-4-photos img.photo { width: 100%; height: auto;}
  .sec-4-photos .text { width: 100%; padding: 2vw 0; color: #000; font-size: 1.6vw; text-align: center;}


  /************ section #sec-5 ************/

  section#sec-5 { clear: both; width: 100%; padding: 0; position: relative;}

  img.sec-5-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  img.sec-5-text-1 { /*width: 797px;*/width: 50vw; height: auto; position: absolute; top: 8.5vw; left: calc(50% - 25vw); z-index: 2;}
  img.sec-5-text-2 { /*width: 638px;*/width: 42vw; height: auto; position: absolute; top: 24vw; left: calc(50% - 21vw); z-index: 2;}


  /************ section #sec-6 ************/

  section#sec-6-environment { clear: both; width: 100%; padding: 0; position: relative; overflow: hidden;}

  .sec-environment-location { width: 100%;}
  .sec-environment-location .point-tip { display: none;}
  .sec-environment-location img.sec-6-photo-view { width: 100%; height: auto;}


  /************ section #sec-7 ************/

  section#sec-7 { clear: both; width: 100%; padding: 8.5vw 0; background-image: url("../images/sec_4_bg.jpg"); background-repeat: repeat; background-position: left top; display: flex; justify-content: flex-start; align-items: flex-start; position: relative;}

  .sec-7-text-intro { width: 50%; padding: 1.5vw 0 0 8vw; box-sizing: border-box;}
  .sec-7-text-intro .intro-title { width: 100%; padding: 0 0 0 3vw; margin: 0 0 5.8vw 0; color: #1b3967; font-size: 3.2vw; font-weight: 500; letter-spacing: 0.1em; border-left: 3px #ff8d27 solid; box-sizing: border-box;}
  .sec-7-text-intro .intro-list { width: 100%; padding: 0 0 1.4vw 3vw; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .sec-7-text-intro .intro-list .sub { width: 6.5vw; height: 6.5vw; color: #fff; font-size: 1.8vw; background-color: #ff9327; border-radius: 100%; display: flex; justify-content: center; align-items: center;}
  .sec-7-text-intro .intro-list .intro { width: calc(100% - 5.3vw); padding: 0 0 0 2vw; color: #000; box-sizing: border-box;}
  .sec-7-text-intro .intro-list .intro span.style-b { font-size: 2vw; font-weight: 500; letter-spacing: 0.1em;}
  .sec-7-text-intro .intro-list .intro span.style-s { font-size: 1.2vw;}

  img.sec-7-photo { width: 50%; height: auto;}


  /************ section #sec-8 ************/

  section#sec-8 { clear: both; width: 100%; padding: 0; position: relative;}

  img.sec-8-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  img.sec-8-text-1 { /*width: 733px;*/width: 46.6vw; height: auto; position: absolute; top: 8.5vw; left: calc(50% - 23.3vw); z-index: 2;}
  img.sec-8-text-2 { /*width: 539px;*/width: 37vw; height: auto; position: absolute; top: 24vw; left: calc(50% - 18.5vw); z-index: 2;}


  /************ section #contact-form ************/

  section#contact-form { clear: both; width: 100%; padding: 5vw 0 0 0; background-image: url("../images/sec_3_bg.jpg"); background-repeat: repeat; background-position: left top; position: relative;}

  .contact-title { width: 100%;}
  .contact-title .title { width: 16vw; margin: 0 auto; color: #fff; font-size: 4vw; font-weight: 500; text-align: center;}
  .contact-title .underline { width: 16vw; margin: 0.5vw auto 0 auto; display: flex; justify-content: flex-end;}
  .contact-title .underline .line { width: 8vw; height: 5px; background-color: #ff8d27; display: block;}
  .contact-title .text-s-mo { display: none;}
  .contact-title .text-s { width: 100%; margin: 3vw 0 0 0; color: #fff; font-size: 1.8vw; text-align: center;}

  .contact-form-table { clear: both; width: 70%; padding: 4vw 0; margin: 0 auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .contact-form-table .caption { width: 17vw; padding: 0 0.5vw 0 0; margin: 0 0 2.5vw 0; color: #fff; font-size: 2.2vw; font-weight: 500; text-align: right; box-sizing: border-box;}
  .contact-form-table .column { width: calc(100% - 17vw); margin: 0 0 2.5vw 0;}
  .contact-form-table .column input[type=text], 
  .contact-form-table .column input[type=tel], 
  .contact-form-table .column input[type=email], 
  .contact-form-table .column select { width: 100%; padding: 0.5vw 1vw; font-size: 2.2vw; border: 0; background-color: #fff; box-sizing: border-box;}
  .contact-form-table .column img.code { width: 15vw; height: auto; margin: 1vw 0 0 0;}
  .contact-form-table .column input[type=submit], 
  .contact-form-table .column input[type=button] { width: 14vw; padding: 0.5vw 0; color: #fff; font-size: 2vw; border: 0; border-radius: 2vw; background-color: #ff8d27; cursor: pointer;}
  .contact-form-table .column input[type=submit]:hover, 
  .contact-form-table .column input[type=button]:hover { background-color: #de7b22;}

  .contact-add-logo { clear: both; width: 70%; padding: 1vw 0 4vw 0; margin: 0 auto; display: flex; justify-content: flex-start; align-items: center;}
  .contact-add-logo img.logo { /*width: 214px;*/width: 14vw; height: auto; margin: 0 5vw 0 0;}
  .contact-add-logo .add-infor { width: calc(100% - 14vw - 5vw); display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .contact-add-logo .add-infor img.icon { /*width: 25px;*/width: 1.6vw; height: auto; margin: 0.5vw 1.5vw 0.5vw 0;}
  .contact-add-logo .add-infor .infor { width: calc(100% - 1.8vw - 1.5vw); margin: 0.8vw 0; color: #fff; font-size: 1.6vw;}
  
  .copyright { clear: both; width: 100%; padding: 2vw 16vw; color: #fff; font-size: 1.1vw; text-align: right; border-top: 1px #fff solid; box-sizing: border-box;}


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

  footer { display: none;}


}

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

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

  header#header-mo { display: none;}
  header#header-pc { width: 100%; height: 100px; padding: 0 20px; box-sizing: border-box; background-image: url("../images/header_bg.jpg"); background-repeat: repeat; background-position: left top; display: flex; justify-content: flex-start; align-items: center; position: relative;}

  img.header-logo { width: 180px; height: auto;}

  nav#mo { display: block;}
  nav#pc { width: calc(100% - 180px - 40px);}
  nav#pc ul.menu-nav { width: 100%; padding: 0; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  nav#pc ul.menu-nav li { padding: 10px 20px; margin: 0; border-right: 1px #fff solid; box-sizing: border-box;}
  nav#pc ul.menu-nav li:last-child { border-right: 0;}
  nav#pc ul.menu-nav li a { color: #fff; font-size: 1.1rem; text-decoration: none;}
  nav#pc ul.menu-nav li a:hover { border-bottom: 1px #fff solid;}

  img.header-illu { width: 40px; height: auto;}


  /************ section #sec-1 ************/

  section#sec-1 { clear: both; width: 100%; padding: 0; position: relative; overflow: hidden;}

  img.sec-1-bg-mo { display: none;}
  img.sec-1-bg { width: 160%; height: auto; margin: 0 0 0 -30%; position: relative; z-index: 1;}

  img.sec-1-title-logo { /*width: 410px;*/width: 30vw; height: auto; position: absolute; top: 10vw; left: 8vw; z-index: 2;}
  img.sec-1-text { /*width: 622px;*/width: 42vw; height: auto; position: absolute; top: 20vw; right: 10vw; z-index: 2;}


  /************ section #sec-2 ************/

  section#sec-2 { clear: both; width: 100%; padding: 0; position: relative;}

  img.sec-2-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  .sec-2-text { width: 100%; position: absolute; top: 5.5vw; left: 0; z-index: 2;}
  .sec-2-text .font-style-1 { width: 100%; color: #1b3967; font-size: 4.4vw; font-weight: 500; letter-spacing: 0.1em; display: flex; justify-content: center; align-items: center;}
  .sec-2-text .font-style-1 img.sec-2-x { /*width: 43px;*/width: 3.2vw; height: auto; margin: 0 2vw;}
  .sec-2-text .font-style-2 { width: 100%; padding: 3vw 0 0 0; color: #231815; font-size: 3vw; font-weight: 500; text-align: center; letter-spacing: 0.1em;}


  /************ section #sec-3 ************/

  section#sec-3 { clear: both; width: 100%; padding: 0; background-image: url("../images/sec_3_bg.jpg"); background-repeat: repeat; background-position: left top; position: relative;}

  .sec-3-intro { width: 100%; padding: 9vw 14.5vw 6vw 14.5vw; box-sizing: border-box;}
  .sec-3-intro .intro-text { width: 100%; padding: 1vw 0 0 2vw; border-left: 5px #ff8d27 solid; box-sizing: border-box;}
  .sec-3-intro .intro-text .style-1 { width: 100%; color: #fff; font-size: 4vw; font-weight: 500; letter-spacing: 0.1em;}
  .sec-3-intro .intro-text .style-2 { width: 100%; padding: 2vw 0 0 0; color: #fff; font-size: 1.6vw; line-height: 3vw;}

  img.sec-3-photo-view { clear: both; width: 100%; height: auto;}

  .sec-3-map { clear: both; width: 100%; padding: 7.5vw 8vw 8vw 6vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .sec-3-map img.map-pic { /*width: 1200px;*/width: 60vw; height: auto; margin: 0 2vw 0 0;}
  .sec-3-map span.map-text-v { color: #fff; font-size: 4vw; font-weight: 500; letter-spacing: 0.2em; line-height: 5vw; -webkit-writing-mode: vertical-lr; writing-mode: vertical-lr;}


  /************ section #sec-4 ************/

  section#sec-4 { clear: both; width: 100%; padding: 7vw 0; background-image: url("../images/sec_4_bg.jpg"); background-repeat: repeat; background-position: left top; position: relative;}

  .sec-4-title-mo { display: none;}
  .sec-4-title { width: 100%; padding: 0 11vw; color: #1b3967; font-size: 3.6vw; font-weight: 500; text-align: center; box-sizing: border-box;}

  .sec-4-photos { clear: both; width: 64vw; margin: 6vw auto 0 auto;}
  .sec-4-photos img.photo { width: 100%; height: auto;}
  .sec-4-photos .text { width: 100%; padding: 2vw 0; color: #000; font-size: 1.6vw; text-align: center;}


  /************ section #sec-5 ************/

  section#sec-5 { clear: both; width: 100%; padding: 0; position: relative;}

  img.sec-5-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  img.sec-5-text-1 { /*width: 797px;*/width: 50vw; height: auto; position: absolute; top: 8.5vw; left: calc(50% - 25vw); z-index: 2;}
  img.sec-5-text-2 { /*width: 638px;*/width: 42vw; height: auto; position: absolute; top: 24vw; left: calc(50% - 21vw); z-index: 2;}


  /************ section #sec-6 ************/

  section#sec-6-environment { clear: both; width: 100%; padding: 0; position: relative; overflow: hidden;}

  .sec-environment-location { width: 100%;}
  .sec-environment-location .point-tip { display: none;}
  .sec-environment-location img.sec-6-photo-view { width: 100%; height: auto;}


  /************ section #sec-7 ************/

  section#sec-7 { clear: both; width: 100%; padding: 8.5vw 0; background-image: url("../images/sec_4_bg.jpg"); background-repeat: repeat; background-position: left top; display: flex; justify-content: flex-start; align-items: flex-start; position: relative;}

  .sec-7-text-intro { width: 50%; padding: 1.5vw 0 0 8vw; box-sizing: border-box;}
  .sec-7-text-intro .intro-title { width: 100%; padding: 0 0 0 3vw; margin: 0 0 5.8vw 0; color: #1b3967; font-size: 3.2vw; font-weight: 500; letter-spacing: 0.1em; border-left: 3px #ff8d27 solid; box-sizing: border-box;}
  .sec-7-text-intro .intro-list { width: 100%; padding: 0 0 1.4vw 3vw; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .sec-7-text-intro .intro-list .sub { width: 6.5vw; height: 6.5vw; color: #fff; font-size: 1.8vw; background-color: #ff9327; border-radius: 100%; display: flex; justify-content: center; align-items: center;}
  .sec-7-text-intro .intro-list .intro { width: calc(100% - 5.3vw); padding: 0 0 0 2vw; color: #000; box-sizing: border-box;}
  .sec-7-text-intro .intro-list .intro span.style-b { font-size: 2vw; font-weight: 500; letter-spacing: 0.1em;}
  .sec-7-text-intro .intro-list .intro span.style-s { font-size: 1.2vw;}

  img.sec-7-photo { width: 50%; height: auto;}


  /************ section #sec-8 ************/

  section#sec-8 { clear: both; width: 100%; padding: 0; position: relative;}

  img.sec-8-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  img.sec-8-text-1 { /*width: 733px;*/width: 46.6vw; height: auto; position: absolute; top: 8.5vw; left: calc(50% - 23.3vw); z-index: 2;}
  img.sec-8-text-2 { /*width: 539px;*/width: 37vw; height: auto; position: absolute; top: 24vw; left: calc(50% - 18.5vw); z-index: 2;}


  /************ section #contact-form ************/

  section#contact-form { clear: both; width: 100%; padding: 5vw 0 0 0; background-image: url("../images/sec_3_bg.jpg"); background-repeat: repeat; background-position: left top; position: relative;}

  .contact-title { width: 100%;}
  .contact-title .title { width: 16vw; margin: 0 auto; color: #fff; font-size: 4vw; font-weight: 500; text-align: center;}
  .contact-title .underline { width: 16vw; margin: 0.5vw auto 0 auto; display: flex; justify-content: flex-end;}
  .contact-title .underline .line { width: 8vw; height: 5px; background-color: #ff8d27; display: block;}
  .contact-title .text-s-mo { display: none;}
  .contact-title .text-s { width: 100%; margin: 3vw 0 0 0; color: #fff; font-size: 1.8vw; text-align: center;}

  .contact-form-table { clear: both; width: 70%; padding: 4vw 0; margin: 0 auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .contact-form-table .caption { width: 10vw; margin: 0 0 2.5vw 0; color: #fff; font-size: 2.2vw; font-weight: 500;}
  .contact-form-table .column { width: calc(100% - 10vw); margin: 0 0 2.5vw 0;}
  .contact-form-table .column input[type=text], 
  .contact-form-table .column input[type=tel], 
  .contact-form-table .column input[type=email], 
  .contact-form-table .column select { width: 100%; padding: 0.5vw 1vw; font-size: 2.2vw; border: 0; background-color: #fff; box-sizing: border-box;}
  .contact-form-table .column img.code { width: 15vw; height: auto; margin: 1vw 0 0 0;}
  .contact-form-table .column input[type=submit], 
  .contact-form-table .column input[type=button] { width: 14vw; padding: 0.5vw 0; color: #fff; font-size: 2vw; border: 0; border-radius: 2vw; background-color: #ff8d27; cursor: pointer;}
  .contact-form-table .column input[type=submit]:hover, 
  .contact-form-table .column input[type=button]:hover { background-color: #de7b22;}

  .contact-add-logo { clear: both; width: 70%; padding: 1vw 0 4vw 0; margin: 0 auto; display: flex; justify-content: flex-start; align-items: center;}
  .contact-add-logo img.logo { /*width: 214px;*/width: 14vw; height: auto; margin: 0 5vw 0 0;}
  .contact-add-logo .add-infor { width: calc(100% - 14vw - 5vw); display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .contact-add-logo .add-infor img.icon { /*width: 25px;*/width: 1.6vw; height: auto; margin: 0.5vw 1.5vw 0.5vw 0;}
  .contact-add-logo .add-infor .infor { width: calc(100% - 1.8vw - 1.5vw); margin: 0.8vw 0; color: #fff; font-size: 1.6vw;}
  
  .copyright { clear: both; width: 100%; padding: 2vw 16vw; color: #fff; font-size: 1.1vw; text-align: right; border-top: 1px #fff solid; box-sizing: border-box;}


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

  footer { display: none;}


}

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

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

  header#header-pc { display: none;}
  header#header-mo { width: 100%; border-top: 1px #fff solid; position: fixed; bottom: 0; left: 0; z-index: 9;}

  img.header-logo { display: none;}

  nav#pc { display: none;}
  nav#mo { width: 100%; background-image: url("../images/header_bg.jpg"); background-repeat: repeat; background-position: left top;}
  nav#mo ul.menu-nav { width: 100%; padding: 0; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  nav#mo ul.menu-nav li { width: calc(100% / 4); padding: 4vw 0; margin: 0; border-right: 1px #fff solid; box-sizing: border-box;}
  nav#mo ul.menu-nav li:last-child { border-right: 0;}
  nav#mo ul.menu-nav li img.icon { width: 12vw; height: auto; margin: 0 auto;}

  img.header-illu { display: none;}


  /************ section #sec-1 ************/

  section#sec-1 { clear: both; width: 100%; padding: 0; position: relative; overflow: hidden;}

  img.sec-1-bg { display: none;}
  img.sec-1-bg-mo { width: 100%; height: auto; position: relative; z-index: 1;}

  img.sec-1-title-logo { /*width: 410px;*/width: 60vw; height: auto; position: absolute; top: 20vw; left: calc(50% - 30vw); z-index: 2;}
  img.sec-1-text { /*width: 622px;*/width: 80vw; height: auto; position: absolute; top: 130vw; left: calc(50% - 40vw); z-index: 2;}


  /************ section #sec-2 ************/

  section#sec-2 { clear: both; width: 100%; padding: 0; position: relative; overflow: hidden;}

  img.sec-2-bg { width: 160%; height: auto; margin: 0 0 0 -20%; position: relative; z-index: 1;}

  .sec-2-text { width: 100%; position: absolute; top: 5.5vw; left: 0; z-index: 2;}
  .sec-2-text .font-style-1 { width: 100%; color: #1b3967; font-size: 8vw; font-weight: 500; letter-spacing: 0.1em; display: flex; justify-content: center; align-items: center;}
  .sec-2-text .font-style-1 img.sec-2-x { /*width: 43px;*/width: 3.2vw; height: auto; margin: 0 2vw;}
  .sec-2-text .font-style-2 { width: 100%; padding: 3vw 0 0 0; color: #231815; font-size: 5vw; font-weight: 500; text-align: center; letter-spacing: 0.1em;}


  /************ section #sec-3 ************/

  section#sec-3 { clear: both; width: 100%; padding: 0; background-image: url("../images/sec_3_bg.jpg"); background-repeat: repeat; background-position: left top; position: relative;}

  .sec-3-intro { width: 100%; padding: 9vw 4vw; box-sizing: border-box;}
  .sec-3-intro .intro-text { width: 100%; padding: 1vw 0 0 2vw; border-left: 5px #ff8d27 solid; box-sizing: border-box;}
  .sec-3-intro .intro-text .style-1 { width: 100%; color: #fff; font-size: 8vw; font-weight: 500; letter-spacing: 0.1em;}
  .sec-3-intro .intro-text .style-2 { width: 100%; padding: 2vw 0 0 0; color: #fff; font-size: 4vw; line-height: 6vw;}

  img.sec-3-photo-view { clear: both; width: 100%; height: auto;}

  .sec-3-map { clear: both; width: 100%; padding: 9vw 10vw; box-sizing: border-box;}
  .sec-3-map img.map-pic { /*width: 1200px;*/width: 100%; height: auto; margin: 0 0 4vw 0;}
  .sec-3-map span.map-text-v { width: 100%; color: #fff; font-size: 8vw; font-weight: 500; letter-spacing: 0.1em; line-height: 10vw;}


  /************ section #sec-4 ************/

  section#sec-4 { clear: both; width: 100%; padding: 9vw 4vw; box-sizing: border-box; background-image: url("../images/sec_4_bg.jpg"); background-repeat: repeat; background-position: left top; position: relative;}

  .sec-4-title { display: none;}
  .sec-4-title-mo { width: 100%; color: #1b3967; font-size: 6vw; font-weight: 500; text-align: center;}

  .sec-4-photos { clear: both; width: 100%; margin: 6vw auto 0 auto;}
  .sec-4-photos img.photo { width: 100%; height: auto;}
  .sec-4-photos .text { width: 100%; padding: 2vw 0; color: #000; font-size: 3vw; text-align: center;}


  /************ section #sec-5 ************/

  section#sec-5 { clear: both; width: 100%; padding: 0; position: relative; overflow: hidden;}

  img.sec-5-bg { width: 160%; height: auto; margin: 0 0 0 -30%; position: relative; z-index: 1;}

  img.sec-5-text-1 { /*width: 797px;*/width: 90vw; height: auto; position: absolute; top: 9.5vw; left: calc(50% - 45vw); z-index: 2;}
  img.sec-5-text-2 { /*width: 638px;*/width: 80vw; height: auto; position: absolute; top: 34vw; left: calc(50% - 40vw); z-index: 2;}


  /************ section #sec-6 ************/

  section#sec-6-environment { clear: both; width: 100%; padding: 0; position: relative; overflow: hidden;}

  .sec-environment-location { width: 100%; overflow-x: scroll; position: relative;}
  .sec-environment-location::-webkit-scrollbar { display: none;}
  .sec-environment-location .point-tip { width: 100%; height: 100%; background-color: rgba(0,0,0,0.25); display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .sec-environment-location .point-tip img.point { width: 30vw; height: auto;}
  .sec-environment-location .point-tip img.finger { animation-name: finger; -moz-animation-name: finger; animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: linear; animation-timing-function: steps(5, end); animation-direction: normal;}
  .sec-environment-location img.location-map { width: auto; height: 80vw; position: relative; z-index: 1;}


  /************ section #sec-7 ************/

  section#sec-7 { clear: both; width: 100%; padding: 9vw 0 0 0; background-image: url("../images/sec_4_bg.jpg"); background-repeat: repeat; background-position: left top; position: relative;}

  .sec-7-text-intro { width: 100%; padding: 0 4vw 9vw 4vw; box-sizing: border-box;}
  .sec-7-text-intro .intro-title { width: 100%; padding: 0 0 0 3vw; margin: 0 0 5.8vw 0; color: #1b3967; font-size: 8vw; font-weight: 500; letter-spacing: 0.1em; border-left: 3px #ff8d27 solid; box-sizing: border-box;}
  .sec-7-text-intro .intro-list { width: 100%; padding: 0 0 3vw 3vw; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .sec-7-text-intro .intro-list .sub { width: 22vw; height: 22vw; color: #fff; font-size: 5vw; background-color: #ff9327; border-radius: 100%; display: flex; justify-content: center; align-items: center;}
  .sec-7-text-intro .intro-list .intro { width: calc(100% - 22vw); padding: 0 0 0 6vw; color: #000; box-sizing: border-box;}
  .sec-7-text-intro .intro-list .intro span.style-b { font-size: 6vw; font-weight: 500; letter-spacing: 0.1em;}
  .sec-7-text-intro .intro-list .intro span.style-s { font-size: 4vw;}

  img.sec-7-photo { width: 100%; height: auto;}


  /************ section #sec-8 ************/

  section#sec-8 { clear: both; width: 100%; padding: 0; position: relative; overflow: hidden;}

  img.sec-8-bg { width: 160%; height: auto; margin: 0 0 0 -30%; position: relative; z-index: 1;}

  img.sec-8-text-1 { /*width: 733px;*/width: 80vw; height: auto; position: absolute; top: 9.5vw; left: calc(50% - 40vw); z-index: 2;}
  img.sec-8-text-2 { /*width: 539px;*/width: 70vw; height: auto; position: absolute; top: 34vw; left: calc(50% - 35vw); z-index: 2;}


  /************ section #contact-form ************/

  section#contact-form { clear: both; width: 100%; padding: 9vw 4vw 25vw 4vw; box-sizing: border-box; background-image: url("../images/sec_3_bg.jpg"); background-repeat: repeat; background-position: left top; position: relative;}

  .contact-title { width: 100%;}
  .contact-title .title { width: 32vw; margin: 0 auto; color: #fff; font-size: 8vw; font-weight: 500; text-align: center;}
  .contact-title .underline { width: 32vw; margin: 0.5vw auto 0 auto; display: flex; justify-content: flex-end;}
  .contact-title .underline .line { width: 16vw; height: 5px; background-color: #ff8d27; display: block;}
  .contact-title .text-s { display: none;}
  .contact-title .text-s-mo { width: 100%; margin: 6vw 0 0 0; color: #fff; font-size: 5vw; text-align: center;}

  .contact-form-table { clear: both; width: 100%; padding: 8vw 0; margin: 0 auto;}
  .contact-form-table .caption { width: 100%; margin: 0 0 2.5vw 0; color: #fff; font-size: 5vw; font-weight: 500;}
  .contact-form-table .column { width: 100%; margin: 0 0 6vw 0; text-align: center;}
  .contact-form-table .column input[type=text], 
  .contact-form-table .column input[type=tel], 
  .contact-form-table .column input[type=email], 
  .contact-form-table .column select { width: 100%; padding: 2vw; font-size: 4vw; border: 0; background-color: #fff; box-sizing: border-box;}
  .contact-form-table .column img.code { width: 60vw; height: auto; margin: 4vw 0 0 0;}
  .contact-form-table .column input[type=submit], 
  .contact-form-table .column input[type=button] { width: 34vw; padding: 1vw 0; color: #fff; font-size: 5vw; border: 0; border-radius: 4.6vw; background-color: #ff8d27; cursor: pointer;}
  .contact-form-table .column input[type=submit]:hover, 
  .contact-form-table .column input[type=button]:hover { background-color: #de7b22;}

  .contact-add-logo { clear: both; width: 100%; padding: 4vw 0 8vw 0; margin: 0 auto;}
  .contact-add-logo img.logo { /*width: 214px;*/width: 50vw; height: auto; margin: 0 auto;}
  .contact-add-logo .add-infor { width: 100%; margin: 4vw 0 0 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .contact-add-logo .add-infor img.icon { /*width: 25px;*/width: 4vw; height: auto; margin: 2vw 3vw 2vw 0;}
  .contact-add-logo .add-infor .infor { width: calc(100% - 4vw - 3vw); margin: 2vw 0; color: #fff; font-size: 3.6vw;}
  
  .copyright { clear: both; width: 100%; padding: 4vw; color: #fff; font-size: 3vw; text-align: right; border-top: 1px #fff solid; box-sizing: border-box;}


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

  footer { display: none;}
  

}