@charset "utf-8";

/* ======================================== */
/*                  header                  */
/* ======================================== */
header { color: #fff; height: 50px; box-shadow: 0 2px 3px #a4a4a4; background-color: #001e29; position: fixed; top: 0; width: 100%; z-index: 101;
  /* background: #1e1e2d; border-bottom: 3px solid #bb845b; background: linear-gradient(0deg, #593074 0%, #a44cc6 50%, #593074 100%); */
  /* background: linear-gradient(0deg, #582e74 0%, #6d407e 50%, #4a2960 100%); */ }
header .mobile-toggle { position:absolute; left:3px; width:40px; height:50px; line-height:50px; text-align:center; font-size:26px; vertical-align:middle; color: #fff; }
header div.text-logo { padding: 10px 0; }
header div.text-logo img { width:135px; }
header a.bt-mp { position: absolute; top: 6px; right: 8px; width: 38px; height: 38px; text-align: center; border: 2px solid rgba(123, 123, 123, 0.8);
  overflow: hidden; border-radius: 50%; }
header a.bt-mp span.badge-log { position: absolute; top: -1px; bottom: 0; left: 0px; margin: auto; width: 35px; height: 16px; line-height: 16px;
  background: rgba(83, 79, 84, 0.5); letter-spacing: -0.5px; font-weight: 600; font-size: 11px; text-shadow: 1px 1px 2px #000; color: #fff; }


/* ================================================ */
/*                     Footer                       */
/* ================================================ */
footer { font-size: 11px; color: #fff; height: 26px; background: #1e1e2d; }
footer p.copyright { padding: 5px; font-size: 11px; }


/* ================================================ */
/*                Modal & Alert style               */
/* ================================================ */
#fs-popup-lg>.modal-lg { width: 1100px; }
#fs-popup-sm>.modal-sm { width: 600px; }
#fs-custom>.modal-custom-size { width: max-content; max-width: 1160px; }
#fs-popup-full .modal-dialog { width: 100%; margin: 0; }
#fs-popup-full .modal-content { background-color: #fff; border: 1px solid #ccc; border-radius: 0; outline: 0; -webkit-box-shadow: 0; box-shadow: 0; }
#fs-popup-full .modal-body { padding: 5px 0; }
#fs-analizer .modal-dialog { min-width: 768px; max-width: 1190px; width: 100%; }

/* 모달 style-1 */
.modal-s1 { background: #fff; border: 5px solid #caa3d8; }
.modal-s1 .modal-header { padding: 10px 10px 8px; background: #edeaf5; border-bottom: 1px solid #cabfe6; }
.modal-s1 .modal-title { font-size: 18px; font-weight: 700; }

/* sweetalert2 */
.swal2-popup.swal2-modal { border: 3px solid #caa3d8; box-shadow: 2px 2px 5px rgb(0 0 0 / 60%); padding: 0 0 12px; }
.swal2-popup .swal2-icon { zoom:0.55; margin: 2.5em auto -0.5em; }
.swal2-popup .swal2-title { font-size: 22px; }
.swal2-popup .swal2-html-container { font-size: 18px; margin: 0.5em 1.6em 0.25em; }
.swal2-popup .swal2-actions { border-top:1px solid #dcc9e3; padding-top: 12px; margin: 0.85em auto 0; }
.swal2-popup .swal2-actions button { margin: 0 6px; padding: 4px 12px; }
button.swal2-styled.swal2-confirm { background-color: #337ab7; }
button.swal2-styled.swal2-deny { background-color: #333333; }
button.swal2-styled.swal2-cancel { background-color: #d9534f; }
button.swal2-styled.swal2-confirm:focus { box-shadow: none !important; }


/* ================================================ */
/*                   Button style                   */
/* ================================================ */
/* Close btn */
.bt-close { position: relative; display: inline-block; width: 35px; height: 35px; overflow: hidden; }
.bt-close:before,
.bt-close:after { content: ''; box-sizing: content-box; display: block; width: 12px; height: 12px; margin: auto; position: absolute; top: 0; bottom: 0;
  border: 2px solid rgba(0, 0, 0, 0.75); transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); }
.bt-close:before { border-right: none; border-bottom: none; right: 2px; }
.bt-close:after { border-left: none; border-top: none; right: 19px; }

/* 토글스위치 버튼 - 커스텀스타일1 */
.switch-rect { position: relative; width: 55px; height: 26px; overflow: hidden; border-radius: 3px; }
.switch-rect>input { opacity: 0; width: 0; height: 0; }
.switch-rect>.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid rgb(0 0 0 / 11%); overflow: hidden;
  transition: .4s; -webkit-transition: .4s; -moz-transition: .4s; -ms-transition: .4s; -o-transition: .4s; }
.switch-rect>.slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: -10px; bottom: 0px; z-index: 2; background-color: #fff;
  box-shadow: 0px 0px 3px rgb(0 0 0 / 80%); transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; border-radius: 3px; }
.switch-rect>input:checked+.slider:before { transform: translateX(50px); -webkit-transform: translateX(50px); -moz-transform: translateX(50px);
  -ms-transform: translateX(50px); -o-transform: translateX(50px); }
.switch-rect>input+.slider>em { font-style: normal; font-size: 12px; color: #fff; position: absolute; top: 2px; z-index: 1;
  transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; }
.switch-rect>input+.slider>em.on-txt { opacity: 0; left: 8px; }
.switch-rect>input+.slider>em.off-txt { opacity: 1; right: 8px; }
.switch-rect>input:checked+.slider>em.on-txt { opacity: 1; }
.switch-rect>input:checked+.slider>em.off-txt { opacity: 0; }
.switch-rect>.slider.default { background-color: #e3d3d3; }
.switch-rect>input:checked+.slider.default { background-color: #747474; }
.switch-rect>input+.slider.default>em { color: #fff; }
.switch-rect>input+.slider.default>em.off-txt { color: #222; }
.switch-rect>.slider.primary { background-color: #d9534f; }
.switch-rect>input:checked+.slider.primary { background-color: #337ab7; }
.switch-rect>.slider.info { background-color: #d9534f; }
.switch-rect>input:checked+.slider.info { background-color: #5bc0de; }
.switch-rect>.slider.success { background-color: #d9534f; }
.switch-rect>input:checked+.slider.success { background-color: #5cb85c; }


/* ===================================================== */
/*                    Loader & Spinner                   */
/* ===================================================== */
/* style-00 */
.spinner { margin: 50px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; }
.spinner>div { background-color: #888; height: 100%; width: 6px; display: inline-block;
  -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; }
.spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }
.spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }

/* style-01 */
.glo-spinner { position: fixed; left: 0; right: 0; margin: 0 auto; z-index: 900; }
.glo-spinner.spin-s1 { top: 0; width: 145px; }
.glo-spinner.spin-s1.in { top: calc(50% - 42px); }
.glo-spinner.spin-s1>div { display: none; width: 100%; height: 45px; padding: 3px 0 3px; background: #3d4444; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.65);
  border-top: 3px solid #a44dc7; }
.glo-spinner.spin-s1.in>div { display: block; }
.glo-spinner.spin-s1 i.fa { position: relative; top: 4px; left: -5px; text-shadow: 0px 0px 5px #000; color: #00ffa8; font-size: 25px; }
.glo-spinner.spin-s1 span.itxt { color: #fff; font-weight: 600; font-size: 13px; }


/* ===================================================== */
/*                      Badge style                      */
/* ===================================================== */
.badge { font-size: 12px; line-height: inherit; padding: 0px 4px; }
.badge1 { background: #a44dc7; color: #fff; text-shadow: 1px 1px 2px #000; font-weight: 700; }
.badge2 { background: #518e45; color: #fcff41; }
.badge3 { background: #d0bebe; color: #fff5f5; }
.badge4 { background: #c5c5c5; color: #584747; }
.badge5 { background: #dde7f3; color: #111; box-shadow: 0px 0px 2px #4197ff; }
.badge-proto { background: #31317f; color: #ffe400; font-weight: 500; }
.badge-sports { background: #c57017; color: #fff; font-weight: 500; }
.badge-cert { background: #FFEB33; color: #000; font-size: 11px; width: 60px; border: 2px solid rgb(0 0 0 / 5%);
  /* transform: rotate(40deg); -webkit-transform: rotate(40deg); -moz-transform: rotate(40deg); -ms-transform: rotate(40deg); position:absolute; */ }

.p-label { padding: 0 2px; }
.p-label.pick-f { background: #c5c5c5; color: #584747; }
.p-label.pick-p { background: #5cb85c; color: #fffdc5; }


/* ===================================================== */
/*                      타이틀 style                     */
/* ===================================================== */
.tit-s1 { width: 200px; height: 0; margin: 0; padding-left: 8px; border-right: 30px solid transparent; border-bottom: 30px solid #a29cad; line-height: 30px;
  text-align: left; font-weight: 600; color: #fff; text-shadow: 0px 0px 2px #000; position: relative; }
.tit-s1+.tit-s1-uline { border-top: 2px solid #8a7ea0; padding-top: 4px; }
.tit-s2 { height: 0; margin: 0; padding-left: 8px; border-right: 35px solid transparent; border-bottom: 32px solid #666; line-height: 32px; text-align: left;
  color: #fff; text-shadow: 1px 1px 1px #000; }
.tit-s2 small { color: #e1e1e1; margin-left: 6px; }
.tit-s2 a.hd-collapse { display: block; position: relative; }
.tit-s2 a.hd-collapse:hover, .tit-s2 a.hd-collapse:focus { color: inherit !important; }
.tit-s2 span.glyphicon-menu-up { right: -1px; top: 1px; }
.tit-s2+.collapse-wrap { border-top: 1px solid #666; padding-top: 5px; }
.tit-s3 { background: #e1e4e7; color: #5f5f5f; font-weight: 600; padding: 6px 8px 6px; }
.tit-s4 { background: #555555; color: #ffffff; font-weight: 600; padding: 6px 8px 6px; text-shadow: 1px 1px 0px #000; }
.tit-s5 { background: #7b5980; color: #88fdd0; font-weight: 600; padding: 6px 8px 6px; text-shadow: 1px 1px 0px #000; }
.tit-s6 { border-bottom: 3px solid rgba(0, 0, 0, 0.25); font-weight: 600; margin-bottom: 5px; }
.tit-s7 { border-bottom: 1px solid #b7b7b7; color: #000; font-weight: 600; margin-bottom: 5px; }
.tit-s8 { position: relative; padding-left: 14px; margin-bottom: 5px; color: #333; font-weight: 700; text-align: left; }
.tit-s8:before { content: ''; width: 9px; height: 84%; background-color: #555; position: absolute; left: 0; top: 0px; bottom: 0; margin: auto; border-radius: 2px; }
.tit-s8.thin { font-size: 15px; padding-left: 12px; }
.tit-s8.thin:before { width: 8px; height: 82%; top: 2px; }
.tit-s8.mini { color: #5e6c88; font-size: 14px; }
.tit-s8.mini:before { top: 0px; background-color: #646a77; }


/* =============================================== */
/*                  List style                     */
/* =============================================== */
/* 리스트 style - dot(.) */
ul.list-st1>li { position: relative; padding-left: 10px; text-align: left; margin: 2px 0; }
ul.list-st1>li:before { content: ''; position: absolute; left: 1px; margin-top: 11px; width: 3px; height: 3px; background: #333; display: block; }
ul.list-st1>li>a { color: #333; display: block; }
ul.list-st1>li>a:hover { text-decoration: underline; }

/* 리스트 style - ※ */
ul.list-st2>li { position: relative; padding-left: 15px; margin: 2px 0; text-align: left; }
ul.list-st2>li:before { content: '※'; position: absolute; left: 0px; display: block; color: #717171; }

/* 리스트 style - dash(-) */
ul.list-st3>li { position: relative; padding-left: 10px; }
ul.list-st3>li:before { content: ''; position: absolute; left: 0px; margin-top: 11px; width: 6px; height: 1px; background: #333; display: block; }
ul.list-st3>li.list-num:before { display: none; }

/* 리스트 style - 안내문 */
.infom-txt { font-size: 11px; text-align: left; margin-top: 5px; }
.infom-txt>span.emp-1 { color: #46b8da; font-weight: 600; text-decoration: underline; }
div.inf-txt-0 { padding: 2px 0 5px; margin: 2px 0px 0px; }
div.inf-txt-0>p { text-align: left; color: #7b7b7b; font-size: 11px; padding-left: 14px; position: relative; }
div.inf-txt-0>p:before { content: '※'; position: absolute; left: 0; top: 0px; }
div.inf-txt-1 { padding: 5px 0; margin: 10px 0px 0px; border-top: 1px dotted #dcdcdc; }
div.inf-txt-1>p { text-align: left; color: #7b7b7b; font-size: 12px; padding-left: 14px; position: relative; }
div.inf-txt-1>p:before { content: '※'; position: absolute; left: 0; top: 0px; }


/* ========================================================= */
/*                       탭메뉴 style                        */
/* ========================================================= */
.tab-content { padding: 5px 0; }

/* 탭메뉴 - 1 (hover : 보라줄) */
.tab-s1.tab-btns { border-bottom: 1px solid #cfd8dc; }
.tab-s1.tab-btns>ul>li { float: left; margin-bottom: -1px; text-align: center; }
.tab-s1.tab-btns>ul>li>button { position: relative; display: block; border-top: 1px solid #cfd8dc; border-right: none; border-bottom: 1px solid #cfd8dc;
  border-left: 1px solid #cfd8dc; border-radius: 0 !important; background-color: #F1F3F5; color: #4b90b3; padding: 7px 2px; box-sizing: border-box;
  margin: 0; font-size: 15px; font-weight: 500; width: 100%; }
.tab-s1.tab-btns>ul>li:last-child>button { border-right: 1px solid #cfd8dc; }
.tab-s1.tab-btns>ul>li>button:after { content: ''; height: 0px; display: block; position: absolute; top: -1px; left: -1px; right: -1px; background-color: transparent;
  z-index: 1; transition: all ease 0.30s; -webkit-transition: all ease 0.30s; -moz-transition: all ease 0.30s; -ms-transition: all ease 0.30s; -o-transition: all ease 0.30s; }
.tab-s1.tab-btns>ul>li>button.active { background-color: #fff; border-bottom: 1px solid #fff; margin-bottom: -1px; color: #263238; font-weight: 600; }
.tab-s1.tab-btns>ul>li>button.active:after { background-color: #9F4BC1; height: 3px; }

/* 탭메뉴 - 2 (hover : Z폰트색 or 연한적색) */
.tab-s2.tab-btns { border-bottom: 1px solid #e2e2e2; }
.tab-s2.tab-btns>ul>li { float: left; margin-bottom: -1px; }
.tab-s2.tab-btns>ul>li>button { position: relative; display: block; border-top: 1px solid #e2e2e2; border-right: none; border-bottom: 1px solid #e2e2e2;
  border-left: 1px solid #e2e2e2; border-radius: 0 !important; background-color: #fff9f4; color: #b3968c; padding: 7px 3px; margin: 0; font-size: 13px;
  letter-spacing: -0.5px; width: 100%; }
.tab-s2.tab-btns>ul>li:last-child button { border-right: 1px solid #e2e2e2; }
.tab-s2.tab-btns>ul>li button:after { content: ''; height: 0px; display: block; position: absolute; top: -1px; left: -1px; right: -1px; background-color: transparent;
  z-index: 1; transition: all ease 0.30s; -webkit-transition: all ease 0.30s; -moz-transition: all ease 0.30s; -ms-transition: all ease 0.30s; -o-transition: all ease 0.30s; }
.tab-s2.tab-btns>ul>li button.active { background-color: #fff; border-bottom: 1px solid #fff; color: #4a1421; font-weight: 600; }
.tab-s2.tab-btns>ul>li button.active:after { background-color: #f96e8e; height: 3px; }


/* ===================================================================== */
/*                            Table Style Set                            */
/* ===================================================================== */
/* color - sandy */
table.table.sandy>tbody>tr>th,
table.table.sandy>tbody>tr>td { border: 2px solid #fff; padding: 4px 6px; }
table.table.sandy>tbody>tr>th { background: #e1e0d8; }
table.table.sandy>tbody>tr>td { background: #fbfaf1; }

/* color - sky */
table.table.sky>tbody>tr>th,
table.table.sky>tbody>tr>td { border: 2px solid #fff; padding: 4px 6px; }
table.table.sky>tbody>tr>th { background: #d1ecec; }
table.table.sky>tbody>tr>td { background: #e7f5f5; }

/* 테이블 스타일 - h-scroll table */
.hscroll-wrap { border-top: 1px solid #868686; }
.hscroll-wrap>div { float: left; }
.hscroll-wrap table.table { border-top: none; }
.hscroll-wrap .head-fix { width: 140px; }
.hscroll-wrap .body-flow table.table thead>tr { background: none; }
.hscroll-wrap .head-fix table.table tr td:last-child { border-right: 1px solid #efefef; }
.hscroll-wrap .body-flow { width: calc(100% - 140px); overflow-x: auto; box-shadow: inset -1px 1px 5px #c3c3c3; }
.hscroll-wrap .body-flow table.table tr th { padding:5px 6px; font-weight:600; word-break:keep-all; border-right:1px solid #dedede; background:rgb(206 206 206 / 35%);}
.hscroll-wrap .body-flow table.table tr td { padding:5px 6px; word-break: keep-all; border-right: 1px solid #efefef; }


/* ===================================================== */
/*                  Chart/Graph style                    */
/* ===================================================== */
.grid-bg { margin: 0; padding: 0; height: 100px; }
.grid-bg>.grid-line {
  background-color: transparent;
  background-image:
    linear-gradient(0deg, transparent 9%,
      rgba(110, 110, 110, .2) 10%, rgba(110, 110, 110, .2) 12%, transparent 13%, transparent 29%,
      rgba(216, 174, 174, .1) 30%, rgba(216, 174, 174, .1) 31%, transparent 32%, transparent 49%,
      rgba(216, 174, 174, .1) 50%, rgba(216, 174, 174, .1) 51%, transparent 52%, transparent 69%,
      rgba(216, 174, 174, .1) 70%, rgba(216, 174, 174, .1) 71%, transparent 72%, transparent 89%,
      rgba(216, 174, 174, .1) 90%, rgba(216, 174, 174, .1) 91%, transparent 92%, transparent),
    linear-gradient(90deg, transparent 9%,
      rgba(110, 110, 110, .2) 10%, rgba(110, 110, 110, .2) 12%, transparent 13%, transparent 29%,
      rgba(216, 174, 174, .1) 30%, rgba(216, 174, 174, .1) 31%, transparent 32%, transparent 49%,
      rgba(216, 174, 174, .1) 50%, rgba(216, 174, 174, .1) 51%, transparent 52%, transparent 69%,
      rgba(216, 174, 174, .1) 70%, rgba(216, 174, 174, .1) 71%, transparent 72%, transparent 89%,
      rgba(216, 174, 174, .1) 90%, rgba(216, 174, 174, .1) 91%, transparent 92%, transparent);
  background-size: 50px 50px; height: 100%; text-align: left; }
.grid-bg>.grid-line>.graph { height: 100%; }

/* bar chart */
.bar-h-chart { height: 12px; background: #f3f3f3; box-shadow: inset 0px 0px 1px rgba(0, 0, 0, 0.5); position: relative; margin: 5px 0px; }
.bar-h-chart>.bar { position: absolute; top: 0; height: 100%; text-align: right; background-color: #61708d; }
.bar-h-chart>.bar.left { left: 0; }
.bar-h-chart>.bar.right { right: 0; }
.bar-h-chart>.bar.color-blue { background: #9d9ded; }
.bar-h-chart>.bar.color-red { background: #f97373; }
.bar-h-chart>.bar.left.color-dark-gray { background: #868686; background: -webkit-linear-gradient(to left, #868686, #afafaf);
  background: linear-gradient(to left, #868686, #afafaf); }
.bar-h-chart>.bar.right.color-dark-gray { background: #868686; background: -webkit-linear-gradient(to right, #868686, #afafaf);
  background: linear-gradient(to right, #868686, #afafaf); }
.bar-h-chart>.bar.left.color-dark-red { background: #2193b0; background: -webkit-linear-gradient(to left, #2193b0, #6dd5ed);
  background: linear-gradient(to left, #2193b0, #6dd5ed); }
.bar-h-chart>.bar.right.color-dark-red { background: #2193b0; background: -webkit-linear-gradient(to right, #2193b0, #6dd5ed);
  background: linear-gradient(to right, #2193b0, #6dd5ed); }
.bar-h-chart .bar span.text-pe { position: absolute; font-size: 9px; margin-left: 4px; }
.bar-v-chart { display: inline-block; margin: 0; width: 25px; height: 89px; background: #f3f3f3; box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.2); position: relative;
  opacity: 0.8; }
.bar-v-chart .bar { position: absolute; bottom: 0; left: 0; width: 100%; border-radius: 0; text-align: right; box-shadow: inset 0 0 1px rgba(0, 0, 0, .2); }
.bar-v-chart .bar.color-blue { background: #9d9ded; }
.bar-v-chart .bar.color-red { background: #f97373; }
.bar-v-chart .bar.color-purple { background: #61708d; }
.bar-v-chart .bar.color-gray { background: #666; }
.bar-v-chart .bar span.text-pe { position: absolute; font-size: 8px; top: -13px; left: 2px; }

/* buy-ratio bar graph */
.m-bar-graph { width: 100%; margin: 0 auto; background: #eaeaea; }
.m-bar-graph>span { float: left; height: 20px; position: relative; }
.m-bar-graph>span.g-01 { background: #8b9ee1; }
.m-bar-graph>span.g-02 { background: #e0d9d1; }
.m-bar-graph>span.g-03 { background: #e38481; }
.m-bar-graph>span>em { font-size: 14px; color: #fff; font-weight: 700; position: absolute; top: 0px; margin: auto; z-index: 1;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.80); }
.m-bar-graph>span>em>small { transform: scale(0.80); display: inline-block; font-weight: 200; color: rgb(255 255 255 / 92%); }

/* thin vertical bar graph */
ul.bar-v-graph { display: table; table-layout: fixed; width: 100%; margin-top: 10px; padding-bottom: 15px; }
ul.bar-v-graph>li { display: table-cell; position: relative; text-align: center; }
ul.bar-v-graph>li .bar-ho { display: inline-block; position: relative; width: 18px; height: 80px; background: #eaeaea; box-shadow: inset 0px 2px 4px #b1b1b1; }
ul.bar-v-graph>li .bh-fill { position: absolute; bottom: 0; left: 0; right: 0; height: 0; min-height: 1px; background-color: #a963eb;
  border-top-left-radius: 2px; border-top-right-radius: 2px; box-shadow: 0px -1px 1px #61417f; }
ul.bar-v-graph>li .bh-label { position: absolute; bottom: -15px; left: 0; right: 0; margin: auto; font-size: 12px; }

/* circle bar graph */
.circle-graph { width: 100%; height: 100%; justify-content: space-around; align-items: center; }
.circle-graph.pc-s1 { width: 200px; position: relative; }
.circle-graph.pc-s1 .percent-circle { width: 200px; height: 200px; overflow: hidden; position: relative; border-radius: 50%; }
.circle-graph.pc-s1 .percent-circle svg:before { content: #d2e0e0; display: block; }
.circle-graph.pc-s1 .percent-circle svg { width: 200px; height: 200px; transform: rotate(-90deg); }
.circle-graph.pc-s1 .percent-circle svg .percent-circle-inner { fill: #d2e0e0; stroke: #9857d5; stroke-width: 80px; stroke-dasharray: 0 628.318px;
  transition: stroke-dasharray 0.6s ease-out; }
.circle-graph.pc-s1 .percent-circle:after { content: ''; display: block; width: 120px; height: 120px; background: #fff; position: absolute; top: 40px; left: 40px;
  color: #01b2aa; text-align: center; line-height: 60px; font-size: 20px; border-radius: 50%; }
.circle-graph.pc-s1 .t-label { position: absolute; top: 65px; left: 0; right: 0; margin: auto; }
.circle-graph.pc-s1 .t-label .inf-lt:before { font-size: 15px; font-weight: 600; }
.circle-graph.pc-s1 .t-label .inf-lt:after { content: '리그'; font-size: 15px; font-weight: 600; padding-left: 2px; }
.circle-graph.pc-s1 .t-label .l-point { font-weight: 800; font-size: 16px; }
.circle-graph.pc-s1s { width: 170px; position: relative; }
.circle-graph.pc-s1s .percent-circle { width: 170px; height: 170px; overflow: hidden; position: relative; border-radius: 50%; }
.circle-graph.pc-s1s .percent-circle svg:before { content: #d2e0e0; display: block; }
.circle-graph.pc-s1s .percent-circle svg { width: 170px; height: 170px; transform: rotate(-90deg); }
.circle-graph.pc-s1s .percent-circle svg .percent-circle-inner { fill: #d2e0e0; stroke: #9857d5; stroke-width: 80px; stroke-dasharray: 0 628.318px;
  transition: stroke-dasharray 0.6s ease-out; }
.circle-graph.pc-s1s .percent-circle:after { content: ''; display: block; width: 110px; height: 110px; background: #fff; position: absolute; top: 30px; left: 30px;
  color: #01b2aa; text-align: center; line-height: 60px; font-size: 20px; border-radius: 50%; }
.circle-graph.pc-s1s .t-label { position: absolute; top: 52px; left: 0; right: 0; margin: auto; }
.circle-graph.pc-s1s .t-label .inf-lt:before { font-size: 15px; font-weight: 600; }
.circle-graph.pc-s1s .t-label .inf-lt:after { content: '리그'; font-size: 15px; font-weight: 600; padding-left: 2px; }
.circle-graph.pc-s1s .t-label .l-point { font-weight: 800; font-size: 16px; }
.circle-graph.pc-s2 { width: 300px; height: 300px; border-radius: 50%; overflow: hidden; position: relative; }
.circle-graph.pc-s2 svg:before { content: #efefef; display: block; }
.circle-graph.pc-s2 svg { width: 300px; height: 300px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); }
.circle-graph.pc-s2 svg .percent-circle-inner { fill: #efefef; stroke: #f90; stroke-width: 120px; stroke-dasharray: 0 0px; transition: stroke-dasharray 0.6s ease-out; }
.circle-graph.pc-s2:after { content: attr(data-percent) '%'; display: block; width: 180px; height: 180px; background: #fff; position: absolute; top: 60px; left: 60px;
  color: #f90; text-align: center; line-height: 180px; font-size: 60px; border-radius: 50%; }


/* =================================================== */
/*                ETC. preset-style                    */
/* =================================================== */
/* 페이지 히스토리 (breadcrumb)*/
.contents-header ul.breadcrumb { margin: 8px 0 -8px; padding: 0; background: none; }
.contents-header ul.breadcrumb>li { display: inline-block; font-size: 12px; }
.contents-header ul.breadcrumb>li:after { content: '>'; color: #e2e2e2; padding-left: 5px; }
.contents-header ul.breadcrumb>li:last-child:after { display: none; }
.contents-header ul.breadcrumb>li+li:before { display: none; }
.contents-header ul.breadcrumb>li span { color: #e4e4e4; text-shadow: 1px 1px 2px #000; }

/* dev-Profiler */
.fs-frame { display: none; }
.fs-frame #execute_frame { width: 0; height: 0; }
.profiler { margin: 20px auto; padding: 15px; word-break: break-all; word-wrap: break-word; }
.profiler>.ibox { background: #fff; padding: 10px; border-radius: 2.5px; }
.profiler table { border: 2px solid #444; width: 100%; margin-bottom: 20px; }
.profiler table>thead>tr>th { padding: 3px; color: #fff; text-align: center; background: #444; }
.profiler table>tbody>tr { border-bottom: 1px solid #e4e4e4; }
.profiler table>tbody>tr>th { padding: 3px; }
.profiler table>tbody>tr>td { padding: 3px; font-size: 12px; }
.profiler table>tbody>tr:nth-child(odd) { background: #fff; }
.profiler table>tbody>tr:nth-child(even) { background: #f9f9f9; }
.profiler h4 { margin-bottom: 0; }

/* sweet alert */
.sweet-alert h2 { font-size: 20px; color: #806229 }
.sweet-content { padding: 10px; font-size: 13px; }
.sweet-alert hr { height: 1px; margin: 25px 0; }
.sweet-alert { border-radius: 0; border: 5px solid #d06034; }

/* paginate style */
ul.paginate { width: auto; display: inline-block; margin: 0 auto; padding: 0; border: 1px solid #e6e6e6; text-align: center; }
ul.paginate li { margin: 0; padding: 0; float: left; border-right: 1px solid #e6e6e6; background-color: #fff; }
ul.paginate li.prev a, ul.paginate li.next a { padding: 4px 4px; }
ul.paginate li.prev a:before { content: '\00ab  '; }
ul.paginate li.next a:after { content: ' \00bb'; }
ul.paginate li a.a-disable { pointer-events: none; color: rgba(46, 64, 87, .4); }
ul.paginate li:last-child { border-right: none; }
ul.paginate li a { float: left; margin: 0; padding: 4px 9px; border: none; font-size: 12px; color: #5A5A5A; }
ul.paginate li a.current { background-color: #818af3; color: #fff; font-weight: 600; text-shadow: 1px 1px 1px #aaa; }
ul.paginate li a:not(.current):hover { background-color: #f0f0f0; }
ul.paginate li>span { padding: 3px 5px 2px; display: inline-block; }

/* 메뉴 스타일 (vertical-1) */
ul.nav-vt-s1>li { border-bottom: 1px solid #efefef; }
ul.nav-vt-s1>li a { color: #333; padding: 8px 15px; }
ul.nav-vt-s1>li a:hover,
ul.nav-vt-s1>li a:focus { background-color: transparent; }
ul.nav-vt-s1>li:not(.active) a:hover { text-decoration: underline; color: #3878df; }
ul.nav-vt-s1>li.active { position:relative; background:-webkit-linear-gradient(to right, #24c6dc, #514a9d); background:linear-gradient(to right, #24c6dc, #514a9d); }
ul.nav-vt-s1>li.active a { color: #fff; }
ul.nav-vt-s1>li.active a:before { content: ''; width: 15px; height: 100%; display: block; position: absolute; top: 0; left: -15px; background: #24c6dc; }
ul.nav-vt-s1>li.active a:after { content: ''; width: 0px; height: 0px; display: block; position: absolute; bottom: -5px; left: -15px; 
  border-right: 5px solid transparent; border-bottom: 5px solid #1c8b9a; transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); 
  -moz-transform: rotate(180deg); -o-transform: rotate(180deg); }

/* collapse icon (up) */
span.glyphicon-menu-up { display: block; position: absolute; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; right: 15px; width: 20px; height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 20px;  text-align: center; }
span.glyphicon-menu-up:before { display: block; width: 18px; height: 18px; position: absolute; left: 0; right: 0; margin: auto; font-size: 11px; line-height: 18px;
  -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);
  -webkit-transition-property: transform; -moz-transition-property: transform; -o-transition-property: transform; transition-property: transform;
  -webkit-transition-duration: 200ms; transition-duration: 200ms; transition-timing-function: ease; }
.collapsed span.glyphicon-menu-up:before { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg); transform: rotate(180deg); }


/* ================================================ */
/*                  ZENTOTO custom                  */
/* ================================================ */
i.ico-base { background: url('/images/icons/base.svg'); display: inline-block; position: absolute; margin: 1px 0 0 -18px; }
i.ico-base.soccer { width: 15px; height: 15px; background-position: 0px 0px; }
i.ico-base.baseball { width: 15px; height: 15px; background-position: -40px 0px; }
i.ico-base.basketball { width: 15px; height: 15px; background-position: -20px 0px; }
i.ico-base.volleyball { width: 16px; height: 16px; background-position: -60px 0px; }
.slt-odds { border: 1px solid #e3d9e7; padding: 3px 0; position: relative; background: #fff; font-size: 15px; font-weight: 500; }
.slt-odds.marked { border: 1px solid #daddaf; background: #fbfcec; font-weight: 800; }
.slt-odds.marking { border: 1px solid #ff9875; background: #ffb9a2; font-weight: 600; }
.user-rk>span { border: 1px solid rgba(0, 0, 0, 0.25); background: #fafbed; display: block; color: #a5a5a5; }
.user-rk>span.rk-1st { color: #38acd8; background: #eaf9ff; font-weight: 600; }
.user-rk>span.rk-2nd { color: #37a714; font-weight: 600; }
.user-rk>span.rk-3rd { color: #ec8d2b; }
.user-rk>span.rk-4th { color: #735f5f; }
.user-rk>span.rk-wait { color: #252525; background: #efeee5; }
.user-rk>span.rk-ongo { color: #214c12; background: #c2e6b6; }
.user-rk>span.rk-los { color: #c7a5a5; }
.ps-pol:after { content: 'p'; font-size: 12px; font-weight: 700; color: #a7a7a7; padding-left: 1px; }
.ps-drt:after { content: 'x'; font-size: 12px; font-weight: 700; color: #a7a7a7; padding-left: 1px; }
.z-point:after { content: "zp"; font-size: 12px; font-weight: 700; color: #a44dc7; padding-left: 2px; }
.z-cash:after { content: "zc"; font-size: 12px; font-weight: 700; color: #71b1ff; padding-left: 2px; letter-spacing: 0.7px; }
.z-level:after { content: "Lv"; font-size: 12px; font-weight: 700; color: #9e9e9e; padding-left: 2px; }
.z-volume:after { content: "EA"; font-size: 12px; font-weight: 400; color: #989898; padding-left: 2px; }
.l-point:after { content: "LP"; font-size: 11px; font-weight: 700; color: #748c84; padding-left: 2px; }
.a-percent:after { content: '%'; position: absolute; margin: 1.5px 0px 0px 1px; font-size: 10px; color: #a0a0a0; }

/* input + zp txt */
.zp-wrap { position: relative; display: inline-block; }
.zp-wrap>input.bet-price { padding: 3px 22px 3px 8px; }
.zp-wrap>input.currency { padding: 3px 24px 3px 8px; }
.zp-wrap>span.z-point, .zp-wrap>span.z-cash { position: absolute; top: 5px; right: 8px; }
.zp-wrap>span.z-cnt { position: absolute; top: 6.5px; right: 8px; }

/* 프리미엄패스 뱃지 */
div.z-pass { width: 105px; border: 1px solid #aeaeae; border-right: none; font-size: 11px; transition: all ease 0.15s; -webkit-transition: all ease 0.15s;
  -moz-transition: all ease 0.15s; -ms-transition: all ease 0.15s; -o-transition: all ease 0.15s; }
div.z-pass:hover { border-color: #f9f9f9; }
div.z-pass>a { display: block; padding: 0px 5px; }
div.z-pass>a>span>em:before { position: absolute; top: -1px; padding: 1px 3px; display: inline-block; font-style: normal; font-weight: 700; text-shadow: 1px 1px 1px #333; 
  transition: all ease 0.15s; -webkit-transition: all ease 0.15s; -moz-transition: all ease 0.15s; -ms-transition: all ease 0.15s; -o-transition: all ease 0.15s; }
div.z-pass.zon>a>span>em:before { content: 'ON'; background-color: #20C804; right: -3px; }
div.z-pass.zoff>a>span>em:before { content: 'OFF'; background-color: #e85383; right: -6px; }
div.z-pass.zon:hover>a>span>em:before { box-shadow: 0px 0px 5px 0px #20C804; }
div.z-pass.zoff:hover>a>span>em:before { box-shadow: 0px 0px 5px 0px #e85383; }

/* yel & red - card icon */
.y-card, .r-card, .yr-card { position: relative; }
.y-card:before { background: linear-gradient(to top, #fdd200, #f0db00); }
.r-card:before { background: linear-gradient(to top, #d92a2f, #ff0006); }
.yr-card:before { background: linear-gradient(to top, #fdd200, #f0db00); }
.yr-card:after { width: 6px; height: 14px; background: linear-gradient(to top, #d92a2f, #ff0006); }
.y-card:before, .r-card:before, .yr-card:before { width: 10px; height: 14px; border: 1px solid rgb(0 0 0 / 13%); }
.y-card:before, .r-card:before, .yr-card:before, .yr-card:after { content: ''; position: absolute; }

/* 픽스터 리그 등급 뱃지 */
.icon-tier { position: relative; display: inline-block; width: 20px; height: 20px; }
.icon-tier.grade-0, .icon-tier.tier-iron { border-radius: 8px; }
.icon-tier.grade-1, .icon-tier.grade-2, .icon-tier.grade-3, .icon-tier.tier-bronze, .icon-tier.tier-silver, .icon-tier.tier-gold { 
  box-shadow: 1px 1px 3px rgba(123, 125, 87, 0.35); border-radius: 6px; }
.icon-tier.grade-4, .icon-tier.grade-5, .icon-tier.grade-6, .icon-tier.tier-platinum, .icon-tier.tier-diamond, .icon-tier.tier-master {
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.20);  border-radius: 1px; }
.icon-tier:before { text-align: center; }
.icon-tier:after { width: 14px; height: 14px; position: absolute; top: 3px; left: 3px; font-weight: 800; font-family: 'Open Sans'; font-size: 13px;
  text-align: center; line-height: 14px; }
.icon-tier.grade-1:after, .icon-tier.grade-2:after, .icon-tier.grade-3:after, .icon-tier.tier-bronze:after, .icon-tier.tier-silver:after, .icon-tier.tier-gold:after {
  background: rgba(255, 255, 255, 0.30); border-radius: 3px; }
.icon-tier.grade-4:after, .icon-tier.grade-5:after, .icon-tier.grade-6:after, .icon-tier.tier-platinum:after, .icon-tier.tier-diamond:after, .icon-tier.tier-master:after {
  background: rgba(255, 255, 255, 0.60);  border-radius: 1.5px; }
.inf-lt.grade-0:before, .inf-lt.tier-iron:before { content: 'Iron'; }
.inf-lt.grade-1:before, .inf-lt.tier-bronze:before { content: 'Bronze'; }
.inf-lt.grade-2:before, .inf-lt.tier-silver:before { content: 'Silver'; }
.inf-lt.grade-3:before, .inf-lt.tier-gold:before { content: 'Gold'; }
.inf-lt.grade-4:before, .inf-lt.tier-platinum:before { content: 'Platinum'; }
.inf-lt.grade-5:before, .inf-lt.tier-diamond:before { content: 'Diamond'; }
.inf-lt.grade-6:before, .inf-lt.tier-master:before { content: 'Master'; }
.inf-lt.grade-z:before, .inf-lt.tier-zen:before { content: 'Tier-Z'; }
.inf-lt.grade-0.t-kor:before, .inf-lt.tier-iron.t-kor:before { content: '아이언'; }
.inf-lt.grade-1.t-kor:before, .inf-lt.tier-bronze.t-kor:before { content: '브론즈'; }
.inf-lt.grade-2.t-kor:before, .inf-lt.tier-silver.t-kor:before { content: '실버'; }
.inf-lt.grade-3.t-kor:before, .inf-lt.tier-gold.t-kor:before { content: '골드'; }
.inf-lt.grade-4.t-kor:before, .inf-lt.tier-platinum.t-kor:before { content: '플래티넘'; }
.inf-lt.grade-5.t-kor:before, .inf-lt.tier-diamond.t-kor:before { content: '다이아'; }
.inf-lt.grade-6.t-kor:before, .inf-lt.tier-master.t-kor:before { content: '마스터'; }
.inf-lt.grade-z.t-kor:before, .inf-lt.tier-zen.t-kor:before { content: 'Tier-Z'; }
.inf-lt.grade-0:before, .inf-lt.grade-0:after, .inf-lt.tier-iron:before, .inf-lt.tier-iron:after { color: #928583; }
.inf-lt.grade-1:before, .inf-lt.grade-1:after, .inf-lt.tier-bronze:before, .inf-lt.tier-bronze:after { color: #b78461; }
.inf-lt.grade-2:before, .inf-lt.grade-2:after, .inf-lt.tier-silver:before, .inf-lt.tier-silver:after { color: #9aafc9; }
.inf-lt.grade-3:before, .inf-lt.grade-3:after, .inf-lt.tier-gold:before, .inf-lt.tier-gold:after { color: #dab368; }
.inf-lt.grade-4:before, .inf-lt.grade-4:after, .inf-lt.tier-platinum:before, .inf-lt.tier-platinum:after { color: #8a88ea; }
.inf-lt.grade-5:before, .inf-lt.grade-5:after, .inf-lt.tier-diamond:before, .inf-lt.tier-diamond:after { color: #30b3d3; }
.inf-lt.grade-6:before, .inf-lt.grade-6:after, .inf-lt.tier-master:before, .inf-lt.tier-master:after { color: #ce4329; }
.inf-lt.grade-z:before, .inf-lt.grade-z:after, .inf-lt.tier-zen:before, .inf-lt.tier-zen:after { color: #a115d0; }
.icon-tier.grade-0, .icon-tier.tier-iron { background: linear-gradient(to bottom, #b5b0a8, #6b5957); }
.icon-tier.grade-0:after, .icon-tier.tier-iron:after { content: 'I'; color: #75614f; background: rgba(255, 255, 255, 0.15); }
.icon-tier.grade-1, .icon-tier.tier-bronze { background: linear-gradient(to bottom, #efbf9e, #866558); }
.icon-tier.grade-1:after, .icon-tier.tier-bronze:after { content: 'B'; color: #b78461; }
.icon-tier.grade-2, .icon-tier.tier-silver { background: linear-gradient(to bottom, #dde0e4, #95acc7); }
.icon-tier.grade-2:after, .icon-tier.tier-silver:after { content: 'S'; color: #99a7b3; }
.icon-tier.grade-3, .icon-tier.tier-gold { background: linear-gradient(to bottom, #f5ec90, #c27f13); }
.icon-tier.grade-3:after, .icon-tier.tier-gold:after { content: 'G';  color: #d09b18; }
.icon-tier.grade-4, .icon-tier.tier-platinum { background: linear-gradient(to bottom, #f3d0ed, #67c5a3); }
.icon-tier.grade-4:after, .icon-tier.tier-platinum:after { content: 'P'; color: #c99fda; }
/* .icon-tier.grade-4 { background: linear-gradient(to bottom, #ccf0fa, #67aaca); } */
/* .icon-tier.grade-4:after { content:'P'; color: #80b7ca; } */
.icon-tier.grade-5, .icon-tier.tier-diamond { background: linear-gradient(to bottom, #a3e8f7, #20acce); }
.icon-tier.grade-5:after, .icon-tier.tier-diamond:after { content: 'D'; color: #4bc1ce; }
.icon-tier.grade-6, .icon-tier.tier-master { background: linear-gradient(to bottom, #eccfc4, #c73c22); }
.icon-tier.grade-6:before, .icon-tier.tier-master:before { content:'★'; position:absolute; top:-8px; right:0; left:0; margin:auto;font-size:10px; color:#d65d5d; z-index:1;}
.icon-tier.grade-6:after, .icon-tier.tier-master:after { content: 'M'; color: #cc826b; }
.icon-tier.grade-z { background: linear-gradient(to bottom, #e5b9f3, #a614d6); box-shadow: 0px 0px 2px #10e099; }
.icon-tier.grade-z:before { content: '★'; position: absolute; top: -8px; right: 0; left: 0; margin: auto; font-size: 10px; color: #a717d6; z-index: 1; }
.icon-tier.grade-z:after { content: 'Z'; color: #00ffa8; background: rgba(255, 255, 255, 0.25); text-shadow: 1px 1px 0px #3b3b3b; font-size: 13.5px; }

/* 픽스터리그 */
.ps-result { width: 40px; padding: 0 1px; display: inline-block; color: #fff; font-size: 12px; text-align: center; border-radius: 2px; }
.ps-result.rst-win { background: #518e45; color: #fcff41; }
.ps-result.rst-los { background: #d0bebe; color: #fff1f1; }
.ps-result.rst-wait { background: #8aa9b7; color: #f1f8ff; }
.ps-result.rst-win:after { content: '적중'; font-weight: 500; }
.ps-result.rst-los:after { content: '미적중'; }
.ps-result.rst-wait:after { content: '대기중'; }

/* 픽스터리그 리스트 */
.pl-wrap>.p-items { padding: 0px 4px 1px; margin-bottom: 5px; background: #f5f2eb; border: 1.5px solid rgb(0 0 0 / 20%); }
.pl-wrap>.p-items>div { position: relative; }
.pl-wrap>.p-items>.ps-tit { padding: 3px 0 0; }
.pl-wrap>.p-items>.ps-tit>.chk-note { position: absolute; top: 4px; right: 0px; font-size: 22px; }
.pl-wrap>.p-items>.ps-cnt, .pl-wrap>.p-items>.ps-sts { border-top: 1.5px solid #e8e0cb; }
.pl-wrap>.p-items>.ps-cnt .a-pimg { position: absolute; top: 10px; left: 0px; }
.pl-wrap>.p-items>.ps-cnt .a-name { display: inline-block; max-width: 95%; vertical-align: top; margin-top: 4px; font-size: 13px; }
.pl-wrap>.p-items>.ps-cnt .tier-wrap { position: relative; }
.pl-wrap>.p-items>.ps-cnt .tier-wrap .icon-tier { transform: scale(0.85); }
.pl-wrap>.p-items>.ps-cnt .tier-wrap .l-point { position: absolute; top: 1px; left: 22px; padding: 0 2px; background: rgb(170 170 170 / 25%); }
.pl-wrap>.p-items>.ps-cnt .a-roi { font-size: 14px; position: relative; top: -1px; }
.pl-wrap>.p-items>.ps-cnt p.rr-tit { font-size: 12px; border-bottom: 1px solid #e8e0cb; color: #505050; margin: 4px 0 1px; }
.pl-wrap>.p-items>.ps-cnt .rr-list { position: relative; top: 3px; }
.pl-wrap>.p-items>.ps-cnt .rr-list>li { width: 20%; text-align: center; }
.pl-wrap>.p-items>.ps-cnt .rr-list span.rr-win { color: #20C804; }
.pl-wrap>.p-items>.ps-cnt .rr-list span.rr-lose { color: #cf1919; }
.pl-wrap>.p-items>.ps-cnt .rr-list span.rr-none { color: #b5b5b5; }
.pl-wrap>.p-items>.ps-sts { font-size: 13px; padding: 2px 0; }

/* etc */
div.ibox { padding: 20px; box-shadow: 0 0 13px 0 rgba(82, 63, 105, .05); background-color: #fff; border-radius: 3px; }
#main { width: 100%; height: 100%; display: flex; padding: 20px; align-items: center; }
#main p { padding: 50px; font-size: 20px; font-weight: 600; }
.fs-frame { display: none; }
.fs-frame #execute_frame { width: 0; height: 0; }

























/* ================================================================================================================= */
/* ================================================================================================================= */
/*                                                                                                                   */
/*                                        각 페이지 퍼블리싱 (비공통 비공용)                                         */
/*                                                                                                                   */
/* ================================================================================================================= */
/* ================================================================================================================= */

/* design page common */
.design>section { border: 1px solid #7b5980; padding: 0 0 15px; margin-bottom: 20px; }
.design>section>div { padding: 0 6px; }



/* 아날라이저 - 픽스터분석탭 */
.pickster-alink {
  padding: 0px 4px 1px;
  margin-bottom: 5px;
  background: #f5f2eb;
  border: 1.5px solid rgb(0 0 0 / 20%);
  font-size: 14px;
}

.pickster-alink>.tit {
  vertical-align: top;
  display: inline-block;
  width: calc(100% - 45px);
  padding: 5px 0;
}

.pickster-alink>.tit .p-label {
  font-size: 13px;
  padding: 1px 2px;
}

.pickster-alink>.tit .p-label.pick-f {
  background: #c5c5c5;
  color: #584747;
}

.pickster-alink>.tit .p-label.pick-p {
  background: #5cb85c;
  color: #fffdc5;
}

.pickster-alink>.tit .status {
  position: absolute;
  top: 4px;
  right: 4px;
  display: block;
  padding: 0 2px;
  font-size: 12px;
  border: 1px solid rgb(0 0 0 / 10%);
  font-weight: 400;
}

.pickster-alink>.tit .status.st-f {
  color: #b5322e;
  background: #f1dddc;
}

.pickster-alink>.tit .status.st-o {
  color: #449a44;
  background: #dff9df;
  font-weight: 500;
}

.pickster-alink>.auth {
  margin: 0px 1px 2px;
  border-top: 1px solid #e8e0cb;
}



/* ====================================================== */
/*                  game match list                       */
/* ====================================================== */
/* common */
.betype-hu>span { display: inline-block; vertical-align: top; font-size: 13.5px; font-weight: 400; padding: 0 2px; }
.betype-hu>span.t-n { color: #777; background-color: #fff; }
.betype-hu>span.t-u { color: #004cab; background-color: #e7f4fe; }
.betype-hu>span.t-h { color: #cb4300; background-color: #fef4e7; }

.recent-list>li { margin: 0 2px; }
.recent-list>li>span.game-his { width: 20px; border: 1px solid rgba(0, 0, 0, 0.05); padding: 0 1px; display: inline-block; color: #fff; font-size: 12px; }
.recent-list>li>span.game-his.wdl-W { background: #8b9ee1; }
.recent-list>li>span.game-his.wdl-D { background: #d5c9b9; }
.recent-list>li>span.game-his.wdl-L { background: #e38481; }
.recent-list.away>li { display: flex; flex-direction: column-reverse; }
.recent-list.away>li>span.caret { top: 7px; left: 1px; }

/* match-box */
.games-proto .game-lists>.games { margin-bottom: 15px; padding: 0; background: #fff; font-size: 13px; border-top: 3px solid #ac9eb5;
  border-top-right-radius: 3px; border-top-left-radius: 3px; }
.games-proto .game-lists>.games>.g-body { background: #f2eff3; padding: 2px 4px 0px; border-left: 1px solid #e3d9e7; border-right: 1px solid #e3d9e7; position: relative; }
.games-proto .game-lists>.games>.g-body .game-staus { background:#a9a9a9; font-size:14px; display:inline-block; width:60px; text-align:center; margin:auto; padding:1px 0px; }
.games-proto .game-lists>.games>.g-body .game-staus.ready { background: #bca8d0; color: #ffffff; }
.games-proto .game-lists>.games>.g-body .game-staus.live { background: #5cb85c; color: #ffffff; }
.games-proto .game-lists>.games>.g-body .game-staus.finish { background: #d9534f; color: #ffffff; }
.games-proto .game-lists>.games>.g-body .game-staus.cancel { background: #c19595; color: #ffe7e7; }
.games-proto .game-lists>.games>.g-body .game-staus.interrupted { background: #d48146; color: #ffffff; }
.games-proto .game-lists>.games>.g-body .game-staus.delayed { background: #769271; color: #ffffff; }
.games-proto .game-lists>.games>.g-body>.gb-label span.game-type { position: absolute; top: 2px; color: #555; font-size: 20px; }
.games-proto .game-lists>.games>.g-body>.gb-label .game-staus,
.games-proto .game-lists>.games>.g-body>.gb-label .end-time { position:absolute; top:3px; left:0; right:0; font-size:18px; font-weight:700; width:auto; background:none; z-index:1; }
.games-proto .game-lists>.games>.g-body>.gb-label .game-staus.ready { color: #906ca7; }
.games-proto .game-lists>.games>.g-body>.gb-label .game-staus.live { color: #267926; }
.games-proto .game-lists>.games>.g-body>.gb-label .game-staus.finish { color: #9d4341; }
.games-proto .game-lists>.games>.g-body>.gb-label .end-time { font-size: 12px; letter-spacing: -0.5px; top: 35px; color: #9d4341; width: fit-content; margin: auto; text-decoration: underline; }
.games-proto .game-lists>.games>.g-body>.gb-board>.inner { padding: 3px 0 26px; }
.games-proto .game-lists>.games>.g-body>.gb-board>.inner>div { float: left; }
.games-proto .game-lists>.games>.g-body>.gb-board>.inner>div:nth-child(1) { width: 34%; }
.games-proto .game-lists>.games>.g-body>.gb-board>.inner>div:nth-child(2) { width: 32%; margin-top: 42px; }
.games-proto .game-lists>.games>.g-body>.gb-board>.inner>div:nth-child(3) { width: 34%; }
.games-proto .game-lists>.games>.g-body>.gb-board>.inner p.team-name { width: calc(100% - 5px); font-size: 20px; font-weight: 700; letter-spacing: -0.5px; color: #4c2d2d;
  display: inline-block; vertical-align: middle; }
.games-proto .game-lists>.games>.g-body>.gb-board>.inner .score>div { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; margin-top: 0px; }
.games-proto .game-lists>.games[game-status="FINISH"]>.g-body>.gb-board>.inner .score>div { color: #9d4341; }
.games-proto .game-lists>.games[game-status="LIVE"]>.g-body>.gb-board>.inner .score>div { color: #267926; }
.games-proto .game-lists>.games>.g-body>.gb-board .recent-list { margin-bottom: 18px; padding:0; }
.games-proto .game-lists>.games>.g-body>.gb-board .recent-list:before { border-color: transparent transparent #777 transparent; }
.games-proto .game-lists>.games>.g-body>.gb-board .home>.recent-list:before { left:initial; right:-9px; }
.games-proto .game-lists>.games>.g-body>.gb-board .away>.recent-list:before { left:-9px; }
.games-proto .game-lists>.games>.g-body>.gb-board .recent-list>li>span.game-his { width: 18px; line-height: 16px; }
.games-proto .game-lists>.games>.g-body>.gb-board .recent-list>li>span.game-his.wdl-W { background: #e7f4fe; color: #004cab; }
.games-proto .game-lists>.games>.g-body>.gb-board .recent-list>li>span.game-his.wdl-D { background: #f1f1f1; color: #818181; }
.games-proto .game-lists>.games>.g-body>.gb-board .recent-list>li>span.game-his.wdl-L { background: #fef4e7; color: #cb4300; }
.games-proto .game-lists>.games>.g-body>.gb-board>.s-head { border: 12px solid; border-bottom-style: none; margin: 0 auto; padding: 0; height: 0; width: 100px;
  position: absolute; top: 0px; left: 0; right: 0; border-color: #f2eff3 transparent transparent transparent; }
.games-proto .game-lists>.games>.g-btm { padding: 6px 4px 4px; background: #f5f5f5; border-left: 1px solid #e3d9e7; border-right: 1px solid #e3d9e7;
  border-bottom: 1px solid #e3d9e7; }
.games-proto .game-lists>.games>.g-btm .dist-table>div { position: relative; }
.games-proto .game-lists>.games>.g-btm .dist-table>div:before { position: absolute; top: 9px; left: 8px; font-size: 12px; font-weight: 700; color: rgb(105 105 105 / 30%); z-index:1; }
.games-proto .game-lists>.games>.g-btm .dist-table>div:nth-child(1):before { content: '승'; }
.games-proto .game-lists>.games>.g-btm .dist-table>div:nth-child(2):before { content: '무'; }
.games-proto .game-lists>.games>.g-btm .dist-table>div:nth-child(3):before { content: '패'; }
.games-proto .game-lists>.games>.g-btm .odds-wrap[bet-type="U"] .dist-table>div:before { left: 9px; }
.games-proto .game-lists>.games>.g-btm .odds-wrap[bet-type="U"] .dist-table>div:nth-child(1):before { content: 'U'; }
.games-proto .game-lists>.games>.g-btm .odds-wrap[bet-type="U"] .dist-table>div:nth-child(2):before { content: ' '; }
.games-proto .game-lists>.games>.g-btm .odds-wrap[bet-type="U"] .dist-table>div:nth-child(3):before { content: 'O'; }
.games-proto .game-lists>.games>.g-btm .odds-wrap[bet-type="U"] .dist-table>div:nth-child(2)>.slt-odds { padding: 4px 0px; text-align: center; }
.games-proto .game-lists>.games>.g-btm .dist-table .slt-odds { padding: 4px 12px 4px 8px; width: 100%; height: 32px; text-align: right; }
.games-proto .game-lists>.games>.g-btm .dist-table .slt-odds.marker:after { content:''; position: absolute; width: 90%; height: 2px; bottom: 2px; left: 0; right: 0; margin: auto; }
.games-proto .game-lists>.games>.g-btm .dist-table .slt-odds.marker.marker-1:after { background: #9b4c2d; }
.games-proto .game-lists>.games>.g-btm .dist-table .slt-odds.marker.marker-2:after { background: #9900cc; }
.games-proto .game-lists>.games>.g-btm .dist-table .slt-odds.marker.marker-3:after { background: #009900; }
.games-proto .game-lists>.games>.g-btm .betype-hu { max-width: 105px; width: 92%; position: relative; padding: 0; border: 1px solid #878d93; background: #878d93; }
.games-proto .game-lists>.games>.g-btm .betype-hu>span { padding: 0; margin: 0; text-align: center; letter-spacing: -0.5px; line-height: 30px; float: left; }
.games-proto .game-lists>.games>.g-btm .betype-hu>.notice { position: absolute; top: -4px; left: -4px; color: #ffeded; background: #e21b4b; border: 1px solid #b30000;
  width: 14px; height: 14px; font-size: 11px; line-height: 12px; }

.games-sports .game-group { margin-bottom: 12px; }
.games-sports .game-group>.g-head { background: #001e29; }
.games-sports .game-group>.g-head img.national-flag { width: 25px; margin-top: 3px; }
.games-sports .game-group>.g-head span { position: relative; top: 3px; color:#fff; font-size: 13px; }

.games-sports .game-group.exam1>.g-list { box-shadow: 0px 0px 8px rgb(0 0 0 / 20%); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.games-sports .game-group.exam1>.g-list .match-box { padding: 10px 5px 6px; }
.games-sports .game-group.exam1>.g-list .match-box:nth-child(2n) { background-color: #f7f7fd; }
.games-sports .game-group.exam1>.g-list .match-box>li { vertical-align: top; }
.games-sports .game-group.exam1>.g-list .match-box>li:nth-child(1) { width: 13%; }
.games-sports .game-group.exam1>.g-list .match-box>li:nth-child(2) { width: 47%; padding-right: 15px; }
.games-sports .game-group.exam1>.g-list .match-box>li:nth-child(3) { width: 40%; padding-top: 18px; }
.games-sports .game-group.exam1>.g-list .match-box>.m-time>p { font-size: 12px; text-indent: -5px; }
.games-sports .game-group.exam1>.g-list .match-box>.m-time>p:first-child { margin-top: 8px; }
.games-sports .game-group.exam1>.g-list .match-box>.m-team>.row>div { padding: 2px 0; }
.games-sports .game-group.exam1>.g-list .match-box>.m-team .team-logo { position: absolute; top:3px; left:0; width:18px; }
.games-sports .game-group.exam1>.g-list .match-box>.m-team .team-name { max-width: 110px; min-height: 24px; margin-left: 20px; font-size: 13px; }
.games-sports .game-group.exam1>.g-list .match-box>.m-team .score { font-size: 13px; vertical-align: top; color: #9d4341; }
.games-sports .game-group.exam1>.g-list .match-box.live>.m-time>p { color: #267926; font-size: 11px; margin-top: 18px; }
.games-sports .game-group.exam1>.g-list .match-box.live>.m-team .score { color: #267926; }
.games-sports .game-group.exam1>.g-list .match-box>.m-odds button { width:100%; font-size: 14px; border: 1px solid rgb(0 0 0 / 12%); border-radius: 4px; background: #fff; 
  padding: 2px 1px; position: relative; }
.games-sports .game-group.exam1>.g-list .match-box>.m-odds button.marking { background: #ffb9a2; }
.games-sports .game-group.exam1>.g-list .match-box>.m-odds button.marked { background: #fbfcec; font-weight: 600; }
.games-sports .game-group.exam1>.g-list .match-box>.m-odds button:before { position: absolute; top:-15px; right:0; left:0; margin:auto; font-size: 10px; font-weight: 500; color:#aaa; }
.games-sports .game-group.exam1>.g-list .match-box>.m-odds button.odds-1:before { content: 'W'; }
.games-sports .game-group.exam1>.g-list .match-box>.m-odds button.odds-2:before { content: 'D'; }
.games-sports .game-group.exam1>.g-list .match-box>.m-odds button.odds-3:before { content: 'L'; }


.games-sports .game-group.exam2>.g-list {
  box-shadow: 0px 0px 8px rgb(0 0 0 / 20%);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.games-sports .game-group.exam2>.g-list .match-box {
  padding: 5px 5px;
}
.games-sports .game-group.exam2>.g-list .match-box:nth-child(2n) {
  background-color: #f7f7fd;
}
.games-sports .game-group.exam2>.g-list .match-box>li {
  vertical-align: top;
}
.games-sports .game-group.exam2>.g-list .match-box>li:nth-child(1) {
  width: 13%;
}
.games-sports .game-group.exam2>.g-list .match-box>li:nth-child(2) {
  width: 47%;
  padding-right: 15px;
}
.games-sports .game-group.exam2>.g-list .match-box>li:nth-child(3) {
  width: 40%;
  padding-top: 18px;
}
.games-sports .game-group.exam2>.g-list .match-box>.m-time>p {
  font-size: 12px;
  text-indent: -5px;
}
.games-sports .game-group.exam2>.g-list .match-box>.m-time>p:first-child {
  margin-top: 8px;
}
.games-sports .game-group.exam2>.g-list .match-box>.m-team>.row>div {
  padding: 2px 0;
}
.games-sports .game-group.exam2>.g-list .match-box>.m-team .team-logo {
  position: absolute;
  top: 3px;
  left: 0;
  width: 18px;
}
.games-sports .game-group.exam2>.g-list .match-box>.m-team .team-name {
  max-width: 110px;
  min-height: 24px;
  margin-left: 20px;
  font-size: 13px;
}
.games-sports .game-group.exam2>.g-list .match-box>.m-team .score {
  font-size: 13px;
  vertical-align: top;
  color: #9d4341;
}
.games-sports .game-group.exam2>.g-list .match-box.live>.m-time>p {
  color: #267926;
  font-size: 11px;
  margin-top: 18px;
}
.games-sports .game-group.exam2>.g-list .match-box.live>.m-team .score {
  color: #267926;
}
.games-sports .game-group.exam2>.g-list .match-box>.m-odds button {
  width: 100%;
  font-size: 14px;
  border: 1px solid rgb(0 0 0 / 12%);
  border-radius: 4px;
  background: #fff;
  padding: 2px 1px;
  position: relative;
}
.games-sports .game-group.exam2>.g-list .match-box>.m-odds button.marking {
  background: #ffb9a2;
}
.games-sports .game-group.exam2>.g-list .match-box>.m-odds button.marked {
  background: #fbfcec;
  font-weight: 600;
}
.games-sports .game-group.exam2>.g-list .match-box>.m-odds button:before {
  position: absolute;
  top: -15px;
  right: 0;
  left: 0;
  margin: auto;
  font-size: 10px;
  font-weight: 500;
  color: #aaa;
}
.games-sports .game-group.exam2>.g-list .match-box>.m-odds button.odds-1:before {
  content: 'W';
}
.games-sports .game-group.exam2>.g-list .match-box>.m-odds button.odds-2:before {
  content: 'D';
}
.games-sports .game-group.exam2>.g-list .match-box>.m-odds button.odds-3:before {
  content: 'L';
}


/* ====================================================== */
/* search form                                            */
/* ====================================================== */
/* default search form */
.search-form > .ft-row { margin-bottom: 10px; }
.search-form > .ft-row:last-child { margin-bottom: 0; }
.search-form > .ft-row .sc-label { border-bottom: 2px solid #e4e4e4; margin-bottom: 3px; font-size: 12px; font-weight: 600; }
.search-form > .ft-row .sc-input label { width: 100%; font-size: 13px; }