@charset "utf-8";
.fac_fl {display: flex;gap: 4rem;position: relative;align-items: center;}
.fac_fl .bg_title {position: absolute;font-size:130px;text-align: left;left: 38%;top: 0;}
.bg_title p {font-size: 130px;text-transform: uppercase;font-family: 'Pretendard';position: relative;line-height: 1;font-weight: 800;color: rgb(208 157 126 / 10%);}
.bg_title p span {display:block;text-transform: capitalize;position: absolute;right: 0;top: 0;margin-top: 5rem;margin-right: -13%;color: rgb(255 255 255 / 12%);-webkit-text-stroke: 1px rgb(208 157 126 / 15%);}

.fac_fl .img {width: 50%;height: 420px;border-radius: 0 450px 450px 0;overflow: hidden;position: relative;}
.fac_fl .img img {object-position:center; height:100%; width:100%; object-fit:cover}
.fac_fl .list {width: 45%;padding-top: 9rem;}
.fac_fl .list dl {display:flex;flex-wrap:wrap;width:100%;gap: 1rem;align-items: baseline;}
.fac_fl .list dt {width: 17%;background-color:var(--color-main);color:#fff;text-align:center;padding:.5rem;border-radius:2rem;font-weight: 500;}
.fac_fl .list dd {width: 77%;}
.top_mask.swiper {padding-top: 6rem;position: relative;}
.top_mask .swiper-slide {opacity: .4;overflow: hidden;transition: .5s;height: 100%;}
.top_mask .swiper-slide-active {opacity:1;transform: translateY(-15%);}
.top_mask .swiper-slide img {width: 100%;height: 400px;object-fit: cover;object-position: center;border-radius: 2rem;}
.top_mask .swiper-slide .slide_txt {color:#000;font-size:20px;text-align: center;padding-top: 1rem;opacity:0;height: 0;}
.top_mask .swiper-slide-active .slide_txt {opacity:1; height:auto}
.tab_box {width: var(--width-size);padding: 0 30px;margin: 0 auto;margin-bottom: 3rem;}
.slide_tab {background-color:#fff;padding: 1rem;border-radius: 6rem;}
.slide_tab ul {display:flex;flex-wrap: wrap;/* gap: 1rem 0; */position: relative;justify-content: center;}
.slide_tab ul li {width: 12%;text-align:center}
.slide_tab ul li:last-child {width: 24%;}
.slide_tab ul li button {width:100%;padding: 1rem 0;font-size: 19px;color: #555;font-weight: 500;}
.slide_tab ul li.act button {color:var(--color-main);font-weight: 700;}
.slide_tab ul li button i {/* display:none; */font-size:24px;font-weight:100;opacity: 0;display: none;}
.slide_tab ul li.act button i {/* display:unset; */opacity: 1;width: auto;display:unset}
.slide_tab ul:after {content:"";position:absolute;display:block;width: 93%;height:1px;background-color: #eee;top:50%;left:50%;transform:translate(-50%,-50%)}
.top_mask button {}
.arrow_btn {
    z-index: 1;
    border: unset;
    background: unset;
    position: relative;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    background-color: rgb(255 255 255 / 80%);
    transition:.4s;
    position:absolute;
    top: 0;
    margin-top: 200px;
    left:50%
}
.arrow_btn i {font-size: 1.5rem; color: #636363; transition:all .5s;}
.arrow_btn.p {left: 35%;}
.arrow_btn.n {left:unset; right: 35%}
/* PC */ 
@media only screen and (min-width:1280px) and (max-width: 1600px)  {

}

/* 테블릿 가로, 테블릿 세로 (해상도 768px ~ 1024px)*/ 
@media all and (max-width:1024px) {
    .fac_fl .bg_title {left:25%}
    .fac_fl .bg_title p  {font-size:80px}
    .bg_title p span {margin-top: 3rem;}
    .fac_fl {gap: 2rem;}
    .fac_fl .list {padding-top:2rem}
    .fac_fl .list dt {width:22%}
    .fac_fl .list dd {width:72%}
    .slide_tab {border-radius:2rem;}
    .slide_tab ul {gap: 0;}
    .slide_tab ul li {width: 16%;}
    .slide_tab ul li button {font-size: 18px;}
    .slide_tab ul li button i {font-size:20px}
    .slide_tab ul li:last-child {width:auto}
    .slide_tab ul:after {display:none}
    .top_mask.swiper {padding-top:1rem}
    .top_mask .swiper-slide img {height:260px}
    .arrow_btn {margin-top: 110px;}
    .arrow_btn.p {left: 27%;}
    .arrow_btn.n {left:unset; right: 27%}
}

/* 모바일 가로, 모바일 세로 (해상도 480px ~ 767px)*/ 
@media all and (max-width:767px) {
    .fac_fl {flex-wrap:wrap}
    .fac_fl .bg_title {display:none}
    .fac_fl .img {width:100%;height: 250px;}
    .fac_fl .list {width:100%;padding:0 3%}
    .fac_fl .list dl {gap:.5rem 1rem}
    .fac_fl .list dt {width:28%;font-size: 16px;}
    .fac_fl .list dd {width:65%}
    .common_tit p.sm {padding:0 3%; font-size:15px}
    .tab_box {padding:0 3%;margin-bottom: 0;}
    .slide_tab ul li {width: 30%} 
    .top_mask .swiper-slide img {height:180px}
    .top_mask.swiper {padding-top:4rem}
    .arrow_btn.p {left: 12%;margin-top: 100px;}
    .arrow_btn.n {left:unset;right: 12%;margin-top: 100px;}
    .slide_tab ul li button {font-size:16px}
    .slide_tab ul li button i {font-size:18px}
    .arrow_btn {width:40px; height:40px}
    .top_mask .swiper-slide .slide_txt {font-size:18px}
}