@charset "utf-8";

#mod_proto_top_source{margin-bottom: 40px;}
#mod_proto_bottom_source{margin-top: 40px;}

/* Table */
.mobile_table1.list{display: none;}
.mobile_table2.list{display: none;}
.table1{width: 100%;border-top: 1px solid #cccccc;margin-top: -1px;}
.table1.list{width: 100%;margin: -1px;}
.table1 tr > *{padding: 10px 10px 10px 10px;font-size: 14px;line-height: 18px;transition: all 0.2s;}
.table1.list{border-top: none;}
.table1 > thead > tr > th{position: relative;background: #fafafa;color: #333333;letter-spacing: -1px;padding: 10px 20px;border-top: none;border-bottom: 1px solid #eeeeee;}
.table1.list{border-top: none;}
.table1.list > thead > tr > *{
    padding: 20px 10px 30px 10px;border-top: none;border-bottom: 1px solid #ff2d00;font-size: 14px;color: #666;
    background: rgb(250,250,250);
    background: -webkit-linear-gradient(bottom, rgba(250,250,250,1) 0%, rgba(255,255,255,255) 100%);
    background: -o-linear-gradient(bottom, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,245,245,1) 100%);
}

.table1.list > thead > tr th:before{position: absolute;top: 50%;left: 0;width: 1px;height: 12px;margin-top: -10px;background: #dddddd;content: '';display: block;}
.table1.list > thead > tr th i{margin-left: 5px;}
.table1.list > tbody > tr:nth-child(even) > *{background: #f8f8f8;}
.table1.list > tbody > tr:hover > *{background: #fffafa;} /* 마우스 오버색상 */
.table1.list .inp{height: 26px;line-height: 26px;border-radius: 3px;background: #ffffff;}

.table2 {border-top: 1px solid #cccccc;margin-top: -1px;width: 100%;}
.table2.list {width: calc(100% + 40px); margin-top: 10px;}
.table2 tr > * {border: 1px solid #f1f1f1;border-width: 1px 0 1px 0;font-size: 14px;line-height: 18px;padding: 10px 10px;transition: all 0.2s;}

.table2 > thead > tr > th a {color: #666666;display: inline-block;line-height: 13px;padding-bottom: 1px;position: relative;text-decoration: none;}
.table2 > thead > tr > th a:after {border-bottom: 1px dashed #000000;bottom: -2px;content: '';display: block;left: 0;opacity: 0.4;position: absolute;transition: all 0.2s;width: 100%;}
.table2 > thead > tr > th a:hover:after {opacity: 1;}

.table2 > tbody > tr > th {color: #000000;font-size: 13px;font-weight: normal;letter-spacing: -1px;padding-left: 20px;text-align: left;width: 180px;}
.table2 > tbody > tr > td {letter-spacing: -0.5px;}
.table2 > tbody > tr > td.no {color: #999999;font-size: 11px;}
.table2 > tbody > tr > td > strong {color: #000000;font-weight: bold;}
.table2 > tbody > tr > td a {color: #6963db;text-decoration: underline;}
.table2 > tbody > tr > td a strong {font-weight: bold;}
.table2 > tbody > tr > td .tmb {height: auto;max-height: 40px;max-width: 40px;width: auto;}
.table2 > tbody:last-child {border-bottom: 1px solid #ddd;}
.table2.list {border-top: none;}
.table2.list > thead > tr:first-child > * {background: rgb(250,250,250);background: linear-gradient(to top, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%);background: -o-linear-gradient(bottom, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%);background: -webkit-linear-gradient(bottom, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%);border-bottom: 1px solid #dedede;border-top: none;color: #666666;font-size: 14px;padding: 12px 5px;}
.table2.list > thead > tr th:before {background: #dddddd;height: 12px;position: absolute;width: 1px;}
.table2.list > thead > tr th:first-child:before {display: none;}
.table2.list > thead > tr th i {margin-left: 5px;}
.table2.list > tbody > tr:nth-child(even) > * {background: #fafafa;}
.table2.list > tbody > tr:hover > * {
    background-color: #dbeafe !important; /* 기존 회색보다 조금 더 진한 회색 */
    /* 또는 포인트 컬러를 원할 경우 */
    /* background-color: #e8f4fd !important; */ 
    cursor: pointer; /* 마우스를 올렸을 때 손가락 모양으로 변경 */
}
.table2.list .inp {background: #ffffff;border-radius: 3px;height: 26px;line-height: 26px;}
.table2 .table2 tr > * {border: none;}
.table2 .table2 > tbody > tr > th {color: #000000;font-size: 12px;width: 60px;}

.table3 {border-top: 1px solid #cccccc;margin-top: -1px;width: 100%;}
.table3.list {margin: 0 -20px;width: calc(100% + 40px); margin-top: 100px;}
.table3 tr > * {border: 1px solid #f1f1f1;border-width: 1px 0 1px 0;font-size: 14px;line-height: 18px;padding: 10px 20px;transition: all 0.2s;}

.table3 > thead > tr > th a {color: #666666;display: inline-block;line-height: 13px;padding-bottom: 1px;position: relative;text-decoration: none;}
.table3 > thead > tr > th a:after {border-bottom: 1px dashed #000000;bottom: -2px;content: '';display: block;left: 0;opacity: 0.4;position: absolute;transition: all 0.2s;width: 100%;}
.table3 > thead > tr > th a:hover:after {opacity: 1;}

.table3 > tbody > tr > th {color: #000000;font-size: 13px;font-weight: normal;letter-spacing: -1px;padding-left: 20px;text-align: left;width: 180px;}
.table3 > tbody > tr > td {letter-spacing: -0.5px;}
.table3 > tbody > tr > td.no {color: #999999;font-size: 11px;}
.table3 > tbody > tr > td > strong {color: #000000;font-weight: bold;}
.table3 > tbody > tr > td a {color: #6963db;text-decoration: underline;}
.table3 > tbody > tr > td a strong {font-weight: bold;}
.table3 > tbody > tr > td .tmb {height: auto;max-height: 40px;max-width: 40px;width: auto;}
.table3 > tbody:last-child {border-bottom: 1px solid #ddd;}
.table3.list {border-top: none;}
.table3.list > thead > tr:first-child > * {background: rgb(250,250,250);background: linear-gradient(to top, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%);background: -o-linear-gradient(bottom, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%);background: -webkit-linear-gradient(bottom, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%);border-bottom: 1px solid #dedede;border-top: none;color: #666666;font-size: 14px;padding: 12px 5px;}
.table3.list > thead > tr th:before {background: #dddddd;height: 12px;position: absolute;width: 1px;}
.table3.list > thead > tr th:first-child:before {display: none;}
.table3.list > thead > tr th i {margin-left: 5px;}
.table3.list > tbody > tr:nth-child(even) > * {background: #fafafa;}
.table3.list > tbody > tr:hover > * {background: rgba(0,0,0,0.02);}
.table3.list .inp {background: #ffffff;border-radius: 3px;height: 26px;line-height: 26px;}
.table3 .table3 tr > * {border: none;}
.table3 .table3 > tbody > tr > th {color: #000000;font-size: 12px;width: 60px;}

.table4 {width: 100%;}
.table4 tr > * {border: none;line-height: 18px;transition: all 0.2s;}
.table4 > thead > tr > th {background: rgb(250,250,250);background: linear-gradient(to top, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%);background: -o-linear-gradient(bottom, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%);background: -webkit-linear-gradient(bottom, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%);border-bottom: 1px solid #dddddd;color: #000000;font-size: 13px;font-weight: normal;letter-spacing: -1px;padding: 7px 0;position: relative;}
.table4 > thead > tr > th:before {background: #dddddd;content: '';display: block;height: 12px;left: 0;margin-top: -6px;position: absolute;top: 50%;width: 1px;}
.table4 > thead > tr > th:first-child:before {display: none;}
.table4 > thead > tr > th a {color: #ffffff;display: inline-block;line-height: 13px;padding-bottom: 1px;position: relative;text-decoration: none;}
.table4 > thead > tr > th a:after {border-bottom: 1px dashed #ffffff;bottom: -2px;content: '';display: block;left: 0;opacity: 0.4;position: absolute;transition: all 0.2s;width: 100%;}
.table4 > thead > tr > th a:hover:after {opacity: 1;}
.table4 > tbody > tr > th {color: #000000;font-weight: bold;font-weight: normal;letter-spacing: -1px;padding: 10px 0 0 0;text-align: left;width: 150px;}
.table4 > tbody > tr > td {padding: 5px 0;}
.table4 > tbody > tr > td.no {color: #999999;font-size: 11px;}
.table4 > tbody > tr > td strong {color: #000000;font-weight: bold;}
.table4 > tbody > tr > td a {color: #000000;text-decoration: underline;}
.table4.with-thead > tbody > tr > td {padding: 10px 0 0 0;}
.table4.list > tbody > tr:hover > * { 
    table-layout: fixed; /* 너비를 고정 비율로 강제 지정 */ 
	width: 100%;
    border-collapse: collapse;
	background: #f1f1f1;
}
.table4.list > tbody > tr:hover > * {
    table-layout: fixed; /* 너비를 고정 비율로 강제 지정 */ 
	width: 100%;
    border-collapse: collapse;
	background: #f1f1f1;
}

.table5 {width: 90%;}
.table5.list > tbody > tr:hover > * {background: #f1f1f1;}
.table5.list > tbody > tr:hover > * {background: #f1f1f1;}

.mobile-table2.list{display: none;}

#proto-sort{background: #ffffff;padding: 0px 0px 0px 0px;border-bottom: 0px solid #e7e7e7;display: flex;}
#proto-sort li{display: inline-block;margin-right: 3px;border: 1px solid #666666;background: #ffffff;border-radius: 2px;overflow: hidden;transition: all 0.2s;}
#proto-sort li > *{display: block;zoom: 1;}
#proto-sort li > *:after{display: block;content: '';clear: both;}
#proto-sort li > * > *{float: left;display: inline-block;}
#proto-sort li a,
#proto-sort li span{display: block;text-decoration: none;}
#proto-sort li em{font-size: 14px;font-weight: bold;color: #333333;font-style: normal;line-height: 30px;letter-spacing: -1px;}
#proto-sort li p{display: inline-block;line-height: 30px;font-size: 14px;font-weight: bold;color: #6963db;margin-left: 5px;font-family: Tahoma, Arial;letter-spacing: -0.5px;}
#proto-sort li:hover{background: #fafafa;}

#proto-sort-left{text-align: left;width: 75%;background: #ffffff;padding: 10px 0px 10px 0px;border-bottom: 1px solid #e7e7e7;}
#proto-sort-right{text-align: right;width: 25%;background: #ffffff;padding: 10px 0px 10px 0px;border-bottom: 1px solid #e7e7e7;}
#proto-sort-right li{display: inline-block;margin-right: 0px;margin-left: 5px;border: 1px solid #666666;background: #ffffff;border-radius: 2px;overflow: hidden;transition: all 0.2s;}

#proto-sch{margin-bottom: 0px;zoom: 1;}
#proto-sch:after{display: block;content: '';clear: both;}
#proto-sch fieldset{position: relative;background: #ffffff;float: left;margin-right: 0px;zoom: 1;border: 0px solid #999999;box-shadow: 1px 2px 0 rgba(0,0,0,0.03);border-radius: 2px;overflow: hidden;}
#proto-sch fieldset:after{display: block;content: '';clear: both;}
#proto-sch fieldset > *{position: relative;height: 30px;float: left;}
#proto-sch .slt{
    position: relative;width: 100px;height: 30px;overflow: hidden;border-right: 1px solid #dddddd;z-index: 2;margin-right: -1px;
    background: rgb(247,247,247);
    background: -webkit-linear-gradient(bottom, rgba(247,247,247,1) 0%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(bottom, rgba(247,247,247,1) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to top, rgba(247,247,247,1) 0%, rgba(255,255,255,1) 100%);
}
#proto-sch .slt:after{display: block;position: absolute;top: 50%;margin-top: -7px;right: 10px;content: '\f0d7';font-family: 'Font Awesome 5 Free';font-size: 16px;font-weight: bold;color: #999999;}
#proto-sch .slt select{position: absolute;top: 0;left: 0;background: transparent;min-width: 130%;border: none;height: 30px;padding-left: 10px;z-index: 2;font-size: 13px;letter-spacing: -1px;cursor: pointer;}
#proto-sch .sbm{position: absolute;top: 0;right: 0;width: 30px;height: 30px;border: none;border: none;background: none;text-indent: -999em;}
#proto-sch .sbm i{text-indent: 0;text-align: center;position: absolute;top: 0;left: 0;width: 100%;line-height: 30px;color: #666666;}
#proto-sch input[type=text]{border: none;background: none;height: 30px;padding-left: 10px;font-size: 13px;letter-spacing: -1px;color: #666666;width: 180px;padding: 0 0 0 10px;border-left: 1px solid #eee;}
#proto-sch input[type=text].keyword{padding-right: 30px;}
#proto-sch input[type=text].date{width: 90px;}
#proto-sch a{
    position: relative;line-height: 30px;color: #000000;text-decoration: none;font-size: 13px;letter-spacing: -1px;padding: 0 10px;margin-right: -1px;border-right: 1px solid #dddddd;z-index: 2;
    background: rgb(247,247,247);
    background: -webkit-linear-gradient(bottom, rgba(247,247,247,1) 0%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(bottom, rgba(247,247,247,1) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to top, rgba(247,247,247,1) 0%, rgba(255,255,255,1) 100%);
}

#proto-nodata{display: block;text-align: center;padding: 40px 0;color: #999999;border-bottom: 1px solid #f1f1f1;margin-top: -1px;}

.tar{text-align: right !important;}
.tac{border: 0px solid #f1f1f1;text-align: center !important;}
.tac_win{border: 1px solid #eeeeee; background-color: #0060a3; border-width: 1px 1px 1px 1px; color: #ffffff; text-align: center !important;}
.tac_mu{border: 1px solid #eeeeee; background: #606060; border-width: 1px 1px 1px 1px; color: #ffffff; text-align: center !important;}
.tac_die{border: 1px solid #eeeeee; background: #d20000; border-width: 1px 1px 1px 1px; color: #ffffff; text-align: center !important;}
.tac_can{border: 1px solid #eeeeee; border-width: 1px 1px 1px 1px; color: #d20000; text-align: center;}
.tac_why{border: 1px solid #eeeeee; border-width: 1px 1px 1px 1px; color: #000000; text-align: center;}
.tab_bak{border: 1px solid #d20000; border-width: 1px 1px 1px 1px; text-align: center;}

.number_box {
     width: 65px;
     height: 95%;
     font-size: 14px;
	 font-weight: bold;
     text-align: center;
     outline: none;
     padding-left: 2px;
	 border: 1px #0982f0 solid;
     background-color: #ffffff;
 }
 input:focus{
     border-color: #ff2d00;
     outline: none;
 }
 /* 박스 옆에 상.하 조절 없애기  */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
 }
 input[type='number'] {
        -moz-appearance: textfield;
 }

/**************************************************
    년도 회차옆에 화살표
**************************************************/
.arrow-prev,
.arrow-next {
    position: relative;
    float:left;
    width:20px;
    height:30px;
    margin-right:5px;
}

.arrow-prev::after {
    position: absolute;
    left: 8px; 
    top: 8px;
    content: '';
    width: 10px; /* 사이즈 */
    height: 10px; /* 사이즈 */
    border-top: 3px solid #555; /* 선 두께 */
    border-right: 3px solid #555; /* 선 두께 */
    transform: rotate(225deg); /* 각도 */
}

.arrow-next::after {
    position: absolute;
    left: 3px; 
    top: 8px; 
    content: '';
    width: 10px; /* 사이즈 */
    height: 10px; /* 사이즈 */
    border-top: 3px solid #555; /* 선 두께 */
    border-right: 3px solid #555; /* 선 두께 */
    transform: rotate(45deg); /* 각도 */
}

/**************************************************
    배당 및 홈/원정 팝업뷰
**************************************************/
/* 아래와 같이 기존 테두리와 배경 속성을 다시 넣어주세요 */
.cont .slt {
    /* 1. 기존 스타일 복원 (님의 원래 CSS 속성에 맞게 수정하세요) */
    display: inline-block;
    width: 100%; /* 너비 유지 */
    height: 34px; /* 기존 높이 유지 */
    background-color: #fff; /* 흰색 배경 복원 */
    border: 1px solid #ccc; /* 깔끔한 회색 테두리 복원 */
    border-radius: 4px; /* 둥근 모서리 복원 */
    vertical-align: middle;
	   z-index: 10;
    /* 2. 가상 요소 기준점 추가 (반드시 필요) */
    position: relative; 
}

/* 화살표 아이콘 스타일 설정 */
.cont .slt::after {
    /* 1. 위치 및 중앙 정렬 */
    display: block;
    position: absolute; /* .slt 내부를 기준으로 절대 위치 배치 */
    top: 50%;
    transform: translateY(-50%); /* 정확히 세로 중앙 배치 */
    
    /* [수정] 고정된 숫자(394px) 대신 오른쪽 끝에서 10px 안쪽으로 지정합니다. */
    right: 10px; /* ★이 부분을 10px로 수정하세요 */
    
    /* 2. 기존 CSS 유지 */
    content: '\f0d7'; /* Font Awesome 아래 화살표 */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 14px; /* 아이콘 크기 살짝 조정 */
    color: #333; /* 아이콘 색상 */
    pointer-events: none; /* 아이콘 클릭 시 아래 셀렉트 박스가 동작하도록 함 */
    
    /* margin-top: -24px; <- 이 속성은 translateY(-50%)와 중복되어 위치가 틀어질 수 있으므로 제거를 권장합니다. */
}
/* .slt 내부의 실제 select 태그 스타일 설정 */
.cont .slt select {
    /* 브라우저 기본 테두리와 화살표 제거 */
    -webkit-appearance: none; /* 크롬, 사파리, 최신 엣지 */
    -moz-appearance: none; /* 파이어폭스 */
    appearance: none; /* 표준 속성 */
    
    /* 기존 스타일 유지 (배경 투명, 테두리 없음 등) */
    background: transparent;
    border: none;
    width: 100%;
    height: 100%;
    
    /* 가상 요소 화살표와 글자가 겹치지 않도록 오른쪽 여백 추가 */
    padding-right: 30px;
    padding-left: 10px;
    
    /* 기타 텍스트 스타일 */
    font-size: 14px;
    color: #333;
    cursor: pointer;
}
.pop_slt {
    display: inline-block;
    vertical-align: middle;
    width: auto; /* 내용물에 맞춰 자동 조절되도록 하거나, 고정값(예: 150px)을 줍니다. */
    
    /* [수정] 화살표 기준점 설정 */
    position: relative; 
    
    /* [수정] 박스 사이 간격 추가 (td 안에서 띄우기) */
    margin-right: 10px; 
}

.pop_slt:last-child {
    margin-right: 0;
}
.pop_slt select {
    /* [수정] 기본 테두리와 화살표 제거 (부모 div의 테두리를 사용) */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    
    /* [수정] 테두리와 배경 복원 (이 부분이 누락되면 이전 이미지처럼 박스가 사라집니다) */
    background-color: #fff;
    border: 1px solid #FFA500; /* 세련된 회색 테두리 복원 */
    border-radius: 4px; /* 둥근 모서리 */

	/* [수정] 크기 고정 (원하시는 크기로 조절하세요) */
    width: 150px;
    height: 34px;
    line-height: 34px;
    
    /* [수정] 여백 추가 (왼쪽 10px, 오른쪽 30px는 화살표 공간) */
    padding: 0 30px 0 10px;
    font-size: 14px;
    color: #333;
    cursor: pointer;
}
.pop_slt::after {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* 정확히 세로 중앙 정렬 */
    
    /* [수정] 고정 수치(53px) 대신 오른쪽 끝에서 10px 지점으로 변경 */
    right: 10px; /* ★이 부분을 수정해야 합니다 */
    
    /* [수정] 불필요한 라인 삭제 */
    /* margin-top: -248px; <- 삭제하세요 */
    
    content: '\f0d7';
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    font-size: 16px;
    color: #000;
    pointer-events: none;
}
#pop-view {
    /* 1. 테두리 및 기본 스타일 (기존 유지) */
    border-style: solid;
    border-width: 10px;
    border-color: #4a4a4a;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* 입체감을 위해 그림자 농도 조절 */
    box-sizing: border-box;
    z-index: 305;
    position: fixed;
    overflow: hidden;

    /* 2. 크기 설정 (수동 조정 가능) */
    width: 1200px;  /* 원하시는 너비로 수정하세요 */
    height: 700px; /* 원하시는 높이로 수정하세요 */
    max-width: 95%; /* 화면보다 커지는 것 방지 */
    max-height: 90%;

    /* 3. 핵심: 중앙 정렬 로직 (수정된 부분) */
    top: 50%;
    left: 50%;
    margin-left: 0; /* 기존의 고정 마진 제거 */
    margin-top: 0;  /* 기존의 고정 마진 제거 */
    transform: translate(-50%, -50%); /* 팝업 자체 크기의 절반만큼 역이동하여 정중앙 배치 */
}
/* 팝업 닫기 버튼의 포커스 테두리 제거 */
#pop-view .close:focus {
    outline: none !important;
    box-shadow: none !important; /* 일부 브라우저에서 생기는 그림자 제거 */
    border: none !important;
}
#pop-view .tit {
    background-color: #2c3e50; /* 신뢰감을 주는 진청색 */
    color: #ffffff; /* 흰색 텍스트로 대비 확인 */
    font-weight: bold;
    border-bottom: 3px solid #e74c3c; /* 테두리색과 통일감을 주는 포인트 라인 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 미세한 그림자로 입체감 부여 */
    box-sizing: border-box;
    left: auto;line-height: 60px;padding: 0 25px;position: absolute;top: 0;width: 100%;z-index: 100;
}
#pop-view .tit h2 {color: #fff;font-size: 16px;font-weight: bold;letter-spacing: -1px;}
#pop-view .tit .close {color: #333;display: block;font-size: 16px;height: 60px;line-height: 60px;position: absolute;right: 0;text-align: center;text-decoration: none;top: 0;width: 60px;}
#pop-view .cont {box-sizing: border-box;height: 625px;overflow-y: auto;padding: 5px 30px 10px 30px;margin-top: 70px;}
#pop-view .table_wrt tbody tr:first-child > * {border-top: none;}
#pop-view .sment {display: block;font-size: 13px;line-height: 50px;text-align: center;}
#pop-view .btn {text-align: center; padding-bottom: 20px;}
#pop-view-bg {background: rgba(0,0,0,0.2);display: none;height: 100%;left: 0;position: fixed;top: 0;width: 100%;z-index: 300;}


/* 대시보드 메인 레이아웃 */
.stat-dashboard {
    background: #fff;
    border: 1px solid #d1d1d1;
    margin: 10px 0;
    padding: 20px;
    font-family: 'Malgun Gothic', 'Dotum', sans-serif;
    border-radius: 4px;
}

.stat-container {
    display: flex;
    justify-content: space-between;
    gap: 25px;
}

/* 좌측 패널 (최근 100경기) */
.stat-left-panel {
    flex: 0 0 42%;
    border-right: 1px solid #eee;
    padding-right: 25px;
}

/* 우측 패널 (역대 전체) */
.stat-right-panel {
    flex: 1;
}

/* 공통 타이틀 스타일 */
.stat-title {
    font-size: 14px;
    text-align: center;
    margin-bottom: 22px;
    font-weight: bold;
    color: #333;
}
.stat-title strong { color: #e74c3c; } /* 배당 포인트 컬러 */
.sub-text { font-size: 11px; color: #888; font-weight: normal; }

/* 수평 바 그래프 (Progress Bar) */
.label-group { display: flex; justify-content: space-between; margin-bottom: 6px; }
.label-blue { font-size: 11px; color: #007bff; font-weight: bold; }
.label-red { font-size: 11px; color: #dc3545; font-weight: bold; }

.progress-bar-wrap { 
    height: 26px; 
    background: #f1f1f1; 
    display: flex; 
    border-radius: 3px; 
    overflow: hidden; 
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}
.bar-blue { background: #007bff; color: #fff; font-size: 12px; line-height: 26px; text-align: center; font-weight: bold; transition: width 0.6s ease; }
.bar-red { background: #dc3545; color: #fff; font-size: 12px; line-height: 26px; text-align: center; font-weight: bold; transition: width 0.6s ease; }

.stat-summary { text-align: center; margin-top: 10px; font-size: 12px; color: #666; }
.empty-data-notice { margin-top: 15px; padding: 12px; border: 1px dashed #ccc; color: #aaa; text-align: center; font-size: 11px; background: #fafafa; }

/* 도넛 차트 디자인 (SVG) */
.chart-flex-group { display: flex; justify-content: space-around; align-items: center; }
.chart-unit { text-align: center; }
.svg-container { position: relative; width: 85px; height: 85px; margin: 0 auto; }

.donut-chart { transform: rotate(-90deg); }
.donut-bg { fill: none; stroke: #f3f3f3; stroke-width: 3.8; }
.donut-ring { fill: none; stroke-width: 3.8; transition: stroke-dasharray 0.8s cubic-bezier(0.4, 0, 0.2, 1); }

/* 도넛 컬러 테마 */
.blue .donut-ring { stroke: #007bff; }
.gray .donut-ring { stroke: #6c757d; }
.red .donut-ring { stroke: #dc3545; }

.chart-percent { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 15px; font-weight: bold; color: #333; }
.chart-info { font-size: 11px; margin-top: 12px; line-height: 1.5; color: #555; }

/* 범례 (Legend) */
.chart-legend { list-style: none; padding: 0; margin: 0; border-left: 1px solid #f0f0f0; padding-left: 20px; }
.chart-legend li { display: flex; align-items: center; font-size: 11px; margin-bottom: 7px; color: #777; white-space: nowrap; }
.dot { width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; }
.dot.blue { background: #007bff; }
.dot.gray { background: #6c757d; }
.dot.red { background: #dc3545; }

/* 메인 컨테이너 및 헤더 */
.match-detail-container { font-family: 'Pretendard', sans-serif; background: #fff; padding: 15px; }
.match-summary-header { display: flex; align-items: center; border-bottom: 2px solid #333; padding-bottom: 10px; font-size: 14px; gap: 15px; font-weight: bold; }

/* 대전 카드 및 중앙 정렬 정보 */
.team-vs-card { margin-top: 20px; padding: 30px; border: 1px solid #e1e1e1; border-radius: 8px; }
.vs-info-top, .section-title { text-align: center !important; width: 100%; display: block; margin-bottom: 25px; }
.vs-info-top { color: #888; font-size: 13px; }
.section-title { font-size: 16px; font-weight: 700; margin-top: 40px; padding-top: 25px; border-top: 1px solid #eee; color: #333; }

/* 대전 팀 레이아웃 */
.vs-main-flex { display: flex; align-items: center; justify-content: center; gap: 20px; }
.team-panel { flex: 1; display: flex; flex-direction: column; }
.team-panel.home { text-align: right; align-items: flex-end; }
.team-panel.won { text-align: left; align-items: flex-start; }
.t-name { font-size: 32px; font-weight: 800; margin: 0; color: #222; }
.vs-score { font-size: 54px; font-weight: 900; color: #444; min-width: 140px; text-align: center; }

/* 산정 승률 바 (표시 안될 때 체크 포인트) */
.odds-probability-section { margin-top: 20px; }
.prob-row { display: flex; align-items: center; margin-bottom: 12px; }
.prob-label { width: 70px; font-weight: 800; font-size: 15px; color: #555; }
.prob-bar-wrap { flex: 1; display: flex; height: 34px; border-radius: 17px; overflow: hidden; background: #f0f0f0; min-width: 200px; }
.p-bar { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 800; transition: width 0.5s ease; }
.p-bar.win { background: #0066b3; }
.p-bar.draw { background: #8e8e8e; }
.p-bar.lose { background: #d32f2f; }

/* 테이블 공통 */
.history-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.history-table th { background: #f8f9fa; color: #666; padding: 10px; border-bottom: 1px solid #eee; }
.history-table td { padding: 12px 10px; border-bottom: 1px solid #f1f1f1; text-align: center; }

/* 하단 5:5 분할 */
.recent-records-flex-container { display: flex; gap: 20px; margin-top: 30px; }
.recent-column { flex: 1; background: #fdfdfd; padding: 15px; border: 1px solid #eee; border-radius: 6px; }
.mini-title { font-size: 14px !important; margin-top: 0 !important; border-top: none !important; margin-bottom: 15px !important; }

/* 결과 배지 */
.res-badge { display: inline-block; padding: 3px 8px; border-radius: 3px; color: #fff; font-size: 11px; font-weight: bold; min-width: 30px; }
.bg-win { background: #0066b3; } .bg-draw { background: #8e8e8e; } .bg-lose { background: #d32f2f; }

/* 추가 스타일 */
.txt-red { color: #d32f2f !important; font-weight: 700; }
.fw-bold { font-weight: 800; }
.t-score, .t-score-compact { font-family: 'Verdana', sans-serif; }

/* 1. 그래프 컨테이너: 기존 .recent-column 내부 상단 배치 [cite: 2026-02-14] */
.stat-chart-container { 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    padding: 15px 0 !important; 
    background: #fff !important; 
    margin-bottom: 20px !important; 
    border-bottom: 1px dashed #eee !important; /* 테이블과 시각적 구분 */
}

/* 2. 도넛형 그래프 (기존 배지 색상과 통일) [cite: 2026-03-09] */
.win-circle { 
    width: 80px !important; 
    height: 80px !important; 
    border-radius: 50% !important;
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    position: relative !important;
    flex-shrink: 0 !important; /* 너비 부족 시 찌그러짐 방지 */
}

/* 도넛 구멍 생성 [cite: 2026-02-14] */
.win-circle::before { 
    content: ""; 
    position: absolute; 
    width: 56px; 
    height: 56px; 
    background: #fff; 
    border-radius: 50%; 
    z-index: 1; 
}

/* 중앙 승률 텍스트 [cite: 2026-02-14] */
.win-percent-text { 
    position: relative !important; 
    font-weight: 800 !important; 
    font-size: 16px !important; 
    color: #333 !important; 
    z-index: 2; 
}

/* 3. 통계 범례 (승/무/패 수치) [cite: 2026-03-09] */
.stat-labels { 
    margin-left: 20px !important; 
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.label-item { 
    font-size: 12px !important; 
    font-weight: 700 !important; 
    color: #666 !important;
    display: flex !important; 
    align-items: center !important;
    white-space: nowrap !important; /* 텍스트 줄바꿈 강제 방지 */
}

/* 범례 도트 색상: 기존 코드의 배지 컬러 계승 [cite: 2026-03-09] */
.dot { 
    display: inline-block !important; 
    width: 8px !important; 
    height: 8px !important; 
    border-radius: 50% !important; 
    margin-right: 8px !important; 
    flex-shrink: 0 !important;
}
.dot-win { background: #0066b3 !important; }  /* 승: 블루 */
.dot-draw { background: #8e8e8e !important; } /* 무: 그레이 */
.dot-lose { background: #d32f2f !important; } /* 패: 레드 */

/* 1. 상대전적 승률 컨테이너 (테이블 하단 배치) */
.match-location-stats-section {
    display: flex !important;
    gap: 15px !important;
    margin-top: 20px !important;
    width: 100% !important;
}

/* 2. 개별 통계 박스 디자인 */
.loc-stat-box {
    flex: 1 !important;
    background: #f8f9fa !important; /* 연한 그레이 배경 */
    padding: 15px !important;
    border-radius: 8px !important;
    border: 1px solid #eee !important;
    text-align: center !important;
    transition: transform 0.2s ease;
}

/* 3. 박스 내 텍스트 스타일링 */
.loc-stat-label {
    font-size: 13px !important;
    color: #666 !important;
    margin-bottom: 8px !important;
    display: block;
}

.loc-stat-value {
    font-size: 24px !important;
    font-weight: 800 !important;
    display: block;
    line-height: 1.2;
}

/* 홈팀(블루) / 원정팀(레드) 강조 색상 */
.txt-home-blue { color: #0066b3 !important; }
.txt-away-red { color: #d32f2f !important; }

/* 4. 경기수 요약 정보 */
.loc-stat-detail {
    font-size: 11px !important;
    color: #999 !important;
    margin-top: 5px !important;
    display: block;
}

/* 마우스 오버 시 살짝 강조 (선택 사항) */
.loc-stat-box:hover {
    background: #f1f3f5 !important;
    border-color: #ddd !important;
}

/* 상대전적 승률 섹션 전용 스타일 */
.match-location-stats-section {
    display: flex !important;
    gap: 15px !important;
    margin-top: 20px !important;
}

.loc-stat-box {
    flex: 1 !important;
    background: #f8f9fa !important;
    padding: 20px 15px !important;
    border-radius: 8px !important;
    border: 1px solid #eee !important;
    text-align: center !important;
}

.loc-stat-label {
    display: block !important;
    font-size: 13px !important;
    color: #666 !important;
    margin-bottom: 8px !important;
}

.loc-stat-value {
    display: block !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    margin-bottom: 5px !important;
}

.loc-stat-detail {
    display: block !important;
    font-size: 11px !important;
    color: #999 !important;
}

/* 텍스트 컬러 강조 */
.txt-home-blue { color: #0066b3 !important; }
.txt-away-red { color: #d32f2f !important; }

/* 1. 컨테이너: 테이블 아래에 안정적으로 배치 [cite: 2026-02-14] */
.match-location-stats-section {
    display: flex !important;
    gap: 15px !important;
    margin: 25px 0 !important;
}

/* 2. 박스 디자인: 내부 요소를 가로로 정렬 [cite: 2026-02-14] */
.match-location-stats-section .loc-stat-box {
    flex: 1 !important;
    background: #fdfdfd !important;
    padding: 18px !important;
    border-radius: 10px !important;
    border: 1px solid #e9ecef !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important; /* 미세한 입체감 */
}

/* 3. 차트와 라벨 간격 조정 [cite: 2026-02-14] */
.match-location-stats-section .stat-chart-container {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    width: 100% !important;
    justify-content: center !important;
}

/* 4. 도넛 그래프 중앙 구멍 생성 (핵심) [cite: 2026-03-09] */
.match-location-stats-section .win-circle::before {
    content: "" !important;
    position: absolute !important;
    width: 56px !important;
    height: 56px !important;
    background: #fdfdfd !important; /* 박스 배경색과 일치시켜 구멍 효과 */
    border-radius: 50% !important;
    z-index: 1 !important;
}

/* 5. 텍스트 강조 및 정렬 [cite: 2026-03-09] */
.match-location-stats-section .win-percent-text {
    z-index: 2 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #222 !important;
}

.match-location-stats-section .stat-labels {
    flex-shrink: 0 !important;
}

/* 기본 + 아이콘 스타일 */
.icon_plus {
    color: #007bff; /* 파란색 */
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.2s ease-in-out;
}

/* 클릭되어 활성화된 상태 (-) */
.icon_plus.active {
    color: #dc3545; /* 빨간색으로 변경 */
    transform: rotate(180deg); /* 부드럽게 회전 효과 */
}

/* 접전(1점차/5점차) 무승부 뱃지 스타일 */
.res-badge.bg-draw {
    background-color: #95a5a6 !important;
    color: #fff !important;
    min-width: 30px;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    display: inline-block;
    text-align: center;
}

/* 그래프 아래 범례 텍스트 크기 조정 */
.label-item {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px;
}

/* 팀명 강조 (본인 팀) */
.highlight-me {
    color: #0066b3;
    font-weight: bold;
}
/* for mobile */
@media screen and (max-width: 1000px){

    /**************************************************
         프로토 결과 따라다니는 레이어
    **************************************************/
    #resultBox { display:none; } 

	/* 모바일 화면에서의 하단 버튼 고정 */
    #mo_resultBox {
       position: sticky;
       bottom: 0;
       width: 100%;
    }

    #mod_proto_top_source{margin-bottom: 20px;}
    #mod_proto_bottom_source{margin-top: 20px;}

    .mobile_table1 > thead > tr > th{position: relative;letter-spacing: -1px;border-top: none;}

    #proto-sort li em{font-size: 12px;font-weight: bold;color: #333333;font-style: normal;line-height: 30px;letter-spacing: -1px;}
    #proto-sort li p{display: inline-block;line-height: 30px;font-size: 12px;font-weight: bold;color: #6963db;margin-left: 5px;font-family: Tahoma, Arial;letter-spacing: -0.5px;}

	#proto-sch{margin-top: -20px;padding: 10px 5px;}
    #proto-sch .where{width: 100%;margin-bottom: 5px;}
    #proto-sch .keyword{width: 100%;margin-bottom: 5px;}
    #proto-sch > button,
    #proto-sch > a{padding: 0 10px;}
    #proto-sch .slt{
    position: relative;width: 60px;height: 30px;overflow: hidden;border-right: 1px solid #dddddd;z-index: 2;margin-right: -1px;
    background: rgb(247,247,247);
    background: -webkit-linear-gradient(bottom, rgba(247,247,247,1) 0%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(bottom, rgba(247,247,247,1) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to top, rgba(247,247,247,1) 0%, rgba(255,255,255,1) 100%);
    }

    .table1.list{display: none;}
	.mobile_table1{width: 100%;border-top: 1px solid #cccccc;margin-top: 0px;}
    .mobile_table1.list{width: 100%;display: revert;}
    .mobile_table1 tr > *{border-width: 1px 0 1px 0;padding: 10px 0px 10px 0px;font-size: 12px;line-height: 18px;transition: all 0.2s;}
    .mobile_table1.list{border-top: none;}
    .mobile_table1.list >  *{
        padding: 12px 5px;border-top: none;border-bottom: 1px solid #ff2d00;;font-size: 12px;color: #666;
        background: rgb(250,250,250);
        background: -webkit-linear-gradient(bottom, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%);
        background: -o-linear-gradient(bottom, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%);
        background: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(255,245,245,1) 100%);
    }
    .mobile_table1.list > thead > tr th:before{position: absolute;top: 50%;left: 0;width: 1px;height: 12px;margin-top: -6px;background: #dddddd;content: '';display: block;}
    .mobile_table1.list > thead > tr th:first-child:before{display: none;}
    .mobile_table1.list > thead > tr th i{margin-left: 5px;}
    .mobile_table1.list > tbody > tr:nth-child(even) > *{background: #f8f8f8;}
    .mobile_table1.list > tbody > tr:hover > *{background: #aaffaa;} /* 마우스 오버색상 */
    .mobile_table1.list .inp{height: 26px;line-height: 26px;border-radius: 3px;background: #ffffff;}

	.table2.list{display: none;}
	.mobile_table2{width: 100%;border-top: 1px solid #cccccc;margin-top: 0px;}
    .mobile_table2.list{width: 100%;display: revert;}
    .mobile_table2 tr > *{border-width: 1px 0 1px 0;padding: 10px 0px 10px 0px;font-size: 12px;line-height: 18px;transition: all 0.2s;}
    .mobile_table2.list{border-top: none;}
    .mobile_table2.list >  *{
        padding: 12px 5px;border-top: none;border-bottom: 1px solid #ff2d00;;font-size: 12px;color: #666;
        background: rgb(250,250,250);
        background: -webkit-linear-gradient(bottom, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%);
        background: -o-linear-gradient(bottom, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%);
        background: linear-gradient(to top, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%);
    }
    .mobile_table2.list > thead > tr th:before{position: absolute;top: 50%;left: 0;width: 1px;height: 12px;margin-top: -6px;background: #dddddd;content: '';display: block;}
    .mobile_table2.list > thead > tr th:first-child:before{display: none;}
    .mobile_table2.list > thead > tr th i{margin-left: 5px;}
    .mobile_table2.list > tbody > tr:nth-child(even) > *{background: #f8f8f8;}
    .mobile_table2.list > tbody > tr:hover > *{background: #fffafa;} /* 마우스 오버색상 */
    .mobile_table2.list .inp{height: 26px;line-height: 26px;border-radius: 3px;background: #ffffff;}
    
    .mobile_table3{width: 95%;margin-left: auto;margin-right: auto;}
    .mobile_table3 tr > *{border: 1px solid #f1f1f1;border-width: 0px 0px 0px 0px;display: ;margin: 2px 2px 2px 2px;padding: 0px 0px 0px 0px;font-size: 12px;line-height: 18px;transition: all 0.2s;}
    .mobile_table3.list > tbody > tr:hover > *{background: #f1f1f1;}

	.mobile_table4{width: 100%;border-top: 1px solid #cccccc;margin-top: -1px;}
    .mobile_table4.list{width: 100%;margin: 0px;display: revert;}
    .mobile_table4 tr > *{border: 1px solid #f1f1f1;border-width: 0px 0 0px 0;padding: 5px 0px 5px 0px;font-size: 12px;line-height: 18px;transition: all 0.2s;}
    .mobile_table4.list{border-top: none;}
    .mobile_table4.list > thead > tr > *{
        padding: 12px 5px;border-top: none;border-bottom: 1px solid #ff2d00;font-size: 12px;color: #666666;
        background: rgb(250,250,250);
        background: -webkit-linear-gradient(bottom, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%);
        background: -o-linear-gradient(bottom, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%);
        background: linear-gradient(to top, rgba(250,250,250,1) 0%, rgba(255,255,255,1) 100%);
    }
    .mobile_table4.list > thead > tr th:before{position: absolute;top: 50%;left: 0;width: 1px;height: 12px;margin-top: -6px;background: #dddddd;content: '';display: block;}
    .mobile_table4.list > thead > tr th:first-child:before{display: none;}
    .mobile_table4.list > thead > tr th i{margin-left: 5px;}
    .mobile_table4.list .inp{height: 26px;line-height: 26px;border-radius: 3px;background: #ffffff;}

    .number_box {
        width: 40px;
        height: 25px;
        font-size: 12px;
	    font-weight: bold;
	    text-align: center;
        outline: none;
        padding-left: 2px;
	    border: 1px #0982f0 solid;
        background-color: #ffffff;
    }
    input:focus{
        border-color: #ff2d00;
        outline: none;
    }
    /* 박스 옆에 상.하 조절 없애기  */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
           -webkit-appearance: none;
           margin: 0;
    }
    input[type='number'] {
           -moz-appearance: textfield;
    }
	/* 모바일 화면에서의 하단 버튼 고정 */
   .btn {
       position: sticky;
       bottom: 0;
       width: 100%;
   }

   /**************************************************
       년도 회차옆에 화살표
   **************************************************/ 
   .arrow-prev,
   .arrow-next {
       position: relative;   
       float:left;
       width:15px;
       height:30px;
       margin-right:5px;
   }

   .arrow-prev::after {
       position: absolute;
       left: 8px; 
       top: 8px;
       content: '';
       width: 8px; /* 사이즈 */
       height: 10px; /* 사이즈 */
       border-top: 3px solid #555; /* 선 두께 */
       border-right: 3px solid #555; /* 선 두께 */
       transform: rotate(225deg); /* 각도 */
   }
   
   .arrow-next::after {
       position: absolute;
       left: 1px; 
       top: 8px; 
       content: '';
       width: 10px; /* 사이즈 */
       height: 10px; /* 사이즈 */
       border-top: 3px solid #555; /* 선 두께 */
       border-right: 3px solid #555; /* 선 두께 */
       transform: rotate(45deg); /* 각도 */
   }
}

   /**************************************************
       레이어 버튼 + -
   **************************************************/

.btnPlus {
background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	background-color:#ffffff;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:red;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	padding:5px 5px;
	text-decoration:none;
	text-shadow:2px 2px 50px #ffffff;
}

.btnPlus:hover {
	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	background-color:#f6f6f6;
}
.btnPlus:active {
	position:relative;
	top:1px;
}

/**************************************************
    잠시만 기다려 주세요 옆의 로딩 css
**************************************************/
/** BEGIN CSS **/
@keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-moz-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-moz-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}

@-moz-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}

@-webkit-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}

@-o-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}
.loading-container,
.loading {
    height: 50px;
    position: relative;
    width: 50px;
    border-radius: 100%;
}


.loading-container { margin: 0px 0px 0px 0px; }

.loading {
    border: 3px solid transparent;
    border-color: transparent #FA4D01 transparent #FA4D01;
    -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
    -moz-transform-origin: 50% 50%;
    -o-animation: rotate-loading 1.5s linear 0s infinite normal;
    -o-transform-origin: 50% 50%;
    -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
    -webkit-transform-origin: 50% 50%;
    animation: rotate-loading 1.5s linear 0s infinite normal;
    transform-origin: 50% 50%;
}

.loading-container:hover .loading {
    border-color: transparent #E45635 transparent #E45635;
}
.loading-container:hover .loading,
.loading-container .loading {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#loading-text {
    -moz-animation: loading-text-opacity 2s linear 0s infinite normal;
    -o-animation: loading-text-opacity 2s linear 0s infinite normal;
    -webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
    animation: loading-text-opacity 2s linear 0s infinite normal;
    color: #FA4D01;
    font-family: "Helvetica Neue, "Helvetica", ""arial";
    font-size: 6px;
    font-weight: bold;
    margin-top: 24px;
    opacity: 0;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 0;
    width: 55px;
}
/**************************************************
    프로토 결과 따라다니는 레이어
**************************************************/
#resultBox { position: absolute; margin-left: 298px; left: -500px; top: 100px; background: #ddd; width: 250px; height: 100px; z-index:99; } 
#mo_resultBox { display: none; }