@charset "utf-8";

body main {}
body main.d-page {font-family:var(--f_NanumSquare);}
body main.d-page .cover {position:absolute; left:0; top:0; bottom:0; right:0; background:rgba(0,0,0,.5);}

main .part1 {height:calc(100vh - 100px); position:relative;}
main .part1 .visualImgSwiper {width:100%; height:100%; position:absolute; left:0; top:0; z-index:-1;}

main .part1 .visualSwiper {height:100%;}
main .part1 .visualSwiper .swiper-slide {display: flex; height: 100%; color: #fff; flex-direction: column; justify-content: center;opacity:0 !important;}
main .part1 .visualSwiper .swiper-slide-active {opacity:1 !important;}
main .part1 .visualSwiper .subHead {font-size:var(--fs18);}
main .part1 .visualSwiper h2 {padding:35px 0 100px; color:#fff; font-size:var(--fs48); font-weight:800; line-height:1.2;}
main .part1 .visualSwiper h2 span {display:block; position:relative;}
main .part1 .visualSwiper h2 span:before {width:240px; height:45px; background:var(--red); right:calc(100% + 20px); top:4px; position:absolute; display:block; content:'';}
main .part1 .visualSwiper .subTxt {padding:17px 0 0;  font-size:var(--fs18); font-weight:700; line-height:1.8; position:relative;}
main .part1 .visualSwiper .subTxt:before {width:80px; height:1px; background:#fff; left:0; top:0; position:absolute; content:''; display:block;}
main .part1 .visualSwiper .swiper-pagination {position:absolute; left:auto; right:0; bottom:50%; transform:translateY(50%);}
main .part1 .visualSwiper .swiper-pagination-bullet {
	width:auto; height:auto; border-radius:0; opacity:1;
	margin:5px 0; padding:30px; color:#fff; font-size:var(--fs18); font-weight:800;
	background:rgba(28, 43, 80, .8); display:block; line-height:1; 
	border: 1px solid rgba(255, 255, 255, .5); backdrop-filter: blur(5px);
}
main .part1 .visualSwiper .swiper-pagination-bullet-active {background-color:var(--red); border-color:transparent;}

main .part2 {padding:100px 0;}
main .part2 .wrap {}
main .part2 .tit {text-align:center;}
main .part2 .tit h3 {font-size:var(--fs50); font-weight:800; color:var(--red); line-height:1;}
main .part2 .tit p {padding:20px 0 70px; font-size:var(--fs18); font-weight:700; line-height:1.4;}
main .part2 .list {gap:10px; display:flex; justify-content:space-between;}
main .part2 .list .item {width:300px}
main .part2 .list .item .img {width:100%; aspect-ratio:3/4; box-shadow: 20px 20px 20px 0px rgba(0, 0, 0, .2);}
main .part2 .list .item .img img {}
main .part2 .list .item .txt {padding:50px 0 0;}
main .part2 .list .item .txt span {font-size:var(--fs12); font-weight:800; line-height:1.4;}
main .part2 .list .item .txt h4 {padding:3px 0 20px; font-size:var(--fs30); font-weight:800; line-height:1.4; transition:var(--ani);}
main .part2 .list .item .txt p {color:#555;}
main .part2 .list .item:hover .txt h4 {color:var(--red);}

main .part3 {padding:100px 0; background:var(--blue2); position:relative; overflow:hidden;}
main .part3:before {width:100px; height:100%; background:var(--red); left:0; top:0; position:absolute; display:block; content:'';}
main .part3 .bgIcon {position:absolute; right:0; top:0;}
main .part3 .wrap {display:flex; gap:5.3vw; position:relative;}
main .part3 .news {width:calc(100% - 650px - 5.3vw); color: #FFF;}
main .part3 .news .tit {display:flex; justify-content:space-between; align-items:center;}
main .part3 .news .tit h3 { color: #FFF; font-size: var(--fs50); font-weight: 800; line-height:1;text-transform: uppercase;}
main .part3 .news .tit ul {display:flex;}
main .part3 .news .tit ul li {padding-left:10px; margin-left:10px; position:relative; line-height:1;}
main .part3 .news .tit ul li+li:before {width:1px; height:12px; background: rgba(255, 255, 255, .3); left:0; top:calc(50% - 6px); position:absolute; display:block; content:'';}
main .part3 .news .tit ul li a {font-size:var(--fs18); font-weight:700; line-height:1;}
main .part3 .news .list {padding:30px 0 0; gap:15px; display:flex; flex-direction:column;}
main .part3 .news .item {font-size:var(--fs18); display:flex; width:100%; justify-content:space-between; line-height:1;}
main .part3 .news .item span {width:50px; font-weight:800;}
main .part3 .news .item .txt {width:calc(100% - 200px); flex-grow:1;}
main .part3 .news .item .date {width:150px; text-align:right;}

main .part3 .refer {gap:20px; display:flex; align-items:center; width:650px; background:var(--red);}
main .part3 .refer .tit {padding:50px; color:#fff; }
main .part3 .refer .tit h3 {color: #FFF; font-size:var(--fs36); font-weight:800; line-height:1; text-transform: uppercase;}
main .part3 .refer .tit div {padding:28px 0 0; gap:22px;  display:flex; justify-content:space-between;}
main .part3 .refer .tit img {}
main .part3 .refer .tit p {font-size:var(--fs14); font-weight:700; line-height:1.6;}
main .part3 .refer .list {flex-grow:1;}
main .part3 .refer .item {display:flex; gap:18px; color:#FFF; font-size:var(--fs18); align-items:center; line-height:1;}
main .part3 .refer .item+.item {margin-top:28px; padding-top:28px;  border-top:1px solid rgba(255, 255, 255, .3);}
main .part3 .refer .item span {font-size:var(--fs40); font-weight:800; color:#000;}

main .part4 {padding:50px 0;} 
main .part4 .wrap {display:flex; align-items:center; justify-content:space-between;}
main .part4 .tit {padding:20px 110px 20px 30px; color:#fff; background:var(--blue2) url(../../images/main/qnaArrow.svg)calc(100% - 30px) 42% no-repeat; font-size:var(--fs18); font-weight:700; line-height:1; border-radius:100px;}
main .part4 .tit:hover {background-color:var(--red);}
main .part4 .list {display:flex; gap:50px;}
main .part4 .list a {
	gap:10px; display:flex; align-items:center;
	font-size:var(--fs18); font-weight:700; line-height:1; white-space:nowrap
}


/* ************************ 태블릿 이하(~991) ************************ */
@media (max-width: 1024px) {
	
	main .part1 {padding:100px 20px;height:auto;}
	
	main .part1 .visualSwiper .swiper-slide {padding-right:160px;}
	main .part1 .visualSwiper h2 {padding:20px 0 70px;}
	main .part1 .visualSwiper .subTxt:before {width:70px;}
	main .part1 .visualSwiper .swiper-pagination-bullet {padding:25px;}
	
	main .part2 {padding:80px 20px}
	main .part2 .tit p {padding:20px 0 40px;}
	main .part2 .list .item .txt {padding:30px 0 0;}
	main .part2 .list .item .txt h4 {padding:3px 0 16px;}
	
	main .part3 {padding:80px 20px;}
	main .part3:before {display:none;}
	main .part3 .bgIcon {display:none;}
	main .part3 .wrap {flex-direction:column;}
	
	main .part3 .news {width:100%;}
	main .part3 .news .list {padding:25px 0 0;}
	
	main .part3 .refer {width:100%; gap:30px;}
	main .part3 .refer .tit {width:60%; padding:40px;}
	
	
	main .part4 {padding:50px 20px;}
	main .part4 .wrap {gap:20px; flex-direction:column; align-items:start;}
	main .part4 .list {width:100%; gap:10px 20px; justify-content:; flex-wrap:wrap;}
	
	
	
	
	
	
	
	
	
}


/* ************************ 모바일 ************************ */
@media (max-width: 767px) {
	
	
	main .part1 {padding:40px 20px;}
	main .part1 .visualSwiper {}
	main .part1 .visualSwiper .swiper-slide {padding:0 0 60px; }
	main .part1 .visualSwiper h2 {padding:14px 0 30px;}
	main .part1 .visualSwiper .subTxt:before {width:50px;}
	main .part1 .visualSwiper .swiper-pagination {left:0; bottom:0; display:flex; gap:2px; flex-wrap:wrap; transform:none;}
	main .part1 .visualSwiper .swiper-pagination-bullet {margin:0; padding:14px 20px;}
	
	
	main .part1 .wrap {flex-direction:column; align-items:start;}
	main .part1 .tit {padding-right:0;}
	main .part1 .tit h2 {padding:14px 0 30px;}
	main .part1 .tit h2 span {display:inline-block;}
	main .part1 .list {padding:30px 0 0; display:flex; gap:5px; position:static; transform:none; flex-wrap:wrap;}
	main .part1 .list li+li {padding:0;}
	
	
	main .part2 {padding:50px 20px;}
	main .part2 .wrap {}
	main .part2 .tit {}
	main .part2 .tit h3 {}
	main .part2 .tit p {padding:14px 0 30px;}
	main .part2 .list {gap:20px 10px; flex-wrap:wrap;}
	main .part2 .list .item {width:calc((100% - 10px)/2);}
	main .part2 .list .item .img {}
	main .part2 .list .item .img img {}
	main .part2 .list .item .txt {padding:20px 0 0;}
	main .part2 .list .item .txt span {}
	main .part2 .list .item .txt h4 {padding:3px 0 12px;}
	main .part2 .list .item .txt p {}
	
	main .part3 {padding:50px 20px;}
	main .part3 .wrap {flex-direction:column;}
	
	main .part3 .news {width:100%;}
	main .part3 .news .tit {display:block;}
	main .part3 .news .list {padding:25px 0 0;}
	main .part3 .news .tit ul {padding:12px 0 0;}
	main .part3 .news .tit ul li:first-child {margin:0; padding:0;}
	main .part3 .news .item span {width:40px;}
	main .part3 .news .item .txt {width:calc(100% - 140px);}
	main .part3 .news .item .date {width:100px;}
	
	main .part3 .refer {gap:0; flex-direction:column; align-items:start;}
	main .part3 .refer .tit {width:100%; padding:30px;}
	main .part3 .refer .tit div {padding:20px 0 0; gap:20px; align-items:center; justify-content:left;}
	main .part3 .refer .tit img {width:40px;}
	main .part3 .refer .list {width:100%; padding:30px; padding-top:0;}
	main .part3 .refer .item+.item {margin-top:20px; padding-top:20px;}
	
	
	main .part4 {padding:30px 20px;}
	main .part4 .wrap {gap:10px;}
	main .part4 .tit {padding:14px 75px 14px 20px; background-position:calc(100% - 20px) 42%; background-size:40px;}
	main .part4 .list a img {width:52px;}
	
	
	
	
	
	
	
	
	
}