body { --bg-body: #F2F2F2; --bg-main: #fff; --bg-white: #fff; --bg-white-lv2: #fff; --bg-gray-med: #f0f0f0; --bg-gray-bold: #efedef; --bg-blue-lite: #F1F6FC; --bg-blue-inverted: #dfdfdf; --bg-place: #F2F2F2; --bg-place2: #E2E2E2; --bg-black: #000; --bg-black-transparent: rgba(255,255,255,.75); --bg-input: #fff; --bg-toggle: #d7d7d7; --bg-radio: #f4f4f4; --bg-disabled: #DADADA; --cl-main: #1a1a1a; --cl-white: #fff; --cl-gray: #717171; --cl-gray-lite: #999; --cl-gray-med: #666; --cl-gray-med2: #666; --cl-gray-bold: #545454; --cl-blue: #3CA5DD; --cl-red: #ff0000; --cl-orange: #E55225; --br-black: #000; --br-gray-bold: #9b9b9b; --br-gray-med: #C9C9CA; --br-grey-reg: #DBDBDB; --br-gray-lite: #E5E5E5; --br-list: #E2E2E2; --br-list-lv2: #e3e2e3; --br-blue: #3CA5DD; --cl-shadow: #f1f1f1; --cl-shadow-none: #ddd; --cl-shadow-nav: rgba(0, 0, 0, 0.75); --cl-shadow-inset: 0 3px 6px rgba(0, 0, 0, 0.16) inset, 0 3px 6px rgba(0, 0, 0, 0.16); --cl-hover: #000; --cl-alpha: 1; --img-filter: none; --img-grayscale: none; --img-dark: 0; --img-light: 1; --img-kolom: none; --ico-invert: invert(1); --bg-title: transparent; --cl-title: #4a4a4a; --bg-panel1: #3a3a3a; --bg-panel2: #424242; --bg-most: #71C4D6; --bg-most2: #e7e7e7; --br-most: #fff; --bg-breaking1: #dedede; --bg-breaking2: #eaeaea; --cl-breaking1: #ed1c24; --cl-crumb: #E55225; --bg-share: #dcdcdc; --weight-title: 500; --bg-topic: #9b9b9b; --cl-video-disabled: 255,255,255; --bg-copy: 0,0,0; --cl-copy: #fff; --bg-info: #daeaf7; --bg-auto-bar: #bbe7ff; --bg-comment: 245, 252, 255; --bg-comment-hover: #d6eefa; --bg-comment2: #eff5f7; --bg-comment3: #E4F4FC; --bg-banner1: rgba(255, 255, 255, 0.8); --bg-adsbox: #fff; --bg-brandz: #f2f2f2; --cl-brandz-border: #fff; --cl-bangkit: #B9B9B9; --cl-parapuan: #F4D2CA; --cl-parapuan-dark: #833275; --bg-profile: #E7F7FB; --br-profile: #C9E6EE; --cl-anchor: #1FB9E1; --br-anchor: #1FB9E1; --bg-warticle: #f1f1f1; --bg-warning: #FFF7E9; --br-warning:#FFE5B7; --bg-smart: #EAF5FB; --bg-dark-sun: #ffb42b; --bg-dark-shade: transparent; --bg-dark-light: #ffb42b; --bg-submenu: #383838; --bg-submenu2: #fff; --cl-submenu: #fff; --bg-news-menu1: #f62d1d; --bg-news-menu2: #de1e0e; --bg-news-menu3: #bd190c; --bg-tren: #1FB9E1; --bg-tren-subtitle: #fff; --cl-tren: #1FB9E1; --cl-grey-border: #EBEBEB; --bg-toc: #edf1fd; --cl-toc: #3c5cb9; --cl-infografik: #AD0243; --bg-infografik: #AD0243; --cl-gray-video: #A0A4A8; --bg-video-kg: #B70000; --bg-cekfakta: #CC0000; --bg-blogger: #ebf8ff; --bg-modal: rgba(255,255,255,.9); --bg-modal-header: #F6F9F9; --cl-modal-black: #000; --cl-modal-dark: #666; --img-modal-gray: none; --cl-txt: #333; --cl-time: #959595; --cl-time2: #888; --bg-section-title: #F3F5F6; --bg-time: #333; --bg-bullet: #C9C9C9; --br-item: #E3E3E3; --br-tab: #D9D9D9; --br-tab2: #e5e5e5; --cl-tab2: #A7A7A7; --cl-channel: #BF451F; --cl-blue3: #007AFF; --cl-blue2: #007AFF; --br-item2: #dfdfdf; --filter-gray2: invert(39%) sepia(5%) saturate(18%) hue-rotate(109deg) brightness(98%) contrast(89%); --bg-btn2: #fff; --hover-bg-btn2: #fff; --hover-cl-btn2: #0068DA; --hover-br-btn2: #0068DA; --active-bg-btn2: #f1f1f1; --active-br-btn2: #0056B4; --active-cl-btn2: #0056B4; --Azure-white: #EFF6FF; --Azure-white2: #f9f9f9; --Azure-lighter: #B3D7FF; --Azure-lightest: #E1EFFF; --filter-azure: invert(46%) sepia(85%) saturate(5629%) hue-rotate(200deg) brightness(101%) contrast(109%); --cl-jingga01: #E75524; --cl-blue-2: #39A3F0; --cl-line: #E7E7E7; --filter-gray3: brightness(0) saturate(100%) invert(18%) sepia(0%) saturate(0%) hue-rotate(80deg) brightness(101%) contrast(94%); --filter-hover-gray3: brightness(0) saturate(100%) invert(92%) sepia(89%) saturate(2%) hue-rotate(203deg) brightness(111%) contrast(100%); --filter-hover-gray4: brightness(0) saturate(100%) invert(54%) sepia(88%) saturate(1563%) hue-rotate(179deg) brightness(97%) contrast(93%); --filter-hover-blue2: brightness(0) saturate(100%) invert(36%) sepia(63%) saturate(1450%) hue-rotate(178deg) brightness(91%) contrast(90%); --filter-white: brightness(0) saturate(100%) invert(100%) sepia(6%) saturate(26%) hue-rotate(238deg) brightness(107%) contrast(100%); --grey-dark2: #ECECEC; --grey-dark3: #515151; --charcoal: #333; --grey-charcoal: #A7A7A7; --platinum-light: #EFEFEF; --platinum-lighter: #F5F5F5; --yale-blue-30: #88C8F6; --yale-blue-50: #0F79C6; --bg-news: #0F79C6; --bg-tren-2: #1FB9E1; --bg-food-2: #F2C445; --bg-hype-2: #F5B432; --bg-tekno-2: #BAD107; --bg-lestari-2: #EBEBEB; --bg-umkm-2: #EBEBEB; --bg-parapuan-2: #EBEBEB; --bg-otomotif-2: #FB0404; --bg-health-2: #1FB9E1; --bg-edukasi-2: #003957; --bg-bola-2: #0DB24B; --bg-money-2: #438E10; --bg-travel-2: #00BCD4; --bg-sains-2: #0161B8; --bg-lifestyle-2: #00A783; --bg-properti-2: #B57C29; --bg-homey-2: #D8B370; --bg-fotovideo-2: #EBEBEB; --bg-pemilu: #55A3D7; --bg-ikn: #6F887B; } body.theme-dark { --bg-body: #121212; --bg-main: #121212; --bg-white: #262626; --bg-white-lv2: #3b3b3b; --bg-gray-med: #2c2c2c; --bg-gray-bold: #262626; --bg-blue-lite: #262626; --bg-blue-inverted: #3CA5DD; --bg-place: #262626; --bg-place2: #3b3b3b; --bg-black: #262626; --bg-black-transparent: rgba(18,18,18,.8); --bg-input: #1f1f1f; --bg-toggle: #646464; --bg-radio: #1f1f1f; --bg-disabled: #3b3b3b; --cl-main: rgba(255, 255, 255, 0.87); --cl-white: rgba(255, 255, 255, 0.87); --cl-gray: rgba(255, 255, 255, 0.87); --cl-gray-lite: rgba(255, 255, 255, 0.87); --cl-gray-med: rgba(255, 255, 255, 0.87); --cl-gray-med2: rgba(255, 255, 255, 0.87); --cl-gray-bold: rgba(255, 255, 255, 0.87); --cl-blue: rgba(255, 255, 255, 0.87); --cl-red: rgba(255, 255, 255, 0.87); --cl-orange: rgba(255, 255, 255, 0.87); --br-black: #404040; --br-gray-bold: #2c2c2c; --br-gray-med: #2c2c2c; --br-grey-reg: #2c2c2c; --br-gray-lite: #2c2c2c; --br-list: #1f1f1f; --br-list-lv2: #3b3b3b; --br-blue: #3b3b3b; --cl-shadow: #1f1f1f; --cl-shadow-none: transparent; --cl-shadow-nav: transparent; --cl-shadow-inset: 0 0 0 transparent inset, 0 0 0 transparent; --cl-hover: #fff; --cl-alpha: .78; --img-filter: brightness(.8) contrast(1.2); --img-grayscale: grayscale(1) invert(1) brightness(1.2); --img-dark: 1; --img-light: 0; --img-kolom: grayscale(1) brightness(.3); --ico-invert: none; --bg-title: #121212; --cl-title: rgba(255, 255, 255, 0.87); --bg-panel1: #121212; --bg-panel2: #1f1f1f; --bg-most: transparent; --bg-most2: #2c2c2c; --br-most: #262626; --bg-breaking1: #262626; --bg-breaking2: #2c2c2c; --cl-breaking1: #c12e2e; --cl-crumb: #fff; --bg-share: #3b3b3b; --weight-title: 400; --bg-topic: #3b3b3b; --cl-video-disabled: 38,38,38; --bg-copy: 255,255,255; --cl-copy: #000; --bg-info: #2c2c2c; --bg-auto-bar: #6e6e6e; --bg-comment: 38, 38, 38; --bg-comment-hover: #404040; --bg-comment2: #3b3b3b; --bg-comment3: #1f1f1f; --bg-banner1: rgba(44, 44, 44, 0.8); --bg-adsbox: #999; --bg-brandz: #1f1f1f; --cl-brandz-border: #121212; --cl-bangkit: #3b3b3b; --cl-parapuan: #c8482a; --cl-parapuan-dark: #DA674A; --bg-profile: #262626; --br-profile: #262626; --cl-anchor: rgba(255, 255, 255, 0.87); --br-anchor: #262626; --bg-warticle: #262626; --bg-warning: #262626; --br-warning: #262626; --bg-smart: #1f1f1f; --bg-dark-sun: #fff; --bg-dark-shade: #3b3b3b; --bg-dark-light: #3b3b3b; --bg-submenu: #262626; --bg-submenu2: #3b3b3b; --cl-submenu: #999; --bg-news-menu1: #262626; --bg-news-menu2: #262626; --bg-news-menu3: #3b3b3b; --bg-tren: #262626; --bg-tren-subtitle: #3b3b3b; --cl-tren: #262626; --cl-grey-border: #3b3b3b; --bg-toc: #262626; --cl-toc: rgba(255, 255, 255, 0.87); --cl-infografik: rgba(255, 255, 255, 0.87); --bg-infografik: #262626; --cl-gray-video: rgba(255, 255, 255, 0.87); --bg-video-kg: #262626; --bg-cekfakta: #262626; --bg-blogger: #646464; --bg-modal: rgba(59, 59, 59, .9); --bg-modal-header: #3b3b3b; --cl-modal-black: #fff; --cl-modal-dark: #d7d7d7; --img-modal-gray: grayscale(1) invert(1) brightness(1.2); --cl-txt: rgba(255, 255, 255, 0.87); --cl-time: rgba(255, 255, 255, 0.87); --cl-time2: rgba(255, 255, 255, 0.87); --bg-section-title: #3b3b3b; --bg-time: #262626; --bg-bullet: rgba(255, 255, 255, 0.87); --br-item: #262626; --br-tab: #646464; --br-tab2: #646464; --cl-tab2: rgba(255, 255, 255, 0.87); --cl-channel: rgba(255, 255, 255, 0.87); --cl-blue3: #fff; --cl-blue2: #3b3b3b; --br-item2: #262626; --filter-gray2: invert(100%) sepia(1%) saturate(136%) hue-rotate(333deg) brightness(109%) contrast(100%); --bg-btn2: #333; --hover-bg-btn2: #454545; --hover-cl-btn2: #fff; --hover-br-btn2: #757575; --active-bg-btn2: #222; --active-br-btn2: #9a9a9a; --active-cl-btn2: #9a9a9a; --Azure-white: #333; --Azure-white2: #444; --Azure-lighter: #999; --Azure-lightest: #222; --filter-azure: invert(100%) sepia(93%) saturate(0%) hue-rotate(319deg) brightness(108%) contrast(106%); --cl-jingga01: #E75524; --cl-blue-2: #39A3F0; --cl-line: #383838; --filter-gray3: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(39deg) brightness(104%) contrast(105%); --filter-hover-gray3: brightness(0) saturate(100%) invert(92%) sepia(89%) saturate(2%) hue-rotate(203deg) brightness(111%) contrast(100%); --filter-hover-gray4: brightness(0) saturate(100%) invert(54%) sepia(88%) saturate(1563%) hue-rotate(179deg) brightness(97%) contrast(93%); --filter-hover-blue2: brightness(0) saturate(100%) invert(36%) sepia(63%) saturate(1450%) hue-rotate(178deg) brightness(91%) contrast(90%); --grey-dark2: #3b3b3b; --grey-dark3: #fff; --charcoal: rgba(255, 255, 255, 0.87); --grey-charcoal: #e0e0e0; --platinum-light: #3b3b3b; --platinum-lighter: #3b3b3b; --yale-blue-30: #88C8F6; --yale-blue-50: #0F79C6; --bg-news: #0F79C6; --bg-tren-2: #1FB9E1; --bg-food-2: #F2C445; --bg-hype-2: #F5B432; --bg-tekno-2: #BAD107; --bg-lestari-2: #EBEBEB; --bg-umkm-2: #EBEBEB; --bg-parapuan-2: #EBEBEB; --bg-otomotif-2: #FB0404; --bg-health-2: #1FB9E1; --bg-edukasi-2: #003957; --bg-bola-2: #0DB24B; --bg-money-2: #438E10; --bg-travel-2: #00BCD4; --bg-sains-2: #0161B8; --bg-lifestyle-2: #00A783; --bg-properti-2: #B57C29; --bg-homey-2: #D8B370; --bg-fotovideo-2: #EBEBEB; --bg-pemilu: #55A3D7; --bg-ikn: #6F887B; } @media (prefers-color-scheme: dark) { body { --bg-body: #121212; --bg-main: #121212; --bg-white: #262626; --bg-white-lv2: #3b3b3b; --bg-gray-med: #2c2c2c; --bg-gray-bold: #262626; --bg-blue-lite: #262626; --bg-blue-inverted: #3CA5DD; --bg-place: #262626; --bg-place2: #3b3b3b; --bg-black: #262626; --bg-black-transparent: rgba(18,18,18,.8); --bg-input: #1f1f1f; --bg-toggle: #646464; --bg-radio: #1f1f1f; --bg-disabled: #3b3b3b; --cl-main: rgba(255, 255, 255, 0.87); --cl-white: rgba(255, 255, 255, 0.87); --cl-gray: rgba(255, 255, 255, 0.87); --cl-gray-lite: rgba(255, 255, 255, 0.87); --cl-gray-med: rgba(255, 255, 255, 0.87); --cl-gray-med2: rgba(255, 255, 255, 0.87); --cl-gray-bold: rgba(255, 255, 255, 0.87); --cl-blue: rgba(255, 255, 255, 0.87); --cl-red: rgba(255, 255, 255, 0.87); --cl-orange: rgba(255, 255, 255, 0.87); --br-black: #404040; --br-gray-bold: #2c2c2c; --br-gray-med: #2c2c2c; --br-grey-reg: #2c2c2c; --br-gray-lite: #2c2c2c; --br-list: #1f1f1f; --br-list-lv2: #3b3b3b; --br-blue: #3b3b3b; --cl-shadow: #1f1f1f; --cl-shadow-none: transparent; --cl-shadow-nav: transparent; --cl-shadow-inset: 0 0 0 transparent inset, 0 0 0 transparent; --cl-hover: #fff; --cl-alpha: .78; --img-filter: brightness(.8) contrast(1.2); --img-grayscale: grayscale(1) invert(1) brightness(1.2); --img-dark: 1; --img-light: 0; --img-kolom: grayscale(1) brightness(.3); --ico-invert: none; --bg-title: #121212; --cl-title: rgba(255, 255, 255, 0.87); --bg-panel1: #121212; --bg-panel2: #1f1f1f; --bg-most: transparent; --bg-most2: #2c2c2c; --br-most: #262626; --bg-breaking1: #262626; --bg-breaking2: #2c2c2c; --cl-breaking1: #c12e2e; --cl-crumb: #fff; --bg-share: #3b3b3b; --weight-title: 400; --bg-topic: #3b3b3b; --cl-video-disabled: 38,38,38; --bg-copy: 255,255,255; --cl-copy: #000; --bg-info: #2c2c2c; --bg-auto-bar: #6e6e6e; --bg-comment: 38, 38, 38; --bg-comment-hover: #404040; --bg-comment2: #3b3b3b; --bg-comment3: #1f1f1f; --bg-banner1: rgba(44, 44, 44, 0.8); --bg-adsbox: #999; --bg-brandz: #1f1f1f; --cl-brandz-border: #121212; --cl-bangkit: #3b3b3b; --cl-parapuan: #c8482a; --cl-parapuan-dark: #DA674A; --bg-profile: #262626; --br-profile: #262626; --cl-anchor: rgba(255, 255, 255, 0.87); --br-anchor: #262626; --bg-warticle: #262626; --bg-warning: #262626; --br-warning: #262626; --bg-smart: #1f1f1f; --bg-dark-sun: #fff; --bg-dark-shade: #3b3b3b; --bg-dark-light: #3b3b3b; --bg-submenu: #262626; --bg-submenu2: #3b3b3b; --cl-submenu: #999; --bg-news-menu1: #262626; --bg-news-menu2: #262626; --bg-news-menu3: #3b3b3b; --bg-tren: #262626; --bg-tren-subtitle: #3b3b3b; --cl-tren: #262626; --cl-grey-border: #3b3b3b; --bg-toc: #262626; --cl-toc: rgba(255, 255, 255, 0.87); --cl-infografik: rgba(255, 255, 255, 0.87); --bg-infografik: #262626; --cl-gray-video: rgba(255, 255, 255, 0.87); --bg-video-kg: #262626; --bg-cekfakta: #262626; --bg-blogger: #646464; --bg-modal: rgba(59, 59, 59, .9); --bg-modal-header: #3b3b3b; --cl-modal-black: #fff; --cl-modal-dark: #d7d7d7; --img-modal-gray: grayscale(1) invert(1) brightness(1.2); --cl-txt: rgba(255, 255, 255, 0.87); --cl-time: rgba(255, 255, 255, 0.87); --cl-time2: rgba(255, 255, 255, 0.87); --bg-section-title: #3b3b3b; --bg-time: #262626; --bg-bullet: rgba(255, 255, 255, 0.87); --br-item: #262626; --br-tab: #646464; --br-tab2: #646464; --cl-tab2: rgba(255, 255, 255, 0.87); --cl-channel: rgba(255, 255, 255, 0.87); --cl-blue3: #fff; --cl-blue2: #3b3b3b; --br-item2: #262626; --filter-gray2: invert(100%) sepia(1%) saturate(136%) hue-rotate(333deg) brightness(109%) contrast(100%); --bg-btn2: #333; --hover-bg-btn2: #454545; --hover-cl-btn2: #fff; --hover-br-btn2: #757575; --active-bg-btn2: #222; --active-br-btn2: #9a9a9a; --active-cl-btn2: #9a9a9a; --Azure-white: #333; --Azure-white2: #444; --Azure-lighter: #999; --Azure-lightest: #222; --filter-azure: invert(100%) sepia(93%) saturate(0%) hue-rotate(319deg) brightness(108%) contrast(106%); --cl-jingga01: #E75524; --cl-blue-2: #39A3F0; --cl-line: #383838; --filter-gray3: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(39deg) brightness(104%) contrast(105%); --filter-hover-gray3: brightness(0) saturate(100%) invert(92%) sepia(89%) saturate(2%) hue-rotate(203deg) brightness(111%) contrast(100%); --filter-hover-gray4: brightness(0) saturate(100%) invert(54%) sepia(88%) saturate(1563%) hue-rotate(179deg) brightness(97%) contrast(93%); --filter-hover-blue2: brightness(0) saturate(100%) invert(36%) sepia(63%) saturate(1450%) hue-rotate(178deg) brightness(91%) contrast(90%); --grey-dark2: #3b3b3b; --grey-dark3: #fff; --charcoal: rgba(255, 255, 255, 0.87); --grey-charcoal: #e0e0e0; --platinum-light: #3b3b3b; --platinum-lighter: #3b3b3b; --yale-blue-30: #88C8F6; --yale-blue-50: #0F79C6; --bg-news: #0F79C6; --bg-tren-2: #1FB9E1; --bg-food-2: #F2C445; --bg-hype-2: #F5B432; --bg-tekno-2: #BAD107; --bg-lestari-2: #EBEBEB; --bg-umkm-2: #EBEBEB; --bg-parapuan-2: #EBEBEB; --bg-otomotif-2: #FB0404; --bg-health-2: #1FB9E1; --bg-edukasi-2: #003957; --bg-bola-2: #0DB24B; --bg-money-2: #438E10; --bg-travel-2: #00BCD4; --bg-sains-2: #0161B8; --bg-lifestyle-2: #00A783; --bg-properti-2: #B57C29; --bg-homey-2: #D8B370; --bg-fotovideo-2: #EBEBEB; --bg-pemilu: #55A3D7; --bg-ikn: #6F887B; } body.theme-light { --bg-body: #F2F2F2; --bg-main: #fff; --bg-white: #fff; --bg-white-lv2: #fff; --bg-gray-med: #f0f0f0; --bg-gray-bold: #efedef; --bg-blue-lite: #F1F6FC; --bg-blue-inverted: #dfdfdf; --bg-place: #F2F2F2; --bg-place2: #E2E2E2; --bg-black: #000; --bg-black-transparent: rgba(255,255,255,.75); --bg-input: #fff; --bg-toggle: #d7d7d7; --bg-radio: #f4f4f4; --bg-disabled: #DADADA; --cl-main: #1a1a1a; --cl-white: #fff; --cl-gray: #717171; --cl-gray-lite: #999; --cl-gray-med: #666; --cl-gray-med2: #666; --cl-gray-bold: #545454; --cl-blue: #3CA5DD; --cl-red: #ff0000; --cl-orange: #E55225; --br-black: #000; --br-gray-bold: #9b9b9b; --br-gray-med: #C9C9CA; --br-grey-reg: #DBDBDB; --br-gray-lite: #E5E5E5; --br-list: #E2E2E2; --br-list-lv2: #e3e2e3; --br-blue: #3CA5DD; --cl-shadow: #f1f1f1; --cl-shadow-none: #ddd; --cl-shadow-nav: rgba(0, 0, 0, 0.75); --cl-shadow-inset: 0 3px 6px rgba(0, 0, 0, 0.16) inset, 0 3px 6px rgba(0, 0, 0, 0.16); --cl-hover: #000; --cl-alpha: 1; --img-filter: none; --img-grayscale: none; --img-dark: 0; --img-light: 1; --img-kolom: none; --ico-invert: invert(1); --bg-title: transparent; --cl-title: #4a4a4a; --bg-panel1: #3a3a3a; --bg-panel2: #424242; --bg-most: #71C4D6; --bg-most2: #e7e7e7; --br-most: #fff; --bg-breaking1: #dedede; --bg-breaking2: #eaeaea; --cl-breaking1: #ed1c24; --cl-crumb: #E55225; --bg-share: #dcdcdc; --weight-title: 500; --bg-topic: #9b9b9b; --cl-video-disabled: 255,255,255; --bg-copy: 0,0,0; --cl-copy: #fff; --bg-info: #daeaf7; --bg-auto-bar: #bbe7ff; --bg-comment: 245, 252, 255; --bg-comment-hover: #d6eefa; --bg-comment2: #eff5f7; --bg-comment3: #E4F4FC; --bg-banner1: rgba(255, 255, 255, 0.8); --bg-adsbox: #fff; --bg-brandz: #f2f2f2; --cl-brandz-border: #fff; --cl-bangkit: #B9B9B9; --cl-parapuan: #F4D2CA; --cl-parapuan-dark: #833275; --bg-profile: #E7F7FB; --br-profile: #C9E6EE; --cl-anchor: #1FB9E1; --br-anchor: #1FB9E1; --bg-warticle: #f1f1f1; --bg-warning: #FFF7E9; --br-warning:#FFE5B7; --bg-smart: #EAF5FB; --bg-dark-sun: #ffb42b; --bg-dark-shade: transparent; --bg-dark-light: #ffb42b; --bg-submenu: #383838; --bg-submenu2: #fff; --cl-submenu: #fff; --bg-news-menu1: #f62d1d; --bg-news-menu2: #de1e0e; --bg-news-menu3: #bd190c; --bg-tren: #1FB9E1; --bg-tren-subtitle: #fff; --cl-tren: #1FB9E1; --cl-grey-border: #EBEBEB; --bg-toc: #edf1fd; --cl-toc: #3c5cb9; --cl-infografik: #AD0243; --bg-infografik: #AD0243; --cl-gray-video: #A0A4A8; --bg-video-kg: #B70000; --bg-cekfakta: #CC0000; --bg-blogger: #ebf8ff; --bg-modal: rgba(255,255,255,.9); --bg-modal-header: #F6F9F9; --cl-modal-black: #000; --cl-modal-dark: #666; --img-modal-gray: none; --cl-txt: #333; --cl-time: #959595; --cl-time2: #888; --bg-section-title: #F3F5F6; --bg-time: #333; --bg-bullet: #C9C9C9; --br-item: #E3E3E3; --br-tab: #D9D9D9; --br-tab2: #e5e5e5; --cl-tab2: #A7A7A7; --cl-channel: #BF451F; --cl-blue3: #007AFF; --cl-blue2: #007AFF; --br-item2: #dfdfdf; --filter-gray2: invert(39%) sepia(5%) saturate(18%) hue-rotate(109deg) brightness(98%) contrast(89%); --bg-btn2: #fff; --hover-bg-btn2: #fff; --hover-cl-btn2: #0068DA; --hover-br-btn2: #0068DA; --active-bg-btn2: #f1f1f1; --active-br-btn2: #0056B4; --active-cl-btn2: #0056B4; --Azure-white: #EFF6FF; --Azure-white2: #f9f9f9; --Azure-lighter: #B3D7FF; --Azure-lightest: #E1EFFF; --filter-azure: invert(46%) sepia(85%) saturate(5629%) hue-rotate(200deg) brightness(101%) contrast(109%); --cl-jingga01: #E75524; --cl-blue-2: #39A3F0; --cl-line: #E7E7E7; --filter-gray3: brightness(0) saturate(100%) invert(18%) sepia(0%) saturate(0%) hue-rotate(80deg) brightness(101%) contrast(94%); --filter-hover-gray3: brightness(0) saturate(100%) invert(92%) sepia(89%) saturate(2%) hue-rotate(203deg) brightness(111%) contrast(100%); --filter-hover-gray4: brightness(0) saturate(100%) invert(54%) sepia(88%) saturate(1563%) hue-rotate(179deg) brightness(97%) contrast(93%); --filter-hover-blue2: brightness(0) saturate(100%) invert(36%) sepia(63%) saturate(1450%) hue-rotate(178deg) brightness(91%) contrast(90%); --filter-white: brightness(0) saturate(100%) invert(100%) sepia(6%) saturate(26%) hue-rotate(238deg) brightness(107%) contrast(100%); --grey-dark2: #ECECEC; --grey-dark3: #515151; --charcoal: #333; --grey-charcoal: #A7A7A7; --platinum-light: #EFEFEF; --platinum-lighter: #F5F5F5; --yale-blue-30: #88C8F6; --yale-blue-50: #0F79C6; --bg-news: #0F79C6; --bg-tren-2: #1FB9E1; --bg-food-2: #F2C445; --bg-hype-2: #F5B432; --bg-tekno-2: #BAD107; --bg-lestari-2: #EBEBEB; --bg-umkm-2: #EBEBEB; --bg-parapuan-2: #EBEBEB; --bg-otomotif-2: #FB0404; --bg-health-2: #1FB9E1; --bg-edukasi-2: #003957; --bg-bola-2: #0DB24B; --bg-money-2: #438E10; --bg-travel-2: #00BCD4; --bg-sains-2: #0161B8; --bg-lifestyle-2: #00A783; --bg-properti-2: #B57C29; --bg-homey-2: #D8B370; --bg-fotovideo-2: #EBEBEB; --bg-pemilu: #55A3D7; --bg-ikn: #6F887B; } } .popup { position: fixed; top: 0; width: 100%; height: 100%; border-radius: 0; z-index: 99; } .popup::before { position: absolute; content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } .popup--hidden { visibility: hidden; opacity: 0; -webkit-transition: all .2s ease; transition: all .2s ease; } .popup.active, .popup.-active { visibility: visible; opacity: 1; } .popupTitle { font-size: 20px; font-weight: 600; line-height: 18px; color: var(--cl-txt); } .popupWrap { position: relative; background: var(--bg-white); padding: 30px 30px 60px; border-radius: 20px; width: 702px; border: 1px solid #707070; -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.16); box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.16); } .popupClose { position: absolute; top: 30px; right: 30px; font-size: 16px; font-weight: 300; color: var(--cl-txt); } .popupClose span { vertical-align: top; font-size: 38px; font-weight: 700; line-height: 40px; color: #38A4DC; } .bulletList { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 45px; } .bulletItem { position: relative; padding: 25px; border-radius: 50%; background: #38A4DC; width: calc(100% / 4 - 45px + (45px / 4)); aspect-ratio: 1; -webkit-filter: var(--img-filter); filter: var(--img-filter); } .bulletItem:after { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 0; border-style: solid; border-width: 115px 0 0 115px; border-color: transparent transparent transparent #38A4DC; z-index: 0; } .bulletItem--full { width: 210px; } .bulletWrap { position: relative; height: 100%; border-radius: 50%; background: #2F2E41; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .bulletTitle { text-transform: uppercase; font-family: "Roboto", sans-serif; font-size: 24px; font-weight: 400; line-height: 28px; color: #fff; } .bulletTitle span { display: block; font-size: 52px; font-weight: 700; line-height: 48px; color: #fff; } .bulletPopup__content { margin-top: 80px; margin-left: 30px; padding-right: 8px; max-height: 360px; overflow-y: auto; color: var(--cl-txt); /* Firefox */ /* Chrome, Edge, and Safari */ } .bulletPopup__content { scrollbar-width: thin; scrollbar-color: #606060 #F9F9F9; } .bulletPopup__content::-webkit-scrollbar { width: 6px; } .bulletPopup__content::-webkit-scrollbar-track { background: #F9F9F9; } .bulletPopup__content::-webkit-scrollbar-thumb { background-color: #606060; border-radius: 0px; border: transparent; } .bulletPopup__content img { max-width: 100%; margin-bottom: 10px; } .bulletPopup__content ul { list-style-type: decimal; padding-left: 20px; } .qcMain { position: relative; margin-top: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; background: linear-gradient(97.28deg, #F76B1C 31.83%, #FBDA61 77.46%); height: 260px; padding: 16px 0; } .qcMain.--pilgub { background: #073659; padding: 0; border-radius: 8px; overflow: hidden; position: relative; height: 200px; margin-bottom: 18px; } .qcMain.--pilgub .realCount__region_ops { margin-top: 16px; } .qcMain.--pilgub .realCount__region_ops h3 { color: var(--cl-white); } .qcMain.--pilgub .qcHeading { padding: 16px; } .qcMain.--pilgub .qcHeading hr { margin: 16px 0; border: 0; border-top: 1px solid rgba(199, 199, 199, 0.5); } .qcMain.--pilgub .qcHeading-logo ul { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; padding: 0; margin: 0; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (min-width: 768px) { .qcMain.--pilgub .qcHeading-logo ul { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; } } .qcMain.--pilgub .qcHeading-logo ul li { list-style: none; height: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .qcMain.--pilgub .qcHeading-logo ul li img { height: auto; width: revert-layer; } .qcMain.--pilgub .qcHeading-title { font-size: 18px; font-weight: 400; line-height: 18px; color: #fff; margin-top: 14px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; } .qcMain.--pilgub .qcHeading-title span { font-size: 24px; font-weight: 700; line-height: 16px; } .qcMain.--pilgub .quickCount-paslon { padding-top: 16px; padding-bottom: 16px; background: linear-gradient(269.97deg, #0F79C6 4.13%, #0463A7 79.47%); border-top-left-radius: 8px; border-bottom-left-radius: 8px; overflow: hidden; position: relative; } .qcMain.--pilgub .quickCount-paslon::before { background-image: url("../../asset/images/topil/pemilu/ornament-bg.svg"); background-repeat: no-repeat; background-position: center; background-size: contain; position: absolute; content: ''; pointer-events: none; width: 100%; height: 100%; left: 0; top: 0; } .qcMain.--pilgub .quickCount-paslon-itemImg { width: 140px; height: 140px; } .qcMain.--pilgub .quickCount-paslon-itemImg img { -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 80%; height: 80%; top: 50%; left: 50%; z-index: 1; } .qcMain.--pilgub .quickCount-paslon-itemImg svg { z-index: 1; } .qcMain.--pilgub .quickCount-paslon-itemCircle { stroke-width: 14px; cx: 70; cy: 70; r: 63; } .qcMain.--pilgub .quickCount-paslon-label { height: 64px; z-index: 1; bottom: -4px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: auto; position: absolute; } .qcMain .qcHeading { border-left-color: transparent; color: #fff; } .qcMain .quickCount-paslon { width: calc(100% - 267px); height: 100%; gap: 0; } .qcMain .quickCount-paslon-item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .qcMain .quickCount-paslon-itemImg { width: 200px; height: 200px; } .qcMain .quickCount-paslon-itemImg img { height: 207px; bottom: -11px; left: calc(50% - 0.5PX); } .qcMain .quickCount-paslon-itemCircle { stroke-width: 22px; cx: 100; cy: 100; r: 89; } .qcMain ~ .colWrap { width: calc(100% - 300px); } .qcResult { position: relative; padding-bottom: 40px; } .qcWrap { margin-top: 20px; } .qcHeading { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; border-left: 2px solid #E75524; padding-left: 14px; min-width: 280px; line-height: 1; color: var(--cl-txt); } .qcHeading__title { font-size: 36px; font-weight: 700; } .qcHeading__lead { font-size: 20px; font-weight: 500; line-height: 1.2; } .qcVote__col { padding: 16px 0px; margin-left: 16px; margin-right: 16px; border-top: 1px solid #E0E0E0; } .qcVote__title { font-size: 14px; line-height: 1.2; color: #808080; } .qcVote__ctn { margin-top: 4px; font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--cl-txt); } .qcVote__list { gap: 37px; } .qcVote__item { position: relative; width: 78px; text-align: center; } .qcVote__item::after { content: ''; display: block; position: absolute; top: 50%; left: -21px; width: 5px; height: 5px; border-radius: 5px; background: #FED281; } .qcVote__item:first-child::after { content: none; } .qcPaslon { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .qcPaslon__item { padding: 16px; margin-left: 18px; margin-right: 18px; text-align: center; width: calc(100% / 3); } .qcPaslon__img { position: relative; width: 181px; height: 180px; background-color: #f0f0f0; border-radius: 50%; } .qcPaslon__img img { border-radius: 100%; -webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); } .qcPaslon__num { position: absolute; top: 0; width: 48px; height: 48px; border-radius: 48px; background: linear-gradient(135deg, #FBDA61 2.88%, #F76B1C 98.13%); -webkit-box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4); box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.4); -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 24px; font-weight: 700; line-height: normal; color: #fff; } .qcPaslon__name { margin-top: 16px; font-size: 20px; font-weight: 700; line-height: normal; color: var(--cl-txt); } .qcResult__item { display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 153px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; -ms-flex-wrap: wrap; flex-wrap: wrap; } .qcResult__item:nth-child(odd) { background: var(--platinum-lighter); } .qcResult__item:nth-child(even) { background: var(--bg-most2); } .qcResult__item.-ads { background-color: #FFF6E6; } .qcResult__inst { width: 267px; padding: 24px 16px; font-size: 20px; font-weight: 700; line-height: normal; color: var(--cl-txt); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px; } .qcResult__inst.--logo { position: relative; } .qcResult__inst.--logo::before { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background-color: rgba(255, 255, 255, 0.87); opacity: var(--img-dark); } .qcResult__inst.--logo .qcResult__logo { position: relative; z-index: 1; } .qcResult__logo { width: 165px; height: 60px; margin: 0 auto; } .qcResult__logo img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: center; object-position: center; } .qcResult__logo ~ .qcResult__vote { -ms-flex-preferred-size: auto; flex-basis: auto; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; border-top: transparent; padding: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 2px; } .qcResult__logo ~ .qcResult__vote .qcResult__vote__item { display: block; text-align: left; font-size: 12px; } .qcResult__logo ~ .qcResult__vote .qcResult__vote__item:not(:first-of-type)::before { content: none; } .qcResult__ads { color: var(--Lust-light, #EE4A4A); font-size: 14px; font-style: normal; font-weight: 700; line-height: normal; } .qcResult__num { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .qcResult__percent { padding: 24px 8px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: center; height: 100%; border-left: 1px solid #E0E0E0; font-size: 32px; font-weight: 700; line-height: normal; color: var(--cl-txt); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .qcResult__vote { -ms-flex-preferred-size: 100%; flex-basis: 100%; border-top: 1px solid #E0E0E0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 21px; color: #808080; font-size: 14px; min-height: 30px; } .qcResult__vote span { font-weight: 700; color: var(--cl-txt) 333; } .qcResult__vote__item { position: relative; } .qcResult__vote__item:not(:first-of-type)::before { position: absolute; content: ''; top: 7px; left: -12px; width: 5px; height: 5px; background: #FED281; border-radius: 50%; -webkit-border-radius: 50%; } .qcDisc { padding-left: 14px; margin-top: 28px; border-left: 2px solid #E75524; font-size: 14px; line-height: normal; color: #515151; } .qcTab__content { position: relative; } .qcTab__logo { position: absolute; top: 15px; left: 12px; height: 30px; max-width: 120px; } .qcTab__logo img { width: auto; height: 100%; -o-object-fit: contain; object-fit: contain; -o-object-position: top; object-position: top; } .qcTab__nav { display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 1px solid var(--bg-most2); position: relative; } .qcTab__nav__list { position: relative; } .qcTab__nav__list a { display: block; padding: 16px 24px; cursor: pointer; font-size: 16px; font-weight: 700; line-height: 19px; color: var(--cl-txt); } .qcTab__nav__list.-active a { border-bottom: 1px solid #0F79C6; color: #0F79C6; } .qcTab__subnav { position: relative; margin-top: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .qcTab__subnav__list { position: relative; } .qcTab__subnav__list a { display: block; padding: 0 12px; cursor: pointer; font-size: 14px; font-weight: 500; line-height: normal; color: #000; } .qcTab__subnav__list.-active a { color: #0F79C6; } .qcTab__subnav__list:not(:first-child) a { border-left: 1px solid #BCBCBC; } .qcTab__content { display: none; } .qcTab__content.-active { display: block; } .qcTab__bar { margin-top: 32px; background: var(--bg-most2); padding: 24px 12px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 4px; height: 363px; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .qcTab__bar ~ .qcResult__vote { background: var(--bg-most2); padding: 10px 0; margin-top: -10px; } .qcTab__bar__item { position: relative; max-height: 241px; width: 56px; } .qcTab__bar__item.-p1 .qcTab__bar__graph { background: #68E27C; } .qcTab__bar__item.-p2 .qcTab__bar__graph { background: #4F0A05; } .qcTab__bar__item.-p3 .qcTab__bar__graph { background: #DB3732; } .qcTab__bar__item.-p4 .qcTab__bar__graph { background: #F9E366; } .qcTab__bar__item.-p5 .qcTab__bar__graph { background: #273FA1; } .qcTab__bar__item.-p6 .qcTab__bar__graph { background: #93231B; } .qcTab__bar__item.-p7 .qcTab__bar__graph { background: #00BCEB; } .qcTab__bar__item.-p8 .qcTab__bar__graph { background: #FF5000; } .qcTab__bar__item.-p9 .qcTab__bar__graph { background: #000000; } .qcTab__bar__item.-p10 .qcTab__bar__graph { background: #FA8E00; } .qcTab__bar__item.-p11 .qcTab__bar__graph { background: #052F66; } .qcTab__bar__item.-p12 .qcTab__bar__graph { background: #0154A2; } .qcTab__bar__item.-p13 .qcTab__bar__graph { background: #014224; } .qcTab__bar__item.-p14 .qcTab__bar__graph { background: #003399; } .qcTab__bar__item.-p15 .qcTab__bar__graph { background: #E62129; } .qcTab__bar__item.-p16 .qcTab__bar__graph { background: #244282; } .qcTab__bar__item.-p17 .qcTab__bar__graph { background: #50B33F; } .qcTab__bar__item.-p24 .qcTab__bar__graph { background: #000; } .qcTab__bar__graph { width: 56px; position: absolute; bottom: 60px; -webkit-animation: show-bar 1.2s 0.4s forwards; -moz-animation: show-bar 1.2s 0.4s forwards; animation: show-bar 1.2s 0.4s forwards; } .qcTab__bar__graph span { position: absolute; font-size: 12px; font-weight: 700; line-height: 14px; color: var(--cl-txt); top: -16px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); } .qcTab__bar__img { width: 56px; height: 56px; padding: 4px; background: #ffffff; margin-top: 4px; position: absolute; bottom: 0; } .qcTab__bar__img img { -o-object-fit: contain; object-fit: contain; } .qcTop { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .quickCount-paslon { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; margin: 0 -16px; gap: 12px; width: 100%; } @media (max-width: 350px) { .quickCount-paslon { margin: 0 -5px; gap: 6px; } } @media (min-width: 768px) { .quickCount-paslon { width: auto; gap: 8px; margin: 0; } } @media (min-width: 1000px) { .quickCount-paslon { gap: 16px; } } .quickCount-paslon-wrap { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; z-index: 2; gap: 8px; } @media (min-width: 768px) { .quickCount-paslon-wrap { gap: 10px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } } @media (min-width: 900px) { .quickCount-paslon-wrap { gap: 20px; } } .quickCount-paslon-item { position: relative; } .quickCount-paslon-itemImg { position: relative; width: 100px; height: 100px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; } @media (min-width: 1000px) { .quickCount-paslon-itemImg { width: 120px; height: 120px; } } .quickCount-paslon-itemImg img { position: relative; -o-object-fit: contain; object-fit: contain; width: auto; height: 102px; position: absolute; -webkit-transform: translateX(-50%); transform: translateX(-50%); bottom: -4.5px; left: calc(50%); z-index: 1; } @media (min-width: 1000px) { .quickCount-paslon-itemImg img { width: auto; height: 129px; bottom: -8.5px; left: calc(50% - 0.5px); } } .quickCount-paslon-itemImg svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; } .quickCount-paslon-itemCircle { stroke-width: 12; stroke: #E75524; stroke-linecap: round; fill: none; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: center; transform-origin: center; cx: 50; cy: 50; r: 44; opacity: 0; } @media (min-width: 1000px) { .quickCount-paslon-itemCircle { cx: 60; cy: 60; r: 54; } } .quickCount-paslon-itemCircle.--white { opacity: 1; stroke: #EFEFEF; stroke-dashoffset: 1; } .quickCount-paslon-itemCircle.-show { opacity: 1; } .quickCount-paslon-itemPercent { color: #000; text-align: center; font-size: 24px; font-weight: 700; line-height: normal; } .quickCount-paslon-itemName { font: 700 12px/14px 'Roboto', sans-serif; margin-top: 4px; text-align: center; } @media (min-width: 1000px) { .quickCount-paslon-itemName { margin-top: 17px; } } @media (min-width: 1000px) { .quickCount-paslon-itemName { font-size: 16px; line-height: 18px; } } .quickCount-sponsor { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px; width: 100%; position: relative; padding: 15px; } .quickCount-sponsor-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .quickCount-sponsor-lead { font: 500 12px/12px 'Roboto', sans-serif; color: var(--cl-txt); } .quickCount-sponsor-item { width: 60px; height: 40px; } .quickCount-sponsor-item img { -o-object-fit: contain; object-fit: contain; -o-object-position: left; object-position: left; width: 100%; height: 100%; } @-webkit-keyframes show-bar { 0% { height: 0; } 100% { height: 100%; } } .qcWrap { margin-top: 20px; } .qcHeading { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; border-left: 2px solid #E75524; padding-left: 14px; width: 267px; line-height: 1; color: var(--cl-txt); } .qcHeading__title { font-size: 36px; font-weight: 700; } .qcHeading__lead { font-size: 20px; font-weight: 500; line-height: 1.2; } .qcTop { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .qcTab__content { position: relative; } .qcTab__nav { display: -webkit-box; display: -ms-flexbox; display: flex; border-bottom: 1px solid var(--bg-most2); position: relative; } .qcTab__nav__list { position: relative; } .qcTab__nav__list a { display: block; padding: 16px 24px; cursor: pointer; font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--cl-txt); } .qcTab__nav__list.-active a { border-bottom: 1px solid #0F79C6; color: #0F79C6; } .qcTab__subnav { position: relative; margin-top: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .qcTab__subnav__list { position: relative; } .qcTab__subnav__list a { display: block; padding: 16px 24px; cursor: pointer; font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--cl-txt); border-bottom: 2px solid var(--bg-most2); } .qcTab__subnav__list.-active a { color: #0F79C6; border-bottom: 2px solid #0F79C6; } .qcTab__content { display: none; } .qcTab__content.-active { display: block; } .qcTab__bar { margin-top: 32px; background: var(--bg-most2); padding: 24px 12px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 4px; height: 363px; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .qcTab__bar ~ .qcResult__vote { background: var(--bg-most2); padding: 10px 0; margin-top: -10px; } .qcTab__bar__item { position: relative; max-height: 241px; width: 56px; } .qcTab__bar__item.-p1 .qcTab__bar__graph { background: #68E27C; } .qcTab__bar__item.-p2 .qcTab__bar__graph { background: #4F0A05; } .qcTab__bar__item.-p3 .qcTab__bar__graph { background: #DB3732; } .qcTab__bar__item.-p4 .qcTab__bar__graph { background: #F9E366; } .qcTab__bar__item.-p5 .qcTab__bar__graph { background: #273FA1; } .qcTab__bar__item.-p6 .qcTab__bar__graph { background: #93231B; } .qcTab__bar__item.-p7 .qcTab__bar__graph { background: #00BCEB; } .qcTab__bar__item.-p8 .qcTab__bar__graph { background: #FF5000; } .qcTab__bar__item.-p9 .qcTab__bar__graph { background: #000000; } .qcTab__bar__item.-p10 .qcTab__bar__graph { background: #FA8E00; } .qcTab__bar__item.-p11 .qcTab__bar__graph { background: #052F66; } .qcTab__bar__item.-p12 .qcTab__bar__graph { background: #0154A2; } .qcTab__bar__item.-p13 .qcTab__bar__graph { background: #014224; } .qcTab__bar__item.-p14 .qcTab__bar__graph { background: #003399; } .qcTab__bar__item.-p15 .qcTab__bar__graph { background: #E62129; } .qcTab__bar__item.-p16 .qcTab__bar__graph { background: #244282; } .qcTab__bar__item.-p17 .qcTab__bar__graph { background: #50B33F; } .qcTab__bar__item.-p24 .qcTab__bar__graph { background: #000; } .qcTab__bar__graph { width: 56px; position: absolute; bottom: 60px; -webkit-animation: show-bar 1.2s 0.4s forwards; -moz-animation: show-bar 1.2s 0.4s forwards; animation: show-bar 1.2s 0.4s forwards; } .qcTab__bar__graph span { position: absolute; font-size: 12px; font-weight: 700; line-height: 14px; color: var(--cl-txt); top: -30px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); } .qcTab__bar__img { width: 56px; height: 56px; padding: 4px; background: #ffffff; margin-top: 4px; position: absolute; bottom: 0; } .qcTab__bar__img img { -o-object-fit: contain; object-fit: contain; } .qcTab__bar__seat { position: absolute; top: -16px; font-size: 11px; font-weight: 700; width: 56px; text-align: center; } .realCount { font: 400 14px/1.17 "Roboto", sans-serif; color: var(--cl-txt); } .realCount__source { margin-top: 4px; color: #808080; } .realCount__content { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 58px; margin-left: -20px; margin-right: -20px; } .realCount__item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; position: relative; -ms-flex-preferred-size: calc(100%/3); flex-basis: calc(100%/3); padding-left: 20px; padding-right: 20px; } .realCount__item.-p1 .realCount__graph { background: #A5D63C; } .realCount__item.-p2 .realCount__graph { background: #09BCE3; } .realCount__item.-p3 .realCount__graph { background: #E65225; } .realCount__item.-p4 .realCount__graph { background: #FFCA2A; } .realCount__graph { position: absolute; width: 100%; bottom: 0; border-top-left-radius: 10px; border-bottom-right-radius: 10px; -webkit-animation: show-bar 1.2s 0.4s forwards; animation: show-bar 1.2s 0.4s forwards; } .realCount__graphbar { position: relative; max-height: 110px; } .realCount__percent { position: absolute; right: 0; top: -27px; font: 700 24px/1.18 "Roboto", sans-serif; letter-spacing: -.8px; z-index: 2; } .realCount__paslon { margin-top: 4px; font: 500 20px/1.17 "Roboto", sans-serif; letter-spacing: -.1px; color: var(--charcoal-light); } .realCount__text { position: relative; margin-top: 10px; } .realCount__nourut { background-color: var(--cl-black); width: 19px; height: 19px; position: absolute; left: 0; bottom: -10px; border-radius: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 1; font-size: 10px; font-weight: 500; color: var(--platinum-lighter); } .realCount__img { position: absolute; left: 9px; bottom: -10px; z-index: 1; width: 60px; height: 60px; border-radius: 100%; overflow: hidden; background-color: #D9D9D9; } .realCount__img img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 90%; position: absolute; bottom: 0; } .realCount__region_ops { margin: 32px 0 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; } .realCount__region_ops h3 { font-size: 16px; font-weight: 400; color: var(--charcoal); } .realCount__region_select { display: inline-table; background-color: #E75524; border-radius: 8px; position: relative; overflow: hidden; width: 100%; max-width: 320px; } .realCount__region_select::before { position: absolute; content: ''; background-image: url("data:image/svg+xml,%3Csvg width='15' height='18' viewBox='0 0 15 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.50781 0.25C5.68508 0.252068 3.9376 0.97706 2.64874 2.26592C1.35987 3.55479 0.63488 5.30227 0.632812 7.125C0.632812 13.0078 6.88281 17.4531 7.14844 17.6406C7.25489 17.7115 7.37992 17.7493 7.50781 17.7493C7.6357 17.7493 7.76073 17.7115 7.86718 17.6406C8.13281 17.4531 14.3828 13.0078 14.3828 7.125C14.3807 5.30227 13.6557 3.55479 12.3669 2.26592C11.078 0.97706 9.33054 0.252068 7.50781 0.25ZM7.50781 4.625C8.00226 4.625 8.48561 4.77162 8.89674 5.04633C9.30786 5.32103 9.62829 5.71148 9.81751 6.16829C10.0067 6.62511 10.0562 7.12777 9.95977 7.61273C9.86331 8.09768 9.62521 8.54313 9.27558 8.89277C8.92595 9.2424 8.48049 9.4805 7.99554 9.57696C7.51058 9.67343 7.00792 9.62392 6.5511 9.4347C6.09429 9.24548 5.70384 8.92505 5.42914 8.51392C5.15443 8.1028 5.00781 7.61945 5.00781 7.125C5.00781 6.46196 5.2712 5.82607 5.74004 5.35723C6.20888 4.88839 6.84477 4.625 7.50781 4.625Z' fill='white'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center; background-size: contain; width: 14px; height: 16px; left: 13px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .realCount__region_select::before { position: absolute; content: ''; background-image: url("data:image/svg+xml,%3Csvg width='15' height='18' viewBox='0 0 15 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.50781 0.25C5.68508 0.252068 3.9376 0.97706 2.64874 2.26592C1.35987 3.55479 0.63488 5.30227 0.632812 7.125C0.632812 13.0078 6.88281 17.4531 7.14844 17.6406C7.25489 17.7115 7.37992 17.7493 7.50781 17.7493C7.6357 17.7493 7.76073 17.7115 7.86718 17.6406C8.13281 17.4531 14.3828 13.0078 14.3828 7.125C14.3807 5.30227 13.6557 3.55479 12.3669 2.26592C11.078 0.97706 9.33054 0.252068 7.50781 0.25ZM7.50781 4.625C8.00226 4.625 8.48561 4.77162 8.89674 5.04633C9.30786 5.32103 9.62829 5.71148 9.81751 6.16829C10.0067 6.62511 10.0562 7.12777 9.95977 7.61273C9.86331 8.09768 9.62521 8.54313 9.27558 8.89277C8.92595 9.2424 8.48049 9.4805 7.99554 9.57696C7.51058 9.67343 7.00792 9.62392 6.5511 9.4347C6.09429 9.24548 5.70384 8.92505 5.42914 8.51392C5.15443 8.1028 5.00781 7.61945 5.00781 7.125C5.00781 6.46196 5.2712 5.82607 5.74004 5.35723C6.20888 4.88839 6.84477 4.625 7.50781 4.625Z' fill='white'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center; background-size: contain; width: 14px; height: 16px; left: 13px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .realCount__region_select::after { position: absolute; content: ''; background-image: url("data:image/svg+xml,%3Csvg width='15' height='9' viewBox='0 0 15 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.50002 8.37502C7.41792 8.37513 7.33662 8.35902 7.26077 8.3276C7.18493 8.29619 7.11604 8.2501 7.05806 8.19197L0.808063 1.94197C0.69085 1.82476 0.625 1.66578 0.625 1.50002C0.625 1.33425 0.69085 1.17528 0.808063 1.05806C0.925276 0.94085 1.08425 0.875 1.25002 0.875C1.41578 0.875 1.57476 0.94085 1.69197 1.05806L7.50002 6.86611L13.3081 1.05806C13.4253 0.94085 13.5843 0.875 13.75 0.875C13.9158 0.875 14.0748 0.94085 14.192 1.05806C14.3092 1.17528 14.375 1.33425 14.375 1.50002C14.375 1.66578 14.3092 1.82476 14.192 1.94197L7.94197 8.19197C7.88399 8.2501 7.8151 8.29619 7.73926 8.3276C7.66341 8.35902 7.58211 8.37513 7.50002 8.37502Z' fill='white'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center; background-size: contain; width: 14px; height: 16px; right: 13px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .realCount__region_select select { border: 0; padding: 0 32px; font-size: 16px; font-weight: 700; color: var(--cl-white); height: 40px; margin-right: -14px; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; border: none; } .realCount__region_select select::-ms-expand { display: none; /* Hide arrow in IE */ } .realCount__region_select select:focus, .realCount__region_select select:focus-visible { border: 0; outline: none; } .realCount__region_select select option { color: #000; } .realCount__voters { font-size: 14px; color: var(--charcoal-white); } .realCount__att { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 2px; font-size: 11px; line-height: 1; letter-spacing: -.8px; } .realCount__attItem { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .realCount__att span { font-weight: 700; font-size: 14px; } .realCount__icon { display: inline-block; background-size: contain; background-position: center; background-repeat: no-repeat; vertical-align: middle; width: 16px; height: 16px; margin-right: 2px; -webkit-filter: invert(70%) sepia(4%) saturate(0%) hue-rotate(189deg) brightness(86%) contrast(90%); filter: invert(70%) sepia(4%) saturate(0%) hue-rotate(189deg) brightness(86%) contrast(90%); } .realCount__dash { margin: 36px 35px 0; height: 0; border: 0; border-bottom: 1px solid var(--platinum-dark); } .realCount__desc { margin-top: 52px; } .realCount__box { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 40px; padding: 16px 0; } .realCount__box h4 { font-size: 24px; font-weight: 500; color: var(--cl-txt); } .realCount__box_sm { font-size: 12px; font-weight: 400; color: var(--charcoal-lightest); } .realCount__box_label { font-size: 14px; font-weight: 400; color: var(--charcoal-lightest); } .realCount__box_mp { font-size: 12px; font-weight: 400; color: var(--charcoal); margin-bottom: 4px; padding-left: 20px; position: relative; } .realCount__box_mp::before { position: absolute; content: ''; width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.01212 9.52679H3.29461C3.10642 9.52679 2.93635 9.62939 2.86186 9.78765L0.875488 14.0246L5.59269 11.8175C5.02809 11.1016 4.46938 10.3121 4.01187 9.52679H4.01212Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.1381 9.78741C13.0639 9.62937 12.8938 9.52655 12.7056 9.52655H11.9881C11.1243 11.0093 9.866 12.5417 9.06543 13.3848C8.50255 13.9764 7.49687 13.9757 6.93472 13.3848C6.87714 13.3244 6.57695 13.0059 6.16355 12.5163L5.31299 12.9143L8.52999 15.8558L14.6256 12.9608L13.1379 9.78718L13.1381 9.78741Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.295008 15.2629L0.0384419 15.8102C-0.0943748 16.0935 0.133276 16.4098 0.470954 16.4098H7.37865C7.42178 16.3804 7.42227 16.3822 7.65433 16.272L4.43242 13.3267L0.295008 15.2627V15.2629Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.9613 15.8102L14.9975 13.7541L9.40576 16.4098H15.5288C15.8658 16.4098 16.0944 16.0939 15.9613 15.8102Z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.39748 12.3611C8.57489 12.1746 12.742 7.75867 12.742 4.72336C12.742 -1.53583 3.25781 -1.61215 3.25781 4.72336C3.25781 7.75889 7.42487 12.1746 7.60229 12.3611C7.8123 12.5818 8.18771 12.5816 8.39748 12.3611ZM6.41919 4.33791C6.41919 3.54098 7.12837 2.89288 8.00001 2.89288C8.8714 2.89288 9.58057 3.5412 9.58057 4.33791C9.58057 5.13462 8.8714 5.78294 8.00001 5.78294C7.12837 5.78294 6.41919 5.13462 6.41919 4.33791Z' fill='%23000'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center; background-size: contain; left: 0; top: 0; -webkit-filter: invert(55%) sepia(42%) saturate(11%) hue-rotate(22deg) brightness(103%) contrast(89%); filter: invert(55%) sepia(42%) saturate(11%) hue-rotate(22deg) brightness(103%) contrast(89%); } .realCount__box_col1 { width: 64px; } .realCount__box_col4 { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .realCount__info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; color: #808080; } .realCount__info span { display: block; font: 500 24px/1.2 "Roboto", sans-serif; letter-spacing: -.42px; color: var(--cl-txt); } .realCount__info small { font-size: 14px; } .realCount__prog, .realCount__date { -ms-flex-negative: 0; flex-shrink: 0; min-width: 330px; } .realCount__date { margin-left: 40px; margin-right: 40px; } .realCount__sk { max-width: calc(100%/3); font: 400 12px/1.17 "Roboto", sans-serif; color: var(--cl-txt); } .realCount__skWrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media (min-width: 768px) { .realCount__skWrap { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .realCount__skLib { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1; } .realCount__skLib .realCount__icon { margin-right: 4px; } .realCount__skDesc { color: #808080; margin-top: 4px; text-align: left; } .realCount__sponsor { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; margin-top: 15px; } .realCount__sponsor-lead { margin-bottom: 4px; font-size: 10px; color: #808080; } .realCount__sponsor-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; } .realCount__sponsor-item { width: auto; height: 48px; max-width: 96px; } .realCount__sponsor-item img { -o-object-fit: contain; object-fit: contain; -o-object-position: left; object-position: left; width: 100%; height: 100%; } .rcHeading { position: relative; margin-top: 24px; } .rcHeading__lead { font-size: 32px; font-weight: 700; line-height: 38px; letter-spacing: 0em; text-align: left; color: var(--cl-txt); } .rcHeading__sub { margin-right: 14px; margin-left: 14px; font-size: 20px; font-weight: 700; color: var(--cl-txt); } .rcPileg .realCount__desc { margin-top: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; gap: 30px; } .rcPileg .realCount__info { gap: 30px; } .rcPileg .realCount__info span { font-size: 18px; } .rcPileg .realCount__prog, .rcPileg .realCount__date { min-width: unset; } .rcPileg .realCount__date { margin-left: 0; margin-right: 0; } .rcPileg__wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 287px; } .rcPileg__logo { width: auto; height: 52px; max-width: 47px; -ms-flex-negative: 0; flex-shrink: 0; } .rcPileg__logo img { -o-object-fit: contain; object-fit: contain; width: 100%; height: 100%; } .rcSelection { min-width: 328px; -ms-flex-item-align: center; align-self: center; } .rcSelection__form { position: relative; } .rcSelection__form::after { content: ""; position: absolute; top: 13px; right: 28px; width: 10px; height: 10px; border-left: 2px solid var(--br-gray-med); border-bottom: 2px solid var(--br-gray-med); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); z-index: 1; pointer-events: none; } .rcSelection__select { display: block; width: 100%; padding: 12px 16px; border-radius: 8px; background-color: var(--bg-input); border: solid 1px var(--br-gray-med); outline: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--cl-main); } .rcGraph { display: none; } .rcMap { position: relative; } .rcLegend { position: absolute; opacity: 0; visibility: hidden; pointer-events: none; width: 160px; z-index: 1; -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 4px; border: 1px solid #DCDCDC; -webkit-transition: all .2s ease; transition: all .2s ease; -webkit-box-shadow: -2px 2px 4px 0px rgba(0, 0, 0, 0.12); box-shadow: -2px 2px 4px 0px rgba(0, 0, 0, 0.12); } .rcLegend:before { content: ''; position: absolute; -webkit-filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2)); filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.2)); border-bottom: 10px solid transparent; border-left: 10px solid whitesmoke; border-top: 10px solid transparent; border-right: 10px solid transparent; -webkit-transform: rotate(90deg); transform: rotate(90deg); bottom: -20px; left: calc(50% - 10px); z-index: -1; } .rcLegend-wrap { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 8px; gap: 4px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: whitesmoke; } .rcLegend.-pileg { width: 430px; gap: 7px; } .rcLegend.-pileg .rcLegend-prov { text-align: center; } .rcLegend.-pileg.-right { -webkit-transform: translateX(-90%); transform: translateX(-90%); } .rcLegend.-pileg.-right:before { left: calc(100% - 50px); } .rcLegend.-pileg.-left { -webkit-transform: translateX(-50px); transform: translateX(-50px); } .rcLegend.-pileg.-left:before { left: 40px; } .rcLegend-pileg-partai { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 6px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .rcLegend-pileg-item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 5px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .rcLegend-pileg-img { width: 40px; height: 40px; padding: 4px; background: #fff; } .rcLegend-pileg-img img { -o-object-fit: contain; object-fit: contain; } .rcLegend-pileg-percent { font-size: 10px; font-weight: 700; line-height: 10px; letter-spacing: -0.05em; text-align: center; min-height: 10px; } .rcLegend-pileg-seat { position: relative; bottom: 3px; font-size: 10px; line-height: 10px; letter-spacing: -0.05em; text-align: center; min-height: 10px; } .rcLegend.-show { visibility: visible; opacity: 1; } .rcLegend-prov { font-size: 14px; font-weight: 700; line-height: 14px; letter-spacing: 0em; text-align: left; min-height: 15px; } .rcLegend-info { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .rcLegend-info-title { font-size: 8px; font-weight: 400; line-height: 8px; letter-spacing: 0em; text-align: left; color: gray; text-transform: uppercase; -ms-flex-preferred-size: 56px; flex-basis: 56px; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } .rcLegend-info-result { font-size: 10px; font-weight: 400; line-height: 10px; letter-spacing: 0em; text-align: right; color: #333333; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .rcLegend-paslon { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 4px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .rcLegend-paslon-item { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; position: relative; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 4px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .rcLegend-paslon-no { display: -webkit-box; display: -ms-flexbox; display: flex; width: 19px; height: 19px; border-radius: 50px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 10px; font-weight: 500; line-height: 10px; letter-spacing: -0.05em; color: #fff; -ms-flex-preferred-size: 19px; flex-basis: 19px; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } .rcLegend-paslon-no.-p1 { background: #A5D63C; } .rcLegend-paslon-no.-p2 { background: #09BCE3; } .rcLegend-paslon-no.-p3 { background: #E65225; } .rcLegend-paslon-no.-p4 { background: #FFCA2A; } .rcLegend-paslon-number, .rcLegend-paslon-percent { position: relative; font-size: 12px; font-weight: 400; line-height: 12px; letter-spacing: 0em; color: #333333; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; text-align: right; } .rcLegend-paslon-percent { -ms-flex-preferred-size: 45px; flex-basis: 45px; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } .rcTable { margin-top: 20px; border-top: 1px solid #E0E0E0; padding-top: 8px; } .rcTable[data-win=p1] .rcTableResult__percent.win.-p1 .vote_bg { background: #A5D63C; } .rcTable[data-win=p2] .rcTableResult__percent.win.-p2 .vote_bg { background: #09BCE3; } .rcTable[data-win=p3] .rcTableResult__percent.win.-p3 .vote_bg { background: #E65225; } .rcTable[data-win=p4] .rcTableResult__percent.win.-p4 .vote_bg { background: #FFCA2A; } .rcTable[data-win=all] .rcTableResult__percent.win.-p1 .vote_bg { background: #A5D63C; } .rcTable[data-win=all] .rcTableResult__percent.win.-p2 .vote_bg { background: #09BCE3; } .rcTable[data-win=all] .rcTableResult__percent.win.-p3 .vote_bg { background: #E65225; } .rcTable[data-win=all] .rcTableResult__percent.win.-p4 .vote_bg { background: #FFCA2A; } .rcTableHead { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 4px; font-weight: 700; line-height: 1; letter-spacing: -.1px; } .rcTableHead__item { width: 100%; min-height: 60px; padding-bottom: 8px; border-bottom: 1px solid #CDCDCD; text-align: center; } .rcTableHead__item:first-child, .rcTableHead__item:nth-child(2):not(.-p1) { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 1.17; } .rcTableHead__num { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 19px; height: 19px; margin-bottom: 4px; position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); border-radius: 50%; font-size: 10px; font-weight: 500; line-height: 1; color: #fff; letter-spacing: -.1px; } .rcTableHead .-p1 .rcTableHead__num { background: #A5D63C; } .rcTableHead .-p2 .rcTableHead__num { background: #09BCE3; } .rcTableHead .-p3 .rcTableHead__num { background: #E65225; } .rcTableHead .-p4 .rcTableHead__num { background: #FFCA2A; } .rcTableItem { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 4px; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .rcTableItem:hover { background-color: var(--platinum-lighter); } .rcTableItem:hover .vote_percent, .rcTableItem:hover .rcTableName, .rcTableItem:hover .rcTablePercent { color: #000; } .rcTableName, .rcTablePercent { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: calc(100%/3 - 4px); min-height: 51px; padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid #CDCDCD; font-size: 12px; line-height: 1; color: var(--cl-txt); } .rcTableName { text-transform: uppercase; } .rcTablePercent { position: relative; font-size: 14px; line-height: 1; color: var(--cl-txt); -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .rcTablePercent__tps { display: block; margin-top: 4px; font-size: 10px; line-height: 1; color: #666666; } .rcTablePercent span { position: relative; z-index: 2; } .rcTablePercent .vote_progress_bg { position: absolute; height: 100%; left: 0; top: 0; z-index: 1; background: #E0E0E0; } .rcTableResult { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; width: 100%; gap: 4px; } .rcTableResult__percent { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; padding-top: 11px; padding-bottom: 11px; border-bottom: 1px solid #CDCDCD; text-align: center; font-size: 14px; line-height: 1; color: var(--cl-txt); position: relative; } .rcTableResult__percent span { z-index: 2; } .rcTableResult__percent .vote_bg { position: absolute; height: 100%; left: 0; top: 0; z-index: 1; background: #E0E0E0; } .rcTableResult__vote { display: block; margin-top: 4px; font-size: 10px; line-height: 1; color: #666666; } .rcMap path { fill: #dfdfdf; stroke: white; stroke-width: 0.5px; } .rcMap path.-p1 { fill: #68E27C; } .rcMap path.-p2 { fill: #4F0A05; } .rcMap path.-p3 { fill: #DB3732; } .rcMap path.-p4 { fill: #F9E366; } .rcMap path.-p5 { fill: #273FA1; } .rcMap path.-p6 { fill: #93231B; } .rcMap path.-p7 { fill: #00BCEB; } .rcMap path.-p8 { fill: #FF5000; } .rcMap path.-p9 { fill: #000000; } .rcMap path.-p10 { fill: #FA8E00; } .rcMap path.-p11 { fill: #052F66; } .rcMap path.-p12 { fill: #0154A2; } .rcMap path.-p13 { fill: #014224; } .rcMap path.-p14 { fill: #003399; } .rcMap path.-p15 { fill: #E62129; } .rcMap path.-p16 { fill: #244282; } .rcMap path.-p17 { fill: #50B33F; } .rcMap path.-p24 { fill: #000; } .rcMap path:hover { fill: #ddd !important; } .qcDisc { padding-left: 14px; margin-top: 28px; border-left: 2px solid #E75524; font-size: 14px; line-height: normal; color: var(--charcoal-light); } @keyframes show-bar { 0% { height: 0; } 100% { height: 100%; } } @-webkit-keyframes show-bar { 0% { height: 0; } 100% { height: 100%; } } .realCount__icon.icon-trophy { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' fill='none'%3E%3Cg fill='%23000' fill-rule='evenodd' clip-path='url(%23a)' clip-rule='evenodd'%3E%3Cpath d='M4.11 10.527h-.717a.474.474 0 0 0-.433.26L.974 15.024l4.717-2.207a20.266 20.266 0 0 1-1.58-2.29ZM13.237 10.787a.474.474 0 0 0-.433-.26h-.717c-.864 1.482-2.122 3.015-2.923 3.858-.563.591-1.568.59-2.13 0-.058-.06-.358-.38-.772-.869l-.85.398 3.217 2.942 6.095-2.895-1.488-3.174ZM.394 16.263l-.257.547c-.133.283.095.6.433.6h6.907c.043-.03.044-.028.276-.138l-3.222-2.945-4.137 1.936ZM16.06 16.81l-.964-2.056-5.592 2.656h6.123c.337 0 .566-.316.433-.6Z'/%3E%3Cpath d='M8.496 12.361c.178-.187 4.345-4.602 4.345-7.638 0-6.259-9.485-6.335-9.485 0 0 3.036 4.168 7.452 4.345 7.638.21.22.585.22.795 0ZM6.518 4.338c0-.797.709-1.445 1.58-1.445.872 0 1.581.648 1.581 1.445S8.97 5.783 8.1 5.783c-.872 0-1.581-.648-1.581-1.445Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M.099 0h16v16h-16z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); } .theme--pemilu .kanalMenu ul.kanalMenu-subkanal { background: var(--bg-pemilu); } .theme--pemilu .kanalMenu ul li a:hover { color: #fdb022; } .breadcum-new { position: relative; } .breadcum-new ul { margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .breadcum-new li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .breadcum-new li:after { content: "\203A"; padding: 0 5px; } .breadcum-new li:last-child:after { content: ''; } .breadcum-new span, .breadcum-new a { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0; font-size: 14px; color: #333333; } .breadcum-new span { color: #999999; } .socmedBlock { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; } .socmedButton { min-width: auto; -ms-flex-preferred-size: auto; flex-basis: auto; padding: 2px; } .socmedButton span { background-color: #000; } .socmedList { padding: 0; gap: 0px; } .theme--pemilu .sectionWrap { margin-top: 100px; } .theme--pemilu .sectionWrap .formSearchbox { width: 330px; } .theme--pemilu .sectionForm { margin-top: 40px; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly; } .theme--pemilu .sectionForm--start { -webkit-column-gap: 25px; -moz-column-gap: 25px; column-gap: 25px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .theme--pemilu .sectionForm--center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } .theme--pemilu .sectionTitle { text-transform: uppercase; font-size: 60px; font-weight: 300; line-height: 58px; color: #38A4DC; letter-spacing: -1.3px; padding: 0; } .theme--pemilu .sectionTitle::before { display: none; } .theme--pemilu .sectionTitle--big { margin-bottom: 70px; font-size: 116px; font-weight: 700; line-height: 96px; } .theme--pemilu .sectionTitle--bold { font-weight: 700; } .theme--pemilu .sectionTitle--small { font-size: 48px; } .theme--pemilu .sectionTeaser { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-left: 50px; font-size: 20px; line-height: 1.7; color: var(--cl-txt); } .theme--pemilu .sectionTeaser--small { font-size: 18px; line-height: 1.7; color: var(--cl-txt); } .theme--pemilu .sectionImage { margin-left: 40px; width: 600px; -webkit-filter: var(--img-filter); filter: var(--img-filter); } .theme--pemilu .indeks__form { padding: 0; } .theme--pemilu .discover .container { background: var(--bg-main); padding-top: 20px; } .theme--pemilu .indeks__form .form__select { background-color: var(--bg-input); background-image: none; border: solid 1px var(--br-gray-med); color: var(--cl-main); } .theme--pemilu .indeks__form .form__select__wrap::after { right: 12px; } .theme--pemilu .pt0 { padding-top: 0 !important; } .theme--pemilu .pb-0 { padding-bottom: 0; } .theme--pemilu .mt32 { margin-top: 32px; } .theme--pemilu .--sc .ga--video { margin: 16px 0; } .theme--pemilu .--sc .ga--video .article__list { margin-bottom: 0; } .theme--pemilu .--sc .ga--video .article__list__info { display: inline-table; } .theme--pemilu .--sc .ga--video .article__list__info .article__time { display: table; background-color: #F2F2F2; gap: 4px; padding: 2px 4px; border-radius: 4px; font-size: 12px; line-height: normal; font-weight: 600; color: #5F5F5F; position: relative; padding-left: 22px; } .theme--pemilu .--sc .ga--video .article__list__info .article__time .icon-time { position: absolute; left: 5px; top: 0; bottom: 0; margin: auto; font-size: 13px; -webkit-transform: translateY(0); transform: translateY(0); } .theme--pemilu .--sc .ga--video .article__list__info .article__date { color: #757575; } .theme--pemilu .--sc .ga--video .article__list__title { height: auto; max-height: 215px; margin-bottom: 20px; } .theme--pemilu .--sc .ga--video .article__list__asset iframe { border-radius: 8px; overflow: hidden; } .theme--pemilu .--sc .ga--video .article__title { font-size: 24px; font-weight: 500; } .theme--pemilu .--sc .ga--photo-pilihan .article__box--big { margin: 0; padding: 14px 0 0; } .theme--pemilu .--sc .ga--photo-pilihan .article__photo__wrap { width: 100%; height: 595px; } .theme--pemilu .--sc .ga--photo-pilihan .article__photo__wrap .article__asset { padding-top: 493px; border-radius: 8px; } .theme--pemilu .--sc .ga--photo-pilihan .article__photo__wrap .article__asset img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .theme--pemilu .--sc .ga--photo-pilihan .article__photo__count { position: absolute; right: 16px; bottom: 16px; z-index: 2; background-color: rgba(0, 0, 0, 0.7); padding: 8px 8px 8px 40px; color: var(--cl-white); font-size: 14px; border-radius: 8px; } .theme--pemilu .--sc .ga--photo-pilihan .article__photo__count::after { width: 19px; height: 16px; content: ''; position: absolute; left: 10px; top: 0; bottom: 0; margin: auto; -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(329deg) brightness(105%) contrast(101%); filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(329deg) brightness(105%) contrast(101%); background-image: url("data:image/svg+xml,%3Csvg width='21' height='18' viewBox='0 0 21 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.25 14.4951V2.49561C20.2496 2.09792 20.0914 1.71665 19.8102 1.43544C19.529 1.15423 19.1477 0.996052 18.75 0.995605H2.25C1.85231 0.996052 1.47104 1.15423 1.18983 1.43544C0.908625 1.71665 0.750447 2.09792 0.75 2.49561V15.9956C0.750447 16.3933 0.908625 16.7746 1.18983 17.0558C1.47104 17.337 1.85231 17.4952 2.25 17.4956H18.75C19.1477 17.4952 19.529 17.337 19.8102 17.0558C20.0914 16.7746 20.2496 16.3933 20.25 15.9956V14.4951ZM18.75 2.49561L18.7507 12.6856L16.0607 9.99561C15.7791 9.71472 15.3977 9.55698 15 9.55697C14.6023 9.55697 14.2209 9.71472 13.9393 9.99561L12.0001 11.935L7.81069 7.74561C7.52915 7.46472 7.14769 7.30697 6.75 7.30697C6.35231 7.30697 5.97085 7.46472 5.68931 7.74561L2.25 11.1849V2.49561H18.75ZM18.75 15.9956H2.25V13.3063L6.75 8.80629L10.9393 12.9956C11.2206 13.2769 11.6022 13.4349 12 13.4349C12.3978 13.4349 12.7794 13.2769 13.0607 12.9956L15 11.0563L18.7509 14.8072V15.9956H18.75ZM12.3294 7.41607C12.1986 7.28525 12.1021 7.12418 12.0484 6.94714C11.9947 6.7701 11.9855 6.58255 12.0216 6.40111C12.0577 6.21967 12.138 6.04992 12.2554 5.90692C12.3728 5.76392 12.5236 5.65206 12.6945 5.58127C12.8654 5.51048 13.0512 5.48293 13.2353 5.50106C13.4194 5.5192 13.5962 5.58246 13.75 5.68524C13.9038 5.78802 14.0299 5.92715 14.1171 6.0903C14.2044 6.25346 14.25 6.4356 14.25 6.62061V6.62098C14.2499 6.84346 14.1839 7.06093 14.0603 7.24589C13.9366 7.43085 13.7609 7.57499 13.5553 7.66009C13.3498 7.74519 13.1236 7.76743 12.9054 7.724C12.6872 7.68057 12.4867 7.57341 12.3294 7.41607Z' fill='%23000'/%3E%3C/svg%3E%0A"); background-position: center; background-size: auto 16px; } .theme--pemilu .--sc .ga--photo-pilihan .article__title--big { font-weight: 600; } .theme--pemilu .pb-0 { padding-bottom: 0; } .theme--pemilu .kgplayGate__wrap { overflow: initial; } .theme--pemilu .kgplayGate__wrap .icon-photo-slider { bottom: initial; top: -42px; font-size: 24px; width: 24px; height: 24px; background-color: var(--platinum-light); border-radius: 4px; } .theme--pemilu .kgplayGate__wrap .icon-photo-slider[aria-disabled="true"] { opacity: .4; } .theme--pemilu .kgplayGate__wrap .icon-photo-slider svg { width: 15px; height: 15px; } .theme--pemilu .kgplayGate__wrap .icon-photo-slider.icon-photo-left { right: 30px; left: initial; } .theme--pemilu .kgplayGate__wrap .icon-photo-slider .icon-angle-left { background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.146739 4.64621L4.64674 0.146215C4.74056 0.0523942 4.86781 -0.000313429 5.00049 -0.000313417C5.13317 -0.000313406 5.26042 0.0523943 5.35424 0.146215C5.44806 0.240035 5.50077 0.367283 5.50077 0.499965C5.50077 0.632647 5.44806 0.759895 5.35424 0.853715L1.70736 4.49997L11.5005 4.49997C11.6331 4.49997 11.7603 4.55264 11.854 4.64641C11.9478 4.74018 12.0005 4.86736 12.0005 4.99997C12.0005 5.13257 11.9478 5.25975 11.854 5.35352C11.7603 5.44729 11.6331 5.49997 11.5005 5.49997L1.70736 5.49997L5.35424 9.14622C5.44806 9.24004 5.50077 9.36728 5.50077 9.49997C5.50077 9.63265 5.44806 9.7599 5.35424 9.85372C5.26042 9.94754 5.13317 10.0002 5.00049 10.0002C4.86781 10.0002 4.74056 9.94754 4.64674 9.85372L0.146738 5.35372C0.100251 5.30728 0.0633702 5.25213 0.0382084 5.19144C0.0130467 5.13074 9.57988e-05 5.06567 9.58046e-05 4.99997C9.58103e-05 4.93426 0.0130467 4.86919 0.0382085 4.80849C0.0633702 4.7478 0.100251 4.69265 0.146739 4.64621Z' fill='%23999999'/%3E%3C/svg%3E%0A"); } .theme--pemilu .kgplayGate__wrap .icon-photo-slider .icon-angle-right { background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.8538 5.35378L7.35375 9.85378C7.25993 9.94761 7.13268 10.0003 7 10.0003C6.86732 10.0003 6.74007 9.94761 6.64625 9.85378C6.55243 9.75996 6.49972 9.63272 6.49972 9.50003C6.49972 9.36735 6.55243 9.2401 6.64625 9.14628L10.2931 5.50003H0.5C0.367392 5.50003 0.240215 5.44736 0.146447 5.35359C0.0526785 5.25982 0 5.13264 0 5.00003C0 4.86743 0.0526785 4.74025 0.146447 4.64648C0.240215 4.55271 0.367392 4.50003 0.5 4.50003H10.2931L6.64625 0.853784C6.55243 0.759964 6.49972 0.632716 6.49972 0.500034C6.49972 0.367352 6.55243 0.240104 6.64625 0.146284C6.74007 0.0524635 6.86732 -0.000244141 7 -0.000244141C7.13268 -0.000244141 7.25993 0.0524635 7.35375 0.146284L11.8538 4.64628C11.9002 4.69272 11.9371 4.74786 11.9623 4.80856C11.9874 4.86926 12.0004 4.93433 12.0004 5.00003C12.0004 5.06574 11.9874 5.13081 11.9623 5.1915C11.9371 5.2522 11.9002 5.30735 11.8538 5.35378Z' fill='%23999999'/%3E%3C/svg%3E%0A"); } .theme--pemilu .--slideShorts { position: relative; overflow: hidden; padding-bottom: 0; margin-bottom: 32px; } .theme--pemilu .--slideShorts .slick-list { height: 249px; } .theme--pemilu .--slideShorts .kgplayGate__wrap { overflow: initial; } .theme--pemilu .--slideShorts .kgplayGate__wrap.-slider .icon-photo-slider { bottom: initial; top: -42px; font-size: 24px; width: 24px; height: 24px; background-color: var(--platinum-light); border-radius: 4px; } .theme--pemilu .--slideShorts .kgplayGate__wrap.-slider .icon-photo-slider[aria-disabled="true"] { opacity: .4; } .theme--pemilu .--slideShorts .kgplayGate__wrap.-slider .icon-photo-slider svg { width: 15px; height: 15px; } .theme--pemilu .--slideShorts .kgplayGate__wrap.-slider .icon-photo-slider.icon-photo-left { right: 30px; left: initial; } .theme--pemilu .--slideShorts .kgplayGate__wrap.-slider .icon-photo-slider .icon-angle-left { background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.146739 4.64621L4.64674 0.146215C4.74056 0.0523942 4.86781 -0.000313429 5.00049 -0.000313417C5.13317 -0.000313406 5.26042 0.0523943 5.35424 0.146215C5.44806 0.240035 5.50077 0.367283 5.50077 0.499965C5.50077 0.632647 5.44806 0.759895 5.35424 0.853715L1.70736 4.49997L11.5005 4.49997C11.6331 4.49997 11.7603 4.55264 11.854 4.64641C11.9478 4.74018 12.0005 4.86736 12.0005 4.99997C12.0005 5.13257 11.9478 5.25975 11.854 5.35352C11.7603 5.44729 11.6331 5.49997 11.5005 5.49997L1.70736 5.49997L5.35424 9.14622C5.44806 9.24004 5.50077 9.36728 5.50077 9.49997C5.50077 9.63265 5.44806 9.7599 5.35424 9.85372C5.26042 9.94754 5.13317 10.0002 5.00049 10.0002C4.86781 10.0002 4.74056 9.94754 4.64674 9.85372L0.146738 5.35372C0.100251 5.30728 0.0633702 5.25213 0.0382084 5.19144C0.0130467 5.13074 9.57988e-05 5.06567 9.58046e-05 4.99997C9.58103e-05 4.93426 0.0130467 4.86919 0.0382085 4.80849C0.0633702 4.7478 0.100251 4.69265 0.146739 4.64621Z' fill='%23999999'/%3E%3C/svg%3E%0A"); } .theme--pemilu .--slideShorts .kgplayGate__wrap.-slider .icon-photo-slider .icon-angle-right { background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.8538 5.35378L7.35375 9.85378C7.25993 9.94761 7.13268 10.0003 7 10.0003C6.86732 10.0003 6.74007 9.94761 6.64625 9.85378C6.55243 9.75996 6.49972 9.63272 6.49972 9.50003C6.49972 9.36735 6.55243 9.2401 6.64625 9.14628L10.2931 5.50003H0.5C0.367392 5.50003 0.240215 5.44736 0.146447 5.35359C0.0526785 5.25982 0 5.13264 0 5.00003C0 4.86743 0.0526785 4.74025 0.146447 4.64648C0.240215 4.55271 0.367392 4.50003 0.5 4.50003H10.2931L6.64625 0.853784C6.55243 0.759964 6.49972 0.632716 6.49972 0.500034C6.49972 0.367352 6.55243 0.240104 6.64625 0.146284C6.74007 0.0524635 6.86732 -0.000244141 7 -0.000244141C7.13268 -0.000244141 7.25993 0.0524635 7.35375 0.146284L11.8538 4.64628C11.9002 4.69272 11.9371 4.74786 11.9623 4.80856C11.9874 4.86926 12.0004 4.93433 12.0004 5.00003C12.0004 5.06574 11.9874 5.13081 11.9623 5.1915C11.9371 5.2522 11.9002 5.30735 11.8538 5.35378Z' fill='%23999999'/%3E%3C/svg%3E%0A"); } .theme--pemilu .--slideShorts .kgplayItem-box::after { background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.6))); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 100%); } .theme--pemilu .photo__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 16px; font-size: 14px; color: var(--cl-main); background: var(--bg-warticle); padding: 16px; border-radius: 8px; } .theme--pemilu .photo__footer .photoProps { display: -webkit-box; display: -ms-flexbox; display: flex; padding-left: 0; list-style: none; gap: 32px; } .theme--pemilu .photo__footer .photoProps__item { width: calc(100% / 3); padding-left: 24px; position: relative; margin: 0; } .theme--pemilu .photo__footer .photoProps__item:not(:last-child)::after { position: absolute; content: ''; width: 1px; height: 100%; background-color: var(--platinum-dark); right: -17px; top: 0; } .theme--pemilu .photo__footer .photoProps__text { margin: 0; } .theme--pemilu .photo__footer .photoProps__symbol { width: 16px; height: 16px; position: absolute; left: 0; top: 0; background-repeat: no-repeat; background-position: center; background-size: contain; -webkit-filter: var(--filter-gray3); filter: var(--filter-gray3); } .theme--pemilu .photo__footer .photoProps__symbol.icon--user { background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2953_6037)'%3E%3Cpath d='M6 10L5.5 8' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 10L10.5 8' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 10V8' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10.8532 4.07C11.2646 3.97954 11.6904 3.97672 12.1029 4.06172C12.5154 4.14672 12.9054 4.31764 13.2475 4.56334C13.5896 4.80904 13.8762 5.12403 14.0885 5.4878C14.3008 5.85157 14.4341 6.25596 14.4798 6.67467C14.5255 7.09338 14.4825 7.51702 14.3536 7.91801C14.2247 8.319 14.0128 8.68835 13.7317 9.00203C13.4507 9.31572 13.1067 9.5667 12.7222 9.73864C12.3377 9.91058 11.9213 9.99963 11.5001 10H4.50009C4.0789 9.99963 3.6625 9.91058 3.278 9.73864C2.8935 9.5667 2.54952 9.31572 2.26844 9.00203C1.98736 8.68835 1.77548 8.319 1.64659 7.91801C1.51771 7.51702 1.4747 7.09338 1.52038 6.67467C1.56605 6.25596 1.69938 5.85157 1.91169 5.4878C2.124 5.12403 2.41053 4.80904 2.75263 4.56334C3.09474 4.31764 3.48474 4.14672 3.89727 4.06172C4.3098 3.97672 4.7356 3.97954 5.14696 4.07' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5 5C5 4.20435 5.31607 3.44129 5.87868 2.87868C6.44129 2.31607 7.20435 2 8 2C8.79565 2 9.55871 2.31607 10.1213 2.87868C10.6839 3.44129 11 4.20435 11 5' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.5 9.82935V13C12.5 13.1326 12.4473 13.2598 12.3536 13.3535C12.2598 13.4473 12.1326 13.5 12 13.5H4C3.86739 13.5 3.74021 13.4473 3.64645 13.3535C3.55268 13.2598 3.5 13.1326 3.5 13V9.82935' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2953_6037'%3E%3Crect width='16' height='16' fill='%23000'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); } .theme--pemilu .photo__footer .photoProps__symbol.icon--duration { background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2953_6047)'%3E%3Cpath d='M8 14C11.0376 14 13.5 11.5376 13.5 8.5C13.5 5.46243 11.0376 3 8 3C4.96243 3 2.5 5.46243 2.5 8.5C2.5 11.5376 4.96243 14 8 14Z' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 8.5L10.5 6' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.5 1H9.5' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2953_6047'%3E%3Crect width='16' height='16' fill='%23000'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); } .theme--pemilu .photo__footer .photoProps__symbol.icon--level { background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_2953_6054)'%3E%3Cpath d='M3 13V8.5H6' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 13H2' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 13V5.5H9.5' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.5 13V2.5H13V13' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_2953_6054'%3E%3Crect width='16' height='16' fill='%23000'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); } .theme--pemilu .-bigger .commentWrap.--comment_v2 .comment .--first_comment .commentContent, .theme--pemilu .-bigger .commentWrap.--comment_v2 .comment .--first_comment .commentContent-inner, .theme--pemilu .-bigger .commentWrap.--comment_v2 .commentHead-title, .theme--pemilu .-bigger .commentMore-link, .theme--pemilu .-bigger .tag__article__teaser, .theme--pemilu .-bigger .tag__article__link, .theme--pemilu .-bigger .wLink__title, .theme--pemilu .-bigger .reactionItem { font-family: "Inter", sans-serif; } .theme--pemilu .-bigger .read__content { font-size: 17px; line-height: 150%; font-family: "Inter", sans-serif; } .theme--pemilu .flex-1 { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .theme--pemilu .mt60 { margin-top: 60px; } .theme--pemilu .mg0 { margin: 0 !important; } .theme--pemilu .align-center, .theme--pemilu .align-end { display: -webkit-box; display: -ms-flexbox; display: flex; } .theme--pemilu .align-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .theme--pemilu .articleList.--playlist .articleItem-img::after { width: 60px; height: 60px; display: inline-block; background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 .5A6.5 6.5 0 1 0 13.5 7 6.512 6.512 0 0 0 7 .5Zm2.275 6.919-3 2A.544.544 0 0 1 6 9.5a.531.531 0 0 1-.237-.056A.5.5 0 0 1 5.5 9V5a.5.5 0 0 1 .263-.444.519.519 0 0 1 .512.025l3 2a.5.5 0 0 1 0 .838Z' fill='%23000'/%3E%3C/svg%3E"); -webkit-filter: invert(100%) sepia(0%) saturate(6817%) hue-rotate(208deg) brightness(118%) contrast(82%); filter: invert(100%) sepia(0%) saturate(6817%) hue-rotate(208deg) brightness(118%) contrast(82%); background-size: auto 100%; background-position: center center; position: absolute; content: ''; top: 50%; left: 50%; z-index: 2; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: .8; } .theme--pemilu .articleList.--playlist .articleItem .articlePost { margin-top: 10px; } .theme--pemilu .gateBox { background: -webkit-gradient(linear, left top, right top, color-stop(47.63%, #55A3D7), to(#5480B2)); background: linear-gradient(90deg, #55A3D7 47.63%, #5480B2 100%); display: -webkit-box; display: -ms-flexbox; display: flex; gap: 10px; border-radius: 8px; height: 108px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-filter: var(--img-filter); filter: var(--img-filter); } .theme--pemilu .gateBox-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .theme--pemilu .gateBox-img { width: 340px; } .theme--pemilu .gateBox-content { padding: 0 30px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-right: 38px; position: relative; } .theme--pemilu .gateBox-content::after { width: 38px; height: 70px; position: absolute; content: ''; background-image: url("data:image/svg+xml,%3Csvg width='38' height='70' viewBox='0 0 38 70' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M37.274 36.7286L4.17478 69.3435C3.70419 69.7756 3.08177 70.0108 2.43865 69.9996C1.79553 69.9884 1.18192 69.7317 0.727093 69.2835C0.272267 68.8354 0.0117339 68.2307 0.000386751 67.597C-0.0109604 66.9633 0.227764 66.35 0.666263 65.8863L32.0071 35L0.666263 4.11369C0.227764 3.64999 -0.0109604 3.03668 0.000386751 2.40297C0.0117339 1.76925 0.272267 1.16462 0.727093 0.716451C1.18192 0.26828 1.79553 0.0115622 2.43865 0.000381096C3.08177 -0.0108 3.70419 0.224428 4.17478 0.65651L37.274 33.2714C37.7389 33.7301 38 34.3518 38 35C38 35.6482 37.7389 36.2699 37.274 36.7286Z' fill='%23fff'/%3E%3C/svg%3E%0A"); top: 0; right: -10px; } .theme--pemilu .gateBox-content p { margin: 0; font-size: 14px; font-weight: 400; color: var(--cl-white); } .theme--pemilu .topilGrid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .theme--pemilu .topilGrid .topilItem { width: calc(100% / 3); height: 220px; position: relative; background-color: var(--bg-gray-med); -webkit-filter: var(--img-filter); filter: var(--img-filter); } .theme--pemilu .topilGrid .topilItem:hover img { -webkit-transform: scale(1.1); transform: scale(1.1); } .theme--pemilu .topilGrid .topilItem-inner { display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-align: end; -ms-flex-align: end; align-items: end; position: relative; z-index: 1; overflow: hidden; } .theme--pemilu .topilGrid .topilItem-inner::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); pointer-events: none; z-index: 1; } .theme--pemilu .topilGrid .topilItem img { position: absolute; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; -webkit-transition: -webkit-transform .2s; transition: -webkit-transform .2s; transition: transform .2s; transition: transform .2s, -webkit-transform .2s; } .theme--pemilu .topilGrid .topilItem .topilItem-title { padding: 16px; left: 0; bottom: 0; position: absolute; width: 100%; z-index: 2; font-size: 16px; font-weight: 500; color: var(--cl-white); } .theme--pemilu .pilkadaData-head p { color: var(--cl-txt); } .theme--pemilu .pilkadaData-grid { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; --gap: 24px; gap: var(--gap); background-color: var(--platinum-lighter); padding: 16px; } .theme--pemilu .pilkadaData-grid.--gridPage { background-color: initial; padding: 0; margin-top: 24px; } .theme--pemilu .pilkadaData-item { width: calc(100% / 3 - var(--gap) + (var(--gap) / 3)); } .theme--pemilu .pilkadaData-item:hover .pilkadaData-title { color: var(--yale-blue-50); } .theme--pemilu .pilkadaData-inner { text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; } .theme--pemilu .pilkadaData-img { width: 120px; aspect-ratio: 1; background-color: var(--bg-gray-med); position: relative; overflow: hidden; border-radius: 100%; margin: 0 auto; } .theme--pemilu .pilkadaData-img img { position: absolute; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; left: 0; top: 0; -webkit-filter: var(--img-filter); filter: var(--img-filter); } .theme--pemilu .pilkadaData-title { font-size: 16px; font-weight: 500; color: var(--cl-txt); } .theme--pemilu .wpilkadaBanner { width: 100%; height: 150px; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center; margin-bottom: 40px; border-radius: 8px; } .theme--pemilu .wpilkadaBanner-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; height: 100%; padding: 20px; } .theme--pemilu .wpilkadaBanner-img { width: 384px; margin-left: 16px; } .theme--pemilu .wpilkadaBanner-content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; max-width: 372px; } .theme--pemilu .wpilkadaBanner-content p { font-size: 14px; font-weight: 400; line-height: 16px; color: #fff; } .theme--pemilu .wpilkadaAgenda { background-color: var(--yale-blue-30); padding: 24px 24px 0 24px; border-radius: 8px; -webkit-filter: var(--img-filter); filter: var(--img-filter); } .theme--pemilu .wpilkadaAgenda-head { font-size: 24px; font-weight: 700; line-height: 26px; color: var(--cl-white); padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid var(--cl-white); } .theme--pemilu .wpilkadaAgenda-item { margin-bottom: 28px; } .theme--pemilu .wpilkadaAgenda-inner { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .theme--pemilu .wpilkadaAgenda-content { position: relative; width: 100%; min-height: 453px; } .theme--pemilu .wpilkadaAgenda-co { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .theme--pemilu .wpilkadaAgenda-co h4 { font-size: 16px; font-weight: 700; line-height: 18px; color: #000; } .theme--pemilu .wpilkadaAgenda-co p { color: #454545; font-size: 14px; line-height: 16px; } .theme--pemilu .wpilkadaAgenda-co p:first-child { margin: 0; } .theme--pemilu .wpilkadaAgenda-co ol, .theme--pemilu .wpilkadaAgenda-co ul { list-style: initial; margin-left: 15px; } .theme--pemilu .wpilkadaAgenda-number { width: 32px; height: 32px; background: -webkit-gradient(linear, left top, left bottom, from(#0F79C6), to(#093373)); background: linear-gradient(180deg, #0F79C6 0%, #093373 100%); position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 100%; -webkit-box-shadow: 0px 4px 4px 0px #00000040; box-shadow: 0px 4px 4px 0px #00000040; font-size: 16px; font-weight: 700; line-height: 1; color: var(--cl-white); } .theme--pemilu .sliderPilkadaAgenda { width: 100%; height: auto; margin-left: auto; margin-right: auto; padding-bottom: 24px; position: absolute; overflow: hidden; opacity: 0; } .theme--pemilu .sliderPilkadaAgenda.slick-initialized { opacity: 1; -webkit-transition: opacity 1s ease-out; transition: opacity 1s ease-out; position: relative; } .theme--pemilu .sliderPilkadaAgenda .slick-dots { bottom: 20px; } .theme--pemilu .sliderPilkadaAgenda .slick-dots li.slick-active button::before { color: #E65225; } .theme--pemilu .sliderPilkadaAgenda .slick-dots li button { padding: 0; } .theme--pemilu .sliderPilkadaAgenda .slick-dots li button:before { opacity: 1; font-size: 30px; color: #D9D9D9; } .kgplayCaption { position: relative; font-size: 20px; font-weight: 600; line-height: 1; color: var(--cl-txt); padding-left: 11px; padding-right: 0; margin-bottom: 15px; background: var(--bg-main); letter-spacing: -0.2px; display: inline-block; } .kgplayCaption > a:hover { color: #000; } .kgplayCaption:before { content: ''; position: absolute; top: 5px; left: 0; height: calc(100% - 8px); border-left: 2px solid #E65225; } .kgplayCaption__eps { padding-left: 14px; padding-bottom: 14px; font-size: 14px; font-weight: 400; line-height: 1.3; color: var(--cl-txt); border-bottom: 1px solid var(--bg-section-title); margin-bottom: 35px; } .kgplayCaption__link { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .kgplayWrap { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 24px; -ms-flex-line-pack: start; align-content: flex-start; } .kgplayWrap-scroll { overflow-y: scroll; overflow-x: hidden; height: 100%; width: 100%; padding-bottom: 40px; } .kgplayWrap.--kgplaylist { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .kgplayWrap.--kgplaylist .kgplayItem { width: 100%; } .kgplayWrap.--kgplaylist .kgplayItem-inner { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 12px; } .kgplayWrap.--kgplaylist .kgplayDetail { width: calc(100% - 250px - 6px); padding-right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .kgplayWrap.--kgplaylist .kgplayDetail-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .kgplayWrap.--kgplaylist .kgplayTitle { font-size: 16px; height: auto; } .kgplayWrap.--kgplaylist .kgplayImg { width: 250px; padding-top: 56%; } .kgplayWrap.--kgplaylist .kgplayChannel { position: relative; } .kgplayWrap.--kgplaylist .kgplayChannel::after { content: ''; width: 5px; height: 5px; background-color: var(--bg-bullet); border-radius: 4px; margin: auto; } .kgplayWrap.--kgplaylist .kgplayInfo .kgplayTime, .kgplayWrap.--kgplaylist .kgplayAvatar + span { max-width: none; } .kgplayWrap.--kgplaylist .kgplay .buttonMeatball { right: -35px; } .kgplayItem { position: relative; width: calc((100% - 48px) / 3); } .kgplayItem .listPop__button { text-align: left; } .kgplayItem-explore { position: relative; width: calc((100% - 48px) / 3); } .kgplayItem-explore .kgplayImg { padding-top: 62%; } .kgplayItem-explore .kgplayImg::after { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: black; background: -webkit-gradient(linear, left bottom, left top, color-stop(50%, black), to(rgba(255, 255, 255, 0.6))); background: linear-gradient(0deg, black 50%, rgba(255, 255, 255, 0.6) 100%); z-index: 1; pointer-events: none; } .kgplayItem-explore .kgplayTitle { font-size: 14px; font-weight: 600; line-height: 1.2; color: #fff; position: absolute; left: 15px; bottom: 12px; z-index: 2; } .kgplayItem-box { position: absolute; bottom: 0; z-index: 2; left: 0; width: 100%; padding: 16px 8px; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; gap: 8px; } .kgplayItem-box::after { position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: black; background: -webkit-gradient(linear, left bottom, left top, color-stop(50%, black), to(rgba(255, 255, 255, 0.6))); background: linear-gradient(0deg, black 50%, rgba(255, 255, 255, 0.6) 100%); z-index: 1; pointer-events: none; } .kgplayItem-box .kgplayAvatar { z-index: 2; } .kgplayItem-box .kgplayAvatar-box { width: 32px; position: relative; } .kgplayItem-box .kgplayAvatar-box.--channelVerified::before { top: initial; right: -3px; bottom: 0; z-index: 3; } .kgplayItem-title { color: var(--cl-white); font-size: 14px; font-weight: 600; white-space: normal; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; z-index: 2; } .kgplayItem-play { width: 40px; height: 40px; display: inline-block; background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 .5A6.5 6.5 0 1 0 13.5 7 6.512 6.512 0 0 0 7 .5Zm2.275 6.919-3 2A.544.544 0 0 1 6 9.5a.531.531 0 0 1-.237-.056A.5.5 0 0 1 5.5 9V5a.5.5 0 0 1 .263-.444.519.519 0 0 1 .512.025l3 2a.5.5 0 0 1 0 .838Z' fill='%23000'/%3E%3C/svg%3E"); -webkit-filter: invert(100%) sepia(0%) saturate(6817%) hue-rotate(208deg) brightness(118%) contrast(82%); filter: invert(100%) sepia(0%) saturate(6817%) hue-rotate(208deg) brightness(118%) contrast(82%); background-size: auto 100%; background-position: center center; position: absolute; top: 50%; left: 50%; z-index: 2; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: .8; } .kgplayDetail { position: relative; } .kgplayDetail.--channel { padding-left: 42px; } .kgplayDetail.--channel .kgplayImg-channel { position: absolute; left: 0; } .kgplayDetail-inner { position: relative; padding-right: 40px; } .kgplayImg { position: relative; width: 100%; padding-top: calc(9/16 * 100%); border-radius: 8px; overflow: hidden; background: var(--bg-gray-med); } .kgplayImg-channel { width: 31px; height: 31px; border-radius: 100%; border: 2px solid #F04722; overflow: hidden; position: relative; background: var(--bg-gray-med); } .kgplayImg-channel img { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-filter: var(--img-filter); filter: var(--img-filter); } .kgplayHl .kgplayImg { padding-top: calc(1/1 * 100%); } .kgplayBadge-live { height: 20px; border-radius: 3px; padding: 2px 8px; position: absolute; top: 12px; left: 10px; z-index: 2; background: var(--cl-red-live); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 14px; font-weight: 400; line-height: normal; color: var(--cl-white); } .kgplayGate.--kanalroll .kgplayItem { padding: 0 5px; } .kgplayGate.--kanalroll .kgplayGate__wrap { margin: 0 -5px; width: calc(100% + (10px/2)); } .kgplayGate__box { width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 24px; -ms-flex-line-pack: start; align-content: flex-start; } .kgplayGate__wrap { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 -10px; width: calc(100% + (20px/2)); height: 249px; overflow: hidden; } .kgplayGate__wrap.-slider { display: block; } .kgplayGate__wrap.-slider .icon-photo-slider { background: rgba(32, 32, 32, 0.8); border-radius: 100%; position: absolute; z-index: 1; width: 38px; height: 38px; line-height: 1; font-size: 36px; text-align: center; top: 0; bottom: 0; margin: auto; } .kgplayGate__wrap.-slider .icon-photo-slider svg { width: 7px; height: 20px; } .kgplayGate__wrap.-slider .icon-photo-slider[aria-disabled="true"] { opacity: 0; } .kgplayGate__wrap.-slider .icon-photo-left { left: 0; } .kgplayGate__wrap.-slider .icon-photo-right { right: 0; } .kgplayGate .kgplayImg { padding-top: calc(16/9 * 100%); } .kgplayGate .kgplayItem { max-width: 160px; padding: 0 10px; } .kgplayTitle { margin-top: 5px; margin-bottom: 5px; -webkit-line-clamp: 2; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--vid-text); height: 40px; } .kgplayChannel { text-transform: uppercase; font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--cl-orange); } .kgplayInfo { font-size: 12px; font-weight: 400; line-height: 1.4; color: var(--cl-gray-med); } .kgplayInfo:before { width: 5px; height: 5px; } .kgplayInfo.--live .kgplayView { -ms-flex-order: 2; -webkit-box-ordinal-group: 3; order: 2; } .kgplayDuration { background: rgba(15, 15, 15, 0.75); border-radius: 5px; padding: 3px 6px; position: absolute; z-index: 2; right: 5px; bottom: 5px; height: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 12px; font-weight: 400; line-height: 1; color: #E8E8E8; } .kgplayView { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .kgplayTime { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } .kgplayLine { margin-top: 32px; margin-bottom: 32px; border-bottom: 1px solid var(--bg-section-title); } .kgplayLine.-thick { border-bottom: 5px solid var(--bg-section-title); } .kgplayLine.-thick_7 { border-bottom: 7px solid var(--bg-section-title); margin-top: 15px; margin-bottom: 20px; } .kgplayBox-side.--index { margin-left: -15px; position: relative; z-index: 10; } .kgplayBox-side.--boxborder { border: 1px solid #E1E1E1; border-radius: 8px; height: auto; max-height: 551px; overflow: hidden; } .kgplayBox-side.--boxborder .kgplayWrap { gap: 0; max-height: 425px; } .kgplayBox-side.--boxborder .kgplayItem { width: 100%; padding: 9px 10px; } .kgplayBox-side.--boxborder .kgplayItem:first-child { background-color: #F2F2F2; padding: 15px 10px 10px; } .kgplayBox-side.--boxborder .kgplayItem .buttonMeatball { bottom: 10px; } .kgplayBox-side.--boxborder .kgplayInfo { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding-right: 20px; } .kgplayBox-side.--boxborder .kgplayInfo::before { width: 0; height: 0; } .kgplayBox-side.--boxborder .kgplayImg { width: 122px; padding-top: calc(9/16 * 122px); border-radius: 8px; } .kgplayBox-side.--boxborder .kgplayImg .kgplayBadge-live { font-size: 10px; top: 8px; left: 10px; } .kgplayBox-side.--boxborder .kgplayDetail { width: calc(100% - 122px - 8px); padding-left: 0; -ms-flex-negative: 0; flex-shrink: 0; } .kgplayBox-side .kgplayWrap { gap: 15px; } .kgplayBox-side .kgplayItem { width: 100%; } .kgplayBox-side .kgplayItem-inner { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; } .kgplayBox-side .kgplayCaption { padding: 8px 10px 8px 20px; font-size: 18px; margin: 0; } .kgplayBox-side .kgplayCaption::before { left: 10px; height: 20px; top: 0; bottom: 0; margin: auto; } .kgplayBox-side .kgplayImg { width: 124px; padding-top: calc(9/16 * 124px); border-radius: 8px; } .kgplayBox-side .kgplayDetail { width: 100%; padding-left: 0; } .kgplayBox-side .kgplayTitle { margin-top: 0; line-height: 1.3; } .kgplayBox-side .kgplayInfo { padding-right: 20px; } .kgplayBox-side .kgplayInfo::before { margin: 0 5px; } .kgplayBox-side .wSpec-stop { font-size: 12px; } .kgplaySearch-title { padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid var(--cl-grey-border-3); } .--channelVerified { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 12px; height: 12px; } .--channelVerified::before { width: 12px; height: 12px; position: absolute; content: ''; background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='4' fill='white'/%3E%3Cpath d='M12 5.63764C12 6.23074 11.0376 6.66158 10.8586 7.19686C10.6795 7.73214 11.1794 8.67028 10.8362 9.12909C10.493 9.5879 9.46161 9.36596 8.98974 9.69981C8.51787 10.0337 8.39478 11.0762 7.83712 11.2516C7.27945 11.4269 6.59496 10.6435 6.00187 10.6435C5.40877 10.6435 4.7019 11.4213 4.16662 11.2516C3.60895 11.0762 3.48026 10.0281 3.01399 9.69981C2.54212 9.36596 1.51259 9.58977 1.16755 9.12909C0.822506 8.66841 1.32981 7.75079 1.14517 7.19686C0.960522 6.64292 0 6.23074 0 5.63764C0 5.04454 0.962387 4.6137 1.14144 4.07842C1.32048 3.54314 0.82064 2.605 1.16382 2.14619C1.50886 1.68551 2.53839 1.90932 3.01026 1.57547C3.48213 1.24162 3.60522 0.200897 4.16288 0.0255788C4.72055 -0.14974 5.40504 0.633599 5.99814 0.633599C6.59123 0.633599 7.29997 -0.144145 7.83525 0.0255788C8.39291 0.200897 8.5216 1.24908 8.98788 1.57734C9.45415 1.90559 10.4893 1.68738 10.8343 2.14805C11.1794 2.60873 10.6721 3.52636 10.8567 4.08029C11.0413 4.63422 11.9981 5.04454 11.9981 5.63764H12ZM8.59621 4.29664C8.7622 4.13624 8.76593 3.86953 8.60367 3.70354C8.44141 3.53755 8.17656 3.53382 8.01057 3.69608L5.23158 6.3986L3.98757 5.19002C3.82157 5.02775 3.55673 5.03149 3.39447 5.19748C3.23407 5.36347 3.2378 5.62831 3.40193 5.79058L5.22972 7.56801L8.59248 4.29664H8.59621Z' fill='url(%23paint0_linear_5804_129271)'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_5804_129271' x1='0' y1='11.2771' x2='12' y2='11.2771' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23EE0875'/%3E%3Cstop offset='1' stop-color='%23FC5F10'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E%0A"); background-position: center; background-repeat: no-repeat; background-size: auto 12px; right: 0; top: 0; } .--channelVerified a span { padding-right: 0; } .--channelVerified span { -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; padding-right: 13px; } .shortWrap { position: relative; min-height: 248px; width: 100%; } .shortWrap .swiper-button-next, .shortWrap .swiper-button-prev { width: 24px; height: 24px; top: -40px; background: var(--bg-grey); border-radius: 4px; cursor: pointer; z-index: 2; position: absolute; } .shortWrap .swiper-button-next::after, .shortWrap .swiper-button-prev::after { position: absolute; content: ''; width: 100%; height: 100%; display: block; background-position: center center; background-size: auto 12px; background-repeat: no-repeat; } .shortWrap .swiper-button-next { right: 0; } .shortWrap .swiper-button-next::after { background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.8538 5.35372L7.35375 9.85372C7.25993 9.94754 7.13268 10.0003 7 10.0003C6.86732 10.0003 6.74007 9.94754 6.64625 9.85372C6.55243 9.7599 6.49972 9.63266 6.49972 9.49997C6.49972 9.36729 6.55243 9.24004 6.64625 9.14622L10.2931 5.49997H0.5C0.367392 5.49997 0.240215 5.44729 0.146447 5.35353C0.0526785 5.25976 0 5.13258 0 4.99997C0 4.86736 0.0526785 4.74019 0.146447 4.64642C0.240215 4.55265 0.367392 4.49997 0.5 4.49997H10.2931L6.64625 0.853723C6.55243 0.759902 6.49972 0.632655 6.49972 0.499973C6.49972 0.367291 6.55243 0.240043 6.64625 0.146223C6.74007 0.0524025 6.86732 -0.000305176 7 -0.000305176C7.13268 -0.000305176 7.25993 0.0524025 7.35375 0.146223L11.8538 4.64622C11.9002 4.69266 11.9371 4.7478 11.9623 4.8085C11.9874 4.8692 12.0004 4.93427 12.0004 4.99997C12.0004 5.06568 11.9874 5.13074 11.9623 5.19144C11.9371 5.25214 11.9002 5.30729 11.8538 5.35372Z' fill='%23999999'/%3E%3C/svg%3E%0A"); } .shortWrap .swiper-button-prev { right: 30px; left: initial; } .shortWrap .swiper-button-prev::after { background-image: url("data:image/svg+xml,%3Csvg width='12' height='10' viewBox='0 0 12 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.146739 4.64621L4.64674 0.146215C4.74056 0.0523942 4.86781 -0.000313429 5.00049 -0.000313417C5.13317 -0.000313406 5.26042 0.0523943 5.35424 0.146215C5.44806 0.240035 5.50077 0.367283 5.50077 0.499965C5.50077 0.632647 5.44806 0.759895 5.35424 0.853715L1.70736 4.49997L11.5005 4.49997C11.6331 4.49997 11.7603 4.55264 11.854 4.64641C11.9478 4.74018 12.0005 4.86736 12.0005 4.99997C12.0005 5.13257 11.9478 5.25975 11.854 5.35352C11.7603 5.44729 11.6331 5.49997 11.5005 5.49997L1.70736 5.49997L5.35424 9.14622C5.44806 9.24004 5.50077 9.36728 5.50077 9.49997C5.50077 9.63265 5.44806 9.7599 5.35424 9.85372C5.26042 9.94754 5.13317 10.0002 5.00049 10.0002C4.86781 10.0002 4.74056 9.94754 4.64674 9.85372L0.146738 5.35372C0.100251 5.30728 0.0633702 5.25213 0.0382084 5.19144C0.0130467 5.13074 9.57988e-05 5.06567 9.58046e-05 4.99997C9.58103e-05 4.93426 0.0130467 4.86919 0.0382085 4.80849C0.0633702 4.7478 0.100251 4.69265 0.146739 4.64621Z' fill='%23999999'/%3E%3C/svg%3E%0A"); } .shortList { --gap: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: var(--gap); -ms-flex-wrap: wrap; flex-wrap: wrap; } .shortList .reelsItem, .shortList iframe { width: calc(100% / 3 - var(--gap) + (var(--gap) / 3)); overflow: hidden; border-radius: 8px; } .shortSlider { overflow: hidden; width: 100%; position: relative; } .shortSlider .swiper-slide { padding-bottom: 33.6%; overflow: hidden; position: relative; width: 100%; height: 0; border-radius: 8px; background: var(--bg-gray-med); } .shortSlider .swiper-slide iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .reelsItem-img { border-radius: 8px; width: 100%; padding-bottom: 167.53%; position: relative; overflow: hidden; background: var(--bg-gray-med); } .reelsItem-img:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: calc(65%); z-index: 1; pointer-events: none; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.8))); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%); } .reelsItem-img img { -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .reelsItem-box { position: absolute; bottom: 0; z-index: 2; left: 0; width: 100%; padding: 18px 16px; } .reelsItem-play { width: 40px; height: 40px; display: inline-block; background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 .5A6.5 6.5 0 1 0 13.5 7 6.512 6.512 0 0 0 7 .5Zm2.275 6.919-3 2A.544.544 0 0 1 6 9.5a.531.531 0 0 1-.237-.056A.5.5 0 0 1 5.5 9V5a.5.5 0 0 1 .263-.444.519.519 0 0 1 .512.025l3 2a.5.5 0 0 1 0 .838Z' fill='%23000'/%3E%3C/svg%3E"); -webkit-filter: invert(100%) sepia(0%) saturate(6817%) hue-rotate(208deg) brightness(118%) contrast(82%); filter: invert(100%) sepia(0%) saturate(6817%) hue-rotate(208deg) brightness(118%) contrast(82%); background-size: auto 100%; background-position: center center; position: absolute; top: 50%; left: 50%; z-index: 2; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .reelsItem-cat { color: var(--cl-white); font-size: 10px; padding: 5px 0; white-space: normal; } .reelsItem-title { color: var(--cl-white); font-size: 18px; font-weight: 700; white-space: normal; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .reelsItem-brand { position: relative; width: 100%; height: 23px; } .reelsItem-brand > img { -o-object-fit: contain; object-fit: contain; -o-object-position: left; object-position: left; } .kgplayImg, .hlImg, .spotlightImg, .topicImg, .latestImg { position: relative; width: 100%; padding-top: calc(9/16 * 100%); background: var(--bg-gray-med); } .kgplayImg img, .hlImg img, .spotlightImg img, .topicImg img, .latestImg img { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-filter: var(--img-filter); filter: var(--img-filter); } .kgplayInfo, .spotlightInfo, .topicInfo, .latestInfo { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .kgplayInfo:before, .spotlightInfo:before, .topicInfo:before, .latestInfo:before { content: ''; width: 4px; height: 4px; background-color: var(--bg-bullet); border-radius: 4px; -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; margin: 0 8px; } .hlChannel, .mostChannel, .spotlightChannel, .topicChannel, .latestChannel { position: relative; text-transform: uppercase; font-size: 12px; font-weight: 400; color: #E65225; } .kgplayTitle, .trendTitle, .hlTitle, .mostTitle, .spotlightTitle, .topicName, .topicTitle, .latestTitle { position: relative; font-size: 12px; font-weight: 500; color: var(--cl-txt); letter-spacing: -0.02em; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } a .kgplayTitle:hover, a .trendTitle:hover, a .hlTitle:hover, a .mostTitle:hover, a .spotlightTitle:hover, a .topicName:hover, a .topicTitle:hover, a .latestTitle:hover { color: var(--yale-blue-50); -webkit-transition: all .2s ease; transition: all .2s ease; } .hlDuration, .spotlightDuration, .topicDuration, .latestDuration { font-size: 10px; font-weight: 500; line-height: 1; color: #fff; background-color: var(--bg-time); border-radius: 4px; padding: 0 8px; position: absolute; z-index: 2; right: 8px; bottom: 8px; height: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } a:hover { color: var(--yale-blue-50); } .icoInline { position: relative; width: 13px; height: 13px; vertical-align: baseline; margin-bottom: -1px; display: inline-block; background-repeat: no-repeat; background-position: center center; } .icoThumb { position: absolute; z-index: 2; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 32px; height: 32px; } .icoVideo, .hlDuration:before, .latestDuration:before { background-size: auto 100%; -webkit-filter: invert(58%) sepia(71%) saturate(6560%) hue-rotate(351deg) brightness(96%) contrast(87%); filter: invert(58%) sepia(71%) saturate(6560%) hue-rotate(351deg) brightness(96%) contrast(87%); background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 .5A6.5 6.5 0 1 0 13.5 7 6.512 6.512 0 0 0 7 .5Zm2.275 6.919-3 2A.544.544 0 0 1 6 9.5a.531.531 0 0 1-.237-.056A.5.5 0 0 1 5.5 9V5a.5.5 0 0 1 .263-.444.519.519 0 0 1 .512.025l3 2a.5.5 0 0 1 0 .838Z' fill='%23000'/%3E%3C/svg%3E"); } .icoArrow { width: 16px; height: 16px; vertical-align: text-bottom; display: inline-block; background-repeat: no-repeat; background-position: center center; background-size: auto 100%; background-image: url("data:image/svg+xml,%3Csvg width='23' height='24' viewBox='0 0 23 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.625 18.2034L14.375 12.4534L8.625 6.70337' stroke='%23298DCF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .layoutWrap { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .layoutFull { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0; } .layoutSide { margin: 20px 0; } .layoutSide.-most { border-bottom: 5px solid var(--bg-title); } .layoutSide.-most .mostOther { text-align: center; } .layoutSide.-most .mostTitle { font-size: 16px; line-height: 21px; } .layoutCol { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .layoutCol.-hl { width: calc(100% - 230px); padding-right: 25px; } .layoutCol.-most { width: 230px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .layoutCol.-most .sectionHeader { margin: 0; } .layoutCol.-most .sectionHeader:after { border-bottom: transparent; } .layoutLine { position: relative; border-top: 4px solid var(--cl-tab-grey); } .trendWrap { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 5px 0; gap: 5px; } .trendWrap .swiper-trend { position: relative; overflow: hidden; padding: 10px 25px; } .trendWrap .swiper-trend::before { content: ''; position: absolute; } .trendWrap .swiper-wrapper { overflow: initial; } .trendWrap .swiper-slide.trendItem { width: auto; height: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .trendWrap .swiper-slide.trendItem:first-child a { padding-left: 0; } .trendWrap .swiper-button { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; opacity: 0; padding: 0 5px; display: -webkit-box; display: -ms-flexbox; display: flex; background: var(--bg-main); } .trendWrap .swiper-button[aria-disabled=false] { opacity: 1; } .trendWrap .swiper-button span { width: 32px; height: 32px; -webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.16); box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.16); background: var(--cl-white); border-radius: 100%; background-repeat: no-repeat; background-position: center; background-size: 8px auto; display: inline-table; } .trendWrap .swiper-button-prev { left: 0; } .trendWrap .swiper-button-prev span { background-image: url("data:image/svg+xml,%3Csvg width='7' height='10' viewBox='0 0 7 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.33331 1L1.33331 5L5.33331 9' stroke='%23333333' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } .trendWrap .swiper-button-next { right: 0; } .trendWrap .swiper-button-next span { background-image: url("data:image/svg+xml,%3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 9L5 5L1 1' stroke='%23333333' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); } .trendName { position: relative; -ms-flex-preferred-size: auto; flex-basis: auto; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; color: #E65225; font-size: 14px; font-weight: 500; text-transform: uppercase; white-space: nowrap; } .trendContent { position: relative; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; overflow: hidden; } .trendContent-wrap { -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } .trendItem { position: relative; } .trendItem:not(:last-child)::after { position: absolute; content: ''; width: 1px; height: 16px; background-color: #D1D1D1; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .trendTitle { white-space: nowrap; font-size: 14px; } .trendTitle a { padding: 2px 16px; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 250px; } .hlWrap { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-column-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; row-gap: 12px; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-bottom: 16px; } .hlSubtitle { color: #0A7DC8; border-radius: 12px; font-size: 12px; line-height: 1; font-weight: 500; padding: 5px 10px; position: absolute; z-index: 2; top: 15px; left: 15px; background: #EFF8FF; } .hlTitle { margin: 8px 0 4px; font-size: 14px; font-weight: 500; -webkit-line-clamp: 4; } .hlDuration:before { content: ''; margin-bottom: 0; -webkit-filter: invert(90%) sepia(56%) saturate(7142%) hue-rotate(186deg) brightness(126%) contrast(82%); filter: invert(90%) sepia(56%) saturate(7142%) hue-rotate(186deg) brightness(126%) contrast(82%); width: 13px; height: 13px; margin-right: 4px; } .hlTime { position: relative; padding: 0 0 5px 15px; color: #fff; font-size: 12px; } .hlItem { position: relative; width: calc((100% / 3) - 11px); } .hlItem:first-child { width: 100%; } .hlItem:first-child .hlBox { position: absolute; z-index: 1; bottom: 0; left: 0; padding: 15px 20px; width: 100%; } .hlItem:first-child .hlBox:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.7))); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%); } .hlItem:first-child .hlTitle { color: #fff; font-size: 20px; line-height: 24px; letter-spacing: -0.02em; -webkit-line-clamp: 2; padding-left: 15px; margin: 8px 0; } .hlItem:first-child .hlTitle:after { content: ''; position: absolute; top: 6px; left: 0; height: calc(100% - 10px); border-left: 1px solid #E65225; } #hlLayout2 { padding-left: calc(397px + 24px); padding-bottom: 30px; gap: 16px; } #hlLayout2 .hlItem { width: calc(100% / 2 - 8px); } #hlLayout2 .hlItem:first-child { position: absolute; left: 0; top: 0; width: calc(397px + 24px); padding-right: 24px; } #hlLayout2 .hlItem:first-child .hlBox { position: relative; padding: 5px 0; } #hlLayout2 .hlItem:first-child .hlBox:after { background: transparent; } #hlLayout2 .hlItem:first-child .hlTitle { color: var(--cl-txt); font-size: 20px; -webkit-line-clamp: 3; } #hlLayout2 .hlItem:first-child .hlTime { color: var(--cl-time); margin-top: -2px; } .mostWrap { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 15px 0; } .mostFlex { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 10px; } .mostNumber { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; -ms-flex-preferred-size: 32px; flex-basis: 32px; height: 32px; font-size: 20px; line-height: 1; font-weight: 500; color: var(--cl-txt); background-color: var(--bg-place); border-radius: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .mostNumber .icn-mostSponsored { background-image: url("data:image/svg+xml,%3Csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.6875 6.74962C15.6881 5.70687 15.4252 4.68089 14.9231 3.76696C14.421 2.85303 13.6961 2.08081 12.8158 1.52202C11.9354 0.963233 10.928 0.636005 9.88733 0.57073C8.84663 0.505455 7.8063 0.704252 6.86299 1.14865C5.91968 1.59306 5.10398 2.26865 4.49166 3.11268C3.87934 3.95672 3.49026 4.94181 3.36055 5.97646C3.23085 7.01111 3.36473 8.06176 3.74977 9.03082C4.1348 9.99988 4.7585 10.8559 5.56292 11.5194V16.8746C5.56293 16.9705 5.58744 17.0648 5.63413 17.1485C5.68083 17.2323 5.74815 17.3027 5.82972 17.3531C5.91128 17.4035 6.00438 17.4322 6.10016 17.4365C6.19595 17.4408 6.29124 17.4206 6.377 17.3777L9.49993 15.8161L12.6239 17.3777C12.7097 17.4206 12.805 17.4408 12.9007 17.4365C12.9965 17.4322 13.0896 17.4035 13.1711 17.3531C13.2527 17.3027 13.32 17.2322 13.3667 17.1485C13.4134 17.0648 13.4379 16.9705 13.4379 16.8746V11.5188C14.1416 10.9391 14.7082 10.2108 15.0971 9.38628C15.4861 8.56173 15.6877 7.66131 15.6875 6.74962ZM4.4375 6.74962C4.4375 5.74836 4.73441 4.76957 5.29069 3.93705C5.84696 3.10453 6.63762 2.45565 7.56267 2.07248C8.48772 1.68932 9.50562 1.58906 10.4876 1.7844C11.4697 1.97974 12.3717 2.46189 13.0797 3.1699C13.7877 3.8779 14.2699 4.77995 14.4652 5.76198C14.6606 6.74401 14.5603 7.76191 14.1771 8.68696C13.794 9.61201 13.1451 10.4027 12.3126 10.9589C11.4801 11.5152 10.5013 11.8121 9.5 11.8121C8.15781 11.8106 6.87101 11.2768 5.92194 10.3277C4.97286 9.37861 4.43901 8.09182 4.4375 6.74962ZM12.3129 15.9646L9.75144 14.684C9.67333 14.6449 9.58719 14.6246 9.49986 14.6246C9.41253 14.6246 9.32639 14.6449 9.24828 14.684L6.68792 15.9644V12.2604C7.55871 12.7053 8.52262 12.9373 9.50047 12.9372C10.4783 12.9371 11.4422 12.705 12.3129 12.26V15.9646ZM9.5 10.6871C10.2788 10.6871 11.04 10.4562 11.6876 10.0235C12.3351 9.59088 12.8398 8.97593 13.1378 8.25644C13.4358 7.53696 13.5138 6.74526 13.3618 5.98146C13.2099 5.21766 12.8349 4.51606 12.2842 3.96539C11.7336 3.41472 11.032 3.03971 10.2682 2.88778C9.50437 2.73585 8.71267 2.81383 7.99319 3.11185C7.2737 3.40987 6.65875 3.91455 6.22609 4.56207C5.79343 5.20959 5.5625 5.97086 5.5625 6.74962C5.56367 7.79355 5.97889 8.79439 6.71706 9.53256C7.45523 10.2707 8.45607 10.686 9.5 10.6871ZM9.5 3.93712C10.0563 3.93712 10.6 4.10207 11.0625 4.41112C11.5251 4.72016 11.8855 5.15941 12.0984 5.67333C12.3113 6.18724 12.367 6.75274 12.2585 7.29832C12.1499 7.84389 11.8821 8.34503 11.4887 8.73836C11.0954 9.1317 10.5943 9.39956 10.0487 9.50808C9.50312 9.6166 8.93762 9.56091 8.4237 9.34804C7.90979 9.13517 7.47053 8.77468 7.16149 8.31217C6.85245 7.84965 6.6875 7.30588 6.6875 6.74962C6.68836 6.00397 6.98495 5.28909 7.51221 4.76183C8.03947 4.23457 8.75434 3.93798 9.5 3.93712Z' fill='%23000'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-size: auto 18px; background-position: center; width: 18px; height: 18px; -webkit-filter: var(--filter-gray2); filter: var(--filter-gray2); } .mostNumber .icn-mostKGNow { background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='8.8px' height='10.4px' viewBox='0 0 8.8 10.4' style='enable-background:new 0 0 8.8 10.4;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill-rule:evenodd;clip-rule:evenodd;fill:%23FFFFFF;%7D%0A%3C/style%3E%3Cdefs%3E%3C/defs%3E%3Cpath class='st0' d='M8.7,5.6c0.1-0.1,0.1-0.3,0.1-0.4c0-0.1,0-0.3-0.1-0.4C8.6,4.7,8.5,4.6,8.4,4.5L1.2,0.1C1.1,0,1,0,0.8,0 C0.7,0,0.5,0,0.4,0.1C0.3,0.2,0.2,0.3,0.1,0.4C0,0.5,0,0.7,0,0.8v8.8C0,9.7,0,9.9,0.1,10c0.1,0.1,0.2,0.2,0.3,0.3 c0.1,0.1,0.3,0.1,0.4,0.1c0.1,0,0.3,0,0.4-0.1l7.2-4.4C8.5,5.8,8.6,5.7,8.7,5.6z'/%3E%3C/svg%3E%0A"); background-size: auto 18px; background-size: auto 10px; background-position: center; background-repeat: no-repeat; width: 10px; height: 10px; } .mostItem { position: relative; margin: 10px 0; } .mostItem.mostKGnow .mostNumber { background-color: var(--bg-place2); } .mostBox { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -ms-flex-preferred-size: 0; flex-basis: 0; } .mostTitle { font-size: 16px; font-weight: 500; line-height: 22px; margin-bottom: 5px; } .mostOther { display: block; text-align: right; color: var(--yale-blue-50); font-size: 14px; font-weight: 500; } .sectionHeader { position: relative; margin: 40px 0 15px; display: inline-table; width: 100%; } .sectionHeader:after { content: ''; position: absolute; width: 100%; left: 0; bottom: 5px; z-index: -1; border-bottom: 5px solid var(--bg-section-title); } .sectionTitle { font-size: 24px; font-weight: 700; line-height: 1; color: var(--cl-txt); padding: 0 12px; background: var(--bg-main); letter-spacing: -0.2px; display: inline-block; position: relative; } .sectionTitle:before { content: ''; position: absolute; top: calc(5px / 2); left: 0; height: calc(100% - 5px); border-left: 1px solid #E65225; } .spotlightWrap { position: relative; padding: 0 0 20px; display: -webkit-box; display: -ms-flexbox; display: flex; } .spotlightCol { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; } .spotlightCol.-left { width: calc(100% - 230px); padding-right: 25px; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 24px; -ms-flex-line-pack: start; align-content: flex-start; } .spotlightCol.-right { width: 230px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .spotlightCol.-grid { width: 100%; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: 24px; -moz-column-gap: 24px; column-gap: 24px; row-gap: 32px; } .spotlightItem { position: relative; } .spotlightCol.-right .spotlightItem { padding: 12px 0 24px; border-bottom: 1px solid var(--br-item); } .spotlightCol.-right .spotlightItem:first-child { padding: 0 0 12px; } .spotlightCol.-right .spotlightItem:last-child { border-bottom: 1px solid transparent; } .spotlightCol.-left .spotlightItem { width: calc(100% / 2 - (24px / 2)); } .spotlightCol.-grid .spotlightItem { width: calc(100% / 3 - (48px / 3)); } .spotlightTitle { font-size: 16px; line-height: 20px; margin: 10px 0 5px; } .spotlightCol.-right .spotlightTitle { font-weight: 500; margin: 0; font-size: 16px; line-height: 22px; } .spotlightTime { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; font-size: 12px; font-weight: 400; color: var(--cl-time2); } .spotlightCol.-right .spotlightInfo { padding: 5px 0 0; } .spotlightChannel { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .spotlightImg .icoVideo, .spotlightImg .hlDuration:before, .spotlightImg .latestDuration:before { -webkit-filter: invert(90%) sepia(56%) saturate(7142%) hue-rotate(186deg) brightness(126%) contrast(82%); filter: invert(90%) sepia(56%) saturate(7142%) hue-rotate(186deg) brightness(126%) contrast(82%); } #spotlightLayout2 .spotlightCol.-right .spotlightItem { padding: 12px 0 16px; } #spotlightLayout2 .spotlightCol.-right .spotlightItem:first-child { padding: 0 0 16px; } .topicWrap { position: relative; padding: 0 0 20px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 24px; } .topicCol { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; width: calc(100% / 2 - (24px / 2)); -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .topicItem { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border-bottom: 1px solid var(--br-item); padding-bottom: 24px; margin-bottom: 12px; } .topicItem:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 1px solid transparent; } .topicName { font-size: 16px; font-weight: 500; -webkit-line-clamp: 1; margin: 8px 0; position: relative; } .topicName .icoArrow { position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 50%; -webkit-transition: .3s ease; transition: .3s ease; width: 24px; height: 24px; padding: 2px; } .topicName .icoArrow:hover { background-color: #e1e1e1; } .topicTitle { font-weight: 500; font-size: 14px; line-height: 20px; } .topicItem:nth-child(2) .topicTitle { font-weight: 500; font-size: 16px; line-height: 20px; margin: 10px 0 3px; } .topicChannel { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .topicImg .icoVideo, .topicImg .hlDuration:before, .topicImg .latestDuration:before { -webkit-filter: invert(90%) sepia(56%) saturate(7142%) hue-rotate(186deg) brightness(126%) contrast(82%); filter: invert(90%) sepia(56%) saturate(7142%) hue-rotate(186deg) brightness(126%) contrast(82%); } .topicTime { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; font-size: 12px; font-weight: 400; color: var(--cl-time2); } .topicInfo { padding: 5px 0 0; } .latestWrap { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; padding: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .latestImg { -ms-flex-preferred-size: 177px; flex-basis: 177px; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; width: 177px; padding-top: calc(9/16 * 177px); padding-top: calc(2/3 * 177px); } .latestFlex { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; } .latestBox { position: relative; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .latestTitle { font-size: 26px; font-weight: 300; -webkit-line-clamp: 2; } .latestTitle .icoVideo, .latestTitle .hlDuration:before, .latestTitle .latestDuration:before { width: 21px; height: 21px; } .latestInfo { border-bottom: 1px solid var(--br-item); padding-bottom: 10px; } .latestChannel { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .latestDuration:before { content: ''; margin-bottom: 0; -webkit-filter: invert(90%) sepia(56%) saturate(7142%) hue-rotate(186deg) brightness(126%) contrast(82%); filter: invert(90%) sepia(56%) saturate(7142%) hue-rotate(186deg) brightness(126%) contrast(82%); width: 13px; height: 13px; margin-right: 4px; } .latestTime { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; font-size: 12px; font-weight: 400; color: var(--cl-time2); } .latestItem { position: relative; } .clBrandzview { color: #0161B8; } .listWP .article__time--fixed { right: 5px; } .revamp1 .sectionHeader ~ .wSpec.-tab, .revamp2 .sectionHeader ~ .wSpec.-tab { margin-top: -5px; } .revamp1 .videoKGSlider, .revamp2 .videoKGSlider { margin: 10px 0 0; } .revamp1 .videoKG-item, .revamp2 .videoKG-item { padding: 0 10px 20px; } .revamp1 .videoKGSlider-wrap, .revamp2 .videoKGSlider-wrap { height: 220px; } .revamp1 .videoKG-title, .revamp2 .videoKG-title { font-weight: 500; } .revamp1 .article__photo__wrap, .revamp2 .article__photo__wrap { margin-top: 20px; } .revampV2 .gallery__item--cover .gallery__photo__asset, .revampV2 .opinion__top .article__asset, .revampV2 .images__channel__asset, .revampV2 .article__grid .article__asset, .revampV2 .hlImg, .revampV2 .spotlightImg, .revampV2 .topicImg, .revampV2 .latestImg, .revampV2 .videoKG-image { overflow: hidden; border-radius: 8px; } .revampV2 .layoutCol { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .revampV2 .mostOther { text-align: center; } .revampV2 .hlWrap-slider { height: 274px; overflow: hidden; padding-bottom: 0; margin-bottom: 16px; border-radius: 8px; } .revampV2 .hlWrap-slider .slick-dots li button:before { color: transparent; } .revampV2 .hlWrap-slider .slick-arrow { position: absolute; z-index: 1; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin: auto; width: 32px; height: 32px; background-color: rgba(51, 51, 51, 0.8); border-radius: 100%; } .revampV2 .hlWrap-slider .slick-arrow.slick-disabled { opacity: 0; visibility: hidden; } .revampV2 .hlWrap-slider .slick-arrow.icon-photo-left { left: 12px; } .revampV2 .hlWrap-slider .slick-arrow.icon-photo-right { right: 12px; } .revampV2 .hlWrap-slider .slick-arrow .icon { position: relative; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .revampV2 .hlWrap-slider .slick-dots { bottom: 32px; max-width: 70px; width: auto; right: 12px; background-color: black; border-radius: 20px; padding: 6px; display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; gap: 8px; } .revampV2 .hlWrap-slider .slick-dots li { margin: 0; width: 8px; height: 8px; } .revampV2 .hlWrap-slider .slick-dots li button { background-color: #D9D9D9; width: 8px; height: 8px; border-radius: 100%; padding: 4px; } .revampV2 .hlWrap-slider .slick-dots li.slick-active button { background-color: #E65225; } .revampV2 .hlWrap-slider .hlItem { width: 486px; height: 274px; } .revampV2 .hlWrap-slider .hlItem .hlSubtitle { padding: 6px 14px; } .revampV2 .hlWrap-slider .hlItem .hlSubtitle.clSponsored { background-color: #1583CC; color: var(--cl-white); } .revampV2 .hlWrap-slider .hlItem .hlBox { position: absolute; z-index: 1; bottom: 0; left: 0; padding: 22px 20px; width: 100%; } .revampV2 .hlWrap-slider .hlItem .hlBox:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; z-index: -1; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.7))); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%); } .revampV2 .hlWrap-slider .hlItem .hlTitle { color: #fff; font-size: 20px; line-height: 24px; letter-spacing: -0.02em; -webkit-line-clamp: 2; padding-left: 15px; margin: 8px 54px 8px 0; } .revampV2 .hlWrap-slider .hlItem .hlTitle:after { content: ''; position: absolute; top: 6px; left: 0; height: calc(100% - 10px); border-left: 1px solid #E65225; } .revampV2 .hlWrap-grid .hlItem:first-child { width: calc((100% / 3) - 11px); } .revampV2 .hlWrap-grid .hlItem:first-child .hlTitle { color: var(--cl-txt); margin: 8px 0 4px; font-size: 14px; font-weight: 500; -webkit-line-clamp: 4; padding: 0; line-height: 1.3; } .revampV2 .hlWrap-grid .hlItem:first-child .hlTitle:after { display: none; } .revampV2 .hlWrap-grid .hlItem:first-child .hlBox { position: relative; padding: 0; } .revampV2 .hlWrap-grid .hlItem:first-child .hlBox:after { display: none; } .revampV2 .hlWrap-grid .hlTitle { height: auto; } .revampV2 .hlWrap-grid .hlImg { overflow: hidden; border-radius: 8px; } .revampV2 .hlWrap-streaming { border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .revampV2 .hlVideo { position: relative; width: 100%; padding-top: 56.25%; } .revampV2 .hlVideo iframe { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 8px; } .revampV2 .sectionHeader:after { bottom: unset; top: -24px; border-bottom: 1px solid var(--bg-most2); } .revampV2 .sectionHeader .title { border-bottom: 0; } .revampV2 .sectionTitle-more { text-align: center; color: var(--yale-blue-50); font-size: 14px; font-weight: 700; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; display: inline-table; padding: 5px 14px 5px 5px; letter-spacing: normal; text-transform: unset; } .revampV2 .sectionTitle-more .icon-svg { position: absolute; right: 0; top: 0; bottom: 0; margin: auto; background-image: url("data:image/svg+xml, %3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 9L5 5L1 1' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); -webkit-filter: brightness(0) saturate(100%) invert(50%) sepia(100%) saturate(350%) hue-rotate(162deg) brightness(96%) contrast(97%); filter: brightness(0) saturate(100%) invert(50%) sepia(100%) saturate(350%) hue-rotate(162deg) brightness(96%) contrast(97%); } .revampV2 .spotlightCol.-left .spotlightTitle { height: 60px; } .revampV2 .spotlightCol.-right .spotlightItem { padding-bottom: 16px; } .revampV2 .spotlightCol.-right .spotlightTitle { -webkit-line-clamp: 4; } .revampV2 .topicTitle { color: var(--cl-d-grey); font-size: 16px; margin: 12px 0 0; height: 60px; } .revampV2 .topicItem { padding-bottom: 20px; margin: 0; } .revampV2 .topicItem:nth-child(2) .topicTitle { margin: 12px 0 0; } .revampV2 .topicItem.--topicMain { position: relative; padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } .revampV2 .topicItem.--topicMain .topicImg::after { position: absolute; width: 100%; height: 100%; content: ''; bottom: 0; left: 0; pointer-events: none; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(black)); background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, black 100%); z-index: 1; } .revampV2 .topicItem.--topicMain .topicName { position: absolute; bottom: 0; z-index: 1; color: var(--cl-white); font-size: 18px; font-weight: 600; padding: 0 16px; margin: 16px 0; width: 100%; z-index: 2; -webkit-line-clamp: 2; } .revampV2 .topicItem:nth-last-child(-n + 2) { border-bottom: 0; } .revampV2 .topicMore { text-align: center; } .revampV2 .topicMore-link { text-align: center; color: var(--yale-blue-50); font-size: 14px; font-weight: 700; position: relative; display: inline-table; padding: 5px 14px 5px 5px; } .revampV2 .topicMore .icon-svg { position: absolute; right: 0; top: 0; bottom: 0; margin: auto; background-image: url("data:image/svg+xml, %3Csvg width='6' height='10' viewBox='0 0 6 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 9L5 5L1 1' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A"); -webkit-filter: brightness(0) saturate(100%) invert(50%) sepia(100%) saturate(350%) hue-rotate(162deg) brightness(96%) contrast(97%); filter: brightness(0) saturate(100%) invert(50%) sepia(100%) saturate(350%) hue-rotate(162deg) brightness(96%) contrast(97%); } .revampV2 [data-aiml='tabcontent'].listWP .article__list { margin: 0 0 24px; } .revampV2 [data-aiml='tabcontent'].listWP .article__list:after { border-bottom: 0; } .revampV2 [data-aiml='tabcontent'].listWP .article__list__asset { width: 236px; height: 126px; -ms-flex-preferred-size: 236px; flex-basis: 236px; padding-right: 0; margin-right: 16px; } .revampV2 [data-aiml='tabcontent'].listWP .article__list__title { height: auto; max-height: 80px; overflow: hidden; margin-bottom: 14px; -webkit-line-clamp: 3; margin: 0; } .revampV2 [data-aiml='tabcontent'].listWP .article__asset { border-radius: 8px; height: 126px; } .revampV2 [data-aiml='tabcontent'].listWP .article__asset img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .revampV2 [data-aiml='tabcontent'].listWP .article__title--medium { font-size: 20px; line-height: 26px; font-weight: 500; -webkit-line-clamp: 3; } .revampV2 .article__wrap__grid--fixed.ga--god-network.col-offset-fluid { margin-right: -15px; margin-left: -15px; } .revampV2 .article__wrap__grid--fixed.ga--god-network > div { height: 270px; padding-left: 12px; padding-right: 12px; } .revampV2 .article__wrap__grid--fixed.ga--god-network .article__box { margin: 0; padding: 10px 0; } .revampV2 .article__wrap__grid--fixed.ga--god-network .article__title { font-size: 18px; line-height: 22px; font-weight: 500; } .revampV2 .article__wrap__grid--fixed.ga--god-network .article__asset { padding-top: 132px; height: auto; } .revampV2 .article__wrap__grid--fixed.ga--god-network .article__asset img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .revampV2 .article__wrap__grid--vik.mt2 { margin-top: 0; } .revampV2 .article__wrap__grid--vik.col-offset-fluid { margin-right: -15px; margin-left: -15px; } .revampV2 .article__wrap__grid--vik > div { height: calc(275px + 24px); padding-left: 12px; padding-right: 12px; } .revampV2 .article__wrap__grid--vik .article__box { margin: 0; padding: 0; } .revampV2 .article__wrap__grid--vik .article__title { font-size: 18px; line-height: 22px; font-weight: 500; -webkit-line-clamp: 2; margin: 8px 0 5px; max-height: 44px; display: block; display: -webkit-box; -webkit-box-orient: vertical; } .revampV2 .article__wrap__grid--vik .article__asset { padding-top: 132px; height: auto; } .revampV2 .article__wrap__grid--vik .article__asset img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .revampV2 .article__wrap__grid--vik .article__lead { font-size: 14px; line-height: 20px; font-weight: 400; -webkit-line-clamp: 3; margin: 0 0 6px; max-height: 63px; display: block; display: -webkit-box; -webkit-box-orient: vertical; color: var(--cl-gray-med); } .revampV2 .article__wrap__grid--vik .article__date { margin: 0; color: var(--cl-gray-lite); } .revampV2 .article__boxsubtitle { left: 8px; top: 8px; border-radius: 12px; } .revampV2 .article__boxsubtitle .article__subtitle { text-transform: none; } .revampV2 .ga--topil { border-bottom: 1px solid var(--bg-most2); } .revampV2 .ga--latest { margin-top: 24px; } .revampV2 .ga--god-network hr { border: 0; height: 1px; background: var(--bg-most2); } .revampV2 .ga--vik-gate { padding: 0 0 8px; } .revampV2 .ga--vik-gate .title { height: 40px; } .revampV2 .ga--vik-gate .col-bs10-10:after { content: ''; position: absolute; width: calc(100% - 30px); left: 15px; bottom: 0; border-bottom: 1px solid var(--br-list-lv2); } .revampV2 .ga--vik-gate .article__wrap__grid--vik .article__grid { border-bottom: none; } .revampV2 .ga--video { margin: 16px 0; } .revampV2 .ga--video .article__list { margin-bottom: 0; } .revampV2 .ga--video .article__list__info { display: inline-table; } .revampV2 .ga--video .article__list__info .article__time { display: table; background-color: #F2F2F2; gap: 4px; padding: 2px 4px; border-radius: 4px; font-size: 12px; line-height: normal; font-weight: 600; color: #5F5F5F; position: relative; padding-left: 22px; } .revampV2 .ga--video .article__list__info .article__time .icon-time { position: absolute; left: 5px; top: 0; bottom: 0; margin: auto; font-size: 13px; -webkit-transform: translateY(0); transform: translateY(0); } .revampV2 .ga--video .article__list__info .article__date { color: #757575; } .revampV2 .ga--video .article__list__title { height: auto; max-height: 215px; margin-bottom: 20px; } .revampV2 .ga--video .article__list__asset iframe { border-radius: 8px; overflow: hidden; } .revampV2 .ga--video .article__title { font-size: 24px; font-weight: 500; } .revampV2 .ga--photo-pilihan { border-bottom: 1px solid var(--bg-most2); padding-bottom: 40px; } .revampV2 .ga--photo-pilihan .article__box--big { margin: 0; padding: 14px 0 0; } .revampV2 .ga--photo-pilihan .article__photo__wrap { width: 100%; height: 600px; } .revampV2 .ga--photo-pilihan .article__photo__wrap .article__asset { padding-top: 493px; } .revampV2 .ga--photo-pilihan .article__photo__wrap .article__asset img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; } .revampV2 .ga--photo-pilihan .article__photo__count { position: absolute; right: 16px; bottom: 16px; z-index: 2; background-color: rgba(0, 0, 0, 0.7); padding: 8px 8px 8px 40px; color: var(--cl-white); font-size: 14px; border-radius: 8px; } .revampV2 .ga--photo-pilihan .article__photo__count::after { width: 19px; height: 16px; content: ''; position: absolute; left: 10px; top: 0; bottom: 0; margin: auto; -webkit-filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(329deg) brightness(105%) contrast(101%); filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(329deg) brightness(105%) contrast(101%); background-image: url("data:image/svg+xml,%3Csvg width='21' height='18' viewBox='0 0 21 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.25 14.4951V2.49561C20.2496 2.09792 20.0914 1.71665 19.8102 1.43544C19.529 1.15423 19.1477 0.996052 18.75 0.995605H2.25C1.85231 0.996052 1.47104 1.15423 1.18983 1.43544C0.908625 1.71665 0.750447 2.09792 0.75 2.49561V15.9956C0.750447 16.3933 0.908625 16.7746 1.18983 17.0558C1.47104 17.337 1.85231 17.4952 2.25 17.4956H18.75C19.1477 17.4952 19.529 17.337 19.8102 17.0558C20.0914 16.7746 20.2496 16.3933 20.25 15.9956V14.4951ZM18.75 2.49561L18.7507 12.6856L16.0607 9.99561C15.7791 9.71472 15.3977 9.55698 15 9.55697C14.6023 9.55697 14.2209 9.71472 13.9393 9.99561L12.0001 11.935L7.81069 7.74561C7.52915 7.46472 7.14769 7.30697 6.75 7.30697C6.35231 7.30697 5.97085 7.46472 5.68931 7.74561L2.25 11.1849V2.49561H18.75ZM18.75 15.9956H2.25V13.3063L6.75 8.80629L10.9393 12.9956C11.2206 13.2769 11.6022 13.4349 12 13.4349C12.3978 13.4349 12.7794 13.2769 13.0607 12.9956L15 11.0563L18.7509 14.8072V15.9956H18.75ZM12.3294 7.41607C12.1986 7.28525 12.1021 7.12418 12.0484 6.94714C11.9947 6.7701 11.9855 6.58255 12.0216 6.40111C12.0577 6.21967 12.138 6.04992 12.2554 5.90692C12.3728 5.76392 12.5236 5.65206 12.6945 5.58127C12.8654 5.51048 13.0512 5.48293 13.2353 5.50106C13.4194 5.5192 13.5962 5.58246 13.75 5.68524C13.9038 5.78802 14.0299 5.92715 14.1171 6.0903C14.2044 6.25346 14.25 6.4356 14.25 6.62061V6.62098C14.2499 6.84346 14.1839 7.06093 14.0603 7.24589C13.9366 7.43085 13.7609 7.57499 13.5553 7.66009C13.3498 7.74519 13.1236 7.76743 12.9054 7.724C12.6872 7.68057 12.4867 7.57341 12.3294 7.41607Z' fill='%23000'/%3E%3C/svg%3E%0A"); background-position: center; background-size: auto 16px; } .revampV2 .ga--photo-pilihan .article__title--big { font-weight: 600; } .revampV2 .ga--harian-kompas.mt2 { margin-top: 0; } .revampV2 .opinion__wrap.mt2 { margin-top: 0; } .revampV2 .opinion__author { color: var(--yale-blue-50); } .revampV2 .opinion__authortitle { font-size: 12px; color: var(--cl-gray-med); } .revampV2 .opinion__title { font-size: 16px; font-weight: 500; } .revampV2 .box--sponsored, .revampV2 .box--advertorial, .revampV2 .box--brandzview { background: #0161B8 !important; } .revampV2 .social__block { border-radius: 8px; } .revampV2 .kgnowGate.latest { margin: 0; } .revampV2 .topic__wrap.mt2 { margin-top: 0; } .revampV2 .topic .article__box--offset-0 { padding: 0; background-color: var(--bg-main); } .revampV2 .topic .article__list__item:last-child .article__title { border-bottom: 0; } .revampV2 .topic .article__title { padding: 12px 0 16px; height: auto; } .revampV2 .topic .article__title--bullet:after { width: 0; height: 0; } .revampV2 .topic .article__link { -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; height: auto; max-height: 92px; } .revampV2 .gramedia__wrap { border-radius: 8px; overflow: hidden; } .revampV2 .gramedia__buy { background: var(--yale-blue-50); border: 1px solid var(--yale-blue-50); } .revampV2 .gramedia__buy:hover { background: var(--yale-blue-50); border: 1px solid var(--yale-blue-50); color: #fff; } .revampV2 .gramedia__gate .slick-dots li.slick-active button:before { background: var(--yale-blue-50); } .revampV2 .interestGate-btn { background: var(--yale-blue-50); } .revampV2 .gate-kgplus a { color: var(--yale-blue-50); } .clKGnow { background: #EF0D70; background: -webkit-gradient(linear, left top, left bottom, from(#EF0D70), to(#FB571A)); background: linear-gradient(to bottom, #EF0D70 0%, #FB571A 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: "Inter", sans-serif; font-size: 12px; font-weight: 600; text-transform: none; }