.B3 .L li{width: 33.3%;text-align: center;} @charset "utf-8"; body, html{width: 100%;height: 100%;} #main-pagination{top: 50%;width: 20vh; right: 0;height: 1px;left: auto;z-index: 5;transform: rotate(90deg) translateY(-7vh);} #main-pagination .swiper-pagination-progressbar-fill{height: 3px;top: -1px;background-color: #e62129;} .swiper-pagination{z-index: 1;font-size: 0;text-align: left;bottom: 6vw;left: 5%;} .swiper-pagination-clickable .swiper-pagination-bullet{height: 1px;width: 35px;margin-right: 5px;background-color: #cdcdcd;border: none; border-radius: 5px;opacity: 0.5;display: inline-block;vertical-align: bottom;opacity: 1;} .swiper-pagination-clickable .swiper-pagination-bullet-active{background: #e62129 !important;width: 35px;height: 3px; opacity: 1;} .public-page{position: absolute;right: 0;height: 100%;z-index: 0;width: 90%;top: 0;bottom:0;overflow: hidden;} #main-page,#dowebok{height: 100%;width: 100%;} #main-page{transform:translate3d(0,0,0);overflow: hidden;} #dowebok>.swiper-slide {transform:translate3d(0,0,0);height: 100% !important;width: 100%;} .pc-800{display: block;} .banner img{display: block;width: 100%;height: 100%;/*object-fit: cover;*/} .banner{height: 100%;width: 100%;} .banner .pc{display: block !important;} .banner .BannerShow_b1,.banner .swiper-container,.banner .swiper-slide{height: 100%;} .banner .swiper-slide {overflow: hidden;} .banner .swiper-slide img{transform: scale(1.01) ;-ms-transform: scale(1.01) ;-webkit-transform: scale(1.01); transition: 5s linear 0s;} .banner .swiper-slide-active img{opacity: 1;transform: scale(1) ;-ms-transform: scale(1) ;-webkit-transform: scale(1) ;} .banner .zsq{position: absolute;bottom: 3vw;left: 3vw;z-index: 1;width: 180px;text-align: center;font-size: 0;} .banner .swiper-button-next,.banner .swiper-button-prev{width: 2em;height: 2em;background: none;line-height: 2.0;font-size: 14px;color: #e62129;margin-top: -1em;} .banner .swiper-pagination{position: absolute;bottom: 2.5vw;left: 3vw;/*width: 180px;*/text-align: left;z-index: 2;} .banner .swiper-pagination-clickable .swiper-pagination-bullet{margin-top: 2vw;} .swiper-num{font-size: 14px;color: #c5c5c5;} .swiper-num .active{font-size: 22px;color: #e62129;} .mymore{color: #323232;; display: block;width: 9em;text-align: center; box-sizing: border-box; padding: 2.3em 3em 1.5em 0; font-weight: bold; overflow: hidden;font-size: 16px; line-height: 1.5; max-width: 100%;position: relative; transition: .3s all ease;-ms-transition: .3s all ease;-webkit-transition: .3s all ease; } .mymore:after{content: "";display: block;width: 4.5em;height: 4.5em;border: 1px solid #959595;position: absolute;right: 0;top: 0; background: url(/images/r.png) center no-repeat;border-radius: 50%; transition: .3s all ease;-ms-transition: .3s all ease;-webkit-transition: .3s all ease; } .mymore span{position: relative;z-index: 2; transition: .6s all ease;-ms-transition: .6s all ease;-webkit-transition: .6s all ease; } .mymore.mob{display: none;} .title{text-transform: capitalize;} .B1,.B2,.B3{background-size: cover;background-position: center top;background-size: 100% 100%;background-repeat: no-repeat;} .B4,.B5{background-size: 100% auto;background-repeat: no-repeat;} .B1{background-image: url(/images/bg11_03.jpg);background-size: 100% 100%;background-position: center;} .B2{background-image: url(/images/bg2.jpg);} .B3{background-image: url(/images/bg3.jpg);} .B4{background-image: url(/images/bg4.jpg);} .B5{background-image: url(/images/bg5.jpg);} .ResTitle_a2 {text-align: left;text-transform: uppercase;} .ResTitle_a2 span{font-size: 1.2vw;color: #222222;font-weight: bold;} .ResTitle_a2>span{display: block;} .ResTitle_a2 em{font-size: 1.8vw;color: #e62129;font-weight: bold;} .B1 .L{width: 45.4%;margin-left: 5%;} .B1 .R{width: 40%;margin-right: 7.8%;} .B1 .R img{box-shadow: 0 0 8px 1px rgba(0,0,0,0.3);} .B2 .L{width: 17.8%;margin-left: 5%;padding-top: 6.8vw;} .B2 .L li{float: left;width: 47.5%;margin-right: 5%;margin-bottom: 0.5vw;position: relative;} .B2 .L li a{display: block;position: relative;z-index: 1;padding: 0.5vw 0;} .B2 .L li:after {content:'';width: 0;left: 2em;height: 20%;background:#ffff00;display: block;transition:.6s all ease;position: absolute;top: 40%;} .B2 .L li:nth-child(2n){margin-right: 0;} .B2 .R{width: 73.5%;} .B2 .R li a{display: block;height: 36vw;box-sizing: border-box;padding: 3vw 2vw 2vw 4vw;overflow: hidden; background-size: cover;font-weight: bold;color: #fff; } .B2 .swiper-container{padding: 1vw 0 1vw 1vw;} .B2 .swiper-slide{border-radius: 1vw;} .B2 .swiper-slide-active{box-shadow: 0 0 1vw 3px rgba(0,0,0,0.3);} .B2 .R .t{font-size: 3.6vw;} .B2 .R .t span{font-size: 14px;text-transform: uppercase;} .B2 .R .b {bottom: 4vw;line-height: 1.5;position: absolute;} .B2 .R .b h3{font-size: 2.4vw;font-weight: bold;display: block;line-height: 1.2;max-width: 90%;margin-bottom: 0.5em;font-family: Arial;} .B2 .R .b p{font-size: 1.3vw;} /* .map-dots{height: 26vw;width: 100%;height: 100%;top: 0;width: 59.4%;left: 9%;} */ .map-dots{height: 36vw;width: 100%;/* height: 100%; */top: 6vw;width: 58.4%;left: 9%;} .map-dot{position: absolute;transform: translateX(-50%);} .map-dots svg{width: 100%;height: 100%;position: absolute;top: 0;left: 0;} .map-dot:before{content: '';display: none;height: 12px;width: 12px;background: #e62129;border-radius: 50%;margin: 0 auto 4px auto;} .map-dot--1{top: 45%;left: 2.49%;} .map-dot--2{top: 31.2%;right: 26%;} .map-dot--3{top: 69%;left: 26.77%;} .map-dot--4{top: 85%;left: 3%;} .map-dot--5{top: 88%;left: 48.4%;} .map-dot--0{top: 39%;left: 36.4%;width: 8vw;max-width: 158px;transform: translateX(-50%);min-width: 60px;} .map-dot--0 img{display: block;width: 100%;} @keyframes animation-line { 0% { stroke-dashoffset: 700px; } 14.28571% { stroke-dashoffset: 0px; } 21.42857% { stroke-dashoffset: 0px; } 35.71429% { stroke-dashoffset: -700px; } to { stroke-dashoffset: -700px; } } .map-line{stroke:#bbbbbb;fill:none;stroke-dasharray: 700px;stroke-dashoffset: 0;animation: animation-line 4s linear both infinite;} #svg_25{animation-delay: .5s;} #svg_22{animation-delay: .8s;} #svg_24{animation-delay: 1.3s;} #svg_26{animation-delay: 1.5s;} #svg_27{animation-delay: 1.8s;} #svg_28{animation-delay: 2.2s;} #svg_29{animation-delay: 2.5s;} .B3 .L{width: 33.9%;margin-left: 5%;} .B3 .R{width: 50%;right: 2.8%;top: 0;bottom: 0;} .B3 .L li{float: left;position: relative; width: 33.3%;} .B3 .L li:after{content: "";opacity: 0;display: block;width: 0;height: 100%; transition:.6s all ease;position: absolute;top: 0;left: 0; background:-webkit-linear-gradient(left, #fd4e35, #e12b6d); background:-o-linear-gradient(left, #fd4e35, #e12b6d); background:linear-gradient(to right, #fd4e35, #e12b6d); } .B3 .pc-800{display: none;} .B3 .L li a{display: block;position: relative;z-index: 1;padding: 1em 0;text-align: center; min-width: 8em;box-sizing: border-box;} .B3 .L li a:before {content:'';display: inline-block;height: 1.5em;width: 1.5em;background: url(/images/i1-1.png) center no-repeat;background-size: contain; margin-right: 0.8em;vertical-align: middle; } .B3 .L li a:after {content:'';width: 100%;height: 100%;border: 1px solid #bfbfbf; display: block;transition:.6s all ease; position: absolute;top: 0;left: 0;box-sizing: border-box; } .B3 .L li:nth-child(2) a:after {border-left: none;border-right: none;} .B3 .L li:nth-child(2) a:before {background-image: url(/images/i1-2.png);} .B3 .L li:nth-child(3) a:before {background-image: url(/images/i1-3.png);} /* .B3 .p-list .PhotoList_k2 ,.B3 .p-list .PhotoList_k2 ul{height: 100%;} */.B3 .p-list{float: left;width: 31%;margin-right: 3.5%;height: 100%;box-sizing: border-box;} .B3 .p-list3{margin-right: 0;margin-top: 0;height: 100%;} .B3 .p-list2{padding-top: 14vw;} .B3 .p-list1{padding-top: 20vw;} .B3 .p-list .swiper-container{height: 100%;} .B3 .R li{display: block; margin-bottom: 1vw;/* height: 18vw; */height: 18vw;} .B3 .R li a{display: block;position: relative;height: 100%;border-radius: 10px;box-shadow: 0 0 10px 2px rgba(0,0,0,0.1);overflow: hidden;} .B3 .R li img{display: block;width: 100%;height: 100%;object-fit: cover;position: absolute;left: 50%;top: 50%; transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%); transition:.5s all ease-out;-ms-transition:.5s all ease-out;-webkit-transition:.5s all ease-out; } .B3 .R li span,.B3 .R li h4{display: none;} .B4 .L{width: 34.5%;margin-left: 5%;} .B4 .R{width: 44.8%;margin-right: 10%;} .B4 .L .arrow{right: 0;bottom: 0;text-align: right;} .B4 .L .arrow div{position: static;display: inline-block;margin-left: 1.3vw;width: 26px;height: 26px;background: url(../images/next.png) center no-repeat; background-size: contain;vertical-align: middle; } .B4 .L .arrow .swiper-button-prev{margin-left: 0;background-image: url(../images/prev.png);} .B4 .L .swiper-container{height: 30em;border-bottom: 1px solid #d8d8d8;font-size: 14px;color: #7d7d7d;line-height: 1.6;} .B4 .L li{height: auto;} .B4 .L li a{border-top: 1px solid #d8d8d8;padding-top: 3.2em;display: block;height: 100%;box-sizing: border-box;} .B4 .L .ntime{font-size: 12px;padding-left: 26px;background: url(../images/rili.png) left center no-repeat;background-size: contain; box-sizing: border-box;margin: 0.6em 0;display: block; } .B4 .L .ntime span{margin-left: 2em;} .B4 .L h3{font-size: 1.4em;font-weight: bold;transition:.6s all ease;color: #333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display: block;} .B4 .list{margin-left: 5%;width: 85%;} .B4 .list li{float: left;position: relative;width: 25%;box-sizing: border-box;} .B4 .list li:after{content: "";opacity: 0;display: block;width: 100%;height: 100%; transition:.6s all ease;position: absolute;top: 0;left: 0; background:-webkit-linear-gradient(left, #fd4e35, #e12b6d); background:-o-linear-gradient(left, #fd4e35, #e12b6d); background:linear-gradient(to right, #fd4e35, #e12b6d); } .B4 .list li a{display: block;position: relative;z-index: 1;padding: 1.2vw 1.5em;text-align: center;box-sizing: border-box;} .B4 .list .icon {content:'';display: inline-block;height: 2em;width: 2em;background: url(/images/i2-1.png) center no-repeat;background-size: contain; margin-right: 0.8em;vertical-align: middle;max-width: 38px;max-height: 38px; } .B4 .list li:nth-child(2) a:after {border-left: none;border-right: none;} /*.B4 .list li:last-child(4) a:after {border-left: none;border-right: none;}*/ .B4 .list .i2 {background-image: url(/images/i2-2.png);} .B4 .list .i3 {background-image: url(/images/i2-3.png);} .B4 .list .i4 {background-image: url(/images/i2-4.png);} .B4 .list .i5 {background-image: url(/images/i2-5.png);} .B4 .list li a:after {content:'';width: 100%;height: 100%;border: 1px solid #bfbfbf; display: block;transition:.6s all ease; position: absolute;top: 0;left: 0;box-sizing: border-box; } .B5 .L{width: 40.2%;margin-left: 5%;} .B5 .R{width: 51.7%;} .B5 .loc{background: url(../images/add.png) left center no-repeat;background-size: contain;padding-left: 3.7em;box-sizing: border-box;background-size: 3.3em;} .B5 .loc a{display: block;} .B5 .phone-list li{float: left;width: 288px;max-width: 50%;margin-bottom: 0.4vw;line-height: 1.6;} .B5 .contact-btn{display: block;padding: 1.3vw 0 1vw 4em;width: 17em;max-width: 100%;box-sizing: border-box; background:-webkit-linear-gradient(left, #fd4e35, #e12b6d); background:-o-linear-gradient(left, #fd4e35, #e12b6d); background:linear-gradient(to right, #fd4e35, #e12b6d); transition:.5s all ease-out;-ms-transition:.5s all ease-out;-webkit-transition:.5s all ease-out; } .B5 .contact-btn:after{content: "";display: block;background:#fff;width: 2.8em;height: 1px;margin-top: 0.6vw;} .B5 .customer-list li{float: left;border: 1px solid #eeeeee;margin-right: 0.4vw;margin-bottom: 0.4vw;} .B5 .customer-list li:last-child{margin-right: 0;} .B5 .customer-list li div{height: 2.5vw;} .B5 .customer-list li img{height: 100%;width: 100%;object-fit: cover;} .B5 .map_a1 img{max-width: unset;width: unset;} .B5 .map_a1{height: 100%;font-size: 14px;} /* .B5 .map_a1 .BMap_omCtrl,.B5 .BMap_cpyCtrl,.B5 .BMap_scaleCtrl ,.B5 .BMap_stdMpCtrl {display: none;} */ .B5 .pc-800{display: none;} .B5 .loc .pc-800{display: inline-block;} .link li{display: inline-block;margin-right: 5px;} @media screen and (min-width: 1024px){ .mymore:hover:after{border-color: #e62129;-webkit-transform:rotate3d(0,0,1,360deg); transform:rotate3d(0,0,1,360deg);} .mymore:hover span{color: #e62129;} .mymore:hover{padding-right: 2em;} .B2 .L li:hover:after{width: 4em;} .B2 .L li:hover a{color: #e62129;} .B3 .L li:hover a:after{opacity: 0;} .B3 .L li:nth-child(1):hover a:before {background-image: url(/images/i1-1-1.png);} .B3 .L li:nth-child(2):hover a:before {background-image: url(/images/i1-2-1.png);} .B3 .L li:nth-child(3):hover a:before {background-image: url(/images/i1-3-1.png);} .B3 .L li:hover a,.B4 .list li:hover a{color: #fff;} .B3 .L li:hover:after{opacity: 1;width: 100%;} .B3 .R li:hover img{transform:translate(-50%,-50%) scale(1.08,1.08) ;-ms-transform:translate(-50%,-50%) scale(1.08,1.08) ;-webkit-transform:translate(-50%,-50%) scale(1.08,1.08) ;} .B4 .list li:hover .i1 {background-image: url(/images/i2-1-1.png);} .B4 .list li:hover .i2 {background-image: url(/images/i2-2-1.png);} .B4 .list li:hover .i3 {background-image: url(/images/i2-3-1.png);} .B4 .list li:hover .i4 {background-image: url(/images/i2-4-1.png);} .B4 .list li:hover .i5 {background-image: url(/images/i2-5-1.png);} .B4 .list li:hover:after{opacity: 1;width: 100%;height: 120%;top: -10%;} .B4 .list li:hover a:after{opacity: 0;} .B4 .L li a:hover h3{color: #e62129;} .B5 .contact-btn:hover{width: 19em;} } @media screen and (max-width: 1440px){ .B4 .L .swiper-container{height: 23em;} .B4 .L h3{font-size: 1.2em;} .B4 .L li a{padding-top: 2.2em;} .B4 .L li .font-over3{-webkit-line-clamp: 2;max-height: 3.2em;height: 3.2em;line-height: 1.6;} } @media screen and (max-width: 1250px){ .ResTitle_a2 em{font-size: 24px;} .ResTitle_a2 span{font-size: 20px;} .B4 .L .swiper-container{height: 20em;} .B4 .L li a{padding-top: 1.2em;} } @media screen and (max-width: 1024px) and (orientation: landscape){ .loading-div{display: none;} .public-page{padding-top: 80px;width: 100%;box-sizing:border-box;} .B4 .pc{display: block;} .B5 .R.pc{display: block;} } @media screen and (max-width: 1024px) and (orientation: portrait){ .loading-div{display: none;} .public-page{padding-top: 80px;width: 100%;box-sizing:border-box;} .B2 .L{width: 80%;margin-left: 10%; padding-top: 0;} .B2 .L li{width: auto;} .B2 .R{width: 80%;margin-top: 3vw;} .B2 .R li a{height: 38vw;} .map-dot{margin-bottom: 2vw;} .B3 .L{width: 80%;margin-left: 10%;float: none;} .B3 .R{position: static; width: 80%;margin-left: 10%;margin-top: 4vw;} .B3 .p-list{width: 100%;display: none;margin-right: 0;} .B3 .p-list1, .B3 .p-list2{padding-top: 0;} .B3 .p-list3{padding-top: 0;} .B3 .p-list.show{display: block;} .B3 .list.pc{display: none;} .B3 .R li{height: 33vw;} .B3 .pc-800{display: block;} .B4 .R{display: none;} .B4 .L{width: 85%;float: none;} .B4 .L .swiper-container{width: 100%;} .B4 .L h3{font-size: 18px;} .B4 .list li a{padding: 1em 0.5em;} .B4 .list .icon{width: 1.5em;height: 1.5em;} .B5 .loc{padding-left: 0;background:none;} .B5 .loc a{background: url(../images/add.png) left top no-repeat;background-size: contain;padding-left: 2em;box-sizing: border-box;} .B5 .loc .pc-800{display: inline-block;} .B5 .phone-list.pc{display: none;} .B5 .phone-list li{float: none;width: 100%;max-width: 100%;} .B5 .customer-list li div{height: 5.5vw;} .B5 .pc-800{display: block;} .B5 .pc{display: none;} .B5 .L{width: 90%;} .B1{background-image: url(/images/bg12.jpg);} .map-dots{height: 36vw;width: 100%;top: 0;width: 100%;left: 3%;position: relative;margin-top: 3vw;} .map-dot{position: static;-webkit-transform: none; -ms-transform: none; -o-transform: none; transform: none;margin-bottom: 1vw;} .map-dot p {display: inline-block;} .B3 .L .on a:after{opacity: 0;} .B3 .L li:nth-child(1).on a:before {background-image: url(/images/i1-2-1.png);} .B3 .L li:nth-child(2).on a:before {background-image: url(/images/i1-2-1.png);} .B3 .L li:nth-child(3).on a:before {background-image: url(/images/i1-3-1.png);} .B3 .L .on a,.B4 .list .on a{color: #fff;} .B3 .L .on:after{opacity: 1;width: 100%;} } @media screen and (max-width: 800px) and (orientation: portrait){ } @media screen and (max-width: 640px) and (orientation: portrait){ .pc-800{display: none;} .banner .pc{display: none !important;} .public-page{padding-top: 14vw;} .p_tb_80{padding: 8vw 0;} .mymore.pc{display: none;} .mymore.mob{display: block;} .mymore{padding: 1.3em 0 0.5em 0;float: none;width: 7em;text-align: left;font-size: 3.8vw;} .mymore:after{width: 3em;height: 3em;background-size: 0.8em auto;} .banner .swiper-pagination{bottom: 6vw;} .ResTitle_a2 span{font-size: 3.8vw;} .ResTitle_a2 em{font-size: 4.8vw;} .swiper-num,.swiper-num .active{font-size: 3.8vw;} .swiper-num .active{font-weight: bold;} .banner .zsq{bottom: 9vw;left: 3vw;width: 40vw;} .banner .swiper-button-next, .banner .swiper-button-prev{width: 1em;font-size: 3.8vw;} .B1{background: url(/images/mbg1.jpg) left top no-repeat;background-size: 100% 59%; } .B1 .L{width: 90%;margin-left: auto;margin-right:auto; float: none;} .B1 .vam{display: block;padding-top: 16vw;position: absolute;top: 0;left: 0;width: 100%;bottom: 0;} .map-dots{position: absolute; width: 100%;margin: 0 auto;float: none;padding: 17vw 5vw 3vw 5vw;color: #fff;bottom: 0;box-sizing: border-box; background: url(/images/mbg1-2.jpg) center no-repeat;background-size: cover;height: auto; top: auto;left: 0;min-height: 41%; } .map-dot{float: left;margin-right: 6%;margin-bottom: 8vw; } .map-dot p{display: block;} .map-dot--0{display: none;} .map-dot--1{width: 47.5%;margin-right: 5%;margin-bottom: 0;} .map-dot--3{margin-right: 0;width: 47.5%;margin-bottom: 0;} .map-dot--5{margin-right: 0;} .map-dot .c-e62129{color: #ffff00;} .B1 .R{position: absolute;left: 5%;width: 90%;bottom: 51%;} .B2 {background-image: url(../images/mbg2.jpg);background-size: cover;} .B2 .L{width: 90%;margin-left: 5%;float: none;} .B2 .R{width: 98.5%;margin-right: 0;margin-left: auto;float: none; margin-top: 0;} .B2 .R li a{height: 63vw;} .B2 .R li .t,.B2 .R li .b{display: none;} .B2 .swiper-container{padding: 4vw 0 4vw 4vw;} .B2 .swiper-slide-active{box-shadow: 0px 1px 2.5vw 1px rgba(0, 0, 0, 0.4);} .B2 .swiper-slide{border-radius: 2vw;} .B2 .L li{width: 47.5%;margin-bottom: 1.5vw;} .B2 .L ul{width: 60%;} .B3 {background: url(../images/mbg3.jpg) bottom left no-repeat;background-size: 100% auto;} .B3 .pc-800{display: block;} .B3 .L{width: 90%;margin-left: 5%;} .B3 .L li a{min-width: 100%;padding: 0.5em;font-weight: bold;} .B3 .L li a:before{height: 1.2em;margin-right: 0.5em;width: 1.2em;} .B3 .R{width: 100%;margin-left: 0;margin-top: 7vw;} .B3 .R li{height: 67vw;border-radius: 1.3vw;width: 49%;} .B4 .list {font-size: 0;text-align: center;width: 90%;} .B4 .list li{width: 50%;float: none;display: inline-block;font-size: 3.8vw;} .B4 .list li:nth-child(3) a:after,.B4 .list li:nth-child(4) a:after,.B4 .list li:nth-child(5) a:after{border-top: none;} .B4 .list li:nth-child(5){width: 100%;} .B4 .list li:nth-child(2) a:after,.B4 .list li:nth-child(4) a:after{border-right: 1px solid #bfbfbf;} .B4 .list li a{padding: 0.8em 0.5em;} .B4 .L .arrow div{width: 1em;height: 1em;margin-top: 0;} .B4 {background: url(../images/mbg4.jpg) center left no-repeat;background-size: 100% auto;} .B4 .L,.B4 .R{width: 90%;margin-left: auto;margin-right:auto;float: none;} .B4 .L h3{font-size: 1.15em;} .B4 .L p{font-size: 3.8vw;} .B4 .L li a{padding-top: 1em;} .B4 .L .swiper-container{border: none;height: 18em;font-size: 3.8vw;} .B5 {background: url(../images/mbg5.jpg) center left no-repeat;background-size: 100% auto;} .B5 .L{width: 90%;} .B5 .pc-800{display: none;} .B5 .contact-btn {display: block;padding: 0.5em 1em;width: 11em;} .B5 .customer-list li div{height: 7vw;} .B5 .customer-list li {width: 13%;} .B5 .loc a .pc-800{display: none;} .map-dots svg{display: none;} }