@charset "utf-8";

.body_intro { overflow:hidden; }
.main_intro { position:fixed; top:0; left:0; z-index:-10; opacity:0; visibility:hidden; width:100%; height:100%;  }
.introBox { z-index:999999; visibility:visible; opacity:1; }
.introBox:before { content:""; display:block; width:100%; height:50%; background:var(--mainColor); position:absolute; top:0; left:0; animation:ani_h100 1.5s 5.8s; animation-fill-mode:both; }
.introBox:after { content:""; display:block; width:100%; height:50%; background:var(--mainColor); position:absolute; bottom:0; left:0; animation:ani_h100 1.5s 5.8s; animation-fill-mode:both; }
.introBox .box { position:absolute; z-index:2; width:100%; height:100%; animation:ani_6 1.5s 5.0s; animation-fill-mode:both;  }
.introBox .intro-txt { position:absolute; left:0; top:50%; transform:translate(0, calc(-50% + 0.5px)); width:100%; text-align:center }
.introBox .txt-1 { color:#fff; font-size:80px; font-weight:800; line-height:1.3; letter-spacing:-0.07em; animation:intro_txt 4.0s 0.2s ease-in-out both; }
.introBox .txt-2 { opacity:0; animation:intro_up 1.0s 4.0s; animation-fill-mode:both;}
.introBox .txt-2 svg { width:410px; height:auto }
.introBox .txt-2 svg .logo-1 { fill:#fff }
@media screen and (max-width:1024px){
	.introBox .txt-1 { font-size:40px; }
	.introBox .txt-2 svg { width:250px; }
}
@media screen and (max-width:640px){
	.introBox .txt-1 { font-size:28px; }
	.introBox .txt-2 svg { width:180px; }
}


@keyframes intro_txt {
	0% { opacity:0; clip-path:polygon(0 0, 0 0, 0 100%, 0% 100%); }
	8% { opacity:0; }
	30% { opacity:1; }
	45% { opacity:1; clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%); }
	70% { opacity:1; }
	92% { opacity:0; }
	100% { opacity:0; clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
}

@keyframes intro_up {
	0% { margin-top:30px; opacity:0; }
	100% { margin-top:0; opacity:1; }
}
@keyframes ani_6 {
	0% {opacity:1;}
	100% {opacity:0;}
}



.main,
.main .section { overflow:hidden; }


#visual { position:relative; width:100%; height:100vh; overflow:hidden; background:#000 }
#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; }
#visual .swiper-container .swiper-slide .bg { z-index:2; position:absolute; left:0; top:0; width:100%; height:100%; opacity: 0.4; background:linear-gradient(0deg, rgba(0, 0, 0, 0.00) 81.22%, #000 100%), linear-gradient(270deg, rgba(0, 0, 0, 0.00) 0%, #00163C 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 .imgbox { opacity:0; }
#visual .swiper-container .swiper-slide .txtbox { color:#fff; position:absolute; top:310px; left:50%; transform:translate(-50%, 0); width:100%; max-width:1690px; z-index:15; }
#visual .swiper-container .swiper-slide .txtbox .logo { display:flex; align-items:center; }
#visual .swiper-container .swiper-slide .txtbox .logo span { display:inline-block; opacity:0; }
#visual .swiper-container .swiper-slide .txtbox .logo span:nth-child(1) { margin-right:6px; }
#visual .swiper-container .swiper-slide .txtbox .logo span:nth-child(2) { margin-right:17px; }
#visual .swiper-container .swiper-slide .txtbox .logo span:nth-child(3) { margin-right:18px; }
#visual .swiper-container .swiper-slide .txtbox .logo span:nth-child(4) { margin-right:12px; }
#visual .swiper-container .swiper-slide .txtbox .logo span:nth-child(8) { margin-right:8px; }
#visual .swiper-container .swiper-slide .txtbox .txt-1,
#visual .swiper-container .swiper-slide .txtbox .txt-2 { position:relative; overflow:hidden; }
#visual .swiper-container .swiper-slide .txtbox .txt-1 { margin-top:35px; }
#visual .swiper-container .swiper-slide .txtbox .txt-1 > span,
#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { opacity:0; font-size:53px; font-weight:800; color:#fff; line-height:1.3; display:block }
#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:20px; }
#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { opacity:0; font-size:23px; font-weight:700; color:rgba(255,255,255,0.5); line-height:1.3; display:block }
#visual .swiper-container .swiper-slide.swiper-slide-prev {}
#visual .swiper-container .swiper-slide.swiper-slide-active { opacity:1; }
#visual .swiper-container .swiper-slide.swiper-slide-active .logo span:nth-child(1) { animation:ani_5 0.4s 0.3s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .logo span:nth-child(2) { animation:ani_5 0.4s 0.7s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .logo span:nth-child(3) { animation:ani_5 0.4s 1.1s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .logo span:nth-child(4) { animation:ani_5 0.4s 1.5s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .logo span:nth-child(5) { animation:ani_5 0.4s 1.9s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .logo span:nth-child(6) { animation:ani_5 0.4s 2.3s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-1 > span { animation:ani_4 0.8s 2.6s; animation-fill-mode:both; }
#visual .swiper-container .swiper-slide.swiper-slide-active .txtbox .txt-2 > span { animation:ani_4 0.8s 3.2s; animation-fill-mode:both; }
.visual .swiper-btn { display:none }
.visual .control_box { position:absolute; top:266px; left:50%; transform:translateX(-50%); width:100%; max-width:1690px; z-index:20; display:flex; align-items:center; }
.visual .control_box .box { position:relative; display:flex; align-items:center; gap:0 10px; }
.visual .control_box .box .txt { color:rgba(255, 255, 255, 0.30); font-size:17px; font-weight:800; line-height:1.3; }
.visual .control_box .box .txt strong { color:#fff; font-weight:800; }
.visual .swiper-pagination { display:none; }
.visual .swiper-button-next { display:block; position:absolute; top:0; left:unset; right:0; transform:translate(0, 0); width:90px; height:100%; text-align:center; margin:0; }
.visual .swiper-button-next:before { content:""; display:block; width:0; height:100%; background:var(--mainColor); position:absolute; top:0; right:0; transition:all 0.3s; } 
.visual .swiper-button-next:hover:before { width:90px; }
.visual .btn-box { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);  z-index:5; transition:all 0.3s; opacity:0.5; }
.visual .btn-box span { width:52px; height:60px; display:flex; justify-content:center; align-items:center; background:#f1f1f1; background:url(/img/main/more_icon_line1.svg) center center no-repeat; clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); overflow:hidden; transition:all 0.3s; }
.visual .btn-box span:before { content:""; display:block; position:absolute; top:0; left:0; width:0; height:100%; background:#fff; transition:all 0.3s; }
.visual .swiper-button-next:hover span:before { width:100%; }
.visual .btn-box strong { margin-top:15px; color:#fff; font-size:16px; font-weight:800; line-height:1.3; display:block }
.visual .swiper-button-next:hover .btn-box { opacity:1; }
.visual .btn-box svg { width:auto; height:auto; }
.visual .btn-box svg { position:relative; z-index:3; }
.visual .btn-box svg path { transition:all 0.3s; }
.visual .swiper-button-next:hover svg path { stroke:var(--mainColor); }

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

#visual .scrolldown { position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:100%; max-width:1690px; z-index:30; display:flex }
#visual .scrolldown .txt { position:absolute; left:20px; bottom:40px; font-family: "Play", sans-serif; color:#fff; font-size:16px; font-weight:400; line-height:1.3; }
#visual .scrolldown .txt > span { font-family: "Play", sans-serif; font-weight:400; opacity:0; transition:all 0.3s; }
#visual .scrolldown .txt > span.over { opacity:1; }
#visual .scrolldown .line { position:absolute; left:0; bottom:0;  width:1px; height:120px; background:rgba(255,255,255,0.2); }
#visual .scrolldown .line:before { content:""; display:block; width:1px; height:20px; background:#fff; position:absolute; top:0; left:0; animation:scrollDown 2.5s infinite; }
#visual .scrolldown .txt {
    display: inline-block;
    animation: text_loop 1s infinite; /* 전체 텍스트가 끝난 후 반복 */
}

@media screen and (max-width:1730px){
	#visual .swiper-container .swiper-slide .txtbox,
	.visual .control_box,
	#visual .scrolldown { padding:0 20px; }
	#visual .scrolldown .txt { left:40px; }
	#visual .scrolldown .line { left:20px; }
}
@media screen and (max-width:1440px){
	#visual .swiper-container .swiper-slide .txtbox { top:290px; }
	#visual .swiper-container .swiper-slide .txtbox .logo span img { max-height:80px; }
	#visual .swiper-container .swiper-slide .txtbox .logo span:nth-child(2) img { max-height:15px; }
	#visual .swiper-container .swiper-slide .txtbox .logo span:nth-child(1) { margin-right:4px; }
	#visual .swiper-container .swiper-slide .txtbox .logo span:nth-child(2) { margin-right:12px; }
	#visual .swiper-container .swiper-slide .txtbox .logo span:nth-child(3) { margin-right:13px; }
	#visual .swiper-container .swiper-slide .txtbox .logo span:nth-child(4) { margin-right:10px; }
	#visual .swiper-container .swiper-slide .txtbox .logo span:nth-child(8) { margin-right:6px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-1 { margin-top:35px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span,
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { font-size:45px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:15px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:22px; }
	.visual .control_box { top:250px; }
}
@media screen and (max-width:1024px){
	#visual .swiper-container .swiper-slide .txtbox .logo span img { max-height:65px; }
	#visual .swiper-container .swiper-slide .txtbox .logo span:nth-child(2) img { max-height:12px; }
	#visual .swiper-container .swiper-slide .txtbox .logo span:nth-child(1) { margin-right:2px; }
	#visual .swiper-container .swiper-slide .txtbox .logo span:nth-child(2) { margin-right:10px; }
	#visual .swiper-container .swiper-slide .txtbox .logo span:nth-child(3) { margin-right:11px; }
	#visual .swiper-container .swiper-slide .txtbox .logo span:nth-child(4) { margin-right:8px; }
	#visual .swiper-container .swiper-slide .txtbox .logo span:nth-child(8) { margin-right:4px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-1 { margin-top:20px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span,
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { font-size:35px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:10px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:20px; }
	.visual .control_box .box .txt { font-size:16px; }
	#visual .scrolldown .txt { font-size:15px; }
	#visual .scrolldown .line { height:100px; }
	#visual .scrolldown .line:before { height:15px; }
	.visual .swiper-button-next { width:80px; } 
	.visual .swiper-button-next:hover:before { width:80px; }
	.visual .btn-box span { width:40px; height:46px; background-size:100% auto; }
	.visual .btn-box span svg { width:15px; height:auto }
	.visual .btn-box strong { margin-top:12px; font-size:15px; }
}
@media screen and (max-width:640px){
	#visual .swiper-container .swiper-slide .txtbox { top:230px; padding-right:80px; }
	#visual .swiper-container .swiper-slide .txtbox .logo span img { max-height:50px; }
	#visual .swiper-container .swiper-slide .txtbox .logo span:nth-child(2) img { max-height:10px; }
	#visual .swiper-container .swiper-slide .txtbox .logo span:nth-child(1) { margin-right:0px; }
	#visual .swiper-container .swiper-slide .txtbox .logo span:nth-child(2) { margin-right:8px; }
	#visual .swiper-container .swiper-slide .txtbox .logo span:nth-child(3) { margin-right:9px; }
	#visual .swiper-container .swiper-slide .txtbox .logo span:nth-child(4) { margin-right:6px; }
	#visual .swiper-container .swiper-slide .txtbox .logo span:nth-child(8) { margin-right:2px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-1 { margin-top:15px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span,
	#visual .swiper-container .swiper-slide .txtbox .txt-1 > span { font-size:26px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 { margin-top:5px; }
	#visual .swiper-container .swiper-slide .txtbox .txt-2 > span { font-size:17px; }
	.visual .control_box { top:200px; }
	.visual .control_box .box .txt { font-size:15px; bottom:45px; }
	#visual .scrolldown .txt { font-size:14px; left:35px; }
	#visual .scrolldown .line { height:80px; }
	#visual .scrolldown .line:before { height:10px; }
	.visual .swiper-button-next { width:60px; } 
	.visual .swiper-button-next:hover:before { width:60px; }
	.visual .btn-box span { width:35px; height:40px; }
	.visual .btn-box span svg { width:12px; height:auto }
	.visual .btn-box strong { margin-top:8px; font-size:14px; }
}

@keyframes scrollDown {
    0% { top:0px; }
    70% { top:105%; }
    100% { top:105%; }
}
@keyframes scroll_txt {
    0% { opacity:0 }
    100% { opacity:1 }
}
@keyframes text_loop {
    0%, 80% { opacity: 1; } /* 전체 글자가 나타난 후 약간 유지 */
    100% { opacity: 1; }    /* 반복 시작 */
}


.title-box {  }
.title-box h3 { overflow:hidden }
.title-box h3 span { display:block; color:#fff; font-size:50px; font-weight:700; line-height:1.3; letter-spacing: -0.05em; }
@media screen and (max-width:1440px){
	.title-box h3 span { font-size:40px; }
}
@media screen and (max-width:1024px){
	.title-box h3 span { font-size:32px; }
}
@media screen and (max-width:640px){
	.title-box h3 span { font-size:23px; }
}

/* animation */
.title-box h3 span { opacity:0; }
.title-box.subOn h3 span { animation:ani_3 0.8s 0.01s; animation-fill-mode:both; }

section.bg { background:#151920; transition:all 0.3s }
section.bg.on { background:#fff; }

/* services */
.services-box { padding:200px 0; } 
.services-box .title-box { display:flex; justify-content:space-between; align-items:flex-end; }
.services-box .title-box .btn_more a { display:flex; align-items:center; color:#fff; font-size:20px; font-weight:400; line-height:1.3; opacity:0.5; transition:all 0.3s; }
.services-box .title-box .btn_more a:hover span svg path { stroke:#151920; }
.services-box .title-box .btn_more a:hover { opacity:1; }
.services-box .listbox { margin-top:60px; display:flex; flex-wrap:wrap; gap:15px; }
.services-box .listbox .sbox { display:flex; flex-wrap:wrap; gap:15px; }
.services-box .listbox .box { position:relative; overflow:hidden; }
.services-box .listbox .imgbox img { display:block; max-width:100%; }
.services-box .listbox .txtbox { position:absolute; left:0; top:0; width:100%; height:100%; padding:60px 40px; transition:all 0.3s; opacity:0; }
.services-box .listbox .txtbox:before { content:""; display:block; position:absolute; top:0; left:0; width:0; height:100%; background:var(--mainColor); transition:all 0.3s; }
.services-box .listbox .txtbox dl { position:relative; display:flex; flex-direction:column; justify-content:space-between; height:100%; }
.services-box .listbox .txtbox dt { color:#fff; font-size:32px; font-weight:700; line-height:1.5; }
.services-box .listbox .txtbox dd { color:#fff; font-size:20px; font-weight:300; line-height:1.6; }
.services-box .listbox .txtbox .btn_more { position:absolute; right:40px; top:60px; }
.services-box .listbox .txtbox .btn_more a:hover svg path { stroke:var(--mainColor); }
.services-box .listbox .box:hover .txtbox { opacity:1; }
.services-box .listbox .box:hover .txtbox:before { width:100%; opacity:1; }
@media screen and (max-width:1730px){
	.services-box .listbox .box { width:calc((100% - 15px) / 2 ); }
	.services-box .listbox .sbox { width:calc((100% - 15px) / 2 ); }
	.services-box .listbox .sbox .box { width:calc((100% - 15px) / 2); }
}
@media screen and (max-width:1440px){
	.services-box { padding:150px 0; } 
	.services-box .listbox { margin-top:50px; }
	.services-box .listbox .txtbox { padding:40px 20px; }
	.services-box .listbox .txtbox dt { font-size:28px; }
	.services-box .listbox .txtbox dd { font-size:18px; }
	.services-box .listbox .txtbox .btn_more { right:20px; top:40px; }
}
@media screen and (max-width:1280px){
	.services-box .listbox { margin-top:40px; gap:10px; }
	.services-box .listbox .sbox { gap:10px; }
	.services-box .listbox .box { width:calc((100% - 10px) / 2 ); }
	.services-box .listbox .sbox { width:calc((100% - 10px) / 2 ); }
	.services-box .listbox .sbox .box { width:calc((100% - 10px) / 2); }
	.services-box .listbox .txtbox { padding:30px 20px; }
	.services-box .listbox .txtbox dt { font-size:25px; }
	.services-box .listbox .txtbox dd { font-size:17px; }
	.services-box .listbox .txtbox .btn_more { top:30px; }
}
@media screen and (max-width:1024px){
	.services-box { padding:100px 0; }
	.services-box .title-box .btn_more a { font-size:18px; }
	.services-box .listbox { margin-top:30px; gap:5px; }
	.services-box .listbox .sbox { gap:5px; }
	.services-box .listbox .box { width:calc((100% - 5px) / 2 ); }
	.services-box .listbox .sbox { width:calc((100% - 5px) / 2 ); }
	.services-box .listbox .sbox .box { width:calc((100% - 5px) / 2); }
	.services-box .listbox .txtbox { padding:20px 10px; }
	.services-box .listbox .txtbox dt { font-size:19px; }
	.services-box .listbox .txtbox dd { font-size:16px; }
	.services-box .listbox .txtbox .btn_more { top:20px; right:10px }
	.services-box .listbox .box .txtbox,
	.services-box .listbox .box:hover .txtbox { opacity:1; }
	.services-box .listbox .box .txtbox:before,
	.services-box .listbox .box:hover .txtbox:before { width:100%; opacity:0.5; background:#000; /*background:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0) 100%);*/ }
	.services-box .listbox .txtbox .btn_more a svg path { stroke:var(--mainColor); }
	.services-box .listbox .txtbox .btn_more a span:before { width:100%; }
}
@media screen and (max-width:860px){
	.services-box .listbox .box { width:100%; }
	.services-box .listbox .sbox { width:100%; }
}
@media screen and (max-width:640px){
	.services-box { padding:80px 0; }
	.services-box .title-box .btn_more a { font-size:16px; }
	.services-box .listbox { margin-top:20px; }
	.services-box .listbox .txtbox { padding:10px 5px; }
	.services-box .listbox .txtbox dt { font-size:17px; }
	.services-box .listbox .txtbox dd { font-size:15px; }
	.services-box .listbox .txtbox dd br { display:none }
	.services-box .listbox .txtbox .btn_more { top:10px; right:5px }
}
@media screen and (max-width:480px){
	.services-box .listbox .txtbox dt { font-size:16px; }
	.services-box .listbox .txtbox dd { font-size:14px; }
}

/* animation */
.services-box .listbox .box { opacity:0; }
.services-box .listbox.subOn .mbox1 { animation:ani_1 1.0s 0.3s; animation-fill-mode:both; }
.services-box .listbox.subOn .mbox2 { animation:ani_4 1.0s 0.6s; animation-fill-mode:both; }
.services-box .listbox.subOn .mbox3 { animation:ani_2 1.0s 0.9s; animation-fill-mode:both; }
.services-box .listbox.subOn .mbox4 { animation:ani_1 1.0s 0.9s; animation-fill-mode:both; }
.services-box .listbox.subOn .mbox5 { animation:ani_3 1.0s 0.6s; animation-fill-mode:both; }
.services-box .listbox.subOn .mbox6 { animation:ani_2 1.0s 0.6s; animation-fill-mode:both; }

.project-box { position:relative; }
.project-box .txt-left { position:absolute; right:28px; top:-240px; transform:rotate(-90deg); transform-origin:center right; color:rgba(225,255,255,0.04); font-size:71px; font-weight:900; line-height:1.3; letter-spacing:-0.09em; transition:all 0.3s; }
.project-box .box { padding:0 65px; display:flex; position:relative; z-index:2}
.project-box .title-box { width:722px; }
.project-box .title-box .btn_more { margin-top:30px; display:inline-block; }
.project-box .title-box .btn_more a { display:flex; align-items:center; color:#fff; font-size:20px; font-weight:400; line-height:1.3; opacity:0.5; transition:all 0.3s; }
.project-box .title-box .btn_more a:hover span svg path { stroke:#151920; }
.project-box .title-box .btn_more a:hover { opacity:1; }
.project-box .title-box .imgbox { margin-top:90px; position:relative; clip-path:polygon(0 0, 0 0, 0 100%, 0% 100%); transition:all 0.8s 0.1s; }
.project-box .title-box .imgbox img { max-width:100%; }
.project-box .listbox { position:relative; width:calc(100% - 722px); border-top:1px solid #fff; padding-bottom:22px; transition:all 0.3s; }
.project-box .listbox .slick-slide li { position:relative; border-bottom:1px solid #fff; padding:40px 100px 40px 0; transition:all 0.3s; }
.project-box .listbox .txt-1 { color:#fff; font-size:23px; font-weight:700; line-height:1.3;transition:all 0.3s;  }
.project-box .listbox .txt-1 strong { font-weight:700; }
.project-box .listbox a:hover .txt-1 { color:var(--mainColor); }
.project-box .listbox .txt-2 { margin-top:20px; color:rgba(255, 255, 255, 0.60); font-size:19px; font-weight:300; line-height:1.3; transition:all 0.3s; }
.project-box .listbox .date { position:absolute; right:0; bottom:40px; color:rgba(255, 255, 255, 0.30); font-size:16px; font-weight:300; line-height:1.3; transition:all 0.3s; }
.project-box .listbox .slick-dots { position:absolute; left:0; bottom:-75px; color:rgba(255, 255, 255, 0.30); font-size:20px; font-weight:700; line-height:1.3; transition:all 0.3s; }
.project-box .listbox .slick-dots li { display:none; opacity:0; transition:all 0.3s; }
.project-box .listbox .slick-dots li.slick-active{ display:block; opacity:1; }
.project-box .listbox .slick-dots li span { color:#fff; margin-right:3px; transition:all 0.3s; }
.project-box .listbox .slick-dots li strong { font-weight:700; margin-left:3px; }
.project-box .listbox .btn_pn { margin-top:50px; display:flex; justify-content:flex-end; } 
.project-box .listbox .btn_pn button { border:none; outline:none; background:none; }
.project-box .listbox .btn_pn button span svg { position:relative; z-index:3; }
.project-box .listbox .btn_pn button span { position:relative; width:60px; height:70px; display:flex; justify-content:center; align-items:center; background:#f1f1f1; clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); overflow:hidden; transition:all 0.3s; }
.project-box .listbox .btn_pn .btn_p_prev { margin-right:15px; }
.project-box .listbox .btn_pn .btn_p_prev span { background:none; border:none; transform:rotate(180deg); }
.project-box .listbox .btn_pn .btn_p_next span svg path { stroke:#151920; transition:all 0.3s; }
.project-box .listbox .btn_pn .btn_p_next span:before { content:""; display:block; position:absolute; top:0; left:0; width:0; height:100%; background:#151920; transition:all 0.3s; }
.project-box .listbox .btn_pn .btn_p_next:hover span svg path { stroke:#fff; }
.project-box .listbox .btn_pn .btn_p_next:hover span:before { width:100%; opacity:1; }
.project-box .bot-imgbox { margin-top:-60px; position:relative; height:352px; background:url(/img/main/project_img02.jpg) no-repeat center / cover; opacity:0; }
.project-box .bot-imgbox > div { height:100%; }
.project-box .bot-imgbox .txtbox { width:100%; height:100%; display:flex; flex-direction:column; align-items:flex-end; justify-content:center; text-align:right; }
.project-box .bot-imgbox .txtbox .txt-1 { color:rgba(255,255,255,0.5); font-size:28px; font-weight:800; line-height:1.3; letter-spacing:-0.05em; }
.project-box .bot-imgbox .txtbox .txt-2 { margin-top:15px; color:#fff; font-size:70px; font-weight:800; line-height:1.3; letter-spacing:-0.07em; }
.project-box .bot-imgbox .txtbox .txt-2 strong { color:var(--mainColor); font-weight:800; }

section.on .project-box .txt-left { color:#151920; opacity:0.05; }
section.on .project-box .title-box h3 span { color:#111; }
section.on .project-box .title-box .btn_more a { color:#222; opacity:1 }
section.on .project-box .title-box .btn_more span { background:#f1f1f1; }
section.on .project-box .title-box .btn_more span:before { background:#151920; }
section.on .project-box .title-box .btn_more a span svg path { stroke:#151920; }
section.on .project-box .title-box .btn_more a:hover span svg path { stroke:#fff; }
section.on .project-box .listbox { border-top:1px solid #111; }
section.on .project-box .listbox .slick-slide li { border-bottom:1px solid #111; }
section.on .project-box .listbox .txt-1 { color:#111; }
section.on .project-box .listbox a:hover .txt-1 { color:var(--mainColor); }
section.on .project-box .listbox .txt-2 { color:#555; }
section.on .project-box .listbox .date { color:#ccc; }
section.on .project-box .listbox .slick-dots { color:#ccc; }
section.on .project-box .listbox .slick-dots li span { color:#111; }
@media screen and (max-width:1730px){
	.project-box .txt-left { right:22px; top:-235px; font-size:56px; }
	.project-box .title-box { width:45%; padding-right:80px; }
	.project-box .listbox { width:calc(100% - 45%); }
}
@media screen and (max-width:1440px){
	.project-box .txt-left { right:19px; top:-180px; font-size:50px; }
	.project-box .title-box .imgbox { margin-top:70px; }
	.project-box .listbox { margin-bottom:80px; padding-bottom:10px; }
	.project-box .listbox .slick-slide li { padding:30px 100px 30px 0; }
	.project-box .listbox .txt-1 { font-size:22px; }
	.project-box .listbox .txt-2 { margin-top:20px; font-size:18px; }
	.project-box .listbox .date { bottom:30px; font-size:15px; }
	.project-box .listbox .slick-dots { font-size:18px; }
	.project-box .listbox .btn_pn { margin-top:40px; }
	.project-box .listbox .btn_pn button span { width:50px; height:60px; background-size:100% auto; }
	.project-box .listbox .btn_pn button span svg { width:15px; height:auto }
	.project-box .bot-imgbox { margin-top:-50px; height:340px; }
	.project-box .bot-imgbox .txtbox .txt-1 { font-size:24px; }
	.project-box .bot-imgbox .txtbox .txt-2 { margin-top:12px; font-size:58px; }
}
@media screen and (max-width:1280px){
	.project-box .listbox .slick-slide li { padding:20px 90px 20px 0; }
	.project-box .listbox .txt-1 { font-size:21px; }
	.project-box .listbox .txt-2 { margin-top:15px; font-size:17px; }
	.project-box .bot-imgbox { height:310px; }
	.project-box .bot-imgbox .txtbox .txt-1 { font-size:20px; }
	.project-box .bot-imgbox .txtbox .txt-2 { margin-top:10px; font-size:46px; }
}
@media screen and (max-width:1024px){
	.project-box .txt-left { right:13px; top:-120px; font-size:32px; }
	.project-box .box { padding:0; flex-wrap:wrap;  }
	.project-box .title-box { display:flex; justify-content:space-between; align-items:flex-end; }
	.project-box .title-box .btn_more { margin-top:10px; }
	.project-box .title-box { width:100%; padding-right:0; }
	.project-box .listbox { width:100%; margin-top:40px; }
	.project-box .title-box .btn_more a { font-size:18px; }
	.project-box .title-box .imgbox { max-width:320px; position:absolute; left:0; bottom:-100px; display:none }
	.project-box .listbox { margin-bottom:0; padding-bottom:0; }
	.project-box .listbox .txt-1 { font-size:20px; }
	.project-box .listbox .txt-2 { margin-top:15px; font-size:16px; }
	.project-box .listbox .slick-dots { bottom:-65px; font-size:16px; }
	.project-box .listbox .btn_pn button span { width:40px; height:50px; background-size:100% auto; }
	.project-box .listbox .btn_pn button span svg { width:15px; height:auto }
	.project-box .bot-imgbox { margin-top:40px; height:280px; }
	.project-box .bot-imgbox .txtbox .txt-1 { font-size:18px; }
	.project-box .bot-imgbox .txtbox .txt-2 { margin-top:10px; font-size:32px; }
}
@media screen and (max-width:640px){
	.project-box .txt-left { right:8px; top:-85px; font-size:20px; }
	.project-box .title-box .btn_more { margin-top:10px; }
	.project-box .title-box .btn_more a { font-size:16px; }
	.project-box .listbox { margin-top:20px; }
	.project-box .listbox .slick-slide li { padding:10px 80px 10px 0; }
	.project-box .listbox .txt-1 { font-size:17px; }
	.project-box .listbox .txt-2 { margin-top:12px; font-size:15px; }
	.project-box .listbox .slick-dots { bottom:-45px; font-size:15px; }
	.project-box .listbox .btn_pn { margin-top:20px; }
	.project-box .listbox .btn_pn button span { width:35px; height:45px; }
	.project-box .listbox .btn_pn button span svg { width:12px; height:auto }
	.project-box .bot-imgbox { margin-top:30px; height:200px; }
	.project-box .bot-imgbox .txtbox .txt-1 { font-size:16px; }
	.project-box .bot-imgbox .txtbox .txt-2 { margin-top:10px; font-size:20px; }
}
@media screen and (max-width:480px){
	.project-box .title-box .btn_more a { width:50px; overflow:hidden; text-indent:-9999em; }
}

/* animation */
.project-box .title-box .btn_more { opacity:0; }
.project-box .title-box.subOn .btn_more { animation:ani_4 0.7s 0.8s; animation-fill-mode:both; }
.project-box .title-box .imgbox.on { opacity:1; clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%); transition:all 1.0s 0.8s; }
.project-box .bot-imgbox.subOn { opacity:1; animation:ani_c100 1.5s 0.8s; animation-fill-mode:both; }
.project-box .bot-imgbox .txtbox .txt-1,
.project-box .bot-imgbox .txtbox .txt-2 { opacity:0; }
.project-box .bot-imgbox.subOn .txtbox .txt-1,
.project-box .bot-imgbox.subOn .txtbox .txt-2 { animation:ani_4 1.0s 1.8s; animation-fill-mode:both; }
.project-box .listbox { opacity:0; }
.project-box .listbox.subOn { animation:ani_3 0.7s 0.8s; animation-fill-mode:both; }


.notice-box { padding:200px 0; }
.notice-box .title-box h3 span { color:#111; }
.notice-box .title-box { display:flex; justify-content:space-between; align-items:flex-end; }
.notice-box .title-box .btn_more a { display:flex; align-items:center; color:#222; font-size:20px; font-weight:400; line-height:1.3; transition:all 0.3s; }
.notice-box .title-box .btn_more span { background:#f1f1f1; }
.notice-box .title-box .btn_more span:before { background:#151920; }
.notice-box .title-box .btn_more a span svg path { stroke:#151920; }
.notice-box .title-box .btn_more a:hover span svg path { stroke:#fff; }
.notice-box .listCont { margin-top:60px;}
.notice-box .listCont .listbox .list { position:relative; width:100%; overflow:hidden }
.notice-box .listCont .slider { position:relative; }
.notice-box .listCont .listbox .list .swiper-slide { position:relative; height:258px; background:#f7f7f7; border:1px solid #f7f7f7; transition:all 0.3s; }
.notice-box .listCont .listbox .list .swiper-slide a { display:block; padding:45px; }
.notice-box .listCont .listbox .list .swiper-slide .txt { color:#222; font-size:21px; font-weight:600; line-height:1.6; transition:all 0.3s; text-overflow:ellipsis; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }
.notice-box .listCont .listbox .list .swiper-slide .txt strong { font-weight:600; }
.notice-box .listCont .listbox .list .swiper-slide .date { position:absolute; bottom:45px; left:45px; color:#ccc; font-size:17px; font-weight:800; line-height:1.3; }
.notice-box .listCont .listbox .list .swiper-slide:hover { border:1px solid var(--mainColor); background:#fff; }
.notice-box .listCont .listbox .list .swiper-slide:hover .txt { color:var(--mainColor); }
.notice-box .listCont .listbox .list .btn-box { margin-top:80px; display:flex; display:flex; justify-content:center; align-items:center; text-align:center }
.notice-box .listCont .listbox .list .btn { cursor:pointer; background:url(/img/main/btn_pn.svg) center center no-repeat; overflow:hidden; text-indent:-9999em; width:30px; height:30px; }
.notice-box .listCont .listbox .list .btn_next { transform:rotate(180deg); }
.notice-box .listCont .listbox .list .swiper-pagination-n { width:auto; margin:0 60px; padding:0; display:flex; justify-content:center; align-items:center;}
.notice-box .listCont .listbox .list .swiper-pagination-n span { margin:0 5px; padding:0; top:0; width:10px; height:10px; display:inline-block; border-radius:0; background:#ddd; opacity:1; outline:none; border:none }
.notice-box .listCont .listbox .list .swiper-pagination-n .swiper-pagination-bullet-active { background:#151920; } 

@media screen and (max-width:1440px){
	.notice-box { padding:150px 0; }
	.notice-box .listCont { margin-top:50px;}
	.notice-box .listCont .listbox .list .swiper-slide a { padding:40px; }
	.notice-box .listCont .listbox .list .swiper-slide .txt { font-size:20px; }
	.notice-box .listCont .listbox .list .swiper-slide .date { bottom:40px; left:40px; }
	.notice-box .listCont .listbox .list .btn-box { margin-top:60px; }
}
@media screen and (max-width:1280px){
	.notice-box .listCont { margin-top:40px;}
	.notice-box .listCont .listbox .list .swiper-slide a { height:240px; padding:30px; }
	.notice-box .listCont .listbox .list .swiper-slide .txt { font-size:19px; }
	.notice-box .listCont .listbox .list .swiper-slide .date { bottom:30px; left:30px; font-size:16px; }
	.notice-box .listCont .listbox .list .btn-box { margin-top:50px; }
	.notice-box .listCont .listbox .list .btn { width:30px; height:30px; }
	.notice-box .listCont .listbox .list .swiper-pagination-n { margin:0 40px; }
}
@media screen and (max-width:1024px){
	.notice-box { padding:100px 0; }
	.notice-box .title-box .btn_more a { font-size:18px; }
}
@media screen and (max-width:640px){
	.notice-box { padding:80px 0; }
	.notice-box .title-box .btn_more a { font-size:16px; }
	.notice-box .listCont { margin-top:30px;}
	.notice-box .listCont .listbox .list .swiper-slide a { height:200px; padding:20px; }
	.notice-box .listCont .listbox .list .swiper-slide .txt { font-size:18px; }
	.notice-box .listCont .listbox .list .swiper-slide .date { bottom:20px; left:20px; font-size:15px; }
	.notice-box .listCont .listbox .list .btn-box { margin-top:40px; }
	.notice-box .listCont .listbox .list .btn { width:25px; height:25px; background-size:25px auto; }
	.notice-box .listCont .listbox .list .swiper-pagination-n { margin:0 20px; }
	.notice-box .listCont .listbox .list .swiper-pagination-n span { margin:0 4px; width:6px; height:6px; }
}

/* animation */
.notice-box .listCont { opacity:0; }
.notice-box.subOn .listCont { animation:ani_4 0.8s 0.8s; animation-fill-mode:both; }