* {font-family: 'nanumsquare'; font-weight: 600; word-break: keep-all;}
body {color: #333; background-color: #f9f9f9;}
button {font-family: inherit;}
img {width: 100%; display: block;}

/* 공통 css */

.con-pd {padding: 22px 20px; background-color: #fff; border-radius: 15px;}
.con-head {display: flex; align-items: center; justify-content: space-between;}
.con-head .info {background: url(../img/info.png) no-repeat center/cover; width: 17px; height: 17px;}
.pop { padding: 5px; border: 1px solid #ddd; border-radius: 5px;}
.pop span {background: url(../img/popup.png) no-repeat center/cover; width: 12px; height: 12px; display: block;}
.graph {width: 100%; }
section h1 {font-size: 28px; font-weight: 900; color: #111; text-align: center; margin-bottom: 15px;}

textarea {border: 1px solid #ddd; height: 120px; border-radius: 10px; resize: none; width: 100%; padding: 12px; outline: none; margin-bottom: 2px;}
textarea::placeholder {color: #d1d1d1; font-weight: 400; color: #777;}

.de-chk {display: flex; align-items: center; gap: 30px;}
.de-chk label span {background: url(../img/chk.png) no-repeat center/cover; width: 18px; height: 18px; display: inline-block;}
.de-chk input:checked + label span {background: url(../img/chked.png) no-repeat center/cover; width: 18px; height: 18px; display: inline-block;}
.de-chk input:checked + label p {color: #00a9ff;}

.flex {display: flex; align-items: center;}
.center {margin: 0 auto;}

input[type="text"] {border: 1px solid #ddd; border-radius: 5px; padding: 10px 12px; height: 45px; width: 320px; outline: #00a9ff;}
input[type="password"] {border: 1px solid #ddd; border-radius: 5px; padding: 10px 12px; height: 45px; width: 320px; font-weight: 400;  outline: #00a9ff;}
input[type="text"]::placeholder {font-weight: 400;}
input[type="search"]::placeholder {font-weight: 400;}
input[type="date"] {font-weight: 400;}
/* input[type="password"] {font-weight: 400;} */

.multi-sel {padding: 12px; background-color: #fff; border-radius: 6px; border: 1px solid #ddd; width: 300px; position: relative; cursor: pointer;}
.multi-sel .multi-txt { display: flex; align-items: center; justify-content: space-between;}
.multi-sel .multi-txt > em {background: url(../img/angle.png) no-repeat; display: block; width: 8px; height: 8px;}
.multi-sel span {font-size: 14px; color: #222; font-weight: 800;}
.multi-sel .multi-option {position: absolute; width: 100%; padding: 10px; border-radius: 6px; background: #fff; left: 0; top: calc(100% + 10px); box-shadow: 0 2px 10px rgba(169, 169, 169, .3); display: none; z-index: 10;}
.multi-sel .multi-option > div {background-color: #f3f3f3; border-radius: 5px; padding: 7px; display: flex; align-items: center; gap: 3px; margin-bottom: 10px;}
.multi-sel .multi-option > div input::placeholder {font-weight: 400; color: #b9b9b9;}
.multi-sel .multi-option ul {display: flex; flex-direction: column; gap: 5px; max-height: 130px; overflow-y: auto;}
.multi-sel .multi-option ul em {background: url(../img/chk2.png) no-repeat center/cover; width: 15px; height: 15px; display: block;}
.multi-sel .multi-option ul em.on {background: url(../img/chked2.png) no-repeat center/cover; width: 15px; height: 15px; display: block;}
.multi-sel .multi-option ul li {display: flex; align-items: center; gap: 6px; cursor: pointer;}

input::-ms-clear,
input::-ms-reveal{
	display:none;width:0;height:0;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration{
	display:none;
}


/* 버튼 css */

.de-btn {background-color: #00a9ff; color: #fff; font-weight: 700; padding: 13px 12px; border-radius: 6px; width: 85px; font-size: 15px;}
.btn2 {width: 100px; padding: 12px 0; font-size: 14px; font-weight: 600; color: #777; background-color: #efefef; border-radius: 50px;}
.default {width: 100px; padding: 12px 0; font-size: 14px; font-weight: 600; color: #fff; background-color: #00a9ff; border-radius: 50px;}
.line {width: 100px; padding: 12px 0; font-size: 14px; font-weight: 600; color: #00a9ff;  border-radius: 50px; border: 1px solid #00a9ff;}


/* ======== 메인 ======== */

.cdn-inner {display: flex; flex-direction: column; gap: 20px;}
.wrap {padding: 96px 40px 20px 305px;}
.con-header {display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px;}
.con-header .search-box {display: flex; gap: 10px;}
select {padding: 12px; border-radius: 6px; border: 1px solid #ddd; width: 122px; color: #222; background: url(../img/angle.png) no-repeat #fff; background-position: 92% 50%; background-size: 8px; font-size: 14px;}

.info-box {border-radius: 5px; background: #ebebeb; padding: 10px 20px; display: flex; gap: 7px;}
.menu03-02 .info-box {width: 740px;}
.info-box span {background: url(../img/notice.png) no-repeat center/cover; width: 17px; height: 17px; display: block;}
.info-box p {font-size: 13px; font-weight: 700; width: calc(100% - 24px);}
.info-box p em { font-weight: 700;}
.info-box p b {color: #FF3636; font-weight: 700;}


.price-info {display: flex; gap: 30px;}
.price-wrap {display: flex; flex-direction: column; gap: 20px; width: 33%;}
.price-wrap .price-con {width: 100%;}
.con-head h2 {font-size: 16px; font-weight: 600; color: #777;}
.con-head h2 em {font-weight: 600; color: #777;}
.price-con {display: flex; flex-direction: column; gap: 35px;}
.price-con .price {display: flex; flex-direction: column; align-items: flex-end;}
.price-con .price p {font-size: 32px; font-weight: 900;}
.price-con .price span {color: #777; font-weight: 500; display: block; margin-bottom: 7px;}
.price-con .price > div {display: flex;  align-items: flex-end; justify-content: flex-end; gap: 5px;}

.current {width: 67%; display: flex; flex-direction: column; gap: 20px;}
.con-head p {font-size: 18px; font-weight: 900;}
.cur-con {display: flex; flex-direction: column; gap: 15px;}
.cur-con table tr {display: grid; grid-template-columns: 40% 20% 20% 20%;}
.cur-con table thead {background-color: #E3F6FF;}
.cur-con table tr th {text-align: center; font-size: 13px; color: #111; font-weight: 800;padding: 12px 0; align-content: center;}
.cur-con table tr td {text-align: center; padding: 10px 0; border-bottom: 1px solid #eee; font-size: 15px; font-weight: 600;}

.pro-wrap {display: flex; align-items: center; gap: 20px;}
.pro-price {width: 75%;}
.pro-price table tr {display: grid; grid-template-columns: 50% 50%;}
.pro-graph {width: 25%;}

.graph-wrap {display: flex; gap: 30px;}
.graph-wrap > div {width: 50%;}

/* .last-m {display: none;} */
/* .this-m {display: none;} */
.price-con {position: relative;}
.price-con .price > span {margin-bottom: -5px; color: #FF4545; font-weight: 600; display: flex; align-items: center; gap: 2px;}
.price-con .price > span em {margin-left: 3px;}
.price-con .price > span.down i {transform: rotate(180deg);}
.price-con .price > span.down {color: #0061FF;}

.detail-box {display: flex; align-items: center; justify-content: space-between; cursor: pointer;}
.detail-box h3 {font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 5px;}
.detail-box h3 em {display: inline-block; width: 25px;}


/* ======== 상세 이용 내역 ======== */


.detail-wrap {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px;}
.detail-wrap .total {width: 515px;}
.detail-wrap .total h2 {font-weight: 800; color: #111; margin-bottom: 15px; font-size: 17px;}
.detail-wrap .total ul {display: flex; flex-direction: column; gap: 6px;}
.detail-wrap .total ul li {display: flex; align-items: center; justify-content: space-between;}
.detail-wrap .total ul li span {color: #585858;}
.detail-wrap .total ul li p {font-weight: 600; color: #111; font-size: 19px;}
.detail-wrap .total ul li p b {font-weight: 600; color: #111;}
.detail-wrap .total ul li.last {padding-top: 15px; border-top: 1px solid #eee; margin-top: 8px;}
.detail-wrap .total ul li.last p {font-size: 24px; font-weight: 800;}
.detail-wrap .total ul li.last p b {font-weight: 800;}
.download ul {display: flex; flex-direction: column; gap: 10px;}
.download ul li {padding: 13px 20px; border: 1px solid #ddd; background-color: #fff; border-radius: 50px; display: flex; align-items: center; justify-content: space-between; gap: 25px; cursor: pointer; transition: all 0.2s;}
.download ul li:hover {border-color: #00a9ff;}
.download ul li p {font-weight: 600;}
.download ul li em {background: url(../img/down.png) no-repeat center/cover; width: 12px; height: 12px; display: block;}

.sec-none {padding: 60px 0; text-align: center; font-size: 18px; color: #FF3636;}


/* ======== 청구 내역서 ======== */
.statement-con {width: 1024px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; align-items: flex-end;}
.statement-con .statement-down {border-radius: 50px; background-color: #424242; padding: 13px 20px; display: flex; align-items: center; gap: 6px;}
.statement-con .statement-down p {color: #fff;}
.statement-con .statement-down em {background: url(../img/down2.png) no-repeat center/cover; width: 12px; height: 12px; display: inline-block;}

.statement-inner {width: 100%; background-color: #fff; padding: 50px;}
.statement-inner .company {display: flex; align-items: flex-start; justify-content: space-between;}
.statement-inner .company .logo {width: 226px;}
.statement-inner .company .com-info {display: flex; flex-direction: column; gap: 25px;}
.statement-inner .company .com-info .date {border-top: 1px solid #5f5f5f; border-bottom: 1px solid #5f5f5f;}
.statement-inner .company .com-info .date dl {display: flex; align-items: center; border-bottom: 1px solid #eee;}
.statement-inner .company .com-info .date dl:last-child {border: none;}
.statement-inner .company .com-info .date dt {padding: 7px 12px; background-color: #f5f5f5; color: #666; font-weight: 600;}
.statement-inner .company .com-info .date dd {display: flex; align-items: center; gap: 5px; padding: 0 15px;}
.statement-inner .company .com-info .date dd p {font-weight: 600;}
.com-name h2 {font-size: 36px; font-weight: 900; text-align: right;}
.com-name p {font-size: 14px; color: #555; margin-top: 5px; text-align: right; font-weight: 600;}

.state-price {padding: 25px 0; border-top: 2px solid #d9d9d9; border-bottom: 2px solid #d9d9d9; margin-top: 35px; height: 700px; position: relative;}
.state-price h2 {font-size: 30px; font-weight: 900; text-align: center; margin-bottom: 12px;}
.state-price .price {display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-bottom: 55px;}
.state-price .price p {font-size: 30px; font-weight: 900;}
.state-price .price span {font-size: 20px;}

.state-price .de-price {position: relative;}
.state-price .de-price span.sub-txt {position: absolute; font-size: 14px; color: #777; right: 0; top: -25px;}
.state-price .de-price table {width: 100%; border-top: 1px solid #555;}

.state-price .de-price table tr {display: grid; grid-template-columns: 22% 13% 13% 13% 13% 13% 13%;}
.state-price .de-price table thead {background: #f5f5f5;}
.state-price .de-price table tr th {text-align: center; padding: 14px 0; font-size: 14px; font-weight: 600;}
.state-price .de-price table tr td {padding: 14px 10px; text-align: center; border-bottom: 1px solid #eee; font-size: 14px; font-weight: 600;}
.state-price .de-price table tr td:first-child {text-align: left;}
.state-price .de-price table tr td:last-child {text-align: right;}
.state-price .total-price {position: absolute; padding: 15px; background: #f5f5f5; top: 100%; right: 0; display: flex; align-items: center; gap: 70px;}
.state-price .total-price span {font-size: 14px; font-weight: 600;}
.state-price .total-price p {font-size: 22px; font-weight: 600;}
.state-price .total-price p em {font-weight: 600;}
.state-price > p {font-size: 22px; text-align: center; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 100%;}
.footer-info {display: flex; flex-direction: column; gap: 30px; padding-top: 25px;}
.footer-info div h3 {font-size: 16px; font-weight: 800; color: #111; margin-bottom: 12px;}
.footer-info div > p {margin-top: -12px; margin-bottom: 12px;}
.footer-info div ul {width: fit-content; display: flex; flex-direction: column; gap: 5px;}
.footer-info div ul li {display: flex; align-items: center;}
.footer-info div ul li span {display: block; color: #777; font-weight: 600; width: 90px;}
.footer-info > div:nth-child(2) {display: flex; gap: 60px;}
.info-txt p {margin: 0; font-size: 14px; color: #9d9d9d;}


/* ======== 통계 - 필터 ======== */

input[type="checkbox"] {display: none;}
input[type="radio"] {display: none;}
label {display: flex; align-items: center; gap: 6px !important; cursor: pointer;}
input[type="date"] {border: 1px solid #ddd; padding: 10px 15px; background-color: #fff; font-size: 14px; color: #777; border-radius: 5px; position: relative; cursor: pointer; background: url(../img/cal.png) no-repeat; background-position: 93% 50%; background-size: 13px; width: 150px;}
input[type="date"]::-webkit-clear-button,
input[type="date"]::-webkit-inner-spin-button {display: none;}
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent; color: transparent;  cursor: pointer;}
.date-select {display: flex; align-items: center; gap: 5px;}

.search-box2 {display: flex; align-items: center; gap: 20px !important;}
.search-box2 select {width: 215px;}
.search-box2 p {font-size: 14px; font-weight: 600; margin-right: -5px;}

.cash-tab {margin-bottom: 13px; overflow-x: auto;}
.cash-tab ul {display: flex; align-items: center; border-radius: 50px; background-color: #f1f1f1; width: fit-content;}
.cash-tab ul li {padding: 11px 35px; border-radius: 80px; text-wrap: nowrap; cursor: pointer; font-size: 14px;}
.cash-tab ul li.on {background-color: #00a9ff; color: #fff; font-weight: 600;}

.cash-tab::-webkit-scrollbar{
    display: none;
    }

.filter-wrap .filter-con {display: flex; flex-direction: column; gap: 25px; padding-bottom: 25px;  border-bottom: 1px dashed #eee; }
.filter-wrap .filter-con > div {display: flex; align-items: center; gap: 20px;}
.filter-wrap .filter-con > div > p {font-weight: 600; width: 70px;}

.code {align-items: flex-start !important;}
.code > p {padding-top: 5px;}
.code-wrap {display: flex; flex-direction: column; gap: 7px;}
.code-wrap > div {display: flex; align-items: center; gap: 15px;}
.code-wrap > div > label p {font-size: 13px;}
.code-wrap .code-main > label span {background: url(../img/chk.png) no-repeat center/cover; width: 16px; height: 16px; display: inline-block;}
.code-wrap .code-main > input:checked + label span {background: url(../img/chked.png) no-repeat center/cover; width: 16px; height: 16px; display: inline-block;}
.code-wrap .code-main > div {display: flex; align-items: center; gap: 20px;}
.code-wrap .code-main > div .sub-chk span {background: url(../img/chk2.png) no-repeat center/cover; width: 15px; height: 15px; display: block; margin-right: -2px;}
.sub-chk p {font-size: 13px;}
.code-wrap .code-main > div input:checked + label span {background: url(../img/chked2.png) no-repeat center/cover; width: 15px; height: 15px; display: block;}
.code-wrap .code-main > div > div {display: flex; align-items: center; gap: 10px;}
.code-wrap .code-main > div > div label {font-size: 11px; padding: 3px 7px; border-radius: 5px; background-color: #f7f7f7; color: #888;}
.code-wrap .code-main > div > div input:checked + label {background-color: #00a9ff; color: #fff; font-weight: 600;}

.btn-wrap {display: flex; align-items: center; gap: 10px;}
.btn-wrap label {font-size: 14px; color: #777; font-weight: 600; border: 1px solid #ddd; border-radius: 5px; padding: 10px 18px; text-align: center; width: fit-content; transition: all 0.2s;}
.btn-wrap label:hover {border-color: #00a9ff; color: #00a9ff;}
.btn-wrap input:checked + label {border-color: #00a9ff; color: #00a9ff; font-weight: 900; background-color: #E6F7FF;}
.filter-search {display: flex; align-items: center; gap: 10px;}
.filter-btn .btn2 {display: flex; align-items: center; gap: 7px; justify-content: center;}
.filter-btn .btn2 span {background: url(../img/reset.png) no-repeat center/cover; width: 11px; height: 12px;}

.filter-btn {padding-top: 20px; position: relative; display: flex; align-items: center; justify-content: center;}
.filter-btn.active {padding-top: 0;}
.filter-btn .filter-icon span {background: url(../img/filter.png) no-repeat center/cover; width: 15px; height: 14px; display: block;}
.filter-btn .filter-icon {display: flex; align-items: center; gap: 7px; position: absolute; left: 0; cursor: pointer;}
.filter-btn .filter-icon p {font-size: 15px; font-weight: 600; margin-right: 3px;}
.filter-btn .filter-icon i {transform: rotate(0deg); transition: all 0.2s;}
.filter-btn .filter-icon i.on {transform: rotate(180deg);}

.srats-graph {margin-top: 50px; position: relative;}
.srats-graph .pop {position: absolute; bottom: calc(100% + 10px); right: 10px;}

.tool-box {display: flex; align-items: center; gap: 3px;}
.tool-box i {display: block; font-size: 18px; color: #555;}

/* ======== 퍼지 - 실행 ======== */

.info-box-wrap {display: flex; flex-direction: column; gap: 10px; width: fit-content;}
/* .purge .info-box {width: fit-content;} */
.info-icon {align-items: center; gap: 10px;}
.info-icon span {background: url(../img/info-red.png) no-repeat center/cover; width: 13px; height: 13px;}

.purge-con {margin-top: 20px; display: flex; flex-direction: column; gap: 30px; padding: 35px 30px;}
.purge-con > div {display: flex;}
.purge-con > div > p {font-size: 14px; font-weight: 600; width: 110px;}

.menu03-02 .purge-con > div > div {width: 70%;}
.menu03-02 .purge-con > div > div input[type="text"] {width: 100%;}

.txt-wrap {width: 70%; }
.txt-wrap .sub-info {display: flex; justify-content: space-between;}
.txt-wrap .sub-info .byte {font-size: 12px; color: #555; font-weight: 600;}
.txt-wrap .sub-info .byte em {font-weight: 600;}
.txt-wrap button {margin-top: 10px;}

.statement-con .flex {gap: 10px;}

/* ======== 클라우드 - 청구내역서 ======== */

.cloud-state {border-top: 1px solid #555;}
.cloud-state li {display: flex; align-items: center; justify-content: space-between;  border-bottom: 1px solid #eee;}
.cloud-state li p {font-weight: 600;}
.cloud-state li p em {font-weight: 600;}
.cloud-state li span {font-weight: 600; padding: 12px 20px; width: 200px; background-color: #f7f7f7;}


/* ======== 설정 - 계정 ======== */

input[type="search"] {border: none; outline: none; width: 88%;}

.setting .search-box {padding: 11px 10px; border: 1px solid #ddd; background-color: #f8f8f8; border-radius: 50px; width: 425px; position: relative; margin-bottom: 15px;}
.setting .search-box span {background: url(../img/search.png) no-repeat center/cover; width: 18px; height: 18px; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); cursor: pointer;}
.setting {display: flex; flex-direction: column; align-items: flex-end;}
.setting .con-pd {width: 100%;}

.account-head {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 10px;}
.account-head p {font-weight: 600; font-size: 14px;}
.account-head p em {font-weight: 800;}

.account-wrap {min-height: 350px;}
.account-wrap table {width: 100%;}
.account-wrap table tr {display: grid; grid-template-columns: 20% 10% 7% 7% 7% 7% 7% 7% 7% 7% 10% 4%;}
.account-wrap table thead {background-color: #f7f7f7; border-radius: 5px;}
.account-wrap table tr th {font-size: 14px; color: #686868; text-align: center; padding: 10px 0; font-weight: 600;}
.account-wrap table tr td {font-size: 14px; font-weight: 600; text-align: center; padding: 10px 0; display: flex; align-items: center;justify-content: center;}
.account-wrap table tr td:first-child {justify-content: flex-start; display: flex; align-items: center;}
.account-wrap table tr td:first-child p { font-weight: 600;}
.account-wrap table tr td:first-child span {font-size: 12px; font-weight: 600; padding: 5px 7px; border-radius: 5px; margin-left: 5px;}
.account-wrap table tr td:first-child span.active {background-color: #E0F4FF; color: #00a9ff;}
.account-wrap table tr td:first-child span.disable {background-color: #EDEDED; color: #808080;}
.account-wrap table tr td.client {font-weight: 900;}
.account-wrap table tr td.read {color: #FFA800;}
.account-wrap table tr td.write {color: #2B872B;}

.account-wrap table tr td.edit em {background: url(../img/edit.png) no-repeat center/cover; width: 20px; height: 20px; display: block; cursor: pointer;}


/* ======== 설정 - 계정 추가 ======== */

.account-con {display: flex; flex-direction: column; gap: 25px; padding: 35px 30px;}
.account-con .input-wrap {display: flex; flex-direction: column; gap: 18px;}
.account-con .input-wrap dl {display: flex; align-items: center;}
.account-con .input-wrap dl dt {width: 145px; position: relative; display: flex; align-items: center; gap: 5px;}
.account-con .input-wrap dl dt p {font-size: 14px; font-weight: 800; position: relative; width: fit-content; display: flex; align-items: center; gap: 3px;}
.account-con .input-wrap dl dt p i {cursor: pointer; }
.account-con .input-wrap dl dt p.ess::after {content: "*"; display: block; position: absolute; color: #00a9ff; top: -2px; right: -10px; font-weight: 900;}
.sub-chk-wrap {display: flex; flex-direction: column; gap: 4px;}
.sub-chk-wrap > div {display: flex; align-items: center;}
.sub-chk-wrap > div > p {width: 115px; font-size: 14px; font-weight: 600;}

.sub-chk {display: flex; align-items: center; gap: 20px;}
.sub-chk label span {background: url(../img/chk2.png) no-repeat center/cover; width: 15px; height: 15px; display: block;}
.sub-chk input:checked + label span {background: url(../img/chked2.png) no-repeat center/cover; width: 15px; height: 15px; display: block;}

.large-con {align-items: flex-start !important;}
.de-chk select {padding: 10px !important; font-size: 14px; width: 150px;}
.large-con dd {width: 40%;}
.large-con textarea {width: 100%;}

.submit-btn {display: flex; align-items: center; justify-content: center; gap: 10px;}

.tooltip {position: absolute; padding: 20px; border: 1px solid #eee; background-color: #f8f8f8; box-shadow: 0 2px 10px rgba(207, 207, 207, .5); border-radius: 10px; width: max-content; display: none;}
.tooltip p {font-size: 13px; font-weight: 600;}
.account-con .input-wrap dl dt.custom p.ess::after {right: -30px;}
.tool i {cursor: pointer;}
.password {display: flex; flex-direction: column; align-items: flex-start; gap: 10px; display: none;}
.pass-info {font-size: 12px; color: #777; margin-top: -3px;}
/* .password input:first-child {margin-right: 10px;} */
.pw-info {display: flex; flex-direction: column; gap: 5px;}
.pw-info span {font-size: 12px; color: #777;}

/* ======== cdn - 상세이용내역 ======== */

.history-wrap {background-color: #fff; padding-bottom: 15px;}
.main-tit {display: flex; flex-direction: column; align-items: flex-end;}
.main-tit > p {background-color: #E3F6FF; padding: 12px 20px; border-top: 2px solid #00a9ff; width: 100%; cursor: pointer; font-weight: 800;}
/* .main-tit > p i {margin-right: 3px; transform: rotate(90deg);} */
.main-tit p em {background: url(../img/angle2.png) no-repeat center/contain; width: 8px; height: 8px; display: inline-block; margin-right: 6px; transform: rotate(-90deg); transition: all 0.2s;}
.main-tit p em.on {transform: rotate(0deg);}
.sub-tit {width: 96%; display: none;}
.sub-tit > table {width: 100%; margin-top: 5px;}
.sub-tit > table tr {background-color: #FFF4E3; display: grid; grid-template-columns: 8% 80% 6% 6%; padding: 12px 10px; cursor: pointer; border-radius: 3px;}
.sub-tit > table tr td { font-weight: 600;}
.sub-tit > table tr td:nth-child(3),
.sub-tit > table tr td:last-child {text-align: center; font-weight: 900;}
.sub-tit > table tr td p {font-weight: 800;}
.sub-detail {display: none;}
.sub-detail table {width: 60%; margin-left: 10px; margin-top: 5px;}
.sub-detail table tr {display: grid; grid-template-columns: 33.3% 33.3% 33.3%;}
.sub-detail table tr th {text-align: center; background-color: #f7f7f7; padding: 12px 0; font-weight: 600;}
.sub-detail table tbody tr {border-bottom: 1px solid #eee;}
.sub-detail table tr td {text-align: center; padding: 12px 0; color: #444; font-weight: 600;}
.sub-detail table tr.sum td {font-weight: 900;}
.extra {width: 99%; margin-top: 5px;}
.extra table {width: 100%;}
.extra table tr {background-color: #DBECDB; display: grid; grid-template-columns: 8% 72% 10% 10%; border-radius: 3px;}
.extra table tr td {padding: 12px 10px; font-weight: 600;}
.extra > table tr td:nth-child(3),
.extra > table tr td:last-child {text-align: center; font-weight: 900;}


/* ======== cloud - 상세이용내역 ======== */

.tx-right {text-align: right !important;}
.download ul li.graph-icon {gap: 6px;}
.download ul li.graph-icon em {background: url(../img/graph.png) no-repeat center/contain; width: 20px; height: 20px; display: inline-block;}
.cloud .history-wrap .sub-tit {display: block; width: 97%;}
.cloud  .main-tit > p {cursor: default;}
.cloud p > span {font-size: 12px; font-weight: 600; margin-right: 5px; color: #555;}
.cloud .history-wrap .usage {width: 99%;}
.cloud .history-wrap dl {width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 10px; border-bottom: 1px solid #eee;}
.cloud .history-wrap dl:last-child {border-bottom: none;}
.cloud .history-wrap dl dd {font-weight: 900;}
.cloud .history-wrap dl dd em {font-weight: 900;}
.cl-sub-tit table {width: 100%;}
.cl-sub-tit table tr {display: grid; grid-template-columns: 85% 6% 9%;}
.cl-sub-tit table tr td:nth-child(3),
.bold {font-weight: 800 !important;}
.cloud .history-wrap .sub-tit .usage {width: 100%;}
.sub-con {display: none; flex-direction: column; align-items: flex-end;}
.pro-tit > table tr {background-color: #E4E3FF;}
.pro-tit {width: 98% !important; display: flex !important; flex-direction: column; align-items: flex-end;}
.pro-con > table tr td p i {display: inline-block; margin-right: 5px; transform: rotate(0deg); transition: all 0.2s;}
.pro-con > table tr td p i.on {transform: rotate(90deg);}
.pro-con > table tr {background-color: #EAEAEA;}

.pro-detail {margin-top: 5px; display: none; overflow-x: auto; width: 100%;}
.pro-detail table {width: 1432px;}
.pro-detail table tr {display: grid !important; grid-template-columns: 8% 9% 20% 19% 6% 6% 10% 6% 5% 5% 6% !important;}
.pro-detail table tr th:last-child {border-right: none;}
.pro-detail table tr th {font-size: 12px; font-weight: 600; color: #555; background-color: #F7F7F7; padding: 13px 0; text-align: center; border-right: 1px solid #e3e3e3;}
.pro-detail table tr td {padding: 13px 8px 13px 5px; font-size: 12px; font-weight: 600; color: #666; text-align: right; border-right: 1px solid #e3e3e3;}
.pro-detail table tr td:last-child {border-right: none;}
.pro-detail table tbody tr {border-bottom: 1px solid #e3e3e3;}
.pro-detail table tbody tr td {color: #444;}
.pro-detail table tr td:nth-child(3) {font-weight: 600 !important;}
.pro-con-wrap {width: 100%; display: flex; flex-direction: column; align-items: flex-end; display: none;}

/* .code {display: none !important;} */

.con-header .search-box2 > div {display: flex; align-items: center; gap: 14px;}

.menu004 .project {width: 100%;}
.menu004 .price-con {gap: 18px;}