@charset "utf-8";

html{font-size: 20px;}
body{font-size: 1rem;}


/* visual */ 
.visual{width: 100%; height:15rem; float: left; background:url('../image/main/main_visual.png') no-repeat center; position: relative; z-index: 8; background-size: cover;}
.visual .visu_txt{position:absolute; width: 25rem; height: 6.1rem; left: 0; top:4.4rem; font-family:'NanumSquare','Malgun Gothic', '맑은 고딕', sans-serif;}
.visual .visu_txt > strong{font-size:2rem; color: #fff; font-weight: bold; text-shadow:2px 2px 2px #212222;}
.visual .visu_txt > p{font-size:0.85rem; color: #fff; padding-top:0.5rem;}
.visual .visu_txt > p:last-child{padding-top:0rem;} 
.visual .login_wrap{float: right; width: 21.1rem; height: 7.4rem; margin-top: 3.75rem;}

/* visual - 로그인 */
.visual .login_wrap .login_input_wrap{width:100%; height: 5.4rem;}
.visual .login_wrap .login_input_wrap .id_pw_wrap{width:14.5rem; height: 5.45rem;}
.visual .login_wrap .login_input_wrap .id_pw_wrap .id_input{position: relative;}
.visual .login_wrap .login_input_wrap .id_pw_wrap .pw_input{position: relative; margin-top: 0.37rem;}
.visual .login_wrap .login_input_wrap .id_pw_wrap > div > span.icon_cell{width: 16px; height: 20px;display: inline-block; position: absolute; left: 17px; top:14px;}
.visual .login_wrap .login_input_wrap .id_pw_wrap > div.id_input > span.icon_cell{background: url('../image/main/icon_id.png') no-repeat center;}
.visual .login_wrap .login_input_wrap .id_pw_wrap > div.pw_input > span.icon_cell{background: url('../image/main/icon_pw.png') no-repeat center;}
.visual .login_wrap .login_input_wrap .login_btn{width:6.25rem; height:5.45rem;}
.visual .login_wrap .login_input_wrap .login_btn input{display: inline-block; width:6.25rem; height: 5.45rem; color: #fff; background:#24a1d5; font-size: 1rem;}

.visual .login_wrap .member_btn_wrap{width:100%; height: 1.15rem; margin-top: 0.8rem; font-size: 0.8rem;}
.visual .login_wrap .member_btn_wrap .id_save{width: 5.15rem;}
.visual .login_wrap .member_btn_wrap .id_save .keep_text{display: inline-block; color:#fff; line-height: 1.15rem;}
.visual .login_wrap .member_btn_wrap .search_member{width:11rem;}
.visual .login_wrap .member_btn_wrap .search_member > ul{font-size: 0;}
.visual .login_wrap .member_btn_wrap .search_member > ul > li{display: inline-block;}
.visual .login_wrap .member_btn_wrap .search_member > ul > li:last-child{margin-left:0.9rem;}
.visual .login_wrap .member_btn_wrap .search_member > ul > li > a{font-size: 0.8rem;color: #fff; line-height:1.15rem; text-decoration: underline; text-underline-position: under;}

/* visual - 로그아웃 */
.visual .login_wrap .login_input_wrap .info_wrap{width:14.5rem; height: 5.45rem; border: 1px solid #d7d7d7; background: #fff; border-radius: 5px;}
.visual .login_wrap .login_input_wrap .info_wrap > ul{width:12.4rem; height: 2.95rem; margin-top:1.3rem; margin-left:0.8rem;}
.visual .login_wrap .login_input_wrap .info_wrap > ul > li{float:left}
.visual .login_wrap .login_input_wrap .info_wrap > ul > li.my_img{width: 2.75rem; height: 2.75rem; border-radius:50%;border: 1px solid #d7d7d7; background: url('../image/main/icon_login.png') no-repeat center #fff;}
.visual .login_wrap .login_input_wrap .info_wrap > ul > li.my_info{width: 9.1rem; height:100%; color:#666; margin-left:0.5rem;font-size:0.8rem;}
.visual .login_wrap .login_input_wrap .info_wrap > ul > li.my_info > p >span.c_blue{font-size:1rem;}
.visual .login_wrap .login_input_wrap .info_wrap > ul > li.my_info .date_info{font-size:0.75rem ;}
.visual .login_wrap .login_input_wrap .logout_btn{width:6.25rem; height:5.45rem;}
.visual .login_wrap .login_input_wrap .logout_btn input{display: inline-block; width:6.25rem; height: 5.45rem; color: #fff; background:#24a1d5; font-size: 1rem;}

.visual .login_wrap .member_btn_wrap{width:100%; height: 1.15rem;margin-top: 0.8rem; font-size: 0.8rem;}
.visual .login_wrap .member_btn_wrap .hi_txt {width: 11.5rem; color:#fff; line-height: 1.15rem;}
.visual .login_wrap .member_btn_wrap .my_page{width:3.7rem;}
.visual .login_wrap .member_btn_wrap .my_page > ul > li > a{color: #fff; line-height:1.15rem; text-decoration: underline; text-underline-position: under;}


/* quick_wrap */
.quick_wrap{width: 100%; background:#e3f0fe; float:left;}
.quick_wrap ul.menu_list{margin: 0 2.55rem;}
.quick_wrap ul.menu_list li{float: left; margin:0.7rem 1.3rem;}
.quick_wrap ul.menu_list li.quick_btn div.circle{width:3.85rem; height:3.85rem; line-height: 3.85rem; border-radius:31px; background:#f3f8fe; text-align: center; margin-bottom: 0.3rem; margin-left:0.25rem;}
.quick_wrap ul.menu_list li.quick_btn div.circle > img{vertical-align: middle;
transition: all .3s ease; -ms-transition: all .3s ease; -webkit-transition: all .3s ease;}
.quick_wrap ul.menu_list li.quick_btn p{font-size:0.8rem; text-align: center; line-height: 1rem;}
.quick_wrap ul.menu_list li.quick_btn:hover div.circle{box-shadow: 0 8px 15px 1px #ced9e6; background:#b8d8fb}
.quick_wrap ul.menu_list li.quick_btn:hover div.circle img{transform: rotateY(180deg); -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg);}


/* my_service_wrap */
.my_service_wrap{width: 100%; float: left; margin-top:1.5rem}
.service_btn_wrap{width: 60rem;/* height: 9.5rem;*/ border-radius: 5px; border:1px solid #003399; }
.service_btn_wrap .content_tit{border-radius: 4px 4px 0 0; background: #003399; height:2.75rem; width: 100%; line-height:2.75rem; color: #fff}
.service_btn_wrap .content_tit > h2{margin-left:1.65rem;float: left; font-size:0.9rem; display: inline-block;}
.service_btn_wrap .content_tit > p{float: left; font-size:0.75rem; padding-left:1.1rem}

.service_btn_wrap .my_service_btn{width: 100%; margin-bottom: 0.9rem }
.service_btn_wrap .my_service_btn > ul > li {width:13.75rem; height: 5rem; border:1px solid #d7d7d7; border-radius: 5px; margin-top:0.9rem; margin-left:0.95rem; float: left;}

/* my_service_wrap - service_on(사용중인 서비스 버튼) */
.service_btn_wrap .my_service_btn > ul > li.service_on{box-shadow: 2px 3px 11px 3px #c1c3c5;}
.service_btn_wrap .my_service_btn ul.content_btn {margin:0.55rem 0.75rem }
.service_btn_wrap .my_service_btn ul.content_btn > li p{font-size:0.9rem; line-height: 1.09rem}
.service_btn_wrap .my_service_btn ul.content_btn > li p.end_date{font-size:0.7rem; color:#ce0b33; padding-bottom:0.1rem }
.service_btn_wrap .my_service_btn ul.content_btn li.on_btn:after{display: block; visibility: hidden; height: 0; font-size: 0; clear: both; content:'';}
.service_btn_wrap .my_service_btn ul.content_btn li.on_btn > div:nth-child(1){float: left;}
.service_btn_wrap .my_service_btn ul.content_btn li.on_btn > div:nth-child(2){float: right;}
.service_btn_wrap .my_service_btn ul.content_btn li.on_btn > div > input{width: 5.8rem; height:1.5rem; border-radius:2.5rem; color: #fff;}
.service_btn_wrap .my_service_btn ul.content_btn li.on_btn > div > input[type='button']{font-size: 0.8rem}
.service_btn_wrap .my_service_btn ul.content_btn li.on_btn > div > input.shortcut_btn{background: #0d2d4f; /*margin-right: 0.4rem*/}
.service_btn_wrap .my_service_btn ul.content_btn li.on_btn > div > input.extension_btn{background: #b70202}

/* my_service_wrap - service_off(사용중이지 않은 서비스 버튼) */
.service_btn_wrap .my_service_btn > ul > li.service_off{background:#e4e5e6}
.service_btn_wrap .my_service_btn li.service_off > ul.content_btn {margin:1.3rem 0.75rem 0.55rem}
.service_btn_wrap .my_service_btn li.service_off > ul.content_btn > li > p > span.icon_new{font-size:0.6rem; text-align: center; color: #fff; display: inline-block; width:1.8rem; height: 0.85rem; background:#6f6f6f;font-weight: bold; line-height: 0.85rem;vertical-align: top; margin-right: 2px; margin-top: 2px;}
.service_btn_wrap .my_service_btn li.service_off > ul.content_btn > li p{font-size:0.9rem; line-height: 1.09rem; text-align: center; color: #555; margin-bottom: 0.425rem}
.service_btn_wrap .my_service_btn li.service_off > ul.content_btn li.off_btn > div{text-align: center;}
.service_btn_wrap .my_service_btn li.service_off > ul.content_btn li.off_btn > div > input{width: 8.3rem; height:1.5rem; border-radius:2.5rem; color: #fff;}
.service_btn_wrap .my_service_btn li.service_off > ul.content_btn li.off_btn > div > input[type='button']{font-size: 0.8rem}
.service_btn_wrap .my_service_btn li.service_off > ul.content_btn li.off_btn > div > input.shortcut_btn{background: #6f6f6f;}

/* my_service_wrap - service_off:hover -active */
.service_btn_wrap .my_service_btn > ul > li.service_off:hover{background:#fff; border:1px solid #003399;}
.service_btn_wrap .my_service_btn li.service_off:hover > ul.content_btn > li > p > span.icon_new{background:#ce0b33;}
.service_btn_wrap .my_service_btn li.service_off:hover > ul.content_btn > li p{color: #000;}
.service_btn_wrap .my_service_btn li.service_off:hover > ul.content_btn li.off_btn > div > input.shortcut_btn{background: #003399;}


/* contents_wrap */
.contents_wrap{width: 100%; float: left; margin-top:1.5rem; padding-bottom:3.5rem} 

/* contents_wrap - 공지, 업데이트 */
.main_left_area{width: 30rem; height: 16rem; margin-right: 1.3rem;}
.main_left_area .news_menu{}
.main_left_area .news_menu > ul{border-top: 1px solid #d7d7d7; border-bottom:1px solid #d7d7d7; height:2.75rem }
.main_left_area .news_menu > ul > li{float: left;}
.main_left_area .news_menu > ul > li > a{border-right:1px solid #d7d7d7; border-left:1px solid #d7d7d7; font-size:0.9rem; margin-left: -1px; display: block; padding: 0.65rem 0; width:6.5rem; text-align: center;}
.main_left_area .news_menu > ul > li.btn_more{float: right;}
.main_left_area .news_menu > ul > li.btn_more > a{padding: 0.65rem 0; width: 2.85rem}
.main_left_area .news_menu > ul > li.btn_more > a img{vertical-align: middle;}
.main_left_area .news_menu > ul > li.active > a {background: #24a1d5; color: #fff; border-radius: 5px}

.main_left_area .board_content{width: 30rem; height:13.2rem; border-bottom: 1px solid #d7d7d7; padding:1rem}
.main_left_area .board_content ul.board_list li.board_txt span{font-size: 0.8rem; line-height:1rem; display: block; padding: 0.35rem 0}
.main_left_area .board_content ul.board_list li.board_txt li:after {display:block;visibility:hidden;height:0;font-size:0;clear:both;content:''}
.main_left_area .board_content ul.board_list li.board_txt li:first-child span {padding-top: 0}
.main_left_area .board_content ul.board_list span.board_tit{float: left; display: inline-block; width:22.5rem; }
.main_left_area .board_content ul.board_list span.board_date{float: right; display: inline-block;}
.main_left_area .board_content ul.board_list li.board_txt li:hover > span.board_tit {text-decoration: underline;}

/* contents_wrap -상담, 계좌, 바로가기 버튼*/
/*상담*/
.main_customer_wrap{height: 100%; width: 19.15rem;}
.main_customer_wrap > div{width: 100%; border-radius: 5px; border:1px solid #d7d7d7; }
.main_customer_wrap > div.customer_center{margin-bottom:1.25rem }
.main_customer_wrap .content_tit{border-radius: 4px 4px 0 0;height:2.75rem; width: 100%; line-height:2.75rem; border-bottom: 1px solid #d7d7d7}
.main_customer_wrap .content_tit > p{margin-left:1.65rem; font-size:0.9rem; display: inline-block;}
.main_customer_wrap .content_txt{width: 100%; /*height: 4.5rem*/;padding:0.85rem 1.65rem }
.main_customer_wrap .content_txt > ul {font-size: 0}
.main_customer_wrap .content_txt > ul > li{display: inline-block; font-size:0.9rem; line-height: 1.1rem; vertical-align: middle;}
.main_customer_wrap .content_txt > ul > li.dong_img{border-radius: 50%; width:2.85rem; height: 2.85rem;margin-right: 0.8rem}
.main_customer_wrap .customer_center li.dong_img{background: url('../image/main/icon_center.png') no-repeat center #f6f6f6;}
.main_customer_wrap .content_txt > ul > li strong{font-size:1.6rem; color:#003399}
.main_customer_wrap .content_txt > ul > li p.font_s15{font-size:0.75rem}

/* 계좌*/
.main_customer_wrap .account_num li.dong_img{background: url('../image/main/icon_account.png') no-repeat center #f6f6f6;}
.main_customer_wrap .account_num .content_txt p.txt_detail{padding-bottom: 5px;}
.main_customer_wrap .account_num .content_txt p.txt_detail span{margin-right: 5px; display: inline-block;}
.main_customer_wrap .account_num  .content_txt p.txt_detail img{vertical-align: middle;}

/*바로가기 버튼*/
.main_shortcut_wrap{height: 100%; width:8.3rem;border-radius: 5px; border:1px solid #d7d7d7; padding:0 0.75rem}
.main_shortcut_wrap > ul > li{font-size: 0.8rem; border-bottom: 1px solid #d7d7d7; line-height: 0 }
.main_shortcut_wrap > ul > li:last-child{border-bottom: none;}
.main_shortcut_wrap > ul > li > a{ display: block; padding: 0.82rem 0;}
.main_shortcut_wrap > ul > li span{display: inline-block; margin-right: 0.6rem; vertical-align: middle;}
.main_shortcut_wrap > ul > li p{display: inline-block;}
.main_shortcut_wrap > ul > li > a:hover p{color:#003399; font-weight: bold;}



/* ======================== 반응형 ======================== */


/* 태블릿 */
@media (max-width: 1024px) {


/* 모바일웹 화면 가로 회전시 텍스트 크기 변경 방지 */
body{ -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}


/* IE에서 스크롤바 감춤 */
body {-ms-overflow-style:none;}


/* 윈도우 크롬 등 스크롤바 감춤 */
body::-webkit-scrollbar {display:none;}


/* visual */ 
.visual{height:12.5rem; margin-top: 3rem;}
.visual .visu_txt{width:15rem; height: 5rem; left: 2rem; top:50%; margin-top: -2.5rem;}
.visual .visu_txt > strong{font-size:1.3rem;}
.visual .visu_txt > p{font-size:0.8rem;}
.visual .login_wrap{float: right; width: 18rem; height: 7.4rem; margin-top: 3rem;}

/* visual - 로그인 */
.visual .login_wrap .login_input_wrap .id_pw_wrap{width:12.5rem;}
.visual .login_wrap .login_input_wrap .id_pw_wrap .id_input{position: relative;}
.visual .login_wrap .login_input_wrap .id_pw_wrap .pw_input{position: relative; margin-top: 0.37rem;}
.visual .login_wrap .login_input_wrap .login_btn{width:5.25rem; height:5.45rem;}
.visual .login_wrap .login_input_wrap .login_btn input{display: inline-block; width:100%;}
.visual .login_wrap .member_btn_wrap{width:100%; height: 1.15rem; margin-top: 0.5rem; font-size: 0.75rem;}
.visual .login_wrap .member_btn_wrap .search_member > ul > li > a{font-size: 0.75rem}

/* visual - 로그아웃 */
.visual .login_wrap .login_input_wrap .info_wrap{width:12.5rem;}
.visual .login_wrap .login_input_wrap .info_wrap > ul{width:12rem; margin-top: 1.4rem;}
.visual .login_wrap .login_input_wrap .info_wrap > ul > li.my_img{width: 2.5rem; height: 2.5rem;}
.visual .login_wrap .login_input_wrap .info_wrap > ul > li.my_info{width: 8.5rem; font-size:0.8rem;}
.visual .login_wrap .login_input_wrap .info_wrap > ul > li.my_info > p >span.c_blue{font-size:0.8rem;}
.visual .login_wrap .login_input_wrap .info_wrap > ul > li.my_info .date_info{font-size:0.7rem; width: 100%;}
.visual .login_wrap .login_input_wrap .logout_btn{width:5.25rem;}
.visual .login_wrap .login_input_wrap .logout_btn input{width:5.25rem;}

.visual .login_wrap .member_btn_wrap{width:100%; height: 1.15rem; margin-top: 0.5rem; font-size: 0.75rem;}
/*.visual .login_wrap .member_btn_wrap .my_page > ul > li > a{font-size: 0.75rem;}*/


/* quick_wrap */
.quick_wrap ul.menu_list{margin:0; padding-left:3%;}
.quick_wrap ul.menu_list li{float: left; margin:0.7rem 0.5rem; width:10%;}
.quick_wrap ul.menu_list li.quick_btn div.circle{width:3rem; height:3rem; line-height: 3rem; border-radius:31px; margin: 0 auto;}
.quick_wrap ul.menu_list li.quick_btn div.circle > img{width:1.75rem;}
.quick_wrap ul.menu_list li.quick_btn:nth-child(7)  div.circle > img{width:1.25rem;}
.quick_wrap ul.menu_list li.quick_btn:hover div.circle img{transform: none;}



/* my_service_wrap */
.service_btn_wrap{width: 100%; height: auto;}
.service_btn_wrap .my_service_btn{width: 100%; padding: 0.95rem; padding-top:0; margin-bottom: 0;}
.service_btn_wrap .my_service_btn > ul > li {width:32%; margin-left:0; margin-top: 0.95rem;}
.service_btn_wrap .my_service_btn > ul > li:nth-child(2){margin: 0.95rem 2% 0;}
.service_btn_wrap .my_service_btn > ul > li:nth-child(5){margin: 0.95rem 2% 0;}

/* my_service_wrap - service_on(사용중인 서비스 버튼) */
.service_btn_wrap .my_service_btn ul.content_btn li.on_btn > div{width: 48%;}
/*
.service_btn_wrap .my_service_btn ul.content_btn li.on_btn > div:nth-child(2){margin-left: 0.38rem;}
*/
.service_btn_wrap .my_service_btn ul.content_btn li.on_btn > div > input{width:100%;}
.service_btn_wrap .my_service_btn ul.content_btn li.on_btn > div > input.shortcut_btn{ margin-right:0}
.service_btn_wrap .my_service_btn ul.content_btn > li p{letter-spacing: -0.08rem;}
.service_btn_wrap .my_service_btn li.service_off > ul.content_btn > li p{letter-spacing: -0.08rem;}


/* contents_wrap */
.contents_wrap{margin-bottom:0} 

/* contents_wrap - 공지, 업데이트 */
.main_left_area{width: 75%; height: 16rem; margin-right:2%;}
.main_left_area .board_content{width: 100%;}
.main_left_area .board_content ul.board_list span.board_tit{width:80%; }

/* contents_wrap -상담, 계좌, 바로가기 버튼*/
/*상담*/
.main_customer_wrap{height: 100%; width: 100%; margin-top:1.25rem}
.main_customer_wrap > div{width: 49%; float: left;}
.main_customer_wrap > div.customer_center{margin-bottom:0; margin-right:2%;}
.main_customer_wrap .content_txt{width: 100%; padding:0.85rem 1rem }
.main_customer_wrap .content_txt > ul > li.dong_img{margin-right: 5%}

/* 계좌*/
.main_customer_wrap .account_num .content_txt p.txt_detail span{margin-right: 5px; display:inline-block;}

/*바로가기 버튼*/
.main_shortcut_wrap{width:23%;}
.main_shortcut_wrap > ul > li > a{padding-left:10%}

}




/* quick_wrap 반응형 적용 */
@media (max-width: 969px) {


/* quick_wrap */
.quick_wrap ul.menu_list li{float: left; margin:0.7rem 0.5rem; width:17%;}

}





/* 저해상도 태블릿, 모바일(가로) */
@media (max-width: 768px) {


/* visual */ 
.visual .visu_txt{display: none;}

/* quick_wrap */
.quick_wrap ul.menu_list{padding-left:5%;}
.quick_wrap ul.menu_list li{float: left; margin:0.7rem 0.5rem; width:20%; height: 4.85rem;}
.quick_wrap ul.menu_list li.quick_btn p{font-size:0.7rem;}


/* my_service_wrap */
.service_btn_wrap .content_tit > h2{font-size:0.8rem;}
.service_btn_wrap .content_tit > p{ display: none;}
.service_btn_wrap .my_service_btn > ul > li {width:48.1%; height: 5rem; margin-top: 0.8rem;}
.service_btn_wrap .my_service_btn > ul > li:nth-child(2),
.service_btn_wrap .my_service_btn > ul > li:nth-child(5){margin: 0.8rem 0 0;}
.service_btn_wrap .my_service_btn > ul > li:nth-child(odd){margin-right:3.2%;} /*홀수 li 적용*/

/* my_service_wrap - service_on(사용중인 서비스 버튼) */
.service_btn_wrap .my_service_btn > ul > li.service_on{box-shadow: 1px 2px 15px 2px #c1c3c5;}
.service_btn_wrap .my_service_btn ul.content_btn {margin:0.55rem 0.75rem }
.service_btn_wrap .my_service_btn ul.content_btn > li p{font-size:0.8rem; line-height: 1rem;}
.service_btn_wrap .my_service_btn ul.content_btn > li p.end_date{font-size:0.7rem; color:#ce0b33; padding-bottom:0.1rem; letter-spacing: 0;}
.service_btn_wrap .my_service_btn ul.content_btn li.on_btn > div{width: 47.8%;}
.service_btn_wrap .my_service_btn ul.content_btn li.on_btn > div > input[type='button']{font-size: 0.7rem}

/* my_service_wrap - service_off(사용중이지 않은 서비스 버튼) */
.service_btn_wrap .my_service_btn li.service_off > ul.content_btn {margin:1.3rem 0.75rem 0.55rem}
.service_btn_wrap .my_service_btn li.service_off > ul.content_btn > li > p > span.icon_new{font-size:0.6rem; text-align: center; color: #fff; display: inline-block; width:1.8rem; height: 0.85rem; background:#6f6f6f;font-weight: bold; line-height: 0.85rem;vertical-align: top; margin-right: 2px; margin-top: 2px;}
.service_btn_wrap .my_service_btn li.service_off > ul.content_btn > li p{font-size:0.8rem; line-height: 1rem;}
.service_btn_wrap .my_service_btn li.service_off > ul.content_btn li.off_btn > div > input[type='button']{font-size: 0.7rem}

/* contents_wrap */
.contents_wrap{margin-bottom:0; padding-bottom: 2rem;} 

/* contents_wrap - 공지, 업데이트 */
.main_left_area{width: 100%;margin-right:0%; margin-bottom: 1.25rem;}
.main_left_area .board_content{width: 100%;}
.main_left_area .board_content ul.board_list span.board_tit{width:75%;}

/* contents_wrap -상담, 계좌, 바로가기 버튼*/
/*상담*/
.main_customer_wrap{height: 100%; width: 100%; margin-top:1.25rem}
.main_customer_wrap > div{width: 100%; float: left;}
.main_customer_wrap > div.customer_center{margin-bottom:1.25rem;}
.main_customer_wrap .content_txt{width: 100%; padding:0.85rem 2rem }

/* 계좌*/
.main_customer_wrap .account_num .content_txt p.txt_detail span{margin-right: 5px; display:inline-block;}

/*바로가기 버튼*/
.main_shortcut_wrap{width:100%;}
.main_shortcut_wrap > ul > li{font-size: 0.8rem; border-bottom: 1px solid #d7d7d7; float: left;
width: 33.3%;}
.main_shortcut_wrap > ul > li:nth-child(4){border-bottom: none;}

}




/* 모바일(세로) */
@media (max-width: 480px) {


/* visual - 로그인 */
.visual .login_wrap{float: none; margin-top:2rem; height: 100%; width: 100%;}
.visual .login_wrap .login_input_wrap{width:100%; height: auto;}
.visual .login_wrap .login_input_wrap .id_pw_wrap{width:100%; height:100%;}
.visual .login_wrap .login_input_wrap .id_pw_wrap .pw_input{margin-bottom:0.35rem;}
.visual .login_wrap .login_input_wrap .id_pw_wrap .id_input > input{width: 100%; height: 2.2rem;}
.visual .login_wrap .login_input_wrap .id_pw_wrap .pw_input > input {width: 100%; height: 2.2rem;}
.visual .login_wrap .login_input_wrap .id_pw_wrap > div > span.icon_cell{top:11px;}
.visual .login_wrap .login_input_wrap .login_btn{width:100%; height:2.2rem; margin-bottom: 0.35rem;}
.visual .login_wrap .login_input_wrap .login_btn input{width:100%; height:100%; font-size: 0.9rem;}
.visual .login_wrap .member_btn_wrap{width:100%; height: 1.15rem; /*margin-top: 0.8rem;*/}
.visual .login_wrap .member_btn_wrap .id_save{display: none;}

/* visual - 로그아웃 */
.visual .login_wrap .login_input_wrap .info_wrap{width:100%; height: 4.77rem; margin-bottom: 0.35rem;}
.visual .login_wrap .login_input_wrap .info_wrap > ul{width:100%; height:100%; margin-top:0rem; margin-left: 0; padding: 1rem 0.8rem;}
.visual .login_wrap .login_input_wrap .info_wrap > ul > li{float:left}
.visual .login_wrap .login_input_wrap .info_wrap > ul > li.my_info{width: 9rem; height:100%;margin-top: 2px;}
.visual .login_wrap .login_input_wrap .logout_btn{width:100%; height:2.2rem; margin-bottom: 0.35rem;}
.visual .login_wrap .login_input_wrap .logout_btn input{width:100%; height:100%; font-size: 0.9rem;}
.visual .login_wrap .member_btn_wrap .hi_txt {display: none;}


/* quick_wrap */
.quick_wrap ul.menu_list{padding-left: 4%;}
.quick_wrap ul.menu_list li{float: left; margin:0.7rem 0.5rem; width:26%;}


/* my_service_wrap */

.service_btn_wrap{max-height: 23rem; overflow-y: auto; }
.service_btn_wrap{-ms-overflow-style: none;} /* IE 스크롤바 안보이게*/
.service_btn_wrap::-webkit-scrollbar {display: none !important;} /* chrome etc 스크롤바 안보이게 */
.service_btn_wrap .content_tit{position: sticky; top: 0; left: 0;}
.service_btn_wrap .my_service_btn > ul > li {width:100%; float: none;}
.service_btn_wrap .my_service_btn > ul > li:nth-child(odd){margin-right:0;} /*홀수 li 적용*/


/* my_service_wrap - service_on(사용중인 서비스 버튼) */
.service_btn_wrap .my_service_btn > ul > li.service_on{box-shadow: 1px 2px 15px 2px #c1c3c5;}
.service_btn_wrap .my_service_btn ul.content_btn {margin:0.55rem 0.75rem }
.service_btn_wrap .my_service_btn ul.content_btn > li p{font-size:0.8rem; line-height: 1rem}
.service_btn_wrap .my_service_btn ul.content_btn > li p.end_date{font-size:0.7rem; color:#ce0b33; padding-bottom:0.1rem }
.service_btn_wrap .my_service_btn ul.content_btn li.on_btn > div{width: 47.8%;}
.service_btn_wrap .my_service_btn ul.content_btn li.on_btn > div > input[type='button']{font-size: 0.7rem}

/* my_service_wrap - service_off(사용중이지 않은 서비스 버튼) */
.service_btn_wrap .my_service_btn li.service_off > ul.content_btn {margin:1.3rem 0.75rem 0.55rem}
.service_btn_wrap .my_service_btn li.service_off > ul.content_btn > li > p > span.icon_new{font-size:0.6rem; text-align: center; color: #fff; display: inline-block; width:1.8rem; height: 0.85rem; background:#6f6f6f;font-weight: bold; line-height: 0.85rem;vertical-align: top; margin-right: 2px; margin-top: 2px;}
.service_btn_wrap .my_service_btn li.service_off > ul.content_btn > li p{font-size:0.8rem; line-height: 1rem;}
.service_btn_wrap .my_service_btn li.service_off > ul.content_btn li.off_btn > div > input{width: 58%;}
.service_btn_wrap .my_service_btn li.service_off > ul.content_btn li.off_btn > div > input[type='button']{font-size: 0.7rem}


/* contents_wrap - 공지, 업데이트 */
.main_left_area{height:100%;}
.main_left_area .board_content{width: 100%; height:11rem; padding:0.75rem 0.3rem}
.main_left_area .news_menu > ul > li{width: 50%;}
.main_left_area .news_menu > ul > li > a{border-right:0; border-left:0; font-size:0.8rem; margin-left: -1px; display: block; padding: 0.75rem 0; text-align: center; height: 100%; width: 100%;}
.main_left_area .news_menu > ul > li.btn_more{display: none; float: none;}
.main_left_area .board_content ul.board_list span.board_tit{width:70%;}
.main_left_area .board_content ul.board_list li.board_txt span {font-size: 0.75rem; padding: 0.2rem 0}

/* contents_wrap -상담, 계좌, 바로가기 버튼*/
/*상담*/

.main_customer_wrap > div{width: 100%; float: left;}
.main_customer_wrap > div.customer_center{margin-bottom:1.25rem;}
.main_customer_wrap .content_txt{width: 100%; padding:0.85rem 2rem }
.main_customer_wrap .content_txt > ul > li.dong_img{display: none;}
/* 계좌*/
.main_customer_wrap .account_num li.dong_img{display: none;}
.main_customer_wrap .account_num .content_txt p.txt_detail span{margin-right: 5px; display:inline-block;}


/*상담*/
.main_customer_wrap > div{width: 100%; border-radius: 5px; border:1px solid #d7d7d7; }
.main_customer_wrap > div.customer_center{margin-bottom:1.25rem }
.main_customer_wrap .content_tit{border-radius: 4px 4px 0 0;height:2.75rem; width: 100%; line-height:2.75rem; border-bottom: 1px solid #d7d7d7}
.main_customer_wrap .content_tit > p{margin-left:1.65rem; font-size:0.9rem; display: inline-block;}
.main_customer_wrap .content_txt{width: 100%; /*height: 4.5rem*/;padding:0.85rem 1.65rem }
.main_customer_wrap .content_txt > ul {font-size: 0}
.main_customer_wrap .content_txt > ul > li{display: inline-block; font-size:0.9rem; line-height: 1.1rem; vertical-align: middle;}
.main_customer_wrap .content_txt > ul > li.dong_img{border-radius: 50%; width:2.85rem; height: 2.85rem;margin-right: 0.8rem}
.main_customer_wrap .customer_center li.dong_img{background: url('../image/main/icon_center.png') no-repeat center #f6f6f6;}
.main_customer_wrap .content_txt > ul > li strong{font-size:1.6rem; color:#003399}
.main_customer_wrap .content_txt > ul > li p.font_s15{font-size:0.75rem}


/*바로가기 버튼*/
.main_shortcut_wrap > ul > li{font-size: 0.75rem; width: 50%;}
.main_shortcut_wrap > ul > li > a{padding-left:5%}
.main_shortcut_wrap > ul > li:nth-child(4){border-bottom: 1px solid #d7d7d7;}


}