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

.securityControl-box1 { padding-top:0 !important; padding-bottom:110px; }
.securityControl-box2 { padding:140px 0; background:#fff; }
.securityControl-box2 .feature-box { position:relative; margin-top:50px; }
.securityControl-box2 .feature-box .circle-box { margin:0 auto; width:521px; height:521px; border:74px solid #f2f6fa; border-radius:521px; font-size:32px; font-weight:600; color:#222; line-height:1.3; display:flex; align-items:center; justify-content:center; text-align:center; }
.securityControl-box2 .listbox > div { position:absolute; top:80px; width:calc(50% - 100px); display:flex; justify-content:space-between; }
.securityControl-box2 .listbox .l-box { left:0; }
.securityControl-box2 .listbox .r-box { right:0; flex-direction:row-reverse; }
.securityControl-box2 .listbox .box { position:relative; width:275px; height:388px; border:1px solid #e1e1e1; border-radius:10px; background:#f9f9f9; padding:40px 20px 20px 40px; }
.securityControl-box2 .listbox .box:before { content:''; display:block; position:absolute; top:50%; right:-48px; transform:translateY(-50%); width:48px; height:55px; background:url(../img/server/securityControl_arr.png) no-repeat right center;}
.securityControl-box2 .listbox .r-box .box:before { left:-48px; right:unset; transform:translateY(-50%) rotate(180deg); }
.securityControl-box2 .listbox .box dt { font-size:22px; font-weight:600; color:#222; line-height:1.3; }
.securityControl-box2 .listbox dt h3 { font:inherit; color:inherit; }
.securityControl-box2 .listbox .box dd { margin-top:15px; }
.securityControl-box2 .listbox .box dd li:not(:last-child) { margin-bottom:15px; }
.securityControl-box2 .listbox .box dd li { position:relative; padding-left:17px; font-size:16px; font-weight:400; color:#222; line-height:1.3; word-break:keep-all; }
.securityControl-box2 .listbox .box dd li:before { content:''; display:block; position:absolute; top:8px; left:0; background:#222; width:2px; height:2px; }
.securityControl-box2 .listbox .list { width:240px; }
.securityControl-box2 .listbox .list dt { font-size:22px; font-weight:600; color:#222; line-height:1.3; text-align:center; }
.securityControl-box2 .listbox .list dd { margin-top:15px; }
.securityControl-box2 .listbox .list dd li:not(:last-child) { margin-bottom:5px; }
.securityControl-box2 .listbox .list dd li { width:100%; height:62px; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:400; color:#222; line-height:1.3; border-radius:10px; border:1px solid var(--mainColor); background:#fff; word-break:keep-all; }
.securityControl-box2 .box_b { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:810px; }
.securityControl-box2 .box_b:before { content:''; display:block; position:absolute; bottom:48px; left:0; width:100%; height:1px; background:#666; }
.securityControl-box2 .box_b .txt { position:absolute; bottom:65px; width:240px; padding:0 15px; display:flex; justify-content:space-between; font-size:17px; font-weight:400; color:#222; line-height:1.3; }
.securityControl-box2 .box_b .txt.txt-r { right:0; }
.securityControl-box2 .box_b .txt .s1 { padding:13px 25px 13px 0; background:url(../img/server/icon_arr_up.png) no-repeat right center; }
.securityControl-box2 .box_b .txt .s2 { padding:13px 0 13px 25px; background:url(../img/server/icon_arr_down.png) no-repeat left center; }
.securityControl-box2 .box_b .data-box { width:100px; margin:0 auto; position:relative; z-index:2; text-align:center; }
.securityControl-box2 .box_b .data-box .tit { font-size:16px; font-weight:600; color:#222; line-height:1.3; }
.securityControl-box2 .box_b .data-box .icon { margin-top:10px; width:97px; height:97px; background:#fff; border:1px solid var(--mainColor); border-radius:98px; display:flex; align-items:center; justify-content:center; }
@media screen and (max-width:1500px){
    .securityControl-box2 .listbox > div { width:calc(50% - 100px); }
    .securityControl-box2 .listbox .box { width:235px; padding:40px 20px 20px 30px; }
    .securityControl-box2 .box_b { width:680px; }
}
@media screen and (max-width:1280px){
    .securityControl-box2 .feature-box .circle-box { width:450px; height:450px; border:65px solid #f2f6fa; font-size:26px; }
    .securityControl-box2 .listbox > div { width:calc(50% - 70px); }
    .securityControl-box2 .listbox .box { width:200px; padding:20px 10px 20px 20px; height:322px;}
    .securityControl-box2 .listbox .box dt { font-size:19px; }
    .securityControl-box2 .listbox .box dd li:not(:last-child) { margin-bottom:10px; }
    .securityControl-box2 .listbox .list { width:180px; }
    .securityControl-box2 .listbox .list dt { font-size:19px;}
    .securityControl-box2 .listbox .list dd { margin-top:12px; }
    .securityControl-box2 .listbox .list dd li:not(:last-child) { margin-bottom:5px; }
    .securityControl-box2 .listbox .list dd li { height:48px; font-size:16px; }
    .securityControl-box2 .box_b { width:500px; }
    .securityControl-box2 .box_b .txt { width:180px; font-size:16px; }
    .securityControl-box2 .box_b .data-box .icon { margin-top:8px; }
}
@media screen and (max-width:1024px){
    .securityControl-box1 { padding-bottom:100px; }
    .securityControl-box2 { padding:100px 0; }
    .securityControl-box2 .feature-box { position:relative; }
    .securityControl-box2 .feature-box { max-width:440px; margin:0 auto; margin-top:40px; }
    .securityControl-box2 .feature-box .circle-box { position:absolute; left:0; top:50%; transform:translate(0, -50%); width:250px; height:250px; border:50px solid #f2f6fa; font-size:22px; }
    .securityControl-box2 .listbox .r-box { right:0; flex-direction:row; }
    .securityControl-box2 .listbox > div { position:relative; top:0; width:100%; align-items:center; }
    .securityControl-box2 .listbox .l-box { padding-bottom:100px; }
    .securityControl-box2 .listbox .r-box { padding-top:100px; }
    .securityControl-box2 .listbox .r-box .box:before { left:unset; right:-48px; transform:translateY(-50%) rotate(0); }
    .securityControl-box2 .box_b { position:absolute; top:50%; bottom:unset; transform:translate(-50%, -50%); max-width:440px; width:100%; min-height:100px; }
    .securityControl-box2 .box_b:before { left:50%; width:50%; }
    .securityControl-box2 .box_b .txt { left:unset; right:0; bottom:100px; }
    .securityControl-box2 .box_b .txt.txt-r { bottom:-58px; }
    .securityControl-box2 .box_b .txt.txt-r .s1 { background:url(../img/server/icon_arr_down.png) no-repeat right center; }
    .securityControl-box2 .box_b .txt.txt-r .s2 { background:url(../img/server/icon_arr_up.png) no-repeat left center; }
    .securityControl-box2 .box_b .data-box { position:absolute; right:40px; top:0}
    .securityControl-box2 .box_b .data-box .tit  { position:absolute; left:-90px; top:50%; transform:translateY(-50%); background:#fff }
}
@media screen and (max-width:640px){
    .securityControl-box1 { padding-bottom:80px; }
    .securityControl-box2 { padding:80px 0; }
    .securityControl-box2 .feature-box .circle-box { width:200px; height:200px; border:40px solid #f2f6fa; font-size:20px; }
    .securityControl-box2 .listbox .box { width:160px; padding:20px 10px 20px 10px; height:322px;}
    .securityControl-box2 .listbox .box dt { font-size:17px; }
    .securityControl-box2 .listbox .box dd li { font-size:15px; padding-left:10px; }
    .securityControl-box2 .listbox .box dd li:not(:last-child) { margin-bottom:10px; }
    .securityControl-box2 .listbox .list { width:160px; }
    .securityControl-box2 .listbox .list dt { font-size:17px;}
    .securityControl-box2 .listbox .list dd { margin-top:10px; }
    .securityControl-box2 .listbox .list dd li { height:45px; font-size:15px; }
    .securityControl-box2 .box_b .txt { width:160px; font-size:15px; }
    .securityControl-box2 .box_b .data-box { right:30px;}
}

/* animation */
.securityControl-box2 .feature-box { opacity:0; }
.securityControl-box2.subOn .feature-box { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }