@charset "utf-8";
.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_left {width: 55%;position: relative;}
.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: 45%;/* border: 1px solid #ddd; */height: 100%;padding: 2rem;}
.fac_tab {
}

.fac_tab li a{
    display: flex;
    padding: 1.5rem 0;
    align-items: center;
    position:relative;
    border: 2px solid #fff0;
}
.fac_tab li a:after {
    content:"";
    position:absolute;
    border-bottom:1px dashed #ddd;
    width: 88%;
    right:0;
    bottom:5%;
}
.fac_tab li span {
    position:relative;
    width: 10%;
    text-align: center;
    color: #fff;
    text-transform: capitalize;
    margin-right: .5rem;
    font-weight: 500;
}
.fac_tab li span:before {
    content:"";
    position:absolute;
    background-color:#7E7E7E;
    width:45px;
    height:45px;
    border-radius:50%;
    left: 50%;
    top: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
}
.fac_tab li p {
    width: 85%;
    word-break: keep-all;
}
.fac_tab li.on a {
    border: 2px solid var(--color-main);
    border-radius: 20px;
}
.fac_tab li.on span:before {background-color:var(--color-main)}
.fac_tab li.on a:after {display:none;}
.typeb .fac_tab li.on a{border-color:var(--color-main2)}
.typeb .fac_tab li.on span:before {background-color:var(--color-main2)}



.SpecialSwiper {
    position: relative;
    overflow:hidden;
    height:0;
}

.SpecialSwiper.on {
	overflow:unset;
    height:auto;
	}


/* PC */ 
@media only screen and (min-width:1280px) and (max-width: 1600px)  {
    .fac_sec {}
    .fac_left {
    width: 50%;
}
    .fac_left .SpecialSwiper img {
    height: 450px;
}
    .fac_right {
    width: 50%;
}
    .fac_tab li a {padding: 1.1rem 0;}
}

/* 테블릿 가로, 테블릿 세로 (해상도 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: 1rem;
}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    .fac_sec, .fac_sec.typeb {margin-bottom: 15%;}
    .fac_left .SpecialSwiper img {height:300px}
    .fac_left .SpecialSwiper .sl_txt {font-size:5vw}
    .fac_right {padding:0;}
    .fac_tab li a {padding:1rem}
    .fac_tab li p {font-size:4.5vw}
    .fac_tab li span {font-size:4.5vw;margin-right: 1rem;}
    .fac_tab li span:before {
    width: 40px;
    height: 40px;
}
}
