@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);



*{
    margin:0;
    padding:0;
    box-sizing: border-box;

}
h1, h2, h3, h4, h5{
    margin:0;
}
ul{
    padding-left:0;
    list-style: none;
}
ul li{
    float: left;
}
a{
    text-decoration: none;
}
/*a:hover{
    text-decoration: underline;
}*/



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

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

/* 스크롤바 뒷 배경 설정*/
*::-webkit-scrollbar-track{
    background-color: rgba(230,230,230,30);
}
body{
    font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif;
    background-color: #f8f8f8;
}
section{
    display: block;
    background-color: #f8f8f8;
}
.container{
    width:1200px;
    margin:0 auto;
    padding: 0 10px;
    position: relative;
    overflow: hidden;
}
.wrapper{
    width:100%;
    min-width:1280px;
    background-color: #ffffff;
    padding-top:80px;
    min-height:100vh;
}
.main-content{
    min-height: calc(100vh - 300px);
}
.main-content.my{
    min-height: calc(100vh - 400px);
}
.main-content.login{
    display: flex;
    align-items: center;
    justify-content: center;
}
.header{
    position: fixed;
    width:100%;
    top:0;
    -webkit-transition: background-color .2s;
    -moz-transition: background-color .2s;
    -ms-transition: background-color .2s;
    -o-transition: background-color .2s;
    transition: background-color .2s;
    z-index: 100;
    background-color: #ffffff;
}
.header.on{
    background-color: #ffffff;
    border-bottom:1px solid #eeeeee;
    box-shadow: 1px 2px 3px rgba(0,0,0,.1);
}
.header-box{
    width:100%;
    height:80px;
}
.logo-box{
    width:200px;
    height:100%;
    float: left;
    padding-top:10px;
}
.logo-text{
    font-size:40px;
}
.header-menu-box{
    float: right;
    height:100%;
}
.header-menu-box ul{
    height:100%;
}
.header-menu-box ul li{
    height:100%;
}
.header-menu-box ul li a{
    display: flex;
    font-size:17px;
    color: #959595;
    padding-left:40px;
    align-items: center;
    height: 100%;
    -webkit-transition: color .2s;
    -moz-transition: color .2s;
    -ms-transition: color .2s;
    -o-transition: color .2s;
    transition: color .2s;
}
.header-menu:hover{
    color: #000;
}
.main-box{
    width:100%;
    position: relative;
}
.box-1{
    height:640px;
    background: url('/assets/img/neosms_main1.png') no-repeat 50%;
}
.main-banner{
    width:50%;
    height:100%;
    float: right;
    display: flex;
    align-items: flex-start;
    justify-content:flex-end;
}
.main-banner{
    padding-top:100px;
}
.main-banner-title{
    font-size:48px;
    padding-top:50px;
    padding-bottom:20px;
}
.login-area{
    padding: 0 5px 0 4px;
    font-size: 12px;
    line-height: 1.67;
    color: #666666;
}
.btn-login{
    display: block;
    margin-bottom: 10px;
    width: 260px;
    height: 60px;
    line-height: 60px;
    border-radius: 30px;
    background-color: #ff8527;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    color: #ffffff;
    border: solid 1px rgba(255, 133, 39, 1);
    box-sizing: border-box;
}
.btn-join{
    padding-left: 15px;
    color: #ff8527;
    text-decoration: underline;
}
section.part{
    padding:50px 0;
}
section.part.last{
    padding-bottom:100px;
}
section.part2{
    background-color: #ffffff;
}
section.part3{
    background-color: #1c242d;
}
.main-box-inner{
    width:50%;
    float: left;
}
.flex{
    display: flex;
    justify-content: center;
    align-items: center;
}
.price-box-left{
    width:100%;
    text-align: center;
}
.price-point-box{
    padding:3px 15px;
    font-size:14px !important;
    color: #ffffff !important;
    background-color: #ff4442;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    position: relative;
    display: inline-block;
    margin-bottom:10px;
    letter-spacing: .8px;
    font-weight:500;
}
.price-point-box:after{
    content: '';
    position: absolute;
    left: 15%;
    transform: translateX(-50%);
    display: inline-block;
    width: 0;
    height: 0;
    top: 29px;
    border-style: solid;
    border-width: 8px;
    border-color: #ff4442 transparent transparent transparent;
}
.price-point-box .point{
    color: #fff001;
    font-size:14px !important;
    font-weight:600;
}
.price-info-text{
    font-size: 32px;
    line-height: 1.3;
}
.price-info-text.top{
    color: #d0d1d3;
    font-weight:300;
    font-size:36px
}
.price-info-text.bot{
    color: #ffffff;
    font-weight:600;
}
.price-text{
    margin-top:15px;
    color: #d0d1d3;
    font-weight:600;
    font-size:14px;
}
.price-box-right{
    width:100%;
    display: flex;
    position: relative;
    justify-content: center;
}
.price-item-box{
    width:245px;
    float: left;
    margin:0 25px;
}
.price-item-box.down{
    margin-top: 40px;

}
.price-item{
    width:100%;
    height :100%;
    background-color: #ffffff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    overflow: hidden;
}
.price-item-top{
    width:100%;
    height:50px;
    font-size:24px;
    color: #ffffff;
    background-color: #ff4442;
    padding-top:6px;
    text-align: center;
}
.price-item-body{
    width:100%;
    height:150px;
    padding:15px;
}
.price-item-sm{
    font-size:18px;
    width:90px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
.price-item-sm span{
    font-size:28px !important;
}
.price-item-lg{
    font-size:26px;
    color: #ff0000;
    margin: -5px auto 0;
    text-align: center;
    position: relative;
}
.price-item-lg span{
    font-size: 50px !important;
    font-weight:700;
    color: #ff0000 !important;
}
.price-item-foot{
    padding:0 20px 10px;
    width:100%;
    height:40px;
}
.price-item-btn{
    display: inline-block;
    width:100%;
    height: 30px;
    border-radius: 5px;
    background: #fff;
    border:1px solid #cccccc;
    font-size: 17px;
    color: #1c242d;
    font-weight:600;
    text-align: center;
    padding-top:3px;
}
.price-item-half-line{
    height:1px;
    width:100%;
    border-top:1px solid #ff4442;
    position: absolute;
    left:0;
    right:0;
    top:50%;
    transform: translateY(-50%);
}
.main-inner-text{
    width:400px;
    margin:0 auto;
}
.main-box h1{
    font-size:38px;
    line-height:1.35;
}
.main-box p{
    font-size:17px;
    padding:20px 0;
    line-height: 1.65;
    margin:0;
}
.main-inner-img{
    position: absolute;
    left:-50px;
    bottom:0;
}
.main-inner-img.right{
     right:-50px;
     left:inherit;
}
.main-inner-img.left-top{
    left:-50px;
    right:inherit;
    bottom:inherit;
    top:0;
}
.main-box span{
    font-size: 12px;
    line-height: 1.67;
    color: #666666;
}
.footer{
    background-color: #ffffff;
    padding:30px 0;
    border-top:1px solid #eeeeee;
}
.footer-inner{
    display:flex;
    align-items:center;
    justify-content: space-around;
}
.footer-info-box{
    float: left;
}
.footer-info-box ul li{
    padding-right:30px;
}
.footer-info-box ul li a{
    display: block;
    font-size: 14px;
    color: #999;
}
.footer-info{
    clear: both;
    overflow: hidden;
}
.footer-info-sub{
    color: #999;
    line-height: 1.64;
    font-size: 11px;
}
.footer-info-sub span{
    color: #e0e0e0;
    margin: 0 12px;
}
.footer-copy{
    float: left;
    color: #9d9d9d;
    font-size: 12px;
    padding-top:10px;
}
.footer-seal{
    padding-left:10px;
    float: right;
    display: flex;
    cursor: pointer;
    align-items: center;
}
.footer-seal img{
    width: 50px;
    height: 50px;
}
.footer-seal p{
    font-size: 14px;
    padding-left: 10px;
}


/*notice*/
.board-title{
    font-size:38px;
    text-align: center;
    padding:45px 0;
}
.view{
    background-color: #ffffff;
    padding: 50px 0;
}
.board-tbl-box{
    width:100%;
}
.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 tr td{
    text-align: center;
    font-size: 13px;
    color: #999;
    padding:20px 0;
}
.board-tbl tr td.notice-td{
    text-align: left;
}
.board-tbl tr td.notice-td .notice-view{
    display: inline-block;
    overflow: hidden;
    height: 21px;
    line-height: 21px;
    font-size: 16px;
    color: #666;
    white-space: nowrap;
    word-wrap: normal;
    text-overflow: ellipsis;
    word-break: break-all;
    max-width:900px;

}
.paging{
    text-align: center;
}
.paging a{
    padding:0 15px;
    font-size:16px;
    color: #999999;
}
.paging a:hover{
    color: #e80a11;
}

/*faq*/
.no-pd{
    padding:0;
}
.faq-search-bar{
    padding-bottom:10px;
    width:500px;
    margin:0 auto;
    position: relative;
    border-bottom:2px solid #ff8527;
}
.faq-search-bar input#faq-keyword{
    height:40px;
    width:450px;
    text-align: center;
    color: #ff8527;
    border:none;
    background:none;
    line-height: 40px;
    font-size:16px;
}
.faq-search-bar input#faq-keyword::placeholder{
    color: #ff8527;
}
.faq-search-bar button#do-search{
    position: absolute;
    width:40px;
    height:40px;
    top:15px;
    right:0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #ff8527;
    border: 2px solid #ff8527;
    color: #ffffff;
    font-size:16px;
    cursor: pointer;
}
.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: #ff8527;
}
.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{
    border-top:1px solid #cccccc;
}
.faq-list-line{
    border-bottom:1px solid #efefef;
    position: relative;
    cursor: pointer;
}
.faq-list-line.on .faq-a{
    display: block;
}
.faq-list-line .faq-arrow{
    position: absolute;
    font-size:32px;
    top:8px;
    right:10px;
    color:#999999;
}
.faq-list-line.on .faq-arrow{
    transform: rotate(180deg);
}
.faq-q{
    padding:20px;
    font-size:16px;
}
.faq-q span{
    color: #666666;
}
.faq-q:hover span{
    color: #ff8527;
}
.faq-a{
    padding:30px;
    background-color: #f8f8f8;
    word-break: break-all;
    display: none;
}
.faq-a p{
    line-height: 30px;
    color: #333333;
}
.faq-btn{
    display: block;
    width: 145px;
    height: 50px;
    border-radius: 23px;
    background-color: #ff8527;
    color: #fff;
    text-align: center;
    padding-top:12px;
}

/*charge*/
.charge-area{
    width:100%;
    margin:0 auto;
}
.charge-box{
    width:100%;
    border-top:1px solid #333;
}
.charge-info-box{
    padding-top:15px;
    padding-bottom:10px;
    overflow: hidden;
}
.charge-info-box ul li{
    clear: both;
    margin-bottom:5px;
    font-size:14px;
    color: #666666;
}
.charge-kind-area{
    background-color: #eeeeee;
    padding:20px 10px;
    height:320px;
}
.charge-kind-box{
    width:50%;
    padding:0 10px;
    float: left;
    height:100px;
}
.charge-item{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:18px;
}
.charge-kind{
    background-color: #ffffff;
    width:100%;
    height:100%;
    cursor: pointer;
    border:1px solid #dddddd;
}
.charge-kind i{
    font-size:40px;
}
.charge-confirm-box{
    clear: both;
    width:100%;
    height:180px;
    padding:20px 10px 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;
}
.charge-confirm div{
    display: flex;
    align-items: center;
    justify-content: center;
    width:100%;
    font-size:14px;
    text-align: center;
}
.charge-confirm-top{
    height:40px;
    border-bottom:1px solid #c9c9c9;
}
.charge-confirm-label{
    color: #666666;
    margin:0 5px;
    cursor: pointer;
}
.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{
    height:70px;
}
.charge-confirm-bot{
    height:50px;
    border-top:1px solid #c9c9c9;
    font-size:18px !important;
    color: orangered;
}
.charge-confirm-bot #charge-total{
    padding-left: 5px;
}
.charge-btn-box{
    padding:30px 0;
    font-size:18px;
    color: #000000;
    border-bottom:1px solid #bcbcbc;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.charge-input-box{
    width:240px;
    float: left;
    border:1px solid #e1e1e1;
}
.charge-input{
    width:200px;
    height:40px;
    padding:0 15px;
    font-size:16px;
    border:none;
}
.charge-input:focus{
    outline: none;
}
.charge-input::-webkit-outer-spin-button,
.charge-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.charge-input-close{
    display: inline-block;
    padding-top:3px;
    text-align: center;
    color: #ffffff;
    font-size: 10px;
    background-color: #cfcfcf;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width:20px;
    height:20px;
    cursor: pointer;
}
.charge-input-text{
    display: inline-block;
    padding:0 10px;
}
.charge-price-btn-box{
    padding-left:50px;
}
.charge-price-btn{
    border:1px solid #cccccc;
    font-size:16px;
    width:70px;
    height:40px;
    cursor: pointer;
    display:inline-flex;
    justify-content:center;
    align-items: center;
    margin-left:5px;
    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%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f5',GradientType=0 );
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.charge-price-btn:hover{
    background: none;
}

/* charge_list */
.date-search-box{
    width:100%;
    height:40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom:30px;
}
.date-search-input-box{
    width:150px;
    border:1px solid #e1e1e1;
    height:100%;
}
.date-search-input{
    width:120px;
    height:100%;
    border:none;
    font-size:16px;
    padding-left:10px;
}
.date-search-input:focus{
    outline: none;
}
.charge-date-btn{
    width:150px;
    border:1px solid #e1e1e1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:16px;
    height:40px;
    color: #666666;
    cursor: pointer;
}
.charge-date-icon{
    display: inline-block;
    text-align: center;
    font-size: 14px;
    width:20px;
    height:20px;
    cursor: pointer;
}
.board-tbl thead tr{
    border-top:1px solid #333333;
    border-bottom:1px solid #333333;
}
.board-tbl thead tr th{
    font-weight: 600;
    font-size:14px;
    background-color: #efefef;
    height:40px;
    color: #666666;
}


/* send_result */
.send-search-area{
    width:100%;
    padding-top:15px;
    overflow: hidden;
    padding-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.send-search-box{
    float: right;
    font-size:14px;
    color: #666;
}
.send-search-input-box{
    float: left;
}
.send-search-box label{
    display: inline-block;
    padding:0 5px;
}
.send-search-line:first-child{
    /*margin-bottom:10px;*/
}
.send-search-select{
    width: 120px;
    background-color: #ffffff;
    font-size: 14px;
    height: 40px;
    border-radius: 0;
    border: 1px solid #e1e1e1;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding-left: 5px;
    background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
    background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
    background-size: 5px 5px, 5px 5px, 1px 1.9em;
    background-repeat: no-repeat;
    margin-right: 8px;
}
.send-search-line input{
    width:231px;
    height:40px;
    border:1px solid #e1e1e1;
}
.send-search-line input.send-search-input{
    width:128px;
    padding-left:10px;
    cursor: pointer;
}

.send-search-btn-box{
    padding-left:20px;
    float: left;
}
.send-search-btn{
    width:80px;
    /*height:90px;*/
    height:40px;
    border:1px solid #e1e1e1;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    cursor: pointer;
}
.send-btn-area{
    font-size:14px;
    padding:0 0 10px;
    overflow: hidden;
}
.send-btn-area > div{
    float: left;
    height:40px;
}
.send-btn-box-left{
    display: flex;
    align-items: center;
    width:30%;
}
.send-btn-box-right{
    text-align: right;
    width:70%;
}
.send-search-menu-btn{
    display: inline-block;
    padding:8px 10px;
    border:1px solid #cccccc;
    color: #969696;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    cursor: pointer;
    margin-left: 5px;
}
.send-search-menu-btn.excel{
    color: #217345;
    border-color: #217345;
    margin-left: 0;
}
.send-search-menu-btn.print{
    color: #434058;
    border-color: #434058;
}
.send-search-menu-btn.del{
    background-color: #f5f5f5;
    border:1px solid #dadada;
    color: #6f6f6f;
}


/* send */
.msg-send-text-box{
    position: relative;
    font-size:14px;
    overflow: hidden;
}
.msg-send-text-box ul{
    list-style:disc;
    padding-left:20px;
}
.msg-send-text-box ul li{
    clear: both;
}
.msg-send-text-btn{
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1;
}
.msg-send-text-btn span{
    height: 42px;
    line-height: 42px;
    box-sizing: border-box;
    color: #333;
    background-color: #fff;
    border: 1px solid #768393;
    text-align: center;
    font-size: 14px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    padding:0 10px;
}
.msg-send-box{
    margin-top:20px;
    overflow: hidden;
}
.msg-write-box{
    width:490px;
    height:480px;
    -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;
    padding: 0 5px;
    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 14px;
    width:100%;
    font-size:16px;
    border:none;
    outline: none;
    border-bottom:1px solid #cccccc;
}
.msg-write-body{
    height:278px;
    position: relative;
}
.msg-write-body.result-view{
    height:calc(100% - 90px);
}
.msg-write-body textarea.result-view{
    height:100%;
}
.msg-write-body textarea{
    width:100%;
    height:100%;
    padding:15px;
    overflow-y: auto;
    font-size:16px;
    cursor: text;
    line-height:23px;
    resize: none;
    outline: 0;
    border:0;
    color: #000;
    display: block;
}
.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;
}
.msg-write-foot{
    font-size:13px;
}
.msg-write-foot p{
    margin:0 10px;
}
.msg-write-foot span{
    font-weight:700;
}
.msg-write-foot span#long-short-text{
    color: #ff0000;
    transition : color .3s
}
.msg-write-foot span#long-short-text.rcs{
    color: #2c398a;
}
.msg-write-foot span#long-short-text.long{
    color: #2e2e2e;
}
.msg-status-btn{
    background-color: #df1315;
    font-size:16px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    transition: .3s;
    padding:3px 15px;
    color: #ffffff;
    font-weight:500 !important;
}
.msg-status-btn.rcs{
    background-color: #2c398a;
}
.msg-status-btn.long{
    background-color: #2e2e2e;
}
.msg-recv-box{
    border:1px solid #cccccc;
    width:670px;
    height:480px;
    float: right;
    position: relative;
    margin-left:20px;
    padding:15px;
    border-radius: 8px;
}
.msg-recv-box.rcs{
    height:480px;
}
.msg-file-area{
    width: 100%;
    height: 100px;
    padding-top: 10px;
    border-top: 1px solid #ededed;
}
.msg-file-title{
    width: 100%;
    padding: 0 15px 5px;
    font-size: 13px;
}
.msg-file-box{
    width: 100%;
    height: 70px;
    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%);
}
.img-preview img {
    max-width: 100%;
    min-width: 100%;
    height: auto;
}
.img-upload-box{
    width: 40%;
    padding: 8px 10px 8px 20px;
}
.img-upload-btn{
    display: inline-block;
    width: 100%;
    height: 40px;
    background-color: #df1315;
    border-radius: 8px;
    color: #ffffff;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
}
.img-upload-box input[type="file"]{
    display: none;
}
.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;
}

.msg-recv-btn-box{
    width:280px;
    float: left;
}
.msg-recv-title{
    font-weight:700;
    padding-bottom:10px;
}
.msg-recv-tab-box{
    width: 100%;
    height:40px;
    margin-bottom: 15px;
}
.msg-recv-tab-btn{
    display: inline-flex;
    width:calc(50% - 1px);
    height:40px;
    justify-content: center;
    align-items: center;
    font-size:15px;
    background-color: #f4f4f4;
    float: left;
    cursor: pointer;
    margin-left: 1px;
    border-radius: 8px 8px 0 0 ;
}
.msg-recv-tab-btn:first-child{
    margin-right: 1px;
    margin-left: 0;
}
.msg-recv-tab-btn.on{
    background-color: #000000;
    color: #ffffff;
}
.msg-recv-menu-btn{
    width:100%;
    height:48px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    font-size:16px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: #ffffff;
    border:1px solid #cccccc;
    margin-bottom:10px;
}
.msg-recv-menu-btn:hover{
    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%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f5',GradientType=0 );
}
.msg-recv-list-area{
    width:340px;
    float: left;
    margin-left: 15px;
}
.msg-recv-list-box{
    border:2px solid #818181;
    height:305px;
    overflow-y: auto;
    width:100%;
}
.msg-recv-list-box.rcs{
    height: 310px;
}
.msg-recv-list-btn-box{
    width:100%;
    margin-top:10px;
    display: flex;
}
.msg-recv-list-btn{
    width:165px;
    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;
    /*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%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f5',GradientType=0 );*/
    border-radius: 8px;
    background-color: #f0f0f0;
}
.msg-recv-list-btn:first-child{
    margin-right:10px;
}
.msg-recv-cnt-box{
    width:100%;
    height:45px;
    background-color: #2e2e2e;
    margin-top:10px;
    padding:10px;
}
.msg-recv-cnt-box span{
    display: inline-block;
    color: #ffffff;
}
.msg-recv-cnt-text1{
    font-size:15px;
    float: left;
    margin-top:3px;
}
.msg-recv-cnt-text2{
    font-size:22px;
    float: right;
}
.msg-send-set-box{
    width:100%;
    padding:20px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.msg-sender-box{
    padding:7px 15px;
    position: relative;
    width: 300px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid #c5c5c5;
    cursor: pointer;
    border-radius: 8px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
}
.sender-select-title{
    color: #db0000;
    display: inline-block;
}
.msg-sender-box div{
    font-size:15px;
}
.msg-sender-box-left{
    float: left;
    width:80%;
}
.msg-sender-box-phone{
    font-size:18px;
    font-weight:600;
    float: right;
    margin-top: -2px;
}
.msg-sender-box-right{
    float: right;
    width:20%;
    text-align: right;
    font-size:18px !important;
    color:#757575;

}
.msg-setting-box{
    width:550px;
    padding:10px 0 50px;
}
.msg-setting-line{
    padding:5px 0;
    font-size:14px;
}
.reserve-text{
    color: #ff0000;
}
.msg-send-btn-box{
    width:250px;
    height:50px;
    margin: 0 auto;
}
.msg-send-btn{
    box-sizing: border-box;
    display: inline-block;
    font-size: 20px;
    text-align: center;
    background-color: #434058;
    cursor: pointer;
    height: 50px;
    line-height: 50px;
    color: #fff;
    width:100%;
}
.msg-send-btn.rcs{
    background-color: #2c398a;
}
.send-date-box{
    display: flex;
    align-items: center;
    height: 40px;
}
.send-date-input{
    width: 130px;
    padding-right: 30px;
    display: inline-block;
    position: relative;
    border: 1px solid #e1e1e1;
    /*margin: 0 10px;*/
}
.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-input .send-search-input{
    border: none;
}
.send-date-input .send-search-input:focus{
    outline: none;
}
.send-date-box select{
    height: 100%;
    border: 1px solid #e1e1e1;
    margin-right: 10px;
    padding: 0 10px;
}
.time-set-title{
    padding-top: 20px;
    font-weight: 500;
    padding-bottom:10px;
    display: flex;
    align-items: center;
}
.divide-box{
    display: flex;
    width: 60%;
    height: 100%;
    border: 1px solid #e1e1e1;
    position: relative;
}
.divide-box:last-child{
    width: 40%;
    margin-left: 5px;
}
.divide-input{
    width: calc(100% - 50px) !important;
    border: none !important;
    height: 38px !important;
    text-align: right;
    font-size: 18px;
}
.divide-input:focus{
    outline: none;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.divide-text{
    padding: 0 10px 0 10px;
    display: inline-flex;
    height: 100%;
    width: 50px;
    align-items: center;
}
.divide-box:last-child .divide-input{
    width: calc(100% - 70px) !important;
}
.divide-box:last-child .divide-text{
    width: 70px;
}
.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;
}
.time-set-title #divide-chk{
    width: 17px;
    height: 17px;
    margin-right: 5px;
}
.divide-box.disable .divide-input, .divide-box.disable .divide-text{
    color: #b1b1b1;
}








/* login */
.login-area{
    width: 100%;
    position: relative;
}
.login-logo-box{
    text-align: center;
}
.login-form-box{
    padding:50px 0;
    width:100%;
    max-width:450px;
    overflow: hidden;
    margin:0 auto;
}
.login-input-box{
    height:48px;
    padding:7px 35px 10px 11px;
    border:1px solid #dadada;
    background-color: #ffffff;
    margin-bottom:10px;
}
.login-input-box input{
    height:30px;
    font-size:14px;
    width:100%;
    padding:8px 5px 6px;
    color: #000;
    border:none;
    background-color: #ffffff;
}
.login-btn{
    display: block;
    width: 100%;
    height: 56px;
    line-height: 55px;
    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;
}
.login-chk-box{
    font-size:13px;
    color: #666666;
    float:left;
}
.login-chk-box.right{
    float: right;
}

/* 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:20%;
}
.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;
}

/* terms */
.terms-area{
    border-top:1px solid #666666;
    padding:30px 0;
}
.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;
}

/*sender_setting*/
.sender-reg-btn{
    width:250px;
    vertical-align: middle;
    box-sizing: border-box;
    display: inline-block;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    background-color: #434058;
    cursor: pointer;
    height: 50px;
    line-height: 50px;
    color: #fff;
}
.sender-reg-btn:before{
    content:'+';
    width: 5px;
    display: inline-block;
    top: -1px;
    margin-right: 15px;
    font-size:20px;
}


.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;
    padding:30px;
}
.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: 20px;
}
.sender-box-text-area.notice img{
    max-width: 100% !important;
}
.sender-sm-box{
    overflow: hidden;
    margin-top:30px;
}
.sender-box-title{
    font-size:15px;
    font-weight:500;
    color: #434058;
}
.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;
}
.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%;
}
.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;
}



/* sign */
.sign-terms-box{
    width:460px;
    
}


#msg-self-box{
    display: none;
}
.self-add-box{
    width:100%;
    height: 267px;
    border: 1px solid #cccccc;
}
.self-add-box.rcs{
    height: 237px;
}
.self-add-box textarea{
    width:100%;
    height:100%;
    resize: none;
    border:0;
    font-size:15px;
    outline: none;
    color: #333333;
    overflow-y: auto;
    padding:15px;
    line-height:20px;
}
.self-add-btn{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:50px;
    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;

}
.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%;
    color: #333;
    position: relative;
    border-bottom: 1px solid #ccc;
    padding: 8px 30px 7px 18px;
}
.msg-list-num:hover{
    background-color: #f5f5f5;
}
.msg-list-del{
    display: inline-block;
    border: 1px solid #dddddd;
    background-color: #dddddd;
    border-radius: 50%;
    cursor: pointer;
    padding:5px 7px;
    line-height: 1px;
    position: absolute;
    right: 10px;
    top:6px;
}
.addr-select-box{
    padding-top: 30px;
    text-align: center;
}
.addr-select{
    min-width:150px;
    height:38px;
    border:1px solid #d6d6d6;
}
.addr-select:focus{
    outline: none;
}
.addr-select-cnt{
    padding-bottom: 20px;
    text-align: center;
    font-size:24px;
}



.sender-attach-box{
    width:100%;
    padding: 2px 0;
}
.sender-attach{
    display: inline-block;
    padding: 5px 30px 5px 20px;
    border:1px solid #e1e1e1;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    font-size:14px;
    color: #aaaaaa;
    position: relative;
}
.sender-attach span{
    position: absolute;
    right:10px;
    top:5px;
    cursor: pointer;
}
.sender-apply-del{
    cursor: pointer;
    display: inline-block;
    padding:3px 5px;
}
.cert-phone{
    display: none;
}

.sender-reg-box.excel-load-box .sender-box{
    width:800px;
}
.sender-reg-box.excel-load-box .addr-select-box{
    height:500px;
    overflow-y:auto;
    border-bottom:1px solid #dddddd;
}


.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;
}
.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;
}

.text-right{
    text-align: right !important;
    padding-right:20px;
}
.text-left{
    text-align: left !important;
    padding-left:10px;
}

.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;
    margin-top: 30px;
    height:250px;
    overflow-y: auto;
    position: relative;
}
.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;
}

div.pagination{
    display: flex;
    justify-content: center;
}
.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;
}
.full-width{
    width: 100%;
}
.send-result-list, .send-result-view{
    cursor: pointer;
}

.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;
    height: 545px;
}
.msg-view-pop.notice{
    background-color: #ffffff;
    padding: 15px 0;
    flex-direction: column;
}
.msg-view-pop.notice .msg-view-title{
    width: 100%;
}
.msg-view-box{
max-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;
}
.msg-view{
padding: 10px 30px;
border-bottom: 1px solid #e1e1e1;
}
.msg-view-line{
display: flex;
justify-content: space-between;
    position: relative;
}
.msg-view-line p{
color: #333333;
font-size: 14px;
}
.msg-view-line span{
color: #777777;
font-size: 13px;
}
.msg-view-title .sm-title-box{
padding: 0 30px;
}
.msg-view-title .sender-box-text-area{
padding: 15px 30px 15px;
}
.msg-fail{
color: #ed1b23;
    cursor:pointer;
}
.msg-success{
color: #0089ec;
}
.msg-view-pop-close{
position: absolute;
width: 40px;
height: 40px;
top: 10px;
right: 10px;
cursor: pointer;
text-align: center;

font-size: 24px;
}


.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;
margin-left: -1px;
line-height: 1.25;
color: #2c264c;
background-color: #fff;
border: 1px solid #dee2e6;
font-size: 13px;
}
.page-item a:not(:disabled):not(.disabled) {
cursor: pointer;
}
.page-item.active .page-link {
background-color: #2c264c;
border-color: #2c264c;
color: #ffffff;
}


.sign-terms-form{
width:460px;
margin:0 auto;
padding:60px 0;
}
.sign-title-box{
width:100%;
overflow: hidden;
border-left: 1px solid #d5d5d5;
border-top: 1px solid #d5d5d5;
border-right: 1px solid #d5d5d5;
border-bottom: 1px solid #4c4960;
}
.sign-title{
width:50%;
height:50px;
float: left;
font-size: 18px;
color: #747474;
display: flex;
justify-content: center;
align-items: center;
}
.sign-title.on{
background: #4c4960;
font-weight: 500;
color: #fff;
}
.sign-terms-box{
margin-top:40px;

}
.sign-terms-text-box{
padding:20px;
border:1px solid #e1e1e1;
max-height:210px;
overflow-y: auto;
}
.sign-terms-text-box.on{
border-color: #404040;
}
.sign-terms-chk-box{
margin-bottom:10px;
}
.sign-terms-chk-box input[type='checkbox']{
margin-right:5px;
}
.sign-terms-chk-box label{
font-size:16px;
color: #000000;
font-weight:500;
}
.sign-terms-text-box p{
font-size:14px;
color: #979797;
}
.color-red{
color: #ff0000;
}
.sign-terms-text-box .terms-area{
border-top:0;
padding:0;
}
.sign-terms-text-box table{
border-collapse: collapse;
width:100%;
}
.sign-terms-text-box table th{
height: 40px;
border-top: 1px solid #808080;
border-bottom: 1px solid #808080;
box-sizing: border-box;
background-color: #f9f9f9;
color: #6f6f6f;
font-size: 14px;
}
.sign-terms-text-box table td{
color: #000;
font-size: 13px;
height: 40px;
box-sizing: border-box;
border-bottom: 1px solid #c0c0c0;
border-right: 1px solid #e6e6e6;
text-align: center;
padding: 10px;
}
.sign-terms-text-box table tr td:first-child{
border-left:1px solid #e6e6e6;
}
.sign-btn-box{
margin-top:60px;
text-align: center;
width:100%;
}
.sign-btn{
display: inline-block;
width:180px;
height:50px;
font-size: 20px;
text-align: center;
background-color: #df1315;
color: #ffffff;
line-height: 50px;
cursor: pointer;
border:0;
}


.charge-tbl-box{
width:100%;
}
.charge-tbl-box table{
width:100%;
border-collapse: collapse;

}
.charge-tbl-box table tr{
border-bottom:1px solid #e1e1e1;
height:50px;
}
.charge-tbl-box table tr td{
height:50px;
text-align: center;
}
.charge-tbl-box table tr td:first-child{
text-indent: 10px;
}



/*addr_manage*/

.addr-area{
    width:100%;
    border: 1px solid #cccccc;
    display: flex;
    position: relative;
}
.addr-box{
    width:60%;
    border-right:1px solid #cccccc;
}
.addr-box.folder{
    width:40%;
}
.addr-box.group{
    width:30%;
}
.addr-box.individual{
    border-right: none;
}
.addr-box .box-top{
    padding: 12px;
    border-bottom: 1px solid #cccccc;
}
.addr-box .box-top .title{
    color: #7d7d7d;
    font-size: 16px;
}
.addr-box .box-top .sub-title-box{
    height: 35px;
    margin:30px 0;
    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:100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    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%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f5',GradientType=0 );
    border:1px solid #cccccc;
    color: #747474;
}
.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 );
}

.addr-box .box-top .input-area{
    width:100%;
    height:40px;
    display: flex;
    border:1px solid #cccccc;
}
.addr-box .box-top .input-area .input-box{
    width:20%;
    height: 100%;
}
.addr-box .box-top .input-area .input-box.lg{
    width:30%;
}
.addr-box .box-top .input-area .input-box .addr-input{
    width:100%;
    height:100%;
    padding: 10px;
    border: none;
    font-size:14px;
    border-right:1px solid #cccccc;
    color: #747474;
}
.addr-box .box-top .input-area .input-box .addr-input::placeholder{
    color: #747474;
    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:100%;
    height: 100%;
    font-size: 14px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #747474;
    cursor: pointer;
    border: none;
}
.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:#c8c8c8;
}
.addr-box .box-cont{
    width:100%;
    min-height:400px;
}
.addr-box .box-cont.disable{
    background-color: #f0f0f0;
    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;
    padding: 10px;
    display: flex;
    align-items: center;
}
.addr-box #addr-list-box.box-cont .list-top{
    padding-right:0;
}

.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%;
    min-height:350px;
    max-height:350px;
    padding:10px 0 0 10px;
    overflow: auto;
}
.list-box ul{
    overflow: hidden;
}
.list-box li.list{
    display: inline-flex;
    width:100%;
    font-size:13px;
    height: 32px;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 20px 0 0 20px;
    margin-bottom: 5px;
    cursor: pointer;
}
.list-box li.list:hover{
    background-color: #ecf1f7;
}
.list-box li.list.on{
    background-color: #ecf1f7;
    font-weight:700;
}
.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;
    padding:5px 7px;
    border:1px solid #e1e1e1;
    -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:none;
    border-bottom: 1px solid #cccccc;
    padding-bottom:5px;
    padding-left: 5px;
}
.mem-addr-input:focus{
    outline: none;
}


.mem-addr-list-box{

}
.mem-addr-list{
    display: inline-flex;
    width: 100%;
    font-size: 13px;
    height: 32px;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 20px 0 0 20px;
    margin-bottom: 5px;
    cursor: pointer;
}
.mem-addr-list:hover{
    background-color: #ecf1f7;
}
.mem-addr-list div{
    float: left;
    font-size:13px;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.mem-addr-list div.mem-addr-chkbox{
    width:3%;
}
.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:25%;
}
.mem-addr-chk{
    margin-right: 5px;
}


.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;
    padding: 20px;
    transition: all .3s;
}
.addr-reg-head{
    width:100%;
    height: 32px;
}
.addr-reg-head .title-box{
    border-bottom: 2px solid #000000;
    padding-bottom:5px;
    position: relative;
}
.addr-reg-body{
    width:100%;
    padding:30px 0;
}
.addr-reg-input{
    font-size:15px;
    border:1px solid #e1e1e1;
    width:100%;
    height: 40px;
    padding: 0 10px;
}
.addr-reg-input:focus{
    outline: none;
}
.addr-reg-input::placeholder{
    color: #c1c1c1;
}
.addr-reg-foot{
    width:100%;
    text-align: center;
    padding-top:20px;
}
.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;
}
.excel-upload-box{
    width: 100%;
    padding-top: 30px;
}
.excel-upload{
    width: 170px;
    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;
}
.excel-upload.active{
    color: #555555;
    background-color: #333333;
}
.excel-upload i{
    font-weight: 300;
    margin-right: 5px;
    font-size: 14px;
}
.excel-upload.sample{
    color: #207345;
    background-color: #ffffff;
}
#excel-file-upload{
    display: none;
}
.addr-reg-wrap input:read-only{
    background-color: #f1f1f1;
}

.msg-type-select-area{
    width:100%;
    display: flex;
    align-items: center;
}
.msg-type-label{
    display: inline-flex;
    margin-left: 20px;
    align-items: center;
}
.msg-type-label span{
    font-size: 18px;
    display: inline-block;
    margin-left: 10px;
    cursor: pointer;
}
.msg-type-chk-input{
    position: relative;
    width: 24px;
    height: 24px;
    margin: 0 3px 0 0;
    padding: 0;
    border: 0;
    -webkit-appearance: none;
    background: transparent;
    border-color: #6c6c6c;
}
.msg-type-chk-input:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    font-size: 10px;
    content: '';
}
.msg-type-chk-input:checked:after {
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
    width: 16px;
    height: 16px;
    background-color: #2c398a;
    border-radius: 50%;
    font-size: 10px;
    content: '';
}


.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-box{
    width: 200px;
    height:200px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
}
.loading-box img{
    width: 430px;
}


.msg-view-content{
    width: 400px;
    height: 545px;
    border-radius: 10px;
    border: 12px solid #333333;
    background-color: #333333;
    box-shadow: 1px 2px 3px 5px rgba(0,0,0,.1);
}
.msg-view-result{
    height: 100%;
    width: 400px;
    padding: 15px 0;
    background-color: #ffffff;
    border-radius: 10px;
    margin-left: 5px;
    box-shadow: 1px 2px 3px 5px rgba(0,0,0,.1);
}
.msg-view-content-box{
    font-size: 18px;
    height: 100%;
    padding: 10px 15px;
    background-color: #ffffff;
    border-radius: 10px;
    overflow-y: auto;
}
.msg-view-content-box p{
    margin-top:10px;
    font-size: 18px;
}

.msg-view-content-box::-webkit-scrollbar {
    width: 6px;
}
.msg-view-content-box::-webkit-scrollbar-thumb {
    height: 17%;
    background-color: #333333;
    border-radius: 10px;
}
.msg-view-content-box::-webkit-scrollbar-track {
    background-color: rgba(46, 41, 78, 0.33);
    opacity: 0.33;
}





.header-top{
    width: 100%;
    height:50px;
    background-color: #313131;
}
.header-top-box{
    width: 100%;
    height: 50px;
    display: flex;
    align-content: center;
    justify-content: flex-end;
}
.header-top-box ul{
    display: flex;
    align-items: center;
    height: 100%;
}
.header-top-box ul li{
    display: inline-block;
    margin-left: 30px;
}
.header-top-box ul li a{
    display: inline-block;
    font-size:14px;
    color: #ffffff;
}
.header-mem-info{
    display: flex;
    align-items: center;
    height: 100%;
}
.header-mem-info span{
    display: inline-block;
    font-size: 13px;
    color: #969696;
    padding: 0 10px;
    position: relative;
}
.header-mem-info span.mem-price:after{
    position: absolute;
    content:'|';
    right: -1px;
    font-size: 11px;
}
.header-mem-info span.mem-price:last-child:after{
    content: '';
}
.header-mem-price{
    display: flex;
    align-items: center;
}
.header-mem-cash{
    display: flex;
    align-items: center;
}
.header-mem-cash .mem-cash{
    font-size: 14px;
    font-weight: 300;
    color: #ffffff;
}
.header-mem-cash .mem-cash .cash{
    padding: 0;
    padding-left: 3px;
    display: inline-block;
    color: #ff5252;
}
.header-charge-btn{
    display: inline-block;
    width: 70px;
    color: #ffffff;
    font-size: 13px;
    border: 1px solid #ffffff;
    text-align: center;
    padding: 2px 0;
    margin: 0 10px;
    transition: all .3s;
    border-radius: 2px;
}
.header-charge-btn:hover{
    background-color: #ffffff;
    color: #313131;
}
.mobile-header{
    display: none;
    background-color: #ffffff;
    box-shadow: 1px 2px 3px rgba(0,0,0,.1);
}
.mo_menu_btn{
    width: 30px;
    height: 40px;
    float: right;
    margin-top: 1px;
    margin-right: 15px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.burgur {
    width: 100%;
    border-bottom: 2px solid #333333;
    position: relative;
}
.burgur:before {
    content: '';
    position: absolute;
    width: 100%;
    border-bottom: 2px solid #333333;
    top: -9px;
    transition: all .3s;
}
.burgur:after {
    content: '';
    position: absolute;
    width: 100%;
    border-bottom: 2px solid #333333;
    bottom: -11px;
    transition: all .3s;
}
.burgur.on {
    border: 0;
}
.burgur.on:before {
    top: 0;
    transform: rotate(-135deg);
}
.burgur.on:after {
    bottom: -2px;
    transform: rotate(-225deg);
}





section.main{
    background-color: #ffffff;
}
section.part{
    padding:100px 0;
}
.main-banner{
    width: 100%;
    padding-top: 0;
    position: relative;
}
.main-left{
    position: absolute;
    left: 0;
    top: 0;
}
.main-right{
    position: absolute;
    right: 0;
    bottom: 40px;
}
.main-banner-box{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top:30px;
}
.box-1{
    background: none;
    height: auto;
}
.main-banner-title{
    font-size: 34px;
    font-weight: 600;
    line-height: 46px;
    padding:10px 0;
}
.main-banner-img{
    position: relative;
}
.main-login-box{
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
}
.btn-login{
    width: 195px;
    background-color: #ffffff;
    border: 2px solid #000000;
    color: #000000;
    height: 58px;
    border-radius: 0;
    line-height: 54px;
}
.btn-join{
    color:#000000;
    text-decoration: none;
}
.price-item-box:nth-child(2){
    padding-top: 40px;
}
.price-item{
    height:330px;
}
.price-item.price1{
    background: url('/assets/img/main/img_msg_product1.png') no-repeat 50%;
}
.price-item.price2{
    background: url('/assets/img/main/img_msg_product2.png') no-repeat 50%;
}
.price-item.price3{
    background: url('/assets/img/main/img_msg_product3.png') no-repeat 50%;
}
.price-item-top{
    background-color: transparent;
    text-align: left;
    padding: 20px 22px 0;
    font-size: 32px;
    font-weight: 600;
    height:auto;
}
.price-item-body{
    padding: 0 22px;
    height:auto;
}
/*.price-item-body *{
    line-height: 0.8;
}*/
.price-item-body .price-item-lg, .price-item-body .price-item-lg span{
    line-height: 1;
}
.price-item-foot{
    padding: 0 22px 20px;
    height: 140px;
    background: url('/assets/img/main/price_arrow.png') no-repeat 50%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    position: relative;
    top: -30px;
}
.price-item-lg{
    color:#000000 !important;
    text-align: left;
    font-size: 70px;
    font-weight:700;
    padding: 10px 0;
}
.price-item-lg span{
    color: #000000 !important;
    font-size: 90px !important;
}
.price-item-sm{
    display: inline-block;
    width:auto;
    padding:0 5px;
    font-size: 32px !important;
    color:#ffffff;
    font-weight:600;
    line-height:1;
    padding-top:10px;
}
.price-item-sm span{
    font-size: 32px !important;
    color:#ffffff;
    line-height:1;
}
.price-item-half-line{
    border-top: 3px solid #000000;
    top:60%;
}
.price-item-btn{
    font-size: 31px !important;
    height:40px;
    background-color: transparent;
    border:none;
    color: #000000 !important;
    display: inline;
    width: 120px;
    line-height: 1 !important;
}
.price-text{
    font-size:18px;
    color: #ff5353;
    margin-bottom: 15px;
    font-weight: 400;
}

.main-sub-box-area{
    margin-left: -50px;
    margin-right: -50px;
    display: flex;
    align-items: flex-start;
}
.main-box.sub{
    width: 33.33%;
    flex-direction: column;
    padding: 0 50px;
}
.main-box.sub .main-box-inner{
    text-align: center;
    width: 100%;
}
.main-box.sub .main-box-inner .main-inner-text{
    width: 100%;
}
.main-box h1{
    font-size: 30px;
    font-weight:600;
}
.main-box p{
    font-size:16px;
}

section.last{
    background: url('/assets/img/main/img_inter_bg.png') no-repeat 50%;
    background-size: cover;
}
.main-last-box{
    width:100%;
    padding: 0 20px;
    display: flex;
    justify-content: center;
}
.main-last-box .main-box.sub{
    width:100%;
}
.main-last-box .main-box.sub .main-inner-text img{
    max-width:635px;
}
.main-last-box .main-box.sub .main-inner-text h1{
    color: #22ffff;
    font-size: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.main-last-box .main-box.sub .main-inner-text p{
    color: #ffffff;
    font-size: 18px;
}

@media (max-width: 1200px) {
    .wrapper.main{
        min-width: inherit;
    }
    .container.main{
        width: auto;
    }
}
@media (max-width: 900px){
    .wrapper{
        padding-top:50px;
    }
    .header{
        background-color: #000000;
        position: fixed;
        top: 0;
        bottom: 0;
        width: 85%;
        transition: .3s ease-in-out;
        min-width:328px;
        left:-100%;
    }
    .header.on{
        background-color: #000000;
    }
    .header.active{
        left: 0;
    }
    .header .container{
        width:100%;
        padding: 0;
    }
    .footer .container{
        width:100%;
        padding:0 15px;
    }
    .header-top{
        height:auto;
        background-color: #000000;
    }
    .header-top-box{
        height:auto;
        flex-direction: column;
    }
    .header-top-box ul{
        width:100%;
        justify-content: space-around;
        order:1;
        padding-top: 10px;
    }
    .header-mem-info{
        flex-direction: column;
        order:2;
        background-color: #2c2c2c;
        padding: 25px 10px;
    }
    .header-top-box ul li{
        margin:0;
    }
    .header-top-box ul li a{
        padding: 20px;
    }
    .header-box{
        height: auto;
    }
    .logo-box{
        display: none;
    }
    .header-menu-box{
        padding: 15px 0 20px;
        width:100%;
    }
    .header-menu-box ul{
        width: 100%;
    }
    .header-menu-box ul li{
        float: unset;
    }
    .header-menu-box ul li a{
        padding:15px 0 15px 40px;
    }
    .header-menu-box ul li a:hover{
        color: #ffffff;
    }
    .header-mem-price{
        order:2;
    }
    .header-mem-cash{
        order:1;
        flex-direction: column;
    }
    .header-charge-btn{
        margin:15px;
    }
    .mobile-header{
        display: flex;
        width: 100%;
        height: 50px;
        align-items: center;
        top: 0;
        position: fixed;
        z-index: 50;
        justify-content: space-between;
    }
    .mobile-header img{
        width:140px;
    }

    .footer-info-box ul li{
        padding-right:15px;
    }
    .footer-info-box ul li a{
        font-size: 13px;
    }
    .footer-copy{
        margin-top:10px;
    }
    .footer-info-sub span{
        margin:0 5px;
    }
    section.part{
        padding: 50px 0 !important;
    }
    .main-sub-box-area{
        margin: 0;
    }
    .price-box-right{
        flex-direction: column;
        align-items: center;
    }
    .price-item-box{
        padding-top: 40px;
    }
    .main-sub-box-area{
        flex-direction: column;
        align-items: center;
    }
    .main-box.sub{
        width: 100%;
        padding: 0;
    }
    .main-box h1, .main-last-box .main-box.sub .main-inner-text h1{
        font-size: 26px;
    }

    .footer-inner{
        flex-direction: column;
    }
    .footer-info-box{
        order:1;
    }
    .footer-seal{
        padding-left:0;
        padding-bottom:10px;
        order:0;
    }

}
@media (max-width: 600px){
    .main-left, .main-right{
        display: none;
    }
    .main-banner-img{
        width:100%;
    }
    .main-banner-img img{
        width: 100%;
    }
    .main-banner-title{
        font-size: 28px;
        line-height: 40px;
        padding-bottom: 0;
    }
    .main-login-box{
        position: relative;
        bottom: 120px;
    }
    .login-area{
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .btn-login{
        width: 120px;
        font-size: 13px;
        height: 45px;
        line-height: 44px;
    }
    .btn-join{
        padding: 0;
    }
}


#link {color: #E45635;display:block;font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;text-align:center; text-decoration: none;}
#link:hover {color: #CCCCCC}

#link, #link:hover {-webkit-transition: color 0.5s ease-out;-moz-transition: color 0.5s ease-out;-ms-transition: color 0.5s ease-out;-o-transition: color 0.5s ease-out;transition: color 0.5s ease-out;}

/** BEGIN CSS **/
body {background: #333333;}
@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;
}

#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;
}


.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;
}

.text-conversion-box{
    width:100%;
}
.conversion-title{
    font-size:18px;
    font-weight:600;
    color: #8b8ba5;
    padding-bottom: 5px;
}
.conversion-text{
    padding-bottom: 5px;
    font-size:13px;
    color:#8b8b8b;
}
.conversion-text span{
    font-weight:600;

}
.conversion-text span.ex{
    color: #207345;
}



.send-search-line input.send-input{
    width:290px;
    /*margin: 0 10px;*/
}
.tcnt, .scnt, .wcnt, .fcnt, .per {
    font-weight:500;
}
.tcnt{
    color: #0f1f3e !important;
}
.scnt{
    color: #104b64 !important;
}
.wcnt{
    color: #e15f00 !important;
}
.fcnt{
    color: #9a1a0d !important;
}
.per{
    color: #0f1f3e !important;
}

.dot1 {
    animation: visibility 3s linear infinite;
}

@keyframes visibility {
    0% {
        opacity: 1;
    }
    65% {
        opacity: 1;
    }
    66% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.dot2 {
    animation: visibility2 3s linear infinite;
}

@keyframes visibility2 {
    0% {
        opacity: 0;
    }
    21% {
        opacity: 0;
    }
    22% {
        opacity: 1;
    }
    65% {
        opacity: 1;
    }
    66% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.dot3 {
    animation: visibility3 3s linear infinite;
}

@keyframes visibility3 {
    0% {
        opacity: 0;
    }
    43% {
        opacity: 0;
    }
    44% {
        opacity: 1;
    }
    65% {
        opacity: 1;
    }
    66% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}


.fail-message-box{
    width: 100%;
    min-height: 30px;
    position: absolute;
    top: 25px;
    background-color: #ffebae;
    z-index: 10;
    font-size: 13px;
    padding: 5px;
    border-radius: 5px;
}
.fail-message-box:before{
    content: '';
    position: absolute;
    left: 20px;
    display: inline-block;
    width: 0;
    height: 0;
    top: -13px;
    border-style: solid;
    border-width: 8px;
    border-color: transparent transparent #ffebae transparent;
}


.msg-write-box.result-view{
    width: 250px;
    height:310px;
    border-radius: 0;
    box-shadow: none;
    border-width: 1px;
    border-color: #cccccc;
}
.msg-write-box.result-view input, .msg-write-box.result-view textarea{
    font-size:14px;
}
.msg-recv-box.result-tbl-box{
    width: 910px;
    height:640px;
    padding:0;
    border:0;
}
.msg-recv-box.result-tbl-box .board-tbl-box{
    border:1px solid #cccccc;
    border-left: 0;
    overflow-y: auto;
    height:441px;
}
.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 #efefef;
    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{
    background-color: #f8f8f8;
    cursor: pointer;
}
.msg-recv-box.result-tbl-box .board-tbl tr td{
    padding: 10px 0;
}
.msg-recv-box.result-tbl-box .board-tbl tr td.result-text{
    color: #bbbbbb;
}
.msg-view-left-box{
    width:250px;
    float:left;
}


.msg-view-detail-box{
    padding-top: 10px;
    width:100%;
    overflow: hidden;
}
.detail-tbl{
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #cccccc;
}
.detail-tbl tr{
    border-bottom: 1px solid #cccccc;
}
.detail-tbl tr th, .detail-tbl tr td{
    font-size: 13px;
    padding:10px;
}
.detail-tbl tr th{
    border-right: 1px solid #cccccc;
    background-color: #efefef;
}



.conversion-text span{
    display: inline-block;
    padding: 3px 5px;
    border: 1px solid #e1e1e1;
    cursor: pointer;
    margin-bottom:2px;
    border-radius: 2px;
}
.conversion-text span:hover{
    background-color: rgba(44,57,138, .1);
}