@charset "UTF-8";

section {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

/***** jquery mobile 보정 *************/
div.ui-page { height:100%; }
.ui-mobile label { display:inline-block; margin:0; font-weight:inherit; font-size:inherit; }
.ui-page-theme-a { background-color:#fff; }
.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper { text-shadow:none; }
/**************************/

/***** mobile *************/
a:focus,input:focus,option:focus,select:focus { outline:none }
/**************************/

input[type=password] { font-family:none !important }

.flex  { display:flex }
.space-between { justify-content: space-between; }

.float_left  { float:left  }
.float_right { float:right }

.left   { text-align:left !important }
.right  { text-align:right !important }
.center { text-align:center !important}
.nowrap { white-space:nowrap !important }
.clear  { clear:both !important }
.fixed  { position:fixed !important }

.collapse   { display:none; visibility:hidden  }
.collapse.in{ display:block; visibility:visible }

.underline { text-decoration:underline !important; }

.line2_cut { overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; display:-webkit-box !important; -webkit-line-clamp:2; -webkit-box-orient: vertical; }
.line3_cut { overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; display:-webkit-box !important; -webkit-line-clamp:3; -webkit-box-orient: vertical; }
.line4_cut { overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; display:-webkit-box !important; -webkit-line-clamp:4; -webkit-box-orient: vertical; }
.line5_cut { overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; display:-webkit-box !important; -webkit-line-clamp:5; -webkit-box-orient: vertical; }
.text_cut  { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.trigger{ cursor:pointer; }

.spot{ width:6px; height:6px; background-color:#d3d3d3; border-radius:50%; display:inline-block; margin:0 6px 2px 0; }
.spot_indent{ width:12px; height:44px; display:inline-block; float:left; }


.va_text-top { vertical-align: text-top !important; }
.va_top      { vertical-align : top     !important; }
.va_middle   { vertical-align : middle  !important; }


/* profile */
div.profile { display:flex; cursor:pointer; white-space: nowrap }
div.profile span { vertical-align: top; line-height:32px; padding-left:8px }


/* body 하위 스크롤 디자인 */
body *::-webkit-scrollbar { width:8px; height:8px; background-color:transparent; }
body *::-webkit-scrollbar-thumb { background-color:#fff; border-radius:5px; border:2px solid #fff }

/* 레이어 팝업 */
.WbLayer_popup { width:95%; max-width:700px; display:none }
.popup_wrap{ width:100%; background-color:#ffffff; max-height:700px; overflow:auto; }
.popup_wrap .inner_top{ background-color:#67b00b; padding:40px 30px 40px 30px; text-align:left; color:#ffffff; }
.popup_wrap .inner_top li:first-child{ font-size:24px; text-align:center; line-height:24px; }
.popup_wrap .inner_top li:last-child{ letter-spacing:-1px; margin-top:20px; }
.popup_wrap .inner_cont{ width:100%; padding:40px 30px 30px 30px; box-sizing:border-box; border-bottom:1px solid #dddddd; text-align:left; }
.popup_wrap .inner_cont .tit{ font-size:15px; color:#000000; }
.popup_wrap .btn_wrap{ padding:30px 0 30px 0; }

/* 이미지 준비중 */
div.img_not_ready { margin:30px auto; width:300px; height:120px; line-height:120px; background-color:#efefef; }


/* loading */
#loading { 
	display:none;
	position:fixed; z-index:99999; left:0px; top:0px; width:100%; height:100%; text-align:center;
	background-color:rgba(255, 255, 255, 0.1);
}
#loading img { width:100px; margin-top:300px; }
#loading_msg {
	display:block; color:#fff;
}

.vcenter { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center;  -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }

/* 메인 상단 */
.main_title label.name { padding-left:36px; text-align:center; font-weight:bold }

/* 불릿 기호 리스트 */
ul.bullet li  { padding-left:15px; text-indent:-15px; vertical-align: top }
ul.bullet li * { text-indent:0px }
ul.bullet span{ display:inline-block; width:5px; height:5px; border-radius:50%; background-color:#d6d6d6; margin-right:10px; margin-bottom:4px }

/* 불릿 기호 라벨 리스트 */
ul.bullet_label li    { float:left; width:100%; height:30px; line-height:15px; color:#666666; word-break:break-all }
ul.bullet_label label { float:left; width:38%; display:inline-block; font-size:15px; color:#000000; font-weight:600; }
ul.bullet_label label span { display:inline-block; width:5px; height:5px; background-color:#d6d6d6; border-radius:50%; margin:0 8px 3px 0; }
ul.bullet_label div   { display:inline-block; width:62%; float:right; }

ul.bullet_label.harf li { width:50%; }
@media screen and (max-width: 767px) {
	ul.bullet_label.harf li { width:100%; }
}


/* toggle */
label.toggle { width:100%; position: relative; display:inline-block; margin-bottom: 4px; padding-right: 48px; height: 13px; line-height:24px; cursor: pointer; clear:both; }
label.toggle input { position: absolute; left: -9999px; margin: 4px 0 0; line-height: normal; box-sizing: border-box; padding: 0; }
label.toggle i { background:var(--color-G3); position: absolute; content:''; top: 0px; right: 0px;   float:right; display: block; width: 40px; height:24px; border-radius:24px; }
label.toggle input:checked + i { background-color:var(--color-B5); }
label.toggle i:before { background-color: #fff; position: absolute; content:''; z-index: 1; top:4px; right: 20px; display: block; width: 16px; height: 16px; border-radius: 50%; opacity: 1; transition: right .2s; -o-transition: right .2s; -ms-transition: right .2s; -moz-transition: right .2s; -webkit-transition: right .2s; }
label.toggle input:checked + i:before { right: 4px; }
label.toggle i:after { position: absolute; top: 2px; right: 8px; left: 8px; font-style: normal; font-size: 9px; line-height: 13px; font-weight: 700; text-align: left; }
label.toggle input:checked + i:after { content: attr(data-swchon-text); text-align: right; }

label.toggle.small {  margin-bottom:0px; padding-right:34px; }
label.toggle.small input {  margin: 4px 0 0;  }
label.toggle.small i { width: 27px; height:16px; border-radius:16px; margin-top: 5px; }
label.toggle.small i:before { top: 3px; right: 14px; width: 10px; height: 10px;  }
label.toggle.small input:checked + i:before { right: 4px; }
label.toggle.small i:after { top: 2px; right: 8px; left: 8px; }

/* 팁 목록 */
ul.tip li { color:#111; padding-top:15px; text-align:left; font-size:15px; padding-left:10px; line-height:19px }
ul.tip li:before { content:'-'; display:inline-block; margin-right:5px; margin-left:-10px; }