/* 폰트어썸 아이콘 */
i{margin:0 2px;}
.swal-button{ background:#333; color:#fff;}

/*가로스크롤*/
.scroll_x{overflow-x:scroll; padding:0px; -webkit-overflow-scrolling:touch;-ms-overflow-scrolling:touch;-mos-overflow-scrolling:touch;-o-overflow-scrolling:touch;}
.scroll_x ul{white-space:nowrap;}
.scroll_x li{display:inline-block; white-space:nowrap; margin-right:5px; vertical-align:top; position:relative;}

/*브라우저 상하단이동버튼*/
#gobtn{position:fixed; display:block; right:10px; bottom:20px; display:none; z-index:9999;}
.goHd, .goFt{width:30px; height:30px; background:#F7F7F7; z-index:9999; text-indent:-9999px; border:1px solid #CCC; position:relative;
	  transition:all 0.5s; box-shadow:0px 0px 3px RGBA(0, 0, 0, 0.5); border-radius:4px; display:block; margin-bottom:3px;}
.goHd span{position:absolute; top:60%; left:9px; display:block; width:10px; height:10px; border-left:2px solid #666; border-top:2px solid #666; border-radius:2px;
    transform:translateY(-50%) rotate(45deg);}
.goFt span{position:absolute; top:40%; left:9px; display:block; width:10px; height:10px; border-left:2px solid #666; border-top:2px solid #666; border-radius:2px;
    transform:translateY(-50%) rotate(-135deg);}
.goHd:hover, .goFt:hover{background:#333; border:1px solid #333}
.goHd:hover span, .goFt:hover span{border-left:2px solid #FFF; border-top:2px solid #FFF;}

/* 준비중페이지 */
#ready{text-align:center; background:url(../img/common/ready.png) no-repeat 50% 0; margin:80px 0;  
        padding-top:130px; font-size:1.5em; line-height:1.3em; color:#333;}
#ready strong{font-weight:600; color:#23B1BD;}
#ready p{font-size:0.8em; color:#666;}

/* 블랙 표 
.tbl table{width:100%; margin:10px 0px 0px 0; font-size:0.95em; border-top:1px solid #E3E3E3; border-bottom:1px solid #E3E3E3; font-size:1.1em; line-height:1.8em; }
.tbl td, .tbl th{vertical-align:middle; border-bottom:1px solid #8C8C8C; padding:10px 15px; border-left:1px solid #8C8C8C; text-align:center;}
.tbl td{}
.tbl th{border-right:1px solid #8C8C8C; color:#FFF; background:#C4E6F6; font-weight:bold;}

.tbl thead th{border-bottom:1px solid #fff; background:#000;}
.tbl tbody th{background:#404040; border-bottom:1px solid #8C8C8C; font-weight:normal;}

.tbl tr th:first-child, .tbl tr td:first-child{border-left:0;}
.tbl tr:last-child th{border-right:0;}

.tbl table.td_left td{text-align:left;}*/

/* 화이트 표 */
.tbl table{width:100%; margin:10px 0px 0px 0; border-left:1px solid #CBCBCB; border-top:1px solid #CBCBCB; border-bottom:1px solid #E3E3E3; font-size:1em; line-height:1.5em; }
.tbl td, .tbl th{vertical-align:middle; border-bottom:1px solid #CBCBCB; padding:10px 5px; border-right:1px solid #CBCBCB; text-align:center;}
.tbl td{}
.tbl th{border-right:1px solid #CBCBCB; color:#333; background:#E3E3E3; font-weight:bold;}

.tbl thead th{border-bottom:1px solid #CBCBCB; background:#E0EEF8;}
.tbl tbody th{background:#FBFBFB; border-bottom:1px solid #CBCBCB; font-weight:normal;}

/*.tbl tr th:first-child, 
.tbl tr td:first-child{border-left:0;}
.tbl tr td:last-child,
.tbl tr th:last-child{border-right:0;}*/

.tbl table.td_left td{text-align:left;}

/*가로스크롤*/
.row-horizon {
  position:relative;
  width:98%;
  padding:0 0 20px 0;
  margin:0 auto 20px auto;
  overflow-x: hidden;
  overflow-y: hidden;
}
@media screen and (max-width:787px) {
.row-horizon:before{content:"← 좌우스크롤로 확인해주세요 →"; display:block; text-align:center; margin-bottom:10px;}
.row-horizon {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
}

/*hoverBOX*/
.block-texts{position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity:0.6; z-index:2;}
.block-texts .drawborder{display:block; background:#FFD040; position: absolute;}

.block-texts .drawborder-top{width: 0%; height: 15px; left: 0; top: 0; transition-delay: 0s;}
.block-texts .drawborder-left{width: 15px; height: 0%; top: 0; right: 0; transition-delay: 0s;}
.block-texts .drawborder-bottom{width: 0%; height: 15px; right: 0; bottom: 0; transition-delay: 0s;}
.block-texts .drawborder-right{width: 15px; height: 0; left: 0; bottom: 0; transition-delay: 0s;}

.block-texts:hover .drawborder{transition: all 0.25s;}
.block-texts:hover .drawborder-top{width: 100%; transition-delay: 0s;}
.block-texts:hover .drawborder-left{height: 100%; transition-delay: 0.1s;}
.block-texts:hover .drawborder-bottom{width: 100%; transition-delay: 0.2s;}
.block-texts:hover .drawborder-right{height: 100%; transition-delay: 0.3s;}

/*clearfix*/
.cf{}/* 여기서 cf는 float속성을 가진 태그의 부모태그라고 생각한다.*/
.cf:after{display:block; content:""; clear: both;}
.hide{display:none!important; }
.cb{clear:both!important;}
.bgn{background:none!important;}
.bdn{border:none!important;}
.pa{position:absolute!important;}
.fwb{font-weight:bold!important;}
.fl{float:left;}
.fr{float:right;}

/*모달*/
.modal-backdrop{background:;}
.modal-backdrop.in{opacity:.7;}
.modal-content{box-shadow:none; -webkit-box-shadow:none; border:0; padding:0;}
.modal-title{ font-size:1.2em; font-weight:600;}
.modal-footer .btn+.btn{ border:0; background:#5169dd;}


/*체크박스*/
input[type=checkbox] { display: none; }
input[type=checkbox] + label { cursor: pointer; margin:5px 0; font-size:1em; }
input[type=checkbox] + label > div {
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    background: white;
    box-sizing: border-box;
    width: 20px; height: 20px;
    margin-top: -4px;
    border: 2px solid #2c3c8b;
    border-radius:50%;
	margin-right:5px;
	position:relative;
}
input[type=checkbox]:checked + label > div{
	background:#ff6c00;
	border:0;
}
input[type=checkbox]:checked + label > div:before {
	font-family: "Font Awesome 5 Pro";
    color: #fff;
    content: "\f00c";
	position:absolute;
	top:50%; left:50%; transform:translate(-50%,-50%);
	font-weight:900;
}
input[type=checkbox] + label:hover > div { border-width: 2px; }

/*라디오버튼*/
input[type=radio] { display: none; }
input[type=radio] + label { cursor: pointer; margin:5px 0; /*font-size:0.9em;*/ display:inline-block !important; margin-right:5px; }
input[type=radio] + label > div {
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    background: white;
    box-sizing: border-box;
    width: 20px; height: 20px;
    margin-top: -4px;
    border: 2px solid #2c3c8b;
    border-radius:50%;
	margin-right:5px;
	position:relative;
}
input[type=radio]:checked + label > div{
	background:none;
	border:2px solid #ff6c00;
}
input[type=radio]:checked + label > div:before {
	content:"";
	display:block;
	width:10px; height:10px; border-radius:50%;
	background: #ff6c00;
	position:absolute;
	top:50%; left:50%; transform:translate(-50%,-50%);
}
input[type=radio] + label:hover > div { border-width: 2px; }

/*박스디자인*/
.box_in input[type=radio] { display: none; }
.box_in input[type=radio] + label { cursor: pointer; margin:0px 0; font-size:0.95em; font-weight:normal; display:inline-block !important; 
									margin-right:5px; background:#fff; padding:5px 10px; line-height:1em; border-radius:5px; border:1px solid #ddd; }
.box_in input[type=radio] + label > div {display:none;}
.box_in input[type=radio]:checked + label{
	background:#5169dd;
	border:1px solid #5169dd;
	color:#fff;
}
.box_in input[type=checkbox] + label:hover > div { border-width: 2px; }

.box_in input[type=checkbox] { display: none; }
.box_in input[type=checkbox] + label { cursor: pointer; margin:0px 0; font-size:0.95em; font-weight:normal; display:inline-block !important; 
									margin-right:5px; background:#fff; padding:5px 10px; line-height:1em; border-radius:5px; border:1px solid #ddd; }
.box_in input[type=checkbox] + label > div {display:none;}
.box_in input[type=checkbox]:checked + label{
	background:#5169dd;
	border:1px solid #5169dd;
	color:#fff;
}
.box_in input[type=radio] + label:hover > div { border-width: 2px; }