@charset "utf-8";

/* 메인 */
body {height:auto; font-weight:500}

#content.main {width:1170px; margin:0 auto}

.top_area {display:grid; grid-template-columns:750px auto; grid-template-rows:380px; gap:20px; margin-bottom:20px;}
.top_area .main_banner {overflow:hidden; position:relative}
.top_area .main_banner img {width:100%;}
.top_area .main_banner #main-slider { overflow:hidden;  border-radius:24px; width:100%; height:380px; position:relative}
/*2025-06-23 수정*/
.top_area .main_banner button[class*="slick-"] {position:absolute; top:calc(50% - 15px); width:30px; height:30px; text-indent:-9999px; background-size:20px auto; border-radius:3px; z-index:1000}
.top_area .main_banner .slick-prev {left:20px;  background:rgba(0, 0, 0, 0.40) url(../images/main/ico_s_arr_l.png) 50% 50% no-repeat}
.top_area .main_banner .slick-next {right:20px; background:rgba(0, 0, 0, 0.40) url(../images/main/ico_s_arr_r.png) 50% 50% no-repeat}
.top_area .main_banner .control {position:absolute; bottom:20px; width:100%; max-width:750px; z-index:1000; display:flex; justify-content:center}
.top_area .main_banner .control .btn_ctrl {width:26px; height:26px; border-radius:3px; text-indent:-9999px; position:relative; margin-right:7px }
.top_area .main_banner .control .btn_ctrl:before {display:block; content:""; position:absolute; left:0; top:0; background-color:rgba(0, 0, 0, 0.40); border-radius:5px; width:26px; height:26px; background-position:50% 50%; background-repeat:no-repeat }
.top_area .main_banner .control .pause:before {background-image:url(../images/main/ico_pause.png); background-size:90% auto;}
.top_area .main_banner .control .play:before {background-image:url(../images/main/ico_play.png); background-size:45% auto;}
.top_area .main_banner .slick-dots {display:flex; justify-content:flex-start; gap:0 10px; background: rgba(0, 0, 0, 0.40); border-radius:15px; padding:2px 15px 3px}
.top_area .main_banner .slick-dots button {width:6px; height:6px; border-radius:100%; background:rgba(255, 255, 255, 0.60); text-indent:-9999px}
.top_area .main_banner .slick-dots button:last-of-type {display:none}
.top_area .main_banner .slick-dots .slick-active button {width:16px; border-radius:5px }
/*//2025-06-23 수정*/

.top_area .signin {border-radius:24px; border:1px solid #e4e4e4; overflow:hidden; padding:20px 36px 36px; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.03);}
.signin .tab {display:flex; justify-content:flex-start; align-items:center; height:50px; border-bottom:1px solid #e4e4e4}
.signin .tab li {width:50%; text-align:center;}
.signin .tab li a {display:block; font-family:"paybooc";  color:#aaa; font-size:20px;} /*2025-06-24 수정*/
.signin .tab li.on { position:relative}
.signin .tab li.on a {font-weight:700; color:#006ebc;}
.signin .tab li.on:after {position:absolute; bottom:-16px; left:0; width:100%; display:block; content:""; border-bottom:2px solid #006EBC}

.sign_cert  {padding:36px 0}
.sign_cert h3 {font-size:16px; text-align:center; margin-bottom:20px; color:#555; font-weight:500} /*2025-06-24 수정*/
.sign_cert .btns {display:flex; justify-content:space-between; margin-bottom:36px; gap:0 8px}
.sign_cert .btns button {border-radius:12px; background:#e6e6e6; width:104px; height:46px; color:#888}
.sign_cert .btns button:focus,
.sign_cert .btns button.on {background:#f9a42c; color:#fff; font-weight:600}
.sign_cert .more {border-top:1px solid #e4e4e4; padding-top:40px; text-align:center}
.sign_cert .lnk_reg { display:block; margin-bottom:8px; color:#13449F; font-size:16px; text-decoration:underline; text-underline-offset:4px;}
.sign_cert .lnk_reg + p {margin-top:4px; color:#888;}
.sign_cert .lnk_reg + p strong {color:#006EBC}

.sign_id {padding:40px 0; display:none}
.sign_id .field input[type="text"],
.sign_id .field input[type="password"] {width:100%; border-radius:12px; border:1px solid #DDD; height:46px; line-height:46px; padding:0 16px 0 52px;}
.sign_id .field input[type="text"] + input {margin-top:8px;}
.sign_id input[type="checkbox"] {appearance: none; border-radius:4px; border:1px solid #d8d8d8; width:20px; height:20px; position:relative}
.sign_id input[type="checkbox"]:checked:after {display:block; content:""; position:absolute; left:-1px; top:-1px; width:20px; height:20px; background:url(../images/main/ico_check.png) 0 0 no-repeat; background-size:20px auto}
.sign_id input[type="checkbox"]:disabled:after {display:block; content:""; position:absolute; left:0px; top:-1px; width:20px; height:20px; background:url(../images/main/ico_check.png) 0 0 no-repeat;}
.sign_id .field + .check {display:flex; justify-content:flex-start; align-items:center; margin-top:12px; padding-left:8px;}
.sign_id .field + .check label {margin:2px 0 0 8px; font-size:12px}
.sign_id .check + .btn_login {border-radius:12px; background:#13449F; display:flex; width:100%;  height:46px; justify-content:center; align-items:center; color:#fff; font-size:14px; font-weight:600; margin-top:13px}
.sign_id .lnk_login {width:100%; display:flex; justify-content:center; margin-top:15px; margin:15px auto 0 }
.sign_id .lnk_login li {position:relative; text-align:center; display:flex; justify-content:space-evenly}
.sign_id .lnk_login li:after {display:inline-block; content:""; height:10px; width:1px; background:#ddd; margin:5px 20px 0}
.sign_id .lnk_login li:last-of-type:after {display:none}
.sign_id .lnk_login a {font-size:12px;}

.sign_id .field input[type="text"] {background:url(../images/main/ico_my_dim.png) 16px 9px no-repeat; background-size:24px auto}
.sign_id .field input[type="password"] {background:url(../images/main/ico_lock_dim.png) 16px 9px no-repeat; background-size:24px auto;}
.sign_id input::-webkit-input-placeholder {color:#ddd; font-size:14px;} /* Webkit */
.sign_id input:-moz-placeholder {color:#ddd; font-size:14px;} /* Firefox 4-18 */
.sign_id input::-moz-placeholder {color:#ddd; opacity:1; font-size:14px;} /* Firefox 19+ */
.sign_id input:-ms-input-placeholder {color:#ddd; font-size:14px;} /* IE10+ */

.signin .myinfo {padding:36px 0}
.signin .myinfo h3 { font-family:"paybooc"; font-size:20px; color:#222; margin-bottom:23px;} /*2025-06-24 수정*/
.signin .myinfo h3 strong {color:#13449F; font-size:26px; font-weight:600;}
.signin .myinfo .payment {border-radius:24px; border: 1px solid #E4E4E4; background:#F1F1F1; padding:14px;}
.signin .myinfo .payment li {padding:14px 12px; border-bottom: 1px solid #D9DDE0; display:flex; justify-content:space-between; font-weight:600}
.signin .myinfo .payment li:last-of-type {border-bottom:0}
.signin .myinfo .payment li em {font-style:normal; font-weight:600}
.signin .myinfo .payment li strong {font-size:16px; font-weight:600; color:#222}
.signin .myinfo .cancel {border-radius:15px; border: 1px solid #E4E4E4; background:#FFF; padding:15px 20px; text-align:center; font-size:16px; margin:8px 0 30px}
.signin .myinfo .cancel strong {color:#13449F; font-weight:600}
.signin .myinfo .cancel + a {font-size:16px; font-weight:600; display:flex; justify-content: center;}
.signin .myinfo .cancel + a:after {display:inline-block; content:""; width:20px; height:20px; background:url(../images/main/ico_b_arr_r.png) 50% 50% no-repeat; background-size:21px auto; margin-left:7px}
/*2025-07-16 추가*/
.signin .myinfo .shortcut {display:flex; justify-content:center; align-items:center}
.signin .myinfo .shortcut a:first-child:after {display: inline-block; content: ""; height:10px; width:1px; background:#888; margin:0 40px}

.mid_area {display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:20px }
.mid_area > section {border-radius:24px; border:1px solid #e4e4e4; overflow:hidden; padding:36px 0}
.mid_area > section h4 {color:#222; font-family:"paybooc"; font-size:24px; font-weight:600; padding:0 36px} /*2025-06-24 수정*/

/*공제제도*/
.mid_area .system h4 {margin-bottom:46px; }
.mid_area .system ul {display:grid; grid-template-columns:repeat(4, 124px); gap:0 10px; padding:0 24px}
.mid_area .system li {width:124px; text-align:center}
.mid_area .system li a {display:block; font-family:"paybooc"} /*2025-06-24 수정*/
.mid_area .system li a:before {display:block; content:""; width:90px; height:90px; background-size:auto 90px; background-repeat:no-repeat; background-position:50% 0; margin:0 auto 20px}
.mid_area .system li:nth-child(1) a:before {background-image:url(../images/main/main_icon_ps1.png)}
.mid_area .system li:nth-child(2) a:before {background-image:url(../images/main/main_icon_ps2.png)}
.mid_area .system li:nth-child(3) a:before {background-image:url(../images/main/main_icon_ps3.png)}
.mid_area .system li:nth-child(4) a:before {background-image:url(../images/main/main_icon_ps4.png)}
.mid_area .system li em {font-size:15px; font-weight:600; color:#000; font-style:normal}
.mid_area .system li strong {display:flex; margin:24px 5px 0; justify-content:center; align-items:end; font-size:18px; font-weight:600; line-height:0.5}
.mid_area .system li strong > mark {background-color:transparent; color:#13449F; font-size:30px; font-weight:700}
/*복지서비스*/
.mid_area .service h4 {margin-bottom:38px;}
.mid_area .service ul {display:grid; grid-template-columns:repeat(4,80px); grid-template-rows:85px 85px;  gap:39px 61px; padding:0 36px}
.mid_area .service li {width:80px; text-align:center}
.mid_area .service li a {display:block; color:#2d2d2d; font-weight:500}
.mid_area .service li a:before {display:block; content:""; width:80px; height:60px; background-size:auto 60px; background-repeat:no-repeat; background-position:50% 0; margin-bottom:4px}
.mid_area .service li:nth-child(1) a:before {background-image:url(../images/main/main_icon_wf1.png)}
.mid_area .service li:nth-child(2) a:before {background-image:url(../images/main/main_icon_wf2.png)}
.mid_area .service li:nth-child(3) a:before {background-image:url(../images/main/main_icon_wf3.png)}
.mid_area .service li:nth-child(4) a:before {background-image:url(../images/main/main_icon_wf4.png)}
.mid_area .service li:nth-child(5) a:before {background-image:url(../images/main/main_icon_wf5.png)}
.mid_area .service li:nth-child(6) a:before {background-image:url(../images/main/main_icon_wf6.png)}
.mid_area .service li:nth-child(7) a:before {background-image:url(../images/main/main_icon_wf7.png)}
.mid_area .service li:nth-child(8) a:before {background-image:url(../images/main/main_icon_wf8.png)}

.mid_area .notice {border-radius:24px; border:1px solid #e4e4e4; background:#f1f1f1; padding:48px 36px 36px;}
.mid_area .notice > ul {display:flex; justify-content:flex-start; gap:0 20px}
.mid_area .notice .tit_tab a {font-family:"paybooc"; color:#888; font-size:24px; font-weight:600;} /*2025-06-24 수정*/
.mid_area .notice .tit_tab.on a {color:#222}
.mid_area .notice .box_cont_tab { position:relative; margin-top:25px; width:100%;}
.mid_area .notice .tab_cont li { padding:14px 0 12px; border-bottom:1px solid #d8d8d8;}
.mid_area .notice .tab_cont li a {display:inline-block; max-width:99%; font-size:15px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; line-height:100%; color:#222}
.mid_area .notice .tab_cont li:last-of-type {border-bottom:0; padding-bottom:0}
.mid_area .notice .tab_cont .more {width:24px; height:24px; position:absolute; right:0; top:-47px; background:url(../images/main/ico_more.png) 50% 50% no-repeat; background-size:24px auto}
.mid_area .notice h4 {padding-left:0}
.mid_area .notice .gen_cont li { padding:14px 0 12px; border-bottom:1px solid #d8d8d8;}
.mid_area .notice .gen_cont li a {display:inline-block; max-width:99%; font-size:15px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; line-height:100%; color:#222}
.mid_area .notice .gen_cont li:last-of-type {border-bottom:0; padding-bottom:0}
.mid_area .notice .gen_cont + .more {width:24px; height:24px; position:absolute; right:0; top:-47px; background:url(../images/main/ico_more.png) 50% 50% no-repeat; background-size:24px auto}
.mid_area .notice .box_cont_tab a:hover {text-decoration:underline;}


@media only all and (max-width:989px) {
	#content.main {width:auto; padding:20px 12px}
	.top_area {grid-template-columns:1fr 1fr; gap:10px }
	.top_area .signin {padding:20px 36px 0; height:340px}
	.sign_cert .btns button {width:calc((100% / 3) - 8px)}
	.top_area .main_banner #main-slider {height:auto; margin-bottom:20px}

	.mid_area {gap:10px;}
	.mid_area > section {padding:36px 0 20px}
	.mid_area .system h4 {margin-bottom:20px;}
	.mid_area .system ul {justify-content:center; grid-template-columns:repeat(2, 124px); grid-template-rows:repeat(2, 1fr); gap:30px 30px; padding-bottom:20px}
	.mid_area .system li a:before {margin:0 auto}

	.mid_area .system li strong {margin:12px 5px 0}
	.mid_area .service h4 {margin-bottom:19px}
	.mid_area .service ul {justify-content:center; grid-template-columns:repeat(3, 80px); grid-template-rows:auto; gap:30px 30px;}

}

@media only all and (max-width:767px) {
	.top_area .main_banner .control {bottom:35px} /*2025-06-23 추가*/
	.top_area .signin .sign_cert,
	.top_area .signin .sign_id {padding:20px 0;}
	.top_area {grid-template-columns:1fr; grid-template-rows:1fr; gap:0}

	.sign_id .lnk_login li:after {margin:5px 15px 0}
	.mid_area {display:grid; grid-template-columns:1fr; grid-template-rows:1fr; gap:20px}

	.mid_area .service ul {gap:30px 20px;}
	.mid_area .system h4, .mid_area .service h4 {padding:0 24px}
	.mid_area .notice > ul { gap: 0 10px;}
	
	.mid_area .notice  {padding:30px 24px 24px}
	.mid_area .notice h4, .mid_area .notice .tit_tab a {font-size:22px}
}

.banner_area {padding:9px; margin-top:20px}
.banner_area .rolling_bn {position:relative;}
.banner_area .rolling_bn ul {overflow:hidden;}
.banner_area .rolling_bn li {float:left; width:calc(50% - 12px); margin:6px;}
.banner_area .rolling_bn li a {display:block; border:1px solid #d9d9d9; border-radius:3px; overflow:hidden;}
.banner_area .rolling_bn li a img {width:100%; height:auto;}
.banner_area .rolling_bn button {display:none; position:absolute; top:50%; width:11px; height:22px; margin-top:-11px; text-indent:100%; white-space:nowrap; background:url(../images/main/btn_bn_prev.png) no-repeat; overflow:hidden;}
.banner_area .rolling_bn .btn_prev {left:0;}
.banner_area .rolling_bn .btn_next {right:0; background-image:url(../images/main/btn_bn_next.png);}

@media only all and (min-width:990px) {
	.banner_area {padding:20px;}
	.banner_area .rolling_bn {max-width:1090px; height:42px; padding:0 40px; overflow:hidden;}
	.banner_area .rolling_bn li {float:left; width:calc(16.6%); margin:0;}
	.banner_area .rolling_bn li a {width:132px; height:40px; margin:auto;}
	.banner_area .rolling_bn button {display:block;}
}

@media only all and (min-width:1090px) {
	.banner_area .rolling_bn li {float:left; width:calc(14.2%); margin:0;}
}


#layer_notice {min-width:320px; background:#266fc8;}
#layer_notice .inner {position:relative; max-width:1170px; margin:auto; padding:30px 15px;}
#layer_notice * {color:#fff;}
#layer_notice .output .tmb {display:none; position:absolute; left:15px; top:0;}
#layer_notice .output h1 {margin-bottom:20px; color:#8cfbff; font-size:25px; line-height:32px;}
#layer_notice .output h1 span {color:#fff072;}
#layer_notice .output p {font-size:14px; line-height:19px;}
#layer_notice .notice_close {margin-top:30px;}
#layer_notice .notice_close .setting {font-size:13px;}
#layer_notice .notice_close .btn_notice_close {position:absolute; right:15px; bottom:30px; width:30px; height:30px; text-indent:100%; white-space:nowrap; background:url(../images/layout/btn_layernotice_close.png) no-repeat; background-size:cover; overflow:hidden;}

@media only all and (min-width:990px) {
	#layer_notice .inner {padding:25px 0; background:url(../images/main/bg_layernotice.png) no-repeat 15px 0;}
	#layer_notice .output {padding-right:150px;}
	#layer_notice .output .tmb {display:block;}
	#layer_notice .output h1 {margin-bottom:15px;}
	#layer_notice .output {padding-left:255px;}
	#layer_notice .notice_close {margin-top:0;}
	#layer_notice .notice_close .setting {position:absolute; right:15px; bottom:22px;}
	#layer_notice .notice_close .btn_notice_close {right:15px; top:30px;}
}




/* Slider */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
.slick-list:focus {outline: none;}
.slick-list.dragging {cursor: pointer; cursor: hand;}
.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track {position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto;}
.slick-track:before,
.slick-track:after {display: table; content: '';}
.slick-track:after {clear: both;}
.slick-loading .slick-track {visibility: hidden;}
.slick-slide {display: none; float: left; height: 100%; min-height: 1px;}
[dir='rtl'] .slick-slide {float: right;}
.slick-slide img {display: block;}
.slick-slide.slick-loading img {display: none;}
.slick-slide.dragging img {pointer-events: none;}
.slick-initialized .slick-slide {display: block;}
.slick-loading .slick-slide {visibility: hidden;}
.slick-vertical .slick-slide {display: block; height: auto; border: 1px solid transparent;}
.slick-arrow.slick-hidden {display: none;}