@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%;}
[data-mainVisual] .visual-page {position: absolute; bottom: 40rem; z-index: 10; left: 0; text-align: center;}
[data-mainVisual] .visual-page .swiper-pagination-bullet {width: 25rem; height: 10rem; border-radius: 30rem; background: rgba(255, 255, 255, 0.5);}
[data-mainVisual] .visual-page .swiper-pagination-bullet-active {background: var(--white); width: 10rem; height: 10rem; border-radius: 50%;}
[data-mainVisual] .scroll-down {display: flex; flex-direction: column; align-items: center; gap: 10rem; position: absolute; right: 70rem; bottom: 50rem; z-index: 20; color: var(--white);}
[data-mainVisual] .scroll-down p {translate: -1rem; line-height: 1; letter-spacing: .02em; writing-mode: vertical-lr; font-size: 12rem; font-weight: 300; text-transform: uppercase;}
[data-mainVisual] .scroll-down .bar {position: relative; width: 1rem; height: 60rem; background: var(--white);}
[data-mainVisual] .scroll-down .dot {position: absolute; top: 0; left: -3rem; width: 6rem; height: 6rem; background: #06f0ff; border-radius: 50%; animation: main-scroll-down 2s infinite;}
[data-visual="text"]{position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: 100%; display:flex; justify-content: center; flex-direction:column; color:var(--white); z-index: 10;}
[data-visual="text"] h2 {font-size:60rem; font-weight:700;} 
[data-visual="text"] p {font-size:18rem; font-weight: 300; line-height: 1.8; margin-top: 30rem; opacity: 0.8;}
[data-visual="text"] :is(p, h2, .visualBtn){opacity:0; transform:translateY(30rem); transition:1s ease 0s; transition-property:opacity, transform; word-break:keep-all;}
[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;}
[data-visual="img"].motion__in img{transform:scale(1);}
[data-visual="text"].motion__in :is(p, h2, .visualBtn){opacity:1; transform:translateY(0rem);}
[data-visual="text"].motion__in h2{transition-delay:0.15s;}
[data-visual="text"].motion__in p {transition-delay:0.3s;}
[data-visual="text"].motion__in .visualBtn {transition-delay:0.5s;}
[data-visual="text"] .visualBtn  {background: linear-gradient(45deg, #057bff, #004da3); margin-top: 60rem; }
[data-visual="text"] .visualBtn i {color: var(--point);}

@keyframes main-scroll-down {
    0%{ translate: 0 0; animation-timing-function: linear; }
    60%{ translate: 0 57rem; scale: 1; opacity: 1; animation-timing-function: ease; }
    90%, 100%{ translate: 0 57rem; scale: 4.6; opacity: 0;}
}
@media (max-width:1080px){
	[data-visual="text"] h2 {font-size:50rem;} 
	[data-mainVisual] .scroll-down {right: 30rem; bottom: 20rem;}
}
@media (max-width:768px){
	[data-visual="text"] .visualBtn {margin-top: 30rem;}
	[data-visual="text"] p {font-size:15rem; line-height:1.5;}
	[data-visual="text"] h2 {font-size:40rem;} 

	[data-mainVisual] .scroll-down .bar {height: 40rem;}
	@keyframes main-scroll-down {
		0%{ translate: 0 0; animation-timing-function: linear; }
		60%{ translate: 0 35rem; scale: 1; opacity: 1; animation-timing-function: ease; }
		90%, 100%{ translate: 0 35rem; scale: 4.6; opacity: 0;}
	}
}
@media (max-width:480px){
	[data-visual="text"] h2 {font-size:25rem;}
	[data-mainVisual] .visual-page {bottom: 25rem;}
	[data-mainVisual] .scroll-down {display: none;}
}

/* 공통*/
.mainTit small {display: block; font-size: 18rem; font-weight: 800; color: var(--point);}
.mainTit h2 {font-size: 40rem; font-weight: 700; margin-top: 30rem;}
.mainTit p {font-size: 18rem; line-height: 1.7; color: #555; margin-top: 35rem;}
.visualBtn {display: flex; align-items: center; justify-content: space-between; padding: 0 15rem 0 25rem; width: 200rem; height: 64rem; font-size: 15rem; color: var(--white); background: var(--black); border-radius: 35rem;}
.visualBtn i {display: flex; align-items: center; justify-content: center; width: 42rem; height: 42rem; border-radius: 50%;background: var(--white); color: var(--black);}

/* about */
[data-main="about"] .mainTit {text-align: center;}
[data-main="about"] {padding: 140rem 0; position: relative; overflow-x: hidden;}
[data-main="about"] .abList {margin-top: 70rem; display: grid; grid-template-columns: 1fr 3fr; gap: 22rem; animation-delay:1s;}
[data-main="about"] .abList a {position: relative; display: block; border-radius: 12rem; overflow: hidden;}
[data-main="about"] .abList a img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
[data-main="about"] .abList a img.mo {display: none;}
[data-main="about"] .abLeft a {height: 100%;}
[data-main="about"] .abRight {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 22rem;}
[data-main="about"] .abRight a {height: 350rem;}
[data-main="about"] .abRight a:nth-child(1) {width: 100%;}
[data-main="about"] .abRight a:nth-child(n+2) {width:calc(100%/3 - 15rem)}
[data-main="about"] .text {display: flex; gap: 15rem; align-items: flex-end; z-index: 10; color: var(--white); position: absolute; bottom: 40rem; left: 35rem;}
[data-main="about"] .text dl {display: flex; align-items: flex-end; gap: 15rem;}
[data-main="about"] .text dt {font-size: 25rem; font-weight: 600;}
[data-main="about"] .text dd {font-size: 15rem; letter-spacing: 0.02em; opacity: 0.7;}
[data-main="about"] .text i {position: relative; display:none; align-items: center; justify-content: center; width: 50rem; height: 50rem; border-radius: 50%; background: var(--white); color: var(--point); z-index: 10;}
[data-main="about"] .text i::after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 70rem; height: 70rem; background: rgba(255, 255, 255, 0.2); border-radius: 50%;}
[data-main="about"] .abList a::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background: linear-gradient(0deg, #275cb2, #0000 90%); z-index: 10; transition: .3s;}
/* hover */
[data-main="about"] .abList a:hover::before {height: 100%;}
[data-main="about"] .abList a:hover {display: flex; flex-direction: column; justify-content: center;}
[data-main="about"] .abList a:hover .text {width: 100%; height: 100%; left: 0; bottom: 0; justify-content: center; text-align: center; flex-direction: column; text-align: center; gap: 30rem; align-items: center;}
[data-main="about"] .abList a:hover .text i {display: flex;}
[data-main="about"] .abList a:hover .text i:hover::before {transform: rotate(90deg); transition: .5s;}
[data-main="about"] .abList a:hover .text dl {flex-direction: column; align-items: center;}
/* flow */
[data-main="about"] .flow { position: absolute; bottom: 0; object-fit: contain; animation: flow 18s linear infinite;}

@keyframes flow {
    from { transform: translateX(100%);}
    to { transform: translateX(-100%);}
}
[data-main="location"] {padding: 100rem 0 120rem;}
[data-main="location"] .loTop {display: flex; align-items: flex-end; justify-content: space-between;}
[data-main="location"] .loList {margin-top: 50rem; display: grid; grid-template-columns: repeat(2,1fr); gap: 25rem;}
[data-main="location"] .loList .map {height: 100%; width: 100%; border-radius: 10rem; border: 1rem solid #eaeaea; filter:grayscale(0.5)}
[data-main="location"] .loList .map .root_daum_roughmap .map_border {display: none;}
[data-main="location"] .loList .map .root_daum_roughmap {width: 100%;}
[data-main="location"] .loList .map .root_daum_roughmap .wrap_map {height: 475rem;}
[data-main="location"] .loList .map .root_daum_roughmap .wrap_controllers {display: none;}
[data-main="location"] .loList .map .root_daum_roughmap .cont .section.lst {display: none;}
[data-main="location"] .loList ul {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 15rem;}
[data-main="location"] .loList li:nth-child(1) {width: 100%;}
[data-main="location"] .loList li:nth-child(2) {width:calc(100%/2 - 10rem)}
[data-main="location"] .loList li:nth-child(3) {width:calc(100%/2 - 10rem)}
[data-main="location"] .loList li:nth-child(4) {width: 100%;}
[data-main="location"] .loList li {display: flex; justify-content: space-between; align-items: center; background: #f5f6f8; border: 1rem solid #eaeaea; border-radius: 10rem; padding: 20rem 40rem; transition: .5s;}
[data-main="location"] .loList li svg {height: 62rem; opacity: 0.06; }
[data-main="location"] .loList li dt {font-size: 18rem; font-weight: 700; display: flex; align-items: flex-end; gap: 10rem; transition: .3s;}
[data-main="location"] .loList li dt i {width: 6rem; height: 6rem; background: linear-gradient(0deg, #007fda, #0e5ecb); border-radius: 50%; }
[data-main="location"] .loList li dd {color: #555; margin-top: 15rem; transition: .3s;}
[data-main="location"] .loList li:hover {background: linear-gradient(-0deg, #0e5ecb, #007fda); color: var(--white); }
[data-main="location"] .loList li:hover dd {color: var(--white);}
[data-main="location"] .loList li:hover i {background: var(--white);}
[data-main="location"] .loList li:hover svg {fill: var(--white); opacity: 0.15;}

@media (max-width:1080px){
	[data-main="about"] .abList {gap: 15rem; grid-template-columns: 1fr 2fr; margin-top: 40rem;}
	[data-main="about"] .abRight {display: grid; grid-template-columns: repeat(2,1fr); gap: 15rem;}
	[data-main="about"] .abRight a {width: 100% !important; height: 300rem;}
}
@media (max-width:767px){
	.mainTit h2 {font-size: 30rem; margin-top: 20rem;}
	.mainTit small {font-size: 15rem;}
	.mainTit p {font-size: 15rem; line-height: 1.5;margin-top: 20rem;}
	.visualBtn {padding: 0 10rem 0 20rem; width: 165rem; height: 50rem;}
	.visualBtn i { width: 35rem; height: 35rem; font-size: 15rem;}
	[data-main="about"] {padding: 100rem 0}
	[data-main="about"] .abList { gap: 15rem; grid-template-columns: 1fr;}
	[data-main="about"] .abLeft a {height: 300rem; border-radius: 5rem;}

	[data-main="about"] .abList a img.mo {display: block;}
	[data-main="about"] .abList a img.pc {display: none;}
	[data-main="about"] .text {bottom: 30rem; left: 30rem;}
	[data-main="about"] .flow {height: 100rem; animation: flow 10s linear infinite;}
	/* location */
	[data-main="location"] {padding: 80rem 0 100rem;}
	[data-main="location"] .loTop {flex-direction: column; align-items: flex-start; gap: 35rem;}
	[data-main="location"] .loList .map {border-radius: 6rem;}
	[data-main="location"] .loList .map .root_daum_roughmap .wrap_map {height: 400rem;}
	[data-main="location"] .loList {grid-template-columns: repeat(1,1fr);}
	[data-main="location"] .loList li {padding: 25rem 25rem;  border-radius: 6rem;}
	[data-main="location"] .loList li svg {height: 50rem;}
}
@media (max-width:480px){
	.mainTit h2 {font-size: 20rem;}
	.mainTit br {display: none;}
	.visualBtn {width: 150rem; height: 50rem; font-size: 14rem;}
	.visualBtn i { width: 35rem; height: 35rem; font-size: 11rem;}
	[data-main="about"] {padding: 80rem 0}
	[data-main="about"] .abList {gap: 10rem;}
	[data-main="about"] .abRight {grid-template-columns: repeat(1,1fr); gap: 10rem;}
	[data-main="about"] .text dl {gap: 10rem;}
	[data-main="about"] .text dt {font-size: 20rem;}
	[data-main="about"] .flow {bottom: 30rem; height: 50rem;}
	/* location */
	[data-main="location"] {padding: 50rem 0 80rem;}
	[data-main="location"] .loTop {gap:25rem; width: 100%;}
	[data-main="location"] .loList {gap: 10rem; margin-top: 30rem;}
	[data-main="location"] .loList .map .root_daum_roughmap .wrap_map {height: 350rem;}
	[data-main="location"] .loList ul {gap: 8rem;}
	[data-main="location"] .loList li {padding: 25rem 20rem;}
	[data-main="location"] .loList li:nth-child(2), [data-main="location"] .loList li:nth-child(3) {width: 100%;}
	[data-main="location"] .loList li dt {font-size: 16rem; gap: 5rem;}
	[data-main="location"] .loList li dd {font-size: 15rem; margin-top: 10rem;}

}