@charset "utf-8";

/* visual */
#subCont .visual-box { position:relative; width:100%; height:580px; overflow:hidden; }
#subCont .visual-box .mvisualImage { position:absolute; right:190px; bottom:0; }
#subCont .visual-box .visual_txt { position:relative; width:100%; height:100%; }
#subCont .visual-box .visual_txt .inner { position:relative; height:calc(100% - 85px); z-index:2; }
#subCont .visual-box .visual_txt .txtbox { position:absolute; left:0; top:50%; transform:translateY(-50%); width:100%; }
#subCont .visual-box .visual_txt .txtbox dt { opacity:0; font-weight:600; font-size:24px; color:var(--mainColor); letter-spacing:-0.02em; line-height:1.3; overflow:hidden; }
#subCont .visual-box .visual_txt .txtbox dd { margin-top:15px; }
#subCont .visual-box .visual_txt .txtbox dd .txt-1 { opacity:0; font-weight:300; font-size:50px; color:#222; line-height:1.3; overflow:hidden; }
#subCont .visual-box .visual_txt .txtbox dd .txt-1 strong { font-weight:600; }
#subCont .visual-box .visual_txt .txtbox dd .txt-2 { opacity:0; margin-top:25px; font-weight:400; font-size:21px; color:#222; letter-spacing:-0.02em; line-height:1.5; overflow:hidden; word-break:keep-all; }
#subCont .visual-box .visual_txt .txtbox dd .txt-2 strong { font-weight:600; }
#subCont .visual-box .visual_txt .txtbox dd .txt-3 { font-size:19px; }
#subCont .visual-box .visual_txt .btn_link { position:relative; margin-top:70px; width:220px; height:60px; overflow:hidden; border:1px solid var(--mainColor); border-radius:50px; }
#subCont .visual-box .visual_txt .btn_link a { transition:all 0.3s; position:relative; z-index:1; font-size:16px; color:#222; font-weight:700; letter-spacing:-0.02em; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
#subCont .visual-box .visual_txt .btn_link a span { transition:all 0.3s; display:inline-block; padding-right:16px; font-family:var(--subFont1); font-weight:500; font-size:20px; color:var(--mainColor); background:url(../img/main/visual_arr.png) right center no-repeat; }
#subCont .visual-box .visual_txt .btn_link a:hover { background:var(--mainColor); }
#subCont .visual-box .visual_txt .btn_link a:hover span { filter:brightness(0) invert(1); }
#subCont .visual-box.subOn .visual_txt .txtbox dt { animation:ani_2 0.8s 0.2s; animation-fill-mode:both; }
#subCont .visual-box.subOn .visual_txt .txtbox dd .txt-1 { animation:ani_2 0.8s 0.6s; animation-fill-mode:both; }
#subCont .visual-box.subOn .visual_txt .txtbox dd .txt-2 { animation:ani_2 0.8s 1.0s; animation-fill-mode:both; }
@media screen and (max-width:1700px){
    #subCont .visual-box .mvisualImage { right:80px; text-align:right; }
    #subCont .visual-box .mvisualImage img { width:90% }
}
@media screen and (max-width:1540px){
    #subCont .visual-box .mvisualImage { right:60px; }
    #subCont .visual-box .visual_txt .txtbox { padding:0 20px; }
}
@media screen and (max-width:1400px){
    #subCont .visual-box .visual_txt .txtbox dt { font-size:22px; }
    #subCont .visual-box .visual_txt .txtbox dd { margin-top:15px; }
    #subCont .visual-box .visual_txt .txtbox dd .txt-1 { font-size:42px; }
    #subCont .visual-box .visual_txt .txtbox dd .txt-2 { margin-top:25px; font-size:20px; }
    #subCont .visual-box .visual_txt .txtbox dd .txt-3 { font-size:18px; }
}
@media screen and (max-width:1280px){
    #subCont .visual-box .mvisualImage { right:20px; }
    #subCont .visual-box .mvisualImage img { width:80% }
    #subCont .visual-box .visual_txt .txtbox dt { font-size:20px; }
    #subCont .visual-box .visual_txt .txtbox dd { margin-top:15px; }
    #subCont .visual-box .visual_txt .txtbox dd .txt-1 { font-size:36px; }
    #subCont .visual-box .visual_txt .txtbox dd .txt-2 { margin-top:20px; font-size:19px; }
}
@media screen and (max-width:1024px){
    #subCont .visual-box { height:480px; }
    #subCont .visual-box .mvisualImage img { width:70%; opacity:0.4 }
    #subCont .visual-box .visual_txt .txtbox dt { font-size:18px; }
    #subCont .visual-box .visual_txt .txtbox dd { margin-top:12px; }
    #subCont .visual-box .visual_txt .txtbox dd .txt-1 { font-size:28px; }
    #subCont .visual-box .visual_txt .txtbox dd .txt-2 { margin-top:20px; font-size:18px; }
    #subCont .visual-box .visual_txt .txtbox dd .txt-3 { font-size:16px; }
}
@media screen and (max-width:860px){
    #subCont .visual-box { height:450px; }
    #subCont .visual-box .mvisualImage img { width:50%; }
}
@media screen and (max-width:640px){
    #subCont .visual-box { height:500px; }
    #subCont .visual-box .mvisualImage img { width:60% }
    #subCont .visual-box .visual_txt .txtbox { top:60px; transform:translateY(0); }
    #subCont .visual-box .visual_txt .txtbox dt { font-size:16px; }
    #subCont .visual-box .visual_txt .txtbox dd { margin-top:10px; }
    #subCont .visual-box .visual_txt .txtbox dd .txt-1 { font-size:22px; }
    #subCont .visual-box .visual_txt .txtbox dd .txt-2 { margin-top:20px; font-size:16px; }
    #subCont .visual-box .visual_txt .txtbox dd .txt-3 { font-size:15px; }
    #subCont .visual-box .visual_txt .txtbox dd br { display:none }
}
@media screen and (max-width:550px){
    #subCont .visual-box { height:460px; }
    #subCont .visual-box .mvisualImage img { width:52% }
    #subCont .visual-box .mvisualImage.sv1 img { width:42% }
}

#subCont #lnb { margin-top:-85px; position:relative; z-index:5; }
#subCont #lnb dl { border:1px solid #e6e6e6; border-width:1px 1px 0 0; background:#fff; display:flex; }
#subCont #lnb dt { width:85px; height:85px; }
#subCont #lnb dt a { width:100%; height:100%; display:flex; align-items:center; justify-content:center; text-indent:-9999em; overflow:hidden; background:var(--mainColor) url(../img/common/icon_home.png) no-repeat center center; }
#subCont #lnb dd { display:flex; }
#subCont #lnb dd .depthMenu { position:relative; width:270px; }
#subCont #lnb dd .depthMenu:after { content:""; display:block; position:absolute; top:50%; right:0; transform:translateY(-50%); width:1px; height:30px; background:#e6e6e6;}
#subCont #lnb dd .depthMenu p.tit span { cursor:pointer; padding:0 20px 0 30px; height:85px; display:flex; align-items:center; color:#222; font-size:16px; font-weight:400; letter-spacing:-0.02em; }
#subCont #lnb dd .depthMenu p.tit { position:relative; }
#subCont #lnb dd .depthMenu p.tit:after { content:""; display:block; position:absolute; top:50%; right:20px; transform:translateY(-50%); width:8px; height:4px; background:url(../img/common/icon_arr.png) no-repeat center center; transition:all 0.4s; }
#subCont #lnb dd .depthMenu p.ov:after { transform:translateY(-50%) rotate(180deg); }
#subCont #lnb dd .depthMenu .sub-box { position:absolute; top:85px; padding:0 30px; z-index:2; display:none; border:1px solid #e6e6e6; width:100%; background:#fff; }
#subCont #lnb dd .depthMenu .sub-box li { padding:10px 0; }
#subCont #lnb dd .depthMenu .sub-box li:first-child { padding-top:30px; }
#subCont #lnb dd .depthMenu .sub-box li:last-child { padding-bottom:30px; }
#subCont #lnb dd .depthMenu .sub-box li a { font-size:16px; font-weight:400; letter-spacing:-0.02em; }
#subCont #lnb dd .depthMenu .sub-box li a:hover { color:var(--mainColor)}
#subCont #lnb dd .depthMenu:last-child p.tit span { font-weight:700; color:var(--mainColor); }
@media screen and (max-width:1400px){
    #subCont #lnb { margin-top:-70px; }
    #subCont #lnb dt { width:70px; height:70px; }
    #subCont #lnb dd .depthMenu p.tit span { padding:0 20px 0 30px; height:70px; }
    #subCont #lnb dd .depthMenu { width:250px; }
    #subCont #lnb dd .depthMenu:after { height:25px; }
    #subCont #lnb dd .depthMenu .sub-box { top:70px; }
}
@media screen and (max-width:1024px){
    #subCont #lnb { margin-top:-50px; }
    #subCont #lnb dt { width:50px; height:50px; }
    #subCont #lnb dd { width:calc(100% - 50px)}
    #subCont #lnb dd .depthMenu p.tit span { padding:0 20px 0 30px; height:50px; font-size:15px; }
    #subCont #lnb dd .depthMenu { width:220px; }
    #subCont #lnb dd .depthMenu:after { height:20px; }
    #subCont #lnb dd .depthMenu .sub-box { top:50px; }
}
@media screen and (max-width:860px){
   #subCont #lnb dl { background:none }
   #subCont #lnb dd { flex-wrap:wrap; background:#fff; } 
   #subCont #lnb dd .depthMenu { width:50%; }
   #subCont #lnb dd .depthMenu:nth-child(2):after,
   #subCont #lnb dd .depthMenu:nth-child(3):after { display:none; }
   #subCont #lnb dd .depthMenu:nth-child(3) { width:100%; border:1px solid #e6e6e6; border-width:1px 0 0 1px;  }
   #subCont #lnb dd .depthMenu p.tit span { padding:0 10px 0 15px; }
   #subCont #lnb dd .depthMenu .sub-box { padding:0 15px; }
   #subCont #lnb dd .depthMenu p.tit:after { right:10px; }
}



#contents { padding-top:110px; background:#f5f5f5; }
#contents .subTitle { text-align:center; }
#contents .subTitle * { word-break:keep-all; }
#contents .subTitle.left {  text-align:left; }
#contents .subTitle h3 { color:var(--mainColor); font-size:40px; font-weight:300; line-height:130%; }
#contents .subTitle h3 .tit { font-family:var(--mainFont); }
#contents .subTitle h3 strong { font-weight:700; }
#contents .subTitle span.txt { color:#222; }
#contents .subTitle .txtbox { color:#444; font-size:20px; font-weight:400; line-height:1.5; letter-spacing:-0.02em }
#contents .subTitle .txtbox strong { font-weight:600; }
@media screen and (max-width:1400px){
    #contents .subTitle h3 { font-size:34px; }
}
@media screen and (max-width:1024px){
    #contents { padding-top:80px; }
    #contents .subTitle h3 { font-size:30px; }
    #contents .subTitle .txtbox { font-size:18px; }
}
@media screen and (max-width:640px){
    #contents { padding-top:50px; }
    #contents .subTitle h3 { font-size:20px; }
    #contents .subTitle .txtbox { font-size:16px; }
}

/* animation */
#contents .subTitle { overflow:hidden }
#contents .subTitle h3,
#contents .subTitle .txtbox { opacity:0; }
#contents .subOn .subTitle h3 { animation:ani_3 0.8s 0.2s; animation-fill-mode:both; }
#contents .subOn .subTitle .txtbox { animation:ani_3 0.8s 0.5s; animation-fill-mode:both; }

/** server **/
.server-box .explain-box .listbox { margin-top:50px; }
.server-box .explain-box .listbox,
.server-box .explain-box .listbox .s-box { display:flex; gap:20px; flex-wrap:wrap;}
.server-box .explain-box .listbox .s1 { width:calc(63% - 10px); height:273px; }
.server-box .explain-box .listbox .s2 { width:calc(37% - 10px); height:273px; }
.server-box .explain-box .listbox .s3 { width:calc(39% - 10px); height:705px; }
.server-box .explain-box .listbox .s4,
.server-box .explain-box .listbox .s5 { width:100%; height:273px; }
.server-box .explain-box .listbox .s4 { height:411px; }
.server-box .explain-box .listbox .s-box { width:calc(61% - 10px); }
.server-box .explain-box .listbox .box { position:relative; border-radius:30px; background:#fff; height:100%; transition:all 0.4s; }
.server-box .explain-box .listbox .box dl { padding:55px 0 0 60px; }
.server-box .explain-box .listbox .s1 .box dl,
.server-box .explain-box .listbox .s5 .box dl{ display:flex; }
.server-box .explain-box .listbox .box dt .num { font-family:var(--mainFont); font-size:18px; color:var(--mainColor); font-weight:600; display:block; }
.server-box .explain-box .listbox .box dt strong { margin-top:6px; display:block; font-family:var(--subFont1); font-size:36px; font-weight:700; color:#222; }
.server-box .explain-box .listbox .box dd { padding:30px 0 0 0; line-height:1.3 }
.server-box .explain-box .listbox .s1 .box dd,
.server-box .explain-box .listbox .s5 .box dd { padding:17px 0 0 60px; }
.server-box .explain-box .listbox .box dd .stxt { font-size:18px; font-weight:400; color:#444; line-height:1.6; }
.server-box .explain-box .listbox .box dd .link { margin-top:20px; font-size:17px; font-weight:400; }
.server-box .explain-box .listbox .box dd .link a { position:relative; color:var(--mainColor);  font-family:var(--subFont1); }
.server-box .explain-box .listbox .box dd .link a:before { content:""; display:block; position:absolute; bottom:-3px; left:0;  width:0; height:1px; background:var(--mainColor); transition:all 0.3s ease; }
.server-box .explain-box .listbox .box .imgbox { position:absolute; top:50%; right:60px; transform:translateY(-50%); }
.server-box .explain-box .listbox .s3 .box .imgbox { position:absolute; top:unset; bottom:52px; right:60px; transform:translateY(0); }
.server-box .explain-box .listbox .box:hover { box-shadow: 0px 0px 25px 0px rgba(13, 95, 255, 0.30); }
.server-box .explain-box .listbox .box .link a:hover:before { width:100%; }
.server-box .explain-box.additional-box,
.server-box .explain-box.security-box,
.server-box .explain-box.network-box { margin:-50px 0 0; padding-bottom:105px; }
.server-box .explain-box.additional-box .listbox .s1 { width:100% }
@media screen and (max-width:1540px){
    .server-box .explain-box .listbox .box dl { padding:55px 0 0 40px; }
    .server-box .explain-box .listbox .s1 .box dl,
    .server-box .explain-box .listbox .s5 .box dl{ display:block; }
    .server-box .explain-box .listbox .s1 .box dd,
    .server-box .explain-box .listbox .s5 .box dd { padding:30px 0 0 0; }
    .server-box .explain-box .listbox .s1 { width:calc(55% - 10px); }
    .server-box .explain-box .listbox .s2 { width:calc(45% - 10px); }
    .server-box .explain-box .listbox .s3 { width:calc(32% - 10px); }
    .server-box .explain-box .listbox .s-box { width:calc(68% - 10px); }
    .server-box .explain-box .listbox .box .imgbox,
    .server-box .explain-box .listbox .s3 .box .imgbox { right:40px; }
}
@media screen and (max-width:1280px){
    .server-box .explain-box .listbox .box dt .num { font-size:17px; }
    .server-box .explain-box .listbox .box dt strong { margin-top:6px; font-size:32px; }
    .server-box .explain-box .listbox .box dd .stxt { font-size:17px; }
    .server-box .explain-box .listbox .box dd .link { margin-top:15px; font-size:16px; }
    .server-box .explain-box .listbox .box .imgbox { text-align:right; }
    .server-box .explain-box .listbox .box .imgbox img { width:88%; }
}
@media screen and (max-width:1024px){
    .server-box .explain-box .listbox .box { border-radius:15px; }
    .server-box .explain-box .listbox .box dl { padding:35px 0 0 30px; }
    .server-box .explain-box .listbox .box dt .num { font-size:16px; }
    .server-box .explain-box .listbox .box dt strong { margin-top:6px; font-size:28px; }
    .server-box .explain-box .listbox .box dd .stxt { font-size:16px; }
    .server-box .explain-box .listbox .box dd .link { margin-top:15px; font-size:15px; }
    .server-box .explain-box .listbox .box .imgbox img { width:58%; }
    .server-box .explain-box .listbox .s1 { height:250px; }
    .server-box .explain-box .listbox .s2 { height:250px; }
    .server-box .explain-box .listbox .s3 { height:550px; }
    .server-box .explain-box .listbox .s4 { height:280px; }
    .server-box .explain-box .listbox .s5 { height:250px; }
    .server-box .explain-box.additional-box,
    .server-box .explain-box.security-box,
    .server-box .explain-box.network-box { padding-bottom:100px; }
    .server-box .explain-box.additional-box .listbox .box .imgbox img { width:60%; }
}
@media screen and (max-width:860px){
    .server-box .explain-box .listbox,
    .server-box .explain-box .listbox .s-box { gap:10px; width:100%; }
    .server-box .explain-box .listbox .box .imgbox img { width:62px; }
    .server-box .explain-box .listbox .s1,
    .server-box .explain-box .listbox .s2,
    .server-box .explain-box .listbox .s3,
    .server-box .explain-box .listbox .s4,
    .server-box .explain-box .listbox .s5 { height:auto; width:100%; }
    .server-box .explain-box .listbox .box dl { padding:35px 30px 40px; }
    .server-box .explain-box .listbox .s3 .box .imgbox img { width:68px; }
    .server-box .explain-box .listbox .s4 .box .imgbox img { width:100px; }
    .server-box .explain-box .listbox .s5 .box .imgbox img { width:70px; }
    .server-box .explain-box .listbox .box .imgbox,
    .server-box .explain-box .listbox .s3 .box .imgbox { top:unset; right:20px; transform:translateY(0); bottom:20px; }
    .server-box .explain-box.additional-box,
    .server-box .explain-box.security-box,
    .server-box .explain-box.network-box { padding-bottom:80px; }
    .server-box .explain-box.additional-box .listbox .s1 .box .imgbox img { width:95px; }
    .server-box .explain-box.additional-box .listbox .s3 .box .imgbox img { width:80px; }
    .server-box .explain-box.additional-box .listbox .s4 .box .imgbox img { width:85px; }
    .server-box .explain-box.additional-box .listbox .s5 .box .imgbox img { width:80px; }
    .server-box .explain-box.security-box .listbox .s1 .box .imgbox img,
    .server-box .explain-box.security-box .listbox .s2 .box .imgbox img,
    .server-box .explain-box.security-box .listbox .s3 .box .imgbox img,
    .server-box .explain-box.security-box .listbox .s4 .box .imgbox img,
    .server-box .explain-box.security-box .listbox .s5 .box .imgbox img { width:65px; }
}
@media screen and (max-width:640px){
    .server-box .explain-box .listbox .box dl { padding:30px 20px 40px; }
    .server-box .explain-box .listbox .box dt .num { font-size:15px; }
    .server-box .explain-box .listbox .box dt strong { margin-top:5px; font-size:22px; }
    .server-box .explain-box .listbox .box dd .stxt { font-size:15px; }
    .server-box .explain-box .listbox .box dd .link { margin-top:12px; font-size:14px; }
}
/* animation */
.server-box .explain-box .listbox .s1,
.server-box .explain-box .listbox .s2,
.server-box .explain-box .listbox .s3,
.server-box .explain-box .listbox .s4,
.server-box .explain-box .listbox .s5,
.server-box .explain-box .listbox .s6 { opacity:0; }
.server-box .explain-box .listbox.subOn .s1 { animation:ani_4 0.8s 0.2s; animation-fill-mode:both; }
.server-box .explain-box .listbox.subOn .s2 { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }
.server-box .explain-box .listbox.subOn .s3 { animation:ani_4 0.8s 0.6s; animation-fill-mode:both; }
.server-box .explain-box .listbox.subOn .s4 { animation:ani_4 0.8s 0.8s; animation-fill-mode:both; }
.server-box .explain-box .listbox.subOn .s5 { animation:ani_4 0.8s 1.0s; animation-fill-mode:both; }
.server-box .explain-box .listbox.subOn .s6 { animation:ani_4 0.8s 1.2s; animation-fill-mode:both; }

.server-box .location-box { background:#fff; padding:165px 0; margin-top:105px; overflow:hidden; }
.server-box .location-box .inner { position:relative; }
.server-box .location-box .location-map { position:relative; display:flex; justify-content:space-between; }
.server-box .location-box .subTitle { }
.server-box .location-box .subTitle .txtbox { margin-top:30px; }
.server-box .location-box .map-box { max-width:1100px; width:100%; }
.server-box .location-box .map-box svg { width:100%; height:auto; }
.server-box .location-box .map-box .land { cursor:pointer; }
.server-box .location-box .map-box .land.on .pin { fill:#0569ff !important; }
.server-box .location-box .map-box .land .s-box,
.server-box .location-box .map-box .land .circle-box{ display:none }
.server-box .location-box .map-box .land.on .s-box,
.server-box .location-box .map-box .land.on .circle-box { display:block }
.server-box .location-box .map-box .land .regionTxt { color:#fff; font-size:22px; font-weight:500; letter-spacing:-0.02em; fill:#fff }
.server-box .location-box .map-box .land .circle_b1 { opacity:1; fill:rgba(234,246,255,0.1); }
.server-box .location-box .map-box .land .circle_b2 { opacity:1; fill:rgba(212,236,255,0.1); }
.server-box .location-box .infoCont { position:absolute; top:270px; left:0; }
.server-box .location-box .location-info { margin-top:0; display:none }
.server-box .location-box .location-info.info_1 { display:block }
.server-box .location-box .location-info .tit { position:relative; padding:55px 0 25px; font-size:28px; font-weight:700; color:#222; letter-spacing:-0.02em; background:url(../img/server/location_pin.png) no-repeat left top; }
.server-box .location-box .location-info .tit:after { content:""; display:block; position:absolute; bottom:0; left:0; width:25px; height:1px; background:var(--subColor)}
.server-box .location-box .location-info .listbox { margin-top:20px; max-width:620px; display:flex; flex-wrap:wrap; gap:25px 0; }
.server-box .location-box .location-info .listbox dl { width:100%; }
.server-box .location-box .location-info.info_1 .listbox dl { width:50%; }
.server-box .location-box .location-info .listbox dt { font-size:18px; color:var(--mainColor); font-weight:700; text-transform:uppercase; }
.server-box .location-box .location-info .listbox dd { padding-top:10px; }
.server-box .location-box .location-info .listbox dd li { line-height:1.65; color:#444; font-size:16px; font-weight:400; }
.server-box .location-box .location-info .listbox dd li strong { font-weight:700; }
.server-box .location-box .btn_tab { display:none }
@media screen and (max-width:1540px){
    .server-box .location-box .location-map { display:flex; flex-wrap:wrap; }
    .server-box .location-box .subTitle.left  { text-align:center !important; width:100%; }
    .server-box .location-box .subTitle .txtbox br { display:none }
    .server-box .location-box .map-box { margin:0 auto; margin-top:50px; }
    .server-box .location-box .infoCont { position:relative; top:unset; left:unset; margin-top:-50px; text-align:center }
    .server-box .location-box .location-info .tit { background-position:center top; }
    .server-box .location-box .location-info .tit:after { left:50%; transform:translateX(-50%); }
    .server-box .location-box .location-info .listbox { margin:0 auto; margin-top:20px; }
}
@media screen and (max-width:1024px){
    .server-box .location-box { padding:100px 0; margin-top:90px; }
    .server-box .location-box .subTitle .txtbox { margin-top:20px; }
    .server-box .location-box .map-box { margin-top:40px; }
    .server-box .location-box .location-info .tit { padding:40px 0 15px; font-size:24px; background-size:20px auto; }
    .server-box .location-box .location-info .listbox dt { font-size:16px; }
    .server-box .location-box .location-info .listbox dd { padding-top:5px; }
    .server-box .location-box .location-info .listbox dd li { font-size:15px; }
}
@media screen and (max-width:760px){
    .server-box .location-box .btn_tab { margin-top:20px; display:block; text-align:center; width:100%; }
    .server-box .location-box .btn_tab ul { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 5px; max-width:230px; margin:0 auto }
    .server-box .location-box .btn_tab ul li { width:68px; }
    .server-box .location-box .btn_tab ul li a {  display:flex; justify-content:center; align-items:center; width:100%; height:31px; color:var(--mainColor); font-size:16px; font-weight:500; letter-spacing:-0.02em; border:1px solid var(--mainColor); border-radius:30px; }
    .server-box .location-box .btn_tab ul li.on a { color:#fff; background:var(--mainColor); }
    .server-box .location-box .map-box .land.on .s-box { display:none }
    .server-box .location-box .map-box .land .pin-box { transform:scale(0) }
    .server-box .location-box .map-box .land.on .pin-box { transform:scale(3) translate(-8px,-24px); }
}
@media screen and (max-width:640px){
    .server-box .location-box { padding:80px 0; margin-top:60px; }
    .server-box .location-box .map-box { margin-top:30px; }
    .server-box .location-box .subTitle .txtbox { margin-top:10px; }
    .server-box .location-box .location-info.info_1 .listbox dl { width:100%; }
    .server-box .location-box .location-info .tit { padding:34px 0 10px; font-size:20px; background-size:18px auto; }
    .server-box .location-box .location-info .listbox { gap:20px 0; }
}

/* animation */
.server-box .location-box .map-box,
.server-box .location-box .location-info { opacity:0; }
.server-box .location-box.subOn .map-box { animation:ani_2 0.8s 0.4s; animation-fill-mode:both; }
.server-box .location-box.subOn .location-info { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }

.server-box .infrastructure-box { position:relative; padding:140px 0; overflow:hidden; }
.server-box .infrastructure-box:before { content:''; display:block; position:absolute; top:0; right:0; width:413px; height:287px; background:url(../img/common/circle_bg1.png) no-repeat left bottom; }
.server-box .infrastructure-box:after { content:''; display:block; position:absolute; bottom:0; left:0; width:543px; height:430px; background:url(../img/common/circle_bg2.png) no-repeat right top; }
.server-box .infrastructure-box .subTitle { position:relative; z-index:3; }
.server-box .infrastructure-box .listbox { margin-top:50px; position:relative; z-index:3; }
.server-box .infrastructure-box .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.server-box .infrastructure-box .listbox li { width:calc((100% - 40px) / 3); height:165px; background:#fff; border-radius:15px; padding-left:40px; display:flex; align-items:center;}
.server-box .infrastructure-box .listbox li .icon { width:98px; height:98px; display:flex; align-items:center; justify-content:center; background:#f9f9f9; border-radius:90px; }
.server-box .infrastructure-box .listbox li .txtbox { width:calc(100% - 98px); padding-left:30px; color:#222; font-size:20px; font-weight:400; text-transform:uppercase; letter-spacing:-0.03em; line-height:1.5; word-break:keep-all; }
.server-box .infrastructure-box .listbox li .txtbox strong { font-weight:600; }
@media screen and (max-width:1280px){
    .server-box .infrastructure-box .listbox li { padding-left:30px; }
    .server-box .infrastructure-box .listbox li .txtbox { padding-left:20px; }
}
@media screen and (max-width:1024px){
    .server-box .infrastructure-box:before { width:230px; height:161px; background-size:360px auto; }
    .server-box .infrastructure-box:after { bottom:-25%; left:-10%; width:350px; height:338px; background-size:550px auto; }
    .server-box .infrastructure-box .subTitle { position:relative; z-index:3; }
    .server-box .infrastructure-box { padding:100px 0; }
    .server-box .infrastructure-box .listbox { margin-top:40px; }
    .server-box .infrastructure-box .listbox ul { gap:20px; }
    .server-box .infrastructure-box .listbox li { width:calc((100% - 40px) / 3); padding-left:25px; height:145px; border-radius:8px; }
    .server-box .infrastructure-box .listbox li .icon { width:90px; height:90px; }
    .server-box .infrastructure-box .listbox li .txtbox { width:calc(100% - 90px); padding-left:15px; font-size:18px; }
}
@media screen and (max-width:960px){
    .server-box .infrastructure-box .listbox li { width:calc((100% - 20px) / 2); }
}
@media screen and (max-width:640px){
    .server-box .infrastructure-box:before { width:160px; height:112px; background-size:260px auto; }
    .server-box .infrastructure-box:after { bottom:-20%; left:-22%; width:260px; height:251px; background-size:320px auto; }
    .server-box .infrastructure-box { padding:80px 0; }
    .server-box .infrastructure-box .listbox { margin-top:30px; }
    .server-box .infrastructure-box .listbox ul { gap:10px; }
    .server-box .infrastructure-box .listbox li { width:100%; padding:0 10px; height:130px; }
    .server-box .infrastructure-box .listbox li .icon { width:60px; height:60px; }
    .server-box .infrastructure-box .listbox li .icon img { width:30px; }
    .server-box .infrastructure-box .listbox li .txtbox { width:calc(100% - 60px); padding-left:10px; font-size:16px; }
    .server-box .infrastructure-box .listbox li .txtbox br { display:none; }
}

/* animation */
.server-box .infrastructure-box .listbox li { opacity:0; }
.server-box .infrastructure-box.subOn .listbox li:nth-child(1) { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }
.server-box .infrastructure-box.subOn .listbox li:nth-child(2) { animation:ani_4 0.8s 0.6s; animation-fill-mode:both; }
.server-box .infrastructure-box.subOn .listbox li:nth-child(3) { animation:ani_4 0.8s 0.8s; animation-fill-mode:both; }
.server-box .infrastructure-box.subOn .listbox li:nth-child(4) { animation:ani_4 0.8s 1.0s; animation-fill-mode:both; }
.server-box .infrastructure-box.subOn .listbox li:nth-child(5) { animation:ani_4 0.8s 1.2s; animation-fill-mode:both; }
.server-box .infrastructure-box.subOn .listbox li:nth-child(6) { animation:ani_4 0.8s 1.4s; animation-fill-mode:both; }


.server-box .stit { position:relative; margin:0 0 35px 30px; font-size:30px; font-weight:700; line-height:1.3; color:#222; padding-left:23px;}
.server-box .stit strong { font-weight:700; }
.server-box .stit:before { content:''; display:block; position:absolute; top:15px; left:0; width:8px; height:8px; border-radius:8px; background:var(--mainColor); }
@media screen and (max-width:1024px){
    .server-box .stit { margin:0 0 25px 20px; font-size:22px; padding-left:18px;}
    .server-box .stit:before { top:12px; width:6px; height:6px; }
}
@media screen and (max-width:640px){
    .server-box .stit { margin:0 0 15px 10px; font-size:18px; padding-left:14px;}
    .server-box .stit:before { top:9px; width:4px; height:4px; }
}
.product-list { }
.product-list .subTitle .txtbox { margin-top:25px; }
.product-list .listbox { margin-top:85px; }
.product-list .listbox > ul { display:flex; gap:30px; flex-wrap:wrap; justify-content:center; }
.product-list .listbox > ul > li { width:calc((100% - 60px) / 3); padding:70px 30px 40px 30px; height:auto; border-radius:30px; background:#fff; transition:all 0.4s; }
.product-list .listbox > ul > li:hover { box-shadow: 0px 0px 25px 0px rgba(13, 95, 255, 0.30); }
.product-list .listbox > ul > li h4.title { text-align:center; font-size:40px; font-weight:700; line-height:1.3; color:#222; }
.product-list .listbox > ul > li .imgbox { text-align:center; margin-top:50px; min-height:85px; }
.product-list .listbox > ul > li .imgbox img { max-width:100%; }
.product-list .listbox > ul > li .list { margin:0 auto; margin-top:15px; width:100%; max-width:290px; }
.product-list .listbox > ul > li .list li:not(:last-child) { margin-bottom:5px; }
.product-list .listbox > ul > li .list li { position:relative; padding-left:70px; font-size:16px; font-weight:300; line-height:1.7; color:#222; }
.product-list .listbox > ul > li .list li strong { width:70px; position:absolute; left:0; top:0; font-weight:600; color:#222; }
.product-list .listbox > ul > li .rental { text-align:center; margin-top:25px; font-size:24px; font-weight:600; line-height:1.3; color:var(--mainColor); }
.product-list .listbox > ul > li .btn { position:relative; margin:0 auto; margin-top:25px; width:190px; height:50px; overflow:hidden; border:1px solid var(--mainColor); border-radius:50px; }
.product-list .listbox > ul > li .btn a { transition:all 0.3s; position:relative; z-index:1; font-size:16px; color:#222; font-weight:600; letter-spacing:-0.02em; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.product-list .listbox > ul > li .btn a span { transition:all 0.3s; display:inline-block; padding:4px 22px 4px 0; font-weight:500; font-size:16px; color:var(--mainColor); background:url(../img/common/btn_arr1.png) right center no-repeat; }
.product-list .listbox > ul > li .btn a:hover { background:var(--mainColor); }
.product-list .listbox > ul > li .btn a:hover span { filter:brightness(0) invert(1);}
.hosting-box .product-list,
.security-ssl .product-list,
.security-weak .product-list,
.security-WAF .product-list { padding-bottom:110px; }
.product-list.type-A .listbox > ul > li { height:auto; }
.product-list.type-A .listbox > ul > li .imgbox { position:relative; margin-top:40px; }
.product-list.type-A .listbox > ul > li .imgbox:before { content:''; display:block; position:absolute; bottom:5px; left:0; width:100%; height:65px; background:#f5f5f5; border-radius:70px; }
.product-list.type-A .listbox > ul > li .imgbox img { position:relative; z-index:2; }
.product-list.type-A .listbox > ul > li .list { margin:0 auto; margin-top:30px; max-width:350px; }
.product-list.type-A .listbox > ul > li .list li { min-height:45px; display:flex; align-items:center; padding:10px 10px 10px 120px ; }
.product-list.type-A .listbox > ul > li .list li strong { top:50%; transform:translateY(-50%); left:40px; }
.product-list.type-A .listbox > ul > li .list li:nth-child(2n) { background:#f5f5f5; }
.product-list.type-A .listbox > ul > li .list li:not(:last-child) { margin-bottom:0; }
@media screen and (max-width:1280px){
    .product-list .listbox > ul { gap:20px; }
    .product-list .listbox > ul > li { width:calc((100% - 40px) / 3); padding:40px 30px 40px 30px; height:auto; }
}
@media screen and (max-width:1024px){
    .hosting-box .product-list,
    .security-ssl .product-list,
    .security-weak .product-list,
    .security-WAF .product-list { padding-bottom:80px; }
    .product-list .listbox > ul { gap:20px; }
    .product-list .listbox > ul > li { width:calc((100% - 20px) / 2); padding:30px 30px 30px 30px; border-radius:15px; }
    .product-list .listbox > ul > li h4.title { font-size:28px; }
    .product-list .listbox > ul > li .imgbox { margin-top:35px; }
    .product-list .listbox > ul > li .list { margin-top:10px; } 
    .product-list .listbox > ul > li .list li { padding-left:60px; font-size:15px; }
    .product-list .listbox > ul > li .list li strong { width:60px; }
    .product-list .listbox > ul > li .rental { font-size:20px; }
    .product-list .listbox > ul > li .btn { width:180px; height:45px; }
    .product-list .listbox > ul > li .btn a { font-size:15px; }
    .product-list.type-A .listbox > ul > li .imgbox { margin-top:30px; }
    .product-list.type-A .listbox > ul > li .imgbox:before { height:60px; }
    .product-list.type-A .listbox > ul > li .list li { padding:10px 10px 10px 100px ; }
    .product-list.type-A .listbox > ul > li .list li strong { left:30px; }
}
@media screen and (max-width:640px){
    .hosting-box .product-list,
    .security-ssl .product-list,
    .security-weak .product-list,
    .security-WAF .product-list { padding-bottom:60px; }
    .product-list .listbox > ul { gap:10px; }
    .product-list .listbox > ul > li { width:100%; padding:30px 20px; }
    .product-list .listbox > ul > li h4.title { font-size:24px; }
    .product-list .listbox > ul > li .imgbox { min-height:auto; }
    .product-list .listbox > ul > li .list { margin-top:30px; } 
    .product-list .listbox > ul > li .rental { font-size:18px; }
    .product-list.type-A .listbox > ul > li .imgbox:before { height:55px; }
}
@media screen and (max-width:500px){
    .product-list .listbox > ul > li .list {max-width:320px; }
}

/* animation */
.product-list .listbox { opacity:0; }
.product-list.subOn .listbox { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }

.host-service { padding:140px 0; background:#fff; }
.host-service .listbox { margin-top:50px; }
.host-service .listbox > ul { display:flex; gap:20px; flex-wrap:wrap; } 
.host-service .listbox > ul > li { width:calc((100% - 40px) / 3); padding:50px 10px 20px 50px; height:342px; border-radius:15px; background:#f9f9f9; }
.host-service .listbox.box1 > ul > li { padding:35px 10px 20px 50px; }
.host-service .listbox > ul > li .icon { width:102px; height:102px; background:#fff; border-radius:100px; display:flex; align-items:center; justify-content:center; }
.host-service .listbox > ul > li dt { word-break:keep-all; margin-top:20px; position:relative; font-size:24px; font-weight:700; line-height:1.3; color:#222; letter-spacing:-0.02em; padding-bottom:20px; }
.host-service .listbox > ul > li dt:before { content:''; display:block; position:absolute; bottom:0; left:0; width:18px; height:1px; background:#000; }
.host-service .listbox > ul > li dd { word-break:keep-all; margin-top:15px; font-size:18px; font-weight:400; line-height:1.5; color:#444; letter-spacing:-0.02em; }
@media screen and (max-width:1500px){
    .host-service .listbox > ul > li dd br { display:none; }
    .host-service .listbox > ul > li { height:auto; }
}
@media screen and (max-width:1024px){
    .host-service { padding:100px 0; }
    .host-service .listbox { margin-top:40px; }
    .host-service .listbox > ul > li { width:calc((100% - 40px) / 3); padding:30px 10px 30px 30px;border-radius:8px; }
    .host-service .listbox.box1 > ul > li { padding:30px 10px 30px 30px; }
    .host-service .listbox > ul > li .icon { width:95px; height:95px; }
    .host-service .listbox > ul > li dt { margin-top:20px; font-size:20px; padding-bottom:15px; }
    .host-service .listbox > ul > li dt:before { width:12px; }
    .host-service .listbox > ul > li dd { margin-top:10px; font-size:16px; }
}
@media screen and (max-width:860px){
    .host-service .listbox > ul > li { width:calc((100% - 20px) / 2); }
}
@media screen and (max-width:640px){
    .host-service { padding:80px 0; }
    .host-service .listbox { margin-top:30px; }
    .host-service .listbox > ul { gap:10px; }
    .host-service .listbox > ul > li { width:calc((100% - 10px) / 2); text-align:center; padding:20px 10px 30px; }
    .host-service .listbox.box1 > ul > li { padding:20px 10px 30px; }
    .host-service .listbox > ul > li .icon { margin:0 auto; width:85px; height:85px; }
    .host-service .listbox > ul > li .icon img { width:40px; }
    .host-service .listbox > ul > li dt { margin-top:15px; font-size:18px; padding-bottom:10px; }
    .host-service .listbox > ul > li dt:before { width:10px; left:50%; transform:translateX(-50%); }
    .host-service .listbox > ul > li dd { margin-top:10px; font-size:15px; }
}

/* animation */
.host-service .listbox > ul > li { opacity:0; }
.host-service.subOn .listbox > ul > li:nth-child(1) { animation:ani_4 0.8s 0.2s; animation-fill-mode:both; }
.host-service.subOn .listbox > ul > li:nth-child(2) { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }
.host-service.subOn .listbox > ul > li:nth-child(3) { animation:ani_4 0.8s 0.6s; animation-fill-mode:both; }
.host-service.subOn .listbox > ul > li:nth-child(4) { animation:ani_4 0.8s 0.8s; animation-fill-mode:both; }
.host-service.subOn .listbox > ul > li:nth-child(5) { animation:ani_4 0.8s 1.0s; animation-fill-mode:both; }
.host-service.subOn .listbox > ul > li:nth-child(6) { animation:ani_4 0.8s 1.2s; animation-fill-mode:both; }
.host-service.subOn .listbox > ul > li:nth-child(7) { animation:ani_4 0.8s 1.4s; animation-fill-mode:both; }
.host-service.subOn .listbox > ul > li:nth-child(8) { animation:ani_4 0.8s 1.6s; animation-fill-mode:both; }
.host-service.subOn .listbox > ul > li:nth-child(9) { animation:ani_4 0.8s 1.8s; animation-fill-mode:both; }

.additional-service { position:relative; padding:140px 0; overflow:hidden; }
.additional-service:before { content:''; display:block; position:absolute; top:0; right:0; width:413px; height:287px; background:url(../img/common/circle_bg1.png) no-repeat left bottom; }
.additional-service:after { content:''; display:block; position:absolute; bottom:0; left:0; width:543px; height:430px; background:url(../img/common/circle_bg2.png) no-repeat right top; }
.additional-service .listbox { position:relative; z-index:2; margin-top:50px; }
.additional-service .listbox ul { display:flex; gap:20px; flex-wrap:wrap; } 
.additional-service .listbox ul li { width:calc((100% - 60px) / 4); padding:45px 10px 20px 10px; height:430px; border-radius:10px; background:#fff; text-align:center; border:1px solid #ddd;}
.additional-service .listbox ul li .icon { margin:0 auto; width:210px; height:210px; background:#f9f9f9; border-radius:200px; display:flex; align-items:center; justify-content:center; }
.additional-service .listbox ul li dt { word-break:keep-all; margin-top:20px; font-size:26px; font-weight:700; line-height:1.3; color:#222; letter-spacing:-0.02em; }
.additional-service .listbox ul li dd { word-break:keep-all; margin-top:15px; font-size:16px; font-weight:400; line-height:1.6; color:#444; letter-spacing:-0.02em; }
.additional-service .listbox .boxCont { display:flex; gap:20px; flex-wrap:wrap; }
.additional-service .listbox .boxCont .box { width:calc((100% - 20px) / 2);  }
.additional-service .listbox .boxCont .box ul li { width:calc((100% - 20px) / 2); }
.additional-service .txt_b { margin-top:25px; }
.additional-service .txt_b > div { position:relative; width:100%; text-align:center; }
.additional-service .txt_b .txt strong { position:relative; z-index:2; font-size:20px; line-height:1.3; font-weight:600; letter-spacing:-0.01em; color:#fff; display:inline-block; padding:0 27px; background:var(--mainColor); border-radius:50px; }
.additional-service .txt_b .txt strong span { display:flex; align-items:center;height:53px; width:100%; font-weight:600; }
.additional-service .txt_b .txt:before { content:''; display:block; position:absolute; top:50%; left:0; transform:translateY(-50%); width:50%; height:8px; background:url(../img/server/line_arr1.png) no-repeat left center; }
.additional-service .txt_b .txt:after { content:''; display:block; position:absolute; top:50%; right:0; transform:translateY(-50%); width:50%; height:8px; background:url(../img/server/line_arr1.png) no-repeat right center; }
@media screen and (max-width:1280px){
    .additional-service .listbox ul li { height:auto; }
    .additional-service .listbox ul li .icon { width:180px; height:180px; }
    .additional-service .listbox ul li .icon img { width:70px; }
    .additional-service .listbox ul li dt { margin-top:20px; font-size:24px; }
    .additional-service .listbox ul li dd br { display:none; }
}
@media screen and (max-width:1024px){
    .additional-service { padding:100px 0; }
    .additional-service:before { width:230px; height:161px; background-size:360px auto; }
    .additional-service:after { bottom:-25%; left:-10%; width:350px; height:338px; background-size:550px auto; }
    .additional-service .listbox { margin-top:40px; }
    .additional-service .listbox ul li { padding:30px 10px 30px 10px; }
    .additional-service .listbox ul li .icon { width:150px; height:150px; }
    .additional-service .listbox ul li .icon img { width:60px; }
    .additional-service .listbox ul li dt { margin-top:20px; font-size:20px; }
    .additional-service .listbox ul li dd { margin-top:15px; font-size:15px; }
    .additional-service .txt_b { margin-top:20px; }
    .additional-service .txt_b .txt strong { font-size:18px; }
    .additional-service .txt_b .txt strong span { height:45px; }
}
@media screen and (max-width:960px){
    .additional-service .listbox ul li { width:calc((100% - 20px) / 2); }
    .additional-service .listbox .boxCont { gap:40px 0; }
    .additional-service .listbox .boxCont .box { width:100%; }
    .additional-service .listbox .boxCont .box ul li { width:calc((100% - 20px) / 2); }
}
@media screen and (max-width:640px){
    .additional-service { padding:80px 0; }
    .additional-service:before { width:160px; height:112px; background-size:260px auto; }
    .additional-service:after { bottom:-20%; left:-22%; width:260px; height:251px; background-size:320px auto; }
    .additional-service .listbox { margin-top:30px; }
    .additional-service .listbox ul { gap:10px; }
    .additional-service .listbox ul li { width:calc((100% - 10px) / 2); padding:20px 10px 30px; }
    .additional-service .listbox ul li .icon { width:120px; height:120px; }
    .additional-service .listbox ul li .icon img { width:50px; }
    .additional-service .listbox ul li dt { font-size:18px; }
    .additional-service .listbox ul li dd { margin-top:10px; }
    .additional-service .listbox .boxCont { gap:30px 0; }
    .additional-service .listbox .boxCont .box ul li { width:calc((100% - 10px) / 2); }
    .additional-service .listbox .boxCont { gap:30px 10px; }
    .additional-service .txt_b { margin-top:15px; }
    .additional-service .txt_b .txt strong { font-size:16px; padding:0 20px; }
    .additional-service .txt_b .txt strong span { height:40px; }
}

/* animation */
.additional-service .listbox ul li,
.additional-service .txt_b .txt { opacity:0; }
.additional-service.subOn .listbox ul li:nth-child(1) { animation:ani_4 0.8s 0.2s; animation-fill-mode:both; }
.additional-service.subOn .listbox ul li:nth-child(2) { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }
.additional-service.subOn .listbox ul li:nth-child(3) { animation:ani_4 0.8s 0.6s; animation-fill-mode:both; }
.additional-service.subOn .listbox ul li:nth-child(4) { animation:ani_4 0.8s 0.8s; animation-fill-mode:both; }
.additional-service.subOn .listbox ul li:nth-child(5) { animation:ani_4 0.8s 1.0s; animation-fill-mode:both; }
.additional-service.subOn .listbox ul li:nth-child(6) { animation:ani_4 0.8s 1.2s; animation-fill-mode:both; }
.additional-service.subOn .listbox ul li:nth-child(7) { animation:ani_4 0.8s 1.4s; animation-fill-mode:both; }
.additional-service.subOn .listbox ul li:nth-child(8) { animation:ani_4 0.8s 1.6s; animation-fill-mode:both; }
.additional-service.subOn .txt_b .txt { animation:bgs4 0.8s 0.5s; animation-fill-mode:both; }

.faq-list { padding:140px 0 0; background-color:#fff; }
.faq-list.bg { background-color:#f5f5f5; padding:140px 0;}
.faq-list .listbox { margin-top:50px; }
.faq-list .listbox > ul { border-top:2px solid var(--mainColor); }
.faq-list .listbox > ul > li { border:1px solid #f5f5f5; border-width:0 1px 1px; }
.faq-list.bg .listbox > ul > li { border:1px solid #ddd; border-width:0 1px 1px; }
.faq-list .listbox > ul > li.on { border-width:0 0 1px; }
.faq-list .listbox > ul > li > p { word-break:keep-all; position:relative; cursor:pointer; padding:35px 80px 35px 75px; min-height:100px; font-size:22px; color:#222; font-weight:700; line-height:1.4; display:flex; align-items:center; } 
.faq-list .listbox > ul > li > p:before { content:""; display:block; position:absolute; right:40px; top:50%; transform:translateY(-50%); width:14px; height:9px; background:url(../img/common/faq_arr.png) center center no-repeat; }
.faq-list .listbox > ul > li.on > p:before { background:url(../img/common/faq_arr_on.png) center center no-repeat; }
.faq-list .listbox > ul > li > p span.q { position:absolute; left:40px; top:35px; color:var(--mainColor); font-weight:700; font-size:22px; }
.faq-list .listbox > ul > li .contentBox { background-color:#f5f5f5; padding:40px 75px; color:#000; font-size:17px; line-height:1.5; font-weight:400; }
.faq-list.bg .listbox > ul > li .contentBox { background-color:#fff; border-top:1px solid #ddd; }
@media screen and (max-width:1024px){
    .faq-list { padding:100px 0 0; }
    .faq-list.bg { padding:100px 0;}
    .faq-list .listbox { margin-top:40px; }
    .faq-list .listbox > ul > li > p {padding:30px 80px 30px 60px; min-height:80px; font-size:20px; } 
    .faq-list .listbox > ul > li > p:before { right:30px; }
    .faq-list .listbox > ul > li > p span.q { left:30px; top:28px; font-size:20px; }
    .faq-list .listbox > ul > li .contentBox {padding:30px 60px; font-size:16px; }
}
@media screen and (max-width:640px){
    .faq-list { padding:80px 0 0; }
    .faq-list.bg { padding:80px 0;}
    .faq-list .listbox { margin-top:30px; }
    .faq-list .listbox > ul > li > p {padding:20px 60px 20px 40px; min-height:60px; font-size:16px; } 
    .faq-list .listbox > ul > li > p:before { right:15px; }
    .faq-list .listbox > ul > li > p span.q { left:15px; top:19px; font-size:17px; }
    .faq-list .listbox > ul > li .contentBox {padding:20px 40px; font-size:15px; }
}

/* animation */
.faq-list .listbox { opacity:0; }
.faq-list.subOn .listbox{ animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }

.Co-location { padding:140px 0; background:#fff; }
.Co-location .subTitle .txtbox { margin-top:25px; }
.Co-location .boxCont { position:relative; margin-top:60px; }
.Co-location .boxCont:before { content:''; display:block; position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:1px; background:var(--mainColor); }
.Co-location .boxCont .circle-box { position:relative; margin:0 auto; width:521px; height:521px; border:72px solid #f2f6fa; background:#fff; border-radius:521px; display:flex; justify-content:center; align-items:center; }
.Co-location .boxCont .circle-box .circle { position:relative; z-index:5; width:305px; height:305px; border-radius:400px; background:var(--mainColor); display:flex; justify-content:center; align-items:center; text-align:center; }
.Co-location .boxCont .circle-box .circle .txt { font-size:16px; font-weight:400; line-height:1.5; color:#fff; }
.Co-location .boxCont .circle-box .circle .txt strong { font-size:28px; font-weight:600; line-height:1.3; display:block; margin-bottom:13px; }
.Co-location .boxCont .txtbox { position:absolute; top:50%; transform:translateY(-50%); height:305px; width:652px; border:1px solid #0569ff; background:#fff; border-radius:300px; display:flex; align-items:center; }
.Co-location .boxCont .txtbox .circle { position:relative; width:200px; height:200px; background:#f2f6fa; border-radius:200px; display:flex;justify-content:center; align-items:center; text-align:center; }
.Co-location .boxCont .txtbox .circle:before { content:''; display:block; z-index:-1; position:absolute; top:50%; left:-30px; transform:translateY(-50%); width:calc(100% + 60px); height:1px; background:var(--mainColor); }
.Co-location .boxCont .txtbox .circle .txt { font-size:18px; font-weight:600; line-height:1.3; color:#222; }
.Co-location .boxCont .txtbox .box { display:flex; align-items:center; padding-left:82px; }
.Co-location .boxCont .txtbox .box ul { position:relative; margin:0 0 0 30px; }
.Co-location .boxCont .txtbox .box ul:before { content:''; display:block; position:absolute; top:50%; left:0; transform:translateY(-50%); width:1px; height:69px; background:var(--mainColor); }
.Co-location .boxCont .txtbox .box li { position:relative; padding-left:45px; color:#222; font-size:18px; font-weight:500; line-height:1.3; letter-spacing:-0.02em; }
.Co-location .boxCont .txtbox .box li:not(:last-child) { margin-bottom:45px; }
.Co-location .boxCont .txtbox .box li:before { content:''; display:block; position:absolute; top:50%; left:0; transform:translateY(-50%); width:30px; height:1px; background:var(--mainColor); }
.Co-location .boxCont .txtbox .box li .stxt { position:absolute; top:50%; right:145px; transform:translateY(-50%); width:260px; color:#444; font-size:16px; font-weight:400; line-height:1.5; letter-spacing:-0.02em; }
.Co-location .boxCont .txtbox .box .txt_b { position:absolute; bottom:-28px; left:50%; transform:translateX(-50%); padding:0 30px; background:#fff; text-align:center; color:#444; font-size:16px; font-weight:400; line-height:1.5; letter-spacing:-0.02em; }
.Co-location .boxCont .txtbox .box .txt_b strong { display:block; color:var(--mainColor); font-size:20px; font-weight:600; }
.Co-location .boxCont .txtbox.txt-1 { right:50%; margin-right:95px; justify-content:flex-end; }
.Co-location .boxCont .txtbox.txt-1 .box { flex-direction:row-reverse; padding-left:0; padding-right:82px; }
.Co-location .boxCont .txtbox.txt-1 .box ul { position:relative; margin:0 30px 0 0; text-align:right; }
.Co-location .boxCont .txtbox.txt-1 .box ul:before { left:unset; right:0; }
.Co-location .boxCont .txtbox.txt-1 .box li { padding-left:0; padding-right:45px; }
.Co-location .boxCont .txtbox.txt-1 .box li:before { left:unset; right:0; }
.Co-location .boxCont .txtbox.txt-2 { left:50%; margin-left:95px; }
@media screen and (max-width:1500px){
    .Co-location .boxCont .circle-box { width:430px; height:430px; border:60px solid #f2f6fa; }
    .Co-location .boxCont .circle-box .circle { width:250px; height:250px; }
    .Co-location .boxCont .circle-box .circle .txt { font-size:16px; }
    .Co-location .boxCont .circle-box .circle .txt strong { font-size:26px;  }
    .Co-location .boxCont .txtbox { height:250px; width:540px;}
    .Co-location .boxCont .txtbox .circle {width:180px; height:180px; }
    .Co-location .boxCont .txtbox .circle:before { left:-20px; width:calc(100% + 40px); }
    .Co-location .boxCont .txtbox .circle .txt { font-size:18px; }
    .Co-location .boxCont .txtbox .box { padding-left:60px; }
    .Co-location .boxCont .txtbox .box ul { margin:0 0 0 20px; }
    .Co-location .boxCont .txtbox .box ul:before { height:59px; }
    .Co-location .boxCont .txtbox .box li { padding-left:35px; font-size:18px; }
    .Co-location .boxCont .txtbox .box li:not(:last-child) { margin-bottom:35px; }
    .Co-location .boxCont .txtbox .box li:before { width:20px; }
    .Co-location .boxCont .txtbox .box li .stxt { right:130px; width:260px; font-size:16px; }
    .Co-location .boxCont .txtbox .box .txt_b { bottom:-28px; padding:0 25px; font-size:16px; }
    .Co-location .boxCont .txtbox .box .txt_b strong { font-size:20px; }
    .Co-location .boxCont .txtbox.txt-1 { margin-right:75px; }
    .Co-location .boxCont .txtbox.txt-1 .box { padding-right:60px; }
    .Co-location .boxCont .txtbox.txt-1 .box ul { margin:0 20px 0 0; }
    .Co-location .boxCont .txtbox.txt-1 .box li { padding-right:35px; }
    .Co-location .boxCont .txtbox.txt-2 { margin-left:75px; }
}
@media screen and (max-width:1280px){
    .Co-location .boxCont .circle-box { width:360px; height:360px; border:50px solid #f2f6fa; }
    .Co-location .boxCont .circle-box .circle { width:190px; height:190px; }
    .Co-location .boxCont .circle-box .circle .txt { font-size:15px; }
    .Co-location .boxCont .circle-box .circle .txt strong { font-size:20px; margin-bottom:8px;}
    .Co-location .boxCont .txtbox { height:190px; width:440px;}
    .Co-location .boxCont .txtbox .circle {width:140px; height:140px; }
    .Co-location .boxCont .txtbox .circle:before { left:-15px; width:calc(100% + 30px); }
    .Co-location .boxCont .txtbox .circle .txt { font-size:16px; }
    .Co-location .boxCont .txtbox .box { padding-left:40px; }
    .Co-location .boxCont .txtbox .box ul { margin:0 0 0 15px; }
    .Co-location .boxCont .txtbox .box ul:before { height:49px; }
    .Co-location .boxCont .txtbox .box li { padding-left:25px; font-size:16px; }
    .Co-location .boxCont .txtbox .box li:not(:last-child) { margin-bottom:28px; }
    .Co-location .boxCont .txtbox .box li:before { width:13px; }
    .Co-location .boxCont .txtbox .box li .stxt { right:110px; width:260px; font-size:15px; }
    .Co-location .boxCont .txtbox .box .txt_b { bottom:-24px; padding:0 20px; font-size:15px; }
    .Co-location .boxCont .txtbox .box .txt_b strong { font-size:18px; }
    .Co-location .boxCont .txtbox.txt-1 { margin-right:60px; }
    .Co-location .boxCont .txtbox.txt-1 .box { padding-right:40px; }
    .Co-location .boxCont .txtbox.txt-1 .box ul { margin:0 15px 0 0; }
    .Co-location .boxCont .txtbox.txt-1 .box li { padding-right:25px; }
    .Co-location .boxCont .txtbox.txt-2 { margin-left:60px; }
}
@media screen and (max-width:1024px){
    .Co-location .boxCont { padding:230px 0; }
    .Co-location .boxCont:before { display:none }
    .Co-location .boxCont .circle-box { width:360px; height:360px; border:50px solid #f2f6fa; }
    .Co-location .boxCont .circle-box .circle { width:210px; height:210px; }
    .Co-location .boxCont .circle-box .circle .txt { font-size:14px; }
    .Co-location .boxCont .circle-box .circle .txt strong { font-size:18px; margin-bottom:8px; }
    .Co-location .boxCont .txtbox { height:380px; width:210px; justify-content:center; align-items:flex-start; }
    .Co-location .boxCont .txtbox .circle {width:140px; height:140px; }
    .Co-location .boxCont .txtbox .circle:before { left:50%; top:-20px; transform:translate(0); width:1px; height:calc(100% + 40px); }
    .Co-location .boxCont .txtbox .circle .txt { font-size:16px; }
    .Co-location .boxCont .txtbox .box { padding-left:0; padding-top:60px; flex-direction:column; }
    .Co-location .boxCont .txtbox .box ul { margin:20px 0 0; display:flex; }
    .Co-location .boxCont .txtbox .box ul:before { height:1px; width:98px; top:0; left:50%; transform:translate(-50%, 0); }
    .Co-location .boxCont .txtbox .box li { padding:25px 0 0; font-size:16px; width:70px; text-align:center }
    .Co-location .boxCont .txtbox .box li:not(:last-child) { margin:0 28px 0 0; }
    .Co-location .boxCont .txtbox .box li:before { width:1px; height:13px; left:50%; top:0; transform:translate(0)}
    .Co-location .boxCont .txtbox .box li .stxt { right:unset; top:unset; bottom:50px; width:260px; font-size:15px; }
    .Co-location .boxCont .txtbox .box .txt_b { bottom:-10px; padding:0 10px; font-size:15px; width:140px; }
    .Co-location .boxCont .txtbox .box .txt_b strong { font-size:18px; }
    .Co-location .boxCont .txtbox.txt-1 { margin:0 0 60px; top:unset; bottom:50%; left:50%; transform:translateX(-50%) !important; flex-direction:column; align-items:center; }
    .Co-location .boxCont .txtbox.txt-1 .box { padding-right:0; padding-bottom:60px; flex-direction:column-reverse;  }
    .Co-location .boxCont .txtbox.txt-1 .box ul { margin:0 0 20px; align-items:flex-end; }
    .Co-location .boxCont .txtbox.txt-1 .box ul:before { top:unset; bottom:0; left:50%; }
    .Co-location .boxCont .txtbox.txt-1 .box li { padding:0 0 25px; }
    .Co-location .boxCont .txtbox.txt-1 .box li:before { top:unset; bottom:0; left:50%; }
    .Co-location .boxCont .txtbox.txt-2 { margin:60px 0 0; transform:translateX(-50%) !important; }
}

/* animation */
.Co-location .boxCont .circle-box .circle,
.Co-location .boxCont .txtbox { opacity:0; }
.Co-location.subOn .boxCont .circle-box  .circle { animation:bgs4 0.8s 0.2s; animation-fill-mode:both; }
.Co-location.subOn .boxCont .txtbox.txt-1 { animation:ani_left1 0.8s 0.5s; animation-fill-mode:both; }
.Co-location.subOn .boxCont .txtbox.txt-2 { animation:ani_right1 0.8s 0.5s; animation-fill-mode:both; }


.provide-box { padding:110px 0; }
.provide-box .data-table { background:#fff; margin-top:50px; }
.provide-box .data-table table { border:1px solid #ddd; }
.provide-box .data-table thead th { height:60px; background:var(--mainColor); font-size:18px; font-weight:600; color:#fff; border:1px solid #ddd; border-width:0 0 1px 1px;  }
.provide-box .data-table thead th:first-child { border-left:none; }
.provide-box .data-table tbody th { padding-left:25px; text-align:left; height:60px; font-size:17px; font-weight:600; color:#222; border:1px solid #ddd; border-width:0 0 1px 0; }
.provide-box .data-table tbody th.th-center { text-align:center; padding-left:10px; padding-right:10px; }
.provide-box.network-switch2 .data-table tbody th.th-center { font-weight:400; }
.provide-box .data-table tbody td { word-break:keep-all; padding:16px 10px; text-align:center; font-size:17px; font-weight:400; color:#444; line-height:1.5; border:1px solid #ddd; border-width:0 0 1px 1px; }
.provide-box .data-table tbody td .stxt { font-size:15px; display:block; }
@media screen and (max-width:1024px){
    .provide-box { padding:100px 0; }
    .provide-box .data-table { margin-top:40px; }
    .provide-box .data-table thead th { height:50px; font-size:16px; }
    .provide-box .data-table tbody th { height:50px; padding:12px 15px; font-size:15px;}
    .provide-box .data-table tbody td { padding:12px 10px; font-size:15px; }
    .provide-box .data-table tbody td .stxt { font-size:14px; }
}
@media screen and (max-width:960px){
    .provide-box .data-table { overflow:auto; }
    .provide-box .data-table table { width:1000px; }
}
@media screen and (max-width:640px){
    .provide-box { padding:80px 0; }
    .provide-box .data-table { margin-top:30px; }
}

/* animation */
.provide-box .data-table { opacity:0; }
.provide-box.subOn .data-table { animation:ani_4 0.8s 0.2s; animation-fill-mode:both; }


.idc-introduce { padding:110px 0; background:#fff; }
.idc-introduce .listbox { position:relative; margin-top:50px; }
.idc-introduce .listbox:before { content:''; display:block; position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:1px; background:var(--mainColor); }
.idc-introduce .listbox .box { position:relative; margin:0 auto; width:1165px; height:415px; border:1px solid var(--mainColor); background:#fff; border-radius:415px; display:flex; justify-content:center; align-items:center; }
.idc-introduce .listbox .box ul { margin:0 auto; width:1025px; display:flex; justify-content:space-between; }
.idc-introduce .listbox .box li .circle { width:305px; height:305px; background:var(--mainColor); border-radius:305px; display:flex; justify-content:center; align-items:center; text-align:center; }
.idc-introduce .listbox .box li .txt { font-size:22px; font-weight:600; color:#fff; line-height:1.6; }
.idc-introduce .listbox .box li:nth-child(2) .circle { background:#f2f6fa; }
.idc-introduce .listbox .box li:nth-child(2) .txt { color:#222; }
@media screen and (max-width:1500px){
    .idc-introduce .listbox .box { width:1000px; height:380px; }
    .idc-introduce .listbox .box ul { width:880px; }
    .idc-introduce .listbox .box li .circle { width:260px; height:260px; }
    .idc-introduce .listbox .box li .txt { font-size:20px; }
}
@media screen and (max-width:1280px){
    .idc-introduce .listbox .box { width:880px; height:320px; }
    .idc-introduce .listbox .box ul { width:740px; }
    .idc-introduce .listbox .box li .circle { width:220px; height:220px; }
    .idc-introduce .listbox .box li .txt { font-size:19px; }
}
@media screen and (max-width:1024px){
    .idc-introduce { padding:100px 0; }
    .idc-introduce .listbox { margin-top:40px; }
    .idc-introduce .listbox .box { width:640px; height:250px; }
    .idc-introduce .listbox .box ul { width:560px; }
    .idc-introduce .listbox .box li .circle { width:180px; height:180px; }
    .idc-introduce .listbox .box li .txt { font-size:17px; }
}
@media screen and (max-width:640px){
    .idc-introduce { padding:80px 0; }
    .idc-introduce .listbox { margin-top:30px; }
    .idc-introduce .listbox .box { width:320px; height:200px; }
    .idc-introduce .listbox .box ul { width:600px; gap:0 10px; }
    .idc-introduce .listbox .box li .circle { width:130px; height:130px; }
    .idc-introduce .listbox .box li .txt { font-size:15px; }
}


/* animation */
.idc-introduce .listbox .box li .circle { opacity:0; }
.idc-introduce.subOn .listbox .box li:nth-child(1) .circle { animation:bgs4 0.8s 0.2s; animation-fill-mode:both; }
.idc-introduce.subOn .listbox .box li:nth-child(2) .circle { animation:bgs4 0.8s 0.5s; animation-fill-mode:both; }
.idc-introduce.subOn .listbox .box li:nth-child(3) .circle { animation:bgs4 0.8s 0.2s; animation-fill-mode:both; }

.data-tableBox { padding:110px 0; }
.data-tableBox table { border:1px solid #ddd; background:#fff; }
.data-tableBox tbody th { padding-left:25px; text-align:left; height:53px; font-size:17px; font-weight:600; color:#fff; border:1px solid #ddd; border-width:0 0 1px 0; background:var(--mainColor); }
.data-tableBox tbody td { word-break:keep-all; padding:15px 30px; text-align:center; font-size:17px; font-weight:400; color:#444; line-height:1.5; border:1px solid #ddd; border-width:0 0 1px 1px; }
.data-tableBox tbody td.td-left { text-align:left; }
@media screen and (max-width:1024px){
    .data-tableBox { padding:100px 0; }
    .data-tableBox table .w1 { width:200px !important; }
    .data-tableBox tbody th { padding-left:20px;  height:50px; font-size:16px; }
    .data-tableBox tbody td { padding:12px 15px; font-size:15px; }
}
@media screen and (max-width:640px){
    .data-tableBox { padding:80px 0; }
    .data-tableBox table .w1 { width:125px !important; }
    .data-tableBox tbody th { padding-left:10px;  }
    .data-tableBox tbody td { padding:12px 10px; }
}
/* animation */
.data-tableBox { opacity:0; }
.data-tableBox.subOn { animation:ani_4 0.8s 0.2s; animation-fill-mode:both; }


.managed-box1 { padding:0 0 110px; }
.managed-box1 .listbox { margin-top:50px }
.managed-box1 .listbox .circle { width:305px; height:305px; border-radius:300px; background:#f2f6fa; display:flex; align-items:center; justify-content:center; text-align:center; }
.managed-box1 .listbox .circle .txt { word-break:keep-all; margin-top:25px; color:#222; font-size:22px; font-weight:400; line-height:1.3; }
.managed-box1 .listbox .circle-top .circle { margin:0 auto; background:var(--mainColor); }
.managed-box1 .listbox .circle-top .circle .txt { margin-top:5px; color:#fff; font-size:28px; font-weight:600; line-height:1.5; }
.managed-box1 .listbox .list { margin-top:40px; position:relative; }
.managed-box1 .listbox .list:after { content:''; display:block; position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:1px; height:40px; background:var(--mainColor); }
.managed-box1 .listbox .list:before { content:''; display:block; position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:1px; background:var(--mainColor); }
.managed-box1 .listbox .list .inner ul { position:relative; z-index:2; height:415px; border-radius:415px; border:1px solid var(--mainColor); background:#fff; display:flex; align-items:center; justify-content:center; gap:50px; padding:0 45px; }
.managed-box1 .listbox .list .inner ul li { position:relative; width:calc((100% - 150px) / 4); }
.managed-box1 .listbox .list .inner ul li:before { content:'+'; display:block; position:absolute; top:50%; left:-45px; transform:translateY(-50%); color:var(--mainColor); font-size:55px; font-weight:100; }
.managed-box1 .listbox .list .inner ul li:first-child:before { display:none; }
.managed-box1 .listbox .list .inner ul li .circle .icon { display:flex; margin:auto; min-height:80px; align-items:center; justify-content:center; }
@media screen and (max-width:1540px){
    .managed-box1 .listbox .circle { width:250px; height:250px; }
    .managed-box1 .listbox .list .inner { max-width:1280px; }
    .managed-box1 .listbox .list .inner ul { height:360px; }
    .managed-box1 .listbox .list .inner ul li { width:calc((100% - 150px) / 4); }
    .managed-box1 .listbox .list .inner ul li:before { left:-48px; }
}
@media screen and (max-width:1280px){
    .managed-box1 .listbox .circle { width:200px; height:200px; }
    .managed-box1 .listbox .circle .txt { margin-top:15px; font-size:18px; }
    .managed-box1 .listbox .circle .icon img { width:68px; }
    .managed-box1 .listbox ul li:nth-child(3) .circle .icon img { width:56px; }
    .managed-box1 .listbox .circle-top .circle .txt { margin-top:5px; font-size:22px; }
    .managed-box1 .listbox .circle-top .circle .icon img { width:58px; }
    .managed-box1 .listbox .list { margin-top:30px;}
    .managed-box1 .listbox .list:after { top:-30px; }
    .managed-box1 .listbox .list .inner { max-width:1024px; }
    .managed-box1 .listbox .list .inner ul { height:300px; gap:40px; padding:0 30px; }
    .managed-box1 .listbox .list .inner ul li { width:calc((100% - 120px) / 4); }
    .managed-box1 .listbox .list .inner ul li:before { left:-35px; font-size:48px; }
    .managed-box1 .listbox .list .inner ul li .circle .icon { min-height:68px; }
}
@media screen and (max-width:1024px){
    .managed-box1 { padding:0 0 100px; }
    .managed-box1 .listbox .list .inner { max-width:640px; }
    .managed-box1 .listbox .list .inner ul { height:auto; flex-wrap:wrap; padding:80px 30px; }
    .managed-box1 .listbox .list .inner ul li { width:calc((100% - 120px) / 2); display:flex; align-items:center; justify-content:center; }
    .managed-box1 .listbox .list .inner ul li:nth-child(3):before { content:'+'; display:block; top:-45px; left:50%; transform:translate(-50%, 0); }
    .managed-box1 .listbox .list .inner ul li:nth-child(4):after { content:'+'; display:block; position:absolute; top:-45px; left:50%; transform:translateX(-50%); color:var(--mainColor); font-size:45px; font-weight:100; }
}
@media screen and (max-width:640px){
    .managed-box1 { padding:0 0 80px; }
    .managed-box1 .listbox .circle { width:140px; height:140px; padding:0 15px; }
    .managed-box1 .listbox .circle .txt { margin-top:5px; font-size:16px; }
    .managed-box1 .listbox .circle .icon img { width:50px; }
    .managed-box1 .listbox ul li:nth-child(3) .circle .icon img { width:48px; }
    .managed-box1 .listbox .circle-top .circle { width:160px; height:160px;}
    .managed-box1 .listbox .circle-top .circle .txt { margin-top:5px; font-size:18px; }
    .managed-box1 .listbox .circle-top .circle .icon img { width:46px; }
    .managed-box1 .listbox .list { margin-top:20px;}
    .managed-box1 .listbox .list:after { top:-20px; }
    .managed-box1 .listbox .list .inner { max-width:460px; padding:0 10px; }
    .managed-box1 .listbox .list .inner ul { padding:80px 0; gap:40px 30px; }
    .managed-box1 .listbox .list .inner ul li { width:calc((100% - 90px) / 2); }
    .managed-box1 .listbox .list .inner ul li:before { left:-28px; font-size:40px; }
    .managed-box1 .listbox .list .inner ul li:nth-child(3):before,
    .managed-box1 .listbox .list .inner ul li:nth-child(4):after { top:-42px; font-size:40px; }
    .managed-box1 .listbox .list .inner ul li .circle .icon { min-height:50px; }
}


/* animation */
.managed-box1 .listbox .circle { opacity:0; }
.managed-box1 .listbox.subOn .circle-top .circle { animation:ani_4 0.8s 0.2s; animation-fill-mode:both; }
.managed-box1 .listbox.subOn .list ul li:nth-child(1) .circle { animation:ani_3 0.8s 0.4s; animation-fill-mode:both; }
.managed-box1 .listbox.subOn .list ul li:nth-child(2) .circle { animation:ani_3 0.8s 0.6s; animation-fill-mode:both; }
.managed-box1 .listbox.subOn .list ul li:nth-child(3) .circle { animation:ani_3 0.8s 0.8s; animation-fill-mode:both; }
.managed-box1 .listbox.subOn .list ul li:nth-child(4) .circle { animation:ani_3 0.8s 1.0s; animation-fill-mode:both; }

.managed-box2 { padding:140px 0; }
.managed-box2.bg { background:#fff; }
.managed-box2 .stit { position:relative; margin:50px 0 -25px 0; font-size:30px; font-weight:700; line-height:1.3; color:#222; padding-left:23px;}
.managed-box2 .stit strong { font-weight:700; }
.managed-box2 .stit:before { content:''; display:block; position:absolute; top:15px; left:0; width:8px; height:8px; border-radius:8px; background:var(--mainColor); }
.managed-box2 .subTitle .txtbox { margin-top:25px; }
.managed-box2 .dataTable { background:#fff; margin-top:50px; }
.managed-box2 .dataTable table { border:1px solid #ddd; }
.managed-box2 .dataTable thead th { height:52px; background:var(--mainColor); font-size:18px; font-weight:600; color:#fff; border:1px solid #ddd; border-width:0 0 1px 1px;  }
.managed-box2.bg .dataTable thead th { height:60px; }
.managed-box2 .dataTable thead th:first-child { border-left:none; }
.managed-box2 .dataTable tbody th { padding-left:25px; text-align:left; height:52px; font-size:17px; font-weight:600; color:#222; border:1px solid #ddd; border-width:0 0 1px 0; }
.managed-box2 .dataTable tbody th.th-center,
.managed-box2 .dataTable tbody th.td-center { padding:0 10px; text-align:center }
.managed-box2 .dataTable tbody td { word-break:keep-all; padding:10px 10px; text-align:center; font-size:17px; font-weight:400; color:#444; line-height:1.5; border:1px solid #ddd; border-width:0 0 1px 1px; }
.managed-box2 .dataTable tbody td .stxt { font-size:15px; display:block; }
.managed-box2 .dataTable tbody td strong { font-weight:600; color:#222; }
@media screen and (max-width:1024px){
    .managed-box2 { padding:100px 0; }
    .managed-box2 .stit { margin:40px 0 -20px 0; font-size:22px; padding-left:18px;}
    .managed-box2 .stit:before { top:12px; width:6px; height:6px; }
    .managed-box2 .dataTable { margin-top:40px; }
    .managed-box2 .dataTable thead th { height:50px; font-size:16px; }
    .managed-box2 .dataTable tbody th { height:50px; padding:12px 15px; font-size:15px;}
    .managed-box2 .dataTable tbody td { padding:12px 10px; font-size:15px; }
    .managed-box2 .dataTable tbody td .stxt { font-size:14px; }
}
@media screen and (max-width:960px){
    .managed-box2 .dataTable { overflow:auto; }
    .managed-box2 .dataTable table { width:1000px; }
}
@media screen and (max-width:640px){
    .managed-box2 { padding:80px 0; }
    .managed-box2 .stit { margin:30px 0 -10px 0; font-size:18px; padding-left:14px;}
    .managed-box2 .stit:before { top:9px; width:4px; height:4px; }
    .managed-box2 .dataTable { margin-top:30px; }
}

/* animation */
.managed-box2 .dataTable { opacity:0; }
.managed-box2.subOn .dataTable { animation:ani_4 0.8s 0.2s; animation-fill-mode:both; }

.btnLinkBox { position:relative; }
.btnLinkBox.bg { background:#fff; margin-bottom:-110px; padding-bottom:110px; }
.btnLinkBox a { overflow:hidden; border:1px solid var(--mainColor); background:#fff; border-radius:50px; margin:0 auto 100px; width:320px; height:60px; transition:all 0.3s; position:relative; z-index:1; font-size:16px; color:#222; font-weight:700; letter-spacing:-0.02em; display:flex; align-items:center; justify-content:center; }
.btnLinkBox a span { transition:all 0.3s; display:inline-block; padding-right:16px; font-family:var(--subFont1); font-weight:500; font-size:20px; color:var(--mainColor); background:url(../img/main/visual_arr.png) right center no-repeat; }
.btnLinkBox a:hover { background:var(--mainColor); }
.btnLinkBox a:hover span { filter:brightness(0) invert(1);}
@media screen and (max-width:1024px){
    .btnLinkBox a { font-size:16px; width:250px; height:50px;  }
    .btnLinkBox a span { padding-right:16px; font-size:16px; }
}
@media screen and (max-width:640px){
    .btnLinkBox a { margin:0 auto 80px; }
}

.oracle-box1 { padding-top:110px; padding-bottom:110px; margin-top:-110px; }
.oracle-box1 .listbox { margin-top:50px; position:relative; z-index:1; }
.oracle-box1 .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.oracle-box1 .listbox ul li { width:calc((100% - 40px) / 3); }
.oracle-box1 .listbox ul li .box { display:flex; align-items:center; background:#fff; height:165px; padding-left:40px; border-radius:15px; }
.oracle-box1 .listbox ul li .box .icon { width:98px; height:98px; border-radius:100px; background:#f9f9f9; display:flex; align-items:center; justify-content:center; }
.oracle-box1 .listbox ul li .box .txt { width:calc(100% - 98px); word-break:keep-all; padding:0 30px; font-size:20px; font-weight:400; color:#222; line-height:1.5 }
@media screen and (max-width:1500px){
    .oracle-box1 .listbox ul li .box .txt br { display:none }
}
@media screen and (max-width:1280px){
    .oracle-box1 .listbox ul li .box { padding-left:30px; border-radius:15px; }
    .oracle-box1 .listbox ul li .box .txt { word-break:keep-all; padding:0 20px; font-size:18px; }
}
@media screen and (max-width:1024px){
    .oracle-box1 { padding-top:80px; padding-bottom:100px; margin-top:-80px; }
    .oracle-box1 .listbox ul { gap:20px; }
    .oracle-box1 .listbox ul li { width:calc((100% - 20px) / 2); }
    .oracle-box1 .listbox ul li .box { padding-left:20px; border-radius:8px; }
    .oracle-box1 .listbox ul li .box .icon { width:90px; height:90px; }
    .oracle-box1 .listbox ul li .box .txt { width:calc(100% - 90px); padding:0 15px; }
}
@media screen and (max-width:860px){
    .oracle-box1 .listbox ul { gap:10px; }
    .oracle-box1 .listbox ul li { width:calc((100% - 10px) / 2); }
}
@media screen and (max-width:640px){
    .oracle-box1 { padding-bottom:80px; }
    .oracle-box1 .listbox ul li .box { height:130px; padding-left:15px; }
    .oracle-box1 .listbox ul li .box .icon { width:80px; height:80px; }
    .oracle-box1 .listbox ul li .box .icon img { width:32px; }
    .oracle-box1 .listbox ul li .box .txt { width:calc(100% - 80px); padding:0 15px; font-size:16px; }
}
@media screen and (max-width:540px){
    .oracle-box1 .listbox ul li { width:100%; }
    .oracle-box1 .listbox ul li .box { height:auto; padding:15px; }
    .oracle-box1 .listbox ul li .box .icon { width:80px; height:80px; }
    .oracle-box1 .listbox ul li .box .icon img { width:32px; }
    .oracle-box1 .listbox ul li .box .txt { width:calc(100% - 80px); padding:0 15px; font-size:16px; }
}

/* animation */
.oracle-box1 .listbox ul li { opacity:0; }
.oracle-box1 .listbox.subOn ul li { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }


.software-box1 { padding-top:110px; padding-bottom:110px; margin-top:-110px; }
.software-box1 .dataTable { background:#fff; margin-top:50px; position:relative; z-index:2 }
.software-box1 .dataTable table { border:1px solid #ddd; }
.software-box1 .dataTable thead th { height:52px; background:#fff; font-size:18px; font-weight:600; color:#222; border:1px solid #ddd; border-width:0 0 1px 1px;  }
.software-box1 .dataTable thead th:first-child { border-left:none; }
.software-box1 .dataTable tbody td { word-break:keep-all; padding:15px 10px; text-align:center; font-size:18px; font-weight:400; color:#444; line-height:1.5; border:1px solid #ddd; border-width:0 0 1px 1px; }
.software-box1 .dataTable tbody tr.bg td { background:var(--mainColor); color:#fff; }
@media screen and (max-width:1024px){
    .software-box1 { padding-top:80px; padding-bottom:100px; margin-top:-80px; }
    .software-box1 .dataTable { margin-top:40px; }
    .software-box1 .dataTable thead th { height:50px; font-size:16px; }
    .software-box1 .dataTable tbody td { padding:10px 10px; font-size:16px; }
}
@media screen and (max-width:960px){
    .software-box1 .dataTable { overflow:auto; }
    .software-box1 .dataTable table { width:1000px; }
}
@media screen and (max-width:640px){
    .software-box1 { padding-bottom:80px; }
    .software-box1 .dataTable { margin-top:30px; }
}

/* animation */
.software-box1 .dataTable { opacity:0; }
.software-box1.subOn .dataTable { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }

.software-box2 { padding:120px 0; }
.software-box2.bg { background:#fff; }
.software-box2 .listbox { position:relative; margin-top:50px; }
.software-box2 .listbox:before { content:''; display:block; position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:1px; background:var(--mainColor); }
.software-box2 .listbox .box { position:relative; background:#fff; padding:48px 30px; border-radius:500px; border:1px solid var(--mainColor); }
.software-box2 .listbox .box ul { display:flex; align-items:center; justify-content:center; }
.software-box2 .listbox .box li { position:relative; width:calc(25% + 20px); margin:0 -20px; }
.software-box2 .listbox .box li:before { content:''; display:block; padding-bottom:100%; }
.software-box2 .listbox .box li .sbox { mix-blend-mode:multiply; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:500px; background:#f9f9f9; text-align:center; display:flex; align-items:center; justify-content:center; flex-direction:column;}
.software-box2 .listbox .box li:nth-child(even) .sbox { background:#f2f6fa; }
.software-box2 .listbox .box li .num { color:var(--mainColor); font-size:18px; font-weight:500; line-height:1.3; margin-bottom:18px; }
.software-box2 .listbox .box li .num strong { font-weight:700; font-family:var(--mainFont); }
.software-box2 .listbox .box li .icon { margin:0 auto; min-height:80px; display:flex; align-items:center; justify-content:center; }
.software-box2 .listbox .box li .txtbox { margin-top:20px; font-size:16px; font-weight:400; color:#444; line-height:1.6; letter-spacing:-0.02em; }
.software-box2 .listbox .box .txt_b { position:absolute; bottom:-38px; left:50%; transform:translateX(-50%); width:315px; height:77px; border-radius:77px; color:#fff; font-size:30px; font-weight:600; line-height:1.3; letter-spacing:-0.02em;display:flex; align-items:center; justify-content:center; background:var(--mainColor) }
@media screen and (max-width:1500px){
    .software-box2 .listbox .box { padding:40px 20px; }
    .software-box2 .listbox .box .txt_b { bottom:-31px; width:280px; height:62px; font-size:28px; }
}@media screen and (max-width:1280px){
    .software-box2 .listbox .box { padding:30px 15px; }
    .software-box2 .listbox .box li { width:calc(25% + 15px); margin:0 -15px; }
    .software-box2 .listbox .box li .num { font-size:17px; margin-bottom:15px; }
    .software-box2 .listbox .box li .icon { min-height:70px; }
    .software-box2 .listbox .box li .icon img { max-width:70px; }
    .software-box2 .listbox .box li .txtbox { margin-top:20px; font-size:16px; }
    .software-box2 .listbox .box .txt_b { bottom:-31px; width:280px; height:62px; font-size:28px; }
}
@media screen and (max-width:1024px){
    .software-box2 { padding:100px 0; }
    .software-box2 .listbox { margin-top:40px; }
    .software-box2 .listbox .box { padding:30px 20px; margin:0 auto; }
    .software-box2 .listbox .box ul { flex-wrap:wrap; max-width:640px; margin:0 auto; }
    .software-box2 .listbox .box li { width:calc(50% + 10px); margin:-10px; }
    .software-box2 .listbox .box li .num { font-size:16px; margin-bottom:10px; }
    .software-box2 .listbox .box li .icon { min-height:60px; }
    .software-box2 .listbox .box li .icon img { max-width:60px; }
    .software-box2 .listbox .box li .txtbox { margin-top:15px; font-size:15px; }
    .software-box2 .listbox .box .txt_b { bottom:-26px; width:260px; height:52px; font-size:24px; }
}
@media screen and (max-width:860px){
    .software-box2 .listbox:before { display:none }
    .software-box2 .listbox .box { border:none; padding:0 0 50px;}
}
@media screen and (max-width:640px){
    .software-box2 { padding:80px 0; }
    .software-box2 .listbox { margin-top:30px; }
    .software-box2 .listbox .box li { width:calc(50% + 5px); margin:-5px; }
    .software-box2 .listbox .box li .num { font-size:15px; margin-bottom:8px; }
    .software-box2 .listbox .box li .icon { min-height:50px; }
    .software-box2 .listbox .box li .icon img { max-width:50px; }
    .software-box2 .listbox .box li .txtbox { margin-top:12px; font-size:15px; }
    .software-box2 .listbox .box .txt_b { bottom:-25px; width:240px; height:50px; font-size:20px; }
}

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


.drBackUp-box1 { padding-bottom:110px; }
.drBackUp-box1 .subTitle .imgTit { margin-bottom:25px; }
.drBackUp-box1 .listbox { margin-top:50px; display:flex; flex-wrap:wrap; gap:0 20px;  }
.drBackUp-box1 .listbox .l-box { width:calc(33% - 10px); }
.drBackUp-box1 .listbox .r-box { width:calc(67% - 10px); background:#fff; border-radius:15px; height:535px; display:flex; align-items:center; justify-content:center; padding:0 50px; }
.drBackUp-box1 .listbox .r-box img { max-width:100%; }
.drBackUp-box1 .listbox .l-box li:not(:last-child) { margin-bottom:20px; }
.drBackUp-box1 .listbox .l-box li { height:165px; display:flex; align-items:center; background:#fff; border-radius:15px; padding-left:40px; }
.drBackUp-box1 .listbox .l-box li .icon { width:98px; height:98px; background:#f9f9f9; border-radius:98px; display:flex; align-items:center; justify-content:center; }
.drBackUp-box1 .listbox .l-box li .txtbox { word-break:keep-all; width:calc(100% - 98px); padding-left:30px; font-size:20px; font-weight:400; color:#222; line-height:1.5; letter-spacing:-0.02em; }
.drBackUp-box1 .listbox .l-box li .txtbox strong { font-weight:600; word-break:keep-all; }
.drBackUp-box2 { padding:140px 0; background:#fff; }
.drBackUp-box2 .listbox { margin-top:50px; }
.drBackUp-box2 .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.drBackUp-box2 .listbox li { width:calc((100% - 60px) / 4 ); height:354px; border:1px solid #ddd; border-radius:10px; background:#fff; display:flex; justify-content:center; text-align:center; padding-top:47px; }
.drBackUp-box2 .listbox li .icon { margin:0 auto; width:180px; height:180px; background:#f9f9f9; border-radius:180px; display:flex; align-items:center; justify-content:center; }
.drBackUp-box2 .listbox li .txtbox { word-break:keep-all; margin-top:30px; font-size:20px; font-weight:400; color:#222; line-height:1.5; letter-spacing:-0.02em; }
.drBackUp-box3 { padding:140px 0; }
.drBackUp-box3 .listbox { margin-top:50px; position:relative; z-index:2; }
.drBackUp-box3 .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.drBackUp-box3 .listbox li { width:calc((100% - 40px) / 3 ); height:163px; border:1px solid #ddd; border-radius:15px; background:#fff; display:flex; align-items:center; padding-left:33px; }
.drBackUp-box3 .listbox .icon { width:102px; height:102px; background:#f9f9f9; border-radius:102px; display:flex; align-items:center; justify-content:center; }
.drBackUp-box3 .listbox .txtbox { word-break:keep-all; width:calc(100% - 102px); padding-left:38px; font-size:18px; font-weight:400; color:#222; line-height:1.6; letter-spacing:-0.02em; }
.drBackUp-box3 .listbox .txtbox strong { font-weight:700; word-break:keep-all; }
@media screen and (max-width:1500px){
    .drBackUp-box1 .subTitle .imgTit img { height:84px; }
}
@media screen and (max-width:1280px){
    .drBackUp-box1 .subTitle .imgTit { margin-bottom:20px; }
    .drBackUp-box1 .subTitle .imgTit img { height:75px; }
    .drBackUp-box1 .listbox .l-box { width:calc(40% - 10px); }
    .drBackUp-box1 .listbox .r-box { width:calc(60% - 10px); }
    .drBackUp-box1 .listbox .l-box li { padding-left:25px; }
    .drBackUp-box1 .listbox .l-box li .txtbox { font-size:19px; }
    .drBackUp-box2 .listbox li { padding-top:42px; }
    .drBackUp-box2 .listbox li .icon { width:160px; height:160px; }
    .drBackUp-box2 .listbox li .txtbox { font-size:19px; }
    .drBackUp-box3 .listbox li { padding-left:20px; }
    .drBackUp-box3 .listbox .icon { width:95px; height:95px; }
    .drBackUp-box3 .listbox .txtbox { width:calc(100% - 95px); padding-left:20px; }
}
@media screen and (max-width:1024px){
    .drBackUp-box1 { padding-bottom:100px; }
    .drBackUp-box1 .subTitle .imgTit { margin-bottom:20px; }
    .drBackUp-box1 .subTitle .imgTit img { height:75px; }
    .drBackUp-box1 .listbox { margin-top:40px; }
    .drBackUp-box1 .listbox .l-box { width:calc(40% - 10px); }
    .drBackUp-box1 .listbox .r-box { width:calc(60% - 10px); }
    .drBackUp-box1 .listbox .l-box li { padding:0 20px; }
    .drBackUp-box1 .listbox .l-box li .icon { width:90px; height:90px; }
    .drBackUp-box1 .listbox .l-box li .txtbox { width:calc(100% - 90px); padding-left:20px; font-size:18px; }
    .drBackUp-box1 .listbox .l-box li .txtbox br { display:none }
    .drBackUp-box2 { padding:100px 0; }
    .drBackUp-box2 .listbox { margin-top:40px; }
    .drBackUp-box2 .listbox li { width:calc((100% - 20px) / 2 ); padding:30px 20px; height:auto; }
    .drBackUp-box2 .listbox li .icon { width:160px; height:160px; }
    .drBackUp-box2 .listbox li .txtbox { font-size:18px; }
    .drBackUp-box2 .listbox .txtbox br { display:none }
    .drBackUp-box3 { padding:100px 0; }
    .drBackUp-box3 .listbox { margin-top:40px; }
    .drBackUp-box3 .listbox li { padding:0 20px; }
    .drBackUp-box3 .listbox li { width:calc((100% - 20px) / 2 ); padding:20px; height:auto; }
    .drBackUp-box3 .listbox .icon { width:95px; height:95px; }
    .drBackUp-box3 .listbox .txtbox { width:calc(100% - 95px); padding:0 20px; font-size:16px; }
    .drBackUp-box3 .listbox .txtbox br { display:none }
}
@media screen and (max-width:960px){
    .drBackUp-box1 .listbox .l-box { width:100%; }
    .drBackUp-box1 .listbox .l-box li:not(:last-child) { margin-bottom:0; }
    .drBackUp-box1 .listbox .l-box ul { display:flex; gap:0 20px; }
    .drBackUp-box1 .listbox .r-box { width:100%; margin-top:20px; padding:40px 20px; height:auto; }
}
@media screen and (max-width:860px){
    .drBackUp-box1 .listbox .l-box ul { display:flex; gap:10px; }
    .drBackUp-box1 .listbox .l-box li { padding:20px; height:auto; }
    .drBackUp-box1 .listbox .l-box li .icon { width:84px; height:84px; }
    .drBackUp-box1 .listbox .l-box li .icon img { width:40px; }
    .drBackUp-box1 .listbox .r-box { margin-top:10px; }
    .drBackUp-box2 .listbox ul,
    .drBackUp-box3 .listbox ul { gap:10px; }
    .drBackUp-box2 .listbox li,
    .drBackUp-box3 .listbox li { width:calc((100% - 10px) / 2 ); }
    .drBackUp-box2 .listbox li .icon { width:120px; height:120px; }
    .drBackUp-box2 .listbox li .icon img { width:55px; }
}
@media screen and (max-width:760px){
    .drBackUp-box1 .listbox .l-box ul { flex-wrap:wrap; }
    .drBackUp-box1 .listbox .l-box li { width:100%; }
    .drBackUp-box3 .listbox li { width:100%; }
}
@media screen and (max-width:640px){
    .drBackUp-box1 { padding-bottom:80px; }
    .drBackUp-box1 .subTitle .imgTit img { height:60px; }
    .drBackUp-box1 .listbox { margin-top:30px; }
    .drBackUp-box1 .listbox .l-box li .txtbox { font-size:16px; }
    .drBackUp-box2 { padding:80px 0; }
    .drBackUp-box2 .listbox { margin-top:30px; }
    .drBackUp-box2 .listbox li .txtbox { font-size:16px; }
    .drBackUp-box3 { padding:80px 0; }
    .drBackUp-box3 .listbox { margin-top:30px; }
    .drBackUp-box3 .listbox .txtbox { font-size:14px; }
}

/* animation */
.drBackUp-box1 .listbox,
.drBackUp-box2 .listbox,
.drBackUp-box3 .listbox { opacity:0; }
.drBackUp-box1.subOn .listbox,
.drBackUp-box2.subOn .listbox,
.drBackUp-box3.subOn .listbox { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }

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


.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% - 165px); 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 .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; }

.security-ssl .SSL-feature { padding:140px 0 380px; background:#fff; }
.security-ssl .SSL-feature .listbox { margin-top:50px; }
.security-ssl .SSL-feature .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.security-ssl .SSL-feature .listbox li { width:calc((100% - 40px) / 3); display:flex; align-items:center; padding:33px 20px 33px 33px; border-radius:15px; background:#f9f9f9; }
.security-ssl .SSL-feature .listbox li .icon { display:flex; align-items:center; justify-content:center; width:98px; height:98px; background:#fff; border-radius:80px; }
.security-ssl .SSL-feature .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-ssl .process-box { margin-top:110px; position:relative; }
.security-ssl .process-box:before { content:''; display:block; position:absolute; top:50%; left:0; transform:translateY(-50%); width:calc(50% - 190px); height:1px; background:var(--mainColor); }
.security-ssl .process-box:after { content:''; display:block; position:absolute; top:50%; right:0; transform:translateY(-50%); width:calc(50% - 190px); height:1px; background:var(--mainColor); }
.security-ssl .process-box > div:before { content:''; display:block; position:absolute; bottom:100px; left:0; width:calc(50% - 185px); border:1px dashed #ddd }
.security-ssl .process-box .boxCont { position:relative; display:flex; justify-content:space-between; z-index:2; }
.security-ssl .process-box .boxCont:before { content:''; display:block; position:absolute; top:50%; left:calc(50% - 190px); transform:translateY(-50%); width:10px; height:13px; background:url(../img/server/process_arr.png) no-repeat right center; }
.security-ssl .process-box .boxCont:after { content:''; display:block; position:absolute; top:50%; right:calc(50% - 190px); transform:translateY(-50%) rotate(180deg); width:10px; height:13px; background:url(../img/server/process_arr.png) no-repeat right center; }
.security-ssl .process-box .boxCont .circle-box { width:315px; height:315px; border-radius:315px; border:1px solid var(--mainColor); text-align:center; display:flex; align-items:center; justify-content:center; background:#fff }
.security-ssl .process-box .boxCont .circle-box .txt { margin-top:30px; font-size:18px; font-weight:500; color:#222; line-height:1.3; }
.security-ssl .process-box .boxCont .info { position:absolute; }
.security-ssl .process-box .boxCont .info .txt { font-size:16px; font-weight:400; color:#444; line-height:1.3; margin-top:15px; }
.security-ssl .process-box .boxCont .info-1 { left:335px; top:20px; }
.security-ssl .process-box .boxCont .info-1 .txt-1 { position:absolute; top:208px; left:0; margin-top:0; }
.security-ssl .process-box .boxCont .info-2 { right:335px; top:20px; text-align:right; }
.security-ssl .process-box .boxCont .info-2:before { content:''; display:block; position:absolute; top:180px; right:100px; width:492px; height:255px; background:url(../img/server/process_arr1.png) no-repeat right center; }
.security-ssl .process-box .boxCont .info-3 { left:335px; top:365px; width:240px; height:181px; border-radius:20px; border:1px solid rgba(221, 221, 221, 0.96); background:#f9f9f9; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center }
.security-ssl .process-box .boxCont .info-3 .txt { font-size:18px; }
.security-ssl .process-box .boxCont .info-3:after { content:''; display:block; position:absolute; bottom:86px; left:450px; width:13px; height:13px; background:url(../img/server/process_x.png) no-repeat right center; }
@media screen and (max-width:1500px){
    .security-ssl .process-box .boxCont .circle-box { width:280px; height:280px; }
    .security-ssl .process-box .boxCont .circle-box .icon img { height:120px; }
    .security-ssl .process-box .boxCont .circle-box .txt { margin-top:25px; font-size:18px; }
    .security-ssl .process-box .boxCont .info-1 { left:300px; }
    .security-ssl .process-box .boxCont .info-1 .txt-1 { top:170px; }
    .security-ssl .process-box .boxCont .info-2 { right:300px; }
    .security-ssl .process-box .boxCont .info-2:before { right:80px; }
    .security-ssl .process-box .boxCont .info-3 { left:300px; }
    .security-ssl .process-box .boxCont .info-3:after { left:150%; }
}
@media screen and (max-width:1280px){
    .security-ssl .SSL-feature .listbox li { padding:30px 20px 30px 30px; }
    .security-ssl .SSL-feature .listbox li .icon { width:90px; height:90px; }
    .security-ssl .SSL-feature .listbox li .txtbox { padding-left:20px; font-size:19px; width:calc(100% - 90px); }
    .security-ssl .SSL-feature .listbox li .txtbox br { display:none }
    .security-ssl .process-box:before,
    .security-ssl .process-box:after { width:calc(50% - 160px); }
    .security-ssl .process-box > div:before { bottom:80px; width:calc(50% - 153px); }
    .security-ssl .process-box .boxCont:before { left:calc(50% - 160px); }
    .security-ssl .process-box .boxCont:after { right:calc(50% - 160px); }
    .security-ssl .process-box .boxCont .circle-box { width:220px; height:220px; }
    .security-ssl .process-box .boxCont .circle-box .icon img { height:80px; }
    .security-ssl .process-box .boxCont .circle-box .txt { margin-top:10px; font-size:16px; }
    .security-ssl .process-box .boxCont .info-1 { left:230px; top:-20px; }
    .security-ssl .process-box .boxCont .info-1 .txt-1 { top:170px; }
    .security-ssl .process-box .boxCont .info-2 { right:230px; top:-20px; }
    .security-ssl .process-box .boxCont .info-2:before { width:300px; right:50px; top:140px; }
    .security-ssl .process-box .boxCont .info-3 { left:230px; top:280px; }
    .security-ssl .process-box .boxCont .info-3:after { left:130%; bottom:82px; }
}
@media screen and (max-width:1024px){
    .security-ssl .SSL-feature { padding:100px 0; }
    .security-ssl .SSL-feature .listbox { margin-top:40px; }
    .security-ssl .SSL-feature .listbox li { padding:20px 10px 20px 20px; }
    .security-ssl .SSL-feature .listbox li .icon { width:80px; height:80px; }
    .security-ssl .SSL-feature .listbox li .icon img { width:50%; }
    .security-ssl .SSL-feature .listbox li .txtbox { padding-left:15px; font-size:18px; width:calc(100% - 80px); }
    .security-ssl .process-box { margin-top:100px; }
    .security-ssl .process-box:before { left:calc(50% - 50px); top:0; transform:translateX(-50%); width:1px; height:calc(50% - 150px); }
    .security-ssl .process-box:after { left:calc(50% - 50px); top:unset; right:unset; bottom:0; transform:translateX(-50%); width:1px; height:calc(50% - 150px); }
    .security-ssl .process-box > div:before { left:calc(50% - 70px); top:0; height:calc(50% - 145px); width:0; }
    .security-ssl .process-box .boxCont { display:block; width:320px; margin:0 auto; padding:0; }
    .security-ssl .process-box .boxCont:before { left:calc(50% - 50px); top:calc(50% - 152px); transform:translate(-50%, 0) rotate(90deg); }
    .security-ssl .process-box .boxCont:after {  left:calc(50% - 50px); top:unset; bottom:calc(50% - 152px); transform:translate(-50%, 0) rotate(-90deg); }
    .security-ssl .process-box .boxCont .circle-box.c2 { margin:180px 0; }
    .security-ssl .process-box .boxCont .info .icon img { width:20px; }
    .security-ssl .process-box .boxCont .info .txt { margin-top:8px; font-size:15px; }
    .security-ssl .process-box .boxCont .info-1 { left:150px; top:210px; }
    .security-ssl .process-box .boxCont .info-1 .txt-1 { top:60px; left:-270px; width:200px; text-align:right }
    .security-ssl .process-box .boxCont .info-1 .txt-1 span { display:block }
    .security-ssl .process-box .boxCont .info-2 { left:150px; right:unset; top:unset; bottom:210px; text-align:left; }
    .security-ssl .process-box .boxCont .info-2:before { width:20px; height:170px; right:0; top:-125px; transform:rotate(-90deg); background-position:right top; }
    .security-ssl .process-box .boxCont .info-3 { left:200px; top:unset; bottom:280px; width:130px; height:100px; border-radius:10px;}
    .security-ssl .process-box .boxCont .info-3 .icon img { width:30px; }
    .security-ssl .process-box .boxCont .info-3 .txt { font-size:15px; }
    .security-ssl .process-box .boxCont .info-3:after { bottom:48px; left:-40px; }
}
@media screen and (max-width:860px){
    .security-ssl .SSL-feature .listbox ul { gap:10px; }
    .security-ssl .SSL-feature .listbox li { width:100%; }
}
@media screen and (max-width:640px){
    .security-ssl .SSL-feature { padding:80px 0; }
    .security-ssl .SSL-feature .listbox { margin-top:30px; }
    .security-ssl .SSL-feature .listbox li .icon { width:70px; height:70px; }
    .security-ssl .SSL-feature .listbox li .txtbox { font-size:16px; width:calc(100% - 70px); }
    .security-ssl .process-box { margin-top:80px; }
}

/* animation */
.security-ssl .SSL-feature,
.security-ssl .process-box { opacity:0; }
.security-ssl .SSL-feature.subOn { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }
.security-ssl .process-box.subOn { animation:ani_4 0.8s 0.6s; animation-fill-mode:both; }

.security-weak .weak-feature { padding:140px 0; background:#fff; }
.security-weak .weak-feature .listbox { margin-top:50px; }
.security-weak .weak-feature .listbox > ul { display:flex; flex-wrap:wrap; gap:20px; }
.security-weak .weak-feature .listbox > ul > li { width:calc((100% - 60px) / 4); border-radius:15px; background:#f9f9f9; padding:50px 20px 50px 50px; }
.security-weak .weak-feature .listbox > ul > li .icon { width:102px; height:102px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:100px; }
.security-weak .weak-feature .listbox > ul > li dt { margin-top:20px; position:relative; padding-bottom:22px; font-size:24px; font-weight:700; color:#222; line-height:1.3; }
.security-weak .weak-feature .listbox > ul > li dt:before { content:''; display:block; position:absolute; bottom:0; left:0; width:20px; height:1px; background:#000; }
.security-weak .weak-feature .listbox > ul > li dd { word-break:keep-all; margin-top:15px; font-size:18px; font-weight:400; color:#444; line-height:1.5; letter-spacing:-0.02em; }
.security-weak .weak-process { padding:140px 0; }
.security-weak .weak-process .listbox { margin-top:77px; position:relative; }
.security-weak .weak-process .listbox:before { content:''; display:block; position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:0; border:1px dashed var(--mainColor); }
.security-weak .weak-process .listbox .list { position:relative; z-index:2; }
.security-weak .weak-process .listbox .list > ul { display:flex; flex-wrap:wrap; gap:30px 80px; }
.security-weak .weak-process .listbox .list > ul > li { position:relative; width:calc((100% - 320px) / 5); border-radius:20px; border:1px solid var(--mainColor); background:#fff; }
.security-weak .weak-process .listbox .list > ul > li:before { content:''; display:block; position:absolute; top:50%; left:-50px; transform:translateY(-50%); width:10px; height:13px; background:url(../img/server/process_arr.png) no-repeat right center; }
.security-weak .weak-process .listbox .list > ul > li:first-child:before { display:none }
.security-weak .weak-process .listbox .list > ul > li .box { position:relative; display:flex; justify-content:center; text-align:center; padding:65px 10px 60px; }
.security-weak .weak-process .listbox .list > ul > li .box dt { position:absolute; left:50%; top:-28px; transform:translateX(-50%); font-size:17px; font-weight:400; color:#fff; line-height:1.5; letter-spacing:-0.02em; width:122px; height:56px; background:var(--mainColor); border-radius:56px; display:flex; align-items:center; justify-content:center; }
.security-weak .weak-process .listbox .list > ul > li .box p.tit { font-size:20px; font-weight:600; color:#222; line-height:1.5; letter-spacing:-0.02em; }
.security-weak .weak-process .listbox .list > ul > li .box .icon { margin-top:30px; }
.security-weak .weak-process .listbox .list > ul > li .box .txtbox { margin-top:35px; }
.security-weak .weak-process .listbox .list > ul > li .box .txtbox > div { word-break:keep-all; position:relative; font-size:17px; font-weight:400; color:#444; line-height:1.5; letter-spacing:-0.02em; }
.security-weak .weak-process .listbox .list > ul > li .box .txtbox > div:not(:last-child) { margin-bottom:15px; padding-bottom:15px; }
.security-weak .weak-process .listbox .list > ul > li .box .txtbox > div:not(:last-child):before { content:''; display:block; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:6px; height:1px; background:#444; }
@media screen and (max-width:1500px){
    .security-weak .weak-feature .listbox > ul > li dd br { display:none }
    .security-weak .weak-process .listbox .list > ul { gap:30px 50px; }
    .security-weak .weak-process .listbox .list > ul > li { width:calc((100% - 200px) / 5); }
    .security-weak .weak-process .listbox .list > ul > li:before { left:-30px; }
}
@media screen and (max-width:1280px){
    .security-weak .weak-feature .listbox > ul > li { padding:40px 20px 40px 40px; }
    .security-weak .weak-feature .listbox > ul > li .icon { width:102px; height:102px; }
    .security-weak .weak-feature .listbox > ul > li dt { margin-top:20px; padding-bottom:20px; font-size:22px; }
    .security-weak .weak-feature .listbox > ul > li dt:before { width:18px; }
    .security-weak .weak-feature .listbox > ul > li dd { margin-top:15px; font-size:17px; }
    .security-weak .weak-process .listbox .list > ul { gap:30px 40px; }
    .security-weak .weak-process .listbox .list > ul > li { width:calc((100% - 160px) / 5); }
    .security-weak .weak-process .listbox .list > ul > li:before { left:-25px; }
    .security-weak .weak-process .listbox .list > ul > li .box { padding:55px 10px 50px;  }
    .security-weak .weak-process .listbox .list > ul > li .box dt { top:-22px; font-size:16px; width:115px; height:44px; }
    .security-weak .weak-process .listbox .list > ul > li .box p.tit { font-size:18px; }
    .security-weak .weak-process .listbox .list > ul > li .box .icon { margin-top:20px; }
    .security-weak .weak-process .listbox .list > ul > li .box .txtbox { margin-top:30px; }
    .security-weak .weak-process .listbox .list > ul > li .box .txtbox > div { font-size:16px; }
    .security-weak .weak-process .listbox .list > ul > li .box .txtbox > div:not(:last-child) { margin-bottom:15px; padding-bottom:15px; }
}
@media screen and (max-width:1024px){
    .security-weak .weak-feature { padding:100px 0; }
    .security-weak .weak-feature .listbox { margin-top:40px; }
    .security-weak .weak-process .listbox:before { top:calc(25% - 10px); }
    .security-weak .weak-process .listbox:after { content:''; display:block; position:absolute; top:calc(75% + 10px); left:0; transform:translateY(-50%); width:100%; height:0; border:1px dashed var(--mainColor); }
    .security-weak .weak-feature .listbox > ul > li { padding:30px 10px 30px 30px; }
    .security-weak .weak-feature .listbox > ul > li .icon { width:95px; height:95px; }
    .security-weak .weak-feature .listbox > ul > li .icon img { width:38px; }
    .security-weak .weak-feature .listbox > ul > li dt { margin-top:15px; padding-bottom:15px; font-size:20px; }
    .security-weak .weak-feature .listbox > ul > li dt:before { width:16px; }
    .security-weak .weak-feature .listbox > ul > li dd { margin-top:12px; font-size:16px; }
    .security-weak .weak-process { padding:100px 0; }
    .security-weak .weak-process .listbox { margin-top:60px; }
    .security-weak .weak-process .listbox .list > ul { gap:40px 40px; justify-content:center; }
    .security-weak .weak-process .listbox .list > ul > li { width:calc((100% - 80px) / 3); }
    .security-weak .weak-process .listbox .list > ul > li .box .txtbox > div br { display:none }
}
@media screen and (max-width:860px){
    .security-weak .weak-feature .listbox > ul { gap:10px; }
    .security-weak .weak-feature .listbox > ul > li { width:calc((100% - 10px) / 2); }
}
@media screen and (max-width:760px){
    .security-weak .weak-process .listbox .list { padding:0 20px; }
    .security-weak .weak-process .listbox .list > ul > li { width:calc((100% - 40px) / 2); height:320px; }
    .security-weak .weak-process .listbox .list > ul > li:last-child { height:auto; }
    .security-weak .weak-process .listbox:before { top:160px; }
    .security-weak .weak-process .listbox:after { top:520px; }
    .security-weak .weak-process .listbox > div { position:relative; }
    .security-weak .weak-process .listbox > div:before { content:''; display:block; position:absolute; bottom:134px; left:0; transform:translateY(-50%); width:100%; height:0; border:1px dashed var(--mainColor); }
}
@media screen and (max-width:640px){
    .security-weak .weak-feature { padding:80px 0; }
    .security-weak .weak-feature .listbox { margin-top:30px; }
    .security-weak .weak-feature .listbox > ul > li .icon { width:85px; height:85px; }
    .security-weak .weak-feature .listbox > ul > li .icon img { width:34px; }
    .security-weak .weak-feature .listbox > ul > li dt { margin-top:12px; padding-bottom:12px; font-size:18px; }
    .security-weak .weak-feature .listbox > ul > li dt:before { width:14px; }
    .security-weak .weak-feature .listbox > ul > li dd { margin-top:10px; font-size:15px; }
    .security-weak .weak-process { padding:80px 0; }
    .security-weak .weak-process .listbox { margin-top:45px; }
    .security-weak .weak-process .listbox > div:before { bottom:114px; }
    .security-weak .weak-process .listbox .list > ul > li .box { padding:45px 10px 40px;  }
    .security-weak .weak-process .listbox .list > ul > li:last-child { height:232px; }
    .security-weak .weak-process .listbox .list > ul > li .box dt { top:-20px; font-size:15px; width:100px; height:40px; }
    .security-weak .weak-process .listbox .list > ul > li .box p.tit { font-size:16px; }
    .security-weak .weak-process .listbox .list > ul > li .box .icon { margin-top:15px; }
    .security-weak .weak-process .listbox .list > ul > li .box .txtbox { margin-top:20px; }
    .security-weak .weak-process .listbox .list > ul > li .box .txtbox > div { font-size:15px; }
    .security-weak .weak-process .listbox .list > ul > li .box .txtbox > div:not(:last-child) { margin-bottom:10px; padding-bottom:10px; }
}


/* animation */
.security-weak .weak-feature .listbox,
.security-weak .weak-process .listbox { opacity:0; }
.security-weak .weak-feature.subOn .listbox { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }
.security-weak .weak-process.subOn .listbox { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }


.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:500; color:#222; line-height:1.5; }
@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:140px 0; background:#fff; }
.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; }
@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; }
}
@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 }
}
@media screen and (max-width:1024px){
    .firewall-service { padding:100px 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;}
}
@media screen and (max-width:860px){
    .firewall-service .service-box4 ul { gap:10px; }
    .firewall-service .service-box4 li { width:calc((100% - 20px) / 3); }
}
@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;}
}
@media screen and (max-width:640px){
    .firewall-service { padding:80px 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; }
}
@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); }
}



/* 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; }


.network-speed { padding:140px 0; background:#fff; }
.network-speed .boxCont { margin:0 auto; margin-top:50px; max-width:1061px; display:flex; justify-content:space-between; align-items:center; }
.network-speed .boxCont .l-box { width:521px; height:521px; border-radius:521px; background:#f2f6fa; display:flex; justify-content:center; align-items:center; }
.network-speed .boxCont .l-box .circle-box { position:relative; width:373px; height:373px; border-radius:373px; border:32px solid #fff; background:var(--mainColor); display:flex; justify-content:center; align-items:center; text-align:center; }
.network-speed .boxCont .l-box .circle-box:before { content:''; display:block; position:absolute; left:100%; top:50%; width:175px; height:236px; transform:translateY(-50%); background:url(../img/server/network_arr1.png) no-repeat right center; }
.network-speed .boxCont .l-box .circle-box .txt { font-size:28px; font-weight:600; color:#fff; line-height:1.3; margin-bottom:15px; }
.network-speed .boxCont .r-box { width:calc(100% - 521px); padding-left:80px; } 
.network-speed .boxCont .r-box li:not(last-child) { margin-bottom:10px; }
.network-speed .boxCont .r-box li { height:97px; border-radius:300px; background:#f2f6fa; display:flex; align-items:center; padding-left:68px; font-size:18px; font-weight:600; color:#222; line-height:1.3; letter-spacing:-0.02em; }
.network-speed .boxCont .r-box li span { font-weight:600; color:var(--mainColor); display:inline-block; margin-left:5px; }
.network-speed .boxCont .r-box li strong { font-weight:600; font-size:22px; display:inline-block; width:110px; }
.network-speed .boxCont .r-box li:last-child { background:var(--mainColor); color:#fff; }
.network-effect { padding:140px 0; }
.network-effect .listbox { margin-top:50px; position:relative; z-index:2; }
.network-effect .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.network-effect .listbox li { width:calc((100% - 60px) / 4); height:430px; padding:45px 10px 10px; border-radius:10px; background:#fff; border:1px solid #ddd; display:flex; justify-content:center; text-align:center; }
.network-effect .listbox li .icon { width:209px; height:209px; background:#f9f9f9; border-radius:209px; display:flex; align-items:center; justify-content:center; margin:0 auto; }
.network-effect .listbox li dt { margin-top:20px; font-size:26px; font-weight:600; color:#222; line-height:1.3; }
.network-effect .listbox li dd { word-break:keep-all; margin-top:15px; font-size:16px; font-weight:400; color:#222; line-height:1.6; letter-spacing:-0.02em; }
@media screen and (max-width:1280px){
    .network-speed .boxCont .l-box { width:480px; height:480px; }
    .network-speed .boxCont .l-box .circle-box { width:320px; height:320px; border:28px solid #fff; }
    .network-speed .boxCont .l-box .circle-box .txt { font-size:26px; margin-bottom:15px; }
    .network-speed .boxCont .r-box { width:calc(100% - 480px); } 
    .network-speed .boxCont .r-box li:not(last-child) { margin-bottom:10px; }
    .network-speed .boxCont .r-box li { height:85px; padding-left:55px; font-size:18px; }
    .network-speed .boxCont .r-box li strong { font-size:22px; width:110px; }
    .network-effect .listbox li { height:360px; padding:40px 10px 10px; }
    .network-effect .listbox li .icon { width:160px; height:160px; }
    .network-effect .listbox li dt { margin-top:15px; font-size:22px; }
    .network-effect .listbox li dd { margin-top:15px; font-size:16px; }
    .network-effect .listbox li dd br { display:none }
}
@media screen and (max-width:1024px){
    .network-speed,
    .network-effect { padding:100px 0; }
    .network-speed .boxCont,
    .network-effect .listbox { margin-top:40px; }
    .network-effect .listbox li { height:300px; padding:40px 10px 10px; }
    .network-effect .listbox li .icon { width:120px; height:120px; }
    .network-effect .listbox li .icon img { width:60px; }
    .network-effect .listbox li dt { font-size:20px; }
    .network-effect .listbox li dd { font-size:15px; }
    .network-speed .boxCont .l-box { width:360px; height:360px; }
    .network-speed .boxCont .l-box .circle-box { width:280px; height:280px; border:22px solid #fff; }
    .network-speed .boxCont .l-box .circle-box .txt { font-size:22px; margin-bottom:15px; }
    .network-speed .boxCont .l-box .circle-box:before { width:130px; } 
    .network-speed .boxCont .r-box { width:calc(100% - 360px); } 
    .network-speed .boxCont .r-box li:not(last-child) { margin-bottom:10px; }
    .network-speed .boxCont .r-box li { height:85px; padding-left:30px; font-size:16px; }
    .network-speed .boxCont .r-box li strong { font-size:18px; width:80px; }
}
@media screen and (max-width:960px){
    .network-effect .listbox li { width:calc((100% - 20px) / 2); }
}
@media screen and (max-width:860px){
    .network-effect .listbox ul { gap:10px; }
    .network-effect .listbox li { width:calc((100% - 10px) / 2); }
    .network-speed .boxCont { flex-wrap:wrap; }
    .network-speed .boxCont .l-box { width:320px; height:320px; margin:0 auto; }
    .network-speed .boxCont .l-box .circle-box { width:240px; height:240px; border:20px solid #fff; }
    .network-speed .boxCont .l-box .circle-box:before { display:none }
    .network-speed .boxCont .l-box .circle-box .txt { font-size:20px; }
    .network-speed .boxCont .r-box { max-width:400px; width:100%; margin:20px auto 0; padding:0; } 
    .network-speed .boxCont .r-box li { height:75px; padding-left:0; font-size:16px; text-align:center; justify-content: center; }
}
@media screen and (max-width:640px){
    .network-speed,
    .network-effect { padding:80px 0; }
    .network-speed .boxCont,
    .network-effect .listbox { margin-top:30px; }
    .network-effect .listbox li { height:auto; padding:30px 10px 20px; }
    .network-effect .listbox li .icon { width:100px; height:100px; }
    .network-effect .listbox li .icon img { width:50px; }
    .network-effect .listbox li dt { margin-top:12px; font-size:17px; }
    .network-effect .listbox li dd { margin-top:12px; font-size:15px; }
}

/* animation */
.network-speed .boxCont, 
.network-effect .listbox { opacity:0; }
.network-speed.subOn .boxCont,
.network-effect.subOn .listbox { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }


.network-switch1 { padding-bottom:110px; }
.network-switch1 * { word-break:keep-all; }
.network-switch1 .listbox { margin-top:50px; }
.network-switch1 .listbox ul { display:flex; flex-wrap:wrap; gap:30px; }
.network-switch1 .listbox li { width:calc((100% - 30px) / 2); border-radius:15px; background:#fff; padding:50px; display:flex; align-items:center; }
.network-switch1 .listbox li .icon { width:210px; height:210px; border-radius:210px; background:#f9f9f9; display:flex; align-items:center; justify-content:center; }
.network-switch1 .listbox li .txtbox { width:calc(100% - 210px); padding-left:40px; }
.network-switch1 .listbox li .txtbox dt { font-size:28px; font-weight:600; color:#222; line-height:1.5; letter-spacing:-0.02em; }
.network-switch1 .listbox li .txtbox dd { margin-top:20px; font-size:20px; font-weight:400; color:#222; line-height:1.5; letter-spacing:-0.02em; }
.network-switch1 .listbox li .txtbox dd strong { font-weight:600; }
.network-switch2 { padding:140px 0; background:#fff; }
.network-switch2 .listbox { margin-top:50px; }
.network-switch2 .listbox-2 { margin-top:140px; }
.network-switch2 * { word-break:keep-all; }
.network-switch2 .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.network-switch2 .listbox li { width:calc((100% - 40px) / 3); border-radius:15px; background:#f9f9f9; padding:35px 40px; display:flex; align-items:center; }
.network-switch2 .listbox li .icon { width:98px; height:98px; border-radius:98px; background:#fff; display:flex; align-items:center; justify-content:center; }
.network-switch2 .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; }
.network-switch2 .listbox li .txtbox strong { font-weight:600; }
@media screen and (max-width:1280px){
    .network-switch1 .listbox ul { gap:30px; }
    .network-switch1 .listbox li { width:calc((100% - 30px) / 2); padding:40px; }
    .network-switch1 .listbox li .icon { width:200px; height:200px; }
    .network-switch1 .listbox li .txtbox { width:calc(100% - 200px); padding-left:25px; }
    .network-switch1 .listbox li .txtbox dt { font-size:24px; }
    .network-switch1 .listbox li .txtbox dd { margin-top:13px; font-size:19px; }
    .network-switch2 .listbox ul { gap:20px; }
    .network-switch2 .listbox li { width:calc((100% - 40px) / 3); padding:30px 30px;}
    .network-switch2 .listbox li .icon { width:98px; height:98px; }
    .network-switch2 .listbox li .txtbox { width:calc(100% - 98px); padding-left:25px; font-size:19px; }
    .network-switch1 .listbox li .txtbox br,
    .network-switch2 .listbox li .txtbox br { display:none }
    .network-switch2 .listbox li .txtbox .m_br { display:block }
}
@media screen and (max-width:1024px){
    .network-switch1 { padding-bottom:100px; }
    .network-switch1 .listbox,
    .network-switch2 .listbox { margin-top:40px; }
    .network-switch1 .listbox ul { gap:20px; }
    .network-switch1 .listbox li { width:calc((100% - 20px) / 2); padding:30px; }
    .network-switch1 .listbox li .icon { width:150px; height:150px; }
    .network-switch1 .listbox li .icon img { width:75px; }
    .network-switch1 .listbox li .txtbox { width:calc(100% - 150px); padding-left:18px; }
    .network-switch1 .listbox li .txtbox dt { font-size:24px; }
    .network-switch1 .listbox li .txtbox dd { margin-top:13px; font-size:18px; }
    .network-switch2 { padding:100px 0; }
    .network-switch2 .listbox-2 { margin-top:100px; }
    .network-switch2 .listbox li { padding:30px 20px;}
    .network-switch2 .listbox li .icon { width:85px; height:85px; }
    .network-switch2 .listbox li .txtbox { width:calc(100% - 85px); padding-left:18px; font-size:18px; }
}
@media screen and (max-width:960px){
    .network-switch2 .listbox li { width:100%; }
}
@media screen and (max-width:860px){
    .network-switch1 .listbox li { width:100%; }
}
@media screen and (max-width:640px){
    .network-switch1 { padding-bottom:80px; }
    .network-switch1 .listbox,
    .network-switch2 .listbox { margin-top:30px; }
    .network-switch1 .listbox ul,
    .network-switch2 .listbox ul { gap:10px; }
    .network-switch1 .listbox li { padding:20px; }
    .network-switch1 .listbox li .icon { width:120px; height:120px; }
    .network-switch1 .listbox li .icon img { width:65px; }
    .network-switch1 .listbox li .txtbox { width:calc(100% - 120px); padding-left:14px; }
    .network-switch1 .listbox li .txtbox dt { font-size:20px; }
    .network-switch1 .listbox li .txtbox dd { margin-top:10px; font-size:16px; }
    .network-switch2 { padding:80px 0; }
    .network-switch2 .listbox-2 { margin-top:80px; }
    .network-switch2 .listbox li { padding:20px;}
    .network-switch2 .listbox li .icon { width:85px; height:85px; }
    .network-switch2 .listbox li .txtbox { width:calc(100% - 85px); padding-left:14px; font-size:16px; }
}

/* animation */
.network-switch1 .listbox,
.network-switch2 .listbox{ opacity:0; }
.network-switch1.subOn .listbox,
.network-switch2 .listbox.subOn  { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }


.loadBalancer-box { padding:140px 0; }
.loadBalancer-box * { word-break:keep-all; }
.loadBalancer-box.bg { background:#fff; }
.loadBalancer-box .listbox { margin-top:50px; z-index:2; position:relative; }
.loadBalancer-box1 .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.loadBalancer-box1 .listbox li { position:relative; width:calc((100% - 60px) / 4); border-radius:10px; border:1px solid #ddd; background:#fff; display:flex; justify-content:center; text-align:center; padding:45px 10px 60px; }
.loadBalancer-box1 .listbox li .icon { width:210px; height:210px; border-radius:210px; background:#f9f9f9; display:flex; align-items:center; justify-content:center; margin:0 auto; }
.loadBalancer-box1 .listbox li .txtbox { margin-top:45px; font-size:16px; font-weight:400; color:#444; line-height:1.6; letter-spacing:-0.02em; }
.loadBalancer-box2 .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.loadBalancer-box2 .listbox li { width:calc((100% - 40px) / 3); border-radius:10px; border:1px solid #ddd; background:#fff; padding:50px; }
.loadBalancer-box2 .listbox li .icon { width:102px; height:102px; border-radius:102px; background:#f9f9f9; display:flex; align-items:center; justify-content:center; }
.loadBalancer-box2 .listbox li .txtbox dt { position:relative; margin-top:20px; padding-bottom:15px; font-size:24px; font-weight:700; color:#222; line-height:1.3; letter-spacing:-0.02em; }
.loadBalancer-box2 .listbox li .txtbox dt:before { content:''; display:block; position:absolute; left:0; bottom:0; width:19px; height:1px; background:#000; }
.loadBalancer-box2 .listbox li .txtbox dd { margin-top:15px; font-size:18px; font-weight:400; color:#444; line-height:1.5; letter-spacing:-0.02em; }
.loadBalancer-box3 .listbox:before { content:''; display:block; position:absolute; top:50%; left:0; width:100%; height:1px; transform:translateY(-50%); margin-top:-5px; background:var(--mainColor); }
.loadBalancer-box3 .listbox ul { position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center; padding:92px 145px 73px; border-radius:990px; border:1px solid #0569ff; background:#fff; }
.loadBalancer-box3 .listbox li { position:relative; }
.loadBalancer-box3 .listbox li .icon { text-align:center;}
.loadBalancer-box3 .listbox li .icon-1,
.loadBalancer-box3 .listbox li .icon-4 { padding-top:0; width:85px;  }
.loadBalancer-box3 .listbox li .icon-1 img:not(:last-child) { margin-bottom:40px; }
.loadBalancer-box3 .listbox li .icon-4 img:not(:last-child) { margin-bottom:20px; }
.loadBalancer-box3 .listbox li .txt { margin-top:20px; font-size:22px; font-weight:500; color:#222; line-height:1.5; letter-spacing:-0.02em; text-align:center; }
.loadBalancer-box3 .listbox li .circle { width:250px; height:250px; border-radius:250px; display:flex; align-items:center; justify-content:center; flex-direction:column; background:#f2f6fa; }
.loadBalancer-box3 .listbox li:nth-child(3) .circle { background:var(--mainColor); }
.loadBalancer-box3 .listbox li:nth-child(3) .txt { color:#fff; }
.loadBalancer-box3 .listbox li:nth-child(4) .txt { margin-top:15px; }
.loadBalancer-box3 .listbox .lb-box { position:relative; }
.loadBalancer-box3 .listbox .lb-box:before { z-index:3; content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); margin-top:-5px; width:90px; height:16px; background:url(../img/server/loadBalancer_arr2.png) no-repeat right top; }
.loadBalancer-box3 .listbox ul:before { content:''; display:block; position:absolute; top:50%; left:22%; transform:translate(-50%, -50%); margin-top:-5px; width:91px; height:184px; background:url(../img/server/loadBalancer_arr1.png) no-repeat right top; }
.loadBalancer-box3 .listbox ul:after { content:''; display:block; position:absolute; top:50%; left:79%; transform:translate(-50%, -50%); margin-top:-5px; width:149px; height:224px; background:url(../img/server/loadBalancer_arr3.png) no-repeat right top; }
@media screen and (max-width:1400px){
    .loadBalancer-box .listbox li .txtbox br { display:none }    
    .loadBalancer-box3 .listbox ul { padding:92px 120px 73px;}
    .loadBalancer-box3 .listbox li .circle { width:200px; height:200px; }
    .loadBalancer-box3 .listbox li .circle .icon img { width:80px; }
    .loadBalancer-box3 .listbox .lb-box:before { width:80px; }
    .loadBalancer-box3 .listbox ul:before { left:23%; width:80px; }
    .loadBalancer-box3 .listbox ul:after { left:78%; width:110px; }
}
@media screen and (max-width:1280px){
    .loadBalancer-box1 .listbox li { padding:30px 10px; }
    .loadBalancer-box1 .listbox li .icon { width:170px; height:170px; }
    .loadBalancer-box1 .listbox li .txtbox { margin-top:30px; }
    .loadBalancer-box2 .listbox li { padding:30px; }
    .loadBalancer-box3 .listbox ul { padding:72px 120px 53px;}
    .loadBalancer-box3 .listbox li .circle { width:160px; height:160px; }
    .loadBalancer-box3 .listbox li .circle .icon img { width:60px; }
    .loadBalancer-box3 .listbox li .txt { margin-top:10px; font-size:20px; }
    .loadBalancer-box3 .listbox li .icon-1,
    .loadBalancer-box3 .listbox li .icon-4 { width:65px; }
    .loadBalancer-box3 .listbox li .icon-1 img,
    .loadBalancer-box3 .listbox li .icon-4 img { max-width:100% }
    .loadBalancer-box3 .listbox .lb-box:before { width:60px; }
    .loadBalancer-box3 .listbox ul:before { left:24%; width:60px; }
    .loadBalancer-box3 .listbox ul:after { left:77%; width:90px; }
}
@media screen and (max-width:1024px){
    .loadBalancer-box { padding:100px 0; }
    .loadBalancer-box .listbox { margin-top:40px; }
    .loadBalancer-box1 .listbox li { width:calc((100% - 20px) / 2); padding:20px 10px; }
    .loadBalancer-box1 .listbox li .icon { width:170px; height:170px; }
    .loadBalancer-box1 .listbox li .txtbox { margin-top:25px; font-size:15px; }
    .loadBalancer-box2 .listbox li { padding:20px; }
    .loadBalancer-box2 .listbox li .txtbox dt { margin-top:15px; padding-bottom:10px; font-size:20px; }
    .loadBalancer-box2 .listbox li .txtbox dt:before { width:14px; }
    .loadBalancer-box2 .listbox li .txtbox dd { margin-top:10px; font-size:16px; }
    .loadBalancer-box3 .listbox ul { padding:80px 40px; flex-direction:column; gap:120px 0; }
    .loadBalancer-box3 .listbox li .circle { width:160px; height:160px; }
    .loadBalancer-box3 .listbox li .circle .icon img { width:60px; }
    .loadBalancer-box3 .listbox li .txt { font-size:18px; }
    .loadBalancer-box3 .listbox li .icon-1,
    .loadBalancer-box3 .listbox li .icon-4 { width:65px; display:flex; align-items:flex-start; gap:0 20px; justify-content:center; }
    .loadBalancer-box3 .listbox li .icon-1 img,
    .loadBalancer-box3 .listbox li .icon-4 img { max-width:100%; }
    .loadBalancer-box3 .listbox li .icon-1 img:not(:last-child),
    .loadBalancer-box3 .listbox li .icon-4 img:not(:last-child) { margin-bottom:0; }
    .loadBalancer-box3 .listbox .lb-box { max-width:400px; margin:0 auto; }
    .loadBalancer-box3 .listbox .lb-box:before { transform:translate(-50%, -50%) rotate(90deg); margin:0; }
    .loadBalancer-box3 .listbox ul:before { left:50%; top:22%; transform:translate(-50%, -50%) rotate(90deg); margin:0; }
    .loadBalancer-box3 .listbox ul:after { left:50%; top:77%; transform:translate(-50%, -50%) rotate(90deg); margin:0; }
}
@media screen and (max-width:760px){
    .loadBalancer-box1 .listbox ul,
    .loadBalancer-box2 .listbox ul { gap:10px; }
    .loadBalancer-box1 .listbox li { width:calc((100% - 10px) / 2); }
    .loadBalancer-box2 .listbox li { width:100%; }
    .loadBalancer-box2 .listbox li { padding:20px 30px; }
    .loadBalancer-box2 .listbox li .icon { margin:0 auto; }
    .loadBalancer-box2 .listbox li .txtbox { text-align:center; }
    .loadBalancer-box2 .listbox li .txtbox dt:before { left:50%; transform:translateX(-50%); }
}
@media screen and (max-width:640px){
    .loadBalancer-box { padding:80px 0; }
    .loadBalancer-box .listbox { margin-top:30px; }
    .loadBalancer-box1 .listbox li .icon { width:140px; height:140px; }
    .loadBalancer-box1 .listbox li .icon img { width:60px; }
    .loadBalancer-box1 .listbox li .txtbox { margin-top:20px; } 
}

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

/*** global ***/
.global-box > div:nth-child(1) { padding-bottom:110px; }
.global-velocity { padding:140px 0; }
.global-velocity * { word-break:keep-all; }
.global-velocity.bg { background:#fff; }
.global-velocity .listbox { margin-top:50px; }
.global-velocity.velocity-box1 .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.global-velocity.velocity-box1 .listbox li { width:calc((100% - 40px) / 3); border-radius:10px; border:1px solid #ddd; background:#f9f9f9; padding:33px 10px 33px 33px; display:flex; align-items:center; }
.global-velocity.velocity-box1 .listbox li .icon { width:98px; height:98px; border-radius:98px; background:#fff; display:flex; align-items:center; justify-content:center; }
.global-velocity.velocity-box1 .listbox li .txtbox { width:calc(100% - 98px); padding-left:38px; font-size:18px; font-weight:400; color:#222; line-height:1.5; letter-spacing:-0.02em; }
.global-velocity.velocity-box1 .listbox li .txtbox strong { font-weight:600; }
.global-velocity.velocity-box1 .imgbox { margin:50px auto 0; text-align:center; } 
.global-velocity.velocity-box1 .imgbox img { max-width:100%; }
.global-velocity.velocity-box3 .subTitle .txtbox { margin-top:10px; }
.global-velocity.velocity-box3 .listbox { margin:140px 0; }
.global-velocity.velocity-box3 .listbox .v-box { position:relative; margin:0 auto; max-width:540px; height:540px; display:flex; align-items:center; justify-content:center; }
.global-velocity.velocity-box3 .listbox .v-box:before { content:''; display:block; z-index:5; position:absolute; left:0; top:0; width:100%; height:100%; background:url(../img/global/velocity_line.png) no-repeat right center; }
.global-velocity.velocity-box3 .listbox .v-box .circle-box { display:flex; align-items:center; justify-content:center; text-align:center; background:var(--mainColor); width:300px; height:300px; border-radius:300px; } 
.global-velocity.velocity-box3 .listbox .v-box .circle-box .box { font-size:32px; font-weight:700; color:#fff; line-height:1.5; letter-spacing:-0.02em; }
.global-velocity.velocity-box3 .listbox .v-box .circle { z-index:8; position:absolute; display:flex; align-items:center; justify-content:center; text-align:center; background:#fff; width:200px; height:200px; border-radius:200px; border:1px solid var(--mainColor); filter:drop-shadow(0px 0px 20px rgba(5, 105, 255, 0.25)); }
.global-velocity.velocity-box3 .listbox .v-box .circle .txtbox { margin-top:15px; font-size:19px; font-weight:600; color:#222; line-height:1.5; letter-spacing:-0.02em;}
.global-velocity.velocity-box3 .listbox .v-box .circle-1 { right:-75px; top:-35px; }
.global-velocity.velocity-box3 .listbox .v-box .circle-2 { right:-75px; bottom:-35px; }
.global-velocity.velocity-box3 .listbox .v-box .circle-3 { left:-75px; bottom:-35px; }
.global-velocity.velocity-box3 .listbox .v-box .circle-4 { left:-75px; top:-35px; }
.global-velocity.velocity-box3 .linkbox { margin-top:50px; padding:0 115px; }
.global-velocity.velocity-box3 .linkbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.global-velocity.velocity-box3 .linkbox li { width:calc((100% - 60px) / 4); }
.global-velocity.velocity-box3 .linkbox li a { height:80px; width:100%; border-radius:80px; background:var(--mainColor); display:flex; align-items:center; justify-content:center;}
.global-velocity.velocity-box3 .linkbox li a span { display:inline-block; font-size:20px; font-weight:700; color:#fff; line-height:1.5; letter-spacing:-0.02em; padding:3px 36px 2px 0; background:url(../img/global/link_icon.png) no-repeat right center; }
@media screen and (max-width:1400px){
    .global-velocity.velocity-box3 .linkbox { margin-top:50px; padding:0; }
}
@media screen and (max-width:1280px){
    .global-velocity.velocity-box1 .listbox li { padding:20px 10px 20px 20px; }
    .global-velocity.velocity-box1 .listbox li .icon { width:98px; height:98px; }
    .global-velocity.velocity-box1 .listbox li .txtbox { width:calc(100% - 98px); padding-left:25px; }
    .global-velocity.velocity-box3 .linkbox li a { height:70px; }
    .global-velocity.velocity-box3 .linkbox li a span { font-size:19px; }
}
@media screen and (max-width:1024px){
    .global-box > div:nth-child(1) { padding-bottom:100px; }
    .global-velocity { padding:100px 0; }
    .global-velocity .listbox { margin-top:40px; }
    .global-velocity.velocity-box1 .listbox li { padding:20px 10px 20px 20px; }
    .global-velocity.velocity-box1 .listbox li .icon { width:75px; height:75px; }
    .global-velocity.velocity-box1 .listbox li .icon img { width:38px; }
    .global-velocity.velocity-box1 .listbox li .txtbox { width:calc(100% - 75px); padding-left:20px; font-size:16px; }
    .global-velocity.velocity-box3 .listbox { margin:100px 0; }
    .global-velocity.velocity-box3 .linkbox { margin-top:40px; }
    .global-velocity.velocity-box3 .linkbox li a { height:60px; }
    .global-velocity.velocity-box3 .linkbox li a span { font-size:18px; }
}
@media screen and (max-width:860px){
    .global-velocity.velocity-box1 .listbox ul { gap:10px; }
    .global-velocity.velocity-box1 .listbox li { width:calc((100% - 20px) / 3);  }
    .global-velocity.velocity-box2 .listbox li { width:calc((100% - 10px) / 2);  }
    .global-velocity.velocity-box3 .linkbox ul { gap:10px; }
    .global-velocity.velocity-box3 .linkbox li { width:calc((100% - 30px) / 4); }
}
@media screen and (max-width:760px){
    .global-velocity.velocity-box1 .listbox li { width:100%;  }
    .global-velocity.velocity-box3 .linkbox li { width:calc((100% - 10px) / 2); }
    .global-velocity.velocity-box3 .listbox .v-box { max-width:400px; height:400px; }
    .global-velocity.velocity-box3 .listbox .v-box:before { background-size:100% auto; }
    .global-velocity.velocity-box3 .listbox .v-box .circle-box { width:220px; height:220px; } 
    .global-velocity.velocity-box3 .listbox .v-box .circle-box .box { font-size:22px; }
    .global-velocity.velocity-box3 .listbox .v-box .circle { width:160px; height:160px; }
    .global-velocity.velocity-box3 .listbox .v-box .circle .icon img { width:60px; }
    .global-velocity.velocity-box3 .listbox .v-box .circle .txtbox { margin-top:12px; font-size:17px; } 
    .global-velocity.velocity-box3 .listbox .v-box .circle-1 { right:-65px; top:-30px; }
    .global-velocity.velocity-box3 .listbox .v-box .circle-2 { right:-65px; bottom:-30px; }
    .global-velocity.velocity-box3 .listbox .v-box .circle-3 { left:-65px; bottom:-30px; }
    .global-velocity.velocity-box3 .listbox .v-box .circle-4 { left:-65px; top:-30px; }
}
@media screen and (max-width:640px){
    .global-box > div:nth-child(1) { padding-bottom:80px; }
    .global-velocity { padding:80px 0; }
    .global-velocity .listbox { margin-top:30px; }
    .global-velocity.velocity-box3 .listbox { margin:80px 0; }
    .global-velocity.velocity-box3 .listbox .v-box { max-width:270px; height:270px; }
    .global-velocity.velocity-box3 .listbox .v-box .circle-box { width:150px; height:150px; } 
    .global-velocity.velocity-box3 .listbox .v-box .circle-box .box { font-size:18px; }
    .global-velocity.velocity-box3 .listbox .v-box .circle { width:125px; height:125px; }
    .global-velocity.velocity-box3 .listbox .v-box .circle .icon img { width:45px; }
    .global-velocity.velocity-box3 .listbox .v-box .circle .txtbox { margin-top:8px; font-size:15px; } 
    .global-velocity.velocity-box3 .listbox .v-box .circle-1 { right:-55px; top:-25px; }
    .global-velocity.velocity-box3 .listbox .v-box .circle-2 { right:-55px; bottom:-25px; }
    .global-velocity.velocity-box3 .listbox .v-box .circle-3 { left:-55px; bottom:-25px; }
    .global-velocity.velocity-box3 .listbox .v-box .circle-4 { left:-55px; top:-25px; }
    .global-velocity.velocity-box3 .linkbox { margin-top:30px; }
    .global-velocity.velocity-box3 .linkbox li a { height:55px; }
    .global-velocity.velocity-box3 .linkbox li a span { font-size:17px; padding:5px 30px 2px 0;  }
}

/* animation */
.global-velocity .listbox,
.global-velocity.velocity-box1 .imgbox,
.global-velocity.velocity-box3 .linkbox { opacity:0; }
.global-velocity.subOn .listbox,
.global-velocity.velocity-box1.subOn .imgbox,
.global-velocity.velocity-box3 .linkbox.subOn { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }


.global-hosting { padding:140px 0; overflow:hidden }
.global-hosting * { word-break:keep-all; }
.global-hosting.bg { background:#fff; }
.global-hosting .subTitle .txtbox { margin-top:10px; }
.global-hosting .listbox { margin-top:50px; z-index:2; position:relative; }
.global-hosting.global-hosting1 .listbox li:not(:last-child) { margin-bottom:60px; }
.global-hosting.global-hosting1 .listbox li { display:flex; align-items:center; gap:0 82px; }
.global-hosting.global-hosting1 .listbox li .imgbox { width:calc(50% - 82px); position:relative; }
.global-hosting.global-hosting1 .listbox li .imgbox:before { content: ""; display:block; padding-bottom:72.5%; }
.global-hosting.global-hosting1 .listbox li .imgbox img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; overflow:hidden; border-radius:15px; }
.global-hosting.global-hosting1 .listbox li .txtbox { width:50%; padding-left:82px; }
.global-hosting.global-hosting1 .listbox li .txtbox dt { font-size:26px; font-weight:700; color:#222; line-height:1.3; letter-spacing:-0.02em; }
.global-hosting.global-hosting1 .listbox li .txtbox dt strong { display:block; color:#eee; font-size:62px; font-weight:700; margin-bottom:38px; }
.global-hosting.global-hosting1 .listbox li .txtbox dd { margin-top:20px; font-size:20px; font-weight:300; color:#555; line-height:1.3; letter-spacing:-0.02em; }
.global-hosting.global-hosting1 .listbox li:nth-child(2n) { flex-direction:row-reverse; }
.global-hosting.global-hosting1 .listbox li:nth-child(2n) .txtbox { text-align:right; padding:0 82px 0 0; }
.global-hosting.global-hosting2 .listbox li:not(:last-child) { margin-bottom:10px; }
.global-hosting.global-hosting2 .listbox li { display:flex; align-items:center; padding:30px; background:#fff; border-radius:10px;}
.global-hosting.global-hosting2 .listbox li .num { width:40px; height:40px; border-radius:40px; display:flex; align-items:center; justify-content:center; background:var(--mainColor); font-size:14px; font-weight:700; color:#fff; line-height:1.3; letter-spacing:-0.02em; }
.global-hosting.global-hosting2 .listbox li .txtbox { width:calc(100% - 40px); padding-left:15px; font-size:20px; font-weight:300; color:#333; line-height:1.6; letter-spacing:-0.02em; }
.global-hosting.global-hosting2 .listbox li .txtbox strong { font-weight:600; }
.global-hosting.global-hosting3 .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.global-hosting.global-hosting3 .listbox li { width:calc((100% - 40px) / 3); border-radius:10px; border:1px solid #ddd; background:#f9f9f9; padding:33px 10px 33px 33px; display:flex; align-items:center; }
.global-hosting.global-hosting3 .listbox li .icon { width:98px; height:98px; border-radius:98px; background:#fff; display:flex; align-items:center; justify-content:center; }
.global-hosting.global-hosting3 .listbox li .txtbox { width:calc(100% - 98px); padding-left:38px; font-size:20px; font-weight:400; color:#222; line-height:1.5; letter-spacing:-0.02em; }
.global-hosting.global-hosting3 .listbox li .txtbox strong { font-weight:600; }
@media screen and (max-width:1400px){
    .global-hosting .listbox li .txtbox br { display:none }
}
@media screen and (max-width:1280px){
    .global-hosting.global-hosting1 .listbox li:not(:last-child) { margin-bottom:50px; }
    .global-hosting.global-hosting1 .listbox li { gap:0 35px; }
    .global-hosting.global-hosting1 .listbox li .imgbox { width:calc(50% - 35px); }
    .global-hosting.global-hosting1 .listbox li .txtbox { padding-left:35px; }
    .global-hosting.global-hosting1 .listbox li:nth-child(2n) .txtbox { padding:0 35px 0 0; }
    .global-hosting.global-hosting1 .listbox li .txtbox dt { font-size:22px; }
    .global-hosting.global-hosting1 .listbox li .txtbox dt strong { font-size:54px; margin-bottom:34px; }
    .global-hosting.global-hosting1 .listbox li .txtbox dd { margin-top:15px; font-size:18px; }
    .global-hosting.global-hosting3 .listbox li { padding:20px 10px 20px 20px; }
    .global-hosting.global-hosting3 .listbox li .icon { width:98px; height:98px; }
    .global-hosting.global-hosting3 .listbox li .txtbox { width:calc(100% - 98px); padding-left:25px; }
}
@media screen and (max-width:1024px){
    .global-hosting { padding:100px 0; }
    .global-hosting .listbox { margin-top:40px; }
    .global-hosting.global-hosting1 .listbox li:not(:last-child) { margin-bottom:40px; }
    .global-hosting.global-hosting1 .listbox li { gap:0 20px; }
    .global-hosting.global-hosting1 .listbox li .imgbox { width:calc(50% - 20px); }
    .global-hosting.global-hosting1 .listbox li .imgbox img { border-radius:10px;}
    .global-hosting.global-hosting1 .listbox li .txtbox { padding-left:20px; }
    .global-hosting.global-hosting1 .listbox li:nth-child(2n) .txtbox { padding:0 20px 0 0; }
    .global-hosting.global-hosting1 .listbox li .txtbox dt { font-size:20px; }
    .global-hosting.global-hosting1 .listbox li .txtbox dt strong { font-size:38px; margin-bottom:20px; }
    .global-hosting.global-hosting1 .listbox li .txtbox dd { margin-top:12px; font-size:16px; }
    .global-hosting.global-hosting2 .listbox li { padding:25px; }
    .global-hosting.global-hosting2 .listbox li .num { width:40px; height:40px; }
    .global-hosting.global-hosting2 .listbox li .txtbox { width:calc(100% - 40px); padding-left:15px; font-size:18px; }
    .global-hosting.global-hosting3 .listbox li { padding:20px 10px 20px 20px; }
    .global-hosting.global-hosting3 .listbox li .icon { width:75px; height:75px; }
    .global-hosting.global-hosting3 .listbox li .icon img { width:38px; }
    .global-hosting.global-hosting3 .listbox li .txtbox { width:calc(100% - 75px); padding-left:20px; font-size:16px; }
}
@media screen and (max-width:860px){
    .global-hosting.global-hosting1 .listbox li:not(:last-child) { margin-bottom:40px; }
    .global-hosting.global-hosting1 .listbox li { gap:0 20px; }
    .global-hosting.global-hosting1 .listbox li .imgbox { width:calc(50% - 20px); }
    .global-hosting.global-hosting1 .listbox li .txtbox { padding-left:20px; }
    .global-hosting.global-hosting1 .listbox li:nth-child(2n) .txtbox { padding:0 20px 0 0; }
    .global-hosting.global-hosting1 .listbox li .txtbox dt { font-size:18px; }
    .global-hosting.global-hosting1 .listbox li .txtbox dt strong { font-size:30px; margin-bottom:15px; }
    .global-hosting.global-hosting1 .listbox li .txtbox dd { margin-top:10px; font-size:15px; }
    .global-hosting.global-hosting3 .listbox ul { gap:10px; }
    .global-hosting.global-hosting3 .listbox li { width:calc((100% - 20px) / 3);  }
}
@media screen and (max-width:760px){
    .global-hosting.global-hosting3 .listbox li { width:100%; }
}
@media screen and (max-width:640px){
    .global-hosting { padding:80px 0; }
    .global-hosting .listbox { margin-top:30px; }
    .global-hosting.global-hosting1 .listbox li:not(:last-child) { margin-bottom:35px; }
    .global-hosting.global-hosting1 .listbox li { gap:10px; flex-wrap:wrap; }
    .global-hosting.global-hosting1 .listbox li .imgbox,
    .global-hosting.global-hosting1 .listbox li .txtbox { padding-left:0; width:100%; }
    .global-hosting.global-hosting1 .listbox li .imgbox:before { padding-bottom:56.5%; }
    .global-hosting.global-hosting1 .listbox li:nth-child(2n) { flex-direction:row; }
    .global-hosting.global-hosting1 .listbox li:nth-child(2n) .txtbox { padding:0; text-align:left; }
    .global-hosting.global-hosting1 .listbox li .txtbox dt { font-size:17px; }
    .global-hosting.global-hosting1 .listbox li .txtbox dt strong { font-size:26px; margin-bottom:13px; }
    .global-hosting.global-hosting2 .listbox li { padding:20px; }
    .global-hosting.global-hosting2 .listbox li .num { width:30px; height:30px; font-size:12px; }
    .global-hosting.global-hosting2 .listbox li .txtbox { width:calc(100% - 30px); padding-left:15px; font-size:16px; }
}

/* animation */
.global-hosting .listbox { opacity:0; }
.global-hosting.subOn .listbox { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }
.global-hosting.global-hosting1 .listbox li .txtbox dt,
.global-hosting.global-hosting1 .listbox li .txtbox dd { opacity:0; }
.global-hosting.global-hosting1 .listbox  { opacity:1; animation:infinite; }
.global-hosting.global-hosting1 .listbox li.subOn .txtbox dt { animation:ani_2 0.8s 0.4s; animation-fill-mode:both; }
.global-hosting.global-hosting1 .listbox li.subOn .txtbox dd { animation:ani_2 0.8s 0.7s; animation-fill-mode:both; }
.global-hosting.global-hosting1 .listbox li:nth-child(2n).subOn .txtbox dt { animation:ani_1 0.8s 0.4s; animation-fill-mode:both; }
.global-hosting.global-hosting1 .listbox li:nth-child(2n).subOn .txtbox dd { animation:ani_1 0.8s 0.7s; animation-fill-mode:both; }
.global-hosting.global-hosting1 .listbox li .imgbox:after { content:""; display:block; width:100%; height:100%; background:#fff; position:absolute; right:0; top:0; }
.global-hosting.global-hosting1 .listbox li:nth-child(2n).subOn .imgbox:after { left:0; }
.global-hosting.global-hosting1 .listbox li.subOn .imgbox:after { animation:ani_w100 1.2s 0.8s; animation-fill-mode:both; }
@media screen and (max-width:640px){
    .global-hosting.global-hosting1 .listbox li:nth-child(2n).subOn .txtbox dt { animation:ani_2 0.8s 0.4s; animation-fill-mode:both; }
    .global-hosting.global-hosting1 .listbox li:nth-child(2n).subOn .txtbox dd { animation:ani_2 0.8s 0.7s; animation-fill-mode:both; }
    .global-hosting.global-hosting1 .listbox li:nth-child(2n).subOn .imgbox:after { left:unset; right:0; }
}


/*** media ***/
.media-box > div:nth-child(1) { padding-bottom:110px; }
.media-streaming { padding:140px 0; overflow:hidden }
.media-streaming * { word-break:keep-all; }
.media-streaming.bg { background:#fff; }
.media-streaming .subTitle .txtbox { margin-top:10px; }
.media-streaming .listbox { margin-top:50px; z-index:2; position:relative; }
.media-streaming.streaming-box1 .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.media-streaming.streaming-box1 .listbox li { width:calc((100% - 60px) / 4); border-radius:15px; background:#f9f9f9; padding:50px 10px 40px 50px; }
.media-streaming.streaming-box1 .listbox li .icon { width:102px; height:102px; border-radius:102px; background:#fff; display:flex; align-items:center; justify-content:center; }
.media-streaming.streaming-box1 .listbox li .txtbox { margin-top:25px; font-size:20px; font-weight:400; color:#222; line-height:1.5; letter-spacing:-0.02em; }
.media-streaming.streaming-box1 .listbox li .txtbox strong { font-weight:600; }
.media-streaming.streaming-box2 .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.media-streaming.streaming-box2 .listbox li { width:calc((100% - 40px) / 3); border-radius:15px; background:#fff; padding:35px 10px 45px 50px; }
.media-streaming.streaming-box2 .listbox li .icon { width:102px; height:102px; border-radius:102px; background:#f9f9f9; display:flex; align-items:center; justify-content:center; }
.media-streaming.streaming-box2 .listbox li .txtbox { margin-top:20px; font-size:18px; font-weight:400; color:#222; line-height:1.5; letter-spacing:-0.02em; }
.media-streaming.streaming-box2 .listbox li .txtbox strong { font-weight:600; }
.media-streaming.streaming-box3 .listbox:before { content:''; display:block; position:absolute; left:0; top:50%; width:100%; z-index:5; height:1px; background:var(--mainColor); }
.media-streaming.streaming-box3 .listbox .s-box { position:relative; padding:103px 0; margin-top:100px; display:flex; flex-wrap:wrap; gap:80px; }
.media-streaming.streaming-box3 .listbox .s-box:before { content:''; display:block; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:447px; height:447px; border-radius:521px; background:#fff; border:74px solid #f2f6fa; }
.media-streaming.streaming-box3 .listbox .s-box .circle-box { position:relative; z-index:5; width:calc((100% - 240px) / 4); }
.media-streaming.streaming-box3 .listbox .s-box .circle-box:before { content:''; display:block; padding-bottom:100%; }
.media-streaming.streaming-box3 .listbox .s-box .circle-box .box { position:absolute; left:0; top:0; width:100%; height:100%; border-radius:100%; border:1px solid var(--mainColor); background:#fff; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.media-streaming.streaming-box3 .listbox .s-box .circle-box .box .txtbox { margin-top:24px; font-size:18px; font-weight:600; color:#222; line-height:1.5; letter-spacing:-0.02em; }
.media-streaming.streaming-box3 .listbox .s-box .info { white-space:nowrap; position:absolute; top:calc(50% + 225px); transform:translate(-50%, -50%); height:56px; border-radius:56px; background:var(--mainColor); font-size:17px; font-weight:600; color:#fff; line-height:1.3; letter-spacing:-0.02em; text-align:center; display:flex; align-items:center; padding:0 30px; }
.media-streaming.streaming-box3 .listbox .s-box .info span { position:absolute; left:50%; transform:translateX(-50%); top:-18px; z-index:5; width:35px; height:35px; border-radius:35px; background:#fff; border:2px solid var(--mainColor); font-size:14px; font-weight:600; color:var(--mainColor); line-height:1.5; letter-spacing:-0.02em; display:flex; align-items:center; justify-content:center; }
.media-streaming.streaming-box3 .listbox .s-box .info:after { content:''; display:block; position:absolute; top:-206px; left:50%; transform:translateX(-50%); width:11px; height:17px; background:url(../img/media/icon_arr.png) no-repeat right center; }
.media-streaming.streaming-box3 .listbox .s-box .info:before { content:''; display:block; position:absolute; top:-200px; left:50%; transform:translateX(-50%); width:1px; height:200px; background:url(../img/media/icon_line_p.png) no-repeat right center; }
.media-streaming.streaming-box3 .listbox .s-box .info-1 { left:25%; margin-left:-18px; }
.media-streaming.streaming-box3 .listbox .s-box .info-2 { left:50%; }
.media-streaming.streaming-box3 .listbox .s-box .info-3 { left:75%; margin-left:18px;}
@media screen and (max-width:1280px){
    .media-streaming .listbox li .txtbox br { display:none }
    .media-streaming.streaming-box3 .listbox .s-box { padding:100px 0; margin-top:80px; gap:60px; }
    .media-streaming.streaming-box3 .listbox .s-box:before { width:400px; height:400px; border:60px solid #f2f6fa; }
    .media-streaming.streaming-box3 .listbox .s-box .circle-box { width:calc((100% - 180px) / 4); }
    .media-streaming.streaming-box3 .listbox .s-box .info { top:calc(50% + 180px); }
    .media-streaming.streaming-box3 .listbox .s-box .info:after { top:-163px; } 
    .media-streaming.streaming-box3 .listbox .s-box .info:before { top:-155px; height:155px; }
    .media-streaming.streaming-box3 .listbox .s-box .info { height:50px; padding:0 20px; } 
}
@media screen and (max-width:1024px){
    .media-streaming { padding:100px 0; }
    .media-streaming .listbox { margin-top:40px; }
    .media-streaming.streaming-box1 .listbox li { padding:30px 10px 30px 30px; }
    .media-streaming.streaming-box1 .listbox li .txtbox { margin-top:22px; font-size:18px; }
    .media-streaming.streaming-box2 .listbox li { padding:30px 10px 30px 30px; }
    .media-streaming.streaming-box2 .listbox li .txtbox { margin-top:16px; font-size:16px; }
    .media-streaming.streaming-box1 .listbox li { width:calc((100% - 20px) / 2); }
    .media-streaming.streaming-box3 .listbox .s-box { padding:100px 0; margin-top:80px; gap:50px; }
    .media-streaming.streaming-box3 .listbox .s-box:before { width:360px; height:360px; border:50px solid #f2f6fa; }
    .media-streaming.streaming-box3 .listbox .s-box .circle-box { width:calc((100% - 150px) / 4); }
    .media-streaming.streaming-box3 .listbox .s-box .circle-box .box .txtbox { margin-top:15px; font-size:16px; }
    .media-streaming.streaming-box3 .listbox .s-box .info { top:calc(50% + 177px); }
    .media-streaming.streaming-box3 .listbox .s-box .info { font-size:16px; height:45px; padding:0 15px; } 
}
@media screen and (max-width:860px){
    .media-streaming.streaming-box1 .listbox ul,
    .media-streaming.streaming-box2 .listbox ul { gap:10px; }
    .media-streaming.streaming-box1 .listbox li .icon,
    .media-streaming.streaming-box2 .listbox li .icon { margin:0 auto; }
    .media-streaming.streaming-box2 .listbox li { width:100%; }
    .media-streaming.streaming-box3 .listbox:before { left:50%; top:0; width:1px; height:100%;  }
    .media-streaming.streaming-box3 .listbox .s-box { width:320px; padding:50px 0; margin:0 auto; gap:100px; }
    .media-streaming.streaming-box3 .listbox .s-box .circle-box { width:220px; margin:0 auto; }
    .media-streaming.streaming-box3 .listbox .s-box:before { display:none }
    .media-streaming.streaming-box3 .listbox .s-box .info { top:unset; transform:translate(0, -50%); font-size:15px; height:auto; padding:10px 13px; white-space:inherit; }
    .media-streaming.streaming-box3 .listbox .s-box .info-1 { left:195px; top:25%; margin:0; }
    .media-streaming.streaming-box3 .listbox .s-box .info-2 { left:195px; top:50%; margin:0; }
    .media-streaming.streaming-box3 .listbox .s-box .info-3 { left:195px; top:75%; margin:0; }
    .media-streaming.streaming-box3 .listbox .s-box .info span { left:-20px; transform:translate(0, -50%); top:50%; width:30px; height:30px; font-size:13px; }
    .media-streaming.streaming-box3 .listbox .s-box .info:after { transform:translate(0, -50%) rotate(90deg); top:50%; left:-40px; }
    .media-streaming.streaming-box3 .listbox .s-box .info:before { display:none }
}
@media screen and (max-width:640px){
    .media-streaming { padding:80px 0; }
    .media-streaming .listbox { margin-top:30px; }
    .media-streaming.streaming-box1 .listbox li { padding:20px 10px 20px 20px; }
    .media-streaming.streaming-box1 .listbox li .txtbox { margin-top:20px; font-size:16px; text-align:center }
    .media-streaming.streaming-box2 .listbox li { padding:20px 10px 20px 20px; }
    .media-streaming.streaming-box2 .listbox li .txtbox { margin-top:16px; font-size:15px; }
}


/* animation */
.media-streaming .listbox { opacity:0; }
.media-streaming.subOn .listbox { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }


.media-wowza { padding:140px 0; overflow:hidden }
.media-wowza * { word-break:keep-all; }
.media-wowza.bg { background:#fff; }
.media-wowza .listbox { margin-top:50px; z-index:2; position:relative; }
.media-wowza.wowza-box1 .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.media-wowza.wowza-box1 .listbox li { width:calc((100% - 40px) / 3); border-radius:15px; background:#f9f9f9; padding:33px 10px 33px 33px; display:flex; align-items:center; }
.media-wowza.wowza-box1 .listbox li .icon { width:98px; height:98px; border-radius:98px; background:#fff; display:flex; align-items:center; justify-content:center; }
.media-wowza.wowza-box1 .listbox li .txtbox { width:calc(100% - 98px); padding-left:38px; font-size:20px; font-weight:400; color:#222; line-height:1.5; letter-spacing:-0.02em; }
.media-wowza.wowza-box1 .listbox li .txtbox strong { font-weight:600; }
.media-wowza.wowza-box2 .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.media-wowza.wowza-box2 .listbox li { width:calc((100% - 40px) / 3); border-radius:15px; background:#fff; padding:33px 10px 33px 53px; display:flex; align-items:center; }
.media-wowza.wowza-box2 .listbox li .icon { width:102px; height:102px; border-radius:102px; background:#f9f9f9; display:flex; align-items:center; justify-content:center; }
.media-wowza.wowza-box2 .listbox li .txtbox dt { position:relative; margin-top:20px; font-size:24px; font-weight:700; color:#222; line-height:1.5; letter-spacing:-0.02em; padding-bottom:15px; }
.media-wowza.wowza-box2 .listbox li .txtbox dt:before { content:''; display:block; position:absolute; width:19px; height:1px; left:0; bottom:0; background:#000; }
.media-wowza.wowza-box2 .listbox li .txtbox dd { margin-top:15px; font-size:18px; font-weight:400; color:#444; line-height:1.5; letter-spacing:-0.02em; }
.media-wowza.wowza-box3 .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.media-wowza.wowza-box3 .listbox li { width:calc((100% - 60px) / 4); border-radius:10px; background:#fff; border:1px solid #ddd; }
.media-wowza.wowza-box3 .listbox li .imgbox img { width:100%; }
.media-wowza.wowza-box3 .listbox li .txtbox { text-align:center; padding:30px 20px 35px; }
.media-wowza.wowza-box3 .listbox li .txtbox dt { font-size:24px; font-weight:700; color:#222; line-height:1.5; letter-spacing:-0.02em; }
.media-wowza.wowza-box3 .listbox li .txtbox dd { margin-top:20px; font-size:18px; font-weight:400; color:#444; line-height:1.5; letter-spacing:-0.02em; }
@media screen and (max-width:1280px){
    .media-wowza .listbox li .txtbox br { display:none }
}
@media screen and (max-width:1024px){
    .media-wowza { padding:100px 0; }
    .media-wowza .listbox { margin-top:40px; }
    .media-wowza.wowza-box1 .listbox li { padding:25px 10px 25px 25px; }
    .media-wowza.wowza-box1 .listbox li .txtbox { padding-left:25px; font-size:18px; }
    .media-wowza.wowza-box2 .listbox li { padding:25px 10px 25px 25px; }
    .media-wowza.wowza-box2 .listbox li .txtbox dt { margin-top:20px; font-size:20px; padding-bottom:12px; }
    .media-wowza.wowza-box2 .listbox li .txtbox dd { margin-top:12px; font-size:16px; }
    .media-wowza.wowza-box3 .listbox li .txtbox { padding:20px 15px 25px; }
    .media-wowza.wowza-box3 .listbox li .txtbox dt { font-size:20px; }
    .media-wowza.wowza-box3 .listbox li .txtbox dd { margin-top:15px; font-size:16px; }
}
@media screen and (max-width:960px){
    .media-wowza.wowza-box1 .listbox ul,
    .media-wowza.wowza-box2 .listbox ul,
    .media-wowza.wowza-box3 .listbox ul { gap:10px; }
    .media-wowza.wowza-box1 .listbox li,
    .media-wowza.wowza-box2 .listbox li { width:calc((100% - 10px) / 2); }
    .media-wowza.wowza-box3 .listbox li { width:calc((100% - 10px) / 2); }
}
@media screen and (max-width:760px){
    .media-wowza.wowza-box1 .listbox li { width:100%; }
}
@media screen and (max-width:640px){
    .media-wowza { padding:80px 0; }
    .media-wowza .listbox { margin-top:30px; }
    .media-wowza.wowza-box1 .listbox li { padding:20px 10px 25px 20px; }
    .media-wowza.wowza-box1 .listbox li .txtbox { padding-left:20px; font-size:16px; }
    .media-wowza.wowza-box2 .listbox li { padding:25px 10px 25px 25px; }
    .media-wowza.wowza-box2 .listbox li .txtbox dt { margin-top:20px; font-size:18px; padding-bottom:10px; }
    .media-wowza.wowza-box2 .listbox li .txtbox dd { margin-top:10px; font-size:15px; }
    .media-wowza.wowza-box3 .listbox li .txtbox { padding:15px 10px 20px; }
    .media-wowza.wowza-box3 .listbox li .txtbox dt { font-size:18px; }
    .media-wowza.wowza-box3 .listbox li .txtbox dd { margin-top:12px; font-size:15px; }
}
@media screen and (max-width:480px){
    .media-wowza.wowza-box2 .listbox li,
    .media-wowza.wowza-box3 .listbox li { width:100%; }
    .media-wowza.wowza-box2 .listbox li .icon { margin:0 auto; }
    .media-wowza.wowza-box2 .listbox li .txtbox { text-align:center; }
    .media-wowza.wowza-box2 .listbox li .txtbox dt:before { left:50%; transform:translateX(-50%);}
}
/* animation */
.media-wowza .listbox { opacity:0; }
.media-wowza.subOn .listbox { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }



.media-webrtc { padding:140px 0; overflow:hidden }
.media-webrtc * { word-break:keep-all; }
.media-webrtc.bg { background:#fff; }
.media-webrtc .listbox { margin-top:50px; z-index:2; position:relative; }
.media-webrtc.webrtc-box1 .listbox ul { display:flex; flex-wrap:wrap; gap:30px; }
.media-webrtc.webrtc-box1 .listbox li { width:calc((100% - 30px) / 2); border-radius:15px; }
.media-webrtc.webrtc-box1 .listbox li .video-box { width:100%; position:relative; }
.media-webrtc.webrtc-box1 .listbox li .video-box .movbox { position:relative; width:100%; border-radius:15px; border:4px solid #fff; }
.media-webrtc.webrtc-box1 .listbox li .video-box .movbox:after { content:''; display:block; padding-top:56.5%; }
.media-webrtc.webrtc-box1 .listbox li .video-box iframe { position:absolute; left:0; top:0; width:100%; height:100%; border-radius:15px; }
.media-webrtc.webrtc-box1 .listbox li .video-box video { position:absolute; left:0; top:0; width:100%; height:100%; border-radius:15px; }
.media-webrtc.webrtc-box1 .listbox li .video-box .imgbox { position:absolute; left:0; top:0; width:100%; height:100%; z-index:3; background-position:center; background-size:cover; border-radius:11px; }
.media-webrtc.webrtc-box1 .listbox li .video-box .play { cursor:pointer; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:5; }
.media-webrtc.webrtc-box1 .listbox li .txtbox { text-align:center; margin-top:27px; font-size:22px; font-weight:700; color:#333; line-height:1.3; letter-spacing:-0.02em;}
.media-webrtc.webrtc-box2 .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.media-webrtc.webrtc-box2 .listbox li { width:calc((100% - 40px) / 3); border-radius:15px; background:#fff; padding:33px 10px 33px 53px; display:flex; align-items:center; }
.media-webrtc.webrtc-box2 .listbox li .icon { width:102px; height:102px; border-radius:102px; background:#f9f9f9; display:flex; align-items:center; justify-content:center; }
.media-webrtc.webrtc-box2 .listbox li .txtbox dt { position:relative; margin-top:20px; font-size:24px; font-weight:700; color:#222; line-height:1.5; letter-spacing:-0.02em; padding-bottom:15px; }
.media-webrtc.webrtc-box2 .listbox li .txtbox dt:before { content:''; display:block; position:absolute; width:19px; height:1px; left:0; bottom:0; background:#000; }
.media-webrtc.webrtc-box2 .listbox li .txtbox dd { margin-top:15px; font-size:18px; font-weight:400; color:#444; line-height:1.5; letter-spacing:-0.02em; }
.media-webrtc.webrtc-box3 .listbox ul { display:flex; flex-wrap:wrap; gap:10px; }
.media-webrtc.webrtc-box3 .listbox li { width:100%; padding:30px; display:flex; align-items:center; border-radius:10px; background:#f8f8f8; }
.media-webrtc.webrtc-box3 .listbox li .num { width:40px; height:40px; background:var(--mainColor); border-radius:40px; font-size:14px; font-weight:700; color:#fff; line-height:1.5; letter-spacing:-0.02em; display:flex; align-items:center; justify-content:center; }
.media-webrtc.webrtc-box3 .listbox li .txtbox { width:calc(100% - 40px); padding-left:15px; font-size:20px; font-weight:300; color:#333; line-height:1.5; letter-spacing:-0.02em; }
.media-webrtc.webrtc-box3 .listbox li .txtbox strong { font-weight:600; }
@media screen and (max-width:1280px){
    .media-webrtc .listbox li .txtbox br { display:none }
}
@media screen and (max-width:1024px){
    .media-webrtc { padding:100px 0; }
    .media-webrtc .listbox { margin-top:40px; }
    .media-webrtc.webrtc-box1 .listbox ul { gap:20px; }
    .media-webrtc.webrtc-box1 .listbox li { width:calc((100% - 20px) / 2); }
    .media-webrtc.webrtc-box1 .listbox li .txtbox { margin-top:20px; font-size:20px; }
    .media-webrtc.webrtc-box2 .listbox li { padding:25px 10px 25px 25px; }
    .media-webrtc.webrtc-box2 .listbox li .txtbox dt { margin-top:20px; font-size:20px; padding-bottom:12px; }
    .media-webrtc.webrtc-box2 .listbox li .txtbox dd { margin-top:12px; font-size:16px; }
    .media-webrtc.webrtc-box3 .listbox li { padding:25px; }
    .media-webrtc.webrtc-box3 .listbox li .num { width:36px; height:36px; font-size:14px; }
    .media-webrtc.webrtc-box3 .listbox li .txtbox { width:calc(100% - 36px); padding-left:13px; font-size:18px; }
}
@media screen and (max-width:960px){
    .media-webrtc.webrtc-box1 .listbox ul,
    .media-webrtc.webrtc-box2 .listbox ul { gap:10px; }
    .media-webrtc.webrtc-box2 .listbox li { width:calc((100% - 10px) / 2); }
    .media-webrtc.webrtc-box1 .listbox ul { gap:10px; }
    .media-webrtc.webrtc-box1 .listbox li { width:calc((100% - 10px) / 2); }
}
@media screen and (max-width:640px){
    .media-webrtc { padding:80px 0; }
    .media-webrtc .listbox { margin-top:30px; }
    .media-webrtc.webrtc-box1 .listbox li { width:100%; }
    .media-webrtc.webrtc-box1 .listbox li .play img { width:50px; }
    .media-webrtc.webrtc-box1 .listbox li .txtbox { margin-top:15px; margin-bottom:15px; font-size:18px; }
    .media-webrtc.webrtc-box2 .listbox li { padding:25px 10px 25px 25px; }
    .media-webrtc.webrtc-box2 .listbox li .txtbox dt { margin-top:20px; font-size:18px; padding-bottom:10px; }
    .media-webrtc.webrtc-box2 .listbox li .txtbox dd { margin-top:10px; font-size:15px; }
    .media-webrtc.webrtc-box3 .listbox li { padding:20px; }
    .media-webrtc.webrtc-box3 .listbox li .num { width:32px; height:32px; font-size:13px; }
    .media-webrtc.webrtc-box3 .listbox li .txtbox { width:calc(100% - 32px); padding-left:10px; font-size:16px; }
}
/* animation */
.media-webrtc .listbox { opacity:0; }
.media-webrtc.subOn .listbox { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }

/** cloud **/
.cloud-box > div:nth-child(1) { padding-bottom:110px; }
.cloud-managed { padding:140px 0; }
.cloud-managed * { word-break:keep-all; }
.cloud-managed.bg { background:#fff; }
.cloud-managed .listbox { margin-top:50px; z-index:2; position:relative;}
.cloud-managed.cloud-managed-box1 { padding:0; }
.cloud-managed.cloud-managed-box1 .dataTable { margin-top:0 }
.cloud-managed.cloud-managed-box2 .listbox:before { content:''; display:block; position:absolute; top:50%; left:0; width:100%; height:1px; transform:translateY(-50%); margin-top:-5px; background:var(--mainColor); }
.cloud-managed.cloud-managed-box2 .listbox .box { z-index:5; position:relative; border-radius:300px; background:#fff; border:1px solid var(--mainColor); display:flex; align-items:center; justify-content:center;  }
.cloud-managed.cloud-managed-box2 .listbox .box ul { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; text-align:center; width:100%; }
.cloud-managed.cloud-managed-box2 .listbox .box li { position:relative; }
.cloud-managed.cloud-managed-box2 .listbox .box li:before { content:''; display:block; padding-bottom:100%; }
.cloud-managed.cloud-managed-box2 .listbox .box li .circle-box { position:absolute; left:0; top:0; width:100%; height:100%; border-radius:500px; background:#f2f6fa; display:flex; align-items:center; justify-content:center; }
.cloud-managed.cloud-managed-box2 .listbox-1 .box { padding:44px 73px; }
.cloud-managed.cloud-managed-box2 .listbox-2 .box { padding:70px 45px; }
.cloud-managed.cloud-managed-box2 .listbox-1 .box ul { gap:50px; }
.cloud-managed.cloud-managed-box2 .listbox-2 .box ul { gap:45px; }
.cloud-managed.cloud-managed-box2 .listbox-1 .box li { width:calc((100% - 150px) / 4); }
.cloud-managed.cloud-managed-box2 .listbox-2 .box li { width:calc((100% - 180px) / 5); }
.cloud-managed.cloud-managed-box2 .listbox-2 { margin-top:115px; }
.cloud-managed.cloud-managed-box2 .listbox-2 p.tit { position:absolute; left:50%; top:-38px; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; width:365px; height:77px; background:#444; border-radius:80px; font-size:30px; font-weight:600; color:#fff; line-height:1.3; letter-spacing:-0.02em; }
.cloud-managed.cloud-managed-box2 .listbox-2 .box li .circle-box { flex-direction:column; padding:0 20px;}
.cloud-managed.cloud-managed-box2 .listbox-2 .box li .circle-box .num { font-family:var(--mainFont); color:var(--mainColor); font-size:18px; font-weight:600; line-height:1.5; margin-bottom:15px; }
.cloud-managed.cloud-managed-box2 .listbox-2 .box li .circle-box .icon { margin:0 auto; min-height:50px; }
.cloud-managed.cloud-managed-box2 .listbox-2 .box li .circle-box .txtbox { margin-top:10px; font-size:18px; font-weight:500; color:#222; line-height:1.5; min-height:54px; }
.cloud-managed.cloud-managed-box3 .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.cloud-managed.cloud-managed-box3 .listbox li { width:calc((100% - 40px) / 3); border-radius:15px; background:#fff; padding:35px 10px 75px 50px; }
.cloud-managed.cloud-managed-box3 .listbox li .icon { width:102px; height:102px; border-radius:102px; background:#f9f9f9; display:flex; align-items:center; justify-content:center; }
.cloud-managed.cloud-managed-box3 .listbox li .txtbox { margin-top:20px; font-size:18px; font-weight:400; color:#222; line-height:1.5; letter-spacing:-0.02em; }
@media screen and (max-width:1500px){
    .cloud-managed.cloud-managed-box3 .listbox li .txtbox br { display:none }
}
@media screen and (max-width:1280px){
    .cloud-managed .listbox li .txtbox br { display:none }
    .cloud-managed.cloud-managed-box2 .listbox-1 .box { padding:30px 50px; }
    .cloud-managed.cloud-managed-box2 .listbox-2 .box { padding:60px 30px; }
    .cloud-managed.cloud-managed-box2 .listbox-1 .box ul { gap:30px; }
    .cloud-managed.cloud-managed-box2 .listbox-2 .box ul { gap:25px; }
    .cloud-managed.cloud-managed-box2 .listbox-1 .box li { width:calc((100% - 90px) / 4); }
    .cloud-managed.cloud-managed-box2 .listbox-2 .box li { width:calc((100% - 100px) / 5); }
    .cloud-managed.cloud-managed-box2 .listbox-2 p.tit { top:-35px; width:360px; height:70px; font-size:30px; }
    .cloud-managed.cloud-managed-box2 .listbox-2 .box li .circle-box .num { font-size:17px; margin-bottom:10px; }
    .cloud-managed.cloud-managed-box2 .listbox-2 .box li .circle-box .icon { min-height:42px; }
    .cloud-managed.cloud-managed-box2 .listbox-2 .box li .circle-box .icon img { width:38px; }
    .cloud-managed.cloud-managed-box2 .listbox-2 .box li .circle-box .txtbox { margin-top:6px; font-size:17px; min-height:52px; }
    .cloud-managed.cloud-managed-box3 .listbox li {padding:30px 10px 60px 40px; } 
}
@media screen and (max-width:1024px){
    .cloud-box > div:nth-child(1) { padding-bottom:100px; }
    .cloud-managed { padding:100px 0; }
    .cloud-managed .listbox { margin-top:40px; }
    .cloud-managed .listbox li .txtbox br { display:none }
    .cloud-managed.cloud-managed-box2 .listbox-2 { margin-top:100px; }
    .cloud-managed.cloud-managed-box2 .listbox-1 .box { padding:40px 30px; }
    .cloud-managed.cloud-managed-box2 .listbox-2 .box { padding:60px 100px; }
    .cloud-managed.cloud-managed-box2 .listbox-1 .box ul { gap:20px; }
    .cloud-managed.cloud-managed-box2 .listbox-2 .box ul { gap:20px; }
    .cloud-managed.cloud-managed-box2 .listbox-1 .box li { width:calc((100% - 60px) / 4); }
    .cloud-managed.cloud-managed-box2 .listbox-2 .box li { width:calc((100% - 40px) / 3); }
    .cloud-managed.cloud-managed-box2 .listbox-2 p.tit { top:-34px; width:320px; height:68px; font-size:26px; }
    .cloud-managed.cloud-managed-box2 .listbox-2 .box li .circle-box .num { font-size:16px; margin-bottom:10px; }
    .cloud-managed.cloud-managed-box2 .listbox-2 .box li .circle-box .icon { min-height:38px; }
    .cloud-managed.cloud-managed-box2 .listbox-2 .box li .circle-box .icon img { width:34px; }
    .cloud-managed.cloud-managed-box2 .listbox-2 .box li .circle-box .txtbox { margin-top:8px; font-size:16px; min-height:50px; }
    .cloud-managed.cloud-managed-box3 .listbox li {padding:30px 10px 50px 30px; } 
    .cloud-managed.cloud-managed-box3 .listbox li .txtbox { margin-top:13px; font-size:16px; }
}
@media screen and (max-width:960px){
    .cloud-managed.cloud-managed-box2 .listbox .box { border-radius:100px; }
    .cloud-managed.cloud-managed-box2 .listbox-1 .box { padding:40px 100px; }
    .cloud-managed.cloud-managed-box2 .listbox-1 .box li { width:calc((100% - 20px) / 2); }
    .cloud-managed.cloud-managed-box3 .listbox li { width:calc((100% - 20px) / 2); }
}
@media screen and (max-width:760px){
    .cloud-managed.cloud-managed-box2 .listbox-1 .box { padding:40px 80px; }
    .cloud-managed.cloud-managed-box2 .listbox-2 .box { padding:60px 80px; }
    .cloud-managed.cloud-managed-box2 .listbox-2 p.tit { top:-28px; width:280px; height:56px; font-size:20px; }
    .cloud-managed.cloud-managed-box2 .listbox-2 .box li { width:calc((100% - 20px) / 2); }
    .cloud-managed.cloud-managed-box3 .listbox ul { gap:10px; }
    .cloud-managed.cloud-managed-box3 .listbox li { width:calc((100% - 10px) / 2); }
}
@media screen and (max-width:640px){
    .cloud-box > div:nth-child(1) { padding-bottom:80px; }
    .cloud-managed { padding:80px 0; }
    .cloud-managed .listbox { margin-top:30px; }
    .cloud-managed.cloud-managed-box2 .listbox-2 { margin-top:80px; }
    .cloud-managed.cloud-managed-box2 .listbox .box { border-radius:50px; }
    .cloud-managed.cloud-managed-box2 .listbox-1 .box { padding:30px 20px; }
    .cloud-managed.cloud-managed-box2 .listbox-1 .box .circle-box img { width:50% }
    .cloud-managed.cloud-managed-box2 .listbox-2 .box { padding:50px 20px; }
    .cloud-managed.cloud-managed-box2 .listbox-2 .box li { width:calc((100% - 20px) / 2); }
    .cloud-managed.cloud-managed-box2 .listbox-2 p.tit { top:-25px; width:220px; height:50px; font-size:18px; }
    .cloud-managed.cloud-managed-box2 .listbox-2 .box li .circle-box .num { font-size:16px; margin-bottom:10px; }
    .cloud-managed.cloud-managed-box2 .listbox-2 .box li .circle-box .icon { min-height:34px; }
    .cloud-managed.cloud-managed-box2 .listbox-2 .box li .circle-box .icon img { width:32px; }
    .cloud-managed.cloud-managed-box2 .listbox-2 .box li .circle-box .txtbox { margin-top:5px; font-size:15px; min-height:45px; }
    .cloud-managed.cloud-managed-box3 .listbox li {padding:20px 10px 30px 20px; width:100%; } 
    .cloud-managed.cloud-managed-box3 .listbox li .txtbox { margin-top:10px; font-size:15px; }
    .cloud-managed.cloud-managed-box3 .listbox li .icon { margin:0 auto; }
}

/* animation */
.cloud-managed .listbox { opacity:0; }
.cloud-managed.subOn .listbox { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }


.cloud-migration { padding:140px 0; }
.cloud-migration * { word-break:keep-all; }
.cloud-migration.bg { background:#fff; }
.cloud-migration .listbox { margin-top:50px; z-index:2; position:relative;}
.cloud-migration.migration-box1 { padding-top:0; }
.cloud-migration.migration-box1 .topbox .box { display:flex; align-items:center; width:100%; }
.cloud-migration.migration-box1 .topbox .box-1 { justify-content:space-between; }
.cloud-migration.migration-box1 .topbox .icon { width:98px; height:98px; border-radius:98px; background:#f5f5f5; display:flex; align-items:center; justify-content:center; }
.cloud-migration.migration-box1 .topbox .box-1 .icon { background:#fff; }
.cloud-migration.migration-box1 .topbox .box-1 .txt { width:calc(100% - 196px - 40px); text-align:center; margin:0 20px; padding:0 0 20px 20px; color:#fff; font-family:var(--mainFont); font-weight:400; font-size:17px; background:url(../img/cloud/migration_arr1.png) no-repeat right bottom; }
.cloud-migration.migration-box1 .topbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.cloud-migration.migration-box1 .topbox li { width:calc((100% - 40px) / 3); border-radius:15px; background:#fff; padding:34px 40px;  display:flex; align-items:center; } 
.cloud-migration.migration-box1 .topbox li:first-child { background:var(--mainColor); justify-content:space-between; }
.cloud-migration.migration-box1 .topbox .txtbox { width:calc(100% - 98px); padding-left:40px; font-size:20px; font-weight:400; color:#222; line-height:1.5; letter-spacing:-0.02em; }
.cloud-migration.migration-box1 .topbox .txtbox strong { font-weight:600; }
.cloud-migration.migration-box1 .listbox > ul { display:flex; gap:55px; }
.cloud-migration.migration-box1 .listbox > ul > li { width:calc((100% - 165px) / 4); }
.cloud-migration.migration-box1 .listbox > ul > li dt { position:relative; font-size:17px; font-weight:600; color:#fff; line-height:1.3; text-align:center; padding:30px; display:flex; justify-content:center; align-items:center; border-radius:10px; background:var(--mainColor); }
.cloud-migration.migration-box1 .listbox > ul > li:not(:last-child) dt:before { content:''; display:block; position:absolute; top:50%; right:-35px; transform:translateY(-50%); width:16px; height:16px; background:url(../img/cloud/migration_arr2.png) no-repeat right bottom; }
.cloud-migration.migration-box1 .listbox > ul > li dd { position:relative; margin-top:70px; }
.cloud-migration.migration-box1 .listbox > ul > li dd .txt { position:absolute; left:0; top:-44px; text-align:center; width:100%; font-size:17px; font-weight:400; color:#555; }
.cloud-migration.migration-box1 .listbox > ul > li dd li { position:relative; font-size:17px; font-weight:400; color:#222; line-height:1.3; text-align:center; padding:20px; display:flex; justify-content:center; border-radius:10px; background:#fff; border:1px solid var(--mainColor); }
.cloud-migration.migration-box1 .listbox > ul > li dd li span { font-weight:400; }
.cloud-migration.migration-box1 .listbox > ul > li dd li:not(:last-child) { margin-bottom:20px; }
.cloud-migration.migration-box1 .listbox > ul > li dd li:not(:last-child):before { content:''; display:block; position:absolute; bottom:-18px; left:50%; transform:translateY(-50%); width:10px; height:8px; background:url(../img/cloud/migration_arr3.png) no-repeat right bottom; }
.cloud-migration.migration-box2 { padding-bottom:0; }
.cloud-migration.migration-box2 .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.cloud-migration.migration-box2 .listbox li { width:calc((100% - 40px) / 3); border-radius:15px; background:#f9f9f9; padding:35px 10px 42px 53px; }
.cloud-migration.migration-box2 .listbox li .icon { width:102px; height:102px; border-radius:102px; background:#fff; display:flex; align-items:center; justify-content:center; }
.cloud-migration.migration-box2 .listbox li .txtbox dt { position:relative; margin-top:20px; font-size:24px; font-weight:700; color:#222; line-height:1.5; letter-spacing:-0.02em; padding-bottom:15px; }
.cloud-migration.migration-box2 .listbox li .txtbox dt:before { content:''; display:block; position:absolute; bottom:0; left:0; width:19px; height:1px; background:#000; }
.cloud-migration.migration-box2 .listbox li .txtbox dd { margin-top:15px; font-size:18px; font-weight:400; color:#444; line-height:1.5; letter-spacing:-0.02em; }
@media screen and (max-width:1500px){
    .cloud-migration.migration-box2 .listbox li .txtbox br { display:none }
    .cloud-migration.migration-box2 .listbox li .txtbox .m_br { display:block }
    .cloud-migration.migration-box1 .topbox li { padding:25px 30px; }
    .cloud-migration.migration-box1 .topbox .box-1 .txt { padding:0 0 20px 0; }
}
@media screen and (max-width:1280px){
    .cloud-migration .topbox .txtbox br { display:none }
    .cloud-migration.migration-box1 .topbox li { padding:25px 20px; } 
    .cloud-migration.migration-box1 .topbox .box-1 .txt { font-size:16px; width:calc(100% - 180px - 20px); margin:0 10px; }
    .cloud-migration.migration-box1 .topbox .txtbox { padding-left:30px; font-size:19px; }
    .cloud-migration.migration-box1 .listbox > ul { gap:40px; }
    .cloud-migration.migration-box1 .listbox > ul > li { width:calc((100% - 120px) / 4); }
    .cloud-migration.migration-box1 .listbox > ul > li:not(:last-child) dt:before { right:-28px; }
    .cloud-migration.migration-box1 .listbox > ul > li dt { padding:25px 20px; font-size:16px; }
    .cloud-migration.migration-box1 .listbox > ul > li dd li { padding:15px; font-size:16px; }
    .cloud-migration.migration-box1 .listbox > ul > li dd .txt { top:-38px; font-size:16px; }
    .cloud-migration.migration-box1 .listbox > ul > li dd { margin-top:60px; }
}
@media screen and (max-width:1024px){
    .cloud-migration { padding:100px 0; }
    .cloud-migration .listbox { margin-top:40px; }
    .cloud-migration.migration-box1 .topbox li { padding:25px 20px; } 
    .cloud-migration.migration-box1 .topbox .txtbox { padding-left:20px; font-size:18px; }
    .cloud-migration.migration-box1 .listbox > ul { gap:30px; }
    .cloud-migration.migration-box1 .listbox > ul > li { width:calc((100% - 90px) / 4); }
    .cloud-migration.migration-box1 .listbox > ul > li:not(:last-child) dt:before { right:-24px; }
    .cloud-migration.migration-box1 .listbox > ul > li dt { padding:20px 10px; font-size:15px; }
    .cloud-migration.migration-box1 .listbox > ul > li dd li { padding:10px; font-size:15px; }
    .cloud-migration.migration-box1 .listbox > ul > li dd .txt { top:-38px; font-size:15px; }
    .cloud-migration.migration-box1 .listbox > ul > li dd li .stxt span { display:block; }
    .cloud-migration.migration-box1 .listbox > ul > li dd { margin-top:60px; }
    .cloud-migration.migration-box2 .listbox li { padding:25px 10px 25px 25px; }
    .cloud-migration.migration-box2 .listbox li .txtbox dt { margin-top:20px; font-size:20px; padding-bottom:12px; }
    .cloud-migration.migration-box2 .listbox li .txtbox dd { margin-top:12px; font-size:16px; }
}
@media screen and (max-width:960px){
    .cloud-migration.migration-box1 .topbox ul { gap:10px; }
    .cloud-migration.migration-box1 .topbox li { width:100%; }
    .cloud-migration.migration-box1 .topbox li { padding:25px 20px; } 
    .cloud-migration.migration-box1 .topbox .box-1 .txt { font-size:15px; background-position:center bottom }
    .cloud-migration.migration-box1 .topbox .txtbox { padding-left:20px; font-size:18px; }
    .cloud-migration.migration-box2 .listbox ul { gap:10px; }
    .cloud-migration.migration-box2 .listbox li { width:calc((100% - 20px) / 3);}
}
@media screen and (max-width:860px){
    .cloud-migration.migration-box2 .listbox li { width:100%; }
}
@media screen and (max-width:760px){
    .cloud-migration.migration-box1 .listbox > ul { gap:20px; }
    .cloud-migration.migration-box1 .listbox > ul > li { width:calc((100% - 60px) / 4); }
    .cloud-migration.migration-box1 .listbox > ul > li:not(:last-child) dt:before { right:-17px; width:13px; }
    .cloud-migration.migration-box1 .listbox > ul > li dt { padding:10px 0; height:70px; }
    .cloud-migration.migration-box1 .listbox > ul > li dd li { padding:10px 0; height:80px; }
    .cloud-migration.migration-box1 .listbox > ul > li dt,
    .cloud-migration.migration-box1 .listbox > ul > li dd li,
    .cloud-migration.migration-box1 .listbox > ul > li dd .txt { font-size:14px; }
    .cloud-migration.migration-box1 .listbox > ul > li dd .txt { top:-42px; }
}
@media screen and (max-width:640px){
    .cloud-migration { padding:80px 0; }
    .cloud-migration .listbox { margin-top:30px; }
    .cloud-migration.migration-box2 .listbox li { padding:25px 10px 25px 25px; text-align:center; }
    .cloud-migration.migration-box2 .listbox li .icon { margin:0 auto; }
    .cloud-migration.migration-box2 .listbox li .txtbox dt { margin-top:20px; font-size:18px; padding-bottom:10px; }
    .cloud-migration.migration-box2 .listbox li .txtbox dt:before { left:50%; transform:translateX(-50%); }
    .cloud-migration.migration-box2 .listbox li .txtbox dd { margin-top:10px; font-size:15px; }
}
@media screen and (max-width:470px){
    .cloud-migration.migration-box1 .topbox .box-1 .txt { background-position:right bottom }
}


/* animation */
.cloud-migration.migration-box1 .topbox,
.cloud-migration .listbox { opacity:0; }
.cloud-migration.migration-box1.subOn .topbox { animation:ani_4 0.8s 0.2s; animation-fill-mode:both; }
.cloud-migration.subOn .listbox { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }

.cloud-private  { padding:140px 0; }
.cloud-private * { word-break:keep-all; }
.cloud-private.bg { background:#fff; }
.cloud-private .listbox { margin-top:50px; z-index:2; position:relative;}
.cloud-private.private-box1 { padding-top:0; }
.cloud-private.private-box1 .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.cloud-private.private-box1 .listbox li { width:calc((100% - 40px) / 3); border-radius:15px; background:#f9f9f9; padding:35px 10px 42px 53px; }
.cloud-private.private-box1 .listbox li .icon { width:102px; height:102px; border-radius:102px; background:#fff; display:flex; align-items:center; justify-content:center; }
.cloud-private.private-box1 .listbox li .txtbox dt { position:relative; margin-top:20px; font-size:24px; font-weight:700; color:#222; line-height:1.5; letter-spacing:-0.02em; padding-bottom:15px; }
.cloud-private.private-box1 .listbox li .txtbox dt:before { content:''; display:block; position:absolute; bottom:0; left:0; width:19px; height:1px; background:#000; }
.cloud-private.private-box1 .listbox li .txtbox dd { margin-top:15px; font-size:18px; font-weight:400; color:#444; line-height:1.5; letter-spacing:-0.02em; }
.cloud-private.private-box2 { padding-bottom:0; }
.cloud-private.private-box2 .listbox:before { content:''; display:block; z-index:2; position:absolute; top:50%; left:0; width:100%; height:1px; transform:translateY(-50%); background:var(--mainColor); }
.cloud-private.private-box2 .listbox > div { position:relative; }
.cloud-private.private-box2 .listbox > div:before { content:''; display:block; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:373px; height:373px; background:#fff; border-radius:521px; border:74px solid #f2f6fa; }
.cloud-private.private-box2 .listbox .box { position:relative; z-index:5; display:flex; align-items:center; justify-content:center; }
.cloud-private.private-box2 .listbox .box .imgbox { position:absolute; left:0; top:50%; transform:translateY(calc(-50% - 0.5px)); }
.cloud-private.private-box2 .listbox .box .txtbox { padding:140px 0; width:300px; }
.cloud-private.private-box2 .listbox .box .txtbox li:not(:last-child) { margin-bottom:20px; }
.cloud-private.private-box2 .listbox .box .txtbox li { height:82px; border-radius:10px; background:#fff; border:1px solid var(--mainColor); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:17px; font-weight:400; color:#222; line-height:1.3; letter-spacing:-0.02em; }
.cloud-private.private-box2 .listbox .box .txtbox li strong { display:block; color:var(--mainColor); }
.cloud-private.private-box2 .listbox .box .txt-2 { position:absolute; right:0; top:50%; transform:translateY(-50%); width:301px; height:123px; border-radius:15px; background:var(--mainColor); text-align:center; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:600; color:#fff; line-height:1.3; }
.cloud-private.private-box2 .listbox .txt-1 { position:absolute; right:20%; top:0; width:280px; height:80px; border-radius:80px; background:var(--mainColor); display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:700; color:#fff; line-height:1.3; letter-spacing:-0.02em; }
.cloud-private.private-box2 .listbox .txt-list { position:absolute; right:0; bottom:0;}
.cloud-private.private-box2 .listbox .txt-list ul { display:flex; flex-wrap:wrap; gap:20px; }
.cloud-private.private-box2 .listbox .txt-list li { display:flex; align-items:center; justify-content:center; width:204px; height:70px; border-radius:100px; border:1px solid var(--mainColor); background:#f2f6fa; font-size:20px; font-weight:400; color:var(--mainColor); line-height:1.5; letter-spacing:-0.02em; }
@media screen and (max-width:1500px){
    .cloud-private.private-box1 .listbox li .txtbox br { display:none }
    .cloud-private.private-box1 .listbox li .txtbox .m_br { display:block }
    .cloud-private.private-box2 .listbox > div:before { width:300px; height:300px; border:60px solid #f2f6fa; }
    .cloud-private.private-box2 .listbox .box .imgbox img { width:350px; }
    .cloud-private.private-box2 .listbox .box .txtbox { padding:120px 0; width:240px; }
    .cloud-private.private-box2 .listbox .box .txtbox li:not(:last-child) { margin-bottom:15px; }
    .cloud-private.private-box2 .listbox .box .txtbox li { height:70px; font-size:17px; }
    .cloud-private.private-box2 .listbox .box .txt-2 { width:240px; height:100px; font-size:22px; }
    .cloud-private.private-box2 .listbox .txt-1 { right:18%; width:200px; height:70px; font-size:20px; }
    .cloud-private.private-box2 .listbox .txt-list { right:20px; }
    .cloud-private.private-box2 .listbox .txt-list li { width:160px; height:60px; font-size:20px; }
}
@media screen and (max-width:1280px){
    .cloud-private.private-box2 .listbox > div:before { width:250px; height:250px; border:40px solid #f2f6fa; }
    .cloud-private.private-box2 .listbox .box .imgbox img { width:280px; }
    .cloud-private.private-box2 .listbox .box .txtbox { padding:80px 0; width:200px; }
    .cloud-private.private-box2 .listbox .box .txtbox li:not(:last-child) { margin-bottom:10px; }
    .cloud-private.private-box2 .listbox .box .txtbox li { height:60px; font-size:16px; }
    .cloud-private.private-box2 .listbox .box .txt-2 { width:190px; height:80px; font-size:20px; }
    .cloud-private.private-box2 .listbox .txt-1 { right:18%; width:160px; height:60px; font-size:18px; }
    .cloud-private.private-box2 .listbox .txt-list { right:20px; }
    .cloud-private.private-box2 .listbox .txt-list ul { gap:10px; }
    .cloud-private.private-box2 .listbox .txt-list li { width:140px; height:50px; font-size:18px; }
}
@media screen and (max-width:1024px){
    .cloud-private { padding:100px 0; }
    .cloud-private .listbox { margin-top:40px; }
    .cloud-private.private-box1 .listbox li { padding:25px 10px 25px 25px; }
    .cloud-private.private-box1 .listbox li .txtbox dt { margin-top:20px; font-size:20px; padding-bottom:12px; }
    .cloud-private.private-box1 .listbox li .txtbox dd { margin-top:12px; font-size:16px; }
    .cloud-private.private-box2 .listbox > div:before { width:180px; height:180px; border:40px solid #f2f6fa; }
    .cloud-private.private-box2 .listbox .box .imgbox img { width:220px; }
    .cloud-private.private-box2 .listbox .box .txtbox { padding:80px 0; width:160px; }
    .cloud-private.private-box2 .listbox .box .txtbox li:not(:last-child) { margin-bottom:8px; }
    .cloud-private.private-box2 .listbox .box .txtbox li { height:50px; font-size:15px; }
    .cloud-private.private-box2 .listbox .box .txt-2 { width:140px; height:60px; font-size:18px; }
    .cloud-private.private-box2 .listbox .txt-1 { right:18%; width:160px; height:60px; font-size:18px; }
    .cloud-private.private-box2 .listbox .txt-list li { width:100px; height:44px; font-size:16px; }
}
@media screen and (max-width:960px){
    .cloud-private.private-box1 .listbox ul { gap:10px; }
    .cloud-private.private-box1 .listbox li { width:calc((100% - 20px) / 3);}
}
@media screen and (max-width:860px){
    .cloud-private.private-box1 .listbox li { width:100%; }
}
@media screen and (max-width:760px){
    .cloud-private.private-box2 .listbox:before { top:0; left:50%; width:1px; height:100%; transform:translate(-50%, 0); }
    .cloud-private.private-box2 .listbox { padding:180px 0 50px; max-width:480px; margin:30px auto 0; }
    .cloud-private.private-box2 .listbox .box { padding:130px 0;  }
    .cloud-private.private-box2 .listbox .box .imgbox { top:-150px; left:50%; transform:translate(calc(-50% - 0.5px), 0); }
    .cloud-private.private-box2 .listbox .box .txtbox { padding:0 0 }
    .cloud-private.private-box2 .listbox .box .txt-2 { right:unset; top:unset; left:50%; bottom:0; transform:translate(-50%, 0); } 
    .cloud-private.private-box2 .listbox .txt-list { width:90px; }
    .cloud-private.private-box2 .listbox .txt-list li { width:100%; height:38px; font-size:14px; }
    .cloud-private.private-box2 .listbox .txt-1 { right:unset; left:20px; bottom:80px; top:unset; width:100px; height:50px; font-size:16px; }
}
@media screen and (max-width:640px){
    .cloud-private { padding:80px 0; }
    .cloud-private .listbox { margin-top:30px; }
    .cloud-private.private-box1 .listbox li { padding:25px 10px 25px 25px; text-align:center; }
    .cloud-private.private-box1 .listbox li .icon { margin:0 auto; }
    .cloud-private.private-box1 .listbox li .txtbox dt { margin-top:20px; font-size:18px; padding-bottom:10px; }
    .cloud-private.private-box1 .listbox li .txtbox dt:before { left:50%; transform:translateX(-50%); }
    .cloud-private.private-box1 .listbox li .txtbox dd { margin-top:10px; font-size:15px; }
}


/* animation */
.cloud-private .listbox { opacity:0; }
.cloud-private.subOn .listbox { 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 .composition-box { padding:140px 0 0; background:#fff; }
.source-box .composition-box .imgboxCont { margin-top:50px; text-align:center; }
.source-box .composition-box .imgboxCont img { max-width:100%; }
.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 .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 .txtbox { 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 .txtbox li { position:relative; padding-left:10px; font-size:16px; font-weight:400; color:#222; line-height:1.6; }
.source-box .composition-box.haproxy-box .txtbox 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 .txtbox 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 .composition-box { padding:100px 0 0; }
    .source-box .composition-box .imgboxCont { margin-top:40px; }
    .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 .txtbox { bottom:100px; padding:25px 20px; }
    .source-box .composition-box.haproxy-box .txtbox 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); }
}
@media screen and (max-width:860px){
    .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; }
    .source-box .source-top .listbox li .txtbox { font-size:18px; padding-left:20px; }
    .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 .txtbox { bottom:80px; padding:10px 10px; }
    .source-box .composition-box.haproxy-box .txtbox li { padding-left:10px; font-size:14px; }
    .source-box .composition-box.haproxy-box .txtbox li:before { top:11px; }
    .source-box .composition-box.haproxy-box .txtbox 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; }