:root{ /* 配色原理，网站中尽量不用出现 多余5种颜色 此处的配色 尽量以前后反色为主 参考网址2：https://huemint.com/website-1/ 参考网址2：https://color.review/ */ --font-default: "Microsoft YaHei", "微软雅黑", Arial, "sans-serif"; --color_main:rgb(255, 255, 255); /* 深色背景的主色调： 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;}} /* ---------------------------------------------------- --- 01 - 19) 公共 全局相关的 CSS样式 -- 00) heku-color 模板颜色管理 -- 01) @font-face 字体图标库，iconfont加载的字体图标，让网站更加独立自主，注意需要加载对应的字体库和对应的字体路径 -- 02) #single_bar_line 10-20 面包屑 导航 公共样式 顶部导航 -- 04) start .heku-btn 10-20 css 按钮的 图标样式 --- 10 - 29) 首页相关 CSS样式 -- 11) #display_service_support Service & Support 区域 -- 12) #display_company_culture Company Culture 区域 -- 13) #display_index_product Marine Products 产品展示 -- 14) #display_index_project Methanol 项目展示 -- 15) #index_culture_line 合作伙伴品牌展示 --- 30 - 39) 分类页面相关 CSS样式 --- 40 - 49) 详情页相关 CSS样式 -- 43) 新闻详情页 ，展示模板： css样式 --- 50 - 59) 部分单页相关 CSS样式 -- 51) page-projects.php 解决方案/案例列表页 -- 52) page-about.php 关于我们页 -- 53) page-contact.php 联系我们页 -- 54) page-specs.php 产品技术参数页 -- 55) page-skills.php 产品展示列表页 --- 70 - 80) 第三方插件相关 CSS样式 -- 70). Viewer.js js 支持的css 用于点击放大图片使用 ------------------------------------------------------- */ 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)} /* ---------------------------------------------------- 01) @font-face 字体图标库，iconfont加载的字体图标，让网站更加独立自主，注意需要加载对应的字体库和对应的字体路径 ------------------------------------------------------- */ @font-face { font-family: "iconfont"; src: url('../fonts/iconfont.woff2?t=1684371808307') format('woff2'), url('../fonts/iconfont.woff?t=1684371808307') format('woff'), url('../fonts/iconfont.ttf?t=1684371808307') format('truetype'); } .iconfont{font-family:"iconfont" !important;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";} /* ---------------------------------------------------- 02) .index-title 10-20 Title 导航 公共样式 顶部导航 ------------------------------------------------------- */ .index-title{text-align:center;} .index-title span{display:block;padding:1rem 0;} .index-title span.a{line-height:2.8rem;font-size:2.3rem;font-weight:600;color:var(--color_eye);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:1rem;line-height:1.6rem;font-weight:lighter;letter-spacing:0px;text-align:left;clear:both;} .banner-breadcrumb a,.banner-breadcrumb span{padding:5px 3px;line-height:40px;opacity:0.78;color: #e5e1e1;} .banner-breadcrumb a:hover{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;} /*-------------------------------------------------- 02 #Carousel_Banner banner图片 Css样式 内敛 bootstrast 轮播插件 ----------------------------------------------------*/ .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);} /* ---------------------------------------------------- 03) start .heku-btn 10-20 css 按钮的 图标样式 ------------------------------------------------------- */ @media (min-width: 1667px){ .container{max-width: 1440px;} } .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:hover{background:var(--color_main);color:var(--color_eye);} .heku-btn-transparent{background:transparent;border-color:var(--light_background_translucent_5);} .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{background:#fbfbfb;color:var(--color_eye);border-color:rgb(92 133 94);text-shadow:0.5px 0.5px 0.5px rgb(255 255 255);font-weight:bold;} /* ---------------------------------------------------- 01.1) #heku_top .heku-top-topbar 顶部 topbar -------------------------------------------------------*/ #temp01_heku_top{position:absolute;top:0;right:0;width:100%;z-index:11;background:linear-gradient(to bottom,rgb(46 105 237 / 64%) 0%,rgb(6 76 126 / 36%) 50%,rgb(10 10 10 / 0%) 100%);} #temp01_heku_top .heku-top-topbar{border-bottom:var(--boder_line);} #temp01_heku_top .heku-top-topbar .topbar-left-social ul li{display:inline-block;margin-left:-5px;} #temp01_heku_top .heku-top-topbar .topbar-left-social ul li:last-child,#temp01_heku_top .heku-top-topbar .topbar-right-info ul li:last-child{border-right:0;} #temp01_heku_top .heku-top-topbar .topbar-left-social ul li:hover,#temp01_heku_top .heku-top-topbar .topbar-right-info ul li:hover{background:var(--background_translucent_3);} #temp01_heku_top .heku-top-topbar .topbar-left-social ul li a{display:inline-block;width:3rem;height:2.5rem;line-height:2.5rem;text-align:center;font-size:1.2rem;} #temp01_heku_top .heku-top-topbar .topbar-left-social ul li,#temp01_heku_top .heku-top-topbar .topbar-right-info ul li{border-right:var(--boder_line);} #temp01_heku_top .heku-top-topbar .topbar-right-info ul li a,#temp01_heku_top .heku-top-topbar .topbar-left-social ul li a{color:var(--deep_color_main);} #temp01_heku_top .heku-top-topbar .topbar-right-info ul li a:hover,#temp01_heku_top .heku-top-topbar .topbar-left-social ul li a:hover{color:var(--deep_color_subs);} #temp01_heku_top .heku-top-topbar .topbar-right-info ul li{display:inline-block;margin-left:-5px;padding:0 0.9rem;} #temp01_heku_top .heku-top-topbar .topbar-right-info ul li:last-child{border-right:0;} #temp01_heku_top .heku-top-topbar .topbar-right-info ul li a{display:inline-block;font-size:1rem;height:2.5rem;line-height:2.5rem;} #temp01_heku_top .heku-top-topbar .topbar-right-info ul li i{margin-right:8px;} /* ---------------------------------------------------- 01.2) #heku_top_menu .heku-top-menu 顶部 menu 菜单导航 ------------------------------------------------------- */ .heku-top-menu{width:100%;} .heku-top-menu .top-menu-logo .logo-pr,.heku-top-menu.header-is-visible .top-menu-logo .logo-bg{display:block;} .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:4.5rem;} .heku-top-menu .nav-menu .sub-menu{top:4.5rem;} .header-is-visible.heku-top-menu .nav-menu .sub-menu{top:4.5rem;} .header-is-visible.heku-top-menu .nav-menu li.depth-0.heku-menu-type2:hover >.sub-menu{top:4.5rem;} .heku-top-menu .top-menu-logo img{height:3.2rem;line-height:4.5rem;} .heku-top-menu .top-logo-font{font-size:1.4rem;font-weight:600;letter-spacing:2px;text-shadow:var(--text_deep_shadow);padding-left:10px;line-height:4.5rem;} .heku-top-menu .icon-navicon{font-size:2.4rem;color:var(--color_main);line-height:4.5rem;} .heku-top-menu .nav-menu > li{display:inline-block;line-height:4.5rem;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;text-shadow:var(--text_deep_shadow);} .heku-top-menu .nav-menu .sub-menu{display:none;width:18rem;position:absolute;border-radius:3px 3px 8px 8px;top:4.5rem;left:-5rem;} .heku-top-menu .nav-menu .sub-menu li{list-style:none;line-height:3rem;} .heku-top-menu .nav-menu .sub-menu li a{display:block;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 > 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:hover .sub-menu{display:block;height:auto;transition:.5s;overflow:hidden;position:absolute;} .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{color:var(--color_subs);text-shadow:var(--text_light_shadow);} .heku-top-menu .nav-menu > li a,.heku-top-menu .top-logo-font span{color:var(--deep_color_main);text-shadow:var(--text_deep_shadow);} .heku-top-menu .nav-menu .sub-menu a:hover,.heku-top-menu .top-logo-font:hover span{color:var(--color_eye);text-shadow:var(--text_light_shadow);} .header-is-visible .top-logo-font span,.header-is-visible .nav-menu > li a,.header-is-visible .sub-menu > li a{color:var(--light_color_main);text-shadow:var(--text_light_shadow);} .heku-top-menu .nav-menu .sub-menu{background:rgba(153, 187, 203, 0.85);} .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;box-shadow:var(--box_deep_shadow);-webkit-box-shadow:var(--box_deep_shadow);background:var(--light_background_translucent);} .header-is-visible.heku-top-menu .icon-navicon{color:var(--light_color_main);} .heku-top-menu .nav-menu > li.menu-item-has-children > a > span{font-size:12px;display:inline-block;padding:0 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:0.8s;} /* --- 1) 下拉菜单 展示模板 1 heku-menu-type1 CSS --- */ 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:54px;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: 0 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);border-bottom-style:dashed;color:var(--forecolor);list-style:none;} li.depth-0.heku-menu-type1 li.depth-1:last-child{border-bottom:0px solid var(--forecolor);} 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:var(--forecolor_translucent_3) ;border:1px solid #ceb4b4;border-right:3px solid #e32626;border-left:3px solid #e32626;} 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:16px;color:var(--color_eye);} li.depth-0.heku-menu-type1 li .sidebar-menu-li a span{font-size: 16px;} li.depth-0.heku-menu-type1 li .sidebar-menu-li{padding:0 5px;border:1px solid #ffffff00;border-right:3px solid #ffffff00;border-left:3px solid #ffffff00;text-align: left;} li.depth-0.heku-menu-type1 .sub-menu-0 > li:last-child{border-bottom: none;} /* --- 1) 下拉菜单 展示模板 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 #5a87d0;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);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:#333;} 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:hover > .sub-menu{width:1200px;left:calc((100% - 1200px) / 2 );border-radius:0 0 8px 8px;top:7rem;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);} /* --- 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%;border-bottom: 1px solid #767070;padding:0px 5rem;background:rgba(0, 0, 0, 0.84);-webkit-background:rgba(0, 0, 0, 0.84);-o-background:rgba(0, 0, 0, 0.84);-moz-background:rgba(0, 0, 0, 0.84);} .header-is-visible .nav-menu > li a{color: var(--deep_color_main);} .heku-top-menu .icon-navicon .iconfont{font-size: 2.4rem;} .heku-top-menu .nav-menu li:hover .sub-menu{display:none;} } /* --- 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-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-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-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;} } /* ---------------------------------------------------- 01.2) #Carousel_Banner 顶部 banner 图片 ------------------------------------------------------- */ #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:#fff;} @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{background:linear-gradient(to bottom,rgb(46 105 237 / 64%) 0%,rgb(6 76 126 / 36%) 40%,rgb(10 10 10 / 80%) 100%);opacity:1;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:10rem 2rem 2rem;height:100%;color: var(--deep_color_main);} #Carousel_Banner .banner-content .container{z-index:10;} #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: 3rem;line-height: 2.7rem;padding: 0 2.5rem;} #Carousel_Banner .news-banner .banner-content{padding:7.5rem 0rem 0.5rem;height:100%;color: var(--deep_color_main);} #Carousel_Banner .news-banner .slider-content-right{line-height: 50px;} #Carousel_Banner .none-banner .banner-content{padding:7.2rem 0rem 0rem;height:100%;color: var(--deep_color_main);} #Carousel_Banner .banner-content.banner_one_content .banner-content-h1{font-size: 4rem;text-transform: uppercase;text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.8);} #Carousel_Banner .banner-content.banner_one_content .banner-text1{font-size:2.2rem;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:#00abff;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.8rem;color:#00abff;font-weight: 600;text-shadow: 1px 1px 2px rgb(0 0 0 / 50%);} /* ---------------------------------------------------- 6.1 ) #index_product_line 首页 Why Choose Us 模块 CSS ------------------------------------------------------- */ /* #index_product_line{background: #e0e7ff;} */ #index_product_line .project-box .project-item{position:relative;background-color:#fff;box-shadow:0 3px 40px rgba(36,36,36,.1);float:left;margin-bottom:30px;border-radius:12px;overflow:hidden;transition:.3s ease;position:relative;} #index_product_line .project-box .project-item:hover{box-shadow:2px 2px 12px 0px rgba(0,0,0,0.8)} #index_product_line .project-box .project-item:hover .project-content .t{color:var(--color_eye);} #index_product_line .project-box .project-item .project-img{width:100%;height:14rem;overflow:hidden;} #index_product_line .project-box .project-item .project-img img{width:100%;} #index_product_line .project-box .project-item .project-content{padding:20px 10px 22px 20px;} #index_product_line .project-box .project-item .project-content .t{margin-bottom:12px;font-size:2rem;} #index_product_line .project-box .project-item .project-content .c{color:#666;height:12rem;overflow:hidden;font-size:1rem;line-height:1.4rem;} #index_product_line .project-box .project-item .project-content .more{float:right;color:#666;} #index_product_line .project-box .project-item .li-line{width:0;height:5px;background:var(--color_eye);position:absolute;left:0;bottom:0;transition:all 0.5s ease;} #index_product_line .project-box .project-item:hover .li-line{width:100%;} /* ---------------------------------------------------- 6.1 ) #index_project_line 首页 Why Choose Us 模块 CSS ------------------------------------------------------- */ #index_project_line{background: #F7F8F8;} #index_project_line .project-box .project-item{/* box-shadow:1px 1px 8px 0px hsla(0, 0%, 0%, 0.2); */position:relative;background-color: #fff;box-shadow: 0 3px 40px rgba(36,36,36,.1);float:left;/* margin-right: 0.5%; *//* margin-left: 0.5%; */margin-bottom:30px;border-radius: 12px;overflow: hidden;/* background:#f6f6f6; */transition:.3s ease;position:relative;} #index_project_line .project-box .project-item:hover{box-shadow:2px 2px 12px 0px hsla(0, 0%, 0%, 0.8)} #index_project_line .project-box .project-item:hover .project-content .t{color:var(--color_eye);} #index_project_line .project-box .project-item .project-img{width: 100%;height: 250px;overflow: hidden;} #index_project_line .project-box .project-item .project-img img{width: 100%;} #index_project_line .project-box .project-item .project-content{padding: 20px 10px 22px 20px;} #index_project_line .project-box .project-item .project-content .t{margin-bottom:12px;font-size:1.8rem;} #index_project_line .project-box .project-item .project-content .c{color:#666;height:200px;overflow:hidden;font-size:16px;line-height:1.7;} #index_project_line .project-box .project-item .project-content .more{float:right;color:#666;} #index_project_line .project-box .project-item .li-line{width:0;height:5px;background: var(--color_eye);position:absolute;left:0;bottom:0;transition:all 0.5s ease;} #index_project_line .project-box .project-item:hover .li-line{ width:100%;} /* ---------------------------------------------------- 06) start #heku-top #heku-top-topbar 顶部 topbar 模板：menu_banner 文件：heku-menu-1.php -------------------------------------------------------*/ #index_culture_line .culture-background-overlay{background-color:#053950;opacity:0.6;transition:background 0.4s,border-radius 0.3s,opacity 0.3s;height:4rem;width:100%;bottom:0px;position:absolute;z-index:1;-webkit-transition:background 0.4s,border-radius 0.3s,opacity 0.3s;-moz-transition:background 0.4s,border-radius 0.3s,opacity 0.3s;-ms-transition:background 0.4s,border-radius 0.3s,opacity 0.3s;-o-transition:background 0.4s,border-radius 0.3s,opacity 0.3s;} #index_culture_line .culture-item:hover .culture-background-overlay{height:100%;transition:all 0.4s;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-ms-transition:all 0.4s;-o-transition:all 0.4s;} #index_culture_line .culture-item:hover .culture-content{top:50%;bottom:auto;height:auto;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);} #index_culture_line .culture-content{position:absolute;bottom:0;left:0;height:4rem;padding:0 1rem;-webkit-transition:all 1s;transition:all 1s;z-index:10;-moz-transition:all 1s;-ms-transition:all 1s;-o-transition:all 1s;} #index_culture_line .culture-item{height:30rem;border-radius:8px;} #index_culture_line .culture-img{width:100%;height:100%;} #index_culture_line .culture-content .t .icon{font-size:1.5rem;border-radius:5rem;border:1px #fff solid;padding:5px;margin-right:10px;text-shadow:1px 1px 2px rgba(0,0,0,0.6);-webkit-border-radius:5rem;-moz-border-radius:5rem;-ms-border-radius:5rem;-o-border-radius:5rem;} #index_culture_line .culture-content .t{font-size:1.8rem;font-weight:normal;line-height:4rem;display:inline-block;overflow:hidden;vertical-align:middle;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,0.6);} #index_culture_line .culture-content .c{font-size:1rem;line-height:1.3rem;color:#f3eded;text-shadow:1px 1px 2px rgba(0,0,0,0.6);} /* ---------------------------------------------------- 6.1 ) #index_partner_line 首页 Why Choose Us 模块 CSS ------------------------------------------------------- */ #index_partner_line{background:#e1f5f5;} #index_partner_line .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);} #index_partner_line .partner-div .img img{width:100%;height:auto;} #index_service_line{background-image:url(../img/service-bg.jpg);background-position:center center;background-repeat:no-repeat;background-size:cover;background-attachment:fixed;position:relative;} #index_service_line .background-overlay{background-color:#00A0E9;opacity:0.8;transition:background 0.3s,border-radius 0.3s,opacity 0.3s;height:100%;width:100%;top:0;left:0;position:absolute;} .service-left-title{font-size:3rem;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,0.5);} .service-left-text{padding:30px 30px 15px 0px;display:block;color:#fff;font-size:1.15rem;} .service-right-title{font-size:1.5rem;padding-bottom:15px;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,0.5);} .service-right-text{color:#fff;height:200px;overflow:hidden;} .service-right-icon i{font-size:3.6rem;color:#fff;} #index_project_line .project-item .project-img{width:100%;height:360px;overflow:hidden;border-radius:10px 10px 10px 10px;align-items:flex-end;height:450px;} #index_project_line .project-content{z-index:99;text-align:left;position:relative;opacity:0;} .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;} #index_project_line .project-content .t{font-size:2rem;padding:10px 0px;} #index_project_line .project-item:hover .project-background-overlay{opacity:0.4;} #index_project_line .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;} /* --- 1) 小于780尺寸时候使用¸ --- sm --- */ @media only screen and (max-width:768px){ .service-left-text{font-size:14px;} .service-right-text{height:110px;font-size:14px;} } /* --- 1) 小于780尺寸时候使用 手机 mobile --- */ @media (max-width:576px){ .service-left-text{font-size:14px;} .service-right-text{height:110px;font-size:14px;} } /* --- 2) 大于768px尺寸 min --- */ @media(min-width:768px){ .service-left-text{font-size:14px;} .service-right-text{height:110px;font-size:14px;} } /* --- 3) 大于992px尺寸 mid --- */ @media(min-width:992px){ .service-left-text{font-size:14px;} .service-right-text{height:110px;font-size:14px;} } /* --- 4) 显示规定 大于1200尺寸时候使用 max --------- */ @media(min-width:1200px){ .service-left-text{font-size:16px;} .service-right-text{height:200px;font-size:14px;} } @media(min-width:1667px){ .service-left-text{font-size:18px;} .service-right-text{height:200px;font-size:16px;} } /* ---------------------------------------------------- 43) #sidebar_products 产品侧边列表 ，展示模板：Sing-news-temp01 css样式 ------------------------------------------------------- */ .single-sidebar{width:285px;} .sidebar-bg{background-image:linear-gradient(45deg,#93a5cf 0%,#e4efe9 100%);border-radius:var(--radius_big);-webkit-box-shadow:var(--box_shadow);box-shadow:var(--box_shadow);margin-bottom:25px;} .sidebar-title{background-image:url(/assets/img/43.png);padding:24px 26px 0px 24px;background-position:top right;background-repeat:no-repeat;background-size:50px;} .sidebar-title h2{padding-bottom:15px;border-bottom:1px solid #f2f2f2;font-size:18px;color:#000;} .sidebar-container{padding:8px 0px 8px 0px;} #sidebar_products .sidebar-title{padding:15px 10px 10px 10px;border-bottom:1px dashed var(--forecolor);} #sidebar_products .sidebar-title h2{color:#000;padding:5px;border-bottom: none;} #sidebar_products .sidebar-title .icon{font-size:24px;padding:0 12px 0 0px;} #sidebar_products .sidebar-nav-menu li.sidebar-li{list-style:none;} #sidebar_products .sidebar-nav-menu > li .sidebar-cat-img{width: 40px;padding-right: 7px;} #sidebar_products .sidebar-nav-menu > li{list-style: none;line-height:52px;overflow: hidden;border-bottom-style:dashed;border-bottom: 1px solid rgb(143 143 143);border-bottom-style:dashed;} #sidebar_products .sidebar-nav-menu > li:last-child{border-bottom:0px solid var(--forecolor);} #sidebar_products .sidebar-nav-menu .current-menu-item .sub-menu-0, #sidebar_products .sidebar-nav-menu .current-menu-parent .sub-menu-0{max-height: 500px;overflow: hidden;background: #ffffffab;} #sidebar_products .sidebar-nav-menu > li .icon:before{content:"\e61a";} #sidebar_products .sidebar-nav-menu li.current-menu-item > div > .icon:before, #sidebar_products .sidebar-nav-menu li.current-menu-parent > div > .icon:before{content:"\e61b";} #sidebar_products .sidebar-nav-menu > li .icon{float: right;padding-right: 5px;} #sidebar_products .sidebar-nav-menu .sub-menu-0 {padding: 0 8px 0 18px;max-height: 0px;overflow: hidden;-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;} #sidebar_products .sidebar-nav-menu .sub-menu-0 > li{border-bottom:1px solid var(--forecolor);border-bottom-style:dashed;color:var(--forecolor);list-style:none;} #sidebar_products .sidebar-nav-menu li.current-menu-item .sidebar-menu-li, #sidebar_products .sidebar-nav-menu li.current-menu-parent .sidebar-menu-li, #sidebar_products .sidebar-nav-menu > li:hover .sidebar-menu-li{background:var(--forecolor_translucent_3) ;border:1px solid #ceb4b4;border-right:3px solid #e32626;border-left:3px solid #e32626;} #sidebar_products .sidebar-nav-menu li.current-menu-item .sidebar-menu-li a span, #sidebar_products .sidebar-nav-menu li.current-menu-parent .sidebar-menu-li a span, #sidebar_products .sidebar-nav-menu > li:hover .sidebar-menu-li a span{font-size:15px;color:var(--color_eye);} #sidebar_products .sidebar-nav-menu li .sidebar-menu-li a span{font-size: 15px;} #sidebar_products .sidebar-nav-menu li .sidebar-menu-li{padding:0 4px;border:1px solid #ffffff00;border-right:3px solid #ffffff00;border-left:3px solid #ffffff00;} #sidebar_products .sidebar-nav-menu .sub-menu{max-height: 0px;overflow: hidden;} #sidebar_products .sidebar-nav-menu .current-menu-item > .sub-menu{max-height: 1500px;} #sidebar_products .sidebar-nav-menu .sub-menu-0 > li:last-child{border-bottom: none;} /* ---------------------------------------------------- 43) #sidebar_news 新闻详情页 ，展示模板：Sing-news-temp01 css样式 ------------------------------------------------------- */ #sidebar_news .sidebar-title h2{padding-bottom:15px;border-bottom:1px solid #f2f2f2;font-size:20px;color:#000;} #sidebar_news .sidebar-title .icon{font-size:24px;padding:0 8px 0 0px;} #sidebar_news .sidebar-container{padding:5px 0px 20px 0px;} #sidebar_news .sidebar-li-title h2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;word-break:break-all;font-size:14px;padding-top: 4px;} #sidebar_news .sidebar-li-title time{font-size:12px;color:#fff;margin-top:4px;} #sidebar_news .sidebar-li-box{display:flex;align-items:center;} #sidebar_news .sidebar-li-img{padding:8px 0px 8px 10px;border-radius:var(--radius_big);} #sidebar_news .sidebar-img-box{overflow:hidden;border-radius:5px;width:110px;} #sidebar_news .sidebar-img-box img{width: 100%;} #sidebar_news .sidebar-li{list-style: none;padding: 5px 18px;} #sidebar_news .sidebar-li:hover {background:#93a5cf;} #sidebar_news .sidebar-li:hover .sidebar-li-title h2{color: #fff;} #sidebar_news .sidebar-li:hover .sidebar-li-title time{color:var(--color_eye);} #sidebar_news .sidebar-li:hover .sidebar-img-box img{transform:scale(1.2);transition:filter 375ms .2s,transform .6s;} /* --- 1) 小于780尺寸时候使用¸ --- sm --- */ @media only screen and (max-width:768px){} /* --- 1) 小于780尺寸时候使用 手机 mobile --- */ @media (max-width:576px){} /* --- 2) 大于768px尺寸 min --- */ @media(min-width:768px){} /* --- 3) 大于992px尺寸 mid --- */ @media(min-width:992px){} /* --- 4) 显示规定 大于1200尺寸时候使用 max --------- */ @media(min-width:1200px){} /* --- 4) 显示规定 大于1667尺寸时候使用 max --------- */ @media(min-width:1667px){} /* --- 06.3) #heku-search-info #heku-search-info 顶部 搜索 -----*/ #heku_search_info{background:rgba(35,91,184,0.65);-webkit-background:rgba(76,81,216,0.65);-o-background:rgba(76,81,216,0.65);-moz-background:rgba(76,81,216,0.65);} #heku_search_info{position:fixed;top:70px;width:0%;height:54px;z-index:11;-webkit-transition:all 0.3s ease-out 0s;-moz-transition:all 0.3s ease-out 0s;-ms-transition:all 0.3s ease-out 0s;-o-transition:all 0.3s ease-out 0s;transition:all 0.3s ease-out 0s;visibility:hidden;} #heku_search_info.opened{width:100%;left:auto;right:0;visibility:visible;opacity:1;} #heku_search_info .head-search-from input{width:100%;padding:0px 24px;border:none;height:54px;color:#ffffff;font-size:24px;font-weight:400;background-color:transparent;} #heku_search_info .head-search-from input::placeholder{color:#fff;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::placeholder{opacity:0;} #heku_search_info .head-search-from button{position:absolute;top:50%;right:50px;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);background:transparent;font-size:20px;font-weight:100;color:#fff;outline:none;border:none;} #heku_search_info .head-search-from .delete-ico{position:absolute;top:50%;right:20px;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);background:transparent;font-size:20px;font-weight:100;color:#fff;} /* ---------------------------------------------------- 06) end #heku-top #heku-top-topbar 顶部 topbar 模板：menu_banner 文件：heku-menu-1.php -------------------------------------------------------*/ /* ---------------------------------------------------- 07) end #Carousel_Banner 公共样式 顶部导航 banner 内敛 bootstrast 轮播插件 模板：menu_banner 文件：heku-banner-1.php ------------------------------------------------------- */ /* ---------------------------------------------------- 06) start #archive_news_line #archive_news_line 新闻分类 模板：archive-news 文件：archive-news.php -------------------------------------------------------*/ .news-box-1 .news-item-box{border:1px solid #f6f6f8;border-bottom:0px;position:relative;background-color:#fff;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:#939393;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 .news-content .news-readmore{font-weight:bold;} .news-box-1 .news-item-box:hover .news-content .news-time{font-weight:bold;} */ .news-box-1 .news-item-box:hover .li-line{width:100%;} /* ---------------------------------------------------- 06) end #archive_news_line #archive_news_line 新闻分类 模板：archive-news 文件：archive-news.php -------------------------------------------------------*/ /* ---------------------------------------------------- 12) start # 分页 css ------------------------------------------------------- */ .page_bar_1 .page_arr_left{text-align: left} .page_bar_1 .page_arr_center{text-align: center} .page_bar_1 .page_arr_center a{padding: 1px 10px;} .page_bar_1 .page_arr_center a.current,.page_bar_1 .page_arr_center a:hover{background:#4473c3;color:#fff;border-radius:50% 50%;} .page_bar_1 .page_arr_center a{font-size: 18px;color: #323232;} .page_bar_1 .page_arr_right{text-align: right} .page_bar_1 .pages-row{line-height:30px} .page_bar_1 .transition{-webkit-transition:all 0.4s ease;transition:all 0.4s ease;} .page_bar_1 .pages-row b{width:10%;height:1px;background-color:#000;display:inline-block;zoom:1;vertical-align:middle;margin:0 10px;} .page_bar_1 a:hover b{width:30%;background-color: #235bb8;} .page_bar_1 a{margin: 0 6px;} .page_bar_1 .pointernone{pointer-events:none;color:#ddd;} .page_bar_1 .pages-row .pointernone b{background-color:#ddd; } .page_bar_1 a{color: #666;} .page_bar_1 a:hover{color: #235bb8;} .page_bar_2 .page_arr_left,.page_bar_2 .page_arr_center,.page_bar_2 .page_arr_right{display: inline-block;} .page_bar_2 .page_arr_center a.current,.page_bar_2 .page_arr_center a:hover{background:#4473c3;color:#fff;border-radius:50% 50%;} .page_bar_2 a{font-size: 18px;color: #323232;} .page_bar_2 a{padding: 1px 10px;} .page_bar_2 .pages-row{line-height:30px;text-align: center} .page_bar_2 a{margin: 0 6px;} .page_bar_2 a{color: #666;} .page_bar_2 .page_arr_left a:hover,.page_bar_2 .page_arr_right a:hover{color:#4473c3;} /* ---------------------------------------------------- 12) end # 分页 css ------------------------------------------------------- */ .page-wrapper{max-width:820px;margin:30px auto;padding:0 15px;} /* ===== 产品卡片 ===== */ .product-card{background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);box-shadow:0 3px 40px rgba(36,36,36,.1);float:left;border-radius:8px;overflow:hidden;transition:.3s ease;position:relative;width:100%;display:flex; /* background:linear-gradient(135deg,#c8e4f5 0%,#ddeef6 40%,#e8f5fc 100%); background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%); */ margin-bottom:30px;overflow:hidden;box-shadow:1px 2px 6px rgba(0,80,140,0.10);} /* ===== 左侧图片区域 ===== */ .product-image-col{flex:0 0 250px;min-width:250px;max-width:250px; /* background:linear-gradient(160deg,#b5d8ee 0%,#c9e5f4 60%,#daeef8 100%); background-image: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%); */ display:flex;align-items:center;justify-content:center;padding:16px 12px;/* border-right:1px solid #aacfe8; */} .product-image-col img{max-width:200px;max-height:200px;object-fit:contain;display:block;} /* 图片占位符（无图片时显示） */ /* ===== 右侧内容区域 ===== */ .product-detail-col{flex:1;padding:0;min-width:0;} /* ===== 标题栏 ===== */ .product-title-bar{/* background:linear-gradient(90deg,#1a3a6b 0%,#1e4a8a 50%,#1a3a6b 100%); */ background-image: linear-gradient(228deg, #245094 0%, #1e4a8a 30%, #e4efe9 100%); display:flex;align-items:center;justify-content:space-between;padding:7px 14px 7px 10px;border-bottom:2px solid #0d2a55;} /* 左侧圆形图标 + 型号 */ .product-title-left{display:flex;align-items:center;gap:8px;} .title-icon{width:22px;height:22px;border-radius:50%; background:radial-gradient(circle at 35% 35%,#ffffff,#a8c8e8 60%,#4a7fb5);border:1.5px solid #6aa8d4;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,0.3);} .product-model{color:#0d2a55;font-size:20px;font-weight:bold;letter-spacing:1px;text-shadow:0 1px 3px rgba(0,0,0,0.4);} /* 右侧最大功率 */ .product-max-power{color:#ffffff;font-size:16px;font-weight:bold;letter-spacing:0.5px;text-align:right;white-space:nowrap;} /* ===== 内容区 ===== */ .product-content{padding:16px 19px 10px 18px;} .engine-speed{font-size:13px;color:#0d2a55;margin-bottom:7px;} /* ===== 规格参数表格 ===== */ .spec-table{width:100%;border-collapse:collapse;margin-bottom:9px;font-size:12.5px;} .spec-table th,.spec-table td{border:1px solid #8baec7;padding:3px 10px;text-align:center;background-color:rgba(255,255,255,0.6);} .spec-table th{background-color:rgba(255,255,255,0.75);font-weight:normal;text-align:left;color:#1a2a3a;white-space:nowrap;min-width:90px;} .spec-table td{color:#1a2a3a;} table.spec-table{margin:8px auto;max-width:100%;width:100%;background:var(--background_translucent_3);border-radius:var(--radius_big);} table.spec-table th{line-height:32px;text-align:center;} table.spec-table td{text-align:center;line-height:28px;padding:0px 0px;} table.spec-table tr:first-child td:first-child{border-top-left-radius:6px;} table.spec-table tr:first-child td:last-child{border-top-right-radius:6px;} table.spec-table tr:last-child td:first-child{border-bottom-left-radius:6px;} table.spec-table tr:last-child td:last-child{border-bottom-right-radius:6px;} table.spec-table tr:nth-child(2n+1){background:var(--background_translucent);} table.spec-table p{padding:5px 0px 5px 0px;} /* ===== 产品说明信息 ===== */ .product-info{font-size:12.5px;color:#1a2a3a;line-height:1.7;} .info-row{display:flex;flex-wrap:wrap;gap:0 30px;margin-bottom:1px;} .info-row span{white-space:nowrap;} .product-info .note{color:#1a2a3a;margin-top:2px;} /* ===== 分割线 ===== */ .product-card+.product-card{margin-top:0;} /* ===== 响应式处理 ===== */ @media (max-width:600px){.product-card{flex-direction:column;} .product-image-col{max-width:100%;flex:none;border-right:none;border-bottom:1px solid #aacfe8;padding:14px;} .product-title-bar{flex-direction:column;align-items:flex-start;gap:4px;} } .product-card:hover{box-shadow:rgba(0,0,0,0.6) 1px 2px 15px 0px;} .product-card:hover img{transform:scale(1.3);-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;} /* ---------------------------------------------------- 41) .single-title 详情单页 分栏布局，顶部布局，列表 ---------------------------------------------------- */ .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 #cacacf;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;} .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;} /* ---------------------------------------------------- 42) .single-info 详情单页 分栏布局，内容详情 Css ---------------------------------------------------- */ .single-info{position:relative;margin-bottom:24px;padding:18px 20px;} .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,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAVJJREFUWEftl7FKw1AUhv9rbmf1PRw6utkHEOoi6WPoE1ifQJ8gySKCOtRFRBKsDuIiDdZAURBFF50M2sFIzpGogVK03JA2cbh3S/i55zvfvYETgRyLj5erIKOO949FyKm5eHvvHEBV2jyruq1QDQ7n2DNXALEx+D7e2vl6lBYp76scHCzErtmCEPVhqEIAfus8BZk4wM+Zd/46tskDeI0mgLUyAdoAFsoDcM0XCDFdHoDX4FGfbRF3QANoA9qANqANaAPawD82EEWId1sAOJQWz6iO+5nGch41kDw9I3bbYOaTis21wgG4G4AuAzCwXrEoGV6V1ngMJPoPjoB+PzSIa8KBr1QdwFgA6KID7t1AgFYNC5uqxZNcbgB+eASdngHM+9LmpSzF8wFEEagbgHvXoQA3s3aegmYz8P1f4NNVME+39z5e3w4lkSMc3GXtPM1/AjYDFjDGddN5AAAAAElFTkSuQmCC);} .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:-2px;left:0;width:20px;height:20px;background-size:auto 100%;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAVJJREFUWEftl7FKw1AUhv9rbmf1PRw6utkHEOoi6WPoE1ifQJ8gySKCOtRFRBKsDuIiDdZAURBFF50M2sFIzpGogVK03JA2cbh3S/i55zvfvYETgRyLj5erIKOO949FyKm5eHvvHEBV2jyruq1QDQ7n2DNXALEx+D7e2vl6lBYp76scHCzErtmCEPVhqEIAfus8BZk4wM+Zd/46tskDeI0mgLUyAdoAFsoDcM0XCDFdHoDX4FGfbRF3QANoA9qANqANaAPawD82EEWId1sAOJQWz6iO+5nGch41kDw9I3bbYOaTis21wgG4G4AuAzCwXrEoGV6V1ngMJPoPjoB+PzSIa8KBr1QdwFgA6KID7t1AgFYNC5uqxZNcbgB+eASdngHM+9LmpSzF8wFEEagbgHvXoQA3s3aegmYz8P1f4NNVME+39z5e3w4lkSMc3GXtPM1/AjYDFjDGddN5AAAAAElFTkSuQmCC);} .entry-content{position:relative;} .entry-content p{line-height:28px;font-size:15px;padding:5px 5px 15px 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:#cfcbcb;color:#fff;} .entry-content .single-tags-box li:hover a{color:#fff;} .entry-content table{margin:8px auto;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{line-height:36px;text-align: center;border: 1px solid #fff;vertical-align: inherit;} .entry-content table td{text-align:center;line-height:36px;border:1px solid #fff;padding:0px 0px;vertical-align: inherit;} .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:last-child td:first-child{border-bottom-left-radius:6px;} .entry-content table tr:last-child td:last-child{border-bottom-right-radius:6px;} .entry-content table tr:nth-child(2n+1){background:var(--background_translucent);} .entry-content table p{padding: 5px 0px 5px 0px;} /* ---------------------------------------------------- 49) #news_pre_next news-pre news-next 下一页，上一页 Css样式 ------------------------------------------------------- */ #news_pre_next .news-pre-next-tit{line-height:64px;height:64px;overflow:hidden;} #news_pre_next .news-pre-next-tit span{display: inline-block;vertical-align: middle;font-weight:400;font-size:20px;line-height:32px;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-orient:vertical;} #news_pre_next .news-pre-next-info{position:relative;z-index:2;} #news_pre_next .news-pre-next-info{width:100%} #news_pre_next .news-pre .news-pre-next-info{text-align:left;padding:10px 8px 8px 60px;} #news_pre_next .news-next .news-pre-next-info{text-align:right;padding:10px 60px 8px 8px;} #news_pre_next .news-pre .next-jt{left:10px;} #news_pre_next .news-next .next-jt{right:10px} #news_pre_next .next-jt{position:absolute;top:calc(50% - 15px);color:#ccc} #news_pre_next .next-jt .icon{font-size:30px;background-color:rgba(255,255,255,0.45);line-height:34px;height:30px;width:30px;display:block;} #news_pre_next .news-pre-next-time{font-size:14px;padding:10px 2px;opacity:0.9;} /* ---------------------------------------------------- 07) start 公司简介 about-us-company ------------------------------------------------------- */ .about-us-company{width:100%;background-size:cover;} .about-us-company .company-list{padding:5px 10px;border-radius:10px;background:#fff;box-shadow:0px 10px 4px rgba(216,227,241,0.6);margin-top:30px;z-index:10;position:relative;} .about-us-company .company-list li{text-align:center;list-style:none;padding:15px 0;} .about-us-company .company-list li h3{font-size:2.4rem;line-height:3rem;color:var(--color_subs);margin-bottom:15px;font-weight:bold;} .about-us-company .company-list li p{font-size:1.2rem;line-height:2rem;} .index-title2{text-align: center;} .index-title2 span{display:block; padding: 10px 0;} .index-title2 span.a{ line-height:3rem;font-size: 3rem;; font-weight: 600;color: var(--color_eye);} .index-title2 span.b{ line-height:2rem; font-size: 1.2rem; padding: 0px;text-transform: uppercase;color: var(--deep_background_translucent);} /* ---------------------------------------------------- 4.1 ) #index_about_line ------------------------------------------------------- */ .index-about.index-about-bg{background-repeat:repeat-x;background-image:-webkit-linear-gradient(-60deg,#00a1e9 0%,var(--color_eye) 100%);background-image:linear-gradient(-60deg,#00a1e9 0%,var(--color_eye) 100%)} .index-about .index-about-bgimg{position:absolute;top:58%;transform:translateY(-50%);right:55%;opacity:.1;width:721px;height:382px;} .index-about .index-about-area .index-about-txt{font-size:1rem;color:var(--color_main);} .index-about .index-about-area .highlight{position:relative;padding-left:2rem;margin:1rem 0;font-size:0.9rem;color:var(--background);} .index-about .index-about-area .highlight:before{position:absolute;content:"";width:1rem;height:1rem;top:0.3rem;left:0;background:var(--background);} .index-about .index-about-area .index-about-founded{border-top:2px solid var(--background);border-bottom:2px solid var(--background);margin-top:1.8rem;} .index-about .index-about-area .index-about-founded .years-num{font-size:5rem;font-weight:600;color:var(--color_eye);line-height:5rem;text-align:center;display:block;text-shadow:var(--text_light_shadow);} .index-about .index-about-area .index-about-founded .years{text-align:center;letter-spacing:1px;display:block;padding-bottom:0.8rem;color:var(--background);} .index-about .index-about-area .index-about-founded .text-yerars{font-size:1rem;font-weight:400;font-style:italic;line-height:2rem;color:var(--color_main);border-left:2px solid var(--background);padding-left:2.5rem;} .index-about .index-about-video{border:10px solid rgba(255,255,255,0.24);border-radius:8px;} .index-about .index-about-video img{width:100%;height:100%;object-fit:cover;} .index-about2.index-about-bg{background-repeat:repeat-x;} .index-about2 .index-about-bgimg{position:absolute;top:58%;transform:translateY(-50%);right:55%;opacity:.1;width:721px;height:382px;} .index-about2 .index-about-area .index-about-txt{font-size:1rem;color:rgb(70 70 70);} .index-about2 .index-about-area .highlight{position:relative;padding-left:2rem;margin:1rem 0;font-size:0.9rem;color:rgb(66 66 66);} .index-about2 .index-about-area .highlight:before{position:absolute;content:"";width:1rem;height:1rem;top:0.3rem;left:0;background:rgb(110 106 106);} .index-about2 .index-about-area .index-about-founded{border-top:2px solid var(--background);border-bottom:2px solid var(--background);margin-top:1.8rem;} .index-about2 .index-about-area .index-about-founded .years-num{font-size:5rem;font-weight:600;color:var(--color_eye);line-height:5rem;text-align:center;display:block;text-shadow:var(--text_deep_shadow);} .index-about2 .index-about-area .index-about-founded .years{text-align:center;letter-spacing:1px;display:block;padding-bottom:0.8rem;color:rgb(88 86 86);} .index-about2 .index-about-area .index-about-founded .text-yerars{font-size:1rem;font-weight:400;font-style:italic;line-height:2rem;color:rgb(98 98 98);border-left:2px solid var(--background);padding-left:2.5rem;} .index-about2 .index-about-video{border:10px solid rgb(222 237 244);border-radius:8px;} .index-about2 .index-about-video img{width:100%;height:100%;object-fit:cover;} /* -------------------------------------------------------------------------- 70). Viewer.js js 支持的css 用于点击放大图片使用 -------------------------------------------------------------------------- */ .heku-box{background:var(--background_translucent_3);border-radius:var(--radius_big);-webkit-box-shadow:var(--box_shadow);box-shadow:var(--box_shadow);} .heku-img-box{background:var(--background_translucent_3);border-radius:var(--radius_big);} /* ---------------------------------------------------- 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;cursor: pointer;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(16, 37, 74);} #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(16, 37, 74);} #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(20, 50, 110, 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 ------------------------------------------------------- */ .contact-info-box .contact-info-tit{font-size:2rem;line-height:4rem;} .contact-info-box .contact-info-tit:hover{font-size:2.1rem;color:var(--color_eye);} .contact-info-box span,.contact-info-box p{font-size:1rem;line-height:1.5rem;color: var(--forecolor_translucent);} .contact-info-left li{list-style:none;position:relative;font-size:1.1rem;line-height:3rem;border-bottom:1px dashed var(--forecolor_translucent_3);} .contact-info-left li span{line-height:2rem;} .contact-info-left li:last-child{border-bottom:0px;} .contact-info-left li:hover{padding-left:20px;color: var(--color_eye);} .contact-info-left li:hover a{font-size:1.2rem;font-weight:600;color: var(--color_eye);} .contact-info-left li.contact-address{padding-top:0.8rem;line-height:1.8rem;} .mainCard{position:relative;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 8px 48px rgb(35 91 184 / 40%);} .mainCard:hover .rightBack{left:-9%;} .mainCard:hover .leftS ul{opacity:1;} .mainCard:hover #photo{-webkit-filter:blur(2px);filter:blur(2px);transform:translate(-10%,-50%);-ms-transform:scale(1.3);-webkit-transform:scale(1.3);transform:scale(1.3);top:-5%;left:-18%;} .mainCard:hover .rightS{left:50%;} .mainCard:hover .rightCon{left:-3%;text-shadow:1px 1px 6px #19242E;} .mainCard:hover #wrap .cube{transform:rotateX(30deg) rotateY(-320deg) rotateZ(10deg);-webkit-transition-duration:2s;transition-duration:2s;} #wrap{position:absolute;z-index:1;top:80%;left:72%;perspective:800px;perspective-origin:50% 50%;} #wrap .cube{transform:rotateX(30deg) rotateY(40deg) rotateZ(90deg);-webkit-transition-duration:1s;transition-duration:1s;position:relative;width:70px;height:70px;transform-style:preserve-3d;} #wrap .cube div{position:absolute;width:70px;height:70px;} #wrap .cube .back{transform:translateZ(-35px) rotateY(180deg);background-image:linear-gradient(-20deg,#1962b275 0%,#899da6b3 100%);} #wrap .cube .right{transform:rotateY(-270deg) translateX(35px);transform-origin:top right;background-image:linear-gradient(15deg,#899da6b3 0%,#1962b275 100%);} #wrap .cube .left{transform:rotateY(270deg) translateX(-35px);transform-origin:center left;background-image:linear-gradient(-20deg,#1962b275 0%,#899da6b3 100%);} #wrap .cube .top{transform-origin:top center;transform:rotateX(90deg) translateY(-35px);background-image:linear-gradient(-20deg,#1962b275 0%,#899da6b3 100%);} #wrap .cube .bottom{transform-origin:bottom;transform:rotateX(-90deg) translateY(35px);background-image:linear-gradient(15deg,#1962b275 0%,#899da6b3 100%);} #wrap .cube .front{transform:translateZ(35px);background-image:linear-gradient(120deg,#1962b275 0%,#899da6b3 100%);} #wrap2{position:absolute;z-index:1;top:27%;left:5%;perspective:800px;perspective-origin:50% 50%;} .cube2{transform:rotateX(110deg) rotateY(40deg) rotateZ(10deg);position:relative;width:60px;height:60px;transform-style:preserve-3d;} .cube2 div{-webkit-filter:blur(3px);filter:blur(3px);position:absolute;width:60px;height:60px;} .cube2 .back{background:rgba(38,53,69,0.3);transform:translateZ(-30px) rotateY(180deg);} .cube2 .right{background:rgba(58,81,105,0.3);transform:rotateY(-270deg) translateX(30px);transform-origin:top right;} .cube2 .bottom{background:rgba(45,63,82,0.3);transform-origin:bottom;transform:rotateX(-90deg) translateY(30px);} .cardTop{background:rgba(45,63,82,0.3);height:296px;overflow:hidden;position:relative;} .outer-round{width:180px;height:180px;position:relative;border-radius:50%;border:1px solid rgba(57,61,107,0.188);margin:0 auto;top:4%;margin-top: 25px;} .border-round{width:168px;height:168px;position:absolute;border-radius:50%;border:1px solid rgba(87,90,159,0.188);margin:0 auto;left:3%;top:3%;transition:ease-in all 0.8s;} .mainCard:hover .border-round{transform:scale(1.1,1.1);transition:ease-out all 0.8s;} .mainCard:hover .round2{transform:rotate(30deg);transition:ease-in-out 0.8s all;} .round2{width:150px;height:150px;border-radius:50%;background-color:#474545;position:absolute;background-repeat:no-repeat;background-size:cover;background-position:0px 0px;margin:0 auto;left:5%;top:5%;transition:ease-in all 0.8s;} .h-name{color:rgb(3 33 95);font-size:25px;font-weight:600;text-align:center;} .en_div .cn{height:0 !important;padding:0 !important;} .cn_div .en{height:0 !important;padding:0 !important;} .name{height:50px;padding-top:20px;overflow:hidden;transition:ease-out 1s all;} .company{font-size:20px;padding:20px 20px 10px 20px;overflow:hidden;height:70px;transition:ease-out 1s all;} .company.cn{height:36px;padding:10px 20px 5px 20px;} .adress.en{height:85px;} .adress.cn{height:50px;} .h-post{text-align:center;color:#fcfcfc;font-size:13px;font-weight:lighter;overflow:hidden;transition:ease-out 1s all;height:20px;padding-top: 6px;} .contact-item:first-child{height:36px;padding-top:4px;} .contact-item{border-bottom:#F0F0F0 1px solid;font-size:14px;transition:ease-out 1s all;height:32px;overflow:hidden;} .contact-item:hover{background-color:#E0EEFF;transition:ease-in-out 0.8s all;} .contact-row{display:flex;padding:5px 32px 5px 32px;align-items:center;} .contact-icon{width:12px;padding-right:16px;} .contact-item .contact-row a,.contact-item .contact-row span{color:#14326e;} /* ---------------------------------------------------- 14-15) #heku_footer 表单 TempParts/Footer/footer 模板：TempParts/Footer/heku-footer-1.php ------------------------------------------------------- */ #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.5rem;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;} /* ---------------------------------------------------- 14-15) #heku_footer 表单 TempParts/Footer/footer 模板：TempParts/Footer/heku-footer-3.php ------------------------------------------------------- */ /* ---------------------------------------------------- 06) start #archive_news_line #archive_news_line 新闻分类 模板：archive-news 文件：archive-news.php -------------------------------------------------------*/ .news-box-1 .news-item-box{border:1px solid #f6f6f8;border-bottom:0px;position:relative;background-color:#fff;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:#939393;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%;} /* ---------------------------------------------------- 06) end #archive_news_line #archive_news_line 新闻分类 模板：archive-news 文件：archive-news.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%;aspect-ratio:1/1;overflow:hidden;} .product-box-1 .product-item-box .product-img img{width:100%;} .product-box-1 .product-item-box .product-content{padding:3px 8px 6px 10px;/* height:215px; */overflow:hidden;} .product-box-1 .product-item-box .product-content .t{line-height:54px;height:54px;overflow:hidden;} .product-box-1 .product-item-box .product-content .t span{font-size:16px;line-height:27px;display:inline-block;vertical-align:middle;} .product-box-1 .product-item-box .product-content .b{line-height:34px;} .product-box-1 .product-item-box .product-content .b .brand{color:#5e5b5b;font-weight:bold;letter-spacing:1px;} .product-box-1 .product-item-box:hover .product-content .b .brand{color:var(--color_eye);} .product-box-1 .product-item-box .product-content .c{line-height:22px;font-size:14px;color:#838282;} .product-box-1 .product-item-box .product-content .c li{padding: 6px 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 #fff;padding:0px 0px;color:#838282;font-weight:lighter;font-size:12px;} .product-box-1 .product-item-box:hover .product-content .c table td{color:var(--color_eye);font-weight:400;} .product-box-1 .product-item-box .product-content .c span{font-size:12px;line-height:16px;color:#939393;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_eye);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_eye);} .product-box-1 .product-item-box:hover .product-content .t span{color:var(--color_subs);} .product-box-1 .product-item-box:hover .product-content .c span{color:var(--color_eye);} .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%;} /* ---------------------------------------------------- 30-40) end #archive 60-79分类 分类页样式 ------------------------------------------------------- */ .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%;aspect-ratio:1/1;overflow:hidden;} .product-box-1 .product-item-box .product-img img{width:100%;} .product-box-1 .product-item-box .product-content{padding:3px 8px 6px 10px;/* height:215px; */overflow:hidden;} .product-box-1 .product-item-box .product-content .t{line-height:54px;height:54px;overflow:hidden;text-align: center;} .product-box-1 .product-item-box .product-content .t span{font-size:16px;line-height:27px;display:inline-block;vertical-align:middle;text-align: center;} .product-box-1 .product-item-box .product-content .b{line-height:34px;} .product-box-1 .product-item-box .product-content .b .brand{color:#5e5b5b;font-weight:bold;letter-spacing:1px;} .product-box-1 .product-item-box:hover .product-content .b .brand{color:var(--color_eye);} .product-box-1 .product-item-box .product-content .c{line-height:22px;font-size:14px;color:#838282;} .product-box-1 .product-item-box .product-content .c li{padding: 6px 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 #fff;padding:0px 0px;color:#838282;font-weight:lighter;font-size:12px;} .product-box-1 .product-item-box:hover .product-content .c table td{color:var(--color_eye);font-weight:400;} .product-box-1 .product-item-box .product-content .c span{font-size:12px;line-height:16px;color:#939393;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_eye);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_eye);} .product-box-1 .product-item-box:hover .product-content .t span{color:var(--color_subs);} .product-box-1 .product-item-box:hover .product-content .c span{color:var(--color_eye);} .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%;} .news—item-ul_1 .news-item{box-shadow: 0px 2px 5px rgba(0,0,0,0.26);background: #f7f7f7;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: #898b8e;} .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: #235bb8;} .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: #235bb8;} .news—item-ul_1 .news-item .news-comt{padding-left: 40px;} .news—item-ul_1 .news-item:hover{background: #ddd} /* --- 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: #235bb8;} .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: #235bb8;} .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;} } /* ---------------------------------------------------- 30-40) end #archive 60-79分类 分类页样式 ------------------------------------------------------- */ /* ---------------------------------------------------- 16) #Carousel_Product_Img 10-20 公共样式 顶部导航 ------------------------------------------------------- */ .product-img-left{padding: 1rem 1rem 0.4rem 1rem;max-width: 480px;} #Carousel_Product_Img,#Carousel_Product_Img .product-img-inner,#Carousel_Product_Img .product-img-inner img{width:450px;height: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 #ddd} #Carousel_Product_Img .product-img-indicators li.active{border:2px solid #007aff;box-shadow:0 0 4px rgb(0 122 255/50%);} #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:#a69999;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;padding: 15px;width:525px;} .product-summary-title{height:78px;overflow:hidden;line-height:72px;padding:2px 0px;font-weight:bold;text-align:center;color:#14326e;} .product-summary-title span{display:inline-block;font-size:30px;line-height:36px;vertical-align: middle;} .product-summary-model{font-size:24px;line-height:48px;color:#235bb8;} .product-summary-detail{height:266px;overflow:hidden;padding:20px 0;} .product-summary-detail .b{line-height: 34px;} .product-summary-detail .b span{font-size:16px;} .product-summary-detail .b .brand{color:#5e5b5b;font-weight:bold;font-size:18px;letter-spacing:1px;} .product-summary-detail .b:hover .brand{color: var(--color_eye);} .product-summary-detail li{padding:10px 0;border-bottom:1px dashed #efefef;align-items:center;list-style:inside;color: #959595;} .product-summary-detail li:hover{color: var(--color_eye);} .product-summary-detail table{width: 100%;margin:0px auto;border-spacing:0;border-collapse:unset !important;max-width:100%;/* background:var(--background_translucent_3); */border-radius:var(--radius_big);padding-bottom: 12px;} .product-summary-detail table th{line-height:28px;} .product-summary-detail table td{line-height:28px;padding:0px 0px;color:#838282;font-weight:400;font-size:14px;} .product-summary-detail table td{color: #6e6c6c;font-weight: 400;} .product-summary-detail table tr:hover td{color: var(--color_eye);} .product-summary-detail span{font-size:14px;line-height:24px;color:#6c6c6c;display:inline-block;vertical-align:middle;font-weight:400;} .product-summary-btn{/* position:absolute;bottom:20px; */width: 100%;padding-top: 12px;} .product-summary-btn .contact-btn{display: none;} .product-summary-btn a{color:#14326e;text-shadow:none;width:calc( (100% - 90px - 2% )/2 - 2% );box-sizing:border-box;font-size:16px;min-width:180px;line-height:42px;border-radius:42px;margin-right:12px;margin-right:2%;margin-bottom:10px;padding:0;display:block;color:var(--color_subs);border:1px solid var(--color_subs);background:#fff0ee;text-align:center;text-decoration:none;float:left;} .product-summary-btn a:hover{color: var(--color_eye);border: 1px solid var(--color_eye);} /* --- 1) 小于780尺寸时候使用¸ --- sm --- */ @media only screen and (max-width:768px){ #Carousel_Product_Img .product-img-indicators li{width:60px;height:60px;} #Carousel_Product_Img,#Carousel_Product_Img .product-img-inner,#Carousel_Product_Img .product-img-inner img{width:100%;height:100%px;} #Carousel_Product_Img .product-img-indicators{width:100%;} #Carousel_Product_Img .carousel-control-next,#Carousel_Product_Img .carousel-control-prev{padding:20px 6px;bottom:-70px;} .product-summary-right{width:100%;padding:18px;} .product-summary-detail{height:initial;padding:15px 0 60px 0;} .product-summary-title span{font-size:25px;} .product-summary-model{font-size:24px;line-height:48px;} .product-summary-detail li{padding:10px 0;} .product-summary-btn a{font-size:14px;line-height:32px;} } /* --- 2) 大于768px尺寸 min --- */ @media(min-width:768px){ #Carousel_Product_Img .product-img-indicators li{width:60px;height:60px;} #Carousel_Product_Img,#Carousel_Product_Img .product-img-inner,#Carousel_Product_Img .product-img-inner img{width:320px;height:auto;} #Carousel_Product_Img .product-img-indicators{width:320px;} #Carousel_Product_Img .carousel-control-next,#Carousel_Product_Img .carousel-control-prev{padding:20px 6px;bottom:-70px;} .product-summary-detail{height:180px;padding:5px 0;} .product-summary-title span{font-size:20px;} .product-summary-model{font-size:18px;line-height:32px;} .product-summary-detail li{padding:4px 0;font-size:14px;} .product-summary-btn a{font-size:14px;line-height:32px;} .product-summary-right{width: 345px;} } /* --- 3) 大于992px尺寸 mid --- */ @media(min-width:992px){ #Carousel_Product_Img .product-img-indicators li{width:60px;height:60px;} #Carousel_Product_Img,#Carousel_Product_Img .product-img-inner,#Carousel_Product_Img .product-img-inner img{width:280px;height:auto;} #Carousel_Product_Img .product-img-indicators{width:280px;} #Carousel_Product_Img .carousel-control-next,#Carousel_Product_Img .carousel-control-prev{padding:20px 6px;bottom:-70px;} /* .product-summary-right{width:290px;} */ .product-summary-detail{height:226px;padding:10px 0;} .product-summary-title span{font-size:25px;} .product-summary-model{font-size:18px;line-height:36px;} .product-summary-detail li{padding:8px 0;font-size:14px;} .product-summary-detail{height:200px;padding:10px 0;font-size:14px;} .product-summary-btn a{font-size:14px;line-height:36px;} .product-summary-right{width: 620px;} } /* --- 4) 显示规定 大于1200尺寸时候使用 max --------- */ @media(min-width:1200px){ #Carousel_Product_Img .product-img-indicators li{width:70px;height:70px;} #Carousel_Product_Img,#Carousel_Product_Img .product-img-inner,#Carousel_Product_Img .product-img-inner img{width:360px;height:auto;} #Carousel_Product_Img .product-img-indicators{width:360px;} #Carousel_Product_Img .carousel-control-next,#Carousel_Product_Img .carousel-control-prev{padding: 25px 6px;bottom:-82px;} .product-summary-detail{height:270px;padding:10px 0 10px 10px;font-size:18px;} .product-summary-right{width: 380px;} .product-summary-btn a{font-size:15px;line-height:36px;} } @media(min-width:1667px){ #Carousel_Product_Img,#Carousel_Product_Img .product-img-inner,#Carousel_Product_Img .product-img-inner img{width:450px;height:auto;} #Carousel_Product_Img .product-img-indicators{width:450px;} .product-summary-btn a{font-size:16px;line-height:42px;} .product-summary-detail{height:370px;padding:10px 0 10px 10px;font-size:18px;} .product-summary-btn .contact-btn{display: inline-block;} .product-summary-right{width: 580px;} } /* ---------------------------------------------------- 16) #Carousel_Product_Img 10-20 公共样式 顶部导航 ------------------------------------------------------- */ /* -------------------------------------------------------------------------- 70). 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:#fff;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:#000;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 #fff;box-shadow:0 0 3px #fff;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:#fff;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:#ccc;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 #fff;box-shadow:0 0 3px #fff;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:rgba(0, 0, 0, .66)} .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} } /* -------------------------------------------------------------------------- 70). Viewer.js js 支持的css 用于点击放大图片使用 -------------------------------------------------------------------------- */ /* ============================================================ 12) #display_company_culture — Company Culture 区域 ============================================================ */ #display_company_culture{background:#fff;padding:80px 0;overflow:hidden;} #display_company_culture .container.index-title2{padding-bottom:40px;} #display_company_culture .index-title2 span.a{font-size:2.8rem;font-weight:700;color:#0d1e3d;letter-spacing:1px;margin-bottom:8px;} #display_company_culture .index-title2 span.b{font-size:1.2rem;color:#7a8ea8;line-height:1.6;font-weight:400;text-transform:uppercase;letter-spacing:2px;} #display_company_culture .index-title2 span.c{height:3px;background:#235bb8;width:50px;display:inline-block;margin:20px auto 0;border-radius:2px;} /* Culture 卡片样式 */ #display_company_culture .culture-box{padding:12px;} #display_company_culture .culture-item{height:380px;border-radius:12px;overflow:hidden;position:relative;box-shadow:0 6px 24px rgba(35,91,184,0.12);transition:all 0.4s ease;} #display_company_culture .culture-item:hover{transform:translateY(-8px);box-shadow:0 12px 36px rgba(35,91,184,0.2);} #display_company_culture .culture-img{width:100%;height:100%;position:relative;} #display_company_culture .culture-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;} #display_company_culture .culture-item:hover .culture-img img{transform:scale(1.05);} #display_company_culture .culture-background-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(13,30,61,0.85),rgba(35,91,184,0.9));opacity:0.7;transition:opacity 0.4s ease;} #display_company_culture .culture-item:hover .culture-background-overlay{opacity:0.85;} #display_company_culture .culture-content{position:absolute;bottom:0;left:0;width:100%;padding:28px;z-index:10;color:#fff;transition:all 0.4s ease;} #display_company_culture .culture-item:hover .culture-content{bottom:20px;} #display_company_culture .culture-content .t{font-size:1.6rem;font-weight:600;margin-bottom:12px;line-height:1.3;display:flex;align-items:center;} #display_company_culture .culture-content .t .icon{font-size:1.4rem;margin-right:10px;background:rgba(255,255,255,0.15);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);} #display_company_culture .culture-content .c{font-size:0.95rem;line-height:1.7;color:rgba(255,255,255,0.9);margin:0;opacity:0.9;} /* 响应式设计 */ @media (max-width:1199px){#display_company_culture{padding:60px 0;} #display_company_culture .culture-item{height:340px;} } @media (max-width:991px){#display_company_culture .culture-box{padding:8px;} #display_company_culture .culture-item{height:320px;} } @media (max-width:767px){#display_company_culture{padding:40px 0;} #display_company_culture .index-title2 span.a{font-size:2.2rem;} #display_company_culture .index-title2 span.b{font-size:1rem;} #display_company_culture .culture-item{height:300px;} #display_company_culture .culture-content{padding:20px;} #display_company_culture .culture-content .t{font-size:1.4rem;} } @media (max-width:575px){#display_company_culture .culture-item{height:280px;} #display_company_culture .culture-content .t{font-size:1.3rem;flex-direction:column;align-items:flex-start;} #display_company_culture .culture-content .t .icon{margin-bottom:8px;} } /* ============================================================ 11) #display_service_support — Service & Support 区域 ============================================================ */ #display_service_support{background:linear-gradient(135deg,#0d1e3d,#235bb8);background-image:url(../img/service-bg.jpg);background-position:center center;background-repeat:no-repeat;background-size:cover;position:relative;padding:80px 0;} #display_service_support .background-overlay{background:linear-gradient(135deg,rgba(13,30,61,0.85),rgba(35,91,184,0.9));height:100%;width:100%;top:0;left:0;position:absolute;} #display_service_support .container{position:relative;z-index:2;} #display_service_support .service-left-title{font-size:2.8rem;font-weight:700;color:#fff;margin-bottom:24px;line-height:1.2;text-shadow:0 2px 8px rgba(0,0,0,0.3);} #display_service_support .service-left-text{color:rgba(255,255,255,0.9);font-size:1.15rem;line-height:1.8;margin-bottom:32px;padding-right:30px;} #display_service_support .slider_btn{margin-top:20px;} #display_service_support .heku-btn-transparent{background:rgba(232,160,32,0.15);border:2px solid #e8a020;color:#fff;font-weight:600;padding:12px 32px;border-radius:8px;transition:all 0.3s ease;} #display_service_support .heku-btn-transparent:hover{background:#e8a020;color:#0d1e3d;transform:translateY(-2px);box-shadow:0 6px 20px rgba(232,160,32,0.4);} /* 服务卡片样式 */ #display_service_support .service-right-div{margin-bottom:24px;} #display_service_support .service-right-container{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:12px;padding:28px 24px;height:100%;transition:all 0.3s ease;backdrop-filter:blur(4px);} #display_service_support .service-right-container:hover{background:rgba(255,255,255,0.18);transform:translateY(-5px);border-color:rgba(255,255,255,0.3);box-shadow:0 8px 30px rgba(0,0,0,0.2);} #display_service_support .service-right-icon{margin-bottom:20px;text-align:center;} #display_service_support .service-right-icon i{font-size:3.2rem;color:#e8a020;text-shadow:0 2px 6px rgba(0,0,0,0.3);} #display_service_support .service-right-title{font-size:1.4rem;font-weight:600;color:#fff;margin-bottom:12px;text-shadow:0 1px 3px rgba(0,0,0,0.3);} #display_service_support .service-right-text{color:rgba(255,255,255,0.85);font-size:0.95rem;line-height:1.7;margin:0;height:auto;overflow:visible;} #display_service_support .service-right-text p{margin:0;} /* Service & Support 响应式设计 */ @media (max-width:1199px){#display_service_support{padding:60px 0;} #display_service_support .service-left-title{font-size:2.4rem;} #display_service_support .service-left-text{font-size:1.05rem;padding-right:20px;} } @media (max-width:991px){#display_service_support .row{flex-direction:column;} #display_service_support .index-service-left,#display_service_support .index-service-right{width:100%;padding:0 15px;} #display_service_support .service-left-text{padding-right:0;margin-bottom:40px;} #display_service_support .service-right-div{margin-bottom:20px;} } @media (max-width:767px){#display_service_support{padding:40px 0;} #display_service_support .service-left-title{font-size:2rem;} #display_service_support .service-left-text{font-size:1rem;} #display_service_support .service-right-icon i{font-size:2.8rem;} #display_service_support .service-right-title{font-size:1.2rem;} } @media (max-width:575px){#display_service_support .service-left-title{font-size:1.8rem;} #display_service_support .service-right-container{padding:20px 16px;} #display_service_support .service-right-icon i{font-size:2.4rem;} #display_service_support .service-right-title{font-size:1.1rem;} #display_service_support .service-right-text{font-size:0.9rem;} } /* ============================================================ 13) #display_index_product — Marine Products 产品展示 ============================================================ */ #display_index_product{background:#f4f7fc;padding:1.5rem 0 2rem;position:relative;overflow:hidden;} /* #display_index_product::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#235bb8,#e8a020,#235bb8);} */ /* #display_index_product .index-title .a{display:block;font-size:0.85rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#e8a020;margin-bottom:10px;} */ /* #display_index_product .index-title .b{display:block;font-size:2.2rem;font-weight:700;color:#0d1e3d;line-height:1.3;margin-bottom:14px;} */ /* #display_index_product .index-title .c{display:block;font-size:1rem;color:#5a6f8a;line-height:1.8;max-width:800px;} */ /* 产品卡片 */ #display_index_product .product-box{gap:0;} #display_index_product .product-box-1 > li,#display_index_product .product-box > li{list-style:none;padding:10px;} /* 产品卡片通用悬停效果 */ #display_index_product .item{background:#fff;border-radius:12px;overflow:hidden;border:1px solid #dde8f7;transition:transform 0.3s ease,box-shadow 0.3s ease,border-color 0.3s ease;position:relative;} #display_index_product .item:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(35,91,184,0.14);border-color:#235bb8;} #display_index_product .item::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#235bb8,#e8a020);transform:scaleX(0);transform-origin:left;transition:transform 0.3s ease;} #display_index_product .item:hover::after{transform:scaleX(1);} /* 响应式 */ @media (max-width: 991px) { #display_index_product { padding: 50px 0 60px; } #display_index_product .index-title .b { font-size: 1.8rem; } } @media (max-width: 767px) { #display_index_product { padding: 40px 0 50px; } #display_index_product .index-title .b { font-size: 1.5rem; } #display_index_product .index-title .c { font-size: 0.9rem; } } /* ============================================================ 14) #display_index_project — Methanol 项目展示 ============================================================ */ #display_index_project{background:linear-gradient(160deg,#0d1e3d 0%,#1a3a6e 50%,#235bb8 100%);padding:80px 0 90px;position:relative;overflow:hidden;} #display_index_project::before{content:'';position:absolute;top:-60px;right:-60px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(232,160,32,0.08) 0%,transparent 70%);pointer-events:none;} #display_index_project::after{content:'';position:absolute;bottom:-80px;left:-80px;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,0.04) 0%,transparent 70%);pointer-events:none;} #display_index_project .index-title .a{display:block;font-size:0.85rem;font-weight:700;letter-spacing:4px;text-transform:uppercase;color:#e8a020;margin-bottom:10px;} #display_index_project .index-title .b{display:block;font-size:2.2rem;font-weight:700;color:#ffffff;line-height:1.3;margin-bottom:14px;} #display_index_project .index-title .c{display:block;font-size:1rem;color:rgba(255,255,255,0.75);line-height:1.8;max-width:820px;} /* 项目卡片 */ #display_index_project .project-box{padding:8px;} #display_index_project .project-item{background:rgba(255,255,255,0.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.12);border-radius:14px;overflow:hidden;position:relative;transition:transform 0.35s ease,box-shadow 0.35s ease,background 0.35s ease;} #display_index_project .project-item:hover{transform:translateY(-8px);background:rgba(255,255,255,0.1);box-shadow:0 20px 50px rgba(0,0,0,0.3);border-color:rgba(232,160,32,0.4);} #display_index_project .project-img{width:100%;height:220px;overflow:hidden;} #display_index_project .project-img img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;} #display_index_project .project-item:hover .project-img img{transform:scale(1.06);} #display_index_project .project-content{padding:24px 22px 20px;} #display_index_project .project-content .t h2{font-size:1.25rem;font-weight:700;color:#ffffff;margin:0 0 12px;line-height:1.4;} #display_index_project .project-content .c p{font-size:0.92rem;color:rgba(255,255,255,0.72);line-height:1.75;margin:0;} #display_index_project .li-line{height:3px;background:linear-gradient(90deg,#235bb8,#e8a020);margin:0 22px 22px;border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform 0.4s ease;} #display_index_project .project-item:hover .li-line{transform:scaleX(1);} /* 响应式 */ @media (max-width:991px){#display_index_project{padding:60px 0 70px;} #display_index_project .index-title .b{font-size:1.8rem;} #display_index_project .project-img{height:200px;} } @media (max-width:767px){#display_index_project{padding:40px 0 50px;} #display_index_project .index-title .b{font-size:1.5rem;} #display_index_project .index-title .c{font-size:0.9rem;} #display_index_project .project-box{padding:0 0 16px;} } /* ============================================================ 15) #index_culture_line — 合作伙伴品牌展示 ============================================================ */ #index_culture_line{background:#ffffff;position:relative;} #index_culture_line .index-title2{text-align:center;margin-bottom:10px;} #index_culture_line .index-title2 span.a{display:inline-block;font-size:0.75rem;font-weight:700;letter-spacing:3px;color:#e8a020;background:rgba(35,91,184,0.08);padding:4px 14px;border-radius:20px;margin-bottom:16px;text-transform:uppercase;line-height:1.5rem;} #index_culture_line .index-title2 span.b{display:block;font-size:2rem;font-weight:700;color:#0d1e3d;line-height:1.35;margin-bottom:6px;text-transform: initial;} #index_culture_line .index-title2 span.c{display:block;font-family:"Noto Sans",Sans-serif;font-size:1.2rem;line-height:1.2rem;font-weight:lighter;color:#888;letter-spacing:0px;clear:both;} /* 品牌 Logo 卡片 */ #index_culture_line .partner-div{display:flex;align-items:center;justify-content:center;} #index_culture_line .partner-div .img{/* background:#f8fafd; *//* border: 1px solid #ffffff; */border-radius:10px;padding:20px 24px;display:flex;align-items:center;justify-content:center;/* min-height:90px; */width:100%;transition:all 0.3s ease;overflow:hidden;} #index_culture_line .partner-div .img:hover{border-color:#235bb8;box-shadow:0 8px 24px rgba(35,91,184,0.1);transform:translateY(-3px);background:#fff;} #index_culture_line .partner-div img{max-width:100%;/* max-height:60px; *//* object-fit:contain; *//* filter:grayscale(40%); */opacity:0.8;transition:all 0.3s ease;} #index_culture_line .partner-div .img:hover img{filter:grayscale(0%);opacity:1;} /* 响应式 */ @media (max-width: 991px) { #index_culture_line { padding: 50px 0 60px; } #index_culture_line .index-title2 span.b { font-size: 1.7rem; } } @media (max-width: 767px) { #index_culture_line { padding: 40px 0 50px; } #index_culture_line .index-title2 span.b { font-size: 1.4rem; } #index_culture_line .partner-div .img { min-height: 72px; padding: 14px 16px; } } @media (max-width: 575px) { #index_culture_line .partner-div img { max-height: 48px; } } /* ============================================================ 51) page-projects.php — 解决方案/案例列表页 ============================================================ */ .project-item-img img{width:100%;-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;} .project-item-li{width:31%;position:relative;margin:1%;overflow:hidden;border-radius:8px;height:425px;} .project-item-li:first-child{width:64%;} .project-item-li:first-child .project-item-img{height:auto;} .project-item-li:first-child .project-item-box{height:auto;background:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),color-stop(40%,rgba(0,0,0,0.7)));background:linear-gradient(rgb(0 0 0 / 5%) 0%,rgb(0 0 0 / 70%) 40%);width:100%;position:absolute;-webkit-transition:all 0.5s;transition:all 0.5s;z-index:4;padding:15px 20px 15px 25px;bottom:0px;} .project-item-li:first-child .project-item-box .project-item-text{height:auto;color:var(--background);position:relative;text-align:left;-webkit-transition:all 0.5s;transition:all 0.5s;z-index:4;bottom:-10px;font-size:14px;} .project-item-li:first-child .project-item-box .project-item-text .project-item-content{opacity:0.6;} .project-item-li .project-item-img{overflow:hidden;height:54%;} .project-item-li .project-item-box{width:100%;height:46%;position:absolute;padding:15px 20px 15px 25px;bottom:0px;} .project-item-li .project-item-box .project-item-text{color:var(--forecolor);height:auto;position:relative;text-align:left;-webkit-transition:all 0.5s;transition:all 0.5s;z-index:4;bottom:-5px;font-size:14px;} .project-item-li .project-item-box .project-item-text .project-item-title{font-size:24px;font-weight:bold;letter-spacing:2px;line-height:32px;padding:15px 0;} .project-item-li .project-item-box .project-item-text .project-item-content{padding-bottom:8px;opacity:0.6;} .project-item-li .project-item-box .project-item-text .read-more{opacity:0;-webkit-transition:all 0.5s;transition:all 0.5s;font-size:16px;vertical-align:middle;} .project-item-li .project-item-box .project-item-text .read-more .read-more-span{line-height:20px;vertical-align:middle;} .project-item-li .project-item-box .project-item-text .read-more i{padding-left:6px;font-size:15px;-webkit-transition:all 0.2s;transition:all 0.2s;color:#2476ff;vertical-align:middle;} .project-item-li .project-item-box .project-item-text .read-more:hover i{padding-left:12px;font-weight:bold;} .project-item-li:hover{box-shadow:0px 0px 10px 2px #235bb8;} .project-item-li:hover .project-item-img 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);} .project-item-li:hover .project-item-box .project-item-text{bottom:5px;} .project-item-li:hover .project-item-box .read-more{visibility:visible;opacity:1;} .project-item-li:hover .project-item-box .project-item-text .project-item-content{opacity:0.8;} @media(max-width:576px){ .project-item-li{width:88%;margin:6%;} .project-item-li:first-child{width:46%;} } @media(min-width:576px){ .project-item-li{width:46%;margin:2%;} .project-item-li:first-child{width:46%;} } @media(min-width:768px){ .project-item-li{width:92%;margin:4%;} .project-item-li:first-child{width:46%;} } @media(min-width:992px){ .project-item-li{width:46%;margin:2%;} .project-item-li:first-child{width:46%;} } @media(min-width:1200px){ .project-item-li{width:31%;margin:1%;} .project-item-li:first-child{width:64%;} } /* ============================================================ 52) page-about.php — 关于我们页 ============================================================ */ /* ---------- Section 1：统计条 ---------- */ .about-stats-strip{background:#fff;padding:1.5rem 0 1rem;border-bottom:1px solid rgba(35,91,184,0.08);} .about-stats-list{list-style:none;padding:0;margin:0;} .about-stats-list li{text-align:center;padding:20px 15px;border-right:1px solid rgba(35,91,184,0.1);position:relative;} .about-stats-list li:last-child{border-right:none;} .about-stats-list li::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;background:linear-gradient(135deg,rgba(35,91,184,0.08),rgba(35,91,184,0.02));border-radius:50%;opacity:0;transition:all 0.4s ease;} .about-stats-list li:hover::before{opacity:1;width:100px;height:100px;} .about-stats-list .stat-icon{font-size:2.2rem;color:#235bb8;margin-bottom:12px;position:relative;z-index:1;display:inline-block;width:56px;height:56px;line-height:56px;background:linear-gradient(135deg,rgba(35,91,184,0.1),rgba(35,91,184,0.03));border-radius:16px;transition:all 0.3s ease;} .about-stats-list li:hover .stat-icon{background:linear-gradient(135deg,#235bb8,#1a3a6e);color:#fff;transform:translateY(-4px);} .about-stats-list li h3{font-size:3rem;font-weight:700;color:#0d1e3d;line-height:1;margin-bottom:8px;position:relative;z-index:1;} .about-stats-list li .stat-plus{font-size:1.8rem;color:#e8a020;font-weight:400;margin-left:2px;} .about-stats-list li p{font-size:0.8rem;letter-spacing:2px;color:#888;margin:0;text-transform:uppercase;position:relative;z-index:1;} /* ---------- Section 2：公司简介 ---------- */ .about-intro-section{background:#f7f9fc;position:relative;overflow:hidden;} .about-intro-section::before{content:'';position:absolute;top:-60px;right:-60px;width:400px;height:400px;background:radial-gradient(circle,rgba(35,91,184,0.06) 0%,transparent 70%);border-radius:50%;} .about-intro-img-wrap{position:relative;display:inline-block;width:100%;} .about-intro-img{width:100%;border-radius:12px;box-shadow:0 20px 60px rgba(35,91,184,0.2);display:block;} .about-intro-img-badge{position:absolute;top:-16px;left:24px;background:#e8a020;color:#fff;font-size:1rem;font-weight:700;padding:6px 18px;border-radius:20px;box-shadow:0 4px 12px rgba(232,160,32,0.4);letter-spacing:1px;z-index:2;} .about-intro-img-overlay{position:absolute;bottom:20px;right:-16px;background:linear-gradient(135deg,#235bb8,#1a3a6e);border-radius:12px;padding:18px 24px;box-shadow:0 8px 24px rgba(35,91,184,0.35);text-align:center;z-index:2;} .about-intro-img-overlay .overlay-stat .num{display:block;font-size:2.4rem;font-weight:700;color:#e8a020;line-height:1;} .about-intro-img-overlay .overlay-stat .label{display:block;font-size:0.75rem;color:rgba(255,255,255,0.85);letter-spacing:1px;margin-top:4px;} .section-label{display:inline-block;font-size:0.75rem;font-weight:700;letter-spacing:3px;color:#235bb8;background:rgba(35,91,184,0.08);padding:4px 14px;border-radius:20px;margin-bottom:16px;text-transform:uppercase;line-height: 1.5rem;} .section-label.light{color:rgba(255,255,255,0.85);background:rgba(255,255,255,0.12);} .about-intro-title{font-size:2.2rem;font-weight:700;color:#0d1e3d;line-height:1.3;margin-bottom:20px;} .about-intro-lead{font-size:1.05rem;color:#555;line-height:1.8;margin-bottom:28px;border-left:3px solid #235bb8;padding-left:16px;} .about-strengths{margin-bottom:28px;} .strength-item{display:flex;align-items:flex-start;margin-bottom:20px;padding:16px;background:#fff;border-radius:10px;box-shadow:0 2px 12px rgba(35,91,184,0.07);transition:all 0.3s ease;} .strength-item:hover{transform:translateX(4px);box-shadow:0 6px 20px rgba(35,91,184,0.13);} .strength-icon{width:46px;height:46px;min-width:46px;background:linear-gradient(135deg,#235bb8,#1a3a6e);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-right:16px;} .strength-icon i{font-size:1.4rem;color:#fff;} .strength-body h4{font-size:1rem;font-weight:600;color:#0d1e3d;margin-bottom:4px;} .strength-body p{font-size:0.88rem;color:#777;line-height:1.6;margin:0;} .about-global-bar{display:flex;align-items:center;background:linear-gradient(135deg,#0d1e3d,#235bb8);border-radius:12px;padding:20px 28px;color:#fff;} .about-global-bar .global-num{font-size:3rem;font-weight:700;color:#e8a020;line-height:1;white-space:nowrap;margin-right:20px;} .about-global-bar .global-divider{width:2px;height:40px;background:rgba(255,255,255,0.25);margin-right:20px;flex-shrink:0;} .about-global-bar .global-text{font-size:0.95rem;line-height:1.6;color:rgba(255,255,255,0.9);} /* ---------- Section 3：Timeline ---------- */ .about-timeline-section{background:#dfffff;padding-bottom:60px;overflow:hidden;} .section-header .section-title{font-size:2rem;font-weight:700;color:#0d1e3d;margin:12px 0 10px;} .section-header .section-sub{color:#888;font-size:1rem;/* max-width:500px; */margin:0 auto;} .timeline-track{position:relative;padding:20px 0;} .timeline-track::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,#235bb8,rgba(35,91,184,0.1));transform:translateX(-50%);} .timeline-item{display:flex;justify-content:flex-end;padding-right:calc(50% + 40px);margin-bottom:40px;position:relative;} .timeline-item.right{justify-content:flex-start;padding-right:0;padding-left:calc(50% + 40px);} .timeline-dot{position:absolute;left:50%;top:24px;transform:translateX(-50%);width:18px;height:18px;border-radius:50%;background:#235bb8;border:3px solid #fff;box-shadow:0 0 0 3px rgba(35,91,184,0.3);z-index:2;} .timeline-card{background:#fff;border-radius:12px;padding:24px 28px;box-shadow:0 4px 24px rgba(35,91,184,0.1);max-width:450px;width:100%;border-left:4px solid #235bb8;transition:transform 0.3s ease,box-shadow 0.3s ease;} .timeline-item.right .timeline-card { border-left: none; border-right: 4px solid #e8a020; } .timeline-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(35,91,184,0.16); } .timeline-card .tl-year { font-size: 2rem; font-weight: 700; color: #235bb8; letter-spacing: 2px; margin-bottom: 8px; } .timeline-item.right .timeline-card .tl-year { color: #e8a020; } .timeline-card h4 { font-size: 1.15rem; font-weight: 600; color: #0d1e3d; margin-bottom: 8px; } .timeline-card p { font-size: 0.9rem; color: #666; line-height: 1.7; margin: 0; } /* ---------- Section 4：Service 卡片 ---------- */ .service-mini-stats{display:flex;gap:20px;margin-top:10px;} .mini-stat-item{text-align:center;background:rgba(255,255,255,0.12);border-radius:10px;padding:10px 18px;border:1px solid rgba(255,255,255,0.2);min-width:72px;} .mini-stat-item .mini-num{display:block;font-size:1.6rem;font-weight:700;color:#e8a020;line-height:1;} .mini-stat-item .mini-label{display:block;font-size:0.72rem;color:rgba(255,255,255,0.8);letter-spacing:1px;margin-top:4px;} .service-card{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.18);border-radius:12px;padding:24px 20px;height:100%;transition:all 0.3s ease;backdrop-filter:blur(4px);} .service-card:hover { background: rgba(255,255,255,0.18); transform: translateY(-4px); border-color: rgba(255,255,255,0.3); } .service-card-icon { margin-bottom: 14px; } .service-card-icon i { font-size: 2.4rem; color: #e8a020; } .service-card-title { font-size: 1.1rem; font-weight: 600; color: #fff; margin-bottom: 10px; text-shadow: 1px 1px 3px rgba(0,0,0,0.3); } .service-card-text { font-size: 0.88rem; color: rgba(255,255,255,0.85); line-height: 1.7; margin: 0; } /* About 响应式 */ @media (max-width: 991px) { .about-intro-img-overlay { right: 10px; bottom: 10px; } .timeline-track::before { left: 20px; } .timeline-item, .timeline-item.right { padding-left: 60px; padding-right: 0; justify-content: flex-start; } .timeline-dot { left: 20px; } .timeline-item.right .timeline-card { border-right: none; border-left: 4px solid #e8a020; } } @media (max-width: 767px) { .about-intro-title { font-size: 1.7rem; } .about-stats-strip { padding: 40px 0 30px; } .about-stats-list li h3 { font-size: 2.2rem; } .about-stats-list .stat-icon { font-size: 1.6rem; width: 46px; height: 46px; line-height: 46px; } .about-intro-img-overlay { display: none; } .about-global-bar { flex-direction: column; text-align: center; gap: 12px; } .about-global-bar .global-divider { width: 60px; height: 2px; margin: 0 auto; } .service-mini-stats { flex-wrap: wrap; } .timeline-card { max-width: 100%; } } @media (max-width: 575px) { .about-stats-strip { padding: 30px 0 20px; } .about-stats-list li { border-right: none; border-bottom: 1px solid rgba(35,91,184,0.08); padding: 16px 10px; } .about-stats-list li:last-child { border-bottom: none; } .strength-item { flex-direction: column; } .strength-icon { margin-bottom: 10px; } } /* ============================================================ 53) page-contact.php — 联系我们页 ============================================================ */ /* 主体布局 */ .contact-main-section { padding: 60px 0 80px; background: #fff; } .contact-footer-bridge { height: 2px; background: rgb(51, 79, 134); } .contact-main-row{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 8px 48px rgba(35,91,184,0.1);} /* 左侧信息面板 */ .contact-info-panel { height: 100%; display: flex; flex-direction: column; } .cip-header{position:relative;overflow:hidden;padding:44px 36px 40px;background:linear-gradient(135deg,#0d1e3d 0%,#1a3a6e 60%,#235bb8 100%);} .cip-header-bg{position:absolute;top:-40px;right:-40px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,0.04);} .cip-header-content { position: relative; z-index: 1; } .cip-header-content h2 { font-size: 1.7rem; font-weight: 700; color: #fff; margin-bottom: 12px; line-height: 1.3; } .cip-header-content p { font-size: 0.9rem; color: rgba(255,255,255,0.75); line-height: 1.7; margin: 0; } .cip-items { flex: 1; background: #fff; } .cip-item{display:flex;align-items:center;padding:18px 32px;border-bottom:1px solid rgba(35,91,184,0.06);text-decoration:none;transition:all 0.25s ease;color:inherit;} .cip-item:last-child{border-bottom:none;} .cip-item:hover{background:#f0f5ff;padding-left:40px;text-decoration:none;} .cip-icon{width:44px;height:44px;min-width:44px;border-radius:12px;background:linear-gradient(135deg,rgba(35,91,184,0.1),rgba(35,91,184,0.03));display:flex;align-items:center;justify-content:center;margin-right:16px;transition:all 0.25s ease;} .cip-icon i { font-size: 1.3rem; color: #235bb8; } .cip-icon-green { background: rgba(37,211,102,0.08); } .cip-icon-green i { color: #25d366; } .cip-item:hover .cip-icon { background: #235bb8; transform: scale(1.08); } .cip-item:hover .cip-icon i { color: #fff; } .cip-item:hover .cip-icon-green { background: #25d366; } .cip-item:hover .cip-icon-green i { color: #fff; } .cip-body { flex: 1; min-width: 0; } .cip-label { display: block; font-size: 0.72rem; letter-spacing: 1px; text-transform: uppercase; color: #999; margin-bottom: 3px; } .cip-value { display: block; font-size: 0.95rem; font-weight: 600; color: #0d1e3d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cip-value-span{display: block; font-size: 0.95rem; color: #999999; overflow: hidden; text-overflow: ellipsis;} .cip-item-addr .cip-value { white-space: normal; line-height: 1.5; font-size: 0.9rem; font-weight: 400; color: #555; } .cip-arrow { font-size: 0.9rem; color: #ccc; margin-left: 10px; transition: all 0.25s ease; } .cip-item:hover .cip-arrow { color: #235bb8; transform: translateX(4px); } .cip-footer { display: flex; background: linear-gradient(135deg, #f7f9ff, #eef2fb); border-top: 1px solid rgba(35,91,184,0.06); padding: 20px 16px; } .cip-footer-item{flex:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-right:1px solid rgba(35,91,184,0.08);transition:all 0.2s ease;} .cip-footer-item:last-child { border-right: none; } .cip-footer-item:hover { background: rgba(35,91,184,0.04); border-radius: 8px; } .cip-footer-item i { font-size: 1.4rem; color: #235bb8; } .cip-footer-item span { font-size: 0.72rem; color: #666; letter-spacing: 0.5px; font-weight: 500; } /* 右侧表单面板 */ .contact-form-panel { padding: 44px 48px; height: 100%; background: #fff; } .cfp-header { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 2px solid rgba(35,91,184,0.08); } .cfp-header h2 { font-size: 1.7rem; font-weight: 700; color: #0d1e3d; margin-bottom: 8px; } .cfp-header p { font-size: 0.9rem; color: #888; line-height: 1.6; margin: 0; } .contact-form-panel .form-control{border-radius:10px;border:1.5px solid #e2e8f0;padding:12px 16px;font-size:0.95rem;transition:all 0.25s ease;background:#fafbfd;} .contact-form-panel .form-control:focus { border-color: #235bb8; box-shadow: 0 0 0 3px rgba(35,91,184,0.1); background: #fff; } .contact-form-panel textarea.form-control { min-height: 110px; resize: vertical; } .contact-form-panel .heku-btn { border-radius: 10px; padding: 14px 40px; font-size: 1rem; font-weight: 600; letter-spacing: 0.5px; } /* Contact 响应式 */ @media (max-width: 991px) { .contact-main-row { border-radius: 12px; } .contact-form-panel { padding: 36px 28px; } } @media (max-width: 767px) { .contact-main-section { padding: 20px 0 50px; } .contact-main-row { border-radius: 0; box-shadow: none; } .contact-form-panel { padding: 28px 20px; } .cip-header { padding: 30px 24px; } .cip-item { padding: 16px 20px; } .cip-footer-item span { font-size: 0.65rem; } }