@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:100%; 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:17px; line-height: 27px; margin-top: 30px; }
#subCont .visual-box .visual_txt .txtbox dd .txt-3 strong { font-weight: 600; color: var(--mainColor); }
#subCont .visual-box .visual_txt .txtbox dd .txt-price { opacity:0; margin-top:26px; display:inline-flex; align-items:center; gap:14px; padding:12px 14px; border-radius:12px; border:1px solid #cfcfcfdd; background:white; }
#subCont .visual-box .visual_txt .txtbox dd .txt-price .label { display:inline-flex; align-items:center; justify-content:center; min-width:72px; height:30px; padding:0 10px; border-radius:30px; background:var(--mainColor); color:#fff; font-size:13px; font-weight:600; }
#subCont .visual-box .visual_txt .txtbox dd .txt-price p { display:flex; align-items:baseline; gap:8px; }
#subCont .visual-box .visual_txt .txtbox dd .txt-price strong { font-size:22px; line-height:1; font-weight:700; color:#222; letter-spacing:-0.02em; }
#subCont .visual-box .visual_txt .txtbox dd .txt-price em { font-style:normal; font-size:15px; font-weight:500; color:#666; }
#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 .visual_txt .txtbox .cta-group { margin-top:28px; display:flex; align-items:center; gap:12px; }
#subCont .visual-box .visual_txt .txtbox .cta-group .btn_link { margin-top:0; }
#subCont .visual-box .visual_txt .txtbox .cta-group .btn_link.is-primary a { background:var(--mainColor); }
#subCont .visual-box .visual_txt .txtbox .cta-group .btn_link.is-primary a span { filter:brightness(0) invert(1); }
#subCont .visual-box .visual_txt .txtbox .cta-group .btn_link.btn_link-tel a { justify-content:center; padding:0 18px; }
#subCont .visual-box .visual_txt .txtbox .cta-group .btn_link.btn_link-tel a span {
    background:none;
    padding-right:0;
    padding-left:25px;
    position:relative;
}
#subCont .visual-box .visual_txt .txtbox .cta-group .btn_link.btn_link-tel a span:before {
    content:"";
    display:block;
    width:18px;
    height:18px;
    background:var(--mainColor) url(../img/common/tel_icon.png) center no-repeat;
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
    border-radius:18px;
}
#subCont .visual-box .visual_txt .txtbox .cta-group .btn_link.btn_link-tel a:hover span { filter:none; color:#fff; }
#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; }
#subCont .visual-box.subOn .visual_txt .txtbox dd .txt-3 { animation:ani_2 0.8s 1.4s; animation-fill-mode:both; }
#subCont .visual-box.subOn .visual_txt .txtbox dd .txt-price { animation:ani_2 0.8s 1.8s; 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 150px; } */
    #subCont .visual-box .visual_txt .txtbox { padding:0 30px; }
}
@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; }
    #subCont .visual-box .visual_txt .txtbox dd .txt-price strong { font-size:30px; }
}
@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; }
    #subCont .visual-box .visual_txt .txtbox dd .txt-price strong { font-size:28px; }
}
@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; }
    #subCont .visual-box .visual_txt .txtbox dd .txt-price { margin-top:20px; padding:10px 14px; gap:10px; }
    #subCont .visual-box .visual_txt .txtbox dd .txt-price .label { min-width:64px; height:26px; font-size:12px; }
    #subCont .visual-box .visual_txt .txtbox dd .txt-price strong { font-size:24px; }
    #subCont .visual-box .visual_txt .txtbox dd .txt-price em { font-size:14px; }
    #subCont .visual-box .visual_txt .txtbox .cta-group .btn_link { width:190px; height:50px; }
    #subCont .visual-box .visual_txt .txtbox .cta-group .btn_link a span { font-size:16px; }
    #subCont .visual-box .visual_txt .txtbox .cta-group .btn_link.btn_link-tel a { justify-content:center; padding:0 14px; }
    #subCont .visual-box .visual_txt .txtbox .cta-group .btn_link.btn_link-tel a span { padding-left:22px; }
    #subCont .visual-box .visual_txt .txtbox .cta-group .btn_link.btn_link-tel a span:before { width:16px; height: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 .txt-price { flex-wrap:wrap; gap:8px; }
    #subCont .visual-box .visual_txt .txtbox dd .txt-price strong { font-size:22px; }
    #subCont .visual-box .visual_txt .txtbox dd .txt-price em { font-size:13px; }
    #subCont .visual-box .visual_txt .txtbox dd br { display:none }
    #subCont .visual-box .visual_txt .txtbox .cta-group { margin-top:20px; gap:10px; flex-wrap:wrap; }
    #subCont .visual-box .visual_txt .txtbox .cta-group .btn_link { width:100%; }
    #subCont .visual-box .visual_txt .txtbox .cta-group .btn_link a { justify-content:center; }
}
@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:600; line-height:130%; }
#contents .subTitle h3 .tit { font-family:var(--mainFont); }
#contents .subTitle h3 strong { font-weight:700; }
#contents .subTitle h4 { font-size:25px; font-weight:600; line-height:130%; }
#contents .subTitle p { margin-top:25px; font-size:20px; font-weight:400; line-height:1.8; color:#444; letter-spacing:-0.02em; }
#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; }
    #contents .subTitle p { font-size:22px; margin-top:20px; }
}
@media screen and (max-width:1024px){
    #contents { padding-top:80px; }
    #contents .subTitle h3 { font-size:30px; }
    #contents .subTitle p { font-size:20px; margin-top:18px; }
    #contents .subTitle .txtbox { font-size:18px; }
}
@media screen and (max-width:640px){
    #contents { padding-top:50px; }
    #contents .subTitle h3 { font-size:20px; }
    #contents .subTitle p { font-size:18px; margin-top:15px; }
    #contents .subTitle .txtbox { font-size:16px; }
}

/* animation */
#contents .subTitle { overflow:hidden }
#contents .subTitle h3,
#contents .subTitle p,
#contents .subTitle .txtbox { opacity:0; }
#contents .subOn .subTitle h3 { animation:ani_3 0.8s 0.2s; animation-fill-mode:both; }
#contents .subOn .subTitle p { animation:ani_3 0.8s 0.5s; 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 .listbox .txt-box {margin: 32px 0 0 36px;font-size: 20px; display:grid !important; gap:16px !important; }
.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); }
.server-box .ptit { font-size:17px; font-weight:400; line-height:1.3; color:#222; margin: 0px 35px 0px 30px; }
.server-box .ptit strong { font-weight:700; color: 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; }
    .server-box .ptit { font-size:15px; font-weight:400; line-height:1.3; color:#222; margin: 0px 0px 0px 30px }
}
.product-list { }
.product-list .subTitle .txtbox { margin-top:25px; }
.product-list .listbox { margin-top:85px; }
.product-list .listbox .subtxt{ font-size: 16px; padding: 25px; line-height: 25px; }
.product-list .listbox .subtxt strong { font-weight: 600; color: #0569ff; }
.product-list .listbox > ul { display:flex; gap:30px; flex-wrap:wrap; justify-content:center; }
.product-list .listbox .jt-start { justify-content: start; }
.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 .images { display:flex;justify-content:center;margin-top:10px; }
.product-list .listbox > ul > li .images IMG{ width:180px }
.product-list .listbox > ul > li .list { margin:0 auto; margin-top:15px; width:100%; max-width:320px; }
.product-list .listbox > ul > li .list li:not(:last-child) { margin-bottom:5px; }
.product-list .listbox > ul > li .list li { position:relative; padding-left:60px; font-size:16px; font-weight:300; line-height:1.7; color:#222; letter-spacing: 0.7px; }
.product-list .listbox > ul > li .list li strong { width:70px; position:absolute; left:0; top:0; font-weight:600; color:#222; letter-spacing: 0px; }
.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 .rental .first { font-weight:600; line-height:1.3; color:var(--mainColor); }
.product-list .listbox > ul > li .rental .sub { color: #bbb; margin-left: 8px;font-size: 20px; }
.product-list .listbox > ul > li .hint { width: 100%; margin-top: 12px; text-align: center; }
.product-list .listbox > ul > li .hint a { text-decoration: underline; color: #555; transition: all 0.3s; }
.product-list .listbox > ul > li .hint a:hover { color: #333; font-weight: 600; }
.product-list .listbox > ul > li .btn-gr { display: flex; justify-content: center; gap: 8px; }
.product-list .listbox > ul > li .btn-gr .btn{ margin: 25px 0 0 0; }
.product-list .listbox > ul > li .btn { position:relative; margin:0 auto; margin-top:25px; width:150px; 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);}
.product-list .listbox > ul > li.popular { position: relative; }
.product-list .listbox > ul > li.popular h4.title { position: relative; }
.product-list .listbox > ul > li.popular .popular-badge { position: absolute;top: 20px;right: 20px;display: inline-block; padding: 6px 16px; font-size: 14px; font-weight: 700; color: #fff; background: #0569ff; border-radius: 20px; letter-spacing: 0.5px;z-index: 10;}
/* 스토리지 안내 배너 */
.storage-notice-banner { margin-top: 60px; }
.storage-notice-banner .inner { max-width: 100%; margin: 0 auto; padding: 0; }
.storage-notice-banner .banner-content { display: flex; align-items: center; justify-content: space-between; padding: 20px 30px; background: #ffffff; border: 1px solid #e0e8ff; border-radius: 12px; gap: 20px; }
.storage-notice-banner .notice-text { margin: 0; font-size: 18px; color: #333; font-weight: 500; line-height: 1.6; flex: 1; }
.storage-notice-banner .notice-text strong { color: var(--mainColor); font-weight: 600; }
.storage-notice-banner .btn-server-link { position: relative; width: 170px; height: 50px; overflow: hidden; border: none; border-radius: 50px; text-decoration: none; transition: all 0.3s; white-space: nowrap; display: flex; align-items: center; justify-content: center; background: var(--mainColor); }
.storage-notice-banner .btn-server-link span { transition: all 0.3s; display: inline-block; padding: 4px 22px 4px 0; font-weight: 500; font-size: 16px; color: #fff; background: url(../img/common/btn_arr1.png) right center no-repeat; background-size: auto; filter: brightness(0) invert(1); position: relative; z-index: 1; }
.storage-notice-banner .btn-server-link:hover { background: #0456d3; }
.storage-notice-banner .btn-server-link:hover span { color: #fff; filter: brightness(0) invert(1); }
@media (max-width: 768px) {
	.storage-notice-banner .banner-content { flex-direction: column; align-items: center; padding: 20px;}
	.storage-notice-banner .btn-server-link { width: 170px; }
}
.product-list2 .subTitle .txtbox { margin-top:25px; }
.product-list2 .listbox { margin-top:85px; }
.product-list2 .listbox .jt-start { justify-content: start; }
.product-list2.type-A .listbox > ul > li p.chip { text-align: center; border-radius: 4px; padding: 6px 0px; margin: 0px 10px 16px 10px;background: #f8f8f8;}
.product-list2.type-A .listbox > ul > li p.chip.blue { background: #f4f9ff;color: #0569ff; }
.product-list2.type-A .listbox > ul > li p.chip.yellow { background: #fffce7;color:#ffbd23; }
.product-list2.type-A .listbox > ul > li p.chip.purple { background: #faf6ff;color:#8223ff; }
.product-list2 .listbox > ul > li .imgbox { text-align:center; margin-top:50px; min-height:85px; }
.product-list2 .listbox > ul > li .imgbox img { max-width:100%; }
.product-list2 .listbox > ul > li .sw_txt { line-height: 30px;text-align: center;font-size: 1.15rem;margin: 7px 0; }
.product-list2 .listbox > ul > li .link { text-align: center;margin-top: 16px;cursor: pointer; }
.product-list2 .listbox > ul > li .link a { color:var(--mainColor); }
.product-list2 .listbox > ul > li .list { margin:0 auto; margin-top:15px; width:100%; max-width:320px; }
.product-list2 .listbox > ul > li .list li:not(:last-child) { margin-bottom:5px; }
.product-list2 .listbox > ul > li .list li { position:relative; padding-left:70px; font-size:16px; font-weight:300; line-height:1.7; color:#222; }
.product-list2 .listbox > ul > li .list li strong { width:70px; position:absolute; left:0; top:0; font-weight:600; color:#222; }
.product-list2 .listbox > ul > li .btn-gr { display: flex; justify-content: center; gap: 8px; }
.product-list2 .listbox > ul > li .btn-gr .btn{ margin: 25px 0 0 0; }
.product-list2 .listbox > ul > li .btn { position:relative; margin:0 auto; margin-top:25px; width:150px; height:50px; overflow:hidden; border:1px solid var(--mainColor); border-radius:50px; transition:all 0.3s; }
.product-list2 .listbox > ul > li .btn:hover { background:var(--mainColor); }
.product-list2 .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-list2 .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-list2 .listbox > ul > li .btn:hover a { background:transparent; }
.product-list2 .listbox > ul > li .btn:hover a span { filter:brightness(0) invert(1);}
.product-list2 .listbox > ul > li .btn.one-grid  { margin-top: 214px; }
.product-list2 .listbox > ul > li .btn.two-grid { margin-top: 119px; }
@media screen and (max-width:1500px){
    .product-list2 .listbox > ul > li .btn.one-grid {}
}
@media screen and (max-width:640px){
    .product-list2.type-A .listbox > ul > li p.chip { margin: 0px 110px 16px 110px;}
}
.hosting-box .product-list,
.security-ssl .product-list,
.security-weak .product-list,
.security-WAF .product-list { padding-bottom:110px; }
.security-WAF .product-list .imgboxCont { display: flex; justify-content: center; margin-top: 40px; }
.security-WAF .product-list .imgboxCont img { max-width: 95%; }

.product-list.type-A .listbox > ul > li { height:auto; }
.product-list.type-A .listbox > ul > li h4.title { text-align:center; font-size:30px; font-weight:700; line-height:1.3; color:#222; }
.product-list.type-A .listbox > ul > li p.chip { margin: 7px auto; text-align: center; border: 1px solid #999; border-radius: 4px; width: 20%; padding: 4px 0px;}
.product-list.type-A .listbox > ul > li p.subtitle { text-align: center; font-size: 1.15rem; font-weight: 500; margin: 7px 0;line-height: 140%; }
.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; 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; justify-content: center; padding:10px 10px 10px 10px ; }
.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 .point { font-weight:600; color: #0569ff; }
.product-list.type-A .listbox > ul > li .list .price { font-size: 25px; }
.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; }
.product-list.type-A .listbox > .subtxt { font-size: 16px; padding: 25px; line-height: 25px; }
.product-list.type-A .listbox > .subtxt strong { font-weight:600; color: #0569ff; }
.product-list .listbox .btn a,
.product-list.type-A .listbox .btn a { cursor : pointer; }
.product-list2.type-A .listbox { margin-top:85px; }
.product-list2.type-A .listbox > ul { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.product-list2.type-A .listbox > ul > li {  width:calc((100% - 40px) / 4);padding:70px 30px 40px 30px; height:auto; border-radius:30px; background:#fff; transition:all 0.4s; }
.product-list2.type-A .twinbox > ul > li { width:calc((100% - 40px) / 3); }
.product-list2.type-A .listbox > ul > li:hover { box-shadow: 0px 0px 25px 0px rgba(13, 95, 255, 0.30); }
.product-list2.type-A .listbox > ul > li h4.title { text-align:center; font-size:30px; font-weight:700; line-height:1.3; color:#222; }
.product-list2.type-A .listbox > ul > li h4.title.small { font-size: 28px; }
.product-list2.type-A .listbox > ul > li p.subtitle { text-align: center; font-size: 1.15rem; font-weight: 500; margin: 7px 0; }
.product-list2.type-A .listbox > ul > li p.subtitle.small { font-size: 16px; }
.product-list2.type-A .listbox > ul > li p.sub { font-size: 16px;text-align: center;margin: 16px 0;line-height: 160%;color: #999999; }
.product-list2 .listbox > ul > li .images { display:flex;justify-content:center;margin-top:10px; }
.product-list2 .listbox > ul > li .images img{ width:180px }
.product-list2.type-A .listbox > ul > li .imgbox { position:relative; margin-top:40px; }
.product-list2.type-A .listbox > ul > li .imgbox:before { content:''; display:block; position:absolute; bottom:5px; left:0; width:100%; height:65px; border-radius:70px; }
.product-list2.type-A .listbox > ul > li .imgbox img { position:relative; z-index:2; }
.product-list2.type-A .listbox > ul > li .list { margin:0 auto; margin-top:30px; max-width:350px; padding-left:0; }
.product-list2.type-A .listbox > ul > li .list li { min-height:45px; display:flex;justify-content:center ;padding:10px 10px 10px 10px ; }
.product-list2.type-A .listbox > ul > li .list li strong { top:50%; transform:translateY(-50%); left:40px; }
.product-list2.type-A .listbox > ul > li .columlist { margin: 30px 40px 30px 0px; width:100%; max-width:320px; }
.product-list2.type-A .listbox > ul > li .columlist.small { margin: 30px 40px 30px 30px; }
.product-list2.type-A .listbox > ul > li .columlist li:not(:last-child) { margin-bottom:5px; }
.product-list2.type-A .listbox > ul > li .columlist li { position:relative; padding-left:60px; font-size:16px; font-weight:300; line-height:1.7; color:#222; letter-spacing: 0.7px; }
.product-list2.type-A .listbox > ul > li .columlist li strong { width:70px; position:absolute; left:0; top:0; font-weight:600; color:#222; letter-spacing: 0px; }

.product-list2.type-A .listbox > ul > li> ul.columlist2 { width:100%; margin: 30px 40px 30px 0px; padding:0 24px; }
.product-list2.type-A .listbox > ul > li> ul.columlist2 li { display: flex; justify-content: space-between; margin-bottom: 8px; width: 100%;  font-size:16px; font-weight:300; line-height:1.7; color:#222; letter-spacing: 0.7px; }
.product-list2.type-A .listbox > ul > li > ul.columlist2 li strong { display: flex; font-weight: 600; color: 222; letter-spacing: 0; }

.product-list2.type-A .listbox > ul > li .columlist p {font-size: 15px;}
.product-list2.type-A .listbox > ul > li .list li strong { width:70px; position:absolute; left:0; top:0; font-weight:600; color:#222; letter-spacing: 0px; }
.product-list2.type-A .listbox > ul > li .list li .price .sub { font-size: 17px; color: #777; }
.product-list2.type-A .listbox > ul > li .list li .point { font-weight:600; color: #0569ff; }
.product-list2.type-A .listbox > ul > li .list li:nth-child(2n) { background:#f5f5f5; }
.product-list2.type-A .listbox > ul > li .list li:not(:last-child) { margin-bottom:0; }
.product-list2.type-A .listbox > ul > li .list .icon-box { display:flex; }
.product-list2.type-A .listbox > ul > li .list .icon {display: flex; flex-direction: column; align-items: center; margin: 0px 4px; color: #333; line-height: 2;font-size:14px; }
.product-list2.type-A .listbox > ul > li .list .icon img {width: 65px; border: 1px solid #eee; border-radius: 12px; }
.product-list2.type-A .listbox > ul > li.software { width:calc((100% - 0px) / 5); }
.product-list2.type-A .listbox > ul > li.fix .list li { display: flex; flex-wrap: wrap; padding: 0; }
.product-list2.type-A .listbox > ul > li.fix .foot-grid { margin-top: 214px; }
.product-list2.type-A .listbox > ul > li.fix .foot-grid2 { margin-top: 125px; }
.product-list2.type-A .listbox > ul > li.fix .list .price { font-size: 25px; }
.product-list2.type-A .listbox > .subtxt { font-size: 16px; padding: 25px; line-height: 25px; }
.product-list2.type-A .listbox > .subtxt strong { font-weight:600; color: #0569ff; }
.product-list2.listbox .btn a,
.product-list2.type-A .listbox .btn a { cursor : pointer; }

/* FortiGate F 시리즈 - Firewall/IPS는 flex space-between, Interfaces는 세로 배치 유지 */
.media-wowza.firewall-fortigate .listbox > ul > li .list { max-width:100%; padding:0 10px; }
.media-wowza.firewall-fortigate .listbox > ul > li .list li {
	display:flex; justify-content:space-between; align-items:center; min-height:auto; padding:12px 16px; text-align:left;
}
.media-wowza.firewall-fortigate .listbox > ul > li .list li strong {
	position:static; width:auto; transform:none; flex-shrink:0; margin-right:12px;
	font-size:14px; color:#555; font-weight:600;
}
.media-wowza.firewall-fortigate .listbox > ul > li .list li span {
	font-size:13px; line-height:1.6; color:#222; text-align:right;
}
/* Interfaces(3번째 항목) - 긴 텍스트라 세로 배치 유지 */
.media-wowza.firewall-fortigate .listbox > ul > li .list li:nth-child(3) {
	display:block; flex-direction:column; align-items:flex-start;
}
.media-wowza.firewall-fortigate .listbox > ul > li .list li:nth-child(3) strong {
	margin-bottom:4px; margin-right:0; display:block;
}
.media-wowza.firewall-fortigate .listbox > ul > li .list li:nth-child(3) span {
	display:block; text-align:left; word-break:break-word;
}

.subtxt { font-size: 16px; padding: 25px; line-height: 25px; }
.subtxt strong { font-weight:600; color: #0569ff; }
.subtxt .box {color: #333; padding: 4px 12px; width: 80%; border: 1px solid #bbb; border-radius: 12px;}

.security-ssl .product-list.type-A .listbox .subtxt { font-size: 16px; padding: 25px; line-height: 25px; }
.security-ssl .product-list.type-A .listbox .subtxt strong { font-weight:600; color: #0569ff; }
@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; }
    .product-list2.type-A .listbox > ul > li.software { width:calc((100% - 0px) / 3); }
}
@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; }
    .security-ssl .product-list.type-A .listbox > .subtxt { font-size: 15px; padding: 25px; line-height: 25px; }
    .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 10px ; }
    .product-list.type-A .listbox > ul > li .list li strong { left:30px; }
    .product-list.type-A .listbox > .subtxt { font-size: 15px; padding: 25px; line-height: 25px; }

    .product-list2.type-A .listbox > ul { gap:20px; }
    .product-list.type-A .listbox > ul > li { width: 100%; padding: 30px 5px; }
    .product-list.type-A .listbox > ul > li .list { margin:0 auto; margin-top:30px; max-width:90%; }
    .product-list2.type-A .listbox > ul > li h4.title { font-size:28px; }
    .product-list2.type-A .listbox > ul > li .list { margin-top:10px; } 
    .product-list2.type-A .listbox > ul > li.software { width:calc((100% - 0px) / 2); }
    .product-list2.type-A .listbox > ul > li { width:calc((100% - 20px) / 2); padding:30px 30px 30px 30px; border-radius:15px; }
    .product-list2.type-A .listbox > ul > li .imgbox { margin-top:30px; }
    .product-list2.type-A .listbox > ul > li .imgbox:before { height:60px; }
    .product-list2.type-A .listbox > ul > li .list li { padding:10px 10px 10px 10px ; }
    .product-list2.type-A .listbox > ul > li .list li strong { left:30px; }
    .product-list2.type-A .listbox > .subtxt { font-size: 15px; padding: 25px; line-height: 25px; }
    .product-list2.type-A .listbox > ul > li .btn { width:180px; height:45px; }
    .product-list2.type-A .listbox > ul > li .btn a { font-size:15px; }
    /* FortiGate - 반응형에서도 flex/세로 레이아웃 유지 */
    .media-wowza.firewall-fortigate .listbox > ul > li .list li { display:flex; justify-content:space-between; padding:12px 16px; }
    .media-wowza.firewall-fortigate .listbox > ul > li .list li:nth-child(3) { display:block; }
    .media-wowza.firewall-fortigate .listbox > ul > li .list li strong { position:static; left:auto; }
}
@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; }
    .security-ssl .product-list.type-A .listbox > .subtxt { font-size: 14px; padding: 25px; line-height: 25px; }
    .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; }
    .product-list.type-A .listbox > .subtxt { font-size: 14px; padding: 25px; line-height: 25px; }
    .product-list2.type-A .listbox > ul > li.software { width:calc((100% - 0px) / 1); }

    .product-list2.type-A .listbox > ul { gap:15px; }
    .product-list2.type-A .listbox > ul > li { width:100%; padding:30px 0px; }
    .product-list2.type-A .listbox > ul > li h4.title { font-size:24px; }
    .product-list2.type-A .listbox > ul > li .imgbox { min-height:auto; }
    .product-list2.type-A .listbox > ul > li .list { margin-top:30px; } 
    .product-list2.type-A .listbox > ul > li .imgbox:before { height:55px; }
    .product-list2.type-A .listbox > .subtxt { font-size: 14px; padding: 25px; line-height: 25px; }
    /* FortiGate - 모바일에서도 flex/세로 레이아웃 유지 */
    .media-wowza.firewall-fortigate .listbox > ul > li .list li { display:flex; justify-content:space-between; padding:12px 16px; }
    .media-wowza.firewall-fortigate .listbox > ul > li .list li:nth-child(3) { display:block; }
    .media-wowza.firewall-fortigate .listbox > ul > li .list li strong { position:static; left:auto; }
}
@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 .bg { background-color:#f5f5f5; }
.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; height:348px; 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; }
/* netorage.php host-service gpu 리스트 2x2 그리드 */
.host-service .listbox.gpu > ul > li { width:calc((100% - 20px) / 2); }
.host-service .listbox.gpu > ul > li .box { display:flex; align-items:center; }
.host-service .listbox.gpu > ul > li .box .txtbox { padding-left:30px; }
.host-service .listbox.gpu > ul > li .box .txtbox dt { margin-top:0; }
.host-service .listbox.gpu > ul > li .box .txtbox dd { margin-top:15px; }
/* netorage.php host-service gpu box 높이 100% */
.host-service .listbox.netorage-gpu-box > ul { align-items:stretch; }
.host-service .listbox.netorage-gpu-box > ul > li { height:100%; }
.host-service .listbox.netorage-gpu-box > ul > li .box { height:100%; }
/* privatecloud.php host-service 리스트 높이 100% 패딩 50px */
.host-service .listbox.privatecloud-list > ul { align-items:stretch; }
.host-service .listbox.privatecloud-list > ul > li { height:100%; padding:50px; }
@media screen and (max-width:1500px){
    .host-service .listbox > ul > li dd br { display:none; }
    .host-service .listbox > ul > li { height:auto; }
    .host-service .listbox.privatecloud-list > ul > li { height:100%; }
}
@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.privatecloud-list > ul > li { height:100%; padding:50px; }
    .host-service .listbox.gpu > ul > li { width:calc((100% - 20px) / 2); }
    .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); }
    .host-service .listbox.gpu > 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.privatecloud-list > ul > li { height:auto; padding:50px; }
    .host-service .listbox.gpu > ul > li { width:100%; }
    .host-service .listbox.gpu > ul > li .box { flex-direction:column; text-align:center; }
    .host-service .listbox.gpu > ul > li .box .txtbox { padding-left:0; margin-top:20px; }
    .host-service .listbox.gpu > ul > li .box .txtbox dt { margin-top:0; }
    .host-service .listbox.gpu > ul > li .box .txtbox dt:before { left:50%; transform:translateX(-50%); }
    .host-service .listbox.netorage-gpu-box > ul > li { height:100%; }
    .host-service .listbox.netorage-gpu-box > ul > li .box { height:100%; }
    .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; }
.cloud-box .host-service .source-box .composition-box .imgboxCont {
    opacity:0;
    transform:translateY(24px);
}
.cloud-box .host-service.subOn .source-box .composition-box .imgboxCont {
    animation:ani_4 0.8s 0.35s;
    animation-fill-mode:both;
}

/* streaming_dev 핵심 역량 */
.streaming-core-capability { padding:110px 0 140px; background:#fcfcfc; }
.streaming-core-capability .subTitle .txtbox { margin-top:18px; }
.streaming-core-capability .listbox { margin-top:50px; }
.streaming-core-capability .listbox > ul { display:flex; flex-wrap:wrap; gap:20px; }
.streaming-core-capability .listbox > ul > li { width:calc((100% - 20px) / 2); }
.streaming-core-capability .listbox > ul > li .box {
    height:100%;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#fff;
    padding:34px 34px 30px;
}
.streaming-core-capability .listbox > ul > li .box-head { display:flex; align-items:flex-start; justify-content:space-between; }
.streaming-core-capability .listbox > ul > li .icon {
    width:84px;
    height:84px;
    border-radius: 50%;
    background:#f9f9f9;
    display:flex;
    align-items:center;
    justify-content:center;
}
.streaming-core-capability .listbox > ul > li .icon img { width:40px; }
.streaming-core-capability .listbox > ul > li .num {
    color:#cad5e3;
    font-family:var(--mainFont);
    font-size:44px;
    font-weight:600;
    line-height:1;
}
.streaming-core-capability .listbox > ul > li dt {
    margin-top:18px;
    font-size:28px;
    font-weight:700;
    line-height:1.35;
    color:#1f2937;
    letter-spacing:-0.02em;
}
.streaming-core-capability .listbox > ul > li dd {
    margin-top:16px;
    font-size:18px;
    font-weight:400;
    line-height:1.6;
    color:#475569;
    letter-spacing:-0.02em;
}
.streaming-core-capability .listbox > ul > li .feature-check { margin-top:18px; padding-top:16px; border-top:1px solid #e5e7eb; display:flex; flex-direction:column; gap:8px; }
.streaming-core-capability .listbox > ul > li .feature-check li { display:flex; align-items:center; gap:8px; font-size:16px; font-weight:400; line-height:1.65; color:#334155; }
.streaming-core-capability .listbox > ul > li .chk-icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; margin-top:1px; }
.streaming-core-capability .listbox > ul > li .chk-icon svg { width:20px; height:20px; color:#9f9f9f; }

.streaming-core-capability .feature-list { display:flex; flex-direction:column; gap:130px; }
.streaming-core-capability .feature-item { display:flex; align-items:center; gap:60px; }
.streaming-core-capability .feature-item.reverse { flex-direction:row-reverse; }
.streaming-core-capability .feature-text { width:48%; }
.streaming-core-capability .feature-num {
    font-size:36px;
    font-weight:700;
    color:var(--mainColor);
    letter-spacing:-0.03em;
    line-height:1.1;
}
.streaming-core-capability .feature-num + .feature-tit { margin-top:10px; }
.streaming-core-capability .feature-tit {
    font-size:36px;
    font-weight:700;
    color:#1f2937;
    line-height:1.35;
    letter-spacing:-0.02em;
}
.streaming-core-capability .feature-tit .feature-sub { font-weight:500; color:#475569; }

/* streaming-value-maximize: 넘버링 18px, 타이틀 두줄 36px 볼드 */
.streaming-value-maximize .feature-num { font-size:18px; }
.streaming-value-maximize .feature-tit,
.streaming-value-maximize .feature-tit .feature-sub { font-size:36px; font-weight:700; color:#1f2937; }
.streaming-core-capability .feature-desc {
    margin-top:20px;
    font-size:18px;
    line-height:1.7;
    color:#475569;
    letter-spacing:-0.02em;
}
.streaming-core-capability .feature-check {
    margin-top:22px;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.streaming-core-capability .feature-check li {
    display:flex;
    align-items:flex-start;
    gap:8px;
    font-size:17px;
    color:#334155;
    line-height:1.6;
}
.streaming-core-capability .feature-check .chk-icon { margin-top:2px; color:#9f9f9f; }
.streaming-core-capability .feature-check .chk-icon svg { width:20px; height:20px; }
.streaming-core-capability .feature-img { width:52%; }
.streaming-core-capability .img-placeholder {
    border-radius:18px;
    border:1px solid #dbe5f1;
    overflow:hidden;
    background:#fff;
}
.streaming-core-capability .img-placeholder img { width:100%; display:block; }

.streaming-core-capability .arch-graphic {
    border:1px solid #dbe5f1;
    border-radius:18px;
    background:#f7f7f7;
    padding:32px 24px;
}
.streaming-core-capability .arch-graphic h5 {
    font-family:var(--mainFont);
    font-size:19px;
    font-weight:700;
    color:#1e293b;
    line-height:1.3;
    text-align:center;
}
.streaming-core-capability .arch-graphic .flow-track,
.streaming-core-capability .arch-graphic .infra-top,
.streaming-core-capability .arch-graphic .infra-bottom {
    margin-top:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
}
.streaming-core-capability .arch-graphic .node {
    width:132px;
    min-height:96px;
    padding:12px 10px;
    border:1px solid #d4deea;
    border-radius:10px;
    background:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
}
.streaming-core-capability .arch-graphic .node strong {
    font-size:17px;
    font-weight:700;
    color:#1e293b;
    line-height:1.3;
}
.streaming-core-capability .arch-graphic .node p {
    margin-top:6px;
    font-size:14px;
    color:#64748b;
    line-height:1.4;
}
.streaming-core-capability .arch-graphic .node.emphasize {
    border-color:rgba(5, 105, 255, 0.4);
    box-shadow:0 10px 24px rgba(5, 105, 255, 0.12);
}
.streaming-core-capability .arch-graphic .node.emphasize p {
    color:var(--mainColor);
    font-weight:600;
}
.streaming-core-capability .arch-graphic .arrow {
    font-size:22px;
    font-weight:700;
    color:#8ba2bd;
    line-height:1;
}

/* flexibility-graphic: use-case-cards (아이콘+라벨, 화살표·강조 없음) */
.streaming-core-capability .flexibility-graphic.use-case-cards {
    padding:28px 20px;
}

/* streaming-hub-cards: 스트리밍 허브 → 점선 → use-case 카드들 */
.streaming-core-capability .flexibility-graphic.streaming-hub-cards {
    display:flex;
    flex-direction:column;
}
.streaming-core-capability .flexibility-graphic .streaming-hub-wrap {
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    min-height:80px;
    margin-bottom:8px;
}
.streaming-core-capability .flexibility-graphic .streaming-hub-wrap .flow-hub {
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    padding:10px 24px;
    background:#fff;
    border:1px solid var(--mainColor);
    border-radius:10px;
    font-weight:500;
    font-size:14px;
    color:var(--mainColor);
}
.streaming-core-capability .flexibility-graphic .streaming-hub-wrap .flow-hub svg {
    width:28px;
    height:28px;
}
.streaming-core-capability .flexibility-graphic .streaming-hub-wrap .hub-to-cards-lines {
    position:absolute;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    height:70px;
    pointer-events:none;
}
.streaming-core-capability .flexibility-graphic .streaming-hub-wrap .hub-to-cards-lines .flow-line {
    animation:flowDash 12s linear infinite;
}
@keyframes flowDash {
    to { stroke-dashoffset: -24; }
}

.streaming-core-capability .flexibility-graphic.use-case-cards .use-case-list {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px 48px;
    z-index:1;
}
.streaming-core-capability .flexibility-graphic.use-case-cards .use-case-item {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}
.streaming-core-capability .flexibility-graphic.use-case-cards .use-case-icon {
    width:52px;
    height:52px;
    background:#fff;
    border:1px solid #d4deea;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.streaming-core-capability .flexibility-graphic.use-case-cards .use-case-icon svg {
    width:26px;
    height:26px;
    color:#64748b;
}
.streaming-core-capability .flexibility-graphic.use-case-cards .use-case-label {
    font-size:14px;
    font-weight:500;
    color:#475569;
}

.streaming-core-capability .infra-graphic .infra-mid {
    margin:20px auto 0;
    text-align:center;
}
.streaming-core-capability .infra-graphic .infra-mid span {
    display:inline-block;
    padding:10px 20px;
    border-radius:30px;
    background:rgba(5, 105, 255, 0.12);
    color:#1d4ed8;
    font-size:14px;
    font-weight:600;
}

/* streaming-value-maximize: 카드 동일 높이 (고정) */
.streaming-value-maximize .arch-graphic {
    height:400px;
    min-height:280px;
    display:flex;
    flex-direction:column;
    justify-content: center;
}

/* infra-control-graphic: 허브·스포크 (stream01 참조) */
.streaming-core-capability .infra-control-graphic .infra-control-hub {
    position:relative;
    width:100%;
    aspect-ratio:1;
    max-width:340px;
    margin-left:auto;
    margin-right:auto;
}
.streaming-core-capability .infra-control-graphic .hub-lines {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
}
.streaming-core-capability .infra-control-graphic .hub-node {
    position:absolute;
    display:flex;
    flex-direction:column;
    align-items:center;
    box-sizing:border-box;
}
.streaming-core-capability .infra-control-graphic .hub-node.hub-pos {
    width:auto;
    height:auto;
    background:transparent;
    border:none;
}
.streaming-core-capability .infra-control-graphic .hub-node.hub-pos .hub-node-box {
    width:56px;
    height:56px;
    background:#fff;
    border:2px solid #d4deea;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.streaming-core-capability .infra-control-graphic .hub-node.hub-pos span {
    display:block;
    margin-top:6px;
    font-size:14px;
    font-weight:500;
    color:#64748b;
    text-align:center;
    white-space:nowrap;
}
.streaming-core-capability .infra-control-graphic .hub-node svg {
    width:24px;
    height:24px;
    color:#64748b;
}
.streaming-core-capability .infra-control-graphic .hub-node.hub-pos .hub-node-box svg {
    width:24px;
    height:24px;
}
.streaming-core-capability .infra-control-graphic .hub-center {
    position:absolute;
    top:37%;
    left:37%;
    transform:translate(-50%, -50%);
}
.streaming-core-capability .infra-control-graphic .hub-main {
    width:90px;
    height:90px;
    background:#fff;
    border:1px solid var(--mainColor);
    border-radius:10px;
    justify-content:center;
}
.streaming-core-capability .infra-control-graphic .hub-main svg {
    width:32px;
    height:32px;
    color:var(--mainColor);
}
.streaming-core-capability .infra-control-graphic .hub-main span {
    display:block;
    margin-top:4px;
    font-size:14px;
    font-weight:600;
    color:var(--mainColor);
}
.streaming-core-capability .infra-control-graphic .hub-main {
    flex-direction:column;
}
.streaming-core-capability .infra-control-graphic .hub-accent .hub-node-box {
    border-color:rgba(5, 105, 255, 0.5);
}
.streaming-core-capability .infra-control-graphic .hub-accent .hub-node-box svg {
    color:var(--mainColor);
}
.streaming-core-capability .infra-control-graphic .hub-tl { top:12%; left:8%; }
.streaming-core-capability .infra-control-graphic .hub-tr { top:12%; right:8%; left:auto; }
.streaming-core-capability .infra-control-graphic .hub-tc { top:2%; left:50%; transform:translateX(-50%); }
.streaming-core-capability .infra-control-graphic .hub-bl { bottom:12%; left:8%; top:auto; }
.streaming-core-capability .infra-control-graphic .hub-br { bottom:12%; right:8%; left:auto; top:auto; }
.streaming-core-capability .infra-control-graphic .hub-bc { bottom:2%; left:50%; transform:translateX(-50%); top:auto; }

/* flexibility-flow-graphic: 소스 → 스크린 (사례만 표시) */
.streaming-core-capability .flexibility-flow-graphic .flex-flow-wrap {
    margin-top:0;
    padding:24px 0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
    width:100%;
    max-width:320px;
    margin-left:auto;
    margin-right:auto;
}
.streaming-core-capability .flexibility-flow-graphic .flex-arrow {
    font-size:24px;
    font-weight:700;
    color:#8ba2bd;
    flex-shrink:0;
}
.streaming-core-capability .flexibility-flow-graphic .flex-sources,
.streaming-core-capability .flexibility-flow-graphic .flex-screens {
    display:flex;
    flex-direction:column;
    gap:16px;
}
.streaming-core-capability .flexibility-flow-graphic .flex-node {
    display:flex;
    flex-direction:column;
    align-items:center;
}
.streaming-core-capability .flexibility-flow-graphic .flex-node-box {
    width:48px;
    height:48px;
    background:#fff;
    border:2px solid #d4deea;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.streaming-core-capability .flexibility-flow-graphic .flex-node-box svg {
    width:22px;
    height:22px;
    color:#64748b;
}
.streaming-core-capability .flexibility-flow-graphic .flex-node span {
    display:block;
    margin-top:6px;
    font-size:11px;
    font-weight:500;
    color:#64748b;
    text-align:center;
}

/* opt-streaming-graphic (legacy - 다른 페이지용) */
.streaming-core-capability .opt-streaming-graphic .opt-streaming-stack {
    margin-top:24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}
.streaming-core-capability .opt-streaming-graphic .opt-node {
    width:100%;
    max-width:200px;
    padding:14px 16px;
    border:1px solid #d4deea;
    border-radius:10px;
    background:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}
.streaming-core-capability .opt-streaming-graphic .opt-node strong {
    font-size:16px;
    font-weight:700;
    color:#1e293b;
    line-height:1.3;
}
.streaming-core-capability .opt-streaming-graphic .opt-node p {
    margin-top:4px;
    font-size:13px;
    color:#64748b;
}
.streaming-core-capability .opt-streaming-graphic .opt-node.emphasize {
    border-color:rgba(5, 105, 255, 0.4);
    box-shadow:0 10px 24px rgba(5, 105, 255, 0.12);
}
.streaming-core-capability .opt-streaming-graphic .opt-node.emphasize p {
    color:var(--mainColor);
    font-weight:600;
}
.streaming-core-capability .opt-streaming-graphic .opt-arrow {
    font-size:20px;
    font-weight:700;
    color:#8ba2bd;
    line-height:1;
}

@media screen and (max-width:1024px){
    .streaming-core-capability { padding:90px 0 30px; }
    .streaming-core-capability .listbox { margin-top:40px; }
    .streaming-core-capability .listbox > ul { gap:15px; }
    .streaming-core-capability .listbox > ul > li { width:calc((100% - 15px) / 2); }
    .streaming-core-capability .listbox > ul > li .box { padding:26px 24px 24px; }
    .streaming-core-capability .listbox > ul > li .icon { width:74px; height:74px; }
    .streaming-core-capability .listbox > ul > li .icon img { width:36px; }
    .streaming-core-capability .listbox > ul > li dt { margin-top:16px; font-size:24px; }
    .streaming-core-capability .listbox > ul > li dd { margin-top:12px; font-size:16px; }
    .streaming-core-capability .listbox > ul > li .num { font-size:36px; }
    .streaming-core-capability .listbox > ul > li .feature-check { margin-top:14px; }
    .streaming-core-capability .listbox > ul > li .feature-check li { font-size:15px; }
    .streaming-core-capability .listbox > ul > li .chk-icon svg { width:18px; height:18px; }

    .streaming-core-capability .feature-list { margin-top:44px; gap:70px; }
    .streaming-core-capability .feature-item,
    .streaming-core-capability .feature-item.reverse { flex-direction:column; gap:28px; }
    .streaming-core-capability .feature-text,
    .streaming-core-capability .feature-img { width:100%; }
    .streaming-core-capability .feature-tit { font-size:30px; }
    .streaming-value-maximize .feature-num { font-size:16px; }
    .streaming-value-maximize .feature-tit,
    .streaming-value-maximize .feature-tit .feature-sub { font-size:28px; font-weight:700; }
    .streaming-core-capability .feature-desc { margin-top:14px; font-size:16px; }
    .streaming-core-capability .feature-check li { font-size:15px; }
    .streaming-core-capability .arch-graphic h5 { font-size:22px; }
    .streaming-core-capability .arch-graphic .node { width:120px; min-height:90px; }
    .streaming-core-capability .arch-graphic .node strong { font-size:15px; }
    .streaming-core-capability .arch-graphic .node p { font-size:13px; }
}
@media screen and (max-width:768px){
    .streaming-core-capability .listbox > ul > li { width:100%; }
    .cloud-managed-strength .listbox > ul > li { width:calc((100% - 20px) / 2) !important; }
}
@media screen and (max-width:640px){
    .cloud-managed-strength .listbox > ul > li { width:100% !important; }
    .streaming-core-capability { padding:70px 0 20px; }
    .streaming-core-capability .subTitle .txtbox { margin-top:12px; }
    .streaming-core-capability .listbox { margin-top:30px; }
    .streaming-core-capability .listbox > ul { gap:10px; }
    .streaming-core-capability .listbox > ul > li .box { padding:20px 16px 18px; border-radius:10px; }
    .streaming-core-capability .listbox > ul > li .icon { width:62px; height:62px; }
    .streaming-core-capability .listbox > ul > li .icon img { width:30px; }
    .streaming-core-capability .listbox > ul > li .num { font-size:30px; }
    .streaming-core-capability .listbox > ul > li dt { margin-top:12px; font-size:18px; }
    .streaming-core-capability .listbox > ul > li dd { margin-top:10px; font-size:14px; }
    .streaming-core-capability .listbox > ul > li .feature-check { margin-top:12px; gap:6px; }
    .streaming-core-capability .listbox > ul > li .feature-check li { font-size:13px; }
    .streaming-core-capability .listbox > ul > li .chk-icon svg { width:16px; height:16px; }

    .streaming-core-capability .feature-list { margin-top:30px; gap:50px; }
    .streaming-core-capability .feature-tit { font-size:24px; }
    .streaming-value-maximize .feature-num { font-size:14px; }
    .streaming-value-maximize .feature-tit,
    .streaming-value-maximize .feature-tit .feature-sub { font-size:22px; font-weight:700; }
    .streaming-core-capability .feature-desc { margin-top:10px; font-size:14px; line-height:1.6; }
    .streaming-core-capability .feature-check { margin-top:16px; }
    .streaming-core-capability .feature-check li { font-size:13px; line-height:1.5; }
    .streaming-core-capability .arch-graphic { border-radius:12px; padding:24px 14px; }
    .streaming-value-maximize .arch-graphic { height:auto; min-height:auto; }
    .streaming-core-capability .arch-graphic h5 { font-size:16px; }
    .streaming-core-capability .infra-control-graphic .infra-control-hub { max-width:260px; }
    .streaming-core-capability .infra-control-graphic .hub-node.hub-pos .hub-node-box { width:48px; height:48px; }
    .streaming-core-capability .infra-control-graphic .hub-node.hub-pos .hub-node-box svg { width:20px; height:20px; }
    .streaming-core-capability .infra-control-graphic .hub-node.hub-pos span { font-size:10px; }
    .streaming-core-capability .infra-control-graphic .hub-main { width:60px; height:60px; }
    .streaming-core-capability .infra-control-graphic .hub-main svg { width:26px; height:26px; }
    .streaming-core-capability .flexibility-flow-graphic .flex-flow-wrap { flex-direction:column; gap:16px; padding:16px 0; }
    .streaming-core-capability .flexibility-flow-graphic .flex-arrow { transform:rotate(90deg); }
    .streaming-core-capability .flexibility-flow-graphic .flex-sources,
    .streaming-core-capability .flexibility-flow-graphic .flex-screens { flex-direction:row; justify-content:center; gap:12px; }
    .streaming-core-capability .flexibility-flow-graphic .flex-node-box { width:44px; height:44px; }
    .streaming-core-capability .flexibility-flow-graphic .flex-node-box svg { width:18px; height:18px; }
    .streaming-core-capability .flexibility-flow-graphic .flex-node span { font-size:10px; }
    .streaming-core-capability .flexibility-graphic.use-case-cards { padding:20px 12px; }
    .streaming-core-capability .flexibility-graphic.use-case-cards .use-case-list { gap:16px 20px; }
    .streaming-core-capability .flexibility-graphic.use-case-cards .use-case-icon { width:44px; height:44px; }
    .streaming-core-capability .flexibility-graphic.use-case-cards .use-case-icon svg { width:22px; height:22px; }
    .streaming-core-capability .flexibility-graphic.use-case-cards .use-case-label { font-size:12px; }
    .streaming-core-capability .flexibility-graphic .streaming-hub-wrap { min-height:80px; margin-bottom:4px; }
    .streaming-core-capability .flexibility-graphic .streaming-hub-wrap .flow-hub { padding:8px 18px; font-size:12px; }
    .streaming-core-capability .flexibility-graphic .streaming-hub-wrap .hub-to-cards-lines { top:42px; height:50px; }
    .streaming-core-capability .arch-graphic .flow-track,
    .streaming-core-capability .arch-graphic .infra-top,
    .streaming-core-capability .arch-graphic .infra-bottom { margin-top:20px; gap:6px; }
    .streaming-core-capability .arch-graphic .node {
        width:calc(50% - 6px);
        min-height:80px;
        border-radius:8px;
        padding:10px 8px;
    }
    .streaming-core-capability .arch-graphic .node strong { font-size:13px; }
    .streaming-core-capability .arch-graphic .node p { margin-top:4px; font-size:12px; }
    .streaming-core-capability .arch-graphic .arrow { font-size:16px; }
    .streaming-core-capability .arch-graphic .flow-track .arrow {
        width:100%;
        display:block;
        text-align:center;
        font-size:0;
        line-height:1;
    }
    .streaming-core-capability .arch-graphic .flow-track .arrow:before {
        content:"↓";
        font-size:18px;
        font-weight:700;
        color:#8ba2bd;
    }
    .streaming-core-capability .infra-graphic .infra-top .arrow {
        width:100%;
        display:block;
        text-align:center;
        font-size:0;
        line-height:1;
    }
    .streaming-core-capability .infra-graphic .infra-top .arrow:before {
        content:"↓";
        font-size:18px;
        font-weight:700;
        color:#8ba2bd;
    }
    .streaming-core-capability .infra-graphic .infra-bottom .arrow {
        width:100%;
        display:block;
        text-align:center;
        font-size:0;
        line-height:1;
    }
    .streaming-core-capability .infra-graphic .infra-bottom .arrow:before {
        content:"↕";
        font-size:18px;
        font-weight:700;
        color:#8ba2bd;
    }
    .streaming-core-capability .infra-graphic .infra-mid { margin-top:14px; }
    .streaming-core-capability .infra-graphic .infra-mid span { padding:7px 12px; font-size:12px; }
}

/* animation */
.streaming-core-capability .listbox > ul > li { opacity:0; }
.streaming-core-capability.subOn .listbox > ul > li:nth-child(1) { animation:ani_4 0.8s 0.2s; animation-fill-mode:both; }
.streaming-core-capability.subOn .listbox > ul > li:nth-child(2) { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }
.streaming-core-capability.subOn .listbox > ul > li:nth-child(3) { animation:ani_4 0.8s 0.6s; animation-fill-mode:both; }
.streaming-core-capability.subOn .listbox > ul > li:nth-child(4) { animation:ani_4 0.8s 0.8s; animation-fill-mode:both; }
.cloud-managed-strength.subOn .listbox > ul > li:nth-child(5) { animation:ani_4 0.8s 1.0s; animation-fill-mode:both; }
.cloud-managed-strength.subOn .listbox > ul > li:nth-child(6) { animation:ani_4 0.8s 1.2s; animation-fill-mode:both; }
/* cloud-managed-strength: 3그리드 */
.cloud-managed-strength .listbox > ul > li { width:calc((100% - 40px) / 3) !important; }

/* WAF 기능 섹션 (cloudflare_security.php) */
.waf-feature-section { padding:120px 0 140px; background:#fff; }
.waf-feature-section .subTitle .txtbox { margin-top:12px; font-size:17px; color:#666; line-height:1.5; }
.waf-feature-section .waf-feature-list { margin-top:50px; }
.waf-feature-section .waf-feature-list > ul {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}
.waf-feature-section .waf-feature-list > ul > li {
    width:calc((100% - 40px) / 3);
}
.waf-feature-section .waf-feature-list .box {
    height:100%;
    padding:28px 26px 24px;
    border:1px solid #e2e8f0;
    border-radius:14px;
    background:#fff;
    display:flex;
    flex-direction:column;
}
.waf-feature-section .waf-feature-list .box dt {
    font-size:20px;
    font-weight:700;
    color:#1e293b;
    line-height:1.35;
    letter-spacing:-0.02em;
}
.waf-feature-section .waf-feature-list .box dd {
    margin-top:12px;
    font-size:15px;
    font-weight:400;
    color:#64748b;
    line-height:1.65;
    letter-spacing:-0.01em;
    flex:1;
}
.waf-feature-section .waf-feature-list .waf-tags {
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid #e5e7eb;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.waf-feature-section .waf-feature-list .waf-tags span {
    display:inline-block;
    padding:6px 12px;
    font-size:13px;
    font-weight:600;
    color:var(--mainColor);
    background:rgba(5, 105, 255, 0.08);
    border-radius:6px;
}
.waf-feature-section .waf-feature-list > ul > li { opacity:0; }
.waf-feature-section.subOn .waf-feature-list > ul > li:nth-child(1) { animation:ani_4 0.8s 0.2s; animation-fill-mode:both; }
.waf-feature-section.subOn .waf-feature-list > ul > li:nth-child(2) { animation:ani_4 0.8s 0.35s; animation-fill-mode:both; }
.waf-feature-section.subOn .waf-feature-list > ul > li:nth-child(3) { animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }
.waf-feature-section.subOn .waf-feature-list > ul > li:nth-child(4) { animation:ani_4 0.8s 0.65s; animation-fill-mode:both; }
.waf-feature-section.subOn .waf-feature-list > ul > li:nth-child(5) { animation:ani_4 0.8s 0.8s; animation-fill-mode:both; }
.waf-feature-section.subOn .waf-feature-list > ul > li:nth-child(6) { animation:ani_4 0.8s 0.95s; animation-fill-mode:both; }
/* 스마트 라우팅 활용 시나리오 (cloudflare_smartrouting.php) */
.routing-scenario-section .waf-feature-list > ul > li { width:calc((100% - 20px) / 2); }
.routing-scenario-section .waf-feature-list .scenario-icon {
    width:48px; height:48px; margin-bottom:16px;
    display:flex; align-items:center; justify-content:center;
}
.routing-scenario-section .waf-feature-list .scenario-icon img {
    width:32px; height:32px; object-fit:contain;
}
.routing-scenario-section .waf-tags span { background:var(--mainColor); color:#fff; border-color:var(--mainColor); }
@media screen and (max-width:1024px){
    .waf-feature-section { padding:100px 0 120px; }
    .waf-feature-section .waf-feature-list > ul > li { width:calc((100% - 20px) / 2); }
}
@media screen and (max-width:768px){
    .waf-feature-section { padding:80px 0 100px; }
    .waf-feature-section .waf-feature-list { margin-top:40px; }
    .waf-feature-section .waf-feature-list > ul > li { width:100%; }
    .waf-feature-section .waf-feature-list .box { padding:24px 22px 20px; }
    .waf-feature-section .waf-feature-list .box dt { font-size:18px; }
    .waf-feature-section .waf-feature-list .box dd { font-size:14px; }
}
@media screen and (max-width:640px){
    .waf-feature-section { padding:60px 0 80px; }
    .waf-feature-section .subTitle .txtbox { font-size:15px; }
    .waf-feature-section .waf-feature-list .waf-tags span { font-size:12px; padding:5px 10px; }
}

/* DDoS/WAF 서비스 플랜 (cloudflare_security.php) - waf_service.php UI 동일 적용 */
.ddos-waf-plan.product-list { padding:120px 0 140px; }
.ddos-waf-plan .subTitle .txtbox { margin-top:12px; font-size:17px; color:#666; }
.ddos-waf-plan .listbox .subtxt strong { color:var(--mainColor) !important; }
.ddos-waf-plan .listbox > ul > li .list li .plan-x,
.routing-plan .listbox > ul > li .list li .plan-x {
	display:inline-block;
	min-width:1em;
	margin-right:6px;
	font-weight:700;
	font-size:1.05em;
	line-height:1;
	color:#b8c0cc;
	vertical-align:0.05em;
}

/* 스마트 라우팅 서비스 플랜 (cloudflare_smartrouting.php) */
.routing-plan.product-list { padding:120px 0 140px; }
.routing-plan .subTitle .txtbox { margin-top:12px; font-size:17px; color:#666; }
.routing-plan .listbox .subtxt strong { color:var(--mainColor) !important; }
.routing-plan .listbox > ul > li {
    display:flex;
    flex-direction:column;
    min-height:480px;
    border:1px solid #e2e8f0;
    border-radius:20px;
    background:#fff;
    padding:40px 30px 40px 30px;
}
.routing-plan .listbox > ul > li .list { flex:1; }
.routing-plan .listbox > ul > li .hint { margin-top:12px; margin-bottom:0; }
.routing-plan .listbox > ul > li .btn-gr { margin-top:12px; }
/* CDN 서비스 플랜 (3열 — inner 가로 풀) */
.cdn-plan.product-list { padding:120px 0 140px; }
.cdn-plan .subTitle .txtbox { margin-top:12px; font-size:17px; color:#666; }
.cdn-plan .listbox .subtxt strong { color:var(--mainColor) !important; }
.cdn-plan .listbox > ul {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:20px;
	width:100%;
}
.cdn-plan .listbox > ul > li { width:auto; min-width:0; display:flex; flex-direction:column; min-height:480px; }
.cdn-plan .listbox > ul > li .list { flex:1; }
.cdn-plan .listbox > ul > li .hint { margin-top:12px; margin-bottom:0; }
.cdn-plan .listbox > ul > li .btn-gr { margin-top:12px; }
/* 카드 높이 맞춤: hint+버튼을 하단 정렬 */
.ddos-waf-plan .listbox > ul > li {
    display:flex;
    flex-direction:column;
    min-height:520px;
}
.ddos-waf-plan .listbox > ul > li .list { flex:1; }
.ddos-waf-plan .listbox > ul > li .hint { margin-top:12px; margin-bottom:0; }
.ddos-waf-plan .listbox > ul > li .btn-gr { margin-top:12px; }
/* DDoS/WAF: 2열 그리드로 inner 가로 풀 */
.ddos-waf-plan .listbox > ul {
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:30px;
	width:100%;
}
.ddos-waf-plan .listbox > ul > li { width:auto; min-width:0; }
/* CDN·DDoS/WAF 플랜만 혜택 .list 가로 전폭 (type-A 기본 max-width:350px 덮어씀) */
.product-list.type-A.cdn-plan .listbox > ul > li .list,
.product-list.type-A.ddos-waf-plan .listbox > ul > li .list {
	max-width: 100%;
}
@media screen and (max-width:1024px){
    .ddos-waf-plan .listbox > ul > li { min-height:480px; }
    .routing-plan .listbox > ul > li { min-height:450px; }
    .cdn-plan .listbox > ul { grid-template-columns:repeat(2, 1fr); }
    .cdn-plan .listbox > ul > li { min-height:450px; }
    .product-list.type-A.cdn-plan .listbox > ul > li .list,
    .product-list.type-A.ddos-waf-plan .listbox > ul > li .list { max-width: 100%; }
}
@media screen and (max-width:768px){
    .ddos-waf-plan .listbox > ul { grid-template-columns:1fr; }
    .ddos-waf-plan .listbox > ul > li { min-height:auto; }
    .routing-plan .listbox > ul > li { min-height:auto; }
    .cdn-plan .listbox > ul { grid-template-columns:1fr; }
    .cdn-plan .listbox > ul > li { min-height:auto; }
}

.streaming-core-capability .feature-list .feature-item { opacity:0; }
.streaming-core-capability.subOn .feature-list .feature-item:nth-child(1) { animation:ani_4 0.8s 0.2s; animation-fill-mode:both; }
.streaming-core-capability.subOn .feature-list .feature-item:nth-child(2) { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }
.streaming-core-capability.subOn .feature-list .feature-item:nth-child(3) { animation:ani_4 0.8s 0.6s; animation-fill-mode:both; }
.streaming-core-capability.subOn .feature-list .feature-item:nth-child(4) { animation:ani_4 0.8s 0.8s; animation-fill-mode:both; }
.streaming-core-capability.subOn .feature-list .feature-item:nth-child(5) { animation:ani_4 0.8s 1.0s; animation-fill-mode:both; }

.streaming-protocol-transcoding { padding:140px 0 140px; background:#f5f5f5; }
.streaming-protocol-transcoding .subTitle .txtbox {
    margin-top:16px;
    color:#64748b;
}
.streaming-protocol-transcoding .listbox { margin-top:46px; }
.streaming-protocol-transcoding .listbox ul {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}
.streaming-protocol-transcoding .listbox ul li { width:calc((100% - 40px) / 3); }
.streaming-protocol-transcoding .listbox .box {
    height:100%;
    border:1px solid #e8eef6;
    border-radius:18px;
    background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    box-shadow:0 8px 24px rgba(15, 23, 42, 0.05);
    padding:28px 24px 24px;
    display:grid;
    grid-template-columns:62px 1fr;
    grid-template-areas:
        "icon title"
        "icon desc"
        "chips chips";
    align-items:center;
    column-gap:14px;
    row-gap:4px;
}
.streaming-protocol-transcoding .listbox .icon {
    grid-area:icon;
    width:62px;
    height:62px;
    border:1px solid #d9e2ee;
    border-radius:12px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
}
.streaming-protocol-transcoding .listbox .icon img { width:32px; }
.streaming-protocol-transcoding .listbox dt {
    grid-area:title;
    margin-top:0;
    font-size:24px;
    font-weight:700;
    color:#1f2937;
    line-height:1.3;
    letter-spacing:-0.02em;
}
.streaming-protocol-transcoding .listbox dd {
    grid-area:desc;
    margin-top:0;
    font-size:17px;
    color:#475569;
    line-height:1.6;
    letter-spacing:-0.02em;
}
.streaming-protocol-transcoding .listbox .stack-list {
    grid-area:chips;
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid #e9edf3;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.streaming-protocol-transcoding .listbox .stack-list span {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:7px 14px;
    border-radius:999px;
    background:#f1f5f9;
    color:#0f172a;
    font-family:'Pretendard', sans-serif;
    font-size:15px;
    font-weight:500;
    letter-spacing:-0.01em;
}
.streaming-protocol-transcoding .listbox .stack-list span.is-highlight {
    background:rgba(5, 105, 255, 0.12);
    border:1px solid rgba(5, 105, 255, 0.25);
    color:#0b4fc7;
    font-weight:600;
}
@media screen and (max-width:1024px){
    .streaming-protocol-transcoding { padding:20px 0 80px; }
    .streaming-protocol-transcoding .listbox { margin-top:34px; }
    .streaming-protocol-transcoding .listbox ul { gap:14px; }
    .streaming-protocol-transcoding .listbox ul li { width:calc((100% - 14px) / 2); }
    .streaming-protocol-transcoding .listbox .box { padding:22px 18px 18px; }
    .streaming-protocol-transcoding .listbox dt { font-size:21px; }
    .streaming-protocol-transcoding .listbox dd { margin-top:12px; font-size:16px; }
}
@media screen and (max-width:640px){
    .streaming-protocol-transcoding { padding:10px 0 60px; }
    .streaming-protocol-transcoding .subTitle .txtbox { margin-top:10px; }
    .streaming-protocol-transcoding .listbox { margin-top:24px; }
    .streaming-protocol-transcoding .listbox ul { gap:10px; }
    .streaming-protocol-transcoding .listbox ul li { width:100%; }
    .streaming-protocol-transcoding .listbox .box {
        border-radius:12px;
        padding:16px 14px 14px;
        grid-template-columns:52px 1fr;
        column-gap:10px;
    }
    .streaming-protocol-transcoding .listbox .icon { width:52px; height:52px; border-radius:10px; }
    .streaming-protocol-transcoding .listbox .icon img { width:26px; }
    .streaming-protocol-transcoding .listbox dt { font-size:18px; }
    .streaming-protocol-transcoding .listbox dd { font-size:14px; }
    .streaming-protocol-transcoding .listbox .stack-list { margin-top:12px; padding-top:12px; gap:6px; }
    .streaming-protocol-transcoding .listbox .stack-list span { min-height:30px; padding:5px 11px; font-size:12px; font-weight:500; }
}

.streaming-protocol-transcoding .listbox ul li { opacity:0; }
.streaming-protocol-transcoding.subOn .listbox ul li:nth-child(1) { animation:ani_4 0.8s 0.2s; animation-fill-mode:both; }
.streaming-protocol-transcoding.subOn .listbox ul li:nth-child(2) { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }
.streaming-protocol-transcoding.subOn .listbox ul li:nth-child(3) { animation:ani_4 0.8s 0.6s; animation-fill-mode:both; }

.streaming-managed-support {
    padding:140px 0;
    background:linear-gradient(145deg, #f8fbff 0%, #eef4ff 55%, #f5f9ff 100%);
    border-top:1px solid #e4ecf7;
    border-bottom:1px solid #e4ecf7;
    margin-bottom: 100px;
}
.streaming-managed-support .subTitle h3 { color:#0f172a; }
.streaming-managed-support .subTitle .txtbox { margin-top:16px; color:#64748b; }
.streaming-managed-support .listbox { margin-top:48px; }
.streaming-managed-support .listbox > ul { display:flex; flex-wrap:wrap; gap:20px; }
.streaming-managed-support .listbox > ul > li { width:calc((100% - 40px) / 3); }
.streaming-managed-support .listbox > ul > li .box {
    height:100%;
    padding:30px 26px 26px;
    border-radius:14px;
    border:1px solid #d9e3f0;
    background:#fff;
    box-shadow:0 12px 30px rgba(15, 23, 42, 0.05);
    transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.streaming-managed-support .listbox > ul > li .box:hover {
    transform:translateY(-4px);
    border-color:#c8d7eb;
    box-shadow:0 18px 34px rgba(15, 23, 42, 0.09);
}
.streaming-managed-support .listbox > ul > li .icon { display:none; }
.streaming-managed-support .listbox > ul > li dt {
    margin-top:0;
    font-size:30px;
    font-weight:700;
    line-height:1.3;
    color:#1f2937;
    letter-spacing:-0.02em;
}
.streaming-managed-support .listbox > ul > li dd {
    margin-top:12px;
    font-size:18px;
    font-weight:400;
    line-height:1.6;
    color:#475569;
    letter-spacing:-0.02em;
}
@media screen and (max-width:1024px){
    .streaming-managed-support { padding:100px 0; }
    .streaming-managed-support .listbox { margin-top:36px; }
    .streaming-managed-support .listbox > ul { gap:14px; }
    .streaming-managed-support .listbox > ul > li { width:calc((100% - 14px) / 2); }
    .streaming-managed-support .listbox > ul > li .box { padding:24px 20px 20px; }
    .streaming-managed-support .listbox > ul > li dt { margin-top:14px; font-size:24px; }
    .streaming-managed-support .listbox > ul > li dd { margin-top:10px; font-size:16px; }
}
@media screen and (max-width:640px){
    .streaming-managed-support { padding:80px 0; }
    .streaming-managed-support .subTitle .txtbox { margin-top:10px; }
    .streaming-managed-support .listbox { margin-top:24px; }
    .streaming-managed-support .listbox > ul { gap:10px; }
    .streaming-managed-support .listbox > ul > li { width:100%; }
    .streaming-managed-support .listbox > ul > li .box { padding:18px 14px 16px; border-radius:12px; }
    .streaming-managed-support .listbox > ul > li .box:hover {
        transform:none;
        border-color:#d9e3f0;
        box-shadow:0 12px 30px rgba(15, 23, 42, 0.05);
    }
    .streaming-managed-support .listbox > ul > li dt { margin-top:0; font-size:20px; }
    .streaming-managed-support .listbox > ul > li dd { margin-top:8px; font-size:14px; }
}

.streaming-managed-support .listbox > ul > li { opacity:0; }
.streaming-managed-support.subOn .listbox > ul > li:nth-child(1) { animation:ani_4 0.8s 0.2s; animation-fill-mode:both; }
.streaming-managed-support.subOn .listbox > ul > li:nth-child(2) { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }
.streaming-managed-support.subOn .listbox > ul > li:nth-child(3) { animation:ani_4 0.8s 0.6s; animation-fill-mode:both; }

.wowza-box1 .streaming-feature-highlight-wrap {
    width:100%;
    padding:0;
}
.wowza-box1 .streaming-feature-highlight {
    width:100%;
    margin:0;
    padding:90px 54px;
    background:linear-gradient(140deg, #0f172a 0%, #101827 52%, #1e293b 100%);
    text-align:center;
}
.wowza-box1 .streaming-feature-highlight .highlight-head h4 {
    font-size:40px;
    font-weight:700;
    line-height:1.35;
    color:#fff;
    letter-spacing:-0.02em;
}
.wowza-box1 .streaming-feature-highlight .highlight-head p {
    margin-top:16px;
    font-size:22px;
    font-weight:400;
    line-height:1.7;
    color:rgba(255, 255, 255, 0.58);
    letter-spacing:-0.02em;
}
.wowza-box1 .streaming-feature-highlight .highlight-grid {
    margin-top:34px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:14px;
}
.wowza-box1 .streaming-feature-highlight .highlight-grid .item {
    flex:0 1 290px;
    width:290px;
    max-width:290px;
    padding: 36px 20px;
    border-radius:12px;
    background:rgba(255, 255, 255, 0.04);
}
.wowza-box1 .streaming-feature-highlight .highlight-grid .item strong {
    display:block;
    font-family:var(--mainFont);
    font-size:48px;
    font-weight:700;
    line-height:1.05;
    letter-spacing:-0.03em;
    color:transparent;
    background-image:linear-gradient(90deg, var(--mainColor) 0%, #59f1ff 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}
.wowza-box1 .streaming-feature-highlight .highlight-grid .item strong .pretendard-unit {
    font-family:'Pretendard', sans-serif;
    font-weight:700;
}
.wowza-box1 .streaming-feature-highlight .highlight-grid .item p {
    margin-top:10px;
    font-size:18px;
    line-height:1.45;
    color:rgba(255, 255, 255, 0.58);
    letter-spacing:-0.02em;
}
@media screen and (max-width:1280px){
    .wowza-box1 .streaming-feature-highlight .highlight-head h4 { font-size:34px; }
    .wowza-box1 .streaming-feature-highlight .highlight-head p { font-size:17px; }
    .wowza-box1 .streaming-feature-highlight .highlight-grid .item strong { font-size:44px; }
    .wowza-box1 .streaming-feature-highlight .highlight-grid .item p { font-size:18px; }
}
@media screen and (max-width:1024px){
    .wowza-box1 .streaming-feature-highlight {
        margin-top:24px;
        padding:38px 30px;
    }
    .wowza-box1 .streaming-feature-highlight .highlight-head h4 { font-size:30px; }
    .wowza-box1 .streaming-feature-highlight .highlight-head p { font-size:16px; margin-top:12px; }
    .wowza-box1 .streaming-feature-highlight .highlight-grid {
        margin-top:26px;
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        justify-items:center;
    }
    .wowza-box1 .streaming-feature-highlight .highlight-grid .item { width:100%; }
    .wowza-box1 .streaming-feature-highlight .highlight-grid .item strong { font-size:40px; }
    .wowza-box1 .streaming-feature-highlight .highlight-grid .item p { font-size:17px; }
}
@media screen and (max-width:640px){
    .wowza-box1 .streaming-feature-highlight {
        margin-top:18px;
        padding:26px 20px;
    }
    .wowza-box1 .streaming-feature-highlight .highlight-head h4 { font-size:22px; }
    .wowza-box1 .streaming-feature-highlight .highlight-head p {
        margin-top:10px;
        font-size:14px;
        line-height:1.6;
    }
    .wowza-box1 .streaming-feature-highlight .highlight-grid {
        margin-top:18px;
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
        justify-items:stretch;
    }
    .wowza-box1 .streaming-feature-highlight .highlight-grid .item {
        width:100%;
        max-width:none;
        padding:16px 15px;
    }
    .wowza-box1 .streaming-feature-highlight .highlight-grid .item strong { font-size:34px; }
    .wowza-box1 .streaming-feature-highlight .highlight-grid .item p {
        margin-top:6px;
        font-size:15px;
    }
}

.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; background-color:#fff; margin-bottom:100px; }
.faq-list.bg { background-color:#f5f5f5; padding:100px 0;}
.faq-list .subTitle { text-align:center; }
.faq-list .subTitle h3 { color:var(--mainColor); font-size:40px; font-weight:600; line-height:130%; }
.faq-list .subTitle h3 strong { font-weight:700; }
.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:1110px){
    .faq-list.bg { margin:0;}
} 
@media screen and (max-width:1024px){
    .faq-list { padding:100px 0 0; }
    .faq-list.bg { padding:100px 0;}
    .faq-list .subTitle h3 { font-size:30px; }
    .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 .subTitle h3 { font-size:20px; }
    .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 .subTitle h3 { opacity:0; }
.faq-list.subOn .subTitle h3 { animation:ani_3 0.8s 0.2s; animation-fill-mode:both; }
.faq-list .listbox { opacity:0; }
.faq-list.subOn .listbox{ animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }

/* streaming-solution-intro: 하나의 안정적인 솔루션 (그레이 배경, arch-graphic/flow-track/node 재사용) */
.streaming-solution-intro {
    padding:90px 0 100px;
    background:#f5f5f5;
}
.streaming-solution-intro .subTitle h3 {
    font-size:28px;
    font-weight:700;
    color:#1f2937;
    letter-spacing:-0.02em;
}
.streaming-solution-intro .subTitle .txtbox {
    margin-top:14px;
    font-size:18px;
    color:#475569;
    font-weight:400;
}
.streaming-solution-intro .arch-graphic {
    margin-top:50px;
    border-radius:18px;
    background:#fbfbfb;
    padding:32px 24px;
}
.streaming-solution-intro .arch-graphic .flow-track {
    margin-top:0;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
}
.streaming-solution-intro .arch-graphic .node {
    width:132px;
    min-height:96px;
    padding:24px 16px;
    border:1px solid #d4deea;
    border-radius:10px;
    background:#fff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    align-items:center;
}
.streaming-solution-intro .arch-graphic .node svg {
    width:28px;
    height:28px;
    margin-bottom:12px;
}
.streaming-solution-intro .arch-graphic .node strong {
    font-size:17px;
    font-weight:700;
    color:#1e293b;
}
.streaming-solution-intro .arch-graphic .node p {
    margin-top:6px;
    font-size:14px;
    color:#64748b;
    line-height:1.4;
}
.streaming-solution-intro .arch-graphic .arrow {
    font-size:22px;
    font-weight:700;
    color:#8ba2bd;
    line-height:1;
}
@media screen and (max-width:640px){
    .streaming-solution-intro { padding:60px 0 70px; }
    .streaming-solution-intro .subTitle h3 { font-size:22px; }
    .streaming-solution-intro .subTitle .txtbox { font-size:16px; margin-top:10px; }
    .streaming-solution-intro .arch-graphic { margin-top:32px; padding:24px 14px; border-radius:12px; }
    .streaming-solution-intro .arch-graphic .flow-track { margin-top:0; gap:6px; }
    .streaming-solution-intro .arch-graphic .node { width:calc(50% - 6px); min-height:80px; padding:10px 8px; font-size:13px; }
    .streaming-solution-intro .arch-graphic .node strong { font-size:13px; }
    .streaming-solution-intro .arch-graphic .node p { font-size:12px; margin-top:4px; }
    .streaming-solution-intro .arch-graphic .arrow { font-size:16px; }
    .streaming-solution-intro .arch-graphic .flow-track .arrow { width:100%; display:block; text-align:center; font-size:0; line-height:1; }
    .streaming-solution-intro .arch-graphic .flow-track .arrow:before { content:"↓"; font-size:18px; font-weight:700; color:#8ba2bd; }
}

.Co-location { padding:140px 0; background:#fff; }
.Co-location .bg { background-color:#f5f5f5; }
.Co-location .subTitle .txtbox { margin-top:25px; }
.Co-location .subTitle .txtbox strong { color:var(--mainColor); }
.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 table .th-borer{ border-left: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 { text-align:center; 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; }
.provide-box .data-table tbody .txt2 { color:#0569ff; font-weight: 600; }
.proxmox-core-compare { padding:140px 0 140px; background:#fff; }
.proxmox-core-compare .listbox { margin-top:40px; }
.proxmox-core-compare .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.proxmox-core-compare .listbox li {
    width:calc((100% - 40px) / 3);
    border:1px solid #e3e8ef;
    border-radius:16px;
    background:#fff;
    box-shadow:0 8px 24px rgba(17, 24, 39, 0.06);
    padding:22px 24px 50px;
}
.proxmox-core-compare .listbox li .imgbox {
    width:150px;
    height:150px;
    margin:4px auto 0;
    border-radius:20px;
    background:#f7faff;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #e6edf8;
}
.proxmox-core-compare .listbox li .imgbox img {
    max-width:150px;
    max-height:150px;
    width:auto;
    height:auto;
    display:block;
}
.proxmox-core-compare .listbox li .txtbox { padding:28px 2px 0; text-align:center; }
.proxmox-core-compare .listbox li .txtbox dt { font-size:22px; font-weight:700; color:#1f2937; line-height:1.4; }
.proxmox-core-compare .listbox li .txtbox dt:after {
    content:'';
    display:block;
    width:38px;
    height:2px;
    margin:24px auto 0;
    background:#d0d0d0;
    border-radius:2px;
}
.proxmox-core-compare .listbox li .txtbox dd { margin-top:24px; font-size:17px; color:#4b5563; line-height:1.65; }
.proxmox-core-compare .listbox li { opacity:0; transform:translateY(24px); }
.proxmox-core-compare.subOn .listbox li:nth-child(1) {
    animation:ani_4 0.7s 0.1s;
    animation-fill-mode:both;
}
.proxmox-core-compare.subOn .listbox li:nth-child(2) {
    animation:ani_4 0.7s 0.25s;
    animation-fill-mode:both;
}
.proxmox-core-compare.subOn .listbox li:nth-child(3) {
    animation:ani_4 0.7s 0.4s;
    animation-fill-mode:both;
}
.proxmox-compare .data-table tbody td .compare-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}
.proxmox-compare .data-table tbody td .compare-badge:before {
    content:'';
    width:10px;
    height:10px;
    border-radius:50%;
    flex:0 0 10px;
}
.proxmox-compare .data-table tbody td .compare-badge.badge-green:before { background:#22c55e; }
.proxmox-compare .data-table tbody td .compare-badge.badge-blue:before { background:#3b82f6; }
.proxmox-compare .data-table tbody td .compare-badge.badge-red:before { background:#ef4444; }
.proxmox-compare .data-table tbody td.cell-green-bg { background:#f5fff5; }
.proxmox-compare .data-table thead th .platform-label {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}
.proxmox-compare .data-table thead th .platform-label img {
    width:18px;
    height:18px;
    object-fit:contain;
}
.proxmox-compare .data-table tbody td svg {
    vertical-align:middle;
    margin-right:4px;
}
/* migration type cards */
.migration-type-sec { padding:100px 0 120px;}
.migration-type-sec.bg { background:#ffffff; }
.migration-type-cards { margin-top:50px; }
.migration-type-cards ul { display:flex; flex-wrap:wrap; gap:20px; }
.migration-type-cards li {
    width:calc((100% - 60px) / 4);
    border:1px solid #e3e8ef;
    border-radius:16px;
    background:#fff;
    box-shadow:0 8px 24px rgba(17, 24, 39, 0.06);
    padding:28px 24px 32px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}
.migration-type-cards li .card-badge {
    width:56px;
    height:56px;
    border-radius:12px;
    background:var(--mainColor);
    color:#fff;
    font-size:18px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}
.migration-type-cards li .card-txtbox { margin-top:20px; }
.migration-type-cards li .card-txtbox dt {
    font-size:20px;
    font-weight:700;
    color:#1f2937;
    line-height:1.4;
}
.migration-type-cards li .card-txtbox dt:after {
    content:'';
    display:block;
    width:32px;
    height:2px;
    margin:16px auto 0;
    background:#d0d0d0;
    border-radius:2px;
}
.migration-type-cards li .card-txtbox dd { margin-top:16px; font-size:17px; color:#4b5563; line-height:1.55; }
@media screen and (max-width:1024px){
    .migration-type-sec { padding:80px 0 100px; }
    .migration-type-cards { margin-top:40px; }
    .migration-type-cards ul { gap:15px; }
    .migration-type-cards li { width:calc((100% - 15px) / 2); }
}
@media screen and (max-width:640px){
    .migration-type-sec { padding:60px 0 80px; }
    .migration-type-cards { margin-top:30px; }
    .migration-type-cards ul { gap:12px; }
    .migration-type-cards li { width:100%; padding:24px 20px 28px; }
    .migration-type-cards li .card-txtbox dt { font-size:18px; }
    .migration-type-cards li .card-txtbox dd { font-size:15px; }
}

/* support env section */
.support-env-sec { padding:140px 0 140px; }
.support-env-cards {
    margin-top:40px;
    padding:36px 40px;
    border-radius:16px;
    background:linear-gradient(180deg, #f8fafc 0%, #f2f6fa 100%);
    border:1px solid #e6edf5;
    width: 100%;
}
.support-env-cards ul {
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    list-style:none;
    padding:0;
    margin:0;
}
.support-env-cards li {
    display:flex;
    align-items:center;
    gap:14px;
    width:calc((100% - 32px) / 3);
    padding:18px 24px;
    border-radius:12px;
    background:#fff;
    border:1px solid #e3e8ef;
    box-shadow:0 2px 8px rgba(17, 24, 39, 0.04);
}
.support-env-cards li .env-icon {
    flex:0 0 40px;
    width:40px;
    height:40px;
    border-radius:10px;
    background:var(--mainColor);
    position:relative;
}
.support-env-cards li .env-icon::after {
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%) rotate(-45deg);
    width:8px;
    height:14px;
    border:2px solid #fff;
    border-top:none;
    border-left:none;
}
.support-env-cards li .env-txt {
    font-size:18px;
    font-weight:600;
    color:#1f2937;
}
@media screen and (max-width:640px){
    .support-env-sec { padding:0 0 60px; }
    .support-env-cards { margin-top:30px; padding:24px 20px; }
    .support-env-cards ul { gap:12px; }
    .support-env-cards li { width:100%; padding:16px 20px; }
    .support-env-cards li .env-icon { width:36px; height:36px; flex:0 0 36px; }
    .support-env-cards li .env-txt { font-size:16px; }
}

/* migration scope section */
.migration-scope-sec {
    padding:100px 0;
    background:linear-gradient(180deg, #f8fafc 0%, #fff 40%, #f5f9ff 100%);
}
/* Proxmox 기술지원 범위 - 흰색 배경 */
.migration-scope-sec.proxmox-support-scope-sec {
    background:#fff;
}
/* Proxmox 페이지 섹션 배경 교차 (그레이/화이트) */
.proxmox-sec-gray { background:#f5f5f5; }
.proxmox-sec-white { background:#fff; }
.migration-scope-cards {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:28px;
    margin-top:48px;
}
.migration-scope-card {
    padding:0;
    border-radius:20px;
    overflow:hidden;
    border:1px solid #e3e8ef;
}
.migration-scope-card-included {
    background:linear-gradient(180deg, #fff 0%, #f8fcff 100%);
    border-color:rgba(5, 105, 255, 0.2);
}
.migration-scope-card-option {
    background:linear-gradient(180deg, #fff 0%, #f8f9fb 100%);
}
.migration-scope-card-header {
    display:flex;
    align-items:center;
    gap:14px;
    padding:24px 28px;
}
.migration-scope-card-included .migration-scope-card-header {
    background:linear-gradient(135deg, rgba(5, 105, 255, 0.08) 0%, rgba(5, 105, 255, 0.03) 100%);
    border-bottom:1px solid rgba(5, 105, 255, 0.12);
}
.migration-scope-card-option .migration-scope-card-header {
    background:linear-gradient(135deg, rgba(75, 85, 99, 0.06) 0%, rgba(75, 85, 99, 0.02) 100%);
    border-bottom:1px solid rgba(75, 85, 99, 0.1);
}
.migration-scope-icon {
    width:44px;
    height:44px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.migration-scope-icon-check {
    background:var(--mainColor);
    position:relative;
}
.migration-scope-icon-check::after {
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -55%) rotate(-45deg);
    width:10px;
    height:16px;
    border:2.5px solid #fff;
    border-top:none;
    border-left:none;
}
.migration-scope-icon-plus {
    background:#4b5563;
    position:relative;
}
.migration-scope-icon-plus::before,
.migration-scope-icon-plus::after {
    content:'';
    position:absolute;
    left:50%;
    top:50%;
    background:#fff;
}
.migration-scope-icon-plus::before {
    width:14px;
    height:2px;
    transform:translate(-50%, -50%);
}
.migration-scope-icon-plus::after {
    width:2px;
    height:14px;
    transform:translate(-50%, -50%);
}
.migration-scope-chip {
    display:inline-block;
    padding:8px 18px;
    border-radius:10px;
    background:var(--mainColor);
    color:#fff;
    font-size:17px;
    font-weight:700;
}
.migration-scope-chip-opt {
    background:#4b5563;
}
.migration-scope-list {
    list-style:none;
    padding:8px 28px 0px;
    margin:0;
}
.migration-scope-list li {
    position:relative;
    padding:14px 0 14px 36px;
    font-size:18px;
    color:#333;
    line-height:1.55;
}
.migration-scope-list li::before {
    content:'';
    position:absolute;
    left:0;
    top:22px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--mainColor);
}
.migration-scope-card-option .migration-scope-list li::before {
    background:#4b5563;
}
.migration-scope-list li:not(:last-child) {
    border-bottom:1px dashed #e8ecf2;
}
@media screen and (max-width:768px){
    .migration-scope-sec { padding:60px 0; }
    .migration-scope-cards { grid-template-columns:1fr; margin-top:36px; gap:20px; }
}
@media screen and (max-width:640px){
    .migration-scope-card-header { padding:20px 22px; }
    .migration-scope-list { padding:22px 22px 28px; }
    .migration-scope-list li { font-size:16px; padding:12px 0 12px 32px; }
}

/* cloud_migration page animation */
.source-top.product-table .data-table,
.source-top.product-table .vm-proxmox-banner { opacity:0; }
.source-top.subOn .data-table { animation:ani_4 0.8s 0.2s; animation-fill-mode:both; }
.source-top.subOn .vm-proxmox-banner { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }

.migration-type-sec .migration-type-cards li { opacity:0; }
.migration-type-sec.subOn .migration-type-cards li:nth-child(1) { animation:ani_4 0.7s 0.2s; animation-fill-mode:both; }
.migration-type-sec.subOn .migration-type-cards li:nth-child(2) { animation:ani_4 0.7s 0.35s; animation-fill-mode:both; }
.migration-type-sec.subOn .migration-type-cards li:nth-child(3) { animation:ani_4 0.7s 0.5s; animation-fill-mode:both; }
.migration-type-sec.subOn .migration-type-cards li:nth-child(4) { animation:ani_4 0.7s 0.65s; animation-fill-mode:both; }

.support-env-sec .support-env-cards li { opacity:0; }
.support-env-sec.subOn .support-env-cards li:nth-child(1) { animation:ani_4 0.6s 0.15s; animation-fill-mode:both; }
.support-env-sec.subOn .support-env-cards li:nth-child(2) { animation:ani_4 0.6s 0.25s; animation-fill-mode:both; }
.support-env-sec.subOn .support-env-cards li:nth-child(3) { animation:ani_4 0.6s 0.35s; animation-fill-mode:both; }
.support-env-sec.subOn .support-env-cards li:nth-child(4) { animation:ani_4 0.6s 0.45s; animation-fill-mode:both; }
.support-env-sec.subOn .support-env-cards li:nth-child(5) { animation:ani_4 0.6s 0.55s; animation-fill-mode:both; }

.proxmox-project-wrap .proxmox-project-card { opacity:0; }
.proxmox-project-wrap.subOn .proxmox-project-card:nth-child(1) { animation:ani_4 0.6s 0.1s; animation-fill-mode:both; }
.proxmox-project-wrap.subOn .proxmox-project-card:nth-child(2) { animation:ani_4 0.6s 0.2s; animation-fill-mode:both; }
.proxmox-project-wrap.subOn .proxmox-project-card:nth-child(3) { animation:ani_4 0.6s 0.3s; animation-fill-mode:both; }
.proxmox-project-wrap.subOn .proxmox-project-card:nth-child(4) { animation:ani_4 0.6s 0.4s; animation-fill-mode:both; }
.proxmox-project-wrap.subOn .proxmox-project-card:nth-child(5) { animation:ani_4 0.6s 0.5s; animation-fill-mode:both; }
.proxmox-project-wrap.subOn .proxmox-project-card:nth-child(6) { animation:ani_4 0.6s 0.6s; animation-fill-mode:both; }
.proxmox-project-wrap.subOn .proxmox-project-card:nth-child(7) { animation:ani_4 0.6s 0.7s; animation-fill-mode:both; }
.proxmox-project-wrap.subOn .proxmox-project-card:nth-child(8) { animation:ani_4 0.6s 0.8s; animation-fill-mode:both; }

.migration-scope-sec .migration-scope-card { opacity:0; }
.migration-scope-sec.subOn .migration-scope-card:nth-child(1) { animation:ani_4 0.7s 0.2s; animation-fill-mode:both; }
.migration-scope-sec.subOn .migration-scope-card:nth-child(2) { animation:ani_4 0.7s 0.4s; animation-fill-mode:both; }

.cloud-private.migration-strength .listbox li { opacity:0; }
.cloud-private.migration-strength.subOn .listbox li:nth-child(1) { animation:ani_4 0.7s 0.2s; animation-fill-mode:both; }
.cloud-private.migration-strength.subOn .listbox li:nth-child(2) { animation:ani_4 0.7s 0.4s; animation-fill-mode:both; }
.cloud-private.migration-strength.subOn .listbox li:nth-child(3) { animation:ani_4 0.7s 0.6s; animation-fill-mode:both; }
/* cloudflare-why-strength: 6개 항목 애니메이션 확장 */
.cloud-private.migration-strength.cloudflare-why-strength.subOn .listbox li:nth-child(4) { animation:ani_4 0.7s 0.8s; animation-fill-mode:both; }
.cloud-private.migration-strength.cloudflare-why-strength.subOn .listbox li:nth-child(5) { animation:ani_4 0.7s 1.0s; animation-fill-mode:both; }
.cloud-private.migration-strength.cloudflare-why-strength.subOn .listbox li:nth-child(6) { animation:ani_4 0.7s 1.2s; animation-fill-mode:both; }

/* vmware-proxmox compare banner */
.vm-proxmox-banner {
    margin-top:32px;
    padding:24px 36px;
    border-radius:8px;
    border: 1px solid #daddec;
    background:linear-gradient(145deg, #f8fbff 0%, #eef4ff 35%, #f5f9ff 100%);
}
.vm-proxmox-banner-txt {
    margin:0;
    text-align:center;
    font-size:20px;
    font-weight:500;
    color:#353535;
    line-height:1.5;
}
.vm-proxmox-banner-txt .banner-percent {
    color:var(--mainColor);
    font-weight:700;
}
@media screen and (max-width:640px){
    .vm-proxmox-banner { padding:18px 24px; margin-top:24px; }
    .vm-proxmox-banner-txt { font-size:17px; }
}
@media screen and (max-width:1024px){
    .proxmox-core-compare .listbox { margin-top:30px; }
    .proxmox-core-compare .listbox ul { gap:15px; }
    .proxmox-core-compare .listbox li { width:calc((100% - 15px) / 2); }
    .proxmox-core-compare .listbox li { padding:20px 18px 22px; }
    .proxmox-core-compare .listbox li .imgbox { width:140px; height:140px; }
    .proxmox-core-compare .listbox li .imgbox img { max-width:140px; max-height:140px; }
    .proxmox-core-compare .listbox li .txtbox { padding:16px 0 0; }
    .proxmox-core-compare .listbox li .txtbox dt { font-size:20px; }
    .proxmox-core-compare .listbox li .txtbox dd { font-size:16px; }
    .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:100%; }
}
@media screen and (max-width:640px){
    .proxmox-core-compare { padding:30px 0 0; }
    .proxmox-core-compare .listbox { margin-top:20px; }
    .proxmox-core-compare .listbox ul { gap:10px; }
    .proxmox-core-compare .listbox li { width:100%; border-radius:12px; padding:16px 14px 18px; }
    .proxmox-core-compare .listbox li .imgbox { width:120px; height:120px; border-radius:16px; }
    .proxmox-core-compare .listbox li .imgbox img { max-width:120px; max-height:120px; }
    .proxmox-core-compare .listbox li .txtbox { padding:14px 0 0; }
    .proxmox-core-compare .listbox li .txtbox dt { font-size:17px; }
    .proxmox-core-compare .listbox li .txtbox dd { margin-top:8px; font-size:14px; }
    .provide-box { padding:80px 0; }
    .provide-box .data-table { margin-top:30px; }
    .provide-box .data-table thead th { height:50px; font-size:13px; }
    .provide-box .data-table tbody th,tr { height:50px; font-size:13px;line-height: 20px;}
    .provide-box .data-table tbody tr td { font-size: 13px;}
}

/* animation */
.provide-box .data-table { opacity:0; }
.provide-box.subOn .data-table { animation:ani_4 0.8s 0.2s; animation-fill-mode:both; }
/* Proxmox 기술지원 - provide-box에 ani 없어 subOn 미적용, 표 항상 표시 */
.cloud-private.proxmox-support-wrap { padding-top: 0; }
.proxmox-support-wrap .provide-box .data-table { opacity:1 !important; }
.proxmox-support-wrap.subOn .provide-box .data-table { animation:ani_4 0.8s 0.2s; animation-fill-mode:both; }

/* product table */
.product-table .data-table{ background:#fff; }
.product-table .data-table table { border:1px solid #ddd; }
.product-table .data-table table .th-borer{ border-left:1px solid #ddd; }
.product-table .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;  }
.product-table .data-table thead th:first-child { border-left:none; }
.product-table .data-table tbody th { text-align:center; height:60px; font-size:17px; font-weight:600; color:#222; border:1px solid #ddd; border-width:0 0 1px 0; }
.product-table .data-table tbody th.th-center { text-align:center; padding-left:10px; padding-right:10px; }
.product-table.network-switch2 .data-table tbody th.th-center { font-weight:400; }
.product-table .data-table tbody td { word-break:keep-all; padding:6px 10px; text-align:center; font-size:15px; font-weight:400; color:#444; line-height:1.5; border:1px solid #ddd; border-width:0 0 1px 1px; }
.product-table .data-table tbody td .stxt { font-size:15px; display:block; }
.product-table .data-table tbody .txt2 { color:#0569ff; font-weight: 600; }
@media screen and (max-width:1024px){
    .product-table .data-table thead th { height:40px; font-size:16px; }
    .product-table .data-table tbody th { height:40px; padding:12px 15px; font-size:15px;}
    .product-table .data-table tbody td { padding:4px 10px; font-size:15px; }
    .product-table .data-table tbody td .stxt { font-size:14px; }
}
@media screen and (max-width:960px){
    .product-table .data-table { overflow:auto; }
    .product-table .data-table table { width:100%; }
}
@media screen and (max-width:640px){
    .product-table .data-table thead th { height:40px; font-size:13px; }
    .product-table .data-table tbody th,tr { height:40px; font-size:13px;line-height: 20px;}
    .product-table .data-table tbody tr td { font-size: 13px;}
}

.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 .txt2 { font-size:18px; font-weight:500; 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:var(--mainColor); font-size:28px; font-weight:500; line-height:1.3; }
.managed-box1 .listbox .circle .txt2 { margin-top:7px; font-size:18px; font-weight:450; line-height:1.7; }
.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 .txt2 { margin-top:5px; font-size:15px; }
    .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 .txt2 { margin-top:5px; font-size:13px; }
    .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; }
.managed-box2 .dataTable tbody.txtst th {padding: 30px 0px 30px 25px;}
.managed-box2 .dataTable tbody.txtst th p {line-height: 1.2; color: #333; padding-top: 5px;}
.managed-box2 .dataTable tbody.txtst strong { font-weight: 500; color: #0569ff;}
.managed-box2 .subtxt { font-size: 16px; padding: 25px; line-height: 25px; }
.managed-box2 .subtxt strong { font-weight:600; color: #0569ff; }
@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; }
    .managed-box2 .subtxt { font-size: 15px; padding: 25px; line-height: 25px; }
}
@media screen and (max-width:960px){
    .managed-box2 .dataTable { overflow:auto; }
    .managed-box2 .dataTable table { width:100%; }
}
@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; }
    .managed-box2 .dataTable thead th { font-size: 13px; }
    .managed-box2 .dataTable tbody th,td { font-size: 13px; }
    .managed-box2 .subtxt { font-size: 14px; padding: 25px; line-height: 25px; }
}

/* 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; background: #fff; }
.software-box1.bg { background: #f5f5f5; }
.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 td strong { font-weight: 600; }
.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:100%; }
}
@media screen and (max-width:640px){
    .software-box1 { padding-bottom:80px; }
    .software-box1 .dataTable { margin-top:30px; }
    .software-box1 .dataTable thead th { font-size:14px; }
    .software-box1 .dataTable tbody td { font-size:14px; }
}

/* 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-box1 .companyIntro .subTitle { max-width: 100%; }
.drBackUp-box1 .companyIntro .subTitle .imgTit { margin-bottom:25px; width: 100%; height: 100%; }
.drBackUp-box1 .companyIntro .listbox { margin-top:50px; display:flex; flex-wrap:wrap; gap:0 20px;  }
.drBackUp-box1 .companyIntro .listbox .l-box { width:calc(60% - 10px); }
.drBackUp-box1 .companyIntro .listbox .r-box { width:calc(40% - 10px); background:#fff; border-radius:15px; height:535px; display:flex; align-items:center; justify-content:center; padding:0 50px; }
.drBackUp-box1 .companyIntro .listbox .r-box img { max-width:100%; }
.drBackUp-box1 .companyIntro .listbox .l-box li:not(:last-child) { margin-bottom:20px; }
.drBackUp-box1 .companyIntro .listbox .l-box li { height:165px; display:flex; align-items:center; background:#fff; border-radius:15px; padding-left:40px; }
.drBackUp-box1 .companyIntro .listbox .l-box li .icon { width:98px; height:98px; background:#f9f9f9; border-radius:98px; display:flex; align-items:center; justify-content:center; }
.drBackUp-box1 .companyIntro .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.6; letter-spacing:-0.01em; }
.drBackUp-box1 .companyIntro .listbox .l-box li .txtbox strong { color: var(--mainColor); font-weight:600; word-break:keep-all; border-bottom: 2px solid var(--mainColor); line-height: 2; }
.drBackUp-box1 .companyIntro .listbox .l-box li .txtbox span { font-weight:600; line-height: 2; letter-spacing: 2px; }

.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:22px; 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; }
    .drBackUp-box1 .companyIntro .subTitle .imgTit img { height:100%; }
}
@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-box1 .companyIntro .subTitle .imgTit { margin-bottom:20px; }
    .drBackUp-box1 .companyIntro .subTitle .imgTit img { height:100%; }
    .drBackUp-box1 .companyIntro .listbox .l-box li { padding-left:25px; }
    .drBackUp-box1 .companyIntro .listbox .l-box li .txtbox { font-size:18px; }

    .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-box1 .companyIntro .subTitle .imgTit { margin-bottom:20px; }
    .drBackUp-box1 .companyIntro .subTitle .imgTit img { height:100%; }
    .drBackUp-box1 .companyIntro .listbox .l-box li { padding-left:25px; }
    .drBackUp-box1 .companyIntro .listbox .l-box li .txtbox { font-size:16px; }
    .drBackUp-box1 .companyIntro .listbox .l-box li .txtbox br { display: inline-block; }

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

    .drBackUp-box1 .companyIntro .listbox .l-box { width:100%; margin-top:20px; padding:40px 15px; height:auto; background-color: #fff; }
    .drBackUp-box1 .companyIntro .listbox .l-box li { display: block; width: 100%; background: none; padding: 0 5px; }
    .drBackUp-box1 .companyIntro .listbox .l-box li .txtbox { font-size:15px; width: 100%; padding: 10px; line-height: 1.5; }
    .drBackUp-box1 .companyIntro .listbox .l-box li .txtbox br { display: inline-block; }
    .drBackUp-box1 .companyIntro .listbox .r-box { width:100%; }
    .drBackUp-box1 .companyIntro .listbox .l-box li .icon { display: none; }
    .drBackUp-box1 .companyIntro .listbox .l-box li .txtbox strong { line-height: 4; font-size: 17px; }
}
@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; }

/* Wowza Streaming Engine 가격 플랜 - 전용 클래스로 다른 페이지와 격리 */
.wowza-price-plan {
    position:relative; padding:100px 0 120px; background:#f5f5f5; overflow:hidden;
}
.wowza-price-plan: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; z-index:1;
}
.wowza-price-plan: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; z-index:1;
}
.wowza-price-plan .inner { position:relative; z-index:2; }
.wowza-price-plan__header { text-align:center; }
.wowza-price-plan__header h3 { color:var(--mainColor); font-size:40px; font-weight:700 !important; line-height:130%; }
.wowza-price-plan__header h3 strong { font-weight:700 !important; }
.wowza-price-plan__subtxt { margin-top:16px; font-size:20px; color:#475569; line-height:1.6; }
.wowza-price-plan__listbox { margin-top:50px; }
.wowza-price-plan__listbox > ul { display:flex; flex-wrap:wrap; gap:24px; justify-content:center; }
.wowza-price-plan__item {
    flex:1; min-width:280px; max-width:380px;
    border:1px solid #e8eef6;
    border-radius:18px;
    background: #ffffff;
    box-shadow:0 8px 24px rgba(15, 23, 42, 0.05);
    padding:64px 28px 32px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position:relative;
}
.wowza-price-plan__item:hover {
    transform:translateY(-4px);
    border-color:#c8d7eb;
    box-shadow:0 18px 34px rgba(15, 23, 42, 0.09);
}
.wowza-price-plan__item--popular {
    border:1px solid var(--mainColor);
    box-shadow:0 12px 32px rgba(5, 105, 255, 0.12);
}
.wowza-price-plan__item--popular:hover { box-shadow:0 18px 40px rgba(5, 105, 255, 0.15); }
.wowza-price-plan__badge {
    position:absolute; top:20px; right:20px;
    padding:6px 16px;
    background:var(--mainColor); color:#fff;
    font-size:13px; font-weight:700; border-radius:999px;
    letter-spacing:0.02em; z-index:2;
}
.wowza-price-plan__item-title {
    margin:0 0 12px; font-size:26px; font-weight:700;
    color:#1f2937; line-height:1.3; letter-spacing:-0.02em;
}
.wowza-price-plan__item-desc {
    margin:0 0 12px; font-size:16px; color:#475569; width:100%;
    line-height:1.6; letter-spacing:-0.02em;
    padding-bottom:20px; border-bottom:1px solid #e2e8f0;
}
.wowza-price-plan__features {
    margin:0 auto 28px; padding:16px 0 0; list-style:none;
    flex:1; text-align:left; max-width:100%;
}
.wowza-price-plan__features li {
    position:relative; padding-left:32px; margin-bottom:12px;
    font-size:15px; color:#475569; line-height:1.5;
    min-height:auto; display:block;
    background:transparent !important;
}
.wowza-price-plan__features li strong { font-weight:700 !important; }
.wowza-price-plan__chk {
    position:absolute; left:0; top:1px;
    width:18px; height:18px;
    color: #aaa;
}
.wowza-price-plan__chk svg {
    width:100%; height:100%; display:block;
}
.wowza-price-plan__features li strong { font-weight:700 !important; }
.wowza-price-plan__features li:last-child { margin-bottom:0; }
.wowza-price-plan__btn {
    position:relative; width:100%; max-width:200px; margin:0 auto;
    height:50px; overflow:hidden;
    border:1px solid var(--mainColor); border-radius:50px;
    transition:all 0.3s; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
}
.wowza-price-plan__btn:hover { background:var(--mainColor); }
.wowza-price-plan__btn a {
    width:100%; height:100%; display:flex; align-items:center; justify-content:center;
    font-size:16px; font-weight:600; color:var(--mainColor);
    transition:all 0.3s; cursor:pointer;
}
.wowza-price-plan__btn a span {
    padding:4px 22px 4px 0;
    background:url(../img/common/btn_arr1.png) right center no-repeat;
    font-weight:500; font-size:16px;
}
.wowza-price-plan__btn:hover a { color:#fff; }
.wowza-price-plan__btn:hover a span { filter:brightness(0) invert(1); }
/* cloudflare-service-plan: 배경·여백, product-list .btn 스타일 적용 */
.cloudflare-service-plan.wowza-price-plan { background:#fff; padding:140px 0; }
.cloudflare-service-plan .wowza-price-plan__item .btn { position:relative; margin:0 auto; width:150px; height:50px; overflow:hidden; border:1px solid var(--mainColor); border-radius:50px; }
.cloudflare-service-plan .wowza-price-plan__item .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; text-decoration:none; }
.cloudflare-service-plan .wowza-price-plan__item .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; }
.cloudflare-service-plan .wowza-price-plan__item .btn a:hover { background:var(--mainColor); }
.cloudflare-service-plan .wowza-price-plan__item .btn a:hover span { filter:brightness(0) invert(1); }
@media screen and (max-width:1024px){
    .wowza-price-plan { padding:80px 0 100px; }
    .cloudflare-service-plan.wowza-price-plan { padding:110px 0 120px; }
    .wowza-price-plan__header h3 { font-size:32px; }
    .wowza-price-plan__subtxt { font-size:18px; }
    .wowza-price-plan__listbox { margin-top:40px; }
    .wowza-price-plan__listbox > ul { gap:20px; }
    .wowza-price-plan__item { min-width:calc((100% - 20px) / 2); max-width:none; }
}
@media screen and (max-width:640px){
    .wowza-price-plan { padding:60px 0 80px; }
    .cloudflare-service-plan.wowza-price-plan { padding:90px 0 100px; }
    .wowza-price-plan__header h3 { font-size:26px; }
    .wowza-price-plan__subtxt { font-size:16px; margin-top:12px; }
    .wowza-price-plan__listbox { margin-top:30px; }
    .wowza-price-plan__listbox > ul { gap:16px; flex-direction:column; align-items:center; }
    .wowza-price-plan__item { min-width:100%; max-width:400px; padding:28px 22px 26px; }
    .wowza-price-plan__item-title { font-size:22px; }
    .wowza-price-plan__item-desc { font-size:15px; margin-bottom:20px; }
    .wowza-price-plan__features li { font-size:14px; }
}
.wowza-price-plan__listbox { opacity:0; }
.wowza-price-plan.subOn .wowza-price-plan__listbox { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }

/* streaming feature highlight - 타이틀 없음 */
.streaming-feature-highlight { padding:0px 0; }
.streaming-feature-highlight .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
.streaming-feature-highlight .listbox li {
    width:calc((100% - 60px) / 4);
    border:1px solid #e3e8ef;
    border-radius:16px;
    background:#fff;
    padding:32px 24px;
    display:flex;
    align-items:center;
    gap:20px;
}
.streaming-feature-highlight .listbox .icon {
    width:64px;
    height:64px;
    min-width:64px;
    border-radius:14px;
    background:#f9f9f9;
    display:flex;
    align-items:center;
    justify-content:center;
}
.streaming-feature-highlight .listbox .icon img { width:36px; height:36px; object-fit:contain; }
.streaming-feature-highlight .listbox .txtbox strong { font-size:18px; font-weight:700; color:#1f2937; }
.streaming-feature-highlight.subOn .listbox li:nth-child(1) { animation:ani_4 0.6s 0.1s; animation-fill-mode:both; }
.streaming-feature-highlight.subOn .listbox li:nth-child(2) { animation:ani_4 0.6s 0.2s; animation-fill-mode:both; }
.streaming-feature-highlight.subOn .listbox li:nth-child(3) { animation:ani_4 0.6s 0.3s; animation-fill-mode:both; }
.streaming-feature-highlight.subOn .listbox li:nth-child(4) { animation:ani_4 0.6s 0.4s; animation-fill-mode:both; }
.streaming-feature-highlight .listbox li { opacity:0; }
@media screen and (max-width:1024px){
    .streaming-feature-highlight .listbox li { width:calc((100% - 20px) / 2); }
}
@media screen and (max-width:640px){
    .streaming-feature-highlight { padding:50px 0; }
    .streaming-feature-highlight .listbox li { width:100%; padding:24px 20px; }
    .streaming-feature-highlight .listbox .icon { width:56px; height:56px; min-width:56px; }
    .streaming-feature-highlight .listbox .icon img { width:28px; height:28px; }
    .streaming-feature-highlight .listbox .txtbox strong { font-size:16px; }
}

.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 .subTitle .txtbox { margin-top:25px; }
.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:400; color:#222; line-height:1.5; }
.security-WAF .WAF-effect .listbox li .circle-box .txt strong { font-weight: 600; }
@media screen and (max-width:1280px){
    .security-WAF .WAF-function .listbox li { padding:0 10px 0 25px; }
    .security-WAF .WAF-function .listbox li .txtbox { padding-left:25px; }
    .security-WAF .WAF-function .listbox li .txtbox br { display:none }
    .security-WAF .WAF-effect .listbox ul { gap:30px; padding:30px; }
    .security-WAF .WAF-effect .listbox li { width:calc((100% - 120px) / 5); }
    .security-WAF .WAF-effect .listbox li .circle-box .txt { margin-top:8px; font-size:17px; padding:0 10px; }
    .security-WAF .WAF-effect .listbox li .circle-box .txt br { display:none }
}
@media screen and (max-width:1024px){
    .security-WAF .WAF-function { padding:100px 0; }
    .security-WAF .WAF-function .listbox { margin-top:40px; }
    .security-WAF .WAF-function .listbox li { width:calc((100% - 20px) / 2); padding:0 10px 0 20px; }
    .security-WAF .WAF-function .listbox li .txtbox { padding-left:20px; font-size:18px; }
    .security-WAF .WAF-function .listbox li .txtbox br { display:none }
    .security-WAF .WAF-effect { padding:100px 0; }
    .security-WAF .WAF-effect .listbox { margin-top:40px; }
    .security-WAF .WAF-effect .listbox ul { gap:30px 40px; padding:40px 100px; }
    .security-WAF .WAF-effect .listbox li { width:calc((100% - 80px) / 3); }
    .security-WAF .WAF-effect .listbox li .circle-box .num { font-size:16px; }
    .security-WAF .WAF-effect .listbox li .circle-box .txt { margin-top:5px; font-size:16px; }
}
@media screen and (max-width:860px){
    .security-WAF .WAF-function .listbox ul { gap:10px; }
    .security-WAF .WAF-function .listbox li { width:calc((100% - 10px) / 2); }
    .security-WAF .WAF-effect .listbox ul { gap:20px; border-radius:100px; padding:40px;}
    .security-WAF .WAF-effect .listbox li { width:calc((100% - 20px) / 2); }
    .security-WAF .WAF-effect .listbox li .circle-box .txt { padding:0 30px; }
}
@media screen and (max-width:640px){
    .security-WAF .WAF-function .listbox { margin-top:30px; }
    .security-WAF .WAF-function .listbox li { padding:10px; height:auto; }
    .security-WAF .WAF-function .listbox li .icon { width:70px; height:70px; }
    .security-WAF .WAF-function .listbox li .icon img { width:35px; }
    .security-WAF .WAF-function .listbox li .txtbox { font-size:16px; }
    .security-WAF .WAF-effect { padding:80px 0; }
    .security-WAF .WAF-effect .listbox { margin-top:30px; }
    .security-WAF .WAF-effect .listbox ul { gap:10px; padding:20px 10px;}
    .security-WAF .WAF-effect .listbox li .circle-box .num,
    .security-WAF .WAF-effect .listbox li .circle-box .txt { font-size:15px; }
    .security-WAF .WAF-effect .listbox li .circle-box .txt { padding:0 10px; }
}
@media screen and (max-width:550px){
    .security-WAF .WAF-function .listbox li { width:100%; }
}

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


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

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



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


.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 .subTitle .txtbox { margin-top: 25px; }
.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; background:#fff; }
.loadBalancer-box * { word-break:keep-all; }
.loadBalancer-box.bg { background:#f5f5f5; }
.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; cursor: pointer;}
.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-hosting2 .listbox li .txtbox .top-list { display: flex; align-items: center; }
.global-hosting.global-hosting2 .listbox li .txtbox .btn { display: flex; justify-content: center; background-color: #222; border-radius: 50px; width: 150px; height: 100%; padding: 16px 12px; }
.global-hosting.global-hosting2 .listbox li .txtbox .btn a { color: #fff;  align-items: center; font-size: smaller; }
.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-hosting2 .listbox li .txtbox .btn { width: 140px; height: 100%; padding: 12px 12px; margin-left: 10px; }
    .global-hosting.global-hosting2 .listbox li .txtbox .btn a { font-size: 17px; }
    .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-hosting2 .listbox li .txtbox .btn { width: 130px; height: 100%; padding: 12px 12px; margin-left: 20px; }
    .global-hosting.global-hosting2 .listbox li .txtbox .btn a { font-size: 15px; }
    .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-hosting2 .listbox li .txtbox .btn { width: 130px; height: 100%; padding: 12px; margin-left: 30px; }
    .global-hosting.global-hosting2 .listbox li .txtbox .btn a { 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:15px; }
    .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; } */
    .global-hosting.global-hosting2 .listbox li .txtbox { width:calc(100% - 30px); padding-left:15px; font-size:16px; flex-direction: column; }
    .global-hosting.global-hosting2 .listbox li .txtbox .txt-list { justify-content: right; margin-left: 65%; }
    .global-hosting.global-hosting2 .listbox li .txtbox .btn { width: 130px; height: 100%; padding: 7px; background: none; border: 1px solid #0569ff; }
    .global-hosting.global-hosting2 .listbox li .txtbox .btn a { color:#222; font-size: 15px; line-height: 1.5; justify-content: center; align-items: center; }
}

/* 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; }
/* cloudflare-4step: n단계 원 밖 위에, 아이콘/타이틀/서브 문구 가운데 정렬 */
.media-streaming.streaming-box3.cloudflare-4step .listbox .s-box .circle-box .box { padding:20px 16px; align-items:center; justify-content:center; }
.media-streaming.streaming-box3.cloudflare-4step .listbox .s-box .circle-box .box .step-num { position:absolute; top:-36px; left:50%; transform:translateX(-50%); font-size:24px; font-weight:700; color:var(--mainColor); letter-spacing:-0.02em; white-space:nowrap; z-index:6; }
.media-streaming.streaming-box3.cloudflare-4step .listbox .s-box .circle-box .box .icon { flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-bottom: 12px; }
.media-streaming.streaming-box3.cloudflare-4step .listbox .s-box .circle-box .box .icon img { width:56px; }
.media-streaming.streaming-box3.cloudflare-4step .listbox .s-box .circle-box .box .txtbox { margin-top:10px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; }
.media-streaming.streaming-box3.cloudflare-4step .listbox .s-box .circle-box .box .step-tit { font-size:20px; font-weight:700; color:#222; line-height:1.35; letter-spacing:-0.02em; }
.media-streaming.streaming-box3.cloudflare-4step .listbox .s-box .circle-box .box .step-desc { font-size:14px; font-weight:400; color:#666; 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.cloudflare-4step .listbox .s-box .circle-box .box .step-tit { font-size:18px; }
    .media-streaming.streaming-box3.cloudflare-4step .listbox .s-box .circle-box .box .step-desc { font-size:12px; }
    .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:0; margin:0 auto; gap:50px; }
    .media-streaming.streaming-box3 .listbox .s-box .circle-box { width:220px; margin:0 auto; }
    .media-streaming.streaming-box3.cloudflare-4step .listbox .s-box .circle-box .box .step-num { top:16px; font-size:20px; }
    .media-streaming.streaming-box3.cloudflare-4step .listbox .s-box .circle-box .box { padding:16px 12px; }
    .media-streaming.streaming-box3.cloudflare-4step .listbox .s-box .circle-box .box .icon { margin-bottom: 0; }
    .media-streaming.streaming-box3.cloudflare-4step .listbox .s-box .circle-box .box .icon img { width:32px; }
    .media-streaming.streaming-box3.cloudflare-4step .listbox .s-box .circle-box .box .step-tit { font-size:17px; }
    .media-streaming.streaming-box3.cloudflare-4step .listbox .s-box .circle-box .box .step-desc { font-size:12px; }
    .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 .listbox li .hint { width: 100%; margin-top: 12px; text-align: center; }
.media-wowza .listbox li .hint a { text-decoration: underline; color: #555; transition: all 0.3s; }
.media-wowza .listbox li .hint a:hover { color: #333; font-weight: 600; }
.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; border: 1px solid #ddd; 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; }
/* netorage.php 4개 한 줄 리스트 */
.media-wowza.wowza-box1 .listbox.netorage-list-4 ul { display:flex; flex-wrap:wrap; gap:20px; }
.media-wowza.wowza-box1 .listbox.netorage-list-4 li { width:calc((100% - 60px) / 4); }
.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-wowza.wowza-box1 .listbox.netorage-list-4 li { width:calc((100% - 40px) / 4); }
}
@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-box1 .listbox.netorage-list-4 li { width:calc((100% - 20px) / 2); }
    .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-box1 .listbox.netorage-list-4 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-wowza.wowza-box1 .listbox.netorage-list-4 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-box1 .listbox.netorage-list-4 li { width:100%; }
    .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; }

/* video_cloud */
#video_cloud .listbox ul > li {width: calc((100% - 60px) / 2);} 
#video_cloud .listbox ul > li .list li {width: 100%;}
@media screen and (max-width:640px) {
    #video_cloud .listbox ul > li {width: 100%;} 
}

.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 .box .txt strong { color: var(--mainColor); font-weight: 500; }
.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-1 .box ul .txt { color:#222; line-height: 50px; font-size: 23px; font-weight: 400; }
.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; }
.cloud-managed.cloud-managed-box3 .imgboxCont { display: flex; justify-content: center; margin-top: 40px; }
.cloud-managed.cloud-managed-box3 .imgboxCont img { width: 95%; }
@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 ul .txt { color:#222; line-height: 40px; font-size: 18px; font-weight: 400; }
    .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-1 .box ul .txt { color:#222; line-height: 35px; font-size: 14px; font-weight: 400; }
    .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 .listbox.gpu .box {display: flex; align-items: center; }
.cloud-private.private-box1 .listbox.gpu .box .txtbox { padding-left: 30px; }
.cloud-private.private-box1 .listbox.gpu li .icon { width:115px; height:115px; }

/* .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; border: 1px solid #ddd; padding:35px; }
.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-box1 .listbox li .txtbox a {color: var(--mainColor);}
/* migration strength - num instead of icon */
.cloud-private.migration-strength .listbox li { width:calc((100% - 40px) / 3); }
.cloud-private.migration-strength .listbox li .strength-num {
    width:102px;
    height:102px;
    border-radius:102px;
    background:#efefef;
    color: rgba(100, 100, 100, 0.5);
    font-size:36px;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}
.cloud-private.migration-strength .listbox li .txtbox dt:before { display:none; }
.cloud-private.migration-strength .listbox li .txtbox dt { padding-bottom:0; }
.cloud-private.migration-strength .listbox li .txtbox dd {
    display:flex;
    flex-direction:column;
    gap:16px;
}
.cloud-private.migration-strength .listbox li .txtbox .strength-path {
    display:inline-block;
    padding:6px 14px;
    border-radius:8px;
    background:rgba(5, 105, 255, 0.1);
    color:var(--mainColor);
    font-size:15px;
    font-weight:600;
    align-self:flex-start;
}
@media screen and (max-width:1024px){
    .cloud-private.migration-strength .listbox li .strength-num { width:80px; height:80px; font-size:28px; }
}
@media screen and (max-width:960px){
    .cloud-private.migration-strength .listbox li { width:calc((100% - 20px) / 3); }
}
@media screen and (max-width:860px){
    .cloud-private.migration-strength .listbox li { width:100%; }
}
@media screen and (max-width:760px){
    .cloud-private.migration-strength .listbox li .strength-num { width:70px; height:70px; font-size:24px; margin:0 auto; }
}
.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; }
    .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; 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 .source-top .listbox li dt { font-size:20px; font-weight:400; color:#222; line-height: 2; letter-spacing:-0.02em; color: #0569ff; }
.source-box .source-top .listbox li dd { font-size:17px; font-weight:400; color:#222; line-height:1.5; letter-spacing:-0.02em; }
.source-box .composition-box { padding:20px 0 0; background:#fff; }
.source-box .composition-box .imgboxCont { margin-top:50px; text-align:center; }
.source-box .composition-box .imgboxCont .img_box { display: flex;text-align:center;justify-content: center;display: none; }
.source-box .composition-box .imgboxCont .img_box div { margin: 0 30px; }
.source-box .composition-box .imgboxCont img { max-width:100%; }
.source-box .composition-box.ceph-box .top-box { margin-top:50px; display:flex; flex-wrap:wrap; gap:95px; }
.source-box .composition-box.ceph-box .top-box .l-box { position:relative; width:35%; padding-top:35px; }
.source-box .composition-box.ceph-box .top-box .l-box:before { content:''; display:block; z-index:2; position:absolute; left:50%; bottom:-80px; width:1px; height:400px; background:var(--mainColor); }
.source-box .composition-box.ceph-box .top-box .r-box { width:calc(65% - 95px); }
.source-box .composition-box.ceph-box .top-box .sbox { position:relative; z-index:5; border-radius:10px; border:1px solid var(--mainColor); background:#fff; }
.source-box .composition-box.ceph-box .top-box .sbox .top-txt  { position:absolute; top:-25px; padding:0 30px; font-size:22px; font-weight:500; color:#fff; line-height:1.5; letter-spacing:-0.02em; height:50px; border-radius:98px; background:#444; display:flex; align-items:center; justify-content:center; }
.source-box .composition-box.ceph-box .top-box .sbox dt { font-size:22px; font-weight:500; color:var(--mainColor); line-height:1.5; letter-spacing:-0.02em; }
.source-box .composition-box.ceph-box .top-box .sbox dd { font-size:16px; font-weight:400; color:#222; line-height:1.5; }
.source-box .composition-box.ceph-box .top-box .l-box .sbox { position:relative; padding:85px 20px 95px; text-align:center; }
.source-box .composition-box.ceph-box .top-box .l-box .sbox:before { content:''; display:block; z-index:2; position:absolute; top:50%; right:-57px; width:57px; height:1px; background:var(--mainColor); }
.source-box .composition-box.ceph-box .top-box .l-box .sbox .top-txt { left:50%; transform:translateX(-50%); }
.source-box .composition-box.ceph-box .top-box .l-box .sbox dd { margin-top:25px; }
.source-box .composition-box.ceph-box .top-box .r-box .sbox:not(:last-child) { margin-bottom:20px; }
.source-box .composition-box.ceph-box .top-box .r-box .sbox { padding:65px 55px; }
.source-box .composition-box.ceph-box .top-box .r-box .sbox:not(:last-child):before { content:''; display:block; z-index:2; position:absolute; top:50%; left:-40px; width:40px; height:1px; background:var(--mainColor); }
.source-box .composition-box.ceph-box .top-box .r-box .sbox:not(:last-child):after { content:''; display:block; z-index:2; position:absolute; bottom:50%; left:-40px; width:1px; height:calc(50% + 10px); background:var(--mainColor); }
.source-box .composition-box.ceph-box .top-box .r-box .sbox:first-child:after { top:50%; bottom:unset; height:calc(50% + 12px); }
.source-box .composition-box.ceph-box .top-box .r-box .sbox dl { display:flex; flex-wrap:wrap; }
.source-box .composition-box.ceph-box .top-box .r-box .sbox dt { width:176px; }
.source-box .composition-box.ceph-box .top-box .r-box .sbox dd { width:calc(100% - 176px); }
.source-box .composition-box.ceph-box .bottom-box { position:relative; margin-top:50px; border-radius:10px; background:var(--mainColor); padding:83px 215px; }
.source-box .composition-box.ceph-box .bottom-box dl { display:flex; flex-wrap:wrap; }
.source-box .composition-box.ceph-box .bottom-box dt { width:176px; font-size:22px; font-weight:500; color:#fff; line-height:1.5; letter-spacing:-0.02em; }
.source-box .composition-box.ceph-box .bottom-box dd { width:calc(100% - 176px); font-size:16px; font-weight:400; color:#fff; line-height:1.5;}
.source-box .composition-box.ceph-box .bottom-box:last-child:before { content:''; display:block; z-index:2; position:absolute; left:50%; top:-50px; margin-left:-20px; width:1px; height:50px; background:var(--mainColor); }
.source-box .composition-box.haproxy-box { padding: 140px 0px; }
.source-box .composition-box.haproxy-box .subTitle .txtbox { margin-top:10px; }
.source-box .composition-box.haproxy-box .listbox { position:relative; margin-top:50px; }
.source-box .composition-box.haproxy-box .listbox .circle-box { margin:0 auto; width:521px; height:521px; display:flex; align-items:center; justify-content:center; background:url(../img/source/source_haproxy_bg1.png) no-repeat center center; }
.source-box .composition-box.haproxy-box .listbox .circle-box .txt { font-size:22px; font-weight:500; color:#222; line-height:1.5; letter-spacing:-0.02em; }
.source-box .composition-box.haproxy-box .txt-list { margin-top:20px; }
.source-box .composition-box.haproxy-box .txt-list ul { position:relative; display:flex; flex-wrap:wrap; gap:30px; }
.source-box .composition-box.haproxy-box .txt-list ul:before { content:''; display:block; z-index:2; position:absolute; top:-80px; left:50%; transform:translateX(-50%); width:calc(100% - 33% + 16px); margin-left:1px; height:1px; background:var(--mainColor); }
.source-box .composition-box.haproxy-box .txt-list ul:after { content:''; display:block; z-index:2; position:absolute; top:-160px; left:50%; transform:translateX(-50%) rotate(180deg); width:10px; height:8px; background:url(../img/source/icon_arr1.png) no-repeat center center; }
.source-box .composition-box.haproxy-box .txt-list li { position:relative; font-size:22px; font-weight:500; color:#fff; line-height:1.3; letter-spacing:-0.02em; width:calc((100% - 60px) / 3); height:100px; border-radius:15px; background:var(--mainColor); display:flex; align-items:center; justify-content:center; }
.source-box .composition-box.haproxy-box .txt-list li:before { content:''; display:block; z-index:2; position:absolute; top:-80px; left:50%; width:1px; height:80px; background:var(--mainColor); }
.source-box .composition-box.haproxy-box .txt-list li:nth-child(2):before { height:160px; top:-160px; }
.source-box .composition-box.haproxy-box .txt-list li:after { content:''; display:block; z-index:2; position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:10px; height:8px; background:url(../img/source/icon_arr1.png) no-repeat center center; }
.source-box .composition-box.haproxy-box .txtbox2 { z-index:5; position:absolute; left:55%; bottom:140px; padding:34px 20px 34px 40px; border-radius:10px; border:1px solid #e1e1e1; background:#f9f9f9;}
.source-box .composition-box.haproxy-box .txtbox2 li { position:relative; padding-left:10px; font-size:16px; font-weight:400; color:#222; line-height:1.6; }
.source-box .composition-box.haproxy-box .txtbox2 li:before { content:''; display:block; position:absolute; left:0; top:12px; width:2px; height:2px; background:#222; border-radius:5px; }
.source-box .composition-box.haproxy-box .txtbox2 li:not(:last-child) { margin-bottom:5px; }

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

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

/* history */
.about-box .about-history ul,li { list-style: none; }
.about-box .about-history a {text-decoration: none}
.about-box .about-history .history h2 { text-align: center; font-size: 30px; font-weight: 600; color: #222; line-height: 1; margin-top: 70px; }
.about-box .about-history .list_right { display: table; width: 100%; table-layout: fixed; }
.about-box .about-history .list_right span { display: table-cell; vertical-align: top; }
.about-box .about-history .list_right div { position: relative; display: table-cell; vertical-align: top; }
.about-box .about-history .list_right div:before { content: ""; position: absolute; left: 0; width: 1px; height: 100%; background: #dfdfdf; }
.about-box .about-history .list_right div ul { margin-top: 20px; }
.about-box .about-history .list_right div ul li { display: table; position: relative; width: 100%; padding-left: 25px; padding-top: 5px; }
.about-box .about-history .list_right div ul li+li { margin-top: 20px; }
.about-box .about-history .list_right div ul li:before { content: ""; position: absolute; left: -8px; top: 7px; width: 15px; height: 15px; border: 3px solid var(--mainColor); border-radius: 50%; }
.about-box .about-history .list_right dl { text-align: left; display: table; width: 100%; }
.about-box .about-history .list_right dl dt { width: 10%; display: table-cell; vertical-align: middle; font-size: 14px; color: #444; font-weight: 600; text-align: left; font-size: 18px; }
.about-box .about-history .list_right dl dd { width: 90px; display: table-cell; vertical-align: middle; font-size: 13px; color: #444; text-align: left; }
.about-box .about-history .list_left { display: table; width: 100%; table-layout: fixed; }
.about-box .about-history .list_left span { display: table-cell; vertical-align: top; }
.about-box .about-history .list_left div { position: relative; display: table-cell; vertical-align: top; }
.about-box .about-history .list_left div:before { content: ""; position: absolute; right: -1px; width: 1px; height: 100%; background: #dfdfdf; }
.about-box .about-history .list_left div ul { margin-top: 20px; }
.about-box .about-history .list_left div ul li { display: table; position: relative; width: 100%; padding-left: 25px; padding-top: 5px; }
.about-box .about-history .list_left div ul li+li { margin-top: 20px; }
.about-box .about-history .list_left div ul li:before { content: ""; position: absolute; right: -10px; top: 7px; width: 15px; height: 15px; border: 3px solid var(--mainColor); border-radius: 50%; }
.about-box .about-history .list_left dl { text-align: right; display: table; width: 100%; padding-right: 20px; }
.about-box .about-history .list_left dl dt { width: 10%; display: table-cell; vertical-align: middle; font-size: 14px; color: #444; font-weight: 600; text-align: right; font-size: 18px; }
.about-box .about-history .list_left dl dd { width: 90px; display: table-cell; vertical-align: middle; font-size: 13px; color: #444; text-align: right; }

@media screen and (max-width:690px){
    .about-box .about-history .history h2 { font-size: 23px; text-align: left; }
    .about-box .about-history .history ul { border-bottom: 1px solid #dfdfdf; }
    .about-box .about-history .history ul li:last-child { padding-bottom: 20px; }
    .about-box .about-history .list_right div:before,
    .about-box .about-history .list_left div:before { background: none; }
    .about-box .about-history .list_right span,
    .about-box .about-history .list_left span { display: none }
    .about-box .about-history .list_right div ul li:before,
    .about-box .about-history .list_left div ul li:before { content: ""; position: absolute; left: -5px; top: 7px; width: 0px; height: 15px; border: 3px solid var(--mainColor); border-radius: 50%; padding-left: 15px; }
    .about-box .about-history .list_right dl dt,
    .about-box .about-history .list_left dl dt { font-size: 17px; line-height: 1.5; text-align: left; }
}

/* animation */
.about-box .aobut-history { opacity:0; }
/* .about-box .aobut-history .history-wrap { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; } */


/* location */
.about-box .about-history { background-color:#f5f5f5;}
.about-box .about-history .firewall-service { background-color: #f5f5f5; padding: 50px 0 50px 0; }
.about-box .about-history .location { display: flex; justify-content: center; align-items: center; }
.about-box .about-history .location iframe { position: relative; min-width:1500px; height:580px; overflow-x: scroll;}

.location-tab > ul { display:flex; flex-wrap:wrap; justify-content:center; gap:25px; }
.location-tab > ul > li a { padding:0 25px; display:flex; align-items:center; justify-content:center; background:#fff; color:#222; font-size:18px; font-weight:400; line-height:1.3; }
.location-tab > ul > li.on a { background:var(--mainColor); color:#fff }
.location-tab > .tabnav a.on { background-color:var(--mainColor); color: #fff; }
.location-tab > .tabnav a { transition: background-color 0.3s, color 0.3s; }

@media screen and (max-width:1500px){
    .about-box .about-history .location iframe { min-width:1200px; height:580px;}
}
@media screen and (max-width:1280px){
    .about-box .about-history .location iframe { min-width:1000px; height:580px;}
}
@media screen and (max-width:1024px){
    .about-box .about-history .location iframe { min-width:900px; height:580px;}
}
@media screen and (max-width:960px) {
    .about-box .about-history .location iframe { min-width:820px; height:580px;}
}

@media screen and (max-width:860px){
    .about-box .about-history .location iframe { max-width: 100%; height:580px;}
}

@media screen and (max-width:640px){
    .about-box .about-history .location iframe { min-width:100%; height:100%;}
}

.nav-tab {
    padding: 0;
}
.nav-tab .subtxt {
    margin-top: 40px;
}
.nav-tab .subtxt .subTitle{
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-tab .dataTable {
    margin-top: 20px;
    padding: 0;
}
.nav-tab .subcontents-box {
    margin-top:20px;
    align-items:center;
    display:flex;
    justify-content: center;
    
}
.nav-tab .subcontents-sub-box {
    background: #ffffff;
    padding: 30px;
    border-radius: 10px;
    line-height: 26px;
}

.nav-tab .subcontents-sub-box .box2 {
    background: #f7f7f7;
    border: 1px solid #eee;
    padding: 10px 16px 10px 16px;
    margin:10px 0px 10px 0px;
    border-radius: 4px;
}
.nav-tab .subcontents-sub-box .box2 strong {
    color: var(--mainColor);
    font-weight:600;
}
.nav-tab .subcontents-sub-box .box3 p {
    color: #aaaaaa;
}
.nav-tab .subcontents-sub-box .box3 strong {
    color: var(--mainColor);
}
.nav-tab .subcontents .box4 {
    margin-top:20px;
    line-height: 26px;
}
.nav-tab .subcontents .box4 strong {
    color: var(--mainColor);
    font-weight:600;
}

.contents_txt_box { border-radius: 4px;width: 100%; background: #fbfbfb; border: 1px solid #e0e0e0; padding: 32px; margin-top: 24px; }
.contents_txt_box .txt{ line-height: 200%; }
.contents_txt_box strong { color: #0569ff; font-weight: 600; }
.contents_txt_box .txt_box { background: #ffffff;border-radius: 4px; line-height: 200%;padding: 16px 24px; border: 1px solid #ececec; margin-bottom: 12px; }

/* video_cloud.php, video_cloud_price.php - listbox 3개 표시 (id="priceplan"만 적용) */
@media screen and (min-width:641px) {
	#priceplan.product-list2.type-A .listbox > ul > li {
		width: calc((100% - 40px) / 3) !important;
	}
}

/* =======================================================
   netorage.php 주요 기능 피처 쇼케이스
   ======================================================= */
.netorage-feature-showcase { padding:120px 0; background:#fff; }
.netorage-feature-showcase .subTitle { text-align:center; margin-bottom:80px; }
.netorage-feature-showcase .subTitle .sub-label { font-size:16px; font-weight:500; color:#888; letter-spacing:0.05em; margin-bottom:12px; }
.netorage-feature-showcase .subTitle h3 { font-size:36px; font-weight:700; color:#222; line-height:1.4; }

/* 피처 리스트 */
.netorage-feature-showcase .feature-list { display:flex; flex-direction:column; gap:100px; }

/* 피처 아이템 (좌우 레이아웃) */
.netorage-feature-showcase .feature-item { display:flex; align-items:center; gap:60px; }
.netorage-feature-showcase .feature-item.reverse { flex-direction:row-reverse; }

/* 텍스트 영역 */
.netorage-feature-showcase .feature-text { flex:1; }
.netorage-feature-showcase .feature-num {
    display:block; font-size:64px; font-weight:800; letter-spacing:-2px;
    background:linear-gradient(135deg, var(--mainColor) 0%, #8b5cf6 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text; opacity:0.15; line-height:1; margin-bottom:16px;
}
.netorage-feature-showcase .feature-tit {
    position:relative; font-size:28px; font-weight:700; color:#222;
    line-height:1.3; padding-bottom:20px; margin-bottom:20px;
}
.netorage-feature-showcase .feature-tit::after {
    content:''; position:absolute; bottom:0; left:0;
    width:48px; height:3px; border-radius:2px;
    background:var(--mainColor);
}
.netorage-feature-showcase .feature-desc {
    font-size:16px; font-weight:400; color:#666;
    line-height:1.7; margin-bottom:30px; word-break:keep-all;
}

/* 체크리스트 */
.netorage-feature-showcase .feature-check { display:flex; flex-direction:column; gap:12px; }
.netorage-feature-showcase .feature-check li {
    display:flex; align-items:center; gap:12px;
    font-size:16px; font-weight:500; color:#444;
    transition:all 0.3s ease;
}

.netorage-feature-showcase .chk-icon {
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
    width:22px; height:22px;
}
.netorage-feature-showcase .chk-icon svg { width:24px; height:24px; color:#9f9f9f; }

/* 이미지 영역 */
.netorage-feature-showcase .feature-img { flex:1; }
.netorage-feature-showcase .img-placeholder {
    border-radius:20px;
    background:linear-gradient(145deg, #ffffff 0%, #f3f7fc 100%);
    border:1px solid #e0e7f1;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    box-shadow:0 4px 20px rgba(0,0,0,0.05);
    transition:all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow:hidden;
}
.netorage-feature-showcase .feature-item:hover .img-placeholder {
    box-shadow:0 20px 50px rgba(5, 105, 255, 0.12);
    transform:translateY(-4px);
}
.netorage-feature-showcase .img-placeholder img { width:100%; height:auto; display:block; }
.netorage-feature-showcase .img-placeholder svg { width:80px; height:80px; color:#c0c8d4; margin-bottom:16px; }
.netorage-feature-showcase .img-placeholder p { font-size:16px; font-weight:500; color:#aab4c0; }
.netorage-feature-showcase .img-placeholder span { font-size:14px; color:#c8d0d8; margin-top:6px; }

/* 애니메이션 */
.netorage-feature-showcase .feature-item { opacity:0; transform:translateY(40px); transition:opacity 0.7s ease-out, transform 0.7s ease-out; }
.netorage-feature-showcase.on .feature-item { opacity:1; transform:translateY(0); }
.netorage-feature-showcase.on .feature-item:nth-child(1) { transition-delay:0.1s; }
.netorage-feature-showcase.on .feature-item:nth-child(2) { transition-delay:0.3s; }
.netorage-feature-showcase.on .feature-item:nth-child(3) { transition-delay:0.5s; }

/* 반응형 */
@media screen and (max-width:1024px){
    .netorage-feature-showcase { padding:80px 0; }
    .netorage-feature-showcase .subTitle { margin-bottom:60px; }
    .netorage-feature-showcase .subTitle h3 { font-size:28px; }
    .netorage-feature-showcase .feature-list { gap:70px; }
    .netorage-feature-showcase .feature-item { gap:40px; }
    .netorage-feature-showcase .feature-num { font-size:48px; }
    .netorage-feature-showcase .feature-tit { font-size:24px; }
}
@media screen and (max-width:768px){
    .netorage-feature-showcase .feature-item,
    .netorage-feature-showcase .feature-item.reverse { flex-direction:column; }
    .netorage-feature-showcase .feature-text { order:2; }
    .netorage-feature-showcase .feature-img { order:1; width:100%; }
    .netorage-feature-showcase .feature-item { gap:30px; }
    .netorage-feature-showcase .feature-tit { font-size:22px; }
    .netorage-feature-showcase .feature-desc { font-size:15px; }
}
@media screen and (max-width:640px){
    .netorage-feature-showcase { padding:60px 0; }
    .netorage-feature-showcase .subTitle { margin-bottom:40px; }
    .netorage-feature-showcase .subTitle h3 { font-size:24px; }
    .netorage-feature-showcase .subTitle .sub-label { font-size:14px; }
    .netorage-feature-showcase .feature-list { gap:50px; }
    .netorage-feature-showcase .feature-num { font-size:40px; }
    .netorage-feature-showcase .feature-tit { font-size:20px; padding-bottom:16px; margin-bottom:16px; }
    .netorage-feature-showcase .feature-desc { font-size:14px; margin-bottom:20px; }
    .netorage-feature-showcase .feature-check li { font-size:14px; }
    .netorage-feature-showcase .img-placeholder { border-radius:14px; }
}

/* DDoS 자동 완화 서비스 (cloudflare_security.php) */
.ddos-mitigation-showcase { padding:120px 0 140px; background:#f5f5f5; }
.ddos-mitigation-showcase .subTitle .txtbox { margin-top:12px; font-size:17px; color:#666; line-height:1.5; }
.ddos-mitigation-wrap {
    margin-top:60px;
    display:flex;
    align-items:stretch;
    gap:40px;
}
/* 좌측: DDoS Protection Layers 다크 그래픽 */
.ddos-layer-graphic {
    flex:0 0 450px;
    display:flex;
    flex-direction:column;
    padding:28px 24px 24px;
    border-radius:16px;
    background:#1e293b;
    border:1px solid #334155;
}
.ddos-graphic-tit {
    font-size:15px; font-weight:700; color:rgba(255,255,255,0.95);
    letter-spacing:0.02em; margin-bottom:22px;
    padding-bottom:14px; border-bottom:1px solid #334155;
}
.ddos-layer-list { display:flex; flex-direction:column; gap:12px; flex:1; }
.ddos-layer-item {
    display:flex;
    align-items:center;
    gap:14px;
    padding:19px 18px;
    border-radius:10px;
    background:#0f172a;
    border:1px solid #334155;
}
.ddos-layer-item .layer-badge {
    flex-shrink:0;
    width:46px; height:46px;
    display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:700; color:#fff;
    background:rgb(100 100 100 / 35%);
    border-radius:8px;
}
.ddos-layer-item .layer-info {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.ddos-layer-item .layer-name { font-size:14px; font-weight:600; color:rgba(255,255,255,0.9); }
.ddos-layer-item .layer-desc { font-size:14px; margin-top: 4px ;color:#94a3b8; line-height:1.4; }
.ddos-layer-item .layer-status-badge {
    flex-shrink:0;
    padding:5px 10px;
    font-size:12px; font-weight:600; color:#fff;
    background:var(--mainColor);
    border-radius:6px;
}
.ddos-mitigation-time {
    margin-top:auto;
    padding:16px 20px;
    border-radius:10px;
    background:#0f172a;
    border:1px solid #334155;
    text-align:center;
}
.ddos-mitigation-time .time-num {
    display:block;
    font-size:28px; font-weight:700; color:#fff;
    letter-spacing:-0.02em; line-height:1.2;
}
.ddos-mitigation-time .time-label {
    display:block;
    margin-top:4px;
    font-size:13px; font-weight:500; color:#94a3b8;
}
/* 우측: 특징 4가지 (호버 없음) */
.ddos-feature-list {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:24px;
}
.ddos-feature-item {
    display:flex;
    align-items:flex-start;
    gap:20px;
    padding:22px 24px;
    border-radius:16px;
    border:1px solid #e2e8f0;
    background:#fff;
}
.ddos-feature-icon {
    flex-shrink:0;
    width:56px; height:56px;
    border-radius:14px;
    background:#f1f5f9;
    display:flex; align-items:center; justify-content:center;
}
.ddos-feature-icon img { width:32px; height:32px; }
.ddos-feature-item dl { flex:1; }
.ddos-feature-item dt {
    font-size:18px; font-weight:700; color:#1e293b;
    margin-bottom:8px; line-height:1.35; letter-spacing:-0.02em;
}
.ddos-feature-item dd {
    font-size:15px; font-weight:400; color:#64748b;
    line-height:1.65; letter-spacing:-0.01em;
}
/* 애니메이션 */
.ddos-mitigation-showcase .ddos-mitigation-wrap { opacity:0; transform:translateY(30px); }
.ddos-mitigation-showcase.subOn .ddos-mitigation-wrap {
    animation:ani_2 0.8s 0.2s;
    animation-fill-mode:both;
}
@media screen and (max-width:1280px){
    .ddos-mitigation-wrap { gap:50px; }
    .ddos-layer-graphic { flex:0 0 360px; }
}
@media screen and (max-width:1024px){
    .ddos-mitigation-showcase { padding:100px 0 120px; }
    .ddos-mitigation-wrap {
        flex-direction:column;
        margin-top:50px;
        gap:50px;
    }
    .ddos-layer-graphic { flex:none; max-width:480px; width:100%; margin:0 auto; }
    .ddos-layer-list { flex:0 0 auto; }
    .ddos-mitigation-time { margin-top:20px; }
    .ddos-feature-list { width:100%; }
}
@media screen and (max-width:768px){
    .ddos-mitigation-showcase { padding:80px 0 100px; }
    .ddos-mitigation-wrap { margin-top:40px; gap:36px; }
    .ddos-layer-graphic { padding:24px 20px 20px; }
    .ddos-graphic-tit { font-size:16px; margin-bottom:20px; }
    .ddos-layer-item { padding:12px 14px; gap:12px; }
    .ddos-layer-item .layer-badge { width:40px; height:40px; font-size:14px; }
    .ddos-layer-item .layer-name { font-size:14px; }
    .ddos-layer-item .layer-desc { font-size:11px; }
    .ddos-mitigation-time { margin-top:18px; padding:14px 16px; }
    .ddos-mitigation-time .time-num { font-size:26px; }
    .ddos-mitigation-time .time-label { font-size:13px; }
    .ddos-feature-item { padding:18px 20px; gap:16px; }
    .ddos-feature-icon { width:48px; height:48px; }
    .ddos-feature-icon img { width:28px; height:28px; }
    .ddos-feature-item dt { font-size:17px; }
    .ddos-feature-item dd { font-size:14px; }
}
@media screen and (max-width:640px){
    .ddos-mitigation-showcase { padding:60px 0 80px; }
    .ddos-mitigation-showcase .subTitle .txtbox { font-size:15px; }
    .ddos-mitigation-wrap { margin-top:32px; gap:28px; }
    .ddos-layer-item { flex-wrap:wrap; }
    .ddos-layer-item .layer-status-badge { align-self:flex-end; }
}

/* Argo Smart Routing showcase (cloudflare_smartrouting.php) */
.argo-showcase { padding:120px 0 140px; background:#f5f5f5; }
.argo-showcase .subTitle .txtbox { margin-top:12px; font-size:17px; color:#666; line-height:1.5; }
.argo-showcase-wrap {
    margin-top:60px;
    display:flex;
    align-items:flex-start;
    gap:40px;
}
.argo-layer-graphic {
    flex:0 0 600px;
    display:flex;
    flex-direction:column;
    padding:28px 28px 28px;
    border-radius:16px;
    background:#1e293b;
    border:1px solid #334155;
}
.argo-graphic-tit {
    font-size:15px; font-weight:700; color:rgba(255,255,255,0.95);
    letter-spacing:0.02em; margin-bottom:22px;
    padding-bottom:14px; border-bottom:1px solid #334155;
}
.argo-layer-list { display:flex; flex-direction:column; gap:12px; }
.argo-layer-item {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:20px 20px;
    border-radius:10px;
    background:#0f172a;
    border:1px solid #334155;
}
.argo-step-left { display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; }
.argo-layer-item .argo-step-name {
    font-size:16px; font-weight:600; color:rgba(255,255,255,0.9);
}
.argo-layer-item .argo-step-desc { font-size:14px; color:#94a3b8; line-height:1.45; }
.argo-chip-wrap { display:flex; flex-wrap:nowrap; flex-shrink:0; gap:6px; }
.argo-chip {
    display:inline-block;
    padding:5px 12px;
    font-size:12px; font-weight:600; color:rgba(255,255,255,0.9);
    background:rgba(100,116,139,0.4);
    border:1px solid #475569;
    border-radius:6px;
}
.argo-arrow {
    font-size:14px; font-weight:500; color:var(--mainColor);
    text-align:center; padding:6px 0;
}
.argo-feature-list {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:24px;
}
.argo-feature-item {
    display:flex;
    align-items:flex-start;
    gap:20px;
    padding:22px 24px;
    border-radius:16px;
    border:1px solid #e2e8f0;
    background:#fff;
}
.argo-feature-icon {
    flex-shrink:0;
    width:56px; height:56px;
    border-radius:14px;
    background:#f1f5f9;
    display:flex; align-items:center; justify-content:center;
}
.argo-feature-icon img { width:32px; height:32px; }
.argo-feature-item dl { flex:1; }
.argo-feature-item dt {
    font-size:18px; font-weight:700; color:#1e293b;
    margin-bottom:8px; line-height:1.35; letter-spacing:-0.02em;
}
.argo-feature-item dd {
    font-size:15px; font-weight:400; color:#64748b;
    line-height:1.65; letter-spacing:-0.01em;
}
.argo-showcase .argo-showcase-wrap { opacity:0; transform:translateY(30px); }
.argo-showcase.subOn .argo-showcase-wrap {
    animation:ani_2 0.8s 0.2s;
    animation-fill-mode:both;
}
@media screen and (max-width:1280px){
    .argo-showcase-wrap { gap:50px; }
    .argo-layer-graphic { flex:0 0 480px; }
}
@media screen and (max-width:1024px){
    .argo-showcase { padding:100px 0 120px; }
    .argo-showcase-wrap { flex-direction:column; gap:50px; }
    .argo-layer-graphic { flex:none; max-width:600px; width:100%; margin:0 auto; }
    .argo-layer-list { flex:0 0 auto; }
    .argo-feature-list { width:100%; }
}
@media screen and (max-width:768px){
    .argo-showcase { padding:80px 0 100px; }
    .argo-showcase-wrap { margin-top:40px; gap:36px; }
    .argo-layer-graphic { padding:24px 20px 20px; }
    .argo-graphic-tit { font-size:16px; margin-bottom:20px; }
    .argo-layer-item { padding:12px 14px; gap:12px; }
    .argo-layer-item .argo-step-name { font-size:14px; }
    .argo-layer-item .argo-step-desc { font-size:12px; }
    .argo-arrow { font-size:11px; padding:4px 0; }
    .argo-feature-item { padding:18px 20px; gap:16px; }
    .argo-feature-icon { width:48px; height:48px; }
    .argo-feature-icon img { width:28px; height:28px; }
    .argo-feature-item dt { font-size:17px; }
    .argo-feature-item dd { font-size:14px; }
}
@media screen and (max-width:640px){
    .argo-showcase { padding:60px 0 80px; }
    .argo-showcase .subTitle .txtbox { font-size:15px; }
    .argo-showcase-wrap { margin-top:32px; gap:28px; }
}

/* Load Balancer showcase (cloudflare_smartrouting.php) - 좌: 특징, 우: 그래픽 */
.lb-showcase { padding:120px 0 140px; }
.lb-showcase .subTitle .txtbox { margin-top:12px; font-size:17px; color:#666; line-height:1.5; }
.lb-showcase-wrap {
    margin-top:60px;
    display:flex;
    align-items:flex-start;
    gap:40px;
}
.lb-feature-list {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:24px;
}
.lb-feature-item {
    display:flex;
    align-items:flex-start;
    gap:20px;
    padding:22px 24px;
    border-radius:16px;
    border:1px solid #e2e8f0;
    background:#fff;
}
.lb-feature-icon {
    flex-shrink:0;
    width:52px; height:52px;
    border-radius:12px;
    background:linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.lb-feature-icon img { width:32px; height:32px; }
.lb-feature-item dl { flex:1; }
.lb-feature-item dt {
    font-size:18px; font-weight:700; color:#1e293b;
    margin-bottom:8px; line-height:1.35; letter-spacing:-0.02em;
}
.lb-feature-item dd {
    font-size:15px; font-weight:400; color:#64748b;
    line-height:1.65; letter-spacing:-0.01em;
}
.lb-layer-graphic {
    flex:0 0 600px;
    display:flex;
    flex-direction:column;
    padding:28px 28px 28px;
    border-radius:16px;
    background:#1e293b;
    border:1px solid #334155;
}
.lb-graphic-tit {
    font-size:15px; font-weight:700; color:rgba(255,255,255,0.95);
    letter-spacing:0.02em; margin-bottom:22px;
    padding-bottom:14px; border-bottom:1px solid #334155;
}
.lb-pool-list { display:flex; flex-direction:column; gap:20px; }
.lb-pool-item {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:22px 20px;
    border-radius:12px;
    border:none;
}
.lb-pool-left { display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; }
.lb-pool-item.active {
    background:color-mix(in srgb, var(--mainColor) 12%, transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mainColor) 35%, transparent);
}
.lb-pool-item.standby {
    background:rgba(30,41,59,0.5);
    box-shadow:inset 0 0 0 1px rgba(148,163,184,0.2);
}
.lb-pool-status {
    font-size:14px; font-weight:700; color:var(--mainColor);
    letter-spacing:0.02em; margin-bottom: 8px;
}
.lb-pool-item.standby .lb-pool-status { color:#94a3b8; }
.lb-pool-name { font-size:16px;margin-bottom: 8px;font-weight:600; color:rgba(255,255,255,0.95); }
.lb-pool-metric { font-size:13px; color:#94a3b8; line-height:1.4; }
.lb-pool-chip {
    flex-shrink:0;
    display:inline-block;
    padding:6px 14px;
    font-size:12px; font-weight:600; color:rgba(255,255,255,0.95);
    background:color-mix(in srgb, var(--mainColor) 30%, transparent);
    border:1px solid color-mix(in srgb, var(--mainColor) 50%, transparent);
    border-radius:8px;
}
.lb-pool-item.standby .lb-pool-chip {
    background:rgba(148,163,184,0.25);
    border-color:rgba(148,163,184,0.5);
}
.lb-status-footer {
    margin-top:20px;
    padding:16px 18px;
    border-radius:10px;
    background:#0f172a;
    border:1px solid #334155;
    text-align:center;
}
.lb-footer-txt { font-size:13px; font-weight:500; color:#94a3b8; }
.lb-showcase .lb-showcase-wrap { opacity:0; transform:translateY(30px); }
.lb-showcase.subOn .lb-showcase-wrap {
    animation:ani_2 0.8s 0.2s;
    animation-fill-mode:both;
}
@media screen and (max-width:1280px){
    .lb-showcase-wrap { gap:50px; }
    .lb-layer-graphic { flex:0 0 480px; }
}
@media screen and (max-width:1024px){
    .lb-showcase { padding:100px 0 120px; }
    .lb-showcase-wrap { flex-direction:column-reverse; gap:50px; }
    .lb-layer-graphic { flex:none; max-width:600px; width:100%; margin:0 auto; }
    .lb-feature-list { width:100%; }
}
@media screen and (max-width:768px){
    .lb-showcase { padding:80px 0 100px; }
    .lb-showcase-wrap { margin-top:40px; gap:36px; }
    .lb-layer-graphic { padding:24px 20px 20px; }
    .lb-graphic-tit { font-size:16px; margin-bottom:20px; }
    .lb-pool-item { padding:14px 16px; }
    .lb-feature-item { padding:18px 20px; gap:16px; }
    .lb-feature-icon { width:48px; height:48px; }
    .lb-feature-icon img { width:28px; height:28px; }
    .lb-feature-item dt { font-size:17px; }
    .lb-feature-item dd { font-size:14px; }
}
@media screen and (max-width:640px){
    .lb-showcase { padding:60px 0 80px; }
    .lb-showcase .subTitle .txtbox { font-size:15px; }
    .lb-showcase-wrap { margin-top:32px; gap:28px; }
}

/* netorage.php 무료 제공 배너 */
.netorage-free-banner {
    position:relative; margin-top:80px; padding:48px 50px;
    border-radius:20px; overflow:hidden; text-align:center;
    background:linear-gradient(135deg, #0a3d8f 0%, var(--mainColor) 100%);
}
/* 우측 원형 배경 이미지 */
.netorage-free-banner::before {
    content:''; position:absolute; top:50%; right:-130px;
    transform:translateY(-50%);
    width:420px; height:420px;
    background:url(../img/common/circle_bg1.png) no-repeat center / contain;
    opacity:0.12; pointer-events:none;
}
/* 배경 데코 그래픽 */
.netorage-free-banner .nfb-deco {
    position:absolute; border-radius:50%; pointer-events:none;
}
.netorage-free-banner .nfb-deco-1 {
    width:280px; height:280px; top:-80px; left:-60px;
    background:radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
}
.netorage-free-banner .nfb-deco-2 {
    width:200px; height:200px; bottom:-50px; right:60px;
    background:radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
}
.netorage-free-banner .nfb-deco-3 {
    width:120px; height:120px; top:30px; right:180px;
    background:radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
}
.netorage-free-banner .nfb-content { position:relative; z-index:2; }
.netorage-free-banner .nfb-title {
    font-size:28px; font-weight:700; color:#fff;
    line-height:1.3; margin-bottom:16px; letter-spacing:-0.02em;
}
.netorage-free-banner .nfb-desc {
    font-size:16px; font-weight:400; color:rgba(255,255,255,0.85);
    line-height:1.7; word-break:keep-all;
}
@media screen and (max-width:1024px){
    .netorage-free-banner { margin-top:70px; padding:50px 30px; }
    .netorage-free-banner .nfb-title { font-size:24px; }
}
@media screen and (max-width:640px){
    .netorage-free-banner { margin-top:50px; padding:40px 24px; border-radius:14px; }
    .netorage-free-banner .nfb-title { font-size:20px; margin-bottom:12px; }
    .netorage-free-banner .nfb-desc { font-size:14px; }
    .netorage-free-banner .nfb-deco-1 { width:160px; height:160px; top:-40px; left:-30px; }
    .netorage-free-banner .nfb-deco-2 { width:120px; height:120px; bottom:-30px; right:20px; }
    .netorage-free-banner .nfb-deco-3 { display:none; }
    .netorage-free-banner::before { width:240px; height:240px; right:-40px; }
}

/* netorage.php 설치 환경 및 비용 안내 */
.netorage-install-info { padding:120px 0; background:#f9f9f9; }
.netorage-install-info .subTitle { text-align:center; margin-bottom:50px; }
.netorage-install-info .subTitle h3 { font-size:32px; font-weight:700; color:#222; }

.netorage-install-info .install-card {
    background:#fff; border:1px solid #e8e8e8; border-radius:16px;
    padding:38px; transition:all 0.3s ease;
}
.netorage-install-info .install-card:hover { border-color:#ccc; box-shadow:0 8px 24px rgba(0,0,0,0.06); }

.netorage-install-info .install-cards {
    display:flex; gap:24px; align-items:stretch;
    opacity:0; transform:translateY(40px);
    transition:opacity 0.7s ease-out, transform 0.7s ease-out;
}
.netorage-install-info.on .install-cards { opacity:1; transform:translateY(0); }

.netorage-install-info .install-card-env { flex:1.45; }
.netorage-install-info .install-card-support { flex:1; }

.netorage-install-info .install-card-wide {
    display:block;
}
.netorage-install-info .install-card-body {
    display:flex; align-items:stretch; gap:36px; margin-top:30px;
}
.netorage-install-info .install-media {
    width:36%; max-width:300px; aspect-ratio:4 / 3;
    border-radius:14px; overflow:hidden; padding:12px; box-sizing:border-box;
    background:#edf2f7; border:1px solid #e6edf5;
}
.netorage-install-info .install-media img {
    width:100%; height:100%; object-fit:cover; display:block; border-radius:10px;
}

.netorage-install-info .install-info {
    width:57%; display:flex; flex-direction:column; justify-content:center;
}

.netorage-install-info .install-strike {
    margin:8px 0 0; text-align:center; color:#888;
    font-size:17px; line-height:1.6; text-decoration:line-through;
}
.netorage-install-info .install-sale-price {
    margin:8px 0 0; text-align:center;
    font-size:20px; font-weight:700; color:#222;
}
.netorage-install-info .install-sale-price strong { color:var(--mainColor); }

.netorage-install-info .btn-gr {
    margin-top:22px; display:flex; justify-content:center;
}
.netorage-install-info .btn-gr .btn {
    min-width:220px; border-radius:999px; overflow:hidden;
    background:var(--mainColor); border:1px solid var(--mainColor); cursor: pointer;
}
.netorage-install-info .btn-gr .btn a {
    display:flex; align-items:center; justify-content:center;
    height:56px; color:#fff;
}
.netorage-install-info .btn-gr .btn a span { color:#fff; font-size:17px; font-weight:700; }
.netorage-install-info .btn-gr .btn:hover { opacity:0.9; }
.netorage-install-info .btn-gr .btn.btn-outline {
    background:#fff; border:1px solid var(--mainColor);
}
.netorage-install-info .btn-gr .btn.btn-outline a { color:var(--mainColor); }
.netorage-install-info .btn-gr .btn.btn-outline a span { color:var(--mainColor); }

/* 우측 설치 지원 카드 */
.netorage-install-info .install-card-header {
    display:flex; align-items:center; gap:14px; margin-bottom:10px;
}
.netorage-install-info .install-card-icon {
    width:40px; height:40px; min-width:40px; border-radius:10px;
    background:#f2f6fa; border:1px solid #e1e7ef;
    display:flex; align-items:center; justify-content:center;
    color:var(--mainColor);
}
.netorage-install-info .install-card-icon svg { width:20px; height:20px; }
.netorage-install-info .install-card-tit { font-size:22px; font-weight:700; color:#222; line-height:1.3; }
.netorage-install-info .install-card-desc {
    font-size:16px; font-weight:400; color:#666;
    line-height:1.6; margin-bottom:20px;
}
.netorage-install-info .install-price-table { width:100%; border-collapse:collapse; }
.netorage-install-info .install-price-table tr { border-bottom:1px solid #f0f0f0; }
.netorage-install-info .install-price-table tr:last-child { border-bottom:none; }
.netorage-install-info .install-price-table th {
    text-align:left; padding:18px 0; font-size:16px; font-weight:500;
    color:#666; white-space:nowrap;
}
.netorage-install-info .install-price-table td {
    text-align:right; padding:18px 0; font-size:18px; font-weight:600;
    color:#222;
}
.netorage-install-info .install-price-table .price-strike {
    text-decoration:line-through; color:#888; font-weight:500;
}
.netorage-install-info .install-price-table .free { color:var(--mainColor); font-weight:700; }
.netorage-install-info .install-notice { margin-top:16px; font-size:14px; font-weight:400; color:#999; }

/* 반응형 */
@media screen and (max-width:1024px){
    .netorage-install-info { padding:80px 0; }
    .netorage-install-info .subTitle h3 { font-size:28px; }
    .netorage-install-info .install-cards { flex-direction:column; }
    .netorage-install-info .install-card { padding:30px; }
    .netorage-install-info .install-card-env,
    .netorage-install-info .install-card-support { flex:auto; }
    .netorage-install-info .install-card-body { gap:24px; }
    .netorage-install-info .install-media { width:34%; max-width:260px; padding:10px; }
    .netorage-install-info .install-strike { font-size:16px; }
}
@media screen and (max-width:768px){
    .netorage-install-info .install-card-body { flex-direction:column; }
    .netorage-install-info .install-media,
    .netorage-install-info .install-info { width:100%; }
    .netorage-install-info .install-media { max-width:380px; margin:0 auto; padding:8px; }
}
@media screen and (max-width:640px){
    .netorage-install-info { padding:60px 0; }
    .netorage-install-info .subTitle { margin-bottom:30px; }
    .netorage-install-info .subTitle h3 { font-size:24px; }
    .netorage-install-info .install-card { padding:22px 18px; border-radius:12px; }
    .netorage-install-info .install-price-table th,
    .netorage-install-info .install-price-table td { font-size:14px; padding:12px 0; }
    .netorage-install-info .install-strike { font-size:14px; }
    .netorage-install-info .install-sale-price { font-size:17px; }
    .netorage-install-info .btn-gr .btn { min-width:180px; }
    .netorage-install-info .btn-gr .btn a { height:48px; }
    .netorage-install-info .btn-gr .btn a span { font-size:15px; }
}

/* netorage.php Get Started CTA 배너 (풀 와이드) */
.netorage-cta-banner {
    position:relative; padding:100px 0; overflow:hidden;
    background:linear-gradient(135deg, #1f3f74 0%, #2858a0 50%, #3a73bf 100%);
    text-align:center;
}

/* 그리드 패턴 배경 */
.netorage-cta-banner .ncb-grid {
    position:absolute; inset:0; pointer-events:none;
    background-image:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size:60px 60px;
}

/* 글로우 효과 */
.netorage-cta-banner .ncb-glow {
    position:absolute; border-radius:50%; pointer-events:none; filter:blur(80px);
}
.netorage-cta-banner .ncb-glow-1 {
    width:500px; height:500px; top:-150px; left:-100px;
    background:radial-gradient(circle, rgba(138,181,255,0.28) 0%, transparent 70%);
}
.netorage-cta-banner .ncb-glow-2 {
    width:400px; height:400px; bottom:-120px; right:-80px;
    background:radial-gradient(circle, rgba(138,181,255,0.20) 0%, transparent 70%);
}

/* 원형 데코 */
.netorage-cta-banner .ncb-circle {
    position:absolute; border-radius:50%; pointer-events:none;
    border:1px solid rgba(255,255,255,0.12);
}
.netorage-cta-banner .ncb-circle-1 {
    width:320px; height:320px; top:-60px; right:80px;
}
.netorage-cta-banner .ncb-circle-2 {
    width:200px; height:200px; bottom:30px; left:120px;
}

/* 콘텐츠 */
.netorage-cta-banner .ncb-content { position:relative; z-index:2; }
.netorage-cta-banner .ncb-label {
    display:inline-block; padding:6px 18px; border-radius:50px;
    background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.25);
    font-size:14px; font-weight:600; color:rgba(255,255,255,0.92);
    letter-spacing:0.05em; margin-bottom:20px;
}
.netorage-cta-banner .ncb-title {
    font-size:35px; font-weight:800; color:#fff;
    line-height:1.3; margin-bottom:16px; letter-spacing:-0.02em;
}
.netorage-cta-banner .ncb-desc {
    font-size:18px; font-weight:400; color:rgba(255,255,255,0.82);
    line-height:1.6; margin-bottom:24px;
}

/* 버튼 그룹 */
.netorage-cta-banner .btn-gr { display:flex; justify-content:center; gap:24px; }
.netorage-cta-banner .btn-gr .btn {
    position:relative; width:150px; height:50px; overflow:hidden; border-radius:50px;
}
.netorage-cta-banner .btn-gr .btn a {
    transition:all 0.3s; position:relative; z-index:1; font-size:16px; font-weight:600;
    letter-spacing:-0.02em; width:100%; height:100%; display:flex; align-items:center; justify-content:center;
}
.netorage-cta-banner .btn-gr .btn a span {
    transition:all 0.3s; display:inline-block; padding:4px 22px 4px 0; font-weight:500; font-size:16px;
    background:url(../img/common/btn_arr1.png) right center no-repeat;
}

/* 데모 신청: 메인컬러 버튼 + 화이트 아이콘 */
.netorage-cta-banner .btn-gr .btn.btn-demo { background:var(--mainColor); border:1px solid var(--mainColor); }
.netorage-cta-banner .btn-gr .btn.btn-demo a { color:#fff; }
.netorage-cta-banner .btn-gr .btn.btn-demo a span { color:#fff; filter:brightness(0) invert(1); }
.netorage-cta-banner .btn-gr .btn.btn-demo:hover {
    background:#0456d3; border-color:#0456d3;
}

/* 구매 신청: 아웃라인 버튼 + 화이트 배경 */
.netorage-cta-banner .btn-gr .btn.btn-buy { background:#fff; border:1px solid var(--mainColor); }
.netorage-cta-banner .btn-gr .btn.btn-buy a { color:var(--mainColor); }
.netorage-cta-banner .btn-gr .btn.btn-buy a span { color:var(--mainColor); }
.netorage-cta-banner .btn-gr .btn.btn-buy:hover {
    background:var(--mainColor); border-color:var(--mainColor);
}
.netorage-cta-banner .btn-gr .btn.btn-buy:hover a { color:#fff; }
.netorage-cta-banner .btn-gr .btn.btn-buy:hover a span { color:#fff; filter:brightness(0) invert(1); }

/* 애니메이션 */
.netorage-cta-banner .ncb-content { opacity:0; transform:translateY(30px); transition:opacity 0.7s ease-out, transform 0.7s ease-out; }
.netorage-cta-banner.on .ncb-content { opacity:1; transform:translateY(0); }

/* 반응형 */
@media screen and (max-width:1024px){
    .netorage-cta-banner { padding:80px 20px; }
    .netorage-cta-banner .ncb-title { font-size:32px; }
    .netorage-cta-banner .ncb-desc { font-size:16px; }
}
@media screen and (max-width:640px){
    .netorage-cta-banner { padding:60px 20px; }
    .netorage-cta-banner .ncb-title { font-size:26px; }
    .netorage-cta-banner .ncb-desc { font-size:15px; margin-bottom:30px; }
    .netorage-cta-banner .btn-gr { flex-direction:column; gap:12px; align-items:center; }
    .netorage-cta-banner .btn-gr .btn { width:100%; max-width:280px; }
    .netorage-cta-banner .ncb-glow-1 { width:300px; height:300px; }
    .netorage-cta-banner .ncb-glow-2 { width:200px; height:200px; }
    .netorage-cta-banner .ncb-circle-1 { width:180px; height:180px; right:20px; }
    .netorage-cta-banner .ncb-circle-2 { width:120px; height:120px; left:20px; }
}

/* netorage.php 다운로드 속도 비교 차트 */
.netorage-speed-comparison { padding:100px 0; background:#f9f9f9; }
.netorage-speed-comparison .subTitle { text-align:center; margin-bottom:60px; }
.netorage-speed-comparison .subTitle h3 { font-size:32px; font-weight:700; color:#333; margin-bottom:20px; }
.netorage-speed-comparison .subTitle p { font-size:18px; color:#666; line-height:1.6; }
.netorage-speed-comparison .speed-chart-box { display:flex; gap:40px; justify-content:center; flex-wrap:wrap; }
.netorage-speed-comparison .chart-item { flex:1; min-width:280px; max-width:400px; background:#fff; border-radius:12px; padding:40px 30px; box-shadow:0 2px 10px rgba(0,0,0,0.05); opacity:0; transform:translateY(50px); transition:opacity 0.8s ease-out, transform 0.8s ease-out; }
.netorage-speed-comparison.ani.on .chart-item { opacity:1; transform:translateY(0); }
.netorage-speed-comparison.ani.on .chart-item:nth-child(1) { transition-delay:0.1s; }
.netorage-speed-comparison.ani.on .chart-item:nth-child(2) { transition-delay:0.2s; }
.netorage-speed-comparison.ani.on .chart-item:nth-child(3) { transition-delay:0.3s; }
.netorage-speed-comparison .chart-country { font-size:24px; font-weight:700; color:#333; text-align:center; margin-bottom:30px; padding-bottom:20px; border-bottom:1px solid #e0e0e0; }
.netorage-speed-comparison .chart-bars { display:flex; flex-direction:column; gap:25px; }
.netorage-speed-comparison .chart-bar-wrapper { display:flex; align-items:center; gap:15px; }
.netorage-speed-comparison .chart-label { width:80px; font-size:16px; font-weight:600; color:#666; flex-shrink:0; }
.netorage-speed-comparison .chart-bar-container { flex:1; position:relative; display:flex; align-items:center; gap:10px; }
.netorage-speed-comparison .chart-bar { height:40px; border-radius:6px; position:relative; transition:width 1.5s ease-out; width:0; }
.netorage-speed-comparison .chart-bar.normal-bar { background:linear-gradient(90deg, #e0e0e0 0%, #c0c0c0 100%); }
.netorage-speed-comparison .chart-bar.netorage-bar { background:linear-gradient(90deg, var(--mainColor) 0%, #0456d3 100%); }
.netorage-speed-comparison .chart-value { font-size:16px; font-weight:700; color:#333; min-width:50px; text-align:right; opacity:0; transition:opacity 0.5s ease-out 0.5s; }
.netorage-speed-comparison .normal { width: 30px !important; }
.netorage-speed-comparison.ani .chart-bar { width:0; }
.netorage-speed-comparison.ani.on .chart-value { opacity:1; }
@media screen and (max-width:1024px){
	.netorage-speed-comparison { padding:80px 0; }
	.netorage-speed-comparison .speed-chart-box { gap:30px; }
	.netorage-speed-comparison .chart-item { min-width:250px; padding:30px 20px; }
}
@media screen and (max-width:640px){
	.netorage-speed-comparison { padding:60px 0; }
	.netorage-speed-comparison .subTitle h3 { font-size:24px; }
	.netorage-speed-comparison .subTitle p { font-size:16px; }
	.netorage-speed-comparison .speed-chart-box { flex-direction:column; gap:20px; }
	.netorage-speed-comparison .chart-item { max-width:100%; }
	.netorage-speed-comparison .chart-country { font-size:20px; margin-bottom:20px; }
	.netorage-speed-comparison .chart-bar { height:35px; }
}

/* request.php responsive styles moved from inline style */
@media screen and (max-width: 1100px) {
    .common-consult { padding-top: 80px; }
    .common-consult .title-box { padding-top: 45px; }
}
@media screen and (max-width: 1024px) {
    .common-consult { padding-top: 80px; }
    .common-consult .title-box { padding-top: 40px; }
    .common-consult .title-box .txt ul {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .common-consult .ipCont-footer {
        padding: 22px 18px 10px;
    }

    .common-consult .boardReg-box .ipbox-footer table col.w1 {
        width: 220px !important;
    }

    .common-consult .boardReg-box .ipbox-footer tbody th {
        height: 68px;
        padding: 22px 0 0 20px;
    }

    .common-consult .boardReg-box .ipbox-footer tbody td {
        padding: 12px 14px;
    }

    .common-consult .boardReg-box .ipbox-footer tbody td input.ip01 {
        width: 100%;
    }

    .common-consult .boardReg-box .ipbox-footer tbody td input.ip02 {
        width: calc(33% - 18px);
    }

    .common-consult .boardReg-box .ipbox-footer tbody td input.ip03,
    .common-consult .boardReg-box .ipbox-footer tbody td select.sel02 {
        width: calc(33.5% - 12px);
    }

    .common-consult .boardReg-box .ipbox-footer tbody td textarea {
        height: 210px;
    }

    .common-consult .boardReg-box .ipbox-footer tbody tr .email-inline {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 6px;
        row-gap: 8px;
    }

    .common-consult .boardReg-box .ipbox-footer .btn {
        margin-top: 18px;
    }

    .common-consult .boardReg-box .ipbox-footer .btn button {
        width: 280px;
        height: 58px;
    }
}

@media screen and (max-width: 768px) {
    .common-consult { padding-top: 80px; }
    .common-consult .title-box { padding-top: 35px; }
    .common-consult .boardReg-box .ipbox-footer table col.w1 {
        width: 170px !important;
    }

    .common-consult .boardReg-box .ipbox-footer tbody th {
        padding: 20px 0 0 14px;
    }

    .common-consult .boardReg-box .ipbox-footer tbody td .stxt {
        width: 26px;
    }

    .common-consult .boardReg-box .ipbox-footer tbody td input.ip02 {
        width: calc(48% - 16px);
    }

    .common-consult .boardReg-box .ipbox-footer tbody td input.ip03 {
        width: calc(52% - 16px);
    }

    .common-consult .boardReg-box .ipbox-footer tbody td select.sel02 {
        width: 100%;
        margin-top: 8px;
    }
}

@media screen and (max-width: 640px) {
    .common-consult { padding-top: 90px; }
    .common-consult .title-box { padding-top: 28px; }
    .common-consult .title-box .txt ul {
        justify-content: center;
        width: 100%;
    }

    .common-consult .title-box .txt ul:first-child {
        display: grid;
        grid-template-columns: max-content max-content;
        justify-content: center;
        align-items: center;
        column-gap: 3px;
        row-gap: 8px;
    }

    .common-consult .title-box .txt ul:first-child li:not(:last-child) {
        margin-right: 0;
    }

    .common-consult .title-box .txt ul:first-child li:not(:last-child):before {
        display: none;
    }

    .common-consult .title-box .txt ul:first-child img {
        width: 18px;
        height: 14px;
        margin-right: 0;
    }

    .common-consult .title-box .txt ul:first-child li {
        margin: 0;
        padding: 0;
    }

    .common-consult .title-box .txt ul li {
        font-size: 14px;
        text-align: center;
    }

    .common-consult .title-box .txt ul li:not(:last-child):before {
        display: none;
    }

    .common-consult .boardReg-box .ipbox-footer table col.w1 {
        width: auto !important;
    }

    /* inquiry-form-grid는 board.css에서 모바일 레이아웃 처리 */
    .common-consult .boardReg-box .ipbox-footer table:not(.inquiry-form-grid) tbody th,
    .common-consult .boardReg-box .ipbox-footer table:not(.inquiry-form-grid) tbody td {
        display: block;
        width: 100%;
        height: auto;
    }

    /* inquiry-form-grid는 board.css에서 패딩/스타일 처리 */
    .common-consult .boardReg-box .ipbox-footer table:not(.inquiry-form-grid) tbody th {
        padding: 14px 14px 12px;
        border-bottom: 1px solid #eee;
    }

    .common-consult .boardReg-box .ipbox-footer table:not(.inquiry-form-grid) tbody td {
        border-left: 0;
        padding: 10px 10px 12px;
    }

    .common-consult .boardReg-box .ipbox-footer tbody td input[type="text"],
    .common-consult .boardReg-box .ipbox-footer tbody td select,
    .common-consult .boardReg-box .ipbox-footer tbody td textarea {
        border-radius: 8px;
    }

    .common-consult .boardReg-box .ipbox-footer tbody td .stxt {
        padding: 6px 0;
        text-align: left;
    }

    .common-consult .boardReg-box .ipbox-footer tbody td input.ip02,
    .common-consult .boardReg-box .ipbox-footer tbody td input.ip03,
    .common-consult .boardReg-box .ipbox-footer tbody td select.sel02 {
        width: 100%;
    }

    .common-consult #footer-form .ipbox-footer tbody tr:nth-child(4) td input.ip02 {
        flex: 1 1 0;
        width: calc((100% - 34px) / 2);
        min-width: 0;
    }

    .common-consult #footer-form .ipbox-footer tbody tr:nth-child(4) td .stxt {
        flex: 0 0 28px;
        width: 28px;
        padding: 0;
        text-align: center;
    }

    .common-consult #footer-form .ipbox-footer tbody tr:nth-child(4) td input.ip03 {
        flex: 1 1 0;
        width: calc((100% - 34px) / 2);
        min-width: 0;
    }

    .common-consult #footer-form .ipbox-footer tbody tr:nth-child(4) td select.sel02 {
        flex: 0 0 100%;
        width: 100%;
        margin-top: 8px;
    }

    .common-consult .boardReg-box .ipbox-footer tbody td textarea {
        height: 160px;
    }

    .common-consult .boardReg-box .ipbox-footer .btn {
        margin-top: 12px;
    }

    .common-consult .boardReg-box .ipbox-footer .btn button {
        width: 100%;
        height: 54px;
    }

    .common-consult .boardReg-box .ipbox-footer .btn button span {
        font-size: 17px;
    }
}

/* Footer all-menu UI v2 */
footer .footer_box .all-menu .all-menu-v2 {
    display: flex;
    gap: 40px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

footer .footer_box .all-menu .all-menu-v2__categories {
    width: 180px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

footer .footer_box .all-menu .all-menu-v2__cat-btn {
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    background: #fff;
    color: #444;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

footer .footer_box .all-menu .all-menu-v2__cat-btn:hover {
    border-color: #b9c3d0;
    background: #f8fafc;
}

footer .footer_box .all-menu .all-menu-v2__cat-btn.is-active {
    border-color: none;
    background: var(--mainColor);
    color: #fff;
}

footer .footer_box .all-menu .all-menu-v2__panel {
    flex: 1 1 auto;
    min-width: 0;
}

footer .footer_box .all-menu .all-menu-v2__content {
    display: none;
}

footer .footer_box .all-menu .all-menu-v2__content.is-active {
    display: block;
}

footer .footer_box .all-menu .all-menu-v2__content--single-column .all-menu-v2__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

footer .footer_box .all-menu .all-menu-v2__content--single-column .all-menu-v2__grid .all-menu-v2__card {
    flex: none;
    min-width: 0;
}

footer .footer_box .all-menu .all-menu-v2__content-head {
    display: none;
    margin-bottom: 16px;
}

footer .footer_box .all-menu .all-menu-v2__top-link {
    display: inline-block;
    color: #222;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}

footer .footer_box .all-menu .all-menu-v2__grid {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 32px;
    overflow: visible;
    width: 100%;
}

footer .footer_box .all-menu .all-menu-v2__grid .all-menu-v2__card {
    flex: 0 0 220px;
    min-width: 170px;
}

footer .footer_box .all-menu .all-menu-v2__grid .all-menu-v2__card--w-sm {
    flex-basis: 170px;
}

footer .footer_box .all-menu .all-menu-v2__grid .all-menu-v2__card--w-md {
    flex-basis: 220px;
}

footer .footer_box .all-menu .all-menu-v2__grid .all-menu-v2__card--w-lg {
    flex-basis: 260px;
}

footer .footer_box .all-menu .all-menu-v2__grid .all-menu-v2__card--w-xl {
    flex-basis: 300px;
}

footer .footer_box .all-menu .all-menu-v2__card {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

footer .footer_box .all-menu .all-menu-v2__card--promo {
    padding: 0;
    overflow: visible;
}

footer .footer_box .all-menu .all-menu-v2__promo-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

footer .footer_box .all-menu .all-menu-v2__promo-body {
    padding: 10px 0 0;
}

footer .footer_box .all-menu .all-menu-v2__promo-desc {
    margin-top: 8px;
    color: #666;
    font-size: 13px;
    line-height: 1.5;
}

footer .footer_box .all-menu .all-menu-v2__promo-link {
    display: inline-block;
    margin-top: 10px;
    color: #333;
    font-size: 13px;
    font-weight: 600;
}

footer .footer_box .all-menu .all-menu-v2__content--primary-promo .all-menu-v2__promo-link {
    color: var(--mainColor);
    font-weight: 400;
}

footer .footer_box .all-menu .all-menu-v2__content--primary-promo .all-menu-v2__card--promo .all-menu-v2__d2-title {
    color: #222;
}

footer .footer_box .all-menu .all-menu-v2__content--primary-promo .all-menu-v2__grid {
    gap: 50px;
}

footer .footer_box .all-menu .all-menu-v2__card--icon .all-menu-v2__icon-img {
    display: block;
    width: 38px;
    height: 38px;
    margin-bottom: 10px;
}

footer .footer_box .all-menu .all-menu-v2__d2-title {
    margin: 0;
}

footer .footer_box .all-menu .all-menu-v2__d2-title > a,
footer .footer_box .all-menu .all-menu-v2__d2-title {
    color: var(--mainColor);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

footer .footer_box .all-menu .all-menu-v2__d3-list {
    margin-top: 16px;
}

footer .footer_box .all-menu .all-menu-v2__d3-list > li:not(:last-child) {
    margin-bottom: 12px;
}

footer .footer_box .all-menu .all-menu-v2__d3-link {
    color: #555;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
    display: block;
    transition: opacity 0.2s ease;
}

footer .footer_box .all-menu .all-menu-v2__d3-main {
    display: block;
    font-weight: 600;
}

footer .footer_box .all-menu .all-menu-v2__d3-sub {
    margin-top: 6px;
    display: block;
    color: #555;
    font-size: 14px;
    line-height: 1.35;
}

footer .footer_box .all-menu .all-menu-v2__d3-link:hover {
    color: #555;
    opacity: 0.72;
}

footer .footer_box .all-menu .all-menu-v2__d3-link:hover .all-menu-v2__d3-sub {
    color: #555;
}

/* Footer dark theme override */
footer .footer_box {
    background-color: #111;
    overflow-x: clip;
}

footer .footer_box .all-menu {
    background-color: #f3f4f6;
    border-bottom: 1px solid #dfe5ec;
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
    padding-left: calc(50dvw - 50%);
    padding-right: calc(50dvw - 50%);
}

footer .infobox {
    border-top: none;
}

footer .infobox .fmenu ul li a {
    color: #fff;
}

footer .infobox .info ul li {
    color: #aaa;
}

footer .copyright {
    color: #fff;
}

footer .copyright .stxt {
    color: #c0c0c0;
}

footer .infobox .family-site .family-site-toggle {
    background-color: #242424;
    border: 1px solid #2a2a2a;
    box-shadow: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

footer .infobox .family-site .family-site-toggle:hover {
    background-color: #222;
    border-color: #2f2f2f;
    box-shadow: none;
}

footer .infobox .family-site .family-site-toggle .family-site-label {
    color: #ccc;
}

footer .infobox .family-site .family-site-toggle .plus-icon {
    filter: none;
    opacity: 0.8;
    transition: filter 0.2s ease, transform 0.2s ease;
}

footer .infobox .family-site .family-site-toggle:hover .plus-icon {
    opacity: 1;
}

footer .infobox .family-site .family-site-list {
    background-color: #1a1a1a;
    border: 1px solid #242424;
}

footer .infobox .family-site .family-site-list li a {
    color: #ccc;
}

footer .infobox .family-site .family-site-list li a:hover {
    color: #fff;
    background-color: #222;
}

footer .infobox .family-site .family-site-list li a .link-icon {
    opacity: 0.7;
    filter: none;
    transition: filter 0.3s;
}

footer .infobox .family-site .family-site-list li a:hover .link-icon {
    opacity: 1;
}

/* Footer all-menu v2 responsive tuning (prevent horizontal overflow) */
@media screen and (max-width: 1600px) {
    footer .footer_box .all-menu .all-menu-v2__grid {
        gap: 24px;
    }

    footer .footer_box .all-menu .all-menu-v2__content--primary-promo .all-menu-v2__grid {
        gap: 32px;
    }

    footer .footer_box .all-menu .all-menu-v2__grid .all-menu-v2__card {
        flex-basis: 200px;
        min-width: 160px;
    }

    footer .footer_box .all-menu .all-menu-v2__grid .all-menu-v2__card--w-sm {
        flex-basis: 180px;
    }

    footer .footer_box .all-menu .all-menu-v2__grid .all-menu-v2__card--w-md {
        flex-basis: 200px;
    }

    footer .footer_box .all-menu .all-menu-v2__grid .all-menu-v2__card--w-lg {
        flex-basis: 230px;
    }

    footer .footer_box .all-menu .all-menu-v2__grid .all-menu-v2__card--w-xl {
        flex-basis: 260px;
    }
}

@media screen and (max-width: 1366px) {
    footer .footer_box .all-menu .all-menu-v2 {
        gap: 40px;
    }

    footer .footer_box .all-menu .all-menu-v2__categories {
        width: 190px;
    }

    footer .footer_box .all-menu .all-menu-v2__grid {
        gap: 16px;
        flex-wrap: wrap;
    }

    footer .footer_box .all-menu .all-menu-v2__content--primary-promo .all-menu-v2__grid {
        gap: 20px;
    }

    footer .footer_box .all-menu .all-menu-v2__grid .all-menu-v2__card {
        flex-basis: calc((100% - 48px) / 4);
        min-width: 0;
    }

    footer .footer_box .all-menu .all-menu-v2__content--single-column .all-menu-v2__grid {
        display: grid;
        grid-template-columns: 1fr;
    }

    footer .footer_box .all-menu .all-menu-v2__content--primary-promo .all-menu-v2__card--promo {
        display: none;
    }
}

@media screen and (max-width: 1180px) {
    footer .footer_box .all-menu .all-menu-v2__categories {
        width: 170px;
    }

    footer .footer_box .all-menu .all-menu-v2__grid {
        gap: 12px;
    }

    footer .footer_box .all-menu .all-menu-v2__content--primary-promo .all-menu-v2__grid {
        gap: 14px;
    }

    footer .footer_box .all-menu .all-menu-v2__grid .all-menu-v2__card {
        flex-basis: calc((100% - 36px) / 4);
        min-width: 0;
    }
}

/* Footer nav grid readability + fixed 6 columns (desktop) */
footer .footer_box .all-menu .footer-nav-grid__cols {
    grid-template-columns:repeat(7, minmax(0, 1fr));
    gap:24px;
}
footer .footer_box .all-menu .footer-nav-grid__group dt a { color:var(--mainColor); }
footer .footer_box .all-menu .footer-nav-grid__group dd ul li a { color:#475569; }
footer .footer_box .all-menu .footer-nav-grid__group dd ul li a:hover { color:var(--mainColor); }

@media screen and (max-width:1280px){
    footer .footer_box .all-menu .footer-nav-grid__cols {
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:18px;
    }
}
@media screen and (max-width:760px){
    footer .footer_box .all-menu .footer-nav-grid__cols {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap:14px;
    }
}
@media screen and (max-width:640px){
    footer .footer_box .all-menu .footer-nav-grid__cols {
        grid-template-columns:1fr;
        gap:12px;
    }
}

/* 연관 서비스 - 다크 그라데이션 + 그래픽 */
.related-services {
    position:relative;
    padding:70px 0 80px;
    overflow:hidden;
    background:linear-gradient(145deg, #0a1025 0%, #0d1430 30%, #111938 60%, #0c132a 100%);
    background-image:linear-gradient(145deg, #0a1025 0%, #0d1430 30%, #111938 60%, #0c132a 100%),
        linear-gradient(135deg, rgba(0, 81, 237, 0.25) 0%, rgba(0, 81, 237, 0.08) 40%, transparent 70%),
        linear-gradient(315deg, rgba(0, 81, 237, 0.15) 0%, transparent 50%),
        linear-gradient(225deg, rgba(89, 241, 255, 0.12) 0%, transparent 45%);
}
.related-services-bg {
    position:absolute;
    inset:0;
    pointer-events:none;
}
.related-services-orb {
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
}
.related-services-orb-1 {
    width:420px;
    height:420px;
    top:-120px;
    right:-100px;
    background:radial-gradient(circle, var(--mainColor) 0%, rgba(0, 81, 237, 0.4) 40%, transparent 70%);
    opacity:0.7;
}
.related-services-orb-2 {
    width:350px;
    height:350px;
    bottom:-80px;
    left:-80px;
    background:radial-gradient(circle, #59f1ff 0%, rgba(0, 81, 237, 0.3) 50%, transparent 70%);
    opacity:0.5;
}
.related-services-orb-3 {
    width:280px;
    height:280px;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    background:radial-gradient(circle, var(--mainColor) 0%, rgba(0, 81, 237, 0.25) 40%, transparent 70%);
    opacity:0.45;
}
.related-services-grid {
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size:48px 48px;
    mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 70%);
}
.related-services .inner {
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}
.related-services-inner {
    position:relative;
    z-index:2;
}
.related-services-head {
    text-align:center;
    margin-bottom:40px;
}
.related-services-title {
    font-size:35px;
    font-weight:700;
    color:#fff;
    letter-spacing:-0.02em;
    line-height:1.3;
}
.related-services-subtitle {
    margin-top:14px;
    font-size:17px;
    font-weight:400;
    color:rgba(255, 255, 255, 0.7);
    letter-spacing:-0.02em;
    line-height:1.6;
}
.related-services-list {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:18px;
    list-style:none;
    margin:0;
    padding:0;
}
.related-services-list li {
    margin:0;
    padding:0;
}
.related-services-link {
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-width:200px;
    padding:20px 24px;
    background:rgba(255, 255, 255, 0.06);
    border:1px solid rgba(255, 255, 255, 0.12);
    border-radius:8px;
    transition:all 0.3s ease;
    text-decoration:none;
    color:#fff;
    backdrop-filter:blur(12px);
}
.related-services-link:hover {
    background:rgba(255, 255, 255, 0.1);
    border-color:rgba(0, 81, 237, 0.6);
    box-shadow:0 8px 24px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255,255,255,0.05);
}
.related-services-txt {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
}
.related-services-name {
    font-size:16px;
    font-weight:600;
    letter-spacing:-0.02em;
    color:#fff;
}
.related-services-item-sub {
    font-size:13px;
    font-weight:400;
    color:rgba(255, 255, 255, 0.65);
    letter-spacing:-0.02em;
    line-height:1.4;
}
.related-services-arrow {
    flex-shrink:0;
    margin-left:12px;
}
.related-services-arrow .link-icon {
    width:18px;
    height:18px;
    filter:brightness(0) invert(1);
    opacity:0.7;
}
.related-services-link:hover .link-icon {
    opacity:1;
}
@media screen and (max-width:768px){
    .related-services { padding:50px 0 60px; }
    .related-services-title { font-size:26px; }
    .related-services-subtitle { font-size:16px; }
    .related-services-list { gap:14px; }
    .related-services-link { min-width:100%; padding:18px 20px; }
}

/* Proxmox section */
.proxmox-diagram-sec {
    padding: 140px 0;
}

.proxmox-core-compare-white {
    background: #fff;
}

.proxmox-project-wrap {
    background: #ffffff;
}

.proxmox-project-title {
    margin-bottom: 34px;
}

.proxmox-project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.proxmox-project-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #dfe6f1;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(18, 40, 76, 0.08);
}

.proxmox-project-chip {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef4ff;
    color: #2057a6;
    font-size: 12px;
    font-weight: 700;
}

.proxmox-project-name {
    margin: 0 0 10px;
    font-size: 28px;
    line-height: 1.35;
    font-weight: 800;
    color: #102a4d;
}

.proxmox-project-desc {
    margin: 0;
    color: #5b6472;
    font-size: 18px;
    line-height: 1.65;
}

.proxmox-project-price {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px dashed #d8e0ec;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
}

.proxmox-project-price-txt {
    color: #222;
    font-weight: 600;
    font-size:22px;
}

/* Proxmox 기술지원 서비스 플랜 카드 */
.provide-box.provide-box-support {
    padding: 0;
    margin-top: 50px;
}
/* 부모 섹션(ani)에 subOn 추가 시 표 표시 - provide-box에 ani 없음 */
.proxmox-support-wrap.subOn .provide-box .data-table { animation:ani_4 0.8s 0.2s; animation-fill-mode:both; }
.proxmox-support-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 40px;
}
.proxmox-support-plan-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #dfe6f1;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 24px rgba(18, 40, 76, 0.08);
}
.proxmox-support-plan-name {
    margin: 0 0 12px;
    font-size: 24px;
    line-height: 1.35;
    font-weight: 800;
    color: var(--mainColor);
}
.proxmox-support-plan-desc {
    margin: 0;
    color: #5b6472;
    font-size: 16px;
    line-height: 1.65;
    letter-spacing: -0.02em;
}
@media screen and (max-width: 1280px) {
    .proxmox-support-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media screen and (max-width: 768px) {
    .proxmox-support-plan-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 30px;
    }
    .proxmox-support-plan-card {
        padding: 18px;
        border-radius: 12px;
    }
    .proxmox-support-plan-name {
        font-size: 20px;
    }
    .proxmox-support-plan-desc {
        font-size: 15px;
    }
}

@media screen and (max-width: 1280px) {
    .proxmox-project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 768px) {
    .proxmox-project-title {
        margin-bottom: 24px;
    }

    .proxmox-project-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .proxmox-project-card {
        padding: 18px;
        border-radius: 12px;
    }

    .proxmox-project-name {
        font-size: 19px;
    }

    .proxmox-project-price {
        font-size: 22px;
    }
}

/* Cloud migration hero KPI */
.migration-kpi-wrap {
    margin-top: 20px;
}

.migration-kpi-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.migration-kpi-item {
    min-width: 130px;
    padding: 14px 16px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: transparent;
}

.migration-kpi-num {
    display: block;
    margin: 0 0 6px;
    font-size: 34px;
    line-height: 1;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

.migration-kpi-txt {
    display: block;
    font-size: 14px;
    line-height: 1.4;
    color: #8c8c8c;
    letter-spacing: -0.01em;
}

#subCont .visual-box .visual_txt .txtbox .migration-cta-group .btn_link {
    display: inline-flex;
    width: auto;
}

#subCont .visual-box .visual_txt .txtbox .migration-cta-group .btn_link a {
    width: auto;
    padding: 0 26px;
}

@media screen and (max-width: 768px) {
    .migration-kpi-wrap {
        margin-top: 14px;
    }

    .migration-kpi-grid {
        gap: 8px;
    }

    .migration-kpi-item {
        min-width: calc(50% - 4px);
        padding: 12px 12px;
    }

    .migration-kpi-num {
        font-size: 28px;
    }

    .migration-kpi-txt {
        font-size: 13px;
    }

    #subCont .visual-box .visual_txt .txtbox .migration-cta-group .btn_link {
        width: auto;
    }

    #subCont .visual-box .visual_txt .txtbox .migration-cta-group .btn_link a {
        padding: 0 18px;
    }
}