@charset "utf-8";

/* placeholder */
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { /* WebKit browsers */ color:transparent; } 
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:transparent; }
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder { /* Mozilla Firefox 19+ */ color:transparent; } 
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder { /* Internet Explorer 10+ */ color:transparent; }

/* button */
.btn { cursor:pointer;padding:5px;background:#48cdc4;border:0;color:#fff; min-height:20px;-webkit-transition:background .4s;transition:background .4s;}
.btn:hover { background:#138496; }
.btn.btn-cancel { background:#ccc; }
.btn.btn-cancel:hover { background:#aaa; }
.btn-outline { cursor:pointer;padding:5px;border:2px solid #48cdc4 !important;background:#fff; min-height:20px;-webkit-transition:background .4s;transition:background .4s;}
.btn-outline-disabled { cursor:text; padding:5px;border:2px solid gray !important;background:#fff; min-height:20px;-webkit-transition:background .4s;transition:background .4s;}
.btn-outline-disabled small{color: gray;}
.btn-outline:hover { background:#48cdc4;color:#fff; }
.btn-outline-disabled:hover { background:#ffffff; color:#000000; }
.btn-bottom { position: absolute; bottom: 5px; right:10px; }
.btn-relation{display:inline-block;border:2px solid #48cdc4;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;width:40px;height:40px;text-align:center;cursor:pointer;}
.btn-relation > *{color:#48cdc4;}
.btn-relation.on{background-color:#48cdc4;}
.btn-relation.on > *{color:#fff;}
.medal__delete-button{width: 20px !important; height: 20px !important; line-height:0px !important;  position: absolute !important; z-index: 1000}
.btn-send{font-size:13px; background-color: #48cdc4; color: #ffff; border: 0; border-radius: 3px; width: 60px; height: 29px;}
.btn-receive-allow{font-size:13px; background-color: #48cdc4; color: #ffff; border: 0; border-radius: 3px; width: 35px; height: 25px;}
.btn-receive-refuse{font-size:13px; background-color: #48cdc4; color: #ffff; border: 0; border-radius: 3px; width: 35px; height: 25px;}

/* margin */
.c-ml-10{margin-left:10px;}
.c-ml-15{margin-left:15px;}
.c-ml-20{margin-left:20px;}

.c-mr-5{margin-right:5px;}
.c-mr-10{margin-right:10px;}
.c-mr-50{margin-right:50px;}

.c-mt-5{margin-top:5px;}
.c-mt-10{margin-top:10px;}
.c-mt-15{margin-top:15px;}
.c-mt-30{margin-top:30px;}

.c-mb-10{margin-bottom:10px;}
.c-mb-15{margin-bottom:15px;}
.f-mb-10{margin-bottom:10px!important;}

.f-my-5{margin:5px 0 5px 0 !important;}
.f-mr-10{margin-right:10px !important;}
.f-mr-15{margin-right:15px !important;}
.f-ml-10{margin-left:10px !important;}
.f-ml-15{margin-left:15px !important;}

.c-ma-5{margin:5px;}
.c-ma-10{margin:10px;}

/* padding */
.c-pa-10{padding:10px;}

.f-pa-0{padding:0px !important;}

/* width */
.c-w-40{width:40px;}
.c-w-80{width:80px;}
.c-w-100{width:100px;}
.c-w-110{width:110px;}
.c-w-120{width:120px;}
.c-w-150{width:150px;}
.c-w-160{width:160px;}
.c-w-170{width:170px;}
.c-w-220{width:220px;}
.c-w-250{width:250px;}

/* height */
.c-h-20{height:20px;}
.c-h-40{height:40px;}
.c-h-150{height:150px;}
.c-h-auto{min-height:auto !important; height:auto !important;}

/* color */
.f-color-mint{color: #48cdc4 !important;}
.f-color-warn{color: #f66c85 !important;}
.color-mint{color:#48cdc4;}
.specify-mint-font{color: #48cdc4;}
.heart-color{color: #ff0000;}

.lh-30{line-height: 30px;}

.small-password{ height:33px; border:1px solid #eeeeee; margin-right:10px; padding-left:5px;}

/* image ratio */
.op{position: relative; padding-top: 100%; overflow: hidden;}
.op .of-box{-webkit-transform:translate(50%,50%);-ms-transform:translate(50%,50%);transform:translate(50%,50%);position:absolute;top:0;left:0;right:0;bottom:0;}
.op .of-box img{position:absolute;top:0;left:0;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.op .of-box svg{position:absolute;top:0;left:0;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.op .of-box img.long-width{max-width:95%;height:auto;}
.op .of-box img.long-height{max-height:95%;width:auto;}
.img-main.long-width{min-width:200px;}
.img-main.long-height{min-height:280px;}

/* photo gallery */
.gallery-wrap{width:100%;}
.gallery-item{width:45%;height:160px;padding:3px;border:1px solid #eeeeee;display:inline-block;}
.gallery-item > div{padding-top:0px;height:100%;}

/* slide image */
.slideArea-image{width: 50%; display: block; margin: 0px auto; -webkit-user-drag: none;}

/* border */
.brd-light-grey{border: 1px solid #ededed;}
.brd-mint{border: 1px solid #48cdc4;}
.brd-thick-top { border-top:3px solid #48cdc4; }

/* border-radius */
.rounded-3{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
.rounded-5{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
.rounded-20{-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;}

/* display */
.display-block{display: block;}
.display-inline-block{display: inline-block;}
.display-flex{display:flex;}
.display-none{display:none;}

/* cursor */
.pointer{cursor:pointer;}
.default-cursor{cursor: default !important;}

/* swal */
.swal2-textarea {resize:none;}
span.info-small{padding-left:25px; background:url(../images/common/prof_noti.png) no-repeat 0 50%;color:#6f6f6f;font-size:12px;margin:2px 0px;display:block;}

.vertical-line {width: 2px; height: 60px; border: 1px solid #e5e5e5; margin:auto; margin-left: 5px; margin-right: 5px;}
.bg-top {background-position-y: top !important;}

/* text */
.input-group { }
.input-group label { display: inline-block; max-width:10%; width:10%; }
.input-group .input { display: inline-block; max-width:89.5%; width:89.5%; }
.input { padding-left: 5px; padding-right: 5px; margin: 10px 0px; height: 33px; width:100%;}
.input-text {height:33px; border:1px solid #eeeeee; margin-right:10px; padding-left:5px;}
.text-center { text-align: center; }
.text-left {text-align:left;}
.readonly-box {min-width:120px;min-height:26px;background-color:#eee;border:1px solid #ccc;display:inline-block;}
.ellipsis { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

/* badge */

@media (max-width:1024px){
.beta-badge {position:absolute;top:-20px;right:0;padding:0 3px;background:#48cdc4;border:0;color:#fff;margin-right:30px;}
}
@media (min-width:1025px){
.beta-badge {position:absolute;top:-20px;right:0;padding:0 3px;background:#48cdc4;border:0;color:#fff;margin:0;}
}
.badge {padding:0 5px;background:#48cdc4;border:0;color:#fff !important;}

/* group-box */
.group-box { position:relative; border: 1px solid #dedede; border-top:3px solid #48cdc4; padding:0; margin:0; min-height:240px; }
.group-box > * { padding:5px 10px; }
.group-box .title { border-bottom:1px solid #dedede; background-color:#f5f9fa; padding:10px; width:100%; }
.group-box .icon {width:140px;height:65px;}
.group-box .row-item { position:relative; width:100%; min-height:30px; margin-top:10px; }
.group-box .row-item-pt-30 { position:relative; width:100%; min-height:30px; margin-top:10px; padding-top: 30px;}
.group-box .row-item-center { position:relative; width:100%; min-height:30px; margin-top:10px; text-align: center;}
.group-box.clickable { cursor: pointer;-webkit-transition: border .4s; transition: border .4s; }
.group-box.clickable:hover { border-left: 1px solid #48cdc4 !important;border-right: 1px solid #48cdc4 !important;border-bottom: 1px solid #48cdc4 !important; }

.pull-right { float: right; }

.lock-leave{min-height:auto !important; height:150px; !important;}

/* 마우스 오버 시 처리 */
.clickable-brd-box { cursor: pointer; border: 1px solid #ededed !important; -webkit-transition: border .4s; transition: border .4s; box-sizing:border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; }
.clickable-brd-box:hover { border: 1px solid #48cdc4 !important; box-sizing:border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box; }
.clickable-brd-box.selected {border: 1px solid #48cdc4 !important; box-sizing:border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;background-color:#48cdc4;color:white; }


.heart-arrow-item {border: 1px solid #ccc; width:420px; box-sizing: border-box;}
.heart-arrow-item > * {display:inline-block; box-sizing: border-box;}
.heart-arrow-item span{width:324px;}
.heart-arrow-item img{width:80px;height:80px;vertical-align: top;}