@charset "utf-8";

/* all */
.swiper {width: 100%; height: 100%;}
.main-container {padding-top: var(--header-height); padding-bottom: 140px; overflow: hidden;
    & .sec {position: relative;}
    & .sec01 {padding: 35px 0 70px;}
    & .sec03 {padding: 120px 0;}
    & .sec05 {padding-top: 120px;}
    @media (width <= 860px) {padding-bottom: 80px;
        & .sec01 {padding: 0 0 50px;}
        & .sec03 {padding: 50px 0;}
        & .sec05 {padding-top: 50px;}
    }
}
.sec-tit {display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
    & .text {display: flex; align-items: flex-end;
        & p {font-family: var(--key-font); font-size: 20px; line-height: 1; margin-right: 10px;}
        & p.type01 {background: linear-gradient(90deg, #2C9E4F 0%, #4761F9 100%); background-clip: text; -webkit-background-clip: text; color: transparent;}
        & p.type02 {color: #07BB9D;}
        & p.type03 {color: #3675FF;}
        & p.type04 {color: #7758FF;}
        & span {font-size: 15px; line-height: 1; color: #666;}
    }
    & .info {position: relative; display: flex; align-items: center; cursor: pointer;
        & i {color: #6a6a6a;}
        & p {font-size: 15px; color: #63687A; margin-left: 5px;}
        & span {position: absolute; bottom: 100%; right: 0; width: 200px; font-size: 12px; color: #fff; padding: 12px; background: #343a40; border-radius: 3px; opacity: 0; pointer-events: none; transition: all 0.2s; z-index: 9;}
        &:hover span {opacity: 1; pointer-events: visible;}
    }
    @media (width <= 640px) {
        & .text {
            & p {font-size: 16px;}
            & span {font-size: 13px;}
        }
        & .info {display: none;}
    }
}

/* section 01 */
.sec01-box {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px;
    & .visual {grid-row: 1 / 3; grid-column: 1 / 4; border-radius: 10px; overflow: hidden;
        & .swiper-slide {position: relative;}
        & .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
        & .bg img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
        & .text {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; padding: 0 100px; color: #000;}
        & .text p {font-size: 16px; font-weight: 500;}
        & .swiper-slide-active .text p {animation: fadeText both 0.3s 0.3s;}
        & .text h2 {font-family: var(--key-font); font-size: 30px; line-height: 1.4; margin: 12px 0 36px;}
        & .swiper-slide-active .text h2 {animation: fadeText both 0.3s 0.5s;}
        & .text h2 strong {font-family: var(--key-font); color: #a95b0d;}
        & .text a {display: flex; align-items: center;}
        & .swiper-slide-active .text a {animation: fadeText both 0.3s 0.7s;}
        & .text a span {font-family: var(--key-font); font-weight: 700; margin-right: 10px;}
        & .text a i {display: flex; justify-content: center; align-items: center; width: 26px; height: 26px; font-size: 15px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.8); transition: all 0.2s;}
        & .text a:hover i {transform: translateX(5px);}
        & .swiper-pg {position: absolute; top: unset; bottom: 20px; left: 0; width: 100%; display: flex; justify-content: center; gap: 15px; z-index: 9;
            & span {position: relative; width: 10px; height: 10px; background: #fff; margin: 0;
                &::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 12px); height: calc(100% + 12px); background: rgba(255, 255, 255, 0.3); border-radius: 50%; opacity: 0;}
                &.swiper-pagination-bullet-active {
                    &::before {opacity: 1;}
                }
            }
        }
    }
    & .item {display: flex; align-content: space-between; flex-wrap: wrap; padding: 25px 30px; border-radius: 10px; height: 170px;
        & .tit {display: flex; justify-content: space-between; align-items: center; width: 100%;}
        & .tit p {font-weight: 500; line-height: 1;}
        & .tit a {display: flex; justify-content: center; align-items: center; width: 20px; height: 20px; border-radius: 50%; background: #EAEDF4}
        & .tit a i {color: #7F828D; line-height: 1; transform: translateX(-0.2px);}
    }
    & .search {
        > div {width: 100%;}
        &.type01 {background: var(--color-green02); border: 1px solid var(--color-green01);}
        &.type01 .tit {}
        &.type01 .tit p {color: var(--basic-color);}
        &.type01 .tit a {border: 1px solid var(--color-green01); background: #fff;}
        &.type01 .tit a i {color: var(--basic-color);}
        &.type02 {background: var(--color-blue02); border: 1px solid var(--color-blue01);}
        &.type02 .tit {}
        &.type02 .tit p {color: var(--color-blue03);}
        &.type02 .tit a {border: 1px solid var(--color-blue01); background: #fff;}
        &.type02 .tit a i {color: var(--color-blue03);}
        & .cate {}
        & .cate ul {display: flex; justify-content: space-between;}
        & .cate ul li {width: calc(100% / 4 - 12px);}
        & .cate ul li:last-child {margin-right: 0;}
        & .cate ul li a {display: block; text-align: center;}
        & .cate ul li a img {display: block; width: 100%; aspect-ratio: 1 / 1; padding: 10px; background: #fff; border-radius: 20px;}
        & .cate ul li a > .ico {display: flex; justify-content: center; align-items: center; width: 100%; aspect-ratio: 1 / 1; padding: 6px; background: #fff; border-radius: 20px;}
        & .cate ul li a > .ico lord-icon {width: 100%; height: 100%;}
        & .cate ul li a p {font-size: 14px; font-weight: 600; line-height: 1; color: var(--basic-color); margin-top: 12px;}
        & .place {}
        & .place ul {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px 5px;}
        & .place ul li {text-align: center;}
        & .place ul li a {display: block; font-size: 14px; line-height: 1; color: var(--color-blue04); border-radius: 10px; padding: 6px 0; transition: all 0.2s;}
        & .place ul li a:hover {background: var(--color-blue03); color: #fff;}
    }
    & .today {border: 1px solid #eaedf4;
        > div {width: 100%;}
        & .list {}
        & .list ul {}
        & .list ul li {margin-bottom: 8px;}
        & .list ul li:last-child {margin-bottom: 0;}
        & .list ul li a {display: flex; align-items: center;}
        & .list ul li a span {font-size: 14px; line-height: 1; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--color-green01); color: var(--basic-color); background: var(--color-green02);}
        & .list ul li a p {font-size: 14px; line-height: 1; color: #7F828D; margin-left: 10px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
        &.type02 .list ul li a span {border: 1px solid var(--color-blue01); background: var(--color-blue02); color: var(--color-blue03);}
    }
    @media (width <= 1280px) {display: flex; justify-content: space-between; flex-wrap: wrap;
        & .visual {width: 100%; aspect-ratio: 3 / 1;}
        & .item {width: calc(100% / 4 - 15px); height: unset;
            & .tit {margin-bottom: 15px;}
        }
    }
    @media (width <= 1024px) {
        & .item {width: calc(100% / 2 - 10px);
            & .cate ul li a img {width: auto; height: 50px; margin: 0 auto;}
        }
    }
    @media (width <= 640px) {
        & .visual {aspect-ratio: 1.5 / 1;
            & .text {top: 30%; padding: 0 30px;}
            & .text p {font-size: 14px;}
            & .text h2 {margin: 5px 0 0 0;}
            & .text a {display: none;}
        }
        & .item {width: 100%;}
        & .search {
            & .cate ul li a > .ico {padding: 20px;}
        }
    }
    @media (width <= 460px) {gap: 30px;
        & .visual {
            & .text h2 {font-size: 22px;}
            & .swiper-pg {gap: 10px;
                & span {width: 6px; height: 6px;
                    &::before {width: calc(100% + 6px); height: calc(100% + 6px);}
                }
            }
        }
        & .item {padding: 0; border: 0 !important; background: #fff !important;
            &.type01 .tit p, &.type02 .tit p {font-weight: 600; color: #292E41;}
            &.type01 .tit a, &.type02 .tit a {background: #F3F3F3; border: 0;}
            &.type01 .tit a i, &.type02 .tit a i {color: #697385;}
            & .cate ul li:nth-child(1) a img {background: #E5F9EB;}
            & .cate ul li:nth-child(2) a img {background: #EAF8FF;}
            & .cate ul li:nth-child(3) a img {background: #EBECFF;}
            & .cate ul li:nth-child(4) a img {background: #FFFBD0;}
            & .cate ul li a p {font-size: 12px; color: #222;}
        }
        & .search {
            & .cate ul li a > .ico {padding: 0; aspect-ratio: 1 / 0.5;}
            & .cate ul li a > .ico lord-icon {width: 100%; height: 100%;}
            & .place ul {gap: 5px;}
            & .place ul li a {color: #71A3D1; background: #EBF6FF;}
        }
        & .today {display: none;}
    }
}

.sec01-slide {display: flex; align-items: center; padding: 15px 25px; border-radius: 10px; background: #E5EEFF80; margin-top: 40px;
    & .tit {display: flex; align-items: center; width: 200px;}
    & .tit img {width: 30px;}
    & .tit p {font-size: 18px; font-weight: 600; margin-left: 8px; white-space: nowrap;}
    & .con {position: relative; width: calc(100% - 200px); min-width: 0;
        & .swiper-slide {width: auto;}
    }
    & .con::after {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 3px; height: 100%; background-color: #f2f6ff; z-index: 9;}
    & .con .text {position: relative; display: flex; justify-content: center; align-items: center; font-size: 14px; color: #37588E; cursor: pointer; padding-right: 20px;}
    & .con .text::after {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 50%; background: #9EB4D5;}
    & .con .text strong {font-weight: 600; color: var(--basic-color-text);}
    & .con .text p {margin: 0 8px;}
    & .con .text span {}
    @media (width <= 1024px) {height: 50px; align-items: center; padding: 0 15px;
        & .tit {width: 140px;}
        & .tit img {width: 20px;}
        & .tit p {font-size: 15px;}
        & .con {width: calc(100% - 140px); height: 100%;}
        & .con .text {height: 100%;}
    }
    @media (width <= 460px) {
        & .con .text p {font-size: 14px;}
        & .con .text span {font-size: 14px;}
    }
    @media (width <= 360px) {
        & .tit {width: 90px;}
        & .tit img {display: none;}
        & .tit p { font-size: 14px; color: #4B79ED; margin-left: 0;}
        & .con {width: calc(100% - 90px);}
    }
}

/* section 02 */
.sec02-list {
    > ul {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 25px;
        > li {position: relative; background: linear-gradient(90deg, var(--basic-color) 0%, #4761F9 100%); padding-top: 4px; border-radius: 8px 8px 0 0; cursor: pointer;
            &.no-data {background: none;}
        }
        > li:nth-child(4n) .thumbs .overlay {left: auto; right: 0;}
        > li:nth-child(4n-1) .thumbs .overlay {left: auto; right: 0;}
        > li > div {background: #fff;}
    }
    & .info {position: relative; padding: 16px 24px; border-radius: 5px 5px 0 0; border: 1px solid #D1D1D150; border-bottom: 0;
        & .company {display: flex; align-items: center; margin-bottom: 15px;}
        & .company .logo {position: relative; display: flex; justify-content: center; align-items: center; max-width: 90px; height: 20px; overflow: hidden; margin-right: 8px;}
        & .company .logo img {width: 100%; max-height: 100%;}
        & .company .name {display: flex; align-items: center;}
        & .company .name p {font-size: 20px; font-weight: 600; line-height: 1; margin-right: 6px;}
        & .company .name i {transition: all 0.2s;}
        &:hover .company .name i {transform: translateX(5px);}
        & .cate {display: flex; align-items: center;}
        & .cate p {font-size: 14px; line-height: 1; font-weight: 600; color: #697385; padding: 4px 8px; border: 1px solid #E1E5ED; border-radius: 8px; margin-right: 8px;}
        & .cate span {font-size: 14px; font-weight: 600; line-height: 1; color: #292E4160; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}    
        & .favorite {position: absolute; top: 16px; right: 24px;}
        & .favorite button {}
        & .favorite button i {color: #EAEDF4; transition: all 0.2s;}
        & .favorite button.on i {color: #36BE8F;}
        & .favorite button:hover i {color: #36BE8F;}
    }
    & .thumbs {position: relative;
        & .img {position: relative; padding-top: 60%; border-radius: 0 0 8px 8px; overflow: hidden;}
        & .img img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
        & .img p {position: absolute; bottom: 20px; left: 20px; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background-size: 45px; font-size: 15px; font-weight: 700; background-repeat: no-repeat; background-position: center;}
        & .img p.type01 {color: #9CFFA8; background-image: url("/assets/site/img/main/sec02-type01.svg");}
        & .img p.type02 {color: #97EBFF; background-image: url("/assets/site/img/main/sec02-type03.svg");}
        & .img p.type03 {color: #FFFA68; background-image: url("/assets/site/img/main/sec02-type02.svg");}
        & .img p.type04 {color: #D2C8FD; background-image: url("/assets/site/img/main/sec02-type04.svg");}
        & .overlay {position: absolute; top: 0; left: 0; width: 150%; height: 150%; border-radius: 0 8px 8px 8px; overflow: hidden; opacity: 0; pointer-events: none; transition: all 0.2s;
            &.on {opacity: 1; pointer-events: visible; z-index: 9;}
            & .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
            & .bg img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
            & .text {position: absolute; bottom: 0; left: 0; display: flex; justify-content: space-between; align-items: center; width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.3); padding: 12px 24px;}
            & .text .left {display: flex; align-items: center;}
            & .text .left p {display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background-size: 45px; font-size: 15px; font-weight: 700; background-repeat: no-repeat; background-position: center;}
            & .text .left p.type01 {color: #9CFFA8; background-image: url("/assets/site/img/main/sec02-type01.svg");}
            & .text .left p.type02 {color: #97EBFF; background-image: url("/assets/site/img/main/sec02-type03.svg");}
            & .text .left p.type03 {color: #FFFA68; background-image: url("/assets/site/img/main/sec02-type02.svg");}
            & .text .left p.type04 {color: #D2C8FD; background-image: url("/assets/site/img/main/sec02-type04.svg");}
            & .text .left span {font-size: 20px; font-weight: 600; color: #fff; margin-left: 12px;}
            & .text .right {display: flex; align-items: center;}
            & .text .right p {position: relative; font-size: 14px; color: #fff; font-weight: 600; padding: 0 8px;}
            & .text .right p::after {content: ''; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 50%; background: #fff;}
            & .text .right p:first-child {padding-left: 0;}
            & .text .right p:last-child {padding-right: 0;}
        }
    }
    @media (width <= 1024px) {
        > ul {grid-template-columns: repeat(2, minmax(0, 1fr));}
    }
    @media (width <= 640px) {
        > ul {grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 20px;
            > li {
                & .info {padding: 8px 16px;
                    & .company {margin-bottom: 10px;
                        & .logo {height: 25px;}
                        & .name {
                            & p {font-size: 16px;}
                        }
                        & .favorite {display: none;}
                    }
                    & .cate {
                        & p {font-size: 12px;}
                        & span {font-size: 12px;}
                    }
                }
                & .thumbs {
                    & .img {padding-top: 50%;
                        & p {font-size: 12px; width: 45px; height: 45px; background-size: 40px;}
                    }
                    & .overlay {display: none;}
                }
            }
        }
    }
}

/* section 03 04 05 (프라임: type01 / 추천스페셜: type02 / 스페셜: type03) */
.portfolio-list {
    &.type01 > ul {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 25px;
        > li {position: relative; cursor: pointer; perspective: 2000px;
            &:hover {
                & .front {transform: rotateY(180deg); z-index: 0;}
            }
            > div {background: #fff;}
            & .front {position: relative; background: #07BB73; padding-top: 4px; border-radius: 8px; overflow: hidden; border: 1px solid #E1E5ED; backface-visibility: hidden; transform-style: preserve-3d; z-index: 1; transition: all 0.5s ease-out 0s;
                & .info {background: #fff;}
            }
            & .overlay {position: absolute; top: 0; left: 0; display: flex; flex-wrap: wrap; align-items: center; align-content: center; width: 100%; height: 100%; padding: 20px; opacity: 1; border-radius: 8px; pointer-events: none; z-index: 0; transform: rotateY(-180deg); backface-visibility: hidden; transform-style: preserve-3d; transition: all 0.5s ease-out 0s;
                &.on {transform: rotateY(0); pointer-events: visible;}
            }
        }
    }
    &.type02 > ul {display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 25px;
        > li {position: relative; background: #3675FF; padding-top: 4px; border-radius: 8px; overflow: hidden; cursor: pointer; border: 1px solid #E1E5ED;
            &.no-data {background: none; border: none;}
        }
        > li > div {background: #fff;}
    }
    &.type03 > ul {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 25px;
        > li {position: relative; background: #7758FF; padding-top: 4px; border-radius: 8px; overflow: hidden; cursor: pointer;
            &.no-data {background: none;}
        }
        > li > div {background: #fff;}
    }
    & .info {display: flex; justify-content: space-between; align-items: center; border-radius: 5px 5px 0 0; padding: 16px 24px;
        & .company {display: flex; align-items: center; width: calc(100% - 60px);}
        & .company p {font-size: 20px; font-weight: 600; line-height: 1; margin-right: 6px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
        & .company i {}
        & .place {}
        & .place p {font-size: 14px; line-height: 1; font-weight: 600; color: #697385; padding: 4px 8px; border: 1px solid #E1E5ED; border-radius: 8px;}
    }
    &.type02 .info .company p {font-size: 18px;}
    &.type03 .info {padding: 16px;}
    &.type03 .info .company p {font-size: 16px;}
    &.type03 .info .place p {font-size: 12px;}
    & .thumbs {position: relative; padding-top: 60%;
        & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
        > p {position: absolute; bottom: 20px; left: 20px; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background-size: 45px; font-size: 15px; line-height: 1; font-weight: 700; background-repeat: no-repeat; background-position: center;}
        > p.type01 {color: #9CFFA8; background-image: url("/assets/site/img/main/sec02-type01.svg");}
        > p.type02 {color: #97EBFF; background-image: url("/assets/site/img/main/sec02-type03.svg");}
        > p.type03 {color: #FFFA68; background-image: url("/assets/site/img/main/sec02-type02.svg");}
        > p.type04 {color: #D2C8FD; background-image: url("/assets/site/img/main/sec02-type04.svg");}
    }
    &.type02 .thumbs {
        > p {width: 40px; height: 40px; font-size: 12px; background-size: 35px;}
    }
    &.type03 .thumbs {
        > p {width: 40px; height: 40px; font-size: 12px; background-size: 35px;}
    }
    & .overlay {position: absolute; top: 0; left: 0; display: flex; flex-wrap: wrap; align-items: center; align-content: center; width: 100%; height: 100%; padding: 20px; opacity: 0; pointer-events: none; transition: all 0.2s;
        &.on {opacity: 1; pointer-events: visible;}
        > div {width: 100%; text-align: center;}
        & .bt {position: absolute; top: 10px; right: 15px; width: auto;}
        & .bt i {color: #EAEDF4; transition: all 0.2s;}
        & .bt:hover i {color: #36BE8F;}
        & .bt button.on i {color: #36BE8F;}
        & .name {}
        & .name img {max-width: 55px;}
        & .name p {font-size: 20px; line-height: 1; font-weight: 600; margin-top: 8px;}
        & .cate {margin: 20px 0;}
        & .cate span {font-size: 14px; line-height: 1; font-weight: 600; padding: 4px 8px; border: 1px solid #BCE5C9; border-radius: 999px; background: #fff;}
        & .cate p {display: flex; justify-content: center; align-items: center; margin-top: 8px;}
        & .cate p strong {position: relative; font-size: 14px; font-weight: 600; color: #292E4160; line-height: 1; padding: 0 4px;}
        & .cate p i {color: #292E4160; line-height: 1;}
        & .desc {}
        & .desc p {font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    }
    &.type01 .overlay {border: 1px solid #c5eede; background: #F5FEF8;
        & .cate span {color: var(--basic-color);}
    }
    &.type02 .overlay {border: 1px solid #CADFFF; background: #F2F7FF;
        & .cate {margin: 16px 0;}
        & .cate span {color: #3675FF; border: 1px solid #3675FF24;}
    }
    &.type03 .overlay {border: 1px solid #DDD5FF; background: #F8F6FF;
        & .info {display: block; padding: 0;
            & img {max-width: 50px;}
            & p {font-size: 18px; font-weight: 600; line-height: 1; margin-top: 8px;}
        }
        & .place {margin: 10px 0;
            & p {display: inline-block; font-size: 14px; font-weight: 600; line-height: 1; color: #7758FF; border: 1px solid #7758FF25; padding: 4px 8px; border-radius: 999px; background: #fff;}
        }
        & .cate {display: none;}
    }
    @media (width <= 1280px) {
        &.type01 > ul {grid-template-columns: repeat(4, minmax(0, 1fr));}
        &.type02 > ul {grid-template-columns: repeat(4, minmax(0, 1fr));}
        &.type03 > ul {grid-template-columns: repeat(4, minmax(0, 1fr));}
    }
    @media (width <= 1024px) {
        &.type01 > ul {grid-template-columns: repeat(2, minmax(0, 1fr));}
        &.type02 > ul {grid-template-columns: repeat(3, minmax(0, 1fr));}
        &.type03 > ul {grid-template-columns: repeat(3, minmax(0, 1fr));}
    }
    @media (width <= 640px) {
        &.type01 > ul {grid-template-columns: repeat(1, minmax(0, 1fr));
            > li {
                & .info {padding: 8px 16px;
                    & .company {
                        & p {font-size: 16px;}
                    }
                    & .place {
                        & p {font-size: 12px;}
                    }
                }
                & .thumbs {padding-top: 50%;
                    & p {font-size: 12px; width: 45px; height: 45px; background-size: 40px;}
                }
                & .overlay {display: none;}
                &:hover {
                    & .front {transform: rotateY(0); z-index: 1;}
                }
            }
        }
        &.type02 > ul {grid-template-columns: repeat(2, minmax(0, 1fr));
            > li {
                & .info {padding: 8px 16px;
                    & .company {
                        & p {font-size: 16px;}
                    }
                    & .place {
                        & p {font-size: 12px;}
                    }
                }
                & .thumbs {
                    & p {font-size: 10px; width: 40px; height: 40px; background-size: 35px; bottom: 12px; left: 12px;}
                }
                & .overlay {display: none;}
            }
        }
        &.type03 > ul {grid-template-columns: repeat(2, minmax(0, 1fr));
            > li {
                & .info {padding: 8px 16px;
                    & .company {
                        & p {font-size: 16px;}
                    }
                    & .place {
                        & p {font-size: 12px;}
                    }
                }
                & .thumbs {
                    & p {font-size: 10px; width: 40px; height: 40px; background-size: 35px; bottom: 12px; left: 12px;}
                }
                & .overlay {display: none;}
            }
        }
    }
}