@font-face { font-family: 'barlow'; src: ; } @font-face { font-family: 'oswald'; src: ; } @font-face { font-family: yumow04; src: ; } .moblie { display: none; } .pc { display: block; } @media (max-width: 768px) { .pc { display: none; } .moblie { display: block; } } .line { margin: 10px 0px 30px 0px; border-bottom: 1px solid rgb(137 137 137 / 30%); } * { padding: 0; margin: 0; box-sizing: border-box; } body { font: normal normal 0.32rem/1 sans-serif; color: #404142; background: #fff; } textarea, input { font: normal normal 0.28rem/1.5 sans-serif; } img { display: block; border: none; } .top-a1 .black { color: #3f4042; } .clear:after { content: ""; display: block; clear: both; } input[type=button], input[type=submit], input[type=file], input[type=reset], button { cursor: pointer; -webkit-appearance: none; } body, p, ol, ul, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; list-style: none; font: normal normal 0.28rem/1.5 sans-serif; } button { font: normal normal 0.28rem/1.5 sans-serif; } a { color: inherit; text-decoration: none; } .i100 { overflow: hidden; } .i100>img { width: 100%; } .i200 { overflow: hidden; } .i200>img { height: 100%; } .i300 { overflow: hidden; } .i300>img { width: 100%; /*! height: 100%; */ } .i300>a>img { width: 100%; /* height: 100%; */ } a>img { /*! width: 100%; */ } .to1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .a1 { position: relative; } .a1>a { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; } input { border: 0; display: block; outline: none; background: none; box-sizing: border-box; } select { border: 0; display: block; outline: none; background: none; box-sizing: border-box; } .cxq-c3 .btn { margin-top: 30px; } .cxq-c3 .btn .active { color: #fff; background: #188947; border: 1px solid #188947; } .cxq-c3 .btn a { width: 40%; border-radius: 30px; height: 40px; line-height: 38px; text-align: center; font-size: 15px; display: block; margin-right: 20px; float: left; color: #404142; background: #fff; border: 1px solid #404142; transition: 0.6s ease; } button { border: 0; display: block; outline: none; background: none; box-sizing: border-box; } .to2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } .to3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; } .to4 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; white-space: normal; } .to5 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; white-space: normal; } .to6 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; white-space: normal; } .to7 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; white-space: normal; } .to8 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; white-space: normal; } .to9 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; white-space: normal; } .to10 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; white-space: normal; } textarea { border: 0; display: block; outline: none; background: none; box-sizing: border-box; resize: none; } * { margin: 0; padding: 0; box-sizing: border-box; } .client-carousel { padding-bottom: 0px; padding-top: 60px; } .container { width: 100%; max-width: 1360px; margin: 50px auto; overflow: hidden; position: relative; } .logos-scroll { display: flex; animation: scroll 20s linear infinite; } .client-carousel__tilte { text-align: center; display: block; color: var(--nisoz-color); font-weight: 500; border-top: 1px solid #e6e6ec; font-size: 16px; text-transform: uppercase; letter-spacing: 2.8px; margin: 0 0 33px; } .client-carousel__tilte span { display: inline-block; background-color: var(--nisoz-white); padding: 0 26px; z-index: 10; position: relative; top: -9px } .inline-lines { display: inline-flex; align-items: center; width: 100%; letter-spacing: 5px; margin: 0 0 50px; color: #8b8b8b; } .inline-lines::before, .inline-lines::after { content: ''; flex: 1; height: 1px; background: #e6e6ec; } .inline-lines::before { margin-right: 15px; } .inline-lines::after { margin-left: 15px; } /* 悬停暂停动画 */ .logos-scroll:hover { animation-play-state: paused; } .logo-item { flex-shrink: 0; width: calc(100% /7); padding: 0 15px; min-height: 83px; transition: 500ms; } .logo-item img { width: 100%; height: auto; object-fit: contain; transition: 500ms; opacity: 1; max-width: 100%; width: auto; } @keyframes scroll { 0% { transform: translatex(0); } 100% { transform: translatex(-50%); } } @media only screen and (min-width: 1640px) { .dh { width: 100%; height: 115px; position: fixed; top: 0; left: 0; z-index: 9; transition: 0.5s; } .dh1 { height: 59px; position: absolute; left: calc(50% - 1360px/2); top: calc(50% - 59px/2); } .dh1>img:nth-child(2) { display: none; } .dh2 { position: absolute; right: calc(50% - 1360px/2); top: calc(50% - 21px/2); height: 21px; } .dh2>img:nth-child(2) { display: none; } .dh3 { position: absolute; right: calc(50% - 1360px/2 100px); top: 0; } .dh31 { float: left; margin-right: 95px; font-size: 16px; color: #fff; line-height: 110px; position: relative; transition: 0.5s; } .dh31>div { width: 0; height: 3px; background: #fff; position: absolute; left: calc(50% - 74px/2); bottom: 5px; transition: 0.5s; } .dh.on .dh31>div, .dh.on2 .dh31>div { background: #188947; transition: 0.5s; } .dh3>.dh31:last-child { margin-right: 0; } .dh.on, .dh.on2 { background: #fff; transition: 0.5s; } .dh.on .dh31, .dh.on2 .dh31 { color: #333; transition: 0.5s; } .dh.on .dh1>img:nth-child(1), .dh.on2 .dh1>img:nth-child(1) { display: none; } .dh.on .dh1>img:nth-child(2), .dh.on2 .dh1>img:nth-child(2) { display: block; } .dh.on .dh2>img:nth-child(1), .dh.on2 .dh2>img:nth-child(1) { display: none; } .dh.on .dh2>img:nth-child(2), .dh.on2 .dh2>img:nth-child(2) { display: block; } .dh31:hover>div { width: 74px; transition: 0.5s; } .dh31.on>div, .dh31.on2>div { width: 74px; } .dh4 { display: none; } .ydh { display: none; } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .dh { width: 100%; height: 100px; position: fixed; top: 0; left: 0; z-index: 9; transition: 0.5s; } .dh1 { height: calc(1200px*59/1360); position: absolute; left: calc(50% - 1200px/2); top: calc(50% - (1200px*59/1360)/2); } .dh1>img:nth-child(2) { display: none; } .dh2 { position: absolute; right: calc(50% - 1200px/2); top: calc(50% - (1200px*21/1360)/2); height: calc(1200px*21/1360); } .dh2>img:nth-child(2) { display: none; } .dh3 { position: absolute; right: calc(50% - 1200px/2 (1200px*100/1360)); top: 0; } .dh31 { float: left; margin-right: calc(1200px*95/1360); font-size: calc(1200px*16/1360); color: #fff; line-height: 100px; position: relative; transition: 0.5s; } .dh31>div { width: 0; height: 3px; background: #fff; position: absolute; left: calc(50% - (1200px*74/1360)/2); bottom: 5px; transition: 0.5s; } .dh.on .dh31>div, .dh.on2 .dh31>div { background: #188947; transition: 0.5s; } .dh3>.dh31:last-child { margin-right: 0; } .dh.on, .dh.on2 { background: #fff; transition: 0.5s; } .dh.on .dh31, .dh.on2 .dh31 { color: #333; transition: 0.5s; } .dh.on .dh1>img:nth-child(1), .dh.on2 .dh1>img:nth-child(1) { display: none; } .dh.on .dh1>img:nth-child(2), .dh.on2 .dh1>img:nth-child(2) { display: block; } .dh.on .dh2>img:nth-child(1), .dh.on2 .dh2>img:nth-child(1) { display: none; } .dh.on .dh2>img:nth-child(2), .dh.on2 .dh2>img:nth-child(2) { display: block; } .dh31:hover>div { width: calc(1200px*74/1360); transition: 0.5s; } .dh31.on>div, .dh31.on2>div { width: calc(1200px*74/1360); } .dh4 { display: none; } .ydh { display: none; } } @media only screen and (max-width: 1023px) { .logo-item { flex-shrink: 0; width: calc(100% /4); padding: 0 15px; min-height: 83px; transition: 500ms; } .news>.ind5-a1:hover .ind5-a7 { opacity: 1; visibility: visible; transform: translatey(0); background: #f8994b; } .ind5-a7 { position: absolute; left: 80%; top: 40%; transition: 0.5s; } .news>.ind5-a1 .ind5-a7 { opacity: 1; position: absolute; bottom: .875rem; right: .875rem; width: 1rem; height: 1rem; font-size: .8rem; background: rgba(0, 0, 0, 0.7); color: #fff; text-align: center; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; text-transform: uppercase; transition: .5s; } .moblie { display: block; } .dh { width: 100%; height: 1.15rem; position: fixed; top: 0; left: 0; z-index: 9; transition: 0.5s; } .dh1 { height: 0.59rem; position: absolute; left: 0.3rem; top: calc(50% - 0.59rem/2); } .dh1>img:nth-child(2) { display: none; } .dh2 { position: absolute; right: 1rem; top: calc(50% - 0.3rem/2); height: 0.3rem; } .dh2>img:nth-child(2) { display: none; } .dh3 { display: none; } .dh.on, .dh.on2 { background: #fff; transition: 0.5s; } .dh.on .dh31, .dh.on2 .dh31 { color: #333; transition: 0.5s; } .dh.on .dh1>img:nth-child(1), .dh.on2 .dh1>img:nth-child(1) { display: none; } .dh.on .dh1>img:nth-child(2), .dh.on2 .dh1>img:nth-child(2) { display: block; } .dh.on .dh2>img:nth-child(1), .dh.on2 .dh2>img:nth-child(1) { display: none; } .dh.on .dh2>img:nth-child(2), .dh.on2 .dh2>img:nth-child(2) { display: block; } .dh4 { height: 0.28rem; position: absolute; right: 0.3rem; top: calc(50% - 0.28rem/2); } .dh4>img:nth-child(2) { display: none; } .dh.on .dh4>img:nth-child(1), .dh.on2 .dh4>img:nth-child(1) { display: none; } .dh.on .dh4>img:nth-child(2), .dh.on2 .dh4>img:nth-child(2) { display: block; } .ydh { width: 100%; height: calc(100% - 1.15rem); background: #fff; position: fixed; top: 1.15rem; left: 0; z-index: 99; display: none; } .ydh-a { width: 100%; position: relative; padding: 0 0.35rem; } .ydh-a1 { width: 100%; height: auto; border-bottom: 0.01rem solid #efefef; } .ydh-a2 { width: 100%; height: 1.2rem; font-size: 0.32rem; line-height: 1.2rem; text-align: center; position: relative; } .ydh-a2>img { width: 0.2rem; height: 0.1rem; position: absolute; right: 0; top: calc(50% - 0.1rem/2); transition: 0.5s; } .ydh-a2.on>img { transform: rotate(180deg); transition: 0.5s; } .ydh-a3 { width: 100%; display: none; } .ydh-a31 { font-size: 0.26rem; line-height: 0.7rem; color: #666666; text-align: center; } } .s_hd { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: .35rem; } .s_tt { display: flex; text-align: left; align-items: flex-end; } .s_tt h4 { font-size: 38px; font-family: yumow04; position: relative; display: inline-block; background: #404142; -webkit-background-clip: text; color: transparent; line-height: 1.1; } .s_pro .s_tt h4 { margin-right: 120px; } [aos][aos][aos-duration='1500'], body[aos-duration='1500'] [aos] { -webkit-transition-duration: 1.5s; transition-duration: 1.5s; } .ind3-a1.s_hd .lineanim1 { left: auto; right: -28px; top: 0rem; } .lineanim1 { height: 15px; width: 70px; transform: rotate(122deg); position: absolute; left: -60px; } .lineanim1 i { width: 3rem; opacity: 1; } .lineanim1 i:nth-child(1) { right: 0; bottom: 0; transition-delay: .3s; } .lineanim1 i:nth-child(2) { left: 0; top: 0; transition-delay: .3s; } .lineanim1 i { display: block; width: 50px; height: 1px; background: #404142; transition: .8s; position: absolute; opacity: 1; } .ty_title.s_tt { display: block; text-align: center; } .s_tt h3 { font-size: 24px; color: #404142; margin-left: 20px; margin-bottom: 3px; } .s_pro .s_tt h3 { margin-bottom: .375rem; } .more_r { height: 2.625rem; display: flex; align-items: center; text-transform: uppercase; font-size: .875rem; color: #333333; position: relative; } .more_r:before { content: ""; display: block; width: 100%; height: 1px; background: #8f9192; position: absolute; top: 0; left: 0; transform-origin: left; } .more_r i { margin-left: .5rem; } .more_r:after { content: ""; display: block; width: 100%; height: 1px; background: #8f9192; position: absolute; bottom: 0; left: 0; transform-origin: right; } svg { display: inline-block; vertical-align: middle; } /* ãƒâ©ã‚â¦ã¢â‚¬â€œãƒâ©ã‚â¡ã‚âµãƒâ¤ã‚â¸ã¢â€šâ¬ */ @media only screen and (min-width: 1640px) { .ind1 { width: 100%; height: 0; padding-bottom: calc(100%*960/1920); position: relative; } .ind1-swi { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .ind1-a { width: 100%; height: 100%; position: relative; } .ind1-a1 { width: 100%; height: 100%; } .ind1-a1>img { /* animation: big 3s infinite linear; */ } @keyframes big { 0% { transform: scale(1) } 50% { transform: scale(1) } 100% { transform: scale(1) } } .ind1-a2 { width: 1360px; height: 100%; position: absolute; left: calc(50% - 1360px/2); top: 0; display: table; } .ind1-a3 { display: table-cell; vertical-align: middle; } .ind-pic.center { width: auto; position: absolute; /*! left: 0; */ right: 42%; top: 52%; transform: translatey(-50%); color: #fff; } .ind-pic { width: 50%; position: absolute; /*! left: 55%; */ right: 0; top: 52%; transform: translatey(-50%); color: #fff; } .ind1-a31 { font-size: 60px; line-height: 1; color: #fff; font-weight: 200; font-family: yumow04; text-transform: uppercase; } .ind1-a32 { font-size: 60px; line-height: 62px; color: #fff; margin-top: 15px; } .ind1-a32>span { font-weight: bold; } .ind1-a33 { font-size: 16px; line-height: 1.6; font-weight: lighter; color: #fff; margin-top: 27px; } .ind1-b { width: 28px; height: 44px; position: absolute; bottom: 60px; left: calc(50% - 28px/2); z-index: 2; animation: 3s jump linear infinite; } .ind1-prev { width: 37px; height: 34px; position: absolute; top: auto; bottom: 62px; left: auto; right: calc(50% - 1360px/2 200px); outline: none; background: url(/uploads/image/stmimages/a06.png) no-repeat; background-size: 100% 100%; } .ind1-next { width: 37px; height: 34px; position: absolute; top: auto; bottom: 62px; left: auto; right: calc(50% - 1360px/2); outline: none; background: url(/uploads/image/stmimages/a07.png) no-repeat; background-size: 100% 100%; } .swiper-button-next:after, .swiper-button-prev:after { content: none; } .ind1-pag { position: absolute; left: auto; right: calc(50% - 1360px/2 37px); bottom: 62px; width: max-content; width: 166px; text-align: center; color: #fff; font-size: 26px; line-height: 26px; /*font-family: 'dinr';*/ /*! left: 29.5%; */ } .ind1-pag .swiper-pagination-current { font-size: 46px; font-family: yumow04; } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .news>.ind5-a1:hover .ind5-a7 { opacity: 1; visibility: visible; transform: translatey(0); background: #f8994b; } .ind5-a7 { position: absolute; left: 80%; top: 40%; transition: 0.5s; } .news>.ind5-a1 .ind5-a7 { opacity: 1; position: absolute; bottom: .875rem; right: .875rem; width: .75rem; height: .75rem; font-size: .875rem; background: rgba(0, 0, 0, 0.7); color: #fff; text-align: center; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; text-transform: uppercase; transition: .5s; } .ind1 { width: 100%; height: 0; padding-bottom: calc(100%*960/1920); position: relative; } .ind1-swi { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .ind1-a { width: 100%; height: 100%; position: relative; } .ind1-a1 { width: 100%; height: 100%; } .ind1-a1>img { /* animation:big 3s infinite linear; */ } @keyframes big { 0% { transform: scale(1) } 50% { transform: scale(1.08) } 100% { transform: scale(1) } } .ind1-a2 { width: 1200px; height: 100%; position: absolute; left: calc(50% - 1200px/2); top: 0; display: table; } .ind1-a3 { display: table-cell; vertical-align: middle; } .ind1-a31 { font-size: 55px; line-height: 1; color: #fff; font-weight: 200; font-family: yumow04; text-transform: uppercase; } .ind1-a32 { font-size: calc(1200px*60/1360); line-height: calc(1200px*62/1360); color: #fff; margin-top: calc(1200px*35/1360); } .ind1-a32>span { font-weight: bold; } .ind1-a33 { font-size: 14px; line-height: 1.6; font-weight: lighter; color: #fff; margin-top: calc(1200px*67/1360); } .ind1-b { width: 28px; height: 44px; position: absolute; bottom: 60px; left: calc(50% - 28px/2); z-index: 2; animation: 3s jump linear infinite; } .ind1-prev { width: 37px; height: 34px; position: absolute; top: auto; bottom: 62px; left: auto; right: calc(50% - 1200px/2 200px); outline: none; background: url(/uploads/image/stmimages/a06.png) no-repeat; background-size: 100% 100%; } .ind1-next { width: 37px; height: 34px; position: absolute; top: auto; bottom: 62px; left: auto; right: calc(50% - 1200px/2); outline: none; background: url(/uploads/image/stmimages/a07.png) no-repeat; background-size: 100% 100%; } .swiper-button-next:after, .swiper-button-prev:after { content: none; } .top_menu_box .top_menu a { width: .32rem; height: .32rem; border-radius: 50%; border: 1px solid #fff; display: flex; align-items: center; justify-content: center; color: #fff; transition: all .4s; font-size: 14px; } .ind1-pag { position: absolute; left: auto; right: calc(50% - 1200px/2 37px); bottom: 62px; width: max-content; width: 166px; text-align: center; color: #fff; font-size: calc(1200px*26/1360); line-height: 26px; /*font-family: 'dinr';*/ } .ind1-pag .swiper-pagination-current { font-size: calc(1200px*46/1360); font-family: yumow04; } } @media only screen and (max-width: 1023px) { .ind1 { width: 100%; height: 13.34rem; position: relative; } .ind1-swi { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .ind1-a { width: 100%; height: 100%; position: relative; } .ind1-a1 { width: 100%; height: 100%; } .ind1-a1>img { width: auto; height: 100%; position: absolute; left: 20%; transform: translatex(-50%); } .ind1-a2 { width: calc(100% - 0.3rem*2); height: 100%; position: absolute; left: 0.3rem; top: -0.5rem; display: table; } .ind1-a3 { display: table-cell; vertical-align: middle; } .ind-pic.center { width: 45%; position: absolute; left: 28.5%; right: 0; top: 58%; transform: translatey(-50%); color: #fff; } .ind-pic { width: 75%; position: absolute; left: 22%; right: 0; top: 78%; transform: translatey(-50%); color: #fff; } .ind1-a31 { font-size: 0.6rem; line-height: 0.3rem; color: #fff; font-weight: 200; font-family: yumow04; text-transform: uppercase; } .ind1-a32 { font-size: 0.48rem; line-height: 0.48rem; color: #ffffff; margin-top: 0.35rem; } .ind1-a32>span { font-weight: bold; } .ind1-a33 { font-size: 0.25rem; line-height: 0.4rem; font-weight: lighter; color: #ffffff; margin-top: 0.65rem; width: calc(100% - .2rem* 2); } .ind1-b { width: 0.28rem; height: 0.44rem; position: absolute; bottom: 0.6rem; left: calc(50% - 0.28rem/2); z-index: 2; } .ind1-prev { width: 0.37rem; height: 0.34rem; position: absolute; top: auto; bottom: 0.62rem; left: auto; right: 2.3rem; outline: none; background: url(/uploads/image/stmimages/a06.png) no-repeat; background-size: 100% 100%; } .ind1-next { width: 0.37rem; height: 0.34rem; position: absolute; top: auto; bottom: 0.62rem; left: auto; right: 0.3rem; outline: none; background: url(/uploads/image/stmimages/a07.png) no-repeat; background-size: 100% 100%; } .swiper-button-next:after, .swiper-button-prev:after { content: none; } .ind1-pag { display: none; } } /* ãƒâ©ã‚â¦ã¢â‚¬â€œãƒâ©ã‚â¡ã‚âµãƒâ¤ã‚âºã…’ */ @media only screen and (min-width: 1640px) { .ind2 { width: 100%; position: relative; padding: 168px 0 60px 0; background: url(/uploads/image/stmimages/graybg2.jpg); } .ind2-b1 { height: 230px; position: absolute; top: 0; right: 0; } .ind2-b2 { height: 277px; position: absolute; bottom: 0; left: 0; } .ind2-b3 { height: 1000px; position: absolute; bottom: 0px; right: 100px; opacity: 0.3; } .ind2-a { width: 1360px; margin: 0 auto; position: relative; } .ind2-a1 { float: left; width: 55%; } .ind2-a2 { height: 49px; } .ind2-a3 { width: max-content; font-size: 46px; line-height: 1; font-weight: bold; margin-top: 0; background: #188947; -webkit-background-clip: text; color: transparent; } .ind2-a4 { font-size: 24px; line-height: 24px; color: #404142; font-weight: bold; margin-top: 80px; } .ind2-a5 { font-size: 16px; line-height: 1.8; color: #565656; margin-top: 20px; max-width: 77%; letter-spacing: 1px; } .ind2-a6 { width: 205px; height: 60px; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; display: flex; margin-top: 55px; align-items: center; justify-content: space-between; padding: 0 20px 0 5px; } .ind2-a61 { font-size: 15px; line-height: 1.6; color: #231f20; text-transform: uppercase; font-family: 'barlow'; } .ind2-a62 { width: 18px; height: 11px; margin-left: 17px; transition: 0.5s; } .ind2-a6:hover .ind2-a62 { transform: translatex(10px); transition: 0.5s; } .ind2-c { float: right; padding-top: 50px; width: 44%; } .ind2-c2 { float: left; margin-left: 10%; margin-right: 20%; } .ind2-c1>.ind2-c2:last-child { margin-right: 0; } .ind2-c21 { font-size: 16px; line-height: 18px; color: #2c2c4e; font-weight: 300; } .ind2-c21>span { font-size: 60px; background: #404142; -webkit-background-clip: text; color: transparent; font-family: "黑体", "simhei"; margin-right: 5px; font-weight: 100; } .ind2-c21>span:nth-child(1) { display: none } .ind2-c22 { font-size: 16px; line-height: 20px; color: #757575; margin-top: 20px; text-align: right; font-weight: 300; } .ind2-c4 { width: 340px; height: 340px; margin: 0 auto; margin-top: 50px; border-radius: 50%; position: relative; } .ind2-c4>img { width: 100%; height: 100%; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; animation: trans 3s linear infinite; } @keyframes trans { 0% { transform: scale(0.8); opacity: 1; } 50% { transform: scale(0.9); opacity: 0.5; } 100% { transform: scale(1); opacity: 0; } } .vr .ind2-c4 { width: 340px; height: 40px; margin: 0 auto; margin-top: -25px; border-radius: 50%; position: relative; } .vr .ind2-c33 { font-size: 18px; line-height: 18px; font-weight: bold; color: #fff; position: absolute; left: 28px; top: 15px; } .vr .ind2-c3 { width: 100%; height: 50px; background: #188947; border-radius: 0%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .vr .ind2-c34 { width: 13px; height: 13px; position: absolute; left: calc(80% - 13px / 2); bottom: 19px; } .ind2-c3 { width: 160px; height: 160px; background: linear-gradient(to bottom, #188947, #188947); border-radius: 50%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .ind2-c31 { font-size: 36px; line-height: 36px; color: #fff; /*font-family: 'dinr';*/ position: absolute; left: 28px; top: 28px; text-transform: uppercase; } .ind2-c32 { font-size: 24px; line-height: 40px; color: #fff; position: absolute; left: 22%; top: 40%; color: #ffffff; /* text-align: center; */ font-family: yumow04; } .ind2-c33 { font-size: 18px; line-height: 18px; font-weight: bold; color: #fff; position: absolute; left: 28px; top: 105px; } .ind2-c34 { width: 13px; height: 13px; position: absolute; left: calc(50% - 13px/2); bottom: 40px; } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .vr .ind2-c4 { width: 340px; height: 40px; margin: 0 auto; margin-top: 25px; border-radius: 50%; position: relative; } .vr .ind2-c33 { font-size: 18px; line-height: 18px; font-weight: bold; color: #fff; position: absolute; left: 28px; top: 15px; } .vr .ind2-c3 { width: 100%; height: 50px; background: #188947; border-radius: 0%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .vr .ind2-c34 { width: 13px; height: 13px; position: absolute; left: calc(80% - 13px / 2); bottom: 19px; } .ind2 { width: 100%; position: relative; padding: calc(1200px*178/1360) 0 calc(1200px*204/1360) 0; } .ind2-b1 { height: calc(1200px*230/1360); position: absolute; top: 0; right: 0; } .ind2-b2 { height: calc(1200px*277/1360); position: absolute; bottom: 0; left: 0; } .ind2-b3 { height: calc(1200px*604/1360); position: absolute; bottom: calc(1200px*35/1360); right: 0; } .ind2-a { width: 1200px; margin: 0 auto; position: relative; } .ind2-a1 { float: left; width: 50%; } .ind2-a2 { height: calc(1200px*49/1360); } .ind2-a3 { width: max-content; font-size: calc(1200px*42/1360); line-height: calc(1200px*42/1360); font-weight: bold; margin-top: 0; background: linear-gradient(68deg, #188947, #388d93); -webkit-background-clip: text; color: transparent; } .ind2-a4 { font-size: calc(1200px*24/1360); line-height: calc(1200px*24/1360); color: #454545; font-weight: bold; margin-top: 50px; } .ind2-a5 { font-size: 15px; line-height: 1.8; color: #565656; margin-top: 15px; max-width: 78%; } .ind2-a6 { width: calc(1200px*205/1360); height: calc(1200px*60/1360); border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; display: flex; margin-top: calc(1200px*115/1360); align-items: center; justify-content: space-between; padding: 0 calc(1200px*20/1360) 0 calc(1200px*5/1360); } .ind2-a61 { font-size: 15px; line-height: 1.6; color: #231f20; text-transform: uppercase; font-family: 'barlow'; } .ind2-a62 { width: calc(1200px*18/1360); height: calc(1200px*11/1360); margin-left: calc(1200px*17/1360); transition: 0.5s; } .ind2-a6:hover .ind2-a62 { transform: translatex(10px); transition: 0.5s; } .ind2-c { float: right; padding-top: calc(1200px*48/1360); width: 50%; } .ind2-c2 { float: left; margin-right: 10%; } .ind2-c1>.ind2-c2:last-child { margin-right: 0; } .ind2-c21 { font-size: calc(1200px*18/1360); line-height: calc(1200px*18/1360); color: #2c2c4e; } .ind2-c21>span { font-size: 42px; background: #404142; -webkit-background-clip: text; color: transparent; font-family: yumow04; } .ind2-c21>span:nth-child(1) { display: none } .ind2-c22 { font-size: 16px; line-height: calc(1200px*20/1360); color: #757575; margin-top: 10px; } .ind2-c4 { width: calc(1200px*340/1360); height: calc(1200px*340/1360); margin: 0 auto; margin-top: 10%; border-radius: 50%; position: relative; } .ind2-c4>img { width: 100%; height: 100%; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; animation: trans 3s linear infinite; } @keyframes trans { 0% { transform: scale(1); } 50% { transform: scale(0.8); } 100% { transform: scale(1); } } .ind2-c3 { width: calc(1200px*176/1360); height: calc(1200px*176/1360); background: #188947; border-radius: 50%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .ind2-c31 { font-size: calc(1200px*36/1360); line-height: calc(1200px*36/1360); color: #fff; /*font-family: 'dinr';*/ position: absolute; left: calc(1200px*28/1360); top: calc(1200px*28/1360); text-transform: uppercase; } .ind2-c32 { font-size: 28px; line-height: calc(1200px*50/1360); color: #fff; position: absolute; left: calc(1200px*28/1360); top: calc(1200px*60/1360); color: #dff2eb; font-family: yumow04; } .ind2-c33 { font-size: calc(1200px*18/1360); line-height: calc(1200px*18/1360); font-weight: bold; color: #fff; position: absolute; left: calc(1200px*28/1360); top: calc(1200px*105/1360); } .ind2-c34 { width: calc(1200px*13/1360); height: calc(1200px*13/1360); position: absolute; left: calc(50% - (1200px*13/1360)/2); bottom: calc(1200px*24/1360); } } @media only screen and (max-width: 1023px) { .ky1-a3 p span { color: #188947; font-weight: 400; } .vr .ind2-c4 { width: 320px; height: 40px; margin: 0% auto 10%; /* margin: 0; */ border-radius: 50%; position: relative; } .vr .ind2-c33 { font-size: 18px; line-height: 18px; font-weight: bold; color: #fff; position: absolute; left: 28px; top: 15px; } .vr .ind2-c3 { width: 100%; height: 50px; background: #188947; border-radius: 0%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .vr .ind2-c34 { width: 13px; height: 13px; position: absolute; left: calc(80% - 13px / 2); bottom: 19px; } .ind2 { width: 100%; position: relative; padding: 1.28rem 0 1.55rem 0; background: url(/uploads/image/stmimages/graybg2.jpg); } .ind2-b1 { height: 2.3rem; position: absolute; top: 0; right: 0; } .ind2-b2 { height: 2.77rem; position: absolute; bottom: 0; left: 0; } .ind2-b3 { height: 7.5rem; position: absolute; bottom: 0; right: 0; opacity: 0.5; } .ind2-b3.down { height: 400px !important; position: absolute; top: 1800px !important; left: 200px !important; z-index: -1; overflow: hidden; opacity: 1; } .ind2-b3.shang { height: 300px !important; position: absolute; top: 1500px !important; right: 220px !important; z-index: -1; overflow: hidden; opacity: 1; } .ind2-a { width: calc(100% - 0.4rem*2); margin: 0 auto; position: relative; } .ind2-a2 { height: 0.49rem; } .ind2-a3 { width: max-content; font-size: 0.42rem; line-height: 0.42rem; font-weight: bold; margin-top: 0.23rem; background: linear-gradient(68deg, #188947, #388d93); -webkit-background-clip: text; color: transparent; } .ind2-a4 { font-size: 0.36rem; line-height: 0.3rem; color: #454545; font-weight: bold; margin-top: 0.46rem; } .ind2-a5 { font-size: 14px; line-height: 0.45rem; color: #565656; margin-top: 0.25rem; } .ind2-a6 { width: 2.42rem; height: 0.8rem; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; display: flex; margin: 0.8rem 0 0.2rem 0; align-items: center; justify-content: space-between; padding: 0 0.2rem 0 0.05rem; } .ind2-a61 { font-size: 0.22rem; line-height: 0.22rem; color: #231f20; text-transform: uppercase; font-family: 'barlow'; } .ind2-a62 { width: 0.24rem; height: 10px; margin-left: 0.17rem; transition: 0.5s; } .ind2-c { padding-top: 0.48rem; } .ind2-c1 { width: 100%; display: flex; justify-content: space-between; } .ind2-c1.clear:after { content: normal; } .ind2-c21 { font-size: 0.2rem; line-height: 0.2rem; color: #2c2c4e; } .ind2-c21>span { font-size: 0.6rem; background: #404142; -webkit-background-clip: text; color: transparent; font-family: yumow04; } .ind2-c21>span:nth-child(1) { display: none } .ind2-c22 { font-size: 0.26rem; line-height: 0.26rem; color: #757575; margin-top: 0.3rem; } .ind2-c4 { width: 3.6rem; height: 3.6rem; margin: 0 auto; margin-top: 1rem; border-radius: 50%; position: relative; } .ind2-c4>img { width: 100%; height: 100%; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; animation: trans 3s linear infinite; } @keyframes trans { 0% { transform: scale(1); } 50% { transform: scale(0.8); } 100% { transform: scale(1); } } .ind2-c3 { width: 1.76rem; height: 1.76rem; background: #188947; border-radius: 50%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .ind2-c31 { font-size: 0.36rem; line-height: 0.36rem; color: #fff; /*font-family: 'dinr';*/ position: absolute; left: 0.28rem; top: 0.28rem; text-transform: uppercase; } .ind2-c32 { font-size: 0.35rem; line-height: 0.6rem; color: #fff; position: absolute; left: 0.28rem; top: 0.6rem; color: #dff2eb; font-family: yumow04; } .ind2-c33 { font-size: 0.2rem; line-height: 0.2rem; font-weight: bold; color: #fff; position: absolute; left: 0.28rem; top: 1.05rem; } .ind2-c34 { width: 0.2rem; height: 0.23rem; position: absolute; left: calc(50% - 0.13rem/2); bottom: 0.24rem; } } /* ãƒâ©ã‚â¦ã¢â‚¬â€œãƒâ©ã‚â¡ã‚âµãƒâ¤ã‚â¸ã¢â‚¬â° */ @media only screen and (min-width: 1640px) { .ind3 { width: 100%; /* background: #e7e8e930; */ padding: 90px 0 30px 0; overflow: hidden; /* background: url(/uploads/image/stmimages/graybg2.jpg); */ } .ind3-a { width: 1360px; margin: 0 auto; position: relative; } .ind3-a1 { position: relative; width: 100%; } .ind3-a1a { font-size: 48px; line-height: 48px; font-family: 'oswald'; background: #188947; -webkit-background-clip: text; color: transparent; text-transform: uppercase; } .ind3-a1b { font-size: 32px; line-height: 32px; margin-top: 24px; } .ind3-a1 .ind2-a6 { position: absolute; right: 0; top: 15px; margin-top: 0; font-weight: 400; } .ind3-a2 { width: 100%; margin-top: 0; padding-bottom: 95px; position: relative; } .ind3-swi { width: calc(585px*3); } .ind3-a21 { width: 100%; height: 350px; background: #00823ecf; position: relative; } .ind3-swi>div>.swiper-slide:nth-child(2n) .ind3-a21 { background: #188947; } .ind3-swi>div>.swiper-slide:nth-child(3n) .ind3-a21 { background: #09889be3; } .ind3-a21>img { height: 280px; position: absolute; right: 0; top: 0; left: 0; bottom: 0; margin: auto; transition: 0.5s; } .ind3-a22 { font-size: 24px; line-height: 24px; font-weight: bold; margin-top: 57px; } .ind3-a23 { font-size: 16px; line-height: 1.6; color: #757575; margin-top: 23px; } .ind3-a21:hover>img { transform: scale(1.08); transition: 0.5s; } .ind3-next { width: 18px; height: 11px; background: url(/uploads/image/stmimages/a16.png) no-repeat; background-size: 100% 100%; position: absolute; right: 0; top: auto; bottom: calc(50px/2 - 11px/2); outline: none; } .ind3-prev { width: 18px; height: 11px; background: url(/uploads/image/stmimages/a17.png) no-repeat; background-size: 100% 100%; position: absolute; left: auto; right: 90px; top: auto; bottom: calc(50px/2 - 11px/2); outline: none; } .ind3-line { width: 1px; height: 20px; background: #bfbfbf; position: absolute; bottom: 3%; right: 54px; } .ind3-scr { width: calc(100% - 165px); height: 1px; position: absolute; left: 0; bottom: calc(50px/2 - 1px/2); background: #dcdcdc; } .swiper-scrollbar-drag { height: 3px; margin-top: -1px; background: linear-gradient(to right, #188947, #188947); } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .ind3 { width: 100%; /* background: #edf7f0; */ padding: calc(1200px*90/1360) 0 calc(1200px*125/1360) 0; overflow: hidden; /* background: url(/uploads/image/stmimages/graybg2.jpg); */ } .ind3-a { width: 1200px; margin: 0 auto; position: relative; } .ind3-a1 { position: relative; width: 100%; } .ind3-a1a { font-size: calc(1200px*48/1360); line-height: calc(1200px*48/1360); font-family: 'oswald'; background: #188947; -webkit-background-clip: text; color: transparent; text-transform: uppercase; } .ind3-a1b { font-size: calc(1200px*32/1360); line-height: calc(1200px*32/1360); margin-top: calc(1200px*24/1360); } .ind3-a1 .ind2-a6 { position: absolute; right: 0; top: calc(1200px*3/1360); margin-top: 0; } .ind3-a2 { width: 100%; margin-top: 0; padding-bottom: calc(1200px*95/1360); position: relative; } .ind3-swi { width: calc((1200px*585/1360)*3); } .ind3-a21 { width: 100%; height: calc(1200px*350/1360); background: #59bc69; position: relative; } .ind3-swi>div>.swiper-slide:nth-child(2n) .ind3-a21 { background: #00b8bb; } .ind3-swi>div>.swiper-slide:nth-child(3n) .ind3-a21 { background: #188947; } .ind3-a21>img { height: calc(1200px*280/1360); position: absolute; right: 0; top: 0; left: 0; bottom: 0; margin: auto; transition: 0.5s; } .ind3-a22 { font-size: calc(1200px*24/1360); line-height: calc(1200px*24/1360); font-weight: bold; margin-top: calc(1200px*57/1360); } .ind3-a23 { font-size: calc(1200px*16/1360); line-height: calc(1200px*16/1360); color: #757575; margin-top: calc(1200px*23/1360); } .ind3-a21:hover>img { transform: scale(1.08); transition: 0.5s; } .ind3-next { width: 18px; height: 11px; background: url(/uploads/image/stmimages/a16.png) no-repeat; background-size: 100% 100%; position: absolute; right: 0; top: auto; bottom: calc(20px/2 - 11px/2); outline: none; } .ind3-prev { width: 18px; height: 11px; background: url(/uploads/image/stmimages/a17.png) no-repeat; background-size: 100% 100%; position: absolute; left: auto; right: 90px; top: auto; bottom: calc(20px/2 - 11px/2); outline: none; } .ind3-line { width: 1px; height: 20px; background: #bfbfbf; position: absolute; bottom: 0; right: 54px; } .ind3-scr { width: calc(100% - 165px); height: 1px; position: absolute; left: 0; bottom: calc(20px/2 - 1px/2); background: #dcdcdc; } .swiper-scrollbar-drag { height: 3px; margin-top: -1px; background: linear-gradient(to right, #188947, #188947); } } @media only screen and (max-width: 1023px) { .ind3 { width: 100%; /* background: #ffffff; */ padding: 0.9rem 0 0.9rem 0; overflow: hidden; } .ind3-a { width: calc(100% - 0.4rem*2); margin: 0 auto; position: relative; } .ind3-a1 { position: relative; width: 100%; } .ind3-a1a { font-size: 0.38rem; line-height: 0.48rem; font-family: 'oswald'; background: #188947; -webkit-background-clip: text; color: transparent; text-transform: uppercase; } .ind3-a1b { font-size: 0.32rem; line-height: 0.32rem; margin-top: 0.24rem; } .ind3-a1 .ind2-a6 { position: absolute; right: 0; top: 0.53rem; margin-top: 0; } .s_tt h3 { font-size: 18px; color: #188947; margin-left: 12px; margin-bottom: 0px; } .s_tt h4 { font-size: 22px; font-family: yumow04; position: relative; display: inline-block; background: #231f20; -webkit-background-clip: text; color: transparent; line-height: 1.1; } .lineanim1 { height: 12px; width: 42px; transform: rotate(122deg); position: absolute; left: -60px; } .lineanim1 i { display: block; width: 30px; height: 1px; background: #188947; transition: .8s; position: absolute; opacity: 1; } .ind3-a2 { width: 100%; margin: 0rem 0 0.6rem 0; padding-bottom: 0.75rem; position: relative; } .ind3-swi { width: 100%; } .ind3-a21 { width: 100%; height: 3.8rem; backgroundãƒâ¯ã‚â¼ã…â¡#59bc69; position: relative; background: #59bc69; } .ind3-swi>div>.swiper-slide:nth-child(2n) .ind3-a21 { background: #00b8bb; } .ind3-swi>div>.swiper-slide:nth-child(3n) .ind3-a21 { background: #188947; } .ind3-a21>img { height: 2.6rem; position: absolute; right: 0; top: 0; left: 0; bottom: 0; margin: auto; transition: 0.5s; } .ind3-a22 { font-size: 0.3rem; line-height: 0.3rem; font-weight: bold; margin-top: 0.57rem; } .ind3-a23 { font-size: 14px; line-height: 0.4rem; color: #757575; margin-top: 0.23rem; } .ind3-next { width: 0.24rem; height: 0.15rem; background: url(/uploads/image/stmimages/a16.png) no-repeat; background-size: 100% 100%; position: absolute; right: 0; top: auto; bottom: calc(0.2rem/2 - 0.11rem/2); outline: none; } .ind3-prev { width: 0.24rem; height: 0.15rem; background: url(/uploads/image/stmimages/a17.png) no-repeat; background-size: 100% 100%; position: absolute; left: auto; right: 0.9rem; top: auto; bottom: calc(0.2rem/2 - 0.11rem/2); outline: none; } .ind3-line { width: 0.01rem; height: 0.2rem; background: #bfbfbf; position: absolute; bottom: 0; right: 0.54rem; } .ind3-scr { width: calc(100% - 1.65rem); height: 0.01rem; position: absolute; left: 0; bottom: calc(0.2rem/2 - 0.01rem/2); background: #dcdcdc; } .swiper-scrollbar-drag { height: 0.03rem; margin-top: -0.01rem; background: linear-gradient(to right, #188947, #188947); } } /* ãƒâ©ã‚â¦ã¢â‚¬â€œãƒâ©ã‚â¡ã‚âµãƒâ¥ã¢â‚¬âºã¢â‚¬âº */ @media only screen and (min-width: 1640px) { .ind4 { width: 100%; position: relative; padding: 190px 0 163px 0; overflow: hidden; } .ind4-i { width: 1920px; height: 1200px; position: absolute; left: calc(50% - 1920px/2); top: calc(50% - 1200px/2); } .ind4-a { width: 1360px; margin: 0 auto; position: relative; } .ind4-b { float: left; } .ind4-b1 { font-size: 60px; line-height: 72px; color: #fff; text-transform: uppercase; font-family: 'oswald'; } .ind4-b2 { font-size: 36px; line-height: 36px; color: #fff; font-weight: bold; margin-top: 44px; } .ind4-b3 { margin-top: 120px; } .ind4-b31 { float: left; margin-right: 35px; font-size: 18px; line-height: 24px; color: #fff; transition: 0.5s; } .ind4-b3>.ind4-b31:last-child { margin-right: 0; } .ind4-b31.on { font-weight: bold; font-size: 24px; } .ind4-b31:hover { font-weight: bold; font-size: 22px; transition: 0.5s; } .ind4-b .ind2-a6 { border-top: 1px solid #fff; border-bottom: 1px solid #fff; margin-top: 150px; } .ind4-b .ind2-a61 { color: #fff; } .ind4-c { float: right; margin-top: 235px; width: 745px; height: 345px; background: #fff; padding: 60px 65px 60px 65px; position: relative; } .ind4-swi { width: 100%; height: 100%; } .ind4-c1 { width: 100%; height: 100%; } .ind4-c2 { font-size: 18px; line-height: 26px; font-weight: bold; color: #a9a9a9; font-style: italic; } .ind4-c2>span { font-size: 26px; color: #333333; font-style: normal; } .ind4-c3 { font-size: 16px; line-height: 36px; height: calc(36px*4); overflow: hidden; overflow-y: auto; color: #565656; margin-top: 35px; } .ind4-c3::-webkit-scrollbar { width: 3px; background: #efefef; border-radius: 20rpx; } .ind4-c3::-webkit-scrollbar-thumb { width: 3px; background: #188947; border-radius: 20rpx; } .ind4-next { width: 18px; height: 11px; background: url(/uploads/image/stmimages/a21.png) no-repeat; background-size: 100% 100%; position: absolute; right: auto; left: 154px; top: auto; bottom: calc(105px/2 - 11px/2); outline: none; } .ind4-prev { width: 18px; height: 11px; background: url(/uploads/image/stmimages/a20.png) no-repeat; background-size: 100% 100%; position: absolute; left: 65px; top: auto; bottom: calc(105px/2 - 11px/2); outline: none; } .ind4-line { width: 1px; height: 20px; background: #bfbfbf; position: absolute; left: 118px; bottom: calc(105px/2 - 20px/2); } .ind4-pag { height: max-content; position: absolute; top: -87px; left: auto; right: 0; color: #fff; width: max-content; font-size: 18px; line-height: 18px; font-family: 'oswald'; } .ind4-pag .swiper-pagination-current { font-size: 36px; } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .ind4 { width: 100%; position: relative; padding: calc(1200px*190/1360) 0 calc(1200px*163/1360) 0; overflow: hidden; } .ind4-i { width: 1920px; height: 1200px; position: absolute; left: calc(50% - 1920px/2); top: calc(50% - 1200px/2); } .ind4-a { width: 1200px; margin: 0 auto; position: relative; } .ind4-b { float: left; } .ind4-b1 { font-size: calc(1200px*60/1360); line-height: calc(1200px*72/1360); color: #fff; text-transform: uppercase; font-family: 'oswald'; } .ind4-b2 { font-size: calc(1200px*36/1360); line-height: calc(1200px*36/1360); color: #fff; font-weight: bold; margin-top: calc(1200px*44/1360); } .ind4-b3 { margin-top: calc(1200px*120/1360); } .ind4-b31 { float: left; margin-right: calc(1200px*90/1360); font-size: calc(1200px*20/1360); line-height: calc(1200px*24/1360); color: #fff; transition: 0.5s; } .ind4-b3>.ind4-b31:last-child { margin-right: 0; } .ind4-b31.on { font-weight: bold; font-size: calc(1200px*24/1360); } .ind4-b31:hover { font-weight: bold; font-size: 24px; transition: 0.5s; } .ind4-b .ind2-a6 { border-top: 1px solid #fff; border-bottom: 1px solid #fff; margin-top: calc(1200px*150/1360); } .ind4-b .ind2-a61 { color: #fff; } .ind4-c { float: right; margin-top: calc(1200px*235/1360); width: calc(1200px*745/1360); height: calc(1200px*345/1360); background: #fff; padding: calc(1200px*60/1360) calc(1200px*65/1360) calc(1200px*60/1360) calc(1200px*65/1360); position: relative; } .ind4-swi { width: 100%; height: 100%; } .ind4-c1 { width: 100%; height: 100%; } .ind4-c2 { font-size: calc(1200px*18/1360); line-height: calc(1200px*26/1360); font-weight: bold; color: #a9a9a9; font-style: italic; } .ind4-c2>span { font-size: calc(1200px*26/1360); color: #333333; font-style: normal; } .ind4-c3 { font-size: calc(1200px*16/1360); line-height: calc(1200px*36/1360); height: calc((1200px*36/1360)*4); overflow: hidden; overflow-y: auto; color: #565656; margin-top: calc(1200px*35/1360); } .ind4-c3::-webkit-scrollbar { width: 3px; background: #efefef; border-radius: 20rpx; } .ind4-c3::-webkit-scrollbar-thumb { width: 3px; background: #188947; border-radius: 20rpx; } .ind4-next { width: calc(1200px*18/1360); height: calc(1200px*11/1360); background: url(/uploads/image/stmimages/a21.png) no-repeat; background-size: 100% 100%; position: absolute; right: auto; left: calc(1200px*154/1360); top: auto; bottom: calc((1200px*105/1360)/2 - (1200px*11/1360)/2); outline: none; } .ind4-prev { width: calc(1200px*18/1360); height: calc(1200px*11/1360); background: url(/uploads/image/stmimages/a20.png) no-repeat; background-size: 100% 100%; position: absolute; left: calc(1200px*65/1360); top: auto; bottom: calc((1200px*105/1360)/2 - (1200px*11/1360)/2); outline: none; } .ind4-line { width: 1px; height: calc(1200px*20/1360); background: #bfbfbf; position: absolute; left: calc(1200px*118/1360); bottom: calc((1200px*105/1360)/2 - (1200px*20/1360)/2); } .ind4-pag { height: max-content; position: absolute; top: calc(1200px*-87/1360); left: auto; right: 0; color: #fff; width: max-content; font-size: calc(1200px*18/1360); line-height: calc(1200px*18/1360); font-family: 'oswald'; } .ind4-pag .swiper-pagination-current { font-size: calc(1200px*36/1360); } } @media only screen and (max-width: 1023px) { .ind4 { width: 100%; position: relative; padding: 1.9rem 0 1.63rem 0; overflow: hidden; } .ind4-i { height: 100%; position: absolute; left: 50%; transform: translatex(-50%); top: 0; } .ind4-i>img { width: auto !important; } .ind4-a { width: calc(100% - 0.3rem*2); margin: 0 auto; position: relative; } .ind4-b { float: left; } .ind4-b1 { font-size: 0.6rem; line-height: 0.72rem; color: #fff; text-transform: uppercase; font-family: 'oswald'; } .ind4-b2 { font-size: 0.36rem; line-height: 0.36rem; color: #fff; font-weight: bold; margin-top: 0.44rem; } .ind4-b3 { margin-top: 1.2rem; } .ind4-b31 { float: left; margin-right: 0.9rem; font-size: 0.24rem; line-height: 0.3rem; color: #fff; } .ind4-b3>.ind4-b31:last-child { margin-right: 0; } .ind4-b31.on { font-weight: bold; font-size: 0.3rem; } .ind4-b .ind2-a6 { border-top: 0.01rem solid #fff; border-bottom: 0.01rem solid #fff; margin-top: 150px; } .ind4-b .ind2-a61 { color: #fff; } .ind4-c { float: right; margin-top: 2.35rem; width: 100%; height: 3.8rem; background: #fff; padding: 0.6rem 0.65rem 1.05rem 0.65rem; position: relative; } .ind4-swi { width: 100%; height: 100%; } .ind4-c1 { width: 100%; height: 100%; } .ind4-c2 { font-size: 0.24rem; line-height: 0.4rem; font-weight: bold; color: #a9a9a9; font-style: italic; } .ind4-c2>span { font-size: 0.32rem; color: #333333; font-style: normal; } .ind4-c3 { font-size: 0.24rem; line-height: 0.4rem; color: #565656; margin-top: 0.35rem; height: calc(0.4rem*4); overflow: hidden; overflow-y: auto; } .ind4-c3::-webkit-scrollbar { width: 0.04rem; background: #efefef; border-radius: 20rpx; } .ind4-c3::-webkit-scrollbar-thumb { width: 0.04rem; background: #188947; border-radius: 20rpx; } .ind4-next { width: 0.24rem; height: 15px; background: url(/uploads/image/stmimages/a21.png) no-repeat; background-size: 100% 100%; position: absolute; right: auto; left: 1.54rem; top: auto; bottom: calc(1.05rem/2 - 0.11rem/2); outline: none; } .ind4-prev { width: 0.24rem; height: 15px; background: url(/uploads/image/stmimages/a20.png) no-repeat; background-size: 100% 100%; position: absolute; left: 0.65rem; top: auto; bottom: calc(1.05rem/2 - 0.11rem/2); outline: none; } .ind4-line { width: 0.01rem; height: 0.2rem; background: #bfbfbf; position: absolute; left: 1.18rem; bottom: calc(1.05rem/2 - 0.2rem/2); } .ind4-pag { height: max-content; position: absolute; top: -0.87rem; left: auto; right: 0; color: #fff; width: max-content; font-size: 0.24rem; line-height: 0.24rem; font-family: 'oswald'; } .ind4-pag .swiper-pagination-current { font-size: 0.36rem; } } /* ãƒâ©ã‚â¦ã¢â‚¬â€œãƒâ©ã‚â¡ã‚âµãƒâ¤ã‚âºã¢â‚¬â */ @media only screen and (min-width: 1640px) { .ind5 { width: 100%; padding: 88px 0 83px 0; background: #f7f7fa; } .ind5-t { position: relative; } .ind5-t>div:nth-child(1) { font-size: 48px; line-height: 48px; text-align: center; font-family: 'oswald'; background: #188947; -webkit-background-clip: text; color: transparent; text-transform: uppercase; } .ind5-t>div:nth-child(2) { font-size: 38px; line-height: 36px; color: #454545; font-weight: bold; text-align: center; margin-top: 25px; } .ind5-a { width: 1360px; margin: 0 auto; margin-top: 137px; position: relative; } .ind5-a1 { width: 32%; float: left; margin-right: 2%; position: relative; padding-left: 2%; margin-bottom: 40px; } .ind5-a>.ind5-a1:nth-child(2n) { margin-right: 0; } .ind5-a2 { width: 100%; height: 302px; } .ind5-a2>img { width: 100%; transition: 0.5s; } .ind5-a3 { font-size: 18px; line-height: 20px; color: #454545; font-weight: bold; margin-top: 43px; transition: 0.5s; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; white-space: normal; } .ind5-a4 { font-size: 15px; line-height: 1.6; color: #757575; height: auto; margin-top: 18px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } .ind5-a5 { width: 100%; height: 2px; background: #eeeeee; margin-top: 28px; transition: 0.5s; } .ind5-a6 { margin-top: 20px; position: relative; } .ind5-a61 { width: 105px; height: 40px; text-align: center; line-height: 40px; font-size: 14px; color: #454545; cursor: pointer; background: #fff; border-radius: 50px; float: left; margin-right: 25px; transition: 0.5s; } .ind5-a6>.ind5-a61:last-child { margin-right: 0; } .ind5-a62 { background: none; float: right; } .ind5-a61:hover { background: #188947; color: #fff; transition: 0.5s; } .ind5-a7 { position: absolute; left: 80%; top: 40%; transition: 0.5s; } .ind5-a71 { font-size: 32px; line-height: 1.2; color: #ffffff; font-family: yumow04; } .ind5-a72 { font-size: 18px; line-height: 18px; color: #959595; /*font-family: 'dinr';*/ margin-top: 0px; } .ind5-a73 { width: 10px; height: 14px; position: absolute; right: 0; top: calc(42px/2 - 14px/2); } .ind5-a73>img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .ind5-a73>img:nth-child(1) { opacity: 1; transition: 0.5s; } .ind5-a73>img:nth-child(2) { opacity: 0; transition: 0.5s; } .ind5-a1:hover .ind5-a73>img:nth-child(1) { opacity: 0; transition: 0.5s; } .ind5-a1:hover .ind5-a73>img:nth-child(2) { opacity: 1; transition: 0.5s; } .ind5-a1:hover .ind5-a71, .ind5-a1:hover .ind5-a72 { color: #188947; } .ind5-a1:hover .ind5-a2>img { transform: scale(1.08); transition: 0.5s; position: relative; } .ind5-a1:hover .ind5-a3 { color: #188947; transition: 0.5s; } .ind5-a1:hover .ind5-a5 { background: #188947; transition: 0.5s; } .ind5-b { width: max-content; margin: 0 auto; margin-top: 40px; display: flex; align-items: center; } .ind5-b>div:nth-child(1) { font-size: 18px; line-height: 18px; color: #2c2c4e; font-family: 'barlow'; margin-right: 10px; text-transform: uppercase; } .ind5-b>div:nth-child(2) { width: 18px; height: 11px; transition: 0.5s; } .ind5-b:hover>div:nth-child(2) { transform: translatex(10px); transition: 0.5s; } .ind5-line { width: 1px; height: calc(100%); position: absolute; left: calc(50% - 1px/2); top: 0; background: #dddddd; } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .ind5 { width: 100%; padding: calc(1200px*88/1360) 0 calc(1200px*83/1360) 0; background: #f7f7fa; } .ind5-t { position: relative; } .ind5-t>div:nth-child(1) { font-size: calc(1200px*48/1360); line-height: calc(1200px*48/1360); text-align: center; font-family: 'oswald'; background: #188947; -webkit-background-clip: text; color: transparent; text-transform: uppercase; } .ind5-t>div:nth-child(2) { font-size: calc(1200px*36/1360); line-height: calc(1200px*36/1360); color: #454545; font-weight: bold; text-align: center; margin-top: calc(1200px*25/1360); } .ind5-a { width: 1200px; margin: 0 auto; margin-top: calc(1200px*137/1360); position: relative; } .ind5-a1 { width: 32%; float: left; margin-right: 2%; position: relative; padding-left: 2%; margin-bottom: calc(1200px*40/1360); } .ind5-a>.ind5-a1:nth-child(2n) { margin-right: 0; } .ind5-a2 { width: 100%; height: calc(1200px*302/1360); } .ind5-a2>img { width: 100%; transition: 0.5s; } .ind5-a3 { font-size: calc(1200px*20/1360); line-height: calc(1200px*20/1360); color: #454545; font-weight: bold; margin-top: calc(1200px*43/1360); transition: 0.5s; } .ind5-a4 { font-size: calc(1200px*16/1360); line-height: calc(1200px*36/1360); color: #757575; height: calc(1200px*72/1360); margin-top: calc(1200px*28/1360); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } .ind5-a5 { width: 100%; height: 2px; background: #eeeeee; margin-top: calc(1200px*28/1360); transition: 0.5s; } .ind5-a6 { margin-top: calc(1200px*37/1360); position: relative; } .ind5-a61 { width: calc(1200px*105/1360); height: calc(1200px*40/1360); text-align: center; line-height: calc(1200px*40/1360); font-size: calc(1200px*16/1360); color: #454545; cursor: pointer; background: #fff; border-radius: 50px; float: left; margin-right: calc(1200px*25/1360); transition: 0.5s; } .ind5-a6>.ind5-a61:last-child { margin-right: 0; } .ind5-a62 { background: none; float: right; } .ind5-a61:hover { background: #188947; color: #fff; transition: 0.5s; } .ind5-a7 { position: absolute; left: 0; top: calc(1200px*50/1360); transition: 0.5s; } .ind5-a71 { font-size: calc(1200px*42/1360); line-height: calc(1200px*42/1360); color: #ffffff; font-family: yumow04; } .ind5-a72 { font-size: calc(1200px*18/1360); line-height: calc(1200px*18/1360); color: #959595; /*font-family: 'dinr';*/ margin-top: calc(1200px*18/1360); } .ind5-a73 { width: calc(1200px*10/1360); height: calc(1200px*14/1360); position: absolute; right: 0; top: calc((1200px*42/1360)/2 - (1200px*14/1360)/2); } .ind5-a73>img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .ind5-a73>img:nth-child(1) { opacity: 1; transition: 0.5s; } .ind5-a73>img:nth-child(2) { opacity: 0; transition: 0.5s; } .ind5-a1:hover .ind5-a73>img:nth-child(1) { opacity: 0; transition: 0.5s; } .ind5-a1:hover .ind5-a73>img:nth-child(2) { opacity: 1; transition: 0.5s; } .ind5-a1:hover .ind5-a71, .ind5-a1:hover .ind5-a72 { color: #188947; } .ind5-a1:hover .ind5-a2>img { transform: scale(1.08); transition: 0.5s; } .ind5-a1:hover .ind5-a3 { color: #188947; transition: 0.5s; } .ind5-a1:hover .ind5-a5 { background: #188947; transition: 0.5s; } .ind5-b { width: max-content; margin: 0 auto; margin-top: calc(1200px*40/1360); display: flex; align-items: center; } .ind5-b>div:nth-child(1) { font-size: calc(1200px*18/1360); line-height: calc(1200px*18/1360); color: #2c2c4e; font-family: 'barlow'; margin-right: calc(1200px*10/1360); text-transform: uppercase; } .ind5-b>div:nth-child(2) { width: calc(1200px*18/1360); height: calc(1200px*11/1360); transition: 0.5s; } .ind5-b:hover>div:nth-child(2) { transform: translatex(10px); transition: 0.5s; } .ind5-line { width: 1px; height: calc(100%); position: absolute; left: calc(50% - 1px/2); top: 0; background: #dddddd; } } @media only screen and (max-width: 1023px) { .ind5 { width: 100%; padding: 0.88rem 0 0.83rem 0; background: #f7f7fa; } .ind5-t { position: relative; } .ind5-t>div:nth-child(1) { font-size: 0.48rem; line-height: 0.48rem; text-align: center; font-family: 'oswald'; background: #188947; -webkit-background-clip: text; color: transparent; text-transform: uppercase; } .ind5-t>div:nth-child(2) { font-size: 26px; line-height: 0.36rem; color: #454545; font-weight: bold; text-align: center; margin-top: 0.25rem; } .ind5-a { width: calc(100% - 0.3rem*2); margin: 0 auto; margin-top: 1.37rem; } .ind5-a1 { width: 100%; position: relative; padding-left: 0; margin-bottom: 0.4rem; } .ind5-a>.ind5-a1:nth-child(2n) { margin-bottom: 0; } .ind5-a2 { width: 100%; height: 3.8rem; } .ind5-a2>img { width: 100%; transition: 0.5s; } .ind5-a3 { font-size: 16px; /*! line-height: 0.28rem; */ color: #454545; font-weight: bold; margin-top: 0.43rem; transition: 0.5s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ind5-a4 { font-size: 14px; line-height: 0.4rem; color: #757575; height: 0.8rem; margin-top: 0.2rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } .ind5-a5 { width: 100%; height: 0.02rem; background: #eeeeee; margin-top: 0.2rem; transition: 0.5s; } .ind5-a6 { margin-top: 0.37rem; position: relative; } .ind5-a61 { width: 1.25rem; height: 0.4rem; text-align: center; line-height: 0.4rem; font-size: 0.24rem; color: #454545; cursor: pointer; background: #fff; border-radius: 0.5rem; float: left; margin-right: 0.25rem; transition: 0.5s; } .ind5-a6>.ind5-a61:last-child { margin-right: 0; } .ind5-a62 { background: none; float: right; } .ind5-a7 { position: absolute; left: 0; top: 0.5rem; } .ind5-a71 { font-size: 0.42rem; line-height: 0.42rem; color: #ffffff; font-family: yumow04; } .ind5-a72 { font-size: 0.26rem; line-height: 0.26rem; color: #ffffff; /*font-family: 'dinr';*/ margin-top: .05rem; } .ind5-a73 { width: 0.1rem; height: 14px; position: absolute; right: 0; top: calc(0.42rem/2 - 0.14rem/2); } .ind5-a73>img:nth-child(2) { display: none; transition: 0.5s; } .ind5-b { width: max-content; margin: 0 auto; margin-top: 0.8rem; display: flex; align-items: center; } .ind5-b>div:nth-child(1) { font-size: 0.26rem; line-height: 0.26rem; color: #2c2c4e; font-family: 'barlow'; margin-right: 0.1rem; text-transform: uppercase; } .ind5-b>div:nth-child(2) { width: 0.24rem; height: 15px; transition: 0.5s; } } @media only screen and (min-width: 1640px) { .bto { width: 100%; /*! background: #188947; */ position: relative; overflow: hidden; padding-top: 105px; } .bto-i1 { height: 800px; position: absolute; left: 350px; top: -120px; opacity: 0.3; } .bto-i2 { height: 250px; position: absolute; right: 70px; top: 0; } .bto-a { width: 1600px; margin: 0 auto; position: relative; } .bto-a1 { float: left; } .bto-a1 a { color: #fff; } .bto-a2>div { float: left; font-size: 18px; line-height: 18px; color: #fff; font-weight: bold; margin-right: 65px; } .bto-a2>div:last-child { margin-right: 0; } .bto-a3 { width: 355px; margin-top: 77px; } .bto-a31 { width: 100%; height: 56px; border: 1px solid rgba(255, 255, 255, 0.21); display: flex; align-items: center; justify-content: space-between; padding: 0 22px 0 35px; } .bto-a31>div:nth-child(1) { font-size: 16px; line-height: 16px; color: #fff; } .bto-a31>div:nth-child(2) { width: 15px; height: 10px; transition: 0.5s; } .bto-a31.on>div:nth-child(2) { transform: rotate(180deg); transition: 0.5s; } .bto-a32 { width: 100%; padding: 12px 35px; border: 1px solid rgba(255, 255, 255, 0.21); margin-top: 5px; display: none; } .bto-a32>div { font-size: 16px; line-height: 30px; color: #fff; } .bto-a4 { float: left; margin-left: 155px; padding-top: 0; } .bto-a41 { margin-bottom: 67px; display: flex; align-items: center; } .bto-a42 { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); position: relative; } .bto-a42>img { height: 20px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .bto-a43 { margin-left: 34px; } .bto-a43>div:nth-child(1) { font-size: 16px; line-height: 16px; color: #ffffffb3; } .bto-a43>div:nth-child(2) { font-size: 33px; line-height: 36px; color: #fff; margin-top: 10px; font-family: yumow04; } .bto-a4>.bto-a41:nth-child(2) .bto-a43>div:nth-child(2) { font-size: 26px; } .bto-a44 { width: 175px; height: 52px; background: rgba(244, 236, 222, 0.39); display: flex; align-items: center; justify-content: center; } .bto-a44>div:nth-child(1) { font-size: 16px; line-height: 16px; color: #fff; margin-right: 32px; } .bto-a44>div:nth-child(2) { width: 18px; height: 11px; transition: 0.5s; } .bto-a44:hover>div:nth-child(2) { transform: translatex(10px); } .bto-a5 { float: right; } .bto-a51 { margin-top: 25px; } .bto-a52 { float: right; width: 42px; height: 42px; margin-left: 38px; } .bto-a51>.bto-a52:last-child { margin-left: 0; } .bto-a52:hover img { transform: rotatey(360deg); transition: 0.5s; } .bto-a53 { margin-top: 70px; } .bto-a53>div { float: right; width: 136px; height: 136px; margin-left: 25px; } .bto-a53>div:last-child { margin-left: 0; } .bto-b { width: 100%; margin-top: 65px; border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 30px 0 25px 0; } .bto-b1 { width: 1600px; margin: 0 auto; } .bto-b1>div { font-size: 15px; line-height: 15px; margin-bottom: 20px; text-align: left; color: rgba(255, 255, 255, 0.6); } .bto-b1>div:last-child { margin-bottom: 0; } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .bto { width: 100%; /*! background: #188947; */ position: relative; overflow: hidden; padding-top: calc(1200px*105/1360); } .bto-i1 { height: calc(1200px*900/1600); position: absolute; left: calc(1200px*350/1600); top: -20px; opacity: 0.3; } .bto-i2 { height: calc(1200px*250/1360); position: absolute; right: calc(1200px*70/1360); top: 0; } .bto-a { width: 1200px; margin: 0 auto; position: relative; } .bto-a1 { float: left; } .bto-a2>div { float: left; font-size: 16px; line-height: calc(1200px*18/1360); color: #fff; font-weight: bold; margin-right: 30px; } .bto-a2>div:last-child { margin-right: 0; } .bto-a3 { width: calc(1200px*355/1360); margin-top: calc(1200px*77/1360); } .bto-a31 { width: 100%; height: calc(1200px*56/1360); border: 1px solid rgba(255, 255, 255, 0.21); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(1200px*22/1360) 0 calc(1200px*35/1360); } .bto-a31>div:nth-child(1) { font-size: calc(1200px*16/1360); line-height: calc(1200px*16/1360); color: #fff; } .bto-a31>div:nth-child(2) { width: calc(1200px*15/1360); height: calc(1200px*10/1360); transition: 0.5s; } .bto-a31.on>div:nth-child(2) { transform: rotate(180deg); transition: 0.5s; } .bto-a32 { width: 100%; padding: calc(1200px*12/1360) calc(1200px*35/1360); border: 1px solid rgba(255, 255, 255, 0.21); margin-top: calc(1200px*5/1360); display: none; } .bto-a32>div { font-size: calc(1200px*16/1360); line-height: calc(1200px*30/1360); color: #fff; } .bto-a4 { float: left; margin-left: 5%; padding-top: 0; } .bto-a41 { margin-bottom: calc(1200px*67/1360); display: flex; align-items: center; } .bto-a42 { width: calc(1200px*52/1360); height: calc(1200px*52/1360); border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); position: relative; } .bto-a42>img { height: calc(1200px*20/1360); position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .bto-a43 { margin-left: calc(1200px*34/1360); } .bto-a43>div:nth-child(1) { font-size: calc(1200px*16/1360); line-height: calc(1200px*16/1360); color: rgba(255, 255, 255, 0.82); } .bto-a43>div:nth-child(2) { font-size: 30px; line-height: 1; color: #fff; margin-top: 10px; font-family: yumow04; } .bto-a4>.bto-a41:nth-child(2) .bto-a43>div:nth-child(2) { font-size: calc(1200px*26/1360); } .bto-a44 { width: calc(1200px*175/1360); height: calc(1200px*52/1360); background: rgba(244, 236, 222, 0.39); display: flex; align-items: center; justify-content: center; } .bto-a44>div:nth-child(1) { font-size: calc(1200px*16/1360); line-height: calc(1200px*16/1360); color: #fff; margin-right: calc(1200px*32/1360); } .bto-a44>div:nth-child(2) { width: calc(1200px*18/1360); height: calc(1200px*11/1360); transition: 0.5s; } .bto-a44:hover>div:nth-child(2) { transform: translatex(10px); } .bto-a5 { float: right; } .bto-a51 { margin-top: 5%; } .bto-a52 { float: right; width: calc(1200px*42/1360); height: calc(1200px*42/1360); margin-left: calc(1200px*38/1360); } .bto-a51>.bto-a52:last-child { margin-left: 0; } .bto-a53 { margin-top: calc(1200px*70/1360); } .bto-a53>div { float: right; width: calc(1200px*136/1360); height: calc(1200px*136/1360); margin-left: calc(1200px*25/1360); } .bto-a53>div:last-child { margin-left: 0; } .bto-b { width: 100%; margin-top: calc(1200px*65/1360); border-top: 1px solid rgba(255, 255, 255, 0.07); padding: calc(1200px*30/1360) 0 calc(1200px*25/1360) 0; } .bto-b1 { width: 1200px; margin: 0 auto; /*! text-align: right; */ } .bto-b1>div { font-size: calc(1200px*15/1360); line-height: calc(1200px*15/1360); margin-bottom: calc(1200px*20/1360); /*! text-align: right; */ color: rgba(255, 255, 255, 0.6); } .bto-b1>div:last-child { margin-bottom: 0; } } @media only screen and (max-width: 1023px) { .bto { width: 100%; /*! background: #188947; */ position: relative; overflow: hidden; padding-top: 1.05rem; } .bto-i1 { /* display: none; */ height: 500px; position: absolute; left: 0; top: -60px; opacity: 0.2; } .bto-i2 { height: 2.5rem; position: absolute; right: 70px; top: 0; } .bto-a { width: calc(100% - 0.3rem*2); margin: 0 auto; position: relative; } .bto-a2 { display: flex; justify-content: space-between; } .bto-a2.clear::after { content: normal; } .bto-a2>div { font-size: 0.26rem; line-height: 0.26rem; color: #fff; font-weight: bold; } .bto-a3 { width: 3.55rem; margin-top: 0.5rem; } .bto-a31 { width: 100%; height: 0.8rem; border: 0.01rem solid rgba(255, 255, 255, 0.21); display: flex; align-items: center; justify-content: space-between; padding: 0 0.22rem 0 0.35rem; } .bto-a31>div:nth-child(1) { font-size: 0.24rem; line-height: 0.24rem; color: #fff; } .bto-a31>div:nth-child(2) { width: 0.25rem; height: 0.18rem; transition: 0.5s; } .bto-a31.on>div:nth-child(2) { transform: rotate(180deg); transition: 0.5s; } .bto-a32 { width: 100%; padding: 0.12rem 0.35rem; border: 0.01rem solid rgba(255, 255, 255, 0.21); margin-top: 0.05rem; display: none; } .bto-a32>div { font-size: 0.24rem; line-height: 0.4rem; color: #fff; } .bto-a4 { margin-top: 0.3rem; } .bto-a41 { margin-bottom: 0.67rem; display: flex; align-items: center; } .bto-a42 { width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 0.01rem solid rgba(255, 255, 255, 0.28); position: relative; } .bto-a42>img { height: 0.3rem; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .bto-a43 { margin-left: 0.34rem; } .bto-a43>div:nth-child(1) { font-size: 0.24rem; line-height: 0.24rem; color: rgba(255, 255, 255, 0.5); } .bto-a43>div:nth-child(2) { font-size: 0.36rem; line-height: 0.36rem; color: #fff; margin-top: 0.2rem; font-family: yumow04; } .bto-a4>.bto-a41:nth-child(2) .bto-a43>div:nth-child(2) { font-size: 0.3rem; } .bto-a44 { width: 2rem; height: 0.65rem; background: rgba(244, 236, 222, 0.39); display: flex; align-items: center; justify-content: center; } .bto-a44>div:nth-child(1) { font-size: 0.24rem; line-height: 0.24rem; color: #fff; margin-right: 0.32rem; } .bto-a44>div:nth-child(2) { width: 0.24rem; height: 15px; transition: 0.5s; } .bto-a51 { margin-top: 45px; display: flex; justify-content: center; } .bto-a51.clear::after { content: none; } .bto-a52 { width: 0.6rem; height: 0.6rem; margin-right: 0.38rem; } .bto-a51>.bto-a52:last-child { margin-right: 0; } .bto-a53 { margin-top: 0.5rem; display: flex; justify-content: center; } .bto-a53.clear::after { content: none; } .bto-a53>div { float: left; width: 1.36rem; height: 1.36rem; margin-right: 0.25rem; } .bto-a53>div:last-child { margin-right: 0; } .bto-b { width: 100%; margin-top: 0.65rem; border-top: 0.01rem solid rgba(255, 255, 255, 0.07); padding: 0.3rem 0 0.25rem 0; } .bto-b1 { width: calc(100% - 0.3rem*2); margin: 0 auto; } .bto-b1>div { font-size: 0.24rem; line-height: 0.4rem; text-align: center; color: rgba(255, 255, 255, 0.6); } .bto-b1>div:last-child { margin-bottom: 0; } } /* ãƒâ¥ã¢â‚¬å“ã‚âãƒâ§ã¢â‚¬â°ã…’ãƒâ¤ã‚â¸ã‚â­ãƒâ¥ã‚â¿ã†â€™ */ @media only screen and (min-width: 1640px) { .top { width: 100%; height: 0; padding-bottom: calc(100%*550/1920); position: relative; } .top-i { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .top-a { width: 100%; height: 100%; display: table; position: absolute; left: 15%; top: 0; } .top-a1 { display: table-cell; vertical-align: middle; } .top-a1a { font-size: 30px; line-height: 2; color: #fff; /* font-family: yumow04; */ text-align: left; text-shadow: 1px 0 2px rgb(0 0 0 / 9%); font-weight: 400; } .top-a1b { width: 33px; height: 6px; background: #fff; border-radius: 50px; margin: 0 auto; margin-top: 40px; } .top-a1c { font-size: 45px; line-height: 1; color: #fff; font-weight: 700; text-align: left; text-shadow: 1px 0 2px rgb(0 0 0 / 22%); margin-top: 100px; } .top-b { position: absolute; width: 28px; height: 44px; left: calc(50% - 28px/2); bottom: 60px; animation: 3s jump linear infinite; } @keyframes jump { 0% { transform: translatey(0px); } 50% { transform: translatey(-20px); } 100% { transform: translatey(0); } } .pp { width: 1360px; margin: 0 auto; margin-top: 80px; } .pp1 { width: 100%; } .pp1-a { float: left; font-size: 15px; line-height: 22px; color: #ffffff; margin-right: 25px; } .pp1-a.on { font-weight: bold; font-size: 22px; } .pp1>.pp1-a:last-child { margin-right: 0; } .pp2 { width: 100%; margin-top: 95px; padding-bottom: 154px; } .pp2-a { width: calc(50% - 5px); float: left; margin-right: 10px; margin-bottom: 114px; } .pp2>.pp2-a:nth-child(2n) { margin-right: 0; } .pp2-a1 { width: 100%; height: 470px; background: #f6f6f6; position: relative; transition: 0.5s; } .pp2-a1>img { height: 247px; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; transition: 0.5s; } .pp2-a:hover .pp2-a1>img { transform: scale(1.08); transition: 0.5s; } .pp2-a2 { width: 160px; height: 160px; border-radius: 50%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; border-radius: 50%; background: url(/uploads/image/stmimages/a38.png) no-repeat; background-size: 100% 100%; opacity: 0; transition: 0.5s; } .pp2-a2>img { width: 23px; height: 23px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .pp2-a:hover .pp2-a2 { opacity: 1; transition: 0.5s; } .pp2-a:hover .pp2-a1 { background: #e2eee4; transition: 0.5s; } .pp2-a3 { font-size: 24px; line-height: 24px; font-weight: bold; margin-top: 74px; } .pp2-a4 { font-size: 16px; line-height: 16px; height: 72px; color: #757575; margin-top: 12px; } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .top { width: 100%; height: 0; padding-bottom: calc(100%*960/1920); position: relative; } .top-i { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .top-a { width: 100%; height: 100%; display: table; position: absolute; left: 0; top: 0; } .top-a1 { display: table-cell; vertical-align: middle; } .top-a1a { font-size: calc(1200px*72/1360); line-height: calc(1200px*72/1360); color: #fff; /* font-family: yumow04; */ text-align: center; /*! text-shadow: 1px 0 2px rgba(0, 0, 0, 0.31); */ /*! text-transform: uppercase; */ } .top-a1b { width: calc(1200px*33/1360); height: calc(1200px*6/1360); background: #fff; border-radius: 50px; margin: 0 auto; margin-top: calc(1200px*40/1360); } .top-a1c { font-size: calc(1200px*56/1360); line-height: calc(1200px*56/1360); color: #fff; font-weight: bold; text-align: center; /*! text-shadow: 1px 0 2px rgba(0, 0, 0, 0.31); */ margin-top: calc(1200px*30/1360); } .top-b { position: absolute; width: calc(1200px*28/1360); height: calc(1200px*44/1360); left: calc(50% - (1200px*28/1360)/2); bottom: calc(1200px*60/1360); animation: 3s jump linear infinite; } @keyframes jump { 0% { transform: translatey(0px); } 50% { transform: translatey(-20px); } 100% { transform: translatey(0); } } .pp { width: 1360px; margin: 0 auto; margin-top: calc(1200px*118/1360); } .pp1 { width: 100%; } .pp1-a { float: left; font-size: calc(1200px*18/1360); line-height: calc(1200px*22/1360); color: #ffffff; margin-right: calc(1200px*75/1360); } .pp1-a.on { font-weight: bold; font-size: calc(1200px*22/1360); } .pp1>.pp1-a:last-child { margin-right: 0; } .pp2 { width: 100%; margin-top: calc(1200px*95/1360); padding-bottom: calc(1200px*154/1360); } .pp2-a { width: calc(50% - 5px); float: left; margin-right: 10px; margin-bottom: calc(1200px*114/1360); } .pp2>.pp2-a:nth-child(2n) { margin-right: 0; } .pp2-a1 { width: 100%; height: calc(1200px*470/1360); background: #f6f6f6; position: relative; transition: 0.5s; } .pp2-a1>img { height: calc(1200px*247/1360); position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; transition: 0.5s; } .pp2-a:hover .pp2-a1>img { transform: scale(1.08); transition: 0.5s; } .pp2-a2 { width: calc(1200px*160/1360); height: calc(1200px*160/1360); border-radius: 50%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; border-radius: 50%; background: url(/uploads/image/stmimages/a38.png) no-repeat; background-size: 100% 100%; opacity: 0; transition: 0.5s; } .pp2-a2>img { width: calc(1200px*23/1360); height: calc(1200px*23/1360); position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .pp2-a:hover .pp2-a2 { opacity: 1; transition: 0.5s; } .pp2-a:hover .pp2-a1 { background: #e2eee4; transition: 0.5s; } .pp2-a3 { font-size: calc(1200px*24/1360); line-height: calc(1200px*24/1360); font-weight: bold; margin-top: calc(1200px*74/1360); } .pp2-a4 { font-size: calc(1200px*16/1360); line-height: 16px; height: calc(1200px*72/1360); color: #757575; margin-top: calc(1200px*22/1360); } } @media only screen and (max-width: 1023px) { .top { width: 100%; height: 0; padding-bottom: calc(100%*1430/1920); position: relative; margin-top: calc(100%*300/1920); } .top-i { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .nybanner .top-i .img1 { display: none; } .nybanner .top-i .img2 { display: block; } .top-i img { object-fit: cover; /*! max-height: auto; */ /*! width: auto; */ } .top-a { width: 100%; height: 100%; display: table; position: absolute; left: 10%; top: 10%; } .top-a1 { /*! display: table-cell; */ /*! vertical-align: middle; */ margin-top: 1.8rem; display: flex; } .top-a1a { font-size: 0.4rem; line-height: 1rem; color: #fff; /* font-family: yumow04; */ text-align: left; /*! text-shadow: 1px 0 2px rgba(0, 0, 0, 0.31); */ text-transform: capitalize; font-weight: 400; padding-left: .3rem; } .top-a1b { width: 0.33rem; height: 0.06rem; background: #fff; border-radius: 0.5rem; margin: 0 auto; margin-top: 0.2rem; } .top.nybanner .top-a1 .black { color: #fff; } .top-a1c { font-size: 0.46rem; line-height: 0.46rem; color: #fff; font-weight: bold; text-align: left; /*! text-shadow: 1px 0 2px rgba(0, 0, 0, 0.31); */ margin-top: 0.2rem; /* font-weight: 200; */ } .top-b { position: absolute; width: 0.28rem; height: 0.44rem; left: calc(50% - 0.44rem/2); bottom: 0.8rem; animation: 3s jump linear infinite; } @keyframes jump { 0% { transform: translatey(0px); } 50% { transform: translatey(-20px); } 100% { transform: translatey(0); } } .pp { width: calc(100% - 0.3rem*2); margin: 0 auto; margin-top: 0.8rem; } .pp1 { width: 100%; } .pp1-a { float: left; font-size: 0.26rem; line-height: 0.4rem; color: #fff; margin-right: 0.7rem; display: none; } .pp1-a.on { font-weight: bold; font-size: 0.3rem; } .pp1>.pp1-a:last-child { margin-right: 0; } .pp2 { width: 100%; margin-top: 0.8rem; } .pp2-a { width: calc(50% - 0.05rem); float: left; margin-right: 0.1rem; margin-bottom: 0.8rem; } .pp2>.pp2-a:nth-child(2n) { margin-right: 0; } .pp2-a1 { width: 100%; height: 3.5rem; background: #f6f6f6; position: relative; transition: 0.5s; } .pp2-a1>img { height: 1.47rem; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; transition: 0.5s; } .pp2-a2 { display: none; } .pp2-a3 { font-size: 0.3rem; line-height: 0.3rem; font-weight: bold; margin-top: 0.5rem; } .pp2-a4 { font-size: 0.24rem; line-height: 0.4rem; height: 0.8rem; color: #757575; margin-top: 0.22rem; } } /* ãƒâ¦ã¢â‚¬â€œã‚â°ãƒâ©ã¢â‚¬â€ã‚â»ãƒâ¤ã‚â¸ã‚â­ãƒâ¥ã‚â¿ã†â€™ */ @media only screen and (min-width: 1640px) { .news { width: 100%; margin-top: 80px; } .news>.ind5-a1 { margin-bottom: 4%; } .news>.ind5-a1:nth-child(3n) { margin-right: 0; } .news>.ind5-a1:hover .ind5-a7 { opacity: 1; visibility: visible; transform: translatey(0); background: #188947; } .news>.ind5-a1 .ind5-a7 { opacity: 1; position: absolute; bottom: .875rem; right: .875rem; width: .75rem; height: .75rem; font-size: .875rem; background: rgba(0, 0, 0, 0.7); color: #fff; text-align: center; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; text-transform: uppercase; transition: .5s; } .news>.ind5-a1 .ind5-a71, .news>.ind5-a1 .ind5-a72 { color: #ffffff; transition: 0.5s; } .news>.ind5-a1 .ind5-a73>img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .news>.ind5-a1 .ind5-a73>img:nth-child(1) { opacity: 1; transition: 0.5s; } .news>.ind5-a1 .ind5-a73>img:nth-child(2) { opacity: 0; transition: 0.5s; } .news>.ind5-a1:hover .ind5-a73>img:nth-child(2) { opacity: 1; transition: 0.5s; } .news>.ind5-a1:hover .ind5-a73>img:nth-child(1) { opacity: 0; transition: 0.5s; } .news>.ind5-a1:hover .ind5-a71, .news>.ind5-a1:hover .ind5-a72 { color: #ffffff; transition: 0.5s; } .ind5-a63 { width: 13px; height: 13px; position: absolute; right: 0; top: calc(50% - 13px/2); } .news>.ind5-a1 .ind5-a61 { background: #eeeeee; transition: 0.5s; } .news>.ind5-a1 .ind5-a61:hover { background: #188947; transition: 0.5s; } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .news { width: 100%; margin-top: calc(1200px*112/1360); } .news>.ind5-a1 { margin-bottom: 4%; } .news>.ind5-a1:nth-child(3n) { margin-right: 0; } .news>.ind5-a1 .ind5-a7 { opacity: 1; left: 78%; top: 32%; } .news>.ind5-a1 .ind5-a71, .news>.ind5-a1 .ind5-a72 { color: #ffffff; transition: 0.5s; } .news>.ind5-a1 .ind5-a73>img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .news>.ind5-a1 .ind5-a73>img:nth-child(1) { opacity: 1; transition: 0.5s; } .news>.ind5-a1 .ind5-a73>img:nth-child(2) { opacity: 0; transition: 0.5s; } .news>.ind5-a1:hover .ind5-a73>img:nth-child(2) { opacity: 1; transition: 0.5s; } .news>.ind5-a1:hover .ind5-a73>img:nth-child(1) { opacity: 0; transition: 0.5s; } .news>.ind5-a1:hover .ind5-a71, .news>.ind5-a1:hover .ind5-a72 { color: #ffffff; transition: 0.5s; } .ind5-a63 { width: calc(1200px*13/1360); height: calc(1200px*13/1360); position: absolute; right: 0; top: calc(50% - (1200px*13/1360)/2); } .news>.ind5-a1 .ind5-a61 { background: #eeeeee; transition: 0.5s; } .news>.ind5-a1 .ind5-a61:hover { background: #188947; transition: 0.5s; } } @media only screen and (max-width: 1023px) { .news { width: 100%; margin-top: 0.8rem; } .news>.ind5-a1 { margin-bottom: 0.8rem; } .news>.ind5-a1 .ind5-a7 { opacity: 1; left: 80%; top: 40%; } .news>.ind5-a1 .ind5-a73>img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .news>.ind5-a1 .ind5-a73>img:nth-child(1) { opacity: 0; transition: 0.5s; } .news>.ind5-a1 .ind5-a73>img:nth-child(2) { opacity: 1; transition: 0.5s; } .ind5-a63 { width: 0.18rem; height: 0.18rem; position: absolute; right: 0; top: calc(50% - 0.18rem/2); } .news>.ind5-a1 .ind5-a61 { background: #eeeeee; transition: 0.5s; } } /* ãƒâ¥ã¢â‚¬â¦ã‚â³ãƒâ¤ã‚âºã…â½ãƒâ¦ã‹â€ ã¢â‚¬ëœãƒâ¤ã‚â»ã‚⬠*/ @media only screen and (min-width: 1640px) { .ab1 { width: 100%; padding: 150px 0 195px 0; position: relative; background: url(/uploads/image/stmimages/a46.jpg) no-repeat 100% 100%; } .ab1-a { width: 1360px; margin: 0 auto; } .ab1-a1 { width: 401px; float: left; margin-left: 135px; } .ab1-a2 { width: calc(100% - 401px - 135px); height: 577px; float: left; padding-left: 153px; display: table; } .ab1-a3 { display: table-cell; vertical-align: middle; } .ab1-a31 { font-size: 96px; line-height: 96px; color: #5e5e5e; /*font-family: 'dinr';*/ } .ab1-a31>span { font-family: yumow04; } .ab1-a32 { width: max-content; font-size: 32px; font-weight: bold; line-height: 34px; margin-top: 38px; background: linear-gradient(68deg, #188947, #388d93); -webkit-background-clip: text; color: transparent; } .ab1-a33 { font-size: 16px; line-height: 42px; color: #565656; margin-top: 66px; } .ab1-b1 { height: 373px; position: absolute; left: 0; top: 0; } .ab2 { width: 100%; background: #ecf1f5; padding: 80px 0 90px 0; overflow: hidden; } .ab2-a { width: 1360px; margin: 0 auto; margin-top: 50px; position: relative; padding-bottom: 120px; } .ab2-a.one { width: 1360px; margin: 0 auto; margin-top: 110px; position: relative; padding-bottom: 50px; } .ab2-all { width: 100%; height: 303px; position: relative; } .n_tt2 { text-align: center; margin-bottom: .55rem; } .n_tt2 i { display: block; font-size: 100px; font-family: yumow04; height: .65rem; overflow: hidden; color: #188947; letter-spacing: -4px; font-weight: 700; } .ky1-a i { display: block; font-size: 100px; /*font-family: 'dinr';*/ height: .65rem; overflow: hidden; color: #188947; letter-spacing: -4px; font-weight: 700; } .n_tt2 span { font-size: 32px; color: #010101; display: block; font-family: yumow04; text-transform: uppercase; margin-top: .15rem; /* font-weight: 700; */ } .n_tt2 h3 { font-size: 28px; color: #343635; margin-top: .1rem; } .n_tt2 p { font-size: 1rem; color: rgba(0, 0, 0, 0.7); margin-top: 2.375rem; line-height: 1.5; } .ab2-swi { width: calc(697px*4 57px*3); height: 303px; left: 50%; transform: translatex(-50%); } .ab2-a1 { width: 100%; height: 100%; background: #fff; padding: 37px 35px; } .ab2-a2 { width: 346px; height: 100%; float: left; } .ab2-a2>img { width: 100%; transition: 0.5s; } .ab2-a3 { width: calc(100% - 346px - 40px); float: left; margin-left: 32px; padding-top: 50px; } .ab2-a31 { font-size: 18px; line-height: 18px; color: #454545; margin-bottom: 30px; } .ab2-a31>span { font-family: yumow04; font-size: 40px; margin-right: 20px; transition: 0.5s; } .ab2-a32 { font-size: 16px; line-height: 1.4; color: #454545; margin-top: 15px; } .ab2-a32 span { font-size: 18px; line-height: 1.4; color: #454545; } .ab2-a32 .icon.one { float: left; width: 25px; margin-top: 0px; margin-left: 3px; margin-right: 10px; } .ab2-a32 .icon { float: left; width: 30px; margin-right: 10px; } .ab2-a1:hover .ab2-a2>img { transform: scale(1.08); transition: 0.5s; } .ab2-a1:hover .ab2-a31>span { color: #188947; transition: 0.5s; } .ab3 { width: 100%; height: auto; position: relative; padding: 80px 0 0px 0; } .ab3 .ind5-t { position: absolute; left: 0; width: 100%; top: 100px; } .ab3-a { width: 1360px; height: 100%; position: absolute; left: calc(50% - 1360px/2); top: 0; display: table; } .ab3-all { display: table-cell; vertical-align: middle; } .ab3-back { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .ab3-a1 { font-size: 36px; line-height: 36px; color: #565656; font-weight: bold; } .ab3-a2 { font-size: 16px; line-height: 42px; color: #565656; margin-top: 10%; float: left; width: 29%; } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .n_tt2 { text-align: center; margin-bottom: .125rem; } .n_tt2 i { display: block; font-size: 100px; font-family: yumow04; height: .4rem; overflow: hidden; color: #188947; letter-spacing: -4px; font-weight: 700; } .ky1-a i { display: block; font-size: 70px; /*font-family: 'dinr';*/ height: .35rem; overflow: hidden; color: #188947; letter-spacing: 0px; font-weight: 700; } .n_tt2 span { font-size: 32px; color: #010101; display: block; font-family: yumow04; text-transform: uppercase; margin-top: .15rem; /* font-weight: 700; */ } .n_tt2 h3 { font-size: 28px; color: #343635; margin-top: .1rem; } .n_tt2 p { font-size: 1rem; color: rgba(0, 0, 0, 0.7); margin-top: 2.375rem; line-height: 1.5; } .ab1 { width: 100%; padding: calc(1200px*150/1360) 0 calc(1200px*195/1360) 0; position: relative; background: url(/uploads/image/stmimages/a46.jpg) no-repeat 100% 100%; } .ab1-a { width: 1200px; margin: 0 auto; } .ab1-a1 { width: calc(1200px*401/1360); float: left; margin-left: calc(1200px*135/1360); } .ab1-a2 { width: calc(100% - (1200px*401/1360) - (1200px*135/1360)); height: calc(1200px*577/1360); float: left; padding-left: calc(1200px*153/1360); display: table; } .ab1-a3 { display: table-cell; vertical-align: middle; } .ab1-a31 { font-size: calc(1200px*96/1360); line-height: calc(1200px*96/1360); color: #5e5e5e; /*font-family: 'dinr';*/ } .ab1-a31>span { font-family: yumow04; } .ab1-a32 { width: max-content; font-size: calc(1200px*32/1360); font-weight: bold; line-height: calc(1200px*34/1360); margin-top: calc(1200px*38/1360); background: linear-gradient(68deg, #188947, #388d93); -webkit-background-clip: text; color: transparent; } .ab1-a33 { font-size: calc(1200px*16/1360); line-height: calc(1200px*42/1360); color: #565656; margin-top: calc(1200px*66/1360); } .ab1-b1 { height: calc(1200px*373/1360); position: absolute; left: 0; top: 0; } .ab2 { width: 100%; background: #f0f3f5; padding: calc(1200px*130/1360) 0 calc(1200px*150/1360) 0; overflow: hidden; } .ab2-a { width: 1200px; margin: 0 auto; margin-top: calc(1200px*110/1360); position: relative; padding-bottom: calc(1200px*170/1360); } .ab2-all { width: 100%; height: calc(1200px*303/1360); position: relative; } .ab2-swi { width: calc((1200px*697/1360)*4 57px*3); height: calc(1200px*303/1360); left: 50%; transform: translatex(-50%); } .ab2-a1 { width: 100%; height: 100%; background: #fff; padding: calc(1200px*37/1360) calc(1200px*35/1360); } .ab2-a2 { width: calc(1200px*346/1360); height: 100%; float: left; } .ab2-a2>img { width: 100%; transition: 0.5s; } .ab2-a3 { width: calc(100% - (1200px*346/1360) - (1200px*40/1360)); float: left; margin-left: 25px; padding-top: 40px; } .ab2-a31 { font-size: calc(1200px*18/1360); line-height: calc(1200px*18/1360); color: #454545; margin-bottom: 25px; } .ab2-a31>span { font-family: yumow04; font-size: 40px; margin-right: 20px; transition: 0.5s; } .ab2-a32 { font-size: 16px; line-height: 1.5; color: #454545; margin-top: 12px; } .ab2-a32 .icon { float: left; width: 30px; margin-right: 10px; } .ab2-a32 .icon.one { float: left; width: 25px; margin-left: 3px; margin-right: 10px; margin-top: 0; } .ab2-a32 span { font-size: 18px; line-height: 1.4; color: #454545; } .ab2-a1:hover .ab2-a2>img { transform: scale(1.08); transition: 0.5s; } .ab2-a1:hover .ab2-a31>span { color: #188947; transition: 0.5s; } .ab3 { width: 100%; height: 0; padding: 80px 0 90px 0; position: relative; } @font-face { font-family: 'barlow'; src: ; } @font-face { font-family: 'oswald'; src: ; } @font-face { font-family: yumow04; src: ; } .line { margin: 10px 0px 30px 0px; border-bottom: 1px solid rgb(137 137 137 / 30%); } * { padding: 0; margin: 0; box-sizing: border-box; } body { font: normal normal 0.32rem/1 sans-serif; color: #404142; background: #fff; } textarea, input { font: normal normal 0.28rem/1.5 sans-serif; } img { display: block; border: none; } .clear: after { content: ""; display: block; clear: both; } input[type=button], input[type=submit], input[type=file], input[type=reset], button { cursor: pointer; -webkit-appearance: none; } body, p, ol, ul, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; list-style: none; font: normal normal 0.28rem/1.5 sans-serif; } button { font: normal normal 0.28rem/1.5 sans-serif; } a { color: inherit; text-decoration: none; } .i100 { overflow: hidden; } .i100>img { width: 100%; } .i200 { overflow: hidden; } .i200>img { height: 100%; } .i300 { overflow: hidden; } .i300>img { width: 100%; /* height: 100%; */ } .nybanner .img .img2 { display: none; } .nybanner .img { overflow: hidden; } .nybanner .img .img1 { transition: all 1.4s; transform: scale(1.06); } .nybanner .img .img1.cur { transform: scale(1); } a>img { /*! width: 100%; */ } .to1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .a1 { position: relative; } .a1>a { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: block; } input { border: 0; display: block; outline: none; background: none; box-sizing: border-box; } select { border: 0; display: block; outline: none; background: none; box-sizing: border-box; } button { border: 0; display: block; outline: none; background: none; box-sizing: border-box; } .to2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } .to3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; } .to4 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; white-space: normal; } .to5 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; white-space: normal; } .to6 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; white-space: normal; } .to7 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; white-space: normal; } .to8 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; white-space: normal; } .to9 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; white-space: normal; } .to10 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; white-space: normal; } textarea { border: 0; display: block; outline: none; background: none; box-sizing: border-box; resize: none; } /* ãƒâ¥ã‚â¯ã‚â¼ãƒâ¨ã‹â€ ã‚⪠*/ @media only screen and (min-width: 1640px) { .dh { width: 100%; height: 115px; position: fixed; top: 0; left: 0; z-index: 9; transition: 0.5s; } .dh1 { height: 59px; position: absolute; left: calc(50% - 1360px/2); top: calc(50% - 59px/2); } .dh1>img:nth-child(2) { display: none; } .dh2 { position: absolute; right: calc(50% - 1360px/2); top: calc(50% - 21px/2); height: 21px; } .dh2>img:nth-child(2) { display: none; } .dh3 { position: absolute; right: calc(50% - 1360px/2 100px); top: 0; } .dh31 { float: left; margin-right: 95px; font-size: 16px; color: #fff; line-height: 110px; position: relative; transition: 0.5s; } .dh31>div { width: 0; height: 3px; background: #fff; position: absolute; left: calc(50% - 74px/2); bottom: 5px; transition: 0.5s; } .dh.on .dh31>div, .dh.on2 .dh31>div { background: #188947; transition: 0.5s; } .dh3>.dh31: last-child { margin-right: 0; } .dh.on, .dh.on2 { background: #fff; transition: 0.5s; } .dh.on .dh31, .dh.on2 .dh31 { color: #333; transition: 0.5s; } .dh.on .dh1>img:nth-child(1), .dh.on2 .dh1>img:nth-child(1) { display: none; } .dh.on .dh1>img:nth-child(2), .dh.on2 .dh1>img:nth-child(2) { display: block; } .dh.on .dh2>img:nth-child(1), .dh.on2 .dh2>img:nth-child(1) { display: none; } .dh.on .dh2>img:nth-child(2), .dh.on2 .dh2>img:nth-child(2) { display: block; } .dh31: hover>div { width: 74px; transition: 0.5s; } .dh31.on>div, .dh31.on2>div { width: 74px; } .dh4 { display: none; } .ydh { display: none; } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .dh { width: 100%; height: 100px; position: fixed; top: 0; left: 0; z-index: 9; transition: 0.5s; } .dh1 { height: calc(1200px*59/1360); position: absolute; left: calc(50% - 1200px/2); top: calc(50% - (1200px*59/1360)/2); } .dh1>img:nth-child(2) { display: none; } .dh2 { position: absolute; right: calc(50% - 1200px/2); top: calc(50% - (1200px*21/1360)/2); height: calc(1200px*21/1360); } .dh2>img:nth-child(2) { display: none; } .dh3 { position: absolute; right: calc(50% - 1200px/2 (1200px*100/1360)); top: 0; } .dh31 { float: left; margin-right: calc(1200px*95/1360); font-size: calc(1200px*16/1360); color: #fff; line-height: 100px; position: relative; transition: 0.5s; } .dh31>div { width: 0; height: 3px; background: #fff; position: absolute; left: calc(50% - (1200px*74/1360)/2); bottom: 5px; transition: 0.5s; } .dh.on .dh31>div, .dh.on2 .dh31>div { background: #188947; transition: 0.5s; } .dh3>.dh31: last-child { margin-right: 0; } .dh.on, .dh.on2 { background: #fff; transition: 0.5s; } .dh.on .dh31, .dh.on2 .dh31 { color: #333; transition: 0.5s; } .dh.on .dh1>img:nth-child(1), .dh.on2 .dh1>img:nth-child(1) { display: none; } .dh.on .dh1>img:nth-child(2), .dh.on2 .dh1>img:nth-child(2) { display: block; } .dh.on .dh2>img:nth-child(1), .dh.on2 .dh2>img:nth-child(1) { display: none; } .dh.on .dh2>img:nth-child(2), .dh.on2 .dh2>img:nth-child(2) { display: block; } .dh31: hover>div { width: calc(1200px*74/1360); transition: 0.5s; } .dh31.on>div, .dh31.on2>div { width: calc(1200px*74/1360); } .dh4 { display: none; } .ydh { display: none; } } @media only screen and (max-width: 1023px) { .news>.ind5-a1:hover .ind5-a7 { opacity: 1; visibility: visible; transform: translatey(0); background: #f8994b; } .ind5-a7 { position: absolute; left: 80%; top: 40%; transition: 0.5s; } .news>.ind5-a1 .ind5-a7 { opacity: 1; position: absolute; bottom: .875rem; right: .875rem; width: 1rem; height: 1rem; font-size: .8rem; background: rgba(0, 0, 0, 0.7); color: #fff; text-align: center; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; text-transform: uppercase; transition: .5s; } .moblie { display: none; } .dh { width: 100%; height: 1.15rem; position: fixed; top: 0; left: 0; z-index: 9; transition: 0.5s; } .dh1 { height: 0.59rem; position: absolute; left: 0.3rem; top: calc(50% - 0.59rem/2); } .dh1>img:nth-child(2) { display: none; } .dh2 { position: absolute; right: 1rem; top: calc(50% - 0.3rem/2); height: 0.3rem; } .dh2>img:nth-child(2) { display: none; } .dh3 { display: none; } .dh.on, .dh.on2 { background: #fff; transition: 0.5s; } .dh.on .dh31, .dh.on2 .dh31 { color: #333; transition: 0.5s; } .dh.on .dh1>img:nth-child(1), .dh.on2 .dh1>img:nth-child(1) { display: none; } .dh.on .dh1>img:nth-child(2), .dh.on2 .dh1>img:nth-child(2) { display: block; } .dh.on .dh2>img:nth-child(1), .dh.on2 .dh2>img:nth-child(1) { display: none; } .dh.on .dh2>img:nth-child(2), .dh.on2 .dh2>img:nth-child(2) { display: block; } .dh4 { height: 0.28rem; position: absolute; right: 0.3rem; top: calc(50% - 0.28rem/2); } .dh4>img:nth-child(2) { display: none; } .dh.on .dh4>img:nth-child(1), .dh.on2 .dh4>img:nth-child(1) { display: none; } .dh.on .dh4>img:nth-child(2), .dh.on2 .dh4>img:nth-child(2) { display: block; } .ydh { width: 100%; height: calc(100% - 1.15rem); background: #fff; position: fixed; top: 1.15rem; left: 0; z-index: 99; display: none; } .ydh-a { width: 100%; position: relative; padding: 0 0.35rem; } .ydh-a1 { width: 100%; height: auto; border-bottom: 0.01rem solid #efefef; } .ydh-a2 { width: 100%; height: 1.2rem; font-size: 0.32rem; line-height: 1.2rem; text-align: center; position: relative; } .ydh-a2>img { width: 0.2rem; height: 0.1rem; position: absolute; right: 0; top: calc(50% - 0.1rem/2); transition: 0.5s; } .ydh-a2.on>img { transform: rotate(180deg); transition: 0.5s; } .ydh-a3 { width: 100%; display: none; } .ydh-a31 { font-size: 0.26rem; line-height: 0.7rem; color: #666666; text-align: center; } } .s_hd { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: .35rem; } .s_tt { display: flex; text-align: left; align-items: flex-end; } .s_tt h4 { font-size: 38px; font-family: yumow04; position: relative; display: inline-block; background: #404142; -webkit-background-clip: text; color: transparent; line-height: 1.1; } .s_pro .s_tt h4 { margin-right: 120px; } [ aos][aos][aos-duration='1500'], body[aos-duration='1500'] [aos] { -webkit-transition-duration: 1.5s; transition-duration: 1.5s; } .ind3-a1.s_hd .lineanim1 { left: auto; right: -28px; top: 0rem; } .lineanim1 { height: 15px; width: 70px; transform: rotate(122deg); position: absolute; left: -60px; } .lineanim1 i { width: 3rem; opacity: 1; } .lineanim1 i:nth-child(1) { right: 0; bottom: 0; transition-delay: .3s; } .lineanim1 i:nth-child(2) { left: 0; top: 0; transition-delay: .3s; } .lineanim1 i { display: block; width: 50px; height: 1px; background: #404142; transition: .8s; position: absolute; opacity: 1; } .ty_title.s_tt { display: block; text-align: center; } .s_tt h3 { font-size: 24px; color: #404142; margin-left: 20px; margin-bottom: 3px; } .s_pro .s_tt h3 { margin-bottom: .375rem; } .more_r { height: 2.625rem; display: flex; align-items: center; text-transform: uppercase; font-size: .875rem; color: #333333; position: relative; } .more_r: before { content: ""; display: block; width: 100%; height: 1px; background: #8f9192; position: absolute; top: 0; left: 0; transform-origin: left; } .more_r i { margin-left: .5rem; } .more_r: after { content: ""; display: block; width: 100%; height: 1px; background: #8f9192; position: absolute; bottom: 0; left: 0; transform-origin: right; } svg { display: inline-block; vertical-align: middle; } /* ãƒâ©ã‚â¦ã¢â‚¬â€œãƒâ©ã‚â¡ã‚âµãƒâ¤ã‚â¸ã¢â€šâ¬ */ @media only screen and (min-width: 1640px) { .ind1 { width: 100%; height: 0; padding-bottom: calc(100%*960/1920); position: relative; } .ind1-swi { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .ind1-a { width: 100%; height: 100%; position: relative; } .ind1-a1 { width: 100%; height: 100%; } .ind1-a1>img { /* animation: big 3s infinite linear; */ } @keyframes big { 0% { transform: scale(1) } 50% { transform: scale(1) } 100% { transform: scale(1) } } .ind1-a2 { width: 1360px; height: 100%; position: absolute; left: calc(50% - 1360px/2); top: 0; display: table; } .ind1-a3 { display: table-cell; vertical-align: middle; } .ind-pic { width: 50%; position: absolute; left: 55%; right: 0; top: 52%; transform: translatey(-50%); color: #fff; } .ind1-a31 { font-size: 86px; line-height: 86px; color: #fff; font-weight: bold; font-family: yumow04; text-transform: uppercase; } .ind1-a32 { font-size: 60px; line-height: 62px; color: #fff; margin-top: 35px; } .ind1-a32>span { font-weight: bold; } .ind1-a33 { font-size: 16px; line-height: 1.6; font-weight: lighter; color: #fff; margin-top: 27px; } .ind1-b { width: 28px; height: 44px; position: absolute; bottom: 60px; left: calc(50% - 28px/2); z-index: 2; animation: 3s jump linear infinite; } .ind1-prev { width: 37px; height: 34px; position: absolute; top: auto; bottom: 62px; left: auto; right: calc(50% - 1360px/2 200px); outline: none; background: url(/uploads/image/stmimages/a06.png) no-repeat; background-size: 100% 100%; } .ind1-next { width: 37px; height: 34px; position: absolute; top: auto; bottom: 62px; left: auto; right: calc(50% - 1360px/2); outline: none; background: url(/uploads/image/stmimages/a07.png) no-repeat; background-size: 100% 100%; } .swiper-button-next: after, .swiper-button-prev:after { content: none; } .ind1-pag { position: absolute; left: auto; right: calc(50% - 1360px/2 37px); bottom: 62px; width: max-content; width: 166px; text-align: center; color: #fff; font-size: 26px; line-height: 26px; /*font-family: 'dinr';*/ } .ind1-pag .swiper-pagination-current { font-size: 46px; font-family: yumow04; } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .news>.ind5-a1:hover .ind5-a7 { opacity: 1; visibility: visible; transform: translatey(0); background: #f8994b; } .ind5-a7 { position: absolute; left: 80%; top: 40%; transition: 0.5s; } .news>.ind5-a1 .ind5-a7 { opacity: 1; position: absolute; bottom: .875rem; right: .875rem; width: .75rem; height: .75rem; font-size: .875rem; background: rgba(0, 0, 0, 0.7); color: #fff; text-align: center; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; text-transform: uppercase; transition: .5s; } .ind1 { width: 100%; height: 0; padding-bottom: calc(100%*960/1920); position: relative; } .ind1-swi { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .ind1-a { width: 100%; height: 100%; position: relative; } .ind1-a1 { width: 100%; height: 100%; } .ind1-a1>img { /* animation:big 3s infinite linear; */ } @keyframes big { 0% { transform: scale(1) } 50% { transform: scale(1.08) } 100% { transform: scale(1) } } .ind1-a2 { width: 1200px; height: 100%; position: absolute; left: calc(50% - 1200px/2); top: 0; display: table; } .ind1-a3 { display: table-cell; vertical-align: middle; } .ind-pic.center { width: 15%; position: absolute; left: 42.5%; right: 0; top: 52%; transform: translatey(-50%); color: #fff; display: flex; } .ind-pic { width: 50%; position: absolute; left: 55%; right: 0; top: 52%; transform: translatey(-50%); color: #fff; } .ind1-a31 { font-size: 55px; line-height: 1; color: #fff; font-weight: 200; font-family: yumow04; text-transform: uppercase; } .ind1-a32 { font-size: calc(1200px*60/1360); line-height: calc(1200px*62/1360); color: #fff; margin-top: 20px; } .ind1-a32>span { font-weight: bold; } .ind1-a33 { font-size: 14px; line-height: 1.6; font-weight: lighter; color: #fff; margin-top: calc(1200px*67/1360); } .ind1-b { width: 28px; height: 44px; position: absolute; bottom: 60px; left: calc(50% - 28px/2); z-index: 2; animation: 3s jump linear infinite; } .ind1-prev { width: 37px; height: 34px; position: absolute; top: auto; bottom: 62px; left: auto; right: calc(50% - 1200px/2 200px); outline: none; background: url(/uploads/image/stmimages/a06.png) no-repeat; background-size: 100% 100%; } .ind1-next { width: 37px; height: 34px; position: absolute; top: auto; bottom: 62px; left: auto; right: calc(50% - 1200px/2); outline: none; background: url(/uploads/image/stmimages/a07.png) no-repeat; background-size: 100% 100%; } .swiper-button-next: after, .swiper-button-prev:after { content: none; } .top_menu_box .top_menu a { width: .32rem; height: .32rem; border-radius: 50%; border: 1px solid #fff; display: flex; align-items: center; justify-content: center; color: #fff; transition: all .4s; font-size: 14px; } .ind1-pag { position: absolute; left: auto; right: calc(50% - 1200px/2 37px); bottom: 62px; width: max-content; width: 166px; text-align: center; color: #fff; font-size: calc(1200px*26/1360); line-height: 26px; /*font-family: 'dinr';*/ /*! left: 34%; */ } .ind1-pag .swiper-pagination-current { font-size: calc(1200px*46/1360); font-family: yumow04; } } @media only screen and (max-width: 1280px) and (min-width: 1024px) { .ind1-pag { position: absolute; left: auto; right: calc(50% - 1200px/2 37px); bottom: 62px; width: max-content; width: 166px; text-align: center; color: #fff; font-size: calc(1200px*26/1360); line-height: 26px; font-family: 'dinr'; left: 38%; } } @media only screen and (max-width: 1023px) { .ind1 { width: 100%; height: 13.34rem; position: relative; } .ind1-swi { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .ind1-a { width: 100%; height: 100%; position: relative; } .ind1-a1 { width: 100%; height: 100%; } .ind1-a1>img { width: auto; height: 100%; position: absolute; left: 20%; transform: translatex(-50%); } .ind1-a2 { width: calc(100% - 0.3rem*2); height: 100%; position: absolute; left: 0.3rem; top: 0; display: table; } .ind1-a3 { display: table-cell; vertical-align: middle; } .ind-pic { width: 50%; position: absolute; left: 55%; right: 0; top: 52%; transform: translatey(-50%); color: #fff; } .ind1-a31 { font-size: 0.6rem; line-height: 0.6rem; color: #fff; font-weight: bold; font-family: yumow04; text-transform: uppercase; } .ind1-a32 { font-size: 0.48rem; line-height: 0.48rem; color: #ffffff; margin-top: 0.35rem; } .ind1-a32>span { font-weight: bold; } .ind1-a33 { font-size: 0.25rem; line-height: 0.4rem; font-weight: lighter; color: #ffffff; margin-top: 0.65rem; } .ind1-b { width: 0.28rem; height: 0.44rem; position: absolute; bottom: 0.6rem; left: calc(50% - 0.28rem/2); z-index: 2; } .ind1-prev { width: 0.37rem; height: 0.34rem; position: absolute; top: auto; bottom: 0.62rem; left: auto; right: 2.3rem; outline: none; background: url(/uploads/image/stmimages/a06.png) no-repeat; background-size: 100% 100%; } .ind1-next { width: 0.37rem; height: 0.34rem; position: absolute; top: auto; bottom: 0.62rem; left: auto; right: 0.3rem; outline: none; background: url(/uploads/image/stmimages/a07.png) no-repeat; background-size: 100% 100%; } .swiper-button-next: after, .swiper-button-prev:after { content: none; } .ind1-pag { display: none; } } /* ãƒâ©ã‚â¦ã¢â‚¬â€œãƒâ©ã‚â¡ã‚âµãƒâ¤ã‚âºã…’ */ @media only screen and (min-width: 1640px) { .ind2 { width: 100%; position: relative; padding: 168px 0 100px 0; background: url(/uploads/image/stmimages/graybg2.jpg); } .ind2-b1 { height: 230px; position: absolute; top: 0; right: 0; } .ind2-b2 { height: 277px; position: absolute; bottom: 0; left: 0; } .ind2-b3 { height: 1000px; position: absolute; bottom: 0px; right: 180px; opacity: 0.3; } .ind2-a { width: 1360px; margin: 0 auto; position: relative; } .ind2-a1 { float: left; width: 55%; } .ind2-a2 { height: 49px; } .ind2-a3 { width: max-content; font-size: 46px; line-height: 1; font-weight: bold; margin-top: 0; background: #188947; -webkit-background-clip: text; color: transparent; } .ind2-a4 { font-size: 24px; line-height: 24px; color: #404142; font-weight: bold; margin-top: 80px; } .ind2-a5 { font-size: 16px; line-height: 1.8; color: #565656; margin-top: 20px; max-width: 77%; letter-spacing: 1px; } .ind2-a6 { width: 205px; height: 60px; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; display: flex; margin-top: 115px; align-items: center; justify-content: space-between; padding: 0 20px 0 5px; } .ind2-a61 { font-size: 15px; line-height: 1.6; color: #231f20; text-transform: uppercase; font-family: 'barlow'; } .ind2-a62 { width: 18px; height: 11px; margin-left: 17px; transition: 0.5s; } .ind2-a6: hover .ind2-a62 { transform: translatex(10px); transition: 0.5s; } .ind2-c { /* float: right; */ padding-top: 120px; width: 1360px; } .ind2-c2 { float: left; margin-right: 15%; } .ind2-c1>.ind2-c2: last-child { margin-right: 0; } .ind2-c21 { font-size: 16px; line-height: 18px; color: #2c2c4e; font-weight: 300; } .ind2-c21>span { font-size: 50px; background: #404142; -webkit-background-clip: text; color: transparent; font-family: yumow04; margin-right: 5px; } .ind2-c21>span:nth-child(1) { display: none } .ind2-c22 { font-size: 16px; line-height: 20px; color: #757575; margin-top: 20px; text-align: right; font-weight: 300; } .ind2-c4 { width: 340px; height: 340px; margin: 0 auto; margin-top: 50px; border-radius: 50%; position: relative; } .ind2-c4>img { width: 100%; height: 100%; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; animation: trans 3s linear infinite; } @keyframes trans { 0% { transform: scale(0.8); opacity: 1; } 50% { transform: scale(0.9); opacity: 0.5; } 100% { transform: scale(1); opacity: 0; } } .vr .ind2-c4 { width: 340px; height: 40px; margin: 0 auto; margin-top: -25px; border-radius: 50%; position: relative; } .vr .ind2-c33 { font-size: 18px; line-height: 18px; font-weight: bold; color: #fff; position: absolute; left: 28px; top: 15px; } .vr .ind2-c3 { width: 100%; height: 50px; background: linear-gradient(to bottom, #188947, #30899a); border-radius: 0%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .vr .ind2-c34 { width: 13px; height: 13px; position: absolute; left: calc(80% - 13px / 2); bottom: 19px; } .ind2-c3 { width: 160px; height: 160px; background: linear-gradient(to bottom, #188947, #188947); border-radius: 50%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .ind2-c31 { font-size: 36px; line-height: 36px; color: #fff; /*font-family: 'dinr';*/ position: absolute; left: 28px; top: 28px; text-transform: uppercase; } .ind2-c32 { font-size: 24px; line-height: 40px; color: #fff; position: absolute; left: 22%; top: 40%; color: #ffffff; /* text-align: center; */ font-family: yumow04; } .ind2-c33 { font-size: 18px; line-height: 18px; font-weight: bold; color: #fff; position: absolute; left: 28px; top: 105px; } .ind2-c34 { width: 13px; height: 13px; position: absolute; left: calc(50% - 13px/2); bottom: 40px; } } @media only screen and (max-width: 1639px) and (min-width: 1024px) { .vr .ind2-c4 { width: 340px; height: 40px; margin: 0 auto; margin-top: 25px; border-radius: 50%; position: relative; } .vr .ind2-c33 { font-size: 18px; line-height: 18px; font-weight: bold; color: #fff; position: absolute; left: 28px; top: 15px; } .vr .ind2-c3 { width: 100%; height: 50px; background: #188947; border-radius: 0%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .vr .ind2-c34 { width: 13px; height: 13px; position: absolute; left: calc(80% - 13px / 2); bottom: 19px; } .ind2 { width: 100%; position: relative; padding: calc(1200px*178/1360) 0 calc(1200px*204/1360) 0; background: url(/uploads/image/stmimages/graybg2.jpg); } .ind2-b1 { height: calc(1200px*230/1360); position: absolute; top: 0; right: 0; } .ind2-b2 { height: calc(1200px*277/1360); position: absolute; bottom: 0; left: 0; } .ind2-b3 { height: calc(1200px*900/1360); position: absolute; bottom: calc(1200px*0/1360); right: 0; opacity: 0.4; } .ind2-a { width: 1200px; margin: 0 auto; position: relative; } .ind2-a1 { float: left; width: 50%; } .ind2-a2 { height: calc(1200px*49/1360); } .ind2-a3 { width: max-content; font-size: calc(1200px*42/1360); line-height: calc(1200px*42/1360); font-weight: bold; margin-top: 0; background: linear-gradient(68deg, #188947, #388d93); -webkit-background-clip: text; color: transparent; } .ind2-a4 { font-size: calc(1200px*24/1360); line-height: calc(1200px*24/1360); color: #454545; font-weight: bold; margin-top: 50px; } .ind2-a5 { font-size: 15px; line-height: 1.8; color: #565656; margin-top: 15px; max-width: 78%; } .ind2-a6 { width: calc(1200px*205/1360); height: calc(1200px*60/1360); border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; display: flex; margin-top: calc(1200px*115/1360); align-items: center; justify-content: space-between; padding: 0 calc(1200px*20/1360) 0 calc(1200px*5/1360); } .ind2-a61 { font-size: 15px; line-height: 1.6; color: #231f20; text-transform: uppercase; font-family: 'barlow'; } .ind2-a62 { width: calc(1200px*18/1360); height: calc(1200px*11/1360); margin-left: calc(1200px*17/1360); transition: 0.5s; } .ind2-a6: hover .ind2-a62 { transform: translatex(10px); transition: 0.5s; } .ind2-c { float: right; padding-top: calc(1200px*48/1360); width: 50%; } .ind2-c2 { float: left; margin-right: 10%; } .ind2-c1>.ind2-c2: last-child { margin-right: 0; } .ind2-c21 { font-size: calc(1200px*18/1360); line-height: calc(1200px*18/1360); color: #2c2c4e; } .ind2-c21>span { font-size: 42px; background: #404142; -webkit-background-clip: text; color: transparent; font-family: yumow04; } .ind2-c21>span:nth-child(1) { display: none } .ind2-c22 { font-size: 16px; line-height: calc(1200px*20/1360); color: #757575; margin-top: 10px; } .ind2-c4 { width: calc(1200px*340/1360); height: calc(1200px*340/1360); margin: 0 auto; margin-top: 10%; border-radius: 50%; position: relative; } .ind2-c4>img { width: 100%; height: 100%; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; animation: trans 3s linear infinite; } @keyframes trans { 0% { transform: scale(1); } 50% { transform: scale(0.8); } 100% { transform: scale(1); } } .ind2-c3 { width: calc(1200px*176/1360); height: calc(1200px*176/1360); background: #188947; border-radius: 50%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .ind2-c31 { font-size: calc(1200px*36/1360); line-height: calc(1200px*36/1360); color: #fff; /*font-family: 'dinr';*/ position: absolute; left: calc(1200px*28/1360); top: calc(1200px*28/1360); text-transform: uppercase; } .ind2-c32 { font-size: 28px; line-height: calc(1200px*50/1360); color: #fff; position: absolute; left: calc(1200px*28/1360); top: calc(1200px*60/1360); color: #dff2eb; font-family: yumow04; } .ind2-c33 { font-size: calc(1200px*18/1360); line-height: calc(1200px*18/1360); font-weight: bold; color: #fff; position: absolute; left: calc(1200px*28/1360); top: calc(1200px*105/1360); } .ind2-c34 { width: calc(1200px*13/1360); height: calc(1200px*13/1360); position: absolute; left: calc(50% - (1200px*13/1360)/2); bottom: calc(1200px*24/1360); } } @media only screen and (max-width: 1023px) { .ky1-a3 p span { color: #188947; font-weight: 400; } .vr .ind2-c4 { width: 320px; height: 40px; margin: 0% auto 10%; /* margin: 0; */ border-radius: 50%; position: relative; } .vr .ind2-c33 { font-size: 18px; line-height: 18px; font-weight: bold; color: #fff; position: absolute; left: 28px; top: 15px; } .vr .ind2-c3 { width: 100%; height: 50px; background: #188947; border-radius: 0%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .vr .ind2-c34 { width: 13px; height: 13px; position: absolute; left: calc(80% - 13px / 2); bottom: 19px; } .ind2 { width: 100%; position: relative; padding: 1.78rem 0 1.55rem 0; } .ind2-b1 { height: 2.3rem; position: absolute; top: 0; right: 0; } .ind2-b2 { height: 2.77rem; position: absolute; bottom: 0; left: 0; } .ind2-b3 { height: 6.04rem; position: absolute; bottom: 0.35rem; right: 0; } .ind2-a { width: calc(100% - 0.3rem*2); margin: 0 auto; position: relative; } .ind2-a2 { height: 0.49rem; } .ind2-a3 { width: max-content; font-size: 0.42rem; line-height: 0.42rem; font-weight: bold; margin-top: 0.23rem; background: linear-gradient(68deg, #188947, #388d93); -webkit-background-clip: text; color: transparent; } .ind2-a4 { font-size: 0.3rem; line-height: 0.3rem; color: #454545; font-weight: bold; margin-top: 0.46rem; } .ind2-a5 { font-size: 14px; line-height: 0.4rem; color: #565656; margin-top: 0.6rem; } .ind2-a6 { width: 2.42rem; height: 0.8rem; border-top: 1px solid #e0e0e0; border-bottom: 1px solid #e0e0e0; display: flex; margin: 0.8rem 0 0.2rem 0; align-items: center; justify-content: space-between; padding: 0 0.2rem 0 0.05rem; } .ind2-a61 { font-size: 0.22rem; line-height: 0.22rem; color: #231f20; text-transform: uppercase; font-family: 'barlow'; } .ind2-a62 { width: 0.24rem; height: 10px; margin-left: 0.17rem; transition: 0.5s; } .ind2-c { padding-top: 0.48rem; } .ind2-c1 { width: 100%; display: flex; justify-content: space-between; } .ind2-c1.clear: after { content: normal; } .ind2-c21 { font-size: 0.2rem; line-height: 0.2rem; color: #2c2c4e; } .ind2-c21>span { font-size: 0.62rem; background: linear-gradient(68deg, #188947, #388d93); -webkit-background-clip: text; color: transparent; font-family: yumow04; } .ind2-c21>span:nth-child(1) { display: none } .ind2-c22 { font-size: 0.26rem; line-height: 0.26rem; color: #757575; margin-top: 0.3rem; } .ind2-c4 { width: 3.4rem; height: 3.4rem; margin: 0 auto; margin-top: 1.45rem; border-radius: 50%; position: relative; } .ind2-c4>img { width: 100%; height: 100%; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; animation: trans 3s linear infinite; } @keyframes trans { 0% { transform: scale(1); } 50% { transform: scale(0.8); } 100% { transform: scale(1); } } .ind2-c3 { width: 1.76rem; height: 1.76rem; background: #188947; border-radius: 50%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .ind2-c31 { font-size: 0.36rem; line-height: 0.36rem; color: #fff; /*font-family: 'dinr';*/ position: absolute; left: 0.28rem; top: 0.28rem; text-transform: uppercase; } .ind2-c32 { font-size: 0.45rem; line-height: 0.4rem; color: #fff; position: absolute; left: 0.28rem; top: 0.6rem; color: #dff2eb; font-family: yumow04; } .ind2-c33 { font-size: 0.2rem; line-height: 0.2rem; font-weight: bold; color: #fff; position: absolute; left: 0.28rem; top: 1.05rem; } .ind2-c34 { width: 0.13rem; height: 0.13rem; position: absolute; left: calc(50% - 0.13rem/2); bottom: 0.24rem; } } /* ãƒâ©ã‚â¦ã¢â‚¬â€œãƒâ©ã‚â¡ã‚âµãƒâ¤ã‚â¸ã¢â‚¬â° */ @media only screen and (min-width: 1640px) { .ind3 { width: 100%; /* background: #e7e8e930; */ padding: 90px 0 30px 0; overflow: hidden; /* background: url(/uploads/image/stmimages/graybg2.jpg); */ } .ind3-a { width: 1360px; margin: 0 auto; position: relative; } .ind3-a1 { position: relative; width: 100%; } .ind3-a1a { font-size: 48px; line-height: 48px; font-family: 'oswald'; background: #188947; -webkit-background-clip: text; color: transparent; text-transform: uppercase; } .ind3-a1b { font-size: 32px; line-height: 32px; margin-top: 24px; } .ind3-a1 .ind2-a6 { position: absolute; right: 0; top: 15px; margin-top: 0; font-weight: 400; } .ind3-a2 { width: 100%; margin-top: 0; padding-bottom: 95px; position: relative; } .ind3-swi { width: calc(585px*3); } .ind3-a21 { width: 100%; height: 350px; background: #00823ecf; position: relative; } .ind3-swi>div>.swiper-slide:nth-child(2n) .ind3-a21 { background: #188947; } .ind3-swi>div>.swiper-slide:nth-child(3n) .ind3-a21 { background: #09889be3; } .ind3-a21>img { height: 280px; position: absolute; right: 0; top: 0; left: 0; bottom: 0; margin: auto; transition: 0.5s; } .ind3-a22 { font-size: 24px; line-height: 24px; font-weight: bold; margin-top: 57px; } .ind3-a23 { font-size: 16px; line-height: 1.6; color: #757575; margin-top: 23px; } .ind3-a21: hover>img { transform: scale(1.08); transition: 0.5s; } .ind3-next { width: 18px; height: 11px; background: url(/uploads/image/stmimages/a16.png) no-repeat; background-size: 100% 100%; position: absolute; right: 0; top: auto; bottom: calc(50px/2 - 11px/2); outline: none; } .ind3-prev { width: 18px; height: 11px; background: url(/uploads/image/stmimages/a17.png) no-repeat; background-size: 100% 100%; position: absolute; left: auto; right: 90px; top: auto; bottom: calc(50px/2 - 11px/2); outline: none; } .ind3-line { width: 1px; height: 20px; background: #bfbfbf; position: absolute; bottom: 3%; right: 54px; } .ind3-scr { width: calc(100% - 165px); height: 1px; position: absolute; left: 0; bottom: calc(50px/2 - 1px/2); background: #dcdcdc; } .swiper-scrollbar-drag { height: 3px; margin-top: -1px; background: linear-gradient(to right, #188947, #188947); } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .ind3 { width: 100%; /* background: #edf7f0; */ padding: calc(1200px*90/1360) 0 calc(1200px*125/1360) 0; overflow: hidden; /* background: url(/uploads/image/stmimages/graybg2.jpg); */ } .ind3-a { width: 1200px; margin: 0 auto; position: relative; } .ind3-a1 { position: relative; width: 100%; } .ind3-a1a { font-size: calc(1200px*48/1360); line-height: calc(1200px*48/1360); font-family: 'oswald'; background: #188947; -webkit-background-clip: text; color: transparent; text-transform: uppercase; } .ind3-a1b { font-size: calc(1200px*32/1360); line-height: calc(1200px*32/1360); margin-top: calc(1200px*24/1360); } .ind3-a1 .ind2-a6 { position: absolute; right: 0; top: calc(1200px*3/1360); margin-top: 0; } .ind3-a2 { width: 100%; margin-top: 0; padding-bottom: calc(1200px*95/1360); position: relative; } .ind3-swi { width: calc((1200px*585/1360)*3); } .ind3-a21 { width: 100%; height: calc(1200px*350/1360); background: #59bc69; position: relative; } .ind3-swi>div>.swiper-slide:nth-child(2n) .ind3-a21 { background: #00b8bb; } .ind3-swi>div>.swiper-slide:nth-child(3n) .ind3-a21 { background: #188947; } .ind3-a21>img { height: calc(1200px*280/1360); position: absolute; right: 0; top: 0; left: 0; bottom: 0; margin: auto; transition: 0.5s; } .ind3-a22 { font-size: calc(1200px*24/1360); line-height: calc(1200px*24/1360); font-weight: bold; margin-top: calc(1200px*57/1360); } .ind3-a23 { font-size: calc(1200px*16/1360); line-height: calc(1200px*16/1360); color: #757575; margin-top: calc(1200px*23/1360); } .ind3-a21: hover>img { transform: scale(1.08); transition: 0.5s; } .ind3-next { width: 18px; height: 11px; background: url(/uploads/image/stmimages/a16.png) no-repeat; background-size: 100% 100%; position: absolute; right: 0; top: auto; bottom: calc(20px/2 - 11px/2); outline: none; } .ind3-prev { width: 18px; height: 11px; background: url(/uploads/image/stmimages/a17.png) no-repeat; background-size: 100% 100%; position: absolute; left: auto; right: 90px; top: auto; bottom: calc(20px/2 - 11px/2); outline: none; } .ind3-line { width: 1px; height: 20px; background: #bfbfbf; position: absolute; bottom: 0; right: 54px; } .ind3-scr { width: calc(100% - 165px); height: 1px; position: absolute; left: 0; bottom: calc(20px/2 - 1px/2); background: #dcdcdc; } .swiper-scrollbar-drag { height: 3px; margin-top: -1px; background: linear-gradient(to right, #188947, #188947); } } @media only screen and (max-width: 1023px) { .ind3 { width: 100%; background: #edf7f0; padding: 0.9rem 0 1.25rem 0; overflow: hidden; } .ind3-a { width: calc(100% - 0.3rem*2); margin: 0 auto; position: relative; } .ind3-a1 { position: relative; width: 100%; } .ind3-a1a { font-size: 0.38rem; line-height: 0.48rem; font-family: 'oswald'; background: #188947; -webkit-background-clip: text; color: transparent; text-transform: uppercase; } .ind3-a1b { font-size: 0.32rem; line-height: 0.32rem; margin-top: 0.24rem; } .ind3-a1 .ind2-a6 { position: absolute; right: 0; top: 0.03rem; margin-top: 0; } .s_tt h3 { font-size: 18px; color: #188947; margin-left: 12px; margin-bottom: 0px; } .s_tt h4 { font-size: 22px; font-family: yumow04; position: relative; display: inline-block; background: #231f20; -webkit-background-clip: text; color: transparent; line-height: 1.1; } .lineanim1 { height: 12px; width: 42px; transform: rotate(122deg); position: absolute; left: -60px; } .lineanim1 i { display: block; width: 30px; height: 1px; background: #188947; transition: .8s; position: absolute; opacity: 1; } .ind3-a2 { width: 100%; margin-top: 0.85rem; padding-bottom: 0.75rem; position: relative; } .ind3-swi { width: 100%; } .ind3-a21 { width: 100%; height: 3.8rem; backgroundãƒâ¯ã‚â¼ã…â¡#59bc69; position: relative; background: #59bc69; } .ind3-swi>div>.swiper-slide:nth-child(2n) .ind3-a21 { background: #00b8bb; } .ind3-swi>div>.swiper-slide:nth-child(3n) .ind3-a21 { background: #188947; } .ind3-a21>img { height: 2.6rem; position: absolute; right: 0; top: 0; left: 0; bottom: 0; margin: auto; transition: 0.5s; } .ind3-a22 { font-size: 0.3rem; line-height: 0.3rem; font-weight: bold; margin-top: 0.57rem; } .ind3-a23 { font-size: 14px; line-height: 0.4rem; color: #757575; margin-top: 0.23rem; } .ind3-next { width: 0.24rem; height: 0.15rem; background: url(/uploads/image/stmimages/a16.png) no-repeat; background-size: 100% 100%; position: absolute; right: 0; top: auto; bottom: calc(0.2rem/2 - 0.11rem/2); outline: none; } .ind3-prev { width: 0.24rem; height: 0.15rem; background: url(/uploads/image/stmimages/a17.png) no-repeat; background-size: 100% 100%; position: absolute; left: auto; right: 0.9rem; top: auto; bottom: calc(0.2rem/2 - 0.11rem/2); outline: none; } .ind3-line { width: 0.01rem; height: 0.2rem; background: #bfbfbf; position: absolute; bottom: 0; right: 0.54rem; } .ind3-scr { width: calc(100% - 1.65rem); height: 0.01rem; position: absolute; left: 0; bottom: calc(0.2rem/2 - 0.01rem/2); background: #dcdcdc; } .swiper-scrollbar-drag { height: 0.03rem; margin-top: -0.01rem; background: linear-gradient(to right, #188947, #188947); } } @media only screen and (min-width: 1640px) { .ind4 { width: 100%; position: relative; padding: 190px 0 163px 0; overflow: hidden; } .ind4-i { width: 1920px; height: 1200px; position: absolute; left: calc(50% - 1920px/2); top: calc(50% - 1200px/2); } .ind4-a { width: 1360px; margin: 0 auto; position: relative; } .ind4-b { float: left; } .ind4-b1 { font-size: 60px; line-height: 72px; color: #fff; text-transform: uppercase; font-family: 'oswald'; } .ind4-b2 { font-size: 36px; line-height: 36px; color: #fff; font-weight: bold; margin-top: 44px; } .ind4-b3 { margin-top: 120px; } .ind4-b31 { float: left; margin-right: 35px; font-size: 18px; line-height: 24px; color: #fff; transition: 0.5s; } .ind4-b3>.ind4-b31: last-child { margin-right: 0; } .ind4-b31.on { font-weight: bold; font-size: 24px; } .ind4-b31: hover { font-weight: bold; font-size: 22px; transition: 0.5s; } .ind4-b .ind2-a6 { border-top: 1px solid #fff; border-bottom: 1px solid #fff; margin-top: 150px; } .ind4-b .ind2-a61 { color: #fff; } .ind4-c { float: right; margin-top: 235px; width: 745px; height: 345px; background: #fff; padding: 60px 65px 60px 65px; position: relative; } .ind4-swi { width: 100%; height: 100%; } .ind4-c1 { width: 100%; height: 100%; } .ind4-c2 { font-size: 18px; line-height: 26px; font-weight: bold; color: #a9a9a9; font-style: italic; } .ind4-c2>span { font-size: 26px; color: #333333; font-style: normal; } .ind4-c3 { font-size: 16px; line-height: 36px; height: calc(36px*4); overflow: hidden; overflow-y: auto; color: #565656; margin-top: 35px; } .ind4-c3:: -webkit-scrollbar { width: 3px; background: #efefef; border-radius: 20rpx; } .ind4-c3:: -webkit-scrollbar-thumb { width: 3px; background: #188947; border-radius: 20rpx; } .ind4-next { width: 18px; height: 11px; background: url(/uploads/image/stmimages/a21.png) no-repeat; background-size: 100% 100%; position: absolute; right: auto; left: 154px; top: auto; bottom: calc(105px/2 - 11px/2); outline: none; } .ind4-prev { width: 18px; height: 11px; background: url(/uploads/image/stmimages/a20.png) no-repeat; background-size: 100% 100%; position: absolute; left: 65px; top: auto; bottom: calc(105px/2 - 11px/2); outline: none; } .ind4-line { width: 1px; height: 20px; background: #bfbfbf; position: absolute; left: 118px; bottom: calc(105px/2 - 20px/2); } .ind4-pag { height: max-content; position: absolute; top: -87px; left: auto; right: 0; color: #fff; width: max-content; font-size: 18px; line-height: 18px; font-family: 'oswald'; } .ind4-pag .swiper-pagination-current { font-size: 36px; } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .ind4 { width: 100%; position: relative; padding: calc(1200px*190/1360) 0 calc(1200px*163/1360) 0; overflow: hidden; } .ind4-i { width: 1920px; height: 1200px; position: absolute; left: calc(50% - 1920px/2); top: calc(50% - 1200px/2); } .ind4-a { width: 1200px; margin: 0 auto; position: relative; } .ind4-b { float: left; } .ind4-b1 { font-size: calc(1200px*60/1360); line-height: calc(1200px*72/1360); color: #fff; text-transform: uppercase; font-family: 'oswald'; } .ind4-b2 { font-size: calc(1200px*36/1360); line-height: calc(1200px*36/1360); color: #fff; font-weight: bold; margin-top: calc(1200px*44/1360); } .ind4-b3 { margin-top: calc(1200px*120/1360); } .ind4-b31 { float: left; margin-right: calc(1200px*90/1360); font-size: calc(1200px*20/1360); line-height: calc(1200px*24/1360); color: #fff; transition: 0.5s; } .ind4-b3>.ind4-b31: last-child { margin-right: 0; } .ind4-b31.on { font-weight: bold; font-size: calc(1200px*24/1360); } .ind4-b31: hover { font-weight: bold; font-size: 24px; transition: 0.5s; } .ind4-b .ind2-a6 { border-top: 1px solid #fff; border-bottom: 1px solid #fff; margin-top: calc(1200px*150/1360); } .ind4-b .ind2-a61 { color: #fff; } .ind4-c { float: right; margin-top: calc(1200px*235/1360); width: calc(1200px*745/1360); height: calc(1200px*345/1360); background: #fff; padding: calc(1200px*60/1360) calc(1200px*65/1360) calc(1200px*60/1360) calc(1200px*65/1360); position: relative; } .ind4-swi { width: 100%; height: 100%; } .ind4-c1 { width: 100%; height: 100%; } .ind4-c2 { font-size: calc(1200px*18/1360); line-height: calc(1200px*26/1360); font-weight: bold; color: #a9a9a9; font-style: italic; } .ind4-c2>span { font-size: calc(1200px*26/1360); color: #333333; font-style: normal; } .ind4-c3 { font-size: calc(1200px*16/1360); line-height: calc(1200px*36/1360); height: calc((1200px*36/1360)*4); overflow: hidden; overflow-y: auto; color: #565656; margin-top: calc(1200px*35/1360); } .ind4-c3:: -webkit-scrollbar { width: 3px; background: #efefef; border-radius: 20rpx; } .ind4-c3:: -webkit-scrollbar-thumb { width: 3px; background: #188947; border-radius: 20rpx; } .ind4-next { width: calc(1200px*18/1360); height: calc(1200px*11/1360); background: url(/uploads/image/stmimages/a21.png) no-repeat; background-size: 100% 100%; position: absolute; right: auto; left: calc(1200px*154/1360); top: auto; bottom: calc((1200px*105/1360)/2 - (1200px*11/1360)/2); outline: none; } .ind4-prev { width: calc(1200px*18/1360); height: calc(1200px*11/1360); background: url(/uploads/image/stmimages/a20.png) no-repeat; background-size: 100% 100%; position: absolute; left: calc(1200px*65/1360); top: auto; bottom: calc((1200px*105/1360)/2 - (1200px*11/1360)/2); outline: none; } .ind4-line { width: 1px; height: calc(1200px*20/1360); background: #bfbfbf; position: absolute; left: calc(1200px*118/1360); bottom: calc((1200px*105/1360)/2 - (1200px*20/1360)/2); } .ind4-pag { height: max-content; position: absolute; top: calc(1200px*-87/1360); left: auto; right: 0; color: #fff; width: max-content; font-size: calc(1200px*18/1360); line-height: calc(1200px*18/1360); font-family: 'oswald'; } .ind4-pag .swiper-pagination-current { font-size: calc(1200px*36/1360); } } @media only screen and (max-width: 1023px) { .ind4 { width: 100%; position: relative; padding: 1.9rem 0 1.63rem 0; overflow: hidden; } .ind4-i { height: 100%; position: absolute; left: 50%; transform: translatex(-50%); top: 0; } .ind4-i>img { width: auto !important; } .ind4-a { width: calc(100% - 0.3rem*2); margin: 0 auto; position: relative; } .ind4-b { float: left; } .ind4-b1 { font-size: 0.6rem; line-height: 0.72rem; color: #fff; text-transform: uppercase; font-family: 'oswald'; } .ind4-b2 { font-size: 0.36rem; line-height: 0.36rem; color: #fff; font-weight: bold; margin-top: 0.44rem; } .ind4-b3 { margin-top: 1.2rem; } .ind4-b31 { float: left; margin-right: 0.9rem; font-size: 0.24rem; line-height: 0.3rem; color: #fff; } .ind4-b3>.ind4-b31: last-child { margin-right: 0; } .ind4-b31.on { font-weight: bold; font-size: 0.3rem; } .ind4-b .ind2-a6 { border-top: 0.01rem solid #fff; border-bottom: 0.01rem solid #fff; margin-top: 150px; } .ind4-b .ind2-a61 { color: #fff; } .ind4-c { float: right; margin-top: 2.35rem; width: 100%; height: 3.8rem; background: #fff; padding: 0.6rem 0.65rem 1.05rem 0.65rem; position: relative; } .ind4-swi { width: 100%; height: 100%; } .ind4-c1 { width: 100%; height: 100%; } .ind4-c2 { font-size: 0.24rem; line-height: 0.4rem; font-weight: bold; color: #a9a9a9; font-style: italic; } .ind4-c2>span { font-size: 0.32rem; color: #333333; font-style: normal; } .ind4-c3 { font-size: 0.24rem; line-height: 0.4rem; color: #565656; margin-top: 0.35rem; height: calc(0.4rem*4); overflow: hidden; overflow-y: auto; } .ind4-c3:: -webkit-scrollbar { width: 0.04rem; background: #efefef; border-radius: 20rpx; } .ind4-c3:: -webkit-scrollbar-thumb { width: 0.04rem; background: #188947; border-radius: 20rpx; } .ind4-next { width: 0.24rem; height: 15px; background: url(/uploads/image/stmimages/a21.png) no-repeat; background-size: 100% 100%; position: absolute; right: auto; left: 1.54rem; top: auto; bottom: calc(1.05rem/2 - 0.11rem/2); outline: none; } .ind4-prev { width: 0.24rem; height: 15px; background: url(/uploads/image/stmimages/a20.png) no-repeat; background-size: 100% 100%; position: absolute; left: 0.65rem; top: auto; bottom: calc(1.05rem/2 - 0.11rem/2); outline: none; } .ind4-line { width: 0.01rem; height: 0.2rem; background: #bfbfbf; position: absolute; left: 1.18rem; bottom: calc(1.05rem/2 - 0.2rem/2); } .ind4-pag { height: max-content; position: absolute; top: -0.87rem; left: auto; right: 0; color: #fff; width: max-content; font-size: 0.24rem; line-height: 0.24rem; font-family: 'oswald'; } .ind4-pag .swiper-pagination-current { font-size: 0.36rem; } } /* ãƒâ©ã‚â¦ã¢â‚¬â€œãƒâ©ã‚â¡ã‚âµãƒâ¤ã‚âºã¢â‚¬â */ @media only screen and (min-width: 1640px) { .ind5 { width: 100%; padding: 88px 0 83px 0; background: #f7f7fa; } .ind5-t { position: relative; } .ind5-t>div:nth-child(1) { font-size: 48px; line-height: 48px; text-align: center; font-family: 'oswald'; background: #188947; -webkit-background-clip: text; color: transparent; text-transform: uppercase; } .ind5-t>div:nth-child(2) { font-size: 38px; line-height: 36px; color: #454545; font-weight: bold; text-align: center; margin-top: 25px; } .ind5-a { width: 1360px; margin: 0 auto; margin-top: 137px; position: relative; } .ind5-a1 { width: 32%; float: left; margin-right: 2%; position: relative; padding-left: 2%; margin-bottom: 40px; } .ind5-a>.ind5-a1:nth-child(2n) { margin-right: 0; } .ind5-a2 { width: 100%; height: 302px; } .ind5-a2>img { width: 100%; transition: 0.5s; } .ind5-a3 { font-size: 18px; line-height: 20px; color: #454545; font-weight: bold; margin-top: 43px; transition: 0.5s; } .ind5-a4 { font-size: 15px; line-height: 1.6; color: #757575; height: auto; margin-top: 18px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } .ind5-a5 { width: 100%; height: 2px; background: #eeeeee; margin-top: 28px; transition: 0.5s; } .ind5-a6 { margin-top: 20px; position: relative; } .ind5-a61 { width: 105px; height: 40px; text-align: center; line-height: 40px; font-size: 14px; color: #454545; cursor: pointer; background: #fff; border-radius: 50px; float: left; margin-right: 25px; transition: 0.5s; } .ind5-a6>.ind5-a61: last-child { margin-right: 0; } .ind5-a62 { background: none; float: right; } .ind5-a61: hover { background: #188947; color: #fff; transition: 0.5s; } .ind5-a7 { position: absolute; left: 80%; top: 40%; transition: 0.5s; } .ind5-a71 { font-size: 32px; line-height: 1.2; color: #ffffff; font-family: yumow04; } .ind5-a72 { font-size: 18px; line-height: 18px; color: #959595; /*font-family: 'dinr';*/ margin-top: 0px; } .ind5-a73 { width: 10px; height: 14px; position: absolute; right: 0; top: calc(42px/2 - 14px/2); } .ind5-a73>img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .ind5-a73>img:nth-child(1) { opacity: 1; transition: 0.5s; } .ind5-a73>img:nth-child(2) { opacity: 0; transition: 0.5s; } .ind5-a1: hover .ind5-a73>img:nth-child(1) { opacity: 0; transition: 0.5s; } .ind5-a1: hover .ind5-a73>img:nth-child(2) { opacity: 1; transition: 0.5s; } .ind5-a1: hover .ind5-a71, .ind5-a1:hover .ind5-a72 { color: #188947; } .ind5-a1: hover .ind5-a2>img { transform: scale(1.08); transition: 0.5s; position: relative; } .ind5-a1: hover .ind5-a3 { color: #188947; transition: 0.5s; } .ind5-a1: hover .ind5-a5 { background: #188947; transition: 0.5s; } .ind5-b { width: max-content; margin: 0 auto; margin-top: 40px; display: flex; align-items: center; } .ind5-b>div:nth-child(1) { font-size: 18px; line-height: 18px; color: #2c2c4e; font-family: 'barlow'; margin-right: 10px; text-transform: uppercase; } .ind5-b>div:nth-child(2) { width: 18px; height: 11px; transition: 0.5s; } .ind5-b: hover>div:nth-child(2) { transform: translatex(10px); transition: 0.5s; } .ind5-line { width: 1px; height: calc(100%); position: absolute; left: calc(50% - 1px/2); top: 0; background: #dddddd; } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .ind5 { width: 100%; padding: calc(1200px*88/1360) 0 calc(1200px*83/1360) 0; background: #f7f7fa; } .ind5-t { position: relative; } .ind5-t>div:nth-child(1) { font-size: calc(1200px*48/1360); line-height: calc(1200px*48/1360); text-align: center; font-family: 'oswald'; background: #188947; -webkit-background-clip: text; color: transparent; text-transform: uppercase; } .ind5-t>div:nth-child(2) { font-size: calc(1200px*36/1360); line-height: calc(1200px*36/1360); color: #454545; font-weight: bold; text-align: center; margin-top: calc(1200px*25/1360); } .ind5-a { width: 1200px; margin: 0 auto; margin-top: calc(1200px*137/1360); position: relative; } .ind5-a1 { width: 32%; float: left; margin-right: 2%; position: relative; padding-left: 2%; margin-bottom: calc(1200px*40/1360); } .ind5-a>.ind5-a1:nth-child(2n) { margin-right: 0; } .ind5-a2 { width: 100%; height: calc(1200px*302/1360); } .ind5-a2>img { width: 100%; transition: 0.5s; } .ind5-a3 { font-size: calc(1200px*20/1360); line-height: 1.6; color: #454545; font-weight: bold; margin-top: 20px; transition: 0.5s; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; white-space: normal; } .ind5-a4 { font-size: calc(1200px*16/1360); line-height: 1.6; color: #757575; height: calc(1200px*72/1360); margin-top: 10px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } .ind5-a5 { width: 100%; height: 2px; background: #eeeeee; margin-top: calc(1200px*28/1360); transition: 0.5s; } .ind5-a6 { margin-top: calc(1200px*37/1360); position: relative; } .ind5-a61 { width: calc(1200px*105/1360); height: calc(1200px*40/1360); text-align: center; line-height: calc(1200px*40/1360); font-size: calc(1200px*16/1360); color: #454545; cursor: pointer; background: #fff; border-radius: 50px; float: left; margin-right: calc(1200px*25/1360); transition: 0.5s; } .ind5-a6>.ind5-a61: last-child { margin-right: 0; } .ind5-a62 { background: none; float: right; } .ind5-a61: hover { background: #188947; color: #fff; transition: 0.5s; } .ind5-a7 { position: absolute; left: 0; top: calc(1200px*50/1360); transition: 0.5s; } .ind5-a71 { font-size: calc(1200px*42/1360); line-height: calc(1200px*42/1360); color: #ffffff; font-family: yumow04; } .ind5-a72 { font-size: calc(1200px*18/1360); line-height: calc(1200px*18/1360); color: #959595; /*font-family: 'dinr';*/ margin-top: calc(1200px*18/1360); } .ind5-a73 { width: calc(1200px*10/1360); height: calc(1200px*14/1360); position: absolute; right: 0; top: calc((1200px*42/1360)/2 - (1200px*14/1360)/2); } .ind5-a73>img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .ind5-a73>img:nth-child(1) { opacity: 1; transition: 0.5s; } .ind5-a73>img:nth-child(2) { opacity: 0; transition: 0.5s; } .ind5-a1: hover .ind5-a73>img:nth-child(1) { opacity: 0; transition: 0.5s; } .ind5-a1: hover .ind5-a73>img:nth-child(2) { opacity: 1; transition: 0.5s; } .ind5-a1: hover .ind5-a71, .ind5-a1:hover .ind5-a72 { color: #188947; } .ind5-a1: hover .ind5-a2>img { transform: scale(1.08); transition: 0.5s; } .ind5-a1: hover .ind5-a3 { color: #188947; transition: 0.5s; } .ind5-a1: hover .ind5-a5 { background: #188947; transition: 0.5s; } .ind5-b { width: max-content; margin: 0 auto; margin-top: calc(1200px*40/1360); display: flex; align-items: center; } .ind5-b>div:nth-child(1) { font-size: calc(1200px*18/1360); line-height: calc(1200px*18/1360); color: #2c2c4e; font-family: 'barlow'; margin-right: calc(1200px*10/1360); text-transform: uppercase; } .ind5-b>div:nth-child(2) { width: calc(1200px*18/1360); height: calc(1200px*11/1360); transition: 0.5s; } .ind5-b: hover>div:nth-child(2) { transform: translatex(10px); transition: 0.5s; } .ind5-line { width: 1px; height: calc(100%); position: absolute; left: calc(50% - 1px/2); top: 0; background: #dddddd; } } @media only screen and (max-width: 1023px) { .ind5 { width: 100%; padding: 0.88rem 0 0.83rem 0; background: #f7f7fa; } .ind5-t { position: relative; } .ind5-t>div:nth-child(1) { font-size: 0.48rem; line-height: 0.48rem; text-align: center; font-family: 'oswald'; background: #188947; -webkit-background-clip: text; color: transparent; text-transform: uppercase; } .ind5-t>div:nth-child(2) { font-size: 26px; line-height: 0.36rem; color: #454545; font-weight: bold; text-align: center; margin-top: 0.25rem; } .ind5-a { width: calc(100% - 0.3rem*2); margin: 0 auto; margin-top: 1.37rem; } .ind5-a1 { width: 100%; position: relative; padding-left: 0; margin-bottom: 0.4rem; } .ind5-a>.ind5-a1:nth-child(2n) { margin-bottom: 0; } .ind5-a2 { width: 100%; height: 3.8rem; } .ind5-a2>img { width: 100%; transition: 0.5s; } .ind5-a3 { font-size: 16px; /*! line-height: 0.28rem; */ color: #454545; font-weight: bold; margin-top: 0.43rem; transition: 0.5s; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ind5-a4 { font-size: 14px; line-height: 0.4rem; color: #757575; height: 0.8rem; margin-top: 0.2rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } .ind5-a5 { width: 100%; height: 0.02rem; background: #eeeeee; margin-top: 0.2rem; transition: 0.5s; } .ind5-a6 { margin-top: 0.37rem; position: relative; } .ind5-a61 { width: 1.25rem; height: 0.4rem; text-align: center; line-height: 0.4rem; font-size: 0.24rem; color: #454545; cursor: pointer; background: #fff; border-radius: 0.5rem; float: left; margin-right: 0.25rem; transition: 0.5s; } .ind5-a6>.ind5-a61: last-child { margin-right: 0; } .ind5-a62 { background: none; float: right; } .ind5-a7 { position: absolute; left: 0; top: 0.5rem; } .ind5-a71 { font-size: 0.42rem; line-height: 0.42rem; color: #ffffff; font-family: yumow04; } .ind5-a72 { font-size: 0.26rem; line-height: 0.26rem; color: #ffffff; /*font-family: 'dinr';*/ margin-top: .05rem; } .ind5-a73 { width: 0.1rem; height: 14px; position: absolute; right: 0; top: calc(0.42rem/2 - 0.14rem/2); } .ind5-a73>img:nth-child(2) { display: none; transition: 0.5s; } .ind5-b { width: max-content; margin: 0 auto; margin-top: 0.8rem; display: flex; align-items: center; } .ind5-b>div:nth-child(1) { font-size: 0.26rem; line-height: 0.26rem; color: #2c2c4e; font-family: 'barlow'; margin-right: 0.1rem; text-transform: uppercase; } .ind5-b>div:nth-child(2) { width: 0.24rem; height: 15px; transition: 0.5s; } } /* ãƒâ¥ã‚âºã¢â‚¬â¢ãƒâ©ã†â€™ã‚⨠*/ @media only screen and (min-width: 1640px) { .bto { width: 100%; background: #188947; position: relative; overflow: hidden; padding-top: 105px; } .bto-i1 { height: 800px; position: absolute; left: 350px; top: -120px; opacity: 0.3; } .bto-i2 { height: 250px; position: absolute; right: 70px; top: 0; } .bto-a { width: 1600px; margin: 0 auto; position: relative; } .bto-a1 { float: left; } .bto-a1 a { color: #fff; } .bto-a2>div { float: left; font-size: 18px; line-height: 18px; color: #fff; font-weight: bold; margin-right: 65px; } .bto-a2>div: last-child { margin-right: 0; } .bto-a3 { width: 355px; margin-top: 77px; } .bto-a31 { width: 100%; height: 56px; border: 1px solid rgba(255, 255, 255, 0.21); display: flex; align-items: center; justify-content: space-between; padding: 0 22px 0 35px; } .bto-a31>div:nth-child(1) { font-size: 16px; line-height: 16px; color: #fff; } .bto-a31>div:nth-child(2) { width: 15px; height: 10px; transition: 0.5s; } .bto-a31.on>div:nth-child(2) { transform: rotate(180deg); transition: 0.5s; } .bto-a32 { width: 100%; padding: 12px 35px; border: 1px solid rgba(255, 255, 255, 0.21); margin-top: 5px; display: none; } .bto-a32>div { font-size: 16px; line-height: 30px; color: #fff; } .bto-a4 { float: left; margin-left: 155px; padding-top: 0; } .bto-a41 { margin-bottom: 67px; display: flex; align-items: center; } .bto-a42 { width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); position: relative; } .bto-a42>img { height: 20px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .bto-a43 { margin-left: 34px; } .bto-a43>div:nth-child(1) { font-size: 16px; line-height: 16px; color: #ffffffb3; } .bto-a43>div:nth-child(2) { font-size: 33px; line-height: 36px; color: #fff; margin-top: 10px; font-family: yumow04; } .bto-a4>.bto-a41:nth-child(2) .bto-a43>div:nth-child(2) { font-size: 26px; } .bto-a44 { width: 175px; height: 52px; background: rgba(244, 236, 222, 0.39); display: flex; align-items: center; justify-content: center; } .bto-a44>div:nth-child(1) { font-size: 16px; line-height: 16px; color: #fff; margin-right: 32px; } .bto-a44>div:nth-child(2) { width: 18px; height: 11px; transition: 0.5s; } .bto-a44: hover>div:nth-child(2) { transform: translatex(10px); } .bto-a5 { float: right; } .bto-a51 { margin-top: 25px; } .bto-a52 { float: right; width: 42px; height: 42px; margin-left: 38px; } .bto-a51>.bto-a52: last-child { margin-left: 0; } .bto-a53 { margin-top: 70px; } .bto-a53>div { float: right; width: 136px; height: 136px; margin-left: 25px; } .bto-a53>div: last-child { margin-left: 0; } .bto-b { width: 100%; margin-top: 65px; border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 30px 0 25px 0; } .bto-b1 { width: 1600px; margin: 0 auto; } .bto-b1>div { font-size: 15px; line-height: 15px; margin-bottom: 20px; text-align: left; color: rgba(255, 255, 255, 0.6); } .bto-b1>div: last-child { margin-bottom: 0; } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .bto { width: 100%; /*! background: #188947; */ position: relative; overflow: hidden; padding-top: calc(1200px*105/1360); } .bto-i1 { height: calc(1200px*900/1600); position: absolute; left: calc(1200px*350/1600); top: -20px; opacity: 0.3; } .bto-i2 { height: calc(1200px*250/1360); position: absolute; right: calc(1200px*70/1360); top: 0; } .bto-a { width: 1200px; margin: 0 auto; position: relative; } .bto-a1 { float: left; } .bto-a2>div { float: left; font-size: 16px; line-height: calc(1200px*18/1360); color: #fff; font-weight: bold; margin-right: 30px; } .bto-a2>div: last-child { margin-right: 0; } .bto-a3 { width: calc(1200px*355/1360); margin-top: calc(1200px*77/1360); } .bto-a31 { width: 100%; height: calc(1200px*56/1360); border: 1px solid rgba(255, 255, 255, 0.21); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(1200px*22/1360) 0 calc(1200px*35/1360); } .bto-a31>div:nth-child(1) { font-size: calc(1200px*16/1360); line-height: calc(1200px*16/1360); color: #fff; } .bto-a31>div:nth-child(2) { width: calc(1200px*15/1360); height: calc(1200px*10/1360); transition: 0.5s; } .bto-a31.on>div:nth-child(2) { transform: rotate(180deg); transition: 0.5s; } .bto-a32 { width: 100%; padding: calc(1200px*12/1360) calc(1200px*35/1360); border: 1px solid rgba(255, 255, 255, 0.21); margin-top: calc(1200px*5/1360); display: none; } .bto-a32>div { font-size: calc(1200px*16/1360); line-height: calc(1200px*30/1360); color: #fff; } .bto-a4 { float: left; margin-left: 5%; padding-top: 0; } .bto-a41 { margin-bottom: calc(1200px*67/1360); display: flex; align-items: center; } .bto-a42 { width: calc(1200px*52/1360); height: calc(1200px*52/1360); border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); position: relative; } .bto-a42>img { height: calc(1200px*20/1360); position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .bto-a43 { margin-left: calc(1200px*34/1360); } .bto-a43>div:nth-child(1) { font-size: calc(1200px*16/1360); line-height: calc(1200px*16/1360); color: rgba(255, 255, 255, 0.82); } .bto-a43>div:nth-child(2) { font-size: 30px; line-height: 1; color: #fff; margin-top: 10px; font-family: yumow04; } .bto-a4>.bto-a41:nth-child(2) .bto-a43>div:nth-child(2) { font-size: calc(1200px*26/1360); } .bto-a44 { width: calc(1200px*175/1360); height: calc(1200px*52/1360); background: rgba(244, 236, 222, 0.39); display: flex; align-items: center; justify-content: center; } .bto-a44>div:nth-child(1) { font-size: calc(1200px*16/1360); line-height: calc(1200px*16/1360); color: #fff; margin-right: calc(1200px*32/1360); } .bto-a44>div:nth-child(2) { width: calc(1200px*18/1360); height: calc(1200px*11/1360); transition: 0.5s; } .bto-a44: hover>div:nth-child(2) { transform: translatex(10px); } .bto-a5 { float: right; } .bto-a51 { margin-top: 5%; } .bto-a52:hover img { transform: rotatey(360deg); transition: 0.5s; } .bto-a52 { float: right; width: calc(1360px*42/1360); height: calc(1360px*42/1360); margin-left: calc(1360px*28/1360); } .bto-a51>.bto-a52: last-child { margin-left: 0; } .bto-a53 { margin-top: calc(1200px*70/1360); } .bto-a53>div { float: right; width: calc(1200px*136/1360); height: calc(1200px*136/1360); margin-left: calc(1200px*25/1360); } .bto-a53>div: last-child { margin-left: 0; } .bto-b { width: 100%; margin-top: calc(1200px*65/1360); border-top: 1px solid rgba(255, 255, 255, 0.07); padding: calc(1200px*30/1360) 0 calc(1200px*25/1360) 0; } .bto-b1 { width: 1200px; margin: 0 auto; /*! text-align: right; */ } .bto-b1>div { font-size: calc(1200px*15/1360); line-height: calc(1200px*15/1360); margin-bottom: calc(1200px*20/1360); /*! text-align: right; */ color: rgba(255, 255, 255, 0.6); } .bto-b1>div: last-child { margin-bottom: 0; } } @media only screen and (max-width: 1023px) { .bto { width: 100%; background: #188947; position: relative; overflow: hidden; padding-top: 1.05rem; } .bto-i1 { /* display: none; */ height: 500px; position: absolute; left: 0; top: -60px; opacity: 0.2; } .bto-i2 { height: 2.5rem; position: absolute; right: 70px; top: 0; } .bto-a { width: calc(100% - 0.3rem*2); margin: 0 auto; position: relative; } .bto-a2 { display: flex; justify-content: space-between; } .bto-a2.clear:: after { content: normal; } .bto-a2>div { font-size: 0.26rem; line-height: 0.26rem; color: #fff; font-weight: bold; } .bto-a3 { width: 3.55rem; margin-top: 0.5rem; } .bto-a31 { width: 100%; height: 0.8rem; border: 0.01rem solid rgba(255, 255, 255, 0.21); display: flex; align-items: center; justify-content: space-between; padding: 0 0.22rem 0 0.35rem; } .bto-a31>div:nth-child(1) { font-size: 0.24rem; line-height: 0.24rem; color: #fff; } .bto-a31>div:nth-child(2) { width: 0.25rem; height: 0.18rem; transition: 0.5s; } .bto-a31.on>div:nth-child(2) { transform: rotate(180deg); transition: 0.5s; } .bto-a32 { width: 100%; padding: 0.12rem 0.35rem; border: 0.01rem solid rgba(255, 255, 255, 0.21); margin-top: 0.05rem; display: none; } .bto-a32>div { font-size: 0.24rem; line-height: 0.4rem; color: #fff; } .bto-a4 { margin-top: 0.3rem; } .bto-a41 { margin-bottom: 0.67rem; display: flex; align-items: center; } .bto-a42 { width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 0.01rem solid rgba(255, 255, 255, 0.28); position: relative; } .bto-a42>img { height: 0.3rem; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .bto-a43 { margin-left: 0.34rem; } .bto-a43>div:nth-child(1) { font-size: 0.24rem; line-height: 0.24rem; color: rgba(255, 255, 255, 0.5); } .bto-a43>div:nth-child(2) { font-size: 0.36rem; line-height: 0.36rem; color: #fff; margin-top: 0.2rem; font-family: yumow04; } .bto-a4>.bto-a41:nth-child(2) .bto-a43>div:nth-child(2) { font-size: 0.3rem; } .bto-a44 { width: 2rem; height: 0.65rem; background: rgba(244, 236, 222, 0.39); display: flex; align-items: center; justify-content: center; } .bto-a44>div:nth-child(1) { font-size: 0.24rem; line-height: 0.24rem; color: #fff; margin-right: 0.32rem; } .bto-a44>div:nth-child(2) { width: 0.24rem; height: 15px; transition: 0.5s; } .bto-a51 { margin-top: 45px; display: flex; justify-content: center; } .bto-a51.clear:: after { content: none; } .bto-a52 { width: 0.6rem; height: 0.6rem; margin-right: 0.38rem; } .bto-a51>.bto-a52: last-child { margin-right: 0; } .bto-a53 { margin-top: 0.5rem; display: flex; justify-content: center; } .bto-a53.clear:: after { content: none; } .bto-a53>div { float: left; width: 1.36rem; height: 1.36rem; margin-right: 0.25rem; } .bto-a53>div: last-child { margin-right: 0; } .bto-b { width: 100%; margin-top: 0.65rem; border-top: 0.01rem solid rgba(255, 255, 255, 0.07); padding: 0.3rem 0 0.25rem 0; } .bto-b1 { width: calc(100% - 0.3rem*2); margin: 0 auto; } .bto-b1>div { font-size: 0.24rem; line-height: 0.4rem; text-align: center; color: rgba(255, 255, 255, 0.6); } .bto-b1>div: last-child { margin-bottom: 0; } } /* ãƒâ¥ã¢â‚¬å“ã‚âãƒâ§ã¢â‚¬â°ã…’ãƒâ¤ã‚â¸ã‚â­ãƒâ¥ã‚â¿ã†â€™ */ @media only screen and (min-width: 1640px) { .top { width: 100%; height: 0; padding-bottom: calc(100%*850/1920); position: relative; } .top-i { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .top-a { width: 100%; height: 100%; display: table; position: absolute; left: 0; top: 0; } .top-a1 { display: table-cell; vertical-align: middle; } .top-a1a { font-size: 60px; line-height: 1; color: #fff; font-family: yumow04; text-align: center; text-shadow: 1px 0 2px rgb(0 0 0 / 9%); font-weight: 200; } .top-a1b { width: 33px; height: 6px; background: #fff; border-radius: 50px; margin: 0 auto; margin-top: 40px; } .top-a1c { font-size: 30px; line-height: 1; color: #fff; font-weight: 400; text-align: center; text-shadow: 1px 0 2px rgb(0 0 0 / 22%); margin-top: 10px; } .top-b { position: absolute; width: 28px; height: 44px; left: calc(50% - 28px/2); bottom: 60px; animation: 3s jump linear infinite; } @keyframes jump { 0% { transform: translatey(0px); } 50% { transform: translatey(-20px); } 100% { transform: translatey(0); } } .pp { width: 1360px; margin: 0 auto; margin-top: 80px; } .pp1 { width: 100%; } .pp1-a { float: left; font-size: 15px; line-height: 22px; color: #ffffff; margin-right: 25px; } .pp1-a.on { font-weight: bold; font-size: 22px; } .pp1>.pp1-a: last-child { margin-right: 0; } .pp2 { width: 100%; margin-top: 95px; padding-bottom: 154px; } .pp2-a { width: calc(50% - 5px); float: left; margin-right: 10px; margin-bottom: 114px; } .pp2>.pp2-a:nth-child(2n) { margin-right: 0; } .pp2-a1 { width: 100%; height: 470px; background: #f6f6f6; position: relative; transition: 0.5s; } .pp2-a1>img { height: 247px; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; transition: 0.5s; } .pp2-a: hover .pp2-a1>img { transform: scale(1.08); transition: 0.5s; } .pp2-a2 { width: 160px; height: 160px; border-radius: 50%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; border-radius: 50%; background: url(/uploads/image/stmimages/a38.png) no-repeat; background-size: 100% 100%; opacity: 0; transition: 0.5s; } .pp2-a2>img { width: 23px; height: 23px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .pp2-a: hover .pp2-a2 { opacity: 1; transition: 0.5s; } .pp2-a: hover .pp2-a1 { background: #e2eee4; transition: 0.5s; } .pp2-a3 { font-size: 24px; line-height: 24px; font-weight: bold; margin-top: 74px; } .pp2-a4 { font-size: 16px; line-height: 16px; height: 72px; color: #757575; margin-top: 12px; } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .top { width: 100%; height: 0; padding-bottom: calc(100%*600/1920); position: relative; } .top-i { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .top-a { width: 100%; height: 100%; display: table; position: absolute; left: 5.5%; top: 5%; } .top-a1 { display: table-cell; vertical-align: middle; } .top-a1a { font-size: 26px; line-height: 2.5; color: #fff; /* font-family: yumow04; */ text-align: left; /*! text-shadow: 1px 0 2px rgba(0, 0, 0, 0.31); */ /*! text-transform: uppercase; */ font-weight: 400; } .top-a1b { width: calc(1200px*33/1360); height: calc(1200px*6/1360); background: #fff; border-radius: 50px; margin: 0 auto; margin-top: calc(1200px*40/1360); } .top-a1c { font-size: 40px; line-height: calc(1200px*40/1360); color: #fff; font-weight: 700; text-align: left; /*! text-shadow: 1px 0 2px rgba(0, 0, 0, 0.31); */ margin-top: calc(1200px*30/1360); } .top-b { position: absolute; width: calc(1200px*28/1360); height: calc(1200px*44/1360); left: calc(50% - (1200px*28/1360)/2); bottom: calc(1200px*60/1360); animation: 3s jump linear infinite; } @keyframes jump { 0% { transform: translatey(0px); } 50% { transform: translatey(-20px); } 100% { transform: translatey(0); } } .pp { width: 1360px; margin: 0 auto; margin-top: calc(1200px*118/1360); } .pp1 { width: 100%; } .pp1-a { float: left; font-size: calc(1200px*18/1360); line-height: calc(1200px*22/1360); color: #ffffff; margin-right: calc(1200px*75/1360); } .pp1-a.on { font-weight: bold; font-size: calc(1200px*22/1360); } .pp1>.pp1-a: last-child { margin-right: 0; } .pp2 { width: 100%; margin-top: calc(1200px*95/1360); padding-bottom: calc(1200px*154/1360); } .pp2-a { width: calc(50% - 5px); float: left; margin-right: 10px; margin-bottom: calc(1200px*114/1360); } .pp2>.pp2-a:nth-child(2n) { margin-right: 0; } .pp2-a1 { width: 100%; height: calc(1200px*470/1360); background: #f6f6f6; position: relative; transition: 0.5s; } .pp2-a1>img { height: calc(1200px*247/1360); position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; transition: 0.5s; } .pp2-a: hover .pp2-a1>img { transform: scale(1.08); transition: 0.5s; } .pp2-a2 { width: calc(1200px*160/1360); height: calc(1200px*160/1360); border-radius: 50%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; border-radius: 50%; background: url(/uploads/image/stmimages/a38.png) no-repeat; background-size: 100% 100%; opacity: 0; transition: 0.5s; } .pp2-a2>img { width: calc(1200px*23/1360); height: calc(1200px*23/1360); position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .pp2-a: hover .pp2-a2 { opacity: 1; transition: 0.5s; } .pp2-a: hover .pp2-a1 { background: #e2eee4; transition: 0.5s; } .pp2-a3 { font-size: calc(1200px*24/1360); line-height: calc(1200px*24/1360); font-weight: bold; margin-top: calc(1200px*74/1360); } .pp2-a4 { font-size: calc(1200px*16/1360); line-height: 16px; height: calc(1200px*72/1360); color: #757575; margin-top: calc(1200px*22/1360); } } @media only screen and (max-width: 1023px) { .top { width: 100%; height: 0; padding-bottom: calc(100%*960/1920); position: relative; } .top-i { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .top-a { width: 100%; height: 100%; display: table; position: absolute; left: 0; top: 0; } .top-a1 { display: table-cell; vertical-align: middle; } .top-a1a { font-size: 0.6rem; line-height: 0.6rem; color: #fff; font-family: yumow04; text-align: center; text-shadow: 1px 0 2px rgba(0, 0, 0, 0.31); text-transform: uppercase; } .top-a1b { width: 0.33rem; height: 0.06rem; background: #fff; border-radius: 0.5rem; margin: 0 auto; margin-top: 0.2rem; } .top-a1c { font-size: 0.46rem; line-height: 0.46rem; color: #fff; font-weight: bold; text-align: center; text-shadow: 1px 0 2px rgba(0, 0, 0, 0.31); margin-top: 0.2rem; } .top-b { position: absolute; width: 0.28rem; height: 0.44rem; left: calc(50% - 0.44rem/2); bottom: 0.2rem; animation: 3s jump linear infinite; } @keyframes jump { 0% { transform: translatey(0px); } 50% { transform: translatey(-20px); } 100% { transform: translatey(0); } } .pp { width: calc(100% - 0.3rem*2); margin: 0 auto; margin-top: 0.8rem; } .pp1 { width: 100%; } .pp1-a { float: left; font-size: 0.26rem; line-height: 0.3rem; color: #454545; margin-right: 0.75rem; } .pp1-a.on { font-weight: bold; font-size: 0.3rem; } .pp1>.pp1-a: last-child { margin-right: 0; } .pp2 { width: 100%; margin-top: 0.8rem; } .pp2-a { width: calc(50% - 0.05rem); float: left; margin-right: 0.1rem; margin-bottom: 0.8rem; } .pp2>.pp2-a:nth-child(2n) { margin-right: 0; } .pp2-a1 { width: 100%; height: 3.5rem; background: #f6f6f6; position: relative; transition: 0.5s; } .pp2-a1>img { height: 1.47rem; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; transition: 0.5s; } .pp2-a2 { display: none; } .pp2-a3 { font-size: 0.3rem; line-height: 0.3rem; font-weight: bold; margin-top: 0.5rem; } .pp2-a4 { font-size: 0.24rem; line-height: 0.4rem; height: 0.8rem; color: #757575; margin-top: 0.22rem; } } /* ãƒâ¦ã¢â‚¬â€œã‚â°ãƒâ©ã¢â‚¬â€ã‚â»ãƒâ¤ã‚â¸ã‚â­ãƒâ¥ã‚â¿ã†â€™ */ @media only screen and (min-width: 1640px) { .news { width: 100%; margin-top: 80px; } .news>.ind5-a1 { margin-bottom: 4%; } .news>.ind5-a1:nth-child(3n) { margin-right: 0; } .news>.ind5-a1: hover .ind5-a7 { opacity: 1; visibility: visible; transform: translatey(0); background: #188947; } .news>.ind5-a1 .ind5-a7 { opacity: 1; position: absolute; bottom: .875rem; right: .875rem; width: .75rem; height: .75rem; font-size: .875rem; background: rgba(0, 0, 0, 0.7); color: #fff; text-align: center; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; text-transform: uppercase; transition: .5s; } .news>.ind5-a1 .ind5-a71, .news>.ind5-a1 .ind5-a72 { color: #ffffff; transition: 0.5s; } .news>.ind5-a1 .ind5-a73>img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .news>.ind5-a1 .ind5-a73>img:nth-child(1) { opacity: 1; transition: 0.5s; } .news>.ind5-a1 .ind5-a73>img:nth-child(2) { opacity: 0; transition: 0.5s; } .news>.ind5-a1: hover .ind5-a73>img:nth-child(2) { opacity: 1; transition: 0.5s; } .news>.ind5-a1: hover .ind5-a73>img:nth-child(1) { opacity: 0; transition: 0.5s; } .news>.ind5-a1: hover .ind5-a71, .news>.ind5-a1:hover .ind5-a72 { color: #ffffff; transition: 0.5s; } .ind5-a63 { width: 13px; height: 13px; position: absolute; right: 0; top: calc(50% - 13px/2); } .news>.ind5-a1 .ind5-a61 { background: #eeeeee; transition: 0.5s; } .news>.ind5-a1 .ind5-a61: hover { background: #188947; transition: 0.5s; } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .news { width: 100%; margin-top: calc(1200px*112/1360); } .news>.ind5-a1 { margin-bottom: 4%; } .news>.ind5-a1:nth-child(3n) { margin-right: 0; } .news>.ind5-a1 .ind5-a7 { opacity: 1; left: 78%; top: 32%; } .news>.ind5-a1 .ind5-a71, .news>.ind5-a1 .ind5-a72 { color: #ffffff; transition: 0.5s; } .news>.ind5-a1 .ind5-a73>img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .news>.ind5-a1 .ind5-a73>img:nth-child(1) { opacity: 1; transition: 0.5s; } .news>.ind5-a1 .ind5-a73>img:nth-child(2) { opacity: 0; transition: 0.5s; } .news>.ind5-a1: hover .ind5-a73>img:nth-child(2) { opacity: 1; transition: 0.5s; } .news>.ind5-a1: hover .ind5-a73>img:nth-child(1) { opacity: 0; transition: 0.5s; } .news>.ind5-a1: hover .ind5-a71, .news>.ind5-a1:hover .ind5-a72 { color: #ffffff; transition: 0.5s; } .ind5-a63 { width: calc(1200px*13/1360); height: calc(1200px*13/1360); position: absolute; right: 0; top: calc(50% - (1200px*13/1360)/2); } .news>.ind5-a1 .ind5-a61 { background: #eeeeee; transition: 0.5s; } .news>.ind5-a1 .ind5-a61: hover { background: #188947; transition: 0.5s; } } @media only screen and (max-width: 1023px) { .news { width: 100%; margin-top: 0.8rem; } .news>.ind5-a1 { margin-bottom: 0.8rem; } .news>.ind5-a1 .ind5-a7 { opacity: 1; left: 80%; top: 40%; } .news>.ind5-a1 .ind5-a73>img { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .news>.ind5-a1 .ind5-a73>img:nth-child(1) { opacity: 0; transition: 0.5s; } .news>.ind5-a1 .ind5-a73>img:nth-child(2) { opacity: 1; transition: 0.5s; } .ind5-a63 { width: 0.18rem; height: 0.18rem; position: absolute; right: 0; top: calc(50% - 0.18rem/2); } .news>.ind5-a1 .ind5-a61 { background: #eeeeee; transition: 0.5s; } } /* ãƒâ¥ã¢â‚¬â¦ã‚â³ãƒâ¤ã‚âºã…â½ãƒâ¦ã‹â€ ã¢â‚¬ëœãƒâ¤ã‚â»ã‚⬠*/ @media only screen and (min-width: 1640px) { .ab1 { width: 100%; padding: 150px 0 195px 0; position: relative; background: url(/uploads/image/stmimages/a46.jpg) no-repeat 100% 100%; } .ab1-a { width: 1360px; margin: 0 auto; } .ab1-a1 { width: 401px; float: left; margin-left: 135px; } .ab1-a2 { width: calc(100% - 401px - 135px); height: 577px; float: left; padding-left: 153px; display: table; } .ab1-a3 { display: table-cell; vertical-align: middle; } .ab1-a31 { font-size: 96px; line-height: 96px; color: #5e5e5e; /*font-family: 'dinr';*/ } .ab1-a31>span { font-family: yumow04; } .ab1-a32 { width: max-content; font-size: 32px; font-weight: bold; line-height: 34px; margin-top: 38px; background: linear-gradient(68deg, #188947, #388d93); -webkit-background-clip: text; color: transparent; } .ab1-a33 { font-size: 16px; line-height: 42px; color: #565656; margin-top: 66px; } .ab1-b1 { height: 373px; position: absolute; left: 0; top: 0; } .ab2 { width: 100%; background: #ecf1f5; padding: 80px 0 90px 0; overflow: hidden; } .ab2-a { width: 1360px; margin: 0 auto; margin-top: 110px; position: relative; padding-bottom: 170px; } .ab2-all { width: 100%; height: 303px; position: relative; } .n_tt2 { text-align: center; margin-bottom: .55rem; } .n_tt2 i { display: block; font-size: 100px; font-family: yumow04; height: .5rem; overflow: hidden; color: #188947; letter-spacing: -4px; font-weight: 700; } .ky1-a i { display: block; font-size: 100px; /*font-family: 'dinr';*/ height: .55rem; overflow: hidden; color: #188947; letter-spacing: -4px; font-weight: 700; } .n_tt2 span { font-size: 32px; color: #010101; display: block; font-family: yumow04; text-transform: uppercase; margin-top: .15rem; /* font-weight: 700; */ } .n_tt2 h3 { font-size: 28px; color: #343635; margin-top: .1rem; } .n_tt2 p { font-size: 1rem; color: rgba(0, 0, 0, 0.7); margin-top: 2.375rem; line-height: 1.5; } .ab2-swi { width: calc(697px*4 57px*3); height: 303px; left: 50%; transform: translatex(-50%); } .ab2-a1 { width: 100%; height: 100%; background: #fff; padding: 37px 35px; } .ab2-a2 { width: 346px; height: 100%; float: left; } .ab2-a2>img { width: 100%; transition: 0.5s; } .ab2-a3 { width: calc(100% - 346px - 40px); float: left; margin-left: 32px; padding-top: 50px; } .ab2-a31 { font-size: 18px; line-height: 18px; color: #454545; margin-bottom: 30px; } .ab2-a31>span { font-family: yumow04; font-size: 40px; margin-right: 20px; transition: 0.5s; } .ab2-a32 { font-size: 16px; line-height: 1.4; color: #454545; margin-top: 15px; } .ab2-a32 span { font-size: 18px; line-height: 1.4; color: #454545; } .ab2-a32 .icon.one { float: left; width: 25px; margin-left: 3px; margin-right: 10px; } .ab2-a32 .icon { float: left; width: 30px; margin-right: 10px; } .ab2-a1: hover .ab2-a2>img { transform: scale(1.08); transition: 0.5s; } .ab2-a1: hover .ab2-a31>span { color: #188947; transition: 0.5s; } .ab3 { width: 100%; height: 0; padding-bottom: calc(100%*888/1920); position: relative; padding: 80px 0 90px 0; } .ab3 .ind5-t { position: absolute; left: 0; width: 100%; top: 100px; } .ab3-a { width: 1360px; height: 100%; position: absolute; left: calc(50% - 1360px/2); top: 0; display: table; } .ab3-all { display: table-cell; vertical-align: middle; } .ab3-back { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .ab3-a1 { font-size: 36px; line-height: 36px; color: #565656; font-weight: bold; } .ab3-a2 { font-size: 16px; line-height: 42px; color: #565656; margin-top: 10%; float: left; width: 29%; } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .n_tt2 { text-align: center; margin-bottom: .125rem; } .n_tt2 i { display: block; font-size: 100px; font-family: yumow04; height: .6rem; overflow: hidden; color: #188947; letter-spacing: -4px; font-weight: 700; } .ky1-a i { display: block; font-size: 70px; /*font-family: 'dinr';*/ height: .48rem; overflow: hidden; color: #188947; letter-spacing: 0px; font-weight: 700; } .n_tt2 span { font-size: 32px; color: #010101; display: block; font-family: yumow04; text-transform: uppercase; margin-top: .15rem; /* font-weight: 700; */ } .n_tt2 h3 { font-size: 28px; color: #343635; margin-top: .1rem; } .n_tt2 p { font-size: 1rem; color: rgba(0, 0, 0, 0.7); margin-top: 2.375rem; line-height: 1.5; } .ab1 { width: 100%; padding: calc(1200px*150/1360) 0 calc(1200px*195/1360) 0; position: relative; background: url(/uploads/image/stmimages/a46.jpg) no-repeat 100% 100%; } .ab1-a { width: 1200px; margin: 0 auto; } .ab1-a1 { width: calc(1200px*401/1360); float: left; margin-left: calc(1200px*135/1360); } .ab1-a2 { width: calc(100% - (1200px*401/1360) - (1200px*135/1360)); height: calc(1200px*577/1360); float: left; padding-left: calc(1200px*153/1360); display: table; } .ab1-a3 { display: table-cell; vertical-align: middle; } .ab1-a31 { font-size: calc(1200px*96/1360); line-height: calc(1200px*96/1360); color: #5e5e5e; /*font-family: 'dinr';*/ } .ab1-a31>span { font-family: yumow04; } .ab1-a32 { width: max-content; font-size: calc(1200px*32/1360); font-weight: bold; line-height: calc(1200px*34/1360); margin-top: calc(1200px*38/1360); background: linear-gradient(68deg, #188947, #388d93); -webkit-background-clip: text; color: transparent; } .ab1-a33 { font-size: calc(1200px*16/1360); line-height: calc(1200px*42/1360); color: #565656; margin-top: calc(1200px*66/1360); } .ab1-b1 { height: calc(1200px*373/1360); position: absolute; left: 0; top: 0; } .ab2 { width: 100%; background: #f0f3f5; padding: calc(1200px*130/1360) 0 calc(1200px*150/1360) 0; overflow: hidden; } .ab2-a { width: 1200px; margin: 0 auto; margin-top: calc(1200px*110/1360); position: relative; padding-bottom: calc(1200px*120/1360); } .ab2-all { width: 100%; height: calc(1200px*303/1360); position: relative; } .ab2-swi { width: calc((1200px*697/1360)*4 57px*3); height: calc(1200px*303/1360); left: 50%; transform: translatex(-50%); } .ab2-a1 { width: 100%; height: 100%; background: #fff; padding: calc(1200px*37/1360) calc(1200px*35/1360); } .ab2-a2 { width: calc(1200px*346/1360); height: 100%; float: left; } .ab2-a2>img { width: 100%; transition: 0.5s; } .ab2-a3 { width: calc(100% - (1200px*346/1360) - (1200px*40/1360)); float: left; margin-left: 25px; padding-top: 40px; } .ab2-a31 { font-size: calc(1200px*18/1360); line-height: calc(1200px*18/1360); color: #454545; margin-bottom: 25px; } .ab2-a31>span { font-family: yumow04; font-size: 40px; margin-right: 20px; transition: 0.5s; } .ab2-a32 { font-size: 16px; line-height: 1.5; color: #454545; margin-top: 12px; } .ab2-a32 .icon { float: left; width: 30px; margin-right: 10px; margin-top: 0; } .ab2-a32 .icon.one { float: left; width: 25px; margin-left: 3px; margin-right: 10px; margin-top: 0; } .ab2-a32 span { font-size: 18px; line-height: 1.4; color: #454545; } .ab2-a1: hover .ab2-a2>img { transform: scale(1.08); transition: 0.5s; } .ab2-a1: hover .ab2-a31>span { color: #188947; transition: 0.5s; } .ab3 { width: 100%; height: auto; padding-bottom: 0; position: relative; } .ab3 .ind5-t { position: absolute; left: 0; width: 100%; top: calc(1200px*147/1360); } .ab3-a { width: 1200px; height: 100%; position: absolute; left: calc(50% - 1200px/2); top: 0; display: table; } .ab3-all { display: table-cell; vertical-align: middle; } .ab3-back { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .ab3-a1 { font-size: calc(1200px*36/1360); line-height: calc(1200px*36/1360); color: #565656; font-weight: bold; } .ab3-a2 { font-size: 14px; line-height: 32px; color: #565656; margin-top: 10%; float: left; width: 33%; } } @media only screen and (max-width: 1023px) { .page { width: 100%; margin: 0 auto; padding: 20px 10px 20px !important; position: relative; text-align: center; } .n_tt2 { text-align: center; margin-bottom: .125rem; } .n_tt2 i { display: block; font-size: 70px; font-family: yumow04; height: .7rem; overflow: hidden; color: #188947; letter-spacing: 4px; font-weight: 700; } .ky1-a i { display: block; font-size: 70px; height: .7rem; overflow: hidden; color: #188947; letter-spacing: 0px; font-weight: 700; } .n_tt2 span { font-size: 22px; color: #010101; display: block; font-family: yumow04; text-transform: uppercase; margin-top: .25rem; /* font-weight: 700; */ } .n_tt2 h3 { font-size: 22px; color: #343635; margin-top: .1rem; } .n_tt2 p { font-size: 1rem; color: rgba(0, 0, 0, 0.7); margin-top: 2.375rem; line-height: 1.5; } .ab1 { width: 100%; padding: 1.5rem 0 1.95rem 0; position: relative; background: url(/uploads/image/stmimages/a46.jpg) no-repeat 100% 100%; } .ab1-a { width: calc(100% - 0.3rem*2); margin: 0 auto; position: relative; } .ab1-a1 { width: 4.01rem; margin: 0 auto; display: none; } .ab1-a2 { width: 100%; } .ab1-a31 { font-size: 0.96rem; line-height: 0.96rem; color: #5e5e5e; /*font-family: 'dinr';*/ } .ab1-a31>span { font-family: yumow04; } .ab1-a32 { width: max-content; font-size: 0.32rem; font-weight: bold; line-height: 0.32rem; margin-top: 0.38rem; background: linear-gradient(68deg, #188947, #388d93); -webkit-background-clip: text; color: transparent; } .ab1-a33 { font-size: 0.26rem; line-height: 0.42rem; color: #565656; margin-top: 0.4rem; } .ab1-b1 { height: 3.73rem; position: absolute; left: 0; top: 0; } .ab2 { width: 100%; background: #ecf1f5; padding: .5rem 0 1.5rem 0; overflow: hidden; } .ab2-a { width: calc(100% - 0.3rem*2); margin: 0 auto; margin-top: 1.1rem; position: relative; padding-bottom: 1.7rem; } .ab2-all { width: 100%; height: 3.4rem; position: relative; } .ab2-swi { width: 100%; height: 3.4rem; } .ab2-a1 { width: 100%; height: 100%; background: #fff; padding: 0.37rem 0.35rem; } .ab2-a2 { width: 40%; height: 100%; float: left; display: flex; justify-content: center; align-items: center; } .ab2-a2>img { width: 100%; transition: 0.5s; } .ab2-a3 { width: 52%; float: left; margin-left: 0.4rem; padding-top: 0.55rem; } .ab2-a31 { font-size: 0.26rem; line-height: 0.26rem; color: #454545; margin-bottom: 10px; } .ab2-a31>span { font-family: yumow04; font-size: 0.5rem; margin-right: 0.2rem; transition: 0.5s; } .ab2-a32 { font-size: 0.24rem; line-height: 0.3rem; color: #454545; margin-top: 0.23rem; } .ab2-a32 .icon { float: left; width: 20px; margin-right: 10px; } .ab2-a32 span { font-size: 16px; line-height: 1.4; color: #454545; } .ab3 { width: 100%; height: 19.5rem; position: relative; } .ab3 .ind5-t { width: 100%; margin: 1.1rem 0 1rem 0; } .ab3-a { width: calc(100% - 0.4rem*2); margin: 0 auto; position: relative; margin-top: 1rem; } .ab3-back { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .ab3-back>img { height: 100%; width: auto; position: absolute; left: 50%; transform: translatex(-50%); } .ab3-a1 { font-size: 0.36rem; line-height: 0.36rem; color: #565656; font-weight: bold; } .ab3-a2 { font-size: 14px; line-height: 2; color: #565656; margin-top: 0; } } /* ãƒâ§ã‚â§ã¢â‚¬ëœãƒâ§ã‚â ã¢â‚¬âãƒâ¤ã‚â¸ã‚â­ãƒâ¥ã‚â¿ã†â€™ */ .ky1.clear { background: url(/uploads/image/stmimages/loadingbg.png); background-repeat: no-repeat; background-position: 850px 600px; } @media only screen and (min-width: 1640px) { .ky1 { width: 1360px; padding: 120px 0 100px 0; margin: 0 auto; position: relative; } .ky1-a { width: 54%; float: left; } .ky1-a1 { font-size: 38px; line-height: 1.5; color: #404142; text-transform: uppercase; font-weight: 100; } .ky1-a1>span { font-family: yumow04; } .ky1-a2 { width: max-content; font-size: 38px; line-height: 1.2; font-weight: bold; margin-top: 0; background: linear-gradient(68deg, #188947, #378d94); -webkit-background-clip: text; color: transparent; } .ky1-a3.two { width: 100%; float: left; margin-top: .2%; } .ky1-a3 p { font-size: 15px; line-height: 2; color: #565656; margin-top: 10px; } .ky1-a3 em:: before { content: '-'; margin-right: 0.8em; } .ky1-a3 p span { color: #188947; font-weight: 400; } .ky1-a3 { font-size: 14px; line-height: 2; color: #565656; margin-top: 40px; } .ky1-b { float: right; width: 36%; display: flex; flex-wrap: wrap; flex-direction: row; } .ky1-b1 { height: 206px; padding-left: 40px; position: relative; padding-top: 0%; width: 50%; } .ky1-b>.ky1-b1: first-child { margin-top: 1.2rem; } .ky1-b>.ky1-b1:nth-child(4) { margin-top: -1.4rem; /* padding-left: 0px; */ } .ky1-b>.ky1-b1:nth-child(6) { margin-top: -1.5rem; /* padding-left: 0.21rem; */ } .ky1-b>.ky1-b1: last-child { margin-top: 1.2rem; } .ky1-b1a { width: 1px; height: 100%; background: #eeeeee; position: absolute; left: 0; top: 0; } .ky1-b1a>div { width: 3px; height: 40px; background: #188947; position: absolute; left: -1px; top: 40px; } .ky1-b1b { line-height: 90px; background: #188947; -webkit-background-clip: text; color: transparent; width: max-content; position: relative; font-family: 'yumow04'; font-size: 0.45rem; letter-spacing: -1px; } .ky1-b1b>span { font-size: 13px; line-height: 18px; background: none; color: #333333; position: absolute; left: calc(100% 10px); top: 10px; width: max-content; font-weight: 400; font-family: 'oswald'; } .ky1-b1c { font-size: 15px; line-height: 0; margin-top: 4px; padding-left: 10px; letter-spacing: 1px; } .ky2 { width: 100%; padding: 75px 0 240px 0; position: relative; background: #188947; } .ky2-t>div:nth-child(1) { font-size: 42px; line-height: 42px; color: #fff; text-align: center; font-family: 'oswald'; } .ky2-t>div:nth-child(2) { font-size: 36px; line-height: 36px; color: #fff; font-weight: bold; text-align: center; margin-top: 25px; } .ky2-a { width: 1360px; font-size: 0; margin: 0 auto; margin-top: 95px; padding: 0 55px; position: relative; } .ky2-a1 { width: calc(50% - 70px); float: left; cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, 0.18); margin-right: 140px; } .ky2-a>.ky2-a1:nth-child(2n) { float: right; margin-right: 0; } .ky2-a>.ky2-a1:nth-child(1), .ky2-a>.ky2-a1:nth-child(2) { border-top: 1px solid rgba(255, 255, 255, 0.18); } .ky2-a2 { width: 100%; height: 100px; position: relative; } .ky2-a2>div:nth-child(1) { font-size: 24px; line-height: 100px; color: #fff; float: left; font-family: yumow04; margin-right: 15px; } .ky2-a2>div:nth-child(2) { font-size: 20px; line-height: 100px; font-weight: bold; color: #fff; float: left; } .ky2-a2>div:nth-child(3) { width: 18px; height: 13px; position: absolute; right: 0; top: calc(50% - 13px/2); transition: 0.5s; } .ky2-a3 p { padding: 0 17px 0 43px; font-size: 18px; } .ky2-a3 { padding: 0 17px 0 43px; font-size: 18px; line-height: 30px; color: #fff; padding-bottom: 18px; display: none; } .ky2-a1.on .ky2-a2>div:nth-child(3) { transform: rotate(-90deg); transition: 0.5s; } .ky2-b { width: 100%; position: absolute; bottom: 0; left: 0; } .ky3 { width: 100%; padding: 118px 0 218px 0; overflow: hidden; } .ky3-a { width: 1360px; height: 570px; margin: 0 auto; margin-top: 122px; position: relative; } .ky3-swi { width: 1760px; height: 570px; position: absolute; left: 0; top: 0; } .ky3-swi .swiper-slide { width: 640px; height: 425px; transform: translatey(145px); transition: 0.5s; } .ky3-swi .swiper-slide-active { width: 862px; height: 570px; transform: translatey(0); transition: 0.5s; } .ky3-a1 { width: 100%; height: 100%; position: relative; } .ky3-a2 { position: absolute; left: 35px; top: 35px; } .ky3-a21 { font-size: 36px; line-height: 36px; color: #fff; font-family: 'oswald'; } .ky3-a22 { width: 84px; height: 1px; background: rgba(255, 255, 255, 0.47); margin-top: 17px; } .ky3-a23 { font-size: 16px; line-height: 16px; color: #fff; margin-top: 13px; text-transform: uppercase; } .ky3-a3 { position: absolute; width: 100%; height: 263px; background-size: 100% 100%; left: 0; bottom: 0; transition: 0.5s; } .ky3-a31 { width: calc(100% - 47px*2); left: 47px; bottom: 40px; position: absolute; } .ky3-a31>div:nth-child(1) { font-size: 24px; line-height: 24px; color: #fff; font-weight: bold; } .ky3-a31>div:nth-child(2) { font-size: 18px; line-height: 36px; color: #fff; margin-top: 15px; opacity: 0; display: none; transition: 0.5s; } .swiper-slide-active .ky3-a3 { background: url(/uploads/image/stmimages/a53.png) no-repeat; transition: 0.5s; } .swiper-slide-active .ky3-a31>div:nth-child(2) { opacity: 1; display: block; transition: 0.5s; } .ky3-line { width: 1px; height: calc(570px - 65px*2); position: absolute; left: calc(862px (263px/2)); top: 65px; background: linear-gradient(to bottom, rgba(193, 193, 193, 0.3), rgba(193, 193, 193, 1), rgba(193, 193, 193, 0.3)); } .ky4 { width: 100%; background: #fafafa; padding: 105px 0; position: relative; } .ky4-all { width: 1360px; margin: 0 auto; position: relative; } .ky4-a { width: 845px; /* background: #fff; */ padding: 20px 27px 20px 42px; height: 650px; float: left; } .ky4-a1 { width: 100%; height: 100%; padding-right: 75px; overflow: hidden; overflow-y: auto; } .ky4-a1:: -webkit-scrollbar { width: 4px; background: #eeeeee; } .ky4-a1:: -webkit-scrollbar-thumb { width: 4px; background: #188947; } .ky4-a2 { width: 100%; border-bottom: 1px solid #eeeeee; cursor: pointer; } .ky4-a21: hover { background: #1889472b; color: #000000; box-shadow: rgb(0 153 55 / 5%) 0px 0px 15px 7px; } .ky4-a21 i { height: auto; width: 1px; background: #e1e2e5; display: block; transition: all .5s; } .ky4-a21 { width: 100%; height: 50px; position: relative; } .ky4-a21a { font-size: 15px; line-height: 3.2; color: #3d3d3d; float: left; font-family: yumow04; margin-right: 5px; padding: 0 .3rem 0; } .ky4-a21b { font-size: 15px; line-height: 3.2; font-weight: 500; float: left; } .ky4-a21c { width: 15px; height: 10px; position: absolute; top: calc(50% - 13px/2); right: 5%; transition: 0.5s; } .ky4-a21c: hover h4, .ky4-a21a:hover, .ky4-a21b:hover { /* color: #fff; */ } .ky4-a22 { width: 100%; padding: 10px 0 40px 105px; display: none; } .ky4-a22>div { float: left; width: 268px; } .ky4-a2.on .ky4-a21c { transform: rotate(180deg); transition: 0.5s; } .ky4-b1 { width: 590px; background: #fff; height: 100%; position: absolute; right: 0; top: 0; } .ky4-b2 { width: 100px; position: absolute; right: calc(50% - 1360px/2 - 34px); top: 32px; } .ky4-b3 { font-size: 38px; line-height: 45px; font-weight: bold; background: linear-gradient(68deg, #188947, #388d93); -webkit-background-clip: text; color: transparent; height: max-content; width: 36px; position: absolute; top: 32px; right: calc(50% - 1360px/2 100px); } .ky4-b4 { width: 406px; position: absolute; top: calc(105px (650px/2 - 514px/2)); right: calc(50% - 1360px/2 225px); } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .ky1 { width: 1200px; padding: 100px 0; margin: 0 auto; position: relative; } .ky1-a { width: 58%; float: left; } .ky1-a1 { text-transform: uppercase; font-size: 38px; line-height: 60px; color: #404142; text-transform: uppercase; font-weight: 200; } .ky1-a1>span { font-family: yumow04; } .ky1-a2 { width: max-content; font-size: 36px; line-height: 1; font-weight: bold; margin-top: calc(1200px*30/1360); background: linear-gradient(68deg, #188947, #388d93); -webkit-background-clip: text; color: transparent; } .ky1-a3 { font-size: calc(1200px*16/1360); line-height: calc(1200px*42/1360); color: #565656; margin-top: calc(1200px*64/1360); } .ky1-a3.two { width: 100%; float: left; margin-top: .2%; } .ky1-a3 p { font-size: 15px; line-height: 2; color: #565656; margin-top: 10px; } .ky1-a3 em:: before { content: '-'; margin-right: 0.8em; } .ky1-a3 p span { color: #188947; font-weight: bold; } .ky1-b { float: right; width: 35%; display: flex; justify-content: space-between; flex-wrap: wrap; } .ky1-b>.ky1-b1:nth-child(4) { margin-top: -.5rem; } .ky1-b>.ky1-b1:nth-child(6) { margin-top: -.5rem; } .ky1-b1 { height: 216px; padding-left: 60px; position: relative; padding-top: 15%; width: 50%; } .ky1-b>.ky1-b1: first-child { margin-top: calc(1200px*60/1360); } .ky1-b>.ky1-b1: last-child { margin-top: calc(1200px*-60/1360); } .ky1-b1a { width: 1px; height: 100%; background: #eeeeee; position: absolute; left: 0; top: 0; } .ky1-b1a>div { width: calc(1200px*3/1360); height: calc(1200px*40/1360); background: #188947; position: absolute; left: -1px; top: 40%; } .ky1-b1b { font-size: calc(1200px*90/1360); line-height: calc(1200px*90/1360); background: #188947; -webkit-background-clip: text; color: transparent; width: max-content; font-family: 'oswald'; font-family: impact, haettenschweiler, "arial narrow bold", sans-serif; font-size: 0.45rem; position: relative; } .ky1-b1b>span { font-size: 14px; line-height: calc(1200px*18/1360); background: none; color: #333333; position: absolute; left: calc(100% (1200px*10/1360)); top: calc(1200px*10/1360); width: max-content; } .ky1-b1c { font-size: 14px; line-height: 1; margin-top: calc(1200px*24/1360); padding-left: calc(1200px*10/1360); color: #686868; } .ky2 { width: 100%; padding: calc(1200px*75/1360) 0 calc(1200px*240/1360) 0; position: relative; background: #188947; } .ky2-t>div:nth-child(1) { font-size: calc(1200px*42/1360); line-height: calc(1200px*42/1360); color: #fff; text-align: center; font-family: 'oswald'; } .ky2-t>div:nth-child(2) { font-size: calc(1200px*36/1360); line-height: calc(1200px*36/1360); color: #fff; font-weight: bold; text-align: center; margin-top: calc(1200px*25/1360); } .ky2-a { width: 1200px; font-size: 0; margin: 0 auto; margin-top: calc(1200px*95/1360); padding: 0 calc(1200px*55/1360); position: relative; } .ky2-a1 { width: calc(50% - (1200px*70/1360)); float: left; cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, 0.18); margin-right: calc(1200px*140/1360); } .ky2-a>.ky2-a1:nth-child(2n) { float: right; margin-right: 0; } .ky2-a>.ky2-a1:nth-child(1), .ky2-a>.ky2-a1:nth-child(2) { border-top: 1px solid rgba(255, 255, 255, 0.18); } .ky2-a2 { width: 100%; height: calc(1200px*100/1360); position: relative; } .ky2-a2>div:nth-child(1) { font-size: calc(1200px*24/1360); line-height: calc(1200px*100/1360); color: #fff; float: left; font-family: yumow04; margin-right: calc(1200px*15/1360); } .ky2-a2>div:nth-child(2) { font-size: calc(1200px*20/1360); line-height: calc(1200px*100/1360); font-weight: bold; color: #fff; float: left; } .ky2-a2>div:nth-child(3) { width: calc(1200px*18/1360); height: calc(1200px*13/1360); position: absolute; right: 0; top: calc(50% - (1200px*13/1360)/2); transition: 0.5s; } .ky2-a3 { padding: 0 calc(1200px*17/1360) 0 calc(1200px*43/1360); font-size: calc(1200px*18/1360); line-height: calc(1200px*30/1360); color: #fff; padding-bottom: calc(1200px*18/1360); display: none; } .ky2-a1.on .ky2-a2>div:nth-child(3) { transform: rotate(-90deg); transition: 0.5s; } .ky2-b { width: 100%; position: absolute; bottom: 0; left: 0; } .ky3 { width: 100%; padding: calc(1200px*118/1360) 0 calc(1200px*218/1360) 0; overflow: hidden; } .ky3-a { width: 1200px; height: calc(1200px*570/1360); margin: 0 auto; margin-top: calc(1200px*122/1360); position: relative; } .ky3-swi { width: calc(1200px*1760/1360); height: calc(1200px*570/1360); position: absolute; left: 0; top: 0; } .ky3-swi .swiper-slide { width: calc(1200px*640/1360); height: calc(1200px*425/1360); transform: translatey(calc(1200px*145/1360)); transition: 0.5s; } .ky3-swi .swiper-slide-active { width: calc(1200px*862/1360); height: calc(1200px*570/1360); transform: translatey(0); transition: 0.5s; } .ky3-a1 { width: 100%; height: 100%; position: relative; } .ky3-a2 { position: absolute; left: calc(1200px*35/1360); top: calc(1200px*35/1360); } .ky3-a21 { font-size: calc(1200px*36/1360); line-height: calc(1200px*36/1360); color: #fff; font-family: 'oswald'; } .ky3-a22 { width: calc(1200px*84/1360); height: 1px; background: rgba(255, 255, 255, 0.47); margin-top: calc(1200px*17/1360); } .ky3-a23 { font-size: calc(1200px*16/1360); line-height: calc(1200px*16/1360); color: #fff; margin-top: calc(1200px*13/1360); text-transform: uppercase; } .ky3-a3 { position: absolute; width: 100%; height: calc(1200px*263/1360); background-size: 100% 100%; left: 0; bottom: 0; transition: 0.5s; } .ky3-a31 { width: calc(100% - (1200px*47/1360)*2); left: calc(1200px*47/1360); bottom: calc(1200px*40/1360); position: absolute; } .ky3-a31>div:nth-child(1) { font-size: calc(1200px*24/1360); line-height: calc(1200px*24/1360); color: #fff; font-weight: bold; } .ky3-a31>div:nth-child(2) { font-size: calc(1200px*18/1360); line-height: calc(1200px*36/1360); color: #fff; margin-top: calc(1200px*15/1360); opacity: 0; display: none; transition: 0.5s; } .swiper-slide-active .ky3-a3 { background: url(/uploads/image/stmimages/a53.png) no-repeat; transition: 0.5s; } .swiper-slide-active .ky3-a31>div:nth-child(2) { opacity: 1; display: block; transition: 0.5s; } .ky3-line { width: 1px; height: calc((1200px*570/1360) - (1200px*65/1360)*2); position: absolute; left: calc((1200px*862/1360) ((1200px*263/1360)/2)); top: calc(1200px*65/1360); background: linear-gradient(to bottom, rgba(193, 193, 193, 0.3), rgba(193, 193, 193, 1), rgba(193, 193, 193, 0.3)); } .ky4 { width: 100%; background: #fafafa; padding: calc(1200px*105/1360) 0; position: relative; } .ky4-all { width: 1200px; margin: 0 auto; position: relative; } .ky4-a { width: calc(1200px*845/1360); /*! background: #fff; */ padding: calc(1200px*20/1360) calc(1200px*27/1360) calc(1200px*20/1360) calc(1200px*42/1360); height: calc(1200px*650/1360); float: left; } .ky4-a1 { width: 100%; height: 100%; padding-right: calc(1200px*75/1360); overflow: hidden; overflow-y: auto; } .ky4-a1:: -webkit-scrollbar { width: 3px; background: #eeeeee; } .ky4-a1:: -webkit-scrollbar-thumb { width: 3px; background: #188947; } .ky4-a2 { width: 100%; border-bottom: 1px solid #eeeeee; cursor: pointer; } .ky4-a21 { width: 100%; height: 50px; position: relative; } .ky4-a21a { font-size: 14px; line-height: 50px; color: #222; float: left; font-family: yumow04; margin-right: calc(1200px*45/1360); } .ky4-a21b { font-size: 14px; line-height: 50px; font-weight: 500; float: left; } .ky4-a21c { width: calc(1200px*20/1360); height: calc(1200px*13/1360); position: absolute; top: calc(50% - (1200px*13/1360)/2); right: 0; transition: 0.5s; } .ky4-a22 { width: 100%; padding: calc(1200px*10/1360) 0 calc(1200px*40/1360) calc(1200px*105/1360); display: none; } .ky4-a22>div { float: left; width: calc(1200px*268/1360); } .ky4-a2.on .ky4-a21c { transform: rotate(180deg); transition: 0.5s; } .ky4-b1 { width: calc(1200px*590/1360); background: #fff; height: 100%; position: absolute; right: 0; top: 0; } .ky4-b2 { width: calc(1200px*100/1360); position: absolute; right: calc(50% - 1200px/2 - (1200px*34/1360)); top: calc(1200px*32/1360); } .ky4-b3 { font-size: 36px; line-height: 1.2; font-weight: bold; background: linear-gradient(68deg, #188947, #388d93); -webkit-background-clip: text; color: transparent; height: max-content; width: 50px; position: absolute; top: 4%; right: 19%; } .ky4-b4 { width: calc(1200px*406/1360); position: absolute; top: calc((1200px*105/1360) ((1200px*650/1360)/2 - (1200px*514/1360)/2)); right: calc(50% - 1200px/2 (1200px*225/1360)); } } @media only screen and (max-width: 1023px) { .ky1 { width: calc(100% - 0.4rem*2); padding: 0.8rem 0; margin: 0 auto; position: relative; } .ky1-a { width: 100%; } .ky1-a1 { font-size: 0.6rem; line-height: 0.6rem; color: #5e5e5e; /*font-family: 'dinr';*/ text-transform: uppercase; } .ky1-a1>span { font-family: yumow04; } .ky1-a2 { width: max-content; font-size: 26px; line-height: 1; font-weight: bold; margin-top: 0.3rem; background: linear-gradient(68deg, #188947, #388d93); -webkit-background-clip: text; color: transparent; } .ky1-a3 { font-size: 0.24rem; line-height: 0.5rem; color: #565656; margin-top: 0.5rem; } .ky1-a3.two { width: 100%; float: left; margin-top: .2%; } .ky1-a3 p { font-size: 14px; line-height: 0.5rem; color: #565656; margin-top: 0.1rem; } .ky1-b { width: 100%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 0.4rem; } .ky1-b1 { width: 3.3rem; height: 2.16rem; padding-left: 0.6rem; position: relative; padding-top: 0.55rem; } .ky1-b>.ky1-b1: first-child { margin-top: 0rem; } .ky1-b>.ky1-b1: last-child { margin-top: 0rem; } .ky1-b1a { width: 0.01rem; height: 100%; background: #eeeeee; position: absolute; left: 0; top: 0; } .ky1-b1a>div { width: 0.03rem; height: 0.4rem; background: #188947; position: absolute; left: -0.01rem; top: 0.5rem; } .ky1-b1b { font-size: 26px; line-height: 1; background: linear-gradient(68deg, #188947, #388d93); -webkit-background-clip: text; color: transparent; width: max-content; font-family: 'oswald'; position: relative; } .ky1-b1b>span { font-size: 0.24rem; line-height: 0.24rem; background: none; color: #333333; position: absolute; left: calc(100% 0.1rem); top: 0.1rem; } .ky1-b1c { font-size: 0.24rem; line-height: 0.3rem; margin-top: 0.24rem; padding-left: 0.1rem; } .ky2 { width: 100%; padding: 0.75rem 0 2.4rem 0; position: relative; background: #188947; } .ky2-t>div:nth-child(1) { font-size: 0.42rem; line-height: 0.42rem; color: #fff; text-align: center; font-family: 'oswald'; } .ky2-t>div:nth-child(2) { font-size: 0.36rem; line-height: 0.36rem; color: #fff; font-weight: bold; text-align: center; margin-top: 0.25rem; } .ky2-a { width: calc(100% - 0.3rem*2); margin: 0 auto; margin-top: 0.95rem; padding: 0 0.55rem; position: relative; } .ky2-a1 { width: 100%; border-bottom: 0.01rem solid rgba(255, 255, 255, 0.18); } .ky2-a>.ky2-a1:nth-child(1) { border-top: 1px solid rgba(255, 255, 255, 0.18); } .ky2-a2 { width: 100%; height: 1rem; position: relative; } .ky2-a2>div:nth-child(1) { font-size: 0.3rem; line-height: 1rem; color: #fff; float: left; font-family: yumow04; margin-right: 15px; } .ky2-a2>div:nth-child(2) { font-size: 0.28rem; line-height: 1rem; font-weight: bold; color: #fff; float: left; } .ky2-a2>div:nth-child(3) { width: 0.24rem; height: 0.17rem; position: absolute; right: 0; top: calc(50% - 0.17rem/2); transition: 0.5s; } .ky2-a3 { padding: 0 0.17rem 0 0.43rem; font-size: 0.26rem; line-height: 0.4rem; color: #fff; padding-bottom: 0.18rem; display: none; } .ky2-a1.on .ky2-a2>div:nth-child(3) { transform: rotate(-90deg); transition: 0.5s; } .ky2-b { width: 100%; position: absolute; bottom: 0; left: 0; } .ky3 { width: 100%; padding: 1.18rem 0 2.18rem 0; overflow: hidden; } .ky3-a { width: calc(100% - 0.3rem*2); height: 4.5rem; margin: 0 auto; margin-top: 1.2rem; position: relative; } .ky3-swi { width: 100%; height: 4.5rem; position: absolute; left: 0; top: 0; } .ky3-a1 { width: 100%; height: 100%; position: relative; } .ky3-a2 { position: absolute; left: 0.35rem; top: 0.35rem; } .ky3-a21 { font-size: 0.36rem; line-height: 0.36rem; color: #fff; font-family: 'oswald'; } .ky3-a22 { width: 0.84rem; height: 0.01rem; background: rgba(255, 255, 255, 0.47); margin-top: 0.17rem; } .ky3-a23 { font-size: 0.24rem; line-height: 0.24rem; color: #fff; margin-top: 0.13rem; text-transform: uppercase; } .ky3-a3 { position: absolute; width: 100%; height: 2.63rem; background-size: 100% 100%; left: 0; bottom: 0; transition: 0.5s; } .ky3-a31 { width: calc(100% - 0.47rem*2); left: 0.47rem; bottom: 0.4rem; position: absolute; } .ky3-a31>div:nth-child(1) { font-size: 0.3rem; line-height: 0.3rem; color: #fff; font-weight: bold; } .ky3-a31>div:nth-child(2) { font-size: 0.26rem; line-height: 0.4rem; color: #fff; margin-top: 15px; opacity: 0; display: none; transition: 0.5s; } .swiper-slide-active .ky3-a31>div:nth-child(2) { opacity: 1; display: block; transition: 0.5s; } .ky4 { width: 100%; background: #fafafa; padding: 1.05rem 0; position: relative; } .ky4-all { width: calc(100% - 0.3rem*2); margin: 0 auto; position: relative; } .ky4-a { width: 100%; background: #fff; padding: 0.2rem 0.3rem 0.2rem 0.3rem; height: 6.5rem; } .ky4-a1 { width: 100%; height: 100%; padding-right: 0.05rem; overflow: hidden; overflow-y: auto; } .ky4-a1:: -webkit-scrollbar { width: 0.04rem; background: #eeeeee; } .ky4-a1:: -webkit-scrollbar-thumb { width: 0.4rem; background: #188947; } .ky4-a2 { width: 100%; border-bottom: 0.01rem solid #eeeeee; cursor: pointer; } .ky4-a21 { width: 100%; height: 1rem; position: relative; display: flex; transition: all .4s; } .ky4-a21a { font-size: 0.3rem; line-height: 1; color: #2a2929; float: left; font-family: yumow04; margin-right: 0.25rem; width: 18%; display: flex; align-items: center; } .ky4-a21b { font-size: 0.26rem; line-height: 1.5; font-weight: 500; float: left; width: 70%; display: flex; align-items: center; } .ky4-a21c { width: 0.2rem; height: 0.13rem; position: absolute; top: 50%; right: 0; transition: 0.5s; } .ky4-a22 { width: 100%; padding: 0.1rem 0 0.4rem 1.5rem; display: none; } .ky4-a22>div { float: left; width: 2.68rem; } .ky4-a2.on .ky4-a21c { transform: rotate(180deg); transition: 0.5s; } .ky4-b2 { width: 1rem; position: absolute; right: 0.64rem; top: 51%; } .ky4-b3 { font-size: 26px; line-height: 1.2; font-weight: bold; background: linear-gradient(68deg, #188947, #388d93); -webkit-background-clip: text; color: transparent; height: max-content; width: 30px; position: absolute; bottom: 26%; right: 1.8rem; } .ky4-b4 { width: 4.06rem; margin: 0.8rem 0 0 0.3rem; } } /* ãƒâ¨ã‚âã¢â‚¬âãƒâ§ã‚â³ã‚â»ãƒâ¦ã‹â€ ã¢â‚¬ëœãƒâ¤ã‚â»ã‚⬠*/ @media only screen and (min-width: 1640px) { .lx1 { width: 100%; background: #f8f8f8; height: 750px; position: relative; } .lx1-m { width: 50%; float: right; height: 100%; } .lx1-m>#map { width: 100%; height: 100%; } .lx1-a { height: 100%; display: table; position: absolute; left: calc(50% - 1360px/2 80px); top: 0; } .lx1-a1 { display: table-cell; vertical-align: middle; } .lx1-a2 { font-size: 18px; line-height: 18px; color: #555555; } .lx1-a3 { font-size: 36px; line-height: 36px; color: #555555; margin-top: 30px; font-family: 'oswald'; } .lx1-a4 { margin-top: 45px; } .lx1-a41 { width: 60px; height: 60px; border-radius: 50%; border: 1px dashed #cacaca; position: relative; float: left; margin-right: 38px; } .lx1-a4>.lx1-a41: last-child { margin-right: 0; } .lx1-a41>img { height: 24px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .lx1-a41:nth-child(1) img, .lx1-a41:nth-child(2) img { height: 32px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .lx1-a41 img { height: 24px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .lx1-a41: hover>img { transform: rotatey(360deg); transition: 0.5s; } .lx1-a5 { margin-top: 25px; } .lx1-a5>div { font-size: 16px; line-height: 36px; color: #686868; } .lx1-a6 { margin-top: 45px; } .lx1-a61 { width: 173px; float: left; margin-right: 45px; } .lx1-a6>.lx1-a61: last-child { margin-right: 0; } .lx1-a62 { width: 100%; height: 173px; } .lx1-a63 { font-size: 18px; line-height: 18px; color: #555555; text-align: center; margin-top: 30px; } .lx2 { width: 100%; padding: 105px 0 225px 0; background: #fff; } .lx2-t>div:nth-child(1) { font-size: 32px; line-height: 32px; font-weight: bold; text-align: center; color: #454545; } .lx2-t>div:nth-child(2) { width: 40px; height: 2px; background: #dee1e8; margin: 0 auto; margin-top: 20px; } .lx2-a { width: 1360px; margin: 0 auto; margin-top: 63px; position: relative; } .lx2-a1 { width: 100%; } .lx2-a2 { width: calc(50% - 28px); float: left; margin-right: 28px; margin-bottom: 32px; } .lx2-a1>.lx2-a2:nth-child(2n) { margin-right: 0; } .lx2-a21 { font-size: 16px; line-height: 16px; color: #454545; } .lx2-a22 { width: 100%; height: 60px; border: 1px solid #e5e5e5; margin-top: 20px; position: relative; } .lx2-a23 { width: 24px; position: absolute; top: calc(50% - 23px/2); left: 28px; } .lx2-a22>input { width: 100%; height: 100%; padding-left: 68px; font-size: 16px; } .lx2-a3 { width: 100%; } .lx2-a31 { font-size: 16px; line-height: 16px; color: #454545; } .lx2-a32 { width: 100%; height: 245px; border: 1px solid #e5e5e5; margin-top: 20px; position: relative; } .lx2-a33 { width: 24px; position: absolute; left: 28px; top: 18px; } .lx2-a32 textarea { width: 100%; height: 100%; padding-left: 70px; padding-top: 15px; font-size: 16px; line-height: 30px; } .lx2-a4 { width: 100%; margin-top: 52px; } .lx2-a41 { width: 168px; height: 60px; border: 1px solid #e5e5e5; float: left; } .lx2-a41>input { width: 100%; height: 100%; font-size: 16px; padding-left: 25px; } .lx2-a42 { width: 112px; height: 60px; float: left; } .lx2-a42 #v_container { width: 100%; height: 100%; } .lx2-a5 { width: 20%; height: 58px; background: #188947; cursor: pointer; font-size: 18px; line-height: 58px; text-align: center; color: #fff; position: absolute; bottom: -15%; right: 40%; } .lx2-a1>.lx2-a2:nth-child(2) .lx2-a23 { width: 18px; } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .lx1 { width: 100%; background: #f8f8f8; height: calc(1200px*750/1360); position: relative; } .lx1-m { width: 50%; float: right; height: 100%; } .lx1-m>#map { width: 100%; height: 100%; } .lx1-a { height: 100%; display: table; position: absolute; left: calc(50% - 1200px/2 (1200px*80/1360)); top: 0; } .lx1-a1 { display: table-cell; vertical-align: middle; } .lx1-a2 { font-size: calc(1200px*18/1360); line-height: calc(1200px*18/1360); color: #555555; } .lx1-a3 { font-size: calc(1200px*36/1360); line-height: calc(1200px*36/1360); color: #555555; margin-top: calc(1200px*30/1360); font-family: 'oswald'; } .lx1-a4 { margin-top: calc(1200px*45/1360); } .lx1-a41 { width: calc(1200px*60/1360); height: calc(1200px*60/1360); border-radius: 50%; border: 1px dashed #cacaca; position: relative; float: left; margin-right: calc(1200px*38/1360); } .lx1-a4>.lx1-a41: last-child { margin-right: 0; } .lx1-a41>img { height: calc(1200px*24/1360); position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .lx1-a41:hover img { transform: rotatey(360deg); transition: 0.5s; } .lx1-a41:nth-child(1) img, .lx1-a41:nth-child(2) img { height: 32px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .lx1-a41 img { height: 24px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .lx1-a41: hover>img { transform: rotatey(360deg); transition: 0.5s; } .lx1-a5 { margin-top: calc(1200px*25/1360); } .lx1-a5>div { font-size: calc(1200px*16/1360); line-height: calc(1200px*36/1360); color: #686868; } .lx1-a6 { margin-top: calc(1200px*45/1360); } .lx1-a61 { width: calc(1200px*173/1360); float: left; margin-right: calc(1200px*45/1360); } .lx1-a6>.lx1-a61: last-child { margin-right: 0; } .lx1-a62 { width: 100%; height: calc(1200px*173/1360); } .lx1-a63 { font-size: calc(1200px*18/1360); line-height: calc(1200px*18/1360); color: #555555; text-align: center; margin-top: calc(1200px*30/1360); } .lx2 { width: 100%; padding: calc(1200px*105/1360) 0 calc(1200px*225/1360) 0; background: #fff; } .lx2-t>div:nth-child(1) { font-size: calc(1200px*32/1360); line-height: calc(1200px*32/1360); font-weight: bold; text-align: center; color: #454545; } .lx2-t>div:nth-child(2) { width: calc(1200px*40/1360); height: 2px; background: #dee1e8; margin: 0 auto; margin-top: calc(1200px*20/1360); } .lx2-a { width: 1200px; margin: 0 auto; margin-top: calc(1200px*63/1360); position: relative; } .lx2-a1 { width: 100%; } .lx2-a2 { width: calc(50% - (1200px*28/1360)); float: left; margin-right: calc(1200px*28/1360); margin-bottom: calc(1200px*32/1360); } .lx2-a1>.lx2-a2:nth-child(2n) { margin-right: 0; } .lx2-a21 { font-size: calc(1200px*16/1360); line-height: calc(1200px*16/1360); color: #454545; } .lx2-a22 { width: 100%; height: calc(1200px*60/1360); border: 1px solid #e5e5e5; margin-top: calc(1200px*20/1360); position: relative; } .lx2-a23 { width: calc(1200px*24/1360); position: absolute; top: calc(50% - (1200px*23/1360)/2); left: calc(1200px*28/1360); } .lx2-a22>input { width: 100%; height: 100%; padding-left: calc(1200px*68/1360); font-size: calc(1200px*16/1360); } .lx2-a3 { width: 100%; } .lx2-a31 { font-size: calc(1200px*16/1360); line-height: calc(1200px*16/1360); color: #454545; } .lx2-a32 { width: 100%; height: calc(1200px*245/1360); border: 1px solid #e5e5e5; margin-top: calc(1200px*20/1360); position: relative; } .lx2-a33 { width: calc(1200px*24/1360); position: absolute; left: calc(1200px*28/1360); top: calc(1200px*18/1360); } .lx2-a32 textarea { width: 100%; height: 100%; padding-left: calc(1200px*70/1360); padding-top: calc(1200px*15/1360); font-size: calc(1200px*16/1360); line-height: calc(1200px*30/1360); } .lx2-a4 { width: 100%; margin-top: calc(1200px*52/1360); } .lx2-a41 { width: calc(1200px*168/1360); height: calc(1200px*60/1360); border: 1px solid #e5e5e5; float: left; } .lx2-a41>input { width: 100%; height: 100%; font-size: calc(1200px*16/1360); padding-left: calc(1200px*25/1360); } .lx2-a42 { width: calc(1200px*112/1360); height: calc(1200px*60/1360); float: left; } .lx2-a42 #v_container { width: 100%; height: 100%; } .lx2-a5 { width: calc(1200px*174/1360); height: calc(1200px*58/1360); background: #188947; cursor: pointer; font-size: calc(1200px*18/1360); line-height: calc(1200px*58/1360); text-align: center; color: #fff; position: absolute; bottom: calc(1200px*12/1360); right: 0; } .lx2-a1>.lx2-a2:nth-child(2) .lx2-a23 { width: calc(1200px*18/1360); } } @media only screen and (max-width: 1023px) { .lx1 { width: 100%; background: #f8f8f8; position: relative; } .lx1-m { width: 100%; height: auto; margin-top: 0.4rem; } .lx1-m>#map { width: 100%; height: 100%; } .lx1-a { width: calc(100% - 0.3rem*2); margin: 0 auto; padding-top: 0.4rem; } .lx1-a2 { font-size: 0.26rem; line-height: 0.26rem; color: #555555; } .lx1-a3 { font-size: 0.36rem; line-height: 0.36rem; color: #555555; margin-top: 0.3rem; font-family: 'oswald'; } .lx1-a4 { margin-top: 0.45rem; } .lx1-a41 { width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 0.01rem dashed #cacaca; position: relative; float: left; margin-right: 0.38rem; } .lx1-a4>.lx1-a41: last-child { margin-right: 0; } .lx1-a41>img { height: 0.24rem; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .lx1-a5 { margin-top: 0.25rem; } .lx1-a5>div { font-size: 0.24rem; line-height: 0.4rem; color: #686868; } .lx1-a6 { margin-top: 0.45rem; } .lx1-a61 { width: 1.73rem; float: left; margin-right: 0.45rem; } .lx1-a6>.lx1-a61: last-child { margin-right: 0; } .lx1-a62 { width: 100%; height: 1.73rem; } .lx1-a63 { font-size: 0.26rem; line-height: 0.26rem; color: #555555; text-align: center; margin-top: 0.3rem; } .lx2 { width: 100%; padding: 1.05rem 0 1.25rem 0; background: #fff; } .lx2-t>div:nth-child(1) { font-size: 22px; line-height: 1.6; font-weight: bold; text-align: center; color: #454545; } .lx2-t>div:nth-child(2) { width: 0.4rem; height: 0.02rem; background: #dee1e8; margin: 0 auto; margin-top: 0.2rem; } .lx2-a { width: calc(100% - 0.3rem*2); margin: 0 auto; margin-top: 0.63rem; position: relative; } .lx2-a1 { width: 100%; } .lx2-a2 { width: 100%; margin-bottom: 0.32rem; } .lx2-a21 { font-size: 0.24rem; line-height: 0.24rem; color: #454545; } .lx2-a22 { width: 100%; height: 0.8rem; border: 0.01rem solid #e5e5e5; margin-top: 0.2rem; position: relative; } .lx2-a23 { width: 0.24rem; position: absolute; top: calc(50% - 0.24rem/2); left: 0.28rem; } .lx2-a22>input { width: 100%; height: 100%; padding-left: 0.68rem; font-size: 0.24rem; } .lx2-a3 { width: 100%; } .lx2-a31 { font-size: 0.24rem; line-height: 0.24rem; color: #454545; } .lx2-a32 { width: 100%; height: 2.45rem; border: 0.01rem solid #e5e5e5; margin-top: 0.2rem; position: relative; } .lx2-a33 { width: 0.24rem; position: absolute; left: 0.28rem; top: 0.18rem; } .lx2-a32 textarea { width: 100%; height: 100%; padding-left: 0.7rem; padding-top: 15px; font-size: 0.24rem; line-height: 0.4rem; } .lx2-a4 { width: 100%; margin-top: 0.52rem; } .lx2-a41 { width: 2.05rem; height: 0.8rem; border: 0.01rem solid #e5e5e5; float: left; } .lx2-a41>input { width: 100%; height: 100%; font-size: 0.24rem; padding-left: 0.25rem; } .lx2-a42 { width: 1.5rem; height: 0.8rem; float: left; } .lx2-a42 #v_container { width: 100%; height: 100%; } .lx2-a5 { width: 100%; height: 0.8rem; background: #188947; cursor: pointer; font-size: 0.26rem; line-height: 0.8rem; text-align: center; color: #fff; margin: 0 auto; margin-top: 0.4rem; } .lx2-a1>.lx2-a2:nth-child(2) .lx2-a23 { width: 0.18rem; } } /* ãƒâ¤ã‚âºã‚â§ãƒâ¥ã¢â‚¬å“ã‚âãƒâ¨ã‚â¯ã‚â¦ãƒâ¦ã†â€™ã¢â‚¬â¦ */ @media only screen and (min-width: 1640px) { .cxq { width: 100%; position: relative; /* margin-top: 115px; */ overflow: hidden; } .cxq-b { width: 100%; position: absolute; left: 0; top: 0; } .cxq-a { width: 1360px; margin: 0 auto; position: relative; } .cxq-all { width: 100%; margin-top: 160px; position: relative; } .cxq-a1 { float: left; font-size: 18px; line-height: 22px; color: #fff; float: left; margin-right: 75px; } .cxq-a1.on { font-size: 22px; font-weight: bold; } .cxq-a2 { position: absolute; right: 0; top: calc(50% - 21px/2); display: flex; align-items: center; } .cxq-a2>div:nth-child(1) { width: 26px; height: 21px; } .cxq-a2>div:nth-child(2) { font-size: 18px; line-height: 21px; color: #fff; margin-left: 14px; } .cxq-c { width: 100%; background: #fff; margin-top: 30px; padding: 85px 80px 90px 80px; position: relative; } .cxq-c1 { width: 100%; } .cxq-c2 { width: 725px; height: 408px; background: #f6f6f6; float: left; position: relative; } .cxq-c2>img { height: 406px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .cxq-c3 { width: calc(100% - 725px); float: left; padding: 60px 75px 0 75px; } .cxq-c31 { font-size: 24px; line-height: 24px; font-weight: bold; } .cxq-c32 { font-size: 16px; line-height: 36px; color: #757575; margin-top: 20px; } .cxq-c33 { width: 100%; height: 1px; background: #eeeeee; margin-top: 33px; } .cxq-c34 { font-size: 16px; line-height: 36px; color: #454545; margin-top: 40px; } .cxq-c34>span { font-weight: bold; } .cxq-c35 { font-size: 16px; line-height: 36px; color: #757575; margin-top: 27px; } .cxq-c4 { width: 100%; margin-top: 60px; font-size: 16px; line-height: 40px; color: #454545; padding-bottom: 20px; border-bottom: 1px solid #188947; } .cxq-c4 p { width: 100%; font-size: 15px; line-height: 1.8; color: #454545; } .cxq-c5 { width: 100%; margin-top: 50px; } .cxq-c51 { width: 10px; height: 14px; float: left; } .cxq-c5>.cxq-c51:nth-child(2) { float: right; } .cxq-d { width: 100%; margin-top: 65px; padding-bottom: 100px; margin-bottom: 150px; } .cxq-d1 { font-size: 24px; line-height: 24px; font-weight: bold; margin-bottom: 65px; } .cxq-d2 { width: 100%; position: relative; } .cxq-d .ind3-swi { width: 100%; } .cxq-d21 { width: 100%; height: 350px; background: #fff; position: relative; } .cxq-d21>img { height: 265px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; transition: 0.5s; } .cxq-d22 { font-size: 24px; line-height: 24px; font-weight: bold; margin-top: 57px; } .cxq-d23 { font-size: 16px; line-height: 16px; color: #757575; margin-top: 23px; } .cxq-d21: hover>img { transform: scale(1.08); transition: 0.5s; } .cxq-t1 { font-size: 28px; line-height: 28px; font-weight: bold; text-align: center; } .cxq-t2 { display: flex; align-items: center; justify-content: center; margin-top: 50px; padding-bottom: 50px; border-bottom: 1px solid #eeeeee; } .cxq-t21 { font-size: 16px; line-height: 16px; color: #757575; position: relative; } .cxq-t22 { font-size: 16px; line-height: 16px; color: #757575; margin: 0 45px; } .cxq-t3 { font-size: 16px; line-height: 40px; margin-top: 57px; color: #454545; padding-bottom: 162px; border-bottom: 1px solid #188947; } .cxq-t3 p { font-size: 15px; line-height: 26px; margin-top: 2px; color: #454545; } .cxq-t3 img { max-width: 100%; display: inline-block !important; } .cxq-t5 { width: 100%; margin-top: 50px; } .cxq-t51 { width: 50%; float: left; } .cxq-t51>img { width: 10px; height: 14px; float: left; } .cxq-t51>div { font-size: 16px; line-height: 16px; margin-left: 36px; max-width: calc(100% - 10px - 36px); color: #454545; float: left; } .cxq-t5>.cxq-t51:nth-child(2)>img { float: right; } .cxq-t5>.cxq-t51:nth-child(2)>div { float: right; margin-left: 0; margin-right: 36px; } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .cxq { width: 100%; position: relative; /* margin-top: 100px; */ overflow: hidden; } .cxq-b { width: 100%; position: absolute; left: 0; top: 0; } .cxq-a { width: 1200px; margin: 0 auto; position: relative; } .cxq-all { width: 100%; margin-top: 160px; position: relative; } .cxq-a1 { float: left; font-size: calc(1200px*18/1360); line-height: calc(1200px*22/1360); color: #fff; float: left; margin-right: calc(1200px*75/1360); } .cxq-a1.on { font-size: calc(1200px*22/1360); font-weight: bold; } .cxq-a2 { position: absolute; right: 0; top: calc(50% - (1200px*21/1360)/2); display: flex; align-items: center; } .cxq-a2>div:nth-child(1) { width: calc(1200px*26/1360); height: calc(1200px*21/1360); } .cxq-a2>div:nth-child(2) { font-size: calc(1200px*18/1360); line-height: calc(1200px*21/1360); color: #fff; margin-left: calc(1200px*14/1360); } .cxq-c { width: 100%; background: #fff; margin-top: calc(1200px*50/1360); padding: calc(1200px*85/1360) calc(1200px*80/1360) calc(1200px*90/1360) calc(1200px*80/1360); position: relative; } .cxq-c1 { width: 100%; } .cxq-c2 { width: calc(1200px*725/1360); height: calc(1200px*408/1360); background: #f6f6f6; float: left; position: relative; } .cxq-c2>img { height: calc(1200px*406/1360); position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .cxq-c3 { width: calc(100% - (1200px*725/1360)); float: left; padding: calc(1200px*60/1360) calc(1200px*75/1360) 0 calc(1200px*75/1360); } .cxq-c31 { font-size: calc(1200px*24/1360); line-height: calc(1200px*24/1360); font-weight: bold; } .cxq-c32 { font-size: calc(1200px*16/1360); line-height: calc(1200px*36/1360); color: #757575; margin-top: calc(1200px*20/1360); } .cxq-c33 { width: 100%; height: 1px; background: #eeeeee; margin-top: calc(1200px*33/1360); } .cxq-c34 { font-size: calc(1200px*16/1360); line-height: calc(1200px*36/1360); color: #454545; margin-top: calc(1200px*40/1360); } .cxq-c34>span { font-weight: bold; } .cxq-c35 { font-size: calc(1200px*16/1360); line-height: calc(1200px*36/1360); color: #757575; margin-top: calc(1200px*27/1360); } .cxq-c4 p { width: 100%; font-size: 14px; line-height: 1.8; color: #454545; } .cxq-c4 { width: 100%; margin-top: calc(1200px*60/1360); font-size: calc(1200px*16/1360); line-height: calc(1200px*40/1360); color: #454545; padding-bottom: calc(1200px*10/1360); border-bottom: 1px solid #188947; } .cxq-c5 { width: 100%; margin-top: calc(1200px*50/1360); } .cxq-c51 { width: calc(1200px*10/1360); height: calc(1200px*14/1360); float: left; } .cxq-c5>.cxq-c51:nth-child(2) { float: right; } .cxq-d { width: 100%; margin-top: calc(1200px*65/1360); padding-bottom: calc(1200px*100/1360); margin-bottom: calc(1200px*150/1360); } .cxq-d1 { font-size: calc(1200px*24/1360); line-height: calc(1200px*24/1360); font-weight: bold; margin-bottom: calc(1200px*65/1360); } .cxq-d2 { width: 100%; position: relative; } .cxq-d .ind3-swi { width: 100%; } .cxq-d21 { width: 100%; height: calc(1200px*350/1360); background: #fff; position: relative; } .cxq-d21>img { height: calc(1200px*265/1360); position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; transition: 0.5s; } .cxq-d22 { font-size: calc(1200px*24/1360); line-height: calc(1200px*24/1360); font-weight: bold; margin-top: calc(1200px*57/1360); } .cxq-d23 { font-size: calc(1200px*16/1360); line-height: 16px; color: #757575; margin-top: calc(1200px*23/1360); } .cxq-d21: hover>img { transform: scale(1.08); transition: 0.5s; } .cxq-t1 { font-size: calc(1200px*28/1360); line-height: calc(1200px*28/1360); font-weight: bold; text-align: center; } .cxq-t2 { display: flex; align-items: center; justify-content: center; margin-top: calc(1200px*50/1360); padding-bottom: calc(1200px*50/1360); border-bottom: 1px solid #eeeeee; } .cxq-t21 { font-size: calc(1200px*16/1360); line-height: calc(1200px*16/1360); color: #757575; position: relative; } .cxq-t22 { font-size: calc(1200px*16/1360); line-height: calc(1200px*16/1360); color: #757575; margin: 0 calc(1200px*45/1360); } .cxq-t3 { font-size: calc(1200px*16/1360); line-height: calc(1200px*40/1360); margin-top: calc(1200px*57/1360); color: #454545; padding-bottom: calc(1200px*162/1360); border-bottom: 1px solid #188947; } .cxq-t3 p { font-size: 15px; line-height: 26px; margin-top: 2px; color: #454545; } .cxq-t3 img { max-width: 100%; display: inline-block !important; } .cxq-t5 { width: 100%; margin-top: calc(1200px*50/1360); } .cxq-t51 { width: 50%; float: left; } .cxq-t51>img { width: calc(1200px*10/1360); height: calc(1200px*14/1360); float: left; margin-top: calc(16px/2 - (1200px*14/1360)/2); } .cxq-t51>div { font-size: calc(1200px*16/1360); line-height: 16px; margin-left: calc(1200px*36/1360); max-width: calc(100% - (1200px*10/1360) - (1200px*36/1360)); color: #454545; float: left; } .cxq-t5>.cxq-t51:nth-child(2)>img { float: right; } .cxq-t5>.cxq-t51:nth-child(2)>div { float: right; margin-left: 0; margin-right: calc(1200px*36/1360); } } @media only screen and (max-width: 1023px) { .cxq { width: 100%; position: relative; margin-top: 1.15rem; overflow: hidden; } .cxq-b { width: 100%; position: absolute; left: 0; top: 0; } .cxq-a { width: calc(100% - 0.3rem*2); margin: 0 auto; position: relative; } .cxq-all { width: 100%; margin-top: 0.8rem; position: relative; } .cxq-a1 { float: left; font-size: 0.26rem; line-height: 1.8; color: #fff; float: left; margin-right: 0.5rem; } .cxq-a1.on { font-size: 0.28rem; font-weight: bold; } .cxq-a2 { position: absolute; right: 0; top: calc(50% - 0.21rem/2); display: flex; align-items: center; /* display: none; */ } .cxq-a2>div:nth-child(1) { width: 0.26rem; height: 0.21rem; margin-top: calc(0.3rem/2 - 0.21rem/2); } .cxq-a2>div:nth-child(2) { font-size: 0.26rem; line-height: 0.3rem; color: #fff; margin-left: 0.14rem; } .cxq-c { width: 100%; background: #fff; margin-top: 0.5rem; padding: 0.55rem 0.3rem 0.9rem 0.3rem; position: relative; font-size: 14px; } .cxq-c1 { width: 100%; } .cxq-c2 { width: 100%; height: 3.9rem; background: #f6f6f6; position: relative; } .cxq-c2>img { height: 2.25rem; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .cxq-c3 { width: 100%; padding: 0.6rem 0 0 0; } .cxq-c31 { font-size: 0.4rem; line-height: 0.4rem; font-weight: bold; } .cxq-c32 { font-size: 0.24rem; line-height: 0.4rem; color: #757575; margin-top: 0.2rem; } .cxq-c33 { width: 100%; height: 0.01rem; background: #eeeeee; margin-top: 0.33rem; } .cxq-c34 { font-size: 0.24rem; line-height: 0.4rem; color: #454545; margin-top: 0.4rem; } .cxq-c34>span { font-weight: bold; } .cxq-c35 { font-size: 0.24rem; line-height: 0.4rem; color: #757575; margin-top: 0.27rem; } .cxq-c4 { width: 100%; margin-top: 0.86rem; font-size: 0.24rem; line-height: 0.4rem; color: #454545; padding-bottom: 1.9rem; border-bottom: 1px solid #e0e0e0; } .cxq-c5 { width: 100%; margin-top: 0.5rem; } .cxq-c51 { width: 0.2rem; height: 0.28rem; float: left; } .cxq-c5>.cxq-c51:nth-child(2) { float: right; } .cxq-d { width: 100%; margin-top: 0.65rem; padding-bottom: 1rem; margin-bottom: 1.5rem; } .cxq-d1 { font-size: 0.3rem; line-height: 0.3rem; font-weight: bold; margin-bottom: 0.65rem; } .cxq-d2 { width: 100%; position: relative; } .cxq-d .ind3-swi { width: 100%; } .cxq-d21 { width: 100%; height: 3.5rem; background: #fff; position: relative; } .cxq-d21>img { height: 2.25rem; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; transition: 0.5s; } .cxq-d22 { font-size: 0.3rem; line-height: 0.3rem; font-weight: bold; margin-top: 0.57rem; } .cxq-d23 { font-size: 0.24rem; line-height: 0.24rem; color: #757575; margin-top: 0.23rem; } .cxq-t1 { font-size: 16px; line-height: 1.6; font-weight: bold; text-align: center; } .cxq-t2 { display: flex; align-items: center; justify-content: center; margin-top: 0.5rem; padding-bottom: 0.5rem; border-bottom: 0.01rem solid #eeeeee; } .cxq-t21 { font-size: 0.24rem; line-height: 0.24rem; color: #757575; position: relative; } .cxq-t22 { font-size: 0.24rem; line-height: 0.24rem; color: #757575; margin: 0 0.1rem; } .cxq-t3 { font-size: 14px; line-height: 1.6; margin-top: 0.57rem; color: #454545; padding-bottom: .1rem; border-bottom: 1px solid #e0e0e0; } .cxq-t3 p { font-size: 14px; line-height: 1.6; } .cxq-t3 img { max-width: 100%; height: auto !important; display: inline-block !important; } .cxq-t5 { width: 100%; margin-top: 0.3rem; } .cxq-t51 { width: 100%; margin-top: 0.2rem; } .cxq-t51>img { width: 0.1rem; height: 0.14rem; float: left; margin-top: calc(0.26rem/2 - 0.14rem/2); display: none; } .cxq-t51>div { width: 100%; font-size: 0.24rem; line-height: 0.24rem; color: #454545; float: left; } } @media only screen and (min-width:1024px) { .ss { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99; background: #188947; display: none; } .ss1 { width: 100%; height: 115px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); position: relative; } .ss1a { height: 56px; position: absolute; left: 50px; top: calc(50% - 56px/2); } .ss1b { height: 26px; position: absolute; cursor: pointer; right: 50px; top: calc(50% - 26px/2); } .ss1b: hover { transform: rotate(360deg); transition: 0.5s; } .ss2 { font-size: 70px; line-height: 70px; font-weight: bold; color: #fff; text-align: center; width: 100%; position: absolute; left: 0; top: calc(50% - 160px); transform: matrix(1, 0, 0, 1, 0, 160); opacity: 0; transition: 1s; } .ss3 { width: 800px; height: 60px; background: #fff; border-radius: 50px; position: absolute; left: calc(50% - 800px/2); top: calc(50% - 60px/2); transform: matrix(1, 0, 0, 1, 0, 160); opacity: 0; transition: 1s; } .ss31 { width: 28px; height: 27px; cursor: pointer; position: absolute; right: 33px; top: calc(50% - 27px/2); } .ss3>input { width: 100%; height: 100%; font-size: 16px; padding-left: 40px; } .ss2.on { transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1; transition: 1s; } .ss3.on { transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1; transition: 1s; } } @media only screen and (max-width: 1023px) { .ss { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99; background: #188947; display: none; } .ss1 { width: 100%; height: 1.15rem; border-bottom: 0.01rem solid rgba(255, 255, 255, 0.1); position: relative; } .ss1a { height: 0.56rem; position: absolute; left: 0.35rem; top: calc(50% - 0.56rem/2); } .ss1b { height: 0.28rem; position: absolute; cursor: pointer; right: 0.35rem; top: calc(50% - 0.28rem/2); } .ss2 { font-size: 0.7rem; line-height: 0.7rem; font-weight: bold; color: #fff; text-align: center; width: 100%; position: absolute; left: 0; top: calc(50% - 1.6rem); transform: matrix(1, 0, 0, 1, 0, 160); opacity: 0; transition: 1s; } .ss3 { width: calc(100% - 0.35rem*2); height: 0.8rem; background: #fff; border-radius: 0.5rem; position: absolute; left: 0.35rem; top: calc(50% - 0.6rem/2); transform: matrix(1, 0, 0, 1, 0, 160); opacity: 0; transition: 1s; } .ss31 { width: 0.28rem; height: 0.27rem; cursor: pointer; position: absolute; right: 0.33rem; top: calc(50% - 0.27rem/2); } .ss3>input { width: 100%; height: 100%; font-size: 0.24rem; padding-left: 0.4rem; } .ss2.on { transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1; transition: 1s; } .ss3.on { transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1; transition: 1s; } } /**/ .culture02 { background: #fff; padding-top: 0.6rem; } .wrap { width: 90%; margin-right: auto; margin-left: auto; } .culture02 .infor .tit { text-align: center; } .culture02 .content { padding: 0.6rem 0 0.4rem; } .culture02 .content .item01 { border-left: 1px solid #ebebeb; } .culture02 .content .item { float: left; width: 20%; padding-top: 0.12rem; padding-bottom: 0.45rem; height: 2.45rem; box-sizing: border-box; border-right: 1px solid #ebebeb; padding-left: 0.38rem; padding-right: 0.6rem; margin-bottom: 0.51rem; } .culture02 .content .item .icon { margin-bottom: 0.30rem; display: inline-block; transition: all .3s ease; } .culture02 .content .item .text .tit { margin-bottom: 0.08rem; transition: all .3s ease; } .culture02 .content .item .text .con { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .con15 { font-size: 15px; line-height: 1.5; color: #5d5d5d; font-family: 'he-t'; } .culture02 .content .item: hover .text .tit { color: #ee6200; display: -webkit-box; } .culture02 .content .item .text .tit { margin-bottom: 0.08rem; transition: all .3s ease; } .tit24 { font-size: 24px; line-height: 2; color: #000; } .tit36 { font-size: 36px; line-height: 2; color: #000; } @media only screen and (max-width: 480px) { .con15 { font-size: 14px; line-height: 1.5; color: #5d5d5d; font-family: 'he-t'; } .tit24 { font-size: 18px; line-height: 2; color: #000; } .tit36 { font-size: 24px; line-height: 2; color: #000; } /* ãƒâ¤ã‚â¼ã‚âãƒâ¤ã‚â¸ã…â¡ãƒâ¦ã¢â‚¬â€œã¢â‚¬â¡ãƒâ¥ã…’ã¢â‚¬â€œ */ .culture02 .content .item { position: relative; width: 100%; height: auto; border: 0; border-left: none !important; border-right: none !important; padding: 0.1rem 5% 0.1rem 1.5rem; margin-bottom: 0.2rem; } .culture02 .content .item .icon img { max-width: 64px; height: auto; vertical-align: top; -ms-interpolation-mode: bicubic; border: 0; } .culture02 .content .item .icon { position: absolute; top: 50%; left: 0; transform: translatey(-50%); width: 0.8rem; } .culture02 .content .item:nth-child(1) { border-left: 1px solid #ebebeb; } .culture02 .content .item:nth-child(4) { border-left: 1px solid #ebebeb; } .culture02 .content .item:nth-child(7) { border-left: 1px solid #ebebeb; } .culture01 .item .content .intro_item_lr .img_box { width: 100%; } .culture01 .item .content .intro_item_lr .intro_box { width: 100%; } } @media only screen and (max-width: 1441px) { .culture02 .content .item { /* padding: 0.1rem 2% 0; */ } .culture02 .content .item .icon { margin-bottom: 0.2rem; } } .btwood { background: ; background-position: center top; background-repeat: no-repeat; width: 500px; height: 370px; position: absolute; top: 580px; left: 0; } .ind2-b3.down { height: 600px; position: absolute; top: 500px; left: 0; z-index: -1; overflow: hidden; opacity: 1; } .ind2-b3.shang { height: 450px !important; position: absolute; top: 2300px !important; right: 0px !important; z-index: -1; overflow: hidden; opacity: 1; } .titlebox.center { text-align: center; border-left: none; border-bottom: 1px solid #e5e5e5; padding-bottom: 25px; } .titlebox.center h2::before { width: 52px; height: 1px; bottom: -25px; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .titlebox { position: relative; padding-left: 20px; padding-right: 20px; margin-bottom: 40px; border-left: 1px solid rgb(229, 229, 229); } .titlebox h2 { font-weight: 300; font-size: 24px; color: rgb(89, 89, 89); letter-spacing: 0.05em; line-height: 1; } .titlebox h2::before { content: ""; width: 1px; height: 25px; display: block; position: absolute; bottom: 0px; left: -1px; background: rgb(127, 175, 117); } .center-img { display: flex; justify-content: center; align-items: center; } .toptitle { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: .35rem; } .toptitle .titlebox { width: 300px } .toptitle .classrowbox { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1 } @media(max-width: 1023px) { .toptitle { display: block } } .classrowbox { position: relative; z-index: 10; margin-bottom: 20px; padding: 0; border-bottom: 1px solid #e0e0e0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end } .classrowbox>ul { -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex } @media(max-width: 1023px) { .classrowbox>ul { display: none } } .classrowbox>ul a { display: block; padding: 15px 25px; font-size: 15px; color: #595959; position: relative } .classrowbox>ul a::after { content: ""; width: 0px; height: 1px; display: block; position: absolute; left: 50%; bottom: -1px; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); background: #188947; -webkit-transition: .9s; transition: .9s } .classrowbox>ul a.current { color: #188947 } .classrowbox>ul a.current::after { width: 52px } .classrowbox>ul a:hover { color: #188947 } .classcolumnbox { position: relative; z-index: 3 } @media(max-width: 1023px) { .classcolumnbox>ul { display: none } } .classcolumnbox>ul>li>a { padding-top: 10px; padding-bottom: 10px; color: #010101 } .classcolumnbox>ul ul { display: none; margin-bottom: 30px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc } .classcolumnbox>ul ul li li { border-top: 1px solid #ccc } .classcolumnbox>ul a { position: relative; display: block; padding-top: 5px; padding-bottom: 5px; font-size: 14px; color: #777 } .classcolumnbox>ul a.current, .classcolumnbox>ul a:hover { color: #188947 } .classcolumnbox>ul .linkhasitems.open ul { display: block } .classcolumnbox>ul .linkhasitems.open ul>li { -webkit-animation: .5s anislideleft both ease-out .3s; animation: .5s anislideleft both ease-out .3s } .mclasslink { position: relative; z-index: 3; width: 100%; text-align: center } @media(min-width: 1024px) { .mclasslink { display: none } } .mclasslink.open>ul { display: block } .mclasslink .main { position: relative; display: block; font-size: 16px; padding: 10px 30px 10px 10px; color: #fff; letter-spacing: 1px; cursor: pointer; background-color: #188947 } .mclasslink .main:: before { content: "ãƒæ’ã‚â¯ãƒâ¢ã¢â€šâ¬ã…â¾ãƒâ¢ã¢â€šâ¬ã‚â¡"; position: absolute; right: 15px; top: 50%; z-index: 1; margin-top: -6px; line-height: 1; font-size: 15px; color: #fff; font-family: fontawesome } .mclasslink>ul { position: absolute; left: 0; top: calc(100% - 1px); z-index: 1; display: none; width: 100%; background-color: #fff; -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .1); box-shadow: 0 5px 15px rgba(0, 0, 0, .1) } .mclasslink>ul>li li { border-top: 1px solid #f2f2f2 } .mclasslink>ul>li.current>a { color: #188947 } .mclasslink>ul a { position: relative; z-index: 1; display: block; padding: 14px 20px; color: #000; font-size: 14px; background-color: #fff } .mclasslink ul { display: none } .mclasslink .linkhasitems { position: relative; padding-right: 40px } .mclasslink .linkhasitems:: after { content: "ãƒæ’ã‚â¯ãƒâ¢ã¢â€šâ¬ã…â¾ãƒâ¢ã¢â€šâ¬ã‚â¡"; position: absolute; top: 50%; right: 17px; z-index: 1; line-height: 1; margin-top: -7px; font-family: fontawesome } .mclasslink .linkhasitems.open:: after { -webkit-transform: rotatex(180deg); transform: rotatex(180deg) } .mclasslink .linkhasitems.open ul { display: block } .mclasslink .linkhasitems ul { background-color: #efefef } .mclasslink .linkhasitems ul a { padding: 10px 5px 10px 30px; background-color: #efefef } .mclasslink .linkhasitems ul a.current { color: #188947 } .index-product .more-1 { margin-top: 6%; } .index-product .more-1 a { display: block; width: 120px; height: 35px; line-height: 34px; font-size: 0; overflow: hidden; position: relative; text-align: center; border: 1px solid #188947; border-radius: 10px; } .index-product .more-1 span { color: #188947; font-size: 13px; } .index-product .more-1 i { display: inline-block; width: 7px; height: 10px; background: center no-repeat; margin-left: 10px; } .index-product .more-1 a:hover { background: #188947; border: 1px solid #188947; } .index-product .more-1 a:hover span { color: #fff; } .index-product .more-1 a:hover i { background: center no-repeat; } .index-product {} .index-content {} .index-product-list { position: relative; overflow: hidden; } .index-product-top { overflow: hidden; position: relative; display: grid; grid-template-columns: .4fr .4fr .4fr; gap: .25rem .25rem; } .index-product-top .index-product-item .text { left: 0; top: 10%; transform: none; padding: 5% 10%; } .index-product-top .index-product-item .more-1 a {} .index-product-down { display: grid; grid-template-columns: .5fr .5fr; gap: .25rem; } .index-product-item { position: relative; margin-bottom: 4%; overflow: hidden; } .index-product-item .img { background: #f8f8f8; border-radius: 10px; transition: all .4s ease; } .index-product-item * { transition: all .4s ease; } .index-product-item .text { position: absolute; left: 8%; top: 50%; width: 100%; text-align: left; z-index: 11; transform: translatey(-50%); } .index-product-item .text-1 { font-weight: 400; color: #999999; } .index-product-item .title-1 { margin-top: 1%; font-size: 22px !important; line-height: 1.8; } .index-product-item .text-2 { font-weight: 300; font-size: 14px; line-height: 1.8; } .index-product-item .more-1 { margin-top: 20px; } .index-product-item .product { position: absolute; right: 0; top: 0; z-index: 1; width: 50%; height: 100%; overflow: hidden; } .index-product-item .product img.img-block { height: 100%; } .index-product-item: hover { background: #e9fff2; box-shadow: 8px 8px 20px 0px rgb(94 94 94 / 12%), -8px -8px 20px #fff; border-radius: 10px; } .index-product-item: hover .img { /* background: #d1d2d4a8; */ /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); */ } .index-product-item: hover .text-1 { color: #8bd1bf; } .index-product-item: hover .title-1 { /* color: #fff; */ } .index-product-item: hover .text-2 { /* color: #fff; */ } .index-product-item: hover .more-1 a { background: #188947; border: 1px solid #188947; } .index-product-item: hover .more-1 span { color: #fff; } .index-product-item: hover .more-1 i { background: center no-repeat; } .index-product-top .img .pic { margin: 10% 4% !important; width: 50%; float: right; padding: 10% 1% 0% 2% !important; } .rm .index-product-top .img .pic { margin: 0% 4% 10% 4% !important; width: 50%; float: right; padding: 10% 1% 0% 2% !important; } .index-product-down .img .pic { margin: 5% 1%; width: 50%; float: right; padding: 10% 1% 0% 1%; } .ab3 .ind5-t { position: absolute; left: 0; width: 100%; top: calc(1200px*147/1360); } .ab3-a { width: 1200px; height: 100%; position: absolute; left: calc(50% - 1200px/2); top: 0; display: table; } .ab3-all { display: table-cell; vertical-align: middle; } .ab3-back { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .ab3-a1 { font-size: calc(1200px*36/1360); line-height: calc(1200px*36/1360); color: #565656; font-weight: bold; } .ab3-a2 { font-size: 14px; line-height: 32px; color: #565656; margin-top: 10%; float: left; width: 33%; } } @media only screen and (max-width: 1023px) { .titlebox { position: relative; padding-left: 20px; padding-right: 20px; margin-bottom: 40px; border-left: 1px solid rgb(229, 229, 229); } .index-product-top { overflow: hidden; position: relative; display: block !important; grid-template-columns: .4fr .4fr .4fr !important; gap: .25rem .25rem !important; } .index-product-top .index-product-item .text { left: 0px; top: 10% !important; transform: none; padding: 0% 6% !important; } .index-product-item .title-1 { margin-top: 12px !important; font-size: 20px !important; line-height: 1.8; } .index-product-down { display: block !important; grid-template-columns: .5fr .5fr; gap: .25rem; } .index-product .more-1 span { color: #188947; font-size: 12px !important; } .index-product .more-1 a { display: block; width: 100px !important; height: 30px !important; line-height: 30px !important; font-size: 0; overflow: hidden; position: relative; text-align: center; border: 1px solid #188947; border-radius: 10px; } .index-product-top .img .pic { margin: 5% 1% 4% 1% !important; width: 50%; float: right; padding: 5% 3% 1% !important; } .index-product-item .text-2 { font-weight: 300; font-size: 13px !important; line-height: 1.8; } .index-product-down .img .pic { margin: 5% 1% !important; width: 50%; float: right; padding: 5% 0% 0% 4% !important; } .index-product-item .more-1 { margin-top: 10px !important; } .page { width: 100%; margin: 0 auto; padding: 20px 10px 20px !important; position: relative; text-align: center; } .n_tt2 { text-align: center; margin-bottom: .125rem; } .n_tt2 i { display: block; font-size: 70px; font-family: yumow04; height: .9rem; overflow: hidden; color: #188947; letter-spacing: 4px; font-weight: 700; } .ky1-a i { display: block; font-size: 70px; height: 1rem; overflow: hidden; color: #188947; letter-spacing: 0px; font-weight: 700; } .n_tt2 span { font-size: 22px; color: #010101; display: block; font-family: yumow04; text-transform: uppercase; margin-top: .25rem; /* font-weight: 700; */ } .n_tt2 h3 { font-size: 22px; color: #343635; margin-top: .1rem; } .n_tt2 p { font-size: 1rem; color: rgba(0, 0, 0, 0.7); margin-top: 2.375rem; line-height: 1.5; } .ab1 { width: 100%; padding: 1.5rem 0 1.95rem 0; position: relative; background: url(/uploads/image/stmimages/a46.jpg) no-repeat 100% 100%; } .ab1-a { width: calc(100% - 0.3rem*2); margin: 0 auto; position: relative; } .ab1-a1 { width: 4.01rem; margin: 0 auto; display: none; } .ab1-a2 { width: 100%; } .ab1-a31 { font-size: 0.96rem; line-height: 0.96rem; color: #5e5e5e; /*font-family: 'dinr';*/ } .ab1-a31>span { font-family: yumow04; } .ab1-a32 { width: max-content; font-size: 0.32rem; font-weight: bold; line-height: 0.32rem; margin-top: 0.38rem; background: linear-gradient(68deg, #188947, #388d93); -webkit-background-clip: text; color: transparent; } .ab1-a33 { font-size: 0.26rem; line-height: 0.42rem; color: #565656; margin-top: 0.4rem; } .ab1-b1 { height: 3.73rem; position: absolute; left: 0; top: 0; } .ab2 { width: 100%; background: #ecf1f5; padding: .5rem 0 1.5rem 0; overflow: hidden; } .ab2-a { width: calc(100% - 0.3rem*2); margin: 0 auto; margin-top: .3rem; position: relative; padding-bottom: .7rem; } .ab2-a.one { width: calc(100% - 0.3rem*2); margin: 0 auto; margin-top: 1.1rem; position: relative; padding-bottom: 0rem; } .ab2-all { width: 100%; height: 3.4rem; position: relative; } .ab2-swi { width: 100%; height: 3.4rem; } .ab2-a1 { width: 100%; height: 100%; background: #fff; padding: 0.37rem 0.35rem; } .ab2-a2 { width: 40%; height: 100%; float: left; display: flex; justify-content: center; align-items: center; } .ab2-a2>img { width: 100%; transition: 0.5s; } .ab2-a3 { width: 52%; float: left; margin-left: 0.4rem; padding-top: 0.55rem; } .ab2-a31 { font-size: 0.26rem; line-height: 0.26rem; color: #454545; margin-bottom: 10px; } .ab2-a31>span { font-family: yumow04; font-size: 0.5rem; margin-right: 0.2rem; transition: 0.5s; } .ab2-a32 { font-size: 0.24rem; line-height: 0.3rem; color: #454545; margin-top: 0.23rem; } .ab2-a32 .icon { float: left; width: 20px; margin-right: 10px; } .ab2-a32 span { font-size: 16px; line-height: 1.4; color: #454545; } .ab3 { width: 100%; height: auto; position: relative; padding: 1rem 0 .5rem 0; } .ab3 .ind5-t { width: 100%; margin: 1.1rem 0 1rem 0; } .ab3-a { width: calc(100% - 0.4rem*2); margin: 0 auto; position: relative; margin-top: 1rem; } .ab3-back { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .ab3-back>img { height: 100%; width: auto; position: absolute; left: 50%; transform: translatex(-50%); } .ab3-a1 { font-size: 0.36rem; line-height: 0.36rem; color: #565656; font-weight: bold; } .ab3-a2 { font-size: 14px; line-height: 2; color: #565656; margin-top: 0; } } /* ãƒâ§ã‚â§ã¢â‚¬ëœãƒâ§ã‚â ã¢â‚¬âãƒâ¤ã‚â¸ã‚â­ãƒâ¥ã‚â¿ã†â€™ */ .ky1.clear { background: url(/uploads/image/stmimages/loadingbg.png); background-repeat: no-repeat; background-position: 850px 600px; } @media only screen and (min-width: 1640px) { .ky1 { width: 1360px; padding: 120px 0 100px 0; margin: 0 auto; position: relative; } .ky1-a { width: 54%; float: left; } .ky1-a1 { font-size: 38px; line-height: 1.5; color: #404142; text-transform: uppercase; font-weight: 100; } .ky1-a1>span { font-family: yumow04; } .ky1-a2 { width: max-content; font-size: 38px; line-height: 1.2; font-weight: bold; margin-top: 0; background: linear-gradient(68deg, #188947, #378d94); -webkit-background-clip: text; color: transparent; } .ky1-a3.two { width: 100%; float: left; margin-top: .2%; } .ky1-a3 p { font-size: 15px; line-height: 2; color: #565656; margin-top: 10px; } .ky1-a3 em::before { content: '-'; margin-right: 0.8em; } .ky1-a3 p span { color: #188947; font-weight: 400; } .ky1-a3 { font-size: 14px; line-height: 2; color: #565656; margin-top: 40px; } .ky1-b { float: right; width: 36%; display: flex; flex-wrap: wrap; flex-direction: row; } .ky1-b1 { height: 206px; padding-left: 40px; position: relative; padding-top: 0%; width: 50%; } .ky1-b>.ky1-b1:first-child { margin-top: 1.2rem; } .ky1-b>.ky1-b1:nth-child(4) { margin-top: -1.4rem; /* padding-left: 0px; */ } .ky1-b>.ky1-b1:nth-child(6) { margin-top: -1.5rem; /* padding-left: 0.21rem; */ } .ky1-b>.ky1-b1:last-child { margin-top: 1.2rem; } .ky1-b1a { width: 1px; height: 100%; background: #eeeeee; position: absolute; left: 0; top: 0; } .ky1-b1a>div { width: 3px; height: 40px; background: #188947; position: absolute; left: -1px; top: 40px; } .ky1-b1b { line-height: 90px; background: #188947; -webkit-background-clip: text; color: transparent; width: max-content; position: relative; font-family: impact; font-size: 0.45rem; letter-spacing: 0; } .ky1-b1b>span { font-size: 13px; line-height: 18px; background: none; color: #333333; position: absolute; left: calc(100% 5px); top: 10px; width: max-content; font-weight: 400; font-family: 'oswald'; } .ky1-b1c { font-size: 15px; line-height: 0; margin-top: 4px; padding-left: 10px; letter-spacing: 1px; color: #686868; } .ky2 { width: 100%; padding: 75px 0 240px 0; position: relative; background: #188947; } .ky2-t>div:nth-child(1) { font-size: 42px; line-height: 42px; color: #fff; text-align: center; font-family: 'oswald'; } .ky2-t>div:nth-child(2) { font-size: 36px; line-height: 36px; color: #fff; font-weight: bold; text-align: center; margin-top: 25px; } .ky2-a { width: 1360px; font-size: 0; margin: 0 auto; margin-top: 95px; padding: 0 55px; position: relative; } .ky2-a1 { width: calc(50% - 70px); float: left; cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, 0.18); margin-right: 140px; } .ky2-a>.ky2-a1:nth-child(2n) { float: right; margin-right: 0; } .ky2-a>.ky2-a1:nth-child(1), .ky2-a>.ky2-a1:nth-child(2) { border-top: 1px solid rgba(255, 255, 255, 0.18); } .ky2-a2 { width: 100%; height: 100px; position: relative; } .ky2-a2>div:nth-child(1) { font-size: 24px; line-height: 100px; color: #fff; float: left; font-family: yumow04; margin-right: 15px; } .ky2-a2>div:nth-child(2) { font-size: 20px; line-height: 100px; font-weight: bold; color: #fff; float: left; } .ky2-a2>div:nth-child(3) { width: 18px; height: 13px; position: absolute; right: 0; top: calc(50% - 13px/2); transition: 0.5s; } .ky2-a3 p { padding: 0 17px 0 43px; font-size: 18px; } .ky2-a3 { padding: 0 17px 0 43px; font-size: 18px; line-height: 30px; color: #fff; padding-bottom: 18px; display: none; } .ky2-a1.on .ky2-a2>div:nth-child(3) { transform: rotate(-90deg); transition: 0.5s; } .ky2-b { width: 100%; position: absolute; bottom: 0; left: 0; } .ky3 { width: 100%; padding: 118px 0 218px 0; overflow: hidden; } .ky3-a { width: 1360px; height: 570px; margin: 0 auto; margin-top: 122px; position: relative; } .ky3-swi { width: 1760px; height: 570px; position: absolute; left: 0; top: 0; } .ky3-swi .swiper-slide { width: 640px; height: 425px; transform: translatey(145px); transition: 0.5s; } .ky3-swi .swiper-slide-active { width: 862px; height: 570px; transform: translatey(0); transition: 0.5s; } .ky3-a1 { width: 100%; height: 100%; position: relative; } .ky3-a2 { position: absolute; left: 35px; top: 35px; } .ky3-a21 { font-size: 36px; line-height: 36px; color: #fff; font-family: 'oswald'; } .ky3-a22 { width: 84px; height: 1px; background: rgba(255, 255, 255, 0.47); margin-top: 17px; } .ky3-a23 { font-size: 16px; line-height: 16px; color: #fff; margin-top: 13px; text-transform: uppercase; } .ky3-a3 { position: absolute; width: 100%; height: 263px; background-size: 100% 100%; left: 0; bottom: 0; transition: 0.5s; } .ky3-a31 { width: calc(100% - 47px*2); left: 47px; bottom: 40px; position: absolute; } .ky3-a31>div:nth-child(1) { font-size: 24px; line-height: 24px; color: #fff; font-weight: bold; } .ky3-a31>div:nth-child(2) { font-size: 18px; line-height: 36px; color: #fff; margin-top: 15px; opacity: 0; display: none; transition: 0.5s; } .swiper-slide-active .ky3-a3 { background: url(/uploads/image/stmimages/a53.png) no-repeat; transition: 0.5s; } .swiper-slide-active .ky3-a31>div:nth-child(2) { opacity: 1; display: block; transition: 0.5s; } .ky3-line { width: 1px; height: calc(570px - 65px*2); position: absolute; left: calc(862px (263px/2)); top: 65px; background: linear-gradient(to bottom, rgba(193, 193, 193, 0.3), rgba(193, 193, 193, 1), rgba(193, 193, 193, 0.3)); } .ky4 { width: 100%; background: #fafafa; padding: 105px 0; position: relative; } .ky4-all { width: 1360px; margin: 0 auto; position: relative; } .ky4-a { width: 845px; /* background: #fff; */ padding: 20px 27px 20px 42px; height: 650px; float: left; } .ky4-a1 { width: 100%; height: 100%; padding-right: 75px; overflow: hidden; overflow-y: auto; } .ky4-a1::-webkit-scrollbar { width: 4px; background: #eeeeee; } .ky4-a1::-webkit-scrollbar-thumb { width: 4px; background: #188947; } .ky4-a2 { width: 100%; border-bottom: 1px solid #eeeeee; cursor: pointer; } .ky4-a21:hover { background: #1889472b; color: #000000; box-shadow: rgb(0 153 55 / 5%) 0px 0px 15px 7px; } .ky4-a21 i { height: auto; width: 1px; background: #e1e2e5; display: block; transition: all .5s; } .ky4-a21 { width: 100%; height: 50px; position: relative; } .ky4-a21a { font-size: 15px; line-height: 3.2; color: #3d3d3d; float: left; font-family: yumow04; margin-right: 5px; padding: 0 .3rem 0; } .ky4-a21b { font-size: 15px; line-height: 3.2; font-weight: 500; float: left; } .ky4-a21c { width: 15px; height: 10px; position: absolute; top: calc(50% - 13px/2); right: 5%; transition: 0.5s; } .ky4-a21c:hover h4, .ky4-a21a:hover, .ky4-a21b:hover { /* color: #fff; */ } .ky4-a22 { width: 100%; padding: 10px 0 40px 105px; display: none; } .ky4-a22>div { float: left; width: 268px; } .ky4-a2.on .ky4-a21c { transform: rotate(180deg); transition: 0.5s; } .ky4-b1 { width: 590px; background: #fff; height: 100%; position: absolute; right: 0; top: 0; } .ky4-b2 { width: 100px; position: absolute; right: calc(50% - 1360px/2 - 34px); top: 32px; } .ky4-b3 { font-size: 38px; line-height: 45px; font-weight: bold; background: linear-gradient(68deg, #188947, #388d93); -webkit-background-clip: text; color: transparent; height: max-content; width: 36px; position: absolute; top: 32px; right: calc(50% - 1360px/2 100px); } .ky4-b4 { width: 406px; position: absolute; top: calc(105px (650px/2 - 514px/2)); right: calc(50% - 1360px/2 225px); } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .ky1 { width: 1200px; padding: 100px 0; margin: 0 auto; position: relative; } .ky1-a { width: 58%; float: left; } .ky1-a1 { text-transform: uppercase; font-size: 38px; line-height: 60px; color: #404142; text-transform: uppercase; font-weight: 200; } .ky1-a1>span { font-family: yumow04; } .ky1-a2 { width: max-content; font-size: 36px; line-height: 1; font-weight: bold; margin-top: calc(1200px*30/1360); background: linear-gradient(68deg, #188947, #388d93); -webkit-background-clip: text; color: transparent; } .ky1-a3 { font-size: calc(1200px*16/1360); line-height: calc(1200px*42/1360); color: #565656; margin-top: calc(1200px*64/1360); } .ky1-a3.two { width: 100%; float: left; margin-top: .2%; } .ky1-a3 p { font-size: 15px; line-height: 2; color: #565656; margin-top: 10px; } .ky1-a3 em::before { content: '-'; margin-right: 0.8em; } .ky1-a3 p span { color: #188947; font-weight: bold; } .ky1-b { float: right; width: 35%; display: flex; justify-content: space-between; flex-wrap: wrap; } .ky1-b>.ky1-b1:nth-child(4) { margin-top: -.5rem; } .ky1-b>.ky1-b1:nth-child(6) { margin-top: -.5rem; } .ky1-b1 { height: 216px; padding-left: 60px; position: relative; padding-top: 15%; width: 50%; } .ky1-b>.ky1-b1:first-child { margin-top: calc(1200px*60/1360); } .ky1-b>.ky1-b1:last-child { margin-top: calc(1200px*-60/1360); } .ky1-b1a { width: 1px; height: 100%; background: #eeeeee; position: absolute; left: 0; top: 0; } .ky1-b1a>div { width: calc(1200px*3/1360); height: calc(1200px*40/1360); background: #188947; position: absolute; left: -1px; top: 40%; } .ky1-b1b { font-size: calc(1200px*90/1360); line-height: calc(1200px*90/1360); background: #188947; -webkit-background-clip: text; color: transparent; width: max-content; font-family: 'oswald'; font-family: impact; font-size: 0.45rem; position: relative; } .ky1-b1b>span { font-size: 14px; line-height: calc(1200px*18/1360); background: none; color: #333333; position: absolute; left: calc(100% (1200px*10/1360)); top: calc(1200px*10/1360); width: max-content; } .ky1-b1c { font-size: 14px; line-height: 1; margin-top: 10px; padding-left: calc(1200px*10/1360); color: #686868; } .ky2 { width: 100%; padding: calc(1200px*75/1360) 0 calc(1200px*240/1360) 0; position: relative; background: #188947; } .ky2-t>div:nth-child(1) { font-size: calc(1200px*42/1360); line-height: calc(1200px*42/1360); color: #fff; text-align: center; font-family: 'oswald'; } .ky2-t>div:nth-child(2) { font-size: calc(1200px*36/1360); line-height: calc(1200px*36/1360); color: #fff; font-weight: bold; text-align: center; margin-top: calc(1200px*25/1360); } .ky2-a { width: 1200px; font-size: 0; margin: 0 auto; margin-top: calc(1200px*95/1360); padding: 0 calc(1200px*55/1360); position: relative; } .ky2-a1 { width: calc(50% - (1200px*70/1360)); float: left; cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, 0.18); margin-right: calc(1200px*140/1360); } .ky2-a>.ky2-a1:nth-child(2n) { float: right; margin-right: 0; } .ky2-a>.ky2-a1:nth-child(1), .ky2-a>.ky2-a1:nth-child(2) { border-top: 1px solid rgba(255, 255, 255, 0.18); } .ky2-a2 { width: 100%; height: calc(1200px*100/1360); position: relative; } .ky2-a2>div:nth-child(1) { font-size: calc(1200px*24/1360); line-height: calc(1200px*100/1360); color: #fff; float: left; font-family: yumow04; margin-right: calc(1200px*15/1360); } .ky2-a2>div:nth-child(2) { font-size: calc(1200px*20/1360); line-height: calc(1200px*100/1360); font-weight: bold; color: #fff; float: left; } .ky2-a2>div:nth-child(3) { width: calc(1200px*18/1360); height: calc(1200px*13/1360); position: absolute; right: 0; top: calc(50% - (1200px*13/1360)/2); transition: 0.5s; } .ky2-a3 { padding: 0 calc(1200px*17/1360) 0 calc(1200px*43/1360); font-size: calc(1200px*18/1360); line-height: calc(1200px*30/1360); color: #fff; padding-bottom: calc(1200px*18/1360); display: none; } .ky2-a1.on .ky2-a2>div:nth-child(3) { transform: rotate(-90deg); transition: 0.5s; } .ky2-b { width: 100%; position: absolute; bottom: 0; left: 0; } .ky3 { width: 100%; padding: calc(1200px*118/1360) 0 calc(1200px*218/1360) 0; overflow: hidden; } .ky3-a { width: 1200px; height: calc(1200px*570/1360); margin: 0 auto; margin-top: calc(1200px*122/1360); position: relative; } .ky3-swi { width: calc(1200px*1760/1360); height: calc(1200px*570/1360); position: absolute; left: 0; top: 0; } .ky3-swi .swiper-slide { width: calc(1200px*640/1360); height: calc(1200px*425/1360); transform: translatey(calc(1200px*145/1360)); transition: 0.5s; } .ky3-swi .swiper-slide-active { width: calc(1200px*862/1360); height: calc(1200px*570/1360); transform: translatey(0); transition: 0.5s; } .ky3-a1 { width: 100%; height: 100%; position: relative; } .ky3-a2 { position: absolute; left: calc(1200px*35/1360); top: calc(1200px*35/1360); } .ky3-a21 { font-size: calc(1200px*36/1360); line-height: calc(1200px*36/1360); color: #fff; font-family: 'oswald'; } .ky3-a22 { width: calc(1200px*84/1360); height: 1px; background: rgba(255, 255, 255, 0.47); margin-top: calc(1200px*17/1360); } .ky3-a23 { font-size: calc(1200px*16/1360); line-height: calc(1200px*16/1360); color: #fff; margin-top: calc(1200px*13/1360); text-transform: uppercase; } .ky3-a3 { position: absolute; width: 100%; height: calc(1200px*263/1360); background-size: 100% 100%; left: 0; bottom: 0; transition: 0.5s; } .ky3-a31 { width: calc(100% - (1200px*47/1360)*2); left: calc(1200px*47/1360); bottom: calc(1200px*40/1360); position: absolute; } .ky3-a31>div:nth-child(1) { font-size: calc(1200px*24/1360); line-height: calc(1200px*24/1360); color: #fff; font-weight: bold; } .ky3-a31>div:nth-child(2) { font-size: calc(1200px*18/1360); line-height: calc(1200px*36/1360); color: #fff; margin-top: calc(1200px*15/1360); opacity: 0; display: none; transition: 0.5s; } .swiper-slide-active .ky3-a3 { background: url(/uploads/image/stmimages/a53.png) no-repeat; transition: 0.5s; } .swiper-slide-active .ky3-a31>div:nth-child(2) { opacity: 1; display: block; transition: 0.5s; } .ky3-line { width: 1px; height: calc((1200px*570/1360) - (1200px*65/1360)*2); position: absolute; left: calc((1200px*862/1360) ((1200px*263/1360)/2)); top: calc(1200px*65/1360); background: linear-gradient(to bottom, rgba(193, 193, 193, 0.3), rgba(193, 193, 193, 1), rgba(193, 193, 193, 0.3)); } .ky4 { width: 100%; background: #fafafa; padding: calc(1200px*105/1360) 0; position: relative; } .ky4-all { width: 1200px; margin: 0 auto; position: relative; } .ky4-a { width: calc(1200px*845/1360); /*! background: #fff; */ padding: calc(1200px*20/1360) calc(1200px*27/1360) calc(1200px*20/1360) calc(1200px*42/1360); height: calc(1200px*650/1360); float: left; } .ky4-a1 { width: 100%; height: 100%; padding-right: calc(1200px*75/1360); overflow: hidden; overflow-y: auto; } .ky4-a1::-webkit-scrollbar { width: 3px; background: #eeeeee; } .ky4-a1::-webkit-scrollbar-thumb { width: 3px; background: #188947; } .ky4-a2 { width: 100%; border-bottom: 1px solid #eeeeee; cursor: pointer; } .ky4-a21 { width: 100%; height: 50px; position: relative; } .ky4-a21a { font-size: 14px; line-height: 50px; color: #222; float: left; font-family: yumow04; margin-right: calc(1200px*45/1360); } .ky4-a21b { font-size: 14px; line-height: 50px; font-weight: 500; float: left; } .ky4-a21c { width: calc(1200px*20/1360); height: calc(1200px*13/1360); position: absolute; top: calc(50% - (1200px*13/1360)/2); right: 0; transition: 0.5s; } .ky4-a22 { width: 100%; padding: calc(1200px*10/1360) 0 calc(1200px*40/1360) calc(1200px*105/1360); display: none; } .ky4-a22>div { float: left; width: calc(1200px*268/1360); } .ky4-a2.on .ky4-a21c { transform: rotate(180deg); transition: 0.5s; } .ky4-b1 { width: calc(1200px*590/1360); background: #fff; height: 100%; position: absolute; right: 0; top: 0; } .ky4-b2 { width: calc(1200px*100/1360); position: absolute; right: calc(50% - 1200px/2 - (1200px*34/1360)); top: calc(1200px*32/1360); } .ky4-b3 { font-size: 36px; line-height: 1.2; font-weight: bold; background: linear-gradient(68deg, #188947, #388d93); -webkit-background-clip: text; color: transparent; height: max-content; width: 50px; position: absolute; top: 4%; right: 19%; } .ky4-b4 { width: calc(1200px*406/1360); position: absolute; top: calc((1200px*105/1360) ((1200px*650/1360)/2 - (1200px*514/1360)/2)); right: calc(50% - 1200px/2 (1200px*225/1360)); } } @media only screen and (max-width: 1023px) { .ky1 { width: calc(100% - 0.4rem*2); padding: 0.8rem 0; margin: 0 auto; position: relative; } .ky1-a { width: 100%; } .ky1-a1 { font-size: 0.5rem; line-height: 0.65rem; color: #5e5e5e; /*font-family: 'dinr';*/ text-transform: uppercase; } .ky1-a1>span { font-family: yumow04; } .ky1-a2 { width: max-content; font-size: 26px; line-height: 1; font-weight: bold; margin-top: 0.3rem; background: linear-gradient(68deg, #188947, #388d93); -webkit-background-clip: text; color: transparent; } .ky1-a3 { font-size: 0.24rem; line-height: 0.5rem; color: #565656; margin-top: 0.5rem; } .ky1-a3.two { width: 100%; float: left; margin-top: .2%; } .ky1-a3 p { font-size: 14px; line-height: 0.5rem; color: #565656; margin-top: 0.1rem; } .ky1-b { width: 100%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 0.4rem; margin: 0.22rem; } .ky1-b1 { width: 3.3rem; height: 2.16rem; padding-left: 0.6rem; position: relative; padding-top: 0.55rem; } .ky1-b>.ky1-b1:first-child { margin-top: 0rem; } .ky1-b>.ky1-b1:last-child { margin-top: 0rem; } .ky1-b1a { width: 0.01rem; height: 100%; background: #eeeeee; position: absolute; left: 0; top: 0; } .ky1-b1a>div { width: 0.03rem; height: 0.4rem; background: #188947; position: absolute; left: -0.01rem; top: 0.5rem; } .ky1-b1b { font-size: 26px; line-height: 1; background: #188947; -webkit-background-clip: text; color: transparent; width: max-content; font-family: impact; position: relative; } .ky1-b1b>span { font-size: 0.24rem; line-height: 0.24rem; background: none; color: #333333; position: absolute; left: calc(100% 0.1rem); top: -0.1rem; } .ky1-b1c { font-size: 0.24rem; line-height: 0.3rem; margin-top: 0.24rem; padding-left: 0.1rem; } .ky2 { width: 100%; padding: 0.75rem 0 2.4rem 0; position: relative; background: #188947; } .ky2-t>div:nth-child(1) { font-size: 0.42rem; line-height: 0.42rem; color: #fff; text-align: center; font-family: 'oswald'; } .ky2-t>div:nth-child(2) { font-size: 0.36rem; line-height: 0.36rem; color: #fff; font-weight: bold; text-align: center; margin-top: 0.25rem; } .ky2-a { width: calc(100% - 0.3rem*2); margin: 0 auto; margin-top: 0.95rem; padding: 0 0.55rem; position: relative; } .ky2-a1 { width: 100%; border-bottom: 0.01rem solid rgba(255, 255, 255, 0.18); } .ky2-a>.ky2-a1:nth-child(1) { border-top: 1px solid rgba(255, 255, 255, 0.18); } .ky2-a2 { width: 100%; height: 1rem; position: relative; } .ky2-a2>div:nth-child(1) { font-size: 0.3rem; line-height: 1rem; color: #fff; float: left; font-family: yumow04; margin-right: 15px; } .ky2-a2>div:nth-child(2) { font-size: 0.28rem; line-height: 1rem; font-weight: bold; color: #fff; float: left; } .ky2-a2>div:nth-child(3) { width: 0.24rem; height: 0.17rem; position: absolute; right: 0; top: calc(50% - 0.17rem/2); transition: 0.5s; } .ky2-a3 { padding: 0 0.17rem 0 0.43rem; font-size: 0.26rem; line-height: 0.4rem; color: #fff; padding-bottom: 0.18rem; display: none; } .ky2-a1.on .ky2-a2>div:nth-child(3) { transform: rotate(-90deg); transition: 0.5s; } .ky2-b { width: 100%; position: absolute; bottom: 0; left: 0; } .ky3 { width: 100%; padding: 1.18rem 0 2.18rem 0; overflow: hidden; } .ky3-a { width: calc(100% - 0.3rem*2); height: 4.5rem; margin: 0 auto; margin-top: 1.2rem; position: relative; } .ky3-swi { width: 100%; height: 4.5rem; position: absolute; left: 0; top: 0; } .ky3-a1 { width: 100%; height: 100%; position: relative; } .ky3-a2 { position: absolute; left: 0.35rem; top: 0.35rem; } .ky3-a21 { font-size: 0.36rem; line-height: 0.36rem; color: #fff; font-family: 'oswald'; } .ky3-a22 { width: 0.84rem; height: 0.01rem; background: rgba(255, 255, 255, 0.47); margin-top: 0.17rem; } .ky3-a23 { font-size: 0.24rem; line-height: 0.24rem; color: #fff; margin-top: 0.13rem; text-transform: uppercase; } .ky3-a3 { position: absolute; width: 100%; height: 2.63rem; background-size: 100% 100%; left: 0; bottom: 0; transition: 0.5s; } .ky3-a31 { width: calc(100% - 0.47rem*2); left: 0.47rem; bottom: 0.4rem; position: absolute; } .ky3-a31>div:nth-child(1) { font-size: 0.3rem; line-height: 0.3rem; color: #fff; font-weight: bold; } .ky3-a31>div:nth-child(2) { font-size: 0.26rem; line-height: 0.4rem; color: #fff; margin-top: 15px; opacity: 0; display: none; transition: 0.5s; } .swiper-slide-active .ky3-a31>div:nth-child(2) { opacity: 1; display: block; transition: 0.5s; } .ky4 { width: 100%; background: #fafafa; padding: 1.05rem 0; position: relative; } .ky4-all { width: calc(100% - 0.3rem*2); margin: 0 auto; position: relative; } .ky4-a { width: 100%; background: #fff; padding: 0.2rem 0.3rem 0.2rem 0.3rem; height: 6.5rem; } .ky4-a1 { width: 100%; height: 100%; padding-right: 0.05rem; overflow: hidden; overflow-y: auto; } .ky4-a1::-webkit-scrollbar { width: 0.04rem; background: #eeeeee; } .ky4-a1::-webkit-scrollbar-thumb { width: 0.4rem; background: #188947; } .ky4-a2 { width: 100%; border-bottom: 0.01rem solid #eeeeee; cursor: pointer; } .ky4-a21 { width: 100%; height: 1rem; position: relative; display: flex; transition: all .4s; } .ky4-a21a { font-size: 0.3rem; line-height: 1; color: #2a2929; float: left; font-family: yumow04; margin-right: 0.25rem; width: 18%; display: flex; align-items: center; } .ky4-a21b { font-size: 0.26rem; line-height: 1.5; font-weight: 500; float: left; width: 70%; display: flex; align-items: center; } .ky4-a21c { width: 0.2rem; height: 0.13rem; position: absolute; top: 50%; right: 0; transition: 0.5s; } .ky4-a22 { width: 100%; padding: 0.1rem 0 0.4rem 1.5rem; display: none; } .ky4-a22>div { float: left; width: 2.68rem; } .ky4-a2.on .ky4-a21c { transform: rotate(180deg); transition: 0.5s; } .ky4-b2 { width: 1rem; position: absolute; right: 0.64rem; top: 51%; } .ky4-b3 { font-size: 26px; line-height: 1.2; font-weight: bold; background: linear-gradient(68deg, #188947, #388d93); -webkit-background-clip: text; color: transparent; height: max-content; width: 30px; position: absolute; bottom: 26%; right: 1.8rem; } .ky4-b4 { width: 4.06rem; margin: 0.8rem 0 0 0.3rem; } } @media only screen and (min-width: 1640px) { .init-2 { padding: 100px 0; width: 1360px; margin: 0 auto; } .init-2 h3 { font-size: 30px; margin-bottom: 40px; color: #3a3a3a; } .init-2 .grid-box.two .column { margin-bottom: 50px; } .grid-box.two>.column { /* width: 50%; */ /*! float: left; */ } .grid-box.two { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; } .init-2 .grid-box.two .column h2 { font-size: 24px; color: #3a3a3a; margin-bottom: 10px; } .init-2 .grid-box.two .column p { line-height: 30px; font-size: 16px; color: #666666; } .init-3 h2.h2 { text-align: center; font-size: 30px; color: #3a3a3a; } .init-3 p.p { padding: 30px 0; font-size: 16px; text-align: center; color: #666; } .init-3 { padding: 100px 0; background: #f8f8f8; } .init-3 a.more { display: block; width: 170px; height: 52px; line-height: 22px; text-align: center; font-size: 18px; background: #188947; margin: 0 auto; color: #fff; padding: 15px; border-radius: 25px; } .init-3 a.more:hover { box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); -ms-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); -o-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); } .lx1 { width: 100%; background: #f8f8f8; height: 750px; position: relative; } .lx1-m { width: 50%; float: right; height: 100%; } .lx1-m .cont_dt { height: 750px; } .lx1-m>#map { width: 100%; height: 100%; } .lx1-a { height: 100%; display: table; position: absolute; left: calc(50% - 1360px/2 80px); top: 0; } .lx1-a1 { display: table-cell; vertical-align: middle; } .lx1-a2 { font-size: 18px; line-height: 18px; color: #555555; } .lx1-a3 { font-size: 36px; line-height: 36px; color: #555555; margin-top: 30px; font-family: 'oswald'; } .lx1-a4 { margin-top: 45px; } .lx1-a41 { width: 60px; height: 60px; border-radius: 50%; border: 1px dashed #cacaca; position: relative; float: left; margin-right: 38px; } .lx1-a4>.lx1-a41:last-child { margin-right: 0; } .lx1-a41>img { height: 24px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .lx1-a41:hover>img { transform: rotatey(360deg); transition: 0.5s; } .lx1-a41:nth-child(1) img, .lx1-a41:nth-child(2) img { height: 32px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .lx1-a41:hover img { transform: rotatey(360deg); transition: 0.5s; } .lx1-a41 img { height: 24px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .lx1-a5 { margin-top: 25px; } .lx1-a5>div { font-size: 16px; line-height: 36px; color: #686868; } .lx1-a6 { margin-top: 45px; } .lx1-a61 { width: 173px; float: left; margin-right: 45px; } .lx1-a6>.lx1-a61:last-child { margin-right: 0; } .lx1-a62 { width: 100%; height: 173px; } .lx1-a63 { font-size: 18px; line-height: 18px; color: #555555; text-align: center; margin-top: 30px; } .lx2 { width: 100%; padding: 105px 0 225px 0; background: #fff; } .lx2-t>div:nth-child(1) { font-size: 32px; line-height: 32px; font-weight: bold; text-align: center; color: #454545; } .lx2-t>div:nth-child(2) { width: 40px; height: 2px; background: #dee1e8; margin: 0 auto; margin-top: 20px; } .lx2-a { width: 1360px; margin: 0 auto; margin-top: 63px; position: relative; } .lx2-a1 { width: 100%; } .lx2-a2 { width: calc(50% - 28px); float: left; margin-right: 28px; margin-bottom: 32px; } .lx2-a1>.lx2-a2:nth-child(2n) { margin-right: 0; width: calc(50% - 0px); } .lx2-a21 { font-size: 16px; line-height: 16px; color: #454545; } .lx2-a22 { width: 100%; height: 60px; border: 1px solid #e5e5e5; margin-top: 20px; position: relative; } .lx2-a23 { width: 24px; position: absolute; top: calc(50% - 23px/2); left: 28px; } .lx2-a22>input { width: 100%; height: 100%; padding-left: 68px; font-size: 16px; } .lx2-a3 { width: 100%; } .lx2-a31 { font-size: 16px; line-height: 16px; color: #454545; } .lx2-a32 { width: 100%; height: 245px; border: 1px solid #e5e5e5; margin-top: 20px; position: relative; } .lx2-a33 { width: 24px; position: absolute; left: 28px; top: 18px; } .lx2-a32 textarea { width: 100%; height: 100%; padding-left: 70px; padding-top: 15px; font-size: 16px; line-height: 30px; } .lx2-a4 { width: 100%; margin-top: 52px; } .lx2-a41 { width: 168px; height: 60px; border: 1px solid #e5e5e5; float: left; } .lx2-a41>input { width: 100%; height: 100%; font-size: 16px; padding-left: 25px; } .lx2-a42 { width: 112px; height: 60px; float: left; } .lx2-a42 #v_container { width: 100%; height: 100%; } .lx2-a5 { width: 20%; height: 58px; background: #188947; cursor: pointer; font-size: 18px; line-height: 58px; text-align: center; color: #fff; position: absolute; bottom: -15%; right: 40%; } .lx2-a1>.lx2-a2:nth-child(2) .lx2-a23 { width: 18px; } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .init-2 { padding: 100px 0; } .init-2 h3 { font-size: 30px; margin-bottom: 20px; color: #3a3a3a; } .grid-box.two { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; } .init-2 .grid-box.two .column { margin-bottom: 70px; } .init-2 .grid-box.two .column h2 { font-size: 24px; color: #3a3a3a; margin-bottom: 10px; } .init-2 .grid-box.two .column p { line-height: 30px; font-size: 16px; color: #666666; } .init-3 h2.h2 { text-align: center; font-size: 30px; color: #3a3a3a; } .init-3 p.p { padding: 30px 0; font-size: 16px; text-align: center; color: #666; } .init-3 { padding: 100px 0; background: #f8f8f8; } .init-3 a.more { display: block; width: 170px; height: 52px; line-height: 22px; text-align: center; font-size: 18px; background: #188947; margin: 0 auto; color: #fff; padding: 15px; border-radius: 25px; } .init-3 a.more:hover { box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); -ms-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); -o-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); } .lx1 { width: 100%; background: #f8f8f8; height: calc(1360px*750/1360); position: relative; } .lx1-m { width: 50%; float: right; height: 100%; } .lx1-m .cont_dt { height: 750px; } .lx1-m>#map { width: 100%; height: 100%; } .lx1-a { height: 100%; display: table; position: absolute; left: calc(50% - 1200px/2 (1200px*80/1360)); top: 0; } .lx1-a1 { display: table-cell; vertical-align: middle; } .lx1-a2 { font-size: calc(1200px*18/1360); line-height: calc(1200px*18/1360); color: #555555; } .lx1-a3 { font-size: calc(1200px*36/1360); line-height: calc(1200px*36/1360); color: #555555; margin-top: calc(1200px*30/1360); font-family: 'oswald'; } .lx1-a4 { margin-top: calc(1200px*45/1360); } .lx1-a41 { width: calc(1200px*60/1360); height: calc(1200px*60/1360); border-radius: 50%; border: 1px dashed #cacaca; position: relative; float: left; margin-right: calc(1200px*38/1360); } .lx1-a4>.lx1-a41:last-child { margin-right: 0; } .lx1-a41>img { height: calc(1200px*24/1360); position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .lx1-a41:hover>img { transform: rotatey(360deg); transition: 0.5s; } .lx1-a5 { margin-top: calc(1200px*25/1360); } .lx1-a5>div { font-size: calc(1200px*16/1360); line-height: calc(1200px*36/1360); color: #686868; } .lx1-a6 { margin-top: calc(1200px*45/1360); } .lx1-a61 { width: calc(1200px*173/1360); float: left; margin-right: calc(1200px*45/1360); } .lx1-a6>.lx1-a61:last-child { margin-right: 0; } .lx1-a62 { width: 100%; height: calc(1200px*173/1360); } .lx1-a63 { font-size: calc(1200px*18/1360); line-height: calc(1200px*18/1360); color: #555555; text-align: center; margin-top: calc(1200px*30/1360); } .lx2 { width: 100%; padding: calc(1200px*105/1360) 0 calc(1200px*225/1360) 0; background: #fff; } .lx2-t>div:nth-child(1) { font-size: calc(1200px*32/1360); line-height: calc(1200px*32/1360); font-weight: bold; text-align: center; color: #454545; } .lx2-t>div:nth-child(2) { width: calc(1200px*40/1360); height: 2px; background: #dee1e8; margin: 0 auto; margin-top: calc(1200px*20/1360); } .lx2-a { width: 1200px; margin: 0 auto; margin-top: calc(1200px*63/1360); position: relative; } .lx2-a1 { width: 100%; } .lx2-a2 { width: calc(50% - (1200px*28/1360)); float: left; margin-right: calc(1200px*28/1360); margin-bottom: calc(1200px*32/1360); } .lx2-a1>.lx2-a2:nth-child(2n) { margin-right: 0; width: calc(50% - 0px); } .lx2-a21 { font-size: calc(1200px*16/1360); line-height: calc(1200px*16/1360); color: #454545; } .lx2-a22 { width: 100%; height: calc(1200px*60/1360); border: 1px solid #e5e5e5; margin-top: calc(1200px*20/1360); position: relative; } .lx2-a23 { width: calc(1200px*24/1360); position: absolute; top: calc(50% - (1200px*23/1360)/2); left: calc(1200px*28/1360); } .lx2-a22>input { width: 100%; height: 100%; padding-left: calc(1200px*68/1360); font-size: calc(1200px*16/1360); } .lx2-a3 { width: 100%; } .lx2-a31 { font-size: calc(1200px*16/1360); line-height: calc(1200px*16/1360); color: #454545; } .lx2-a32 { width: 100%; height: calc(1200px*245/1360); border: 1px solid #e5e5e5; margin-top: calc(1200px*20/1360); position: relative; } .lx2-a33 { width: calc(1200px*24/1360); position: absolute; left: calc(1200px*28/1360); top: calc(1200px*18/1360); } .lx2-a32 textarea { width: 100%; height: 100%; padding-left: calc(1200px*70/1360); padding-top: calc(1200px*15/1360); font-size: calc(1200px*16/1360); line-height: calc(1200px*30/1360); } .lx2-a4 { width: 100%; margin-top: calc(1200px*52/1360); } .lx2-a41 { width: calc(1200px*168/1360); height: calc(1200px*60/1360); border: 1px solid #e5e5e5; float: left; } .lx2-a41>input { width: 100%; height: 100%; font-size: calc(1200px*16/1360); padding-left: calc(1200px*25/1360); } .lx2-a42 { width: calc(1200px*112/1360); height: calc(1200px*60/1360); float: left; } .lx2-a42 #v_container { width: 100%; height: 100%; } .lx2-a5 { width: 20%; height: 58px; background: #188947; cursor: pointer; font-size: 18px; line-height: 58px; text-align: center; color: #fff; position: absolute; bottom: -15%; right: 40% } .lx2-a1>.lx2-a2:nth-child(2) .lx2-a23 { width: calc(1200px*18/1360); } } @media only screen and (max-width: 1023px) { .init-2 { padding: 50px 0; } .init-2 h3 { font-size: 20px; margin-bottom: 20px; color: #3a3a3a; } .init-2 .grid-box.two .column { margin-bottom: 10px; } .init-2 .grid-box.two .column h2 { font-size: 18px; color: #3a3a3a; margin-bottom: 5px; } .init-2 .grid-box.two .column p { line-height: 30px; font-size: 14px; color: #666666; } .init-3 { padding: 100px 0; background: #eff6fa; } .init-3 h2.h2 { font-size: 18px; text-align: center; } .init-3 a.more { display: block; width: 150px; height: 42px; line-height: 12px; text-align: center; font-size: 15px; background: #188947; margin: 0 auto; color: #fff; padding: 15px; border-radius: 25px; } .init-3 p.p { padding: 12px 0; font-size: 16px; text-align: center; color: #666; } .init-3 { padding: 50px 0; background: #eff6fa; } .init-3 a.more:hover { box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); -ms-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); -o-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3); } .lx1 { width: 100%; background: #f8f8f8; position: relative; } .lx1-m { width: 100%; height: auto; margin-top: 0.4rem; } .lx1-m .cont_dt img { height: auto; width: 100%; } .lx1-m>#map { width: 100%; height: 100%; } .lx1-a { width: calc(100% - 0.3rem*2); margin: 0 auto; padding-top: 0.4rem; } .lx1-a2 { font-size: 0.26rem; line-height: 1.5; color: #555555; } .lx1-a3 { font-size: 0.5rem; line-height: 0.36rem; color: #555555; margin-top: 0.3rem; font-family: 'oswald'; } .lx1-a4 { margin-top: 0.45rem; } .lx1-a41 { width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 0.01rem dashed #cacaca; position: relative; float: left; margin-right: 0.38rem; } .lx1-a4>.lx1-a41:last-child { margin-right: 0; } .lx1-a41:nth-child(1) img, .lx1-a41:nth-child(2) img { height: 0.4rem !important; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .lx1-a41 img { height: 0.3rem; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .lx1-a5 { margin-top: 0.25rem; } .lx1-a5>div { font-size: 0.24rem; line-height: 0.4rem; color: #686868; } .lx1-a6 { margin-top: 0.45rem; } .lx1-a61 { width: 1.73rem; float: left; margin-right: 0.45rem; } .lx1-a6>.lx1-a61:last-child { margin-right: 0; } .lx1-a62 { width: 100%; height: 1.73rem; } .lx1-a63 { font-size: 0.26rem; line-height: 0.26rem; color: #555555; text-align: center; margin-top: 0.3rem; } .lx2 { width: 100%; padding: 1.05rem 0 1.25rem 0; background: #fff; } .lx2-t>div:nth-child(1) { font-size: 22px; line-height: 1.6; font-weight: bold; text-align: center; color: #454545; } .lx2-t>div:nth-child(2) { width: 0.4rem; height: 0.02rem; background: #dee1e8; margin: 0 auto; margin-top: 0.2rem; } .lx2-a { width: calc(100% - 0.3rem*2); margin: 0 auto; margin-top: 0.63rem; position: relative; } .lx2-a1 { width: 100%; } .lx2-a2 { width: 100%; margin-bottom: 0.32rem; } .lx2-a21 { font-size: 0.24rem; line-height: 0.24rem; color: #454545; } .lx2-a22 { width: 100%; height: 0.8rem; border: 0.01rem solid #e5e5e5; margin-top: 0.2rem; position: relative; } .lx2-a23 { width: 0.24rem; position: absolute; top: calc(50% - 0.24rem/2); left: 0.28rem; } .lx2-a22>input { width: 100%; height: 100%; padding-left: 0.68rem; font-size: 0.24rem; } .lx2-a3 { width: 100%; } .lx2-a31 { font-size: 0.24rem; line-height: 0.24rem; color: #454545; } .lx2-a32 { width: 100%; height: 2.45rem; border: 0.01rem solid #e5e5e5; margin-top: 0.2rem; position: relative; } .lx2-a33 { width: 0.24rem; position: absolute; left: 0.28rem; top: 0.18rem; } .lx2-a32 textarea { width: 100%; height: 100%; padding-left: 0.7rem; padding-top: 15px; font-size: 0.24rem; line-height: 0.4rem; } .lx2-a4 { width: 100%; margin-top: 0.52rem; } .lx2-a41 { width: 2.05rem; height: 0.8rem; border: 0.01rem solid #e5e5e5; float: left; } .lx2-a41>input { width: 100%; height: 100%; font-size: 0.24rem; padding-left: 0.25rem; } .lx2-a42 { width: 1.5rem; height: 0.8rem; float: left; } .lx2-a42 #v_container { width: 100%; height: 100%; } .lx2-a5 { width: 100%; height: 0.8rem; background: #188947; cursor: pointer; font-size: 0.26rem; line-height: 0.8rem; text-align: center; color: #fff; margin: 0 auto; margin-top: 0.4rem; } .lx2-a1>.lx2-a2:nth-child(2) .lx2-a23 { width: 0.18rem; } } /* ãƒâ¤ã‚âºã‚â§ãƒâ¥ã¢â‚¬å“ã‚âãƒâ¨ã‚â¯ã‚â¦ãƒâ¦ã†â€™ã¢â‚¬â¦ */ @media only screen and (min-width: 1640px) { .cxq { width: 100%; position: relative; /* margin-top: 115px; */ overflow: hidden; } .cxq-b { width: 100%; position: absolute; left: 0; top: 0; } .cxq-a { width: 1360px; margin: 0 auto; position: relative; } .cxq-all { width: 100%; margin-top: 160px; position: relative; } .cxq-a1 { float: left; font-size: 18px; line-height: 22px; color: #fff; float: left; margin-right: 75px; } .cxq-a1.on { font-size: 22px; font-weight: bold; } .cxq-a2 { position: absolute; right: 0; top: calc(50% - 21px/2); display: flex; align-items: center; } .cxq-a2>div:nth-child(1) { width: 26px; height: 21px; } .cxq-a2>div:nth-child(2) { font-size: 18px; line-height: 21px; color: #fff; margin-left: 14px; } .cxq-c { width: 100%; background: #fff; margin-top: 30px; padding: 85px 80px 90px 80px; position: relative; } .cxq-c1 { width: 100%; } .cxq-c2 { width: 725px; height: 408px; background: #f6f6f6; float: left; position: relative; } .cxq-c2>img { height: 406px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .cxq-c3 { width: calc(100% - 725px); float: left; padding: 60px 75px 0 75px; } .cxq-c31 { font-size: 24px; line-height: 24px; font-weight: bold; } .cxq-c32 { font-size: 15px; line-height: 2; color: #757575; margin-top: 20px; } .cxq-c33 { width: 100%; height: 1px; background: #eeeeee; margin-top: 33px; } .cxq-c34 { font-size: 16px; line-height: 36px; color: #454545; margin-top: 40px; } .cxq-c34>span { font-weight: bold; } .cxq-c35 { font-size: 16px; line-height: 36px; color: #757575; margin-top: 27px; } .cxq-c4 { width: 100%; margin-top: 30px; font-size: 16px; line-height: 40px; color: #454545; padding-bottom: 20px; border-bottom: 1px solid #188947; display: flex; justify-content: center; } .cxq-c4 p { width: 100%; font-size: 15px; line-height: 1.8; color: #454545; margin: 10px auto; } .cxq-c5 { width: 100%; margin-top: 50px; } .cxq-c51 { width: 10px; height: 14px; float: left; } .cxq-c5>.cxq-c51:nth-child(2) { float: right; } .cxq-d { width: 100%; margin-top: 65px; padding-bottom: 100px; margin-bottom: 150px; } .cxq-d1 { font-size: 24px; line-height: 24px; font-weight: bold; margin-bottom: 65px; } .cxq-d2 { width: 100%; position: relative; } .cxq-d .ind3-swi { width: 100%; } .cxq-d21 { width: 100%; height: 350px; background: #fff; position: relative; } .cxq-d21>img { height: 265px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; transition: 0.5s; } .cxq-d22 { font-size: 24px; line-height: 24px; font-weight: bold; margin-top: 57px; } .cxq-d23 { font-size: 16px; line-height: 16px; color: #757575; margin-top: 23px; } .cxq-d21:hover>img { transform: scale(1.08); transition: 0.5s; } .cxq-t1 { font-size: 28px; line-height: 28px; font-weight: bold; text-align: center; } .cxq-t2 { display: flex; align-items: center; justify-content: center; margin-top: 50px; padding-bottom: 50px; border-bottom: 1px solid #eeeeee; } .cxq-t21 { font-size: 16px; line-height: 16px; color: #757575; position: relative; } .cxq-t22 { font-size: 16px; line-height: 16px; color: #757575; margin: 0 45px; } .cxq-t3 { font-size: 16px; line-height: 40px; margin-top: 57px; color: #454545; padding-bottom: 162px; border-bottom: 1px solid #188947; } .cxq-t3 p { font-size: 15px; line-height: 26px; margin-top: 2px; color: #454545; } .cxq-t3 img { max-width: 100%; display: inline-block !important; } .cxq-t5 { width: 100%; margin-top: 50px; } .cxq-t51 { width: 50%; float: left; } .cxq-t51>img { width: 10px; height: 14px; float: left; } .cxq-t51>div { font-size: 16px; line-height: 16px; margin-left: 36px; max-width: calc(100% - 10px - 36px); color: #454545; float: left; } .cxq-t5>.cxq-t51:nth-child(2)>img { float: right; } .cxq-t5>.cxq-t51:nth-child(2)>div { float: right; margin-left: 0; margin-right: 36px; } } @media only screen and (max-width: 1639px) and (min-width:1024px) { .cxq { width: 100%; position: relative; /* margin-top: 100px; */ overflow: hidden; } .cxq-b { width: 100%; position: absolute; left: 0; top: 0; } .cxq-a { width: 1200px; margin: 0 auto; position: relative; } .cxq-all { width: 100%; margin-top: 160px; position: relative; } .cxq-a1 { float: left; font-size: calc(1200px*18/1360); line-height: calc(1200px*22/1360); color: #fff; float: left; margin-right: calc(1200px*75/1360); } .cxq-a1.on { font-size: calc(1200px*22/1360); font-weight: bold; } .cxq-a2 { position: absolute; right: 0; top: calc(50% - (1200px*21/1360)/2); display: flex; align-items: center; } .cxq-a2>div:nth-child(1) { width: calc(1200px*26/1360); height: calc(1200px*21/1360); } .cxq-a2>div:nth-child(2) { font-size: calc(1200px*18/1360); line-height: calc(1200px*21/1360); color: #fff; margin-left: calc(1200px*14/1360); } .cxq-c { width: 100%; background: #fff; margin-top: calc(1200px*50/1360); padding: calc(1200px*85/1360) calc(1200px*80/1360) calc(1200px*90/1360) calc(1200px*80/1360); position: relative; } .cxq-c1 { width: 100%; } .cxq-c2 { width: calc(1200px*725/1360); height: calc(1200px*408/1360); background: #f6f6f6; float: left; position: relative; } .cxq-c2>img { height: calc(1200px*406/1360); position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .cxq-c3 { width: calc(100% - (1200px*725/1360)); float: left; padding: calc(1200px*60/1360) calc(1200px*75/1360) 0 calc(1200px*75/1360); } .cxq-c31 { font-size: calc(1200px*24/1360); line-height: calc(1200px*24/1360); font-weight: bold; } .cxq-c32 { font-size: 14px; line-height: 1.9; color: #757575; margin-top: calc(1200px*20/1360); } .cxq-c33 { width: 100%; height: 1px; background: #eeeeee; margin-top: calc(1200px*33/1360); } .cxq-c34 { font-size: calc(1200px*16/1360); line-height: calc(1200px*36/1360); color: #454545; margin-top: calc(1200px*40/1360); } .cxq-c34>span { font-weight: bold; } .cxq-c35 { font-size: calc(1200px*16/1360); line-height: calc(1200px*36/1360); color: #757575; margin-top: calc(1200px*27/1360); } .cxq-c4 p { width: 100%; font-size: 14px; line-height: 1.8; color: #454545; margin: 10px auto; } .cxq-c4 { width: 100%; margin-top: calc(1200px*30/1360); font-size: calc(1200px*16/1360); line-height: calc(1200px*40/1360); color: #454545; padding-bottom: calc(1200px*10/1360); border-bottom: 1px solid #188947; display: flex; justify-content: center; } .cxq-c5 { width: 100%; margin-top: calc(1200px*50/1360); } .cxq-c51 { width: calc(1200px*10/1360); height: calc(1200px*14/1360); float: left; } .cxq-c5>.cxq-c51:nth-child(2) { float: right; } .cxq-d { width: 100%; margin-top: calc(1200px*65/1360); padding-bottom: calc(1200px*100/1360); margin-bottom: calc(1200px*150/1360); } .cxq-d1 { font-size: calc(1200px*24/1360); line-height: calc(1200px*24/1360); font-weight: bold; margin-bottom: calc(1200px*65/1360); } .cxq-d2 { width: 100%; position: relative; } .cxq-d .ind3-swi { width: 100%; } .cxq-d21 { width: 100%; height: calc(1200px*350/1360); background: #fff; position: relative; } .cxq-d21>img { height: calc(1200px*265/1360); position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; transition: 0.5s; } .cxq-d22 { font-size: calc(1200px*24/1360); line-height: calc(1200px*24/1360); font-weight: bold; margin-top: calc(1200px*57/1360); } .cxq-d23 { font-size: calc(1200px*16/1360); line-height: 16px; color: #757575; margin-top: calc(1200px*23/1360); } .cxq-d21:hover>img { transform: scale(1.08); transition: 0.5s; } .cxq-t1 { font-size: calc(1200px*28/1360); line-height: calc(1200px*28/1360); font-weight: bold; text-align: center; } .cxq-t2 { display: flex; align-items: center; justify-content: center; margin-top: calc(1200px*50/1360); padding-bottom: calc(1200px*50/1360); border-bottom: 1px solid #eeeeee; } .cxq-t21 { font-size: calc(1200px*16/1360); line-height: calc(1200px*16/1360); color: #757575; position: relative; } .cxq-t22 { font-size: calc(1200px*16/1360); line-height: calc(1200px*16/1360); color: #757575; margin: 0 calc(1200px*45/1360); } .cxq-t3 { font-size: calc(1200px*16/1360); line-height: calc(1200px*40/1360); margin-top: calc(1200px*57/1360); color: #454545; padding-bottom: calc(1200px*162/1360); border-bottom: 1px solid #188947; } .cxq-t3 p { font-size: 15px; line-height: 26px; margin-top: 2px; color: #454545; } .cxq-t3 img { max-width: 100%; display: inline-block !important; } .cxq-t5 { width: 100%; margin-top: calc(1200px*50/1360); } .cxq-t51 { width: 50%; float: left; } .cxq-t51>img { width: calc(1200px*10/1360); height: calc(1200px*14/1360); float: left; margin-top: calc(16px/2 - (1200px*14/1360)/2); } .cxq-t51>div { font-size: calc(1200px*16/1360); line-height: 16px; margin-left: calc(1200px*36/1360); max-width: calc(100% - (1200px*10/1360) - (1200px*36/1360)); color: #454545; float: left; } .cxq-t5>.cxq-t51:nth-child(2)>img { float: right; } .cxq-t5>.cxq-t51:nth-child(2)>div { float: right; margin-left: 0; margin-right: calc(1200px*36/1360); } } @media only screen and (max-width: 1023px) { .cxq { width: 100%; position: relative; margin-top: 1.15rem; overflow: hidden; } .cxq-b { width: 100%; position: absolute; left: 0; top: 0; } .cxq-a { width: calc(100% - 0.3rem*2); margin: 0 auto; position: relative; } .cxq-a img { width: 100%; margin: 0 auto; position: relative; } .cxq-all { width: 100%; margin-top: 1.2rem; position: relative; } .cxq-a1 { float: left; font-size: 0.26rem; line-height: 1.8; color: #fff; float: left; margin-right: 0.5rem; } .cxq-a1.on { font-size: 0.28rem; font-weight: bold; } .cxq-a2 { position: absolute; right: 0; top: calc(50% - 1rem/2); display: flex; align-items: center; /* display: none; */ } .cxq-a2>div:nth-child(1) { width: 0.26rem; height: 0.21rem; margin-top: calc(0.3rem/2 - 0.21rem/2); } .cxq-a2>div:nth-child(2) { font-size: 0.26rem; line-height: 0.3rem; color: #fff; margin-left: 0.14rem; } .cxq-c { width: 100%; background: #fff; margin-top: 0.5rem; padding: 0.75rem 0.3rem 0.9rem 0.3rem; position: relative; font-size: 14px; } .cxq-c1 { width: 100%; } .cxq-c2 { width: 100%; height: 3.9rem; background: #f6f6f6; position: relative; } .cxq-c2>img { height: auto; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } .cxq-c3 { width: 100%; padding: 0.8rem 0 0 0; } .cxq-c31 { font-size: 0.4rem; line-height: 0.6rem; font-weight: bold; } .cxq-c32 { font-size: 0.24rem; line-height: 0.4rem; color: #757575; margin-top: 0.2rem; } .cxq-c33 { width: 100%; height: 1px; background: #eeeeee; margin: 0.33rem auto; } .cxq-c34 { font-size: 0.24rem; line-height: 0.4rem; color: #454545; margin-top: 0.4rem; } .cxq-c34>span { font-weight: bold; } .cxq-c35 { font-size: 0.24rem; line-height: 0.4rem; color: #757575; margin-top: 0.27rem; } .cxq-c4 { width: 100%; margin-top: 0.16rem; font-size: 0.24rem; line-height: 0.4rem; color: #454545; padding-bottom: .2rem; border-bottom: 1px solid #e0e0e0; } .cxq-c4 p { padding-bottom: .1rem; } .cxq-c5 { width: 100%; margin-top: 0.5rem; } .cxq-c51 { width: 0.2rem; height: 0.28rem; float: left; } .cxq-c5>.cxq-c51:nth-child(2) { float: right; } .cxq-d { width: 100%; margin-top: 0.65rem; padding-bottom: 1rem; margin-bottom: 1.5rem; } .cxq-d1 { font-size: 0.3rem; line-height: 0.3rem; font-weight: bold; margin-bottom: 0.65rem; } .cxq-d2 { width: 100%; position: relative; } .cxq-d .ind3-swi { width: 100%; } .cxq-d21 { width: 100%; height: 5rem; background: #fff; position: relative; } .cxq-d21>img { height: 100%; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; transition: 0.5s; } .cxq-d22 { font-size: 0.3rem; line-height: 0.3rem; font-weight: bold; margin-top: 0.57rem; } .cxq-d23 { font-size: 0.24rem; line-height: 0.24rem; color: #757575; margin-top: 0.23rem; } .cxq-t1 { font-size: 16px; line-height: 1.6; font-weight: bold; text-align: center; } .cxq-t2 { display: flex; align-items: center; justify-content: center; margin-top: 0.5rem; padding-bottom: 0.5rem; border-bottom: 0.01rem solid #eeeeee; } .cxq-t21 { font-size: 0.24rem; line-height: 0.24rem; color: #757575; position: relative; } .cxq-t22 { font-size: 0.24rem; line-height: 0.24rem; color: #757575; margin: 0 0.1rem; } .cxq-t3 { font-size: 14px; line-height: 1.6; margin-top: 0.57rem; color: #454545; padding-bottom: .1rem; border-bottom: 1px solid #e0e0e0; } .cxq-t3 p { font-size: 14px; line-height: 1.6; } .cxq-t3 img { max-width: 100%; height: auto !important; display: inline-block !important; } .cxq-t5 { width: 100%; margin-top: 0.3rem; } .cxq-t51 { width: 100%; margin-top: 0.2rem; } .cxq-t51>img { width: 0.1rem; height: 0.14rem; float: left; margin-top: calc(0.26rem/2 - 0.14rem/2); display: none; } .cxq-t51>div { width: 100%; font-size: 0.24rem; line-height: 0.24rem; color: #454545; float: left; } } @media only screen and (min-width:1024px) { .ss { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99; background: #188947; display: none; } .ss1 { width: 100%; height: 115px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); position: relative; } .ss1a { height: 56px; position: absolute; left: 50px; top: calc(50% - 56px/2); } .ss1b { height: 26px; position: absolute; cursor: pointer; right: 50px; top: calc(50% - 26px/2); } .ss1b:hover { transform: rotate(360deg); transition: 0.5s; } .ss2 { font-size: 70px; line-height: 70px; font-weight: bold; color: #fff; text-align: center; width: 100%; position: absolute; left: 0; top: calc(50% - 160px); transform: matrix(1, 0, 0, 1, 0, 160); opacity: 0; transition: 1s; } .ss3 { width: 800px; height: 60px; background: #fff; border-radius: 50px; position: absolute; left: calc(50% - 800px/2); top: calc(50% - 60px/2); transform: matrix(1, 0, 0, 1, 0, 160); opacity: 0; transition: 1s; } .ss31 { width: 28px; height: 27px; cursor: pointer; position: absolute; right: 33px; top: calc(50% - 27px/2); } .ss3>input { width: 100%; height: 100%; font-size: 16px; padding-left: 40px; } .ss2.on { transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1; transition: 1s; } .ss3.on { transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1; transition: 1s; } } @media only screen and (max-width: 1023px) { .ss { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99; background: #188947; display: none; } .ss1 { width: 100%; height: 1.15rem; border-bottom: 0.01rem solid rgba(255, 255, 255, 0.1); position: relative; } .ss1a { height: 0.56rem; position: absolute; left: 0.35rem; top: calc(50% - 0.56rem/2); } .ss1b { height: 0.28rem; position: absolute; cursor: pointer; right: 0.35rem; top: calc(50% - 0.28rem/2); } .ss2 { font-size: 0.7rem; line-height: 0.7rem; font-weight: bold; color: #fff; text-align: center; width: 100%; position: absolute; left: 0; top: calc(50% - 1.6rem); transform: matrix(1, 0, 0, 1, 0, 160); opacity: 0; transition: 1s; } .ss3 { width: calc(100% - 0.35rem*2); height: 0.8rem; background: #fff; border-radius: 0.5rem; position: absolute; left: 0.35rem; top: calc(50% - 0.6rem/2); transform: matrix(1, 0, 0, 1, 0, 160); opacity: 0; transition: 1s; } .ss31 { width: 0.28rem; height: 0.27rem; cursor: pointer; position: absolute; right: 0.33rem; top: calc(50% - 0.27rem/2); } .ss3>input { width: 100%; height: 100%; font-size: 0.24rem; padding-left: 0.4rem; } .ss2.on { transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1; transition: 1s; } .ss3.on { transform: matrix(1, 0, 0, 1, 0, 0); opacity: 1; transition: 1s; } } /**/ .culture02 { background: #fff; padding-top: 0.6rem; } .wrap { width: 90%; margin-right: auto; margin-left: auto; } .culture02 .infor .tit { text-align: center; } .culture02 .content { padding: 0.6rem 0 0.4rem; } .culture02 .content .item01 { border-left: 1px solid #ebebeb; } .culture02 .content .item { float: left; width: 20%; padding-top: 0.12rem; padding-bottom: 0.45rem; height: 2.45rem; box-sizing: border-box; border-right: 1px solid #ebebeb; padding-left: 0.38rem; padding-right: 0.6rem; margin-bottom: 0.51rem; } .culture02 .content .item .icon { margin-bottom: 0.30rem; display: inline-block; transition: all .3s ease; } .culture02 .content .item .text .tit { margin-bottom: 0.08rem; transition: all .3s ease; } .culture02 .content .item .text .con { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .con15 { font-size: 15px; line-height: 1.5; color: #5d5d5d; font-family: 'he-t'; } .culture02 .content .item:hover .text .tit { color: #ee6200; display: -webkit-box; } .culture02 .content .item .text .tit { margin-bottom: 0.08rem; transition: all .3s ease; } .tit24 { font-size: 24px; line-height: 2; color: #000; } .tit36 { font-size: 36px; line-height: 2; color: #000; } @media only screen and (max-width: 480px) { .con15 { font-size: 14px; line-height: 1.5; color: #5d5d5d; font-family: 'he-t'; } .tit24 { font-size: 18px; line-height: 2; color: #000; } .tit36 { font-size: 24px; line-height: 2; color: #000; } /* ãƒâ¤ã‚â¼ã‚âãƒâ¤ã‚â¸ã…â¡ãƒâ¦ã¢â‚¬â€œã¢â‚¬â¡ãƒâ¥ã…’ã¢â‚¬â€œ */ .culture02 .content .item { position: relative; width: 100%; height: auto; border: 0; border-left: none !important; border-right: none !important; padding: 0.1rem 5% 0.1rem 1.5rem; margin-bottom: 0.2rem; } .culture02 .content .item .icon img { max-width: 64px; height: auto; vertical-align: top; -ms-interpolation-mode: bicubic; border: 0; } .culture02 .content .item .icon { position: absolute; top: 50%; left: 0; transform: translatey(-50%); width: 0.8rem; } .culture02 .content .item:nth-child(1) { border-left: 1px solid #ebebeb; } .culture02 .content .item:nth-child(4) { border-left: 1px solid #ebebeb; } .culture02 .content .item:nth-child(7) { border-left: 1px solid #ebebeb; } .culture01 .item .content .intro_item_lr .img_box { width: 100%; } .culture01 .item .content .intro_item_lr .intro_box { width: 100%; } } @media only screen and (max-width: 1441px) { .culture02 .content .item { /* padding: 0.1rem 2% 0; */ } .culture02 .content .item .icon { margin-bottom: 0.2rem; } } .btwood { background: ; background-position: center top; background-repeat: no-repeat; width: 500px; height: 370px; position: absolute; top: 580px; left: 0; } .ind2-b3.down { height: 600px; position: absolute; top: 500px; left: 0; z-index: -1; overflow: hidden; opacity: 1; } .ind2-b3.shang { height: 600px; position: absolute; top: 2500px; right: 50px; z-index: -1; overflow: hidden; opacity: 1; } .titlebox.center { text-align: center; border-left: none; border-bottom: 1px solid #e5e5e5; padding-bottom: 25px; } .titlebox.center h2::before { width: 52px; height: 1px; bottom: -25px; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } .titlebox { position: relative; padding-left: 20px; padding-right: 20px; margin-bottom: 40px; border-left: 1px solid rgb(229, 229, 229); } .titlebox h2 { font-weight: 300; font-size: 24px; color: rgb(89, 89, 89); letter-spacing: 0.05em; line-height: 1; } .titlebox h2::before { content: ""; width: 1px; height: 25px; display: block; position: absolute; bottom: 0px; left: -1px; background: rgb(127, 175, 117); } .center-img { display: flex; justify-content: center; align-items: center; } .toptitle { display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: .35rem; } .toptitle .titlebox { width: 450px; } .toptitle .classrowbox { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1 } @media(max-width: 1023px) { .toptitle { display: block } } .classrowbox { position: relative; z-index: 10; margin-bottom: 20px; padding: 0; border-bottom: 1px solid #e0e0e0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end } .classrowbox>ul { -ms-flex-wrap: wrap; flex-wrap: wrap; display: -webkit-box; display: -ms-flexbox; display: flex } @media(max-width: 1023px) { .classrowbox>ul { display: none; } } .classrowbox>ul a { display: block; padding: 15px 25px; font-size: 15px; color: #595959; position: relative } .classrowbox>ul a::after { content: ""; width: 0px; height: 1px; display: block; position: absolute; left: 50%; bottom: -1px; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); background: #188947; -webkit-transition: .9s; transition: .9s } .classrowbox>ul a.current { color: #188947 } .classrowbox>ul a.current::after { width: 52px } .classrowbox>ul a:hover { color: #188947 } .classcolumnbox { position: relative; z-index: 3 } @media(max-width: 1023px) { .classcolumnbox>ul { display: none } } .classcolumnbox>ul>li>a { padding-top: 10px; padding-bottom: 10px; color: #010101 } .classcolumnbox>ul ul { display: none; margin-bottom: 30px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc } .classcolumnbox>ul ul li li { border-top: 1px solid #ccc } .classcolumnbox>ul a { position: relative; display: block; padding-top: 5px; padding-bottom: 5px; font-size: 14px; color: #777 } .classcolumnbox>ul a.current, .classcolumnbox>ul a:hover { color: #188947 } .classcolumnbox>ul .linkhasitems.open ul { display: block } .classcolumnbox>ul .linkhasitems.open ul>li { -webkit-animation: .5s anislideleft both ease-out .3s; animation: .5s anislideleft both ease-out .3s } .mclasslink { position: relative; z-index: 3; width: 100%; text-align: center } @media(min-width: 1024px) { .mclasslink { display: none } } .mclasslink.open>ul { display: block } .mclasslink .main { position: relative; display: block; font-size: 16px; padding: 10px 30px 10px 10px; color: #fff; letter-spacing: 1px; cursor: pointer; background-color: #188947 } .mclasslink .main::before { content: "ãƒæ’ã‚â¯ãƒâ¢ã¢â€šâ¬ã…â¾ãƒâ¢ã¢â€šâ¬ã‚â¡"; position: absolute; right: 15px; top: 50%; z-index: 1; margin-top: -6px; line-height: 1; font-size: 15px; color: #fff; font-family: fontawesome } .mclasslink>ul { position: absolute; left: 0; top: calc(100% - 1px); z-index: 1; display: none; width: 100%; background-color: #fff; -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .1); box-shadow: 0 5px 15px rgba(0, 0, 0, .1) } .mclasslink>ul>li li { border-top: 1px solid #f2f2f2 } .mclasslink>ul>li.current>a { color: #188947 } .mclasslink>ul a { position: relative; z-index: 1; display: block; padding: 14px 20px; color: #000; font-size: 14px; background-color: #fff } .mclasslink ul { display: none } .mclasslink .linkhasitems { position: relative; padding-right: 40px } .mclasslink .linkhasitems::after { content: "ãƒæ’ã‚â¯ãƒâ¢ã¢â€šâ¬ã…â¾ãƒâ¢ã¢â€šâ¬ã‚â¡"; position: absolute; top: 50%; right: 17px; z-index: 1; line-height: 1; margin-top: -7px; font-family: fontawesome } .mclasslink .linkhasitems.open::after { -webkit-transform: rotatex(180deg); transform: rotatex(180deg) } .mclasslink .linkhasitems.open ul { display: block } .mclasslink .linkhasitems ul { background-color: #efefef } .mclasslink .linkhasitems ul a { padding: 10px 5px 10px 30px; background-color: #efefef } .mclasslink .linkhasitems ul a.current { color: #188947 } .index-product .more-1 { margin-top: 6%; } .index-product .more-1 a { display: block; width: 120px; height: 35px; line-height: 34px; font-size: 0; overflow: hidden; position: relative; text-align: center; border: 1px solid #188947; border-radius: 10px; } .index-product .more-1 span { color: #188947; font-size: 13px; } .index-product .more-1 i { display: inline-block; width: 7px; height: 10px; background: center no-repeat; margin-left: 10px; } .index-product .more-1 a:hover { background: #188947; border: 1px solid #188947; } .index-product .more-1 a:hover span { color: #fff; } .index-product .more-1 a:hover i { background: center no-repeat; } .index-product {} .index-content {} .index-product-list { position: relative; overflow: hidden; } .index-product-top { overflow: hidden; position: relative; display: grid; grid-template-columns: .4fr .4fr .4fr; gap: .25rem .25rem; } .index-product-top .index-product-item .text { left: 0; top: 25%; transform: none; padding: 0% 10%; } .index-product-top .index-product-item .more-1 a {} .index-product-down { display: grid; grid-template-columns: .5fr .5fr; gap: .25rem; } .index-product-item { position: relative; margin-bottom: 4%; overflow: hidden; } .index-product-item .img { background: #f8f8f8; border-radius: 10px; transition: all .4s ease; } .index-product-item * { transition: all .4s ease; } .index-product-item .text { position: absolute; left: 8%; top: 50%; width: 100%; text-align: left; z-index: 11; transform: translatey(-50%); } .index-product-item .text-1 { font-weight: 400; color: #999999; } .index-product-item .title-1 { margin-top: 1%; font-size: 24px; line-height: 1.8; } .index-product-item .text-2 { font-weight: 300; font-size: 14px; line-height: 1.8; } .index-product-item .more-1 { margin-top: 20px; } .index-product-item .product { position: absolute; right: 0; top: 0; z-index: 1; width: 50%; height: 100%; overflow: hidden; } .index-product-item .product img.img-block { height: 100%; } .index-product-item:hover { background: #e9fff2; box-shadow: 8px 8px 20px 0px rgb(94 94 94 / 12%), -8px -8px 20px #fff; border-radius: 10px; } .index-product-item:hover .img { /* background: #d1d2d4a8; */ /* box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); */ } .index-product-item:hover .text-1 { color: #8bd1bf; } .index-product-item:hover .title-1 { /* color: #fff; */ } .index-product-item:hover .text-2 { /* color: #fff; */ } .index-product-item:hover .more-1 a { background: #188947; border: 1px solid #188947; } .index-product-item:hover .more-1 span { color: #fff; } .index-product-item:hover .more-1 i { background: center no-repeat; } .index-product-top .img .pic { margin: 10% 6%; width: 50%; float: right; padding: 10% 1% 0% 1%; } .rm .index-product-top .img .pic { margin: 10% 6%; width: 50%; float: right; padding: 0% 0% 0% 3%; } .index-product-down .img .pic { margin: 5% 5%; width: 50%; float: right; padding: 5% 1% 0% 1%; }