@import "https://www.manageengine.com/css/fonts.css";
html{overflow-x:hidden;scroll-behavior:smooth}
html,body,div,span,h1,h2,h3,p,a,img,i{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline}
.heading-menu{display:none}
.af{color:#102336;background:#fff;font-family:"ZohoPuvi";-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;margin:0;padding:0;color:#102336}
.af p,.af a,.af span{line-height:24px;font-size:14px;color:#102336;font-weight:300}
.af h1,.af h2,.af h3{margin:0;color:#102336}
.af a{text-decoration:none;cursor:pointer;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}
.af a:hover{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}
.af div,.af a,.af p,.af h1,.af h2,.af span{box-sizing:border-box;color:#102336}
.af div{box-sizing:border-box}
.af{width:100%;display:inline-block;float:left}
.ac{margin:0 auto;position:relative;max-width:1200px;padding:0 40px}
a{transition:all .3s ease}
.app-log-sprite,.ban-ani::before,.ban-ani::after,.b-ani6,.b-ani7,.ban-ani .b-ani-com,.ban-ani .b-ani2::before,.ban-ani .b-ani3{background:url(https://www.manageengine.cn/log-management/images/mitre-attack-framework-sprite22.png) no-repeat;background-size:1290px 2356px;display:inline-block}
.ban{padding:85px 0;background:linear-gradient(to bottom,#ffe8e4,#fff);margin-bottom:25px}
.ban .lhs{float:left;width:calc(100% - 410px);padding-right:100px;padding-top:20px}
.ban .lhs h1{font-size:37px;font-weight:500;color:#000;margin-bottom:16px;line-height:54px}
.ban .lhs p{font-size:18px;line-height:30px;font-weight:300;padding-bottom:22px;color:#102336;margin-bottom:18px}
.ban .lhs a{background-color:#e8132a;font-size:18px;line-height:18px;font-weight:400;color:#fff;padding:18px 45px;border-radius:4px;display:inline-block}
.ban .lhs a .icn-download{background-position:-419px -34px;width:14px;height:18px;margin-left:14px}
.ban .lhs a:hover{background-color:#ff243d;box-shadow:5px 8px 15px rgba(232,19,40,0.366);text-decoration:none}
.ban .rhs{float:left;width:410px;position:relative}
.ban-ani::before{content:'';background-position:-36px -337px;width:59px;height:46px;position:absolute;top:100px;left:32px;z-index:1;animation:jump 1.8s ease-in-out infinite alternate}
.ban-ani{width:370px;height:340px;background:#ffb6b6;border-radius:20px;position:relative;z-index:2}
.ban-ani::after{content:'';background-position:-206px -330px;width:36px;height:57px;position:absolute;top:100px;right:40px;animation:jump 1.8s ease-in-out infinite alternate}
.ban-ani .b-ani-com{width:100px;height:100px;display:inline-block;position:absolute}
.ban-ani .b-ani1{width:100%;height:100%;left:0;position:absolute;top:0;right:0;border-radius:21px;background:url(https://www.manageengine.cn/log-management/images/mitre-attack-framework-binary.png) repeat-y 0 0;background-size:370px 346px;animation:flow 200s linear infinite reverse}
@keyframes flow {
0%{background-position:0 100000%}
100%{background-position:0 0}
}
@keyframes flow1 {
0%{background-position:100000px 0}
100%{background-position:0 0}
}
.ban-ani .b-ani2{width:282px;height:300px;left:0;right:0;position:absolute;bottom:0;margin:auto;animation:scrnline 1s ease;background-position:-12px -9px}
.ban-ani .b-ani2::before{content:'';background-position:-114px -336px;width:66px;height:48px;position:absolute;top:-56px;left:108px;animation:jump 1.8s ease-in-out infinite alternate}
.ban-ani .b-ani3{width:440px;height:158px;left:-28px;position:absolute;bottom:0;margin:auto;animation:scrnline 1s ease;background-position:-310px -217px}
@keyframes jump {
0%{transform:translateY(-8px)}
100%{transform:translateY(8px)}
}
@keyframes scrnline {
0%{transform:scale(0.7)}
100%{transform:scale(1)}
}
.sec1{background:transparent;position:relative}
.sec1 .ac{padding:0}
.sec1-wrap{background:#fbfffd;min-height:335px;padding:60px 180px;position:relative;border-radius:10px;z-index:-1}
.sec1-wrap:after{content:"";background:url(https://www.manageengine.cn/log-management/images/mitre-attack-framework-building22.png) repeat-x;background-size:contain;height:267px;position:absolute;bottom:0;width:100%;left:0;animation:flow1 3000s linear infinite;border-radius:0 0 10px 10px}
.sec1-wrap div{position:relative;top:-26px}
.sec1-wrap .icn1{background-position:-400px -136px;width:56px;height:55px;position:absolute;top:60px;left:200px;z-index:1}
.sec1-wrap .icn2{background-position:-400px -70px;width:56px;height:55px;position:absolute;top:60px;right:200px;z-index:1}
.sec1-wrap .icn3{background-position:-477px -34px;width:172px;height:172px;position:absolute;top:30px;left:50%;transform:translateX(-50%);z-index:2}
.sec1-wrap .c-bg1{width:410px;height:410px;position:absolute;border-radius:100%;background-color:#fff6f4;border:1px solid #ffb6b6;top:-18px;left:50%;transform:translateX(-50%);z-index:1}
.sec1-wrap .c-bg1::after{content:'';width:300px;height:300px;position:absolute;border-radius:100%;background-color:#fde0db;left:50%;top:50%;transform:translate(-50%,-50%)}
.sec1-wrap .icn4{background-position:-664px -22px;width:68px;height:81px;position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2}
.sec1 h2{font-size:30px;text-align:center;font-weight:500;margin-bottom: 20px;}
.sec1 p{text-align:center;font-size:16px;font-weight:300;line-height:36px}
.sec1 .text-b p{line-height:30px;padding:0 65px}
.sec1 .text-b h2 + p{margin-bottom:34px}
.sec1 .text-t h2{font-size:36px;line-height:50px;font-weight:300;color:#d82633;margin-bottom:28px}
.sec1 .text-t p{font-size:20px;padding:0 80px;margin-bottom:100px}
.sec1 .text-t h2 strong{display:block;font-weight:500;color:#000}
.sec1 .text-b{background:linear-gradient(to top,#faefed,#fff 90%);padding:60px 100px;margin-top:-140px;border:2px solid #ffe8e4;box-shadow:0 0 20px #ffb6b666;border-radius:6px;z-index:6}
.b-ani6{position:absolute;background-position:-308px -50px;width:65px;height:64px;left:10px;top:-34px}
.b-ani7{position:absolute;background-position:-308px -128px;width:65px;height:64px;right:14px;bottom:-32px}
.sec2{margin-top:40px;margin-bottom:60px;}
.scrn-com{float:left;width:100%;padding-bottom:130px}
.scrn-mit{padding-top:80px}
.scrn-com .lhs{padding:150px 50px 0 0;float:left;width:50%}
.scrn-com .lhs h3{font-size:30px;font-weight:500;margin-bottom:30px;line-height:42px;position:relative}
.screen-red .lhs{margin-top:80px}
.screen-red .lhs h3:before{background-color:#e51655}
.scrn-com .lhs p{font-size:16px;padding-bottom:25px;line-height:31px}
.scrn-com .rhs{float:left;width:50%}
.scrn-mit .rhs{width:40%}
.scrn-mit .lhs{padding:150px 0 0 50px;float:right;width:52%}
.mob-s-scrn{width:100%;display:none}
.spri{position:relative}
.spri span,.spri .s1-3::before,.spri .s2-3::after,.spri .s2-3::before,.spri .s2-2::after{background-image:url(https://www.manageengine.cn/log-management/images/mitre-attack-framework-sprite22.png);display:inline-block;background-size:1290px 2356px;position:absolute}
.scrn-rule{padding-top:80px;}
.scrn-rule .spri{left:-40px}
.spri .s1-1{background-position:-3px -402px;width:749px;height:508px;transition:all .5s ease;left:25px}
.spri .s1-2{background-position:-1036px -345px;width:188px;height:163px;left:15px;top:160px;opacity:0}
.scrn-com.act .s1-2{animation:scale 1.2s ease-in-out 1.6s both;transform-origin:center}
.spri .s1-3{background-position:-771px 0;width:506px;height:322px;left:224px;top:180px;opacity:0}
.scrn-com.act .s1-3{animation:scale 1.2s ease-in-out 1s both;transform-origin:center}
.spri .s1-3::before{content:'';position:absolute;background-position:-792px -344px;width:218px;height:139px;left:142px;top:132px;opacity:0}
.scrn-com.act .s1-3::before{animation:bar-chart 2s ease-in-out 1.4s both;transform-origin:bottom}
@keyframes bar-chart {
0%{transform:scaleY(0);opacity:0}
100%{transform:scaleY(1);opacity:1}
}
.spri .s1-4{background-position:-774px -520px;width:358px;height:123px;left:300px;top:450px;opacity:0}
.scrn-com.act .s1-4{animation:scale 2s ease-in-out 1.8s both;transform-origin:top}
.spri .s2-1{background-position:-13px -930px;width:662px;height:485px;left:-175px;transition:all 1s ease}
.spri .s2-2{background-position:-759px -664px;width:499px;height:244px;left:-138px;top:208px;opacity:0}
.scrn-com.act .s2-2{animation:scale 2s ease-in-out .6s both;transform-origin:top}
.spri .s2-2::after{content:'';position:absolute;background-position:-698px -928px;width:514px;height:101px;left:-8px;top:200px;opacity:0}
.scrn-com.act .s2-2::after{animation:scale 2s ease-in-out 1s both;transform-origin:left}
.spri .s2-3::before{content:'';position:absolute;background-position:-904px -1058px;width:173px;height:83px;left:0;top:-106px;opacity:0}
.scrn-com.act .s2-3::before{animation:scale 2s ease-in-out 1.8s both;transform-origin:top}
.spri .s2-3{background-position:-908px -1165px;width:59px;height:24px;left:380px;top:206px;opacity:0}
.scrn-com.act .s2-3{animation:scale 2s ease-in-out 1.4s both;transform-origin:top}
.spri .s2-3::after{content:'';position:absolute;background-position:-708px -1052px;width:173px;height:148px;left:0;top:38px;opacity:0}
.scrn-com.act .s2-3::after{animation:scale 2s ease-in-out 2s both;transform-origin:top}
.spri .s3-1{background-position:-4px -1468px;width:767px;height:505px;left:8px;transition:all 1s ease}
.spri .s3-2{background-position:-690px -1207px;width:558px;height:244px;left:108px;top:212px;opacity:0}
.scrn-com.act .s3-2{animation:scale 2s ease-in-out both;transform-origin:center}
@keyframes scale {
0%{transform:scale(0)}
100%{transform:scale(1);opacity:1}
}
.sec3::before{content:'';background-color:#ffebe3;width:90%;height:100%;top:0;right:0;bottom:0;left:0;margin:auto;position:absolute}
.sec3{padding:100px 0 90px;position:relative;margin-bottom:100px}
.sec3 .scrn-com{padding-bottom:0}
.spri .man,.spri .build::before,.spri .build{background:url(https://www.manageengine.cn/log-management/images/mitre-attack-framework-sprite22.png) no-repeat;background-size:1290px 2356px}
.spri .man{background-position:-834px -1505px;width:269px;height:514px;position:relative;left:12px;z-index:1;opacity:0}
.scrn-com.act .man{-webkit-animation:superman 1s ease-in-out 1s both;animation:superman 1s ease-in-out 1s both;opacity:1}
.spri .build::before{content:'';background-position:-608px -2083px;width:122px;height:41px;position:absolute;top:-100px;left:101px;opacity:0}
.scrn-com.act .build::before{-webkit-animation:plane 5s linear 1s both;animation:plane 5s linear 1s both;opacity:1}
.spri .build{background-position:-17px -1984px;width:514px;height:336px;position:absolute;top:142px;left:-166px;opacity:0}
.scrn-com.act .build{-webkit-animation:build 1s ease-in-out .5s both;animation:build 1s ease-in-out .5s both;transform-origin:left;opacity:1}
.sec3 .ac{max-width:90%}
.sec3 .ac .sec-3{max-width:1200px;margin: 0 auto;display: table;float: none;}
.sec3 .lhs{width:35%;padding:0}
.sec3 .rhs{width:65%}
.sec3 .rhs h2{font-size:34px;line-height:49px;font-weight:300;padding-right:70px;margin-bottom:20px}
.sec3 .rhs h2 strong{font-weight:600}
.boxs{position:absolute}
.sec3 .box{background-color:#fff;border-radius:6px;max-width:400px;padding:20px 32px;position:relative;display:inline-block;box-shadow:0 0 10px rgba(61,81,91,0.08);margin-bottom:20px;text-align:left}
.box-l{margin-right:20px}
.box-l,.box-r{display:inline-block;vertical-align:middle;width:47%}
.box-r>.box{display:block}
.box h3{padding-top:66px;font-size:16px;font-weight:600;line-height:22px;margin-bottom:10px;}
.box p{font-size:15px;line-height:26px;color:#333}
.box h3::before{content:'';background:url(https://www.manageengine.cn/log-management/images/mitre-attack-framework-sprite22.png) no-repeat;background-size:1290px 2356px}
.box1 h3::before{background-position:-780px -2062px;width:42px;height:46px;position:absolute;top:25px}
.box2 h3::before{background-position:-847px -2064px;width:41px;height:41px;position:absolute;top:25px}
.box3 h3::before{background-position:-918px -2061px;width:51px;height:46px;position:absolute}
.box.box2{padding:30px 32px}
.box.box3{padding:35px 32px}
.box2 h3::before,.box3 h3::before{top:42px}
@keyframes superman {
0%{transform:translateX(-200px);opacity:0}
100%{transform:translateX(0);opacity:1}
}
@keyframes plane {
0%{transform:translate(-100px,200px);opacity:0}
100%{transform:translate(0,0);opacity:1}
}
@keyframes build {
0%{width:0;opacity:0}
100%{width:616px;opacity:1}
}
@media screen and (max-width: 1470px) {
.scrn-mit .rhs .spri{transform:scale(0.9)}
.scrn-rule .rhs .spri{transform:scale(0.9)}
.sec2 {margin-bottom:0}
}
@media screen and (max-width: 1370px) {
.scrn-mit .rhs .spri{transform:scale(0.8);left:64px}
.scrn-rule .rhs .spri{transform:scale(0.8);margin-left:-50px}
.scrn-com .lhs{padding:108px 50px 0 0}
.scrn-mit .lhs{padding:112px 0 0 50px}
}
@media screen and (max-width: 1199px) {
.ban .lhs{padding-right:80px}
.ban .lhs h1{font-size:32px;line-height:47px}
.ban .lhs p{font-size:16px;}
.scrn-com .lhs h3{font-size:24px;line-height:30px}
.scrn-com .lhs p{font-size:14px}
.sec1 .ac{padding:0 20px}
.sec1-wrap{padding:60px 150px}
.sec3 .lhs,.sec3 .spri{display:none}
.scrn-rule{margin-bottom:0}
.sec3{padding:40px 0; margin-top: 60px;}
.sec3 .rhs h2{padding-right:0}
.boxs{position:static}
.box-l, .box-r {display:block;width: 100%}
.box.box1{margin: 26px auto;display: table;max-width: 100%;}
.box.box2{display: table;float: left;max-width:48%}
.box.box3{display: table;float: right;max-width:48%}
.box.box2, .box.box3{min-height:260px}
.box-r>.box {display:table}
.sec3 .rhs{width:100%}
}
@media screen and (max-width: 1100px) {
.ban .lhs{width:calc(100% - 370px)}
.ban .rhs{transform:scale(.8);width:370px}
}
@media screen and (min-width: 993px) and (max-width: 1180px) {
.scrn-mit .rhs .spri{transform:scale(0.7);left:44px}
.scrn-rule .rhs .spri{transform:scale(0.7);margin-left:-50px}
.scrn-com .lhs{width:46%;padding:83px 34px 0 0}
.scrn-mit .lhs{padding:83px 0 0 34px}
}
@media screen and (max-width: 992px) {
.scrn-com .spri{display:none}
.mob-s-scrn{display:block}
.ban .lhs{width:100%;padding:0;text-align:center}
.ban .lhs h1{font-size:32px;line-height:38px;margin-bottom:20px}
.ban .lhs p {width:75%;margin:6px auto;}
.ban .lhs a{margin-top:10px}
.ban{padding:80px 0 60px 0}
.ban .rhs{display:none}
.sec1 .text-t h2{font-size:30px;line-height:42px}
.sec1 .text-t p{padding:0 40px;margin-bottom:64px}
.sec1 .text-b{margin-top:0;padding:38px 16px}
.scrn-com .lhs,.scrn-com .rhs{width:100%}
.scrn-com .lhs,.scrn-com .rhs{padding:15px 25px}
.scrn-mit{padding-top:0}
.scrn-com{border:1px solid #f5f5f5;background:#fff;margin-bottom:25px;padding:30px;border-radius:5px;}
.sec3 .scrn-com{border:none;box-shadow:none;background:none}
.scrn-mit .rhs{padding: 0;}
.ac{max-width:100%;padding:0 20px}
.ban .lhs{padding:0}
.ban .lhs h1{line-height:50px}
.sec1-wrap{padding:30px;max-width:90%;margin:0 auto;width:100%;min-height:inherit;box-shadow:0 1px 3px 4px #3333330f;background:#fff}
.sec1-wrap .app-log-sprite{display:none}
.sec1-wrap,.sec1-wrap:after{display:none}
.sec2{margin-top:60px}
.box.box2, .box.box3{min-height:362px}
}
@media screen and (max-width: 767px) {
.sec1 h2{font-size:26px;line-height:40px}
.sec1 .text-b p{padding:0}
.scrn-com .lhs h3{font-size:22px;line-height:30px}
.sec3 .rhs h2{font-size:28px;line-height:42px}
.sec3 .box{width:100%}
.box-l,.box-r{width:100%}
.box.box1,.box.box2,.box.box3{max-width:100%;min-height:auto;}
.mob-foot {display: table !important;}
}
@media screen and (max-width: 640px) {
.sec1 .text-t h2{font-size:25px;line-height:36px;margin-bottom:20px}
.sec1 .text-t p{font-size:18px;line-height:32px}
.sec3 .box{width:100%}
.box-l,.box-r{width:100%}
.box.box1,.box.box2,.box.box3{max-width:100%;min-height:auto;}
.scrn-com.sec-3{margin-bottom:0}
}
@media screen and (max-width: 567px) {
.ban .lhs p {width:100%;}
.sec1 h2{font-size:18px;line-height:28px}
.sec1 p{font-size:14px;line-height:25px}
.scrn-com .lhs h3{font-size:16px;line-height:24px;margin-bottom:20px}
.scrn-com{padding:20px 0}
.sec1 p{padding:0}
.scrn-com .lhs p{line-height:25px}
.ban .lhs h1{font-size:26px;line-height:38px}
.sec1 .text-t h2{font-size:20px;line-height:28px;margin-bottom:18px}
.sec1 .text-t p{padding:0;font-size:16px;line-height:28px}
.sec1 .text-b h2 + p{margin-bottom:20px}
.sec1 .text-b p{line-height:25px}
.sec3 .rhs h2{font-size:22px;line-height:35px}
}