@charset "utf-8";

/* 전체 */
.customerP .inner {max-width: 1200px;}
.customerP .inner.w600 {max-width: 600px;min-height: 500px;}

/* 헤더 */
.customerP .header {border-color: #172121;}
.customerP .header {position: fixed;left: 0;top: 0;}

/* 콘텐츠 */
.customerP .contents.mypage {background: url(/images/mypage/bg_mypage.png) no-repeat center 140px;}
.customerP .contents .contWrap.redBG {background: #FE3E2F;}
.customerP .contents .contWrap {padding-top: 70px;padding-bottom: 0px;}
.customerP .contents .contWrap + .contWrap {padding-top: 0px;padding-bottom: 40px;}

/* 제목 */
.customerP .headingArea {background: #FE3E2F;}

/* 타이틀 */
.customerP .titleArea {position: relative;padding: 31px 0 5px 0;border-bottom: 2px solid #172121;}
.customerP .titleArea h3 {font-size: 24px;font-weight: 900;position: relative;}
.customerP .titleArea h3:before {display: inline-block;width: 50px;height: 50px;margin: -7px 11px 0 0px;content: "";vertical-align: middle;border-radius: 99px;background: url(/images/mypage/mypage_sfix_icon.png) no-repeat;background-color: #172121;box-sizing: border-box;}
.customerP .titleArea h3.user:before {background-position: 13px 12px;}
.customerP .titleArea h3.pointer:before {background-position: -87px 13px;}
.customerP .titleArea h3.message:before {background-position: -291px 11px;}
.customerP .titleArea h3.notice:before {background-position: -389px 13px;}
.customerP .titleArea h3.document:before {background-position: -486px 11px;}
.customerP .titleArea h3.mousepointer:before {background-position: -185px -37px;}

/* 검색영역 */
.customerP .bbsSearchArea {background: #EEEFF0;padding: 30px 0;margin-bottom: 31px;text-align: center;}
.customerP .bbsSearchArea button.bbs {min-width: 99px;height: 40px;padding: 5px 18px;font-size: 16px;border: 2px solid #172121;background: #fff;-webkit-transition: all 0.1s;transition: all 0.1s;}
.customerP .bbsSearchArea button.bbs:hover {color: #FE3E2F; border-color: #FE3E2F;}

/* 탭 메뉴 */
.customerP .tabArea {margin-bottom: 27px;}
.customerP .tabArea .tabMenu {margin-bottom: -2px;}
.customerP .tabArea .tabMenu ul {overflow: hidden;}
.customerP .tabArea .tabMenu ul li {float: left;}
.customerP .tabArea .tabMenu ul li:nth-child(2),
.customerP .tabArea .tabMenu ul li:nth-child(3),
.customerP .tabArea .tabMenu ul li:nth-child(4),
.customerP .tabArea .tabMenu ul li:nth-child(5),
.customerP .tabArea .tabMenu ul li:nth-child(6) {margin-left: -2px;}
.customerP .tabArea .tabMenu ul li a.menu {position: relative;display: table;width: 158px;height: 60px;border: 2px solid #ccc;border-bottom-color: #172121;border-radius: 20px 20px 0 0;text-align: center;-webkit-transition: all 0.1s;transition: all 0.1s;}
.customerP .tabArea .tabMenu ul li a.menu:hover {background: #EEEFF0; text-decoration: none;}
.customerP .tabArea .tabMenu ul li a.menu span {display: table-cell;vertical-align: middle;font-size: 16px;font-weight: 900;}
.customerP .tabArea .tabMenu ul li.selected a.menu {border-color: #172121;border-bottom-color: #fff;z-index: 1;}
.customerP .tabArea .tabMenu ul li.selected a.menu:hover {background: #fff;}

.customerP .tabArea .tabMenu ul.data li a.menu {width: 189px;}

/* 자주묻는 질문 */
.customerP .funcButtonArea {position: relative;margin-bottom: 12px;}
.customerP .funcButtonArea:after {display: block; width: 0; height: 0; content: ""; clear: both;}
.customerP .funcButtonArea .gLeft {float: left;}
.customerP .funcButtonArea .gLeft span.total {font-size: 16px;}

.customerP .faqArea {border-top: 2px solid #172121;border-bottom: 2px solid #172121;margin-bottom: 20px;}
.customerP .faqArea ul {margin: 0px 0px;}
.customerP .faqArea ul li {border-bottom: 1px solid #ccc;-webkit-transition: all 0.1s;transition: all 0.1s;}
.customerP .faqArea ul li:last-child {border-bottom: none;}
.customerP .faqArea ul li:hover {background: #F8F8F8;}
.customerP .faqArea ul li .noResult {padding: 33px 10px;text-align: center;font-size: 16px;font-weight: 500;background: #fff;margin-bottom: -2px;}

.customerP .toggleWrap {}
.customerP .toggleWrap .toggleControl {padding: 10px 50px 10px 20px;position: relative;}
.customerP .toggleWrap .toggleControl span.comt {color: #111111;font-size: 14px;font-family: 'notokr-bold', sans-serif;margin-top: 5px;display: inline-block;}
.customerP .toggleWrap .toggleControl a {position: absolute;right: 0;top: 0;display: block;width: 100%;height: 100%;z-index: 1;}
.customerP .toggleWrap .toggleControl a:after {position: absolute;right: 20px;top: 22px;content:"";width: 14px;height: 8px;vertical-align: middle;background: url(/images/customer/customer_sfix_icon.png) no-repeat;background-position: 0px 0px;}
.customerP .toggleWrap .toggleControl a.open:after {background-position: -50px 0px;}

.customerP .toggleWrap .toggleControl span.question {width: 36px;height: 36px;border-radius: 99px;display:inline-block;vertical-align:middle;font-size: 20px;font-weight: 700;text-align: center;font-family: 'Roboto';padding-top: 4px;background: #E1E2E3;margin-right: 17px;}
.customerP .toggleWrap .toggleControl span.label {position: relative;display: inline-block;font-size: 16px;font-weight: 500;padding-left: 99px;vertical-align: middle;}
.customerP .toggleWrap .toggleControl span.label:before {position: absolute;left: 0px;top: -5px;display:inline-block;font-size: 14px;font-weight: 500;padding-top: 6px;width: 90px;height: 30px;text-align: center;vertical-align:middle;border: 1px solid #ccc;background: #fff;box-sizing: border-box;text-decoration: none;}
.customerP .toggleWrap .toggleControl span.label.info:before {content:"사이트이용";}
.customerP .toggleWrap .toggleControl span.label.inquiry:before {content:"서비스문의";}
.customerP .toggleWrap .toggleControl span.label.payment:before {content:"결제";}
.customerP .toggleWrap .toggleControl span.label.member:before {content:"회원정보";}
.customerP .toggleWrap .toggleControl span.label.etc:before {content:"기타";}

.customerP .toggleWrap .toggleBody {background: #FFF5F4;padding: 21px 76px 39px;border-top: 1px solid #ccc;}
.customerP .toggleWrap .toggleBody p.answer {position: relative;padding-left: 46px;font-size: 16px;font-weight: 500;line-height: 1.5;}
.customerP .toggleWrap .toggleBody p.answer:before {position: absolute;left: 0px;top: -1px;display: inline-block;width: 36px;height: 36px;border-radius: 99px;content: "A";vertical-align: middle;font-size: 20px;font-weight: 700;text-align: center;font-family: 'Roboto';padding-top: 2px;padding-left: 2px;color: #fff;background: #FE3E2F;box-sizing: border-box;}

/* 공지사항 - 목록 */
.customerP .tableArea {margin: 0px 0px;}
.customerP .tableLayout table {border-top: 2px solid #172121;margin-bottom: 20px;}
.customerP .tableLayout table thead th {padding: 10px 0px;border-top: none;border-bottom: none;background: none;font-size: 16px;font-weight: 500;text-align: center;height: 57px;border-bottom: 2px solid #172121;}
.customerP .tableLayout table tbody tr:first-child td {border-top: none;}
.customerP .tableLayout table tbody tr:last-child td {border-bottom: 2px solid #172121;}
.customerP .tableLayout table tbody tr.notice {background: #FFF5F4;}

.customerP .tableLayout table tbody td {padding: 10px 0px;border-top: 1px solid #ccc;border-bottom: none;font-size: 16px;font-weight: 500;text-align: center;height: 57px;}
.customerP .tableLayout table tbody td .label {position: relative;display: block;padding-left: 104px;-webkit-transition: all 0.1s;transition: all 0.1s;}
.customerP .tableLayout table tbody td .label:before {position: absolute;left: 18px;top: -3px;display:inline-block;font-size: 14px;color: #172121;padding-top: 4px;width: 76px;height: 30px;text-align: center;vertical-align:middle;border: 1px solid #ccc;background: #fff;box-sizing: border-box;}
.customerP .tableLayout table tbody td .label.notice:before {content:"공지사항";}
.customerP .tableLayout table tbody td .label.update:before {content:"업데이트";}
.customerP .tableLayout table tbody td .label.contract:before {content:"계약서";}
.customerP .tableLayout table tbody td .label.confirm:before {content:"확인서";}
.customerP .tableLayout table tbody td .label.apply:before {content:"신청서";}
.customerP .tableLayout table tbody td .label.etc:before {content:"기타";}
.customerP .tableLayout table tbody td .label:hover {color: #FE3E2F; text-decoration: none;}
.customerP .tableLayout table tbody td .label:hover span {text-decoration: underline;}

.customerP .tableLayout table tbody td .icon {width: 20px;height: 20px;display:inline-block;vertical-align:middle;font-size: 0;text-indent: -120%;color: transparent;background: url(/images/customer/customer_sfix_icon.png) no-repeat}
.customerP .tableLayout table tbody td .icon.file {background-position: -100px 0;margin-top: -3px;}
.customerP .tableLayout table tbody td .icon.pin {background-position: -148px 2px;margin-top: -3px;}

.customerP .tableLayout table tbody.nodata td {padding: 33px 10px;border-bottom: none !important;}

/* 공지사항 - 상세 */
.customerP .viewArea {border-bottom: 2px solid #172121;margin-bottom: 20px;}
.customerP .viewArea dl dd.subject table {border-top: none;margin-bottom: 0px;}
.customerP .viewArea dl dd.subject table tbody td .label:before {top: 0px;}
.customerP .viewArea dl dd.subject table tbody td .label span {font-size: 20px;color: #172121;text-decoration: none;}
.customerP .viewArea dl dd.subject table tbody td .label:hover span {color: #172121; text-decoration: none;}

.customerP .viewArea dl dd.attachment ul {margin-top: 10px;}
.customerP .viewArea dl dd.attachment ul li {padding: 15px 20px 15px;background: #EEEFF0;}
.customerP .viewArea dl dd.attachment ul li + li {margin-top: 5px;}
.customerP .viewArea dl dd.attachment ul li a {display: inline-block;font-size: 14px;font-weight: 500;-webkit-transition: all 0.1s;transition: all 0.1s;}
.customerP .viewArea dl dd.attachment ul li a:hover {color: #FE3E2F;text-decoration: none;}
.customerP .viewArea dl dd.attachment ul li a:after {display: inline-block;width: 20px;height: 20px;margin: -5px 0px 0px 11px;content: "";vertical-align: middle;background: url(/images/customer/customer_sfix_icon.png) no-repeat;background-position: -200px 0;box-sizing: border-box;}
.customerP .viewArea dl dd.attachment ul li a:hover:after {background-position: -250px 0;}

.customerP .viewArea dl dd.article {padding: 31px 20px;font-size: 16px;font-weight: 500;line-height: 24px;}
.customerP .viewArea dl dd.article p {font-size: 16px;font-weight: 500;line-height: 24px;margin-bottom: 24px;}
.customerP .viewArea dl dd.article p:last-child {margin-bottom: 0px;}
.customerP .viewArea dl dd.article p img {max-width: 100%;}

.customerP .viewButtonArea {text-align: center;margin-bottom: 30px;}
.customerP .viewButtonArea button.cancel {min-width: 120px;height: 50px;padding: 0 35px;-webkit-transition: all 0.3s;transition: all 0.3s;color: #fff;font-size: 20px;border: 2px solid #ccc;background: #EEEFF0;}
.customerP .viewButtonArea button.cancel span {color: #fff;font-size: 20px;font-weight: 900;color: #172121;}
.customerP .viewButtonArea button.cancel:hover {background: #ccc;}

/* 공지사항 - 이전/다음글 */
.customerP .tableLayout table.prevNextList {border-top: 1px solid #ccc;}
.customerP .tableLayout table.prevNextList tbody th {padding: 10px 0px;font-size: 16px;font-weight: 900;text-align: center;background: #fff;}
.customerP .tableLayout table.prevNextList tbody td {font-size: 16px;font-weight: 500;}
.customerP .tableLayout table.prevNextList tbody td span.noData {padding-left: 20px;}
.customerP .tableLayout table.prevNextList tbody tr:last-child td {border-bottom: 1px solid #ccc;}

/* 원격지원 서비스 */
.customerP .notiArea {background: #EEEFF0;position: relative;margin-top: 20px;margin-bottom: 33px;}
.customerP .notiArea ul {padding: 23px 27px 22px;}
.customerP .notiArea ul li {font-size: 16px;font-weight: 500;padding-left: 8px;position: relative;margin-bottom: 5px;}
.customerP .notiArea ul li:last-child {margin-bottom: 0px;}
.customerP .notiArea ul li:before {position: absolute;left: 0px;top: 9px;display:inline-block;content:"";/* margin: -2px 7px 0 0px; */width:2px;height:2px;vertical-align:middle;background: #172121;}

.customerP .remoteInfoArea {margin-bottom: 32px;}
.customerP .remoteInfoArea h6 {font-size: 20px;font-weight: 900;margin-bottom: 10px;}
.customerP .remoteInfoArea ol {padding-left: 20px;list-style: decimal;margin-top: 2px;}
.customerP .remoteInfoArea ol li {font-size: 16px;font-weight: 500;margin-bottom: 5px;}
.customerP .remoteInfoArea span {font-size: 16px;font-weight: 500;padding-left: 4px;}

.customerP .remoteStepArea {position: relative;margin-bottom: 40px;}
.customerP .remoteStepArea ol {overflow: hidden;/* display: table; *//* margin: 0 auto; */}
.customerP .remoteStepArea ol li {float: left;margin-right: 42px;text-align: center;position: relative;width: 180px;height: 180px;border: 2px solid #172121;border-radius: 99px;background: #fff;padding-top: 31px;}
.customerP .remoteStepArea ol li:last-child {margin-right: 0px;}
.customerP .remoteStepArea ol li:after {position: absolute;right: -30px;top: 77px;content:"";width: 14px;height: 22px;vertical-align:middle;background: url(/images/customer/customer_sfix_icon.png) -300px 0;}
.customerP .remoteStepArea ol li:nth-child(3):after {background-position: -350px 0;}
.customerP .remoteStepArea ol li:last-child:after {display: none;}
.customerP .remoteStepArea ol li span {font-size: 16px;font-weight: 700;line-height: 22px;}
.customerP .remoteStepArea ol li span:before {display: block;width: 81px;height: 71px;margin: 0 auto 12px;content:"";vertical-align: middle;box-sizing: border-box;background-repeat: no-repeat;}
.customerP .remoteStepArea ol li span.step1:before {background: url(/images/customer/img_remote01.png) no-repeat;background-position: 0 9px;}
.customerP .remoteStepArea ol li span.step2:before {background: url(/images/customer/img_remote02.png) no-repeat;background-position: 0 19px;}
.customerP .remoteStepArea ol li span.step3:before {background: url(/images/customer/img_remote03.png) no-repeat;background-position: 11px 0px;}
.customerP .remoteStepArea ol li span.step4:before {background: url(/images/customer/img_remote04.png) no-repeat;background-position: 6px 10px;}
.customerP .remoteStepArea ol li.selected {border-color: #FE3E2F;}
.customerP .remoteStepArea ol li.selected span {color: #FE3E2F;}
.customerP .remoteStepArea ol li.selected span:before {color: #FE3E2F;border-color: #FE3E2F;}

.customerP .remoteButtonArea {text-align: center;border-top: 2px solid #172121;padding-top: 20px;margin-bottom: 40px;}
.customerP .remoteButtonArea button.confirm {min-width: 180px;height: 50px;-webkit-transition: all 0.3s;transition: all 0.3s;color: #fff;font-size: 20px;}
.customerP .remoteButtonArea button.confirm span {color: #fff;font-size: 20px;font-weight: 700;}


@media (max-width:1366px) {/* 최대 1366 */
/* 전체 */
.customerP .contents .contWrap {padding-top: 115px;}

/* 탭 메뉴 */
.customerP .tabArea .tabMenu ul li a.menu {width: 151px;}
.customerP .tabArea .tabMenu ul.data li a.menu {width: 181px;}

}





/* prevent css vanishing */
/* prevent css vanishing */
/* prevent css vanishing */
/* prevent css vanishing */
/* prevent css vanishing */
/* prevent css vanishing */
/* prevent css vanishing