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

.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; }
.cloudflare-compare-table .dataTable .compare-spark {
    color:var(--mainColor);
    font-weight:700;
}
.cloudflare-compare-table .dataTable .compare-mark {
    display:inline-block;
    margin-right:3px;
    color:var(--mainColor);
    font-weight:700;
}
.cloudflare-compare-table .dataTable .compare-mark.check {
    margin-right:4px;
}
.cloudflare-compare-table .dataTable .compare-mark.down {
    color:#dc2626;
}
.cloudflare-compare-table .dataTable .compare-mark.dot {
    color:#ef4444;
    font-size:12px;
    margin-right:6px;
    position:relative;
    top:-1px;
}
.cloudflare-compare-table .dataTable tbody td:nth-child(3) .compare-mark.dot {
    color:var(--mainColor);
}
.cloudmsp-visual-spacious .visual_txt .txtbox dd .txt-1 {
    margin-top:12px;
}
.common-consult .title-box dt .cloudmsp-request-title {
    display:inline-block;
    padding-top:120px;
    line-height:1.35;
}
.msp-fit-grid {
    margin-top:42px;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:24px;
}
.msp-fit-card {
    position:relative;
    border-radius:18px;
    padding:30px 28px 26px;
    border:1px solid #e5e7eb;
    background:#fff;
    box-shadow:0 10px 26px rgba(15, 23, 42, 0.06);
    overflow:hidden;
}
.msp-fit-card.is-msp {
    border-color:#d8e6ff;
    background:linear-gradient(180deg, #f6f9ff 0%, #ffffff 45%);
}
.msp-fit-card.is-csp {
    border-color:#e5e7eb;
    background:linear-gradient(180deg, #f8fafc 0%, #ffffff 45%);
}
.msp-fit-card h3,
.msp-fit-card h4 {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:24px;
    font-weight:700;
    line-height:1.35;
    color:#111827;
    letter-spacing:-0.02em;
}
.msp-fit-card h3:before,
.msp-fit-card h4:before {
    content:'';
    width:10px;
    height:10px;
    border-radius:50%;
    flex:0 0 10px;
}
.msp-fit-card.is-msp h3, .msp-fit-card.is-msp h4 { color:var(--mainColor); }
.msp-fit-card.is-msp h3:before, .msp-fit-card.is-msp h4:before { background:var(--mainColor); }
.msp-fit-card.is-csp h3, .msp-fit-card.is-csp h4 { color:#334155; }
.msp-fit-card.is-csp h3:before, .msp-fit-card.is-csp h4:before { background:#94a3b8; }
.msp-fit-card ul {
    margin-top:16px;
    display:flex;
    flex-direction:column;
    gap:14px;
}
.msp-fit-card ul li {
    position:relative;
    padding-left:34px;
    font-size:17px;
    line-height:1.72;
    color:#4b5563;
    word-break:keep-all;
}
.msp-fit-card ul li:before {
    content:'✓';
    position:absolute;
    left:0;
    top:2px;
    width:22px;
    height:22px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:700;
    line-height:1;
    box-sizing:border-box;
}
.msp-fit-card.is-msp ul li:before {
    border:1px solid #cddfff;
    background:#e9f1ff;
    color:var(--mainColor);
}
.msp-fit-card.is-csp ul li:before {
    content:'−';
    border:1px solid #d6dce5;
    background:#eef2f7;
    color:#64748b;
    font-size:16px;
    font-weight:600;
}
.msp-fit-card ul li:after {
    content:'';
    position:absolute;
    left:34px;
    right:0;
    bottom:-8px;
    height:1px;
    background:#edf0f4;
}
.msp-fit-card ul li:last-child:after { display:none; }
.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; }
    .msp-fit-grid { grid-template-columns:1fr; gap:14px; margin-top:28px; }
    .msp-fit-card { padding:20px 16px 18px; border-radius:14px; }
    .msp-fit-card h3, .msp-fit-card h4 { font-size:19px; gap:8px; }
    .msp-fit-card h3:before, .msp-fit-card h4:before { width:8px; height:8px; flex:0 0 8px; }
    .msp-fit-card ul { margin-top:12px; gap:10px; }
    .msp-fit-card ul li { font-size:14px; padding-left:28px; line-height:1.65; }
    .msp-fit-card ul li:before { width:18px; height:18px; font-size:11px; top:1px; }
    .msp-fit-card.is-csp ul li:before { font-size:13px; }
    .msp-fit-card ul li:after { left:28px; bottom:-5px; }
}

/* animation */
.managed-box2 .dataTable { opacity:0; }
.managed-box2.subOn .dataTable { animation:ani_4 0.8s 0.2s; 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-1 .box li.txt { width:100%; }
.cloud-managed.cloud-managed-box2 .listbox-1 .box li.txt:before { display:none; padding-bottom:0; }
.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; }

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

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

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

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