/* slick-slider 필수 css */
.slick-slider{position:relative; display:block; box-sizing:border-box; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; -khtml-user-select:none; -ms-touch-action:pan-y; touch-action:pan-y; -webkit-tap-highlight-color:transparent;}
.slick-list{position:relative; display:block; overflow:hidden; margin:0; padding:0;}
.slick-list:focus{outline:none;}
.slick-list.dragging{cursor:pointer; cursor:hand;}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); -ms-transform:translate3d(0, 0, 0); -o-transform:translate3d(0, 0, 0); transform:translate3d(0, 0, 0);}
.slick-track{position:relative; top:0; left:0; display:block;}
.slick-track:before,.slick-track:after{display:table; content:'';}
.slick-track:after{clear:both;}
.slick-loading .slick-track{visibility:hidden;}
.slick-slide{display:none; float:left; height:100%; min-height:1px; -webkit-transform:translate3d(0,0,0);}
.slick-slide img{display:block; margin:0 auto;}
.slick-slide.slick-loading img{display:none;}
.slick-slide.dragging img{pointer-events:none;}
.slick-initialized .slick-slide{display:block;}
.slick-loading .slick-slide{visibility:hidden;}
.slick-vertical .slick-slide{display:block;height:auto; border:1px solid transparent;}
.slick-arrow.slick-hidden{display:none;}

.slick-slider .slick-track,
.slick-slider .slick-list { transform:translate3d(0, 0, 0); }
.slick-slide { transform:translate3d(0,0,0); }



.visual { position:relative; width:100%; height:100%; z-index:2; overflow:hidden; }
.visual.swiper-container { position:relative; width:100%; height:100%; background-color:#0f0f0f }
.visual .swiper-slide { position:relative; width:100%; height:100vh; overflow:hidden; display:flex; transition:all 0.3s ease-in-out; z-index:9; }
.visual .swiper-slide .bg { transform:scale(1.25); position:absolute; width:100%; height:100%; right:0; bottom:0; background-color:#0f0f0f; background-position:center center; background-repeat:no-repeat; background-size:cover !important; }
.visual .swiper-slide .pc { display:block }
.visual .swiper-slide .mobile { display:none }
.visual .swiper-slide .inner { position:relative; width:100%; height:100%; z-index:6; }
.visual .swiper-slide .visual_txt { position:absolute; bottom:140px; left:80px; z-index:100; width:100%; }
.visual .swiper-slide .visual_txt .vs_title { opacity:0; color:#fff; font-size:90px; overflow:hidden; text-transform:uppercase; }
.visual .swiper-slide .visual_txt .vs_title span { display:block; line-height:1; font-weight:700; letter-spacing:-0.02em; }
.visual .swiper-slide .visual_txt .txt_c { color:#fff; }
.visual .swiper-slide .visual_txt .txt { opacity:0; color:rgba(255,255,255,0.8); font-size:24px; overflow:hidden; margin-top:6px; }
.visual .swiper-slide .visual_txt .txt span { display:block; line-height:1.6; font-weight:300; letter-spacing:-0.02em; }
.visual .swiper-slide.swiper-slide-active .visual_txt .vs_title { opacity:1; }
.visual .swiper-slide.swiper-slide-active .visual_txt .vs_title span { animation:txtLeft 1.5s 0.3s; animation-fill-mode:both; }
.visual .swiper-slide.swiper-slide-active .visual_txt .txt_c span { animation:blur_txt 1.8s 0.3s; animation-fill-mode:both;  }
.visual .swiper-slide.swiper-slide-active .visual_txt .txt { opacity:1; }
.visual .swiper-slide.swiper-slide-active .visual_txt .txt span { animation:txtLeft 1.5s 0.6s; animation-fill-mode:both; }
.visual .swiper-slide.swiper-slide-active .bg { animation:bgs1 3.5s 0.3s; animation-fill-mode:both; }


.visual .swiper-container .btnbox { position:absolute; bottom:140px; right:80px; z-index:9; text-align:center; }
.visual .swiper-container .btnbox .box { position:relative; }
.visual .swiper-container .btnbox .txt { font-weight:400; color:#fff; font-size:25px; font-weight:400; width:50px; }
.visual .swiper-container .btnbox .txt.txt_l { font-size:28px; font-weight:600; }
.visual .swiper-container .btnbox .txt.txt_l span { font-weight:600; }
.visual .swiper-container .btnbox .txt.txt_r { color:rgba(255,255,255,0.3) }
.visual .swiper-container .btnbox .txt.txt_r span { color:rgba(255,255,255,0.3); font-weight:400;  }
.visual .swiper-container .btnbox .txt.bar { width:48px; height:20px; background:url(/img/main/bg_v_bar.png) center center no-repeat; }
.visual .swiper-container .btnbox .btn_pn { display:none }
.visual .swiper-container .totalslide { position:relative; color:#fff; display:inline-block; }
.visual .swiper-container .activeslide { position:relative; color:#fff; display:inline-block; }
.visual .swiper-pagination { display:none }
.swiper-button-next:after, 
.swiper-button-prev:after { display:none; }

@media screen and (max-width:1540px){
    .visual .swiper-slide .visual_txt { bottom:140px; left:40px; }
    .visual .swiper-slide .visual_txt .vs_title { font-size:80px; }
    .visual .swiper-slide .visual_txt .txt { font-size:19px; }
    .visual .swiper-container .btnbox { bottom:140px; right:40px; }
    .visual .swiper-container .btnbox .txt { font-size:22px; width:50px; }
    .visual .swiper-container .btnbox .txt.txt_l { font-size:28px; }
    .visual .swiper-container .btnbox .txt.bar { width:48px; height:20px; }
}
@media screen and (max-width:1280px){
    .visual .swiper-slide .visual_txt { bottom:100px; }
    .visual .swiper-slide .visual_txt .vs_title { font-size:55px; }
    .visual .swiper-slide .visual_txt .txt { font-size:18px; }
    .visual .swiper-container .btnbox { bottom:100px; }
    .visual .swiper-container .btnbox .txt { font-size:22px; width:44px; }
    .visual .swiper-container .btnbox .txt.txt_l { font-size:24px; }
    .visual .swiper-container .btnbox .txt.bar { width:44px; }
}
@media screen and (max-width:1024px){
    .visual .swiper-slide .visual_txt { bottom:80px; left:20px; }
    .visual .swiper-slide .visual_txt .vs_title { font-size:40px; }
    .visual .swiper-slide .visual_txt .txt { font-size:16px; }
    .visual .swiper-container .btnbox { bottom:80px; right:20px;  }
    .visual .swiper-container .btnbox .txt { font-size:18px; width:40px; }
    .visual .swiper-container .btnbox .txt.txt_l { font-size:20px; }
    .visual .swiper-container .btnbox .txt.bar { width:40px; }
}
@media screen and (max-width:640px){
    .visual .swiper-slide .inner { width:70%; }
    .visual .swiper-slide .pc { display:none }
    .visual .swiper-slide .mobile { display:block }
    .visual .swiper-slide .visual_txt .vs_title { font-size:30px; }
    .visual .swiper-slide .visual_txt .txt { font-size:15px; }
    .visual .swiper-container .btnbox .txt { font-size:16px; width:38px; }
    .visual .swiper-container .btnbox .txt.txt_l { font-size:17px; }
    .visual .swiper-container .btnbox .txt.bar { width:38px; }
}

#main { overflow:hidden; }
/* title */
#main h3.title { font-family:'Orbitron', sans-serif; color:#0e0e0e; font-size:80px; font-weight:600; line-height:1.2; }
#main h3.title > span { font-weight:600; font-family:'Orbitron', sans-serif; }
@media screen and (max-width:1540px){
    #main h3.title { font-size:70px; }
}
@media screen and (max-width:1400px){
    #main h3.title { font-size:55px; }
}
@media screen and (max-width:1024px){
    #main h3.title { font-size:40px; }
}
@media screen and (max-width:640px){
    #main h3.title { font-size:22px; }
}


/* animation 
#main h3.title { overflow:hidden; }
#main h3.title span { opacity:0; }
#main .subOn h3.title span { animation:txtUp 0.8s 0.2s; animation-fill-mode:both; }
*/


#main .service-motion { position:relative; overflow:hidden; width:100%; height:100vh; }
#main .service-motion #cover { background:url(/img/main/motion_bg.jpg) no-repeat center / cover; clip-path:circle(17% at 50% 50%); width:100%; height:100%; }
#main .service-motion .motion-box { position:absolute; left:0; top:0; z-index:9; text-align:center; width:100%; height:100%; display:flex; align-items: center; justify-content:center; }
#main .service-motion .motion-box .m-txtbox { }
#main .service-motion .motion-box .m-txtbox .txt { text-transform:uppercase; color:#000; font-size:80px; font-weight:600; margin:50px 0 }
#main .service-motion .motion-box .m-txtbox .txt1 { transform:translateX(40px);}
#main .service-motion .motion-box .m-txtbox .txt2 { transform:translateX(-250px);}
#main .service-motion .motion-box .m-txtbox .txt3 { transform:translateX(150px);}
#main .service-motion .motion-box .m-txtbox .txt4 { position:absolute; left:0; top:0; margin-left:460px; color:#333; line-height:1.8; font-weight:300; font-size:17px; width:100%; height:100%; display:flex; align-items: center; justify-content:center; text-align:left;  }
#main .service-motion .motion-box .search-box { position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items: center; justify-content:center; z-index:9; }
#main .service-motion .motion-box .search-box .top-txt { font-size:80px; font-weight:600; line-height:1.3; color:#fff; text-transform:uppercase; }
#main .service-motion .motion-box .search-box .ip-box { position:relative; margin:0 auto; margin-top:75px; max-width:850px; width:calc(100vw - 40px); padding-right:93px; }
#main .service-motion .motion-box .search-box select { width:100%; height:84px; line-height:84px; padding:0 40px; font-size:17px; color:#383838; font-weight:300; border:none; outline:none; appearance:none; border-radius:10px; background:rgba(255,255,255,0.8) url(/img/main/icon_select_down.png) right center no-repeat; }
#main .service-motion .motion-box .search-box select::-ms-expand { display:none; }
#main .service-motion .motion-box .search-box .btn { display:none; position:absolute; right:0; top:0; width:84px; height:84px; overflow:hidden; text-indent:-9999em; border-radius:10px; background:#004ea2 url(/img/main/search_btn.png) center center no-repeat; }
#main .service-motion .bg { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); clip-path:circle(17% at 50% 50%); width:100%; height:100%;background-color:rgba(0,0,0,0.5); z-index:3}

@media screen and (max-width:1540px){
    #main .service-motion .motion-box .m-txtbox .txt { font-size:70px; margin:45px 0 }
    #main .service-motion .motion-box .m-txtbox .txt4 { margin-left:400px; }
    #main .service-motion .motion-box .search-box .top-txt { font-size:70px; }
} 
@media screen and (max-width:1400px){
    #main .service-motion .motion-box .m-txtbox .txt { font-size:55px; margin:35px 0 }
    #main .service-motion .motion-box .m-txtbox .txt4 { margin-left:350px; font-size:16px; }
    #main .service-motion .motion-box .search-box .top-txt { font-size:55px; }
    #main .service-motion .motion-box .search-box .ip-box { margin-top:50px; padding-right:80px; }
    #main .service-motion .motion-box .search-box select { height:70px; line-height:70px; padding:0 30px; font-size:17px; }
    #main .service-motion .motion-box .search-box .btn { width:70px; height:70px; }
}
@media screen and (max-width:1024px){
    /*
    #main .service-motion #cover,
    #main .service-motion .bg{ clip-path:circle(13% at 50% 50%); }
    */
    #main .service-motion  { background:url(/img/main/motion_bg.jpg) no-repeat center / cover; }
    #main .service-motion #cover { display:none }
    #main .service-motion .bg{ clip-path:circle(200% at 50% 50%); }
    #main .service-motion .motion-box .m-box { width:100%; }
    #main .service-motion .motion-box .m-txtbox { position:relative; z-index:10; }
    #main .service-motion .motion-box .m-txtbox .txt { font-size:40px; margin:26px 0; display:none }
    #main .service-motion .motion-box .m-txtbox .txt1 { transform:translateX(10px);}
    #main .service-motion .motion-box .m-txtbox .txt2 { transform:translateX(-140px);}
    #main .service-motion .motion-box .m-txtbox .txt3 { transform:translateX(80px);}
    #main .service-motion .motion-box .m-txtbox .txt4 { margin-left:0; margin-top:200px; font-size:16px; color:#fff; text-align:center; width:100%; }
    #main .service-motion .motion-box .search-box .top-txt { font-size:40px; }
    #main .service-motion .motion-box .search-box .ip-box { margin-top:45px; padding-right:72px; }
    #main .service-motion .motion-box .search-box select { height:65px; line-height:65px; padding:0 25px; font-size:16px; }
    #main .service-motion .motion-box .search-box .btn { width:65px; height:65px}
    
    /* animation */
    #main .service-motion .motion-box .search-box,
    #main .service-motion .motion-box .m-txtbox .txt4 { opacity:0; }
    #main .service-motion .motion-box.subOn .search-box { animation:ani_3 0.8s 0.4s; animation-fill-mode:both; }
    #main .service-motion .motion-box.subOn .m-txtbox .txt4 { animation:ani_5 1.5s 0.8s; animation-fill-mode:both; }
}
@media screen and (max-width:960px){
    #main .service-motion .motion-box .m-txtbox .txt { font-size:34px; margin:22px 0 }
    #main .service-motion .motion-box .m-txtbox .txt4 { top:0; margin-left:0; margin-top:180px; font-size:15px; text-align:center; }
    #main .service-motion .motion-box .search-box .top-txt { font-size:34px; }
}
@media screen and (max-width:640px){
    #main .service-motion .motion-box .m-txtbox .txt { font-size:26px; margin:18px 0 }
    #main .service-motion .motion-box .m-txtbox .txt1 { transform:translateX(10px);}
    #main .service-motion .motion-box .m-txtbox .txt2 { transform:translateX(-80px);}
    #main .service-motion .motion-box .m-txtbox .txt3 { transform:translateX(55px);}
    #main .service-motion .motion-box .m-txtbox .txt4 { top:0; margin-top:160px; }
    #main .service-motion .motion-box .search-box .top-txt { font-size:26px; }
    #main .service-motion .motion-box .search-box .ip-box { margin-top:35px; padding-right:61px; }
    #main .service-motion .motion-box .search-box select { height:55px; line-height:55px; padding:0 20px; }
    #main .service-motion .motion-box .search-box .btn { width:55px; height:55px}
}



/* service */
#main .service {background-color:#fff}
#main .service .pin-up { position:relative; height:100vh; }
#main .service .content-wrap { position:relative; height:100vh;}
#main .service .content { position:absolute; left:0; top:0; width:100%; height:100%; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; background-color:#fff }
#main .service .content.content-0.up,
#main .service .content.content-2.down{ z-index:3; }
#main .service .content.active{ z-index:5; opacity:1; }
#main .service .content > div { width:50%; height:100%;}
#main .service .content .imgbox { position:relative; }
#main .service .content .imgbox img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover;}
#main .service .content .txtbox { position:relative; padding:85px 0 0 80px; }
#main .service .content .txtbox .txt { color:#0e0e0e; font-weight:600; font-size:55px; line-height:1.2; /* text-transform:uppercase; */ }
#main .service .content .txtbox .link { margin-top:50px; }
#main .service .content .txtbox .link a { padding-right:34px; color:#666; font-weight:600; font-size:23px; background:url(/img/common/ft_menu_arr2.png) right center no-repeat; }
#main .service .content .txtbox .icon { position:absolute; left:0; bottom:120px; width:100%; display:flex; align-items:center; justify-content:center; }
#main .service .content .txtbox .b-box { position:absolute; left:0; bottom:0; width:100%; padding:0 80px; }
#main .service .content .txtbox .b-box a { display:flex; align-items:center; justify-content:center; border:1px solid #ddd; border-width:1px 0; height:76px; }
@media screen and (max-width:1540px){
    #main .service .content .txtbox { padding:70px 0 0 70px; }
    #main .service .content .txtbox .link { margin-top:40px; }
    #main .service .content .txtbox .link a { padding-right:34px; font-size:22px; }
    #main .service .content .txtbox .txt { font-size:50px; }
    #main .service .content .txtbox .b-box { padding:0 60px; }
    #main .service .content .txtbox .b-box a { height:72px; }
    #main .service .content.content-0 .txtbox .icon img { width:310px; }
    #main .service .content.content-1 .txtbox .icon img,
    #main .service .content.content-2 .txtbox .icon img { width:370px; }
}
@media screen and (max-width:1400px){
    #main .service .content .txtbox { padding:60px 0 0 60px; }
    #main .service .content .txtbox .link { margin-top:35px; }
    #main .service .content .txtbox .link a { padding-right:32px; font-size:20px; }
    #main .service .content .txtbox .txt { font-size:40px; }
    #main .service .content .txtbox .b-box { padding:0 50px; }
    #main .service .content .txtbox .b-box a { height:60px; }
    #main .service .content.content-0 .txtbox .icon img { width:280px; }
    #main .service .content.content-1 .txtbox .icon img,
    #main .service .content.content-2 .txtbox .icon img { width:360px; }
}
@media screen and (max-width:1024px){
    #main .service .pin-up,
    #main .service .content-wrap { position:relative; height:auto; }
    #main .service .content { position:relative; height:100vh; }
    #main .service .content .txtbox { padding:50px 0 0 50px; }
    #main .service .content .txtbox .link { margin-top:30px; }
    #main .service .content .txtbox .link a { padding-right:30px; font-size:18px; }
    #main .service .content .txtbox .txt { font-size:28px; }
    #main .service .content .txtbox .b-box { padding:0 40px; }
    #main .service .content .txtbox .b-box a { height:50px; }
    #main .service .content.content-0 .txtbox .icon img { width:240px; }
    #main .service .content.content-1 .txtbox .icon img,
    #main .service .content.content-2 .txtbox .icon img { width:310px; }
}
@media screen and (max-width:960px){
    #main .service .content > div { width:100%; height:50%; }
    #main .service .content.content-0 .txtbox .icon img { width:200px; }
    #main .service .content.content-1 .txtbox .icon img,
    #main .service .content.content-2 .txtbox .icon img { width:240px; }
    #main .service .content .txtbox .icon { left:40%; top:0; bottom:0; height:calc(100% - 50px); width:60%; }
}
@media screen and (max-width:640px){
    #main .service .content .txtbox { padding:20px 0 0 20px; }
    #main .service .content.content-0 .txtbox .icon img { width:140px; }
    #main .service .content.content-1 .txtbox .icon img,
    #main .service .content.content-2 .txtbox .icon img { width:180px; }
    #main .service .content .txtbox .link { margin-top:20px; }
    #main .service .content .txtbox .link a { padding-right:30px; font-size:18px; }
    #main .service .content .txtbox .txt { font-size:20px; }
    #main .service .content .txtbox .b-box { padding:0 20px; }
}


/* animation */
#main .service .content .imgbox { position:relative; overflow:hidden; }
#main .service .content .imgbox img { transition:all 0.3s ease-in-out; }
#main .service .content.active .imgbox img { animation:bgs1 0.8s 0.3s; animation-fill-mode:both; }
#main .service .content .imgbox:before { content:""; display:block; height:100%; background:#fff; position:absolute; left:0; top:0; z-index:1 }
#main .service .content.active .imgbox:before { animation:ani_w 0.8s 0.3s; animation-fill-mode:both;}
#main .service .content .txtbox .icon img { opacity:0; }
#main .service .content.active .txtbox .icon img,
#main .service .content.content-0.up .txtbox .icon img,
#main .service .content.content-2.down .txtbox .icon img { animation:bgs3 0.8s 0.3s; animation-fill-mode:both; }
#main .service .content .txtbox .link { opacity:0; }
#main .service .content.active .txtbox .link ,
#main .service .content.content-0.up .txtbox .link,
#main .service .content.content-2.down .txtbox .link { animation:ani_1 0.5s 0.5s; animation-fill-mode:both; }
@media screen and (max-width:1024px){
    #main .service .content.subOn{ opacity:1; }
    #main .service .content.subOn .imgbox img { animation:bgs1 0.8s 0.3s; animation-fill-mode:both; }
    #main .service .content.subOn .imgbox:before {animation:ani_w 0.8s 0.3s; animation-fill-mode:both;}
    #main .service .content .txtbox .icon img { opacity:0; }
    #main .service .content.subOn .txtbox .icon img  { animation:bgs3 0.8s 0.3s; animation-fill-mode:both; }
    #main .service .content .txtbox .txt { opacity:0; }
    #main .service .content.subOn .txtbox .txt { animation:ani_2 0.8s 0.5s; animation-fill-mode:both; }
    #main .service .content .txtbox .link { opacity:0; }
    #main .service .content.subOn .txtbox .link { animation:ani_2 0.8s 0.8s; animation-fill-mode:both; }
}

/* about */
#main .about {margin-top:175px; }
#main .about .title { text-transform:uppercase; padding:0 75px; }
#main .about .title .tit { display:flex; white-space:nowrap; overflow:hidden }
#main .about .title .tit2 { justify-content:flex-end; margin-top:55px; }
#main .about .title .tit svg { font-weight:600; vertical-align:middle; overflow:hidden; height:100px; }
#main .about .title .tit svg.svg-1 { color:#0e0e0e; }
#main .about .title .tit svg.svg-1 text { fill:#0e0e0e; stroke:none; stroke-width:0; stroke-dasharray:0; stroke-dashoffset:0; font-weight:600; }
#main .about .title .tit svg.svg-2 { color:#fff;  }
#main .about .title .tit svg.svg-2 text { fill:none; stroke:#0e0e0e; stroke-width:1px; stroke-dasharray:0; stroke-dashoffset:0; font-weight:600; }
#main .about .title .tit svg.svg-t1 { width:685px; margin-right:2%; }
#main .about .title .tit svg.svg-t2 { width:527px; }
#main .about .listbox { margin:155px 0 200px; }
#main .about .listbox ul { display:flex; flex-wrap:wrap; margin-right:1px; }
#main .about .listbox li { width:25%; position:relative; margin:0 0 0 -1px; }
#main .about .listbox li:before {content:""; display:block; padding-bottom:100%; }
#main .about .listbox li a { transition:all 0.3s ease-in-out; position:absolute; left:0; top:0; width:100%; height:100%; display:flex; border:1px solid #d9d9d9; border-radius:20px; text-align:center; justify-content:center; align-items:center; }
#main .about .listbox li:hover a { transform:translateY(-80px); border:none; background-color:#004ea2; }
#main .about .listbox li .icon { display:block; width:180px; margin:0 auto; }
#main .about .listbox li .txt { display:block; margin-top:55px; color:#999; font-size:14px; font-weight:500; line-height:1.4; transition:all 0.3s ease-in-out; }
#main .about .listbox li .txt strong { display:block; color:#111; font-size:22px; font-weight:600; transition:all 0.3s ease-in-out; }
#main .about .listbox li .txt span { text-transform:uppercase; }
#main .about .listbox li .more { transition:all 0.3s ease-in-out; opacity:0; position:absolute; bottom:50px; left:50%; transform:translateX(-50%); color:#004ea2; font-weight:500; font-size:16px; padding-right:21px; background:url(/img/common/ft_menu_arr1.png) right center no-repeat; }
#main .about .listbox li .com-1 { transition:all 0.3s ease-in-out; }
#main .about .listbox li:hover .txt,
#main .about .listbox li:hover .txt strong { color:#fff; }
#main .about .listbox li:hover .com-1{fill:#fff;}
#main .about .listbox li:hover .more { opacity:1; bottom:-70px; }
@media screen and (max-width:1540px){
    #main .about {margin-top:150px; }
    #main .about .title { padding:0 50px; }
    #main .about .title .tit2 { margin-top:45px; }
    #main .about .title .tit svg { height:88px; }
    #main .about .title .tit svg.svg-t1 { width:600px; }
    #main .about .title .tit svg.svg-t2 { width:460px; }
    #main .about .listbox { margin:130px 0 180px; }
    #main .about .listbox li .icon { width:160px; }
    #main .about .listbox li .txt { margin-top:50px; font-size:14px; }
    #main .about .listbox li .txt strong { font-size:20px; }
    #main .about .listbox li .more {  bottom:50px; font-size:16px; padding-right:21px; }
    #main .about .listbox li:hover .more { bottom:-70px; }
}
@media screen and (max-width:1400px){
    #main .about .title .tit svg { height:70px; }
    #main .about .title .tit svg.svg-t1 { width:471px; }
    #main .about .title .tit svg.svg-t2 { width:361px; }
}
@media screen and (max-width:1280px){
    #main .about {margin-top:130px; }
    #main .about .title { padding:0 30px; }
    #main .about .title .tit2 { margin-top:35px; }
    #main .about .listbox { margin:100px 0 140px; }
    #main .about .listbox li .icon { width:120px; }
    #main .about .listbox li .txt { margin-top:20px; font-size:14px; }
    #main .about .listbox li .txt strong { font-size:18px; }
    #main .about .listbox li .more { bottom:40px; font-size:16px; padding-right:21px; }
    #main .about .listbox li:hover .more { bottom:-60px; }
}
@media screen and (max-width:1024px){
    #main .about {margin-top:130px; }
    #main .about .title { padding:0 5px; }
    #main .about .title .tit2 { margin-top:15px; }
    #main .about .title .tit svg { height:50px; }
    #main .about .title .tit svg.svg-t1 { width:341px; }
    #main .about .title .tit svg.svg-t2 { width:261px; }
    #main .about .listbox { margin:100px auto 140px; max-width:580px; }
    #main .about .listbox ul { gap:10px; }
    #main .about .listbox li { width:calc(50% - 10px); margin:0; }
    #main .about .listbox li .more { bottom:30px; }
    #main .about .listbox li a { border-radius:15px; }
    #main .about .listbox li:hover a { transform:translateY(-60px); }
    #main .about .listbox li:hover .more { bottom:-40px; }
}
@media screen and (max-width:640px){
    #main .about {margin-top:100px; }
    #main .about .title .tit { text-align:center; justify-content:center; }
    #main .about .title .tit2 { display:none; }
    #main .about .title .tit svg { height:27px; }
    #main .about .title .tit svg.svg-t1 { width:186px; }
    #main .about .title .tit svg.svg-t2 { width:142px; }
    #main .about .listbox { margin:60px auto 100px; }
    #main .about .listbox li .txt { margin-top:10px; }
    #main .about .listbox li .icon { width:100px; }
}
@media screen and (max-width:480px){
    #main .about {margin-top:80px; }
    #main .about .listbox li .txt { margin-top:5px; }
    #main .about .listbox li .icon { width:80px; }
}

/* animation */
#main .about .title .tit { opacity:0; }
#main .about .title.subOn .tit { animation:ani_1 0.5s 0.5s; animation-fill-mode:both; }
#main .about .title.subOn .tit2 { animation:ani_2 0.5s 0.5s; animation-fill-mode:both; }
#main .about .listbox li { opacity:0; }
#main .about .listbox.subOn li:nth-child(1) { animation:ani_3 0.5s 0.2s; animation-fill-mode:both; }
#main .about .listbox.subOn li:nth-child(2) { animation:ani_3 0.5s 0.4s; animation-fill-mode:both; }
#main .about .listbox.subOn li:nth-child(3) { animation:ani_3 0.5s 0.6s; animation-fill-mode:both; }
#main .about .listbox.subOn li:nth-child(4) { animation:ani_3 0.5s 0.8s; animation-fill-mode:both; }


/* newsroom */
#main .newsroom { padding-top:195px; background-color:#f6f6f6; }
#main .newsroom h3.title { text-transform:uppercase; }
#main .newsroom .listbox { position:relative; margin-top:100px; }
#main .newsroom .listbox ul { display:flex; flex-wrap:wrap; gap:0 47px; }
#main .newsroom .listbox li { width:calc((100% - 141px) / 4);}
#main .newsroom .listbox li .imgbox { position:relative; overflow:hidden; display:block; }
#main .newsroom .listbox li .imgbox:before {content:""; display:block; padding-bottom:70.5%; }
#main .newsroom .listbox li .imgbox:after { content:''; display:block; position:absolute; top:0; left:-75%; z-index:2; width:50%; height:100%; background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%); transform:skewX(-30deg); }
#main .newsroom .listbox li:hover .imgbox:after { animation:shine .75s; }
#main .newsroom .listbox li .imgbox img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
#main .newsroom .listbox li dl { padding:32px 9px 0; }
#main .newsroom .listbox li dt { font-size:22px; font-weight:700; color:#0e0e0e; line-height:1.2; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;  }
#main .newsroom .listbox li dd { margin-top:25px; font-size:17px; font-weight:300; color:#777; line-height:1.7; max-height:50px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
#main .newsroom .listbox li .date { margin-top:40px; padding-left:9px; display:block; font-size:14px; font-weight:300; color:#777; font-family:'Red Hat Display', sans-serif; }
#main .newsroom .listbox .more { position:absolute; right:0; top:-125px; } 
#main .newsroom .listbox .more a { color:#004ea2; font-weight:600; font-size:20px; padding-right:23px; background:url(/img/common/ft_menu_arr1.png) right center no-repeat; }
@media screen and (max-width:1540px){
    #main .newsroom { padding-top:170px; }
    #main .newsroom .listbox { margin-top:80px; }
    #main .newsroom .listbox ul { gap:0 40px; }
    #main .newsroom .listbox li { width:calc((100% - 120px) / 4);}
    #main .newsroom .listbox li dl { padding:32px 9px 0; }
    #main .newsroom .listbox li dt { font-size:22px; }
    #main .newsroom .listbox li dd { margin-top:25px; font-size:17px; }
    #main .newsroom .listbox li .date { margin-top:40px; padding-left:9px; font-size:14px; }
    #main .newsroom .listbox .more { top:-115px; } 
    #main .newsroom .listbox .more a { font-size:20px; padding-right:23px; }
}
@media screen and (max-width:1280px){
    #main .newsroom { padding-top:150px; }
    #main .newsroom .listbox { margin-top:80px; }
    #main .newsroom .listbox ul { gap:0 30px; }
    #main .newsroom .listbox li { width:calc((100% - 90px) / 4);}
    #main .newsroom .listbox li dl { padding:25px 5px 0; }
    #main .newsroom .listbox li dt { font-size:20px; }
    #main .newsroom .listbox li dd { margin-top:20px; font-size:16px; }
    #main .newsroom .listbox li .date { margin-top:35px; padding-left:5px; font-size:14px; }
    #main .newsroom .listbox .more { top:-100px; } 
    #main .newsroom .listbox .more a { font-size:18px; padding-right:22px; }
}
@media screen and (max-width:1024px){
    #main .newsroom { padding-top:100px; }
    #main .newsroom .listbox { margin-top:60px; }
    #main .newsroom .listbox ul { gap:40px 20px; }
    #main .newsroom .listbox li { width:calc((100% - 60px) / 4);}
    #main .newsroom .listbox li dl { padding:18px 0 0; }
    #main .newsroom .listbox li dt { font-size:20px; }
    #main .newsroom .listbox li dd { margin-top:15px; font-size:16px; }
    #main .newsroom .listbox li .date { margin-top:20px; padding-left:0; font-size:14px; }
    #main .newsroom .listbox .more { top:-80px; } 
    #main .newsroom .listbox .more a { font-size:16px; padding-right:22px; }
}
@media screen and (max-width:960px){
    #main .newsroom .listbox li { width:calc((100% - 20px) / 2);}
}
@media screen and (max-width:640px){
    #main .newsroom { padding-top:80px; }
}

/* animation */
#main .newsroom h3.title,
#main .newsroom .listbox { opacity:0; }
#main .newsroom.subOn h3.title{ animation:ani_1 0.5s 0.5s; animation-fill-mode:both; }
#main .newsroom .listbox .more { opacity:0; }
#main .newsroom.subOn .listbox .more { animation:ani_1 0.5s 0.8s; animation-fill-mode:both; }
#main .newsroom.subOn .listbox { animation:ani_4 0.5s 0.8s; animation-fill-mode:both; }

/* customer */
#main .main_cs { padding-top:180px; background-color:#f6f6f6; }
#main .main_cs dl { display:flex; align-items:center; justify-content:space-between; height:510px; border-radius:20px; background-color:#004ea2;}
#main .main_cs dt { padding-left:120px; text-transform:uppercase;}
#main .main_cs dt h3.title { color:#fff; }
#main .main_cs dd { padding-right:20px; }
#main .main_cs dd ul { display:flex; align-items:center;text-align:center; }
#main .main_cs dd ul li { width:220px; padding:45px 0 35px; }
#main .main_cs dd ul li:not(:last-child) { border-right:1px solid rgba(255,255,255,0.1);}
#main .main_cs dd ul li .icon { display:block; }
#main .main_cs dd ul li .txt { display:block; margin-top:45px; font-size:18px; font-weight:500; color:#fff; }
@media screen and (max-width:1540px){
    #main .main_cs { padding-top:180px; }
    #main .main_cs dl { border-radius:20px; }
    #main .main_cs dt { padding-left:100px; }
    #main .main_cs dd { padding-right:20px; }
    #main .main_cs dd ul li { width:180px; padding:45px 0 35px; }
    #main .main_cs dd ul li .txt { margin-top:35px; font-size:18px; }
}
@media screen and (max-width:1400px){
    #main .main_cs dt { padding-left:50px; }
    #main .main_cs dd ul li { width:180px; padding:40px 0 30px; }
    #main .main_cs dd ul li .txt { margin-top:30px; font-size:17px; }
}
@media screen and (max-width:1280px){
    #main .main_cs dd ul li { width:140px; }
}
@media screen and (max-width:1024px){
    #main .main_cs { padding-top:100px; }
    #main .main_cs dl { flex-wrap:wrap; height:auto; padding:30px 0; }
    #main .main_cs dt { padding-left:0; text-align:center; width:100%; }
    #main .main_cs dd { text-align:center; width:100%; padding-right:0; }
    #main .main_cs dd ul { justify-content:center; margin-top:30px; }
    #main .main_cs dd ul li { width:220px; padding:30px 0 25px; }
    #main .main_cs dd ul li:nth-child(1) .icon img { width:70px; }
    #main .main_cs dd ul li:nth-child(2) .icon img { width:78px; }
    #main .main_cs dd ul li:nth-child(3) .icon img { width:86px; }
    #main .main_cs dd ul li:nth-child(4) .icon img { width:70px; }
    #main .main_cs dd ul li .txt { margin-top:30px; font-size:16px; }
}
@media screen and (max-width:640px){
    #main .main_cs { padding-top:80px; }
    #main .main_cs dl { padding:30px 0; }
    #main .main_cs dd ul { margin-top:25px; }
    #main .main_cs dd ul li { width:200px; padding:25px 35px; margin-top:-8px; }
    #main .main_cs dd ul li .icon { min-height:55px;}
    #main .main_cs dd ul li:nth-child(1) .icon img { width:55px; }
    #main .main_cs dd ul li:nth-child(2) .icon img { width:58px; }
    #main .main_cs dd ul li:nth-child(3) .icon img { width:68px; }
    #main .main_cs dd ul li:nth-child(4) .icon img { width:55px; }
    #main .main_cs dd ul li .txt { margin-top:25px; font-size:15px; }
}
@media screen and (max-width:540px){
    #main .main_cs dd ul { flex-wrap:wrap; padding:10px 20px 0; }
    #main .main_cs dd ul li { width:50%; }
    #main .main_cs dd ul li:nth-child(2) { border-right:none }
    #main .main_cs dd ul li:nth-child(3),
    #main .main_cs dd ul li:nth-child(4) { border-top:1px solid rgba(255,255,255,0.1); }
}


/* animation */
#main .main_cs dt h3.title { opacity:0; }
#main .main_cs.subOn dt h3.title { animation:ani_1 0.5s 0.5s; animation-fill-mode:both; }
#main .main_cs dd ul li { opacity:0; }
#main .main_cs.subOn dd ul li:nth-child(1) { animation:ani_2 0.5s 0.2s; animation-fill-mode:both; }
#main .main_cs.subOn dd ul li:nth-child(2) { animation:ani_2 0.5s 0.4s; animation-fill-mode:both; }
#main .main_cs.subOn dd ul li:nth-child(3) { animation:ani_2 0.5s 0.6s; animation-fill-mode:both; }
#main .main_cs.subOn dd ul li:nth-child(4) { animation:ani_2 0.5s 0.8s; animation-fill-mode:both; }