@charset 'utf-8';

/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; word-break:break-word; }
a { text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { border: 0; background: none; outline: 0; cursor: pointer; }
button span { position: relative; }
input:focus,
textarea:focus,
select:focus,
button:focus { outline: none; }

/* ios search reset */
input[type="search"] { -webkit-appearance: textfield; /* 1 */ /* 2 */ box-sizing: content-box; }
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, main, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; overflow: hidden; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

*, *:before, *:after { box-sizing: border-box; line-height: 1; word-break:break-word; }


/* horse racing */
body { background: rgba(45,45,49,.95); }
header { position:relative; z-index:2; width: 100%; height: 60px; padding: 9px 14px; background-color:rgba(0,0,0,.2); }
nav { display: flex; align-items: center; justify-content:space-between; width: 100%; height: 100%; }

.spr_horse { background: url(../../img/horse_racing/spr_horse.png) no-repeat 104px 76px; }
.spr_horse.spr_rhombus { top:50%; margin-top:-4.5px; width:9px; height:9px; background-position: -69px -38px; }
.spr_horse.spr_dot { top: 50%; margin-top: -1.5px; width: 3px; height: 3px; background-position: -85px -38px; }
.spr_horse.spr_line { right:-2px; top:-2px; width:13px; height:15px; background-position:-52px -38px;background-color:#232426;  }
.spr_horse.spr_line:nth-of-type(2) { right:auto; left:-2px; -webkit-transform:rotateY(180deg); transform:rotateY(180deg); }
.spr_horse.spr_line:nth-of-type(3) { top:auto; bottom:-2px; -webkit-transform:rotateX(180deg); transform:rotateX(180deg); }
.spr_horse.spr_line:nth-of-type(4) { right:auto; left:-2px; top:auto; bottom:-2px; -webkit-transform:rotate(180deg); transform:rotate(180deg); }

#main { position:relative; height:100vh; opacity:0; -webkit-transition-delay: 1s; transition-delay: 1s; -webkit-transition:opacity 1s; transition:opacity 1s;}
#main.on { opacity:1; }

.combobox { min-width: 125px; }
.combobox:nth-of-type(2) { flex-shrink:0; flex-grow:1; }
.combobox dl { position: relative; color: #e0e0e0; user-select: none; }
.combobox ~ .combobox dl { margin-left:10px; }
.combobox dt { display: flex; align-items: center; justify-content: flex-start; position: relative; height: 40px; padding: 0 40px 0 10px; border: 1px solid #414248; border-radius: 2px; background: #3a3a3f; line-height: 1; }
.combobox dt.active { cursor: pointer; }
.combobox dt span { color:#888888; }
.combobox dt.active span { color: #e0e0e0; cursor: pointer; }
.combobox dt.active:before { content: ''; display: block; position: absolute; right: 15px; top: 50%; width: 0; height: 0; margin-top: -6px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 11px solid #b3b3b5; border-radius: 2px; -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,.2); box-shadow: 2px 2px 5px 0px rgba(0,0,0,.2); -webkit-transition: transform .3s; transition: transform .3s; }

.combobox dd { display:none; position: absolute; left: 0; top: 40px; width: 100%; background: #333; border: 1px solid #414248; border-top: none; }
.combobox dd span { display: block; padding: 10px; border-top:1px solid #414248; cursor:pointer; }
.combobox.active dt:before { -webkit-transform: rotate3d(1,0,0, 180deg); transform: rotate3d(1,0,0, 180deg); }
.combobox.active dd { display: block; }

.main_contents { position:absolute; left:0; top:60px; width:100%; height:calc(100% - 60px); }

.ranking { width: 100%; height:100%; color: #988d83; }
.table_contents { display:none; width:100%; height:100%; }
.table_contents.active { display:block; }

h1 { display:flex; align-items:center; justify-content:space-between; width:100%; height:40px; font-size:20px; color:#ddc39e; }
h1 em { display:block; position:relative; width:170px; height:1px; background-color:#464646 }
h1 em i { display:block; position:absolute; left:57px; }
h1 em i:nth-of-type(2) { left:71px; }
h1 em i:nth-of-type(3) { left: auto; right:0; }

h1 em:nth-of-type(2) i { left: auto; right: 57px; }
h1 em:nth-of-type(2) i:nth-of-type(2) { left: auto; right: 71px; }
h1 em:nth-of-type(2) i:nth-of-type(3) { left: 0; right: auto; }

.rank_type { height:calc(100% - 40px); }

.rank_head { display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; border-top: 1px solid rgba(75,74,79, .78); color: #a78e6a; text-align:center; }

/* 종합 순위 */
.col_rank { width:15%; }
.col_family { width:23%; }
.col_attend { width:15%; }
.col_rank_1,
.col_rank_2,
.col_rank_3 { width: 10%; }
.col_point { width:17%; }

/* 기록 순위 */
[data-rank] .col_horse { width: 20%; }
[data-rank] .col_record { width: 21%; }
[data-rank] .col_date { width: 21%; }

.rank_body { height:calc(100% - 40px); }

.rank_body li { text-align: center; }
.rank_body .no-data { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }

.my_rank_details { position:relative; height:75px; background:#232426; }
.spr_line { position: absolute; }
.box_decorate,
.box_line { position:absolute; left:3px; top:3px; width:calc(100% - 6px); height:calc(100% - 6px); border: 2px solid rgba(77,76,73, .5); }
.box_decorate { z-index: 1; }

.my_rank_details > .contents { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%;  }
.my_rank_details > .contents ul { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

/* Rank */
.other_rank_wrap { height:calc(100% - 75px); overflow-y: auto; background:rgba(0,0,0,.2); }
.other_rank_wrap .no-data { height: 50px; }
.other_rank_wrap ul { display: flex; align-items: center; justify-content: center; width: 100%; height: 50px }


[data-record='1'] li.col_rank,
[data-record='2'] li.col_rank,
[data-record='3'] li.col_rank { position:relative; text-indent: -999999px; }

[data-record='1'] li.col_rank:before,
[data-record='2'] li.col_rank:before,
[data-record='3'] li.col_rank:before { content: ''; display: block; position: absolute; left: 50%; top: 50%; width: 52px; height: 38px; margin-left: -26px; margin-top: -19px; background: url(../../img/horse_racing/spr_horse.png) no-repeat; }

[data-record='2'] li.col_rank:before { background-position: -52px 0; }
[data-record='3'] li.col_rank:before { background-position: 0 -38px; }

/* hover */
.combobox dt.active:hover { color: #fff; border-color: #c3c3c3; }
.combobox dt.active:hover:before { border-top-color: #fff; }
.combobox dd span:hover { background:rgba(0,0,0,.5); }


.rankTypeName .hide { display: none }


/* scroll */
::-webkit-scrollbar { position:absolute; width: 5px; }
::-webkit-scrollbar-track { background: #3a3a3d; }
::-webkit-scrollbar-thumb { background: #cca471; border-radius: 20px; -webkit-transition: background .3s; transition: background .3s; }
::-webkit-scrollbar-thumb:hover { background: #d7ac76; }
::-webkit-scrollbar-thumb:active { background: #d7ac76; }
::-webkit-scrollbar-button { background-position: center; background-color: #3a3a3d; opacity: 0; }
::-webkit-scrollbar-button:decrement { height: 0; opacity: 0; background-color: #3a3a3d; }
::-webkit-scrollbar-button:decrement:hover { background-color: #3a3a3d; }
::-webkit-scrollbar-button:decrement:active { background-color: #3a3a3d; }
::-webkit-scrollbar-button:increment { height: 0; background-color: #3a3a3d; -webkit-transform: rotate(180deg); }
::-webkit-scrollbar-button:increment:hover { background-color: #3a3a3d; }
::-webkit-scrollbar-button:increment:active { background-color: #3a3a3d; }