:root { --tw-bg-opacity: 1; --tw-border-opacity: 1; --tw-rotate: 180deg; --tw-translate-x: 0; --tw-translate-y: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-content: ""; --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .wrapper { /*height: 100%;*/ width: 100%; /* padding-top: 10px; */ } .container { padding-left: 50px; padding-right: 50px; } .main{ /*height:100%;*/ } .container-fluid { width: 100%; height: auto; padding: 0; margin: 0; } .rotate-180 { --tw-rotate: 180deg; } .label-free-span { // text-align: center; // height: 16px; line-height: 16px; word-break: break-word; color: rgb(var(--any-black)); font-size: 10px; font-weight: 700; border-style: solid; border-width: 1px; border-radius: 5px; white-space: nowrap; padding: 3px 6px; } .label-span { // text-align: center; // height: 16px; line-height: 16px; word-break: break-word; color: rgb(var(--any-black)); font-size: 10px; font-weight: 700; border-style: solid; border-width: 1px; border-radius: 5px; white-space: nowrap; padding: 3px 6px; } .bg-color-success { background-color: rgba(var(--dark-blue), var(--tw-bg-opacity)); border-color: rgba(var(--any-black), .25); color: rgb(var(--any-white)); } .bg-color-white { background-color: rgba(var(--any-white), var(--tw-bg-opacity)); border-color: rgba(var(--any-black), .25); } .bg-color-yellow { background-color: rgba(var(--any-kakaopage-yellow), var(--tw-bg-opacity)); border-color: rgba(var(--any-black), .25); } .bg-color-red { background-color: rgba(var(--any-kakaopage-yellow), var(--tw-bg-opacity)); border-color: rgba(var(--any-black), .25); } .label-time-img>img { display: block; /* width: 100%; */ height: 100%; } .label-time-des .time>img { display: block; /* width: 100%; */ height: 100%; } .label-time-des .time { height: 18px; display: flex; align-items: center; } .label-time-des .time span { display: flex; justify-content: center; align-items: center; height: 100%; border-top-right-radius: 5px; border-bottom-right-radius: 5px; background-color: rgba(var(--any-white), var(--tw-bg-opacity)); color: rgb(var(--dark-grey-01)); padding-left: 3px; padding-right: 3px; font-size: 10px; font-weight: 700; } .label-time-content .time>span { padding: 4px; color: rgb(var(--any-white)); font-size: 10px; font-weight: 700; background-color: black; border-radius: 8px; } .label-time-content .time { display: flex; align-items: center; } .label-time-content .time>img { display: block; /* width: 100%; */ height: 100%; } .tag { padding: 12px; display: flex; align-items: center; justify-content: center; background-color: rgba(var(--any-white), .1); border-radius: 6px; max-width: 100%; height: 30px; } .tag>span { color: rgb(var(--any-white)); font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .small-arrow { width: 24px; height: 24px; } .small-arrow>img { display: block; width: 100%; height: 100%; object-fit: fill; } .content-overflow { /* overflow-wrap: break-word; text-overflow: ellipsis; overflow: hidden; */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }