/* Global Web-font */
@font-face{ font-family:apple; src:url(/fonts/AppleSDGothicNeoRegular.otf) format('opentype');font-weight:normal;font-style:normal; }
/* body,input,textarea,button,select,table{ font-family: apple,Tahoma,Sans-serif } */
html,body,input,textarea,button,select,table{ font-family: "애플 SD 산돌고딕 Neo", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", sans-serif }

/* Links */
a, a:focus, a:hover, a:active { color: #638ed0;outline:none;text-decoration: none; }


/* 기본 */
* { -webkit-overflow-scrolling: touch; }
html, body, header, section, footer, div, ul { scroll-behavior: smooth; }
hr { margin:10px 0px; }
table, tr { width:100%; }
table thead th { text-align:center; }
table tbody tr { text-align:center; }
ul, ol { padding:0px; }
ul li { list-style-type:none; }
/* 기본 */


/* 타이틀 */
.page-title { color:#e14e4e;font-weight:bold; }
.page-title:before { content:"";display:inline-block;width:4px;height:14px;background:#ce7373;margin-right:6px; }
.section-title { margin-top:60px;color:#3468c1;font-weight:bolder; }
/* .section-title { color:#3468c1;font-weight:bolder;border-bottom:1px solid #3468c122;padding:4px; } */



/* 버튼들 */
.btnD {
	width: 100%;
	padding: 6px;
	border: 1px solid #e14e4e;
	border-radius: 5px;
	background-color: #e14e4e;
	color: #eee;
	box-shadow: 2px 2px 1px #999;
}

.btnB {
	width: 100%;
	padding: 6px;
	border: 1px solid #e14e4e;
	border-radius: 5px;
	background-color: #fff0;
	color: #e14e4e;
	box-shadow: 2px 2px 1px #bbb;
}

.btn-scroll-top { position:fixed;right:20px;bottom:20px;color:#e14e4eaa; }
.btn-scroll-top:hover, .btn-scroll-top:active, .btn-scroll-top:focus { color:#e14e4eee; }

.btn-chat-regist { position:fixed;left:20px;bottom:20px;color:#337ab7aa; }
.btn-chat-regist:hover, .btn-chat-regist:active, .btn-chat-regist:focus { color:#2e6da4ee; }
/* 버튼들 */


/* 폼 관련(input, select 등) */
.input-amt {
	text-align: right;
}
/* 폼 관련(input, select 등) */


/* UI 관련 */
.text-center { text-align:center; }
.text-right { text-align:right; }
.seperator { height:1px;background-color:#999; }
.seperator2 { height:1px;background-color:#b5c6e0;padding:0 10px; }
}
/* UI 관련 */


/*******************************/
/* START) bootstrap 재정의       
/*******************************/
.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
    color:#e14e4e;
    background-color: #080808;
}
table.table-striped tr:last-child { border-bottom:1px solid #eee; }
.form-horizontal .form-group label { line-height:34px; }

div.form-group label { color:#666; }

div.form-group input[type=date] { min-width:95%; }

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse { max-height:380px; }
/*******************************/
/* END) bootstrap 재정의       
/*******************************/


/* Siema 재정의 */




/* 로그인 화면 */
.div-login-form { height:100%;width:100%;margin:0px auto;margin-top:100px; }
.titleINS { color:#333;text-align:center;font-size:32px;font-weight:bolder; }
.subtitleINS { color:#333;text-align:center;font-size:20px;font-weight:bolder; }
.login-desc { color:#999;font-size:13px; }
.login-copyright { position:fixed;width:100%;text-align:center;left: 50%;transform: translateX(-50%);bottom:10px; }
/* 메인화면 */


/* Component */
.navbar-back-button { float:left;padding:11px;display:inline-block; }
.clickable { cursor:pointer; }


.btable {
	position:relative;margin:0px auto;border-radius:10px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c4c4c+0,595959+12,666666+26,474747+39,2c2c2c+50,4c4c4c+76,3c3c3c+91,2b2b2b+100 */
	background: #4c4c4c; /* Old browsers */
	background: -moz-linear-gradient(left,  #4c4c4c 0%, #595959 12%, #666666 26%, #474747 39%, #404040 50%, #4c4c4c 76%, #3c3c3c 91%, #2b2b2b 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #4c4c4c 0%,#595959 12%,#666666 26%,#474747 39%,#404040 50%,#4c4c4c 76%,#3c3c3c 91%,#2b2b2b 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #4c4c4c 0%,#595959 12%,#666666 26%,#474747 39%,#404040 50%,#4c4c4c 76%,#3c3c3c 91%,#2b2b2b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#2b2b2b',GradientType=1 ); /* IE6-9 */
}
.bcushion { position:relative;margin:0;background:#608bff;}


.bfloor {
	position:relative;
	text-align:center;

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#608bff+0,547ef8+44,3f6de8+100 */
	background: #608bff; /* Old browsers */
	background: -moz-linear-gradient(top, #608bff 0%, #547ef8 44%, #3f6de8 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #608bff 0%,#547ef8 44%,#3f6de8 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #608bff 0%,#547ef8 44%,#3f6de8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#608bff', endColorstr='#3f6de8',GradientType=0 ); /* IE6-9 */

	/* 좌상단, 우하단 양쪽다 shadow를 주기 위해 두개의 그림자 설정. 설정방법 참고) https://msdn.microsoft.com/ko-kr/library/gg589484(v=vs.85).aspx */
	/* box-shadow:5px 5px 5px 0px #38309E inset, -5px -5px 5px 0px #38309E inset; */
	box-shadow:5px 5px 10px 0px #38309E66 inset, -5px -5px 10px 0px #38309E66 inset;
}
.btable > .diamond {
	position:absolute;width:10px;height:10px;border-radius:5px;background:#ddd;
	box-shadow:1px 1px 1px 0px #444444 inset;
}
.btable .ball {
	position:absolute;
	z-index:100;
	cursor:pointer;
	font-size:12px;
	font-weight:900;
	text-align:center;
	box-shadow:3px 3px 8px 0px #333c;
}

.iball { cursor:default !important; }

/* wball : 수구, iwball : 가상수구 */
.btable .wball,.btable .iwball {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fefef8+0,fefee1+61,cbbda3+100 */
	background: #fefef8; /* Old browsers */
	background: -moz-linear-gradient(top, #fefef8 0%, #fefee1 61%, #cbbda3 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #fefef8 0%,#fefee1 61%,#cbbda3 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #fefef8 0%,#fefee1 61%,#cbbda3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefef8', endColorstr='#cbbda3',GradientType=0 ); /* IE6-9 */
}

/* yball : 노란공, ywball : 가상노란공 */
.btable .yball, .btable .iyball {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fff101+0,feba00+61,e28d18+100 */
	background: #fff101; /* Old browsers */
	background: -moz-linear-gradient(top, #fff101 0%, #feba00 61%, #e28d18 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #fff101 0%,#feba00 61%,#e28d18 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #fff101 0%,#feba00 61%,#e28d18 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff101', endColorstr='#e28d18',GradientType=0 ); /* IE6-9 */
}

/* rball : 빨간공 */
.btable .rball, .btable .irball{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fe2504+0,e11f00+61,9f1300+100 */
	background: #fe2504; /* Old browsers */
	background: -moz-linear-gradient(top, #fe2504 0%, #e11f00 61%, #9f1300 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #fe2504 0%,#e11f00 61%,#9f1300 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #fe2504 0%,#e11f00 61%,#9f1300 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fe2504', endColorstr='#9f1300',GradientType=0 ); /* IE6-9 */
	
	color:#ddda !important;
}

/* 경로 설정시 가상구 */
.btable .iball {
	display:none;
	opacity:0.5 !important;
	box-shadow:none !important;
}
.btable .wpath {
	display:block;
}
.btable .opath {
	display:block;
}


/* Component */




/************ 여기부터 공통 ************/ 
/* width */
.w100 { width:100%; }
/* width */

/* color */
.corange { color: #f4a742; }
.cred1 { color:#e12222; }
.cblue1 { color:#1a4384; }
.cgreen1 { color:#368232; }
.c333 { color: #333; }
.c666 { color: #666; }
.c999 { color: #999; }
.cbbb { color: #bbb; }
.ceee { color: #eee; }
/* color */

/* Font-Size */
.f10 { font-size: 10px; }
.f11 { font-size: 11px; }
.f12 { font-size: 12px; }
.f13 { font-size: 13px; }
.f14 { font-size: 14px; }
.f15 { font-size: 15px; }
.f16 { font-size: 16px; }
.f17 { font-size: 17px; }
.f18 { font-size: 18px; }
/* Font-Size */

/* Text-Align */
.tc { text-align:center; }
.tl { text-align:left; }
.tr { text-align:right; }
/* Text-Align */

/* Margin & Padding */
.mt0 { margin-top: 0px; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mt30 { margin-top: 30px; }
.mt40 { margin-top: 40px; }
.mt50 { margin-top: 50px; }
.mt60 { margin-top: 60px; }
.mt70 { margin-top: 70px; }
.mt80 { margin-top: 80px; }
.mt90 { margin-top: 90px; }
.mt100 { margin-top: 100px; }
.mt110 { margin-top: 110px; }
.mt120 { margin-top: 120px; }
.mt130 { margin-top: 130px; }

.mb0 { margin-bottom: 0px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px; }
.mb60 { margin-bottom: 60px; }
.mb70 { margin-bottom: 70px; }
.mb80 { margin-bottom: 80px; }
.mb90 { margin-bottom: 90px; }
.mb100 { margin-bottom: 100px; }

.ml10 { margin-left: 10px; }
.ml20 { margin-left: 20px; }
.ml30 { margin-left: 30px; }
.ml40 { margin-left: 40px; }

.mr4 { margin-right: 4px; }
.mr10 { margin-right: 10px; }
.mr20 { margin-right: 20px; }
.mr30 { margin-right: 30px; }
.mr40 { margin-right: 40px; }

.pt0 { padding-top: 0px; }
.pt10 { padding-top: 10px; }
.pt20 { padding-top: 20px; }
.pt30 { padding-top: 30px; }
.pt40 { padding-top: 40px; }
.pt50 { padding-top: 50px; }
.pt60 { padding-top: 60px; }
.pt70 { padding-top: 70px; }
.pt80 { padding-top: 80px; }
.pt90 { padding-top: 90px; }
.pt100 { padding-top: 100px; }
.pb0 { padding-bottom: 0px; }
.pb10 { padding-bottom: 10px; }
.pb20 { padding-bottom: 20px; }
.pb30 { padding-bottom: 30px; }
.pb40 { padding-bottom: 40px; }
.pb60 { padding-bottom: 60px; }
.pb70 { padding-bottom: 70px; }
.pb80 { padding-bottom: 80px; }
.pb90 { padding-bottom: 90px; }
.pb100 { padding-bottom: 100px; }
.pb110 { padding-bottom: 110px; }
.pb120 { padding-bottom: 120px; }
.pb130 { padding-bottom: 130px; }
.pb140 { padding-bottom: 140px; }
.pb150 { padding-bottom: 150px; }
.pb160 { padding-bottom: 160px; }
.pb170 { padding-bottom: 170px; }
.pb180 { padding-bottom: 180px; }
.pb190 { padding-bottom: 190px; }
.pl0 { padding-left: 0px; }
.pl10 { padding-left: 10px; }
.pl20 { padding-left: 20px; }
.pl30 { padding-left: 30px; }
.pl40 { padding-left: 40px; }
.pl50 { padding-left: 50px; }
.pl60 { padding-left: 60px; }
.pl70 { padding-left: 70px; }
.pl80 { padding-left: 80px; }
.pl90 { padding-left: 90px; }
.pl100 { padding-left: 100px; }
.pr0 { padding-right: 0px; }
.pr10 { padding-right: 10px; }
.pr20 { padding-right: 20px; }
.pr30 { padding-right: 30px; }
.pr40 { padding-right: 40px; }
.pr50 { padding-right: 50px; }
.pr60 { padding-right: 60px; }
.pr70 { padding-right: 70px; }
.pr80 { padding-right: 80px; }
.pr90 { padding-right: 90px; }
.pr100 { padding-right: 100px; }
/* Margin & Padding */