/* 공통 레이아웃 */

@charset "utf-8";

#wrap {width:100%;height:auto;max-width:640px;margin:0 auto;}

/* 헤더 */
header {margin:0;background:#fff;border-bottom:1px solid #ebebeb;}
header .head_inner {margin:0 auto;width:100%;max-width:640px;padding:15px 10px;position:relative;}
header .logo {margin:0 auto;width:30%;max-width:166px;}
header .logo img {width:100%;}
header .nav {position:absolute;top:1.5em;left:20px;}
header .h_notice {position:absolute;top:1.5em;right:28px;}
header .h_notice a {display:block;}
header .h_notice .notice_num {position:absolute;top:0;right:-20px;width:20px;height:20px;border-radius:10px;line-height:18px;text-align:center;color:#fff;font-size:12px;background:#e4007f;}

.cate_box {width:100%;padding:15px 20px;}

/* 대 카테고리 */
.depth1_tab {width:100%;padding:0 10px;}
.depth1_tab:after {clear:both;display:block;content:'';visibility:hidden;height:0;}
.depth1_tab>li {float:left;;width:50%;padding:0 15px;text-align:center;}
.depth1_tab>li a {display:inline-block;width:100%;padding:5px;color:#b5b5b5;font-size:1.2rem;font-weight:500;text-align:center;border-radius:25px;}
.depth1_tab>li a.on {background:#e4007f;color:#fff;}

.cont_wrapper {padding:10px;background:#f6f6f6;height:auto;}

/* 청구요금 */
.charge_summary_box {background:#fff;border:1px solid #ccc;border-radius:10px;overflow:hidden;}
.charge_summary_box .charge_head {margin:10px auto;width:98%;padding:15px 20px;border-bottom:1px solid #d7d7d7;}
.charge_summary_box .charge_head:after {clear:both;display:block;content:'';visibility:hidden;height:0;}
.charge_summary_box .charge_head .charge_title {float:left;font-size:22px;font-weight:500;letter-spacing:-1px;}
.charge_summary_box .charge_head .charge_num {display:block;float:right;}
.charge_summary_box .charge_head .charge_num>span {color:#e4007f;font-weight:500;}
.charge_summary_box .charge_head .charge_num img {vertical-align:middle;}
.charge_summary_box .charge_head .btn_page {float:right;}
.btn_charge_scarlet {display:inline-block;width:90px;padding:5px 8px;background:#e4007f;color:#fff;text-align:center;font-weight:500;;}
.btn_charge_black {display:inline-block;width:90px;padding:5px 8px;background:#333;color:#fff;text-align:center;font-weight:500;;}

.charge_summary_box .phone_info {margin:10px auto;width:98%;padding:15px 20px;}
.charge_summary_box .phone_info:after {clear:both;display:block;content:'';visibility:hidden;height:0;}
.charge_summary_box .phone_info .phone_icon {float:left;padding:0 10px;}
.charge_summary_box .phone_info .phone_num {float:left;padding:10px 10px;font-size:18px;font-weight:500;}
.charge_summary_box .phone_info .phone_num .di_line {color:#999;font-weight:300;}
.charge_summary_box .phone_info .phone_num .number {padding:0 10px 0 8px;}

.charge_summary_box .charge_amount {padding:15px 20px;background:#f4f7fb;}
.charge_summary_box .charge_amount:after {clear:both;display:block;content:'';visibility:hidden;height:0;}
.charge_summary_box .charge_amount .amount_dt {float:left;}
.charge_summary_box .charge_amount .amount_dt span {display:block;}
.charge_summary_box .charge_amount .amount_dt .ch_month {margin:0 0 5px 0;font-weight:500;}
.charge_summary_box .charge_amount .amount_dt .ch_term {color:#898989;}
.charge_summary_box .charge_amount .amount_dd {float:right;color:#e4007f;}
.charge_summary_box .charge_amount .amount_dd em {font-size:1.5rem;font-weight:500;letter-spacing:-1px;}

/*  바로가기 메뉴 */
.quick_dir_box {margin:20px 0 20px 0;padding:25px 20px;background:#fff;border:1px solid #ccc;border-radius:10px;overflow:hidden;}
.quick_dir_box .quick_menu {margin:0 auto;padding:0 5px;width:100%;max-width:480px;}
.quick_dir_box .quick_menu :after {clear:both;display:block;content:'';visibility:hidden;height:0;}
.quick_dir_box .quick_menu li {float:left;padding:10px;width:33.333%;}
.quick_dir_box .quick_menu li a {display:block;text-align:center;}
.quick_dir_box .quick_menu li a > span {display:block;}
.quick_dir_box .quick_menu>li a .menu_icon {margin:0 auto;width:100%;max-width:70px;}
.quick_dir_box .quick_menu>li a .menu_icon img {width:100%;}
.quick_dir_box .quick_menu li a .menu_name{padding:5px 0;text-align:center;font-size:14px;font-weight:500;}

/* 하단 배너 */
.banner_box {margin:0 auto;width:100%;padding:0 0;}
.banner_wrapper {width:100%;text-align:center;position:relative;}

/* 푸터 */
footer {margin:10px 0;padding:15px 10px;width:100%;background:#fafafa;border-top:1px solid #d7d7d7;}
footer .footer_nav {margin:0 auto;width:98%;padding:5px 0 10px;text-align:center;}
footer .footer_nav li {display:inline-block;padding:0 4px;text-align:center;font-size:12px;}
footer .footer_nav li a {color:#333;}
footer .footer_nav li a.privacy {color:#e4007f;}
footer address {color:#898989;font-size:12px;text-align:center;}
footer .copyright {padding:10px 0;text-align:center;} 


/* 팝업 */
.myflash_pop_win {position:fixed;top:8%;left:50%;transform:translateX(-50%);width:98%;max-width:480px;}
.myflash_pop_box {margin:0 auto;width:98%;padding:20px 15px;background:#fff;box-shadow:0 5px 5px 2px rgba(0,0,0,.1);border:1px solid #333;}
.myflash_pop_box .pop_title {padding:5px 0 10px 0;border-bottom:1px solid #898989;font-size:22px;font-weight:500;letter-spacing:-1px;}
.myflash_pop_box .myflash_content {margin:15px 0;}
.myflash_pop_box .pop_tb {width:100%; border-top:2px solid #4b4b4b; font-size:13px;}
.myflash_pop_box .pop_tb th{background:#ebebeb; padding:10px; border-right:1px solid #ccc; border-bottom:1px solid #ccc;}
.myflash_pop_box .pop_tb th:last-child, .myflash_pop_box .pop_tb td:last-child {border-right:none;}
.myflash_pop_box .pop_tb td {padding:10px;background:#fff; text-align: center;border-right:1px solid #ccc; border-bottom:1px solid #ccc;}
.myflash_pop_box .pop_g_txt {padding:6px 2px;font-size:12px;text-align:right;}
.pop_close {display:block;position:absolute;top:-5px;right:-5px;background:#333;width:30px;height:30px;text-align:center;padding-top:6px;border-radius:15px;}
.pop_close img {width:18px;height:auto;}

/*********** 모바일 메뉴 ************/

html.open {overflow: hidden;}
.close {display:block;width: 50px;height:50px;position:absolute;right:10px;top:25px;color:#fff;} 
#menu {width:100%;max-width:640px;height: 100%;position:fixed;top: 0px;left:-100%;z-index: 10;background-color:#fff;text-align: center;transition:All 0.5s ease;-webkit-transition:All 0.5s ease;-moz-transition:All 0.5s ease;-o-transition:All 0.5s ease;}
#menu.open {left: 0px;}
.page_cover.open {display: block;}
.page_cover {width: 100%;height: 100%;position: fixed;top: 0px;left: 0px;background-color: rgba(0, 0, 0, 0.7);z-index: 4;display: none;}

.menu_head {padding:20px 15px;background:#e4007f;color:#fff;text-align:left;}
.menu_head .login_txt {font-size:15px;}
.menu_head .btn_login {display:inline-block;width:100px;margin-left:10px;padding:8px 6px 8px 38px;color:#fff;border:1px solid #fff;background:url(../img/common/icon_login.png) 10px center no-repeat;}
.menu_head .btn_logout {display:inline-block;width:100px;margin-left:10px;padding:8px 6px 8px 38px;color:#fff;border:1px solid #fff;background:url(../img/common/icon_logout.png) 10px center no-repeat;}
.menu_box {display:table;width:100%;background:#eff2f7;}
.menu_box:after {clear:both;display:block;content:'';visibility:hidden;height:0;}
.icon_tab {display:table-cell;margin:0 auto;width:20%;max-width:108px;}
.icon_tab li {height:90px;}
.icon_tab li a {position:relative;display:block;padding:10px 5px;width:100%;height:100%;}
.icon_tab li a.selected {background:#fff;}
.icon_tab li a.selected .nav_name {color:#e4007f;}
.icon_tab li a.selected:after {position:absolute;top:40px;right:-3px;content:url(/img/common/arrow_red.png);}
.icon_tab .nav_icon {padding:7px 6px;height:40px;text-align:center;}
.icon_tab .icon01 {background:url(../img/common/mobile_nav_icon01.png) center center no-repeat;background-size:70% auto;}
.icon_tab .icon02 {background:url(../img/common/mobile_nav_icon02.png) center center no-repeat;background-size:70% auto;}
.icon_tab .icon03 {background:url(../img/common/mobile_nav_icon03.png) center center no-repeat;background-size:70% auto;}
.icon_tab .icon04 {background:url(../img/common/mobile_nav_icon04.png) center center no-repeat;background-size:70% auto;}
.icon_tab .icon05 {background:url(../img/common/mobile_nav_icon05.png) center center no-repeat;background-size:70% auto;}
.icon_tab .icon06 {background:url(../img/common/mobile_nav_icon06.png) center center no-repeat;background-size:70% auto;}
.icon_tab .icon07 {background:url(../img/common/mobile_nav_icon07.png) center center no-repeat;background-size:70% auto;}
.icon_tab .icon08 {background:url(../img/common/mobile_nav_icon08.png) center center no-repeat;background-size:70% auto;}
.icon_tab .icon09 {background:url(../img/common/mobile_nav_icon09.png) center center no-repeat;background-size:70% auto;}
.icon_tab li a.selected  .icon01 {background:url(../img/common/mobile_nav_icon01_on.png) center center no-repeat;background-size:70% auto;}
.icon_tab li a.selected  .icon02 {background:url(../img/common/mobile_nav_icon02_on.png) center center no-repeat;background-size:70% auto;}
.icon_tab li a.selected  .icon03 {background:url(../img/common/mobile_nav_icon03_on.png) center center no-repeat;background-size:70% auto;}
.icon_tab li a.selected  .icon04 {background:url(../img/common/mobile_nav_icon04_on.png) center center no-repeat;background-size:70% auto;}
.icon_tab li a.selected  .icon05 {background:url(../img/common/mobile_nav_icon05_on.png) center center no-repeat;background-size:70% auto;}
.icon_tab li a.selected  .icon06 {background:url(../img/common/mobile_nav_icon06_on.png) center center no-repeat;background-size:70% auto;}
.icon_tab li a.selected  .icon07 {background:url(../img/common/mobile_nav_icon07_on.png) center center no-repeat;background-size:70% auto;}
.icon_tab li a.selected  .icon08 {background:url(../img/common/mobile_nav_icon08_on.png) center center no-repeat;background-size:70% auto;}
.icon_tab li a.selected  .icon09 {background:url(../img/common/mobile_nav_icon09_on.png) center center no-repeat;background-size:70% auto;}
.icon_tab .nav_name {letter-spacing:-1px;font-size:12px;text-align:center;color:#748593;}
.menu_box .panel {display:table-cell;width:80%;padding:0 10px 15px 20px;background:#fff;}
.menu_box .panel .sub_menu {}
.menu_box .panel .sub_menu>li {padding:10px 10px;text-align:left;border-bottom:1px solid #d7d7d7;}
.menu_box .panel .sub_menu>li a {}







@media screen and (min-width: 481px) {

.cont_wrapper {padding:20px;}
/* 모바일메뉴 */
.icon_tab .nav_icon {padding:7px 6px;height:45px;}
.icon_tab .icon01 {background:url(../img/common/mobile_nav_icon01.png) center center no-repeat;background-size:auto auto;}
.icon_tab .icon02 {background:url(../img/common/mobile_nav_icon02.png) center center no-repeat;background-size:auto auto;}
.icon_tab .icon03 {background:url(../img/common/mobile_nav_icon03.png) center center no-repeat;background-size:auto auto;}
.icon_tab .icon04 {background:url(../img/common/mobile_nav_icon04.png) center center no-repeat;background-size:auto auto;}
.icon_tab .icon05 {background:url(../img/common/mobile_nav_icon05.png) center center no-repeat;background-size:auto auto;}
.icon_tab .icon06 {background:url(../img/common/mobile_nav_icon06.png) center center no-repeat;background-size:auto auto;}
.icon_tab .icon07 {background:url(../img/common/mobile_nav_icon07.png) center center no-repeat;background-size:auto auto;}
.icon_tab .icon08 {background:url(../img/common/mobile_nav_icon08.png) center center no-repeat;background-size:auto auto;}
.icon_tab .icon09 {background:url(../img/common/mobile_nav_icon09.png) center center no-repeat;background-size:auto auto;}
.icon_tab li a.selected  .icon01 {background:url(../img/common/mobile_nav_icon01_on.png) center center no-repeat;background-size:auto auto;}
.icon_tab li a.selected  .icon02 {background:url(../img/common/mobile_nav_icon02_on.png) center center no-repeat;background-size:auto auto;}
.icon_tab li a.selected  .icon03 {background:url(../img/common/mobile_nav_icon03_on.png) center center no-repeat;background-size:auto auto;}
.icon_tab li a.selected  .icon04 {background:url(../img/common/mobile_nav_icon04_on.png) center center no-repeat;background-size:auto auto;}
.icon_tab li a.selected  .icon05 {background:url(../img/common/mobile_nav_icon05_on.png) center center no-repeat;background-size:auto auto;}
.icon_tab li a.selected  .icon06 {background:url(../img/common/mobile_nav_icon06_on.png) center center no-repeat;background-size:auto auto;}
.icon_tab li a.selected  .icon07 {background:url(../img/common/mobile_nav_icon07_on.png) center center no-repeat;background-size:auto auto;}
.icon_tab li a.selected  .icon08 {background:url(../img/common/mobile_nav_icon08_on.png) center center no-repeat;background-size:auto auto;}
.icon_tab li a.selected  .icon09 {background:url(../img/common/mobile_nav_icon09_on.png) center center no-repeat;background-size:auto auto;}
}


@media (max-height: 860px), screen and (orientation: landscape) {

#menu {position:absolute;overflow-y:auto;}


}