@charset "utf-8"; 
@import  "layout.css";
@import  "style.css";
@import  "main.css";

/************************** Width Style **************************/
.w50{width: 50px !important;}
.w100{width: 100%;}
.w120{width: 120px !important;}
.w200{width: 200px !important;}
.w250{width: 250px !important;}
.w300{width: 300px !important;}
.w305{width: 305px;}
.w500{width: 500px;}
.w680{width: 680px;}
.w700{width: 700px;}

/************************** Button Style *************************/
.btn_naver_login {background: url(../images/naver_login_img.jpg);width: 100%;height: 50px;border: none;margin-bottom: 15px;background-size: 300px 50px;} 
.btnArea{position: relative;}
.btnArea div.btn{position: absolute; right: 0px; top: 0px;}
button{display: inline-block;text-align: center;letter-spacing: -1px; outline: none; cursor: pointer;}
button.btnSs{font-size: 13px; padding: 6px 10px 5px; height: 30px;}
button.btnS{font-size: 14px; padding: 7px 12px 9px; height: 36px;}
button.btnM{font-size: 16px; padding: 12px 50px 15px; height: 50px;}
button.btnB{font-size: 16px; padding: 17px 54px 20px; height: 60px;}

button.white{color: #333;background: #fff;	border: 1px solid #c8c8c8;}
button.black{color: #fff;background: #222;border: 1px solid #222;}
button.blue{color: #fff;background: #166ce3;border: 1px solid #166ce3;}
button.deepblue{color: #fff;background: #033f88;border: 1px solid #033f88;}
button.deepblueLine{color: #033f88;background: #fff;border: 1px solid #033f88;}
button.red{color: #fff;background: #ea002c;border: 1px solid #ea002c;}
button.gray{color: #fff;background: #757380;border: 1px solid #757380;}

button.white:hover{background: #f5f5f5;}
button.black:hover{background: #000;}
button.blue:hover{background: #075bd0;}
button.deepblue:hover{background: #052a57;}
button.deepblueLine:hover{background: #f5f5f5; border: 1px solid #052a57;}
button.red:hover{background: #db0029;}
button.gray:hover{background: #075bd0;}

button.w160{width: 160px;}
button.w300{width: 300px;}

input[type="submit"]{display: inline-block;text-align: center;letter-spacing: -1px; outline: none; cursor: pointer;}
input[type="submit"].btnSs{font-size: 13px; padding: 4px 10px 7px; height: 30px;}
input[type="submit"].btnS{font-size: 14px; padding: 7px 12px 9px; height: 36px;}
input[type="submit"].btnM{font-size: 16px; padding: 12px 50px 15px; height: 50px;}
input[type="submit"].btnB{font-size: 16px; padding: 17px 54px 20px; height: 60px;}

input[type="submit"].white{color: #333;background: #fff;	border: 1px solid #c8c8c8;}
input[type="submit"].gray{color: #fff;background: #757380;border: 1px solid #757380;}
input[type="submit"].skygray{color: #fff;background: #9ea4b2;border: 1px solid #9ea4b2;}
input[type="submit"].blue{color: #fff;background: #434159;border: 1px solid #434159;}
input[type="submit"].deepblue{color: #fff;background: #033f88;border: 1px solid #033f88;}
input[type="submit"].red{color: #fff;background: #ea002c;border: 1px solid #ea002c;}
input[type="submit"].black{color: #fff;background: #222;border: 1px solid #222;}

input[type="submit"].white:hover{background: #f5f5f5;}
input[type="submit"].gray:hover{background: #63616e;}
input[type="submit"].blue:hover{background: #2f2d44;}
input[type="submit"].deepblue:hover{background: #052a57;}
input[type="submit"].red:hover{background: #db0029;}
input[type="submit"].black:hover{background: #000;}

input[type="submit"].w140{width: 140px;}
input[type="submit"].w300{width: 300px;}

/************************** Input Style **************************/
.inputStyle01 select{font-size: 13px;padding:6px 5px 5px 5px; margin-top: -1px;} 
.inputStyle01 input[type="text"]{font-size: 13px;padding:7px 0 6px; margin-top: -1px;}

.inputStyle02 select{font-size: 14px;padding:9px 5px 7px 5px;margin-top: -3px;} 
.inputStyle02 input[type="text"]{font-size: 14px;padding:10px 0 8px;margin-top: -3px;}
.inputStyle02 input[type="password"]{font-size: 14px;padding:10px 0 8px;margin-top: -3px;}

.inputStyle03 select{font-size: 16px;padding:14px 5px 13px 5px;padding:15px 5px 13px 5px \0/IE9;margin-top: -3px;} 
.inputStyle03 input[type="text"]{font-size: 16px;padding:15px 0 14px;padding:16px 0 14px \0/IE9;margin-top: -3px;}
.inputStyle03 input[type="password"]{font-size: 16px;padding:15px 0 14px;padding:16px 0 14px \0/IE9;margin-top: -3px;}

/************************** Box Style **************************/
.boxStyle{position: relative;margin: 0 auto;border: 1px solid #c8c8c8;border-top: 2px solid #222;background: #f5f5f5;}
.boxStyle_blue{position: relative; width: 700px; margin: 260px auto 50px; background:#434159;}

/************************** 리스트형 Table Style **************************/
.listTable{position: relative;	width: 100%;border-top: 2px solid #222;border-bottom: 1px solid #c8c8c8;background: #fff;}
.listTable li.list.first{border-top: none;}
.listTable li.list{border-top: 1px solid #c8c8c8;}
.listTable li.list > div{float: left;}

/* 리스트 표현법에 따른 padding값 */
.listTable li div p.text{padding: 27px 0 25px;}
.listTable li div.radio{padding: 23px 0 21px;}
.listTable li div.txtArea{padding: 24px 0 22px;}
.listTable li div.txtArea dl{padding-top: 24px;}
.listTable li div.input {padding: 17px 0 16px;}
.listTable li div.input dl{padding-top: 11px;}

.listTable li div.input.inputStyle01{padding: 20px 0 19px;}
.listTable li div.input.inputStyle02{padding: 19px 0 16px;}

.listTable .tit{width: 20%;font-size: 20px; padding-top: 25px; line-height: 1;}
.listTable .cnt{width: 80%; font-size: 16px;}
.listTable .cnt p.text{font-size: 16px;}
.listTable .cnt dl{vertical-align: middle;}
.listTable .cnt dl.first{padding-top: 0px;}
.listTable .cnt dl:after {content: ""; display: block; clear: both;}
.listTable .cnt dt{float: left;width: 20%;font-size: 13px; color: #666; padding-top: 3px;}
.listTable .cnt dt.label{padding-top: 5px;} /* select, input */
.listTable .cnt dt.label2{padding-top: 2px;} /* 2단계 부가서비스 추가 */
.listTable .cnt dd{float: left;width: 80%;font-size: 16px;}
.listTable .cnt dd span.txtArea{display:inline-block;width: 85%;font-size: 16px;}
.listTable .cnt dd span.num{text-align: right;}
.listTable span.info{display: inline-block;width: 17px;height: 17px;margin-left: 5px;background: url(../images/btn_info.png) no-repeat 0 50%;}
.listTable span.info a{display: inline-block;overflow: hidden;text-indent: -999em;}

/************************** Table Style 01 **************************/
.noLineTable table {border-collapse:collapse; width:100%; background: #fff; }
.noLineTable table th {font-size:16px; font-weight: normal;border-top:2px solid #222; border-bottom:1px solid #c8c8c8; height:66px; line-height:66px; background: url(../images/layout/bar_table.jpg) no-repeat 0 50%;}
.noLineTable table th.first{background-image: none;}
.noLineTable table td{position:relative; text-align:center; font-size:14px; line-height: 1.2; vertical-align: middle; letter-spacing: -0.5px; border-bottom:1px solid #c8c8c8; padding: 27px 5px 26px;color:#666; }
.noLineTable table td.tl{padding-left: 15px;}
.noLineTable table td a {font-size:14px; color:#666; }
.noLineTable table td a:hover,
.noLineTable table td a:focus { color:#000; }

/************************** Table Style 02 **************************/
.lineTable table {border-collapse:collapse; width:100%; background: #fff; position: relative; z-index: 10;}
.lineTable table thead th {font-size:16px;font-weight: normal;border-top:2px solid #222;border-left:1px solid #c8c8c8;border-bottom:1px solid #c8c8c8;height:66px; line-height:66px;vertical-align: middle; background: #f5f5f5;}
.lineTable table tbody th{border-bottom:1px solid #c8c8c8;font-size: 16px; font-weight: normal; vertical-align: middle;}
.lineTable table .first{border-left: none;}
.lineTable table td{position:relative;text-align:center;font-size:16px;border-left:1px solid #c8c8c8;border-bottom:1px solid #c8c8c8; height:30px; line-height: 1.5; padding: 17px 5px 16px; vertical-align: middle; color:#666;}
.lineTable table td a{text-decoration: underline;}
.lineTable table td a:hover{color: #ea002c;}

.lineTable.lineTable_h table{border-top: 2px solid #222;} /* 청구서 가로형 테이블 */
.lineTable.lineTable_h table th.sum,
.lineTable.lineTable_h table td.sum{height: 58px; line-height: 58px;}
.lineTable.lineTable_min table th{font-size: 13px;}
.lineTable.lineTable_min table td{font-size: 12px; height: 20px; line-height: 20px;}
.lineTable.lineTable_min table td.sum{background-color:rgba(201,215,232,0.5); ; height: 40px; line-height: 40px;}

/************************** Paging Style **************************/
.paging {position: relative; width: 100%; text-align:center; }
.paging a {display:inline-block; font-size: 14px; margin:0 2px; width:40px; height: 40px; line-height: 40px; text-align:center; border:1px solid #c8c8c8; color:#666; }
.paging a:hover{border:1px solid #166ce3; background-color:#fff; color:#166ce3; } 
.paging a.active{display:inline-block; margin:0 2px; border:1px solid #166ce3; background-color:#166ce3; color:#fff; }
.paging span{display:inline-block; font-size: 14px; margin:0 2px; padding: 13px 15px 13px 16px; text-align:center; border:1px solid #c8c8c8; color:#666;}
.paging span:hover{border:1px solid #166ce3; background-color:#fff; color:#166ce3;}
.paging span.active{display:inline-block; margin:0 2px; border:1px solid #166ce3; background-color:#166ce3; color:#fff; }

/************************** Tab Style **************************/

/* line style : managed02 /  */
#content .num06 li{width: calc(100% / 6); }

/* line 스타일 */
.tabList_style1 {margin-top: 39px;}
.tabList_style1 ul {overflow: hidden; width: 1100px; margin: 0 auto;}
.tabList_style1 ul li {position: relative; float: left; height: 54px; line-height: 54px;}
.tabList_style1 ul li:before {position: absolute; bottom: 0; width: 100%; height: 2px; background: #c8c8c8; content: ""}
.tabList_style1 ul li a {position: relative;display: block; text-align: center; font-size: 18px; color: #636363; font-weight: 500;}
.tabList_style1 ul li a:before {width: 100%; height: 2px; transform: scale(0,  1); transition: all 0.3s ease; content: ""}
.tabList_style1 ul li a.active, 
.tabList_style1 ul li a:hover {color: #166ce3;}
.tabList_style1 ul li a.active:before, 
.tabList_style1 ul li a:hover:before {position: absolute; left: 0; bottom: 0; background: #166ce3; transform: scale(1,  1);}

/* 부가서비스 > 통합 모니터링 서비스 */
.tabList_style1-1 li{display: inline-block;margin-left: -4px;}
.tabList_style1-1 li a{display: block; width: 120px; height: 50px; line-height: 50px; font-size: 16px; color: #fff; text-align: center; border-bottom: 2px solid #c8c8c8; background: url(../images/addservice/bar_tab.jpg) no-repeat 0 17px;}
.tabList_style1-1 li.first{margin-left: 0px;}
.tabList_style1-1 li.first a{background-image: none;}
.tabList_style1-1 li.active a{color: #fff; border-bottom: 2px solid #166ce3;}

/* bg 스타일 */
.tabList_style2 {text-align: center;}
.tabList_style2 li {display: inline-block; width: 200px; height: 48px; line-height: 48px; margin-left: 8px; border: 1px solid #c8c8c8; border-radius: 25px; background: #fff;}
.tabList_style2 li:first-child {margin-left: 0;}
.tabList_style2 li.active {position: relative; background-color: #222; border: 1px solid #222;}
.tabList_style2 li.active:before {position: absolute; top: 49px; left: 50%; width: 15px; height: 8px; margin-left: -7px; content: ""; background-image: url("../images/icon/active_tab_arrow.png"); }
.tabList_style2 li a {font-size: 18px;color: #666;}
.tabList_style2 li.active a {color: #fff;}

/* 선택배경 box */
.tabList_style3{position: relative; width: 100%;}
.tabList_style3 li{display: inline-block;margin-left: -4px;}
.tabList_style3 li a{position: relative;display: block;width: 100%;height: 58px;line-height: 59px;background: #fff; border: 1px solid #ddd;	color: #666;font-size: 16px;text-align: center;}
.tabList_style3 li.first{margin-left: 0px;}
.tabList_style3 li.active a{z-index: 20; color: #fff; font-family: 'Nanum Barun Gothic Bold';border: 1px solid #166ce3;background: #166ce3;}

/* 마이페이지 - 서비스관리 */
.tabList_style4 li{display: inline-block;border:1px solid #ddd;margin-left: 16.5px;}
.tabList_style4 li.first{margin-left: 0px;}
.tabList_style4 li a{display: block;width: 218px;padding: 20px 20px 6px;}
.tabList_style4 li a span.tit{font-size: 24px;}
.tabList_style4 li a p.num{text-align: right;font-size: 72px;}
.tabList_style4 li a p.num span{font-size: 24px;}
.tabList_style4 li:hover{border:1px solid #c8c8c8; background: #f5f5f5;}
.tabList_style4 li.active{border:1px solid #166ce3;}
.tabList_style4 li.active a{color: #166ce3;}

.tabWrap{position: relative;width: 100%;}


.aside-quick-bnr .aside-exit {
    position: absolute;
    top: -38px;
    right: 0;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
}

.aside-quick-bnr a.aside-today-exit {
    width: 140px;
    height: 40px;
    color: #aaa;
    text-align: right;
    cursor: pointer;
}