@charset "utf-8";

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

.rowTi {text-align:center;margin-bottom: 40px;padding:10px;height: 40px;line-height: 40px;}
.rowTi h2 { font-size:40px; font-weight:bold; color:#333; opacity:0; transform:translateY(100px); transition:all 1s; }
.rowTi h2:before { display:inline-block; content:""; width:1px; height:1px; background:#333; margin-right:20px; vertical-align:middle; transition:all 0.5s; transition-delay:1s;}
.rowTi h2:after { display:inline-block; content:""; width:1px; height:1px; background:#333; margin-left:20px; vertical-align:middle; transition:all 0.5s; transition-delay:1s;}
.rowTi h2.animated { opacity:1;  transform:translateY(0)}
.rowTi h2.animated:before { width:100px;}
.rowTi h2.animated:after { width:100px;}

#header { display: none;}
#headerGG{ position:relative; width:100%; height: 1077px; background:#f8f8f8 url(../img/header.jpg) no-repeat top center;  }
#headerGG .logo{display:block;width:300px;height:50px;float: left;overflow:visible;margin: 41px 0 100px;}
#headerGG .logo img { height:100%; width:auto;}
#headerGG .links {height: 36px;position: absolute;top: 48px;right: 0;}
#headerGG .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;}
#headerGG .links a:hover {background: #ccc; color: #22468c}
#headerGG .ggpc { position:absolute; top:313px; left:677px; width:676px; height:711px; background:url(../img/pcimg.png) no-repeat;transition:all 1.2s;  transform:scale(0.5); opacity:0; }
#headerGG .ggmsg { position:absolute; top:36px; left:442px; width:507px; height:295px; background:url(../img/msgimg.png) no-repeat; opacity:0; transition:all 1.5s; transition-delay:0.3s; transform:scale(0.6)}
#headerGG .ggfont { position:absolute; top:282px; left:512px; width:580px; line-height:94px; opacity:0; transition:all 1.5s; transition-delay:0.8s; font-size:18px; color:#fff; font-weight:400; text-shadow:0 4px 4px rgb(0 0 0 / 25%)}
#headerGG .ggfont h1 { font-size:90px; font-weight:bold;}
#headerGG .ggpc.animated { transform:scale(1); top:113px; opacity:1;}
#headerGG .ggmsg.animated { opacity:1; top:186px;; left:842px; transform:scale(1)}
#headerGG .ggfont.animated { left:12px; opacity:1;}

#performance {position: relative;margin-top:-415px;z-index: 9;padding: 50px 0 60px;}
#performance .rowTi h2 { color:#fff; }
#performance .rowTi h2:before,
#performance .rowTi h2:after { background:#fff; }

@keyframes phdli {
    100% {
        transform: scale(1);
    }
    80% {
        transform: scale(0.9); opacity:1;
    }
    0% {
        transform: scale(3); opacity:0;
    }
}
@keyframes phdlii {
    100% {
        transform: rotateY(0)scale(1); opacity:1;
    }
    30% {
        transform: rotateY(90deg)scale(2); opacity:0.5;
    }
    50% {
        transform: rotateY(180deg)scale(2); opacity:0.5;
    }
    0% {
        transform: rotateY(0)scale(1); opacity:1; 
    }
}

.performanceBox .hd {height:290px; margin-bottom:50px;}
.performanceBox .hd ul {margin:0 -33px;display:flex;justify-content: space-between;}
.performanceBox .hd li { flex:1; float:left; width:300px; height:290px; background:#fff; border-radius:20px; box-shadow:0 3px 5px rgb(36 39 119 / 30%); margin:0 33px; text-align:center; font-size:24px; font-weight:bold; transition:all 0.5s;}
.performanceBox .hd li i { transition:all 1s; background:url(../img/phdliibg.png) no-repeat; width:90px; height:90px; display:block; margin:58px auto 40px;}
.performanceBox .hd li i:before { content:""; display:block; width:100%; height:100%; background:url(../img/phdliico1.png) no-repeat center; transition:all .5s;}
.performanceBox .hd .li2 i:before { background:url(../img/phdliico2.png) no-repeat center;}
.performanceBox .hd .li3 i:before { background:url(../img/phdliico3.png) no-repeat center;}
.performanceBox .hd .li4 i:before { background:url(../img/phdliico4.png) no-repeat center;}
.performanceBox .hd li.on { background:#4591EA; color:#fff; }
.performanceBox .hd li.on i { filter:brightness(5); animation: phdli 0.6s ease-in-out; animation-fill-mode: forwards;}
.performanceBox .hd li.on i:before { animation: phdlii 1s ease-in-out; }
.performanceBox .bd { line-height:40px; font-size:18px;}
.performanceBox .bd p {text-indent:2em;margin-bottom: 1em;}

#funList {background:#fff;padding: 70px 0 0;}
.funBox { position:relative; height:auto; background:#f8f8f8; border-radius:20px; margin-bottom:30px;}
.funBox h3 {position:relative;float: left;height:60px;background:#4591EA;border-radius:30px 30px 30px 0;font-size:24px;font-weight:bold;line-height:60px;color:#fff;text-align:center;z-index:1;margin-bottom:10px;padding: 0 47px;}
.funBox h3:before { content:""; position:absolute; left:10%; width:6px; height:6px; border:2px solid #fff; border-radius:50%; top:50%; margin-top:-4px;}
.funBox .bg { position:absolute; top:10px; left:0; display:block;  height:60px; width:240px; background:#89F1FD; opacity:.5; border-radius:30px 30px 30px 0; transform:rotate(5deg); }
.funBox ul {padding:20px;clear: both;}
.funBox li {padding: 2px 0 2px 45px;font-size:18px;line-height: 40px; transition:all 1s;}
.funBox li:hover { background:#fff; color:#35a507 }
.funBox p { line-height:30px; font-size:16px; color:#666; background:#fff; padding:13px 20px; margin:6px 0;}

.funBox li svg{float:left;width: 40px;height: 40px;transform:scale(.5);position: absolute;left: 0;}
@keyframes suc{100%{transform: scale(.5);} 20%{transform: scale(1.1);} 0%{transform: scale(1);}}
.funBox li:hover svg{animation: suc 0.5s ease-in-out; animation-delay: 1.6s; animation-fill-mode: forwards; transform:scale(1);}
.circle{stroke-dasharray: 0; stroke-dashoffset: 0; stroke: #888;}
@keyframes circle{from{stroke-dasharray: 119; stroke-dashoffset: 119;} to{stroke-dasharray: 119; stroke-dashoffset: 238;}}
.funBox li:hover svg .circle{animation: circle 1s ease-in-out; animation-delay: .8s; animation-fill-mode: forwards;stroke-dasharray: 119; stroke-dashoffset: 119; stroke: #68E534;}
.tick{stroke-dasharray: 0; stroke-dashoffset: 0; stroke: #888;}
@keyframes tick{from{stroke-dashoffset: 60;} to{stroke-dashoffset: 0;}}
.funBox li:hover svg .tick{animation: tick 1.2s ease-in-out; animation-fill-mode: forwards; stroke-dasharray: 60; stroke-dashoffset: 60; stroke: #68E534;}

.techSupportList li a:hover { background-color:#4591ea; background-color:linear-gradient(to left , #0013ba, #4591ea ); color:#fff;}

@media only screen and (max-width: 1400px){}