|
|
@@ -1577,6 +1577,7 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
|
|
|
|
/* 成家故事作品集內頁-simple_korean_style_hous end */
|
|
|
|
|
|
+/* 成家設計服務-room_planner start */
|
|
|
/* 成家設計服務-room_planner start */
|
|
|
.f-78B142-20 {
|
|
|
color: #78b142;
|
|
|
@@ -1657,11 +1658,11 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
|
border-radius: 2%;
|
|
|
color: #000;
|
|
|
font-family: NSJP-500;
|
|
|
- background: linear-gradient(#fff 50%, #e0ee79 100%);
|
|
|
+ background: linear-gradient(#f0f6dd 50%, #e0ee79 100%);
|
|
|
}
|
|
|
}
|
|
|
.room-planner-service-no {
|
|
|
- font-family: NSJP-500;
|
|
|
+ font-family: "Quicksand", sans-serif;
|
|
|
font-size: 36px;
|
|
|
color: #649e2e;
|
|
|
}
|
|
|
@@ -1858,7 +1859,7 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
|
width: 60%;
|
|
|
margin: 0 auto;
|
|
|
position: relative;
|
|
|
-
|
|
|
+
|
|
|
@media screen and (max-width: 1199px) {
|
|
|
width: 65%;
|
|
|
}
|
|
|
@@ -1868,9 +1869,13 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
|
}
|
|
|
.room-planner-process-box_line_01 {
|
|
|
position: absolute;
|
|
|
- width: 48vw;
|
|
|
+ width: 46vw;
|
|
|
top: 40px;
|
|
|
- right: 100px;
|
|
|
+ right:100px;
|
|
|
+ @media screen and (min-width: 2500px) {
|
|
|
+
|
|
|
+ right:200px;
|
|
|
+ }
|
|
|
@media screen and (max-width: $table) {
|
|
|
width: 60vw;
|
|
|
}
|
|
|
@@ -1890,12 +1895,13 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
|
.room-planner-process-box_mb_line {
|
|
|
display: none;
|
|
|
background-repeat: no-repeat;
|
|
|
- background-image: url(/img/blog/mobile_line_01.png);
|
|
|
+ background-size: contain;
|
|
|
+ background-image: url(/img/room_planner/mb_line01.svg);
|
|
|
width: 40vw;
|
|
|
position: absolute;
|
|
|
top: 32%;
|
|
|
left: 60%;
|
|
|
- height: 6px;
|
|
|
+ height: 3px;
|
|
|
z-index: 10px;
|
|
|
@media screen and (max-width: 767px) {
|
|
|
display: block;
|
|
|
@@ -1905,7 +1911,7 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
|
display: none;
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: contain;
|
|
|
- background-image: url(/img/room_planner/mb_line_02.png);
|
|
|
+ background-image: url(/img/room_planner/mb_line02.svg);
|
|
|
width: 100%;
|
|
|
position: absolute;
|
|
|
top: 90%;
|
|
|
@@ -2132,13 +2138,27 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
|
}
|
|
|
.main-content-bg-line {
|
|
|
position: absolute;
|
|
|
- top: -95px;
|
|
|
+ @media screen and (min-width: 2500px) {
|
|
|
+ right: -60px;
|
|
|
+ top: -100px;
|
|
|
+ width:18.5vw ;
|
|
|
+ height: 1950px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 1921px) {
|
|
|
+ right: -60px;
|
|
|
+ top: -75px;
|
|
|
+ width:24vw;
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 1441px) {
|
|
|
+ top: -95px;
|
|
|
right: -90px;
|
|
|
z-index: -5;
|
|
|
width: 34.7vw;
|
|
|
- @media screen and (max-width: 1200px) {
|
|
|
- width: 36vw;
|
|
|
}
|
|
|
+ // @media screen and (max-width: 1200px) {
|
|
|
+ // width: 36vw;
|
|
|
+ // }
|
|
|
}
|
|
|
.bg01-hand {
|
|
|
margin-top: -100px;
|
|
|
@@ -2150,39 +2170,154 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
|
bottom: -130px;
|
|
|
}
|
|
|
.step2 {
|
|
|
- margin-top: -50px;
|
|
|
- @media screen and (max-width: 1200px) {
|
|
|
+ @media screen and (min-width: 2500px) {
|
|
|
+ width: 75%;
|
|
|
+ margin-top: -130px;
|
|
|
+ margin-left: 130px;
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 1921px) {
|
|
|
+ width: 90%;
|
|
|
+ margin-top: -130px;
|
|
|
+
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 1441px) {
|
|
|
margin-top: -30px;
|
|
|
}
|
|
|
}
|
|
|
.step1-0 {
|
|
|
- width: 40%;
|
|
|
+
|
|
|
+ @media screen and (min-width: 2500px) {
|
|
|
+ width: 30%;
|
|
|
+ margin-top: -100px;
|
|
|
+ margin-left: 200px;
|
|
|
+ }
|
|
|
+ // 1920
|
|
|
+ @media screen and (max-width: 1921px) {
|
|
|
+ width: 40%;
|
|
|
+ margin-top: -30px;
|
|
|
+ margin-left: 100px;
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 1441px) {
|
|
|
+ width: 40%;
|
|
|
+ margin-left: 0px;
|
|
|
+ margin-top: 0px;
|
|
|
+ }
|
|
|
}
|
|
|
.step1-1 {
|
|
|
- width: 90%;
|
|
|
- margin-left: 30px;
|
|
|
+ @media screen and (min-width: 2500px) {
|
|
|
+ width: 60%;
|
|
|
+ margin-top: -50px;
|
|
|
+ margin-left: 250px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media screen and (max-width: 1921px) {
|
|
|
+ width: 80%;
|
|
|
+ margin-top: -80px;
|
|
|
+ margin-left: 80px;
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 1441px) {
|
|
|
+ width: 90%;
|
|
|
+ margin-left: 30px;
|
|
|
+ margin-top: 0px;
|
|
|
+ }
|
|
|
}
|
|
|
.step3 {
|
|
|
- width: 90%;
|
|
|
- margin-top: 30px;
|
|
|
+
|
|
|
+ @media screen and (min-width: 2500px) {
|
|
|
+ width: 75%;
|
|
|
+ margin-top: -120px;
|
|
|
+ margin-left: 120px;
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 1921px) {
|
|
|
+ width: 80%;
|
|
|
+ margin-top: -50px;
|
|
|
+ margin-left: 60px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media screen and (max-width: 1441px) {
|
|
|
+ width: 90%;
|
|
|
+ margin-top: 30px;
|
|
|
+ margin-left: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
.step4 {
|
|
|
- width: 60%;
|
|
|
- margin-right: 50px;
|
|
|
- margin-top: -30px;
|
|
|
+ @media screen and (min-width: 2500px) {
|
|
|
+ width: 40%;
|
|
|
+ margin-top: 50px;
|
|
|
+ margin-right: 50px;
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 1921px) {
|
|
|
+ width: 50%;
|
|
|
+ margin-top: -100px;
|
|
|
+ margin-right: 80px;
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 1441px) {
|
|
|
+ width: 60%;
|
|
|
+ margin-right: 50px;
|
|
|
+ margin-top: -30px;
|
|
|
+ }
|
|
|
}
|
|
|
.step5 {
|
|
|
- margin-top: 30px;
|
|
|
+ @media screen and (min-width: 2500px) {
|
|
|
+ width: 80%;
|
|
|
+ margin-top: -130px;
|
|
|
+ margin-left: 120px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media screen and (max-width: 1921px) {
|
|
|
+ width: 90%;
|
|
|
+ margin-top: -100px;
|
|
|
+ margin-left: 50px;
|
|
|
+ }
|
|
|
+ // @media screen and (min-width: 1441px) {
|
|
|
+ // width: 90%;
|
|
|
+ // margin-top: -100px;
|
|
|
+ // }
|
|
|
+ @media screen and (max-width: 1441px) {
|
|
|
+ margin-top: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
.step5-2 {
|
|
|
- margin-right: 70px;
|
|
|
- margin-top: -50px;
|
|
|
+ @media screen and (min-width: 2500px) {
|
|
|
+ width: 30%;
|
|
|
+ margin-right: -30px;
|
|
|
+ margin-top: -100px;
|
|
|
+
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 1441px) {
|
|
|
+ margin-right: 80px;
|
|
|
+ margin-top: -80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media screen and (max-width: 1921px) {
|
|
|
+ margin-right: 0px;
|
|
|
+ margin-top: -80px;
|
|
|
+ }
|
|
|
}
|
|
|
.meihaochengjia {
|
|
|
- width: 130px;
|
|
|
+
|
|
|
position: absolute;
|
|
|
- right: 30px;
|
|
|
- top: 20px;
|
|
|
+ @media screen and (min-width: 2500px) {
|
|
|
+ width: 130px;
|
|
|
+ position: absolute;
|
|
|
+ right: 50px;
|
|
|
+ top: -10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media screen and (max-width: 1921px) {
|
|
|
+ width: 130px;
|
|
|
+ position: absolute;
|
|
|
+ right: 50px;
|
|
|
+ top: 20px;
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 1441px) {
|
|
|
+ width: 130px;
|
|
|
+ position: absolute;
|
|
|
+ right: 30px;
|
|
|
+ top: 50px;
|
|
|
+ }
|
|
|
}
|
|
|
.room-planner-process-main-box {
|
|
|
width: 95%;
|
|
|
@@ -2286,6 +2421,21 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
|
animation-iteration-count: infinite;
|
|
|
animation-direction: alternate;
|
|
|
animation-timing-function: ease-in-out;
|
|
|
+ @media screen and (min-width: 2560px) {
|
|
|
+ top:40px;
|
|
|
+ right: 170px;
|
|
|
+
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 1921px) {
|
|
|
+ bottom: -15px;
|
|
|
+ right: 170px;
|
|
|
+
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 1441px) {
|
|
|
+ bottom: -30px;
|
|
|
+ right: 170px;
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
.room-planner-process-main-star-line {
|
|
|
position: absolute;
|
|
|
@@ -2297,6 +2447,21 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
|
animation-iteration-count: infinite;
|
|
|
animation-direction: alternate;
|
|
|
animation-timing-function: ease-in-out;
|
|
|
+ @media screen and (min-width: 2560px) {
|
|
|
+ top:50px;
|
|
|
+ right: 40px;
|
|
|
+
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 1921px) {
|
|
|
+ bottom: -15px;
|
|
|
+ right: 15px;
|
|
|
+
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 1441px) {
|
|
|
+ bottom: -40px;
|
|
|
+ right: 15px;
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
.room-planner-process-main-star-yellow {
|
|
|
position: absolute;
|
|
|
@@ -2307,8 +2472,23 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
|
animation-delay: 0;
|
|
|
animation-iteration-count: infinite;
|
|
|
animation-direction: alternate-reverse;
|
|
|
-
|
|
|
animation-timing-function: linear;
|
|
|
+ @media screen and (min-width: 2560px) {
|
|
|
+ top:-15px;
|
|
|
+ right: 15px;
|
|
|
+
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 1921px) {
|
|
|
+ top: 5px;
|
|
|
+ right: 5px;
|
|
|
+
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 1441px) {
|
|
|
+ right: -15px;
|
|
|
+ top: 50px;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
.room-planner-process-main-content-step-img {
|
|
|
@@ -2316,6 +2496,10 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
|
}
|
|
|
|
|
|
.room-planner-process-main-content-step-4-6img {
|
|
|
+ @media screen and (min-width: 2500px) {
|
|
|
+ margin-top: 200px;
|
|
|
+
|
|
|
+ }
|
|
|
margin-top: 380px;
|
|
|
}
|
|
|
.stepbox {
|
|
|
@@ -2655,10 +2839,15 @@ input[type="search"]::-webkit-search-cancel-button {
|
|
|
}
|
|
|
|
|
|
.hover_up {
|
|
|
- transition: 0.3s;
|
|
|
+ // transition: 0.3s;
|
|
|
cursor: pointer;
|
|
|
&:hover {
|
|
|
- transform: translate(0, -20px) !important;
|
|
|
+ animation: float 1.5s ease-out infinite;
|
|
|
+ }
|
|
|
+}
|
|
|
+@keyframes float {
|
|
|
+ 50% {
|
|
|
+ transform: translate(0, -20px);
|
|
|
}
|
|
|
}
|
|
|
|
