|
|
@@ -0,0 +1,528 @@
|
|
|
+@charset "UTF-8";
|
|
|
+* {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ -webkit-box-sizing: border-box;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-family: 微軟正黑體;
|
|
|
+}
|
|
|
+
|
|
|
+@font-face {
|
|
|
+ font-family: 追奇手寫體;
|
|
|
+ src: url(./drechifont-proportional.ttf);
|
|
|
+ font-weight: 900;
|
|
|
+}
|
|
|
+
|
|
|
+body {
|
|
|
+ height: 5300px;
|
|
|
+}
|
|
|
+
|
|
|
+body .btn-main {
|
|
|
+ -webkit-box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
|
|
|
+ box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
|
|
|
+ border: none;
|
|
|
+ padding: 15px;
|
|
|
+ background: #404854;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ width: 280px;
|
|
|
+ border-radius: 30px;
|
|
|
+ -webkit-transition: 0.3s;
|
|
|
+ transition: 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+body .btn-main:hover {
|
|
|
+ background-color: #927368;
|
|
|
+ width: 285px;
|
|
|
+ font-size: 17px;
|
|
|
+}
|
|
|
+
|
|
|
+body .title {
|
|
|
+ font-weight: bolder;
|
|
|
+ padding: 15px;
|
|
|
+ font-family: "Times New Roman", Times, serif;
|
|
|
+ padding: 15px;
|
|
|
+ margin-left: 190px;
|
|
|
+ font-size: 50px;
|
|
|
+ color: #414854;
|
|
|
+}
|
|
|
+
|
|
|
+#banner {
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background-image: url(./img/001.jpg);
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center;
|
|
|
+ margin-bottom: 150px;
|
|
|
+}
|
|
|
+
|
|
|
+#banner #text {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 260px;
|
|
|
+}
|
|
|
+
|
|
|
+#banner #text h1 {
|
|
|
+ padding: 15px;
|
|
|
+ color: #fff;
|
|
|
+ font-family: 追奇手寫體;
|
|
|
+ font-size: 72px;
|
|
|
+}
|
|
|
+
|
|
|
+#banner #text .btn-main {
|
|
|
+ -webkit-box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
|
|
|
+ box-shadow: 0 10px 9px rgba(0, 0, 0, 0.5);
|
|
|
+ border: none;
|
|
|
+ padding: 15px;
|
|
|
+ background: #404854;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ width: 280px;
|
|
|
+ border-radius: 30px;
|
|
|
+ -webkit-transition: 0.3s;
|
|
|
+ transition: 0.3s;
|
|
|
+}
|
|
|
+
|
|
|
+#banner #text .btn-main:hover {
|
|
|
+ background-color: #927368;
|
|
|
+ width: 285px;
|
|
|
+ font-size: 17px;
|
|
|
+}
|
|
|
+
|
|
|
+#banner .Navigation {
|
|
|
+ width: 100vw;
|
|
|
+ height: 50px;
|
|
|
+ display: -ms-grid;
|
|
|
+ display: grid;
|
|
|
+ -ms-grid-columns: 2fr 4fr;
|
|
|
+ grid-template-columns: 2fr 4fr;
|
|
|
+}
|
|
|
+
|
|
|
+#banner .Navigation .logo {
|
|
|
+ padding-left: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+#banner .Navigation .logo img {
|
|
|
+ width: 200px;
|
|
|
+}
|
|
|
+
|
|
|
+#banner .Navigation .link {
|
|
|
+ text-align: right;
|
|
|
+ padding: 30px;
|
|
|
+ padding-right: 150px;
|
|
|
+}
|
|
|
+
|
|
|
+#banner .Navigation .link a {
|
|
|
+ text-decoration: none;
|
|
|
+ color: #fff;
|
|
|
+ padding-right: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+#banner .Navigation .link hr {
|
|
|
+ width: 100px;
|
|
|
+ background: #fff;
|
|
|
+ height: 3px;
|
|
|
+}
|
|
|
+
|
|
|
+#banner hr {
|
|
|
+ margin-top: 30px;
|
|
|
+ margin-left: 100px;
|
|
|
+ background: #fff;
|
|
|
+ height: 2px;
|
|
|
+ width: 1390px;
|
|
|
+}
|
|
|
+
|
|
|
+#content1 {
|
|
|
+ display: -ms-grid;
|
|
|
+ display: grid;
|
|
|
+ -ms-grid-columns: 1fr 1fr;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ margin: 50px 120px;
|
|
|
+ width: 80vw;
|
|
|
+}
|
|
|
+
|
|
|
+#content1 .content1-left {
|
|
|
+ width: 510x;
|
|
|
+ height: 700px;
|
|
|
+ text-align: left;
|
|
|
+ margin: 30px auto;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+#content1 .content1-left #left-title {
|
|
|
+ margin-top: -10px;
|
|
|
+ padding: 10px;
|
|
|
+ margin-bottom: 50px;
|
|
|
+ font-weight: bolder;
|
|
|
+ font-size: 50px;
|
|
|
+ font-family: "Times New Roman", Times, serif;
|
|
|
+ color: #414854;
|
|
|
+}
|
|
|
+
|
|
|
+#content1 .content1-left .left {
|
|
|
+ display: -ms-grid;
|
|
|
+ display: grid;
|
|
|
+ -ms-grid-columns: 1fr 4fr;
|
|
|
+ grid-template-columns: 1fr 4fr;
|
|
|
+ grid-gap: 10px;
|
|
|
+ padding: 5px;
|
|
|
+ width: 500px;
|
|
|
+}
|
|
|
+
|
|
|
+#content1 .content1-left .left .title1 {
|
|
|
+ padding: 10px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 96px;
|
|
|
+ font-weight: 400;
|
|
|
+ font-family: "Times New Roman", Times, serif;
|
|
|
+ color: #8593a4;
|
|
|
+}
|
|
|
+
|
|
|
+#content1 .content1-left .left .text {
|
|
|
+ margin-top: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+#content1 .content1-left .left .text p {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3f4654;
|
|
|
+}
|
|
|
+
|
|
|
+#content1 .content1-right {
|
|
|
+ margin-left: 70px;
|
|
|
+}
|
|
|
+
|
|
|
+#content1 .content1-right img {
|
|
|
+ width: 550px;
|
|
|
+ height: 680px;
|
|
|
+ -o-object-fit: cover;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+
|
|
|
+#service {
|
|
|
+ width: 100vw;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+#service h1 {
|
|
|
+ padding: 15px;
|
|
|
+ margin-left: 190px;
|
|
|
+ margin-bottom: 80px;
|
|
|
+}
|
|
|
+
|
|
|
+#service #service-text {
|
|
|
+ display: -ms-grid;
|
|
|
+ display: grid;
|
|
|
+ -ms-grid-columns: 1fr 1fr;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ width: 80vw;
|
|
|
+ height: 200px;
|
|
|
+ grid-gap: 50px;
|
|
|
+ margin: 20px 250px;
|
|
|
+}
|
|
|
+
|
|
|
+#service #service-text .icon-text {
|
|
|
+ width: 450px;
|
|
|
+ margin-left: 50px;
|
|
|
+ margin-top: 15px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+#service #service-text img {
|
|
|
+ width: 128px;
|
|
|
+ height: 128px;
|
|
|
+}
|
|
|
+
|
|
|
+#service #service-text p {
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 1.5;
|
|
|
+}
|
|
|
+
|
|
|
+#service #service-text #text-left {
|
|
|
+ width: 30vw;
|
|
|
+ text-align: left;
|
|
|
+ display: -ms-grid;
|
|
|
+ display: grid;
|
|
|
+ -ms-grid-columns: 1fr 1fr;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+}
|
|
|
+
|
|
|
+#service #service-text #text-right {
|
|
|
+ width: 30vw;
|
|
|
+ text-align: left;
|
|
|
+ display: -ms-grid;
|
|
|
+ display: grid;
|
|
|
+ -ms-grid-columns: 1fr 1fr;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+}
|
|
|
+
|
|
|
+#service #service-img {
|
|
|
+ width: 80vw;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: -ms-grid;
|
|
|
+ display: grid;
|
|
|
+ -ms-grid-columns: 1fr 1fr;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ grid-gap: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+#service #service-img img {
|
|
|
+ width: 40vw;
|
|
|
+ height: 40vh;
|
|
|
+ -o-object-fit: cover;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+
|
|
|
+#service .btn {
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+#service-process {
|
|
|
+ width: 100vw;
|
|
|
+ height: 80vh;
|
|
|
+ background-color: #eee;
|
|
|
+}
|
|
|
+
|
|
|
+#service-process h1 {
|
|
|
+ padding: 15px;
|
|
|
+ margin-left: 190px;
|
|
|
+ padding-top: 100px;
|
|
|
+ margin-bottom: 80px;
|
|
|
+}
|
|
|
+
|
|
|
+#service-process #process-box {
|
|
|
+ display: -ms-grid;
|
|
|
+ display: grid;
|
|
|
+ -ms-grid-columns: (1fr)[6];
|
|
|
+ grid-template-columns: repeat(6, 1fr);
|
|
|
+ width: 80vw;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+
|
|
|
+#service-process #process-box p {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ padding-right: 30px;
|
|
|
+}
|
|
|
+
|
|
|
+#service-process #process-box img {
|
|
|
+ width: 205px;
|
|
|
+ height: 205px;
|
|
|
+}
|
|
|
+
|
|
|
+#feedback {
|
|
|
+ margin-bottom: 200px;
|
|
|
+}
|
|
|
+
|
|
|
+#feedback h1 {
|
|
|
+ margin-top: 50px;
|
|
|
+ margin-bottom: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+#feedback #feedback-box {
|
|
|
+ width: 1200px;
|
|
|
+ height: 400px;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: -ms-grid;
|
|
|
+ display: grid;
|
|
|
+ -ms-grid-columns: (1fr)[3];
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ grid-gap: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+#feedback #feedback-box .box p {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+#feedback #feedback-box .box img {
|
|
|
+ width: 390px;
|
|
|
+ height: 195px;
|
|
|
+ -o-object-fit: cover;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+
|
|
|
+#contact-us {
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 100vw;
|
|
|
+ height: 130vh;
|
|
|
+ background: #eee;
|
|
|
+}
|
|
|
+
|
|
|
+#contact-us p {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ padding-left: 350px;
|
|
|
+ margin: 0px 10px;
|
|
|
+ line-height: 1.5;
|
|
|
+}
|
|
|
+
|
|
|
+#contact-us #form-title {
|
|
|
+ padding-top: 100px;
|
|
|
+ margin-bottom: 50px;
|
|
|
+ color: #5c5248;
|
|
|
+}
|
|
|
+
|
|
|
+#contact-us h1 {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 32px;
|
|
|
+ margin-right: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+#contact-us #contact-form {
|
|
|
+ margin: 0 350px;
|
|
|
+ width: 1000px;
|
|
|
+ display: -ms-grid;
|
|
|
+ display: grid;
|
|
|
+ -ms-grid-columns: (1fr)[2];
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+#contact-us #contact-form #location,
|
|
|
+#contact-us #contact-form #type,
|
|
|
+#contact-us #contact-form #modal,
|
|
|
+#contact-us #contact-form #budget,
|
|
|
+#contact-us #contact-form #square,
|
|
|
+#contact-us #contact-form #style,
|
|
|
+#contact-us #contact-form #date,
|
|
|
+#contact-us #contact-form #email,
|
|
|
+#contact-us #contact-form #name,
|
|
|
+#contact-us #contact-form #phone,
|
|
|
+#contact-us #contact-form #gender {
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ margin: 10px 0;
|
|
|
+ padding-left: 10px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.3);
|
|
|
+ font-size: 18px;
|
|
|
+ -webkit-appearance: none;
|
|
|
+ -moz-appearance: none;
|
|
|
+ appearance: none;
|
|
|
+ background: url(./img/icondown.png) 95% 50% no-repeat scroll transparent;
|
|
|
+ background-size: 10px 10px;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+#contact-us #contact-form #form-left {
|
|
|
+ width: 380px;
|
|
|
+}
|
|
|
+
|
|
|
+#contact-us #contact-form #form-left #rooms,
|
|
|
+#contact-us #contact-form #form-left #livingroom,
|
|
|
+#contact-us #contact-form #form-left #bathroom {
|
|
|
+ width: 32.5%;
|
|
|
+ height: 50px;
|
|
|
+ margin: 15px 0;
|
|
|
+ padding: 5px;
|
|
|
+ font-size: 18px;
|
|
|
+ -webkit-appearance: none;
|
|
|
+ -moz-appearance: none;
|
|
|
+ appearance: none;
|
|
|
+ background: url(./img/icondown.png) 85% 50% no-repeat scroll transparent;
|
|
|
+ background-size: 10px 10px;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+#contact-us #contact-form #form-right {
|
|
|
+ width: 380px;
|
|
|
+}
|
|
|
+
|
|
|
+#contact-us #contact-form #form-right #facebook {
|
|
|
+ margin-top: 12px;
|
|
|
+ width: 380px;
|
|
|
+ height: 50px;
|
|
|
+ border: 1px solid #000093;
|
|
|
+ text-align: right;
|
|
|
+ padding-right: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ background-color: #fff;
|
|
|
+ -webkit-transition: 0.3s;
|
|
|
+ transition: 0.3s;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+#contact-us #contact-form #form-right #facebook img {
|
|
|
+ position: absolute;
|
|
|
+ left: 50px;
|
|
|
+ top: 7px;
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+}
|
|
|
+
|
|
|
+#contact-us #contact-form #form-right #facebook:hover {
|
|
|
+ background-color: #2A4F91;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+#contact-us #contact-form #form-right #facebook:hover img {
|
|
|
+ -webkit-filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
|
|
|
+ filter: invert(100%) sepia(100%) saturate(19%) hue-rotate(334deg) brightness(106%) contrast(106%);
|
|
|
+}
|
|
|
+
|
|
|
+#contact-us #contact-form #form-right a {
|
|
|
+ text-decoration: none;
|
|
|
+ color: #ff8000;
|
|
|
+}
|
|
|
+
|
|
|
+#contact-us #contact-form #form-right #checkbox {
|
|
|
+ margin: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+#contact-us #contact-form #form-right #email,
|
|
|
+#contact-us #contact-form #form-right #name,
|
|
|
+#contact-us #contact-form #form-right #phone {
|
|
|
+ background: none;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+#contact-us #form {
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+#contact-us #form #btn {
|
|
|
+ margin: 50px auto;
|
|
|
+ border: none;
|
|
|
+ padding: 15px;
|
|
|
+ background: #ffaf60;
|
|
|
+ color: #404854;
|
|
|
+ font-size: 20px;
|
|
|
+ width: 450px;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+#contact-us #form #btn:hover {
|
|
|
+ color: #fff;
|
|
|
+ background-color: #745c54;
|
|
|
+}
|
|
|
+
|
|
|
+#contact-us #form #phone {
|
|
|
+ position: absolute;
|
|
|
+ left: 500px;
|
|
|
+}
|
|
|
+
|
|
|
+#footer {
|
|
|
+ width: 100vw;
|
|
|
+ height: 130px;
|
|
|
+ background-color: #ffe4ca;
|
|
|
+ color: #9f5000;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 130px;
|
|
|
+}
|
|
|
+
|
|
|
+#footer a {
|
|
|
+ text-decoration: none;
|
|
|
+ color: #9f5000;
|
|
|
+}
|
|
|
+
|
|
|
+#footer p {
|
|
|
+ display: inline;
|
|
|
+}
|
|
|
+/*# sourceMappingURL=style.css.map */
|
jeter20131220
