.contact-map { overflow: hidden; padding: 20px 60px; } .contact-map .map-left { opacity: 1; transform: translateX(0%); } .contact-map .map-right { opacity: 1; transform: translateX(0%); } .contact-map .wrap { width: 1260px; height: 100%; margin: 0 auto; position: relative; box-sizing: border-box; } .map-left { float: left; width: 50%; position: relative; opacity: 0; transition: all 1.5s; transform: translateX(-100%); } .page.swiper-slide-active .map-left { opacity: 1; transform: translateX(0%); } .map-left .imgbg { width: 100%; display: block; } .map-right { width: 45%; float: right; height: 554px; padding-bottom: 36px; position: relative; opacity: 0; transition: all 1.5s; transform: translateX(100%); } .page.swiper-slide-active .map-right { opacity: 1; transform: translateX(0%); } .map-right-main .content { height: 400px; overflow-y: auto; padding-right: 14px; } .map-right-main { /* height: 100%; */ overflow: hidden; padding-top: 20%; } .map-right-main .content::-webkit-scrollbar { width: 6px; height: 6px; background-color: transparent; } .map-right-main .content::-webkit-scrollbar-thumb { border-radius: 10px; background-color: transparent; } .map-right .title { font-size: 30px; color: #333; margin-bottom: 24px; } .map-nav { overflow: hidden; margin-bottom: 30px; } .map-nav span { float: left; font-size: 22px; color: #7e7e7e; border-bottom: 1px solid transparent; margin-right: 45px; padding-bottom: 8px; cursor: pointer; } .map-nav span.act { color: #005bac; border-bottom: 2px solid #005bac; } .map-block-img { height: 230px; background: no-repeat center center; background-size: cover; margin-bottom: 30px; } .map-block-text, .map-block-text ul { overflow: hidden; } .map-block-text ul { list-style: none; margin: 0; padding: 0; } .map-block-text li { width: 50%; float: left; margin-bottom: 12px; /*padding-left: 22px;*/ box-sizing: border-box; position: relative; line-height: 1.5; } .map-block-text li span, .map-block-text li a { font-size: 14px; color: #333; vertical-align: middle; margin-left: 10px; } .map-block-text li img { /*position: absolute; left: 0; top: 0;*/ width: 70%; } .map-block-text li .qrtitle { line-height: 0.5; padding-left: 24%; font-size: 12px; } .info-href { position: absolute; right: 0; bottom: 0; } .info-href a { color: #999; font-size: 14px; } .info-href a img { margin-right: 10px; } .map-right-block { display: none; height: 100%; } .map-right-block:nth-child(1) { display: block; } .pointer { position: absolute; font-size: 14px; color: #005bac; background: #fff; padding: 3px 10px; border-radius: 5px; cursor: pointer; box-shadow: 0 0 5px #bbb; } .pointer1 { right: 12%; top: 39%; } .pointer2 { right: 29%; top: 39%; } .pointer3 { right: 15%; top: 17%; } .pointer4 { right: 11%; top: 44%; } .pointer5 { right: 4%; top: 64%; } .pointer6 { right: 32.5%; top: 59.5%; } .pointer7 { right: 15%; top: 34%; } .pointer8 { right: 37.5%; top: 33%; } .map-right-block .content p { font-size: 16px; color: #666; line-height: 2; margin-bottom: 20px; } .pointer:hover { background: #9ece82; color: #fff; } .mb-partner-main { display: none; } @media only screen and (min-width: 701px) and (max-width: 1300px) { .contact-map .wrap { width: 90%; padding: 0 1%; } .map-right-main { padding-top: 10%; } .map-block-text li .qrtitle { padding-left: 20%; } } /*鎵嬫満*/ @media only screen and (min-width: 0px) and (max-width: 700px) { .contact-map { padding: 10px 0; } .contact-map .wrap { width: 100%; padding: 0 1%; } .map-left { width: 72%; margin: 0 auto; float: none; } .map-right { width: 100%; height: 24rem; padding-bottom: 25px; float: none; } .map-right-main { padding-top: 5%; } .map-nav { margin-bottom: 10px; } .map-nav span { font-size: 14px; padding-bottom: 4px; } .map-block-img { height: 110px; margin-bottom: 6px; } .map-block-text li { margin-bottom: 0px; padding-left: 0; line-height: 1.3; } .info-href a img { width: 18px; } .info-href a { font-size: 12px; } .map-block-text li span { font-size: 12px; color: #333; margin-left: 0; } .map-block-text li .qrtitle { line-height: 1; } .pointer { font-size: 12px; padding: 2px 4px; border-radius: 3px; } }