:root {
    /*  맞춤형 오피스   */
    --c_deep: #7D4B83;
    --c_normal: #3B5F81;
    --c_light: #E5C9E8;
    --c_fcolor: #E9F0F8;
}
@media (min-width: 961px) {
    :root {
        --padding: 180px;
        --option1: 4;
        --option2: 2;
        --option1_gap: 24px;
        --option2_gap: 24px;
    }
}
/********    point 섹션     ********/
@media all and (max-width: 960px) {
    :root {
        --padding: 130px;
        --max_width: 335px;
        --option1: 2;
        --option2: 2;
        --option1_gap: 0;
        --option2_gap: 0;
    }
}
.modal {z-index: 1000;}

/********     도면 섹션     ********/
.sec-floorPlan .office-inner {position: relative; display: flex;}
.sec-floorPlan .floor-images img {vertical-align: bottom; transform-origin: bottom; transition: 1s ease-out transform;}

/********     half 섹션     ********/
.sec-half .halfSwiper::before {
background: linear-gradient(270deg, #E9F0F8 0%, rgba(233, 240, 248, 0.82) 31.96%, rgba(233, 240, 248, 0.37) 69.79%, rgba(233, 240, 248, 0.00) 100%);
}

/********     spec 섹션     ********/
/* 전체 공통 */
.spec-plus {display: flex; gap: 16px;}
.spec-plus > article {background-color: #fff; box-shadow: 6px 0px 30px 0px rgba(0, 0, 0, .1);border-radius: 20px; display: flex; flex-direction: column; flex: 1 1 auto;}
.spec-plus .office-subTitle > small {font-weight: 400; line-height: inherit; color: #aaa; vertical-align: middle; display: inline-block;}
.spec-plus .option {display: flex; flex-wrap: wrap; justify-content: center;}
.office-recomm{background: #193B59;}

@media all and (max-width: 960px) {
    .swiper-navigation {position: relative; width: 100%; margin-top: 16px; display: flex; align-items: center; gap: 10px;}
    .swiper-navigation .swiper-pagination-num {width: auto; min-width: 49px; color: rgba(255, 255, 255, .3); order: 1;}
    .swiper-navigation .swiper-pagination-num > span {min-width: 20px; display: inline-block;}
    .swiper-navigation .swiper-pagination-num .swiper-pagination-current {color: #fff;}
    .swiper-navigation .swiper-pagination-num .swiper-pagination-total {text-align: right;}
    .swiper-navigation .swiper-pagination-progress {position: relative; top: auto; left: auto; bottom: auto; right: auto; width: 100%; overflow: hidden; border-radius: 2px; order: 2;height: 2px;}
    .swiper-navigation .swiper-pagination-progressbar {background: rgba(255, 255, 255, .3);}
    .swiper-navigation .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #fff;}

    .spec-plus {margin-top: 40px; flex-direction: column;}
    .spec-plus > article {gap: 16px;padding: 50px 52px;}
    .spec-plus .office-subTitle {font-size: 22px;}
    .spec-plus .office-subTitle > small {font-size: 12px;}
    .spec-plus .option-box-1 .option > li {width: calc(100% / var(--option1));}
    .spec-plus .option-box-2 .option > li {width: calc(100% / var(--option2));}
    .spec-plus .option:is(._odd) li:first-child {width: 100%; padding: 0 25%;}
}
/* END :: 전체 공통 */
.spec-plus > article.option-box-2 {background-color: #f6f6f6;}

.explication > li::before {
    background: url('/wp-content/themes/fastfive/assets/images/office/solution_powered/icon_check_custom.png') no-repeat center;
    background-size: contain;
}

.powered-thumbs img {vertical-align: middle;}
.powered-merit,
.powered-brand {overflow: hidden;}
.powered-merit .office-inner,
.powered-brand .office-inner {display: flex; align-items: center;}

.powered-merit {padding: var(--padding) 0;}
.powered-merit .powered-thumbs {display: flex; gap: 20px 16px;}

.powered-brand {background-color: var(--c_fcolor);}
.powered-brand .office-inner {gap: 60px 120px;}
.powered-brand .powered-thumbs {order: 1;}
.powered-brand .text-box {order: 2;}

.recommend-spot {text-align: center; background-position: center !important; background-size: cover !important; background-repeat: no-repeat;}
.recommend-list figure {position: relative; border-radius: 16px; word-break: keep-all; overflow: hidden;}
.recommend-list figcaption {position: absolute; top: 0; left: 0; width: 100%; padding: 24px; line-height: 170%; font-weight: 700; color: #fff; text-align: left; display: flex; flex-direction: column;}
.recommend-list figcaption > small {font-weight: 500;}
.recommend-list figure._black figcaption {color: #222;}
.recommend-list figure._black figcaption > small {color: #444;}

@media (min-width: 961px) {
    .sec-floorPlan .office-inner {min-height: 670px;}
    .sec-floorPlan .floor-images {position: absolute; left: auto; right: -320px; bottom: 0; width: 1057px; z-index: -1;}
    .sec-floorPlan .text-box {width: auto; padding: 100px 200px 100px 0; flex: 0 1 auto; display: flex; flex-direction: column; justify-content: center;}

    .powered-merit .office-text,
    .powered-brand .office-text {margin-top: 32px;}
    .powered-merit .text-box {width: min(100%, 40%); flex: 1;}
    .powered-merit .office-text + .office-text {margin-top: 14px;}
    .powered-merit .powered-thumbs {width: 59.53%; gap: 20px 16px;}
    .powered-merit .powered-thumbs img {width: 0; max-width: 373px; flex: 1 1 auto;}
    .powered-brand .powered-thumbs {width: 1057px; margin-left: -320px;}
    .powered-brand .text-box {width: 473px; margin-right: -50px;}
    
    .spec-plus {margin-top: 80px;}
    .option-box-1,
    .option-box-2 {padding: 50px 52px;}
    .option-box-1 .option,
    .option-box-2 .option {gap: 40px var(--option1_gap);}
    .option-box-1 {max-width: 812px;}

    .recommend-spot {padding: 180px 0; background-image: url('/wp-content/themes/fastfive/assets/images/office/solution_powered/recommend_bg.jpg');}
    .office-point-slide {margin-top: 80px;}
    .recommend-list {gap: 20px;}
    .recommend-list figure {opacity: 0; transform: translateX(-100%); transition: .4s ease-in opacity, .4s ease-in transform; flex: 1;}
    .recommend-list figure:first-of-type {transform: translateX(0); z-index: 4;}
    .recommend-list figcaption {font-size: 20px; gap: 4px;}
    .recommend-list figcaption > small {font-size: 18px;}
    .__ani .recommend-list figure:nth-child(2) {transition-delay: .3s; z-index: 3;}
    .__ani .recommend-list figure:nth-child(3) {transition-delay: .6s; z-index: 2;}
    .__ani .recommend-list figure:nth-child(4) {transition-delay: .9s; z-index: 1;}
    .__ani .recommend-list figure {opacity: 1; transform: translateX(0);}

    .swiper-pagination-progress,
    .swiper-pagination-num,
    .swiper-pagination-lock {display: none;}
}
/********    point 섹션     ********/
@media all and (max-width: 960px) {
    .office-info > li{
        padding: 0 32px 0 0;
    }
    .office-info > li:nth-child(2){
        padding: 0 0 0 32px;
    }
    /********     도면 섹션     ********/
    .sec-floorPlan .office-inner {padding: 0; flex-direction: column;}
    .sec-floorPlan .floor-images {width: 100%; order: 1; overflow: hidden;}
    .sec-floorPlan .floor-images img {width: 100%; max-width: 375px; margin: 0 auto;}
    .sec-floorPlan .text-box {order: 2;}

    .powered-merit .office-text,
    .powered-brand .office-text {margin-top: 20px;}
    .powered-merit .office-inner,
    .powered-brand .office-inner {flex-direction: column;}

    .powered-merit .office-text + .office-text {margin-top: 10px;}
    .powered-merit .powered-thumbs {width: 100%; margin-top: 40px; flex-direction: column;}
    .powered-merit .powered-thumbs img {width: 100%; max-width: 335px; margin: 0 auto;}

    .powered-brand .office-inner {padding-bottom: var(--padding);}
    .powered-brand .powered-thumbs {width: calc(100% + 40px); margin: 0 -20px;}
    .powered-brand .powered-thumbs img {width: 100%;}

    /********     spec 섹션     ********/
    .sec-half .text-box {display: flex; flex-direction: column; align-items: center;}
    .sec-half .text-box .explication {width: calc(100% + 20px); max-width: 355px; margin-right: -20px;}
    .explication > li.office-text {padding-left: 21px; letter-spacing: -.32px;}
    .sec-spec .spec-plus .service-option .office-subTitle {padding-bottom: 16px;}
    .spec-plus .option-box-1 .option > li img{max-width: 100px;}
    .spec-plus .option-box-2 .option > li img{max-width: 100px;}
    .spec-plus > article{
        padding: 40px 17.5px;
    }
    .option-box-1,
    .option-box-2 {max-width: var(--max_width); margin: 0 auto; padding: 40px 18px;}
    .option-box-1 .option,
    .option-box-2 .option {gap: 8px var(--option1_gap);}

    .recommend-spot {width: 100%; padding: var(--padding) 20px 85px; background-image: url('/wp-content/themes/fastfive/assets/images/office/solution_powered/recommend_bg_m.jpg'); overflow: hidden;}
    .recommend-spot .office-inner {max-width: 375px;}
    .office-point-slide {margin-top: 40px;}
    .recommend-list figure {width: 260px; margin-right: 20px;}
    .recommend-list figcaption {font-size: 18px; gap: 8px;}
    .recommend-list figcaption > small {font-size: 16px;}

    /********     half 섹션     ********/ 
    .halfSwiper .swiper-wrapper .swiper-slide::before  {
        bottom: 0;
        background: linear-gradient(180deg, #E9F0F8 0%, rgba(233, 240, 248, 0.00) 100%);
        transform: rotate(180deg);
    }
}