:root{ /* 配色原理，网站中尽量不用出现 多余5种颜色 此处的配色 尽量以前后反色为主 参考网址2：https://huemint.com/website-1/ 参考网址2：https://color.review/ */ /* --font-default: Arial, "sans-serif"; */ --color_main:rgb(29, 70, 148); /* 深色背景的主色调： var(--color_main) 一般对应为 浅色背景 如白色*/ --color_eye:rgb(20, 50, 110); /* 点睛色： var(--color_eye) 与别的主色调反差大，具有引导视线作用，一般可以为主色调的对比色或互补色，或是公司的logo主色 */ --color_subs:rgb(215, 16, 36); /* 辅助色： var(--color_subs) 不常用 一般为主色调的同类色、相邻色 */ --forecolor:rgb(75, 75, 75); /* 前景色，主色调： var(--forecolor) 如默认文字颜色（与背景色 对比度要求大于 4.5 WCAG 规范 AAA 级别） */ --forecolor_translucent:rgba(75, 75, 75, 0.7); /* 透明前景色： var(--forecolor_translucent) 主要用于banner，或是过渡层 一般为0.7透明度，如白色*/ --forecolor_translucent_3:rgba(75, 75, 75, 0.21); /* 透明前景色： var(--forecolor_translucent_3) 透明度 较低，作为 背景色叠层 */ --background: rgb(220, 220, 220); /* 背景色： var(--background) */ --background_translucent: rgba(220, 220, 220, 0.7); /* 透明背景： var(--background_translucent) 主要用于banner，或是过渡层 一般为0.7透明度，rgb色标 */ --background_translucent_3: rgba(220, 220, 220, 0.21); /* 透明背景： var(--background_translucent_3) 透明度 较低，作为 背景色叠层 */ --deep_background: rgb(75, 75, 75); /* 黑色（深色）背景色： var(--deep_background) */ --deep_background_translucent: rgba(75, 75, 75, 0.7); /* 黑色（深色）透明背景： var(--deep_background_translucent) 主要用于banner，或是过渡层 一般为0.7透明度，rgb色标 */ --deep_background_translucent_3: rgba(75, 75, 75, 0.25); /* 黑色（深色）透明背景： var(--deep_background_translucent_3) 主要用于banner，或是过渡层 一般为0.7透明度，rgb色标 */ --deep_color_main:rgb(255, 255, 255); /* 黑色（深色）的主色调： var(--deep_color_main) 一般对应为 浅色背景 如白色*/ --deep_color_eye:rgb(20, 50, 110); /* 黑色（深色）的点睛色： var(--deep_color_eye) 与别的主色调反差大，具有引导视线作用，一般可以为主色调的对比色或互补色，或是公司的logo主色 */ --deep_color_subs:rgb(215, 16, 36); /* 黑色（深色）的辅助色： var(--deep_color_subs) 不常用，一般为主色调的同类色、相邻色 */ --light_background: rgba(170, 200, 176, 0.75); /* 白色（浅色）背景： var(--light_background) */ --light_background_translucent:rgba(208, 229, 239, 0.7); /* 白色（浅色）透明背景： var(--light_background_translucent) 主要用于banner，或是过渡层*/ --light_background_translucent_5:rgba(208, 229, 239, 0.5); /* 白色（浅色）透明背景： var(--light_background_translucent_5) 主要用于banner，或是过渡层*/ --light_color_main:rgb(20, 50, 110); /* 白色（浅色）的主色调： var(--light_color_main) 一般对应为 深色背景 如黑色*/ --light_color_subs:rgb(215, 16, 36); /* 白色（浅色）的辅助色： var(--light_color_subs) 辅助色不常用，一般为主色调的同类色、相邻色 */ --light_color_eye:rgb(37, 13, 187); /* 白色（浅色）的点睛色： var(--light_color_eye) 与别的主色调反差大，具有引导视线作用，一般可以为主色调的对比色或互补色，或是公司的logo主色 */ --boder_line: 1px solid rgba(128, 170, 255, 0.6); /* 辅助色： var(--boder_line) 一般为主色调的同类色、相邻色 */ --radius_big: 8px; /* 大圆角默认： var(--radius_big) */ --radius_small: 4px; /* 小圆角默认： var(--radius_small) */ --radius_img: 5px; /* 图片圆角： var(--radius_img) */ --box_shadow: 0px 2px 8px 0px rgba(75, 75, 75, 0.21); /* 边框阴影： var(--box_shadow) */ --box_deep_shadow: 0px 2px 8px 0px rgba(75, 75, 75, 0.21); /* 黑色（深色）的边框阴影： var(--box_deep_shadow) 边框 阴影效果 */ --box_light_shadow: 0px 2px 8px 0px rgba(75, 75, 75, 0.21); /* 黑色（深色）的边框阴影： var(--box_light_shadow) 边框 阴影效果 */ --text_shadow: 0 1px 2px rgba(75, 75, 75, 0.25); /* 文字阴影： var(--text_shadow) */ --text_deep_shadow: 2px 2px 4px rgba(0,0,0,0.3); /* 黑色（深色）的文字阴影： var(--text_deep_shadow) */ --text_light_shadow: 2px 2px 3px rgba(255, 255, 255, 0.3); /* 白色（浅色）的文字阴影： var(--text_light_shadow) */ } html{font-size:14px;} @media only screen and (max-width:576px){html{font-size:10px !important;}} @media only screen and (min-width:576px){html{font-size:10px !important;}} @media only screen and (min-width:768px){html{font-size:12px !important;}} @media only screen and (min-width:992px){html{font-size:14px !important;}} @media only screen and (min-width:1200px){html{font-size:16px !important;}} @media only screen and (min-width:1667px){html{font-size:16px !important;}} /* ---------------------------------------------------- -- 00 ) 模板 颜色管理 -- 02 - 05 ) start 公共 全局相关的 CSS样式 -- 02 ) 全局 标题的 默认的 首页标题 css -- 03 ) #single_bar_line 10-20 面包屑 导航 公共样式 顶部导航 -- 04 ) .heku-btn 10-20 css 按钮的 图标样式 -- 05 ) .heku-box 10-20 图片 放到 容器中 图片放大效果 -- 06 ) #heku-top #heku-top-topbar 顶部 topbar 模板：menu_banner 文件：heku-menu-1.php -- 07 ) #Carousel_Banner 公共样式 banner 内敛 bootstrast 轮播插件 -- 08 ) #Heku_Form 表单 模板：TempParts/From/model-from -- 25 ) start Page 单页 .contact-info 联系我们 -- 26 ) start Page 单页 FAQ 问答模块 CSS 样式 -- 50 ) #Archive Product 分类页 ，集合页 相关 CSS 样式 -- 52 ) #Archive 分页 分类页 css 样式 -- 55 ) #Contact 联系我们 相关 CSS 样式 -- 70 ) #Footer 底部 相关 CSS 样式 -- 80 ) Viewer.js js 支持的css 用于点击放大图片使用 -- 90 ) @font-face 字体图标库，iconfont加载的字体图标 ------------------------------------------------------- */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} /* ---------------------------------------------------- 00 ) heku-color 模板颜色管理 ------------------------------------------------------- */ p,span,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6{text-shadow:var(--text_shadow);font-family:var(--font-default);} a{color:var(--forecolor);text-shadow: var(--text_shadow);text-decoration:none} a:focus,a:hover{color:var(--color_eye)} /* ---------------------------------------------------- 02 - 05 ) start 公共 全局相关的 CSS样式 ------------------------------------------------------- */ /* --------- 02 ) 全局 标题的 默认的 首页标题 css ----------- */ .index-title{text-align:center;} .index-title span{display:block;padding:1rem 0;} .index-title span.a{line-height:3rem;font-size:2.6rem;font-weight:600;color:var(--color_main);padding:1.8rem 2rem 1rem 0;float:left;} .index-title span.b{font-family:"Noto Sans",Sans-serif;font-size:1.2rem;font-weight:400;letter-spacing:0px;padding:3rem 0 0.8rem 0;float:left;} .index-title span.c{font-family:"Noto Sans",Sans-serif;font-size:1.05rem;line-height:2rem;font-weight:lighter;letter-spacing:0px;text-align:left;clear:both;color: #817e7e;} .text-mtu{font-weight:bold;text-transform:lowercase !important;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-style:italic;font-size: 120%;} /* --------- 03 ) #single_bar_line 10-20 面包屑 导航 公共样式 顶部导航 --------------- */ .banner-breadcrumb,.heku-breadcrumb{font-size:14px;line-height:1.5;} .banner-breadcrumb a,.banner-breadcrumb span{padding:5px 3px;line-height:40px;opacity:0.78;color: #e5e1e1;} .banner-breadcrumb a:hover,.banner-breadcrumb a:hover .icon{color:var(--color_subs);opacity:1;} .banner-breadcrumb a.home-bar .icon{padding-right:8px;font-size:18px;} .banner-breadcrumb .icon-right{font-size:12px;line-height:43px;} .heku-breadcrumb a,.heku-breadcrumb span{padding:5px 3px;line-height:40px;opacity:0.78;} .heku-breadcrumb a:hover{color:var(--color_eye);opacity:1;} .heku-breadcrumb a.home-bar .icon{padding-right:8px;font-size:18px;} .heku-breadcrumb .icon-right{font-size:12px;line-height:43px;} /*---------- 04 ) 图片 放到 容器中 图片放大效果 ------------- */ .heku-box{background-color: #fff;box-shadow: 0 3px 40px rgba(36,36,36,.1);border-radius:var(--radius_big);-webkit-box-shadow: 0 3px 40px rgba(36,36,36,.1);} .heku-img-box{background:var(--background_translucent_3);border-radius:var(--radius_big);} .imgZoom{overflow:hidden;-webkit-transform:rotate(0);transform:rotate(0);} .imgZoom img{width:100%;height:100%;vertical-align:bottom;-o-object-fit:cover;object-fit:cover;-moz-transition:all .8s ease 0s;-ms-transition:all .8s ease 0s;-o-transition:all .8s ease 0s;-webkit-transition:all .8s ease 0s;transition:all .8s ease 0s;} .imgZoom:hover img{-moz-transform:scale(1.2,1.2);-ms-transform:scale(1.2,1.2);-o-transform:scale(1.2,1.2);-webkit-transform:scale(1.2,1.2);transform:scale(1.2,1.2);} /* --------- 05 ) .heku-btn 10-20 css 按钮的 图标样式 --------------- */ .heku-btn{text-shadow:var(--text_deep_shadow);display:inline-block;border:1px solid var(--color_eye);background:var(--background_translucent);color:var(--color_main);padding:0.5rem 2rem;-webkit-border-radius:40px;-moz-border-radius:40px;border-radius:40px;font-weight:600;text-transform:capitalize;/* min-width:10rem; */text-align:center;} .heku-btn-transparent{background:transparent;border-color:var(--color_main);} .heku-btn-transparent:hover{background:var(--light_background_translucent_5);;color:var(--color_eye);border-color:var(--color_eye);text-shadow:var(--text_light_shadow);} .heku-btn-focus{background:rgb(0,101,163);border-color:rgba(255,255,255,0.2);} .heku-btn-focus:hover{font-weight:bold;} .heku-btn{box-shadow:0px 0px 4px rgba(37, 162, 137, 0.7);text-shadow:var(--text_shadow);background: rgba(52, 136, 73, 0.76);border-radius: 15px;color:rgb(250, 250, 250);} .heku-btn:hover,.heku-btn:focus{outline:0;background:rgb(251, 251, 251);color: rgb(22, 162, 134);border-color:rgb(21, 160, 132);text-shadow:0.5px 0.5px 0.5px rgb(255, 255, 255);} /* --------- 01 ) heku-color 模板颜色管理 ------------- */ .heku-btn:hover{background:var(--color_main);color:var(--color_eye);} .heku-btn-focus:hover{background:#fbfbfb;color:var(--color_eye);border-color:rgb(92,133,94);text-shadow:0.5px 0.5px 0.5px rgb(255 255 255);} .heku-btn-light{background: transparent;border-color: rgba(255, 255, 255, 0.986);color:rgba(255, 255, 255, 0.986);} .heku-btn-light:hover{background:#ffffff6b;color:var(--color_main);border-color:var(--color_main);text-shadow:0.5px 0.5px 0.5px rgb(199 196 196);box-shadow:0px 0px 4px rgba(0,0,0,.6);-moz-box-shadow:0px 0px 7px rgba(0,0,0,.6);-webkit-box-shadow:0px 0px 4px rgba(0,0,0,.6);} /* ---------------------------------------------------- 02 - 05 ) end 公共 全局相关的 CSS样式 ------------------------------------------------------- */ /* ---------------------------------------------------- 06 ) start #heku-top #heku-top-topbar 顶部 topbar 模板：menu_banner 文件：heku-menu-1.php -------------------------------------------------------*/ .heku-top-menu{width:100%;top:0;right:0;z-index:11;} .heku-top-menu .top-logo-font{padding-left:1rem;line-height:4rem;font-size:2.4rem;font-weight:bolder;letter-spacing:2px;} .heku-top-menu .top-menu-logo .logo-pr,.heku-top-menu.header-is-visible .top-menu-logo .logo-bg{display:inline-flex;} .heku-top-menu .top-menu-logo .logo-bg,.heku-top-menu.header-is-visible .top-menu-logo .logo-pr{display:none;} .heku-top-menu .top-menu-logo,.heku-top-menu .top-logo-font,.heku-top-menu .nav-menu > li{line-height:4rem;} .heku-top-menu .nav-menu .sub-menu{top:4rem;} .header-is-visible.heku-top-menu .nav-menu .sub-menu{top:4rem;} .header-is-visible.heku-top-menu .nav-menu li.depth-0.heku-menu-type2:hover > .sub-menu{top:4rem;} .heku-top-menu .top-menu-logo img{height:3.2rem;line-height:4rem;margin-top: -5px;} .heku-top-menu .icon-navicon{font-size:2.4rem;line-height:4rem;} .heku-top-menu .zh .nav-menu > li a{letter-spacing: 2px;} .heku-top-menu .nav-menu > li{display:inline-block;line-height:4rem;padding:0px 1.6rem;text-align:center;transition:.5s;position:relative;} .heku-top-menu .nav-menu > li a{font-size:1.1rem;font-weight:600;text-transform:capitalize;display:inline-block;} .heku-top-menu .nav-menu .sub-menu{display:none;/* width:25rem; */position:absolute;border-radius:3px 3px 8px 8px;top:4rem;left:-1rem;} .heku-top-menu .nav-menu .sub-menu li{list-style:none;line-height:3rem;} .heku-top-menu .nav-menu .sub-menu li a{text-align:center;transition:.5s;opacity:1;font-size:0.8rem;filter:alpha(opacity=100,style=100);-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;} .heku-top-menu .nav-menu .sub-menu li a span{font-size:1rem;font-weight:500;} .heku-top-menu .nav-menu .sub-menu li a .text-mtu{font-weight:bolder;font-size: 120%;} .heku-top-menu .nav-menu li:hover .sub-menu{display:block;height:auto;transition:.5s;overflow:hidden;position:absolute;} .heku-top-menu .nav-menu > li a, .heku-top-menu .top-logo-font span{display: inline-flex;} .heku-top-menu .nav-menu .sub-menu a:hover, .heku-top-menu .top-logo-font:hover span{display: inline-flex;} .heku-top-menu .nav-menu > li.menu-item-has-children > a > span{font-size:12px;display:inline-block;padding:0 .5rem;} .heku-top-menu .nav-menu > li.menu-item-has-children > a > span:before{content:"\e601";} .heku-top-menu .nav-menu > li.menu-item-has-children:hover > a > span{transform:rotateZ(90deg);transition-duration:.8s;} .header-is-visible{position:fixed !important;top:0;z-index:9999;animation:300ms ease-in-out 0s normal none 1 running fadeInDown;-webkit-animation:300ms ease-in-out 0s normal none 1 running fadeInDown;} /* ---6.01) heku-color 模板颜色管理 ------------- */ #temp01_heku_top,#temp01_heku_top a{color:rgb(67, 67, 67);} .heku-top-menu .top-logo-font{color:rgb(52, 136, 73);text-shadow: 0.5px 0.5px 0.5px rgb(255 255 255);} .heku-top-menu .icon-navicon{color:rgb(67, 67, 67);} /* --- 文字 基础 凸显色标 --- */ .heku-top-menu .nav-menu > li a, .heku-top-menu .top-logo-font span, .header-is-visible .top-logo-font span, .header-is-visible .nav-menu > li a, .header-is-visible .sub-menu > li a{color:rgb(67, 67, 67);text-shadow:var(--text_shadow);} /* --- 文字 Hover 凸显色标 --- */ .heku-top-menu .nav-menu > li a, .heku-top-menu .nav-menu > li:hover > a, .header-is-visible .nav-menu > li:hover > a, .heku-top-menu .nav-menu li .sub-menu li:hover a, .heku-top-menu .nav-menu .sub-menu a:hover, .heku-top-menu .top-logo-font:hover span{color:rgb(29 70 148);text-shadow:var(--text_shadow);} /* --- 文字 背景色标 --- */ .heku-top-menu .nav-menu .sub-menu{background:rgba(153, 187, 203, 0.85);} .header-is-visible.heku-top-menu .icon-navicon{color:rgb(67, 67, 67);} .header-is-visible{box-shadow:var(--box_deep_shadow);-webkit-box-shadow:var(--box_deep_shadow);background:rgba(229, 241, 246, 0.85);} /* --- 6.1) 下拉菜单 展示模板 1 heku-menu-type1 CSS --- */ .heku-top-menu .nav-menu li.depth-0.heku-menu-type1 li.depth-1 a{display:initial;} li.depth-0.heku-menu-type1 li.sidebar-li{list-style:none;} li.depth-0.heku-menu-type1 li.depth-1 .sidebar-cat-img{width: 50px;padding-right: 10px;} li.depth-0.heku-menu-type1 li.depth-1 a{display:initial;} li.depth-0.heku-menu-type1 li.depth-1 .sub-menu-1{max-height: 0px;overflow: hidden;} li.depth-0.heku-menu-type1 li.depth-1 {list-style: none;line-height:3rem;overflow: hidden;} li.depth-0.heku-menu-type1 li.depth-1 .icon:before{content:"\e61a";} li.depth-0.heku-menu-type1 li.current-menu-item > div > .icon:before, li.depth-0.heku-menu-type1 li.current-menu-parent > div > .icon:before{content:"\e61b";} li.depth-0.heku-menu-type1 li.depth-1 .icon{float: right;padding-right: 5px;} li.depth-0.heku-menu-type1 .sub-menu-0 {padding: 0px 0px;-webkit-transition:all 0.7s ease-out 0s;-moz-transition:all 0.7s ease-out 0s;-ms-transition:all 0.7s ease-out 0s;-o-transition:all 0.7s ease-out 0s;transition:all 0.7s ease-out 0s;} li.depth-0.heku-menu-type1 li.depth-1{border-bottom:1px solid var(--forecolor,rgb(67, 67, 67));border-bottom-style:dashed;color:var(--forecolor,rgb(67, 67, 67));list-style:none;width: 18rem;} li.depth-0.heku-menu-type1 li.depth-1:last-child{border-bottom: none;} li.depth-0.heku-menu-type1 li.current-menu-item .sidebar-menu-li, li.depth-0.heku-menu-type1 li.current-menu-parent .sidebar-menu-li, li.depth-0.heku-menu-type1 li.depth-1:hover .sidebar-menu-li{background:rgba(229, 241, 246, 0.85);border:1px solid rgba(255, 255, 255, 0);border-left:3px solid rgba(52, 136, 73, 0.678);} li.depth-0.heku-menu-type1 li.current-menu-item .sidebar-menu-li a span, li.depth-0.heku-menu-type1 li.current-menu-parent .sidebar-menu-li a span, li.depth-0.heku-menu-type1 li.depth-1:hover .sidebar-menu-li a span{/* font-size:0.9rem; */color:rgb(215, 16, 36);font-weight:600;text-shadow: 0px 0px 2px rgb(255,255,255)} li.depth-0.heku-menu-type1 li .sidebar-menu-li a span{font-size: 0.9rem;padding-left: 0.3rem;} li.depth-0.heku-menu-type1 li .sidebar-menu-li{padding:0 5px;border:1px solid rgba(255, 255, 255, 0);border-right:3px solid #ffffff00;border-left:3px solid rgba(255, 255, 255, 0);text-align: left;} li.depth-0.heku-menu-type1 .sub-menu-0 > li:last-child{border-bottom: none;} li.depth-0.heku-menu-type1:hover > .sub-menu{background:rgba(229, 241, 246, 0.85);-webkit-background:rgba(229, 241, 246, 0.85);-o-background:rgba(229, 241, 246, 0.85);-moz-background:rgba(229, 241, 246, 0.85);box-shadow:0 3px 6px -4px rgba(0,0,0,0.12),0 6px 16px 0 rgba(0,0,0,0.08),0 9px 28px 8px rgba(0,0,0,0.05);} /* --- 6.2) 下拉菜单 展示模板 2 heku-menu-type2 CSS --- */ li.depth-0.heku-menu-type2 li.depth-1{display:none;} li.depth-0.heku-menu-type2:hover li.depth-1{display:block;} li.depth-0.heku-menu-type2 ul.sub-menu-0:hover li .sub-menu, li.depth-0.heku-menu-type2 ul.sub-menu-0:hover li.depth-1 > a:after{display:none;} li.depth-0.heku-menu-type2 ul.sub-menu-0 li.depth-1:hover > a:after, li.depth-0.heku-menu-type2:hover li.depth-1:first-child > a:after{content:"➤";float:right;padding-right:12px;color:var(--color_subs);position:relative;top:0px;line-height:60px;display:block;} li.depth-0.heku-menu-type2 ul.sub-menu-0 li:hover > .sub-menu{display:block;} li.depth-0.heku-menu-type2 .sub-menu-0:hover li:first-child > .sub-menu, li.depth-0.heku-menu-type2:hover .sub-menu-0 li:first-child > .sub-menu{display:block;} li.depth-0.heku-menu-type2 ul.sub-menu-0 li.depth-1 > a{width:250px;border-bottom:1px solid rgb(90, 135, 208);line-height:60px;height:60px;padding-left:0px;position:inherit;} li.depth-0.heku-menu-type2 ul.sub-menu-0 li.depth-1:hover > a span{color:var(--color_eye,rgb(215, 16, 36));font-weight:bold;} li.depth-0.heku-menu-type2 ul.sub-menu-0 li.depth-1 > a span{line-height:60px;height:60px;font-size:1rem;padding-left:10px;color:rgb(51, 51, 51);} li.depth-0.heku-menu-type2 ul.sub-menu-0 li.depth-1 .catimg{display:inline-block;vertical-align:middle;margin-right:0px;width:50px;height:50px;margin-left:5px;} li.depth-0.heku-menu-type2:hover > .sub-menu{height:100%;transition:1.5s;position:fixed;} li.depth-0.heku-menu-type2 > .sub-menu-1{height:200px;} li.depth-0.heku-menu-type2 ul.sub-menu li.depth-1{list-style:none;width:250px;position:absolute;} li.depth-0.heku-menu-type2 ul.sub-menu li.depth-1:nth-child(1) a{top:0px;} li.depth-0.heku-menu-type2 ul.sub-menu li.depth-1:nth-child(2) a{top:60px;} li.depth-0.heku-menu-type2 ul.sub-menu li.depth-1:nth-child(3) a{top:120px;} li.depth-0.heku-menu-type2 ul.sub-menu li.depth-1:nth-child(4) a{top:180px;} li.depth-0.heku-menu-type2 ul.sub-menu li.depth-1:nth-child(5) a{top:240px;} li.depth-0.heku-menu-type2 ul.sub-menu li.depth-1:nth-child(6) a{top:300px;} li.depth-0.heku-menu-type2 ul.sub-menu li.depth-1:nth-child(7) a{top:360px;} li.depth-0.heku-menu-type2 ul.sub-menu li.depth-1:nth-child(8) a{top:420px;} li.depth-0.heku-menu-type2 ul.sub-menu-0 li .sub-menu-1 li{width:950px;} li.depth-0.heku-menu-type2 ul.sub-menu-0 .sub-menu-1{top:0px;left:250px;position:absolute;width:950px;display:none;} li.depth-0.heku-menu-type2 > .sub-menu{height: 0px;} li.depth-0.heku-menu-type2:hover > .sub-menu{width:1200px;left:calc((100% - 1200px) / 2 );border-radius:0 0 8px 8px;top:4rem;height:500px;background:rgb(208 229 239 / 55%);-webkit-background:rgb(208 229 239 / 55%);-o-background:rgb(208 229 239 / 55%);-moz-background:rgb(208 229 239 / 55%);box-shadow:0 3px 6px -4px rgba(0,0,0,0.12),0 6px 16px 0 rgba(0,0,0,0.08),0 9px 28px 8px rgba(0,0,0,0.05);} /* --- 6.3) 下拉菜单 展示模板 3 heku-menu-type2 CSS --- */ li.depth-0.heku-menu-type3 .sub-menu-0{display:none;} li.depth-0.heku-menu-type3 .sub-menu-0 .container-2{display:flex;height: 0px;transition:1.5s;} li.depth-0.heku-menu-type3 .sub-menu-0 li.depth-1:hover > a span{color:var(--color_eye,rgb(215, 16, 36));font-weight:bold;} li.depth-0.heku-menu-type3 .sub-menu-0 li.depth-1 > a span{line-height:60px;height:60px;font-size:1rem;padding-left:10px;color:rgb(51, 51, 51);} li.depth-0.heku-menu-type3 .sub-menu-0 li.depth-1 .list-img img{width: 100%;} li.depth-0.heku-menu-type3:hover .sub-menu-0{display:block;position: fixed;} li.depth-0.heku-menu-type3:hover .sub-menu-0 .container-2{height:auto;} li.depth-0.heku-menu-type3:hover > .sub-menu{width:1140px;left:calc((100% - 1140px) / 2 );border-radius:0 0 8px 8px;height:auto;top:4rem;background:rgba(229, 241, 246, 0.85);-webkit-background:rgba(229, 241, 246, 0.85);-o-background:rgba(229, 241, 246, 0.85);-moz-background:rgba(229, 241, 246, 0.85);box-shadow:0 3px 6px -4px rgba(0,0,0,0.12),0 6px 16px 0 rgba(0,0,0,0.08),0 9px 28px 8px rgba(0,0,0,0.05);} li.depth-0.heku-menu-type3 .sub-menu-0 li.depth-1:not(:last-child)::after{content:'';content:'';position:absolute;top:10%;right:0px;width:2px;height:75%;background-color:rgb(215, 16, 36);} li.depth-0.heku-menu-type3 .menu-title{position: relative;} li.depth-0.heku-menu-type3 .menu-texts{display:flex;margin-top:0.8rem;padding-top:0.5rem;border-top:1px dashed #539b65;} li.depth-0.heku-menu-type3 .menu-texts .text-li{display:flex;font-size:16px;line-height:32px;color:#0758a8;} li.depth-0.heku-menu-type3 .menu-texts .text-li .t2{color:#000000;margin-left:20px;} li.depth-0.heku-menu-type3 .menu-texts .text-li:nth-child(1){margin-right:40px;} li.depth-0.heku-menu-type3 .sub-menu-0 li.depth-1:hover .menu-title::after{width:12rem;} li.depth-0.heku-menu-type3 .menu-title::after{content:"";width:4rem;height:2px;background-color:#ee1d23;position:absolute;left:0;bottom:0;transition:0.4s;border-radius:5px;} li.depth-0.heku-menu-type3 .menu-msg{text-align:left;font-size:0.9rem;line-height: 1.5rem;height: 6rem;color:#666666;margin-top:10px;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:4;-webkit-box-orient:vertical;} li.depth-0.heku-menu-type3 .heku-btn{font-size: 0.95rem;transition: transform 0.5s ease;line-height: 1.8rem;border-color:rgba(255,255,255,0.986);color: rgb(51 79 134);/* background:rgb(51 79 134); */border:none;padding: 2px 15px 3px 15px;text-shadow:0.5px 0.5px 0.5px rgb(199 196 196);box-shadow:0px 0px 4px rgba(0,0,0,.6);-moz-box-shadow:0px 0px 7px rgba(0,0,0,.6);-webkit-box-shadow:0px 0px 4px rgba(0,0,0,.6);} li.depth-0.heku-menu-type3 .heku-btn:hover{transform: scale(1.1);background: rgb(51 79 134);color: #fff;} li.depth-0.heku-menu-type3 .heku-btn:hover .from-contact-svg{fill: #fff;} li.depth-0.heku-menu-type3 li.depth-1:first-child .heku-btn2{display: none;} li.depth-0.heku-menu-type3 li.depth-1:last-child .heku-btn2{display: none;} /* --- 1) 小于768px 尺寸时候使用 手机 mobile --- */ @media(max-width: 768px) { .heku-top-menu .nav-menu > li.menu-item-has-children > a > span{display: none;} .heku-top-menu .nav-menu > li:hover{background:var(--deep_background_translucent);} .heku-top-menu .nav-menu > li:last-child{padding-right:5rem;} .heku-top-menu .nav-menu{display:none;border-radius:10px;overflow:hidden;margin-bottom: 1.5rem;margin-top: 0.5rem;clear: both;box-shadow: var(--box_light_shadow);} .heku-top-menu .nav-menu > li{float:initial;width:100%;padding:0px 5rem;background:rgba(49, 116, 47, 0.67);-webkit-background:rgba(49, 116, 47, 0.67);-o-background:rgba(49, 116, 47, 0.67);-moz-background:rgba(49, 116, 47, 0.67);} .header-is-visible .nav-menu > li a{color: var(--deep_color_main);} .heku-top-menu .nav-menu > li:not(:last-child){border-bottom: 1px dashed rgb(118, 112, 112, 0.65);} .heku-top-menu .icon-navicon .iconfont{font-size: 2.4rem;} .heku-top-menu .nav-menu li:hover .sub-menu{display:none;} .heku-top-menu .nav-menu > li:hover > a{color: #fff;} } /* --- 2) 大于768px尺寸 min --- */ @media(min-width:768px) { li.depth-0.heku-menu-type2:hover > .sub-menu{width: 720px;left: calc((100% - 720px) / 2 );} li.depth-0.heku-menu-type3:hover > .sub-menu{width: 720px;left: calc((100% - 720px) / 2 );} li.depth-0.heku-menu-type2 ul.sub-menu-0 .sub-menu-1{width: 470px;} li.depth-0.heku-menu-type2 ul.sub-menu-0 li .sub-menu-1 li{width:470px;} .heku-top-menu .nav-menu > li.menu-item-has-children > a > span{display: none;} .heku-top-menu .nav-menu > li.depth-0:nth-child(3){display: none;} } /* --- 3) 大于992px尺寸 mid --- */ @media(min-width:992px) { li.depth-0.heku-menu-type2:hover > .sub-menu{width: 920px;left: calc((100% - 920px) / 2 );} li.depth-0.heku-menu-type3:hover > .sub-menu{width: 920px;left: calc((100% - 920px) / 2 );} li.depth-0.heku-menu-type2 ul.sub-menu-0 .sub-menu-1{width: 675px;} li.depth-0.heku-menu-type2 ul.sub-menu-0 li .sub-menu-1 li{width:675px;} .heku-top-menu .nav-menu > li.menu-item-has-children > a > span{display: inline-block;} .heku-top-menu .nav-menu > li.depth-0:nth-child(3){display: inline-block;} } /* --- 4) 大于1200尺寸时候使用 max --- */ @media(min-width:1200px) { li.depth-0.heku-menu-type2:hover > .sub-menu{width: 1140px;left: calc((100% - 1140px) / 2 );} li.depth-0.heku-menu-type3:hover > .sub-menu{width: 1140px;left: calc((100% - 1140px) / 2 );} li.depth-0.heku-menu-type2 ul.sub-menu-0 .sub-menu-1{width: 890px;} li.depth-0.heku-menu-type2 ul.sub-menu-0 li .sub-menu-1 li{width:890px;} } /* ---------------------------------------------------- 06 ) end #heku-top #heku-top-topbar 顶部导航 topbar 模板：menu_banner 文件：heku-menu-1.php -------------------------------------------------------*/ /* ---------------------------------------------------- 06.1) #heku-search-info #heku-search-info 顶部 搜索 -------------------------------------------------------*/ .search-info .search-toggle .icon-search{display:inline-block;} .search-info .search-toggle .icon-close{display:none;} .search-info .search-toggle.show-icon .icon-search{display:none;} .search-info .search-toggle.show-icon .icon-close{display:inline-block;} .search-info .search-toggle{display:inline-block;line-height:3.8rem;padding:0px 1.2rem;text-align:center;transition:.5s;} #heku_search_info{position:fixed;top:4rem;width:0%;height:3.8rem;z-index:10;-webkit-transition:all 0.6s ease-out 0s;transition:all 0.6s ease-out 0s;visibility:hidden;background: #eef4f8b0;} #heku_search_info.opened{width:100%;left:auto;right:0;visibility:visible;opacity:1;} #heku_search_info .head-search-from .span-input{display:inline-block;padding:0px 10px 0px 15px;border:none;line-height:3.8rem;color:rgb(29 70 148);font-size:18px;font-weight:400;} #heku_search_info .head-search-from input{width:70%;padding:0px 24px;display:inline-block;border:none;height:3.8rem;color:rgba(29, 71, 148);font-size:20px;font-weight:400;background-color:transparent;} #heku_search_info .head-search-from input::-webkit-input-placeholder{color:rgb(29 70 148);text-transform:capitalize;font-size:20px;} #heku_search_info .head-search-from input::-moz-placeholder{color:rgb(29 70 148);text-transform:capitalize;font-size:20px;} #heku_search_info .head-search-from input::-ms-input-placeholder{color:rgb(29 70 148);text-transform:capitalize;font-size:20px;} #heku_search_info .head-search-from input::placeholder{color:rgba(29, 71, 148, 0.6);text-transform:capitalize;font-size:20px;} #heku_search_info .head-search-from input:focus{border:none;outline:none;} #heku_search_info .head-search-from input:focus::-webkit-input-placeholder{opacity:0;} #heku_search_info .head-search-from input:focus::-moz-placeholder{opacity:0;} #heku_search_info .head-search-from input:focus::-ms-input-placeholder{opacity:0;} #heku_search_info .head-search-from input:focus::placeholder{opacity:0;} #heku_search_info .head-search-from button{position:absolute;top:50%;right:70px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:transparent;font-size:20px;font-weight:100;color:rgb(29 70 148);outline:none;border:none;} #heku_search_info .head-search-from .delete-ico{position:absolute;top:50%;right:30px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:transparent;font-size:20px;font-weight:100;color:rgb(29 70 148);} /* ---------------------------------------------------- 07 ) start #Carousel_Banner 公共样式 banner 内敛 bootstrast 轮播插件 模板：menu_banner 文件：heku-banner-1.php ------------------------------------------------------- */ #Carousel_Banner .banner-indicators{bottom:20px;} #Carousel_Banner .banner-indicators li{width:45px;height:6px;display:inline-block;background:rgba(255,255,255,0.5);position:relative;overflow:hidden;border-top:0px solid transparent;border-bottom:0px solid transparent;border-radius:2px;margin-right:4px;margin-left:4px;} #Carousel_Banner .banner-indicators .active:after{content:"";width:0px;height:100%;position:absolute;left:0;top:0;animation:my_carousel_indicators 9.5s;-webkit-animation:my_carousel_indicators 9.5s;background:rgb(255, 255, 255);} @keyframes my_carousel_indicators{from{width:0;}to{width:100%;}} @-webkit-keyframes my_carousel_indicators{from{width:0;}to{width:100%;}} .carousel-control-prev,.carousel-control-next{opacity:.3;transition:opacity .15s ease;z-index:10;} #Carousel_Banner .carousel-item{width:100%;height:100%;background-size:cover;background-position:center center;} #Carousel_Banner .carousel-item .banner-video, #Carousel_Banner .carousel-item .banner-img{position:absolute;z-index:4;width:100%;height: 100%;} #Carousel_Banner .carousel-item .banner-video video, #Carousel_Banner .carousel-item .banner-img img{width: 100%;height: 100%;object-fit: cover;} #Carousel_Banner .carousel-item .banner-video .video-js{width:100%;height:100%;object-fit:cover;} #Carousel_Banner .carousel-item .background-overlay{opacity:0.68;transition:background 0.3s,border-radius 0.3s,opacity 0.3s;height:100%;width:100%;top:0;left:0;position:absolute;z-index:5;} #Carousel_Banner .banner-content{padding:7.2rem 2rem 5rem;height:100%;color: rgb(255, 255, 255);} #Carousel_Banner .banner-content .container{z-index:5;} #Carousel_Banner .banner-content .slider-content-h1{font-size:2.8rem;} #Carousel_Banner .banner-content .slider-content-text1{font-size:1.8rem;} #Carousel_Banner .banner-content .slider-content-text2{font-size:1.2rem;} #Carousel_Banner .banner-content .heku-btn{height: 2.7rem;line-height: 2.7rem;padding: 0 2.5rem;} #Carousel_Banner .contact_banner .banner-content{padding:3rem 0rem 5rem;height:100%;color: rgb(248, 248, 248);} #Carousel_Banner .none_banner .banner-content{padding:0rem 0rem 0rem;height:4.5rem;color: rgb(248, 248, 248);} #Carousel_Banner .banner-content.banner_one_content .banner-content-h1{font-size:3rem;text-transform:uppercase;text-shadow:2px 2px 3px rgb(255,255,255,0.8);color:var(--color_main);font-weight:bold;} #Carousel_Banner .banner-content.banner_one_content .banner-text1{font-size:1.6rem;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);padding: 0.6rem 0;} #Carousel_Banner .banner-content.banner_one_content .banner-text1 .focus{font-size:3rem;color:var(--color_main);text-shadow: var(--text_shadow);text-transform:uppercase;font-weight: 600;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);} #Carousel_Banner .banner-content.banner_one_content .banner-text2{font-size:1.2rem;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);} #Carousel_Banner .banner-content.banner_two_content .slider-content-text1{text-align:right;float:right;} #Carousel_Banner .banner-content.banner_two_content .slider-content{text-align: center;} #Carousel_Banner .banner-content.banner_two_content .banner-content-h1{font-size:3.2rem;text-align: center;text-transform: capitalize;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);} #Carousel_Banner .banner-content.banner_two_content .banner-text1 span{text-align: center;font-size:1.4rem;font-weight: 600;} #Carousel_Banner .carousel-item .banner-breadcrumb{position:absolute;z-index:10;bottom:5px;width: 100%;} #Carousel_Banner .banner-breadcrumb, #Carousel_Banner .banner-breadcrumb a, #Carousel_Banner .banner-breadcrumb span{padding:5px 3px;line-height:40px;opacity:1;color:rgb(255, 255, 255);} #Carousel_Banner .banner-breadcrumb a:hover, #Carousel_Banner .banner-breadcrumb a:hover .icon{opacity:1;} #Carousel_Banner .banner-breadcrumb a.home-bar .icon{padding-right:8px;font-size:18px;} #Carousel_Banner .banner-breadcrumb .icon-right{font-size:12px;line-height:43px;} /* ---07.1) heku-color 模板颜色管理 ------------- */ #Carousel_Banner ,#Carousel_Banner a{color:var(--color_main);} #Carousel_Banner .carousel-item .background-overlay{background:linear-gradient(60deg, rgb(166 175 192) 0%, rgb(33 49 81) 100%);} #Carousel_Banner .banner-breadcrumb a:hover .icon{color:var(--color_subs);} #Carousel_Banner .banner-content.banner_two_content .banner-text1 span{color:var(--color_main);text-shadow: 1px -1px 1px rgba(220, 220, 220, 0.8);} /* ---------------------------------------------------- 07 ) end #Carousel_Banner 公共样式 banner 内敛 bootstrast 轮播插件 模板：menu_banner 文件：heku-banner-1.php ------------------------------------------------------- */ /* ---------------------------------------------------- 25 ) start Page 单页 .contact-info 联系我们 模板：TempParts/From/page-contact.php 文件：TempParts/From/page-contact-1.php ------------------------------------------------------- */ #page_contact_line .container{position: relative;width:100%;padding:5rem 2rem 4rem 2rem;display:flex;align-items:center;justify-content:center;} #page_contact_line .contact-box{padding:0rem 1rem;z-index:10;overflow:hidden;position:relative;width:100%;max-width:1180px;background: #ffffff;border-radius:10px;box-shadow:0 0 20px 1px rgba(0,0,0,0.1);z-index:9;} #page_contact_line .big-circle{position:absolute;width:500px;height:500px;border-radius:50%;bottom:50%;right:50%;transform:translate(-40%,38%);} #page_contact_line .big-circle:after{content:"";position:absolute;width:360px;height:360px;background-color: rgb(250, 250, 250);border-radius:50%;top:calc(50% - 180px);left:calc(50% - 180px);} #page_contact_line .circle{border-radius:50%;position:absolute;} #page_contact_line .circle-one{width:130px;height:130px;top:130px;right:-40px;} #page_contact_line .circle-two{width:80px;height:80px;top:10px;right:30px;} #page_contact_line .big-circle:after{background: rgb(250, 250, 250);} #page_contact_line .contact-info{padding:2.3rem 1.2rem;position:relative;} #page_contact_line .contact-info .title{font-weight:500;font-size:1.5rem;line-height:1;margin-bottom:0.7rem;} #page_contact_line .contact-info .title-span{color: rgb(120, 119, 119);font-weight:lighter;} #page_contact_line .contact-info:before{content:"";position:absolute;width:110px;height:100px;border:22px solid rgb(0, 161, 233);border-radius:50%;bottom:-70px;right:50px;opacity:0.3;} #page_contact_line .contact-info .info li{margin:0.7rem 0;align-items:center;font-size:1rem;list-style: none;} #page_contact_line .contact-info .info li .icon{padding-right: 8px;} #page_contact_line .contact-info .social-media{padding:1rem 0 0.5rem 0;} #page_contact_line .contact-info .social-icons{display:flex;margin-top:0.8rem;} #page_contact_line .contact-info .social-icons li{list-style: none;width:32px;height:32px;border-radius:5px;color: #ffffff;text-align:center;line-height:35px;margin-right:0.8rem;transition:0.3s;} #page_contact_line .contact-info .social-icons li:hover{transform:scale(1.25);} #page_contact_line .contact-info .social-icons li a{color: rgb(255, 255, 255);} #page_contact_line .contact-info .social-icons li a i{font-size:1rem;color: rgb(255, 255, 255);} #page_contact_line .contact-box{background: rgb(255, 255, 255);box-shadow:0 0 20px 1px rgba(0,0,0,0.1);} #page_contact_line .contact-form{padding:2.3rem 1.2rem;position:relative;} /* ---1) heku-color 模板颜色管理 ------------- */ #page_contact_line ,#page_contact_line a{color: var(--color_main);} #page_contact_line .contact-info .info li:hover, #page_contact_line .contact-info .info li:hover a{color: var(--color_main);} #page_contact_line .contact-info .info li .icon{color: var(--color_main);} #page_contact_line .contact-info .title{color:rgb(29, 70, 148);} #page_contact_line .contact-info .title-span{color:rgb(120, 120, 120);} #page_contact_line .circle{background:linear-gradient(135deg,transparent 20%,var(--color_main));} #page_contact_line .big-circle{background:linear-gradient(to bottom,rgb(29, 70, 148),rgb(0, 161, 233));} #page_contact_line .contact-info .social-icons li{background:linear-gradient(250deg, rgb(215, 16, 36), var(--color_main));} #page_contact_line .contact-info .social-icons li, #page_contact_line .contact-info .social-icons li a, #page_contact_line .contact-info .social-icons li a i{color:rgb(255, 255, 255);} /* ---------------------------------------------------- 25 ) end Page 单页 .contact-info 联系我们 模板：TempParts/From/page-contact.php 文件：TempParts/From/page-contact-1.php ------------------------------------------------------- */ /* ---------------------------------------------------- 25.1 ) start #Heku_Form 表单 模板：TempParts/From/model-from 文件：TempParts/From/heku-model-from-1.php ------------------------------------------------------- */ #Heku_Form .needs-validation .invalid-feedback{margin-top: -16px;padding-left: 10px;margin-bottom: 10px;} #Heku_Form input.input-val ,#Heku_Form .post-input input,#Heku_Form .post-input textarea,#Heku_Form .post-input select{font-size: 14px;width: 100%;height: 42px;line-height: 42px;padding: 0 20px;border: 1px solid #f5f5f5;box-shadow: 0px 1px 4px rgba(0,0,0,0.16);text-shadow: var(--text_shadow);} #Heku_Form input.input-val:focus,#Heku_Form .post-input input:focus,#Heku_Form .post-input textarea:focus,#Heku_Form .post-input select:focus{border-color: rgb(239, 239, 239);outline: none;background: rgb(250, 250, 250);box-shadow: 0px 2px 4px rgba(0,0,0,0.16);} #Heku_Form .post-input input::placeholder,#Heku_Form .post-input textarea::placeholder{font-weight: 500;color: rgb(104, 103, 119);} #Heku_Form .post-input input:focus::placeholder,#Heku_Form .post-input textarea:focus::placeholder{opacity: 0;} #Heku_Form .post-input textarea{height: 160px;line-height: 32px;resize: none;padding: 10px 20px;} #Heku_Form .canvasreset{line-height: 40px;display: inline-block;position: absolute;padding-left: 8px;color: rgb(227, 87, 101);} #Heku_Form #canvas{background:rgb(221, 221, 221);display:inline-block;border:0.5px solid rgb(255, 255, 255);cursor:pointer;border-radius:6px;margin-left:10px;} #Heku_Form .input-container{position:relative;} #Heku_Form .input-container .input{width:100%;outline:none;height:42px;border: 1px solid #fafafa;box-shadow: 0px 0px 4px rgba(29, 70, 148, 0.7);text-shadow: 0px 1px 2px rgba(75, 75, 75, 0.25);padding:0.6rem 1.2rem;color:rgb(29, 70, 148);font-weight:500;font-size:0.95rem;letter-spacing:0.5px;border-radius:5px;transition:0.3s;} #Heku_Form .input-container textarea.input{padding:0.8rem 1.2rem;min-height:150px;border-radius:5px;resize:none;overflow-y:auto;} #Heku_Form .input-container label{position:absolute;top:20px;left:15px;transform:translateY(-50%);padding:2px 0.8rem 1px 0.6rem;color:rgb(29, 70, 148);font-size:0.9rem;font-weight:400;pointer-events:none;z-index:1000;transition:0.5s;} #Heku_Form .input-container .textarea-label{top:0.6rem;transform:translateY(0);} #Heku_Form .input-container span.label{position:absolute;top:-1px;left:25px;transform:translateY(-50%);font-size:0.8rem;padding:2px 0.8rem 1px 0.6rem;color:transparent;pointer-events:none;z-index:500;text-shadow: none;} #Heku_Form .input-container span.label:before, #Heku_Form .input-container span.label:after{content:"";position:absolute;width:10%;opacity:0;transition:0.3s;height:8px;background-color:rgba(255, 255, 255, 0.851);top:50%;transform:translateY(-50%);} #Heku_Form .input-container span.label:before{left:50%;} #Heku_Form .input-container span.label:after{right:50%;} #Heku_Form .input-container .icon{position:absolute;right: 18px;font-size:20px;opacity: .7;top: 6px;color: rgb(29, 70, 148);} #Heku_Form .input-container.focus label{top:0px;transform:translateY(-50%);left:25px;font-size:0.8rem;color:rgb(29, 70, 148);background: #f9faf8;border-radius:3px;} #Heku_Form .input-container.focus span:before, #Heku_Form .input-container.focus span:after{width:50%;opacity:1;} #Heku_Form .input-container.focus .icon{opacity: .86} #Heku_Form .input-container .input:focus, #Heku_Form .input-container .input:hover{background-color:rgba(255, 255, 255, 0.851);border-color:rgb(29, 70, 148);outline:0;box-shadow:0px 0px 4px rgb(29, 70, 148);} #Heku_Form.was-validated #from_name.input-vali.form-control:invalid, #Heku_Form.was-validated #from_name.input-vali.form-control:valid{background-position:right calc(.375em + 1.8rem) center;} #Heku_Form.was-validated .input-vali.form-control:invalid, #Heku_Form.was-validated .input-vali.form-control:valid{background-position:right calc(.375em + 2rem) center;} #Heku_Form .invalid-feedback{text-shadow:1px 1px 2px white;} #Heku_Form .input-val.input{height:40px;} /* ---1) heku-color 模板颜色管理 ------------- */ #Heku_Form .heku-btn{box-shadow:0px 0px 4px rgba(215, 16, 36,0.7);text-shadow:0px 1px 2px rgba(75,75,75,0.25);background:rgba(215, 16, 36,0.76);border-radius:30px;color:#fafafa;} #Heku_Form .heku-btn:hover,.heku-btn:focus{outline:0;background:#fbfbfb;color:rgb(215, 16, 36);border-color:rgb(215, 16, 36);text-shadow:0.5px 0.5px 0.5px rgb(255 255 255);font-weight:bold;} #Heku_Form a,#Heku_Form{color:rgb(215, 16, 36);} #Heku_Form .contact-box{background:rgba(255,255,255,0.851);box-shadow:0 0 20px 1px rgba(0, 0, 0, 0.1);} #Heku_Form .input-container .input{border-color:rgb(250,250,250);box-shadow:0px 0px 4px rgba(215, 16, 36, 0.7);} #Heku_Form .input-container .input,#Heku_Form .title,#Heku_Form .contact-info .title,#Heku_Form .contact-info .info li:hover,#Heku_Form .contact-info .info li:hover a,#Heku_Form .contact-info .info li .icon,#Heku_Form .input-container label,#Heku_Form .input-container .icon,#Heku_Form .input-container.focus label{color:rgb(215, 16, 36);} #Heku_Form .input-container .input:focus,#Heku_Form .input-container .input:hover,#Heku_Form .contact-info:before{border-color:rgb(215, 16, 36);} #Heku_Form .input-container .input{border-color:rgb(250,250,250);box-shadow:0px 0px 4px rgba(215, 16, 36, 0.7);} #Heku_Form .input-container span.label:before,#Heku_Form .input-container span.label:after{background:rgba(255,255,255,0.85);} #Heku_Form .input-container .input:focus,#Heku_Form .input-container .input:hover{background:rgba(255,255,255,0.85);border-color:rgb(215, 16, 36);box-shadow:0px 0px 4px rgba(215, 16, 36, 0.725);} /* ---------------------------------------------------- 25.1 ) end #Heku_Form 表单 模板：TempParts/From/contact-from 文件：TempParts/From/contact-from-1.php ------------------------------------------------------- */ /* ---------------------------------------------------- 25.2 ) start #Heku_Form 表单 模板：TempParts/From/model-from 文件：TempParts/From/heku-model-from-1.php ------------------------------------------------------- */ #Heku_Form_Model a,#Heku_Form_Model{color:rgb(215, 16, 36);} #Heku_Form_Model .modal-content{border:0px solid rgba(0, 0, 0, 0.2);border-radius:.6rem;background:#dddddd73;box-shadow:2px 5px 15px rgba(0, 0, 0, 0.8)} #Heku_Form_Model .modal-content{background:rgba(246, 255, 243, 0.74);} #Heku_Form_Model .modal-header{padding:0.6rem 1rem;} #Heku_Form_Model .modal-header .form-logo{width:120px;} #Heku_Form_Model .modal-header button:focus{outline:0px auto #fff;} #Heku_Form_Model .form-control{box-shadow:0px 0px 6px rgb(40, 40, 40);background-color:rgba(255, 255, 255, 0.85)} #Heku_Form_Model .modal-body{padding: 0.5rem 1.5rem;} #Heku_Form_Model .canvasreset{line-height:40px;display:inline-block;position:absolute;padding-left:8px;color:rgb(52, 136, 73);} #Heku_Form_Model #canvas{background:#ddd;display:inline-block;border:0.5px solid #fff;cursor:pointer;border-radius:6px;margin-left:10px;} /* ---------------------------------------------------- 25.2 ) end #Heku_Form 表单 模板：TempParts/From/model-from 文件：TempParts/From/heku-model-from-1.php ------------------------------------------------------- */ /* ---------------------------------------------------- 26 ) start #page_faq_line FAQ 模板：TempParts/page-faq.php 文件：TempParts/page-faq-1.php ------------------------------------------------------- */ #page_faq_line #faq_accordion .faq-item{border:0px solid #f6f6f8;border-radius:8px;box-shadow:0 0 10px 1px rgba(0,0,0,.1);margin-bottom:1rem;} #page_faq_line .faq .faq-title{font-size:1.05rem;line-height:1.1rem;color:#0758a8;font-weight:700;align-items:center;position:relative;padding: 1.2rem 4.5rem 1.3rem 4rem;} #page_faq_line .faq .faq-title:not(.collapsed)::after{transform:rotate(-360deg);} #page_faq_line .faq .faq-title::after{content:'';position:absolute;top:50%;margin-top:-3px;left:1.25rem;width:22px;height:3px;border-radius:3px;background-color:#0758a8;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;opacity:1;transition:transform 0.2s ease-in-out;box-shadow: 0 0 10px 1px rgba(0, 0, 0, .1);} #page_faq_line .faq .faq-title.collapsed::before{content:'';position:absolute;top:50%;margin-top:-3px;left:1.25rem;width:22px;height:3px;border-radius:3px;background-color:#0758a8;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:0.3s;-o-transition:0.3s;transition:0.3s;opacity:1;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);box-shadow: 0 0 10px 1px rgba(0, 0, 0, .1)} #page_faq_line .faq .faq-body{padding:0.4rem 2rem 1.3rem 2rem;font-size:0.9rem;line-height:1.4rem;} #page_faq_line .faq .faq-body p{margin-bottom:0.8rem;} #page_faq_line .faq .faq-body .hekutitle01{font-size: 1rem;} /* ---------------------------------------------------- 26 ) end #page_faq_line FAQ 模板：TempParts/page-faq.php 文件：TempParts/page-faq-1.php ------------------------------------------------------- */ /* ---------------------------------------------------- 50 ) start #Archive Product 分类页 ，集合页 相关 CSS 样式 模板：archive-product 文件：archive-product.php ------------------------------------------------------- */ .product-box-1 .product-item{padding:0 10px 25px 10px;} .product-box-1 .product-item-box{border:1px solid #f6f6f8;width:100%;border-bottom:0px;position:relative;background-color:#fff;box-shadow:0 3px 40px rgba(36,36,36,.1);float:left;border-radius:8px;overflow:hidden;transition:.3s ease;position:relative;} .product-box-1 .product-item-box .product-img{width:100%;overflow:hidden;} .product-box-1 .product-item-box .product-img img{width:100%;} .product-box-1 .product-item-box .product-content .content-title .t-model{font-size:2rem;font-weight:bolder;color:rgb(29 70 148);} .product-box-1 .product-item-box .product-content .content-title .t-title{line-height:4rem;/* height:4rem; */overflow:hidden;position:relative;color:rgb(29 70 148);/* font-weight:bold; */} .product-box-1 .product-item-box .product-content .content-title .t-title p{font-size:1.5rem;line-height:2rem;} .product-box-1 .product-item-box .product-content .content-title:hover .t-title{color:#0758a8;} .product-box-1 .product-item-box .product-content .content-title .t-title::after{content:"";width:4rem;height:3px;background-color:rgb(215, 16, 36);position:absolute;left:0;bottom:0;transition:1s;border-radius:5px;} .product-box-1 .product-item-box .product-content .content-title:hover .t-title::after{width:12rem;background-color:rgb(215, 16, 36);} .product-box-1 .product-item-box .product-content .content-title .t-title span{font-size: 1.5rem;line-height:2rem;/* display:inline-block;vertical-align:middle; */} .product-box-1 .product-item-box .product-content .content-msg{text-align:left;font-size: 0.92rem;line-height: 1.5rem;height: 6rem;color: rgb(67 67 67);margin-top: 5px;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp: 4;-webkit-box-orient:vertical;} .product-box-1 .product-item-box .product-content .content-texts{display:flex;margin-top:0.8rem;padding-top:0.5rem;border-top:1px dashed rgb(29 70 148);} .product-box-1 .product-item-box .product-content .content-texts .text-li{display:flex;font-size:16px;line-height:32px;color: rgb(51 79 134);font-weight: 500;padding-left: 6px;} .product-box-1 .product-item-box .product-content .content-texts .text-li .t2{color:#000000;margin-left: 30px;} /* .product-box-1 .product-item-box .product-content .content-texts .text-li:nth-child(1){margin-right:40px;} */ .menu-title{position:relative;} .menu-texts{display:flex;margin-top:0.8rem;padding-top:0.5rem;border-top:1px dashed rgb(29 70 148);} .sub-menu-0 li.depth-1:hover .menu-title::after{width:8rem;} .product-box-1 .product-item-box .from-contact-svg{fill: rgb(51 79 134);width: 16px;height: 16px;margin-left: 4px;margin-bottom: 2px;} .product-box-1 .product-item-box .heku-btn{/* line-height: 30px; */font-size: 0.95rem;transition: transform 0.5s ease;border-color:rgba(255,255,255,0.986);color: rgb(51 79 134);/* background:rgb(51 79 134); */border:none;padding: 2px 15px 3px 15px;text-shadow:0.5px 0.5px 0.5px rgb(199 196 196);box-shadow:0px 0px 4px rgba(0,0,0,.6);-moz-box-shadow:0px 0px 7px rgba(0,0,0,.6);-webkit-box-shadow:0px 0px 4px rgba(0,0,0,.6);} .product-box-1 .product-item-box .heku-btn:hover{transform: scale(1.1);background: rgb(51 79 134);color: #fff;} .product-box-1 .product-item-box .heku-btn:hover .from-contact-svg{fill: #fff;} .product-box-1 .product-item-box .model_from-content{z-index:2;position:relative;} .product-box-1 .product-item-box .product-content .b{line-height:34px;} .product-box-1 .product-item-box .product-content .b .brand{color:rgb(94, 91, 91);font-weight:bold;letter-spacing:1px;} .product-box-1 .product-item-box:hover .product-content .b .brand{color:var(--color_main);} .product-box-1 .product-item-box .product-content .c{line-height:22px;font-size:14px;color:rgb(131, 130, 130);} .product-box-1 .product-item-box .product-content .c li{padding: 4px 0;} .product-box-1 .product-item-box .product-content .c table{width:100%;margin:0px auto;border-spacing:0;border-collapse:unset !important;max-width:100%;border-radius:var(--radius_big);} .product-box-1 .product-item-box .product-content .c table th{line-height:25px;} .product-box-1 .product-item-box .product-content .c table td{line-height:28px;border:1px solid rgb(255, 255, 255);padding:0px 0px;color:rgb(131, 130, 130);font-weight:lighter;font-size:12px;} .product-box-1 .product-item-box:hover .product-content .c table td{color:var(--color_main);font-weight:400;} .product-box-1 .product-item-box .product-content .c span{font-size:12px;line-height:18px;color:rgb(147, 147, 147);display:inline-block;vertical-align:middle;font-weight:lighter;} .product-box-1 .product-item-box .product-readmore{font-size:14px;} .product-box-1 .product-item-box .product-time{font-size:14px;} .product-box-1 .product-item-box .product-readmore .icon{font-size:10px;} .product-box-1 .product-item-box .li-line{width:0;height:3px;background:var(--color_main);position:absolute;left:0;bottom:0;transition:all 0.5s ease;} .product-box-1 .product-item-box:hover{box-shadow:1px 2px 15px 0px rgba(0,0,0,0.6);} .product-box-1 .product-item-box:hover .product-content .c{color:var(--color_main);font-size: 16px;} .product-box-1 .product-item-box:hover .product-content .t span{color:var(--color_main);font-weight: bold;} .product-box-1 .product-item-box:hover .product-content .c span{color:var(--color_main);} .product-box-1 .product-item-box:hover .product-content .product-readmore{font-weight:bold;} .product-box-1 .product-item-box:hover .product-content .product-time{font-weight:bold;} .product-box-1 .product-item-box:hover .li-line{width:100%;} /* ---52.2 ) heku-color 模板颜色管理 ------------- */ /* ---------------------------------------------------- 50 ) end #Archive Product 分类页 ，集合页 相关 CSS 样式 模板：archive-product 文件：archive-product.php ------------------------------------------------------- */ /* ---------------------------------------------------- 52 ) start #Archive 分页 #page_bar 分类页 Css ------------------------------------------------------- */ #page_bar a{font-size: 18px;padding: 1px 10px;margin: 0px 6px;} #page_bar .page_arr_center a{border-radius:50% 50%;} #page_bar .pages-row{line-height:30px;text-align: center;} /* ---52.2 ) heku-color 模板颜色管理 ------------- */ #page_bar .pages-row .pointernone{pointer-events:none;color:rgb(221, 221, 221);} #page_bar .pages-row .pointernone b{background-color:rgb(221, 221, 221); } #page_bar a{color: rgb(50, 50, 50);} #page_bar .page_arr_left a:hover, #page_bar .page_arr_right a:hover{color:rgb(52, 136, 73);} #page_bar .page_arr_center a.current, #page_bar .page_arr_center a:hover{background: rgb(52, 136, 73);color:rgb(255, 255, 255);} /* ---------------------------------------------------- 52 ) end #Archive 分页 #page_bar 分类页 Css ------------------------------------------------------- */ /* ---------------------------------------------------- 55 ) start #Archive News 新闻 分类页 ，集合页 相关 CSS 新闻分类 模板：archive-news 文件：archive-news.php ------------------------------------------------------- */ .news-box-1 .news-item-box{border:1px solid rgb(246, 246, 248);border-bottom:0px;position:relative;background-color:rgb(255, 255, 255);box-shadow:0 3px 40px rgba(36,36,36,.1);float:left;margin-bottom:30px;border-radius:8px;overflow:hidden;transition:.3s ease;position:relative;} .news-box-1 .news-item-box .news-img{width:100%;height:auto;aspect-ratio:3/2;overflow:hidden;} .news-box-1 .news-item-box .news-img img{width:100%;} .news-box-1 .news-item-box .news-content{padding:15px 14px 12px 18px;} .news-box-1 .news-item-box .news-content .t{line-height:78px;height:78px;overflow:hidden;} .news-box-1 .news-item-box .news-content .t span{font-size:18px;line-height:26px;display:inline-block;vertical-align:middle;} .news-box-1 .news-item-box .news-content .c{line-height:72px;height:72px;overflow:hidden;} .news-box-1 .news-item-box .news-content .c span{font-size:12px;line-height:18px;color:rgb(147, 147, 147);display:inline-block;vertical-align:middle;font-weight:lighter;} .news-box-1 .news-item-box .news-readmore{font-size:14px;} .news-box-1 .news-item-box .news-time{font-size:14px;} .news-box-1 .news-item-box .news-readmore .icon{font-size:10px;} .news-box-1 .news-item-box .li-line{width:0;height:3px;background:var(--color_eye);position:absolute;left:0;bottom:0;transition:all 0.5s ease;} .news-box-1 .news-item-box:hover{box-shadow:1px 2px 15px 0px rgba(0,0,0,0.6);} .news-box-1 .news-item-box:hover .news-content .t span{color:var(--color_subs);} .news-box-1 .news-item-box:hover .news-content .c span{color:var(--color_eye);} .news-box-1 .news-item-box:hover .li-line{width:100%;} .news—item-ul_1 .news-item{box-shadow: 0px 2px 5px rgba(0,0,0,0.26);background: rgb(247, 247, 247);border-radius: 8px;margin: 0px 0px 25px 0px;position: relative;} .news—item-ul_1 .news-item .news-img{width: 100%;border-radius: 6px;overflow: hidden;} .news—item-ul_1 .news-item .news-time{right: 10px;position: absolute;} .news—item-ul_1 .news-item .news-tit a{font-size: 24px;color: #000000;line-height: 60px;height: 76px;overflow: hidden;font-weight: 600;letter-spacing: 1px;} .news—item-ul_1 .news-item .news-tit a span{display: inline-block;vertical-align: middle;line-height: 38px;} .news—item-ul_1 .news-item .news-summary span{color: rgb(137, 139, 142);} .news—item-ul_1 .news-item .news-time-d{font-size: 50px;line-height: 50px;font-weight: bolder;} .news—item-ul_1 .news-item:hover .news-tit a span{color: rgb(35, 91, 184);} .news—item-ul_1 .news-item:hover .heku-btn{color: #ffffff;border: 0px solid #ffffff;background: rgb(35, 91, 184);} .news—item-ul_1 .news-item .heku-btn .icon{font-size: 12px;} .news—item-ul_1 .news-item:hover .news-time{color: rgb(35, 91, 184);} .news—item-ul_1 .news-item .news-comt{padding-left: 40px;} .news—item-ul_1 .news-item:hover{background: rgb(221, 221, 221);} /* --- 1) 小于780尺寸 --- sm --- */ @media only screen and (max-width: 768px){ .news-item .news-tit a{font-size: 18px;height: 64px;} .news-item .news-tit a span{line-height: 24px;color: rgb(35, 91, 184);} .news-item .news-summary span{font-size: 14px;} .news-item .news-comt{padding-left: 0px;} } /* --- 0) 手机 --- mobile --- */ @media (max-width: 576px){ .news-item .news-tit a{font-size: 18px;height: 48px;} .news-item .news-tit a span{line-height: 24px;color: rgb(35, 91, 184);} .news-item .news-summary span{font-size: 14px;} .news-item .news-comt{padding-left: 0px;} } /* --- 2) 大于768px尺寸 --- md --- */ @media(min-width:768px){ .news-item .news-tit a{font-size: 18px;height: 64px;} .news-item .news-tit a span{line-height: 32px;} .news-item .news-comt{padding-left: 30px;} } /* --- 3) 大于992px尺寸 --- lg --- */ @media(min-width:992px){ .news-item .news-tit a{font-size: 20px;height: 64px;} .news-item .news-tit a span{line-height: 32px;} .news-item .news-comt{padding-left: 30px;} } /* --- 4) 大于1200尺寸时候使用 --- xl --- */ @media(min-width:1200px){ .news-item .news-tit a{font-size: 24px;height: 76px;} .news-item .news-tit a span{line-height: 38px;} .news-item .news-comt{padding-left: 40px;} } /* ---------------------------------------------------- 55 ) end #archive News 新闻 分类页 ，集合页 相关 CSS 新闻分类 模板：archive-news 文件：archive-news.php -------------------------------------------------------*/ /* ---------------------------------------------------- 60 ) .single-info 详情单页 分栏布局，内容详情 Css ---------------------------------------------------- */ .single-title{font-size:24px;color:var(--forecolor);text-shadow:var(--text_shadow);line-height:1.5em;text-align:left;} .single-meta-row{border-bottom:1px solid rgb(202, 202, 207);text-align:left;} .single-meta-row li{font-weight:400;opacity:0.7;list-style:none;display:inline-block;line-height:25px;} .single-meta-row li .icon{padding:0 6px 0 0px} .single-meta-row li:hover{color:var(--color_eye);opacity:1;} .single-meta-row .single-meta-box{display:inline-block;padding-inline-start: 10px;margin-block-start: 0em;margin-block-end: 0em;} .single-meta-row .single-meta-box li{padding:0 10px 0 0px;} .single-meta-row .single-tags-box{display:inline-block;} .single-meta-row .single-tags-box li{list-style:none;display:inline-block;margin-right:10px;} .single-info{position:relative;margin-bottom:24px;padding:20px 25px;} .single-info p{line-height:24px;font-size:15px;padding:0px 5px 10px 5px;color:var(--forecolor);text-shadow:var(--text_shadow);} .single-info img{max-width:100%;display:inline-block;max-width:100% !important;height:auto;cursor:-webkit-zoom-in;cursor:zoom-in;margin:5px 0;border-radius:var(--radius-img);-webkit-transition:-webkit-transform 0.35s,-webkit-box-shadow 0.35s;transition:transform 0.35s,box-shadow 0.35s;transition:transform 0.35s,box-shadow 0.35s,-webkit-transform 0.35s,-webkit-box-shadow 0.35s;} .single-info img:hover{-webkit-transform:translateY(-5px);transform:translateY(-5px);-webkit-box-shadow:0 34px 20px -24px rgba(136,161,206,0.3);box-shadow:0 34px 20px -24px rgba(136,161,206,0.3);} .single-info .hekutitle01{margin:8px 0 10px;font-weight:500;line-height:30px;font-size:20px;} .single-info .hekutitle01{color:var(--forecolor);text-shadow:var(--text_shadow);} .single-info .hekutitle01::before{position:relative;display:inline-block;vertical-align:middle;content:" ";margin-right:8px;background-position:center;background-repeat:none;top:-2px;left:0;width:20px;height:20px;background-size:auto 100%;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDM1MiwgMjAyMC8wMS8zMC0xNTo1MDozOCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVENEZBRTBCNTYyNzExRUZCMDNERTIwQTA1RUE4MERBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjVENEZBRTBDNTYyNzExRUZCMDNERTIwQTA1RUE4MERBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NUQ0RkFFMDk1NjI3MTFFRkIwM0RFMjBBMDVFQTgwREEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NUQ0RkFFMEE1NjI3MTFFRkIwM0RFMjBBMDVFQTgwREEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz77QgEAAAABHklEQVR42mL8//8/A7GAkZERhZ93ZKIBEyOD/9//v30YGZh1jrzdcQIobHDWb4cgsWayMJAJ8o9MKAC6px/EZmZkhTnQgVRzWMi0fAPQMn8GKgAm8nxOHctJDgFQnMOCnVqApBAAJrgABioDUqPAYUAdAMyyBgPqAGDi4x/oKGAYdcCoA0YdMOqAUQeMOmDUAYPWAX/+/4Y1Wj4OiAO+/v0MY14YEAd8/P0O0mpiYDxA844JtuB/8f0JJPiZGDbQPQQefrvD8PP/d5D3G8757qRvFLz5+YLh2Y8HIN9vPOe3cwLdcgEo2O9+vc5w7fO5j/8Z/hee899JVqeFpDQAimNg0/zCo293LV7+eHLhx79vO4BeWAAM9gfkegQgwADFAmnjrHSVjAAAAABJRU5ErkJggg==");} .single-info ul{margin-block-start:1em;margin-block-end:1em;padding-inline-start:40px} .hekutitle01{margin:8px 0 10px;font-weight:500;line-height:30px;font-size:20px;} .hekutitle01{color:var(--forecolor);text-shadow:var(--text_shadow);} .hekutitle01::before {position:relative;display:inline-block;vertical-align:middle;content:" ";margin-right:8px;background-position:center;background-repeat:none;top:-1px;left:0;width:10px;height:20px;background-repeat: no-repeat;background-size:auto 100%;background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDM1MiwgMjAyMC8wMS8zMC0xNTo1MDozOCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDI0RkZERDhGQTk0MTFGMDhEMzFEMTM3MkM3MEMxREMiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDI0RkZERDdGQTk0MTFGMDhEMzFEMTM3MkM3MEMxREMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NUQ0RkFFMEI1NjI3MTFFRkIwM0RFMjBBMDVFQTgwREEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NUQ0RkFFMEM1NjI3MTFFRkIwM0RFMjBBMDVFQTgwREEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6Pc241AAABEUlEQVR42mL8//8/A7GAkZERhZ8QedOAiYnR/+/f/z5AKZ1LF++fAAobnL3qLkismSwMZAKg5QVAy/tBbGZmRqgDmRxINYeFTMs3gHzOQAXARKbPqWI5yQ6Axnk/AxUBSQ4AWh7AQGVAahQ4DKgD/v37bzCgDgBGAf9ARwHDqANGHTDqgFEHjDpg1AGjDhi0Dvj9G9K/+P//38cBccC3r39hzAsD4oCPH//COicH6O4AUPB/+PAWFvwb6O6Ah/d/AC3/BWI2nL3qRt8oePP6N8PXby9Bvt947prHBLr0DWHBDvL5l6/PQcHeQI7lJDsA2C/4CGyaX3hw/4fF588fLvz792MHMNEtAAb7A3I9AhBgAK90aGf5fNgRAAAAAElFTkSuQmCC");} .entry-content{position:relative;} .entry-content p{line-height: 22px;font-size: 16px;padding: 6px 5px 6px 5px;/* color:var(--forecolor); *//* text-shadow:var(--text_shadow); */} .entry-content img{border-radius: 10px;max-width:100%;display:inline-block;max-width:100% !important;height:auto;cursor:-webkit-zoom-in;cursor:zoom-in;margin:5px 0;-webkit-transition:-webkit-transform 0.35s,-webkit-box-shadow 0.35s;transition:transform 0.35s,box-shadow 0.35s;transition:transform 0.35s,box-shadow 0.35s,-webkit-transform 0.35s,-webkit-box-shadow 0.35s;} .entry-content img:hover{-webkit-transform:translateY(-5px);transform:translateY(-5px);-webkit-box-shadow:0 34px 20px -24px rgba(136,161,206,0.3);box-shadow:0 34px 20px -24px rgba(136,161,206,0.3);} .entry-content img{max-width:100% !important;} .entry-content img.aligncenter{display:block;margin-left:auto;margin-right:auto;} .entry-content .single-tags-box li{list-style:none;display:inline-block;font-size:15px;border-radius:20px;-webkit-box-shadow:1px 1px 4px 1px rgb(75 75 75 / 20%);box-shadow:1px 1px 4px 1px rgb(75 75 75 / 20%);padding:3px 12px 3px 12px;font-weight:500;margin-right:10px;} .entry-content .single-tags-box li .icon{padding:0px 6px 0px 0px;font-size:13px;} .entry-content .single-tags-box li:hover{background:rgb(207, 203, 203);color:rgb(255, 255, 255);} .entry-content .single-tags-box li:hover a{color:rgb(255, 255, 255);} .entry-content table{margin-bottom:0px;border-spacing:0;border-collapse:unset !important;max-width:100%;width:100%;background:var(--background_translucent_3);border-radius:var(--radius_big);} .entry-content table th{border: 0px;line-height: 40px;text-align: center;padding: 0px 0px;border-bottom: 1px solid rgb(0 0 0);box-shadow: 0px 3px 0px 0px rgba(75, 75, 75, 0.21);} .entry-content table td{text-align:center;line-height: 38px;font-weight: 500;border:0px solid rgb(255, 255, 255);padding:0px 0px;border-bottom: 1px solid rgb(0 0 0);box-shadow: 0px 2px 0px 0px rgba(75, 75, 75, 0.21);} /* .entry-content table tr:first-child td:first-child{border-top-left-radius:6px;} .entry-content table tr:first-child td:last-child{border-top-right-radius:6px;} */ .entry-content table tr:nth-child(2n+1){background:var(--background_translucent);} .entry-content table p{padding: 5px 0px 5px 0px;} .entry-content table{box-shadow:0px 2px 2px 0px rgba(75,75,75,0.21);} /* ---------------------------------------------------- 60 ) #news_pre_next news-pre news-next 下一页，上一页 Css样式 ------------------------------------------------------- */ /* ---------------------------------------------------- 62 ) start Product Single 单页 #Carousel_Product_Img ------------------------------------------------------- */ .product-img-left{max-width: 480px;} #Carousel_Product_Img,#Carousel_Product_Img .product-img-inner,#Carousel_Product_Img .product-img-inner img{width:450px;} .product-img-video .vjs-poster{pointer-events: none;} #Carousel_Product_Img .product-img-indicators{float:left;position:relative;margin: 8px 0px;padding: 0 20px;} #Carousel_Product_Img .carousel-indicators li:first-child{margin-top:0px;} #Carousel_Product_Img .carousel-indicators li:last-child{margin-bottom:0px;} #Carousel_Product_Img .carousel-control-next,#Carousel_Product_Img .carousel-control-prev{width:500px;} #Carousel_Product_Img .product-img-indicators li{display:inline-block;margin:0px 3px;width:85px;height:85px;padding:0px;cursor:pointer;border:1px solid rgb(221, 221, 221)} #Carousel_Product_Img .product-img-indicators li.active{border:2px solid rgb(0, 122, 255);box-shadow:0 0 4px rgba(0, 122, 255, 0.5);} #Carousel_Product_Img .product-img-video{visibility:visible;position:absolute;width:100%;height:100%;display:block;-webkit-transition:display .3s;transition:display .3s;} #Carousel_Product_Img .product-img-video video,#Carousel_Product_Img .product-img-video .video-js{width:100%;height:100%;} #Carousel_Product_Img .carousel-item{width:100%;height:100%;} #Carousel_Product_Img .carousel-control-next,#Carousel_Product_Img .carousel-control-prev{top: inherit;padding: 25px 6px;bottom:-82px;z-index:99;width:10px;background:rgb(166, 153, 153);border-radius: 2px;} #Carousel_Product_Img .carousel-control-next-icon,#Carousel_Product_Img .carousel-control-prev-icon{width: 15px;height:15px;} .product-summary-right{float:right;width:525px;margin-left: 20px;} .product-summary-title{overflow:hidden;line-height:4.2rem;font-size:2rem;font-weight:500;color: rgb(20 50 110);} .product-summary-model{font-size:24px;line-height:48px;color:rgb(35, 91, 184);} .product-summary-detail{overflow:hidden;padding:10px 0;border-top:1px dashed rgb(29 70 148);border-bottom:1px dashed rgb(29 70 148);} .product-summary-detail .b{line-height: 34px;} .product-summary-detail .b span{font-size:16px;} .product-summary-detail .b .brand{color:rgb(94, 91, 91);font-weight:bold;font-size:18px;letter-spacing:1px;} .product-summary-detail .b:hover .brand{color: var(--color_main);} .product-summary-detail li{padding:10px 0;border-bottom:1px dashed rgba(147, 224, 168, 0.6);align-items:center;list-style:inside;color: rgb(149, 149, 149);} .product-summary-detail li:hover{color: var(--color_main);} .product-summary-detail table{width:100%;border-spacing:0;border-collapse:unset !important;max-width:100%;border-radius:0px;overflow:hidden;} .product-summary-detail table th{line-height:28px;} .product-summary-detail table td{line-height:40px;padding-left:15px;font-weight:500;font-size:16px;color:#2a2929;text-align:left;border-bottom:1px solid rgb(194 190 190);box-shadow:0px 1px 0px 0px rgba(75,75,75,0.21);} .product-summary-detail table tr:hover td{color: var(--color_main);} .product-summary-detail table tr td:first-child{border-right: 2px solid rgb(255 255 255);} .v-shadow img{border-radius:10px 10px 10px 10px;box-shadow:0px 0px 7px rgba(0,0,0,.6);-moz-box-shadow:0px 0px 7px rgba(0,0,0,.6);-webkit-box-shadow:0px 0px 7px rgba(0,0,0,.6);} .product-summary-btn{padding: 12px 6px;} .product-summary-btn .heku-btn{font-size:1rem;transition:transform 0.5s ease;line-height:2rem;border-color:rgba(255,255,255,0.986);color:rgb(51 79 134);border: 0;border-radius:40px;padding:2px 25px 3px 25px;text-shadow:0.5px 0.5px 0.5px rgb(199 196 196);box-shadow:0px 0px 4px rgba(0,0,0,.6);-moz-box-shadow:0px 0px 7px rgba(0,0,0,.6);-webkit-box-shadow:0px 0px 4px rgba(0,0,0,.6);} .product-summary-btn .heku-btn:hover{transform: scale(1.1);background: rgb(51 79 134);color: #fff;} .product-summary-btn .heku-btn:hover .from-contact-svg{fill: #fff;} .product-summary-btn .heku-btn .from-contact-svg{width: 1.2rem;height: 1.2rem;vertical-align: middle;margin-left: 0.3rem;fill: rgb(51 79 134);margin-right: 0.3rem;} .parts-item-box{background-color:#eef4f8;border:10px solid #eef4f8;border-radius:6px;box-shadow:0px 2px 5px rgba(0,0,0,.3);-moz-box-shadow:0px 2px 5px rgba(0,0,0,.3);-webkit-box-shadow:0px 2px 5px rgba(0,0,0,.3);} .parts-content table{width:100%;border-spacing:0;border-collapse:unset !important;max-width:100%;overflow:hidden;box-shadow:0px 1px 2px rgba(0,0,0,.1);-moz-box-shadow:0px 1px 2px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px rgba(0,0,0,.1);-webkit-box-shadow:0px 1px 2px rgba(0,0,0,.1);margin-bottom:0.3rem;} .parts-title{text-align:center;margin-bottom:.5rem;font-weight:500;font-size:1.45rem;width:100%;} .parts-content table th{line-height:28px;} .parts-content table td{line-height:32px;padding:0;padding-left:8px;font-weight:400;font-size:14px;color:#4e4e4e;text-align:left;border-bottom:1px solid rgb(230 221 221);box-shadow:0px 1px 0px 0px rgba(75,75,75,0.21);} .parts-content table tr:hover td{color:var(--color_main);} .parts-content table tr td:first-child{border-right:1px solid rgb(255 255 255);} .parts-content table tr:nth-child(2n+1){background:var(--background_translucent);} .single_right_table .a{font-size:1.2rem;background:rgb(29,70,148);padding:5px 12px;color:rgb(255,255,255);border-top-left-radius:8px;border-top-right-radius:8px;} .single_right_table .c .tit p{font-size:1.4rem;background:#1d4694;padding:0px 5px 0px 12px;line-height:3rem;color:#fff;} .single_right_table .c table{ border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; border-top-left-radius: 0px; border-top-right-radius: 0px; overflow: hidden; } .single_right_table{ border-radius: 10px 10px 10px 10px; box-shadow: 0px 0px 7px rgba(0, 0, 0, .6); -moz-box-shadow: 0px 0px 7px rgba(0, 0, 0, .6); -webkit-box-shadow: 0px 0px 7px rgba(0, 0, 0, .6);} /* ---------------------------------------------------- 62 ) end Product Single 单页 #Carousel_Product_Img ------------------------------------------------------- */ /* ---------------------------------------------------- 65 ) start News Single 单页 #Carousel_Product_Img ------------------------------------------------------- */ /* ---------------------------------------------------- 65 ) end News Single 单页 #Carousel_Product_Img ------------------------------------------------------- */ /* ---------------------------------------------------- 70 ) start Footer #Heku_footer_001 ------------------------------------------------------- */ #heku_footer_001 .responsive-svg{vertical-align: middle;height: 79px;width: 1920px;} #heku_footer_001 .footer-column .title h1{font-size:1.7rem;padding:0.8rem 0;} #heku_footer_001 .footer-column .title .closesvg{display:none;vertical-align:middle;} #heku_footer_001 .footer-column .title .opensvg{display:none;vertical-align:middle;} #heku_footer_001 .footer-column .border-box li{list-style:none;margin-bottom:0.8rem;padding:0 0 0.3rem 1.4rem;position:relative;} #heku_footer_001 .footer-column .border-box li:after{position:absolute;width:0.4rem;height:0.4rem;border-radius:50px;content:"";left:0;top:30%;} #heku_footer_001 .footer-column .border-box li:last-child{margin-bottom:0;border-bottom:none;} #heku_footer_001 .footer-column-logo .des{font-size: 0.95rem;} #heku_footer_001 .footer-column-logo .social-box{margin-top:0.8rem;display:flex;flex-direction:row;justify-content:flex-start;} #heku_footer_001 .footer-column-logo .social-box a{display:inline-block;vertical-align:middle;margin-right:0.8rem;margin-bottom:0;} #heku_footer_001 .footer-column-logo .social-box a:last-child{margin-right:0;} #heku_footer_001 .footer-column-logo .social-box a svg{width:1.2rem;height:1.2rem;} #heku_footer_001 .footer-column-logo .social-box a:hover{transform: scale(1.5);} #heku_footer_001 .footer-column-contact li svg{margin-right: 0.4rem;margin-bottom: 0.2rem;width:1.2rem;height: 1.2rem;} #heku_footer_001 .footer-column-contact li{list-style:none;padding:0.3rem 0 0.3rem 0.1rem;position:relative;} @media only screen and (max-width:768px){ #heku_footer_001 .responsive-svg{width: 110%;height:auto;} } /* --- 70.1 ) heku-color 模板颜色管理 ------------- */ #heku_footer_001, #heku_footer_001 a, #heku_footer_001 p, #heku_footer_001 span{color: rgb(255, 255, 255);text-shadow: 0.5px 0.5px 2px rgb(0, 72, 105);overflow: hidden;} #heku_footer_001 .footer-column .title h1{border-bottom:1px solid rgb(255, 255, 255);text-shadow: 1px 1px 4px rgb(91, 125, 141);} #heku_footer_001 .responsive-svg #bolang_xiang{fill:rgb(51, 79, 134);} #heku_footer_001 .footer-line-one{background: rgb(51, 79, 134);} #heku_footer_001 .footer-column .border-box li:hover:after{background:rgb(140, 219, 255);} #heku_footer_001 .footer-column li a:hover, #heku_footer_001 .footer-column-contact li:hover span, #heku_footer_001 .footer-column-logo .social-box a:hover{color:rgb(140, 219, 255);} #heku_footer_001 .footer-column-logo .social-box a:hover svg, #heku_footer_001 .footer-column-contact li:hover svg{fill:rgb(140, 219, 255);} #heku_footer_001 .footer-column .border-box li{border-bottom:1px dashed rgb(221, 221, 221);} #heku_footer_001 .footer-column-contact li svg, #heku_footer_001 .footer-column-logo .social-box a svg{fill:rgb(255, 255, 255);} #heku_footer_001 .footer-column .border-box li:after{background:rgb(255, 255, 255);} #heku_footer_001 .bg-black{padding:0.8rem 0 0.4rem 0;background:#000;color:rgb(255, 255, 255);font-size:0.9rem;text-align:center;} /* ---------------------------------------------------- 70 ) end Footer #Heku_footer_001 ------------------------------------------------------- */ /* ---------------------------------------------------- 80 ) start Service Display 服务展示 #display_order_process ------------------------------------------------------- */ .display_order_process .display-title{max-width:450px;font-weight:bolder;font-size:32px;} .display_order_process .title-b{padding-left:12px;color:#1d4694;} .display_order_process .title-des{color: #777777;font-size: 1.12rem;} .display_order_process .a{font-size:28px;} .display_order_process .a{font-size:2rem;color: #1d4694;} .display_order_process .c{font-size:14px;font-weight:normal;line-height:1.6;margin-bottom:10px;text-align:justify;} .display_order_process .c p{margin-bottom:10px;} .display_order_process .title-border-left{margin:0px auto -4px 0px;} .display_order_process .title-border-center{margin:0px auto -4px 0px;} .display_order_process .title-border-langer{width:250px;border-bottom-width:2px;border-bottom-style:solid;border-color: rgb(29, 70, 148);} .display_order_process .title-border-short{content:" ";display:block;width:80px;border-bottom-width:7px;border-bottom-style:solid;border-color: #1d4694;} .display_order_process .step-btn{background:#1d4694;padding:8px 24px;width:125px;color:#fff;font-size:20px;border-radius:6px;font-weight:bolder;font-style:italic;box-shadow:0px 0px 7px rgba(0,0,0,.6);-moz-box-shadow:0px 0px 7px rgba(0,0,0,.6);-webkit-box-shadow:0px 0px 7px rgba(0,0,0,.6);} .display_order_process .solution-img img{width:100%;border-radius:6px;box-shadow:0px 0px 7px rgba(0,0,0,.6);-moz-box-shadow:0px 0px 7px rgba(0,0,0,.6);-webkit-box-shadow:0px 0px 7px rgba(0,0,0,.6);} /* ---------------------------------------------------- 80 ) end Service Display 服务展示 #display_order_process ------------------------------------------------------- */ .archive_last_display .archive_last-item .news-item-box{ background-color:#eef4f8; box-shadow:0 3px 40px rgba(36,36,36,.1); /* margin-bottom:30px; */ border-radius:8px; overflow:hidden; transition:.3s ease; position:relative; } /* .news-box-1 .news-item-box{border:1px solid rgb(246, 246, 248);border-bottom:0px;position:relative;background-color:rgb(255, 255, 255);box-shadow:0 3px 40px rgba(36,36,36,.1);float:left;margin-bottom:30px;border-radius:8px;overflow:hidden;transition:.3s ease;position:relative;} */ .archive_last_display .archive_last-item .news-img{width:100%;height:auto;aspect-ratio:3/2;overflow:hidden;} .archive_last_display .archive_last-item .news-img img{width:100%;} .archive_last_display .archive_last-item .news-content{padding:15px 14px 12px 18px;} .archive_last_display .archive_last-item .news-content .t{overflow:hidden;} .archive_last_display .archive_last-item .news-content .t span{font-size:18px;line-height:26px;display:inline-block;vertical-align:middle;} .archive_last_display .archive_last-item .news-content .t .t1{padding-bottom: 6px;font-size: 1.14rem;text-align: left;font-weight: 700;} .archive_last_display .archive_last-item .news-content .t .t2{font-size: 0.94rem; text-align: left;font-weight: 500;} .archive_last_display .archive_last-item .news-content .c{overflow:hidden;/*height: 220px;*/} .archive_last_display .archive_last-item .news-content .c{font-size:14px;line-height:22px;color:rgb(0, 0, 0);display:inline-block;vertical-align:middle;font-weight:lighter;} .archive_last_display .archive_last-item .li-line{width:0;height:3px;background:var(--color_eye);position:absolute;left:0;bottom:0;transition:all 0.5s ease;} .archive_last_display .archive_last-item .news-item-box:hover{box-shadow:1px 2px 15px 0px rgba(0,0,0,0.6);} .archive_last_display .archive_last-item .news-item-box:hover .news-content .t span{color:var(--color_subs);} .archive_last_display .archive_last-item .news-item-box:hover .news-content .c span{color:var(--color_eye);} .archive_last_display .archive_last-item .news-item-box:hover .li-line{width:100%;} /* --- 1) 小于780尺寸 --- sm --- */ @media only screen and (max-width: 768px){ .news-item .news-tit a{font-size: 18px;height: 64px;} .news-item .news-tit a span{line-height: 24px;color: rgb(35, 91, 184);} .news-item .news-summary span{font-size: 14px;} .news-item .news-comt{padding-left: 0px;} } /* --- 0) 手机 --- mobile --- */ @media (max-width: 576px){ .news-item .news-tit a{font-size: 18px;height: 48px;} .news-item .news-tit a span{line-height: 24px;color: rgb(35, 91, 184);} .news-item .news-summary span{font-size: 14px;} .news-item .news-comt{padding-left: 0px;} } /* --- 2) 大于768px尺寸 --- md --- */ @media(min-width:768px){ .news-item .news-tit a{font-size: 18px;height: 64px;} .news-item .news-tit a span{line-height: 32px;} .news-item .news-comt{padding-left: 30px;} } /* --- 3) 大于992px尺寸 --- lg --- */ @media(min-width:992px){ .news-item .news-tit a{font-size: 20px;height: 64px;} .news-item .news-tit a span{line-height: 32px;} .news-item .news-comt{padding-left: 30px;} } /* --- 4) 大于1200尺寸时候使用 --- xl --- */ @media(min-width:1200px){ .news-item .news-tit a{font-size: 24px;height: 76px;} .news-item .news-tit a span{line-height: 38px;} .news-item .news-comt{padding-left: 40px;} } /* ---------------------------------------------------- 81 ) end Service Display 服务展示 .display_service_support ------------------------------------------------------- */ .display_service_support{background-position:center center;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;position:relative;} .display_service_support .partner-div .img{padding:15px 30px;background:#fff;border-radius:10px;overflow:hidden;box-shadow:1px 1px 8px 0px hsla(0,0%,0%,0.2);} .display_service_support .partner-div .img img{width:100%;height:auto;} .display_service_support .background-overlay{background: linear-gradient(60deg, rgb(64 97 162) 0%, rgb(132 149 185) 100%);opacity:0.8;transition:background 0.3s,border-radius 0.3s,opacity 0.3s;height:100%;width:100%;top:0;left:0;position:absolute;} .display_service_support .service-left-title{font-size:3rem;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,0.5);} .display_service_support .service-left-text{padding:30px 30px 15px 0px;display:block;color:#fff;font-size:1.15rem;} .display_service_support .service-right-title{font-size:1.5rem;padding-bottom:15px;color:#fff;text-shadow:0.5px 0.5px 1px rgba(0,0,0,0.5);} .display_service_support .service-right-text{color:#fff;height:164px;overflow:hidden;} .display_service_support .service-right-icon i{font-size:3.6rem;color:#fff;} .display_service_support .project-item .project-img{width:100%;height:360px;overflow:hidden;border-radius:10px 10px 10px 10px;align-items:flex-end;height:450px;} .display_service_support .project-content{z-index:99;text-align:left;position:relative;opacity:0;} .display_service_support .project-background-overlay{background-color:#00A0E9;opacity:0;transition:background 0.3s,border-radius 0.3s,opacity 0.3s;height:450px;width:100%;top:0;left:0;position:absolute;z-index:100;border-radius:10px;} .display_service_support .project-content .t{font-size:2rem;padding:10px 0px;} .display_service_support .project-item:hover .project-background-overlay{opacity:0.4;} .display_service_support .project-item:hover .project-content{opacity:1;-webkit-transition-delay:.1s;transition-delay:.1s;-webkit-transform:translate(0,-16px);-ms-transform:translate(0,-16px);transform:translate(0,-16px);top:-250px;z-index:101;padding:25px;color:#fff;} @media only screen and (max-width:768px){ .display_service_support .service-left-text{font-size:14px;} .display_service_support .service-right-text{height:110px;font-size:14px;} } @media (max-width:576px){ .display_service_support .service-left-text{font-size:14px;} .display_service_support .service-right-text{height:110px;font-size:14px;} } @media(min-width:768px){ .display_service_support .service-left-text{font-size:14px;} .display_service_support .service-right-text{height:110px;font-size:14px;} } @media(min-width:992px){ .display_service_support .service-left-text{font-size:14px;} .display_service_support .service-right-text{height:110px;font-size:14px;} } @media(min-width:1200px){ .display_service_support .service-left-text{font-size:16px;} .display_service_support .service-right-text{height:164px;font-size:14px;} } @media(min-width:1667px){ .display_service_support .service-left-text{font-size:16px;} .display_service_support .service-right-text{height:164px;font-size:14px;} } /* ---------------------------------------------------- 81 ) end Service Display 服务展示 .display_service_support ------------------------------------------------------- */ /* ---------------------------------------------------- 82 ) start Service Display 服务展示 .left_right_graphics_text ------------------------------------------------------- */ .product-frist-mtu .product-frist-div{background-color: #dcdcdc;border-radius: 10px 10px 10px 10px;} .product-frist-mtu .product-frist-img .from-contact-svg{fill:rgb(255 255 255);width: 20px;height: 20px;margin-left: 4px;margin-bottom: 2px;} .product-frist-mtu .product-frist-img .heku-btn{/* line-height: 30px; */font-size: 1.1rem;transition: transform 0.5s ease;border-color:rgba(255,255,255,0.986);color:rgba(255,255,255,0.986);background:rgb(51 79 134);border:none;padding: 3px 20px 3px 20px;text-shadow:0.5px 0.5px 0.5px rgb(199 196 196);box-shadow:0px 0px 4px rgba(0,0,0,.6);-moz-box-shadow:0px 0px 7px rgba(0,0,0,.6);-webkit-box-shadow:0px 0px 4px rgba(0,0,0,.6);} .product-frist-mtu .product-frist-img .heku-btn:hover{transform: scale(1.1);background: #d71024;} .product-frist-mtu .product-frist-img .model_from-content{z-index:2;position:relative;} .product-frist-mtu .product-frist-img{display:flex;;flex-direction:column;align-items:center;text-align:center;} .product-frist-mtu .tith2 p,.product-frist-mtu .tith2{font-weight:700;color: #1d4694;font-size: 30px;} .product-frist-mtu .b p{font-size:14px;font-weight:normal;line-height: 22px;} .product-frist-mtu .c img{width:100%;box-shadow: none;} .single_right_video .c .tit{border-radius:8px;box-shadow:0px 0px 4px rgba(0,0,0,.6);} .single_right_video .c .tit,.single_right_video .c .tit p{font-size:1.4rem;background:#1d4694;padding:0px 5px 0px 12px;line-height:3rem;color:#fff;} .left_img_right_table .c img{width:100%;} .left_img_right_table .c .tit,.left_img_right_table .c .tit p{font-size:1.2rem;background: #1d4694;padding: 5px 12px;color: #fff;} .left_img_right_table .a{font-size:1.2rem;background:rgb(29,70,148);padding:5px 12px;color:rgb(255,255,255);border-top-left-radius:8px;border-top-right-radius:8px;box-shadow:0px 0px 7px rgba(0,0,0,.6);-moz-box-shadow:0px 0px 7px rgba(0,0,0,.6);-webkit-box-shadow:0px 0px 7px rgba(0,0,0,.6);} .left_img_right_table .b table{border-bottom-left-radius:8px;border-bottom-right-radius:8px;border-top-left-radius:0px;border-top-right-radius:0px;overflow:hidden;box-shadow:0px 0px 7px rgba(0,0,0,.6);-moz-box-shadow:0px 0px 7px rgba(0,0,0,.6);-webkit-box-shadow:0px 0px 7px rgba(0,0,0,.6);} .single_left_video .c .tit{border-radius:8px;box-shadow:0px 0px 4px rgba(0,0,0,.6);} .single_left_video .c .tit,.single_left_video .c .tit p{font-size:1.4rem;background:#1d4694;padding:0px 5px 0px 12px;line-height:3rem;color:#fff;} .single_left_video img{width: 100%;} .single_right_video .v-shadow img,.single_left_video .v-shadow img{border-radius:10px 10px 10px 10px;box-shadow:0px 0px 7px rgba(0,0,0,.6);-moz-box-shadow:0px 0px 7px rgba(0,0,0,.6);-webkit-box-shadow:0px 0px 7px rgba(0,0,0,.6);} .single_right_video .v-shadow video, .single_left_video .v-shadow video{border-radius:10px 10px 10px 10px;box-shadow:0px 0px 7px rgba(0,0,0,.6);-moz-box-shadow:0px 0px 7px rgba(0,0,0,.6);-webkit-box-shadow:0px 0px 7px rgba(0,0,0,.6);} .entry-content .low-tit,.entry-content .low-tit p,.entry-content p.low-tit{font-size:130%;font-weight:500;line-height: 25px;} .frist_mtu_img {background-color: #dcdcdc;border-radius: 10px 10px 10px 10px;} .frist_mtu_img .tith2 p,.frist_mtu_img .tith2{font-weight:700;color: #1d4694;font-size: 30px;} .frist_mtu_img .b p{font-size:14px;font-weight:normal;line-height: 22px;} .frist_mtu_img .c img{width:100%;box-shadow: none;} .index-table table{overflow: hidden;} .index-table.entry-content table th{border-bottom: 1px solid rgb(91 91 91);background: #e7e9ec;} .index-table.entry-content table td{border-bottom: 1px solid rgb(148 148 148)} .index-table.entry-content table tr:nth-of-type(2n){background-color:#f1f1f1;} .index-table.entry-content table tr:nth-child(2n+1){background-color: #ffffff;} /* ---------------------------------------------------- 82 ) end Service Display 服务展示 .left_right_graphics_text ------------------------------------------------------- */ /* -------------------------------------------------------------------------- 80 ). start Viewer.js js 支持的css 用于点击放大图片使用 -------------------------------------------------------------------------- */ .viewer-zoom-in::before,.viewer-zoom-out::before,.viewer-one-to-one::before,.viewer-reset::before,.viewer-prev::before,.viewer-play::before,.viewer-next::before,.viewer-rotate-left::before,.viewer-rotate-right::before,.viewer-flip-horizontal::before,.viewer-flip-vertical::before,.viewer-fullscreen::before,.viewer-fullscreen-exit::before,.viewer-close::before{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAAUCAYAAABWOyJDAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAQPSURBVHic7Zs/iFxVFMa/0U2UaJGksUgnIVhYxVhpjDbZCBmLdAYECxsRFBTUamcXUiSNncgKQbSxsxH8gzAP3FU2jY0kKKJNiiiIghFlccnP4p3nPCdv3p9778vsLOcHB2bfveeb7955c3jvvNkBIMdxnD64a94GHMfZu3iBcRynN7zAOI7TG15gHCeeNUkr8zaxG2lbYDYsdgMbktBsP03jdQwljSXdtBhLOmtjowC9Mg9L+knSlcD8TNKpSA9lBpK2JF2VdDSR5n5J64m0qli399hNFMUlpshQii5jbXTbHGviB0nLNeNDSd9VO4A2UdB2fp+x0eCnaXxWXGA2X0au/3HgN9P4LFCjIANOJdrLr0zzZ+BEpNYDwKbpnQMeAw4m8HjQtM6Z9qa917zPQwFr3M5KgA6J5rTJCdFZJj9/lyvGhsDvwFNVuV2MhhjrK6b9bFiE+j1r87eBl4HDwCF7/U/k+ofAX5b/EXBv5JoLMuILzf3Ap6Z3EzgdqHMCuF7hcQf4HDgeoHnccncqdK/TvSDWffFXI/exICY/xZyqc6XLWF1UFZna4gJ7q8BsRvgd2/xXpo6P+D9dfT7PpECtA3cnWPM0GXGFZh/wgWltA+cDNC7X+AP4GzjZQe+k5dRxuYPeiuXU7e1qwLpDz7dFjXKRaSwuMLvAlG8zZlG+YmiK1HoFqT7wP2z+4Q45TfEGcMt01xLoNZEBTwRqD4BLpnMLeC1A41UmVxsXgXeBayV/Wx20rpTyrpnWRft7p6O/FdqzGrDukPNtkaMoMo3FBdBSQMOnYBCReyf05s126fU9ytfX98+mY54Kxnp7S9K3kj6U9KYdG0h6UdLbkh7poFXMfUnSOyVvL0h6VtIXHbS6nOP+s/Zm9mvyXW1uuC9ohZ72E9uDmXWLJOB1GxsH+DxPftsB8B6wlGDN02TAkxG6+4D3TWsbeC5CS8CDFce+AW500LhhOW2020TRjK3b21HEmgti9m0RonxbdMZeVzV+/4tF3cBpP7E9mKHNL5q8h5g0eYsCMQz0epq8gQrwMXAgcs0FGXGFRcB9wCemF9PkbYqM/Bas7fxLwNeJPdTdpo4itQti8lPMqTpXuozVRVXPpbHI3KkNTB1NfkL81j2mvhDp91HgV9MKuRIqrykj3WPq4rHyL+axj8/qGPmTqi6F9YDlHOvJU6oYcTsh/TYSzWmTE6JT19CtLTJt32D6CmHe0eQn1O8z5AXgT4sx4Vcu0/EQecMydB8z0hUWkTd2t4CrwNEePqMBcAR4mrBbwyXLPWJa8zrXmmLEhNBmfpkuY2102xxrih+pb+ieAb6vGhuA97UcJ5KR8gZ77K+99xxeYBzH6Q3/Z0fHcXrDC4zjOL3hBcZxnN74F+zlvXFWXF9PAAAAAElFTkSuQmCC");background-repeat:no-repeat;background-size:280px;color:transparent;display:block;font-size:0;height:20px;line-height:0;width:20px} .viewer-zoom-in::before{background-position:0 0;content:"Zoom In"} .viewer-zoom-out::before{background-position:-20px 0;content:"Zoom Out"} .viewer-one-to-one::before{background-position:-40px 0;content:"One to One"} .viewer-reset::before{background-position:-60px 0;content:"Reset"} .viewer-prev::before{background-position:-80px 0;content:"Previous"} .viewer-play::before{background-position:-100px 0;content:"Play"} .viewer-next::before{background-position:-120px 0;content:"Next"} .viewer-rotate-left::before{background-position:-140px 0;content:"Rotate Left"} .viewer-rotate-right::before{background-position:-160px 0;content:"Rotate Right"} .viewer-flip-horizontal::before{background-position:-180px 0;content:"Flip Horizontal"} .viewer-flip-vertical::before{background-position:-200px 0;content:"Flip Vertical"} .viewer-fullscreen::before{background-position:-220px 0;content:"Enter Full Screen"} .viewer-fullscreen-exit::before{background-position:-240px 0;content:"Exit Full Screen"} .viewer-close::before{background-position:-260px 0;content:"Close"} .viewer-container{bottom:0;direction:ltr;font-size:0;left:0;line-height:0;overflow:hidden;position:absolute;right:0;-webkit-tap-highlight-color:transparent;top:0;-ms-touch-action:none;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .viewer-container::-moz-selection,.viewer-container *::-moz-selection{background-color:transparent} .viewer-container::selection,.viewer-container *::selection{background-color:transparent} .viewer-container:focus{outline:0} .viewer-container img{display:block;height:auto;max-height:none !important;max-width:none !important;min-height:0 !important;min-width:0 !important} .viewer-canvas{bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0} .viewer-canvas>img{height:auto;margin:15px auto;max-width:90% !important;width:auto} .viewer-footer{bottom:0;left:0;overflow:hidden;position:absolute;right:0;text-align:center} .viewer-navbar{background-color:rgba(0, 0, 0, .66);overflow:hidden;padding:20px 0px} .viewer-next{left:70%;position:relative} .viewer-prev{left:27%;position:relative} .viewer-next:hover,.viewer-prev:hover{color:rgb(255, 255, 255);text-decoration:none;outline:0;opacity:0.9} .viewer-list{-webkit-box-sizing:content-box;box-sizing:content-box;height:120px;margin:auto !important;overflow:hidden;padding:1px 0;width:auto !important;-webkit-transform:none !important;transform:none !important} .viewer-list>li{color:transparent;cursor:pointer;font-size:0;height:120px;line-height:0;opacity:0.5;overflow:hidden;-webkit-transition:opacity 0.15s;transition:opacity 0.15s;width:120px;display:inline-block} .viewer-list>li:focus,.viewer-list>li:hover{opacity:0.75} .viewer-list>li:focus{outline:0} .viewer-list>li+li{margin-left:30px} .viewer-list>.viewer-loading{position:relative} .viewer-list>.viewer-loading::after{border-width:2px;height:20px;margin-left:-10px;margin-top:-10px;width:20px} .viewer-list>.viewer-active,.viewer-list>.viewer-active:focus,.viewer-list>.viewer-active:hover{opacity:1} .viewer-player{background-color:rgb(0, 0, 0);bottom:0;cursor:none;display:none;left:0;position:absolute;right:0;top:0;z-index:1} .viewer-player>img{left:0;position:absolute;top:0} .viewer-toolbar>ul{position:absolute;top:40%;width:100%} .viewer-toolbar>ul>li{background-color:rgba(0, 0, 0, .5);border-radius:50%;cursor:pointer;float:left;height:24px;overflow:hidden;-webkit-transition:background-color 0.15s;transition:background-color 0.15s} .viewer-toolbar>ul>li:focus,.viewer-toolbar>ul>li:hover{background-color:rgba(0, 0, 0, .8)} .viewer-toolbar>ul>li:focus{-webkit-box-shadow:0 0 3px rgb(255, 255, 255);box-shadow:0 0 3px rgb(255, 255, 255);outline:0;position:relative;z-index:1} .viewer-toolbar>ul>li::before{margin:2px} .viewer-toolbar>ul>li+li{margin-left:1px} .viewer-toolbar>ul>.viewer-small{height:18px;margin-bottom:3px;margin-top:3px;width:18px} .viewer-toolbar>ul>.viewer-small::before{margin:-1px} .viewer-toolbar>ul>.viewer-large{height:30px;margin-bottom:-3px;margin-top:-3px;width:30px} .viewer-toolbar>ul>.viewer-large::before{margin:5px} .viewer-tooltip{background-color:rgba(0, 0, 0, .8);border-radius:10px;color:rgb(255, 255, 255);display:none;font-size:12px;height:20px;left:50%;line-height:20px;margin-left:-25px;margin-top:-10px;position:absolute;text-align:center;top:50%;width:50px} .viewer-title{color:rgb(204, 204, 204);display:inline-block;font-size:12px;line-height:1.2;margin:0 5% 5px;max-width:90%;opacity:0.8;overflow:hidden;text-overflow:ellipsis;-webkit-transition:opacity 0.15s;transition:opacity 0.15s;white-space:nowrap} .viewer-title:hover{opacity:1} .viewer-button{background-color:rgba(0, 0, 0, .5);border-radius:50%;cursor:pointer;height:80px;overflow:hidden;position:absolute;right:-40px;top:-40px;-webkit-transition:background-color 0.15s;transition:background-color 0.15s;width:80px} .viewer-button:focus,.viewer-button:hover{background-color:rgba(0, 0, 0, .8)} .viewer-button:focus{-webkit-box-shadow:0 0 3px rgb(255, 255, 255);box-shadow:0 0 3px rgb(255, 255, 255);outline:0} .viewer-button::before{bottom:15px;left:15px;position:absolute} .viewer-fixed{position:fixed} .viewer-open{overflow:hidden} .viewer-show{display:block} .viewer-hide{display:none} .viewer-backdrop{background-color:rgb(52, 136, 73)} .viewer-invisible{visibility:hidden} .viewer-move{cursor:move;cursor:-webkit-grab;cursor:grab} .viewer-fade{opacity:0} .viewer-in{opacity:1} .viewer-transition{-webkit-transition:all 0.3s;transition:all 0.3s} .viewer-loading::after{-webkit-animation:viewer-spinner 1s linear infinite;animation:viewer-spinner 1s linear infinite;border:4px solid rgba(255, 255, 255, .1);border-left-color:rgba(255, 255, 255, .5);border-radius:50%;content:"";display:inline-block;height:40px;left:50%;margin-left:-20px;margin-top:-20px;position:absolute;top:50%;width:40px;z-index:1} @-webkit-keyframes viewer-spinner{ 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)} 100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)} } @keyframes viewer-spinner{ 0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)} 100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)} } @media (max-width:767px){ .viewer-hide-xs-down{display:none} } @media (max-width:991px){ .viewer-hide-sm-down{display:none} } @media (max-width:1199px){ .viewer-hide-md-down{display:none} } /* -------------------------------------------------------------------------- 80 ). end Viewer.js js 支持的css 用于点击放大图片使用 -------------------------------------------------------------------------- */ /* ---------------------------------------------------- 90 ) @font-face 字体图标库，iconfont加载的字体图标，让网站更加独立自主，注意需要加载对应的字体库和对应的字体路径 ------------------------------------------------------- */ @font-face { font-family: "iconfont"; src: url('../fonts/iconfont.woff2') format('woff2'), url('../fonts/iconfont.woff') format('woff'), url('../fonts/iconfont.ttf') format('truetype'); } .iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} .icon-x:before{content:"\e624";} .icon-x1:before{content:"\e628";} .icon-twitter:before{content:"\e697";} .icon-x2:before{content:"\e6c5";} .icon-facebook1:before{content:"\ecb1";} .icon-boat:before{content:"\e61c";} .icon-chuan:before{content:"\e61e";} .icon-chuan1:before{content:"\e64c";} .icon-boat1:before{content:"\e61f";} .icon-md-boat:before{content:"\e66c";} .icon-si-glyph-boat:before{content:"\e622";} .icon-shipping:before{content:"\e647";} .icon-chuan2:before{content:"\e78e";} .icon-Ship-2:before{content:"\e897";} .icon-chuanbo:before{content:"\e63b";} .icon-Boat:before{content:"\e947";} .icon-shipin:before{content:"\e620";} .icon-right:before{content:"\e604";} .icon-a-lian1564662:before{content:"\e605";} .icon-end_right:before{content:"\e606";} .icon-start_left:before{content:"\e607";} .icon-left:before{content:"\e60b";} .icon-next_right:before{content:"\e60c";} .icon-chunbo-shouye:before{content:"\e60e";} .icon-a-dizhi1:before{content:"\e60f";} .icon-youxiang1:before{content:"\e610";} .icon-a-12:before{content:"\e611";} .icon-a-13:before{content:"\e613";} .icon-a-11:before{content:"\e615";} .icon-a-15:before{content:"\e616";} .icon-time-3:before{content:"\e619";} .icon-a-jiajianzujianjiahao:before{content:"\e61a";} .icon-jianshao:before{content:"\e61b";} .icon-gongsi:before{content:"\e60d";} .icon-company-fill:before{content:"\e617";} .icon-user:before{content:"\e627";} .icon-Realname:before{content:"\e653";} .icon-tubiaozhizuomoban-:before{content:"\e60a";} .icon-yanzhengmazhuangtaiICO:before{content:"\e614";} .icon-xiezi:before{content:"\e650";} .icon-yanzhengma:before{content:"\e702";} .icon-highquality:before{content:"\ebbe";} .icon-zhiliang-xuanzhong:before{content:"\e623";} .icon-shop:before{content:"\e61d";} .icon-jindianguangguang:before{content:"\e674";} .icon-shopping:before{content:"\e869";} .icon-quality:before{content:"\e6c3";} .icon-safety-icon:before{content:"\e686";} .icon-efficiency-o:before{content:"\e689";} .icon-icon_efficiency:before{content:"\e62b";} .icon-reliability-1:before{content:"\e976";} .icon-reliability:before{content:"\e977";} .icon-icon-efficiency:before{content:"\e687";} .icon-nav_reliability_icon:before{content:"\e815";} .icon-efficiency:before{content:"\e6df";} .icon-skype:before{content:"\e857";} .icon-fangxiang2:before{content:"\e600";} .icon-zuoguanbi:before{content:"\e6ae";} .icon-youzhankai:before{content:"\e6ba";} .icon-fangxiangjiantou-you:before{content:"\e601";} .icon-fangxiangjiantou-xia:before{content:"\e603";} .icon-logo-2:before{content:"\2131";} .icon-gongju1:before{content:"\e998";} .icon-miaozhun:before{content:"\e635";} .icon-erji:before{content:"\e65f";} .icon-fuwu1:before{content:"\e694";} .icon-peixun:before{content:"\e6cf";} .icon-peixun1:before{content:"\efc2";} .icon-zhenduan-01:before{content:"\e621";} .icon-fuwu2:before{content:"\e66f";} .icon-home2-copy:before{content:"\efc3";} .icon-socialwhatsapp:before{content:"\e928";} .icon-home:before{content:"\e609";} .icon-youtube:before{content:"\e87c";} .icon-dianhua:before{content:"\e62a";} .icon-whatsapp:before{content:"\e69f";} .icon-youxiang:before{content:"\e612";} .icon-linying:before{content:"\e6ff";} .icon-adress:before{content:"\e608";} .icon-dianhua1:before{content:"\e602";} .icon-youxiang2:before{content:"\e70c";} .icon-facebook:before{content:"\e641";} .icon-dianhua2:before{content:"\e64f";} .icon-a-HomeTechnology:before{content:"\e618";} /* ---------------------------------------------------- 90 ) @font-face 字体图标库，iconfont加载的字体图标，让网站更加独立自主，注意需要加载对应的字体库和对应的字体路径 ------------------------------------------------------- */