@charset "utf-8";
/* *******************************************************
 * filename : transmission.css
 * description : 전송 및 템플릿 페이지에서 사용되는 CSS
 * date : 2023-06-09
******************************************************** */

/* ========================================================
 * 전송 및 템플릿 공통사용
 * 레이아웃 관련
======================================================== */
/* ************** 왼쪽 영역 ************** */
.write-left-con{width: calc(100% - 380px); float: left;}
.write-left-inner{padding: 20px 0; /*border-top: 1px solid #e5e5e5;*/}
.write-left-con .write-left-inner:first-child{border-top: none; margin-top: -20px;}
#sendNumber{}
.write-tit-con{}
.write-tit-con .tit-left{width: 100px; float: left; font-size: 16px; line-height: 30px; font-weight: 500; letter-spacing: -0.75px; color: #000;}
.write-tit-con .tit-left.select-tit{line-height: 40px;}
.write-tit-con .tit-left span{margin-left: 3px; display: inline-block; color: #ff4242;}
.write-tit-con .tit-right{width: calc(100% - 100px); float: left;}

/* ************** 오른쪽 영역 ************** */
.write-right-con{width: 380px; float: right;}

/* ************** 하단 전체 영역 ************** */
.write-tit-con .tit-left.full{width: 100%; float: none;}


/* ========================================================
 * 전송 레이아웃
======================================================== */
.ds-cm-main-con.write{padding-bottom: 30px;}


/* ========================================================
 * 전송 왼쪽 컨텐츠
======================================================== */
/* ******* 내용 ******* */
/* 내용 :: 광고성 정보~ */
.tooltip .cm-move-link {display: inline-block; padding-bottom: 0; -webkit-box-sizing: border-box; box-sizing: border-box;}
.tooltip .gs-custom-checkbox .checkbox-item label {font-size: 16px; padding-left: 25px; font-weight: 400;}
.tooltip .gs-custom-checkbox .checkbox-item label:before{top: 1px; font-size: 18px;}
.tooltip .gs-custom-checkbox .checkbox-item a{position: relative; top: 2px; margin-left: 5px; display: inline-block;}
.tooltip .gs-custom-checkbox .checkbox-item a i{font-size: 18px; color: #000;}
/* 내용 :: 광고, 선택창, 입력창 */
.write-input-con-group{margin-top: 15px; -webkit-border-radius: 5px; border-radius: 5px;}
.write-input-con{margin-top: 10px; background-color: #f5f5f5; -webkit-border-radius: 5px; border-radius: 5px; overflow: hidden; border: 1px solid #f5f5f5; -webkit-box-sizing: border-box; box-sizing: border-box;}
.write-input-con.lms-change{border-color:#4a4adb !important; background-color:#f6f6ff !important;} /* lms전환 */
.write-input-con.mms-change{border-color:#33d0ad !important; background-color:#f1fffc !important;} /* mms전환 */
.write-input-con.n-pass{border: 1px solid #ff4242;}
.write-input-con-group .write-input-con:first-child{margin-top: 0;}
.write-input-top-con{border-bottom: 1px solid #dfdfdf;}
.write-input-top-con .tit-con{float: left; position: relative; height: 40px;}
.write-input-top-con .tit-con:before{position: absolute; top: 50%; margin-top: -10px; left: 0; display: block; content: ''; width: 1px; height: 20px; background-color: #e0e0e0;}
.write-input-top-con .tit-con.tit01{width: 70px; font-size: 14px; line-height: 40px; font-weight: 400; letter-spacing: -0.2px; color: #666; text-align: center;}
.write-input-top-con .tit-con.tit01:before{display: none;}
.write-input-top-con .tit-con.tit02{width: 135px;}
.write-input-top-con .tit-con.tit03{width: 293px;}
.write-input-top-con .tit-con.tit02 .select-title {background-position:100% 50%;}
.write-input-top-con .tit-con.tit01.full{width: auto; padding: 0 20px; text-align: left;}

/* 내용 :: 입력창 */
.write-input-down-con{padding: 20px; float: left; width: calc(100% - 40px); position: relative;}
.write-input-down-con .scroll-object-box-outside {height: 140px; padding-right: 15px; z-index: 1;}
.write-input-down-con .mCSB_outside + .mCSB_scrollTools {right: -5px;}
.write-input-down-info{margin-top: 5px; position: relative; padding-right: 230px; line-height: 18px; height: 36px; letter-spacing: -0.2px; font-weight: 400;}
.write-input-down-info.row-1{height: 18px;}
.write-input-down-info p{font-size: 13px; color: #1e0000;}
.write-input-down-info .byte{position: absolute; bottom: 0; right: 0; font-size: 13px; color: #000; text-align: right;}
.write-input-down-info .byte em{color:#ff4242;}
.lms-change .write-input-down-info .byte em{color:#4a4adb;}
.mms-change .write-input-down-info .byte em{color:#33d0ad;}
.write-input-down-btn{margin-top: 10px;}
.write-input-down-btn ul{margin: 0 -5px;}
.write-input-down-btn ul li{width: calc(50% - 10px); float: left; margin: 0 5px;}
.write-input-down-btn.col-3 ul li{width: calc(50% - 10px);}
.write-input-down-con .gs-custom-textarea{background-color:transparent;}
.write-layer-bottom-con{position: relative;}
/* 특수문자 레이어 팝업 */
.open-special-character{line-height: 38px;}
.open-special-character.open{position: relative; z-index: 1; background-color: #4a4adb; color: #fff;}
.special-character-con{display: none; position: absolute; top: 50px; left: 0; width: 500px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #d1d1d1; -webkit-box-shadow: 5px 5px 6px rgba(0,0,0,0.08); box-shadow: 5px 5px 6px rgba(0,0,0,0.08); background-color: #fff; z-index: 2;}
.special-character-con.open{display: block;}
.special-character-tb{width: 100%; table-layout: fixed;}
.special-character-tb button{width: 100%; height: 40px; text-align: center; color: #000; font-size: 12px;}
.special-character-tb button:hover{background-color: #d1d1d1;}
/* 변수 레이어 팝업 */
.open-variable-info{line-height: 38px;}
.open-variable-info.open{position: relative; z-index: 1; background-color: #4a4adb; color: #fff;}
.variable-info-con{display: none; position: absolute; top: 50px; left: 0; width: 500px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #d1d1d1; -webkit-box-shadow: 5px 5px 6px rgba(0,0,0,0.08); box-shadow: 5px 5px 6px rgba(0,0,0,0.08); background-color: #fff; z-index: 2;}
.variable-info-con.open{display: block;}
.variable-info-con .tit-con{position: relative; padding: 15px 70px 15px 20px;}
.variable-info-con .tit-con p{font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: -0.2px; color: #000;}
.variable-info-con .tit-con a{position: absolute; top: 50%; margin-top: -15px; right: 15px; display: block; width: 30px; height: 30px; text-align: center;}
.variable-info-con .tit-con a i{font-size: 18px; line-height: 30px; color: #000;}
.variable-info-tb{width: 100%; table-layout: fixed;}
.variable-info-tb td{border: 1px solid #d1d1d1; line-height: 39px; text-align: center; font-size: 14px; font-weight: 400; letter-spacing: -0.2px; color: #000;}
.variable-info-tb td.border-left-none{border-left: none;}
.variable-info-tb td.border-right-none{border-right: none;}
.variable-info-tb td.border-bottom-none{border-bottom: none;}
.variable-info-con td button{width: 100%; height: 39px;}
.variable-info-con button:hover{background-color: #d1d1d1;}
/* 이모티콘 레이어 팝업 */
.open-talk-emoticon.open{position: relative; z-index: 1; background-color: #4a4adb; color: #fff;}
.talk-emoticon-con{display: none; position: absolute; top: 50px; left: 0; width: 500px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #d1d1d1; -webkit-box-shadow: 5px 5px 6px rgba(0,0,0,0.08); box-shadow: 5px 5px 6px rgba(0,0,0,0.08); background-color: #fff; z-index: 2;}
.talk-emoticon-con.open{display: block;}
.talk-emoticon-list .item{overflow-y:auto; height:200px;}
.talk-emoticon-tb{width: 100%; table-layout: fixed;}
.talk-emoticon-tb button{width: 100%; height: 40px; text-align: center;}
.talk-emoticon-tb button:hover{background-color: #d1d1d1;}
.talk-emoticon-con .mCSB_outside + .mCSB_scrollTools{right:5px; top:10px; bottom:10px;}
/* 최근 전송 내역 */
.open-recent-transmission.open{position: relative; z-index: 1; background-color: #4a4adb; color: #fff;}
.recent-transmission-con{display: none; position: absolute; top: 50px; left: 0; width: 500px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #d1d1d1; -webkit-box-shadow: 5px 5px 6px rgba(0,0,0,0.08); box-shadow: 5px 5px 6px rgba(0,0,0,0.08); background-color: #fff; z-index: 1;}
.recent-transmission-con.open{display: block;}
.recent-transmission-con .scroll-number-inner{padding: 20px 15px 10px;}

/* ******* 파일첨부 ******* */
.write-file-radio-list li{display: inline-block; vertical-align: middle; margin-right: 20px;}
.write-file-radio-list li .date{display: inline-block; margin-left: 7px; font-size: 13px; line-height: 30px; font-weight: 400; color: #000;}
.write-file-radio-list li .date i{display: inline-block; margin-right: 5px;}
/* 파일첨부 :: 파일첨부 영역 */
.write-file-con{}
.write-file-con .info{margin-top: 10px; font-size: 13px; line-height: 18px; font-weight: 400; color: #000;}
.write-file-list{position: relative; padding: 10px 20px; margin-top: 10px; background-color: #f2f2f2; border: 1px solid #f2f2f2; -webkit-border-radius: 5px; border-radius: 5px;}
.write-file-list.n-pass{border-color: #ff4242;}
.write-file-list .file{margin: 5px 0; position: relative; padding-right: 20px;}
.write-file-list .file .num{float: left; margin-right: 10px; display: block; width: 20px; height: 20px; background-color: #000; font-size: 13px; line-height: 20px; color: #fff; text-align: center; -webkit-border-radius: 5px; border-radius: 5px;}
.write-file-list .file p{float: left; width: calc(100% - 30px); font-size: 13px; line-height: 20px; font-weight: 400; color: #000;}
.write-file-list .file .delete-btn{position: absolute;
    /* top: 26%; */
    margin-top: -5.5px;
    right: 0;
    /* font-size: 13px; */
    color: #ff000091;}
/* 파일첨부 :: 알림문구 */
.write-file-alert{font-size: 13px; line-height: 30px; font-weight: 400; letter-spacing: -0.25px; color: #ff4242; text-align: right;}
/* 파일첨부 :: 버튼 */
.write-file-down-btn{margin-top: 10px;}
.write-file-down-btn{position: relative; width: 100%; height: 40px;}
.write-file-down-btn input[type="file"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0);  border: 0;}
.write-file-down-btn label {position: absolute; top: 0; right: 0; line-height: 38px; font-weight: 300; display: block; cursor: pointer;}

/* ******* 수신번호 ******* */
/* 수신번호 :: 입력창 */
.write-number-down-con{margin-top: 30px; padding: 20px; border: 1px solid #e0e0e0; -webkit-border-radius: 5px; border-radius: 5px;}
.write-number-down-con.n-pass{border-color: #ff4242;}
.write-number-down-con .scroll-object-box-outside {height: 140px; padding-right: 15px; z-index: 1;}
.write-number-down-con .mCSB_outside + .mCSB_scrollTools {right: -5px;}
.write-number-down-info{margin-top: 5px; height: 18px; line-height: 18px; letter-spacing: -0.2px; font-weight: 400; text-align: right;}
.write-number-down-info .case{display: inline-block; font-size: 13px; color: #000;}
.write-number-down-txt{font-size: 13px; line-height: 30px; letter-spacing: -0.2px; font-weight: 400; color: #ff4242; text-align: right;}
.write-number-down-btn{margin-top: 10px;}
.write-number-down-btn ul{margin: 0 -5px;}
.write-number-down-btn ul li{width: calc(50% - 10px); float: left; margin: 0 5px;}
.write-number-down-btn ul li a{line-height: 38px;}
/* 수신번호 :: 전화번호 보여지는 영역 */
.scroll-number-inner .number-inner{display: inline-block; margin-right: 10px; margin-bottom: 10px; padding: 3px 10px; background-color: #f5f5f5; -webkit-border-radius: 24px; border-radius: 24px;}
.scroll-number-inner .number-inner .num{margin-right: 15px; display: inline-block; vertical-align: middle; font-size: 13px; line-height: 20px; font-weight: 400; letter-spacing: -0.2px; color: #666;}
.scroll-number-inner .number-inner .delete{display: inline-block; vertical-align: middle; font-size: 13px; line-height: 20px; color: #666;}
.scroll-number-inner .number-inner .cm-move-link{padding-bottom: 0; color: #4a4adb;}

/* ******* 전송 예상 포트폴리오 ******* */
.write-portfolio-con{margin-top: 20px; margin-bottom: 5px;}
.write-portfolio-txt{font-size: 13px; line-height: 22px; font-weight: 400; letter-spacing: -0.5px; color: #666; min-height: 44px;}
.write-transmission-bottom-con{/*padding-right: 310px;*/ position: relative;}
.write-transmission-btn{position: absolute;
    top: 190%;
    margin-top: -20px;
    right: 390px;}
.write-transmission-btn ul li{display: inline-block;}

/* ******* 전송 금액 ******* */
.write-total-con{padding-bottom: 20px;}
.write-total-left-con{width: 500px; float: left; background-color: #f5f5f5; -webkit-border-radius: 5px; border-radius: 5px;}
.write-total-top{}
.write-total-top .inner{padding: 0 20px; height: 60px; border-bottom: 1px solid #dcdcdc;}
.write-total-top .left{float: left; font-size: 20px; line-height: 60px; font-weight: 500; letter-spacing: -0.75px; color: #000;}
.write-total-top .right{float: right; color: #000;}
.write-total-top .right .price{display: inline-block; vertical-align: middle; font-size: 20px; line-height: 60px; font-weight: 500; letter-spacing: -0.75px;}
.write-total-top .right .txt{margin-left: 20px; display: inline-block; vertical-align: middle; width: 80px; font-size: 13px; line-height: 60px; font-weight: 400; letter-spacing: -0.5px; opacity: 0.5;}
.write-total-bottom{padding: 15px 20px;}
.write-total-bottom > div{margin-top: 10px;}
.write-total-bottom > div:first-child{margin-top: 0;}
.write-total-bottom .gs-custom-checkbox .checkbox-item label{padding-left: 25px; font-weight: 400; font-size:16px; line-height: 40px;}
.write-total-bottom .gs-custom-checkbox .checkbox-item label .pay{margin-left: 3px; display: inline-block; font-size: 13px; letter-spacing: -0.75px; color: #aaa;}
.write-total-bottom .gs-custom-checkbox .checkbox-item label:before{top: 0px; left: 0; font-size:18px;}
.write-total-bottom .left{width: 175px; float: left;}
.write-total-bottom .right{width: calc(100% - 175px); float: left;}
.write-total-bottom .gs-custom-input-btn-group.bg-white, .write-total-bottom .bg-white .gs-custom-input{background-color: #fff;}
.write-total-bottom .gs-custom-input{text-align: right;}
.write-total-bottom .gs-custom-input-btn-group .input-con {width: calc(100% - 80px); padding-right: 80px;}

.write-total-right-con{width: 360px; float: right; background-color: #f5f5f5; -webkit-border-radius: 5px; border-radius: 5px;}
.write-right-total-top{padding: 20px; height: 80px;}
.write-right-total-top .total-txt{font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: -0.75px; color: #000;}
.write-right-total-top .price{display: inline-block; float: right;}
.write-right-total-down{padding: 0 20px; border-top: 1px solid #dcdcdc;}
.write-right-total-down .total-txt{font-size: 20px; line-height: 60px; font-weight: 500; letter-spacing: -0.75px; color: #000;}
.write-right-total-down .price{display: inline-block; float: right;}


/* ========================================================
 * 전송 오른쪽 핸드폰 fixed 영역
======================================================== */
.ds-cm-fixed-container{margin-top: 15px; position:relative;}
.ds-cm-fixed-container .phone-box{    position: absolute;    top: 0;    right: 70px;    width: 290px;}
.phone-box-bg{width:286px; height:580px; background: url("/common/img/sub/phone_bg.png") 0 0 no-repeat;}
.phone-box-bg.kakao{background: url("/common/img/sub/phone_bg2.png") 0 0 no-repeat;}
.write-right-con .phone-box.fixed{position:fixed; top:95px; right:38.5%; margin-right:-440px;}
.write-right-con .phone-box.absolute{bottom:0px; top:auto;}

@media all and (max-width:1580px){
    .write-right-con .phone-box.fixed{margin-right:0; right: auto; left: 944px;}
}
@media all and (max-width:1280px){
    .write-right-con .phone-box.fixed{position:absolute; top:0; right:30px; left: auto;}
    .write-right-con .phone-box.absolute{bottom:auto; top:0;}
}
/* 20211018 { 하단의 메시지 미리보기 화면과 함께 이동 } start  */
.write-right-con .to-area-btns{position: absolute; top: 113px; left: -59px;}
/* // 20211018 { 하단의 메시지 미리보기 화면과 함께 이동 } end  */
.write-right-con .to-area-btns ul{width: 60px;}
.write-right-con .to-area-btns li{margin-top: 6px;}
.write-right-con .to-area-btns li:first-child{margin-top: 0;}
.write-right-con .to-area-btns li a{display: block; width: 58px; height: 58px; border: 1px solid #ccc; -webkit-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; overflow: hidden; text-align: center; background-color: #f5f5f5;}
.write-right-con .to-area-btns li a i{padding-top: 10px; font-size: 20px; color: #000;}
.write-right-con .to-area-btns li a span{margin-top: 5px; display: block; width: 100%; font-size: 11px; font-weight: 500; letter-spacing: -0.2px; color: #000;}
.write-right-con .to-area-btns li a.selected{background-color:#4a4adb; border-color: #4a4adb;}
.write-right-con .to-area-btns li a.selected i{color: #fff;}
.write-right-con .to-area-btns li a.selected span{color: #fff;}



/* ========================================================
 * 카카오톡 전송 :: 알림톡 컨텐츠
======================================================== */
/* 채널 아이디 얼랏 텍스트 */
.select-channel-txt{font-size: 13px; padding-top: 10px; font-weight: 400; letter-spacing: -0.2px; color: #ff4242; text-align: right;}

/* 템플릿 */
.transmission-wrap .template-add .gs-custom-select{width: calc(100% - 60px); float: left;}
.template-add .template-add-btn{width: 60px; height: 40px; float: left; position: absolute;    left: 670px;}
.template-add .template-add-btn i{font-size: 25px; color: #000; vertical-align: middle;}

/* 대체문자 */
.write-tit-con .tit-right.replace{position: relative;}
.replace .gs-custom-checkbox .checkbox-item label{padding-left: 25px; font-size:16px; font-weight: 400;}
.replace .gs-custom-checkbox .checkbox-item label:before{font-size:18px;}
.replace .replace-related-btns{position:absolute; right:0px; margin-top:-15px; top:50%;}
/*.replace .replace-toggle{position:absolute; top:50%; right:20px; margin-top:-5px; font-size:0; display:inline-block; width:14px; height:10px; background:url("../images/icon/icon_arrow.png") no-repeat; transition:all 0.3s; -webkit-transform: rotate(225deg); transform: rotate(225deg); cursor:pointer;}*/
.replace .replace-toggle.open{-webkit-transform: rotate(360deg); transform:rotate(360deg)}
.replace .replace-toggle + .message-copy-btn{margin-right:55px;}

/* 대체문자 영역 */
.hidden-ds-con{position: relative;}
.hidden-ds-con:before{position: absolute; top: -15px; left: 0; content: ''; width: 100%; height: calc(100% + 15px); border: 3px solid #666; -webkit-box-sizing: border-box; box-sizing: border-box;}
.write-left-inner-replace{padding:25px 0;}

.hidden-replace-inner .write-input-con{background-color:#fff;}
.hidden-replace-inner{padding:15px 30px; background-color:#f2f2f2;}
.hidden-replace-inner .write-right-con{width:286px;}
.hidden-replace-inner .write-file-list{background-color:#fff;}
.hidden-replace-inner .write-input-top-con .tit-con.tit03{width:233px; }

/* 대체문자 상단내용 불러오기 추가 */
.phone-box-copy{text-align:right; margin-bottom:10px;}
.message-copy-btn i{position:relative; top:2px; margin-left:5px; font-size:16px;}



/* ========================================================
 * 카카오톡 전송 :: 친구톡 컨텐츠
======================================================== */
/* 파일첨부 */
.write-file-move-link{margin-top: 10px; padding: 10px 20px; background-color: #f2f2f2; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #f5f5f5;}
.write-file-move-link.on{background-color: #fff; border-color: #aaa;}
.write-file-move-link .tit{width: 190px; float: left; font-size: 14px; line-height: 40px; font-weight: 400; letter-spacing: -0.65px; color: #000;}
.write-file-move-link .link{width: calc(100% - 190px); float: left;}
.write-file-move-link .link .gs-custom-input{background-color: #fff;}
.write-file-move-link.on .link .gs-custom-input{background-color: #f2f2f2;}

/* 버튼 */
.transmission-wrap .gs-custom-input-btn-group .input-con .gs-custom-select {border: 1px solid transparent;}
.button-type-txt{font-size: 13px; line-height: 30px; font-weight: 400; letter-spacing: -0.2px; color: #ff4242; text-align: right;}

.button-type-con{position: relative; margin-top: 10px; padding: 20px 0; background-color: #f2f2f2; border: 1px solid #f2f2f2; -webkit-border-radius: 5px; border-radius: 5px;}
.button-type-inner{float: left; width: calc(100% - 115px); margin-top: 10px; position: relative; padding-left: 25px;}
.button-type-con .button-type-inner:first-child{margin-top: 0;}
.button-type-inner-hide .button-type-inner:first-child{margin-top: 10px;}
.button-type-tit{width: 95px; float: left; font-size: 16px; font-weight: 400; line-height: 40px; color: #000;}
.button-type-tit span{color: #ff4242;}
.button-type-input{width: calc(100% - 95px); float: left;}
.transmission-wrap .button-type-input .gs-custom-input{background-color: #fff;}
.button-type-con .button-type-input .gs-custom-input:focus{border-color: #f2f2f2;}
.button-type-con.on .button-type-input .gs-custom-input{background-color: #f2f2f2;}
.button-type-con .button-type-input .gs-custom-input.n-pass:focus{border-color: #ff4242;}
.button-type-input .btn-list{margin: 0 -5px;}
.button-type-input .btn-list li{width: calc(25% - 10px); margin: 0 5px; float: left;}
.button-type-input .btn-list li button{font-size: 13px; letter-spacing: -0.75px;}
.button-type-delete-btn{position: absolute; top: 20px; right: 0; width: 90px; height: 40px; border: none; background-color: transparent; font-size: 16px; font-weight: 400; color: #000;}
.button-type-delete-btn i{margin-right: 5px; font-size: 20px; color: #000; display: inline-block; vertical-align: middle;}
.button-type-tooltip{position: absolute; right: -35px; top: 50%; margin-top: -9px;}
.button-type-tooltip i{font-size: 18px; color: #4a4adb;}



/* ========================================================
 * 카카오톡 전송에서 사용되는 레이어 팝업
======================================================== */
/* 변수 입력가이드 */
.modal-variable-con{padding: 30px 30px 40px 30px; letter-spacing: -0.5px;}
.modal-variable-con .tit{font-size: 16px; font-weight: 600; color: #111;}
.modal-variable-con .txt{margin-top: 15px; font-size: 16px; font-weight: 400; line-height: 25px; color: #666;}
.modal-variable-con .rectangle-txt{margin-top: 5px; background-color: #f2f2f2; line-height: 50px; text-align: center; font-size: 16px; font-weight: 400; letter-spacing: -0.5px; color: #000;}
.variable-con01{}
.variable-con01 .txt02{margin-top: 10px; font-size: 14px; line-height: 25px;}
.variable-con02{margin-top: 25px;}
.variable-con02 table{margin-top: 5px;}
.variable-con03{text-align: center; padding-top: 40px;}
/* 오류상세 */
.error-details-con01{padding: 15px 0;}
.error-details-con01 p{font-size: 15px; line-height: 26px; letter-spacing: -0.75px; color: #000;}
.receipt-number-con02.error-details-con02 .middle-con{margin-top: 0;}
/* 충전 */
.modal-charge-con{padding: 30px; padding-bottom: 0;}
.tab-up-tit{margin-bottom: 10px; font-size: 20px; font-weight: 500; letter-spacing: -0.75px; color: #000;}
.modal-charge-tab-list{margin-bottom: 30px;}
.modal-charge-tab-list ul{-webkit-border-radius: 10px; border-radius: 10px; overflow: hidden;}
.modal-charge-tab-list ul li{width: 50%; float: left; border-left: 1px solid #e5e5e5; -webkit-box-sizing: border-box; box-sizing: border-box;}
.modal-charge-tab-list ul li:first-child{border-left: none;}
.modal-charge-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-charge-tab-list ul li.selected a{background-color: #333; color: #fff;}
/* 충전 :: 신용카드 */
.modal-charge-con .sub-join02-check-list{margin-top: 0; padding: 0;}
.modal-charge-con #cardCon .sub-join02-check-list .input-inner .input-con input{width: calc(100% - 50px); padding: 0; line-height: 30px; height: 30px; float: left; font-size: 20px; font-weight: 600;}
.modal-charge-con #cardCon .sub-join02-check-list .input-inner .input-con.full input{width: calc(100% - 35px); text-align: right;}
.transmission-wrap .modal-charge-con .sub-join02-check-list .input-inner.on .gs-custom-input{background-color: #fff;}
.modal-charge-con .sub-join02-check-list .input-inner .input-con .pay-won{display: inline-block; float: right; width: 35px; font-size: 14px; line-height: 30px; font-weight: 400; letter-spacing: -0.25px; color: #000; text-align: center;}
.modal-charge-con .sub-join02-check-list .input-inner .input-con .pay-delete-btn{position: absolute; top: 4px; right: 0px;}
.modal-charge-con .sub-join02-check-list .input-inner .input-con .pay-delete-btn i{vertical-align: middle;}
.modal-charge-con .sub-join02-check-list .input-inner.pay-inner{padding: 20px;}
.modal-pay-btn-wrapper{margin-top: 20px; width: 100%; float: left;}
.modal-pay-btn-list{margin: 0 -4px;}
.modal-pay-btn-list li{float: left; width: calc(20% - 8px); margin: 0 4px;}
.modal-pay-btn-list li button{display: block;}
.madal-charge-txt{text-align: right; font-size: 14px; line-height: 30px; font-weight: 400; letter-spacing: -0.25px; color: #aaa;}
.madal-charge-total{text-align: right; font-size: 14px; line-height: 30px; font-weight: 400; letter-spacing: -0.25px; color: #000;}
.modal-charge-con02{padding: 35px 0 40px; text-align: center;}
/* 충전 :: 쿠폰등록 */
.madal-charge-txt01{padding-top: 10px; padding-bottom: 10px; font-size: 20px; font-weight: 500; letter-spacing: -0.75px; color: #000;}
.madal-charge-txt02{padding-bottom: 20px; font-size: 15px; font-weight: 400; letter-spacing: -0.75px; color: #666;}
/* 테스트 전송 */
.test-transmission-con{padding: 30px;}
.test-transmission-con .sub-join02-check-list{margin-top: 0; padding: 0;}
.test-transmission-con .sub-join02-check-list .input-inner .input-con input{width: calc(100% - 35px); padding: 0; line-height: 30px; height: 30px;}
.test-transmission-txt01{margin-bottom: 20px; font-size: 16px; font-weight: 400; letter-spacing: -0.75px; color: #000;}
.test-transmission-txt02{margin-top: 20px; font-size: 14px; font-weight: 400; letter-spacing: -0.25px; color: #aaa;}
.test-transmission-txt02 .check{display: inline-block; margin-right: 10px; font-weight: 500; color: #000;}
.test-transmission-btn{padding-top: 30px; text-align: center;}
/* 테스트전송(카카오톡) */
.test-transmission-radio-list {margin-top: 30px; margin-bottom: 20px;}
.test-transmission-radio-list li{display: inline-block; vertical-align: middle; margin-right: 20px;}

.test-transmission2-txt{margin-top: 40px;}
.test-transmission2-txt p{font-size: 14px; line-height: 26px; font-weight: 400; letter-spacing: -0.25px; color: #aaa;}
.test-transmission2-txt p .check{width: 60px; display: inline-block; font-weight: 500; color: #000;}



/* ========================================================
 * 카카오톡 전송 알림톡 템플릿 선택
======================================================== */
.select-template-con{padding: 30px; padding-bottom: 40px;}
.select-template-top{margin-bottom: 30px;}
.select-template-top > .txt{float: left; font-size: 14px; line-height: 40px; font-weight: 400; letter-spacing: -0.65px; color: #000;}
.select-template-top .search-list{float: right;}
.select-template-top .search-list li{margin-right: 10px; width: 160px; float: left;}
.select-template-top .search-list li:last-child{margin-right: 0; width: 270px;}
.select-template-top .search-list li:last-child .gs-custom-search .inner {padding: 4px 60px 4px 10px;}
.select-template-middle{}
.select-template-middle .template-list{margin: 0 -17px;}
.select-template-middle .template-list li{width: calc(33.33% - 34px); margin: 0 17px; float: left;}
.select-template-middle .template-list li .sample{background-color: #a0c0d7; -webkit-border-radius: 15px; border-radius: 15px;}
.select-template-middle .template-list li .sample .sample-tit{position: relative; height: 50px;}
.select-template-middle .template-list li .sample .sample-tit .num{float: left; font-size: 14px; line-height: 50px; font-weight: 400; color: #000;}
.select-template-middle .template-list li .sample .sample-tit .num i{position: relative; margin-top: -3px; margin-right: 10px; display: inline-block; vertical-align: middle; font-size: 24px;}
/* 20211018 { 템플릿명 위치 변경 } start  */
.select-template-middle .template-list li .sample .sample-tit .num a{display: inline-block; vertical-align: middle; font-size: 14px; line-height: 1.3; max-width: 150px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
/* // 20211018 { 템플릿명 위치 변경 } end  */
.select-template-middle .template-list li .sample .sample-tit .sample-select{position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #fff;}
.select-template-middle .gs-custom-radio .radio-item label{padding-left: 30px;}
.select-template-middle .gs-custom-radio .radio-item label:before{width: 30px; text-align: center; font-size:20px; content:"\e92b";}
.select-template-middle .gs-custom-radio .radio-item input:checked + label:before{content:"\e92b";}
.select-template-middle .template-list li .sample .sample-view{padding: 10px; padding-top: 0; padding-bottom: 0; height: 290px;}
.select-template-middle .template-list li .sample .sample-view .scroll-object-box{height: 290px;}
.select-template-middle .mCSB_scrollTools{bottom: 10px;}
.select-template-middle .mCSB_outside + .mCSB_scrollTools {right: -5px;}
.select-template-middle .mCSB_outside + .mCSB_scrollTools {right: -25px;}
.select-template-middle .mCSB_inside > .mCSB_container {margin-right: 0;}
.select-template-middle .mCS-dark.mCSB_scrollTools .mCSB_draggerRail {background-color: #8eb5d2;}
.select-template-middle .template-list li .sample .sample-info{background-color: #fff; border: 1px solid #e5e5e5; border-top: none; padding: 15px 20px; font-size: 15px; line-height: 26px; font-weight: 400; letter-spacing: -0.5px; color: #000; -webkit-border-radius: 0 0 15px 15px; border-radius: 0 0 15px 15px;}
.select-template-con .gs-custom-paging{margin: 40px 0;}
.select-template-btn{text-align: center;}
.select-template-btn a{margin: 0 5px;}
/* 스크롤 안 영역 */
.select-template-middle .phone-box-bottom-inner{}


/* ========================================================
 * 200804 추가 css
======================================================== */
.write-tit-con .tit-right .button-type-con:first-child{margin-top: 0;}
.hidden-replace-inner{padding: 20px 30px;}

/* ========================================================
* 템플릿 :: 공통사항
======================================================== */
/* -------- 템플릿 > 카카오톡 알림톡 > 내 메시지 -------- */
.template-talk-con01{padding: 25px 0 30px;}
.template-talk-con01 p{position: relative; padding-left: 15px; font-size: 15px; line-height: 26px; font-weight: 400; letter-spacing: -0.75px; color: #000;}
.template-talk-con01 p:before{position: absolute; top: 50%; margin-top: -3px; left: 0; content: ''; width: 6px; height: 6px; -webkit-border-radius: 100%; border-radius: 100%;display: inline-block; background-color: #000;}

.template-talk-con02{}
.template-talk-con02 .left{float: left;}
.template-talk-con02 .right{float: right;}
.template-talk-con02 .right .right-item{margin-left: 10px; float: left;}
.template-talk-con02 .right .right-item:first-child{margin-left: 0;}
.template-talk-con02 .right .right-item.w125{width: 125px;}
.template-talk-con02 .right .right-item.w270{width: 270px;}
.template-talk-con02 .left button i{position: relative; top: -2px; font-size: 22px; margin-right: 5px; vertical-align: middle;}

.template-talk-con03{margin-top: 30px;}
.template-talk-con03 .inspection-btn{margin-top: 15px;}
.template-talk-con03 .inspection-btn button{margin: 0;}

.select-template-middle .sample-btn-list{position: absolute; top: 14px; right: 12px;}
.select-template-middle .gs-custom-checkbox{display: inline-block; vertical-align: middle; margin-right: 5px;}
.select-template-middle .gs-custom-checkbox .checkbox-item{position: relative; width: 22px; height: 22px; display: block; vertical-align: initial;}
.select-template-middle .gs-custom-checkbox .checkbox-item label{padding-left: 0; width: 22px; height: 22px; line-height: 22px; -webkit-border-radius: 100%; border-radius: 100%; background-color: #555;}
.select-template-middle .gs-custom-checkbox .checkbox-item label:before{font-size:17px;  content: "\e929"; color: #fff; width: 100%; text-align: center;}
.select-template-middle .gs-custom-checkbox .checkbox-item input:checked + label{background-color: #4a4adb;}
.select-template-middle .gs-custom-checkbox .checkbox-item input:checked + label:before {content: "\e929"; color: #fff;}
.select-template-middle .template-delete-btn{display: inline-block; vertical-align: middle; width: 22px; height: 22px; -webkit-border-radius: 100%; border-radius: 100%; background-color: #555;}
.select-template-middle .template-delete-btn i{font-size: 20px; color: #fff; vertical-align: middle;}

.template-talk-con03 .talk-box-txt .tit{padding: 5px 10px; height: 30px; line-height: 30px;}
.template-talk-con03 .talk-box-txt .tit a.cm-move-link{display: inline-block; vertical-align: middle; padding-bottom: 5px; line-height: 1; font-size: 13px;}

.template-talk-con04{padding: 35px 0 50px;}

/* -------- 템플릿 > 카카오톡 알림톡 > 내 메시지 > 신규등록 > 대량등록 -------- */
.write-tit-con .tit-right.down-sample-file-btn{position: relative; height: 30px;}
.write-tit-con .tit-right.down-sample-file-btn a{position: absolute; top: 5px; right: 0; display: inline-block;}

.ds-cm-main-con.template{padding-bottom: 15px;}
.write-left-con.full{width: 100%;}
.left-inner-area{width: calc(100% - 380px);}
.template .write-transmission-bottom-con{padding-right: 0;}
.template .write-transmission-btn{float: right; position: static; margin-top: 0;}

/* 대량등록 팝업 */
.bulk-registration-con{padding: 30px 35px 40px;}
.bulk-registration-txt01, .bulk-registration-txt02{font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: -0.5px; color: #000;}
.bulk-registration-txt01 a{display: inline-block; padding-bottom: 0;}
.bulk-registration-txt02{margin-top: 15px;}
.bulk-registration-btn{margin-top: 30px; text-align: center;}

/* 강조유형 */
.emphasis .gs-custom-radio .radio-item label{line-height: 40px; height: 40px;}
.write-tit-con.emphasis{margin-top: 10px;}
.write-tit-con.emphasis .tit-left{padding-right: 30px; width: 70px; text-align: right; color: #333;}

/* 템플릿 유형 텍스트 */
.template-type-txt{font-size: 13px; padding-top: 10px; font-weight: 400; letter-spacing: -0.2px; color: #000; text-align: right;}
.template-type-txt.align-left{padding: 10px 0; text-align: left;}

/* 내용 */
.add-css .write-tit-con .tit-left {width: 105px;}
.add-css .write-tit-con .tit-right {width: calc(100% - 105px);}
.add-css .write-input-con-group{margin-top: 0;}
.template.write-input-down-con{float: none; background-color: #f5f5f5; margin-bottom: 10px; border: 1px solid #f5f5f5; -webkit-border-radius: 5px; border-radius: 5px; width: calc(100%);}
.template.write-input-down-con.on{background-color: #fff; border-color: #aaa;}
.template.write-input-down-con.n-pass{border-color: #ff4242;}
.template.write-input-down-con .textarea-txt{text-align: right; margin-top: 25px; font-size: 13px; font-weight: 400; color: #000;}

/* 버튼 */
.button-type-info-txt{display: none; margin-top: 10px; font-size: 13px; line-height: 20px; font-weight: 400; letter-spacing: -0.5px; color: #000;}
.button-type-info-txt.active{display: block;}

/* 대체문자 하단 버튼 */
.tempate-bottom-btn {float: right;}
.tempate-bottom-btn button{float: left; margin: 0; margin-left: 10px;}
.tempate-bottom-btn button:first-child{margin-left: 0;}

/* -------- 템플릿 > 카카오톡 알림톡 > 내 메시지 > 템플릿 상세보기 -------- */
/* 등록상태, 등록일 */
.write-tit-con .tit-left .only-txt, .write-tit-con .tit-right .only-txt{font-size: 16px; line-height: 30px; font-weight: 400; letter-spacing: -0.2px; color: #000;}
.write-tit-con .tit-left .only-txt{font-weight: 500; letter-spacing: -0.75px;}

/* 검수결과 및 문의사항(영역 및 텍스트) */
.template-view.ds-cm-main-con{margin-top: 30px;}
.template-view .ds-cm-inner{padding: 30px;}
.template-view-txt01{margin-bottom: 15px; font-size: 16px; font-weight: 500; letter-spacing: -0.75px; color: #000;}
.template-view-txt02{font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: -0.75px; color: #666;}
.template-view-tb{margin-top: 20px;}
.template-view-tb .download-btn{display: block;}

/* 검수결과 및 문의사항(textarea) */
.tb-textarea-box{background-color: #f5f5f5; padding: 15px; margin-bottom: 10px; border: 1px solid #f5f5f5; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.tb-textarea-box.n-pass{border-color: #ff4242;}
.tb-textarea-box .gs-custom-textarea {height: 70px;}

/* 검수결과 및 문의사항(파일첨부) */
.tb-file-custom-box{position: relative; padding-left: 80px; padding-right: 95px; width: calc(100% - 175px);}
.tb-file-custom-box input[type="file"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
.tb-file-custom-box label {position: absolute; top: 0; left: 0; display: block; -webkit-border-radius: 5px; border-radius: 5px; font-size: 13px; font-weight: 500; letter-spacing: -0.5px; cursor: pointer; }
.tb-file-custom-box .delete-btn{position: absolute; top: 50%; margin-top: -10.5px; right: 80px; font-size: 13px; color: #666;}
/* named upload */
.tb-file-custom-box .upload-name {display: block; padding: 0; width: 100%; height:30px; font-size: 13px; line-height: 30px; font-weight: 400; color: #000; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.tb-file-custom-box .registration-btn{position: absolute; top: 0; right: 0; font-size: 13px; color: #fff;}

/* -------- 템플릿 > 카카오톡 알림톡 > 내 메시지 > 템플릿 상세보기_수정불가 -------- */
.template-view .button-type-inner {width: calc(100% - 80px);}
.button-type-add-txt{float: left; width: 100%; margin-top: 10px;}
.button-type-add-txt p{font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: -0.2px; color: #000; opacity: 0.5;}

/* 수정불가 영역 변화 */
.gs-custom-input.readonly{background-color: #fff; -webkit-box-shadow: 10px 10px 0 rgba(0,0,0,0.13); -moz-box-shadow: 10px 10px 0 rgba(0,0,0,0.13); box-shadow: 0 0 10px rgba(0,0,0,0.13);}
.write-input-con.readonly{-webkit-box-shadow: 10px 10px 0 rgba(0,0,0,0.13); -moz-box-shadow: 10px 10px 0 rgba(0,0,0,0.13); box-shadow: 0 0 10px rgba(0,0,0,0.13);}
.textarea-scroll-con .scroll-object-box{height: 140px; font-size:14px; line-height: 23px; letter-spacing: -0.2px; color: #000;}
.template.write-input-down-con.readonly{background-color: #fff; -webkit-box-shadow: 10px 10px 0 rgba(0,0,0,0.13); -moz-box-shadow: 10px 10px 0 rgba(0,0,0,0.13); box-shadow: 0 0 10px rgba(0,0,0,0.13);}


/* ========================================================
 * 200805 추가 css
======================================================== */
.select-template-middle.more-list .template-list li{margin-bottom: 20px;}
.select-template-middle.more-list .template-list li:nth-child(3n+1){clear: both;}
.select-template-middle.more-list + .inspection-btn{margin-top: 0;}
.write-input-tit-con{background-color: #f5f5f5; border: 1px solid #f5f5f5; -webkit-border-radius: 5px; border-radius: 5px;}
.write-input-tit-con.n-pass {border: 1px solid #ff4242;}
.hidden-replace-inner .write-input-tit-con{background-color: #fff; border: 1px solid #fff;}
.hidden-replace-inner .change-effect-bg.on {background-color: #fff; border-color: #aaa;}
.hidden-replace-inner .write-input-tit-con.n-pass {border: 1px solid #ff4242;}


/* ========================================================
 * 200814 추가 css
======================================================== */
.down-sample-file-btn a{display: inline-block;}



/* ========================================================
	20211018 { 알림톡 샘플 메시지 추가 페이지 } start
======================================================== */
.ds-cm-main-con.template.talk-sample {padding-bottom: 40px;}
.talk-sample-top{padding: 20px 30px 60px; text-align: center;}
.talk-sample-top .txt01{font-size: 15px; line-height: 1.3; letter-spacing: -0.75px; color: #000;}
.talk-sample-top .txt02{margin-top: 20px; font-size: 30px; line-height: 1.3; letter-spacing: -0.75px; font-weight: 600; color: #000;}
.talk-sample-top .form{margin: 30px auto 0; width: 360px; text-align: left;}
.talk-sample-top .form .gs-custom-input{padding-left: 20px;}

/* 키워드 검색 */
.keyword-list-open-btn{position: relative;}
.keyword-list-con{position: absolute; top: 38px; left: 0; width: 100%; border: 1px solid #000; background: #fff; z-index: 999; -webkit-box-sizing: border-box; box-sizing: border-box; visibility: hidden; opacity: 0;}
.keyword-list-con.active{visibility: visible; opacity: 1;}
.keyword-list-con .scroll-object-box-outside {max-height: 160px;}
.keyword-list-con .mCSB_scrollTools .mCSB_draggerContainer{left: -54px; top: 10px; bottom: 10px;}
.keyword-list-con .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color: #555;}
.keyword-list-con .mCS-dark.mCSB_scrollTools .mCSB_draggerRail{background-color: #fff;}
.keyword-list-con ul li{height: 40px; font-size: 13px; font-weight: normal; line-height: 40px; text-decoration: none;}
.keyword-list-con ul li span{padding: 0 2px 0 20px; display: block; color: rgba(0,0,0,0.3);}
.keyword-list-con ul li a{padding: 0 2px 0 20px; display: block; color: #000; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.keyword-list-con ul li a:hover{background: #eee;}
/* 모든 템플릿 */
.template-sample-open-btn {position: relative; margin-top: 10px;}
.template-sample-open-btn > a{display: block; width: 100% !important; color: #777; text-align: left; vertical-align: middle; border:0; background: url("/common/img/sub/select_arrow.png") no-repeat 96% 50%; display: inline-block; -box-sizing: border-box; cursor: pointer; border-radius:5px; transition:border-color 0.2s, background-color 0.2s; line-height: 38px; padding: 0 20px; font-size: 14px; font-weight: 400; letter-spacing: -0.75px; color:#000; box-sizing: border-box; background-color: #f5f5f5; border: 1px solid #f5f5f5;}
.template-sample-con{position: absolute; top: 40px; left: 0; width: 100%; border: 1px solid #000; background: #fff; z-index: 998; -webkit-box-sizing: border-box; box-sizing: border-box; visibility: hidden; opacity: 0;}
.template-sample-con.active{visibility: visible; opacity: 1;}
.template-sample-con .scroll-object-box-outside {height: 335px; overflow: hidden;}
.template-sample-con .mCSB_outside + .mCSB_scrollTools{right: 0;}
.template-sample-con .mCSB_scrollTools .mCSB_draggerContainer{left: -6px; top: 10px; bottom: 10px;}
.template-sample-con .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{background-color: #555;}
.template-sample-con .mCS-dark.mCSB_scrollTools .mCSB_draggerRail{background-color: #fff;}
/* 1depth */
.template-sample-1depth-list{}
.template-sample-1depth-list > li{font-size: 16px; font-weight: normal; line-height: 40px; text-decoration: none; overflow: hidden;}
/* 20211109 { 모든 템플릿 카테고리 명 텍스트를 검정색으로 수정 } start  */
.template-sample-1depth-list > li > .total{position: relative; padding: 0 20px 0 50px; display: block; cursor: auto; color: #000;}
/* // 20211109 { 모든 템플릿 카테고리 명 텍스트를 검정색으로 수정 } end  */
.template-sample-1depth-list > li > a{position: relative; padding: 0 20px 0 50px; display: block; color: #000;}
/* 20211104 { “모든 템플릿” 카테고리 오버 효과 추가 } start  */
.template-sample-1depth-list > li > .total:hover,
.template-sample-1depth-list > li > a:hover{background: #eee;}
/* 20211104 { “모든 템플릿” 카테고리 오버 효과 추가 } start  */
.template-sample-1depth-list > li .img{position: absolute; top: 50%; margin-top: -10px; left: 20px; width: 20px; height: 20px; display: block;}
.template-sample-1depth-list > li .img img{width: 100%; height: 100%;}
.template-sample-1depth-list > li.has-2depth:hover{background: #eee;}
/* 20211109 { 1 depth 메뉴 클릭 시 > 2depth 펼쳐짐으로 기능 변경 } start  */
.template-sample-1depth-list > li.has-2depth > .template-2depth-total-btn{position: relative; padding-right: 50px;}
.template-sample-1depth-list > li.has-2depth > .template-2depth-total-btn .arrow{position: absolute; top: 0; right: 20px; width: 30px; height: 40px; text-align: center;}
.template-sample-1depth-list > li.has-2depth > .template-2depth-total-btn .arrow i{line-height: 40px; -webkit-transition: all 0.3s; transition: all 0.3s;}
.template-sample-1depth-list > li.has-2depth.open > .template-2depth-total-btn .arrow i{-webkit-transform: rotate(90deg); transform: rotate(90deg);}
/* // 20211109 { 1 depth 메뉴 클릭 시 > 2depth 펼쳐짐으로 기능 변경 } end  */
/* 2depth */
.template-sample-2depth-list{display: none; float: left; position: relative; margin: 0 20px; width: calc(100% - 40px); padding-bottom: 10px;}
.template-sample-2depth-list:before{position: absolute; top: 0; left: 20px; right: 20px; content: ''; height: 1px; background-color: #cfcfcf;}
.template-sample-2depth-list > li{}
.template-sample-2depth-list > li:first-child{padding-top: 10px;}
.template-sample-2depth-list > li > a{padding: 0 30px; position: relative; display: block; font-size: 14px; line-height: 30px; letter-spacing: -0.75px; color: #000;}
.template-sample-2depth-list > li > a:before{position: absolute; top: 50%; margin-top: -1px; left: 8px; content: ''; width: 3px; height: 2px; background-color: #000;}
.template-sample-2depth-list > li > a:hover{font-weight: 500;}

/* 공통 타이틀(최신 템플릿 등) */
.talk-sample .select-template-middle{position: relative;}
.talk-sample .select-template-middle .total-view-btn{position: absolute; top: 50%; right: -57px; margin-top: -25px; width: 50px; height: 50px; background-color: #333; border: 0; -webkit-border-radius: 100%; border-radius: 100%; text-align: center; z-index: 10;}
.talk-sample .select-template-middle .total-view-btn i{font-size: 30px; line-height: 49px; color: #fff;}
.template-sample-item{margin: 0 30px; width: calc(100% - 60px); border-top: 1px solid #e5e5e5;}
.template-sample-item + .template-sample-item{margin-top: 80px;}
.talk-sample .ds-cm-tit-style{padding: 0; border-bottom: none;}
.talk-sample .ds-cm-tit-style .inner{padding: 40px 0 10px;}
.talk-sample .ds-cm-tit-style .tit b{display: inline-block; vertical-align: middle; margin-right: 0; font-size: 30px;}
.talk-sample .ds-cm-tit-style .tit img{display: inline-block; vertical-align: middle; margin-left: 10px;}
.talk-sample .ds-cm-tit-style .cm-move-link-arrow{position: absolute; top: 50%; margin-top: 5px; padding-left: 0; padding-right: 20px; right: 0; display: block; font-size: 13px; padding-bottom: 10px; color: #007aff; border-color: #007aff;}
.talk-sample .ds-cm-tit-style .cm-move-link-arrow:before{top: 1px; left: auto; right: 0; content: "\e93e"; font-size: 11px; color: #007aff;}
.talk-sample .ds-cm-inner{padding: 0;}
.talk-sample .select-template-middle .template-list{margin: -17px;}
.talk-sample .select-template-middle .template-list li{margin: 17px;}

/* 최신 템플릿 리스트 추가 */
.img-preview-con{margin: -10px -10px 10px;}
.img-preview-con img{width: 100%; height: auto;}
.select-template-middle .template-list li .sample .template-sample-info{padding: 20px;}
.template-sample-info-top{}
.template-sample-info-top .new{float: left; display: inline-block; padding: 0 10px; min-width: 62px; font-size: 13px; line-height: 24px; letter-spacing: -0.5px; color: #fff; background-color: #4a4adb; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 4px; border-radius: 4px;}
.template-sample-info-top .bookmark-btn{float: right; width: 24px; height: 24px;}
.template-sample-info-top .bookmark-btn i{font-size: 18px; color: #aaa;}
.template-sample-info-top .bookmark-btn.on i{color: #ffce31;}
.template-sample-info-bottom{margin-top: 15px;}
.template-sample-info-bottom .tit{font-size: 15px; line-height: 1.6; height: 3.2em; letter-spacing: -0.5px; color: #000;}
.template-sample-info-bottom .txt{margin-top: 15px; font-size: 13px; line-height: 1.3; letter-spacing: -0.5px; color: rgba(0,0,0,0.3);}
.template-sample-info-btn{margin-top: 15px; display: flex; align-items: center; justify-content: space-between;}
.template-sample-info-btn button,
.template-sample-info-btn a{font-size: 14px;}

/* 템플릿 정보 상세 */
.talk-sample .select-template-middle .template-list li .sample{position: relative;}
.template-sample-hidden-info{position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding-top: 50px; z-index: 1; background-color: #fff; border: 1px solid #e2e2e2; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 4px 4px 10px 0 rgba(0,0,0,0.05); box-shadow: 4px 4px 10px 0 rgba(0,0,0,0.05); -webkit-border-radius: 15px; border-radius: 15px; opacity: 0; visibility: hidden; -webkit-transition: all 0.2s; transition: all 0.2s;}
.template-sample-hidden-info.active{opacity: 1; visibility: visible;}
.template-sample-hidden-info .close-btn{position: absolute; top: 10px; right: 10px; width: 50px; height: 50px;}
.template-sample-hidden-info .close-btn i{font-size: 24px; color: #333;}
.template-sample-hidden-info .scroll-object-box {margin-top: 10px; height: 460px;}
.select-template-middle .template-sample-hidden-info .mCSB_scrollTools{right: 4px; bottom: 0;}
.select-template-middle .template-sample-hidden-info .mCS-dark.mCSB_scrollTools .mCSB_draggerRail {background-color: #efefef;}
.template-sample-hidden-inner{padding: 0 20px;}
.template-sample-hidden-inner .title{font-size: 14px; line-height: 24px; letter-spacing: -0.5px; color: #333;}
.template-sample-hidden-inner .keyword-wrapper{padding-top: 25px; margin-top: 25px; border-top: 1px solid #e5e5e5;}
.template-sample-hidden-inner .keyword-wrapper .tit{font-size: 14px; color: #999; letter-spacing: -0.5px;}
.template-sample-hidden-inner .keyword-list{margin-top: 15px;}
.template-sample-hidden-inner .keyword-list a{position: relative; display: inline-block; font-size: 14px; line-height: 24px; letter-spacing: -0.5px; color: #666; -webkit-transition: all 0.2s; transition: all 0.2s;}
.template-sample-hidden-inner .keyword-list a:first-child{margin-left: 0;}
.template-sample-hidden-inner .keyword-list a:before{position: absolute; bottom: 0; left: 0; content: ''; width: 100%; height: 1px; background-color: #007aff; opacity: 0; -webkit-transition: all 0.2s; transition: all 0.2s;}
/*.template-sample-hidden-inner .keyword-list a:after{display: inline-block; content: ','; margin: 0 3px;}*/
.template-sample-hidden-inner .keyword-list a[id='before']:after {display: inline-block; content: ','; margin: 0 3px;}
.template-sample-hidden-inner .keyword-list a[id='last']:after {display: inline-block; content: ''; margin: 0 3px;}
.template-sample-hidden-inner .keyword-list a:hover{color: #007aff;}
.template-sample-hidden-inner .keyword-list a:hover:before{opacity: 1;}

.template-list-JS .slick-arrow{position: absolute; top: 50%; margin-top: -25px; width: 50px; height: 50px; background-color: #333; border: 0; -webkit-border-radius: 100%; border-radius: 100%; z-index: 10;}
.template-list-JS .slick-arrow.slick-disabled{visibility: hidden; opacity: 0;}
.template-list-JS .slick-arrow i{font-size: 30px; color: #fff;}
.template-list-JS .slick-prev{left: -40px;}
.template-list-JS .slick-next{right: -40px;}

/* 즐겨찾기 */
.template-bookmark-none-box{padding: 55px 15px; text-align: center; background-color: #f7f7f7;}
.template-bookmark-none-box p{font-size: 16px; line-height: 26px; letter-spacing: -0.75px; color: #333;}
.template-bookmark-none-box p i{font-size: 20px; color: #ffce31;}

/* 키워드 검색결과 */
.talk-sample.result .template-talk-con03{margin-top: 60px;}
.template-list + .gs-custom-paging{padding: 65px 0 50px; clear: both;}
.template-result-none-box{padding: 55px 15px; text-align: center; background-color: #f7f7f7;}
.template-result-none-box p{font-size: 16px; line-height: 26px; letter-spacing: -0.75px; color: #333;}
.template-result-none-box .keyword-list{margin-top: 40px; text-align: center;}
.template-result-none-box .keyword-list li{margin: 5px; display: inline-block; vertical-align: middle;}
.template-result-none-box .keyword-list li a{padding: 0 12px; min-width: 126px; font-size: 16px; line-height: 40px; letter-spacing: -0.75px; color: #fff; display: inline-block; background-color: #aaa; -webkit-border-radius: 5px; border-radius: 5px; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s;}
.template-result-none-box .keyword-list li a:hover{background-color: #4a4adb;}

/* 샘플 불러오기 레이어 팝업 */
.popup-sample-open-btn{margin-top: 10px;}
.myinfo-modal-content.template-sample{width: 940px; overflow: visible;}
.myinfo-modal-content.template-sample .tit-con {-webkit-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;}
.myinfo-modal-content.template-sample .popup-dashboard-btn{padding-top: 10px; padding-bottom: 50px;}

/* 내 친구톡 저장함 */
.ds-cm-main-con.friend-talk .ds-cm-inner{padding-top: 30px;}
.ds-cm-main-con.friend-talk .template-talk-con02 .h40-select .select-title {padding: 0 15px; -ms-background-position-x: 90%; background-position-x: 90%;}
.select-option .tit{padding-left: 10px; font-weight: 500; color: #000; border-top: 1px solid #ddd; border-bottom: none;}
.select-option .tit:hover,
.select-option .tit.selected{background-color: #fff;}
.template-talk-con02 .right .right-item.w350{width: 350px;}
.friend-talk .select-template-middle.more-list .template-list li{margin-bottom: 45px;}
.friend-talk-info-bottom{position: relative; padding-right: 40px;}
/* 20211104 { 메시지 제목 default 2줄 처리 수정 } start  */
.friend-talk-info-bottom .tit{font-size: 15px; line-height: 24px; height: 48px; letter-spacing: -0.5px; color: #000; overflow: hidden; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.friend-talk-info-bottom .date{margin-top: 15px; font-size: 13px; line-height: 1.3; letter-spacing: -0.5px; color: rgba(0,0,0,0.3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/* // 20211104 { 메시지 제목 default 2줄 처리 수정 } end  */
.friend-talk-info-bottom .gs-custom-checkbox{position: absolute; top: 4px; right: 0; margin-right: 0;}
.friend-talk-info-bottom .gs-custom-checkbox .checkbox-item{width: 18px; height: 18px;}
.friend-talk-info-bottom .gs-custom-checkbox .checkbox-item label{width: 18px; height: 18px; line-height: 18px;}
.friend-talk-info-bottom .gs-custom-checkbox .checkbox-item label:before{font-size:15px;}
.friend-talk-info-btn{margin-top: 25px;}
.friend-talk-info-btn a{font-size: 14px;}
/* 삭제 레이어 */
.select-template-delate-con,
.select-template-delate-con02{position: fixed; top: 50%; margin-top: -190px; left: 50%; width: 340px; margin-left: 94px; display: inline-block; padding: 10px 10px 10px 20px; background-color: #333; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 5px 5px 8px -2px rgba(0,0,0,0.17); box-shadow: 5px 5px 8px -2px rgba(0,0,0,0.17); z-index: 1000; -webkit-transition: all 0.3s; visibility: hidden; transition: all 0.3s; opacity:0;filter:Alpha(opacity=0); -webkit-transform: translateY(-50px); transform: translateY(-50px); -webkit-box-sizing: border-box; box-sizing: border-box;}
.select-template-delate-con.open,
.select-template-delate-con02.open{opacity:1.0;filter:Alpha(opacity=100); -webkit-transform: translateY(0); transform: translateY(0); visibility: visible; }
.select-template-delate-con p,
.select-template-delate-con02 p{margin-right: 15px; font-size: 16px; line-height: 30px; font-weight: 500; letter-spacing: -0.5px; color: #fff; display: inline-block;}
.select-template-delate-con .select-template-delate-close{margin-left: 15px; height: 30px; line-height: 30px; font-size: 18px; color: #fff; display: inline-block; vertical-align: middle;}
.select-template-delate-con02 .select-template-delate-close02{float: right; height: 30px; line-height: 30px; font-size: 18px; color: #fff; display: inline-block; vertical-align: middle;}

/* 내 친구톡 저장함 (리스트형) */
.changing-order-btn{font-size: 14px; line-height: 24px; font-weight: 400; letter-spacing: -0.5px;}
.changing-order-btn i{position: relative; top: 1px;}
.text-overflow-ellipsis{text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

/* 내 문자 저장함 (썸네일형) */
.select-template-middle .template-list li .sample.message {background-color: #fff; border: 1px solid #e5e5e5; -webkit-box-sizing: border-box; box-sizing: border-box;}
.phone-box-top.sample-tit .sortation.lms{margin-top: 13px; margin-right: 15px;}
.select-template-middle .template-list li .sample.message .phone-box-bottom-inner{padding-right: 20px;}
.select-template-middle .template-list li .sample.message .phone-box-tab-list ul li {width: auto; margin: 0; margin-left: 5px;}
.select-template-middle .template-list li .sample.message .mCS-dark.mCSB_scrollTools .mCSB_draggerRail {background-color: #eee;}
.select-template-middle .template-list li .sample.message .sample-info{padding: 19px 20px; border: none; border-top: 1px solid #e5e5e5;}


/* 전송 > 문자 전송 */
.template-copy-btn{text-align: center; margin-bottom: 15px;}

/* 전송 > 카카오톡 전송 > 친구톡 > 버튼 */
.button-type-con.on .gs-custom-select .select-title,
.button-type-con.on .gs-custom-select .select-title {color: #000; border-color: #f2f2f2; background-color: #f2f2f2;}
.business-form-tooltip{position: absolute; top: 80px; right: 60px; display: inline-block; -ms-word-break: keep-all; word-break: keep-all;}
.business-form-tooltip i{position: relative; top: 1px; font-size: 18px; font-weight: 400; letter-spacing: -0.2px; color: #4a4adb;}
.business-form-tooltip .cm-tooltip-tit{margin-bottom: 10px;}
.business-form-tooltip .cm-tooltip-txt{position: relative; padding-left: 15px;}
.business-form-tooltip .cm-tooltip-txt span{position: absolute; top: 0; left: 0; display: inline-block;}
.button-type-con.business-form .cm-move-link{margin-top: 10px; display: inline-block; font-size: 14px;}

/* 20211102 { 필터 박스 셀렉트 스타일 코딩 } start  */
.custom-select-open-btn {position: relative;}
.custom-select-open-btn > a{display: block; width: 100% !important; color: #777; text-align: left; vertical-align: middle; border:0; background: url("/common/img/sub/select_arrow.png") no-repeat 90% 50%; display: inline-block; -box-sizing: border-box; cursor: pointer; border-radius:5px; transition:border-color 0.2s, background-color 0.2s; line-height: 38px; padding: 0 15px; font-size: 14px; font-weight: 400; letter-spacing: -0.75px; color:#000; box-sizing: border-box; background-color: #f5f5f5; border: 1px solid #f5f5f5;}
.custom-select-option-con{position: absolute; top: 40px; left: 0; width: 100%; z-index: 998; visibility: hidden; opacity: 0;}
.custom-select-option-con.active{visibility: visible; opacity: 1;}
.custom-select-option-list{border: 1px solid #333; background: #fff;}
.custom-select-option-list li span,
.custom-select-option-list li a{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; padding-left: 10px; display: block; overflow: hidden; cursor: default;}
.custom-select-option-list li span{font-weight: 500; color: #000; border-top: 1px solid #ddd; border-bottom: none;}
.custom-select-option-list li a:hover,
.custom-select-option-list li a.selected {color: #000; background: #eee;}
/* // 20211102 { 필터 박스 셀렉트 스타일 코딩 } end  */

/* 20211104 { 띄어쓰기 없을 시 UI 깨짐 현상 수정 } start  */
.template-sample-info-bottom,
.friend-talk-info-bottom,
.template-sample-hidden-info{-ms-word-break: break-all; word-break: break-all;}
/* // 20211104 { 띄어쓰기 없을 시 UI 깨짐 현상 수정 } end  */
/* ========================================================
	20211018 { 알림톡 샘플 메시지 추가 페이지 } end
======================================================== */

/* 20211116 { 강조 유형 이미지형 추가 } start  */
.registration-file-box{}
.registration-file-box .write-file-list .file a{display: block; float: left; width: calc(100% - 30px);}
.registration-file-box .write-file-list .file p {float: none; width: 100%;}
/* // 20211116 { 강조 유형 이미지형 추가 } end  */




/* ========================================================
* 발신정보관리 :: 팝업모음
======================================================== */
/* ******* 발신번호 재인증 ******* */
.popup-outgoing-con{padding: 30px;}
.popup-outgoing-con .check-list-item {margin-top: 25px;}
.popup-outgoing-tit{margin-bottom: 15px; font-size: 16px; font-weight: 500; letter-spacing: -0.75px; color: #000;}
.popup-outgoing-con .sub-join02-check-list{padding: 0;}
.popup-outgoing-con .sub-join02-check-list{margin-top: 0;}
.popup-outgoing-con .sub-join02-check-list .input-inner .input-con {width: 100%;}
.outgoing-btn-con{margin-top: 30px; text-align: center;}
.outgoing-col3-btn{margin: 0 -7px;}
.outgoing-col3-btn li{width: calc(33.33% - 14px); margin: 0 7px; float: left;}
.outgoing-col3-btn li button{margin: 0;}

/* ******* 발신번호 재인증_휴대폰번호인증 ******* */
.popup-outgoing-con.overseas-login .sub-join02-check-list.login {margin-top: 0;}
.popup-outgoing-con.overseas-login .sub-join02-check-list.login .input-inner .input-con {width: calc(100% - 100px);}

/* ******* 발신번호재인증_ARS인증 ******* */
/* 전화연결중 */
.popup-outgoing-call{padding: 33px 0; text-align: center;}
.popup-outgoing-call .cir{margin: 0 6px; display: inline-block; vertical-align: middle; width: 7px; height: 7px; -webkit-border-radius: 100%; border-radius: 100%;}
.popup-outgoing-call .cir.cir01{background-color: #e5e5e5;}
.popup-outgoing-call .cir.cir02{background-color: #ccc;}
.popup-outgoing-call .cir.cir03{background-color: #999;}
.popup-outgoing-call .cir.cir04{background-color: #000;}
.popup-outgoing-call .txt{margin: 0 14px; display: inline-block; vertical-align: middle; font-size: 16px; font-weight: 500; letter-spacing: -0.75px; color: #000;}
/* 하단 서브 텍스트 */
.popup-outgoing-info{padding-top: 25px; border-top: 1px solid #e5e5e5; letter-spacing: -0.75px; color: #000;}
.popup-outgoing-info .tit{margin-bottom: 5px; font-size: 16px; line-height: 24px; font-weight: 500;}
.popup-outgoing-info .txt{font-size: 14px; line-height: 24px; font-weight: 400;}

/* ******* 발신번호재인증_서류인증 ******* */
.popup-outgoing-con.overseas-login .sub-join02-check-list.login .full .input-inner .input-con {width: 100%; padding-right: 0;}
.popup-outgoing-con.overseas-login .sub-join02-check-list .input-inner .input-con .file-custom-box {padding-right: 140px; width: calc(100% - 140px);}
.popup-outgoing-con.overseas-login .sub-join02-check-list .input-inner .input-con .delete-btn {right: 112px;}

.popup-outgoing-con02, .popup-outgoing-con03{margin-top: 25px;}
.outgoing-info-wrapper{}
.outgoing-info-list{margin: 0 -7px;}
.outgoing-info-list li{width: calc(33.33% - 14px); margin: 0 7px; float: left;}
.outgoing-info-list li a{display: block; background-color: #f5f5f5; -webkit-border-radius:10px; border-radius: 10px; overflow: hidden;}
.outgoing-info-list li .step-tit{padding: 8.5px 20px; padding-right: 10px; background-color: #e5e5e5; height: 50px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.outgoing-info-list li .step-tit img{float: left; height: 33px;}
.outgoing-info-list li .step-tit i{float: right; font-size: 24px; line-height: 33px; color: #000;}
.outgoing-info-list li .step{padding: 8.5px 30px; height: 50px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.outgoing-info-list li .step p{display: inline-block; vertical-align: middle; font-size: 14px; line-height: 33px; font-weight: 400; letter-spacing: -0.25px; color: #000;}
.outgoing-info-list li .step i{display: inline-block; vertical-align: middle; margin: 0 2px; font-size: 18px; line-height: 33px; color: #000; -webkit-transform: rotate(270deg); transform: rotate(270deg);}

.outgoing-info-list.col-1{margin: -5px;}
.outgoing-info-list.col-1 li{width: calc(100% - 10px); margin: 5px;}
.outgoing-info-list.col-1 li a{position: relative; padding-left: 170px;}
.outgoing-info-list.col-1 li .step-tit{position: absolute; width: 170px; top: 0; left: 0;}
.outgoing-info-list.col-1 li .step-tit i{font-size: 18px;}

.popup-outgoing-con03 .outgoing-info-list li .step-tit img{height: 30px;}
.popup-outgoing-con03 .outgoing-info-list li .step-tit{padding: 10px 20px;}

/* ******* 발신번호추가등록신청 ******* */
.myinfo-modal-download {display: inline-block; line-height: 16px; margin-top: 10px;}

/* ******* 발신번호등록(기업) ******* */
.popup-outgoing-check{margin-top: 10px;}
.popup-outgoing-check .gs-custom-checkbox .checkbox-item label{padding-left: 20px; font-weight: 400; font-size:13px; line-height: 20px; letter-spacing:-0.5px;}
.popup-outgoing-check .gs-custom-checkbox .checkbox-item label:before{font-size:18px;}

/* ******* 채널ID등록 ******* */
.myinfo-modal-content .tit-con .txt02.link a{display: inline-block; padding-bottom: 0;}
.popup-outgoing-con.overseas-login .sub-join02-check-list.login .full .input-inner .input-con.talk-id .id-defalt{display: inline-block; width: 15px; text-align: right; font-size: 16px; line-height: 30px; color: #aaa;}
.popup-outgoing-con.overseas-login .sub-join02-check-list.login .full .input-inner .input-con.talk-id input {width: calc(100% - 20px);}
.input-select-wrapper{position: relative;}
.input-select-group{margin: 0 -8px;}
.input-select-group li{width: calc(100% - 16px); margin: 0 8px; float: left; border-radius: 10px;}
.input-select-group li .gs-custom-select .select-title {padding: 0 35px 0 20px; background-position: 97% 50%;}
.popup-outgoing-con .check-list-alert{bottom: -25px; line-height: 25px;}

/* ******* 설문형 문자 발송 - 설문지 등록 영역 ******* */
.survey-content{width: 80%; float: none; margin: 0 auto; margin-bottom: 50px;}