@charset "utf-8";

/* visual */
#main #visual { position:relative; background-color:#f4f4f4; width:100%;height:715px; box-shadow:0px 0px 20px #ccc; overflow:hidden; }
#main #visual .swiper-container { position:relative; width:100%; max-width:1920px; height:100%; margin:0 auto; }
#main #visual .swiper-container .swiper-slide { width:100%; height:100%; overflow:hidden; display:flex; opacity:0; }
#main #visual .swiper-container .swiper-slide .mov { position:relative; width:100%; height:100%; overflow:hidden; z-index:2; opacity:0; background:rgba(0,0,0,0.6); transition:all 0.3s ease-in-out; }
#main #visual .swiper-container .swiper-slide .mov video { position:absolute; left:0; top:0; height:100%; width:100%; overflow:hidden; object-fit:cover; -o-object-fit:cover; }
#main #visual .swiper-container .swiper-slide .mvisualImage { position:absolute; right:145px; top:50%; transform:translateY(-50%); }
#main #visual .swiper-container .swiper-slide .visual_txt { position:absolute; left:0; top:160px; padding:0 110px; width:100%; z-index:2; }
#main #visual .swiper-container .swiper-slide .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; }
#main #visual .swiper-container .swiper-slide .visual_txt .txtbox dd { margin-top:25px; }
#main #visual .swiper-container .slide01 .txtbox dd .txt-1 .title {font-weight: 800;}
#main #visual .swiper-container .swiper-slide .visual_txt .txtbox dd .txt-1 { opacity:0; font-weight:700; font-size:60px; color:#222; line-height:1.3; overflow:hidden; }
/* #main #visual .swiper-container .swiper-slide .visual_txt .txtbox dd .txt-1 { opacity:0; font-family:var(--mainFont); font-weight:700; font-size:60px; color:#222; line-height:1.3; overflow:hidden; } */
#main #visual .swiper-container .swiper-slide .visual_txt .txtbox dd .txt-2 { opacity:0; margin-top:25px; font-weight:400; font-size:24px; color:#222; letter-spacing:-0.02em; line-height:1.7; overflow:hidden; }
#main #visual .swiper-container .swiper-slide .visual_txt .btn_link { position:relative; margin-top:70px; width:220px; height:60px; overflow:hidden; border:1px solid var(--mainColor); border-radius:50px; }
#main #visual .swiper-container .swiper-slide .visual_txt .btn_link a { 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; }
#main #visual .swiper-container .swiper-slide .visual_txt .btn_link a span { 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; }
#main #visual .swiper-container .swiper-slide .visual_txt .btn_link a:hover { background:var(--mainColor); }
#main #visual .swiper-container .swiper-slide .visual_txt .btn_link a:hover span { filter:brightness(0) invert(1);}
#main #visual .swiper-container .swiper-slide .visual_txt .tel_btn { display: none; }
#main #visual .swiper-container .swiper-slide .visual_txt .wowza_btn { width: 250px; }
#main #visual .swiper-container .swiper-slide.swiper-slide-active { z-index:5; opacity:1; }
#main #visual .swiper-container .swiper-slide.swiper-slide-active .visual_txt .txtbox dt { animation:ani_2 0.8s 0.2s; animation-fill-mode:both; }
#main #visual .swiper-container .swiper-slide.swiper-slide-active .visual_txt .txtbox dd .txt-1 { animation:ani_2 0.8s 0.6s; animation-fill-mode:both; }
#main #visual .swiper-container .swiper-slide.swiper-slide-active .visual_txt .txtbox dd .txt-2 { animation:ani_2 0.8s 1.0s; animation-fill-mode:both; }
/* #main #visual .swiper-container .control_box { display:none  }
.swiper-button-next:after, 
.swiper-button-prev:after { display:none; } */
@media screen and (max-width:1700px){
    #main #visual .swiper-container .swiper-slide .mvisualImage { right:80px; text-align:right; }
    #main #visual .swiper-container .swiper-slide .mvisualImage img { width:80% }
}
@media screen and (max-width:1400px){
    #main #visual .swiper-container .swiper-slide .mvisualImage { right:60px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .txtbox dt { font-size:22px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .txtbox dd { margin-top:25px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .txtbox dd .txt-1 { font-size:45px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .txtbox dd .txt-2 { margin-top:25px; font-size:22px; }
}
@media screen and (max-width:1280px){
    #main #visual .swiper-container .swiper-slide .mvisualImage img { width:70% }
    #main #visual .swiper-container .swiper-slide .visual_txt { padding:0 80px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .txtbox dt { font-size:20px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .txtbox dd { margin-top:22px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .txtbox dd .txt-1 { font-size:40px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .txtbox dd .txt-2 { margin-top:22px; font-size:20px; }
}
@media screen and (max-width:1024px){
    #main #visual .swiper-container .swiper-slide .mvisualImage { right:20px; }
    #main #visual .swiper-container .swiper-slide .mvisualImage img { width:60% }
    #main #visual .swiper-container .swiper-slide .visual_txt { top:160px; padding:0 40px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .txtbox dt { font-size:18px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .txtbox dd { margin-top:20px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .txtbox dd .txt-1 { font-size:34px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .txtbox dd .txt-2 { margin-top:20px; font-size:18px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .btn_link { margin-top:40px; width:190px; height:50px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .btn_link a { font-size:16px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .btn_link a span { padding-right:16px; font-size:16px; }
}
@media screen and (max-width:860px){
    #main #visual { height:680px; }
    #main #visual .swiper-container .swiper-slide .mvisualImage img { width:50% }
    #main #visual .swiper-container .swiper-slide .visual_txt { padding:0 20px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .txtbox dt { font-size:16px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .txtbox dd { margin-top:15px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .txtbox dd .txt-1 { font-size:28px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .txtbox dd .txt-2 { margin-top:15px; font-size:16px; }
}
@media screen and (max-width:640px){
    #main #visual { height:680px; }
    #main #visual .swiper-container .swiper-slide .mvisualImage { right:unset; top:50%; left:46%; bottom:0px; transform:translate(-50%, 0); width:100%; padding:0 16%; }
    #main #visual .swiper-container .swiper-slide .mvisualImage img { width:90% }
    #main #visual .swiper-container .swiper-slide .visual_txt { top:80px; padding:0 20px; text-align:center }
    #main #visual .swiper-container .swiper-slide .visual_txt .txtbox dt { font-size:16px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .txtbox dd { margin-top:15px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .txtbox dd .txt-1 { font-size:28px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .txtbox dd .txt-2 { margin-top:15px; font-size:16px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .btn_link { margin:0 auto; margin-top:30px; }
}
@media screen and (max-width:520px){
    #main #visual .swiper-container .swiper-slide .mvisualImage { padding:0 50px; }
    #main #visual .swiper-container .swiper-slide .visual_txt .btn_link { display: none; }
    #main #visual .swiper-container .swiper-slide .visual_txt .tel_btn { display: inline-block; }
}
@media screen and (max-width:450px){
    #main #visual .swiper-container .slide01 .txtbox dd { text-align: center;justify-content: center; }
    #main #visual .swiper-container .slide01 .txtbox dd .txt-1 .title{ font-weight:800;width: 100%;text-align: center;font-size: 24px; }
}




/* title */
#main .title-box h3 { font-weight:800; color:#222; line-height:1.3; font-size:50px;  }
#main .title-box h3 strong { color:var(--mainColor); font-weight:800; }
#main .title-box dd { font-family:var(--subFont1); font-weight:300; color:#474747; line-height:1.75; font-size:20px; }
@media screen and (max-width:1024px){
    #main .title-box h3 { font-size:38px; }
    #main .title-box dd { font-size:18px; }
}
@media screen and (max-width:640px){
    #main .title-box h3 { font-size:24px; }
    #main .title-box dd { font-size:16px; }
}

/* animation */
#main .title-box { overflow:hidden }
#main .title-box h3,
#main .title-box dd { opacity:0; }
#main .subOn .title-box h3 { animation:ani_3 0.8s 0.2s; animation-fill-mode:both; }
#main .subOn .title-box dd { animation:ani_3 0.8s 0.5s; animation-fill-mode:both; }
/* #main #visual .swiper-container .swiper-slide .visual_txt .btn_link { animation:ani_3 0.8s 0.2s; animation-fill-mode:both; } */


#main .btn_more { margin-top:55px; }
#main .btn_more a { transition:all 0.3s; margin:0 auto; width:220px; height:60px; border:1px solid var(--mainColor); display:flex; justify-content:center; align-items:center; border-radius:60px; }
#main .btn_more span { transition:all 0.3s; font-family:var(--subFont1); font-weight:400; color:var(--mainColor); line-height:1.2; font-size:17px; padding-right:16px; display:inline-block; background:url(../img/main/service_arr.png) right center no-repeat; }
#main .btn_more a:hover { background:var(--mainColor); }
#main .btn_more a:hover span { filter:brightness(0) invert(1);}
#main .btn_more2 { margin-top:55px; }
#main .btn_more2 a { transition:all 0.3s; width:220px; height:60px; border:1px solid var(--mainColor); display:flex; justify-content:center; align-items:center; border-radius:60px; }
#main .btn_more2 span { transition:all 0.3s; font-family:var(--subFont1); font-weight:400; color:var(--mainColor); line-height:1.2; font-size:17px; padding-right:16px; display:inline-block; background:url(../img/main/service_arr.png) right center no-repeat; }
#main .btn_more2 a:hover { background:var(--mainColor); }
#main .btn_more2 a:hover span { filter:brightness(0) invert(1);}
#main .btn_more3_G {display: flex; flex-direction: row-reverse;}
#main .btn_more3 { margin-top:55px; }
#main .btn_more3:nth-child(2) { margin-right: 15px; }
#main .btn_more3 a { transition:all 0.3s; width:220px; height:60px; border:1px solid var(--mainColor); display:flex; justify-content:center; align-items:center; border-radius:60px; }
#main .btn_more3 span { transition:all 0.3s; font-family:var(--subFont1); font-weight:400; color:var(--mainColor); line-height:1.2; font-size:17px; padding-right:10px; display:inline-block; background:url(../img/main/service_arr.png) right center no-repeat; }
#main .btn_more3 a:hover { background:var(--mainColor); }
#main .btn_more3 a:hover span { filter:brightness(0) invert(1);}
@media screen and (max-width:1024px){
    #main .btn_more { margin-top:40px; }
    #main .btn_more a { height:50px; width:190px; }
    #main .btn_more span { font-size:16px; }
    #main .btn_more2 { margin-top:40px; }
    #main .btn_more2 a { height:50px; width:190px; }
    #main .btn_more2 span { font-size:16px; }
    #main .btn_more3 { margin-top:40px; }
    #main .btn_more3 a { height:50px; width:190px; }
    #main .btn_more3 span { font-size:16px; }
}
@media screen and (max-width:870px) {
    #main .btn_more3 { margin-top:40px; }
    #main .btn_more3 a { height:50px; width:120px; }
    #main .btn_more3 span { font-size:16px; }
}

@media screen and (max-width:640px) {
    #main .btn_more3_G {display: flex; flex-direction: row;}
    #main .btn_more3:nth-child(1) { margin-right: 15px; }
    #main .btn_more3 a { height:50px; width:140px; }
}

/* service */
#main .service-box { padding-top:190px; }
#main .service-box .title-box { text-align:center }
#main .service-box .title-box dd { margin-top:20px; }
#main .service-box .listbox { margin-top:70px; }
#main .service-box .listbox ul { display:flex; justify-content:center; gap:20px; margin-bottom: 20px; }
#main .service-box .listbox li { width:calc((100% - 60px) / 4); display:flex; justify-content:center; width:100%; height:470px; background:#f9f9f9; border-radius:10px; transition:all 0.3s;  }
#main .service-box .listbox li:hover { box-shadow:0px 0px 25px rgba(13, 95, 255, 0.3); }
#main .service-box .listbox li .box { padding-top:45px; text-align:center; }
#main .service-box .listbox li .box .icon { margin:0 auto; width:210px; height:210px; display:flex; justify-content:center; align-items:center; background:#fff; border:1px solid #ddd; border-radius:210px; }
#main .service-box .listbox li .box dt { padding-top:25px; font-weight:700; color:#222; line-height:1.4; font-size:26px; }
#main .service-box .listbox li .box dd { margin-top:15px; font-weight:400; color:#444; line-height:1.6; font-size:16px; word-break:keep-all; }
#main .service-box .listbox li .box .link { margin-top:25px; }
#main .service-box .listbox li .box .link a { font-family:var(--subFont1); font-weight:400; color:var(--mainColor); line-height:1.2; font-size:17px; }
#main .service-box2 { padding-top:190px; }
#main .service-box2 .title-box { text-align:center }
#main .service-box2 .title-box dd { margin-top:20px; }
#main .service-box2 .listbox { margin-top:70px; }
#main .service-box2 .listbox ul { display:flex; justify-content:center; gap:20px; margin-bottom: 20px; }
#main .service-box2 .listbox li { width:calc((100% - 60px) / 4); display:flex; justify-content:center; width:100%; height:470px; background:#f9f9f9; border-radius:10px; border:1px solid #ddd; transition:all 0.3s;  }
#main .service-box2 .listbox li:hover { box-shadow:0px 0px 25px rgba(13, 95, 255, 0.3); }
#main .service-box2 .listbox li .box { padding-top:45px; text-align:center; }
#main .service-box2 .listbox li .box .icon { margin:0 auto; width:210px; height:210px; display:flex; justify-content:center; align-items:center; background:#fff; border:1px solid #ddd; border-radius:210px; }
#main .service-box2 .listbox li .box dt { padding-top:25px; font-weight:700; color:#222; line-height:1.4; font-size:26px; }
#main .service-box2 .listbox li .box dd { margin-top:15px; font-weight:400; color:#444; line-height:1.6; font-size:16px; word-break:keep-all; }
#main .service-box2 .listbox li .box .link { margin-top:25px; }
#main .service-box2 .listbox li .box .link a { font-family:var(--subFont1); font-weight:400; color:var(--mainColor); line-height:1.2; font-size:17px; }
@media screen and (max-width:1280px){
    #main .service-box .listbox ul { gap:15px; }
    #main .service-box .listbox li { width:calc((100% - 45px) / 4); }
    #main .service-box .listbox li .box .icon { width:190px; height:190px; }
    #main .service-box .listbox li .box dd br { display:none }
    #main .service-box2 .listbox ul { gap:15px; }
    #main .service-box2 .listbox li { width:calc((100% - 45px) / 4); }
    #main .service-box2 .listbox li .box .icon { width:190px; height:190px; }
    #main .service-box2 .listbox li .box dd br { display:none }
}
@media screen and (max-width:1024px){
    #main .service-box { padding-top:120px; }
    #main .service-box .listbox ul { gap:15px; flex-wrap:wrap; margin-bottom: 15px; }
    #main .service-box .listbox li { width:calc((100% - 30px) / 2); height:420px; }
    #main .service-box .listbox li .box { padding-top:30px; }
    #main .service-box .listbox li .box .icon { width:150px; height:150px; }
    #main .service-box .listbox li .box .icon img { width:50px; }
    #main .service-box .listbox li .box dt { padding-top:20px; font-size:22px; }
    #main .service-box .listbox li .box dd { margin-top:12px; font-size:16px; }
    #main .service-box .listbox li .box .link { margin-top:20px; }
    #main .service-box .listbox li .box .link a { font-size:16px; }
    #main .service-box2 { padding-top:120px; }
    #main .service-box2 .listbox ul { gap:15px; flex-wrap:wrap; margin-bottom: 15px; }
    #main .service-box2 .listbox li { width:calc((100% - 30px) / 2); height:420px; }
    #main .service-box2 .listbox li .box { padding-top:30px; }
    #main .service-box2 .listbox li .box .icon { width:150px; height:150px; }
    #main .service-box2 .listbox li .box .icon img { width:50px; }
    #main .service-box2 .listbox li .box dt { padding-top:20px; font-size:22px; }
    #main .service-box2 .listbox li .box dd { margin-top:12px; font-size:16px; }
    #main .service-box2 .listbox li .box .link { margin-top:20px; }
    #main .service-box2 .listbox li .box .link a { font-size:16px; }
}
@media screen and (max-width:640px){
    #main .service-box { padding-top:80px; }
    #main .service-box .listbox { margin-top: 20px; }
    #main .service-box .listbox ul { gap:10px; flex-wrap:wrap; margin-bottom: 10px; }
    #main .service-box .listbox li { width:calc((100% - 20px) / 2); height:340px; }
    #main .service-box .listbox li .box { padding-top:20px; }
    #main .service-box .listbox li .box .icon { width:120px; height:120px; }
    #main .service-box .listbox li .box .icon img { width:38px; }
    #main .service-box .listbox li .box dt { padding-top:15px; font-size:20px; }
    #main .service-box .listbox li .box dd { margin-top:12px; font-size:16px; padding:0 10px; }
    #main .service-box .listbox li .box .link { margin-top:20px; }
    #main .service-box .listbox li .box .link a { font-size:16px; }
    #main .service-box2 { padding-top:80px; }
    #main .service-box2 .listbox { margin-top: 20px; }
    #main .service-box2 .listbox ul { gap:10px; flex-wrap:wrap; margin-bottom: 10px; }
    #main .service-box2 .listbox li { width:calc((100% - 20px) / 2); height:340px; }
    #main .service-box2 .listbox li .box { padding-top:20px; }
    #main .service-box2 .listbox li .box .icon { width:120px; height:120px; }
    #main .service-box2 .listbox li .box .icon img { width:38px; }
    #main .service-box2 .listbox li .box dt { padding-top:15px; font-size:20px; }
    #main .service-box2 .listbox li .box dd { margin-top:12px; font-size:16px; padding:0 10px; }
    #main .service-box2 .listbox li .box .link { margin-top:20px; }
    #main .service-box2 .listbox li .box .link a { font-size:16px; }
}

/* animation */
#main .service-box .listbox li { opacity:0; }
#main .service-box.subOn .listbox li:nth-child(1) { animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }
#main .service-box.subOn .listbox li:nth-child(2) { animation:ani_4 0.8s 0.7s; animation-fill-mode:both; }
#main .service-box.subOn .listbox li:nth-child(3) { animation:ani_4 0.8s 0.9s; animation-fill-mode:both; }
#main .service-box.subOn .listbox li:nth-child(4) { animation:ani_4 0.8s 1.1s; animation-fill-mode:both; }
#main .service-box2 .listbox li { opacity:0; }
#main .service-box2.subOn .listbox li:nth-child(1) { animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }
#main .service-box2.subOn .listbox li:nth-child(2) { animation:ani_4 0.8s 0.7s; animation-fill-mode:both; }
#main .service-box2.subOn .listbox li:nth-child(3) { animation:ani_4 0.8s 0.9s; animation-fill-mode:both; }
#main .service-box2.subOn .listbox li:nth-child(4) { animation:ani_4 0.8s 1.1s; animation-fill-mode:both; }

/* about */
#main .about-box { margin-top:200px; padding-bottom:180px;display: none; }
#main .about-box .title-box { text-align:center }
#main .about-box .title-box h3,
#main .about-box .title-box h3 strong,
#main .about-box .title-box h3 span { font-family:var(--mainFont); }
#main .about-box .listbox { margin-top:95px; }
#main .about-box .listbox ul { display:flex; justify-content:center; }
#main .about-box .listbox li:nth-child(1) { padding-right:50px; }
#main .about-box .listbox li:nth-child(2) { width:480px; padding:0 50px; }
#main .about-box .listbox li:nth-child(3) { padding-left:50px; }
#main .about-box .listbox li:nth-child(3) .txt-1 .num { min-width: 0px; }
#main .about-box .listbox li:not(:last-child) { border-right:1px solid #ddd }
#main .about-box .listbox li { text-align:center }
#main .about-box .listbox li .txt-1 .num { font-family:var(--mainFont); font-weight:700; color:#222; line-height:1.3; font-size:90px; text-align:right; }
#main .about-box .listbox li .txt-1 .stxt { margin:15px 0 0 10px; font-family:var(--mainFont); font-weight:600; color:var(--mainColor); font-size:40px; display:inline-block; vertical-align:top; }
#main .about-box .listbox li .txt-1 .plus { margin-left:15px; overflow:hidden; text-indent:-9999em; width:32px; height:32px; background:url(../img/main/about_plus.png) center no-repeat; }
#main .about-box .listbox li .txt-2 { margin-top:5px; font-family:var(--fontSub); font-weight:400; color:#444; line-height:1.3; font-size:24px; word-break:keep-all; }
#main .about-box .listbox li .txt-1 { min-width:220px; display:inline-block; }
#main .about-box .listbox li .txt-1 .num { min-width:200px; display:inline-block; }
@media screen and (max-width:1280px){
    #main .about-box .listbox li:nth-child(1) { padding-right:40px; }
    #main .about-box .listbox li:nth-child(2) { width:380px; padding:0 40px; }
    #main .about-box .listbox li:nth-child(3) { padding-left:40px; }
    #main .about-box .listbox li .txt-1 .num { font-size:75px; }
    #main .about-box .listbox li .txt-1 .stxt { margin:15px 0 0 10px; font-size:34px; }
    #main .about-box .listbox li .txt-1 .plus { margin-left:15px; width:28px; height:28px; background-size:28px 28px; }
    #main .about-box .listbox li .txt-2 { margin-top:5px; font-size:20px; }
    #main .about-box .listbox li .txt-1 { min-width:180px; }
    #main .about-box .listbox li .txt-1 .num { min-width:160px; }
}
@media screen and (max-width:1024px){
    #main .about-box { margin-top:120px; padding-bottom:120px; }
    #main .about-box .listbox { margin-top:70px; }
    #main .about-box .listbox li:nth-child(1) { padding-right:30px; }
    #main .about-box .listbox li:nth-child(2) { width:250px; padding:0 30px; }
    #main .about-box .listbox li:nth-child(3) { padding-left:30px; }
    #main .about-box .listbox li .txt-1 .num { font-size:60px; }
    #main .about-box .listbox li .txt-1 .stxt { margin:10px 0 0 10px; font-size:26px; }
    #main .about-box .listbox li .txt-1 .plus { margin-left:12px; width:20px; height:20px; background-size:20px 20px; }
    #main .about-box .listbox li .txt-2 { margin-top:0; font-size:18px; }
    #main .about-box .listbox li .txt-1 { min-width:160px; }
    #main .about-box .listbox li .txt-1 .num { min-width:140px; }
    #main .about-box .listbox li:nth-child(2) .txt-1 { margin-left:-24%; }
}
@media screen and (max-width:760px){
    #main .about-box .listbox li:nth-child(1) { padding-right:20px; }
    #main .about-box .listbox li:nth-child(2) { width:180px; padding:0 20px; }
    #main .about-box .listbox li:nth-child(3) { padding-left:20px; }
    #main .about-box .listbox li .txt-1 .num { font-size:50px; }
    #main .about-box .listbox li .txt-1 .stxt { margin:8px 0 0 10px; font-size:20px; }
    #main .about-box .listbox li .txt-1 .plus { margin-left:10px; width:16px; height:16px; background-size:16px 16px; }
    #main .about-box .listbox li .txt-2 { margin-top:0; font-size:18px; }
    #main .about-box .listbox li .txt-1 { min-width:140px; }
    #main .about-box .listbox li .txt-1 .num { min-width:120px; }
    #main .about-box .listbox li:nth-child(2) .txt-1 { margin-left:-24%; }
}
@media screen and (max-width:640px){
    #main .about-box { margin-top:80px; padding-bottom:80px; }
    #main .about-box .inner { padding:0 10px; }
    #main .about-box .listbox { margin-top:40px; }
    #main .about-box .listbox li:nth-child(1) { padding-right:20px; }
    #main .about-box .listbox li:nth-child(2) { width:auto; padding:0 20px; }
    #main .about-box .listbox li:nth-child(3) { padding-left:20px; }
    #main .about-box .listbox li .txt-1 .num { font-size:34px; }
    #main .about-box .listbox li .txt-1 .stxt { margin:8px 0 0 2px; font-size:15px; }
    #main .about-box .listbox li .txt-1 .plus { margin-left:2px; width:12px; height:12px; background-size:12px 12px; }
    #main .about-box .listbox li .txt-2 { margin-top:0; font-size:16px; }
    #main .about-box .listbox li .txt-1 { min-width:90px; }
    #main .about-box .listbox li .txt-1 .num { min-width:70px; }
    #main .about-box .listbox li:nth-child(2) .txt-1 { margin-left:-24%; }
}
@media screen and (max-width:500px){
    #main .about-box .listbox li:nth-child(1) { padding-right:10px; }
    #main .about-box .listbox li:nth-child(2) { padding:0 10px; }
    #main .about-box .listbox li:nth-child(3) { padding-left:10px; }
}

/* different */
#main .different-box { position:relative; padding:200px 0; background:#f5f5f5; overflow:hidden; }
#main .different-box:before { content:''; display:block; position:absolute; top:0; right:0; width:460px; height:177px; background:url(/img/main/different_bg1.png) no-repeat center center; }
#main .different-box:after { content:''; display:block; position:absolute; bottom:0; left:0; width:579px; height:603px; background:url(/img/main/different_bg2.png) no-repeat center center; }
#main .different-box .inner { display:flex; }
#main .different-box .title-box { width:520px; }
#main .different-box .title-box h3,
#main .different-box .title-box h3 strong,
#main .different-box .title-box h3 span { font-family:var(--mainFont); }
#main .different-box .title-box strong { display:block; }
#main .different-box .title-box dd { margin-top:25px; }
#main .different-box .listbox { width:calc(100% - 520px); position:relative; z-index:5; }
#main .different-box .listbox ul { display:flex; flex-wrap:wrap; gap:25px 24px; }
#main .different-box .listbox li { width:calc((100% - 48px) / 3); background:#e8e8e8; border-radius:10px; height:350px; padding:44px; }
#main .different-box .listbox li:nth-child(2n) { background:#fff }
#main .different-box .listbox li .icon { height:85px; display:flex; align-items:center;}
#main .different-box .listbox dl { margin-top:65px; }
#main .different-box .listbox dt { font-family:var(--fontSub); font-weight:600; color:#222; line-height:1.3; font-size:24px; }
#main .different-box .listbox dd { margin-top:15px; font-weight:400; color:#444; line-height:1.6; font-size:16px; word-break:keep-all; }
@media screen and (max-width:1580px){
    #main .different-box .listbox dd br { display:none }
}
@media screen and (max-width:1400px){
    #main .different-box .title-box { width:400px; }
    #main .different-box .listbox { width:calc(100% - 400px); }
    #main .different-box .listbox li { padding:30px; }
}
@media screen and (max-width:1280px){
    #main .different-box .inner { flex-wrap:wrap; }
    #main .different-box .title-box,
    #main .different-box .listbox { width:100%; }
    #main .different-box .title-box { text-align:center }
    #main .different-box .title-box h3 strong,
    #main .different-box .title-box h3 span { display:inline-block; }
    #main .different-box .title-box h3 span { margin-right:20px; }
    #main .different-box .listbox { margin-top:50px; }
}
@media screen and (max-width:1024px){
    #main .different-box:before { width:300px; height:115px; background-size:300px 115px; }
    #main .different-box:after { width:380px; height:395px; background-size:380px 395px; }
    #main .different-box { padding:120px 0; }
    #main .different-box .title-box h3 span { margin-right:15px; }
    #main .different-box .listbox li { height:300px; }
    #main .different-box .listbox dl { margin-top:40px; }
    #main .different-box .listbox dt { font-size:20px; }
    #main .different-box .listbox dd { font-size:15px; }
}
@media screen and (max-width:860px){
    #main .different-box .listbox ul { gap:20px; }
    #main .different-box .listbox li { width:calc((100% - 20px) / 2); }
    #main .different-box .listbox li:nth-child(2),
    #main .different-box .listbox li:nth-child(3) { background:#fff }
    #main .different-box .listbox li:nth-child(4) { background:#e8e8e8; }
}
@media screen and (max-width:640px){
    #main .different-box:before { width:180px; height:69px; background-size:180px 69px; }
    #main .different-box:after { width:220px; height:229px; background-size:220px 229px; }
    #main .different-box { padding:80px 0; }
    #main .different-box .title-box h3 span { margin-right:10px; }
    #main .different-box .listbox li .icon,
    #main .different-box .listbox li .icon img { height:60px; }
    #main .different-box .listbox ul { gap:10px; }
    #main .different-box .listbox li { width:calc((100% - 10px) / 2); padding:25px 15px; height:250px; }
    #main .different-box .listbox dl { margin-top:20px; }
    #main .different-box .listbox dt { font-size:18px; }
}

/* animation */
#main .different-box .listbox li { opacity:0; }
#main .different-box.subOn .listbox li:nth-child(1) { animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }
#main .different-box.subOn .listbox li:nth-child(2) { animation:ani_4 0.8s 0.7s; animation-fill-mode:both; }
#main .different-box.subOn .listbox li:nth-child(3) { animation:ani_4 0.8s 0.9s; animation-fill-mode:both; }
#main .different-box.subOn .listbox li:nth-child(4) { animation:ani_3 0.8s 0.5s; animation-fill-mode:both; }
#main .different-box.subOn .listbox li:nth-child(5) { animation:ani_3 0.8s 0.7s; animation-fill-mode:both; }
#main .different-box.subOn .listbox li:nth-child(6) { animation:ani_3 0.8s 0.9s; animation-fill-mode:both; }
@media screen and (max-width:1024px){
    #main .different-box.subOn .listbox li:nth-child(4) { animation:ani_4 0.8s 1.1s; animation-fill-mode:both; }
    #main .different-box.subOn .listbox li:nth-child(5) { animation:ani_4 0.8s 1.3s; animation-fill-mode:both; }
    #main .different-box.subOn .listbox li:nth-child(6) { animation:ani_4 0.8s 1.4s; animation-fill-mode:both; }
}

/* support */
#main .support-box { padding-top:200px; }
#main .support-box .title-box { text-align:center }
#main .support-box .title-box dd { margin-top:10px; }
#main .support-box .listbox { margin-top:85px; }
#main .support-box .listbox ul { display:flex; flex-wrap:wrap; gap:0 40px; }
#main .support-box .listbox li { position:relative; width:calc((100% - 120px) / 4); background:#fff; border-radius:10px; padding:0 10px; height:470px; border:1px solid #ddd; transition:all 0.3s; }
#main .support-box .listbox li .box { padding-top:65px; text-align:center; transition:all 0.3s; }
#main .support-box .listbox li .box .icon { margin:0 auto; width:212px; height:212px; display:flex; align-items:center; justify-content:center; background:#f9f9f9; border-radius:210px;}
#main .support-box .listbox li .box dl { margin-top:30px; } 
#main .support-box .listbox li .box dt { font-size:24px; color:#222; font-weight:700; line-height:1.3; letter-spacing:-0.02em; }
#main .support-box .listbox li .box dd { margin-top:15px; font-size:16px; color:#222; font-weight:400; line-height:1.6; letter-spacing:-0.02em; word-break:keep-all; }
#main .support-box .listbox li .over { opacity:0; position:absolute; top:0; left:0; width:100%; height:100%; transition:all 0.3s; padding:34px; }
#main .support-box .listbox li .over .icon img { width:65px; }
#main .support-box .listbox li .over dl { text-align:center; margin-top:35px; }
#main .support-box .listbox li .over dt { min-height:78px; font-size:30px; color:var(--mainColor); font-weight:800; line-height:1.3; letter-spacing:-0.02em; }
#main .support-box .listbox li .over dd { position:relative; margin-top:25px; padding-top:25px; font-size:16px; color:#444; font-weight:400; line-height:1.6; letter-spacing:-0.02em; word-break:keep-all; }
#main .support-box .listbox li .over dd:before { content:''; display:block; position:absolute; top:0; left:50%; transform:translateX(-50%); width:20px; height:2px; background:var(--mainColor); }
#main .support-box .listbox li:hover { box-shadow:0px 0px 25px rgba(13, 95, 255, 0.3); }
#main .support-box .listbox li:hover .box { opacity:0; }
#main .support-box .listbox li:hover .over { opacity:1; }

#main .support-box2 { padding-top: 200px; }
#main .support-box2 .title-box { text-align:center }
#main .support-box2 .title-box dd { margin-top:10px; }
#main .support-box2 .listbox { margin-top:85px; } 
#main .support-box2 .listbox ul { display:flex; flex-wrap:wrap; gap:20px; }
#main .support-box2 .listbox li { width:calc((100% - 60px) / 4); border-radius:10px; background:#fff; border:1px solid #ddd; }
#main .support-box2 .listbox li .imgbox img { width:100%; }
#main .support-box2 .listbox li .txtbox { text-align:center; padding:30px 20px 35px; }
#main .support-box2 .listbox li .txtbox dt { font-size:22px; font-weight:700; color:#222; line-height:1.5; letter-spacing:-0.02em; }
#main .support-box2 .listbox li .txtbox dd { margin-top:20px; font-size:16px; font-weight:400; color:#444; line-height:1.5; letter-spacing:-0.02em; }
#main .support-box2 .listbox li .link { margin-top:25px; }
#main .support-box2 .listbox li .link a { font-family:var(--subFont1); font-weight:400; color:var(--mainColor); line-height:1.2; font-size:17px; }

@media screen and (max-width:1400px){
    #main .support-box .listbox ul { gap:0 30px; }
    #main .support-box .listbox li { width:calc((100% - 90px) / 4); }
    #main .support-box .listbox li .box dd br,
    #main .support-box .listbox li .over dd br { display:none; }
    #main .support-box2 .listbox li .txtbox { padding:20px 3px 25px; }
    #main .support-box2 .listbox li .txtbox dt { font-size:18px; }
    #main .support-box2 .listbox li .txtbox dd { margin-top:15px; font-size:15px; }
}
@media screen and (max-width:1280px){
    #main .support-box .listbox ul { gap:0 20px; }
    #main .support-box .listbox li { width:calc((100% - 60px) / 4); }
    #main .support-box .listbox li .box .icon { width:180px; height:180px; }
    #main .support-box .listbox li .box dt { font-size:22px; }
    #main .support-box .listbox li .over { padding:20px 10px; }
    #main .support-box .listbox li .over dl { margin-top:25px; }
    #main .support-box .listbox li .over dt { min-height:70px; font-size:26px; }
    #main .support-box2 .listbox li .txtbox { padding:20px 0px 25px; }
    #main .support-box2 .listbox li .txtbox dt { font-size:18px; }
    #main .support-box2 .listbox li .txtbox dd { margin-top:15px; font-size:14px; }
}
@media screen and (max-width:1024px){
    #main .support-box { padding-top:120px; }
    #main .support-box .listbox { margin-top:70px; }
    #main .support-box .listbox ul { gap:20px; }
    #main .support-box .listbox li { width:calc((100% - 20px) / 2); height:400px; }
    #main .support-box .listbox li .box { padding-top:45px; }
    #main .support-box .listbox li .box .icon { width:160px; height:160px; }
    #main .support-box .listbox li .box .icon img { width:70px; }
    #main .support-box .listbox li .box dl { margin-top:25px; } 
    #main .support-box .listbox li .box dt { font-size:19px; }
    #main .support-box .listbox li .over { padding:20px 20px; }
    #main .support-box .listbox li .over dl { margin-top:20px; }
    #main .support-box .listbox li .over dt { min-height:60px; font-size:22px; }
    #main .support-box .listbox li .over dd { margin-top:15px; padding-top:15px; }
    #main .support-box2 .listbox ul { gap: 20px; }
    #main .support-box2 .listbox li { width:calc((100% - 40px) / 2); }
    #main .support-box2 .listbox li .txtbox { padding:20px 5px 25px; }
    #main .support-box2 .listbox li .txtbox dt { font-size:18px; }
    #main .support-box2 .listbox li .txtbox dd { margin-top:15px; font-size:16px; }
    #main .support-box2 .listbox li .link { margin-top:20px; }
    #main .support-box2 .listbox li .link a { font-size:16px; }
}
@media screen and (max-width:960px) {
    #main .support-box2 .listbox ul { gap: 15px; }
    #main .support-box2 .listbox li .txtbox { padding:20px 15px 22px; }
    #main .support-box2 .listbox li .txtbox dt { font-size: 18px; }
    #main .support-box2 .listbox li .txtbox dd { margin-top:15px; font-size:15px; }
}
@media screen and (max-width:860px) {
    #main .support-box2 .listbox ul { gap: 10px; }
}
@media screen and (max-width:750px) {
    #main .support-box2 .listbox ul { gap: 10px; }
    #main .support-box2 .listbox li .txtbox { padding:20px 3px 25px; }
}
@media screen and (max-width:640px){
    #main .support-box { padding-top:80px; }
    #main .support-box .listbox { margin-top:40px; }
    #main .support-box .listbox ul { gap:10px; }
    #main .support-box .listbox li { width:calc((100% - 10px) / 2); }
    #main .support-box2 .listbox { margin-top:20px; }
    #main .support-box2 .listbox ul { gap: 10px; }
    #main .support-box2 .listbox li { width:calc((100% - 40px) / 2); }
    #main .support-box2 .listbox li .txtbox { padding:20px 3px 25px; }
    #main .support-box2 .listbox li .txtbox dt { font-size: 18px; }
    #main .support-box2 .listbox li .txtbox dd { margin-top:15px; font-size:14px; }
    #main .support-box2 .listbox li .link { margin-top:20px; }
    #main .support-box2 .listbox li .link a { font-size:15px; }
    #main .support-box2 .listbox ul li{ width: 48%; }
}
@media screen and (max-width:500px){
    #main .support-box .listbox li { width:100%; height:320px; }
    #main .support-box .listbox li .box { padding-top:25px; }
    #main .support-box .listbox li .box .icon { width:140px; height:140px; }
    #main .support-box .listbox li .box .icon img { width:60px; }
    #main .support-box .listbox li .box dl { margin-top:20px; } 
    #main .support-box .listbox li .box dt { font-size:20px; }
    #main .support-box .listbox li .over { padding:20px 20px; }
    #main .support-box .listbox li .over dl { margin-top:15px; }
    #main .support-box .listbox li .over dt { min-height:60px; font-size:22px; }
    #main .support-box2 .listbox li .txtbox { padding:20px 5px 25px; }
    #main .support-box2 .listbox li .txtbox dt { font-size: 17px; }
    #main .support-box2 .listbox li .txtbox dd { margin-top:15px; font-size:14px; }
    #main .support-box2 .listbox li .link { margin-top:20px; }
    #main .support-box2 .listbox li .link a { font-size:14px; }
}

/* animation */
#main .support-box .listbox li { opacity:0; }
#main .support-box.subOn .listbox li:nth-child(1) { animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }
#main .support-box.subOn .listbox li:nth-child(2) { animation:ani_4 0.8s 0.7s; animation-fill-mode:both; }
#main .support-box.subOn .listbox li:nth-child(3) { animation:ani_4 0.8s 0.9s; animation-fill-mode:both; }
#main .support-box.subOn .listbox li:nth-child(4) { animation:ani_4 0.8s 1.1s; animation-fill-mode:both; }
#main .support-box2 .listbox li { opacity:0; }
#main .support-box2.subOn .listbox li:nth-child(1) { animation:ani_4 0.8s 0.5s; animation-fill-mode:both; }
#main .support-box2.subOn .listbox li:nth-child(2) { animation:ani_4 0.8s 0.7s; animation-fill-mode:both; }
#main .support-box2.subOn .listbox li:nth-child(3) { animation:ani_4 0.8s 0.9s; animation-fill-mode:both; }
#main .support-box2.subOn .listbox li:nth-child(4) { animation:ani_4 0.8s 1.1s; animation-fill-mode:both; }

/* other-service */
#main .other-box { padding:140px 0; overflow:hidden }
#main .other-box * { word-break:keep-all; }
#main .other-box.bg { background:#fff; }
#main .other-box .title-box { margin-top:10px; text-align: center; }
#main .other-box .listbox { margin-top:50px; z-index:2; position:relative; }
#main .other-box .listbox li:not(:last-child) { margin-bottom:60px; }
#main .other-box .listbox li { display:flex; align-items:center; gap:0 82px; }
#main .other-box .listbox li .imgbox { width:calc(50% - 82px); position:relative; }
#main .other-box .listbox li .imgbox:before { content: ""; display:block; padding-bottom:72.5%; }
#main .other-box .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; }
#main .other-box .listbox li .txtbox { width:50%; padding-left:82px; }
#main .other-box .listbox li .txtbox dt { font-size:26px; font-weight:700; color:#222; line-height:1.3; letter-spacing:-0.02em; }
#main .other-box .listbox li .txtbox dt strong { display:block; color:#eee; font-size:62px; font-weight:700; margin-bottom:38px; }
#main .other-box .listbox li .txtbox dd { margin-top:20px; font-size:20px; font-weight:300; color:#555; line-height:1.3; letter-spacing:-0.02em; }
#main .other-box .listbox li:nth-child(2n) { flex-direction:row-reverse; }
#main .other-box .listbox li:nth-child(2n) .txtbox { text-align:right; padding:0 82px 0 0; }
@media screen and (max-width:1280px){
    #main .other-box .listbox li:not(:last-child) { margin-bottom:50px; }
    #main .other-box .listbox li { gap:0 35px; }
    #main .other-box .listbox li .imgbox { width:calc(50% - 35px); }
    #main .other-box .listbox li .txtbox { padding-left:35px; }
    #main .other-box .listbox li:nth-child(2n) .txtbox { padding:0 35px 0 0; }
    #main .other-box .listbox li .txtbox dt { font-size:22px; }
    #main .other-box .listbox li .txtbox dt strong { font-size:54px; margin-bottom:34px; }
    #main .other-box .listbox li .txtbox dd { margin-top:15px; font-size:18px; }
}
@media screen and (max-width:1024px){
    #main .other-box { padding:100px 0; }
    #main .other-box { margin-top:40px; }
    #main .other-box .listbox li:not(:last-child) { margin-bottom:40px; }
    #main .other-box .listbox li { gap:0 20px; }
    #main .other-box .listbox li .imgbox { width:calc(50% - 20px); }
    #main .other-box .listbox li .imgbox img { border-radius:10px;}
    #main .other-box .listbox li .txtbox { padding-left:20px; }
    #main .other-box .listbox li:nth-child(2n) .txtbox { padding:0 20px 0 0; }
    #main .other-box .listbox li .txtbox dt { font-size:20px; }
    #main .other-box .listbox li .txtbox dt strong { font-size:38px; margin-bottom:20px; }
    #main .other-box .listbox li .txtbox dd { margin-top:12px; font-size:16px; }
}
@media screen and (max-width:860px){
    #main .other-box .listbox li:not(:last-child) { margin-bottom:40px; }
    #main .other-box .listbox li { gap:0 20px; }
    #main .other-box .listbox li .imgbox { width:calc(50% - 20px); }
    #main .other-box .listbox li .txtbox { padding-left:20px; }
    #main .other-box .listbox li:nth-child(2n) .txtbox { padding:0 20px 0 0; }
    #main .other-box .listbox li .txtbox dt { font-size:18px; }
    #main .other-box .listbox li .txtbox dt strong { font-size:30px; margin-bottom:15px; }
    #main .other-box .listbox li .txtbox dd { margin-top:10px; font-size:15px; }
}
@media screen and (max-width:760px){
    .global-hosting.global-hosting3 .listbox li { width:100%; }
}
@media screen and (max-width:640px){
    #main .other-box { padding:80px 0; }
    #main .other-box .listbox { margin-top:30px; }
    #main .other-box .listbox li:not(:last-child) { margin-bottom:35px; }
    #main .other-box .listbox li { gap:10px; flex-wrap:wrap; }
    #main .other-box .listbox li .imgbox,
    #main .other-box .listbox li .txtbox { padding-left:0; width:100%; }
    #main .other-box .listbox li .imgbox:before { padding-bottom:56.5%; }
    #main .other-box .listbox li:nth-child(2n) { flex-direction:row; }
    #main .other-box .listbox li:nth-child(2n) .txtbox { padding:0; text-align:left; }
    #main .other-box .listbox li .txtbox dt { font-size:17px; }
    #main .other-box .listbox li .txtbox dt strong { font-size:26px; margin-bottom:13px; }
}

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

/* new */
#main .new-box { padding-top:190px; }
#main .new-box .title-box h3,
#main .new-box .title-box h3 strong,
#main .new-box .title-box h3 span { font-family:var(--mainFont); }
#main .newCont { position:relative; margin-top:55px; display:flex; flex-wrap:wrap; }
#main .newCont .video-box { width:640px; position:relative; }
#main .newCont .video-box .movbox { position:relative; border-radius:15px; border:4px solid #fff; }
#main .newCont .video-box .movbox:after { content:''; display:block; padding-top:56.5%; }
#main .newCont .video-box iframe { position:absolute; left:0; top:0; width:100%; height:100%; border-radius:15px; }
#main .newCont .video-box video { position:absolute; left:0; top:0; width:100%; height:100%; border-radius:15px; }
#main .newCont .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; }
#main .newCont .video-box .play { cursor:pointer; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:5; }
#main .newCont .video-box2 { width:600px; position:relative; display: flex; justify-content: center; align-items: center; background-color: #e8e8e8; border-radius: 12px; }
#main .newCont .video-box2:before { content:''; display:block; position:absolute; top:0; right:0; width:213px; height:237px; background:url(../img/common/circle_bg1.png) no-repeat left bottom; }
#main .newCont .video-box2:after { content:''; display:block; position:absolute; bottom:0; left:0; width:237px; height:350px; background:url(../img/common/circle_bg2.png) no-repeat right top; }
#main .newCont .video-box2 .movbox2 { position:relative; border-radius:15px; z-index: 2; }
#main .newCont .video-box2 .movbox2 .txt-box { display: flex; flex-direction: column; text-align: center;}
#main .newCont .video-box2 .movbox2 .txt-box dl { font-size: 25px; color: #000; line-height: 1.5; font-weight: 600; letter-spacing: 0.5px; }
#main .newCont .video-box2 .movbox2 .txt-box dt { font-size: 18px; color: #222; line-height: 1.7; letter-spacing: 1px; }
#main .newCont .video-box2 .movbox2 .txt-box dl strong { font-weight: 700; color: var(--mainColor);}
#main .newCont .video-box2 .movbox2 .txt-box dt strong { font-weight: 550; }
#main .newCont .video-box2 .movbox2 .icon-box { display: flex; flex-direction: row; justify-content: center; margin-top: 35px; gap: 60px; }
#main .newCont .video-box2 .movbox2 .icon-box dl a { font-size: 18px; color:#000; }
#main .newCont .listbox { position:relative; padding-left:70px; width:calc(100% - 640px); }
#main .newCont .listbox .nav { position:absolute; top:-82px; right:0; }
#main .newCont .listbox .nav ul { display:flex; }
#main .newCont .listbox .nav ul li a { height:56px; display:flex; align-items:center; color:#ccc; font-size:20px; font-weight:700; letter-spacing:-0.02em; padding:0 52px; }
#main .newCont .listbox .nav ul li.active a { background:var(--mainColor); color:#fff; border-radius:50px; }
#main .newCont .listbox .tab { display:none }
#main .newCont .listbox .tab.active { display:block }
#main .newCont .listbox .tab li:first-child { border-top:1px solid #000 }
#main .newCont .listbox .tab li { border-bottom:1px solid #ddd; height:120px; }
#main .newCont .listbox .tab li a { transition:all 0.3s; display:flex; align-items:center; width:100%; height:100%; padding:0 95px 0 0; position:relative; }
#main .newCont .listbox .tab li a:before { transition:all 0.3s; opacity:0; content:''; display:block; position:absolute; top:50%; right:20px; transform:translateY(-50%); width:65px; height:65px; border:1px solid var(--mainColor); border-radius:50px; background:url(../img/main/news_arr.png) center center no-repeat;  }
#main .newCont .listbox .tab li a:hover:before { opacity:1; }
#main .newCont .listbox .tab li a:hover { background: #F9F9F9; }
#main .newCont .listbox .tab li .type { text-align:center; width:170px; font-family:var(--mainFont); color:var(--mainColor); font-size:18px; font-weight:700; letter-spacing:-0.02em; }
#main .newCont .listbox .tab li .txtbox { width:calc(100% - 170px); padding-left:40px; }
#main .newCont .listbox .tab li .txt { color:#111; font-size:22px; font-weight:400; letter-spacing:-0.02em; line-height:1.3; display:block; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
#main .newCont .listbox .tab li .date { margin-top:8px; color:#aaa; font-size:15px; font-weight:300; letter-spacing:-0.02em; line-height:1.3; display:block; padding-left:16px; background:url(../img/main/date_icon.png) left center no-repeat; }
#main .newCont .listbox .all-view { position:absolute; bottom:-35px; right:0; }
#main .newCont .listbox .all-view span { font-family:var(--subFont1); color:var(--mainColor); font-weight:400; line-height:1.2; font-size:17px; padding-right:16px; display:inline-block; background:url(../img/main/service_arr.png) right center no-repeat; }
@media screen and (max-width:1400px){
    #main .newCont .listbox { padding-left:50px; }
    #main .newCont .listbox .tab li .type { width:110px; }
    #main .newCont .listbox .tab li .txtbox { width:calc(100% - 110px); padding-left:20px; }
}
@media screen and (max-width:1280px){
    #main .new-box .title-box { text-align:center; }
    #main .newCont .video-box { margin:0 auto; }
    #main .newCont .video-box2 { margin:0 auto; width: 100%; }
    #main .newCont .video-box2 .movbox2 { padding: 30px 150px; }
    #main .newCont .video-box2 .movbox2 .txt-box { text-align: center; }
    #main .newCont .listbox { padding-left:0; width:100%; margin-top:100px; }
    #main .newCont .listbox .nav { top:-70px; }
    #main .newCont .listbox .tab li a { padding:25px 95px 25px 0; }
}
@media screen and (max-width:1024px){
    #main .new-box { padding-top:120px; }
    #main .newCont { margin-top:40px; }
    #main .newCont .listbox .nav ul li a { height:50px; font-size:18px; padding:0 50px; }
    #main .newCont .listbox .tab li .type { font-size:16px; }
    #main .newCont .listbox .tab li .txt { font-size:20px; }
    #main .newCont .listbox .tab li a:before { right:10px; width:55px; height:55px; }
    #main .newCont .video-box2 .movbox2 {  padding: 30px 0px;}
}
@media screen and (max-width:640px){
    #main .new-box { padding-top:80px; }
    #main .newCont { margin-top:40px; }
    #main .newCont .listbox { margin-top:40px; }
    #main .newCont .listbox .nav { position:relative; top:unset; margin-bottom:15px; }
    #main .newCont .listbox .nav { text-align:center; }
    #main .newCont .listbox .nav ul { justify-content:center; }
    #main .newCont .listbox .nav ul li a { height:50px; font-size:16px; padding:0 30px; }
    #main .newCont .listbox .tab li .type { font-size:16px; width:90px; }
    #main .newCont .listbox .tab li .txtbox { width:calc(100% - 90px); padding-left:10px; }
    #main .newCont .listbox .tab li .txt { font-size:18px; }
    #main .newCont .listbox .tab li .date { margin-top:5px; font-size:14px; }
    #main .newCont .listbox .tab li a { padding:20px 10px 20px 0; }
    #main .newCont .listbox .tab li a:before { display:none }
    #main .newCont .video-box .play img { width:55px; }
    #main .newCont .video-box2 .movbox2 { padding: 30px 0px;}
    #main .newCont .video-box2 .movbox2 .icon-box {gap: 20px;}
    #main .newCont .video-box2 .movbox2 .txt-box dl {font-size: 20px;}
    #main .newCont .video-box2 .movbox2 .icon-box img {width: 90px;}
}

/* animation */
#main .newCont .listbox .tab li { opacity:0; }
#main .subOn .newCont .listbox .tab.active li:nth-child(1) { animation:ani_2 0.5s 0.1s; animation-fill-mode:both; }
#main .subOn .newCont .listbox .tab.active li:nth-child(2) { animation:ani_2 0.5s 0.4s; animation-fill-mode:both; }
#main .subOn .newCont .listbox .tab.active li:nth-child(3) { animation:ani_2 0.5s 0.7s; animation-fill-mode:both; }