@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}
body{
    font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif;
    font-size:14px;
    color:#333333;
}
textarea, input{
    font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif;
}
a{
    display:inline-block;
    text-decoration:none;
    color:#333333;
}
span{
    display:inline-block;
}
ul, ol{
    display:block;
    padding-left:0;
}

li{
    display:inline-block;
    list-style:none;
}
i{
    width:23px;
}
aside, section{
    display:block;
}
body{
    min-height:100%;
    background-color:#f6f8ff;
}

.wrapper{
    width:100%;
    height:100vh;
    position:relative;
    background-color:#f6f8ff;
    display:flex;
    flex-wrap:wrap;
    min-width:1960px;
}
.wrapper.main{
    height:100%;
}
.header-bar{
    width:calc(100% - 185px);
    top:0;
    right:0;
    z-index:100;
    padding:15px;
    margin-left:185px;
}
.header{
    display:flex;
    align-items:center;
    padding:0 15px;
    justify-content : space-between;
    width:100%;
    background-color:#ffffff;
    height:60px;
    border-radius:10px;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.04);
}
.header-left{
    display:flex;
    align-items:center;
}
.header-right{
    display:flex;
    align-items:center;
}
.header-left .header-mem-info{
    display:flex;
}
.header-mem-price {
    display: flex;
    align-items: center;
}
.header-mem-info span {
    display: inline-flex;
    font-size: 16px;
    color: #45474b;
    padding: 0 10px;
    position: relative;
    align-items:center;
}
.header-mem-info span.mem-price .dot{
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    background-color: #1bc5a8;
    margin-right:8px;
}
.header-mem-info span.mem-price:first-child .dot{
    background-color: #ff6464;
}
.header-mem-info span.mem-price:last-child .dot{
    background-color: #9730ff;
}

.header-mem-cash {
    display: flex;
    align-items: center;
}
.header-mem-cash .mem-cash {
    font-size: 16px;
    font-weight: 500;
    color: #333333;
    margin-right:20px;
}
.header-mem-cash .mem-cash .cash {
    padding: 0;
    padding-left: 3px;
    display: inline-block;
    color: #1965ff;
    font-size:18px;
    font-weight:600;
}
.header-mem-cash .mem-cash .dot{
    display:inline-block;
    width:8px;
    height:17px;
    border-radius:4px;
    background-color: #40e5ff;
    margin-right:8px;
}
.header-charge-btn {
    display: inline-flex;
    align-items:center;
    justify-content:center;
    width: 120px;
    margin: 0 10px;
    transition: all .3s;
    border-radius: 20px;
    height:35px;
    background-color:#eb5d71;
    color:#ffffff;
    font-size:16px;
    font-weight:600;
}
.header-charge-btn img{
    margin-right:5px;
}
.header-charge-btn:hover{
    background-color:#666;
    color:#ffffff;
}

.header-logo{
    padding: 30px 10px;
    text-align:center;
}
.header-logo img{
    width:120px;
}
.header-user{
    padding:0 10px;
    font-size:15px;
    border-left:2px solid #e0ccbe;
}
.header-service-btn{
    padding:7px 15px;
    font-size:16px;
    border-radius:5px;
    color:#919191;
    border: 1px solid #919191;
}
.header-brand-box{
    padding:4px 10px;
    border-radius:25px;
    margin-left:15px;
    cursor:pointer;
    width:100px;
    height:35px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:2px solid #b3b7c5;
    font-size:16px;
    color:#707071;
    font-weight:600;
}

.sms-menu-area{
    width:185px;
    background-color:#ffffff;
    position:fixed;
    height:100%;
    overflow-y:auto;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.04);
}
.sms-menu-cont{
    height:100%;
    width:100%;
    transition: left .3s ease;
    position: relative;
    left:0;
    top:0;
}

.sms-menu-top-box{
    padding:0;
}
.sms-menu-box{

}
.sms-menu-btn-box{
    height:45px;
    width:100%;
}
.sms-menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    font-size:16px;
    color:#ffffff;
    font-weight:500;
    background-color:#5578f0;
    border-radius:3px;
    cursor:pointer;
    transition: background-color .3s ease;
}
.sms-menu-btn:hover{
    background-color: #788cd5;
}
.sms-menu-list-box{
    width:100%;
}
.sms-menu-list-ul{
    width:100%;
}
.sms-menu-list{
    display:block;
    width:100%;
    padding:8px 10px;
}

.menu-img{
    display:inline-block;
}
.menu-img-on{
    display:none;
}
.sms-menu-list.on .menu-img-on{
    display:inline-block;
}
.sms-menu-list.on .menu-img{
    display:none;
}
.sms-menu-list.on a{
    background-color:#4381ff;
    color:#ffffff;
}

.sms-menu-list a{
    color:#45474b;
    width:100%;
    transition: color .3s ease;
    font-weight:400;
    font-size:16px;
    display:inline-flex;
    align-items:center;
    border-radius:8px;
    height:38px;
    padding:0 15px;
}
.sms-menu-list a:hover{
    color:#333333;
    font-weight:500;
}
.sms-menu-list.on a{
    color:#ffffff;
    font-weight:500;
}

.sms-menu-bot-box{

}
.sms-brand-set-box{
    padding:5px 10px;
    border-top: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.sms-brand-set{
    cursor:pointer;
    border-radius:8px;
    font-size:14px;
    color:#939393;
    width:35px;
    height:35px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition: background-color .3s ease;
}
.sms-brand-set:hover{
    background-color: #d9d9d9;
}
.sms-brand-set i{
    width:auto;
    font-weight:200;
}
.sms-brand-list-box{
    padding:15px 10px;
}
.sms-brand-list{
    display:block;
}
.sms-brand-list a{
    padding:5px 10px;
    font-size:13px;
    transition: background-color .3s ease;
    border-radius:7px;
    width:100%;
}
.sms-brand-list a:hover{
    background-color:#e9e9e9;
}
.sms-brand-list a .sms-brand-icon{
    width:33px;
    height:33px;
    border-radius:50%;
    background-color:#d9d9d9;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.content{
    padding:0 15px 40px;
    width: 100%;
    /*height: calc(100% - 55px);*/
    height:100%;
    margin-left:185px;
}
.content-box{
    width:100%;
    position:relative;
    background-color:#ffffff;
    padding:20px 30px;
    border-radius:10px;
    margin-top:15px;
    /*max-width:1800px;*/
    /*box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.04);*/
}
.content-box:first-child{
    margin-top:0;
}
.list-search-box{
    padding:25px 20px;
    background-color:#f8f9fb;
    border: 1px solid #d4d7e3;
    border-radius: 8px;
}
/*
.blue-stick{
    position: absolute;
    left: 0;
    width: 6px;
    height: 26px;
    background-color: #5578f0;
}
*/


.main-sub-title{
    font-size:16px;
    font-weight:500;
    padding-top:10px;
}
.main-data-area{
    display:flex;
    flex-wrap:wrap;

}
.main-data-box{
    padding:23px 30px;
    border:1px solid #ebebeb;
    border-radius:5px;
    margin-top:10px;
    margin-bottom:10px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background-color:#cbe5ff;
    width:calc(50% - 13px);
}
.main-data-box:nth-child(odd){
    margin-right:13px;
}
.main-data-box:nth-child(even){
    margin-left:13px;
}
.data-list-box ul li{
    position:relative;
    width:140px;
}
.data-list-box ul li:after{
    content:'';
    position:absolute;
    right:0;
    top:10px;
    border-right:2px solid #ffffff;
    height:25px;
}
.data-list-box ul li:last-child:after{
    height:0;
}
.data-list-box .data-title{
    font-size:16px;
    text-align:center;
}
.data-list-box .data-content{
    font-size:18px;
    color:#45474b;
    font-weight:600;
    text-align:center;
}
.data-brand-box{
    font-size:24px;
    font-weight:700;
    color:#3c61a4;
}
.data-brand-icon{
    width: 33px;
    height: 33px;
    border-radius: 50%;
    background-color: #d9d9d9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right:10px;
}
/*.main-content-box .notice-layout-box{
    margin-top:50px;
}*/
.main-content-box .notice-title{
    position:relative;
}
.main-content-box .notice-title .select{
    position:absolute;
    right:0;
    width:auto;
    min-width:105px;
    border-radius:6px;
    border-color:#c0c2c8;
}

.notice-layout-box{
    width:100%;
    display:flex;
}
.notice-box{
    width:50%;
}
.notice-box:first-child{
    margin-right:60px;
}
.notice-title{
    font-size:24px;
    font-weight:700;
    margin-bottom: 15px;
}
.notice-list-box{
    width:100%;
    overflow: hidden;
}
.notice-list{
    display:flex;
    align-items: center;
    cursor:pointer;
    margin-top: 10px;
    margin-bottom: 14px;
}
.notice-list *{
    font-weight:300;
}
.notice-list-label{
    width:60px;
    position: relative;
    font-size:16px;
    font-weight:500;
}
.notice-list-label:after{
    content: '|';
    position: absolute;
    right: 0;
    color: #7b7a7b;
    font-size:13px;
}
.notice-list-title{
    width:calc(100% - 200px);
    padding-left:10px;
    font-size:16px;
    font-weight:500;
}
.notice-list-date{
    width:140px;
    padding-left:40px;
    font-size:14px;
    text-align: right;
}
.notice-list.no-data{
    height:110px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #737373;
    margin: 0;
}
.notice-list-box .notice-list:last-child{
    margin-bottom: 0;
}



.sms-back-btn-box{
    width:100%;
    height:60px;
}
.sms-back-btn{
    width:100%;
    padding:0 20px;
    height:100%;
    cursor:pointer;
    display:inline-flex;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
}
.sms-back-btn-text{
    font-size:15px;
    font-weight:400;
}
.sms-back-btn-text i{
    width:15px;
}
.sms-menu-list-box{
    padding: 10px 0;
}
.sms-menu-list-box p.title{
    margin: 0;
    padding: 0 0 5px 15px;
    font-weight: 600;
    font-size: 12px;
    color: #919191;
}
.sms-menu-list-box ol li{
    position: relative;
    width:100%;
    height:30px;
    cursor:pointer;
}
.sms-menu-list-box ol li.on{
    font-weight: 600;
    color: #121212;
    background-color: #e3edff;
}
.sms-menu-list-box ol li.on:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 5px;
    height: 100%;
    background-color: #5578f0;
}
.menu-btn{
    width:100%;
    height:100%;
    padding:0 30px;
    display: inline-flex;
    align-items: center;
}
.menu-btn p.text{
    font-size:14px;
}


.page-content-box{
    position: relative;
    width: 100%;
    height: 100%;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.04);
    background-color:#ffffff;
    border-radius:10px;
}
.content-box{
    font-size: 14px;
    width:100%;
    /*height:100%;*/
    padding: 24px 30px 50px;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
}
.content-header{
    position: relative;
    padding: 0 10px 15px;
    font-weight: 400;
    display:flex;
    align-items:center;
}
.content-header h2 {
    font-size: 24px;
    color: #000;
    display: inline-block;
    font-weight: 700;
    vertical-align: bottom;
    padding-right:15px;
    position:relative;
}
.content-header h2:after{
    content:'|';
    position:absolute;
    right:0;
    color:#d4d7e3;
    font-size:14px;
    bottom:7px;
}
.content-header .text-header {
    padding-left: 10px;
    font-size: 20px;
    display: inline-block;
    color: #3c61a4;
    vertical-align: bottom;
    margin: 0;
    font-weight:600;
}
.security-box {
    margin: 27px 0 50px;
}
.security-box .sub-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-bottom: 5px;
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    color: #414141;
}
.sub-box {
    margin-bottom: 20px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    display: block;
    min-width: 0;
    position: relative;
    color: rgba(0,0,0,.87);
    padding-left: 20px;
}
.tbl-border{
    border-left:1px solid #e8e8e8;
}
ul.dot {
    padding: 0 0 12px;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: #121212;
}
ul.dot li {
    position: relative;
    list-style: none;
    padding-left: 10px;
    line-height: 18px;
}
ul.dot li:before {
    content: "·";
    position: absolute;
    top: 1px;
    left: 0;
}
.tbl {
    border-spacing: 0;
    width: 100%;
    max-width: 100%;
    color: rgba(0,0,0,.87);
    table-layout: fixed;
}
/*.tbl th {
    padding: 12px 15px 10px;
}*/
.tbl tbody th {
    font-size: 18px;
    line-height: 21px;
    text-align: left;
    vertical-align: middle;
    color: #45474b;
    padding:0 10px;
}
.tbl td {

}
.tbl tbody td {
    height: 45px;
    font-size: 14px;
    color: #414141;
}
.select{
    width: 150px;
    border: 1px solid #c0c2c8;
    border-radius: 6px;
    min-height: 35px;
    height: 35px;
    background-color: #ffffff;
    padding:5px;
}
.center-btn-box{
    margin: 30px 0 0;
    padding: 15px 0 30px;
    text-align: center;
}
.button{
    min-width:150px;
    height:35px;
    border-radius: 5px;
    font-weight:500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border:1px solid #919191;
    margin: 0 3px;
}
.button.b-btn{
    background-color: #3c61a4 !important;
    color: #ffffff !important;
}
.radio-label{
    margin-right: 10px;
}
.button.bl-btn{
    background-color:#888888;
    color:#ffffff;
    border-radius:2px;
}
.button.disable{
    background-color: #f0f0f0;
    color: #c8c8c8 !important;
    border:1px solid #c0c2c8 !important;
}
.msg-send-box{
    padding-top:25px;
}
.msg-type-select .msg-setting-box label{
    width:auto;
}
.template-select-box{
    width: 100%;
    padding: 8px;
    cursor: pointer;
}
.test-btn{
    min-width:80px;
    width:80px;
    height:35px;
    background-color:#45474b;
    color:#ffffff;
    font-weight:500;
    border-radius:6px;
    font-size:14px;
}
.full-btn{
    width:100% !important;
    margin:0;
    height:40px;
}
.message-btn-text{
    margin-top:10px;
    color:#707071;
    font-size:14px;
    text-align:left;
    line-height:24px;
    font-weight:500;
}



/*td.td-calendar{
    padding: 12px 10px 13px 20px!important;
}*/
td .date-input{
    display: flex;
    width: 100%;
}
.opacity .ux-date-input{
    padding-right: 10px;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.opacity .ux-date-input .input-text {
    padding-top: 6px;
    width: 151px;
    display: inline-block;
    vertical-align: top;
    opacity: 1;
}
.opacity .ux-date-input .calendar-btn {
    position: relative;
    bottom: 0;
    left: 5px;
    display: inline-block;
    width: 40px;
    line-height: 28px;
    font-size: 16px;
    text-align: center;
    color: #919191;
    border: 1px solid #bebebe;
    border-radius: 3px;
    -webkit-transition: all .28s cubic-bezier(.4,0,.2,1);
    transition: all .28s cubic-bezier(.4,0,.2,1);
}
.btn-toggle{
    overflow: hidden;
    border-radius: 6px;
    -webkit-box-shadow: none;
    box-shadow: none;
    vertical-align: middle;
    display: flex;
}

.btn-toggle .button{
    min-width: 60px;
    height: 100%;
    padding: 0 14px;
    opacity: 1;
    color: #45474b;
    border:0;
    border-right: 1px solid #ffffff;
    border-radius: 0;
    font-size:14px;
    margin: 0;
    background-color:#d4d7e3;
}
.btn-toggle .button:first-child{
    border-radius: 2px 0 0 2px;
}
.btn-toggle .button:last-child{
    border-radius: 0 2px 2px 0;
    border-right: 0;
}

.v-input{
    align-items: flex-start;
    display: flex;
    flex: 1 1 auto;
    font-size: 16px;
    text-align: left;
}
.v-input-control{
    display: flex;
    flex-direction: column;
    height: auto;
    flex-grow: 1;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
}
.v-input.text-field .v-input-control{
    min-height: 20px;
    padding: 0;
}
.v-input-slot {
    min-height: 35px;
    height: 35px;
}
.v-input-control input{
    padding: 7.5px;
    height:35px;
    flex: 1 1 auto;
    line-height: 20px;
    max-width: 100%;
    min-width: 0px;
    width: 100%;
    border: 1px solid #bebebe;
    border-radius: 6px;
}
.v-input-control input::placeholder{
    color:#b3b7c5;
}
.v-input-control input#send-num{
    width:320px;
}
.search-btn-box{
    margin-top:0;
}


.list-box{
    position: relative;
}
.list-header{
    padding-top:25px;
    padding-bottom: 10px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.list-header .left {
    padding-top: 4px;
    font-size: 18px;
    font-weight: 500;
    color: #000000;
}
.list-header .right{
    display: inline-flex;
}
.list-header .right .select{
    margin-left: 5px;
}

.list-folder-page{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top:15px;
}
.list-folder-page .folder-page, .list-folder-page .detail-page{
    display:inline-block;
    padding:5px 7px;
    font-size:13px;
    cursor:pointer;
}
.list-folder-page .folder-page.active, .list-folder-page .detail-page.active{
    font-size:14px;
    font-weight:500;
}


.feature-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    background-color: #f5f5f5;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 7px 10px 8px;
}
.feature-box .feature-box-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.feature-btn{
    width:50px;
    height: 25px;
    min-width:50px;
    font-size: 12px;
    opacity: .3;
}
.feature-delete-btn{
    margin-right: 30px;
}

.list-tbl-content .list-tbl {
    border-spacing: 0;
    width: 100%;
    max-width: 100%;
    color: rgba(0,0,0,.87);
    border-bottom: 1px solid #e8e8e8;
    table-layout: fixed;
}
.list-tbl-content .list-tbl.no-data {
    border-bottom: 1px solid transparent;
}

.list-tbl-content .list-tbl td, .list-tbl-content .list-tbl th {
    padding: 12px 10px 10px;
    vertical-align: middle;
}
.list-tbl-content .list-tbl thead tr{
    border-radius:6px;
    overflow:hidden;
    background-color:#000
}
.list-tbl-content .list-tbl thead th {
    padding: 15px 10px 13px;
    font-size: 14px;
    font-weight: 500;
    color: #707071;
    background-color: #eff0f2;
    height:50px;
}
.ux-not-data{
    position: relative;
    padding-top: 60px;
    font-size: 12px;
    line-height: 16px;
    color: #737373;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid #ebebeb;
}
.ux-not-data.large{
    padding-top: 80px;
    font-size: 14px;
    line-height: 20px;
}

.list-tbl-content .list-tbl tbody tr{
    cursor:pointer;
}
.list-tbl-content .list-tbl tbody tr:hover{
    background-color: #f7f7f7;
}
.list-tbl-content .list-tbl tbody td{
    text-align:center;
    border-bottom: 1px solid #ebebeb;
    height:60px;
}


.popup-wrap{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:none;
    align-items:center;
    justify-content:center;
    transition: background-color .4s;
    z-index:110;
}
.popup-wrap.on{
    display:flex;
    background-color:rgba(0,0,0,.3);
}
.popup-box{
    width:500px;
    height:auto;
    transform: scale(.1);
    overflow:hidden;
    max-width:500px;

    background-color:#ffffff;
    border-radius:7px;
    box-shadow: 0px 0px 7px rgba(115, 115, 115, 0.25);
    transition: width .4s, transform .4s ease;
}
.popup-wrap.on .popup-box{
    transform: scale(1);
}
.popup-input-box{
    margin-bottom:30px;
}
.popup-input-title{
    font-weight:500;
}
.popup-input{
    width:100%;
    height:35px;
    border:1px solid #bebebe;
    border-radius:5px;
    padding:5px;
}
.popup-box .center-btn-box{
    margin:0;
    padding-bottom:20px;
    padding-top:0;
}


.popup-wrap#brand-add-popup .popup-box{
    width:500px;
    max-width:500px;
}
.popup-box .content-header{
    height:50px;
    background-color:#3c61a4;
    padding:15px 25px;
}
.popup-box .content-header h2{
    font-size:20px;
    color:#ffffff;
    font-weight:400;
}
.popup-box .content-header h2:after{
    content:'';
}
.popup-body{
    padding:30px;
}
#brand-add-popup .popup-input-box{
    display:flex;
    align-items:center;
    margin-bottom:10px;
}
#brand-add-popup .popup-input-title{
    width:120px;
    font-weight:700;
    font-size:18px;
}
#brand-add-popup .popup-input{
    width:calc(100% - 120px);
}


.login{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100vh;
    background-color:#ffffff;
}
.view {
    background-color: #ffffff;
    padding: 50px 0;
}
.login-content {
    width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
    position: relative;
    overflow: hidden;
}
.login-area {
    padding: 0 5px 0 4px;
    font-size: 12px;
    line-height: 1.67;
    color: #666666;
}
.login-area {
    width: 100%;
    position: relative;
}
.login-logo-box {
    text-align: center;
}
.login-form-box {
    padding: 50px 0;
    width: 100%;
    max-width: 350px;
    overflow: hidden;
    margin: 0 auto;
}
.login-input-box {
    height: 40px;
    padding: 7px 35px 10px 11px;
    border: 1px solid #dadada;
    background-color: #ffffff;
    margin-bottom: 20px;
    border-radius:5px;
}
.login-input-box input {
    height: 25px;
    font-size: 14px;
    width: 100%;
    padding: 8px 5px 6px;
    color: #000;
    border: none;
    background-color: #ffffff;
}
.login-input-box input:focus{
    outline:none;
}
.login-btn {
    display: block;
    width: 100%;
    height: 45px;
    line-height: 42px;
    margin: 12px 0 14px;
    border-radius: 0;
    border: solid 1px rgba(0,0,0,.1);
    box-shadow: 0 2px 6px 0 rgba(61,80,81,.08);
    background-color: #2c264c;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.5px;
    cursor: pointer;
    text-align: center;
    -webkit-appearance: none;
    border-radius:5px;
}
.login-chk-box {
    font-size: 13px;
    color: #666666;
    float: left;
}
.login-chk-box.right {
    float: right;
}



.tabs{
    width:100%;
    position:relative;
    padding-top:10px;

}
.tabs-box{
    border-bottom: 4px solid #f1f2f5;
    padding:0 10px;
}
.tabs-box .tab{
    padding:7px 12px 7px;
    cursor:pointer;
    position:relative;
    top:2px;
    background-color:#dfe2ef;
    border-radius:8px 8px 0 0;
    min-width:140px;
    height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    font-weight:600;
    color:#707071;

}
.tabs-box .tab.on{
    color:#ffffff;
    border:2px solid #3d63b0;
    border-bottom:0;
    background-color:#3c61a4;
}


.message-box{
    width:100%;
    display:flex;
    justify-content:space-between;
    position:relative;
}
.message-content-box{
    position:relative;
    padding:55px 20px 32px;
    width:455px;
    box-shadow: 4px 8px 4px hsla(0, 0%, 78.4%, .25);
    border-radius: 30px;
    border: 1px solid #e5e5e5;
    background-color:#ffffff;
}
.message-content-box:before, .message-content-box:after{
    content: "";
    position: absolute;
    top: 26px;
    height: 8px;
    background: #f4f4f4;
}

.message-content-box:before{
    left: 200px;
    width: 60px;
    border-radius: 4px;
}
.message-content-box:after{
    left: 185px;
    width: 8px;
    border-radius: 50%;
}

.message-set-box{
    padding-top:30px;
}
.message-set-box:before, .message-set-box:after{
    width:0;
    height:0;
}

.message-text-area{
    width:100%;
    background-color: #f4f4f4;
    border:1px solid #e8e8e8;
    border-radius:8px;
    /*overflow:hidden;*/
}
.message-title{
    width:100%;
    height:40px;
    padding:0 20px;
    background-color:#f8f9fb;
}
.message-title-input{
    width:100%;
    border:none;
    background-color:#f8f9fb;
    font-size:16px;
    height:50px;
}
.message-title-input:focus{
    outline:none;
}
.message-title-input::placeholder{
    color:#b3b7c5;
}
.message-text{
    height:250px;
    width:100%;
}
.message-text textarea{
    width:100%;
    height:100%;
    resize: none;
    font-size:16px;
    padding: 12px 20px 0;
    background-color: #f8f9fb;
    border:none;
    overflow-y:auto;
    color:#45474b;
}
.message-text textarea:focus{
    outline: none;
}
.message-text textarea::placeholder{
    color:#979797;
    line-height:16px;
}
.message-text-size{
    font-size:14px;
    text-align:right;
    color:#4084ff;
    padding:15px;
    background-color:#f8f9fb;
    font-weight:600;
}
.message-text-size #byte-text{
    color:#5578f0;
    font-weight:500;
}

.message-text-size.lms{
    color:#eb5d71 !important;
}
.message-text-size.lms span{
    color:#eb5d71 !important;
}

.message-text-option-box{
    display:flex;
    background-color:#eff0f2;
    justify-content:space-around;
    border-top:1px solid #d4d7e3;
    padding-top:15px;
}
.message-option{
    width:195px;
    height:30px;
    background-color:#ffffff;
    border-radius:18px;
    text-align:center;
    cursor:pointer;
    color:#3c61a4;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:600;
}
.message-option.color-b{
    color:#5578f0;
}
.message-option span{
    width:100%;
    padding: 0 8px;
    text-align:center;

}
.msg-type-box{
    padding-top:15px;
}
.msg-type-select-box{
    display:flex;
    align-items:center;
    margin-bottom:10px;
}

.msg-type-text{
    width:70px;
}
.msg-type-select{
    width:calc(100% - 70px);
}
.msg-type-select select{
    width:100%;
    height:35px;
}
.msg-ad-chk-box{
    display:flex;
    align-items:center;
}
.msg-ad-chk-box .msg-ad-chk{
    border-color:#a0a0a0;
}
.msg-ad-chk-box label{
    font-size:13px;
    padding-left:5px;
    color:#a0a0a0;
}
.message-btn-box{
    padding-top: 10px;
}
.message-btn-box .button{
    width:150px;
}
.no-margin{
    margin:0 !important;
}

.message-setting-box{
    width:100%;
    /*width:calc(100% - 320px);*/
    /*padding-left:30px;*/
}
.message-setting-box .textarea{
    width:100%;
    height:300px;
    padding: 10px;
    min-height: 190px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 5px;
    outline-color: #6e8cfd;
}


.v-input-text{
    height:100%;
    padding-top:5px;
}
.brand-view-box{
    margin-bottom:25px;
}


.view-tbl-top{
    background-color:#ffffff;
    padding-left:0;
    padding-right:0;
}
.view-tbl-title{
    font-size:16px;
    font-weight:500;
    padding-top:8px
}
.view-tbl-total{
    font-size:12px;
    color:#888888;
    padding-left:10px;
    padding-top:10px;
}
.view-search-input{
    border: 1px solid #bebebe;
    margin-left:3px;
    width:200px;
    padding:5px;
    border-radius:6px;
}
.view-search-btn{
    height:100%;
}


.popup-input-box .button{
    width:50%;
    margin:0;
    margin-right:5px;
    height:40px;
    padding:5px;
}
.popup-input-box.button-box{
    text-align:center;
    display:flex;
}
.button.g-btn{
    background-color:#207345;
    color:#ffffff;
}
#excel-file-upload{
    display:none;
}
#upload-message-area{
    display:none;
}

.charge-info-box {
    padding-top:30px;
    padding-bottom: 10px;
    overflow: hidden;
}
.charge-info-box ul li {
    clear: both;
    margin-bottom: 5px;
    font-size: 14px;
    color: #707071;
    display:block;
    font-weight:500;
}
.charge-kind-area {
    padding-top:20px;
    overflow: hidden;
}
.charge-kind-box {
    width: 260px;
    float: left;
    height: 80px;
    margin-right:10px;
}
.charge-item {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
}
.charge-kind {
    background-color: #4084ff;
    width: 100%;
    cursor: pointer;
    border: 1px solid #dddddd;
    color:#ffffff;
    height:100%;
    border-radius:6px;
}
.charge-confirm-box {
    clear: both;
    width: 100%;
    padding: 20px 0 0;
}
.charge-confirm {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #dddddd;
    padding: 15px 20px;
}
.charge-confirm div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    font-size: 14px;
    text-align: center;
}
.charge-confirm div input[type='checkbox']{
    width:24px;
    height:24px;
}
.charge-confirm-label {
    margin: 0 5px;
    cursor: pointer;
    font-size:16px;
    color:#707071;
    font-weight:600;
    padding-left:5px;
}
.charge-confirm-btn {
    display: inline-block;
    padding: 2px 5px;
    color: #ffffff;
    font-size: 11px;
    background-color: #ff3005;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.charge-confirm-body {
    font-size:16px !important;
    padding:15px 35px 40px;
}
.charge-confirm-bot {
    font-size: 14px !important;
    color: #3c61a4;
    justify-content:flex-end !important;
    padding:0 30px 10px;
}
.charge-confirm-bot #charge-total {
    padding-left: 25px;
    font-size:24px;
    font-weight:600;
}


.charge-cancel {
    display: inline-flex;
    width:107px;
    height:30px;
    align-items:center;
    justify-content:center;
    border-radius: 18px;
    background-color: #ed1b23;
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
}
.charge-cancel.cancel2 {
    background-color: #ec4747;
}
.charge-cancel.cancel1 {
    background-color: #45474b;
}


.upload-list-box{
    width:100%;
    border:1px solid #ebebeb;
    height:300px;
    border-radius:3px;
    overflow-y:auto;
}
.msg-recv-cnt-box {
    width: 100%;
    height: 40px;
    background-color: #5578f0;


    padding: 10px;
    border-radius:3px;
}
.msg-recv-cnt-box span {
    display: inline-block;
    color: #ffffff;
}
.msg-recv-cnt-text1 {
    font-size: 14px;
    float: left;
    margin-top: 3px;
}
.msg-recv-cnt-text2 {
    font-size: 18px;
    float: right;
}
.upload-message-list{
    display: inline-block;
    width: 100%;
    color: #333;
    position: relative;
    border-bottom: 1px solid #ebebeb;
    padding: 8px 30px 7px 18px;
}
.message-list-del{
    display: inline-block;
    border: 1px solid #ebebeb;
    background-color: #ebebeb;
    border-radius: 50%;
    cursor: pointer;
    padding: 5px 7px;
    line-height: 1px;
    position: absolute;
    right: 10px;
    top: 6px;
}
.message-list-del i{
    width:auto;
}


.text-conversion-box {
    padding:15px;
    width: 100%;
}
.conversion-title {
    font-size: 16px;
    font-weight: 600;
    color: #45474b;
    padding-bottom: 5px;
}
.conversion-title span{
    font-size:14px;
    color:#707071;
    font-weight:400;
    padding-left:8px;
}
.conversion-text {
    padding-top: 10px;
    font-size: 16px;
    color: #45474b;
}
.conversion-text span {
    display: inline-block;
    padding: 3px 14px;
    border: 1px solid #3c61a4;
    cursor: pointer;
    margin-bottom: 10px;
    border-radius: 15px;
    margin-left:5px;
    color:#3c61a4;
    font-size:14px;
}
.conversion-text span {
    font-weight: 600;
}
.conversion-text span.ex {
    background-color:#39a15b;
    color:#ffffff;
    width:183px;
    height:35px;
    border-radius:6px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:none
}
.conversion-text span:hover {
    background-color: rgba(44,57,138, .1);
}


/** BEGIN CSS **/
@keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-moz-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-moz-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-webkit-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@-o-keyframes rotate-loading {
    0%  {transform: rotate(0deg);-ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); -moz-transform: rotate(0deg);}
    100% {transform: rotate(360deg);-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg);}
}

@keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}

@-moz-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}

@-webkit-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}

@-o-keyframes loading-text-opacity {
    0%  {opacity: 0}
    20% {opacity: 0}
    50% {opacity: 1}
    100%{opacity: 0}
}
.loading-container,
.loading {
    height: 30px;
    position: relative;
    width: 30px;
    border-radius: 100%;
}


.loading-container {
    margin: 7px auto;
}

.loading {
    border: 2px solid transparent;
    border-color: transparent #fff transparent #FFF;
    -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
    -moz-transform-origin: 50% 50%;
    -o-animation: rotate-loading 1.5s linear 0s infinite normal;
    -o-transform-origin: 50% 50%;
    -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
    -webkit-transform-origin: 50% 50%;
    animation: rotate-loading 1.5s linear 0s infinite normal;
    transform-origin: 50% 50%;
}

.loading-container:hover .loading {
    border-color: transparent #E45635 transparent #E45635;
}
.loading-container:hover .loading,
.loading-container .loading {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

div.pagination{
    display: flex;
    justify-content: center;
    padding-top:30px;
}
.pagination-page{
    font-size: 16px;
    color: #555;
    padding:5px;
}
.pagination_next, .pagination_end, .pagination_prev, .pagination_first{
    border:1px solid #e1e1e1;
    padding:5px;
    font-size:12px;
    color: #888;
    margin:0 2px;
}

.pagination {
    display: -ms-flexbox;
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem;
}

/*.page-item:first-child a {
    margin-left: 0;
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}*/
.page-item a {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    line-height: 1.25;
    color: #2c264c;
    background-color: #f6f6f6;
    border-radius:16px;
    font-size: 14px;
    margin:0 5px;
    width:32px;
    height:32px;
}
.page-item a:not(:disabled):not(.disabled) {
    cursor: pointer;
}
.page-item.active .page-link {
    background-color: #3c61a4;
    color: #ffffff;
}
.page-item a i{
    width:auto;
}


.ux-date-input .input-text{
    padding-right:40px;
    border: 1px solid #bebebe;
    border-radius: 6px;
    padding-top:0 !important;
    background-color:#ffffff;
}
.ux-date-input .input-text img{
    position:absolute;
    top: 8px;
    right: 9px;
}
.v-input-control input#message-date1, .v-input-control input#message-date2{
    border:none !important;
    cursor:pointer;
}
.v-input-control input#message-date1:focus, .v-input-control input#message-date2:focus{
    outline:none;
}
.ux-date-input .calendar-btn{
    position:absolute !important;
    right:0;
    top:5px;
    left:unset !important;
    bottom:unset !important;
    border:none !important;
}



.msg-file-area {
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-bottom:10px;
    position:relative;
    background-color: #eff0f2;
}
.msg-file-title {
    width: 100%;
    padding: 0 15px 5px;
    font-size: 13px;
}
.msg-file-box {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    padding: 0 5px;
    align-items: flex-end;
}
.img-preview-box {
    width: 20%;
    padding: 8px 10px;
    float: left;
    position: relative;
}
.img-preview {
    width: 100%;
    height: 58px;
    overflow: hidden;
    border: 1px solid #cccccc;
    background-color: #e8e8e8;
    color: #777777;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 1px 2px 3px rgba(0,0,0,.1);
    border-radius: 8px;
}
.img-preview.empty {
    cursor: pointer;
}
.img-preview i {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
    width:auto;
}
.img-upload-box {
    width: 40%;
    padding: 8px 10px 8px 20px;
}
.img-upload-box input[type="file"] , .msg-icon-box input[type="file"]{
    display: none;
}
.img-upload-btn {
    display: inline-block;
    width: 100%;
    height: 40px;
    background-color: #3c61a4;
    border-radius: 8px;
    color: #ffffff;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}
.img-preview img {
    max-width: 100%;
    min-width: 100%;
    height: auto;
}
.img-preview-box .c-btn {
    position: absolute;
    width: 22px;
    height: 22px;
    top: 0px;
    right: 0px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #2c264c;
    color: #ffffff;
    cursor: pointer;
    font-size: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.img-preview-box .c-btn i{
    width:auto;
}
#message-text-box{
    position:relative;
    /*overflow:hidden;*/
    border:1px solid #d4d7e3;
    border-radius:8px;
}
.resend-box{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    top:0;
    background-color:#fff;
    transition: all .3s ease;
    opacity:0;
}
.resend-box.on{
    transform: translateY(94%);
}
.resend-top{
    padding:0 10px;
    background-color:#2c264c;
    border:1px solid #2c264c;
    color:#ffffff;
    text-align:center;
    font-weight:500;
    position:relative;
    border-radius:8px 8px 0 0;
    transition: padding-top .3s;
}
.resend-top-title{

}
.resend-top-sub{
    font-size:12px;
    font-weight:300;
}
#resend-btn{
    position:absolute;
    top:3px;
    right:10px;
    cursor:pointer;
    transition: all .3s;
    font-size:15px;
}
.resend-box.on .resend-top{
    padding-top:0;
}
.resend-box.on #resend-btn{

    top: 0;
}

.resend{
    background-color:#ffffff;
}
.message-text textarea.resend{
    background-color:#ffffff;
}

.resend-box .message-text{
    height:230px;
}
.resend-box .message-text-size{
    padding:5px 10px;
}

#message-template .popup-box{
    width:1700px;
    height:900px;
    max-width:1700px;
}

#message-template .popup-box .popup-body{
    height:calc(100% - 125px);
    overflow-y:auto;
}



.template-box-area{
    display:flex;
    margin-left:-10px;
    margin-right:-10px;
    margin-top:-10px;
    flex-wrap:wrap;
}
.template-box{
    width:25%;
    padding:10px;
    cursor: pointer;
}
.template-box .template{
    width:100%;
    height:100%;
    cursor:pointer;
    position:relative;
}
.template-box.none{
    width:100%;
    font-size:20px;
    font-weight:600;
    text-align:center;
    padding-top:40px;
}

.template textarea{
    width:100%;
    resize:none;
    height:100%;
    padding:10px;
    border:1px solid #e1e1e1;
    border-radius:5px;
    cursor:pointer;
}
.template textarea:focus{
    border-color: #e1e1e1;
}

/* 스크롤바 설정*/
.template textarea::-webkit-scrollbar{
    /*  스크롤바 막대 너비 설정 */
    width: 6px;
}

/* 스크롤바 막대 설정*/
.template textarea::-webkit-scrollbar-thumb{
    /* 스크롤바 막대 높이 설정    */
    height: 17%;
    background-color: rgba(150,150,150,1);
    /* 스크롤바 둥글게 설정    */
    border-radius: 10px;
}

/* 스크롤바 뒷 배경 설정*/
.template textarea::-webkit-scrollbar-track{
    background-color: rgba(230,230,230,30);
}
.template-title{
    width:100%;
    position:absolute;
    bottom:0;
    text-align:right;
    transition: opacity .3s;
    opacity:0;
    font-weight:500;
    padding:0 10px;
    font-size:13px;
    line-height:1;
    height:30px;

}
.template:hover .template-title{
    opacity:1;
}

.template-click-box{
    background-color: rgba(0,0,0,.5);
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    display:none;
    text-align:center;
    justify-content:center;
    border-radius:5px;
}
.template-click-box i{
    width:auto;
    font-size:36px;
    color:#ffffff;
    height:auto;
    display:inline;
    padding-top:45px;
}
.template.on .template-click-box{
    display:flex;
}
.template.on .template-title{
    color:#ffffff;
    opacity:1;
    z-index:3;
}
#message-template .popup-foot{
    padding-top:20px;
}
#message-template .template-item{
    cursor:pointer;
    position:relative;
}
#message-template .template-item.on:after{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    content:'';
    background-color: rgba(0,0,0,.3);
    border-radius:10px;
}


#template-box{
    display: none;
}
#rcs-template .popup-box{
    width: 1700px;
    height: 900px;
    min-width:1700px;
}
#rcs-template .popup-box .popup-body {
    height: calc(100% - 125px);
    overflow-y: auto;
}
#rcs-template .popup-foot {
    padding-top: 20px;
}
#rcs-loading{
    margin-top: 300px;
}
#rcs-template .loading{
    border-color: transparent #000 transparent #000;
}
#rcs-template .loading-text{
    color: #000000;
    text-align: center;
    padding-top: 10px;
}
#rcs-template-list .rcs-template-select{
    min-height:300px;
    max-height:500px;
    position: relative;
}
#rcs-template-list .template-preview-text{
    height: 150px;
}
#rcs-template .template-box{
    float: left;
}
#rcs-template .template-btn-box{
    height: 60px;
}
#rcs-template .template-btn{
    display: block;
    padding: 5px;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}
#rcs-template .template-item.on:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: '';
    background-color: rgba(0, 0, 0, .3);
    border-radius: 10px;
}
#rcs-template .template-edit{
    margin-bottom: 20px;
    height: 35px;
}
#rcs-template .template-edit-icon{
    width: 35px;
    height: 35px;
}
#rcs-template .template-edit-icon img{
    width: 25px;
}
#rcs-template .template-edit-id{
    font-size: 14px;
}




.special-box{
    position:absolute;
    left:0;
    right:0;
    top:0;
    background-color:#ffffff;
    padding:10px;
    display:none;
    border:1px solid #333333;
    border-radius:8px;
    box-shadow:1px 3px 5px rgba(0,0,0,.3);
    z-index:10;
}
.special-box-top{
    height:30px;
    border-bottom:2px solid #333333;
    position:relative;
    font-weight:500;
}
.special-box-body{
    padding-top:10px;
}
#special-list{
    display:flex;
    flex-wrap:wrap;
    padding:10px 0;
}
.special-text{
    display:inline-block;
    padding:3px 5px;
    border:1px solid #e1e1e1;
    border-radius:8px;
    cursor:pointer;
    min-width:26px;
    min-height:28px;
    margin:2px;
    transition: color .3s, background-color .3s;
}
.special-text:hover{
    background-color:#333;
    color:#fff;
}
.select#special-group{
    width:200px;
}
.special-close-btn{
    display:inline-flex;
    position:absolute;
    width:30px;
    height:30px;
    top:-5px;
    right:0;
    cursor:pointer;
    font-size:18px;
    align-items:center;
    justify-content:center;
}
.special-close-btn i{
    width:auto;
}



.msg-recv-list-area {
    width: 100%;
}
.message-setting-area{
    width:435px;
}
.message-setting{
    display:flex;
    align-items:center;
    margin-bottom:20px;
}
.receiver-select{
    margin-top:30px;
}
.msg-recv-title {
    display:inline-block;
    font-weight: 700;
    font-size:18px;
    width:130px;
}
.msg-recv-list-box {
    border: 1px solid #c0c2c8;
    min-height: 35px;
    overflow: hidden;
    width: 100%;
    border-radius:6px;
    margin-bottom:5px;
}
.msg-recv-list-box #msg-recv-list-ul{
    height:100%;
}
.msg-recv-list-btn-box {
    width: 100%;
    margin-top: 10px;
    display: flex;
}
.msg-recv-list-btn {
    width: 50%;
    vertical-align: middle;
    font-size: 15px;
    text-align: center;
    /* color: #747474; */
    color: #333333;
    /* border: 1px solid #ccc; */
    display: inline-block;
    cursor: pointer;
    height: 42px;
    line-height: 42px;
    border-radius: 8px;
    background-color: #f0f0f0;
}
.msg-recv-list-btn:first-child {
    margin-right: 10px;
}
.msg-recv-cnt-box {
    width: 100%;
    height: 35px;
    background-color: #eff0f2;
    padding: 5px 10px;
    border-radius: 6px;
    border:1px solid #c0c2c8;
}
.msg-recv-cnt-box span {
    display: inline-block;
    color: #3c61a4;
    font-weight:700;
}
.msg-recv-cnt-text1 {
    font-size: 14px;
    float: left;
    margin-top: 3px;
}
.msg-recv-cnt-text2 {
    font-size: 17px;
    float: right;
}
.msg-setting-box{

    display:inline-flex;
    align-items:center;
}
.msg-setting-box input[type='radio']{
    margin-right:7px;
    width:24px;
    height:24px;
    cursor:pointer;
}
.msg-setting-box label{
    cursor:pointer;
    width:55px;
    font-size:14px;
    color:#45474b;
    font-weight:600;
}
.self-add-box {
    width: 100%;
    height: 180px;
    border: 1px solid #cccccc;
    border-radius: 5px 5px 0 0;
    overflow:hidden;
    margin-top:10px;
}
.self-add-box textarea {
    width: 100%;
    height: 100%;
    resize: none;
    border: 0;
    font-size: 14px;
    outline: none;
    color: #333333;
    overflow-y: auto;
    padding: 15px;
    line-height: 20px;
    background-color: #f8f9fb;
}
.self-add-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    background: -moz-linear-gradient(top, #ffffff 30%, #f6f6f5 100%);
    background: -webkit-linear-gradient(top, #ffffff 30%,#f6f6f5 100%);
    background: linear-gradient(to bottom, #ffffff 30%,#f6f6f5 100%);
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    border: 1px solid #ccc;
    border-top: 0;
    border-radius: 0 0 5px 5px;
}
.self-add-icon {
    background-color: #434058;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: -1px;
    margin-left: 4px;
    width: 19px;
    height: 19px;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.msg-list-num {
    display: inline-block;
    width: 100%;
    height:35px;
    color: #333;
    position: relative;
    padding: 8px 30px 7px 10px;
    cursor:pointer;
}
.msg-list-num:hover{
    background-color: #eff0f2;
}
.msg-list-del {
    display: inline-block;
    border: 1px solid #dddddd;
    background-color: #dddddd;
    border-radius: 50%;
    cursor: pointer;
    padding: 5px 7px;
    position: absolute;
    line-height: 1px;
    right: 4px;
    top: 4px;
}
.msg-list-del i{
    width:auto;
}
.annotation{
    color: #ee2b28;
    font-size:12px;
}



.preview-area{
    position: absolute;
    left:600px;
    top:0;
    right:0;
    bottom:0;
    width:365px;
    padding: 0 10px;
    justify-content: center;
    align-items: center;
    z-index: 100;
}
.preview-area.on{
    position:fixed;
    left:830px;
    top:40px;
}
.phone-btn{
    border-radius: 10px;
    background-color: #c6c9db;
    position:absolute;
    left:-4px;
}
.phone-btn1{
    width: 7px;
    height: 24px;
    top:60px;
}
.phone-btn2{
    width: 7px;
    height: 48px;
    top:100px;
}
.phone-btn3{
    width: 7px;
    height: 48px;
    top:158px;
}
.phone-btn4{
    width: 7px;
    height: 47px;
    right:-4px;
    left:unset;
    top:88px;
}
.phone-speaker{
    width:96px;
    height:20px;
    border-radius:10px;
    background-color:#c6c9db;
    position:absolute;
    top:17px;
    left:50%;
    transform:translateX(-50%);
}

.preview{
    width:100%;
    position:relative;
}
.preview-box{
    width:100%;
    border:10px solid #c6c9db;
    border-radius:40px;
    overflow:hidden;
    padding: 48px 15px 44px;
    position:relative;
    background-color:#ffffff;
}

.preview-content-box{
    background-color: #f4f4f4;
    border:1px solid #d4d7e3;
    border-radius:8px;
    overflow:hidden;
}
.preview-title{
    width:100%;
    background-color:#ffffff;
    padding:0 20px;
    display:flex;
    align-items:center;
    font-weight:600;
    font-size:16px;
}
.preview-content{
}
.preview-content-top{
    width:100%;
    overflow:hidden;
}
.preview-content-area{
    background-color:#f8f9fb;
}


.preview-content-area #preview-content{
    padding:10px;
    width:100%;
    overflow-x:hidden;
    overflow-y:auto;
    background-color:#f8f9fb;
    resize:none;
    word-break:break-all;
    min-height:150px;
    white-space:pre-wrap;
    height:360px;
    border:none;
}
.preview-content-area #preview-content:focus{
    outline: none;
}
.preview-unsubscribe{
    width:100%;
    text-align:right;
    display: none;
    padding-top:5px;
}

.preview-content-area.lms, .preview-content-area.lms #preview-content{
    background-color: #ffeded;
}
#msg-check.button.lms{
    background-color: #eb5d71!important;
}


.message-option-box{
    width:100%;
    display:flex;
    flex-direction:column;
    margin-top:10px;
    border:1px solid #d4d7e3;
    border-radius:8px;
    background-color:#f8f9fb;
}
.text-conversion-box{
    width:100%;
}

.message-btn-set-box{
    width:100%;
    padding:10px 0;
}
.message-btn-set{
    width:100%;
    height:40px;
    border-radius:5px;
    border:1px solid #bebebe;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background-color .3s;
    cursor:pointer;
    margin-bottom:15px;
}
.message-btn-set:hover{
    background-color: #e9e9e9;
}
.message-btn-set.added-btn{
    border:none;
    box-shadow:1px 2px 3px rgba(0,0,0,.3);
    background-color:#fafafa;
    position:relative;
    padding-right:45px;
    justify-content:flex-start;
    padding-left:10px;
}
.message-btn-set.added-btn .del-added-btn{
    position:absolute;
    font-size:18px;
    top:6px;
    right:5px;
    cursor:pointer;
}
.preview-btn-area{
    width:100%;
    display:none;
    padding:10px;
}
.preview-btn-box{
    width:100%;
    height:30px;
    background-color:#f1f1f1;
    border-radius:12px;
    font-weight:500;
    padding-top:7px;
    text-align:center;
    cursor:pointer;
    overflow:hidden;
    margin-top:5px;
}
.preview-content-title{
    width:100%;
    padding: 5px 10px 0;
    overflow:hidden;
    font-weight:700;
    font-size:14px;
    display:none;
}


.popup-wrap .select{
    width:50%;
    height:40px;
    border:1px solid #919191;
    border-radius:5px;
}
.popup-wrap .select:focus{
    border:2px solid #333333;
}
.btn-add-content{
    width:100%;
    margin-bottom:30px;
}
.btn-add-content .add-legend{
    font-size:11px;
    color:#9e9e9e;
    display:block;
    margin-bottom:3px;
}
.btn-add-content input{
    width:100%;
    height: 40px;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #919191;
    font-weight: 500;
}
.btn-add-content p{
    color: #666666;
    font-size: 11px;
    margin-top: 3px;
    text-align: left;
    font-weight: 400;
}
.btn-title{
    font-size:16px;
    font-weight:600;
    margin-right:8px;
}
.btn-legend{
    font-size:11px;
    color:#666666;
}

.excel-upload-box {
    width: 100%;
    display:flex;
    justify-content:space-between;
}
.excel-notice-box{
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    display: none;
}
.excel-notice-box #change-text{
    font-weight: 700;
    padding-top: 10px;
    padding-bottom: 10px;
}
.excel-upload {
    width: 50%;
    display: inline-flex;
    height: 36px;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: #ffffff;
    background-color: #207345;
    cursor: pointer;
    border: 1px solid #207345;
    border-radius:5px;
}
.excel-upload i {
    font-weight: 300;
    margin-right: 5px;
    font-size: 14px;
}
.excel-upload.sample {
    color: #207345;
    background-color: #ffffff;
    margin-left:5px;
}


.neo-alert-wrap{
    position: fixed;
    top:0;
    left: 0;
    right:0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,.2);
    z-index: 999;
}
.neo-alert-pop{
    width:auto;
    height:auto;
    min-width:200px;
    min-height:75px;
    max-width:200px;
    max-height:75px;
    background-color: #ffffff;
    transition: min-width .2s, min-height .2s, max-width .2s, max-height .2s, opacity .2s;
    overflow: hidden;
    border-radius: 5px;
    -webkit-box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
    box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
    padding: 15px;
    border-top:7px solid #3e3280;
    opacity: 0;
    position: relative;
}
.alert-title{
    font-size: 22px;
    margin-bottom:10px;
}
.alert-content{
    word-break: break-all;
}
.alert-foot{
    margin-top:10px;
    text-align: right;
    position: absolute;
    bottom:15px;
    left:0;
    right:15px;
}
.alert-btn{
    display: inline-block;
    font-size: 14px;
    height:30px;
    background-color: #ecf0f1;
    text-align: center;
    padding: 5px 10px;
    cursor: pointer;
}


.sender-reg-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100;
}
/*.sm-title-box {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 15px;
}*/

.time-set-title {
    font-weight: 500;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    font-size:16px;
}
.send-date-box {
    display: flex;
    align-items: center;
    height: 35px;
    margin-bottom:20px;
}
.send-date-input {
    width: 130px;
    padding-right: 30px;
    display: inline-block;
    position: relative;
    border: 1px solid #e1e1e1;
    /* margin: 0 10px; */
    margin-right:10px;
    margin-left:10px;
    border-radius:6px;
}
.send-search-line input.send-search-input {
    width: 128px;
    padding-left: 10px;
    cursor: pointer;
    height:33px;
    border:none;
}
.send-date-input:after {
    position: absolute;
    right: 10px;
    top: 10px;
    font-family: "Font Awesome 5 Free";
    content: "\f133";
    display: inline-block;
    z-index: 100;
    cursor: pointer;
}
.send-date-box select {
    height: 100%;
    border: 1px solid #e1e1e1;
    margin-right: 10px;
    padding: 0 10px;
    height:35px;
    border-radius:6px;
}
input#send-date-min{
    width:75px;
    height:35px;
    padding:7px 10px;
    margin-right:5px;
}

.time-set-title #divide-chk {
    width: 17px;
    height: 17px;
    margin-right: 5px;
}
.divide-box {
    display: flex;
    width: 60%;
    height: 100%;
    border: 1px solid #e1e1e1;
    position: relative;
    border-radius:6px;
}
.divide-input {
    width: calc(100% - 50px) !important;
    border: none !important;
    height: 33px !important;
    text-align: right;
    font-size: 14px;
}
.send-search-line input {
    width: 231px;
    height: 40px;
    border: 1px solid #e1e1e1;
    border-radius:6px;
}
.divide-box.disable .divide-input, .divide-box.disable .divide-text {
    color: #b1b1b1;
}
.divide-text {
    padding: 0 10px 0 10px;
    display: inline-flex;
    height: 100%;
    width: 50px;
    align-items: center;
}
.divide-box.disable .divide-input, .divide-box.disable .divide-text {
    color: #b1b1b1;
}
.divide-box.disable:after {
    content: '';
    background-color: rgba(0,0,0,.1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
}
.divide-box:last-child {
    width: 40%;
    margin-left: 5px;
}
.divide-box:last-child .divide-input {
    width: calc(100% - 70px) !important;
}
.divide-box:last-child .divide-text {
    width: 70px;
}
.sender-btn-apply-box {
    text-align: center;
}
.sender-sm-box {
    overflow: hidden;
    margin-top: 30px;
}
.sender-box-close {
    display: inline-block;
    height: 45px;
    line-height: 45px;
    box-sizing: border-box;
    color: #5c6a7a;
    background-color: #fff;
    border: 1px solid #768393;
    text-align: center;
    font-size: 16px;
    vertical-align: middle;
    cursor: pointer;
    width: 120px;
    margin: 0 auto;
}
.sender-box-close.apply {
    background-color: #555555;
    color: #ffffff;
}



.loading-area{
    background: rgba(0,0,0,.8);
}
.loading-area {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /*background-color: rgba(0,0,0,.1);*/
    align-items: center;
    justify-content: center;
    z-index: 9999;
    display: none;
}
.loading-container {
    margin: 7px auto;
}
.loading-container, .loading {
    position: relative;
    border-radius: 100%;
}
.loading-container, .loading {
    width: 100px;
    height: 100px;
}
.excel-upload .loading-container, .excel-upload .loading{
    width:30px;
    height:30px;
}

.loading {
    border: 2px solid transparent;
    border-color: transparent #fff transparent #FFF;
    -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
    -moz-transform-origin: 50% 50%;
    -o-animation: rotate-loading 1.5s linear 0s infinite normal;
    -o-transform-origin: 50% 50%;
    -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
    -webkit-transform-origin: 50% 50%;
    animation: rotate-loading 1.5s linear 0s infinite normal;
    transform-origin: 50% 50%;
}
.sender-box-close .loading-container, .sender-box-close .loading{
    width:30px;
    height:30px;
}
#loading-text {
    -moz-animation: loading-text-opacity 2s linear 0s infinite normal;
    -o-animation: loading-text-opacity 2s linear 0s infinite normal;
    -webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
    animation: loading-text-opacity 2s linear 0s infinite normal;
    color: #ffffff;
    font-family: "Helvetica Neue, "Helvetica", ""arial";
    font-size: 10px;
    font-weight: bold;
    margin-top: 45px;
    opacity: 0;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 0;
    width: 100px;
}
.loading-container:hover .loading, .loading-container .loading {
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.sms-title{
    display: inline-block;
    font-weight: 700;
    font-size: 18px;
    width: 130px;
    padding-bottom:15px;
    padding-top:15px;
}
.msg-icon-box {
    padding: 0 5px;
    float: left;
    position: relative;
    cursor:pointer;
}
.msg-icon {
    width: 100%;
    height: 58px;
    overflow: hidden;
    border: 1px solid #d9dbe5;
    background-color: #ffffff;
    color: #777777;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}
.msg-icon-text{
    font-size:14px;
    font-weight:500;
    text-align:center;
    color:#707071;
    line-height:16px;
    padding-top:5px;
}


/*addr_manage*/

.addr-area{
    width:100%;
    display: flex;
    position: relative;
}
.addr-box{
    width:785px;
    padding-left:10px;
}
.addr-box.folder{
    width:425px;
}
.addr-box.group{
    width:30%;
}
.addr-box.individual{
    border-right: none;
}
.addr-box .box-top{
    display:flex;
    align-items:center;
    padding-bottom:10px;
}

.addr-box .box-top .title{
    color: #7d7d7d;
    font-size: 18px;
    font-weight:500;
}
.addr-box .box-top .title.addr-title{
    padding-left:10px;
}
.addr-box .box-top .title #addr-cnt{
    font-weight:900;
}
.addr-box .box-top .sub-title-box{
    height: 35px;
    width:100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.addr-box .box-top .sub-title-box .sub-title{
    font-size: 22px;
}

.addr-box.individual .box-top .sub-title-box .sub-title{
    font-size:17px;
    color: #b2b2b2;
    font-weight:300;
}
.addr-box.individual .box-top .sub-title-box .sub-title span{
    color: #e01b1c;
    font-size: 20px;
    font-weight:bold;
}
.addr-box .box-top .btn{
    cursor: pointer;
    display: inline-block;
    width:100px;
    height: 35px;
    line-height: normal;
    text-align: center;
    font-size: 14px;
    /*background: -moz-linear-gradient(top, #ffffff 30%, #f6f6f5 100%);
    background: -webkit-linear-gradient(top, #ffffff 30%,#f6f6f5 100%);
    background: linear-gradient(to bottom, #ffffff 30%,#f6f6f5 100%);*/
    background-color: #3c61a4;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f5',GradientType=0 );
    border:1px solid #3c61a4;
    color: #ffffff;
    font-weight:500;
}
.addr-box .box-top .btn:hover{
    transition:all 0.3s;
    /*background: -moz-linear-gradient(top,  #ffffff 30%, #eaeaea 100%);
    background: -webkit-linear-gradient(top,  #ffffff 30%,#eaeaea 100%);
    background: linear-gradient(to bottom,  #ffffff 30%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );*/
    background-color: #eb5d71;
}

.addr-box .box-top .input-area{
    width:100%;
    display: flex;
    border:1px solid #d4d7e3;
    padding:20px;
    border-radius:8px;
    background-color: #f8f9fb;
}
.addr-box .box-top .input-area .input-box{
    /*width:20%;*/
    height: 100%;
    padding-left:10px;
}
.addr-box .box-top .input-area .input-box:first-child{
    padding-left:0;
}
.addr-box .box-top .input-area .input-box:first-child .addr-input{
    width:120px;
}
.addr-box .box-top .input-area .input-box.lg{
    width:30%;
}
.addr-box .box-top .input-area .input-box .addr-input{
    width:165px;
    height:100%;
    padding: 10px;
    font-size:14px;
    border:1px solid #c0c2c8;
    color: #747474;
    border-radius:6px;
}
.addr-box .box-top .input-area .input-box .addr-input::placeholder{
    color: #b3b7c5;
    font-size:14px;
}
.addr-box .box-top .input-area .input-box .addr-input:focus{
    outline: none;
}

.addr-box .box-top .input-area .input-box .addr-btn{
    width:120px;
    height: 100%;
    font-size: 14px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    cursor: pointer;
    border: none;
    border-radius:6px;

}
.addr-box .box-top .input-area .input-box .addr-input.disable{
    background-color: #f0f0f0;
    color:#c8c8c8;
}
.addr-box .box-top .input-area .input-box .addr-btn.disable{
    background-color: #f0f0f0;
    color:#3c61a4;
    border:1px solid #c0c2c8;
}
.addr-box .box-cont{
    width:100%;
    min-height:750px;
    padding:24px;
    border:1px solid #b3b7c5;
    border-radius:8px;
}
.addr-box .box-cont#addr-list-box{
    border:none;
    padding:0;
    padding-top:20px;
}
.addr-box .box-cont.disable{
    color:#c8c8c8;
}
.addr-box .box-cont.disable select{
    background-color: #f0f0f0;
    color: #c8c8c8;
}
.addr-box .box-cont .list-top{
    height: 50px;
    border-bottom:1px solid #efefef;
    border-radius:6px 6px 0 0;
    padding: 10px;
    display: flex;
    align-items: center;
}
.addr-box #addr-list-box.box-cont .list-top{
    padding-right:0;
    background-color: #eff0f2;
}

.addr-box .folder-add-btn-box{
    margin-top:20px;
}
.addr-box .box-cont .list-top .list-select{
    border: none;
    width:65px;
    font-size :13px;
}
.addr-box .box-cont .list-top .list-select:focus{
    outline: none;
}
.list-box{
    width:100%;
    overflow: auto;
}
.list-box.disable{
    /*background-color: #f0f0f0;*/
}
/*#folder-list{
    min-height:795px;
}*/
/*#mem-addr-list-box{
    min-height:550px;
}*/
/*.list-box ul{
    overflow: hidden;
}*/
.list-box li.list{
    display: inline-flex;
    width:100%;
    font-size:13px;
    height: 45px;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    border:1px solid #d4d7e3;
}
.list-box li.list:hover{
    background-color: #ecf1f7;
}
.list-box li.list.on{
    background-color: #ecf1f7;
    font-weight:700;
}
.addr-box .list-select{
    width:127px;
    height:35px;
    border: 1px solid #c0c2c8;
    border-radius:6px;
}
#list-select-addr{
    margin-bottom:10px;
}
.addr-box .box-cont .list-top .list-check{
    width:16px;
    height: 16px;
    margin-right:5px;
}
.addr-box .box-cont .list-top .grp-all{
    height: 24px;
    line-height :23px;
    color: #707070;
    font-size:13px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #eaeaea;
    display: inline-block;
    width:85px;
    margin-left:auto;
}
.list-box li.list .edit-box{
    margin-left: auto;
}
.list-box li.list .edit-box span{
    display:inline-block;
    margin-left:10px;
}
.mem-addr-btn{
    display: inline-block;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
    margin:0 2.5px;
    transition: background-color .3s ;
}
.mem-addr-btn:hover{
    background-color: #e1e1e1;
}
.mem-addr-input{
    border: 1px solid #c0c2c8;
    padding-left: 5px;
    width:100%;
    height:35px;
    border-radius:6px;
}
.mem-addr-input:focus{
    outline: none;
}


.mem-addr-list-box{

}
.mem-addr-list{
    display: inline-flex;
    width: 100%;
    font-size: 13px;
    height: 50px;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 20px 0 0 20px;
    margin-bottom: 5px;
    cursor: pointer;
    border-bottom:1px solid #edeff4;
}
/*.mem-addr-list:hover{
    background-color: #ecf1f7;
}*/
.mem-addr-list div{
    float: left;
    font-size:14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:0 5px;
}
.mem-addr-list div.mem-addr-chkbox{
    width:5%;
    padding-left:5px;
}
.mem-addr-list div.mem-addr-chk{
    width: 5%;
}
.mem-addr-list div.mem-addr-name{
    width:22%;
}
.mem-addr-list div.mem-addr-name input[type='checkbox']{
    margin-right:5px;
}
.mem-addr-list div.mem-addr-phone{
    width:30%;
}
.mem-addr-list div.mem-addr-memo{
    width:24%;
}
.mem-addr-list div.mem-btn-box{
    width:19%;
    justify-content: flex-end;
}
.mem-addr-chk{
    width:24px;
    height:24px;
}
.mem-addr-chk input[type='checkbox']{
    width:24px;
    height:24px;
    border:1px solid #4283f8;
}


.addr-reg-wrap{
    position: fixed;
    top:0;
    left: 0;
    right:0;
    bottom:0;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,.5);
    z-index: 100;
}
.addr-reg-pop{
    width:400px;
    background-color: #ffffff;
    transition: all .3s;
}
.addr-reg-head{
    width:100%;
}
.addr-reg-head .title-box{
    /*border-bottom: 2px solid #000000;
    padding-bottom:5px;
    position: relative;*/
    position: relative;
    font-weight: 400;
    display: flex;
    align-items: center;
    height: 50px;
    background-color: #3c61a4;
    padding: 15px 25px;
}
.addr-reg-head .title-box h4{
    font-size: 20px;
    color: #ffffff;
    display: inline-block;
    font-weight: 400;
    vertical-align: bottom;
    padding-right: 15px;
    position: relative;
}
.addr-reg-body{
    width:100%;
    padding:30px;
}
.addr-reg-input{
    font-size:15px;
    border:1px solid #e1e1e1;
    width:100%;
    height: 40px;
    padding: 0 10px;
    border-radius:6px;
}
.addr-reg-input:focus{
    outline: none;
}
.addr-reg-input::placeholder{
    color: #c1c1c1;
}
.addr-reg-foot{
    width:100%;
    text-align: center;
    padding-top:20px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.addr-reg-btn{
    display:inline-flex;
    width:120px;
    height: 45px;
    border: 1px solid #768393;
    color: #5c6a7a;
    font-size:16px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.addr-reg-btn.add{
    background-color: #434058;
    border: none;
    color: #ffffff;
}

.addr-loader-box{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.2);
    box-shadow: 1px 2px 3px rgba(0,0,0,.2);
    display: none;
    align-items: center;
    justify-content: center;
}
.addr-loader-box .loading-container, .addr-loader-box .loading{
    width:100px;
    height:100px;
    border-color: transparent #cf232a transparent #cf232a;
}


.address-view-loader .loading-container, .address-view-loader .loading{
    width:50px;
    height:50px;
    border-color: transparent #cf232a transparent #cf232a;
}
.addr-list-title{
    font-size:18px;
    color:#3c61a4;
    font-weight:600;
    height:45px;
    display:flex;
    align-items:center;
}

#addr-excel-box .sender-box{
    max-height:600px;
    width:600px;
}

#addr-excel-box .sender-box-body{
    max-height:500px;
    min-height:500px;
    overflow-y: auto;
}
#addr-excel-box .sender-btn-apply-box{
    height: 50px;
    margin-top: 0;
}
#addr-excel-box .sender-btn-apply-box{
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #cccccc;
}
#addr-excel-box .sender-box-close{
    height: 35px;
    line-height: 35px;
    margin: 0 5px;
    border-radius: 5px;
}



.payment-list-box{

}
.payment-list{
    width:100%;
    height:70px;
    border:1px solid #d4d7e3;
    background-color: #f8f9fb;
    border-radius:8px;
    margin-bottom:10px;
    display:flex;
}
.payment-list-item{
    padding:0 70px 0 10px;
    height:100%;
    display:inline-flex;
    align-items:center;
    cursor:pointer;
}
.payment-list-item.charge{
    padding-right:0;
}
.payment-list-item.chk{
    width:70px;
    height:70px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
}
.payment-list-item.chk input[type='radio']{
    width:25px;
    height:25px;
}
.payment-list-item.price{
    font-size:20px;
    color:#45474b;
    font-weight:600;
    min-width:140px;
    max-width:140px;
    padding-right:10px;
}
.payment-list-item.msg, .payment-list-item.charge{
    font-size:14px;
    color:#3c61a4;
    font-weight:400;
}
.payment-list-item.charge .pay-item-desc{
    display:block;
    padding:0;
    font-size:12px;
    font-weight:400;
}
.payment-list-item.msg span{
    font-size:18px;
    color:#45474b;
    font-weight:600;
    padding-left:25px;
}
.payment-list-item.charge span{
    font-size:18px;
    color:#4084ff;
    font-weight:600;
    padding-left:25px;
}

/*.select#brand-select{
    width:250px;
}*/
.excel-download{
    min-width:125px;
    background-color:#39a15b;
    color:#ffffff;
    border-radius:6px;
}

/* send_view */


.board-tbl {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #cccccc;
    border-width: 1px 0;
    margin-bottom: 30px;
}
.board-tbl tr {
    border-top: 1px solid #efefef;
}
.board-tbl tr:first-child {
    border: none;
}
.board-tbl thead tr {
    border-top: 1px solid #333333;
    border-bottom: 1px solid #333333;
}
.board-tbl tr td {
    text-align: center;
    font-size: 13px;
    color: #45474b;
    padding: 20px 0;
}
.board-tbl thead tr th {
    font-weight: 400;
    font-size: 14px;
    background-color: #eff0f2;
    height: 50px;
    color: #707071;
}


.msg-recv-box {
    border: 1px solid #cccccc;
    width: 670px;
    height: 480px;
    float: right;
    position: relative;
    margin-left: 20px;
    padding: 15px;
    border-radius: 8px;
}


.msg-send-box{
    margin-top:20px;
    overflow: hidden;
}
.msg-write-box{
    -webkit-box-shadow: 0px 0px 5px 2px rgba(148,148,148,.3);
    -moz-box-shadow: 0px 0px 5px 2px rgba(148,148,148,.3);
    box-shadow: 0px 0px 5px 2px rgba(148,148,148,.3);
    border:2px solid #818181;
    float: left;
    border-radius: 8px;
    overflow: hidden;
}
.msg-write-box.rcs{
    height:480px;
}
.msg-write-head{
    height:50px;
    width:100%;
}
.msg-write-head input{
    height:50px;
    padding :0 20px;
    width:100%;
    font-size:18px;
    border:none;
    outline: none;
    background-color:#f8f9fb;
}
.msg-write-head input::placeholder{
    color:#b3b7c5;
}
.msg-write-body{
    min-height:278px;
    position: relative;
}
.msg-write-body.result-view .preview-btn-area{
    padding: 0 10px;
    display:block;
}

.msg-write-body textarea{
    width:100%;
    height:250px;
    padding:0 20px 20px;
    overflow-y: auto;
    font-size:16px;
    cursor: text;
    line-height:23px;
    resize: none;
    outline: 0;
    border:0;
    color: #45474b;
    display: block;
    background-color:#f8f9fb;
}
.msg-write-body.rcs{
    height: 388px;
}
.msg-write-body.rcs textarea{
    height: 100%;
}
.msg-write-foot{
    height:40px;
    width:100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding:5px 0 6px 5px;
    font-size:13px;
    color:#4084ff;
}
.msg-write-foot p{
    margin:0 10px;
}
.msg-write-foot span{
    font-weight:600;
}
.msg-write-foot span#long-short-text{
    color: #4084ff;
    transition : color .3s
}
.msg-write-foot span#long-short-text.rcs{
    color: #2c398a;
}
.msg-write-foot span#long-short-text.long{
    color: #2e2e2e;
}
.msg-write-box.result-view{
    width: 100%;
    border-radius: 8px;
    box-shadow: none;
    border-width: 1px;
    border-color: #d4d7e3;
    background-color:#f8f9fb;
}
.msg-write-box.result-view input, .msg-write-box.result-view textarea{
    font-size:18px;
}
.msg-recv-box.result-tbl-box{
    width: 800px;
    height:auto;
    padding:0;
    border:0;
}
.msg-recv-box.result-tbl-box .board-tbl-box{
    overflow-y: auto;
    height:550px;
}
.msg-recv-box.result-tbl-box .board-tbl{
    margin-bottom: 0;
    border:none;
}
.msg-recv-box.result-tbl-box .board-tbl tr.msg-view-list{
    cursor: pointer;
    border-bottom: 1px solid #707070;
    border-top:none;
}
.msg-recv-box.result-tbl-box .board-tbl tr.msg-view-list:last-child{
    border-bottom: none;
}
.msg-recv-box.result-tbl-box .board-tbl tr.msg-view-list:hover, .msg-recv-box.result-tbl-box .board-tbl tr.msg-view-list.on{
    cursor: pointer;
    border-bottom: 1px solid #d4d7e3;
}

.msg-recv-box.result-tbl-box .board-tbl tr td{
    padding: 10px 0;
    height:48px;
}
.msg-recv-box.result-tbl-box .board-tbl tr td.result-text{
    color: #bbbbbb;
}
.msg-view-left-box{
    width:420px;
    float:left;
}

.msg-view-detail-box{
    padding-top: 25px;
    width:100%;
    overflow: hidden;
}
.detail-tbl{
    width: 100%;
    border-collapse: collapse;
}
.detail-tbl tr th, .detail-tbl tr td{
    font-size: 18px;
    padding:5px 0;
    text-align:left;
}
.detail-tbl tr td .detail-td{
    padding:10px;
    border:1px solid #c0c2c8;
    background-color:#eff0f2;
    border-radius:6px;
    font-size:14px;
    color:#4084ff;
}


.msg-fail{
    color: #ed1b23;
    cursor:pointer;
}
.msg-success{
    color: #0089ec;
}

/* mypage */
.mypage-top-box{
    height:90px;
    padding:15px 0;
    border-top:1px solid #e8e8e8;
    border-bottom:1px solid #e5e5e5;
    background-color: #ffffff;
}
.mypage-top-user-box{
    float: left;
    border-right:1px solid #eaeaea;
    height:60px;
    padding:0 20px;
}
.mypage-top-user-box.box1{
    width:40%;
    padding-left: 0;
}
.mypage-top-user-box.box2{
    width:25%;
}
.mypage-top-user-box.box3{
    width:20%;
}
.mypage-top-user-box.box4{
    width:15%;
}
.mypage-top-title{
    font-size:13px;
    color: #686868;
    font-weight:600;
    height:25px;
    display: flex;
    align-items: flex-end;
}
.mypage-top-title.title{
    font-size:16px;
    color: #333;

}
.mypage-area{
    width:100%;
    position: relative;
}
.mypage-top-content{
    font-size:14px;
    height:32px;
}
.mypage-top-cont1{
    font-size:16px;
    float: left;
}
.mypage-top-cont1 span,.charge-btn{
    display: inline-block;
    padding:5px;
    border:1px solid #eaeaea;
    font-size:12px;
    color: #707070;
    cursor: pointer;
}
.mypage-top-cont2{
    float: right;
}
.mypage-top-cont2 a{
    display: inline-block;
    font-size:13px;
    padding:5px 10px;
}
.mypage-go-btn{
    color: #ffffff;
    background-color: #434058;
}
.mypage-log-out{
    color: #434058;
    border:1px solid #434058;
}
.color-red{
    color: orangered;
}
.mypage-top-content.flex-end{
    display: flex;
    align-items: flex-end;
    padding-bottom:5px;
}
.mypage-title{
    font-size: 32px;
    color: #2a2a2a;
    font-weight: 300;
}
.mypage-title span{
    font-weight:700;
}
.mypage-menu-btn-box{
    padding:40px 0;
    overflow: hidden;
}
.mypage-menu-btn-box ul{
    height:55px;
    border-left:1px solid #cccccc;
}
.mypage-menu-btn-box ul li{
    height:100%;
    border-top:1px solid #cccccc;
    border-right:1px solid #cccccc;
    border-bottom:1px solid #cccccc;
}
.mypage-menu-btn-box ul li.faq-type{
    width:200px;
    border:none !important;
}
.mypage-menu-btn-box ul li a{
    color: #434058;
    font-size:18px;
    cursor: pointer;
    width: 100%;
    height:100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.mypage-menu-btn-box ul li a:hover{
    background-color: #f9f9f9;
}
.mypage-menu-btn-box ul li.on{
    border-bottom:none;
    border-top:2px solid #434058;
}
.mypage-info-box{
    width:100%;
    height:42px;
}
.mypage-info-box ul, .pwchange-info-box ul{
    list-style:disc;
    padding-left:20px;
}
.mypage-info-box ul li, .pwchange-info-box ul li{
    clear: both;
    font-size: 14px;
    color: #686868;
}
.mypage-user-box{
    width:100%;
    overflow: hidden;
    margin-top: 50px;
    margin-bottom:10px;
}
.mypage-user-title{
    font-size: 20px;
    font-weight:600;
}
.mypage-tbl{
    border-collapse: collapse;
    border-top:1px solid #808080;
    width:100%;
}
.mypage-tbl td{
    padding:15px 20px;
    border-bottom:1px solid #cccccc;
}
.mypage-tbl-td1{
    background-color: #f9f9f9;
    font-size:16px;
    font-weight:600;
}
.mypage-tbl-td2 input[type='text'],.mypage-tbl-td2 select{
    width:215px;
    height:40px;
    border:1px solid #e1e1e1;
    background-color: #ffffff;
    padding:0 12px;
    font-size: 15px;
}
.mypage-tbl-td2 .sm-text{
    font-size:14px;
    color: #0061d9;
}
.mypage-area .msg-send-btn-box{
    margin:40px auto 0;
}
.pwchange-info-box{
    padding:20px;
    border:1px solid #e1e1e1;
    overflow: hidden;
    margin:30px 0;
}
.pwchange-info-box .title{
    font-size: 22px;
    font-weight:600;
    margin-bottom:10px;
}
.pwchange-info-box li{
    color: #000000 !important;
    font-size:15px !important;
}
.mypage-tbl-td2 input[type='password']{
    width:100%;
    height:40px;
    border:1px solid #e1e1e1;
    background-color: #ffffff;
    padding:0 12px;
    font-size: 15px;
}
.mypage-area{
}
.mypage-title{
    font-size:20px;
    color:#45474b;
    font-weight:700;
    border-bottom:2px solid #d4d7e3;
    padding-bottom:10px;
}
.mypage-line{
    display:flex;
    align-items:center;
    height:60px;
    padding: 0 20px;
    color:#45474b;
    border-bottom:1px solid #d4d7e3;
}
.mypage-sub{
    font-size:18px;
    font-weight:600;
    width:150px;
}
.mypage-text{
    font-size:14px;
}
.mypage-line.bold-line{
    border-width:2px;
}
.sender-pop-box{
    padding:30px;
}
.sender-reg-btn-box{
    padding-top:20px;
}
.sender-reg-btn{
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:220px;
    height:50px;
    border-radius:6px;
    background-color: #3c61a4;
    font-size:14px;
    color:#ffffff;
    font-weight:500;
}
.sender-reg-box{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: rgba(0,0,0,.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100;
}
.sender-box {
    width: 430px;
    background-color: #ffffff;
    border-radius:6px;
    overflow:hidden;
}
.sender-box.sender-select{
    width:600px;
    -webkit-box-shadow: 0px 0px 5px 2px rgba(148,148,148,.3);
    -moz-box-shadow: 0px 0px 5px 2px rgba(148,148,148,.3);
    box-shadow: 0px 0px 5px 2px rgba(148,148,148,.3);
}
.sm-title-box{
    /*font-size:20px;
    font-weight:500;
    margin-bottom:15px;*/
    height: 50px;
    background-color: #3c61a4;
    padding: 15px 25px;
    position: relative;
    font-weight: 400;
    display: flex;
    align-items: center;
    vertical-align: bottom;
    font-size: 20px;
    color: #ffffff;
}

.sender-box-text-area{
    padding-bottom:25px;
    font-size:13px;
    border-bottom:1px solid #dbdbdb;
}
.sender-sm-box{
    overflow: hidden;
    margin-top:30px;
}
.sender-box-title{
    font-size:15px;
    font-weight:500;
    color: #434058;
}
.cert-document{
    padding-top:10px;
}
.sender-input-box{
    margin-top:5px;
    overflow: hidden;
    display: flex;
}
.sender-input{
    font-size: 15px;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    background-color: #fafafa;
    border: 1px solid #ccc;
    width:80%;
    margin-right:5px;
    border-radius:6px;
}
.sender-btn{
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    color: #fff;
    background-color: #555555;
    text-align: center;
    font-size: 15px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    width:20%;
    border-radius:6px;
}
.sender-box-close{
    display: inline-block;
    height: 45px;
    line-height: 45px;
    box-sizing: border-box;
    color: #5c6a7a;
    background-color: #fff;
    border: 1px solid #768393;
    text-align: center;
    font-size: 16px;
    vertical-align: middle;
    cursor: pointer;
    width:120px;
    margin: 0 auto;
}
.sender-box-close.apply{
    background-color: #555555;
    color: #ffffff;
}
.send-cert-box{
    padding:20px 0;
    display: none;
}
.agency-cert-box{
    display: none;
    overflow: hidden;
    border-top:1px solid #dbdbdb;
}
.sender-btn-apply-box{
    text-align: center;
}

.template-top{
    padding-bottom:10px;
    border-bottom: 2px solid #d4d7e3;
    margin-bottom:10px;
}
/*.msg-select-box{
    margin-bottom:30px;
}*/


.join-box-head.column{
    flex-direction:column;
}
.join-title{
    font-weight:700;
    font-size:32px;
    color:#000000;
}
.join-step-area{
    width:100%;
    display:flex;
    align-items:center;
    padding-top:35px;
}
.join-step-box{
    width:166px;
    height:70px;
    border-radius:10px;
    background-color:#d4d7e3;
    padding:10px;
}
.join-step-title{
    font-weight:700;
    color:#ffffff;
    font-size:14px;
    text-align:center;
}
.join-step-text{
    font-size:18px;
    color:#707071;
    text-align:center;
    padding-top:5px;
}
.join-step-box.on{
    background-color:#4084ff;
}
.join-step-box.on .join-step-text{
    color:#ffffff;
}
.join-step-division{
    width:30px;
    text-align:center;
}


.join-form-area{
    padding: 30px 138px;
}
.join-form-title{
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:#ffffff;
    width:100%;
    height:60px;
    border-radius:10px;
    font-weight:700;
    color:#000000;
    font-size:24px;
}
.join-form-info{
    padding-top:20px;
    font-size:14px;
    color:#4084ff;
    padding-bottom:10px;
}
.join-form-checkbox{
    display:flex;
    align-items:center;
}
.join-form-dom{
    margin-top:20px;
}
.join-form-checkbox input[type="checkbox"]{
    width:24px;
    height:24px;
    border-radius:4px;
    border:2px solid #4283f8;
    margin-right:8px;
    cursor:pointer;
}
.join-form-checkbox label{
    font-size:16px;
    font-weight:700;
    color:#45474b;
    cursor:pointer;
}
.join-form-checkbox.all-chk label{
    font-size:18px;
}
.terms-text-box{
    width:100%;
    height:200px;
    overflow-y:auto;
    background-color:#ffffff;
    border-radius:8px;
    border:1px solid #d4d7e3;
    padding:20px 25px;
}
.terms-text-box.sm{
    height:85px;

}










/* terms */
.terms-area{
}
.terms-box{
    margin-bottom:20px;
    overflow: hidden;
}
.terms-area h3, .terms-area h4{
    font-weight:500;
}
.terms-area h3{
    margin-bottom:20px;
}
.terms-area h4{
    margin-bottom:10px;
}
.terms-area p{
    margin-bottom:10px;
    font-size: 14px;
    color: #666666;
}
.terms-area ol{
    padding-left:20px;
    margin-bottom:10px;
}
.terms-area ol li{
    font-size:14px;
    color: #555555;
}
.terms-area ol li ol {
    list-style: hangul;
    margin-bottom:0;
    padding-left:30px;
}
.terms-area ol li ol li ol{
    list-style:hangul-consonant;
}
.terms-area ol li ol li ol li ol{
    list-style: none;
}






/*join*/


.join-wrapper{
    width:100%;
    background-color:#f6f8ff;
}
.join-head{
    height:65px;
    width:100%;
    border-bottom:1px solid #d4d7e3;
    text-align:center;
    background-color:#ffffff;
}
.join-head .logo{
    width:130px;
    height:100%;
    display:inline-flex;
    align-items:center;
}
.join-head .logo img{
    width:100%;
}
.join-content-box{
    margin:20px auto;
    width:1030px;
    background-color:#ffffff;
    box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.04);
    border-radius:10px;
}
.join-box-head{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:35px 138px;
    border-bottom:1px solid #d4d7e3;
}
.join-target-box{
    width:182px;
    overflow:hidden;
    padding-top:25px;
    margin:0 30px;
}
.join-target-img{
    width:100%;
    text-align:center;
    width:50px;
    height:50px;
    margin:0 auto;
}
.join-target-img img{
    width:50px;
    height:50px;
}
.join-target-name{
    text-align:center;
    font-size:24px;
    font-weight:700;
    color:#45474b;
    margin-top:12px;
    margin-bottom:24px;
}
.join-target-btn{
    width:100%;
    height:48px;
    border-radius:6px;
    background-color:#dfe2ef;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:14px;
    color:#707071;
    font-weight:600;
    cursor:pointer;
}
.join-target-btn.business{
}
.join-target-btn.on{
    background-color:#3c61a4;
    color:#ffffff;
}

.join-box-foot{
    border-top:1px solid #d4d7e3;
    padding:50px 0;
}
.join-btn-box{
    display:flex;
    align-items:center;
    justify-content:center;
}
.join-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:150px;
    height:50px;
    border-radius:6px;
    box-shadow: 0 1px 3px 0 rgba(39, 70, 127, 0.06);
    border:1px solid #3c61a4;
    font-weight:600;
    color:#3c61a4;
    font-size:14px;
    margin: 0  10px;
    cursor:pointer;
}
.join-btn.confirm{
    background-color:#45474b;
    color:#ffffff;
    border-color: transparent;
}


.join-description-line{
    display:flex;
    align-items:center;
    padding:20px 50px;
    min-height:114px;
}
.join-description-title{
    font-size:20px;
    font-weight:700;
    color:#3c61a4;
    width:220px;
}

.join-description-content{
    width:182px;
    margin: 0 30px;
}
.join-description-img{
    width:50px;
    height:50px;
    margin:0 auto;
}
.join-description-text{
    font-weight:700;
    font-size:16px;
    color:#45474b;
    text-align:center;
    padding-top:5px;
}
.join-description-text.no-bold{
    font-weight:400;
}

.bg-grey{
    background-color:#f9f9f9;
}

.join-input-form{
    display:flex;
}
.input-form-title{
    display:inline-block;
    position:relative;
    width:200px;
    font-weight:700;
    font-size:18px;
    color:#45474b;
    padding-top:5px;
}
.join-input-box{
    width:300px;
}
.join-input{
    width:100%;
    height:35px;
    border:1px solid #c0c2c8;
    border-radius:6px;
    margin-bottom:10px;
    font-size:14px;
    color:#45474b;
    padding:10px;
}
.join-input.readonly{
    background-color:#eff0f2;
}
.join-input#join-upload-input{
    color:#4084ff;
}
.join-input-list{
    margin-left:200px;
}
.join-input-text{
    font-size:12px;
    color:#707071;
    margin-bottom:5px;
    width:100%;
}
.join-input-btn{
    display:inline-block;
    padding:9px 30px;
    color:#3c61a4;
    font-size:14px;
    font-weight:600;
    border: 1px solid #3c61a4;
    border-radius:6px;
    max-height:35px;
    background-color:#ffffff;
    margin-left:10px;
    cursor:pointer;
}
.join-upload{
    display:none;
}

.join-input-box.phone{
    width:auto;
}
.join-input-box.phone .join-input{
    width: 245px;
}
.join-input-box label{
    font-size:16px;
    color:#707071;
    padding-left:20px;
}
.join-input-box.phone .join-input.extension{
    width:140px;
    margin-left:8px;
}

.join-comp-img{
    text-align:center;
    padding-top:50px;
}
.join-comp-title{
    text-align:center;
    font-size:32px;
    font-weight:700;
    color:#3c61a4;
    line-height:42px;
    letter-spacing:-0.8px;
    padding:25px 0;
}
.join-comp-text{
    text-align:center;
    font-size:16px;
    font-weight:700;
    color:#45474b;
    line-height:26px;
    letter-spacing:-0.4px;
    padding-bottom:60px;
}
.join-btn.comp{
    background-color:#3c61a4;
    color:#ffffff;
}

.message-write-area#resend-box{
    display:none;
}

.sender-select-box{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,.3);
    display: none;
    z-index:110;
}
.sender-select-tbl{
    width:100%;
    border:1px solid #e1e1e1;
}
.sender-select-tbl .sender-select-tr{
    cursor: pointer;
}
.sender-select-tbl .sender-select-tr:hover{
    background-color: #eeeeee;
}
.sender-select-tbl th{
    height: 40px;
}
.sender-select-tbl td{
    height: 40px;
    text-align: center;
    border: 0;
    border-top:1px solid #e1e1e1;
}

.sender-select-box#load-addr{
    display: none;
}
.load-addr-tab-box{
    width:100%;
    display: flex;
    align-items: center;
    margin-top:15px;
}
.load-addr-tab{
    width:50%;
    height:50px;
    border-bottom:1px solid #333333;
    font-size:16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.load-addr-tab.on{
    border: 1px solid #333333;
    border-bottom:none;
    font-weight:500;
}
.address-view-box{
    border: 1px solid #e1e1e1;
    height:250px;
    overflow-y: auto;
    position: relative;
    border-radius:6px;
}
.address-view-loader{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.3);
    box-shadow: 1px 3px 5px rgba(0,0,0,.3);
    border-radius: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.create-table{
    width:100%;
    border-bottom:1px solid #e1e1e1;
    border-collapse: collapse;
}
.create-table thead th, .create-table tbody td{
    font-size:15px;
    height: 40px;
    font-weight: 400;
}
.create-table thead th:last-child, .create-table tbody tr td:last-child{
}
.create-table thead th{
    color: #979797;
    background-color: #fafafa;

}
.create-table tbody td{
    border-top:1px solid #e1e1e1;
    text-align: center;
}
.create-table .create-folder-list{
    cursor: pointer;
}
.create-table .create-folder-list:hover{
    background-color: #f5f5f5;
}
.list-group{
    background-color: #e5e5e5;
    font-weight: 500 !important;
}


#msg-file-area{
    display:none;
}


/*faq*/
.mypage-menu-btn-box{
    padding-top :20px;
    overflow: hidden;
}
.mypage-menu-btn-box ul{
}
.mypage-menu-btn-box ul li{
}
.mypage-menu-btn-box ul li.faq-type{
}
.mypage-menu-btn-box ul li a{
    border-radius:19px;
    border:1px solid #4084ff;
    background-color:#ffffff;
    padding:8px 30px;
    cursor:pointer;
    font-size:16px;
    color:#4084ff;
}
.mypage-menu-btn-box ul li a:hover{
    background-color: #f9f9f9;
}
.mypage-menu-btn-box ul li.on a{
    color:#ffffff;
    background-color:#4084ff;
}
.no-pd{
    padding:0;
}
.faq-search-bar{
    padding-top:20px;
    position: relative;
    display:flex;
    align-items:center;
}
.faq-search-bar input#faq-keyword{
    width:680px;
    height:50px;
    border-radius:25px;
    background-color:#ffffff;
    border:2px solid #b3b7c5;
    padding: 15px
}
.faq-search-bar input#faq-keyword::placeholder{
    color: #ff8527;
}
.faq-search-bar button#do-search{
    cursor: pointer;
    display:inline-flex;
    width:140px;
    height:50px;
    align-items:center;
    justify-content:center;
    background-color:#45474b;
    border-radius:25px;
    color:#ffffff;
    font-size:18px;
    font-weight:600;
    margin-left:10px;
}
.faq-nav{
    width: 210px;
    float: left;
}
.faq-nav-box{
    padding-top:70px;
}
.faq-nav-box ul{
    overflow: hidden;
}
.faq-nav-box ul li{
    clear: both;
    margin-bottom:20px;
    cursor: pointer;
}
.faq-nav-box ul li a{
    color: #333333;
    font-size:16px;
}
.faq-nav-box ul li a:hover{
    color: #3c61a4;
}
.faq-list-area{
    /*width: calc(100% - 210px);*/
    width:100%;
    float: left;
}
.faq-list-area.charge{
    width: 100% !important;
}
.faq-list-box{
    overflow: hidden;
    padding-bottom: 150px;
    min-height:450px;
}
.faq-list-box.send-result{
    border-left: none;
}
.faq-title{
    margin-top: 30px;
    margin-bottom:25px;
    font-size:34px;
    font-weight:300;
    color: #666666;
}
.faq-list{
    padding:30px 20px;
    width:1000px;
}
.faq-list-line{
    position: relative;
    cursor: pointer;
}
.faq-list-line.on .faq-q{
    color:#3c61a4;
    font-weight:700;
}
.faq-list-line.on .faq-a{
    display: block;
}
.faq-list-line .faq-arrow{
    position: absolute;
    font-size:20px;
    top:14px;
    right:10px;
    color:#999999;
}
.faq-list-line.on .faq-arrow{
    transform: rotate(180deg);
}
.faq-q{
    padding:16px 24px;
    font-size:16px;
    border-radius:10px;
    border:1px solid #d4d7e3;
    background-color:#f8f9fb;
    margin-bottom:5px;
}
.faq-q span{
    color: #666666;
}
.faq-q:hover span{
    color: #ff8527;
}
.faq-a{
    border-radius:10px;
    border:2px solid #b3b7c5;
    padding:16px 24px;
    background-color: #ffffff;
    word-break: break-all;
    display: none;
    margin-bottom:5px;
}
.faq-a p{
    line-height: 30px;
    color: #333333;
    font-size:16px;
}
.faq-btn{
    display: block;
    width: 145px;
    height: 50px;
    border-radius: 23px;
    background-color: #ff8527;
    color: #fff;
    text-align: center;
    padding-top:12px;
}


.faq-top-box{
    padding:20px;
    border-bottom:1px solid #d4d7e3;
}
.faq-top{
    padding:30px;
    border-radius: 8px;
    border: solid 1px #d4d7e3;
    background-color: #f8f9fb;
}
.faq-top-title{
    font-size:20px;
    font-weight:700;
    color:#4084ff;
    padding-bottom:5px;
}
.faq-top-sub{
    font-size:14px;
    font-weight:400;
    color:#707071;
}



.template-area{
    margin-left:-10px;
    margin-right:-10px;
}
.template-box{
    width:320px;
    padding:10px;
}
.template-item, .rcs-template-item{
    padding:30px;
    background-color:#eff0f2;
    height:100%;
    border-radius:10px;
}

#template-add-popup .popup-box{
    width:960px;
    max-width:none;
}
.template-add-area{
    display:flex;
    width:100%;
}
.template-input-box{
    width:560px;
    border-top: 2px solid #d4d7e3;
}
#template-add-popup .popup-input-box{
    padding:12px 20px;
    margin-bottom:0;
    border-bottom:1px solid #edeff4;
    overflow:hidden;
}
.template-add-select{
    width:190px;
    height:35px;
    border:1px solid #c0c2c8;
    border-radius:6px;
}
#template-add-popup .popup-input-box .popup-input{
    width:calc(100% - 140px);
    float:left;
}
#template-add-popup .popup-input-box .popup-input-title{
    display:inline-block;
    width:140px;
    font-size:18px;
    font-weight:700;
    color:#45474b;
    float:left;
}
.popup-input-text{
    font-size:14px;
    color:#ec4747;
    padding-left:140px;
    padding-top:8px;
    float:left;
}
#template-add-popup .popup-input-box textarea.popup-input{
    min-height:175px;
    padding:12px 10px;
    font-size:14px;
}
.template-preview-box{
    padding-left:30px;
    width:calc(100% - 560px)
}
.template-preview{
    padding: 30px;
    width: 100%;
    overflow: hidden;
    background-color: #f6f6f6;
    border-radius:10px;
}
.template-preview-title{
    width:100%;
    height:30px;
    padding-bottom:10px;
    font-size:18px;
    color:#45474b;
    border-bottom:2px solid #b3b7c5;
    font-weight:700;
}
.template-preview-text{
    margin-top:12px;
    width:100%;
    font-size:16px;
    color:#45474b;
    height:330px;
    overflow-y:auto;
    border:none;
    background-color:#f6f6f6;
    resize: none;
    word-break: break-all;
    white-space: pre-wrap;
}
.template-box .template-preview-text{
    background-color:#eff0f2;
}
.template-byte-text{
    color:#4084ff;
    font-size:14px;
    text-align:right;
    padding-top:10px;
}

.template-item .template-preview-text{
    height:auto;
    overflow: unset;
}


.template-edit-box{
    border-top:2px solid #ffffff;
    padding-top:20px;
    margin-top:20px;
}
.template-edit{
    display:flex;
    align-items:center;
}
.template-edit:last-child{
    margin-top:5px;
}
.template-edit-icon{
    width:40px;
    height:40px;
    padding:5px;
    border-radius:30px;
    background-color:#ffffff;
    cursor:pointer;
}
.template-edit-icon img{
    width:30px;
}
.template-edit-info{
    padding-left:15px;
}
.template-edit-info div{
    color:#4084ff;
}
.template-edit-id{
    font-weight:600;
    font-size:18px;
}
.template-edit-type{
    font-weight:600;
    font-size:16px;
}
.template-edit-date{
    font-weight:500;
    font-size:14px;
}
.button#update-template{
    display:none;
}



/*join*/

.join-box-head.column{
    flex-direction:column;
}
.join-title{
    font-weight:700;
    font-size:32px;
    color:#000000;
}
.join-step-area{
    width:100%;
    display:flex;
    align-items:center;
    padding-top:35px;
}
.join-step-box{
    width:166px;
    height:70px;
    border-radius:10px;
    background-color:#d4d7e3;
    padding:10px;
}
.join-step-title{
    font-weight:700;
    color:#ffffff;
    font-size:14px;
    text-align:center;
}
.join-step-text{
    font-size:18px;
    color:#707071;
    text-align:center;
    padding-top:5px;
}
.join-step-box.on{
    background-color:#4084ff;
}
.join-step-box.on .join-step-text{
    color:#ffffff;
}
.join-step-division{
    width:30px;
    text-align:center;
}

.join-form-area{
    padding: 30px 138px;
}
.join-form-title{
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:#ffffff;
    width:100%;
    height:60px;
    border-radius:10px;
    font-weight:700;
    color:#000000;
    font-size:24px;
}
.join-form-info{
    padding-top:20px;
    font-size:14px;
    color:#4084ff;
    padding-bottom:10px;
}
.join-form-checkbox{
    display:flex;
    align-items:center;
}
.join-form-dom{
    margin-top:20px;
}
.join-form-checkbox input[type="checkbox"]{
    width:24px;
    height:24px;
    border-radius:4px;
    border:2px solid #4283f8;
    margin-right:8px;
    cursor:pointer;
}
.join-form-checkbox label{
    font-size:16px;
    font-weight:700;
    color:#45474b;
    cursor:pointer;
}
.join-form-checkbox.all-chk label{
    font-size:18px;
}
.terms-text-box{
    width:100%;
    height:200px;
    overflow-y:auto;
    background-color:#ffffff;
    border-radius:8px;
    border:1px solid #d4d7e3;
    padding:20px 25px;
}
.terms-text-box.sm{
    height:85px;

}


.ip-cert-box input[type='text'] {
    min-height:35px;
}
#ip-tr{
    display:none;
}
#ip-tr.show{
    display:table-row;
}
.ip-cert-box{
    display:flex;
    margin-top:10px;
}
.ip-cert-box:first-child{
    margin-top:0;
}
.ip-cert-box input{
    margin-right:10px;
    border-radius:5px;
    border:1px solid #919191;
    padding: 0 10px;
}

.ip-cert-list{
    margin-bottom:10px;
    display:flex;
    align-items:center;
}
.ip-list-addr{
    width:130px;
    font-weight:500;
}
.ip-list-desc{
    width:130px;
}
.button.ip-del-btn{
    min-width:70px;
}

.pw-change-box{
    display:none;
}
.receiver-list-area{
    width:100%;
}
.receiver-list-box{
    width:100%;
    border-radius:10px;
    border:1px solid #d4d7e3;
    overflow:hidden;
}
.receiver-list{
    height:40px;
    display:flex;
}
.receiver-list:nth-child(2n){
    background-color:#f8f9fb;
}
.receiver-list-top{
    border-bottom:1px solid #d4d7e3;
}
.receiver{
    height:100%;
    font-size:16px;
    padding:10px;
    text-align:center;
}
.receiver-list-top .receiver{
    font-weight:600;
}
.receiver.receiver1{
    width:20%;
}
.receiver.receiver2{
    width:30%;
    overflow:hidden;
}
.receiver.receiver3{
    width:50%;
}
.receiver-del, .receiver-mod{
    cursor:pointer
}
.receiver-paging{
    padding-bottom:10px;
    text-align:right;
}
.receiver-paging span{
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    padding:0 10px;
}
.receiver-paging span i{
    margin:0;
    width:auto
}



.msg-view-pop-wrap{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.3);
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
    z-index: 100;
}
.msg-view-pop{
    width: 100%;
    max-width:800px;
    /*background-color: #ffffff;*/
    /*padding: 15px 0;*/
    border-radius: 10px;
    position: relative;
    display: flex;
    overflow: hidden;
}
.msg-view-pop.notice{
    background-color: #ffffff;
    flex-direction: column;
}
.msg-view-pop.notice .msg-view-title{
    width: 100%;
}
.msg-view-box{
    min-height:400px;
    overflow-y: auto;
}
.notice-btn-box{
    width: 100%;
    text-align: center;
    height:70px;
    padding:20px;
}
.notice-close-btn{
    display: inline-flex;
    width: 70px;
    height: 45px;
    border-radius: 5px;
    background-color: #202020;
    color: #ffffff;
    font-size: 15px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.sender-reg-box{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: rgba(0,0,0,.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 100;
}
.sender-box{
    width:430px;
    background-color: #ffffff;
}
.sender-box.sender-select{
    width:600px;
    -webkit-box-shadow: 0px 0px 5px 2px rgba(148,148,148,.3);
    -moz-box-shadow: 0px 0px 5px 2px rgba(148,148,148,.3);
    box-shadow: 0px 0px 5px 2px rgba(148,148,148,.3);
}
.sm-title-box{
    font-size:20px;
    font-weight:500;
    margin-bottom:15px;
}
/*.sender-box-body{
    border-top:2px solid #000;
}*/
.sender-box-text-area{
    padding-top:15px;
    padding-bottom:25px;
    font-size:13px;
    border-bottom:1px solid #dbdbdb;
}
.sender-box-text-area.notice{
    min-height: 398px;
    /*max-height: 800px;*/
    padding-top:0;
    font-size:15px;
}
.notice-date-box{
    font-size:13px;
    text-align:right;
    padding-bottom:10px;
}
.sender-box-text-area.notice img{
    max-width: 100% !important;
}
.msg-view-pop-close{
    position: absolute;
    width: 40px;
    height: 40px;
    top: 10px;
    right: 10px;
    cursor: pointer;
    text-align: center;

    font-size: 24px;
}

.send-result-list{
    cursor:pointer;
}

#refuse-upload-popup .select{
    width:150px;height:35px;
}