﻿/* Copyright © Chennan All rights reserved.
 * This source code is Written by Chennan in CE∑Chengdu.
 * You can use it with permission from the author. */
:root{
   --c:#11b4bc;
   --n:#0d4da1;
  --w:#fff;
  --b:#333;
  --d:#666;
  --f:#f5f5f5;
  --dd:#ddd;
}
body {
	/* opacity: 0; */
	transition: padding-top 1s;
   
}
body.cn-show {
	opacity: 1;
}
body.cn-make {
	opacity: 1;
}
body.cn-show .wd-scroll-animation:not(.wd-no-scroll-animation).wd-scrolled {
	animation: fadeInUp 0.8s both;
}
.wd-scroll-animation:not(.wd-no-scroll-animation) {
	opacity: 0;
}
.cn-make .wd-scroll-animation {
	opacity: 1;
} 


* {word-break:break-word;}

@keyframes puBanner {
from {
	transform: translateY(100px);
	opacity: 0;
}
to {
	transform: translateY(0px);
	opacity: 1;
}
}
@keyframes bannerimg {
from {
	transform: scale(1.2);
}
to {
	transform: scale(1);
}
}
@keyframes jiantoushang {
from {
	opacity: 0;
}
to {
	opacity: 1;
}
}

@keyframes imgcircle {
from {
	transform: translate(-50%,-50%) rotate(0deg);
}
to {
	transform: translate(-50%,-50%) rotate(360deg);
}
}
.pub_banner {
	width: 100%;
	height: auto;
  padding-top:80px;
}
.pub_banner .b_container {
	width: 100%;
	height: auto;
}
.pub_banner .b_container .p_slide {
	width: 100%;
	height: 500px;
	position: relative;
	overflow: hidden;
 
}
.pub_banner .b_container .p_slide .p_img {
	width: 100%;
	animation: bannerimg 2s;
	background: #000;
  height:100%;
}
.pub_banner .b_container .p_slide .p_img img {
	width: 100%;
	height: 100%;
  object-fit:cover;
	opacity: 0.8;
}
.pub_banner .b_container .p_slide .p_info {
	width: 100%;
	padding: 20px;
	max-width: 1400px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 3;
	text-align: center;
}
.pub_banner .b_container .p_slide .p_info h1 {
	animation: puBanner 2s;
  font-size:40px;
  letter-spacing:3px;
}
.pub_banner .b_container .p_slide .p_info h6 {
	animation: puBanner 3s;
  font-size:24px;
  letter-spacing:3px;
  border:1px #fff solid;
  padding:10px 20px;
  display:inline-block;
  width:auto;
  margin:10px ;
}
.pub_banner .b_container .p_slide .p_info p {
	animation: puBanner 4s;
  font-size:16px; text-transform:uppercase;
}
 
.onlineBox {
	position: fixed;
	right: 5px;
	bottom: 10%;
	z-index: 999;
	width: 50px;
}
.onlineBox ul {
	background: #fff;
	border-radius: 5px;
	box-shadow: 0 0 15px rgba(0,0,0,0.1);
	margin-bottom: 10px;
}
.onlineBox ul li {
	display: block;
	border-bottom: 1px #eee solid;
	margin: 0;
}
.onlineBox ul li:last-child {
	border: none;
}
.onlineBox ul li a {
	display: flex;
	align-items: center;
	width: 100%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	justify-content: center;
	position: relative;
}
.onlineBox ul li a svg {
	fill: #666;
}
.onlineBox ul li a p {
	position: absolute;
	right: 58px;
	background: var(--c);
	padding: 5px 15px;
	border-radius: 5px;
	top: 50%;
	transform: translate(-50px,-50%);
	color: #fff;
	width: max-content;
	font-size: 14px;
	line-height: 30px;
	opacity: 0;
	visibility: hidden;
	transition: all 0.6s;
}
.onlineBox ul li a p:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-left: 10px solid var(--c);
	border-bottom: 5px solid transparent;
	position: absolute;
	right: -8px;
	top: 50%;
	transform: translate(0,-50%);
}
.onlineBox ul li.weixin a p {
	padding: 5px;
	background: #fff;
}
.onlineBox ul li.weixin a p:after {
	border-left: 10px solid #fff;
}
.onlineBox ul li a p img {
	width: 130px;
}
.onlineBox ul li a:hover svg {
	fill: var(--c);
}
.onlineBox ul li a:hover p {
	transform: translate(0,-50%);
	opacity: 1;
	visibility: visible;
}

.pubNav .p_loopitem a:hover, .pubNav .p_loopitem a.light {color:var(--c) !important;}
.pubNav .p_loopitem a:hover:after, .pubNav .p_loopitem a.light:after {width:100%  !important;}


.pubTitle { margin-bottom:30px; position:relative; width:100%;}
.pubTitle h2 {font-size:2.5rem; color:var(--b); margin:0; font-weight:bold;}
.pubTitle p {color:var(--c); text-transform:uppercase; font-size:16px;}
.pubTitle a {display:inline-block; position:absolute; right:0; top:50%; transform:translate(0,-50%); padding:0 40px; background:linear-gradient(to right, #019680, #22c286); border-radius:5px; line-height:40px; color:var(--w);}

.pubTitle.wcolor h2,.pubTitle.wcolor p{color:#fff;}

@media (max-width:798px) { 
  
  .e_loop-4.pubNav .p_list {justify-content:start !important; margin:0 -5px; max-width:none !important;}
  .pubNav .p_loopitem {flex:0 0 50%; padding:5px !important;}
  .pubNav .p_loopitem p {padding:0 !important;}
  .pubNav .p_loopitem a {border:1px #ddd solid; text-align:center; line-height:40px;}
  .pub_banner .b_container .p_slide {height:auto;}
.pub_banner .b_container .p_slide .p_img img {height:300px; width:auto; position:relative;left:50%;transform:translate(-50%,0);} 
.pub_banner .b_container .p_slide .p_info h1 {font-size:30px;}
.pub_banner .b_container .p_slide .p_info h6 {font-size:20px;}

  
}
@media (min-width:799px) and (max-width: 1024px) { 
	
}

/* 移动端导航样式 */
.mobile-nav-toggle {
    display: none;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 25px;
    cursor: pointer;
    z-index: 1000;
}

.mobile-nav-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--b);
    margin: 5px 0;
    transition: all 0.3s;
}

/* 移动端菜单激活状态 */
.mobile-nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

@media (max-width:798px) { 
    .mobile-nav-toggle {
        display: block;
    }
    
    .p_level1Box {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--w);
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        z-index: 999;
    }
    
    .p_level1Box.active {
        display: block;
    }
    
    .p_level1Item {
        display: block;
        width: 100%;
        border-bottom: 1px solid var(--dd);
    }
    
    .p_level1Item > .p_menuItem {
        padding: 10px 15px;
    }
    
    .p_level2Box {
        position: static !important;
        width: 100%;
        display: none;
        background: var(--f);
    }
    
    .p_level1Item:hover .p_level2Box {
        display: block;
    }
    
    .p_level2Item > .p_menuItem {
        padding: 8px 25px;
    }
    
    .e_navigationA-12.header {
        position: relative;
        padding: 10px 0;
    }
    
    .logorim {
        max-width: 90%;margin-left: 5px;    }
    
    .logorim img {
        max-width: 100%;
        height: auto;
    }
}
