.contact.main { height: 100%; overflow: auto; position: relative; /* background: #fff; */ } .header-bg { width: 100%; height: 520px; /* background: url('../images/contact/bg6.png'); background-size: cover; */ text-align: center; position: relative; padding: 260px 0 0 0; overflow: hidden; } .header-bg .header-bg-img{ background: url('../images/contact/bg6.png'); background-size: cover; background-position: center center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; animation: slowScale 3s forwards; -webkit-animation: slowScale 3s forwards; z-index: -1; } @keyframes slowScale { 0% {transform: scale(1);} 50% {transform: scale(1.2);} 100% {transform: scale(1);} } .contact-title { font-size: 58px; font-weight: normal; font-stretch: normal; line-height: 58px; letter-spacing: 0px; color: #ffffff; } .contact-en { font-size: 16px; font-weight: normal; font-stretch: normal; line-height: 58px; letter-spacing: 1px; color: #ffffff; } .contact-subtitle { font-size: 34px; font-weight: bold; font-stretch: normal; letter-spacing: 2px; color: #2c3035; text-align: center; margin-top: 87px; } .rectangle { width: 40px; height: 5px; background-color: #f08200; margin: 0 auto; margin-top: 26px; } .page3-logo { margin-top: 47px; overflow: hidden; } .page3-main { display: flex; align-items: center; } .page3-main:nth-child(n+1) { float: left; position: relative; overflow: hidden; width: 500px; margin-bottom: 26px; margin-left: 94px; } .page3-main:nth-child(2n) { float: left; position: relative; overflow: hidden; width: 420px; margin-bottom: 26px; margin-left: 90px; } .page3-main img{ float: left; } .page3-main .page3-item { float: left; margin-left: 26px; word-break: break-all; } .page3-title { font-size: 30px; } .page3-subtitle { font-size: 12px; margin-top:17px; line-height: 24px; width:194px; text-align: center; } .mask-back { transform: scale(1.3); transition: all .6s ease 0s; position: absolute; width: 100%; height: 205px; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #f08200; color: #fff; top: 0; opacity: 0; } .mask-back:hover { transform: scale(1); opacity: 1; } .contact-main { width: 1200px; margin: 0 auto; } .icon-title { font-size: 18px; font-weight: bold; font-stretch: normal; letter-spacing: 1px; margin-top: 11px; margin-bottom: 14px; font-family: Microsoft YaHei; text-align: left; } .icon-subtitle { font-size: 15px; font-family: Microsoft YaHei; font-weight: 400; color: #444444; line-height: 22px; text-align: left; } .contact-subtitle2 { margin-top: 185px; font-size: 34px; font-weight: bold; font-stretch: normal; line-height: 36px; letter-spacing: 2px; color: #2c3035; text-align: center; } .contact-address { text-align: center; margin-top: 71px; } .contact-address > div { display: inline-block; margin-right: 30px; margin-bottom: 30px; vertical-align: top; padding: 13px; } .contact-address > div:nth-child(1) { width: 570px; height: 350px; background-color: #3a3d4b; border-radius: 10px; background: url('../images/contact/bg9.png') no-repeat; } .contact-address > div:nth-child(2) { width: 370px; height: 350px; background-color: #3a3d4b; border-radius: 10px; background: url('../images/contact/bg10.png') no-repeat; } .contact-address > div:nth-child(3) { width: 270px; height: 350px; background-color: #3a3d4b; border-radius: 10px; background: url('../images/contact/bg8.png') no-repeat; } .contact-address > div:nth-child(4) { width: 370px; height: 350px; background-color: #3a3d4b; border-radius: 10px; background: url('../images/contact/bg7.png') no-repeat; } .contact-address > div:nth-child(5) { width: 270px; height: 350px; background-color: #3a3d4b; border-radius: 10px; background: url('../images/contact/bg1.png') no-repeat; } .contact-address .contact-address-item { text-align: left; width: 300px; } .contact-address > div:nth-child(7) { width: 330px; } .contact-address > div:nth-child(8) { width: 270px; } .contact-address > div:nth-child(10) { width: 330px; } .contact-address > div:nth-child(11) { width: 270px; } .contact-address .title{ height: 18px; font-size: 18px; font-family: Microsoft YaHei; font-weight: bold; color: #000000; line-height: 29px; display: inline-block; } .contact-address .subtitle { height: 38px; font-size: 14px; font-family: Microsoft YaHei; font-weight: 400; color: #666666; line-height: 24px; margin-top: 21px; } .address1 { font-size: 38px; font-weight: bold; font-stretch: normal; letter-spacing: 0px; color: #ffffff; margin-top: 150px; } .address2 { font-size: 14px; font-weight: normal; font-stretch: normal; letter-spacing: 1px; color: #ffffff; margin-top: 46px; } .contact-footer { width: 970px; margin: 0 auto; margin-top: 67px; margin-bottom: 200px; position: relative; } .contact-footer > div { display: inline-block; vertical-align: top; } .contact-footer > div:nth-child(2) { margin-left: 27%; } .contact-footer > div:nth-child(3) { margin-left: 27%; } .contact-footer > div > div { font-weight: bold; font-stretch: normal; line-height: 36px; letter-spacing: 1px; color: #333333; text-align: center; } .contact-footer > div > img { margin-bottom: 32px; } .vertical1 { width: 1px; height: 225px; background-color: #cccccc; opacity: 0.5; position: absolute; left: 30%; top: 30%; } .vertical2 { width: 1px; height: 225px; background-color: #cccccc; opacity: 0.5; position: absolute; right: 30%; top: 30%; } /* 英语/日语适配 */ body.en .contact-footer, body.ja .contact-footer{ display: flex; justify-content: space-between; } body.en .contact-footer > div, body.ja .contact-footer > div{ width: 130px; display: flex; flex-direction: column; align-items: center; white-space: nowrap; overflow: visible; } body.en .contact-footer > div.vertical1, body.en .contact-footer > div.vertical2, body.ja .contact-footer > div.vertical1, body.ja .contact-footer > div.vertical2 { width: 1px; } @media (max-width: 960px) { .header-bg { padding: 200px 0 0 0; height: 400px; } .contact-title { font-size: 40px; } .contact-main { width: 80%; } .page3-logo { text-align: center; } .contact-address > div { width: 370px !important; background-size: 100% 100% !important; } .contact-footer { width: 100%; } .contact-footer > div { display: block; text-align: center; } .contact-footer > div:nth-child(2) { margin: 0; } .contact-footer > div:nth-child(3) { margin: 0; } .vertical1 { display: none !important; } .vertical2 { display: none !important; } body.en .contact-footer, body.ja .contact-footer{ display: block; } body.en .contact-footer > div, body.ja .contact-footer > div { width: 100%; } } @media (max-width: 500px) { .contact-address > div { width: 280px !important; background-size: 100% 100% !important; margin: 12px auto; } .contact-title { font-size: 28px; } .header-bg { height: auto; background-size: cover; padding: 100px 0px; height: 270px; } .page3-main { margin: 0 !important; margin-bottom: 30px !important; } .page3-main img{ width: 100px; height: 70px; } .icon-title {font-size: 14px;} .icon-subtitle {font-size: 12px;} }