@charset "utf-8";

:root {
     scroll-behavior: smooth;
}

/* frame */
a { transition:all 0.5s;}
body{min-width: 1400px;font-weight:400;background: #fff;}
.clear{clear: both;}
#content{zoom: 1;width: 100%;}
.row{width: 1400px; margin: auto; position: relative;}
.row::before,
.row::after { content:""; clear:both; display:table;}

#header { display: none;}
#headerChannel{ position:relative; width:100%; height: 760px; background: url(../img/bg-banner.jpg) no-repeat center center; background-size: cover; }
#headerChannel .logo{display:block;width:300px;height:50px;float: left;overflow:visible;margin: 41px 0 100px;}
#headerChannel .logo img { height:100%; width:auto;}
#headerChannel .links {height: 36px;position: absolute;top: 48px;right: 0;}
#headerChannel .links a { height:36px;background-color: rgb(0 0 0 / 34%);border-radius: 18px;line-height: 36px;text-align: center;color: #fff;font-size: 16px; float:left; padding:0 1.5em; box-shadow: 0 5px 5px rgb(0 0 0 / 10%); margin-left:10px;}
#headerChannel .links a:hover {background: #fff; color: #22468c}

#headerChannel .con { position: absolute; left: 0; top: 207px; width: 100%; line-height: 1.5; color: #fff; text-align: center; }
#headerChannel .con h1 { font-size: 92px; text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.25); font-weight: bold; }
#headerChannel .con h3 { font-size: 18px; }
#headerChannel .con .intro { padding: 24px 30px; width: 940px; margin: 20px auto 0; font-size: 16px; text-indent: 2em; background: rgba(0, 0, 0, 0.1); border-radius: 10px; line-height: 28px; text-align: justify; }

#headerChannel .p-01 { position: absolute; right: -37px; top: 173px;  }
#headerChannel .p-01::before { display: block; content: ''; width: 189px; height: 455px; background: url(../img/pic-01.png) no-repeat; animation: floating 5s ease infinite; }
#headerChannel .p-02 { position: absolute; left: -40px; top: 281px; }
#headerChannel .p-02::before { display: block; content: ''; width: 197px; height: 213px; background: url(../img/pic-02.png) no-repeat; animation: floating 5s ease infinite 2s; }

@keyframes floating {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}

.rowGroup { padding: 80px 0; overflow: hidden; }

.rowBox > .hd { text-align: center; }
.rowBox > .hd h3 { font-size: 40px; font-weight: bold; color: #1E5BB3; line-height: 54px; }
.rowBox > .hd .intro { margin-top: 17px; font-size: 16px; color: #666; line-height: 30px; }
.rowBox > .bd { padding-top: 50px; }

/* 安全中心 */
#aqzx { background: url(../img/bg-01.jpg) no-repeat center top; background-size: cover; }
#aqzx .list { position: relative; width: 1000px; height: 500px; margin: 0 auto; background: url(../img/bg-02.png) no-repeat 0 0; }
#aqzx .list li { position: absolute; width: 130px; text-align: center; }
#aqzx .list .pic { position: relative; width: 80px; height: 80px; margin: 0 auto; overflow: hidden; }
#aqzx .list .pic::after { display: block; margin: 10px; width: 60px; height: 60px; content: ''; border-radius: 50%; background: #fff url(../img/icons-aqzx.png) no-repeat 18px 14px; background-size: auto 32px; }
#aqzx .list .pic::before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; content: ''; background: url(../img/round-01.png) no-repeat; background-size: contain; }
#aqzx .list .title { font-size: 18px; font-weight: bold; color: #3592FD; line-height: 30px; margin-top: 5px; }

#aqzx .list .li1 { left: -30px; top: 290px; }
#aqzx .list .li2 { left: 50px; top: 140px; }
#aqzx .list .li3 { left: 230px; top: 5px; }
#aqzx .list .li4 { right: 230px; top: 5px; }
#aqzx .list .li5 { right: 50px; top: 140px; }
#aqzx .list .li6 { right: -30px; top: 290px; }

#aqzx .list .li2 .pic::after { background-position: -57px 14px; }
#aqzx .list .li3 .pic::after { background-position: -132px 14px; }
#aqzx .list .li4 .pic::after { background-position: -206px 14px; }
#aqzx .list .li5 .pic::after { background-position: -279px 14px; }
#aqzx .list .li6 .pic::after { background-position: -352px 14px; }

#aqzx .list li .con,
#aqzx .list li .pic::after,
#aqzx .list li .pic::before { transition: all ease 0.6s; }

#aqzx .list li:hover .con { transform: scale(1.3); }
#aqzx .list li:hover .pic::before { transform: rotate(180deg); }
#aqzx .list li:hover .pic::after { transform: rotateY(180deg); }


/* CC攻击防护 */
#ccgjfh { background: #1c5cb4 url(../img/bg-03.jpg) no-repeat center bottom; background-size: contain; }
#ccgjfh .rowBox > .hd h3 { color: #fff; }
#ccgjfh .list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
#ccgjfh .list li { position: relative; flex: 1 0 690px; }
#ccgjfh .list .con { height: 100%; padding: 25px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 10px; color: #fff; }
#ccgjfh .list .intro { font-size: 16px; line-height: 30px; padding-left: 2em; background: url(../img/icon-safe.png) no-repeat 0 5px; text-align: justify; }

#ccgjfh .list .con,
#ccgjfh .list .intro  { transition: all ease 0.6s; }

#ccgjfh .list li:hover .con { background: #fff; transform: translate(-5px, -5px); box-shadow: 5px 5px 0 rgb(0, 39, 94, 0.3); }
#ccgjfh .list li:hover .intro { color: #1c5cb4; background-image: url(../img/icon-safe-hover.png); }

/* SQL */
#sql .list { position: relative; height: 786px; margin: 20px 0; }
#sql .list li { position: absolute; left: 0; top: 0; width: 100%; box-sizing: border-box; cursor: pointer; }
#sql .list li a { position: relative; display: flex; gap: 28px; align-items: center; padding: 42px 56px 42px 106px; }
#sql .list li::before { position: absolute; content: ''; left: 0; top: -47px; right: 0; bottom: 0; background: linear-gradient(180deg, #fff 0%, #fff 100%); border-radius: 20px; transform: perspective(105px) rotateX(2deg); transform-origin: center bottom; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); }
#sql .list .con { position: relative; flex: 1 0 0%; height: 272px; }
#sql .list .title { position: relative; left: 0; font-size: 32px; line-height: 42px; font-weight: bold; color: #1E5BB3; margin-bottom: 30px; transform: translate(-24px, 254px) scale(0.75); transform-origin: left top; }
#sql .list .intro { padding-top: 23px; border-top: 1px solid #C3CFE6; font-size: 16px; line-height: 30px; text-align: justify; color: #666; opacity: 0; visibility: hidden; transform: translateX(20%); }
#sql .list .intro p { margin-bottom: 1em; padding-left: 2em; background: url(../img/icon-safe-hover.png) no-repeat 0 5px; }
#sql .list .intro p:last-of-type { margin-bottom: 0; }
#sql .list .pic { position: relative; width: 384px; height: 240px; background: url(../img/pic-03.png) no-repeat center center; background-size: contain; opacity: 0; visibility: hidden; transform: scale(0); }
#sql .list .more { position: absolute; line-height: 30px; right: 95px; bottom: 26px; padding-right: 51px; font-size: 14px; color: #666; background: url(../img/icon-more.png) no-repeat right center; }

#sql .list .li1 .pic { background-image: url(../img/pic-03.png); height: 220px; }
#sql .list .li2 .pic { background-image: url(../img/pic-04.png); height: 220px; }
#sql .list .li3 .pic { background-image: url(../img/pic-05.png); height: 240px; }
#sql .list .li4 .pic { background-image: url(../img/pic-06.png); height: 196px; }
#sql .list .li5 .pic { background-image: url(../img/pic-07.png); height: 190px; }
#sql .list .li6 .pic { background-image: url(../img/pic-08.png); height: 208px; }

#sql .list .li1 { z-index: 6; top: 0; }
#sql .list .li2 { z-index: 5; top: 85px; }
#sql .list .li3 { z-index: 4; top: 170px; }
#sql .list .li4 { z-index: 3; top: 255px; }
#sql .list .li5 { z-index: 2; top: 340px; }
#sql .list .li6 { z-index: 1; top: 425px; }

#sql .list li,
#sql .list li::before,
#sql .list .title,
#sql .list .intro,
#sql .list .pic,
#sql .list .more { transition: all ease 0.8s; }
#sql .list li { transition-property: top; }
#sql .list .title { transition-property: left; }

#sql .list li.on::before { background: linear-gradient(180deg, #AEC8FF 0%, #E7F6FF 50%, #E7F6FF 100%); }
#sql .list li.on .title { transform: none; }
#sql .list li.on .intro { opacity: 1; visibility: visible; transform: translateY(0); }
#sql .list li.on .pic { opacity: 1; visibility: visible; transform: scale(1); }
#sql .list li.on .more { opacity: 0; visibility: hidden; }

#sql .list li:hover .title { left: -15px; }
#sql .list li.on:hover .title { left: 0; }
#sql .list li:hover .more { transform: translateX(15px); }

/* 上传防护 */
#scfh { background: url(../img/bg-04.jpg) no-repeat center top; background-size: cover; }
#scfh .listWrap { position: relative; margin-bottom: 20px; }
#scfh .listWrap > .line { position: absolute; left: 0; top: 45px; right: 0; margin: 0 auto; width: 349px; height: 366px; }
#scfh .listWrap > .line .in { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%; background: url(../img/line.png) no-repeat center center; animation-name: lineZoom; animation-duration: 1s; }
#scfh .listWrap > .icon { position: absolute; left: 0; top: 115px; right: 0; bottom: 0; margin: 0 auto; width: 220px; height: 233px; background: url(../img/pic-09.png) no-repeat center center; background-size: contain; }

#scfh .list { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; }
#scfh .list li { position: relative; z-index: 1; width: 530px; }
#scfh .list li .con { background: #fff; border-radius: 10px; padding: 15px 17px; }
#scfh .list .intro { font-size: 16px; line-height: 30px; padding-left: 2em; background: url(../img/icon-safe-hover.png) no-repeat 0 5px;text-align: justify; color: #666; }

#scfh .list .li1 { margin-left: 50px; }
#scfh .list .li2 { margin-right: 50px; }
#scfh .list .li3 { margin-top: 30px; }
#scfh .list .li4 { margin-top: 30px; }
#scfh .list .li5 { margin-top: -10px; }
#scfh .list .li6 { margin-top: 20px; }
#scfh .list .li7 { margin: -10px 0 0 50px; }
#scfh .list .li8 { margin: 20px 50px 0 0; }

@keyframes lineZoom {
    0% {
        width: 0;
        height: 0;
        border-radius: 500px;
    }
    100% {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

#scfh .list .con,
#scfh .list .intro  { transition: all ease 0.6s; }

#scfh .list li:hover .con { background: #1c5cb4; transform: translate(-5px, -5px); box-shadow: 4px 4px 0 rgb(0, 0, 0, 0.15); }
#scfh .list li:hover .intro { color: #fff; background-image: url(../img/icon-safe.png); }


/* 安全策略 */
#aqcl { background: #1c5cb4 url(../img/bg-03.jpg) no-repeat center bottom; background-size: contain; }
#aqcl .rowBox > .hd h3 { color: #fff; }
#aqcl .list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding: 20px 0; }
#aqcl .list li { position: relative; flex: 1 0 690px; }
#aqcl .list .con { height: 100%; padding: 25px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 10px; color: #fff; }
#aqcl .list .title { font-size: 32px; line-height: 40px; }
#aqcl .list .intro { margin-top: 20px; font-size: 16px; line-height: 30px; text-align: justify; }
#aqcl .list .intro p { margin-bottom: 1em; padding-left: 2em; background: url(../img/icon-safe.png) no-repeat 0 5px; }
#aqcl .list .intro p:last-of-type { margin-bottom: 0; }

#aqcl .list .con,
#aqcl .list .title,
#aqcl .list .intro p { transition: all ease 0.6s; }

#aqcl .list li:hover .con { background: #fff; transform: translate(-5px, -5px); box-shadow: 5px 5px 0 rgb(0, 39, 94, 0.3); }
#aqcl .list li:hover .title { color: #1c5cb4; }
#aqcl .list li:hover .intro p { color: #1c5cb4; background-image: url(../img/icon-safe-hover.png); }


/* 安全日志审计 */
#aqrzsj .list li { padding: 15px 0; border-bottom: 1px solid #D9D9D9; }
#aqrzsj .list .intro { font-size: 16px; line-height: 30px; padding-left: 2em; background: url(../img/icon-safe-hover.png) no-repeat 0 5px;text-align: justify; color: #666; }

#aqrzsj .list .con,
#aqrzsj .list .intro { transition: all ease 0.6s; }

#aqrzsj .list li:hover .con { transform: translateX(-15px); }
#aqrzsj .list li:hover .intro { color: #1c5cb4; }