@charset "utf-8";
/* *******************************************************
 * filename : common.css
 * description : 전체적으로 사용하는  CSS
 * date : 2023-06-09
******************************************************** */

/* ========================================================
 * 공통 컴포넌트 스타일
 * 모든페이지 사용
======================================================== */

/* ****************** FORM ********************** */
/* **** 커스텀 CEHCKBOX  **** */
.gs-custom-checkbox .checkbox-item{display:inline-block; vertical-align:middle;}
.gs-custom-checkbox .checkbox-item input[type="checkbox"]{display:none;}
.gs-custom-checkbox .checkbox-item label{padding-left: 40px; display:inline-block; font-weight: 500; position:relative; color:#000; font-size:18px; line-height: 30px; letter-spacing:-0.75px;}
.gs-custom-checkbox .checkbox-item label:before{position: absolute; top: 0px; left: 0; font-size:24px; color: #adadad; font-weight: 400; content:"\e92c"; font-family: xeicon;}
.gs-custom-checkbox .checkbox-item label.be-n:before{display: none;}
.gs-custom-checkbox .checkbox-item input:checked + label:before{content:"\e92b"; color: #4a4adb;}
.gs-custom-checkbox .checkbox-item input[type="checkbox"]:checked + label i{color: #4a4adb;}
.gs-custom-checkbox .checkbox-item .essential{color: #4a4adb; font-weight: 500;}
.gs-custom-checkbox .checkbox-item .choice{color: #0abd95; font-weight: 500;}
/* disabled */
.gs-custom-checkbox.disabled .checkbox-item label{cursor: auto;}
.gs-custom-checkbox.disabled .checkbox-item label:before, .gs-custom-checkbox.disabled .checkbox-item input:checked + label:before, .gs-custom-checkbox.disabled .checkbox-item input[type="checkbox"]:checked + label i{color: #ddd;}

/* **** 커스텀 RADIO  **** */
.gs-custom-radio .radio-item{display:inline-block; vertical-align:middle;}
.gs-custom-radio .radio-item input[type="radio"]{display:none;}
.gs-custom-radio .radio-item label{padding-left: 25px; display:inline-block; font-weight: 400; position:relative; color:#000; letter-spacing:-0.75px; font-size: 15px; height:30px; line-height:30px;}
.gs-custom-radio .radio-item label:before{position: absolute; top: 0px; left: 0; font-size:18px; color: #adadad; font-weight: 400; content:"\e9c6"; font-family: xeicon;}
.gs-custom-radio .radio-item input:checked + label:before{content:"\e9c7"; color: #4a4adb;}

/* **** 커스텀 TEXTAREA  **** */
.gs-custom-textarea{height:38px; border:0px; outline: none; width:100%; height:140px; resize: none; background-color:#f5f5f5; font-size:14px; line-height: 23px; letter-spacing: -0.2px; color: #000; vertical-align:middle;}
.gs-custom-textarea::placeholder,
.gs-custom-textarea::-webkit-input-placeholder,
.gs-custom-textarea:-ms-input-placeholder,
.gs-custom-textarea:-mos-input-placeholder{color: #aaa;}
/* IE9 이하에서 placeholder 클래스 생성 css */
.gs-custom-textarea.placeholder{color: #aaa;}
/* **** 커스텀 SELECT BOX **** */
.gs-custom-select{display:inline-block; width: 100%;}

.gs-custom-select select{
    width: 529px;
    height: 41px;
    word-spacing: -2px;
    background-color: #f5f5f5;
    font-size: 14.5px;
    border-radius: 5px;
    border: none;
    font-weight: normal;
}
.gs-custom-select select option{
    font-size: 14px;
    background-color: #f5f5f5;
}
.gs-custom-select .templateSearch{
    width: 128px;
}
.gs-custom-select2 select{
    height: 40px;
    width: 177px;
    float: left;
    margin-right: 20px;
    background-color: #f5f5f5;
    border: 1px solid #f5f5f5;
    font-size: 15px;
    font-weight: normal;
    display: inline-block;
}
.gs-custom-select2 select option{
    background-color: #f5f5f5;
    font-size: 14px;
}
/*.write-tit-con .tit-right{
    display: flex;
}*/
select[disabled] {
    background-color: #dfdfdf;
    pointer-events: none;
    color: black;
}
input[disabled] {
    padding: 5px;
    background-color: #dfdfdf;
    pointer-events: none;
    color: black;
}
.select-option.select-in-popup{z-index: 10000 !important;}
/* fake form - 기본 select 스타일 */
.gs-custom-select .select-title {/*width: 100% !important; */color: #777; text-align: left; vertical-align: middle; border:0; line-height: 30px; font-size: 16px; font-weight: 400; letter-spacing: -0.75px; color:#000; background: url("/common/img/sub/select_arrow.png") no-repeat 99% 50%; display: inline-block; -box-sizing: border-box; cursor: pointer; border-radius:5px; transition:border-color 0.2s, background-color 0.2s}
.gs-custom-select .select-title strong {width: 100%; font-weight: 400; word-break: break-all; display: block; overflow: hidden;}
.gs-custom-select .select-title.focus,
.gs-custom-select .select-title.active {color: #000; border-color: #aaa; background-color:#fff; }
.gs-custom-select .select-title.disabled {color: #999; text-shadow: 1px 1px 0 #fff; border-color: #bbb; background-color: #eee;}
.select-option {border: 1px solid #333; background: #fff; overflow: auto; width: 75% !important;}
.select-option ul {margin: 0; padding: 0;}
.select-option li {list-style: none;}
.select-option span,
.select-option strong {/*height: 1.1em;*/ font-size: 13px; font-weight: normal; color: #777; white-space: nowrap; text-overflow: ellipsis; line-height: 1.4; text-decoration: none; padding: 4px 5px 7px; display: block; overflow: hidden; cursor: default;}
.select-option strong {font-weight: bold; color: #000; border-top: 1px solid #eee; border-bottom: 1px solid #ccc;}
.select-option li li span {padding-left: 10px;}
.select-option span:hover,
.select-option span.selected {color: #000; background: #eee;}
.select-option .disabled span,
.select-option .disabled strong {color: #bbb; text-decoration: line-through; background: none;}

/* select 스타일추가(MH) */
.h30-select .select-title{line-height:28px; padding:0 10px; font-size:13px; box-sizing:border-box; background-position:95% 50%}
.h40-select .select-title{line-height:38px; padding:0 13px; font-size:14px; box-sizing:border-box; background-position:95% 50%}
.h60-select .select-title{line-height:58px; padding:0 20px; font-size:16px; box-sizing:border-box;}
.white-select .select-title{background-color:#fff; border:1px solid #fff}
.gray-select .select-title{background-color:#f5f5f5; border:1px solid #f5f5f5}
.transparent-select .select-title,
.transparent-select .select-title.active{background-color:transparent; border:1px solid transparent}
.gs-custom-select.n-pass .select-title,
.gs-custom-select.n-pass .select-title.active{border-color:#ff4242}

/* **** 커스텀 INPUT **** */
.gs-custom-input{border: none; width: 100%; font-size: 16px; height: 30px; line-height: 30px; font-weight: 400; color: #000; -webkit-appearance: none; moz-appearance: none; appearance: none; -webkit-border-radius: 5px !important; border-radius: 5px !important; letter-spacing: -0.25px; background-color: transparent; transition:border-color 0.2s, background-color 0.2s}
.gs-custom-input::placeholder,
.gs-custom-input::-webkit-input-placeholder,
.gs-custom-input:-ms-input-placeholder,
.gs-custom-input:-mos-input-placeholder{color: #aaa;}
.gs-custom-input:focus{outline: none;}
.gs-custom-input::-ms-clear { display: none; } /* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
/* IE9 이하에서 placeholder 클래스 생성 css */
.gs-custom-input.placeholder{color: #aaa;}
/* input 스타일추가(MH) */
.h30-input.gs-custom-input{width: 268px; height: 30px; line-height: 30px; padding:0 10px; font-size: 13px; box-sizing:border-box; background-color: #f5f5f5; border: none; }
.h30-input.gs-custom-input2{width: 223px; height: 30px; line-height: 30px; padding:0 10px; font-size: 13px; box-sizing:border-box; background-color: #f5f5f5; border: none;}
.h40-input.gs-custom-input{width: 100%; height: 40px; line-height: 40px; padding:0 20px; font-size: 14px; box-sizing:border-box; }
.h60-input.gs-custom-input{height: 60px; line-height: 60px; padding:0 20px; font-size: 16px; box-sizing:border-box; }
.white-input.gs-custom-input{background-color:#fff; border:1px solid #fff}
.gray-input.gs-custom-input{background-color:#f5f5f5; border:1px solid #f5f5f5}
.white-input.gs-custom-input:focus,
.gray-input.gs-custom-input:focus{background-color:#fff; border-color:#aaa}
.white-input.gs-custom-input[readonly]:focus{background-color:#fff; border:1px solid #fff}
.gray-input.gs-custom-input[readonly]:focus{background-color:#f5f5f5; border:1px solid #f5f5f5}
.n-pass.gs-custom-input{border-color: #ff4242;}
.gs-custom-input.n-pass:focus{border-color:#ff4242;}
/* input X버튼 추가(MH) */
.gs-custom-input-wrapper{position:relative;}
.gs-custom-input-wrapper .input-val-delete-btn{display:none; position:absolute; top:50%; right:10px; transform:translateY(-50%); margin-top:2px; color:#000; font-size:14px;}
/* .gs-custom-input-wrapper .gs-custom-input:focus + .input-val-delete-btn{display:block;} */

/* **** 커스텀 SEARCH **** */
.gs-custom-search{background-color: #f5f5f5; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #f5f5f5; box-sizing:border-box;}
.gs-custom-search.on{background-color: #fff; border-color: #aaa;}
.gs-custom-search .inner{position: relative; padding: 4px 40px 4px 0; width: 300px;}
.gs-custom-search .inner:before{position: absolute; top: 50%; margin-top: -10px; right: 60px; display: block; content: ''; width: 1px; height: 20px; /* background-color: #ddd; */}
.gs-custom-search .search-btn{position: absolute; top: 0; right: 0; left: 253px; width: 59px; height: 42px; background-color: transparent; border: none;}
.gs-custom-search .search-btn2{position: absolute; top: 0; right: 0; left: 208px; width: 59px; height: 38px; background-color: transparent; border: none; color: black}
.gs-custom-search .search-btn i{font-size: 20px; color: #000;}


/* **** 커스텀 INPUT을 감싸는 박스구조(Focus 이펙트) **** */
.change-effect-bg{position: relative; transition:border-color 0.2s, background-color 0.2s}
.change-effect-bg.on{background-color: #fff; border-color: #aaa;}
.change-effect-bg.on .gs-custom-input,
.change-effect-bg.on .gs-custom-select,
.change-effect-bg.on .gs-custom-textarea{background-color: transparent;}


/* **** 커스텀 INPUT + 버튼 구조 **** */
.gs-custom-input-btn-group{/*background-color: #f5f5f5;*/ -webkit-border-radius: 5px; border-radius: 5px;/* border: 1px solid #f5f5f5;*/ -webkit-box-sizing: border-box; box-sizing: border-box;}
.gs-custom-input-btn-group.n-pass{border-color: #ff4242;}
.gs-custom-input-btn-group .input-con{position: relative; width: calc(100% - 90px); padding-right: 90px;}
.gs-custom-input-btn-group button{position: absolute; top: 5px; right: 15px;}


/* ****************** BUTTON ********************** */
.sub-join02-btn-con{text-align: center; margin-top: 50px;}

.custom-btn-blue-full{width: 100%; margin: 0; display: block; line-height: 60px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #4a4adb; text-align: center; font-size: 16px; font-weight: 500; letter-spacing: -0.5px; color: #fff;}
.custom-btn-gray-full{display: block; width: 100%; line-height: 60px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #b2b2b2; text-align: center; font-size: 16px; font-weight: 500; letter-spacing: -0.5px; color: #fff;}
.custom-btn-black-full{display: block; width: 100%; line-height: 60px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #000000; text-align: center; font-size: 16px; font-weight: 500; letter-spacing: -0.5px; color: #fff;}

.custom-btn-blue-w290{margin: 0 10px; display: inline-block; width: 290px; line-height: 60px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #4a4adb; text-align: center; font-size: 16px; font-weight: 500; letter-spacing: -0.5px; color: #fff;}
.custom-btn-gray-w290{margin: 0 10px; display: inline-block; width: 290px; line-height: 60px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #b2b2b2; text-align: center; font-size: 16px; font-weight: 500; letter-spacing: -0.5px; color: #fff;}
.custom-btn-black-w290{margin: 0 10px; display: inline-block; width: 290px; line-height: 60px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #000000; text-align: center; font-size: 16px; font-weight: 500; letter-spacing: -0.5px; color: #fff;}

.custom-btn-blue-w200{margin: 0 10px; display: inline-block; width: 200px; line-height: 60px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #4a4adb; text-align: center; font-size: 16px; font-weight: 500; letter-spacing: -0.5px; color: #fff;}
.custom-btn-gray-w200{margin: 0 10px; display: inline-block; width: 200px; line-height: 60px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #b2b2b2; text-align: center; font-size: 16px; font-weight: 500; letter-spacing: -0.5px; color: #fff;}
.custom-btn-black-w200{margin: 0 10px; display: inline-block; width: 200px; line-height: 60px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #000; text-align: center; font-size: 16px; font-weight: 500; letter-spacing: -0.5px; color: #fff;}

.custom-btn-blue-full-h40{width: 100%; margin: 0; display: block; line-height: 40px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #4a4adb; text-align: center; font-size: 16px; font-weight: 400; letter-spacing: -0.5px; color: #fff;}
.custom-btn-gray-full-h40{width: 100%; margin: 0; display: block; line-height: 40px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #b2b2b2; text-align: center; font-size: 16px; font-weight: 400; letter-spacing: -0.5px; color: #fff;}
.custom-btn-black-full-h40{width: 100%; margin: 0; display: block; line-height: 40px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #000000; text-align: center; font-size: 16px; font-weight: 400; letter-spacing: -0.5px; color: #fff;}

.custom-btn-blue-w150-h40{width: 150px; margin: 0 5px; display: inline-block; line-height: 40px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #4a4adb; text-align: center; font-size: 16px; font-weight: 400; letter-spacing: -0.5px; color: #fff;}
.custom-btn-gray-w150-h40{width: 150px; margin: 0 5px; display: inline-block; line-height: 40px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #b2b2b2; text-align: center; font-size: 16px; font-weight: 400; letter-spacing: -0.5px; color: #fff;}
.custom-btn-black-w150-h40{width: 150px; margin: 0 5px; display: inline-block; line-height: 40px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #000000; text-align: center; font-size: 16px; font-weight: 400; letter-spacing: -0.5px; color: #fff;}

.custom-btn-black-w70-h30{width: 70px; display: inline-block; line-height: 30px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #000000; text-align: center; font-size: 14px; font-weight: 400; letter-spacing: -0.5px; color: #fff;}
.custom-btn-gray-w70-h30{width: 70px; display: inline-block; line-height: 30px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #b2b2b2; text-align: center; font-size: 14px; font-weight: 400; letter-spacing: -0.5px; color: #fff;}

.custom-btn-black-w60-h40{width: 60px; display: inline-block; line-height: 40px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #000000; text-align: center; font-size: 16px; font-weight: 400; letter-spacing: -0.5px; color: #fff;}

.custom-btn-black-w50-h30{width: 50px; display: inline-block; line-height: 30px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #000000; text-align: center; font-size: 13px; font-weight: 400; letter-spacing: -0.5px; color: #fff;}

/* ********************** 버튼 추가 css 200810 ********************** */
/* 기본 스타일 */
.cm-positive-btn{display: inline-block; background-color: rgb(34, 58, 94); color: #fff; -webkit-transition: all 0.3s; transition: 0.3s;}
.cm-positive-btn:hover{background-color: #0e0e8e;}
.cm-assist-btn{display: inline-block; border: 1px solid #4a4adb; color: #4a4adb; background-color: #fff; -webkit-box-sizing: border-box; box-sizing: border-box;}
.cm-basic-btn{display: inline-block; border: 1px solid #aaa; background-color: #fff; color: #000; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.3s; transition: 0.3s;}
/* **** 페이지 탭 스타일 **** */
.gs-custom-page-tab{margin-bottom: 20px;}
.gs-custom-page-tab ul{display: table; table-layout: fixed; width: 100%; -webkit-border-radius: 10px; border-radius: 10px; overflow: hidden;}
.gs-custom-page-tab ul:after{display: none;}
.gs-custom-page-tab ul li{display: table-cell; border-left: 1px solid #e5e5e5;}
.gs-custom-page-tab ul li:first-child{border-left: none;}
.gs-custom-page-tab ul li a{display: block; text-align: center; width: 100%; height: 70px; line-height: 70px; background-color: #f5f5f5; font-size: 16px; font-weight: 400; letter-spacing: -0.2px; color: #111;}
.gs-custom-page-tab ul li.selected a{background-color: rgb(34, 58, 94); color: #fff;}

/* **** 페이지 서브 탭 스타일 **** */
.gs-custom-page-sub-tab{width: 30%; margin: 0 auto;}
.gs-custom-page-sub-tab ul{display: table; table-layout: fixed; width: 100%; -webkit-border-radius: 60px; border-radius: 60px; overflow: hidden;}
.gs-custom-page-sub-tab ul:after{display: none;}
.gs-custom-page-sub-tab ul li{display: table-cell; border-left: 1px solid #e5e5e5;}
.gs-custom-page-sub-tab ul li:first-child{border-left: none;}
.gs-custom-page-sub-tab ul li a{display: block; text-align: center; width: 100%; height: 50px; line-height: 50px; background-color: #f5f5f5; font-size: 16px; font-weight: 400; letter-spacing: -0.2px; color: #111;}
.gs-custom-page-sub-tab ul li.selected a{background-color: #f7e101; color: saddlebrown; font-weight: bold;}


/* ****************** 서브 공통 ********************** */
/* 컨텐츠 영역 스타일 */
.ds-cm-main-con{width: 100%; background-color: #fff; -webkit-border-radius: 10px; border-radius: 10px; -webkit-transition: box-shadow 0.2s; transition: box-shadow 0.2s;}
/* 영역 hover시 */
.ds-cm-hover-effet{-webkit-box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.13); box-shadow: 5px 5px 20px 0px rgba(0,0,0,0.13);}

/* 타이틀 스타일 */
.ds-cm-tit-style{padding: 0 30px; border-bottom: 1px solid #e5e5e5;/* margin-bottom: 80px;*/}
.ds-cm-tit-style .inner{padding: 28px 0; position: relative;}
.ds-cm-tit-style .tit{font-size: 15px; letter-spacing: -0.75px; color: #000; font-weight: 600;}
.ds-cm-tit-style .tit b{margin-right: 5px; display: inline-block; vertical-align: bottom; font-size: 24px; font-weight: 700;}

/* 서브 타이틀 스타일 */
.ds-cm-sub-tit-style{}
.ds-cm-sub-tit-style{padding: 27px 0; position: relative; border-bottom: 1px solid #e5e5e5;}
.ds-cm-sub-tit-style p{font-size: 16px; font-weight: 500; letter-spacing: -0.5px; color: #000;}
.ds-cm-sub-tit-style p b{position: relative; font-weight: 500; display: inline-block;}
.ds-cm-sub-tit-style p b:before{position: absolute; bottom: -28px; left: 0; display: block; content: ''; width: 100%; height: 1px; background-color: #000;}
.ds-cm-sub-tit-style p span{position: relative; top: 1px; margin-left: 8px; display: inline-block; vertical-align: bottom; font-size: 13px; font-weight: 400; color: #888;}
.ds-cm-sub-tit-style a{position: absolute; top: 50%; margin-top: -15px; right: 0;}
.ds-cm-sub-tit-style .total-txt{position: absolute; top: 50%; margin-top: -8px; right: 0; font-size: 16px; font-weight: 500; letter-spacing: -0.25px; color: #000;}
.ds-cm-sub-tit-style .total-txt b{display: inline-block; font-weight: 600; color: #ff2121;}

/* 버튼 모양 스타일 */
.ds-cm-btn-style{display: block;}

/* 컨텐츠 영역 안 여백 공간 */
.ds-cm-inner{padding: 0 30px;}
.ds-cm-inner.clear-both{clear: both;}

/* 커스텀 테이블 스타일 */
.gs-custom-tb{/*table-layout: fixed;*/ width: 100%;}
.gs-custom-tb th, .gs-custom-tb td{padding: 13px 0; font-size: 14px; line-height: 24px; font-weight: 400; letter-spacing: -0.5px; color: #000; text-align: center; border: 1px solid #e5e5e5;}
.gs-custom-tb th{background-color: #f5f5f5; color: #666;}
.gs-custom-tb td{font-weight: 400;}
.gs-custom-tb tr th:first-child,
.gs-custom-tb tr td:first-child{border-left:0}
.gs-custom-tb tr th:last-child,
.gs-custom-tb tr td:last-child{border-right:0}
.gs-custom-tb .border-top-black{border-top: 1px solid #000;}
.gs-custom-tb .border-left-none{border-left: none;}
.gs-custom-tb .border-right-none{border-right: none;}
.gs-custom-tb .font-weight-r{font-weight: 400;}
.gs-custom-tb .font-weight-m{font-weight: 500;}
.gs-custom-tb .font-weight-b{font-weight: 600;}
.gs-custom-tb .text-align-left{text-align: left; padding: 13px 10px;}
.gs-custom-tb .text-align-right{text-align: right; padding: 13px 10px;}
.gs-custom-tb .cm-move-link {display: inline-block; max-width: 160px; font-size: 14px; line-height: 14px; vertical-align: middle;}
.cm-tooltip-tb{table-layout: fixed; width: 100%;}
.cm-tooltip-tb th, .cm-tooltip-tb td{text-align: left; padding: 13px 15px; font-size: 13px; line-height: 1.7;}
.cm-tooltip-tb th{width: 30%;}
.cm-tooltip-tb td{width: 70%;}

/* 포인트 텍스트 컬러 */
.font-color-red{color: #ff4242;}

/* a태그 underline 스타일(링크이동스타일) */
.cm-move-link{/*display: block;*/ padding-bottom: 5px; border-bottom: 1px solid #4a4adb; color: #4a4adb; font-size: 16px;}
.cm-move-link-arrow{position: relative; display: block; padding-bottom: 5px; padding-left: 20px; border-bottom: 1px solid #4a4adb; color: #4a4adb; font-size: 16px;}
.cm-move-link-arrow:before{position: absolute; top: 2px; left: 0; display: inline-block; font-weight: 600; content: "\e93b"; color: #4a4adb; font-size: 13px; font-family: xeicon;}

/* 툴팁 스타일 */
.cm-tooltip-open-btn{position: relative;}
.cm-tooltip-con{display: none; position: absolute; top: 30px; left: 0; z-index: 99999;}
.cm-tooltip-inner{padding: 25px; border: 1px solid #54aeff; -webkit-border-radius: 10px; border-radius: 10px; background-color: #fff;}
.cm-tooltip-tit{margin-bottom: 5px; font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: -0.5px; color: #000;}
.cm-tooltip-txt{font-size: 15px; line-height: 24px; font-weight: 600; letter-spacing: -0.5px; color: #333;}

/* 전송가능여부 ver */
.cm-tooltip-con.transmit{left: -85px;}
.transmit .cm-tooltip-txt{padding-left: 20px; position: relative;}
.transmit .cm-tooltip-txt:before{position: absolute; top: 0; left: 0; display: inline-block; vertical-align: middle; font-size: 16px; color: #ff9db4; content:"\e925"; font-family: xeicon;}
.transmit .cm-tooltip-txt.use:before{color: #33d0ad; content: '\e92b';}
.transmit .cm-tooltip-txt.none{padding-left: 0;}
.transmit .cm-tooltip-txt.none:before{display: none;}

/* 알림 ver */
.side-alarm-open-btn{position: relative;}
.side-alarm-con{display: none; position: absolute; top: 30px; left: 0; z-index: 99999;}
.side-alarm-con.open{display: block;}
.side-alarm-inner{padding: 25px 40px 25px 25px; border: 1px solid #4a4adb; -webkit-border-radius: 10px; border-radius: 10px; background-color: #fff;}
.alarm-close-btn{position: absolute; top: 10px; right: 10px;}
.alarm-close-btn i{font-size: 30px; color: #000;}
.side-alarm-inner .side-alarm-txt{text-align: left; font-size: 16px; line-height: 24px; padding-bottom: 24px; font-weight: 400; color: #666; min-height: 48px;}
.side-alarm-inner .alarm-more-view{display: block; position: absolute; bottom: 20px; right: 20px; font-size: 15px; padding-bottom: 5px; padding-left: 0; padding-right: 20px;}
.side-alarm-inner .alarm-more-view:before {left: auto; right: 0; content: "\e93e";}

/* on/off 버튼 스타일 */
.setting-list{margin-top: 20px;}
.setting-list-warpper .setting-list:first-child{margin-top: 0;}
.setting-list .tit{width: 100px; float: left; font-size: 15px; font-weight: 400; letter-spacing: -0.75px; line-height: 30px; color: #666;}
.setting-list .switch{width: calc(100% - 100px); float: left;}
.setting-list .on-off {width:100%; height:30px; position: relative;}
.setting-list .on-off .tranparent-btn{position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: 1; opacity: 0;}
.setting-list .on-off label {display:block; background: #eee; border-radius:30px; position:relative; box-shadow: inset 0px 2px 2px rgba(0,0,0,0.15), 0px 2px 0px rgba(255,255,255,0.15); width: 100%; height: 100%;}
.setting-list .switch.change-none .on-off label{cursor: default;}
.setting-list .on-off label:before {content:'ON'; text-transform:uppercase; position:absolute; top:0; right:0; width: 50%; line-height: 30px; color:#aaa; text-align: center; z-index: 1;}
.setting-list .on-off label:after {content:'OFF'; text-transform:uppercase; position:absolute; width: 50%; line-height: 30px; top:0; left:0; color:#fff; text-align: center; z-index: 1;}
.setting-list .on-off label .btn {display:block; width:90px; height:30px; background-color: #ccc; border-radius:30px; top:0; left:0; position:relative; box-shadow: none; cursor:pointer; transition: all 0.4s ease;}
.setting-list .on-off input[type="checkbox"] {/* visibility: hidden; */display:none;}
.setting-list .on-off input[type="checkbox"]:checked + label .btn{left: 80px; background-color:#4a4adb;}
.setting-list .on-off input[type="checkbox"]:checked + label:before {color: #fff;}
.setting-list .on-off input[type="checkbox"]:checked + label:after {color: #aaa;}


/* ========================================================
 * 모달 레이어팝업 스타일
 * 모든페이지 공통사용
======================================================== */
/* **** 모달 스타일 **** */
.modal-fixed-pop-wrapper{display: none; overflow-y:auto; overflow-x:auto; position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:10000; background:#000; background:rgba(0,0,0,0.65);}
.modal-fixed-pop-wrapper.open{display: block;}
.modal-fixed-pop-inner{position:absolute; display:table; width:100%; height:100%; text-align:center;}
.modal-inner-box{ position:relative; display:table-cell; vertical-align:middle;}
.modal-inner-content{text-align:left;}

/* **** 팝업 레이어 스타일 공통 **** */
.layer-fixed-pop-wrapper{display: none; overflow-y:auto; overflow-x:auto; position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:10000; background:#000; background:rgba(0,0,0,0.65);}
.layer-fixed-pop-wrapper.open{display: block;}

/* **** Alert 모달 스타일(450px) **** */
.cm-modal-content{width:450px; margin:20px auto; -webkit-border-radius: 10px; border-radius: 10px; overflow: hidden;}
.close-icon-style{position:absolute; top:19px; right:25px;}
.close-icon-style i{font-size:16px; color: #000;}
.close-icon-style i:hover {color:#000}
.cm-modal-content .tit-con{position:relative; padding-right: 50px; border-bottom: 1px solid #e5e5e5; background-color: #fff;}
.cm-modal-content .tit-con p{padding-left: 20px;}
.cm-modal-content .tit-con p i{display: inline-block; vertical-align: middle; font-size: 17px; line-height: 54px; color: #ff4242;}
.cm-modal-content .tit-con p span{margin-left: 10px; display: inline-block; vertical-align: middle; font-size: 16px; line-height: 54px; font-weight: 500; letter-spacing: -0.75px; color: #000;}
.cm-modal-content .txt-con{padding: 25px 10px; font-size: 14px; line-height: 22px; font-weight: 400; letter-spacing: -0.5px; color: #000; text-align: center; background-color: #fff; -ms-word-break: keep-all; word-break: keep-all;}
.cm-modal-content .btn-group{}
.cm-modal-content .btn-group a{display: block; float: left; font-size: 14px; line-height: 45px; font-weight: 500; letter-spacing: -0.25px; text-align: center; border-top: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #fff;}
.cm-modal-content .btn-group a:first-child{border-left: none;}
.cm-modal-content .btn-group .col-1-blue{width: 100%; color: #4a4adb;}
.cm-modal-content .btn-group .col-2-blue{width: 50%; color: #4a4adb;}
.cm-modal-content .btn-group .col-1-black{width: 100%; color: #000;}
.cm-modal-content .btn-group .col-2-black{width: 50%; color: #000;}

/* ========================================================
 * member 스타일
 * 회원가입, 로그인, 내정보 사용
======================================================== */
/* ************** 스크롤 ************** */
.sub-join02-check-list .scroll-object-box{height: 140px;}
.service-txt-scroll{font-size: 13px; line-height: 32px; font-weight: 400; letter-spacing: -0.5px; color: #000; padding: 5px 0;}

/* ************** 타이틀+인풋 영역 ************** */
/* 체크리스트 */
.sub-join02-check-list .check-inner.open .title-con{border-radius:10px 10px 0 0; -webkit-transition: all 0.3s; transition: all 0.3s;}
.sub-join02-check-list .check-inner.open .title-con .arrow i{-webkit-transform: rotate(180deg); transform: rotate(180deg);}

.sub-join02-check-list .input-inner .title-con{position: relative; z-index: 1; float: left; width: 150px; position:relative; padding-left: 40px; font-size: 16px; font-weight: 500; letter-spacing: -0.75px; color: #000; line-height: 30px; border-right: 1px solid #e5e5e5; margin-right: 20px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.sub-join02-check-list.corporate .input-inner .title-con{width: 160px;}
.sub-join02-check-list .input-inner .title-con i{position: absolute; top: 1px; left: 0; display:inline-block; font-weight: 400; font-style: normal;}
.sub-join02-check-list .input-inner .title-con i:before{content:"\e92c"; font-family: xeicon; font-size: 24px; color: #adadad;}
.sub-join02-check-list .input-inner .input-con{position: relative; z-index: 1; float: left; width: calc(100% - 170px);}
.sub-join02-check-list .input-inner .input-con.short{width: calc(100% - 335px); padding-right: 165px;}
.sub-join02-check-list.corporate .input-inner .input-con{width: calc(100% - 180px);}
.sub-join02-check-list.corporate .input-inner .input-con.short {width: calc(100% - 320px); padding-right: 135px;}
.sub-join02-check-list.corporate .full{margin-top: 10px;}
.sub-join02-check-list.corporate .full .input-inner .input-con{width: 100%;}
.sub-join02-check-list .check-list-item.visit{margin-top: 10px;}
.sub-join02-check-list .check-list-item.visit .input-inner .input-con{width: 100%;}

.sub-join02-check-list .input-inner{position: relative; background-color: #f5f5f5; padding:15px 20px; border-radius:10px;  transition:background-color 0.2s }
.sub-join02-check-list .input-inner.readonly{background-color: #fff; box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.13);}
.sub-join02-check-list .input-inner.on{background-color: #fff;}
.sub-join02-check-list .input-inner.on:before{position: absolute; top: 0; left: 0; width: 100%; content: ''; height: 100%; border: 1px solid #aaa; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius:10px;  transition:border-color 0.2s}
.sub-join02-check-list .input-inner.n-pass:before{position: absolute; top: 0; left: 0; width: 100%; content: ''; height: 100%; border: 1px solid #ff4242; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-radius:10px;}
.check-list-alert{position: absolute; bottom: -30px; left: 0; width: 100%; font-size: 13px; line-height: 30px; font-weight: 400; letter-spacing: -0.25px; color: #ff4242; text-align: right;}
.check-list-alert.pass{color: #27b700;}
.check-list-alert.n-pass{color: #ff4242;}
.work-input-group input{width: calc(50% - 10px); float: left;}
.work-input-group .slash{display: block; float: left; width: 20px; text-align: center; line-height: 30px;}
.email-input-group{width: calc(100% - 163px); margin-right: 20px; float: left;}
.email-input-group input{width: calc(50% - 10px); float: left;}
.email-input-group .hypen{display: block; float: left; width: 20px; text-align: center; line-height: 30px;}
.email-input-group + .gs-custom-select{width: 143px; float: left;}
.sub-join02-check-list.corporate .email-input-group{width: calc(100% - 150px);}
.sub-join02-check-list.corporate .email-input-group + .gs-custom-select{width: 130px;}

/* 타이틀 옆 아이콘 */
.sub-join02-check-list .input-inner .title-con i.id:before {content: "\e9f5"; color: #aaa;}
.sub-join02-check-list .input-inner .title-con i.password:before {content: "\e966"; color: #aaa;}
.sub-join02-check-list .input-inner .title-con i.security:before {content: "\ea24"; color: #aaa;}
.sub-join02-check-list .input-inner .title-con i.name:before {content: "\eaa9"; color: #aaa;}
.sub-join02-check-list .input-inner .title-con i.phone:before {content: "\eaed"; color: #aaa;}
.sub-join02-check-list .input-inner .title-con i.email:before {content: "\ea0a"; color: #aaa;}
.sub-join02-check-list .input-inner .title-con i.city:before {content: "\eb4a"; color: #aaa;}
.sub-join02-check-list .input-inner .title-con i.category:before {content: "\eb99"; color: #aaa;}
.sub-join02-check-list .input-inner .title-con i.list:before {content: "\ea6b"; color: #aaa;}
#datepicker .ui-datepicker-calendar td.ui-datepicker-today{background-color:#e2e2e2}
#datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable span{text-decoration:line-through; color: #aaa;}
#datepicker .ui-datepicker-calendar td.ui-datepicker-unselectable{color:#ccc}	/* 비활성화 */
#datepicker .ui-datepicker-calendar td .ui-state-default{display:block; width:100%; height:100%; padding:13px 10px; box-sizing:border-box; color:inherit;}
#datepicker .ui-datepicker-calendar td .ui-state-active{background-color:#4a4adb; color:#fff;}	/*active */

/* 달력 ::  달력스타일 input  */
.datepicker-open-input{float: left; position: relative; padding-left: 50px; width: 100%; height:40px; background-color: #f5f5f5; border: 1px solid #f5f5f5; border-radius: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.input-group.date .form-control{width: 100%; height: 40px; box-sizing: border-box; background-color: transparent; border: none; font-size: 14px; line-height: 40px; color: #000; font-weight: 400;}
.input-group.date .form-control:focus{border: none; outline:none;}
.input-group.date .icon{position:absolute; top:0px; text-align:center; left:19px; line-height:40px; color:#000; font-size:20px;}
.address-date-search-top-con .hypen{float:left; width:25px; text-align:center; color:#000; line-height:40px;}

/* 달력 ::  DATEPICKER CUSTOM (input 클릭하면 나오는 작은버전) */
#ui-datepicker-div.ui-datepicker{background-color:#fff; border:1px solid #dedede; border-radius:5px; overflow:hidden; box-shadow:6px 4px 8px 3px rgb(0 0 0 / 10%), -4px -5px 8px 3px rgb(0 0 0 / 10%)}
/* datepicker header  */
#ui-datepicker-div .ui-datepicker-header{position:relative;height:35px; line-height:35px; color:#000; background-color:#e9e9e9; text-align:center;}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next{position:absolute; top:0px; cursor:pointer; color:#000 !important; font-size: 0;}
#ui-datepicker-div .ui-datepicker-prev:before, .ui-datepicker-next:before{display: block; font-size: 16px; color: #000;}
#ui-datepicker-div .ui-datepicker-prev:before{content: "\e93c"; font-family: xeicon;}
#ui-datepicker-div .ui-datepicker-next:before{content: "\e93f"; font-family: xeicon;}
#ui-datepicker-div .ui-datepicker-prev{left:3%;}
#ui-datepicker-div .ui-datepicker-next{right:3%;}
#ui-datepicker-div .ui-datepicker-title{color:#000; font-size:15px; font-weight:400; letter-spacing:-0.25px;}
/* datepicker calendar */
#ui-datepicker-div .ui-datepicker-calendar{box-sizing:border-box; margin:8px; margin-bottom:15px;}
/* datepicker calnedar :: 요일 */
#ui-datepicker-div .ui-datepicker-calendar thead th{width:14.25%; height:42px; background-color: #fff; text-align: center; font-size: 14px; line-height: 42px; font-weight: 400; letter-spacing: -0.5px; color: #000;}
#ui-datepicker-div .ui-datepicker-calendar thead th:first-child{width:14.5%;}
/* datepicker calnedar :: 날짜 */
#ui-datepicker-div .ui-datepicker-calendar tbody{padding:0 8px}
#ui-datepicker-div .ui-datepicker-calendar td{border-bottom:none; text-align:right; vertical-align:top; font-size:14px; text-align: center; color: #000; background-color: #fff;}
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-today{background-color:#e2e2e2}
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-unselectable span{text-decoration:line-through; color: #aaa;}
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-unselectable{color:#ccc}	/* 비활성화 */
#ui-datepicker-div .ui-datepicker-calendar td .ui-state-default{display:block; width:100%; height:100%; padding:8px; box-sizing:border-box; color:inherit;}
#ui-datepicker-div .ui-datepicker-calendar td .ui-state-active{background-color:#4a4adb; color:#fff;}	/*active */
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-week-end{color:#368ee0;}
#ui-datepicker-div .ui-datepicker-calendar td.ui-datepicker-week-end:first-child{color:#eb1308;}


/* ========================================================
 * 주소록(폴더 그룹 등) 관련 css
 * 전송페이지, 주소록페이지
======================================================== */
/* 주소록 불러오기 */
.address-book-con{padding: 30px; padding-bottom: 40px;}
/* 주소록 불러오기 :: 왼쪽 영역 */
.address-book-top .left-con{width: 230px; float: left;}
.address-book-list{border: 1px solid #e5e5e5;}
.address-book-list .list-top{position: relative; padding: 10px 50px 10px 10px;}
.address-book-list .list-top .down-list-btn{position: absolute; top: 50%; margin-top: -15px; right: 10px; width: 30px; height: 30px;}
.address-book-list .list-top .down-list-btn i{font-size: 18px; color: #000; vertical-align: middle;}
/* 주소록 불러오기 :: 폴더열기 */
.address-book-list .folder-select-btn{position:relative; padding-left:10px; font-size: 13px; line-height: 24px; color: #000001; letter-spacing:-0.75px;}
.address-book-list .folder-select-btn .folder{display: inline-block; vertical-align: middle; width: 30px; height: 30px; position: relative; margin-right: 10px; -webkit-border-radius: 100%; border-radius: 100%; background-color: #f2f2f2;}
.address-book-list .folder-select-btn .dot{position:absolute; top:50%; left:0px; width: 4px; height: 4px; background-color: #000; margin-top:-2px}
.address-book-list .folder-select-btn .folder:before{position: absolute; margin: auto; top: 0px; right: 0; bottom: 0; left: 0; font-size:16px; color: #000001; font-weight: 400; content:"\eaa1"; font-family: xeicon;}
.address-book-list .folder-select-btn .group-name{display: inline-block;}
.address-book-list .folder-select-btn .group-num{display: inline-block; margin-left: 3px;}
.address-book-list .folder-select-btn.selected{color: #4a4adb;}
.address-book-list .folder-select-btn.selected .folder:before{content:"\eaa8"; color: #4a4adb; line-height:30px;}
.address-book-list .list-bottom{border-top: 1px solid #e5e5e5; height: 379px; padding: 20px; padding-bottom: 30px;}
.address-book-list .list-bottom .scroll-object-box-outside{height: 379px; overflow: hidden;}
.address-book-list .list-bottom .folder-select-btn{display:block; margin-bottom: 10px; width: 100%; text-align: left;}
.address-book-con .gs-custom-paging{margin-top: 20px; text-align: center;}

/* 주소록 불러오기 :: 오른쪽 영역 */
.address-book-top .right-con{width: 620px; float: right;}
.address-book-search{margin-bottom: 10px;}
.right-con .address-book-search .gs-custom-search{width: 270px; float: right;}
.address-book-bottom{margin-top: 40px; text-align: center;}
.gs-custom-tb .gs-custom-checkbox .checkbox-item label{padding-left: 0; position:static; line-height: 1; vertical-align: middle;}
.gs-custom-tb .gs-custom-checkbox .checkbox-item label:before{position: static; font-size: 16px;}

/* 주소록 불러오기:: 스크롤영역 추가 */
.address-list-tbl-container{height:424px; border-bottom:1px solid #e5e5e5; overflow: hidden;}
.address-list-tbl-container .mCSB_outside + .mCSB_scrollTools{right:-5px; top:5px; bottom:5px;}
.spreadsheet-wrapper .mCustomScrollBox .gs-custom-tb tr:last-child td{border-bottom:0}

/* ========================================================
 * 200804 추가 css
======================================================== */
.font-color-blue{color: #4a4adb;}
.custom-btn-blue-w70-h30{width: 70px; display: inline-block; line-height: 30px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #4a4adb; text-align: center; font-size: 14px; font-weight: 400; letter-spacing: -0.5px; color: #fff;}


/* ========================================================
 * 전송 오른쪽 핸드폰 fixed 컨텐츠
======================================================== */
.phone-box-inner{width: 100%; height: 100%; padding: 20px 20px 50px 20px; -webkit-box-sizing: border-box; box-sizing: border-box;}
/* 전화번호, 구분영역 */
.phone-box-top{height: 40px;}
.phone-box-top .num{float: left; font-size: 14px; line-height: 24px; font-weight: 400; color: #000;}
.phone-box-top .num i{position: relative; margin-top: -3px; margin-right: 10px; display: inline-block; vertical-align: middle; font-size: 24px;}
.phone-box-top .sortation{float: right; width: 93px; height: 22px; line-height: 22px; font-size: 12px; font-weight: 500; letter-spacing: -0.5px; color: #000; text-align: center; -webkit-border-radius: 25px; border-radius: 25px; border: 1px solid #ccc;}
.phone-box-top .sortation.lms{background-color:#f6f6ff; border-color:#4a4adb }
.phone-box-top .sortation.mms{background-color:#f1fffc; border-color:#33d0ad }
.kakao .phone-box-top .sortation{border-color: #000;}

/* 하단 내용 영역 */
.phone-box-bottom{height: 470px;}
.phone-box-bottom.message{padding-right: 20px;}
.phone-box-bottom .scroll-object-box-outside{height: 470px; overflow: hidden;}
.phone-box-bottom .mCSB_outside + .mCSB_scrollTools {right: -5px;}
.phone-box-bottom.message .mCSB_outside + .mCSB_scrollTools {right: -25px;}
.kakao .phone-box-bottom .mCS-dark.mCSB_scrollTools .mCSB_draggerRail {background-color: #8eb5d2;}
/* 탭 */
.phone-box-tab-list{margin-bottom: 5px;}
.phone-box-tab-list ul{float: right;}
.phone-box-tab-list ul li{float:left; margin-left: 5px;}
.phone-box-tab-list ul li a{display:block; width: 20px; height:20px; line-height:20px; text-align:center; font-size:11px; font-weight: 400; background-color: #f2f2f2; -webkit-border-radius: 5px; border-radius: 5px;}
.phone-box-tab-list ul li.selected a{background-color: #4a4adb; color:#fff;}
/* 이미지영역 */
.phone-box-img{margin-bottom: 10px; -webkit-border-radius: 10px; border-radius: 10px; overflow: hidden;}
.phone-box-img img{width: 100%; height: auto;}
/* 텍스트영역 */
.phone-box-txt{padding: 15px; margin-bottom: 10px; background-color: #ededed; -webkit-border-radius: 5px; border-radius: 5px;}
.phone-box-txt .tit{font-size: 13px; line-height: 20px; font-weight: 400; color: #262626; -ms-word-break: break-all; word-break: break-all;}
.phone-box-txt .txt{margin-top: 10px; font-size: 13px; line-height: 20px; font-weight: 400; letter-spacing: -0.5px; color: #666; -ms-word-break: break-all; word-break: break-all;}
/* 폰 목업 하단 텍스트 */
.phone-box-bottom-txt{padding: 15px 0; font-size: 13px; font-weight: 400; letter-spacing: -0.2px; color: #999; text-align: center;}


/* 알림톡 영역 (200729 수정 mh) */
.talk-box-txt{margin-top: 25px; width: 220px; position: relative;}
.talk-box-txt:before{position: absolute; top: -15px; right: -15px; display: block; content: ''; width: 41px; height: 41px; background: url("/common/img/sub/icon_kakao.png") 0 0 no-repeat;}
.talk-box-txt .tit{padding: 15px 10px; font-size: 13px; font-weight: 400; letter-spacing: -0.5px; color: #5b3e3c; -ms-word-break: break-all; word-break: break-all; background-color: #ffe400; -webkit-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;}
.talk-box-txt .txt{font-size: 13px; line-height: 20px; font-weight: 400; letter-spacing: -0.5px; color: #666; }
.talk-content-box{padding: 10px; -ms-word-break: break-all; word-break: break-all; background-color: #fff; -webkit-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px;}
.talk-content-box .tit-preview-con{padding:8px 0 11px; border-bottom:1px solid #e5e5e5; margin-bottom:11px}
.talk-content-box .tit-preview-con .prew-txt1{display:block; color:#bdbdbd; font-size:12px; letter-spacing:-0.5px; margin-bottom:5px; line-height:1.1}
.talk-content-box .tit-preview-con .prew-txt2{display:block; color:#666; font-size:14px; letter-spacing:-0.5px; font-weight:400; line-height:1.1}
.talk-content-box .preview-info-message-con{margin-top:10px;}
.talk-content-box .preview-info-message-con p{color:#bdbdbd; font-size:12px; letter-spacing:-0.5px; line-height:1.2; color:#bdbdbd ; margin-top:7px}
.talk-content-box .preview-info-message-con p:first-child{margin-top:0px}
.talk-content-box .preview-button-con{margin-top:15px}
.talk-content-box .preview-button-con .btn{display:block; width:100%; height:28px; line-height:28px; text-align:center; background-color:#f5f5f5; border-radius:4px; margin-top:5px; color:#666; font-size:13px; letter-spacing:-0.5px;}
.talk-content-box .preview-button-con .btn:first-child{margin-top:0}


/* 친구톡 영역 */
.talk-friend-box-txt{width: 200px;}
.talk-friend-box-txt.wide{width: 230px;}
/* 20211109 { 전체 UI 깨짐 수정 } start  */
.talk-friend-box-txt .tit{font-size: 11px; line-height: 20px; font-weight: 500; letter-spacing: -0.5px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/* // 20211109 { 전체 UI 깨짐 수정 } end  */
.talk-friend-box-txt .img-txt-group{-webkit-border-radius: 10px; border-radius: 10px; overflow: hidden;}
.talk-friend-box-txt .img{width: 100%;}
.talk-friend-box-txt .img img{width: 100%;}
.talk-friend-box-txt .txt{padding: 10px; background-color: #fff;}
.talk-friend-box-txt .txt p{font-size: 13px; line-height: 20px; font-weight: 400; letter-spacing: -0.5px; color: #666; -ms-word-break: break-all; word-break: break-all;}
.talk-friend-box-txt .txt .btn{margin-top: 5px; font-size: 13px; font-weight: 400; letter-spacing: -0.5px; color: #666; width: 100%; height: 28px; line-height: 28px; background-color: #f5f5f5; -webkit-border-radius: 5px; border-radius: 5px; text-align: center;}
/* 20211109 { 전체 UI 깨짐 수정 } start  */
.talk-friend-box-txt .info{padding-top: 5px; font-size: 11px; line-height: 20px; font-weight: 500; letter-spacing: -0.5px; color: #666; text-align: right;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/* // 20211109 { 전체 UI 깨짐 수정 } end  */


/* 테이블 툴팁 */
.portfolio-pay-tooltip{display: inline-block; vertical-align: middle;}
.portfolio-pay-tooltip > i{position: relative; top: 1px; font-size: 18px; font-weight: 400; letter-spacing: -0.2px; color: #4a4adb;}
.portfolio-pay-tooltip .cm-tooltip-con{text-align: left; -ms-word-break: keep-all; word-break: keep-all;}
.expiration-scheduled{display: block; font-size: 12px; line-height: 1.2;}


/* ========================================================
 * 카카오톡 전송에서 사용되는 레이어 팝업
======================================================== */
.trans-popup-con03{margin-top: 20px;}
.trans-popup-con03.overseas-login .sub-join02-check-list.login {margin-top: 0;}
.trans-popup-con03 .sub-join02-check-list .input-inner .title-con{width: 180px;}
.trans-popup-con03.overseas-login .sub-join02-check-list.login .input-inner .input-con.overseas.short {width: calc(100% - 400px); padding-right: 200px;}
.transmission-wrap .trans-popup-con03 .gs-custom-input {padding: 0; font-size: 16px; height: 30px; line-height: 30px;}
.transmission-wrap .trans-popup-con03 .gs-custom-input::placeholder{font-size: 16px; line-height: 30px;}
.trans-popup-con03 .btn-left-txt{position: absolute; top: 0; right: 100px; display: inline-block; font-size: 13px; line-height: 30px; font-weight: 400; letter-spacing: -0.25px; color: #aaa;}
.sub-join02-check-list.login.transfer .input-inner{background-color: #fff;}

/* ========================================================
* 주소록 관리 :: 팝업관련(수신번호 불러오기)
======================================================== */
/* -------- 주소록 리스트 영역 -------- */
.spreadsheet-wrapper{overflow:hidden; width: 618px; height: 298px; background-color: #d7d7d7; border:1px solid #d7d7d7;}
.spreadsheet-wrapper .mCSB_outside + .mCSB_scrollTools{right:-20px;}



/* ************** 보안로그인 ************** */
.secure-login-setting{width: 170px; position: absolute; top: 50%; margin-top: -15px; right: 0;}

.secure-login-con{padding: 25px 30px 70px;}
.secure-login-txt{position: relative;}
.secure-login-txt p{font-size: 15px; line-height: 26px; font-weight: 400; letter-spacing: -0.75px; color: #000;}
.secure-login-txt a{position: absolute; top: 50%; margin-top: -20px; right: 0; display: block; font-size: 14px;}
.secure-login-tb{padding-top: 40px;}


/* ****************** login (로그인)  ********************** */
.sub-join02-check-list.login .input-inner{background-color: #f5f5f5;}
.sub-join02-check-list.login .input-inner.readonly{background-color: #fff;}
.sub-join02-check-list.login .input-inner.on{background-color: #fff;}



/* ========================================================
 * 공통 컴포넌트 스타일 (로딩레이어)
 * 모든페이지 사용
======================================================== */
.layer-fixed-pop-wrapper.loading {background: rgba(255,255,255,0.65);}
.layer-fixed-pop-wrapper.loading .modal-inner-content{height: 100%;}
.loading-modal-content{position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.loading-modal-content.ver01{width: 224px; height: 224px;}
.loading-modal-content.ver02{width: 362px; height: 362px;}
/*.loading-modal-content.ver03{width: 60px; height: 60px;}*/
.loading-modal-content.ver04{width: 114px; height: 114px;}

.loading-modal-content i.loading-img{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.loading-txt{display: table; position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; font-weight: 400; letter-spacing: -0.25px; opacity: 0.9; text-align: center;}
.loading-txt .inner{display: table-cell; vertical-align: middle;}

.loading-modal-content.ver01 i.loading-img{background: url("../images/content/loading_img01.png") 0 0 no-repeat;}
.loading-modal-content.ver02 i.loading-img{background: url("../images/content/loading_img02.png") 0 0 no-repeat;}
.loading-modal-content.ver03 i.loading-img{background: url("../images/content/loading_img03.png") 0 0 no-repeat;}
.loading-modal-content.ver04 i.loading-img{background: url("../images/content/loading_img04.png") 0 0 no-repeat;}

.loading-modal-content.ver01 .loading-txt .txt01{font-size: 15px; line-height: 20px; color: #000;}
.loading-modal-content.ver01 .loading-txt .txt02{font-size: 15px; line-height: 20px; color: #5f5f5f;}
.loading-modal-content.ver02 .loading-txt .txt01{font-size: 15px; line-height: 20px; color: #000;}
.loading-modal-content.ver02 .loading-txt .txt02{margin-top: 20px; font-size: 13px; line-height: 18px; color: #5f5f5f;}


/* ========================================================
 * 200902 추가 css
======================================================== */
.myinfo-modal-content .pay-con .txt{margin-top: 20px; text-align: center;}
.myinfo-modal-content .pay-con .txt p{font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: -0.5px; color: #000;}


/* ========================================================
 * 전송 index 레이어 팝업
======================================================== */
.transmission-intro-popup{display:none; overflow-y:auto; overflow-x:auto; position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:10000; background:#000; background:rgba(0,0,0,0.65);}

.transmission-intro-con{width:940px; margin:20px auto; -webkit-border-radius: 10px; border-radius: 10px; overflow: hidden; background-color: #fff;}
.transmission-intro-con .tit-con{position:relative; padding: 30px 50px 35px 30px; border-bottom: 1px solid #e5e5e5; background-color: #fff;}
.transmission-intro-con .tit-con .txt01{font-size: 20px; font-weight: 500; color: #000;}
.transmission-intro-con .tit-con .txt02{margin-top: 15px; font-size: 16px; font-weight: 400; color: #000;}
.transmission-intro-con .close-icon-style{top:25px; right:25px;}
.transmission-intro-con .close-icon-style i{font-size:25px;}

.transmission-intro-list{margin: 0 -11px;}
.transmission-intro-list li{float: left; width: calc(33.33% - 22px); margin: 0 11px;}

.transmission-intro-wrapper{padding: 20px 30px 0;}
.intro-phone-area{border: 4px solid #ebebeb; -webkit-border-radius: 20px; border-radius: 20px; height: 400px; background-color: #fff; -webkit-transition: all 0.3s; transition: all 0.3s;}
.intro-phone-area.kakao{background-color: #a0c0d7;}
.intro-phone-area .top-con{height: 50px; padding: 0 10px;}
.intro-phone-area .top-con p{font-size: 14px; line-height: 50px; font-weight: 400; color: #000;}
.intro-phone-area .top-con p i{position: relative; margin-top: -3px; margin-right: 10px; display: inline-block; vertical-align: middle; font-size: 23px;}

.intro-phone-area .bottom-con{padding: 0 10px; overflow: hidden;}
.intro-phone-area .bottom-con .scroll-object-box-outside{height: 310px;}
.intro-phone-area .bottom-con .mCSB_outside + .mCSB_scrollTools {right: -9px;}
.intro-phone-area.kakao .bottom-con .mCS-dark.mCSB_scrollTools .mCSB_draggerRail{background-color: #8eb5d2;}

.intro-link-btn{margin-top: 15px;}
.intro-link-btn span{display: block; margin: 0 auto; width: 160px; height: 40px; line-height: 40px; background-color: #aaa; -webkit-border-radius: 5px; border-radius: 5px; font-size: 16px; font-weight: 400; letter-spacing: -0.5px; color: #fff; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s;}

.transmission-intro-view{padding: 45px 30px 20px 30px;}
.transmission-intro-view .gs-custom-checkbox{float: right;}
.transmission-intro-view .gs-custom-checkbox .checkbox-item label{padding-left: 25px; font-size:16px;}
.transmission-intro-view .gs-custom-checkbox .checkbox-item label:before{font-size:18px;}

.transmission-intro-list li a:hover .intro-phone-area{border-color: #4a4adb;}
.transmission-intro-list li a:hover .intro-link-btn span{background-color: #4a4adb;}


/* ========================================================
 * 200914 css 옮김
======================================================== */
.w940-modal-content{width:940px; margin:20px auto; -webkit-border-radius: 10px; border-radius: 10px; overflow: hidden; background-color: #fff;}
.w940-modal-content .tit-con{position:relative; padding: 20px 50px 20px 30px; border-bottom: 1px solid #e5e5e5; background-color: #fff;}
.w940-modal-content .tit-con p{font-size: 20px; line-height: 34px; font-weight: 500;}
.w940-modal-content .close-icon-style{top:25px; right:25px;}
.w940-modal-content .close-icon-style i{font-size:25px;}

.w820-modal-content{width: 820px; margin:20px auto; -webkit-border-radius: 10px; border-radius: 10px; overflow: hidden; background-color: #fff;}
.w820-modal-content .close-icon-style{top:25px; right:25px;}
.w820-modal-content .close-icon-style i{font-size:25px;}
.w820-modal-content .tit-con{position:relative; padding: 20px 50px 20px 30px; border-bottom: 1px solid #e5e5e5; background-color: #fff;}
.w820-modal-content .tit-con p{letter-spacing: -0.75px; color: #000;}
.w820-modal-content .tit-con .txt01{font-size: 20px; line-height: 34px; font-weight: 500;}
.w820-modal-content .tit-con .txt02{margin-top: 10px; font-size: 15px; line-height: 26px; font-weight: 400;}
.trans-popup-wrapper{padding: 25px 30px 30px;}
.trans-popup-con01{font-size: 15px; font-weight: 400; line-height: 26px; letter-spacing: -0.5px; color: #111;}
.trans-popup-con01 a{font-size: 15px; padding-bottom: 0; display: inline-block;}
.trans-popup-con01 .txt02{margin-top: 10px;}
.trans-popup-con01 .txt02 i{position: relative; top: -1px; display: inline-block; vertical-align: middle; margin-right: 5px; font-size: 20px; font-weight: 400; letter-spacing: -0.5px; color: #4a4adb;}
.trans-popup-con02{margin-top: 30px; padding: 25px 30px 50px 30px; -webkit-border-radius: 15px; border-radius: 15px; background-color: #f5f5f5;}
.trans-popup-con02 ul{margin-bottom: 20px;}
.trans-popup-con02 ul:first-child{margin-bottom: 45px;}
.trans-popup-con02 ul li{float: left;}
.trans-popup-con02 ul li.left{width: 375px;}
.trans-popup-con02 ul li.right{width: calc(100% - 375px);}
.trans-popup-con02 ul li.full{width: 100%;}
.trans-popup-con02 ul li img{max-width: 100%;}
.trans-popup-con02 .ico-txt{font-size: 15px; font-weight: 400; line-height: 22px; letter-spacing: -0.5px; color: #000;}
.trans-popup-con02 .ico-txt i{position: relative; top: -2px; display: inline-block; vertical-align: middle; font-size: 20px; line-height: 22px; color: #4a4adb; margin-right: 10px;}
.trans-popup-con02 .num-txt{margin-top: 20px; position: relative; padding-left: 30px;}
.trans-popup-con02 .num-txt:first-child{margin-top: 0;}
.trans-popup-con02 .num-txt .num{position: absolute; top: 0; left: 0; display: inline-block; width: 22px; line-height: 22px; text-align: center; -webkit-border-radius: 100%; border-radius: 100%; background-color: #aaa; font-size: 13px; font-weight: 400; letter-spacing: -0.25px; color: #fff;}
.trans-popup-con02 .tit{display: inline-block; vertical-align: middle; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: -0.65px; color: #000;}
.trans-popup-con02 .txt{width: 100%; font-size: 14px; line-height: 22px; font-weight: 400; letter-spacing: -0.25px; color: #666;}
.trans-popup-con02 .cir-txt{margin-right: 5px; display: inline-block; vertical-align: middle; width: 60px; line-height: 22px; text-align: center; background-color: #4a4adb; -webkit-border-radius: 22px; border-radius: 22px; font-size: 13px; font-weight: 400; letter-spacing: -0.25px; color: #fff;}
.trans-popup-con02 .cir-txt.mr10{margin-right: 10px;}
.trans-popup-con02 .tit.line00{position: relative;}
.trans-popup-con02 .tit.line00:before{position: absolute; top: 50%; left: -135px; content: ''; width: 125px; height: 1px; background: url("../images/content/line_bg.jpg") 0 0 repeat-x;}
.trans-popup-con02 .num-txt.line01{position: relative; margin-top: 25px;}
.trans-popup-con02 .num-txt.line01:before{position: absolute; top: 11px; left: -275px; content: ''; width: 265px; height: 1px; background: url("../images/content/line_bg.jpg") 0 0 repeat-x;}
.trans-popup-con02 .num-txt.line02{position: relative; margin-top: 36px;}
.trans-popup-con02 .num-txt.line02:before{position: absolute; top: 11px; left: -253px; content: ''; width: 235px; height: 1px; background: url("../images/content/line_bg.jpg") 0 0 repeat-x;}
.trans-popup-con02 .num-txt.line03{margin-top: 10px;}
.trans-popup-con02 .num-txt.line04{position: relative; margin-top: 57px;}
.trans-popup-con02 .num-txt.line04:before{position: absolute; top: 11px; left: -195px; content: ''; width: 185px; height: 1px; background: url("../images/content/line_bg.jpg") 0 0 repeat-x;}
.trans-popup-con02 .num-txt.line05{margin-top: 10px;}
/* 친구톡 추가css */
.trans-popup-con02.kakao{padding: 25px 30px 5px;}
.trans-popup-con02.kakao .num-txt.line01:before{left: -287px; width: 270px;}
.trans-popup-con02.kakao .num-txt.line02:before{left: -213px; width: 195px;}
.trans-popup-con02.kakao .num-txt.line04:before{top: 14px; left: -120px; width: 100px;}

.trans-popup-con04{margin-top: 30px;}
.trans-popup-con04 p{font-size: 15px; font-weight: 400; letter-spacing: -0.5px; color: #111;}
.trans-popup-con04 a{display: block; margin: 30px auto 0;}
/* 예약전송 설정 */
.cm-modal-content.w490-modal-content{width: 510px; background-color: #fff;}
.cm-modal-content.w490-modal-content .close-icon-style{top:25px; right:25px;}
.cm-modal-content.w490-modal-content .close-icon-style i{font-size:25px;}
.cm-modal-content.w490-modal-content .tit-con{position:relative; padding: 20px 50px 20px 30px; border-bottom: 1px solid #e5e5e5; background-color: #fff;}
.cm-modal-content.w490-modal-content .tit-con p{padding-left: 0; letter-spacing: -0.75px; color: #000;}
.cm-modal-content.w490-modal-content .tit-con .txt01{font-size: 20px; line-height: 34px; font-weight: 500;}
.w490-modal-content .calendar-con{width: calc(100% - 60px); margin: 30px 30px 40px 30px; border: 1px solid #d9d9d9; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-sizing: border-box; box-sizing: border-box; overflow: hidden; position: relative;}
/* 달력 :: 날짜선택영역*/
.day-form-con{display:inline-block; margin-left:10px; padding:5px 0; vertical-align:middle;}
.day-form-con:first-child{margin-left:0;}
.date-select-con{position:relative; }
.date-select-con i{position:absolute; top:-1px; left:3px;}
.date-select-con .date-select-input{width:130px; height:30px; border:1px solid #d2d2d2; text-indent:34px; cursor:pointer;}
.day-form-con .hypen{margin:0 3px;}

.w490-modal-content .date-time-con{padding: 0 30px 30px 30px;}
.w490-modal-content .date-time-list li{margin-top: 10px;}
.w490-modal-content .date-time-list li:first-child{margin-top: 0;}
.w490-modal-content .date-time-list .tit-area{width: 70px; float: left; font-size: 16px; line-height: 40px; font-weight: 500; letter-spacing: -0.75px; color: #000;}
.w490-modal-content .date-time-list .input-area{width: calc(100% - 70px); float: left;}
.w490-modal-content .date-time-list .input-area.readonly{position: relative;}
.w490-modal-content .date-time-list .input-area.readonly .today-btn{position: absolute; top: 50%; margin-top: -15px; right: 10px;}
.w490-modal-content .date-time-list .input-area.readonly input{background-color: #fff; -webkit-box-shadow: 10px 10px 0 rgba(0,0,0,0.13); box-shadow: 0 0 10px rgba(0,0,0,0.13);}
.w490-modal-content .date-time-list .txt-area{width: 40px; float: left; text-indent: 10px; line-height: 40px; font-size: 14px; font-weight: 400; letter-spacing: -0.2px; color: #000;}
.w490-modal-content .date-time-list .select-area{width: 150px; float: left;}
.date-btn-con{text-align: center; padding-bottom: 30px;}

/* ========================================================
 * 200924 대시보드 알림 css
======================================================== */
.notification-con{padding-top: 25px;}
.notification-con .scroll-object-box{height: 700px;}
.notification-list{}
.notification-item{margin-top: 10px; position: relative; padding: 15px 80px 15px 20px; background-color: #f2f2f2; -webkit-border-radius: 10px; border-radius: 10px; -ms-word-break: keep-all; word-break: keep-all;}
.notification-list .notification-item:first-child{margin-top: 0;}
.notification-item .tit{font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: -0.5px; color: #000;}
.notification-item .tit a{display: inline-block;}
.notification-item .date{margin-top: 5px; font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: -0.5px; color: #aaa;}
.notification-item .cm-delete-btn{position: absolute; top: 50%; margin-top: -8px; right: 30px;}
.notification-item .cm-delete-btn i {font-size: 16px; color: #555;}
.notification-btn-con{padding: 50px 0 60px; text-align: center;}
.notification-btn-con a{display: inline-block;}

/* ========================================================
 * 공통 팝업 :: 스타일 css
======================================================== */
/* 공통 */
.layer-fixed-pop-wrapper.common{background-color: transparent;}
.layer-fixed-pop-wrapper.common .modal-inner-content{text-align: center;}
.common-popup-style{width: 600px; display: inline-block; text-align: left; margin: 0 10px; -webkit-border-radius: 7px; border-radius: 7px; overflow: hidden; -webkit-box-shadow: 13px 13px 29px 7px rgba(0,0,0,0.19); box-shadow: 13px 13px 29px 7px rgba(0,0,0,0.19);}
.common-popup-style .down-con{}
.common-popup-style .down-con .left{float: left; width: calc(100% - 63px); height: 63px; background-color: #000;}
.popup-custom-checkbox{padding-left: 20px; padding-top: 21px;}
.popup-custom-checkbox .item{display:inline-block; vertical-align:middle;}
.popup-custom-checkbox .item input[type="checkbox"]{display:none;}
.popup-custom-checkbox .item label{padding-left: 30px; display:inline-block; font-weight: 500; position:relative; color:#fff; font-size:16px; line-height: 20px; letter-spacing:-0.75px;}
.popup-custom-checkbox .item label:before{position: absolute; top: 1px; left: 0; content: ''; width: 20px; height: 20px; background-color: #fff; -webkit-border-radius: 2px; border-radius: 2px;}
.popup-custom-checkbox .item label:after{position: absolute; top: 1px; left: 0; font-size:20px; color: #000; font-weight: 400; content:"\e929"; font-family: xeicon; opacity: 0;}
.popup-custom-checkbox .item input:checked + label:before{background-color: #4a4adb;}
.popup-custom-checkbox .item input:checked + label:after{color: #fff; opacity: 1;}
.common-popup-style .down-con .close-btn{float: right; width: 63px; height: 63px; background-color: #4a4adb;}
.common-popup-style .down-con .close-btn i{font-size: 20px; color: #fff;}
/* 이미지 형식 */
.common-popup-style .img-con{width: 100%; height: 720px; background-color: #fff;}
.common-popup-style .img-con a{display: block; width: 100%; height: 100%;}
.common-popup-style .img-con img{width: 100%; height: 100%;}
/* 타이틀 및 본문 */
.common-popup-style .txt-con{background-color: #fff; padding: 30px;}
.common-popup-style .txt-con .title{position: relative; width: 100%; height: 90px; font-size: 24px; font-weight: 600; letter-spacing: -0.75px; color: #fff; line-height: 95px; text-align: center; background-color: #4949db; -webkit-border-radius: 10px; border-radius: 10px;}
.common-popup-style .txt-con .title:before{position: absolute; bottom: -26px; left: 7px; display: block; content: ''; width: 78px; height: 100px; background: url("../images/content/common_popup_icon.png") 0 0 no-repeat;}
.common-popup-style .txt-con .text{margin-top: 50px; letter-spacing: -0.75px; -ms-word-break: keep-all; word-break: keep-all;}
.common-popup-style .txt-con .text .scroll-object-box{height: 520px; overflow: hidden;}
.common-popup-style .txt-con .text .tit{margin-bottom: 15px; font-size: 22px; line-height: 33px; font-weight: 600; color: #000;}
.common-popup-style .txt-con .text .txt{font-size: 16px; line-height: 28px; color: #444; }

/* 500x500사이즈 추가 css */
.common-popup-style.w-500{width: 500px;}
.common-popup-style.w-500 .img-con{height: 500px;}
.common-popup-style.w-500 .txt-con .text .scroll-object-box{height: 300px;}

/* ****************** 대시보드 :: 팝업 ********************** */
.myinfo-modal-content.dashboard{width: 780px;}

.popup-dashboard-con{padding: 40px;}
.myinfo-modal-content.dashboard .tit-con .txt01 a{margin-left: 10px; padding: 0 13px; display: inline-block; line-height: 30px; background-color: #4a4adb; -webkit-border-radius: 5px; border-radius: 5px; font-size: 13px; font-weight: 400; color: #fff;}

.modal-dashboard-tab-list{margin-bottom: 40px;}
.modal-dashboard-tab-list ul{-webkit-border-radius: 10px; border-radius: 10px; overflow: hidden;}
.modal-dashboard-tab-list ul li{width: 33.33%; float: left; border-left: 1px solid #e5e5e5; -webkit-box-sizing: border-box; box-sizing: border-box;}
.modal-dashboard-tab-list ul li:first-child{border-left: none;}
.modal-dashboard-tab-list ul li a{display: block; text-align: center; height: 60px; line-height: 60px; background-color: #f5f5f5; font-size: 16px; font-weight: 400; letter-spacing: -0.2px; color: #111;}
.modal-dashboard-tab-list ul li.selected a{background-color: #333; color: #fff;}

.popup-dashboard-style-wrapper{}
.popup-dashboard-style-wrapper .scroll-object-box-outside{height: 500px; overflow: hidden;}

.popup-dashboard-btn{padding-top: 40px; text-align: center;}

.popup-dashboard-style{margin-top: 30px;}
.popup-dashboard-style.con01-01, .popup-dashboard-style.con02-01, .popup-dashboard-style.con03-01{margin-top: 0;}

.popup-dashboard-style .tit{letter-spacing: -0.75px; -ms-word-break: keep-all; word-break: keep-all;}
.popup-dashboard-style .tit .tit01{font-size: 16px; font-weight: 500; color: #000;}
.popup-dashboard-style .tit .tit02{margin-top: 10px; font-size: 14px; line-height: 24px; font-weight: 400; color: #333;}

.popup-dashboard-style .img{margin-top: 15px; width: 100%;}
.popup-dashboard-style .img img{max-width: 100%;}

.popup-dashboard-style .dot-txt{margin-top: 15px; position: relative; padding-left: 13px; font-size: 14px; line-height: 24px; font-weight: 400; letter-spacing: -0.75px; color: #333;}
.popup-dashboard-style .dot-txt:before{position: absolute; top: 10px; left: 0; display: block; content: ''; width: 4px; height: 4px; background-color: #333; -webkit-border-radius: 100%; border-radius: 100%;}
.popup-dashboard-style .dot-txt b{font-weight: 600;}

.popup-dashboard-style.con02-02 .txt01{padding-top: 5px; font-size: 14px; line-height: 24px; font-weight: 400; letter-spacing: -0.75px; color: #000;}
.popup-dashboard-style.con02-03{margin-top: 60px;}
.popup-dashboard-style.con02-04{margin-top: 40px;}
.popup-dashboard-style.con02-04 .txt01, .popup-dashboard-style.con03-02 .txt01, .popup-dashboard-style.con03-03 .txt01{padding-top: 30px; font-size: 14px; line-height: 24px; font-weight: 400; letter-spacing: -0.75px; color: #000; -ms-word-break: keep-all; word-break: keep-all;}

br{font-family:'Noto Sans KR', "돋움", Dotum, Arial, sans-serif;}

/* ========================================================
* 윙고 방침 :: 이용약관
======================================================== */
.policy-agreement-inner{-ms-word-break: keep-all; word-break: keep-all; letter-spacing: -0.65px;}
.policy-agreement-inner .top-tit{font-size: 26px; font-weight: 600; letter-spacing: -0.5px; color: #000;}
.policy-agreement-list{letter-spacing: -0.65px;}
.policy-agreement-list li{margin-top: 40px;}
.policy-agreement-list li .tit{margin-bottom: 10px; font-size: 18px; line-height: 33px; font-weight: 600; color: #000;}
.policy-agreement-list li .sub-tit{margin: 15px 0 10px; font-size: 16px; line-height: 33px; font-weight: 600; color: #000;}
.policy-agreement-list li .txt{font-size: 16px; line-height: 33px; color: #333;}
.policy-agreement-list li .num-txt{position: relative; padding-left: 19px; font-size: 16px; line-height: 33px; color: #333;}
.policy-agreement-list li .num-txt span{position: absolute; top: 0; left: 0; display: inline-block;}
.policy-agreement-list li .txt-box{margin: 10px 0; padding: 25px 30px; background-color: #f2f2f2;}
.policy-agreement-list li .txt-box p{position: relative; padding-left: 17px; font-size: 14px; line-height: 26px; font-weight: 400; color: #666;}
.policy-agreement-list li .txt-box p span{position: absolute; top: 0; left: 0; display: inline-block;}

.cm-policy-con table{margin-top: 10px;}
.cm-policy-con li .gs-custom-tb th, .gs-custom-tb td{line-height: 22px;}
.cm-policy-con li .gs-custom-tb .text-align-left{padding: 13px 20px;}

/* ========================================================
* 윙고 방침 :: 개인정보처리방침
======================================================== */
.policy-privacy-inner{-ms-word-break: keep-all; word-break: keep-all; letter-spacing: -0.65px;}
.privacy-move-txt{margin-top: 40px;}
.privacy-move-txt p{margin-top: 8px;}
.privacy-move-txt p:first-child{margin-top: 0;}
.privacy-move-txt p a{display: inline-block; line-height: 33px; padding-bottom: 0;}
.policy-privacy-inner .txt{font-size: 16px; line-height: 33px; font-weight: 400; color: #333;}
.policy-privacy-list{}
.policy-privacy-list li{padding-top: 70px;}
.policy-privacy-list li .tit{margin-bottom: 10px; font-size: 18px; line-height: 33px; font-weight: 600; color: #000;}
.policy-privacy-list li .sub-tit{margin-top: 15px; font-size: 16px; font-weight: 500; line-height: 33px; color: #000;}
.policy-privacy-list li .txt-box{margin: 10px 0; padding: 25px 30px; background-color: #f2f2f2;}
.policy-privacy-list li .txt-box p{position: relative; padding-left: 17px; font-size: 14px; line-height: 26px; font-weight: 400; color: #666;}
.policy-privacy-list li .txt-box p span{position: absolute; top: 0; left: 0; display: inline-block;}
.policy-privacy-list li .step-txt{position: relative; padding-left: 23px; font-size: 16px; font-weight: 500; line-height: 33px; color: #333;}
.policy-privacy-list li .step-txt span{position: absolute; top: 0; left: 0; display: inline-block;}
.policy-privacy-list li .step-txt p{position: relative; padding-left: 10px; font-weight: 400;}
.policy-privacy-list li .step-txt p em{position: absolute; top: 0; left: 0; display: inline-block;}
.policy-privacy-list li .member-txt-box{margin-top: 25px;}
.policy-privacy-list li .member-txt-box .member-tit{font-size: 16px; line-height: 33px; font-weight: 500; color: #000;}
.policy-privacy-list li .member-txt-box .member-txt{padding-left: 74px; position: relative; font-size: 16px; line-height: 33px; font-weight: 400; color: #333;}
.policy-privacy-list li .member-txt-box .member-txt span{position: absolute; top: 0; left: 0; display: inline-block;}
.policy-privacy-btn{margin-top: 35px;}
.policy-privacy-btn a{display: inline-block; line-height: 33px; padding-bottom: 0;}


/* ========================================================
* 윙고 방침 :: 스팸방지정책
======================================================== */
.policy-anti-inner{-ms-word-break: keep-all; word-break: keep-all; letter-spacing: -0.65px;}
.policy-anti-inner .txt{font-size: 16px; line-height: 33px; font-weight: 400; color: #333;}
.policy-anti-inner .txt a{display: inline-block; padding-bottom: 0;}
.policy-anti-inner li{margin-top: 40px;}
.policy-anti-inner li .tit{margin-bottom: 10px; font-size: 18px; line-height: 33px; font-weight: 600; color: #000;}
.policy-anti-inner li .num-txt{position: relative; padding-left: 19px; font-size: 16px; line-height: 33px; color: #333;}
.policy-anti-inner li .num-txt span{position: absolute; top: 0; left: 0; display: inline-block;}
.policy-anti-inner li .step-txt{font-size: 16px; font-weight: 400; line-height: 33px; color: #333;}
.policy-anti-inner li .step-txt .up{position: relative; padding-left: 19px;}
.policy-anti-inner li .step-txt .up span{position: absolute; top: 0; left: 0; display: inline-block;}
.policy-anti-inner li .step-txt .down{position: relative; padding-left: 32px;}
/* .policy-anti-inner li .step-txt .down{position: relative; padding-left: 22px;} */
.policy-anti-inner li .step-txt .down em{position: absolute; top: 0; left: 14px; display: inline-block;}
.tit-num-txt-box{padding: 25px; background-color: #f2f2f2;}
.tit-num-txt-box .txt01{font-size: 16px; line-height: 26px; font-weight: 400; color: #000;}
.tit-num-txt-box .txt02{margin-top: 15px; position: relative; padding-left: 17px; font-size: 14px; line-height: 26px; color: #000;}
.tit-num-txt-box .txt02 span{position: absolute; top: 0; left: 0; display: inline-block;}
.tit-num-txt-box .txt03{position: relative;	padding-left: 25px; font-size: 14px; line-height: 26px; color: #666;}
.tit-num-txt-box .txt03.first{margin-top: 10px;}
.tit-num-txt-box .txt03 span{position: absolute; top: 0; left: 10px; display: inline-block;}
.margin-t-20{margin-top: 20px;}

.sub-dot-txt-box{margin-top: 15px;}
.sub-dot-txt-box p{position: relative; padding-left: 30px; font-size: 14px; line-height: 26px; color: #333;}
.sub-dot-txt-box p:before{position: absolute; top: 13px; left: 17px; display: block; content: ''; width: 4px; height: 4px; background-color: #333; -webkit-border-radius: 100%; border-radius: 100%;}

/* ========================================================
* 윙고 방침 :: 회원가입용 추가 CSS
======================================================== */
.service-txt-scroll .policy-anti-inner .txt{font-size: 13px; line-height: 2;}
.service-txt-scroll .policy-anti-inner li{margin-top: 20px;}
.service-txt-scroll .policy-anti-inner li .tit {margin-bottom: 5px; font-size: 16px; line-height: 2;}
.service-txt-scroll .policy-anti-inner li .num-txt {padding-left: 15px; font-size: 13px; line-height: 2;}
.service-txt-scroll .policy-anti-inner li .step-txt{font-size: 13px; line-height: 2;}
.service-txt-scroll .tit-num-txt-box {padding: 15px;}
.service-txt-scroll .tit-num-txt-box .txt01{font-size: 15px;}
.service-txt-scroll .tit-num-txt-box .txt02{margin-top: 10px; padding-left: 17px; font-size: 12px; line-height: 2;}
.service-txt-scroll .tit-num-txt-box .txt03.first {margin-top: 0;}
.service-txt-scroll .tit-num-txt-box .txt03 {font-size: 12px; line-height: 2;}
.service-txt-scroll .policy-anti-inner .txt a{font-size: 13px; line-height: 1.4;}
.service-txt-scroll .gs-custom-tb th, .service-txt-scroll .gs-custom-tb td {padding: 7px 0;}
.service-txt-scroll .gs-custom-tb .text-align-left {padding: 7px 10px;}
.service-txt-scroll .gs-custom-tb th, .service-txt-scroll .gs-custom-tb td{font-size: 11px;}
.service-txt-scroll .policy-privacy-inner .txt{font-size: 13px; line-height: 2;}
.service-txt-scroll .policy-privacy-list li{padding-top: 35px;}
.service-txt-scroll .policy-privacy-list li .tit{margin-bottom: 5px; font-size: 16px; line-height: 2;}
.service-txt-scroll .policy-privacy-list li .step-txt{font-size: 13px; line-height: 2;}
.service-txt-scroll .policy-privacy-list li .sub-tit{font-size: 13px; line-height: 2;}
.service-txt-scroll .policy-privacy-list li .txt-box {padding: 15px;}
.service-txt-scroll .policy-privacy-list li .txt-box p {padding-left: 17px; font-size: 12px; line-height: 2;}
.service-txt-scroll .policy-privacy-list li .member-txt-box{margin-top: 15px;}
.service-txt-scroll .policy-privacy-list li .member-txt-box .member-tit{font-size: 13px; line-height: 2;}
.service-txt-scroll .policy-privacy-list li .member-txt-box .member-txt{padding-left: 60px; font-size: 13px; line-height: 2;}
.service-txt-scroll .policy-agreement-inner .top-tit{font-size: 18px;}
.service-txt-scroll .policy-agreement-list li {margin-top: 20px;}
.service-txt-scroll .policy-agreement-list li .tit {margin-bottom: 5px; font-size: 16px; line-height: 2;}
.service-txt-scroll .policy-agreement-list li .txt{font-size: 13px; line-height: 2;}
.service-txt-scroll .policy-agreement-list li .num-txt{padding-left: 17px; font-size: 13px; line-height: 2;}
.service-txt-scroll .policy-agreement-list li .sub-tit {margin: 10px 0 5px; font-size: 13px; line-height: 2;}
.service-txt-scroll .policy-agreement-list li .txt-box{padding: 15px;}
.service-txt-scroll .policy-agreement-list li .txt-box p{padding-left: 17px; font-size: 12px; line-height: 2;}
.service-txt-scroll .margin-t-60{margin-top: 30px !important;}


/* ========================================================
* 회원가입 이용약관 :: 201019 추가 css
======================================================== */
.sub-join02-check-list.total-add-css{padding-top: 0;}
.top-total-agreement{margin-bottom: 40px; margin-left: -40px; margin-right: -40px; height: 60px; -webkit-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; background-color: #4949db;}
.top-total-agreement .check-inner .title-con{padding: 0; height: 60px;}
.top-total-agreement .check-inner .title-con .check-title{top: 0; left: 0; width: 100%;}
.top-total-agreement .gs-custom-checkbox .checkbox-item{width: 100%;}
.top-total-agreement .gs-custom-checkbox .checkbox-item label{padding-left: 70px; line-height: 60px; width: calc(100% - 70px); color: #fff;}
.top-total-agreement .gs-custom-checkbox .checkbox-item label:before{top: 0; left: 30px; color: #fff;}
.top-total-agreement .gs-custom-checkbox .checkbox-item input:checked + label:before{content:"\e92b"; color: #33d0ad;}

.join-message-agree-txt{font-size: 13px; line-height: 30px; font-weight: 400; color: #333;}


/* 진행사항 */
.cir-progress{}
.cir-progress:before{margin-right: 3px; position: relative; top: -1px; display: inline-block; vertical-align: middle; content: "\eb0d"; font-family: xeicon; color: #33d0ad;}
.cir-progress.completion:before{color: #4a4adb;}
.cir-progress.failure:before{color: #ff9db4;}
.cir-progress.registration:before{color: #999999;}

.talk-sample-top .form .gs-custom-input{
    margin-left: -30px;
}

/*
-------------------------알림톡 템플릿 등록 관리 페이지 ( 뿌리오 css )-------------------------*/
.kakaotalk_wrap{
    position: relative;
}
.kakaotalk_wrap .temList{
    margin-top: 17px;
    overflow: hidden;
}
.kakaotalk_wrap .temList .template:first-child{
    margin-left: 0;
}
.kakaoAlimTem_wrap .kakaotalk_wrap .temList .template{
    margin-left: 5px;
    *margin-left: 4px;
}
.kakaotalk_wrap .temList .template{
    float: left;
    margin-left: 18px;
    width: 281px;
    border: 2px solid #e5e5e5;
    /*border-radius: 20px;*/
}
.kakaotalk_wrap .temList .template p.title{
    height: 42px;
    line-height: 35px;
    background: #002644; /*#f7e101*/
    text-align: center;
    color: white; /*rgb(10, 64, 94)*/
    /*border-bottom: 1px solid rgb(24, 145, 208);*/
    /*border-top-left-radius: 17px;*/
    /*border-top-right-radius: 17px;*/
    font-size: 1.1rem;
    cursor: default;
}
.kakaotalk_wrap .temList .template .textarea{
    overflow-y: hidden;
    background-color: white;
}
.kakaotalk_wrap .temList .template .textarea .btnView{
    margin-bottom: 10px;
    margin-top: 20px;
    text-align: center;
}
.kakaotalk_wrap .temList .template .textarea .btnView span:first-child{
    border-top: 1px solid #cacaca;
}
.kakaotalk_wrap .temList .template .textarea textarea{
    /*padding: 6px 0 0 6px;*/
    /*width: 230px;*/
    border: none;
    resize: none;
    /*overflow-y: hidden;*/
    min-height: 70px;
    height: 250px;
    color: black;
    font-weight: normal;
}

/*======================샘플 템플릿 페이지 스크롤바===================================*/
.kakaotalk_wrap .temList .template .textarea textarea::-webkit-scrollbar{
    width: 5px; /* 스크롤바의 너비 */
}
.kakaotalk_wrap .temList .template .textarea textarea::-webkit-scrollbar-thumb{
    height: 50%;    /* 스크롤바의 길이 */
    background: rgb(171, 197, 212);    /* 스크롤바의 색상 */

    border-radius: 10px;
}
.kakaotalk_wrap .temList .template .textarea textarea::-webkit-scrollbar-track{
    background: rgba(33, 122, 244, 0.1); /*스크롤바 뒷 배경 색상*/
}


.kakaotalk_wrap .temList .template .textarea .btnView span{
    width: 190px;
    height: 33px;
    line-height: 33px;
    border: 1px solid #cacaca;
    border-width: 0 1px 1px 1px;
    color: #4184aa;
    text-align: center;
    display: block;
    *zoom: 1;
    *display: inline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 5px;
    margin: 0 auto;
}
.kakaotalk_wrap .temList .template .textarea .btnView span:hover{
    background-color: #efefef;
}
.kakaotalk_wrap .temList .template p.byte{
    height: 27px;
    line-height: 27px;
    /*background: #e7e4e4; !*#d8eaeb*!*/
    text-align: left;
    color: #688997;
    padding-left: 10px;
    padding-top: 3px;
    border-top: 1px solid #c9c8c8;
}
.kakaotalk_wrap .temList .template ul li{
    color: #a8a7a7;
    line-height: 20px;
    padding: 10px;
}
.samplesubmit{
    width: 277px;
    border: none;
    /*background-color: rgb(34, 58, 94);*/
    background-color: #e5e5e5;
    /*color: white;*/
    color: black;
    /*border-bottom-left-radius: 17px;*/
    /*border-bottom-right-radius: 17px;*/
    font-size: 18px;
    margin-top: 10px;
    font-weight: normal;
}
.samplesubmit:hover{
    background-color: #cbcbcb;
}
.template_category_container{
    text-align: center;
}
.template_category_subcontainer{
    display: inline-block;
}
.template_category_wrap{
    list-style: none;
    overflow: hidden;
    text-align: center;
    margin-top: -20px;
    margin-bottom: 70px;
}
.template_category_wrap li{
    float: left;
    font-size: 18px;
    margin-right: 10px;
}

/*
.btn-type-select-title{
    width: 100%;
    border: none;
    background-color: #f5f5f5;
    color: black;
    font-weight: initial;
    font-size: 15px;
}*/

#callbackUseBtn{
    color: black;
    border-radius: 5px;
    border: 1px solid navy;
    color: navy;
    padding: 5px;
    background-color: white;
}
#callbackUseBtn:hover{
    background-color: navy;
    color: whitesmoke;
    font-weight: 400;
}
#callbackDelBtn{
    color: black;
    border-radius: 5px;
    border: 1px solid #c64545;
    padding: 5px;
    color: #c64545;
    background-color: white;
}
#callbackDelBtn:hover {
    background-color: #c64545;
    color: whitesmoke;
    font-weight: 400;
}



/* 230817 */
.readonly-select {
    border: 1px solid #ccc;
    padding: 5px;
    display: inline-block;
    background-color: #f7f7f7;
    cursor: not-allowed;
}