@charset "utf-8";

#main { overflow:hidden; }

.visual { position:relative; width:100%; height:100vh; z-index:2; overflow:hidden; }
#visual-box { position:relative; width:100%; height:100%; }
.visual .swiper-container { position:relative; width:100%; height:100%; background-color:#0f0f0f }
.visual .swiper-slide { position:relative; width:100% !important; height:100vh; overflow:hidden; display:flex; transition:all 0.3s ease-in-out; z-index:-1; opacity:0; }
.visual .swiper-slide .video-box { transform:scale(1.15); position:relative; width:100%; display:none }
.visual .swiper-slide .video-box video { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover;  }
.visual .swiper-slide .bg { position:absolute; width:100%; height:100%; left:0; top:0; background-color:#0f0f0f; background-position:center center; background-repeat:no-repeat; background-size:cover  !important; }
.visual .swiper-slide .visual_txt { position:absolute; top:35%; left:160px; z-index:100; }
.visual .swiper-slide .visual_txt .vs_title { opacity:0; color:#fff; font-size:85px; overflow:hidden; margin-bottom:0.4%; }
.visual .swiper-slide .visual_txt .vs_title span { display:block; line-height:1.2; font-weight:700; text-transform:uppercase; }
.visual .swiper-slide .visual_txt .txt_b { color:#fff; }
.visual .swiper-slide .visual_txt .txt_b > span > span { display:inline-block; min-width:30px; }
.visual .swiper-slide .visual_txt .txt { opacity:0; color:rgba(255,255,255,1); font-size:23px; overflow:hidden; margin-top:6%;}
.visual .swiper-slide .visual_txt .txt span { display:block; line-height:1.6; font-weight:400; }
.visual .swiper-slide.swiper-slide-active { opacity:1; z-index:2; }
.visual .swiper-slide.swiper-slide-active .video-box { display:block}
.visual .swiper-slide.swiper-slide-active .visual_txt .vs_title { opacity:1; }
.visual .swiper-slide.swiper-slide-active .visual_txt .txt_l span { animation:txtLeft 1.2s 0.3s; animation-fill-mode:both; }
.visual .swiper-slide.swiper-slide-active .visual_txt .txt_b > span > span{ animation:blur_txt 1.0s 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-container .btnbox { position:absolute; bottom:140px; left:160px; z-index:9; text-align:center; }
.visual .swiper-container .btnbox .box { position:relative; padding:0 23px; width:145px; }
.visual .swiper-container .btnbox .swiper-pagination { width:93px; }
.visual .swiper-container .btnbox .txt { position:absolute; top:-6px; font-size:13px;font-weight:400; color:#fff; }
.visual .swiper-container .btnbox .txt.txt_l { left:0; }
.visual .swiper-container .btnbox .txt.txt_r { right:0; }
.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-progressbar { background:rgba(255,255,255,0.3) !important; height:1px !important; }
.visual .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background:#fff !important; }
.visual .swiper-container .btnbox .playstop {  display:none; }
.swiper-button-next:after, 
.swiper-button-prev:after { display:none; }

@media screen and (max-width:1540px){
  .visual .swiper-slide .visual_txt,
  .visual .control_box { left:100px; width:calc(100% - 200px)}
  .visual .swiper-slide .visual_txt .vs_title { font-size:75px;  }
  .visual .swiper-slide .visual_txt .txt { font-size:18px; }
  .visual .swiper-container .btnbox { left:100px; }
  .visual .swiper-slide .video-box { transform:scale(1.3); }
}
@media screen and (max-width:1280px){
  .visual .swiper-slide .bg { }
  .visual .swiper-slide .visual_txt .vs_title { font-size:65px;  }
  .visual .swiper-slide .visual_txt .txt { font-size:18px; }
  .visual .swiper-slide .visual_txt .txt_b > span > span { min-width:20px; }
}
@media screen and (max-width:1024px){
  .visual,
  .visual .swiper-slide { height:80vh; }
  .visual .swiper-slide .visual_txt,
  .visual .control_box { left:80px; width:calc(100% - 160px)}
  .visual .swiper-slide .visual_txt .vs_title { font-size:45px;  }
  .visual .swiper-slide .visual_txt .txt { font-size:17px; }
  .visual .swiper-slide .visual_txt .txt_b > span > span { min-width:18px; }
  .visual .swiper-container .btnbox { left:80px; }
}
@media screen and (max-width:760px){
  .visual .swiper-slide .visual_txt,
  .visual .control_box { left:40px; width:calc(100% - 80px)}
  .visual .swiper-slide .visual_txt .vs_title { font-size:30px;  }
  .visual .swiper-slide .visual_txt .txt { font-size:16px; }
  .visual .swiper-slide .visual_txt .txt_b > span > span { min-width:12px; }
  .visual .swiper-container .btnbox { left:40px; }
}
@media screen and (max-width:640px){
  .visual,
  .visual .swiper-slide { height:60vh; }
  .visual .swiper-container .btnbox { bottom:80px;  }
}
@media screen and (max-width:500px){
  .visual .swiper-slide .visual_txt .txt br { display:none }
  .visual .swiper-slide .visual_txt > div { display:inline-block; }
  .visual .swiper-slide .visual_txt .txt_b > span > span { min-width:8px; }
}


#main .titlebox h3 { color:#111; font-size:90px; font-weight:700; line-height:1.3; }
#main .titlebox h3 span { font-weight:700; }
#main .titlebox p { color:#333; font-size:17px; font-weight:300; letter-spacing:-0.01em; line-height:1.7; }
@media screen and (max-width:1600px){
  #main .titlebox h3 { font-size:80px; }
  #main .titlebox p { font-size:17px; }
}
@media screen and (max-width:1400px){
  #main .titlebox h3 { font-size:60px; }
  #main .titlebox p { font-size:17px; }
}
@media screen and (max-width:1024px){
  #main .titlebox h3 { font-size:45px; }
  #main .titlebox p { font-size:16px; }
}
@media screen and (max-width:640px){
  #main .titlebox h3 { font-size:32px; }
  #main .titlebox p { font-size:15px; }
}
/* animation */
#main .titlebox h3 { overflow:hidden }
#main .titlebox h3 span { opacity:0; display:block }
#main .titlebox p{ opacity:0; }
#main .titlebox.subOn h3 span:nth-child(1) { animation:ani_2 0.8s 0.3s; animation-fill-mode:both; }
#main .titlebox.subOn h3 span:nth-child(2) { animation:ani_2 0.8s 0.5s; animation-fill-mode:both; }
#main .titlebox.subOn h3 span:nth-child(3) { animation:ani_2 0.8s 0.7s; animation-fill-mode:both; }
#main .titlebox.subOn p { animation:ani_2 0.5s 0.6s; animation-fill-mode:both; }

#main .products { padding:200px 0; }
#main .products .titlebox p { margin-top:55px; }
#main .products .titlebox .info { margin-top:65px; }
#main .products .titlebox .info ul { display:flex; }
#main .products .titlebox .info li:not(:last-child) { margin-right:44px; }
#main .products .titlebox .info li,
#main .products .titlebox .info li a { color:#111; font-size:18px; font-weight:500; }
#main .products .titlebox .info li img { vertical-align:middle; margin:-5px 0 0 8px; }
#main .pdList { position:relative; width:100%; }
#main .pdList .nav { position:absolute; right:0; top:-300px; text-align:right; height:220px; overflow:hidden; }
#main .pdList .nav .slick-slide { margin:15px 0; transition:all 0.3s ease-in-out; }
#main .pdList .nav li a { color:#cdcdcd; font-size:17px; font-weight:300; }
#main .pdList .nav .slick-current li a { position:relative; color:#111; font-size:23px; font-weight:700; padding-right:20px; }
#main .pdList .nav .slick-current li a:after { content:"\e914"; display:block; font-family:xeicon; color:#111; font-size:19px; position:absolute; right:0; top:50%; transform:translateY(calc(-50% - 0.5px));}
#main .pdList .nav .slick-current { margin:12px 0; }
#main .pdList .nav .slick-list { padding:35px 0 !important; }
#main .pdList .imgbox { position:relative; }
#main .pdList .imgbox .txt_bak { position:absolute; left:0; top:30%; width:100%; text-align:center; text-transform:uppercase; font-size:calc(130 / 1920 * 100vw); color:#f3f3f3; font-weight:700; }
#main .pdList .imgbox .slider { /* mix-blend-mode:multiply;*/ }
#main .pdList .btn_pn { position:absolute; top:50%; border:none; outline:none; background:none; transform:translateY(calc(-50% - 0.5px));}
#main .pdList .btn_prev { left:-30px; }
#main .pdList .btn_next { right:-30px; }
#main .pdList .btn_pn span { position:relative; height:145px; width:145px; display:flex; justify-content:center; align-items:center;}
#main .pdList .btn_pn span:after { content:""; display:block;  width:100%; height:100%; border:1px solid #d7d7d7; border-radius:200px; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
#main .pdList .txt-chart { display:block; width:165px; height:165px; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:8; box-sizing:border-box; }
#main .pdList .txt-chart .circle { stroke:#111; fill:none; stroke-width:0.2; stroke-dasharray:100; stroke-dashoffset:100; transition:all 0.3s ease-in-out; }
#main .pdList .btn_pn:hover .txt-chart .circle {  stroke-dashoffset:0; }
@media screen and (max-width:1800px){
  #main .pdList .nav { right:70px; }
}
@media screen and (max-width:1700px){
  #main .pdList .nav { right:100px; }
  #main .pdList .btn_prev { left:10px; }
  #main .pdList .btn_next { right:95px; }
}
@media screen and (max-width:1500px){
  #main .pdList .imgbox .slider .slick-slide img { max-width:100%; }
  #main .pdList .btn_pn span { height:120px; width:120px; }
  #main .pdList .txt-chart { width:138px; height:138px; }
  #main .pdList .btn_pn img { width:55px; }
}
@media screen and (max-width:1400px){
  #main .products .titlebox p  { margin-top:20px; }
  #main .products .titlebox .info { margin-top:40px; }
  #main .pdList .nav { top:-270px; }
}
@media screen and (max-width:1280px){
  #main .pdList .btn_pn span { height:100px; width:100px; }
  #main .pdList .txt-chart { width:116px; height:116px; }
  #main .pdList .btn_pn img { width:45px; }
}
@media screen and (max-width:1024px){
  #main .products { padding:150px 0; }
  #main .products .titlebox p  { margin-top:10px; }
  #main .products .titlebox p br { display:none }
  #main .products .titlebox .info { margin-top:30px; }
  #main .products .titlebox .info li a { font-size:16px; }
  #main .pdList .nav { position:relative; right:unset; top:unset; text-align:left; height:160px; }
  #main .pdList .nav li a { font-size:16px; }
  #main .pdList .nav .slick-current li a { font-size:20px; }
  #main .pdList .btn_next { right:10px; }
  #main .pdList .btn_pn span { height:80px; width:80px; }
  #main .pdList .txt-chart { width:92px; height:92px; }
  #main .pdList .btn_pn img { width:40px; }
}
@media screen and (max-width:640px){
  #main .products { padding:100px 0; }
  #main .pdList .nav li a { font-size:14px; }
  #main .pdList .nav .slick-current li a { font-size:14px; }
  #main .pdList .btn_pn span { height:50px; width:50px; }
  #main .pdList .txt-chart { width:58px; height:58px; }
  #main .pdList .btn_pn img { width:28px; }
  #main .pdList .btn_prev { left:-10px; margin-top:40px; }
  #main .pdList .btn_next { right:-10px; margin-top:40px; }
}

#main .overview { padding:200px 0; background-color:#121212; overflow:hidden; }
#main .overview .titlebox h3 { color:#fff; text-align:center; font-weight:600; }
#main .overview .titlebox h3 span { display:block; font-weight:600; }
#main .overview .titlebox h3 span strong { font-weight:600; display:inline-block }
#main .overview .titlebox h3 .tit_1 strong { margin-left:-410px; }
#main .overview .titlebox h3 .tit_2 strong { margin-left:330px; }
#main .overview .titlebox h3 .tit_3 strong { margin-left:-300px; }
#main .overview .titlebox p { display:flex; margin-top:75px; justify-content:flex-end;}
#main .overview .titlebox p span { display:block; max-width:550px; width:100%; color:#fff }
#main .overview .listbox { margin-top:125px; }
#main .overview .listbox ul { display:flex; flex-wrap:wrap; gap:0 80px; }
#main .overview .listbox li { position:relative; width:calc((100% - 240px) / 4); display:flex; height:445px; }
#main .overview .listbox li .txt { position:absolute; left:-126px; top:93px; z-index:3; transform:rotateZ(90deg); width:200px; font-size:13px; font-weight:300; color:#fff; transition:all 0.3s ease; }
#main .overview .listbox li .box { cursor:pointer; position:absolute; left:33px; width:295px; height:100%; background-color:#0b0b0b; transition:all 0.3s ease;  }
#main .overview .listbox li .box h4 { position:absolute; left:36px; top:50px; color:#fff; font-weight:600; font-size:20px; transition:all 0.3s ease; }
#main .overview .listbox li .icon { position:absolute; top:50%; transform:translateY(-50%); }
#main .overview .listbox li .icon img { width:200px; filter:brightness(0) invert(1); transition:all 0.3s ease; animation:main_mo 50s infinite; }
#main .overview .listbox li .btn_more { position:absolute; bottom:44px; right:30px; opacity:0; }
#main .overview .listbox li:nth-child(1) { margin-top:90px; }
#main .overview .listbox li:nth-child(2) { margin-top:225px; }
#main .overview .listbox li:nth-child(4) { margin-top:155px; }
#main .overview .listbox li:nth-child(1) .icon { left:112px; }
#main .overview .listbox li:nth-child(2) .icon { left:175px; }
#main .overview .listbox li:nth-child(3) .icon { left:125px; }
#main .overview .listbox li:nth-child(4) .icon { right:-18px; }
#main .overview .listbox li:nth-child(4) .box { left:unset; right:15px; }
#main .overview .listbox li:hover { z-index:9; }
#main .overview .listbox li:hover .txt { color:#01488a; }
#main .overview .listbox li:hover .box { width:420px; z-index:2; box-shadow: 0 0 10px 5px rgba(1,72,138,0.3); }
#main .overview .listbox li:hover .icon img { filter:brightness(1) invert(0); }
#main .overview .listbox li:hover .btn_more { animation:ani_1 0.5s 0.5s; animation-fill-mode:both; }
#main .overview .listbox li:hover:nth-child(4) .box h4 { position:absolute; left:161px; }
@media screen and (max-width:1640px){
  #main .overview .listbox ul { display:flex; flex-wrap:wrap; gap:0 60px; }
  #main .overview .listbox li { width:calc((100% - 180px) / 4); }
  #main .overview .listbox li:nth-child(1) .icon { left:72px; }
  #main .overview .listbox li:nth-child(2) .icon { left:125px; }
  #main .overview .listbox li:nth-child(3) .icon { left:75px; }
}
@media screen and (max-width:1400px){
  #main .overview .titlebox h3 .tit_1 strong { margin-left:-340px; }
  #main .overview .titlebox h3 .tit_2 strong { margin-left:170px; }
  #main .overview .titlebox h3 .tit_3 strong { margin-left:-240px; }
  #main .overview .titlebox p { margin-top:20px; }
  #main .overview .titlebox p span { max-width:450px; }
}
@media screen and (max-width:1024px){
  #main .overview { padding:150px 0; }
  #main .overview .titlebox h3 .tit_1 strong { margin-left:-260px; }
  #main .overview .titlebox h3 .tit_2 strong { margin-left:150px; }
  #main .overview .titlebox h3 .tit_3 strong { margin-left:-180px; }
  #main .overview .titlebox p { margin-top:10px; }
  #main .overview .titlebox p span { max-width:400px; }
  #main .overview .listbox ul { gap:0 0; }
  #main .overview .listbox li { width:49%; height:370px; }
  #main .overview .listbox li:nth-child(1) { margin-top:0; }
  #main .overview .listbox li:nth-child(2) { margin-top:80px; }
  #main .overview .listbox li:nth-child(4) { margin-top:80px; }
  #main .overview .listbox li:nth-child(4) .icon { left:175px; right:unset;}
  #main .overview .listbox li:nth-child(4) .box { left:33px; right:unset; }
  #main .overview .listbox li:hover:nth-child(4) .box h4 { left:36px; }
}
@media screen and (max-width:760px){
  #main .overview .listbox li { width:48%; height:320px; }
  #main .overview .listbox li .box h4 { left:20px; top:20px; font-size:18px; }
  #main .overview .listbox li:hover:nth-child(4) .box h4 { left:20px; }
  #main .overview .listbox li .box { width:280px }
  #main .overview .listbox li:nth-child(1) .icon,
  #main .overview .listbox li:nth-child(2) .icon,
  #main .overview .listbox li:nth-child(3) .icon,
  #main .overview .listbox li:nth-child(4) .icon { left:50%; transform:translate(-50%, -50%); }
  #main .overview .listbox li:hover .box { width:280px; }
  #main .overview .listbox li .icon img { width:180px; }
  #main .overview .listbox li .btn_more { animation:ani_1 0.5s 0.5s; animation-fill-mode:both; }
}
@media screen and (max-width:640px){
  #main .overview { padding:100px 0; }
  #main .overview .titlebox h3 .tit_1 strong { margin-left:-220px; }
  #main .overview .titlebox h3 .tit_2 strong { margin-left:60px; }
  #main .overview .titlebox h3 .tit_3 strong { margin-left:-80px; }
  #main .overview .titlebox p span { max-width:360px; }
  #main .overview .listbox li { width:100%; height:300px; }
  #main .overview .listbox li .box h4 { left:15px; top:15px; font-size:15px; }
  #main .overview .listbox li:hover:nth-child(4) .box h4 { left:15px; }
  #main .overview .listbox li:nth-child(2),
  #main .overview .listbox li:nth-child(3),
  #main .overview .listbox li:nth-child(4) { margin-top:40px; }
  #main .overview .listbox li .icon img { width:150px; margin:0 auto; }
  #main .overview .listbox li .box,
  #main .overview .listbox li:hover .box { width:calc(100% - 33px); }
}

/* animation */
#main .overview .listbox li { opacity:0; }
#main .overview .listbox.subOn li { animation:ani_2 0.8s 0.5s; animation-fill-mode:both; }
#main .overview .titlebox.subOn p { animation:ani_2 0.5s 1.0s; animation-fill-mode:both; }

#main .esg { padding:200px 0; }
#main .esg .inner1600 { display:flex; justify-content:space-between; flex-wrap:wrap; padding-right:70px; }
#main .esg .titlebox h3{  font-weight:600; line-height:1.2; }
#main .esg .titlebox h3 span { display:block; font-weight:600;} 
#main .esg .titlebox p { margin-top:60px; }
#main .esg .listbox { width:666px; margin-top:10px; margin-right:70px; }
#main .esg .listbox ul { position:relative; }
#main .esg .listbox li { position:relative; }
#main .esg .listbox li dl { padding:40px 14px; border-bottom:1px solid #121212; position:relative; z-index:1; transition:all 0.3s ease; }
#main .esg .listbox li:first-child dl { border-top:1px solid #121212; }
#main .esg .listbox li dt { color:#111; font-weight:700; font-size:25px; }
#main .esg .listbox li dd { display:none; padding:20px 0 0 0; overflow:hidden; }
#main .esg .listbox li dd p { opacity:0; color:#333; font-weight:300; font-size:17px; line-height:1.5; }
#main .esg .listbox li .btn_more { display:none; z-index:5; border:1px solid rgba(255,255,255,1); border-radius:150px; position:absolute; right:20px; top:50%; transform:translateY(-50%); width:140px; height:140px; align-items:center; justify-content:center; }
#main .esg .listbox li .imgbox { display:none; position:absolute; right:-90px; top:50%; opacity:0; transition:all 1.4s; display:inline-block; transform:translateY(-50%) scale(.65) skew(10deg) rotate(30deg); transition:opacity 1s, transform 0.5s cubic-bezier(.3,.68,.34,.8); }
#main .esg .listbox li.active dl { padding:80px 14px; }
#main .esg .listbox li.active dd { display:block; }
#main .esg .listbox li.active dd p { animation:ani_2 0.5s 0.3s; animation-fill-mode:forwards;  }
#main .esg .listbox li.active .imgbox { display:block; opacity:1; transform:translateY(-50%) scale(1) skew(0) rotate(0); }
#main .esg .listbox li.active .btn_more { display:flex;  }
@media screen and (max-width:1400px){
  #main .esg .titlebox p { margin-top:20px; }
  #main .esg .listbox li dl { padding:30px 14px;}
  #main .esg .listbox li dt { font-size:22px; }
  #main .esg .listbox li dd { padding:15px 0 0 0; }
  #main .esg .listbox li dd p { font-size:17px; }
  #main .esg .listbox li .btn_more { right:20px; top:50%; width:140px; height:140px; }
  #main .esg .listbox li .imgbox { right:-90px; top:50%; }
  #main .esg .listbox li.active dl { padding:60px 14px; }
}
@media screen and (max-width:1280px){
  #main .esg .listbox { width:520px; }
}
@media screen and (max-width:1024px){
  #main .esg { padding:150px 0; }
  #main .esg .titlebox h3 span { display:inline-block; }
  #main .esg .titlebox p { margin-top:10px; }
  #main .esg .listbox { width:100%; margin-top:60px; }
  #main .esg .inner1600 { padding-right:20px; }
}
@media screen and (max-width:860px){
  #main .esg .listbox { margin:0; margin-top:40px; }
  #main .esg .listbox li .imgbox img,
  #main .esg .listbox li.active .imgbox img { display:none }
  #main .esg .listbox li dd p br { display:none }
  #main .esg .listbox li dl { padding:25px 10px;}
  #main .esg .listbox li dt { font-size:20px; }
  #main .esg .listbox li dd { padding:12px 0 0 0; }
  #main .esg .listbox li dd p { font-size:16px; }
  #main .esg .listbox li.active dl { padding:30px 120px 30px 10px; }
  #main .esg .listbox li .btn_more { right:10px; top:50%; width:100px; height:100px; border:1px solid rgba(0,0,0,0.3) }
  #main .esg .listbox li .btn_more img { filter:brightness(1) invert(1); width:30px; }
}
@media screen and (max-width:640px){
  #main .esg { padding:100px 0; }
  #main .esg .listbox li dl { padding:20px 10px;}
  #main .esg .listbox li dt { font-size:18px; }
  #main .esg .listbox li dd { padding:12px 0 0 0; }
  #main .esg .listbox li dd p { font-size:15px; }
  #main .esg .listbox li.active dl { padding:30px 100px 30px 10px; }
  #main .esg .listbox li .btn_more { width:80px; height:80px;  }
}

#main .esg .titlebox.subOn p { animation:ani_2 0.5s 1.0s; animation-fill-mode:both; }

#main .recruit { padding:250px 0; background:url(/img/main/recruit_bg.jpg) center center / cover; }
#main .recruit .inner1600 { display:flex; padding-right:70px; }
#main .recruit .titlebox { width:560px; }
#main .recruit .titlebox h3 { color:#fff; }
#main .recruit .titlebox p { margin-top:50px; color:#fff; }
#main .recruit .titlebox .info { margin-top:100px; }
#main .recruit .titlebox .info ul { display:flex; }
#main .recruit .titlebox .info li { padding:10px 40px; height:94px; text-align:center; border-right:1px solid rgba(255,255,255,0.2)}
#main .recruit .titlebox .info li .icon { display:flex; height:37px; align-items:center; justify-content:center; }
#main .recruit .titlebox .info li .icon img { filter:brightness(0) invert(1); transition:all 0.3s ease; }
#main .recruit .titlebox .info li strong { display:block; margin-top:10px; color:#fff; font-size:18px; font-weight:300; transition:all 0.3s ease; }
#main .recruit .titlebox .info li a:hover .icon img { filter:brightness(1) invert(0); }
#main .recruit .titlebox .info li a:hover strong { color:#006bce; }
#main .recruit .listbox { width:calc(100% - 560px); }
#main .recruit .listbox ul { overflow:hidden; }
#main .recruit .listbox .box { width:100%; height:407px; background-color:#fff; padding:50px 50px; overflow:hidden }
#main .recruit .listbox .box .circle { color:#fff; font-size:17px; font-weight:600; width:63px; height:63px; display:flex; align-items:center; justify-content:center; border-radius:100px; background-color:#01488a; transition:all 0.3s ease-in-out; }
#main .recruit .listbox .box dl { margin-top:45px; }
#main .recruit .listbox .box dt { color:#111; font-size:20px; font-weight:700; line-height:1.2; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; transition:all 0.3s ease-in-out; }
#main .recruit .listbox .box dd { min-height:90px; margin-top:22px; }
#main .recruit .listbox .box dd > p { color:#111; font-size:17px; font-weight:400; line-height:1.4; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; transition:all 0.3s ease-in-out; }
#main .recruit .listbox .box .date { margin-top:40px; color:#666; font-size:14px; font-weight:300; transition:all 0.3s ease-in-out; }
#main .recruit .listbox .box.finish { background-color:rgba(255,255,255,0.3)}
#main .recruit .listbox .box.finish .circle { border:1px solid rgba(255,255,255,1); background:none }
#main .recruit .listbox .box.finish dt,
#main .recruit .listbox .box.finish dd { color:#fff; }
#main .recruit .listbox .box.finish .date { color:rgba(255,255,255,0.7); }
#main .recruit .listbox a:hover .box { background-color:#01488a; }
#main .recruit .listbox a:hover .box .circle { border:none; background-color:#fff; color:#01488a}
#main .recruit .listbox a:hover .box dt { color:#fff; }
#main .recruit .listbox a:hover .box dd > p { color:rgba(255,255,255,0.7);}
#main .recruit .listbox a:hover .box .date { color:rgba(255,255,255,0.25); }
#main .recruit .listbox .slick-list { margin:0 0 0 -18px !important; }
#main .recruit .listbox .slick-slide { margin:0 0 0 18px !important; }
#main .recruit .slick-dots { display:none !important; }
#main .recruit .btnbox { width:100%; margin-top:50px; }
#main .recruit .progress { display:block; width:100%; height:2px; overflow:hidden; background-color:rgba(255,255,255,0.3); background-image:linear-gradient(to right, #fff, #fff); background-repeat:no-repeat; background-size:0 100%; transition: background-size .4s ease-in-out;}
#main .recruit .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;  }
@media screen and (max-width:1400px){
  #main .recruit .titlebox p { margin-top:20px; }
  #main .recruit .titlebox p .m_br { display:block }
  #main .recruit .titlebox { width:420px; }
  #main .recruit .listbox { width:calc(100% - 420px); }
  #main .recruit .inner1600 { padding-right:30px; }
  #main .recruit .titlebox .info li { padding:10px 30px; }
  #main .recruit .listbox .box { height:400px; padding:40px; }
  #main .recruit .listbox .slick-list { margin:0 0 0 -15px !important; }
  #main .recruit .listbox .slick-slide { margin:0 0 0 15px !important; }
}
@media screen and (max-width:1024px){
  #main .recruit { padding:150px 0; }
  #main .recruit .titlebox { text-align:center; }
  #main .recruit .titlebox .info ul { justify-content:center; }
  #main .recruit .titlebox .info li { padding:10px 30px; }
  #main .recruit .titlebox .info li strong { font-size:16px; }
  #main .recruit .titlebox .info li:last-child {border-right:none }
  #main .recruit .titlebox p { margin-top:10px; }
  #main .recruit .titlebox p .m_br { display:inline-block }
  #main .recruit .inner1600 { padding-right:20px; flex-wrap:wrap;}
  #main .recruit .titlebox { width:100%; }
  #main .recruit .titlebox .info { margin-top:40px; }
  #main .recruit .listbox { width:100%; margin-top:50px; }
  #main .recruit .listbox .box { height:350px; padding:30px; }
  #main .recruit .listbox .box .circle { font-size:16px; width:60px; height:60px; }
  #main .recruit .listbox .box dl { margin-top:25px; }
  #main .recruit .listbox .box dt { font-size:18px; }
  #main .recruit .listbox .box dd { min-height:80px; margin-top:15px; }
  #main .recruit .listbox .box dd > p { font-size:16px; }
}
@media screen and (max-width:640px){
  #main .recruit { padding:100px 0; }
  #main .recruit .titlebox .info li { padding:10px 10px; }
  #main .recruit .titlebox .info li strong { font-size:15px; }
  #main .recruit .listbox .box { height:300px; padding:20px; }
  #main .recruit .listbox .box .circle { font-size:16px; width:60px; height:60px; }
  #main .recruit .listbox .box dl { margin-top:20px; }
  #main .recruit .listbox .box dt { font-size:17px; }
  #main .recruit .listbox .box dd { min-height:75px; margin-top:13px; }
  #main .recruit .listbox .box dd > p { font-size:15px; }
  #main .recruit .listbox .slick-list { margin:0 0 0 -10px !important; }
  #main .recruit .listbox .slick-slide { margin:0 0 0 10px !important; }
}


#main .newsroom { padding:200px 0;}
#main .newsroom .titlebox { text-align:center; }
#main .newsroom .titlebox p { margin-top:50px; }
#main .newsroom .listbox { margin-top:75px; }
#main .newsroom .listbox .nav ul { display:flex; align-items:center; justify-content:center; gap:0 20px; }
#main .newsroom .listbox .nav ul li a { position:relative; color:#b2b2b2; font-size:17px; font-weight:400; }
#main .newsroom .listbox .nav ul li.on a { color:#003668; font-size:17px; font-weight:700; }
#main .newsroom .listbox .nav ul li.on a:after { content:""; display:block; position:absolute; left:0; bottom:-1px; width:100%; height:1px; background-color:#003668; }
#main .newsroom .listbox .list { margin-top:70px; }
#main .newsroom .listbox .list ul { display:flex; flex-wrap:wrap; gap:0 48px; }
#main .newsroom .listbox .list li { width:calc((100% - 144px) / 4); }
#main .newsroom .listbox .list li .imgbox { position:relative; overflow:hidden; }
#main .newsroom .listbox .list li .imgbox:before {content:""; display:block; padding-bottom:67.6%; }
#main .newsroom .listbox .list li .imgbox img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
#main .newsroom .listbox .list li .date { margin-top:40px; color:#333; font-size:15px; font-weight:300; }
#main .newsroom .listbox .list li .title { margin-top:25px; color:#111; font-size:25px; font-weight:700; line-height:1.4; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
@media screen and (max-width:1400px){
  #main .newsroom .titlebox p { margin-top:20px; }
  #main .newsroom .listbox { margin-top:50px; }
  #main .newsroom .listbox .list { margin-top:50px; }
  #main .newsroom .listbox .list ul { gap:0 30px; }
  #main .newsroom .listbox .list li { width:calc((100% - 90px) / 4); }
  #main .newsroom .listbox .list li .date { margin-top:30px; font-size:15px; }
  #main .newsroom .listbox .list li .title { margin-top:20px; font-size:22px; }
}
@media screen and (max-width:1024px){
  #main .newsroom { padding:150px 0;}
  #main .newsroom .titlebox p { margin-top:10px; }
  #main .newsroom .listbox { margin-top:30px; }
  #main .newsroom .listbox .nav ul li a { font-size:16px; }
  #main .newsroom .listbox .list { margin-top:30px; }
  #main .newsroom .listbox .list ul { gap:0 20px; }
  #main .newsroom .listbox .list li { width:calc((100% - 60px) / 4); }
  #main .newsroom .listbox .list li .date { margin-top:25px; font-size:14px; }
  #main .newsroom .listbox .list li .title { margin-top:15px; font-size:19px; }
}
@media screen and (max-width:860px){
  #main .newsroom .listbox .nav ul li a { font-size:15px; }
  #main .newsroom .listbox .list ul { gap:20px 20px; }
  #main .newsroom .listbox .list li { width:calc((100% - 20px) / 2); }
}
@media screen and (max-width:640px){
  #main .newsroom { padding:100px 0;}
  #main .newsroom .listbox .nav ul li a { font-size:15px; }
  #main .newsroom .listbox .list li .date { margin-top:20px; font-size:13px; }
  #main .newsroom .listbox .list li .title { margin-top:10px; font-size:16px; }
}

/* animation */
#main .newsroom .listbox .list li { opacity:0; }
#main .newsroom .listbox.subOn .list li { animation:ani_3 0.5s 0.5s; animation-fill-mode:both; }

/* popup 231220 */
#pop12 { border:none !important; left:50% !important; transform:translateX(-50%); }
#pop12 .pop-content { height:690px !important; }
.popup-box231220 { width:610px; height:100%; padding:6px 5px 7px 5px; background: linear-gradient(167deg, #F3B456 -2.7%, #FFE1B5 94.67%);}
.popup-box231220 * { box-sizing:border-box; font-family:Pretendard; word-break:keep-all }
.popup-box231220 .box { text-align:center; height:100%; background:url(/img/popup/popup231220_bg.jpg) center center / cover; }
.popup-box231220 .top-box { padding-top:49px; }
.popup-box231220 .bottom-box { padding-top:40px; color:#fff; font-size:14px; font-weight:600; line-height:1.3 }
.popup-box231220 .bottom-box img { vertical-align:middle; margin-left:15px; }
.popup-box231220 .scroll-box { margin-top:56px; padding:0 59px; width:100% }
.popup-box231220 .scroll-box .txtbox { position:relative; height:287px; overflow:auto; width:100% }
.popup-box231220 .scroll-box .txtbox:before {content:""; display:block; border-radius:3px; background:#fff; opacity:0.3; position:absolute; right:0; top:0; width:3px; height:100%; }
.popup-box231220 .scroll-box .txtbox::-webkit-scrollbar { display:none; }
.popup-box231220 .scroll-box .txtbox { padding:4px 15px; }
.popup-box231220 .scroll-box .txtbox .txt-1 { color:#fff; font-size:17px; font-weight:500; line-height:1.6; letter-spacing:-0.02em }
.popup-box231220 .scroll-box .txtbox .txt-1 span{ color:#ffd698; font-weight:600; }
.popup-box231220 .scroll-box .txtbox .txt-2 { margin-top:25px; color:#d4d4d4; font-size:15px; font-weight:500; line-height:1.6; letter-spacing:-0.02em }

.popup-box231220 .os-theme-dark > .os-scrollbar, .os-theme-light > .os-scrollbar { padding:0; }
.popup-box231220 .os-theme-dark > .os-scrollbar-vertical, .os-theme-light > .os-scrollbar-vertical { width:3px; }
.popup-box231220 .os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle { background:#fff; width:3px; border-radius:3px; opacity:0.5 }
.popup-box231220 .os-theme-dark.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active, 
.popup-box231220 .os-theme-light.os-host-transition > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle.active,
.popup-box231220 .os-theme-dark > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle,
.popup-box231220 .os-theme-dark > .os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle.active { background:#fff; border-radius:3px; opacity:0.8 }

@media screen and (max-width:1200px){
    #pop12 { left:40px !important; transform:translateX(0);}
}

@media screen and (max-width:640px){
    #pop12 { top:80px !important; left:20px !important; width:calc(100% - 40px) !important;}
    #pop12 .pop-content { width:100% !important; height:560px !important; }
    .popup-box231220 { width:100%; }
    .popup-box231220 .scroll-box .txtbox br { display:none }
    .popup-box231220 .scroll-box .txtbox .m_br { display:block }
    .popup-box231220 .top-box { padding-top:25px; }
    .popup-box231220 .top-box img { width:220px !important; }
    .popup-box231220 .bottom-box { padding-top:30px; font-size:14px; }
    .popup-box231220 .bottom-box img { margin-left:10px; }
    .popup-box231220 .scroll-box { margin-top:35px; padding:0 15px; width:100% }
    .popup-box231220 .scroll-box .txtbox { height:260px; }
    .popup-box231220 .scroll-box .txtbox { padding:4px 10px; }
    .popup-box231220 .scroll-box .txtbox .txt-1 { font-size:16px; }
    .popup-box231220 .scroll-box .txtbox .txt-2 { margin-top:20px; font-size:14px; }
}