/*고객센터*/
@charset "UTF-8";

/* 고객만족도 설문조사 */
.infoBox.survey{padding:24px 16px 32px 16px; background:#def0ed}
.infoBox.survey img{display:block}
.infoBox.survey .logo{max-width:120px; margin:0 auto}
.infoBox.survey h2{max-width:254px; margin:32px auto 0 auto}

.surveyWrap .surveyList{padding:24px 16px 32px 16px; border-bottom:1px solid rgba(0, 0, 0, .16); text-align:center}
.surveyWrap .surveyList dd{padding:16px 0 0 0}
.surveyWrap .surveyList .rateStar{display:table; margin:0 auto; min-width:234px; padding:5px 12px; border-radius:18px; background:#f1f1f1; font-size:0; line-height:0}

.surveyWrap .surveyList .star{position:relative; display:inline-block; width:26px; height:26px; margin:0 8px; overflow:hidden; cursor:pointer}
.surveyWrap .surveyList .star:before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background-image:url('https://img1.kbcard.com/cxh/ia_img/CS/ico_surveyStar_off.png'); background-repeat:no-repeat; background-size:26px; background-position:0 0; transition:all ease 0.3s}
.surveyWrap .surveyList .star:after{content:''; position:absolute; top:100%; left:0; width:100%; height:100%; background-image:url('https://img1.kbcard.com/cxh/ia_img/CS/ico_surveyStar_on.png'); background-repeat:no-repeat; background-size:26px; background-position:0 0; transition:all ease 0.3s}
.surveyWrap .surveyList .star.selected:before{top:-100%}
.surveyWrap .surveyList .star.selected:after{top:0}

.surveyWrap .surveyList .rateTxt{margin:8px 0 0 0; color:#8c949e; font-size:0.875rem; line-height:1.25rem}
.surveyWrap .surveyList .rateWrap.checked .rateTxt{visibility:visible}
.surveyWrap .surveyList .textarea{position:relative; border:1px solid rgba(0, 0, 0, .16); box-sizing:border-box}
.surveyWrap .surveyList .textarea textarea{height:138px; border:0}
.surveyWrap .surveyList .textarea .txt{padding:0 16px 12px 16px; color:#696e76; font-size:0.875rem; line-height:1.25rem; text-align:right}

/* 고객패널 접수채널 신설 */
.fileBox label{display:inline-block;cursor:pointer}
.fileBox input[type="file"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.fileBox input:disabled{color:#26282c;background:#fff}

.btnText.delFile{text-decoration:underline}
.btnText.delFile:after{background-image:url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/basic/24/ico_close_24_000.png)}

/* 200622_추가 제안목록 */
.contArea .adviceList{margin:0 -16px}
.adviceList li{position:relative;padding:12px 52px 12px 90px;border-bottom:1px solid rgba(0, 0, 0, .16)}
.adviceList li a:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%}
.adviceList li a:after{content:'';position:absolute;top:50%;right:16px;width:24px;height:24px;margin-top:-12px;background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/arr/arr_r_24_000.png') no-repeat 0 0;background-size:24px}
.adviceList li .tit{overflow:hidden;display:block;height:1.500em;text-overflow:ellipsis;white-space:nowrap}
.adviceList li .date{display:block;margin-top:4px;font-size:14px;line-height:20px;color:#8c949e}
.adviceList .state{position:absolute;top:50%;left:0;width:74px;height:16px;padding:12px 0;border-right:1px solid rgba(0, 0, 0, .16);margin-top:-20px;line-height:16px;text-align:center;color:#8c949e;font-size:12px}
.adviceList .state.complete{color:#4a79d8;height:40px;padding:0}
.adviceList .state.complete:before{content:'';display:block;width:24px;height:24px;margin:-2px auto 4px;background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/basic/24/ico_check_24_blue1.png') no-repeat 0 0;background-size:24px}
.ios .adviceList .state{padding:14px 0 10px}
.ios .adviceList .state.complete{padding:0}

/* 200622_추가 제안상세 */
.offerDetail_date{margin-top:10px;color:#999;font-size:0.875rem;line-height:1.429em}
.offerDetail_date span{position:relative;padding-left:13px;margin-left:10px}
.offerDetail_date span:before{content:'|';position:absolute;top:-1px;left:0;display:block}
.offerDetail_file{padding:20px 16px;border-bottom:1px solid #e4e9eb;background:#fff;margin-top:-1px}
.offerDetail_file strong{color:#26282c;font-weight:normal}
.offerDetail_file ul li:first-child{margin-top:0}
.offerDetail_file ul li{margin-top:10px}
.offerDetail_file ul li a{display:inline-block;padding-left:16px;color:#26282c;font-size:15px;background:url(https://img1.kbcard.com/cxh/ia_img/common/ico_file.png) no-repeat left 3px;background-size:8px 13px;text-decoration:underline}
.offerDetail_box{width:100%;margin:16px 0;box-sizing:border-box;color: #26282c;font-size:0.938rem}
/* //고객패널 접수채널 신설 */

/* 210217 고객센터 템플릿 변경 추가 */
.csVisual{text-align:center;font-size:1.000rem;color:#26282c;background:#eef1f2 url(https://img1.kbcard.com/cxh/ia_img/CS/img_cs_visual_.png) no-repeat center 27px;background-size:70px 65px;padding-top:115px;padding-bottom:27px}
.csVisual>a{display:block;font-size:24px;margin-top:10px}
.cscenterCont>.cont1{display:table;width:100%;border-top:1px solid #ccc;border-bottom:1px solid #ccc;color:#26282c;position:relative}
.cscenterCont>.cont1:before{content:'';margin-left:-1px;border-left:1px solid #e9e9e9;position:absolute;left:50%;height:50%;top:35px}
.cscenterCont>.cont1:after{content:'';display:block;clear:both}
.cscenterCont>.cont1>div{display:table-cell;position:relative;width:50%;padding:30px 0 60px 15px;letter-spacing:-1px}
.cscenterCont>.cont1>div>a{display:block;position:absolute;left:15px;bottom:30px;font-size:20px;color:#f37111;margin-top:20px}
.cscenterCont>.cscenterList{padding:0 15px;border-bottom:1px solid #ccc}
.cscenterCont>.cscenterList>ul>li{border-bottom:1px solid #ccc}
.cscenterCont>.cscenterList>ul>li:last-child{border-bottom:0}
.cscenterCont>.cscenterList>ul>li>a{display:block;color:#666;padding:23px 0}
.cscenterCont>.cscenterList>ul>li>a span{color:#26282c}
.cscenterCont>.cscenterList>ul>li>a:after{content:'';display:block;clear:both}
.cscenterCont>.listType2{padding:0 20px}
.cscenterCont>.listType2>li{font-size:13px;color:#888}
.csBtm .listType2 li {font-size:13px; color:#888}


.csIntro_list{margin-bottom:-20px}
.csIntro_list>li>a{display:block;position:relative;color:#26282c;padding:16px 40px 16px 16px;font-size:1.000rem}
.csIntro_list li a:after{content:'';display:inline-block;position:absolute;right:16px;top:50%;width:24px;height:24px;margin-top:-12px;background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/arr/arr_r_24_000.png') no-repeat 0 0;background-size:24px}
.csIntro_list>li+li{border-top:1px solid #ccc}
.csIntro_list>li.depth2{font-size:1.000rem;color:#26282c;padding:20px 0 0 20px}
.csIntro_list>li.depth2 .listType1{margin:10px 0}
.csIntro_list>li.depth2 .listType1 li{font-size:15px;margin-top:0}
.csIntro_list>li.depth2 .listType1 li:before{top:50%;margin-top:-2px}
.csIntro_list>li.depth2 .listType1 li a{display:block;position:relative;padding:10px 40px 10px 0;color:#26282c}
.ios .csIntro_list>li>a{padding:18px 40px 14px 16px}
.ios .csIntro_list>li.depth2 .listType1 li a{padding:12px 40px 8px 0}
/* //210217 고객센터 템플릿 변경 추가 */

/* 210217 챗봇 배너 추가 */
.chatbot_banner {position:fixed;right:4.5%;bottom:40px;max-width:380px;width:91%;height:auto;padding:8px 0;border-radius:28px;background:#f46600;box-shadow:0 4px 8px rgba(0, 0, 0, 0.16), 0 0 4px rgba(0, 0, 0, 0.12)}
.chatbot_banner:after {content:'';display:inline-block;position:absolute;left:4.8%;bottom:14.2%;width:69px;height:62px;background:url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/banner/img_chatbot_210216.png)no-repeat 100%/100%;}
.chatbot_banner p {padding:0 40px 0 28%;width:auto;height:40px;color:#fff;font-size:14px;line-height:15px;}
.chatbot_banner p img {width:auto;max-height:100%;}
.chatbot_banner a.close {position:absolute;top:12px;right:12px;display:block;width:32px;height:32px;background:url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/basic/24//ico_close_24_fff.png) no-repeat center center;background-size:32px;border:none;color:transparent}
@media screen and ( max-width : 320px ){
    .chatbot_banner:after {left:3%;}
    .chatbot_banner a.close {right:5px;}
}
/* // 210217 챗봇 배너 추가 */

/* 220128 스마일아이콘 */
.surveyWrap .surveyList.smileList {padding: 32px 16px 24px 16px;}
.surveyWrap .surveyList.smileList .rateStar.rateSmile {padding: 8px 1px 8px 7px; border-radius: 20px;}
.surveyWrap .smileList .rateSmile .smile{width: 24px; height: 24px; margin: 0 20px;}
.surveyWrap .surveyList.smileList .rateWrap.checked .rateTxt{visibility: hidden;}
.surveyWrap .smileList .rateSmile .smile::before, .surveyWrap .smileList .rateSmile .smile::after{background-size: 24px;}
.smileList .rateWrap .rateList {max-width: 328px; margin: 8px auto 0;}
.smileList .rateWrap .rateList ul{max-width: 328px; margin: 0 auto; padding: 0 5px 0 8px; text-align: left; box-sizing: border-box;}
.smileList .rateWrap .rateList ul li{display: inline-block; width: 18%; font-size: 12px; color: #8c949e; line-height: 1.67; text-align: center;}
.smileList .rateWrap .rateList ul li:first-child{margin-right: 7px;}
.smileList .rateWrap .rateList ul li:nth-child(3), .rateList ul li:nth-child(4){margin-right: 2px;}
.smileList .rateWrap .rateList ul li.on label{font-weight: bold; color:#26282c}

/* radioBtn emoji  */
input[type='radio'][class^='emoJi']+label:before {
    background-image: url(https://img1.kbcard.com/cxh/ia_img/CS/emoji_all.png)!important; 
    background-size:280px 58px; background-position: 0 -34px; transition: all ease 0.3s;
animation-direction: reverse;}

input[type='radio'].emoJi01+label:before {background-position: 0 -34px;}
input[type='radio'].emoJi02+label:before {background-position: -64px -34px;}
input[type='radio'].emoJi03+label:before {background-position: -128px -34px;}
input[type='radio'].emoJi04+label:before {background-position: -192px -34px;}
input[type='radio'].emoJi05+label:before {background-position: -256px -34px;}
input[type='radio'][class^='emoJi']:checked+label:before {
    background-image: url(https://img1.kbcard.com/cxh/ia_img/CS/emoji_all.png)!important;
    background-size:280px 58px;
    background-position: 0 0;
}

input[type='radio'].emoJi01:checked+label:before {background-position: 0 0;}
input[type='radio'].emoJi02:checked+label:before {background-position: -64px 0;}
input[type='radio'].emoJi03:checked+label:before {background-position: -128px 0;}
input[type='radio'].emoJi04:checked+label:before {background-position: -192px 0;}
input[type='radio'].emoJi05:checked+label:before {background-position: -256px 0;}

@media screen and (max-width:361px) {
    .surveyWrap .smileList .rateSmile .smile {margin:0 16px;}
    .smileList .rateWrap .rateList ul{padding:0;}
    .smileList .rateWrap .rateList ul li:first-child {width:19%;}
    .smileList .rateWrap .rateList ul li:nth-child(3), .rateList ul li:nth-child(4){margin-right: 0;}
}


/* // 220128 스마일아이콘 */