@charset "utf-8";

/* .ms-preloader { position: fixed; left: 0; top:0; right:0; bottom:0; z-index: 9999; background-color: #fff; opacity:1; visibility: visible; transition:all 3s cubic-bezier(0.075, 0.82, 0.165, 1); pointer-events: none;} */


/* .sub-visual { position: relative; overflow: hidden; }
.sub-visual .img { position: absolute; left: 0; top:0; right:0; bottom:0; z-index:-1; }
.sub-visual .img img { width:100%; height:100%; object-fit: cover; }
.sub-visual .head { display: flex; justify-content: center; align-items: center; height: 100vh; }
.sub-visual .head .box { }
.sub-visual .head .lnb { display: flex; align-items: center; margin-bottom: 8rem; justify-content: center; }
.sub-visual .head .lnb i { width:1px; height: 2rem; background-color: rgba(255,255,255,0.5); margin:0 3rem;;}
.sub-visual .head .lnb .home svg { width:2.3rem; }
.sub-visual .head .lnb .nice-select { border:0; background:none; font-size:var(--txt20); font-weight:600; color:#fff; padding:0 1.5em 0 0; }
.sub-visual .head .lnb .nice-select .list {    min-width: calc(100% + 2px);border-radius: 0;left: -1px; color: #000; font-size: var(--txt18)}

.sub-visual .head .lnb .nice-select:after { right: 0; width: 1em;; height: 1em; margin-top: -0.5em; font-size: 1em; border: 0; transform: rotate(0deg); transform-origin: center; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="%23fff"><path d="M224 385.9l17-17L401 209l17-17L384 158.1l-17 17-143 143L81 175l-17-17L30.1 192l17 17L207 369l17 17z"/></svg>') center/contain no-repeat; transition: transform 0.3s; }
.sub-visual .head .lnb .nice-select.open:after { transform: rotate(180deg); }
.sub-visual .head .lnb .nice-select .option{padding: 0 1.2em;}



.sub-visual .head h2 { font-size:var(--txt100); font-weight:700; color:#fff; text-align: center; }
.sub-visual .body { height: 75vh; display: flex; align-items: center; justify-content: center;  text-align: center;}
.sub-visual .body .txts { display: flex; align-items:center; flex-direction: column;}
.sub-visual .body div p { font-size:7rem; font-weight:700; color:rgba(255,255,255,0.3); line-height: 1.5; position: relative;}
.sub-visual .body div p + p { margin-top:2rem;}
.sub-visual .body div p span {position: absolute;left: 0; top:0;  width:0; color:#fff; white-space: nowrap; overflow: hidden; }
.sub-visual .lnb  { transform: translateY(10rem); opacity:0; transition:all 1s ease;}
.sub-visual .lnb .home {display: flex; align-items: center}
.sub-visual.active .lnb  { transform: unset; opacity:1; }
.sub-visual h2 { transform: translateY(10rem); opacity:0; transition:all 1s ease; transition-delay: 0.4s;}
.sub-visual.active h2 { transform: unset; opacity:1; }
.sub-visual .img img { transform: scale(1.1); transition:all 2s ease; transition-delay: 0.5;}
.sub-visual.active .img img { transform: scale(1);  } */




/* About */
.introduce-sub .better-sec { padding: 24rem 0 20rem; text-align: center; }
.introduce-sub .better-sec i { display: block; transform: translateY(10rem) ; opacity:0; transition:all 1s ease;}
.introduce-sub .better-sec i svg {width: 28.8rem; height: auto}
.introduce-sub .better-sec i.active { transform: unset; opacity:1; }
.introduce-sub .better-sec .tit { margin: 8rem 0 6rem; font-size: 8rem; font-weight: 600; font-family: var(--en); background: linear-gradient(90deg,rgba(191, 160, 114, 1) 15%, rgba(27, 28, 102, 1) 35%, rgba(27, 28, 102, 1) 70%, rgba(191, 160, 114, 1) 80%);background-size: 200% 100%; color: transparent; -webkit-background-clip: text;animation: gradientMove 5s linear infinite;  transform: translateY(10rem); opacity:0; transition:all 1s ease;}
.introduce-sub .better-sec .tit.active { transform: unset; opacity:1; }
.introduce-sub .better-sec .desc p {  opacity:0; transition:all 1s ease;}
.introduce-sub .better-sec .desc p:nth-child(1) { transition-delay: 0.2s;transform: translateX(-10rem); }
.introduce-sub .better-sec .desc p:nth-child(2) { transition-delay: 0.4s;transform: translateX(10rem); }
.introduce-sub .better-sec .desc.active p { transform: unset; opacity:1; }
.introduce-sub .better-sec .desc { font-size:3.2rem; font-weight:600; line-height: 1.65;}

.introduce-sub .open-sec { max-width:112rem; margin:0 auto 36rem; }
.introduce-sub .open-sec h3 { font-size:max(3.2rem, 32px); font-weight:700; margin-bottom: 2.4rem;} 
.introduce-sub .open-sec .txt { margin-bottom: 12rem;}
.introduce-sub .open-sec .txt p { font-size:var(--txt2); font-weight:500; line-height: 1.75; margin-bottom: 1.92rem; }
.introduce-sub .open-sec ul { display: flex; flex-wrap: wrap; margin:0 -1.6rem;  } 
.introduce-sub .open-sec ul li { width:calc(50% - 3.2rem); margin:1.6rem;  }
.introduce-sub .open-sec ul li:nth-child(2n) { transform: translateY(12rem); }
.introduce-sub .open-sec ul li .item { position: relative; border-radius:3.2rem; overflow: hidden;  }
.introduce-sub .open-sec ul li .item:before { content: ''; position: absolute;left: 0; right:0; top:40%; bottom:0; background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.78) 70%, rgba(0, 0, 0, 1) 100%); opacity:0.8;}
.introduce-sub .open-sec ul li .item img { width:100%; height:100%; object-fit: cover; }
.introduce-sub .open-sec ul li .item .info { position: absolute; left:4.8rem; bottom:4.8rem; right:4.8rem; color:#fff; }
.introduce-sub .open-sec ul li .item .info .t1 { font-size:var(--subTxt); font-weight:600; margin-bottom: 2rem;}
.introduce-sub .open-sec ul li .item .info .t2 { font-size:4rem; font-weight:600; line-height: 1.3;}
/* Ani */
.introduce-sub .open-sec ul li .item { border-radius:16rem;  opacity:0; transition:all 1s ease;}
.introduce-sub .open-sec ul li .item:before { top:100%; transition:all 1s ease;}
.introduce-sub .open-sec ul li .item .info { transform: translateY(10rem); opacity:0; transition:all 1s ease; transform-delay: 0.4s;}
.introduce-sub .open-sec ul li.active .item { border-radius:4rem; opacity:1; }
.introduce-sub .open-sec ul li.active .item:before { top:0; }
.introduce-sub .open-sec ul li.active .item .info { transform: unset; opacity:1; }

.introduce-sub .txt-ani { display: flex; white-space: nowrap; overflow: hidden; margin-bottom: 2.4rem;}
.introduce-sub .txt-ani p { display: flex; align-items: center;  font-size:16rem; font-weight:600; color:var(--gold);animation:txtAni 30s linear infinite; font-family: var(--en);}
.introduce-sub .txt-ani p svg { margin:0 4.8rem; }

.introduce-sub .space-sec { padding:24rem 0 20rem; background-color: #F5F1EC; overflow: hidden;}
.introduce-sub .space-sec .title { display: flex;  margin-bottom: 11.2rem;}
.introduce-sub .space-sec .title h3 { font-size:5.4rem; font-weight:700; color:#232323; margin-right:30rem; }
.introduce-sub .space-sec .title .info p {  font-size:3.3rem; font-weight:700; margin-bottom: 2.4rem; }
.introduce-sub .space-sec .title .info em { display: block; font-size:var(--subTxt); font-weight:500; line-height: 1.75; color:#444; }

/* .introduce-sub .space-sec .controls { display: flex; align-items: center; margin:7.2rem auto 0; max-width:144rem; }
.introduce-sub .space-sec .controls .swiper-pagination { position: static; flex:1; height: 0.4rem; background-color: #fff; border-radius:4px; overflow: hidden; }
.introduce-sub .space-sec .controls .swiper-pagination .swiper-pagination-progressbar-fill { background-color: #1C1C1C; border-radius:4px; }
.introduce-sub .space-sec .controls .swiper-button-prev,
.introduce-sub .space-sec .controls .swiper-button-next { position: static; margin:0;  width:6.4rem; height: 6.4rem; border-radius:100%; background-color: #fff; display: flex; align-items: center; justify-content: center;  transition: all 0.3s ease;}
.introduce-sub .space-sec .controls .swiper-button-prev:after,
.introduce-sub .space-sec .controls .swiper-button-next:after { display: none;}
.introduce-sub .space-sec .controls .swiper-button-prev svg,
.introduce-sub .space-sec .controls .swiper-button-next svg { width:1.6rem; height: auto; vertical-align: middle; }
.introduce-sub .space-sec .controls .swiper-button-prev { margin:0 1.6rem 0 4rem;}
.introduce-sub .space-sec .controls .swiper-button-next:hover,
.introduce-sub .space-sec .controls .swiper-button-prev:hover { background-color: var(--gold); fill:#fff;} */

.introduce-sub .space-sec .swiper {overflow: visible;}
.introduce-sub .space-sec .swiper .swiper-slide { width:56rem; }
.introduce-sub .space-sec .swiper .swiper-slide img { border-radius:2.4rem;}

/* 오시는길 삭제 요청으로 display none*/
.introduce-sub .map-sec { display: flex; justify-content: space-between; padding:40rem 0; display: none}
.introduce-sub .map-sec h3 { font-size:6.5rem; font-weight:700; }
.introduce-sub .map-sec .maps { width:120rem; }
.introduce-sub .map-sec .maps .map { position: relative; padding-bottom: 50%; ;}
.introduce-sub .map-sec .maps .map > img { width:100%; height: 100%; position: absolute; left: 0; top:0;    object-fit: cover;;}
.introduce-sub .map-sec .maps .addr { padding:5rem 0; display: flex; align-items: center; font-size:3rem; font-weight:700;  }
.introduce-sub .map-sec .maps .addr li { margin-right:1.5rem; }
.introduce-sub .map-sec .maps .addr li:last-child { margin-right:0; }
.introduce-sub .map-sec .maps .addr i svg { width:2.45rem; height:auto; vertical-align: middle; }
.introduce-sub .map-sec .maps ul { border-top:2px solid #1c1c1c; border-bottom: 1px solid #ddd; }
.introduce-sub .map-sec .maps ul li .infoway { display: none;}
.introduce-sub .map-sec .maps ul li .type a { display: block; padding: 3.5rem 5rem; position: relative; font-size:var(--txt20); font-weight:700; ;}
.introduce-sub .map-sec .maps ul li .type a i { position: absolute; right: 5rem; top:50%; transform: translateY(-50%) rotate(180deg); transition: all 0.3s ease;}
.introduce-sub .map-sec .maps ul li .type a i svg { width:2rem; height: auto;}
.introduce-sub .map-sec .maps ul li .type a.active i { transform:translateY(-50%) rotate(0);}
.introduce-sub .map-sec .maps ul li .infoway { padding: 5rem; border-radius:2rem; background-color: #F6F6F6; ;}
.introduce-sub .map-sec .maps ul li .infoway dl { padding-left: 2rem; position: relative; font-size:var(--txt18); font-weight:600; }
.introduce-sub .map-sec .maps ul li .infoway dl + dl { margin-top:3rem;}
.introduce-sub .map-sec .maps ul li .infoway dl dt { position:absolute; left: 0; top:0; ;}
.introduce-sub .map-sec .maps ul li .infoway dl dd .lb + .lb { margin-top:1.5rem; }
.introduce-sub .map-sec .maps ul li .infoway dl dd .lb.empty { margin-left: 15rem;;}
.introduce-sub .map-sec .maps ul li .infoway dl dd .tt { display: inline-flex; align-items: center; }
.introduce-sub .map-sec .maps ul li .infoway dl dd .tt i { margin-right:0.6rem; width:2.2rem; height: 2.2rem; border-radius:100%; background-color: #778900; font-size:1.4rem; color:#fff; font-weight:600; display: flex; align-items: center; justify-content: center; font-style: normal;}
.introduce-sub .map-sec .maps ul li .infoway dl dd .tt i.n9 { background-color: #A3956D;}
.introduce-sub .map-sec .maps ul li .infoway dl dd .tt i.n4 { background-color: #1E8EE3;}
.introduce-sub .map-sec .maps ul li .infoway dl dd .tt em { width:3.4rem; line-height: 2rem; border-radius:3px; background-color: #61C9FC; font-size:1.4rem; color:#fff; font-weight:600; text-align: center;}
.introduce-sub .map-sec .maps ul li .infoway dl dd .tt em.ex { background-color: #CA0C0C;}





@media screen and (max-width: 2000px) {
    .introduce-sub .open-sec .txt p { letter-spacing: -0.5px;}
}


@media screen and (max-width: 1440px) {
    /* .sub_top_visual .img img{max-height: 85rem;} */
    
    .introduce-sub .open-sec{max-width: 80%;}
    .introduce-sub .open-sec ul li.active .item{max-height:550px;}
}

















/* 애니메이션 정의 */
@keyframes fillBlue { from { fill: transparent; } to { fill: #bad8ee; } }
@keyframes fillBrown { from { fill: transparent; } to { fill: #d3b3a3; } }
@keyframes fillCyan { from { fill: transparent; } to { fill: #76c7d7; } }
@keyframes fillGreen { from { fill: transparent; } to { fill: #c7dd72; } }
@keyframes fillNavy { from { fill: transparent; } to { fill: #314297; } }
@keyframes fillPink { from { fill: transparent; } to { fill: #f49cc3; } }


@keyframes gradientMove {
    0% { background-position: 0% 50%;  }
    100% {  background-position: 200% 50%; }
}

@keyframes txtAni {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}