.swiper-container-h { width: 100%; height: 100%; margin-left: auto; margin-right: auto; } .swiper-container-v { width: 100%; height: 100%; background: #000; } .mobile { display: none; } .modal { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 99999; background-color: rgb(0, 0, 0, .5); display: none; } .modal .wrapper { width: 880px; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); background: #fff; border-radius: 2px; -webkit-box-shadow: 0 1px 3px rgb(0 0 0 / 30%); box-shadow: 0 1px 3px rgb(0 0 0 / 30%); -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; } .modal .wrapper .wrapper-header { position: relative; padding: 14px 20px; line-height: 32px; background-color: #f5f5f5; } .modal .wrapper .wrapper-header .header-title { font-size: 18px; font-weight: 400; color: #424242; vertical-align: middle; } .modal .wrapper .wrapper-header .header-close { position: absolute; right: 14px; top: 14px; display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; color: #757575; cursor: pointer; -webkit-transition: all .2s; transition: all .2s; z-index: 10; border-radius: 15px; font-size: 24px; } .modal .wrapper-content { width: 100%; height: 100%; } .swiper-slide-h { font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: relative; overflow: hidden; } .video { visibility: visible; position: absolute; top: 31%; left: 4%; } .video-tvc { object-fit: cover; width: 100%; height: 100%; } .video-bg { width: 100%; height: 100%; background: url('../images/walk_in_ims/bg_first.jpg') no-repeat; background-size: cover; } .content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; display: flex; justify-content: center; flex-wrap: wrap; background: rgba(0, 0, 0, .3); } .swiper-slide-v { font-size: 18px; color:#fff; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 40px 60px; } .page2 { display: none; } .parallax-bg { position: absolute; left: 0; top: 0; width: 130%; height: 100%; -webkit-background-size: cover; background-size: cover; background-position: center; background-color: #000; } .split-line{ width: 2px; height: 75%; background: #f08200; opacity: 0.3; position: absolute; left: 35%; bottom: 0; } .left-first { float: left; margin-left: 8%; margin-top: 20%; } .left-second { float: left; margin-left: 14%; margin-top: 10%; } .left-third { float: right; margin-right: 8%; margin-top: 20%; opacity: .7; } .swiper-slide-v .title { font-weight: 300; overflow: hidden; } .swiper-slide-v .subtitle { font-size: 21px; margin-top: 30px; font-size: 18px; font-weight: normal; font-stretch: normal; letter-spacing: 2px; color: #ffffff; opacity: 0.8; position: relative; } .subtitle:before { width: 16px; height: 16px; border-radius: 50%; background-color: #f08200; content: ''; position: absolute; top: 4px; } .swiper-slide-v .text { font-size: 14px; max-width: 400px; line-height: 1.3; } .swiper-pagination-bullet { background-color: #eee; } .swiper-slide-h-2 { background: url('../images/walk_in_ims/ims-bg.png') no-repeat; background-size: cover; height: 100%; width: 100%; position: absolute; } .swiper-slide-h-3 { background-color: #fff; background: url('../images/walk_in_ims/ims-four-bg.png') no-repeat; background-size: cover; height: 100%; width: 100%; position: absolute; } .swiper-slide-h-4 { background-color: #fff; background: url('../images/walk_in_ims/limeng-bg.png') no-repeat; background-size: cover; height: 100%; width: 100%; position: absolute; } .swiper-slide-h-4-persion { background-color: #fff; background: url('../images/walk_in_ims/limeng-photo.png') no-repeat; background-size: cover; height: 100%; width: 604px; position: absolute; left: 16%; } .swiper-slide-h-4-persion.mobile { background-color: #fff; background: url('../images/walk_in_ims/persion.jpeg') no-repeat; background-size: cover; height: 100%; width: 604px; position: absolute; left: 16%; } .rectangle { width: 182px; height: 182px; background-color: #f08200; position: absolute; left: 36%; top: 0; } .vertical { width: 4px; height: 130px; background-color: #f08200; position: absolute; left: 3%; bottom: 0; } .vertical-page3 { width: 4px; height: 130px; background-color: #f08200; position: absolute; left: 3%; top: 0; } .ims-ims { font-size: 48px; font-weight: normal; font-stretch: normal; letter-spacing: 4px; color: #ffffff; } .b-2-b-b-2-b-2-c { width: 1003px; font-size: 24px; font-weight: normal; font-stretch: normal; line-height: 48px; letter-spacing: 2px; color: #ffffff; margin: 0 auto; margin-top: 64px; } .ja .ims-ims, .en .ims-ims { font-size: 30px; } .ja .b-2-b-b-2-b-2-c,.en .b-2-b-b-2-b-2-c{ font-size: 14px; line-height: 28px; } .no-select { -moz-user-select:none;/*火狐*/ -webkit-user-select:none;/*webkit浏览器*/ -ms-user-select:none;/*IE10*/ -khtml-user-select:none;/*早期浏览器*/ user-select:none; } .page1 { width: 100%; height: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .page1-bg { animation: slowScale 6s forwards; -webkit-animation: slowScale 6s forwards; } @keyframes slowScale { 0% {transform: scale(1);} 100% {transform: scale(1.2);} } .page1-content { position: absolute; left: 51%; text-align: left; margin-top: 5.5%; } .page2-text-title { font-size: 50px; font-weight: normal; letter-spacing: 0px; color: #ffffff; margin-bottom: 30px; } .subscript { width: 40px; height: 5px; background-color: #f08200; margin-left: 60px; } .about-ims { height: 18px; font-size: 22px; font-weight: normal; font-stretch: normal; line-height: 32px; letter-spacing: 0px; color: #ffffff; margin: 34px 0 0 20px; } .about-ims-text { width: 598px; font-size: 24px; font-weight: normal; font-stretch: normal; line-height: 48px; letter-spacing: 2px; color: #ffffff; margin-top: 67px; } .page3-text-title { width: 710px; font-size: 50px; font-weight: normal; font-stretch: normal; line-height: 58px; letter-spacing: 0px; color: #171b25; margin: 0 auto; margin-top:3%; } .ja .page3-text-title, .en .page3-text-title { width: 100%; font-size: 24px; text-align: center; } .page3-text-des { width: 1149px; font-size: 24px; font-weight: normal; font-stretch: normal; line-height: 48px; letter-spacing: 0px; color: #000000; opacity: 0.8; margin: 0 auto; margin-top: 2%; word-break:break-all; } .ja .page3-text-des, .en .page3-text-des { font-size: 14px; } .page3-logo { width: 1149px; margin: 0 auto; margin-top: 1%; } .mask-back { transform: scale(1.3); transition: all .6s ease 0s; position: absolute; width: 100%; height: 100%; 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; } .page4-text-title { font-size: 60px; font-weight: normal; font-stretch: normal; letter-spacing: 0px; color: #171b25; margin-bottom: 54px; margin-top: 27%; } .persion-text { width: 481px; height: 264px; font-size: 24px; font-weight: normal; font-stretch: normal; line-height: 48px; letter-spacing: 0px; color: #2c3035; opacity: 0.8; margin-top: 60px; } .ja .persion-text, .en .persion-text { font-size: 16px; } .swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white { background: url('../images/walk_in_ims/arrow-prev.png'); width: 51px; height: 40px; left: 7%; } .swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white { background: url('../images/walk_in_ims/arrow-prev.png'); width: 51px; height: 40px; transform: rotate(180deg); right: 7%; } .left-rectangle { width: 135px; height: 136px; background-color: #f08200; position: absolute; left: 0; top: 0; } .right-rectangle { width: 135px; height: 136px; background-color: #f08200; position: absolute; right: 0; bottom: 0; } .development-title { position: absolute; z-index: 2; font-size: 48px; font-weight: normal; letter-spacing: 0px; color: #ffffff; left: 7%; top: 11%; } .horizontal-line { width: 163px; height: 5px; background: #f08200; position: absolute; z-index: 2; left: 3%; top: 20%; } .time-line { position: absolute; z-index: 2; font-size: 24px; font-weight: normal; letter-spacing: 0px; color: #f08200; left: 7%; top:22%; } .first-title { width:100%; text-align:center; height:100%; margin-top: 335px; } .page3-main { display: inline-block; position: relative; overflow: hidden; width: 270px; height: 280px; background: #fff; padding: 10px 30px; margin-left: 203px; } .page3-title { font-size: 20px; color: #000000; text-align: center; margin-bottom: 20px; padding-top: 20px; } .ja .page3-title, .en .page3-title { font-size: 14px; } .page3-img img{ margin-top: 10px; } .page3-des { width: 1170px; font-size: 18px; font-family: Microsoft YaHei; font-weight: 400; color: #F08200; line-height: 36px; margin: 1% auto; } .ja .page3-des, .en .page3-des { font-size: 14px; } .page3-subtitle { font-size: 12px; margin-top:17px; line-height: 24px; width:194px; text-align: center; } .time-year-num { font-size:120px; float:left; color:#f08200; } .time-year-txt { font-size: 40px; float:left; margin-top: 24px; margin-left: 10px; } .time-content { margin-left: 36px; width: 279px; line-height: 30px; } .footer { height: auto; } @media (max-width: 1024px) { body { min-width: 0; width: 100%; } .b-2-b-b-2-b-2-c { width: 90%; font-size: 18px; } .ims-ims { font-size: 24px; } .page1-content { left: 0; text-align: center; } .about-ims-text { width: 90%; margin: 67px auto; } .video { display: none; } .subscript { margin: 0 auto; } .page3-text-title { width: 90%; font-size: 25px; text-align: center; } .page3-text-des { width: 90%; text-align: center; font-size: 18px; } .page3-main img { width: 200px; } .page3-main { margin: 0; } .page3-logo { width: 480px; text-align: center; } .swiper-slide-h-4-persion { background-size: contain; left: 4%; bottom: 26%; height: 400px; width: 400px; } .persion { right: 0; left: auto; width: 50%; } .page4-text-title { font-size: 30px; } .persion-text { width: 90%; text-align: center; font-size: 16px; } } @media (max-width: 1680px) { .left-second { margin-left: 8%; } } @media (max-width: 1560px) { .time-year-num { font-size: 60px; } .time-year-txt { font-size: 30px; } .subtitle:before { width: 12px; height: 12px; border-radius: 50%; background-color: #f08200; content: ''; position: absolute; top: 4px; } .left-third { margin-right: 3%; } .left-second { margin-left: 8%; } .split-line { left: 35%; } } @media (max-width: 1380px) { .left-second { margin-left: 4%; } } @media (max-width: 1366px) { .first-title { margin-top: 16%; } .page3-text-des { line-height: 40px; font-size: 20px; } .page3-logo { margin-top: 2%; } .swiper-slide-h-4-persion { left: 8%; } .page1-content { margin-top: 0; } } @media (max-width: 1280px) { .left-first { width: 100%; margin: 0; margin-top: 8%; } .left-second { width: 100%; margin: 0; margin-top: 4%; } .left-third { width: 100%; float: left; margin: 0; margin-top: 4%; } .swiper-slide-v .title { text-align: center; margin-top: 16px; } .time-year-num { float: none; font-size: 40px; } .time-year-txt { float: none; } .split-line { display: none; } .swiper-slide-v .subtitle { text-align: center; margin-top: 16px; } .time-content { margin: 0 auto; } .subtitle:before { display: none; } .time-content { font-size: 16px; } } @media (max-width: 768px) { .left-first { margin-top: 40%; } .left-second { margin-top: 10%; } .left-third { margin-top: 10%; } .development-title { font-size: 24px; } .horizontal-line { width: 80px; top: 16%; } .time-line { top: 20%; } } @media (max-width: 500px) { .ims-ims { display: none; } .ims-ims.mobile { display: block; line-height: 32px; } .first-title { margin-top: 40%; } .ims-ims { font-size: 16px; } .b-2-b-b-2-b-2-c { margin-top: 36px; font-size: 12px; line-height: 20px; } .page2-text-title { font-size: 24px; margin-top: 10%; } .about-ims { font-size: 14px; margin: 0; } .about-ims-text { font-size: 12px; line-height: 20px; } .page3-text-title { font-size: 16px; } .page3-text-des { font-size: 12px; line-height: 20px; } .page3-logo { width: 100%; margin-top: 4%; } .page3-main { width: 30%; padding: 10px; height: 350px; } .page3-main img { width: 100px; height: 50px; margin-right: auto !important; } .page3-des { font-size: 14px; width: 90%; line-height: 16px; } .left-rectangle { display: none; } .right-rectangle { display: none; } .swiper-slide-h-4-persion { width: 160px; height: 160px; left: 59%; transform: translate(-50%, 0); top: 4%; } .page4-subtitle { font-size: 16px; } .persion { right: 0; left: auto; width: 100%; } .page4-text-title { font-size: 20px; margin-bottom: 24px; margin-top: 54%; } .persion-text { line-height: 24px; width: 90%; margin: 0 auto; margin-top: 24px; } .time-year-num { font-size: 16px; } .time-year-txt { font-size: 16px; } .time-content { font-size: 12px; width: 100%; line-height: 24px; } .left-first { width: 100%; margin: 0; margin-top: 50%; } .left-second { width: 100%; margin: 0; margin-top: 8%; } .left-third { width: 100%; float: left; margin: 0; margin-top: 8%; } .swiper-slide-v .subtitle { margin-top: 8px; } .page3-title { font-size: 16px; line-height: 16px; margin-bottom: 0; padding-top: 5px; } .page3-subtitle { width: 80%; line-height: 12px; margin-top: 12px; } .development-title { top: 6%; } .horizontal-line { top: 11%; } .time-line { top: 15%; } .swiper-slide-h-4-persion { display: none; } .swiper-slide-h-4-persion.mobile { display: block; width: 160px; height: 160px; left: 59%; transform: translate(-50%, 0); top: 4%; } .page2 { width: 100%; height: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: block; } .page2 img{ position: absolute; width: 100%; top: 60px; } .page1.none { display: none; } .swiper-button-prev, .swiper-button-next { top: 42%; } } @media (max-width: 320px) { .page3-logo { display: none; } }