@charset "utf-8";
.oneline {display:flex;align-items: baseline;gap: 0 2rem;}
.fac_sec {
    display: flex;
    margin: 0 0 7%;
    align-items: center;
    border: 1px solid #ddd;
    justify-content: space-between;
    border-radius: 20px;
}
.fac_sec.typeb {margin-bottom:10%}
.fac_sec1 {
    display: flex;
    /* padding-bottom: var(--sub_pd); */
    justify-content: space-between;
    flex-wrap: wrap;
}
.fac_left {width: 45%;position: relative;}
.fac_left img {border-radius: 1rem;width: 100%;height: 100%;object-fit: cover;}
.fac_left .SpecialSwiper .sl_txt{
    position: absolute;
    bottom: 0;
    background-color: rgb(47 105 136 / 80%);
    width: 100%;
    height: 12%;
    color: #fff;
    display: flex;
    justify-content: center;
    font-size: 20px;
    border-radius: 0 0 0 20px;
    align-items: center;
}
.fac_left .SpecialSwiper img{
    width: 100%;
    height: 535px;
    object-fit: cover;
    object-position: center;
    border-radius: 20px 0 0 20px;
    position: relative;
}
.fac_left .swiper-button-next, .fac_left .swiper-button-prev{
    top: unset;
    bottom: 0;
    margin-top: unset;
    margin-bottom: 1.5%;
    z-index: 2;
}
.fac_left .swiper-button-next:after, .fac_left .swiper-button-prev:after {
    font-size: 1.5rem;
    color: #fff;
}

.fac_right {width: 50%;/* border: 1px solid #ddd; */height: 100%;}
.fac_right ul {
    border-top: 2px solid var(--color-main2);
    padding: 2rem 0 0;
}
.fac_right ul li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 1rem;
}
.fac_right ul li:first-child {margin-top:0}
.fac_right ul li span {
    width: 17%;
    color: var(--color-main2);
    font-weight: 500;
    background-color: #fff;
    border-radius: 1rem;
    text-align: center;
    border: 1px solid var(--color-main2);
    padding: 5px;
}
.fac_right ul li > div {width: 79%;}
.fac_right ul li p {line-height: 1.6;}
.fac_right ul li p a {margin-left:1rem;background-color: var(--color-main);color:#fff;padding: 5px 1rem;border-radius:1rem;font-size:.9em}
.fac_sec2 {
    /* padding: 5% 0; */
}
.fac_sec3 {/* margin: 5% auto 10%; */position: relative;}
.fac_sec2 > ul {
    display: flex;
    flex-wrap: wrap;
    /* border: 1px solid #ddd; */
    /* border-top: 2px solid var(--color-main); */
    justify-content: flex-start;
    gap: 1rem 1rem;
}
.fac_sec2 > ul > li {width: 100%;padding: 2rem;display: flex;/* border-right: 1px solid #ddd; *//* border-bottom: 1px solid #ddd; */border: 1px solid #ddd;border-radius: 1rem;background-color: #fff;cursor: pointer;align-items: center;transition: .4s}
.fac_sec2 > ul > li:hover {border-color:var(--color-main)}
.fac_sec2 > ul > li:first-child, .fac_sec2 > ul > li:nth-child(2) {
    /* width: 17%; */
}
.fac_sec2 > ul > li:last-child {}
.fac_sec2 > ul > li:nth-child(3) {}
.fac_sec2 > ul > li:nth-child(4) {}
.floor_num {
    /* display: flex; */
    /* justify-content: space-between; */
    /* padding-bottom: 1rem; */
    /* align-items: center; */
    position: relative;
}
.floor_num strong {
    font-size: 30px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    width: 60px;
    height: 60px;
    background-color: var(--color-main);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.floor_num p {
    padding: .5rem 1.5rem;
    background-color: var(--color-main);
    border-radius: 2rem;
    color: #fff;
    font-weight: 500;
}
.floor_num.b1, .floor_num.f1 {
    display: flex;
    justify-content: flex-end;
}
.floor_num.f3 p {background-color: #2173D1;}
.floor_num.f4 p {background-color: #F66300;}
.floor_txt {
    display: flex;
}
.floor_txt ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px 0;
}
.floor_txt ul li {
    padding: 0 1rem;
    position: relative;
}
.floor_txt ul li:after {content:"";position:absolute;display:block;width:1px;height: 60%;background-color: #bbb;top:50%;right:0;transform:translateY(-50%)}

.SpecialSwiper {
    position: relative;
    overflow:hidden;
    height:0;
}

.SpecialSwiper.on {
	overflow:unset;
    height:auto;
	}
.imgSwiper {
    /* position: relative; */
    overflow: hidden;
    padding: var(--sub_pd) 0;
}
.imgSwiper ul {
    /* overflow: hidden; */
    position: static;
}
.imgSwiper ul li {}
.imgSwiper ul li.no_img {
    /* height: 140px; */
}
.imgSwiper ul li.no_img .no_image {
    width: 100%;
    /* display: block; */
    height: 250px;
    background-color: #f3f3f3;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1em 1em 0 0;
}
.imgSwiper ul li img {width:100%;height: 250px;object-fit: cover;object-position: center;border-radius: 10px 10px 0 0;}
.imgSwiper ul li p {text-align:center;padding: 1rem;border: 1px solid #ddd;border-radius: 0 0 10px 10px;}
.imgSwiper .slide-control button {
    background: #fff;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    position:absolute;
}
.imgSwiper .slide-control .img-prev {left: 0;top: 50%;margin-left: -30px;}
.imgSwiper .slide-control .img-next {right: 0;top: 50%;margin-right: -30px;}
.slide-control button i {font-size: 1.5rem; color: #888; transition:all .5s;}
.slide-control button:hover i {color:var(--color-main)}

/* PC */ 
@media only screen and (min-width:1280px) and (max-width: 1600px)  {
    .fac_sec1 {
    display: flex;
    align-items: flex-end;
}
    .fac_left {width: 47%;}
    .fac_left .SpecialSwiper img {
    height: 450px;
}
    .fac_right {
    width: 50%;
}
    .fac_right ul {
    padding: 1rem 0 0;
}
    .fac_tab li a {padding: 1.1rem 0;}
    .fac_sec2 > ul > li {width:23.5%;padding: 1.5rem;}
    .floor_num strong {width:50px; height:50px}
}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (max-width:1024px) {
    .fac_sec {
    flex-wrap: wrap;
}
    .fac_left {
    width: 100%;
}
    .fac_left .SpecialSwiper img {
    height: 400px;
    border-radius: 20px 20px 0 0;
}
    .fac_left .SpecialSwiper .sl_txt {border-radius: 0;height: 16%;}
    .fac_right {
    width: 100%;
    padding-top: 2rem;
}
    .imgSwiper .slide-control button {}
    .imgSwiper .slide-control .img-prev {margin-left: 10px;}
    .imgSwiper .slide-control .img-next {margin-right: 10px;}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    .fac_sec1 {margin-bottom:10%}  
    .oneline {display:block; margin-bottom:1rem}
    .oneline h4 {margin-bottom:10px}
    .fac_sec2 {margin: 1rem auto;}
    .fac_right ul li span {width:25%; margin-right:.5rem; font-size:4.5vw}
    .fac_right ul li p {
}
    .fac_sec2 > ul > li {padding: .5rem;padding-bottom: 1.5rem;width: 100%;/* min-height: 75px; */flex-wrap: wrap;}
    
    .floor_num {padding:1rem}
    .floor_num strong {font-size: 20px;width: 40px;height: 40px;}
    .floor_num p {font-size:4.5vw;}
    .floor_txt {flex-wrap: wrap;width: 100%;}
    .floor_txt ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
    .floor_txt ul li {/* font-size:4.5vw; */width: auto;/* padding-left: 3px; */padding: 0 .5rem;}
    .fac_right ul li p a {margin-left:5px;display: block;width: 55%;text-align: center;padding: 0;margin-left: 0;}
    .imgSwiper .slide-control button {width:30px; height:30px}
    .imgSwiper .slide-control button i {font-size:17px}
    .imgSwiper .slide-control .leaf .img-prev {left:10%}
    .imgSwiper .slide-control .leaf .img-next {right: 10%;}
}