@charset "utf-8";
@import url('./guide.css');
@import url('./jangho.css');
@import url('./ara.css');

/* 용성 카드상세 */
.unique_past_source  {width:100%; max-width: 708px; margin:0 auto; background:#fff;}
.unique_past_source .subcont { position:relative;}
.unique_past_source .success_box {}
.unique_past_source .card_view_box {position:relative; min-height:345px; background:url('../images/bg_visual_card_detail.png') no-repeat; background-size: auto 345px; padding:40px 263px 0px 30px;}
.unique_past_source .card_view_box2 {position:relative; min-height:345px; background:url('../images/bg_visual_card_detail.png') no-repeat; background-size: auto 345px; padding:40px 263px 0px 30px;}

.unique_past_source .card_view_box figure {position:absolute; top:60px; right:30px; width:230px;}
.unique_past_source .card_view_box figure img {width:100%;}
.unique_past_source .card_view_box h3 {font-size:30px; color:#ffffff; letter-spacing:-0.5px;}
.unique_past_source .card_view_box p {margin-top:12px; font-size:16px; color:#fff; letter-spacing:-0.5px;}

.unique_past_source .card_view_box2 figure {position:absolute; top:60px; right:30px; width:230px;}
.unique_past_source .card_view_box2 figure img {width:100%;}
.unique_past_source .card_view_box2 h3 {font-size:24px; color:#ffffff; letter-spacing:-0.5px;}
.unique_past_source .card_view_box2 p {margin-top:12px; font-size:16px; color:#fff; letter-spacing:-0.5px;}

.unique_past_source .card_view_info {position:absolute; top:125px; left:30px; padding-right:276px; word-break:keep-all;}
.unique_past_source .card_view_info li {font-size:18px; color:#fff;}
.unique_past_source .card_view_info .brand strong {font-weight:normal;}
.unique_past_source .card_view_info .brand span {display:inline-block; width:45px;}
.unique_past_source .card_view_info .brand span img {width:100%;}
.unique_past_source .card_view_info .grade strong {font-weight:normal;}

.unique_past_source .card_view_info2 {position:absolute; top:150px; left:30px; padding-right:276px; word-break:keep-all;}
.unique_past_source .card_view_info2 li {font-size:18px; color:#fff;}
.unique_past_source .card_view_info2 .brand strong {font-weight:normal;}
.unique_past_source .card_view_info2 .brand span {display:inline-block; width:45px;}
.unique_past_source .card_view_info2 .brand span img {width:100%;}
.unique_past_source .card_view_info2 .grade strong {font-weight:normal;}

.unique_past_source .h5list {font-size:16px; line-height:24px; color:#444444; letter-spacing:-0.5px; padding: 30px 0 0 0;}
.unique_past_source .h5list li:last-child {font-weight:bold;}
.unique_past_source .h5list .point_color {color:#5d4098;}
.unique_past_source .box_default {padding:0 30px;}
.unique_past_source .card_aply {position:absolute; top:246px; left:50%; width:648px; margin-left:-324px; text-align:center; border-top:1px solid #a6a3dc; padding-top:20px;}
.unique_past_source .card_aply a {display:block; width:175px; height:50px; background:url('../images/btn_black_type.png') no-repeat; background-size:cover; text-align:center; line-height:50px; color:#fff; letter-spacing:-1px; font-size:17px; margin:0 auto;}
.unique_past_source .use_notice {position:relative; margin:0 30px; border-bottom:1px solid #dddddd;}
.unique_past_source .use_notice .ctrl_btn a {display:block; position:absolute; top:0; left:0; width:100%; height:70px;}
.unique_past_source .use_notice .ctrl_btn a img {
	width:23px; position:absolute; top:36px; right:15px;
	-webkit-transform:rotate(0);
	-moz-transform:rotate(0);
	-ms-transform:rotate(0);
	-o-transform:rotate(0);
	transform:rotate(0);
}
.unique_past_source .use_notice .ctrl_btn a.on img {
	-webkit-transform:rotate(-180deg);
	-moz-transform:rotate(-180deg);
	-ms-transform:rotate(-180deg);
	-o-transform:rotate(-180deg);
	transform:rotate(-180deg);
}
.unique_past_source .use_notice dt {padding:20px 0; font-size:22px; letter-spacing:-0.5px; font-weight:bold;}
.unique_past_source .card_benefit_con a img {display:none;}
.unique_past_source .use_notice .use_notice_list {padding:30px 25px; background:#f2f2f2; margin-bottom:30px;}
.unique_past_source .use_notice .use_notice_list table {width:100%; border-collapse:collapse; border-top:1px solid #dddddd;}
.unique_past_source .use_notice .use_notice_list table th,
.unique_past_source .use_notice .use_notice_list table td {border-bottom:1px solid #dddddd; border-right:1px solid #dddddd; padding:20px 0; text-align:center;}
.unique_past_source .use_notice .use_notice_list table thead tr th:last-child {border-right:0 none;}
.unique_past_source .use_notice .use_notice_list table tbody tr td:last-child {border-right:0 none;}
.unique_past_source .tab {margin:30px 30px 0 30px; background: #f4f4f4 url('../images/bg_card_tab.png') left top no-repeat;}
.unique_past_source .tab:after {display:block; clear:both; content:"";}
.unique_past_source .tab li {float:left; width:50%; text-align:center; border-bottom:1px solid #5d4098;}
.unique_past_source .tab li a {display:block; width:100%; float:left; padding:11px 0; background:#f4f4f4; font-size:20px; color:#dddddd; font-weight:bold; }
.unique_past_source .tab li:first-child a {background: #f4f4f4 url('../images/bg_card_tab.png') left top no-repeat; background-size:45px auto;}
.unique_past_source .tab li:last-child a {border-radius:0px 10px 0px 0px;}
.unique_past_source .tab #li_view1.on a {color:#fff; background:#5d4098 url('../images/bg_card_tab01_on.png') left top no-repeat; background-size:45px auto; border-radius:0 10px 0 0;}
.unique_past_source .tab #li_view2.on a {color:#fff; background:#5d4098 url('../images/bg_card_tab02_on.png') left top no-repeat; background-size:45px auto;}
.unique_past_source .hide_txt {display:none;}
.unique_past_source .wrap_benefit {padding:0 30px;}
.unique_past_source .ui_accordion2 > li {border-bottom: 1px solid #dddddd; }
.unique_past_source .card_benefit_h {}
.unique_past_source .card_benefit_h a {display:block; width:100%; position:relative; padding: 20px 0; font-size:22px; font-weight:bold; letter-spacing:-0.5px;}
.unique_past_source .card_benefit_h a .ico_pack {
	position:absolute; top:29px; right:15px; background:url('../images/btn_arw_open.gif') no-repeat; width:23px; height:13.5px; background-size:23px 14px;
	-webkit-transform:rotate(0);
	-moz-transform:rotate(0);
	-ms-transform:rotate(0);
	-o-transform:rotate(0);
	transform:rotate(0);
}
.unique_past_source .card_benefit_h a.on .ico_pack {
	-webkit-transform:rotate(-180deg);
	-moz-transform:rotate(-180deg);
	-ms-transform:rotate(-180deg);
	-o-transform:rotate(-180deg);
	transform:rotate(-180deg);

}
.unique_past_source .card_benefit_con {background:#f2f2f2; padding:25px; font-size:18px; color:#666666; letter-spacing:-0.5px; line-height:22px; margin-bottom:30px;}
.unique_past_source .card_benefit_con h5 {font-size:20px; color:#5d4098; font-weight:bold; line-height:45px; letter-spacing:-0.5px;}
.unique_past_source .card_benefit_con .h5list {padding:0; margin:10px 0;}

.unique_past_source .card_benefit_con .h5list li:last-child {font-weight:normal;}
.unique_past_source .dl_list_01 {padding:0 30px 40px 30px; }
.unique_past_source .dl_list_01  > div {padding-top:30px;}
.unique_past_source .dl_list_01 li {margin-bottom:10px; font-size:18px; color:#444444; letter-spacing:-0.75px; background:url('../images/bg_gray_circle.png') no-repeat left 9px; padding-left:14px; background-size:6px 6px;}
.unique_past_source .dl_list_01 li .nl_list li {margin-top:7px; background:none; text-indent:-14px; margin-bottom:0; font-size:16px;}
.unique_past_source .dl_list_01 > div > ul > li:last-child {font-weight:bold;}
.unique_past_source .card_benefit_bcon .benefits {background:#f2f2f2; padding:25px; font-size:18px; color:#666;}
.unique_past_source .card_benefit_bcon .tit-area {font-size:22px; color:#111111; font-weight:bold; margin-bottom:18px;}
.unique_past_source .b-cont h5 {font-size:20px; font-weight:bold; color:#5d4098; line-height:22px; letter-spacing:-0.5px; margin-top:18px;}
.unique_past_source .b-cont .c-list li {margin-top:18px;}
.unique_past_source .card_benefit_bcon .logo1,
.unique_past_source .card_benefit_bcon .logo2,
.unique_past_source .card_benefit_con .logo1,
.unique_past_source .card_benefit_con .logo2 {display:none;}
.unique_past_source .card_benefit_bcon .noti-box2 {font-size:18px; color:#444; font-weight:bold; margin-top:25px;}
.unique_past_source .card_benefit_bcon .noti-box2 li {margin-top:10px;  letter-spacing:-0.75px; background:url('../images/bg_gray_circle.png') no-repeat left 9px; padding-left:14px; background-size:6px 6px;}
.unique_past_source .card_benefit_bcon a img {display:none;}
.unique_past_source .card_benefit_bcon .benefits .note2 {border-bottom:0 none; padding-bottom:0;}
.unique_past_source .card_benefit_bcon .note2 {font-size:18px; color:#444; margin-top:10px;  letter-spacing:-0.75px; background:url('../images/bg_gray_circle.png') no-repeat left 9px; padding-left:14px; background-size:6px 6px; border-bottom:1px solid #dddddd; padding-bottom:25px;}
/* 카드상세 스크립트 css */
.unique_past_source .ui_accordion_view {display:none;}
.unique_past_source .ui_acc_view2 {display:none; margin-bottom:30px;}


/* 사이즈 711 */
@media (max-width: 712px){
	.unique_past_source .card_aply{margin-left:-285px;width:570px;}
	.unique_past_source .card_view_box{padding: 40px 220px 0px 30px !important;}
	.unique_past_source .card_view_box h3{font-size:26px;}
	.unique_past_source .card_view_box figure{width: 190px;}
	.unique_past_source .card_view_info li{font-size:17px;}
	.unique_past_source .card_benefit_h a{font-size:20px;}
	.unique_past_source .use_notice dt{font-size:20px;}
	.unique_past_source .use_notice .ctrl_btn a img{top:30px;}
	.unique_past_source .tab li a{font-size:19px;}
	.unique_past_source .dl_list_01 li{font-size:17px;}
	.unique_past_source .card_benefit_con h5{font-size:19px;}
}
/* 사이즈 600 */
@media (max-width: 600px){
	.unique_past_source .card_aply{margin-left:-235px;width:470px;}
	.unique_past_source .card_view_box{padding: 40px 190px 0px 30px !important;}
	.unique_past_source .card_view_box h3{font-size:22px;}
	.unique_past_source .card_view_box figure{width: 160px;}
	.unique_past_source .card_view_info li{font-size:16px;}
	.unique_past_source .card_benefit_h a{font-size:18px;}
	.unique_past_source .use_notice dt{font-size:18px;}
	.unique_past_source .tab li a{font-size:18px;}
	.unique_past_source .use_notice .ctrl_btn a{height:65px;}
	.unique_past_source .use_notice .ctrl_btn a img{top:22px;}
	.unique_past_source .dl_list_01 li{font-size:16px;}
	.unique_past_source .card_benefit_con h5{font-size:18px;}
}

/* 211012 급여명세서 - 220103 수정 */
.mT2 {margin-top: 2px !important;}
.mT0 {margin-top: 0 !important;}
.mT10 {margin-top: 10px !important;}
.mT21 {margin-top: 21px !important;}
.pT10 {padding-top: 10px !important;}
.pB10 {padding-bottom: 10px !important;}
.tright {text-align: right;}
.c_red {color: #f00;}
.c_black {color: #000;}
.new-paystub [readonly] {background-color: #eee;}
.txtUnderline {text-decoration: underline;}
.new-paystub {padding-bottom: 50px;}
.new-paystub .paging {display:-webkit-flex;display:flex;justify-content: center;padding-top: 20px;}
.new-paystub .paging a {margin:0 10px;font-size: 14px;}
.new-paystub .paging a.act {font-weight: 700; text-decoration: underline;}
.new-paystub table tr:first-child > * {border-top: 0;}
.new-paystub table th,
.new-paystub table td {height: 42px; line-height: 20px; font-size:15px; color: #666;}
.new-paystub table th {background-color: #f7f7f7; font-weight: 500;}
.new-paystub table th.type2 {background-color: #d5d5d5; font-weight: 600;}
.new-paystub select {display:block; width: 100%; font-size: 15px;border: 0;}
.new-paystub td input {font-size: 15px;}
.new-paystub .checkbox_dwrap {display:-webkit-flex;display:flex;justify-content: center;}
.new-paystub .checkbox_dwrap label:first-child:before {display: none;}
.new-paystub .checkbox_dwrap label {position:relative; margin: 0 20px;}
.new-paystub .checkbox_dwrap label:before {content: ''; display: block;position:absolute;left:-20px;width: 1px;height: 33px;background-color: #ddd;}
.new-paystub .section {margin-top: 54px;}
.new-paystub .pay-head {margin-bottom:20.5px; padding-bottom: 14.5px; border-bottom: 1px solid #ddd;}
.new-paystub .pay-head .header {margin:0;padding-bottom: 26px;}
.new-paystub .pay-head .header h2 {font-size: 27px; font-weight: 600;}
.new-paystub .pay-head .form {position:relative;padding:33px 0 32px; background: #f7f7f7; border-radius: 20px; text-align: center;}
.new-paystub .pay-head .form .item {margin-top: 0;}
.new-paystub .pay-head .form .tit {margin:0;padding:0;width: 150px;font-size: 20px;color: #000;text-align: center;display: inline-block;background: none;font-weight: 500;}
.new-paystub .pay-head .form .calendar {display: inline;}
.new-paystub .pay-head .form .panel_calendar {top:90px}
.new-paystub .pay-head .form .panel_calendar .table_wrap {width:470px}
.new-paystub .pay-head .form .current {display:inline-block;width:240px;line-height:46px;border:2px solid #ddd;background:#fff url(../images/btn_calendar03.png) no-repeat 95% 50%;background-size:20px;vertical-align: middle;}
.new-paystub .pay-head .form .current strong {background-image: none;padding-right: 0;}
.new-paystub .content_caption.calendar_panel a {color: #000;}
.new-paystub .content_caption.calendar_panel .calendar strong:not(.tit) {background-image: none;}
.new-paystub .pay-head .form button {min-width:120px;height:55px;border-radius: 8px;margin-left: 10px;}
.new-paystub .pay-head .form button.reset,
.new-paystub .pay-head .form button.apply,
.new-paystub .pay-head .form button.mod {background: none #979ca5;}
.new-paystub .pay-head .form button.reset .icon_reset {width: 22.5px; height: 21.5px; margin-right: 3px; background: url(../images/btn_reset.png) no-repeat 0 -1px; background-size: 85%}
.new-paystub .pay-head .form button.apply .icon_apply {width: 22.5px; height: 21.5px; margin-right: 3px; background: url(../images/btn_apply.png) no-repeat 0 0; background-size: 85%}
.new-paystub .pay-head .form button.mod .icon_mod {width: 22.5px; height: 22.5px; margin-right: 3px; background: url(../images/btn_mod.png) no-repeat 0 0; background-size: 85%}
.new-paystub .pay-head .btn .icon_search {background-size: 85%;}
.new-paystub .pay-head + .section {margin-top: 0;}
.new-paystub .pay-body:nth-child(5) {margin-top: 35px;}
.new-paystub .pay-body:last-child {margin-top: 27px;}
.new-paystub .pay-body h3 {position:relative;padding-left:8px; font-size: 17px; line-height: 25px; font-weight: 600;}
.new-paystub .pay-body h3:before {content: '';position:absolute;top:6.5px;left:0;display: block;width:3px;height: 13px;background: #000;}
.new-paystub .pay-body .header {display: -webkit-flex;display: flex;margin-bottom: 7px;}
.new-paystub .pay-body .header .info {margin-left: auto;padding-top:7px;display: inline-block;font-size: 14px;}
.new-paystub .pay-body .body {border-top:1px solid #000} 
.new-paystub .pay-body.dp-flex {display:-webkit-flex;display:flex}
.new-paystub .pay-body.dp-flex > div {width: 50%;}
.new-paystub .pay-body.dp-flex > div:first-child{margin-right: 16px;}
.new-paystub .pay-body.dp-flex .pay-cont .header {margin-top: 11.5px;}
.new-paystub .pay-body.dp-flex .pay-cont .header:first-child {margin-top: 0;}
.new-paystub .pay-body .info-txt {padding-top:5px;font-size: 12px; font-weight: 400; color: #666; line-height: 18px;}
.new-paystub .pay-body .info-txt li {position: relative;padding-left:10px;}
.new-paystub .pay-body .info-txt li:before {content: '';position: absolute;top:7px;left:0;display: block;width: 3px;height: 3px;background-color: #9d9d9d;}
.new-paystub .pay-body .info-txt2 {padding-top:5px;font-size: 12px; font-weight: 400; color: #666; line-height: 18px;}
.new-paystub .pay-body .info-txt2 li {position: relative;padding-left:13px;}
.new-paystub .pay-body .info-txt2 li:before {content: '※'; position: absolute;top:0;left:0;}
.new-paystub .end-txt {margin-top:24px; font-size: 14px; font-weight: 500;}
.new-paystub .flogo {display:-webkit-flex;display:flex;margin-left:auto;width:50px;height: 100%;}
.new-paystub .flogo img {margin-top:auto;width: 100%; height: 50px;}

/* 211118 급여명세서 추가 - 220103 수정 */
.new-paystub.ac-list table th.type2 {background:#f7f7f7; font-weight: 600;}
.new-paystub.ac-list .apply_list th {color: #333;}
.new-paystub.ac-list .pay-head .form .tit {width: 100px;}
.new-paystub.ac-list .pay-head .form .current {width: 159px;}
.new-paystub.ac-list .pay-head .form .current strong {margin: 0 35px 0 20px;}
.new-paystub.ac-list .pay-head .form button {min-width: 90px; margin-left: 3px; padding: 0 8px;}
.new-paystub.ac-list .pay-head .form button.reset {padding: 0 7px;}
.new-paystub.ac-list .popBtn {font-size: 14px; text-decoration: underline; color: #1c1c1c;}
.new-paystub.ac-list .pay-body:last-child {margin-top: 54px;}
.new-paystub.ac-list .pay-body .body.scroll {max-height: 270px;height: 270px;overflow-y: auto;}
.new-paystub.ac-list .pay-body .body.scroll table th {position: -webkit-sticky;position: sticky; top: 0;}
.new-paystub.ac-list .wrap_closed {width: 100%;}
.new-paystub.ac-list .wrap_closed input {width: 100%; height: 36px;}
.new-paystub.ac-list .pay-head .body.fixed {position: fixed; top:0; left: 30px;width:calc(100% - 60px);z-index: 99;}
.new-paystub.ac-list .email {text-align: left;}
.new-paystub.ac-list .email .wrap_closed {width: calc(33% - 12.5px);}
.new-paystub.ac-list .email select {width: calc(33% - 12.5px); display: inline-block; border:1px solid #ccc}

/* 신청내역 팝업 */
.layer_pop .new-paystub .applypop_list {border-top: 1px solid #707070;border-bottom: 1px solid #707070;}
.layer_pop .new-paystub .applypop_list tr:last-child >* {border-bottom: 0;}
.layer_pop .new-paystub .applypop_list th {font-weight: 600; color: #333;}
.layer_pop .new-paystub .applypop_list th,
.layer_pop .new-paystub .applypop_list td {padding: 0 5px;}

/* 카드상세보기 안내장 팝업 추가 220111 수정 */
.layer_pop_card_guide {position:relative;padding-bottom:110px;height: 100%;}
.layer_pop_card_guide .layer_body {padding:0;}
.layer_pop_card_guide .unique_past_source {max-width:708px;}
.layer_pop_card_guide .unique_past_source .card_view_box {min-height:280px;}
.layer_pop_card_guide .unique_past_source .card_view_info .brand .span img {vertical-align:top;}
.layer_pop_card_guide .unique_past_source .card_view_info li + li {margin-top:4px;}
.layer_pop_card_guide .box_card_guide {overflow-y:auto;height: calc(100% - 280px);max-width:708px;margin:0 auto;padding:0 10px 0 0;background-color:#f4f4f4;}
.layer_pop_card_guide .layer_footer {position:absolute;bottom:0;width:100%;padding:20px 30px;box-shadow:0 -1px 13px 0 rgba(0, 0, 0, 0.11);background-color: #fff;}
.layer_pop_card_guide .layer_footer .btn_action {width:100%;height:70px;line-height:70px;border:0;border-radius:10px;background-color:#222;color:#fff;font-size:24px;font-weight:600;letter-spacing:-1.2px;text-align:center;}

/* 금소법 상품안내장 팝업 220223 */
.layer_pop_card_guide.prd_guide .layer_body .title {max-width: 708px;margin: 0 auto;padding: 35px 10px;}
.layer_pop_card_guide.prd_guide .layer_body .title h1 {font-size: 27px;}
.layer_pop_card_guide.prd_guide .box_card_guide {height: calc(100vh - 212px);}