@charset "UTF-8"; /* 鍗庢眽浜掕仈 https://www.huahanlink.com/ */ * { margin: 0; padding: 0; -moz-outline: none; outline: none; -webkit-tap-highlight-color: transparent; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } *::after, *::before { box-sizing: border-box; } html, body { width: 100%; height: auto; margin: 0; padding: 0; position: relative; overflow-x: hidden; -webkit-overflow-scrolling: touch; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } ul, ol { list-style: none; } a { text-decoration: none; color: #000; } img { max-width: 100%; max-height: 100%; border: 0; } h1, h2, h3, h4, h5, h6 { font-size: 120%; } input, textarea { resize: none; } input[type="submit"], input[type="reset"], input[type="button"], button { -webkit-appearance: none; } video::-internal-media-controls-download-button {display:none;} video::-webkit-media-controls-enclosure {overflow:hidden;} video::-webkit-media-controls-panel { width: calc(100% + 30px); } ul.swiper-wrapper { margin: 0; padding: 0; } img { max-width: 100%; max-height: 100%; vertical-align: middle; } .flex { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .f_column { -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .f_column_right { -webkit-box-orient: vertical; -ms-flex-direction: column-reverse; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; } .f_row { -webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; -o-flex-direction: row; flex-direction: row; } .f_row_right { -webkit-flex-direction: row-reverse; -moz-flex-direction: row-reverse; -ms-flex-direction: row-reverse; -o-flex-direction: row-reverse; flex-direction: row-reverse; } .j_center { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .j_end { -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .j_start { -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .j_justify { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .j_around { -moz-justify-content: space-around; -webkit-justify-content: space-around; justify-content: space-around; } .a_start { -webkit-box-align: start; -ms-flex-align: start; -webkit-align-items: flex-start; align-items: flex-start; } .a_end { -webkit-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .a_center { -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .a_baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; } .a_stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; -webkit-align-items: stretch; align-items: stretch; } .a_s_center { -webkit-box-self: center; -ms-align-self: center; -webkit-align-self: center; align-self: center; } .a_s_end { -webkit-box-self: end; -ms-align-self: end; -webkit-align-self: end; align-self: end; } .flex_wrap { flex-wrap: wrap; -ms-flex-wrap: wrap; } .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dh { -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .xzx { transform: rotateX(180deg); -ms-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -webkit-transform: rotateX(180deg); -o-transform: rotateX(180deg); } .xzy { transform: rotateY(180deg); -ms-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -o-transform: rotateY(180deg); } .pb { width: 100%; height: 0; padding-bottom: 100%; position: relative; z-index: 5; overflow: hidden; } .ab { position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-size: 0; text-align: center; overflow: hidden; } .abimg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .w1800 { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 60px; } .w1760 { width: 100%; max-width: 1760px; margin: 0 auto; } .w1680 { width: 100%; max-width: 1680px; margin: 0 auto; } .w1600 { width: 100%; max-width: 1600px; margin: 0 auto; } .w1560 { width: 100%; max-width: 1560px; margin: 0 auto; } .w1440 { width: 100%; max-width: 1440px; margin: 0 auto; } .w1400 { width: 100%; max-width: 1400px; margin: 0 auto; } .w1350 { width: 100%; max-width: 1350px; margin: 0 auto; } .w1280 { width: 100%; max-width: 1280px; margin: 0 auto; } .w1200 { width: 100%; max-width: 1200px; margin: 0 auto; } .pc { display: block; } .mobile { display: none; } @media (max-width:1880px) { .w1760 { max-width: 100%; padding: 0 60px; } } @media (max-width:1800px) { .w1680 { max-width: 100%; padding: 0 60px; } } @media (max-width:1720px) { .w1600 { max-width: 100%; padding: 0 60px; } } @media (max-width:1680px) { .w1560 { max-width: 100%; padding: 0 60px; } } @media (max-width:1560px) { .w1440 { max-width: 100%; padding: 0 60px; } } @media (max-width:1520px) { .w1400 { max-width: 100%; padding: 0 60px; } } @media (max-width:1470px) { .w1350 { max-width: 100%; padding: 0 60px; } } @media (max-width:1400px) { .w1280 { padding: 0 60px; } } @media (max-width:1320px) { .w1200 { max-width: 100%; padding: 0 60px; } } @media (max-width:1024px) { .w1800, .w1760, .w1680, .w1600, .w1560, .w1440, .w1400, .w1350, .w1280, .w1200 { padding: 0 30px; } } @media (max-width:990px) { .w1800, .w1760, .w1680, .w1560, .w1400, .w1350, .w1440, .w1600, .w1280, .w1200 { padding: 0 20px; } .pc { display: none; } .mobile { display: block; } } @keyframes run { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes run2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } @keyframes tran_run { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes tran_run2 { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(-360deg); } } @keyframes grow2 { 0% { transform: scale(1.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } @keyframes run_down { 0% { top: 0; opacity: 0; } 25% { top: 25%; opacity: 1; } 75% { top: 75%; opacity: 1; } 100% { top: 100%; opacity: 0; } } @keyframes run_left { 0% { right: 0; opacity: 0; } 25% { right: 25%; opacity: 1; } 75% { right: 75%; opacity: 1; } 100% { right: 100%; opacity: 0; } } @keyframes run_left2 { 0% { right: 0; opacity: 0; } 25% { right: 10%; opacity: 1; } 75% { right: 30%; opacity: 1; } 100% { right: 40%; opacity: 0; } } @keyframes run_right { 0% { left: 0; opacity: 0; } 25% { left: 25%; opacity: 1; } 75% { left: 75%; opacity: 1; } 100% { left: 100%; opacity: 0; } } @keyframes run_right2 { 0% { left: 0; opacity: 0; } 25% { left: 10%; opacity: 1; } 75% { left: 30%; opacity: 1; } 100% { left: 40%; opacity: 0; } } .cle { clear: both; width: 0; height: 0; display: block; overflow: hidden; font-size: 0px; } .imgmid { display: inline-block; *display: inline; *zoom: 1; height: 100%; width: 1px; margin-left: -1px; vertical-align: middle; font-size: 0px; } .block_a { width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; z-index: 5; overflow: hidden; } .none { display: none; } .center_box { position: relative; z-index: 5; } /* 瀛椾綋寮曞叆 */ /* 涓枃 */ @font-face { font-family: 'ff100'; src: url('../fonts/SourceHanSansCN-ExtraLight.ttf'); } @font-face { font-family: 'ff200'; src: url('../fonts/SourceHanSansCN-Light.ttf'); } @font-face { font-family: 'ff300'; src: url('../fonts/SourceHanSansCN-Normal.ttf'); } @font-face { font-family: 'ff400'; src: url('../fonts/SourceHanSansCN-Regular.ttf'); } @font-face { font-family: 'ff700'; src: url('../fonts/SourceHanSansCN-Medium.ttf'); } @font-face { font-family: 'ff800'; src: url('../fonts/SourceHanSansCN-Bold.ttf'); } /* 鑻辨枃 */ @font-face { font-family: 'Nexa'; src: url('../fonts/Nexa-Bold.otf'); } @font-face { font-family: 'Gilroy'; src: url('../fonts/Gilroy-Bold.otf'); } @font-face { font-family: 'Pill'; src: url('../fonts/PillGothic600mg-Regular.ttf'); } @font-face { font-family: 'Montserrat'; src: url('../fonts/Montserrat-Regular.otf'); } @font-face { font-family: 'Rubik100'; src: url('../fonts/Rubik-Light.ttf'); } @font-face { font-family: 'Rubik'; src: url('../fonts/Rubik-Regular.ttf'); } @font-face { font-family: 'Orbitron'; src: url('../fonts/Orbitron-Bold.ttf'); } .Nexa { font-family: 'Nexa', 'ff400'; } .Gilroy { font-family: 'Gilroy', 'ff400'; } .Gilroy800 { font-family: 'Gilroy', 'ff800'; } .Pill { font-family: 'Pill', 'ff400'; } .Montserrat { font-family: 'Montserrat', 'ff400'; } .Orbitron { font-family: 'Orbitron', 'ff800'; } .Rubik100 { font-family: 'Rubik100'; } .Rubik { font-family: 'Rubik'; } .fontNumber200 { font-family: 'Montserrat', 'ff100'; } .fontNumber300 { font-family: 'Montserrat', 'ff200'; } .fontNumber400 { font-family: 'Montserrat', 'ff400'; } .fontNumber700 { font-family: 'Montserrat', 'ff700'; } .fontNumber800 { font-family: 'Montserrat', 'ff800'; } .ff100 { font-family: 'Rubik', 'ff100'; } .ff200 { font-family: 'Rubik', 'ff200'; } .ff300 { font-family: 'Rubik', 'ff300'; } .ff400 { font-family: 'Rubik', 'ff400'; } .ff700 { font-family: 'Rubik', 'ff700'; } .ff800 { font-family: 'Rubik', 'ff800'; } /* 鍒濆鍖栭粯璁ゅ瓧浣 */ html, body { position: relative; font-family: 'Rubik', 'ff400'; } /* 闂磋窛 */ /* 棰滆壊 */ .layui-btn { height: 100%; border-radius: 0; background: #003281; } html, body, a { color: #2c303d; } ::-webkit-selection { background: #f39800; color: #fff; } ::-moz-selection { background: #f39800; color: #fff; } ::selection { background: #f39800; color: #fff; } /* Placeholder style */ /* 瀛楀彿 */ .font60 { font-size: 60px; } @media (max-width:1600px) { .font60 { font-size: 52px; } } @media (max-width:1440px) { .font60 { font-size: 42px; } } @media (max-width:1024px) { .font60 { font-size: 36px; } } @media (max-width:768px) { .font60 { font-size: 30px; } } .font48 { font-size: 48px; } @media (max-width:1680px) { .font48 { font-size: 42px; } } @media (max-width:1440px) { .font48 { font-size: 36px; } } @media (max-width:1280px) { .font48 { font-size: 28px; } } @media (max-width:1024px) { .font48 { font-size: 24px; } } @media (max-width:768px) { .font48 { font-size: 22px; } } .font46 { font-size: 46px; } @media (max-width:1680px) { .font46 { font-size: 42px; } } @media (max-width:1440px) { .font46 { font-size: 36px; } } @media (max-width:1280px) { .font46 { font-size: 28px; } } @media (max-width:1024px) { .font46 { font-size: 24px; } } @media (max-width:768px) { .font46 { font-size: 22px; } } .font44 { font-size: 44px; } @media (max-width:1680px) { .font44 { font-size: 40px; } } @media (max-width:1440px) { .font44 { font-size: 34px; } } @media (max-width:1280px) { .font44 { font-size: 28px; } } @media (max-width:1024px) { .font44 { font-size: 24px; } } @media (max-width:768px) { .font44 { font-size: 22px; } } .font42 { font-size: 42px; } @media (max-width:1680px) { .font42 { font-size: 40px; } } @media (max-width:1440px) { .font42 { font-size: 34px; } } @media (max-width:1280px) { .font42 { font-size: 28px; } } @media (max-width:1024px) { .font42 { font-size: 24px; } } @media (max-width:768px) { .font42 { font-size: 22px; } } .font40 { font-size: 40px; } @media (max-width:1680px) { .font40 { font-size: 36px; } } @media (max-width:1440px) { .font40 { font-size: 32px; } } @media (max-width:1280px) { .font40 { font-size: 28px; } } @media (max-width:1024px) { .font40 { font-size: 24px; } } @media (max-width:768px) { .font40 { font-size: 22px; } } .font38 { font-size: 38px; } @media (max-width:1680px) { .font38 { font-size: 34px; } } @media (max-width:1440px) { .font38 { font-size: 30px; } } @media (max-width:1280px) { .font38 { font-size: 24px; } } @media (max-width:1024px) { .font38 { font-size: 22px; } } @media (max-width:768px) { .font38 { font-size: 20px; } } .font36 { font-size: 36px; } @media (max-width:1680px) { .font36 { font-size: 32px; } } @media (max-width:1440px) { .font36 { font-size: 28px; } } @media (max-width:1280px) { .font36 { font-size: 24px; } } @media (max-width:1024px) { .font36 { font-size: 22px; } } @media (max-width:768px) { .font36 { font-size: 20px; } } .font30 { font-size: 30px; } @media (max-width:1680px) { .font30 { font-size: 26px; } } @media (max-width:1440px) { .font30 { font-size: 24px; } } @media (max-width:1280px) { .font30 { font-size: 22px; } } @media (max-width:1024px) { .font30 { font-size: 20px; } } @media (max-width:768px) { .font30 { font-size: 18px; } } .font28 { font-size: 28px; } @media (max-width:1680px) { .font28 { font-size: 24px; } } @media (max-width:1440px) { .font28 { font-size: 22px; } } @media (max-width:1280px) { .font28 { font-size: 20px; } } @media (max-width:1024px) { .font28 { font-size: 18px; } } @media (max-width:768px) { .font28 { font-size: 17px; } } .font24 { font-size: 24px; } @media (max-width:1680px) { .font24 { font-size: 22px; } } @media (max-width:1440px) { .font24 { font-size: 20px; } } @media (max-width:1280px) { .font24 { font-size: 18px; } } @media (max-width:1024px) { .font24 { font-size: 16px; } } @media (max-width:768px) { .font24 { font-size: 15px; } } .font22 { font-size: 22px; } @media (max-width:1680px) { .font22 { font-size: 20px; } } @media (max-width:1440px) { .font22 { font-size: 18px; } } @media (max-width:1280px) { .font22 { font-size: 17px; } } @media (max-width:1024px) { .font22 { font-size: 16px; } } @media (max-width:768px) { .font22 { font-size: 15px; } } .font20 { font-size: 20px; } @media (max-width:1680px) { .font20 { font-size: 18px; } } @media (max-width:1440px) { .font20 { font-size: 17px; } } @media (max-width:1280px) { .font20 { font-size: 16px; } } @media (max-width:1024px) { .font20 { font-size: 15px; } } @media (max-width:768px) { .font20 { font-size: 14px; } } .font18 { font-size: 18px; } @media (max-width:1440px) { .font18 { font-size: 16px; } } @media (max-width:1024px) { .font18 { font-size: 14px; } } @media (max-width:768px) { .font18 { font-size: 13px; } } .font16 { font-size: 16px; } @media (max-width:1440px) { .font16 { font-size: 14px; } } @media (max-width:1024px) { .font16 { font-size: 13px; } } @media (max-width:768px) { .font16 { font-size: 12px; } } .font14 { font-size: 14px; } @media (max-width:1280px) { .font14 { font-size: 13px; } } @media (max-width:1024px) { .font14 { font-size: 12px; } } .insidePt { padding-top: 130px; } @media (max-width:1366px) { .insidePt { padding-top: 120px; } } @media (max-width:990px) { .insidePt { padding-top: 60px; } } .sbywk { width: 100%; height: 0; position: relative; top: -120px; } /* 瑙嗛寮圭獥 */ .videomark { position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0, 0, 0, 0.55); z-index: 9998; display: none; } .videobox { position: fixed; width: 1400px; max-width: calc(100% - 100px); height: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; display: none; } .videobox video { width: 100%; object-fit: fill; } .videobox .close { width: 40px; height: 40px; border-radius: 50%; background: #ffffff; position: absolute; right: -20px; top: -20px; z-index: 9; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; font-size: 0; --c: #2c303d; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .videobox .close::before, .videobox .close::after { content: ''; width: 50%; height: 50%; position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%) rotate(45deg); background: var(--c); border-radius: 5px; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .videobox .close::before { width: 2px; } .videobox .close::after { height: 2px; } .videobox .close:hover { transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); background: #f39800; --c: #FFF; } .videobox .video { width: 100%; height: 0; padding-bottom: 56.25%; position: relative; } .videobox .video video, .videobox .video iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-size: 0; text-align: center; overflow: hidden; object-fit: fill; } @media (max-width:1440px) { .videobox { max-width: 70%; } } @media (max-width:768px) { .videobox { width: 100%; max-width: 100%; } .videobox .close { right: 0; top: -40px; } } /* 鍒嗛〉鍣 */ .paging_box { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .paging_box .layui-laypage { width: 100%; height: auto; margin: 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; grid-gap: 10px; --w: 40px; --h: 32px; --m: 20px; --r: 8px; } .paging_box .layui-laypage * { border: 0; padding: 0; } .paging_box .layui-laypage a, .paging_box .layui-laypage span { min-width: var(--w); height: var(--h); margin: 0; padding: 0 10px; background: transparent; box-sizing: border-box; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; font-size: 16px; color: #2c303d; } @media (max-width:1440px) { .paging_box .layui-laypage a, .paging_box .layui-laypage span { font-size: 14px; } } @media (max-width:1024px) { .paging_box .layui-laypage a, .paging_box .layui-laypage span { font-size: 13px; } } @media (max-width:768px) { .paging_box .layui-laypage a, .paging_box .layui-laypage span { font-size: 12px; } } .paging_box .layui-laypage .layui-laypage-em { background: #f39800; border-radius: var(--r); } .paging_box .layui-laypage .layui-laypage-prev, .paging_box .layui-laypage .layui-laypage-next { width: 9px; min-width: auto; height: 17px; padding: 0; background: #2c303d; font-size: 0; -webkit-mask-repeat: no-repeat; -moz-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; -moz-mask-position: center; mask-position: center; -webkit-mask-size: cover; -moz-mask-size: cover; mask-size: cover; } .paging_box .layui-laypage .layui-laypage-prev.layui-disabled, .paging_box .layui-laypage .layui-laypage-next.layui-disabled { background: #a5a6ab; } .paging_box .layui-laypage .layui-laypage-prev { margin-right: var(--m); -webkit-mask-image: url('../svg/icon_paging_left.svg'); -moz-mask-image: url('../svg/icon_paging_left.svg'); mask-image: url('../svg/icon_paging_left.svg'); } .paging_box .layui-laypage .layui-laypage-next { margin-left: var(--m); -webkit-mask-image: url('../svg/icon_paging_right.svg'); -moz-mask-image: url('../svg/icon_paging_right.svg'); mask-image: url('../svg/icon_paging_right.svg'); } @media (max-width:1024px) { .paging_box .layui-laypage { --w: 30px; --h: 24px; --m: 10px; --r: 4px; grid-gap: 5px; } } /* 鍒嗕韩 */ .share_box { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .share_box .item { width: auto; height: auto; position: relative; } .share_box .item .ewm { width: 100px; height: auto; padding: 5px; position: absolute; top: 100%; left: 50%; font-size: 0; margin-left: -50px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin-top: 5px; opacity: 0; visibility: hidden; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .share_box .item .ewm img { width: 100%; } .share_box .item .ewm::before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background: #fff; border-radius: 5px; } .share_box .item .ewm::after { content: ''; width: 0; height: 0; position: absolute; top: -6px; left: 50%; z-index: 1; transform: translateX(-50%); border-style: solid; border-width: 0 6px 6px 6px; border-color: transparent transparent #fff transparent; } .share_box .item .icon { width: var(--size); height: var(--size); --size: 40px; overflow: hidden; } @media (max-width:1680px) { .share_box .item .icon { --size: 38px; } } @media (max-width:1440px) { .share_box .item .icon { --size: 36px; } } @media (max-width:1280px) { .share_box .item .icon { --size: 34px; } } @media (max-width:1024px) { .share_box .item .icon { --size: 32px; } } .share_box .item .icon a { width: 100%; height: 100%; border-radius: 50%; background: #ced3d7; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .share_box .item .icon a i { font-size: calc(var(--size) * 0.45); color: #FFF; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .share_box .item .icon::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -2; box-sizing: border-box; border-radius: 50%; border: 2px solid #fff; opacity: 0; } .share_box .item:hover .ewm { opacity: 1; margin-top: 15px; visibility: initial; } .share_box .item:hover .icon a { background: #003281; } .share_box .item:hover .icon a i { color: #fff; } .share_box .item:hover .icon::after { opacity: .2; } .share_box .item:first-child ~ .item { margin-left: clamp(10px, 1.04166667vw, 20px); } /* 澶撮儴 */ header { width: 100%; height: auto; position: fixed; top: 0; z-index: 30; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; /* PC 澶撮儴 */ /* 浜岀骇澶撮儴 */ /* 鎵嬫満鐗堝ご閮 */ } header .header_box { width: 100%; height: var(--height); background: #fff; position: relative; z-index: 5; --height: 80px; } header .header_box .header_main { width: 100%; height: 100%; padding: 0 30px; position: relative; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } header .header_box .header_main::before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 3; background: #FFF; } header .header_box .header_main::after { content: ''; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; z-index: 4; background: #F4F4F4; } header .header_box .header_main .info_l { width: auto; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } header .header_box .header_main .info_l .logo { width: auto; max-width: 170px; height: 100%; position: relative; z-index: 5; font-size: 0; overflow: hidden; } header .header_box .header_main .info_l .nav_box { width: auto; height: 100%; margin-left: clamp(0.625rem, calc(-2.452rem + 3.85vw), 1.875rem); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } header .header_box .header_main .info_l .nav_box .about { width: auto; height: 100%; } header .header_box .header_main .info_l .nav_box .about .btn { width: clamp(3.125rem, calc(-1.49rem + 5.77vw), 5rem); height: 100%; position: relative; z-index: 5; border: 1px solid #F4F4F4; border-top: 0; border-bottom: 0; cursor: pointer; } header .header_box .header_main .info_l .nav_box .about .btn i { width: 20px; height: 2px; background: #f39800; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .header_box .header_main .info_l .nav_box .about .btn i:first-child { margin-top: -4px; } header .header_box .header_main .info_l .nav_box .about .btn i:last-child { margin-top: 4px; } header .header_box .header_main .info_l .nav_box .about .btn.active i:nth-child(2) { opacity: 0; } header .header_box .header_main .info_l .nav_box .about .btn.active i:first-child { margin: 0; transform: translate(-50%, -50%) rotate(-45deg); } header .header_box .header_main .info_l .nav_box .about .btn.active i:last-child { margin: 0; transform: translate(-50%, -50%) rotate(45deg); } header .header_box .header_main .info_l .nav_box .about .btn.active + .about_box { top: 100%; opacity: 1; visibility: initial; } header .header_box .header_main .info_l .nav_box .about .btn.active + .about_box .back { transform: translate(45%, 100%); -webkit-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; transition-delay: .6s; } header .header_box .header_main .info_l .nav_box .about .btn.active + .about_box .about_main .title_box, header .header_box .header_main .info_l .nav_box .about .btn.active + .about_box .about_main .tel_box, header .header_box .header_main .info_l .nav_box .about .btn.active + .about_box .about_main .content .qrcode, header .header_box .header_main .info_l .nav_box .about .btn.active + .about_box .about_main .content .number_box, header .header_box .header_main .info_l .nav_box .about .btn.active + .about_box .about_main .menu { -webkit-transition: all 0.55s ease; -o-transition: all 0.55s ease; transition: all 0.55s ease; transform: translate(0); opacity: 1; } header .header_box .header_main .info_l .nav_box .about .btn.active + .about_box .about_main .tel_box { transition-delay: .2s; } header .header_box .header_main .info_l .nav_box .about .btn.active + .about_box .about_main .content .qrcode { transition-delay: .4s; } header .header_box .header_main .info_l .nav_box .about .btn.active + .about_box .about_main .menu { transition-delay: .6s; } header .header_box .header_main .info_l .nav_box .about .btn.active + .about_box .about_main .content .number_box { transition-delay: 1.2s; } header .header_box .header_main .info_l .nav_box .about .fadeIn { opacity: 0; transform: translateY(100px); } header .header_box .header_main .info_l .nav_box .about .about_box { width: 100%; height: calc(100vh - 80px); position: absolute; top: 100%; left: 0; z-index: 1; background: #FFF; opacity: 0; visibility: hidden; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; overflow: hidden; } header .header_box .header_main .info_l .nav_box .about .about_box .about_c { width: 100%; height: 100%; position: relative; z-index: 1; overflow: hidden; } header .header_box .header_main .info_l .nav_box .about .about_box .center_box { height: 100%; } header .header_box .header_main .info_l .nav_box .about .about_box .about_main { width: 100%; height: 100%; padding-top: clamp(50px, 5.20833333vw, 100px); padding-bottom: clamp(30px, 3.125vw, 60px); overflow: hidden; } header .header_box .header_main .info_l .nav_box .about .about_box .about_main .title_box { width: 100%; height: auto; opacity: 0; transform: translateY(100px); overflow: hidden; } header .header_box .header_main .info_l .nav_box .about .about_box .about_main .title_box .title { font-size: 42px; font-family: 'Rubik', 'ff100'; color: #2c303d; line-height: 1.2; } @media (max-width:1680px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .title_box .title { font-size: 40px; } } @media (max-width:1440px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .title_box .title { font-size: 34px; } } @media (max-width:1280px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .title_box .title { font-size: 28px; } } @media (max-width:1024px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .title_box .title { font-size: 24px; } } @media (max-width:768px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .title_box .title { font-size: 22px; } } header .header_box .header_main .info_l .nav_box .about .about_box .about_main .tel_box { width: 100%; height: auto; opacity: 0; transform: translateY(100px); margin-top: clamp(15px, 1.5625vw, 30px); } header .header_box .header_main .info_l .nav_box .about .about_box .about_main .tel_box .word { width: 100%; height: auto; font-size: 16px; font-family: 'Rubik', 'ff300'; color: #2c303d; line-height: 1.2; } @media (max-width:1440px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .tel_box .word { font-size: 14px; } } @media (max-width:1024px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .tel_box .word { font-size: 13px; } } @media (max-width:768px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .tel_box .word { font-size: 12px; } } header .header_box .header_main .info_l .nav_box .about .about_box .about_main .tel_box .phone { width: 100%; height: auto; font-size: 30px; font-family: 'Orbitron', 'ff800'; color: #003281; } @media (max-width:1680px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .tel_box .phone { font-size: 26px; } } @media (max-width:1440px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .tel_box .phone { font-size: 24px; } } @media (max-width:1280px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .tel_box .phone { font-size: 22px; } } @media (max-width:1024px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .tel_box .phone { font-size: 20px; } } @media (max-width:768px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .tel_box .phone { font-size: 18px; } } header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content { width: 100%; height: auto; margin-top: 15px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .qrcode { width: auto; height: auto; opacity: 0; transform: translateY(100px); } header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .qrcode .word { width: 100%; height: auto; font-size: 18px; font-family: 'Rubik', 'ff200'; color: #2c303d; line-height: 1.2; } @media (max-width:1440px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .qrcode .word { font-size: 16px; } } @media (max-width:1024px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .qrcode .word { font-size: 14px; } } @media (max-width:768px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .qrcode .word { font-size: 13px; } } header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .qrcode .img { width: 90px; height: auto; margin-top: 10px; font-size: 0; } header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .number_box { width: auto; height: auto; opacity: 0; transform: translateY(100px); } header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .number_box .word, header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .number_box .title { width: 100%; height: auto; font-size: 18px; font-family: 'Rubik', 'ff200'; color: #FFF; line-height: 1.2; } @media (max-width:1440px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .number_box .word, header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .number_box .title { font-size: 16px; } } @media (max-width:1024px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .number_box .word, header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .number_box .title { font-size: 14px; } } @media (max-width:768px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .number_box .word, header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .number_box .title { font-size: 13px; } } header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .number_box .number { width: 100%; height: auto; margin-top: 10px; font-size: 120px; font-family: 'Pill', 'ff400'; color: #FFF; line-height: 1; } @media (max-width:1680px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .number_box .number { font-size: 105px; } } @media (max-width:1440px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .number_box .number { font-size: 90px; } } @media (max-width:1280px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .number_box .number { font-size: 80px; } } @media (max-width:1024px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .number_box .number { font-size: 64px; } } @media (max-width:990px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .number_box .number { font-size: 62px; } } @media (max-width:768px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .number_box .number { font-size: 48px; } } @media (max-width:640px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .number_box .number { font-size: 40px; } } header .header_box .header_main .info_l .nav_box .about .about_box .about_main .content .number_box .title { text-indent: 1em; } header .header_box .header_main .info_l .nav_box .about .about_box .about_main .menu { width: 100%; max-width: 600px; height: auto; opacity: 0; transform: translateY(100px); display: table; } header .header_box .header_main .info_l .nav_box .about .about_box .about_main .menu .item { width: 100%; height: auto; display: table-row; } header .header_box .header_main .info_l .nav_box .about .about_box .about_main .menu .item .title, header .header_box .header_main .info_l .nav_box .about .about_box .about_main .menu .item .details { display: table-cell; padding: 5px 0; font-family: 'Rubik', 'ff200'; font-size: 16px; color: #2c303d; line-height: 1; } @media (max-width:1440px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .menu .item .title, header .header_box .header_main .info_l .nav_box .about .about_box .about_main .menu .item .details { font-size: 14px; } } @media (max-width:1024px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .menu .item .title, header .header_box .header_main .info_l .nav_box .about .about_box .about_main .menu .item .details { font-size: 13px; } } @media (max-width:768px) { header .header_box .header_main .info_l .nav_box .about .about_box .about_main .menu .item .title, header .header_box .header_main .info_l .nav_box .about .about_box .about_main .menu .item .details { font-size: 12px; } } header .header_box .header_main .info_l .nav_box .about .about_box .about_main .menu .item .title { opacity: .6; } header .header_box .header_main .info_l .nav_box .about .about_box .about_main .menu .item .details { padding-left: clamp(15px, 1.5625vw, 30px); } header .header_box .header_main .info_l .nav_box .about .about_box .images { width: 100%; height: 100%; position: absolute; right: 0; top: 0; text-align: right; overflow: hidden; } header .header_box .header_main .info_l .nav_box .about .about_box .images img { width: 100%; height: 100%; object-fit: cover; } header .header_box .header_main .info_l .nav_box .about .about_box .back { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; transform: translateX(45%); visibility: visible; pointer-events: none; } header .header_box .header_main .info_l .nav_box .about .about_box .back span { width: 100%; height: 100%; display: block; background: #FFF; transform: skewX(45deg); } header .header_box .header_main .info_l .nav_box .nav { width: auto; height: 100%; border-left: 1px solid #f4f4f4; } header .header_box .header_main .info_l .nav_box .nav > ul { width: auto; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } header .header_box .header_main .info_l .nav_box .nav > ul > li { width: auto; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } header .header_box .header_main .info_l .nav_box .nav > ul > li .headline { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; position: relative; z-index: 5; cursor: pointer; } header .header_box .header_main .info_l .nav_box .nav > ul > li .headline a { width: 100%; height: 100%; padding: 0 clamp(0.75rem, calc(-2.019rem + 3.46vw), 1.875rem); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; font-size: clamp(0.875rem, 0.625rem + 0.31vw, 1rem); white-space: nowrap; } header .header_box .header_main .info_l .nav_box .nav > ul > li .headline a .title { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; grid-gap: clamp(0.375rem, calc(-0.24rem + 0.77vw), 0.625rem); } header .header_box .header_main .info_l .nav_box .nav > ul > li .headline a .word { width: 100%; height: 100%; position: relative; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; font-size: clamp(0.875rem, 0.625rem + 0.31vw, 1rem); white-space: nowrap; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } header .header_box .header_main .info_l .nav_box .nav > ul > li .headline a .word::after { content: ''; width: 0; height: 1px; position: absolute; bottom: 0; left: 50%; z-index: 1; transform: translateX(-50%); background: #f39800; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } header .header_box .header_main .info_l .nav_box .nav > ul > li .headline a .title .icon { width: clamp(0.375rem, calc(-0.24rem + 0.77vw), 0.625rem); height: clamp(0.375rem, calc(-0.24rem + 0.77vw), 0.625rem); background: #2c303d; -webkit-mask: url('../images/nav_down.png') no-repeat center / 100% auto; mask: url('../images/nav_down.png') no-repeat center / 100% auto; flex: 0 0 clamp(0.375rem, calc(-0.24rem + 0.77vw), 0.625rem); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width: 1200px) { header .header_box .header_main .info_l .nav_box .nav > ul > li .headline a .title { grid-gap: 0; } header .header_box .header_main .info_l .nav_box .nav > ul > li .headline a .title .icon { display: none; } } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box { width: 100%; height: auto; position: absolute; top: 100%; left: 0; z-index: 2; background: #FFF; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05); overflow: hidden; visibility: hidden; pointer-events: none; opacity: 0; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .center_box { height: 100%; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav { width: 16.66666666666667%; height: 100%; padding-top: clamp(30px, 3.125vw, 60px); padding-bottom: clamp(30px, 3.125vw, 60px); position: relative; z-index: 1; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav::after { content: ''; width: 1px; height: 100vh; position: absolute; top: 0; right: 0; z-index: 1; background: #F4F4F4; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_title { width: 100%; height: auto; font-size: 30px; font-family: 'Rubik', 'ff800'; color: #2c303d; } @media (max-width:1680px) { header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_title { font-size: 26px; } } @media (max-width:1440px) { header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_title { font-size: 24px; } } @media (max-width:1280px) { header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_title { font-size: 22px; } } @media (max-width:1024px) { header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_title { font-size: 20px; } } @media (max-width:768px) { header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_title { font-size: 18px; } } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu { width: 100%; height: auto; margin-top: clamp(25px, 2.60416667vw, 50px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; -ms-flex-wrap: wrap; grid-gap: 30px 0; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item { width: 100%; height: auto; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item .title { width: 100%; height: auto; line-height: 1; font-size: 20px; color: #B6B6B6; cursor: pointer; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1680px) { header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item .title { font-size: 18px; } } @media (max-width:1440px) { header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item .title { font-size: 17px; } } @media (max-width:1280px) { header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item .title { font-size: 16px; } } @media (max-width:1024px) { header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item .title { font-size: 15px; } } @media (max-width:768px) { header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item .title { font-size: 14px; } } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item .menu { width: 100%; height: auto; margin-top: 20px; padding: 30px 0; position: relative; z-index: 1; display: none; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item .menu::before, header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item .menu::after { content: ''; width: 100vw; height: 1px; position: absolute; right: 0; z-index: 1; background: #F4F4F4; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item .menu::before { top: 0; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item .menu::after { bottom: 0; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item .menu .one { width: 100%; height: auto; position: relative; z-index: 1; cursor: pointer; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item .menu .one .icon { width: 9px; height: 11px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: #f39800; opacity: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; -webkit-mask: url('../svg/icon_arrow4.svg') no-repeat center / cover; mask: url('../svg/icon_arrow4.svg') no-repeat center / cover; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item .menu .one .word { width: 100%; height: auto; line-height: 1; font-size: 16px; color: #2c303d; white-space: nowrap; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1440px) { header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item .menu .one .word { font-size: 14px; } } @media (max-width:1024px) { header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item .menu .one .word { font-size: 13px; } } @media (max-width:768px) { header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item .menu .one .word { font-size: 12px; } } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item .menu .one:first-child ~ .one { margin-top: 20px; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item .menu .one:hover .word { color: #f39800; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item .menu .one.active .icon { opacity: 1; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item .menu .one.active .word { text-indent: 1.5em; color: #f39800; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item:first-child .menu { display: block; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .sidebar_nav .nav_menu .item.active .title { color: #f39800; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content { width: 79.16666666666667%; height: auto; max-height: calc(92vh - var(--height)); padding-top: clamp(30px, 3.125vw, 60px); padding-bottom: clamp(30px, 3.125vw, 60px); overflow: hidden; overflow-y: auto; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .close { /*width: 100%;*/height: 0;pointer-events: none;display: flex;justify-content: end;position: relative;z-index: 20;float: right; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .close .icon { width: 1em;height: 1em;font-size: 20px;position: relative;z-index: 2;transition: all .2s ease;transform: rotate(45deg);pointer-events: initial;cursor: pointer;} header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .close .icon::before, header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .close .icon::after {content: '';width: 100%;height: 100%;position: absolute;top: 50%;left: 50%;z-index: 1;transform: translate(-50%, -50%);background: #f39800;transition: all .3s ease;} header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .close .icon::before { height: 2px; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .close .icon::after { width: 2px; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .swiper_box { width: 100%; height: 100%; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .swiper_box .swiper-wrapper { width: 100%; height: 100%; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .swiper_box .swiper-slide { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .swiper_box .subnav_swiper { width: 100%; height: 100%; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .swiper_box .inside_title .title a { -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .swiper_box .inside_title .title a:hover { color: #f39800; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .swiper_box .inside_title + .content { margin-top: clamp(25px, 2.60416667vw, 50px); } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content { width: 100%; height: auto; display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 75px 60px; scrollbar-width: thin; scrollbar-color: #f39800 transparent; overflow: hidden; overflow-y: auto; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content::-webkit-scrollbar { width: 5px; height: 2px; background-color: #f5f5f5; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content::-webkit-scrollbar-thumb { background-color: #f39800; border-radius: 10px; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item { width: 100%; height: auto; grid-column: span 2; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item .item_title { width: 100%; height: auto; padding-bottom: 20px; position: relative; z-index: 1; text-indent: 1em; font-size: 20px; line-height: 1; } @media (max-width:1680px) { header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item .item_title { font-size: 18px; } } @media (max-width:1440px) { header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item .item_title { font-size: 17px; } } @media (max-width:1280px) { header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item .item_title { font-size: 16px; } } @media (max-width:1024px) { header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item .item_title { font-size: 15px; } } @media (max-width:768px) { header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item .item_title { font-size: 14px; } } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item .item_title::before { content: ''; width: 4px; height: .8em; position: absolute; top: .1em; left: 0; z-index: 1; background: #f39800; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item .item_title a { color: #2c303d; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item .item_title a:hover { color: #f39800; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item .item_title::after { content: ''; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; z-index: 1; background: #F4F4F4; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item .menu_box { width: 100%; height: auto; position: relative; z-index: 1; display: grid; grid-template-columns: 100%; overflow: hidden; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item .menu_box .menu_item { width: 100%; height: auto; padding: 30px 30px 0 0; position: relative; z-index: 1; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item .menu_box .menu_item .menu_title { width: 100%; height: auto; line-height: 1; font-size: 16px; } @media (max-width:1440px) { header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item .menu_box .menu_item .menu_title { font-size: 14px; } } @media (max-width:1024px) { header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item .menu_box .menu_item .menu_title { font-size: 13px; } } @media (max-width:768px) { header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item .menu_box .menu_item .menu_title { font-size: 12px; } } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item .menu_box .menu_item .menu_title a { color: #2c303d; color: #f39800 !important; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item .menu_box .menu_item .menu_title a:hover { color: #f39800; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item .menu_box .menu_item .menu { width: 100%; height: auto; display: grid; grid-template-columns: 100%; grid-gap: 10px; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item .menu_box .menu_item .menu .one { width: 100%; height: auto; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item .menu_box .menu_item .menu .one a { display: inline-block; font-size: 13px; font-family: 'Rubik', 'ff300'; color: #2c303d; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item .menu_box .menu_item .menu .one a:hover { /*transform: translateX(20px);*/ color: #0867d1; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item .menu_box .menu_item .menu_title + .menu { margin-top: 20px; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item._block { grid-column: span 6; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item._block .menu_box { grid-template-columns: repeat(6, 1fr); grid-gap: 30px 0; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item._block .menu_box .menu_item { grid-column: span 2; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item._block .menu_box .menu_item:nth-child(3) ~ .menu_item::after { content: ''; width: 100%; height: 1px; position: absolute; top: 0; left: 0; z-index: 1; background: #F4F4F4; display: block; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .subnav_main .subnav_content .content .item._active { grid-column: span 3; } header .header_box .header_main .info_l .nav_box .nav > ul > li .headline a.active .title .word::after, header .header_box .header_main .info_l .nav_box .nav > ul > li .headline a.is_active .title .word::after{ width: 100%; } header .header_box .header_main .info_l .nav_box .nav > ul > li .headline a:hover .title, header .header_box .header_main .info_l .nav_box .nav > ul > li .headline a.active .title, header .header_box .header_main .info_l .nav_box .nav > ul > li .headline a.is_active .title, header .header_box .header_main .info_l .nav_box .nav > ul > li .headline a.active .title .word, header .header_box .header_main .info_l .nav_box .nav > ul > li .headline a.is_active .title .word{ color: #F39800; } header .header_box .header_main .info_l .nav_box .nav > ul > li .headline a:hover .title .icon, header .header_box .header_main .info_l .nav_box .nav > ul > li .headline a.active .title .icon, header .header_box .header_main .info_l .nav_box .nav > ul > li .headline a.is_active .title .icon { background: #F39800; } header .header_box .header_main .info_l .nav_box .nav > ul > li .headline a.is_active .title .icon { transform: rotate(-180deg); } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box.active { opacity: 1; visibility: visible; pointer-events: initial; z-index: 3; } @media (max-width:1680px) { header .header_box .header_main .info_l .logo { max-width: 160px; } } @media (max-width:1440px) { header .header_box .header_main .info_l .logo { max-width: 130px; } header .header_box .header_main .info_l .nav_box .nav ul li > a { font-size: 15px; padding: 0 15px; } } @media (max-width:1280px) { header .header_box .header_main .info_l .logo { max-width: 140px; } header .header_box .header_main .info_l .nav_box .nav ul li > a { padding: 0 14px; font-size: 13px; } } @media (max-width:1024px) { header .header_box .header_main .info_l .logo { max-width: 120px; } } header .header_box .header_main .info_r { width: auto; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; grid-gap: clamp(0.625rem, calc(-0.913rem + 1.92vw), 1.25rem); } header .header_box .header_main .info_r .close_btn { width: 100%; height: 100%; transform: translateY(-100%); position: relative; z-index: 5; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; --o: 0; --bg: #003281; --c: #95accd; } header .header_box .header_main .info_r .close_btn::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background: var(--bg); opacity: var(--o); -webkit-transition: all 0.15s ease; -o-transition: all 0.15s ease; transition: all 0.15s ease; } header .header_box .header_main .info_r .close_btn .icon { width: 1em; height: 1em; font-size: 20px; position: relative; z-index: 2; opacity: var(--o); -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } header .header_box .header_main .info_r .close_btn .icon::before, header .header_box .header_main .info_r .close_btn .icon::after { content: ''; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); background: var(--c); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .header_box .header_main .info_r .close_btn .icon::before { height: 2px; } header .header_box .header_main .info_r .close_btn .icon::after { width: 2px; } header .header_box .header_main .info_r .info_login { width: auto; height: 100%; position: relative; z-index: 5; margin-right: clamp(10px, 1.04166667vw, 20px); cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; filter: brightness(0); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .header_box .header_main .info_r .info_login a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } header .header_box .header_main .info_r .info_login .icon { width: clamp(1.125rem, 0.875rem + 0.31vw, 1.25rem); font-size: 0; } header .header_box .header_main .info_r .info_login .title { margin-left: .5em; font-size: 14px; color: #f39800; } header .header_box .header_main .info_r .info_login:hover { filter: none; } @media (max-width:1280px) { header .header_box .header_main .info_r .info_login .icon { width: 14px; } header .header_box .header_main .info_r .info_login .title { font-size: 13px; } } header .header_box .header_main .info_r .info_lang { width: auto; height: 100%; position: relative; z-index: 5; -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } header .header_box .header_main .info_r .info_lang .one { width: auto; height: 100%; position: relative; z-index: 2; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } header .header_box .header_main .info_r .info_lang .one a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } header .header_box .header_main .info_r .info_lang .one .icon { width: clamp(1.375rem, 0.25rem + 1.41vw, 1.938rem); height: auto; font-size: 0; filter: brightness(0); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .header_box .header_main .info_r .info_lang .one .active { width: 6px; height: 3px; margin-left: 4px; background: #d3d3d3; -webkit-clip-path: polygon(0 0, 0 1px, 1px 1px, 1px 2px, 2px 2px, 2px 3px, 4px 3px, 4px 2px, 5px 2px, 5px 1px, 6px 1px, 6px 0); clip-path: polygon(0 0, 0 1px, 1px 1px, 1px 2px, 2px 2px, 2px 3px, 4px 3px, 4px 2px, 5px 2px, 5px 1px, 6px 1px, 6px 0); } header .header_box .header_main .info_r .info_lang .one .icon, header .header_box .header_main .info_r .info_lang .one .active { -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } header .header_box .header_main .info_r .info_lang .one a:hover .icon { filter: none; opacity: 1; } header .header_box .header_main .info_r .info_lang .one.last { position: absolute; right: 0; top: 0; z-index: 1; } header .header_box .header_main .info_r .info_lang .one.last .icon { opacity: .4; } header .header_box .header_main .info_r .info_lang:hover { padding-right: clamp(2.188rem, 0.313rem + 2.34vw, 3.125rem); } header .header_box .header_main .info_r .info_lang:hover .one.first .active { transform: rotate(-90deg); -ms-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); background: #f39800; } @media (max-width:1280px) { header .header_box .header_main .info_r .info_lang .one .icon { width: 24px; } header .header_box .header_main .info_r .info_lang:hover { padding-right: 35px; } } header .header_box .header_main .info_r .info_son { width: auto; height: 100%; } header .header_box .header_main .info_r .info_son .son_btn { width: auto; height: 100%; position: relative; z-index: 5; padding-left: clamp(7.5px, 0.78125vw, 15px); padding-right: clamp(7.5px, 0.78125vw, 15px); cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } header .header_box .header_main .info_r .info_son .son_btn .title { font-size: 14px; } @media (max-width:1280px) { header .header_box .header_main .info_r .info_son .son_btn .title { font-size: 13px; } } @media (max-width:1024px) { header .header_box .header_main .info_r .info_son .son_btn .title { font-size: 12px; } } header .header_box .header_main .info_r .info_son .son_btn .active { width: 6px; height: 3px; margin-left: 4px; background: #d3d3d3; -webkit-clip-path: polygon(0 0, 0 1px, 1px 1px, 1px 2px, 2px 2px, 2px 3px, 4px 3px, 4px 2px, 5px 2px, 5px 1px, 6px 1px, 6px 0); clip-path: polygon(0 0, 0 1px, 1px 1px, 1px 2px, 2px 2px, 2px 3px, 4px 3px, 4px 2px, 5px 2px, 5px 1px, 6px 1px, 6px 0); } header .header_box .header_main .info_r .info_son .son_btn .title, header .header_box .header_main .info_r .info_son .son_btn .active { -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .header_box .header_main .info_r .info_son .son_box { width: 100%; height: calc(100vh - 80px); position: absolute; top: 100%; left: 0; z-index: 20; opacity: 0; visibility: hidden; pointer-events: none; overflow: hidden; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .header_box .header_main .info_r .info_son .son_box::after { content: ''; width: 100vw; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background: #000; opacity: .8; } header .header_box .header_main .info_r .info_son .son_box .son_content { width: var(--width); height: 100%; padding-left: clamp(20px, 2.08333333vw, 40px); padding-right: clamp(20px, 2.08333333vw, 40px); padding-top: clamp(40px, 4.16666667vw, 80px); padding-bottom: clamp(40px, 4.16666667vw, 80px); transform: translateX(100%); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; transition-timing-function: ease; position: absolute; right: 0; z-index: 2; background: #f39800; overflow: hidden; } header .header_box .header_main .info_r .info_son .son_box .son_content #arrow { width: 100vw; height: 100%; position: absolute; right: 0; top: 50%; transform: translate(8%, -30%); } header .header_box .header_main .info_r .info_son .son_box .son_content .title_box { width: 100%; height: auto; padding-bottom: clamp(10px, 1.04166667vw, 20px); position: relative; z-index: 5; font-size: 36px; font-family: 'Rubik', 'ff200'; color: #FFF; line-height: 1.2; } @media (max-width:1680px) { header .header_box .header_main .info_r .info_son .son_box .son_content .title_box { font-size: 32px; } } @media (max-width:1440px) { header .header_box .header_main .info_r .info_son .son_box .son_content .title_box { font-size: 28px; } } @media (max-width:1280px) { header .header_box .header_main .info_r .info_son .son_box .son_content .title_box { font-size: 24px; } } @media (max-width:1024px) { header .header_box .header_main .info_r .info_son .son_box .son_content .title_box { font-size: 22px; } } @media (max-width:768px) { header .header_box .header_main .info_r .info_son .son_box .son_content .title_box { font-size: 20px; } } header .header_box .header_main .info_r .info_son .son_box .son_content .menu { width: 100%; height: auto; position: relative; z-index: 5; margin-top: clamp(20px, 2.08333333vw, 40px); } header .header_box .header_main .info_r .info_son .son_box .son_content .menu .one { width: 100%; height: auto; } header .header_box .header_main .info_r .info_son .son_box .son_content .menu .one a { position: relative; z-index: 1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .header_box .header_main .info_r .info_son .son_box .son_content .menu .one a .icon { width: 22px; height: 22px; background: url('../images/icon_arrow.png') no-repeat center / cover; font-size: 0; position: absolute; left: 0; top: 50%; opacity: 0; transform: translate(-100%, -50%); -webkit-transition: all 0.55s ease; -o-transition: all 0.55s ease; transition: all 0.55s ease; } header .header_box .header_main .info_r .info_son .son_box .son_content .menu .one a .word { font-family: 'Rubik', 'ff300'; font-size: 18px; color: rgba(255, 255, 255, 0.45); line-height: 1; padding: 0 2em 0 0; /*white-space: nowrap;*/ -webkit-transition: all 0.55s ease; -o-transition: all 0.55s ease; transition: all 0.55s ease; } @media (max-width:1440px) { header .header_box .header_main .info_r .info_son .son_box .son_content .menu .one a .word { font-size: 16px; } } @media (max-width:1024px) { header .header_box .header_main .info_r .info_son .son_box .son_content .menu .one a .word { font-size: 14px; } } @media (max-width:768px) { header .header_box .header_main .info_r .info_son .son_box .son_content .menu .one a .word { font-size: 13px; } } header .header_box .header_main .info_r .info_son .son_box .son_content .menu .one a:hover .icon { transform: translate(0, -50%); opacity: 1; } header .header_box .header_main .info_r .info_son .son_box .son_content .menu .one a:hover .word { padding: 0 0 0 2em; color: #FFF; } header .header_box .header_main .info_r .info_son .son_box .son_content .menu .one:first-child ~ .one { margin-top: clamp(15px, 1.5625vw, 30px); } @media (max-width:1366px) { header .header_box .header_main .info_r .info_son .son_box { height: calc(100vh - 70px); } } @media (max-width:1280px) { header .header_box .header_main .info_r .info_son .son_box .son_content .menu .one a { white-space: normal; } header .header_box .header_main .info_r .info_son .son_box .son_content .menu .one:hover { text-indent: 0; } } header .header_box .header_main .info_r .info_son:hover .son_btn .title { color: #f39800; } header .header_box .header_main .info_r .info_son:hover .son_btn .active { background: #f39800; } header .header_box .header_main .info_r .info_son .close_btn.active { --bg: #f39800; --c: #FFF; --o: 1; } header .header_box .header_main .info_r .info_son .close_btn.active .icon { transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); } header .header_box .header_main .info_r .info_son .close_btn.active + .son_box { margin: 0; opacity: 1; visibility: visible; pointer-events: initial; } header .header_box .header_main .info_r .info_son .close_btn.active + .son_box .son_content { transform: translate(0); } header .header_box .header_main .info_r .info_support { width: auto; height: 100%; } header .header_box .header_main .info_r .info_support .support_btn { width: auto; height: 100%; position: relative; z-index: 5; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } header .header_box .header_main .info_r .info_support .support_btn .support_center { width: auto; height: 36px; padding: 0 13px; border-radius: 50px; border: 1px solid #f4f4f4; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .header_box .header_main .info_r .info_support .support_btn .icon { font-size: 0; filter: brightness(0); opacity: .4; } header .header_box .header_main .info_r .info_support .support_btn .title { margin-left: .5em; font-size: 14px; line-height: 1; } @media (max-width:1280px) { header .header_box .header_main .info_r .info_support .support_btn .title { font-size: 13px; } } @media (max-width:1024px) { header .header_box .header_main .info_r .info_support .support_btn .title { font-size: 12px; } } header .header_box .header_main .info_r .info_support .support_btn .icon, header .header_box .header_main .info_r .info_support .support_btn .title { -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .header_box .header_main .info_r .info_support .support_box { width: 100%; height: calc(100vh - 80px); position: absolute; top: 100%; left: 0; z-index: 20; opacity: 0; visibility: hidden; pointer-events: none; overflow: hidden; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .header_box .header_main .info_r .info_support .support_box::after { content: ''; width: 100vw; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background: #000; opacity: .8; } header .header_box .header_main .info_r .info_support .support_box .support_content { width: var(--width); height: 100%; padding-left: clamp(20px, 2.08333333vw, 40px); padding-right: clamp(20px, 2.08333333vw, 40px); padding-top: clamp(40px, 4.16666667vw, 80px); padding-bottom: clamp(40px, 4.16666667vw, 80px); transform: translateX(100%); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; transition-timing-function: ease; position: absolute; right: 0; z-index: 2; background: #f39800; overflow: hidden; } header .header_box .header_main .info_r .info_support .support_box .support_content #arrow { width: 100vw; height: 100%; position: absolute; right: 0; top: 50%; transform: translate(8%, -30%); } header .header_box .header_main .info_r .info_support .support_box .support_content .title_box { width: 100%; height: auto; padding-bottom: clamp(10px, 1.04166667vw, 20px); position: relative; z-index: 5; font-size: 36px; font-family: 'Rubik', 'ff200'; color: #FFF; line-height: 1.2; } @media (max-width:1680px) { header .header_box .header_main .info_r .info_support .support_box .support_content .title_box { font-size: 32px; } } @media (max-width:1440px) { header .header_box .header_main .info_r .info_support .support_box .support_content .title_box { font-size: 28px; } } @media (max-width:1280px) { header .header_box .header_main .info_r .info_support .support_box .support_content .title_box { font-size: 24px; } } @media (max-width:1024px) { header .header_box .header_main .info_r .info_support .support_box .support_content .title_box { font-size: 22px; } } @media (max-width:768px) { header .header_box .header_main .info_r .info_support .support_box .support_content .title_box { font-size: 20px; } } header .header_box .header_main .info_r .info_support .support_box .support_content .menu { width: 100%; height: auto; position: relative; z-index: 5; margin-top: clamp(20px, 2.08333333vw, 40px); } header .header_box .header_main .info_r .info_support .support_box .support_content .menu .one { width: 100%; height: auto; } header .header_box .header_main .info_r .info_support .support_box .support_content .menu .one a { position: relative; z-index: 1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .header_box .header_main .info_r .info_support .support_box .support_content .menu .one a .icon { width: 22px; height: 22px; background: url('../images/icon_arrow.png') no-repeat center / cover; font-size: 0; position: absolute; left: 0; top: 50%; opacity: 0; transform: translate(-100%, -50%); -webkit-transition: all 0.55s ease; -o-transition: all 0.55s ease; transition: all 0.55s ease; } header .header_box .header_main .info_r .info_support .support_box .support_content .menu .one a .word { font-family: 'Rubik', 'ff300'; font-size: 18px; color: rgba(255, 255, 255, 0.45); line-height: 1; white-space: nowrap; -webkit-transition: all 0.55s ease; -o-transition: all 0.55s ease; transition: all 0.55s ease; } @media (max-width:1440px) { header .header_box .header_main .info_r .info_support .support_box .support_content .menu .one a .word { font-size: 16px; } } @media (max-width:1024px) { header .header_box .header_main .info_r .info_support .support_box .support_content .menu .one a .word { font-size: 14px; } } @media (max-width:768px) { header .header_box .header_main .info_r .info_support .support_box .support_content .menu .one a .word { font-size: 13px; } } header .header_box .header_main .info_r .info_support .support_box .support_content .menu .one a:hover .icon { transform: translate(0, -50%); opacity: 1; } header .header_box .header_main .info_r .info_support .support_box .support_content .menu .one a:hover .word { text-indent: 2em; color: #FFF; } header .header_box .header_main .info_r .info_support .support_box .support_content .menu .one:first-child ~ .one { margin-top: clamp(15px, 1.5625vw, 30px); } @media (max-width:1366px) { header .header_box .header_main .info_r .info_support .support_box { height: calc(100vh - 70px); } } @media (max-width:1280px) { header .header_box .header_main .info_r .info_support .support_box .son_content .menu .one a { white-space: normal; } header .header_box .header_main .info_r .info_support .support_box .son_content .menu .one:hover { text-indent: 0; } } header .header_box .header_main .info_r .info_support:hover .support_btn .support_center { border-color: #f39800; background: #f39800; } header .header_box .header_main .info_r .info_support:hover .support_btn .icon { opacity: 1; filter: brightness(0) invert(1); } header .header_box .header_main .info_r .info_support:hover .support_btn .title { color: #fff; } header .header_box .header_main .info_r .info_support .close_btn.active { --bg: #f39800; --c: #FFF; --o: 1; } header .header_box .header_main .info_r .info_support .close_btn.active .icon { transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); } header .header_box .header_main .info_r .info_support .close_btn.active + .support_box { margin: 0; opacity: 1; visibility: visible; pointer-events: initial; } header .header_box .header_main .info_r .info_support .close_btn.active + .support_box .support_content { transform: translate(0); } @media (max-width:1024px) { header .header_box .header_main .info_r .info_support { display: none; } } header .header_box .header_main .info_r .info_search { width: auto; height: 100%; } header .header_box .header_main .info_r .info_search .search_btn { width: clamp(3.125rem, calc(-1.49rem + 5.77vw), 5rem); height: 100%; position: relative; z-index: 5; border: 1px solid #f4f4f4; border-top: 0; border-bottom: 0; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .header_box .header_main .info_r .info_search .search_btn i { font-size: 18px; } header .header_box .header_main .info_r .info_search .search_box { width: 100%; height: calc(100vh - 80px); position: absolute; left: 0; top: 100%; z-index: 1; background: #FFF; margin-top: 10px; opacity: 0; visibility: hidden; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .header_box .header_main .info_r .info_search .search_box .center_box { height: 100%; } header .header_box .header_main .info_r .info_search .search_box .search_main { width: 100%; max-width: 720px; height: 100%; margin: 0 auto; padding-top: clamp(40px, 4.16666667vw, 80px); padding-bottom: clamp(40px, 4.16666667vw, 80px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } header .header_box .header_main .info_r .info_search .search_box .search_main .form_title { width: 100%; height: auto; text-align: center; font-size: 36px; font-family: 'Rubik', 'ff200'; color: #2c303d; } @media (max-width:1680px) { header .header_box .header_main .info_r .info_search .search_box .search_main .form_title { font-size: 32px; } } @media (max-width:1440px) { header .header_box .header_main .info_r .info_search .search_box .search_main .form_title { font-size: 28px; } } @media (max-width:1280px) { header .header_box .header_main .info_r .info_search .search_box .search_main .form_title { font-size: 24px; } } @media (max-width:1024px) { header .header_box .header_main .info_r .info_search .search_box .search_main .form_title { font-size: 22px; } } @media (max-width:768px) { header .header_box .header_main .info_r .info_search .search_box .search_main .form_title { font-size: 20px; } } header .header_box .header_main .info_r .info_search .search_box .search_main .form_box { width: 100%; height: auto; margin-top: clamp(25px, 2.60416667vw, 50px); } header .header_box .header_main .info_r .info_search .search_box .search_main .form_box form { width: 100%; height: auto; padding-bottom: clamp(10px, 1.04166667vw, 20px); border-bottom: 1px solid #A5A6AB; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } header .header_box .header_main .info_r .info_search .search_box .search_main .form_box .icon { width: 40px; height: 40px; margin-right: 20px; background: #2c303d; -webkit-mask: url('../svg/icon_search.svg') no-repeat center / cover; -moz-mask: url('../svg/icon_search.svg') no-repeat center / cover; -ms-mask: url('../svg/icon_search.svg') no-repeat center / cover; -o-mask: url('../svg/icon_search.svg') no-repeat center / cover; mask: url('../svg/icon_search.svg') no-repeat center / cover; } header .header_box .header_main .info_r .info_search .search_box .search_main .form_box .input { flex: 1; width: 100%; height: auto; padding-left: 20px; border-left: 1px solid #2c303d; } header .header_box .header_main .info_r .info_search .search_box .search_main .form_box .input input { width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; font-size: 24px; font-family: 'Rubik', 'ff200'; color: #2c303d; } @media (max-width:1680px) { header .header_box .header_main .info_r .info_search .search_box .search_main .form_box .input input { font-size: 22px; } } @media (max-width:1440px) { header .header_box .header_main .info_r .info_search .search_box .search_main .form_box .input input { font-size: 20px; } } @media (max-width:1280px) { header .header_box .header_main .info_r .info_search .search_box .search_main .form_box .input input { font-size: 18px; } } @media (max-width:1024px) { header .header_box .header_main .info_r .info_search .search_box .search_main .form_box .input input { font-size: 16px; } } @media (max-width:768px) { header .header_box .header_main .info_r .info_search .search_box .search_main .form_box .input input { font-size: 15px; } } header .header_box .header_main .info_r .info_search .search_box .search_main .form_box .input input::-webkit-input-placeholder { color: #2c303d; opacity: .4; } header .header_box .header_main .info_r .info_search .search_box .search_main .form_box .input input:-moz-placeholder { color: #2c303d; opacity: .4; } header .header_box .header_main .info_r .info_search .search_box .search_main .form_box .input input::-moz-placeholder { color: #2c303d; opacity: .4; } header .header_box .header_main .info_r .info_search .search_box .search_main .form_box .input input:-ms-input-placeholder { color: #2c303d; opacity: .4; } header .header_box .header_main .info_r .info_search .search_box .search_main .form_box .submit { width: 22px; height: 22px; } header .header_box .header_main .info_r .info_search .search_box .search_main .form_box .submit input { width: 100%; height: 100%; cursor: pointer; border: 0; background: #2c303d; -webkit-mask: url('../images/icon_arrow.png') no-repeat right / cover; -moz-mask: url('../images/icon_arrow.png') no-repeat right / cover; -ms-mask: url('../images/icon_arrow.png') no-repeat right / cover; -o-mask: url('../svg/icon_arrow.svg') no-repeat right; mask: url('../svg/icon_arrow.svg') no-repeat right; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .header_box .header_main .info_r .info_search .search_box .search_main .form_box .submit:hover input { -webkit-mask-position: center; -moz-mask-position: center; mask-position: center; background: #f39800; } header .header_box .header_main .info_r .info_search .search_box .search_main .tips_box { width: 100%; height: auto; margin-top: 20px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; } header .header_box .header_main .info_r .info_search .search_box .search_main .tips_box .tips { font-size: 12px; color: #2c303d; } header .header_box .header_main .info_r .info_search .search_box .search_main .tips_box .menu { width: 100%; height: auto; flex: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; -ms-flex-wrap: wrap; grid-gap: 5px 10px; } header .header_box .header_main .info_r .info_search .search_box .search_main .tips_box .menu a { width: auto; height: 26px; line-height: 26px; padding: 0 12px; font-size: 12px; color: #2c303d; border-radius: 50px; background: #E1E1E2; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .header_box .header_main .info_r .info_search .search_box .search_main .tips_box .menu a:hover { background: #f39800; color: #FFF; } header .header_box .header_main .info_r .info_search .search_box #arrow { opacity: .1; } header .header_box .header_main .info_r .info_search .search_box #arrow svg path { stroke: #2c303d; } header .header_box .header_main .info_r .info_search .close_btn { --bg: #F5F5F5; --c: #2c303d; } header .header_box .header_main .info_r .info_search:hover .search_btn { color: #f39800; } header .header_box .header_main .info_r .info_search .close_btn.active { --o: 1; } header .header_box .header_main .info_r .info_search .close_btn.active .icon { transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); } header .header_box .header_main .info_r .info_search .close_btn.active + .search_box { margin: 0; opacity: 1; visibility: visible; } @media (max-width:1280px) { header .header_box .header_main .info_r .info_search .search_box .search_main .icon, header .header_box .header_main .info_r .info_search .search_box .search_main .submit { width: 24px; height: 24px; } } header .header_box .header_main .info_r .info_main { width: auto; height: 100%; position: relative; z-index: 5; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } header .header_box .header_main .info_r .info_main .phone { font-size: 16px; line-height: 1; } @media (max-width:1440px) { header .header_box .header_main .info_r .info_main .phone { font-size: 14px; } } @media (max-width:1024px) { header .header_box .header_main .info_r .info_main .phone { font-size: 13px; } } @media (max-width:768px) { header .header_box .header_main .info_r .info_main .phone { font-size: 12px; } } header .header_box .header_main .info_r .info_main .title { margin-top: 5px; font-size: 14px; line-height: 1; } @media (max-width:1280px) { header .header_box .header_main .info_r .info_main .title { font-size: 13px; } } @media (max-width:1024px) { header .header_box .header_main .info_r .info_main .title { font-size: 12px; } } header .header_box.is_active { box-shadow: 0 0 10px rgba(0, 0, 0, 0.08); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1366px) { header .header_box { --height: 70px; } header .header_box .header_main { padding: 0 20px; } } @media (max-width:990px) { header .header_box { display: none; } } header .header_subnav { width: 100%; height: 50px; background: #FFF; position: relative; z-index: 1; overflow: hidden; } header .header_subnav::after { content: ''; width: 100%; height: 1px; position: absolute; left: 0; z-index: 1; background: #f1f1f1; } header .header_subnav::after { bottom: 0; } header .header_subnav .subnav_box { width: 100%; height: 100%; padding: 0 30px; position: relative; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } header .header_subnav .subnav_box .this_title { font-family: 'Rubik', 'ff700'; font-size: 14px; color: #2c303d; } @media (max-width:1280px) { header .header_subnav .subnav_box .this_title { font-size: 13px; } } @media (max-width:1024px) { header .header_subnav .subnav_box .this_title { font-size: 12px; } } header .header_subnav .subnav_box .line { width: 1px; height: 1em; font-size: 14px; background: #000; margin: 0 20px; } @media (max-width:1280px) { header .header_subnav .subnav_box .line { font-size: 13px; } } @media (max-width:1024px) { header .header_subnav .subnav_box .line { font-size: 12px; } } header .header_subnav .subnav_box .menu { width: auto; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; grid-gap: min(2.56vw, 50px); } header .header_subnav .subnav_box .menu .item { width: auto; height: 100%; } header .header_subnav .subnav_box .menu .item a { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } header .header_subnav .subnav_box .menu .item a .word { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: relative; font-size: 14px; } @media (max-width:1280px) { header .header_subnav .subnav_box .menu .item a .word { font-size: 13px; } } @media (max-width:1024px) { header .header_subnav .subnav_box .menu .item a .word { font-size: 12px; } } header .header_subnav .subnav_box .menu .item a .word::after { content: ''; width: 0; height: 2px; position: absolute; bottom: 0; left: 50%; z-index: 1; transform: translateX(-50%); background: #333; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .header_subnav .subnav_box .menu .item a .icon { font-size: 0; margin-left: 10px; display: none; } header .header_subnav .subnav_box .menu .item a:hover .word, header .header_subnav .subnav_box .menu .item a.active .word { color: #2c303d; } header .header_subnav .subnav_box .menu .item a:hover .word::after, header .header_subnav .subnav_box .menu .item a.active .word::after { width: 100%; } @media (max-width: 1280px) { header .header_box .header_main .info_l .nav_box .about .btn { width: 36px; } header .header_box .header_main .info_l .nav_box .about .btn i { width: 16px; } header .header_box .header_main .info_l .nav_box .nav > ul > li .headline a { padding: 0 10px; } header .header_box .header_main .info_l .nav_box .nav > ul > li .headline a .word { font-size: 13px; } header .header_box .header_main .info_r .info_support .support_btn .support_center { padding: 0 8px; } header .header_box .header_main .info_r .info_search .search_btn { width: 40px; } } @media (max-width:990px) { header .header_subnav { display: none; } } header .m_header_box { width: 100%; height: auto; display: none; position: fixed; top: 0; left: 0; z-index: 30; box-shadow: 0 1px 0 #eee; } header .m_header_box .header_title { width: 100%; height: 60px; padding: 0 20px; position: relative; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; overflow: hidden; } header .m_header_box .header_title .logo { width: auto; height: 100%; overflow: hidden; } header .m_header_box .header_title .logo img { max-height: 30px; } header .m_header_box .header_title .column { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } header .m_header_box .header_title .menu_btn { width: 30px; height: 30px; position: relative; overflow: hidden; } header .m_header_box .header_title .menu_btn::after, header .m_header_box .header_title .menu_btn::before, header .m_header_box .header_title .menu_btn i { width: 70%; height: 2px; display: block; background: #000; position: absolute; top: 50%; left: 50%; margin: -1px 0 0 -35%; transform-origin: center; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .m_header_box .header_title .menu_btn::before { content: ''; margin-top: -8px; } header .m_header_box .header_title .menu_btn::after { content: ''; margin-top: 6px; } header .m_header_box .header_title .menu_btn.active i { opacity: 0; } header .m_header_box .header_title .menu_btn.active::before { margin-top: -1px; transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); border-radius: 5px; background: #003281; } header .m_header_box .header_title .menu_btn.active::after { margin-top: -1px; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); border-radius: 5px; background: #003281; } header .m_header_box .header_title .head_btn { width: auto; height: 30px; margin-right: 20px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; cursor: pointer; overflow: hidden; } header .m_header_box .header_title .head_btn .icon { max-width: 14px; height: 14px; font-size: 0; margin-right: 5px; filter: invert(1); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .m_header_box .header_title .head_btn .link { line-height: 1; font-size: 12px; color: #000; margin-top: 3px; } header .m_header_box .header_title .head_btn .link span { opacity: .6; } header .m_header_box .header_title .head_btn .link a { color: #000; opacity: .6; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .m_header_box .header_title .head_btn .link a:hover { opacity: 1; } header .m_header_box .header_title .head_btn:hover .icon { filter: invert(1); } header .m_header_box .header_title .head_btn:hover .link { color: #000; } header .m_header_box .header_title .head_btn:hover .link a, header .m_header_box .header_title .head_btn:hover .link span { color: #000; } header .m_header_box .header_body { width: 100%; height: calc(100vh - 60px); background: #f7f7f7; display: none; overflow: hidden; } header .m_header_box .header_body .menu_info { width: 100%; height: 100%; padding: 0 0 20px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; overflow: hidden; } header .m_header_box .header_body .menu_nav { width: 100%; height: auto; flex: 1; padding: 20px; overflow: hidden; overflow-y: auto; } header .m_header_box .header_body .menu_nav ul li { width: 100%; height: auto; border-bottom: 1px solid rgba(0, 0, 0, 0.03); overflow: hidden; } header .m_header_box .header_body .menu_nav ul li .one { width: 100%; height: auto; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; overflow: hidden; } header .m_header_box .header_body .menu_nav ul li .one a { padding: 15px 0; display: block; font-size: 14px; color: #282f36; line-height: 1; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: relative; } header .m_header_box .header_body .menu_nav ul li .one a .subtitle { font-size: 14px; margin-right: 10px; } header .m_header_box .header_body .menu_nav ul li .one a .title { font-size: 14px; } header .m_header_box .header_body .menu_nav ul li .one .icon { width: 20px; height: 20px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; margin-top: -10px; position: absolute; right: 0; top: 50%; font-size: 0; color: #282f36; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } header .m_header_box .header_body .menu_nav ul li .one .icon i { font-size: 8px; } header .m_header_box .header_body .menu_nav ul li .one.active a { color: #003281; } header .m_header_box .header_body .menu_nav ul li .one.active .icon { color: #003281; } header .m_header_box .header_body .menu_nav ul li .one.active.is_active .icon { transform: rotate(90deg); -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); } header .m_header_box .header_body .menu_nav ul li ul { border-top: 1px solid #003281; display: none; } header .m_header_box .header_body .menu_nav ul li ul li { border: 0; margin: 15px 0; } header .m_header_box .header_body .menu_nav ul li ul li a { font-size: 13px; padding: 0 0 0 20px; color: #333; position: relative; } header .m_header_box .header_body .menu_nav ul li ul li a .icon { width: 16px; height: 16px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: absolute; left: 0; top: 50%; margin-top: -8px; color: #333; } header .m_header_box .header_body .menu_nav ul li ul li a .icon i { font-size: 8px; } header .m_header_box .header_body .menu_nav ul li ul li a.active { color: #003281; } header .m_header_box .header_body .menu_nav ul li ul li a.active .icon { color: #003281; } header .m_header_box .header_body .menu_nav ul li ul li ul { border: 0; display: none; } header .m_header_box .header_body .menu_nav ul li ul li ul li a { padding: 10px 0 10px 35px; font-size: 12px; color: #999; } header .m_header_box .header_body .menu_nav ul li ul li ul li a:before { content: ''; width: 5px; height: 1px; background: #999; position: absolute; top: 50%; left: 20px; margin-top: 2.5px; z-index: 1; } header .m_header_box .header_body .menu_nav ul li ul li ul li a.active:before { background: #003281; } header .m_header_box .header_body .menu_nav ul li ul li ul li { border: 0; margin: 0; } header .m_header_box .header_body .menu_nav ul li ul li ul li a { padding: 10px 0 4px 35px; font-size: 12px; color: #999; display: block; } header .m_header_box .header_body .menu_form { width: 100%; height: auto; margin-top: 20px; padding: 0 20px; overflow: hidden; } header .m_header_box .header_body .menu_form .center { width: 100%; height: 50px; background: #fff; overflow: hidden; } header .m_header_box .header_body .menu_form .center form { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; overflow: hidden; } header .m_header_box .header_body .menu_form .center form input { flex: 1; height: 100%; padding: 0 15px; font-size: 14px; color: #282f36; border: 0; } header .m_header_box .header_body .menu_form .center form button { width: 70px; } header .m_header_box .header_body .menu_form .center form button i { font-size: 18px; } header .m_header_box .header_body .menu_lang { width: 100%; height: auto; margin-top: 40px; padding: 0 20px; font-size: 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; overflow: hidden; } header .m_header_box .header_body .menu_lang .one { width: auto; height: 36px; margin-right: 10px; overflow: hidden; } header .m_header_box .header_body .menu_lang .one a { width: 100%; height: 100%; padding: 0 1em; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; background: #fff; border-radius: 50px; font-size: 12px; color: #282f36; } header .m_header_box .header_body .menu_lang .one a.active { background: #003281; color: #fff; } @media (max-width:990px) { header .m_header_box { display: block; } } header .m_header_nbsp { width: 100%; height: 60px; display: none; overflow: hidden; } @media (max-width:990px) { header .m_header_nbsp { display: block; } } .header_nbsp { width: 100%; height: 140px; } /* 搴曢儴 */ footer { width: 100%; height: auto; } footer .footer_top { width: 100%; height: auto; overflow: hidden; } footer .footer_top .idx_center { margin: 2.2vw auto; } @media (max-width:1024px) { footer .footer_top .idx_center { margin: 0 auto; } } footer .footer_top .f_title { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } footer .footer_top .f_title .icon { width: 18px; font-size: 0; } footer .footer_top .f_title .title { margin-left: .4em; font-size: 18px; line-height: 1; } @media (max-width:1366px) { footer .footer_top .f_title .icon { width: 16px; } footer .footer_top .f_title .title { font-size: 16px; } } @media (max-width:1024px) { footer .footer_top .f_title .icon { width: 14px; } footer .footer_top .f_title .title { font-size: 14px; } } @media (max-width:768px) { footer .footer_top .f_title .icon { width: 12px; } footer .footer_top .f_title .title { font-size: 12px; } } footer .footer_top .top_box { width: 100%; height: auto; padding: 3vw 0 2vw; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } footer .footer_top .top_box .logo { width: 40%; max-width: 330px; } footer .footer_top .top_box .form_box { width: 33.33%; height: auto; } footer .footer_top .top_box .form_box .layui-form { width: 100%; height: 40px; margin-top: 20px; } footer .footer_top .top_box .form_box .layui-form form { width: 100%; height: 100%; background: #f5f7fa; border-radius: 50px; position: relative; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } footer .footer_top .top_box .form_box .layui-form form::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; box-sizing: border-box; border: 1px solid #eceff3; border-radius: 50px; pointer-events: none; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } footer .footer_top .top_box .form_box .layui-form input { width: 100%; flex: 1; height: 100%; padding: 0 20px; font-size: 14px; border: 0; background: transparent; } footer .footer_top .top_box .form_box .layui-form input::-webkit-input-placeholder { color: #000; opacity: .4; } footer .footer_top .top_box .form_box .layui-form input:-moz-placeholder { color: #000; opacity: .4; } footer .footer_top .top_box .form_box .layui-form input::-moz-placeholder { color: #000; opacity: .4; } footer .footer_top .top_box .form_box .layui-form input:-ms-input-placeholder { color: #000; opacity: .4; } footer .footer_top .top_box .form_box .layui-form button { width: 80px; height: 100%; padding: 0; border-radius: 50px; background: #f39800; position: relative; z-index: 3; font-size: 14px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } footer .footer_top .top_box .form_box .layui-form button:hover { opacity: 1; background: #003281; } footer .footer_top .top_box .form_box .layui-form.active form::after { border-color: #f39800; } @media (max-width:1366px) { footer .footer_top .top_box .form_box .layui-form { margin-top: 15px; } } @media (max-width:1024px) { footer .footer_top .top_box .form_box .layui-form { height: 36px; } footer .footer_top .top_box .form_box .layui-form input, footer .footer_top .top_box .form_box .layui-form button { font-size: 12px; } } @media (max-width:768px) { footer .footer_top .top_box .form_box .layui-form input, footer .footer_top .top_box .form_box .layui-form button { font-size: 10px; } } @media (max-width:990px) { footer .footer_top .top_box .form_box { width: 45%; } } @media (max-width:768px) { footer .footer_top .top_box .form_box { width: 100%; margin-top: 30px; } } @media (max-width:1024px) { footer .footer_top .top_box { padding: 40px 0 30px; } } @media (max-width:768px) { footer .footer_top .top_box { display: block; } footer .footer_top .top_box .logo { width: 70%; } } footer .footer_top .top_main { width: 100%; height: auto; padding: 1.8vw 0 2.2vw; border-top: 1px solid #f6f6f6; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } footer .footer_top .top_main .head_title { font-size: 18px; line-height: 1; } @media (max-width:1366px) { footer .footer_top .top_main .head_title { font-size: 16px; } } @media (max-width:1024px) { footer .footer_top .top_main .head_title { font-size: 14px; } } @media (max-width:768px) { footer .footer_top .top_main .head_title { font-size: 12px; } } footer .footer_top .top_main .top_info { width: 50%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } footer .footer_top .top_main .top_info .item { width: auto; height: auto; } footer .footer_top .top_main .top_info .item .info { width: 100%; height: auto; margin-top: 20px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } footer .footer_top .top_main .top_info .item.one { margin-right: 5.2vw; } footer .footer_top .top_main .top_info .item.one .info { line-height: 1; } footer .footer_top .top_main .top_info .item.one .info > * { font-family: 'Rubik', 'ff400'; } footer .footer_top .top_main .top_info .item.one .info .big { font-size: 30px; color: #003281; } footer .footer_top .top_main .top_info .item.one .info .rmb { margin-left: .5em; font-size: 14px; color: #003281; } footer .footer_top .top_main .top_info .item.one .info .s { width: 0; height: 0; margin: 0 4px; border: 4px solid transparent; border-bottom: 4px solid #f00; transform: translateY(-25%); } footer .footer_top .top_main .top_info .item.one .info .txt { font-size: 14px; color: #ef1010; } footer .footer_top .top_main .top_info .item.two .info .icon { font-size: 0; } footer .footer_top .top_main .top_info .item.two .info .phone { margin-left: 10px; line-height: 1; font-size: 30px; font-family: 'Rubik', 'ff400'; color: #f39800; } @media (max-width:1366px) { footer .footer_top .top_main .top_info .item .info { margin-top: 15px; } footer .footer_top .top_main .top_info .item.one .info .big { font-size: 26px; } footer .footer_top .top_main .top_info .item.two .info .icon { width: 26px; } footer .footer_top .top_main .top_info .item.two .info .phone { font-size: 26px; } } @media (max-width:1024px) { footer .footer_top .top_main .top_info .item.one { margin-right: 30px; } footer .footer_top .top_main .top_info .item.one .info .big { font-size: 20px; } footer .footer_top .top_main .top_info .item.one .info .rmb, footer .footer_top .top_main .top_info .item.one .info .txt { font-size: 12px; } footer .footer_top .top_main .top_info .item.two .info .icon { width: 20px; } footer .footer_top .top_main .top_info .item.two .info .phone { font-size: 20px; } } @media (max-width:768px) { footer .footer_top .top_main .top_info .item .info { margin-top: 10px; } footer .footer_top .top_main .top_info .item.one .info .big { font-size: 16px; } footer .footer_top .top_main .top_info .item.one .info .rmb, footer .footer_top .top_main .top_info .item.one .info .txt { font-size: 12px; } footer .footer_top .top_main .top_info .item.two .info .icon { width: 16px; } footer .footer_top .top_main .top_info .item.two .info .phone { margin-left: 6px; font-size: 16px; } } @media (max-width:768px) { footer .footer_top .top_main .top_info { width: 100%; } } footer .footer_top .top_main .top_link { width: 33.33%; } footer .footer_top .top_main .top_link .menu { width: 100%; height: auto; margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; } footer .footer_top .top_main .top_link .menu .item { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } /*footer .footer_top .top_main .top_link .menu .item:last-child { display: none; }*/ footer .footer_top .top_main .top_link .menu .item a { width: 100%; height: 100%; padding: 10px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; text-align: center; border-radius: 50px; border: 1px solid #f6f6f6; background: #f5f7fa; font-size: 14px; color: #031423; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } footer .footer_top .top_main .top_link .menu .item a:hover { background: #003281; border-color: #003281; color: #fff; } @media (max-width:1366px) { footer .footer_top .top_main .top_link .menu { margin-top: 15px; } } @media (max-width:1024px) { footer .footer_top .top_main .top_link .menu .item a { padding: 6px 10px; font-size: 12px; } } @media (max-width:768px) { footer .footer_top .top_main .top_link .menu { margin-top: 10px; grid-gap: 10px; } footer .footer_top .top_main .top_link .menu .item a { font-size: 10px; } } @media (max-width:990px) { footer .footer_top .top_main .top_link { width: 45%; } } @media (max-width:768px) { footer .footer_top .top_main .top_link { width: 100%; margin-top: 30px; } } @media (max-width:1024px) { footer .footer_top .top_main { padding: 30px 0; } } @media (max-width:990px) { footer .footer_top .top_main { padding: 30px 0 40px; } } @media (max-width:768px) { footer .footer_top .top_main { display: block; } } footer .footer_top .nav_menu { width: 100%; height: auto; padding: 3vw 0; border-top: 1px solid #f6f6f6; display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 30px; } footer .footer_top .nav_menu .item { width: 100%; height: auto; } footer .footer_top .nav_menu .head_title { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } footer .footer_top .nav_menu .head_title a { width: 100%; height: auto; padding-bottom: 20px; position: relative; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; font-size: 18px; line-height: 1; } footer .footer_top .nav_menu .head_title a::before, footer .footer_top .nav_menu .head_title a::after { content: ''; width: 100%; height: 1px; position: absolute; bottom: 0; right: 0; z-index: 1; background: #f6f6f6; } footer .footer_top .nav_menu .head_title a::after { width: 0; height: 1px; z-index: 2; background: #f39800; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } footer .footer_top .nav_menu .head_title a:hover { color: #f39800; } footer .footer_top .nav_menu .head_title a:hover::after { width: 100%; left: 0; } @media (max-width:1366px) { footer .footer_top .nav_menu .head_title a { padding-bottom: 15px; font-size: 16px; } } footer .footer_top .nav_menu .menu { width: 100%; height: auto; margin-top: 10px; } footer .footer_top .nav_menu .menu .one { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; margin-top: 15px; } footer .footer_top .nav_menu .menu .one a { width: 100%; height: auto; font-family: 'Rubik', 'ff200'; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; font-size: 14px; line-height: 1.5; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } footer .footer_top .nav_menu .menu .one a i { width: 8px; height: 8px; position: relative; } footer .footer_top .nav_menu .menu .one a i::before, footer .footer_top .nav_menu .menu .one a i::after { content: ''; width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; background: #d4d4d4; } footer .footer_top .nav_menu .menu .one a i::before { width: 2px; } footer .footer_top .nav_menu .menu .one a i::after { height: 2px; } footer .footer_top .nav_menu .menu .one a:hover { color: #f39800; } @media (max-width:1024px) { footer .footer_top .nav_menu .menu .one a { font-size: 12px; } } @media (max-width:1024px) { footer .footer_top .nav_menu { padding: 40px 0; } } @media (max-width:990px) { footer .footer_top .nav_menu { display: none; } } footer .footer_bottom { width: 100%; height: auto; background: #003281; } footer .footer_bottom .idx_center { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } footer .footer_bottom .copy { font-size: 14px; color: rgba(255, 255, 255, 0.8); } footer .footer_bottom .copy a { color: #fff; opacity: .8; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } footer .footer_bottom .copy a:hover { opacity: 1; } @media (max-width:1024px) { footer .footer_bottom .copy { font-size: 12px; } } @media (max-width:990px) { footer .footer_bottom .copy { width: 100%; height: auto; padding: 15px 0; text-align: center; } } footer .footer_bottom .links { margin: 20px 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } footer .footer_bottom .links .item { position: relative; z-index: 1; margin-left: 13px; } footer .footer_bottom .links .item .ewm { width: 100px; height: auto; padding: 5px; position: absolute; bottom: 100%; left: 50%; font-size: 0; margin-left: -50px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); margin-bottom: 5px; opacity: 0; visibility: hidden; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } footer .footer_bottom .links .item .ewm img { width: 100%; } footer .footer_bottom .links .item .ewm::before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; background: #fff; border-radius: 5px; } footer .footer_bottom .links .item .ewm::after { content: ''; width: 0; height: 0; position: absolute; bottom: -6px; left: 50%; z-index: 1; transform: translateX(-50%); border-style: solid; border-width: 6px 6px 0 6px; border-color: #fff transparent transparent transparent; } footer .footer_bottom .links .item .icon { width: 34px; height: 34px; padding: 25%; border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; background: #fff; position: relative; cursor: pointer; overflow: hidden; } footer .footer_bottom .links .item .icon img { -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } footer .footer_bottom .links .item:first-child { margin: 0; } footer .footer_bottom .links .item:hover .ewm { opacity: 1; margin-bottom: 15px; visibility: initial; } @media (max-width:1366px) { footer .footer_bottom .links .item .icon { width: 28px; height: 28px; } footer .footer_bottom .links .item:last-child .ewm { left: auto; right: 0; margin-left: 0; } footer .footer_bottom .links .item:last-child .ewm::after { left: auto; right: 7px; transform: translate(0); } } @media (max-width:990px) { footer .footer_bottom .links { display: none; } } @media (max-width:990px) { footer .footer_bottom .idx_center { display: block; } } /* 瀹㈡湇鎸備欢 */ .kefu_box { width: auto; height: auto; position: fixed; bottom: 35%; right: 0; z-index: 19; /*transform: translateY(-25%);*/ background: #ededed; } .kefu_box .item { width: 54px; height: 54px; background: #ededed; position: relative; z-index: 5; } .kefu_box .item .images { width: 100%; height: 100%; position: relative; z-index: 2; } .kefu_box .item .images .img { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .kefu_box .item .images .img img { max-width: 40%; max-height: 40%; } .kefu_box .item .images .icon_hot { width: 50%; height: 50%; position: absolute; right: 0; bottom: 0; z-index: 1; opacity: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .kefu_box .item .images .icon_hot i { background: #ffbb48; } .kefu_box .item .info { width: auto; height: 100%; position: absolute; right: 0; top: 0; z-index: 1; transform: translateX(25%); background: #f39800; white-space: nowrap; opacity: 0; visibility: hidden; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .kefu_box .item .info .word { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 10px 54px 10px 15px; font-size: 14px; color: #fff; } .kefu_box .item.last { background: #003281; } .kefu_box .item:hover .images .img { filter: brightness(0) invert(1); } .kefu_box .item:hover .images .icon_hot { opacity: .6; } .kefu_box .item:hover .info { transform: translateX(0); opacity: 1; visibility: visible; } @media (max-width:1024px) { .kefu_box .item { width: 48px; height: 48px; } .kefu_box .item .info .word { padding: 8px 48px 8px 10px; } } .kefu_box .contrast { width: 54px; height: auto; margin-top: 54px; } .kefu_box .contrast .number { width: 100%; height: auto; } @media (max-width:1024px) { .kefu_box { display: none; } } /* 娣诲姞瀵规瘮 */ .contrast_item { width: var(--w); height: auto; position: fixed; top: 65%; right: 0; z-index: 19; transform: translateY(calc(var(--w) / 1.5)); --w: 54px; cursor: pointer; overflow: hidden; } .contrast_item .number { width: var(--w); height: var(--w); background: #ff7638; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .contrast_item .number .word { width: 30px; height: 30px; background: rgba(255, 255, 255, 0.1); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; font-size: 16px; font-family: 'Rubik', 'ff800'; color: #FFF; border-radius: 50%; } @media (max-width:1440px) { .contrast_item .number .word { font-size: 14px; } } @media (max-width:1024px) { .contrast_item .number .word { font-size: 13px; } } @media (max-width:768px) { .contrast_item .number .word { font-size: 12px; } } .contrast_item .title_box { width: 100%; height: auto; background: #2c303d; position: relative; z-index: 1; } .contrast_item .title_box .title { width: 100%; height: auto; padding: 20px 0; font-size: 14px; color: #FFF; writing-mode: vertical-lr; line-height: var(--w); letter-spacing: .1em; } @media (max-width:1280px) { .contrast_item .title_box .title { font-size: 13px; } } @media (max-width:1024px) { .contrast_item .title_box .title { font-size: 12px; } } .contrast_item .title_box .icon_hot { width: 50%; height: auto; -webkit-aspect-ratio: 1; aspect-ratio: 1; position: absolute; right: 0; bottom: 0; z-index: 1; opacity: .1; } .contrast_item .title_box .icon_hot i { background: #FFF; } @media (max-width:990px) { .contrast_item { width: auto; height: var(--w); top: auto; bottom: 0; transform: translate(0); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .contrast_item .title_box { width: auto; } .contrast_item .title_box .title { padding: 0 20px; writing-mode: horizontal-tb; } } /* END */ /* 棣栭〉 */ /* Banner */ .idx_banner { width: 100%; height: 100vh; padding-top: 60px; background: #000; position: relative; z-index: 1; overflow: hidden; } .idx_banner ul { width: 100%; height: 100%; position: relative; z-index: 1; overflow: hidden; } .idx_banner ul li { width: 100%; height: 100%; position: relative; z-index: 1; pointer-events: initial; overflow: hidden; } .idx_banner ul li a { width: 100%; height: 100%; display: block; pointer-events: initial; overflow: hidden; } .idx_banner ul li .images { width: 100%; height: 100%; font-size: 0; overflow: hidden; } .idx_banner ul li .images img, .idx_banner ul li .images video { width: 100%; height: 100%; object-fit: cover; } .idx_banner ul li .images img { transition: 1s linear 2s; } .idx_banner ul li video { width: 100%; height: 100%; object-fit: cover; } .idx_banner ul li.active { z-index: 2; } .idx_banner ul li.active .images img, .idx_banner ul li.swiper-slide-duplicate-active .images img { transition: 6s linear; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .idx_banner ul li.active { z-index: 2; } .idx_banner .pager_box { width: 100%; height: auto; position: absolute; bottom: 40px; left: 0; z-index: 5; opacity: 0; } .idx_banner .pager_box .center_box { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .idx_banner .pager_box .center { width: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; grid-gap: 20px; background: rgba(0, 0, 0, 0.4); border-radius: 50px; padding: 6px 14px; } .idx_banner .pager_box .swiper_btn { width: 25px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; line-height: 1; color: #fff; cursor: pointer; } .idx_banner .pager_box .swiper_btn i { font-size: 16px; } .idx_banner .pager_box .pager { width: auto; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; grid-gap: 10px; } .idx_banner .pager_box .pager .one { width: auto; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; border-radius: 0; background: transparent; opacity: 1; position: relative; z-index: 1; -webkit-transition: all 0.8s ease; -o-transition: all 0.8s ease; transition: all 0.8s ease; } .idx_banner .pager_box .pager .one .idx { line-height: 1; font-size: 12px; color: #fff; opacity: .6; font-family: 'Montserrat'; } .idx_banner .pager_box .pager .one::after { content: ""; width: 0; height: 2px; background-color: #f39800; position: absolute; left: 35px; top: 50%; transform: translateY(-50%); } .idx_banner .pager_box .pager .active { margin-right: 120px; } .idx_banner .pager_box .pager .active .idx { color: #f39800; opacity: 1; } .idx_banner .pager_box .pager .active::after { animation: LoadingBar 4s both; animation-delay: 0s; animation-delay: 0.2s; } .idx_banner .pager_box .play { width: 20px; height: 20px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; position: relative; z-index: 2; cursor: pointer; } .idx_banner .pager_box .play i { width: 0; height: 12px; border-left: 2px solid #fff; } .idx_banner .pager_box .play i:last-child { margin-left: 5px; } .idx_banner .pager_box .play.active i:first-child { height: 0; border-style: solid; border-width: 6px 4px 6px 8px; border-color: transparent transparent transparent #fff; margin-left: 7px; } .idx_banner .pager_box .play.active i:last-child { height: 0; margin: 0; } @media (max-width:990px) { .idx_banner .pager_box { bottom: 20px; } .idx_banner .pager_box .center_box { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .idx_banner .pager_box .center { grid-gap: 0; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; background: none; padding: 0; } .idx_banner .pager_box .swiper_btn, .idx_banner .pager_box .play { display: none; } .idx_banner .pager_box .pager .one .idx { width: 10px; height: 10px; font-size: 0; border-radius: 50%; background: #fff; padding: 0; } .idx_banner .pager_box .pager .one::after { display: none; } .idx_banner .pager_box .pager .one.active { margin: 0; } } .idx_banner .icon_down { width: 100%; height: auto; position: absolute; bottom: 40px; left: 0; z-index: 5; pointer-events: none; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .idx_banner .icon_down .icon { font-size: 0; transform: translateX(-50%); animation: upDown 1.5s ease-in-out infinite; } @media (max-width:1600px) { .idx_banner .icon_down .icon { width: 30px; } } @media (max-width:1440px) { .idx_banner .icon_down .icon { width: 24px; } } @media (max-width:1280px) { .idx_banner .icon_down .icon { width: 20px; } } @media (max-width:1024px) { .idx_banner .icon_down .icon { width: 18px; } } @media (max-width:990px) { .idx_banner { height: 70vh; } .idx_banner .icon_down { display: none; } } @-webkit-keyframes upDown { 0% { opacity: 0.5; transform: translate(-50%, -5px); } 50% { opacity: 1; transform: translate(-50%, 5px); } 100% { opacity: 0.5; transform: translate(-50%, -5px); } } @keyframes upDown { 0% { opacity: 0.5; transform: translate(-50%, -5px); } 50% { opacity: 1; transform: translate(-50%, 5px); } 100% { opacity: 0.5; transform: translate(-50%, -5px); } } @-webkit-keyframes LoadingBar { from { width: 0px; } to { width: 80px; } } @keyframes LoadingBar { from { width: 0px; } to { width: 80px; } } /* 棣栭〉榛樿鏍峰紡 */ .idx_title { width: 100%; height: auto; } .idx_title .title { font-size: 36px; line-height: 1.33; } @media (max-width:1680px) { .idx_title .title { font-size: 32px; } } @media (max-width:1440px) { .idx_title .title { font-size: 28px; } } @media (max-width:1280px) { .idx_title .title { font-size: 24px; } } @media (max-width:1024px) { .idx_title .title { font-size: 22px; } } @media (max-width:768px) { .idx_title .title { font-size: 20px; } } .idx_title .subtitle { margin-top: clamp(10px, 1.04166667vw, 20px); font-size: 24px; line-height: 1.25; } @media (max-width:1680px) { .idx_title .subtitle { font-size: 22px; } } @media (max-width:1440px) { .idx_title .subtitle { font-size: 20px; } } @media (max-width:1280px) { .idx_title .subtitle { font-size: 18px; } } @media (max-width:1024px) { .idx_title .subtitle { font-size: 16px; } } @media (max-width:768px) { .idx_title .subtitle { font-size: 15px; } } .icon_hot { width: 60px; height: 60px; position: relative; overflow: hidden; } .icon_hot i { width: 200%; height: 12%; background: #003281; display: block; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) rotate(-45deg); transform-origin: top; } .icon_hot .middle { margin: 18% 0 0 18%; } .icon_hot .last { margin: 36% 0 0 36%; } @media (max-width:1366px) { .icon_hot { width: 50px; height: 50px; } } @media (max-width:1024px) { .icon_hot { width: 40px; height: 40px; } } .icon_hot2 { width: 30px; height: 30px; position: relative; overflow: hidden; } .icon_hot2 i { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; background: #003281; } .icon_hot2 .first { -webkit-clip-path: polygon(0 100%, 20% 100%, 100% 20%, 100% 0); clip-path: polygon(0 100%, 20% 100%, 100% 20%, 100% 0); } .icon_hot2 .middle { -webkit-clip-path: polygon(40% 100%, 60% 100%, 100% 60%, 100% 40%); clip-path: polygon(40% 100%, 60% 100%, 100% 60%, 100% 40%); } .icon_hot2 .last { -webkit-clip-path: polygon(80% 100%, 100% 100%, 100% 80%); clip-path: polygon(80% 100%, 100% 100%, 100% 80%); } @media (max-width:1024px) { .icon_hot2 { width: 20px; height: 20px; } } /* 鍏充簬鎴戜滑 */ .idx_about { width: 100%; height: auto; background: #FAFAFC; overflow: hidden; padding-bottom: clamp(60px, 6.25vw, 120px); } .idx_about .about_box { width: 100%; height: auto; position: relative; overflow: hidden; } .idx_about .about_box .about_first { width: 100%; height: 100vh; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; overflow: hidden; } .idx_about .about_box .about_first .about_head { width: 100%; height: auto; padding-top: clamp(70px, 7.29166667vw, 140px); padding-bottom: clamp(50px, 5.20833333vw, 100px); overflow: hidden; background-color: white; } .idx_about .about_box .about_first .about_head .idx_title { width: 100%; height: auto; margin: 20px 0 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .idx_about .about_box .about_first .about_head .idx_title .title { color: #003281; } .idx_about .about_box .about_first .about_head .idx_title .title span { color: #f39800; } .idx_about .about_box .about_first .about_head .idx_title .details { max-width: 42%; margin-top: .7em; font-size: 18px; line-height: 1.66; } @media (max-width:1440px) { .idx_about .about_box .about_first .about_head .idx_title .details { font-size: 16px; } } @media (max-width:1024px) { .idx_about .about_box .about_first .about_head .idx_title .details { font-size: 14px; } } @media (max-width:768px) { .idx_about .about_box .about_first .about_head .idx_title .details { font-size: 13px; } } .idx_about .about_box .about_first .about_video { width: 100%; height: auto; margin: 0 auto; flex: 1; position: relative; background: #000; overflow: hidden; } .idx_about .about_box .about_first .about_video .video_shadow { width: 100%; height: 120%; position: absolute; left: 50%; top: 50%; z-index: 6; transform: translate(-50%, -50%); pointer-events: none; } .idx_about .about_box .about_first .about_video .video_shadow .active { width: 100%; height: 100%; position: relative; left: 50%; transform: translateX(-50%); /* box-shadow: 0 0 0 50vw #FAFAFC; */ box-shadow: 0 0 0 50vw white; } .idx_about .about_box .about_first .about_video .video_mask { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none; background: #000; opacity: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .idx_about .about_box .about_first .about_video .video_info { width: 100%; height: 100%; padding: 4.6vw 0; position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .idx_about .about_box .about_first .about_video .video_info .idx_center { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .idx_about .about_box .about_first .about_video .video_info .item { flex: 1; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; color: #fff; opacity: .33; position: relative; z-index: 1; pointer-events: initial; cursor: pointer; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; overflow: hidden; } .idx_about .about_box .about_first .about_video .video_info .item .title { width: 100%; height: auto; text-align: center; font-size: 24px; line-height: 1.25; } @media (max-width:1680px) { .idx_about .about_box .about_first .about_video .video_info .item .title { font-size: 22px; } } @media (max-width:1440px) { .idx_about .about_box .about_first .about_video .video_info .item .title { font-size: 20px; } } @media (max-width:1280px) { .idx_about .about_box .about_first .about_video .video_info .item .title { font-size: 18px; } } @media (max-width:1024px) { .idx_about .about_box .about_first .about_video .video_info .item .title { font-size: 16px; } } @media (max-width:768px) { .idx_about .about_box .about_first .about_video .video_info .item .title { font-size: 15px; } } .idx_about .about_box .about_first .about_video .video_info .item .number { width: 100%; height: auto; margin-top: 20px; line-height: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .idx_about .about_box .about_first .about_video .video_info .item .number .beat { font-family: 'Orbitron', 'ff800'; font-size: 48px; } @media (max-width:1680px) { .idx_about .about_box .about_first .about_video .video_info .item .number .beat { font-size: 42px; } } @media (max-width:1440px) { .idx_about .about_box .about_first .about_video .video_info .item .number .beat { font-size: 36px; } } @media (max-width:1280px) { .idx_about .about_box .about_first .about_video .video_info .item .number .beat { font-size: 28px; } } @media (max-width:1024px) { .idx_about .about_box .about_first .about_video .video_info .item .number .beat { font-size: 24px; } } @media (max-width:768px) { .idx_about .about_box .about_first .about_video .video_info .item .number .beat { font-size: 22px; } } .idx_about .about_box .about_first .about_video .video_info .item .number .unit { width: 8px; height: 8px; margin-left: 10px; position: relative; overflow: hidden; } .idx_about .about_box .about_first .about_video .video_info .item .number .unit::before, .idx_about .about_box .about_first .about_video .video_info .item .number .unit::after { content: ''; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); background: #fff; } .idx_about .about_box .about_first .about_video .video_info .item .number .unit::before { width: 2px; } .idx_about .about_box .about_first .about_video .video_info .item .number .unit::after { height: 2px; } .idx_about .about_box .about_first .about_video .video_info .item.active { opacity: 1; } .idx_about .about_box .about_first .about_video .video_info .item:first-child ~ .item::after { content: ''; position: absolute; top: 0; left: 0; z-index: 1; width: 1px; height: 100%; background: #fff; opacity: .2; } .idx_about .about_box .about_first .about_video .video_list { width: 100%; height: 100%; position: relative; z-index: 1; overflow: hidden; } .idx_about .about_box .about_first .about_video .video_list::before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; background: #000; opacity: .2; } .idx_about .about_box .about_first .about_video .video_list .video_items { width: calc(100% + 30px); height: calc(100% + 30px); position: absolute; left: -15px; top: -15px; z-index: 1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; overflow: hidden; } .idx_about .about_box .about_first .about_video .video_list .video_items .item { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; opacity: 0; -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; overflow: hidden; } .idx_about .about_box .about_first .about_video .video_list .video_items .item img, .idx_about .about_box .about_first .about_video .video_list .video_items .item video { width: 100%; height: 100%; object-fit: cover; object-position: top; } .idx_about .about_box .about_first .about_video .video_list .video_items .item.active { opacity: 1; z-index: 2; } @media (max-width:990px) { .idx_about .about_box .about_first { height: auto; display: block; } .idx_about .about_box .about_first .about_video { display: none; } } @media (max-width:768px) { .idx_about .about_box .about_first .about_head .idx_title { margin: 15px 0 0; display: block; } .idx_about .about_box .about_first .about_head .idx_title .details { max-width: 100%; margin-top: 10px; } } .idx_about .about_box .about_list { width: 100%; height: auto; /* position: absolute; bottom: 0; z-index: 10; transform: translateY(100%); */ -webkit-transition: all 0.55s ease; -o-transition: all 0.55s ease; transition: all 0.55s ease; overflow: hidden; } .idx_about .about_box .about_list .idx_center { width: 100%; height: 100%; padding: 64px 0 48px; background-color: white; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .idx_about .about_box .about_list .center_box { width: 100%; height: auto; display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 20px; } .idx_about .about_box .about_list .item { width: 100%; height: 100%; position: relative; pointer-events: initial; text-align: center; } .idx_about .about_box .about_list .item .icon { width: 100%; height: 46px; position: relative; z-index: 2; /* padding-bottom: 10px; */ font-size: 0; } /* .idx_about .about_box .about_list .item .icon::after { content: ''; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; z-index: 1; background: #fff; opacity: .2; } */ .idx_about .about_box .about_list .item .info { width: 100%; height: auto; /* margin-top: 20px; */ position: relative; z-index: 2; } .idx_about .about_box .about_list .item .info .number { color: #2c303d; line-height: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } .idx_about .about_box .about_list .item .info .number .beat { font-family: 'Orbitron', 'ff800'; font-size: 48px; } @media (max-width:1680px) { .idx_about .about_box .about_list .item .info .number .beat { font-size: 42px; } } @media (max-width:1440px) { .idx_about .about_box .about_list .item .info .number .beat { font-size: 36px; } } @media (max-width:1280px) { .idx_about .about_box .about_list .item .info .number .beat { font-size: 28px; } } @media (max-width:1024px) { .idx_about .about_box .about_list .item .info .number .beat { font-size: 24px; } } @media (max-width:768px) { .idx_about .about_box .about_list .item .info .number .beat { font-size: 22px; } } .idx_about .about_box .about_list .item .info .number .unit { width: 8px; height: 8px; margin-left: 10px; position: relative; } .idx_about .about_box .about_list .item .info .number .unit::before, .idx_about .about_box .about_list .item .info .number .unit::after { content: ''; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); background: #fff; } .idx_about .about_box .about_list .item .info .number .unit::before { width: 2px; } .idx_about .about_box .about_list .item .info .number .unit::after { height: 2px; } .idx_about .about_box .about_list .item .info .title { margin-top: 5px; font-size: 16px; color: #2c303d; /* opacity: .4; */ } @media (max-width:1440px) { .idx_about .about_box .about_list .item .info .title { font-size: 14px; } } @media (max-width:1024px) { .idx_about .about_box .about_list .item .info .title { font-size: 13px; } } @media (max-width:768px) { .idx_about .about_box .about_list .item .info .title { font-size: 12px; } } @media (max-width:1560px) { .idx_about .about_box .about_list .item .icon { height: 40px; } } @media (max-width:1366px) { .idx_about .about_box .about_list .item .icon { height: 36px; } } @media (max-width:1024px) { .idx_about .about_box .about_list { background: #003281; } .idx_about .about_box .about_list .center_box { grid-gap: 40px 0; } .idx_about .about_box .about_list .idx_center { padding-top: clamp(40px, 4.16666667vw, 80px); padding-bottom: clamp(40px, 4.16666667vw, 80px); } .idx_about .about_box .about_list .item { padding: 0 20px; } .idx_about .about_box .about_list .item .info { margin-top: 10px; } } @media (max-width:990px) { /*.idx_about .about_box .about_list {*/ /* display: none;*/ /*}*/ .idx_about .about_box .about_list .center_box { grid-template-columns: repeat(2, 1fr); grid-gap: 20px 0; } } .idx_about .about_box .about_first.active .about_video .video_mask { opacity: .6; } .idx_about .about_box .about_first.active .about_video .video_info { opacity: 0; } .idx_about .about_box .about_first.active .about_video .video_list .video_items { filter: blur(10px); } .idx_about .about_box .about_list.active { transform: translateY(0); } .idx_about .about_box .about_moblie { width: 100%; height: auto; position: relative; z-index: 1; background: #000; display: none; overflow: hidden; } .idx_about .about_box .about_moblie .swiper_box { width: 100%; height: auto; position: relative; z-index: 1; overflow: hidden; } .idx_about .about_box .about_moblie .swiper_box .swiper-slide { position: relative; z-index: 1; } .idx_about .about_box .about_moblie .swiper_box .title_box { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 5; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .idx_about .about_box .about_moblie .swiper_box .title_box .title { font-size: 30px; color: #FFF; } @media (max-width:1680px) { .idx_about .about_box .about_moblie .swiper_box .title_box .title { font-size: 27px; } } @media (max-width:1440px) { .idx_about .about_box .about_moblie .swiper_box .title_box .title { font-size: 23px; } } @media (max-width:1280px) { .idx_about .about_box .about_moblie .swiper_box .title_box .title { font-size: 20px; } } @media (max-width:1024px) { .idx_about .about_box .about_moblie .swiper_box .title_box .title { font-size: 16px; } } @media (max-width:1680px) { .idx_about .about_box .about_moblie .swiper_box .title_box .title { font-size: 26px; } } @media (max-width:1440px) { .idx_about .about_box .about_moblie .swiper_box .title_box .title { font-size: 24px; } } @media (max-width:1280px) { .idx_about .about_box .about_moblie .swiper_box .title_box .title { font-size: 22px; } } @media (max-width:1024px) { .idx_about .about_box .about_moblie .swiper_box .title_box .title { font-size: 20px; } } @media (max-width:768px) { .idx_about .about_box .about_moblie .swiper_box .title_box .title { font-size: 16px; text-align: center; } } .idx_about .about_box .about_moblie .swiper_box .title_box .number { margin-top: 20px; font-size: 92px; color: #FFF; font-family: 'Pill', 'ff400'; } @media (max-width:1680px) { .idx_about .about_box .about_moblie .swiper_box .title_box .number { font-size: 81px; } } @media (max-width:1440px) { .idx_about .about_box .about_moblie .swiper_box .title_box .number { font-size: 69px; } } @media (max-width:1280px) { .idx_about .about_box .about_moblie .swiper_box .title_box .number { font-size: 62px; } } @media (max-width:1024px) { .idx_about .about_box .about_moblie .swiper_box .title_box .number { font-size: 50px; } } .idx_about .about_box .about_moblie .swiper_box .video_block { width: 100%; height: auto; position: relative; z-index: 1; overflow: hidden; } .idx_about .about_box .about_moblie .swiper_box .video_block .pb { height: 500px; /*padding-bottom: 66.66666666666667%*/ } .idx_about .about_box .about_moblie .swiper_box .video_block img, .idx_about .about_box .about_moblie .swiper_box .video_block video { width: 100%; height: 100%; object-fit: cover; } .idx_about .about_box .about_moblie .pager { width: 100%; height: auto; position: absolute; bottom: 30px; left: 0; z-index: 5; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .idx_about .about_box .about_moblie .pager span { width: 10px; height: 10px; border-radius: 50%; margin: 0 5px; background: #FFF; opacity: .3; } .idx_about .about_box .about_moblie .pager span.active { opacity: 1; } @media (max-width:990px) { .idx_about .about_box .about_moblie { display: block; } } /* 涓婚鍦烘櫙 */ .idx_theme { width: 100%; height: auto; background: #000; position: relative; z-index: 1; overflow: hidden; } .idx_theme .idx_center { margin: 9.8958vw auto 4.166vw; position: relative; z-index: 2; pointer-events: none; } @media (max-width:1024px) { .idx_theme .idx_center { margin: 80px auto; } } @media (max-width:768px) { .idx_theme .idx_center { margin: 0 auto 40px; } } .idx_theme .theme_box { width: 100%; height: auto; pointer-events: none; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .idx_theme .theme_box .swiper_box { width: 50%; height: auto; } .idx_theme .theme_box .swiper_box a { pointer-events: initial; } .idx_theme .theme_box .swiper_box .idx_title .title, .idx_theme .theme_box .swiper_box .idx_title .subtitle { color: #fff; } @media (max-width:768px) { .idx_theme .theme_box .swiper_box .idx_title { margin: 80px auto 40px; } } @media (max-width:768px) { .idx_theme .theme_box .swiper_box { width: 100%; } } .idx_theme .theme_box .theme_menu { width: auto; height: auto; display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr); grid-gap: 10px; grid-auto-flow: column; } .idx_theme .theme_box .theme_menu::before { content: ''; width: 100%; height: 100%; display: block; } .idx_theme .theme_box .theme_menu .item { width: 220px; height: 220px; padding: 20px; position: relative; pointer-events: initial; } .idx_theme .theme_box .theme_menu .item .icon { width: 100%; height: auto; font-size: 0; filter: brightness(0) invert(1); opacity: .4; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; position: relative; z-index: 2; } .idx_theme .theme_box .theme_menu .item .info { width: 100%; height: auto; margin-top: 20px; position: relative; z-index: 2; } .idx_theme .theme_box .theme_menu .item .info .title { width: 100%; height: auto; font-size: 24px; line-height: 1; color: #fff; opacity: .4; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1680px) { .idx_theme .theme_box .theme_menu .item .info .title { font-size: 22px; } } @media (max-width:1440px) { .idx_theme .theme_box .theme_menu .item .info .title { font-size: 20px; } } @media (max-width:1280px) { .idx_theme .theme_box .theme_menu .item .info .title { font-size: 18px; } } @media (max-width:1024px) { .idx_theme .theme_box .theme_menu .item .info .title { font-size: 16px; } } @media (max-width:768px) { .idx_theme .theme_box .theme_menu .item .info .title { font-size: 15px; } } .idx_theme .theme_box .theme_menu .item .info .menu { width: 100%; height: auto; position: absolute; top: 0; left: 0; transform: translateY(-2em); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; -ms-flex-wrap: wrap; grid-gap: 8px 20px; opacity: 0; visibility: hidden; } .idx_theme .theme_box .theme_menu .item .info .menu .one a { line-height: 1; font-size: 16px; color: #b5b7bb; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1440px) { .idx_theme .theme_box .theme_menu .item .info .menu .one a { font-size: 14px; } } @media (max-width:1024px) { .idx_theme .theme_box .theme_menu .item .info .menu .one a { font-size: 13px; } } @media (max-width:768px) { .idx_theme .theme_box .theme_menu .item .info .menu .one a { font-size: 12px; } } .idx_theme .theme_box .theme_menu .item .info .menu .one a:hover { color: #000; } .idx_theme .theme_box .theme_menu .item .icon_hot { width: 30px; height: 30px; position: absolute; right: 0; bottom: 0; z-index: 1; display: none; pointer-events: none; } .idx_theme .theme_box .theme_menu .item .icon_hot i { background: #e8ebf0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .idx_theme .theme_box .theme_menu .item .bg { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; opacity: .3; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; pointer-events: none; } .idx_theme .theme_box .theme_menu .item .bg svg polygon { fill: none; stroke: #fff; stroke-width: 2px; } .idx_theme .theme_box .theme_menu .item.active .icon { filter: none; opacity: 1; } .idx_theme .theme_box .theme_menu .item.active .info .title { transform: translateY(1em); opacity: 0; visibility: hidden; } .idx_theme .theme_box .theme_menu .item.active .info .menu { transform: translate(0); opacity: 1; visibility: visible; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .idx_theme .theme_box .theme_menu .item.active .bg { opacity: 1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .idx_theme .theme_box .theme_menu .item.active .bg svg polygon { fill: #fff; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .idx_theme .theme_box .theme_menu .item:hover .icon { opacity: 1; } .idx_theme .theme_box .theme_menu .item:hover .info .title { opacity: 1; } .idx_theme .theme_box .theme_menu .item:hover .bg { opacity: 1; } @media (max-width:1560px) { .idx_theme .theme_box .theme_menu .item { width: 200px; height: 200px; } .idx_theme .theme_box .theme_menu .item .icon img { max-height: 26px; } .idx_theme .theme_box .theme_menu .item .info .menu { grid-gap: 16px 7px; } } @media (max-width:1366px) { .idx_theme .theme_box .theme_menu .item { width: 180px; height: 180px; padding: 15px; } .idx_theme .theme_box .theme_menu .item .icon img { max-height: 22px; } .idx_theme .theme_box .theme_menu .item .info .menu { grid-gap: 14px 6px; } } @media (max-width:1024px) { .idx_theme .theme_box .theme_menu .item .icon img { max-height: 20px; } .idx_theme .theme_box .theme_menu .item .info .title { font-size: 18px; } .idx_theme .theme_box .theme_menu .item .info .menu { grid-gap: 15px 5px; } } @media (max-width:768px) { .idx_theme .theme_box .theme_menu .item { width: 100%; height: auto; padding: 30px 15px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; background: #fff; } .idx_theme .theme_box .theme_menu .item .icon, .idx_theme .theme_box .theme_menu .item.active .icon { width: 16px; height: 16px; filter: none; opacity: 1; } .idx_theme .theme_box .theme_menu .item .info, .idx_theme .theme_box .theme_menu .item.active .info { flex: 1; margin: 0 0 0 10px; } .idx_theme .theme_box .theme_menu .item .info .title, .idx_theme .theme_box .theme_menu .item.active .info .title { transform: translate(0); visibility: visible; color: #000; opacity: 1; } .idx_theme .theme_box .theme_menu .item .info .menu, .idx_theme .theme_box .theme_menu .item.active .info .menu { position: static; top: 0; visibility: visible; margin-top: 15px; grid-gap: 0 20px; transform: translate(0); opacity: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .idx_theme .theme_box .theme_menu .item .icon_hot, .idx_theme .theme_box .theme_menu .item.active .icon_hot { display: block; opacity: .9; } .idx_theme .theme_box .theme_menu .item .bg, .idx_theme .theme_box .theme_menu .item.active .bg { display: none; } .idx_theme .theme_box .theme_menu .item.active .icon_hot i { background-color: #f39800; } .idx_theme .theme_box .theme_menu .item:hover .info .title { margin: 0; opacity: 1; transform: translate(0); visibility: visible; } } @media (max-width:768px) { .idx_theme .theme_box .theme_menu { width: 100%; height: auto; grid-template-rows: auto; grid-template-columns: 100%; grid-gap: 6px; grid-auto-flow: row; } .idx_theme .theme_box .theme_menu .nbsp { display: none; } } @media (max-width:768px) { .idx_theme .theme_box { display: block; } } .idx_theme .swiper_img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } .idx_theme .swiper_img li { position: relative; z-index: 1; } .idx_theme .swiper_img li a { pointer-events: initial; } .idx_theme .swiper_img li.active { z-index: 2; } .idx_theme .swiper_img .images { width: 100%; height: 100%; overflow: hidden; } .idx_theme .swiper_img img { width: 100%; height: 100%; object-fit: cover; } @media (max-width:990px) { .idx_theme { display: none; } } /* 鎵嬫満鐗 涓婚鍦烘櫙 */ .mobile_theme { width: 100%; height: auto; display: none; overflow: hidden; } .mobile_theme .swiper_tab { width: 70%; height: auto; margin: 0 auto; padding-top: 60px; } .mobile_theme .swiper_tab .swiper-slide { text-align: center; } .mobile_theme .swiper_tab .swiper-slide .title { font-size: 60px; font-family: 'Rubik', 'ff800'; } @media (max-width:1600px) { .mobile_theme .swiper_tab .swiper-slide .title { font-size: 52px; } } @media (max-width:1440px) { .mobile_theme .swiper_tab .swiper-slide .title { font-size: 42px; } } @media (max-width:1024px) { .mobile_theme .swiper_tab .swiper-slide .title { font-size: 36px; } } @media (max-width:768px) { .mobile_theme .swiper_tab .swiper-slide .title { font-size: 30px; } } .mobile_theme .swiper_tab .swiper-slide .details { margin-top: 20px; font-size: 30px; opacity: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1680px) { .mobile_theme .swiper_tab .swiper-slide .details { font-size: 26px; } } @media (max-width:1440px) { .mobile_theme .swiper_tab .swiper-slide .details { font-size: 24px; } } @media (max-width:1280px) { .mobile_theme .swiper_tab .swiper-slide .details { font-size: 22px; } } @media (max-width:1024px) { .mobile_theme .swiper_tab .swiper-slide .details { font-size: 20px; } } @media (max-width:768px) { .mobile_theme .swiper_tab .swiper-slide .details { font-size: 18px; } } .mobile_theme .swiper_tab .swiper-slide.active .details { opacity: 1; } .mobile_theme .pager { width: 100%; height: auto; margin-top: 30px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; display: none; } .mobile_theme .pager span { width: 10px; height: 10px; border-radius: 50%; margin: 0 5px; background: #2c303d; opacity: .1; } .mobile_theme .pager span.active { background: #f39800; opacity: 1; } .mobile_theme .swiper_box { width: 100%; height: auto; /*margin-top: 40px;*/ overflow: hidden; } .mobile_theme .swiper_box .swiper-slide { width: 100%; height: auto; } .mobile_theme .swiper_box .swiper-slide .idx_title { width: 100%; height: 100%; padding: 0 20px; position: absolute; left: 0; top: 50px; z-index: 5; color: white; } .mobile_theme .swiper_box .menu { width: 100%; /*height: 100%;*/ padding: 0 20px; position: absolute; left: 0; /*top: 0;*/ bottom: 80px; z-index: 5; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .mobile_theme .swiper_box .menu .item { width: 100%; height: auto; } .mobile_theme .swiper_box .menu .item a { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .mobile_theme .swiper_box .menu .item a .item-left { width: 70%; } .mobile_theme .swiper_box .menu .item a .word { font-size: 30px; color: #FFF; } .mobile_theme .swiper_box .menu .item a .text-body { font-size: 14px; color: #FFF; display: none; } @media (max-width:1680px) { .mobile_theme .swiper_box .menu .item a .word { font-size: 26px; } } @media (max-width:1440px) { .mobile_theme .swiper_box .menu .item a .word { font-size: 24px; } } @media (max-width:1280px) { .mobile_theme .swiper_box .menu .item a .word { font-size: 22px; } } @media (max-width:1024px) { .mobile_theme .swiper_box .menu .item a .word { font-size: 20px; } } @media (max-width:768px) { .mobile_theme .swiper_box .menu .item a .word { font-size: 18px; } } .mobile_theme .swiper_box .menu .item a .icon { width: 1em; height: 1em; font-size: 30px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } @media (max-width:1680px) { .mobile_theme .swiper_box .menu .item a .icon { font-size: 26px; } } @media (max-width:1440px) { .mobile_theme .swiper_box .menu .item a .icon { font-size: 24px; } } @media (max-width:1280px) { .mobile_theme .swiper_box .menu .item a .icon { font-size: 22px; } } @media (max-width:1024px) { .mobile_theme .swiper_box .menu .item a .icon { font-size: 20px; } } @media (max-width:768px) { .mobile_theme .swiper_box .menu .item a .icon { font-size: 18px; } } .mobile_theme .swiper_box .menu .item:first-child ~ .item { margin-top: 15px; } .mobile_theme .swiper_box .images { width: 100%; height: auto; position: relative; z-index: 1; overflow: hidden; } .mobile_theme .swiper_box .images .pb { height: 500px; /*padding-bottom: 66.66666666666667%;*/ } .mobile_theme .swiper_box .images img { width: 100%; height: 100%; object-fit: cover; } @media (max-width:990px) { .mobile_theme { display: block; } } /* 浜у搧 鏈嶅姟 */ .idx_box { width: 100%; height: auto; position: relative; z-index: 1; overflow: hidden; } .idx_box::after { content: ''; width: 100%; height: 0; padding-bottom: min(37.5%, 720px); display: block; position: relative; z-index: 1; pointer-events: none; } .idx_box #arrow { left: 0; transform: translate(-5%, -20%) scaleX(-100%); z-index: 10; opacity: .1; } .idx_box #arrow svg path { stroke: #FFF; } @media (max-width:1520px) { .idx_box #arrow { transform: translate(-10%, -20%) scaleX(-100%); } } .idx_box .idx_main { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 5; overflow: hidden; } .idx_box .idx_center { width: 100%; height: 100%; position: relative; z-index: 2; } .idx_box .main_box { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .idx_box .main_box .sidebar_box { width: 16.67%; height: 100%; position: relative; z-index: 2; padding-top: clamp(60px, 6.25vw, 120px); padding-right: 30px; } .idx_box .main_box .sidebar_box::after { content: ''; width: 100vw; height: 100%; position: absolute; top: 0; right: 0; z-index: 1; background: #002b81; } .idx_box .main_box .sidebar_box .item { width: 100%; height: auto; position: relative; z-index: 5; } .idx_box .main_box .sidebar_box .item .title_box { width: 100%; height: auto; position: relative; z-index: 1; cursor: pointer; } .idx_box .main_box .sidebar_box .item .title_box .icon { width: 22px; height: 22px; background: url('../images/icon_arrow.png') no-repeat center / cover; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: 20px; opacity: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .idx_box .main_box .sidebar_box .item .title_box .title { width: 100%; height: auto; font-size: 36px; line-height: 1; color: #FFF; opacity: .4; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1680px) { .idx_box .main_box .sidebar_box .item .title_box .title { font-size: 32px; } } @media (max-width:1440px) { .idx_box .main_box .sidebar_box .item .title_box .title { font-size: 28px; } } @media (max-width:1280px) { .idx_box .main_box .sidebar_box .item .title_box .title { font-size: 24px; } } @media (max-width:1024px) { .idx_box .main_box .sidebar_box .item .title_box .title { font-size: 22px; } } @media (max-width:768px) { .idx_box .main_box .sidebar_box .item .title_box .title { font-size: 20px; } } .idx_box .main_box .sidebar_box .item .details { width: 100%; height: calc(5em * 1.2); margin-top: clamp(18px, 1.875vw, 36px); font-size: 24px; font-family: 'Rubik', 'ff100'; color: #FFF; line-height: 1.2; display: none; } @media (max-width:1680px) { .idx_box .main_box .sidebar_box .item .details { font-size: 22px; } } @media (max-width:1440px) { .idx_box .main_box .sidebar_box .item .details { font-size: 20px; } } @media (max-width:1280px) { .idx_box .main_box .sidebar_box .item .details { font-size: 18px; } } @media (max-width:1024px) { .idx_box .main_box .sidebar_box .item .details { font-size: 16px; } } @media (max-width:768px) { .idx_box .main_box .sidebar_box .item .details { font-size: 15px; } } .idx_box .main_box .sidebar_box .item:first-child ~ .item { margin-top: clamp(30px, 3.125vw, 60px); } .idx_box .main_box .sidebar_box .item:first-child .details { display: block; } .idx_box .main_box .sidebar_box .item.active .title_box .icon { margin-right: 10px; opacity: 1; } .idx_box .main_box .sidebar_box .item.active .title_box .title { opacity: 1; } .idx_box .main_box .sidebar_box .item:hover .title_box .title { opacity: 1; } @media (max-width:1520px) { .idx_box .main_box .sidebar_box .item .title_box .icon { width: 18px; height: 18px; } } @media (max-width:1280px) { .idx_box .main_box .sidebar_box .item .title_box .icon { width: 14px; height: 14px; } } @media (max-width:1024px) { .idx_box .main_box .sidebar_box { width: 100%; height: auto; padding: 60px 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 50px; } .idx_box .main_box .sidebar_box::after { left: 50%; transform: translateX(-50%); } .idx_box .main_box .sidebar_box .item { margin: 0 !important; } .idx_box .main_box .sidebar_box .item .title_box .icon { display: none; } .idx_box .main_box .sidebar_box .item .details { display: block !important; height: auto; opacity: .2; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .idx_box .main_box .sidebar_box .item.active .details { opacity: 1; } } .idx_box .main_box .content_box { width: 83.33%; height: 100%; position: relative; } .idx_box .main_box .content_box .swiper-slide { position: relative; z-index: 1; opacity: 0; } .idx_box .main_box .content_box .swiper-slide.active { z-index: 5; opacity: 1; } .idx_box .main_box .content_box .swiper_box { width: calc((100vw - 100% / 0.8333) / 2 + 100%); height: 100%; } .idx_box .main_box .content_box .swiper_box .product_slide, .idx_box .main_box .content_box .swiper_box .service_slide { width: 100%; height: 100%; position: relative; background: #F5F5F5; pointer-events: initial; overflow: hidden; } .idx_box .main_box .content_box .swiper_box .product_slide .content_tabs, .idx_box .main_box .content_box .swiper_box .service_slide .content_tabs { width: 100%; height: auto; position: absolute; bottom: 0; left: 0; z-index: 10; background: rgba(0, 0, 0, 0.4); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; pointer-events: initial; overflow: hidden; } .idx_box .main_box .content_box .swiper_box .product_slide .content_tabs .item, .idx_box .main_box .content_box .swiper_box .service_slide .content_tabs .item { width: 100%; height: 60px; padding: 0 20px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; cursor: pointer; position: relative; z-index: 1; pointer-events: initial; -webkit-transition: all 0.55s ease; -o-transition: all 0.55s ease; transition: all 0.55s ease; overflow: hidden; } .idx_box .main_box .content_box .swiper_box .product_slide .content_tabs .item .word, .idx_box .main_box .content_box .swiper_box .service_slide .content_tabs .item .word { font-size: 18px; color: #FFF; white-space: nowrap; -webkit-transition: all 0.55s ease; -o-transition: all 0.55s ease; transition: all 0.55s ease; } @media (max-width:1440px) { .idx_box .main_box .content_box .swiper_box .product_slide .content_tabs .item .word, .idx_box .main_box .content_box .swiper_box .service_slide .content_tabs .item .word { font-size: 16px; } } @media (max-width:1024px) { .idx_box .main_box .content_box .swiper_box .product_slide .content_tabs .item .word, .idx_box .main_box .content_box .swiper_box .service_slide .content_tabs .item .word { font-size: 14px; } } @media (max-width:768px) { .idx_box .main_box .content_box .swiper_box .product_slide .content_tabs .item .word, .idx_box .main_box .content_box .swiper_box .service_slide .content_tabs .item .word { font-size: 13px; } } .idx_box .main_box .content_box .swiper_box .product_slide .content_tabs .item .icon, .idx_box .main_box .content_box .swiper_box .service_slide .content_tabs .item .icon { width: 16px; height: 11px; background: #FFF; position: absolute; right: 50%; transform: translateX(50%); opacity: 0; -webkit-transition: all 0.55s ease; -o-transition: all 0.55s ease; transition: all 0.55s ease; -webkit-mask: url('../svg/icon_arrow3.svg') no-repeat center / cover; -moz-mask: url('../svg/icon_arrow3.svg') no-repeat center / cover; mask: url('../svg/icon_arrow3.svg') no-repeat center / cover; } .idx_box .main_box .content_box .swiper_box .product_slide .content_tabs .item.active:hover, .idx_box .main_box .content_box .swiper_box .service_slide .content_tabs .item.active:hover, .idx_box .main_box .content_box .swiper_box .product_slide .content_tabs .item.active, .idx_box .main_box .content_box .swiper_box .service_slide .content_tabs .item.active { background: #F59600; } .idx_box .main_box .content_box .swiper_box .product_slide .content_tabs .item.active:hover .word, .idx_box .main_box .content_box .swiper_box .service_slide .content_tabs .item.active:hover .word, .idx_box .main_box .content_box .swiper_box .product_slide .content_tabs .item.active .word, .idx_box .main_box .content_box .swiper_box .service_slide .content_tabs .item.active .word { flex: 1; } .idx_box .main_box .content_box .swiper_box .product_slide .content_tabs .item.active:hover .icon, .idx_box .main_box .content_box .swiper_box .service_slide .content_tabs .item.active:hover .icon, .idx_box .main_box .content_box .swiper_box .product_slide .content_tabs .item.active .icon, .idx_box .main_box .content_box .swiper_box .service_slide .content_tabs .item.active .icon { opacity: 1; right: 20px; transform: translate(0); } .idx_box .main_box .content_box .swiper_box .product_slide .content_tabs .item:hover, .idx_box .main_box .content_box .swiper_box .service_slide .content_tabs .item:hover { background: rgba(0, 0, 0, 0.2); } .idx_box .main_box .content_box .swiper_box .product_slide .content_tabs .item:hover .word, .idx_box .main_box .content_box .swiper_box .service_slide .content_tabs .item:hover .word { flex: 1; } .idx_box .main_box .content_box .swiper_box .product_slide .content_tabs .item:hover .icon, .idx_box .main_box .content_box .swiper_box .service_slide .content_tabs .item:hover .icon { opacity: 1; right: 20px; transform: translate(0); } @media (max-width:1440px) { .idx_box .main_box .content_box .swiper_box .product_slide .content_tabs .item .icon, .idx_box .main_box .content_box .swiper_box .service_slide .content_tabs .item .icon { width: 10px; height: 7px; } } @media (max-width:1280px) { .idx_box .main_box .content_box .swiper_box .product_slide .content_tabs .item, .idx_box .main_box .content_box .swiper_box .service_slide .content_tabs .item { height: 50px; } } @media (max-width:1024px) { .idx_box .main_box .content_box .swiper_box .product_slide .content_tabs, .idx_box .main_box .content_box .swiper_box .service_slide .content_tabs { position: relative; } .idx_box .main_box .content_box .swiper_box .product_slide .content_tabs .item, .idx_box .main_box .content_box .swiper_box .service_slide .content_tabs .item { height: 44px; padding: 0 15px; } .idx_box .main_box .content_box .swiper_box .product_slide .content_tabs .item .icon, .idx_box .main_box .content_box .swiper_box .service_slide .content_tabs .item .icon { right: 15px; } } @media (max-width:768px) { .idx_box .main_box .content_box .swiper_box .product_slide .content_tabs, .idx_box .main_box .content_box .swiper_box .service_slide .content_tabs { flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .idx_box .main_box .content_box .swiper_box .product_slide .content_tabs .item, .idx_box .main_box .content_box .swiper_box .service_slide .content_tabs .item { width: 33.33%; } } .idx_box .main_box .content_box .swiper_box .content_swiper { width: 100%; height: 100%; /* 浜у搧 */ /* 鏈嶅姟 */ } .idx_box .main_box .content_box .swiper_box .content_swiper > .swiper-wrapper, .idx_box .main_box .content_box .swiper_box .content_swiper > .swiper-wrapper > .swiper-slide { width: 100%; height: 100%; } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; padding-top: clamp(60px, 6.25vw, 120px); } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box { width: 30%; height: auto; padding-left: clamp(30px, 3.125vw, 60px); /*padding-right: clamp(30px, 3.125vw, 60px);*/ } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .tabs_box { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .tabs_box .item { font-size: 16px; color: #2c303d; opacity: .5; cursor: pointer; pointer-events: initial; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1440px) { .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .tabs_box .item { font-size: 14px; } } @media (max-width:1024px) { .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .tabs_box .item { font-size: 13px; } } @media (max-width:768px) { .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .tabs_box .item { font-size: 12px; } } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .tabs_box .item:first-child ~ .item { margin-left: clamp(0.625rem, calc(-2.452rem + 3.85vw), 1.875rem); } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .tabs_box .item.active, .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .tabs_box .item.active:hover { font-family: 'Rubik', 'ff700'; opacity: 1; } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .tabs_box .item:hover { opacity: .75; } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .title_swiper { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .title_swiper .title { width: 100%; height: calc(2em * 1.2); font-size: 30px; font-family: 'Gilroy', 'ff800'; line-height: 1.2; color: #2c303d; pointer-events: initial; } @media (max-width:1680px) { .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .title_swiper .title { font-size: 26px; } } @media (max-width:1440px) { .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .title_swiper .title { font-size: 24px; } } @media (max-width:1280px) { .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .title_swiper .title { font-size: 22px; } } @media (max-width:1024px) { .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .title_swiper .title { font-size: 20px; } } @media (max-width:768px) { .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .title_swiper .title { font-size: 18px; } } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .title_swiper .more { width: auto; height: auto; margin-top: clamp(23px, 2.39583333vw, 46px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .title_swiper .more a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; pointer-events: initial; } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .title_swiper .more .icon { width: 30px; height: 30px; background: #f39800; border-radius: 50%; color: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .title_swiper .more .icon i { font-size: 12px; line-height: 1; } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .title_swiper .more .txt { margin-left: .7em; font-size: 14px; color: #f39800; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .title_swiper .more:hover a .icon { background: #003281; } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .title_swiper .more:hover a .txt { color: #003281; } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box .title { width: 100%; height: auto; } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .images_box { width: 100%; flex: 1; height: 100%; overflow: hidden; } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .images_box > .swiper-wrapper, .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .images_box > .swiper-wrapper > .swiper-slide { width: 100%; height: 100%; } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .images_box .img { width: 100%; height: 100%; text-align: center; overflow: hidden; } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .images_box .img img { vertical-align: bottom; } @media (max-width:1024px) { .idx_box .main_box .content_box .swiper_box .content_swiper .product_box { -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box { width: 100%; } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .images_box { height: auto; margin-top: 20px; } } @media (max-width:990px) { .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .info_box { padding: 0 20px; } } @media (max-width:768px) { .idx_box .main_box .content_box .swiper_box .content_swiper .product_box { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .idx_box .main_box .content_box .swiper_box .content_swiper .product_box .images_box { flex: 0 0 auto; height: auto; } } .idx_box .main_box .content_box .swiper_box .content_swiper .service_box { width: 100%; height: 100%; background: #F7F7F7; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; padding-top: clamp(60px, 6.25vw, 120px); padding-bottom: clamp(60px, 6.25vw, 120px); } .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .info_box { width: 30%; height: auto; padding-left: clamp(30px, 3.125vw, 60px); padding-right: clamp(30px, 3.125vw, 60px); } .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .info_box .title { width: 100%; height: calc(2em * 1.2); font-size: 30px; font-family: 'Gilroy', 'ff800'; color: #2c303d; line-height: 1.2; } @media (max-width:1680px) { .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .info_box .title { font-size: 26px; } } @media (max-width:1440px) { .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .info_box .title { font-size: 24px; } } @media (max-width:1280px) { .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .info_box .title { font-size: 22px; } } @media (max-width:1024px) { .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .info_box .title { font-size: 20px; } } @media (max-width:768px) { .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .info_box .title { font-size: 18px; } } .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .info_box .details { font-size: 24px; font-family: 'Rubik', 'ff200'; color: #2c303d; line-height: 1.2; text-align: justify; } @media (max-width:1680px) { .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .info_box .details { font-size: 22px; } } @media (max-width:1440px) { .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .info_box .details { font-size: 20px; } } @media (max-width:1280px) { .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .info_box .details { font-size: 18px; } } @media (max-width:1024px) { .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .info_box .details { font-size: 16px; } } @media (max-width:768px) { .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .info_box .details { font-size: 15px; } } .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .info_box .more { width: auto; height: auto; margin-top: clamp(40px, 4.16666667vw, 80px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .info_box .more a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; pointer-events: initial; } .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .info_box .more .icon { width: 30px; height: 30px; background: #f39800; border-radius: 50%; color: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .info_box .more .icon i { font-size: 12px; line-height: 1; } .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .info_box .more .txt { margin-left: .7em; font-size: 14px; color: #f39800; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .info_box .more:hover a .icon { background: #003281; } .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .info_box .more:hover a .txt { color: #003281; } .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .images_box { width: 100%; max-width: 960px; flex: 1; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; overflow: hidden; } .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .images_box .images { width: 100%; height: auto; position: relative; z-index: 1; overflow: hidden; } .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .images_box .images::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; background: #000; -webkit-mask: linear-gradient(transparent, #000000); opacity: .2; } .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .images_box .images .img { width: 100%; height: auto; position: relative; z-index: 1; text-align: center; overflow: hidden; } .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .images_box .images .img .pb { padding-bottom: 50%; } .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .images_box .images .img img { width: 100%; height: 100%; object-fit: cover; } .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .images_box .images .details { width: 100%; height: auto; position: absolute; bottom: 0; left: 0; z-index: 5; padding: 40px; font-size: 16px; font-family: 'Rubik', 'ff200'; color: #FFF; } @media (max-width:1440px) { .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .images_box .images .details { font-size: 14px; } } @media (max-width:1024px) { .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .images_box .images .details { font-size: 13px; } } @media (max-width:768px) { .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .images_box .images .details { font-size: 12px; } } @media (max-width:1024px) { .idx_box .main_box .content_box .swiper_box .content_swiper .service_box { -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .info_box { width: 100%; } .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .images_box { width: 100%; margin-top: 20px; } } @media (max-width:768px) { .idx_box .main_box .content_box .swiper_box .content_swiper .service_box { -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .images_box .images { height: 100%; } .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .images_box .images .img { height: 100%; } .idx_box .main_box .content_box .swiper_box .content_swiper .service_box .images_box .images .img .pb { height: 100%; padding: 0; } } @media (max-width:768px) { .idx_box .main_box .content_box .swiper_box .content_swiper { height: 70vh; } } @media (max-width:1024px) { .idx_box .main_box .content_box { width: 100vw; height: auto; left: 50%; transform: translateX(-50%); } .idx_box .main_box .content_box .swiper_box { width: 100%; } } @media (max-width:1024px) { .idx_box .main_box { display: block; } } @media (max-width:1024px) { .idx_box { height: auto; } .idx_box .idx_main { height: auto; position: relative; } .idx_box::after { display: none; } } /* 鏂伴椈涓績 */ .idx_news { width: 100%; height: auto; padding-top: clamp(70px, 7.29166667vw, 140px); padding-bottom: clamp(80px, 8.33333333vw, 160px); overflow: hidden; } .idx_news .idx_center { width: 100%; height: auto; } .idx_news .news_box { width: 100%; height: auto; margin-top: 2.7vw; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 24px; } .idx_news .news_box .news_item { width: 100%; height: 100%; position: relative; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; overflow: hidden; } .idx_news .news_box .news_item a { width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; z-index: 5; overflow: hidden; } .idx_news .news_box .news_item .img { width: 100%; height: auto; overflow: hidden; } .idx_news .news_box .news_item .img .pb { padding-bottom: 51.72%; } .idx_news .news_box .news_item .img .ab { -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .idx_news .news_box .news_item .info_box { width: 100%; height: auto; flex: 1; padding-top: clamp(17.5px, 1.82291667vw, 35px); padding-bottom: clamp(17.5px, 1.82291667vw, 35px); padding-left: clamp(15px, 1.5625vw, 30px); padding-right: clamp(15px, 1.5625vw, 30px); border: 1px solid #eceff3; position: relative; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; overflow: hidden; } .idx_news .news_box .news_item .info_box .info { width: 100%; height: auto; } .idx_news .news_box .news_item .info_box .info .classify { font-size: 14px; color: #f39800; line-height: 1; } @media (max-width:1280px) { .idx_news .news_box .news_item .info_box .info .classify { font-size: 13px; } } @media (max-width:1024px) { .idx_news .news_box .news_item .info_box .info .classify { font-size: 12px; } } .idx_news .news_box .news_item .info_box .info .title { margin-top: 1em; font-size: 20px; line-height: 1.5; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1680px) { .idx_news .news_box .news_item .info_box .info .title { font-size: 18px; } } @media (max-width:1440px) { .idx_news .news_box .news_item .info_box .info .title { font-size: 17px; } } @media (max-width:1280px) { .idx_news .news_box .news_item .info_box .info .title { font-size: 16px; } } @media (max-width:1024px) { .idx_news .news_box .news_item .info_box .info .title { font-size: 15px; } } @media (max-width:768px) { .idx_news .news_box .news_item .info_box .info .title { font-size: 14px; } } .idx_news .news_box .news_item .info_box .time { margin-top: 1.4em; font-size: 14px; } @media (max-width:1280px) { .idx_news .news_box .news_item .info_box .time { font-size: 13px; } } @media (max-width:1024px) { .idx_news .news_box .news_item .info_box .time { font-size: 12px; } } .idx_news .news_box .news_item:hover .img .ab { -webkit-transform: scale(1.03); -ms-transform: scale(1.03); -o-transform: scale(1.03); transform: scale(1.03); } .idx_news .news_box .news_item:hover .info_box .info .title { color: #f39800; } .idx_news .news_box .news_list { width: 100%; height: auto; position: relative; border: 1px solid #eceff3; background: url('../images/news_bg.jpg') no-repeat center / cover; } .idx_news .news_box .news_list .title_box { width: 100%; height: auto; position: relative; z-index: 2; padding-top: clamp(10px, 1.04166667vw, 20px); padding-bottom: clamp(10px, 1.04166667vw, 20px); padding-left: clamp(15px, 1.5625vw, 30px); padding-right: clamp(15px, 1.5625vw, 30px); border-bottom: 1px solid #eceff3; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; overflow: hidden; } .idx_news .news_box .news_list .title_box .title { font-size: 14px; line-height: 1; } .idx_news .news_box .news_list .title_box .more a { font-size: 14px; line-height: 1; color: #f39800; } @media (max-width:1280px) { .idx_news .news_box .news_list .title_box .more a { font-size: 13px; } } @media (max-width:1024px) { .idx_news .news_box .news_list .title_box .more a { font-size: 12px; } } .idx_news .news_box .news_list .menu_box { width: 100%; height: 540px; position: relative; z-index: 2; padding: 2.56vw 4px 3.385vw 0; display: grid; grid-template-columns: 100%; grid-gap: min(1.5625vw, 30px); overflow: hidden; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: #f39800 transparent; } .idx_news .news_box .news_list .menu_box::-webkit-scrollbar { width: 4px; height: 4px; background-color: transparent; } .idx_news .news_box .news_list .menu_box::-webkit-scrollbar-thumb { background-color: #f39800; border-radius: 10px; } .idx_news .news_box .news_list .menu_box .item { width: 100%; height: auto; padding: 0 30px; position: relative; } .idx_news .news_box .news_list .menu_box .item a { width: 100%; height: auto; display: block; } .idx_news .news_box .news_list .menu_box .item .title { width: 100%; height: auto; font-size: 20px; line-height: 1.5; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1680px) { .idx_news .news_box .news_list .menu_box .item .title { font-size: 18px; } } @media (max-width:1440px) { .idx_news .news_box .news_list .menu_box .item .title { font-size: 17px; } } @media (max-width:1280px) { .idx_news .news_box .news_list .menu_box .item .title { font-size: 16px; } } @media (max-width:1024px) { .idx_news .news_box .news_list .menu_box .item .title { font-size: 15px; } } @media (max-width:768px) { .idx_news .news_box .news_list .menu_box .item .title { font-size: 14px; } } .idx_news .news_box .news_list .menu_box .item .time { margin-top: 1em; line-height: 1; font-size: 14px; opacity: .4; } @media (max-width:1280px) { .idx_news .news_box .news_list .menu_box .item .time { font-size: 13px; } } @media (max-width:1024px) { .idx_news .news_box .news_list .menu_box .item .time { font-size: 12px; } } .idx_news .news_box .news_list .menu_box .item:hover .title { color: #f39800; } @media (max-width:1024px) { .idx_news .news_box .news_list .menu_box .item { padding: 0 20px; } .idx_news .news_box .news_list .menu_box .item .title { font-size: 14px; } } @media (max-width:768px) { .idx_news .news_box .news_list .menu_box .item { padding: 0 15px; } } @media (max-width:1440px) { .idx_news .news_box .news_list .menu_box { height: 480px; } } @media (max-width:1280px) { .idx_news .news_box .news_list .menu_box { height: 440px; } } @media (max-width:1024px) { .idx_news .news_box .news_list .menu_box { padding: 20px 0; grid-gap: 25px; } } .idx_news .news_box .icon_hot { width: 125px; height: 125px; position: absolute; right: 0; bottom: 0; z-index: 1; opacity: .4; } .idx_news .news_box .icon_hot i { background: #e8ebf0; } @media (max-width:1560px) { .idx_news .news_box .icon_hot { width: 105px; height: 105px; } } @media (max-width:1366px) { .idx_news .news_box .icon_hot { width: 90px; height: 90px; } } @media (max-width:1024px) { .idx_news .news_box .icon_hot { width: 75px; height: 75px; } } @media (max-width:768px) { .idx_news .news_box .icon_hot { width: 50px; height: 50px; } } @media (max-width:1024px) { .idx_news .news_box { margin-top: 20px; grid-gap: 15px; } } @media (max-width:990px) { .idx_news .news_box { grid-template-columns: repeat(2, 1fr); } .idx_news .news_box .news_list { grid-column: span 2; } } @media (max-width:480px) { .idx_news .news_box { grid-template-columns: 100%; } .idx_news .news_box .news_list { grid-column: span 1; } } /* 鏅烘収绠$悊 */ .idx_smart { width: 100%; height: auto; position: relative; z-index: 1; overflow: hidden; } .idx_smart .idx_center { margin: 4.8vw auto; position: relative; z-index: 2; } @media (max-width:1024px) { .idx_smart .idx_center { margin: 50px 0 30px; } } .idx_smart .idx_title .title { text-align: center; color: #fff; } .idx_smart .smart_box { width: 100%; height: auto; margin-top: 3vw; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; flex-wrap: wrap; -ms-flex-wrap: wrap; grid-gap: 5.2vw; } .idx_smart .smart_box .item { width: auto; height: auto; } .idx_smart .smart_box .item a { width: 100%; height: auto; display: block; } .idx_smart .smart_box .item .icon { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: #fff; font-size: 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .idx_smart .smart_box .item .icon img { max-width: 50%; max-height: 50%; } .idx_smart .smart_box .item .title { width: 6em; height: auto; margin: 1em auto 0; text-align: center; font-size: 20px; color: #fff; line-height: 1; } .idx_smart .smart_box .item:hover .icon { transform: translateY(-10px); } @media (max-width:1366px) { .idx_smart .smart_box .item .title { font-size: 18px; } } @media (max-width:1024px) { .idx_smart .smart_box .item { grid-gap: 25px; } .idx_smart .smart_box .item .title { font-size: 16px; } } @media (max-width:768px) { .idx_smart .smart_box .item { width: 100%; } .idx_smart .smart_box .item .icon { width: 50px; height: 50px; } .idx_smart .smart_box .item .icon img { max-width: 40%; max-height: 40%; } .idx_smart .smart_box .item .title { font-size: 14px; line-height: 1.2; } } @media (max-width:1024px) { .idx_smart .smart_box { margin-top: 30px; } } @media (max-width:768px) { .idx_smart .smart_box { grid-gap: 30px 5%; } .idx_smart .smart_box .item { width: 30%; } } .idx_smart .images { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; overflow: hidden; } .idx_smart .images img { width: 100%; height: 100%; object-fit: cover; } /* 蹇嵎瀵艰埅 */ .idx_nav { width: 100%; height: auto; padding-top: clamp(50px, 5.20833333vw, 100px); padding-bottom: clamp(50px, 5.20833333vw, 100px); background: #003281; position: relative; z-index: 1; overflow: hidden; } .idx_nav .idx_center { position: relative; z-index: 2; } .idx_nav .menu { width: 100%; height: auto; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); } .idx_nav .menu .item { width: 100%; height: auto; border-right: 1px solid rgba(255, 255, 255, 0.1); } .idx_nav .menu .item:first-child { border-left: 1px solid rgba(255, 255, 255, 0.1); } .idx_nav .menu .item a { width: 100%; height: auto; padding-top: clamp(14.5px, 1.51041667vw, 29px); padding-bottom: clamp(14.5px, 1.51041667vw, 29px); padding-left: clamp(12.5px, 1.30208333vw, 25px); padding-right: clamp(12.5px, 1.30208333vw, 25px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease; } .idx_nav .menu .item .icon { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .idx_nav .menu .item .title { margin-left: 1em; font-size: 20px; color: #fff; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .idx_nav .menu .item.active a { opacity: .5; } .idx_nav .menu .item:hover .title { margin-left: 1.5em; } @media (max-width:1366px) { .idx_nav .menu .item .icon { width: 30px; height: 30px; } .idx_nav .menu .item .title { font-size: 18px; } } @media (max-width:1024px) { .idx_nav .menu .item .title { font-size: 16px; } } @media (max-width:990px) { .idx_nav .menu .item a { -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .idx_nav .menu .item .title { margin: 1em 0 0; } } @media (max-width:768px) { .idx_nav .menu .item { border: 0; } .idx_nav .menu .item:first-child { border-left: 0; } .idx_nav .menu .item .icon { width: 24px; height: 24px; } .idx_nav .menu .item .title { font-size: 14px; } } @media (max-width:768px) { .idx_nav .menu { grid-template-columns: repeat(2, 1fr); border: 0; grid-gap: 20px; } .idx_nav .menu::before, .idx_nav .menu::after { content: ''; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); opacity: .1; } .idx_nav .menu::before { width: 1px; background: linear-gradient(#ffffff calc(50% - 10px), transparent calc(50% - 10px), transparent calc(50% + 10px), #ffffff calc(50% + 10px)); } .idx_nav .menu::after { height: 1px; background: linear-gradient(to right, #ffffff calc(50% - 10px), transparent calc(50% - 10px), transparent calc(50% + 10px), #ffffff calc(50% + 10px)); } } .idx_nav .icon_hot { width: 125px; height: 125px; position: absolute; right: 0; bottom: 0; z-index: 1; transform: translateY(10%); mix-blend-mode: screen; -webkit-mask: linear-gradient(rgba(0, 0, 0, 0.8), transparent); mask: linear-gradient(rgba(0, 0, 0, 0.8), transparent); } @media (max-width:1560px) { .idx_nav .icon_hot { width: 105px; height: 105px; } } @media (max-width:1366px) { .idx_nav .icon_hot { width: 90px; height: 90px; } } @media (max-width:1024px) { .idx_nav .icon_hot { width: 75px; height: 75px; } } @media (max-width:768px) { .idx_nav .icon_hot { width: 50px; height: 50px; } } /* ---------- */ /* 鎼滅储缁撴灉椤 */ .inside_search_box { width: 100%; height: auto; padding-top: 80px; overflow: hidden; } .inside_search_box .search_box { width: 100%; height: auto; padding-top: clamp(30px, 3.125vw, 60px); padding-bottom: clamp(45px, 4.6875vw, 90px); overflow: hidden; } .inside_search_box .search_box .form_box { width: 100%; max-width: 720px; height: auto; margin: 0 auto; overflow: hidden; } .inside_search_box .search_box .form_box .form_title { width: 100%; height: auto; text-align: center; font-size: 36px; font-family: 'Rubik', 'ff200'; color: #2c303d; } @media (max-width:1680px) { .inside_search_box .search_box .form_box .form_title { font-size: 32px; } } @media (max-width:1440px) { .inside_search_box .search_box .form_box .form_title { font-size: 28px; } } @media (max-width:1280px) { .inside_search_box .search_box .form_box .form_title { font-size: 24px; } } @media (max-width:1024px) { .inside_search_box .search_box .form_box .form_title { font-size: 22px; } } @media (max-width:768px) { .inside_search_box .search_box .form_box .form_title { font-size: 20px; } } .inside_search_box .search_box .form_box .form_main { width: 100%; height: auto; margin-top: clamp(25px, 2.60416667vw, 50px); } .inside_search_box .search_box .form_box .form_main form { width: 100%; height: auto; padding-bottom: clamp(10px, 1.04166667vw, 20px); border-bottom: 1px solid #A5A6AB; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; grid-gap: min(1.5625vw, 30px); } .inside_search_box .search_box .form_box .form_main .icon { width: 1em; height: 1em; font-size: 40px; background: #2c303d; opacity: .2; -webkit-mask: url('../svg/icon_search.svg') no-repeat center / cover; -moz-mask: url('../svg/icon_search.svg') no-repeat center / cover; -ms-mask: url('../svg/icon_search.svg') no-repeat center / cover; -o-mask: url('../svg/icon_search.svg') no-repeat center / cover; mask: url('../svg/icon_search.svg') no-repeat center / cover; } @media (max-width:1680px) { .inside_search_box .search_box .form_box .form_main .icon { font-size: 36px; } } @media (max-width:1440px) { .inside_search_box .search_box .form_box .form_main .icon { font-size: 32px; } } @media (max-width:1280px) { .inside_search_box .search_box .form_box .form_main .icon { font-size: 28px; } } @media (max-width:1024px) { .inside_search_box .search_box .form_box .form_main .icon { font-size: 24px; } } @media (max-width:768px) { .inside_search_box .search_box .form_box .form_main .icon { font-size: 22px; } } .inside_search_box .search_box .form_box .form_main .input { flex: 1; width: 100%; height: auto; } .inside_search_box .search_box .form_box .form_main .input input { width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent; font-size: 24px; font-family: 'Rubik', 'ff200'; color: #2c303d; } @media (max-width:1680px) { .inside_search_box .search_box .form_box .form_main .input input { font-size: 22px; } } @media (max-width:1440px) { .inside_search_box .search_box .form_box .form_main .input input { font-size: 20px; } } @media (max-width:1280px) { .inside_search_box .search_box .form_box .form_main .input input { font-size: 18px; } } @media (max-width:1024px) { .inside_search_box .search_box .form_box .form_main .input input { font-size: 16px; } } @media (max-width:768px) { .inside_search_box .search_box .form_box .form_main .input input { font-size: 15px; } } .inside_search_box .search_box .form_box .form_main .input input::-webkit-input-placeholder { color: #2c303d; opacity: .4; } .inside_search_box .search_box .form_box .form_main .input input:-moz-placeholder { color: #2c303d; opacity: .4; } .inside_search_box .search_box .form_box .form_main .input input::-moz-placeholder { color: #2c303d; opacity: .4; } .inside_search_box .search_box .form_box .form_main .input input:-ms-input-placeholder { color: #2c303d; opacity: .4; } .inside_search_box .search_box .form_box .form_main .submit { width: 1em; height: 1em; font-size: 22px; } @media (max-width:1680px) { .inside_search_box .search_box .form_box .form_main .submit { font-size: 20px; } } @media (max-width:1440px) { .inside_search_box .search_box .form_box .form_main .submit { font-size: 18px; } } @media (max-width:1280px) { .inside_search_box .search_box .form_box .form_main .submit { font-size: 17px; } } @media (max-width:1024px) { .inside_search_box .search_box .form_box .form_main .submit { font-size: 16px; } } @media (max-width:768px) { .inside_search_box .search_box .form_box .form_main .submit { font-size: 15px; } } .inside_search_box .search_box .form_box .form_main .submit input { width: 100%; height: 100%; cursor: pointer; border: 0; background: #2c303d; -webkit-mask: url('../images/icon_arrow.png') no-repeat right / cover; -moz-mask: url('../images/icon_arrow.png') no-repeat right / cover; -ms-mask: url('../images/icon_arrow.png') no-repeat right / cover; -o-mask: url('../svg/icon_arrow.svg') no-repeat right; mask: url('../svg/icon_arrow.svg') no-repeat right; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_search_box .search_box .form_box .form_main .submit:hover input { -webkit-mask-position: center; -moz-mask-position: center; mask-position: center; } .inside_search_box .search_box .search_main { width: 100%; height: auto; margin-top: 40px; position: relative; z-index: 1; } .inside_search_box .search_box .search_main .sidebar { width: 20.83333333333333%; height: auto; position: absolute; top: 0; left: 0; padding: 40px 20px 20px; background: #F5F5F5; overflow: hidden; } .inside_search_box .search_box .search_main .sidebar .s_title { width: 100%; height: auto; line-height: 1; font-size: 20px; font-family: 'Rubik', 'ff300'; color: #2c303d; } @media (max-width:1680px) { .inside_search_box .search_box .search_main .sidebar .s_title { font-size: 18px; } } @media (max-width:1440px) { .inside_search_box .search_box .search_main .sidebar .s_title { font-size: 17px; } } @media (max-width:1280px) { .inside_search_box .search_box .search_main .sidebar .s_title { font-size: 16px; } } @media (max-width:1024px) { .inside_search_box .search_box .search_main .sidebar .s_title { font-size: 15px; } } @media (max-width:768px) { .inside_search_box .search_box .search_main .sidebar .s_title { font-size: 14px; } } .inside_search_box .search_box .search_main .sidebar .item_box { width: 100%; height: auto; } .inside_search_box .search_box .search_main .sidebar .item_box .select_box { width: 100%; height: auto; margin-top: 20px; } .inside_search_box .search_box .search_main .sidebar .item_box .select_box .layui-form-select .layui-select-title .layui-edge { width: 7px; height: 7px; border: 0; margin: -3.5px 0 0; -webkit-mask: url('../svg/icon_down2.svg') no-repeat center; background: #000; transform-origin: center; } .inside_search_box .search_box .search_main .sidebar .item_box .select_box .layui-form-select dl { top: 100%; background: #F8F8F8; border: 0; scrollbar-width: thin; scrollbar-color: #f39800 transparent; } .inside_search_box .search_box .search_main .sidebar .item_box .select_box .layui-form-select dl::-webkit-scrollbar { width: 2px; height: 2px; background-color: #f5f5f5; } .inside_search_box .search_box .search_main .sidebar .item_box .select_box .layui-form-select dl::-webkit-scrollbar-thumb { background-color: #f39800; border-radius: 10px; } .inside_search_box .search_box .search_main .sidebar .item_box .select_box .layui-form-select dd { font-size: 14px; color: #999; } @media (max-width:1280px) { .inside_search_box .search_box .search_main .sidebar .item_box .select_box .layui-form-select dd { font-size: 13px; } } @media (max-width:1024px) { .inside_search_box .search_box .search_main .sidebar .item_box .select_box .layui-form-select dd { font-size: 12px; } } .inside_search_box .search_box .search_main .sidebar .item_box .select_box .layui-form-select dd.layui-this { background: rgba(245, 150, 0, 0.1); color: #f39800; font-weight: normal; } .inside_search_box .search_box .search_main .sidebar .item_box .select_box .layui-form-selectup dl { top: auto; bottom: 100%; } .inside_search_box .search_box .search_main .sidebar .item_box .menu_box { width: 100%; height: auto; margin-top: 20px; background: #FFF; padding: 20px; display: grid; grid-template-columns: 100%; grid-gap: 10px; overflow: hidden; } .inside_search_box .search_box .search_main .sidebar .item_box .menu_box .one { width: 100%; height: auto; overflow: hidden; } .inside_search_box .search_box .search_main .sidebar .item_box .menu_box .one a { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .inside_search_box .search_box .search_main .sidebar .item_box .menu_box .one a .icon { width: 10px; height: 10px; background: #FFF; position: relative; overflow: hidden; } .inside_search_box .search_box .search_main .sidebar .item_box .menu_box .one a .icon::before, .inside_search_box .search_box .search_main .sidebar .item_box .menu_box .one a .icon::after { content: ''; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); background: #C1C1C1; } .inside_search_box .search_box .search_main .sidebar .item_box .menu_box .one a .icon::after { width: 80%; height: 80%; background: #FFF; z-index: 2; } .inside_search_box .search_box .search_main .sidebar .item_box .menu_box .one a .word { width: auto; height: auto; padding-left: 10px; font-size: 14px; color: #2c303d; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .inside_search_box .search_box .search_main .sidebar .item_box .menu_box .one a .word { font-size: 13px; } } @media (max-width:1024px) { .inside_search_box .search_box .search_main .sidebar .item_box .menu_box .one a .word { font-size: 12px; } } .inside_search_box .search_box .search_main .sidebar .item_box .menu_box .one a.active .icon::before, .inside_search_box .search_box .search_main .sidebar .item_box .menu_box .one a:hover .icon::before { background: #f39800; } .inside_search_box .search_box .search_main .sidebar .item_box .menu_box .one a.active .icon::after, .inside_search_box .search_box .search_main .sidebar .item_box .menu_box .one a:hover .icon::after { width: 40%; height: 40%; } .inside_search_box .search_box .search_main .sidebar .item_box .menu_box .one a.active .word, .inside_search_box .search_box .search_main .sidebar .item_box .menu_box .one a:hover .word { color: #f39800; } .inside_search_box .search_box .search_main .sidebar .item_box:first-child ~ .item_box { margin-top: 40px; } .inside_search_box .search_box .search_main .content { width: 100%%; height: auto; padding-left: 25%; } .inside_search_box .search_box .search_main .content .yes_tips { width: 100%; height: 0; padding-bottom: 40px; border-bottom: 1px solid #E5E5E5; font-size: 18px; font-family: 'Rubik', 'ff800'; color: #f39800; overflow: hidden; } @media (max-width:1440px) { .inside_search_box .search_box .search_main .content .yes_tips { font-size: 16px; } } @media (max-width:1024px) { .inside_search_box .search_box .search_main .content .yes_tips { font-size: 14px; } } @media (max-width:768px) { .inside_search_box .search_box .search_main .content .yes_tips { font-size: 13px; } } .inside_search_box .search_box .search_main .content .menu_box { width: 100%; height: auto; overflow: hidden; --p: 30px; } .inside_search_box .search_box .search_main .content .menu_box .item { width: 100%; height: auto; padding: var(--p) 0; border-bottom: 1px solid #F3F3F3; overflow: hidden; } .inside_search_box .search_box .search_main .content .menu_box .item a { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .inside_search_box .search_box .search_main .content .menu_box .item a .img { width: 50%; max-width: 200px; background: #F5F5F5; overflow: hidden; } .inside_search_box .search_box .search_main .content .menu_box .item a .img .pb { padding-bottom: 60%; } .inside_search_box .search_box .search_main .content .menu_box .item a .img .ab { -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .inside_search_box .search_box .search_main .content .menu_box .item a .img img { width: 100%; height: 100%; object-fit: cover; } .inside_search_box .search_box .search_main .content .menu_box .item a .info { width: auto; height: auto; flex: 1; padding-left: var(--p); overflow: hidden; } .inside_search_box .search_box .search_main .content .menu_box .item a .info .title { width: 100%; height: auto; font-size: 18px; color: #2c303d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1440px) { .inside_search_box .search_box .search_main .content .menu_box .item a .info .title { font-size: 16px; } } @media (max-width:1024px) { .inside_search_box .search_box .search_main .content .menu_box .item a .info .title { font-size: 14px; } } @media (max-width:768px) { .inside_search_box .search_box .search_main .content .menu_box .item a .info .title { font-size: 13px; } } .inside_search_box .search_box .search_main .content .menu_box .item a .info .details { width: 100%; height: auto; margin: .8em 0; font-size: 14px; font-family: 'Rubik', 'ff200'; color: #2c303d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width:1280px) { .inside_search_box .search_box .search_main .content .menu_box .item a .info .details { font-size: 13px; } } @media (max-width:1024px) { .inside_search_box .search_box .search_main .content .menu_box .item a .info .details { font-size: 12px; } } .inside_search_box .search_box .search_main .content .menu_box .item a .info .time { width: 100%; height: auto; font-size: 14px; color: #2c303d; } @media (max-width:1280px) { .inside_search_box .search_box .search_main .content .menu_box .item a .info .time { font-size: 13px; } } @media (max-width:1024px) { .inside_search_box .search_box .search_main .content .menu_box .item a .info .time { font-size: 12px; } } .inside_search_box .search_box .search_main .content .menu_box .item a:hover .img .ab { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .inside_search_box .search_box .search_main .content .menu_box .item a:hover .info .title { color: #f39800; } .inside_search_box .search_box .search_main .content .paging_box { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; margin-top: clamp(30px, 3.125vw, 60px); } @media (max-width:1024px) { .inside_search_box .search_box .search_main { margin-top: 30px; } .inside_search_box .search_box .search_main .content .menu_box { --p: 20px; } } @media (max-width:768px) { .inside_search_box .search_box .search_main { display: block; margin-top: 20px; } .inside_search_box .search_box .search_main .sidebar { width: 100%; margin: 0; padding: 30px 15px 15px; } .inside_search_box .search_box .search_main .sidebar .item_box .select_box, .inside_search_box .search_box .search_main .sidebar .item_box .menu_box { margin-top: 12px; } .inside_search_box .search_box .search_main .sidebar .item_box:first-child ~ .item_box { margin-top: 30px; } .inside_search_box .search_box .search_main .content { width: 100%; margin-top: 30px; } .inside_search_box .search_box .search_main .content .menu_box { --p: 15px; } .inside_search_box .search_box .search_main .content .menu_box .item a .img { max-width: 150px; } } @media (max-width:990px) { .inside_search_box { padding-top: 60px; } } /* 鍐呴〉 寮€濮 */ /* 鍐呴〉 榛樿鏍峰紡 */ #arrow { width: 100%; height: 100vh; max-height: 584px; position: absolute; right: 0; top: 0; z-index: 1; opacity: .4; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; pointer-events: none; } #arrow svg { width: 100% !important; max-width: 1440px !important; height: 100%; -webkit-mask: linear-gradient(180deg, #ffffff, transparent); -moz-mask: linear-gradient(180deg, #ffffff, transparent); mask: linear-gradient(180deg, #ffffff, transparent); } @media (max-width:990px) { #arrow { height: auto; max-height: auto; } } @media (max-width:768px) { #arrow { width: 150%; } } @media (max-width:480px) { #arrow { width: 200%; } } #arrow.active svg path { stroke: #f39800; } #arrow.active.active_blue svg path { stroke: #0867d1; } /* 鏉垮潡 鏍囬 */ .block_title .classify { width: 100%; height: auto; font-size: 24px; font-family: 'Rubik', 'ff800'; color: #2c303d; line-height: 1; } @media (max-width:1680px) { .block_title .classify { font-size: 22px; } } @media (max-width:1440px) { .block_title .classify { font-size: 20px; } } @media (max-width:1280px) { .block_title .classify { font-size: 18px; } } @media (max-width:1024px) { .block_title .classify { font-size: 16px; } } @media (max-width:768px) { .block_title .classify { font-size: 15px; } } .block_title .title { width: 100%; height: auto; font-size: 60px; font-family: 'Rubik', 'ff100'; color: #2c303d; line-height: 1; } @media (max-width:1680px) { .block_title .title { font-size: 53px; } } @media (max-width:1440px) { .block_title .title { font-size: 45px; } } @media (max-width:1280px) { .block_title .title { font-size: 40px; } } @media (max-width:1024px) { .block_title .title { font-size: 32px; } } .block_title .subtitle { width: 100%; height: auto; font-size: 42px; font-family: 'Rubik', 'ff800'; color: #2c303d; line-height: 1.2; } @media (max-width:1680px) { .block_title .subtitle { font-size: 37px; } } @media (max-width:1440px) { .block_title .subtitle { font-size: 32px; } } @media (max-width:1280px) { .block_title .subtitle { font-size: 28px; } } @media (max-width:1024px) { .block_title .subtitle { font-size: 23px; } } @media (max-width:1680px) { .block_title .subtitle { font-size: 40px; } } @media (max-width:1440px) { .block_title .subtitle { font-size: 34px; } } @media (max-width:1280px) { .block_title .subtitle { font-size: 28px; } } @media (max-width:1024px) { .block_title .subtitle { font-size: 24px; } } @media (max-width:768px) { .block_title .subtitle { font-size: 22px; } } .block_title .details { width: 100%; max-width: 720px; height: auto; font-size: clamp(0.875rem, calc(0.05rem + 1.29vw), 1.5rem); font-family: 'Rubik', 'ff100'; color: #2c303d; line-height: 1.5; } .block_title .details.active { font-size: 18px; font-family: 'Rubik', 'ff200'; opacity: .8; } @media (max-width:1440px) { .block_title .details.active { font-size: 16px; } } @media (max-width:1024px) { .block_title .details.active { font-size: 14px; } } @media (max-width:768px) { .block_title .details.active { font-size: 13px; } } .block_title .classify + .title { margin-top: clamp(12px, 1.25vw, 24px); } .block_title .title + .subtitle, .block_title .title + .details { margin-top: clamp(25px, 2.60416667vw, 50px); } .block_title .subtitle + .details { margin-top: clamp(15px, 1.5625vw, 30px); } /* 鍐呴〉 鏍囬 */ .inside_title .title { height: 100%; padding-left: .5em; position: relative; font-size: 36px; color: #2c303d; line-height: 1.2; flex-shrink: 0; --size: 6px; } @media (max-width:1680px) { .inside_title .title { font-size: 32px; } } @media (max-width:1440px) { .inside_title .title { font-size: 28px; } } @media (max-width:1280px) { .inside_title .title { font-size: 24px; } } @media (max-width:1024px) { .inside_title .title { font-size: 22px; } } @media (max-width:768px) { .inside_title .title { font-size: 20px; } } .inside_title .title::before, .inside_title .title::after { content: ''; width: var(--size); height: var(--size); position: absolute; left: 0; z-index: 1; } .inside_title .title::before { background: #003281; bottom: 50%; } .inside_title .title::after { background: #f39800; top: 50%; } .inside_title .details { font-size: 18px; font-family: 'Rubik', 'ff200'; } @media (max-width:1440px) { .inside_title .details { font-size: 16px; } } @media (max-width:1024px) { .inside_title .details { font-size: 14px; } } @media (max-width:768px) { .inside_title .details { font-size: 13px; } } .inside_title .more a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; font-size: 14px; color: #f39800; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .inside_title .more a { font-size: 13px; } } @media (max-width:1024px) { .inside_title .more a { font-size: 12px; } } .inside_title .more a i { width: 5px; height: 7px; margin-left: 5px; font-size: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; background: #f39800; -webkit-mask: url('../svg/icon_arrow2.svg') no-repeat center / cover; -moz-mask: url('../svg/icon_arrow2.svg') no-repeat center / cover; mask: url('../svg/icon_arrow2.svg') no-repeat center / cover; } .inside_title .more a:hover { color: #003281; } .inside_title .more a:hover i { background: #003281; } @media (max-width:1024px) { .inside_title .title { --size: 4px; } } /* 鍐呴〉 澶у瓧鏍囬 */ .inside_headline { width: 100%; height: auto; position: relative; z-index: 1; } .inside_headline.active { padding-bottom: clamp(10px, 1.04166667vw, 20px); } .inside_headline.active.border::after { content: ''; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; z-index: 1; background: #EEF0F2; } .inside_headline .title { width: auto; height: auto; position: relative; z-index: 1; line-height: 1; font-size: 24px; font-family: 'Rubik', 'ff800'; color: #2c303d; } @media (max-width:1680px) { .inside_headline .title { font-size: 22px; } } @media (max-width:1440px) { .inside_headline .title { font-size: 20px; } } @media (max-width:1280px) { .inside_headline .title { font-size: 18px; } } @media (max-width:1024px) { .inside_headline .title { font-size: 16px; } } @media (max-width:768px) { .inside_headline .title { font-size: 15px; } } .inside_headline .title.active { padding-left: .66em; } .inside_headline .title.active::after { content: ''; width: 4px; height: .66em; position: absolute; top: 50%; left: 0; z-index: 1; background: #f39800; transform: translateY(-50%); } .inside_headline .title + .subtitle { margin-top: .2em; } .inside_headline .subtitle { width: 100%; height: auto; font-size: 24px; font-family: 'Rubik', 'ff100'; color: #2c303d; line-height: 1.2; } @media (max-width:1680px) { .inside_headline .subtitle { font-size: 22px; } } @media (max-width:1440px) { .inside_headline .subtitle { font-size: 20px; } } @media (max-width:1280px) { .inside_headline .subtitle { font-size: 18px; } } @media (max-width:1024px) { .inside_headline .subtitle { font-size: 16px; } } @media (max-width:768px) { .inside_headline .subtitle { font-size: 15px; } } .inside_headline .more a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; font-size: 14px; color: #f39800; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .inside_headline .more a { font-size: 13px; } } @media (max-width:1024px) { .inside_headline .more a { font-size: 12px; } } .inside_headline .more a i { width: 5px; height: 7px; margin-left: 5px; font-size: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; background: #f39800; -webkit-mask: url('../svg/icon_arrow2.svg') no-repeat center / cover; -moz-mask: url('../svg/icon_arrow2.svg') no-repeat center / cover; mask: url('../svg/icon_arrow2.svg') no-repeat center / cover; } .inside_headline .more a:hover { color: #003281; } .inside_headline .more a:hover i { background: #003281; } /* 鍐呴〉 灏忓瓧鏍囬 */ .inside_subtitle { width: 100%; height: auto; position: relative; z-index: 1; } .inside_subtitle.active { padding-bottom: clamp(10px, 1.04166667vw, 20px); } .inside_subtitle.active.border::after { content: ''; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; z-index: 1; background: #EEF0F2; } .inside_subtitle .title { width: auto; height: auto; position: relative; z-index: 1; line-height: 1; font-size: 24px; font-family: 'Rubik', 'ff700'; color: #2c303d; } @media (max-width:1680px) { .inside_subtitle .title { font-size: 22px; } } @media (max-width:1440px) { .inside_subtitle .title { font-size: 20px; } } @media (max-width:1280px) { .inside_subtitle .title { font-size: 18px; } } @media (max-width:1024px) { .inside_subtitle .title { font-size: 16px; } } @media (max-width:768px) { .inside_subtitle .title { font-size: 15px; } } .inside_subtitle .title.active { padding-left: .66em; } .inside_subtitle .title.active::after { content: ''; width: 4px; height: .66em; position: absolute; top: 50%; left: 0; z-index: 1; background: #f39800; transform: translateY(-50%); } /* 璇︽儏椤 鏍囬 */ .details_headline { width: 100%; height: auto; } .details_headline .title { width: 100%; height: auto; padding-left: .85em; position: relative; z-index: 1; font-size: 30px; font-family: 'Rubik', 'ff800'; color: #003281; line-height: 1; } @media (max-width:1680px) { .details_headline .title { font-size: 26px; } } @media (max-width:1440px) { .details_headline .title { font-size: 24px; } } @media (max-width:1280px) { .details_headline .title { font-size: 22px; } } @media (max-width:1024px) { .details_headline .title { font-size: 20px; } } @media (max-width:768px) { .details_headline .title { font-size: 18px; } } .details_headline .title::after { content: ''; width: .55em; height: 4px; position: absolute; top: .5em; left: 0; z-index: 1; transform: translateY(-50%); background: #f39800; } /* 榛樿澶撮儴鏉垮潡鏍囬 + 闈㈠寘灞戝鑸 */ .inside_head { width: 100%; height: auto; position: relative; z-index: 1; } .inside_head .content_box { width: 100%; height: auto; padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(20px, 2.08333333vw, 40px); } .inside_head .content_box .content_head { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_head .content_box .content_head .function_btn { width: auto; height: 32px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .inside_head .content_box .content_head .function_btn .more { width: 100%; height: 100%; } .inside_head .content_box .content_head .function_btn .more a { width: 100%; height: 100%; padding: 0 20px; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .inside_head .content_box .content_head .function_btn .more a::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; border-radius: 50px; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_head .content_box .content_head .function_btn .more a .word, .inside_head .content_box .content_head .function_btn .more a .icon { position: relative; z-index: 5; } .inside_head .content_box .content_head .function_btn .more a .word { font-size: 14px; color: #FFF; white-space: nowrap; } @media (max-width:1280px) { .inside_head .content_box .content_head .function_btn .more a .word { font-size: 13px; } } @media (max-width:1024px) { .inside_head .content_box .content_head .function_btn .more a .word { font-size: 12px; } } .inside_head .content_box .content_head .function_btn .more a .icon { width: 18px; height: 18px; margin-left: clamp(10px, 1.04166667vw, 20px); background: #FFF; -webkit-mask-repeat: no-repeat; -moz-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: right center; -moz-mask-position: right center; mask-position: right center; } .inside_head .content_box .content_head .function_btn .more.first a::after { background: #2c303d; opacity: .4; } .inside_head .content_box .content_head .function_btn .more.first a .icon { -webkit-mask-image: url('../svg/icon_list.svg'); -moz-mask-image: url('../svg/icon_list.svg'); mask-image: url('../svg/icon_list.svg'); } .inside_head .content_box .content_head .function_btn .more.first a:hover::after { background: #003281; opacity: 1; } .inside_head .content_box .content_head .function_btn .more.last a::after { border: 1px solid #2c303d; opacity: .4; } .inside_head .content_box .content_head .function_btn .more.last a .word { color: #2c303d; } .inside_head .content_box .content_head .function_btn .more.last a .icon { background: #2c303d; -webkit-mask-image: url('../svg/icon_contact.svg'); -moz-mask-image: url('../svg/icon_contact.svg'); mask-image: url('../svg/icon_contact.svg'); } .inside_head .content_box .content_head .function_btn .more.last a:hover::after { background: #f39800; border-color: #f39800; opacity: 1; } .inside_head .content_box .content_head .function_btn .more:first-child ~ .more { margin-left: 10px; } .inside_head .content_box .block_title { margin-top: clamp(40px, 4.16666667vw, 80px); } /* 鍒囨崲 鎸夐挳 */ .inside_pager { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; grid-gap: 10px; } .inside_pager .swiper_btn { width: 1em; height: 1em; font-size: 60px; position: relative; z-index: 1; cursor: pointer; --border: #F3F5F6; --bgColor: transparent; --active: #2c303d; } @media (max-width:1600px) { .inside_pager .swiper_btn { font-size: 54px; } } @media (max-width:1280px) { .inside_pager .swiper_btn { font-size: 44px; } } @media (max-width:1024px) { .inside_pager .swiper_btn { font-size: 40px; } } @media (max-width:768px) { .inside_pager .swiper_btn { font-size: 36px; } } .inside_pager .swiper_btn::before, .inside_pager .swiper_btn::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_pager .swiper_btn::before { border: 2px solid var(--border); background: var(--bgColor); } .inside_pager .swiper_btn::after { z-index: 2; background: var(--active); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 33.33% auto; mask-size: 33.33% auto; } .inside_pager .swiper_btn.prev::after { -webkit-mask-image: url('../svg/icon_left.svg'); mask-image: url('../svg/icon_left.svg'); } .inside_pager .swiper_btn.next::after { -webkit-mask-image: url('../svg/icon_right.svg'); mask-image: url('../svg/icon_right.svg'); } .inside_pager .swiper_btn.play { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .inside_pager .swiper_btn.play::after { display: none; } .inside_pager .swiper_btn.play i { width: 2px; height: 12px; position: relative; z-index: 5; background: var(--active); } .inside_pager .swiper_btn.play i:last-child { margin-left: 4px; } .inside_pager .swiper_btn.play.active i:first-child { width: 12px; clip-path: polygon(20% 0, 20% 100%, 90% 50%, 20% 0); } .inside_pager .swiper_btn.play.active i:last-child { width: 0; margin: 0; } .inside_pager .swiper_btn:hover { --border: #f39800; --bgColor: #f39800; --active: #FFF; } .inside_pager.active .swiper_btn { --border: #FFF; --active: #FFF; } .inside_pager.active .swiper_btn:hover { --border: #f39800; } @media (max-width:768px) { .inside_pager .swiper_btn::before { border-width: 1px; } } /* 鍒囨崲 鎸夐挳 灏忓渾鐐 */ .swiper_pager { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper_pager .pager { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .swiper_pager .pager span { width: 1em; height: 1em; font-size: 8px; background: #E5E5E5; border-radius: 50%; cursor: pointer; opacity: 1; } .swiper_pager .pager span:first-child ~ span { margin-left: 1em; } .swiper_pager .pager span.active { background: #f39800; } .swiper_pager .play { width: 1em; height: 1em; margin-left: 1em; font-size: 22px; border-radius: 50%; border: 1px solid #f39800; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; cursor: pointer; } .swiper_pager .play i { width: 2px; height: 6px; background: #f39800; } .swiper_pager .play i:last-child { margin-left: 2px; } @media (max-width:1280px) { .swiper_pager .play { font-size: 20px; } } @media (max-width:768px) { .swiper_pager .play { font-size: 18px; } } .swiper_pager .play.active i:first-child { width: 6px; clip-path: polygon(20% 0, 20% 100%, 90% 50%, 20% 0); } .swiper_pager .play.active i:last-child { width: 0; margin: 0; } /* 鍧楁寜閽 */ .block_more { width: auto; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; overflow: hidden; } .block_more a { width: auto; min-width: 180px; height: var(--height); padding: 0 20px; background: #f39800; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; position: relative; z-index: 1; --height: 60px; overflow: hidden; } .block_more a .word { position: relative; z-index: 5; font-size: 14px; color: #FFF; white-space: nowrap; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .block_more a .word { font-size: 13px; } } @media (max-width:1024px) { .block_more a .word { font-size: 12px; } } .block_more a .icon { width: 5px; height: 100%; margin-left: 5px; font-size: 0; position: relative; z-index: 5; background: #FFF; -webkit-mask: url('../svg/icon_arrow2.svg') no-repeat right; -moz-mask: url('../svg/icon_arrow2.svg') no-repeat right; mask: url('../svg/icon_arrow2.svg') no-repeat right; } .block_more a::after { content: ''; width: 100%; height: 500%; position: absolute; top: 0; left: 0; z-index: 1; } @media (max-width:1440px) { .block_more a { min-width: 160px; --height: 54px; } } @media (max-width:1280px) { .block_more a { min-width: 140px; --height: 48px; } } @media (max-width:1024px) { .block_more a { min-width: 120px; --height: 44px; } } @media (max-width:768px) { .block_more a { min-width: 100px; --height: 36px; } } .block_more a:hover .word { flex: 1; } /* 鏂囧瓧鎸夐挳 */ .text_more { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; overflow: hidden; } .text_more a, .text_more .more { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; --color: #f39800; } .text_more a .word, .text_more .more .word { font-size: 14px; color: var(--color); white-space: nowrap; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } @media (max-width:1280px) { .text_more a .word, .text_more .more .word { font-size: 13px; } } @media (max-width:1024px) { .text_more a .word, .text_more .more .word { font-size: 12px; } } .text_more a .icon, .text_more .more .icon { width: 5px; height: 7px; margin-left: 5px; font-size: 0; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; background: var(--color); -webkit-mask: url('../svg/icon_arrow2.svg') no-repeat center / cover; -moz-mask: url('../svg/icon_arrow2.svg') no-repeat center / cover; mask: url('../svg/icon_arrow2.svg') no-repeat center / cover; } .text_more a:hover, .text_more .more:hover { --color: #003281; } /* 闈㈠寘灞戝鑸 */ .navigation { width: 100%; height: auto; font-size: 0; position: relative; z-index: 5; --h: 20px; overflow: hidden; } .navigation .center { width: 100%; height: var(--h); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .navigation .center .iconfont { height: auto; font-size: 14px; color: #999; } @media (max-width:1280px) { .navigation .center .iconfont { font-size: 13px; } } @media (max-width:1024px) { .navigation .center .iconfont { font-size: 12px; } } .navigation .center .icon_right { width: 3px; height: 5px; margin: 0 10px; background: #999; -webkit-clip-path: polygon(0 0, 0 5px, 1px 5px, 1px 4px, 2px 4px, 2px 3px, 3px 3px, 3px 2px, 2px 2px, 2px 1px, 1px 1px, 1px 0, 0 0); clip-path: polygon(0 0, 0 5px, 1px 5px, 1px 4px, 2px 4px, 2px 3px, 3px 3px, 3px 2px, 2px 2px, 2px 1px, 1px 1px, 1px 0, 0 0); } .navigation .center a, .navigation .center span { font-size: 12px; color: #999; line-height: .9; } .navigation .center a { -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .navigation .center a:hover { color: #f39800; } /* 鍐呴〉 榛樿澶撮儴鏉垮紡 */ .inside_box { width: 100%; height: auto; position: relative; z-index: 1; overflow: hidden; } .inside_box.active { background: #F5F5F5; } .inside_box .inside_head { width: 100%; height: auto; position: relative; z-index: 1; padding-top: 130px; } @media (max-width:1366px) { .inside_box .inside_head { padding-top: 120px; } } @media (max-width:990px) { .inside_box .inside_head { padding-top: 60px; } } .inside_box .inside_head .inside_bg { width: 100%; min-height: clamp(325px, 33.33vw, 640px); height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background-color: #003281 !important; background-position: center center !important; background-repeat: no-repeat !important; background-size: cover !important; overflow: hidden; } .inside_box .inside_head .inside_bg #arrow { width: 100%; height: 100%; z-index: 2; } .inside_box .inside_head .head_box { width: 100%; height: auto; padding-top: clamp(20px, 2.08333333vw, 40px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_box .inside_head .head_box .function_btn { width: auto; height: 32px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .inside_box .inside_head .head_box .function_btn .more { width: 100%; height: 100%; } .inside_box .inside_head .head_box .function_btn .more a { width: 100%; height: 100%; padding: 0 20px; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .inside_box .inside_head .head_box .function_btn .more a::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; border-radius: 50px; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_box .inside_head .head_box .function_btn .more a .word, .inside_box .inside_head .head_box .function_btn .more a .icon { position: relative; z-index: 5; } .inside_box .inside_head .head_box .function_btn .more a .word { font-size: 14px; color: #FFF; white-space: nowrap; } @media (max-width:1280px) { .inside_box .inside_head .head_box .function_btn .more a .word { font-size: 13px; } } @media (max-width:1024px) { .inside_box .inside_head .head_box .function_btn .more a .word { font-size: 12px; } } .inside_box .inside_head .head_box .function_btn .more a .icon { width: 18px; height: 18px; margin-left: clamp(10px, 1.04166667vw, 20px); background: #FFF; -webkit-mask-repeat: no-repeat; -moz-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: right center; -moz-mask-position: right center; mask-position: right center; } .inside_box .inside_head .head_box .function_btn .more.first a::after { background: #2c303d; opacity: .4; } .inside_box .inside_head .head_box .function_btn .more.first a .icon { -webkit-mask-image: url('../svg/icon_list.svg'); -moz-mask-image: url('../svg/icon_list.svg'); mask-image: url('../svg/icon_list.svg'); } .inside_box .inside_head .head_box .function_btn .more.first a:hover::after { background: #f39800; opacity: 1; } .inside_box .inside_head .head_box .function_btn .more.last a::after { border: 1px solid #FFF; opacity: .4; } .inside_box .inside_head .head_box .function_btn .more.last a .icon { -webkit-mask-image: url('../svg/icon_contact.svg'); -moz-mask-image: url('../svg/icon_contact.svg'); mask-image: url('../svg/icon_contact.svg'); } .inside_box .inside_head .head_box .function_btn .more.last a:hover::after { background: #f39800; border-color: #f39800; opacity: 1; } .inside_box .inside_head .head_box .function_btn .more:first-child ~ .more { margin-left: 10px; } .inside_box .inside_head .head_box .navigation { width: auto; } .inside_box .inside_head .head_box .navigation .center .iconfont { color: #FFF; opacity: .4; } .inside_box .inside_head .head_box .navigation .center .icon_right { background: #FFF; opacity: .6; } .inside_box .inside_head .head_box .navigation .center a, .inside_box .inside_head .head_box .navigation .center span { color: #FFF; opacity: .6; } .inside_box .inside_head .head_box .navigation .center a:hover { color: #FFF; opacity: 1; } .inside_box .inside_head .block_title { width: 100%; height: auto; margin-top: clamp(25px, 2.60416667vw, 50px); } .inside_box .inside_head .block_title .title { color: #FFF; } .inside_box .inside_head .block_title .details { color: #FFF; } .inside_box .inside_head .subnav_boxhezi { position: relative; } .inside_box .inside_head .subnav_boxhezi .swiper_pager .swiper_btn { width: 1em; height: 80px; font-size: 60px; text-align: center; background: rgba(0, 0, 0, 0.1); cursor: pointer; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; position: absolute; right: 100%; bottom: 0; } .inside_box .inside_head .subnav_boxhezi .swiper_pager .swiper_btn.next { right: auto; left: 100%; } @media (max-width:1680px) { .inside_box .inside_head .subnav_boxhezi .swiper_pager .swiper_btn { font-size: 53px; } } @media (max-width:1440px) { .inside_box .inside_head .subnav_boxhezi .swiper_pager { display: none; } .inside_box .inside_head .subnav_boxhezi .swiper_pager .swiper_btn { font-size: 45px; } } @media (max-width:1280px) { .inside_box .inside_head .subnav_boxhezi .swiper_pager .swiper_btn { font-size: 40px; } } @media (max-width:1024px) { .inside_box .inside_head .subnav_boxhezi .swiper_pager .swiper_btn { font-size: 32px; } } .inside_box .inside_head .subnav_boxhezi .swiper_pager .swiper_btn:hover { background: rgba(0, 0, 0, 0.5); } .inside_box .inside_head .subnav_box { width: 100%; height: 80px; margin-top: clamp(20px, 2.08333333vw, 40px); background: #F5F5F5; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; overflow: hidden; } .inside_box .inside_head .subnav_box.subnav_swiper .item { width: auto; } .inside_box .inside_head .subnav_box .item { width: 100%; height: 100%; text-align: center; position: relative; z-index: 1; overflow: hidden; } .inside_box .inside_head .subnav_box .item a { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; padding: 0 20px; position: relative; z-index: 1; font-size: 18px; font-family: 'Rubik', 'ff400'; color: #2c303d; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; overflow: hidden; } @media (max-width:1440px) { .inside_box .inside_head .subnav_box .item a { font-size: 16px; } } @media (max-width:1024px) { .inside_box .inside_head .subnav_box .item a { font-size: 14px; } } @media (max-width:768px) { .inside_box .inside_head .subnav_box .item a { font-size: 13px; } } .inside_box .inside_head .subnav_box .item a::after { content: ''; width: 0; height: 2px; position: absolute; bottom: 0; left: 50%; z-index: 1; background: #f39800; transform: translateX(-50%); } .inside_box .inside_head .subnav_box .item a:hover { color: #f39800; } .inside_box .inside_head .subnav_box .item a.active { color: #f39800; } .inside_box .inside_head .subnav_box .item a.active::after { width: 100%; } .inside_box .inside_head .subnav_box .item:first-child ~ .item::after { content: ''; width: 1px; height: 50%; position: absolute; top: 25%; left: 0; z-index: 1; background: #e1e1e2; } .inside_box .inside_head .big_prodcut_title { width: 100%; height: auto; margin-top: clamp(25px, 2.60416667vw, 50px); font-size: 60px; font-family: 'Orbitron', 'ff800'; color: #FFF; } @media (max-width:1600px) { .inside_box .inside_head .big_prodcut_title { font-size: 52px; } } @media (max-width:1440px) { .inside_box .inside_head .big_prodcut_title { font-size: 42px; } } @media (max-width:1024px) { .inside_box .inside_head .big_prodcut_title { font-size: 36px; } } @media (max-width:768px) { .inside_box .inside_head .big_prodcut_title { font-size: 30px; } } .inside_box .inside_head.active .center_box { min-height: clamp(325px, 33.33vw, 640px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .inside_box .inside_head.active .inside_bg { min-height: auto; } .inside_box .inside_head.active .center_box .navigation .center_box { min-height: auto; } .inside_box .inside_head.active .block_title { flex: 1; } @media (max-width:990px) { .inside_box .inside_head { padding-bottom: 20px; } .inside_box .inside_head .inside_bg { height: 100%; } .inside_box .inside_head .inside_bg #arrow { height: 400px; opacity: .1; } .inside_box .inside_head.active { height: auto; } .inside_box .inside_head.active .subnav_box, .inside_box .inside_head .subnav_box.subnav_swiper .swiper-wrapper { height: auto; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px; background: transparent; } .inside_box .inside_head .subnav_box.subnav_swiper { display: block; height: auto; background: transparent; } .inside_box .inside_head.active .subnav_box .item { width: 100%; height: 44px; background: #F5F5F5; } .inside_box .inside_head.active .subnav_box .item a { white-space: normal; } .inside_box .inside_head.active .subnav_box .item::after, .inside_box .inside_head.active .subnav_box .item a::after { display: none; } .inside_box .inside_head.active .subnav_box .item a.active { background: #f39800; color: #FFF; } } @media (max-width:480px) { .inside_box .inside_head .inside_bg #arrow { width: 200%; } } /* 绛涢€ */ .inside_search { width: 100%; height: auto; padding-top: clamp(40px, 4.16666667vw, 80px); padding-bottom: clamp(30px, 3.125vw, 60px); position: relative; z-index: 10; } .inside_search .search_box { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .inside_search .search_box .headtitle { font-size: 24px; font-family: 'Rubik', 'ff800'; color: #2c303d; } @media (max-width:1680px) { .inside_search .search_box .headtitle { font-size: 22px; } } @media (max-width:1440px) { .inside_search .search_box .headtitle { font-size: 20px; } } @media (max-width:1280px) { .inside_search .search_box .headtitle { font-size: 18px; } } @media (max-width:1024px) { .inside_search .search_box .headtitle { font-size: 16px; } } @media (max-width:768px) { .inside_search .search_box .headtitle { font-size: 15px; } } .inside_search .search_box .form_box { width: 100%; height: auto; flex: 1; margin-left: clamp(15px, 1.5625vw, 30px); --size: 60px; } .inside_search .search_box .form_box form { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; grid-gap: 10px; } .inside_search .search_box .form_box form input { height: var(--size); padding: 0 15px; background: transparent; border: 2px solid #EEF0F2; color: #2c303d; font-size: 16px; font-family: 'Rubik', 'ff300'; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1440px) { .inside_search .search_box .form_box form input { font-size: 14px; } } @media (max-width:1024px) { .inside_search .search_box .form_box form input { font-size: 13px; } } @media (max-width:768px) { .inside_search .search_box .form_box form input { font-size: 12px; } } .inside_search .search_box .form_box form input::-webkit-input-placeholder { color: #2c303d; opacity: 1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_search .search_box .form_box form input:-moz-placeholder { color: #2c303d; opacity: 1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_search .search_box .form_box form input::-moz-placeholder { color: #2c303d; opacity: 1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_search .search_box .form_box form input:-ms-input-placeholder { color: #2c303d; opacity: 1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_search .search_box .form_box form input:focus { background: #F8F8F8; border-color: #EEF0F2; } .inside_search .search_box .form_box form input:focus::-webkit-input-placeholder { opacity: .5; } .inside_search .search_box .form_box form input:focus:-moz-placeholder { opacity: .5; } .inside_search .search_box .form_box form input:focus::-moz-placeholder { opacity: .5; } .inside_search .search_box .form_box form input:focus:-ms-input-placeholder { opacity: .5; } .inside_search .search_box .form_box form .select_item { width: 40%; /*max-width: 240px;*/ /*max-width: 297px;*/ height: var(--size); } .inside_search .search_box .form_box form .select_item .layui-input { flex: 1; } .inside_search .search_box .form_box form .select_item .layui-form-select .layui-select-title .layui-edge { width: 7px; height: 7px; border: 0; margin: -3.5px 0 0; -webkit-mask: url('../svg/icon_down2.svg') no-repeat center; background: #000; transform-origin: center; } .inside_search .search_box .form_box form .select_item .layui-form-select dl { top: 100%; background: #F8F8F8; border: 0; scrollbar-width: thin; scrollbar-color: #f39800 transparent; } .inside_search .search_box .form_box form .select_item .layui-form-select dl::-webkit-scrollbar { width: 2px; height: 2px; background-color: #f5f5f5; } .inside_search .search_box .form_box form .select_item .layui-form-select dl::-webkit-scrollbar-thumb { background-color: #f39800; border-radius: 10px; } .inside_search .search_box .form_box form .select_item .layui-form-select dd { font-size: 14px; color: #999; } @media (max-width:1280px) { .inside_search .search_box .form_box form .select_item .layui-form-select dd { font-size: 13px; } } @media (max-width:1024px) { .inside_search .search_box .form_box form .select_item .layui-form-select dd { font-size: 12px; } } .inside_search .search_box .form_box form .select_item .layui-form-select dd.layui-this { background: rgba(245, 150, 0, 0.1); color: #f39800; font-weight: normal; } .inside_search .search_box .form_box form .select_item .layui-form-selectup dl { top: auto; bottom: 100%; } .inside_search .search_box .form_box form .input_item { width: 60%; max-width: 392px; height: var(--size); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .inside_search .search_box .form_box form .input_item .layui-input { flex: 1; height: 100%; padding: 0 15px; border-right: 0; font-size: 16px; color: #2c303d; } @media (max-width:1440px) { .inside_search .search_box .form_box form .input_item .layui-input { font-size: 14px; } } @media (max-width:1024px) { .inside_search .search_box .form_box form .input_item .layui-input { font-size: 13px; } } @media (max-width:768px) { .inside_search .search_box .form_box form .input_item .layui-input { font-size: 12px; } } .inside_search .search_box .form_box form .input_item button { width: var(--size); height: 100%; padding: 0; line-height: var(--size); background: #f39800; opacity: 1; font-size: 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_search .search_box .form_box form .input_item button i { width: calc(var(--size) * 0.3); height: calc(var(--size) * 0.3); background: #FFF; -webkit-mask: url('../svg/icon_search.svg') no-repeat center / 100% auto; -moz-mask: url('../svg/icon_search.svg') no-repeat center / 100% auto; mask: url('../svg/icon_search.svg') no-repeat center / 100% auto; } .inside_search .search_box .form_box form .input_item button:hover { background: #003281; } @media (max-width:1440px) { .inside_search .search_box .form_box { --size: 54px; } } @media (max-width:1280px) { .inside_search .search_box .form_box { --size: 48px; } } @media (max-width:1024px) { .inside_search .search_box .form_box { --size: 44px; } } @media (max-width:480px) { .inside_search .search_box .form_box form { display: grid; grid-template-columns: 100%; } .inside_search .search_box .form_box form .select_item, .inside_search .search_box .form_box form .input_item { width: 100%; max-width: 100%; } } @media (max-width:480px) { .inside_search .search_box { display: block; } .inside_search .search_box .headtitle { width: 100%; height: auto; } .inside_search .search_box .form_box { margin: 15px 0 0; } } /* 鍐呴〉 閿氱偣 鐩掑瓙 */ .inside_anchor { width: 100%; height: auto; position: relative; z-index: 10; } .inside_anchor .anchor_nav { width: 100%; height: 0; position: relative; z-index: 15; } .inside_anchor .anchor_nav .center { width: 100%; height: auto; position: relative; z-index: 1; } .inside_anchor .anchor_nav .subnav_box { width: auto; height: 100vh; padding-top: clamp(70px, 7.29166667vw, 140px); padding-bottom: clamp(70px, 7.29166667vw, 140px); position: absolute; left: 100%; } .inside_anchor .anchor_nav .subnav_box .menu { height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .inside_anchor .anchor_nav .subnav_box .item { width: auto; height: 12vh; flex: 1; padding-left: 1em; font-size: 14px; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; --size: 0%; } @media (max-width:1280px) { .inside_anchor .anchor_nav .subnav_box .item { font-size: 13px; } } @media (max-width:1024px) { .inside_anchor .anchor_nav .subnav_box .item { font-size: 12px; } } .inside_anchor .anchor_nav .subnav_box .item::before, .inside_anchor .anchor_nav .subnav_box .item::after { content: ''; width: 2px; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background: #EEE; } .inside_anchor .anchor_nav .subnav_box .item::after { height: var(--size); z-index: 2; background: #2c303d; } .inside_anchor .anchor_nav .subnav_box .item .word { width: 5em; font-size: 14px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; font-family: 'Rubik', 'ff700'; color: #2c303d; opacity: .4; cursor: pointer; } @media (max-width:1280px) { .inside_anchor .anchor_nav .subnav_box .item .word { font-size: 13px; } } @media (max-width:1024px) { .inside_anchor .anchor_nav .subnav_box .item .word { font-size: 12px; } } .inside_anchor .anchor_nav .subnav_box .item.active .word { opacity: 1; } @media (max-width:1800px) { .inside_anchor .anchor_nav .center { width: 90%; } } @media (max-width:990px) { .inside_anchor .anchor_nav { display: none; } } /* 璇︽儏椤 鏍囬 */ .title_details { width: 100%; height: auto; } .title_details .classify { font-size: 14px; font-family: 'Montserrat', 'ff400'; color: #2c303d; line-height: 1; } @media (max-width:1280px) { .title_details .classify { font-size: 13px; } } @media (max-width:1024px) { .title_details .classify { font-size: 12px; } } .title_details .classify + .title { margin-top: .66em; } .title_details .title, .title_details .title h1 { font-size: 36px; line-height: 1.4; } @media (max-width:1680px) { .title_details .title, .title_details .title h1 { font-size: 32px; } } @media (max-width:1440px) { .title_details .title, .title_details .title h1 { font-size: 28px; } } @media (max-width:1280px) { .title_details .title, .title_details .title h1 { font-size: 24px; } } @media (max-width:1024px) { .title_details .title, .title_details .title h1 { font-size: 22px; } } @media (max-width:768px) { .title_details .title, .title_details .title h1 { font-size: 20px; } } .title_details .author { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .title_details .author .icon { width: var(--size); height: var(--size); --size: 40px; border-radius: 50%; background: #dfe8f0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } @media (max-width:1680px) { .title_details .author .icon { --size: 38px; } } @media (max-width:1440px) { .title_details .author .icon { --size: 36px; } } @media (max-width:1280px) { .title_details .author .icon { --size: 34px; } } @media (max-width:1024px) { .title_details .author .icon { --size: 32px; } } .title_details .author .headtitle { margin-left: 1em; font-size: 14px; color: #000; } @media (max-width:1280px) { .title_details .author .headtitle { font-size: 13px; } } @media (max-width:1024px) { .title_details .author .headtitle { font-size: 12px; } } /* 璇︽儏椤 璇︽儏 */ .text_details { width: 100%; height: auto; font-size: 16px; font-family: 'Rubik', 'ff200'; color: #2c303d; line-height: 1.5; } @media (max-width:1440px) { .text_details { font-size: 14px; } } @media (max-width:1024px) { .text_details { font-size: 13px; } } @media (max-width:768px) { .text_details { font-size: 12px; } } .text_details * { color: #2c303d; font-family: 'Rubik', 'ff200' !important; } .text_details > *:first-child ~ * { margin-top: 5px; } .text_details h3 { font-family: 'Rubik', 'ff700'; font-weight: normal; font-size: 150%; } /* 璇︽儏椤 鏍忕洰 */ .menu_details { width: 100%; height: auto; display: grid; grid-template-columns: repeat(2, auto); grid-gap: 10px 40px; } .menu_details .one { width: 100%; height: auto; position: relative; z-index: 1; font-size: 16px; font-family: 'Rubik', 'ff200'; padding-left: 1em; } @media (max-width:1440px) { .menu_details .one { font-size: 14px; } } @media (max-width:1024px) { .menu_details .one { font-size: 13px; } } @media (max-width:768px) { .menu_details .one { font-size: 12px; } } .menu_details .one::after { content: ''; width: var(--size); height: var(--size); position: absolute; top: .55em; left: 0; z-index: 1; background: #1163c8; --size: 4px; } @media (max-width:768px) { .menu_details { grid-template-columns: 100%; } } /* 鍕鹃€夋 */ .checked-item { width: 16px; height: 16px; font-size: 0; } .checked-item .layui-form-checkbox[lay-skin=primary] { width: 100%; height: 100% !important; min-width: 16px; min-height: 16px; padding: 0; border: 2px solid #cdcdcd !important; --color: transparent; } .checked-item .layui-form-checkbox[lay-skin=primary] i { width: 100%; height: 100%; position: relative; z-index: 1; border-radius: 0; border: 0; background: var(--color); -webkit-mask: url('../svg/icon_yes.svg') no-repeat center; -moz-mask: url('../svg/icon_yes.svg') no-repeat center; mask: url('../svg/icon_yes.svg') no-repeat center; } .checked-item .layui-form-checkbox[lay-skin=primary] i::before { display: none; } .checked-item .layui-form-checkbox[lay-skin=primary].layui-form-checked { border-color: var(--color) !important; --color: #2c303d; } /* ---------- */ /* 鍐呴〉 Banner */ .inside_banner { width: 100%; height: 100vh; padding-top: 130px; position: relative; z-index: 1; overflow: hidden; } @media (max-width:1366px) { .inside_banner { padding-top: 120px; } } @media (max-width:990px) { .inside_banner { padding-top: 60px; } } .inside_banner #arrow { z-index: 10; } .inside_banner .banner_box { width: 100%; height: 100%; position: relative; z-index: 5; overflow: hidden; } .inside_banner .banner_box:before { content: ''; width: 100%; height: 100%; background-color: #000; position: absolute; left: 0; top: 0; z-index: 5; opacity: 0.3; filter: alpha(opacity=30); -webkit-filter: alpha(opacity=30); } .inside_banner .banner_box .center_box { width: 100%; height: 100%; } .inside_banner .banner_box .banner_main { width: 100%; height: 100%; position: relative; z-index: 1; } .inside_banner .banner_box .banner_main .banner_head { width: 100%; height: auto; position: relative; z-index: 1; padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(20px, 2.08333333vw, 40px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_banner .banner_box .banner_main .banner_head .function_btn { width: auto; height: 32px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .inside_banner .banner_box .banner_main .banner_head .function_btn .more { width: auto; height: 100%; } .inside_banner .banner_box .banner_main .banner_head .function_btn .more a { width: 100%; height: 100%; padding: 0 20px; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .inside_banner .banner_box .banner_main .banner_head .function_btn .more a::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; border-radius: 50px; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_banner .banner_box .banner_main .banner_head .function_btn .more a .word, .inside_banner .banner_box .banner_main .banner_head .function_btn .more a .icon { position: relative; z-index: 5; } .inside_banner .banner_box .banner_main .banner_head .function_btn .more a .word { font-size: 14px; color: #FFF; white-space: nowrap; } @media (max-width:1280px) { .inside_banner .banner_box .banner_main .banner_head .function_btn .more a .word { font-size: 13px; } } @media (max-width:1024px) { .inside_banner .banner_box .banner_main .banner_head .function_btn .more a .word { font-size: 12px; } } .inside_banner .banner_box .banner_main .banner_head .function_btn .more a .icon { width: 18px; height: 18px; margin-left: clamp(10px, 1.04166667vw, 20px); background: #FFF; -webkit-mask-repeat: no-repeat; -moz-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: right center; -moz-mask-position: right center; mask-position: right center; } .inside_banner .banner_box .banner_main .banner_head .function_btn .more.first a::after { background: #2c303d; opacity: .4; } .inside_banner .banner_box .banner_main .banner_head .function_btn .more.first a .icon { -webkit-mask-image: url('../svg/icon_list.svg'); -moz-mask-image: url('../svg/icon_list.svg'); mask-image: url('../svg/icon_list.svg'); } .inside_banner .banner_box .banner_main .banner_head .function_btn .more.first a:hover::after { background: #003281; opacity: 1; } .inside_banner .banner_box .banner_main .banner_head .function_btn .more.last a::after { border: 1px solid #FFF; opacity: .4; } .inside_banner .banner_box .banner_main .banner_head .function_btn .more.last a .icon { -webkit-mask-image: url('../svg/icon_contact.svg'); -moz-mask-image: url('../svg/icon_contact.svg'); mask-image: url('../svg/icon_contact.svg'); } .inside_banner .banner_box .banner_main .banner_head .function_btn .more.last a:hover::after { background: #f39800; border-color: #f39800; opacity: 1; } .inside_banner .banner_box .banner_main .banner_head .function_btn .more:first-child ~ .more { margin-left: 10px; } .inside_banner .banner_box .banner_main .banner_head .navigation { line-height: 32px; } .inside_banner .banner_box .banner_main .banner_head .navigation .iconfont { color: rgba(255, 255, 255, 0.4); } .inside_banner .banner_box .banner_main .banner_head .navigation .icon_right { background: rgba(255, 255, 255, 0.6); } .inside_banner .banner_box .banner_main .banner_head .navigation a, .inside_banner .banner_box .banner_main .banner_head .navigation span { color: rgba(255, 255, 255, 0.6); } .inside_banner .banner_box .banner_main .banner_head .navigation a:hover { color: #FFF; } .inside_banner .banner_box .banner_main .title_box { width: 100%; height: auto; margin-top: clamp(20px, 2.08333333vw, 40px); text-align: center; color: #FFF; } .inside_banner .banner_box .banner_main .title_box .title { font-size: 60px; font-family: 'Rubik', 'ff100'; line-height: 1; } @media (max-width:1600px) { .inside_banner .banner_box .banner_main .title_box .title { font-size: 52px; } } @media (max-width:1440px) { .inside_banner .banner_box .banner_main .title_box .title { font-size: 42px; } } @media (max-width:1024px) { .inside_banner .banner_box .banner_main .title_box .title { font-size: 36px; } } @media (max-width:768px) { .inside_banner .banner_box .banner_main .title_box .title { font-size: 30px; } } .inside_banner .banner_box .banner_main .title_box .subtitle { margin-top: 1em; font-size: 42px; font-family: 'Rubik', 'ff800'; } @media (max-width:1680px) { .inside_banner .banner_box .banner_main .title_box .subtitle { font-size: 40px; } } @media (max-width:1440px) { .inside_banner .banner_box .banner_main .title_box .subtitle { font-size: 34px; } } @media (max-width:1280px) { .inside_banner .banner_box .banner_main .title_box .subtitle { font-size: 28px; } } @media (max-width:1024px) { .inside_banner .banner_box .banner_main .title_box .subtitle { font-size: 24px; } } @media (max-width:768px) { .inside_banner .banner_box .banner_main .title_box .subtitle { font-size: 22px; } } .inside_banner .banner_box .banner_main .title_box .details { margin-top: 1em; font-size: 18px; font-family: 'Rubik', 'ff100'; } @media (max-width:1440px) { .inside_banner .banner_box .banner_main .title_box .details { font-size: 16px; } } @media (max-width:1024px) { .inside_banner .banner_box .banner_main .title_box .details { font-size: 14px; } } @media (max-width:768px) { .inside_banner .banner_box .banner_main .title_box .details { font-size: 13px; } } .inside_banner .banner_box .banner_main .subnav_box { width: 100%; height: auto; margin-top: clamp(40px, 4.16666667vw, 80px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .inside_banner .banner_box .banner_main .subnav_box .item { width: 100%; max-width: 720px; height: 80px; position: relative; z-index: 1; } .inside_banner .banner_box .banner_main .subnav_box .item::before { content: ''; width: 2px; height: 0; position: absolute; bottom: 0; left: 0; z-index: 1; background: #FFF; pointer-events: none; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -ms-transition: all 0.1s; -o-transition: all 0.1s; transition: all 0.1s; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -ms-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .inside_banner .banner_box .banner_main .subnav_box .item::after { content: ''; width: 0; height: 2px; position: absolute; top: 0; left: 0; z-index: 1; background: #FFF; pointer-events: none; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -ms-transition: all 0.1s; -o-transition: all 0.1s; transition: all 0.1s; -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -ms-transition-delay: 0.1s; -o-transition-delay: 0.1s; transition-delay: 0.1s; } .inside_banner .banner_box .banner_main .subnav_box .item a { width: 100%; height: 100%; padding: 0 20px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; position: relative; z-index: 1; } .inside_banner .banner_box .banner_main .subnav_box .item a .word { font-size: 20px; font-family: 'Rubik', 'ff700'; color: #FFF; white-space: nowrap; -webkit-transition: all 0.7s ease; -o-transition: all 0.7s ease; transition: all 0.7s ease; } @media (max-width:1680px) { .inside_banner .banner_box .banner_main .subnav_box .item a .word { font-size: 18px; } } @media (max-width:1440px) { .inside_banner .banner_box .banner_main .subnav_box .item a .word { font-size: 17px; } } @media (max-width:1280px) { .inside_banner .banner_box .banner_main .subnav_box .item a .word { font-size: 16px; } } @media (max-width:1024px) { .inside_banner .banner_box .banner_main .subnav_box .item a .word { font-size: 15px; } } @media (max-width:768px) { .inside_banner .banner_box .banner_main .subnav_box .item a .word { font-size: 14px; } } .inside_banner .banner_box .banner_main .subnav_box .item a .icon { width: var(--size); height: var(--size); z-index: 1; position: absolute; right: 20px; --size: 24px; opacity: 0; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; font-size: var(--size); color: #FFF; } .inside_banner .banner_box .banner_main .subnav_box .item a::before { content: ''; width: 2px; height: 0; position: absolute; top: 0; right: 0; z-index: 1; background: #FFF; pointer-events: none; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; -ms-transition: all 0.1s; -o-transition: all 0.1s; transition: all 0.1s; -webkit-transition-delay: 0; -moz-transition-delay: 0; -ms-transition-delay: 0; -o-transition-delay: 0; transition-delay: 0; } .inside_banner .banner_box .banner_main .subnav_box .item a::after { content: ''; width: 100%; height: 2px; position: absolute; bottom: 0; left: 0; z-index: 1; background: #FFF; pointer-events: none; } .inside_banner .banner_box .banner_main .subnav_box .item.active a .word { flex: 1; } .inside_banner .banner_box .banner_main .subnav_box .item.active a .icon { opacity: 1; } .inside_banner .banner_box .banner_main .subnav_box .item.active:before, .inside_banner .banner_box .banner_main .subnav_box .item:hover:before { height: 100%; -webkit-transition-delay: 0; -moz-transition-delay: 0; -ms-transition-delay: 0; -o-transition-delay: 0; transition-delay: 0; } .inside_banner .banner_box .banner_main .subnav_box .item.active:after, .inside_banner .banner_box .banner_main .subnav_box .item:hover:after { width: 100%; -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -ms-transition-delay: 0.2s; -o-transition-delay: 0.2s; transition-delay: 0.2s; } .inside_banner .banner_box .banner_main .subnav_box .item.active a:before, .inside_banner .banner_box .banner_main .subnav_box .item:hover a:before { height: 100%; -webkit-transition-delay: 0.3s; -moz-transition-delay: 0.3s; -ms-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } .inside_banner .banner_box .banner_main .subnav_box .item.item:first-child ~ .item { margin-left: clamp(30px, 3.125vw, 60px); } @media (max-width:1680px) { .inside_banner .banner_box .banner_main .subnav_box .item { height: 70px; } } @media (max-width:1440px) { .inside_banner .banner_box .banner_main .subnav_box .item { height: 60px; } .inside_banner .banner_box .banner_main .subnav_box .item.active a .icon { --size: 18px; } } @media (max-width:1280px) { .inside_banner .banner_box .banner_main .subnav_box .item { height: 54px; } .inside_banner .banner_box .banner_main .subnav_box .item.active a .icon { --size: 16px; } } @media (max-width:990px) { .inside_banner .banner_box .banner_main .subnav_box .item.item:first-child ~ .item { margin: 10px 0 0; } .inside_banner .banner_box .banner_main .subnav_box .item::before, .inside_banner .banner_box .banner_main .subnav_box .item::after { display: none; } .inside_banner .banner_box .banner_main .subnav_box .item a::before { display: none; } .inside_banner .banner_box .banner_main .subnav_box .item a::after { height: 100%; background: transparent; border: 1px solid #fff; } .inside_banner .banner_box .banner_main .subnav_box .item a .icon { display: none; } .inside_banner .banner_box .banner_main .subnav_box .item a .word { width: 100%; text-align: center; } .inside_banner .banner_box .banner_main .subnav_box .item.active a::after { border-width: 3px; } } .inside_banner .banner_box .banner_main .icon_down { width: 61px; height: 31px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); margin-bottom: clamp(40px, 4.16666667vw, 80px); background: #FFF; -webkit-animation: scrollDown2 2s infinite; -moz-animation: scrollDown2 2s infinite; -ms-animation: scrollDown2 2s infinite; -o-animation: scrollDown2 2s infinite; animation: scrollDown2 2s infinite; -webkit-mask: url('../svg/icon_down.svg') no-repeat bottom / cover; -moz-mask: url('../svg/icon_down.svg') no-repeat bottom / cover; mask: url('../svg/icon_down.svg') no-repeat bottom / cover; } @media (max-width:1440px) { .inside_banner .banner_box .banner_main .icon_down { width: 40px; height: 20px; } } @media (max-width:990px) { .inside_banner .banner_box .banner_main { padding-bottom: 100px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .inside_banner .banner_box .banner_main .banner_head { position: absolute; top: 0; } .inside_banner .banner_box .banner_main .banner_head .navigation { display: none; } .inside_banner .banner_box .banner_main .subnav_box { max-width: 400px; margin: 30px auto 0; display: block; } } @media (max-width:990px) { .inside_banner .banner_box { padding-top: 60px; } } .inside_banner .images { width: 100%; height: 100%; background: #2c303d; position: absolute; top: 0; left: 0; z-index: 1; font-size: 0; text-align: center; } .inside_banner .images img { width: 100%; height: 100%; object-fit: cover; animation: grow2 1s ease; } @media (max-width:1280px) { .inside_banner { height: calc(100vh - 130px); } } @media (max-width:1024px) { .inside_banner { height: calc(100vh - 128px); } } @media (max-width:990px) { .inside_banner { height: 100vh; } .inside_banner.active { height: auto; } .inside_banner.active .banner_box .banner_main .title_box { margin: 0; padding: 100px 0 50px; } } .inside_banner[left] .banner_box .banner_main .title_box { text-align: left; } .inside_banner[left] .banner_box .banner_main .title_box .title { font-family: 'Rubik', 'ff200'; } .inside_banner[left] .banner_box .banner_main .title_box .subtitle { font-family: 'Gilroy', 'ff400'; } .inside_banner[bottom] .banner_box .banner_main { padding-bottom: clamp(20px, 2.08333333vw, 40px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_banner[bottom] .banner_box .banner_main .title_box .title { font-family: 'Rubik', 'ff100'; } .inside_banner[details] { height: auto; } .inside_banner[details] .banner_box { position: absolute; left: 0; top: 0; padding-top: 130px; } @media (max-width:1366px) { .inside_banner[details] .banner_box { padding-top: 120px; } } @media (max-width:990px) { .inside_banner[details] .banner_box { padding-top: 60px; } } .inside_banner[details] .images { height: auto; position: relative; } @media (max-width:990px) { .inside_banner[details] { height: 40vh; min-height: 300px; } .inside_banner[details] .banner_box .banner_main { -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .inside_banner[details] .images { height: 100%; } } @-webkit-keyframes scrollDown2 { 0% { opacity: 0; transform: translate(-50%, -20px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 20px); } } @-moz-keyframes scrollDown2 { 0% { opacity: 0; transform: translate(-50%, -20px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 20px); } } @-ms-keyframes scrollDown2 { 0% { opacity: 0; transform: translate(-50%, -20px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 20px); } } @-o-keyframes scrollDown2 { 0% { opacity: 0; transform: translate(-50%, -20px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 20px); } } @keyframes scrollDown2 { 0% { opacity: 0; transform: translate(-50%, -20px); } 50% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 20px); } } /* 鍐呴〉 瑙e喅鏂规 */ .inside_solution { width: 100%; height: auto; position: relative; z-index: 10; } .inside_solution .solution_tips { width: 100%; height: auto; padding-top: clamp(65px, 6.77083333vw, 130px); padding-bottom: clamp(65px, 6.77083333vw, 130px); } .inside_solution .solution_tips .title { font-size: 42px; font-family: 'Rubik', 'ff800'; color: #2c303d; } @media (max-width:1680px) { .inside_solution .solution_tips .title { font-size: 40px; } } @media (max-width:1440px) { .inside_solution .solution_tips .title { font-size: 34px; } } @media (max-width:1280px) { .inside_solution .solution_tips .title { font-size: 28px; } } @media (max-width:1024px) { .inside_solution .solution_tips .title { font-size: 24px; } } @media (max-width:768px) { .inside_solution .solution_tips .title { font-size: 22px; } } .inside_solution .solution_tips .line { width: 60px; height: 2px; margin-top: clamp(15px, 1.5625vw, 30px); background: #eef0f2; } .inside_solution .solution_tips .details { margin-top: clamp(15px, 1.5625vw, 30px); font-size: 18px; font-family: 'Rubik', 'ff200'; line-height: 1.4; } @media (max-width:1440px) { .inside_solution .solution_tips .details { font-size: 16px; } } @media (max-width:1024px) { .inside_solution .solution_tips .details { font-size: 14px; } } @media (max-width:768px) { .inside_solution .solution_tips .details { font-size: 13px; } } .inside_solution .solution_classify { width: 100%; height: auto; padding-top: clamp(35px, 3.64583333vw, 70px); padding-bottom: clamp(35px, 3.64583333vw, 70px); position: relative; z-index: 1; overflow: hidden; } .inside_solution .solution_classify::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background: linear-gradient(#f3f6f9, transparent clamp(130px, 20vh, 260px)); } .inside_solution .solution_classify .solution_item { width: 100%; height: auto; position: relative; z-index: 5; padding-top: clamp(35px, 3.64583333vw, 70px); padding-bottom: clamp(35px, 3.64583333vw, 70px); } .inside_solution .solution_classify .solution_item .solution_box { width: 100%; height: auto; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_solution .solution_classify .solution_item .solution_box .solution_main { width: 41.666666666666666666666666666667%; height: auto; padding-top: clamp(30px, 3.125vw, 60px); padding-bottom: clamp(30px, 3.125vw, 60px); position: relative; z-index: 10; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .title_box { width: 100%; height: auto; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .title_box .title { width: 100%; height: auto; font-size: 42px; font-family: 'Rubik', 'ff800'; color: #2c303d; line-height: 1.2; } @media (max-width:1680px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .title_box .title { font-size: 40px; } } @media (max-width:1440px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .title_box .title { font-size: 34px; } } @media (max-width:1280px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .title_box .title { font-size: 28px; } } @media (max-width:1024px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .title_box .title { font-size: 24px; } } @media (max-width:768px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .title_box .title { font-size: 22px; } } .inside_solution .solution_classify .solution_item .solution_box .solution_main .title_box .subtitle { width: 100%; height: auto; margin-top: clamp(10px, 1.04166667vw, 20px); font-size: 24px; color: #2c303d; } @media (max-width:1680px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .title_box .subtitle { font-size: 22px; } } @media (max-width:1440px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .title_box .subtitle { font-size: 20px; } } @media (max-width:1280px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .title_box .subtitle { font-size: 18px; } } @media (max-width:1024px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .title_box .subtitle { font-size: 16px; } } @media (max-width:768px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .title_box .subtitle { font-size: 15px; } } .inside_solution .solution_classify .solution_item .solution_box .solution_main .title_box .line { width: 100%; height: 2px; margin-top: clamp(15px, 1.5625vw, 30px); background: #EEF0F2; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .title_box .subtitle ~ .line { width: 10%; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box { width: 100%; height: auto; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item { width: 100%; height: auto; padding-top: clamp(25px, 2.60416667vw, 50px); padding-bottom: clamp(25px, 2.60416667vw, 50px); position: relative; z-index: 1; cursor: pointer; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .headline { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; --color: #2c303d; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .headline .word { font-size: 30px; font-family: 'Rubik', 'ff700'; color: #2c303d; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1680px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .headline .word { font-size: 26px; } } @media (max-width:1440px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .headline .word { font-size: 24px; } } @media (max-width:1280px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .headline .word { font-size: 22px; } } @media (max-width:1024px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .headline .word { font-size: 20px; } } @media (max-width:768px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .headline .word { font-size: 18px; } } .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .headline .icon { width: 1em; height: 1em; font-size: 30px; position: relative; z-index: 1; } @media (max-width:1680px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .headline .icon { font-size: 26px; } } @media (max-width:1440px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .headline .icon { font-size: 24px; } } @media (max-width:1280px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .headline .icon { font-size: 22px; } } @media (max-width:1024px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .headline .icon { font-size: 20px; } } @media (max-width:768px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .headline .icon { font-size: 18px; } } .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .headline .icon::before, .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .headline .icon::after { content: ''; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); background: var(--color); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .headline .icon::before { width: 2px; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .headline .icon::after { height: 2px; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .info { width: 100%; height: auto; display: none; overflow: hidden; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .info .title { width: 100%; height: auto; margin-top: .2em; font-size: 24px; } @media (max-width:1680px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .info .title { font-size: 22px; } } @media (max-width:1440px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .info .title { font-size: 20px; } } @media (max-width:1280px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .info .title { font-size: 18px; } } @media (max-width:1024px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .info .title { font-size: 16px; } } @media (max-width:768px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .info .title { font-size: 15px; } } .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .info .details { width: 100%; max-height: calc(3em * 1.5); margin-top: 1.5em; font-size: 16px; font-family: 'Rubik', 'ff200'; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } @media (max-width:1440px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .info .details { font-size: 14px; } } @media (max-width:1024px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .info .details { font-size: 13px; } } @media (max-width:768px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .info .details { font-size: 12px; } } .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item .info .text_more { margin-top: clamp(20px, 2.08333333vw, 40px); } .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item:hover .headline { --color: #f39800; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item.active .headline .icon::before { height: 0; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item:first-child .info { display: block; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box>.item:first-child ~ .item { border-top: 2px solid #EEF0F2; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .text_box { width: 100%; height: auto; margin-top: clamp(20px, 2.08333333vw, 40px); } .inside_solution .solution_classify .solution_item .solution_box .solution_main .text_box .details { width: 100%; height: auto; font-size: 16px; font-family: 'Rubik', 'ff200'; } @media (max-width:1440px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .text_box .details { font-size: 14px; } } @media (max-width:1024px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .text_box .details { font-size: 13px; } } @media (max-width:768px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .text_box .details { font-size: 12px; } } .inside_solution .solution_classify .solution_item .solution_box .solution_main .text_box .block_more { margin-top: clamp(35px, 3.64583333vw, 70px); } .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box { width: 100%; height: auto; margin-top: clamp(20px, 2.08333333vw, 40px); } .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .details { width: 100%; height: auto; font-size: 16px; font-family: 'Rubik', 'ff200'; line-height: 1.4; } @media (max-width:1440px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .details { font-size: 14px; } } @media (max-width:1024px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .details { font-size: 13px; } } @media (max-width:768px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .details { font-size: 12px; } } .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .text_more { margin-top: clamp(35px, 3.64583333vw, 70px); } .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .link_menu { width: 100%; height: auto; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px; margin-top: clamp(25px, 2.60416667vw, 50px); } .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .link_menu .item { width: 100%; height: 80px; overflow: hidden; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .link_menu .item a { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between; position: relative; z-index: 1; padding: 0 20px; gap: 10px; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .link_menu .item a::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; border: 2px solid #F4F4F4; background: #FFF; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .link_menu .item a .word { width: 100%; flex: 1; position: relative; z-index: 2; font-size: 18px; -webkit-transition: all 0.55s ease; -o-transition: all 0.55s ease; transition: all 0.55s ease; } @media (max-width:1440px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .link_menu .item a .word { font-size: 16px; } } @media (max-width:1024px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .link_menu .item a .word { font-size: 14px; } } @media (max-width:768px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .link_menu .item a .word { font-size: 13px; } } .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .link_menu .item a .icon { position: relative; z-index: 2; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .link_menu .item a .icon { width: 16px; height: 11px; background: #FFF; opacity: 0; -webkit-transition: all 0.55s ease; -o-transition: all 0.55s ease; transition: all 0.55s ease; -webkit-mask: url('../svg/icon_arrow3.svg') no-repeat center / cover; -moz-mask: url('../svg/icon_arrow3.svg') no-repeat center / cover; mask: url('../svg/icon_arrow3.svg') no-repeat center / cover; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .link_menu .item a:hover::after { border-color: #f39800; background: #f39800; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .link_menu .item a:hover .word { color: #FFF; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .link_menu .item a:hover .icon { opacity: 1; } @media (max-width:1440px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .link_menu .item { height: 60px; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .link_menu .item a { padding: 0 15px; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .link_menu .item a::after { border-width: 1px; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .link_menu .item a .word { font-size: 14px; } } @media (max-width:768px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .link_menu { grid-template-columns: 100%; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .link_menu .item { height: 44px; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .link_menu .item a .word { font-size: 12px; } } .inside_solution .solution_classify .solution_item .solution_box .images { width: 44.444444444444444444444444444444%; height: 100%; background: #deeaec; overflow: hidden; } .inside_solution .solution_classify .solution_item .solution_box .images .pb { padding-bottom: 125%; } .inside_solution .solution_classify .solution_item .solution_box .images .img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; display: none; overflow: hidden; } .inside_solution .solution_classify .solution_item .solution_box .images .img img { width: 100%; height: 100%; object-fit: cover; } .inside_solution .solution_classify .solution_item .solution_box .images .img:first-child { display: block; } @media (max-width:1680px) { .inside_solution .solution_classify .solution_item .solution_box { width: 90%; } } @media (max-width:1440px) { .inside_solution .solution_classify .solution_item .solution_box .solution_main { width: 50%; } } @media (max-width:990px) { .inside_solution .solution_classify .solution_item .solution_box { width: 100%; display: block; } .inside_solution .solution_classify .solution_item .solution_box .solution_main { width: 100%; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .menu_box .item.item:first-child ~ .item { border-top-width: 1px; } .inside_solution .solution_classify .solution_item .solution_box .solution_main .link_box .link_menu { width: 100%; } .inside_solution .solution_classify .solution_item .solution_box .images { width: 100%; height: 50vh; } .inside_solution .solution_classify .solution_item .solution_box .images .pb { height: 100%; padding: 0; } } /* 鍐呴〉 瑙e喅鏂规 璇︽儏 */ .inside_solution_details { width: 100%; height: auto; } .inside_solution_details .solution_tips { width: 100%; height: auto; padding-top: clamp(65px, 6.77083333vw, 130px); padding-bottom: clamp(65px, 6.77083333vw, 130px); } .inside_solution_details .solution_tips .item { width: 100%; height: auto; } .inside_solution_details .solution_tips .item .title { font-size: 42px; font-family: 'Rubik', 'ff800'; color: #2c303d; } @media (max-width:1680px) { .inside_solution_details .solution_tips .item .title { font-size: 40px; } } @media (max-width:1440px) { .inside_solution_details .solution_tips .item .title { font-size: 34px; } } @media (max-width:1280px) { .inside_solution_details .solution_tips .item .title { font-size: 28px; } } @media (max-width:1024px) { .inside_solution_details .solution_tips .item .title { font-size: 24px; } } @media (max-width:768px) { .inside_solution_details .solution_tips .item .title { font-size: 22px; } } .inside_solution_details .solution_tips .item .line { width: 60px; height: 2px; margin-top: clamp(15px, 1.5625vw, 30px); background: #eef0f2; } .inside_solution_details .solution_tips .item .text_details { margin-top: clamp(15px, 1.5625vw, 30px); font-size: 18px; } @media (max-width:1440px) { .inside_solution_details .solution_tips .item .text_details { font-size: 16px; } } @media (max-width:1024px) { .inside_solution_details .solution_tips .item .text_details { font-size: 14px; } } @media (max-width:768px) { .inside_solution_details .solution_tips .item .text_details { font-size: 13px; } } .inside_solution_details .solution_tips .item .menu { width: 100%; height: auto; margin-top: clamp(30px, 3.125vw, 60px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_solution_details .solution_tips .item .menu .one { width: auto; height: auto; } .inside_solution_details .solution_tips .item .menu .one a { cursor: auto; } .inside_solution_details .solution_tips .item .menu .one .icon { width: auto; height: 1em; font-size: 54px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } @media (max-width:1680px) { .inside_solution_details .solution_tips .item .menu .one .icon { font-size: 48px; } } @media (max-width:1440px) { .inside_solution_details .solution_tips .item .menu .one .icon { font-size: 41px; } } @media (max-width:1280px) { .inside_solution_details .solution_tips .item .menu .one .icon { font-size: 36px; } } @media (max-width:1024px) { .inside_solution_details .solution_tips .item .menu .one .icon { font-size: 29px; } } .inside_solution_details .solution_tips .item .menu .one .word { width: 100%; height: auto; margin-top: 1.5em; text-align: center; font-size: 18px; color: #2c303d; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1440px) { .inside_solution_details .solution_tips .item .menu .one .word { font-size: 16px; } } @media (max-width:1024px) { .inside_solution_details .solution_tips .item .menu .one .word { font-size: 14px; } } @media (max-width:768px) { .inside_solution_details .solution_tips .item .menu .one .word { font-size: 13px; } } /*.inside_solution_details .solution_tips .item .menu .one:hover .icon {*/ /* transform: translateY(-10px);*/ /*}*/ /*.inside_solution_details .solution_tips .item .menu .one:hover .word {*/ /* color: #f39800;*/ /*}*/ @media (max-width:768px) { .inside_solution_details .solution_tips .item .menu { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 30px; } .inside_solution_details .solution_tips .item .menu .one { width: 100%; } } @media (max-width:480px) { .inside_solution_details .solution_tips .item .menu { grid-template-columns: repeat(3, 1fr); } } .inside_solution_details .solution_tips .item:first-child ~ .item { margin-top: clamp(65px, 6.77083333vw, 130px); } .inside_solution_details .solution_details { width: 100%; height: auto; position: relative; z-index: 1; } .inside_product_details .product_details .solution_title, .inside_solution_details .solution_details .solution_title {width: 100%; height: auto;} .inside_product_details .product_details .solution_title .title, .inside_solution_details .solution_details .solution_title .title { font-size: 42px; font-family: 'Rubik', 'ff800'; color: #2c303d; } @media (max-width:1680px) { .inside_product_details .product_details .solution_title .title, .inside_solution_details .solution_details .solution_title .title { font-size: 40px; } } @media (max-width:1440px) { .inside_product_details .product_details .solution_title .title, .inside_solution_details .solution_details .solution_title .title { font-size: 34px; } } @media (max-width:1280px) { .inside_product_details .product_details .solution_title .title, .inside_solution_details .solution_details .solution_title .title { font-size: 28px; } } @media (max-width:1024px) { .inside_product_details .product_details .solution_title .title, .inside_solution_details .solution_details .solution_title .title { font-size: 24px; } } @media (max-width:768px) { .inside_product_details .product_details .solution_title .title, .inside_solution_details .solution_details .solution_title .title { font-size: 22px;} } .inside_product_details .product_details .solution_item, .inside_solution_details .solution_details .solution_item{width:100%;height:auto;padding-top:clamp(70px,7.29166667vw,140px);padding-bottom:clamp(70px,7.29166667vw,140px);background:linear-gradient(#f3f6f9,transparent clamp(130px,20vh,260px));} .inside_product_details .product_details .solution_item .solution_box, .inside_solution_details .solution_details .solution_item .solution_box{width:87.5%;height:auto;} .inside_product_details .product_details .solution_item .solution_box .inside_details, .inside_solution_details .solution_details .solution_item .solution_box .inside_details{width:100%;height:auto;margin-top:clamp(35px,3.64583333vw,70px);} .inside_product_details .product_details .solution_item .solution_box .inside_details .text_details, .inside_solution_details .solution_details .solution_item .solution_box .inside_details .text_details{margin-top:clamp(20px,2.08333333vw,40px);} .inside_product_details .product_details .solution_item .solution_box .inside_plan, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan{width:100%;height:auto;margin-top:clamp(40px,4.16666667vw,80px);} .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box{width:100%;height:auto;margin-top:clamp(20px,2.08333333vw,40px);} .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item{width:100%;height:auto;padding-top:clamp(20px,2.08333333vw,40px);padding-bottom:clamp(20px,2.08333333vw,40px);position:relative;z-index:1;} .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item::after, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item::after{content:'';width:100%;height:1px;position:absolute;top:0;left:0;z-index:1;background:#eef0f2;} .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item .title_box, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item .title_box{width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;} .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item .title_box .icon, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item .title_box .icon{width:var(--size);height:var(--size);font-size:0;--size:48px;} @media (max-width:1440px){ .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item .title_box .icon, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item .title_box .icon{--size:44px;} } @media (max-width:1280px){ .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item .title_box .icon, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item .title_box .icon{--size:40px;} } @media (max-width:1024px){ .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item .title_box .icon, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item .title_box .icon{--size:36px;} } @media (max-width:768px){ .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item .title_box .icon, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item .title_box .icon{--size:30px;} } .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item .title_box .word, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item .title_box .word{ width: 100%; flex: 1;margin-left:clamp(15px,1.5625vw,30px);font-size:30px;font-family:'Rubik','ff700';color:#2c303d;} @media (max-width:1680px){ .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item .title_box .word, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item .title_box .word {font-size:26px;} } @media (max-width:1440px){ .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item .title_box .word, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item .title_box .word {font-size:24px;} } @media (max-width:1280px){ .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item .title_box .word, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item .title_box .word {font-size:22px;} } @media (max-width:1024px){ .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item .title_box .word, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item .title_box .word {font-size:20px;} } @media (max-width:768px){ .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item .title_box .word, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item .title_box .word {font-size:18px;} } .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item .menu_box, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item .menu_box {width:100%;height:auto; margin: clamp(1.125rem, -0.721rem + 2.31vw, 1.875rem) 0 0; display:grid;grid-template-columns:repeat(2,1fr);grid-gap:10px 40px;} .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item .menu_box .one, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item .menu_box .one{width:100%;height:auto;position:relative;z-index:1;font-size:16px;font-family:'Rubik','ff200';padding-left:1em;} @media (max-width:1440px){ .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item .menu_box .one, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item .menu_box .one {font-size:14px;} } @media (max-width:1024px){ .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item .menu_box .one, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item .menu_box .one {font-size:13px;} } @media (max-width:768px){ .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item .menu_box .one, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item .menu_box .one{font-size:12px;} } .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item .menu_box .one::after, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item .menu_box .one::after{content:'';width:var(--size);height:var(--size);position:absolute;top:.55em;left:0;z-index:1;background:#1163c8;--size:4px;} @media (max-width:1024px){ .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item {display:block;} .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item .title_box, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item .title_box {width:100%;height:auto;} .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item .menu_box, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item .menu_box {width:100%;margin-top:30px;padding:0 15px;} } @media (max-width:768px){ .inside_product_details .product_details .solution_item .solution_box .inside_plan .plan_box .item .menu_box, .inside_solution_details .solution_details .solution_item .solution_box .inside_plan .plan_box .item .menu_box {grid-template-columns:100%;} } .inside_product_details .product_details .solution_item .solution_box .inside_pro, .inside_solution_details .solution_details .solution_item .solution_box .inside_pro {width:100%;height:auto;margin-top:clamp(35px,3.64583333vw,70px);} .inside_product_details .product_details .solution_item .solution_box .inside_pro .menu_box, .inside_solution_details .solution_details .solution_item .solution_box .inside_pro .menu_box {width:100%;height:auto;margin-top:clamp(20px,2.08333333vw,40px);display:grid;grid-template-columns:repeat(2,1fr);grid-gap:60px;} .inside_product_details .product_details .solution_item .solution_box .inside_pro .menu_box .item, .inside_solution_details .solution_details .solution_item .solution_box .inside_pro .menu_box .item {width:100%;height:auto;position:relative;z-index:1;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;} .inside_product_details .product_details .solution_item .solution_box .inside_pro .menu_box .item::after, .inside_solution_details .solution_details .solution_item .solution_box .inside_pro .menu_box .item::after {content:'';width:100%;height:66.66%;position:absolute;top:0;left:0;z-index:1;background:#f6f7fb;} .inside_product_details .product_details .solution_item .solution_box .inside_pro .menu_box .item .img, .inside_solution_details .solution_details .solution_item .solution_box .inside_pro .menu_box .item .img {width:43.333333333333333333333333333333%;height:auto;position:relative;z-index:5;overflow:hidden;} .inside_product_details .product_details .solution_item .solution_box .inside_pro .menu_box .item .img .pb, .inside_solution_details .solution_details .solution_item .solution_box .inside_pro .menu_box .item .img .pb {padding-bottom:120%;} .inside_product_details .product_details .solution_item .solution_box .inside_pro .menu_box .item .info, .inside_solution_details .solution_details .solution_item .solution_box .inside_pro .menu_box .item .info {width:auto;height:auto;flex:1;padding-top:clamp(16px,1.66666667vw,32px);padding-bottom:clamp(16px,1.66666667vw,32px);padding-left:clamp(5px,0.52083333vw,10px);padding-right:clamp(16px,1.66666667vw,32px);position:relative;z-index:5;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;-moz-justify-content:space-around;-webkit-justify-content:space-around;justify-content:space-around;overflow:hidden;} .inside_product_details .product_details .solution_item .solution_box .inside_pro .menu_box .item .info .title_box, .inside_solution_details .solution_details .solution_item .solution_box .inside_pro .menu_box .item .info .title_box {width:100%;height:auto;} .inside_product_details .product_details .solution_item .solution_box .inside_pro .menu_box .item .info .title_box .title, .inside_solution_details .solution_details .solution_item .solution_box .inside_pro .menu_box .item .info .title_box .title {width:100%;height:auto;font-size:20px;font-family:'Gilroy','ff400';color:#2c303d;} @media (max-width:1680px){ .inside_product_details .product_details .solution_item .solution_box .inside_pro .menu_box .item .info .title_box .title, .inside_solution_details .solution_details .solution_item .solution_box .inside_pro .menu_box .item .info .title_box .title {font-size:18px;} } @media (max-width:1440px){ .inside_product_details .product_details .solution_item .solution_box .inside_pro .menu_box .item .info .title_box .title, .inside_solution_details .solution_details .solution_item .solution_box .inside_pro .menu_box .item .info .title_box .title {font-size:17px;} } @media (max-width:1280px){ .inside_product_details .product_details .solution_item .solution_box .inside_pro .menu_box .item .info .title_box .title, .inside_solution_details .solution_details .solution_item .solution_box .inside_pro .menu_box .item .info .title_box .title {font-size:16px;} } @media (max-width:1024px){ .inside_product_details .product_details .solution_item .solution_box .inside_pro .menu_box .item .info .title_box .title, .inside_solution_details .solution_details .solution_item .solution_box .inside_pro .menu_box .item .info .title_box .title {font-size:15px;} } @media (max-width:768px){ .inside_product_details .product_details .solution_item .solution_box .inside_pro .menu_box .item .info .title_box .title, .inside_solution_details .solution_details .solution_item .solution_box .inside_pro .menu_box .item .info .title_box .title {font-size:14px;} } .inside_product_details .product_details .solution_item .solution_box .inside_pro .menu_box .item .info .title_box .details, .inside_solution_details .solution_details .solution_item .solution_box .inside_pro .menu_box .item .info .title_box .details {width:100%;height:auto;margin-top:1.5em;font-size:14px;font-family:'Rubik','ff200';opacity:.6;} @media (max-width:1280px){ .inside_product_details .product_details .solution_item .solution_box .inside_pro .menu_box .item .info .title_box .details, .inside_solution_details .solution_details .solution_item .solution_box .inside_pro .menu_box .item .info .title_box .details {font-size:13px;} } @media (max-width:1024px){ .inside_product_details .product_details .solution_item .solution_box .inside_pro .menu_box .item .info .title_box .details, .inside_solution_details .solution_details .solution_item .solution_box .inside_pro .menu_box .item .info .title_box .details {font-size:12px;} } @media (max-width:768px){ .inside_product_details .product_details .solution_item .solution_box .inside_pro .menu_box, .inside_solution_details .solution_details .solution_item .solution_box .inside_pro .menu_box {grid-template-columns:100%;} } .inside_product_details .product_details .solution_item .solution_box .menu_text, .inside_solution_details .solution_details .solution_item .solution_box .menu_text {width:100%;height:auto;margin-top:clamp(25px,2.60416667vw,50px);--active:#0867d1;--c:#EEF0F2;--w:2px;--h:40px;} .inside_product_details .product_details .solution_item .solution_box .menu_text .headline, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .headline {width:100%;height:auto;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;} .inside_product_details .product_details .solution_item .solution_box .menu_text .headline .title, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .headline .title {min-width:50%;height:60px;padding:0 20px;border-radius:50px;position:relative;z-index:1;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;font-size:24px;font-family:'Rubik','ff800';color:#FFF;background:var(--active);} @media (max-width:1680px){ .inside_product_details .product_details .solution_item .solution_box .menu_text .headline .title, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .headline .title {font-size:22px;} } @media (max-width:1440px){ .inside_product_details .product_details .solution_item .solution_box .menu_text .headline .title, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .headline .title {font-size:20px;} } @media (max-width:1280px){ .inside_product_details .product_details .solution_item .solution_box .menu_text .headline .title, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .headline .title {font-size:18px;} } @media (max-width:1024px){ .inside_product_details .product_details .solution_item .solution_box .menu_text .headline .title, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .headline .title {font-size:16px;} } @media (max-width:768px){ .inside_product_details .product_details .solution_item .solution_box .menu_text .headline .title, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .headline .title {font-size:15px;} } .inside_product_details .product_details .solution_item .solution_box .menu_text .down, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .down {width:var(--w);height:var(--h);margin:0 auto;position:relative;z-index:1;background:var(--c);} .inside_product_details .product_details .solution_item .solution_box .menu_text .down *, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .down * {display:none;} .inside_product_details .product_details .solution_item .solution_box .menu_text .menu, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu {width:100%;height:auto;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;grid-gap:12px;position:relative;z-index:1;--mainSize:40px;--borderSize:2px;--borderColor:#EEECF1;} .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item {width:100%;height:auto;position:relative;z-index:5;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;} .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .line, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .line {width:100%;height:var(--h);position:relative;z-index:1;} .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .line::before, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .line::before {content:'';width:120%;height:var(--w);position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:1;background:var(--c);} .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .line::after, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .line::after {content:'';width:var(--w);height:100%;position:absolute;top:0;left:50%;z-index:1;transform:translateX(-50%);background:var(--c);} .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .line[left] .i, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .line[left] .i {width:6px;height:10px;font-size:0;position:absolute;top:0;right:0;z-index:5;transform:translate(0,-50%);opacity:0;animation:run_left 3s linear infinite;display:none;} .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item:first-child .line::before, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item:first-child .line::before {clip-path:polygon(50% 0,50% 2px,100% 100%,100% 0);} .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item:last-child .line::before, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item:last-child .line::before {clip-path:polygon(0% 0,0% 2px,50% 100%,50% 0);} .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .info, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .info {width:100%;height:auto;flex:1;background:#FFF;border:var(--borderSize) solid var(--borderColor);position:relative;z-index:5;overflow:hidden;} .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .title, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .title {width:100%;height:auto;padding:12px 0;padding-left:clamp(15px,1.5625vw,30px);padding-right:clamp(15px,1.5625vw,30px);border-bottom:var(--borderSize) solid var(--borderColor);background:#f6f9fb;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;} .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .title .number, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .title .number {width:var(--n);height:var(--n);line-height:var(--n);text-align:center;font-family:'Nexa','ff400';font-size:14px;color:#FFF;border-radius:50%;background:var(--active);--n:30px;overflow:hidden;} @media (max-width:1280px){ .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .title .number, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .title .number {font-size:13px;} } @media (max-width:1024px){ .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .title .number, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .title .number {font-size:12px;} } .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .title .word, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .title .word {margin-left:10px;font-size:20px;font-family:'Rubik','ff800';color:#2c303d;overflow:hidden;} @media (max-width:1680px){ .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .title .word, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .title .word {font-size:18px;} } @media (max-width:1440px){ .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .title .word, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .title .word {font-size:17px;} } @media (max-width:1280px){ .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .title .word, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .title .word {font-size:16px;} } @media (max-width:1024px){ .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .title .word, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .title .word {font-size:15px;} } @media (max-width:768px){ .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .title .word, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .title .word {font-size:14px;} } .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .table_box, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .table_box {width:100%;height:auto;padding:clamp(15px,1.5625vw,30px);overflow:hidden;} .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .table_box .one, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .table_box .one {width:100%;height:auto;padding-left:.85em;position:relative;z-index:1;font-size:16px;font-family:'Rubik','ff300';color:#2c303d;line-height:1;} @media (max-width:1440px){ .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .table_box .one, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .table_box .one {font-size:14px;} } @media (max-width:1024px){ .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .table_box .one, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .table_box .one {font-size:13px;} } @media (max-width:768px){ .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .table_box .one, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .table_box .one {font-size:12px;} } .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .table_box .one::after, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .table_box .one::after {content:'';width:.4em;height:2px;position:absolute;top:50%;left:0;z-index:1;transform:translateY(-50%);background:#2c303d;} .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .table_box .one:first-child ~ .one, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .table_box .one:first-child ~ .one {margin-top:.55em;} @media (max-width:1440px){ .inside_product_details .product_details .solution_item .solution_box .menu_text .headline .title, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .headline .title {height:54px;} } @media (max-width:1280px){ .inside_product_details .product_details .solution_item .solution_box .menu_text .headline .title, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .headline .title {min-width:40%;height:48px;} } @media (max-width:1024px){ .inside_product_details .product_details .solution_item .solution_box .menu_text, .inside_solution_details .solution_details .solution_item .solution_box .menu_text {--w:1px;--h:30px;} .inside_product_details .product_details .solution_item .solution_box .menu_text .headline .title, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .headline .title {min-width:36%;height:44px;} .inside_product_details .product_details .solution_item .solution_box .menu_text .menu, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu {--mainSize:30px;--borderSize:1px;} } @media (max-width:480px){ .inside_product_details .product_details .solution_item .solution_box .menu_text, .inside_solution_details .solution_details .solution_item .solution_box .menu_text {--h:10px;} .inside_product_details .product_details .solution_item .solution_box .menu_text .down, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .down {display:none;} .inside_product_details .product_details .solution_item .solution_box .menu_text .menu, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu {margin-top:10px;grid-gap:2px;--mainSize:10px;} .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .line, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .line {display:none;} .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .title, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .title {padding:10px;} .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .title .number, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .title .number {--n:22px;font-size:10px;line-height:24px;} .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .title .word, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .title .word {margin-left:5px;font-size:12px;} .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .table_box, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .table_box {padding:15px 10px;} .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .table_box .one, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .table_box .one {padding-left:6px;font-size:10px;} .inside_product_details .product_details .solution_item .solution_box .menu_text .menu .item .table_box .one::after, .inside_solution_details .solution_details .solution_item .solution_box .menu_text .menu .item .table_box .one::after {width:2px;height:2px;} .inside_product_details .product_details .solution_item .solution_box .menu_text.active .menu, .inside_solution_details .solution_details .solution_item .solution_box .menu_text.active .menu {display:grid;grid-template-columns:repeat(2,1fr);} } @media (max-width:990px){ .inside_product_details .product_details .solution_item .solution_box, .inside_solution_details .solution_details .solution_item .solution_box {width:100%;} } .inside_product_details .product_details .solution_1 .solution_box .swiper_tabs, .inside_solution_details .solution_details .solution_1 .solution_box .swiper_tabs {width:100%;height:auto;margin-top:20px;position:relative;z-index:1;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;} .inside_product_details .product_details .solution_1 .solution_box .swiper_tabs::after, .inside_solution_details .solution_details .solution_1 .solution_box .swiper_tabs::after {content:'';width:100%;height:2px;position:absolute;bottom:0;left:0;z-index:1;background:#eef0f2;} .inside_product_details .product_details .solution_1 .solution_box .swiper_tabs .item, .inside_solution_details .solution_details .solution_1 .solution_box .swiper_tabs .item {width:auto;height:auto;padding-bottom:20px;position:relative;z-index:5;line-height:1;font-size:16px;font-family:'Rubik','ff700';color:#2c303d;cursor:pointer;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;} @media (max-width:1440px){ .inside_product_details .product_details .solution_1 .solution_box .swiper_tabs .item, .inside_solution_details .solution_details .solution_1 .solution_box .swiper_tabs .item {font-size:14px;} } @media (max-width:1024px){ .inside_product_details .product_details .solution_1 .solution_box .swiper_tabs .item, .inside_solution_details .solution_details .solution_1 .solution_box .swiper_tabs .item {font-size:13px;} } @media (max-width:768px){ .inside_product_details .product_details .solution_1 .solution_box .swiper_tabs .item, .inside_solution_details .solution_details .solution_1 .solution_box .swiper_tabs .item {font-size:12px;} } .inside_product_details .product_details .solution_1 .solution_box .swiper_tabs .item::after, .inside_solution_details .solution_details .solution_1 .solution_box .swiper_tabs .item::after {content:'';width:0;height:2px;position:absolute;bottom:0;left:50%;z-index:1;background:#f39800;transform:translateX(-50%);-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;} .inside_product_details .product_details .solution_1 .solution_box .swiper_tabs .item:first-child ~ .item, .inside_solution_details .solution_details .solution_1 .solution_box .swiper_tabs .item:first-child ~ .item {margin-left:clamp(15px,1.5625vw,30px);} .inside_product_details .product_details .solution_1 .solution_box .swiper_tabs .item.active, .inside_solution_details .solution_details .solution_1 .solution_box .swiper_tabs .item.active {color:#f39800;} .inside_product_details .product_details .solution_1 .solution_box .swiper_tabs .item.active::after, .inside_solution_details .solution_details .solution_1 .solution_box .swiper_tabs .item.active::after {width:100%;} .inside_product_details .product_details .solution_1 .solution_box .swiper_box, .inside_solution_details .solution_details .solution_1 .solution_box .swiper_box {width:100%;height:auto;margin-top:clamp(20px,2.08333333vw,40px);overflow:hidden;} .inside_product_details .product_details .solution_1 .solution_box .swiper_box .swiper-slide, .inside_solution_details .solution_details .solution_1 .solution_box .swiper_box .swiper-slide {opacity:0;pointer-events:none;} .inside_product_details .product_details .solution_1 .solution_box .swiper_box .swiper-slide.active, .inside_solution_details .solution_details .solution_1 .solution_box .swiper_box .swiper-slide.active {pointer-events:initial;} .inside_product_details .product_details .solution_1 .solution_box .swiper_box .swiper-slide.active *, .inside_solution_details .solution_details .solution_1 .solution_box .swiper_box .swiper-slide.active * {pointer-events:initial;} .inside_product_details .product_details .solution_2 .solution_box .menu_product, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product {width:100%;height:auto;margin-top:clamp(6px,0.625vw,12px);background:#f6f7fb;padding:clamp(30px,3.125vw,60px);display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;--c:#EEF0F2;--w:2px;--h:40px;} .inside_product_details .product_details .solution_2 .solution_box .menu_product .headline, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .headline {position:relative;z-index:1;} .inside_product_details .product_details .solution_2 .solution_box .menu_product .headline::before, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .headline::before {content:'';width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;border-radius:100px;background:#FFF;border-bottom:6px solid #3b6eca;} .inside_product_details .product_details .solution_2 .solution_box .menu_product .headline::after, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .headline::after {content:'';width:6px;height:6px;position:absolute;bottom:0;left:50%;z-index:1;background:#3b6eca;box-shadow:0 0 0 3px #FFF;transform:translateX(-50%);border-radius:50%;} .inside_product_details .product_details .solution_2 .solution_box .menu_product .headline .img, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .headline .img {width:100%;height:auto;position:relative;z-index:5;} .inside_product_details .product_details .solution_2 .solution_box .menu_product .headline .title, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .headline .title {width:100%;height:auto;padding-bottom:clamp(7px,0.72916667vw,14px);position:relative;z-index:5;text-align:center;font-size:20px;font-family:'Gilroy','ff800';color:#3b6eca;} @media (max-width:1680px){ .inside_product_details .product_details .solution_2 .solution_box .menu_product .headline .title, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .headline .title {font-size:18px;} } @media (max-width:1440px){ .inside_product_details .product_details .solution_2 .solution_box .menu_product .headline .title, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .headline .title {font-size:17px;} } @media (max-width:1280px){ .inside_product_details .product_details .solution_2 .solution_box .menu_product .headline .title, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .headline .title {font-size:16px;} } @media (max-width:1024px){ .inside_product_details .product_details .solution_2 .solution_box .menu_product .headline .title, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .headline .title {font-size:15px;} } @media (max-width:768px){ .inside_product_details .product_details .solution_2 .solution_box .menu_product .headline .title, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .headline .title {font-size:14px;} } .inside_product_details .product_details .solution_2 .solution_box .menu_product .down, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .down {width:2px;height:40px;margin:0 auto;position:relative;z-index:1;background:var(--c);} .inside_product_details .product_details .solution_2 .solution_box .menu_product .down .i, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .down .i {width:10px;height:6px;font-size:0;position:absolute;top:0;left:50%;z-index:10;opacity:0;transform:translate(-50%,0);animation:run_down 3s linear infinite;} .inside_product_details .product_details .solution_2 .solution_box .menu_product .down .i:nth-child(2), .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .down .i:nth-child(2) {animation-delay:.8s;} .inside_product_details .product_details .solution_2 .solution_box .menu_product .down .i:nth-child(3), .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .down .i:nth-child(3) {animation-delay:1.6s;} @media (max-width:768px){ .inside_product_details .product_details .solution_2 .solution_box .menu_product .down{display:none;} .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .down{display:none;} } .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu {width:auto;height:auto;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;grid-gap:12px;} .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item {width:180px;height:auto;} .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item .line, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item .line {width:100%;height:40px;position:relative;z-index:1;} .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item .line::before, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item .line::before {content:'';width:120%;height:var(--w);position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:1;background:var(--c);} .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item .line::after, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item .line::after {content:'';width:var(--w);height:100%;position:absolute;top:0;left:50%;z-index:1;transform:translateX(-50%);background:var(--c);} .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item:first-child .line::before, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item:first-child .line::before {clip-path:polygon(50% 0,50% 2px,100% 100%,100% 0);} .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item:first-child .line .i, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item:first-child .line .i {width:6px;height:10px;font-size:0;position:absolute;top:0;right:0;z-index:10;opacity:0;transform:translate(50%,-50%);animation:run_left2 3s linear infinite;} .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item:first-child .line .i:nth-child(2), .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item:first-child .line .i:nth-child(2) {animation-delay:.8s;} .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item:first-child .line .i:nth-child(3), .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item:first-child .line .i:nth-child(3) {animation-delay:1.6s;} .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item:first-child .line .i:nth-child(4), .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item:first-child .line .i:nth-child(4) {animation-delay:2.4s;} @media (max-width:768px){ .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item:first-child .line .i{display:none;} .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item:first-child .line .i{display:none;} } .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item:last-child .line::before, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item:last-child .line::before {clip-path:polygon(0% 0,0% 2px,50% 100%,50% 0);} .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item:last-child .line .i, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item:last-child .line .i {width:6px;height:10px;font-size:0;position:absolute;top:0;left:0;z-index:10;opacity:0;transform:translate(50%,-50%);animation:run_right2 3s linear infinite;} .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item:last-child .line .i:nth-child(2), .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item:last-child .line .i:nth-child(2) {animation-delay:.8s;} .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item:last-child .line .i:nth-child(3), .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item:last-child .line .i:nth-child(3) {animation-delay:1.6s;} .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item:last-child .line .i:nth-child(4), .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item:last-child .line .i:nth-child(4) {animation-delay:2.4s;} @media (max-width:768px){ .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item:last-child .line .i, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item:last-child .line .i {display:none;} } .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item:nth-child(2) .line .i, .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item:nth-child(3) .line .i, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item:nth-child(2) .line .i, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item:nth-child(3) .line .i {width:10px;height:6px;font-size:0;position:absolute;top:0;left:50%;z-index:10;opacity:0;transform:translate(-50%,0);animation:run_down 3s linear infinite;} .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item:nth-child(2) .line .i:nth-child(2), .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item:nth-child(3) .line .i:nth-child(2), .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item:nth-child(2) .line .i:nth-child(2), .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item:nth-child(3) .line .i:nth-child(2) { animation-delay:.8s; } .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item:nth-child(2) .line .i:nth-child(3), .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item:nth-child(3) .line .i:nth-child(3), .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item:nth-child(2) .line .i:nth-child(3), .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item:nth-child(3) .line .i:nth-child(3) { animation-delay:1.6s; } @media (max-width:768px){ .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item:nth-child(2) .line .i, .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item:nth-child(3) .line .i, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item:nth-child(2) .line .i, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item:nth-child(3) .line .i{ display:none; } } .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item .info, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item .info {width:100%;height:auto;} .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item .info .img, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item .info .img {width:100%;height:auto;position:relative;z-index:1;border-radius:10px;border:var(--w) solid var(--c);overflow:hidden;} .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item .info .img .pb, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item .info .img .pb {padding-bottom:55.555555555555555555555555555556%;} .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item .info .title, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item .info .title {width:100%;height:auto;margin-top:clamp(10px,1.04166667vw,20px);text-align:center;font-size:18px;color:#2c303d;} @media (max-width:1440px){ .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item .info .title, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item .info .title {font-size:16px;} } @media (max-width:1024px){ .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item .info .title, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item .info .title {font-size:14px;} } @media (max-width:768px){ .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item .info .title, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item .info .title {font-size:13px;} } @media (max-width:768px){ .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu {width:100%;max-width:372px;display:grid;grid-template-columns:repeat(2,1fr);margin-top:30px;} .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item {width:100%;} .inside_product_details .product_details .solution_2 .solution_box .menu_product .menu .item .line, .inside_solution_details .solution_details .solution_2 .solution_box .menu_product .menu .item .line {display:none;} } .inside_product_details .product_details .solution_3 .solution_box .menu_text, .inside_solution_details .solution_details .solution_3 .solution_box .menu_text {--active:#f59600;} .inside_product_details .product_details .solution_3 .solution_box .grid_box, .inside_solution_details .solution_details .solution_3 .solution_box .grid_box {width:100%;height:auto;margin-top:clamp(40px,4.16666667vw,80px);} .inside_product_details .product_details .solution_3 .solution_box .grid_box .menu, .inside_solution_details .solution_details .solution_3 .solution_box .grid_box .menu {width:100%;height:auto;margin-top:clamp(20px,2.08333333vw,40px);display:grid;grid-template-columns:repeat(2,1fr);grid-gap:20px;} .inside_product_details .product_details .solution_3 .solution_box .grid_box .menu .item, .inside_solution_details .solution_details .solution_3 .solution_box .grid_box .menu .item {width:100%;height:auto;background:#f6f7fb;padding:clamp(15px,1.5625vw,30px);display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column;overflow:hidden;} .inside_product_details .product_details .solution_3 .solution_box .grid_box .menu .item .title, .inside_solution_details .solution_details .solution_3 .solution_box .grid_box .menu .item .title {width:100%;height:auto;padding-bottom:15px;position:relative;z-index:1;font-size:30px;font-family:'Rubik','ff700';-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;} @media (max-width:1680px){ .inside_product_details .product_details .solution_3 .solution_box .grid_box .menu .item .title, .inside_solution_details .solution_details .solution_3 .solution_box .grid_box .menu .item .title {font-size:26px;} } @media (max-width:1440px){ .inside_product_details .product_details .solution_3 .solution_box .grid_box .menu .item .title, .inside_solution_details .solution_details .solution_3 .solution_box .grid_box .menu .item .title {font-size:24px;} } @media (max-width:1280px){ .inside_product_details .product_details .solution_3 .solution_box .grid_box .menu .item .title, .inside_solution_details .solution_details .solution_3 .solution_box .grid_box .menu .item .title {font-size:22px;} } @media (max-width:1024px){ .inside_product_details .product_details .solution_3 .solution_box .grid_box .menu .item .title, .inside_solution_details .solution_details .solution_3 .solution_box .grid_box .menu .item .title {font-size:20px;} } @media (max-width:768px){ .inside_product_details .product_details .solution_3 .solution_box .grid_box .menu .item .title, .inside_solution_details .solution_details .solution_3 .solution_box .grid_box .menu .item .title {font-size:18px;} } .inside_product_details .product_details .solution_3 .solution_box .grid_box .menu .item .title::after, .inside_solution_details .solution_details .solution_3 .solution_box .grid_box .menu .item .title::after {content:'';width:200%;height:2px;position:absolute;bottom:0;left:0;z-index:1;background:#eef0f2;} .inside_product_details .product_details .solution_3 .solution_box .grid_box .menu .item .info, .inside_solution_details .solution_details .solution_3 .solution_box .grid_box .menu .item .info {width:100%;height:auto;flex:1;position:relative;z-index:1;padding-top:clamp(10px,1.04166667vw,20px);padding-right:var(--size);overflow:hidden;--size:60px;} .inside_product_details .product_details .solution_3 .solution_box .grid_box .menu .item .info .details, .inside_solution_details .solution_details .solution_3 .solution_box .grid_box .menu .item .info .details {width:100%;height:auto;padding-right:20px;min-height:calc(5em * 1.5);flex:1;font-size:16px;font-family:'Rubik','ff200';line-height:1.5;overflow:hidden;} @media (max-width:1440px){ .inside_product_details .product_details .solution_3 .solution_box .grid_box .menu .item .info .details, .inside_solution_details .solution_details .solution_3 .solution_box .grid_box .menu .item .info .details {font-size:14px;} } @media (max-width:1024px){ .inside_product_details .product_details .solution_3 .solution_box .grid_box .menu .item .info .details, .inside_solution_details .solution_details .solution_3 .solution_box .grid_box .menu .item .info .details {font-size:13px;} } @media (max-width:768px){ .inside_product_details .product_details .solution_3 .solution_box .grid_box .menu .item .info .details, .inside_solution_details .solution_details .solution_3 .solution_box .grid_box .menu .item .info .details {font-size:12px;} } .inside_product_details .product_details .solution_3 .solution_box .grid_box .menu .item .info .details p:first-child ~ p, .inside_solution_details .solution_details .solution_3 .solution_box .grid_box .menu .item .info .details p:first-child ~ p {margin-top:.6em;} .inside_product_details .product_details .solution_3 .solution_box .grid_box .menu .item .info .icon, .inside_solution_details .solution_details .solution_3 .solution_box .grid_box .menu .item .info .icon {width:var(--size);height:auto;text-align:right;font-size:0;position:absolute;bottom:0;right:0;} .inside_product_details .product_details .solution_3 .solution_box .grid_box .menu .item:hover .title, .inside_solution_details .solution_details .solution_3 .solution_box .grid_box .menu .item:hover .title {color:#f39800;} @media (max-width:1280px){ .inside_product_details .product_details .solution_3 .solution_box .grid_box .menu .item .info, .inside_solution_details .solution_details .solution_3 .solution_box .grid_box .menu .item .info {--size:48px;} } @media (max-width:768px){ .inside_product_details .product_details .solution_3 .solution_box .grid_box .menu, .inside_solution_details .solution_details .solution_3 .solution_box .grid_box .menu {grid-template-columns:100%;grid-gap:10px;} .inside_product_details .product_details .solution_3 .solution_box .grid_box .menu .item .info, .inside_solution_details .solution_details .solution_3 .solution_box .grid_box .menu .item .info {--size:40px;} } /* ---------- */ /* 鍐呴〉 浜у搧 */ /* 鍒楄〃 */ .inside_product { width: 100%; height: auto; position: relative; z-index: 5; background: #F5F5F5; overflow: hidden; } .inside_product .product_box { width: 100%; height: auto; padding-top: clamp(50px, 5.20833333vw, 100px); padding-bottom: clamp(120px, 12.5vw, 240px); } .inside_product .product_box .product_title { width: 100%; height: auto; font-size: 42px; font-family: 'Rubik', 'ff800'; line-height: 1; } @media (max-width:1680px) { .inside_product .product_box .product_title { font-size: 40px; } } @media (max-width:1440px) { .inside_product .product_box .product_title { font-size: 34px; } } @media (max-width:1280px) { .inside_product .product_box .product_title { font-size: 28px; } } @media (max-width:1024px) { .inside_product .product_box .product_title { font-size: 24px; } } @media (max-width:768px) { .inside_product .product_box .product_title { font-size: 22px; } } .inside_product .product_box .product_main { width: 100%; height: auto; margin-top: clamp(25px, 2.60416667vw, 50px); } .inside_product .product_box .product_main .product_item { width: 100%; height: auto; position: relative; z-index: 1; margin-top: 20px; } .inside_product .product_box .product_main .product_item .images { width: 100%; height: auto; font-size: 0; position: relative; z-index: 1; overflow: hidden; } .inside_product .product_box .product_main .product_item .images .details { width: 100%; height: auto; padding: clamp(20px, 2.08333333vw, 40px); position: absolute; bottom: 0; left: 0; z-index: 10; font-size: 24px; font-family: 'Rubik', 'ff800'; color: #FFF; display: none; } @media (max-width:1680px) { .inside_product .product_box .product_main .product_item .images .details { font-size: 22px; } } @media (max-width:1440px) { .inside_product .product_box .product_main .product_item .images .details { font-size: 20px; } } @media (max-width:1280px) { .inside_product .product_box .product_main .product_item .images .details { font-size: 18px; } } @media (max-width:1024px) { .inside_product .product_box .product_main .product_item .images .details { font-size: 16px; } } @media (max-width:768px) { .inside_product .product_box .product_main .product_item .images .details { font-size: 15px; } } .inside_product .product_box .product_main .product_item .images .pb { padding-bottom: 38.88888888888889%; } .inside_product .product_box .product_main .product_item .images img { width: 100%; height: 100%; object-fit: cover; } .inside_product .product_box .product_main .product_item .content { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 5; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_product .product_box .product_main .product_item .content .menu_box { width: 47.638888888888888888888888888889%; height: auto; padding: 0 var(--size) var(--size); padding-top: clamp(30px, 3.125vw, 60px); /*transform: translate(var(--size), var(--size));*/ --size: 40px; background: #FFF; position: relative; z-index: 1; overflow: hidden; } .inside_product .product_box .product_main .product_item .content .menu_box .menu { width: 100%; height: auto; margin-top: clamp(10px, 1.04166667vw, 20px); display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 6px; position: relative; z-index: 5; } .inside_product .product_box .product_main .product_item .content .menu_box .menu .item { width: 100%; height: auto; } .inside_product .product_box .product_main .product_item .content .menu_box .menu .item a { width: 100%; height: 100%; padding: 15px 20px; background: #F5F5F5; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; gap: 8px; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product .product_box .product_main .product_item .content .menu_box .menu .item a .word { font-size: 16px; font-family: 'Rubik', 'ff400'; color: #2c303d; } @media (max-width:1440px) { .inside_product .product_box .product_main .product_item .content .menu_box .menu .item a .word { font-size: 14px; } } @media (max-width:1024px) { .inside_product .product_box .product_main .product_item .content .menu_box .menu .item a .word { font-size: 13px; } } @media (max-width:768px) { .inside_product .product_box .product_main .product_item .content .menu_box .menu .item a .word { font-size: 12px; } } .inside_product .product_box .product_main .product_item .content .menu_box .menu .item a .icon { width: 5px; height: 7px; font-size: 16px; background: #2c303d; font-size: 0; position: relative; z-index: 1; -webkit-mask: url('../svg/icon_arrow2.svg') no-repeat center; -moz-mask: url('../svg/icon_arrow2.svg') no-repeat center; mask: url('../svg/icon_arrow2.svg') no-repeat center; } @media (max-width:1440px) { .inside_product .product_box .product_main .product_item .content .menu_box .menu .item a .icon { font-size: 14px; } } @media (max-width:1024px) { .inside_product .product_box .product_main .product_item .content .menu_box .menu .item a .icon { font-size: 13px; } } @media (max-width:768px) { .inside_product .product_box .product_main .product_item .content .menu_box .menu .item a .icon { font-size: 12px; } } .inside_product .product_box .product_main .product_item .content .menu_box .menu .item a .word, .inside_product .product_box .product_main .product_item .content .menu_box .menu .item a .icon { -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product .product_box .product_main .product_item .content .menu_box .menu .item a:hover { background: #f39800; } .inside_product .product_box .product_main .product_item .content .menu_box .menu .item a:hover .word { color: #FFF; } .inside_product .product_box .product_main .product_item .content .menu_box .menu .item a:hover .icon { background: #FFF; } .inside_product .product_box .product_main .product_item .content .menu_box .icon_hot { width: 1em; height: 1em; font-size: 125px; position: absolute; right: 0; bottom: 0; z-index: 1; } @media (max-width:1680px) { .inside_product .product_box .product_main .product_item .content .menu_box .icon_hot { font-size: 110px; } } @media (max-width:1440px) { .inside_product .product_box .product_main .product_item .content .menu_box .icon_hot { font-size: 94px; } } @media (max-width:1280px) { .inside_product .product_box .product_main .product_item .content .menu_box .icon_hot { font-size: 84px; } } @media (max-width:1024px) { .inside_product .product_box .product_main .product_item .content .menu_box .icon_hot { font-size: 67px; } } @media (max-width:990px) { .inside_product .product_box .product_main .product_item .content .menu_box .icon_hot { font-size: 65px; } } @media (max-width:768px) { .inside_product .product_box .product_main .product_item .content .menu_box .icon_hot { font-size: 50px; } } @media (max-width:640px) { .inside_product .product_box .product_main .product_item .content .menu_box .icon_hot { font-size: 42px; } } .inside_product .product_box .product_main .product_item .content .menu_box .icon_hot i { background: #f1f3f6; } .inside_product .product_box .product_main .product_item .content .details { flex: 1; padding-left: clamp(20px, 2.08333333vw, 40px); padding-right: clamp(60px, 6.25vw, 120px); padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(20px, 2.08333333vw, 40px); font-size: 24px; font-family: 'Rubik', 'ff800'; color: #FFF; } @media (max-width:1680px) { .inside_product .product_box .product_main .product_item .content .details { font-size: 22px; } } @media (max-width:1440px) { .inside_product .product_box .product_main .product_item .content .details { font-size: 20px; } } @media (max-width:1280px) { .inside_product .product_box .product_main .product_item .content .details { font-size: 18px; } } @media (max-width:1024px) { .inside_product .product_box .product_main .product_item .content .details { font-size: 16px; } } @media (max-width:768px) { .inside_product .product_box .product_main .product_item .content .details { font-size: 15px; } } .inside_product .product_box .product_main .product_item:nth-child(odd) .content { -webkit-flex-direction: row-reverse; -moz-flex-direction: row-reverse; -ms-flex-direction: row-reverse; -o-flex-direction: row-reverse; flex-direction: row-reverse; } .inside_product .product_box .product_main .product_item:nth-child(odd) .content .menu_box { transform: translate(calc(-1 * var(--size)), var(--size)); } .inside_product .product_box .product_main .product_item:first-child ~ .product_item { margin-top: clamp(95px, 9.89583333vw, 190px); } @media (max-width:1680px) { .inside_product .product_box .product_main .product_item .content .menu_box { --size: 35px; } } @media (max-width:1440px) { .inside_product .product_box .product_main .product_item .content .menu_box { --size: 30px; } } @media (max-width:1280px) { .inside_product .product_box .product_main .product_item .content .menu_box { --size: 25px; } } @media (max-width:1024px) { .inside_product .product_box .product_main .product_item .content .menu_box { --size: 20px; } } @media (max-width:990px) { .inside_product .product_box .product_main .product_item .images .details { display: block; } .inside_product .product_box .product_main .product_item .content { height: auto; display: block; position: relative; } .inside_product .product_box .product_main .product_item .content .menu_box { width: 100%; transform: translate(0); } .inside_product .product_box .product_main .product_item .content .menu_box .menu { margin-top: 20px; } .inside_product .product_box .product_main .product_item .content .details { display: none; } .inside_product .product_box .product_main .product_item.product_item:first-child ~ .product_item { margin-top: 50px; } } @media (max-width:768px) { .inside_product .product_box .product_main .product_item .images .pb { padding-bottom: 66.66%; } .inside_product .product_box .product_main .product_item .content .menu_box .menu { grid-template-columns: 100%; } } /* 璇︽儏 鍒楄〃 */ .inside_product_details { width: 100%; height: auto; background: #F5F5F5; overflow: hidden; } .inside_product_details .product_details { width: 100%; height: auto; /* 浜у搧姒傚喌 */ /* 浜у搧鐗圭偣 */ } .inside_product_details .product_details .product_item { width: 100%; height: auto; overflow: hidden; } .inside_product_details .product_details .product_item .text_details p { margin-top: 25px; } .inside_product_details .product_details .product_item .product_box { width: 100%; height: auto; } .inside_product_details .product_details .product_item .product_box .album_box { width: 100%; height: auto; margin: clamp(25px, 2.60416667vw, 50px) 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; } .inside_product_details .product_details .product_item .product_box .album_box .item { width: 100%; height: auto; overflow: hidden; } .inside_product_details .product_details .product_item .product_box .album_box .item .pb { padding-bottom: 60%; } .inside_product_details .product_details .product_item .product_box .album_box .item img { width: 100%; height: 100%; object-fit: cover; } @media (max-width:1024px) { .inside_product_details .product_details .product_item .product_box .album_box { grid-gap: 10px; } } @media (max-width:480px) { .inside_product_details .product_details .product_item .product_box .album_box { grid-template-columns: 100%; grid-gap: 5px; } } .inside_product_details .product_details .product_item .product_box .plan_box { width: 100%; height: auto; margin-top: clamp(20px, 2.08333333vw, 40px); } .inside_product_details .product_details .product_item .product_box .plan_box .item { width: 100%; height: auto; padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(20px, 2.08333333vw, 40px); /*display: -webkit-box;*/ /*display: -ms-flexbox;*/ /*display: -webkit-flex;*/ /*display: flex;*/ /*-webkit-box-align: baseline;*/ /*-ms-flex-align: baseline;*/ /*-webkit-align-items: baseline;*/ /*align-items: baseline;*/ /*-webkit-box-pack: justify;*/ /*-ms-flex-pack: justify;*/ /*-webkit-justify-content: space-between;*/ /*justify-content: space-between;*/ position: relative; z-index: 1; } .inside_product_details .product_details .product_item .product_box .plan_box .item::after { content: ''; width: 100%; height: 1px; position: absolute; top: 0; left: 0; z-index: 1; background: #eef0f2; } .inside_product_details .product_details .product_item .product_box .plan_box .item .title_box { width: 100%; height: 100%; /* padding-left: clamp(15px, 1.5625vw, 30px); padding-right: clamp(15px, 1.5625vw, 30px); */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .inside_product_details .product_details .product_item .product_box .plan_box .item .title_box .icon { width: var(--size); height: var(--size); font-size: 0; --size: 48px; } @media (max-width:1440px) { .inside_product_details .product_details .product_item .product_box .plan_box .item .title_box .icon { --size: 44px; } } @media (max-width:1280px) { .inside_product_details .product_details .product_item .product_box .plan_box .item .title_box .icon { --size: 40px; } } @media (max-width:1024px) { .inside_product_details .product_details .product_item .product_box .plan_box .item .title_box .icon { --size: 36px; } } @media (max-width:768px) { .inside_product_details .product_details .product_item .product_box .plan_box .item .title_box .icon { --size: 30px; } } .inside_product_details .product_details .product_item .product_box .plan_box .item .title_box .word { width: 100%; flex: 1; margin-left: clamp(15px, 1.5625vw, 30px); font-size: 30px; font-family: 'Rubik', 'ff700'; color: #2c303d; } @media (max-width:1680px) { .inside_product_details .product_details .product_item .product_box .plan_box .item .title_box .word { font-size: 26px; } } @media (max-width:1440px) { .inside_product_details .product_details .product_item .product_box .plan_box .item .title_box .word { font-size: 24px; } } @media (max-width:1280px) { .inside_product_details .product_details .product_item .product_box .plan_box .item .title_box .word { font-size: 22px; } } @media (max-width:1024px) { .inside_product_details .product_details .product_item .product_box .plan_box .item .title_box .word { font-size: 20px; } } @media (max-width:768px) { .inside_product_details .product_details .product_item .product_box .plan_box .item .title_box .word { font-size: 18px; } } .inside_product_details .product_details .product_item .product_box .plan_box .item .menu_box { width: 100%; height: auto; margin: clamp(1.125rem, -0.721rem + 2.31vw, 1.875rem) 0 0; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px 40px; } .inside_product_details .product_details .product_item .product_box .plan_box .item .menu_box .one { width: 100%; height: auto; position: relative; z-index: 1; font-size: 16px; font-family: 'Rubik', 'ff200'; padding-left: 1em; } @media (max-width:1440px) { .inside_product_details .product_details .product_item .product_box .plan_box .item .menu_box .one { font-size: 14px; } } @media (max-width:1024px) { .inside_product_details .product_details .product_item .product_box .plan_box .item .menu_box .one { font-size: 13px; } } @media (max-width:768px) { .inside_product_details .product_details .product_item .product_box .plan_box .item .menu_box .one { font-size: 12px; } } .inside_product_details .product_details .product_item .product_box .plan_box .item .menu_box .one::after { content: ''; width: var(--size); height: var(--size); position: absolute; top: .55em; left: 0; z-index: 1; background: #1163c8; --size: 4px; } @media (max-width:1024px) { .inside_product_details .product_details .product_item .product_box .plan_box .item { display: block; } .inside_product_details .product_details .product_item .product_box .plan_box .item .title_box { width: 100%; height: auto; } .inside_product_details .product_details .product_item .product_box .plan_box .item .menu_box { width: 100%; margin-top: 30px; padding: 0 15px; } } @media (max-width:768px) { .inside_product_details .product_details .product_item .product_box .plan_box .item .menu_box { grid-template-columns: 100%; } } .inside_product_details .product_details .product_item .product_box .plan_box .item:last-child { padding-bottom: 0; } @media (max-width:1800px) { .inside_product_details .product_details .product_item .product_box { width: 87.5%; } } @media (max-width:990px) { .inside_product_details .product_details .product_item .product_box { width: 100%; } } .inside_product_details .product_details .product_1 .product_box { width: 100%; height: auto; padding-top: clamp(70px, 7.29166667vw, 140px); /* padding-bottom: clamp(65px, 6.77083333vw, 130px); */ overflow: hidden; } .inside_product_details .product_details .product_1 .product_box .info_box { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); } .inside_product_details .product_details .product_1 .product_box .info_box .title ,.block_content h3{ width: 100%; height: auto; font-size: 42px; font-family: 'Rubik', 'ff800'; color: #2c303d; line-height: 1; } .block_content h3{ margin-top: clamp(15px, 1.5625vw, 30px); } @media (max-width:1680px) { .inside_product_details .product_details .product_1 .product_box .info_box .title { font-size: 40px; } } @media (max-width:1440px) { .inside_product_details .product_details .product_1 .product_box .info_box .title { font-size: 34px; } } @media (max-width:1280px) { .inside_product_details .product_details .product_1 .product_box .info_box .title { font-size: 28px; } } @media (max-width:1024px) { .inside_product_details .product_details .product_1 .product_box .info_box .title { font-size: 24px; } } @media (max-width:768px) { .inside_product_details .product_details .product_1 .product_box .info_box .title { font-size: 22px; } } .inside_product_details .product_details .product_1 .product_box .info_box .line { width: 1.5em; height: 1px; margin: .8em 0; font-size: 42px; background: #eef0f2; } @media (max-width:1680px) { .inside_product_details .product_details .product_1 .product_box .info_box .line { font-size: 40px; } } @media (max-width:1440px) { .inside_product_details .product_details .product_1 .product_box .info_box .line { font-size: 34px; } } @media (max-width:1280px) { .inside_product_details .product_details .product_1 .product_box .info_box .line { font-size: 28px; } } @media (max-width:1024px) { .inside_product_details .product_details .product_1 .product_box .info_box .line { font-size: 24px; } } @media (max-width:768px) { .inside_product_details .product_details .product_1 .product_box .info_box .line { font-size: 22px; } } @media (max-width:1800px) { .inside_product_details .product_details .product_1 .product_box { width: 87.5%; } } @media (max-width:990px) { .inside_product_details .product_details .product_1 .product_box { width: 100%; } } .inside_product_details .product_details .product_2 { background: linear-gradient(#edf0f3, #f5f5f5 30%); } .inside_product_details .product_details .product_2 .product_box { padding-top: clamp(50px, 5.20833333vw, 100px); padding-bottom: clamp(50px, 5.20833333vw, 100px); } .inside_product_details .product_details .product_2 + .product_3 .product_box { padding-top: 0; } .inside_product_details .product_details .product_3 { background: #F5F5F5; } .inside_product_details .product_details .product_3 .product_box { padding-top: clamp(70px, 7.29166667vw, 140px); /* padding-bottom: clamp(90px, 9.375vw, 180px); */ } .inside_product_details .product_details .product_3 .product_box .product_head { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_product_details .product_details .product_3 .product_box .product_head .details_headline { width: auto; } .inside_product_details .product_details .product_3 .product_box .product_head .download_btn { width: auto; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .inside_product_details .product_details .product_3 .product_box .product_head .download_btn a { width: 100%; height: 40px; padding-left: clamp(10px, 1.04166667vw, 20px); padding-right: clamp(10px, 1.04166667vw, 20px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; grid-gap: 5px; border: 1px solid var(--color); --color: #0867d1; --active: #0867d1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_details .product_details .product_3 .product_box .product_head .download_btn a .icon { width: 16px; height: 13px; background: var(--active); -webkit-mask: url('../svg/icon_down3.svg') no-repeat center / cover; -moz-mask: url('../svg/icon_down3.svg') no-repeat center / cover; mask: url('../svg/icon_down3.svg') no-repeat center / cover; } .inside_product_details .product_details .product_3 .product_box .product_head .download_btn a .word { font-size: 14px; color: var(--active); white-space: nowrap; } @media (max-width:1280px) { .inside_product_details .product_details .product_3 .product_box .product_head .download_btn a .word { font-size: 13px; } } @media (max-width:1024px) { .inside_product_details .product_details .product_3 .product_box .product_head .download_btn a .word { font-size: 12px; } } .inside_product_details .product_details .product_3 .product_box .product_head .download_btn a .icon, .inside_product_details .product_details .product_3 .product_box .product_head .download_btn a .word { -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_details .product_details .product_3 .product_box .product_head .download_btn a:hover { background: var(--color); --active: #FFF; } .inside_product_details .product_details .product_3 .product_box .product_center { width: 100%; height: auto; overflow: hidden; } .inside_product_details .product_details .product_3 .product_box .product_center .product_table { width: 100%; height: auto; margin-top: clamp(20px, 2.08333333vw, 40px); overflow: hidden; } .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item { width: 100%; height: auto; /*display: grid;*/ /*grid-template-columns: repeat(8, 1fr);*/ border-bottom: 1px solid #E8EAED; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item .one { /*width: 100%;*/ height: auto; /*padding: 10px;*/ flex: 1; border-left: 1px solid #E8EAED; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item .oneBox { padding: 10px; } .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item .one .title { font-size: 14px; color: #2c303d; } /*.inside_product_details .product_details .product_3 .product_box .product_center .product_table .item .one:nth-child(4) .oneBox {*/ /* max-width: 74px;*/ /* word-wrap: break-word;*/ /*}*/ @media (max-width:1280px) { .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item .one .title { font-size: 13px; } } @media (max-width:1024px) { .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item .one .title { font-size: 12px; } } .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item .one:first-child .oneBox { grid-column: span 2; border: 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; grid-gap: 10px; } .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item .one:first-child .checked-item { width: 16px; height: 16px; font-size: 0; } .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item .one:first-child .checked-item .layui-form-checkbox[lay-skin=primary] { width: 100%; height: 100% !important; min-width: 16px; min-height: 16px; padding: 0; border: 2px solid #cdcdcd !important; --color: transparent; } .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item .one:first-child .checked-item .layui-form-checkbox[lay-skin=primary] i { width: 100%; height: 100%; position: relative; z-index: 1; border-radius: 0; border: 0; background: var(--color); -webkit-mask: url('../svg/icon_yes.svg') no-repeat center; -moz-mask: url('../svg/icon_yes.svg') no-repeat center; mask: url('../svg/icon_yes.svg') no-repeat center; } .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item .one:first-child .checked-item .layui-form-checkbox[lay-skin=primary] i::before { display: none; } .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item .one:first-child .checked-item .layui-form-checkbox[lay-skin=primary].layui-form-checked { border-color: var(--color) !important; --color: #2c303d; } .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item .one:first-child .title, .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item .one:first-child .title a { font-size: 16px; color: #2c303d; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1440px) { .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item .one:first-child .title, .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item .one:first-child .title a { font-size: 14px; } } @media (max-width:1024px) { .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item .one:first-child .title, .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item .one:first-child .title a { font-size: 13px; } } @media (max-width:768px) { .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item .one:first-child .title, .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item .one:first-child .title a { font-size: 12px; } } .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item .one:first-child .title:hover, .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item .one:first-child .title a:hover { color: #f39800; } .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item:first-child { background: #f0f1f3; border-top: 2px solid #0867d1; } .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item:first-child .one .title { font-family: 'Rubik', 'ff800'; } .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item:first-child .one:first-child { background: #0867d1; } .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item:first-child .one:first-child .title, .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item:first-child .one:first-child .title a { font-size: 16px; font-family: 'Rubik', 'ff800'; color: #FFF; } @media (max-width:1440px) { .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item:first-child .one:first-child .title, .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item:first-child .one:first-child .title a { font-size: 14px; } } @media (max-width:1024px) { .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item:first-child .one:first-child .title, .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item:first-child .one:first-child .title a { font-size: 13px; } } @media (max-width:768px) { .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item:first-child .one:first-child .title, .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item:first-child .one:first-child .title a { font-size: 12px; } } .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item:first-child ~ .item:hover { background: #e5ecf3; } .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item:first-child ~ .item:hover .one { border-color: #FFF; } .inside_product_details .product_details .product_3 .product_box .product_center .product_table .item:first-child ~ .item:hover .one .checked-item .layui-form-checkbox[lay-skin=primary].layui-form-checked { --color: #0867d1; } .inside_product_details .product_details .product_3 .product_box .paging_box { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } @media (max-width:990px) { .inside_product_details .product_details .product_3 .product_box .product_center { overflow-x: auto; } .inside_product_details .product_details .product_3 .product_box .product_center .product_table { width: 1024px; } } /* 搴曢儴 娣诲姞瀵规瘮 */ .fixed_product_contrast { width: 100%; height: auto; position: fixed; bottom: 0; left: 0; z-index: 20; transform: translateY(100%); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .fixed_product_contrast.active { transform: translateY(0); } .fixed_product_contrast .contrast_box { width: 100%; height: auto; background: #FFF; position: relative; z-index: 1; } .fixed_product_contrast .contrast_box .contrast_title { width: 100%; height: auto; padding: 0 20px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; position: relative; z-index: 1; overflow: hidden; } .fixed_product_contrast .contrast_box .contrast_title .title { width: auto; height: 48px; position: relative; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .fixed_product_contrast .contrast_box .contrast_title .title .word { margin-right: 20px; font-size: 20px; font-family: 'Rubik', 'ff800'; color: #FFF; } @media (max-width:1680px) { .fixed_product_contrast .contrast_box .contrast_title .title .word { font-size: 18px; } } @media (max-width:1440px) { .fixed_product_contrast .contrast_box .contrast_title .title .word { font-size: 17px; } } @media (max-width:1280px) { .fixed_product_contrast .contrast_box .contrast_title .title .word { font-size: 16px; } } @media (max-width:1024px) { .fixed_product_contrast .contrast_box .contrast_title .title .word { font-size: 15px; } } @media (max-width:768px) { .fixed_product_contrast .contrast_box .contrast_title .title .word { font-size: 14px; } } .fixed_product_contrast .contrast_box .contrast_title .title .number { width: 30px; height: 30px; background: rgba(255, 255, 255, 0.1); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; font-size: 16px; font-family: 'Rubik', 'ff800'; color: #FFF; border-radius: 50%; } @media (max-width:1440px) { .fixed_product_contrast .contrast_box .contrast_title .title .number { font-size: 14px; } } @media (max-width:1024px) { .fixed_product_contrast .contrast_box .contrast_title .title .number { font-size: 13px; } } @media (max-width:768px) { .fixed_product_contrast .contrast_box .contrast_title .title .number { font-size: 12px; } } .fixed_product_contrast .contrast_box .contrast_title .remove { position: relative; z-index: 5; font-size: 14px; color: #2c303d; opacity: .5; cursor: pointer; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .fixed_product_contrast .contrast_box .contrast_title .remove { font-size: 13px; } } @media (max-width:1024px) { .fixed_product_contrast .contrast_box .contrast_title .remove { font-size: 12px; } } .fixed_product_contrast .contrast_box .contrast_title .remove:hover { opacity: 1; } .fixed_product_contrast .contrast_box .contrast_title::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; -webkit-mask: url('../svg/icon_title.svg') no-repeat top / 100% 100%; -moz-mask: url('../svg/icon_title.svg') no-repeat center / 100% 100%; mask: url('../svg/icon_title.svg') no-repeat center / 100% 100%; background: linear-gradient(to right, #0967d1 30%, #b3a3ce, #ff7537); } .fixed_product_contrast .contrast_box .contrast_main { width: 100%; height: auto; padding: 20px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; grid-gap: 20px; } .fixed_product_contrast .contrast_box .contrast_main .menu_box { width: auto; height: auto; flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; } .fixed_product_contrast .contrast_box .contrast_main .menu_box .item { width: 100%; height: auto; padding: 10px; background: #f5f5f5; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; grid-gap: 10px; overflow: hidden; } .fixed_product_contrast .contrast_box .contrast_main .menu_box .item .img { width: 80px; height: 80px; background: #FFF; } .fixed_product_contrast .contrast_box .contrast_main .menu_box .item .info { flex: 1; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .fixed_product_contrast .contrast_box .contrast_main .menu_box .item .info .close { width: 11px; height: 11px; position: absolute; right: 0; top: 0; z-index: 5; cursor: pointer; } .fixed_product_contrast .contrast_box .contrast_main .menu_box .item .info .close i { font-size: 11px; } .fixed_product_contrast .contrast_box .contrast_main .menu_box .item .info .title { font-size: 18px; color: #2c303d; } @media (max-width:1440px) { .fixed_product_contrast .contrast_box .contrast_main .menu_box .item .info .title { font-size: 16px; } } @media (max-width:1024px) { .fixed_product_contrast .contrast_box .contrast_main .menu_box .item .info .title { font-size: 14px; } } @media (max-width:768px) { .fixed_product_contrast .contrast_box .contrast_main .menu_box .item .info .title { font-size: 13px; } } .fixed_product_contrast .contrast_box .contrast_main .menu_box .item:hover { background: #f2f7fd; } .fixed_product_contrast .contrast_box .contrast_main .function_btn { width: 14.285714285714285714285714285714%; } .fixed_product_contrast .contrast_box .contrast_main .function_btn .item { width: 100%; height: 40px; line-height: 40px; } .fixed_product_contrast .contrast_box .contrast_main .function_btn .item a { width: 100%; height: 100%; display: block; text-align: center; font-size: 16px; color: #f39800; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1440px) { .fixed_product_contrast .contrast_box .contrast_main .function_btn .item a { font-size: 14px; } } @media (max-width:1024px) { .fixed_product_contrast .contrast_box .contrast_main .function_btn .item a { font-size: 13px; } } @media (max-width:768px) { .fixed_product_contrast .contrast_box .contrast_main .function_btn .item a { font-size: 12px; } } .fixed_product_contrast .contrast_box .contrast_main .function_btn .link_btn a { background: #f39800; color: #FFF; } .fixed_product_contrast .contrast_box .contrast_main .function_btn .link_btn a:hover { background: #003281; } .fixed_product_contrast .contrast_box .contrast_main .function_btn .remove_btn { margin-top: 10px; } .fixed_product_contrast .contrast_box .contrast_main .function_btn .remove_btn a:hover { background: #2c303d; color: #FFF; } .fixed_product_contrast .contrast_box .icon_hot { width: 30px; height: 30px; position: absolute; right: 0; bottom: 0; z-index: 1; } .fixed_product_contrast .contrast_box .icon_hot i { background: #f4f4f4; } @media (max-width:1280px) { .fixed_product_contrast .contrast_box .contrast_main .menu_box { grid-template-columns: repeat(3, 1fr); } } @media (max-width:768px) { .fixed_product_contrast .contrast_box .contrast_main { display: block; } .fixed_product_contrast .contrast_box .contrast_main .function_btn { width: 100%; margin-top: 20px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .fixed_product_contrast .contrast_box .contrast_main .function_btn .item { width: 100px; } .fixed_product_contrast .contrast_box .contrast_main .function_btn .remove_btn { margin: 0 0 0 10px; } .fixed_product_contrast .contrast_box .contrast_main .function_btn .remove_btn a { background: #2c303d; color: #FFF; } } @media (max-width:480px) { .fixed_product_contrast .contrast_box .contrast_title::after { width: 200%; } .fixed_product_contrast .contrast_box .contrast_main { padding: 10px; } .fixed_product_contrast .contrast_box .contrast_main .menu_box { width: 100%; height: auto; } .fixed_product_contrast .contrast_box .contrast_main .menu_box .item { display: block; position: relative; z-index: 1; padding: 5px; } .fixed_product_contrast .contrast_box .contrast_main .menu_box .item .img { margin: 0 auto; } .fixed_product_contrast .contrast_box .contrast_main .menu_box .item .info { width: 100%; position: static; display: block; } .fixed_product_contrast .contrast_box .contrast_main .menu_box .item .info .title { text-align: center; display: none; } .fixed_product_contrast .contrast_box .contrast_main .menu_box .item .info .close { right: 5px; top: 5px; } } /* 涓婁笅鏉垮潡 */ .inside_auto_text { width: 100%; height: auto; overflow: hidden; } .inside_auto_text .block_box { width: 100%; height: auto; /* padding-top: clamp(50px, 5.20833333vw, 100px); padding-bottom: clamp(50px, 5.20833333vw, 100px); */ padding-top: 30px; padding-bottom: 30px; } .inside_auto_text .block_box .block_content { width: 100%; height: auto; } .inside_auto_text .block_box .block_content .text_details { margin: clamp(1.25rem, 0.536rem + 1.12vw, 1.875rem) 0 0; } .inside_auto_text .block_box .images { width: 100%; height: auto; margin: 20px 0 0; font-size: 0; overflow: hidden; } @media (max-width:990px) { .inside_auto_text .block_box { display: block; } .inside_auto_text .block_box .block_content { width: 100%; } .inside_auto_text .block_box .images { width: 100%; margin: 30px 0 0; } } .inside_auto_text.active .block_box { -webkit-flex-direction: row-reverse; -moz-flex-direction: row-reverse; -ms-flex-direction: row-reverse; -o-flex-direction: row-reverse; flex-direction: row-reverse; } /* 宸﹀彸鏉垮潡 */ .inside_auto_block { width: 100%; height: auto; overflow: hidden; } .inside_auto_block .block_box { width: 100%; height: auto; padding-top: clamp(50px, 5.20833333vw, 100px); padding-bottom: clamp(50px, 5.20833333vw, 100px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; gap: 5%; } .inside_auto_block .block_box .block_content { width: 100%; height: auto; flex: 1; } .inside_auto_block .block_box .block_content .text_details { margin: clamp(1.25rem, 0.536rem + 1.12vw, 1.875rem) 0 0; } .inside_auto_block .block_box .images { width: 55%; height: auto; font-size: 0; overflow: hidden; } .inside_auto_block .block_box .images img { width: 100%; } @media (max-width:990px) { .inside_auto_block .block_box { display: block; } .inside_auto_block .block_box .block_content { width: 100%; } .inside_auto_block .block_box .images { width: 100%; margin: 30px 0 0; } } .inside_auto_block.active .block_box { -webkit-flex-direction: row-reverse; -moz-flex-direction: row-reverse; -ms-flex-direction: row-reverse; -o-flex-direction: row-reverse; flex-direction: row-reverse; } /* 璇︽儏 */ .inside_product_function { width: 100%; height: auto; margin-top: clamp(22.5px, 2.34375vw, 45px); } .inside_product_function .product_box { width: 100%; height: auto; padding-left: clamp(25px, 2.60416667vw, 50px); padding-right: clamp(25px, 2.60416667vw, 50px); padding-top: clamp(12px, 1.25vw, 24px); padding-bottom: clamp(12px, 1.25vw, 24px); background: linear-gradient(120deg, #e3e8ee 50%, #e5e0d6); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_product_function .product_box .add_btn { width: auto; height: auto; } .inside_product_function .product_box .add_btn a { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; grid-gap: 5px; --color: #9a9ea7; } .inside_product_function .product_box .add_btn a .layui-icon, .inside_product_function .product_box .add_btn a .word { font-size: 14px; color: var(--color); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .inside_product_function .product_box .add_btn a .layui-icon, .inside_product_function .product_box .add_btn a .word { font-size: 13px; } } @media (max-width:1024px) { .inside_product_function .product_box .add_btn a .layui-icon, .inside_product_function .product_box .add_btn a .word { font-size: 12px; } } .inside_product_function .product_box .add_btn a:hover, .inside_product_function .product_box .add_btn a.active { --color: #f39800; } .inside_product_function .product_box .swiper_box { width: 17%; height: auto; -webkit-box-self: center; -ms-align-self: center; -webkit-align-self: center; align-self: center; margin-left: clamp(25px, 2.60416667vw, 50px); margin-right: clamp(65px, 6.77083333vw, 130px); position: relative; overflow: hidden; } .inside_product_function .product_box .swiper_box .icon { width: 20px; height: 20px; position: absolute; right: 0; top: 0; z-index: 10; pointer-events: none; opacity: .5; } .inside_product_function .product_box .swiper_box .swiper-slide { width: 100%; height: auto; position: relative; z-index: 1; } .inside_product_function .product_box .swiper_box .swiper-slide.active { z-index: 5; } .inside_product_function .product_box .swiper_box .swiper-slide .pb { padding-bottom: 120%; } .inside_product_function .product_box .swiper_box .swiper-slide img { pointer-events: initial; cursor: pointer; } .inside_product_function .product_box .swiper_tabs { width: 48px; height: auto; overflow: hidden; } .inside_product_function .product_box .swiper_tabs .swiper-slide { width: 100%; height: auto; position: relative; z-index: 1; background: #FFF; cursor: pointer; overflow: hidden; } .inside_product_function .product_box .swiper_tabs .swiper-slide::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; border: 2px solid #cfd4db; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_function .product_box .swiper_tabs .swiper-slide.active::after { border-color: #f39800; } .inside_product_function .product_box .swiper_tabs .swiper-slide .pb { padding-bottom: 100%; } .inside_product_function .product_box .line { width: 2px; height: auto; margin-left: clamp(12px, 1.25vw, 24px); margin-right: clamp(20px, 2.08333333vw, 40px); background: #cfd4db; } .inside_product_function .product_box .info_box { width: auto; height: auto; flex: 1; -webkit-box-self: center; -ms-align-self: center; -webkit-align-self: center; align-self: center; } .inside_product_function .product_box .info_box .title { width: 100%; height: auto; font-size: 30px; font-family: 'Rubik', 'ff200'; color: #2c303d; } @media (max-width:1680px) { .inside_product_function .product_box .info_box .title { font-size: 26px; } } @media (max-width:1440px) { .inside_product_function .product_box .info_box .title { font-size: 24px; } } @media (max-width:1280px) { .inside_product_function .product_box .info_box .title { font-size: 22px; } } @media (max-width:1024px) { .inside_product_function .product_box .info_box .title { font-size: 20px; } } @media (max-width:768px) { .inside_product_function .product_box .info_box .title { font-size: 18px; } } .inside_product_function .product_box .info_box .details { width: 100%; height: auto; margin-top: 1em; font-size: 16px; font-family: 'Rubik', 'ff200'; color: #2c303d; line-height: 1.5; } @media (max-width:1440px) { .inside_product_function .product_box .info_box .details { font-size: 14px; } } @media (max-width:1024px) { .inside_product_function .product_box .info_box .details { font-size: 13px; } } @media (max-width:768px) { .inside_product_function .product_box .info_box .details { font-size: 12px; } } .inside_product_function .product_box .info_box .function_btn { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; grid-gap: 20px; } .inside_product_function .product_box .info_box .function_btn .text_more { width: auto; } .inside_product_function .product_box .info_box .function_btn .text_more a { min-width: 140px; height: 40px; padding: 0 20px; border: 2px solid #cfd4db; --color: #2c303d; } .inside_product_function .product_box .info_box .function_btn .text_more a .word { font-size: 16px; font-family: 'Rubik', 'ff700'; } @media (max-width:1440px) { .inside_product_function .product_box .info_box .function_btn .text_more a .word { font-size: 14px; } } @media (max-width:1024px) { .inside_product_function .product_box .info_box .function_btn .text_more a .word { font-size: 13px; } } @media (max-width:768px) { .inside_product_function .product_box .info_box .function_btn .text_more a .word { font-size: 12px; } } .inside_product_function .product_box .info_box .function_btn .text_more a:hover { border-color: #f39800; background: #f39800; --color: #FFF; } .inside_product_function .product_box .info_box .function_btn .text_more a:hover .word { flex: 1; } @media (max-width:768px) { .inside_product_function .product_box { display: block; padding: 20px 15px; } .inside_product_function .product_box .swiper_box { width: 100%; max-width: 200px; margin: 0 auto; } .inside_product_function .product_box .swiper_tabs { width: 100%; max-width: 300px; margin: 0 auto; height: auto; } .inside_product_function .product_box .line { width: 100%; height: 1px; margin: 20px 0; } .inside_product_function .product_box .info_box .function_btn { grid-gap: 10px; } .inside_product_function .product_box .info_box .function_btn .text_more a { min-width: 100px; height: 36px; border-width: 1px; border-color: #f39800; background: #f39800; --color: #FFF; } } /* 瑙嗛鏉垮潡 */ .inside_product_video { width: 100%; height: auto; overflow: hidden; } .inside_product_video .product_video { width: 100%; height: auto; padding-top: clamp(50px, 5.20833333vw, 100px); padding-bottom: clamp(50px, 5.20833333vw, 100px); } @media (max-width: 1800px) { .inside_product_video .product_video { width: 87.5%; } } @media (max-width: 990px) { .inside_product_video .product_video { width: 100%; } } .inside_product_video .product_video .text_details { width: 100%; height: auto; margin: 30px 0 0; } .inside_product_video .product_video .video_boxx { width: 100%; height: auto; margin-top: clamp(30px, 3.125vw, 60px); position: relative; z-index: 1; overflow: hidden; } .inside_product_video .product_video .video_boxx img, .inside_product_video .product_video .video_boxx video{display: block} .inside_product_video .product_video .video_boxx img{ display: none;} .inside_product_video .product_video .video_boxx .play { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 5; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; pointer-events: none; opacity: 0; display: none; } .inside_product_video .product_video .video_boxx .play .icon { width: clamp(3.75rem, calc(clamp(3.75rem, -0.574rem + 9.01vw, 5rem)), 5rem); height: clamp(3.75rem, calc(clamp(3.75rem, -0.574rem + 9.01vw, 5rem)), 5rem); border-radius: 50%; background: rgba(255, 255, 255, 0.1); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .inside_product_video .product_video .video_boxx .play .icon i { font-size: clamp(1.25rem, 0.833rem + 0.87vw, 1.875rem); color: #FFF; } .inside_product_video .product_video .video_boxx .pb { padding-bottom: 56.25%; z-index: 1; } .inside_product_video .product_video .video_boxx img, .inside_product_video .product_video .video_boxx video { width: 100%; height: 100%; object-fit: cover; } @media (max-width:990px) { .inside_product_video .product_video .video_boxx .play { pointer-events: initial; opacity: 1; } } .inside_product_video.active .product_video { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_product_video.active .product_video .video_text { width: 40%; } .inside_product_video.active .product_video .video_boxx { width: 50%; margin: 0; } @media (max-width:990px) { .inside_product_video.active .product_video { display: block; } .inside_product_video.active .product_video .video_text { width: 100%; } .inside_product_video.active .product_video .video_boxx { width: 100%; margin: 30px 0 0; } } @media (max-width:1800px) { .inside_product_details .inside_auto_text .block_box, .inside_product_details .inside_auto_block .block_box, .inside_product_details .inside_product_video .product_video { width: 87.5%; } } @media (max-width:990px) { .inside_product_details .inside_auto_text .block_box, .inside_product_details .inside_auto_block .block_box, .inside_product_details .inside_product_video .product_video { width: 100%; } } /* 浜у搧瀵规瘮 */ .inside_contrast { width: 100%; height: auto; padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(63px, 6.5625vw, 126px); } .inside_contrast .contrast_box { width: 100%; height: auto; background: #FFF; position: relative; z-index: 1; } .inside_contrast .contrast_box .contrast_head { width: 100%; height: auto; overflow: hidden; } .inside_contrast .contrast_box .contrast_head .title_box { width: 100%; height: auto; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; overflow: hidden; } .inside_contrast .contrast_box .contrast_head .title_box .title { width: 20%; height: auto; padding: 20px; position: relative; z-index: 5; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_contrast .contrast_box .contrast_head .title_box .title .word { font-size: 30px; font-family: 'Rubik', 'ff700'; color: #FFF; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1680px) { .inside_contrast .contrast_box .contrast_head .title_box .title .word { font-size: 26px; } } @media (max-width:1440px) { .inside_contrast .contrast_box .contrast_head .title_box .title .word { font-size: 24px; } } @media (max-width:1280px) { .inside_contrast .contrast_box .contrast_head .title_box .title .word { font-size: 22px; } } @media (max-width:1024px) { .inside_contrast .contrast_box .contrast_head .title_box .title .word { font-size: 20px; } } @media (max-width:768px) { .inside_contrast .contrast_box .contrast_head .title_box .title .word { font-size: 18px; } } .inside_contrast .contrast_box .contrast_head .title_box .title .icon { width: .83em; font-size: 0; margin-right: 10px; font-size: 30px; } @media (max-width:1680px) { .inside_contrast .contrast_box .contrast_head .title_box .title .icon { font-size: 26px; } } @media (max-width:1440px) { .inside_contrast .contrast_box .contrast_head .title_box .title .icon { font-size: 24px; } } @media (max-width:1280px) { .inside_contrast .contrast_box .contrast_head .title_box .title .icon { font-size: 22px; } } @media (max-width:1024px) { .inside_contrast .contrast_box .contrast_head .title_box .title .icon { font-size: 20px; } } @media (max-width:768px) { .inside_contrast .contrast_box .contrast_head .title_box .title .icon { font-size: 18px; } } .inside_contrast .contrast_box .contrast_head .title_box .bg { width: auto; height: auto; flex: 1; position: relative; z-index: 5; } .inside_contrast .contrast_box .contrast_head .title_box .bg::after { content: ''; width: 150%; height: 65%; position: absolute; bottom: -5%; left: 0; z-index: 1; background: #FFF; transform: skewX(-45deg); border-radius: 5px 0 0 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_contrast .contrast_box .contrast_head .title_box::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background: linear-gradient(to right, #0967d1 30%, #b3a3ce, #ff7537); } .inside_contrast .contrast_box .contrast_head .contrast_main { width: 100%; height: auto; padding-left: clamp(45px, 4.6875vw, 90px); padding-right: clamp(45px, 4.6875vw, 90px); padding-top: clamp(10px, 1.04166667vw, 20px); padding-bottom: clamp(10px, 1.04166667vw, 20px); } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content { width: 100%; height: auto; position: relative; z-index: 1; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_input { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_input .layui-form-checkbox[lay-skin=primary] { width: 16px; height: 16px !important; min-width: 16px; min-height: 16px; margin-right: 10px; padding: 0; border: 2px solid #cdcdcd !important; --color: transparent; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_input .layui-form-checkbox[lay-skin=primary] i { width: 100%; height: 100%; position: relative; z-index: 1; border-radius: 0; border: 0; background: var(--color); -webkit-mask: url('../svg/icon_yes.svg') no-repeat center; -moz-mask: url('../svg/icon_yes.svg') no-repeat center; mask: url('../svg/icon_yes.svg') no-repeat center; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_input .layui-form-checkbox[lay-skin=primary] i::before { display: none; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_input .title { font-size: 16px; color: #2c303d; opacity: .5; } @media (max-width:1440px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_input .title { font-size: 14px; } } @media (max-width:1024px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_input .title { font-size: 13px; } } @media (max-width:768px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_input .title { font-size: 12px; } } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_input .layui-form-checkbox[lay-skin=primary].layui-form-checked { border-color: var(--color) !important; --color: #f39800; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_input .layui-form-checkbox[lay-skin=primary].layui-form-checked ~ .title { opacity: 1; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list { width: 100%; height: auto; padding-top: clamp(15px, 1.5625vw, 30px); padding-bottom: clamp(25px, 2.60416667vw, 50px); border-bottom: 1px solid #f0f1f4; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .headline { width: 100%; height: auto; font-size: 16px; font-family: 'Rubik', 'ff700'; color: #2c303d; } @media (max-width:1440px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .headline { font-size: 14px; } } @media (max-width:1024px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .headline { font-size: 13px; } } @media (max-width:768px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .headline { font-size: 12px; } } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu { width: 100%; height: auto; grid-column: span 3; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item { width: 100%; height: auto; padding: 20px; background: #f6f7fb; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .function_btn { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; cursor: pointer; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .function_btn .collect { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; --color: #2c303d; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .function_btn .collect .icon { margin-right: 5px; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .function_btn .collect .icon i, .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .function_btn .collect .title { font-size: 14px; color: var(--color); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .function_btn .collect .icon i, .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .function_btn .collect .title { font-size: 13px; } } @media (max-width:1024px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .function_btn .collect .icon i, .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .function_btn .collect .title { font-size: 12px; } } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .function_btn .collect.active, .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .function_btn .collect:hover { --color: #f39800; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .function_btn .close { width: 16px; height: 16px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; font-size: 14px; color: #2c303d; cursor: pointer; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .function_btn .close { font-size: 13px; } } @media (max-width:1024px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .function_btn .close { font-size: 12px; } } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .function_btn .close:hover { transform: rotate(90deg); -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); color: #f39800; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .img { width: 70%; height: auto; margin: 0 auto; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .img .pb { padding-bottom: 120%; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .info { width: 100%; height: auto; margin-top: 10px; text-align: center; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .info .title { width: 100%; height: auto; font-size: 18px; color: #2c303d; } @media (max-width:1440px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .info .title { font-size: 16px; } } @media (max-width:1024px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .info .title { font-size: 14px; } } @media (max-width:768px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .info .title { font-size: 13px; } } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .info .details { width: 100%; height: auto; font-size: 14px; font-family: 'Rubik', 'ff200'; color: #2c303d; } @media (max-width:1280px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .info .details { font-size: 13px; } } @media (max-width:1024px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .info .details { font-size: 12px; } } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item.active { background: #F2F7FD; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .add_product { width: 100%; height: auto; padding: 20px; background: #f6f7fb; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .add_product a { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .add_product a .icon { width: 1em; height: 1em; font-size: 48px; position: relative; z-index: 1; } @media (max-width:1680px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .add_product a .icon { font-size: 42px; } } @media (max-width:1440px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .add_product a .icon { font-size: 36px; } } @media (max-width:1280px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .add_product a .icon { font-size: 28px; } } @media (max-width:1024px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .add_product a .icon { font-size: 24px; } } @media (max-width:768px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .add_product a .icon { font-size: 22px; } } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .add_product a .icon::before, .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .add_product a .icon::after { content: ''; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); background: #cecfd5; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .add_product a .icon::before { width: 2px; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .add_product a .icon::after { height: 2px; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .add_product a .title { width: 100%; height: auto; text-align: center; margin-top: clamp(10px, 1.04166667vw, 20px); font-size: 16px; color: #2c303d; opacity: .4; } @media (max-width:1440px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .add_product a .title { font-size: 14px; } } @media (max-width:1024px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .add_product a .title { font-size: 13px; } } @media (max-width:768px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .add_product a .title { font-size: 12px; } } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu *:nth-child(3) ~ * { display: none; } .inside_contrast .contrast_box .contrast_head.active { box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } .inside_contrast .contrast_box .contrast_head.active .title_box .title { padding: 10px 20px; } .inside_contrast .contrast_box .contrast_head.active .title_box .title .icon, .inside_contrast .contrast_box .contrast_head.active .title_box .title .word { font-size: 20px; } @media (max-width:1680px) { .inside_contrast .contrast_box .contrast_head.active .title_box .title .icon, .inside_contrast .contrast_box .contrast_head.active .title_box .title .word { font-size: 18px; } } @media (max-width:1440px) { .inside_contrast .contrast_box .contrast_head.active .title_box .title .icon, .inside_contrast .contrast_box .contrast_head.active .title_box .title .word { font-size: 17px; } } @media (max-width:1280px) { .inside_contrast .contrast_box .contrast_head.active .title_box .title .icon, .inside_contrast .contrast_box .contrast_head.active .title_box .title .word { font-size: 16px; } } @media (max-width:1024px) { .inside_contrast .contrast_box .contrast_head.active .title_box .title .icon, .inside_contrast .contrast_box .contrast_head.active .title_box .title .word { font-size: 15px; } } @media (max-width:768px) { .inside_contrast .contrast_box .contrast_head.active .title_box .title .icon, .inside_contrast .contrast_box .contrast_head.active .title_box .title .word { font-size: 14px; } } .inside_contrast .contrast_box .contrast_head.active .title_box .bg::after { height: 80%; } @media (max-width:1024px) { .inside_contrast .contrast_box .contrast_head .contrast_main { padding: 20px; } } @media (max-width:768px) { .inside_contrast .contrast_box .contrast_head .title_box .title { width: 100%; padding: 15px; -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .inside_contrast .contrast_box .contrast_head .title_box .bg { display: none; } .inside_contrast .contrast_box .contrast_head .contrast_main { padding: 20px 15px; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu { grid-template-columns: 100%; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; -ms-flex-wrap: wrap; padding: 10px; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .function_btn { width: 100%; margin-bottom: 10px; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .img { width: 80px; } .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .info { margin: 0; padding-left: 20px; flex: 1; text-align: left; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } } @media (max-width:480px) { .inside_contrast .contrast_box .contrast_head .contrast_main .contrast_content .contrast_list .menu .item .img { width: 54px; } } .inside_contrast .contrast_box .gs_box { width: 100%; height: 0; } .inside_contrast .contrast_box .contrast_fixed { width: 100%; height: auto; position: relative; top: -200px; z-index: 20; z-index: 10; background: #FFF; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; overflow: hidden; transition: opacity 0.2s ease-out; } .inside_contrast .contrast_box .contrast_fixed .title_box { width: 100%; height: auto; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; overflow: hidden; } .inside_contrast .contrast_box .contrast_fixed .title_box .title { width: 20%; height: auto; padding: 10px 20px; position: relative; z-index: 5; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_contrast .contrast_box .contrast_fixed .title_box .title .word { margin-right: 10px; font-size: 20px; font-family: 'Rubik', 'ff700'; color: #FFF; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1680px) { .inside_contrast .contrast_box .contrast_fixed .title_box .title .word { font-size: 18px; } } @media (max-width:1440px) { .inside_contrast .contrast_box .contrast_fixed .title_box .title .word { font-size: 17px; } } @media (max-width:1280px) { .inside_contrast .contrast_box .contrast_fixed .title_box .title .word { font-size: 16px; } } @media (max-width:1024px) { .inside_contrast .contrast_box .contrast_fixed .title_box .title .word { font-size: 15px; } } @media (max-width:768px) { .inside_contrast .contrast_box .contrast_fixed .title_box .title .word { font-size: 14px; } } .inside_contrast .contrast_box .contrast_fixed .title_box .title .number { width: 30px; height: 30px; background: rgba(255, 255, 255, 0.1); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; font-size: 16px; font-family: 'Rubik', 'ff800'; color: #FFF; border-radius: 50%; } @media (max-width:1440px) { .inside_contrast .contrast_box .contrast_fixed .title_box .title .number { font-size: 14px; } } @media (max-width:1024px) { .inside_contrast .contrast_box .contrast_fixed .title_box .title .number { font-size: 13px; } } @media (max-width:768px) { .inside_contrast .contrast_box .contrast_fixed .title_box .title .number { font-size: 12px; } } .inside_contrast .contrast_box .contrast_fixed .title_box .bg { width: auto; height: auto; flex: 1; position: relative; z-index: 5; } .inside_contrast .contrast_box .contrast_fixed .title_box .bg::after { content: ''; width: 150%; height: 85%; position: absolute; bottom: -5%; left: 0; z-index: 1; background: #FFF; transform: skewX(-45deg); border-radius: 5px 0 0 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_contrast .contrast_box .contrast_fixed .title_box::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background: linear-gradient(to right, #0967d1 30%, #b3a3ce, #ff7537); } .inside_contrast .contrast_box .contrast_fixed .contrast_main { width: 100%; height: auto; margin-top: -30px; padding-left: clamp(45px, 4.6875vw, 90px); padding-right: clamp(45px, 4.6875vw, 90px); padding-top: clamp(10px, 1.04166667vw, 20px); padding-bottom: clamp(10px, 1.04166667vw, 20px); } .inside_contrast .contrast_box .contrast_fixed .contrast_main .contrast_content { width: 100%; height: auto; position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; } .inside_contrast .contrast_box .contrast_fixed .contrast_main .contrast_content .contrast_input { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .inside_contrast .contrast_box .contrast_fixed .contrast_main .contrast_content .contrast_input .layui-form-checkbox[lay-skin=primary] { width: 16px; height: 16px !important; min-width: 16px; min-height: 16px; margin-right: 10px; padding: 0; border: 2px solid #cdcdcd !important; --color: transparent; } .inside_contrast .contrast_box .contrast_fixed .contrast_main .contrast_content .contrast_input .layui-form-checkbox[lay-skin=primary] i { width: 100%; height: 100%; position: relative; z-index: 1; border-radius: 0; border: 0; background: var(--color); -webkit-mask: url('../svg/icon_yes.svg') no-repeat center; -moz-mask: url('../svg/icon_yes.svg') no-repeat center; mask: url('../svg/icon_yes.svg') no-repeat center; } .inside_contrast .contrast_box .contrast_fixed .contrast_main .contrast_content .contrast_input .layui-form-checkbox[lay-skin=primary] i::before { display: none; } .inside_contrast .contrast_box .contrast_fixed .contrast_main .contrast_content .contrast_input .title { font-size: 16px; color: #2c303d; opacity: .5; } @media (max-width:1440px) { .inside_contrast .contrast_box .contrast_fixed .contrast_main .contrast_content .contrast_input .title { font-size: 14px; } } @media (max-width:1024px) { .inside_contrast .contrast_box .contrast_fixed .contrast_main .contrast_content .contrast_input .title { font-size: 13px; } } @media (max-width:768px) { .inside_contrast .contrast_box .contrast_fixed .contrast_main .contrast_content .contrast_input .title { font-size: 12px; } } .inside_contrast .contrast_box .contrast_fixed .contrast_main .contrast_content .contrast_input .layui-form-checkbox[lay-skin=primary].layui-form-checked { border-color: var(--color) !important; --color: #f39800; } .inside_contrast .contrast_box .contrast_fixed .contrast_main .contrast_content .contrast_input .layui-form-checkbox[lay-skin=primary].layui-form-checked ~ .title { opacity: 1; } .inside_contrast .contrast_box .contrast_fixed .contrast_main .contrast_content .item { width: 100%; height: auto; padding: 10px; background: #f5f5f5; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; grid-gap: 10px; overflow: hidden; } .inside_contrast .contrast_box .contrast_fixed .contrast_main .contrast_content .item .img { width: 80px; height: 80px; background: #FFF; } .inside_contrast .contrast_box .contrast_fixed .contrast_main .contrast_content .item .info { flex: 1; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .inside_contrast .contrast_box .contrast_fixed .contrast_main .contrast_content .item .info .close { width: 11px; height: 11px; position: absolute; right: 0; top: 0; z-index: 5; cursor: pointer; } .inside_contrast .contrast_box .contrast_fixed .contrast_main .contrast_content .item .info .close i { font-size: 11px; } .inside_contrast .contrast_box .contrast_fixed .contrast_main .contrast_content .item .info .title { font-size: 18px; color: #2c303d; } @media (max-width:1440px) { .inside_contrast .contrast_box .contrast_fixed .contrast_main .contrast_content .item .info .title { font-size: 16px; } } @media (max-width:1024px) { .inside_contrast .contrast_box .contrast_fixed .contrast_main .contrast_content .item .info .title { font-size: 14px; } } @media (max-width:768px) { .inside_contrast .contrast_box .contrast_fixed .contrast_main .contrast_content .item .info .title { font-size: 13px; } } .inside_contrast .contrast_box .contrast_fixed .contrast_main .contrast_content .item:hover { background: #f2f7fd; } .inside_contrast .contrast_box .contrast_fixed.active { opacity: 1; visibility: visible; } .inside_contrast .contrast_box .contrast_menuInfo { overflow: auto; } .inside_contrast .contrast_box .contrast_menu { width: 100%; min-width: 1000px; height: auto; padding-left: clamp(45px, 4.6875vw, 90px); padding-right: clamp(45px, 4.6875vw, 90px); padding-bottom: clamp(68px, 7.08333333vw, 136px); overflow: hidden; } .inside_contrast .contrast_box .contrast_menu .item { width: 100%; height: auto; padding-top: clamp(15px, 1.5625vw, 30px); padding-bottom: clamp(15px, 1.5625vw, 30px); display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; border-bottom: 1px solid #f0f1f4; } .inside_contrast .contrast_box .contrast_menu .item .title { width: 100%; height: auto; font-size: 16px; font-family: 'Rubik', 'ff300'; color: #2c303d; } @media (max-width:1440px) { .inside_contrast .contrast_box .contrast_menu .item .title { font-size: 14px; } } @media (max-width:1024px) { .inside_contrast .contrast_box .contrast_menu .item .title { font-size: 13px; } } @media (max-width:768px) { .inside_contrast .contrast_box .contrast_menu .item { opacity: 1; transform: none !important; } .inside_contrast .contrast_box .contrast_menu .item .title { font-size: 12px; } } .inside_contrast .contrast_box .contrast_menu .item .info { width: 100%; height: auto; grid-column: span 3; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } .inside_contrast .contrast_box .contrast_menu .item .info .one { width: 100%; height: auto; font-size: 16px; font-family: 'Rubik', 'ff300'; color: #2c303d; overflow: hidden; } @media (max-width:1440px) { .inside_contrast .contrast_box .contrast_menu .item .info .one { font-size: 14px; } } @media (max-width:1024px) { .inside_contrast .contrast_box .contrast_menu .item .info .one { font-size: 13px; } } @media (max-width:768px) { .inside_contrast .contrast_box .contrast_menu .item .info .one { font-size: 12px; } } .inside_contrast .contrast_box .contrast_menu .item .info .one .block_more a { background: transparent; border: 2px solid #F4F4F4; } .inside_contrast .contrast_box .contrast_menu .item .info .one .block_more a .word { color: #2c303d; } .inside_contrast .contrast_box .contrast_menu .item .info .one .block_more a .icon { background: #2c303d; } .inside_contrast .contrast_box .contrast_menu .item .info .one .block_more a:hover { background: #f39800; border-color: #f39800; } .inside_contrast .contrast_box .contrast_menu .item .info .one .block_more a:hover .word { color: #FFF; } .inside_contrast .contrast_box .contrast_menu .item .info .one .block_more a:hover .icon { background: #FFF; } .inside_contrast .contrast_box .contrast_menu .item:last-child { border: 0; padding-bottom: 0; } @media (max-width:768px) { .inside_contrast .contrast_box .contrast_menu { padding: 0 20px 20px; } .inside_contrast .contrast_box .contrast_menu .item .title { opacity: .5; } /*.inside_contrast .contrast_box .contrast_menu .item .info {*/ /* grid-template-columns: 100%;*/ /*}*/ /*.inside_contrast .contrast_box .contrast_menu .item:last-child .info {*/ /* grid-template-columns: repeat(3, 1fr);*/ /*}*/ } /*@media (max-width:480px) {*/ /* .inside_contrast .contrast_box .contrast_menu .item:last-child .info {*/ /* grid-template-columns: 100%;*/ /* }*/ /*}*/ /* ---------- */ /* ----- 鍐呴〉 鏈嶅姟 ----- */ /* 鏈嶅姟浜у搧鍖 */ .inside_service { width: 100%; height: auto; padding-top: 130px; background: linear-gradient(#f3f6f9, transparent clamp(130px, 20vh, 260px)); position: relative; z-index: 1; overflow: hidden; } @media (max-width:1366px) { .inside_service { padding-top: 120px; } } @media (max-width:990px) { .inside_service { padding-top: 60px; } } .inside_service .service_bg { width: 100%; max-width: 1920px; height: 100%; max-height: 100vh; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1; } .inside_service .service_bg .item { font-size: 0; position: absolute; } .inside_service .service_bg .first { width: min(15.9375vw, 306px); -webkit-aspect-ratio: 1.09285714; aspect-ratio: 1.09285714; left: 0; top: 25%; left: -5%; } .inside_service .service_bg .middle { width: min(36.5625vw, 702px); -webkit-aspect-ratio: 0.99574468; aspect-ratio: 0.99574468; left: 8%; } .inside_service .service_bg .last { width: min(21.302083333333332vw, 409px); -webkit-aspect-ratio: 0.99513382; aspect-ratio: 0.99513382; right: 15%; top: 45%; } .inside_service .navigation { padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(20px, 2.08333333vw, 40px); position: relative; z-index: 5; } .inside_service .service_1 { width: 100%; height: auto; position: relative; z-index: 5; overflow: hidden; } .inside_service .service_1 .service_box { width: 100%; height: auto; } .inside_service .service_1 .service_box .block_title .title, .inside_service .service_1 .service_box .block_title .subtitle, .inside_service .service_1 .service_box .block_title .details { color: #003281; } .inside_service .service_1 .service_box .block_title .subtitle { margin-top: clamp(25px, 2.60416667vw, 50px); } .inside_service .service_1 .service_box .service_main { width: 100%; height: auto; margin-top: clamp(55px, 5.72916667vw, 110px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_service .service_1 .service_box .service_main .inside_title { height: 100%; } .inside_service .service_1 .service_box .service_main .service_menu { width: 73%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_service .service_1 .service_box .service_main .service_menu .item { width: 100%; height: auto; } .inside_service .service_1 .service_box .service_main .service_menu .item .images { width: 100%; max-width: 344px; height: auto; margin: 0 auto; font-size: 0; position: relative; z-index: 1; } .inside_service .service_1 .service_box .service_main .service_menu .item .images .img { width: 100%; height: auto; position: relative; z-index: 5; } .inside_service .service_1 .service_box .service_main .service_menu .item .images .img::after { content: ''; width: 100%; -webkit-aspect-ratio: 1; aspect-ratio: 1; position: absolute; top: 50%; left: 50%; z-index: 1; border-radius: 50%; transform: translate(-50%, -50%); border: 1px dashed #d7dade; } .inside_service .service_1 .service_box .service_main .service_menu .item .images .img .pb { padding-bottom: 86.627906976744186046511627906977%; overflow: hidden; } .inside_service .service_1 .service_box .service_main .service_menu .item .images .img img { width: 100%; height: 100%; object-fit: cover; -webkit-clip-path: polygon(25% 0, 0 50%, 25% 100%, 75% 100%, 100% 50%, 75% 0); -moz-clip-path: polygon(25% 0, 0 50%, 25% 100%, 75% 100%, 100% 50%, 75% 0); clip-path: polygon(25% 0, 0 50%, 25% 100%, 75% 100%, 100% 50%, 75% 0); } .inside_service .service_1 .service_box .service_main .service_menu .item .line { width: 2px; height: 50px; margin: 0 auto; position: relative; z-index: 5; background: #3B6ECA; } .inside_service .service_1 .service_box .service_main .service_menu .item .line::before { content: ''; width: 12px; -webkit-aspect-ratio: 1; aspect-ratio: 1; position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); border-radius: 50%; background: #3b6eca; border: 3px solid #FFF; } .inside_service .service_1 .service_box .service_main .service_menu .item .info { width: 100%; height: auto; text-align: center; padding: 0 10px; } .inside_service .service_1 .service_box .service_main .service_menu .item .info .title { width: 100%; height: auto; font-size: 24px; font-family: 'Rubik', 'ff700'; color: #2c303d; } @media (max-width:1680px) { .inside_service .service_1 .service_box .service_main .service_menu .item .info .title { font-size: 22px; } } @media (max-width:1440px) { .inside_service .service_1 .service_box .service_main .service_menu .item .info .title { font-size: 20px; } } @media (max-width:1280px) { .inside_service .service_1 .service_box .service_main .service_menu .item .info .title { font-size: 18px; } } @media (max-width:1024px) { .inside_service .service_1 .service_box .service_main .service_menu .item .info .title { font-size: 16px; } } @media (max-width:768px) { .inside_service .service_1 .service_box .service_main .service_menu .item .info .title { font-size: 15px; } } .inside_service .service_1 .service_box .service_main .service_menu .item .info .subtitle { width: 100%; height: auto; margin-top: .5em; font-size: 18px; font-family: 'Rubik', 'ff200'; color: #2c303d; text-align: justify; /*text-align-last: center;*/ } @media (max-width:1440px) { .inside_service .service_1 .service_box .service_main .service_menu .item .info .subtitle { font-size: 16px; } } @media (max-width:1024px) { .inside_service .service_1 .service_box .service_main .service_menu .item .info .subtitle { font-size: 14px; } } @media (max-width:768px) { .inside_service .service_1 .service_box .service_main .service_menu .item .info .subtitle { font-size: 13px; } } .inside_service .service_1 .service_box .service_main .service_menu .item .info .details { width: 100%; height: auto; margin-top: 2em; font-size: 18px; font-family: 'Rubik', 'ff200'; color: #2c303d; line-height: 1.5; text-align: justify; /*text-align-last: center;*/ } @media (max-width:1440px) { .inside_service .service_1 .service_box .service_main .service_menu .item .info .details { font-size: 16px; } } @media (max-width:1024px) { .inside_service .service_1 .service_box .service_main .service_menu .item .info .details { font-size: 14px; } } @media (max-width:768px) { .inside_service .service_1 .service_box .service_main .service_menu .item .info .details { font-size: 13px; } } .inside_service .service_1 .service_box .service_main .service_menu .item:nth-child(2) { margin-top: 220px; } @media (max-width:990px) { .inside_service .service_1 .service_box .service_main { display: block; } .inside_service .service_1 .service_box .service_main .service_menu { width: 100%; margin-top: 40px; } } @media (max-width:480px) { .inside_service .service_1 .service_box .service_main .service_menu { display: grid; grid-template-columns: 100%; grid-gap: 10vh; } .inside_service .service_1 .service_box .service_main .service_menu .item { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; grid-gap: 20px; } .inside_service .service_1 .service_box .service_main .service_menu .item .images { width: 35%; } .inside_service .service_1 .service_box .service_main .service_menu .item .line { display: none; } .inside_service .service_1 .service_box .service_main .service_menu .item .info { flex: 1; text-align: left; } .inside_service .service_1 .service_box .service_main .service_menu .item:nth-child(2) { -webkit-flex-direction: row-reverse; -moz-flex-direction: row-reverse; -ms-flex-direction: row-reverse; -o-flex-direction: row-reverse; flex-direction: row-reverse; margin: 0; } } /* 鏈嶅姟椤圭洰 */ .inside_service_2 { width: 100%; height: auto; padding-top: clamp(30px, 3.125vw, 60px); padding-bottom: clamp(70px, 7.29166667vw, 140px); overflow: hidden; } .inside_service_2 .service_box { width: 100%; height: auto; } .inside_service_2 .service_box .inside_title { padding-bottom: clamp(15px, 1.5625vw, 30px); position: relative; z-index: 1; } .inside_service_2 .service_box .inside_title::after { content: ''; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; z-index: 1; background: #eef0f2; } .inside_service_2 .service_box .service_main { width: 100%; height: auto; margin-top: clamp(45px, 4.6875vw, 90px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_service_2 .service_box .service_main .service_tabs { width: 25%; height: 100%; } .inside_service_2 .service_box .service_main .service_tabs .item { width: 100%; height: auto; min-height: 60px; padding: 12px 20px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; grid-gap: 10px; cursor: pointer; border: 2px solid #FFF; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; --color: #2c303d; } .inside_service_2 .service_box .service_main .service_tabs .item .icon { width: 30px; height: auto; font-size: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_service_2 .service_box .service_main .service_tabs .item .title { flex: 1; font-size: 22px; color: var(--color); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1680px) { .inside_service_2 .service_box .service_main .service_tabs .item .title { font-size: 20px; } } @media (max-width:1440px) { .inside_service_2 .service_box .service_main .service_tabs .item .title { font-size: 18px; } } @media (max-width:1280px) { .inside_service_2 .service_box .service_main .service_tabs .item .title { font-size: 17px; } } @media (max-width:1024px) { .inside_service_2 .service_box .service_main .service_tabs .item .title { font-size: 16px; } } @media (max-width:768px) { .inside_service_2 .service_box .service_main .service_tabs .item .title { font-size: 15px; } } .inside_service_2 .service_box .service_main .service_tabs .item .arrow { width: 16px; height: 11px; } .inside_service_2 .service_box .service_main .service_tabs .item .arrow path { fill: var(--color); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_service_2 .service_box .service_main .service_tabs .item .arrow .p_2 { transform: translateX(-50%); opacity: 0; } .inside_service_2 .service_box .service_main .service_tabs .item:hover .title { color: #f39800; } .inside_service_2 .service_box .service_main .service_tabs .item.active, .inside_service_2 .service_box .service_main .service_tabs .item.active:hover { background: #f39800; border-color: #ffa516; --color: #FFF; } .inside_service_2 .service_box .service_main .service_tabs .item.active .title, .inside_service_2 .service_box .service_main .service_tabs .item.active:hover .title { color: var(--color); } .inside_service_2 .service_box .service_main .service_tabs .item.active .icon, .inside_service_2 .service_box .service_main .service_tabs .item.active:hover .icon { filter: invert(1); } .inside_service_2 .service_box .service_main .service_tabs .item.active .arrow .p_2, .inside_service_2 .service_box .service_main .service_tabs .item.active:hover .arrow .p_2 { transform: translateX(0); opacity: 1; } .inside_service_2 .service_box .service_main .service_tabs .item:first-child ~ .item { margin-top: 10px; } .inside_service_2 .service_box .service_main .service_content { width: 66.66%; height: auto; } .inside_service_2 .service_box .service_main .service_content .swiper-slide { position: relative; z-index: 1; pointer-events: initial; } .inside_service_2 .service_box .service_main .service_content .swiper-slide.active { z-index: 5; } .inside_service_2 .service_box .service_main .service_content .headline { width: 100%; height: auto; position: relative; background: #f39800; padding-left: clamp(20px, 2.08333333vw, 40px); padding-right: clamp(20px, 2.08333333vw, 40px); padding-top: clamp(50px, 5.20833333vw, 100px); padding-bottom: clamp(15px, 1.5625vw, 30px); overflow: hidden; } .inside_service_2 .service_box .service_main .service_content .headline .title { font-size: 36px; font-family: 'Rubik', 'ff800'; color: #FFF; position: relative; z-index: 5; } @media (max-width:1680px) { .inside_service_2 .service_box .service_main .service_content .headline .title { font-size: 32px; } } @media (max-width:1440px) { .inside_service_2 .service_box .service_main .service_content .headline .title { font-size: 28px; } } @media (max-width:1280px) { .inside_service_2 .service_box .service_main .service_content .headline .title { font-size: 24px; } } @media (max-width:1024px) { .inside_service_2 .service_box .service_main .service_content .headline .title { font-size: 22px; } } @media (max-width:768px) { .inside_service_2 .service_box .service_main .service_content .headline .title { font-size: 20px; } } .inside_service_2 .service_box .service_main .service_content .headline .subtitle { margin-top: .2em; font-size: 24px; font-family: 'Rubik', 'ff100'; color: #FFF; line-height: 1.5; position: relative; z-index: 5; } @media (max-width:1680px) { .inside_service_2 .service_box .service_main .service_content .headline .subtitle { font-size: 22px; } } @media (max-width:1440px) { .inside_service_2 .service_box .service_main .service_content .headline .subtitle { font-size: 20px; } } @media (max-width:1280px) { .inside_service_2 .service_box .service_main .service_content .headline .subtitle { font-size: 18px; } } @media (max-width:1024px) { .inside_service_2 .service_box .service_main .service_content .headline .subtitle { font-size: 16px; } } @media (max-width:768px) { .inside_service_2 .service_box .service_main .service_content .headline .subtitle { font-size: 15px; } } .inside_service_2 .service_box .service_main .service_content .headline .icon { width: 26.6667%; height: auto; font-size: 0; position: absolute; left: 0; bottom: 0; transform: translate(-10%, 20%); pointer-events: none; } .inside_service_2 .service_box .service_main .service_content .inside_subtitle { margin-top: clamp(25px, 2.60416667vw, 50px); } .inside_service_2 .service_box .service_main .service_content .text_details { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); } .inside_service_2 .service_box .service_main .service_content .text_details * { font-size: 16px; font-family: 'Rubik', 'ff200'; color: #2c303d; line-height: 1.55; } @media (max-width:1440px) { .inside_service_2 .service_box .service_main .service_content .text_details * { font-size: 14px; } } @media (max-width:1024px) { .inside_service_2 .service_box .service_main .service_content .text_details * { font-size: 13px; } } @media (max-width:768px) { .inside_service_2 .service_box .service_main .service_content .text_details * { font-size: 12px; } } .inside_service_2 .service_box .service_main .service_content .swiper_arrow { width: 100%; height: auto; margin-top: clamp(20px, 2.08333333vw, 40px); position: relative; z-index: 1; } .inside_service_2 .service_box .service_main .service_content .swiper_arrow .swiper_box { width: 100%; height: auto; overflow: hidden; } .inside_service_2 .service_box .service_main .service_content .swiper_arrow .swiper_box .swiper-slide { width: 100%; height: auto; overflow: hidden; background: #000; } .inside_service_2 .service_box .service_main .service_content .swiper_arrow .swiper_box .swiper-slide .pb { padding-bottom: 50%; } .inside_service_2 .service_box .service_main .service_content .swiper_arrow .swiper_box .swiper-slide img { width: 100%; height: 100%; object-fit: cover; object-position: right; } .inside_service_2 .service_box .service_main .service_content .swiper_arrow .swiper_pager { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 5; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; overflow: hidden; display: none; } .inside_service_2 .service_box .service_main .service_content .swiper_arrow.active .swiper_pager { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .inside_service_2 .service_box .service_main .service_content .swiper_arrow .swiper_pager .swiper_btn { width: 1em; height: 2em; font-size: 60px; text-align: center; background: rgba(0, 0, 0, 0.1); cursor: pointer; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1680px) { .inside_service_2 .service_box .service_main .service_content .swiper_arrow .swiper_pager .swiper_btn { font-size: 53px; } } @media (max-width:1440px) { .inside_service_2 .service_box .service_main .service_content .swiper_arrow .swiper_pager .swiper_btn { font-size: 45px; } } @media (max-width:1280px) { .inside_service_2 .service_box .service_main .service_content .swiper_arrow .swiper_pager .swiper_btn { font-size: 40px; } } @media (max-width:1024px) { .inside_service_2 .service_box .service_main .service_content .swiper_arrow .swiper_pager .swiper_btn { font-size: 32px; } } .inside_service_2 .service_box .service_main .service_content .swiper_arrow .swiper_pager .swiper_btn:hover { background: rgba(0, 0, 0, 0.5); } .inside_service_2 .service_box .service_main .service_content .service_swiper { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); } .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box { width: 100%; height: auto; background: #f6f7fb; overflow: hidden; } .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide { opacity: 0; } .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; pointer-events: initial; position: relative; z-index: 1; } .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .img { width: 50%; height: auto; overflow: hidden; } .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .img .pb { padding-bottom: 62.5%; } .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .img img { width: 100%; height: 100%; object-fit: cover; transition: 1s linear 2s; } .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .content { width: 50%; height: auto; padding-left: clamp(20px, 2.08333333vw, 40px); padding-right: clamp(20px, 2.08333333vw, 40px); padding-top: clamp(30px, 3.125vw, 60px); padding-bottom: clamp(30px, 3.125vw, 60px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .content .headtitle { padding-bottom: .8em; font-size: 30px; font-family: 'Rubik', 'ff700'; color: #f39800; position: relative; z-index: 1; } @media (max-width:1680px) { .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .content .headtitle { font-size: 26px; } } @media (max-width:1440px) { .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .content .headtitle { font-size: 24px; } } @media (max-width:1280px) { .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .content .headtitle { font-size: 22px; } } @media (max-width:1024px) { .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .content .headtitle { font-size: 20px; } } @media (max-width:768px) { .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .content .headtitle { font-size: 18px; } } .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .content .headtitle::after { content: ''; font-size: 30px; width: 2em; height: 1px; position: absolute; left: 0; bottom: 0; background: #eef0f2; } @media (max-width:1680px) { .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .content .headtitle::after { font-size: 26px; } } @media (max-width:1440px) { .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .content .headtitle::after { font-size: 24px; } } @media (max-width:1280px) { .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .content .headtitle::after { font-size: 22px; } } @media (max-width:1024px) { .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .content .headtitle::after { font-size: 20px; } } @media (max-width:768px) { .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .content .headtitle::after { font-size: 18px; } } .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .content .info { width: 100%; height: auto; margin-top: 10px; font-size: 16px; font-family: 'Rubik', 'ff300'; color: #2c303d; filter: opacity(0.6); white-space: break-spaces; } @media (max-width:1440px) { .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .content .info { font-size: 14px; } } @media (max-width:1024px) { .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .content .info { font-size: 13px; } } @media (max-width:768px) { .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .content .info { font-size: 12px; } } .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .icon_hot { width: 1em; height: 1em; font-size: 125px; position: absolute; right: 0; bottom: 0; z-index: 1; } @media (max-width:1680px) { .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .icon_hot { font-size: 110px; } } @media (max-width:1440px) { .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .icon_hot { font-size: 94px; } } @media (max-width:1280px) { .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .icon_hot { font-size: 84px; } } @media (max-width:1024px) { .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .icon_hot { font-size: 67px; } } @media (max-width:990px) { .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .icon_hot { font-size: 65px; } } @media (max-width:768px) { .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .icon_hot { font-size: 50px; } } @media (max-width:640px) { .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .icon_hot { font-size: 42px; } } .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .icon_hot i { background: #f1f3f6; } .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide.active { z-index: 2; } .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide.active a .img img, .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide.swiper-slide-duplicate-active a .img img { transition: 6s linear; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } @media (max-width:768px) { .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a { display: block; } .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .img { width: 100%; } .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_box .swiper-slide a .content { width: 100%; } } .inside_service_2 .service_box .service_main .service_content .service_swiper .swiper_pager { margin-top: clamp(11.5px, 1.19791667vw, 23px); } @media (max-width:768px) { .inside_service_2 .service_box .service_main { display: block; } .inside_service_2 .service_box .service_main .service_tabs { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 5px; } .inside_service_2 .service_box .service_main .service_tabs .item { min-height: 50px; padding: 6px 10px; background: #F5F5F5; border-color: #F0F0F0; border-width: 1px; } .inside_service_2 .service_box .service_main .service_tabs .item .icon { width: 18px; } .inside_service_2 .service_box .service_main .service_tabs .item:first-child ~ .item { margin-top: 0; } .inside_service_2 .service_box .service_main .service_content { width: 100%; margin-top: 40px; } } /* ----- 鏈嶅姟缃戠偣 ----- */ .inside_network { width: 100%; height: auto; padding-top: 130px; overflow: hidden; } @media (max-width:1366px) { .inside_network { padding-top: 120px; } } @media (max-width:990px) { .inside_network { padding-top: 60px; } } .inside_network .navigation { padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(20px, 2.08333333vw, 40px); } .inside_network .network_head { width: 100%; height: auto; } .inside_network .network_head .network_box { width: 100%; height: auto; padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(20px, 2.08333333vw, 40px); } .inside_network .network_head .network_box .network_title { width: 100%; height: auto; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_network .network_head .network_box .network_title::after { content: ''; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; z-index: 1; background: #d4e1f3; } .inside_network .network_head .network_box .network_title .block_title .details { margin-bottom: 1em; font-size: 18px; opacity: .8; } @media (max-width:1440px) { .inside_network .network_head .network_box .network_title .block_title .details { font-size: 16px; } } @media (max-width:1024px) { .inside_network .network_head .network_box .network_title .block_title .details { font-size: 14px; } } @media (max-width:768px) { .inside_network .network_head .network_box .network_title .block_title .details { font-size: 13px; } } .inside_network .network_head .network_box .network_title .images { width: 51.388888888888888888888888888889%; font-size: 0; -webkit-box-self: end; -ms-align-self: end; -webkit-align-self: end; align-self: end; text-align: right; } @media (max-width:768px) { .inside_network .network_head .network_box .network_title { display: block; } .inside_network .network_head .network_box .network_title .block_title { width: 100%; } .inside_network .network_head .network_box .network_title .images { width: 100%; } } .inside_network .network_block { width: 100%; height: auto; } .inside_network .network_block .network_first { width: 100%; height: auto; padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(35px, 3.64583333vw, 70px); } .inside_network .network_block .network_first .network_title { width: 100%; height: auto; } .inside_network .network_block .network_first .network_title .menu_box { width: 100%; height: auto; margin-top: clamp(20px, 2.08333333vw, 40px); display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 20px calc(var(--size) * 2); --size: 20px; } .inside_network .network_block .network_first .network_title .menu_box .active, .inside_network .network_block .network_first .network_title .menu_box .item { position: relative; z-index: 1; padding: var(--size) 0; } .inside_network .network_block .network_first .network_title .menu_box .active::before, .inside_network .network_block .network_first .network_title .menu_box .item::before { content: ''; width: 100%; height: 0; position: absolute; top: 0; left: 0; z-index: 1; border-top: 1px dotted #d5dce5; } .inside_network .network_block .network_first .network_title .menu_box .item::after { content: ''; width: 1px; height: calc(100% - var(--size)); position: absolute; top: var(--size); left: calc(var(--size) * -1); z-index: 1; border-left: 1px dotted #d5dce5; } .inside_network .network_block .network_first .network_title .menu_box .active { width: 100%; height: auto; grid-column: span 2; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .inside_network .network_block .network_first .network_title .menu_box .active .center { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; grid-gap: 20px; } .inside_network .network_block .network_first .network_title .menu_box .active .icon { font-size: 0; } .inside_network .network_block .network_first .network_title .menu_box .active .info .title { font-size: 16px; } @media (max-width:1440px) { .inside_network .network_block .network_first .network_title .menu_box .active .info .title { font-size: 14px; } } @media (max-width:1024px) { .inside_network .network_block .network_first .network_title .menu_box .active .info .title { font-size: 13px; } } @media (max-width:768px) { .inside_network .network_block .network_first .network_title .menu_box .active .info .title { font-size: 12px; } } .inside_network .network_block .network_first .network_title .menu_box .active .info .details { font-size: 24px; } @media (max-width:1680px) { .inside_network .network_block .network_first .network_title .menu_box .active .info .details { font-size: 22px; } } @media (max-width:1440px) { .inside_network .network_block .network_first .network_title .menu_box .active .info .details { font-size: 20px; } } @media (max-width:1280px) { .inside_network .network_block .network_first .network_title .menu_box .active .info .details { font-size: 18px; } } @media (max-width:1024px) { .inside_network .network_block .network_first .network_title .menu_box .active .info .details { font-size: 16px; } } @media (max-width:768px) { .inside_network .network_block .network_first .network_title .menu_box .active .info .details { font-size: 15px; } } .inside_network .network_block .network_first .network_title .menu_box .item { width: 100%; height: auto; } .inside_network .network_block .network_first .network_title .menu_box .item .number { font-family: 'Orbitron', 'ff800'; font-size: 48px; line-height: 1; } @media (max-width:1680px) { .inside_network .network_block .network_first .network_title .menu_box .item .number { font-size: 42px; } } @media (max-width:1440px) { .inside_network .network_block .network_first .network_title .menu_box .item .number { font-size: 36px; } } @media (max-width:1280px) { .inside_network .network_block .network_first .network_title .menu_box .item .number { font-size: 28px; } } @media (max-width:1024px) { .inside_network .network_block .network_first .network_title .menu_box .item .number { font-size: 24px; } } @media (max-width:768px) { .inside_network .network_block .network_first .network_title .menu_box .item .number { font-size: 22px; } } .inside_network .network_block .network_first .network_title .menu_box .item .title { margin-top: 1em; font-size: 16px; } @media (max-width:1440px) { .inside_network .network_block .network_first .network_title .menu_box .item .title { font-size: 14px; } } @media (max-width:1024px) { .inside_network .network_block .network_first .network_title .menu_box .item .title { font-size: 13px; } } @media (max-width:768px) { .inside_network .network_block .network_first .network_title .menu_box .item .title { font-size: 12px; } } @media (max-width:768px) { .inside_network .network_block .network_first .network_title .menu_box { grid-template-columns: repeat(3, 1fr); } .inside_network .network_block .network_first .network_title .menu_box .active { grid-column: span 3; } } .inside_network .network_block .network_map { width: 100%; height: auto; background: #242e3e; overflow: hidden; } .inside_network .network_block .network_map .network_box { width: 100%; height: auto; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_network .network_block .network_map .network_box .sidebar_box { width: 25%; height: auto; position: relative; z-index: 1; } .inside_network .network_block .network_map .network_box .sidebar_box::before { content: ''; width: 50vw; height: 100%; position: absolute; top: 0; right: 0; z-index: 1; background: #1f2a3a; } .inside_network .network_block .network_map .network_box .sidebar_box::after { content: ''; width: 1px; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; background: #313a49; } .inside_network .network_block .network_map .network_box .sidebar_box .sidebar_title { width: 100%; height: 80px; padding: 0 30px; position: relative; z-index: 5; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_network .network_block .network_map .network_box .sidebar_box .sidebar_title .title { font-size: 18px; color: #a7abb1; } @media (max-width:1440px) { .inside_network .network_block .network_map .network_box .sidebar_box .sidebar_title .title { font-size: 16px; } } @media (max-width:1024px) { .inside_network .network_block .network_map .network_box .sidebar_box .sidebar_title .title { font-size: 14px; } } @media (max-width:768px) { .inside_network .network_block .network_map .network_box .sidebar_box .sidebar_title .title { font-size: 13px; } } .inside_network .network_block .network_map .network_box .sidebar_box .sidebar_title .number { font-size: 30px; color: #FFF; } @media (max-width:1680px) { .inside_network .network_block .network_map .network_box .sidebar_box .sidebar_title .number { font-size: 26px; } } @media (max-width:1440px) { .inside_network .network_block .network_map .network_box .sidebar_box .sidebar_title .number { font-size: 24px; } } @media (max-width:1280px) { .inside_network .network_block .network_map .network_box .sidebar_box .sidebar_title .number { font-size: 22px; } } @media (max-width:1024px) { .inside_network .network_block .network_map .network_box .sidebar_box .sidebar_title .number { font-size: 20px; } } @media (max-width:768px) { .inside_network .network_block .network_map .network_box .sidebar_box .sidebar_title .number { font-size: 18px; } } .inside_network .network_block .network_map .network_box .sidebar_box .menu_box { width: 100%; height: auto; } .inside_network .network_block .network_map .network_box .sidebar_box .menu_box .item { width: 100%; height: 80px; padding: 0 30px; position: relative; z-index: 5; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; cursor: pointer; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; overflow: hidden; } .inside_network .network_block .network_map .network_box .sidebar_box .menu_box .item .title { font-size: 18px; color: #a7abb1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1440px) { .inside_network .network_block .network_map .network_box .sidebar_box .menu_box .item .title { font-size: 16px; } } @media (max-width:1024px) { .inside_network .network_block .network_map .network_box .sidebar_box .menu_box .item .title { font-size: 14px; } } @media (max-width:768px) { .inside_network .network_block .network_map .network_box .sidebar_box .menu_box .item .title { font-size: 13px; } } .inside_network .network_block .network_map .network_box .sidebar_box .menu_box .item .number { font-size: 24px; color: #FFF; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1680px) { .inside_network .network_block .network_map .network_box .sidebar_box .menu_box .item .number { font-size: 22px; } } @media (max-width:1440px) { .inside_network .network_block .network_map .network_box .sidebar_box .menu_box .item .number { font-size: 20px; } } @media (max-width:1280px) { .inside_network .network_block .network_map .network_box .sidebar_box .menu_box .item .number { font-size: 18px; } } @media (max-width:1024px) { .inside_network .network_block .network_map .network_box .sidebar_box .menu_box .item .number { font-size: 16px; } } @media (max-width:768px) { .inside_network .network_block .network_map .network_box .sidebar_box .menu_box .item .number { font-size: 15px; } } .inside_network .network_block .network_map .network_box .sidebar_box .menu_box .item.active { background: #f39800; } .inside_network .network_block .network_map .network_box .sidebar_box .menu_box .item.active .title, .inside_network .network_block .network_map .network_box .sidebar_box .menu_box .item.active .number { color: #2c303d; } .inside_network .network_block .network_map .network_box .sidebar_box .menu_box .item:hover .title { color: #FFF; } .inside_network .network_block .network_map .network_box .network_main { width: auto; height: auto; flex: 1; padding-top: clamp(30px, 3.125vw, 60px); padding-bottom: clamp(15px, 1.5625vw, 30px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .inside_network .network_block .network_map .network_box .network_main .map_box { width: auto; height: auto; position: relative; z-index: 1; transform: translateX(-30%); } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; display: none; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .img { width: 100%; height: 100%; position: relative; z-index: 1; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .img img { filter: drop-shadow(0 0 30px #061422); } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item { width: 0; height: 0; position: absolute; left: 0; top: 0; z-index: 2; --color: #f39800; cursor: pointer; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .address { font-size: 14px; color: var(--color); white-space: nowrap; opacity: 0; position: absolute; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .address { font-size: 13px; } } @media (max-width:1024px) { .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .address { font-size: 12px; } } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .address._l { right: 10px; top: 50%; transform: translateY(-50%); } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item:hover .address { opacity: 1; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item.active .address { opacity: 1; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .address._b { left: 50%; top: 0; transform: translate(-50%, 30%); } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .drop { width: 0; height: 0; position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .drop::before, .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .drop::after { content: ''; width: 1em; height: 1em; font-size: 6px; position: absolute; top: 50%; left: 50%; z-index: 2; transform: translate(-50%, -50%); border-radius: 50%; background: var(--color); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .drop::after { z-index: 1; font-size: 12px; opacity: .4; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .line { width: min(10.4vw, 200px); height: 2px; position: relative; z-index: 1; left: 0; top: -1px; margin-left: 20px; background: var(--color); opacity: 0; visibility: hidden; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box { width: 360px; height: auto; padding: 10px; position: absolute; left: min(10.4vw, 200px); top: -12px; margin-left: 20px; background: #2b3646; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; grid-gap: 20px; opacity: 0; visibility: hidden; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .img { width: 1em; height: 1em; font-size: 120px; border: 2px solid #515b6c; position: relative; z-index: 5; overflow: hidden; } @media (max-width:1680px) { .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .img { font-size: 105px; } } @media (max-width:1440px) { .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .img { font-size: 90px; } } @media (max-width:1280px) { .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .img { font-size: 80px; } } @media (max-width:1024px) { .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .img { font-size: 64px; } } @media (max-width:990px) { .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .img { font-size: 62px; } } @media (max-width:768px) { .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .img { font-size: 48px; } } @media (max-width:640px) { .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .img { font-size: 40px; } } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .img img { width: 100%; height: 100%; object-fit: cover; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .info { width: auto; height: auto; flex: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -moz-justify-content: space-around; -webkit-justify-content: space-around; justify-content: space-around; gap: 20px; position: relative; z-index: 5; overflow: hidden; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .info .title { font-size: 18px; color: #FFF; } @media (max-width:1440px) { .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .info .title { font-size: 16px; } } @media (max-width:1024px) { .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .info .title { font-size: 14px; } } @media (max-width:768px) { .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .info .title { font-size: 13px; } } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .info .details { width: 100%; height: auto; flex: 1; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .info .details .one { opacity: .3; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .info .details .one, .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .info .details .one a{ width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; grid-gap: 10px; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .info .details .one .icon { font-size: 0; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .info .details .one .word { font-size: 14px; font-family: 'Rubik', 'ff100'; color: #FFF; } @media (max-width:1280px) { .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .info .details .one .word { font-size: 13px; } } @media (max-width:1024px) { .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .info .details .one .word { font-size: 12px; } } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .icon_hot { width: 1em; height: 1em; font-size: 80px; position: absolute; right: 0; bottom: 0; z-index: 1; opacity: .2; } @media (max-width:1680px) { .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .icon_hot { font-size: 70px; } } @media (max-width:1440px) { .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .icon_hot { font-size: 60px; } } @media (max-width:1280px) { .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .icon_hot { font-size: 54px; } } @media (max-width:1024px) { .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .icon_hot { font-size: 43px; } } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box .icon_hot i { background: #5c6879; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item.active { --color: #F76710; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item.active .line, .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item.active .info_box { opacity: 1; visibility: visible; margin-left: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item.beijing { left: 74.5%; top: 28.9%; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item.hebei { left: 72.8%; top: 33%; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box:first-child { display: block; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box.active { z-index: 5; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box:first-child { z-index: 3; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box:nth-child(2) { z-index: 2; } @media (max-width:1440px) { .inside_network .network_block .network_map .network_box .network_main { padding-left: clamp(50px, 5.20833333vw, 100px); padding-right: clamp(50px, 5.20833333vw, 100px); -webkit-box-pack: start; -ms-flex-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; } .inside_network .network_block .network_map .network_box .network_main .map_box { transform: translate(0); } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box { width: 300px; } } @media (max-width:1024px) { .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box { width: 240px; } } @media (max-width:990px) { .inside_network .network_block .network_map .network_box { display: block; } .inside_network .network_block .network_map .network_box .sidebar_box { display: none; } .inside_network .network_block .network_map .network_box .network_main { width: 100%; padding: 40px 0; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box { display: block; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .img img { filter: none; } .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .line, .inside_network .network_block .network_map .network_box .network_main .map_box .menu_box .item_box .address_menu .item .info_box { display: none; } } .inside_network .network_block .network_map .network_mobile { width: 100%; height: auto; display: none; } .inside_network .network_block .network_map .network_mobile .network_subnav { width: 100%; height: auto; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } @media (max-width: 768px) { .inside_network .network_block .network_map .network_mobile .network_subnav { display: grid; grid-template-columns: repeat(4, 1fr); } } .inside_network .network_block .network_map .network_mobile .network_subnav::before { content: ''; width: 100vw; height: 100%; position: absolute; top: 0; left: 50%; z-index: 1; transform: translateX(-50%); background: #1f2a3a; border: 1px solid #313a49; border-left: 0; border-right: 0; } .inside_network .network_block .network_map .network_mobile .network_subnav .item { width: 100%; height: 54px; padding: 0 15px; position: relative; z-index: 5; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; cursor: pointer; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; overflow: hidden; } .inside_network .network_block .network_map .network_mobile .network_subnav .item .title { font-size: 18px; color: #a7abb1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1440px) { .inside_network .network_block .network_map .network_mobile .network_subnav .item .title { font-size: 16px; } } @media (max-width:1024px) { .inside_network .network_block .network_map .network_mobile .network_subnav .item .title { font-size: 14px; } } @media (max-width:768px) { .inside_network .network_block .network_map .network_mobile .network_subnav .item .title { font-size: 13px; } } .inside_network .network_block .network_map .network_mobile .network_subnav .item .number { font-size: 24px; color: #FFF; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1680px) { .inside_network .network_block .network_map .network_mobile .network_subnav .item .number { font-size: 22px; } } @media (max-width:1440px) { .inside_network .network_block .network_map .network_mobile .network_subnav .item .number { font-size: 20px; } } @media (max-width:1280px) { .inside_network .network_block .network_map .network_mobile .network_subnav .item .number { font-size: 18px; } } @media (max-width:1024px) { .inside_network .network_block .network_map .network_mobile .network_subnav .item .number { font-size: 16px; } } @media (max-width:768px) { .inside_network .network_block .network_map .network_mobile .network_subnav .item .number { font-size: 15px; } } .inside_network .network_block .network_map .network_mobile .network_subnav .item.active { background: #f39800; } .inside_network .network_block .network_map .network_mobile .network_subnav .item.active .title, .inside_network .network_block .network_map .network_mobile .network_subnav .item.active .number { color: #2c303d; } .inside_network .network_block .network_map .network_mobile .network_swiper { width: 100%; height: auto; padding: 20px 0 50px; } .inside_network .network_block .network_map .network_mobile .network_swiper .swiper-slide { opacity: 0; } .inside_network .network_block .network_map .network_mobile .network_swiper .menu_box { width: 100%; height: auto; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 15px; } .inside_network .network_block .network_map .network_mobile .network_swiper .menu_box .item { width: 100%; height: auto; padding: 10px; position: relative; z-index: 1; background: #2b3646; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; grid-gap: 20px; } .inside_network .network_block .network_map .network_mobile .network_swiper .menu_box .item .img { width: 1em; height: 1em; font-size: 80px; border: 2px solid #515b6c; position: relative; z-index: 5; overflow: hidden; } .inside_network .network_block .network_map .network_mobile .network_swiper .menu_box .item .img img { width: 100%; height: 100%; object-fit: cover; } .inside_network .network_block .network_map .network_mobile .network_swiper .menu_box .item .info { width: auto; height: auto; flex: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -moz-justify-content: space-around; -webkit-justify-content: space-around; justify-content: space-around; position: relative; z-index: 5; overflow: hidden; } .inside_network .network_block .network_map .network_mobile .network_swiper .menu_box .item .info .title { font-size: 18px; color: #FFF; } @media (max-width:1440px) { .inside_network .network_block .network_map .network_mobile .network_swiper .menu_box .item .info .title { font-size: 16px; } } @media (max-width:1024px) { .inside_network .network_block .network_map .network_mobile .network_swiper .menu_box .item .info .title { font-size: 14px; } } @media (max-width:768px) { .inside_network .network_block .network_map .network_mobile .network_swiper .menu_box .item .info .title { font-size: 13px; } } .inside_network .network_block .network_map .network_mobile .network_swiper .menu_box .item .info .details { width: 100%; height: auto; } .inside_network .network_block .network_map .network_mobile .network_swiper .menu_box .item .info .details .one { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; grid-gap: 10px; opacity: .3; } .inside_network .network_block .network_map .network_mobile .network_swiper .menu_box .item .info .details .one .icon { font-size: 0; } .inside_network .network_block .network_map .network_mobile .network_swiper .menu_box .item .info .details .one .word { font-size: 14px; font-family: 'Rubik', 'ff100'; color: #FFF; } @media (max-width:1280px) { .inside_network .network_block .network_map .network_mobile .network_swiper .menu_box .item .info .details .one .word { font-size: 13px; } } @media (max-width:1024px) { .inside_network .network_block .network_map .network_mobile .network_swiper .menu_box .item .info .details .one .word { font-size: 12px; } } .inside_network .network_block .network_map .network_mobile .network_swiper .menu_box .item .icon_hot { width: 1em; height: 1em; font-size: 80px; position: absolute; right: 0; bottom: 0; z-index: 1; opacity: .2; } @media (max-width:1680px) { .inside_network .network_block .network_map .network_mobile .network_swiper .menu_box .item .icon_hot { font-size: 70px; } } @media (max-width:1440px) { .inside_network .network_block .network_map .network_mobile .network_swiper .menu_box .item .icon_hot { font-size: 60px; } } @media (max-width:1280px) { .inside_network .network_block .network_map .network_mobile .network_swiper .menu_box .item .icon_hot { font-size: 54px; } } @media (max-width:1024px) { .inside_network .network_block .network_map .network_mobile .network_swiper .menu_box .item .icon_hot { font-size: 43px; } } .inside_network .network_block .network_map .network_mobile .network_swiper .menu_box .item .icon_hot i { background: #5c6879; } @media (max-width:990px) { .inside_network .network_block .network_map .network_mobile { display: block; } } @media (max-width:480px) { .inside_network .network_block .network_map .network_mobile .network_subnav .item { padding: 0 10px; } .inside_network .network_block .network_map .network_mobile .network_subnav .item .title { /*width: 2em;*/ height: 1.2em; line-height: 1.2; overflow: hidden; font-size: 12px; } .inside_network .network_block .network_map .network_mobile .network_subnav .item .number { display: none; } .inside_network .network_block .network_map .network_mobile .network_swiper .menu_box { grid-template-columns: 100%; grid-gap: 10px; } } /* 瀹㈡埛鏁呬簨 */ /* 鍒楄〃 */ .inside_story { width: 100%; height: auto; margin-top: clamp(20px, 2.08333333vw, 40px); overflow: hidden; /* 杞挱 */ } .inside_story .story_header { width: 100%; height: auto; } .inside_story .story_header .swiper_box { width: 100%; height: auto; min-height: 300px; background: #F0F2F4; overflow: hidden; } .inside_story .story_header .swiper_box .swiper-slide { z-index: 1; opacity: 0; } .inside_story .story_header .swiper_box .swiper-slide.active { z-index: 5; } .inside_story .story_header .swiper_box .swiper-slide.active * { pointer-events: initial; } .inside_story .story_header .swiper_box .swiper-slide a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; pointer-events: initial; position: relative; z-index: 1; } .inside_story .story_header .swiper_box .swiper-slide a .img { width: 67.777777777777777777777777777778%; height: auto; overflow: hidden; } .inside_story .story_header .swiper_box .swiper-slide a .img .pb { padding-bottom: 61.47540984%; } .inside_story .story_header .swiper_box .swiper-slide a .img img { width: 100%; height: 100%; object-fit: cover; } .inside_story .story_header .swiper_box .swiper-slide a .content { width: auto; height: auto; flex: 1; position: relative; z-index: 5; padding-left: clamp(20px, 2.08333333vw, 40px); padding-right: clamp(20px, 2.08333333vw, 40px); padding-top: clamp(30px, 3.125vw, 60px); padding-bottom: clamp(30px, 3.125vw, 60px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_story .story_header .swiper_box .swiper-slide a .content .c_head { width: 100%; height: auto; } .inside_story .story_header .swiper_box .swiper-slide a .content .c_head .line { width: 2em; height: 2px; margin: .65em 0; font-size: 36px; background: #d6dfe8; } @media (max-width:1680px) { .inside_story .story_header .swiper_box .swiper-slide a .content .c_head .line { font-size: 32px; } } @media (max-width:1440px) { .inside_story .story_header .swiper_box .swiper-slide a .content .c_head .line { font-size: 28px; } } @media (max-width:1280px) { .inside_story .story_header .swiper_box .swiper-slide a .content .c_head .line { font-size: 24px; } } @media (max-width:1024px) { .inside_story .story_header .swiper_box .swiper-slide a .content .c_head .line { font-size: 22px; } } @media (max-width:768px) { .inside_story .story_header .swiper_box .swiper-slide a .content .c_head .line { font-size: 20px; } } .inside_story .story_header .swiper_box .swiper-slide a .content .c_head .menu { width: 100%; height: auto; } .inside_story .story_header .swiper_box .swiper-slide a .content .c_head .menu .one { width: 100%; height: auto; position: relative; z-index: 1; font-size: 18px; padding-left: 1em; color: #2c303d; } @media (max-width:1440px) { .inside_story .story_header .swiper_box .swiper-slide a .content .c_head .menu .one { font-size: 16px; } } @media (max-width:1024px) { .inside_story .story_header .swiper_box .swiper-slide a .content .c_head .menu .one { font-size: 14px; } } @media (max-width:768px) { .inside_story .story_header .swiper_box .swiper-slide a .content .c_head .menu .one { font-size: 13px; } } .inside_story .story_header .swiper_box .swiper-slide a .content .c_head .menu .one::after { content: ''; width: var(--size); height: var(--size); position: absolute; top: .55em; left: 0; z-index: 1; background: #3b6eca; --size: 4px; } .inside_story .story_header .swiper_box .swiper-slide a .content .c_head .menu .one:first-child ~ .one { margin-top: .2em; } .inside_story .story_header .swiper_box .swiper-slide a .content .info { width: 100%; height: auto; } .inside_story .story_header .swiper_box .swiper-slide a .content .info .details { width: 100%; height: calc(4em * 1.5); font-size: 16px; font-family: 'Rubik', 'ff200'; color: #2c303d; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } @media (max-width:1440px) { .inside_story .story_header .swiper_box .swiper-slide a .content .info .details { font-size: 14px; } } @media (max-width:1024px) { .inside_story .story_header .swiper_box .swiper-slide a .content .info .details { font-size: 13px; } } @media (max-width:768px) { .inside_story .story_header .swiper_box .swiper-slide a .content .info .details { font-size: 12px; } } .inside_story .story_header .swiper_box .swiper-slide a .content .info .text_more .more { --color: #003281; } .inside_story .story_header .swiper_box .swiper-slide a .content .info .text_more:hover .more { --color: #f39800; } .inside_story .story_header .swiper_box .swiper-slide a .icon_hot { width: 1em; height: 1em; font-size: 125px; position: absolute; right: 0; bottom: 0; z-index: 1; } @media (max-width:1680px) { .inside_story .story_header .swiper_box .swiper-slide a .icon_hot { font-size: 110px; } } @media (max-width:1440px) { .inside_story .story_header .swiper_box .swiper-slide a .icon_hot { font-size: 94px; } } @media (max-width:1280px) { .inside_story .story_header .swiper_box .swiper-slide a .icon_hot { font-size: 84px; } } @media (max-width:1024px) { .inside_story .story_header .swiper_box .swiper-slide a .icon_hot { font-size: 67px; } } @media (max-width:990px) { .inside_story .story_header .swiper_box .swiper-slide a .icon_hot { font-size: 65px; } } @media (max-width:768px) { .inside_story .story_header .swiper_box .swiper-slide a .icon_hot { font-size: 50px; } } @media (max-width:640px) { .inside_story .story_header .swiper_box .swiper-slide a .icon_hot { font-size: 42px; } } .inside_story .story_header .swiper_box .swiper-slide a .icon_hot i { background: #e8ebf0; } @media (max-width:768px) { .inside_story .story_header .swiper_box .swiper-slide a { display: block; } .inside_story .story_header .swiper_box .swiper-slide a .img { width: 100%; } .inside_story .story_header .swiper_box .swiper-slide a .content { width: 100%; padding: 20px 15px; } } .inside_story .story_header .swiper_pager { margin-top: clamp(11.5px, 1.19791667vw, 23px); } .inside_story .story_content { width: 100%; height: auto; background: linear-gradient(#eef2f5, transparent clamp(130px, 20vh, 260px)); overflow: hidden; } .inside_story .story_content .story_box { width: 100%; height: auto; padding-top: clamp(50px, 5.20833333vw, 100px); padding-bottom: clamp(50px, 5.20833333vw, 100px); } .inside_story .story_content .story_box .story_list { width: 100%; height: auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: min(4.6875vw, 90px) 24px; } .inside_story .story_content .story_box .story_list .item { width: 100%; height: auto; overflow: hidden; } .inside_story .story_content .story_box .story_list .item .img { width: 100%; height: auto; overflow: hidden; } .inside_story .story_content .story_box .story_list .item .img .pb { padding-bottom: 51.724137931034482758620689655172%; } .inside_story .story_content .story_box .story_list .item .img .ab { -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_story .story_content .story_box .story_list .item .img img { width: 100%; height: 100%; object-fit: cover; } .inside_story .story_content .story_box .story_list .item .info { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); } .inside_story .story_content .story_box .story_list .item .info .title { width: 100%; height: auto; font-size: 24px; color: #2c303d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width:1680px) { .inside_story .story_content .story_box .story_list .item .info .title { font-size: 22px; } } @media (max-width:1440px) { .inside_story .story_content .story_box .story_list .item .info .title { font-size: 20px; } } @media (max-width:1280px) { .inside_story .story_content .story_box .story_list .item .info .title { font-size: 18px; } } @media (max-width:1024px) { .inside_story .story_content .story_box .story_list .item .info .title { font-size: 16px; } } @media (max-width:768px) { .inside_story .story_content .story_box .story_list .item .info .title { font-size: 15px; } } .inside_story .story_content .story_box .story_list .item .info .details { width: 100%; height: calc(2em * 1.5); margin-top: 1em; font-size: 16px; font-family: 'Rubik', 'ff200'; color: #2c303d; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } @media (max-width:1440px) { .inside_story .story_content .story_box .story_list .item .info .details { font-size: 14px; } } @media (max-width:1024px) { .inside_story .story_content .story_box .story_list .item .info .details { font-size: 13px; } } @media (max-width:768px) { .inside_story .story_content .story_box .story_list .item .info .details { font-size: 12px; } } .inside_story .story_content .story_box .story_list .item .info .text_more { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); } .inside_story .story_content .story_box .story_list .item .info .text_more .more { --color: #003281; } .inside_story .story_content .story_box .story_list .item:hover .img .ab { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .inside_story .story_content .story_box .story_list .item:hover .info .text_more .more { --color: #f39800; } .inside_story .story_content .story_box .story_list .layui-flow-more { width: 100%; grid-column: 1 / -1; } @media (max-width:768px) { .inside_story .story_content .story_box .story_list { grid-template-columns: repeat(2, 1fr); grid-gap: 30px 14px; } } @media (max-width:480px) { .inside_story .story_content .story_box .story_list { grid-template-columns: 100%; } } /* 璇︽儏 */ .inside_story_details { width: 100%; height: auto; overflow: hidden; } .inside_story_details .story_content { width: 100%; height: auto; padding-top: clamp(50px, 5.20833333vw, 100px); padding-bottom: clamp(70px, 7.29166667vw, 140px); background: linear-gradient(#f5f5f5, transparent); } .inside_story_details .story_content .story_box { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_story_details .story_content .story_box .story_details { width: 67.777777777777777777777777777778%; height: auto; } .inside_story_details .story_content .story_box .story_details > *:first-child ~ .inside_headline { margin-top: clamp(40px, 4.16666667vw, 80px); } .inside_story_details .story_content .story_box .story_details .text_details { margin-top: clamp(15px, 1.5625vw, 30px); } .inside_story_details .story_content .story_box .story_details .details_swiper { width: 100%; height: auto; margin-top: clamp(20px, 2.08333333vw, 40px); position: relative; z-index: 1; overflow: hidden; } .inside_story_details .story_content .story_box .story_details .details_swiper .swiper_box { width: 100%; height: auto; position: relative; z-index: 1; } .inside_story_details .story_content .story_box .story_details .details_swiper .swiper_box .pb { padding-bottom: 61.475409836065573770491803278689%; } .inside_story_details .story_content .story_box .story_details .details_swiper .swiper_box img { width: 100%; height: 100%; object-fit: cover; } .inside_story_details .story_content .story_box .story_details .details_swiper .swiper_tabs { width: 100%; height: auto; padding: 12px; position: absolute; bottom: 0; left: 0; z-index: 5; } .inside_story_details .story_content .story_box .story_details .details_swiper .swiper_tabs::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background: #000; opacity: .4; } .inside_story_details .story_content .story_box .story_details .details_swiper .swiper_tabs .swiper-wrapper { position: relative; z-index: 5; } .inside_story_details .story_content .story_box .story_details .details_swiper .swiper_tabs .swiper-wrapper .swiper-slide { width: 25%; position: relative; z-index: 1; } .inside_story_details .story_content .story_box .story_details .details_swiper .swiper_tabs .swiper-wrapper .swiper-slide::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; border: 2px solid #FFF; opacity: 0; } .inside_story_details .story_content .story_box .story_details .details_swiper .swiper_tabs .swiper-wrapper .swiper-slide .pb { padding-bottom: 50%; z-index: 1; } .inside_story_details .story_content .story_box .story_details .details_swiper .swiper_tabs .swiper-wrapper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; } .inside_story_details .story_content .story_box .story_details .details_swiper .swiper_tabs .swiper-wrapper .swiper-slide.active::after { opacity: 1; } .inside_story_details .story_content .story_box .story_details .menu_details { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); } .inside_story_details .story_content .story_box .product_menu { width: 30.138888888888888888888888888889%; height: auto; } .inside_story_details .story_content .story_box .product_menu .menu_box { width: 100%; height: auto; margin-top: clamp(20px, 2.08333333vw, 40px); display: grid; grid-template-columns: 100%; grid-gap: 30px; } .inside_story_details .story_content .story_box .product_menu .menu_box .item { width: 100%; height: auto; position: relative; z-index: 1; background: #f0f2f4; } .inside_story_details .story_content .story_box .product_menu .menu_box .item a { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; position: relative; z-index: 1; } .inside_story_details .story_content .story_box .product_menu .menu_box .item a .img { width: 43.333333333333333333333333333333%; height: auto; position: relative; z-index: 5; overflow: hidden; } .inside_story_details .story_content .story_box .product_menu .menu_box .item a .img .pb { padding-bottom: 100%; } .inside_story_details .story_content .story_box .product_menu .menu_box .item a .info { width: auto; height: auto; flex: 1; padding-top: clamp(16px, 1.66666667vw, 32px); padding-bottom: clamp(16px, 1.66666667vw, 32px); padding-left: clamp(5px, 0.52083333vw, 10px); padding-right: clamp(16px, 1.66666667vw, 32px); position: relative; z-index: 5; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; overflow: hidden; } .inside_story_details .story_content .story_box .product_menu .menu_box .item a .info .classify { width: 100%; height: auto; font-size: 16px; color: #2c303d; } @media (max-width:1440px) { .inside_story_details .story_content .story_box .product_menu .menu_box .item a .info .classify { font-size: 14px; } } @media (max-width:1024px) { .inside_story_details .story_content .story_box .product_menu .menu_box .item a .info .classify { font-size: 13px; } } @media (max-width:768px) { .inside_story_details .story_content .story_box .product_menu .menu_box .item a .info .classify { font-size: 12px; } } .inside_story_details .story_content .story_box .product_menu .menu_box .item a .info .title { width: 100%; height: auto; font-size: 24px; color: #2c303d; } @media (max-width:1680px) { .inside_story_details .story_content .story_box .product_menu .menu_box .item a .info .title { font-size: 22px; } } @media (max-width:1440px) { .inside_story_details .story_content .story_box .product_menu .menu_box .item a .info .title { font-size: 20px; } } @media (max-width:1280px) { .inside_story_details .story_content .story_box .product_menu .menu_box .item a .info .title { font-size: 18px; } } @media (max-width:1024px) { .inside_story_details .story_content .story_box .product_menu .menu_box .item a .info .title { font-size: 16px; } } @media (max-width:768px) { .inside_story_details .story_content .story_box .product_menu .menu_box .item a .info .title { font-size: 15px; } } .inside_story_details .story_content .story_box .product_menu .menu_box .item a .info .text_more { margin-top: 10px; } .inside_story_details .story_content .story_box .product_menu .menu_box .item a .icon_hot { width: 1em; height: 1em; font-size: 80px; position: absolute; right: 0; bottom: 0; z-index: 1; } @media (max-width:1680px) { .inside_story_details .story_content .story_box .product_menu .menu_box .item a .icon_hot { font-size: 70px; } } @media (max-width:1440px) { .inside_story_details .story_content .story_box .product_menu .menu_box .item a .icon_hot { font-size: 60px; } } @media (max-width:1280px) { .inside_story_details .story_content .story_box .product_menu .menu_box .item a .icon_hot { font-size: 54px; } } @media (max-width:1024px) { .inside_story_details .story_content .story_box .product_menu .menu_box .item a .icon_hot { font-size: 43px; } } .inside_story_details .story_content .story_box .product_menu .menu_box .item a .icon_hot i { background: #e8ebf0; opacity: .6; } .inside_story_details .story_content .story_box .product_menu .menu_box .item a:hover .info .text_more .more { --color: #003281; } @media (max-width:990px) { .inside_story_details .story_content .story_box { display: block; } .inside_story_details .story_content .story_box .story_details { width: 100%; } .inside_story_details .story_content .story_box .product_menu { width: 100%; margin-top: 50px; } .inside_story_details .story_content .story_box .product_menu .menu_box { grid-template-columns: repeat(2, 1fr); grid-gap: 20px; } } @media (max-width:480px) { .inside_story_details .story_content .story_box .product_menu .menu_box { grid-template-columns: 100%; } } .inside_story_details .story_menu { width: 100%; height: auto; padding-top: clamp(50px, 5.20833333vw, 100px); padding-bottom: clamp(70px, 7.29166667vw, 140px); background: linear-gradient(#f3f6f9, transparent 20%); } .inside_story_details .story_menu .story_box { width: 100%; height: auto; } .inside_story_details .story_menu .story_box .story_items { width: 100%; height: auto; margin-top: clamp(25px, 2.60416667vw, 50px); } .inside_story_details .story_menu .story_box .story_items .swiper_box { width: 100%; height: auto; overflow: hidden; } .inside_story_details .story_menu .story_box .story_items .swiper_box .item { width: 33.33%; height: auto; overflow: hidden; } .inside_story_details .story_menu .story_box .story_items .swiper_box .item .img { width: 100%; height: auto; overflow: hidden; } .inside_story_details .story_menu .story_box .story_items .swiper_box .item .img .pb { padding-bottom: 51.724137931034482758620689655172%; } .inside_story_details .story_menu .story_box .story_items .swiper_box .item .img .ab { -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .inside_story_details .story_menu .story_box .story_items .swiper_box .item .img img { width: 100%; height: 100%; object-fit: cover; } .inside_story_details .story_menu .story_box .story_items .swiper_box .item .info { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); } .inside_story_details .story_menu .story_box .story_items .swiper_box .item .info .title { width: 100%; height: auto; font-size: 24px; color: #2c303d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width:1680px) { .inside_story_details .story_menu .story_box .story_items .swiper_box .item .info .title { font-size: 22px; } } @media (max-width:1440px) { .inside_story_details .story_menu .story_box .story_items .swiper_box .item .info .title { font-size: 20px; } } @media (max-width:1280px) { .inside_story_details .story_menu .story_box .story_items .swiper_box .item .info .title { font-size: 18px; } } @media (max-width:1024px) { .inside_story_details .story_menu .story_box .story_items .swiper_box .item .info .title { font-size: 16px; } } @media (max-width:768px) { .inside_story_details .story_menu .story_box .story_items .swiper_box .item .info .title { font-size: 15px; } } .inside_story_details .story_menu .story_box .story_items .swiper_box .item .info .details { width: 100%; height: calc(2em * 1.5); margin-top: 1em; font-size: 16px; font-family: 'Rubik', 'ff200'; color: #2c303d; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } @media (max-width:1440px) { .inside_story_details .story_menu .story_box .story_items .swiper_box .item .info .details { font-size: 14px; } } @media (max-width:1024px) { .inside_story_details .story_menu .story_box .story_items .swiper_box .item .info .details { font-size: 13px; } } @media (max-width:768px) { .inside_story_details .story_menu .story_box .story_items .swiper_box .item .info .details { font-size: 12px; } } .inside_story_details .story_menu .story_box .story_items .swiper_box .item .info .text_more { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); } .inside_story_details .story_menu .story_box .story_items .swiper_box .item .info .text_more .more { --color: #003281; } .inside_story_details .story_menu .story_box .story_items .swiper_box .item:hover .img .ab { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .inside_story_details .story_menu .story_box .story_items .swiper_box .item:hover .info .text_more .more { --color: #f39800; } .inside_story_details .story_menu .story_box .story_items .swiper_pager .pager { margin-top: clamp(25px, 2.60416667vw, 50px); } .inside_story_details .story_menu .story_box .story_items .swiper_pager.active { display: none; } /* ----- 鍞悗鏈嶅姟 ----- */ .inside_after_head { width: 100%; height: auto; padding-top: 130px; overflow: hidden; } @media (max-width:1366px) { .inside_after_head { padding-top: 120px; } } @media (max-width:990px) { .inside_after_head { padding-top: 60px; } } .inside_after_head .navigation { padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(20px, 2.08333333vw, 40px); } .inside_after_head .after_head { width: 100%; height: auto; } .inside_after_head .after_head .after_box { width: 100%; height: auto; padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(20px, 2.08333333vw, 40px); } .inside_after_head .after_head .after_box .after_title { width: 100%; height: auto; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_after_head .after_head .after_box .after_title::after { content: ''; width: 100%; height: 1px; position: absolute; bottom: 0; left: 0; z-index: 1; background: #d4e1f3; } .inside_after_head .after_head .after_box .after_title .block_title .details { padding-bottom: clamp(15px, 1.5625vw, 30px); font-size: 18px; opacity: .8; } @media (max-width:1440px) { .inside_after_head .after_head .after_box .after_title .block_title .details { font-size: 16px; } } @media (max-width:1024px) { .inside_after_head .after_head .after_box .after_title .block_title .details { font-size: 14px; } } @media (max-width:768px) { .inside_after_head .after_head .after_box .after_title .block_title .details { font-size: 13px; } } .inside_after_head .after_head .after_box .after_title .images { width: 47.986111111111111111111111111111%; font-size: 0; -webkit-box-self: end; -ms-align-self: end; -webkit-align-self: end; align-self: end; text-align: right; } @media (max-width:768px) { .inside_after_head .after_head .after_box .after_title { display: block; } .inside_after_head .after_head .after_box .after_title .block_title { width: 100%; } .inside_after_head .after_head .after_box .after_title .images { width: 100%; } } .inside_after { width: 100%; height: auto; overflow: hidden; /* 鍞悗鏀寔 */ /* 鏈嶅姟椤圭洰 */ /* 寤朵繚鏈嶅姟鍖 */ } .inside_after .after_1 { width: 100%; height: auto; } .inside_after .after_1 .after_box { width: 100%; height: auto; padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(40px, 4.16666667vw, 80px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_after .after_1 .after_box .after_title { width: 25%; height: auto; } .inside_after .after_1 .after_box .after_title .inside_title { padding-bottom: .83em; font-size: 36px; border-bottom: 1px solid #eef0f2; } @media (max-width:1680px) { .inside_after .after_1 .after_box .after_title .inside_title { font-size: 32px; } } @media (max-width:1440px) { .inside_after .after_1 .after_box .after_title .inside_title { font-size: 28px; } } @media (max-width:1280px) { .inside_after .after_1 .after_box .after_title .inside_title { font-size: 24px; } } @media (max-width:1024px) { .inside_after .after_1 .after_box .after_title .inside_title { font-size: 22px; } } @media (max-width:768px) { .inside_after .after_1 .after_box .after_title .inside_title { font-size: 20px; } } .inside_after .after_1 .after_box .after_title .inside_title .title { line-height: 1; } .inside_after .after_1 .after_box .after_title .content { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); } .inside_after .after_1 .after_box .after_title .content .phone_box { width: 100%; height: auto; } .inside_after .after_1 .after_box .after_title .content .phone_box .word { font-size: 16px; font-family: 'Rubik', 'ff200'; } @media (max-width:1440px) { .inside_after .after_1 .after_box .after_title .content .phone_box .word { font-size: 14px; } } @media (max-width:1024px) { .inside_after .after_1 .after_box .after_title .content .phone_box .word { font-size: 13px; } } @media (max-width:768px) { .inside_after .after_1 .after_box .after_title .content .phone_box .word { font-size: 12px; } } .inside_after .after_1 .after_box .after_title .content .phone_box .phone { margin-top: .2em; font-size: 30px; font-family: 'Orbitron', 'ff800'; } @media (max-width:1680px) { .inside_after .after_1 .after_box .after_title .content .phone_box .phone { font-size: 26px; } } @media (max-width:1440px) { .inside_after .after_1 .after_box .after_title .content .phone_box .phone { font-size: 24px; } } @media (max-width:1280px) { .inside_after .after_1 .after_box .after_title .content .phone_box .phone { font-size: 22px; } } @media (max-width:1024px) { .inside_after .after_1 .after_box .after_title .content .phone_box .phone { font-size: 20px; } } @media (max-width:768px) { .inside_after .after_1 .after_box .after_title .content .phone_box .phone { font-size: 18px; } } .inside_after .after_1 .after_box .after_title .content .details { width: 100%; height: auto; margin-top: 2em; font-size: 16px; font-family: 'Rubik', 'ff200'; color: #2c303d; line-height: 1.5; } @media (max-width:1440px) { .inside_after .after_1 .after_box .after_title .content .details { font-size: 14px; } } @media (max-width:1024px) { .inside_after .after_1 .after_box .after_title .content .details { font-size: 13px; } } @media (max-width:768px) { .inside_after .after_1 .after_box .after_title .content .details { font-size: 12px; } } .inside_after .after_1 .after_box .after_title .content .details p:first-child ~ p { margin-top: .2em; } .inside_after .after_1 .after_box .after_form { width: 66.6667%; height: auto; padding-top: calc(1.83em - var(--h)); font-size: 36px; --h: 54px; } @media (max-width:1680px) { .inside_after .after_1 .after_box .after_form { font-size: 32px; } } @media (max-width:1440px) { .inside_after .after_1 .after_box .after_form { font-size: 28px; } } @media (max-width:1280px) { .inside_after .after_1 .after_box .after_form { font-size: 24px; } } @media (max-width:1024px) { .inside_after .after_1 .after_box .after_form { font-size: 22px; } } @media (max-width:768px) { .inside_after .after_1 .after_box .after_form { font-size: 20px; } } .inside_after .after_1 .after_box .after_form .layui-form { width: 100%; height: auto; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: min(1.5625vw, 30px) min(3.125vw, 60px); } .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item { width: 100%; height: auto; } .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item:last-child { margin: 0; } .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item[active] { grid-column: span 2; } .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-form-block { width: 100%; height: auto; font-size: 14px; color: #2c303d; } @media (max-width:1280px) { .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-form-block { font-size: 13px; } } @media (max-width:1024px) { .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-form-block { font-size: 12px; } } .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-input { width: 100%; height: var(--h); border-width: 0 0 1px 0; border-color: #e8e8ef; border-radius: 0; padding: 0; font-size: 14px; color: #2c303d; } @media (max-width:1280px) { .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-input { font-size: 13px; } } @media (max-width:1024px) { .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-input { font-size: 12px; } } .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-textarea { width: 100%; height: auto; margin-top: 14px; padding: 10px; font-size: 14px; color: #2c303d; } @media (max-width:1280px) { .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-textarea { font-size: 13px; } } @media (max-width:1024px) { .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-textarea { font-size: 12px; } } .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-input::-webkit-input-placeholder, .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-textarea::-webkit-input-placeholder { color: #2c303d; opacity: 1; } .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-input:-moz-placeholder, .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-textarea:-moz-placeholder { color: #2c303d; opacity: 1; } .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-input::-moz-placeholder, .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-textarea::-moz-placeholder { color: #2c303d; opacity: 1; } .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-input:-ms-input-placeholder, .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-textarea:-ms-input-placeholder { color: #2c303d; opacity: 1; } .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-form-select { width: 100%; height: 100%; } .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-form-select .layui-select-title .layui-edge { width: 7px; height: 7px; border: 0; margin: -3.5px 0 0; -webkit-mask: url('../svg/icon_down2.svg') no-repeat center; background: #2c303d; transform-origin: center; } .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-form-select dl { top: var(--h); max-height: 200px; padding: 10px 0; background: #F8F8F8; scrollbar-width: thin; scrollbar-color: #f39800 transparent; } .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-form-select dl::-webkit-scrollbar { width: 2px; height: 2px; background-color: #f5f5f5; } .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-form-select dl::-webkit-scrollbar-thumb { background-color: #f39800; border-radius: 10px; } .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-form-select dl dd { height: auto; line-height: 1.2; background: transparent; text-align: left; font-size: 14px; color: #000; opacity: .4; padding: 10px 15px 10px 10px !important; } @media (max-width:1280px) { .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-form-select dl dd { font-size: 13px; } } @media (max-width:1024px) { .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-form-select dl dd { font-size: 12px; } } .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-form-select dl dd.layui-this { background: rgba(245, 150, 0, 0.1); opacity: 1; font-weight: normal; color: #f39800; } .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-form-selectup dl { top: auto; bottom: var(--h); } .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-btn { width: auto; min-width: 140px; height: 60px; background: #f39800; border: 0; font-size: 16px; font-family: 'Rubik', 'ff800'; color: #FFF; } @media (max-width:1440px) { .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-btn { font-size: 14px; } } @media (max-width:1024px) { .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-btn { font-size: 13px; } } @media (max-width:768px) { .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-btn { font-size: 12px; } } .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-btn.layui-btn-primary { background: #e7e7ef; color: #2c303d; } .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-btn:hover { background: #003281; color: #FFF; opacity: 1; } @media (max-width:1440px) { .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-btn { min-width: 120px; height: 54px; } } @media (max-width:1280px) { .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-btn { min-width: 100px; height: 48px; } } @media (max-width:1024px) { .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-btn { height: 44px; } } @media (max-width:768px) { .inside_after .after_1 .after_box .after_form .layui-form .layui-form-item .layui-btn { height: 40px; } } @media (max-width:768px) { .inside_after .after_1 .after_box { display: block; } .inside_after .after_1 .after_box .after_title { width: 100%; } .inside_after .after_1 .after_box .after_form { width: 100%; margin-top: 50px; padding: 0; } } .inside_after .after_2 { width: 100%; height: auto; padding-top: clamp(40px, 4.16666667vw, 80px); } .inside_after .after_2 .after_box { width: 100%; height: auto; margin-top: clamp(17px, 1.77083333vw, 34px); background: #d4e3ea; position: relative; overflow: hidden; } .inside_after .after_2 .after_box .info_box { width: 100%; height: auto; padding-top: clamp(60px, 6.25vw, 120px); padding-bottom: clamp(60px, 6.25vw, 120px); } .inside_after .after_2 .after_box .info_box .title { width: 100%; height: auto; font-size: 36px; font-family: 'Rubik', 'ff800'; color: #2c303d; } @media (max-width:1680px) { .inside_after .after_2 .after_box .info_box .title { font-size: 32px; } } @media (max-width:1440px) { .inside_after .after_2 .after_box .info_box .title { font-size: 28px; } } @media (max-width:1280px) { .inside_after .after_2 .after_box .info_box .title { font-size: 24px; } } @media (max-width:1024px) { .inside_after .after_2 .after_box .info_box .title { font-size: 22px; } } @media (max-width:768px) { .inside_after .after_2 .after_box .info_box .title { font-size: 20px; } } .inside_after .after_2 .after_box .info_box .subtitle { width: 100%; height: auto; margin-top: .2em; font-size: 24px; font-family: 'Rubik', 'ff100'; color: #2c303d; } @media (max-width:1680px) { .inside_after .after_2 .after_box .info_box .subtitle { font-size: 22px; } } @media (max-width:1440px) { .inside_after .after_2 .after_box .info_box .subtitle { font-size: 20px; } } @media (max-width:1280px) { .inside_after .after_2 .after_box .info_box .subtitle { font-size: 18px; } } @media (max-width:1024px) { .inside_after .after_2 .after_box .info_box .subtitle { font-size: 16px; } } @media (max-width:768px) { .inside_after .after_2 .after_box .info_box .subtitle { font-size: 15px; } } .inside_after .after_2 .after_box .info_box .text_more { margin-top: clamp(20px, 2.08333333vw, 40px); } .inside_after .after_2 .after_box .info_box .text_more a, .inside_after .after_2 .after_box .info_box .text_more .more { width: 140px; height: 40px; padding: 0 20px; border: 1px solid #a8bdc8; --color: #2c303d; } .inside_after .after_2 .after_box .info_box .text_more a:hover, .inside_after .after_2 .after_box .info_box .text_more .more:hover { border-color: #f39800; background: #f39800; --color: #FFF; } .inside_after .after_2 .after_box .info_box .text_more a:hover .word, .inside_after .after_2 .after_box .info_box .text_more .more:hover .word { flex: 1; } .inside_after .after_2 .after_box .icon_bg { width: 19.739583333333333333333333333333%; height: 100%; position: absolute; right: 0; top: 0; z-index: 2; pointer-events: none; display: none; } .inside_after .after_2 .after_box .icon_bg img { width: 100%; height: 100%; object-fit: cover; object-position: right 80%; } .inside_after .after_2 .after_box .images { width: 100%; height: 100%; position: absolute; right: 0; top: 0; z-index: 1; overflow: hidden; } .inside_after .after_2 .after_box .images img { width: 100%; height: 100%; object-fit: cover; } @media (max-width:768px) { .inside_after .after_2 .after_box .images img { object-position: right; } } @media (max-width:480px) { .inside_after .after_2 .after_box .images { display: none; } } .inside_after .after_3 { width: 100%; height: auto; } .inside_after .after_3 .after_box { width: 100%; height: auto; padding-top: clamp(50px, 5.20833333vw, 100px); padding-bottom: clamp(70px, 7.29166667vw, 140px); } .inside_after .after_3 .after_box .inside_headline .title { font-size: 36px; font-family: 'Rubik', 'ff800'; line-height: 1; } @media (max-width:1680px) { .inside_after .after_3 .after_box .inside_headline .title { font-size: 32px; } } @media (max-width:1440px) { .inside_after .after_3 .after_box .inside_headline .title { font-size: 28px; } } @media (max-width:1280px) { .inside_after .after_3 .after_box .inside_headline .title { font-size: 24px; } } @media (max-width:1024px) { .inside_after .after_3 .after_box .inside_headline .title { font-size: 22px; } } @media (max-width:768px) { .inside_after .after_3 .after_box .inside_headline .title { font-size: 20px; } } .inside_after .after_3 .after_box .after_title { width: 100%; height: auto; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .inside_after .after_3 .after_box .after_title::after { content: ''; width: 100%; height: 3px; position: absolute; top: 50%; left: 0; z-index: 1; background: #f5f5f5; transform: translateY(-50%); } .inside_after .after_3 .after_box .after_title .title { font-size: 30px; font-family: 'Rubik', 'ff800'; color: #f39800; line-height: 1; position: relative; z-index: 5; background: #FFF; padding-right: .8em; } @media (max-width:1680px) { .inside_after .after_3 .after_box .after_title .title { font-size: 26px; } } @media (max-width:1440px) { .inside_after .after_3 .after_box .after_title .title { font-size: 24px; } } @media (max-width:1280px) { .inside_after .after_3 .after_box .after_title .title { font-size: 22px; } } @media (max-width:1024px) { .inside_after .after_3 .after_box .after_title .title { font-size: 20px; } } @media (max-width:768px) { .inside_after .after_3 .after_box .after_title .title { font-size: 18px; } } .inside_after .after_3 .after_box .after_first { width: 100%; height: auto; margin-top: clamp(18px, 1.875vw, 36px); } .inside_after .after_3 .after_box .after_first .after_menu { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; } .inside_after .after_3 .after_box .after_first .after_menu .item { width: 100%; height: auto; padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(15px, 1.5625vw, 30px); background: #f6f7fb; overflow: hidden; } .inside_after .after_3 .after_box .after_first .after_menu .item .info { width: 100%; height: 100%; padding-left: clamp(10px, 1.04166667vw, 20px); padding-right: clamp(10px, 1.04166667vw, 20px); position: relative; z-index: 1; overflow: hidden; } .inside_after .after_3 .after_box .after_first .after_menu .item .info .title { width: 100%; height: auto; position: relative; z-index: 1; line-height: 1.2; font-size: 24px; font-family: 'Rubik', 'ff800'; color: #2c303d; } @media (max-width:1680px) { .inside_after .after_3 .after_box .after_first .after_menu .item .info .title { font-size: 22px; } } @media (max-width:1440px) { .inside_after .after_3 .after_box .after_first .after_menu .item .info .title { font-size: 20px; } } @media (max-width:1280px) { .inside_after .after_3 .after_box .after_first .after_menu .item .info .title { font-size: 18px; } } @media (max-width:1024px) { .inside_after .after_3 .after_box .after_first .after_menu .item .info .title { font-size: 16px; } } @media (max-width:768px) { .inside_after .after_3 .after_box .after_first .after_menu .item .info .title { font-size: 15px; } } .inside_after .after_3 .after_box .after_first .after_menu .item .info .details { width: 100%; height: auto; min-height: calc(6em * 1.5); margin-top: clamp(20px, 2.08333333vw, 40px); font-size: 16px; font-family: 'Rubik', 'ff200'; color: #2c303d; line-height: 1.5; } @media (max-width:1440px) { .inside_after .after_3 .after_box .after_first .after_menu .item .info .details { font-size: 14px; } } @media (max-width:1024px) { .inside_after .after_3 .after_box .after_first .after_menu .item .info .details { font-size: 13px; } } @media (max-width:768px) { .inside_after .after_3 .after_box .after_first .after_menu .item .info .details { font-size: 12px; } } .inside_after .after_3 .after_box .after_first .after_menu .item .info::after { content: ''; width: 4px; height: .8em; position: absolute; top: .1em; left: 0; z-index: 1; font-size: 24px; background: #f39800; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1680px) { .inside_after .after_3 .after_box .after_first .after_menu .item .info::after { font-size: 22px; } } @media (max-width:1440px) { .inside_after .after_3 .after_box .after_first .after_menu .item .info::after { font-size: 20px; } } @media (max-width:1280px) { .inside_after .after_3 .after_box .after_first .after_menu .item .info::after { font-size: 18px; } } @media (max-width:1024px) { .inside_after .after_3 .after_box .after_first .after_menu .item .info::after { font-size: 16px; } } @media (max-width:768px) { .inside_after .after_3 .after_box .after_first .after_menu .item .info::after { font-size: 15px; } } .inside_after .after_3 .after_box .after_last { width: 100%; height: auto; margin-top: clamp(60px, 6.25vw, 120px); } .inside_after .after_3 .after_box .after_last .after_menu { width: 100%; height: auto; margin-top: clamp(22.5px, 2.34375vw, 45px); } .inside_after .after_3 .after_box .after_last .after_menu .items { width: 100%; height: auto; border-top: 2px solid #eff0f4; /* display: grid; grid-template-columns: 14% 15% 15% 15% 15% 26%; */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .inside_after .after_3 .after_box .after_last .after_menu .items .item { flex: 1; width: auto; height: auto; padding-left: clamp(10px, 1.04166667vw, 20px); padding-right: clamp(10px, 1.04166667vw, 20px); padding-top: clamp(15px, 1.5625vw, 30px); padding-bottom: clamp(15px, 1.5625vw, 30px); } .inside_after .after_3 .after_box .after_last .after_menu .items .item .title { width: 100%; height: auto; font-size: 18px; font-family: 'Rubik', 'ff800'; color: #2c303d; white-space: nowrap; text-align: center; } @media (max-width:1440px) { .inside_after .after_3 .after_box .after_last .after_menu .items .item .title { font-size: 16px; } } @media (max-width:1024px) { .inside_after .after_3 .after_box .after_last .after_menu .items .item .title { font-size: 14px; } } @media (max-width:768px) { .inside_after .after_3 .after_box .after_last .after_menu .items .item .title { font-size: 13px; } } .inside_after .after_3 .after_box .after_last .after_menu .items .item.active { grid-column: span 5; } .inside_after .after_3 .after_box .after_last .after_menu .items .item .details { width: 100%; height: auto; font-size: 14px; font-family: 'Rubik', 'ff200'; color: #2c303d; line-height: 1.5; } @media (max-width:1280px) { .inside_after .after_3 .after_box .after_last .after_menu .items .item .details { font-size: 13px; } } @media (max-width:1024px) { .inside_after .after_3 .after_box .after_last .after_menu .items .item .details { font-size: 12px; } } .inside_after .after_3 .after_box .after_last .after_menu .items .item .one { width: 100%; height: auto; position: relative; z-index: 1; font-size: 14px; font-family: 'Rubik', 'ff200'; padding-left: 1em; } @media (max-width:1280px) { .inside_after .after_3 .after_box .after_last .after_menu .items .item .one { font-size: 13px; } } @media (max-width:1024px) { .inside_after .after_3 .after_box .after_last .after_menu .items .item .one { font-size: 12px; } } .inside_after .after_3 .after_box .after_last .after_menu .items .item .one::after { content: ''; width: var(--size); height: var(--size); position: absolute; top: .55em; left: 0; z-index: 1; background: #1163c8; --size: 4px; } .inside_after .after_3 .after_box .after_last .after_menu .items .item:first-child ~ .item { border-left: 1px solid #eff0f4; border-right: 1px solid #eff0f4; } .inside_after .after_3 .after_box .after_last .after_menu .items .item:last-child { border-right: 0 !important; } .inside_after .after_3 .after_box .after_last .after_menu .items:first-child .item { background: #cfd8e9; border: 0 !important; } .inside_after .after_3 .after_box .after_last .after_menu .items:first-child .item .title { color: #FFF; } .inside_after .after_3 .after_box .after_last .after_menu .items:first-child .item:first-child .title { color: #2c303d; } .inside_after .after_3 .after_box .after_last .after_menu .items:first-child .item:nth-child(2) { background: #8399c1; } .inside_after .after_3 .after_box .after_last .after_menu .items:first-child .item:nth-child(3) { background: #5983d5; } .inside_after .after_3 .after_box .after_last .after_menu .items:first-child .item:nth-child(4) { background: #3296e2; } .inside_after .after_3 .after_box .after_last .after_menu .items:first-child .item:nth-child(5) { background: #6a6fa7; } .inside_after .after_3 .after_box .after_last .after_menu .items:first-child .item:nth-child(6) { background: #425d92; } @media (max-width:990px) { .inside_after .after_3 .after_box .after_first .after_menu .item .info::after { width: 3px; } .inside_after .after_3 .after_box .after_last .after_menu { overflow-x: auto; } .inside_after .after_3 .after_box .after_last .after_menu .items { width: 1024px; } } @media (max-width:768px) { .inside_after .after_3 .after_box .after_first .after_menu { grid-template-columns: repeat(2, 1fr); } .inside_after .after_3 .after_box .after_first .after_menu .item .details { min-height: auto; } } @media (max-width:480px) { .inside_after .after_3 .after_box .after_first .after_menu { grid-template-columns: repeat(2, 1fr); } } /* 鑷姪鎶ュ崟 */ .inside_service_form { width: 100%; height: auto; position: relative; z-index: 1; } .inside_service_form .content { width: 100%; height: auto; padding-top: clamp(20px, 2.08333333vw, 40px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_service_form .content .inside_title { height: 100%; margin-top: clamp(30px, 3.125vw, 60px); } .inside_service_form .content .info_box { width: 75%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row-reverse; -moz-flex-direction: row-reverse; -ms-flex-direction: row-reverse; -o-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; grid-gap: min(3.125vw, 60px); } .inside_service_form .content .info_box .info { width: auto; height: auto; padding-top: clamp(30px, 3.125vw, 60px); flex: 1; } .inside_service_form .content .info_box .info .title { width: 100%; height: auto; font-size: 24px; color: #2c303d; } @media (max-width:1680px) { .inside_service_form .content .info_box .info .title { font-size: 22px; } } @media (max-width:1440px) { .inside_service_form .content .info_box .info .title { font-size: 20px; } } @media (max-width:1280px) { .inside_service_form .content .info_box .info .title { font-size: 18px; } } @media (max-width:1024px) { .inside_service_form .content .info_box .info .title { font-size: 16px; } } @media (max-width:768px) { .inside_service_form .content .info_box .info .title { font-size: 15px; } } .inside_service_form .content .info_box .info .details { width: 100%; height: auto; margin-top: 1.2em; font-size: 16px; font-family: 'Rubik', 'ff200'; color: #2c303d; line-height: 1.5; } @media (max-width:1440px) { .inside_service_form .content .info_box .info .details { font-size: 14px; } } @media (max-width:1024px) { .inside_service_form .content .info_box .info .details { font-size: 13px; } } @media (max-width:768px) { .inside_service_form .content .info_box .info .details { font-size: 12px; } } .inside_service_form .content .info_box .qrcode { width: 20.37037037037037037037037037037%; height: auto; position: relative; z-index: 1; } .inside_service_form .content .info_box .qrcode .img { width: 50%; max-width: 90px; height: auto; position: absolute; left: 50%; top: min(3.125vw, 60px); transform: translateX(-50%); } .inside_service_form .content .info_box .qrcode .bg { width: 100%; height: auto; } @media (max-width:768px) { .inside_service_form .content { display: block; overflow: hidden; } .inside_service_form .content .info_box { width: 100%; margin: 50px 0 0; } .inside_service_form .content .info_box .qrcode { width: 150px; } .inside_service_form .content .info_box .qrcode .img { width: 100%; max-width: 90px; top: 40px; /*position: relative; left: 0; top: 0; transform: translate(0);*/ } .inside_service_form .content .info_box .info { padding: 0; } } @media (max-width:400px) { .inside_service_form .content .info_box { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; margin: 50px 0 0; } .inside_service_form .content .info_box .info { width: 100%; } .inside_service_form .content .info_box .qrcode { margin-top: 20px; } } .inside_service_form .images { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; } .inside_service_form .images img { width: 100%; height: 100%; object-fit: cover; } /* 鍐呴〉 鍦ㄧ嚎鏀寔 */ /* 浜у搧鏇挎崲鏌ヨ */ .inside_product_search { width: 100%; height: auto; padding-top: 130px; position: relative; z-index: 5; } @media (max-width:1366px) { .inside_product_search { padding-top: 120px; } } @media (max-width:990px) { .inside_product_search { padding-top: 60px; } } @media (max-width:990px) { .inside_product_search { padding-top: 60px; } } .inside_product_search .search_1 { width: 100%; height: auto; position: relative; z-index: 1; overflow: hidden; } .inside_product_search .search_1 .search_box { width: 100%; height: auto; padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(32.5px, 3.38541667vw, 65px); } .inside_product_search .search_1 .search_box .search_title { width: 100%; height: auto; display: grid; grid-template-columns: min(14%, 180px) 1fr 1fr; } .inside_product_search .search_1 .search_box .search_title .one { width: 100%; height: auto; font-size: 20px; font-family: 'Rubik', 'ff800'; color: #FFF; } @media (max-width:1680px) { .inside_product_search .search_1 .search_box .search_title .one { font-size: 18px; } } @media (max-width:1440px) { .inside_product_search .search_1 .search_box .search_title .one { font-size: 17px; } } @media (max-width:1280px) { .inside_product_search .search_1 .search_box .search_title .one { font-size: 16px; } } @media (max-width:1024px) { .inside_product_search .search_1 .search_box .search_title .one { font-size: 15px; } } @media (max-width:768px) { .inside_product_search .search_1 .search_box .search_title .one { font-size: 14px; } } .inside_product_search .search_1 .search_box .search_title .one:first-child ~ .one { padding-left: clamp(50px, 5.20833333vw, 100px); padding-right: clamp(50px, 5.20833333vw, 100px); } .inside_product_search .search_1 .search_box .search_menu { width: 100%; height: auto; margin-top: clamp(10px, 1.04166667vw, 20px); } .inside_product_search .search_1 .search_box .search_menu .item { width: 100%; height: auto; background: #FFF; display: grid; grid-template-columns: 14% 43% 43%; } .inside_product_search .search_1 .search_box .search_menu .item .one { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 10px 0; font-size: 14px; color: #2c303d; word-wrap: break-word; word-break: break-all; overflow: hidden; } @media (max-width:1280px) { .inside_product_search .search_1 .search_box .search_menu .item .one { font-size: 13px; } } @media (max-width:1024px) { .inside_product_search .search_1 .search_box .search_menu .item .one { font-size: 12px; } } .inside_product_search .search_1 .search_box .search_menu .item .one:first-child { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; font-size: 16px; color: #FFF; } @media (max-width:1440px) { .inside_product_search .search_1 .search_box .search_menu .item .one:first-child { font-size: 14px; } } @media (max-width:1024px) { .inside_product_search .search_1 .search_box .search_menu .item .one:first-child { font-size: 13px; } } @media (max-width:768px) { .inside_product_search .search_1 .search_box .search_menu .item .one:first-child { font-size: 12px; } } .inside_product_search .search_1 .search_box .search_menu .item .one:first-child ~ .one { padding-left: clamp(50px, 5.20833333vw, 100px); padding-right: clamp(50px, 5.20833333vw, 100px); } .inside_product_search .search_1 .search_box .search_menu .item .one:last-child { border-left: 1px solid #e2ebf0; } .inside_product_search .search_1 .search_box .search_menu .item.first .one:first-child { background: #0867d1; } .inside_product_search .search_1 .search_box .search_menu .item.last .one:first-child { background: #0b79f4; } .inside_product_search .search_1 .search_box .search_menu .item.last .one:first-child ~ .one { border-top: 1px solid #e2ebf0; } @media (max-width:990px) { .inside_product_search .search_1 .search_box .search_title .one:first-child ~ .one { padding: 0 15px; } .inside_product_search .search_1 .search_box .search_menu .item { grid-template-columns: 20% 40% 40%; } .inside_product_search .search_1 .search_box .search_menu .item .one:first-child ~ .one { padding: 10px 15px; } } .inside_product_search .search_1 .images { width: 100%; height: 100%; position: absolute; right: 0; top: 0; z-index: 1; overflow: hidden; } .inside_product_search .search_1 .images img { width: 100%; height: 100%; object-fit: cover; } .inside_product_search .search_2 { width: 100%; height: auto; overflow: hidden; } .inside_product_search .search_2 .search_box { width: 100%; height: auto; padding: 20px 0; } .inside_product_search .search_2 .search_box form { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; grid-gap: 10px; --h: 48px; --r: 10px; --p: 30px; } .inside_product_search .search_2 .search_box form .layui_item { width: 42%; height: var(--h); } .inside_product_search .search_2 .search_box form .layui_item input { width: 100%; height: 100%; padding: 0 20px; border: 1px solid #dce5ec; border-radius: var(--r); font-size: 14px; color: #2c303d; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .inside_product_search .search_2 .search_box form .layui_item input { font-size: 13px; } } @media (max-width:1024px) { .inside_product_search .search_2 .search_box form .layui_item input { font-size: 12px; } } .inside_product_search .search_2 .search_box form .layui_item input::-webkit-input-placeholder { color: #2c303d; opacity: 1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_search .search_2 .search_box form .layui_item input:-moz-placeholder { color: #2c303d; opacity: 1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_search .search_2 .search_box form .layui_item input::-moz-placeholder { color: #2c303d; opacity: 1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_search .search_2 .search_box form .layui_item input:-ms-input-placeholder { color: #2c303d; opacity: 1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_search .search_2 .search_box form .layui_item input:focus { background: rgba(240, 150, 0, 0.1); } .inside_product_search .search_2 .search_box form .layui_item input:focus::-webkit-input-placeholder { opacity: .4; } .inside_product_search .search_2 .search_box form .layui_item input:focus:-moz-placeholder { opacity: .4; } .inside_product_search .search_2 .search_box form .layui_item input:focus::-moz-placeholder { opacity: .4; } .inside_product_search .search_2 .search_box form .layui_item input:focus:-ms-input-placeholder { opacity: .4; } .inside_product_search .search_2 .search_box form .layui_submit { width: auto; height: var(--h); } .inside_product_search .search_2 .search_box form .layui_submit button { width: 100%; height: 100%; padding: 0 30px; background: #0867d1; border-radius: var(--r); font-size: 16px; color: #FFF; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1440px) { .inside_product_search .search_2 .search_box form .layui_submit button { font-size: 14px; } } @media (max-width:1024px) { .inside_product_search .search_2 .search_box form .layui_submit button { font-size: 13px; } } @media (max-width:768px) { .inside_product_search .search_2 .search_box form .layui_submit button { font-size: 12px; } } .inside_product_search .search_2 .search_box form .layui_submit button i { margin-right: 10px; } .inside_product_search .search_2 .search_box form .layui_submit button:hover { background: #f39800; opacity: 1; } .inside_product_search .search_2 .search_box form .layui_tips { flex: 1; font-size: 14px; color: #2c303d; } @media (max-width:1280px) { .inside_product_search .search_2 .search_box form .layui_tips { font-size: 13px; } } @media (max-width:1024px) { .inside_product_search .search_2 .search_box form .layui_tips { font-size: 12px; } } @media (max-width:1440px) { .inside_product_search .search_2 .search_box form { --h: 44px; --r: 8px; } } @media (max-width:1280px) { .inside_product_search .search_2 .search_box form { --h: 40px; --r: 6px; } } @media (max-width:1024px) { .inside_product_search .search_2 .search_box form .layui_item input { padding: 0 15px; } .inside_product_search .search_2 .search_box form .layui_submit button { padding: 0 20px; } } @media (max-width:768px) { .inside_product_search .search_2 .search_box form { display: grid; grid-template-columns: 1fr 120px; grid-gap: 20px 10px; } .inside_product_search .search_2 .search_box form .layui_item { width: 100%; } .inside_product_search .search_2 .search_box form .layui_tips { width: 100%; grid-column: span 2; } } @media (max-width:480px) { .inside_product_search .search_2 .search_box form { grid-template-columns: 100%; grid-gap: 10px; } .inside_product_search .search_2 .search_box form .layui_tips { grid-column: span 1; } } .inside_product_search .search_3 { width: 100%; height: auto; background: #e8eff3; position: relative; z-index: 1; overflow: hidden; } .inside_product_search .search_3 .search_box { width: 100%; height: auto; padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(100px, 10.41666667vw, 200px); } .inside_product_search .search_3 .search_box .search_title { width: 100%; height: auto; display: grid; grid-template-columns: 14% 43% 43%; } .inside_product_search .search_3 .search_box .search_title .one { width: 100%; height: auto; font-size: 20px; font-family: 'Rubik', 'ff800'; color: #2c303d; word-wrap: break-word; word-break: break-all; overflow: hidden; } @media (max-width:1680px) { .inside_product_search .search_3 .search_box .search_title .one { font-size: 18px; } } @media (max-width:1440px) { .inside_product_search .search_3 .search_box .search_title .one { font-size: 17px; } } @media (max-width:1280px) { .inside_product_search .search_3 .search_box .search_title .one { font-size: 16px; } } @media (max-width:1024px) { .inside_product_search .search_3 .search_box .search_title .one { font-size: 15px; } } @media (max-width:768px) { .inside_product_search .search_3 .search_box .search_title .one { font-size: 14px; } } .inside_product_search .search_3 .search_box .search_title .one:first-child ~ .one { padding-left: clamp(50px, 5.20833333vw, 100px); padding-right: clamp(50px, 5.20833333vw, 100px); } .inside_product_search .search_3 .search_box .search_menu { width: 100%; height: auto; margin-top: clamp(10px, 1.04166667vw, 20px); } .inside_product_search .search_3 .search_box .search_menu .menu { width: 100%; height: auto; } .inside_product_search .search_3 .search_box .search_menu .menu .item { width: 100%; height: auto; background: #FFF; display: grid; grid-template-columns: 14% 43% 43%; } .inside_product_search .search_3 .search_box .search_menu .menu .item .one { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 10px 0; font-size: 14px; color: #2c303d; word-wrap: break-word; word-break: break-all; overflow: hidden; } @media (max-width:1280px) { .inside_product_search .search_3 .search_box .search_menu .menu .item .one { font-size: 13px; } } @media (max-width:1024px) { .inside_product_search .search_3 .search_box .search_menu .menu .item .one { font-size: 12px; } } .inside_product_search .search_3 .search_box .search_menu .menu .item .one:first-child { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; font-size: 16px; color: #FFF; } @media (max-width:1440px) { .inside_product_search .search_3 .search_box .search_menu .menu .item .one:first-child { font-size: 14px; } } @media (max-width:1024px) { .inside_product_search .search_3 .search_box .search_menu .menu .item .one:first-child { font-size: 13px; } } @media (max-width:768px) { .inside_product_search .search_3 .search_box .search_menu .menu .item .one:first-child { font-size: 12px; } } .inside_product_search .search_3 .search_box .search_menu .menu .item .one:first-child ~ .one { padding-left: clamp(50px, 5.20833333vw, 100px); padding-right: clamp(50px, 5.20833333vw, 100px); } .inside_product_search .search_3 .search_box .search_menu .menu .item .one:last-child { border-left: 1px solid #e2ebf0; } .inside_product_search .search_3 .search_box .search_menu .menu .item.first .one:first-child { background: #0867d1; } .inside_product_search .search_3 .search_box .search_menu .menu .item.last .one:first-child { background: #0b79f4; } .inside_product_search .search_3 .search_box .search_menu .menu .item.last .one:first-child ~ .one { border-top: 1px solid #e2ebf0; } .inside_product_search .search_3 .search_box .search_menu .menu:first-child ~ .menu { margin-top: clamp(10px, 1.04166667vw, 20px); } .inside_product_search .search_3 .search_box .search_menu .layui-flow-more { margin-top: clamp(10px, 1.04166667vw, 20px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .inside_product_search .search_3 .search_box .search_menu .layui-flow-more a { width: auto; height: 44px; padding: 0 15px; text-align: center; background: #0867d1; font-size: 14px; color: #FFF; line-height: 44px; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_search .search_3 .search_box .search_menu .layui-flow-more a * { background: transparent; font-size: 14px; color: #FFF; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_search .search_3 .search_box .search_menu .layui-flow-more a:hover { background: #f39800; color: #FFF; } .inside_product_search .search_3 .search_box .search_menu .layui-flow-more a:hover * { background: transparent; color: #FFF; } .inside_product_search .search_3 .search_box .search_function { width: 100%; height: auto; margin-top: clamp(10px, 1.04166667vw, 20px); } .inside_product_search .search_3 .search_box .search_function .block_more a { background: #0867d1; } .inside_product_search .search_3 .search_box .search_function .block_more:first-child ~ .block_more { margin-top: clamp(5px, 0.52083333vw, 10px); } .inside_product_search .search_3 .search_box .search_function .block_more { -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; --h: 48px; } .inside_product_search .search_3 .search_box .search_function .block_more a { width: 25%; height: var(--h); } .inside_product_search .search_3 .search_box .search_function .block_more a:hover { background: #f39800; } @media (max-width:1440px) { .inside_product_search .search_3 .search_box .search_function .block_more { --h: 44px; } } @media (max-width:1280px) { .inside_product_search .search_3 .search_box .search_function .block_more { --h: 40px; } } @media (max-width:990px) { .inside_product_search .search_3 .search_box .search_title { grid-template-columns: 20% 40% 40%; } .inside_product_search .search_3 .search_box .search_title .one:first-child ~ .one { padding: 0 15px; } .inside_product_search .search_3 .search_box .search_menu .menu .item { grid-template-columns: 20% 40% 40%; } .inside_product_search .search_3 .search_box .search_menu .menu .item .one:first-child ~ .one { padding: 10px 15px; } } .inside_product_search .search_3 .images { width: 100%; height: 100%; position: absolute; right: 0; top: 0; z-index: 1; overflow: hidden; } .inside_product_search .search_3 .images img { width: 100%; height: 100%; object-fit: cover; } /* 浜у搧閫夊瀷 鍒楄〃 */ .inside_product_selection { width: 100%; height: auto; padding-top: 130px; position: relative; z-index: 1; overflow: hidden; /* 鐑棬閫夊瀷浜у搧 */ } @media (max-width:1366px) { .inside_product_selection { padding-top: 120px; } } @media (max-width:990px) { .inside_product_selection { padding-top: 60px; } } @media (max-width:990px) { .inside_product_selection { padding-top: 60px; } } .inside_product_selection .selection_1 { width: 100%; height: auto; position: relative; z-index: 1; overflow: hidden; } .inside_product_selection .selection_1 .selection_box { width: 100%; height: auto; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_product_selection .selection_1 .selection_box .selection_search { width: 29.166666666666666666666666666667%; padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(40px, 4.16666667vw, 80px); padding-right: clamp(30px, 3.125vw, 60px); position: relative; z-index: 1; } .inside_product_selection .selection_1 .selection_box .selection_search::after { content: ''; width: 50vw; height: 100%; position: absolute; top: 0; right: 0; z-index: 1; background: #0866d1 url('../images/selection_bg.jpg') no-repeat left top / cover; } .inside_product_selection .selection_1 .selection_box .selection_search .inside_headline { position: relative; z-index: 5; } .inside_product_selection .selection_1 .selection_box .selection_search .inside_headline .title { color: #FFF; } .inside_product_selection .selection_1 .selection_box .selection_search .selection_form { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); position: relative; z-index: 5; } .inside_product_selection .selection_1 .selection_box .selection_search .selection_form form { width: 100%; height: var(--size); background: #FFF; --size: 48px; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .inside_product_selection .selection_1 .selection_box .selection_search .selection_form form::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; pointer-events: none; border: 1px solid #f39800; opacity: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_selection .selection_1 .selection_box .selection_search .selection_form form input { flex: 1; height: 100%; padding: 0 20px; border: 0; font-size: 14px; color: #2c303d; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .inside_product_selection .selection_1 .selection_box .selection_search .selection_form form input { font-size: 13px; } } @media (max-width:1024px) { .inside_product_selection .selection_1 .selection_box .selection_search .selection_form form input { font-size: 12px; } } .inside_product_selection .selection_1 .selection_box .selection_search .selection_form form input:focus::-webkit-input-placeholder { opacity: .5; } .inside_product_selection .selection_1 .selection_box .selection_search .selection_form form input:focus:-moz-placeholder { opacity: .5; } .inside_product_selection .selection_1 .selection_box .selection_search .selection_form form input:focus::-moz-placeholder { opacity: .5; } .inside_product_selection .selection_1 .selection_box .selection_search .selection_form form input:focus:-ms-input-placeholder { opacity: .5; } .inside_product_selection .selection_1 .selection_box .selection_search .selection_form form .line { width: 1px; height: 40%; background: #e2ebf0; } .inside_product_selection .selection_1 .selection_box .selection_search .selection_form form .layui-btn { width: var(--size); height: var(--size); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; background: transparent; } .inside_product_selection .selection_1 .selection_box .selection_search .selection_form form .layui-btn i { font-size: 20px; color: #0867d1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1680px) { .inside_product_selection .selection_1 .selection_box .selection_search .selection_form form .layui-btn i { font-size: 18px; } } @media (max-width:1440px) { .inside_product_selection .selection_1 .selection_box .selection_search .selection_form form .layui-btn i { font-size: 17px; } } @media (max-width:1280px) { .inside_product_selection .selection_1 .selection_box .selection_search .selection_form form .layui-btn i { font-size: 16px; } } @media (max-width:1024px) { .inside_product_selection .selection_1 .selection_box .selection_search .selection_form form .layui-btn i { font-size: 15px; } } @media (max-width:768px) { .inside_product_selection .selection_1 .selection_box .selection_search .selection_form form .layui-btn i { font-size: 14px; } } .inside_product_selection .selection_1 .selection_box .selection_search .selection_form form.is_active::after { opacity: 1; } .inside_product_selection .selection_1 .selection_box .selection_search .selection_form form.active .layui-btn i { color: #f39800; } .inside_product_selection .selection_1 .selection_box .selection_menu { width: 62.5%; height: auto; padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(40px, 4.16666667vw, 80px); } .inside_product_selection .selection_1 .selection_box .selection_menu .selection_list { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 10px 6px; } .inside_product_selection .selection_1 .selection_box .selection_menu .selection_list .item { width: 100%; height: 100%; position: relative; z-index: 1; } .inside_product_selection .selection_1 .selection_box .selection_menu .selection_list .item::after { content: ''; width: 80%; height: 70%; position: absolute; bottom: 0; left: 10%; z-index: 1; background: #0867d1; filter: blur(20px); opacity: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_selection .selection_1 .selection_box .selection_menu .selection_list .item a { width: 100%; height: 100%; display: block; padding: 15px; text-align: center; background: #FFF; position: relative; z-index: 5; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_selection .selection_1 .selection_box .selection_menu .selection_list .item .icon { width: 100%; height: 28px; font-size: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; display: none; } .inside_product_selection .selection_1 .selection_box .selection_menu .selection_list .item .title { margin-top: 10px; font-size: 14px; color: #0867d1; } @media (max-width:1280px) { .inside_product_selection .selection_1 .selection_box .selection_menu .selection_list .item .title { font-size: 13px; } } @media (max-width:1024px) { .inside_product_selection .selection_1 .selection_box .selection_menu .selection_list .item .title { font-size: 12px; } } .inside_product_selection .selection_1 .selection_box .selection_menu .selection_list .item:hover::after { opacity: 1; } .inside_product_selection .selection_1 .selection_box .selection_menu .selection_list .item:hover a { background: #0867d1; } .inside_product_selection .selection_1 .selection_box .selection_menu .selection_list .item:hover .icon { filter: brightness(0) invert(1); } .inside_product_selection .selection_1 .selection_box .selection_menu .selection_list .item:hover .title { color: #FFF; } @media (max-width:1024px) { .inside_product_selection .selection_1 .selection_box { display: block; } .inside_product_selection .selection_1 .selection_box .selection_search { width: 100%; padding: 40px 0; } .inside_product_selection .selection_1 .selection_box .selection_search::after { width: 100vw; left: 50%; transform: translateX(-50%); } .inside_product_selection .selection_1 .selection_box .selection_menu { width: 100%; height: auto; padding: 40px 0; } .inside_product_selection .selection_1 .selection_box .selection_menu .selection_list { grid-gap: 6px; } } @media (max-width:768px) { .inside_product_selection .selection_1 .selection_box .selection_menu .selection_list { grid-template-columns: repeat(4, 1fr); } } @media (max-width:480px) { .inside_product_selection .selection_1 .selection_box .selection_menu .selection_list { grid-template-columns: repeat(3, 1fr); } } @media (max-width:360px) { .inside_product_selection .selection_1 .selection_box .selection_menu .selection_list { grid-template-columns: repeat(2, 1fr); } } .inside_product_selection .selection_1 .images { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; background: rgba(226, 235, 240, 0.8); } .inside_product_selection .selection_1 .images img { width: 37.5%; height: 100%; object-fit: cover; opacity: 0; } .inside_product_selection .selection_2 { width: 100%; height: auto; } .inside_product_selection .selection_2 .selection_box { width: 100%; height: auto; padding-top: clamp(50px, 5.20833333vw, 100px); padding-bottom: clamp(70px, 7.29166667vw, 140px); } .inside_product_selection .selection_2 .selection_box .inside_title { padding-bottom: clamp(20px, 2.08333333vw, 40px); border-bottom: 2px solid #eef0f2; } .inside_product_selection .selection_2 .selection_box .inside_title .title { line-height: 1; } .inside_product_selection .selection_2 .selection_box .selection_main { width: 100%; height: auto; margin-top: clamp(20px, 2.08333333vw, 40px); display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 24px; } .inside_product_selection .selection_2 .selection_box .selection_main .item { width: 100%; height: auto; position: relative; z-index: 1; } .inside_product_selection .selection_2 .selection_box .selection_main .item::after { content: ''; width: 0; height: 4px; position: absolute; top: 0; right: 0; z-index: 10; background: #0867d1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_selection .selection_2 .selection_box .selection_main .item::before { content: ''; width: 80%; height: 80%; position: absolute; bottom: -10%; left: 10%; z-index: 1; background: #828895; filter: blur(30px); pointer-events: none; opacity: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_selection .selection_2 .selection_box .selection_main .item .center { width: 100%; height: auto; padding: var(--size) 0; background: #f6f7fb; position: relative; z-index: 5; --size: 60px; } .inside_product_selection .selection_2 .selection_box .selection_main .item .center .function_btn { width: 100%; height: var(--size); padding: 0 20px; position: absolute; left: 0; top: 0; z-index: 5; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; cursor: pointer; } .inside_product_selection .selection_2 .selection_box .selection_main .item .center .function_btn .collect { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; --color: #2c303d; opacity: .3; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_selection .selection_2 .selection_box .selection_main .item .center .function_btn .collect .icon { margin-right: 5px; } .inside_product_selection .selection_2 .selection_box .selection_main .item .center .function_btn .collect .icon i, .inside_product_selection .selection_2 .selection_box .selection_main .item .center .function_btn .collect .title { font-size: 14px; color: var(--color); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .inside_product_selection .selection_2 .selection_box .selection_main .item .center .function_btn .collect .icon i, .inside_product_selection .selection_2 .selection_box .selection_main .item .center .function_btn .collect .title { font-size: 13px; } } @media (max-width:1024px) { .inside_product_selection .selection_2 .selection_box .selection_main .item .center .function_btn .collect .icon i, .inside_product_selection .selection_2 .selection_box .selection_main .item .center .function_btn .collect .title { font-size: 12px; } } .inside_product_selection .selection_2 .selection_box .selection_main .item .center .function_btn .collect.active { --color: #f39800; opacity: 1; } .inside_product_selection .selection_2 .selection_box .selection_main .item .center .function_btn .collect:hover { opacity: 1; } .inside_product_selection .selection_2 .selection_box .selection_main .item .center .function_btn .increase { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; --color: #2c303d; opacity: .3; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_selection .selection_2 .selection_box .selection_main .item .center .function_btn .increase .icon { width: 11px; height: 11px; margin-right: 5px; position: relative; z-index: 1; overflow: hidden; } .inside_product_selection .selection_2 .selection_box .selection_main .item .center .function_btn .increase .icon::before, .inside_product_selection .selection_2 .selection_box .selection_main .item .center .function_btn .increase .icon::after { content: ''; width: 100%; height: 100%; position: absolute; background: var(--color); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_selection .selection_2 .selection_box .selection_main .item .center .function_btn .increase .icon::before { width: 3px; left: 4px; top: 0; } .inside_product_selection .selection_2 .selection_box .selection_main .item .center .function_btn .increase .icon::after { height: 3px; top: 4px; left: 0; } .inside_product_selection .selection_2 .selection_box .selection_main .item .center .function_btn .increase .title { font-size: 14px; color: var(--color); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .inside_product_selection .selection_2 .selection_box .selection_main .item .center .function_btn .increase .title { font-size: 13px; } } @media (max-width:1024px) { .inside_product_selection .selection_2 .selection_box .selection_main .item .center .function_btn .increase .title { font-size: 12px; } } .inside_product_selection .selection_2 .selection_box .selection_main .item .center .function_btn .increase.active { --color: #f39800; opacity: 1; } .inside_product_selection .selection_2 .selection_box .selection_main .item .center .function_btn .increase:hover { opacity: 1; } .inside_product_selection .selection_2 .selection_box .selection_main .item .center .img { width: 50%; height: auto; margin: 0 auto 20px; position: relative; z-index: 4; } .inside_product_selection .selection_2 .selection_box .selection_main .item .center .img .pb { padding-bottom: 120%; } .inside_product_selection .selection_2 .selection_box .selection_main .item .center .info { width: 100%; height: var(--size); position: absolute; bottom: 0; left: 0; z-index: 5; text-align: center; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_selection .selection_2 .selection_box .selection_main .item .center .info .title { width: 100%; height: auto; font-size: 18px; color: #2c303d; overflow: hidden; } @media (max-width:1440px) { .inside_product_selection .selection_2 .selection_box .selection_main .item .center .info .title { font-size: 16px; } } @media (max-width:1024px) { .inside_product_selection .selection_2 .selection_box .selection_main .item .center .info .title { font-size: 14px; } } @media (max-width:768px) { .inside_product_selection .selection_2 .selection_box .selection_main .item .center .info .title { font-size: 13px; } } .inside_product_selection .selection_2 .selection_box .selection_main .item .center .info .details { width: 100%; height: auto; font-size: 14px; font-family: 'Rubik', 'ff200'; color: #2c303d; overflow: hidden; } @media (max-width:1280px) { .inside_product_selection .selection_2 .selection_box .selection_main .item .center .info .details { font-size: 13px; } } @media (max-width:1024px) { .inside_product_selection .selection_2 .selection_box .selection_main .item .center .info .details { font-size: 12px; } } .inside_product_selection .selection_2 .selection_box .selection_main .item .center .block_more { width: 100%; height: var(--size); position: absolute; bottom: 0; left: 0; z-index: 10; opacity: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_selection .selection_2 .selection_box .selection_main .item .center .block_more a { width: 100%; height: 100%; background: #0867d1; } .inside_product_selection .selection_2 .selection_box .selection_main .item .center .block_more a .word { flex: 1; font-size: 16px; } @media (max-width:1440px) { .inside_product_selection .selection_2 .selection_box .selection_main .item .center .block_more a .word { font-size: 14px; } } @media (max-width:1024px) { .inside_product_selection .selection_2 .selection_box .selection_main .item .center .block_more a .word { font-size: 13px; } } @media (max-width:768px) { .inside_product_selection .selection_2 .selection_box .selection_main .item .center .block_more a .word { font-size: 12px; } } .inside_product_selection .selection_2 .selection_box .selection_main .item:hover::after { width: 100%; left: 0; } .inside_product_selection .selection_2 .selection_box .selection_main .item:hover::before { opacity: .6; } .inside_product_selection .selection_2 .selection_box .selection_main .item:hover .info { opacity: 0; } .inside_product_selection .selection_2 .selection_box .selection_main .item:hover .block_more { opacity: 1; } @media (max-width:1440px) { .inside_product_selection .selection_2 .selection_box .selection_main { grid-gap: 20px; } } @media (max-width:1280px) { .inside_product_selection .selection_2 .selection_box .selection_main { grid-gap: 14px; } } @media (max-width:768px) { .inside_product_selection .selection_2 .selection_box .selection_main { grid-template-columns: repeat(3, 1fr); } } @media (max-width:480px) { .inside_product_selection .selection_2 .selection_box .selection_main { grid-template-columns: repeat(2, 1fr); grid-gap: 10px; } .inside_product_selection .selection_2 .selection_box .selection_main .item { opacity: 1; transform: none; } .inside_product_selection .selection_2 .selection_box .selection_main .item .center .info .details { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } @media (max-width:360px) { .inside_product_selection .selection_2 .selection_box .selection_main { grid-template-columns: 100%; } } /* 浜у搧閫夊瀷 璇︽儏 */ .inside_product_selection_details { width: 100%; height: auto; padding-top: 130px; position: relative; z-index: 1; overflow: hidden; } @media (max-width:1366px) { .inside_product_selection_details { padding-top: 120px; } } @media (max-width:990px) { .inside_product_selection_details { padding-top: 60px; } } @media (max-width:990px) { .inside_product_selection_details .inside_head .content_box .content_head .navigation { display: none; } } .inside_product_selection_details .selection_1 { width: 100%; height: auto; position: relative; z-index: 30; background: rgba(226, 235, 240, 0.8); overflow: hidden; } .inside_product_selection_details .selection_1 .selection_box { width: 100%; height: auto; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_product_selection_details .selection_1 .selection_box .selection_search { width: 480px; padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(100px, 10.41666667vw, 200px); padding-right: clamp(30px, 3.125vw, 60px); position: relative; z-index: 3; } .inside_product_selection_details .selection_1 .selection_box .selection_search::after { content: ''; width: 50vw; height: 100%; position: absolute; top: 0; right: 0; z-index: 1; background: #0866d1; } .inside_product_selection_details .selection_1 .selection_box .selection_search .inside_headline { position: relative; z-index: 5; } .inside_product_selection_details .selection_1 .selection_box .selection_search .inside_headline .title { color: #FFF; } .inside_product_selection_details .selection_1 .selection_box .selection_search .search_box { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); position: relative; z-index: 10; } .inside_product_selection_details .selection_1 .selection_box .selection_search .search_box form { width: 100%; height: var(--size); background: #FFF; --size: 48px; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .inside_product_selection_details .selection_1 .selection_box .selection_search .search_box form::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; pointer-events: none; border: 1px solid #f39800; opacity: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_selection_details .selection_1 .selection_box .selection_search .search_box form input { flex: 1; height: 100%; padding: 0 20px; border: 0; font-size: 14px; color: #2c303d; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .inside_product_selection_details .selection_1 .selection_box .selection_search .search_box form input { font-size: 13px; } } @media (max-width:1024px) { .inside_product_selection_details .selection_1 .selection_box .selection_search .search_box form input { font-size: 12px; } } .inside_product_selection_details .selection_1 .selection_box .selection_search .search_box form input:focus::-webkit-input-placeholder { opacity: .5; } .inside_product_selection_details .selection_1 .selection_box .selection_search .search_box form input:focus:-moz-placeholder { opacity: .5; } .inside_product_selection_details .selection_1 .selection_box .selection_search .search_box form input:focus::-moz-placeholder { opacity: .5; } .inside_product_selection_details .selection_1 .selection_box .selection_search .search_box form input:focus:-ms-input-placeholder { opacity: .5; } .inside_product_selection_details .selection_1 .selection_box .selection_search .search_box form .line { width: 1px; height: 40%; background: #e2ebf0; } .inside_product_selection_details .selection_1 .selection_box .selection_search .search_box form .layui-btn { width: var(--size); height: var(--size); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; background: transparent; } .inside_product_selection_details .selection_1 .selection_box .selection_search .search_box form .layui-btn i { font-size: 20px; color: #0867d1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1680px) { .inside_product_selection_details .selection_1 .selection_box .selection_search .search_box form .layui-btn i { font-size: 18px; } } @media (max-width:1440px) { .inside_product_selection_details .selection_1 .selection_box .selection_search .search_box form .layui-btn i { font-size: 17px; } } @media (max-width:1280px) { .inside_product_selection_details .selection_1 .selection_box .selection_search .search_box form .layui-btn i { font-size: 16px; } } @media (max-width:1024px) { .inside_product_selection_details .selection_1 .selection_box .selection_search .search_box form .layui-btn i { font-size: 15px; } } @media (max-width:768px) { .inside_product_selection_details .selection_1 .selection_box .selection_search .search_box form .layui-btn i { font-size: 14px; } } .inside_product_selection_details .selection_1 .selection_box .selection_search .search_box form.is_active::after { opacity: 1; } .inside_product_selection_details .selection_1 .selection_box .selection_search .search_box form.active .layui-btn i { color: #f39800; } .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box { width: 100%; height: auto; margin-top: clamp(20px, 2.08333333vw, 40px); position: relative; z-index: 5; } .inside_product_selection_details .selection_1 .selection_box .selection_search #insideSelection.select_box { z-index: 10; } .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box .select_title { width: 100%; height: 60px; position: relative; z-index: 5; padding: 0 20px 0 10px; background: #f39800; border-radius: 10px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; cursor: pointer; } .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box .select_title .icon { width: 60px; height: 60px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; filter: brightness(0) invert(1); } .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box .select_title .title { width: auto; height: auto; flex: 1; font-size: 18px; font-family: 'Rubik', 'ff800'; color: #FFF; } @media (max-width:1440px) { .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box .select_title .title { font-size: 16px; } } @media (max-width:1024px) { .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box .select_title .title { font-size: 14px; } } @media (max-width:768px) { .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box .select_title .title { font-size: 13px; } } .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box .select_title .down { width: 11px; height: 7px; font-size: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box .select_title.active .down { transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); } .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box::after { content: ''; width: 90%; height: 40px; position: absolute; top: 20px; left: 5%; z-index: 4; background: #000; filter: blur(20px); opacity: .4; pointer-events: none; } .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box .select_menu { width: 100%; height: auto; padding-top: 40px; position: absolute; left: 0; top: 30px; z-index: 1; background: #F5F5F5; margin-top: 10px; opacity: 0; visibility: hidden; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; max-height: 200px; /*overflow: hidden;*/ overflow: auto; } .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box .select_menu .one { width: 100%; height: auto; overflow: hidden; } .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box .select_menu .one a { width: 100%; height: auto; padding: 15px 20px 15px 10px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box .select_menu .one a .icon { width: 60px; height: 20px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box .select_menu .one a .word { font-size: 14px; color: #2c303d; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box .select_menu .one a .word { font-size: 13px; } } @media (max-width:1024px) { .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box .select_menu .one a .word { font-size: 12px; } } .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box .select_menu .one:first-child ~ .one { border-top: 1px solid #e2ebf0; } .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box .select_menu .one:hover a { background: #F0F0F0; } .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box .select_menu .one:hover a .word { color: #0867d1; } .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box .select_menu .one.active a, .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box .select_menu .one.active:hover a { background: rgba(245, 150, 0, 0.1); } .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box .select_menu .one.active a .word, .inside_product_selection_details .selection_1 .selection_box .selection_search .select_box .select_menu .one.active:hover a .word { color: #0867d1; } .inside_product_selection_details .selection_1 .selection_box .selection_search .list { position: relative; z-index: 4; } .inside_product_selection_details .selection_1 .selection_box .selection_search .list .item { margin-top: 20px; font-size: 13px; font-family: 'Rubik', 'ff300'; color: white; } .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box { width: 100%; height: auto; position: relative; z-index: 2; margin-top: clamp(20px, 2.08333333vw, 40px); display: table; } .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item { width: 100%; height: auto; display: table-row; } .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_one { display: table-cell; } .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_label { width: auto; height: 40px; vertical-align: middle; font-size: 14px; font-family: 'Rubik', 'ff100'; color: #FFF; opacity: .4; } @media (max-width:1280px) { .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_label { font-size: 13px; } } @media (max-width:1024px) { .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_label { font-size: 12px; } } .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_input { height: 40px; background: transparent; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_input > .layui-input { width: 2em; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 14px; font-family: 'Rubik', 'ff100'; color: #FFF; } @media (max-width:1280px) { .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_input > .layui-input { font-size: 13px; } } @media (max-width:1024px) { .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_input > .layui-input { font-size: 12px; } } .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_input .icon { width: 14px; height: auto; font-size: 0; opacity: .5; } .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_select .layui-form-select { width: 100%; height: 100%; } .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_select .layui-form-select .layui-select-title .layui-input { padding: 0; background: transparent; border: 0; font-size: 14px; color: #FFF; } @media (max-width:1280px) { .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_select .layui-form-select .layui-select-title .layui-input { font-size: 13px; } } @media (max-width:1024px) { .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_select .layui-form-select .layui-select-title .layui-input { font-size: 12px; } } .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_select .layui-form-select .layui-select-title .layui-edge { width: 7px; height: 7px; border: 0; margin: -3.5px 0 0; -webkit-mask: url('../svg/icon_down2.svg') no-repeat center; background: #FFF; transform-origin: center; } .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_select .layui-form-select dl { top: var(--h); max-height: 200px; padding: 10px 0; background: #F8F8F8; scrollbar-width: thin; scrollbar-color: #f39800 transparent; } .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_select .layui-form-select dl::-webkit-scrollbar { width: 2px; height: 2px; background-color: #f5f5f5; } .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_select .layui-form-select dl::-webkit-scrollbar-thumb { background-color: #f39800; border-radius: 10px; } .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_select .layui-form-select dl dd { height: auto; line-height: 1.2; background: transparent; text-align: left; font-size: 14px; font-family: 'Rubik', 'ff300'; color: #000; opacity: .4; padding: 10px 15px 10px 10px !important; } @media (max-width:1280px) { .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_select .layui-form-select dl dd { font-size: 13px; } } @media (max-width:1024px) { .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_select .layui-form-select dl dd { font-size: 12px; } } .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_select .layui-form-select dl dd.layui-this { opacity: 1; font-weight: normal; background: rgba(245, 150, 0, 0.1); color: #f39800; } .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_select .layui-form-selectup dl { top: auto; bottom: var(--h); } .inside_product_selection_details .selection_1 .selection_box .selection_menu { width: calc(100% - 480px); flex: 1; height: auto; padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(40px, 4.16666667vw, 80px); padding-left: clamp(30px, 3.125vw, 60px); } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list { width: min(55.9375vw, 1074px); height: auto; margin-top: clamp(15px, 1.5625vw, 30px); display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 24px; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item { width: 100%; height: auto; position: relative; z-index: 1; --z: 20px; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item::after { content: ''; width: 0; height: 4px; position: absolute; top: 0; right: 0; z-index: 10; background: #0867d1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item::before { content: ''; width: 80%; height: 80%; position: absolute; bottom: -10%; left: 10%; z-index: 1; background: #828895; filter: blur(30px); pointer-events: none; opacity: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center { width: 100%; height: auto; padding: var(--size) 0; background: #f6f7fb; position: relative; z-index: 5; --size: 60px; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .function_btn { width: 100%; height: var(--size); padding: 0 var(--z); position: absolute; left: 0; top: 0; z-index: 5; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; cursor: pointer; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .function_btn .collect { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; --color: #2c303d; opacity: .3; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .function_btn .collect .icon { margin-right: 5px; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .function_btn .collect .icon i, .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .function_btn .collect .title { font-size: 14px; color: var(--color); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .function_btn .collect .icon i, .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .function_btn .collect .title { font-size: 13px; } } @media (max-width:1024px) { .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .function_btn .collect .icon i, .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .function_btn .collect .title { font-size: 12px; } } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .function_btn .collect.active { --color: #f39800; opacity: 1; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .function_btn .collect:hover { opacity: 1; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .function_btn .increase { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; --color: #2c303d; opacity: .3; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .function_btn .increase .icon { width: 11px; height: 11px; margin-right: 5px; position: relative; z-index: 1; overflow: hidden; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .function_btn .increase .icon::before, .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .function_btn .increase .icon::after { content: ''; width: 100%; height: 100%; position: absolute; background: var(--color); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .function_btn .increase .icon::before { width: 3px; left: 4px; top: 0; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .function_btn .increase .icon::after { height: 3px; top: 4px; left: 0; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .function_btn .increase .title { font-size: 14px; color: var(--color); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .function_btn .increase .title { font-size: 13px; } } @media (max-width:1024px) { .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .function_btn .increase .title { font-size: 12px; } } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .function_btn .increase.active { --color: #f39800; opacity: 1; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .function_btn .increase:hover { opacity: 1; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .img { width: 50%; height: auto; margin: 0 auto var(--z); position: relative; z-index: 4; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .img .pb { padding-bottom: 120%; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .info { width: 100%; height: var(--size); padding: 0 var(--z); position: absolute; bottom: 0; left: 0; z-index: 5; text-align: center; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .info .title { width: 100%; height: auto; font-size: 18px; color: #2c303d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width:1440px) { .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .info .title { font-size: 16px; } } @media (max-width:1024px) { .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .info .title { font-size: 14px; } } @media (max-width:768px) { .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .info .title { font-size: 13px; } } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .info .details { width: 100%; height: auto; font-size: 14px; font-family: 'Rubik', 'ff200'; color: #2c303d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width:1280px) { .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .info .details { font-size: 13px; } } @media (max-width:1024px) { .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .info .details { font-size: 12px; } } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .block_more { width: 100%; height: var(--size); position: absolute; bottom: 0; left: 0; z-index: 10; opacity: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .block_more a { width: 100%; height: 100%; background: #0867d1; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .block_more a .word { flex: 1; font-size: 16px; } @media (max-width:1440px) { .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .block_more a .word { font-size: 14px; } } @media (max-width:1024px) { .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .block_more a .word { font-size: 13px; } } @media (max-width:768px) { .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item .center .block_more a .word { font-size: 12px; } } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item:hover::after { width: 100%; left: 0; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item:hover::before { opacity: .6; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item:hover .info { opacity: 0; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item:hover .block_more { opacity: 1; } @media (max-width:1440px) { .inside_product_selection_details .selection_1 .selection_box .selection_search { width: 400px; } .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_label { font-size: 12px; } .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_input > .layui-input { font-size: 12px; } .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_select .layui-form-select .layui-select-title .layui-input { font-size: 12px; } .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_select .layui-form-select dl dd { font-size: 12px; } .inside_product_selection_details .selection_1 .selection_box .selection_menu { width: 100%; overflow: hidden; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list { width: 100%; grid-gap: 20px; } } @media (max-width:1280px) { .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list { grid-template-columns: repeat(2, 1fr); grid-gap: 14px; } } @media (max-width:990px) { .inside_product_selection_details .selection_1 .selection_box { display: block; } .inside_product_selection_details .selection_1 .selection_box .selection_search { width: 100%; padding: 40px 0; } .inside_product_selection_details .selection_1 .selection_box .selection_search::after { width: 100vw; left: 50%; transform: translateX(-50%); } .inside_product_selection_details .selection_1 .selection_box .selection_search .form_box .layui_item .layui_label { height: auto; } .inside_product_selection_details .selection_1 .selection_box .selection_menu { width: 100%; padding: 50px 0; } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list { width: 100%; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } } @media (max-width:768px) { .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list { grid-template-columns: repeat(2, 1fr); } .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list .item { --z: 15px; } } @media (max-width:360px) { .inside_product_selection_details .selection_1 .selection_box .selection_menu .selection_list { grid-template-columns: 100%; } } /* 浜у搧璇佷功鏌ヨ */ .inside_product_certificate { width: 100%; height: auto; padding-top: 130px; position: relative; z-index: 1; } @media (max-width:1366px) { .inside_product_certificate { padding-top: 120px; } } @media (max-width:990px) { .inside_product_certificate { padding-top: 60px; } } @media (max-width:990px) { .inside_product_certificate { padding-top: 60px; } } .inside_product_certificate .certificate_1 { width: 100%; height: auto; position: relative; z-index: 5; } .inside_product_certificate .certificate_1 .certificate_box { width: 100%; height: auto; } .inside_product_certificate .certificate_1 .certificate_box .form_box { width: 100%; height: auto; } .inside_product_certificate .certificate_1 .certificate_box .form_box form { width: 100%; height: auto; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 12%; grid-gap: 10px; --size: 48px; } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_label { width: 100%; height: 1.5em; font-size: 14px; color: #2c303d; } @media (max-width:1280px) { .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_label { font-size: 13px; } } @media (max-width:1024px) { .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_label { font-size: 12px; } } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_input { width: 100%; height: auto; margin-top: 8px; } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_item { width: 100%; height: auto; } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_item .layui_input input { width: 100%; height: var(--size); border: 1px solid #dce5ec; border-radius: 8px; } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_item .layui_input input::-webkit-input-placeholder { background: transparent; color: #2c303d; opacity: 1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_item .layui_input input:-moz-placeholder { background: transparent; color: #2c303d; opacity: 1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_item .layui_input input::-moz-placeholder { background: transparent; color: #2c303d; opacity: 1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_item .layui_input input:-ms-input-placeholder { background: transparent; color: #2c303d; opacity: 1; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_item .layui_input input:focus { background: rgba(240, 150, 0, 0.1); } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_item .layui_input input:focus::-webkit-input-placeholder { opacity: .4; } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_item .layui_input input:focus:-moz-placeholder { opacity: .4; } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_item .layui_input input:focus::-moz-placeholder { opacity: .4; } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_item .layui_input input:focus:-ms-input-placeholder { opacity: .4; } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_item .layui_input .layui-form-select .layui-select-title .layui-edge { width: 7px; height: 7px; border: 0; margin: -3.5px 0 0; -webkit-mask: url('../svg/icon_down2.svg') no-repeat center; background: #000; transform-origin: center; } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_item .layui_input .layui-form-select dl { top: 100%; background: #F8F8F8; border: 0; scrollbar-width: thin; scrollbar-color: #f39800 transparent; } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_item .layui_input .layui-form-select dl::-webkit-scrollbar { width: 2px; height: 2px; background-color: #f5f5f5; } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_item .layui_input .layui-form-select dl::-webkit-scrollbar-thumb { background-color: #f39800; border-radius: 10px; } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_item .layui_input .layui-form-select dd { font-size: 14px; color: #999; } @media (max-width:1280px) { .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_item .layui_input .layui-form-select dd { font-size: 13px; } } @media (max-width:1024px) { .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_item .layui_input .layui-form-select dd { font-size: 12px; } } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_item .layui_input .layui-form-select dd.layui-this { background: rgba(245, 150, 0, 0.1); color: #f39800; font-weight: normal; } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_item .layui_input .layui-form-selectup dl { top: auto; bottom: 100%; } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_submit { width: 100%; height: auto; } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_submit .layui_input button { width: 100%; height: var(--size); padding: 0 20px; border-radius: 8px; background: #f39800; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; font-size: 16px; } @media (max-width:1440px) { .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_submit .layui_input button { font-size: 14px; } } @media (max-width:1024px) { .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_submit .layui_input button { font-size: 13px; } } @media (max-width:768px) { .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_submit .layui_input button { font-size: 12px; } } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_submit .layui_input button i { margin-right: 10px; font-size: 18px; } @media (max-width:1440px) { .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_submit .layui_input button i { font-size: 16px; } } @media (max-width:1024px) { .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_submit .layui_input button i { font-size: 14px; } } @media (max-width:768px) { .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_submit .layui_input button i { font-size: 13px; } } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_submit .layui_input button:hover { background: #0867d1; opacity: 1; } @media (max-width:768px) { .inside_product_certificate .certificate_1 .certificate_box .form_box form { grid-template-columns: repeat(3, 1fr); } } @media (max-width:480px) { .inside_product_certificate .certificate_1 .certificate_box .form_box form { grid-template-columns: repeat(2, 1fr); } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_submit { grid-column: span 2; } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_submit .layui_label { display: none; } .inside_product_certificate .certificate_1 .certificate_box .form_box .layui_submit .layui_input { margin: 0; } } .inside_product_certificate .certificate_1 .certificate_box .form_tips { width: 100%; height: auto; padding-top: clamp(18px, 1.875vw, 36px); padding-bottom: clamp(18px, 1.875vw, 36px); font-size: 14px; color: #2c303d; opacity: .6; } @media (max-width:1280px) { .inside_product_certificate .certificate_1 .certificate_box .form_tips { font-size: 13px; } } @media (max-width:1024px) { .inside_product_certificate .certificate_1 .certificate_box .form_tips { font-size: 12px; } } .inside_product_certificate .certificate_2 { width: 100%; height: auto; position: relative; z-index: 2; background: #f4f4f5; padding-bottom: clamp(50px, 5.20833333vw, 100px); overflow: hidden; } .inside_product_certificate .certificate_2 .certificate_box { width: 100%; height: auto; } .inside_product_certificate .certificate_2 .certificate_box .certificate_table { width: 100%; height: auto; overflow: hidden; } .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box { width: 100%; height: auto; overflow: hidden; } .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_head { width: 100%; height: auto; background: #0867d1; display: grid; grid-template-columns: 80px .7fr .8fr 1fr 1fr 1fr 120px; grid-gap: 20px; } .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_head .item { width: 100%; height: auto; padding: 15px 0; } .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_head .item .title { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_head .item .title .word { font-size: 14px; font-family: 'Rubik', 'ff800'; color: #FFF; } @media (max-width:1280px) { .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_head .item .title .word { font-size: 13px; } } @media (max-width:1024px) { .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_head .item .title .word { font-size: 12px; } } .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_head .item .title .icon { width: 12px; height: 16px; margin-left: 10px; position: relative; } .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_head .item .title .icon::before, .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_head .item .title .icon::after { content: ''; width: 100%; height: 6px; position: absolute; left: 0; z-index: 1; background: #FFF; opacity: .2; -webkit-mask-repeat: no-repeat; -moz-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; -moz-mask-position: center; mask-position: center; -webkit-mask-size: cover; -moz-mask-size: cover; mask-size: cover; } .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_head .item .title .icon::before { top: 0; -webkit-mask-image: url('../svg/icon_t.svg'); -moz-mask-image: url('../svg/icon_t.svg'); mask-image: url('../svg/icon_t.svg'); } .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_head .item .title .icon::after { bottom: 0; -webkit-mask-image: url('../svg/icon_b.svg'); -moz-mask-image: url('../svg/icon_b.svg'); mask-image: url('../svg/icon_b.svg'); } @media (max-width:1280px) { .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_head .item .title .icon { width: 10px; height: 14px; } .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_head .item .title .icon::before, .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_head .item .title .icon::after { height: 5px; } } @media (max-width:1024px) { .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_head .item .title .icon { width: 8px; height: 10px; } .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_head .item .title .icon::before, .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_head .item .title .icon::after { height: 4px; } } .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_head .item .title.active .icon::after { opacity: 1; } .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_head .item .title.active2 .icon::before { opacity: 1; } .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_head .item:first-child .title, .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_head .item:last-child .title { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_body { width: 100%; height: auto; background: #FFF; } .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_body .item { width: 100%; height: auto; display: grid; grid-template-columns: 80px .7fr .8fr 1fr 1fr 1fr 120px; grid-gap: 20px; border-top: 1px solid #e7eaed; } .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_body .item .one { width: 100%; height: auto; padding: 15px 0; } .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_body .item .one .download_btn { width: 16px; height: 13px; margin: 0 auto; } .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_body .item .one .download_btn a { width: 100%; height: 100%; display: block; background: #0867d1; -webkit-mask: url('../svg/icon_down3.svg') no-repeat center / cover; -moz-mask: url('../svg/icon_down3.svg') no-repeat center / cover; mask: url('../svg/icon_down3.svg') no-repeat center / cover; } .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_body .item .one .title { font-size: 14px; color: #2c303d; } @media (max-width:1280px) { .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_body .item .one .title { font-size: 13px; } } @media (max-width:1024px) { .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_body .item .one .title { font-size: 12px; } } .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box .table_body .item .one:last-child .title { text-align: center; } @media (max-width:990px) { .inside_product_certificate .certificate_2 .certificate_box .certificate_table { overflow-x: auto; } .inside_product_certificate .certificate_2 .certificate_box .certificate_table .table_box { width: 1024px; } } .inside_product_certificate .certificate_2 .certificate_box .paging_box { width: 100%; height: auto; margin-top: clamp(20px, 2.08333333vw, 40px); -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } /* ---------- */ /* 鍐呴〉 鍏充簬鎴戜滑 */ .inside_about { width: 100%; height: auto; overflow: hidden; /* 浼佷笟姒傚喌 */ /* 鍝佺墝鏂囧寲 */ /* 鎴戜滑鐨勪娇鍛 */ /* 鍙戝睍鍘嗙▼ */ /* 鑽h獕璧勮川 */ } .inside_about .navigation { margin-top: 130px; padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(40px, 4.16666667vw, 80px); } @media (max-width:1366px) { .inside_about .navigation { margin-top: 120px; } } @media (max-width:990px) { .inside_about .navigation { margin-top: 60px; } } .inside_about .about_1 { width: 100%; height: auto; position: relative; z-index: 1; overflow: hidden; } .inside_about .about_1 .about_box { width: 100%; height: auto; position: relative; z-index: 5; } .inside_about .about_1 .images { width: 100%; height: 64.72222vh; margin-top: -2.36666vh; position: relative; z-index: 1; overflow: hidden; } .inside_about .about_1 .images .img { width: 100%; height: 100%; position: relative; z-index: 5; -webkit-clip-path: polygon(0 40%, 0 41.9%, 36.97% 63.51%, 100% 26.8955%, 100% 17.5965%, 70.15625% 0); clip-path: polygon(0 40%, 0 41.9%, 36.97% 63.51%, 100% 26.8955%, 100% 17.5965%, 70.15625% 0); } .inside_about .about_1 .images .img img { width: 100%; height: 100%; object-fit: cover; } .inside_about .about_1 .images::before, .inside_about .about_1 .images::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } .inside_about .about_1 .images::before { background: #003281; -webkit-clip-path: polygon(0 41%, 0 84.83%, 36.97% 63.51%, 36.97% 41%); clip-path: polygon(0 41%, 0 84.83%, 36.97% 63.51%, 36.97% 41%); } .inside_about .about_1 .images::after { background: #f39800; -webkit-clip-path: polygon(36.97% 63.51%, 100% 100%, 100% 25%); clip-path: polygon(36.97% 63.51%, 100% 100%, 100% 25%); } @media (max-width:990px) { .inside_about .about_1 .about_box { padding-top: clamp(50px, 5.20833333vw, 100px); } .inside_about .about_1 .images .img { -webkit-clip-path: polygon(0 40%, 0 41.9%, 36.97% 63.51%, 100% 32.8955%, 100% 0); clip-path: polygon(0 40%, 0 41.9%, 36.97% 63.51%, 100% 32.8955%, 100% 0); } .inside_about .about_1 .images::before { -webkit-clip-path: polygon(0 41%, 0 81.83%, 36.97% 63.51%, 36.97% 41%); clip-path: polygon(0 41%, 0 81.83%, 36.97% 63.51%, 36.97% 41%); } } @media (max-width:768px) { .inside_about .about_1 .images { height: 40vh; } } .inside_about .about_2 { width: 100%; height: auto; padding-top: clamp(30px, 3.125vw, 60px); padding-bottom: clamp(110px, 11.45833333vw, 220px); position: relative; z-index: 1; } .inside_about .about_2::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background: #F7F7F9; -webkit-clip-path: polygon(0 48%, 0 100%, 100% 56%, 100% 85%); clip-path: polygon(0 48%, 0 100%, 100% 56%, 100% 85%); } .inside_about .about_2 .about_box { width: 100%; height: auto; } .inside_about .about_2 .about_box .inside_title { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; grid-gap: min(6.25vw, 120px); } .inside_about .about_2 .about_box .inside_title .details p:first-child{ font-size: 26px; padding-bottom: 30px; font-weight: 800; } .inside_about .about_2 .about_box .about_video { width: 100%; height: auto; position: relative; margin-top: clamp(35px, 3.64583333vw, 70px); overflow: hidden; } .inside_about .about_2 .about_box .about_video .content { width: 100%; height: 100%; padding: clamp(30px, 3.125vw, 60px); position: absolute; top: 0; left: 0; z-index: 5; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; overflow: hidden; } .inside_about .about_2 .about_box .about_video .content .icon { width: 1em; height: 1em; font-size: 100px; border-radius: 50%; background: #FFF; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; overflow: hidden; } @media (max-width:1600px) { .inside_about .about_2 .about_box .about_video .content .icon { font-size: 90px; } } @media (max-width:1440px) { .inside_about .about_2 .about_box .about_video .content .icon { font-size: 80px; } } @media (max-width:1280px) { .inside_about .about_2 .about_box .about_video .content .icon { font-size: 70px; } .inside_about .about_2 .about_box .inside_title .details p:first-child{ font-size: 22px; } } @media (max-width:1024px) { .inside_about .about_2 .about_box .about_video .content .icon { font-size: 60px; } .inside_about .about_2 .about_box .inside_title .details p:first-child{ font-size: 20px; } } @media (max-width:768px) { .inside_about .about_2 .about_box .about_video .content .icon { font-size: 48px; } .inside_about .about_2 .about_box .inside_title .details p:first-child{ font-size: 18px; } } .inside_about .about_2 .about_box .about_video .content .icon i { width: 0; height: 0; border-style: solid; border-width: .5em 0 .5em .61em; border-color: transparent transparent transparent #020002; font-size: 18px; } @media (max-width:1440px) { .inside_about .about_2 .about_box .about_video .content .icon i { font-size: 16px; } } @media (max-width:1024px) { .inside_about .about_2 .about_box .about_video .content .icon i { font-size: 14px; } } @media (max-width:768px) { .inside_about .about_2 .about_box .about_video .content .icon i { font-size: 13px; } } .inside_about .about_2 .about_box .about_video .content .info { padding-left: clamp(10px, 1.04166667vw, 20px); } .inside_about .about_2 .about_box .about_video .content .info .title { font-size: 24px; font-family: 'Rubik', 'ff700'; color: #FFF; } @media (max-width:1680px) { .inside_about .about_2 .about_box .about_video .content .info .title { font-size: 22px; } } @media (max-width:1440px) { .inside_about .about_2 .about_box .about_video .content .info .title { font-size: 20px; } } @media (max-width:1280px) { .inside_about .about_2 .about_box .about_video .content .info .title { font-size: 18px; } } @media (max-width:1024px) { .inside_about .about_2 .about_box .about_video .content .info .title { font-size: 16px; } } @media (max-width:768px) { .inside_about .about_2 .about_box .about_video .content .info .title { font-size: 15px; } } .inside_about .about_2 .about_box .about_video .content .info .time { font-family: 'Rubik'; font-size: 16px; color: #FFF; } @media (max-width:1440px) { .inside_about .about_2 .about_box .about_video .content .info .time { font-size: 14px; } } @media (max-width:1024px) { .inside_about .about_2 .about_box .about_video .content .info .time { font-size: 13px; } } @media (max-width:768px) { .inside_about .about_2 .about_box .about_video .content .info .time { font-size: 12px; } } .inside_about .about_2 .about_box .about_video .img { width: 100%; height: 100%; position: relative; font-size: 0; overflow: hidden; } .inside_about .about_2 .about_box .about_video .img::after { content: ''; width: 100%; height: 0; padding-bottom: 25%; position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; } .inside_about .about_2 .about_box .about_video .img img { width: 100%; height: 100%; object-fit: cover; } .inside_about .about_2 .about_box .about_list { width: 100%; height: auto; margin-top: clamp(40px, 4.16666667vw, 80px); display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 30px; } .inside_about .about_2 .about_box .about_list .item { width: 100%; height: auto; } .inside_about .about_2 .about_box .about_list .item .number { width: 100%; height: auto; line-height: 1; font-size: 48px; font-family: 'Orbitron', 'ff800'; color: #2c303d; } @media (max-width:1680px) { .inside_about .about_2 .about_box .about_list .item .number { font-size: 42px; } } @media (max-width:1440px) { .inside_about .about_2 .about_box .about_list .item .number { font-size: 36px; } } @media (max-width:1280px) { .inside_about .about_2 .about_box .about_list .item .number { font-size: 28px; } } @media (max-width:1024px) { .inside_about .about_2 .about_box .about_list .item .number { font-size: 24px; } } @media (max-width:768px) { .inside_about .about_2 .about_box .about_list .item .number { font-size: 22px; } } .inside_about .about_2 .about_box .about_list .item .title { width: 100%; height: auto; margin-top: 1em; font-family: 'Rubik', 'ff200'; font-size: 16px; } @media (max-width:1440px) { .inside_about .about_2 .about_box .about_list .item .title { font-size: 14px; } } @media (max-width:1024px) { .inside_about .about_2 .about_box .about_list .item .title { font-size: 13px; } } @media (max-width:768px) { .inside_about .about_2 .about_box .about_list .item .title { font-size: 12px; } } @media (max-width:1280px) { .inside_about .about_2 .about_box .about_list { grid-template-columns: repeat(5, 1fr); } } @media (max-width:768px) { .inside_about .about_2 .about_box .inside_title { display: block; } .inside_about .about_2 .about_box .inside_title .details { margin-top: 15px; } .inside_about .about_2 .about_box .about_list { grid-template-columns: repeat(3, 1fr); } } @media (max-width:480px) { .inside_about .about_2 .about_box .about_list { grid-template-columns: repeat(2, 1fr); } } .inside_about .about_3 { width: 100%; height: auto; padding-bottom: clamp(50px, 5.20833333vw, 100px); overflow: hidden; } .inside_about .about_3 .about_box { width: 100%; height: auto; } .inside_about .about_3 .about_box .about_main { width: 100%; height: auto; margin-top: clamp(50px, 5.20833333vw, 100px); display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 5.2vw; } .inside_about .about_3 .about_box .about_main .item { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; grid-gap: 30px; overflow: hidden; } .inside_about .about_3 .about_box .about_main .item .icon { width: 1em; height: 1em; font-size: 54px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .inside_about .about_3 .about_box .about_main .item .info { width: 100%; height: auto; flex: 1; } .inside_about .about_3 .about_box .about_main .item .info .line { width: 16px; height: 4px; background: #f39800; } .inside_about .about_3 .about_box .about_main .item .info .title { width: 100%; height: auto; margin-top: .5em; font-size: 24px; font-family: 'Rubik', 'ff800'; color: #2c303d; } @media (max-width:1680px) { .inside_about .about_3 .about_box .about_main .item .info .title { font-size: 22px; } } @media (max-width:1440px) { .inside_about .about_3 .about_box .about_main .item .info .title { font-size: 20px; } } @media (max-width:1280px) { .inside_about .about_3 .about_box .about_main .item .info .title { font-size: 18px; } } @media (max-width:1024px) { .inside_about .about_3 .about_box .about_main .item .info .title { font-size: 16px; } } @media (max-width:768px) { .inside_about .about_3 .about_box .about_main .item .info .title { font-size: 15px; } } .inside_about .about_3 .about_box .about_main .item .info .details { width: 100%; height: auto; margin-top: 1em; font-size: 24px; font-family: 'Rubik', 'ff200'; color: #2c303d; } @media (max-width:1680px) { .inside_about .about_3 .about_box .about_main .item .info .details { font-size: 22px; } } @media (max-width:1440px) { .inside_about .about_3 .about_box .about_main .item .info .details { font-size: 20px; } } @media (max-width:1280px) { .inside_about .about_3 .about_box .about_main .item .info .details { font-size: 18px; } } @media (max-width:1024px) { .inside_about .about_3 .about_box .about_main .item .info .details { font-size: 16px; } } @media (max-width:768px) { .inside_about .about_3 .about_box .about_main .item .info .details { font-size: 15px; } } @media (max-width:1600px) { .inside_about .about_3 .about_box .about_main .item .icon { font-size: 48px; } } @media (max-width:1440px) { .inside_about .about_3 .about_box .about_main .item .icon { font-size: 44px; } } @media (max-width:1280px) { .inside_about .about_3 .about_box .about_main .item .icon { font-size: 40px; } } @media (max-width:1024px) { .inside_about .about_3 .about_box .about_main .item .icon { font-size: 36px; } } @media (max-width:768px) { .inside_about .about_3 .about_box .about_main { grid-template-columns: 100%; grid-gap: 40px; } .inside_about .about_3 .about_box .about_main .item .icon { font-size: 30px; } .inside_about .about_3 .about_box .about_main .item .info .details { font-size: 14px; } } .inside_about .about_4 { width: 100%; height: auto; position: relative; z-index: 5; overflow: hidden; } .inside_about .about_4 .about_images { width: 100%; height: auto; position: relative; z-index: 4; pointer-events: none; overflow: hidden; } .inside_about .about_4 .about_images .about_title { width: 100%; height: auto; position: absolute; bottom: 50%; left: 0; z-index: 5; transform: translateY(-40px); } .inside_about .about_4 .about_images .about_title .block_title .classify, .inside_about .about_4 .about_images .about_title .block_title .title { color: #FFF; pointer-events: initial; } .inside_about .about_4 .about_images .about_box { width: 100%; height: auto; position: relative; top: 0; left: 0; z-index: 4; } .inside_about .about_4 .about_images .about_box .about_main { width: 100%; height: auto; padding-top: clamp(80px, 8.33333333vw, 160px); padding-bottom: clamp(80px, 8.33333333vw, 160px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; position: relative; } .inside_about .about_4 .about_images .about_box .about_main .mission_list { width: 57.77777777777778%; height: auto; -webkit-aspect-ratio: 2.00966184; aspect-ratio: 2.00966184; position: relative; z-index: 1; } .inside_about .about_4 .about_images .about_box .about_main .mission_list::before, .inside_about .about_4 .about_images .about_box .about_main .mission_list::after { content: ''; width: 100vw; height: 2px; position: absolute; top: 50%; z-index: 1; margin-top: -1px; background: #FFF; opacity: .2; } .inside_about .about_4 .about_images .about_box .about_main .mission_list::before { right: 100%; } .inside_about .about_4 .about_images .about_box .about_main .mission_list::after { left: 100%; } .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box { width: 100%; height: 100%; position: relative; z-index: 10; } .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu { width: 100%; height: 100%; position: relative; z-index: 1; } .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background: url('../images/mission_line.png') no-repeat center / 100% 100%; opacity: .2; } .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu .item { width: 28.694239068968195258918078646796%; height: 50%; background: transparent; position: absolute; z-index: 5; pointer-events: initial; -webkit-clip-path: polygon(25% 0, 0 50%, 25% 100%, 75% 100%, 100% 50%, 75% 0); clip-path: polygon(25% 0, 0 50%, 25% 100%, 75% 100%, 100% 50%, 75% 0); } .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu .item .info { width: 100%; height: 100%; flex: 1; text-align: center; position: relative; z-index: 5; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; overflow: hidden; } .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu .item .info .icon { width: 1em; height: 1em; margin: 0 auto; font-size: 54px; opacity: .6; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1440px) { .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu .item .info .icon { font-size: 48px; } } @media (max-width:1280px) { .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu .item .info .icon { font-size: 44px; } } @media (max-width:1024px) { .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu .item .info .icon { font-size: 36px; } } @media (max-width:768px) { .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu .item .info .icon { font-size: 30px; } } @media (max-width:480px) { .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu .item .info .icon { font-size: 24px; } } .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu .item .info .title { margin-top: clamp(15px, 1.5625vw, 30px); font-size: 20px; color: #FFF; opacity: .9; } @media (max-width:1680px) { .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu .item .info .title { font-size: 18px; } } @media (max-width:1440px) { .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu .item .info .title { font-size: 17px; } } @media (max-width:1280px) { .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu .item .info .title { font-size: 16px; } } @media (max-width:1024px) { .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu .item .info .title { font-size: 15px; } } @media (max-width:768px) { .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu .item .info .title { font-size: 14px; } } .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu .item:nth-child(1) { left: 0; top: 50%; transform: translateY(-50%); } .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu .item:nth-child(2) { left: 0; top: 50%; transform: translate(100%, -50%); } .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu .item:nth-child(3) { top: 0; right: 0; transform: translateX(-75%); } .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu .item:nth-child(4) { bottom: 0; right: 0; transform: translateX(-75%); } .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu .item:nth-child(5) { right: 0; top: 50%; transform: translateY(-50%); } .inside_about .about_4 .about_images .images { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; font-size: 0; background: var(--url) no-repeat center / cover; background-attachment: fixed; } .inside_about .about_4 .about_images .images::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background: #000; opacity: .2; } .inside_about .about_4 .about_images .images img { width: 100%; height: 100%; object-fit: cover; } @media (max-width:768px) { .inside_about .about_4 .about_images { padding: 60px 0; } .inside_about .about_4 .about_images .about_title { position: relative; bottom: 0; transform: translate(0); } .inside_about .about_4 .about_images .scroll_position { display: none; } .inside_about .about_4 .about_images .about_box { margin-top: 40px; -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } .inside_about .about_4 .about_images .about_box .about_main { padding: 0; display: block; } .inside_about .about_4 .about_images .about_box .about_main .mission_list { width: 100%; -webkit-aspect-ratio: auto; aspect-ratio: auto; } .inside_about .about_4 .about_images .about_box .about_main .mission_list::before, .inside_about .about_4 .about_images .about_box .about_main .mission_list::after { display: none; } .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu::after { display: none; } .inside_about .about_4 .about_images .about_box .about_main .mission_list .menu_box .menu .item { width: auto; height: auto; position: static; transform: translate(0) !important; -webkit-clip-path: none; clip-path: none; } } .inside_about .about_4 .about_bottom { width: 100%; height: auto; position: relative; z-index: 5; } .inside_about .about_4 .about_bottom .about_bg { height: 0; } .inside_about .about_4 .about_bottom .about_bg::after { content: ''; width: 100%; height: 0; padding-top: clamp(30px, 3.125vw, 60px); display: block; background: #FFF; transform: translateY(-100%); } .inside_about .about_4 .about_bottom .about_box { width: 100%; max-width: 1100px; height: auto; padding-top: clamp(35px, 3.64583333vw, 70px); padding-bottom: clamp(35px, 3.64583333vw, 70px); position: relative; z-index: 1; } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10px; } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content { width: 100%; height: auto; } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .title_box { width: 80%; height: auto; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; -webkit-align-items: baseline; align-items: baseline; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .title_box::after { content: ''; width: 100%; height: 2px; position: absolute; bottom: 0; left: 0; z-index: 1; background: #e2e6e7; } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .title_box .number { font-family: 'Rubik'; font-size: 16px; color: #266BFB; position: relative; z-index: 1; line-height: 2.5; z-index: 10; } @media (max-width:1440px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .title_box .number { font-size: 14px; } } @media (max-width:1024px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .title_box .number { font-size: 13px; } } @media (max-width:768px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .title_box .number { font-size: 12px; } } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .title_box .number::after { content: ''; width: 100%; height: 2px; position: absolute; bottom: 0; left: 0; z-index: 1; background: #266BFB; } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .title_box .title { font-family: 'Rubik', 'ff700'; font-size: 24px; color: #2c303d; } @media (max-width:1680px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .title_box .title { font-size: 22px; } } @media (max-width:1440px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .title_box .title { font-size: 20px; } } @media (max-width:1280px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .title_box .title { font-size: 18px; } } @media (max-width:1024px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .title_box .title { font-size: 16px; } } @media (max-width:768px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .title_box .title { font-size: 15px; } } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .info { width: 100%; height: auto; margin-top: clamp(10px, 1.04166667vw, 20px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; grid-gap: min(1.0416vw, 20px); } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .info .icon { width: var(--size); height: var(--size); --size: 80px; text-align: center; border-radius: 50%; background: #266BFB; font-size: 0; } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .info .icon img { max-width: 50%; max-height: 50%; } @media (max-width:1440px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .info .icon { --size: 70px; } } @media (max-width:1280px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .info .icon { --size: 60px; } } @media (max-width:1024px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .info .icon { --size: 48px; } } @media (max-width:768px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .info .icon { --size: 40px; } } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .info .details { width: auto; height: auto; flex: 1; font-family: 'Rubik', 'ff200'; font-size: 18px; color: #2c303d; overflow: hidden; } @media (max-width:1440px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .info .details { font-size: 16px; } } @media (max-width:1024px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .info .details { font-size: 14px; } } @media (max-width:768px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .info .details { font-size: 13px; } } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box { width: 100%; height: auto; background: #F5F5F5; margin-top: clamp(60px, 6.25vw, 120px); padding-left: clamp(15px, 1.5625vw, 30px); padding-right: clamp(15px, 1.5625vw, 30px); position: relative; overflow: hidden; } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box::before, .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box::after { content: ''; width: 1em; height: 1em; font-size: 30px; position: absolute; z-index: 1; background: #FFF; } @media (max-width:1680px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box::before, .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box::after { font-size: 26px; } } @media (max-width:1440px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box::before, .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box::after { font-size: 24px; } } @media (max-width:1280px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box::before, .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box::after { font-size: 22px; } } @media (max-width:1024px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box::before, .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box::after { font-size: 20px; } } @media (max-width:768px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box::before, .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box::after { font-size: 18px; } } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box::before { left: 0; top: 0; transform: translate(-50%, -50%) rotate(45deg); } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box::after { right: 0; bottom: 0; transform: translate(50%, 50%) rotate(45deg); } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box .card_main { width: 100%; height: 200px; padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(15px, 1.5625vw, 30px); position: relative; z-index: 1; } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box .card_main .title { width: 100%; height: calc(2em * 1.5); font-size: 24px; font-family: 'Rubik', 'ff700'; color: #266BFB; line-height: 1.5; } @media (max-width:1680px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box .card_main .title { font-size: 22px; } } @media (max-width:1440px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box .card_main .title { font-size: 20px; } } @media (max-width:1280px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box .card_main .title { font-size: 18px; } } @media (max-width:1024px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box .card_main .title { font-size: 16px; } } @media (max-width:768px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box .card_main .title { font-size: 15px; } } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box .card_main .details { width: 100%; height: calc(2em * 1.5); font-size: 18px; font-family: 'Rubik', 'ff200'; line-height: 1.5; } @media (max-width:1440px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box .card_main .details { font-size: 16px; } } @media (max-width:1024px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box .card_main .details { font-size: 14px; } } @media (max-width:768px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box .card_main .details { font-size: 13px; } } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box .card_main::after { content: ''; width: 0; height: 2px; position: absolute; bottom: 0; left: 50%; z-index: 1; transform: translateX(-50%); background: #266BFB; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .card_box:hover .card_main::after { width: 100%; } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item:nth-child(2) .content .title_box .number { color: #f59600; } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item:nth-child(2) .content .title_box .number::after { background: #f59600; } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item:nth-child(2) .content .info .icon { background: #f59600; } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item:nth-child(2) .card_box .card_main .title { color: #f59600; } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item:nth-child(2) .card_box .card_main::after { background: #f59600; } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item:last-child .content .title_box .number { color: #2c303d; } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item:last-child .content .title_box .number::after { background: #2c303d; } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item:last-child .content .info .icon { background: #2c303d; } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item:last-child .card_box .card_main .title { color: #00ac4f; } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item:last-child .card_box .card_main::after { background: #00ac4f; } @media (max-width:768px) { .inside_about .about_4 .about_bottom .about_box .swiper-wrapper { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; grid-gap: 0; } .inside_about .about_4 .about_bottom .about_box .swiper-wrapper .item .content .title_box { width: 100%; } } .inside_about .about_4 .about_bottom .about_box .swiper_pager { margin-top: clamp(20px, 2.08333333vw, 40px); display: none; } .inside_about .about_4 .about_bottom .about_box .swiper_pager .pager { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } @media (max-width:768px) { .inside_about .about_4 .about_bottom .about_box .swiper_pager { display: block; } } .inside_about .about_5 { width: 100%; height: auto; position: relative; z-index: 1; overflow: hidden; } .inside_about .about_5 .history_box { width: 100%; height: 100vh; padding-top: clamp(50px, 5.20833333vw, 100px); padding-bottom: clamp(50px, 5.20833333vw, 100px); position: relative; z-index: 5; opacity: 0; overflow: hidden; } .inside_about .about_5 .history_box .center_box { width: 100%; height: 100%; } .inside_about .about_5 .history_box .about_box { width: 100%; height: 100%; position: relative; z-index: 1; } .inside_about .about_5 .history_box .about_box .inside_title .title { color: #FFF; } .inside_about .about_5 .history_box .about_box .history_time { width: 100%; height: auto; margin-top: clamp(30px, 3.125vw, 60px); position: relative; z-index: 1; } .inside_about .about_5 .history_box .about_box .history_time::after { content: ''; width: 120vw; height: 2px; position: absolute; top: 50%; left: 50%; z-index: 1; background: #FFF; transform: translate(-50%, -50%); -webkit-mask: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent); -moz-mask: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent); mask: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent); } .inside_about .about_5 .history_box .about_box .history_time .swiper-wrapper { position: relative; z-index: 5; } .inside_about .about_5 .history_box .about_box .history_time .swiper-wrapper .swiper-slide { --color: #FFF; --opacity: .4; pointer-events: none; } .inside_about .about_5 .history_box .about_box .history_time .swiper-wrapper .swiper-slide.active { --color: #f39800; --opacity: 1; } .inside_about .about_5 .history_box .about_box .history_time .swiper-wrapper .info { width: 12px; height: 12px; position: relative; z-index: 1; cursor: pointer; pointer-events: initial; } .inside_about .about_5 .history_box .about_box .history_time .swiper-wrapper .info .icon { width: 100%; height: 100%; border-radius: 50%; position: relative; z-index: 1; overflow: hidden; } .inside_about .about_5 .history_box .about_box .history_time .swiper-wrapper .info .icon::before, .inside_about .about_5 .history_box .about_box .history_time .swiper-wrapper .info .icon::after { content: ''; width: 100%; height: 100%; border-radius: 50%; position: absolute; top: 50%; left: 50%; z-index: 1; background: var(--color); transform: translate(-50%, -50%); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_about .about_5 .history_box .about_box .history_time .swiper-wrapper .info .icon::before { opacity: .4; } .inside_about .about_5 .history_box .about_box .history_time .swiper-wrapper .info .icon::after { z-index: 2; width: 50%; height: 50%; } .inside_about .about_5 .history_box .about_box .history_time .swiper-wrapper .info .time { width: auto; height: auto; position: absolute; top: 150%; left: 50%; transform: translateX(-50%); font-size: 16px; color: var(--color); white-space: nowrap; opacity: var(--opacity); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1440px) { .inside_about .about_5 .history_box .about_box .history_time .swiper-wrapper .info .time { font-size: 14px; } } @media (max-width:1024px) { .inside_about .about_5 .history_box .about_box .history_time .swiper-wrapper .info .time { font-size: 13px; } } @media (max-width:768px) { .inside_about .about_5 .history_box .about_box .history_time .swiper-wrapper .info .time { font-size: 12px; } } @media (max-width:990px) { .inside_about .about_5 .history_box .about_box .history_time .swiper-wrapper .info { margin: 0 auto; } } .inside_about .about_5 .history_box .about_box .history_swiper { width: 100%; height: auto; padding-top: clamp(50px, 5.20833333vw, 100px); padding-bottom: clamp(25px, 2.60416667vw, 50px); overflow: hidden; } .inside_about .about_5 .history_box .about_box .history_swiper .swiper-wrapper { width: 100%; height: auto; } .inside_about .about_5 .history_box .about_box .history_swiper .swiper-slide { width: 100%; height: 100%; opacity: 0; pointer-events: initial; position: relative; z-index: 1; } .inside_about .about_5 .history_box .about_box .history_swiper .swiper-slide.active { z-index: 10; } .inside_about .about_5 .history_box .about_box .history_swiper .time { width: 100%; height: auto; line-height: 1; font-size: 140px; font-family: 'Orbitron', 'ff800'; color: #FFF; } @media (max-width:1680px) { .inside_about .about_5 .history_box .about_box .history_swiper .time { font-size: 123px; } } @media (max-width:1440px) { .inside_about .about_5 .history_box .about_box .history_swiper .time { font-size: 105px; } } @media (max-width:1280px) { .inside_about .about_5 .history_box .about_box .history_swiper .time { font-size: 94px; } } @media (max-width:1024px) { .inside_about .about_5 .history_box .about_box .history_swiper .time { font-size: 75px; } } @media (max-width:990px) { .inside_about .about_5 .history_box .about_box .history_swiper .time { font-size: 73px; } } @media (max-width:768px) { .inside_about .about_5 .history_box .about_box .history_swiper .time { font-size: 56px; } } @media (max-width:640px) { .inside_about .about_5 .history_box .about_box .history_swiper .time { font-size: 47px; } } .inside_about .about_5 .history_box .about_box .history_swiper .menu_box { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); display: grid; /*grid-template-rows: repeat(5, 1fr);*/ /*grid-template-columns: auto auto auto auto 1fr;*/ grid-template-columns: repeat(2, 1fr); grid-gap: 30px 3vw; /*grid-auto-flow: column;*/ overflow: hidden; } .inside_about .about_5 .history_box .about_box .history_swiper .menu_box .one { width: auto; height: auto; font-size: 18px; font-family: 'Rubik', 'ff200'; color: rgba(255, 255, 255, 0.6); overflow: hidden; } @media (max-width:1440px) { .inside_about .about_5 .history_box .about_box .history_swiper .menu_box .one { font-size: 16px; } } @media (max-width:1024px) { .inside_about .about_5 .history_box .about_box .history_swiper .menu_box .one { font-size: 14px; } } @media (max-width:768px) { .inside_about .about_5 .history_box .about_box .history_swiper .menu_box .one { font-size: 13px; } } .inside_about .about_5 .history_box .about_box .inside_pager { -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; position: absolute; bottom: 0; right: 0; } .inside_about .about_5 .history_box .about_box .inside_pager .swiper_btn { --border: rgba(255, 255, 255, 0.2); } .inside_about .about_5 .history_box .about_box .inside_pager .swiper_btn:hover { --border: #f39800; } @media (max-width:990px) { .inside_about .about_5 .history_box .about_box .history_swiper .menu_box { height: 40vh; display: block; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #f39800 transparent; } .inside_about .about_5 .history_box .about_box .history_swiper .menu_box::-webkit-scrollbar { width: 2px; height: 2px; background-color: rgba(255, 255, 255, 0.2); } .inside_about .about_5 .history_box .about_box .history_swiper .menu_box::-webkit-scrollbar-thumb { background-color: #f39800; border-radius: 10px; } .inside_about .about_5 .history_box .about_box .history_swiper .menu_box .one:first-child ~ .one { margin-top: 10px; } .inside_about .about_5 .history_box .about_box .inside_pager { position: relative; } } .inside_about .about_5 .images { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; overflow: hidden; } .inside_about .about_5 .images::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; background: #000; opacity: .6; } .inside_about .about_5 .images img, .inside_about .about_5 .images video { width: 100%; height: 100%; object-fit: cover; } .inside_about .about_5 .mask_title { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 11; padding-top: clamp(50px, 5.20833333vw, 100px); padding-bottom: clamp(50px, 5.20833333vw, 100px); } .inside_about .about_5 .mask_box { width: 100%; height: 100%; position: absolute; top: 0; left: 0; text-align: center; background: #FFF; z-index: 10; font-size: 240px; font-family: 'Orbitron', 'ff800'; color: #000; mix-blend-mode: screen; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } @media (max-width:1680px) { .inside_about .about_5 .mask_box { font-size: 210px; } } @media (max-width:1440px) { .inside_about .about_5 .mask_box { font-size: 180px; } } @media (max-width:1280px) { .inside_about .about_5 .mask_box { font-size: 160px; } } @media (max-width:1024px) { .inside_about .about_5 .mask_box { font-size: 128px; } } @media (max-width:990px) { .inside_about .about_5 .mask_box { font-size: 124px; } } @media (max-width:768px) { .inside_about .about_5 .mask_box { font-size: 96px; } } @media (max-width:640px) { .inside_about .about_5 .mask_box { font-size: 80px; } } @media (max-width:1600px) { .inside_about .about_5 .mask_box { font-size: 220px; } } @media (max-width:1440px) { .inside_about .about_5 .mask_box { font-size: 200px; } } @media (max-width:1280px) { .inside_about .about_5 .mask_box { font-size: 180px; } } @media (max-width:1024px) { .inside_about .about_5 .mask_box { font-size: 150px; } } @media (max-width:990px) { .inside_about .about_5 .history_box { height: auto; opacity: 1; } .inside_about .about_5 .mask_title, .inside_about .about_5 .mask_box { display: none; } } .inside_about .about_6 { width: 100%; height: auto; padding-top: clamp(70px, 7.29166667vw, 140px); padding-bottom: clamp(75px, 7.8125vw, 150px); position: relative; background: #f3f5f6; overflow: hidden; } .inside_about .about_6 .about_box { width: 100%; height: auto; } .inside_about .about_6 .about_box .about_main { width: 100%; height: auto; margin-top: clamp(25px, 2.60416667vw, 50px); background: #FFF; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .inside_about .about_6 .about_box .about_main .bgimg { width: 32.222222222222222222222222222222%; } .inside_about .about_6 .about_box .about_main .about_content { width: auto; height: auto; flex: 1; padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(20px, 2.08333333vw, 40px); padding-left: clamp(20px, 2.08333333vw, 40px); padding-right: clamp(15px, 1.5625vw, 30px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; overflow: hidden; } .inside_about .about_6 .about_box .about_main .about_content .tabs_box { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; grid-gap: 30px; } .inside_about .about_6 .about_box .about_main .about_content .tabs_box .item { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; cursor: pointer; } .inside_about .about_6 .about_box .about_main .about_content .tabs_box .item .icon { font-size: 0; filter: grayscale(1); opacity: .4; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_about .about_6 .about_box .about_main .about_content .tabs_box .item .title { font-size: 16px; color: #DEDEDE; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1440px) { .inside_about .about_6 .about_box .about_main .about_content .tabs_box .item .title { font-size: 14px; } } @media (max-width:1024px) { .inside_about .about_6 .about_box .about_main .about_content .tabs_box .item .title { font-size: 13px; } } @media (max-width:768px) { .inside_about .about_6 .about_box .about_main .about_content .tabs_box .item .title { font-size: 12px; } } .inside_about .about_6 .about_box .about_main .about_content .tabs_box .item:hover .icon { opacity: .8; } .inside_about .about_6 .about_box .about_main .about_content .tabs_box .item:hover .title { color: #999; } .inside_about .about_6 .about_box .about_main .about_content .tabs_box .item.active .icon { filter: none; opacity: 1; } .inside_about .about_6 .about_box .about_main .about_content .tabs_box .item.active .title { color: #f39800; } .inside_about .about_6 .about_box .about_main .about_content .swiper_box { width: 100%; height: auto; flex: 1; margin-top: clamp(15px, 1.5625vw, 30px); } .inside_about .about_6 .about_box .about_main .about_content .swiper_box div.swiper-slide { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; opacity: 0; } .inside_about .about_6 .about_box .about_main .about_content .swiper_box .headtitle { width: 100%; height: auto; padding-left: .8em; font-size: 24px; font-family: 'Rubik', 'ff700'; color: #2c303d; position: relative; z-index: 1; } @media (max-width:1680px) { .inside_about .about_6 .about_box .about_main .about_content .swiper_box .headtitle { font-size: 22px; } } @media (max-width:1440px) { .inside_about .about_6 .about_box .about_main .about_content .swiper_box .headtitle { font-size: 20px; } } @media (max-width:1280px) { .inside_about .about_6 .about_box .about_main .about_content .swiper_box .headtitle { font-size: 18px; } } @media (max-width:1024px) { .inside_about .about_6 .about_box .about_main .about_content .swiper_box .headtitle { font-size: 16px; } } @media (max-width:768px) { .inside_about .about_6 .about_box .about_main .about_content .swiper_box .headtitle { font-size: 15px; } } .inside_about .about_6 .about_box .about_main .about_content .swiper_box .headtitle::after { content: ''; width: 4px; height: .8em; position: absolute; top: 50%; left: 0; z-index: 1; transform: translateY(-50%); background: #f39800; } .inside_about .about_6 .about_box .about_main .about_content .swiper_box .swiper_img { width: 100%; height: auto; overflow: hidden; } .inside_about .about_6 .about_box .about_main .about_content .swiper_box .swiper_img li.swiper-slide { width: 30%; pointer-events: initial; } .inside_about .about_6 .about_box .about_main .about_content .swiper_box .swiper_img .img { width: 100%; height: auto; background: #F6F6F8; overflow: hidden; } .inside_about .about_6 .about_box .about_main .about_content .swiper_box .swiper_img .img .pb { padding-bottom: 69.594594594594594594594594594595%; } .inside_about .about_6 .about_box .about_main .about_content .swiper_box .swiper_img .title { width: 100%; height: auto; margin-top: clamp(12px, 1.25vw, 24px); text-align: center; font-size: 18px; font-family: 'Rubik', 'ff200'; color: #2c303d; } @media (max-width:1440px) { .inside_about .about_6 .about_box .about_main .about_content .swiper_box .swiper_img .title { font-size: 16px; } } @media (max-width:1024px) { .inside_about .about_6 .about_box .about_main .about_content .swiper_box .swiper_img .title { font-size: 14px; } } @media (max-width:768px) { .inside_about .about_6 .about_box .about_main .about_content .swiper_box .swiper_img .title { font-size: 13px; } } .inside_about .about_6 .about_box .about_main .about_content .swiper_box .inside_pager { width: 100%; height: auto; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } @media (max-width:990px) { .inside_about .about_6 .about_box .about_main { display: block; } .inside_about .about_6 .about_box .about_main .bgimg { display: none; } .inside_about .about_6 .about_box .about_main .about_content { width: 100%; display: block; } .inside_about .about_6 .about_box .about_main .about_content .tabs_box .item .icon { height: 30px; } .inside_about .about_6 .about_box .about_main .about_content .swiper_box { margin-top: 20px; } .inside_about .about_6 .about_box .about_main .about_content .swiper_box .swiper_img { margin-top: 20px; } .inside_about .about_6 .about_box .about_main .about_content .swiper_box .inside_pager { margin-top: clamp(20px, 2.08333333vw, 40px); } } @media (max-width:768px) { .inside_about .about_6 .about_box .about_main .about_content .tabs_box { grid-gap: 10px; -webkit-justify-content: center; justify-content: center; } .inside_about .about_6 .about_box .about_main .about_content .tabs_box .item .icon { height: 20px; } .inside_about .about_6 .about_box .about_main .about_content .swiper_box .swiper_img .title { text-align: center; } } /* 濯掍綋娌熼€ */ .inisde_media { width: 100%; height: auto; background: #cee5f0 url('../images/bg_right.png') no-repeat left top / 19.58333333% auto; position: relative; overflow: hidden; } .inisde_media .media_box { width: 100%; height: auto; padding-top: clamp(50px, 5.20833333vw, 100px); padding-bottom: clamp(50px, 5.20833333vw, 100px); } .inisde_media .media_box .media_main { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; grid-gap: min(5.2vw, 100px); margin-top: clamp(15px, 1.5625vw, 30px); } .inisde_media .media_box .media_main .content { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .inisde_media .media_box .media_main .content .icon { font-size: 0; } .inisde_media .media_box .media_main .content .info_box { width: 100%; height: auto; padding-left: 10px; } .inisde_media .media_box .media_main .content .info_box .tel_box { width: 100%; height: auto; } .inisde_media .media_box .media_main .content .info_box .tel_box .title { font-size: 16px; font-family: 'Rubik', 'ff200'; } @media (max-width:1440px) { .inisde_media .media_box .media_main .content .info_box .tel_box .title { font-size: 14px; } } @media (max-width:1024px) { .inisde_media .media_box .media_main .content .info_box .tel_box .title { font-size: 13px; } } @media (max-width:768px) { .inisde_media .media_box .media_main .content .info_box .tel_box .title { font-size: 12px; } } .inisde_media .media_box .media_main .content .info_box .tel_box .phone { margin-top: .2em; font-size: 30px; font-family: 'Rubik'; color: #003281; } @media (max-width:1680px) { .inisde_media .media_box .media_main .content .info_box .tel_box .phone { font-size: 26px; } } @media (max-width:1440px) { .inisde_media .media_box .media_main .content .info_box .tel_box .phone { font-size: 24px; } } @media (max-width:1280px) { .inisde_media .media_box .media_main .content .info_box .tel_box .phone { font-size: 22px; } } @media (max-width:1024px) { .inisde_media .media_box .media_main .content .info_box .tel_box .phone { font-size: 20px; } } @media (max-width:768px) { .inisde_media .media_box .media_main .content .info_box .tel_box .phone { font-size: 18px; } } .inisde_media .media_box .media_main .content .info_box .qrcode_box { width: 100%; height: auto; margin-top: clamp(10px, 1.04166667vw, 20px); } .inisde_media .media_box .media_main .content .info_box .qrcode_box .tips { font-size: 18px; font-family: 'Rubik', 'ff200'; color: #2c303d; } @media (max-width:1440px) { .inisde_media .media_box .media_main .content .info_box .qrcode_box .tips { font-size: 16px; } } @media (max-width:1024px) { .inisde_media .media_box .media_main .content .info_box .qrcode_box .tips { font-size: 14px; } } @media (max-width:768px) { .inisde_media .media_box .media_main .content .info_box .qrcode_box .tips { font-size: 13px; } } .inisde_media .media_box .media_main .content .info_box .qrcode_box .qrcode { margin-top: 5px; font-size: 0; } .inisde_media .media_box .media_main .menu { display: table; } .inisde_media .media_box .media_main .menu .item { width: 100%; height: auto; display: table-row; } .inisde_media .media_box .media_main .menu .item .title, .inisde_media .media_box .media_main .menu .item .details { display: table-cell; padding: 5px 0; font-family: 'Rubik', 'ff200'; font-size: 16px; color: #2c303d; line-height: 1; } @media (max-width:1440px) { .inisde_media .media_box .media_main .menu .item .title, .inisde_media .media_box .media_main .menu .item .details { font-size: 14px; } } @media (max-width:1024px) { .inisde_media .media_box .media_main .menu .item .title, .inisde_media .media_box .media_main .menu .item .details { font-size: 13px; } } @media (max-width:768px) { .inisde_media .media_box .media_main .menu .item .title, .inisde_media .media_box .media_main .menu .item .details { font-size: 12px; } } .inisde_media .media_box .media_main .menu .item .title { opacity: .6; } .inisde_media .media_box .media_main .menu .item .details { padding-left: clamp(15px, 1.5625vw, 30px); } @media (max-width:768px) { .inisde_media .media_box .media_main { display: block; } .inisde_media .media_box .media_main .content .icon { width: 24px; } .inisde_media .media_box .media_main .content .info_box { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .inisde_media .media_box .media_main .content .info_box .qrcode_box { margin: 0; } .inisde_media .media_box .media_main .menu { width: 100%; height: auto; margin-top: clamp(25px, 2.60416667vw, 50px); } .inisde_media .media_box .media_main .menu .item .title { min-width: 100px; } } @media (max-width:480px) { .inisde_media .media_box .media_main { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column-reverse; -webkit-flex-direction: column-reverse; flex-direction: column-reverse; } .inisde_media .media_box .media_main .content { margin-top: clamp(25px, 2.60416667vw, 50px); display: block; } .inisde_media .media_box .media_main .content .info_box { margin-top: 15px; padding: 0; display: block; } .inisde_media .media_box .media_main .menu { margin: 0; } } .inisde_media .media_img { width: 100%; height: 100%; position: absolute; right: 0; top: 0; } .inisde_media .media_img img { width: 100%; height: 100%; object-fit: cover; } @media (max-width:990px) { .inisde_media .media_img { display: none; } } /* ---------- */ /* 鍐呴〉 鏂伴椈鍒楄〃 */ .inside_news { width: 100%; height: auto; margin-top: clamp(20px, 2.08333333vw, 40px); position: relative; z-index: 1; /* 杞挱 */ /* 鏂伴椈鍒楄〃鍐呭 */ } .inside_news .news_header { width: 100%; height: auto; position: relative; z-index: 5; } .inside_news .news_header .swiper_box { width: 100%; height: auto; min-height: 300px; background: #F0F2F4; overflow: hidden; } .inside_news .news_header .swiper_box .swiper-slide { position: relative; z-index: 1; opacity: 0; } .inside_news .news_header .swiper_box .swiper-slide.active { z-index: 5; } .inside_news .news_header .swiper_box .swiper-slide.active * { pointer-events: initial; } .inside_news .news_header .swiper_box .swiper-slide a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; pointer-events: initial; } .inside_news .news_header .swiper_box .img { width: 50%; height: auto; overflow: hidden; } .inside_news .news_header .swiper_box .img .pb { padding-bottom: 58.33333333%; } .inside_news .news_header .swiper_box .img img { width: 100%; height: 100%; object-fit: cover; } .inside_news .news_header .swiper_box .content { width: 50%; height: auto; padding-left: clamp(20px, 2.08333333vw, 40px); padding-right: clamp(20px, 2.08333333vw, 40px); padding-top: clamp(30px, 3.125vw, 60px); padding-bottom: clamp(30px, 3.125vw, 60px); /*display: -webkit-box;*/ /*display: -ms-flexbox;*/ /*display: -webkit-flex;*/ /*display: flex;*/ /*-webkit-box-orient: vertical;*/ /*-ms-flex-direction: column;*/ /*-webkit-flex-direction: column;*/ /*flex-direction: column;*/ /*-webkit-box-pack: justify;*/ /*-ms-flex-pack: justify;*/ /*-webkit-justify-content: space-between;*/ /*justify-content: space-between;*/ } .inside_news .news_header .swiper_box .content .headtitle { font-size: 14px; color: #2c303d; } @media (max-width:1280px) { .inside_news .news_header .swiper_box .content .headtitle { font-size: 13px; } } @media (max-width:1024px) { .inside_news .news_header .swiper_box .content .headtitle { font-size: 12px; } } .inside_news .news_header .swiper_box .content .info { width: 100%; height: auto; margin: 20px 0 0; } .inside_news .news_header .swiper_box .content .info .title { width: 100%; height: calc(2em * 1.5); font-size: 24px; font-family: 'Rubik', 'ff400'; color: #2c303d; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } @media (max-width:1680px) { .inside_news .news_header .swiper_box .content .info .title { font-size: 22px; } } @media (max-width:1440px) { .inside_news .news_header .swiper_box .content .info .title { font-size: 20px; } } @media (max-width:1280px) { .inside_news .news_header .swiper_box .content .info .title { font-size: 18px; } } @media (max-width:1024px) { .inside_news .news_header .swiper_box .content .info .title { font-size: 16px; } } @media (max-width:768px) { .inside_news .news_header .swiper_box .content .info .title { font-size: 15px; } } .inside_news .news_header .swiper_box .content .info .details { width: 100%; height: calc(2em * 1.5); margin-top: 1.5em; font-size: 14px; font-family: 'Rubik', 'ff400'; color: #2c303d; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } @media (max-width:1280px) { .inside_news .news_header .swiper_box .content .info .details { font-size: 13px; } } @media (max-width:1024px) { .inside_news .news_header .swiper_box .content .info .details { font-size: 12px; } } @media (max-width:768px) { .inside_news .news_header .swiper_box .swiper-slide a { display: block; } .inside_news .news_header .swiper_box .img { width: 100%; } .inside_news .news_header .swiper_box .content { width: 100%; } } .inside_news .news_header .swiper_pager { margin-top: clamp(11.5px, 1.19791667vw, 23px); } .inside_news .news_content { width: 100%; height: auto; padding-top: clamp(50px, 5.20833333vw, 100px); padding-bottom: clamp(70px, 7.29166667vw, 140px); background: linear-gradient(#f3f6f9, transparent clamp(130px, 20vh, 260px)); } .inside_news .news_content .news_box { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_news .news_content .news_box .inside_title { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_news .news_content .news_box .news_menu { width: 66.6666667%; height: auto; } .inside_news .news_content .news_box .news_menu .menu_box { width: 100%; height: auto; margin-top: clamp(25px, 2.60416667vw, 50px); } .inside_news .news_content .news_box .news_menu .menu_box .item { width: 100%; height: auto; } .inside_news .news_content .news_box .news_menu .menu_box .item a { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_news .news_content .news_box .news_menu .menu_box .item .img { width: 48.333333333333333333333333333333%; height: auto; font-size: 0; overflow: hidden; } .inside_news .news_content .news_box .news_menu .menu_box .item .img .pb { padding-bottom: 51.72%; } .inside_news .news_content .news_box .news_menu .menu_box .item .img .ab { -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_news .news_content .news_box .news_menu .menu_box .item .img img { width: 100%; height: 100%; object-fit: cover; } .inside_news .news_content .news_box .news_menu .menu_box .item .info { width: 48.958333333333333333333333333333%; height: auto; padding-top: clamp(10px, 1.04166667vw, 20px); padding-bottom: clamp(10px, 1.04166667vw, 20px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .inside_news .news_content .news_box .news_menu .menu_box .item .info .title { width: 100%; height: calc(2em * 1.5); font-size: 20px; font-family: 'Rubik', 'ff700'; color: #2c303d; line-height: 1.5; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } @media (max-width:1680px) { .inside_news .news_content .news_box .news_menu .menu_box .item .info .title { font-size: 18px; } } @media (max-width:1440px) { .inside_news .news_content .news_box .news_menu .menu_box .item .info .title { font-size: 17px; } } @media (max-width:1280px) { .inside_news .news_content .news_box .news_menu .menu_box .item .info .title { font-size: 16px; } } @media (max-width:1024px) { .inside_news .news_content .news_box .news_menu .menu_box .item .info .title { font-size: 15px; } } @media (max-width:768px) { .inside_news .news_content .news_box .news_menu .menu_box .item .info .title { font-size: 14px; } } .inside_news .news_content .news_box .news_menu .menu_box .item .info .details { width: 100%; height: calc(3em * 1.5); margin: 1em 0 0.5em; font-size: 14px; font-family: 'Rubik', 'ff300'; line-height: 1.5; color: #2c303d; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } @media (max-width:1280px) { .inside_news .news_content .news_box .news_menu .menu_box .item .info .details { font-size: 13px; } } @media (max-width:1024px) { .inside_news .news_content .news_box .news_menu .menu_box .item .info .details { font-size: 12px; } } .inside_news .news_content .news_box .news_menu .menu_box .item .info .time { font-size: 14px; font-family: 'Rubik', 'ff400'; color: #2c303d; } @media (max-width:1280px) { .inside_news .news_content .news_box .news_menu .menu_box .item .info .time { font-size: 13px; } } @media (max-width:1024px) { .inside_news .news_content .news_box .news_menu .menu_box .item .info .time { font-size: 12px; } } .inside_news .news_content .news_box .news_menu .menu_box .item:hover .img .ab { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .inside_news .news_content .news_box .news_menu .menu_box .item:hover .info .title { color: #f39800; } .inside_news .news_content .news_box .news_menu .menu_box .item:first-child ~ .item { margin-top: clamp(25px, 2.60416667vw, 50px); } .inside_news .news_content .news_box .news_menu .more_btn { width: 100%; height: auto; margin-top: clamp(25px, 2.60416667vw, 50px); } .inside_news .news_content .news_box .news_menu .more_btn a { width: 100%; height: 60px; border: 2px solid #EEF0F2; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; font-size: 16px; font-family: 'Rubik', 'ff800'; color: #2c303d; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1440px) { .inside_news .news_content .news_box .news_menu .more_btn a { font-size: 14px; } } @media (max-width:1024px) { .inside_news .news_content .news_box .news_menu .more_btn a { font-size: 13px; } } @media (max-width:768px) { .inside_news .news_content .news_box .news_menu .more_btn a { font-size: 12px; } } .inside_news .news_content .news_box .news_menu .more_btn a:hover { background: #f39800; border-color: #f39800; color: #FFF; } .inside_news .news_content .news_box .news_sidebar { width: 25%; height: auto; } .inside_news .news_content .news_box .news_sidebar .menu_box { width: 100%; height: auto; margin-top: clamp(25px, 2.60416667vw, 50px); } .inside_news .news_content .news_box .news_sidebar .menu_box .item { width: 100%; height: auto; padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(20px, 2.08333333vw, 40px); border-bottom: 1px solid #EEF0F2; } .inside_news .news_content .news_box .news_sidebar .menu_box .item a { width: 100%; height: auto; } .inside_news .news_content .news_box .news_sidebar .menu_box .item .time { font-size: 14px; font-family: 'Montserrat', 'ff400'; color: #2c303d; } @media (max-width:1280px) { .inside_news .news_content .news_box .news_sidebar .menu_box .item .time { font-size: 13px; } } @media (max-width:1024px) { .inside_news .news_content .news_box .news_sidebar .menu_box .item .time { font-size: 12px; } } .inside_news .news_content .news_box .news_sidebar .menu_box .item .title { width: 100%; height: auto; max-height: calc(2em * 1.5); margin-top: .6em; font-size: 20px; font-family: 'Rubik', 'ff700'; line-height: 1.5; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } @media (max-width:1680px) { .inside_news .news_content .news_box .news_sidebar .menu_box .item .title { font-size: 18px; } } @media (max-width:1440px) { .inside_news .news_content .news_box .news_sidebar .menu_box .item .title { font-size: 17px; } } @media (max-width:1280px) { .inside_news .news_content .news_box .news_sidebar .menu_box .item .title { font-size: 16px; } } @media (max-width:1024px) { .inside_news .news_content .news_box .news_sidebar .menu_box .item .title { font-size: 15px; } } @media (max-width:768px) { .inside_news .news_content .news_box .news_sidebar .menu_box .item .title { font-size: 14px; } } .inside_news .news_content .news_box .news_sidebar .menu_box .item:hover .title { color: #f39800; } .inside_news .news_content .news_box .news_sidebar .menu_box .item:first-child { padding-top: 0; } @media (max-width:990px) { .inside_news .news_content .news_box { display: block; } .inside_news .news_content .news_box .news_menu { width: 100%; } .inside_news .news_content .news_box .news_sidebar { display: none; } } @media (max-width:480px) { .inside_news .news_content .news_box .news_menu .menu_box .item .info { padding: 0; } .inside_news .news_content .news_box .news_menu .menu_box .item .info .details { display: none; } .inside_news .news_content .news_box .news_menu .menu_box .item .info .time { margin-top: 15px; } } /* 鍐呴〉 鏂伴椈璇︽儏 */ .inside_news_details { width: 100%; height: auto; padding-top: 130px; background: linear-gradient(#f3f6f9, transparent clamp(130px, 20vh, 260px)); position: relative; z-index: 1; } @media (max-width:1366px) { .inside_news_details { padding-top: 120px; } } @media (max-width:990px) { .inside_news_details { padding-top: 60px; } .inside_news_details .navigation { display: none; } } .inside_news_details .navigation { padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(20px, 2.08333333vw, 40px); } .inside_news_details .news_box { width: 100%; height: auto; padding-top: clamp(30px, 3.125vw, 60px); padding-bottom: clamp(80px, 8.33333333vw, 160px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; /* 鏂伴椈渚ц竟鏍 */ } .inside_news_details .news_box .news_main { width: 66.666666666666666666666666666667%; height: auto; } .inside_news_details .news_box .news_main .news_content { width: 100%; height: auto; } .inside_news_details .news_box .news_main .news_content .text_details { margin-top: clamp(20px, 2.08333333vw, 40px); } .inside_news_details .news_box .news_main .news_hot { width: 100%; height: auto; margin-top: clamp(30px, 3.125vw, 60px); padding-top: clamp(25px, 2.60416667vw, 50px); border-top: 1px solid #EEF0F2; } .inside_news_details .news_box .news_main .news_hot .hot_title { width: 100%; height: auto; position: relative; z-index: 1; line-height: 1; padding-left: .66em; font-size: 24px; font-family: 'Rubik', 'ff800'; color: #2c303d; } @media (max-width:1680px) { .inside_news_details .news_box .news_main .news_hot .hot_title { font-size: 22px; } } @media (max-width:1440px) { .inside_news_details .news_box .news_main .news_hot .hot_title { font-size: 20px; } } @media (max-width:1280px) { .inside_news_details .news_box .news_main .news_hot .hot_title { font-size: 18px; } } @media (max-width:1024px) { .inside_news_details .news_box .news_main .news_hot .hot_title { font-size: 16px; } } @media (max-width:768px) { .inside_news_details .news_box .news_main .news_hot .hot_title { font-size: 15px; } } .inside_news_details .news_box .news_main .news_hot .hot_title::after { content: ''; width: 4px; height: .66em; position: absolute; top: 50%; left: 0; z-index: 1; background: #f39800; transform: translateY(-50%); } .inside_news_details .news_box .news_main .news_hot .swiper_box { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); overflow: hidden; } .inside_news_details .news_box .news_main .news_hot .swiper_box .swiper-slide { opacity: 0; } .inside_news_details .news_box .news_main .news_hot .swiper_box .swiper-slide a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; pointer-events: initial; } .inside_news_details .news_box .news_main .news_hot .swiper_box .img { width: 50%; height: auto; overflow: hidden; } .inside_news_details .news_box .news_main .news_hot .swiper_box .img .pb { padding-bottom: 58.33333333%; } .inside_news_details .news_box .news_main .news_hot .swiper_box .img img { width: 100%; height: 100%; object-fit: cover; } .inside_news_details .news_box .news_main .news_hot .swiper_box .content { width: 50%; height: auto; padding-left: clamp(20px, 2.08333333vw, 40px); padding-right: clamp(20px, 2.08333333vw, 40px); padding-top: clamp(10px, 1.04166667vw, 20px); padding-bottom: clamp(10px, 1.04166667vw, 20px); } .inside_news_details .news_box .news_main .news_hot .swiper_box .content .title { width: 100%; height: calc(2em * 1.5); font-size: 20px; font-family: 'Rubik', 'ff400'; color: #2c303d; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } @media (max-width:1680px) { .inside_news_details .news_box .news_main .news_hot .swiper_box .content .title { font-size: 18px; } } @media (max-width:1440px) { .inside_news_details .news_box .news_main .news_hot .swiper_box .content .title { font-size: 17px; } } @media (max-width:1280px) { .inside_news_details .news_box .news_main .news_hot .swiper_box .content .title { font-size: 16px; } } @media (max-width:1024px) { .inside_news_details .news_box .news_main .news_hot .swiper_box .content .title { font-size: 15px; } } @media (max-width:768px) { .inside_news_details .news_box .news_main .news_hot .swiper_box .content .title { font-size: 14px; } } .inside_news_details .news_box .news_main .news_hot .swiper_box .content .details { width: 100%; height: calc(2em * 1.5); margin-top: 2em; font-size: 14px; font-family: 'Rubik', 'ff400'; color: #2c303d; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } @media (max-width:1280px) { .inside_news_details .news_box .news_main .news_hot .swiper_box .content .details { font-size: 13px; } } @media (max-width:1024px) { .inside_news_details .news_box .news_main .news_hot .swiper_box .content .details { font-size: 12px; } } .inside_news_details .news_box .news_main .news_hot .swiper_box .content .time { margin-top: 2em; font-size: 14px; font-family: 'Montserrat', 'ff400'; color: #2c303d; } @media (max-width:1280px) { .inside_news_details .news_box .news_main .news_hot .swiper_box .content .time { font-size: 13px; } } @media (max-width:1024px) { .inside_news_details .news_box .news_main .news_hot .swiper_box .content .time { font-size: 12px; } } .inside_news_details .news_box .news_main .news_hot .swiper_pager { margin-top: clamp(11.5px, 1.19791667vw, 23px); } .inside_news_details .news_box .news_sidebar { width: 25%; height: auto; /* 绀句氦濯掍綋 */ /* 鐑棬鏂囩珷 */ /* 鍏虫敞鍏紬鍙 */ } .inside_news_details .news_box .news_sidebar .media_box { width: 100%; height: auto; position: relative; z-index: 10; } .inside_news_details .news_box .news_sidebar .media_box .media_main { width: 100%; height: auto; margin-top: clamp(10px, 1.04166667vw, 20px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .inside_news_details .news_box .news_sidebar .media_box .media_main .tips { font-size: 14px; color: #2c303d; } @media (max-width:1280px) { .inside_news_details .news_box .news_sidebar .media_box .media_main .tips { font-size: 13px; } } @media (max-width:1024px) { .inside_news_details .news_box .news_sidebar .media_box .media_main .tips { font-size: 12px; } } .inside_news_details .news_box .news_sidebar .media_box .media_main .share_box { width: auto; flex: 1; margin-left: clamp(10px, 1.04166667vw, 20px); } .inside_news_details .news_box .news_sidebar .hot_new { width: 100%; height: auto; margin-top: clamp(45px, 4.6875vw, 90px); } .inside_news_details .news_box .news_sidebar .hot_new .inside_headline { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_news_details .news_box .news_sidebar .hot_new .menu_box { width: 100%; height: auto; } .inside_news_details .news_box .news_sidebar .hot_new .menu_box .item { width: 100%; height: auto; padding-top: clamp(22.5px, 2.34375vw, 45px); padding-bottom: clamp(22.5px, 2.34375vw, 45px); border-bottom: 1px solid #EEF0F2; } .inside_news_details .news_box .news_sidebar .hot_new .menu_box .item a { width: 100%; height: auto; } .inside_news_details .news_box .news_sidebar .hot_new .menu_box .item .time { font-size: 14px; font-family: 'Montserrat', 'ff400'; color: #2c303d; } @media (max-width:1280px) { .inside_news_details .news_box .news_sidebar .hot_new .menu_box .item .time { font-size: 13px; } } @media (max-width:1024px) { .inside_news_details .news_box .news_sidebar .hot_new .menu_box .item .time { font-size: 12px; } } .inside_news_details .news_box .news_sidebar .hot_new .menu_box .item .title { width: 100%; height: auto; max-height: calc(2em * 1.5); margin-top: .6em; font-size: 20px; font-family: 'Rubik', 'ff300'; line-height: 1.5; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } @media (max-width:1680px) { .inside_news_details .news_box .news_sidebar .hot_new .menu_box .item .title { font-size: 18px; } } @media (max-width:1440px) { .inside_news_details .news_box .news_sidebar .hot_new .menu_box .item .title { font-size: 17px; } } @media (max-width:1280px) { .inside_news_details .news_box .news_sidebar .hot_new .menu_box .item .title { font-size: 16px; } } @media (max-width:1024px) { .inside_news_details .news_box .news_sidebar .hot_new .menu_box .item .title { font-size: 15px; } } @media (max-width:768px) { .inside_news_details .news_box .news_sidebar .hot_new .menu_box .item .title { font-size: 14px; } } .inside_news_details .news_box .news_sidebar .hot_new .menu_box .item:hover .title { color: #f39800; } .inside_news_details .news_box .news_sidebar .add_wechat { width: 100%; height: auto; padding-left: clamp(15px, 1.5625vw, 30px); padding-right: clamp(15px, 1.5625vw, 30px); padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(20px, 2.08333333vw, 40px); background: #f39800; position: relative; z-index: 1; overflow: hidden; } .inside_news_details .news_box .news_sidebar .add_wechat::before, .inside_news_details .news_box .news_sidebar .add_wechat::after { content: ''; width: 100%; height: 100%; position: absolute; right: 0; top: 0; z-index: 1; } .inside_news_details .news_box .news_sidebar .add_wechat::after { z-index: 2; background: linear-gradient(to right, transparent, #ff0000); opacity: .1; } .inside_news_details .news_box .news_sidebar .add_wechat .content { width: 100%; height: auto; position: relative; z-index: 5; } .inside_news_details .news_box .news_sidebar .add_wechat .content .icon { width: 25%; max-width: 50px; } .inside_news_details .news_box .news_sidebar .add_wechat .content .title { width: 100%; height: auto; margin-top: clamp(10px, 1.04166667vw, 20px); font-size: 24px; color: #FFF; line-height: 1.2; } @media (max-width:1680px) { .inside_news_details .news_box .news_sidebar .add_wechat .content .title { font-size: 22px; } } @media (max-width:1440px) { .inside_news_details .news_box .news_sidebar .add_wechat .content .title { font-size: 20px; } } @media (max-width:1280px) { .inside_news_details .news_box .news_sidebar .add_wechat .content .title { font-size: 18px; } } @media (max-width:1024px) { .inside_news_details .news_box .news_sidebar .add_wechat .content .title { font-size: 16px; } } @media (max-width:768px) { .inside_news_details .news_box .news_sidebar .add_wechat .content .title { font-size: 15px; } } .inside_news_details .news_box .news_sidebar .add_wechat .content .qrcode { margin-top: clamp(10px, 1.04166667vw, 20px); font-size: 0; } .inside_news_details .news_box .news_sidebar .add_wechat .content .tel_box { width: 100%; height: auto; margin-top: clamp(57px, 5.9375vw, 114px); } .inside_news_details .news_box .news_sidebar .add_wechat .content .tel_box .tips { font-size: 14px; font-family: 'Rubik', 'ff200'; color: #FFF; } @media (max-width:1280px) { .inside_news_details .news_box .news_sidebar .add_wechat .content .tel_box .tips { font-size: 13px; } } @media (max-width:1024px) { .inside_news_details .news_box .news_sidebar .add_wechat .content .tel_box .tips { font-size: 12px; } } .inside_news_details .news_box .news_sidebar .add_wechat .content .tel_box .phone { margin-top: .2em; font-family: 'Orbitron', 'ff800'; font-size: 30px; color: #FFF; line-height: 1; } @media (max-width:1680px) { .inside_news_details .news_box .news_sidebar .add_wechat .content .tel_box .phone { font-size: 26px; } } @media (max-width:1440px) { .inside_news_details .news_box .news_sidebar .add_wechat .content .tel_box .phone { font-size: 24px; } } @media (max-width:1280px) { .inside_news_details .news_box .news_sidebar .add_wechat .content .tel_box .phone { font-size: 22px; } } @media (max-width:1024px) { .inside_news_details .news_box .news_sidebar .add_wechat .content .tel_box .phone { font-size: 20px; } } @media (max-width:768px) { .inside_news_details .news_box .news_sidebar .add_wechat .content .tel_box .phone { font-size: 18px; } } .inside_news_details .news_box .news_sidebar .add_wechat .bg_img { width: 100%; height: 100%; position: absolute; top: 0; right: 0; z-index: 1; text-align: right; } .inside_news_details .news_box .news_sidebar .add_wechat .bg_img img { width: 100%; height: 100%; object-fit: cover; object-position: 40px top; } @media (max-width:990px) { .inside_news_details .news_box { display: block; } .inside_news_details .news_box .news_main { width: 100%; } .inside_news_details .news_box .news_main .news_hot .swiper_box .swiper-slide a { display: block; } .inside_news_details .news_box .news_main .news_hot .swiper_box .img { width: 100%; } .inside_news_details .news_box .news_main .news_hot .swiper_box .content { width: 100%; padding: 20px; background: #F5F5F5; } .inside_news_details .news_box .news_sidebar { width: 100%; margin-top: 50px; } .inside_news_details .news_box .news_sidebar .add_wechat .bg_img { width: auto; max-width: 100%; object-position: 20px top; } } /* ---------- */ /* 鍐呴〉 鎷涜仒璧勮 */ .inside_join { width: 100%; height: auto; padding-top: 130px; overflow: hidden; /* 涓板瘜澶氬僵鐨勫憳宸ユ椿鍔 */ /* 鍛樺伐鏁呬簨 */ /* 鍔犲叆鎴戜滑 */ } @media (max-width:1366px) { .inside_join { padding-top: 120px; } } @media (max-width:990px) { .inside_join { padding-top: 60px; } } .inside_join .navigation { padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(20px, 2.08333333vw, 40px); } .inside_join .join_1 { width: 100%; height: auto; overflow: hidden; } .inside_join .join_1 .join_title { width: 100%; height: auto; overflow: hidden; } .inside_join .join_1 .join_title .join_box { width: 100%; height: auto; padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(30px, 3.125vw, 60px); background: url('../images/join_arrow.jpg') no-repeat right bottom / 44.16666667% auto; } .inside_join .join_1 .join_foot { width: 100%; height: auto; position: relative; z-index: 1; } .inside_join .join_1 .join_foot .join_box { width: 100%; height: 100%; padding-top: clamp(20px, 2.08333333vw, 40px); padding-bottom: clamp(20px, 2.08333333vw, 40px); position: absolute; top: 0; left: 0; z-index: 5; } .inside_join .join_1 .join_foot .join_box .center_box { width: 100%; height: 100%; } .inside_join .join_1 .join_foot .join_box .content { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: end; -ms-flex-align: end; -webkit-align-items: flex-end; align-items: flex-end; } .inside_join .join_1 .join_foot .join_box .content .title { font-size: 42px; font-family: 'Rubik', 'ff100'; color: #FFF; } @media (max-width:1680px) { .inside_join .join_1 .join_foot .join_box .content .title { font-size: 40px; } } @media (max-width:1440px) { .inside_join .join_1 .join_foot .join_box .content .title { font-size: 34px; } } @media (max-width:1280px) { .inside_join .join_1 .join_foot .join_box .content .title { font-size: 28px; } } @media (max-width:1024px) { .inside_join .join_1 .join_foot .join_box .content .title { font-size: 24px; } } @media (max-width:768px) { .inside_join .join_1 .join_foot .join_box .content .title { font-size: 22px; } } .inside_join .join_1 .join_foot .images { width: 100%; height: 400px; background: var(--url) no-repeat center / cover; background-attachment: fixed; } @media (max-width:480px) { .inside_join .join_1 .join_title .join_box { background: transparent; } } .inside_join .join_2 { width: 100%; height: auto; } .inside_join .join_2 .join_box { width: 100%; height: auto; } .inside_join .join_2 .join_box .join_item { width: 100%; height: auto; padding-top: clamp(60px, 6.25vw, 120px); padding-bottom: clamp(60px, 6.25vw, 120px); position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .inside_join .join_2 .join_box .join_item .inside_title { width: auto; height: 100%; } .inside_join .join_2 .join_box .join_item.join_item_1 .text_details { width: 62.5%; font-size: 16px; font-family: 'Rubik', 'ff200'; line-height: 1.55; } @media (max-width:1440px) { .inside_join .join_2 .join_box .join_item.join_item_1 .text_details { font-size: 14px; } } @media (max-width:1024px) { .inside_join .join_2 .join_box .join_item.join_item_1 .text_details { font-size: 13px; } } @media (max-width:768px) { .inside_join .join_2 .join_box .join_item.join_item_1 .text_details { font-size: 12px; } } .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box { width: 55%; --iconSize: 150px; } .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .item { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; position: relative; z-index: 1; } .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .item .icon { width: var(--iconSize); height: var(--iconSize); background: #FFF; border: 8px solid #4747b3; border-radius: 50%; line-height: 1.2; position: relative; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .item .icon * { font-size: 24px; font-family: 'Rubik', 'ff700'; } @media (max-width:1680px) { .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .item .icon * { font-size: 22px; } } @media (max-width:1440px) { .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .item .icon * { font-size: 20px; } } @media (max-width:1280px) { .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .item .icon * { font-size: 18px; } } @media (max-width:1024px) { .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .item .icon * { font-size: 16px; } } @media (max-width:768px) { .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .item .icon * { font-size: 15px; } } .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .item .details { flex: 1; height: auto; margin-left: clamp(20px, 2.08333333vw, 40px); padding: clamp(15px, 1.5625vw, 30px); border-radius: 10px; background: #f5f5fa; font-size: 18px; color: #2c303d; position: relative; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } @media (max-width:1440px) { .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .item .details { font-size: 16px; } } @media (max-width:1024px) { .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .item .details { font-size: 14px; } } @media (max-width:768px) { .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .item .details { font-size: 13px; } } .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .item::after { content: ''; width: 90%; height: 0; position: absolute; top: calc(var(--iconSize) / 2); left: 5%; z-index: 1; border-top: 2px dashed #eeecf1; } .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .line { width: var(--iconSize); height: var(--size); margin-top: clamp(10px, 1.04166667vw, 20px); margin-bottom: clamp(10px, 1.04166667vw, 20px); position: relative; z-index: 1; --size: 24px; --wh: 4px; } .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .line::before, .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .line::after { content: ''; width: var(--size); height: var(--size); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #eeecf1; } .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .line::before { width: var(--wh); } .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .line::after { height: var(--wh); } .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .item.last .icon { border-color: #ff6600; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box { width: 62.5%; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .headline { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .headline .title { min-width: 240px; height: 72px; padding: 0 20px; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; font-size: 24px; font-family: 'Rubik', 'ff700'; color: #2c303d; --borderSize: 8px; } @media (max-width:1680px) { .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .headline .title { font-size: 22px; } } @media (max-width:1440px) { .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .headline .title { font-size: 20px; } } @media (max-width:1280px) { .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .headline .title { font-size: 18px; } } @media (max-width:1024px) { .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .headline .title { font-size: 16px; } } @media (max-width:768px) { .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .headline .title { font-size: 15px; } } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .headline .title::before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; border: var(--borderSize) solid #ff6600; border-radius: 50px; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .headline .title::after { content: ''; width: calc(var(--borderSize) * 2); height: calc(var(--borderSize) * 2); position: absolute; bottom: 0; left: 50%; z-index: 1; border-radius: 50%; background: #ff6600; border: calc(var(--borderSize) / 2) solid #ffffff; transform: translate(-50%, 25%); } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .headline .title::before, .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .headline .title::after { pointer-events: none; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu { width: 100%; height: auto; margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 10%; position: relative; z-index: 1; --size: 20px; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu::after { content: ''; width: 100%; height: 2px; position: absolute; top: var(--size); left: 0; z-index: 1; background: #eeecf1; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu .item { width: 100%; height: auto; padding-top: calc(var(--size) * 2); position: relative; z-index: 5; overflow: hidden; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu .item::after { content: ''; width: 2px; height: 100%; position: absolute; top: 0; left: 50%; z-index: 1; background: #eeecf1; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu .item:first-child::after, .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu .item:last-child::after { top: var(--size); } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu .item:first-child::before { content: ''; width: 50%; height: 50%; position: absolute; top: 0; left: 0; z-index: 2; background: #fff; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu .item:last-child::before { content: ''; width: 50%; height: 50%; position: absolute; top: 0; left: 50%; z-index: 2; margin-left: 2px; background: #fff; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu .item .info { width: 100%; height: 100%; background: #f5f5fa; border-radius: 20px; position: relative; z-index: 5; overflow: hidden; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu .item .title { width: 100%; height: auto; padding: 10px; text-align: center; font-size: 18px; color: #fff; background: #003281; } @media (max-width:1440px) { .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu .item .title { font-size: 16px; } } @media (max-width:1024px) { .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu .item .title { font-size: 14px; } } @media (max-width:768px) { .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu .item .title { font-size: 13px; } } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu .item .table_box { width: 100%; height: auto; padding: 20px; display: table; overflow: hidden; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu .item .table_box .row { width: 100%; height: auto; display: table-row; overflow: hidden; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu .item .table_box .row .one { display: table-cell; font-size: 16px; overflow: hidden; } @media (max-width:1440px) { .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu .item .table_box .row .one { font-size: 14px; } } @media (max-width:1024px) { .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu .item .table_box .row .one { font-size: 13px; } } @media (max-width:768px) { .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu .item .table_box .row .one { font-size: 12px; } } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu .item .table_box .row:first-child ~ .row .one { padding-top: 5px; } @media (max-width:1440px) { .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box { --iconSize: 130px; } .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .item .icon { border-width: 6px; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .headline .title { min-width: 200px; height: 64px; --borderSize: 6px; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu { --size: 18px; grid-gap: 5%; } } @media (max-width:1280px) { .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box { --iconSize: 110px; } .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .item .icon { border-width: 4px; } .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .line { --size: 18px; --wh: 2px; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .headline .title { min-width: 180px; height: 54px; --borderSize: 4px; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu { --size: 16px; grid-gap: 20px; } } @media (max-width:1024px) { .inside_join .join_2 .join_box .join_item { display: block; } .inside_join .join_2 .join_box .join_item.join_item_1 .text_details { width: 100%; margin-top: 20px; } .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box { width: 100%; margin-top: 30px; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box { width: 100%; margin-top: 30px; } } @media (max-width:768px) { .inside_join .join_2 .join_box .join_item.join_item_1 .text_details { width: 100%; margin-top: 20px; } .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box { --iconSize: 90px; } .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .item .icon { border-width: 3px; } .inside_join .join_2 .join_box .join_item.join_item_2 .menu_box .line { --size: 14px; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .headline .title { min-width: 140px; height: 48px; --borderSize: 3px; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu { grid-template-columns: 100%; grid-gap: 0; --size: 10px; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu::after { display: none; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu .item { width: 100%; margin: 0 auto; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu .item .info { border-radius: 10px; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu .item::before { display: none; } .inside_join .join_2 .join_box .join_item.join_item_3 .menu_box .menu .item::after { top: 0 !important; } } .inside_join .join_2 .join_box .join_item:first-child ~ .join_item { border-top: 1px solid #eeecf1; } .inside_join .join_3 { width: 100%; height: auto; padding-top: clamp(55px, 5.72916667vw, 110px); padding-bottom: clamp(40px, 4.16666667vw, 80px); background: #f5f5fa; overflow: hidden; } .inside_join .join_3 .join_box { width: 100%; height: auto; position: relative; z-index: 1; } .inside_join .join_3 .join_box::before { content: ''; width: min(12.8125vw, 246px); height: min(12.8125vw, 246px); position: absolute; top: 0; left: 0; z-index: 1; background: url('../images/join_bg_1.png') no-repeat center / cover; pointer-events: none; transform: translate(-50%, -10%); } .inside_join .join_3 .join_box::after { content: ''; width: min(12.8125vw, 246px); height: min(7.291666666666667vw, 140px); position: absolute; top: 0; right: 0; z-index: 1; background: url('../images/join_bg_2.png') no-repeat center / cover; pointer-events: none; transform: translate(20%, 100%); } .inside_join .join_3 .join_box .inside_title { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; position: relative; z-index: 5; } .inside_join .join_3 .join_box .inside_title .inside_pager .swiper_btn { --border: #FFF; --active: #2c303d; } .inside_join .join_3 .join_box .inside_title .inside_pager .swiper_btn::before { background: var(--border); } .inside_join .join_3 .join_box .inside_title .inside_pager .swiper_btn:hover { --border: #f39800; --active: #FFF; } .inside_join .join_3 .join_box .join_main { width: 100%; height: auto; margin-top: clamp(45px, 4.6875vw, 90px); position: relative; z-index: 5; } .inside_join .join_3 .join_box .join_main .swiper_box { width: 100%; height: auto; } .inside_join .join_3 .join_box .join_main .swiper_box .swiper-slide { width: 25%; } .inside_join .join_3 .join_box .join_main .swiper_box .swiper-slide:nth-child(even) .info { margin-top: clamp(40px, 4.16666667vw, 80px); } .inside_join .join_3 .join_box .join_main .swiper_box .info { width: 100%; height: auto; cursor: pointer; } .inside_join .join_3 .join_box .join_main .swiper_box .info .img { width: 100%; height: auto; overflow: hidden; } .inside_join .join_3 .join_box .join_main .swiper_box .info .img .pb { padding-bottom: 65.2173913%; } .inside_join .join_3 .join_box .join_main .swiper_box .info .img .ab { -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_join .join_3 .join_box .join_main .swiper_box .info .img img { width: 100%; height: 100%; object-fit: cover; } .inside_join .join_3 .join_box .join_main .swiper_box .info .title { width: 100%; height: auto; margin-top: 1em; font-size: 24px; color: #2c303d; } @media (max-width:1680px) { .inside_join .join_3 .join_box .join_main .swiper_box .info .title { font-size: 22px; } } @media (max-width:1440px) { .inside_join .join_3 .join_box .join_main .swiper_box .info .title { font-size: 20px; } } @media (max-width:1280px) { .inside_join .join_3 .join_box .join_main .swiper_box .info .title { font-size: 18px; } } @media (max-width:1024px) { .inside_join .join_3 .join_box .join_main .swiper_box .info .title { font-size: 16px; } } @media (max-width:768px) { .inside_join .join_3 .join_box .join_main .swiper_box .info .title { font-size: 15px; } } .inside_join .join_3 .join_box .join_main .swiper_box .info:hover .img .ab { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .inside_join .join_3 .join_box .join_main .swiper_box .info:hover .title { color: #f39800; } .inside_join .join_4 { width: 100%; height: auto; padding-top: clamp(40px, 4.16666667vw, 80px); padding-bottom: clamp(40px, 4.16666667vw, 80px); background: #f5f5fa; } .inside_join .join_4 .join_title { width: 100%; height: auto; position: relative; z-index: 1; } .inside_join .join_4 .join_box { width: 100%; height: auto; margin-top: clamp(50px, 5.20833333vw, 100px); position: relative; z-index: 10; overflow: hidden; } .inside_join .join_4 .join_box .swiper_box { width: 100%; height: auto; position: relative; z-index: 1; } .inside_join .join_4 .join_box .swiper_box .swiper-slide { width: 50%; position: relative; z-index: 1; } .inside_join .join_4 .join_box .swiper_box .swiper-slide.active { z-index: 5; pointer-events: initial } .inside_join .join_4 .join_box .swiper_box .content { width: 100%; height: auto; background: #FFF; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: .4; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; overflow: hidden; } .inside_join .join_4 .join_box .swiper_box .content .info { width: auto; height: auto; flex: 1; position: relative; z-index: 5; padding-left: clamp(30px, 3.125vw, 60px); padding-right: clamp(25px, 2.60416667vw, 50px); padding-top: clamp(25px, 2.60416667vw, 50px); padding-bottom: clamp(25px, 2.60416667vw, 50px); overflow: hidden; } .inside_join .join_4 .join_box .swiper_box .content .info .title_box { width: 100%; height: auto; padding-bottom: clamp(10px, 1.04166667vw, 20px); position: relative; z-index: 1; } .inside_join .join_4 .join_box .swiper_box .content .info .title_box .title { font-size: 36px; color: #2c303d; line-height: 1; } @media (max-width:1680px) { .inside_join .join_4 .join_box .swiper_box .content .info .title_box .title { font-size: 32px; } } @media (max-width:1440px) { .inside_join .join_4 .join_box .swiper_box .content .info .title_box .title { font-size: 28px; } } @media (max-width:1280px) { .inside_join .join_4 .join_box .swiper_box .content .info .title_box .title { font-size: 24px; } } @media (max-width:1024px) { .inside_join .join_4 .join_box .swiper_box .content .info .title_box .title { font-size: 22px; } } @media (max-width:768px) { .inside_join .join_4 .join_box .swiper_box .content .info .title_box .title { font-size: 20px; } } .inside_join .join_4 .join_box .swiper_box .content .info .title_box .classify { margin-top: 1em; font-size: 16px; color: #2c303d; line-height: 1; } @media (max-width:1440px) { .inside_join .join_4 .join_box .swiper_box .content .info .title_box .classify { font-size: 14px; } } @media (max-width:1024px) { .inside_join .join_4 .join_box .swiper_box .content .info .title_box .classify { font-size: 13px; } } @media (max-width:768px) { .inside_join .join_4 .join_box .swiper_box .content .info .title_box .classify { font-size: 12px; } } .inside_join .join_4 .join_box .swiper_box .content .info .title_box::after { content: ''; width: 150%; height: 1px; position: absolute; bottom: 0; left: 0; z-index: 1; background: #f3f5f6; } .inside_join .join_4 .join_box .swiper_box .content .info .details { width: 100%; height: calc(4em * 1.5); margin-top: clamp(10px, 1.04166667vw, 20px); font-size: 16px; font-family: 'Rubik', 'ff200'; line-height: 1.5; color: #2c303d; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } @media (max-width:1440px) { .inside_join .join_4 .join_box .swiper_box .content .info .details { font-size: 14px; } } @media (max-width:1024px) { .inside_join .join_4 .join_box .swiper_box .content .info .details { font-size: 13px; } } @media (max-width:768px) { .inside_join .join_4 .join_box .swiper_box .content .info .details { font-size: 12px; } } .inside_join .join_4 .join_box .swiper_box .content .info .more { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; margin-top: clamp(10px, 1.04166667vw, 20px); } .inside_join .join_4 .join_box .swiper_box .content .info .more a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; font-size: 14px; color: #f39800; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .inside_join .join_4 .join_box .swiper_box .content .info .more a { font-size: 13px; } } @media (max-width:1024px) { .inside_join .join_4 .join_box .swiper_box .content .info .more a { font-size: 12px; } } .inside_join .join_4 .join_box .swiper_box .content .info .more a i { width: 5px; height: 7px; margin-left: 5px; font-size: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; background: #f39800; -webkit-mask: url('../svg/icon_arrow2.svg') no-repeat center / cover; -moz-mask: url('../svg/icon_arrow2.svg') no-repeat center / cover; mask: url('../svg/icon_arrow2.svg') no-repeat center / cover; } .inside_join .join_4 .join_box .swiper_box .content .info .more a:hover { color: #003281; } .inside_join .join_4 .join_box .swiper_box .content .info .more a:hover i { background: #003281; } .inside_join .join_4 .join_box .swiper_box .content .img { width: 40.983606557377049180327868852459%; height: auto; overflow: hidden; } .inside_join .join_4 .join_box .swiper_box .content .img .pb { padding-bottom: 120%; } .inside_join .join_4 .join_box .swiper_box .content .img img { width: 100%; height: 100%; object-fit: cover; } @media (max-width:1024px) { .inside_join .join_4 .join_box .swiper_box .content .info .details { height: calc(3em * 1.5); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } } @media (max-width:768px) { .inside_join .join_4 .join_box .swiper_box .content { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .inside_join .join_4 .join_box .swiper_box .content .info { padding: 20px; } .inside_join .join_4 .join_box .swiper_box .content .img { width: 50%; } } .inside_join .join_4 .join_box .swiper_box .swiper-slide.active .content { -webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; } .inside_join .join_4 .join_box .inside_pager { width: 50%; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 5; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; grid-gap: 0; pointer-events: none; } .inside_join .join_4 .join_box .inside_pager .swiper_btn { pointer-events: initial; } .inside_join .join_4 .join_box .inside_pager .swiper_btn::before { border: 0; background: #f39800; } .inside_join .join_4 .join_box .inside_pager .swiper_btn::after { background: #FFF; } .inside_join .join_4 .join_box .inside_pager .swiper_btn:hover::before { background: #003281; } .inside_join .join_4 .join_box .inside_pager .swiper_btn.prev { transform: translateX(-50%); } .inside_join .join_4 .join_box .inside_pager .swiper_btn.next { transform: translateX(50%); } @media (max-width:768px) { .inside_join .join_4 .join_box .inside_pager { width: 100%; left: 0; transform: translate(0); display: block; } .inside_join .join_4 .join_box .inside_pager .swiper_btn.prev, .inside_join .join_4 .join_box .inside_pager .swiper_btn.next { position: absolute; right: 0; bottom: 0; } .inside_join .join_4 .join_box .inside_pager .swiper_btn.prev { transform: translateX(-100%); margin-right: 1px; } .inside_join .join_4 .join_box .inside_pager .swiper_btn.next { transform: translate(0); } } @media (max-width:768px) { .inside_join .join_4 .join_box { margin-top: 30px; } } .inside_join .join_5 { width: 100%; height: auto; padding-top: clamp(40px, 4.16666667vw, 80px); padding-bottom: clamp(90px, 9.375vw, 180px); background: #f5f5fa; } .inside_join .join_5 .join_box { width: 100%; height: auto; } .inside_join .join_5 .join_box .menu_box { width: 100%; height: auto; margin-top: clamp(30px, 3.125vw, 60px); display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: min(3.125vw, 60px); } .inside_join .join_5 .join_box .menu_box .item { width: 100%; height: auto; background: #FFF; position: relative; z-index: 1; --color: #4747b3; overflow: hidden; } .inside_join .join_5 .join_box .menu_box .item .content { width: 100%; height: auto; padding-left: clamp(20px, 2.08333333vw, 40px); padding-right: clamp(20px, 2.08333333vw, 40px); padding-top: clamp(30px, 3.125vw, 60px); padding-bottom: clamp(30px, 3.125vw, 60px); position: relative; z-index: 5; overflow: hidden; } .inside_join .join_5 .join_box .menu_box .item .content .info { width: 48%; height: auto; } .inside_join .join_5 .join_box .menu_box .item .content .info .title { width: 100%; height: auto; font-size: 30px; font-family: 'Rubik', 'ff700'; color: var(--color); line-height: 1; } @media (max-width:1680px) { .inside_join .join_5 .join_box .menu_box .item .content .info .title { font-size: 26px; } } @media (max-width:1440px) { .inside_join .join_5 .join_box .menu_box .item .content .info .title { font-size: 24px; } } @media (max-width:1280px) { .inside_join .join_5 .join_box .menu_box .item .content .info .title { font-size: 22px; } } @media (max-width:1024px) { .inside_join .join_5 .join_box .menu_box .item .content .info .title { font-size: 20px; } } @media (max-width:768px) { .inside_join .join_5 .join_box .menu_box .item .content .info .title { font-size: 18px; } } .inside_join .join_5 .join_box .menu_box .item .content .info .details { width: 100%; height: calc(4em * 1.5); margin-top: 1em; font-size: 18px; font-family: 'Rubik', 'ff200'; color: #2c303d; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } @media (max-width:1440px) { .inside_join .join_5 .join_box .menu_box .item .content .info .details { font-size: 16px; } } @media (max-width:1024px) { .inside_join .join_5 .join_box .menu_box .item .content .info .details { font-size: 14px; } } @media (max-width:768px) { .inside_join .join_5 .join_box .menu_box .item .content .info .details { font-size: 13px; } } .inside_join .join_5 .join_box .menu_box .item .content .more { width: 100%; height: auto; margin-top: clamp(22px, 2.29166667vw, 44px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; overflow: hidden; } .inside_join .join_5 .join_box .menu_box .item .content .more a { min-width: 140px; height: 40px; padding: 0 20px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; background: var(--color); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .inside_join .join_5 .join_box .menu_box .item .content .more a .word { font-size: 14px; color: #FFF; } @media (max-width:1280px) { .inside_join .join_5 .join_box .menu_box .item .content .more a .word { font-size: 13px; } } @media (max-width:1024px) { .inside_join .join_5 .join_box .menu_box .item .content .more a .word { font-size: 12px; } } .inside_join .join_5 .join_box .menu_box .item .content .more a .icon { width: 5px; height: 7px; margin-left: 5px; font-size: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; background: #FFF; -webkit-mask: url('../svg/icon_arrow2.svg') no-repeat center / cover; -moz-mask: url('../svg/icon_arrow2.svg') no-repeat center / cover; mask: url('../svg/icon_arrow2.svg') no-repeat center / cover; } .inside_join .join_5 .join_box .menu_box .item .bg { width: 100%; height: 100%; background: linear-gradient(to right, var(--color), #ffffff); opacity: .4; position: absolute; right: 20%; top: 0; -webkit-mask: url('../svg/join_bg.svg') no-repeat right / auto 100%; -moz-mask: url('../svg/join_bg.svg') no-repeat right / auto 100%; mask: url('../svg/join_bg.svg') no-repeat right / auto 100%; } .inside_join .join_5 .join_box .menu_box .item .img { width: 100%; height: 100%; position: absolute; right: 0; top: 0; z-index: 1; font-size: 0; text-align: right; overflow: hidden; } .inside_join .join_5 .join_box .menu_box .item .img img { width: auto; height: 100%; object-fit: cover; } @media (max-width:768px) { .inside_join .join_5 .join_box .menu_box { grid-template-columns: 100%; } .inside_join .join_5 .join_box .menu_box .item .content .info .details { width: 50%; height: calc(3em * 1.5); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .inside_join .join_5 .join_box .menu_box .item .content .more a { min-width: 100px; height: 36px; } .inside_join .join_5 .join_box .menu_box .item .bg { right: 5%; } } .inside_join .join_5 .join_box .item:nth-child(2) { --color: #ff6600; } /* ---------- */ /* 鐧诲綍 */ .video_box { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 1; overflow: hidden; } .video_box video { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; } .logo_box { width: 100%; height: auto; position: fixed; left: 0; top: 0; z-index: 10; padding: 16px; pointer-events: none; } .logo_box a { filter: brightness(0) invert(1); pointer-events: initial; } .logo_box a img { width: 30%; max-width: 170px; } .fixed_bottom { width: 100%; height: 70vh; position: fixed; bottom: 0; left: 0; z-index: 2; background: linear-gradient(to right, rgba(166, 211, 252, 0.2), rgba(255, 255, 255, 0.2)); backdrop-filter: blur(20px); overflow: hidden; } .fixed_bottom #arrow { transform: translateY(-25%) scaleX(-100%); } .fixed_bottom .center_box { height: 100%; } .fixed_bottom .info { width: 100%; height: 100%; padding-top: clamp(30px, 3.125vw, 60px); padding-bottom: clamp(100px, 10.41666667vw, 200px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .fixed_bottom .info .title { font-size: 0; } .fixed_bottom .info .subtitle { margin-top: 10px; font-size: 48px; font-family: 'Rubik', 'ff100'; color: #FFF; opacity: 1; opacity: .8; text-indent: 4.3em; } @media (max-width:1680px) { .fixed_bottom .info .subtitle { font-size: 42px; } } @media (max-width:1440px) { .fixed_bottom .info .subtitle { font-size: 36px; } } @media (max-width:1280px) { .fixed_bottom .info .subtitle { font-size: 28px; } } @media (max-width:1024px) { .fixed_bottom .info .subtitle { font-size: 24px; } } @media (max-width:768px) { .fixed_bottom .info .subtitle { font-size: 22px; } } .login_box { width: 100%; height: auto; position: relative; z-index: 5; overflow: hidden; } .login_box .content { width: 100%; height: auto; min-height: 100vh; padding: 50px 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; } .login_box .login_form { width: 100%; max-width: 600px; height: 100%; overflow: hidden; } .login_box .login_form::before { content: ''; width: 100%; height: 0; margin-bottom: -1px; padding-bottom: clamp(37px, 3.85416667vw, 74px); background: #FFF; display: block; border-radius: 20px 20px 0 0; } .login_box .login_form .classify { width: 100%; height: auto; font-size: 0; } .login_box .login_form .classify svg { width: 100%; height: auto; } .login_box .login_form .layui-form { width: 100%; height: auto; margin-top: -1px; padding: 0 80px 100px; background: #FFF; border-radius: 0 0 20px 20px; overflow: hidden; } .login_box .login_form .layui-form .headline { width: 100%; height: auto; font-size: 48px; font-family: 'Rubik', 'ff200'; color: #f39800; } @media (max-width:1680px) { .login_box .login_form .layui-form .headline { font-size: 42px; } } @media (max-width:1440px) { .login_box .login_form .layui-form .headline { font-size: 36px; } } @media (max-width:1280px) { .login_box .login_form .layui-form .headline { font-size: 28px; } } @media (max-width:1024px) { .login_box .login_form .layui-form .headline { font-size: 24px; } } @media (max-width:768px) { .login_box .login_form .layui-form .headline { font-size: 22px; } } .login_box .login_form .layui-form .tabs_link { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); padding-bottom: clamp(10px, 1.04166667vw, 20px); border-bottom: 1px solid #dce5ec; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .login_box .login_form .layui-form .tabs_link .item a { line-height: 1; font-size: 18px; font-family: 'Rubik', 'ff700'; color: #2c303d; opacity: .4; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1440px) { .login_box .login_form .layui-form .tabs_link .item a { font-size: 16px; } } @media (max-width:1024px) { .login_box .login_form .layui-form .tabs_link .item a { font-size: 14px; } } @media (max-width:768px) { .login_box .login_form .layui-form .tabs_link .item a { font-size: 13px; } } .login_box .login_form .layui-form .tabs_link .item a.active { opacity: 1; } .login_box .login_form .layui-form .tabs_link .item:first-child ~ .item { margin-left: 20px; } .login_box .login_form .layui-form .tips_word { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); padding-bottom: clamp(10px, 1.04166667vw, 20px); border-bottom: 1px solid #dce5ec; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; font-size: 18px; font-family: 'Rubik', 'ff700'; color: #2c303d; } @media (max-width:1440px) { .login_box .login_form .layui-form .tips_word { font-size: 16px; } } @media (max-width:1024px) { .login_box .login_form .layui-form .tips_word { font-size: 14px; } } @media (max-width:768px) { .login_box .login_form .layui-form .tips_word { font-size: 13px; } } .login_box .login_form .layui-form .tips_word span { color: #f39800; } .login_box .login_form .layui-form .form_box { width: 100%; height: auto; margin-top: clamp(10px, 1.04166667vw, 20px); /* 宸查槄璇诲苟鍚屾剰鑻辩淮鍏 鐢ㄦ埛鍗忚 鍜 闅愮鏀跨瓥 */ /* 娉ㄥ唽鎴愬姛 */ /* 鎻愪氦 璺宠浆 */ /* 閾炬帴璺宠浆 */ } .login_box .login_form .layui-form .form_box .login_block { width: 100%; height: auto; display: grid; grid-template-columns: 100%; grid-gap: 15px; } .login_box .login_form .layui-form .form_box .login_block .item { width: 100%; height: auto; position: relative; z-index: 1; display: grid; grid-template-columns: 100%; grid-gap: 10px; /* 淇℃伅鎻愮ず */ } .login_box .login_form .layui-form .form_box .login_block .item.active { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .login_box .login_form .layui-form .form_box .login_block .item.select_active { position: relative; z-index: 5; } .login_box .login_form .layui-form .form_box .login_block .item .label_link { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .login_box .login_form .layui-form .form_box .login_block .item .label_link a { font-size: 14px; color: #2c303d; opacity: .4; } @media (max-width:1280px) { .login_box .login_form .layui-form .form_box .login_block .item .label_link a { font-size: 13px; } } @media (max-width:1024px) { .login_box .login_form .layui-form .form_box .login_block .item .label_link a { font-size: 12px; } } .login_box .login_form .layui-form .form_box .login_block .item .label_link a:first-child ~ a { margin-left: 20px; } .login_box .login_form .layui-form .form_box .login_block .item .label_link a.active { opacity: 1; } .login_box .login_form .layui-form .form_box .login_block .item .label_title { width: 100%; height: auto; min-height: 1.5em; line-height: 1.5; font-size: 14px; color: #2c303d; } @media (max-width:1280px) { .login_box .login_form .layui-form .form_box .login_block .item .label_title { font-size: 13px; } } @media (max-width:1024px) { .login_box .login_form .layui-form .form_box .login_block .item .label_title { font-size: 12px; } } .login_box .login_form .layui-form .form_box .login_block .item .input_block { width: 100%; height: auto; --border: #dce5ec; --bgcolor: #FFF; --active: #c9cacc; --opacity: 1; } .login_box .login_form .layui-form .form_box .login_block .item .input_block input::-webkit-input-placeholder { color: var(--active); opacity: var(--opacity); } .login_box .login_form .layui-form .form_box .login_block .item .input_block input:-moz-placeholder { color: var(--active); opacity: var(--opacity); } .login_box .login_form .layui-form .form_box .login_block .item .input_block input::-moz-placeholder { color: var(--active); opacity: var(--opacity); } .login_box .login_form .layui-form .form_box .login_block .item .input_block input:-ms-input-placeholder { color: var(--active); opacity: var(--opacity); } .login_box .login_form .layui-form .form_box .login_block .item .input_block.active_yes { --border: #f39800; --bgColor: #F8F8F8; } .login_box .login_form .layui-form .form_box .login_block .item .input_block.active_no { --border: #f94a1b; --bgColor: #F8F8F8; --active: #f94a1b; --opacity: .4; } .login_box .login_form .layui-form .form_box .login_block .item .input_phone { width: 100%; height: 48px; border-radius: 8px; border: 1px solid var(--border); background: var(--bgColor); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; position: relative; z-index: 1; } .login_box .login_form .layui-form .form_box .login_block .item .input_phone .word { width: auto; min-width: 80px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; font-size: 16px; color: #2c303d; } @media (max-width:1440px) { .login_box .login_form .layui-form .form_box .login_block .item .input_phone .word { font-size: 14px; } } @media (max-width:1024px) { .login_box .login_form .layui-form .form_box .login_block .item .input_phone .word { font-size: 13px; } } @media (max-width:768px) { .login_box .login_form .layui-form .form_box .login_block .item .input_phone .word { font-size: 12px; } } .login_box .login_form .layui-form .form_box .login_block .item .input_phone .line { width: 1px; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .login_box .login_form .layui-form .form_box .login_block .item .input_phone .line::after { content: ''; width: 100%; height: 50%; display: block; background: #dce5ec; } .login_box .login_form .layui-form .form_box .login_block .item .input_phone .input { flex: 1; height: 100%; overflow: hidden; } .login_box .login_form .layui-form .form_box .login_block .item .input_phone .input input { width: 100%; height: 100%; padding: 0 15px; border: 0; background: transparent; } .login_box .login_form .layui-form .form_box .login_block .item .input_phone .function_btn button { background: transparent; color: var(--active); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .login_box .login_form .layui-form .form_box .login_block .item .input_phone .function_btn button .icon { width: 16px; height: 20px; margin-right: 10px; background: var(--active); -webkit-mask: var(--url) no-repeat center / cover; -moz-mask: var(--url) no-repeat center / cover; mask: var(--url) no-repeat center / cover; } .login_box .login_form .layui-form .form_box .login_block .item .input_phone .function_btn button .word { font-size: 14px; font-family: 'Rubik', 'ff800'; color: var(--active); } @media (max-width:1280px) { .login_box .login_form .layui-form .form_box .login_block .item .input_phone .function_btn button .word { font-size: 13px; } } @media (max-width:1024px) { .login_box .login_form .layui-form .form_box .login_block .item .input_phone .function_btn button .word { font-size: 12px; } } .login_box .login_form .layui-form .form_box .login_block .item .input_box { width: 100%; height: 48px; } .login_box .login_form .layui-form .form_box .login_block .item .input_box .input { width: 100%; height: 100%; } .login_box .login_form .layui-form .form_box .login_block .item .input_box .input input { width: 100%; height: 100%; border-radius: 8px; border: 1px solid var(--border); background: var(--bgColor); } .login_box .login_form .layui-form .form_box .login_block .item .tips_txt { width: 100%; height: auto; font-size: 18px; font-family: 'Rubik', 'ff200'; color: #2c303d; line-height: 1.4; } @media (max-width:1440px) { .login_box .login_form .layui-form .form_box .login_block .item .tips_txt { font-size: 16px; } } @media (max-width:1024px) { .login_box .login_form .layui-form .form_box .login_block .item .tips_txt { font-size: 14px; } } @media (max-width:768px) { .login_box .login_form .layui-form .form_box .login_block .item .tips_txt { font-size: 13px; } } .login_box .login_form .layui-form .form_box .login_block .item .tips_txt span { color: #f39800; } .login_box .login_form .layui-form .form_box .login_block .item .first { width: auto; flex: 1; } .login_box .login_form .layui-form .form_box .login_block .item .last { width: 96px; margin-left: 20px; } .login_box .login_form .layui-form .form_box .login_block .item .first .input_block, .login_box .login_form .layui-form .form_box .login_block .item .last .input_block { margin-top: 10px; } .login_box .login_form .layui-form .form_box .login_block .item .input_block { width: 100%; height: 48px; position: relative; z-index: 1; } .login_box .login_form .layui-form .form_box .login_block .item .input_block.input_box .layui-input { width: 100%; height: 100%; border-radius: 8px; border: 1px solid #DCE5EC; padding: 0 50px 0 20px; } .login_box .login_form .layui-form .form_box .login_block .item .input_block.input_box .layui-input + .icon_pen { width: 16px; height: 16px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 0; opacity: .4; } .login_box .login_form .layui-form .form_box .login_block .item .input_block.input_box .layui-input + .layui-input-affix { margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .login_box .login_form .layui-form .form_box .login_block .item .input_block.radio_box { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; overflow: hidden; } .login_box .login_form .layui-form .form_box .login_block .item .input_block.radio_box .layui-form-radio { width: 50%; margin: 0; padding: 1px; position: relative; z-index: 1; } .login_box .login_form .layui-form .form_box .login_block .item .input_block.radio_box .layui-form-radio i { display: none; } .login_box .login_form .layui-form .form_box .login_block .item .input_block.radio_box .layui-form-radio div { width: 100%; height: 100%; margin: 0; border-radius: 6px; position: relative; z-index: 5; background: transparent; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; line-height: 1; font-size: 14px; color: rgba(0, 0, 0, 0.4); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .login_box .login_form .layui-form .form_box .login_block .item .input_block.radio_box .layui-form-radio div { font-size: 13px; } } @media (max-width:1024px) { .login_box .login_form .layui-form .form_box .login_block .item .input_block.radio_box .layui-form-radio div { font-size: 12px; } } .login_box .login_form .layui-form .form_box .login_block .item .input_block.radio_box .layui-form-radio::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background: #000; opacity: 0; filter: blur(20px); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .login_box .login_form .layui-form .form_box .login_block .item .input_block.radio_box .layui-form-radioed div { background: #FFF; color: #f39800; } .login_box .login_form .layui-form .form_box .login_block .item .input_block.radio_box .layui-form-radioed::after { opacity: .2; } .login_box .login_form .layui-form .form_box .login_block .item .input_block.select_box .layui-form-select { width: 100%; height: 100%; } .login_box .login_form .layui-form .form_box .login_block .item .input_block.select_box .layui-form-select .layui-select-title { width: 100%; height: 100%; } .login_box .login_form .layui-form .form_box .login_block .item .input_block.select_box .layui-form-select .layui-select-title .layui-input { height: 100%; padding: 0 20px; background: transparent; border: 1px solid #DCE5EC; border-radius: 8px; font-size: 14px; color: #2c303d; } @media (max-width:1280px) { .login_box .login_form .layui-form .form_box .login_block .item .input_block.select_box .layui-form-select .layui-select-title .layui-input { font-size: 13px; } } @media (max-width:1024px) { .login_box .login_form .layui-form .form_box .login_block .item .input_block.select_box .layui-form-select .layui-select-title .layui-input { font-size: 12px; } } .login_box .login_form .layui-form .form_box .login_block .item .input_block.select_box .layui-form-select .layui-select-title .layui-edge { width: 7px; height: 7px; border: 0; right: 20px; margin: -3.5px 0 0; -webkit-mask: url('../svg/icon_down2.svg') no-repeat center; background: #2c303d; transform-origin: center; } .login_box .login_form .layui-form .form_box .login_block .item .input_block.select_box .layui-form-select dl { top: calc(var(--h) + 10px); max-height: 200px; padding: 10px 0; background: #FFF; scrollbar-width: thin; scrollbar-color: #f39800 transparent; } .login_box .login_form .layui-form .form_box .login_block .item .input_block.select_box .layui-form-select dl::-webkit-scrollbar { width: 2px; height: 2px; background-color: #f5f5f5; } .login_box .login_form .layui-form .form_box .login_block .item .input_block.select_box .layui-form-select dl::-webkit-scrollbar-thumb { background-color: #f39800; border-radius: 10px; } .login_box .login_form .layui-form .form_box .login_block .item .input_block.select_box .layui-form-select dl dd { height: auto; line-height: 1.2; background: transparent; text-align: left; font-size: 14px; font-family: 'Rubik', 'ff300'; color: rgba(44, 48, 61, 0.4); padding: 10px 15px 10px 20px !important; } @media (max-width:1280px) { .login_box .login_form .layui-form .form_box .login_block .item .input_block.select_box .layui-form-select dl dd { font-size: 13px; } } @media (max-width:1024px) { .login_box .login_form .layui-form .form_box .login_block .item .input_block.select_box .layui-form-select dl dd { font-size: 12px; } } .login_box .login_form .layui-form .form_box .login_block .item .input_block.select_box .layui-form-select dl dd.layui-this { font-weight: normal; background: rgba(245, 150, 0, 0.09); color: #f39800; } .login_box .login_form .layui-form .form_box .login_block .item .input_block .layui-form-selectup dl { top: auto; bottom: calc(var(--h) + 10px); } .login_box .login_form .layui-form .form_box .login_block .item .error_block { width: 100%; height: auto; margin-top: 10px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .login_box .login_form .layui-form .form_box .login_block .item .error_block .info { width: 100%; flex: 1; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .login_box .login_form .layui-form .form_box .login_block .item .error_block .info .icon { width: 16px; height: 16px; margin-right: 10px; border-radius: 50%; background: rgba(230, 50, 2, 0.2); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; overflow: hidden; } .login_box .login_form .layui-form .form_box .login_block .item .error_block .info .icon::before, .login_box .login_form .layui-form .form_box .login_block .item .error_block .info .icon::after { content: ''; width: 2px; height: 2px; display: block; background: #f94a1b; } .login_box .login_form .layui-form .form_box .login_block .item .error_block .info .icon::before { height: 2px; } .login_box .login_form .layui-form .form_box .login_block .item .error_block .info .icon::after { height: 6px; margin-top: 1px; } .login_box .login_form .layui-form .form_box .login_block .item .error_block .info .word { font-size: 14px; color: #f94a1b; line-height: 1; } @media (max-width:1280px) { .login_box .login_form .layui-form .form_box .login_block .item .error_block .info .word { font-size: 13px; } } @media (max-width:1024px) { .login_box .login_form .layui-form .form_box .login_block .item .error_block .info .word { font-size: 12px; } } .login_box .login_form .layui-form .form_box .login_block .item .error_block .link { width: auto; height: auto; } .login_box .login_form .layui-form .form_box .login_block .item .error_block .link a { font-size: 14px; color: var(--color); position: relative; z-index: 1; --color: #f94a1b; } @media (max-width:1280px) { .login_box .login_form .layui-form .form_box .login_block .item .error_block .link a { font-size: 13px; } } @media (max-width:1024px) { .login_box .login_form .layui-form .form_box .login_block .item .error_block .link a { font-size: 12px; } } .login_box .login_form .layui-form .form_box .login_block .item .error_block .link a::after { content: ''; width: 0; height: 1px; position: absolute; bottom: 0; right: 0; z-index: 1; background: var(--color); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .login_box .login_form .layui-form .form_box .login_block .item .error_block .link a:hover::after { width: 100%; left: 0; } .login_box .login_form .layui-form .form_box .yes_box { width: 100%; height: auto; margin-top: clamp(10px, 1.04166667vw, 20px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; line-height: 1; } .login_box .login_form .layui-form .form_box .yes_box .checked-item { margin-right: 5px; } .login_box .login_form .layui-form .form_box .yes_box .checked-item .layui-form-checkbox[lay-skin=primary] { border-color: #dce5ec !important; border-radius: 5px; } .login_box .login_form .layui-form .form_box .yes_box .checked-item .layui-form-checkbox[lay-skin=primary].layui-form-checked { border-color: var(--color) !important; --color: #f39800; } .login_box .login_form .layui-form .form_box .yes_box a, .login_box .login_form .layui-form .form_box .yes_box span { font-size: 14px; font-family: 'Rubik', 'ff200'; line-height: 1; } @media (max-width:1280px) { .login_box .login_form .layui-form .form_box .yes_box a, .login_box .login_form .layui-form .form_box .yes_box span { font-size: 13px; } } @media (max-width:1024px) { .login_box .login_form .layui-form .form_box .yes_box a, .login_box .login_form .layui-form .form_box .yes_box span { font-size: 12px; } } .login_box .login_form .layui-form .form_box .yes_box span { color: #c3c4c9; } .login_box .login_form .layui-form .form_box .yes_box a { padding: 0 5px; color: #f39800; } .login_box .login_form .layui-form .form_box .yes_box a:hover { text-decoration: underline; } .login_box .login_form .layui-form .form_box .yes_tips { width: 100%; height: auto; } .login_box .login_form .layui-form .form_box .yes_tips .title { text-align: center; font-size: 24px; font-family: 'Rubik', 'ff200'; color: #2c303d; } @media (max-width:1680px) { .login_box .login_form .layui-form .form_box .yes_tips .title { font-size: 22px; } } @media (max-width:1440px) { .login_box .login_form .layui-form .form_box .yes_tips .title { font-size: 20px; } } @media (max-width:1280px) { .login_box .login_form .layui-form .form_box .yes_tips .title { font-size: 18px; } } @media (max-width:1024px) { .login_box .login_form .layui-form .form_box .yes_tips .title { font-size: 16px; } } @media (max-width:768px) { .login_box .login_form .layui-form .form_box .yes_tips .title { font-size: 15px; } } .login_box .login_form .layui-form .form_box .submit_box { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); display: grid; grid-template-columns: 100%; grid-gap: 10px; --color: rgba(245, 150, 0, 0.22); --active: #F59600; } .login_box .login_form .layui-form .form_box .submit_box * { width: 100%; height: 48px; line-height: 48px; text-align: center; border-radius: 8px; font-size: 18px; font-family: 'Rubik', 'ff700'; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } @media (max-width:1440px) { .login_box .login_form .layui-form .form_box .submit_box * { font-size: 16px; } } @media (max-width:1024px) { .login_box .login_form .layui-form .form_box .submit_box * { font-size: 14px; } } @media (max-width:768px) { .login_box .login_form .layui-form .form_box .submit_box * { font-size: 13px; } } .login_box .login_form .layui-form .form_box .submit_box button { border: 0; background: var(--color); color: var(--active); } .login_box .login_form .layui-form .form_box .submit_box button:hover { background: var(--active); color: #FFF; opacity: 1; } .login_box .login_form .layui-form .form_box .submit_box a { border: 1px solid #dce5ec; color: #2c303d; position: relative; z-index: 1; } .login_box .login_form .layui-form .form_box .submit_box a.active { background: rgba(245, 150, 0, 0.22); color: #f39800; border: 0; } .login_box .login_form .layui-form .form_box .submit_box a.active span { width: auto; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 14px; color: #f39800; } @media (max-width:1280px) { .login_box .login_form .layui-form .form_box .submit_box a.active span { font-size: 13px; } } @media (max-width:1024px) { .login_box .login_form .layui-form .form_box .submit_box a.active span { font-size: 12px; } } .login_box .login_form .layui-form .form_box .submit_box a:hover { border-color: var(--color); background: var(--color); color: #f59600; } .login_box .login_form .layui-form .form_box .submit_box a:hover span { color: #f59600; } .login_box .login_form .layui-form .form_box .link_box { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .login_box .login_form .layui-form .form_box .link_box.active { -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .login_box .login_form .layui-form .form_box .link_box span, .login_box .login_form .layui-form .form_box .link_box a { font-size: 18px; font-family: 'Rubik', 'ff300'; color: var(--color); position: relative; z-index: 1; --color: #f39800; } @media (max-width:1440px) { .login_box .login_form .layui-form .form_box .link_box span, .login_box .login_form .layui-form .form_box .link_box a { font-size: 16px; } } @media (max-width:1024px) { .login_box .login_form .layui-form .form_box .link_box span, .login_box .login_form .layui-form .form_box .link_box a { font-size: 14px; } } @media (max-width:768px) { .login_box .login_form .layui-form .form_box .link_box span, .login_box .login_form .layui-form .form_box .link_box a { font-size: 13px; } } .login_box .login_form .layui-form .form_box .link_box span { color: #bebec1; } .login_box .login_form .layui-form .form_box .link_box a span { color: #2c303d; } .login_box .login_form .layui-form .form_box .link_box a.active { --color: #2c303d; } .login_box .login_form .layui-form .form_box .link_box a::after { content: ''; width: 0; height: 1px; position: absolute; bottom: 0; right: 0; z-index: 1; background: var(--color); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .login_box .login_form .layui-form .form_box .link_box a:hover::after { width: 100%; left: 0; } @media (max-width:1440px) { .login_box .login_form { max-width: 500px; } .login_box .login_form .layui-form { padding: 0 68px 80px; } } /* 涓汉淇℃伅 */ .user_box { width: 100%; height: auto; min-height: 100vh; padding-left: 310px; position: relative; z-index: 1; background: var(--bgColor); --bgColor: #F5F5F5; overflow: hidden; } .user_box .unser_sidebar { width: 310px; height: 100%; position: fixed; left: 0; top: 0; padding-left: clamp(30px, 3.125vw, 60px); padding-right: clamp(30px, 3.125vw, 60px); padding-top: clamp(20px, 2.08333333vw, 40px); background: #2648D5; overflow: hidden; } .user_box .unser_sidebar .logo { width: 100%; height: auto; font-size: 0; } .user_box .unser_sidebar .logo a { filter: brightness(0) invert(1); } .user_box .unser_sidebar .info_box { width: 100%; height: auto; margin-top: clamp(30px, 3.125vw, 60px); } .user_box .unser_sidebar .info_box .headimg { width: 80px; height: 80px; margin: 0 auto; padding: 10px; position: relative; z-index: 1; } .user_box .unser_sidebar .info_box .headimg::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; border-radius: 50%; background: #FFF; opacity: .4; } .user_box .unser_sidebar .info_box .headimg .img { width: 100%; height: 100%; position: relative; z-index: 5; border-radius: 50%; background: #FFF; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .user_box .unser_sidebar .info_box .username { width: 100%; height: auto; margin-top: clamp(10px, 1.04166667vw, 20px); text-align: center; font-size: 24px; color: #FFF; } @media (max-width:1680px) { .user_box .unser_sidebar .info_box .username { font-size: 22px; } } @media (max-width:1440px) { .user_box .unser_sidebar .info_box .username { font-size: 20px; } } @media (max-width:1280px) { .user_box .unser_sidebar .info_box .username { font-size: 18px; } } @media (max-width:1024px) { .user_box .unser_sidebar .info_box .username { font-size: 16px; } } @media (max-width:768px) { .user_box .unser_sidebar .info_box .username { font-size: 15px; } } .user_box .unser_sidebar .info_box .number { width: 100%; height: auto; text-align: center; font-size: 14px; font-family: 'Rubik100'; letter-spacing: .1em; color: #FFF; opacity: .6; } @media (max-width:1280px) { .user_box .unser_sidebar .info_box .number { font-size: 13px; } } @media (max-width:1024px) { .user_box .unser_sidebar .info_box .number { font-size: 12px; } } .user_box .unser_sidebar .menu_box { width: 100%; height: auto; margin-top: clamp(20px, 2.08333333vw, 40px); } .user_box .unser_sidebar .menu_box .item { width: 100%; height: auto; } .user_box .unser_sidebar .menu_box .item a { width: 100%; height: 48px; padding-left: clamp(10px, 1.04166667vw, 20px); position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .user_box .unser_sidebar .menu_box .item a .icon, .user_box .unser_sidebar .menu_box .item a .word { position: relative; z-index: 5; } .user_box .unser_sidebar .menu_box .item a .icon { width: 22px; height: 22px; margin-right: 15px; background: linear-gradient(45deg, #6b88ff, #ffffff 80%); -webkit-mask: var(--url) no-repeat center / cover; } .user_box .unser_sidebar .menu_box .item a .word { font-size: 16px; font-family: 'Rubik', 'ff200'; color: #FFF; } @media (max-width:1440px) { .user_box .unser_sidebar .menu_box .item a .word { font-size: 14px; } } @media (max-width:1024px) { .user_box .unser_sidebar .menu_box .item a .word { font-size: 13px; } } @media (max-width:768px) { .user_box .unser_sidebar .menu_box .item a .word { font-size: 12px; } } .user_box .unser_sidebar .menu_box .item a::after { content: ''; width: 150%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background: #FFF; border-radius: 50px 0 0 50px; opacity: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .user_box .unser_sidebar .menu_box .item a:hover .icon { background: #FFF; } .user_box .unser_sidebar .menu_box .item a.active::after { opacity: 1; } .user_box .unser_sidebar .menu_box .item a.active .icon { background: #2648D5; } .user_box .unser_sidebar .menu_box .item a.active .word { color: #2648D5; } .user_box .unser_sidebar .menu_box .item:first-child ~ .item { margin-top: 6px; } .user_box .unser_sidebar .function_btn { width: 100%; height: 48px; background: #1443CE; position: absolute; bottom: 0; left: 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .user_box .unser_sidebar .function_btn .one { width: auto; height: auto; flex: 1; text-align: center; overflow: hidden; } .user_box .unser_sidebar .function_btn .one a { font-size: 16px; font-family: 'Rubik', 'ff200'; color: #FFF; opacity: .4; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1440px) { .user_box .unser_sidebar .function_btn .one a { font-size: 14px; } } @media (max-width:1024px) { .user_box .unser_sidebar .function_btn .one a { font-size: 13px; } } @media (max-width:768px) { .user_box .unser_sidebar .function_btn .one a { font-size: 12px; } } .user_box .unser_sidebar .function_btn .one a:hover { opacity: 1; } .user_box .unser_sidebar .function_btn .line { width: 2px; height: 16px; background: #3857D8; } .user_box .unser_sidebar #arrow { top: auto; bottom: 0; right: 142%; width: 1440px; height: 584px; transform-origin: right bottom; transform: rotate(90deg); -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); pointer-events: none; } .user_box .user_main { width: 100%; height: auto; padding: 0 10%; padding-top: clamp(30px, 3.125vw, 60px); padding-bottom: clamp(30px, 3.125vw, 60px); /* 鎴戠殑鏀惰棌 */ } .user_box .user_main .user_headline { width: 100%; height: auto; position: relative; z-index: 1; background: red; overflow: hidden; } .user_box .user_main .user_headline .info { width: 100%; height: auto; padding-left: clamp(15px, 1.5625vw, 30px); padding-right: clamp(15px, 1.5625vw, 30px); padding-top: clamp(15px, 1.5625vw, 30px); padding-bottom: clamp(15px, 1.5625vw, 30px); position: absolute; left: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .user_box .user_main .user_headline .info .icon { width: 1em; height: 1em; font-size: 42px; margin-right: clamp(10px, 1.04166667vw, 20px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } @media (max-width:1680px) { .user_box .user_main .user_headline .info .icon { font-size: 40px; } } @media (max-width:1440px) { .user_box .user_main .user_headline .info .icon { font-size: 34px; } } @media (max-width:1280px) { .user_box .user_main .user_headline .info .icon { font-size: 28px; } } @media (max-width:1024px) { .user_box .user_main .user_headline .info .icon { font-size: 24px; } } @media (max-width:768px) { .user_box .user_main .user_headline .info .icon { font-size: 22px; } } .user_box .user_main .user_headline .info .title { font-size: 42px; font-family: 'Rubik', 'ff200'; color: #FFF; line-height: 1; } @media (max-width:1680px) { .user_box .user_main .user_headline .info .title { font-size: 40px; } } @media (max-width:1440px) { .user_box .user_main .user_headline .info .title { font-size: 34px; } } @media (max-width:1280px) { .user_box .user_main .user_headline .info .title { font-size: 28px; } } @media (max-width:1024px) { .user_box .user_main .user_headline .info .title { font-size: 24px; } } @media (max-width:768px) { .user_box .user_main .user_headline .info .title { font-size: 22px; } } .user_box .user_main .user_headline .images { width: 100%; height: auto; font-size: 0; overflow: hidden; } .user_box .user_main .user_headline .images img { width: 100%; height: auto; max-height: 198px; object-fit: cover; } .user_box .user_main .user_content { width: 100%; height: auto; margin-top: clamp(35px, 3.64583333vw, 70px); } .user_box .user_main .user_content .form_step { width: 100%; max-width: 640px; height: auto; margin: 0 auto; padding-left: clamp(30px, 3.125vw, 60px); padding-right: clamp(30px, 3.125vw, 60px); } .user_box .user_main .user_content .form_step .items { width: 100%; height: auto; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .user_box .user_main .user_content .form_step .items .item { width: var(--size); height: var(--size); --size: 36px; position: relative; z-index: 5; } .user_box .user_main .user_content .form_step .items .item .number { width: 100%; height: 100%; border-radius: 50%; border: 2px solid #EAECEF; background: var(--bgColor); box-shadow: 0 0 0 10px var(--bgColor); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .user_box .user_main .user_content .form_step .items .item .number .word { font-size: 14px; font-family: 'Orbitron', 'ff800'; color: #2c303d; opacity: .4; } @media (max-width:1280px) { .user_box .user_main .user_content .form_step .items .item .number .word { font-size: 13px; } } @media (max-width:1024px) { .user_box .user_main .user_content .form_step .items .item .number .word { font-size: 12px; } } .user_box .user_main .user_content .form_step .items .item .title { width: auto; height: auto; position: absolute; z-index: 1; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 10px; text-align: center; white-space: nowrap; } .user_box .user_main .user_content .form_step .items .item.active .number { background: #EAECEF; } .user_box .user_main .user_content .form_step .items .item.active .number .word { color: #2648d5; opacity: 1; } .user_box .user_main .user_content .form_step .items .item.active .title { color: #2648d5; } .user_box .user_main .user_content .form_step .items:after { content: ''; width: 100%; height: 0; position: absolute; top: 50%; left: 0; z-index: 1; border-bottom: 2px dotted #EAECEF; } .user_box .user_main .user_content .form_step + .form_box { margin-top: clamp(50px, 5.20833333vw, 100px); } .user_box .user_main .user_content .form_box { width: 100%; max-width: 440px; height: auto; margin: 0 auto; } .user_box .user_main .user_content .form_box .label_title { width: 100%; height: auto; font-size: 14px; color: #2c303d; } @media (max-width:1280px) { .user_box .user_main .user_content .form_box .label_title { font-size: 13px; } } @media (max-width:1024px) { .user_box .user_main .user_content .form_box .label_title { font-size: 12px; } } .user_box .user_main .user_content .form_box .layui-input { background: transparent; } .user_box .user_main .user_content .form_box .item { width: 100%; height: auto; } .user_box .user_main .user_content .form_box .item.active { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .user_box .user_main .user_content .form_box .item.select_active { position: relative; z-index: 5; } .user_box .user_main .user_content .form_box .item .first { width: auto; flex: 1; } .user_box .user_main .user_content .form_box .item .last { width: 96px; margin-left: 20px; } .user_box .user_main .user_content .form_box .item .input_block { width: 100%; height: 48px; margin-top: 5px; position: relative; z-index: 1; } .user_box .user_main .user_content .form_box .item .input_block.input_box .layui-input { width: 100%; height: 100%; border-radius: 8px; border: 1px solid #DCE5EC; padding: 0 50px 0 20px; } .user_box .user_main .user_content .form_box .item .input_block.input_box .layui-input + .icon_pen { width: 16px; height: 16px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 0; opacity: .4; } .user_box .user_main .user_content .form_box .item .input_block.input_box .layui-input + .layui-input-affix { margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .user_box .user_main .user_content .form_box .item .input_block.radio_box { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; overflow: hidden; } .user_box .user_main .user_content .form_box .item .input_block.radio_box .layui-form-radio { width: 50%; margin: 0; padding: 1px; position: relative; z-index: 1; } .user_box .user_main .user_content .form_box .item .input_block.radio_box .layui-form-radio i { display: none; } .user_box .user_main .user_content .form_box .item .input_block.radio_box .layui-form-radio div { width: 100%; height: 100%; margin: 0; border-radius: 6px; position: relative; z-index: 5; background: transparent; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; line-height: 1; font-size: 14px; color: rgba(0, 0, 0, 0.4); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .user_box .user_main .user_content .form_box .item .input_block.radio_box .layui-form-radio div { font-size: 13px; } } @media (max-width:1024px) { .user_box .user_main .user_content .form_box .item .input_block.radio_box .layui-form-radio div { font-size: 12px; } } .user_box .user_main .user_content .form_box .item .input_block.radio_box .layui-form-radio::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background: #000; opacity: 0; filter: blur(20px); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .user_box .user_main .user_content .form_box .item .input_block.radio_box .layui-form-radioed div { background: #FFF; color: #f39800; } .user_box .user_main .user_content .form_box .item .input_block.radio_box .layui-form-radioed::after { opacity: .2; } .user_box .user_main .user_content .form_box .item .input_block.select_box .layui-form-select { width: 100%; height: 100%; } .user_box .user_main .user_content .form_box .item .input_block.select_box .layui-form-select .layui-select-title { width: 100%; height: 100%; } .user_box .user_main .user_content .form_box .item .input_block.select_box .layui-form-select .layui-select-title .layui-input { height: 100%; padding: 0 20px; background: transparent; border: 1px solid #DCE5EC; border-radius: 8px; font-size: 14px; color: #2c303d; } @media (max-width:1280px) { .user_box .user_main .user_content .form_box .item .input_block.select_box .layui-form-select .layui-select-title .layui-input { font-size: 13px; } } @media (max-width:1024px) { .user_box .user_main .user_content .form_box .item .input_block.select_box .layui-form-select .layui-select-title .layui-input { font-size: 12px; } } .user_box .user_main .user_content .form_box .item .input_block.select_box .layui-form-select .layui-select-title .layui-edge { width: 7px; height: 7px; border: 0; right: 20px; margin: -3.5px 0 0; -webkit-mask: url('../svg/icon_down2.svg') no-repeat center; background: #2c303d; transform-origin: center; } .user_box .user_main .user_content .form_box .item .input_block.select_box .layui-form-select dl { top: calc(var(--h) + 10px); max-height: 200px; padding: 10px 0; background: #FFF; scrollbar-width: thin; scrollbar-color: #f39800 transparent; } .user_box .user_main .user_content .form_box .item .input_block.select_box .layui-form-select dl::-webkit-scrollbar { width: 2px; height: 2px; background-color: #f5f5f5; } .user_box .user_main .user_content .form_box .item .input_block.select_box .layui-form-select dl::-webkit-scrollbar-thumb { background-color: #f39800; border-radius: 10px; } .user_box .user_main .user_content .form_box .item .input_block.select_box .layui-form-select dl dd { height: auto; line-height: 1.2; background: transparent; text-align: left; font-size: 14px; font-family: 'Rubik', 'ff300'; color: rgba(44, 48, 61, 0.4); padding: 10px 15px 10px 20px !important; } @media (max-width:1280px) { .user_box .user_main .user_content .form_box .item .input_block.select_box .layui-form-select dl dd { font-size: 13px; } } @media (max-width:1024px) { .user_box .user_main .user_content .form_box .item .input_block.select_box .layui-form-select dl dd { font-size: 12px; } } .user_box .user_main .user_content .form_box .item .input_block.select_box .layui-form-select dl dd.layui-this { font-weight: normal; background: rgba(245, 150, 0, 0.09); color: #f39800; } .user_box .user_main .user_content .form_box .item .input_block .layui-form-selectup dl { top: auto; bottom: calc(var(--h) + 10px); } .user_box .user_main .user_content .form_box .item .error_block { width: 100%; height: auto; margin-top: 10px; } .user_box .user_main .user_content .form_box .item .error_block .info { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .user_box .user_main .user_content .form_box .item .error_block .info .icon { width: 16px; height: 16px; margin-right: 10px; border-radius: 50%; background: rgba(230, 50, 2, 0.2); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; overflow: hidden; } .user_box .user_main .user_content .form_box .item .error_block .info .icon::before, .user_box .user_main .user_content .form_box .item .error_block .info .icon::after { content: ''; width: 2px; height: 2px; display: block; background: #f94a1b; } .user_box .user_main .user_content .form_box .item .error_block .info .icon::before { height: 2px; } .user_box .user_main .user_content .form_box .item .error_block .info .icon::after { height: 6px; margin-top: 1px; } .user_box .user_main .user_content .form_box .item .error_block .info .word { font-size: 14px; color: #f94a1b; line-height: 1; } @media (max-width:1280px) { .user_box .user_main .user_content .form_box .item .error_block .info .word { font-size: 13px; } } @media (max-width:1024px) { .user_box .user_main .user_content .form_box .item .error_block .info .word { font-size: 12px; } } .user_box .user_main .user_content .form_box .item:first-child ~ .item { margin-top: 20px; } .user_box .user_main .user_content .form_box .item_phone { width: 100%; height: auto; margin-top: 20px; } .user_box .user_main .user_content .form_box .item_phone .layui-input { border: 0; background: transparent; border-radius: 0; } .user_box .user_main .user_content .form_box .item_phone input::-webkit-input-placeholder { color: #2c303d; opacity: .3; } .user_box .user_main .user_content .form_box .item_phone input:-moz-placeholder { color: #2c303d; opacity: .3; } .user_box .user_main .user_content .form_box .item_phone input::-moz-placeholder { color: #2c303d; opacity: .3; } .user_box .user_main .user_content .form_box .item_phone input:-ms-input-placeholder { color: #2c303d; opacity: .3; } .user_box .user_main .user_content .form_box .item_phone .layui_label { width: 100%; height: auto; font-size: 14px; color: #2c303d; } @media (max-width:1280px) { .user_box .user_main .user_content .form_box .item_phone .layui_label { font-size: 13px; } } @media (max-width:1024px) { .user_box .user_main .user_content .form_box .item_phone .layui_label { font-size: 12px; } } .user_box .user_main .user_content .form_box .item_phone .layui_label + * { margin-top: 10px; } .user_box .user_main .user_content .form_box .item_phone .layui_input { width: 100%; height: 48px; margin-top: 5px; border-radius: 8px; border: 1px solid #dce5ec; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: relative; z-index: 1; } .user_box .user_main .user_content .form_box .item_phone .layui_input .word { width: auto; height: auto; padding: 0 15px; } .user_box .user_main .user_content .form_box .item_phone .layui_input .line { width: 1px; height: 16px; background: #dce5ec; } .user_box .user_main .user_content .form_box .item_phone .layui_input .input_box { flex: 1; height: 100%; overflow: hidden; } .user_box .user_main .user_content .form_box .item_phone .layui_input .input_box .layui-input { width: 100%; height: 100%; border-radius: 0; border: 0; padding: 0 50px 0 15px; } .user_box .user_main .user_content .form_box .item_phone .layui_input .input_box .layui-input + .icon_pen { width: 16px; height: 16px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 0; opacity: .4; } .user_box .user_main .user_content .form_box .item_phone .layui_input .function_btn button { background: transparent; color: #c9cacc; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .user_box .user_main .user_content .form_box .item_phone .layui_input .function_btn button img { margin-right: 10px; } .user_box .user_main .user_content .form_box .item_more { width: 100%; height: 48px; margin-top: clamp(20px, 2.08333333vw, 40px); overflow: hidden; } .user_box .user_main .user_content .form_box .item_more button { width: 100%; height: 48px; line-height: 48px; text-align: center; border-radius: 8px; font-size: 18px; font-family: 'Rubik', 'ff700'; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; border: 0; background: rgba(245, 150, 0, 0.2); color: #f39800; } @media (max-width:1440px) { .user_box .user_main .user_content .form_box .item_more button { font-size: 16px; } } @media (max-width:1024px) { .user_box .user_main .user_content .form_box .item_more button { font-size: 14px; } } @media (max-width:768px) { .user_box .user_main .user_content .form_box .item_more button { font-size: 13px; } } .user_box .user_main .user_content .form_box .item_more button:hover { background: #f39800; color: #FFF; opacity: 1; } .user_box .user_main .user_content_active { width: 100%; height: auto; } .user_box .user_main .user_content_active .subnav_box { width: 100%; height: 60px; position: relative; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } .user_box .user_main .user_content_active .subnav_box::after { content: ''; width: 100%; height: 2px; position: absolute; bottom: 0; left: 0; z-index: 1; background: #eaecef; } .user_box .user_main .user_content_active .subnav_box .item { width: auto; height: 100%; position: relative; z-index: 5; } .user_box .user_main .user_content_active .subnav_box .item a { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; position: relative; z-index: 1; font-size: 16px; color: #2c303d; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1440px) { .user_box .user_main .user_content_active .subnav_box .item a { font-size: 14px; } } @media (max-width:1024px) { .user_box .user_main .user_content_active .subnav_box .item a { font-size: 13px; } } @media (max-width:768px) { .user_box .user_main .user_content_active .subnav_box .item a { font-size: 12px; } } .user_box .user_main .user_content_active .subnav_box .item a::after { content: ''; width: 0; height: 2px; position: absolute; bottom: 0; left: 50%; z-index: 1; transform: translateX(-50%); background: #2648d5; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .user_box .user_main .user_content_active .subnav_box .item a.active { color: #2648d5; } .user_box .user_main .user_content_active .subnav_box .item a.active::after { width: 100%; } .user_box .user_main .user_content_active .subnav_box .item a:hover { color: #2648d5; } .user_box .user_main .user_content_active .subnav_box .item:first-child ~ .item { margin-left: 40px; } .user_box .user_main .user_content_active .user_collect { width: 100%; height: auto; padding-top: clamp(15px, 1.5625vw, 30px); padding-bottom: clamp(50px, 5.20833333vw, 100px); overflow: hidden; /* 璇环娓呭崟 */ /* 鎺ㄨ崘浜у搧 */ /* 涓嬭浇鍘嗗彶 */ } .user_box .user_main .user_content_active .user_collect .collect_title { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .user_box .user_main .user_content_active .user_collect .collect_title .details_headline .title { color: #2c303d; } .user_box .user_main .user_content_active .user_collect .collect_1 { width: 100%; height: auto; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_title .collect_subnav { width: auto; height: 40px; padding: 2px; border-radius: 50px; background: #e9eef2; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_title .collect_subnav .one { width: auto; height: 100%; border-radius: 50px; overflow: hidden; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_title .collect_subnav .one a { width: 100%; height: 100%; padding: 0 15px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; white-space: nowrap; font-size: 14px; font-family: 'Rubik', 'ff800'; color: #2c303d; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .user_box .user_main .user_content_active .user_collect .collect_1 .collect_title .collect_subnav .one a { font-size: 13px; } } @media (max-width:1024px) { .user_box .user_main .user_content_active .user_collect .collect_1 .collect_title .collect_subnav .one a { font-size: 12px; } } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_title .collect_subnav .one a.active { background: #f39800; color: #FFF; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_title .collect_subnav .one a:hover { color: #f39800; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_title .collect_subnav .one:first-child ~ .one { margin-left: 20px; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu { width: auto; flex: 1; height: auto; margin-right: 20px; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_head { width: 100%; height: auto; padding-right: 20px; background: #ebeef0; border-top: 2px solid #0867d1; display: grid; grid-template-columns: 16px 1fr 140px 140px 16px; grid-gap: 30px; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_head .one { width: 100%; height: auto; padding-top: clamp(7.5px, 0.78125vw, 15px); padding-bottom: clamp(7.5px, 0.78125vw, 15px); } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_head .one.active { text-align: center; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body { width: 100%; height: auto; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item { width: 100%; height: auto; padding-top: clamp(10px, 1.04166667vw, 20px); padding-bottom: clamp(10px, 1.04166667vw, 20px); padding-right: 20px; border-bottom: 1px solid #e9eef2; display: grid; grid-template-columns: 16px 1fr 140px 140px 16px; grid-gap: 30px; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .one { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .checked-item .layui-form-checkbox[lay-skin=primary].layui-form-checked { --color: #f39800; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .pro_box { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .pro_box .img { width: 30%; max-width: 80px; -webkit-aspect-ratio: 1; aspect-ratio: 1; text-align: center; background: #eaecef; overflow: hidden; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .pro_box .info { width: auto; height: auto; flex: 1; padding-left: 10px; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .pro_box .info .title { font-size: 18px; font-family: 'Rubik', 'ff800'; color: #2c303d; } @media (max-width:1440px) { .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .pro_box .info .title { font-size: 16px; } } @media (max-width:1024px) { .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .pro_box .info .title { font-size: 14px; } } @media (max-width:768px) { .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .pro_box .info .title { font-size: 13px; } } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .pro_box .info .details { font-size: 14px; color: #2c303d; opacity: .6; } @media (max-width:1280px) { .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .pro_box .info .details { font-size: 13px; } } @media (max-width:1024px) { .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .pro_box .info .details { font-size: 12px; } } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .number_box { width: 100%; height: auto; --size: 40px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .number_box .remove, .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .number_box .add { width: var(--size); height: var(--size); position: relative; z-index: 1; background: #e9eef2; cursor: pointer; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .number_box .number { width: auto; height: var(--size); line-height: var(--size); flex: 1; background: #f1f1f3; font-size: 16px; color: #2c303d; text-align: center; } @media (max-width:1440px) { .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .number_box .number { font-size: 14px; } } @media (max-width:1024px) { .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .number_box .number { font-size: 13px; } } @media (max-width:768px) { .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .number_box .number { font-size: 12px; } } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .number_box .remove::after { content: ''; width: 35%; height: 2px; position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); background: #2c303d; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .number_box .remove:hover { background: #f39800; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .number_box .remove:hover::after { background: #FFF; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .number_box .add { background: #f39800; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .number_box .add::before, .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .number_box .add::after { content: ''; width: 35%; height: 35%; position: absolute; top: 50%; left: 50%; z-index: 1; transform: translate(-50%, -50%); background: #FFF; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .number_box .add::before { width: 2px; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .number_box .add::after { height: 2px; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .number_box .add:hover { background: #0867d1; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .price { width: 100%; height: auto; text-align: center; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .icon_delete { width: 16px; height: 20px; background: #c9cacc; -webkit-mask: url('../svg/icon_remove.svg') no-repeat center; -moz-mask: url('../svg/icon_remove.svg') no-repeat center; mask: url('../svg/icon_remove.svg') no-repeat center; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_menu .collect_body .item .icon_delete:hover { background: #f39800; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info { width: 22.22%; height: auto; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .first_box { width: 100%; height: auto; position: relative; z-index: 1; overflow: hidden; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .first_box .info_box { width: 100%; height: 100%; position: absolute; left: 0; padding: clamp(15px, 1.5625vw, 30px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; overflow: hidden; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .first_box .info_box .info { width: 100%; height: auto; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .first_box .info_box .info .title { font-size: 24px; color: #FFF; line-height: 1; } @media (max-width:1680px) { .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .first_box .info_box .info .title { font-size: 22px; } } @media (max-width:1440px) { .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .first_box .info_box .info .title { font-size: 20px; } } @media (max-width:1280px) { .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .first_box .info_box .info .title { font-size: 18px; } } @media (max-width:1024px) { .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .first_box .info_box .info .title { font-size: 16px; } } @media (max-width:768px) { .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .first_box .info_box .info .title { font-size: 15px; } } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .first_box .info_box .info .icon { width: 100%; height: auto; margin-top: 15px; font-size: 0; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .first_box .info_box .more { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .first_box .info_box .more a { width: auto; height: 36px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding: 0 25px; font-size: 14px; font-family: 'Rubik', 'ff800'; color: #2c303d; background: #FFF; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .first_box .info_box .more a { font-size: 13px; } } @media (max-width:1024px) { .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .first_box .info_box .more a { font-size: 12px; } } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .first_box .info_box .more a:hover { background: #0867d1; color: #FFF; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .first_box .images { width: 100%; height: auto; font-size: 0; overflow: hidden; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box { width: 100%; height: auto; background: #FFF; overflow: hidden; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .items { width: 100%; height: auto; padding: clamp(15px, 1.5625vw, 30px); } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .items .item { width: 100%; height: auto; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .items .item .icon { width: 18px; height: 18px; background: #c9cacc; -webkit-mask-repeat: no-repeat; -moz-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; -moz-mask-position: center; mask-position: center; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .items .item .title, .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .items .item .number { font-size: 16px; font-family: 'Rubik', 'ff200'; color: #2c303d; } @media (max-width:1440px) { .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .items .item .title, .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .items .item .number { font-size: 14px; } } @media (max-width:1024px) { .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .items .item .title, .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .items .item .number { font-size: 13px; } } @media (max-width:768px) { .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .items .item .title, .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .items .item .number { font-size: 12px; } } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .items .item .number { color: #f39800; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .items .contrast { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; grid-gap: 8px; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .items .contrast .icon { width: 18px; height: 18px; -webkit-mask-image: url('../svg/icon_set.svg'); -moz-mask-image: url('../svg/icon_set.svg'); mask-image: url('../svg/icon_set.svg'); } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .items .remove { margin-top: 10px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .items .remove a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; grid-gap: 8px; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .items .remove a .icon { height: 20px; -webkit-mask-image: url('../svg/icon_remove.svg'); -moz-mask-image: url('../svg/icon_remove.svg'); mask-image: url('../svg/icon_remove.svg'); } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .items .remove a .icon, .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .items .remove a .title { -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .items .remove a:hover .icon { background: #f39800; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .items .remove a:hover .title { color: #f39800; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .more { width: 100%; height: auto; overflow: hidden; } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .more a { width: 100%; height: 48px; line-height: 48px; display: block; text-align: center; background: #f39800; font-size: 18px; font-family: 'Rubik', 'ff800'; color: #FFF; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1440px) { .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .more a { font-size: 16px; } } @media (max-width:1024px) { .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .more a { font-size: 14px; } } @media (max-width:768px) { .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .more a { font-size: 13px; } } .user_box .user_main .user_content_active .user_collect .collect_1 .collect_box .collect_info .last_box .more a:hover { background: #0867d1; } .user_box .user_main .user_content_active .user_collect .collect_2 { width: 100%; height: auto; margin-top: clamp(45px, 4.6875vw, 90px); } .user_box .user_main .user_content_active .user_collect .collect_2 .collect_box { width: 100%; height: auto; margin-top: clamp(20px, 2.08333333vw, 40px); } .user_box .user_main .user_content_active .user_collect .collect_2 .collect_box .swiper_box { width: 100%; height: auto; } .user_box .user_main .user_content_active .user_collect .collect_2 .collect_box .swiper_box .swiper-slide { width: 30%; } .user_box .user_main .user_content_active .user_collect .collect_2 .collect_box .swiper_box .swiper-slide a { width: 100%; height: auto; position: relative; z-index: 1; padding: clamp(15px, 1.5625vw, 30px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .user_box .user_main .user_content_active .user_collect .collect_2 .collect_box .swiper_box .swiper-slide a .info { width: auto; height: auto; flex: 1; position: relative; z-index: 5; margin-right: 30px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; } .user_box .user_main .user_content_active .user_collect .collect_2 .collect_box .swiper_box .swiper-slide a .info .title { font-size: 24px; color: #f39800; line-height: 1.2; } @media (max-width:1680px) { .user_box .user_main .user_content_active .user_collect .collect_2 .collect_box .swiper_box .swiper-slide a .info .title { font-size: 22px; } } @media (max-width:1440px) { .user_box .user_main .user_content_active .user_collect .collect_2 .collect_box .swiper_box .swiper-slide a .info .title { font-size: 20px; } } @media (max-width:1280px) { .user_box .user_main .user_content_active .user_collect .collect_2 .collect_box .swiper_box .swiper-slide a .info .title { font-size: 18px; } } @media (max-width:1024px) { .user_box .user_main .user_content_active .user_collect .collect_2 .collect_box .swiper_box .swiper-slide a .info .title { font-size: 16px; } } @media (max-width:768px) { .user_box .user_main .user_content_active .user_collect .collect_2 .collect_box .swiper_box .swiper-slide a .info .title { font-size: 15px; } } .user_box .user_main .user_content_active .user_collect .collect_2 .collect_box .swiper_box .swiper-slide a .info .more { width: 100%; height: auto; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .user_box .user_main .user_content_active .user_collect .collect_2 .collect_box .swiper_box .swiper-slide a .info .more .icon { width: 16px; height: 13px; background: #f39800; -webkit-mask: url('../svg/icon_down3.svg') no-repeat center / cover; -moz-mask: url('../svg/icon_down3.svg') no-repeat center / cover; mask: url('../svg/icon_down3.svg') no-repeat center / cover; } .user_box .user_main .user_content_active .user_collect .collect_2 .collect_box .swiper_box .swiper-slide a .info .more .word { margin-left: 10px; font-size: 14px; color: #f39800; } @media (max-width:1280px) { .user_box .user_main .user_content_active .user_collect .collect_2 .collect_box .swiper_box .swiper-slide a .info .more .word { font-size: 13px; } } @media (max-width:1024px) { .user_box .user_main .user_content_active .user_collect .collect_2 .collect_box .swiper_box .swiper-slide a .info .more .word { font-size: 12px; } } .user_box .user_main .user_content_active .user_collect .collect_2 .collect_box .swiper_box .swiper-slide a .img { width: 41.176470588235294117647058823529%; height: auto; position: relative; z-index: 5; font-size: 0; overflow: hidden; } .user_box .user_main .user_content_active .user_collect .collect_2 .collect_box .swiper_box .swiper-slide a .img .pb { padding-bottom: 171.42857142857142857142857142857%; } .user_box .user_main .user_content_active .user_collect .collect_2 .collect_box .swiper_box .swiper-slide a .img img { width: 100%; height: 100%; object-fit: cover; } .user_box .user_main .user_content_active .user_collect .collect_2 .collect_box .swiper_box .swiper-slide a::before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; background: #FFF; } .user_box .user_main .user_content_active .user_collect .collect_2 .collect_box .swiper_box .swiper-slide a::after { content: ''; width: 80%; height: 80%; position: absolute; bottom: 0; left: 10%; z-index: 1; background: #2c303d; filter: blur(20px); opacity: 0; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .user_box .user_main .user_content_active .user_collect .collect_2 .collect_box .swiper_box .swiper-slide a:hover::after { opacity: .1; } .user_box .user_main .user_content_active .user_collect .collect_3 { width: 100%; height: auto; margin-top: clamp(60px, 6.25vw, 120px); } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_tabs { width: 100%; height: auto; margin-top: clamp(20px, 2.08333333vw, 40px); display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: relative; z-index: 1; } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_tabs::after { content: ''; width: 100%; height: 2px; position: absolute; bottom: 0; left: 0; z-index: 1; background: #eaecef; } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_tabs .item { width: auto; height: auto; position: relative; z-index: 2; } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_tabs .item a { width: auto; height: auto; position: relative; z-index: 1; padding-bottom: 20px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_tabs .item a .word { font-size: 14px; font-family: 'Rubik', 'ff700'; color: #2c303d; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .user_box .user_main .user_content_active .user_collect .collect_3 .collect_tabs .item a .word { font-size: 13px; } } @media (max-width:1024px) { .user_box .user_main .user_content_active .user_collect .collect_3 .collect_tabs .item a .word { font-size: 12px; } } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_tabs .item a .number { width: 24px; height: 24px; margin-left: 8px; border-radius: 50%; background: #eaecef; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; font-size: 14px; color: #2c303d; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } @media (max-width:1280px) { .user_box .user_main .user_content_active .user_collect .collect_3 .collect_tabs .item a .number { font-size: 13px; } } @media (max-width:1024px) { .user_box .user_main .user_content_active .user_collect .collect_3 .collect_tabs .item a .number { font-size: 12px; } } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_tabs .item a::after { content: ''; width: 0; height: 2px; position: absolute; bottom: 0; left: 50%; z-index: 1; background: #f39800; transform: translateX(-50%); -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_tabs .item a.active .word, .user_box .user_main .user_content_active .user_collect .collect_3 .collect_tabs .item a:hover .word { color: #f39800; } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_tabs .item a.active .number, .user_box .user_main .user_content_active .user_collect .collect_3 .collect_tabs .item a:hover .number { background: #f39800; color: #FFF; } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_tabs .item a.active::after, .user_box .user_main .user_content_active .user_collect .collect_3 .collect_tabs .item a:hover::after { width: 100%; } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_tabs .item:first-child ~ .item { margin-left: 30px; } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_screen { width: 100%; height: auto; margin-top: 18px; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_screen .word { font-size: 16px; color: #2c303d; } @media (max-width:1440px) { .user_box .user_main .user_content_active .user_collect .collect_3 .collect_screen .word { font-size: 14px; } } @media (max-width:1024px) { .user_box .user_main .user_content_active .user_collect .collect_3 .collect_screen .word { font-size: 13px; } } @media (max-width:768px) { .user_box .user_main .user_content_active .user_collect .collect_3 .collect_screen .word { font-size: 12px; } } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_screen .select_box { width: 240px; height: 40px; margin-left: 20px; } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_screen .select_box .layui-form-select { width: 100%; height: 100%; } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_screen .select_box .layui-select-title { width: 100%; height: 100%; } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_screen .select_box .layui-select-title .layui-input { height: 100%; padding: 0 20px; background: transparent; border: 2px solid #DCE5EC; border-radius: 0; font-size: 14px; color: #2c303d; } @media (max-width:1280px) { .user_box .user_main .user_content_active .user_collect .collect_3 .collect_screen .select_box .layui-select-title .layui-input { font-size: 13px; } } @media (max-width:1024px) { .user_box .user_main .user_content_active .user_collect .collect_3 .collect_screen .select_box .layui-select-title .layui-input { font-size: 12px; } } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_screen .select_box .layui-select-title .layui-edge { width: 7px; height: 7px; border: 0; right: 20px; margin: -3.5px 0 0; -webkit-mask: url('../svg/icon_down2.svg') no-repeat center; background: #2c303d; transform-origin: center; } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_screen .select_box dl { top: calc(var(--h) + 10px); max-height: 200px; padding: 10px 0; background: #FFF; scrollbar-width: thin; scrollbar-color: #f39800 transparent; } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_screen .select_box dl::-webkit-scrollbar { width: 2px; height: 2px; background-color: #f5f5f5; } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_screen .select_box dl::-webkit-scrollbar-thumb { background-color: #f39800; border-radius: 10px; } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_screen .select_box dl dd { height: auto; line-height: 1.2; background: transparent; text-align: left; font-size: 14px; font-family: 'Rubik', 'ff300'; color: rgba(44, 48, 61, 0.4); padding: 10px 15px 10px 20px !important; } @media (max-width:1280px) { .user_box .user_main .user_content_active .user_collect .collect_3 .collect_screen .select_box dl dd { font-size: 13px; } } @media (max-width:1024px) { .user_box .user_main .user_content_active .user_collect .collect_3 .collect_screen .select_box dl dd { font-size: 12px; } } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_screen .select_box dl dd.layui-this { font-weight: normal; background: rgba(245, 150, 0, 0.09); color: #f39800; } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_menu { width: 100%; height: auto; margin-top: clamp(15px, 1.5625vw, 30px); } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_menu .collect_head { width: 100%; height: auto; padding: 0 20px; background: #ebeef0; border-top: 2px solid #2648d5; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 30px; } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_menu .collect_head .one { width: 100%; height: auto; padding-top: clamp(7.5px, 0.78125vw, 15px); padding-bottom: clamp(7.5px, 0.78125vw, 15px); font-size: 14px; color: #2c303d; } @media (max-width:1280px) { .user_box .user_main .user_content_active .user_collect .collect_3 .collect_menu .collect_head .one { font-size: 13px; } } @media (max-width:1024px) { .user_box .user_main .user_content_active .user_collect .collect_3 .collect_menu .collect_head .one { font-size: 12px; } } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_menu .collect_body { width: 100%; height: auto; } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_menu .collect_body .item { width: 100%; height: auto; padding: 0 20px; border-bottom: 1px solid #eaecef; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 30px; } .user_box .user_main .user_content_active .user_collect .collect_3 .collect_menu .collect_body .item .one { width: 100%; height: auto; padding-top: clamp(7.5px, 0.78125vw, 15px); padding-bottom: clamp(7.5px, 0.78125vw, 15px); font-size: 14px; color: #2c303d; } @media (max-width:1280px) { .user_box .user_main .user_content_active .user_collect .collect_3 .collect_menu .collect_body .item .one { font-size: 13px; } } @media (max-width:1024px) { .user_box .user_main .user_content_active .user_collect .collect_3 .collect_menu .collect_body .item .one { font-size: 12px; } } @media (max-width:1440px) { .user_box .user_main { padding: 20px 20px 40px; } } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .shouqi { text-align: center; font-size: 14px; color: #2c303d; margin-bottom: 10px; cursor: pointer; } header .header_box .header_main .info_l .nav_box .nav > ul > li .subnav_box .shouqi em { width: clamp(0.375rem, calc(-0.24rem + 0.77vw), 0.625rem); height: clamp(0.375rem, calc(-0.24rem + 0.77vw), 0.625rem); background: url(../images/nav_down.png) no-repeat center / 100% auto; margin-left: 10px; display: inline-block; -webkit-transform: rotate(-180deg); transform: rotate(-180deg); } .inside_news .news_list { margin-top: clamp(calc(60 / 2 * 1px), calc(60 / 1920 * 100 * 1vw), 60px); } .inside_news .news_list .item:first-child .item-box { border-top: 2px solid #e5e5e5; } .inside_news .news_list .item .item-box { display: block; height: 100%; position: relative; overflow: hidden; padding: 40px 0; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; padding-top: clamp(calc(40 / 2 * 1px), calc(40 / 1920 * 100 * 1vw), 40px); padding-bottom: clamp(calc(40 / 2 * 1px), calc(40 / 1920 * 100 * 1vw), 40px); border-bottom: 1px solid #e5e5e5; } .inside_news .news_list .item .item-box .more { width: 60px; height: 100%; position: absolute; top: 0; right: 0; } .inside_news .news_list .item .item-box .more::before { content: ''; width: 16px; height: 11px; background: #534444; position: absolute; top: 50%; left: 50%; -webkit-transition: all 0.55s ease; -o-transition: all 0.55s ease; transition: all 0.55s ease; -webkit-mask: url(../svg/icon_arrow3.svg) no-repeat center / cover; -moz-mask: url(../svg/icon_arrow3.svg) no-repeat center / cover; mask: url(../svg/icon_arrow3.svg) no-repeat center / cover; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } .inside_news .news_list .item .item-box .date { min-width: 10%; font-family: 'Montserrat', 'ff400'; color: #2c303d; font-size: 16px; line-height: 1; text-align: center; border-right: 1px solid #e5e5e5; margin-right: clamp(calc(50 / 2 * 1px), calc(50 / 1920 * 100 * 1vw), 50px); padding-top: clamp(calc(6 / 2 * 1px), calc(6 / 1920 * 100 * 1vw), 6px); } .inside_news .news_list .item .item-box .date em { font-family: 'Montserrat', 'ff400'; font-size: 36px; display: block; font-style: normal; margin-bottom: 8px; } .inside_news .news_list .item .item-box .text-box { -webkit-box-flex: 1; -ms-flex: 1; -webkit-flex: 1; flex: 1; padding-right: 80px; } .inside_news .news_list .item .item-box .text-box .types { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; grid-gap: clamp(0px, 0vw, 0px) clamp(8.5px, 0.88541667vw, 17px); margin-bottom: clamp(calc(14 / 2 * 1px), calc(14 / 1920 * 100 * 1vw), 14px); } .inside_news .news_list .item .item-box .text-box .types .types-t { line-height: 1.25; font-size: var(--font14); color: #00b2b3; } .inside_news .news_list .item .item-box .text-box .title { font-size: 18px; color: #282828; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .inside_news .news_list .item .item-box .text-box .text-body { font-size: 14px; color: #2c303d; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; margin-top: 10px; } .inside_news .news_list .item:hover .item-box .text-box .title { color: #f39800; } @media (max-width:1280px) { .inside_news .news_list .item .item-box .date { font-size: 12px; min-width: 70px; } .inside_news .news_list .item .item-box .date em { font-size: 30px; margin-bottom: 4px; } .inside_news .news_list .item .item-box .text-box .title { font-size: 14px; } } @media (max-width: 768px) { .inside_news .news_list .item .item-box .date { margin-right: 14px; } } .add_productsss { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 1001; overflow: hidden; display: none } .add_productsss::after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; background: #000; opacity: .8 } .add_productsss .add_box { width: 100%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; overflow: hidden } .add_productsss .add_box .add_main { width: 100%; max-width: 800px; height: auto; position: relative; z-index: 2; background: #fff } .add_productsss .add_box .add_head { width: 100%; height: auto; padding: 2vw 2vw 20px; border-bottom: 1px solid #f3f5f6; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; overflow: hidden } .add_productsss .add_box .add_head .title { font-size: 30px } @media (max-width:1680px) { .add_productsss .add_box .add_head .title { font-size: 26.25px } } @media (max-width:1440px) { .add_productsss .add_box .add_head .title { font-size: 22.5px } } @media (max-width:1280px) { .add_productsss .add_box .add_head .title { font-size: 20px } } @media (max-width:1024px) { .add_productsss .add_box .add_head .title { font-size: 16px } } .add_productsss .add_box .add_head .close { color: #818585; cursor: pointer; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s } .add_productsss .add_box .add_head .close i { font-size: 14px } .add_productsss .add_box .add_head .close:hover { color: #2b37d8 } .add_productsss .add_box .add_form { width: 100%; height: auto; margin: 30px 0 0; padding: 0 2vw } .add_productsss .add_box .add_form .items { width: 100%; height: auto } .add_productsss .add_box .add_form .items .item { width: calc((100% - 40px) / 3); height: 60px; float: left; margin-right: 20px; margin-bottom: 20px; } .add_productsss .add_box .add_form .items .item .layui-form-select { width: 100%; height: 100% } .add_productsss .add_box .add_form .items .item .layui-form-select .layui-select-title { width: 100%; height: 100% } .add_productsss .add_box .add_form .items .item .layui-form-select .layui-input { width: 100%; height: 100%; padding-left: 20px; border: 0; background: #f3f5f6; border-radius: 3px; font-size: 14px; font-family: syht_l; color: #2f3133 } .add_productsss .add_box .add_form .items .item .layui-form-select .layui-disabled { color: #2f3133 !important } .add_productsss .add_box .add_form .items .item .layui-form-select .layui-anim-upbit { top: 100% } .add_productsss .add_box .add_form .items .item .layui-form-select .layui-anim-upbit dd { font-family: syht_l; font-size: 14px; color: #999 } .add_productsss .add_box .add_form .items .item .layui-form-select .layui-anim-upbit .layui-this { background: #2b37d8; color: #fff } .add_productsss .add_box .add_form .items .item .layui-form-selectup .layui-anim-upbit { top: auto; bottom: 100% } /*.add_productsss .add_box .add_form .items .item:first-child~.item {*/ /* margin-left: 20px*/ /*}*/ .add_productsss .add_box .add_list { width: 100%; height: auto; max-height: calc(90px * 3 + 20px * 2); /*margin: 30px 0 40px;*/ margin: 0 0 40px; overflow: hidden; overflow-y: auto } .add_productsss .add_box .add_list ul { padding: 0 2vw; overflow: hidden } .add_productsss .add_box .add_list ul li { width: calc(50% - 10px); height: 90px; float: left; padding: 14px; background: #f3f5f6; border: 1px solid #f3f5f6; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: relative; z-index: 1; cursor: pointer; overflow: hidden } .add_productsss .add_box .add_list ul li .img { width: 60px; height: auto; text-align: center; overflow: hidden } .add_productsss .add_box .add_list ul li .img .pb { padding-bottom: 100%; position: relative; z-index: 1 } .add_productsss .add_box .add_list ul li .img img { vertical-align: middle } .add_productsss .add_box .add_list ul li .info { flex: 1; height: auto; padding-left: 20px; overflow: hidden } .add_productsss .add_box .add_list ul li .info .title { font-size: 18px; color: #2f3133; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .add_productsss .add_box .add_list ul li .info .details { margin-top: 2px; font-family: syht_l; font-size: 14px; color: #818585; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .add_productsss .add_box .add_list ul li::after { content: ''; width: 16px; height: 16px; position: absolute; bottom: -10px; right: -10px; z-index: 1; background: #2b37d8; transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); opacity: 0 } .add_productsss .add_box .add_list ul li.active { border-color: #2b37d8 } .add_productsss .add_box .add_list ul li.active .info .title { color: #2b37d8 } .add_productsss .add_box .add_list ul li.active::after { opacity: 1 } .add_productsss .add_box .add_list ul li:nth-child(odd) { margin-right: 20px } .add_productsss .add_box .add_list ul li:nth-child(2n)~li { margin-top: 20px } .add_productsss .add_box .submit_btn { width: 100%; height: auto; padding: 0 2vw 30px; text-align: right; overflow: hidden } .add_productsss .add_box .submit_btn .layui-btn { background: #222; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s } .add_productsss .add_box .submit_btn .layui-btn:hover { background: #2b37d8; opacity: 1 } @media screen and (max-height:540px) { .add_productsss .add_box .add_form { margin-top: 20px } .add_productsss .add_box .add_list { max-height: calc(90px * 3 + 10px * 2); margin: 20px 0 30px } .add_productsss .add_box .add_list ul { grid-gap: 10px 10px } } @media (max-width:990px) { .add_productsss .add_box .add_main { width: calc(100% - 40px) } .add_productsss .add_box .add_head { padding: 20px } .add_productsss .add_box .add_head .title { font-size: 18px } } @media (max-width:768px) { .add_productsss .add_box .add_head { padding: 20px 15px } .add_productsss .add_box .add_head .title { font-size: 16px } .add_productsss .add_box .add_head .close i { font-size: 12px } .add_productsss .add_box .add_form { margin: 15px 0 0; padding: 0 15px } .add_productsss .add_box .add_form .items { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 5px 5px } /*.add_productsss .add_box .add_form .items .item:last-child {*/ /* grid-column: span 2*/ /*}*/ .add_productsss .add_box .add_form .items .item { width: 100%; height: 50px; margin: 0 !important } .add_productsss .add_box .add_form .items .item .layui-form-select .layui-input { font-size: 12px } .add_productsss .add_box .add_form .items .item .layui-form-select .layui-anim-upbit dd { font-size: 12px } .add_productsss .add_box .add_list { margin: 10px 0 15px; max-height: calc(130px * 2 + 10px) } .add_productsss .add_box .add_list ul { padding: 0 15px; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 10px 10px } .add_productsss .add_box .add_list ul li { width: 100%; height: auto; margin: 0 !important; padding: 9px; display: block } .add_productsss .add_box .add_list ul li .img { margin: 0 auto } .add_productsss .add_box .add_list ul li .info { width: 100%; height: 30px; margin-top: 20px; padding: 0; text-align: center } .add_productsss .add_box .add_list ul li .info .title { line-height: 18px; font-size: 12px } .add_productsss .add_box .add_list ul li .info .details { margin: 0; line-height: 12px; font-size: 10px } .add_productsss .add_box .submit_btn { padding: 0 15px 20px } }