|
|
@@ -19,6 +19,7 @@ body {
|
|
|
|
|
|
.body-content {
|
|
|
overflow: hidden;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
#Navigation {
|
|
|
@@ -269,7 +270,7 @@ body {
|
|
|
}
|
|
|
|
|
|
.banner .banner-content {
|
|
|
- width: 62vw;
|
|
|
+ width: 70vw;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
|
|
|
@@ -279,23 +280,93 @@ body {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+.banner .banner-content #lux-banner {
|
|
|
+ display: -ms-grid;
|
|
|
+ display: grid;
|
|
|
+ -ms-grid-columns: 1fr 1fr 1fr;
|
|
|
+ grid-template-columns: 1fr 1fr 1fr;
|
|
|
+ width: 65vw;
|
|
|
+ margin-left: 5vw;
|
|
|
+}
|
|
|
+
|
|
|
+.banner .banner-content #lux-banner .lux-01 {
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 150px 150px 0% 0%;
|
|
|
+ margin-top: 3vw;
|
|
|
+ width: 17vw;
|
|
|
+ height: 30vw;
|
|
|
+}
|
|
|
+
|
|
|
+.banner .banner-content #lux-banner .lux-01 img {
|
|
|
+ position: relative;
|
|
|
+ bottom: 30px;
|
|
|
+ width: 100%;
|
|
|
+ -webkit-transform: scale(1.2);
|
|
|
+ transform: scale(1.2);
|
|
|
+ height: 35vw;
|
|
|
+}
|
|
|
+
|
|
|
+.banner .banner-content #lux-banner .lux-02 {
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 150px 150px 0% 0%;
|
|
|
+ width: 17vw;
|
|
|
+ height: 33vw;
|
|
|
+}
|
|
|
+
|
|
|
+.banner .banner-content #lux-banner .lux-02 img {
|
|
|
+ position: relative;
|
|
|
+ bottom: 30px;
|
|
|
+ width: 100%;
|
|
|
+ -webkit-transform: scale(1.2);
|
|
|
+ transform: scale(1.2);
|
|
|
+ height: 35vw;
|
|
|
+ -o-object-fit: cover;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+
|
|
|
+.banner .banner-content #lux-banner .lux-03 {
|
|
|
+ overflow: hidden;
|
|
|
+ border-radius: 150px 150px 0% 0%;
|
|
|
+ margin-top: 3vw;
|
|
|
+ width: 17vw;
|
|
|
+ height: 30vw;
|
|
|
+}
|
|
|
+
|
|
|
+.banner .banner-content #lux-banner .lux-03 img {
|
|
|
+ position: relative;
|
|
|
+ bottom: 30px;
|
|
|
+ width: 100%;
|
|
|
+ -webkit-transform: scale(1.2);
|
|
|
+ transform: scale(1.2);
|
|
|
+ height: 35vw;
|
|
|
+ -o-object-fit: cover;
|
|
|
+ object-fit: cover;
|
|
|
+}
|
|
|
+
|
|
|
.banner .banner-content .banner-title {
|
|
|
margin-top: 8vw;
|
|
|
+ width: 65vw;
|
|
|
+ margin-left: 3vw;
|
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 767px) {
|
|
|
.banner .banner-content .banner-title {
|
|
|
margin-top: 20vw;
|
|
|
+ width: 100%;
|
|
|
+ margin-left: 0vw;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.banner .banner-content .banner-title #title-des {
|
|
|
+ margin: 0 auto;
|
|
|
-webkit-animation-name: title;
|
|
|
animation-name: title;
|
|
|
-webkit-animation-duration: 2s;
|
|
|
animation-duration: 2s;
|
|
|
-webkit-animation-delay: 0.5s;
|
|
|
animation-delay: 0.5s;
|
|
|
+ -webkit-animation-fill-mode: backwards;
|
|
|
+ animation-fill-mode: backwards;
|
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 767px) {
|
|
|
@@ -636,7 +707,7 @@ body {
|
|
|
}
|
|
|
|
|
|
.sec02 {
|
|
|
- background: url(./img/sec02/sec02-bg.png);
|
|
|
+ background: url(./img/bg.png);
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: cover;
|
|
|
}
|
|
|
@@ -686,6 +757,8 @@ body {
|
|
|
z-index: 30;
|
|
|
top: -5vw;
|
|
|
left: 4.5vw;
|
|
|
+ -webkit-transition: 0.5s;
|
|
|
+ transition: 0.5s;
|
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
|
@@ -700,9 +773,26 @@ body {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+.sec02 .sec02-content .object177 {
|
|
|
+ right: -1vw;
|
|
|
+ width: 500px;
|
|
|
+ top: 15vw;
|
|
|
+ -webkit-transition: 0.5s;
|
|
|
+ transition: 0.5s;
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (max-width: 1024px) {
|
|
|
+ .sec02 .sec02-content .object177 {
|
|
|
+ width: 300px;
|
|
|
+ top: 10vw;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.sec02 .sec02-content .object188 {
|
|
|
width: 180px;
|
|
|
left: 42vw;
|
|
|
+ -webkit-transition: 0.5s;
|
|
|
+ transition: 0.5s;
|
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
|
@@ -1040,6 +1130,8 @@ body {
|
|
|
width: 450px;
|
|
|
top: -7vw;
|
|
|
left: -10vw;
|
|
|
+ -webkit-transition: 0.5s;
|
|
|
+ transition: 0.5s;
|
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
|
@@ -1050,9 +1142,26 @@ body {
|
|
|
|
|
|
@media screen and (max-width: 767px) {
|
|
|
.sec04 .sec04-content .object182 {
|
|
|
- width: 250px;
|
|
|
- left: 64vw;
|
|
|
- top: -30vw;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.sec04 .sec04-content .object182-m {
|
|
|
+ top: -7vw;
|
|
|
+ width: 250px;
|
|
|
+ left: 64vw;
|
|
|
+ top: -30vw;
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (max-width: 1024px) {
|
|
|
+ .sec04 .sec04-content .object182-m {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (min-width: 1025px) {
|
|
|
+ .sec04 .sec04-content .object182-m {
|
|
|
+ display: none;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1166,6 +1275,8 @@ body {
|
|
|
left: -8vw;
|
|
|
z-index: 0;
|
|
|
top: 18vw;
|
|
|
+ -webkit-transition: 0.5s;
|
|
|
+ transition: 0.5s;
|
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
|
@@ -1185,6 +1296,8 @@ body {
|
|
|
right: -6vw;
|
|
|
top: 18vw;
|
|
|
z-index: 1;
|
|
|
+ -webkit-transition: 0.5s;
|
|
|
+ transition: 0.5s;
|
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 1024px) {
|
jeter20131220
