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

.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 h3,
.drBackUp-box3 .listbox .txtbox strong { font-weight:700; word-break:keep-all; }
.drBackUp-box3.netorage-feature-cards .listbox li { padding-right:33px; }
.drBackUp-box3.netorage-feature-cards .listbox .txtbox { min-width:0; }
@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; }
    .drBackUp-box3.netorage-feature-cards .listbox li { padding-right: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; }