@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 .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 { transition:all 0.3s; position:relative; z-index:1; font-size:16px; color:#222; font-weight:700; letter-spacing:-0.02em; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
#main #visual .swiper-container .swiper-slide .visual_txt .btn_link a span { transition:all 0.3s; display:inline-block; padding-right:16px; font-family:var(--subFont1); font-weight:500; font-size:20px; color:var(--mainColor); background:url(../img/main/visual_arr.png) right center no-repeat; }
#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.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:unset; left:50%; bottom:30px; transform:translate(-50%, 0); width:100%; padding:0 16%; }
    #main #visual .swiper-container .swiper-slide .mvisualImage img { width:100% }
    #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; }
}



/* 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 .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);}
@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; }
}

/* 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; }
#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; }
@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 }
}
@media screen and (max-width:1024px){
    #main .service-box { padding-top:120px; }
    #main .service-box .listbox ul { gap:15px; flex-wrap:wrap; }
    #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; }
}
@media screen and (max-width:640px){
    #main .service-box { padding-top:80px; }
    #main .service-box .listbox ul { gap:10px; flex-wrap:wrap; }
    #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; }
}

/* 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; }

/* about */
#main .about-box { margin-top:200px; padding-bottom:180px; }
#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: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; }
#main .about-box .listbox li:nth-child(2) .txt-1 { margin-left:-18%; }
@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; }
@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; }
}
@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; }
}
@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; }
}
@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); }
}
@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; }
}

/* 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; }

/* 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 .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 .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; }
}
@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; }
}

/* 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; }