/*-------------------------------------
RANKING CSS
---------------------------------------*/
/* rankingTop */
#rankingTop { position: relative; }

/* RankingTabSelect */
.rankingSelectTab { border-bottom: 2px solid #f3f3f3; overflow-y: hidden; margin: 0; }
.rankingSelectTab ul { overflow-x: auto; overflow-y: hidden; white-space: nowrap; padding: 8px; margin: 0; text-align: center; -webkit-overflow-scrolling: touch; }
.rankingSelectTab ul li { display: inline-block; margin-right: 10px; }
.rankingSelectTab ul li:first-child { margin-left: 10px; }
.rankingSelectTab ul li a { display: block; padding: 12px; background-color: transparent; border-radius: 50px; text-align: center; font-weight: bold; color: #333; }
.rankingSelectTab ul li a.active { background-color: #ff8c00; color: #fff; }

h1.rankingTtl { color: #FF8C00; font-size: 18px; font-weight: bold; }

.ttlRanking { margin: 16px 0; color: #333; line-height: 1.4; font-size: 18px; font-weight: bold; }
.ttlRanking::before { content: "\e906"; display: inline-block; margin-right: 4px; font-family: 'icomoon' !important; }

.rankingDate { position: absolute; right: 8px; top: 0; font-size: 12px; font-weight: normal; color: #888; }

#ranking .rankingContents { position: relative; /* rankingTop */ /* common */ }
#ranking .rankingContents .publishDate { text-align: right; font-size: 10px; color: #888; }
#ranking .rankingContents .rankingThumb { margin: 0 0 8px 8px; font-size: 10px; color: #888; text-align: right; }
#ranking .rankingContents .rankingThumb img { display: block; border: 1px solid #efefef; margin-bottom: 4px; }
#ranking .rankingContents .rankingData { overflow: hidden; }
#ranking .rankingContents .rankingData li { margin: 0 0 16px; min-height: 70px; }
#ranking .rankingContents .rankingNum { display: inline-block; width: 32px; height: 32px; background-color: #d3d3d3; line-height: 32px; text-align: center; font-weight: bold; font-size: 18px; color: #333; }
#ranking .rankingContents [class^="icon-arrow"], #ranking .rankingContents .icon-new { display: inline-block; font-size: 16px; vertical-align: middle; }
#ranking .rankingContents .rank01 .rankingNum { background-color: #ffa83d; color: #fff; }
#ranking .rankingContents .icon-new::before { font-size: 10px; color: #fa6565; }
#ranking .rankingContents .icon-arrow-up::before { color: #fa6565; }
#ranking .rankingContents .icon-arrow-right::before { color: #6dbd4a; }
#ranking .rankingContents .icon-arrow-down::before { color: #50a3d3; }
#ranking .rankingContents .rankingMainname { margin: 4px 0; line-height: 1.3; font-size: 16px; font-weight: bold; color: #000; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
#ranking .rankingContents .rankingMainname a { color: #000; }
#ranking .rankingContents .rankingMiddletxt, #ranking .rankingContents .rankingSubname { margin: 4px 0; line-height: 1.5; font-size: 12px; font-weight: normal; color: #888; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
#ranking .rankingContents .rankingMiddletxt a, #ranking .rankingContents .rankingSubname a { color: #888; }
#ranking .rankingContents .rankingMiddletxt { font-size: 14px; font-weight: 700; color: #a88a47; }
#ranking .rankingContents .rankingMiddletxt a { color: #a88a47; }
#ranking .rankingContents .rankingMorebtn a { display: block; border-radius: 4px; background-color: #dfdfdf; padding: 16px 8px; text-align: center; color: #333; }

#ranking.rankingList .ttlRanking { position: relative; padding: 16px 28px 16px 40px; margin-bottom: 8px; margin-top: 0; }
#ranking.rankingList .ttlRanking::before, #ranking.rankingList .ttlRanking::after { position: absolute; top: 50%; margin-top: -12px; vertical-align: sub; color: #333; font-size: 24px; font-weight: normal; }
#ranking.rankingList .ttlRanking::before { left: 8px; margin-top: -12px; }
#ranking.rankingList .ttlRanking a { display: block; }
#ranking.rankingList .rankingThumb { float: right; }
#ranking.rankingList .rankingContents { padding: 8px 8px 18px; }
#ranking.rankingList .rankingContents .ttlRanking { padding-bottom: 8px; margin-bottom: 16px; border-bottom: 4px solid #eee; }
#ranking.rankingList .rankingContents .rankingDate { top: 24px; right: 16px; }
#ranking.rankingList .rankingContents .rankingData li [class^="icon-arrow"], #ranking.rankingList .rankingContents .rankingData li .icon-new { margin-left: 8px; font-size: 22px; }
#ranking.rankingList .rankingContents .rankingData li:last-child { margin-bottom: 0; }
#ranking.rankingList .rankingContents .rankingData li a { display: block; }
#ranking.rankingList .rankingContents .rankingData li a:hover { opacity: .6; }
#ranking.rankingList .rankingContents .rankingData li a > p { width: 6em; float: left; }
#ranking.rankingList .rankingContents .rankingData li a > div { overflow: hidden; }
#ranking.rankingList .rankingContents .rankingMainname { -webkit-line-clamp: 2; }
#ranking.rankingList .rankingMorebtn { max-width: 240px; margin: 16px auto; }
#ranking.rankingList .rankingMorebtn a:hover { opacity: .6; }
#ranking.rankingList .adBanner { border-top: 1px solid #d6d6d6; padding-top: 18px; }

#ranking.rankingDetail { margin-bottom: 4em; }
#ranking.rankingDetail h1 { font-size: 20px; font-weight: bold; color: #FF8C00; }
#ranking.rankingDetail .rankingSublinks { margin: 4em 0; }
#ranking.rankingDetail .rankingSublinks h3 { margin-bottom: 24px; text-align: center; font-size: 16px; font-weight: bold; }
#ranking.rankingDetail .rankingSublinks ul { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; }
#ranking.rankingDetail .rankingSublinks li { width: calc(50% - 4px); margin-bottom: 8px; margin-right: 8px; box-sizing: border-box; line-height: 1.5; display: -ms-flexbox; display: -webkit-flex; display: flex; background-color: #efefef; border-radius: 4px; }
#ranking.rankingDetail .rankingSublinks li:nth-child(2n) { margin-right: 0; }
#ranking.rankingDetail .rankingSublinks li a { width: 100%; align-self: center; position: relative; display: block; box-sizing: border-box; padding: 12px 26px 12px 16px; color: #000; font-weight: 700; }
#ranking.rankingDetail .rankingSublinks li a:hover { opacity: .6; }
#ranking.rankingDetail .rankingSublinks li a::after { position: absolute; right: 13px; top: 50%; display: block; margin-top: -4px; content: ""; width: 8px; height: 8px; border-top: 2px solid #888; border-right: 2px solid #888; -webkit-transform: rotate(45deg); transform: rotate(45deg); }

#ranking.rankingDetail .rankingHead { position: relative; padding: 0 70px 16px; margin-bottom: 8px; border-bottom: 4px solid #eeeeee; }
#ranking.rankingDetail .rankingHead .btnNext, #ranking.rankingDetail .rankingHead .btnPrev { position: absolute; right: 0; top: 50%; display: block; width: 60px; height: 60px; margin-top: -38px; background-color: #3c3c3c; border-radius: 4px; text-align: center; font-size: 0; color: transparent; line-height: 60px; }
#ranking.rankingDetail .rankingHead .btnNext::before, #ranking.rankingDetail .rankingHead .btnPrev::before { display: inline-block; content: ""; width: 24px; vertical-align: middle; margin-left: -7px; height: 24px; border-top: 2px solid #fff; border-right: 2px solid #fff; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#ranking.rankingDetail .rankingHead .btnPrev { right: inherit; left: 0; }
#ranking.rankingDetail .rankingHead .btnPrev::before { margin-left: 12px; -webkit-transform: rotate(-136deg); transform: rotate(-136deg); }
#ranking.rankingDetail .rankingHead h1 { display: block; text-align: center; font-size: 20px; font-weight: bold; line-height: 1.5; color: #333; }
#ranking.rankingDetail .rankingHead h1 span { display: block; font-size: 14px; font-weight: 700; color: #888; }
#ranking.rankingDetail .rankbox { display: table; width: 100%; position: relative; padding: 16px; box-sizing: border-box; border-bottom: 1px solid #fff; }
#ranking.rankingDetail .rankbox:nth-child(even) { background-color: #f8f8f8; }
#ranking.rankingDetail .rankbox a:hover { opacity: .6; }
#ranking.rankingDetail .rankbox .rankicon { display: table-cell; width: 32px; padding-right: 16px; vertical-align: top; text-align: center; }
#ranking.rankingDetail .rankbox .rankicon [class^="icon-arrow"] { font-size: 24px; margin-top: 8px; }
#ranking.rankingDetail .rankbox .rankicon .icon-new { padding-left: 0; padding-right: 0; }
#ranking.rankingDetail .rankbox .rankinfo { position: relative; display: table-cell; width: auto; }
#ranking.rankingDetail .rankbox .rankinfo a { display: block; }
#ranking.rankingDetail .rankbox .thumb { float: left; margin: 0 16px 0 0; }
#ranking.rankingDetail .rankbox .thumb img { display: block; border: 1px solid #efefef; margin-bottom: 4px; }
#ranking.rankingDetail .rankbox .overflow { overflow: hidden; padding-bottom: 2px; }
#ranking.rankingDetail .rankbox .rankingMainname { font-size: 18px; display: block; -webkit-box-orient: inherit; -webkit-line-clamp: inherit; line-height: 1.3; }
#ranking.rankingDetail .rankbox .rankingSubname { font-size: 14px; text-overflow: inherit; white-space: normal; -webkit-box-orient: inherit; -webkit-line-clamp: inherit; line-height: 1.3; }
#ranking.rankingDetail .rankbox .rankingDesc { line-height: 1.4; font-size: 12px; color: #af9c7a; }
#ranking.rankingDetail .rankbox .rankingDesc a { color: #af9c7a; }
#ranking.rankingDetail .rankbox .icons { padding: 0; margin: 4px 0; width: auto; float: none; }
#ranking.rankingDetail .rankbox .icons li { display: inline-block; background-color: #ffa83d; border-radius: 4px; padding: 4px 0; width: 8em; color: #fff; font-size: 12px; font-weight: 700; text-align: center; line-height: 1; }
#ranking.rankingDetail .rankbox .icons li.iconReport { background-color: #c91313; }
#ranking.rankingDetail .rankbox .icons li.iconReview { background-color: #924a11; }
#ranking.rankingDetail .rankbox .icons li a { color: #fff; display: block; }
#ranking.rankingDetail .rankbox .rankingSubinfo { clear: both; height: 44px; margin-top: 8px; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
#ranking.rankingDetail .rankbox .rankingSubinfo .datalist { display: block; }
#ranking.rankingDetail .rankbox .rankingSubinfo .datalist li { list-style: none; display: inline-block; padding: 0; margin-right: 4px; color: #333 !important; font-size: 12px; }
#ranking.rankingDetail .rankbox .rankingSubinfo .datalist li:last-child { margin-right: 0; }
#ranking.rankingDetail .rankbox .rankingSubinfo .datalist li::before { display: inline-block; margin-right: 4px; font-size: 18px; }
#ranking.rankingDetail .rankingTool { position: absolute; right: 0; bottom: 0; z-index: 1; }
#ranking.rankingDetail .rankingTool li { display: inline-block; }
#ranking.rankingDetail .rankingTool button { width: 11em; background-color: #ececec; border: none; line-height: 1; outline: none; padding: 8px 0; margin-left: 4px; border-radius: 4px; }
#ranking.rankingDetail .rankingTool button::before { position: static; display: inline-block; font-family: 'icomoon'; margin-right: 8px; font-size: 28px; vertical-align: middle; }
#ranking.rankingDetail .rankingTool button.btnClip::before { content: "\e904"; }
#ranking.rankingDetail .rankingTool button.btnJoin::before { content: "\e901"; }

#rankingFoot .share { width: 95%; display: table; background-color: #fff; border: 1px solid #d6d6d6; padding: 1em; margin: 1em auto; box-sizing: border-box; }
#rankingFoot .share p, #rankingFoot .share ul { display: table-cell; vertical-align: middle; }
#rankingFoot .share p { width: 6em; line-height: 1.5; font-weight: 700; }
#rankingFoot .share ul { text-align: right; }
#rankingFoot .share ul li { display: inline-block; width: 30%; }
#rankingFoot .share ul li a { display: block; border-radius: 8px; box-sizing: border-box; padding: 8px; text-align: center; }
#rankingFoot .share ul li a i { font-size: 24px; }
#rankingFoot .share ul li a.fb { background: #406ca9; background: -moz-linear-gradient(top, #406ca9 0%, #22559b 100%); background: -webkit-linear-gradient(top, #406ca9 0%, #22559b 100%); background: linear-gradient(to bottom, #406ca9 0%, #22559b 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#406ca9', endColorstr='#22559b',GradientType=0 ); }
#rankingFoot .share ul li a.line { background: #33cb10; background: -moz-linear-gradient(top, #33cb10 0%, #13c200 100%); background: -webkit-linear-gradient(top, #33cb10 0%, #13c200 100%); background: linear-gradient(to bottom, #33cb10 0%, #13c200 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cb10', endColorstr='#13c200',GradientType=0 ); }
#rankingFoot .share ul li a.twitter { background: #0fa4d6; background: -moz-linear-gradient(top, #0fa4d6 0%, #0096cf 100%); background: -webkit-linear-gradient(top, #0fa4d6 0%, #0096cf 100%); background: linear-gradient(to bottom, #0fa4d6 0%, #0096cf 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0fa4d6', endColorstr='#0096cf',GradientType=0 ); }
#rankingFoot .sublink { border-top: 2px solid #d6d6d6; }
#rankingFoot .sublink ul { overflow: hidden; }
#rankingFoot .sublink ul li { float: left; width: 50%; margin-right: -1px; border-bottom: 1px solid #d6d6d6; border-right: 1px solid #d6d6d6; }
#rankingFoot .sublink ul li:nth-child(2n) { border-right: none; }
#rankingFoot .sublink ul li a { position: relative; display: block; padding: 8px 16px 8px 8px; line-height: 1.5; font-size: 12px; }
#rankingFoot .sublink ul li a::after { position: absolute; right: 6px; top: 50%; margin-top: -8px; content: "\f054"; font-family: 'icomoon'; color: #d6d6d6; font-size: 14px; }

#rankingModal { width: 100%; left: 0; bottom: -100vh; position: fixed; background-color: rgba(0, 0, 0, 0.8); z-index: 9999; -webkit-transition: all 0.3s; transition: all 0.3s; }
#rankingModal.open { bottom: 0; }
#rankingModal p { text-align: right; }
#rankingModal #rankingModalClose i { font-size: 24px; padding: 8px; }
#rankingModal ul { padding: 0 1em 2em; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: flex-start; -ms-flex-align: start; }
#rankingModal ul li { width: 49%; }
#rankingModal ul li button { width: 100%; display: block; padding: 14px 0; box-sizing: border-box; border-radius: 8px; text-align: center; font-size: 16px; }
#rankingModal ul li button::before { margin-right: 4px; font-size: 20px; vertical-align: sub; }

#homeList #ranking.rankingList { margin-bottom: 0; }
#homeList #ranking.rankingList .ttlRanking { padding-top: 8px; }
#homeList #ranking.rankingList .rankingTabBody { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; }
#homeList #ranking.rankingList .rankingContents { width: 50%; box-sizing: border-box; }
#homeList #ranking.rankingList .rankingContents .rankingNum { width: 28px; height: 28px; line-height: 28px; font-size: 14px; }
#homeList #ranking.rankingList .rankingContents .rankingData li { overflow: hidden; clear: both; }
#homeList #ranking.rankingList .rankingContents .rankingData li a > p { width: 3em; text-align: center; }
#homeList #ranking.rankingList .rankingContents .rankingData li [class^="icon-arrow"] { margin: 8px 0 0; font-size: 18px; }
#homeList #ranking.rankingList .rankingContents.long { width: 100%; }
#homeList #ranking.rankingList .rankingContents.long .rankingThumb img { width: 200px; height: auto; }

#homeList .goMore { padding: 12px 0 8px; margin-bottom: 0; }

/* ranking Button */
#content button { border: none; background-color: transparent; outline: 0; }

.btnJoin::before { content: "\e901"; font-family: 'icomoon'; }

.btnJoined::before { content: "\e902"; font-family: 'icomoon'; }

.btnClip::before { content: "\e904"; font-family: 'icomoon'; }

.btnCliped::before { content: "\e905"; font-family: 'icomoon'; }

.btnGray { background: #e7e7e7; background: -moz-linear-gradient(top, #e7e7e7 0%, #e3e3e3 100%); background: -webkit-linear-gradient(top, #e7e7e7 0%, #e3e3e3 100%); background: linear-gradient(to bottom, #e7e7e7 0%, #e3e3e3 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#e3e3e3',GradientType=0 ); color: #000; }

.btnOrange { background: #ff7d00; background: -moz-linear-gradient(top, #ff7d00 0%, #ff6900 100%); background: -webkit-linear-gradient(top, #ff7d00 0%, #ff6900 100%); background: linear-gradient(to bottom, #ff7d00 0%, #ff6900 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7d00', endColorstr='#ff6900',GradientType=0 ); color: #fff; }

/* hover */
.btnJoin, .btnClip, .btnNext, .btnPrev { opacity: 1; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15); }
.btnJoin:hover, .btnClip:hover, .btnNext:hover, .btnPrev:hover { opacity: .6; }

.nextRanking { width: 90%; margin: 8px auto; text-align: center; }
.nextRanking a { display: block; text-align: center; padding: 16px 0; border-radius: 8px; background-color: #efefef; }

#infscr-loading { text-align: center; margin: 2em 0; }

/* fonts */
@font-face { font-family: 'icomoon'; src: url("/fonts/common/rank/icomoon.eot?9v2u7u"); src: url("/fonts/common/rank/icomoon.eot?9v2u7u#iefix") format("embedded-opentype"), url("/fonts/common/rank/icomoon.ttf?9v2u7u") format("truetype"), url("/fonts/common/rank/icomoon.woff?9v2u7u") format("woff"), url("/fonts/common/rank/icomoon.svg?9v2u7u#icomoon") format("svg"); font-weight: normal; font-style: normal; }
[class^="icon-"]:before, [class*=" icon-"]:before, [class^="icon-"]:after, [class*=" icon-"]:after { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; vertical-align: middle; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.icon-chevron-left:before { content: "\f053"; }

.icon-chevron-right:before { content: "\f054"; }

.icon-angle-right:before { content: "\f105"; }

.icon-line:before { content: "\e90c"; }

.icon-new:before { content: "\e916"; }

.icon-join:before { content: "\e900"; }

.icon-join-add:before { content: "\e901"; }

.icon-join-remove:before { content: "\e902"; }

.icon-clip:before { content: "\e903"; }

.icon-clip-add:before { content: "\e904"; }

.icon-clip-remove:before { content: "\e905"; }

.icon-ranking:before { content: "\e906"; }

.icon-edit:before { content: "\e254"; }

.icon-view-tb:before { content: "\e5c3"; }

.icon-view-list:before { content: "\e8ef"; }

.icon-email:before { content: "\e907"; }

.icon-settings:before { content: "\e908"; }

.icon-comment:before { content: "\e909"; }

.icon-team:before { content: "\e90a"; }

.icon-hand:before { content: "\e90b"; }

.icon-user:before { content: "\e90d"; }

.icon-calendar:before { content: "\e90e"; }

.icon-close:before { content: "\e90f"; }

.icon-community:before { content: "\e910"; }

.icon-submenu:before { content: "\e911"; }

.icon-live:before { content: "\e912"; }

.icon-menu:before { content: "\e913"; }

.icon-search:before { content: "\e914"; }

.icon-timeline:before { content: "\e915"; }

.icon-bell:before { content: "\e951"; }

.icon-arrow-up:before { content: "\ea32"; }

.icon-arrow-right:before { content: "\ea34"; }

.icon-arrow-down:before { content: "\ea36"; }

.icon-facebook:before { content: "\ea90"; }

.icon-twitter:before { content: "\ea96"; }