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

.circle-line { position:relative; overflow:hidden; }
.circle-line:before { content:''; display:block; position:absolute; top:0; right:0; width:413px; height:287px; background:url(../img/common/circle_bg1.webp) no-repeat left bottom; }
.circle-line:after { content:''; display:block; position:absolute; bottom:0; left:0; width:543px; height:430px; background:url(../img/common/circle_bg2.webp) no-repeat right top; }
@media screen and (max-width:1024px){
    .circle-line:before { width:230px; height:161px; background-size:360px auto; }
    .circle-line:after { bottom:-25%; left:-10%; width:350px; height:338px; background-size:550px auto; }
}
@media screen and (max-width:640px){
    .circle-line:before { width:160px; height:112px; background-size:260px auto; }
    .circle-line:after { bottom:-20%; left:-22%; width:260px; height:251px; background-size:320px auto; }
}

.security-WAF .WAF-function { padding:140px 0; background:#fff; }
.security-WAF .WAF-function .listbox { margin-top:50px; }
.security-WAF .WAF-function .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.security-WAF .WAF-function .listbox li { width:calc((100% - 40px) / 3); display:flex; align-items:center; height:163px; border-radius:15px; background:#f9f9f9; padding:0 10px 0 33px; }
.security-WAF .WAF-function .listbox li .icon { width:98px; height:98px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:90px; }
.security-WAF .WAF-function .listbox li .txtbox { width:calc(100% - 98px); word-break:keep-all; padding-left:38px; font-size:20px; font-weight:400; color:#222; line-height:1.5; letter-spacing:-0.02em; }
.security-WAF .WAF-function .listbox li .txtbox strong { font-weight:600; word-break:keep-all; }
.security-WAF .WAF-effect { padding:140px 0; }
.security-WAF .WAF-effect .listbox { margin-top:50px; position:relative; z-index:2; }
.security-WAF .WAF-effect .listbox:before { content:''; display:block; position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:1px; background:var(--mainColor); }
.security-WAF .WAF-effect .listbox ul { position:relative; z-index:5; display:flex; flex-wrap:wrap; justify-content:center; gap:45px; padding:45px; border-radius:300px; background:#fff; border:1px solid var(--mainColor);}
.security-WAF .WAF-effect .listbox li { position:relative; width:calc((100% - 180px) / 5); }
.security-WAF .WAF-effect .listbox li:before { content:''; display:block; padding-bottom:100%; }
.security-WAF .WAF-effect .listbox li .circle-box { position:absolute; left:0; top:0; width:100%; height:100%; background:#f2f6fa; display:flex; align-items:center; justify-content:center; text-align:center; border-radius:300px; }
.security-WAF .WAF-effect .listbox li .circle-box .num { font-family:var(--mainFont); font-size:18px; font-weight:600; color:var(--mainColor); line-height:1.5; }
.security-WAF .WAF-effect .listbox li .circle-box .txt { word-break:keep-all; margin-top:10px; font-size:18px; font-weight:400; color:#222; line-height:1.5; }
.security-WAF .WAF-effect .listbox li .circle-box .txt strong { font-weight: 600; }
@media screen and (max-width:1280px){
    .security-WAF .WAF-function .listbox li { padding:0 10px 0 25px; }
    .security-WAF .WAF-function .listbox li .txtbox { padding-left:25px; }
    .security-WAF .WAF-function .listbox li .txtbox br { display:none }
    .security-WAF .WAF-effect .listbox ul { gap:30px; padding:30px; }
    .security-WAF .WAF-effect .listbox li { width:calc((100% - 120px) / 5); }
    .security-WAF .WAF-effect .listbox li .circle-box .txt { margin-top:8px; font-size:17px; padding:0 10px; }
    .security-WAF .WAF-effect .listbox li .circle-box .txt br { display:none }
}
@media screen and (max-width:1024px){
    .security-WAF .WAF-function { padding:100px 0; }
    .security-WAF .WAF-function .listbox { margin-top:40px; }
    .security-WAF .WAF-function .listbox li { width:calc((100% - 20px) / 2); padding:0 10px 0 20px; }
    .security-WAF .WAF-function .listbox li .txtbox { padding-left:20px; font-size:18px; }
    .security-WAF .WAF-function .listbox li .txtbox br { display:none }
    .security-WAF .WAF-effect { padding:100px 0; }
    .security-WAF .WAF-effect .listbox { margin-top:40px; }
    .security-WAF .WAF-effect .listbox ul { gap:30px 40px; padding:40px 100px; }
    .security-WAF .WAF-effect .listbox li { width:calc((100% - 80px) / 3); }
    .security-WAF .WAF-effect .listbox li .circle-box .num { font-size:16px; }
    .security-WAF .WAF-effect .listbox li .circle-box .txt { margin-top:5px; font-size:16px; }
}
@media screen and (max-width:860px){
    .security-WAF .WAF-function .listbox ul { gap:10px; }
    .security-WAF .WAF-function .listbox li { width:calc((100% - 10px) / 2); }
    .security-WAF .WAF-effect .listbox ul { gap:20px; border-radius:100px; padding:40px;}
    .security-WAF .WAF-effect .listbox li { width:calc((100% - 20px) / 2); }
    .security-WAF .WAF-effect .listbox li .circle-box .txt { padding:0 30px; }
}
@media screen and (max-width:640px){
    .security-WAF .WAF-function .listbox { margin-top:30px; }
    .security-WAF .WAF-function .listbox li { padding:10px; height:auto; }
    .security-WAF .WAF-function .listbox li .icon { width:70px; height:70px; }
    .security-WAF .WAF-function .listbox li .icon img { width:35px; }
    .security-WAF .WAF-function .listbox li .txtbox { font-size:16px; }
    .security-WAF .WAF-effect { padding:80px 0; }
    .security-WAF .WAF-effect .listbox { margin-top:30px; }
    .security-WAF .WAF-effect .listbox ul { gap:10px; padding:20px 10px;}
    .security-WAF .WAF-effect .listbox li .circle-box .num,
    .security-WAF .WAF-effect .listbox li .circle-box .txt { font-size:15px; }
    .security-WAF .WAF-effect .listbox li .circle-box .txt { padding:0 10px; }
}
@media screen and (max-width:550px){
    .security-WAF .WAF-function .listbox li { width:100%; }
}

/* animation */
.security-WAF .WAF-function .listbox,
.security-WAF .WAF-effect .listbox { opacity:0; }
.security-WAF .WAF-function.subOn .listbox,
.security-WAF .WAF-effect.subOn .listbox { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }

.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; }

/** open source **/
.source-box * { word-break:keep-all; }
.source-box .listbox { z-index:2; position:relative; }
.source-box .source-top { padding:0 0 110px; }
.source-box .source-top .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.source-box .source-top .listbox li { width:calc((100% - 40px) / 3); border-radius:15px; background:#fff; padding:35px 10px 35px 40px; display:flex; align-items:center; }
.source-box .source-top .listbox li .icon { width:98px; height:98px; border-radius:98px; background:#f9f9f9; display:flex; align-items:center; justify-content:center; }
.source-box .source-top .listbox li .txtbox { width:calc(100% - 98px); padding-left:40px; font-size:20px; font-weight:400; color:#222; line-height:1.5; letter-spacing:-0.02em; }
.source-box .source-top .listbox li dt { font-size:20px; font-weight:400; color:#222; line-height: 2; letter-spacing:-0.02em; color: #0569ff; }
.source-box .source-top .listbox li dt h3 { font:inherit; color:inherit; }
.source-box .source-top .listbox li dd { font-size:17px; font-weight:400; color:#222; line-height:1.5; letter-spacing:-0.02em; }
.source-box .composition-box { padding:20px 0 0; background:#fff; }
.source-box .composition-box .imgboxCont { margin-top:50px; text-align:center; }
.source-box .composition-box .imgboxCont .img_box { display: flex;text-align:center;justify-content: center;display: none; }
.source-box .composition-box .imgboxCont .img_box div { margin: 0 30px; }
.source-box .composition-box .imgboxCont img { max-width:100%; height:auto; }
.source-box .composition-box.ceph-box .top-box { margin-top:50px; display:flex; flex-wrap:wrap; gap:95px; }
.source-box .composition-box.ceph-box .top-box .l-box { position:relative; width:35%; padding-top:35px; }
.source-box .composition-box.ceph-box .top-box .l-box:before { content:''; display:block; z-index:2; position:absolute; left:50%; bottom:-80px; width:1px; height:400px; background:var(--mainColor); }
.source-box .composition-box.ceph-box .top-box .r-box { width:calc(65% - 95px); }
.source-box .composition-box.ceph-box .top-box .sbox { position:relative; z-index:5; border-radius:10px; border:1px solid var(--mainColor); background:#fff; }
.source-box .composition-box.ceph-box .top-box .sbox .top-txt  { position:absolute; top:-25px; padding:0 30px; font-size:22px; font-weight:500; color:#fff; line-height:1.5; letter-spacing:-0.02em; height:50px; border-radius:98px; background:#444; display:flex; align-items:center; justify-content:center; }
.source-box .composition-box.ceph-box .top-box .sbox dt { font-size:22px; font-weight:500; color:var(--mainColor); line-height:1.5; letter-spacing:-0.02em; }
.source-box .composition-box.ceph-box .top-box .sbox dd { font-size:16px; font-weight:400; color:#222; line-height:1.5; }
.source-box .composition-box.ceph-box .top-box .l-box .sbox { position:relative; padding:85px 20px 95px; text-align:center; }
.source-box .composition-box.ceph-box .top-box .l-box .sbox:before { content:''; display:block; z-index:2; position:absolute; top:50%; right:-57px; width:57px; height:1px; background:var(--mainColor); }
.source-box .composition-box.ceph-box .top-box .l-box .sbox .top-txt { left:50%; transform:translateX(-50%); }
.source-box .composition-box.ceph-box .top-box .l-box .sbox dd { margin-top:25px; }
.source-box .composition-box.ceph-box .top-box .r-box .sbox:not(:last-child) { margin-bottom:20px; }
.source-box .composition-box.ceph-box .top-box .r-box .sbox { padding:65px 55px; }
.source-box .composition-box.ceph-box .top-box .r-box .sbox:not(:last-child):before { content:''; display:block; z-index:2; position:absolute; top:50%; left:-40px; width:40px; height:1px; background:var(--mainColor); }
.source-box .composition-box.ceph-box .top-box .r-box .sbox:not(:last-child):after { content:''; display:block; z-index:2; position:absolute; bottom:50%; left:-40px; width:1px; height:calc(50% + 10px); background:var(--mainColor); }
.source-box .composition-box.ceph-box .top-box .r-box .sbox:first-child:after { top:50%; bottom:unset; height:calc(50% + 12px); }
.source-box .composition-box.ceph-box .top-box .r-box .sbox dl { display:flex; flex-wrap:wrap; }
.source-box .composition-box.ceph-box .top-box .r-box .sbox dt { width:176px; }
.source-box .composition-box.ceph-box .top-box .r-box .sbox dd { width:calc(100% - 176px); }
.source-box .composition-box.ceph-box .bottom-box { position:relative; margin-top:50px; border-radius:10px; background:var(--mainColor); padding:83px 215px; }
.source-box .composition-box.ceph-box .bottom-box dl { display:flex; flex-wrap:wrap; }
.source-box .composition-box.ceph-box .bottom-box dt { width:176px; font-size:22px; font-weight:500; color:#fff; line-height:1.5; letter-spacing:-0.02em; }
.source-box .composition-box.ceph-box .bottom-box dd { width:calc(100% - 176px); font-size:16px; font-weight:400; color:#fff; line-height:1.5;}
.source-box .composition-box.ceph-box .bottom-box:last-child:before { content:''; display:block; z-index:2; position:absolute; left:50%; top:-50px; margin-left:-20px; width:1px; height:50px; background:var(--mainColor); }
.source-box .composition-box.haproxy-box { padding: 140px 0px; }
.source-box .composition-box.haproxy-box .subTitle .txtbox { margin-top:10px; }
.source-box .composition-box.haproxy-box .listbox { position:relative; margin-top:50px; }
.source-box .composition-box.haproxy-box .listbox .circle-box { margin:0 auto; width:521px; height:521px; display:flex; align-items:center; justify-content:center; background:url(../img/source/source_haproxy_bg1.png) no-repeat center center; }
.source-box .composition-box.haproxy-box .listbox .circle-box .txt { font-size:22px; font-weight:500; color:#222; line-height:1.5; letter-spacing:-0.02em; }
.source-box .composition-box.haproxy-box .txt-list { margin-top:20px; }
.source-box .composition-box.haproxy-box .txt-list ul { position:relative; display:flex; flex-wrap:wrap; gap:30px; }
.source-box .composition-box.haproxy-box .txt-list ul:before { content:''; display:block; z-index:2; position:absolute; top:-80px; left:50%; transform:translateX(-50%); width:calc(100% - 33% + 16px); margin-left:1px; height:1px; background:var(--mainColor); }
.source-box .composition-box.haproxy-box .txt-list ul:after { content:''; display:block; z-index:2; position:absolute; top:-160px; left:50%; transform:translateX(-50%) rotate(180deg); width:10px; height:8px; background:url(../img/source/icon_arr1.png) no-repeat center center; }
.source-box .composition-box.haproxy-box .txt-list li { position:relative; font-size:22px; font-weight:500; color:#fff; line-height:1.3; letter-spacing:-0.02em; width:calc((100% - 60px) / 3); height:100px; border-radius:15px; background:var(--mainColor); display:flex; align-items:center; justify-content:center; }
.source-box .composition-box.haproxy-box .txt-list li:before { content:''; display:block; z-index:2; position:absolute; top:-80px; left:50%; width:1px; height:80px; background:var(--mainColor); }
.source-box .composition-box.haproxy-box .txt-list li:nth-child(2):before { height:160px; top:-160px; }
.source-box .composition-box.haproxy-box .txt-list li:after { content:''; display:block; z-index:2; position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:10px; height:8px; background:url(../img/source/icon_arr1.png) no-repeat center center; }
.source-box .composition-box.haproxy-box .txtbox2 { z-index:5; position:absolute; left:55%; bottom:140px; padding:34px 20px 34px 40px; border-radius:10px; border:1px solid #e1e1e1; background:#f9f9f9;}
.source-box .composition-box.haproxy-box .txtbox2 li { position:relative; padding-left:10px; font-size:16px; font-weight:400; color:#222; line-height:1.6; }
.source-box .composition-box.haproxy-box .txtbox2 li:before { content:''; display:block; position:absolute; left:0; top:12px; width:2px; height:2px; background:#222; border-radius:5px; }
.source-box .composition-box.haproxy-box .txtbox2 li:not(:last-child) { margin-bottom:5px; }

@media screen and (max-width:1500px){
    .source-box .source-top .listbox li .txtbox br { display:none }
}
@media screen and (max-width:1280px){
    .source-box .source-top .listbox li { padding:25px 10px 25px 25px; }
    .source-box .source-top .listbox li .txtbox { padding-left:25px; }
    .source-box .composition-box.ceph-box .top-box { gap:70px; }
    .source-box .composition-box.ceph-box .top-box .r-box { width:calc(65% - 70px); }
    .source-box .composition-box.ceph-box .top-box .sbox .top-txt  { top:-25px; padding:0 30px; font-size:22px; height:50px; }
    .source-box .composition-box.ceph-box .top-box .sbox dt { font-size:22px; }
    .source-box .composition-box.ceph-box .top-box .sbox dd { font-size:16px; }
    .source-box .composition-box.ceph-box .top-box .l-box .sbox { padding:70px 20px 80px; }
    .source-box .composition-box.ceph-box .top-box .l-box .sbox:before { right:-43px; width:43px; }
    .source-box .composition-box.ceph-box .top-box .l-box .sbox dd { margin-top:25px; }
    .source-box .composition-box.ceph-box .top-box .r-box .sbox { padding:65px 55px; }
    .source-box .composition-box.ceph-box .top-box .r-box .sbox:not(:last-child):before { left:-30px; width:30px; }
    .source-box .composition-box.ceph-box .top-box .r-box .sbox:not(:last-child):after { left:-30px; }
    .source-box .composition-box.ceph-box .top-box .r-box .sbox dt { width:120px; }
    .source-box .composition-box.ceph-box .top-box .r-box .sbox dd { width:calc(100% - 120px); }
    .source-box .composition-box.ceph-box .bottom-box { margin-top:50px; padding:75px 200px; }
    .source-box .composition-box.ceph-box .bottom-box dt { width:120px; font-size:22px; }
    .source-box .composition-box.ceph-box .bottom-box dd { width:calc(100% - 120px); font-size:16px; }
}
@media screen and (max-width:1024px){
    .source-box .source-top { padding:0 0 100px; }
    .source-box .source-top .listbox li { padding:20px 10px 20px 20px; }
    .source-box .source-top .listbox li .txtbox { font-size:18px; padding-left:20px; }
    .source-box .source-top .listbox li dt { font-size:18px; font-weight:400; color:#222; line-height: 2; letter-spacing:-0.02em; }
    .source-box .source-top .listbox li dd { font-size:15px; font-weight:400; color:#222; line-height:1.5; letter-spacing:-0.02em; }
    .source-box .composition-box { padding:40px 0 0; }
    .source-box .composition-box .imgboxCont { margin-top:40px; }
    .source-box .composition-box .imgboxCont .img_main_box { display: none; }
    .source-box .composition-box .imgboxCont .img_box { display: flex;flex-direction: column;align-items: center;text-align: center; }
    .source-box .composition-box.ceph-box .top-box { gap:60px; }
    .source-box .composition-box.ceph-box .top-box .r-box { width:calc(65% - 60px); }
    .source-box .composition-box.ceph-box .top-box .sbox .top-txt  { top:-23px; padding:0 20px; font-size:20px; height:46px; }
    .source-box .composition-box.ceph-box .top-box .sbox dt { font-size:20px; }
    .source-box .composition-box.ceph-box .top-box .sbox dd { font-size:16px; }
    .source-box .composition-box.ceph-box .top-box .sbox dd br { display:none }
    .source-box .composition-box.ceph-box .top-box .l-box .sbox { padding:50px 20px; }
    .source-box .composition-box.ceph-box .top-box .l-box .sbox:before { right:-43px; width:43px; }
    .source-box .composition-box.ceph-box .top-box .l-box .sbox dd { margin-top:25px; }
    .source-box .composition-box.ceph-box .top-box .r-box .sbox { padding:40px 20px 40px 30px; }
    .source-box .composition-box.ceph-box .top-box .r-box .sbox:not(:last-child):before { left:-20px; width:20px; }
    .source-box .composition-box.ceph-box .top-box .r-box .sbox:not(:last-child):after { left:-20px; }
    .source-box .composition-box.ceph-box .top-box .r-box .sbox dt { width:110px; }
    .source-box .composition-box.ceph-box .top-box .r-box .sbox dd { width:calc(100% - 110px); }
    .source-box .composition-box.ceph-box .bottom-box { margin-top:40px; padding:50px 50px; }
    .source-box .composition-box.ceph-box .bottom-box dt { width:110px; font-size:22px; }
    .source-box .composition-box.ceph-box .bottom-box dd { width:calc(100% - 110px); font-size:16px; margin-top:10px; }
    .source-box .composition-box.ceph-box .bottom-box dd br { display:none }
    .source-box .composition-box.haproxy-box .listbox { margin-top:40px; }
    .source-box .composition-box.haproxy-box .listbox .circle-box { width:450px; height:450px; background-size:450px auto; }
    .source-box .composition-box.haproxy-box .listbox .circle-box .txt { font-size:20px; }
    .source-box .composition-box.haproxy-box .txt-list { margin-top:20px; }
    .source-box .composition-box.haproxy-box .txt-list ul { gap:30px; }
    .source-box .composition-box.haproxy-box .txt-list li { font-size:20px; width:calc((100% - 60px) / 3); height:80px; }
    .source-box .composition-box.haproxy-box .txtbox2 { bottom:100px; padding:25px 20px; }
    .source-box .composition-box.haproxy-box .txtbox2 li { padding-left:10px; font-size:16px; }
    .source-box .composition-box.haproxy-box .txt-list ul:before { top:-70px; }
    .source-box .composition-box.haproxy-box .txt-list ul:after { top:-140px; }
    .source-box .composition-box.haproxy-box .txt-list li:before { top:-70px; height:70px; }
    .source-box .composition-box.haproxy-box .txt-list li:nth-child(2):before { height:140px; top:-140px; }
}
@media screen and (max-width:960px){
    .source-box .source-top .listbox ul { gap:10px; }
    .source-box .source-top .listbox li { width:calc((100% - 20px) / 3); }
    .source-box .source-top .listbox li dt { font-size:17px; font-weight:400; color:#222; line-height: 2; letter-spacing:-0.02em; }
    .source-box .source-top .listbox li dd { font-size:15px; font-weight:400; color:#222; line-height:1.5; letter-spacing:-0.02em; }
}
@media screen and (max-width:860px){
    /* .source-box .source-top .listbox li { width:32%; } */
    .source-box .source-top .listbox li { width:100%; }
}
@media screen and (max-width:640px){
    .source-box .source-top { padding:0 0 80px; }
    .source-box .source-top .listbox li .txtbox { font-size:16px; }
    .source-box .composition-box { padding:80px 0 0; }
    .source-box .composition-box .imgboxCont { margin-top:30px; }
    .source-box .source-top { padding:0 0 100px; }
    .source-box .source-top .listbox li { padding:20px 10px 20px 20px; width: 100%; }
    .source-box .source-top .listbox .txtbox { width: 100%; }
    .source-box .source-top .listbox li .txtbox { font-size:18px; padding-left:20px; }
    .source-box .source-top .listbox li dt { font-size:14px; font-weight:400; color:#222; line-height: 2; letter-spacing:-0.02em; }
    .source-box .source-top .listbox li dd { font-size:13px; font-weight:400; color:#222; line-height:1.5; letter-spacing:-0.02em; }
    .source-box .composition-box { padding:80px 0 0; }
    .source-box .composition-box .imgboxCont { margin-top:40px; }
    .source-box .composition-box.ceph-box .top-box { gap:30px; }
    .source-box .composition-box.ceph-box .top-box .r-box { width:calc(65% - 30px); }
    .source-box .composition-box.ceph-box .top-box .sbox .top-txt { top:-20px; font-size:18px; height:40px; left:50%; transform:translateX(-50%); white-space:nowrap; }
    .source-box .composition-box.ceph-box .top-box .sbox dt { font-size:18px; text-align:center; }
    .source-box .composition-box.ceph-box .top-box .sbox dd { font-size:16px; text-align:center; }
    .source-box .composition-box.ceph-box .top-box .l-box .sbox { padding:30px 10px; }
    .source-box .composition-box.ceph-box .top-box .l-box .sbox:before { right:-20px; width:20px; }
    .source-box .composition-box.ceph-box .top-box .l-box .sbox dd { margin-top:10px; }
    .source-box .composition-box.ceph-box .top-box .r-box .sbox { padding:30px 10px; }
    .source-box .composition-box.ceph-box .top-box .r-box .sbox:not(:last-child):before { left:-13px; width:13px; }
    .source-box .composition-box.ceph-box .top-box .r-box .sbox:not(:last-child):after { left:-13px; }
    .source-box .composition-box.ceph-box .top-box .r-box .sbox dt { width:100%; }
    .source-box .composition-box.ceph-box .top-box .r-box .sbox dd { width:100%; margin-top:10px; }
    .source-box .composition-box.ceph-box .bottom-box { margin-top:40px; padding:30px 20px; }
    .source-box .composition-box.ceph-box .bottom-box dt { width:100%; font-size:20px; }
    .source-box .composition-box.ceph-box .bottom-box dd { width:100%; font-size:16px; }
    .source-box .composition-box.haproxy-box .listbox { margin-top:30px; }
    .source-box .composition-box.haproxy-box .listbox .circle-box { width:300px; height:300px; background-size:300px auto; }
    .source-box .composition-box.haproxy-box .listbox .circle-box .txt { font-size:18px; }
    .source-box .composition-box.haproxy-box .txt-list { margin-top:20px; }
    .source-box .composition-box.haproxy-box .txt-list ul { gap:10px; }
    .source-box .composition-box.haproxy-box .txt-list li { font-size:18px; width:calc((100% - 20px) / 3); height:60px; }
    .source-box .composition-box.haproxy-box .txtbox2 { bottom:80px; padding:10px 10px; }
    .source-box .composition-box.haproxy-box .txtbox2 li { padding-left:10px; font-size:14px; }
    .source-box .composition-box.haproxy-box .txtbox2 li:before { top:11px; }
    .source-box .composition-box.haproxy-box .txtbox2 li:not(:last-child) { margin-bottom:2px; }
    .source-box .composition-box.haproxy-box .txt-list ul:before { top:-50px; width:calc(100% - 33% + 6px);}
    .source-box .composition-box.haproxy-box .txt-list ul:after { top:-100px; }
    .source-box .composition-box.haproxy-box .txt-list li:before { top:-50px; height:50px; }
    .source-box .composition-box.haproxy-box .txt-list li:nth-child(2):before { height:100px; top:-100px; }
}

/* animation */
.source-top .listbox,
.source-box .composition-box .listbox,
.source-box .composition-box .imgboxCont { opacity:0; }
.source-top.subOn .listbox,
.source-box .composition-box.subOn .listbox,
.source-box .composition-box .imgboxCont { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }