@charset "utf-8";

/* common */
.table_default {margin-bottom:60px;}
.btn_area a {display:inline-block; padding:4px 20px; font-size:14px; border:1px solid #ccc; border-radius:25px;}
.btn_addit {margin:0 10px;}

#container h4 {position:relative; margin-bottom:16px; font-weight:500; font-size:24px;}
#container h4 > .desc-right {position:absolute; right:0; bottom:0; font-weight:500; font-size:16px; color:#797979;}


.my-header {position:relative; padding:50px 0; background-color:#F3F4F8;}
.my-header h3 {margin-bottom:20px; padding-top:0; font-weight:500; font-size:36px;}
.my-header .user-type {margin-bottom:4px; font-weight:300; font-size:16px; line-height:1.5;}
.my-header .user-type .number {position:relative; margin-left:8px; padding-left:10px; color:#666;}
.my-header .user-type .number::before {content:""; display:block; position:absolute; left:0; top:7px; width:1px; height:14px; background:#aaa;}
.my-header .user-welcome {font-weight:500; font-size:26px; line-height:1.5;}
.my-header .quick_menu {position:absolute; right:0; top:50%; transform:translateY(-50%);}
.my-header .quick_menu li {float:Left; display:inline-block; margin:0 6px; background:#fff; border:4px solid #fff; border-radius:8px; box-shadow:5px 5px 15px rgba(0,0,0,.1);}
.my-header .quick_menu li a {display:block; width:100px; min-height:96px; padding-top:60px; text-align:center; font-weight:300; font-size:15px; color:#666;}
.my-header .quick_menu li.usage a {background:url(../images/main/my_ic1.png) no-repeat center 30%; background-size:35px auto;}
.my-header .quick_menu li.usagefee a {background:url(../images/main/my_ic2.png) no-repeat center 30%; background-size:27px auto;}
.my-header .quick_menu li.billpayment a {background:url(../images/main/my_ic3.png) no-repeat center 30%; background-size:19px auto;}
.my-header .quick_menu li.joininfo a {background:url(../images/main/my_ic4.png) no-repeat center 30%; background-size:27px auto;}

/* 
.my-header .quick_menu:after {content:''; display:block; clear:both;}
.my-header .quick_menu > li {position: relative; float:left; padding:20px 20px 20px 90px; background:#fff; border:2px solid #fff; box-shadow:5px 5px 15px rgba(0,0,0,0.10); cursor:pointer;
    display: block;
    height: 100%;
   transition: border 0.3s ease-in-out;
}
.my-header .quick_menu > li > a {display:block; padding-top:75px; text-align:center; color:#34404c; font-size:17px; font-weight:300;}
.my-header .quick_menu > li:hover > a {color:#e6000b;}
 */

.my-wrap {padding:60px 0 50px; margin-bottom:50px;}

.my-box {margin-bottom:60px; padding:46px 40px; border-radius:4px;
	background:linear-gradient(135deg, #6713D2 0%, #CB40DF 100%);
	background:-webkit-linear-gradient(-45deg, #6713D2 0%, #CB40DF 100%);
	background:-moz-linear-gradient(-45deg, #6713D2 0%, #CB40DF 100%);
}
.my-box::after {content:""; display:block; clear:both;}
.my-box .tit {float:left; text-align:left; font-weight:200; font-size:24px; color:#fff;}
.my-box .price {float:right; text-align:right; font-size:24px; color:#fff;}
.my-box .price > strong {font-family:'roboto'; font-weight:600; font-size:36px;}
.my-box .info-area-right {padding-top:60px;}
.my-box .info-area-right dl {border-bottom:1px solid rgba(255,255,255,.5);}
.my-box .info-area-right dl > dt {color:#fff;}
.my-box .info-area-right dl > dd {font-weight:500; color:#fff;}

.join-box {margin-bottom:60px; padding:46px 40px; border-radius:4px; background:#F1F5FA;}
.join-box::after {content:""; display:block; clear:both;}
.join-box .info-area-left {position:relative;}
.join-box .bg-img-eyagi {padding:16px 0 0 92px;}
.join-box .bg-img-eyagi:after {content:""; display:block; position:absolute; left:0; top:0; width:72px; height:123px; background:url(../images/icon/my_basic.png?20220530) no-repeat; background-size:contain;}
.join-box .info-area-left .user-state {margin-bottom:12px; font-weight:500; font-size:18px}
.join-box .info-area-left .user-state dt {display:inline-block;}
.join-box .info-area-left .user-state dd {display:inline-block; padding-left:4px; color:#e6000b;}

.info-area-left {float:left; width:50%;}
.info-area-right {clear:right; float:right; width:50%;}
.info-area-right dl {display:table; width:100%; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid #e2e2e2;}
.info-area-right dl:last-child {margin-bottom:0;}
.info-area-right dl > dt {display:table-cell; vertical-align:middle; text-align:left; font-weight:300; color:#797979;}
.info-area-right dl > dd {display:table-cell; vertical-align:middle; text-align:right; font-weight:300; color:#191919;}

/* 실시간 사용량 */
.graph-wrap .graphbox {position:relative; margin-bottom:40px; padding-bottom:30px; border:1px solid #e2e2e2;}
.graph-wrap .graphbox::after {content:""; display:block; clear:both;}
.graph-wrap .graphbox h5 {padding:16px 24px; font-size:20px; font-weight:500; background:#f6f6f6;}
.graph-wrap .graphbox .graph_area {width:100%; padding:30px 40px 6px 40px; font-size:17px; font-weight:500;}
.graph-wrap .graphbox .graph_area:last-child {padding-bottom:0; border-bottom:0;}
.graph-wrap .graphbox .graph_area:after {content:''; display:block; clear:both;}
.graph-wrap .graphbox .graph_area .title {font-size:17px;}
.graph-wrap .graphbox .graph_area .in ::after {content:""; display:block; clear:both;}
.graph-wrap .graphbox .graph_area .in p {font-weight:300; color:#666;}
.graph-wrap .graphbox .graph_area .in strong {font-family:roboto, 'notosanskr', sans-serif; font-size:20px; font-weight:500; letter-spacing:0;}
.graph-wrap .graphbox .graph_area .in .left {float:left; font-size:16px;}
.graph-wrap .graphbox .graph_area .in .right {float:right; font-size:16px; color:#666;}
.graph-wrap .graphbox .graph_area .in .right strong {color:#e6000b;}
.graph-wrap .graphbox .graph_area .in .graph {clear:both; position:relative; width:100%; height:14px; margin:12px 0; background-color:#e2e2e2;}
.graph-wrap .graphbox .graph_area .in .graph > .graph_inner {position:absolute; left:0; top:0; right:0; bottom:0; background-color:#1396db;}

.callbox .left > strong, .callbox .txt {color:#0085cc !important;}
.databox .left > strong, .databox .txt {color:#008fa0 !important;}
.msgbox .left > strong, .msgbox .txt {color:#ae62d2 !important;}
.callbox .graph > .graph_inner {background-color:#1396db !important;}
.databox .graph > .graph_inner {background-color:#00aabe !important;}
.msgbox  .graph >.graph_inner {background-color:#ce96e8 !important;}

/* 청구서조회 */
.bill_month li {cursor:pointer;}
.bill_month li > div {width:25%;}
.bill_month li > .inv,
.bill_month li > .pym {font-family:'roboto';}
.bill_month li.active {
	background:linear-gradient(135deg, #6713D2 0%, #CB40DF 100%);
	background:-webkit-linear-gradient(-45deg, #6713D2 0%, #CB40DF 100%);
	background:-moz-linear-gradient(-45deg, #6713D2 0%, #CB40DF 100%);
}
.bill_month li.active > div,
.bill_month li.active > .btn_area a {color:#fff;}

.bill_table td {clear:right;}
.bill_table td p {float:right; display:inline-block; font-size:16px; font-weight:300; letter-spacing: 0;}
.bill_table td p > strong {font-family:'roboto'; font-size:18px; font-weight:600;}
.bill_table td ul li {position:relative; margin-bottom:8px; text-align:left; font-weight:300; color:#666; clear:right;}
.bill_table td ul li:last-child {margin-bottom:0;}
.bill_table td ul li.spacing {margin-top:6px; padding:8px 4px 2px 26px; background:#f9f9f9;}
.bill_table td ul li.spacing::before {content:""; display:block; position:absolute; left:12px; top: 50%; width: 8px; height:8px; margin-top:-6px; border-bottom: 1px solid #aaa; border-left: 1px solid #aaa;}
.bill_table td ul li.spacing p {color:#797979;}
.bill_table td ul li.spacing p > strong {font-weight:500; font-size:16px;}
.bill_table td ul ul {margin-top:6px; padding:8px 4px 2px; background:#f9f9f9;}
.bill_table td ul ul > li {padding-left:26px; background:#f9f9f9;}
.bill_table td ul ul > li::before {content:""; display:block; position:absolute; left:12px; top: 50%; width: 8px; height:8px; margin-top:-6px; border-bottom: 1px solid #aaa; border-left: 1px solid #aaa;}
.bill_table td ul ul > li p {color:#797979;}
.bill_table td ul ul > li p > strong {font-weight:500; font-size:16px;}
.bill_table .fee_bottom th,
.bill_table .fee_bottom td {background:#e2e2e2;}
.bill_table .fee_bottom td p strong {font-size:22px;}

/* list table */
.bill_list {margin-bottom:60px;}
.bill_list li {position:relative; width:100%; padding:16px 20px; border-bottom:1px solid #ddd;}
.bill_list li::after {content:""; dislay:block; clear:both;}
.bill_list li p {float:right; display:inline-block; font-weight:500;}
.bill_list li p strong {font-family:'roboto'; margin-right:2px;}
.bill_list .depth_head {font-size:18px; font-weight:700; border-top:1px solid #000;}
.bill_list .depth_head + .depth_head {margin-top:-1px;}
.bill_list .depth_head p {font-weight:500; font-size:22px;}
.bill_list .depth_head p > strong {font-size:24px;}
.bill_list .depth_body {font-size:16px; color:#666;} 
.bill_list .depth_body.depth2 {padding-left:42px; background:#f6f6f8;}
.bill_list .depth_body.depth2::before {content:""; display:block; position:absolute; left:24px; top: 50%; width: 8px; height:8px; margin-top:-6px; border-bottom: 1px solid #aaa; border-left: 1px solid #aaa;}
.bill_list .depth_body.depth2 p {color:#797979;}
.bill_list .depth_bottom {padding:24px 20px; font-size:20px; font-weight:600; color:#ee002f; background:#e2e2e2}
.bill_list .depth_bottom p {font-size:22px; font-weight:600; color:#ee002f;} 
.bill_list .depth_bottom p strong {font-size:24px; font-weight:700;}

/*
.bill_list {margin-bottom:60px; border:1px solid #ddd; border-top:2px solid #000; border-bottom-width:0;}
.bill_list li {position:relative; width:100%;}
.bill_list li p {display:inline-block; font-weight:300;}
.bill_list li p strong {font-family:'roboto';}
.bill_list .depth_tit {display:flex; border-bottom:1px solid #ddd;}
.bill_list .bill_list_body .body_tit,
.bill_list .bill_list_bottom .body_tit {width:20%; padding:16px 24px; font-weight:500; border-right:1px solid #ddd; background-color:#fafafa;}
.bill_list .bill_list_body .body_depth,
.bill_list .bill_list_bottom .body_depth  {width:80%; padding:16px 24px; font-weight:300; background-color:#fff;}
.bill_list .bill_list_body .body_depth li {margin-bottom:8px; text-align:left; color:#666;}
.bill_list .bill_list_body .body_depth li::after {content:""; dislay:block; clear:both;}
.bill_list .bill_list_body .body_depth li p {float:right;}
.bill_list .bill_list_body .body_depth li p strong {font-family:'roboto';}
.bill_list .bill_list_body .body_depth .depth1 p > strong {font-size:18px; font-weight:600;}
.bill_list .bill_list_body .body_depth .depth2 {margin:0; padding:8px 6px 8px 26px; background:#f6f6f8;}
.bill_list .bill_list_body .body_depth .depth2::before {content:""; display:block; position:absolute; left:12px; top: 50%; width: 8px; height:8px; margin-top:-6px; border-bottom: 1px solid #aaa; border-left: 1px solid #aaa;}
.bill_list .bill_list_body .body_depth .depth2 p {color:#797979;}
.bill_list .bill_list_body .body_depth .depth2 p > strong {font-weight:500; font-size:16px;}
.bill_list .bill_list_bottom {background: #e2e2e2;}
.bill_list .bill_list_bottom .body_tit,
.bill_list .bill_list_bottom .body_depth {background:#e2e2e2;}
.bill_list .bill_list_bottom .body_depth .total {text-align:right;}
.bill_list .bill_list_bottom .body_depth .total p strong {font-weight:600; font-size:22px;}

 */


/****************************************
# orginal desgin
****************************************/
/* 공통 */
.refresh {position:absolute; right:20px; top:15px; display:inline-block; padding:5px 10px 6px; font-size:14px; text-align:center; color:#999; border:1px solid #ccc; border-radius:15px; z-index:10;}
.refresh.on,
.refresh:hover {border-color:#e6000b; color:#e6000b;}
.date {font-size:15px; font-weight:300; color:#666;}

/* btn */
.btn_box {position:relative;}
.btn_box > a {display:inline-block; padding:5px 8px 6px; font-size:14px; border:1px solid #ccc; border-radius:3px;}
.btn_box > a:hover {color:#e6000b; border-color:#e6000b;}

/* 메인 */
.myInfo {display:block; width:100%; height:70px; line-height:70px; padding:0 30px; background-color:#6713d2;
	background:-webkit-linear-gradient(left, #cc208e 0%,#6713d2 100%);
	background:-moz-linear-gradient(left, #cc208e 0%, #6713d2 100%);
	background:linear-gradient(to right, #cc208e 0%, #6713d2 100%);
}
.myInfo > span {position:relative; padding:0 10px 0 10px; display:inline-block; font-weight:300; font-size:19px; color:#fff;}
.myInfo > span:after {content:''; display:block; position:absolute; right:0; top:50%; width:1px; height:16px; margin-top:-8px; background-color:#ccc;}
.myInfo > span:first-child {padding-left:0;}
.myInfo > span:last-child::after {display:none;}
.myInfo .mno {margin-right:8px;}

.infoList {position:relative; border:1px solid #e2e2e2; box-sizing:border-box;
	border-image:linear-gradient(135deg, #cc208e 0%, #6713d2 100%);
    -webkit-border-image:-webkit-linear-gradient(-45deg, #cc208e 0%, #6713d2 100%);
    -moz-border-image:-moz-linear-gradient(-45deg, #cc208e 0%, #6713d2 100%);
    -webkit-border-image-slice:1;
    border-image-slice:1;
}
.infoList {position:relative; width:100%; margin-bottom:50px;}
.infoList .head {position:relative;}
.infoList .head .tit {width:100%;  padding:20px 25px; padding-left:25px; font-size:20px; font-weight:300; background-color:#f0f1f2;}
.infoList .head .tit > span {padding-left:10px; font-weight:300; font-size:16px;}
.infoList .head .btn_detail {float:right; display:block; width:96px; height:56px; font-size:16px; font-weight:300; color:#797979; background-color:#ddd; text-align:center;}
.infoList .cont {position:relative;}
.infoList .cont > .info_box {display:table; width:100%;}
.infoList .cont > .info_box > div {display:table-cell; width:50%; padding:20px 30px; text-align:center; vertical-align:middle; border:1px solid #e2e2e2; border-left:0; background-color:#f7f8f9;}
.infoList .cont > .info_box > div:first-child {border-left:0;}
.infoList .cont > .info_box > div dt {font-size:17px; font-weight:300; color:#666;}
.infoList .cont > .info_box > div dd {margin-top:8px; font-size:19px; font-weight:600;}
.infoList .cont > .info_box .tit {font-weight:500; font-size:21px; letter-spacing:-1.5px; line-height:1.47;}
.infoList .cont > .info_box .date {display:block; margin-top:15px; font-size:16px;}
.infoList .cont > .info_box .tot_fee {display:block; font-size:28px; color:#e6000b; line-height:1.2}
.infoList .cont > .info_box .tot_fee > strong {font-size:32px; font-weight:600;}
.infoList .cont > .info_box .price_list li {clear:right; position:relative; padding:10px 8px 15px; border-bottom:1px dashed #ddd; font-size:16px; font-weight:300; text-align:left;}
.infoList .cont > .info_box .price_list li:first-child {padding-top:0 !important;}
.infoList .cont > .info_box .price_list p {float:right; display:inlnie-block;}
.infoList .cont > .info_box .price_list p > strong {font-size:19px; font-weight:600;}

/* 실시간 사용량 */
.infoList .cont > .graphbox {padding:25px 35px 50px; border-bottom:1px solid #e2e2e2;}
.infoList .cont > .graphbox h4 {font-size:20px; font-weight:500;}
.infoList .cont > .graphbox .graph_area {position:relative; padding:25px 55px 6px 65px; font-size:17px; font-weight:500;}
.infoList .cont > .graphbox .graph_area:last-child {padding-bottom:0; border-bottom:0;}
.infoList .cont > .graphbox .graph_area:after {content:''; display:block; clear:both;}
.infoList .cont > .graphbox .graph_area .title {position:absolute; top:32px; font-size:18px; font-weight:300; color:#222;}
.infoList .cont > .graphbox .graph_area .in {padding-left:300px;}
.infoList .cont > .graphbox .graph_area .in .left {float:left; font-size:18px; color:#0085cc;}
.infoList .cont > .graphbox .graph_area .in .right {float:right; font-size:18px; color:#666;}
.infoList .cont > .graphbox .graph_area .in p {font-weight:300;}
.infoList .cont > .graphbox .graph_area .in strong {font-weight:500;}
.infoList .cont > .graphbox .graph_area .in .graph {clear:both; position:relative; width:100%; height:13px; margin:8px 0; background-color:#e2e2e2; border-radius:5px;}
.infoList .cont > .graphbox .graph_area .in .graph > .graph_inner {position:absolute; left:0; top:0; right:0; bottom:0; border-radius:5px; background-color:#1396db;}

/* 실시간 사용량/청구서 조회 */
.infoList .cont > .usage_fee {padding:55px 80px;}
.infoList .cont > .usage_fee dl {display:table; width:100%; }
.infoList .cont > .usage_fee dl > dt {display:table-cell; vertical-align:middle;}
.infoList .cont > .usage_fee dl > dd {display:table-cell; vertical-align:middle;}
.infoList .cont > .usage_fee .bill {position:relative;  margin-top:40px;}
.infoList .cont > .usage_fee .bill:first-child {margin-top:0;}
.infoList .cont > .usage_fee .bill .tit {padding-bottom:12px; font-size:20px; font-weight:600; border-bottom:2px solid #e6000b;}
.infoList .cont > .usage_fee .bill dl {position:relative; border-bottom:1px solid #e2e2e2; padding-bottom:3px; line-height:1.47;}
.infoList .cont > .usage_fee .bill dt {float:left; width:24%; font-size:16px; font-weight:500; padding:10px 0 11px; text-align:left; font-size:16px;}
.infoList .cont > .usage_fee .bill dd {float:left; width:76%; text-align:right; font-size:19px;}
.infoList .cont > .usage_fee .bill dd li {position:relative; padding:10px 0 11px; text-align:left; border-bottom:1px solid #e2e2e2; font-size:16px; font-weight:300;}
.infoList .cont > .usage_fee .bill dd li:last-child {border-bottom:0;}
.infoList .cont > .usage_fee .bill dd li > p {float:right; display:inline-block; font-size:16px; font-weight:300;}
.infoList .cont > .usage_fee .bill dd li > p > strong {font-size:17px; font-weight:500;}
.infoList .cont > .bill_month {width:100%;}
.infoList .cont > .bill_month > div {display:table; width:100%; padding:0 !important; text-align:center;}
.infoList .cont > .bill_month li {display:table-cell; position:relative; width:182px; padding:20px 25px; background:#fff; cursor:pointer;}
.infoList .cont > .bill_month li:last-child {border-right:0;}
.infoList .cont > .bill_month li .month {display:block; width:46px; height:46px; margin-bottom:15px; line-height:48px; text-align:center; font-weight:300; font-size:17px; background-color:#aaa; color:#fff; border-radius:50%;}
.infoList .cont > .bill_month li .month > strong {font-weight:600; font-size:21px;}
.infoList .cont > .bill_month li .month.active {background-color:#e6000b; color:#fff;}
.infoList .cont > .bill_month li dl {display:table; width:100%; padding:6px 0 8px; border-bottom:1px dashed #ddd;}
.infoList .cont > .bill_month li dt {display:table-cell; vertical-align:middle; text-align:left; font-size:14px;}
.infoList .cont > .bill_month li dd {display:table-cell; vertical-align:middle; text-align:right; font-size:15px; font-weight:300;}
.infoList .cont > .bill_month li dl:nth-child(3) dd {color:#e6000b;}
.infoList .cont > .bill_month li .btn_view {display:inline-block; width:100%; margin-top:15px; padding:5px 0; font-size:14px; border:1px solid #ccc; color:#000; border-radius:5px;}
.infoList .cont > .bill_month li:hover .btn_view {border:1px solid #e6000b; color:#e6000b;}

/* 가입정보 */
.infoList .cont .table_list {width:100%; padding:35px 30px;}
.infoList .cont .table_list:first-child {padding-bottom:0;}
.infoList .cont .table_list .tit {margin-bottom:10px; font-weight:500; font-size:18px;}
.infoList .cont .table_list div {border:1px solid #e2e2e2; border-top:2px solid #e6141b;}
.infoList .cont .table_list div:after {content:''; display:block; clear:both;}
.infoList .cont .table_list div.pc-7 dl {float:left; width:calc(100%/7);}
.infoList .cont .table_list div.pc-8 dl {float:left; width:calc(100%/8);}
.infoList .cont .table_list div dl {width:100%; border-bottom:1px solid #f2f2f2;}
.infoList .cont .table_list div dl:last-child {border-bottom:0;}
.infoList .cont .table_list div dl dt {height:62px; padding:12px 10px; text-align:center; font-weight:300; color:#555; background-color:#f6f6f6; border-left:1px solid #e2e2e2; word-break:keep-all;}
.infoList .cont .table_list div dl dd {height:62px; padding:12px 10px; text-align:center; color:#000; border-left:1px solid #e2e2e2;}
.infoList .cont .table_list div dl:first-child dt, 
.infoList .cont .table_list div dl:first-child dd {border-left:0;}
.infoList .cont .box_list {position:relative;}
.infoList .cont .box_list:after {content:''; display:block; clear:both;}
.infoList .cont .box_list dl {float:left; position:relative; display:block; padding:20px 30px; border-bottom:1px solid #e2e2e2;}
.infoList .cont .box_list dl:after {content:''; display:block; position:absolute; right:0; top:0; width:1px; height:100%; background-color:#e2e2e2;}
.infoList .cont .box_list dl > dt {margin-bottom:8px; font-weight:300; font-size:17px; color:#666;}
.infoList .cont .box_list dl > dd {font-weight:500; font-size:18px;}
.infoList .cont .box_list .btn_box {z-index:1; position:absolute; right:40px; top:20px; height:38px; padding:0 20px; line-height:35px; font-size:17px; font-weight:300; color:#222; border:1px solid #ccc; border-radius:25px;}
.infoList .cont .box_list + .guide {padding:20px 30px; border-top:1px solid #e2e2e2;}
.infoList .cont .join_box {width:1100px; height:200px;}
.infoList .cont .join_box dl {width:352px; height:100px;}
.infoList .cont .join_box .main {width:396px; height:100%; background:url(../images/icon/my_basic.png) no-repeat 30px center; background-size:85px auto;}
.infoList .cont .join_box .main dt {display:none; font-size:0; text-intent:-9999px;}
.infoList .cont .join_box .main dd {padding-left:110px; padding-top:30px;}
.infoList .cont .join_box .main dd p {font-size:17px; font-weight:300; color:#666; line-height:1.47;}
.infoList .cont .join_box .main dd p > span {display:inline-block; margin-left:5px; color:#e6000b;}
.infoList .cont .join_box .tel {font-size:17px; color:#222;}
.infoList .cont .join_box .addr {font-size:15px; font-weight:300; color:#666;}

/****************************************/



/****************************************
# 분실/습득
****************************************/
.table-group .sel_time div {width:auto;}
.my-loss-wrap {margin-top: 40px;}