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

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

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