@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%;} /* Contact form focus state */ .sec-contact .contact-col-rt form .form-column input:focus, .sec-contact .contact-col-rt form .form-column select:focus { border-color: #1250a8; outline: none; } /* Optional: blue-filled fields variant. Add class 'form-blue-fill' to or wrapping container */ .form-blue-fill .sec-contact .contact-col-rt form .form-column input, .form-blue-fill .sec-contact .contact-col-rt form .form-column select { background-color: #e8f3ff; } .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%;} .sec-2-con-1-pc{ display: block; width: 100%; position: relative; } .sec-2-con-1-pc img.img-bg{ width: 100%; } .sec-2-con-1-pc .text-col { position: absolute; } .sec-2-con-1-pc .text-col img{ width: 100%; } .sec-2-con-1-mo{ display: none; } @media screen and (min-width: 1370px) { /************ header + nav ************/ header { clear: both; width: 100%; height: 95px; padding: 0 4vw; box-sizing: border-box; background-color: #fff; 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-color: #fff;} .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; background-color: #fff;} .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: 1px solid #1e6bd6; border-radius: 4px; 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: 1px solid #1e6bd6; border-radius: 4px; 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: #e8f3ff;} .footer-tel { width: 100%; color: #000; font-size: 2rem; letter-spacing: 0.1em; display: flex; justify-content: center; align-items: center;} .footer-tel a { color: #000; text-decoration: none;} .footer-tel a:hover { color: #a46755;} .footer-copyright { width: 100%; padding: 10px 0 0 0; color: #000; 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: #fff; 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-color: #fff;} .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; background-color: #fff;} .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: 1px solid #1e6bd6; border-radius: 4px; 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: 1px solid #1e6bd6; border-radius: 4px; 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: #e8f3ff;} .footer-tel { width: 100%; color: #000; font-size: 2rem; letter-spacing: 0.1em; display: flex; justify-content: center; align-items: center;} .footer-tel a { color: #000; text-decoration: none;} .footer-tel a:hover { color: #a46755;} .footer-copyright { width: 100%; padding: 10px 0 0 0; color: #000; 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: #fff; 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-color: #fff;} .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; background-color: #fff;} .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: 1px solid #1e6bd6; border-radius: 4px; 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: 1px solid #1e6bd6; border-radius: 4px; 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: #e8f3ff;} .footer-tel { width: 100%; color: #000; font-size: 2rem; letter-spacing: 0.1em; display: flex; justify-content: center; align-items: center;} .footer-tel a { color: #000; text-decoration: none;} .footer-tel a:hover { color: #a46755;} .footer-copyright { width: 100%; padding: 10px 0 0 0; color: #000; font-size: 1rem; letter-spacing: 0.1em; text-align: center;} } @media screen and (max-width: 768px) { .sec-2-con-1-mo { display: block; width: 100%; position: relative; } .sec-2-con-1-mo img.img-bg { width: 100%; } .sec-2-con-1-mo .text-col{ position: absolute; left: 50%; transform: translate(-50%, 0); } .sec-2-con-1-mo .text-col img { width: 100%; } .sec-2-con-1-pc { display: none; } /************ header + nav ************/ header { clear: both; width: 100%; padding: 15px; box-sizing: border-box; background-color: #fff;} .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-color: #fff;} .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; background-color: #fff;} .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: 1.05rem; 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: 1px solid #1e6bd6; border-radius: 4px; 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: 1px solid #1e6bd6; border-radius: 4px; 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: #e8f3ff;} .footer-tel { width: 100%; color: #000; font-size: 2rem; letter-spacing: 0.1em; display: flex; justify-content: center; align-items: center;} .footer-tel a { color: #000; text-decoration: none;} .footer-tel a:active { color: #a46755;} .footer-copyright { width: 100%; padding: 10px 0 80px 0; color: #000; font-size: 1rem; letter-spacing: 0.1em; text-align: center;} }