@charset "utf-8"; 

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.cdnfonts.com/css/ashfiana'); 
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap');



@font-face {
     font-family: 'S-CoreDream-3Light';
     src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
@font-face {
     font-family: 'S-CoreDream-6Bold';
     src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
@font-face {
    font-family: 'Pretendard-Light';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard-SemiBold';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard-Bold';
    src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

html{font-family:"Noto Sans KR";}
.wrap { position: relative; min-width: 1300px; margin:0 auto; } 
.inner { position: relative; width: 1200px; margin: 0 auto; } 
.in_1580{width:1580px;}
.in_1290{width:1290px;}
.section{overflow:hidden;}

/*header*/
header {position: fixed;top: 0;left: 0;width: 100%;height: 100px;min-width:1300px;padding: 0 115px 0 20px;text-align: center;z-index: 120; transition: all 0.3s;}
header:before {display:block;position:absolute; top:99px;left:0;width:100%;height:1px;content:"";transition:0.3s; opacity: 0;}
header .head_in { position: relative; overflow: hidden; max-width: 1680px; height: 100px; margin: 0 auto; z-index: 10; transition: 0.2s; } 
header h1 { position: absolute; top: 40px; left: 0; } 
header h1 a { display: block; width: 327px; height: 21px; background: url(../images/logo-wh.png?ver=1) no-repeat center; background-size: contain; transition:0.3s; } 
header .menu{margin-left: 140px;}
header .menu > ul { display:inline-flex;}
header .menu .gnb1 {text-align: left; } 
header .menu .gnb1 > a { display: block; position:relative; padding: 0 20px; font-weight: 400; font-size: 17px; line-height: 100px; transition: 0.3s; letter-spacing: -0.05em;} 
header .menu .gnb1 > a > span { display:block; position:relative; padding:0 15px; } 
header .menu .gnb1 > a > span:before { position:absolute; bottom:-1px; left:50%; width:0%; height:3px; background:#906f54; content:""; transform:translateX(-50%); opacity:0; transition:.5s; z-index:111; } 
header .menu .gnb1:hover > a > span:before { opacity:1; width:100%; }
header .menu .gnb2 { margin-top: 25px; } 
header .menu .gnb2 li a { display: block; padding-bottom:25px; color: #757575; font-size: 16px; text-align: center; letter-spacing: -0.05em;} 
header .menu .gnb2 li a:hover { color:#8f6d52;font-weight:600;}
header .rig {display:flex;align-items:center;gap:0 50px;position: absolute; top: 32px; right: 0px;}
header .tel p{color:#fff;font-size:20px; font-family: 'Jost'; font-weight:600; padding-left:40px;background:url(../images/tel.png?ver=2) no-repeat left center;line-height:32px;}

header .menu .gnb1 > a {color: #fff;}
header:hover h1 a{background: url(../images/logo-co.png);}
.subwrap .menu .gnb1 > a,
header:hover .menu .gnb1 > a {color: #2b2a2a;}
.subwrap .tel p {color: #2b2a2a;}
header:hover .tel p {color: #2b2a2a;}
header:hover::before{opacity: 1;}

.subwrap header{position: absolute;}

.subwrap header h1 a,
.fp-viewing-1 header h1 a,
.fp-viewing-3 header h1 a{background: url(../images/logo-co.png);}
.fp-viewing-1 header .menu .gnb1 > a,
.fp-viewing-3 header .menu .gnb1 > a {color: #2b2a2a;}
.fp-viewing-1 header .tel p,
.fp-viewing-3 header .tel p {color: #2b2a2a;}

.fp-viewing-5 header{opacity:0;pointer-events:none;}


@media screen and (max-width: 1600px){
	header .menu .gnb1 > a{padding: 0 5px;font-size: 15px;}
	header .menu .gnb1 > a > span{padding: 0 10px;}
	header .menu .gnb2 li a{font-size: 13px;}
}

header:hover{background-color: #fff !important; box-shadow: 5px 5px 6.93px 0.07px rgb(0 0 0 / 10%); } 
header:hover,
header:hover .head_in { height:345px; } 
header:hover::before{background-color:#ebebeb;}
header.sub{background-color:#fff;padding: 0 20px;}
header.sub::before{background-color: #ebebeb;}

aside{position:fixed;right:0;top:0;z-index:150;height:100%;background-color:#004f59;box-shadow: 0px 0 15px rgb(0 0 0 / 30%);}
aside img{display:block;margin: 0 auto;}
aside ul{height:calc(100% - 380px);}
aside ul li{height:25%;display:flex;align-items:center;}
aside .top_btn{height:136px;display:flex;align-items:center;cursor:pointer;}

/*footer*/
footer{background-color:#222222;padding:75px 115px 65px 20px;}
footer .foot_in{position: relative;max-width: 1680px;margin: 0 auto;}
footer .foot_logo{margin-bottom:25px;}
footer .foot_brand{position:absolute;right:0;top:0;}
footer .foot_info{margin-bottom:10px;color:#bcbcbc;font-size:13px;line-height:22px;}
footer .ori{margin-bottom:25px;color:#636262;font-size:13px;line-height:19px;font-weight:300;}
footer address{font-size:13px;color:#636363;font-weight:300;}
.subwrap footer{padding: 75px 20px 45px;}
footer .top-btn{position: absolute; bottom: 0; right: 0; width: 46px; height: 46px; cursor: pointer;}

/* ban */
.ban-wrap{position: fixed; bottom:70px; right: 80px; z-index: 100; display: flex; justify-content: center; align-items: center; flex-direction: column; transition: 0.8s;}
.fp-viewing-5 .ban-wrap{bottom: 383px;}

.ban-wrap img{display:block;}
.ban-wrap .qr{box-shadow: 3px 0px 6.86px 0.14px rgba(0, 0, 0, 0.2);margin-bottom:10px;}
.ban-wrap .open{width: 110px; height: 110px; border-radius: 50%; box-shadow: 3px 0px 6.86px 0.14px rgba(0, 0, 0, 0.2); }

.ban{width: 54px; height: 54px; border-radius: 27px; box-shadow: 3px 0px 6.86px 0.14px rgba(0, 0, 0, 0.2); margin-top: 10px; position: relative;}
.ban img{position: relative; z-index: 10;}
.ban .ban-list{width: 54px; height: 54px; overflow: hidden; position: absolute; top: 0; right: 0; border-radius: 27px; background: #9b7b67; display: flex; align-items: center; padding-left: 25px; font-size: 16px; font-weight: 500; color: #fff; transition: 0.3s;}
.ban:hover .ban-list{width: 172px;}

.ban-wrap .scroll{display: flex; position: relative; width: 126px; height: 126px; justify-content: center; align-items: center; margin-top: 26px;}
.ban-wrap .scroll span{display: block; width: 20px; height: 27px; background: url(../images/scroll-icon.png) no-repeat center;}
.ban-wrap .scroll em{position: absolute; display: block; width: 100%; height: 100%; animation: rotate 10s linear infinite; background: url(../images/scroll-text.png) no-repeat center;}

.subwrap .ban-wrap .scroll{display:none;}

.fp-viewing-1 .scroll span,
.fp-viewing-3 .scroll span{background: url(../images/scroll-co.png) no-repeat center;}
.fp-viewing-1 .scroll em,
.fp-viewing-3 .scroll em{background: url(../images/scroll-text-co.png) no-repeat center;}

/* section01 */
.vis{width: 100%; height: 100%;}
.vis .title-wrap{display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; z-index: 10; gap: 50px;}
.vis .swiper-slide{position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center;}
.vis .bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 960px; z-index: 0; transition: 3s; transform: scale(1.3);}
.vis .sd01 .bg{background: url(../images/main-vis01.jpg?ver=3) no-repeat center;}
.vis .sd02 .bg{background: url(../images/main-vis02.jpg?ver=1) no-repeat center;}
.vis .sd03 .bg{background: url(../images/main-vis03.jpg?ver=1) no-repeat center;}

.vis .txt{position:absolute;top:24%;left:21%;z-index:1;}
.vis .txt div{overflow:hidden;}
.vis .txt img{display:block;}
.vis .txt .t1 img,
.vis .txt .t2 img{transform:translate(0,100%);transition:1s;}
.vis .txt .t3{transform:translate(0,60%);opacity:0;transition:1s;}
.vis .sd01 .txt .t1{margin-bottom:40px;}
.vis .sd01 .txt .t2{margin-bottom:70px;}
.vis .sd02 .txt .t1{margin-bottom:45px;}
.vis .sd02 .txt .t2{margin-bottom:45px;}
.vis .sd03 .txt .t1{margin-bottom:20px;}
.vis .sd03 .txt .t2{margin-bottom:80px;}
.vis .swiper-slide-active .txt .t1 img{transform:none;transition-delay:0.4s;}
.vis .swiper-slide-active .txt .t2 img{transform:none;transition-delay:0.7s;}
.vis .swiper-slide-active .txt .t3{transform:none;opacity:1;transition-delay:1.4s;}

.vis .swiper-slide-active .bg{transform: scale(1);}

.vis .title-wrap2{position: absolute; top: 270px; right: 280px; z-index: 10; display: flex; flex-direction: column; gap: 48px;}
.vis .title-wrap2 img:last-of-type{width: 234px;}

.vis .pagination{position: absolute; bottom:100px; left: 60px; z-index: 30;}
.vis .pagination-wrap{transform: rotate(-90deg); color: #fff; display: flex; font-family: 'Montserrat'; gap: 10px;}
.vis .pagination-wrap .current{font-size: 60px; display: block; width: 78px; font-weight: 700; letter-spacing: -0.04em;}
.vis .pagination-wrap .total{font-size: 18px; font-weight: 400; letter-spacing: 0.14em; transform: translateY(5px); display: inline-block;}

.vis .swiper-slide .title-wrap img{opacity: 0;}
.vis .swiper-slide-active .title-wrap.type1 img:first-of-type{animation: visSlo01 1.2s forwards;}
.vis .swiper-slide-active .title-wrap.type1 img:last-of-type{animation: visSlo02 1.2s forwards; animation-delay: 0.4s;}
.vis .swiper-slide-active .title-wrap.type2 img:first-of-type{animation: visSlo01-1 1.2s forwards;}
.vis .swiper-slide-active .title-wrap.type2 img:last-of-type{animation: visSlo02-1 1.2s forwards; animation-delay: 0.4s;}
.vis .swiper-slide .title-wrap2 img{opacity: 0;}
.vis .swiper-slide-active .title-wrap2 img:first-of-type{animation: visSlo03 1.2s forwards;}
.vis .swiper-slide-active .title-wrap2 img:last-of-type{animation: visSlo04 1.2s forwards; animation-delay: 0.4s;}

@keyframes visSlo01 {
    0% {transform: translateX(-25%); opacity: 0;}
    100% {transform: translateX(0%); opacity: 1;}
}
@keyframes visSlo02 {
    0% {transform: translateX(25%); opacity: 0;}
    100% {transform: translateX(0%); opacity: 1;}
}
@keyframes visSlo01-1 {
    0% {transform: translateX(25%); opacity: 0;}
    100% {transform: translateX(0%); opacity: 1;}
}
@keyframes visSlo02-1 {
    0% {transform: translateX(-25%); opacity: 0;}
    100% {transform: translateX(0%); opacity: 1;}
}
@keyframes visSlo03 {
    0% {transform: translateY(-25%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}
@keyframes visSlo04 {
    0% {transform: translateY(25%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}

/* 비디오 추가 */
.video-banner{ position: absolute; top: -60px;  left: 75px; /* left: 50%; */ height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 8px; z-index: 50; /* transform: translateX(-886px); */ }

.video-banner.new{top: 150px; height: auto;}
.video-banner.newban{top: 85px; height: auto; gap: 4px;}

.video-banner a{display: block; position: relative; z-index: 55;}

@media all and (min-width:1999px){
    .vis .bg{background-size: cover !important}
}

/* 메인비주얼 새 페이징 */
.vis .cont{position:absolute;bottom:50px;left: 50%;z-index:10;display:flex;align-items:center;transform: translateX(-50%);}
.vis .cont .num{color:#fff;font-family:'Jost';font-size:13px;letter-spacing: 0.4em; text-align: center;}
.vis .cont .num .present-page{font-weight:500;}
.vis .cont .con_btn{margin-left:25px;}
.vis .cont .con_btn button{border:none;width:12px;height:14px;background-repeat:no-repeat;background-size:contain;background-color:transparent;}
.vis .cont .con_btn .stop{background-image:url(../images/vis-stop.png);}
.vis .cont .con_btn .play{background-image:url(../images/vis-play.png);}
.vis .cont .arr{display:flex;gap: 0 40px;}
.vis .cont .arr.lef{margin-right: 30px;}
.vis .cont .arr.rig{margin-left: 30px;}
.vis .cont .arr button{border:none;background-color:transparent;}


/* section02 */
.sec2{background: #f7f3ed; position: relative; overflow: hidden;}
.sec2 .bg{position: absolute; bottom: 0; left: 0; width: 100%; height: calc(100% - 100px);}
.sec2 .bg span{position: absolute; width: 100%; height: 100%; min-height: 860px; top: 0%; left: 50%; transform: translateX(-50%) scale(1.3); background: url(../images/sec02-bg-0425-n.jpg?ver3) no-repeat top left; display: block; opacity: 0; transition: 1.6s; z-index: 1;}
.location-pre{display: flex; position: relative; width: 100%; height: calc(100% - 100px); margin-top: 100px; box-sizing: border-box; gap: 100px; z-index: 5;}
.location-pre .lef{width: 66%; max-width: 1320px; height: 100%; position: relative;}
.sec2 .lef span{display: none;}
.location-pre .top-title{ display: flex; gap: 20px; align-items: center; margin-bottom: 36px; margin-top: 100px; justify-self: flex-start;}
.location-pre .top-title span{letter-spacing: -0.05em; font-size: 22px; font-weight: 600; color: #2a1a15;}
.location-pre .top-title em{display: block; width: 94px; height: 1px; background-color: #00334b;}
.location-pre .mid-slo{display: flex; flex-direction: column; gap: 20px; justify-self: flex-start;}
.location-pre .mid-slo img:last-of-type{width: 276px;}
.location-pre .bot{position: absolute; bottom: 0; right: 0; animation: slidein 15s linear infinite; animation-delay: 2s; transform: translateX(100%);}
.location-pre .rig{display: flex; justify-content: space-between; flex-direction: column; padding-bottom: 120px; box-sizing: border-box;} 

@keyframes slidein {
    from { transform: translateX(100%);}
    to {transform: translateX(-100vw);}
}

@media (max-width: 1800px){
    .sec2 .bg span{display: none;}
    .sec2 .lef span{ background: url(../images/sec02-bg-mini.jpg) no-repeat center right; background-size: cover; flex-shrink: 0; display: block; width: 100%; height: 100%;}
    .location-pre{gap: 40px;}
}

.location-pre .more-btn{display: flex; justify-content: center; align-items: center; width: 144px; height: 144px; position: relative; margin-top: 240px;}
.location-pre .btn-slo{position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: rotate 10s linear infinite;}

/* section02 모션 */
.sec2 .active .bg span{transform: translateX(-50%); opacity: 1;}
.location-pre .top-title{transform: translateY(-40px); opacity: 0; transition: 1s;}
.location-pre .mid-slo{transform: translateY(40px); opacity: 0; transition: 1s;}
.location-pre .more-btn{transform: translateX(40px); opacity: 0; transition: 1s;}

.active .location-pre .top-title{transform: none; opacity: 1; transition-delay: 1.4s;}
.active .location-pre .mid-slo{transform: none; opacity: 1; transition-delay: 1.4s;}
.active .location-pre .more-btn{transform: none; opacity: 1; transition-delay: 1.8s;}

/* section03 */
.sec3 {background: url(../images/sec03-bg.jpg) #2c1915 no-repeat left center; position: relative; min-width: 1700px;}
.sec3 .section-wrap{display: flex; justify-content: flex-start; align-items: flex-end; position: relative; width: 100%; max-width: 1500px; margin: 0 auto; gap: 100px; z-index: 5;}
.sec3 .lef{width: 580px; height: 740px; position: relative; flex-shrink: 0;}
.sec3 .lef .swiper-container{ border-radius: 150px 0 150px 0; overflow: hidden; position: relative; display: block; overflow: hidden;}
.sec3 .img-cut{position: absolute; bottom:20px; left: 20px; color: #fff; font-size: 13px; letter-spacing: -0.05em; z-index: 50; transform: none;}
.sec3 .cen{width: 100%; text-align: left; position: relative;}
.sec3 .wrap-swiper{position: absolute; bottom: 40px; height: 600px; width: 100%;}

.sec3 .cen .mid{height: 255px; position: relative; margin-bottom: 100px;}
.sec3 .cen .mid .item{width: 100%; height: 100%; position: absolute; bottom: 0; left: 0;}
.sec3 .cen .top{margin-bottom: 140px;}
.sec3 .cen .icon{margin-bottom: 30px; height: 54px; width: 50px; display: flex; justify-content: center; align-items: center;}
.sec3 .cen .icon img{object-fit: contain;}
.sec3 .cen .num{font-family: 'Ashfiana', serif; font-size: 15px; color: #fff; opacity: 0.5; margin-bottom: 36px; letter-spacing: 0.13em;}
.sec3 .cen .title{font-size: 36px; line-height: 1em; letter-spacing: 0.02em; color: #e2c7ac; font-family: 'Pretendard-Bold', sans-serif; margin-bottom: 36px;}
.sec3 .cen .info{font-size: 17px; color: #dccac6; line-height: 1em;}
.sec3 .cen .info p~p{margin-top: 14px;}
.sec3 .cen .bot{display: flex; gap: 20px; align-items: center;}
.sec3 .cen .bot .current,
.sec3 .cen .bot .total{display: block; width: 20px; font-size: 17px; font-family: 'Play', sans-serif; color: #fff; font-weight: 600;}
.sec3 .cen .bot .total{opacity: 0.5;}
.sec3 .cen .bot .progress-bar{display: block; width: 100px; height: 2px; background: rgba(255,255,255,0.3); position: relative;}
.sec3 .cen .bot .bar{display: block; width: 0; height: 100%; position: absolute; background: #fff; transition: 0.4s;}
.sec3 .more-btn a{position: absolute; width: 144px; height: 144px; top: 0px; left: 0px; z-index: 100; display: flex; justify-content: center; align-items: center;}
.sec3 .more-btn em{animation: rotate 10s linear infinite; background: url(../images/sec03-more-text.png) no-repeat center; position: absolute; width: 100%; height: 100%;}

.sec3 .rig{width: 600px; height: 240px; position: absolute; bottom: 60px; right: 0; letter-spacing: 0.13em; z-index: 15;}
.sec3 .rig .swiper-container{border-radius: 0 0 0 150px; overflow: hidden;}
.sec3 .rig .img-cut{bottom: auto; top: 10px;}
.sec3 .bg{position: absolute; top: 0; right: 0; width: 50%; height: 100%; z-index: 1;}
.sec3 .bg span{width: 100%; height: 100%; background: url(../images/sec03-rigbg.jpg) no-repeat center right; background-size: contain; position: absolute; top: 0; right: 0;}

@media (max-width: 1700px){
    .sec3{background: url(../images/sec03-bg.jpg) #2c1915 no-repeat left center; }
}

/* section03 모션 */
.sec3 .cen .item p{overflow: hidden;}
.sec3 .cen .item .icon{opacity: 0; filter: blur(16px);}
.sec3 .cen .item.active .icon{animation: iconSwiper 1s forwards;}
.sec3 .cen .item .num{opacity: 0; transform: translateY(15%);}
.sec3 .cen .item.active .num{animation: numSwiper 0.8s forwards;}
.sec3 .cen .item .title span,
.sec3 .cen .item .info span{transform: translateY(150%); display: block;}
.sec3 .cen .item.active .title span{animation: textSwiper 0.8s forwards; animation-delay: 0.4s;}
.sec3 .cen .item.active .info span{animation: textSwiper 0.8s forwards; animation-delay: 0.6s;}

.sec3 .lef{transform: translateX(-60px); opacity: 0; transition: 1s;  transition-delay: 0.6s;}
.sec3 .rig{transform: translateY(60px); opacity: 0; transition: 1s;  transition-delay: 0.6s;}

.sec3 .cen .top{filter: blur(16px); opacity: 0; transition: 1.4s;}

.sec3 .cen .mid,
.sec3 .cen .bot{transform: translateY(-60px); opacity: 0; transition: 1s; transition-delay: 0.6s;}

.sec3 .active .lef,
.sec3 .active .cen .top,
.sec3 .active .cen .mid,
.sec3 .active .cen .bot,
.sec3 .active .rig{transform: none; opacity: 1; filter: none;}

@keyframes iconSwiper {
    0% {filter: blur(16px); opacity: 0;}
    100% {filter: blur(0px); opacity: 1;}
}
@keyframes numSwiper {
    0% {opacity: 0; transform: translateY(15%);}
    100% {opacity: 1; transform: translateY(0%);}
}
@keyframes textSwiper {
    0% {opacity: 0; transform: translateY(150%);}
    100% {opacity: 1; transform: translateY(0%);}
}


@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* section04 */
.sec4{background: url(../images/sec04-bg.jpg) no-repeat center; overflow: hidden;}
.sec4 .section-wrap{width: 100%; height: 100vh; max-width: 1200px; display: flex; justify-content: space-between; margin: 0 auto; overflow: hidden;}
.sec4 .lef{width:490px; height: 100%; margin-top: 0px; font-family: 'Noto Serif KR', serif;  letter-spacing: -0.05em; position: relative; z-index: 10; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 60px; box-sizing: border-box;}

.sec4 .lef .title{font-size: 40px; font-weight: 700; color: #2c1915; line-height: 52px; margin-bottom: 76px;}
.sec4 .lef .info{font-size: 17px; font-weight: 600; line-height: 34px; color: #444; margin-bottom: 64px;}
.sec4 .lef .slo{font-size: 20px; color: #2c2c2c; font-weight: 700; line-height: 34px;}
.sec4 .lef .box{margin-top: 80px; text-align: right;}

.sec4 .rig {margin-top: 180px; height: 100%; position: relative; z-index: 300;}
.sec4 .rig > div{text-align: right;}
.sec4 .rig .title{font-family: 'Pretendard-SemiBold'; font-size: 56px; letter-spacing: -0.03em; color:#8f6d52; margin-bottom: 30px;}
.sec4 .rig .detail{font-size: 17px; letter-spacing: -0.05em; line-height: 28px; color: #3f3f3f; margin-bottom: 60px;}

.sec4 .scrollable-element{width: 65vw;height: calc(100% - 180px);overflow-y: scroll;overflow-x: hidden;scroll-behavior: smooth;position: absolute;right: 0;z-index: 100; display: flex; flex-direction: column; align-items: flex-end;}
.sec4 .scrollable-element::-webkit-scrollbar{display: none;}
.sec4 .scrollable-element .item~.item{margin-top: 60px;}
.sec4 .scrollable-element .item:last-of-type{margin-bottom: 60px;}

.sec4 .item{display: block; width: 640px; opacity: 1; transition: 0.6s;}
/* .sec4 .item.active{opacity: 1;} */
.sec4 .item .photo{position: relative;}
.sec4 .item .img-cut{position: absolute; font-size: 13px; color: #fff; bottom: 10px; right: 10px;}
.sec4 .item p{padding-left: 10px; text-align: left;}
.sec4 .item .item-title{font-size: 24px; font-weight: 700; color: #2c1915; letter-spacing: -0.05em; margin-bottom: 16px; margin-top: 28px;}
.sec4 .item .item-detail{font-size: 16px; letter-spacing: -0.03em; color: #515151; line-height: 1.4;}
/* 
.sec4 .item{opacity: 0; transition: 0.8s;}
.sec4 .item.active{opacity: 1;} */


/* section04 모션 */

.sec4 .title{transform: translateX(-60px); opacity: 0; transition: 1s;}
.sec4 .info,
.sec4 .slo{transform: translateX(60px); opacity: 0; transition: 1s;}

.sec4 .active .title,
.sec4 .active .info,
.sec4 .active .slo{transform: none; opacity: 1; transition-delay: 0.6s;}

.sec4 .box{transform: translateX(-50px); transition: 1s; opacity: 0; filter: blur(16px);}
.sec4 .active .box{transform: translateX(0px); opacity: 1; filter: none;}

.sec4 .rig{transform: translateY(80px); transition: 1.5s; opacity: 0; transition-delay: 1s;}
.sec4 .active .rig{transform: translateY(0px); opacity: 1;}


/* section05 */
.sec5 {background: url(../images/sec05-bg.jpg) no-repeat center;}

.sec5 .section-wrap{display: flex; width: 100%; max-width: 1368px; flex-direction: column; margin: 0 auto; align-items: center;}

.sec5 .main-title{font-family: 'Cormorant Infant'; font-weight: 600; font-size: 50px; color: #fff; line-height: -0.02em; margin-bottom: 18px;}
.sec5 .sub-title{font-size: 17px; color: #fff; line-height: -0.04em; margin-bottom: 75px;}

/* .map-wrap{width: 100%; display: flex; justify-content: space-between;} */
.map-wrap{width: 100%; display: flex; justify-content: center;gap: 0 30px;}
.map-wrap .link-box{background: #2c1a15; color: #fff; padding: 26px 30px;}
.map-wrap .link{display: flex; justify-content: space-between; letter-spacing: -0.05em;}
.map-wrap .link~.link{margin-top: 15px;}
.map-wrap .link .btn-wrap{display: flex;}
.map-wrap .link .map-btn{width: 36px; height: 18px; display: flex; justify-content: center; align-items: center; position: relative;}
.map-wrap .link .map-btn:first-of-type::after{display: block; content: ''; width: 2px; height: 100%; background: #9b7b67; position: absolute; right: 0; top: 0;}

/* section05 motion */
.sec5 .main-title{filter: blur(16px); opacity: 0; transition: 1s;}
.sec5 .sub-title{transform: translateY(20px); opacity: 0; transition: 1s;}

.sec5 .active .main-title{opacity: 1; filter: none;}
.sec5 .active .sub-title{opacity: 1; transform: none; transition-delay: 0.6s;}

.sec5 .map01{transform: translateX(-40px); opacity: 0; transition: 1.2s;}
.sec5 .map02{transform: translateX(40px); opacity: 0; transition: 1.2s;}

.sec5 .active .map01,
.sec5 .active .map02{transform: none; opacity: 1; transition-delay: 1s;}

/*sub*/
.subwrap { padding-top:100px; } 
.sub_top { position: relative; height: 240px; background: url(../images/svis.jpg?ver=1) no-repeat center; background-size: cover; } 
.sub_tit {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;flex-direction: column;} 
.sub_tit h2 { color: #fff; font-weight: 500; font-size: 34px; text-align: center; } 
.sub_tit p { padding-top:15px; color: #fff; font-size: 16px; line-height: 22px; text-align: center; } 
.sub_tit h2 img { display:block; padding-top:20px; margin:0 auto; } 
.sub_menu { position: absolute; bottom: -61px; left: 0; width: 100%; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; background-color: #fff; z-index: 90;} 
.sub_menu .inner::after { display: block; clear: both; content: ""; } 
.sub_menu .inner > div { float: left; } 
.sub_menu .home { width: 60px; height: 60px; border-right: 1px solid #e6e6e6; border-left: 1px solid #e6e6e6; } 
.sub_menu .home a { display: block; width: 100%; height: 100%; background: url(../images/ico-home.png) no-repeat center; } 
.sub_menu .depth { position: relative; border-right: 1px solid #e6e6e6; } 
.sub_menu .depth > a { display: block; width: 240px; padding: 0 20px; background: url(../images/ico-arr.png) no-repeat 90% 50%; color: #333; font-size: 15px; line-height: 60px; } 
.sub_menu .depth ul { display: none; position: absolute; top: 60px; left: -1px; width: 101%; z-index: 10; } 
.sub_menu .depth:hover ul { display: block; border-top: 1px solid #e5e5e5; } 
.sub_menu .depth:hover ul li { border: 1px solid #e5e5e5; border-top: none; } 
.sub_menu .depth:hover ul li a { display: block; width: 100%; padding: 0 20px; background-color: #fff; color: #666; font-size: 15px; line-height: 45px; } 
.sub_menu .depth:hover ul li a:hover { background-color: #f5f5f5; color: #8f6d52; } 
.content { padding: 150px 0 120px; } 
.con_tit { margin-bottom: 60px; color: #222; font-size: 32px; text-align: center; } 

.sub_tbl { margin-top: 60px; letter-spacing: -0.05em;} 
.sub_tbl table { width: 100%; border-top: 2px solid #8f6d52; } 
.sub_tbl table th { position: relative; padding: 25px 0; border-bottom: 1px solid #dbdbdb; background: #f8f7f6; color: #353535; font-weight: 500; font-size: 18px; text-align: center; } 
.sub_tbl table td { padding: 25px 40px; border-bottom: 1px solid #dbdbdb; color: #353535; font-weight: 400; font-size: 18px; text-align: left; } 

.precaution { position: relative; padding: 30px 20px 30px 120px; margin-top: 60px; background-color: #f5f5f5;text-align:left;}
.precaution:before { display: inline-block; position: absolute; top: calc(50% - 25px); left: 40px; width: 50px; height: 50px; background: url(../images/precaution_icon.png) no-repeat; content: ""; } 
.precaution li { position: relative; padding-left: 10px; color: #999; font-size: 13px; line-height: 22px; } 

/*customer*/
.bo_tbl { margin-bottom: 60px; } 
.bo_tbl table { width: 100%; border-top: 1px solid #333; } 
.bo_tbl table tr th { padding: 30px 0 30px 40px; border-bottom: 1px solid #e5e5e5; color: #333; font-weight: 400; font-size: 17px; text-align: left; } 
.bo_tbl table tr td { border-bottom: 1px solid #e5e5e5; } 
.bo_tbl table tr td > div { display: flex; align-items: center; } 
.bo_tbl table tr td input[type="text"],
.bo_tbl table tr td input[type="number"]{-moz-appearance: textfield;height: 50px; padding: 0 20px; border: none; background-color: #f0f0f0; color: #999; font-size: 16px; outline: none; } 
.bo_tbl table tr td input[type="number"]::-webkit-outer-spin-button,
.bo_tbl table tr td input[type="number"]::-webkit-inner-spin-button{-webkit-appearance: none;}
.bo_tbl table tr td select { width: 227px; height: 50px; padding: 0 20px; border: none; background: #f0f0f0 url(../images/select-icon.png) no-repeat 90% 52%; color: #999; font-size: 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; } 
.bo_tbl table tr td select ~ select { margin-left: 10px; } 
.bo_tbl table tr td em { margin: 0 10px; color: #666; font-size: 16px; } 
.bo_tbl table tr td .personnel label ~ label { margin-left: 20px; } 
.bo_tbl table tr td .personnel label span { margin-left: 5px; } 
.bo_tbl table tr td p { margin-top: 10px; font-size: 14px; } 
.bo_tbl table tr td input:focus,
.bo_tbl table tr td select:focus { border: 1px solid #35343a; background: #fff; } 

.ck_wrap { display:flex; gap:10px; width:100%; height:100%; justify-content:flex-start; align-items:center; } 
.ck { display:flex; gap:6px; height:79px; align-items:center; } 

.terms { margin-top: 60px; } 
.terms dl { margin-bottom: 15px; } 
.terms dl dt { margin-bottom: 10px; color: #333; font-weight: 600; font-size: 20px; } 
.terms dl dd { color: #666; font-size: 15px; line-height: 20px; } 
.terms table { width: 100%; margin-bottom: 50px; border-top: 1px solid #707070; } 
.terms table th { padding: 15px 0; border-right: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5; color: #666; font-weight: 600; font-size: 14px; vertical-align: middle; } 
.terms table td { padding: 15px 0 15px 30px; border-bottom: 1px solid #d5d5d5; color: #666; font-size: 14px; line-height: 22px; } 
.terms table.type2 th:last-child { border-right: none; } 
.terms table.type2 td { padding: 15px 0; border-right: 1px solid #d5d5d5; text-align: center; } 
.terms table.type2 td:last-child { border-right: none; } 
.agree > div { display: flex; padding: 25px 40px; margin-bottom: 10px; background-color: #f5f5f5; align-items: center; justify-content: space-between; } 
.agree p { color: #333; font-size: 18px; } 
.agree p span { font-size: 15px; } 
.agree ul { display: flex; } 
.agree ul li ~ li { margin-left: 20px; } 
.agree ul li span { padding-left: 5px; } 
.btn_area { margin-top: 50px; } 
.btn_area ul { display: inline-block; overflow: hidden; } 
.btn_area ul li { float: left; } 
.btn_area ul li ~ li { margin-left: 10px; } 
.btn_area ul li.black button,
.btn_area ul li.black a { background-color: #353535; color: #fff; } 
.btn_area ul li.black button:hover,
.btn_area ul li.black a:hover { border: 1px solid #353535; background-color: #fff; color: #353535; } 
.btn_area ul li.white button,
.btn_area ul li.white a { border: 1px solid #353535; background-color: #fff; color: #353535; } 
.btn_area ul li.white button:hover,
.btn_area ul li.white a:hover { background-color: #353535; color: #fff; } 
.btn_area ul li button,
.btn_area ul li a { display: block; width: 160px; height:50px; border: none; font-weight: 600; font-size: 16px; line-height: 48px; transition: 0.2s; }

/*vd_pop*/
.white_content{ margin-left:-600px;  animation-duration:1s;animation-fill-mode: forwards;animation-name:pr;width:1200px; height:675px;  position: fixed;  top:100px;    left: 50%;z-index: 1100; opacity:0; margin-top:-100vh;}
#player3 { z-index:10000;animation-duration:1s;animation-fill-mode: forwards;animation-name:pr;position: fixed; top: 100px; left: 50%; margin-left: -600px; opacity:0; margin-top:-100vh;}
#movie-close { position: absolute; top:0px; right: -70px;z-index: 1189;}
@keyframes pr {
	0% { opacity:0; margin-top:-100vh; }
	100% {opacity:1;  margin-top:0;}
}

/*news*/
/*
.search_area { display: flex; justify-content: flex-end; } 
.search_area form { display:flex; } 
.search_area select { width: 100px; height: 35px; padding: 0 10px; margin-right: 5px; border: 1px solid #c1c1c1; color: #666; } 
.search_area input { width: 240px; height: 35px; padding: 0 10px; border: 1px solid #c1c1c1; color: #666; } 
.search_area button { width: 35px; height: 35px; border: 1px solid #c1c1c1; border-left: none; background: url(../images/search-icon.gif) no-repeat center; } 
.news_tbl { margin-top: 20px; } 
.news_tbl table { width: 100%; border-top: 2px solid #6b6b6b; table-layout: fixed; } 
.news_tbl table td { padding: 25px 0; border-bottom: 1px solid #dcdcdc; color: #666; font-size: 14px; text-align: center; } 
.news_tbl table td a { display: block; overflow:hidden; width: 80%; font-size: 18px; text-align: left; white-space:nowrap; text-overflow:ellipsis; } 
.news_tbl table tr:hover td { background: #f9f9f9; } 
*/
.search_area{display: flex;justify-content: flex-end;}
.search_area form{display:flex;}
.search_area select{border: 1px solid #c1c1c1;height: 35px;width: 100px;padding: 0 10px;color: #666;margin-right: 5px;}
.search_area input{border: 1px solid #c1c1c1;height: 35px;width: 240px;padding: 0 10px;color: #666;}
.search_area button{border: 1px solid #c1c1c1;border-left: none;background: url(../images/search-icon.gif) no-repeat center;width: 35px;height: 35px;}
.news_tbl{margin-top: 20px;}
.news_tbl table{border-top: 2px solid #6b6b6b;width: 100%;table-layout: fixed;}
.news_tbl table td{padding: 25px 0;font-size: 14px;color: #666;border-bottom: 1px solid #dcdcdc;text-align: center;}
.news_tbl table td a{display: block;text-align: left;font-size: 18px;width: 80%;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.news_tbl table tr:hover td{background: #f9f9f9;}
.new_list{border-top:2px solid #6b6b6b;border-bottom:2px solid #6b6b6b;padding: 40px 0;}
.new_list ul{display:flex;flex-wrap:wrap;}
.new_list ul li{width:calc(33.33% - 10px);margin-left:15px;}
.new_list ul li:nth-child(3n+1){margin-left:0;}
.new_list ul li:nth-child(n+4){padding-top:25px;}
.new_list ul li a{display:block;border: 1px solid #e0e0e0;height:100%;padding: 30px 20px;text-align:left;}
.new_list ul li a span{display:block;color: #ef4d6e;margin-bottom: 15px;font-weight:600;}
.new_list ul li a strong{color:#000;font-size: 24px;font-weight:400;line-height: 28px;margin-bottom: 20px;min-height: 84px;overflow:hidden;display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;}
.new_list ul li a .txt{color: #828282;line-height: 20px;font-weight: 300;min-height: 100px;overflow:hidden;display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;}
.new_list .no_list{font-size:18px;color:#444;margin: 100px 0;}

/*schedule*/
.sche_tab { margin-bottom: 60px; } 
.sche_tab::after { display: block; clear: both; content: ""; } 
.sche_tab li { position: relative; float: left; width: 50%; } 
.sche_tab li::after { display: none; position: absolute; position: absolute; left: 50%; margin-left: -7px; border-top: 8px solid #9b7b67; border-right: 8px solid transparent; border-left: 8px solid transparent; content: ""; } 
.sche_tab li a { display: block; width: 100%; border: 1px solid #dedede; background: #f0f0f0; color: #888; font-size: 16px; line-height: 52px; text-align: center; } 
.sche_tab li.on::after { display: block; } 
.sche_tab li.on a { border: 1px solid #9b7b67; background-color: #9b7b67; color: #fff; } 
.sche_tab li a:hover { border: 1px solid #9b7b67; background-color: #9b7b67; color: #fff; } 
.step { display: flex; margin-bottom: 30px; } 
.step_tit { display: flex; width: 240px; background-color: #999; align-items: center; justify-content: center; border-radius: 10px 0 0 10px; } 
.step_tit strong { padding-right: 30px; background: url(../images/step-arr.png) no-repeat right center; color: #fff; font-weight: 400; } 
.step ul { display: flex; width: calc(100% - 240px);; border: 1px solid; border: 1px solid #ddd; border-left: none; border-radius: 0px 10px 10px 0px; } 
.step ul li { display: flex; position: relative; width: 33.33%; height: 100px; padding: 0 80px; align-items: center; } 
.step ul li dl { display: inline-block; } 
.step ul li dl dt { margin-bottom: 7px; color: #9a9a9a; font-weight: 400; font-size: 14px; } 
.step ul li dl dd { font-weight: 500; font-size: 18px; } 
.step ul li::after { position: absolute; top: 50%; right: 0; width: 1px;; height: 40px; margin-top: -20px; background-color: #ddd; content: ""; } 
.step ul li:last-child:after { display: none; } 
.notice_box { padding: 30px 0; margin-bottom: 70px; background-color: #f9f9f9; color: #222; text-align: center; border-radius: 10px; } 
.notice_box p { font-size: 18px; line-height: 24px; } 
.notice_box ul { display: inline-block; margin-top: 30px; text-align: left; } 
.notice_box ul li { font-size: 16px; line-height: 26px; } 
.notice_box span { color: #ff3333; } 
.sche_tit { margin-bottom: 50px; color: #333; font-size: 30px; } 
.sche_tit strong { margin-right: 10px; color: #000; } 
.calendar_box { display: flex; margin-bottom: 70px; justify-content: space-between; } 
.calendar { width: calc(50% - 20px); border: 1px solid #efefef; } 
.calendar .top { background-color: #f1f1f1; color: #222; font-weight: 500; line-height: 50px; text-align: center; } 
.calendar .date { overflow-y: auto; height: 320px; padding: 15px 60px; background-color: #fcfcfc; } 
.calendar .date .month { position: relative; text-align: center; } 
.calendar .date .month strong { color: #222; font-weight: 400; font-size: 24px; line-height: 50px; } 
.calendar .date .month button { position: absolute; top: 50%; width: 33px; height: 33px; margin-top: -16px; border: none; } 
.calendar .date .month .prev { left: 0; background: url(../images/calen-prev.gif) no-repeat center; background-size: contain; } 
.calendar .date .month .next { right: 0; background: url(../images/calen-next.gif) no-repeat center; background-size: contain; } 
.calendar table { width: 100%; margin-top: 5px; } 
.calendar table thead th { padding: 5px 0; color: #555; font-weight: 500; } 
.calendar table td { color: #777; line-height: 35px; text-align: center; } 
.calendar table td.sun { color: #de1818; } 
.calendar table td.sat { color: #2653b9; } 
.calendar table td input { width: 100%; height: 100%; border: none; background-color:transparent; color: #777; } 
.calendar table td.res input { background-color: #d7d7d7; } 
.calendar table td.on input { background-color:  rgba(155,123,103,0.5); color:#fff; } 
.calendar table td.on input.active { background-color: #9b7b67; } 
.calendar .bot { display: flex; padding: 0 40px; background-color: #f1f1f1; line-height: 50px; justify-content: space-between; } 
.calendar .bot span { position: relative; color: #777; font-size: 14px; } 
.calendar .bot .lef span { display:inline-block; padding-left:15px; margin-right: 20px; } 
.calendar .bot .lef span::before { position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin-top: -4px; content: ""; } 
.calendar .bot .lef .res::before { background-color: #d7d7d7; } 
.calendar .bot .lef .possi::before { background-color:  rgba(155,123,103,0.5); } 
.calendar .bot .rig span strong { color: #222; font-weight: 500; } 
.calendar .date .time li ~ li { margin-top: 10px; } 
.calendar .date .time li button { padding: 5px 10px; border: none; background-color: transparent; color: #555; font-size: 16px; } 
.calendar .date .time li button.active { background-color: #9b7b67; color: #fff; } 
.terms_area { overflow-y: scroll; height: 170px; padding: 30px; margin-bottom: 20px; border: 1px solid #dedede; font-size: 14px; line-height: 1.5em; } 
.complete { padding: 60px 20px 80px; background: #eee; text-align: center; } 
.complete_tit { margin-bottom: 30px; color: #121212; font-weight: 300; font-size: 36px; } 
.complete_txt { margin-bottom: 40px; color: #121212; font-weight: 300; font-size: 18px; } 
.complete_box { display: inline-block; width: 600px; padding: 30px 0; border-top: 1px solid #222; border-bottom: 1px solid #222; color: #222; font-weight: 500; font-size: 32px; line-height: 52px; } 
.complete_box span { color: #000; font-weight: 600; } 
.confirm_tit { margin-bottom: 60px; color: #444; font-weight: 300; font-size: 26px; line-height: 1.3em; text-align: center; } 
.confirm_tit span { color: #000; font-weight: 500; } 
.confirm_tbl table { width: 100%; border-top: 1px solid #000; } 
.confirm_tbl table th { position: relative; padding: 25px 0; border-bottom: 1px solid #e5e5e5; color: #333; font-weight: 400; font-size: 18px; text-align: center; } 
.confirm_tbl table th::after { display: block; position: absolute; top: 50%; right: 0; width: 1px; height: 16px; margin-top: -8px; background-color: #999; content: ""; } 
.confirm_tbl table td { padding: 25px 0; padding-left: 40px; border-bottom: 1px solid #e5e5e5; color: #333; font-weight: 400; font-size: 18px; text-align: left; } 
.confirm_tbl table td .cancel { border: none; border-bottom: 1px solid #ff0000; background: none; color: #ff0000; font-size: 15px; line-height: 1.3em; } 
.confirm_tbl table td .no_result { padding: 40px 0; font-size: 15px; text-align: center; } 

/*pagination*/
.pagination { margin-top:80px; text-align:center; } 
.pagination ul { display:inline-block; } 
.pagination ul::after { display:block; clear:both; content:""; } 
.pagination ul li { float:left; width:40px; } 
.pagination ul li a { display:block; height:40px; color: #abaaaa; font-family: 'Spoqa Han Sans'; font-size: 20px; line-height:40px; } 
.pagination ul li.on a { color: #535353; text-decoration: underline; text-underline-position: under; } 
.pagination ul li.pg_st { margin-right:5px; } 
.pagination ul li.pg_st a { border: 1px solid #e5e5e5; background:url(../images/pg_start.png) no-repeat center; } 
.pagination ul li.pg_ed { margin-left:5px; } 
.pagination ul li.pg_ed a { border: 1px solid #e5e5e5; background:url(../images/pg_end.png) no-repeat center; } 

/*location*/
.map { display: inline-block; position: relative; } 
.map-zoom { position: absolute; top:0; left:0; width:100%; } 
.magnifier { display: none; position: absolute; width: 300px; height: 300px; background-image:url(../images/location_zoom_square.jpg); background-repeat:no-repeat; border-radius: 100%; box-shadow: 0 0 0 2px #c6a07b, 0 0 7px 7px rgb(0 0 0 / 20%); } 

/* 모집공고 */
.mo-jip{display:flex;text-align:center;}
.mo-jip a{display:block;color:#fff;display:flex;    align-items: center;justify-content: center;line-height:100px;}
.mo-jip a:nth-child(1){font-size:26px;width:790px;}
.mo-jip a:nth-child(1) span{font-weight:300;}
.mo-jip a:nth-child(2){font-size:22px;width:410px;}
.mo-jip a:nth-child(2) img{margin-right:15px}
.mj1 a:nth-child(1){background:#9b7b67;}
.mj1 a:nth-child(2){background:#2c1a15;}
.mj2 a:nth-child(1){background:#634f42;}
.mj2 a:nth-child(2){background:#392c23;}

/* tab메뉴 */
.with_tab{margin-bottom: 70px;}
.with_tab ul{width:100%;display: flex;}
.with_tab li{width: 100%; height: 50px; line-height: 48px; text-align: center; font-size: 15px; color:#888; background: #fff; border-top:1px solid #ccc; border-bottom: 1px solid #ccc;cursor:pointer;}
.with_tab li:first-child{border-left: 1px solid #ccc;}
.with_tab li:last-child{border-right: 1px solid #ccc;}
.with_tab li:first-of-type~li{border-left: 1px solid #ccc;}
.with_tab li.on{background: #9b7b67; color:#fff;}
.with_tab.tab3 li{width:33.33%;}
.with_tab.tab7 li{width:14.28%;}
.with_box{display: none; text-align: center;position:relative;}
.with_box.on{display: block;}

.with_tab.yt li{display: flex; justify-content: center; align-items: center; line-height: 1.4; font-size: 13px;}


.vd{position:relative;padding-bottom:56.25%;}
.vd iframe{position:absolute;top:0;left:0;}

.with_box .b{display:flex;justify-content:flex-end;gap: 0 10px;}
.with_box .b a{display:block;color:#fff;font-weight:500;width:160px;line-height:40px;}
.with_box .b .b1{background-color:#c09962;}
.with_box .b .b2{background-color:#4c4949;}
.with_box .b .b3{background-color:#2c1a15;}

.with_box .b_{display:flex;justify-content:flex-end;gap: 0 10px;position:absolute;right:0;top:345px;}
.with_box .b_ span{color:#fff;font-weight:500;padding: 0 30px;line-height:40px;}
.with_box .b_ .b1{background-color:#4c4949;}
.with_box .b_ .b2{background-color:#4c4949;}
.with_box .b_ .b3{background-color:#2c1a15;}

/* tab 유니트3 */
.floorplan_tab { margin-bottom:55px; border-top:1px solid #9b7b67; border-bottom:1px solid #9b7b67; } /* tab 라인 색변경*/
.floorplan_tab ul { display:flex; justify-content: center; } 
.floorplan_tab ul li{display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;}
.floorplan_tab ul li span { display:block; position:relative; color:#888; line-height:48px; cursor: pointer; width: 100%; font-size: 15px;}  
.floorplan_tab ul li a { display:block; position:relative; color:#888; line-height:48px; cursor: pointer;} 
.floorplan_tab ul li.active span,
.floorplan_tab ul li.active a { color:#9b7b67; font-size: 15px;} /* 폰트색변경*/
.floorplan_tab ul li.active span::before,
.floorplan_tab ul li.active a::before { display:inline-block; position:absolute; bottom:-1px; left:50%; margin-left:-3px; border-right:5px solid transparent;; border-bottom:6px solid #9b7b67; border-left:5px solid transparent; content:""; } /* tab 화살표색변경*/
.floorplan_tab ul li a span strong { font-weight:600; } 
.floorplan_tab ul li a span em { font-family:'Noto Sans KR'; font-size:18px; } 
/* .floorplan { padding-bottom:90px; }  */
.floorplan > li { display:none; } 
.floorplan > li .lef_box { width:25%; } 
.floorplan > li .rig_box { display:flex; width:75%; align-items: center; } 
.floor_info .info_top { padding:50px 0 40px; background:#8d7249 url(../images/sub11-bg.png) no-repeat center top; background-size:cover; text-align:center; } 
.floor_info .info_top .floor_area { color:#fff; font-family:'Noto Sans KR'; font-size:2.5rem; } 
.floor_info .info_top .floor_area span { display:inline-block; font-family:'Jost'; font-size:3.75rem; } 
.floor_info .info_top .floor_area span strong { font-weight:600; } 
.floor_info .info_top .floor_area span em { font-family:'Noto Sans KR'; font-size:2.5rem; } 
.floor_info .info_top p { margin:15px 0 20px; color:#d5ba91; font-size:1.25rem; line-height:1.3em; } 
.floor_info .info_top > span { color:#fff; font-weight:600; font-size:1.75rem; } 
.floor_info .info_bot { padding: 30px; background-color:#f7f3ea; } 
.floor_info .info_bot ul li { display:flex; padding:0 10px; border-bottom:1px solid #dedad6; color:#2a2d2e; font-size:1.125rem; line-height:36px; justify-content: space-between; } 
.floor_info .info_bot ul li:last-child { border-bottom:none; } 
.keymap img { width:100%; } 
.floor_type1,
.floor_type2 { width:50%; text-align:center; } 
.floorplan{display: none;}
.floorplan.active{display: block;}

.pdf_btn{margin-top:50px;display:flex;justify-content:center;}
.pdf_btn a{display:block;background-color: #4c4949;color:#fff;font-weight:500;padding: 0 30px;line-height: 50px}

.sub1-line{display: inline-block; width: 3px; height: 20px; position: relative; margin: 0 6px;}
.sub1-line::after{display: block; content: ''; background: #888; position: absolute; top: 50%; left: 1px; width: 1px; height: 12px; transform: translateY(-50%);}