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

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

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

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

  header { clear: both; width: 100%; height: 95px; padding: 0 4vw; box-sizing: border-box; background-color: #000d39; display: flex; justify-content: flex-start; align-items: center; position: fixed; top: 0; left: 0; z-index: 99;}

  .logo-bx { width: 120px;}
  .logo-bx img { width: 100%; height: auto;}

  nav#mo { display: none;}

  nav#pc { width: calc(100% - 120px);}
  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 40px; margin: 0; border-right: 1px #fbd7b5 solid;}
  nav#pc ul.nav-menu li:last-child { border-right: 0;}
  nav#pc ul.nav-menu li img.nav-icon { width: auto; height: 18px;}


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

  section#sec-1-con { clear: both; width: 100%; padding: 95px 0 0 0;}

  .sec-1-pic-bg { width: 100%; overflow: hidden;}
  .sec-1-pic-bg img.pic-bg-mo { display: none;}
  .sec-1-pic-bg img.pic-bg { width: 100%; height: auto;}


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

  section#sec-2-con { clear: both; width: 100%; padding: 0 0 10vw 0; background-image: url("../images/bg-mb.jpg"); background-repeat: repeat-y; background-position: left top; background-size: 100% auto;}

  .sec-2-con-1 { clear: both; width: 100%; padding: 10vw 12vw 0 12vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .sec-2-con-1 .img-col { width: 40vw;}
  .sec-2-con-1 .img-col img.pic { width: 100%; height: auto;}
  .sec-2-con-1 .text-col-mo { display: none;}
  .sec-2-con-1 .text-col { width: calc(100% - 40vw); display: flex; justify-content: center; align-items: center;}
  .sec-2-con-1 .text-col img.text-1 { width: 17vw; height: auto;}
  .sec-2-con-1 .text-col img.text-2 { width: 23vw; height: auto;}
  .sec-2-con-1 .text-col img.text-3 { width: 16.8vw; height: auto;}
  .sec-2-con-1 .text-col img.text-4 { width: 19vw; height: auto;}
  .sec-2-con-1 .text-col img.text-5 { width: 29.9vw; height: auto;}

  .sec-2-con-2 { clear: both; width: 100%; padding: 10vw 12vw 0 12vw; box-sizing: border-box;}
  .sec-2-con-2 img.text-6 { clear: both; width: 25.9vw; height: auto; margin: 0 auto 6vw auto;}
  .sec-2-con-2 img.text-7 { clear: both; width: 18vw; height: auto; margin: 0 auto 6vw auto;}
  .sec-2-con-2 img.text-8 { clear: both; width: 25vw; height: auto; margin: 0 auto 6vw auto;}
  .sec-2-con-2 img.text-9 { clear: both; width: 38vw; height: auto; margin: 0 auto 6vw auto;}
  .sec-2-con-2 .img-col { clear: both; width: 57.5vw; margin: 0 auto 6vw auto;}
  .sec-2-con-2 .img-col img { width: 100%; height: auto;}
 


  .sec-contact { clear: both; width: 100%; padding: 60px calc(50% - 660px); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; position: relative; z-index: 3;}

  .sec-contact .contact-title { clear: both; width: 100%; margin: 0 0 60px 0;}
  .sec-contact .contact-title img { width: 304px; height: auto; margin: 0 auto;}

  .sec-contact .contact-col-lf { width: 520px;}
  .sec-contact .contact-col-lf img.logo-title { width: 492px; height: auto; margin: 0 0 70px 0;}
  .sec-contact .contact-col-lf .text-con { width: 100%; font-size: 1.3rem; font-weight: 300; letter-spacing: 0.1em; line-height: 3em;}

  .sec-contact .contact-col-rt { width: calc(100% - 520px); padding: 0 0 0 50px; box-sizing: border-box;}
  .sec-contact .contact-col-rt .title-text { width: 100%; font-size: 3rem; font-weight: 300;}
  .sec-contact .contact-col-rt .title-text-small { width: 100%; padding: 20px 0 50px 0; font-size: 1.1rem;}
  .sec-contact .contact-col-rt .text-error { width: 100%; padding: 0px 0 20px 0; font-size: 1.1rem; color:red;text-align: right;position: relative;top: -20px;}
  .sec-contact .contact-col-rt form { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .sec-contact .contact-col-rt form .form-caption { width: 60px; margin: 0 0 20px 0; font-size: 1.1rem; font-weight: 300;}
  .sec-contact .contact-col-rt form .form-column { width: calc(100% - 60px); margin: 0 0 20px 0;}
  .sec-contact .contact-col-rt form .form-column input { width: 100%; padding: 10px 20px; color: #000; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #fff; box-sizing: border-box;} 
  .sec-contact .contact-col-rt form .form-column select { width: 100%; padding: 10px 20px; color: #000; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #fff; box-sizing: border-box; appearance: none; -moz-appearance: none; -webkit-appearance: none; background-color: #fff; background: url("../images/arrow_dw.png") no-repeat scroll right center #fff;}
  .sec-contact .contact-col-rt form input[type=button] { padding: 15px 50px; margin: 40px 0 0 60px; color: #000; font-size: 1.1rem; line-height: 1em; letter-spacing: 0.1em; border: 0; background: linear-gradient(to right, #a46755 0%, #f9dbb0 50%, #a46755 100%); cursor: pointer;}
  .sec-contact .contact-col-rt form input[type=button]:hover { background-color: #000;}


  /************ section #sec-map ************/

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

  iframe.sec-map { width: 100%; height: 42vw; border: 0;}


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

  footer { clear: both; width: 100%; padding: 40px calc(50% - 660px); box-sizing: border-box; background-color: #000d39;}

  .footer-tel { width: 100%; color: #fff; font-size: 2rem; letter-spacing: 0.1em; display: flex; justify-content: center; align-items: center;}
  .footer-tel a { color: #fff; text-decoration: none;}
  .footer-tel a:hover { color: #fbd7b5;}
  .footer-copyright { width: 100%; padding: 10px 0 0 0; color: #fff; font-size: 1rem; letter-spacing: 0.1em; text-align: center;}


}

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

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

  header { clear: both; width: 100%; height: 95px; padding: 0 4vw; box-sizing: border-box; background-color: #000d39; display: flex; justify-content: flex-start; align-items: center; position: fixed; top: 0; left: 0; z-index: 99;}

  .logo-bx { width: 120px;}
  .logo-bx img { width: 100%; height: auto;}

  nav#mo { display: none;}

  nav#pc { width: calc(100% - 120px);}
  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 40px; margin: 0; border-right: 1px #fbd7b5 solid;}
  nav#pc ul.nav-menu li:last-child { border-right: 0;}
  nav#pc ul.nav-menu li img.nav-icon { width: auto; height: 18px;}


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

  section#sec-1-con { clear: both; width: 100%; padding: 95px 0 0 0;}

  .sec-1-pic-bg { width: 100%; overflow: hidden;}
  .sec-1-pic-bg img.pic-bg-mo { display: none;}
  .sec-1-pic-bg img.pic-bg { width: 100%; height: auto;}


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

  section#sec-2-con { clear: both; width: 100%; padding: 0 0 10vw 0; background-image: url("../images/bg-mb.jpg"); background-repeat: repeat-y; background-position: left top; background-size: 100% auto;}

  .sec-2-con-1 { clear: both; width: 100%; padding: 10vw 12vw 0 12vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .sec-2-con-1 .img-col { width: 40vw;}
  .sec-2-con-1 .img-col img.pic { width: 100%; height: auto;}
  .sec-2-con-1 .text-col-mo { display: none;}
  .sec-2-con-1 .text-col { width: calc(100% - 40vw); display: flex; justify-content: center; align-items: center;}
  .sec-2-con-1 .text-col img.text-1 { width: 17vw; height: auto;}
  .sec-2-con-1 .text-col img.text-2 { width: 23vw; height: auto;}
  .sec-2-con-1 .text-col img.text-3 { width: 16.8vw; height: auto;}
  .sec-2-con-1 .text-col img.text-4 { width: 19vw; height: auto;}
  .sec-2-con-1 .text-col img.text-5 { width: 29.9vw; height: auto;}

  .sec-2-con-2 { clear: both; width: 100%; padding: 10vw 12vw 0 12vw; box-sizing: border-box;}
  .sec-2-con-2 img.text-6 { clear: both; width: 25.9vw; height: auto; margin: 0 auto 6vw auto;}
  .sec-2-con-2 img.text-7 { clear: both; width: 18vw; height: auto; margin: 0 auto 6vw auto;}
  .sec-2-con-2 img.text-8 { clear: both; width: 25vw; height: auto; margin: 0 auto 6vw auto;}
  .sec-2-con-2 img.text-9 { clear: both; width: 38vw; height: auto; margin: 0 auto 6vw auto;}
  .sec-2-con-2 .img-col { clear: both; width: 57.5vw; margin: 0 auto 6vw auto;}
  .sec-2-con-2 .img-col img { width: 100%; height: auto;}
 


  .sec-contact { clear: both; width: 100%; padding: 60px calc(50% - 480px); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; position: relative; z-index: 3;}

  .sec-contact .contact-title { clear: both; width: 100%; margin: 0 0 60px 0;}
  .sec-contact .contact-title img { width: 260px; height: auto; margin: 0 auto;}

  .sec-contact .contact-col-lf { width: 400px;}
  .sec-contact .contact-col-lf .text-con { width: 100%; font-size: 1.1rem; font-weight: 300; letter-spacing: 0.1em; line-height: 3em;}

  .sec-contact .contact-col-rt { width: calc(100% - 400px); padding: 0 0 0 50px; box-sizing: border-box;}
  .sec-contact .contact-col-rt .title-text { width: 100%; font-size: 3rem; font-weight: 300;}
  .sec-contact .contact-col-rt .title-text-small { width: 100%; padding: 20px 0 50px 0; font-size: 1.1rem;}
  .sec-contact .contact-col-rt .text-error { width: 100%; padding: 0px 0 20px 0; font-size: 1.1rem; color:red;text-align: right;position: relative;top: -20px;}
  .sec-contact .contact-col-rt form { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .sec-contact .contact-col-rt form .form-caption { width: 60px; margin: 0 0 20px 0; font-size: 1.1rem; font-weight: 300;}
  .sec-contact .contact-col-rt form .form-column { width: calc(100% - 60px); margin: 0 0 20px 0;}
  .sec-contact .contact-col-rt form .form-column input { width: 100%; padding: 10px 20px; color: #000; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #fff; box-sizing: border-box;} 
  .sec-contact .contact-col-rt form .form-column select { width: 100%; padding: 10px 20px; color: #000; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #fff; box-sizing: border-box; appearance: none; -moz-appearance: none; -webkit-appearance: none; background-color: #fff; background: url("../images/arrow_dw.png") no-repeat scroll right center #fff;}
  .sec-contact .contact-col-rt form input[type=button] { padding: 15px 50px; margin: 40px 0 0 60px; color: #000; font-size: 1.1rem; line-height: 1em; letter-spacing: 0.1em; border: 0; background: linear-gradient(to right, #a46755 0%, #f9dbb0 50%, #a46755 100%); cursor: pointer;}
  .sec-contact .contact-col-rt form input[type=button]:hover { background-color: #000;}


  /************ section #sec-map ************/

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

  iframe.sec-map { width: 100%; height: 42vw; border: 0;}


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

  footer { clear: both; width: 100%; padding: 40px calc(50% - 660px); box-sizing: border-box; background-color: #000d39;}

  .footer-tel { width: 100%; color: #fff; font-size: 2rem; letter-spacing: 0.1em; display: flex; justify-content: center; align-items: center;}
  .footer-tel a { color: #fff; text-decoration: none;}
  .footer-tel a:hover { color: #fbd7b5;}
  .footer-copyright { width: 100%; padding: 10px 0 0 0; color: #fff; font-size: 1rem; letter-spacing: 0.1em; text-align: center;}


}

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

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

  header { clear: both; width: 100%; height: 95px; padding: 0 40px; box-sizing: border-box; background-color: #000d39; display: flex; justify-content: flex-start; align-items: center; position: fixed; top: 0; left: 0; z-index: 99;}

  .logo-bx { width: 120px;}
  .logo-bx img { width: 100%; height: auto;}

  nav#mo { display: none;}

  nav#pc { width: calc(100% - 120px);}
  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 20px; margin: 0; border-right: 1px #fbd7b5 solid;}
  nav#pc ul.nav-menu li:last-child { border-right: 0;}
  nav#pc ul.nav-menu li img.nav-icon { width: auto; height: 18px;}


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

  section#sec-1-con { clear: both; width: 100%; padding: 95px 0 0 0;}

  .sec-1-pic-bg { width: 100%; overflow: hidden;}
  .sec-1-pic-bg img.pic-bg-mo { display: none;}
  .sec-1-pic-bg img.pic-bg { width: 100%; height: auto;}


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

  section#sec-2-con { clear: both; width: 100%; padding: 0 0 10vw 0; background-image: url("../images/bg-mb.jpg"); background-repeat: repeat-y; background-position: left top; background-size: 100% auto;}

  .sec-2-con-1 { clear: both; width: 100%; padding: 10vw 6vw 0 6vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .sec-2-con-1 .img-col { width: 50vw;}
  .sec-2-con-1 .img-col img.pic { width: 100%; height: auto;}
  .sec-2-con-1 .text-col-mo { display: none;}
  .sec-2-con-1 .text-col { width: calc(100% - 50vw); display: flex; justify-content: center; align-items: center;}
  .sec-2-con-1 .text-col img.text-1 { width: 22vw; height: auto;}
  .sec-2-con-1 .text-col img.text-2 { width: 28vw; height: auto;}
  .sec-2-con-1 .text-col img.text-3 { width: 21.8vw; height: auto;}
  .sec-2-con-1 .text-col img.text-4 { width: 24vw; height: auto;}
  .sec-2-con-1 .text-col img.text-5 { width: 34.9vw; height: auto;}

  .sec-2-con-2 { clear: both; width: 100%; padding: 10vw 6vw 0 6vw; box-sizing: border-box;}
  .sec-2-con-2 img.text-6 { clear: both; width: 30.9vw; height: auto; margin: 0 auto 6vw auto;}
  .sec-2-con-2 img.text-7 { clear: both; width: 23vw; height: auto; margin: 0 auto 6vw auto;}
  .sec-2-con-2 img.text-8 { clear: both; width: 30vw; height: auto; margin: 0 auto 6vw auto;}
  .sec-2-con-2 img.text-9 { clear: both; width: 43vw; height: auto; margin: 0 auto 6vw auto;}
  .sec-2-con-2 .img-col { clear: both; width: 70vw; margin: 0 auto 6vw auto;}
  .sec-2-con-2 .img-col img { width: 100%; height: auto;}
 


  .sec-contact { clear: both; width: 100%; padding: 60px 40px; box-sizing: border-box; position: relative; z-index: 3;}

  .sec-contact .contact-title { clear: both; width: 100%; margin: 0 0 60px 0;}
  .sec-contact .contact-title img { width: 260px; height: auto; margin: 0 auto;}

  .sec-contact .contact-col-lf { width: 100%; margin: 0 0 40px 0;}
  .sec-contact .contact-col-lf .text-con { width: 100%; font-size: 1.1rem; font-weight: 300; letter-spacing: 0.1em; line-height: 3em;}

  .sec-contact .contact-col-rt { width: 100%;}
  .sec-contact .contact-col-rt .title-text { width: 100%; font-size: 3rem; font-weight: 300;}
  .sec-contact .contact-col-rt .title-text-small { width: 100%; padding: 20px 0 50px 0; font-size: 1.1rem;}
  .sec-contact .contact-col-rt .text-error { width: 100%; padding: 0px 0 20px 0; font-size: 1.1rem; color:red;text-align: right;position: relative;top: -20px;}
  .sec-contact .contact-col-rt form { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .sec-contact .contact-col-rt form .form-caption { width: 60px; margin: 0 0 20px 0; font-size: 1.1rem; font-weight: 300;}
  .sec-contact .contact-col-rt form .form-column { width: calc(100% - 60px); margin: 0 0 20px 0;}
  .sec-contact .contact-col-rt form .form-column input { width: 100%; padding: 10px 20px; color: #000; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #fff; box-sizing: border-box;} 
  .sec-contact .contact-col-rt form .form-column select { width: 100%; padding: 10px 20px; color: #000; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #fff; box-sizing: border-box; appearance: none; -moz-appearance: none; -webkit-appearance: none; background-color: #fff; background: url("../images/arrow_dw.png") no-repeat scroll right center #fff;}
  .sec-contact .contact-col-rt form input[type=button] { padding: 15px 50px; margin: 40px 0 0 60px; color: #000; font-size: 1.1rem; line-height: 1em; letter-spacing: 0.1em; border: 0; background: linear-gradient(to right, #a46755 0%, #f9dbb0 50%, #a46755 100%); cursor: pointer;}
  .sec-contact .contact-col-rt form input[type=button]:hover { background-color: #000;}


  /************ section #sec-map ************/

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

  iframe.sec-map { width: 100%; height: 60vw; border: 0;}
 

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

  footer { clear: both; width: 100%; padding: 40px calc(50% - 660px); box-sizing: border-box; background-color: #000d39;}

  .footer-tel { width: 100%; color: #fff; font-size: 2rem; letter-spacing: 0.1em; display: flex; justify-content: center; align-items: center;}
  .footer-tel a { color: #fff; text-decoration: none;}
  .footer-tel a:hover { color: #fbd7b5;}
  .footer-copyright { width: 100%; padding: 10px 0 0 0; color: #fff; font-size: 1rem; letter-spacing: 0.1em; text-align: center;}


}

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

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

  header { clear: both; width: 100%; padding: 15px; box-sizing: border-box; background-color: #000d39;}

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

  nav#pc { display: none;}

  nav#mo { width: 100%; border-top: 1px #054b71 solid; position: fixed; bottom: 0; left: 0; z-index: 9999;}
  nav#mo ul.nav-menu { width: 100%; padding: 10px 0; margin: 0; background-color: #dedcdb; 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 #054b71 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 { height: 6vw; width: auto;}


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

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

  .sec-1-pic-bg { width: 100%; overflow: hidden;}
  .sec-1-pic-bg img.pic-bg { display: none;}
  .sec-1-pic-bg img.pic-bg-mo { width: 100%; height: auto;}


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

  section#sec-2-con { clear: both; width: 100%; padding: 0 0 60px 0; background-image: url("../images/bg-mb.jpg"); background-repeat: repeat-y; background-position: left top; background-size: 100% auto;}

  .sec-2-con-1 { clear: both; width: 100%; padding: 60px 20px 0 20px; box-sizing: border-box;}
  .sec-2-con-1 .img-col { width: 100%;}
  .sec-2-con-1 .img-col img.pic { width: 100%; height: auto;}
  .sec-2-con-1 .text-col { display: none;}
  .sec-2-con-1 .text-col-mo { width: 100%; margin: 0 0 60px 0; display: flex; justify-content: center;}
  .sec-2-con-1 .text-col-mo img.text-1 { width: 42vw; height: auto;}
  .sec-2-con-1 .text-col-mo img.text-2 { width: 53vw; height: auto;}
  .sec-2-con-1 .text-col-mo img.text-3 { width: 41.8vw; height: auto;}
  .sec-2-con-1 .text-col-mo img.text-4 { width: 46vw; height: auto;}
  .sec-2-con-1 .text-col-mo img.text-5 { width: 69.9vw; height: auto;}

  .sec-2-con-2 { clear: both; width: 100%; padding: 60px 20px 0 20px; box-sizing: border-box;}
  .sec-2-con-2 img.text-6 { clear: both; width: 58.9vw; height: auto; margin: 0 auto 60px auto;}
  .sec-2-con-2 img.text-7 { clear: both; width: 46vw; height: auto; margin: 0 auto 60px auto;}
  .sec-2-con-2 img.text-8 { clear: both; width: 58vw; height: auto; margin: 0 auto 60px auto;}
  .sec-2-con-2 img.text-9 { clear: both; width: 78vw; height: auto; margin: 0 auto 60px auto;}
  .sec-2-con-2 .img-col { clear: both; width: 100%; margin: 0 auto 6vw auto;}
  .sec-2-con-2 .img-col img { width: 100%; height: auto;}
 


  .sec-contact { clear: both; width: 100%; padding: 60px 20px; box-sizing: border-box; position: relative; z-index: 3;}

  .sec-contact .contact-title { clear: both; width: 100%; margin: 0 0 60px 0;}
  .sec-contact .contact-title img { width: 200px; height: auto; margin: 0 auto;}

  .sec-contact .contact-col-lf { width: 100%; margin: 0 0 40px 0;}
  .sec-contact .contact-col-lf .text-con { width: 100%; font-size: 0.9rem; font-weight: 300; letter-spacing: 0.1em; line-height: 3em;}

  .sec-contact .contact-col-rt { width: 100%;}
  .sec-contact .contact-col-rt .title-text { width: 100%; font-size: 3rem; font-weight: 300;}
  .sec-contact .contact-col-rt .title-text-small { width: 100%; padding: 20px 0 50px 0; font-size: 1.1rem;}
  .sec-contact .contact-col-rt .text-error { width: 100%; padding: 0px 0 20px 0; font-size: 1.1rem; color:red;text-align: right;position: relative;top: -20px;}
  .sec-contact .contact-col-rt form { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .sec-contact .contact-col-rt form .form-caption { width: 60px; margin: 0 0 20px 0; font-size: 1.1rem; font-weight: 300;}
  .sec-contact .contact-col-rt form .form-column { width: calc(100% - 60px); margin: 0 0 20px 0;}
  .sec-contact .contact-col-rt form .form-column input { width: 100%; padding: 10px 20px; color: #000; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #fff; box-sizing: border-box;} 
  .sec-contact .contact-col-rt form .form-column select { width: 100%; padding: 10px 20px; color: #000; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #fff; box-sizing: border-box; appearance: none; -moz-appearance: none; -webkit-appearance: none; background-color: #fff; background: url("../images/arrow_dw.png") no-repeat scroll right center #fff;}
  .sec-contact .contact-col-rt form input[type=button] { padding: 15px 50px; margin: 40px 0 0 60px; color: #000; font-size: 1.1rem; line-height: 1em; letter-spacing: 0.1em; border: 0; background: linear-gradient(to right, #a46755 0%, #f9dbb0 50%, #a46755 100%); cursor: pointer;}
  .sec-contact .contact-col-rt form input[type=button]:hover { background-color: #000;}


  /************ section #sec-map ************/

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

  iframe.sec-map { width: 100%; height: 90vw; border: 0;}
 

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

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

  .footer-tel { width: 100%; color: #fff; font-size: 2rem; letter-spacing: 0.1em; display: flex; justify-content: center; align-items: center;}
  .footer-tel a { color: #fff; text-decoration: none;}
  .footer-tel a:active { color: #fbd7b5;}
  .footer-copyright { width: 100%; padding: 10px 0 80px 0; color: #fff; font-size: 1rem; letter-spacing: 0.1em; text-align: center;}
  

}