@charset "utf-8";
/* Generated by scripts/build_sub_modules.py from sub.css. Do not edit. */

.firewall-service { padding:0px 0; background:#f5f5f5; }
.firewall-service .service-box { position:relative; }
.firewall-service .service-box:before { content:''; display:block; position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:1px; background:var(--mainColor); }
.firewall-service .service-box.service-box2:before { background:#bdbdbd; }
.firewall-service .service-box .boxCont { position:relative; z-index:2; }
.firewall-service .service-box .boxCont .box { background:#fff; display:flex; justify-content:space-between; align-items:center; border-radius:990px; border:1px solid var(--mainColor); }
.firewall-service .service-box .boxCont .box .circle-box { position:relative; width:315px; height:315px; background:#f2f6fa; border-radius:315px; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.firewall-service .service-box .boxCont .box .circle-box.c2 { background:var(--mainColor); }
.firewall-service .service-box .boxCont .box .circle-box.c2:before { content:''; display:block; position:absolute; bottom:-45px; left:50%; width:16px; height:45px; transform:translateX(-50%); background:url(../img/server/firewall_arr3.png) no-repeat left bottom; }
.firewall-service .service-box .boxCont .box .circle-box .txt { margin-top:15px; font-size:22px; font-weight:500; color:#222; line-height:1.3; }
.firewall-service .service-box .boxCont .box .circle-box.c2 .txt { color:#fff; }
.firewall-service .service-box .boxCont .box .info { position:absolute; top:145px; transform:translateX(-50%); text-align:center; z-index:2 }
.firewall-service .service-box .boxCont .box .info:before { content:''; display:block; position:absolute; bottom:-20px; left:50%; height:16px; transform:translateX(-50%); background:url(../img/server/firewall_arr1.png) no-repeat right center; }
.firewall-service .service-box .boxCont .box .info .txt { font-size:18px; font-weight:400; color:#444; line-height:1.3; }
.firewall-service .service-box .boxCont .box .info > .txt { display:flex; align-items:flex-end; justify-content:center; min-height:70px; }
.firewall-service .service-box .boxCont .box .info-1 { left:calc(25% + 110px); }
.firewall-service .service-box .boxCont .box .info-2 { left:calc(75% - 110px); }
.firewall-service .service-box .boxCont .box .info-3 { left:calc(25% + 50px); top:120px; width:260px; text-align:center }
.firewall-service .service-box .boxCont .box .info-3 .arr-2 { position:absolute; top:100px; left:0; width:260px; }
.firewall-service .service-box .boxCont .box .info-3 .arr-2 .txt-1 { position:absolute; top:60px; right:0; font-size:18px; font-weight:500; color:#fc0000; line-height:1.3; }
.firewall-service .service-box .boxCont .box .info-4 { left:calc(20% + 70px); top:155px; }
.firewall-service .service-box .boxCont .box .info-5 { left:calc(50% - 1px); top:224px; }
.firewall-service .service-box .boxCont .box .info-6 { left:calc(80% - 70px); top:155px; }
.firewall-service .service-box .boxCont .box .info-1:before,
.firewall-service .service-box .boxCont .box .info-2:before { width:162px; }
.firewall-service .service-box .boxCont .box .info-3:before { width:275px; }
.firewall-service .service-box .boxCont .box .info-4:before,
.firewall-service .service-box .boxCont .box .info-5:before,
.firewall-service .service-box .boxCont .box .info-6:before { width:90px; }
.firewall-service .service-box .boxCont .box .info-3 .arr-2:before { content:''; display:block; position:absolute; bottom:-40px; left:50%; width:276px; height:32px; transform:translateX(-50%); background:url(../img/server/firewall_arr2.png) no-repeat right center; }
.firewall-service .service-box .boxCont .txt_t { position:absolute; top:-38px; left:50%; transform:translateX(-50%); width:617px; height:77px; border-radius:500px; background:#444; font-size:30px; font-weight:600; color:#fff; line-height:1.3; letter-spacing:-0.02em; display:flex; align-items:center; justify-content:center; text-align:center; word-break:keep-all; }
.firewall-service .service-box .boxCont .txt_b { position:absolute; bottom:-38px; left:50%; transform:translateX(-50%); width:617px; height:77px; border-radius:500px; background:var(--mainColor); font-size:30px; font-weight:600; color:#fff; line-height:1.3; letter-spacing:-0.02em; display:flex; align-items:center; justify-content:center; text-align:center; word-break:keep-all; }
.firewall-service .service-box1 { margin-top:50px; }
.firewall-service .service-box1 .boxCont .box { padding:70px 55px 90px; }
.firewall-service .service-box2 { margin-top:118px; }
.firewall-service .service-box2 .boxCont .box { padding:60px 55px; border:1px solid #bdbdbd; }
.firewall-service .service-box2 .boxCont .box .circle-box.c2:before { display:none }
.firewall-service .service-box2 .boxCont .box .txtbox { width:120px; margin:0 85px; text-align:center }
.firewall-service .service-box2 .boxCont .box .txtbox .sbox:not(:last-child) { margin-bottom:20px; }
.firewall-service .service-box2 .boxCont .box .txtbox .sbox .txt { margin-top:10px; font-size:18px; font-weight:500; color:#222; line-height:1.3; }
.firewall-service .service-box3 { margin-top:118px; }
.firewall-service .service-box3 .boxCont .box { padding:113px 55px; }
.firewall-service .service-box3 .boxCont .box .circle-box { width:250px; height:250px; }
.firewall-service .service-box3 .boxCont .txt_b { background:#444; }
.firewall-service .service-box3 .boxCont .box .circle-box.cs2:before { content:''; display:block; position:absolute; top:-53px; left:50%; width:16px; height:53px; transform:translateX(-50%); background:url(../img/server/firewall_arr4.png) no-repeat left top; }
.firewall-service .service-box3 .boxCont .box .circle-box.cs3:before { content:''; display:block; position:absolute; bottom:-53px; left:50%; width:16px; height:53px; transform:translateX(-50%) rotate(180deg); background:url(../img/server/firewall_arr4.png) no-repeat left top; }
.firewall-service .service-box4 { margin-top:118px; }
.firewall-service .service-box4 ul { display:flex; flex-wrap:wrap; gap:30px; }
.firewall-service .service-box4 li { width:calc((100% - 60px) / 3); padding:60px 20px 60px 60px; border-radius:30px; background:#f9f9f9; font-size:18px; font-weight:400; color:#444; line-height:1.6; }
.firewall-service .service-box4 li strong { display:block; margin-bottom:20px; font-family:var(--mainFont); color:var(--mainColor); font-size:18px; font-weight:600; }
/* .firewall-service .service-box5 { background-color: #f5f5f5; } */
.firewall-service .service-box5 ul { display:flex; justify-content: center; align-items: center; flex-wrap:wrap; gap: 15px; }
/* .firewall-service .service-box5 li { width:calc((100% - 30px) / 4); background-color: #fff; padding:20px; height: 150px; border-radius:30px; font-size:16px; font-weight:400; color:#444; line-height:1.6; }  */
.firewall-service .service-box5 ul li a { width:340px; background-color: #fff; padding:10px; height: 130px; border-radius:30px; font-size:16px; font-weight:400; color:#444; line-height:1.6; }
.firewall-service .service-box5 ul li.on a { background:var(--mainColor); color:#fff ; }
.firewall-service .service-box5 ul li a strong { margin:0 30px 0 20px; font-family:var(--mainFont); color:var(--mainColor); font-size:18px; font-weight:600; }
.firewall-service .service_imgtab ul li .tab_img img { width: 200px; }
.firewall-service .service_imgtab ul { background: #fff;margin-top: 80px;gap: 0px; }
.firewall-service .service_imgtab ul li { align-items: center; }
.firewall-service .service_imgtab ul li a { width: 250px; }
.firewall-service .service_imgtab ul li.on1 a{ border: 3px solid red; }
.firewall-service .service_imgtab .tab_img { align-items: center;position: relative;display: ruby; }
.firewall-service .service_imgtab .tab_num { width: 40px;height: 40px;margin-bottom: 20px;font-size: 20px;font-weight: 700;border-radius: 50%;padding: 10px 20px 10px 20px;color: #fff;background-color: #0569ff;z-index: 22;text-align: center;display: flex; align-items: center;justify-content: center;}

@media screen and (max-width:1500px){
    .firewall-service .service-box .boxCont .box .circle-box { width:240px; height:240px; }
    .firewall-service .service-box .boxCont .box .info { top:115px; }
    .firewall-service .service-box .boxCont .box .info-1 { left:calc(25% + 90px); }
    .firewall-service .service-box .boxCont .box .info-2 { left:calc(75% - 90px); }
    .firewall-service .service-box .boxCont .box .info-3 { left:calc(25% + 50px); top:100px;}
    .firewall-service .service-box .boxCont .box .info-3 .arr-2 { top:90px; }
    .firewall-service .service-box .boxCont .box .info-4 { left:calc(20% + 70px); top:125px; }
    .firewall-service .service-box .boxCont .box .info-5 { left:calc(50% - 1px); top:195px; }
    .firewall-service .service-box .boxCont .box .info-6 { left:calc(80% - 70px); top:125px; }
    .firewall-service .service-box .boxCont .box .info-1:before,
    .firewall-service .service-box .boxCont .box .info-2:before { width:140px; }
    .firewall-service .service-box .boxCont .box .info-3:before { width:180px; }
    .firewall-service .service-box .boxCont .box .info-4:before,
    .firewall-service .service-box .boxCont .box .info-5:before,
    .firewall-service .service-box .boxCont .box .info-6:before { width:60px; }
    .firewall-service .service-box .boxCont .box .info-3 .arr-2:before { width:180px; }
    .firewall-service .service-box3 .boxCont .box .circle-box { width:200px; height:200px; }
    .firewall-service .service-box5 ul { gap: 20px; flex-wrap: wrap; }
    .firewall-service .service-box5 ul li a { display: flex; flex-direction:column; text-align:center; width:280px; padding:30px; height: 130px;font-size:16px; font-weight:400; color:#444; line-height:1.6; }
    .firewall-service .service-box5 ul li a strong { line-height: 2; }
    .firewall-service .service_imgtab ul li .tab_img img { width: 280px; }
}
@media screen and (max-width:1280px){
    .firewall-service .service-box .boxCont .box .circle-box { width:180px; height:180px; }
    .firewall-service .service-box .boxCont .box .circle-box .icon img { width:60px; }
    .firewall-service .service-box .boxCont .box .circle-box.c2 .icon img { width:54px; }
    .firewall-service .service-box .boxCont .box .circle-box .txt { margin-top:10px; font-size:20px; }
    .firewall-service .service-box .boxCont .box .info { top:66px; }
    .firewall-service .service-box .boxCont .box .info .txt,
    .firewall-service .service-box .boxCont .box .info-3 .arr-2 .txt-1{ font-size:17px; }
    .firewall-service .service-box .boxCont .box .info-1 { left:calc(25% + 70px); }
    .firewall-service .service-box .boxCont .box .info-2 { left:calc(75% - 70px); }
    .firewall-service .service-box .boxCont .box .info-3 { left:calc(25% + 35px); top:60px;}
    .firewall-service .service-box .boxCont .box .info-3 .arr-2 { top:90px; }
    .firewall-service .service-box .boxCont .box .info-4 { left:calc(20% + 50px); top:90px; }
    .firewall-service .service-box .boxCont .box .info-5 { left:calc(50% - 1px); top:160px; }
    .firewall-service .service-box .boxCont .box .info-6 { left:calc(80% - 50px); top:90px; }
    .firewall-service .service-box .boxCont .box .info-1:before,
    .firewall-service .service-box .boxCont .box .info-2:before { width:120px; }
    .firewall-service .service-box .boxCont .box .info-3:before { width:160px; }
    .firewall-service .service-box .boxCont .box .info-4:before,
    .firewall-service .service-box .boxCont .box .info-5:before,
    .firewall-service .service-box .boxCont .box .info-6:before { width:60px; }
    .firewall-service .service-box .boxCont .box .info-3 .arr-2:before { width:160px; }
    .firewall-service .service-box .boxCont .txt_t { top:-27px; width:400px; height:54px; font-size:20px; }
    .firewall-service .service-box .boxCont .txt_b { bottom:-27px; width:400px; height:54px; font-size:20px; }
    .firewall-service .service-box1 .boxCont .box { padding:50px 50px 80px; }
    .firewall-service .service-box2 .boxCont .box { padding:45px 50px; }
    .firewall-service .service-box2 .boxCont .box .txtbox { width:60px; margin:0 55px; }
    .firewall-service .service-box2 .boxCont .box .txtbox .sbox:not(:last-child) { margin-bottom:20px; }
    .firewall-service .service-box2 .boxCont .box .txtbox .sbox .txt { font-size:17px; }
    .firewall-service .service-box3 .boxCont .box { padding:95px 50px; }
    .firewall-service .service-box3 .boxCont .box .circle-box { width:150px; height:150px; }
    .firewall-service .service-box4 ul { gap:20px; }
    .firewall-service .service-box4 li { width:calc((100% - 40px) / 3); padding:50px 20px 50px 50px; font-size:17px; }
    .firewall-service .service-box4 li strong { font-size:17px;}
    .firewall-service .service-box4 li br { display:none }
    .firewall-service .service-box5 ul { gap:20px; }
    /* .firewall-service .service-box5 li { width:calc((100% - 20px) / 4); padding:20px; font-size:16px; }  */
    .firewall-service .service-box5 ul li a { width:450px; padding:30px; height: 130px;font-size:16px; font-weight:400; color:#444; line-height:1.6; }
    .firewall-service .service-box5 ul li a strong { font-size:17px; line-height: 2; }
    .firewall-service .service-box5 li br { display:none }
    .firewall-service .service_imgtab ul li { margin-bottom: 150px; }
    .firewall-service .service_imgtab ul li .tab_img { display: contents; }
    .firewall-service .service_imgtab ul li .tab_img img{ width: 350px; }
}
@media screen and (max-width:1024px){
    .firewall-service { padding:0px 0; }
    .firewall-service .service-box1 { margin-top:40px; }
    .firewall-service .service-box2,
    .firewall-service .service-box3,
    .firewall-service .service-box4 { margin-top:100px; }
    .firewall-service .service-box .boxCont .box .circle-box { width:140px; height:140px; }
    .firewall-service .service-box .boxCont .box .circle-box .icon img { width:48px; }
    .firewall-service .service-box .boxCont .box .circle-box.c2 .icon img { width:42px; }
    .firewall-service .service-box .boxCont .box .circle-box .txt { margin-top:7px; font-size:18px; }
    .firewall-service .service-box .boxCont .box .info { top:45px; }
    .firewall-service .service-box .boxCont .box .info .txt,
    .firewall-service .service-box .boxCont .box .info-3 .arr-2 .txt-1{ font-size:16px; }
    .firewall-service .service-box .boxCont .box .info-1 { left:calc(25% + 45px); }
    .firewall-service .service-box .boxCont .box .info-2 { left:calc(75% - 45px); }
    .firewall-service .service-box .boxCont .box .info-3 { left:calc(25% + 35px); top:50px;}
    .firewall-service .service-box .boxCont .box .info-3 .arr-2 { top:90px; }
    .firewall-service .service-box .boxCont .box .info-4 { left:calc(20% + 35px); top:64px; }
    .firewall-service .service-box .boxCont .box .info-5 { left:calc(50% - 1px); top:134px; }
    .firewall-service .service-box .boxCont .box .info-6 { left:calc(80% - 35px); top:64px; }
    .firewall-service .service-box .boxCont .box .info-1:before,
    .firewall-service .service-box .boxCont .box .info-2:before { width:120px; }
    .firewall-service .service-box .boxCont .box .info-3:before { width:150px; }
    .firewall-service .service-box .boxCont .box .info-4:before,
    .firewall-service .service-box .boxCont .box .info-5:before,
    .firewall-service .service-box .boxCont .box .info-6:before { width:50px; }
    .firewall-service .service-box .boxCont .box .info-3 .arr-2:before { width:150px; }
    .firewall-service .service-box .boxCont .txt_t { top:-25px; width:300px; height:50px; font-size:18px; }
    .firewall-service .service-box .boxCont .txt_b { bottom:-25px; width:300px; height:50px; font-size:18px; }
    .firewall-service .service-box .boxCont .box .circle-box.c2:before { bottom:-30px; height:30px; }
    .firewall-service .service-box3 .boxCont .box .circle-box.cs2:before { top:-40px; height:40px; }
    .firewall-service .service-box3 .boxCont .box .circle-box.cs3:before { bottom:-40px; height:40px; }
    .firewall-service .service-box1 .boxCont .box { padding:50px 20px 60px; }
    .firewall-service .service-box2 .boxCont .box { padding:40px 20px; }
    .firewall-service .service-box2 .boxCont .box .txtbox { width:60px; margin:0 38px; }
    .firewall-service .service-box2 .boxCont .box .txtbox .sbox:not(:last-child) { margin-bottom:20px; }
    .firewall-service .service-box2 .boxCont .box .txtbox .sbox .txt { font-size:16px; }
    .firewall-service .service-box3 .boxCont .box { padding:70px 20px; }
    .firewall-service .service-box3 .boxCont .box .circle-box { width:150px; height:150px; }
    .firewall-service .service-box4 li { padding:30px 20px; font-size:16px; border-radius:15px; }
    .firewall-service .service-box4 li strong { font-size:16px;}
    .firewall-service .service-box5 ul { gap:40px; }
    /* .firewall-service .service-box5 li { padding:50px; font-size:15px; border-radius:15px; }  */
    .firewall-service .service-box5 li { width: 47%; }
    .firewall-service .service-box5 ul li a { width:440px; padding:10px; }
    .firewall-service .service-box5 ul li a strong { font-size:16px; line-height: 2; }
    .firewall-service .service-box5 li br { display:none }
}
@media screen and (max-width:960px) {
    .firewall-service .service-box5 ul { gap:20px 30px; }
    /* .firewall-service .service-box5 li { padding:50px; font-size:15px; border-radius:15px; }  */
    .firewall-service .service-box5 li { width: 47%; }
    .firewall-service .service-box5 ul li a { width:380px; padding:10px; height: 130px;font-size:16px; }
    .firewall-service .service-box5 ul li a strong { font-size:16px; line-height: 2; }
    .firewall-service .service-box5 li br { display:none }
}
@media screen and (max-width:860px){
    .firewall-service .service-box4 ul { gap:10px; }
    .firewall-service .service-box4 li { width:calc((100% - 20px) / 3); }
    /* .firewall-service .service-box5 ul { gap:5px; }
    .firewall-service .service-box5 li { width:calc((100% - 10px) / 2); } */
    .firewall-service .service-box5 ul { gap: 20px 40px; }
    /* .firewall-service .service-box5 li { padding:50px; font-size:15px; border-radius:15px; }  */
    .firewall-service .service-box5 li { width: 45%; }
    .firewall-service .service-box5 ul li a { width:100%; padding:5px; }
}
@media screen and (max-width:760px){
    .firewall-service .service-box .boxCont .box .circle-box { width:100px; height:100px; }
    .firewall-service .service-box .boxCont .box .circle-box .icon img { width:40px; }
    .firewall-service .service-box .boxCont .box .circle-box.c2 .icon img { width:36px; }
    .firewall-service .service-box .boxCont .box .circle-box .txt { margin-top:7px; font-size:17px; }
    .firewall-service .service-box .boxCont .box .sbox .icon img { width:36px; }
    .firewall-service .service-box .boxCont .box .info { top:15px; }
    .firewall-service .service-box .boxCont .box .info .txt,
    .firewall-service .service-box .boxCont .box .info-3 .arr-2 .txt-1{ font-size:14px; }
    .firewall-service .service-box .boxCont .box .info-1 { left:calc(25% + 32px); }
    .firewall-service .service-box .boxCont .box .info-2 { left:calc(75% - 32px); }
    .firewall-service .service-box .boxCont .box .info-3 { left:calc(25% + 20px); top:40px;}
    .firewall-service .service-box .boxCont .box .info-3 .arr-2 { top:70px; }
    .firewall-service .service-box .boxCont .box .info-3 .arr-2 .txt-1 { right:20%; }
    .firewall-service .service-box .boxCont .box .info-4 { left:calc(20% + 25px); top:20px; }
    .firewall-service .service-box .boxCont .box .info-5 { left:calc(50% - 1px); top:94px; }
    .firewall-service .service-box .boxCont .box .info-6 { left:calc(80% - 25px); top:20px; }
    .firewall-service .service-box .boxCont .box .info-1:before,
    .firewall-service .service-box .boxCont .box .info-2:before { width:70px; }
    .firewall-service .service-box .boxCont .box .info-3:before { width:100px; }
    .firewall-service .service-box .boxCont .box .info-4:before,
    .firewall-service .service-box .boxCont .box .info-5:before,
    .firewall-service .service-box .boxCont .box .info-6:before { width:40px; }
    .firewall-service .service-box .boxCont .box .info-3 .arr-2:before { width:100px; }
    .firewall-service .service-box .boxCont .txt_t { top:-23px; width:260px; height:46px; font-size:16px; }
    .firewall-service .service-box .boxCont .txt_b { bottom:-23px; width:260px; height:46px; font-size:16px; }
    .firewall-service .service-box .boxCont .box .circle-box.c2:before { bottom:-25px; height:25px; }
    .firewall-service .service-box3 .boxCont .box .circle-box.cs2:before { top:-30px; height:30px; }
    .firewall-service .service-box3 .boxCont .box .circle-box.cs3:before { bottom:-30px; height:30px; }
    .firewall-service .service-box1 .boxCont .box { padding:40px 20px 50px; }
    .firewall-service .service-box2 .boxCont .box { padding:40px 20px; }
    .firewall-service .service-box2 .boxCont .box .txtbox { width:60px; margin:0 18px; }
    .firewall-service .service-box2 .boxCont .box .txtbox .sbox:not(:last-child) { margin-bottom:10px; }
    .firewall-service .service-box2 .boxCont .box .txtbox .sbox .txt { font-size:14px; margin-top:5px; }
    .firewall-service .service-box3 .boxCont .box { padding:55px 20px; }
    .firewall-service .service-box3 .boxCont .box .circle-box { width:90px; height:90px; }
    .firewall-service .service-box3 .boxCont .box .circle-box .icon img { width:35px; }
    .firewall-service .service-box3 .boxCont .box .circle-box.cs3 .icon img { width:30px; }
    .firewall-service .service-box4 li { padding:30px 20px; font-size:14px; }
    .firewall-service .service-box4 li strong { font-size:14px;}
    .firewall-service .service-box5 ul { gap: 20px 40px; width: 100%; }
    .firewall-service .service-box5 li { width: 100%; }
    .firewall-service .service-box5 ul li a { width:100%; padding:5px; }
}
@media screen and (max-width:640px){
    .firewall-service { padding:0px 0; }
    .firewall-service .service-box1 { margin-top:30px; }
    .firewall-service .service-box2,
    .firewall-service .service-box3,
    .firewall-service .service-box4 { margin-top:80px; }
    .firewall-service .service-box4 li { width:100%; }
    .firewall-service .service-box1 .boxCont .box { padding:40px 10px 50px; }
    .firewall-service .service-box2 .boxCont .box { padding:40px 10px; }
    .firewall-service .service-box3 .boxCont .box { padding:55px 10px; }
    .firewall-service .service-box5 ul { gap: 10px; }
    .firewall-service .service-box5 li { width: 100%; }
    .firewall-service .service-box5 ul li a { width:100%; padding:5px; }
}
@media screen and (max-width:540px){
    .firewall-service .service-box2,
    .firewall-service .service-box3,
    .firewall-service .service-box4 { margin-top:40px; }
    .firewall-service .service-box1 .boxCont .box,
    .firewall-service .service-box2 .boxCont .box,
    .firewall-service .service-box3 .boxCont .box { padding:60px 10px; }
    .firewall-service .service-box .boxCont { max-width:240px; margin:0 auto; }
    .firewall-service .service-box .boxCont .box { display:block; flex-wrap:wrap; justify-content:center; width:100%; }
    .firewall-service .service-box .boxCont .box .circle-box { margin:80px auto; }
    .firewall-service .service-box .boxCont .box .circle-box.c1,
    .firewall-service .service-box .boxCont .box .circle-box.cs1 { margin-top:0; }
    .firewall-service .service-box .boxCont .box .circle-box.c2:before { right:-20px; top:50%; left:unset; bottom:unset; transform:translate(0, -50%) rotate(-90deg); }
    .firewall-service .service-box .boxCont .box .circle-box.c3,
    .firewall-service .service-box .boxCont .box .circle-box.cs4 { margin-bottom:0; }
    .firewall-service .service-box .boxCont .box .info > .txt { min-height:60px; width:200px; align-items:center; }
    .firewall-service .service-box .boxCont .box .info { top:unset; padding:10px 0 0 110px; text-align:left;  transform:translate(-50%, 0); }
    .firewall-service .service-box .boxCont .box .info .txt,
    .firewall-service .service-box .boxCont .box .info-3 .arr-2 .txt-1{ font-size:14px; }
    .firewall-service .service-box .boxCont .box .info-1 { left:50%; top:160px; }
    .firewall-service .service-box .boxCont .box .info-2 { left:50%; top:340px; }
    .firewall-service .service-box2 .boxCont .box .info-2 { top:300px; }
    .firewall-service .service-box .boxCont .box .info-3 { left:155px; top:150px; }
    .firewall-service .service-box .boxCont .box .info-3 .arr-1 { padding:0 0 0 30px; }
    .firewall-service .service-box .boxCont .box .info-3 .arr-2 { top:-20px; text-align:right; width:100px; left:-50px; }
    .firewall-service .service-box .boxCont .box .info-3 .arr-2 .txt-1 { right:unset; left:0; top:24px; }
    .firewall-service .service-box .boxCont .box .info-4 { left:50%; top:150px; padding:10px 0 0 100px; }
    .firewall-service .service-box .boxCont .box .info-5 { left:50%; top:320px; padding:10px 0 0 100px; }
    .firewall-service .service-box .boxCont .box .info-6 { left:50%; top:490px; padding:10px 0 0 100px; }
    .firewall-service .service-box .boxCont .box .info-1:before,
    .firewall-service .service-box .boxCont .box .info-2:before { width:60px; top:34px; transform:translate(-50%, 0) rotate(90deg); }
    .firewall-service .service-box .boxCont .box .info-3:before { width:70px; top:10px; transform:translate(-50%, 0) rotate(90deg); }
    .firewall-service .service-box .boxCont .box .info-4:before,
    .firewall-service .service-box .boxCont .box .info-5:before,
    .firewall-service .service-box .boxCont .box .info-6:before { width:40px; top:34px; transform:translate(-50%, 0) rotate(90deg); }
    .firewall-service .service-box .boxCont .box .info-3 .arr-2:before { top:20px; left:60px; width:70px; transform:translate(0) rotate(90deg); }
    .firewall-service .service-box2 .boxCont .box .txtbox { margin:0; display:flex; width:100%; justify-content:center; flex-direction:row-reverse; }
    .firewall-service .service-box2 .boxCont .box .txtbox .sbox:not(:last-child) { margin-bottom:0; margin-left:30px; }
    .firewall-service .service-box .boxCont .txt_t { left:-40px; top:50%; transform:translate(0, -50%); width:80px; height:100px; padding:10px; border-radius:10px; font-size:14px; }
    .firewall-service .service-box .boxCont .txt_b { right:-40px; top:50%; transform:translate(0, -50%); left:unset; bottom:unset; width:80px; height:100px; padding:10px; border-radius:10px; font-size:14px; }
    .firewall-service .service-box3 .boxCont .txt_t { top:41%;}
    .firewall-service .service-box3 .boxCont .txt_b { top:59%;}
    .firewall-service .service-box3 .boxCont .box .circle-box.cs2:before { left:-22px; top:50%; transform:translate(0, -50%) rotate(-90deg); }
    .firewall-service .service-box3 .boxCont .box .circle-box.cs3:before { left:unset; right:-22px; top:50%; transform:translate(0, -50%) rotate(90deg); }
    .firewall-service .service-box5 li { font-size: 13px; }
}



/* animation */
.firewall-service .service-box,
.firewall-service .service-box4 { opacity:0; }
.firewall-service .service-box.subOn,
.firewall-service .service-box4.subOn { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }