@charset "utf-8";
/* -------------------------------------------------------------  
	- 사용 : 원톡 이용료 결제 카드방식 (/wontalk/member/join_kind.jsp)
 ------------------------------------------------------------- */

/* -------------------------------------------------------------  
	common
 ------------------------------------------------------------- */
/* .trans {transition: background .1s ease-in-out,color .1s ease-in-out;} */
/* .trans {transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out} */
.rotate { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);  }

*, ::after, ::before {
    box-sizing: border-box;
}


p { margin-top: 0; /*margin-bottom: 1rem; */ display: block; }
.h4, h4 { font-size: 1.2rem; }
.inline { display: inline-block;}
/* -------------------------------------------------------------  
	button 버튼
 ------------------------------------------------------------- */
.btn_group:before { clear:both; overflow: hidden;}
.btn_group {
	box-sizing: border-box;
	display: inline-block;
 *display:inline;
 *zoom:1;
	text-align: center;
/* 	margin:10px; */
	width:100%;
	overflow: hidden;
	margin-top:20px;
}

.btn { display:inline-block;-webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); padding: 12px 30px; /*     font-size: .81rem; */ -webkit-transition: color .05s ease-in-out,background-color .05s ease-in-out,border-color .05s ease-in-out,-webkit-box-shadow .05s ease-in-out; transition: color .05s ease-in-out,background-color .05s ease-in-out,border-color .05s ease-in-out,-webkit-box-shadow .05s ease-in-out; -o-transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out; /*     margin: 2px; */ border: 0; -webkit-border-radius: .125rem; border-radius: .125rem; cursor: pointer; text-transform: uppercase; white-space: normal; word-wrap: break-word; color: #fff; }
a.btn:hover{ z-index:1000; box-shadow:rgba(0, 0, 0, 0.3) 3px 3px 16px 3px; -webkit-box-shadow:rgba(0, 0, 0, 0.3) 3px 3px 16px 3px; -moz-box-shadow:rgba(0, 0, 0, 0.3) 3px 3px 16px 3px; }
.btn-info { background-color: #33b5e5!important; color: #fff!important; }
.btn .img01 {height:18px; position: absolute; } /*pr30*/

.btn.xs { padding: 3px 7px; font-size: 13px;}
.btn.s { padding: 5px 15px; }
.btn.m { padding: 0 15px; font-size: 13px; line-height: 30px;} 
.btn.l {padding: 13px 72px; font-size: 13px; line-height: 35px;}
.btn.xl { padding:  0 25px; min-width:80px;   line-height: 50px; height:50px; } /* 등록버튼 */

.gray01 { color:#333;}
.btn.gray01 { background-color: #333; border: 1px solid #333; color:#fff; } /* 흰색바탕 네이비 글씨 */
.btn.gray01.outline { background-color: #fff; border: 1px solid #333; color:#000; } /* 흰색바탕 네이비 글씨 */

.gray02 { color:#888; }
.btn.gray02 { background-color: #888; border: 1px solid #888; color:#fff; } /* 흰색바탕 네이비 글씨 */
.btn.gray02.outline { background-color: #fff; border: 1px solid #888; color:#000; } /* 흰색바탕 네이비 글씨 */

.btn.xl.gray01:hover{text-decoration: none; border:1px solid #111;} 
/* -------------------------------------------------------------  
	boot 카드스타일
	  사용 : 원톡 이용료 결제 카드방식 (/wontalk/member/join_kind.jsp)
 ------------------------------------------------------------- */
.row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
.row .cal2{ margin-bottom: 1.5rem!important; flex: 0 0 50%; max-width: 50%; position: relative; width: 100%; padding-right: 15px; padding-left: 15px; float: left;}
.card { -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12); border: 0; font-weight: 400; position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); border-radius: .25rem; }
.card-body { padding-top: 1.5rem; padding-bottom: 1.5rem; -webkit-border-radius: 0!important; border-radius: 0!important; text-align: center; display: block; }
.card-body { -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 1.25rem; }
.card-header { padding: 20px; margin-bottom: 30px; background-color: #f3f3f3; border-bottom: 1px solid #f3f3f3; font-size: 18px; font-weight: 700; line-height: 1.2; text-align: center; }
.card .card-body .card-text { color: #747373; font-size: .9rem; font-weight: 400;  }

.view { position: relative; overflow: hidden; cursor: default; }
.view img, .view video { position: relative; display: block; }
.card-img-top { width: 100%; border-top-left-radius: calc(.25rem - 1px); border-top-right-radius: calc(.25rem - 1px); }

.overlay .mask { opacity: 0; -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }
.view .mask { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; width: 100%; height: 100%; background-attachment: fixed; }
.waves-effect { position: relative; cursor: pointer; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.rgba-white-slight, .rgba-white-slight:after { background-color: rgba(255,255,255,.1); }

@media screen and (max-width:720px){
	.row .cal2 {  width:100%; max-width:100%; flex: none;}
}	

/* ---------------------------------------------------------------------------------- 
	 기본 css
 ---------------------------------------------------------------------------------- */
.w200 { width:200px !important;}

.w20p { width:20% !important;}
.w80p { width:80% !important;}

.pl20 {padding-left:20px !important;}
.pr20 {padding-right:20px !important;}
.pr25 {padding-right:25px !important;}

.mt3 {margin-top:3px !important;}
.ml5 {margin-left:5px !important;}
.ml10 {margin-left:10px !important;}



.bg_white { background-color: #fff;}
.bg_black01 { background-color: #23272b; color:#fff;}
.bg_org01 { background-color: #23272b; color:#fff;}

.bg_gray01 { background-color: #555;}
.bg_gray02 { background-color: #ededed;}
.bg_gray03 { background-color: #666;}
.bg_gray04 { background-color: #f7f7f7;}
.bg_sky01 { background-color:#2ca8ff !important; border:1px solid #2ca8ff; color:#fff !important;}
.bg_sky02 { background-color:#e3f2f9 !important; border:1px solid #e3f2f9; color:#fff !important;}
.bg_pink01 { background-color:#ffe2e0 !important; border:1px solid #ffe2e0; color:#fff !important;}
.bg_navy01 {background-color:#003F66; color:#fff; }

.bg_red01 { background-color:#E94C40 !important; border:1px solid #E94C40; color:#fff !important;}
.bg_red02 { background-color:#fff !important; border:1px solid #CE362A; color:#CE362A !important;}
.bg_red01_outline { border:1px solid #CE362A; background-color: #fff; color:#CE362A}


.white { color:#ffffff !important;}
.blue01 { color:#1D77CD !important;}
.blue02 { color:#FFA700 !important;}
.blue03 { color:#7092BE !important;}
.blue04 { color:#3C7ED5 !important;}

.mint01 { color:#02baf2 !important;}

.black03 { color:#333;}

.ft11 { font-size: 11px !important;  }
.ft12 { font-size: 12px !important;  }
.ft13 { font-size: 13px !important;  }
.ft14 { font-size: 1rem !important;  }
.ft15 { font-size: 15px !important;  }
.ft16 { font-size: 16px !important;  }
.ft18 { font-size: 18px !important;  }

/* ---------------------------------------------------------------------------------- 
	 주의사항, dot, blet
 ---------------------------------------------------------------------------------- */
.comment_txt { display:inline-block; width:100%;font-weight: normal; padding:7px 0 0 0 ; line-height: 1.8; font-size: 12px;}
.comment_txt font{ color:#ee9628; font-weight: 700;}

.comment_gray { clear:both;position:relative;display:inline-block;padding:15px;; background-color: #f3f3f3;   text-align: left; font-weight: normal; width:100%; box-sizing: border-box;  }
.comment_gray li { float:none !important;margin:5px 0; padding-left:10px;  background:url(/wontalk/images/common/blet_dot_org.png) no-repeat 0 11px;  line-height: 1.8;}
.comment_gray li dt { min-width: 64px; font-weight: 700; float: left; }
.comment_gray li dt, .comment_gray li dd { line-height: 1.8}

.tline_red { border-top:1px solid #c7c5c5; margin:10px 0; width:100%;height:5px; position: relative; display: inline-block;}


/* .dot_org { padding-left:10px;  background:url(/wontalk/images/common/blet_dot_org.png) no-repeat 0 7px;} */
.dot_org li { padding-left:10px;  background:url(/wontalk/images/common/blet_dot_org.png) no-repeat 0 7px; margin-bottom:8px;}