* {
  -webkit-box-sizing:border-box;
   -moz-box-sizing:border-box;
   box-sizing:border-box; 
}

/* San Francisco font family */
/* 
* Ultra Light
@font-face {
  font-family: "San Francisco";
  font-weight: 100;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-ultralight-webfont.woff");
}

* Thin
@font-face {
  font-family: "San Francisco";
  font-weight: 200;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff");
}

* Regular
@font-face {
  font-family: "San Francisco";
  font-weight: 400;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}

* Medium
@font-face {
  font-family: "San Francisco";
  font-weight: 500;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-medium-webfont.woff");
}

* Semi Bold
@font-face {
  font-family: "San Francisco";
  font-weight: 600;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.woff");
}

* Bold 
@font-face {
  font-family: "San Francisco";
  font-weight: 700;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff");
} */


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, 
em, img, ins, kbd, q, s, samp, small, strike, strong, 
sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, table, 
caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, figure,  
figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; border-spacing: 0;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
audio[controls], canvas, video {display:inline-block; *display:inline; *zoom:1;}
audio:not([controls]) {display:none; height:0;}
html {-ms-text-size-adjust:none; -webkit-text-size-adjust:none;}
label, input, button, a, span {line-height:1.6;}
body, button {font-size:13px; line-height:1.6; font-family: /*"San Francisco",*/Malgun Gothic,"맑은 고딕", "돋움", Dotum, Helvetica, Verdana, Arial, sans-serif; color:#555;}
hr {display:none; height:0; -moz-box-sizing:content-box; box-sizing:content-box;}
a, a:hover {text-decoration:none; color:#333;}
a:active, a:hover, button:active, button:hover {outline:0 none;}
em, address {font-style:normal;}			
acronym, abbr {cursor:help;}
abbr[title] {border-bottom:1px dotted;}
ul, li, ol {list-style:none; list-style-image:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:'' ;content:none;}
img {border:0; vertical-align:top; -ms-interpolation-mode:bicubic;}
figure img {display:block;}
html, body {width:100%; height:100%; background:/*#F2F2F2*/ #fff; overflow:hidden}
/*p {margin:0 0 10px 0;}*/

/*링크 점선 없애기*/
*:focus { outline: none; }
a { outline: none; select-dummy: expression(this.hideFocus=true); }


/* scroll bar */
::-webkit-scrollbar {
     width: 12px;
	 height: 12px;
	 border-radius: 250px;
  }
::-webkit-scrollbar-thumb {
	background: rgba(109,119,140,.3);
	cursor: default;
	border-radius: 250px;
    background-clip: padding-box;
    border: 2px solid transparent;
  }
   ::-webkit-scrollbar-thumb:hover{
   background: rgba(0,0,0,.7);
    background-clip: padding-box;
    border: 2px solid transparent;
   }
::-webkit-scrollbar-track {
	opacity: 0.3;
  	cursor: default;
	border-radius: 250px;
  } 
  
  
  /*
  ::-webkit-scrollbar {
    width: 16px;
  }
  ::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.2);
    border-radius: 10px;
    background-clip: padding-box;
    border: 4px solid transparent;
  }
  ::-webkit-scrollbar-thumb:hover{
    background: rgba(0,0,0,.7);
    border-radius: 10px;
    background-clip: padding-box;
    border: 4px solid transparent;
}
  ::-webkit-scrollbar-track {
    background: rgba(255,255,255,.7);
    border-left:1px solid #ccc;
    box-shadow: inset 0px 0px 5px white;
  }*/
  
#content{overflow:hidden;}
.box{ border:1px solid #ddd}
.box-dot{ border:3px dashed #ddd}
.box-dot:hover{ background:#F5F6FA}

/* input */
input:read-only, .textbox-readonly{ /*border:none;*/ border:1px solid #EDEDED; background:#f8f9fd;}
.textbox .textbox-text{font-family: Malgun Gothic,"맑은 고딕", "돋움", Dotum, Helvetica, Verdana, Arial, sans-serif;}
.textbox-focused {
  border-color: #F6820C;
  -moz-box-shadow: 0 0 3px 0 #F6820C;
  -webkit-box-shadow: 0 0 0px 0 #ddd;
  box-shadow: 0 0 0px 0 #ddd;
  text-decoration:none;transition:.2s ease-in-out;-webkit-transition:.2s ease-in-out;-moz-transition:.2s ease-in-out;-ms-transition:.2s ease-in-out;-o-transition:.2s ease-in-out
}

.border-top{ border-top:1px solid #EDEDED; padding-top:10px}
.shadow{box-shadow: 0 3px 5px rgba(0,0,0,0.15);} 

/*font*/
.font-primary {color:#F6820C !important }
.font-point {color:#006FFF !important }
.font-help { color:#00891a !important; display:inline-block; font-size:13px;}
.font-sm { opacity:.5; font-size:11px }
/*.font-success {color:#40C151 !important }*/
.font-success {color:#006fff !important }
.font-info {color:#40B7A6 !important }
.font-danger {color:#FF6868 !important }
.font-gray {color:#888888 !important }
.font-black {color:#222 !important }
.font-red {color:#f71307 !important}
.bold{ font-weight:bold}
/*font size*/
.size10{ font-size: 10px !important; }
.size11{ font-size: 11px !important; }
.size12{ font-size: 12px !important; }
.size13{ font-size: 13px !important; }
.size14{ font-size: 14px !important; }
.size16{ font-size: 16px !important; }
.size18{ font-size: 18px !important; }
.size20{ font-size: 20px !important; }
.size24{ font-size: 24px !important; }
.size30{ font-size: 30px !important; }
.size36{ font-size: 36px !important; }
.size48{ font-size: 48px !important; }
.size60{ font-size: 60px !important; }
.size72{ font-size: 72px !important; }
.size90{ font-size: 90px !important; }

/*가로사이즈 %*/
.w5 {width:5% !important;}
.w10 {width:10% !important;}
.w15 {width:15% !important;}
.w20 {width:20% !important;}
.w25 {width:25% !important;}
.w30 {width:30% !important;}
.w33 {width:33.333333334% !important;}
.w35 {width:35% !important;}
.w40 {width:40% !important;}
.w45 {width:45% !important;}
.w50 {width:50% !important;}
.w55 {width:55% !important;}
.w60 {width:60% !important;}
.w65 {width:65% !important;}
.w70 {width:70% !important;}
.w75 {width:75% !important;}
.w80 {width:80% !important;}
.w85 {width:85% !important;}
.w90 {width:90% !important;}
.w95 {width:95% !important;}
.w100 {width:100% !important;}

/*가로사이즈 px*/
.fix{ width:80px !important}
.fix1{ width:90px !important}
.fix2{ width:100px !important}
.fix3{ width:135px !important}
.fix4{ width:150px !important}
.fix5{ width:200px !important}
.fix6{ width:250px !important}
.fix7{ width:300px !important}
.fix8{ width:350px !important}
.fix9{ width:400px !important}
.fix10{ width:450px !important}

.fix50{width:50px}
.fix60{min-width:60px}
.fix70{width:70px}
.fix80{width:80px}
.fix90{width:90px}
.fix100{width:100px}
.fix105{}
.fix110{}
.fix115{}
.fix120{}


/*패딩*/
.pTB{ padding: 15px 0}
.p0{ padding:0 !important}
.p5{ padding:5px !important}
.p10{ padding:10px !important}
.p15{ padding:15px !important}
.p20{ padding:20px !important}
.p25{ padding:25px !important}
.p30{ padding:30px !important}
.p35{ padding:35px !important}
.p40{ padding:40px !important}
.p45{ padding:45px !important}
.p50{ padding:50px !important}

.pT5{ padding-top:5px !important}
.pT10{ padding-top:10px !important}
.pT15{ padding-top:15px !important}
.pT20{ padding-top:20px !important}
.pT25{ padding-top:25px !important}
.pT30{ padding-top:30px !important}
.pT35{ padding-top:35px !important}
.pT40{ padding-top:40px !important}
.pT45{ padding-top:45px !important}
.pT50{ padding-top:50px !important}

.pL5{ padding-left:5px !important}
.pL10{ padding-left:10px !important}
.pL15{ padding-left:15px !important}
.pL20{ padding-left:20px !important}
.pL25{ padding-left:25px !important}
.pL30{ padding-left:30px !important}
.pL35{ padding-left:35px !important}
.pL40{ padding-left:40px !important}
.pL45{ padding-left:45px !important}
.pL50{ padding-left:50px !important}
.pL100{ padding-left:100px !important}

.pR5{ padding-right:5px !important}
.pR10{ padding-right:10px !important}
.pR15{ padding-right:15px !important}
.pR20{ padding-right:20px !important}
.pR25{ padding-right:25px !important}
.pR30{ padding-right:30px !important}
.pR35{ padding-right:35px !important}
.pR40{ padding-right:40px !important}
.pR45{ padding-right:45px !important}
.pR50{ padding-right:50px !important}

.pB5{ padding-bottom:5px !important}
.pB10{ padding-bottom:10px !important}
.pB15{ padding-bottom:15px !important}
.pB20{ padding-bottom:20px !important}
.pB25{ padding-bottom:25px !important}
.pB30{ padding-bottom:30px !important}
.pB35{ padding-bottom:35px !important}
.pB40{ padding-bottom:40px !important}
.pB45{ padding-bottom:45px !important}
.pB50{ padding-bottom:50px !important}


.pLR{ padding:0 !important}
.pLR5{ padding:0 5px !important}
.pLR10{ padding:0 10px !important}
.pLR15{ padding:0 15px !important}
.pLR20{ padding:0 20px !important}
.pLR25{ padding:0 25px !important}
.pLR30{ padding:0 30px !important}
.pLR35{ padding:0 35px !important}
.pLR40{ padding:0 40px !important}
.pLR45{ padding:0 45px !important}
.pLR50{ padding:0 50px !important}

/*마진*/
.m-auto{ margin-left:auto; margin-right: auto}
.m0{ margin:0 !important}
.m5{ margin:5px !important}
.m10{ margin:10px !important}
.m15{ margin:15px !important}
.m20{ margin:20px !important}
.m25{ margin:25px !important}
.m30{ margin:30px !important}
.m35{ margin:35px !important}
.m40{ margin:40px !important}
.m45{ margin:45px !important}
.m50{ margin:50px !important}
.m100{ margin:100px !important}

.mTarea{ margin-top:20px !important}
.mT0{ margin-top:0px !important}
.mT5{ margin-top:5px !important}
.mT10{ margin-top:10px !important}
.mT15{ margin-top:15px !important}
.mT20{ margin-top:20px !important}
.mT25{ margin-top:25px !important}
.mT30{ margin-top:30px !important}
.mT35{ margin-top:35px !important}
.mT40{ margin-top:40px !important}
.mT45{ margin-top:45px !important}
.mT50{ margin-top:50px !important}
.mT60{ margin-top:60px !important}
.mT65{ margin-top:65px !important}

.mLR{ margin-left:5px; margin-right: 5px}
.mL0{ margin-left:0px !important}
.mL5{ margin-left:5px !important}
.mL10{ margin-left:10px !important}
.mL15{ margin-left:15px !important}
.mL20{ margin-left:20px !important}
.mL25{ margin-left:25px !important}
.mL30{ margin-left:30px !important}
.mL35{ margin-left:35px !important}
.mL40{ margin-left:40px !important}
.mL45{ margin-left:45px !important}
.mL50{ margin-left:50px !important}
.mL55{ margin-left:55px !important}
.mL60{ margin-left:60px !important}
.mL65{ margin-left:65px !important}
.mL70{ margin-left:70px !important}
.mL75{ margin-left:75px !important}
.mL80{ margin-left:80px !important}
.mL85{ margin-left:85px !important}
.mL90{ margin-left:90px !important}
.mL95{ margin-left:95px !important}
.mL100{ margin-left:100px !important}

.mR0{ margin-right:0px !important}
.mR5{ margin-right:5px !important}
.mR10{ margin-right:10px !important}
.mR15{ margin-right:15px !important}
.mR20{ margin-right:20px !important}
.mR25{ margin-right:25px !important}
.mR30{ margin-right:30px !important}
.mR35{ margin-right:35px !important}
.mR40{ margin-right:40px !important}
.mR45{ margin-right:45px !important}
.mR50{ margin-right:50px !important}

.mB0{ margin-bottom:0px !important}
.mB5{ margin-bottom:5px !important}
.mB10{ margin-bottom:10px !important}
.mB15{ margin-bottom:15px !important}
.mB20{ margin-bottom:20px !important}
.mB25{ margin-bottom:25px !important}
.mB30{ margin-bottom:30px !important}
.mB35{ margin-bottom:35px !important}
.mB40{ margin-bottom:40px !important}
.mB45{ margin-bottom:45px !important}
.mB50{ margin-bottom:50px !important}

.mTB5{ margin:5px 0 !important}
.mTB10{ margin:10px 0 !important}
.mTB15{ margin:15px 0 !important}
.mTB20{ margin:20px 0 !important}
.mTB25{ margin:25px 0 !important}
.mTB30{ margin:30px 0 !important}
.mTB35{ margin:35px 0 !important}
.mTB40{ margin:40px 0 !important}
.mTB45{ margin:45px 0 !important}
.mTB50{ margin:50px 0 !important}

/*border*/
.bR-none{ border-right:none}
/************** align **************/
.f0:after { content:""; display: block; clear:both; overflow:hidden}
.fl { float:left}
.fr { float:right}

.clear:after { content:""; display: block; clear:both; overflow:hidden}
.f-both:after { content:""; display: block; clear:both; overflow:hidden}
.f-both .fl{ float: left; padding-right: 10px; }
.f-both .fr{ float: right; padding-left: 10px; }

.btn-cen{ text-align: center} 
.btn-cen.two .button{ margin: 0 5px; } 

.left{ text-align:left}
.center{ text-align:center}
.right{ text-align:right}

.inline-group{ display:inline-block}
.inline-block{display:inline-block}

/*button*/
.l-btn-icon-left .l-btn-icon { left: 7px;}
.l-btn{ border:1px solid #CBCBCB}
.l-btn:hover{ background:#fff; border:1px solid #6F7780}
.l-btn.l-btn-plain{ border:0px solid #fff}
.l-btn.l-btn-plain:hover{ border:1px solid #fff}
.l-btn-text{ font-size:13px;}
.searchBox-wrap .l-btn-text{min-width:35px;}

.sm .l-btn-text{ font-size:11px; line-height:24px; }
.lg{ padding:1px 5px; min-width:55px;}
.xl{ padding:2px 5px; font-weight:bold; min-width:60px;}

.primary{ background:#F6820C; border:1px solid #e87908; color:#fff; }
.primary:hover{ background:#E87B0C; border:1px solid #CF6800; color:#fff; }
.line-primary{ background:#fff;  border:1px solid #F6820C; color:#F6820C;}
.line-primary:hover{ background:#fff;  border:1px solid #E87B0C; color:#E87B0C;}
.point { background:#4383de;  border:1px solid #2C6FCF; color:#fff;}
.point:hover{ background:#3070CB;  border:1px solid #1F5EBA; color:#fff;}
.gray{background:#F8F8F8; border:1px solid #ddd}
.gray:hover{background:#eee; border:1px solid #ddd}
.darkgray{background:#8991A3; border:1px solid #727B90; color:#fff;}
.darkgray:hover{background:#6D778C; border:1px solid #575E6E; color:#fff;}
.radius{ border-radius:250px}

.l-btn-selected, .l-btn-selected:hover {  background: #fff; border:1px solid #F6820C;  filter: none; color:#F6820C}

.radius{ border-radius:250px}
.easyui-linkbutton.plan{ background:none; border:none}
/*switchbutton*/
.switchbutton { background: #d9d9d9; border-radius: 2px;}
.switchbutton-on,
.switchbutton-off,
.switchbutton-handle { font-size: 13px; line-height:30px; border-radius: 2px;}
.switchbutton-on { background: #F6820C; color: #fff;}
.switchbutton-off { background-color: #ddd; color: #fff;}

.button-both .switchbutton, .button-both .switchbutton-off  { background: #4383de;  background-color: #4383de;}

/*switchbutton small*/
.switchbutton-sm .switchbutton{ height:24px !important; }
.switchbutton-sm .switchbutton-on,
.switchbutton-sm .switchbutton-off,
.switchbutton-sm .switchbutton-handle { line-height:23px;}

.buttontoggle{ position:absolute; top:8px; left:71px}/* 토글 버튼 */

/*checkBox*/
.radiobutton, .checkbox, .textbox-label{ cursor:pointer}

.radiobutton{ background:#fff; border: 1px solid #CBCBCB;}
.radiobutton-checked{ /*border: 1px solid #F6820C;*/}
.radiobutton-inner{ background: #F6820C;}

.checkbox { background:#fff; border: 1px solid #CBCBCB;}
.checkbox.checkbox-checked { background: #F6820C; border: 1px solid #F6820C;}


/* label size */
.label-50 .textbox-label{width:50px; /*text-align:right !important*/}
.label-60 .textbox-label{width:60px}
.label-70 .textbox-label{width:70px}
.label-80 .textbox-label{width:80px}
.label-90 .textbox-label{width:90px}
.label-100 .textbox-label{width:100px}
.label-110 .textbox-label{width:110px}
.label-120 .textbox-label{width:120px}
.label-130 .textbox-label{width:130px}
.label-140 .textbox-label{width:140px}
.label-150 .textbox-label{width:150px}
.label-160 .textbox-label{width:160px}
.label-170 .textbox-label{width:170px}
.label-180 .textbox-label{width:180px}
.label-190 .textbox-label{width:190px}
.label-200 .textbox-label{width:200px}

/*tooltip*/
.tooltip{ padding:0 5px; border-radius:5px; box-shadow: 0 3px 6px 0 rgba(0,0,0,.12);}
.tooltip-content { font-size: 12px !important; padding:5px;}
.tooltip-content h3{ font-size: 13px; margin-bottom:5px}
.bar-lg{width:1px; height:20px; display:inline-block; background:#E5E6EB; border-left:1px solid #E5E6EB; margin:0px 10px; line-height:22px; position:relative; top:7px;}

/*첨부파일*/
.atch-fle-5{width:5%}
.atch-fle-15{width:15%}
.atch-fle-45{width:45%}

.atch-fle-divH{margin-bottom:-1px;border-left:1px solid #ddd;}
.atch-fle-divB{ border-left:1px solid #ddd; border-bottom:1px solid #ddd;}

.atch-fle-head{ border:1px solid #ddd; border-left:none}
.atch-fle-body{ background-color:#FFFFFF; border:1px solid #ddd; border-left:none;}

.display-btn { display: none }