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

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

body { padding:0; margin:0 auto; color: #000; 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: 1370px) {

  section#index-pic-box { clear: both; width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden;}

  section#index-pic-box img.index-pic { width: 100%; height: auto;}
  section#index-pic-box img.index-pic-mo { display: none;}


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

  header { clear: both; width: 100%; height: 110px; padding: 0 10vw; box-sizing: border-box; background-color: rgba(255,255,255,0.95); display: flex; justify-content: flex-start; align-items: center; position: fixed; top: 0; left: 0; z-index: 99;}

  .logo-bx { width: 300px;}
  .logo-bx img { width: 220px; height: auto;}

  nav#mo { display: none;}

  nav#pc { width: calc(100% - 300px);}
  nav#pc ul.nav-menu { padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  nav#pc ul.nav-menu li { padding: 0; margin: 0; border-right: 1px #414141 solid;}
  nav#pc ul.nav-menu li:last-child { border-right: 0;}
  nav#pc ul.nav-menu li a { padding: 10px 30px; color: #414141; font-size: 1.1rem; line-height: 1em; text-decoration: none; display: block;}
  nav#pc ul.nav-menu li a:hover { color: #dab7ba;}


  /************ banner ************/

  .top-banner-box { clear: both; width: 100%; margin: 110px 0 0 0; overflow: hidden; position: relative; z-index: 1;}
  .top-banner-box img.banner-mo { display: none;}
  .top-banner-box img.banner-title { width: 29vw; height: auto; position: absolute; top: 3vw; left: calc(50% - 14.5vw); z-index: 2;}
  .top-banner-box img.banner-text { width: 26vw; height: auto; position: absolute; top: 22vw; left: calc(50% - 13vw); z-index: 2;}
  .top-banner-box img.banner-pc { width: 100%; height: auto; position: relative; z-index: 1;}


  /************ section #sec-greening ************/

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

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

  .sec-greening-content { width: 100%; padding: 6vw 8vw 0 8vw; box-sizing: border-box; position: absolute; top: 0; left: 0; z-index: 2;}
  .sec-greening-content .top-title { width: 100%; padding: 0 0 1.5vw 0; color: #4CA474; font-size: 5vw; font-weight: 700; text-align: center;}
  .sec-greening-content .top-text { width: 100%; display: flex; justify-content: center; align-items: center;}
  .sec-greening-content .top-text .col-left-mo { display: none;}
  .sec-greening-content .top-text .col-left { width: 50%; padding: 0 1vw 0 0; box-sizing: border-box; color: #000; font-size: 2.2vw; font-weight: 600; letter-spacing: 0.1em; text-align: right;}
  .sec-greening-content .top-text .col-right { width: 50%; padding: 0 0 0 1vw; color: #000; font-size: 0.85vw; line-height: 1.5vw; border-left: 5px #000 solid; box-sizing: border-box;}


  /************ section #sec-timefortaoyuan ************/

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

  img.sec-timefortaoyuan-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  img.sec-timefortaoyuan-bg-mo { display: none;}
  img.sec-timefortaoyuan-shinny { width: 68vw; height: auto; position: absolute; top: 2vw; left: calc(50% - 34vw); z-index: 2;}

  .sec-timefortaoyuan-title-mo { display: none;}
  .sec-timefortaoyuan-title { width: 100%; color: #fff; font-size: 4.4vw; font-weight: 900; letter-spacing: 0.1em; text-align: center; position: absolute; top: 14vw; left: 0; z-index: 3;}

  .sec-timefortaoyuan-title-line { width: 1px; height: 6vw; background-color: rgba(255,255,255,0.8); display: block; position: absolute; top: 22.5vw; left: 50%; z-index: 3;}

  .sec-timefortaoyuan-intro-text { width: 100%; color: #fff; text-align: center; position: absolute; top: 30.5vw; left: 0; z-index: 3;}
  .sec-timefortaoyuan-intro-text .text-1-mo { display: none;}
  .sec-timefortaoyuan-intro-text .text-1 { width: 42vw; padding: 0 0 1vw 0; margin: 0 auto; font-size: 2.2vw; font-weight: 700; letter-spacing: 0.1em; text-align: center; border-bottom: 1px rgba(255,255,255,0.8) solid;}
  .sec-timefortaoyuan-intro-text .text-2-mo { display: none;}
  .sec-timefortaoyuan-intro-text .text-2 { width: 42vw; padding: 1vw 0 0 0; margin: 0 auto; font-size: 1vw; line-height: 2vw; text-align: center;}

  .sec-timefortaoyuan-location-photo { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; position: absolute; top: 46vw; left: 0; z-index: 3;}
  .sec-timefortaoyuan-location-photo .col-lf-location { width: 50%; padding: 0 6vw 0 9vw; box-sizing: border-box;}
  .sec-timefortaoyuan-location-photo .col-lf-location img.location-list { width: 100%; height: auto;}
  .sec-timefortaoyuan-location-photo .col-lf-location img.location-list-mo { display: none;}
  .sec-timefortaoyuan-location-photo .col-rt-photo { width: 50%; padding: 0 9vw 0 1vw; box-sizing: border-box;}
  .sec-timefortaoyuan-location-photo .col-rt-photo div { position: relative;}
  .sec-timefortaoyuan-location-photo .col-rt-photo div img.photo { width: 100%; height: auto; position: relative; z-index: 1;}
  .sec-timefortaoyuan-location-photo .col-rt-photo div .caption { width: 100%; color: #fff; font-size: 0.8vw; font-weight: 300; text-align: right; padding: 0 0 0 0; box-sizing: border-box; position: absolute; bottom: 0.5vw; right: 0.8vw; z-index: 2;}

  .sec-timefortaoyuan-intro-text-2 { width: 100%; color: #fff; text-align: center; position: absolute; top: 100vw; left: 0; z-index: 3;}
  .sec-timefortaoyuan-intro-text-2 .text-1-mo { display: none;}
  .sec-timefortaoyuan-intro-text-2 .text-1 { width: 42vw; margin: 0 auto; font-size: 2.2vw; font-weight: 700; letter-spacing: 0.1em; text-align: center;}
  .sec-timefortaoyuan-intro-text-2 .v-line { clear: both; width: 1px; height: 7vw; margin: 2vw auto 0 auto; background-color: rgba(255,255,255,0.8); display: block;}


  /************ section #sec-photos-3d ************/

  section#sec-photos-3d { clear: both; width: 100%; padding: 0; margin: 0; position: relative; overflow: hidden;}

  .sec-photos-3d-slide { clear: both; width: 100%; overflow: hidden;}
  .sec-photos-3d-slide img.photo { width: 100%; height: auto;}


  /************ section #sec-traffic ************/

  section#sec-traffic { clear: both; width: 100%; height: 100%; display: flex; align-items: center; position: relative;}

  section#sec-traffic .sec-traffic-bg { z-index: -1; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-image: url('../images/sec_traffic_bg.jpg'); background-repeat: no-repeat; background-attachment: scroll;}

  .sec-traffic-title-intro { width: 100%;}
  .sec-traffic-title-intro .title-text-mo { display: none;}
  .sec-traffic-title-intro .title-text { width: 100%; color: #fff; font-size: 3.7vw; font-weight: 700; letter-spacing: 0.1em; text-align: center;}
  .sec-traffic-title-intro .v-line { clear: both; width: 1px; height: 4vw; margin: 1.5vw auto; background-color: rgba(255,255,255,0.8); display: block;}
  .sec-traffic-title-intro .intro-text-mo { display: none;}
  .sec-traffic-title-intro .intro-text { clear: both; width: 100%; color: #fff; font-size: 1vw; line-height: 2vw; text-align: center;}


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

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

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


  /************ section #sec-environment ************/

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

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

  .sec-environment-hospital-park { clear: both; width: 100%; padding: 9vw 15vw; box-sizing: border-box; background-image: url("../images/sec_environment_bg.jpg"); background-repeat: repeat; display: flex; justify-content: flex-start; align-items: flex-start;}
  .sec-environment-hospital-park .col-lf-text { width: 45%; padding: 6vw 6vw 0 0; box-sizing: border-box;}
  .sec-environment-hospital-park .col-lf-text .text-1 { width: 100%; padding: 0 0 1vw 0; margin: 0 auto; font-size: 2.2vw; font-weight: 700; letter-spacing: 0.1em; border-bottom: 1px rgba(0,0,0,0.8) solid;}
  .sec-environment-hospital-park .col-lf-text .text-2 { width: 100%; padding: 1vw 0 0 0; margin: 0 auto; font-size: 1vw; line-height: 2vw;}
  .sec-environment-hospital-park .col-rt-photo-mo { display: none;}
  .sec-environment-hospital-park .col-rt-photo { width: 55%; padding: 0 0 0 0; box-sizing: border-box;}
  .sec-environment-hospital-park .col-rt-photo img { width: 100%; height: auto;}


  /************ section #sec-greening2 ************/

  section#sec-greening2 { clear: both; width: 100%; height: 100%; padding: 0; background-image: url('../images/sec_greening2_bg.jpg'); background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-attachment: fixed; display: flex; align-items: center; position: relative;}

  section#sec-greening2 .sec-greening2-bg { display: none;}

  .sec-greening2-title-intro { width: 100%; position: relative; z-index: 2;}
  .sec-greening2-title-intro .title-text-mo { display: none;}
  .sec-greening2-title-intro .title-text { width: 100%; color: #fff; font-size: 3.7vw; font-weight: 700; letter-spacing: 0.1em; text-align: center;}
  .sec-greening2-title-intro .v-line { clear: both; width: 1px; height: 4vw; margin: 1.5vw auto; background-color: rgba(255,255,255,0.8); display: block;}
  .sec-greening2-title-intro .intro-text-b { clear: both; width: 100%; padding: 0 0 1vw 0; color: #fff; font-size: 1.8vw; line-height: 2.2vw; text-align: center;}
  .sec-greening2-title-intro .intro-text { clear: both; width: 100%; color: #fff; font-size: 1vw; line-height: 2vw; text-align: center;}


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

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

  .sec-bookstore-text-con { width: 22vw; position: absolute; top: 5vw; left: calc(50% - 11vw); z-index: 2;}
  .sec-bookstore-text-con .title-text { width: 100%; color: #fff; font-size: 2.1vw; font-weight: 700; text-align: center;}
  .sec-bookstore-text-con .intro-text { width: 100%; margin: 0.6vw 0 0 0; display: flex; justify-content: center; align-items: center;}
  .sec-bookstore-text-con .intro-text .h-line { width: calc(100% - 7vw); height: 1px; background-color: rgba(255,255,255,0.8); display: block;}
  .sec-bookstore-text-con .intro-text .text { width: 7vw; color: #fff; font-size: 1vw; line-height: 1vw; text-align: right;}


  /************ section #sec-contact ************/

  section#sec-contact { clear: both; width: 100%; padding: 140px calc(50% - 660px); box-sizing: border-box; background-color: #181818; display: flex; justify-content: flex-start; align-items: flex-start;}

  .contact-col-lf { width: calc(100% - 770px); padding: 0 50px 50px 50px; box-sizing: border-box;}
  .contact-col-lf img.logo-title { width: 212px; height: auto; margin: 0 0 70px 0;}
  .contact-col-lf .text-con { width: 100%; color: #d9d8d6; font-size: 1.1rem; line-height: 2em;}

  .contact-col-rt { width: 770px; padding: 50px; box-sizing: border-box; background-color: #fff;}
  .contact-col-rt .title-text { width: 100%; font-size: 3rem; font-weight: 300;}
  .contact-col-rt .title-text-small { width: 100%; padding: 20px 0 50px 0; font-size: 1.1rem;}
  .contact-col-rt .form-caption { width: 100%; padding: 10px 0; font-size: 1.1rem; font-weight: 600;}
  .contact-col-rt .form-column { width: 100%; margin: 0 0 20px 0;}
  .contact-col-rt .form-column input, 
  .contact-col-rt .form-column select { width: 100%; padding: 10px; margin: 0 0 5px 0; color: #414141; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #ccc; box-sizing: border-box;}
  .contact-col-rt input[type=button] { padding: 15px 40px; margin: 40px 0 0 0; color: #fff; font-size: 1.1rem; font-weight: 600; line-height: 1em; background-color: #000; cursor: pointer;}
  .contact-col-rt input[type=button]:hover { color: #fff; background-color: #000;}


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

  footer { clear: both; width: 100%; padding: 40px calc(50% - 660px); box-sizing: border-box; border-top: 1px #fff solid; background-color: #0b0c17;}

  .footer-tel { width: 100%; color: #fff; font-size: 1.4rem; font-weight: 500; letter-spacing: 0.1em; display: flex; justify-content: center; align-items: center;}
  .footer-tel img.icon { width: 35px; height: auto; margin: 0 15px 0 0;}
  .footer-tel a { color: #fff; text-decoration: none;}
  .footer-copyright { width: 100%; padding: 20px 0 0 0; color: #ababab; font-size: 1rem; text-align: center;}


}

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

  section#index-pic-box { clear: both; width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden;}

  section#index-pic-box img.index-pic { width: 100%; height: auto;}
  section#index-pic-box img.index-pic-mo { display: none;}


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

  header { clear: both; width: 100%; height: 110px; padding: 0 8vw; box-sizing: border-box; background-color: rgba(255,255,255,0.9); display: flex; justify-content: flex-start; align-items: center; position: fixed; top: 0; left: 0; z-index: 99;}

  .logo-bx { width: 300px;}
  .logo-bx img { width: 220px; height: auto;}

  nav#mo { display: none;}

  nav#pc { width: calc(100% - 300px);}
  nav#pc ul.nav-menu { padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  nav#pc ul.nav-menu li { padding: 0; margin: 0; border-right: 1px #414141 solid;}
  nav#pc ul.nav-menu li:last-child { border-right: 0;}
  nav#pc ul.nav-menu li a { padding: 10px 30px; color: #414141; font-size: 1.1rem; line-height: 1em; text-decoration: none; display: block;}
  nav#pc ul.nav-menu li a:hover { color: #dab7ba;}


  /************ banner ************/

  .top-banner-box { clear: both; width: 100%; margin: 110px 0 0 0; overflow: hidden; position: relative; z-index: 1;}
  .top-banner-box img.banner-mo { display: none;}
  .top-banner-box img.banner-title { width: 29vw; height: auto; position: absolute; top: 3vw; left: calc(50% - 14.5vw); z-index: 2;}
  .top-banner-box img.banner-text { width: 26vw; height: auto; position: absolute; top: 22vw; left: calc(50% - 13vw); z-index: 2;}
  .top-banner-box img.banner-pc { width: 100%; height: auto; position: relative; z-index: 1;}


  /************ section #sec-greening ************/

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

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

  .sec-greening-content { width: 100%; padding: 6vw 8vw 0 8vw; box-sizing: border-box; position: absolute; top: 0; left: 0; z-index: 2;}
  .sec-greening-content .top-title { width: 100%; padding: 0 0 1.5vw 0; color: #4CA474; font-size: 5vw; font-weight: 700; text-align: center;}
  .sec-greening-content .top-text { width: 100%; display: flex; justify-content: center; align-items: center;}
  .sec-greening-content .top-text .col-left-mo { display: none;}
  .sec-greening-content .top-text .col-left { width: 50%; padding: 0 1vw 0 0; box-sizing: border-box; color: #000; font-size: 2.2vw; font-weight: 600; letter-spacing: 0.1em; text-align: right;}
  .sec-greening-content .top-text .col-right { width: 50%; padding: 0 0 0 1vw; color: #000; font-size: 0.85vw; line-height: 1.5vw; border-left: 5px #000 solid; box-sizing: border-box;}


  /************ section #sec-timefortaoyuan ************/

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

  img.sec-timefortaoyuan-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  img.sec-timefortaoyuan-bg-mo { display: none;}
  img.sec-timefortaoyuan-shinny { width: 68vw; height: auto; position: absolute; top: 2vw; left: calc(50% - 34vw); z-index: 2;}

  .sec-timefortaoyuan-title-mo { display: none;}
  .sec-timefortaoyuan-title { width: 100%; color: #fff; font-size: 4.4vw; font-weight: 900; letter-spacing: 0.1em; text-align: center; position: absolute; top: 14vw; left: 0; z-index: 3;}

  .sec-timefortaoyuan-title-line { width: 1px; height: 6vw; background-color: rgba(255,255,255,0.8); display: block; position: absolute; top: 22.5vw; left: 50%; z-index: 3;}

  .sec-timefortaoyuan-intro-text { width: 100%; color: #fff; text-align: center; position: absolute; top: 30.5vw; left: 0; z-index: 3;}
  .sec-timefortaoyuan-intro-text .text-1-mo { display: none;}
  .sec-timefortaoyuan-intro-text .text-1 { width: 42vw; padding: 0 0 1vw 0; margin: 0 auto; font-size: 2.2vw; font-weight: 700; letter-spacing: 0.1em; text-align: center; border-bottom: 1px rgba(255,255,255,0.8) solid;}
  .sec-timefortaoyuan-intro-text .text-2-mo { display: none;}
  .sec-timefortaoyuan-intro-text .text-2 { width: 42vw; padding: 1vw 0 0 0; margin: 0 auto; font-size: 1vw; line-height: 2vw; text-align: center;}

  .sec-timefortaoyuan-location-photo { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; position: absolute; top: 46vw; left: 0; z-index: 3;}
  .sec-timefortaoyuan-location-photo .col-lf-location { width: 50%; padding: 0 6vw 0 9vw; box-sizing: border-box;}
  .sec-timefortaoyuan-location-photo .col-lf-location img.location-list { width: 100%; height: auto;}
  .sec-timefortaoyuan-location-photo .col-lf-location img.location-list-mo { display: none;}
  .sec-timefortaoyuan-location-photo .col-rt-photo { width: 50%; padding: 0 9vw 0 1vw; box-sizing: border-box;}
  .sec-timefortaoyuan-location-photo .col-rt-photo div { position: relative;}
  .sec-timefortaoyuan-location-photo .col-rt-photo div img.photo { width: 100%; height: auto; position: relative; z-index: 1;}
  .sec-timefortaoyuan-location-photo .col-rt-photo div .caption { width: 100%; color: #fff; font-size: 0.8vw; font-weight: 300; text-align: right; padding: 0 0 0 0; box-sizing: border-box; position: absolute; bottom: 0.5vw; right: 0.8vw; z-index: 2;}

  .sec-timefortaoyuan-intro-text-2 { width: 100%; color: #fff; text-align: center; position: absolute; top: 100vw; left: 0; z-index: 3;}
  .sec-timefortaoyuan-intro-text-2 .text-1-mo { display: none;}
  .sec-timefortaoyuan-intro-text-2 .text-1 { width: 42vw; margin: 0 auto; font-size: 2.2vw; font-weight: 700; letter-spacing: 0.1em; text-align: center;}
  .sec-timefortaoyuan-intro-text-2 .v-line { clear: both; width: 1px; height: 7vw; margin: 2vw auto 0 auto; background-color: rgba(255,255,255,0.8); display: block;}


  /************ section #sec-photos-3d ************/

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

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


  /************ section #sec-traffic ************/

  section#sec-traffic { clear: both; width: 100%; height: 100%; display: flex; align-items: center; position: relative;}

  section#sec-traffic .sec-traffic-bg { z-index: -1; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-image: url('../images/sec_traffic_bg.jpg'); background-repeat: no-repeat; background-attachment: scroll;}

  .sec-traffic-title-intro { width: 100%;}
  .sec-traffic-title-intro .title-text-mo { display: none;}
  .sec-traffic-title-intro .title-text { width: 100%; color: #fff; font-size: 3.7vw; font-weight: 700; letter-spacing: 0.1em; text-align: center;}
  .sec-traffic-title-intro .v-line { clear: both; width: 1px; height: 4vw; margin: 1.5vw auto; background-color: rgba(255,255,255,0.8); display: block;}
  .sec-traffic-title-intro .intro-text-mo { display: none;}
  .sec-traffic-title-intro .intro-text { clear: both; width: 100%; color: #fff; font-size: 1vw; line-height: 2vw; text-align: center;}


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

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

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


  /************ section #sec-environment ************/

  section#sec-environment { clear: both; width: 100%; padding: 0;}

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

  .sec-environment-hospital-park { clear: both; width: 100%; padding: 9vw 15vw; box-sizing: border-box; background-image: url("../images/sec_environment_bg.jpg"); background-repeat: repeat; display: flex; justify-content: flex-start; align-items: flex-start;}
  .sec-environment-hospital-park .col-lf-text { width: 45%; padding: 6vw 6vw 0 0; box-sizing: border-box;}
  .sec-environment-hospital-park .col-lf-text .text-1 { width: 100%; padding: 0 0 1vw 0; margin: 0 auto; font-size: 2.2vw; font-weight: 700; letter-spacing: 0.1em; border-bottom: 1px rgba(0,0,0,0.8) solid;}
  .sec-environment-hospital-park .col-lf-text .text-2 { width: 100%; padding: 1vw 0 0 0; margin: 0 auto; font-size: 1vw; line-height: 2vw;}
  .sec-environment-hospital-park .col-rt-photo-mo { display: none;}
  .sec-environment-hospital-park .col-rt-photo { width: 55%; padding: 0 0 0 0; box-sizing: border-box;}
  .sec-environment-hospital-park .col-rt-photo img { width: 100%; height: auto;}


  /************ section #sec-greening2 ************/

  section#sec-greening2 { clear: both; width: 100%; height: 100%; padding: 0; background-image: url("../images/sec_greening2_bg.jpg"); background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-attachment: fixed; display: flex; align-items: center;}

  section#sec-greening2 .sec-greening2-bg { display: none;}

  .sec-greening2-title-intro { width: 100%;}
  .sec-greening2-title-intro .title-text-mo { display: none;}
  .sec-greening2-title-intro .title-text { width: 100%; color: #fff; font-size: 3.7vw; font-weight: 700; letter-spacing: 0.1em; text-align: center;}
  .sec-greening2-title-intro .v-line { clear: both; width: 1px; height: 4vw; margin: 1.5vw auto; background-color: rgba(255,255,255,0.8); display: block;}
  .sec-greening2-title-intro .intro-text-b { clear: both; width: 100%; padding: 0 0 1vw 0; color: #fff; font-size: 1.8vw; line-height: 2.2vw; text-align: center;}
  .sec-greening2-title-intro .intro-text { clear: both; width: 100%; color: #fff; font-size: 1vw; line-height: 2vw; text-align: center;}


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

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

  .sec-bookstore-text-con { width: 22vw; position: absolute; top: 5vw; left: calc(50% - 11vw); z-index: 2;}
  .sec-bookstore-text-con .title-text { width: 100%; color: #fff; font-size: 2.1vw; font-weight: 700; text-align: center;}
  .sec-bookstore-text-con .intro-text { width: 100%; margin: 0.6vw 0 0 0; display: flex; justify-content: center; align-items: center;}
  .sec-bookstore-text-con .intro-text .h-line { width: calc(100% - 7vw); height: 1px; background-color: rgba(255,255,255,0.8); display: block;}
  .sec-bookstore-text-con .intro-text .text { width: 7vw; color: #fff; font-size: 1vw; line-height: 1vw; text-align: right;}


  /************ section #sec-contact ************/

  section#sec-contact { clear: both; width: 100%; padding: 140px calc(50% - 480px); box-sizing: border-box; background-color: #181818; display: flex; justify-content: flex-start; align-items: flex-start;}

  .contact-col-lf { width: calc(100% - 500px); padding: 0 50px 50px 50px; box-sizing: border-box;}
  .contact-col-lf img.logo-title { width: 212px; height: auto; margin: 0 0 70px 0;}
  .contact-col-lf .text-con { width: 100%; color: #d9d8d6; font-size: 1.1rem; line-height: 2em;}

  .contact-col-rt { width: 500px; padding: 50px; box-sizing: border-box; background-color: #fff;}
  .contact-col-rt .title-text { width: 100%; font-size: 3rem; font-weight: 300;}
  .contact-col-rt .title-text-small { width: 100%; padding: 20px 0 50px 0; font-size: 1.1rem;}
  .contact-col-rt .form-caption { width: 100%; padding: 10px 0; font-size: 1.1rem; font-weight: 600;}
  .contact-col-rt .form-column { width: 100%; margin: 0 0 20px 0;}
  .contact-col-rt .form-column input, 
  .contact-col-rt .form-column select { width: 100%; padding: 10px; margin: 0 0 5px 0; color: #414141; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #ccc; box-sizing: border-box;}
  .contact-col-rt input[type=button] { padding: 15px 40px; margin: 40px 0 0 0; color: #fff; font-size: 1.1rem; font-weight: 600; line-height: 1em; background-color: #000; cursor: pointer;}
  .contact-col-rt input[type=button]:hover { color: #fff; background-color: #000;}


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

  footer { clear: both; width: 100%; padding: 40px calc(50% - 480px); box-sizing: border-box; border-top: 1px #fff solid; background-color: #0b0c17;}

  .footer-tel { width: 100%; color: #fff; font-size: 1.4rem; font-weight: 500; letter-spacing: 0.1em; display: flex; justify-content: center; align-items: center;}
  .footer-tel img.icon { width: 35px; height: auto; margin: 0 15px 0 0;}
  .footer-tel a { color: #fff; text-decoration: none;}
  .footer-copyright { width: 100%; padding: 20px 0 0 0; color: #ababab; font-size: 1rem; text-align: center;}


}

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

  section#index-pic-box { clear: both; width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden;}

  section#index-pic-box img.index-pic { width: 100%; height: auto;}
  section#index-pic-box img.index-pic-mo { display: none;}


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

  header { clear: both; width: 100%; height: 110px; padding: 0 40px; box-sizing: border-box; background-color: rgba(255,255,255,0.9); display: flex; justify-content: flex-start; align-items: center; position: fixed; top: 0; left: 0; z-index: 99;}

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

  nav#mo { display: none;}

  nav#pc { width: calc(100% - 220px);}
  nav#pc ul.nav-menu { padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  nav#pc ul.nav-menu li { padding: 0; margin: 0; border-right: 1px #414141 solid;}
  nav#pc ul.nav-menu li:last-child { border-right: 0;}
  nav#pc ul.nav-menu li a { padding: 10px 20px; color: #414141; font-size: 1.1rem; line-height: 1em; text-decoration: none; display: block;}
  nav#pc ul.nav-menu li a:hover { color: #dab7ba;}


  /************ banner ************/

  .top-banner-box { clear: both; width: 100%; margin: 110px 0 0 0; overflow: hidden; position: relative; z-index: 1;}
  .top-banner-box img.banner-mo { display: none;}
  .top-banner-box img.banner-title { width: 40vw; height: auto; position: absolute; top: 8vw; left: calc(50% - 20vw); z-index: 2;}
  .top-banner-box img.banner-text { width: 36vw; height: auto; position: absolute; top: 34vw; left: calc(50% - 18vw); z-index: 2;}
  .top-banner-box img.banner-pc { width: 160%; height: auto; margin: 0 0 0 -30%; position: relative; z-index: 1;}
  

  /************ section #sec-greening ************/

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

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


  /************ section #sec-photos-3d ************/

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

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


  /************ section #sec-traffic ************/

  section#sec-traffic { clear: both; width: 100%; height: 100%; display: flex; align-items: center; position: relative;}

  section#sec-traffic .sec-traffic-bg { z-index: -1; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-image: url('../images/sec_traffic_bg.jpg'); background-repeat: no-repeat; background-attachment: scroll;}

  .sec-traffic-title-intro { width: 100%;}
  .sec-traffic-title-intro .title-text-mo { display: none;}
  .sec-traffic-title-intro .title-text { width: 100%; color: #fff; font-size: 5.2vw; font-weight: 700; letter-spacing: 0.1em; text-align: center;}
  .sec-traffic-title-intro .v-line { clear: both; width: 1px; height: 8vw; margin: 2vw auto; background-color: rgba(255,255,255,0.8); display: block;}
  .sec-traffic-title-intro .intro-text-mo { display: none;}
  .sec-traffic-title-intro .intro-text { clear: both; width: 100%; color: #fff; font-size: 2vw; line-height: 4vw; text-align: center;}


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

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

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


  /************ section #sec-environment ************/

  section#sec-environment { clear: both; width: 100%; padding: 0;}

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

  .sec-environment-hospital-park { clear: both; width: 100%; padding: 15vw 0; box-sizing: border-box; background-image: url("../images/sec_environment_bg.jpg"); background-repeat: repeat;}
  .sec-environment-hospital-park .col-lf-text { width: 70%; margin: 0 auto 5vw auto;}
  .sec-environment-hospital-park .col-lf-text .text-1 { width: 100%; padding: 0 0 2vw 0; margin: 0 auto; font-size: 3.6vw; font-weight: 700; letter-spacing: 0.1em; border-bottom: 1px rgba(0,0,0,0.8) solid;}
  .sec-environment-hospital-park .col-lf-text .text-2 { width: 100%; padding: 2vw 0 0 0; margin: 0 auto; font-size: 1.8vw; line-height: 3.4vw;}
  .sec-environment-hospital-park .col-rt-photo-mo { display: none;}
  .sec-environment-hospital-park .col-rt-photo { width: 70%; margin: 0 auto;}
  .sec-environment-hospital-park .col-rt-photo img { width: 100%; height: auto;}


  /************ section #sec-greening2 ************/

  section#sec-greening2 { clear: both; width: 100%; height: 100%; padding: 0; background-image: url("../images/sec_greening2_bg.jpg"); background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-attachment: fixed; display: flex; align-items: center;}

  section#sec-greening2 .sec-greening2-bg { display: none;}

  .sec-greening2-title-intro { width: 100%;}
  .sec-greening2-title-intro .title-text-mo { display: none;}
  .sec-greening2-title-intro .title-text { width: 100%; color: #fff; font-size: 5.2vw; font-weight: 700; letter-spacing: 0.1em; text-align: center;}
  .sec-greening2-title-intro .v-line { clear: both; width: 1px; height: 8vw; margin: 2vw auto; background-color: rgba(255,255,255,0.8); display: block;}
  .sec-greening2-title-intro .intro-text-b { clear: both; width: 100%; padding: 0 0 2vw 0; color: #fff; font-size: 3vw; line-height: 4.2vw; text-align: center;}
  .sec-greening2-title-intro .intro-text { clear: both; width: 100%; color: #fff; font-size: 2vw; line-height: 4vw; text-align: center;}


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

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

  .sec-bookstore-text-con { width: 42.5vw; position: absolute; top: 7vw; left: calc(50% - 21.25vw); z-index: 2;}
  .sec-bookstore-text-con .title-text { width: 100%; color: #fff; font-size: 4vw; font-weight: 700; text-align: center;}
  .sec-bookstore-text-con .intro-text { width: 100%; margin: 1vw 0 0 0; display: flex; justify-content: center; align-items: center;}
  .sec-bookstore-text-con .intro-text .h-line { width: calc(100% - 14vw); height: 1px; background-color: rgba(255,255,255,0.8); display: block;}
  .sec-bookstore-text-con .intro-text .text { width: 14vw; color: #fff; font-size: 2vw; line-height: 1.8vw; text-align: right;}


  /************ section #sec-contact ************/

  section#sec-contact { clear: both; width: 100%; padding: 140px 40px; box-sizing: border-box; background-color: #181818;}

  .contact-col-lf { width: 100%; padding: 0 50px 80px 50px; box-sizing: border-box; box-sizing: border-box;}
  .contact-col-lf img.logo-title { width: 212px; height: auto; margin: 0 0 70px 0;}
  .contact-col-lf .text-con { width: 100%; color: #d9d8d6; font-size: 1.1rem; line-height: 2em;}

  .contact-col-rt { width: 100%; padding: 50px; box-sizing: border-box; background-color: #fff;}
  .contact-col-rt .title-text { width: 100%; font-size: 3rem; font-weight: 300;}
  .contact-col-rt .title-text-small { width: 100%; padding: 20px 0 50px 0; font-size: 1.1rem;}
  .contact-col-rt .form-caption { width: 100%; padding: 10px 0; font-size: 1.1rem; font-weight: 600;}
  .contact-col-rt .form-column { width: 100%; margin: 0 0 20px 0;}
  .contact-col-rt .form-column input, 
  .contact-col-rt .form-column select { width: 100%; padding: 10px; margin: 0 0 5px 0; color: #414141; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #ccc; box-sizing: border-box;}
  .contact-col-rt input[type=button] { padding: 15px 40px; margin: 40px 0 0 0; color: #fff; font-size: 1.1rem; font-weight: 600; line-height: 1em; background-color: #000; cursor: pointer;}
  .contact-col-rt input[type=button]:hover { color: #fff; background-color: #000;}


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

  footer { clear: both; width: 100%; padding: 40px 40px; box-sizing: border-box; border-top: 1px #fff solid; background-color: #0b0c17;}

  .footer-tel { width: 100%; color: #fff; font-size: 1.4rem; font-weight: 500; letter-spacing: 0.1em; display: flex; justify-content: center; align-items: center;}
  .footer-tel img.icon { width: 35px; height: auto; margin: 0 15px 0 0;}
  .footer-tel a { color: #fff; text-decoration: none;}
  .footer-copyright { width: 100%; padding: 20px 0 0 0; color: #ababab; font-size: 1rem; text-align: center;}


}

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

  section#index-pic-box { clear: both; width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden; display: flex; justify-content: center; position: relative; z-index: 2;}

  section#index-pic-box img.index-pic { display: none;}
  section#index-pic-box img.index-pic-mo { width: 100%; height: auto;}


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

  header { clear: both; width: 100%; height: 80px; padding: 0 20px; box-sizing: border-box; background-color: rgba(255,255,255,0.9); display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index: 99;}

  .logo-bx { width: 160px;}
  .logo-bx img { width: 100%; height: auto; margin: 0 auto;}

  nav#pc { display: none;}

  nav#mo { width: 100%; position: fixed; bottom: 0; left: 0; z-index: 9999;}
  nav#mo ul.nav-menu { width: 100%; padding: 10px 0; margin: 0; background-color: #ce5959; list-style: none; display: flex; justify-content: center; align-items: center;}
  nav#mo ul.nav-menu li { width: calc(100% / 4); padding: 0; margin: 0; border-right: 1px #ccc solid; box-sizing: border-box;}
  nav#mo ul.nav-menu li:last-child { border-right: 0;}
  nav#mo ul.nav-menu li a { width: 100%; padding: 10px 0; text-decoration: none; display: flex; justify-content: center; align-items: center;}
  nav#mo ul.nav-menu li a img.icon { width: 9vw; height: auto;}


  /************ banner ************/

  .top-banner-box { clear: both; width: 100%; margin: 80px 0 0 0; overflow: hidden; position: relative; z-index: 2;}
  .top-banner-box img.banner-pc { display: none;}
  .top-banner-box img.banner-title { width: 70vw; height: auto; position: absolute; top: 20vw; left: calc(50% - 35vw); z-index: 2;}
  .top-banner-box img.banner-text { width: 60vw; height: auto; position: absolute; top: 70vw; left: calc(50% - 30vw); z-index: 2;}
  .top-banner-box img.banner-mo { width: 100%; height: auto; position: relative; z-index: 1;}


  /************ section #sec-greening ************/

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

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


  /************ section #sec-photos-3d ************/

  section#sec-photos-3d { clear: both; width: 100%; padding: 0; position: relative; z-index: 2;}

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


  /************ section #sec-traffic ************/

  section#sec-traffic { clear: both; width: 100%; height: 100%; display: flex; align-items: center; position: relative; z-index: 1;}

  section#sec-traffic .sec-traffic-bg { z-index: -1; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-image: url('../images/sec_traffic_bg_mo.jpg'); background-repeat: no-repeat; background-attachment: scroll;}

  .sec-traffic-title-intro { width: 100%; position: relative; z-index: 2;}
  .sec-traffic-title-intro .title-text { display: none;}
  .sec-traffic-title-intro .title-text-mo { width: 100%; color: #fff; font-size: 10vw; font-weight: 700; letter-spacing: 0.1em; text-align: center;}
  .sec-traffic-title-intro .v-line { clear: both; width: 1px; height: 12vw; margin: 6vw auto; background-color: rgba(255,255,255,0.8); display: block;}
  .sec-traffic-title-intro .intro-text { display: none;}
  .sec-traffic-title-intro .intro-text-mo { clear: both; width: 80%; margin: 0 auto; color: #fff; font-size: 3.2vw; line-height: 7vw;}


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

  section#sec-environment-1 { clear: both; width: 100%; padding: 0; margin: -5px 0 0 0; position: relative; z-index: 2;}

  .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: 160vw; position: relative; z-index: 1;}


  /************ section #sec-environment ************/

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

  .sec-environment-hospital-park { clear: both; width: 100%; padding: 25vw 0; box-sizing: border-box; background-image: url("../images/sec_environment_bg.jpg"); background-repeat: repeat;}
  .sec-environment-hospital-park .col-lf-text { width: 90%; margin: 0 auto 5vw auto;}
  .sec-environment-hospital-park .col-lf-text .text-1 { width: 100%; padding: 0 0 2vw 0; margin: 0 auto; font-size: 6vw; font-weight: 700; letter-spacing: 0.1em; border-bottom: 1px rgba(0,0,0,0.8) solid;}
  .sec-environment-hospital-park .col-lf-text .text-2 { width: 100%; padding: 2vw 0 0 0; margin: 0 auto; font-size: 3.4vw; line-height: 6vw;}
  .sec-environment-hospital-park .col-rt-photo { display: none;}
  .sec-environment-hospital-park .col-rt-photo-mo { width: 100%; margin: 10vw auto 0 auto;}
  .sec-environment-hospital-park .col-rt-photo-mo img.photo { width: 100%; height: auto;}


  /************ section #sec-greening2 ************/

  section#sec-greening2 { clear: both; width: 100%; height: 100%; padding: 0; display: flex; align-items: center; position: relative; z-index: 2;}

  section#sec-greening2 .sec-greening2-bg { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 1;}
  section#sec-greening2 .sec-greening2-bg img { width: 100%; height: auto;}
  
  .sec-greening2-title-intro { width: 100%; position: relative; z-index: 2;}
  .sec-greening2-title-intro .title-text { display: none;}
  .sec-greening2-title-intro .title-text-mo { width: 100%; color: #fff; font-size: 10vw; font-weight: 700; letter-spacing: 0.1em; text-align: center;}
  .sec-greening2-title-intro .v-line { clear: both; width: 1px; height: 12vw; margin: 6vw auto; background-color: rgba(255,255,255,0.8); display: block;}
  .sec-greening2-title-intro .intro-text-b { clear: both; width: 100%; padding: 0 0 4vw 0; color: #fff; font-size: 5vw; line-height: 7vw; text-align: center;}
  .sec-greening2-title-intro .intro-text { clear: both; width: 100%; color: #fff; font-size: 3.2vw; line-height: 7vw; text-align: center;}


  /************ section #sec-bookstore ************/
  
  section#sec-bookstore { clear: both; width: 100%; padding: 0; position: relative; z-index: 2;}

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

  .sec-bookstore-text-con { width: 100%; position: absolute; top: 18vw; left: 0; z-index: 2;}
  .sec-bookstore-text-con .title-text { width: 100%; color: #fff; font-size: 7vw; font-weight: 700; text-align: center;}
  .sec-bookstore-text-con .intro-text { width: 100%; margin: 4vw 0 0 0;}
  .sec-bookstore-text-con .intro-text .h-line { display: none;}
  .sec-bookstore-text-con .intro-text .text { width: 100%; color: #fff; font-size: 5vw; line-height: 1.8vw; text-align: center;}


  /************ section #sec-contact ************/

  section#sec-contact { clear: both; width: 100%; padding: 0; background-color: #181818; position: relative; z-index: 2;}

  .contact-col-lf { width: 100%; padding: 100px 40px; box-sizing: border-box; box-sizing: border-box;}
  .contact-col-lf img.logo-title { width: 34vw; height: auto; margin: 0 0 70px 0;}
  .contact-col-lf .text-con { width: 100%; color: #d9d8d6; font-size: 1.1rem; line-height: 2em;}

  .contact-col-rt { clear: both; width: 100%; padding: 100px 40px; box-sizing: border-box; background-color: #fff;}
  .contact-col-rt .title-text { width: 100%; font-size: 3rem; font-weight: 300;}
  .contact-col-rt .title-text-small { width: 100%; padding: 20px 0 50px 0; font-size: 1.1rem;}
  .contact-col-rt .form-caption { width: 100%; padding: 10px 0; font-size: 1.1rem; font-weight: 600;}
  .contact-col-rt .form-column { width: 100%; margin: 0 0 20px 0;}
  .contact-col-rt .form-column input, 
  .contact-col-rt .form-column select { width: 100%; padding: 10px; margin: 0 0 5px 0; color: #414141; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #ccc; box-sizing: border-box;}
  .contact-col-rt input[type=button] { padding: 15px 40px; margin: 40px 0 0 0; color: #fff; font-size: 1.1rem; font-weight: 600; line-height: 1em; background-color: #000; cursor: pointer;}
  .contact-col-rt input[type=button]:hover { color: #fff; background-color: #000;}


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

  footer { clear: both; width: 100%; padding: 40px 20px; box-sizing: border-box; background-color: #0b0c17; position: relative; z-index: 2;}

  .footer-tel { width: 100%; color: #fff; font-size: 1.4rem; font-weight: 500; letter-spacing: 0.1em; display: flex; justify-content: center; align-items: center;}
  .footer-tel img.icon { width: 35px; height: auto; margin: 0 15px 0 0;}
  .footer-tel a { color: #fff; text-decoration: none;}
  .footer-copyright { width: 100%; padding: 20px 0 calc(20px + 9vw + 20px) 0; color: #ababab; font-size: 1rem; text-align: center;}
  

}