@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700&display=swap");

html {width: 100%; height: 100%;}
body {position: relative; height: 100%; font-family: "Noto Sans KR", "Malgun Gothic", sans-serif; font-weight: 400; font-size: 14px; color: #555; letter-spacing: -.5px; word-break: keep-all; line-height: 22px; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
body, header, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, table, tr, th, td, a, input, span, section, article {margin: 0; padding: 0; box-sizing: border-box; word-break: keep-all;}
ul, ol, li {list-style: none;}
img, fieldset {border: none; vertical-align: top;}
em {font-style: normal;}
legend,caption {position: absolute; top: 0; left: 0; z-index: -1; color: transparent; width: 0; height: 0; text-indent: -9999px;}
textarea,button {vertical-align: middle;}
textarea { color: #222; resize: none; overflow-y: auto; -ms-overflow-style: auto;}
select {width: 100%; font-size: 14px; font-family: "Noto Sans KR", "Malgun Gothic", sans-serif; font-weight: 300; color: #555; vertical-align: middle; letter-spacing: -.75px; border: 0; background: transparent; -webkit-appearance: none; appearance: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
select::-ms-expand {display: none;}
input, textarea {width: 100%; font-size: 14px; font-family: "Noto Sans KR", "Malgun Gothic", sans-serif; font-weight: 400; color: #222; vertical-align: middle; letter-spacing: -.6px; border: 0; background: transparent; -webkit-appearance: none; appearance: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
option {padding: 10px;}
input[type="radio"], input[type="checkbox"] {padding: 0; height: auto; border: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
input[type=text]::-ms-clear {display: none;}
input::-webkit-input-placeholder {font-family: "Noto Sans KR", "Malgun Gothic", sans-serif; font-weight: 300; font-size: 14px; color: #999;}
input:-ms-input-placeholder {font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;font-weight: 300; font-size: 14px; color: #999;}
input::-ms-input-placeholder {font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;font-weight: 300; font-size: 14px; color: #999;}
input::placeholder {font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;font-weight: 300; font-size: 14px; color: #999;}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input[type=number] {-moz-appearance: textfield;}
input[type=password]::placeholder {font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;font-weight: 300; font-size: 14px; color: #999;}
textarea::-webkit-input-placeholder {font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;font-weight: 300; font-size: 14px; color: #999;}
textarea:-ms-input-placeholder {font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;font-weight: 300; font-size: 14px; color: #999;}
textarea::-ms-input-placeholder {font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;font-weight: 300; font-size: 14px; color: #999;}
textarea::placeholder {font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;font-weight: 300; font-size: 14px; color: #999;}
input:focus::-webkit-input-placeholder {color: transparent;}
input:focus:-ms-input-placeholder {color: transparent;}
input:focus::-ms-input-placeholder {color: transparent;}
input:focus::placeholder {color: transparent;}
textarea:focus::-webkit-input-placeholder {color: transparent;}
textarea:focus:-ms-input-placeholder {color: transparent;}
textarea:focus::-ms-input-placeholder {color: transparent;}
textarea:focus::placeholder {color: transparent;}

a {text-decoration: none; color: inherit;}
a:hover, a:focus, a:active {text-decoration: none;}
table {width: 100%; border-collapse: collapse;}
button {overflow: visible; padding: 0; margin: 0; font-size: 14px; font-family: "Noto Sans KR", "Malgun Gothic", sans-serif; font-weight: 400; white-space: nowrap; border: none; cursor: pointer; background: none;}
button:active {outline: none;}
button::-moz-focus-inner {padding: 0; border: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block; position: relative;}
body.dimd {overflow: hidden;}
body.short-list {overflow: hidden;}
body.gnbdimd:after{position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; content: ""; background-color: rgba(0,0,0,0.1);}
.clear:after {display: block; content: ""; clear: both;}
.w100 {width:100px !important;}
.w110 {width:110px !important;}
.w154 {width:154px !important;}
.w160 {width:160px !important;}
.w190 {width:190px !important;}
.w280 {width:280px !important;}
.w420 {width:420px !important;}
.w500 {width: 500px !important;}
.w570 {width: 570px !important;}
.w580 {width: 580px !important;}
.wfull {width: 100% !important;}
.pt0 {padding-top: 0 !important;}
.pt30 {padding-top: 30px !important;}
.mt0 {margin-top: 0 !important;}
.mt6 {margin-top: 6px !important;}
.mt8 {margin-top: 8px !important;}
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mt60 {margin-top: 60px !important;}
.mt70 {margin-top: 70px !important;}
.mt80 {margin-top: 80px !important;}
.mt100 {margin-top: 100px !important;}
.mt-20 {margin-top: -20px !important;}
.mb0 {margin-bottom: 0 !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}
.ml6 {margin-left: 6px !important;}
.ml10 {margin-left: 10px !important;}
.ml18 {margin-left: 18px !important;}
.ml30 {margin-left: 30px !important;}
.blind {width: 100%; height: 100%; font-size: 1px; color: transparent; line-height: 1; letter-spacing: -10px;}
.abbr {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.float-left{float: left !important;}
.float-right{float: right !important;}
.flex-box {display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.flex-box.__center { -webkit-justify-content: center; justify-content: center; }
.flex-box .warmgray-txt {margin-bottom: -10px}
.font-eng{font-family: "Nunito Sans", "Noto Sans KR" !important;}
.align-center {text-align: center !important;}
.align-left {text-align: left !important;}
.align-right {text-align: right !important;}
.point-color {color: #009bfa !important;}
.bg-white {background-color: #fff !important;}
.bg-gray {background-color: #fafafa !important;}
#wrap {width: 100%; min-width: 1080px; max-width: 100%; overflow: hidden;}
.inner{position: relative; margin: 0 auto; width: 1080px;}
.inner:after{display: block; content: ""; clear: both;}
.inner.sm-type {width: 500px;}
.swiper-slide {backface-visibility: hidden;}

/*Border Line*/
.line-full {border: 1px solid #eee !important;}
.line-left {border-left: 1px solid #eee !important;}
.line-right {border-right: 1px solid #eee !important;}
.line-top {border-top: 1px solid #eee !important;}
.line-bottom {border-bottom: 1px solid #eee !important;}
.slash {color: #eee; margin: 0 20px;}

/* 스크롤 모션 */
.scrollMotion{transform: translateY(100px); opacity: 0;}
.scrollMotion.active {transform: translateY(0); opacity: 1; transition: all 0.4s ease-out;}

.fixed header{position: fixed; top: -104px; left: 0; right: 0; width: 100%; transition: top 0.3s ease;}
.fixed.scl header{top: 0;}
.fixed #content{margin-top: 104px;}

/* Skip Navigation */
#skipNavi a {position: absolute; top: -9999px; z-index: 9999; background: #009bfa; color: #fff; text-align: center;}
#skipNavi a:hover, 
#skipNavi a:focus {display: block; top: 0; width: 100%; padding:5px 0;}

header{position: relative; z-index: 10; margin: 0 auto; border-bottom: 1px solid rgba(0,0,0,0.1); background-color: #fff;}
header:after{display: block; content: ""; clear: both;}
/* header > .inner{padding-top: 35px;} */
header .top-header{position: absolute; top: 0; right: 0;}
header .top-header a{display: inline-block; padding: 20px 10px; font-size: 12px; font-weight: 300; color: #555; line-height: 1;}
header .top-header a:last-child{padding-right: 0;}
header .top-header a:focus,
header .top-header a:hover{color: #222;}
/* header .header{padding-top: 20px;} */
header .header:after{display: block; content: ""; clear: both;}
header .logo{float: left; margin-top: 41px; width: 172.5px; height: 20px;}
header .logo a {display: block; width: 165px; height: 20px; background: url(../images/logo-lpoint-y.png) 0 0/100% auto no-repeat; }
header .logo img{width: 100%;}
header .nav{float: left; margin-left: 145px;}
header .nav .depth1{position: relative; display: block; float: left;}
header .nav .depth1 > a{position: relative; display: block; padding: 41px 35px; font-size: 18px; color: #222; font-weight: 500; letter-spacing: -1px;}
header .nav .depth1:hover a{color: #009bfa;}
header .nav .depth1:hover > a:after {content: ""; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); height: 1px; width: calc(100% - 60px); background-color: #009bfa;}
header .nav .depth1 > a.active{color: #009bfa;}
header .nav .eng{font-family: "Nunito Sans", "Noto Sans KR"; font-weight: 600 !important; letter-spacing: 0;}
header .nav .depth1 .depth2{position: absolute; /* top: 70px; */ top: 126px; left: 34px; z-index: 1; display: none; width: 160px;}
header .nav .depth1 .depth2 a{display: inline-block; padding: 6px 0; font-size: 16px; color: #555; letter-spacing: -1px;}
header .nav .depth1 .depth2 a:hover{color: #009bfa;}
header .nav .depth1 .depth2 a.active{color: #009bfa;}
/* header .utils-menus a + a {margin-left: 20px;}
header .utils-menus a img{width: 100%;} */
header .utils-menus {float: right; display: -ms-flex; display: flex; margin-top: 40px;}
header .utils-menus .bf-log a + a,
header .utils-menus .at-log a + a {margin-left: 20px;}
header .utils-menus .ico-btn-wrap {margin-left: 30px;}
header .utils-menus .ico-btn-wrap a {position: relative; display: block; float: left; width:30px; height: 26px; text-align: center;}
header .utils-menus .ico-btn-wrap a + a {margin-left: 20px;}
header .utils-menus .ico-btn-wrap a .name {position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); display: inline-block; width: 51px; height: 17px; cursor: default; pointer-events: none; font-size: 11px; line-height: 17px; color: #999; letter-spacing: -.5px; background-color: #f4f4f4; border-radius: 9.5px; opacity: 0; transition: all .2s ease-out;}
header .utils-menus .ico-btn-wrap a:focus .name,
header .utils-menus .ico-btn-wrap a:hover .name {bottom: -23px; opacity: 1;}
header .utils-menus .ico-btn-wrap a:nth-child(1) {background: url(../images/ico-custom-service-center.png) 0 0/100% auto no-repeat;}
header .utils-menus .ico-btn-wrap a:nth-child(2) {background: url(../images/ico-card-added.png) 0 0/100% auto no-repeat;}
header .nav-bg{position: absolute; top: 105px; left: 0; display: none; width: 100%; height: 255px; background-color: #fff;}
#location{position: absolute; top: 20px; left: 0; right: 0; margin: auto; width: 1080px; z-index: 2;}
#location li{position: relative; float: left; padding-right: 25px;}
#location li:after{position: absolute; top: 10px; right: 9px; content: ""; width: 5px; height: 8px; background: url(../images/ico-switcharrow.png) no-repeat 0 0; background-size: 5px 8px;}
#location li a{font-size: 12px; color: #999; font-weight: 300;}
#location li:last-child:after{display: none;}
#location li:last-child a{color: #555; font-weight: 400;}

#content{position: relative; padding-top: 98px; padding-bottom: 125px; width: 100%;}
#content.no-pd-bm{padding-bottom: 0;}

/* heading */
h2.title{position: relative; z-index: 2; font-family: "Nunito Sans", "Noto Sans KR"; font-size: 34px; font-weight: 300; color: #222; line-height: 48px; letter-spacing: -2px;}
h2.title.fixed{position: fixed; top: 50px;}
h3.sub-title {margin-top: 30px;}
.hgroup {position: relative;}
.hgroup.between {display: -ms-flex; display: flex; justify-content: space-between; align-items: baseline;}
.hgroup .h3 {margin: 50px 0 20px; font-size: 20px; line-height: 30px; font-weight: 500; color: #222; letter-spacing: -1px;}
.hgroup:first-child .h3 {margin-top: 0;}
.hgroup .h3.type2 {margin-bottom: 30px; font-size: 34px; line-height: 44px; letter-spacing: -2px; color: #222; font-weight: 600;}
.hgroup .h3.type3 {margin: 0; font-size: 20px; line-height: 28px; color: #222; font-weight: 300;}
.hgroup .h3.type4 {margin: 0; font-size: 24px; line-height: 34px; color: #222; font-weight: 600;}
.hgroup .h4 {font-size: 16px; font-weight: 500; color: #222;}
.hgroup .sub-txt {margin-top: 10px; font-size: 14px; line-height: 24px; font-weight: 300; color: #222;}

.form-group{display: flex;}
.form-group.case-cs .form-select{margin-right: 10px; width: 210px;}
.form-group.case-cs .form-text{margin-right: 10px; width: 350px;}
.form-group.case-qst .form-text{margin-right: 10px; width: 570px;}
.form-group.phone .form-select{margin-right: 10px; width: 120px;}
.form-group.phone .form-text{margin-right: 10px; width: 270px;}
.form-group .form-select, .form-group .form-text{margin-right: 10px;}
.error-msg{display: none; position: absolute; left: 0; top: 100%; /*transform: translateY(0px);*/ font-size: 12px; color: #e02020; letter-spacing: 0; line-height: 20px;}
.wrong .error-msg{display: block;}
.wrong .form-text,
.wrong .form-select,
.wrong.form-select,
.wrong.form-text-area,
.wrong.form-text {border-color: #e02020;}
.focused .form-text,
.focused .form-select,
.focused.form-select,
.focused.form-text-area,
.focused.form-text {border-color: #009bfa;}

/* 폼 셀렉트 */
.form-select{position: relative; height: 42px; border: 1px solid #d8d8d8; border-radius: 5px; background: url(../images/ico-down-arrow.png) no-repeat right+20px center #fff; background-size: 12px auto;}
.form-select select{padding: 5px 20px; width: 100%; height: 100%; outline: 0;}
.form-select select:invalid {color:#999}
.form-select select [disabled] {color:#999}
.form-select select option {color:#555}

/* sort select */
.sort-select {position: relative; display: inline-block;}
.sort-select:after {content:""; position: absolute; z-index:0; right:20px; top: 50%; transform: translateY(-50%); width:0px; height: 0px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #666;}
.sort-select select {position: relative; z-index: 2; padding: 0 40px 0 20px; color: #222; font-size: 14px; font-weight: 400;}

/* 폼 인풋 text */
.form-text {position: relative; height: 42px; border: 1px solid #d8d8d8; border-radius: 5px; background-color: #fff; /*overflow: hidden;*/}
.form-text:after {content: ""; clear:both; display: block; height: 0;}
.form-text input {padding: 5px 20px; height: 100%; border-radius: 5px; outline: 0;}
.form-text.timer{width: 400px;}
.form-text .timer{position: absolute; top: 9px; right: 18px; padding-left: 20px; font-family: "Nunito Sans", "Noto Sans KR"; font-size: 14px; color: #009bfa; background: url(../images/ico-time.png) no-repeat 0 2px; background-size: 17px 17px;}
input:disabled {background-color: #f5f5f5; color: #d2d2d2;}
span.dash {text-align: center; height: 42px; line-height: 39px;}
/* ==주민등록, 카드번호*/
.form-special .form-text {display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center;}
.form-special .dash {width: 10px;}
.form-special .form-text input {font-family: "Nunito Sans", "Noto Sans KR";}
.form-special .form-text .error-msg {width: 100%;}
.form-social-id .form-text input {width: calc(50% - 8px); text-align: center;}
.form-social-id .box-person2 {width: calc(50% - 8px); text-align: center; height: 40px;}
.form-social-id .box-person2 input {display: inline-block; height: 40px; line-height: 41px; width: 10px; padding:0; vertical-align: top;}
.form-social-id .social-second::placeholder {font-size: 10px; color: rgba(34, 34, 34, 0.2); letter-spacing: 3px;}
.form-social-id .box-person2 span {display: inline-block; height: 40px; line-height: 40px; font-size: 10px; color: rgba(34, 34, 34, 0.2);letter-spacing: 3px;}
.form-card .form-text input {width: calc(25% - 8px); text-align: center;}
/* == 인풋 + 버튼*/
.form-button {position: relative; padding-right: 90px;}
.form-button .btn-medium {position: absolute; width: 80px; right:0; top: 0; margin-left: 10px;}
.form-button > .form-text {width: 100%;}
/* == 휴대폰인증*/
.form-certify {position: relative; padding: 0 90px 0 160px;}
.form-certify > .form-text {width: 100%;}
.form-certify .choose-phone {position: absolute; width: 150px; left:0; top: 0;}
.form-certify .btn-medium {position: absolute; width: 80px; right:0; top: 0;}
/* == 이메일*/
.form-email {position: relative; padding-right: 346px;}
.form-email > .form-text {width: 100%;}
.form-email .box-abs {position: absolute; top: 0; right:0; width: 346px; display: -ms-flexbox; display: flex; align-items: center;}
.form-email .dash {display: inline-block; width: 28px; text-align: center;}
/* == 휴대폰입력*/
.form-phone {position: relative; display: -ms-flex; display: flex; justify-content: space-between; align-items: center;}
.form-phone .choose-phone {width: 174px;}
.form-phone > .form-text {width: 184px; display: inline-block;}
.form-phone .dash {width: 19px;}
/* ==SMS 수신동의*/
.form-sms:after {content:""; clear: both; display: block;}
.form-sms .form-rad {float: left; width: 220px;}
.form-sms .form-chk {float: left; }
/* == 비회원일 경우 생년월일 입력 */
.form-birth {position: relative; display: -ms-flex; display: flex; align-items: center;}
.form-birth .year, .form-birth .month, .form-birth .day {margin-right: 10px; width: 118px;}
.form-birth > .form-text {width: 184px; display: inline-block;}
.form-birth .dash {width: 19px;}
.form-birth .form-rad{margin-left: 20px;}
.form-birth .form-rad .radio{width: 80px;}

.flex-input {position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center;}
.flex-input .form-text {width: auto;}
.flex-input .error-msg {width: 100%;}
.flex-input .box-btn{position: absolute; top: 50%; right: 0; transform: translateY(-50%); margin-top: 0;}

.input-timer .time {position: absolute; right: 20px; top: 12px; display: inline-block; height: 17px; line-height: 17px; padding-left: 25px; color: #009bfa; font-family: "Nunito Sans", "Noto Sans KR"; background: url(../images/ico-time.png) no-repeat; background-size: 17px 17px;}

.form-text-area {position: relative; height: 220px; border: 1px solid #d8d8d8; border-radius: 5px;}
.form-text-area textarea {padding: 14px 20px; width: 100%; height: 100%; box-sizing: border-box;}

select:focus,
select:hover,
input:focus, 
input:hover,
textarea:focus,
textarea:hover {outline: none !important;}

/* 폼 체크박스 */
.form-chk {position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.form-chk .checkbox {position: relative; margin-right: 20px;}
.form-chk .checkbox:last-child {margin-right: 0;}
.form-chk input {position: absolute; left: 0; top: 0; z-index: 1; width: 20px; height: 20px; opacity: 0; cursor: pointer;}
/* .form-chk input:focus{outline: 1px solid #009bfa !important;} */
.form-chk input + label {position: relative; display: inline-block; padding-left: 25px; font-size: 13px; color: #222; line-height: 18px; font-weight: 400; cursor: pointer; background: url(../images/ico-check-s.png) 2px 1px no-repeat; background-size: 16px 16px;}
.form-chk input + label.bold{font-size: 14px; font-weight: 400;}
.form-chk input + label:before {content: ""; display: block; position: absolute; left: 4px; right: auto; top: 8px;  width: 0; height: 2px; border-radius: 2px; background-color: #009bfa; transform: rotate(45deg); transform-origin: left bottom;}
.form-chk input + label:after {content: ""; display: block; position: absolute; left: 10px; right: auto; top: 12px; width: 0; height: 2px; border-radius: 2px; background-color: #009bfa; transform: rotate(-50deg); transform-origin: left bottom;}
.form-chk input:checked + label {/* background: url(../images/ico-check-s-on.png) left top 2px no-repeat; background-size: 16px 16px;*/}
.form-chk input:checked + label:before {width: 7px; transition: width .1s ease-out;}
.form-chk input:checked + label:after {width: 11px; transition: width .2s ease-in; transition-delay: .1s;}
.form-chk input:disabled + label {color: #c5c5c5;}
.form-chk.circle-chk input + label {padding-left: 40px; font-weight: 500; color: #222; font-size: 14px; line-height: 20px; background: url(../images/ico-checkbox.png) 0 0 no-repeat; background-size: 20px 20px; cursor: pointer;}
.form-chk.circle-chk input + label:before {display: none;}
.form-chk.circle-chk input:checked + label {background: url(../images/ico-checkbox-on.png) 0 0 no-repeat; background-size: 20px 20px;}
.form-chk.circle-chk input:checked + label:after {display: none;}
.form-chk.circle-chk input:disabled + label {cursor: default; color: #c8c8c8;}
.form-chk.square input {width: 20px; height: 20px;}
.form-chk.square input + label {padding-left: 28px; font-size: 14px; color: #555; line-height: 20px; background: url(../images/ico-check-square.png) left top no-repeat; background-size: 20px 20px;}
.form-chk.square input + label:before {left: 4px; top: 9px;}
.form-chk.square input + label:after {left: 10px; top: 13px;}
.form-chk.square input:checked + label {/* background: url(../images/ico-check-square-on.png) right top no-repeat; background-size: 20px 20px;*/}
.form-chk.square .checkbox {margin-right: 16px;}
.form-chk.square .checkbox:last-child {margin-right: 0;}
.form-chk.square:not(.used-disabled) input:disabled + label {background:none; color: #c8c8c8;}
.form-chk.square:not(.used-disabled) input:disabled + label:before {left: 0; top: 0; width: 18px; height: 18px; border: 1px solid #d8d8d8; background-color: #eee; border-radius: 5px; transform: rotate(0deg);}
.form-chk.square:not(.used-disabled) input:disabled + label:after {display: none;}
.form-chk.square .box-btn{margin-top: 0;}

.form-chk.square2 input {opacity: 1; left: 0; top: 2px; z-index: 0; width: 20px; height: 20px; border: 1px solid #e8ecef; border-radius: 5px; outline: 0px transparent !important; transition: border .2s ease;}
.form-chk.square2 input:checked {border-color: #009bfa;}
.form-chk input[type="checkbox"]:focus-visible + label {outline: 2px solid #000;}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .form-chk input[type="checkbox"]:focus + label {outline: 1px dotted #999;}
}

.form-rad {position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.form-rad .radio {position: relative; width: 110px;}
.form-rad input {position: absolute; left: 0; top: 0; z-index: 1; width: 20px; height: 20px; opacity: 0; cursor: pointer;}
.form-rad input + label {position: relative; display: inline-block; padding-left: 25px; font-size: 14px; color: #555; line-height: 20px; /*font-weight: 300; background: url(../images/ico-check-s.png) left top 2px no-repeat; backround-size: 16px 16px;*/ cursor: pointer;}
.form-rad input + label:before {content: ""; box-sizing: border-box; display: block; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border: 1px solid #d8d8d8; border-radius: 50%; transition: border .1s ease-out;}
.form-rad input + label:after {content: ""; box-sizing: border-box; display: block; position: absolute; left: 10px; top: 10px; width: 0px; height: 0px; background-color: #009bfa; border-radius: 50%; transition: all .1s ease-out;}
.form-rad input:checked + label {/* background: url(../images/ico-check-s-on.png) left top 2px no-repeat; background-size: 16px 16px;*/}
.form-rad input:checked + label:before {border: 1px solid #009bfa; background-color: #fff;}
.form-rad input:checked + label:after {top: 5px; left: 5px; width: 10px; height: 10px;}
.form-rad input:disabled {cursor: default;}
.form-rad input:disabled + label {cursor: default; color: #c8c8c8;}
.form-rad input:disabled + label:before {border: 1px solid #d8d8d8; background-color: #eee;}
.form-rad input:disabled:checked + label:after {background-color: #c5c5c5;}
.form-rad.tab-radio {padding: 6px; height: 50px; background-color: rgba(0,0,0,.06); border-radius: 5px;}
.form-rad.tab-radio .radio {position: relative; margin-right: 0; width: 50%;}
.form-rad.tab-radio .radio input {position: absolute; left: 0; top: 0; width: 100%; height: 100%; cursor: pointer;}
.form-rad.tab-radio .radio input + label {position: relative; display: inline-block; padding-left: 0; width: 100%; height: 100%; color: #222; font-size: 14px; text-align: center; line-height:38px; font-weight: 300; border-radius: 5px; background: none;}
.form-rad.tab-radio .radio input + label:before,
.form-rad.tab-radio .radio input + label:after {display: none;}
.form-rad.tab-radio .radio input + label span {position: relative;}
.form-rad.tab-radio .radio input:checked + label {background-image: none; background-color: #fff;}
.form-rad input[type="radio"]:focus-visible + label {outline: 2px solid #000;}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .form-rad input[type="radio"]:focus + label {outline: 1px dotted #999;}
}

/* tab */
.tab-list{position: relative; width: 100%; /* border-bottom: 1px solid rgba(0,0,0,0.1); */}
.tab-list:before{position: absolute; bottom: 0; left: 0; content: ""; width: 100%; height: 1px; background-color: rgba(0,0,0,0.1);}
.tab-list a{position: relative; display: block; float: left; padding: 13px 30px 13px; /*font-family: "Nunito Sans", "Noto Sans KR";*/ font-size: 16px; font-weight: 300; color: #555; letter-spacing: -.4px}
.tab-list a.active{color: #009bfa; font-weight: 700;/* letter-spacing: 0px*/}
.tab-list:not(.circle) a.active:after{position: absolute; bottom: -1px; left: 0; display: block; content: ""; width: 100%; height: 3px; border-radius: 3px; background-color: #009bfa;}
.tab-list.circle{border-bottom: 0;}
.tab-list.circle:before{display: none;}
.tab-list.circle a{padding: 5px 14px 7px; margin-right: 10px; font-size: 14px; line-height: 1; color: #555; letter-spacing: -.5px; border: 1px solid #eee; border-radius: 18px; background-color: #fff; transition: all 0.2s ease;}
.tab-list.circle a.active{color: #fff; border: 1px solid #009bfa; background-color: #009bfa;}
.tab-list.swiper-container{padding-bottom: 2px;}
.tab-list.swiper-container:before{bottom: 2px;}
.tab-list.swiper-container:after{position: absolute; top: 0; right: 0; z-index: 1; content: ""; display: block; width: 80px; height: 100%; background: linear-gradient(to right, transparent, #fff);}
.tab-list .swiper-slide{width: auto;}

.tab-masonry{ border: 1px solid #d8d8d8; /*border-top: 1px solid #eee; border-left: 1px solid #eee;*/ border-radius: 15px; overflow: hidden;}
.tab-masonry ul {display: -ms-flex; display: flex; flex-wrap: -ms-wrap; flex-wrap: wrap; margin: 0  -1px -1px 0;}
.tab-masonry ul li {width: 20%; box-sizing: border-box;}
.tab-masonry ul li:nth-child(5n) .btn {border-right: 0;}
.tab-masonry .btn{display: block; padding: 12px 0;  font-size: 14px; color: #555; text-align: center; border-right: 1px solid #eee; border-bottom: 1px solid #eee;}
.tab-masonry .btn.active{font-weight: 700; color: #009bfa; background-color: #f6f6f6;}

/* 리스트 */
.icon-new{transform: translateY(-12px); display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: #009bfa;}
.board-list .board-detail{margin-bottom: 14px; color: #999; font-size: 14px; line-height: 22px;}
.board-list .board-detail .period{float: left; letter-spacing: 0; font-family: "Nunito Sans", "Noto Sans KR";}
.board-list .board-detail .total{float: left; height: 26px; line-height: 26px;}
.board-list .board-detail .period + .total {float: right}
/* .board-list .board-detail .total span{font-weight: 500;} */
.board-list .board-detail .sort-select {height: 26px; margin-left: 20px; border-left: 1px solid #eee;}
.board-list .board-detail .sort-select select {height: 26px; line-height: 26px; vertical-align: top;}
.board-list .board-detail .add-price{margin-left: 10px;}
.board-list .board-detail .extinct {position: relative; float: left; color: #222; font-weight: 500; padding-right: 20px; margin-right: 20px;}
.board-list .board-detail .extinct:after {content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 20px; display: inline-block; background-color: #eee;}
.board-list .board-detail .extinct span {font-family: "Nunito Sans", "Noto Sans KR"; color: #009bfa;}
.board-list .board-detail .list-vline li + li {margin-left: 18px; padding-left: 20px;}
.board-list .board-detail .list-vline li .add-price {color: #222; margin-left: 0;}
.board-list .board-detail .list-vline li .point-color {font-weight: 500;}
.board-list .board{border-top: 2px solid #555;}

    /* 이용내역조회 > 포인트탭 */
.board-list .board li{display: table; width: 100%; border-bottom: 1px solid #eee; font-size: 14px;}
.board-list .board li .date{display: table-cell; padding:0 20px; font-family: "Nunito Sans", "Noto Sans KR"; color: #999; vertical-align: middle;}
.board-list .board li .date strong{display: inline-block; padding-right: 5px; font-weight: 500;}
.board-list .board li .brand {display: table-cell; color: #222;}
.board-list .board li .subject{display: table-cell; padding:22px 20px; font-size: 14px; color: #222; vertical-align: middle; word-break: break-all;}
.board-list .board li .point{display: table-cell; padding:0 20px; font-family: "Nunito Sans", "Noto Sans KR"; font-size: 14px; font-weight: 600; text-align: right; vertical-align: middle;}
.board-list .board li .sticker{margin-right: 5px;}
.board-list .board li .desc{display: table-cell; padding:0 20px; font-size: 14px; color: #999; text-align: center; vertical-align: middle; word-break: break-all;}
.board-list .board li .line-through{text-decoration: line-through; color: #999 !important;}
.board-list .board li .num{display: table-cell; padding:0 20px; font-family: "Nunito Sans", "Noto Sans KR"; font-size: 14px; color: #999;}
/* 타이틀 */
.board-list .board .wrap-tit {background-color: #fafafa;}
.board-list .board .wrap-tit * {text-align: center !important; font-family: "Noto Sans KR", "Malgun Gothic", sans-serif !important; color: #222 !important; font-weight: 500 !important;}
.board-list .board .wrap-tit .point {text-align: right !important;}
.board-list .board.case1 li .date{width: 180px; text-align: center;}
.board-list .board.case1 li .brand{width: 140px; padding: 22px 0;}
.board-list .board.case1 li .subject{width: auto;}
.board-list .board.case1 li .point{width: 200px; text-align: right;}
.board-list .board.case1 li .point .plus{color: #009bfa;}
.board-list .board.case1 li .point .minus{color: #222;}
.board-list .board.case1 li .desc{width: 170px;}
.board-list .board.case1 li .desc .txt-rg-xsm {margin-top: 1px;}
    /* 이용내역조회 > 소멸예정 포인트 내역 */
.board-list .board.case2 li .date{width: 115px;}
.board-list .board.case2 li .subject{width: auto;}
.board-list .board.case2 li .point{width: 200px; color: #222; text-align: right;}
    /* 이용내역조회 > 가족합산 */
.board-list .board.case3 li .desc{width: 120px;}
.board-list .board.case3 li .subject{width: auto; padding-left: 20px;}
.board-list .board.case3 li .point{width: 200px; color: #222; text-align: right;}
.board-list .board.case3 li .date{width: 180px; text-align: center;}
    /* 이용내역조회 > 결제탭 */
.board-list .board.case4 li .date{width: 180px;}
.board-list .board.case4 li .subject{width: auto;}
.board-list .board.case4 li .point{width: 180px; color: #222; font-family: "Noto Sans KR", "Malgun Gothic", sans-serif; font-weight: 400; text-align: right; word-break: break-all;}
.board-list .board.case4 li .desc{width: 120px;}
    /* 고객센터 > 공지사항 */
.board-list .board.case5 li a:focus,
.board-list .board.case5 li a:hover {background-color: #fafafa;}
.board-list .board.case5 li a {display: table; width: 100%;}
.board-list .board.case5 li .date{width: 110px; font-weight: 400;}
.board-list .board.case5 li .subject{width: auto;}
.board-list .board.case5 li .num{width: 100px; vertical-align: middle; text-align: center;}
    /* 카드사용등록 */
.board-list .board.case6 {padding: 20px 0; border-bottom: 1px solid #eee;}
.board-list .board.case6 ul li {border-bottom: none; padding: 10px 0; width: 100%;}
.board-list .board.case6 li.line-top {padding-top: 30px; margin-top: 20px;}
.board-list .board.case6 li .subject {width: 210px; font-weight: 500; padding: 10px 20px 10px 0;}
.board-list .board.case6 li .subject + p {padding: 10px 20px 10px 0;}
.board-list .board.case6 li .add-txt{display: block; margin-top: 8px; font-size: 12px; line-height: 18px; letter-spacing: -1px; color: #555;}
.board-list .board.case6 li .subject .btn-ico-info.no-txt {margin-left: 5px; vertical-align: -4px;}
.board-list .board.case6 li .form-request {position: relative;}
.board-list .board.case6 li .form-request .form-chk {display: block;}
.board-list .board.case6 li .form-request .form-chk .checkbox {margin-top: 14px;}
.board-list .board.case6 li .form-request .form-chk .checkbox:first-child {margin-top: 0;}
.board-list .board.case6 li > .form-special,
.board-list .board.case6 li > .form-text {width: 500px;}
.board-list .board.case6 li .form-rad .add-symbol,
.board-list .board.case6 li .flex-input .form-text.wfull {flex-basis: 100%}
.board-list .board.case6 li .flex-input .form-text.w150 {flex-basis: 26%}
.board-list .board.case6.full-table ul li {padding-right: 280px;}
.board-list .board.case6.full-table li.more-padding {padding: 30px 0;}
.board-list .board.case6.full-table li .subject {vertical-align: top;}
    /* L.DREAM POINT */
.board-list .board.case7 li .date{width: 160px;}
.board-list .board.case7 li .brand{width: 140px; padding: 22px 20px 22px 0; text-align: center;}
.board-list .board.case7 li .subject{width: auto;}
.board-list .board.case7 li .point{width: 120px; text-align: right;}
.board-list .board.case7 li .point .plus{color: #009bfa;}
.board-list .board.case7 li .point .minus{color: #222;}
.board-list .board.case7 li .desc{width: 120px;}



/* 뷰 */
.board-view{margin-top: 30px; border-top: 2px solid #555;}
.board-view .header{padding: 22px 20px;}
.board-view .header .subject{float: left; font-size: 14px; color: #222; line-height: 24px;}
.board-view .header .date{float: right; margin-top: 3px; font-family: "Nunito Sans", "Noto Sans KR"; font-size: 14px; color: #999; font-weight: 400;}
.board-view .content{padding: 28px 20px; font-size: 14px; color: #555; line-height: 24px; border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
.board-view .btn-area{margin-top: 40px; text-align: center;}

/* sticker - start*/
.sticker{display: inline-block; padding: 2px 9px; font-size: 14px; font-weight: 500; line-height: 18px; color: #999; border: 1px solid #999; border-radius: 15px;}
.sticker.point-color{color: #009bfa; border: 1px solid #009bfa;}
.status-rec{display: inline-block; padding: 7px 10px; font-size: 14px; line-height: 20px; color: #555; border-radius: 5px; background-color: #f4f4f4;}
.status-rec + .status-rec {margin-left: 6px;}

.status {display: inline-block; padding: 0 10px; height: 28px; font-weight: 400; font-size: 14px; line-height: 26px; text-align: center; color: #009bfa; border: 1px solid #009bfa; border-radius: 14px;}
.status.not-yet {color: #999; border: 1px solid #999;}

.tag {display: inline-block; height: 24px; padding: 0 15px; text-align: center; font-size: 12px; font-weight: 500; line-height: 24px; color: #222; border-radius: 2px; background-color: #f2f2f2; box-sizing: border-box;}
/* sticker - end*/

/* 데이터없음 */
.no-data {margin-top: 120px; padding-top: 95px; font-size: 14px; font-weight: 300; line-height: 28px; color: #222; text-align: center; background: url(../images/ico-nodata.png) no-repeat center 0; background-size: 80px 80px;}
.no-data.line24{line-height: 24px;}
/* .no-data.box-type {margin-top: 30px; border: 1px solid #eee; border-radius: 15px; padding: 270px 0 170px; background-position: center 170px;} *//* 2021-01-27 기본 타입으로 통일*/
/* .no-data.has-border {padding: 95px 0 120px; border-bottom: 1px solid #eee;} *//* 2021-01-27 기본 타입으로 통일*/

/* 필수입력 * 표시 */
.icon-essential {margin-left: 3px; font-weight: 400; font-size: 14px; color: #009bfa;}
/* 완료화면 */
.process-completed{padding-top: 110px; text-align: center; background: url(../images/ico-completed.png) no-repeat center 0; background-size: 80px 80px;}
.process-completed .desc1{font-size: 18px; font-weight: 500; color: #222; line-height: 24px;}
.process-completed .desc2{margin-top: 20px; font-size: 14px; font-weight: 300; color: #222; line-height: 24px;}

/* 카드 완료화면 */
.process-card-completed{margin-top: 50px; font-weight: 300; color: #222; text-align: center;}
.process-card-completed .card-img{margin: auto; width: 300px; height: 186px; overflow: hidden;}
.process-card-completed .card-img img{width: 100%;}
.process-card-completed .desc1{margin-top: 40px; font-size: 18px; font-weight: 500;}
.process-card-completed .desc2{margin-top: 20px; font-size: 14px;}

/* 기간조회 */
.period-area{}
.period-area .btn-period{display: inline-block; float: left; margin-right: 5px; padding: 10px 18px; width: 73px; height: 42px; font-size: 14px; color: #555; border: 1px solid #d8d8d8; border-radius: 5px; background-color: #fff; /* transition: all 0.3s ease-out; */}
.period-area .btn-period:not(.active):focus{outline: none; border: 1px solid #009bfa;}
.period-area .btn-period.active{color: #fff; border:1px solid #009bfa; background-color: #009bfa;}
.period-area .calendar{display: -ms-flex; display: flex; float: left; padding: 7px 8px; margin-right: 10px; width: 280px; height: 42px; border: 1px solid #d8d8d8; border-radius: 5px;}
.period-area .calendar.focused{border: 1px solid #009bfa;}
.period-area .calendar .cal-box{position: relative; display: -ms-flex; display: flex; float: left; /* padding-right: 30px; background: url(../images/ico-calendar.png) no-repeat right 0px; background-size: 24px 24px; */}
.period-area .calendar .cal-box input{padding: 0; border: 0; width: 88px; font-family: "Nunito Sans", "Noto Sans KR"; font-size: 14px; color: #555; outline: 0;}
.period-area .calendar .cal-box input:focus{border: 1px solid #009bfa;}
.period-area .calendar .cal-box input + label{padding-left: 3px;}
.period-area .calendar .cal-box input + label img{width: 24px; height: 24px;}
.period-area .calendar .cal-box:nth-child(2){margin-left: 26px;}
.period-area .calendar .cal-box:nth-child(2):after{position: absolute; top: 3px; left: -16px; display: block; content: "~";}
.period-area .form-select.s1{float: left; margin-right: 10px; width: 150px;}
.period-area .form-select.s2{float: left; margin-right: 10px; width: 150px;}
.period-area .form-select.s3{float: left; margin-right: 10px; width: 147px;}
.period-area .btn-regular{float: left; padding: 6px 0; width: 78px; height: 42px;}

/* paging */
.paging{display: -ms-flex; display: flex; justify-content: center; margin-top: 50px;}
.paging .disabled{opacity: 0.5;}
.paging .first {margin: 3px 6px 0 0; transform: rotate(-180deg);background: url(../images/ico-last.png) no-repeat 0 0;}
.paging .prev {margin: 3px 20px 0 0; transform: rotate(-180deg);background: url(../images/ico-next.png) no-repeat 0 0;}
.paging .next {margin: 3px 0 0 20px; background: url(../images/ico-next.png) no-repeat 0 0;}
.paging .last {margin: 3px 0 0 6px; background: url(../images/ico-last.png) no-repeat 0 0;}
.paging .prev, .paging .next, .paging .first, .paging .last {display: inline-block; width: 24px; height: 24px; background-size: 24px 24px;}
.paging .num {display: inline-block; margin: 0 5px; width: 30px; height: 30px; font-family: "Nunito Sans"; text-align: center; line-height: 30px; font-size: 14px; color: #666; transform: all 0.3s ease;}
.paging .num.on {color: #fff; border-radius: 50%; background-color: #009bfa;}
.paging .prev a, 
.paging .next a{display: block; width: 24px; height: 24px;}

/* footer */
footer{padding: 70px 0; border-top: 1px solid #eee; background-color: #fff;}
footer .inner{padding-left: 180px; background: url(../images/logo-footer-lotte-members.png) no-repeat 0 0; background-size: 120px 40px;}
footer .col-area{position: relative;}
footer .col-area:nth-child(2){margin-top: 20px;}
footer .col-area:nth-child(3){margin-top: 50px;}
footer .col-area .menu{}
footer .col-area .menu a{display: inline-block; margin-right: 30px; font-size: 14px; font-weight: 300; color: #555;}
footer .col-area .menu a.bold{font-weight: 400; color: #222;}
footer .col-area .sns{position: absolute; top: 0; right: 0;}
footer .col-area .sns a{display:inline-block; padding: 0 7px;}
footer .col-area .sns a img{width: 28px; height: 28px;}
footer .col-area .company-info span{display: inline-block; margin: 5px 10px 5px 0; padding: 0 10px 0 0; font-size: 14px; color: #555; font-weight: 300; line-height: 1; border-right: 1px solid #ddd;}
footer .col-area .company-info span.no-border{border-right: 0}
footer .col-area .company-info .link{text-decoration: underline;}
footer .col-area .copyright{font-family: "Nunito Sans", "Noto Sans KR"; font-size: 14px; letter-spacing: 0; color: #555; font-weight: 100;}
footer .combobox-area{position: absolute; bottom: 0; right: 0;}
footer .combobox-area button:focus {outline: auto;}
footer .combobox-area:after{display: block; content: ""; clear: both;}
footer .combobox-area .combo{position: relative; float: left; margin-left: 10px;}
footer .combobox-area .combo .btn-toggle{position: relative; padding: 9px  60px 11px 16px; min-width: 200px; height: 40px; font-size: 14px; color: #555; text-align: left; border: 1px solid #eee; border-radius: 5px; background-color: #f4f4f4;}
footer .combobox-area .combo .btn-toggle:after{position: absolute; top: 16px; right: 16px; content: ""; width: 12px; height: 7px; background: url(../images/ico-change-arrow12x7.png) no-repeat 0 0; background-size: 12px 7px; transition: transform 0.3s ease;}
footer .combobox-area .combo .btn-toggle.active{border-top: 1px solid transparent !important; border-radius:0 0 5px 5px;}
footer .combobox-area .combo .btn-toggle.active:after{transform: rotate(180deg);}
footer .combobox-area .combo .scroll-box{display: none; position: absolute; bottom: 40px; left: 0; overflow-y: auto; padding: 5px 16px; width: 100%; height: auto; max-height: 280px; border: 1px solid #eee; border-radius: 5px; background-color: #f4f4f4;}
footer .combobox-area .combo .scroll-box.active{border-radius: 5px 5px 0 0; border-bottom: 1px solid transparent !important;}
footer .combobox-area .combo .scroll-box .link{display: block; padding: 2px 0; font-size: 14px; font-weight: 300; line-height: 18px; word-break: keep-all;}
footer .combobox-area .combo .scroll-box .link:hover > a{text-decoration: underline; color: #222;}
footer .combobox-area .combo .scroll-box .link a{display: block; font-weight: 400;}
footer .combobox-area .combo .scroll-box dd.link{font-size: 12px;}
footer .combobox-area .combo .scroll-box .link ul{padding: 0;}
footer .combobox-area .combo .scroll-box .link ul .link{font-size: 12px;}
footer .combobox-area .combo .scroll-box .link ul .link a{position: relative; padding-left: 7px;}
footer .combobox-area .combo .scroll-box .link ul .link a:before{position: absolute; top: 0; left: 0; content: "-";}
footer .combobox-area .combo .scroll-box .link ul .link:last-child { margin-bottom: 0; padding-bottom: 0; }
footer .combobox-area .combo .scroll-box .legend{padding: 14px 0 4px; color: #222;}
footer .combobox-area .combo .scroll-box .legend:nth-of-type(1){padding-top: 0;}
footer .combobox-area .combo.language .btn-toggle{font-weight: 300; border: 1px solid #d8d8d8; background-color: #fff;}
footer .combobox-area .combo.language .btn-toggle:active{border-top: 1px solid transparent; border-radius:0 0 5px 5px;}
footer .combobox-area .combo.language .scroll-box{border: 1px solid #d8d8d8; background-color: #fff;}
footer .combobox-area .combo.language .scroll-box:active{border-radius: 5px 5px 0 0; border-bottom: 1px solid transparent;}
footer .btn-top{position: fixed; bottom: -50px; right: 50%; margin-right: -616px; font-size: 11px; font-family: "Nunito Sans", "Noto Sans KR"; font-weight: 400; color: #999; text-align: center; line-height: 47px; width: 46px; height: 46px; border: 1px solid #eee; border-radius: 50%; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.06); background-color: #fff; transition: bottom .4s;}
footer .btn-top.on{bottom: 30px;}


/* 서브 매뉴 있는 2단 레이아웃 */
.wrap-col {position: relative; padding-left: 290px; margin-top: 50px;}
.wrap-col.fixed{margin-top: 100px;}
.wrap-col .aside {position: absolute; left: 0; top: -5px; width: 160px;}
.wrap-col .aside.sticky-aside.fixed{position: fixed; top: 145px;}
.wrap-col .con-col {position: relative;}
.wrap-col .con-col .tab-group{width: 500px;}
.lnb-mn {position: relative;}
.lnb-mn li + li {margin-top: 22px;}
.lnb-mn a {position: relative; display: block; padding: 6px 0; font-size: 16px; line-height: 24px; color: #555; font-weight: 400; font-family: "Nunito Sans", "Noto Sans KR", sans-serif;}
.lnb-mn a:after {content:""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; border-radius: 2px; background-color: transparent;}

.lnb-mn.type2:before {content:""; position: absolute; left: 0; top:0; height: 100%; width: 3px; background-color: #eee;}
.lnb-mn.type2 a {padding: 8px 17px;}
.lnb-mn.type2 a:after {content:""; position: absolute; left: 0; top:0; bottom: unset; height: 40px; width: 3px; border-radius: 0; background-color: transparent;}

.lnb-mn a:hover,
.lnb-mn a.active {color: #009bfa; font-weight: 400;}
.lnb-mn a:hover:after,
.lnb-mn a.active:after {background-color: #009bfa;}


/* 버튼 */
.box-btn {margin-top: 40px; text-align: center;}
.popup-center .box-btn {margin-top: 30px;}
.btn-more-area {position: relative; margin-top: 40px;}
.btn-more-area .btn-more {display: block; margin: auto; width: 40px; height: 40px;}
.btn-more-area .btn-more img {width: 100%;}
.btn-more-area .btn-ico-info {position: absolute; top: 0; right: 0;}
.btn-ico-info{display: inline-block; padding-left: 24px; font-size: 14px; color: #999; line-height: 20px; letter-spacing: -1px; background: url(../images/ico-infomation.png) no-repeat 0 center; background-size: 18px 18px;}/*2020-12-24 팀장님과 논의 결과 폰트 사이즈 12px, 아이콘이 이미지 15px 작은 사이즈로 결정*/ /*2021-01-06 최종으로 폰트 사이즈 14px, 아이콘이 이미지 18px로 변경*/
.btn-ico-info.no-txt {text-indent: -9999px; overflow: hidden; vertical-align: middle; width: 18px; height: 18px;}
.btn-small-lesser{display: inline-block; height: 26px; padding: 3px 9px; font-size: 12px; line-height: 18px; color: #555; font-weight: 500; border: 1px solid #d8d8d8; border-radius: 5px; background-color: #fff; transition: all .2s;}
.btn-small{display: inline-block; height: 32px; padding: 5px 9px; font-size: 14px; line-height: 21px; color: #555; font-weight: 500; border: 1px solid #d8d8d8; border-radius: 5px; background-color: #fff; transition: all .2s;}
.btn-small.primary {color: #fff; background-color: #009bfa; border-color: #009bfa;}
.btn-small.disabled {color: #fff; background-color: #d8d8d8; border-color: #d8d8d8;}
.btn-small.dgray {color: #fff; background-color: #555; border-color: #555;}
.btn-small.absolute {position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.btn-regular{display: inline-block; min-width: 78px; padding: 6px 20px; font-size: 14px; line-height: 20px; color: #fff; font-weight: 500; border: 1px solid #777; border-radius: 5px; background-color: #777; transition: all .2s;}
.btn-regular.primary {color: #fff; background-color: #009bfa; border-color: #009bfa;}
.btn-regular.disabled {color: #fff; background-color: #d8d8d8; border-color: #d8d8d8;}
.btn-regular.dgray {color: #fff; background-color: #555; border-color: #555;}
.btn-regular.basic {color: #555; background-color: #fff; border-color: #d8d8d8;}
.btn-medium{display: inline-block; min-width: 78px; padding: 11px 15px; height: 42px; font-size: 14px; line-height: 20px; color: #fff; font-weight: 500; border: 1px solid #777; border-radius: 5px; background-color: #777; transition: all .2s;}
.btn-medium.primary {color: #fff; background-color: #009bfa; border-color: #009bfa;}
.btn-medium.disabled {color: #fff; background-color: #d8d8d8; border-color: #d8d8d8;}
.btn-medium.dgray {color: #fff; background-color: #555; border-color: #555;}
.btn-medium.basic {color: #555; background-color: #fff; border-color: #d8d8d8;}
.btn-big {display: inline-block; min-width: 240px; height: 50px; padding: 0 20px; line-height: 50px; box-sizing: border-box; font-size: 16px; font-weight: 500; text-align: center; color: #555; background-color: #fff; border:1px solid #d8d8d8; border-radius: 10px; transition: all .2s;}
.btn-big.primary {color: #fff; background-color: #009bfa; border-color: #009bfa;}
.btn-big.disabled {color: #fff; background-color: #d8d8d8; border-color: #d8d8d8;}
.btn-big.dgray {color: #fff; background-color: #555; border-color: #555;}
.btn-big.full {width: 100%;}
.btn-big + .btn-big {margin-left: 16px;}
/*hover*/
.btn-small-lesser:hover,
.btn-regular:hover,
.btn-regular:focus,
.btn-medium:hover,
.btn-medium:focus {background-color: #555; border-color: #555; outline: none !important;}

.btn-small-lesser:hover,
.btn-small-lesser:focus,
.btn-small:hover,
.btn-small:focus,
.btn-regular.basic:hover,
.btn-regular.basic:focus,
.btn-medium.basic:hover,
.btn-medium.basic:focus,
.btn-big:hover,
.btn-big:focus {background-color: #fff; border-color: #999; outline: none !important;}

.btn-small.primary:hover,
.btn-small.primary:focus,
.btn-regular.primary:hover,
.btn-regular.primary:focus,
.btn-medium.primary:hover,
.btn-medium.primary:focus,
.btn-big.primary:hover,
.btn-big.primary:focus {background-color: #0384eb; border-color: #0384eb; outline: none !important;}

.btn-small.disabled:hover,
.btn-small.disabled:focus,
.btn-regular.disabled:hover,
.btn-regular.disabled:focus,
.btn-medium.disabled:hover,
.btn-medium.disabled:focus,
.btn-big.disabled:hover,
.btn-big.disabled:focus {background-color: #d8d8d8; border-color: #d8d8d8; outline: none !important;}

.popup-center .btn-big + .btn-big {margin-left: 9px;}
.txt-link {position: relative; display: inline-block; font-size: 16px; color: #555; font-weight: 500;}
.txt-link:after {content:""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background-color: #555;}
.btn-arrow {display: inline-block; padding-right: 25px; font-size: 16px; line-height: 28px; font-weight: 500; background: url(../images/ico-arrow-next.png) no-repeat right center; background-size: 22px 22px;}
.btn-view-more {margin-top: 20px; text-align: center;}
.btn-view-more a {position: relative; display: inline-block; width: 40px; height: 40px; overflow: hidden; border-radius: 50%; text-indent: -9999px; background-color: #009bfa; box-shadow: 0 6px 6px 0 rgba(0,0,0,.1)}
.btn-view-more a:before,
.btn-view-more a:after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #fff;}
.btn-view-more a:before {width: 14px; height: 2px;}
.btn-view-more a:after {width: 2px; height: 14px;}
.btn-view-more.gray a {background-color: #eee; box-shadow: none;}
.btn-view-more.gray a:before,
.btn-view-more.gray a:after {background-color: #555;}
.btn-download{display: inline-block; padding: 8px 10px; font-size: 12px; font-weight: 500; color: #555; line-height: 1; border: 1px solid #d8d8d8; border-radius: 5px;}
.btn-download span{padding-left: 25px; background: url(../images/ico-btn-download.png) no-repeat left center; background-size: 19px 16px;}
.btn-download.btn-regular {font-size: 14px; padding: 12px 16px;}
.btn-download.btn-regular span {padding-left: 28px;}
.btn-print{display: inline-block; padding: 8px 10px; font-size: 12px; font-weight: 500; color: #555; line-height: 1; border: 1px solid #d8d8d8; border-radius: 5px;}
.btn-print span{padding-left: 25px; background: url(../images/ico-btn-print.png) no-repeat left center; background-size: 20px 17px;}
.btn-download + .btn-print {margin-left: 2px;}
.btn-circle {display: -ms-flex; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; border-radius: 50%; color: #fff; font-size: 14px; line-height: 20px; font-weight: 400; background-color: #009bfa; box-shadow: 0 30px 30px 0 rgba(0,0,0,.08);}

/* 텍스트 - start */
.txt-lt-xsm,
.txt-rg-xsm,
.txt-md-xsm {font-weight: 300 !important; font-size: 12px; line-height: 18px; color: #999;}
.txt-rg-xsm {font-weight: 400 !important;}
.txt-md-xsm {font-weight: 500 !important;}
.txt-lt-sm,
.txt-rg-sm,
.txt-md-sm {font-weight: 300 !important; font-size: 13px; line-height: 19px; color: #555;}
.txt-rg-sm {font-weight: 400 !important;}
.txt-md-sm {font-weight: 500 !important;}
.txt-lt,
.txt-rg,
.txt-md {font-weight: 300 !important; font-size: 14px; line-height: 24px; color: #555;}
.txt-rg {font-weight: 400 !important;}
.txt-md {font-weight: 500 !important;}
.txt-lt-big,
.txt-rg-big,
.txt-md-big {font-weight: 300 !important; font-size: 16px; line-height: 28px; color: #555;}
.txt-rg-big {font-weight: 400 !important;}
.txt-md-big {font-weight: 500 !important;}
.txt-lt-xbig,
.txt-rg-xbig,
.txt-md-xbig {font-weight: 300 !important; font-size: 18px; line-height: 28px; color: #555;}
.txt-rg-xbig {font-weight: 400 !important;}
.txt-md-xbig {font-weight: 500 !important;}
.txt-lt + .txt-lt {margin-top: 10px;}
.font-num {font-family: "Nunito Sans", "Noto Sans KR", sans-serif !important; letter-spacing: 0;}
.blue-txt {color: #009bfa !important;}
.dgray-txt {color: #222 !important;}
.warmgray-txt {color: #999 !important;}
.dimgray-txt {color: #555 !important;}
.red-txt {color: #e02020 !important;}
.add-symbol {padding-left: 15px; font-weight: 400; font-size: 14px; line-height: 24px; color: #999; text-indent: -15px;} /* 당구장표시 작은 텍스트 */
.bold {font-weight: 500 !important;}
.txt-line {text-decoration: underline !important;}
/* 텍스트 - end */

/* 팝업 */
.w150{width: 150px !important;}
.w160{width: 160px !important; min-width: 160px !important;}
.w600{width: 600px !important;}
.w700{width: 700px !important;}
.popup-center{position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; z-index: 20; padding: 30px; overflow-y: auto; width: 100%; height: 100%; text-align: center; background-color: rgba(0,0,0,0.4);}
.popup-center .wrap{/* position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; */ position: relative; z-index: 2; display: inline-block; width: 420px; border-radius: 25px; text-align: left; white-space: normal; vertical-align: middle; overflow: hidden; background-color: #fff;}
.popup-center:after{display: inline-block; height: 100%; vertical-align: middle; content: "";}
.popup-center .wrap .header{padding: 23px 30px 20px; border-bottom: 1px solid #d8d8d8;}
.popup-center .wrap .contents{padding: 30px 30px 40px; word-break: keep-all;}
.popup-center .wrap .contents.no-padding{padding: 0;}
.popup-center .wrap .header .tit {font-size: 16px; line-height: 26px; color: #222; font-weight: 700;}
.popup-center .btn-close{position: absolute; top: 25px; right: 20px; z-index: 2;}
.popup-center .btn-close img{width: 20px; height: 20px;}
.popup-center .btn-close2 {min-width: 160px;}
.popup-center .center-ico-txt {padding-top: 0px;}
.popup-center .center-ico-txt .tit.big {font-size: 18px;}
.popup-center .box-scroll {height: 500px; max-height: 500px !important;}
.popup-center .box-scroll.scroll-wrapper {padding: 0 15px 0 0 !important; margin-right: -15px;}
.popup-center .box-scroll > .scroll-element.scroll-y {width: 15px;}
.popup-center .dv-area{margin-top: 20px; padding-top: 20px; font-size: 14px; color: #999; border-top: 1px solid #eee;}

/* .popup-center .bg{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4);} */

/* 알럿형 팝업 - start */
.popup-alert {position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 50; display: none; overflow: hidden; width: 100%; height: 100%; max-height: 100%;}
.popup-alert:after {position: absolute; top: 0; left: 0; display: block; content: ""; width: 100%; height: 100%; background-color: rgba(0,0,0,.4);}
.popup-alert.no-dimd:after {display: none;}
.popup-alert .content {position: relative; z-index: 1; width: calc(100% - 64px); height: auto; /* max-height: 60%;  overflow-y: auto; */ border-radius: 15px; background-color: #fff;}
.popup-alert .popup-wrap {display: -ms-flex; display: flex; align-items: center; justify-content: center; height: 100%;}
.popup-alert .popup-wrap.scroll {position: relative; z-index: 1; overflow-y: auto; align-items: normal;}
.popup-alert .popup-wrap.scroll .content.receipt {margin-top: 80px; border-radius: 15px 15px 0 0; background-color: transparent;}
.popup-alert .popup-wrap .content.receipt {margin-top: 0;}
.popup-alert .box-con {position: relative; padding: 40px 24px; font-size: 14px; line-height: 22px; color: #222;}
.popup-alert .box-con:before {content: ""; position: absolute; top: 0; left: 16px; transform: translateY(-50%); display: block; width: 48px; height: 48px;}
.popup-alert .box-close {border-top: 1px solid #eee; padding: 25px 24px; text-align: right;}
.popup-alert .box-close .btn-close {right: 24px; top: auto; bottom: 20px; font-size: 13px; line-height: 19px; color: #009bfa; font-weight: 400;}
.popup-alert .btn-close {position: absolute; top: 16px; right: 16px; width: 24px; height: 24px; z-index: 1; background: url(../images/ico-close.png) no-repeat; background-size: 20px 20px; text-indent: -9999px; overflow: hidden;}
.popup-alert .btn-cancel {position: absolute; bottom: 16px; left: 24px; z-index: 1; color: #999 !important;}
/* 알럿형 팝업 - end */

/* 팝업 내 텍스트 스타일 */
.add-asterisk {position: relative; padding-left: 10px; /*margin-left: 16px;*/ margin-top: 24px; font-size: 14px; line-height: 22px; letter-spacing: -.75px; color: #999;}
.add-asterisk:before {position: absolute; top: 3px; left: 0; display: block; content: "*"; font-size: 14px; color: #999;}
.pop-list-st {font-size: 14px; font-weight: 300;}
.pop-list-st.eng {font-family: "Nunito Sans", "Noto Sans KR";}
.pop-list-st.eng li .list-tit {letter-spacing: 0;}
.pop-list-st.eng li .txt {letter-spacing: 0;}
.pop-list-st li {margin-top: 40px;}
.pop-list-st li:first-child {margin-top: 0;}
.pop-list-st li:first-child .list-con {margin-top: 0;}
.pop-list-st li .list-tit {margin-left: 14px; text-indent: -14px; font-weight: 400; font-size: 14px; color: #222; line-height: 22px; letter-spacing: -.75px;}
.pop-list-st li .list-tit.type2 {font-size: 14px; color: #666;}
.pop-list-st li .tit {margin-bottom: 10px; /*font-weight: 500;*/ color: #009bfa;}
.pop-list-st li .sub-tit {margin: 20px 0 8px; color: #222; font-weight: 400;}
.pop-list-st li .indent-list {padding-left: 16px;}
.pop-list-st li .indent-list .tit {margin-bottom: 16px;}
.pop-list-st li .txt {margin-top: 30px; font-weight: 300; font-size: 14px; color: #222; line-height: 22px; letter-spacing: -.75px;}
.pop-list-st li .txt:first-child {margin-top: 0;}
.pop-list-st li .txt .paragraph {position: relative; padding-left: 14px; margin-top: 10px;}
.pop-list-st li .txt .paragraph:before {position: absolute; top: 0; left: 2px; display: block; content: "·";}
.pop-list-st li .txt .paragraph:first-child {margin-top: 0;}
.pop-list-st li .txt .paragraph.no-dash:before {display: none;}
.pop-list-st li .txt .paragraph.type2 {padding-left: 0; margin-top: 10px; line-height: 22px;}
.pop-list-st li .txt .paragraph.type2:before {display: none;}
.pop-list-st li .txt .paragraph.num-type {padding-left: 21px;}
.pop-list-st li .txt .paragraph.num-type .num {position: absolute; left: 0; top: 0;}
.pop-list-st li .txt .paragraph.num-type:before {display: none;}
.pop-list-st li .txt .mid-txt {margin-top: 30px; font-size: 14px; font-weight: 500; color: #222;}
.pop-list-st li .txt .img-area {margin-top: 20px;}
.pop-list-st li .txt .img-area img {width: 100%;}
.pop-list-st li .sub-txt {margin-top: 10px; font-size: 14px; line-height: 20px; color: #222;}
.pop-list-st li > .img {margin-bottom: 20px; width: 72%;}
.pop-list-st li > .img img {max-width: 100%;}
.pop-list-st li > .txt {margin-bottom: 20px;}
.pop-list-st li .list-tit + .list-con {margin-top: 10px;}
.pop-list-st li .list-tit + .indent-list {margin-top: 10px;}
.pop-list-st li .list-con {margin: 10px 0 40px; line-height: 24px;}
.pop-list-st li .list-con:last-child {margin-bottom: 0;}
.pop-list-st li .list-con .add-symbol + .add-symbol{margin-top: 10px;}
.pop-list-st li .img {margin-bottom: 0; width: 80%;}
.pop-list-st li .img img {max-width: 100%;}
.pop-list-st .card-inf-txt {font-size: 13px; line-height: 20px; color: #009bfa; font-weight: 400;}
.pop-list-st.mid li {margin-top: 30px;}

.text-wrap .list{margin-top: 30px;}
.text-wrap .list .tit{font-size: 14px; line-height: 24px; color: #222;}
.text-wrap .list .dot-list{}
.text-wrap .list .dot-list li{position: relative; padding-left: 10px; margin-top: 10px; font-size: 14px; line-height: 22px; color: #222; font-weight: 300;}
.text-wrap .list .dot-list li:before{position: absolute; top: -4px; left: 0; display: block; content: "."; color: #555;}
.text-wrap .list .saving-info li{position: relative; padding-left: 10px; margin-top: 10px; font-size: 14px; line-height: 22px; color: #222; font-weight: 300;}
.text-wrap .list .saving-info li:before{position: absolute; top: -4px; left: 0; display: block; content: "."; color: #555;}
.text-wrap .list .indent-list{}
.text-wrap .list .indent-list li{position: relative; padding-left: 10px; margin-top: 10px; font-size: 14px; line-height: 22px; color: #222; font-weight: 300;}
/* .text-wrap .list .indent-list li:before{position: absolute; top: -4px; left: 0; display: block; content: "."; color: #555;} */

/* 리스트 타입 - start */
.list-type li {position: relative; font-weight: 300; font-size: 14px; line-height: 24px; color: #222;}
.list-type li:first-child {margin-top: 12px;}
.list-type li + li {margin-top: 10px;}
.list-type.list-dot li {padding-left: 8px;}
.list-type.list-dot li:before {content:""; position: absolute; left:0; top: 12px; width: 1px; height: 1px; background-color: #222;}
.list-type.list-dash li {padding-left: 10px;}
.list-type.list-dash li:before {content:"-"; position: absolute; left:0;}

.list-vline span,
.list-vline li {position: relative; display: inline-block; line-height: 20px;}
.list-vline span + span,
.list-vline li + li {margin-left: 8px; padding-left: 10px;}
.list-vline span + span:before,
.list-vline li + li:before {content:""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 12px; background-color: #d8d8d8;}
/* 리스트 타입 - end */

/* 유의사항 */
.notice .notice-title {font-size: 16px; line-height: 24px; color: #222; font-weight: 400;}
.notice .notice-title + .list-dot {margin-top: 12px}
.notice .list-dot li {font-size: 14px; line-height: 20px;}
.notice .list-dot li:first-child {margin-top: 0;}
.notice .list-dot li:before {top: 9px;}
.popup-center .notice-title {font-size: 14px; line-height: 20px;}

/* 토스트팝업 - start */
.toast-pop-area {position: relative; display: inline-block; height: 18px; margin-left: 6px; vertical-align: middle;}
.btn-q-toast {position: relative; display: inline-block; width: 18px; height: 18px; vertical-align: top; line-height: 18px; text-indent: -9999px; background: url(../images/btn-tooltip-wh.png) 0 0 no-repeat; background-size: 18px 18px; text-align: left;}
.btn-q-toast.white {background-image: url(../images/btn-tooltip-wh.png);}
.btn-q-toast.gray {background: url(../images/btn-tooltip-gray.png) center center/18px 18px no-repeat;}
.btn-q-toast:after {content: ""; position: absolute; left: 8px; bottom: -16px; width: 0; height: 0; border-top: 9px solid transparent; border-left: 15px solid #ededed; opacity: 0; transition: opacity .3s cubic-bezier(.02,.01,.47,1);}
.toast-pop-area.on .btn-q-toast:after {opacity: 1;}
.toast-pop {position: absolute; left: 8px; top: 34px; z-index: 20; pointer-events: none;}
.toast-pop .dimd {content: ""; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0); z-index: 1; opacity: 0; transition: opacity .3s cubic-bezier(.02,.01,.47,1);}
.toast-pop .con {position: relative; z-index: 2; padding: 20px 46px 20px 20px; width: 320px; box-sizing: border-box; text-align: left; font-weight: 300; font-size: 14px; line-height: 18px; color: #555; background-color: #ededed; border: 1px solid #eee; border-radius: 0 10px 10px 10px; box-shadow: 0 10px 10px 0 rgba(0,0,0,.1); opacity: 0; transition: opacity .3s cubic-bezier(.02,.01,.47,1);}
.toast-pop .btn-close {position: absolute; top: 20px; right: 20px; display: inline-block; width: 16px; height: 16px; background: url(../images/btn-close.png) no-repeat; background-size: 16px 16px; text-indent: -9999px; overflow: hidden;}
.toast-center .toast-pop {left: 50%; margin-left: -160px;}
.toast-center .toast-pop .con {border-radius: 10px;}
.toast-center .btn-q-toast:after {left: 2px; border-style: solid; border-width: 0 7px 10px 7px; border-color: transparent transparent #ededed transparent;}
.toast-right .toast-pop {left: auto; right: 9px;}
.toast-right .toast-pop .con {border-radius: 10px 0 10px 10px; text-align: left;}
.toast-right .btn-q-toast:after {left: -6px; width: 0; height: 0; border-style: solid; border-width: 0 0 9px 15px; border-color: transparent transparent #ededed transparent;}
.toast-pop-area.on .toast-pop { pointer-events: all;}
.toast-pop-area.on .dimd,
.toast-pop-area.on .con {opacity: 1;}
/* 토스트팝업 - end */

/* simple outer scrollbar - start*/
.scroll-wrapper {overflow:hidden !important;position:relative;padding:0 !important;}
.scroll-wrapper > .scroll-content {overflow:scroll !important;box-sizing:content-box !important;position:relative !important;top:0;left:0;max-width:none !important;width:auto !important;max-height:none;height:auto;margin:0;padding:0;border:none !important;}
.scroll-wrapper > .scroll-content::-webkit-scrollbar {width:0;height:0;} 
.scroll-element {display:none;}
.scroll-element, .scroll-element div {box-sizing:content-box;}
.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible {display:block;}
.scroll-element .scroll-bar,
.scroll-element .scroll-arrow {cursor:default;}
.scroll-textarea {border:1px solid #ccc;border-top-color:#999;}
.scroll-textarea > .scroll-content {overflow:hidden !important;}
.scroll-textarea > .scroll-content > textarea {overflow:scroll !important;box-sizing:border-box;position:relative !important;top:0;max-width:none !important;max-height:none !important;width: 100% !important;height:100% !important;margin:0;padding:2px;border:none !important;outline:none;}
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {height:0;width:0;}
.scroll-wrapper > .scroll-content {-ms-overflow-style: none; overflow: auto;}
.box-scroll > .scroll-element,
.box-scroll > .scroll-element div {position: absolute; z-index: 2; margin: 0; padding: 0; border:none;}
.box-scroll > .scroll-element div {display:block; left: 0; top: 0; width: 100%; height: 100%;}
.box-scroll > .scroll-element.scroll-x {bottom: 0; left:0; width: 100%; height: 10px;}
.box-scroll > .scroll-element.scroll-y {right: 0; top: 0; width: 10px; height: 100%; /*-ms-height: calc(100% + 20px);*/}
.box-scroll > .scroll-element.scroll-x .scroll-element_outer {top: 1px; height: 7px;}
.box-scroll > .scroll-element.scroll-y .scroll-element_outer {left: 2px; width: 6px;}
.box-scroll > .scroll-element .scroll-element_outer {overflow: hidden;}
.box-scroll > .scroll-element .scroll-element_track {background-color: transparent;}
.box-scroll > .scroll-element .scroll-element_outer,
.box-scroll > .scroll-element .scroll-element_track,
.box-scroll > .scroll-element .scroll-bar {border-radius: 3px;}
.box-scroll > .scroll-element .scroll-bar {background-color:#d3d6de;}
.box-scroll > .scroll-element.scroll-y .scroll-bar {min-height: 63px !important;}
.box-scroll > .scroll-element.scroll-draggable .scroll-bar {background-color: #919191;}
.box-scroll > .scroll-element.scroll-x .scroll-bar {width: 108px !important; height: 7px !important; border-radius: 4px;}
.box-scroll.scroll-wrapper > .scroll-content.scroll-scrolly_visible {margin: 0 !important; padding: 0 10px 0 0;}
.box-scroll.scroll-wrapper > .scroll-content.scroll-scrollx_visible {margin: 0 !important; padding: 0 0 4px 0 !important;}
/* simple outer scrollbar - end */

/* 큰 테두리 박스 버튼 - start */
.border-box-btn {margin-top: 80px;}
.border-box-btn ul {display: flex;}
.border-box-btn li {position: relative; width: calc((100% - 48px)/4); height: 238px; box-sizing: border-box; transition: all .2s ease;}
.border-box-btn li a {position: relative; display: block; padding: 30px; height: 100%; border: 1px solid #d8d8d8; border-radius: 15px;}
.border-box-btn li a:hover {border-color: #009bfa; box-shadow: 0 20px 20px 0 rgba(0,0,0,.04);}
.border-box-btn li + li {margin-left: 16px;}
.border-box-btn li .tit {display: block; font-size: 16px; line-height: 24px; color: #222; font-weight: 500;}
.border-box-btn li .txt {display: block; margin-top: 20px; font-size: 14px; line-height: 20px; color: #999; font-weight: 400;}
.border-box-btn li a:after {content:""; position: absolute; width: 60px; height: 60px; right: 30px; bottom: 30px; background: url(../images/img-myinfo1.png) no-repeat; background-size: 60px 60px;}
.border-box-btn li.mn2 a:after {background-image: url(../images/img-myinfo2.png);}
.border-box-btn li.mn3 a:after {background-image: url(../images/img-myinfo3.png);}
.border-box-btn li.mn4 a:after {background-image: url(../images/img-myinfo4.png);}
.border-box-btn li.cs1 a:after {background-image: url(../images/ico-customer-center1.png);}
.border-box-btn li.cs2 a:after {background-image: url(../images/ico-customer-center2.png);}
.border-box-btn li.cs3 a:after {background-image: url(../images/ico-customer-center3.png);}
.border-box-btn li.cs4 a:after {background-image: url(../images/ico-customer-center4.png);}
.border-box-btn li.cert1 a:after {top: 30px; left: 72px; right: auto; bottom: auto; background-image: url(../images/ico-certi-process1.png); right: 30px; bottom: 30px;}
.border-box-btn li.cert2 a:after {top: 30px; left: 72px; right: auto; bottom: auto; background-image: url(../images/ico-certi-process2.png);}
.border-box-btn li.cert3 a:after {top: 30px; left: 72px; right: auto; bottom: auto; background-image: url(../images/ico-certi-process3.png);}
.border-box-btn li.cert4 a:after {top: 30px; left: 72px; right: auto; bottom: auto; background-image: url(../images/ico-certi-process4.png);}
.border-box-btn li.cert5 a:after {top: 30px; left: 72px; right: auto; bottom: auto; background-image: url(../images/ico-certi-process5.png);}
.border-box-btn.col3 {margin-top: 20px;}
.border-box-btn.col3 ul{-ms-flex-wrap: wrap; flex-wrap: wrap; }
.border-box-btn.col3 li {width: calc((100% - 32px)/3); height: 200px;}
.border-box-btn.col3 li:nth-child(n+4){margin-top: 20px;}
.border-box-btn.col3 li:nth-child(4n){margin-left: 0;}
.border-box-btn.col3.case-h li{height: 238px;}
.border-box-btn.col5 li{width: calc((100% - 32px)/5); height: 154px;}
.border-box-btn.col5 li .tit{padding-top: 70px; text-align: center; font-weight: 400; color: #555; font-size: 14px;}
.border-box-btn.__empty li a:after { content: none; }
.border-box-btn.col5.__empty li { text-align: center; }
.border-box-btn.col5.__empty li .tit { padding-top: 0; }
/* 큰 테두리 박스 버튼 - end */

/* Table - start */
/* == Type1*/
.tbl-type1 {border-top: 2px solid #555; color: #222;}
.tbl-type1 th,
.tbl-type1 td {border-bottom: 1px solid #eee; color: #555; text-align: left; height: 88px; line-height: 28px; font-size: 14px; font-weight: 400;}
.tbl-type1 th {font-weight: 500; color: #222; word-break: break-all;}
.tbl-type1.input-tbl {padding: 20px 0 20px; border-bottom: 1px solid #eee;} /* 정보 입력 페이지 (cell 하단 border 없음)*/
.tbl-type1.input-tbl th,
.tbl-type1.input-tbl td {padding: 10px 0; height: 62px; border-bottom: 0;}
.tbl-type1.input-tbl th {padding-top: 12px; vertical-align: top;}
/* == Type2*/
.tbl-type2 {border-top: 2px solid #555; /*font-family: "Nunito Sans", "Noto Sans KR, sans-serif";*/}
.tbl-type2 th,
.tbl-type2 td {height: 68px; padding: 0 20px; color: #555; font-weight: 400; line-height: 28px; word-break: break-all;}
.tbl-type2 th {/* border-left: 1px solid #eee; */ border-bottom: 1px solid #eee; background-color: #fafafa; font-weight: 500; color: #222;}
.tbl-type2 th:first-child{border-left: 0;}
.tbl-type2 td {border-bottom: 1px solid #eee; text-align: center;}
/* == Type3*/
.tbl-type3{border-top: 2px solid #555; color: #222;}
.tbl-type3 th,
.tbl-type3 td {border-bottom: 1px solid #eee; text-align: left; padding: 0 20px; height: 68px; line-height: 28px; font-size: 14px; color: #555; font-weight: 400; word-break: break-all;}
.tbl-type3 .total th {color: #222;}
.tbl-type3 th {font-weight: 500; background: #fafafa; color: #222;}
.tbl-type3 th.no-bg {background: none;}
.tbl-type3 tbody th {color: #555;}
.tbl-type3 tfoot th {background-color: #fff;}
.tbl-type3 tfoot td {border-left: 1px solid #eee; font-weight: 700; color: #222;}
.tbl-type3 .number,
.tbl-type3 .num {font-family: "Nunito Sans", "Noto Sans KR, sans-serif";}
.tbl-type3 .date {font-family: "Nunito Sans", "Noto Sans KR, sans-serif";}
.tbl-type3.center th{border-left: 1px solid #eee;}
.tbl-type3.center th:first-child{border-left: 0;}
.tbl-type3.center thead tr + tr th:first-child{border-left: 1px solid #eee;}
.tbl-type3.center th, .tbl-type3.center td{text-align: center;}
.tbl-type3.slide table{width: 1440px;}
.tbl-type3.slide td {font-weight: 400;}
.tbl-type3.slide tfoot td {border-left: 1px solid #eee; font-weight: 700;}
.tbl-type3.card td {height: 114px;}
.tbl-type3.card .card-info{padding: 22px 0; overflow: hidden; text-align: left; margin-left: -10px;}
.tbl-type3.card th, 
.tbl-type3.card td{text-align: center;}
.tbl-type3.card .form-rad .radio{width: 20px; height: 20px;}
.tbl-type3.card .form-rad input + label {position: static; width: 20px; height: 20px; padding-left: 0;}
.tbl-type3.slide .box-scroll > .scroll-element.scroll-x{background-color: #fafafa;}
.tbl-type3.slide .box-scroll > .scroll-element .scroll-bar{background-color: #d8d8d8; width: 400px !important;}
/* .tbl-type3.card .form-rad input + label:before{top: -13px;} */
.tbl-type3.card .card-info .img{float: left; width: 112px; height: 70px; overflow: hidden;}
.tbl-type3.card .card-info .img img{width: 100%;}
.tbl-type3.card .card-info .txt{float: left; padding: 7px 0 7px 40px;}
.tbl-type3 .report-date {padding: 22px 20px; font-family: "Nunito Sans", "Noto Sans KR, sans-serif";}
.tbl-type3 .report-date p + p {margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee;}
.tbl-type3 .report-date p strong {display: inline-block; width: 90px;}
.tbl-type3.tbl-tax td {font-family: "Nunito Sans", "Noto Sans KR, sans-serif";}
.tbl-type3.tbl-tax tbody th {font-weight: 400;}
.tbl-type3.tbl-tax tbody .total th,
.tbl-type3.tbl-tax tbody .total td {font-weight: 500; color: #222;}
.tbl-type3.tbl-tax tbody .total td {font-weight: 600;}
.box-marketing {font-family: "Nunito Sans", "Noto Sans KR, sans-serif"; color: #d8d8d8; font-weight: 300;}
.box-marketing span {display: inline-block; margin-right: 5px; color: #999; font-weight: 500;}
.box-marketing span + span {margin-left: 5px;}
.box-marketing span.active {color: #009bfa;}
/* == Type4*/
.tbl-type4 {border-top: 2px solid #555; color: #222;}
.tbl-type4 th,
.tbl-type4 td {padding: 0 15px 0 20px; border-bottom: 1px solid #eee; text-align: left; color: #222; height: 68px; line-height: 24px; letter-spacing: -.5px; word-break: break-all;}
.tbl-type4 th {font-size: 14px; font-weight: 500; color: #222; background-color: #fafafa;}
.tbl-type4 td {font-size: 14px; font-weight: 400; color: #555;}
/* Table - end */

/* 약관동의 - start */
.agree-txt {font-size: 14px; line-height: 22px; color: #222; font-weight: 400;}
.agree-cont {margin-top: 20px; border: 1px solid #eee; border-radius: 15px; background-color: #fff;} /* 약관동의 */
.agree-cont .total-agree {padding: 24px 20px;}
.agree-cont .total-agree .txt {margin-top: 18px; font-size: 14px; color: #666; line-height: 20px;}
.agree-cont .agree-list {padding: 8px 18px; border-top: 1px solid #eee;}
.agree-cont .agree-list .list {position: relative; padding: 11px 22px 11px 0;}
.agree-cont .agree-list .list .view-full {position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); width: 16px; height: 16px; background: url(../images/ico-more-s.png) center center no-repeat; background-size: 20px 20px;}
.agree-cont .agree-list.type2 .list .view-full {-webkit-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg);}
.agree-cont .agree-list .list .form-chk input + label {padding-left: 36px; font-size: 14px; font-weight: 400; color: #555;}
.popup-def .content > .agree-cont {margin-top: 0;}
.agree-scroll {padding: 30px; border-top: 1px solid #eee;}
.agree-scroll .box-scroll {height: 290px; max-height: 290px !important;}
.agree-cont.no-bg-type {margin-top: 40px; border: 0; border-bottom: 2px solid #e5ebf0; border-radius: 0; background-color: transparent;}
.agree-cont.no-bg-type .total-agree {padding: 0 0 10px 0;}
.agree-cont.no-bg-type.no-border {border-bottom: none;}
.agree-cont .clr-txt {margin-top: 2px; padding-left: 36px; font-size: 14px; line-height: 20px; color: #555;}
.agree-cont .clr-txt span {font-weight: 700; color: #009bfa;}
.agree-add-txt {margin-top: 8px; font-size: 12px; line-height: 18px; color: #999;}
/* ==type2 어코디언 타입 */
.agree-cont.type2 {overflow: hidden;}
.agree-cont.type2 .agree-list {padding: 0;}
.agree-cont.type2 .agree-list .list {padding: 22px 20px; border-top: 1px solid #eee;}
.agree-cont.type2 .agree-list .list:first-child {border-top: none;}
.agree-cont.type2 .agree-list .list .view-full {right: 20px; -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); transition: all .3s ease-out;}
.agree-cont.type2 .agree-list .list .view-full.active {-webkit-transform: translateY(-50%) rotate(0deg); transform: translateY(-50%) rotate(0deg);}
.agree-cont.type2 .agree-list .agree-scroll {display: none; border-top: none; border-top: 1px solid #eee; background-color: #fafafa;}
/* ==팝업안 약관동의*/
.popup-center .agree-cont .total-agree {padding: 15px 20px;}
.popup-center .agree-cont .agree-list .list {padding: 8px 22px 8px 0}
/* 약관동의 - end */

/* 이미지 아이콘 - start */
.center-ico-txt {position: relative; padding-top: 60px; text-align: center;}
.center-ico-txt .tit {margin-top: 20px; font-size: 16px; color: #222; font-weight: 300;}
.center-ico-txt .tit2 {font-size: 18px; color: #222; font-weight: 500;}
.center-ico-txt .tit.big {margin-top: 20px; font-size: 20px; color: #222; font-weight: 500;}
.center-ico-txt .txt {font-size: 14px; font-weight: 300; line-height: 24px; color: #222;}
.center-ico-txt:before {content: ""; display: inline-block; margin-bottom: 15px; width: 110px; height: 110px;}
.center-ico-txt.ico-mobile:before {width: 120px; height: 120px; background: url(../images/ico-mobile.png) center top no-repeat; background-size: 120px 120px;}/* 휴대폰으로 로그인 */
.center-ico-txt.ico-alert:before {width: 80px; height: 80px; background: url(../images/ico-nodata.png) center top no-repeat; background-size: 80px 80px;}/* 느낌표 얼럿 이미지 */
.center-ico-txt.ico-password:before {width: 162px; height: 160px; background: url(../images/illu-security.png) center top no-repeat; background-size: 162px 160px;}/*결제 비밀번호 변경 완료*/
/*==화면 정중앙 정렬*/
.center-ico-fixed {position: absolute; top: 50%; transform: translateY(-50%); width: 100%;}
.center-ico-fixed .center-ico-txt {padding-top: 0; margin: 0 auto;}
/* 이미지 아이콘 - end */

/* Box Type - start */
.txt-box {padding: 30px; border: 1px solid #eee; border-radius: 25px;}
.txt-box-gray {padding: 30px; border:none; border-radius: 15px; background-color: #fafafa;}
.pd20 {padding: 20px;}
/* Box Type - end */

/* Step - start */
.step-area {position: absolute; right: 0; top: 0; display: -ms-flexbox; display: flex; align-items: center;}
.step-area div {width: 20px; height: 20px; border-radius: 50%; font-family: "Nunito Sans", "Noto Sans KR, sans-serif"; color: #fff; text-align: center; line-height: 20px; font-size: 12px; font-weight: 500; background-color: #d8d8d8;}
.step-area div.on { background-color: #009bfa;}
.step-area div + div {margin-left: 8px;}

.step-area-side {position: relative;}
.step-area-side:before {content:""; position: absolute; left: 0; top:0; height: 100%; width: 3px; background-color: #eee;}
.step-area-side li + li {margin-top: 22px;}
.step-area-side span {position: relative; display: block; padding: 8px 17px; font-size: 16px; line-height: 24px; color: #555; font-weight: 300; font-family: "Nunito Sans", "Noto Sans KR", sans-serif;}
.step-area-side span:after {content:""; position: absolute; top:0; left: 0; border-top-left-radius: 0; height: 40px; width: 3px; background-color: transparent;}
.step-area-side span.active {color: #009bfa; font-weight: 500;}
.step-area-side span.active:after {background-color: #009bfa;}
/* Step - end */


/* 사용처 안내 */
.affiliate-list{}
.affiliate-list .affiliate-detail{margin-bottom: 20px; color: #999; font-size: 14px;}
.affiliate-list .affiliate-detail .form-chk{float: left;}
.affiliate-list .affiliate-detail .info{float: right; overflow: hidden;}
.affiliate-list .affiliate-detail .info .icon-box{display: -ms-flex; display: flex; float: left;}
.affiliate-list .affiliate-detail .info .icon-box i{display: inline-block; margin-right: 15px; padding-left: 22px; height:18px; line-height: 18px; font-size: 14px; color: #999; font-style: normal;}
.affiliate-list .affiliate-detail .info .icon-box i.point{background: url(../images/ico-used-pointnumber.png) no-repeat 0 0; background-size: 18px 18px;}
.affiliate-list .affiliate-detail .info .icon-box i.account{background: url(../images/ico-used-account.png) no-repeat 0 0; background-size: 18px 18px;}
.affiliate-list .affiliate-detail .info .icon-box i.card{background: url(../images/ico-used-card.png) no-repeat 0 0; background-size: 18px 18px;}
.affiliate-list .affiliate-detail .info .icon-box i.wave{background: url(../images/ico-used-wave.png) no-repeat 0 0; background-size: 18px 18px;}
.affiliate-list .affiliate-detail .info .icon-box i:last-child{margin-right: 0;}
.affiliate-list .affiliate-detail .info .total{float: left; padding-left: 20px; margin-left: 20px; line-height: 18px; border-left: 1px solid #ddd;}
.affiliate-list .affiliate-detail .total span{/*font-family: "Nunito Sans", "Noto Sans KR";*/}
.affiliate-list .affiliate{display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.affiliate-list .affiliate.brand-new{position: relative; padding: 50px 0 50px; margin-bottom: 50px;}
.affiliate-list .affiliate.brand-new::before{position: absolute; top: 0; left: -100%; z-index: -1; content: ""; width: 300%; height: 100%; background-color: #fafafa;}
.affiliate-list .affiliate .aff-tit{padding-bottom: 20px; width: 100%; font-size: 24px; font-weight: 700; color: #222; letter-spacing: -1px;}
.affiliate-list .affiliate .btn-list{position: relative; display: block; float: left; margin-top: 30px; margin-right: 30px; padding: 20px 20px 60px; width: 192px; min-height: 275px; text-align: center; border: 1px solid #d8d8d8; border-radius: 15px; background-color: #fff; transition: all .2s ease;}
.affiliate-list .affiliate .btn-list:nth-of-type(5n){margin-right: 0;}
.affiliate-list .affiliate .btn-list:nth-of-type(-n+5){margin-top: 0;}
.affiliate-list .affiliate:not(.case2) .btn-list:hover {border-color: #009bfa; box-shadow: 0 20px 20px 0 rgba(0,0,0,.04);}/* case2 는 클릭 요소 아니므로 hover 효과 x */
.affiliate-list .affiliate .btn-list .img-area{margin: auto; width: 82px; height: 82px; overflow: hidden;}
.affiliate-list .affiliate .btn-list .img-area img{width: 100%;}
.affiliate-list .affiliate .btn-list .brand{margin-top: 20px; font-size: 14px; line-height: 22px; color: #999;}
.affiliate-list .affiliate .btn-list .benefit{margin-top: 6px; font-size: 14px; font-weight: 500; line-height: 22px; color: #009bfa;}
.affiliate-list .affiliate .btn-list .except-noti {margin-top: 8px; font-weight: 400; font-size: 12px; color: #999; line-height: 20px;}
.affiliate-list .affiliate .btn-list .methods{/* margin-top: 20px; */ position: absolute; bottom: 10px; left: 20px; padding-top: 10px; width: calc(100% - 40px); overflow: hidden; border-top: 1px solid #eee;}
.affiliate-list .affiliate .btn-list .methods .point{margin-right: 10px; float: left; width: 18px; height: 18px;}
.affiliate-list .affiliate .btn-list .methods .account{margin-right: 10px; float: left; width: 18px; height: 18px;}
.affiliate-list .affiliate .btn-list .methods .card{margin-right: 10px; float: left; width: 18px; height: 18px;}
.affiliate-list .affiliate .btn-list .methods .wave{margin-right: 10px; float: right; width: 18px; height: 18px; margin-right: 0 !important;}
.affiliate-list .affiliate .btn-list .methods i{}
.affiliate-list .affiliate .btn-list .methods img{width: 100%;}
.affiliate-list .affiliate.case2 {margin-left: -15px;}
.affiliate-list .affiliate.case2 .btn-list{padding: 20px; width: 146px; min-height: auto; margin: 20px 0 0 15px;}
.affiliate-list .affiliate.case2 .img-area{margin: auto; width: 70px; height: 60px; overflow: hidden;}
.affiliate-list .affiliate.case2 .brand{margin-top: 13px; height: 44px; display: -ms-flex; display: flex; align-items: center; justify-content: center;}


/* 웨이브 안내 팝업 */
/* .wave-guide{padding: 10px;} */
.wave-guide .column-line{position: relative;}
.wave-guide .column-line:first-child:before{position: absolute; top: 0; left: 0; width: 37px; height: 27px; content: ""; background: url(../images/ico-wave-popup-quotation-marks.png) no-repeat 0 0; background-size: 37px 24px;}
.wave-guide .column-line:first-child{padding-bottom: 30px; background: url(../images/ico-popup-wave-big.png) no-repeat right top; background-size: 120px auto;}
.wave-guide .column-line .tit{padding-top: 44px; font-size: 24px; font-weight: 300; line-height: 32px; color: #222; letter-spacing: -2px;}
.wave-guide .column-line .desc{font-size: 14px; font-weight: 300; line-height: 22px; color: #555;}
.wave-guide .column-line .support-box {margin: 30px -30px -40px; padding: 30px 30px 30px; background-color: #f9f9f9;}
.wave-guide .column-line .support-box .tit2 {color: #222; font-weight: 400;}
.wave-guide .column-line .icon-box{margin-top: 20px; display: -ms-flex; display: flex; justify-content: center; font-weight: 300;}
.wave-guide .column-line .icon-box .icon{position: relative; padding-top: 82px; width: 72px; font-size: 14px; color: #222; text-align: center;}
.wave-guide .column-line .icon-box .icon + .icon { margin-left: 30px;}
.wave-guide .column-line .icon-box .icon i{position: absolute; top: 12px; left: 12px; width: 48px; height: 38px;}
.wave-guide .column-line .icon-box .icon i img{width: 100%;}
.wave-guide .column-line .icon-box .icon:before{position: absolute; top: 0; left: 0; content: ""; width: 72px; height: 72px; border-radius: 50%; background-color: #fff;}

/* 사용처 안내 팝업 */
.affiliate-guide{}
.affiliate-guide .brand-area{display: -ms-flex; display: flex; padding: 44px 30px 30px; background-color: #fafafa;}
.affiliate-guide .brand-area .img {padding: 22px 50px; overflow: hidden; width: 182px; height: 130px; box-sizing: border-box; border: 1px solid #eee; border-radius: 15px; background-color: #fff;}
.affiliate-guide .brand-area .img img{width: 82px; height: 82px;}
.affiliate-guide .brand-area .details{padding: 10px 10px 10px 30px;}
.affiliate-guide .brand-area .details .name{font-size: 16px; font-weight: 400; line-height: 24px; color: #222;}
.affiliate-guide .brand-area .details .bnfit{font-size: 16px; font-weight: 500; line-height: 24px; color: #009bfa;}
.affiliate-guide .brand-area .details .icon-box{display: -ms-flex; display: flex; padding-top: 40px;}
.affiliate-guide .brand-area .details .icon-box i{display: inline-block; margin-right: 15px; padding-left: 22px; height:18px; line-height: 18px; font-size: 14px; color: #999; font-style: normal;}
.affiliate-guide .brand-area .details .icon-box i.point{background: url(../images/ico-used-pointnumber.png) no-repeat 0 0; background-size: 18px 18px;}
.affiliate-guide .brand-area .details .icon-box i.account{background: url(../images/ico-used-account.png) no-repeat 0 0; background-size: 18px 18px;}
.affiliate-guide .brand-area .details .icon-box i.card{background: url(../images/ico-used-card.png) no-repeat 0 0; background-size: 18px 18px;}
.affiliate-guide .brand-area .details .icon-box i.wave{background: url(../images/ico-used-wave.png) no-repeat 0 0; background-size: 18px 18px;}
.affiliate-guide .brand-area .details .icon-box i:last-child{margin-right: 0;}
.affiliate-guide .infomation-area{padding: 30px;}
.affiliate-guide .infomation-area .box-scroll {height: 400px; max-height: 400px !important;}


/* 카드 추천 */
.card-recomm-list{margin-top: 30px;}
.tab-list + .card-recomm-list{margin-top: 40px;}
.card-recomm-list .list-wrap{display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; }
.card-recomm-list .list-wrap .btn-list{position: relative; display: block; float: left; margin-top: 30px; margin-right: 29px; padding: 40px 0 40px; width: 248px; min-height: 276px; text-align: center; border: 1px solid #d8d8d8; border-radius: 15px; background-color: #fff; transition: all .2s ease;}
.card-recomm-list .list-wrap .btn-list:nth-child(4n){margin-right: 0;}
.card-recomm-list .list-wrap .btn-list:nth-child(-n+4){margin-top: 0}
.card-recomm-list .list-wrap .btn-list .img-area{margin: auto; width: 140px; height: 88px; overflow: hidden;}
.card-recomm-list .list-wrap .btn-list .img-area img{width: 100%;}
.card-recomm-list .list-wrap .btn-list .brand{margin-top: 20px; padding: 0 10px; font-size: 14px; line-height: 22px; color: #999;}
.card-recomm-list .list-wrap .btn-list .benefit{padding: 0 10px; font-size: 14px; line-height: 22px; font-weight: 500; color: #009bfa;}
.card-recomm-list .list-wrap .btn-list:hover{border-color: #009bfa; box-shadow: 0 20px 20px 0 rgba(0,0,0,.04);}
.card-recomm-list .list-wrap .card-list{position: relative; padding: 40px; margin-top: 30px; margin-right: 30px; width: 525px; min-height: 274px; border: 1px solid #d8d8d8; border-radius: 15px; background-color: #fff; transition: all .2s ease;}
.card-recomm-list .list-wrap .card-list:nth-child(-n+2){margin-top: 0}
.card-recomm-list .list-wrap .card-list:nth-child(2n){margin-right: 0;}
.card-recomm-list .list-wrap .card-list .card{float: left; width: 140px; text-align: center;}
.card-recomm-list .list-wrap .card-list .card .img{margin-bottom: 11px; width: 140px; height: 90px;}
.card-recomm-list .list-wrap .card-list .card .img img{width: 100%;}
.card-recomm-list .list-wrap .card-list .card .btn-arrow{padding-right: 20px; font-size: 14px; line-height: 24px; background:url(../images/ico-next-gray.png) no-repeat right center; background-size: 16px auto; transition: all .2s ease;}
.card-recomm-list .list-wrap .card-list .info{float: left; padding-left: 30px; width: 300px;}
.card-recomm-list .list-wrap .card-list .info h3{font-size: 16px; font-weight: 500; color: #222; line-height: 22px;}
.card-recomm-list .list-wrap .card-list .info .desc{margin-top: 8px;}
.card-recomm-list .list-wrap .card-list .info .desc p{font-size: 14px; color: #999; line-height: 20px;}
/* .card-recomm-list .list-wrap .card-list .info .keywords{margin-top: 15px; font-size: 12px;}
.card-recomm-list .list-wrap .card-list .info .keywords span{display: inline-block; padding-right: 6px;} */
.card-recomm-list .list-wrap .card-list .members {margin-top: 30px;}
.card-recomm-list .list-wrap .card-list .members ul {margin-top: 8px;}
.card-recomm-list .list-wrap .card-list .members ul li {display: flex; margin-top: 4px; font-size: 14px; color: #999; line-height: 20px;}
.card-recomm-list .list-wrap .card-list .members ul li:first-child {margin-top: 0;}
.card-recomm-list .list-wrap .card-list .members ul li .tit {position: relative; margin-right: 9px;}
.card-recomm-list .list-wrap .card-list .members ul li .tit:after {content: ''; display: inline-block; margin-left: 9px; width: 1px; height: 12px; background-color: #d8d8d8;}
.card-recomm-list .list-wrap .card-list:hover {border-color: #009bfa; box-shadow: 0 20px 20px 0 rgba(0,0,0,.04);}
.card-recomm-list .list-wrap .card-list:hover .card .btn-arrow{color: #009bfa; background:url(../images/ico-next-blue.png) no-repeat right center; background-size: 16px auto;}
.card-recomm-view-panel{display: none; margin-top: 50px;}
.card-recomm-view-panel.active{display: block;}
.card-recomm-view-panel dt{margin-bottom: 20px; font-size: 20px; color: #222; font-weight: 500; line-height: 30px; letter-spacing: -1px;}
.card-recomm-view-panel dd{font-size: 14px; color: #555; line-height: 24px;}
.card-recomm-view-panel dl + dl {margin-top: 50px;}

.partner-guide {position: relative; width: 500px; line-height: 28px;}
.partner-guide + .partner-guide {margin-top: 300px;}
.partner-guide .guide-img {position: absolute; left: 580px; top: 0;}
.partner-guide[data="section3"] {padding-bottom: 250px;}
.partner-guide .box-btn{overflow: hidden;}
.partner-guide .box-btn button:nth-child(1){float: left;}
.partner-guide .box-btn button:nth-child(2){float: right;}
.partner-guide .box-btn .btn-big + .btn-big{margin-left: 0;}
.guide-info dt,
.guide-info dd {display: inline-block; box-sizing: border-box; vertical-align: top; margin-top: 40px;}
.guide-info dt {width: 140px; padding-right: 10px; font-size: 16px; font-weight: 500; color: #222;}
.guide-info dd {width: 355px;}
.guide-info.type2 dt {width: 180px;}
.guide-info.type2 dd {width: 315px;}

.app-guide {position: relative; height: 340px; line-height: 24px; padding-top: 55px; margin-bottom: 55px; box-sizing:content-box;}
.app-guide .g-txt-box{position: absolute; top: 0; width: 100%; opacity: 0;}
.app-guide .g-txt-box:first-child{opacity: 1;}
.app-guide .hgroup {margin-bottom: 20px;}
.app-guide .txt {position: absolute; display: none; width: 100%; height: 190px; transition: all .3s ease-out;}
/* .app-guide .txt.active {position: relative;} */
.app-guide .box-btn {position: absolute; left: 0; bottom: 0;}
.app-guide .guide-img {position: absolute; left: 290px; bottom: -260px; padding-top: 60px; width: 500px; height: 600px; /* text-align: center;  */background: url(../images/img-phone-device2.png) no-repeat 0 0 / 500px 600px; }
.app-guide .guide-img .wrap-area{position: absolute; top: 60px; left: 145px; overflow: hidden; width: 210px; height: 453px; border-radius: 20px;}
.app-guide .guide-img img {width: 210px; height: 453px;}
.app-guide .box-btn {margin-top: 80px; text-align: left;}
.video-cont{position: absolute; width: calc(100% + 1px); height: 100%;}
.video-cont video{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; }

.myl-inquiry .tab-list {margin-top: 20px;}
.myl-inquiry .point-infomation,
.myl-inquiry .point-infomation-case2 {margin-top: 30px;}
.myl-inquiry .period-area {margin-top: 40px;}
.myl-inquiry .board-list {margin-top: 30px;}
.myl-inquiry .title + .point-infomation {margin-top: 50px;}

.point-infomation{padding: 30px 40px; border-radius: 25px; background-color: #009bfa;}
.point-infomation section{position: relative; display: block; float: left; height: 80px; color: #fff; padding: 0 30px;}

.myl-inquiry .point-infomation.use-list {background-color: #fff; padding: 0;}
.myl-inquiry .point-infomation.use-list section {height: 134px; padding: 0; width: calc((100% - 20px) / 4); color: #555; text-align: right; border: 1px solid #d8d8d8; border-radius: 25px; box-sizing: border-box;  transition: all .1s;}
.myl-inquiry .point-infomation.use-list section .use-item {display: block; box-sizing: border-box; height: 134px; padding: 28px 30px 20px;}
.myl-inquiry .point-infomation.use-list section .toast-pop-area.toast-right {position: absolute; left: 90px; top: 25px;}
.myl-inquiry .point-infomation.use-list section .toast-pop-area.toast-right .btn-q-toast {padding: 10px; width: 30px; height: 30px;}
.myl-inquiry .point-infomation.use-list section .toast-pop-area.toast-right .btn-q-toast:after {bottom: -10px; left: 1px;}
.myl-inquiry .point-infomation.use-list section .toast-pop-area.toast-right .toast-pop {top: 39px; right: 14px;}
.myl-inquiry .point-infomation.use-list section.active .toast-pop-area.toast-right .btn-q-toast {background: url(../images/btn-tooltip-wh.png) center center/18px 18px no-repeat;}
.myl-inquiry .point-infomation.use-list section:hover {border-color: #009bfa; box-shadow:  0 20px 20px 0 rgba(0,0,0,.04);}
.myl-inquiry .point-infomation.use-list section + section {margin-left: 10px;}
.myl-inquiry .point-infomation.use-list section:nth-of-type(1) {width: calc((100% - 20px) / 2);}
.myl-inquiry .point-infomation.use-list section:nth-of-type(1) .p-area {font-size: 24px;}
.myl-inquiry .point-infomation.use-list .p-tit {text-align: left; font-size: 14px; font-weight: 400;}
.myl-inquiry .point-infomation.use-list .p-area {position: relative; left: 0; display: block; margin-top: 20px; padding-right: 0; font-size: 24px; font-weight: 600; text-align: right; background: none;}
.myl-inquiry .point-infomation.use-list section .p-area span {position: absolute; left: 0; top: 2px;}
.myl-inquiry .point-infomation.use-list section.active {background-color: #009bfa; color: #fff; border-color: #009bfa;}
.myl-inquiry .point-infomation.use-list section:hover {border-color: #009bfa !important; box-shadow:  0 20px 20px 0 rgba(0,0,0,.04);}
.myl-inquiry .point-infomation.use-list section:nth-of-type(4).active {background-color: #fff; color: #555; border-color: #d8d8d8;}
.myl-inquiry .point-infomation section .p-area span {color: #999;}
.myl-inquiry .point-infomation section.active .p-area span {color: #bce2ff;}
.myl-inquiry .point-infomation .p-area .btn-small.primary {background: #fff; border: 1px solid #555; color: #555;}
.myl-inquiry .point-infomation .p-area .btn-small.primary:focus-visible {outline: 2px solid #000 !important;}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .myl-inquiry .point-infomation .p-area .btn-small.primary:focus-visible {outline: 1px dotted #999;}
}

.point-infomation section + section {border-left: 1px solid rgba(255,255,255,0.2);}
.point-infomation section:first-child {padding-left: 0;}
.point-infomation section:last-child {padding-right: 0;}
.point-infomation section:nth-child(1){width: 410px;}
.point-infomation section:nth-child(2){width: 220px;}
.point-infomation section:nth-child(3){width: 220px;}
.point-infomation section:nth-child(4){width: auto;}
.point-infomation .p-tit{display: -ms-flex; display: flex; align-items: center; height: 22px; line-height: 22px; font-size: 16px; font-weight: 400;}
.point-infomation .p-area {position: absolute; left: 30px; bottom: 0; display: inline-block; font-size: 24px; font-family: "Nunito Sans", "Noto Sans KR", sans-serif; font-weight: 500;}
.point-infomation a.p-area {padding-right: 25px; background: url(../images/arrows-down-wh.png) no-repeat right center / 15px 10px;}
.point-infomation section:nth-child(1) .p-area {left: 0; font-size: 34px;}
.point-infomation section .p-area span {display: inline-block; font-size: 14px; font-weight: 300; font-family: "Nunito Sans", "Noto Sans KR", sans-serif;}
.point-infomation .p-area .btn-small.primary {border-color: #fff;}
.point-infomation-case2{padding: 30px 40px; border-radius: 25px; background-color: #009bfa;}
.point-infomation-case2 .tit{float: left; font-size: 16px; font-weight: 400; line-height: 34px; color: #fff;}
.point-infomation-case2 .tit span{font-weight: 300;}
.point-infomation-case2 .point{float: right; font-family: "Nunito Sans", "Noto Sans KR"; font-size: 34px; color: #fff; letter-spacing: 0; line-height: 1;}
.point-info-btn-area{padding: 20px 0 10px;}
.point-info-btn-area .btn-ico-info{float: left;}
.point-info-btn-area .btn-small {float: right;}
.point-info-btn-area .desc{font-size: 14px; color: #999;}
.point-info-btn-area .right-area {float: right;}
.point-info-btn-area .right-area .btn-small {float: left; margin-left: 10px; padding: 0 18px 0 0; height: auto; line-height: 24px; border: 0; background: url(../images/ico-more-arrow-gray.png) right center/16px no-repeat;}
.point-info-btn-area .right-area .btn-small.primary {color: #009bfa; background: url(../images/ico-more-arrow-color.png) right center/16px no-repeat;}

.row-layout .list{margin-top: 60px;}
.row-layout .list:after{display: block; content: ""; clear: both;}
.row-layout .list:first-child{margin-top: 0;}
.row-layout .list .row-line{float: left; width: 790px;}
.row-layout .list .row-line:first-child{width: 290px;}
.row-layout .list .tit{font-size: 16px; line-height: 24px; font-weight: 500; color: #222; letter-spacing: -1px;}
.row-layout .list .desc{font-size: 14px; /*font-weight: 300;*/ line-height: 24px; color: #555;}
.step-box{position: relative;}
.step-box:after{position: absolute; top: 0; left: 44px; content: ""; width: 1px; height: 100%; background-color: #f9f9f9;}
.step-box li{position: relative; z-index: 1; display: -ms-flex; display: flex; align-items: center; padding-left: 135px; height: 90px;}
.step-box li:nth-child(1){background: url(../images/ico-family-add-up1.png) no-repeat 0 0; background-size: 90px 90px;}
.step-box li:nth-child(2){margin-top: 30px; background: url(../images/ico-family-add-up2.png) no-repeat 0 0; background-size: 90px 90px;}
.step-box li:nth-child(3){margin-top: 30px; background: url(../images/ico-family-add-up3.png) no-repeat 0 0; background-size: 90px 90px;}
.step-box li:nth-child(4){margin-top: 30px; background: url(../images/ico-family-add-up4.png) no-repeat 0 0; background-size: 90px 90px;}
.step-box li .step{font-family: "Nunito Sans", "Noto Sans KR"; font-size: 14px; font-weight: 700; color: #999;}
.step-box li .txt{font-size: 14px; font-weight: 400; color: #555;}
.circ-flow-wrap{position: relative; margin-top: 40px;}
.circ-flow-wrap li{position: relative; margin-right: 70px; float: left; width: 145px;}
.circ-flow-wrap li:after{position: absolute; top: 60px; right: -40px; display: block; content: ""; width: 12px; height: 22px; background: url(../images/ico-switcharrow12x22.png) no-repeat 0 0; background-size: 12px 22px;}
.circ-flow-wrap li:last-child{margin-right: 0;}
.circ-flow-wrap li:last-child:after{display: none;}
.circ-flow-wrap li.reverse:after{transform: rotate(180deg);}
.circ-flow-wrap li .txt-rg {line-height: 20px;}
.circ-flow-wrap li .icon-box{position: relative; width: 145px; height: 145px; border-radius: 50%; background-color: #f9f9f9;}
.circ-flow-wrap li .icon-box img{display: inline-block; margin: 40px 0 0 40px; width: 70px; height: 70px;}
.circ-flow-wrap.under{margin-top: 70px;}
.circ-flow-wrap.under:before{position: absolute; top: -45px; left: 285px; transform: rotate(90deg); display: block; content: ""; width: 12px; height: 22px; background: url(../images/ico-switcharrow12x22.png) no-repeat 0 0; background-size: 12px 22px;}
.flow-wrap{ display:flex; display:-ms-flexbox; 
    -webkit-justify-content: space-between; -ms-justify-content:space-between; justify-content: space-between;
    -webkit-align-items: top; -ms-align-items: top; align-items: top;
}
.flow-wrap li{ position: relative; white-space:nowrap; }
.flow-wrap li:nth-child(n+2):after{ content: ''; position:absolute; right:calc(50% + 100%); top:33px; width: 12px; height: 22px; background: url(../images/ico-switcharrow12x22.png) no-repeat 0 0; background-size: 12px 22px; }


.point-infomation-case2.ldream {position: relative; padding: 0;}
.point-infomation-case2.ldream .clear {padding: 30px 40px;}
.point-infomation-case2.ldream .btn-view-more {position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);}
.point-infomation-case2.ldream + .point-info-btn-area {padding: 20px 0 0px;}
.ldream-list {background-color: #fff; border-radius: 24px; border: 2px solid #009bfa; padding: 0 40px 10px;}
.ldream-list li:after {content:""; clear: both; display: block;}
.ldream-list li {display: none; padding: 30px 0;}
.ldream-list li + li {border-top: 1px solid #eee;}
.ldream-list li .subject {float: left; width: 620px; padding-left: 20px; color: #222;}
.ldream-list li .lpoint {float: left; width: 140px; color: #222; font-family: "Nunito Sans", "Noto Sans KR", sans-serif; text-align: right; font-weight: 600;}
.ldream-list li .date {float: right; width: 180px; text-align: right; font-size: 14px; color: #999;}
.ldream-list li .date span {margin-left: 8px; font-family: "Nunito Sans", "Noto Sans KR", sans-serif;}

.point-infomation.charge section:nth-child(1){width: 400px;}
.point-infomation.charge section:nth-child(2){width: 210px;}
.point-infomation.charge section:nth-child(3){width: 210px;}
.point-infomation.charge section:nth-child(4){width: 180px;}
.point-infomation.charge + .point-info-btn-area {padding: 20px 0 0px;}

.date {font-family: "Nunito Sans", "Noto Sans KR"; font-weight: 400; font-size: 14px; color: #222;}/*2021-01-06 font-weight 400으로 변경*/

.customer-main .border-box-btn {margin-top: 0;}
.customer-main .customer-wrap {margin-top: 40px;}
.customer-main .accordion-list {margin-top: 20px;}

.customer-wrap{margin-top: 30px;}
.customer-wrap .sub-title{font-size: 20px; font-weight: 500; color: #222;}
.customer-wrap .contact-cs{position: relative; margin-top: 120px; padding: 50px 0;background: url(../images/bg-custom.png) right 32px no-repeat; background-size: 178px 178px;}
.customer-wrap .contact-cs .sub-title span {font-family: "Nunito Sans", "Noto Sans KR"; font-weight: 600;}
.customer-wrap .contact-cs:before{position: absolute; top: 0; left: -100%; z-index: -1; content: ""; width: 300%; height: 100%; background-color: #fafafa;}
.customer-wrap .contact-cs h3.sub-title{margin-top: 0; margin-right: 153px; float: left;}
.customer-wrap .contact-cs .works-box{float: left; font-family: "Nunito Sans", "Noto Sans KR";}
.customer-wrap .contact-cs .works-box .phone{font-size: 34px; line-height: 1; font-weight: 600; color: #222; letter-spacing: -1px;}
.customer-wrap .contact-cs .works-box .works-time{margin-top: 10px; font-size: 14px; color: #999;}
.customer-wrap .accordion-list li:not(:first-child) {border-top: 1px solid #eee;}
.customer-wrap .accordion-list .step-box li {border-top: 0;}

.accordion-list{border: 1px solid #d8d8d8; border-radius: 25px; background-color: #fff; overflow: hidden;}
.accordion-list li:not(:first-child){border-top: 1px solid #d8d8d8;}
.accordion-list .btn-slide{position: relative; display: -ms-flex; display: flex; align-items: center; padding: 22px 70px 22px 30px;}
.accordion-list .btn-slide:after{content: ""; position: absolute; top: 50%; right: 24px; transform: translateY(-50%); width: 20px; height: 20px; background: url(../images/ico-dropdown20x20.png) no-repeat 0 0; background-size: 20px 20px; transition: transform 0.3s ease;}
.accordion-list .btn-slide.active:after{transform: translateY(-50%) rotate(180deg);}
.accordion-list .btn-slide .ico-q{display: inline-block; padding-left: 30px; font-family: "Nunito Sans", "Noto Sans KR"; font-size: 14px; color: #222; font-weight: 400; line-height: 24px; word-break: break-all; background: url(../images/ico-q.png) no-repeat 0 center; background-size: 15px 15px;}
.accordion-list .btn-slide .category {width: 170px; /*font-family: "Nunito Sans", "Noto Sans KR";*/ font-weight: 400; font-size: 14px; color: #555;}
.accordion-list .btn-slide .tit {width: calc(100% - 400px); font-weight: 400; font-size: 14px; color: #222; word-break: break-all;}
.accordion-list .btn-slide .anwer-info {position: absolute; right: 84px; top: 50%; transform: translateY(-50%); display: -ms-flex; display: flex; align-items: center;}
.accordion-list .btn-slide .anwer-info .date {color: #999;}
.accordion-list .btn-slide .status {margin-right: 98px;}
.accordion-list .answer{display: none; padding: 30px; border-top: 1px solid #eee; background-color: #fafafa;}
.accordion-list .answer .q-question{padding-left: 35px; word-break: break-all; background: url(../images/ico-q.png) no-repeat 0 7px; background-size: 15px 15px;}
.accordion-list .q-answer{padding: 0 30px; font-size: 14px; color: #555; line-height: 24px; background: url(../images/ico-a.png) no-repeat 0 7px; background-size: 15px 15px;}
.accordion-list .q-answer * {font-family: "Noto Sans KR", "Malgun Gothic", sans-serif !important; font-size: 14px !important; word-break: break-all; background-color: #fafafa !important;}
.accordion-list .inquiry-answer {position: relative; margin-top: 28px; padding-top: 30px; border-top: 1px solid #eee;}
.accordion-list .inquiry-answer .txt {position: relative; margin: 10px 0; padding-left: 35px; padding-right: 90px; font-size: 14px; color: #222; line-height: 24px; word-break: break-all; background: url(../images/ico-a.png) no-repeat 0 7px; background-size: 15px 15px;}
.accordion-list .inquiry-answer .date {position: absolute; top: 30px; right: 0; color: #999; letter-spacing: 0;}

.info-box {margin: 40px auto 0; padding: 30px; width: 500px; border: 1px solid #eee; background-color: #fff; border-radius: 15px;}
.info-box + .info-box {margin-top: 40px;}
.info-box .list {display: -ms-flexbox; display: flex; justify-content: space-between; margin-bottom: 8px; width: 100%; font-weight: 400;}
.info-box .list:last-child {margin-bottom: 0;}
.info-box .list .tit {font-size: 14px; color: #222; line-height: 20px; font-weight: 300; text-align: right;}
.info-box .list .txt {font-size: 14px; color: #222; line-height: 20px; text-align: right;}
.card-recomm-view-panel .info-box{margin: 0; padding: 0; width: auto; border: 0; background-color: none; border-radius: 0;}
.card-recomm-view-panel .info-box .tit{margin-top: 50px; margin-bottom: 20px; font-size: 20px; color: #222; font-weight: 500; line-height: 30px; letter-spacing: -1px;}
.card-recomm-view-panel .info-box .tit:first-child{margin-top: 0;}
.card-recomm-view-panel .info-box .txt{font-size: 14px; color: #555; line-height: 24px;}
.card-recomm-view-panel .info-box .txt.dot-type{position: relative; padding-left: 15px;}
.card-recomm-view-panel .info-box .txt.dot-type:before{position: absolute; top: -4px; left: 4px; display: block; content: ".";}
.card-recomm-view-panel .info-box .add-txt{padding-top: 10px; color: #222;}

.elem-both{display: -ms-flex; display: flex; justify-content: space-between; align-items:center;}
.certify-process{}
.certify-process .tit{font-size: 20px; font-weight: 500; line-height: 30px; letter-spacing: -1px; color: #000;}
.certify-process .inst-list{margin-top: 20px; padding: 30px 0 30px; border-top: 2px solid #555; border-bottom: 1px solid #eee;}
.certify-process .inst-list .col {width: 580px}
.certify-process .inst-list .col + .col{margin-top: 10px;}
.certify-process .inst-list .list + .list{padding-top: 20px;}
.certify-process .inst-list .list .title{float: left; width: 210px; font-size: 14px; color: #222; font-weight: 500;}
.certify-process .inst-list .list .cont{float:left;}

.info-summary{overflow: hidden;}
.info-summary .list{float: left; padding: 30px; width: 530px; min-height: 200px; border: 1px solid #eee; border-radius: 15px;}
.info-summary .list:last-child{margin-left: 20px;}
.info-summary .list .tit{margin-bottom: 30px; font-size: 16px; font-weight: 500; color: #222;}
.info-summary .list dl{margin-top: 10px; font-size: 14px; color: #222;}
.info-summary .list dl:first-child{margin-top: 0;}
.info-summary .list dl dt{float: left; font-weight: 300;}
.info-summary .list dl dd{float: right;}

.notice-box{padding: 30px; border-radius: 15px; background-color: #fafafa;}
.notice-box .tit{font-size: 16px; color: #222; font-weight: 400}

.card-recomm-view{position: relative; z-index: 1; padding:30px 0 80px 290px; background-color: #fafafa;}
.card-recomm-view .gray-bg{position: absolute; top: -150px; left: -100%; z-index: -1; content: ""; width: 300%; height: 400px; background-color: #fafafa;}
.card-recomm-view:after{display: block; content: ""; clear: both;}
.card-recomm-view .infomation-area{float: left; width: 460px;}
.card-recomm-view .infomation-area .name{font-size: 24px; color: #222; font-weight: 500; line-height: 34px; letter-spacing: -1px;}
.card-recomm-view .infomation-area .desc-rate{margin-top: 4px; font-size: 14px; color: #009bfa; line-height: 20px;}
.card-recomm-view .infomation-area .benefit{margin-top: 30px;}
.card-recomm-view .infomation-area .benefit .benefit-tit{margin-top: 12px; font-size: 16px; font-weight: 500; color: #009bfa;}
.card-recomm-view .infomation-area .benefit .benefit-tit:nth-of-type(1){margin-top: 0;}
.card-recomm-view .infomation-area .benefit .benefit-desc{margin-top: 3px; font-size: 14px; color: #555;}
.card-recomm-view .img-area{float: right; width: 320px; height: 200px; overflow: hidden;}
.card-recomm-view .img-area img {width: 100%;}

/*결제 비밀번호 재설정 - start*/
.pay-password {width: 575px; margin: 50px auto;}
.password-step {display: -ms-flex; display: flex; margin-top: 50px;}
.password-step li {position: relative; width: 145px; text-align: center;}
.password-step li p {margin-top: 14px;}
.password-step li:before {content:""; display: inline-block; width: 145px; height: 145px; border-radius: 50%; background: url(../images/ico-password-step1.png) no-repeat center center/70px 70px #f9f9f9;}
.password-step li + li {margin-left: 70px;}
.password-step li + li:after {content:""; position: absolute; left: -41px; top: 0; display: inline-block; width: 12px;  height: 145px; background: url(../images/ico-arrow2.png) no-repeat center center; background-size: 12px 22px;}
.password-step li:nth-of-type(2):before {background-image: url(../images/ico-password-step2.png);}
.password-step li:nth-of-type(3):before {background-image: url(../images/ico-password-step3.png);}
.pop-pay-password {position: relative; height: 100%; padding-top: 60px; text-align: center;}
.pop-pay-password .choose-password {padding: 0 30px; margin-top: 60px;}
.pop-pay-password .choose-password li + li {margin-top: 10px;}
.pop-pay-password .choose-password li a {position: relative; padding-left: 30px; display: -ms-flex; display: flex; align-items: center; height: 100px; border: 1px solid #eee; border-radius: 15px;font-size: 16px; font-weight: 500; color: #222;  transition: all .2s ease;}
.pop-pay-password .choose-password li a:after {content:""; position: absolute; right: 23px; top: 50%; width: 60px; height: 60px; display: inline-block; transform: translateY(-50%); background: url(../images/ico-certi-process1.png) no-repeat 0 0; background-size: 60px 60px;}
.pop-pay-password .choose-password li.choose2 a:after {background-image: url(../images/ico-certi-process4.png);}
.pop-pay-password .choose-password li.choose3 a:after {background-image: url(../images/ico-certi-process2.png);}
.pop-pay-password .choose-password li.choose4 a:after {background-image: url(../images/ico-certi-process5.png);}
.pop-pay-password .choose-password li a:hover {border-color: #009bfa; box-shadow:  0 20px 20px 0 rgba(0,0,0,.04);}
.pop-pay-password .h4 {margin-top: 80px;}
.pop-pay-password .pay-password-key {width: 300px; display: inline-block; margin-top: 45px; height: 18px;}
.pop-pay-password .pay-password-key span {display: inline-block; width: 16px; height: 16px; border-radius: 50%; background-color: #eee; text-indent: -9999px; overflow: hidden;}
.pop-pay-password .pay-password-key span + span {margin-left: 26px;}
.pop-pay-password .pay-password-key span.active {background-color: #009bfa;}
.pop-pay-password .caution {margin-top: 30px; font-size: 12px; color: #e02020;}
.pop-pay-password .keypad {position: absolute; left: 0; bottom: 0; width: 100%; height: 260px; text-align: center; background-color: #eee;}
.pop-pay-password .center-ico-fixed {top: 46%;}
/*결제 비밀번호 재설정 - end*/

/* 소득공제 안내 페이지  - start */
.tax-container {width: 790px; margin: 50px auto;}
.tax-container .step {display: -ms-flex; display: flex; margin-top: 50px;}
.tax-container .step li {position: relative; width: 145px; text-align: center;}
.tax-container .step li p {margin-top: 14px;}
.tax-container .step li:before {content:""; display: inline-block; width: 145px; height: 145px; border-radius: 50%; background: url(../images/ico-tax-step1.png) no-repeat center center/120px 120px #f9f9f9;}
.tax-container .step li + li {margin-left: 70px;}
.tax-container .step li + li:after {content:""; position: absolute; left: -41px; top: 0; display: inline-block; width: 12px;  height: 145px; background: url(../images/ico-arrow2.png) no-repeat center center; background-size: 12px 22px;}
.tax-container .step li:nth-of-type(2):before {background-image: url(../images/ico-tax-step2.png);}
.tax-container .step li:nth-of-type(3):before {background-image: url(../images/ico-tax-step3.png);}
.tax-container .step li:nth-of-type(4):before {background-image: url(../images/ico-tax-step4.png);}
/* 소득공제 안내 페이지  - end */


/* 전자영수증 - start */
.content.receipt {width: 420px;}
.elc-receipt {position: relative;  padding-bottom: 20px; background-color: #fff; border-radius: 25px; box-shadow: 0 30px 30px 0 rgba(0,0,0,.08);}
/*.elc-receipt:after {content: ""; display: block; position: absolute; left: 0; top: 100%; width: 100%; height: 10px; background: url(../images/bg-receipt-bot.png) no-repeat left top;}*/
.elc-receipt .er-h-area {position: relative;}
.elc-receipt .er-h-area .logo {position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); overflow: hidden; width: 154px; height: 126px; text-align: center; /* border-radius: 50%; */}
/* .elc-receipt .er-h-area .logo img {width: 100%; max-width: 100%;} */
.elc-receipt .er-h-area .logo img.brand-logo {width: 80px; height: 80px;}
.elc-receipt .er-h-area .logo img.ico {width: 100%;}
.elc-receipt .er-h-area .er-tit {padding-top: 83px; font-size: 16px; line-height: 28px; letter-spacing: -1px; color: #222; font-weight: 500; text-align: center;}
.elc-receipt .er-h-area .txt-rg-sm {margin-top: 10px; text-align: center;}
.elc-receipt .er-h-area .er-price {padding-bottom: 20px; font-family: "Nunito Sans", "Noto Sans KR"; font-weight: 700; font-size: 24px; line-height: 24px; letter-spacing: 0; color: #009bfa; text-align: center;}
.elc-receipt .er-h-area .er-price em {margin-left: 1px; font-family: "Noto Sans KR"; font-weight: 500; font-size: 22px; line-height: 30px;}
.elc-receipt .er-scroll {padding: 0 24px 10px; /* max-height: 300px; overflow-y: auto; */}
.elc-receipt .er-scroll .section-wrap {padding: 20px 0; border-top: 1px solid #eee;}
.elc-receipt .er-scroll .section-wrap .sec-tit {font-weight: 400; font-size: 14px; line-height: 22px;}
.elc-receipt .er-scroll .section-wrap .section {display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; margin-top: 10px; font-size: 14px; line-height: 24px; letter-spacing: -.5px; color: #222;}
.elc-receipt .er-scroll .section-wrap .section:first-child {margin-top: 0;}
.elc-receipt .er-scroll .section-wrap .section .sec-subject {width: 40%; font-weight: 300; line-height: 19px;}
.elc-receipt .er-scroll .section-wrap .section .sec-txt {width: 60%; font-family: "Nunito Sans", "Noto Sans KR", sans-serif; color: #222; line-height: 19px; text-align: right;}
.elc-receipt .er-scroll .section-wrap .buy-list .section:first-of-type {margin-top: 19px;}
.elc-receipt .er-scroll .section-wrap:first-child {border-top: 0;}
.elc-receipt .er-scroll .align-center .txt-link {color: #222;}
.elc-receipt .er-scroll .barcode {padding-top: 30px; border-top: 1px solid #eee;}
/* 전자영수증 - end */

/*배경 일러스트 이미지 - start*/
.visual-bg {width: 360px; height: 160px; background-color: #009bfa; border-radius: 112.5px;}
/*== 가입안내*/
.join-visual {position: fixed; right: 10%;}
.join-visual .coin {position: absolute; z-index: 6; right: 103px; top: -11px; width: 31px; height: 35px; background-image: url(../images/img-lpoint1.png);}
.join-visual .woman {position: absolute; z-index: 5; left: 158px; bottom: -32px; width: 51px; height: 120px; background-image: url(../images/img-woman.png);}
.join-visual .building2 {position: absolute; z-index: 4; left: 65px; bottom: 0; width: 48px; height: 63px; background-image: url(../images/img-building2.png);}
.join-visual .phone {position: absolute; z-index: 3; left: 50px; bottom: -17px; width: 142px; height: 211px; background-image: url(../images/img-phone.png);}
.join-visual .building1 {position: absolute; z-index: 2; left: 38px; bottom: 0; width: 219px; height: 80px; background-image: url(../images/img-building1.png);}
/*== 제휴안내*/
/* .partner-visual {position: absolute; right: -440px;} */
.partner-visual {position: fixed; top: 250px; margin-left: 580px;}
.partner-visual .object {position: absolute; z-index: 5; left: 274px; bottom: -10px; width: 20px; height: 20px; background-color: #ffec00; border-radius: 50%; opacity: 0; transform: translateX(30px);}
.partner-visual .wave {position: absolute; z-index: 4; left: 218px; top: -39px; width: 70px; height: 70px; background-image: url(../images/img-wave.png); background-size: 70px 70px; opacity: 0; transform: translateX(20px);}
.partner-visual .fingerprint {position: absolute; z-index: 3; left: 179px; bottom: 27px; width: 50px; height: 50px; background-image: url(../images/img-fingerprint.png); background-size: 50px 50px; opacity: 0; transform: translateX(-20px);}
.partner-visual .hand {position: absolute; z-index: 2; left: 50px; bottom: -62px; width: 142px; height: 254px; background-image: url(../images/img-hand.png); background-size: 142px 254px; opacity: 0; transform: translateX(-20px);}
.partner-visual .survey {position: absolute; z-index: 3; left: 142px; bottom: -9px; width: 173px; height: 196px; background-image: url(../images/img-survey.png); background-size: 173px 196px; opacity: 0; transform: translateX(-20px);}
.partner-visual .hand2 {position: absolute; z-index: 2; left: 40px; bottom: -15px; width: 127px; height: 121px; background-image: url(../images/img-hand2.png); background-size: 127px 121px; opacity: 0; transform: translateX(-20px);}
.partner-visual .object1 {position: absolute; z-index: 3; left: 169px; top: 56px; width: 20px; height: 20px; background-color: #fff; border-radius: 50%; opacity: 0; transform: translateY(10px);}
.partner-visual .object2 {position: absolute; z-index: 3; left: 34px; top: 36px; width: 26px; height: 26px; background-color: #fff; border-radius: 50%; opacity: 0; transform: translateY(10px);}
.partner-visual .object3 {position: absolute; z-index: 3; left: 88px; bottom: 13px; width: 9px; height: 9px; background-color: #fff; border-radius: 50%; opacity: 0; transform: translateY(10px);}
.partner-visual .plane {position: absolute; z-index: 3; left: 95px; top: -72px; width: 103px; height: 103px; background-image: url(../images/img-plane.png); background-size: 104px 104px; opacity: 0; transform: translateY(10px);}
.partner-visual .card {position: absolute; z-index: 3; left: 148px; bottom: -30px; width: 75px; height: 75px; background-image: url(../images/img-card.png); background-size: 76px 76px; opacity: 0; transform: translateY(10px);}
.partner-visual .graph {position: absolute; z-index: 3; left: 0px; bottom: 17px; width: 49px; height: 49px; background-image: url(../images/img-graph.png); background-size: 50px 50px; opacity: 0; transform: translateY(10px);}
.partner-visual .lpoint {position: absolute; z-index: 2; left: 66px; top: 53px; width: 60px; height: 67px; background-image: url(../images/img-lpoint2.png); background-size: 61px 68px; opacity: 0; transform: translateY(10px);}
.partner-visual .line1 {position: absolute; z-index: 1; left: 113px; top: 24px; width: 2px; height: 50px; background-color: #73caff; transform: rotate(25deg); opacity: 0;}
.partner-visual .line2 {position: absolute; z-index: 1; left: 56px; top: 82px; width: 2px; height: 50px; background-color: #73caff; transform: rotate(60deg); opacity: 0;}
.partner-visual .line3 {position: absolute; z-index: 1; left: 131px; top: 91px; width: 2px; height: 50px; background-color: #73caff; transform: rotate(-50deg); opacity: 0;}
.partner-visual .lpoint {position: absolute; z-index: 2; left: 66px; top: 53px; width: 60px; height: 67px; background-image: url(../images/img-lpoint2.png); background-size: 61px 68px; opacity: 0;}
.partner-visual .graph2 {position: absolute; z-index: 1; bottom: 0px; width: 26px; background-color: #363868; opacity: 1;}
.partner-visual .graph2:before {content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background-color: #2c2e56;}
.partner-visual .graph2.stick1 {left: 64px; height: 40px;  opacity: 1; height: 0;}
.partner-visual .graph2.stick2 {left: 96px;  height: 74px; opacity: 1; height: 0;}
.partner-visual .graph2.stick3 {left: 130px; height: 109px; opacity: 1; height: 0;}
.partner-visual .graph2.stick4 {left: 164px; height: 179px; opacity: 1; height: 0;}
.partner-visual .valid {position: absolute; z-index: 2; left: 63px; bottom: -4px; width: 180px; height: 125px; background-image: url(../images/img-valid.png); background-size: 180px 125px; opacity: 0;}
.partner-visual .coin1 {position: absolute; z-index: 3; left: 64px; top: 24px; width: 30px; height: 34px; background-image: url(../images/img-coin1.png); background-size: 31px 35px; opacity: 0; transform: translateY(10px);}
.partner-visual .coin2 {position: absolute; z-index: 3; left: 122px; top: -13px; width: 22px; height: 20px; background-image: url(../images/img-coin2.png); background-size: 24px 23px; opacity: 0; transform: translateY(10px);}
.partner-visual .coin3 {position: absolute; z-index: 3; left: 263px; top: 91px; width: 26px; height: 29px; background-image: url(../images/img-coin3.png); background-size: 26px 29px; opacity: 0; transform: translateY(10px);}

.partner-visual.active1 .object{opacity: 1; transform: translateX(0px); transition: all 0.3s ease;}
.partner-visual.active1 .wave{opacity: 1; transform: translateX(0px); transition: all 0.4s ease;}
.partner-visual.active1 .fingerprint{opacity: 1; transform: translateX(0px); transition: all 0.5s ease;}
.partner-visual.active1 .hand{opacity: 1; transform: translateX(0px); transition: all 0.6s ease;}
.partner-visual.active2 .survey{opacity: 1; transform: translateX(0px); transition: all 0.4s ease;}
.partner-visual.active2 .hand2{opacity: 1; transform: translateX(0px); transition: all 0.6s ease;}
.partner-visual.active3 .lpoint{opacity: 1; transform: translateY(0px); transition: all 0.3s ease;}
.partner-visual.active3 .line1{opacity: 1; transition: all 0.3s ease; transition-delay: 0.2s;}
.partner-visual.active3 .line2{opacity: 1; transition: all 0.3s ease; transition-delay: 0.2s;}
.partner-visual.active3 .line3{opacity: 1; transition: all 0.3s ease; transition-delay: 0.2s;}
.partner-visual.active3 .plane{opacity: 1; transform: translateY(0px); transition: all 0.3s ease; transition-delay: 0.4s;}
.partner-visual.active3 .card{opacity: 1; transform: translateY(0px); transition: all 0.3s ease; transition-delay: 0.5s;}
.partner-visual.active3 .graph{opacity: 1; transform: translateY(0px); transition: all 0.3s ease; transition-delay: 0.6s;}
.partner-visual.active3 .object1{opacity: 1; transform: translateY(0px); transition: all 0.3s ease; transition-delay: 0.7s;}
.partner-visual.active3 .object2{opacity: 1; transform: translateY(0px); transition: all 0.3s ease; transition-delay: 0.7s;}
.partner-visual.active3 .object3{opacity: 1; transform: translateY(0px); transition: all 0.3s ease; transition-delay: 0.7s;}
.partner-visual.active4 .graph2.stick1{height: 40px; transition: all 0.3s ease;}
.partner-visual.active4 .graph2.stick2{height: 96px; transition: all 0.3s ease; transition-delay: 0.05s;}
.partner-visual.active4 .graph2.stick3{height: 130px; transition: all 0.3s ease; transition-delay: 0.1s;}
.partner-visual.active4 .graph2.stick4{height: 164px; transition: all 0.3s ease; transition-delay: 0.15s;}
.partner-visual.active4 .valid{opacity: 1; transition: all 0.3s ease; transition-delay: 0.25s;}
.partner-visual.active4 .coin1{opacity: 1; transform: translateY(0px); transition: all 0.3s ease; transition-delay: 0.3s;}
.partner-visual.active4 .coin2{opacity: 1; transform: translateY(0px); transition: all 0.3s ease; transition-delay: 0.4s;}
.partner-visual.active4 .coin3{opacity: 1; transform: translateY(0px); transition: all 0.3s ease; transition-delay: 0.5s;}

/*==가족합산*/
.family-visual {position: absolute; right: -100px;}
.family-visual .coin1 {position: absolute; z-index: 2; left: 20px; top: -11px; width: 45px; height: 49px; background-image: url(../images/img-coin4.png); background-size: 45px 49px;}
.family-visual .coin2 {position: absolute; z-index: 2; left: 223px; bottom: -23px; width: 42px; height: 43px; background-image: url(../images/img-coin5.png); background-size: 42px 43px;}
.family-visual .coin3 {position: absolute; z-index: 2; left: 282px; bottom: 40px; width: 23px; height: 24px; background-image: url(../images/img-coin6.png); background-size: 23px 24px;}
.family-visual .family {position: absolute; z-index: 1; left: 27px; bottom: -11px; width: 190px; height: 151px; background-image: url(../images/img-family.png); background-size: 190px 151px;}
/*배경 일러스트 이미지 - end*/

/* 로그인 - start */
.box-login {text-align: center;}
/* .box-login .form-text.wrong {margin-bottom: 30px;} */
.box-login .form-chk.square input + label {color: #222; font-weight: 400;/* background: url(../images/ico-check-s.png) 2px 2px no-repeat; background-size: 16px 16px;*/}
.sns-login-area {/* position: absolute; bottom: 20px; left: 0; */ margin-top: 30px; display: -ms-flex; display: flex; justify-content: center; width: 100%;}
.sns-login-area .list {display: inline-block; width: 40px; height: 40px; font-weight: 400; font-size: 13px; color: #555; line-height: 19px; text-align: center; text-indent: -9999px; overflow: hidden; background: url(../images/ico-kakao.png) center center no-repeat; background-size: 40px 40px;}
.sns-login-area .list + .list {margin-left: 20px;}
.sns-login-area .list.kakao {}
.sns-login-area .list.naver {background-image: url(../images/ico-naver.png);}
.sns-login-area .list.facebook {background-image: url(../images/ico-facebook.png);}
/* 로그인 - end */

/* 카드등록안내 - start */
.card-list {position: relative; padding: 20px 210px 20px 0; min-height: 154px; border-top: 1px solid #eee;}
.card-list:first-child {margin-top: -20px; border-top: none}
.card-list dt {color: #009bfa; font-weight: 500;}
.card-list .dd-img {position: absolute; top: 20px; right: 0; width: 180px; height: 112px;}
.card-list .dd-img  img {width: 180px; height: 112px;}
.card-list .dd-txt {position: relative; margin-top: 10px; padding-left: 8px; font-weight: 300; line-height: 24px;}
.card-list .dd-txt:before {content:""; position: absolute; left:0; top: 12px; width: 1px; height: 1px; background-color: #222;}
.card-list .dd-txt span {color: #999; font-weight: 400;}
.card-certify ul {-ms-flex-wrap: wrap; flex-wrap: wrap; }
.card-certify li {height: 154px;}
.card-certify li + li {margin-left: 16px;}
.card-certify li a {text-align: center; padding-top: 100px;}
.card-certify li .tit { font-size: 14px; font-weight: 400; color: #555;}
.card-certify li a:after {top:30px; left: 50%; transform: translateX(-50%); background-image: url(../images/ico-certi-process1.png); background-size: 60px 60px;}
.card-certify li.mn2 a:after {background-image: url(../images/ico-certi-process2.png);}
.card-certify li.mn3 a:after {background-image: url(../images/ico-certi-process4.png);}
.card-certify li.mn4 a:after {background-image: url(../images/ico-certi-process5.png);}
/* 카드등록안내 - end */

/*주소검색 - start*/
.box-zip .tit {font-size: 16px; color: #222;}
.box-zip .txt {margin-top: 60px; font-weight: 300; color: #222; line-height: 24px;}
.box-zip .example {margin-top: 40px; line-height: 24px;}
.box-zip .example li {color: #999;}
.box-zip .example li + li {margin-top: 2px;}
.box-zip .example li:before {background-color:  #999;}
.zip-list {border-top: 2px solid #555; border-bottom: 1px solid #eee;}
.popup-center .wrap .contents .zip-list .box-scroll {height: auto; max-height: 290px !important;}
.zip-list li + li {border-top: 1px solid #eee;}
.zip-list li .form-rad .radio {width: 100%;}
.zip-list li label {position: relative; display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;  flex-shrink: 1; width: 100%; padding: 20px 20px 20px 140px; box-sizing: border-box;}
.zip-list .form-rad input + label:before,
.zip-list .form-rad input + label:after {top: 50%; transform: translateY(-50%);}
.zip-list li label .code {position: absolute; left: 30px; top: 50%; transform: translateY(-50%); font-family: "Nunito Sans", "Noto Sans KR"; color: #222;}
.zip-list li label .address {position: relative; display: block; width: 100%; min-height: 24px; padding-left: 72px; box-sizing: border-box; color: #222;}
.zip-list li label .address + .address {margin-top: 4px;}
.zip-list li label .address .tag {position: absolute; left: 0; top: 0; width: 62px;}
.zip-detail {border-top: 2px solid #555; border-bottom: 1px solid #eee; padding: 20px 0; background-color: #fafafa;}
.zip-detail .box-address {position: relative; display: -ms-flex; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0 20px 0 140px;}
.zip-detail .box-address .code {position: absolute; left: 20px; top: 10px; font-family: "Nunito Sans", "Noto Sans KR"; color: #222;}
.zip-detail .box-address .address {position: relative; display: block; width: 100%; padding-left: 72px; box-sizing: border-box; color: #222;}
.zip-detail .box-address .address + .address {margin-top: 4px;}
.zip-detail .box-address .address .tag {position: absolute; left: 0; top: 0; width: 62px;}
.zip-detail .box-address .form-text {width: 100%;}
.zip-detail .box-address .form-text input {background-color: #fff;}

.select-addr .btn-addr {display: block; margin-bottom: 10px; border: 1px solid #eee; border-radius: 5px; transition: all .3s ease;}
.select-addr .btn-addr.on {border: 1px solid #009bfa; box-shadow: 0 10px 10px 0 rgba(0,0,0,.08);}
.select-addr .btn-addr .addr {position: relative; display: block; height: 50px; padding: 13px 20px 13px 92px; font-size: 14px; line-height: 19px;}
.select-addr .btn-addr .tag {position: absolute; top: 13px; left: 20px; display: inline-block; width: 62px;}

.card-finish {text-align: center;}
.card-finish .img-card {margin: 40px auto 0; width: 300px; height: 186px;}
.card-finish .img-card img {min-width: 100%; max-height: 100%; object-fit: cover;}
.card-finish .title {margin-top: 40px; font-size: 18px; font-weight: 500; color: #222;}
.card-finish .name {margin-top: 20px; font-size: 16px; line-height: 28px; color: #222; font-weight: 300;}
.card-finish .number {margin-top: 6px; font-size: 16px; line-height: 20px; color: #222; font-weight: 300; font-family: "Nunito Sans", "Noto Sans KR";}
/*주소검색 - end*/

/*에러 페이지 - start*/
.util-wrap {position: relative; width: 100%; height: 100%;}
.error-wrap {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;}
.error-wrap .txt {font-weight: 300; color: #222;}
.error-wrap.error:before {content: ""; display: inline-block; width: 296px; height: 232px; background: url(../images/img-error.png) no-repeat center top; background-size: 296px 232px;}
.error-wrap.system-check:before {content: ""; display: inline-block; width: 296px; height: 232px; background: url(../images/img-system-check.png) no-repeat center top; background-size: 296px 232px;}
.error-wrap .hgroup .h3 {font-weight: 400;}
/*에러 페이지 - end*/

/* Terms - start */
.terms-container {position: relative; width: 100%; margin-top: 40px; font-size: 14px; line-height: 24px;}
.terms-container b {font-weight: initial;}
.terms-container .terms-content > p {margin-top: 10px;}
.terms-container hr {margin: 30px 0; border: none; height: 1px; background-color: #eee;}
.__typo.__1 {margin-bottom: 30px; font-weight: 500; font-size: 16px; color: #555;}
.__typo.__2 {margin: 30px 0 10px; font-weight: 500; font-size: 16px; color: #555;}
.__typo.__3 {font-weight: 400; margin: 30px 0 10px;}
.__typo.__4 {font-weight: 500; margin-top: 20px;}
.terms-content {margin:10px 0 40px;}
/* .terms-container .terms-h2 {padding-top: 20px; font-size: 14px; line-height: 24px;}
.terms-container .terms-h2 b {font-weight: 400;}
.terms-container .terms-box {padding: 10px 0 30px; color: #666;}
.terms-container .terms-box li {position: relative; padding-left: 22px;}
.terms-container .terms-box li.wide {padding-left: 25px;}
.terms-container .terms-box li > p {position: relative;}
.terms-container .terms-box li span {position: absolute; top: 0; left: 0;}
.terms-container .terms-box > .terms-list > li:first-child {margin-top: 0;} */
.terms-list li {position: relative; padding-left: 20px;}
.terms-list li + li {margin-top: 20px;}
.terms-list li em {position: absolute; left: 0; top: 0;}
.terms-list.type2 {font-weight: 300; color: #222;}
.terms-list.type2 li + li {margin-top: 10px;}
.terms-table {width: 500px; margin-top: 10px; border-top: 2px solid #555;}
.terms-table th,
.terms-table td {font-weight: 400; border-left: 1px solid #eee; border-bottom: 1px solid #eee; padding: 10px 15px;}
/* .terms-table th:first-child,
.terms-table td:first-child {border-left: none;} */
.terms-table th {text-align: center; color: #222; background-color: #fafafa;}
.terms-table tbody th {text-align: left;}
.terms-table.__fluid {width: 100%;}
/* .terms-table .caption{display: none;} */

.term-list {display: -ms-flex; display: flex;}
.term-list + .term-list {margin-top: 30px;}
.term-list > li {width: calc(100% / 3); }
.term-list > li > a {color: #222; }
.sub-list {margin-top: 8px;}
.sub-list li + li {margin-top: 4px;}
.sub-list li a {position: relative;}
.sub-list li a.on {color: #009bfa;}
.sub-list li a.on:before {content:""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #009bfa; }
/* Terms - end */

/* App Download - start */
.app-down {position: relative; padding-top: 50px; height: 598px; /*background: url(../images/app-down-visual.png) no-repeat right top;*/}
.app-down .guide-img {position: absolute; right: 0px; top: -40px; padding-top: 60px; width: 500px; height: 600px; /* text-align: center; */ background: url(../images/img-phone-device.png) no-repeat 0 0 / 500px 600px;}
.app-down .guide-img .wrap-area{position: absolute; top: 60px; left: 145px; overflow: hidden; width: 210px; height: 453px; border-radius: 20px;}
.app-down .w500 {letter-spacing: -1px;}
.app-down .txt-box-gray {margin-top: 80px;}
.app-down .form-certify {padding: 0 90px 0 146px}
.app-down .form-certify .choose-phone {width: 136px;}
.app-down .visual {position: absolute; }
.store-list li {position: relative; display: inline-block; width: 85px; text-align: center; font-size: 12px; color: #222; font-family: "Nunito Sans", "Noto Sans KR";}
.store-list li a {position: relative; display: block; padding-bottom: 10px}
.store-list li a:before {content:""; width: 40px; height: 40px; display: inline-block; vertical-align: top; background: url(../images/logo-app-install-googlestore.png) no-repeat; background-size: 40px 40px;}
.store-list li + li {margin-left: 35px;}
.store-list li span {display: block; margin-top: 12px; font-weight: 600; line-height: 16px;}
.store-list li.app a:before {background-image: url(../images/logo-app-install-appstore.png);}
.store-list li.one a:before {background-image: url(../images/logo-app-install-onestore.png);}
.store-list li a:hover {color: #009bfa;}
.store-list li .qr-code {position: absolute; top: 110%; left: 0; width: 176px; height: 176px; padding: 30px; z-index: -1; border: 1px solid #009bfa; background-color: #fff; border-radius: 0 15px 15px 15px; transition: all .3s ease-out; opacity: 0;}
.store-list li .qr-code img {width: 116px; height: 116px;}
.store-list li a:focus + .qr-code,
.store-list li a:hover + .qr-code {z-index: 2; top: 100%; opacity: 1;}
/* App Download - end */


/* datepicker - start */
.sp,.sel_wrap .btn_sel:after,#header .login_txt:before,.inp_chk_wrap .inp_chk+label:before,.login_sns a:before,.btn_arrow:after,.quick_menu h3:before,.location .path:after,.btn_guide:before,.art_lst .word:before,.info_lst strong:before,.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span,.ui-datepicker:before,.ui-datepicker .ui-datepicker-close:before,.pwd_lst li .pwd_change:before,.pwd_lst .pwd_txt:after,.info_detail .dot:before,.etc_wrap .err_tit:before,.ly_qrcode:after,.option_lst .option_tit:before,.inp_rdo_wrap .inp_rdo+label:before,.story_lst .flag_tx:before,.go_list:before,.detail_view:before,.h_info:before,.toggle_box .btn_tg:after,.lost_wrap .tbl_results .inp_rdo_wrap .inp_rdo+.radio_bx, .chk_bx .inp_rdo, .btn_share:before,.btn_event_win:after,.info_tx:before,.btn_area .btn,.slick_wrap .slick-prev:before,.slick_wrap .slick-next:before,.pleasure_detail_wrap .slick_wrap button:before,.step_lst li:before,.exchange_lst li:after,.go_detail .mth_collection:after,.analysis_bx:after,.pleasure_content .img_area:after,.dnt_cntbx .img_area:after,.art_lst .word:after,.lp_brand_wrap .nation_lst>li:before,.lp_brand_wrap .channel_lst>li>a:before,.point_lst li a:before{display:inline-block;overflow:hidden;background:url(../images/sp.png) no-repeat;width:1px;height:1px;font-size:1px;text-indent:9999px;white-space:nowrap}
.ui-datepicker{display:none;width:267px;margin:10px 0 0 -119px;padding:14px 0 12px;border:1px solid #c5c5c5;background:#fff;text-align:center; font-family: "Nunito Sans", "Noto Sans KR";}
.ui-datepicker:before{position:absolute;top:-8px;left:50%;width:13px;height:8px;margin-left:-6px;background-position:-209px -108px;content:''}
.ui-datepicker .ui-datepicker-header{display:inline-block;position:relative;text-align:center}
.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{position:absolute;width:26px;height:26px;cursor:pointer}
.ui-datepicker .ui-datepicker-prev{right:100%;margin-right:5px}
.ui-datepicker .ui-datepicker-next{left:100%;margin-left:5px}
.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span{position:absolute;top:50%;left:50%;width:6px;height:11px;margin:-5px 0 0 -3px}
.ui-datepicker .ui-datepicker-prev span{background-position:-218px -79px}
.ui-datepicker .ui-datepicker-next span{background-position:-218px -92px}
.ui-datepicker .ui-datepicker-title{display:inline-block;font-size:18px;line-height:26px;font-weight: 600;}
.ui-datepicker .ui-datepicker-title select{margin:1px 0;font-size:1em}
.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year{width:45%}
.ui-datepicker .ui-datepicker-month:after{content:'.'}
.ui-datepicker table{width:100%;margin-top:10px;font-size:12px;border-collapse:collapse}
.ui-datepicker th{font-weight:500;color:#000;line-height:24px}
.ui-datepicker td span,.ui-datepicker td a{display:block;text-align:center;text-decoration:none}
.ui-datepicker td span{padding:3px}
.ui-datepicker td a{width:19px;height:20px;margin:0 auto;padding-right:1px;border:1px solid #fff;border-radius:100%;line-height:20px;display: flex; justify-content: center; align-items: center;}
.ui-datepicker td a:hover,.ui-state-highlight,.ui-datepicker .ui-state-active,.ui-datepicker .ui-datepicker-today .ui-state-active{border-color:#009bfa;background:#009bfa;color:#fff}
.ui-datepicker .ui-datepicker-today a{border-color:#009bfa;background:#fff;color:#000}
.ui-datepicker .ui-datepicker-week-end,.ui-datepicker .ui-datepicker-week-end a{color:#ff4d3c}
.ui-datepicker .ui-datepicker-week-end:last-child,.ui-datepicker .ui-datepicker-week-end:last-child a{color:#009bfa}
.ui-datepicker .ui-datepicker-week-end a:hover,.ui-datepicker .ui-datepicker-week-end .ui-state-active,.ui-datepicker .ui-datepicker-week-end:last-child .ui-state-active{color:#fff}
.ui-datepicker .ui-datepicker-current{display:none}
.ui-datepicker .ui-datepicker-close{overflow:hidden;position:absolute;top:14px;right:6px;width:25px;height:25px;font-size:0;line-height:999px}
.ui-datepicker .ui-datepicker-close:before{position:absolute;top:7px;right:7px;width:11px;height:11px;background-position:-214px -33px;content:''}
.ui-datepicker .ui-datepicker-unselectable span{color:#cacaca}
.ui-datepicker .ui-datepicker-week-end.ui-datepicker-unselectable span{color:#ffd4d1}
.ui-datepicker .ui-datepicker-week-end:last-child.ui-datepicker-unselectable span{color:#cde6fd}
/* datepicker - end */

/* Loading*/
.loading-wrap {position: fixed; left:0; top: 0; width: 100%; height: 100%; display: -ms-flex; display: flex; align-items: center; justify-content: center; z-index: 100; background-color: rgba(255, 255, 255, .6)}
.loading-wrap .loading-img {display: block; width: 120px; height: 120px; overflow: hidden; text-indent: -9999px; background: url(../images/img-loading.gif) no-repeat; background-size: 120px 120px;}

/*카카오페이 인증*/
.kakaopay-certify .form-text + .form-text {margin-top: 20px;}
.kakaopay-certify .notice {margin-top: 20px;}
.kakaopay-certify .process-completed {margin-top: 10px;}

/*활동이력 조회*/
.card-certify.record li {width: 203px;}



/* AS-IS 디자인 맞춤 */
.tb_info{margin:32px 0 24px}
.tb_info thead th{padding:20px 0;font-size:14px;font-weight:500}
.tb_info tbody th, .tb_info tbody td{padding:17px 16px 19px 0;font-size:14px;font-weight:500;color:#8a8a8a;;letter-spacing:-1px;line-height:24px;vertical-align:top}
.tb_info thead tr{border-bottom:1px solid #000}
.tb_info tbody tr{border-bottom:1px solid #ebebeb}

.progressbar { position:relative; margin:0 auto; width:120px; height:120px; display:-webkit-flex; display:flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; }
.progressbar__counter { position:absolute; left:0; right:0; top:0; bottom:0; padding:0; display:flex; align-items:center; justify-content: center; }
.progressbar__counter { font-size:22px; line-height:22px; color:#009bfa; }
.progressbar__fill { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: center; transform-origin: center; -webkit-animation-name: progress; animation-name: progress; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-stroke-dasharray: 360; stroke-dasharray: 360; -webkit-stroke-dashoffset: 0; stroke-dashoffset: 0; -webkit-stroke-linecap: round; stroke-linecap: round; }
@-webkit-keyframes progress {
    from {
        -webkit-stroke-dasharray: 0 360; 
        -webkit-stroke-dashoffset: 0;
    }
    to {
        -webkit-stroke-dasharray: 360; 
        -webkit-stroke-dashoffset: 0; 
    }
}
@keyframes progress {
    from { 
        stroke-dasharray: 0 360; 
        stroke-dashoffset: 0; 
    }
    to { 
        stroke-dasharray: 360; 
        stroke-dashoffset: 0;
    }
}