@charset "UTF-8";

/* 아이디/비밀번호 찾기 */
.find-idpw .tab-content { border: 1px solid #ebebeb; }
.find-idpw .inner { padding: 43px 55px 55px; background-color: #fafafa; }
.find-idpw h4 { margin-bottom: 18px; color: #535353; font-weight: bold; font-size: 20px; }
.find-idpw .srch-wrap { overflow: hidden; }
.find-idpw .srch-wrap .align-left { float: left; width: 405px; font-size: 0; }
.find-idpw .srch-wrap .align-left .option { margin-top: 10px; }
.find-idpw .srch-wrap .align-left .option:first-child { margin-top: 0; }
.find-idpw .srch-wrap .align-left .option label { display: inline-block; width: 100px; color: #444; font-weight: bold; font-size: 14px; line-height: 30px; vertical-align: middle; }
.find-idpw .srch-wrap .align-left .option .first-letter { display: inline-block; width: 27px; color: #000; font-weight: bold; font-size: 14px; line-height: 30px; vertical-align: middle; }
.find-idpw .srch-wrap .align-left .option input[type="text"] { width: 278px; }
.find-idpw .srch-wrap .align-left .option:first-child input[type="text"] { width: 251px; }
.find-idpw .srch-wrap .align-right { float: right; width: 243px; }
.find-idpw .srch-wrap .align-right > a { display: block; padding: 28px 14px 29px; background: #444 url(/images/sub/util/icon-srch.png) no-repeat 175px 29px; }
.find-idpw .srch-wrap .align-right p { margin-top: 15px; }
.find-idpw .srch-wrap .align-right p a { display: inline-block; padding-left: 30px; background: url(/images/sub/util/icon-question.png) no-repeat; color: #997f58; font-size: 12px; line-height: 23px; letter-spacing: -1px; text-decoration: underline; }
.find-idpw .result-wrap { display: none; padding: 22px 0 34px; background: url(/images/sub/util/bg-shadow.png) no-repeat center top; color: #777; font-weight: bold; font-size: 16px; line-height: 1.5; text-align: center; }
.find-idpw .result-wrap p { padding-top: 17px; background: url(/images/sub/util/icon-arrow.png) no-repeat center top; }
.find-idpw .result-wrap em { color: #e70128; font-style: normal; }

/* 로그인 홈 */
.login .heading-group { height: 121px; margin-bottom: 0; border-bottom: 2px solid #323232; }
.login .section-wrap { border: 1px solid #ebebeb; border-top: 0; }
.login .login-wrap { overflow: hidden; }
.login .login-wrap .section { float: left; width: 301px; min-height: 284px; padding: 55px; border-left: 1px dashed #d8d8d8; background-color: #fafafa; }
.login .login-wrap .section:first-child { border-left: 0; }
.login .login-wrap .section h4 { margin-bottom: 18px; color: #e70128; font-size: 20px; }
.login .login-wrap .section .member-area { min-height: 152px; padding-bottom: 13px; }
.login .login-wrap .member-area .input-area > div { margin-top: 11px; }
.login .login-wrap .member-area .input-area label { display: inline-block; width: 89px; color: #444; font-weight: bold; }
.login .login-wrap .member-area .input-area input { width: 190px; }
.login .login-wrap .guest-area h4 { color: #535353; }
.login .login-wrap .guest-area .tab.default li { width: 151px; }
.login .login-wrap .guest-area .tab.default li label { display: inline-block; width: 89px; }
.login .login-wrap .danger { display: none; margin-top: 13px; color: #e70128; }
.login .login-wrap .btn-area { padding-top: 15px; border-top: 1px solid #ebebeb; }
.login .login-wrap .btn-area .remember-id { position: relative; height: 11px; }
.login .login-wrap .btn-area .remember-id input { vertical-align: middle; }
.login .login-wrap .btn-area .remember-id label { vertical-align: middle; }
.login .login-wrap .btn-area .remember-id img { width: 21px; height: 21px; margin-left: 7px; }
.login .login-wrap .btn-area .remember-id .info-balloon { display: none; position: absolute; top: -112px; left: -31px; right: 0; z-index: 10; width: 354px; height: 77px; padding: 16px 15px; background: url(/images/sub/util/info-balloon.png)  no-repeat; line-height: 1.5; letter-spacing: -1px; }
.login .login-wrap .btn-area .remember-id.active .info-balloon { display:block; }
.login .login-wrap .btn-wrap a.btn { display: block; margin-top: 30px; padding: 15px 14px 16px; }
.login .login-wrap .btn-wrap a.btn span { display: inline-block; height: 23px; vertical-align: middle; }
.login .login-wrap .btn-wrap a.btn-login span { padding-left: 22px; background: url(/images/sub/util/icon-login.png) no-repeat; }
.login .login-wrap .btn-wrap a.btn-srch span { padding-left: 25px; background: url(/images/sub/util/icon-srch.png) no-repeat; }
.login .login-wrap .btn-area a.curious { display: inline-block; height: 20px; padding-top: 3px; padding-left: 27px; background: url(/images/sub/util/icon-question.png) no-repeat; color: #997f58; text-decoration: underline; vertical-align: middle; }
.login .login-wrap .tab-content { margin-top: 16px; }
.login .login-wrap .tab-content > div { display: none; }
.login .login-wrap .tab-content label { display:inline-block; width:102px; color: #444; font-weight: bold; font-size: 14px; }
.login .login-wrap .tab-content .homepage { padding: 16px 0; }
.login .login-wrap .tab-content .homepage label span { margin-left: 7px; }
.login .login-wrap .tab-content .homepage input[type=text] { width: 155px; margin-left: 9px; }
.login .login-wrap .tab-content .payer input[type=text] { width: 279px; margin-top: 16px; }
.login .join-wrap { padding: 30px; border-top: 1px solid #ebebeb; background: url(/images/sub/util/bg-shadow.png) no-repeat 0 top; }
.login .join-wrap ul { width: 550px; margin: 0 auto; }
.login .join-wrap li { margin-top: 10px; }
.login .join-wrap li:first-child { margin-top: 0; }
.login .join-wrap li span { display: inline-block; width: 396px; padding-left: 14px; background: url(/images/sub/util/bullet-dot.png ) no-repeat 0 5px; }
.login .join-wrap li a { display: inline-block; min-width: 106px; }

/* 로그인 홈 */
.logingrp .heading-group { height: 121px; margin-bottom: 0; border-bottom: 2px solid #323232; }
.logingrp .section-wrap { border: 1px solid #ebebeb; border-top: 0; }
.logingrp .login-wrap { overflow: hidden; }
.logingrp .login-wrap .section { float: left; width: 301px; min-height: 284px; padding: 55px; border-left: 1px dashed #d8d8d8; background-color: #fafafa; }
.logingrp .login-wrap .section:first-child { border-left: 0; }
.logingrp .login-wrap .section h4 { margin-bottom: 18px; color: #e70128; font-size: 20px; }
.logingrp .login-wrap .section .member-area { min-height: 152px; padding-bottom: 13px; }
.logingrp .login-wrap .member-area .input-area > div { margin-top: 11px; }
.logingrp .login-wrap .member-area .input-area label { display: inline-block; width: 89px; color: #444; font-weight: bold; }
.logingrp .login-wrap .member-area .input-area input { width: 190px; }
.logingrp .login-wrap .guest-area h4 { color: #535353; }
.logingrp .login-wrap .guest-area .tab.default li { width: 151px; }
.logingrp .login-wrap .guest-area .tab.default li label { display: inline-block; width: 89px; }

.logingrp .login-wrap .find-area { padding-top: 30px; border-top: 1px solid #ebebeb; }

.logingrp .login-wrap .danger { display: none; margin-top: 13px; color: #e70128; }
.logingrp .login-wrap .btn-area { padding-top: 15px; border-top: 1px solid #ebebeb; }
.logingrp .login-wrap .btn-area .remember-id { position: relative; height: 11px; }
.logingrp .login-wrap .btn-area .remember-id input { vertical-align: middle; }
.logingrp .login-wrap .btn-area .remember-id label { vertical-align: middle; }
.logingrp .login-wrap .btn-area .remember-id img { width: 21px; height: 21px; margin-left: 7px; }
.logingrp .login-wrap .btn-area .remember-id .info-balloon { display: none; position: absolute; top: -112px; left: -31px; right: 0; z-index: 10; width: 354px; height: 77px; padding: 16px 15px; background: url(/images/sub/util/info-balloon.png)  no-repeat; line-height: 1.5; letter-spacing: -1px; }
.logingrp .login-wrap .btn-area .remember-id.active .info-balloon { display:block; }
.logingrp .login-wrap .btn-wrap a.btn { display: block; margin-top: 30px; padding: 15px 14px 16px; }
.logingrp .login-wrap .btn-wrap a.btn span { display: inline-block; height: 23px; vertical-align: middle; }
.logingrp .login-wrap .btn-wrap a.btn-login span { padding-left: 22px; background: url(/images/sub/util/icon-login.png) no-repeat; }
.logingrp .login-wrap .btn-wrap a.btn-srch span { padding-left: 25px; background: url(/images/sub/util/icon-srch.png) no-repeat; }

.logingrp .login-wrap .btn-area2 { padding-top: 10px; border-top: 0px; }
.logingrp .login-wrap .btn-wrap2 a.btn { display: block; margin-top: 10px; padding: 15px 14px 16px; }
.logingrp .login-wrap .btn-wrap2 a.btn span { display: inline-block; height: 13px; vertical-align: middle; }
.logingrp .login-wrap .btn-wrap2 a.btn-srch span { padding-left: 25px; background: url(/images/sub/util/icon-srch.png) no-repeat; }

.passapp { border: 1px solid #666666; padding: 10px 13px 13px; box-sizing: border-box; margin-top: 10px; background: #fff; }
.passapp.no { margin-bottom: 10px;}
.passapp p { color: #7f5f2e; margin-left: -3px; font-weight: bold; }

.login .login-wrap .guest-area .input-area .both_wrap { margin-top: 11px; }
.login .login-wrap .guest-area .input-area label { display: inline-block; width: 89px; color: #444; font-weight: bold; }
.login .login-wrap .guest-area .input-area input { width: 155px; height: 25px;}
.login .login-wrap .guest-area .input-area .both_wrap label { line-height: 30px; margin-left: 3px; }
.loginWrap.login-wrap .passapp .btn-wrap a.btn { margin-top: 10px; background: #7800ff; line-height: 50px;}
.login .login-wrap .passapp .btn-wrap a.btn { padding: 7px 10px}
.loginWrap.login-wrap .passapp.no .btn-wrap a.btn { background-color: #fff; border: 1px solid #666; color: #666; line-height: 1.2;}

/* popup-pass창 */
.popup-pass-wrap { top: 50%; left: 50%; margin: 30px 0 0 -20px; z-index: 100001; }
.popup-pass { width: 460px; height: 540px; border: 10px solid #f9f9f9; background: #fff; padding: 30px; box-sizing: border-box;}
.popup-pass .txt-wrap { margin-top: 20px;  }
.popup-pass .txt-wrap p { text-align: center; font-size: 20px; color: #000; font-weight: bold; }
.popup-pass .txt-wrap p span { color: #e70128; }
.popup-pass .txt-wrap .stxt-wrap { background: #f9f9f9; padding: 15px; margin-top: 20px; box-sizing: border-box; }
.popup-pass .txt-wrap .stxt-wrap ul.step { margin-bottom: 15px; }
.popup-pass .txt-wrap .stxt-wrap ul.step li { padding: 0 0 10px 0; }
.popup-pass .txt-wrap .stxt-wrap ul.step li:last-child {padding-bottom: 0px; }
.popup-pass .txt-wrap .stxt-wrap ul.step li span.step-num { color: #a9a9a9; }
.popup-pass .txt-wrap .stxt-wrap ul li b.brown { color: #7f5f2e; }
.popup-pass .txt-wrap .stxt-wrap ul li b.black { color: #222222; }
.popup-pass .txt-wrap .stxt-wrap ul.explain { border-top: 1px solid #e8e8e8; padding-top: 15px; box-sizing: border-box; }
.popup-pass .txt-wrap .stxt-wrap ul.explain li { padding: 0 0 10px 10px; position: relative; }
.popup-pass .txt-wrap .stxt-wrap ul.explain li:last-child { padding-bottom: 0px; }
.popup-pass .txt-wrap .stxt-wrap ul.explain li::before { 
	content: '·' ;
	position: absolute;
	left: 0px;
	font-weight: bold;
}
.popup-pass .btn-area { margin-top: 10px;}
.popup-pass .btn-area a { 
	display: block;
	padding: 15px 14px 16px;
	background: #7800ff;
	color: #fff;
	font-size: 15px;
	text-align: center;
	font-weight: bold;
}

.popup-pass .btn-area button { 
	display: block;
	padding: 15px 14px 16px;
	background: #7800ff;
	color: #fff;
	font-size: 15px;
	text-align: center;
	font-weight: bold;
}

.popup-pass .list > li {
	overflow: hidden;
	padding-bottom: 10px;	
}
.popup-pass .list li div {
	display: table;
	border-radius: 5px;
	height: 75px;
	float: left;
}
.popup-pass .list li div.tit {
	width: 180px;
	background: #bda580;
}
.popup-pass .list li div.tit h6 { 
	font-size: 14px;
	color:#fff;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	line-height: 18px;
}
.popup-pass .list li div.txt { 
	margin-left: 10px;
	width: calc(100% - 190px);
	background: #f5f5f5;
}
.popup-pass .list li div.txt ul {
	padding-left: 20px;
	display: table-cell;
	vertical-align: middle;
}
.popup-pass .list li div.txt ul li { 
	color: #333333;
	line-height: 20px;
}

/* 홈페이지번호와 납입자 번호 소개 */
.num-info { width: 620px; }
.num-info .section { padding: 30px 0; border-bottom: 1px solid #e8e8e8; }
.num-info .section:first-child { padding-top: 0; }
.num-info h5 { color: #535353; font-size: 16px; }
.num-info .tip { margin-top: 8px; color: #808080; line-height: 1.5; }
.num-info .img-area { margin-top: 20px; padding-top: 20px; border-top: 2px solid #444; }
.num-info .btn-wrap { margin-top: 23px; text-align: center; }
.num-info.koone .section { padding: 30px 0 0; border-bottom: 0; }

/* 회원 로그인 */
.member-login .heading-group { margin-bottom: 0; border-bottom: 0; }
.member-login .section-wrap { border: 1px solid #ebebeb; border-top: 2px solid #323232; }
.member-login .section-wrap .login-wrap { padding: 53px 55px; background-color: #fafafa; }
.member-login .section-wrap .login-wrap h4 { margin-bottom: 18px; color: #535353; font-weight: bold; font-size: 20px; }
.member-login .section-wrap .login-wrap .title-area p { color: #808080; }
.member-login .section-wrap .login-wrap .login-area { position: relative; margin-top: 20px; padding-top: 20px; border-top: 1px solid #ebebeb; }
.member-login .section-wrap .login-wrap .login-area ul { width: : }
.member-login .section-wrap .login-wrap .login-area ul li { margin-top: 10px; }
.member-login .section-wrap .login-wrap .login-area ul li:first-child { margin-top: 0; }
.member-login .section-wrap .login-wrap .login-area ul label { display: inline-block; width: 80px; color: #444; font-weight: bold; font-size: 14px; }
.member-login .section-wrap .login-wrap .login-area a.btn-login { position: absolute; top: 20px; right: 0; padding: 27px 65px 28px; background: #e70128 url(/images/sub/util/icon-login.png) no-repeat 163px 27px; font-weight: bold; font-size: 18px; }
.member-login .section-wrap .login-wrap .remember-id { position: relative; margin-top: 12px; padding-left: 80px; }
.member-login .section-wrap .login-wrap .remember-id a.icon-info { display: inline-block; margin-left: 7px; }
.member-login .section-wrap .login-wrap .remember-id .info-balloon { display: none; position: absolute; top: -110px; left: 48px; width: 354px; height: 73px; padding: 17px 15px; background: url(/images/sub/util/info-balloon.png) no-repeat; color: #909090; font-size: 12px; line-height: 1.7; }
.member-login .section-wrap .login-wrap .remember-id .info-balloon.active { display: block; }
.member-login .section-wrap .join-wrap { padding: 34px 0 37px; border-top: 1px solid #ebebeb; background: url(/images/sub/util/bg-shadow.png) no-repeat; }
.member-login .section-wrap .join-wrap ul { width: 548px; margin: 0 auto; }
.member-login .section-wrap .join-wrap ul li { margin-top: 10px; width: 533px; padding-left: 15px; background: url(/images/sub/util/bullet-dot.png) no-repeat 0 9px; color: #909090; vertical-align: middle; }
.member-login .section-wrap .join-wrap ul li:first-child { margin-top: 0; }
.member-login .section-wrap .join-wrap ul li span { display: inline-block; width: 395px; }

/* 비회원 요금조회 */
.guest-charge .srch-wrap p { margin-bottom: 17px; color: #333; font-size: 14px; }
.guest-charge .srch-wrap p a { margin-left: 10px; }
.guest-charge .srch-wrap .srch { overflow: hidden; padding: 20px 30px; border-top: 2px solid #6f6f6f; background-color: #f9f9f9; }
.guest-charge .srch-wrap .srch .align-left { float: left; }
.guest-charge .srch-wrap .srch .align-left .select { width: 130px; }
.guest-charge .srch-wrap .srch .align-middle { float: left; }
.guest-charge .srch-wrap .srch .align-middle h5 { float: left; margin-left: 10px; margin-right: 10px; color: #444; font-weight: bold; font-size: 14px; line-height: 30px; }
.guest-charge .srch-wrap .srch .align-middle .select { width: 90px; }
.guest-charge .srch-wrap .srch .align-right { float: right; }
.guest-charge .srch-wrap .srch .align-right h5 { float: left; margin-left: 10px; margin-right: 10px; color: #444; font-weight: bold; font-size: 14px; line-height: 30px; }
.guest-charge .srch-wrap .srch .align-right .date { float: left; width: 300px; margin-right: 10px; font-size: 0; }
.guest-charge .srch-wrap .srch .align-right .date .select { width: 130px; font-size: 14px; }
.guest-charge .srch-wrap .srch .align-right .date .to { display: inline-block; width: 25px; font-size: 14px; line-height: 30px; text-align: center; vertical-align: middle; }
.guest-charge .srch-wrap .tip { margin-top: 10px; padding-right: 30px; font-size: 12px; text-align: right; }
.guest-charge .list { margin-top: 45px; }
.guest-charge .list .btn-wrap { margin-bottom: 15px; text-align: right; font-size: 0; }
.guest-charge .list .btn-wrap a { margin-left: 10px; }
.guest-charge .list .btn-wrap a:first-child { margin-left: 0; }
.guest-charge .list .btn-wrap .btn-m2 { height: 17px; padding: 4px 14px 5px; }
.guest-charge .custom thead tr > * { padding: 11px 5px 12px; }
.guest-charge .custom tbody tr > * { padding: 11px 5px 12px; }
.guest-charge .paging { margin-top: 30px; }

.guest-charge .srch-wrap .srch .align-right .date_j { float: left; width: 150px; margin-right: 10px; font-size: 0; }
.guest-charge .srch-wrap .srch .align-right .date_j .select { width: 130px; font-size: 14px; }
.guest-charge .srch-wrap .srch .align-right .date_j .to { display: inline-block; width: 25px; font-size: 14px; line-height: 30px; text-align: center; vertical-align: middle; }

.guest-charge .srch-wrap .logout {margin-top: 10px; font-size: 14px; text-align: right; margin-bottom: 15px; text-decoration: underline;}

/* 회원가입 */
.join .heading-group { height: 121px; }
.join  h4 { margin-bottom: 10px; color: #7f5f2e; font-size: 21px; }
.join .join-wrap { margin-top: 30px; }
.join .join-wrap .join-tab { overflow: hidden; }
.join .join-wrap .join-tab li { float: left; width: 412px; }
.join .join-wrap .join-tab li a { display: block; width: 413px; height: 219px; }
.join .join-wrap .join-tab li a.member-type1 {  background: url(/images/sub/util/join-type-imge1.png) no-repeat 0 0; }
.join .join-wrap .join-tab li a.member-type2 {  background: url(/images/sub/util/join-type-imge2.png) no-repeat 0 0; }
.join .join-wrap .join-tab li a.member-type3 {  background: url(/images/sub/util/join-type-imge3.png) no-repeat 0 0; }
.join .join-wrap .join-tab li a:hover { background-position: 0 -219px; }
.join .join-wrap .join-tab li.active a { background-position: 0 -219px; }
.join .join-wrap .join-content { padding: 47px 70px; border: 1px solid #ebebeb; border-top: 2px solid #58585a; }
.join .join-wrap .join-content .section { display: none; }
.join .join-wrap .join-content .section .tip { overflow: hidden; }
.join .join-wrap .join-content .section .tip { overflow: hidden; }
.join .join-wrap .join-content .section .tip p { float: left; color: #898989; font-size: 14px; line-height: 1.7; }
.join .join-wrap .join-content .section .tip p em { color: #252525; font-weight: bold; font-style: normal; }
.join .join-wrap .join-content .section .tip span { float: right; padding-left: 35px; background: url(/images/sub/util/icon-question.png) no-repeat; color:#997f58; text-decoration: underline; line-height: 1.5; }
.join .join-wrap .join-content .input-area { margin-top: 28px; }
.join .join-wrap .join-content .input-area > div { margin-top: 10px; }
.join .join-wrap .join-content .input-area > div:first-child { margin-top: 0; }
.join .join-wrap .join-content .input-area label { display: inline-block; width: 152px; color: #444; font-weight: bold; font-size: 14px; }
.join .join-wrap .join-content .input-area input { width: 509px; }
.join .join-wrap .join-content .input-area .danger { display: none; margin-top: 12px; margin-left: 152px; color: #e70128; }
.join .join-wrap .join-content .btn-wrap { margin-top: 30px; padding-top: 30px; border-top: 1px solid #e3e3e3; text-align: center; }
.join .join-wrap .join-content .btn-wrap a.btn-join { width: 271px; padding: 15px 14px 16px; }
.join .join-wrap .join-content .btn-wrap span { padding-left: 31px; background: url(/images/sub/util/icon-join.png) no-repeat; }

.join .join-wrap .join-area { width: 300px; padding: 0px 0px 0px 196px; text-align: left;}
.join .join-wrap .join-area .input-area .both_wrap { margin-top: 11px; }
.join .join-wrap .join-area .input-area label { display: inline-block; width: 89px; color: #444; font-weight: bold; }
.join .join-wrap .join-area .input-area input { width: 155px; height: 25px;}
.join .join-wrap .join-area .input-area .both_wrap label { line-height: 30px; margin-left: 3px; }
.joinWrap.join-wrap .join-area .passapp .btnwrap a.btn { margin-top: 10px; background: #7800ff; line-height: 50px;}
.join .join-wrap .join-area .passapp .btn-wrap a.btn { padding: 7px 10px}
.joinWrap.join-wrap .join-area .passapp.no .btnwrap a.btn { background-color: #fff; border: 1px solid #666; color: #666; line-height: 1.2;}

div[class*="join"] .steps { overflow: hidden; margin-bottom: 32px; }
div[class*="join"] .steps li { float: left; width: 269px; height: 88px; margin-left: 5px; text-indent: -9999px; }
div[class*="join"] .steps li:first-child { margin-left: 0; }
div[class*="join"] .steps li.step1 { background: url(/images/sub/util/join-step1.png) no-repeat; }
div[class*="join"] .steps li.step2 { background: url(/images/sub/util/join-step2.png) no-repeat; }
div[class*="join"] .steps li.step3 { background: url(/images/sub/util/join-step3.png) no-repeat; }
div[class*="join"] .steps li.step4 { background: url(/images/sub/util/join-step4.png) no-repeat; }
div[class*="join"] .steps li.active { background-position: 0 -88px; }

/* 회원가입 - 01 약관동의 */
.join1 .title { overflow: hidden; margin-bottom: 32px; }
.join1 .title h4 { float: left; color: #333; font-weight: bold; font-size: 20px; }
.join1 .title p  { float: left; margin-left: 10px; color: #ff6200; font-size: 14px; line-height: 24px; }
.join1 .title p strong { font-weight: normal; }
.join1 .section { margin-top: 60px; }
.join1 .section:first-child { margin-top: 0; }
.join1 .section h5 { margin-bottom: 14px; color: #444; font-size: 16px; }
.join1 .section .content-box { overflow-x: hidden; overflow-y: scroll; height: 135px; border: 1px solid #cfcfcf; border-top: 2px solid #323232; }
.join1 .section .content-box .inner { width: 753px; padding: 30px 25px; color: #959595; font-size: 14px; line-height: 1.8; word-break: break-all; }
.join1 .section .agree-wrap { padding: 15px 25px; border: 1px solid #cfcfcf; border-top: 0; background-color: #f4f4f4; }
.join1 .section .agree-wrap label { color: #e70128; vertical-align: middle; cursor: pointer; }
.join1 .section .total-check-wrap { padding: 15px 25px; border-top: 0; background-color: #FF6200; }
.join1 .section .total-check-wrap label { color: #fff; font-size: 16px; cursor: pointer; }
.join1 .section .total-check-wrap label em { font-style: normal; font-weight: bold; }
.join1 .btn-wrap { margin-top: 30px; text-align: center; font-size: 0; }
.join1 .btn-wrap a { margin-left: 10px; font-size: 16px; }
.join1 .btn-wrap a:first-child { margin-left: 0; }

/* 회원가입 - 02 본인인증 */
.join2 .title { overflow: hidden; margin-bottom: 32px; }
.join2 .title h4 { float: left; color: #333; font-weight: bold; font-size: 20px; }
.join2 .title p  { float: left; margin-left: 10px; color: #ff7c00; font-size: 14px; line-height: 24px; }
.join2 .title p strong { font-weight: normal; }
.join2 .section { overflow: hidden; border: 1px solid #ebebeb; border-top: 2px solid #323232; }
.join2 .section .group { float: left; width: 301px; padding: 55px; border-left: 1px dashed #d8d8d8; background-color: #fafafa; text-align: center; }
.join2 .section .group:first-child { border-left: 0; }
.join2 .section .group h5 { color: #535353; font-size: 20px; }
.join2 .section .group p { margin-top: 20px; padding-bottom: 118px; color: #808080; letter-spacing: -1px; }
.join2 .section .group p.ipin { background: url(/images/sub/util/icon-ipin.png) no-repeat 50% 50px; }
.join2 .section .group p.phone { background: url(/images/sub/util/icon-phone.png) no-repeat 50% 50px; }
.join2 .section .group .btn-wrap { padding-top: 20px; border-top: 1px solid #e3e3e3; }
.join2 .section .group .btn-wrap a { width: 122px; font-weight: normal; }
.join2 .information { overflow: hidden; padding: 37px 56px 32px; border: 1px solid #ebebeb; border-top: 0; background: #fff url(/images/sub/util/bg-shadow.png) no-repeat center top; }
.join2 .information h5 { float: left; width: 70px; color: #464646; font-size: 14px; line-height: 1.8; }
.join2 .information p { float: left; width: 641px; color: #909090;  line-height: 1.8; }

/* 회원가입 - 03 정보입력 */
.join3 .section { margin-top: 66px; }
.join3 .section:first-child { margin-top: 0; }
.join3 .section .desc p { float: left; margin-bottom: 18px; color: #333; font-weight: bold; font-size: 16px; }
.join3 .section .desc p em { color: #e70128; font-style: normal; }
.join3 .section .desc .tool-tip { float: right; position: relative; }
.join3 .section .desc .help-balloon { display: none; position: absolute; top: 26px; right: 0; width: 539px; height: 131px; padding: 21px 28px 10px; background: url(/images/sub/util/join-balloon.png) no-repeat; }
.join3 .section .desc .help-balloon em { margin-bottom: 5px; font-weight: bold; font-style: normal; }
.join3 .section .desc .help-balloon li { font-size: 12px; line-height: 1.5; letter-spacing: -1px; }
.join3 .section .desc .help-balloon > li { margin-top: 15px; }
.join3 .section .desc .help-balloon > li:first-child { margin-top: 0; }
.join3 .section .table table td .warning { display: none; margin-top: 5px; color: #e70128; font-size: 13px; line-height: 1.5; }
.join3 .section .table table td .success { display: none; margin-top: 5px; color: #11CA00; font-size: 13px; line-height: 1.5; }
.join3 .section .table table th { padding-left: 33px; }
.join3 .section .table table th.check { padding-left: 33px; background: #f9f9f9 url(/images/sub/util/bullet-dot-red.png) no-repeat 20px 50%; }
.join3 .section .custom1 table tr > * { text-align: left; }
.join3 .section .custom1 table td input[type="text"] { width: 188px; }
.join3 .section .custom2 table tr > * { text-align: left; }
.join3 .section .custom2 table td input[type="text"] { width: 188px; }
.join3 .section .custom2 table .name { color: #333; font-weight: bold; }
.join3 .section .custom2 table .phone-area td { font-size: 0; }
.join3 .section .custom2 table .phone-area td .select { width: 120px; font-size: 13px; }
.join3 .section .custom2 table .phone-area td input[type="text"] { width: 92px; }
.join3 .section .custom2 table .tel-area td .dash,
.join3 .section .custom2 table .phone-area td .dash { display: inline-block; width: 24px; font-size: 13px; line-height: 30px; text-align: center; vertical-align: middle; }
.join3 .section .custom2 table .email-area td { font-size: 0; }
.join3 .section .custom2 table .email-area td .select { width: 120px; margin-left: 12px; font-size: 13px; }
.join3 .section .custom2 table .email-area td input[type="text"] { width: 188px; }
.join3 .section .custom2 table .email-area td .at { display: inline-block; width: 32px; font-size: 13px; line-height: 30px; text-align: center; vertical-align: middle; }
.join3 > .btn-wrap { margin-top: 30px; font-size: 0; text-align: center; }
.join3 > .btn-wrap a { margin-left: 10px; font-size: 16px; }
.join3 > .btn-wrap a:first-child { margin-left: 0; }

/* 회원가입 - 04 가입완료 */
.join4 .section { padding-bottom: 201px; border-bottom: 1px solid #e1e1e1; background: url(/images/sub/util/join-bg-complete.png) no-repeat center bottom; }
.join4 .section p { padding-top: 22px; text-align: center; }
.join4 .section p .txt1 { display: block; color: #444; font-weight: bold; font-size: 42px; letter-spacing: -1px; }
.join4 .section p .txt1 em { color: #e62f4b; font-style: normal; }
.join4 .section p .txt2 { display: block; margin-top: 11px; color: #464646; font-size: 14px; letter-spacing: -1px; }
.join4 .section p .txt2 em { color: #ff7c00; font-style: normal; }
.join4 .section p .txt3 { display: block; margin-top: 8px; color: #959595; font-size: 12px; letter-spacing: -1px; }
.join4 .btn-wrap { margin-top: 30px; font-size: 0; text-align: center; }
.join4 .btn-wrap a { margin-left: 10px; font-size: 16px; }
.join4 .btn-wrap a:first-child { margin-left: 0; }

/* 이용약관 */
.terms .heading-group { height: 121px; }
.terms h4 { margin-bottom: 22px; color: #333; font-weight: bold; font-size: 16px; }
.terms .terms-wrap { overflow-x: hidden; overflow-y: scroll; height: 417px; padding: 40px 20px 40px 30px; border: 1px solid #e8e8e8; border-top: 2px solid #6f6f6f; line-height: 1.7; }
.terms .terms-wrap .section { padding-top: 25px; }
.terms .terms-wrap .section:first-child { padding-top: 0; }
.terms .terms-wrap h5 { margin-bottom: 10px; color: #333; font-weight: bold; font-size: 16px; }
.terms .terms-wrap h5 .article { display: inline-block; margin-right: 12px; padding-right: 12px; background: url(/images/sub/util/terms-bar.png) no-repeat right 7px; }
.terms .terms-wrap ul li span { display: inline-block; width: 735px; vertical-align: top; }
.terms .terms-wrap ul li span.num { width: 20px; }
.terms .terms-wrap .version { margin-top: 50px; text-align: right; }
.terms .terms-wrap .version span { color: #333; font-weight: bold; }
.terms .terms-wrap .version span:first-child { margin-right: 18px; padding-right: 18px; background: url(/images/sub/util/terms-bar.png) no-repeat right 2px; }
   
/* 개인정보 처리방침 */
.policy .heading-group { height: 121px; }
.policy .version { position: relative; margin-bottom: 22px; }
.policy .version h4 { color: #333; font-weight: bold; font-size: 16px; }
.policy .version .select { position: absolute; right: 0; bottom: -3px; }
.policy .policy-wrap { overflow-x: hidden; overflow-y: scroll; height: 497px; border: 1px solid #e8e8e8; border-top: 2px solid #6f6f6f; line-height: 1.8; }
.policy .policy-wrap .notice { padding: 40px 30px; background-color: #f9f9f9; color: #333; font-weight: bold; font-size: 14px; }
.policy .policy-wrap .content { padding: 40px 48px 40px 30px; }
.policy .policy-wrap .content .section .download-list { overflow: hidden; padding: 49px 40px 97px }
.policy .policy-wrap .content .section .download-list li.align-left { float: left; text-align: left; }
.policy .policy-wrap .content .section .download-list li.align-right { float: right; text-align: right; }
.policy .policy-wrap .content .section .download-list li.line2 { margin-top: 30px; }
.policy .policy-wrap .content .section .download-list li .title { display: inline-block; margin-right: 10px; color: #333; font-weight: bold; font-size: 15px; line-height: 40px; letter-spacing: -1px; vertical-align: middle; }
.policy .policy-wrap .content .section .download-list li a { min-width: 0; padding: 11px 58px 12px 30px; background-image: url(/images/sub/common/icon-download.png); background-repeat: no-repeat; background-position: 104px 12px; vertical-align: middle; }
.policy .section { margin-top: 30px; }
.policy .section:first-child { margin-top: 0; }
.policy h5 { margin-bottom:8px; color:#ff6309; font-size:110%; font-weight:bold;line-height:140%}
.policy .group li { list-style:none !important;padding:2px 0 2px 16px}
.policy .group li span { display:inline;margin-top:3px;margin-left:-16px}
.policy  ul.cercle li { list-style:none !important;padding:2px 0 2px 16px !important}
.policy  ul.cercle li span { display:inline;margin-top:3px;margin-left:-16px !important}
.policy  ul.line li { list-style:none !important;padding:1px 0 1px 9px !important}
.policy  ul.line li span { display:inline;margin-top:3px;margin-left:-9px !important}
.policy  ul.dot li { list-style:none !important;padding:1px 0 1px 7px !important}
.policy  ul.dot li span { display:inline;margin-top:3px;margin-left:-7px !important}
.policy  .ml7 { margin-left:7px}
.policy  .ml10 { margin-left:10px}
.policy  .custom { margin-top: 10px; margin-left:10px }
.policy  .custom tbody th { padding: 11px 10px 12px; color: #555; font-weight:normal; }
.policy  .custom tbody td { padding: 11px 10px 12px; color: #555; }
.policy  .custom tbody th.left,.custom tbody td.left { text-align: left; }
.policy  .policy_move { width: 100%;text-align: center;font-weight: bold; }

/* 사이트맵 */
.sitemap .section { margin-top: 80px; }
.sitemap .section h4 { margin-bottom: 20px; color: #7f5f2e; font-weight: bold; font-size: 34px; }
.sitemap .section .list { overflow: hidden; border-top: 1px solid #7f5f2e; }
.sitemap .section .list.column { margin-top: 100px; }
.sitemap .section .list > li { float: left; width: 118px; padding-top: 25px; }
.sitemap .section .list > li:first-child { width: 117px; }
.sitemap .section .list > li h5 { margin-bottom: 15px; color: #333; font-size: 14px; }

/* 나래에너지서비스(O&M) 추가 시작 */
.naraeonm.sitemap .section .list > li { float: left; width: 165px; padding-top: 25px; }
.naraeonm.sitemap .section .list > li:first-child { width: 165px; }
/* 나래에너지서비스(O&M) 추가 종료 */

/*엔솔브 에너지캐시백 추가 */
.energy { margin-top: 30px; }
.recipient { background: #f9f9f9; border: 1px solid #e8e8e8; padding: 20px 30px; box-sizing: border-box; }
.recipient li { margin-bottom: 10px; }
.recipient li:last-child { margin-bottom: 0px; }
.recipient li span { font-size: 14px; font-weight: bold; }
.recipient li span.tit { display: inline-block; height: 26px; border-radius: 13px; text-align: center; background: #333333; color: #fff; padding: 4px 13px 5px; margin-right: 10px; box-sizing: border-box }
.recipient li span.txt { color: #ff6309; }
.agreement { }
.agreement h4 { font-size: 16px; color: #333; margin-top: 30px;}
.agreement .wrap { border: 1px solid #e8e8e8; border-top: 2px solid #6f6f6f; background: #f9f9f9; font-size: 14px; color: #333333; }
.agreement .wrap ol { margin: 40px 30px 40px 45px;}
.agreement .wrap ol > li { font-weight: bold;  list-style: decimal; margin-bottom: 25px; line-height: 24px; }
.agreement .wrap ol > li:last-child { margin-bottom: 0px; }
.agreement .wrap ol > li > ul  { margin-top: 10px; }
.agreement .wrap ol > li > ul > li { font-weight: normal; color: #666666; }
.agreement .wrap .check { border-top: 1px solid #e8e8e8; background: #fff; padding: 15px; font-weight: bold; }
.agreement .wrap .check span  { color: #e70128; }
.agreement .wrap .check input { border: 1px solid #a0a0a0; width: 18px; height: 18px; vertical-align: middle; margin-right: 10px; }
.btnWrap { margin-top: 30px; text-align: center; }
.btnWrap a + a { margin-left: 10px; }

/* 엔솔브 에너지캐시백 popup style */
.energycashback  { width: 550px; }
.energycashback .bg { background: #f9f9f9; font-size: 14px; padding: 30px; font-weight: bold;  }
.energycashback .bg ol { margin: 20px 0 0; }
.energycashback .bg ol li { margin-bottom: 20px; line-height: 24px; color: #333; }
.energycashback .bg ol li span { font-weight: normal; color: #666; word-spacing: -3px;display: inline-block; margin-left: 20px; }
.energycashback .bg ol li:last-child { margin-bottom: 0px; }
.energycashback .bg p { font-size: 15px; color: #7f5f2e; text-decoration: underline; }
.energycashback .btn-wrap {  margin-top: 30px; text-align: center; font-size: 0; }
.energycashback .btn-wrap .btn { min-width: 78px;} 
.energycashback .btn-wrap a + a { margin-left: 10px; }

/* 20250919 PASS 수정 css */
.login .login-wrap .section .member-area p,
.login .login-wrap .section .guest-area p { font-size: 14px; word-spacing: -2px; }
.login .login-wrap .member-area .input-area label { font-size: 14px; }

. { border: 1px solid #666666; padding: 10px 13px 13px; box-sizing: border-box; margin-top: 10px; background: #fff; margin-bottom:15px; }
. p { margin-left: 0px; font-size: 14px; }

.login .login-wrap .guest-area .new .input-area .both_wrap label { margin-left: 0px; font-size: 14px;}
.login .login-wrap .guest-area .input-area input {
    width: 183px;
    height: 30px;
    box-sizing: border-box;
}
.joinWrap.join-wrap .join-area .passapp.new .input-area {  margin-top:0px;  }
.joinWrap.join-wrap .join-area .passapp.new .input-area input {     width: 180px;
    height: 30px;
    box-sizing: border-box; } 


.agree-popup { width: 620px; }
.agree-popup .section p { font-size: 15px; font-weight: bold; color: #222; margin-bottom: 10px;}
.agree-popup .section ul { padding: 10px 0 30px; }
.agree-popup .section ul li { font-size: 14px; margin-bottom: 10px; position: relative; padding-left: 15px; }
.agree-popup .section ul li span { color: #7f5f2e; font-weight: bold; text-decoration: underline; }
.agree-popup .section ul li:before { 
    content: '';
    display: block; 
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #555;
    position: absolute;
    left: 4px; 
    top: 6px; 
}
.agree-popup .btn-wrap { text-align: center; border-top: 1px solid #e8e8e8; padding-top: 20px; }

.sply-invoice .login-wrap .section.supply-new {
    float: none;
    width: 100%;
    min-height: 0px;
    padding: 45px 65px 50px;
    box-sizing: border-box;
}
.sply-invoice .login-wrap .section h4 span { font-size: 14px; color:#666; font-weight: normal; display: inline-block; margin-left: 10px; }
.sply-invoice .join-pass .passapp.new .input-area input { background: #fff; }
.sply-invoice .login-wrap .nopassapp .btn-wrap a.btn { margin-top: 15px; }