|
@@ -77,19 +77,22 @@ body .learn-more:hover {
|
|
|
}
|
|
|
|
|
|
#Navigation #link,
|
|
|
-#Navigation .link2 {
|
|
|
+#Navigation .link2,
|
|
|
+#Navigation .link3 {
|
|
|
padding: 4vw 1vw 2vw 1vw;
|
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 767px) {
|
|
|
#Navigation #link,
|
|
|
- #Navigation .link2 {
|
|
|
+ #Navigation .link2,
|
|
|
+ #Navigation .link3 {
|
|
|
display: none;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
#Navigation #link a,
|
|
|
-#Navigation .link2 a {
|
|
|
+#Navigation .link2 a,
|
|
|
+#Navigation .link3 a {
|
|
|
text-decoration: none;
|
|
|
color: #fff;
|
|
|
letter-spacing: 1px;
|
|
@@ -101,12 +104,14 @@ body .learn-more:hover {
|
|
|
}
|
|
|
|
|
|
#Navigation #link a :hover,
|
|
|
-#Navigation .link2 a :hover {
|
|
|
+#Navigation .link2 a :hover,
|
|
|
+#Navigation .link3 a :hover {
|
|
|
opacity: 0.8;
|
|
|
}
|
|
|
|
|
|
#Navigation #link a:after,
|
|
|
-#Navigation .link2 a:after {
|
|
|
+#Navigation .link2 a:after,
|
|
|
+#Navigation .link3 a:after {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
width: 80%;
|
|
@@ -122,20 +127,23 @@ body .learn-more:hover {
|
|
|
|
|
|
@media screen and (max-width: 767px) {
|
|
|
#Navigation #link a:after,
|
|
|
- #Navigation .link2 a:after {
|
|
|
+ #Navigation .link2 a:after,
|
|
|
+ #Navigation .link3 a:after {
|
|
|
display: none;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
#Navigation #link a:hover:after,
|
|
|
-#Navigation .link2 a:hover:after {
|
|
|
+#Navigation .link2 a:hover:after,
|
|
|
+#Navigation .link3 a:hover:after {
|
|
|
width: 80%;
|
|
|
opacity: 1;
|
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
|
#Navigation #link a,
|
|
|
- #Navigation .link2 a {
|
|
|
+ #Navigation .link2 a,
|
|
|
+ #Navigation .link3 a {
|
|
|
padding: 5px;
|
|
|
padding-top: 2vw;
|
|
|
}
|
|
@@ -151,6 +159,10 @@ body .learn-more:hover {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+#Navigation .link3 {
|
|
|
+ padding: 4vw 1vw 1vw 0.5vw;
|
|
|
+}
|
|
|
+
|
|
|
#Navigation #socail-link {
|
|
|
padding: 4vw 5vw 2vw 1vw;
|
|
|
text-align: right;
|
|
@@ -844,7 +856,7 @@ body .learn-more:hover {
|
|
|
|
|
|
.wrap .adv-banner {
|
|
|
width: 100%;
|
|
|
- height: 90vh;
|
|
|
+ height: 55vw;
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
display: -webkit-box;
|
|
@@ -867,19 +879,35 @@ body .learn-more:hover {
|
|
|
.wrap .adv-banner video {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
- height: 90%;
|
|
|
+ height: 100%;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
-o-object-fit: cover;
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
|
|
|
+@media screen and (max-width: 767px) {
|
|
|
+ #sec-works {
|
|
|
+ margin: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
#sec-works .sec-work-container {
|
|
|
width: 85vw;
|
|
|
}
|
|
|
|
|
|
+@media screen and (max-width: 767px) {
|
|
|
+ #sec-works .sec-work-container {
|
|
|
+ width: 80vw;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+#sec-works #sec-work-box .work-box {
|
|
|
+ margin: 10px;
|
|
|
+}
|
|
|
+
|
|
|
#sec-works #sec-work-box .work-box .card {
|
|
|
- height: 800px;
|
|
|
+ height: 850px;
|
|
|
text-align: center;
|
|
|
display: inline-block !important;
|
|
|
-webkit-transition: 0.3s;
|
|
@@ -1269,14 +1297,14 @@ body .learn-more:hover {
|
|
|
}
|
|
|
|
|
|
#sec04 #sec04-container {
|
|
|
- background: -webkit-gradient(linear, left top, left bottom, color-stop(15%, #414141), color-stop(0%, #eee));
|
|
|
- background: linear-gradient(180deg, #414141 15%, #eee 0%);
|
|
|
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #414141), color-stop(0%, #fff));
|
|
|
+ background: linear-gradient(180deg, #414141 30%, #fff 0%);
|
|
|
padding: 20px;
|
|
|
padding-bottom: 50px;
|
|
|
}
|
|
|
|
|
|
#sec04 #sec04-container .card {
|
|
|
- border: none;
|
|
|
+ padding: 5px;
|
|
|
border-radius: 0%;
|
|
|
}
|
|
|
|
|
@@ -2242,7 +2270,7 @@ body .learn-more:hover {
|
|
|
|
|
|
#sec08 #sec08-title .col-lg-9 #OUR-PARTNER {
|
|
|
position: absolute;
|
|
|
- top: -10px;
|
|
|
+ top: 20px;
|
|
|
right: 0vw;
|
|
|
}
|
|
|
|
|
@@ -2253,7 +2281,7 @@ body .learn-more:hover {
|
|
|
}
|
|
|
|
|
|
#sec08 #sec08-title .col-lg-9 #OUR-PARTNER h5 {
|
|
|
- font-size: 5em;
|
|
|
+ font-size: 48px;
|
|
|
opacity: 0.8;
|
|
|
/* 文字的距離 */
|
|
|
/* 通常搭配內距左邊 */
|
|
@@ -2274,7 +2302,7 @@ body .learn-more:hover {
|
|
|
#sec08 #sec08-title h1 {
|
|
|
padding: 10px;
|
|
|
color: #fff;
|
|
|
- font-size: 45px;
|
|
|
+ font-size: 48px;
|
|
|
font-weight: 900;
|
|
|
}
|
|
|
|
|
@@ -2357,8 +2385,8 @@ body .learn-more:hover {
|
|
|
|
|
|
#sec09 .col-lg-9 #TRADING {
|
|
|
position: absolute;
|
|
|
- right: -10px;
|
|
|
- top: -180px;
|
|
|
+ right: -1px;
|
|
|
+ top: -50px;
|
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 767px) {
|
|
@@ -2375,7 +2403,7 @@ body .learn-more:hover {
|
|
|
}
|
|
|
|
|
|
#sec09 .col-lg-9 #TRADING h5 {
|
|
|
- font-size: calc(7rem + (1.3-1.2) * ((100vw - 600px) / (1200 - 600)));
|
|
|
+ font-size: 48px;
|
|
|
opacity: 0.8;
|
|
|
/* 文字的距離 */
|
|
|
/* 通常搭配內距左邊 */
|
|
@@ -2399,12 +2427,12 @@ body .learn-more:hover {
|
|
|
}
|
|
|
|
|
|
#sec09 #sec09-title {
|
|
|
- padding-top: 15vw;
|
|
|
+ padding-top: 10vw;
|
|
|
}
|
|
|
|
|
|
#sec09 #sec09-title h1 {
|
|
|
color: #fff;
|
|
|
- font-size: 45px;
|
|
|
+ font-size: 48px;
|
|
|
font-weight: 900;
|
|
|
padding: 5px 10px;
|
|
|
}
|
|
@@ -2672,10 +2700,15 @@ body .learn-more:hover {
|
|
|
font-size: 24px;
|
|
|
}
|
|
|
|
|
|
-.ip-service {
|
|
|
+#sec13 {
|
|
|
+ background-image: url(./img/sec04banner.jpg);
|
|
|
+ background-size: cover;
|
|
|
+}
|
|
|
+
|
|
|
+#sec13 .left .ip-service {
|
|
|
width: 50vw;
|
|
|
padding: 30px;
|
|
|
- margin: 30px auto 0;
|
|
|
+ margin: 0px auto;
|
|
|
background: #252628;
|
|
|
-webkit-box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
|
|
|
box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
|
|
@@ -2685,36 +2718,38 @@ body .learn-more:hover {
|
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 767px) {
|
|
|
- .ip-service {
|
|
|
+ #sec13 .left .ip-service {
|
|
|
width: 100vw;
|
|
|
+ margin: 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.ip-service img {
|
|
|
+#sec13 .left .ip-service img {
|
|
|
width: 200px;
|
|
|
}
|
|
|
|
|
|
-.ip-service #name,
|
|
|
-.ip-service #email,
|
|
|
-.ip-service #phone,
|
|
|
-.ip-service #loc,
|
|
|
-.ip-service #selector1, .ip-service #work {
|
|
|
+#sec13 .left .ip-service #name,
|
|
|
+#sec13 .left .ip-service #email,
|
|
|
+#sec13 .left .ip-service #phone,
|
|
|
+#sec13 .left .ip-service #loc,
|
|
|
+#sec13 .left .ip-service #selector1,
|
|
|
+#sec13 .left .ip-service #work {
|
|
|
width: 100%;
|
|
|
height: 35px;
|
|
|
margin: 10px 0;
|
|
|
padding: 20px 5px;
|
|
|
- background: #1B1C1E;
|
|
|
+ background: #1b1c1e;
|
|
|
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
|
|
|
-.ip-service #selector1 {
|
|
|
+#sec13 .left .ip-service #selector1 {
|
|
|
padding: 10px 5px;
|
|
|
background: none;
|
|
|
border: none;
|
|
|
}
|
|
|
|
|
|
-.ip-service .btn {
|
|
|
+#sec13 .left .ip-service .btn {
|
|
|
width: 200px;
|
|
|
margin: 30px 0px;
|
|
|
padding: 15px 0;
|
|
@@ -2724,9 +2759,54 @@ body .learn-more:hover {
|
|
|
color: #fff;
|
|
|
}
|
|
|
|
|
|
-.ip-service .btn:hover {
|
|
|
+#sec13 .left .ip-service .btn:hover {
|
|
|
color: #93000a;
|
|
|
background: #fff;
|
|
|
border: 1px solid #93000a;
|
|
|
}
|
|
|
+
|
|
|
+#sec13 .right img {
|
|
|
+ margin: 0px 50px;
|
|
|
+}
|
|
|
+
|
|
|
+#sec13 .right h1 {
|
|
|
+ margin: 10px 50px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 900;
|
|
|
+ font-size: 72px;
|
|
|
+ margin-bottom: 50px;
|
|
|
+}
|
|
|
+
|
|
|
+#sec13 .right h2 {
|
|
|
+ padding: 30px;
|
|
|
+ margin: 20px 5px;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 900;
|
|
|
+ font-size: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+#sec13 .right ul {
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 900;
|
|
|
+ font-size: 45px;
|
|
|
+}
|
|
|
+
|
|
|
+#sec-service {
|
|
|
+ background: #000;
|
|
|
+}
|
|
|
+
|
|
|
+#sec-service h5 {
|
|
|
+ font-size: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+#sec-service p {
|
|
|
+ font-size: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+#sec-service h1 {
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 900;
|
|
|
+ font-size: 72px;
|
|
|
+}
|
|
|
/*# sourceMappingURL=style.css.map */
|