@charset "utf-8";



#visual { position:relative; width:100%; height:100vh; padding:100px 0 40px; }
#visual > div { position:relative; width:100%; height:calc(100vh - 140px); overflow:hidden; }
#visual .swiper-container { position:relative; width:100%; height:100%; overflow:hidden; }
#visual .swiper-container .swiper-slide { position:relative; width:100%; height:100%; overflow:hidden; display:flex; opacity:0 !important; }
#visual .swiper-container .swiper-slide .bg { z-index:2; position:absolute; left:0; top:0; width:100%; height:100%; }
#visual .swiper-container .swiper-slide .bg1,
#visual .swiper-container .swiper-slide .bg2,
#visual .swiper-container .swiper-slide .bg3 { background:linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%); } 
#visual .swiper-container .swiper-slide .mov { position:relative; width:100%; height:100%; overflow:hidden; }
#visual .swiper-container .swiper-slide .mov video { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
#visual .swiper-container .swiper-slide .mvisualImage { opacity:1; position:absolute; left:0; right:0; top:0; bottom:0; background-position:center center; background-repeat:no-repeat; background-size:cover; }
#visual .swiper-container .swiper-slide .txtbox { position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; z-index:15; text-align:center; }
#visual .swiper-container .swiper-slide .txtbox .txt-1 { color:#fff; font-size:var(--font74); font-weight:600; line-height:1.3; letter-spacing:-0.04em; overflow:hidden; }
#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:30px; color:#fff; font-size:var(--font22); font-weight:500; line-height:1.3; letter-spacing:-0.04em; overflow:hidden; }
#visual .swiper-container .swiper-slide .txtbox .txt span { opacity:0; font-weight:600; display:block; }
#visual .swiper-container .swiper-slide .txtbox .txt span:not(:last-child) { padding-bottom:10px; }
#visual .swiper-container .swiper-slide .txtbox .txt-2 span { font-weight:500; }
#visual .swiper-container .swiper-slide.swiper-slide-active { opacity:1 !important; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox { animation:ani_5 0.1s 0.1s forwards, visual_txt_off 0.7s 4.6s forwards; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 span { animation:ani_3 1.2s 0.5s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 span:nth-child(2) { animation:ani_3 1.2s 0.7s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-2 span { animation:ani_3 1.0s 1.0s; animation-fill-mode:both; }
#visual .btn_pn { display:none }

#visual .swiper-container .control_box { position:absolute; left:50%; padding:0; top:unset; bottom:60px; transform:translateX(-50%); z-index:5; }
#visual .swiper-container .control_box .swiper-btn { display:none; }
#visual .swiper-pagination { position:relative; display:flex; align-items:center; justify-content:center; gap:10px; }
#visual .swiper-pagination .swiper-pagination-bullet { opacity:1; position:relative; left:0; top:0; display:block; width:150px; height:41px; background:none; border-radius:0; margin:0; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; flex-direction:column; align-items:center; }
#visual .swiper-pagination .swiper-pagination-bullet:before { content:""; display:block; width:100%; height:1px; position:absolute; left:0; bottom:0; background:rgba(255, 255, 255, 0.3); }
#visual .swiper-pagination .swiper-pagination-bullet .txt { transition:all 0.4s; display:flex; align-items:center; justify-content:center; gap:15px; color:rgba(255, 255, 255, 0.5); font-size:var(--font16); font-weight:500; line-height:1.3; }
#visual .swiper-pagination .swiper-pagination-bullet .txt em { font-weight:500; }
#visual .swiper-pagination .swiper-pagination-bullet-active .txt { color:#fff; }
#visual .control_box .tablist { display:none }

#visual .line-chart { position:absolute; z-index:1; bottom:0; left:0; width:150px; height:1px; }
#visual .line { opacity:1; stroke:none; fill:#fff; width:0; }

#visual .scrollDown { position:absolute; bottom:0; right:0; z-index:11; display:flex; align-items:center; flex-direction:column; gap:60px;  }
#visual .scrollDown .txt { opacity:0.6; display:flex; transform:rotate(90deg); transform-origin:top center; color:rgba(255, 255, 255, 1); font-size:var(--font15); font-weight:400; line-height:1.0; animation:scrollDown1 2.5s 0.3s infinite; }
#visual .scrollDown .line { position:relative; display:flex; width:1px; height:60px; background:rgba(255, 255, 255, 0.2); margin-right:16px;}
#visual .scrollDown .line span { display:flex; display:block; }
#visual .scrollDown .line span:before { content:""; display:block; width:1px; height:0; position:absolute; top:0; left:0; background:#fff; animation:scrollDown2 2.5s 0.3s infinite; }

@media screen and (max-width:1440px){
}
@media screen and (max-width:1200px){
	#visual { padding:80px 0 20px; }
	#visual > div { height:calc(100vh - 100px); }
}
@media screen and (max-width:1024px){
	#visual .swiper-container .swiper-slide .txtbox { padding:0 10px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:15px; }
	#visual .swiper-pagination .swiper-pagination-bullet { width:120px; height:35px; }
	#visual .swiper-pagination .swiper-pagination-bullet .txt { gap:10px; }
	#visual .scrollDown .line { margin-right:12px; height:50px; }
}
@media screen and (max-width:640px){
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:8px; }
	#visual .swiper-pagination .swiper-pagination-bullet { width:90px; height:25px; }
	#visual .swiper-pagination .swiper-pagination-bullet .txt { gap:5px; }
	#visual .scrollDown { gap:50px; right:-10px; }
	#visual .scrollDown .line { margin-right:10px; height:45px; }
}

#visual .swiper-button-next, 
#visual .swiper-button-prev,
.swiper-button-next:after, 
.swiper-button-prev:after { display:none; }

@keyframes scrollDown1 {
    0% { opacity:0.6; transform:translateY(0) rotate(90deg); }
    50% { opacity:1; transform:translateY(10px) rotate(90deg); }
    100% { opacity:0.6; transform:translateY(0) rotate(90deg); }
}
@keyframes scrollDown2 {
    0% { height:0; }
    50% { height:100%; }
    100% { height:0; }
}


.title-box { position:relative; }
.title-box h3 { color:#111; font-size:var(--font80); font-weight:600; line-height:1.3; letter-spacing:-0.05em; }
.title-box h3 span { font-weight:600; }


/* animation */
.title-box h3 { overflow:hidden; }
.title-box h3 span { opacity:0; display:block }
.title-box.subOn h3 span { animation:ani_3 0.8s 0.2s; animation-fill-mode:both; }
.title-box.subOn h3 span:nth-child(2) { animation:ani_3 0.8s 0.3s; animation-fill-mode:both; }


.yejin { display:flex; align-items:center; }
.yejin > div { width:50%; }
.yejin .l-box { display:flex; justify-content:flex-end; }
.yejin .l-box .ybox { max-width:840px; width:100%; padding-right:100px; }
.yejin .l-box .ybox .title-box h3 { color:var(--mainColor); font-size:var(--font20); font-weight:600; line-height:1.3; letter-spacing:-0.03em; }
.yejin .l-box .ybox .txtbox { margin-top:20px; }
.yejin .l-box .ybox .txtbox h4 { color:#111; font-size:var(--font70); font-weight:600; line-height:1.3; letter-spacing:-0.045em; }
.yejin .l-box .ybox .txtbox dd { margin-top:50px; color:#333; font-size:var(--font20); font-weight:300; line-height:1.8; letter-spacing:-0.025em; }
.yejin .l-box .ybox .txtbox dd strong { font-weight:600; }
.yejin .l-box .ybox .listbox { margin-top:80px; display:flex; gap:20px; }
.yejin .l-box .ybox .listbox .box { position:relative; width:calc((100% - 40px) / 3); }
.yejin .l-box .ybox .listbox .box:before { content:''; display:block; padding-bottom:105%; }
.yejin .l-box .ybox .listbox .box .sbox { transition:all 0.3s; position:absolute; left:0; top:0; width:100%; height:100%; padding:40px; border:1px solid rgba(51, 51, 51, 0.30); background:rgba(255, 255, 255, 0.05);}
.yejin .l-box .ybox .listbox .box .sbox figure { transition:all 0.3s; width:60px; height:60px; display:flex; align-items:center; justify-content:center; background:#333; }
.yejin .l-box .ybox .listbox .box .sbox figure img { transition:all 0.3s; filter:grayscale(0) invert(1); }
.yejin .l-box .ybox .listbox .box .sbox .txt { transition:all 0.3s; margin-top:40px; color:#333; font-size:var(--font20); font-weight:600; line-height:1.4; letter-spacing:-0.03em;}
.yejin .l-box .ybox .listbox .box:hover .sbox { transform:translateY(-10px); background:rgba(34, 34, 34, 1); }
.yejin .l-box .ybox .listbox .box:hover .sbox figure { background:#fff; }
.yejin .l-box .ybox .listbox .box:hover .sbox figure img { filter:none; }
.yejin .l-box .ybox .listbox .box:hover .sbox .txt { color:#fff; }
.yejin .r-box { position:relative; }
.yejin .r-box figure { position:relative; overflow:hidden; }
.yejin .r-box figure:before { content:''; display:block; padding-bottom:94%; }
.yejin .r-box figure img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
.yejin .r-box .btn { position:absolute; right:40px; bottom:40px; z-index:3; } 
.yejin .r-box .btn a { position:relative; width:180px; height:70px; padding-left:20px; display:flex; align-items:center; color:#111; font-size:var(--font20); font-weight:500; line-height:1.3; background:#fff; }
.yejin .r-box .btn a .btnArr { position:absolute; right:10px; top:10px; }
@media screen and (max-width:1800px){
	.yejin .l-box .ybox { padding-right:calc(20px + 4%); }
}
@media screen and (max-width:1720px){
	.yejin .l-box .ybox { padding-right:20px; }
}
@media screen and (max-width:1440px){
	.yejin .l-box .ybox .txtbox dd { margin-top:40px; }
	.yejin .l-box .ybox .txtbox dd br { display:none }
	.yejin .l-box .ybox .listbox .box .sbox { padding:30px; }
	.yejin .r-box .btn { right:30px; bottom:30px; }
}
@media screen and (max-width:1280px){
	.yejin .l-box { width:54%; }
	.yejin .r-box { width:46%; }
	.yejin .l-box .ybox .txtbox dd { margin-top:30px; }
	.yejin .l-box .ybox .listbox { margin-top:60px; gap:15px; }
	.yejin .l-box .ybox .listbox .box { width:calc((100% - 30px) / 3); }
	.yejin .l-box .ybox .listbox .box .sbox { padding:20px; }
	.yejin .l-box .ybox .listbox .box .sbox .txt { margin-top:30px; }
}
@media screen and (max-width:1024px){
	.yejin .l-box .ybox .txtbox dd { margin-top:20px; }
	.yejin .l-box .ybox .listbox { margin-top:40px; gap:10px; }
	.yejin .l-box .ybox .listbox .box { width:calc((100% - 20px) / 3); }
	.yejin .l-box .ybox .listbox .box .sbox { padding:20px; }
	.yejin .l-box .ybox .listbox .box .sbox figure { width:50px; height:50px; }
	.yejin .l-box .ybox .listbox .box .sbox figure img { height:30px; }
	.yejin .l-box .ybox .listbox .box .sbox .txt { margin-top:20px; }
	.yejin .r-box .btn { right:20px; bottom:20px; }
	.yejin .r-box .btn a { width:160px; height:60px; padding-left:15px; }
	.yejin .l-box .ybox .listbox .box:hover .sbox { transform:translateY(0); }
}
@media screen and (max-width:860px){
	.yejin { flex-direction:column; }
	.yejin .l-box,
	.yejin .r-box { width:100%; }
	.yejin .r-box { margin-top:20px; }
	.yejin .l-box .ybox { padding-right:0; }
	.yejin .l-box .ybox .listbox .box:before { display:none }
	.yejin .l-box .ybox .listbox .box .sbox { position:relative; }
	.yejin .r-box figure:before { padding-bottom:50%; }
}
@media screen and (max-width:640px){
	.yejin .l-box .ybox .txtbox dd { margin-top:10px; }
	.yejin .l-box .ybox .listbox { margin-top:20px; gap:5px; }
	.yejin .l-box .ybox .listbox .box { width:calc((100% - 10px) / 3); }
	.yejin .l-box .ybox .listbox .box .sbox { padding:10px; }
	.yejin .l-box .ybox .listbox .box .sbox figure { width:40px; height:40px; }
	.yejin .l-box .ybox .listbox .box .sbox figure img { height:24px; }
	.yejin .l-box .ybox .listbox .box .sbox .txt { margin-top:10px; }
	.yejin .r-box .btn { right:10px; bottom:10px; }
	.yejin .r-box .btn a { width:130px; height:50px; padding-left:10px; }
	.yejin .r-box .btn a .btnArr { right:5px; top:5px; }
}

/* animation */
.yejin .l-box .ybox .title-box .txtbox { opacity:0; }
.yejin .l-box .ybox .title-box.subOn .txtbox { animation:ani_4 0.8s 0.3s; animation-fill-mode:both; }
.yejin .l-box .ybox .listbox .box { opacity:0; }
.yejin .l-box .ybox .listbox.subOn .box { animation:bgs3 0.8s 0.3s; animation-fill-mode:both; }
.yejin .r-box figure img { clip-path:inset(50% 50% 50% 50% round 0); transition:all 0.8s 0.3s ease-in-out; }
.yejin .r-box.subOn figure img { clip-path:inset(0 0 0 0 round 0); }
.yejin .r-box .btn { opacity:0; }
.yejin .r-box.subOn .btn { animation:bgs3 0.5s 1.0s; animation-fill-mode:both; }



.portfolio { position:relative; display:flex; }
.portfolio .l-box { display:flex; justify-content:flex-end; width:38.4%; padding-left:20px; padding-top:40px; }
.portfolio .l-box .nbox { max-width:580px; width:100%; padding-right:20px; }
.portfolio .l-box .nbox .title-box h3 { transition:all 0.4s;}
.portfolio .l-box .nbox .txt { transition:all 0.4s; margin-top:30px; color:#111; font-size:var(--font22); font-weight:500; line-height:1.3; }
.portfolio .l-box .nbox .control_box { display:flex; gap:10px; }
.portfolio .l-box .nbox .control_box .swiper-pn { display:flex; gap:10px; }
.portfolio .l-box .nbox .control_box .swiper-pn > div { transition:all 0.3s; position:relative; width:70px; height:70px; border:1px solid #111; margin:0; padding:0; left:unset; top:unset; bottom:unset; right:unset; }
.portfolio .l-box .nbox .control_box .swiper-pn > div img { transition:all 0.3s; }
.portfolio .l-box .nbox .control_box .swiper-pn > div:hover { background:#111; }
.portfolio .l-box .nbox .control_box .swiper-pn > div:hover img { filter:grayscale(0) invert(1); }
.portfolio .listbox { width:calc(100% - 38.4%); position:relative; overflow:hidden; }
.portfolio .listbox .swiper-container { position:relative; width:1300px; padding-top:30px; }
.portfolio .listbox .swiper-container .swiper-slide { transition:all 0.5s; position:relative; width:calc((100% - 40px) / 3); height:600px; margin-right:20px; border:1px solid rgba(51, 51, 51, 0.30); }
.portfolio .listbox .swiper-container .swiper-slide a { display:block; width:100%; height:100%; padding:150px 10px 0; }
.portfolio .listbox .swiper-container .swiper-slide .imgbox { position:relative; overflow:hidden; }
.portfolio .listbox .swiper-container .swiper-slide .imgbox:before { content:''; display:block; padding-bottom:75%; }
.portfolio .listbox .swiper-container .swiper-slide .imgbox img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
.portfolio .listbox .swiper-container .swiper-slide .txtbox { position:absolute; left:0; top:50px; width:100%; text-align:center; }
.portfolio .listbox .swiper-container .swiper-slide .txtbox h4 { transition:all 0.3s; color:#111; font-size:var(--font30); font-weight:600; line-height:1.3; }
.portfolio .listbox .swiper-container .swiper-slide .txtbox .name { transition:all 0.3s; margin-top:15px; color:rgba(17, 17, 17, 0.60); font-size:var(--font16); font-weight:500; line-height:1.3; }
.portfolio .listbox .swiper-container .swiper-slide .btn { transition:all 0.3s; position:absolute; left:50%; bottom:80px; transform:translateX(-50%); display:flex; align-items:center; gap:20px; color:#111; font-size:var(--font20); font-weight:500; line-height:1.3; }
.portfolio .listbox .swiper-container .swiper-slide.swiper-slide-active { transform:translateY(-30px); background:#252525; }
.portfolio .listbox .swiper-container .swiper-slide.swiper-slide-active .txtbox h4,
.portfolio .listbox .swiper-container .swiper-slide.swiper-slide-active .txtbox .name,
.portfolio .listbox .swiper-container .swiper-slide.swiper-slide-active .btn { color:#fff; }
.portfolio .listbox .swiper-container .swiper-slide.swiper-slide-active .btn .btnArr { background:#fff; }
.portfolio .listbox .swiper-container .swiper-slide.swiper-slide-active .btn .btnArr > span:after,
.portfolio .listbox .swiper-container .swiper-slide.swiper-slide-active .btn .btnArr > span:before { filter:grayscale(1) brightness(0); } 

.portfolio .listbox .swiper-pagination { display:none; position:absolute; left:50%; top:unset; bottom:0; transform:translate(-50%, 0); max-width:1680px; width:100%; }
.portfolio .listbox .swiper-pagination .swiper-pagination-bullet-active { background:var(--mainColor); }

body { transition:all 0.4s; }
body.bg { background:var(--subColor); }

body.bg .portfolio .l-box .nbox .title-box h3,
body.bg .portfolio .l-box .nbox .txt { color:#fff; }
body.bg .portfolio .l-box .nbox .control_box .swiper-pn > div { border-color:#fff;  }
body.bg .portfolio .l-box .nbox .control_box .swiper-pn > div img { filter:grayscale(0) invert(1); }
body.bg .portfolio .l-box .nbox .control_box .swiper-pn > div:hover { background:#fff; }
body.bg .portfolio .l-box .nbox .control_box .swiper-pn > div:hover img { filter:grayscale(0) invert(0); }
body.bg .btnArr.whline { background:var(--subColor); border-color:#fff;}
body.bg .btnArr.whline > span:after,
body.bg .btnArr.whline > span:after { filter:grayscale(0) invert(0); }

@media screen and (max-width:1640px){
}
@media screen and (max-width:1024px){
	.portfolio .l-box { padding-top:20px; }
	.portfolio .l-box .nbox .txt { margin-top:15px; }
	.portfolio .l-box .nbox .control_box .swiper-pn > div { width:58px; height:58px; }
	.portfolio .l-box .nbox .control_box .swiper-pn > div img { height:17px; }
	.portfolio .listbox .swiper-container .swiper-slide { height:540px; }
	.portfolio .listbox .swiper-container .swiper-slide a { padding:120px 10px 0; }
	.portfolio .listbox .swiper-container .swiper-slide.swiper-slide-active { transform:translateY(0); }
	.portfolio .listbox .swiper-container .swiper-slide .txtbox { top:60px; }
	.portfolio .listbox .swiper-container .swiper-slide .btn { bottom:60px; }
	.portfolio .listbox .swiper-container { padding-top:0; }
}
@media screen and (max-width:860px){
	.portfolio { flex-wrap:wrap; }
	.portfolio .l-box,
	.portfolio .listbox { width:100%; }
	.portfolio .l-box .nbox { max-width:100%; padding:0; }
	.portfolio .l-box .nbox .txt br { display:none; }
	.portfolio .listbox { margin-top:40px; padding:0 20px; }
	
}
@media screen and (max-width:640px){
	.portfolio .l-box { padding-top:10px; }
	.portfolio .l-box .nbox .txt { margin-top:8px; }
	.portfolio .l-box .nbox .txt span.m_br { display:block; }
	.portfolio .l-box .nbox .control_box .swiper-pn > div { width:48px; height:48px; }
	.portfolio .l-box .nbox .control_box,
	.portfolio .l-box .nbox .control_box .swiper-pn { gap:5px; }
	.portfolio .listbox { margin-top:20px; }	
	.portfolio .listbox .swiper-container { width:auto; }
	.portfolio .listbox .swiper-container .swiper-slide { width:100%; height:520px; margin-right:0; }
	.portfolio .listbox .swiper-container .swiper-slide a { padding:100px 10px 0; }
	.portfolio .listbox .swiper-container .swiper-slide .txtbox { top:40px; }
	.portfolio .listbox .swiper-container .swiper-slide .btn { bottom:40px; }
}
@media screen and (max-width:480px){
	.portfolio .listbox .swiper-container .swiper-slide { height:440px; }
}

/* animation */
.portfolio .listbox .swiper-container { opacity:0; }
.portfolio .listbox.subOn .swiper-container { animation:ani_3 0.8s 0.2s; animation-fill-mode:both; }
.portfolio .l-box .nbox .txt { opacity:0; }
.portfolio .l-box .nbox.subOn .txt { animation:ani_5 1.2s 0.8s; animation-fill-mode:both; }



.clients { padding:80px 0 0; }
.clients .title-box { text-align:center; }
.clients .title-box h3 { color:#fff; font-size:var(--font20); font-weight:500; line-height:1.3; letter-spacing:-0.03em; }
.clients .title-box .txt { margin-top:30px; color:#fff; font-size:var(--font70); font-weight:600; line-height:1.3; letter-spacing:-0.05em; }
.clients .listbox { margin-top:80px; overflow:hidden; }
.clients .listbox .list { display:flex; gap:40px; overflow:hidden; }
.clients .listbox .clone { margin-top:40px; display:flex; gap:40px; overflow:hidden; }
.clients .listbox ul { display:flex; gap:60px; margin-left:20px; align-items:center; }
.clients .listbox ul li { background:#fff; display:flex; align-items:center; justify-content:center; height:125px; width:273px; padding:0 20px; }
.clients .listbox ul li img { max-height:80px; max-width:100%; }
@media screen and (max-width:1024px){
	.clients { padding:40px 0 0; }
	.clients .title-box .txt { margin-top:15px; }
	.clients .listbox { margin-top:40px; }
	.clients .listbox .list { gap:20px; }
	.clients .listbox .clone { margin-top:20px; gap:20px; }
	.clients .listbox ul { gap:30px; }
	.clients .listbox ul li { height:110px; width:230px; padding:0 15px; }
	.clients .listbox ul li img { max-height:70px; }
}
@media screen and (max-width:640px){
	.clients { padding:20px 0 0; }
	.clients .title-box .txt { margin-top:8px; }
	.clients .listbox { margin-top:20px; }
	.clients .listbox .list { gap:15px; }
	.clients .listbox .clone { margin-top:10px; gap:10px; }
	.clients .listbox ul { gap:10px; }
	.clients .listbox ul li { height:80px; width:140px; padding:0 10px; }
	.clients .listbox ul li img { max-height:60px; }
}

/* animation */
.clients .listbox { opacity:0; }
.clients .listbox.subOn { animation:bgs3 0.8s 0.3s; animation-fill-mode:both; }
.clients .listbox.subOn .list ul { animation:txt_marquee linear infinite; }
.clients .listbox.subOn .clone ul { animation:txt_marquee_reverse linear infinite; }


.notice { background:#fff; position:relative; z-index:3; } 
.notice .top { display:flex; align-items:flex-end; justify-content:space-between;}
.notice .title-box h3 { color:var(--mainColor); font-size:var(--font20); font-weight:600; line-height:1.3; letter-spacing:-0.03em; }
.notice .title-box .txt { margin-top:40px; color:#111; font-size:var(--font70); font-weight:600; line-height:1.3; letter-spacing:-0.04em; }
.notice .top .btn a { position:relative; width:165px; height:60px; padding-left:20px; display:flex; align-items:center; color:#111; font-size:var(--font18); font-weight:500; line-height:1.3; background:#fff; border:1px solid #111; }
.notice .top .btn a .btnArr { position:absolute; right:10px; top:10px; }

.notice .listbox { display:flex; gap:80px; }
.notice .listbox > div { width:calc(100% - 80px); }
.notice .listbox .bigbox { position:relative; }
.notice .listbox .bigbox a { display:blcok; }
.notice .listbox .bigbox figure { position:relative; overflow:hidden; }
.notice .listbox .bigbox figure:before { content:''; display:block; padding-bottom:75%; }
.notice .listbox .bigbox figure img { transition:all 0.6s; position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; -o-object-fit:cover; }
.notice .listbox .bigbox .type { transition:all 0.4s; position:absolute; left:40px; top:40px; z-index:2; height:50px; padding:0 25px; color:#fff; font-size:var(--font20); font-weight:600; line-height:1.3; letter-spacing:-0.03em; display:inline-flex; align-items:center; justify-content:center; background:#111; }
.notice .listbox .bigbox .txtbox { position:absolute; left:0; bottom:40px; z-index:2; padding:0 40px; width:100%; display:inline-flex; justify-content:space-between; }
.notice .listbox .bigbox .txtbox h5 { transition:all 0.4s; color:#fff; font-size:var(--font36); font-weight:600; line-height:1.3; width:calc(100% - 100px); letter-spacing:-0.035em; text-wrap:nowrap; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; word-break:break-word; word-break:break-all; overflow-wrap:break-word; word-wrap:break-word; }
.notice .listbox .bigbox a:hover figure img { transform:scale(1.05); }
.notice .listbox .bigbox a:hover .type { color:#111; background:#fff; }
.notice .listbox .list ul { display:flex; gap:15px; flex-direction:column; }
.notice .listbox .list ul li { position:relative; height:calc((100% - 30px) / 3); }
.notice .listbox .list ul li a { transition:all 0.4s; height:100%; background:#f8f8f8; padding:30px 100px 30px 30px; display:flex; align-items:center; }
.notice .listbox .list ul li a > span { transition:all 0.4s; color:#111; font-size:var(--font24); font-weight:500; line-height:1.8; letter-spacing:-0.03em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-break:break-word; word-break:break-all; overflow-wrap:break-word; word-wrap:break-word; }
.notice .listbox .list ul li .btn { position:absolute; right:20px; bottom:20px;}
.notice .listbox .list ul li a:hover { background:#111; }
.notice .listbox .list ul li a:hover > span { color:#fff; transform:translate(10px); font-weight:500; }
.notice .listbox a:hover .btn .btnArr { background:#fff; }
.notice .listbox a:hover .btn .btnArr span:before { filter:grayscale(0) invert(1); }
@media screen and (max-width:1440px){
	.notice .listbox { gap:60px; }
	.notice .listbox > div { width:calc(100% - 60px); }
	.notice .listbox .bigbox .type { left:30px; top:30px; padding:0 25px; }
	.notice .listbox .bigbox .txtbox { bottom:30px; padding:0 30px; }
	.notice .listbox .bigbox .txtbox h5 { width:calc(100% - 80px); }
}
@media screen and (max-width:1280px){
	.notice .listbox { gap:40px; }
	.notice .listbox > div { width:calc(100% - 40px); }
	.notice .listbox .bigbox .type { left:25px; top:25px; height:45px; }
	.notice .listbox .bigbox .txtbox { bottom:25px; padding:0 25px; }
	.notice .listbox .list ul { gap:10px; }
	.notice .listbox .list ul li { height:calc((100% - 20px) / 3); }
}
@media screen and (max-width:1024px){
	.notice .title-box .txt { margin-top:20px; }
	.notice .top .btn a { width:145px; height:50px; padding-left:15px; }
	.notice .listbox { gap:30px; }
	.notice .listbox > div { width:calc(100% - 30px); }
	.notice .listbox .bigbox .type { left:20px; top:20px; height:40px; padding:0 15px; }
	.notice .listbox .bigbox .txtbox { bottom:20px; padding:0 20px; }
	.notice .listbox .list ul li a { padding:20px 80px 20px 20px; }
}
@media screen and (max-width:960px){
	.notice .listbox { gap:20px; flex-wrap:wrap; }
	.notice .listbox > div { width:100%; }
	.notice .listbox .bigbox figure:before { padding-bottom:60%; }
	.notice .listbox .list ul { height:auto !important; }
	.notice .listbox .list ul li a { padding:20px 80px 20px 20px; }
}
@media screen and (max-width:640px){
	.notice .top { align-items:flex-start; flex-direction:column; justify-content:center; }
	.notice .title-box .txt { margin-top:10px; }
	.notice .top .btn { margin-top:10px; }
	.notice .top .btn a { width:115px; height:45px; padding-left:10px; }
	.notice .top .btn a .btnArr { right:5px; top:5px; }
	.notice .listbox { gap:10px; }
	.notice .listbox .bigbox .type { height:33px; }
	.notice .listbox .bigbox figure:before { padding-bottom:60%; }
	.notice .listbox .list ul li a { padding:20px 80px 20px 20px; }
}

/* animation */
.notice .title-box .txt { opacity:0; }
.notice .title-box.subOn .txt { animation:ani_5 1.2s 0.8s; animation-fill-mode:both; }
.notice .listbox .bigbox { opacity:0; }
.notice .listbox .bigbox.subOn { animation:bgs3 0.8s 0.3s; animation-fill-mode:both; }
.notice .listbox .list ul { overflow:hidden; } 
.notice .listbox .list li { opacity:0; }
.notice .listbox .list.subOn li { animation:ani_2 1.2s 0.8s; animation-fill-mode:both; }


.etc { margin-bottom:90px; width:100%; position:sticky; bottom:0; }
.etc .listbox .box:not(:last-child) { margin-bottom:10px; }
.etc .listbox .box { position:relative; padding:0 120px; height:390px; display:flex; align-items:center; justify-content:space-between; background:#222; overflow:hidden; }
.etc .listbox .box.bg1:before { transition:all 0.6s; content:''; display:block; position:absolute; left:0; top:0; width:100%; height:100%; background:url(/img/main/inquiry_bg.png) no-repeat center / cover; }
.etc .listbox .box .txtbox { transition:all 0.4s; width:calc(100% - 200px); position:relative; z-index:2; }
.etc .listbox .box .txtbox h4 { color:#fff; font-size:var(--font20); font-weight:500; line-height:1.3; }
.etc .listbox .box .txtbox .txt-1 { margin:20px 0; color:#fff; font-size:var(--font64); font-weight:600; line-height:1.3; letter-spacing:-0.04em; }
.etc .listbox .box .txtbox .txt-2 { color:rgba(255, 255, 255, 0.8); font-size:var(--font22); font-weight:500; line-height:1.3; letter-spacing:-0.035em; }
.etc .listbox .box .btn { transition:all 0.4s; position:relative; z-index:2; }
.etc .listbox .box .btn a { transition:all 0.4s; position:relative; width:194px; height:60px; padding-left:20px; display:flex; align-items:center; color:#fff; font-size:var(--font18); font-weight:500; line-height:1.3; border:1px solid rgba(255, 255, 255, 0.30); backdrop-filter: blur(10px); }
.etc .listbox .box .btn a .btnArr { position:absolute; right:10px; top:10px; }
.etc .listbox .box.bg1 .btn a { background:#fff; color:#111; }
.etc .listbox .box:hover .txtbox { color:#fff; transform:translate(20px); }
.etc .listbox .box:hover .btn a { transform:translate(-20px); border-color:var(--mainColor); background:var(--mainColor); }
.etc .listbox .box:hover .btnArr > span:after { transform:translate(calc(-50% + 10px), calc(-50% - 10px)); opacity:0; }
.etc .listbox .box:hover .btnArr > span:before { transform:translate(-50%, -50%); opacity:1; }
.etc .listbox .box.bg1:hover .btn a { border-color:#222; background:#222; color:#fff; }
.etc .listbox .box.bg1:hover .btnArr  { background:#fff; }
.etc .listbox .box.bg1:hover .btnArr span:before { filter:grayscale(0) invert(1); }
.etc .listbox .box.bg1:hover:before { transform:scale(1.02); }
@media screen and (max-width:1440px){
	.etc .listbox .box { padding:0 100px; height:350px; }
}
@media screen and (max-width:1280px){
	.etc .listbox .box { padding:0 80px; height:320px; }
}
@media screen and (max-width:1024px){
	.etc { margin-bottom:45px; }
	.etc .listbox .box { padding:0 60px; height:280px; }
	.etc .listbox .box .txtbox .txt-1 { margin:10px 0; }
	.etc .listbox .box .btn a { width:160px; height:50px; padding-left:15px; }
	.etc .listbox .box:hover .txtbox { transform:translate(0); }
	.etc .listbox .box:hover .btn a { transform:translate(0); 
}
@media screen and (max-width:640px){
	.etc { margin-bottom:45px; }
	.etc .listbox .box { padding:0 20px; height:220px; flex-direction:column; align-items:flex-start; justify-content:center; }
	.etc .listbox .box .txtbox { width:100%; }
	.etc .listbox .box .txtbox .txt-1 { margin:5px 0; }
	.etc .listbox .box .btn { margin-top:20px; }
	.etc .listbox .box .btn a { width:140px; height:45px; padding-left:10px; }
	.etc .listbox .box .btn a .btnArr { right:5px; top:5px; }
}