@charset"utf-8";

@import url('fonts.css');

/* default */
* {margin:0;padding:0;box-sizing:border-box}
html {width:100%;height:100%;}
body {width:100%;height:100%;margin:0px;padding:0px;font-family:'Noto Sans Korean';font-size:16px;color:#ffffff;line-height:18px;font-weight:400;}
div, p, ul, li, table, th, td, textarea, input,  form, h1, h2, h3, h4, h5, h6, dt, dl, dd, em, address, cite {margin:0px;padding:0px;font-family:'Noto Sans Korean', sans-serif;color:#454545;line-height:18px;font-weight:500;}
span{margin:0px;padding:0px;}
ul, ol, dl, dd, dt, li {list-style-type:none;margin:0;padding:0px;line-height:18px;}
table {table-layout:fixed;border:0;border-spacing:0;border-collapse:collapse}
select {font-family:'Noto Sans Korean';font-size:14px;}
fieldset {border:0;margin:0px;padding:0px;}
legend {display:none;position:absolute;visibility:hidden;}
caption {visibility:hidden;width:0px;height:0px;overflow:hidden;font-size:0px;margin:0px;padding:0px;line-height:0px;display:none;}
img {border:0;vertical-align:top;}
optgroup {font-style:normal;font-size:0px;height:0px;line-height:0px;}
input,select {margin:0;vertical-align:middle;font-family:inherit;outline:none}
button {border:0;font-family:inherit;outline:none;cursor:pointer}

a {text-decoration:none;color:#fff;margin:0px;padding:0px;}
a:link, a:visited {text-decoration:none;color:#ffffff;}
a:hover, a:focus, a:active {text-decoration:none}
a:focus, img:focus {outline:none;}

/* common */
.clear:after {content:" ";display:block;clear:both;height:0;visibility:hidden;}

#content {position:relative}
#content.horserace {background:url(../images/horserace_bg.png) no-repeat 50% 0;background-size:auto 100%}
#content.horserace canvas {display:block;width:480px;margin:0 auto}
#content .canvas_wrap {position:relative;max-width:750px;margin:0 auto}
#content .canvas_wrap img {display:block;width:100%;height:auto}

.info_horse_pop {position:absolute;top:0;left:0;width:100%;min-height:67%;padding:33px 15px 50px;background:#101318;border:1px solid #363c45;transform:scale(0.6);transform-origin:top}
.info_horse_pop .tit_popup {margin-bottom:23px;font-size:38px;font-weight:700;color:#fff;line-height:38px;text-align:center}
.info_horse_pop .popup_statistics_box {margin-bottom:16px;padding:17px 18px 0;background:#000}
.info_horse_pop .popup_statistics_box .tit {float:left;width:140px;font-size:18px;font-weight:500;color:#fff;letter-spacing:-0.5px}
.info_horse_pop .popup_statistics_box .tit + ul {float:left;width:calc(100% - 140px)}
.info_horse_pop .popup_statistics_box .tit + ul li {float:left;width:12.5%;height:30px;text-align:center}
.info_horse_pop .popup_statistics_box .tit + ul li span {display:inline-block;font-size:17px;font-weight:500}
.info_horse_pop .ico_horse_circle {display:inline-block;width:30px;height:30px;border-radius:50%;font-size:17px;font-weight:500;line-height:30px;text-align:center;vertical-align:top}
.info_horse_pop .ico_horse_circle.num_1 {background:#e30000;color:#fff}
.info_horse_pop .ico_horse_circle.num_2 {background:#fff;color:#192028}
.info_horse_pop .ico_horse_circle.num_3 {background:#0d38e2;color:#fff}
.info_horse_pop .ico_horse_circle.num_4 {background:#fae62a;color:#000}
.info_horse_pop .ico_horse_circle.num_5 {background:#32963b;color:#fff}
.info_horse_pop .ico_horse_circle.num_6 {background:none;border:1px solid #6d6d6d;color:#fae62a;line-height:28px}
.info_horse_pop .ico_horse_circle.num_7 {background:#ff6061;color:#000}
.info_horse_pop .ico_horse_circle.num_8 {background:#fd6c00;color:#192028}
.info_horse_pop .statistics_list .tit {line-height:38px}
.info_horse_pop .statistics_list .tit + ul {padding:4px 0}
.info_horse_pop .rank_list .tit {color:#727e88;line-height:38px}
.info_horse_pop .rank_list .tit + ul {padding:4px 0}
.info_horse_pop .rank_list .tit + ul li span {color:#fff;line-height:30px;vertical-align:top}
.info_horse_pop .rank_list + .number_list {margin-top:14px}
.info_horse_pop .number_list {border-top:1px solid #101317}
.info_horse_pop .number_list .tit {line-height:54px}
.info_horse_pop .number_list .tit + ul {padding:12px 0}

.info_horse_pop .info_horse_tbl {width:100%}
.info_horse_pop .info_horse_tbl thead th {height:52px;background:#192028;font-size:18px;font-weight:500;color:#fff}
.info_horse_pop .info_horse_tbl tbody td {height:60px;border-bottom:1px solid #25282d;font-size:18px;font-weight:500;color:#727e88;text-align:center}
.info_horse_pop .info_horse_tbl tbody td ul {padding-top:4px}
.info_horse_pop .info_horse_tbl tbody td ul li {float:left;margin-left:4px}
.info_horse_pop .info_horse_tbl .hash_horse_race {display:block;overflow:hidden;padding-left:40px;background:url(../images/ico_hash_horse_race.png) no-repeat 10px 50%;background-size:auto 20px;font-size:18px;font-weight:500;color:#727e88;line-height:18px;text-overflow:ellipsis;white-space:nowrap}
.info_horse_pop .info_horse_tbl + .page_skip {padding-top:18px;font-size:0;text-align:center}
.info_horse_pop .info_horse_tbl + .page_skip span {display:inline-block;width:43px;height:43px;margin:0 8px;font-size:24px;font-weight:500;color:#727e88;line-height:43px;text-align:center;vertical-align:top}
.info_horse_pop .info_horse_tbl + .page_skip span.on {color:#fff}
.info_horse_pop .info_horse_tbl + .page_skip span img {display:block;width:100%;height:100%}

.info_horse_pop .info_btn_area li {float:left;position:relative;width:32.66666666666667%;height:90px;margin:2px 0 0 1%;padding:13px 0 0 18px;background:#454648;border-bottom:5px solid #202221;border-radius:10px}
.info_horse_pop .info_btn_area li:first-child {margin-left:0}
.info_horse_pop .info_btn_area .item_2 li {width:49.5%}
.info_horse_pop .info_btn_area li .tit {display:inline-block;position:relative;font-size:24px;font-weight:500;color:#fff;line-height:30px}
.info_horse_pop .info_btn_area li .tit.ico_odd:before {content:"O";display:block;position:absolute;top:0;right:-40px;width:30px;height:30px;background:#df1312;border-radius:50%;font-size:24px;font-weight:500;color:#fff;line-height:30px;text-align:center}
.info_horse_pop .info_btn_area li .tit.ico_even:before {content:"E";display:block;position:absolute;top:0;right:-40px;width:30px;height:30px;background:#4dbedf;border-radius:50%;font-size:24px;font-weight:500;color:#fff;line-height:30px;text-align:center}
.info_horse_pop .info_btn_area li .tit.ico_s:before {content:"S";display:block;position:absolute;top:0;right:-40px;width:30px;height:30px;background:#4dbedf;border-radius:50%;font-size:24px;font-weight:500;color:#fff;line-height:30px;text-align:center}
.info_horse_pop .info_btn_area li .tit.ico_m:before {content:"T";display:block;position:absolute;top:0;right:-40px;width:30px;height:30px;background:#4db544;border-radius:50%;font-size:24px;font-weight:500;color:#fff;line-height:30px;text-align:center}
.info_horse_pop .info_btn_area li .tit.ico_l:before {content:"B";display:block;position:absolute;top:0;right:-40px;width:30px;height:30px;background:#df1312;border-radius:50%;font-size:24px;font-weight:500;color:#fff;line-height:30px;text-align:center}

.info_horse_pop .info_btn_area li .info_circle {display:block;position:absolute;top:13px;right:78px;width:34px;height:34px;background:#242424;border-radius:50%;font-size:17px;font-weight:500;color:#454648;line-height:34px;text-align:center}
.info_horse_pop .info_btn_area li .info_circle ~ .info_circle {right:37px}
.info_horse_pop .info_btn_area li .rate {display:block;position:absolute;top:13px;right:18px;font-size:24px;font-weight:500;color:#fff;line-height:30px}
.info_horse_pop .win_condition_list {margin-top:20px;border-top:1px solid #212429}
.info_horse_pop .win_condition_list li {border-bottom:1px solid #212429}
.info_horse_pop .win_condition_list li:after {content:" ";display:block;clear:both;height:0;visibility:hidden;}
.info_horse_pop .win_condition_list li span {display:block;float:left;font-size:22px;font-weight:500;line-height:72px}
.info_horse_pop .win_condition_list .tit {width:87px;padding-left:12px;color:#fff}
.info_horse_pop .win_condition_list .sub {color:#727e88}

.info_horse_pop .btn_cls_popup {display:block;position:absolute;top:23px;right:23px;width:47px;height:47px;background:url(../images/btn_cls_popup.png) no-repeat 0 0;background-size:47px 47px;text-indent:-9999px}

@media screen and (max-width:749px){
.info_horse_pop {padding:28px 13px 50px}
.info_horse_pop .tit_popup {margin-bottom:20px;font-size:32px;line-height:32px}
.info_horse_pop .popup_statistics_box {padding:14px 16px 0}
.info_horse_pop .statistics_list .tit {line-height:30px}
.info_horse_pop .popup_statistics_box .tit {width:120px;font-size:15px}
.info_horse_pop .popup_statistics_box .tit + ul {width:calc(100% - 120px)}
.info_horse_pop .popup_statistics_box .tit + ul li {height:26px}
.info_horse_pop .popup_statistics_box .tit + ul li span {font-size:15px}
.info_horse_pop .ico_horse_circle {width:26px;height:26px;font-size:15px;line-height:26px}
.info_horse_pop .ico_horse_circle.num_6 {line-height:24px}
.info_horse_pop .rank_list + .number_list {margin-top:9px}
.info_horse_pop .number_list .tit {line-height:46px}
.info_horse_pop .number_list .tit + ul {padding:10px 0}

.info_horse_pop .info_horse_tbl thead th {height:44px;font-size:15px}
.info_horse_pop .info_horse_tbl tbody td {height:51px;font-size:15px}
.info_horse_pop .info_horse_tbl + .page_skip {padding-top:16px}
.info_horse_pop .info_horse_tbl + .page_skip span {width:36px;height:36px;margin:0 6px;font-size:20px;line-height:36px}
.info_horse_pop .info_horse_tbl .hash_horse_race {padding-left:33px;background:url(../images/ico_hash_horse_race.png) no-repeat 8px 50%;background-size:auto 17px;font-size:15px;line-height:15px}

.info_horse_pop .info_btn_area li {height:78px;padding:12px 0 0 13px;border-bottom:4px solid #202221}
.info_horse_pop .info_btn_area li .tit {font-size:20px;line-height:25px}
.info_horse_pop .info_btn_area li .info_circle {top:11px;right:66px;width:29px;height:29px;font-size:14px;line-height:29px}
.info_horse_pop .info_btn_area li .info_circle ~ .info_circle {right:31px}
.info_horse_pop .info_btn_area li .rate {top:12px;right:13px;font-size:20px;line-height:25px}
.info_horse_pop .win_condition_list {margin-top:18px}
.info_horse_pop .win_condition_list li span {font-size:18px;line-height:63px}

.info_horse_pop .btn_cls_popup {top:20px;right:20px;width:40px;height:40px;background-size:40px 40px}
}

@media screen and (max-width:639px){
.info_horse_pop {padding:13px 5px 25px;transform:inherit;}
.info_horse_pop .tit_popup {margin-bottom:10px;font-size:17px;line-height:17px}
.info_horse_pop .popup_statistics_box {margin-bottom:8px;padding:15px 8px 0}
.info_horse_pop .popup_statistics_box .tit {width:70px;font-size:10px}
.info_horse_pop .popup_statistics_box .tit + ul {width:calc(100% - 70px)}
.info_horse_pop .popup_statistics_box .tit + ul li {height:13px}
.info_horse_pop .popup_statistics_box .tit + ul li span {font-size:10px}
.info_horse_pop .ico_horse_circle {width:13px;height:13px;font-size:10px;line-height:13px}
.info_horse_pop .ico_horse_circle.num_6 {line-height:12px}
.info_horse_pop .statistics_list .tit {line-height:17px}
.info_horse_pop .statistics_list .tit + ul {padding:2px 0}
.info_horse_pop .rank_list .tit {line-height:17px}
.info_horse_pop .rank_list .tit + ul {padding:2px 0}
.info_horse_pop .rank_list .tit + ul li span {line-height:13px}
.info_horse_pop .rank_list + .number_list {margin-top:5px}
.info_horse_pop .number_list .tit {line-height:23px}
.info_horse_pop .number_list .tit + ul {padding:5px 0}
.info_horse_pop .info_horse_tbl thead th {height:22px;font-size:10px}
.info_horse_pop .info_horse_tbl tbody td {height:21px;font-size:10px}
.info_horse_pop .info_horse_tbl tbody td ul {padding-top:4px}
.info_horse_pop .info_horse_tbl tbody td ul li {margin-left:4px}
.info_horse_pop .info_horse_tbl .hash_horse_race {padding-left:12px;background-size:auto 10px;font-size:10px;line-height:10px}
.info_horse_pop .info_horse_tbl + .page_skip {padding-top:8px}
.info_horse_pop .info_horse_tbl + .page_skip span {width:18px;height:18px;margin:0 2px;font-size:10px;line-height:18px}

.info_horse_pop .info_btn_area li {height:40px;padding:5px 0 0 7px;border-bottom:2px solid #202221;border-radius:6px}
.info_horse_pop .info_btn_area li .tit {font-size:10px;line-height:14px}
.info_horse_pop .info_btn_area li .tit.ico_odd:before {top:0;right:-20px;width:15px;height:15px;font-size:12px;line-height:15px}
.info_horse_pop .info_btn_area li .tit.ico_even:before {top:0;right:-20px;width:15px;height:15px;font-size:12px;line-height:15px}
.info_horse_pop .info_btn_area li .tit.ico_s:before {top:0;right:-20px;width:15px;height:15px;font-size:12px;line-height:15px}
.info_horse_pop .info_btn_area li .tit.ico_m:before {top:0;right:-20px;width:15px;height:15px;font-size:12px;line-height:15px}
.info_horse_pop .info_btn_area li .tit.ico_l:before {top:0;right:-20px;width:15px;height:15px;font-size:12px;line-height:15px}
.info_horse_pop .info_btn_area li .info_circle {top:5px;right:33px;width:15px;height:15px;font-size:10px;line-height:15px}
.info_horse_pop .info_btn_area li .info_circle ~ .info_circle {right:15px}
.info_horse_pop .info_btn_area li .rate {top:5px;right:7px;font-size:10px;line-height:14px}
.info_horse_pop .win_condition_list {margin-top:10px;border-top:1px solid #212429}
.info_horse_pop .win_condition_list li span {font-size:10px;font-weight:500;line-height:30px}
.info_horse_pop .win_condition_list .tit {width:36px;padding-left:5px}

.info_horse_pop .btn_cls_popup {top:10px;right:10px;width:20px;height:20px;background-size:20px 20px}
}




/* S:20180627_add */
#hashPopup {position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000000000000;background:rgba(0,0,0,0.75);display:none;}
#hashPopup .hash_popup {position:relative;max-width:550px;margin:30px auto;padding:40px 15px 30px;background:#21242b;border-radius:10px;height:300px}
#hashPopup .hash_popup .popup_title {text-align:left;padding-bottom:10px;}
#hashPopup .hash_popup .popup_title span {display:contents;font-size:16px}
#hashPopup .hash_popup .popup_title .titles {float:left;width:20%;}
#hashPopup .hash_popup .popup_title .text_success {float:left;color:#81bf39;;width:70%;word-break:break-all}
#hashPopup .hash_popup .popup_cont {padding-top:20px;font-size:13px;color:rgba(255,255,255,0.7);word-wrap:break-word}
#hashPopup .hash_popup .popup_close {position:absolute;top:0;right:0;width:40px;height:40px;background:none;border:0;font-size:22px;color:rgba(255,255,255,0.7);text-align:center}
#hashPopup .hash_popup .popup_close:hover {color:#fff}


/* S:20180627_add */
#hashPopup2 {position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000000000000;background:rgba(0,0,0,0.75);display:none;}
#hashPopup2 .hash_popup {position:relative;max-width:550px;margin:30px auto;padding:40px 15px 30px;background:#21242b;border-radius:10px;height:300px}
#hashPopup2 .hash_popup .popup_title {text-align:left;padding-bottom:10px;}
#hashPopup2 .hash_popup .popup_title span {display:contents;font-size:16px}
#hashPopup2 .hash_popup .popup_title .titles {float:left;width:20%;}
#hashPopup2 .hash_popup .popup_title .text_success {float:left;color:#81bf39;;width:70%;word-break:break-all}
#hashPopup2 .hash_popup .popup_cont {padding-top:20px;font-size:13px;color:rgba(255,255,255,0.7);word-wrap:break-word}
#hashPopup2 .hash_popup .popup_close {position:absolute;top:0;right:0;width:40px;height:40px;background:none;border:0;font-size:22px;color:rgba(255,255,255,0.7);text-align:center}
#hashPopup2 .hash_popup .popup_close:hover {color:#fff}


@media screen and (max-width:639px){
#hashPopup .hash_popup {max-width:100%;margin:30px 10px}
#ui_notifIt {margin-top:230px}
}