@charset "utf-8";

/*
 * main.css
 * 메인영역 삽입 추가하시면됩니다. 아래 커스텀진행하세요.
 *
 * 1) main visual
 * 
 */
 
/* 1) main visual */
[data-mainVisual]{position:relative; height:100vh; height:calc(var(--vh, 1vh) * 100);}
[data-mainVisual] .visual-list{height:100%;}
	/* text */
[data-visual="text"]{color: var(--color-white); display:flex; flex-direction:column; position:absolute; top:50%; left:50%; z-index:5; max-width: calc(var(--inr) * 1rem); width: calc(var(--inr-width) * 100%); box-sizing:content-box; transform:translate(-50%, -50%);}
[data-visual="text"] em {font-size: 70rem; font-weight:600;}
[data-visual="text"] span{margin-top:25rem; font-size:24rem; line-height:1.6; font-weight:300;}
[data-visual="text"] :is(strong, em, span){opacity:0; transform:translateY(30rem); transition:1s ease 0s; transition-property:opacity, transform; word-break:keep-all;}
	/* img */
[data-visual="img"]{overflow:hidden; display:block; height:100%;}
[data-visual="img"] img{object-fit:cover; width:100%; height:100%; transform:scale(1.1); transition:transform 7000ms linear;}
	/* active motion */
[data-visual="img"].motion__in img{transform:scale(1);}
[data-visual="text"].motion__in :is(strong, em, span){opacity:1; transform:translateY(0rem);}
[data-visual="text"].motion__in strong{transition-delay:0.15s;}
[data-visual="text"].motion__in em{transition-delay:0.3s;}
[data-visual="text"].motion__in span{transition-delay:0.45s;}
/* control */
[data-mainVisual] .swiper-control{display:flex; align-items:center; color: var(--color-white);line-height: 1; position:absolute; bottom:100rem; left: 50%; transform: translateX(-50%); z-index:10; max-width: calc(var(--inr) * 1rem); width: calc(var(--inr-width) * 100%);}
[data-mainVisual] button{--sizeWid:30rem; opacity:0.6; display:flex; justify-content:center; align-items:center; width:var(--sizeWid); height:var(--sizeWid); background-color:transparent; transition:opacity 0.3s ease;}
[data-mainVisual] button[class*="swiper_"]{color:var(--color-white)}
[data-mainVisual] button[class*="swiper_"] span{font-size:0;}
[data-mainVisual] button[class*="swiper_"] i{font-size:25rem;}
[data-mainVisual] button:hover{opacity:1;}
[data-mainVisual] .swiper-page {color: var(--white); font-size: 18rem; font-weight: 400; font-family: var(--font-eng); width: auto; margin: 0 20rem;}
[data-mainVisual] .swiper-pagination-total {opacity: 0.3;}
[data-mainVisual] .swiper-page i {display: inline-block; margin: 0 10rem;}

/* scroll Down */
[data-mainVisual] .scrolldown{position:absolute; right:50rem; top:50%; transform: translateY(-50%); display:flex; flex-direction: column; align-items: center; justify-content: center;  text-transform:uppercase;transition-delay:0.8s;  z-index: 10;}
[data-mainVisual] .scrolldown em {display:inline-block; font-size:14rem; font-weight:300; color:#fff; line-height:1em; margin: 0 0 12rem; writing-mode: vertical-lr;}
[data-mainVisual] .scrolldown i {display:block; overflow:hidden; position:relative; width:1rem; height:40rem; margin:0 auto; background:rgba(210,212,201,0.3);}
[data-mainVisual] .scrolldown i:before {content:''; display:block; position:absolute; top:0rem; left:0px; width:100%; height:30rem; background:#fff; animation:scroll 2s cubic-bezier(0.48, 0.13, 0.09, 0.99) infinite;}
[data-mainVisual] .show-mo {display: none;}


@keyframes scroll{
	0%{transform:translateY(-20rem);}
	100%{transform:translateY(200%);}
}

@media (max-width:1080px){
	[data-visual="text"] em {font-size: 50rem;}
	
}
@media (max-width:768px){
	[data-mainVisual] button[class*="swiper_"] i{font-size:20rem;}
	[data-mainVisual] .swiper-control {bottom: 180rem;}
	[data-mainVisual] .scrolldown {top: auto; right: 50%; bottom: 0; transform: translateX(50%);}
	[data-mainVisual] .scrolldown em {writing-mode: horizontal-tb;}
	[data-visual="text"] em {font-size: 40rem;}
	[data-visual="text"] span {font-size:20rem; line-height:1.5;}
}
@media (max-width:480px){
	[data-mainVisual] .show-mo {display: block;}
	[data-visual="text"] em {font-size: 30rem;}
	[data-visual="text"] span {font-size:15rem;}
	[data-mainVisual] button {--sizeWid:20rem}
	[data-mainVisual] .swiper-page {margin: 0 10rem; font-size: 14rem;}


}


/* 공통부분 */
#content {position: relative;}
#content::before {content: ''; position: absolute; left: 0; left: 0; width: 100%; height: 100%; background: #f4f6fb; z-index: -5;}
.mainTit {}
.mainTit h2 {font-size: 45rem; font-weight: 700;}
.mainTit small {display: block; font-weight: 600; font-size: var(--font18); margin-bottom: 20rem;}
.mainTit p {font-size: var(--font18); line-height: 1.5; color: #555; margin-top: 30rem;}

/* 기술소개 */
[data-main="technology"] {padding:80rem 50rem 0 50rem; overflow: hidden;}
[data-main="technology"] .techBox {padding: 140rem 0; border-radius: 20rem; background: var(--color-point) url(/images/main/tech_bg.jpg) no-repeat; background-size: cover; background-position: 50% 50%;}
[data-main="technology"] .mainTit {display: flex; align-items: flex-end; justify-content: space-between; color: var(--color-white);}
[data-main="technology"] .tabMenu {display: flex; gap: 10rem; align-items: center;}
[data-main="technology"] .tabMenu li {padding: 14rem 20rem; font-size: var(--font17); font-weight: 500; background: rgba(255, 255, 255, 0.3); border-radius: 3rem; cursor: pointer;}
[data-main="technology"] .tabMenu li.active {background: var(--color-white); color: var(--color-point);}
[data-main="technology"] .tabCon {opacity: 0; visibility: hidden; width: 100%; height: 0; position: relative;}
[data-main="technology"] .tabCon.active {opacity: 1; visibility: visible; height: 100%;}
[data-main="technology"] .techWrap {margin-top: 60rem;}
[data-main="technology"] .no-data {display: block; font-size: var(--font18); color: var(--color-white); padding: 20rem 0;}
[data-main="technology"] .techCon {position: relative; display: block; border-radius: 10rem; overflow: hidden; background: var(--color-white);}
[data-main="technology"] .techCon .img_box {position: relative; width: 100%; aspect-ratio : 35 / 27; max-height: 270rem; overflow: hidden; background: #eee;}
[data-main="technology"] .techCon .img_box::before {content: ''; position: absolute; top: 0;left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); opacity: 1; visibility: hidden; z-index: 5;}
[data-main="technology"] .techCon .img_box.none {background: #f2f2f2; display: flex; align-items: center; justify-content: center;}
[data-main="technology"] .techCon .img_box.none img { width: 180rem; object-fit: contain; opacity: 0.2;}
[data-main="technology"] .techCon .img_box:not(.none) .img {width: 100%; height: 100%;}
[data-main="technology"] .techCon .img_box:not(.none) .img img {width: 100%; height: 100%; max-height: 100%; object-fit: cover; transition: var(--trans-ani);}
[data-main="technology"] .techCon .txt_box {width: 100%; padding: 35rem 30rem 40rem; letter-spacing: -0.02em;}
[data-main="technology"] .techCon .txt_box span {display: block; font-weight: 600; color: var(--color-point); margin-bottom: 20rem;}
[data-main="technology"] .techCon .txt_box p {font-size: var(--font22); font-weight: 700; }
[data-main="technology"] .techList .tech-progress {position: relative; margin-top: 50rem; background: rgba(255, 255, 255, 0.2); border-radius: 10rem; overflow:  c;}
[data-main="technology"] .techList .swiper-pagination-progressbar-fill {background: var(--color-white);}
[data-main="technology"] .techWrap .tabCon .btn {display: block; position: absolute; top:48%; transform: translateY(-50%); font-size: 60rem; color: var(--color-white); z-index: 10; cursor: pointer; opacity: 0.5; transition: var(--trans-ani);}
[data-main="technology"] .techWrap .tabCon .btn.tech-prev {left:-90rem;}
[data-main="technology"] .techWrap .tabCon .btn.tech-next {right:-90rem}
[data-main="technology"] .ko_board_noData{border-width:0; color:rgba(255,255,255,0.6);}
/* hover */
[data-main="technology"] .techCon:hover .img_box:not(.none) img {transform: scale(1.05);}
[data-main="technology"] .techCon .img_box .hover {display: flex; align-items: center; justify-content: center; background-size: c; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width:0; height: 0; background: url(/images/main/tech_hover.png) no-repeat; background-position: 50% 50%; opacity: 0; visibility: hidden; z-index: 10; transition: all .4s}
[data-main="technology"] .techCon .img_box .hover i {display: flex; align-items: center; justify-content: center; width: 100rem; height: 100rem; border-radius: 50%; background: var(--color-point); color: var(--color-white); font-size: 20rem;}
[data-main="technology"] .techCon:hover .img_box .hover {opacity: 1; visibility: visible; width: 145rem; height: 145rem;}
[data-main="technology"] .techCon:hover .img_box::before {opacity: 1; visibility: visible;}
[data-main="technology"] .techWrap .tabCon .btn:hover {opacity: 1;}

/* 공지사항 - 슬라이드 */
[data-main="notice"] {padding: 160rem 0 120rem; position: relative; overflow: hidden;}
[data-main="notice"] .inr {z-index: 10;}
[data-main="notice"] .notice-control {display: flex; align-items: center; gap: 10rem; margin-top: 45rem;}
[data-main="notice"] .notice-control > * {display: flex; align-items: center; justify-content: center; width: 55rem; height: 55rem; border-radius: 50%; background: var(--color-white); cursor: pointer;}
[data-main="notice"] .notice-control .more {background: #161f32; color: var(--color-white);}
[data-main="notice"] .notice-control span:hover {background: var(--color-point); color: var(--color-white);}
[data-main="notice"] .noticeWrap {display: flex; align-items: center; justify-content: space-between;}
[data-main="notice"] .noticeWrap .mainTit {width: 250rem;}
[data-main="notice"] .noticeWrap .noticeList { width: calc(100% - 330rem); padding: 20rem; margin-top: -20rem; margin-right: -20rem;}
[data-main="notice"] .noticeCon {display: flex; flex-direction: column; justify-content: space-between; padding: 45rem 30rem; height: 330rem; border-radius: 10rem; background: var(--color-white); border: 2rem solid transparent; transition: var(--trans-ani); box-shadow : 0 10rem 20rem rgba(0, 0, 0, 0.1)}
[data-main="notice"] .noticeCon .tag {display: flex; align-items: center; justify-content: space-between; font-size: 15rem;}
[data-main="notice"] .noticeCon .tag span {display: block; padding: 7rem 10rem; box-sizing: border-box; background: #e5f1f8; color: var(--color-point);}
[data-main="notice"] .noticeCon .tag i {width: 28rem; height: 28rem; line-height: 28rem; text-align: center; border-radius: 50%; background: #e51c19; color: var(--color-white);}
[data-main="notice"] .noticeCon .date {display:flex; align-items: center; gap: 8rem; font-size: 15rem; font-weight: 300; color: #a5a5a5; line-height: 1; padding-top: 30rem; border-top: 2rem solid #f5f5f5;}
[data-main="notice"] .noticeCon .date i {font-size: 18rem;}
[data-main="notice"] .noticeCon dl {margin: 30rem 0 30rem; letter-spacing: -0.01em;}
[data-main="notice"] .noticeCon dt {font-size: 20rem; font-weight: 600; }
[data-main="notice"] .noticeCon dd {color: #555; line-height: 1.5; margin-top: 20rem;}
[data-main="notice"] .noticeCon:hover {border-color: var(--color-point);}
[data-main="notice"] .obj img {position: absolute; object-fit: contain; z-index:-1;}
[data-main="notice"] .obj img.oj1 {top: -150rem; right: 0; max-width: 700rem;}
[data-main="notice"] .obj img.oj2 {left: 0; bottom: -80rem; max-width: 660rem;}
[data-main="notice"] .ko_board_noData{flex:auto; border-width:0; color:rgba(0,0,0,0.3);}

/* 공지사항 - 배너 */
[data-main="notice"] .noticeBanner {display: grid; grid-template-columns: repeat(3,1fr); gap: 30rem; margin-top: 70rem;}
[data-main="notice"] .noticeBanner .banner {background-size: cover; width: 100%; position: relative; display: flex; align-items: center; justify-content: space-between; padding: 50rem 40rem; border-radius: 10rem; color: var(--color-white); box-shadow:0 10rem 20rem rgba(0,0,0,0.1); overflow: hidden;}
[data-main="notice"] .noticeBanner .banner::before {content: ''; position: absolute; top: 0;left: 0; width:100%; height:100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; z-index: -2;}
[data-main="notice"] .noticeBanner .banner::after {content: ''; position: absolute; bottom:0;left: 0; width:100%; height:100%; background: rgba(22, 31, 50, 0.85); opacity: 0; visibility: hidden; transition: var(--trans-ani);}
[data-main="notice"] .noticeBanner .banner:hover::after {opacity: 1; visibility: visible; }
[data-main="notice"] .noticeBanner .banner dl {z-index: 10;}
[data-main="notice"] .noticeBanner .banner dt {font-size: 26rem; font-weight: 600;}
[data-main="notice"] .noticeBanner .banner dd {font-size: var(--font17); margin-top: 20rem;}
[data-main="notice"] .noticeBanner .banner .icon {display: flex; align-items: center; justify-content: center; width: 90rem; height: 90rem; border-radius: 50%; background: var(--color-white); z-index: 10;}
[data-main="notice"] .noticeBanner .banner .icon img {width: 50rem; object-fit: contain;}
[data-main="notice"] .noticeBanner .banner.bn1 {background-image:url(/images/main/bn_img01.jpg);}
[data-main="notice"] .noticeBanner .banner.bn2 {background-image:url(/images/main/bn_img02.jpg);}
[data-main="notice"] .noticeBanner .banner.bn3 {background-image:url(/images/main/bn_img03.jpg);}

@media (max-width:1400px){
	[data-main="technology"] {padding: 70rem 40rem 0 40rem;}
	[data-main="notice"] .obj img.oj1 {max-width: 600rem;}
	[data-main="notice"] .obj img.oj2 {max-width: 550rem;}
}
@media (max-width:1080px){
	[data-main="technology"] {padding: 60rem 30rem 0 30rem;}
	[data-main="technology"] .techBox {padding: 100rem 0 90rem;}
	[data-main="technology"] .techCon .txt_box {padding: 30rem 25rem;}
	[data-main="technology"] .techCon .txt_box p {font-size: 20rem;}
	[data-main="notice"] {padding: 120rem 0 100rem}
	[data-main="notice"] .mainTit p br {display: none;}
	[data-main="notice"] .noticeWrap .noticeList {width: calc(100% - 250rem);}
	[data-main="notice"] .noticeBanner {gap: 15rem;}
	[data-main="notice"] .noticeBanner .banner {padding: 40rem 30rem;}
	[data-main="notice"] .noticeBanner .banner .icon {width: 75rem; height: 75rem;}
	[data-main="notice"] .noticeBanner .banner .icon img {width: 40rem;}
	[data-main="notice"] .noticeBanner .banner dt {font-size: 22rem;}
	[data-main="notice"] .noticeBanner .banner dd { margin-top: 15rem;}
	[data-main="notice"] .obj img.oj1 {max-width: 500rem;}
	[data-main="notice"] .obj img.oj2 {max-width: 450rem;}
}
@media (max-width:767px){
	.mainTit h2 {font-size: 35rem; font-weight: 600;}
	.mainTit small { margin-bottom:15rem;}
	.mainTit p {margin-top:20rem;}
	[data-main="technology"] .mainTit {flex-direction: column; align-items: center; text-align: center; gap: 30rem;}
	[data-main="technology"] .techWrap {margin-top: 50rem;}
	[data-main="technology"] .techCon .txt_box p {font-size: 16rem;}
	[data-main="technology"] .techCon .txt_box span {margin-bottom: 15rem;}
	[data-main="notice"] {padding:100rem 0}
	[data-main="notice"] .noticeWrap {flex-direction: column;}
	[data-main="notice"] .noticeWrap .mainTit {width:100%;}
	[data-main="notice"] .noticeWrap .noticeList {width:100%; padding: 20rem 0; margin-top:30rem; margin-right: 0;}
	[data-main="notice"] .noticeCon {height: 300rem; padding: 40rem 25rem;}
	[data-main="notice"] .noticeCon dl {margin: 20rem 0;}
	[data-main="notice"] .noticeCon .tag {font-size: 14rem;}
	
	[data-main="notice"] .noticeCon .date {padding-top: 20rem;}
	[data-main="notice"] .noticeBanner {margin-top: 30rem;}
	[data-main="notice"] .noticeBanner .banner {flex-direction: column; align-items:center; text-align: center; padding: 35rem 20rem;}
	[data-main="notice"] .noticeBanner .banner dt {font-size: 18rem;}
	[data-main="notice"] .noticeBanner .banner .icon {width: 60rem; height: 60rem; margin-top: 30rem;}
	[data-main="notice"] .noticeBanner .banner .icon img {width:25rem;}

}
@media (max-width:480px){
	.mainTit h2 {font-size: 30rem;}
	[data-main="technology"] {padding:0;}
	[data-main="technology"] .techBox {padding: 90rem 0 80rem; border-radius: 0;}
	[data-main="technology"] .tabMenu {gap:6rem;}
	[data-main="technology"] .tabMenu li {padding: 10rem 14rem;}

	[data-main="notice"] .mainTit p br {display: block;}
	[data-main="notice"] .notice-control > * {width: 50rem; height: 50rem;}
	[data-main="notice"] .noticeBanner {grid-template-columns: repeat(1,1fr);}
	[data-main="notice"] .noticeBanner .banner {flex-direction: row; align-items: center; text-align: left; gap: 8rem; border-radius: 8rem;}
	[data-main="notice"] .noticeBanner .banner .icon {margin-top: 0;}
	[data-main="notice"] .noticeBanner .banner dd {font-size: 14rem;}
	[data-main="notice"] .obj img.oj1 {top: -100rem; max-width: 330rem;}
	[data-main="notice"] .obj img.oj2 {bottom: -70rem; max-width: 300rem;}

}