/* ===============================================================
    * tab
=============================================================== */
.tab {width: 100%; height: 100px; border-bottom: 1px solid var(--color-bg);}
.tab ul {display: flex; justify-content: space-between; align-items: center;}
.tab li {font-size: 16px; cursor: pointer; height: 100px; line-height: 100px; position: relative;}
.tab li a {position: relative;}
.tab li a:after {content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #000; opacity: 0; visibility: hidden; transition: .4s;}
.tab li.active {font-size: var(--font-md); color: #000; font-weight: 500;}
.tab li:hover a:after, .tab li.active a:after {opacity: 1; visibility: visible;}
@media (max-width: 850px){
    .tab {height: 60px; width: 100%; overflow: hidden; overflow-x: auto;}
    .tab ul {justify-content: flex-start;  width: auto;}
    .tab li {flex: none; font-size:  var(--font-tiny); height: 60px; line-height: 60px; margin-right: 30px;}
    .tab li:last-of-type {padding-right: 20px;}
    .tab li.active {font-size: var(--font-small);}
}

/* ===============================================================
    * fac-wrap
=============================================================== */
.slide-wrap {position: relative; display: flex; justify-content: space-between; align-items: flex-start;}
.fac-container .swiper-slide {height: 585px;}
.sub-ctrl {position: absolute; top: 50%; left: var(--col-col3); right: 0; transform: translateY(-50%); z-index: 100;}
.sub-ctrl .btn-nav {position: absolute; top: 50%;}
.sub-ctrl .prev {left: 0; transform: translate(-50%,-50%);}
.sub-ctrl .next {right: 0; transform: translate(50%,-50%);}

.slide-wrap .no {display: block; font-size: 30px; margin-bottom: 40px;}
.slide-wrap .txt {padding-right: 100px;}
.slide-wrap .col7 {order: 2;}
.slide-wrap .col3 {order: 1;}

@media (max-width: 850px){
    .fac-wrap .width-max {padding: 0;}
    .slide-wrap {display: block;}
    .fac-container .swiper-slide {height: 250px;}
    .sub-ctrl {left: 0; top: calc(250px / 2);}
    .sub-ctrl .btn-nav {transform: translateY(-50%);}
    .sub-ctrl .prev {left: 20px;}
    .sub-ctrl .next {right: 20px;}

    .slide-wrap .col3 {padding: 20px 20px 0;}
    .slide-wrap .no {font-size: var(--font-sub); margin-bottom: 20px;}
    .slide-wrap .txt {padding-right: 0;}
}