@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"]{display:flex; flex-direction:column; gap:25rem; position:absolute; top:50%; left:50%; z-index:5; box-sizing:content-box; color:#fff; transform: translate(-50%,-50%);}
[data-visual="text"] em{font-size:60rem; font-weight:700;}
[data-visual="text"] span{margin-top:25rem; font-size:24rem; line-height:1.6; font-weight:300;}
[data-visual="text"] :is(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(em, span){opacity:1; transform:translateY(0rem);}
[data-visual="text"].motion__in em{transition-delay:0.3s;}
[data-visual="text"].motion__in span{transition-delay:0.45s;}
/* control */
[data-mainVisual] .swiper-page{position: absolute; bottom: 250rem; left: 50%; transform: translateX(-50%); display: flex; gap: 10rem; align-items: center; z-index: 10; width: calc(var(--inr-width) * 100%)}
[data-mainVisual] .swiper-pagination-bullet {width: 10rem; height: 10rem; background: var(--white);}
[data-mainVisual] .swiper-pagination-bullet-active {position: relative; width: 30rem; height: 30rem; background: transparent; border: 1rem solid var(--white);}
[data-mainVisual] .swiper-pagination-bullet-active::before {content: ''; position: absolute; top: 50%;left: 50%; transform: translate(-50%,-50%); width: 9rem; height: 9rem; border-radius: 50%; background: var(--white); }
[data-mainVisual] .scrollDown { position: absolute; bottom:60rem; right: 80rem; display: flex; flex-direction: column; gap: 11rem;  z-index: 50;}
[data-mainVisual] .scrollDown-group { position: absolute; inset: 0; margin: auto; display: grid; align-items: center; pointer-events: none; }
[data-mainVisual] .scrollDown-txt { font-size: 13rem; color: var(--white); text-transform: uppercase; writing-mode: vertical-lr; white-space: nowrap; }
[data-mainVisual] .scrollDown-arrow { margin-top: 1px; display: block; width: 16rem; height: 8rem; fill: var(--white); }

@media (max-width:1440px){
	[data-visual="text"]{box-sizing:border-box;}
}
@media (max-width:1024px){
	[data-visual="text"] em {font-size:45rem}
	[data-visual="text"] span {margin-top:20rem; font-size:20rem; }
	[data-mainVisual] .scrollDown {right: 40rem; bottom: 40rem;}
}
@media (max-width:480px){
	[data-visual="text"] em {font-size:28rem}
	[data-visual="text"] span {margin-top:10rem; font-size:15rem;}
	[data-mainVisual] .scrollDown {right: 20rem; bottom: 20rem;}
	[data-mainVisual] .scrollDown-txt {font-size: 12rem;}
	[data-mainVisual] .swiper-page {bottom: 150rem;}
	[data-mainVisual] .swiper-pagination-bullet {width: 7rem; height: 7rem;}
	[data-mainVisual] .swiper-pagination-bullet-active {width: 26rem; height: 26rem;}
	[data-mainVisual] .swiper-pagination-bullet-active::before {width:7rem; height: 7rem;}
}

@media(prefers-reduced-motion:no-preference){
    .scrollDown-arrow{ animation: visual-scroll-down-arrow 1.4s infinite; opacity: 0; }
    .scrollDown-arrow.a2{ animation-delay: .1s; }
}
@keyframes visual-scroll-down-arrow {
    0%, 20%, 100%{ opacity: 0; }
    60%{ opacity: 1; }
}
/* main */
.mainTit span {display: block; font-weight: 700; font-size: 18rem; color: var(--point); margin-bottom: 30rem; font-family: var(--font-eng);}
.mainTit h2 {font-size: 45rem; font-weight: 700; line-height: 1.28;}
/* tab-menu */
.tab-menu {display: flex; justify-content: flex-end; flex-wrap: wrap; align-items: center; gap: 10rem 10rem;}
.tab-menu li {padding: 15rem 25rem; border-radius: 30rem; box-sizing: border-box; background: rgba(255, 255, 255, 0.5); border: 1rem solid #ddd; color: #a9a9a9; cursor: pointer;}
.tab-menu li.active {background: var(--point); color: var(--white); border-color: var(--point); pointer-events: none;}
.tab-cont {overflow: hidden; visibility: hidden; height: 0; position: relative;}
.tab-cont.active {overflow: visible; visibility: visible; height: 100%;}

/* business */
[data-main="business"] {padding: 160rem 0; background-image: url(/images/main/bu_bg.jpg); background-repeat: repeat;}
[data-main="business"] {overflow-x: hidden;}
[data-main="business"] .buList {overflow-x:clip; position: relative; padding: 40rem 0;}
[data-main="business"] .buTop {display: flex; flex-wrap: wrap; gap: 30rem 20rem; justify-content: space-between; align-items: flex-end; margin-bottom: 50rem;}
[data-main="business"] .buCon {display: block;}
[data-main="business"] .buCon .img {height: 300rem; overflow: hidden;}
[data-main="business"] .buCon .img img {max-width: 100%; width: 100%; height: 100%; object-fit: cover;}
[data-main="business"] .buCon .info {padding: 50rem 30rem; background: var(--white);}
[data-main="business"] .buCon .info .cate {display: block; font-weight: 600; color: #bbb;} 
[data-main="business"] .buCon .info .tit {font-size: 22rem; font-weight: 700; margin: 20rem 0 25rem;} 
[data-main="business"] .buCon .info .data {font-size: 15rem; font-weight: 500; color: #bbb;} 
[data-main="business"] .buControl div {position: absolute; top: 50%; transform: translateY(-50%); width: 70rem; height: 30rem; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 20;}
[data-main="business"] .buControl .bu-prev {position: absolute; left: -50rem; display: none;}
[data-main="business"] .buControl .bu-next {position: absolute; right: -50rem}
[data-main="business"] .buControl svg {display: block; width: 60rem; max-width: 100%;}
[data-main="business"] .buCon:hover {box-shadow: 5rem 10rem 20rem 0px rgba(0,0,0,0.08); transition:all 0.5s;}
[data-main="business"] .buCon:hover .cate  {color: var(--point);}
[data-main="business"] .buCon.none:hover {box-shadow: none; pointer-events: none;}
[data-main="business"] .tab-cont.none {font-size: 18rem; color: #555;}
[data-main="business"] .ko_board_noData{font-size: 18rem; color: #555;}
@media (hover: hover) {
	[data-main="business"] .buCon .img:hover img {transform: scale(1.08); transition: .4s;}
}
/* contact */
[data-main="contact"] {position: relative; display: flex; align-items: center; overflow-x: clip; height: 810rem;}
[data-main="contact"] .mainTit span {color: var(--white);}
[data-main="contact"] .csLeft {position: relative; width:100%; height: 100%; color: var(--white);}
[data-main="contact"] .csLeft::before {content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: url(/images/main/contact.jpg) no-repeat center / cover;}
[data-main="contact"] .csLeft .inr {height: 100%; padding-top: 170rem;}
[data-main="contact"] .csRight {position: absolute;top: 0; right: 0; width: 50%; height: 100%;}
[data-main="contact"] .csRight .inr {display: flex; align-items: center; height: 100%;  padding: 100rem 60rem; box-sizing: border-box;}
[data-main="contact"] .online-box .agree-box {display: flex; flex-wrap: wrap; gap: 10rem; justify-content: space-between; align-items: center; margin-top: 40rem;}
[data-main="contact"] .online-box .agree-box .csBtn {width: 200rem; height: 65rem; display: flex; gap: 10rem; border-radius: 5rem; font-size: 18rem; align-items: center; justify-content: center; background: #222; color: var(--white);}
[data-main="contact"] .online-box .agree-box .csBtn i {font-size: 22rem;}
[data-main="contact"] .online_form li {display: flex; align-items: center; gap: 20rem;}
[data-main="contact"] .online_form li + li {margin-top: 30rem;}
[data-main="contact"] .online_form li div {width: 100%;}
[data-main="contact"] .online_form .tel {display: grid; grid-template-columns: repeat(3,1fr); gap:10rem;}
[data-main="contact"] .online_form .mail {display: flex; align-items: center; gap: 8rem;}
[data-main="contact"] .online_form input {margin: 0; width: 100%; height: 55rem; padding: 20rem 15rem; background: 0; border: 0; border-bottom: 1rem solid #888; border-radius: 0;}
[data-main="contact"] .online_form textarea {margin: 0; width: 100%; height: 120rem; padding: 20rem; box-sizing: border-box; background: #f5f5f5; border: 0;}
[data-main="contact"] .online_form .checkbox label {display: flex; align-items: center; font-size: 15rem; font-weight: 300; color: #555;}
[data-main="contact"] .online_form .checkbox a {font-weight: 500; color: var(--black);}
[data-main="contact"] .spam-num {display: flex; align-items: center;}
[data-main="contact"] .spam-num p {display: flex; gap: 6rem; white-space: nowrap; margin-right: 20rem;}
[data-main="contact"] .fieldset-box {display: flex; align-items: center; gap: 20rem; width: 100%;}
[data-main="contact"] .spam-num .spam {display: flex; align-items: center; justify-content: center; height: 55rem;  font-size: 16rem; min-width: 110rem; text-align: center; padding: 0 20rem; border-radius: 4rem; box-sizing: border-box; background: #222; color: var(--white);}
[data-main="contact"] .online_form input::placeholder{font-size:16rem; font-weight: 300; color: #888;}
[data-main="contact"] .marking {margin: 0; }
[data-main="contact"] .online_form input[type="checkbox"] {width: 20rem; height: 20rem; border-radius: 50%; margin-right: 10rem;}

@media (max-width:1520px){
	[data-main="contact"] {height: 700rem;}
	[data-main="contact"] .csRight .inr {padding: 40rem 30rem;}
}
@media (max-width:1080px){
	.mainTit h2 {font-size: 40rem;}
	[data-main="contact"] .csRight .inr {padding: 50rem 20rem;}
	[data-main="contact"] .agree-box {gap: 25rem}
	[data-main="contact"] .checkbox {width: 100%;} 
	[data-main="contact"] .agree-box .csBtn {width: 100%;}
}
@media (max-width:767px){
	.mainTit h2 {font-size: 35rem;}
	.mainTit span {font-size: 15rem; margin-bottom: 25rem; font-weight: 500;}
	.tab-menu {gap: 8rem; justify-content: center;}
	.tab-menu li {font-size: 15rem; padding: 12rem 20rem;}
	/* business */
	[data-main="business"] {padding: 100rem 0;}
	[data-main="business"] .buTop {justify-content: center; text-align: center; margin-bottom: 50rem; }
	[data-main="business"] .buList {padding: 0;}
	[data-main="business"] .buCon .img {height: 250rem;}
	[data-main="business"] .buCon .info .tit {font-size: 18rem;}
	[data-main="business"] .buControl {display: none;}
	/* contact */
	[data-main="contact"] {height: auto; flex-direction: column;}
	[data-main="contact"] .csLeft {height: 400rem; max-height: 100%;}
	[data-main="contact"] .csLeft .inr {padding-top:0; display: flex; flex-direction: column; justify-content: center;}
	[data-main="contact"] .csLeft::before {width: 100%;}
	[data-main="contact"] .csRight {position: inherit; width: 100%;}
	[data-main="contact"] .csRight .inr {padding: 50rem 0;}
	[data-main="contact"] .online_form input {border: 0; height: 50rem; background: #f5f5f5;}
	[data-main="contact"] .online_form input::placeholder{font-size:14rem;}
	[data-main="contact"] .online-box .agree-box {gap: 20rem;}
	[data-main="contact"] .online-box .agree-box .csBtn {width: 100%;}
	[data-main="contact"] .online_form li {flex-direction: column;}
	[data-main="contact"] .online_form li + li {margin-top: 20rem;}
	[data-main="contact"] .spam-num {flex-direction: column; align-items: flex-start; gap: 20rem;}
	[data-main="contact"] .fieldset-box {gap: 10rem;}
	[data-main="contact"] .spam-num .spam {border-radius: 0; height: 50rem;}

}
@media (max-width:480px){
	.mainTit h2 {font-size: 30rem;}
	[data-main="business"] .buTop {margin-bottom:30rem;}
	[data-main="business"] .buCon .info {padding: 25rem 20rem 30rem;}
	[data-main="business"] .buCon .info .cate {font-size: 15rem;}
	[data-main="business"] .buCon .info .tit {font-size: 16rem; margin: 20rem 0;}
	[data-main="business"] .buCon .info .data {font-size: 14rem;}
	/* contact */
	[data-main="contact"] .csRight .inr{padding: 40rem 0;}
	[data-main="contact"] .csLeft{height: 400rem}
	[data-main="contact"] .online_form li{gap: 15rem;}
	[data-main="contact"] .online_form li + li{margin-top: 15rem;}
	[data-main="contact"] .online-box .agree-box{margin-top: 20rem;}
	[data-main="contact"] .online_form input[type="checkbox"]{width: 18rem; height: 18rem; margin-right: 0;}
    [data-main="contact"] .online_form .checkbox label {gap: 8rem; font-size: 13rem; flex-wrap: wrap;}
	[data-main="contact"] .spam-num .spam {min-width: auto; font-size: 16rem;}
}