: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样式 --- 30 - 39) 分类页面相关 CSS样式 --- 40 - 49) 详情页相关 CSS样式 -- 43) 新闻详情页 ，展示模板： css样式 --- 50 - 59) 部分单页相关 CSS样式 --- 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') format('woff2'), url('../fonts/iconfont.woff') format('woff'), url('../fonts/iconfont.ttf') format('truetype'); } .iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} .icon-x:before{content:"\e624";} .icon-x1:before{content:"\e628";} .icon-twitter:before{content:"\e697";} .icon-x2:before{content:"\e6c5";} .icon-facebook1:before{content:"\ecb1";} .icon-boat:before{content:"\e61c";} .icon-chuan:before{content:"\e61e";} .icon-chuan1:before{content:"\e64c";} .icon-boat1:before{content:"\e61f";} .icon-md-boat:before{content:"\e66c";} .icon-si-glyph-boat:before{content:"\e622";} .icon-shipping:before{content:"\e647";} .icon-chuan2:before{content:"\e78e";} .icon-Ship-2:before{content:"\e897";} .icon-chuanbo:before{content:"\e63b";} .icon-Boat:before{content:"\e947";} .icon-shipin:before{content:"\e620";} .icon-right:before{content:"\e604";} .icon-a-lian1564662:before{content:"\e605";} .icon-end_right:before{content:"\e606";} .icon-start_left:before{content:"\e607";} .icon-left:before{content:"\e60b";} .icon-next_right:before{content:"\e60c";} .icon-chunbo-shouye:before{content:"\e60e";} .icon-a-dizhi1:before{content:"\e60f";} .icon-youxiang1:before{content:"\e610";} .icon-a-12:before{content:"\e611";} .icon-a-13:before{content:"\e613";} .icon-a-11:before{content:"\e615";} .icon-a-15:before{content:"\e616";} .icon-time-3:before{content:"\e619";} .icon-a-jiajianzujianjiahao:before{content:"\e61a";} .icon-jianshao:before{content:"\e61b";} .icon-gongsi:before{content:"\e60d";} .icon-company-fill:before{content:"\e617";} .icon-user:before{content:"\e627";} .icon-Realname:before{content:"\e653";} .icon-tubiaozhizuomoban-:before{content:"\e60a";} .icon-yanzhengmazhuangtaiICO:before{content:"\e614";} .icon-xiezi:before{content:"\e650";} .icon-yanzhengma:before{content:"\e702";} .icon-highquality:before{content:"\ebbe";} .icon-zhiliang-xuanzhong:before{content:"\e623";} .icon-shop:before{content:"\e61d";} .icon-jindianguangguang:before{content:"\e674";} .icon-shopping:before{content:"\e869";} .icon-quality:before{content:"\e6c3";} .icon-safety-icon:before{content:"\e686";} .icon-efficiency-o:before{content:"\e689";} .icon-icon_efficiency:before{content:"\e62b";} .icon-reliability-1:before{content:"\e976";} .icon-reliability:before{content:"\e977";} .icon-icon-efficiency:before{content:"\e687";} .icon-nav_reliability_icon:before{content:"\e815";} .icon-efficiency:before{content:"\e6df";} .icon-skype:before{content:"\e857";} .icon-fangxiang2:before{content:"\e600";} .icon-zuoguanbi:before{content:"\e6ae";} .icon-youzhankai:before{content:"\e6ba";} .icon-fangxiangjiantou-you:before{content:"\e601";} .icon-fangxiangjiantou-xia:before{content:"\e603";} .icon-logo-2:before{content:"\2131";} .icon-gongju1:before{content:"\e998";} .icon-miaozhun:before{content:"\e635";} .icon-erji:before{content:"\e65f";} .icon-fuwu1:before{content:"\e694";} .icon-peixun:before{content:"\e6cf";} .icon-peixun1:before{content:"\efc2";} .icon-zhenduan-01:before{content:"\e621";} .icon-fuwu2:before{content:"\e66f";} .icon-home2-copy:before{content:"\efc3";} .icon-socialwhatsapp:before{content:"\e928";} .icon-home:before{content:"\e609";} .icon-youtube:before{content:"\e87c";} .icon-dianhua:before{content:"\e62a";} .icon-whatsapp:before{content:"\e69f";} .icon-youxiang:before{content:"\e612";} .icon-linying:before{content:"\e6ff";} .icon-adress:before{content:"\e608";} .icon-dianhua1:before{content:"\e602";} .icon-youxiang2:before{content:"\e70c";} .icon-facebook:before{content:"\e641";} .icon-dianhua2:before{content:"\e64f";} .icon-a-HomeTechnology:before{content:"\e618";} /* ---------------------------------------------------- 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:3rem;font-size:2.6rem;font-weight:600;color:var(--color_main);padding:1.8rem 2rem 1rem 0;float:left;} .index-title span.b{font-family:"Noto Sans",Sans-serif;font-size:1.2rem;font-weight:400;letter-spacing:0px;padding:3rem 0 0.8rem 0;float:left;} .index-title span.c{font-family:"Noto Sans",Sans-serif;font-size:1.05rem;line-height:2rem;font-weight:lighter;letter-spacing:0px;text-align:left;clear:both;color: #817e7e;} .banner-breadcrumb a,.banner-breadcrumb span{padding:5px 3px;line-height:40px;opacity:0.78;color: #e5e1e1;} .banner-breadcrumb a:hover,.banner-breadcrumb a:hover .icon{color:var(--color_subs);opacity:1;} .banner-breadcrumb a.home-bar .icon{padding-right:8px;font-size:18px;} .banner-breadcrumb .icon-right{font-size:12px;line-height:43px;} .heku-breadcrumb a,.heku-breadcrumb span{padding:5px 3px;line-height:40px;opacity:0.78;} .heku-breadcrumb a:hover{color:var(--color_eye);opacity:1;} .heku-breadcrumb a.home-bar .icon{padding-right:8px;font-size:18px;} .heku-breadcrumb .icon-right{font-size:12px;line-height:43px;} /*-------------------------------------------------- 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(--color_main);} .heku-btn-transparent:hover{background:var(--light_background_translucent_5);;color:var(--color_eye);border-color:var(--color_eye);text-shadow:var(--text_light_shadow);} .heku-btn-focus{background:rgb(0,101,163);border-color:rgba(255,255,255,0.2);} .heku-btn-focus:hover{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;} .heku-btn-light{background: transparent;border-color: rgba(255, 255, 255, 0.986);color:rgba(255, 255, 255, 0.986);} .heku-btn-light:hover{background:#ffffff6b;color:var(--color_main);border-color:var(--color_main);text-shadow:0.5px 0.5px 0.5px rgb(199 196 196);box-shadow:0px 0px 4px rgba(0,0,0,.6);-moz-box-shadow:0px 0px 7px rgba(0,0,0,.6);-webkit-box-shadow:0px 0px 4px rgba(0,0,0,.6);} /* ---------------------------------------------------- 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;} } /* --- 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 ------------------------------------------------------- */ /* ---------------------------------------------------- 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;padding-inline-start: 10px;margin-block-start: 0em;margin-block-end: 0em;} .single-meta-row .single-meta-box li{padding:0 10px 0 0px;} .single-meta-row .single-tags-box{display:inline-block;} .single-meta-row .single-tags-box li{list-style:none;display:inline-block;margin-right:10px;} /* ---------------------------------------------------- 42) .single-info 详情单页 分栏布局，内容详情 Css ---------------------------------------------------- */ .single-info{position:relative;margin-bottom:24px;padding:20px 25px;} .single-info p{line-height:24px;font-size:15px;padding:0px 5px 10px 5px;color:var(--forecolor);text-shadow:var(--text_shadow);} .single-info img{max-width:100%;display:inline-block;max-width:100% !important;height:auto;cursor:-webkit-zoom-in;cursor:zoom-in;margin:5px 0;border-radius:var(--radius-img);-webkit-transition:-webkit-transform 0.35s,-webkit-box-shadow 0.35s;transition:transform 0.35s,box-shadow 0.35s;transition:transform 0.35s,box-shadow 0.35s,-webkit-transform 0.35s,-webkit-box-shadow 0.35s;} .single-info img:hover{-webkit-transform:translateY(-5px);transform:translateY(-5px);-webkit-box-shadow:0 34px 20px -24px rgba(136,161,206,0.3);box-shadow:0 34px 20px -24px rgba(136,161,206,0.3);} .single-info .hekutitle01{margin:8px 0 10px;font-weight:500;line-height:30px;font-size:20px;} .single-info .hekutitle01{color:var(--forecolor);text-shadow:var(--text_shadow);} .single-info .hekutitle01::before{position:relative;display:inline-block;vertical-align:middle;content:" ";margin-right:8px;background-position:center;background-repeat:none;top:-2px;left:0;width:20px;height:20px;background-size:auto 100%;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDM1MiwgMjAyMC8wMS8zMC0xNTo1MDozOCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVENEZBRTBCNTYyNzExRUZCMDNERTIwQTA1RUE4MERBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjVENEZBRTBDNTYyNzExRUZCMDNERTIwQTA1RUE4MERBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NUQ0RkFFMDk1NjI3MTFFRkIwM0RFMjBBMDVFQTgwREEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NUQ0RkFFMEE1NjI3MTFFRkIwM0RFMjBBMDVFQTgwREEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz77QgEAAAABHklEQVR42mL8//8/A7GAkZERhZ93ZKIBEyOD/9//v30YGZh1jrzdcQIobHDWb4cgsWayMJAJ8o9MKAC6px/EZmZkhTnQgVRzWMi0fAPQMn8GKgAm8nxOHctJDgFQnMOCnVqApBAAJrgABioDUqPAYUAdAMyyBgPqAGDi4x/oKGAYdcCoA0YdMOqAUQeMOmDUAYPWAX/+/4Y1Wj4OiAO+/v0MY14YEAd8/P0O0mpiYDxA844JtuB/8f0JJPiZGDbQPQQefrvD8PP/d5D3G8757qRvFLz5+YLh2Y8HIN9vPOe3cwLdcgEo2O9+vc5w7fO5j/8Z/hee899JVqeFpDQAimNg0/zCo293LV7+eHLhx79vO4BeWAAM9gfkegQgwADFAmnjrHSVjAAAAABJRU5ErkJggg==");} .single-info ul{margin-block-start:1em;margin-block-end:1em;padding-inline-start:40px} .hekutitle01{margin:8px 0 10px;font-weight:500;line-height:30px;font-size:20px;} .hekutitle01{color:var(--forecolor);text-shadow:var(--text_shadow);} .hekutitle01::before{position:relative;display:inline-block;vertical-align:middle;content:" ";margin-right:8px;background-position:center;background-repeat:none;top:-2px;left:0;width:20px;height:20px;background-size:auto 100%;background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDM1MiwgMjAyMC8wMS8zMC0xNTo1MDozOCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjEgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVENEZBRTBCNTYyNzExRUZCMDNERTIwQTA1RUE4MERBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjVENEZBRTBDNTYyNzExRUZCMDNERTIwQTA1RUE4MERBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NUQ0RkFFMDk1NjI3MTFFRkIwM0RFMjBBMDVFQTgwREEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NUQ0RkFFMEE1NjI3MTFFRkIwM0RFMjBBMDVFQTgwREEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz77QgEAAAABHklEQVR42mL8//8/A7GAkZERhZ93ZKIBEyOD/9//v30YGZh1jrzdcQIobHDWb4cgsWayMJAJ8o9MKAC6px/EZmZkhTnQgVRzWMi0fAPQMn8GKgAm8nxOHctJDgFQnMOCnVqApBAAJrgABioDUqPAYUAdAMyyBgPqAGDi4x/oKGAYdcCoA0YdMOqAUQeMOmDUAYPWAX/+/4Y1Wj4OiAO+/v0MY14YEAd8/P0O0mpiYDxA844JtuB/8f0JJPiZGDbQPQQefrvD8PP/d5D3G8757qRvFLz5+YLh2Y8HIN9vPOe3cwLdcgEo2O9+vc5w7fO5j/8Z/hee899JVqeFpDQAimNg0/zCo293LV7+eHLhx79vO4BeWAAM9gfkegQgwADFAmnjrHSVjAAAAABJRU5ErkJggg==");} .entry-content{position:relative;} .entry-content p{line-height:24px;font-size:15px;padding:5px 5px 10px 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;} .entry-content table td{text-align:center;line-height:36px;border:1px solid #fff;padding:0px 0px;} .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_main);} .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-color: #fff;box-shadow: 0 3px 40px rgba(36,36,36,.1);border-radius:var(--radius_big);-webkit-box-shadow: 0 3px 40px rgba(36,36,36,.1);} .heku-img-box{background:var(--background_translucent_3);border-radius:var(--radius_big);} /* ---------------------------------------------------- 14-15) #Heku_Form_Model 表单 模板：TempParts/From/model-from 文件：TempParts/From/heku-model-from-1.php ------------------------------------------------------- */ #Heku_Form_Model .modal-content{border:0px solid rgba(0,0,0,.2);border-radius:.6rem;background:#dddddd73;box-shadow:2px 5px 15px rgb(0 0 0 / 0.8)} #Heku_Form_Model .modal-content{background:#ddddddd6;} #Heku_Form_Model .modal-header{padding:0.6rem 1rem;letter-spacing:1px;font-size:20px;text-shadow:var(--text_shadow);} #Heku_Form_Model .modal-header button:focus{outline:0px auto #FFF} #Heku_Form_Model .canvasreset{line-height:40px;display:inline-block;position:absolute;padding-left:8px;color:#5a5c67;} #Heku_Form_Model .form-control{box-shadow:0px 0px 6px rgb(40 40 40);} /* ---------------------------------------------------- 14-15) #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 #from_code.input-val{height: 38px;} */ #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: #efefef;outline: none;background: #fafafa;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: #686777;} #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;} .canvasreset{line-height: 40px;display: inline-block;position: absolute;padding-left: 8px;color: #b8b7b2;} #canvas{background:#ddd;display:inline-block;border:0.5px solid #fff;cursor:pointer;border-radius:6px;margin-left:10px;} /* ---------------------------------------------------- 25) .contact-info 联系我们 模板：TempParts/From/page-contact.php 文件：TempParts/From/page-contact-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;} /* ---------------------------------------------------- 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{margin:15px 14px 18px 18px;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:18px;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: 4px 0;} .product-box-1 .product-item-box .product-content .c table{width:100%;margin:0px auto;border-spacing:0;border-collapse:unset !important;max-width:100%;border-radius:var(--radius_big);} .product-box-1 .product-item-box .product-content .c table th{line-height:25px;} .product-box-1 .product-item-box .product-content .c table td{line-height:28px;border:1px solid #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:18px;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{margin:15px 14px 18px 18px;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:18px;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_main);} .product-box-1 .product-item-box .product-content .c{line-height:20px;font-size:14px;color:#838282;} .product-box-1 .product-item-box .product-content .c li{padding: 4px 0;} .product-box-1 .product-item-box .product-content .c table{width:100%;margin:0px auto;border-spacing:0;border-collapse:unset !important;max-width:100%;border-radius:var(--radius_big);} .product-box-1 .product-item-box .product-content .c table th{line-height:25px;} .product-box-1 .product-item-box .product-content .c table td{line-height:28px;border:1px solid #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_main);font-weight:400;} .product-box-1 .product-item-box .product-content .c span{font-size:12px;line-height:18px;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_main);position:absolute;left:0;bottom:0;transition:all 0.5s ease;} .product-box-1 .product-item-box:hover{box-shadow:1px 2px 15px 0px rgba(0,0,0,0.6);} .product-box-1 .product-item-box:hover .product-content .c{color:var(--color_main);font-size: 16px;} .product-box-1 .product-item-box:hover .product-content .t span{color:var(--color_main);font-weight: bold;} .product-box-1 .product-item-box:hover .product-content .c span{color:var(--color_main);} .product-box-1 .product-item-box:hover .product-content .product-readmore{font-weight:bold;} .product-box-1 .product-item-box:hover .product-content .product-time{font-weight:bold;} .product-box-1 .product-item-box:hover .li-line{width:100%;} .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;margin-left: 20px;} .product-summary-title{height:78px;overflow:hidden;line-height:72px;padding: 2px 0px;} .product-summary-title h2{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_main);} .product-summary-detail li{padding:10px 0;border-bottom:1px dashed #93e0a896;align-items:center;list-style:inside;color: #959595;} .product-summary-detail li:hover{color: var(--color_main);} .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_main);} .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:12px;width: 100%;} .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_main);border:1px solid var(--color_main);background:#fff0ee;text-align:center;text-decoration:none;float:left;} .product-summary-btn a:hover{color: #fff;border: 1px solid var(--color_main);background: rgb(52 136 73 / 76%);} /* --- 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;margin-left: 2px;} .product-summary-detail{height:initial;padding:15px 0 60px 0;} .product-summary-title h2{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;} .product-img-left{max-width:100%;} } /* --- 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:320px; */} #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 h2{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: 315px;} } /* --- 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:360px;/* height:280px; */} #Carousel_Product_Img .product-img-indicators{width:360px;} #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 h2{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: 500px;} } /* --- 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:400px;/* height:360px; */} #Carousel_Product_Img .product-img-indicators{width:400px;} #Carousel_Product_Img .carousel-control-next,#Carousel_Product_Img .carousel-control-prev{padding: 25px 6px;bottom:-82px;} .product-summary-detail{height:250px;padding:10px 0 10px 10px;font-size:18px;} .product-summary-right{width: 600px;} .product-summary-btn a{font-size:15px;line-height:36px;} .product-img-left{max-width:415px;} } @media(min-width:1667px){ #Carousel_Product_Img,#Carousel_Product_Img .product-img-inner,#Carousel_Product_Img .product-img-inner img{width:450px;/* height:450px; */} #Carousel_Product_Img .product-img-indicators{width:450px;} .product-img-left{max-width:460px;} .product-summary-btn a{font-size:16px;line-height:42px;} .product-summary-detail{height:280px;padding:10px 0 10px 10px;font-size:18px;} .product-summary-btn .contact-btn{display: inline-block;} .product-summary-right{width: 720px;} } /* ---------------------------------------------------- 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 用于点击放大图片使用 -------------------------------------------------------------------------- */ /* ---------------------------------------------------- 02) Display 首页图文 模块css -------------------------------------------------------*/ #display_company_culture .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;} #display_company_culture .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;} #display_company_culture .culture-item:hover .culture-content{top:50%;bottom:auto;height:auto;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);} #display_company_culture .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;} #display_company_culture .culture-item{height:30rem;border-radius:8px;} #display_company_culture .culture-img{width:100%;height:100%;} #display_company_culture .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;} #display_company_culture .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);} #display_company_culture .culture-content .c{font-size:1rem;line-height:1.3rem;color:#f3eded;text-shadow:1px 1px 2px rgba(0,0,0,0.6);}