@charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Roboto&display=swap'); /* UI - Setup ------------------------------------------------*/ html, body {line-height:20px; color:#383838; height:100%; font-size:13px; font-family: 'Noto Sans KR', sans-serif; -webkit-text-size-adjust:none; background: url(../img/icon/bg_gradient.png) no-repeat; background-size: cover;} a {color:#383838; text-decoration:none; font-size:13px;} a:hover {text-decoration:underline;} a:focus, input:focus, button:focus {} h1, h2, h3, h4, h5 {margin:0; font-weight:normal; word-break: break-word;} hr {margin:0px; border:0px;} /* UI - accessibility ------------------------------------------------*/ #skipToContent {position:relative; z-index:1000; width:100%; overflow:hidden;} #skipToContent a {display:block; width:1px; height:1px; margin:0 -1px -1px 0; overflow:hidden; font-size:0; line-height:0; text-align:center; position:fixed; top:0; left:0; background:#b30044; color:#fff;} #skipToContent a:focus {width:100%; height:auto; margin:0; padding:8px 0; font-size:12px; line-height:1;} /* UI - COMMON ------------------------------------------------*/ /* pagingWrap */ .pagingWrap {} .pagingWrap .tools {} .pagingWrap .tools dl {} .pagingWrap .tools dl dt {font-size:14px; color:#333; display:inline-block; vertical-align:middle; margin-right:10px;} .pagingWrap .tools dl dd {display:inline-block; vertical-align:middle; width:80px;} .pagingWrap .tools dl dd input {text-align:center;} /* UI - SIGN IN ------------------------------------------------*/ /* noticeLayer */ .noticeLayer {position:fixed; z-index:999; top:58px; right:40px; display:none;} .noticeLayer.active {display:block;} .noticeLayer .modalBox .mbBody {padding:0;} .noticeLayer .modalBox .mbBody .mbBodyContents .notiList {height:300px; overflow:auto;} .noticeLayer .modalBox .mbBody .mbBodyContents .notiList ul {} .noticeLayer .modalBox .mbBody .mbBodyContents .notiList ul li {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:flex-start;align-items:center; -webkit-justify-content:flex-start; -webkit-align-items:center; -ms-flex-pack:start; -ms-flex-align:center; border-bottom:1px solid #e5e5e5; padding:14px 20px;} .noticeLayer .modalBox .mbBody .mbBodyContents .notiList ul li .title {width:calc(100% - 100px);} .noticeLayer .modalBox .mbBody .mbBodyContents .notiList ul li .title strong {font-size:14px;} .noticeLayer .modalBox .mbBody .mbBodyContents .notiList ul li .title p {font-size:14px;} .noticeLayer .modalBox .mbBody .mbBodyContents .notiList ul li .date {width:100px; text-align:right;} .noticeLayer .modalBox .mbBody .mbBodyContents .notiList ul li .date em {display:block; font-size:14px; font-style:normal; margin-top:20px;} /* helpLayer */ .helpLayer {position:fixed; z-index:999; display:none;} .helpLayer.active {display:block;} .helpLayer .modalBox .mbBody .helpBox {margin:0 60px 20px;} .helpLayer .modalBox .mbBody .helpBox button {margin-bottom:10px; font-size:18px; padding:0 20px;} .helpLayer .modalBox .mbBody .helpBox p {font-size:14px;} /* accountLayer */ .accountLayer {position:fixed; z-index:999; top:58px; right:10px; display:none; border-radius:16px; outline-offset: 1px;} .accountLayer::after {content:'';position:fixed;z-index:1;top:0;left:0;right:0;bottom:0;} .accountLayer.active {display:block;} .accountLayer .modalBox .mbBody .mbBodyContents {margin:10px 0 10px 0; white-space:normal; word-break: break-all;} .accountLayer .modalBox .mbBody .accountBox {margin:20px 20px 10px 20px; white-space:normal; word-break: break-all;} .accountLayer .modalBox .mbBody .accountBox .userMail {font-size:16px; margin-bottom:20px;} .accountLayer .modalBox .mbBody .accountBox button {margin-bottom:10px; font-size:18px; padding:0 20px;} .accountLayer .modalBox .mbBody .accountBox p {font-size:14px; text-align:center;} .accountLayer .modalBox .mbBody .accountBox .privacyPolicy {display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:bold; border-top:1px solid #e5e5e5; padding-top:20px; padding-bottom:20px; margin-top:10px;} .accountLayer .modalBox .mbBody .accountBox .privacyPolicy:hover {text-decoration: underline;} .accountLayer .modalBox .mbBody .accountBox .privacyPolicy::after {content:''; font-size:0; display:block; margin:0 -6px 0 6px; width:18px; height:18px; background:url(../img/icon/icon_popup.svg)no-repeat; background-size:cover; filter:brightness(0); opacity:0.5;} /* dlBox */ .modalBox .mbBody .mbBodyContents .article .dlBox {word-break: break-all;} .modalBox .mbBody .mbBodyContents .article .dlBox dl {font-size:0; margin:20px 0 0; display:flex; align-items: flex-start; word-break: break-all;} .modalBox .mbBody .mbBodyContents .article .dlBox dl dt {display:block; line-height:23px; min-height:30px; font-size:16px; color:#555; width:186px; text-align:right; padding-right:22px; box-sizing:border-box; word-break: break-word;} .modalBox .mbBody .mbBodyContents .article .dlBox dl dt .required {font-size:20px;} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd {display:block; width:calc(100% - 190px);} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd .txt {font-size:13px; line-height:30px; margin:0 10px;} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd .inputBox {position:relative; width: 100%;} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd .inputBox .textRemove {position:absolute; bottom:10px; right:10px;} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd .inputBox input[type=text], .modalBox .mbBody .mbBodyContents .article .dlBox dl dd .inputBox input[type=password] {padding:0 40px 0 10px;} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd .inputBox input:valid ~ .textRemove {display:block;} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd .addBox {margin-bottom:10px; position:relative;} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd .addBox input {width:calc(100% - 100px);} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd .addBox .textRemove {position:absolute; bottom:10px; right:100px;} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd .addBox input:valid ~ .textRemove {display:block;} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd .addBox button {margin:0 4px;} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd .dubleAddBox {margin-bottom:10px;} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd .dubleAddBox .inputBox {width:calc(40% - 10px); position:relative;} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd .dubleAddBox .inputBox label {font-size:12px; visibility:visible;} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd .dubleAddBox .tools {min-width:96px; text-align:right;} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd .dubleAddBox button {margin:0 4px;} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd .selectSwitch {} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd .selectSwitch .selectWrap {width:calc(100% - 70px);} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd.subItem {} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd.subItem ul {} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd.subItem ul li {margin-bottom:10px;} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd.subItem ul li strong {display:block; font-size:14px; font-weight:500; width:160px;} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd.subItem ul li .inputBox {width:calc(100% - 160px);} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd.subItem ul li .minBox {width:calc(30% - 0px);} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd.subItem ul li .minBox em {font-size:14px; font-style:normal;} .modalBox .mbBody .mbBodyContents .article .dlBox dl dd .assignableDevices {font-size:12px;} .modalBox .mbBody .mbBodyContents .article .dlBox dl.vertical {flex-direction:column; align-items:flex-start; width:100%;} .modalBox .mbBody .mbBodyContents .article .dlBox dl.vertical dt {width:100%; padding:0; text-align:left;} .modalBox .mbBody .mbBodyContents .article .dlBox dl.vertical dd {width:100%;} /* article > tabs */ .modalBox .mbBody .mbBodyContents .article .tabs {} .modalBox .mbBody .mbBodyContents .article .tabs ul {} .modalBox .mbBody .mbBodyContents .article .tabs ul li {width:50%;} .modalBox .mbBody .mbBodyContents .article .tabs ul li a {display:block; font-size:18px; padding:14px 0; color:#333; text-align:center; border-bottom:2px solid #d8d8d9;} .modalBox .mbBody .mbBodyContents .article .tabs ul li a.active {border-bottom:2px solid #a50034;} /* tabContents */ .modalBox .mbBody .mbBodyContents .article .dlBox.tabContents {display:none;} /* map */ .modalBox .mbBody .mbBodyContents .article .map {height:260px; background:#ddd; border:1px solid #e6e6e6; box-sizing:border-box;} /* dlBoxGroup */ .modalBox .mbBody .mbBodyContents .article .dlBoxGroup {margin-bottom:40px;} .modalBox .mbBody .mbBodyContents .article .dlBoxGroup:last-child {margin-bottom:0;} .modalBox .mbBody .mbBodyContents .article .dlBoxGroup h3 {font-size:16px; line-height:18px; color:#555; font-weight:600; margin-left:20px;} /* status */ .modalBox .mbBody .mbBodyContents .article .status {margin-left:20px; line-height:30px;} .modalBox .mbBody .mbBodyContents .article .status dl {font-size:16px;} .modalBox .mbBody .mbBodyContents .article .status dl dt {} .modalBox .mbBody .mbBodyContents .article .status dl dd {color:#ff0000; margin-left:4px;} /* detailView */ .modalBox .mbBody .mbBodyContents .article .detailView {width:612px; margin:0 auto;} .modalBox .mbBody .mbBodyContents .article .detailView .slider {width:612px; height:346px; background:#ddd; position:relative;} .modalBox .mbBody .mbBodyContents .article .detailView .slider .sliderBox {height:inherit;} .modalBox .mbBody .mbBodyContents .article .detailView .slider .sliderBox .bx-viewport {} .modalBox .mbBody .mbBodyContents .article .detailView .slider .sliderBox .bx-viewport ul {} .modalBox .mbBody .mbBodyContents .article .detailView .slider .sliderBox .bx-viewport ul li {} .modalBox .mbBody .mbBodyContents .article .detailView .slider .sliderBox .bx-viewport ul li img {width:100%; max-height:346px;} .modalBox .mbBody .mbBodyContents .article .detailView .slider .btnArrow {position:absolute; top:50%; margin-top:-24px; z-index:999;} .modalBox .mbBody .mbBodyContents .article .detailView .slider .btnArrow.before {left:-64px;} .modalBox .mbBody .mbBodyContents .article .detailView .slider .btnArrow.after {right:-64px; transform:rotate(180deg);} .modalBox .mbBody .mbBodyContents .article .detailView .info {margin-top:60px;} .modalBox .mbBody .mbBodyContents .article .detailView .info h3 {display:block; font-size:26px; line-height:30px; font-weight:600; color:#383838; margin-bottom:10px;} .modalBox .mbBody .mbBodyContents .article .detailView .info dl {color:#383838; font-size:14px; display:flex; display:-webkit-flex; justify-content:flex-start;align-items:center; -webkit-justify-content:flex-start; -webkit-align-items:center;} .modalBox .mbBody .mbBodyContents .article .detailView .info dl dt {} .modalBox .mbBody .mbBodyContents .article .detailView .info dl dt::after {content:':'; margin:0 4px;} .modalBox .mbBody .mbBodyContents .article .detailView .info dl dd {} .modalBox .mbBody .mbBodyContents .article .detailView .desc {margin-top:30px;} .modalBox .mbBody .mbBodyContents .article .detailView .desc p {font-size:16px; line-height:26px; word-break:break-all; color:#383838;} /* simpleCenter */ .modalBox .mbBody .mbBodyContents .article .simpleCenter {text-align:center; font-size:16px; color:#333; font-weight:400; margin:20px 0 0;} .modalBox .mbBody .mbBodyContents .article .simpleCenter p {overflow:hidden; line-height:24px;} /* columnWrap */ .modalBox .mbBody .mbBodyContents .article .columnWrap {height:100%;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox {height:100%; font-size:16px; margin:0;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox.columnLeft {width:480px;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox.columnLeft .columnBody {background:#f8f8f9;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox.columnLeft .columnBody .listBox {border-radius:10px 0 0 10px;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox.columnRight {width:calc(100% - 480px);} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox.columnRight .columnHeader {margin-left:20px;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox.columnRight .columnBody .listBox {border-radius:0 10px 10px 0; } .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnHeader {} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnHeader .tools {} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnHeader .tools .inputWrap {width:250px;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnHeader .tools .inputWrap .textRemove {position: absolute; top:50%; right:33px; transform:translate(0, -11px);} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnHeader .tools .buttonBox {} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnHeader .tools .buttonBox button {padding:0 10px; height:33px;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnHeader .tools .selected {color:#5c6063; font-size:18px;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnHeader .tools .selected em {color:#a50034; font-style:normal;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnBody {height:calc(100% - 110px);} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnBody .listBox {border:1px solid #e1e1e1; margin-top:10px; height:560px; overflow:auto;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnBody .listBox.nodata {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:center;align-items:center; -webkit-justify-content:center; -webkit-align-items:center; -ms-flex-pack:center; -ms-flex-align:center;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnBody .listBox.nodata ul {display:none;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnBody .listBox.nodata p {font-size:18px; color:#777; background:url(../img/icon/icon_question.svg) no-repeat center top; padding-top:40px;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnBody .listBox ul {} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnBody .listBox ul li {position:relative;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnBody .listBox ul li.allCheck {position:sticky; top:0; background:#fff; z-index:6;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnBody .listBox ul li:hover, .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnBody .listBox ul li.active {background:#e4e4e4; outline:1px solid #e5e5e5;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnBody .listBox ul li.active::after {content:''; width:0; height:0; border-top:10px transparent solid; border-bottom:10px transparent solid; border-right:12px #fff solid; border-left:20px transparent solid; position:absolute; top:50%; right:0; transform:translate(0%, -50%); z-index:1;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnBody .listBox ul li.active .item .title strong {color:#a50034;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnBody .listBox ul li .item {margin:0 20px; padding:10px 0; border-bottom:1px solid #e5e5e5;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnBody .listBox ul li .item .title {width:calc(100% - 100px); min-height:40px;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnBody .listBox ul li .item .title .opt {margin:0 4px;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnBody .listBox ul li .item .title strong {display:block; width:100%; word-break:break-all;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox .columnBody .listBox ul li .item .tools {} .modalBox .mbBody .mbBodyContents .article .columnWrap.licenseIssue {margin-top:10px;} .modalBox .mbBody .mbBodyContents .article .columnWrap.licenseIssue .column_50 {width:calc(50% - 10px);} .modalBox .mbBody .mbBodyContents .article .columnWrap.licenseIssue .column_50 .title {font-size:12px;} .modalBox .mbBody .mbBodyContents .article .columnWrap.licenseIssue .column_50 .dateBox {} .modalBox .mbBody .mbBodyContents .article .columnWrap.licenseIssue .column_50 .dateBox input {width:calc(100% - 50px);} .modalBox .mbBody .mbBodyContents .article .columnWrap.licenseIssue .column_50 .dateBox .ui-datepicker-trigger {background:#fff; width:40px; height:40px; font-size:0; color:transparent; box-shadow:inset 0 0 0 1px #929292; border-radius: 50%;} .modalBox .mbBody .mbBodyContents .article .columnWrap.licenseIssue .column_50 .dateBox .ui-datepicker-trigger::before {content:""; display:block; width:40px; height:40px; background:url(../img/icon/icon_date.svg) no-repeat center; filter:grayscale(1); opacity: 0.7;} .modalBox .mbBody .mbBodyContents .article .columnWrap.licenseIssue .column_50 .dateBox .ui-datepicker-trigger:hover {background:#f5f5f5;} .modalBox .mbBody .mbBodyContents .article .columnWrap.licenseIssue .column_50 .dateBox .ui-datepicker-trigger:hover::before {filter:grayscale(0); opacity:1;} .modalBox .mbBody .mbBodyContents .article .columnWrap.licenseIssue .column_50 .dateBox .ui-datepicker-trigger:active {background:#ccc; box-shadow:inset 0 0 0 3px #7d2c47;} .modalBox .mbBody .mbBodyContents .article .dlBox.licensingPopOne {padding: 20px; margin-bottom: 10px;} .modalBox .mbBody .mbBodyContents .article .dlBox.licensingPopOne dl {align-items: center;} .modalBox .mbBody .mbBodyContents .article .dlBox.licensingPopOne dl dt {margin-top: 5px;} /* partner */ .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox.columnPartnerLeft {width:250px;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox.columnPartnerLeft .searchFilterBox {display:none; margin-bottom:10px;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox.columnPartnerLeft .columnBody {background:#f8f8f9;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox.columnPartnerLeft .columnBody .listBox {border-radius:10px 0 0 10px; } .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox.columnPartnerLeft .columnBody .listBox ul li .item .title {width:calc(100% - 0px); margin:0 10px;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox.columnPartnerLeft .columnBody .listBox ul li .item .title strong {font-weight:400;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox.columnPartnerLeft .columnBody .listBox ul li.active {} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox.columnPartnerLeft .columnBody .listBox ul li.active.active::before {content:''; display:block; width:10px; height:10px; background:url(../img/icon/icon_check.svg)no-repeat; position:absolute; top:50%; left:10px; transform:translate(0, -50%);} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox.columnPartnerRight {width:calc(100% - 250px);} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox.columnPartnerRight .columnHeader {} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox.columnPartnerRight .columnBody .selectListBox {border-radius:0 10px 10px 0; border: 1px solid #e1e1e1; margin-top:10px; height:560px; overflow:auto;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox.columnPartnerRight .columnBody .selectListBox .selectListHeader {border-bottom:1px solid #e5e5e5; padding:12px;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox.columnPartnerRight .columnBody .selectListBox .selectListBody {height:calc(100% - 48px); overflow:auto;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox.columnPartnerRight .columnBody .selectListBox .selectListBody .group {margin:4px 12px 20px;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox.columnPartnerRight .columnBody .selectListBox .selectListBody .group h3 {font-size:12px; border-bottom:1px solid #e5e5e5; padding:6px 0;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox.columnPartnerRight .columnBody .selectListBox .selectListBody .group .optList {font-size:0;} .modalBox .mbBody .mbBodyContents .article .columnWrap .columnBox.columnPartnerRight .columnBody .selectListBox .selectListBody .group .optList .opt {display:inline-block; width:50%; vertical-align:top; margin:6px 0;} .modalBox .mbBody .mbBodyContents .article .columnWrap.selectedBox {width:calc(30% - 30px);} .modalBox .mbBody .mbBodyContents .article .columnWrap.selectedBox .columnHeader {height:33px;} .modalBox .mbBody .mbBodyContents .article .columnWrap.selectedBox .columnBody {} .modalBox .mbBody .mbBodyContents .article .columnWrap.selectedBox .columnBody .listBox {border-radius:10px;} .modalBox .mbBody .mbBodyContents .article .columnWrap.selectedBox .columnBody .listBox ul {} .modalBox .mbBody .mbBodyContents .article .columnWrap.selectedBox .columnBody .listBox ul li {display:block; padding:10px 16px; font-size:14px;} .modalBox .mbBody .mbBodyContents .article .columnWrap.selectedBox .columnBody .listBox ul li.disabled {opacity:0.4;} /* sectionGroup */ .modalBox .mbBody .mbBodyContents .article .sectionGroup {margin-bottom:40px;} .modalBox .mbBody .mbBodyContents .article .dlBoxGroup:last-child {margin-bottom:0;} .modalBox .mbBody .mbBodyContents .article .sectionGroup h3 {font-size:16px; line-height:18px; color:#555; font-weight:600; margin-left:20px;} .modalBox .mbBody .mbBodyContents .article .sectionGroup .roleList {margin:20px;} .modalBox .mbBody .mbBodyContents .article .sectionGroup .roleList button {width:calc(20% - 10px); height:86px; border-radius:10px; line-height:18px;} .modalBox .mbBody .mbBodyContents .article .sectionGroup .roleList button[aria-checked="true"] {color:#a50034; background:none; box-shadow:inset 0 0 0 2px #7d2c47;} .modalBox .mbBody .mbBodyContents .article .sectionGroup .roleList button[aria-checked="true"]::before {content:''; display:block; width:14px; height:12px; background:url(../img/icon/icon_select.svg)no-repeat; position:absolute; top:6px; right:10px;} .modalBox .mbBody .mbBodyContents .article .sectionGroup .roleList button[aria-checked="true"]p {color:#333;} .modalBox .mbBody .mbBodyContents .article .sectionGroup .tableBoard {margin:20px;} .modalBox .mbBody .mbBodyContents .article .sectionGroup .tableBoard .tableWrap table tbody tr td {white-space:normal; word-break:break-all;} .modalBox .mbBody .mbBodyContents .article .sectionGroup .tableBoard .tableWrap table tbody tr td:nth-child(3) {width:30%;} .modalBox .mbBody .mbBodyContents .article .sectionGroup .allowAccessWrap {margin:20px;} .modalBox .mbBody .mbBodyContents .article .sectionGroup .allowAccessWrap .item {display:flex; align-items:center; margin:8px 0;} .modalBox .mbBody .mbBodyContents .article .sectionGroup .allowAccessWrap .item .icon {display:block; width:30px; height:30px; background:#949494; border-radius:50%;} .modalBox .mbBody .mbBodyContents .article .sectionGroup .allowAccessWrap .item .name {display:block; font-size:14px; font-weight:400; margin:0 10px;} .tableWrap table tbody tr.current {box-shadow: inset 0 0 0 3px rgb(165 0 52) !important; background: #fff; transform: scale(1,1);} /* listBox */ .modalBox .mbBody .mbBodyContents .list {height:330px; margin-top:8px; background:#fff; border:1px solid #dfdfdf; border-radius:10px; box-sizing:border-box; overflow:hidden;} .modalBox .mbBody .mbBodyContents .list .listHeader {background:#6d6d6d;} .modalBox .mbBody .mbBodyContents .list .listHeader .opt {margin:10px 20px; color:#fff; font-size:14px;} .modalBox .mbBody .mbBodyContents .list .listBody {overflow:auto; height:288px;} .modalBox .mbBody .mbBodyContents .list .listBody ul {} .modalBox .mbBody .mbBodyContents .list .listBody.nodata {display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:center;align-items:center; -webkit-justify-content:center; -webkit-align-items:center; -ms-flex-pack:center; -ms-flex-align:center;} .modalBox .mbBody .mbBodyContents .list .listBody.nodata ul {display:none;} .modalBox .mbBody .mbBodyContents .list .listBody.nodata p {font-size:16px; color:#777; background:url(../img/icon/icon_question.svg) no-repeat center top; padding-top:30px; padding-bottom: 5px;} .modalBox .mbBody .mbBodyContents .list .listBody ul li {border-bottom:1px solid #e5e5e5; margin:0 20px; position:relative;} .modalBox .mbBody .mbBodyContents .list .listBody ul li.active {background:#e4e4e4;} .modalBox .mbBody .mbBodyContents .list .listBody ul li.active::after {content:''; width:0; height:0; border-top:10px transparent solid; border-bottom:10px transparent solid; border-right:12px #fff solid; border-left:20px transparent solid; position:absolute; top:50%; right:0; transform:translate(0%, -50%); z-index:1;} .modalBox .mbBody .mbBodyContents .list .listBody ul li .opt {margin:0 10px; padding:10px 0;} .modalBox .mbBody .mbBodyContents .list .listBody ul li .title {font-size:14px; display:block; padding:10px 0; width:100%; cursor:pointer; word-break:break-all;} /* column_40 */ .modalBox .mbBody .mbBodyContents .column_40 {width:36%;} .modalBox .mbBody .mbBodyContents .column_40 .list {border-radius: 10px 0 0 10px;} .modalBox .mbBody .mbBodyContents .column_40 .list .listBody {height:328px;} .modalBox .mbBody .mbBodyContents .column_40 .list .listBody ul li {border:0; margin:0;} .modalBox .mbBody .mbBodyContents .column_40 .list .listBody ul li .title {width:calc(100% - 20px); border-bottom: 1px solid #e5e5e5; margin:0 10px;} .modalBox .mbBody .mbBodyContents .column_60 {width:64%; margin-left:-1px;} .modalBox .mbBody .mbBodyContents .column_60 .list {border-radius:0 10px 10px 0;} .modalBox .mbBody .mbBodyContents .column_60 .list .listHeader {background:#6d6d6d; border-bottom:1px solid #e5e5e5;} /* myinfo */ .modalBox .mbBody .mbBodyContents .myinfo {padding:10px 10px 20px; box-sizing:border-box; border-bottom:1px solid #dfdfdf;} .modalBox .mbBody .mbBodyContents .myinfo .id {font-size:16px; line-height:24px; color:#555; margin-bottom:20px; font-weight:500;} .modalBox .mbBody .mbBodyContents .myinfo .assignedRole {} .modalBox .mbBody .mbBodyContents .myinfo .assignedRole .title {font-size:16px; line-height:24px; color:#555; font-weight:500;} .modalBox .mbBody .mbBodyContents .myinfo .assignedRole ul {} .modalBox .mbBody .mbBodyContents .myinfo .assignedRole ul li {position:relative; padding-left:14px; font-size:14px; margin:6px 0;} .modalBox .mbBody .mbBodyContents .myinfo .assignedRole ul li p {word-break:break-all; white-space:normal;} .modalBox .mbBody .mbBodyContents .myinfo .assignedRole ul > li > ul > li::before {content:''; display:block; width:8px; height:1px; background:#999; position:absolute; top:12px; left:0;} /* layerPop */ .layerPop {background:#f5f5f5; border:1px solid #ccc; border-radius:4px; padding:10px 20px 20px; box-sizing:border-box; box-shadow: 3px 3px 0px rgba(0, 0, 0, 0.1); position:relative;} .layerPop::after, .layerPop::before {content:''; width:0; height:0; border-bottom:10px #ccc solid; border-right:10px transparent solid; border-left:10px transparent solid; position:absolute; top:-5px; left:50%; transform: translate(-50%, -50%); z-index:1;} .layerPop::before {border-bottom:10px #f5f5f5 solid; top:-4px; z-index:2;} .layerPop.w400 {width:400px;} .layerPop.w580 {width:580px;} .layerPop .layerHeader {margin-bottom:10px;} .layerPop .columnWrap {} .layerPop .columnWrap .column_40 {margin:0;} .layerPop .columnWrap .column_40 .layerBodyContainer {} .layerPop .columnWrap .column_40 .layerBody .layerBodyContainer .list {border-radius: 10px 0 0 10px;} .layerPop .columnWrap .column_40 .layerBody .layerBodyContainer .list .listBody {height:328px;} .layerPop .columnWrap .column_40 .layerBody .layerBodyContainer .list .listBody ul {} .layerPop .columnWrap .column_40 .layerBody .layerBodyContainer .list .listBody ul li {margin:0; border:0;} .layerPop .columnWrap .column_40 .layerBody .layerBodyContainer .list .listBody ul li .title {width:calc(100% - 40px); border-bottom: 1px solid #e5e5e5; margin:0 20px;} .layerPop .columnWrap .column_60 {margin:0;} .layerPop .columnWrap .column_60 .layerBody .layerBodyContainer .list {border-radius:0 10px 10px 0;} .layerPop .columnWrap .column_60 .layerBody .layerBodyContainer .list .listHeader {background:#fff; border-bottom:1px solid #e5e5e5;} .layerPop .layerBody {} .layerPop .layerBody .layerBodyHeader {} .layerPop .layerBody .layerBodyHeader .tools .inputWrap .textRemove {position:absolute; bottom:8px; right:32px;} .layerPop .layerBody .layerBodyContainer {} .layerPop .layerBody .layerBodyContainer .list {height:330px; margin-top:8px; background:#fff; border:1px solid #dfdfdf; border-radius:10px; box-sizing:border-box; overflow:hidden;} .layerPop .layerBody .layerBodyContainer .list .listHeader {background:#e4e4e4;} .layerPop .layerBody .layerBodyContainer .list .listHeader .opt {padding:10px 20px;} .layerPop .layerBody .layerBodyContainer .list .listBody {overflow:auto; height:288px;} .layerPop .layerBody .layerBodyContainer .list .listBody ul {} .layerPop .layerBody .layerBodyContainer .list .listBody ul li {border-bottom:1px solid #e5e5e5; margin:0 20px; position:relative;} .layerPop .layerBody .layerBodyContainer .list .listBody ul li.active {background:#e4e4e4;} .layerPop .layerBody .layerBodyContainer .list .listBody ul li .opt {margin:0 10px; padding:10px 0;} .layerPop .layerBody .layerBodyContainer .list .listBody ul li .title {font-size:14px; display:block; padding:10px 0; width:100%; cursor:pointer; word-break:break-all;} @media (max-width:990px) { /* .modalBox .mbBody .mbBodyContents .article .columnWrap .column_50 {width:100%;} .modalBox .mbBody .mbBodyContents .article .columnWrap .column_50 .columnHeader .tools .selected {font-size:14px;} .modalBox .mbBody .mbBodyContents .article .columnWrap .column_50.propertyList {display:none; position:fixed; top:91px; left:40px; right:40px; bottom:122px; width:auto; height:auto; background:#fff; animation: mShowPop 0.3s;} .modalBox .mbBody .mbBodyContents .article .columnWrap .column_50 .columnBody .listBox {height:calc(100% - 0px);} .modalBox .mbBody .mbBodyContents .article .columnWrap .column_50 .columnHeader .tools .buttonBox button {padding:0 10px;} .modalBox .mbBody .mbBodyContents .article .columnWrap .arrow {display:none;} @keyframes mShowPop { 0% {opacity:0; transform:translate3d(100px, 0, 0);} 100% {opacity:1; transform:translate3d(0, 0, 0);} } */ } /* sliderBox */ .sliderBox {position:relative; z-index:1;} .sliderBox .bx-wrapper, .sliderBox .bx-wrapper .bx-viewport {height:100%;} .sliderBox .mkv {height:100%;} .sliderBox .mkv li {height:100%; display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:center; -webkit-justify-content:center; background-position:center top !important; background-size:cover !important;} .sliderBox .mkv li .kvInfoWrap {width:1200px; text-align:left;} .sliderBox .mkv li .kvInfoWrap .thumb {width:677px; height:570px;} .sliderBox .mkv li .kvInfoWrap .kvInfo {width:430px;} .sliderBox .mkv li .kvInfoWrap .kvInfo strong {display:block; font-size:30px; line-height:34px; font-weight:600; margin-bottom:50px; color:#ce0350;} .sliderBox .mkv li .kvInfoWrap .kvInfo p {display:block; font-size:14px; line-height:20px; color:#747474; margin-bottom:10px; white-space:break-spaces;} .sliderBox .mkv li .kvInfoWrap .kvInfo .group {} .sliderBox .mkv li .kvInfoWrap .kvInfo .group strong {margin-bottom:20px;} /* sliderBox tuning */ .sliderBox .bx-controls {text-align:center; position:relative; margin-top: 10px; display:flex; flex-direction:row; justify-content:center;} .sliderBox .bx-controls .bx-controls-auto {display:inline-block; vertical-align:middle; position:relative; right:auto !important; bottom:auto; width:68px !important; height:30px !important; z-index:9;} .sliderBox .bx-controls .bx-controls-auto .bx-controls-auto-item {margin:0 2px;} .sliderBox .bx-controls .bx-controls-auto .bx-controls-auto-item a {display:block; width:30px; height:30px; margin:0; background:none; border-radius:50%; font-size:0; position:relative; pointer-events:auto; opacity:1; box-shadow:inset 0 0 0 1px #929292;} .sliderBox .bx-controls .bx-controls-auto .bx-controls-auto-item a.active {pointer-events:none; opacity:0.5;} .sliderBox .bx-controls .bx-controls-auto .bx-controls-auto-item a:focus {outline:auto;} .sliderBox .bx-controls .bx-controls-auto .bx-controls-auto-item a:hover {background:#f5f5f5;} .sliderBox .bx-controls .bx-controls-auto .bx-controls-auto-item a:hover:after {filter:grayscale(0);} .sliderBox .bx-controls .bx-controls-auto .bx-controls-auto-item a:active {box-shadow:inset 0 0 0 2px #7d2c47;} .sliderBox .bx-controls .bx-controls-auto .bx-controls-auto-item a:active:after {filter:grayscale(1);} .sliderBox .bx-controls .bx-controls-auto .bx-controls-auto-item a:after {content:''; display:block; width:30px; height:30px; position:absolute; top:0; left:0; z-index:1; filter:grayscale(1); background-size: contain !important;} .sliderBox .bx-controls .bx-controls-auto .bx-controls-auto-item .bx-start:after {background:url(../img/icon/btnPlay.svg) no-repeat center;} .sliderBox .bx-controls .bx-controls-auto .bx-controls-auto-item .bx-stop:after {background:url(../img/icon/btnStop.svg) no-repeat center; transform:scale(0.8);} .sliderBox .bx-controls .bx-pager {order:-1; display:inline-block; vertical-align:middle; width:auto; font-size:15px; padding:0; font-weight:500; bottom:auto; position:relative;} .sliderBox .bx-controls .bx-pager .bx-pager-item {display:inline-block;} .sliderBox .bx-controls .bx-pager::first-letter {font-size:17px; color:#d44232;} .sliderBox .bx-wrapper .bx-pager.bx-default-pager a {width:10px; height:10px; background:#cdcdcd;box-sizing:border-box;border-radius:50%;} .sliderBox .bx-wrapper .bx-pager.bx-default-pager a:hover {background:#7d2c47;} .sliderBox .bx-wrapper .bx-pager.bx-default-pager a.active {background:#262626; box-sizing:border-box;} /* UI - Table ------------------------------------------------*/ .tableWrap table tbody tr td .catagory {display:block; width:78px; height:24px; margin:0 auto; line-height:22px; text-align:center; font-size:14px; font-weight:300; color:#fff; background:#333; border-radius:4px;} .tableWrap table tbody tr td .catagory.service {background:#ab5c58;} .tableWrap table tbody tr td .catagory.interface {background:#488797;} .tableWrap table tbody tr td .catagory.design {background:#fff; color:#000; border:1px solid #808080; box-sizing:border-box; font-weight:400;} /* UI - LAYOUT ------------------------------------------------*/ /* intro */ .minFullSize {height:100%; overflow:hidden;} .minFullSize .header .tools .user:after {display:none;} /* wrap */ .wrap {height:100%; overflow:hidden;} .header .sta .title h1 {display:block; width:244px; height:28px; background: url(../img/common/logo_businesscloud.svg) no-repeat; background-size:contain; font-size:0;} .header .sta .title .console {display: flex;} .header .sta .title .console span {font-size: 20px; font-weight: 500; line-height: 140%;} .header .sta .dxpTitle {margin-left:24px;} .header .sta .dxpTitle h1 {display:block; font-size:25px; color:#383838; font-weight:400;} .header .tools button::before {filter:grayscale(1);} .header .tools button[aria-pressed="true"]::before {filter:grayscale(0); opacity:1;} .header .tools .user.active strong {color:#a50034;} .header .tools .user strong {vertical-align: middle; font-size: 14px; color: #5c6063; margin-left: 4px; margin-right: 14px; padding: 7px 9px; font-weight: normal;} .header .tools .user:hover strong {text-decoration: underline; border-radius: 14px;} .header .tools .user:active strong {box-shadow: inset 0 0 0 3px #a50034;} .header .tools .userTools {display:none; background:#fff; border:1px solid #d0d1d2; overflow:hidden; border-radius:10px; box-shadow:0 8px 8px rgba(0, 0, 0, 0.2); position:absolute; top:50px; right:20px; z-index:999; animation:userToolsShow 0.3s;} .header .tools .userTools a {display:block; font-size:14px; color:#333; padding:10px; border-bottom:1px solid #e5e5e5; font-weight:500; outline-offset:-2px;} .header .tools .userTools a:hover {background:#eeeeee; text-decoration:underline;} .header .tools .userTools a:active {background:#cbcbcb; text-decoration:none; box-shadow:inset 0 0 0 3px rgb(165 0 52);} .header .tools .userTools a:first-child {border-radius:10px 10px 0 0;} .header .tools .userTools a:last-child {border-bottom:0; border-radius:0 0 10px 10px;} .header .tools .notiDiv {display: inline-block; vertical-align: middle; display: flex; align-items: center; position: relative;} .header .tools .helpDiv {display: inline-block; vertical-align: middle; display: flex; align-items: center; position: relative;} .header .tools .checklistDiv {display: inline-block; vertical-align: middle; display: flex; align-items: center; position: relative;} @keyframes userToolsShow { 0% {opacity:0; transform:translate3d(0, -30px, 0);} 100% {opacity:1; transform:translate3d(0, 0, 0);} } /* UI - LAYOUT -----------------------------------------------------------------------------------------------------*/ /* wrap */ .wrapPro {display:flex; height:100%;flex-wrap: wrap; overflow:hidden; position: relative;} .wrapPro.homePage {overflow:scroll; flex-direction:column;} .wrapPro.layoutThree {display: flex; flex-direction: row;} .wrapPro.layoutThree .container {width: 100%;} .wrapPro.homePage::after {content: ""; height: 576px; width: 385px; top: 140px; right: 1.25%; position: fixed; background: url("../img/common/image\ 7.png") no-repeat; z-index: -1;} /* gnbWrap > gnb */ .gnb { width:320px; height:100vh; background:#e8e9ee; border-right:1px solid rgb(0 0 0 / 0.1); position:fixed; top:60px; left: -330px; z-index: 5; box-sizing: border-box; display:block; border-bottom:1px solid rgb(0 0 0 / 0.1); transition-duration: 0.2s; padding: 10px; } .gnb.show {left: 0px;} @keyframes textShow { 0% {opacity:0;} 50% {opacity:0;} 100% {opacity:1;} } .gnb .menu {display:flex; align-items:center; height:90px; width:100%; box-sizing:border-box; vertical-align:top;} /* .gnb .menu:hover {background:#1c1d21;} */ .gnb .menu strong {font-size:0; color:transparent; font-weight:normal; animation:textShow 0.3s;} .gnb .menu:before {content:''; display:block; width:40px; height:40px; overflow:hidden; background:url(../img/common/menu_menu.svg) no-repeat center; margin:0 auto;} .gnb .menu:active:before {filter:brightness(10);} .gnb .gnbBox {flex-grow:1; position: relative; display: flex; flex-direction: column; overflow:auto;} .gnb .gnbBox h2 {color:#fff;} .gnb .gnbBox .navi {height:calc(100% - 114px);} .gnb .gnbBox .navi a {text-align:center; height:auto; color:#afafaf; box-sizing:border-box; position:relative; display:flex; display:-webkit-flex; display:-ms-flexbox; justify-content:center;align-items:center; -webkit-justify-content:center; -webkit-align-items:center;} .gnb .gnbBox .navi a p {font-size:0; opacity:0; animation:textShow 0.3s;} .gnb .gnbBox .navi div.additional p {font-size:0; opacity:0; animation:textShow 0.3s;} .gnb .gnbBox .navi a:hover {background:#DADDE2; color:#fff; text-decoration:none; border-radius: 10px;} .gnb .gnbBox .navi a.textMenu {background: unset;} .gnb .gnbBox .navi a:before {content:''; display:block; width:40px; height:40px; margin:0 auto; overflow:hidden;} .gnb .gnbBox .navi a[aria-current="true"], .gnb .gnbBox .navi a[aria-selected="true"] {background-color:#fff; border-radius: 10px;} .gnb .gnbBox .navi a[aria-current="true"]:after, .gnb .gnbBox .navi a[aria-selected="true"]:after {background-color:#fff; border-radius: 10px;} .gnb .gnbBox .navi a:active {background-color: #BEC2CB; border-radius: 10px;} .gnb .gnbBox .navi a.textMenu:active {background-color: unset;} .gnb .gnbBox .navi a:active:before, .gnb .gnbBox .navi a[aria-current="true"]:before, .gnb .gnbBox .navi a[aria-selected="true"]:before {filter:brightness(10);} .gnb .gnbBox .navi a.home::before {background:url(../img/common/ic_home.svg) no-repeat center; filter: unset;} .gnb .gnbBox .navi a.devices:before {background:url(../img/icon/ic_device.svg) no-repeat center; filter: unset;} .gnb .gnbBox .navi a.workspace:before {background:url(../img/common/ic_workspace.svg) no-repeat center; filter: unset;} .gnb .gnbBox .navi a.members:before {background:url(../img/common/ic_partner.svg) no-repeat center; filter: unset;} .gnb .gnbBox .navi a.partnerCenter:before {background:url(../img/common/ic_partner\ center.svg) no-repeat center; filter: unset;} .gnb .gnbBox .navi a.licensing:before {background:url(../img/common/menu_icon_license_n.svg) no-repeat center; filter: unset;} .gnb .gnbBox .navi a.licenseManagement:before {background:url(../img/common/menu_icon_license_management_n.svg) no-repeat center; filter: unset;} .gnb .gnbBox .navi a.request:before {background:url(../img/common/ic_report.svg) no-repeat center; filter: unset;} .gnb .gnbBox .navi a.approval:before {background:url(../img/common/ic_licensemanagement.svg) no-repeat center; filter: unset;} .gnb .gnbBox .navi a.license:before {background:url(../img/common/ic_license.svg) no-repeat center; filter: unset;} .gnb .gnbBox .navi a.points:before {background:url(../img/common/ic_point.svg) no-repeat center; filter: unset;} .gnb .gnbBox .tools {display:none;} .gnb .gnbBox .tools .toolBox {display:flex; align-items:center; justify-content:center; padding:14px 0;} .gnb .gnbBox .tools .toolBox button::before {filter:grayscale(1) brightness(10); opacity:0.7;} .gnb .gnbBox .tools .toolBox .sitemap {display:block; border-right:1px solid #696a6e; padding-right:8px; margin-right:12px;} .gnb .gnbBox .tools .toolBox .sitemap a {display:block; font-size:14px; color:#fff; padding:2px 10px; border-radius: 20px;} .gnb .gnbBox .tools .toolBox .sitemap a:hover {text-decoration:underline;} .gnb .gnbBox .tools .toolBox .sitemap a:active {text-decoration:none; box-shadow:inset 0 0 0 2px #7d2c47;} .gnb .gnbBox .tools .toolBox .sessionTime {display:block; vertical-align:middle;} .gnb .gnbBox .tools .toolBox .sessionTime .time {display:inline-block; vertical-align:middle; font-size:14px; color:#fff; font-size:15px; margin:0 10px 0 0;} .gnb .gnbBox .tools .toolBox .sessionTime .time::before {content:''; display:inline-block; vertical-align:middle; margin-right:10px; width:20px; height:20px; background:url(../img/common/header_icon_time.svg) no-repeat; filter:brightness(10); opacity: 0.7;} .gnb .gnbBox .tools .toolBox .question {font-size:0px; padding:0; margin:0 6px; border:0; border-radius:0; width:24px; height:24px; position:relative; overflow: inherit;} .gnb .gnbBox .tools .toolBox .question::before {content:''; display:block; width:24px; height:24px; background:url(../img/common/header_icon_help.svg) no-repeat;} .gnb .gnbBox .tools .toolBox .noti {font-size:0px; padding:0 16px; border:0; border-radius:0; height:24px; border-left:1px solid #696a6e; border-right:1px solid #696a6e; position:relative; overflow:inherit; display:flex; align-items:center; justify-content:center;} .gnb .gnbBox .tools .toolBox .noti::before {content:''; display:block; width:24px; height:24px; margin:-10px 0; background:url(../img/common/header_icon_alarm.svg) no-repeat bottom;} .gnb .gnbBox .tools .toolBox .noti[data-new="y"]::after {content:"New"; display:block; height:18px; line-height:18px; text-align:center; font-size:11px; font-weight:bold; padding:0 4px; background:#a50034; border-radius:20px; color:#fff; position:absolute; top:-7px; right:0;} .gnb .gnbBox .bannerDiv > dl {display: none;} .gnb .gnbBox .tools .toolBox .user {font-size:0px; padding:0 10px; margin:0 4px; border:0; border-radius:0; height:24px; position:relative; overflow: inherit; display:flex; align-items:center; justify-content:center;} .gnb .gnbBox .tools .toolBox .user::before {content:''; display:block; width:24px; height:24px; margin:-10px 0; background:url(../img/common/header_icon_profile.svg) no-repeat bottom;} /* gnb active */ .gnb .bannerDiv {width:100%; height:138px; display:flex; background:url(../img/_sample/banner_1.png) no-repeat; background-size:cover; padding:20px; box-sizing:border-box; flex-shrink:0; border-radius:12px;} .gnb .bannerDiv > dl {width: 100%; flex-direction: column; gap: 4px; display: flex;} .gnb .bannerDiv > dl > dt {font-weight: 700; font-size: 20px; color: #fff; word-break: break-word;} .gnb .bannerDiv > dl > dd {font-weight: 700; font-size: 12px; color: #fff; word-break: break-word; display: flex; align-items: center; gap:8px;} .gnb .bannerDiv > dl > dd > .icRight {height: 16px !important; width: 16px !important; background: transparent !important; box-shadow:none; border:none;} .gnb.active {display:flex; width:320px; z-index:5; padding: 10px; box-sizing: border-box; flex-shrink:0; opacity:1; transition: opacity 0.21s; animation: move 5s linear infinite;} .gnb .menu {padding:0 18px; border-bottom:1px solid #3d3e44; display: none;} .gnb .menu:before {margin:0; background:url(../img/common/menu_close.svg) no-repeat center;} .gnb .menu strong {display:block; font-size:0; margin: 0 10px; color:#fff; opacity:1; width:181px; height:21px; background:url(../img/icon/logo_businessCloud.svg)no-repeat; background-size: contain;} .gnb .gnbBox .navi {display: flex; flex-direction: column; gap: 16px;} .gnb .gnbBox .navi a {text-align:left; height:auto; font-size:16px; font-weight: 500; display:flex; justify-content:flex-start; align-items:center; padding:0; padding: 14px; box-sizing: border-box; word-break: break-word;} .gnb .gnbBox .navi a[aria-selected="true"] p {font-size: 16px; font-weight: 700; word-break: break-word; color: #111111; opacity: unset;} .gnb .gnbBox .navi a p {display:block; font-weight: 500; line-height: 17.6px; font-size:16px; color: #555; opacity: unset;} .gnb .gnbBox .navi div.additional {min-height: 32px; padding: 12px 20px 0px 12px;} .gnb .gnbBox .navi div.additional p {font-weight: 700; font-size: 14px; opacity: unset;} .gnb .gnbBox .navi a:before {margin:0 6px 0 0;} .gnb .gnbBox .navi a:active:after, .gnb .gnbBox .navi a.active:after {height:89px;} .gnb ~ .container .layoutTwoWrapper {padding: 0 0 0 319px; box-sizing: border-box; width: 100%;} /* .gnb.active ~ .container .contents {margin: 0 0 0 319px; box-sizing: border-box; width: calc(100% - 319px);} */ .gnb ~ .container .dcFooter {margin: 0 0 0 319px; box-sizing: border-box; width: calc(100% - 319px);} /* .gnb.active ~ .header .sta .title .menu {display: none;} */ .gnb.active ~ .header .sta .title .icClose {display: block;} .gnb.active ~ .customBody {width:calc(100% - 320px); margin-left:320px;} /* .gnb.show {width:320px; height:100vh; z-index:5; padding: 10px; box-sizing: border-box; top: 60px; flex-shrink:0; opacity:1; display:block;} */ /* header */ .header {display:flex; align-items:center; justify-content:space-between; width:100%; height:60px; background:transparent; box-shadow:0 0px 4px rgba(0, 0, 0, 0.2); position:relative; z-index:80;} .header .sta {display:flex; align-items:center;} .header .sta .title {margin:0 10px; display:flex; align-items:center;} .header .sta .title .menu {display:flex; margin:6px 10px 6px 5px; padding:0px; border-radius:8px !important;} .header .sta .title .icClose {display:flex; margin:6px 10px 6px 5px; padding:0px; border-radius:8px !important; display: none;} .header .sta .title h2 {display:block; font-size:0; color:#706f6f; width:220px; height:21px; background:url(../img/common/header_logo_header.svg)no-repeat;} .header .sta .tools {position:relative;} .header .tools {display:flex; align-items:center; margin-right: 24px; white-space:nowrap; min-height: 44px;} .header .tools > .sheparator {display: flex; align-items: center; height: 18px; width: 1px; background: #000; margin: 0 16px; opacity: 0.1;} .header .tools .sessionTime {display:flex; align-items:center; margin:0 4px 0 0; display: flex; align-items: center; position: relative;} .header .tools .sessionTime .time {display:flex; align-items:center; line-height:26px; font-size:15px; margin:0 8px 0 0;} .header .tools .sessionTime .time .clockIcon {display:none;} .header .tools .sessionTime .time::before {content:''; display:flex; align-items:center; margin-right:4px; width:24px; height:24px; background:url(../img/icon/ic_time.svg) no-repeat; background-size: cover;} /* .header .tools .userDiv {display: flex; align-items: center; justify-content: center;} */ .header .tools .iconBox {display: flex; align-items: center; justify-content: center; gap: 16px;} /* contents */ .container {width:calc(100% - 0px); height:100%; background:#f2f2f2; position:relative;} /* .gnb ~ .container {width:calc(100% - 80px);} */ /* gnbWrap */ .container .body {display:flex; height:calc(100% - 56px); overflow:hidden; position:relative;} /* body > snb */ .snb {width:320px; height:100%; box-sizing:border-box; background:#FFF; overflow-y: auto; border: 1px solid #d0d1d2; overflow: overlay; border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:6px;} .snb .snbHeader {display:none; align-items:center; height:40px; margin-bottom:10px;} .snb .snbHeader .backTitle {display:flex; align-items:center; margin:0 10px;} .snb .snbHeader .backTitle h2 {display:block; margin:0 10px; font-size:22px; font-weight:bold;} .snb .title, .snb .total {display:block; padding:0 20px; height:54px; line-height:54px; font-size:16px; border-bottom:1px solid #e5e5e5; box-sizing:border-box;} .snb .title.hr {padding:0 20px;} .snb .title h3, .snb .title h4, .snb .title strong, .snb .total strong {font-size:15px !important;; font-weight:500 !important;; margin:0 !important;} .snb .title.hr strong {font-size:14px; font-weight:400;} .snb .selectUser {} .snb .selectUser ul {} .snb .selectUser ul li {position:relative;} .snb .selectUser ul li a {display:block; font-size:16px; font-weight:500; padding:0 34px; box-sizing:border-box; color:#383838; position:relative; border-bottom:1px solid #e8e8e8; height:54px; line-height:54px;} .snb a:hover {color: #383838; text-decoration: underline;} .snb .selectUser ul li.active {background:#e4e4e4;} .snb .selectUser ul li.active::before {content:''; display:block; width:10px; height:10px; background:url(../img/icon/icon_check.svg)no-repeat; position:absolute; top:50%; left:20px; transform:translate(0, -50%);} .snb .selectUser ~ .groupList {height:calc(100% - 224px);} .snb .groupList {height:calc(100% - 116px); overflow:auto; border-bottom:1px solid #d0d1d2; box-sizing:border-box;} .snb .groupList ul {} .snb .groupList ul li {display:block; position:relative;} .snb .groupList ul li:hover {} .snb .groupList ul li a {display:block; font-size:14px; font-weight:500; box-sizing:border-box; color:#383838; position:relative; padding:0 20px; border-bottom:1px solid #e8e8e8; outline-offset:-2px;} .snb .groupList ul li a:hover {text-decoration:underline;} .snb .groupList ul li a:active {outline:1px solid #a50034; outline-offset:-2px;} .snb .groupList ul li a p {display:block; width: calc(100% - 12px); padding:12px 0; word-break:break-all;} .snb .groupList ul li ul li a p {padding:12px 0;} .snb .groupList ul li a[aria-current="true"], .snb .groupList ul li a[aria-selected="true"] {outline:1px solid #a50034; outline-offset:-2px; background: #efefef;} .snb .groupList ul li a[aria-current="true"]::before, .snb .groupList ul li a[aria-selected="true"]::before {content:''; display:block; width:10px; height:10px; background:url(../img/icon/icon_check.svg)no-repeat; position:absolute; top:18px; left:18px;} .snb .groupList ul li a[aria-current="true"] ~ ul {display:block;} .snb .groupList ul li a[aria-selected="true"] ~ ul {display:block;} .snb .groupList ul li a, .snb .groupList ul li.group a {border-bottom:1px solid #e5e5e5; font-size:14px; font-weight:500; margin:0; padding:0 0 0 34px; position:relative;} .snb .groupList ul li.group a::before {content:''; display:block; width:6px; height:6px; border-left:1px solid #949494; border-bottom:1px solid #949494; position:absolute; top:18px; left:18px; background: none;} .snb .groupList ul li.group a:hover {background:#efefef; text-decoration:underline;} .snb .groupList ul li.group a.active, .snb .groupList ul li.group a:active {outline:1px solid #a50034; outline-offset:-2px;} .snb .groupList ul li.group a p {border-bottom:0;} /* 2depth */ .snb .groupList ul li ul li {background:#f8f8f9;} .snb .groupList ul li ul li::after {display:none;} .snb .groupList ul li ul li a {padding:0 10px 0 80px !important;} .snb .groupList ul li ul li a[aria-current="true"], .snb .groupList ul li ul li a[aria-selected="true"] {outline:1px solid #a50034; outline-offset:-2px; background: #efefef;} .snb .groupList ul li ul li.group {} .snb .groupList ul li ul li.group .groupTitle {padding-left:54px;} .snb .groupList ul li ul li.group .groupTitle a {padding:0px !important; outline:none;} .snb .groupList ul li ul li.group .groupTitle a:hover {} /* .snb .groupList ul li ul li a[aria-selected="true"]::before {content:''; display:block; width:10px; height:10px; background:url(../img/icon/icon_check.svg)no-repeat; position:absolute; top:50%; left:10px; transform:translate(0, -50%);} */ /* 3depth */ .snb .groupList ul li ul li ul li {background:#f0f0f1;} .snb .groupList ul li ul li ul li a {padding:0 10px 0 110px !important;} .snb .groupList ul li ul li ul li a:hover {background:#e6e6e9 !important;} .snb .groupList ul li ul li ul li a::before {left:94px !important;} .snb .groupList ul li ul li ul li a[aria-current="true"]::before, .snb .groupList ul li ul li ul li a[aria-selected="true"]::before {left:28px;} /* groupTitle */ .snb .groupList ul li.group .groupTitle {display:flex; align-items:center; justify-content:space-between; width:100%; border-bottom:1px solid #e5e5e5; padding-left:24px; box-sizing:border-box;} .snb .groupList ul li.group .groupTitle a {width:calc(100% - 30px); background:none; border-bottom:0; padding:0;} .snb .groupList ul li.group .groupTitle a::before {display:none !important;} .snb .groupList ul li.group .groupTitle a:hover {/* outline:1px solid #a50034; */outline-offset:-2px;} .snb .groupList ul li.group .groupTitle a:active {outline:none;} .snb .groupList ul li.group .groupTitle button {width:30px; min-width:30px; height:30px; box-shadow:none; background:none;} .snb .groupList ul li.group .groupTitle button::before {content:'?'; width:30px; height:30px; background:none; color:#717171; font-size:10px; line-height:30px;} .snb .groupList ul li.group .groupTitle.active {outline:1px solid #a50034; outline-offset:-2px; background:#e4e4e4;} .snb .groupList ul li.group .groupTitle.active a:hover, .snb .groupList ul li.group .groupTitle.active a[aria-current="true"] , .snb .groupList ul li.group .groupTitle.active a[aria-selected="true"] {outline:none;} .snb .groupList ul li ul li a::before {display:block !important; position:absolute; top:18px !important; left:66px !important; width:6px !important; height:6px !important; border-bottom:1px solid #949494 !important; border-left:1px solid #949494 !important; background:none !important; content:'';} .groupTitle {} /* .groupTitle a::before {display:none !important;} */ .groupTitle ~ ul {display:none;} .groupTitle.open .button.circle {transform:rotate(180deg) !important;} .groupTitle.open ~ ul {display:block !important;} @keyframes ShowMenu { 0% {opacity:0; transform:translate3d(-50px, 0, 0);} 100% {opacity:1; transform:translate3d(0, 0, 0);} } /* container */ .container .body .contents.fullWidth {width:calc(100% - 0px);} .container .body .contents {display:block; width:calc(100% - 0px); height:100%;} /* licenseExpire */ .container .body .contents .licenseExpireWrap {display:flex; height:100%; align-items:center; justify-content:center; background:#fff;} .container .body .contents .licenseExpireWrap .licenseExpire {margin:40px 0; padding:10px; font-size:18px; text-align:center; line-height:24px; box-sizing:border-box; padding-top:140px; background:url(../img/icon/icon_license_expire.svg)no-repeat center top;} /* dcHeader */ .container .body .contents .dcHeader {display:flex; align-items:center; justify-content:space-between; position:relative; height: auto; padding: 24px 32px; gap:10px;} .container .body .contents .dcHeader .title {display:flex; flex-direction:row; align-items:center; height: auto; box-sizing: border-box; width: calc(100%);} .container .body .contents .dcHeader .toolBox {flex-shrink:0; display:flex; gap:8px;} .container .body .contents .dcHeader .toolBox dl{display:flex; align-items:center; gap:8px; font-size:14px;} .container .body .contents .dcHeader .toolBox dl dt{font-weight:700;} /* .container .body .contents.appDetails .dcHeader .title {padding: 20px 10px; display: flex; align-items: flex-start;} */ .container .body .contents .dcHeader .title h1 {max-width: calc(50% - 10.5px); word-break: break-word;} .container .body .contents .dcHeader .title span {max-width: calc(65%); word-break: break-word;} .container .body .contents .dcHeader .title h3 {font-size:24px; font-weight:700; word-break: break-word; line-height: 31.2px;} .container .body .contents .dcHeader .title .titleTools {display: flex; height: auto; align-items: center; gap: 12px;} .container .body .contents .dcHeader .title .titleTools > dl {display: flex; gap: 8px;} .container .body .contents .dcHeader .title .titleTools > dl > dt {display: flex; font-weight: 700; font-size: 14px; font-style: normal; word-break: break-word;} .container .body .contents .dcHeader .title .titleTools > dl > dd {display: flex; font-weight: 500; font-size: 14px; font-style: normal; word-break: break-word;} .container .body .contents .dcHeader .title span {font-size:19px; font-weight: normal; padding:0 10px; box-sizing: border-box; border-left: 1px solid rgba(0 , 0 , 0 ,0.2); margin: 0 0 0 10px;} .container .body .contents .dcHeader .title.breadcrumb ul {padding:0 10px; border-left:1px solid #c2c2c2;} .container .body .contents .dcHeader .title.breadcrumb ul li {display:contents; font-size:17px; color:#333; font-weight:300; letter-spacing:-0.6px; word-break:break-all;} .container .body .contents .dcHeader .title.breadcrumb ul li:before {content:'>'; display:inline-block; margin:0 10px;} .container .body .contents .dcHeader .title.breadcrumb ul li:first-child:before {display:none;} .container .body .contents .dcHeader .tools {position:relative;} .container .body .contents .dcHeader .tools .pincodeBox {position:absolute; top:0; right:0; z-index:9; display:none;} .container .body .contents .dcHeader .tools button[aria-pressed="true"] ~ .pincodeBox {display:flex;} /* dcBody */ .container .body .contents .dcBody {margin: 0 32px; height: calc(100% - 80px)} .container .body .contents .dcBody h3, .container .body .contents .dcBody h4 {display:block; font-size:18px; color:#333; font-weight:500; margin:0 0 10px;} .container .body .contents .dcBody .detailView {height:calc(100% - 0px); background:#fff; border:1px solid #dcdcdc; box-sizing:border-box; border-radius:10px; overflow-y: overlay;} /* dcFooter */ .dcFooter {display: flex; min-height: 60px; height: auto; flex-wrap: wrap; width: 100%; position: relative; padding: 16px 40px; align-items: center; justify-content: flex-end; box-sizing: border-box;} /* .dcFooter > div {margin: 0 16px;} */ .dcFooter > div.sheparator {margin: 0;} .dcFooter > .sitemap {margin: 0 !important;} /* .dcFooter > .ui-selectmenu-menu.ui-selectmenu-open {bottom: 20px;} */ .dcFooter .lgElectronicsCrop {display: flex; align-items: center;} .dcFooter .lgElectronicsCrop dl {display: flex; height: auto; width: auto; display: flex; align-items: center; gap: 4px;} .dcFooter .lgElectronicsCrop dl dt {font-size: 12px; font-weight: 400; word-break: break-word; } .dcFooter .lgElectronicsCrop dl dd {font-size: 12px; font-weight: 500; word-break: break-word; padding: 7.5px 14px; box-sizing: border-box;} .dcFooter .market {display: flex; padding: 7.5px 14px; box-sizing: border-box;} .dcFooter .help {display: flex; padding: 7.5px 14px; box-sizing: border-box;} .dcFooter .sitemap {display: flex; padding: 7.5px 14px; box-sizing: border-box;} .dcFooter .privacyPolicy {display: flex; padding: 7.5px 14px; box-sizing: border-box;} .dcFooter .termsofUse {display: flex; padding: 7.5px 14px; box-sizing: border-box;} .dcFooter .dateTime {display: flex; align-items: center;} .dcFooter .dateTime dl {display: flex; align-items: center; gap: 6px;} .dcFooter .dateTime dl dt {display: flex; font-size: 12px; font-weight: 400; line-height: 16.8px;} .dcFooter .dateTime dl dd {display: flex; font-size: 12px; font-weight: 400; line-height: 16.8px; min-width: 180px;} .dcFooter .dateTime dl dd .selectWrap {width: 100%;} .dcFooter .sheparator {height: 16px; width: 1px; background-color: #000; opacity: 0.1;} /* contentList */ .detailView .contentList {height:100%;} .detailView .contentList .clHeader {display:flex; align-items:flex-end; justify-content:flex-start; height:68px; border-bottom:1px solid #d8d8d9;} .detailView .contentList .clHeader .tabs {display:flex;} .detailView .contentList .clHeader .tabs a {font-size:20px; display:block; padding:16px 30px; border-bottom:4px solid transparent; box-sizing:border-box;} .detailView .contentList .clHeader .tabs a:focus, .detailView .contentList .clHeader .tabs a:hover {text-decoration:underline;} .detailView .contentList .clHeader .tabs a[aria-current="true"], .detailView .contentList .clHeader .tabs a[aria-selected="true"] {border-bottom:4px solid #a50034;} .detailView .contentList .clHeader .mobileTabs {display:none;} .detailView .contentList .clHeader ~ .clBody {height:calc(100% - 70px);} .detailView .contentList .clBody {height:calc(100% - 0px);} .detailView .contentList .clBody .snb {box-shadow:none; border-right:1px solid #e7e8e8; border-radius: 20px 0 0 20px;} .detailView .contentList .clBody .snb ~ .tableBoard {width:calc(100% - 300px); height:calc(100% - 0px);} .detailView .contentList .clBody .snb ~ .tableBoard .listBody {height: calc(100% - 110px);} .detailView .contentList .clBody.sidein {display:flex;} .detailView .contentList .clBody .tableBoard {height:calc(100% - 10px); padding:20px; position:relative; box-sizing:border-box;} .detailView .contentList .clBody .gudieBox {display:flex; align-items:center;} .detailView .contentList .clBody .gudieBox::before {content:''; display:block; width:16px; height:16px; background:url(../img/icon/icon_info.svg)no-repeat; margin:0 4px;} .detailView .contentList .clBody .gudieBox p {font-size:14px; color:#000;} /* appConnectWrap */ .detailView .contentList .clBody .appConnectWrap {display:flex; height:100%; align-items:center; justify-content:center;} .detailView .contentList .clBody .appConnectWrap .appConnect {} .detailView .contentList .clBody .appConnectWrap .appConnect .appIcon {display:flex; justify-content:space-between; align-items:center; margin-bottom:70px;} .detailView .contentList .clBody .appConnectWrap .appConnect .appIcon .app {display:flex; width:180px; height:180px; line-height:30px; border-radius:20px; overflow:hidden; background:#f8f8f8; color:#fff; font-size:18px; font-weight:500; text-align:center; justify-content:center; align-items:center;} .detailView .contentList .clBody .appConnectWrap .appConnect .appIcon .app img {width:80%; height:inherit;} .detailView .contentList .clBody .appConnectWrap .appConnect .appIcon .arrow {display:block; width:76px; height:60px; background:url(../img/common/ic_cloud\ arrow.png)no-repeat;} .detailView .contentList .clBody .appConnectWrap .appConnect .appInfo {display:flex; flex-direction:column; align-items:center;} .detailView .contentList .clBody .appConnectWrap .appConnect .appInfo .desc {font-size:18px; display:block;} .detailView .contentList .clBody .appConnectWrap .appConnect .appInfo .buttonWrap {margin-top:30px;} /* detailBox */ .detailView .detailBox {height:100%; padding:40px; box-sizing:border-box; overflow:auto;} .detailView .detailBox .dbHeader {display:flex; align-items:center; justify-content:space-between;} .detailView .detailBox .dbHeader .titleBox {display:flex; align-items:center;} .detailView .detailBox .dbHeader .titleBox .title {display:flex; align-items:center;} .detailView .detailBox .dbHeader .titleBox .title h4 {font-size:18px; color:#333; font-weight:400; margin:0 10px;} .detailView .detailBox .dbHeader .titleBox .title button.return {order:-1;} .detailView .detailBox .dbHeader .tools {display:flex;} .detailView .detailBox .dbHeader .tools button {margin:0 3px;} .detailView .detailBox .dbBodyFirst {padding:30px 0; display:flex;} .detailView .detailBox .dbBodyFirst .thumbBox {width:271px; height:164px; background:#e7e7e7; border:1px solid #ccc; position:relative; display:flex; align-items:center; justify-content:center;} .detailView .detailBox .dbBodyFirst .thumbBox img, .detailView .detailBox .dbBodyFirst .thumbBox video {max-width:271px; max-height:164px;} .detailView .detailBox .dbBodyFirst .thumbBox .buttonWrap {position:absolute; bottom:0; right:0; z-index:9;} .detailView .detailBox .dbBodyFirst .thumbBox .buttonWrap button {margin:2px;} .detailView .detailBox .dbBodyFirst .tagWrap {width: calc(100% - 271px);} .detailView .detailBox .dbBodyFirst .tagWrap dl {display:flex; align-items:flex-start; margin:10px 0;} .detailView .detailBox .dbBodyFirst .tagWrap dl dt {width:100px; font-size:16px; font-weight:500; margin: 10px 20px 0 6px; text-align:right;} .detailView .detailBox .dbBodyFirst .tagWrap dl dd {display:flex; align-items:flex-start; width:calc(100% - 126px);} .detailView .detailBox .dbBodyFirst .tagWrap dl dd.tagBox {flex-direction:column;} .detailView .detailBox .dbBodyFirst .tagWrap dl dd .addTag {display:flex; align-items:center;} .detailView .detailBox .dbBodyFirst .tagWrap dl dd .addTag .inputBox {width:380px;} .detailView .detailBox .dbBodyFirst .tagWrap dl dd .tagList {margin-top:20px; display:flex; flex-flow:row wrap;} .detailView .detailBox .dbBodyFirst .tagWrap dl dd .tagList .tag {display:flex; align-items: center; border:1px solid #949494; padding:4px 10px; margin: 4px; border-radius:20px; max-width: 160px; min-width: 116px;} .detailView .detailBox .dbBodyFirst .tagWrap dl dd .tagList .tag p {display:block; width:calc(100% - 26px); word-break:break-all;} .detailView .detailBox .dbBodyFirst .tagWrap dl dd .tagList .tag .tagRemove {margin-left:10px;} .detailView .detailBox .dbBodyFirst .tagWrap dl dd .breadcrumb {display:flex; align-items: center;} .detailView .detailBox .dbBodyFirst .tagWrap dl dd .breadcrumb ul {display:flex; padding:0 10px;} .detailView .detailBox .dbBodyFirst .tagWrap dl dd .breadcrumb ul li {display:block; font-size:16px; color:#333; font-weight:300; letter-spacing:-0.6px; word-break:break-all;} .detailView .detailBox .dbBodyFirst .tagWrap dl dd .breadcrumb ul li:before {content:'>'; display:inline-block; margin:0 10px;} .detailView .detailBox .dbBodyFirst .tagWrap dl dd .breadcrumb ul li:first-child:before {display:none;} .detailView .detailBox .dbBody {} .detailView .detailBox .dbBody .tabs {display:flex; border-bottom:1px solid #e0e0e1; margin-bottom:20px;} .detailView .detailBox .dbBody .tabs a {font-size:20px; display:block; padding:16px 30px; border-bottom:4px solid transparent; box-sizing:border-box;} .detailView .detailBox .dbBody .tabs a:focus, .detailView .detailBox .dbBody .tabs a:hover {text-decoration:underline;} .detailView .detailBox .dbBody .tabs a[aria-current="true"], .detailView .detailBox .dbBody .tabs a[aria-selected="true"] {border-bottom:4px solid #a50034;} .detailView .detailBox .dbBody .mobileTabs {margin-bottom:20px; display:none;} .detailView .detailBox .dbBody .mobileTabs label {position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; border:0; clip:rect(0,0,0,0);} /* dbinfo */ .detailView .detailBox .dbBody .dbinfo {} .detailView .detailBox .dbBody .dbinfo .group {margin-bottom:50px;} .detailView .detailBox .dbBody .dbinfo .group h5 {font-size:18px; color:#222; font-weight:500;} .detailView .detailBox .dbBody .dbinfo .group .dlBox {} .detailView .detailBox .dbBody .dbinfo .group .dlBox dl {display:flex; align-items:center; margin:26px 0;} .detailView .detailBox .dbBody .dbinfo .group .dlBox dl dt {font-size:16px; color:#555555; width:190px; text-align:right; padding-right:40px; box-sizing:border-box;} .detailView .detailBox .dbBody .dbinfo .group .dlBox dl dd {width:calc(100% - 170px);} .detailView .detailBox .dbBody .dbinfo .group .dlBox dl dd .selectWrap {width:280px;} .detailView .detailBox .dbBody .dbinfo .group .dlBox dl dd .sliderWrap {display:flex; align-items:center;} .detailView .detailBox .dbBody .dbinfo .group .dlBox dl dd .sliderWrap .sliderBox {display:flex; align-items:center;} .detailView .detailBox .dbBody .dbinfo .group .dlBox dl dd .sliderWrap .sliderBox .ui-slider.ui-widget-content {width:270px; margin:0 14px;} .detailView .detailBox .dbBody .dbinfo .group .dlBox dl dd .sliderWrap .sliderBox .button.circle.minus {order:-1;} .detailView .detailBox .dbBody .dbinfo .group .dlBox dl dd .sliderWrap .text {width:auto; margin:0 10px; font-size:14px; text-align:center;} .detailView .detailBox .dbBody .dbinfo .group .dlBox dl dd .sliderWrap .text em {margin:0 10px;} .detailView .detailBox .dbBody .dbinfo .group .dlBox dl dd .progressBox {display:flex; align-items:center;} .detailView .detailBox .dbBody .dbinfo .group .dlBox dl dd .progressBox .progress {width:290px; margin-right:10px;} .detailView .detailBox .dbBody .dbinfo .group .dlBox dl dd .dateWrap {display:flex; align-items:center;} .detailView .detailBox .dbBody .dbinfo .group .dlBox dl dd .dateWrap .date {} .detailView .detailBox .dbBody .dbinfo .group .dlBox dl dd .dateWrap .btnRefresh {margin:0 10px;} .detailView .detailBox .dbBody .dbinfo .group .gridWrap {width:890px;} .detailView .detailBox .dbBody .dbinfo .group .gridWrap .titleWrap {display:flex; align-items:center; justify-content:space-between;} .detailView .detailBox .dbBody .dbinfo .group .gridWrap .title {display:block; font-size:16px; color:#555555; margin:26px 0;} .detailView .detailBox .dbBody .dbinfo .group .gridWrap .addonPlus {display:flex; align-items:center; justify-content:center; border:1px dashed #d7d7d7; background:#fbfbfb; height:170px;} .detailView .detailBox .dbBody .dbinfo .group .gridWrap .buttonWrap {text-align:center; margin:40px 0;} .detailView .detailBox .dbBody .dbinfo .calendarWrap {} .detailView .detailBox .dbBody .dbinfo .calendarWrap .lastUpdate {text-align:right; position:relative; margin-top:-10px; margin-bottom:10px; font-size:16px;} /* sitemap */ /* .detailView .sitemap {margin:60px;} .detailView .sitemap .title {font-size:18px; border-bottom:2px solid #999; padding-bottom:16px; margin-bottom:20px;} .detailView .sitemap .catagory {display:flex; flex-flow:row wrap; justify-content:space-between;} .detailView .sitemap .catagory a {display:block; font-size:22px; width:30%; border-bottom:1px solid #e9e9e9; padding:20px 0; margin-bottom:20px;} */ /* tableBoard */ .container .body .contents .roundBox {height:100%; border:1px solid #dcdcdc; padding:20px; border-radius:10px; background:#fff; box-sizing:border-box; overflow-y:auto; overflow-x:hidden; position:relative;} .container .body .contents .tableBoard {height:calc(100% - 0px); position: relative;} .container .body .contents .tableBoard .tbHeader {} .container .body .contents .tableBoard .tbHeader .toolBox {margin-bottom:10px;} .container .body .contents .tableBoard .tbHeader .toolBox .title {display:flex; align-items: center;} .container .body .contents .tableBoard .tbHeader .toolBox .title h3 {margin: 0 10px; font-size:22px; line-height:30px; letter-spacing:-0.5px;} .container .body .contents .tableBoard .tbHeader .toolBox .tools {display:flex; justify-content:space-between; align-items:center; flex-flow:row wrap;} .container .body .contents .tableBoard .tbHeader .toolBox .tools:first-child {width:40%;} .container .body .contents .tableBoard .tbHeader .toolBox .tools:last-child {justify-content:flex-end; width:60%;} .container .body .contents .tableBoard .tbHeader .toolBox .tools .hiddenTools {display:none; align-items:center;} .container .body .contents .tableBoard .tbHeader .toolBox .tools .hiddenTools .breadcrumb {display:flex; align-items: center;} .container .body .contents .tableBoard .tbHeader .toolBox .tools .hiddenTools .breadcrumb ul {padding:0 6px;} .container .body .contents .tableBoard .tbHeader .toolBox .tools .hiddenTools .breadcrumb ul li {display:contents; vertical-align:middle; font-size:16px; color:#333; font-weight:400; letter-spacing:-0.6px; word-break:break-all;} .container .body .contents .tableBoard .tbHeader .toolBox .tools .hiddenTools .breadcrumb ul li:before {content:'>'; display:inline-block; margin:0 10px;} .container .body .contents .tableBoard .tbHeader .toolBox .tools .hiddenTools .breadcrumb ul li:first-child:before {display:none;} .container .body .contents .tableBoard .tbHeader .toolBox .tools .selectWrap {width:150px;} .container .body .contents .tableBoard .tbHeader .toolBox .tools .inputWrap {margin:2px 5px;} .container .body .contents .tableBoard .tbHeader .toolBox .tools .button {margin:2px 5px;} .container .body .contents .tableBoard .tbHeader .toolBox .tools .button:last-child {margin-right:0;} .container .body .contents .tableBoard .tbBody {height:calc(100% - 90px); position:relative;} /* checkSelectWrap */ .checkSelectWrap {display:none; align-items:center; justify-content:space-between; background:#333438; padding:10px; box-sizing:border-box; position:absolute; top:-86px; left:0; z-index:9; width:calc(100% - 0px); border-radius:10px;} .checkSelectWrap.active {display:flex;} .checkSelectWrap .tools {display:flex; align-items:flex-start; flex-direction:column; width:100%;} .checkSelectWrap .tools .selectNum {font-size:16px; color:#fff; margin:0 10px 10px;} .checkSelectWrap .tools .buttonWrap {display:flex; flex-flow:row wrap; width:100%;} .checkSelectWrap .tools .buttonWrap button {margin:2px 5px;} /* ----------------------------------------------------------------------------------------------------- Filter ----------------------------------------------------------------------------------------------------- */ .filterWrap {position:fixed; top:56px; right:0; bottom:0; width:292px; height:100%; background:#333438; z-index:80; display:flex; flex-direction:column; display:none;} .filterWrap.active {display:flex; z-index:99;} .filterWrap .filterHeader {display:flex; flex-direction:row; align-items:center; justify-content:space-between; padding:20px; box-sizing:border-box; order:1;} .filterWrap .filterHeader h2 {color:#fff; font-size:18px; font-weight:500;} .filterWrap .filterBody {border-top:1px solid #858588; padding:22px; box-sizing:border-box; height:calc(100% - 187px); overflow:auto; order:3;} .filterWrap .filterBody fieldset {margin-bottom:24px;} .filterWrap .filterBody fieldset legend {display:block; font-size:18px; line-height:24px; color:#fff; font-weight:600; margin-bottom:10px;} .filterWrap .filterBody fieldset ul {} .filterWrap .filterBody fieldset ul li {display:block; margin:6px 0;} .filterWrap .filterBody fieldset ul li .opt label:before {background:#fff;} .filterWrap .filterBody fieldset ul li .opt input[type=checkbox]:indeterminate+label:before {background:#fff;} .filterWrap .filterBody fieldset ul li .opt input[type=checkbox]:indeterminate+label:after {background:url(../img/icon/icon_checkbox_partial.svg)no-repeat; filter:grayscale(0) brightness(1);} .filterWrap .filterBody fieldset ul li ul {margin-left:20px; margin-bottom:20px;} .filterWrap .filterButton {display:flex; justify-content:center; padding:0 0 20px; order:2;} .filterWrap .filterButton button {margin:0 4px; min-width: 120px;} .filterWrap.active ~ .filterDim {display:block;} .filterDim {display:none; position:fixed; z-index:98; top:0px; left:0px; right:0px; bottom:0px; justify-content:center; align-items:center; background:rgb(0 0 0 / 20%);} /* contents */ .container {height:100%; background:transparent; position:relative;} .container.homeContainer {height:auto !important;} /* gnbWrap */ .container .body {height:calc(100% - 131px); overflow:hidden; position: unset; display: flex; flex-direction: column;} .container .body.customBody {height:calc(100% - 113px);flex-direction: column;} .container .body.customBody.homeContainerWrappe {height: calc(100% - 80px);} .container .body.customBody.layoutTwoWrapper {height: calc(100% - 152px);} .homePage .container .body {height: auto;} .container .body.afterSignIn {background:#fff;} /* container */ .container .body .contents {display:block; flex-grow:1; height:100%; z-index:4;} .container .body .contents.fb_xy {display:flex;} /* container > contentBody */ .container .body .contents {height:calc(100% - 0px);} .container .body main.contents {height:calc(100% - 60px);} /* .appDetails new */ .container .body .contents.appDetails {margin: 0; padding: 0 32px; width: calc(100% - 64px);} .container .body .contents.appDetails .dcHeader {padding: 24px 0;} .container .body .contents.appDetails .contentBox {height: calc(100% - 80px); width: 100%; display: flex; flex-direction: column !important;} .container .body .contents.appDetails .contentBox > .appName.appNameText {display: flex; width: 100%; height: auto; padding: 4px 4px 24px 4px; box-sizing: border-box; gap: 8px; align-items: center;} .container .body .contents.appDetails .contentBox > .appName.appNameText strong {font-size: 20px; font-weight: 500; color: #333;} /* .container .body .contents.unapprovedAppDetails .contentBox {margin: 0 20px; width: calc(100% - 40px);} */ /* .container .body .contents.appDetails .contentBox {width: calc(100% - 40px);} */ .container .body .contents .contentBox {padding:20px; height:calc(100% - 60px); background:#fff; border:1px solid #dcdcdc; border-radius:13px; box-sizing:border-box; overflow-y: scroll; width:calc(100%); align-items: flex-start; display: -webkit-flex; -webkit-align-items: flex-start;} .container .body .contents .contentBox.solutionNameBox {width: calc(100% - 40px); margin: 0 20px;} /* afterBox */ .container .body .contents .afterBox {width:780px;} .container .body .contents .afterBox .buttonWrap {margin-bottom:70px;} .container .body .contents .afterBox .buttonWrap button {margin:6px;} .container .body .contents .afterBox .columnWrap {display:flex; justify-content: center;} .container .body .contents .afterBox .columnWrap .column {border:1px solid #dcdcdc; border-radius:6px; margin:10px; max-width:370px; overflow:hidden;} .container .body .contents .afterBox .columnWrap .column::before {content:""; display:block; width:100%; height:208px;} .container .body .contents .afterBox .columnWrap .lgProCentric::before {background:url(../img/icon/bul_procentric.png)#f7feff no-repeat center;} .container .body .contents .afterBox .columnWrap .superSignCloud::before {background:url(../img/icon/bul_supersign.png)#f7feff no-repeat center;} .container .body .contents .afterBox .columnWrap .column .desc {margin:30px 40px; text-align:center;} .container .body .contents .afterBox .columnWrap .column .desc strong {display:block; font-size:22px; font-weight:600; margin-bottom:20px;} .container .body .contents .afterBox .columnWrap .column .desc p {font-size:16px; line-height:24px; word-break:break-all;} .container .body .contents .afterBox .columnWrap .column .buttonBox {margin:20px 0; text-align:center; display:flex; justify-content:center;} .container .body .contents .afterBox .columnWrap .column .buttonBox button {margin:0 4px;} /* noDataWrap */ .noDataWrap {height:calc(100% - 0px); display:flex; display:-webkit-flex; justify-content:center;align-items:center; -webkit-justify-content:center; -webkit-align-items:center;} .noDataWrap .noDataBox {text-align:center;} .noDataWrap .noDataBox .nodataText {margin:30px 0 40px 0;} .noDataWrap .noDataBox .nodataText p {font-size:18px; line-height:24px; color:#777;} .noDataWrap .noDataBox button.big {font-size:18px;} .noDataWrap .noDataBox::before {content:''; display:inline-block; background-size:cover !important;} .noDataWrap .visualType_a::before {width:237px; height:146px; background:url(../img/page/visual_nodata_01.svg)no-repeat;} .noDataWrap .visualType_b::before {width:185px; height:119px; background:url(../img/page/visual_nodata_02.svg)no-repeat;} .noDataWrap .visualType_c::before {width:245px; height:146px; background:url(../img/page/visual_nodata_03.svg)no-repeat;} /* dcBodyDetail */ .container .body .contents .contentBox .detailView {height:calc(100% - 40px); width: calc(100%);} .container .body .contents .contentBox .detailView .detailVeiwHeader {display:flex; align-items: center; justify-content:flex-start; border-bottom:1px solid #e0e0e1; box-sizing:border-box; gap: 32px; position:relative; margin: 0 0 0 34px; padding: 0 0 40px 0;} /* .container .body .contents .contentBox .detailView .detailVeiwHeader .infoBox {padding-left:64px; box-sizing: border-box;} */ .container .body .contents .contentBox .detailView .detailVeiwHeader .infoBox .thumbBox {width:120px; min-width: 120px; height:120px; border-radius:10px; overflow:hidden; background: #E9F2F2; position: relative; border-radius: 20px; display: flex; align-items: center; justify-content: center;} .container .body .contents .contentBox .detailView .detailVeiwHeader .infoBox .icon img {width:80px; height:80px;} .container .body .contents .contentBox .detailView .detailVeiwHeader .appName.appNameText {display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; width: calc(100% - 287px);} .container .body .contents .contentBox .detailView .detailVeiwHeader .appName.appNameText .appNameBox {display: flex; flex-direction: column; gap: 12px;} .container .body .contents .contentBox .detailView .detailVeiwHeader .appName.appNameText .tagBox {display: flex; flex-direction: row; gap: 8px; flex-wrap: wrap;} .container .body .contents .contentBox .detailView .detailVeiwHeader .appName.appNameText .tagBox .tag {height: auto; width: auto; border-radius: 4px; border: 1px solid #DADDE2; padding: 3.5px 6px 3.5px 26px; box-sizing: border-box; gap: 4px; position: relative;} /* .container .body .contents .contentBox .detailView .detailVeiwHeader .appName.appNameText .tagBox .tag .tagIconBox {height: 16px; width: 16px; border-radius: 4px; position: relative;} */ .container .body .contents .contentBox .detailView .detailVeiwHeader .appName.appNameText .tagBox .tag.supersignCloud::after {background-size:cover !important; content: ""; height: 16px; width: 16px; position: absolute; background: url(../img/common/ic_supersign.png) no-repeat; background-position: center; z-index: 1; left: 6px;} .container .body .contents .contentBox .detailView .detailVeiwHeader .appName.appNameText .tagBox .tag.stayCloud::after {background-size:cover!important; content: ""; height: 16px; width: 16px; position: absolute; background: url(../img/common/ic_procentric_stay.png) no-repeat; background-position: center; z-index: 1; left: 6px;} .container .body .contents .contentBox .detailView .detailVeiwHeader .appName.appNameText .tagBox .tag.procentricCloud::after {background-size:cover!important; content: ""; height: 16px; width: 16px; position: absolute; background: url(../img/common/ic_procentric_cloud.png) no-repeat; background-position: center; z-index: 1; left: 6px;} .container .body .contents .contentBox .detailView .detailVeiwHeader .appName h4 {font-size:26px; font-weight:500; line-height: 1; word-break: break-all; display: inline-flex;} .container .body .contents .contentBox .detailView .detailVeiwHeader .appName .appNameBox strong {font-size:32px; font-weight:700; line-height: 1; word-break: break-all; display: inline-flex;} .container .body .contents .contentBox .detailView .detailVeiwHeader .appName .installStatus {display: flex; justify-content: flex-start; gap: 0 8px;} .container .body .contents .contentBox .detailView .detailVeiwHeader .appName .installStatus p {display: flex; font-size: 14px; font-weight: 700; word-break: break-word;} .container .body .contents .contentBox .detailView .detailVeiwHeader .appName .installStatus .checkMark {height: 18px; width: 18px; border-radius: 50%; position: relative; background: #ecfdf3;} .container .body .contents .contentBox .detailView .detailVeiwHeader .appName .installStatus .checkMark::before {content: ""; position: absolute; background: url(../img/icon/ic_check.svg) no-repeat; background-position: center; background-size: 18px;margin-right: 8px; height: 18px; width: 18px;} .container .body .contents .contentBox .detailView .detailVeiwHeader .appName .info {margin-top:20px;} .container .body .contents .contentBox .detailView .detailVeiwHeader .appName .info dl {display:flex; font-size:14px; font-weight:500; word-break: break-all;} .container .body .contents .contentBox .detailView .detailVeiwHeader .appName .info dl dt {display:flex; align-items:center;} .container .body .contents .contentBox .detailView .detailVeiwHeader .appName .info dl dt:after {content:':'; margin:0 6px;} .container .body .contents .contentBox .detailView .detailVeiwHeader .appName .info dl dd {} .container .body .contents .contentBox .detailView .detailVeiwHeader .return {position:absolute; top:0; left:0; z-index:1; height: 42px !important; width: 42px!important;} /* detailVeiwBody */ .container .body .contents .contentBox .detailView .detailVeiwBody {padding: 0 0 0 34px;} .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo {margin:30px 0 30px 135px;} .container .body .appDetails .contentBox .detailView .detailVeiwBody .moreBoxInfo {margin:30px 0 30px 100px;} .container .body .appDetails .contentBox .detailView .detailVeiwBody .moreBoxInfo .thumb {margin: 40px 0 0 0; padding: 0 0 32px 0;} .container .body .appDetails .contentBox .detailView .detailVeiwBody .moreBoxInfo .thumb .carousal {position: absolute; bottom: 0; width: 100%; display: flex; align-items: center; gap: 0 4px; justify-content: center;} .container .body .appDetails .contentBox .detailView .detailVeiwBody .moreBoxInfo .thumb .carousal span {background: #354056; height: 6px; width: 6px; border-radius: 50%; opacity: 0.3} .container .body .appDetails .contentBox .detailView .detailVeiwBody .moreBoxInfo .thumb .carousal span.active {opacity: 1;} .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo .thumb {display:flex; align-items: center; width: calc(100% - 60px); justify-content: flex-start; gap: 0 20px; position: relative; overflow: hidden;} .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo .thumb img {width:452px; height:240px; margin: 0;} .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo .thumb .imagePreviousWrap{height:auto; width:auto; display: flex; align-items: center;position: absolute; left: 16px;} .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo .thumb .imagePreviousWrap button {transform: rotate(180deg); height: 32px; width: 32px;} /* .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo .thumb .imagePreviousWrap button:before{content:"";background-position: center; background-repeat: no-repeat;background-image: url(../img/icon/detailview_btn_arrow_r.svg); width:14px; height:22px; display:block;} */ .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo .thumb .imageNextWrap{height:auto; width:auto; display: flex; align-items: center; position: absolute; right: 16px;} .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo .thumb .imageNextWrap button{box-shadow: none; font-size: 0px; height: 32px; width: 32px; transform: translate(180deg);} /* .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo .thumb .imageNextWrap button:before{content:"";background-position: center; background-repeat: no-repeat;background-image: url(../img/icon/detailview_btn_arrow_r.svg); width:14px; height:22px; display:block;} */ .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo .thumb img.current {display:block} .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo dl {font-size:16px; display:flex; margin: 0 0 10px 0; word-break: break-all;} .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo dl dt {display:flex; align-items:center; word-break: break-all; font-weight: 500;} .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo dl dd {} .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo p.version {font-size: 16px; display: flex; margin: 26px 0; word-break: break-word;} .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo p.created {font-size: 16px; display: flex; margin: 26px 0; word-break: break-word;} /* .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo dl dt::before {content:""; display:block; width:3px; height:3px; background:#000; margin:0 4px;} */ .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo div.listDivision {display:flex; align-items:center; word-break: break-word; margin-bottom: 20px;} .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo div.listDivision p {display: flex; align-items: flex-start; font-size: 16px; line-height: 1.2; font-weight: 500;} /* .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo div.listDivision p::before {content:""; display: inline-flex; width:3px; height:3px; background:#000; margin:8px 4px; position: relative;} */ .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo dl.desc {flex-direction:column;} .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo dl.desc dt {word-break: break-all; line-height: 16px;} .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo dl.desc dd {margin:10px; word-break: break-all; line-height: 1.2;} /* .bizmelonBig {background: url(../img/common/detailview_logo_icon_biz.svg) no-repeat;} .wantreezmusicBig {background: url(../img/common/detailview_logo_icon_bgm.svg) no-repeat;} .dsmenuBig {background: url(../img/common/detailview_logo_icon_menu.svg) no-repeat;} .postermywallBig {background: url(../img/common/detailview_logo_icon_pmw.svg) no-repeat;} .artplayerBig {background: url(../img/common/detailview_logo_icon_art.svg) no-repeat;} .travelBig {background: url(../img/common/detailview_logo_icon_travel.svg) no-repeat;} .flightBig {background: url(../img/common/detailview_logo_icon_flight.svg) no-repeat;} .voiceBig {background: url(../img/common/detailview_logo_icon_voice.svg) no-repeat;} .weatherBig {background: url(../img/common/detailview_logo_icon_weather.svg) no-repeat;} .epgBig {background: url(../img/common/detailview_logo_icon_epg.svg) no-repeat;} .pmsBig {background: url(../img/common/detailview_logo_icon_pms.svg) no-repeat;} .qmsBig {background: url(../img/common/detailview_logo_icon_qms.svg) no-repeat;} .iotBig {background: url(../img/common/detailview_logo_icon_iot.svg) no-repeat;} .netflixBig {background: url(../img/common/detailview_logo_icon_netflix.svg) no-repeat;} .channelBig {background: url(../img/common/detailview_logo_icon_ch_n.svg) no-repeat;} .channelBig.disabled {background: url(../img/common/detailview_logo_icon_ch_d.svg) no-repeat;} .feedBig {background: url(../img/common/detailview_logo_icon_feed.svg) no-repeat;} .templateBig {background: url(../img/common/detailview_logo_icon_template.svg) no-repeat;} */ .container .body .contents .contentBox .detailView .detailVeiwHeader .infoBox .icon.service.bigTravel {background: url(../img/icon/ic_travel_service.svg) no-repeat; height: 80px; width: 80px; background-size: contain;} .container .body .contents .contentBox .detailView .detailVeiwHeader .infoBox .icon.service.bigFlight {background: url(../img/icon/ic_flight_service.svg) no-repeat; height: 80px; width: 80px; background-size: contain;} .container .body .contents .contentBox .detailView .detailVeiwHeader .infoBox .icon.service.bigWeather {background: url(../img/icon/ic_weather_service.svg) no-repeat; height: 80px; width: 80px; background-size: contain;} .container .body .contents .contentBox .detailView .detailVeiwHeader .infoBox .icon.service.bigVoice {background: url(../img/icon/ic_voice_service.svg) no-repeat; height: 80px; width: 80px; background-size: contain;} .container .body .contents .contentBox .detailView .detailVeiwHeader .infoBox .icon.service.bigEpg {background: url(../img/icon/ic_epg_service.svg) no-repeat; height: 80px; width: 80px; background-size: contain;} .container .body .contents .contentBox .detailView .detailVeiwHeader .infoBox .icon.service.bigDSmenu {background: url(../img/icon/ic_DSmenu_service.svg) no-repeat; height: 80px; width: 80px; background-size: contain;} .container .body .contents .contentBox .detailView .detailVeiwHeader .infoBox .icon.service.bigFeed {background: url(../img/icon/ic_feed_service.svg) no-repeat; height: 80px; width: 80px; background-size: contain;} .container .body .contents .contentBox .detailView .detailVeiwHeader .infoBox .icon.service.bigChannel {background: url(../img/icon/ic_channel_service.svg) no-repeat; height: 80px; width: 80px; background-size: contain;} .container .body .contents .contentBox .detailView .detailVeiwHeader .infoBox .icon.service.bigBizMelon {background: url(../img/icon/ic_biz_service.svg) no-repeat; height: 80px; width: 80px; background-size: contain;} .container .body .contents .contentBox .detailView .detailVeiwHeader .infoBox .icon.service.bigBGM {background: url(../img/icon/ic_bgm_service.svg) no-repeat; height: 80px; width: 80px; background-size: contain;} .container .body .contents .contentBox .detailView .detailVeiwHeader .infoBox .icon.service.bigPMW {background: url(../img/icon/ic_pmw_service.svg) no-repeat; height: 80px; width: 80px; background-size: contain;} .container .body .contents .contentBox .detailView .detailVeiwHeader .infoBox .icon.interface.bigPMS {background: url(../img/icon/ic_pms_int.svg) no-repeat; height: 80px; width: 80px; background-size: contain;} .container .body .contents .contentBox .detailView .detailVeiwHeader .infoBox .icon.interface.bigIOT {background: url(../img/icon/ic_iot_int.svg) no-repeat; height: 80px; width: 80px; background-size: contain;} .container .body .contents .contentBox .detailView .detailVeiwHeader .infoBox .icon.interface.bigQMS {background: url(../img/icon/ic_qms_int.svg) no-repeat; height: 80px; width: 80px; background-size: contain;} .container .body .contents .contentBox .detailView .detailVeiwHeader .infoBox .icon.interface.bigNetflix {background: url(../img/icon/ic_netflix_int.svg) no-repeat; height: 80px; width: 80px; background-size: contain;} .container .body .contents .contentBox .detailView .detailVeiwHeader .infoBox .icon .container .body .contents .contentBox .detailView .detailVeiwHeader .infoBox .icon.art.bigArt {background: url(../img/icon/ic_art_art.svg) no-repeat; height: 80px; width: 80px; background-size: contain;} .container .body .contents .contentBox .detailView .detailVeiwHeader .infoBox .icon.temp.bigTemp {background: url(../img/icon/ic_template_temp.svg) no-repeat; height: 80px; width: 80px; background-size: contain;} /* VeiwHeader */ .container .body .contents .contentBox .detailView .VeiwHeader {display:flex; align-items:center; justify-content:space-between; margin:30px 30px 0; border-bottom:2px solid #e0e0e1; box-sizing:border-box; position:relative; padding-bottom:30px;} .container .body .contents .contentBox .detailView .VeiwHeader .title {display:flex; align-items:center;} .container .body .contents .contentBox .detailView .VeiwHeader .title h2 {display:block; font-size:20px; font-weight:600; margin:0 30px;} .container .body .contents .contentBox .detailView .VeiwHeader .title .circle.return {order:-1;} .container .body .contents .contentBox .detailView .VeiwHeader .tools {display:flex;} .container .body .contents .contentBox .detailView .VeiwHeader .tools button {margin:0 2px; padding:0 20px;} /* VeiwBody */ .container .body .contents .contentBox .detailView .VeiwBody {height:calc(100% - 79px); margin:0 30px;} /* body > snb */ .container .body .contents .contentBox .detailView .VeiwBody .snb {width:320px; min-width:320px; height:calc(100% - 2px); border-right:1px solid #e0e0e1; box-sizing:border-box; background:#FFF; overflow:hidden;} .container .body .contents .contentBox .detailView .VeiwBody .snb .snbHeader {display:none; align-items:center; height:60px;} .container .body .contents .contentBox .detailView .VeiwBody .snb .snbHeader .backTitle {display:flex; align-items:center;} .container .body .contents .contentBox .detailView .VeiwBody .snb .snbHeader .backTitle h3 {display:block; margin:0 10px; font-size:22px; font-weight:bold;} .container .body .contents .contentBox .detailView .VeiwBody .snb .title, .container .body .contents .contentBox .detailView .VeiwBody .snb .total {display:block; padding:0 34px; height:54px; line-height:54px; font-size:16px; border-bottom:1px solid #e5e5e5; box-sizing:border-box;} .container .body .contents .contentBox .detailView .VeiwBody .snb .title.hr {padding:0 20px;} .container .body .contents .contentBox .detailView .VeiwBody .snb .title strong, .container .body .contents .contentBox .detailView .VeiwBody .snb .total strong {font-size:15px; font-weight:500;} .container .body .contents .contentBox .detailView .VeiwBody .snb .title.hr strong {font-size:14px; font-weight:400;} .container .body .contents .contentBox .detailView .VeiwBody .snb .title.hr h4 {display:block; height:54px; line-height:54px; font-size:14px; font-weight:400; border-bottom:1px solid #e5e5e5; box-sizing:border-box;} .container .body .contents .contentBox .detailView .VeiwBody .snb .selectUser {} .container .body .contents .contentBox .detailView .VeiwBody .snb .selectUser ul {} .container .body .contents .contentBox .detailView .VeiwBody .snb .selectUser ul li {position:relative;} .container .body .contents .contentBox .detailView .VeiwBody .snb .selectUser ul li a {display:block; font-size:16px; font-weight:500; padding:0 34px; box-sizing:border-box; color:#383838; position:relative; border-bottom:1px solid #e8e8e8; height:54px; line-height:54px; outline-offset: -2px;} .container .body .contents .contentBox .detailView .VeiwBody .snb .selectUser ul li.active {} .container .body .contents .contentBox .detailView .VeiwBody .snb .selectUser ul li.active::before {content:''; display:block; width:10px; height:10px; background:url(../img/icon/icon_check.svg)no-repeat; position:absolute; top:50%; left:14px; transform:translate(0, -50%);} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList {height:calc(100% - 168px); overflow:auto;} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList.licenseManagement {height:calc(100% - 60px); overflow:auto;} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList ul {} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList ul li {display:block;} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList ul li a {display:block; font-size:14px; font-weight:500; box-sizing:border-box; color:#383838; position:relative; margin:0 34px; outline-offset:-2px;} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList ul li a:hover {text-decoration:underline; text-underline-position:under;} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList ul li a:active {} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList ul li a[data-dday]:after {content:attr(data-dday); display:block; width:50px; height:20px; line-height:20px; background:#ff0404; text-align:center; color:#fff; border-radius:2px; font-size:11px; font-weight:bold; position:absolute; top:50%; right:-30px; transform:translate(0, -50%);} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList ul li a[data-dday] p {width:calc(100% - 32px);} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList ul li a p {display:block; padding:12px 0; word-break:break-all;} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList ul li a p em {font-style:normal; color:#a50034;} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList ul li ul li a p {padding:12px 6px;} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList > ul > li.active {background:#fff;} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList > ul > li.group {} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList > ul > li.group .groupLink {display:flex; align-items:center; justify-content:space-between; background:#fff; border-bottom:1px solid #e5e5e5; position:relative;} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList > ul > li.group .groupLink a {font-size:16px; font-weight:500; margin:0; padding:0 34px; width:calc(100% - 40px);} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList > ul > li.group.active > .groupLink > a {color:#a50034; text-decoration:underline;} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList > ul > li.group > a { } .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList > ul > li.group > a:hover {background:#efefef; text-decoration:underline;} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList > ul > li.group > a:active {color:#a50034;} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList > ul > li.group > a > p {border-bottom:0;} /* .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList > ul > li.group > a:after {content:''; display:block; position:absolute; top:14px; right:14px; width:16px; height:16px; background:url(../img/icon/icon_arrowDown.svg) no-repeat center;} */ /* .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList > ul > li.group.active > a:after {transform:rotate(180deg);} */ .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList > ul > li.group ul {display:none; /*animation: ShowMenu 0.3s;*/} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList > ul > li.group ul li {position:relative;} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList > ul > li.group ul li a {border-bottom:1px solid #e8e8e8;} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList > ul > li.group ul li.active {outline:1px solid #a50034; outline-offset:-2px; background:#e4e4e4;} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList > ul > li.group.active .groupLink::before {content:''; display:block; width:10px; height:10px; background:url(../img/icon/icon_check.svg)no-repeat; position:absolute; top:50%; left:14px; transform:translate(0, -50%);} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList > ul > li.group.selected .groupLink .clearArrow {transform:rotate(90deg);} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList > ul > li.group.selected ul {display:block;} .container .body .contents .contentBox .detailView .VeiwBody .snb .groupList > ul > li.group.selected ul li.active::before {content:''; display:block; width:10px; height:10px; background:url(../img/icon/icon_check.svg)no-repeat; position:absolute; top:50%; left:20px; transform:translate(0, -50%);} @keyframes ShowMenu { 0% {opacity:0; transform:translate3d(-50px, 0, 0);} 100% {opacity:1; transform:translate3d(0, 0, 0);} } .container .body .contents .contentBox .detailView .VeiwBody .viewDetail {margin:30px 0 0 30px; width:calc(100% - 360px); height:calc(100% - 60px);} .container .body .contents .contentBox .detailView .VeiwBody .viewDetail .titleBox {display:none; align-items:center; margin-bottom:10px;} .container .body .contents .contentBox .detailView .VeiwBody .viewDetail .titleBox h3 {font-size:18px; font-weight:600; margin:0 10px;} /* licenseBox */ .licenseBox {display:flex; flex-direction:column; align-items:center; background:#f8f8f8; padding:20px; box-sizing:border-box; margin-bottom:30px;} .licenseBox .statusWrap {display:flex; justify-content:center; flex-flow: row wrap; width: 700px; text-align:center; margin: 30px 0 40px 0;} .licenseBox .statusWrap dl {width: 232px; border-left:1px solid #e3e3e3;} .licenseBox .statusWrap dl:first-child {border-left:0;} .licenseBox .statusWrap dl:nth-child(2) {color: #4780a4;} .licenseBox .statusWrap dl dt {display:block; font-size:16px; word-break: break-word; margin-bottom:10px;} .licenseBox .statusWrap dl dd {display:block; font-size:14px;} .licenseBox .statusWrap dl dd strong {font-size:30px; margin:0 6px;} .licenseBox .rangeWrap {width:calc(100% - 30%); margin-bottom: 30px;} .licenseBox .rangeWrap .range {} .licenseBox .rangeWrap .range .rangeText {font-size:14px; margin-bottom:10px;} .licenseBox .rangeWrap .range .rangeText em {font-style:normal;} .licenseBox .rangeWrap .range .progressBar {height:25px; background:#d5e0e7; border-radius:2px;} .licenseBox .rangeWrap .range .progressBar .progress {height:inherit; background:#4780a4; border-radius:2px;} .licenseManagementTableWrap {height: 33px; margin-bottom: 10px;} .licenseManagementTableWrap h4 {font-size: 18px; font-weight: 500;} .licenseManagementTableWrap button {height: 33px;} /* tableBoard */ .container .body .contents .contentBox .detailView .VeiwBody .viewDetail .tableBoard {height:100%; display:flex; flex-direction:column;} .container .body .contents .contentBox .detailView .VeiwBody .viewDetail .tableBoard .tbHeader {display:flex; justify-content:space-between; order:1;} .container .body .contents .contentBox .detailView .VeiwBody .viewDetail .tableBoard .tbHeader .title {display:flex; align-items: center; visibility:hidden;} .container .body .contents .contentBox .detailView .VeiwBody .viewDetail .tableBoard .tbHeader .title h3 {font-size:18px; font-weight:600; margin:0 10px;} .container .body .contents .contentBox .detailView .VeiwBody .viewDetail .tableBoard .tbHeader .tools {width:230px;} .container .body .contents .contentBox .detailView .VeiwBody .viewDetail .tableBoard .boardTools {margin:10px 0; order:2;} .container .body .contents .contentBox .detailView .VeiwBody .viewDetail .tableBoard .boardTools .total {font-size:16px; color:#333333;} .container .body .contents .contentBox .detailView .VeiwBody .viewDetail .tableBoard .boardTools .selected {font-size:16px;} .container .body .contents .contentBox .detailView .VeiwBody .viewDetail .tableBoard .boardTools .selected em {font-style:normal; color:#a50034;} .container .body .contents .contentBox .detailView .VeiwBody .viewDetail .tableBoard .tbBody {height:calc(100% - 83px); order:3;} .container .body .contents .contentBox .detailView .VeiwBody .viewDetail .tableBoard .tbBody .tableWrap {height:calc(100% - 0px); overflow: auto;} /* siteManagement */ .container .body .contents .contentBox .detailView .VeiwBody .siteManagement {border:1px solid #ddd; padding:20px; border-radius:10px; width:1132px; height:calc(100% - 40px);} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .smHeader {border-bottom:1px solid #ddd; padding-bottom:10px; margin-bottom:10px; display:none;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .smHeader .title {display:flex; align-items:center; height:36px;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .smHeader .title button {display:none;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .smHeader .title h2 {font-size:20px;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap {height:100%;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox {display:flex; flex-direction:column; height:100%; font-size:16px; margin:0;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnTitle {margin-bottom:10px; order:1;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnTitle h3 {font-size:16px; font-weight:600; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnTitle h4 {font-size:16px; font-weight:600; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .buttonWrap {margin:0 0 20px; height:30px; order:2;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnHeader .inputWrap input:valid ~ .textRemove {right:32px;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnHeader {order:3;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnHeader .tools {height:34px;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnHeader .tools .total {font-size:16px; color:#333333; min-width: 80px;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnHeader .tools .selected {font-size:16px; color:#5c6063;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnHeader .tools .selected em {font-style:normal; color:#a50034;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox.columnLeft {width:480px;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox.columnLeft .columnBody {} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox.columnLeft .columnBody .listBox {border-radius:10px 0 0 10px; background:#f8f8f8;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox.columnRight {width:calc(100% - 480px);} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox.columnRight .columnTitle, .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox.columnRight .buttonWrap, .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox.columnRight .columnHeader {margin-left:20px;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox.columnRight .columnBody .listBox {border-radius:0 10px 10px 0; } .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody {height:calc(100% - 110px); order:4;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox {border:1px solid #e1e1e1; margin-top:10px; height:100%; overflow:auto;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox.nodata {display:flex; justify-content:center;align-items:center; padding:20px 0 0 0;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox.nodata ul {display:none;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox.nodata p {font-size:18px; color:#777; background:url(../img/icon/icon_question.svg) no-repeat center top; padding-top:40px;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul {} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li {position:relative; cursor: pointer; cursor: pointer;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li.allCheck {position:sticky; top:0; z-index:6;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li:hover {background-color: #efefef;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li:hover a p {text-decoration: underline;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li:hover a div.BName {text-decoration: underline;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li:active {background:#e4e4e4; outline:1px solid #e5e5e5; color: #a50034;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li:active a p {color: #a50034;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li:active a div.BName {color: #a50034;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li.active a p {color: #a50034;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li.active a div.BName {color: #a50034;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li.active {background:#e4e4e4; outline:1px solid #e5e5e5; color: #a50034;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li.active::after {content:''; width:0; height:0; border-top:10px transparent solid; border-bottom:10px transparent solid; border-right:12px #fff solid; border-left:20px transparent solid; position:absolute; top:50%; right:0; transform:translate(0%, -50%); z-index:1;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox.columnLeft .columnBody .listBox ul li.active::before {content:''; display:block; width:10px; height:10px; background:url(../img/common/icon_check2.png)no-repeat; background-size: 8px !important; position:absolute; top:27px; left:14px; transform:translate(0, -50%);} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox.columnLeft .columnBody .listBox ul li[aria-selected="true"]::before {content:''; display:block; width:8px; height:7px; background:url(../img/common/icon_check2.png)no-repeat; background-size: 8px !important; position:absolute; top:50%; left:6px; transform:translate(0, -50%);} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox.columnLeft .columnBody .listBox ul li[aria-pressed="true"]::before {content:''; display:block; width:8px; height:7px; background:url(../img/common/icon_check2.png)no-repeat; background-size: 8px !important; position:absolute; top:50%; left:6px; transform:translate(0, -50%);} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox.columnLeft .columnBody .listBox ul li:active:before {content:''; display:block; width:8px; height:7px; background:url(../img/common/icon_check2.png)no-repeat; background-size: 8px !important; position:absolute; top:27px; left:14px; transform:translate(0, -50%);} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox.columnRight .columnBody .listBox ul li {background-color: #fff; cursor: pointer;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li.active .item .title strong {color:#a50034;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li .item {margin:0 20px 0 32px; padding:15px 0; border-bottom:1px solid #e5e5e5;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li.selectLI::before{content: ""; height: 1px; width: 100%; background: #e5e5e5; bottom: 0; position: absolute;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li.selectLI .item {margin:0 20px 0 24px; border-bottom: 0px !important;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody #sample02 ul li .item {padding:10px 0;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li .item .title {width:calc(100% - 100px); min-height:40px; display:flex; font-size:16px; justify-content: flex-start;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li .item .title:hover {color: #383838 !important;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li .item .title .opt {margin:0 4px;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li .item .title .opt label .text {margin:0 4px;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li .item .title div {display:block; width:100%; word-break:break-all; font-weight: normal;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li .item .tools {} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li .item .tools .button:first-child {margin: 0 5px 0 0;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li .item .tools .button:last-child {margin: 0 0 0 5px;} .container .body .contents .contentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox .nodata {text-align:center; padding:30px 0;} /* contents */ .accountWrap {width:calc(100% - 0px); height:calc(100% - 56px); position:relative; z-index:1;} .accountWrap .accountBox {height:calc(100% - 90px); position:relative; z-index:2;} .accountWrap .accountBox .desc {color:#fff; text-align:center; display: flex; justify-content: center; align-items: center; flex-direction: column;} .accountWrap .accountBox .desc h2 {display:block; font-size:60px; height:70px; line-height:70px; font-weight:300; margin-bottom:20px;} .accountWrap .accountBox .desc p {font-size:16px; line-height:20px; width: auto; max-width: 100%; font-weight:200; margin-bottom:36px; word-break:break-word;} .accountWrap .accountBox .desc .button {max-width: 220px;} .accountWrap .accountFooter {width:100%; height:90px; background: #1d1d1d; position:relative; z-index:2; opacity: 0.56;} .accountWrap .accountFooter .privacyPolicy {display:flex; align-items:center; font-size:18px; line-height:16px; color:#fff; padding:0 20px;} .accountWrap .accountFooter .privacyPolicy:nth-child(1) {border-right: 1px solid #fff;} .accountWrap .accountFooter .privacyPolicy::after {content:''; display:block; width:33px; height:33px; background:url(../img/icon/icon_blank.png)no-repeat; margin:0 10px;} .accountWrap .accountFooter .privacyPolicy:focus, .accountWrap .accountFooter .privacyPolicy:hover {text-decoration:underline;} .accountWrap .bgMotion {position:absolute; top:0; left:0; right:0; bottom:0; height:100%; background:url(../img/account/dxp_portal_bg.jpg)#2e2138 no-repeat center; background-size:cover; z-index:1; overflow:hidden;} .accountWrap .bgMotion video {position:absolute; z-index:-100; top:50%; left:50%; width:auto; min-width:100%; height:auto; min-height:100%; transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%);} /* ------------------------------------------------------------------ Table ------------------------------------------------------------------ */ /* accountManagementTable */ /* .accountManagementTable table th:nth-child(1), .accountManagementTable table td:nth-child(1) {width:30px;} */ /* ----------------------------------------------------------------------------------------------------- Filter ----------------------------------------------------------------------------------------------------- */ .filterWrap {position:fixed; top:80px; right:0; bottom:0; width:360px; height:calc(100% - 84px); background:#262F44; z-index:80; display:flex; flex-direction:column; display:none;} .filterWrap.active {display:flex; z-index:99;} .filterWrap .filterHeader {display:flex; flex-direction:row; align-items:center; justify-content:space-between; padding: 20px 20px 20px 20px; box-sizing:border-box; order:1;} .filterWrap .filterHeader h2 {color:#fff; font-size:18px; font-weight:500;} .filterWrap .filterHeader button.close {filter: brightness(999);} .filterWrap .filterBody {border-top:1px solid #858588; padding: 20px; box-sizing:border-box; height:calc(100% - 148px); overflow:auto; order:3; background: transparent !important;} .filterWrap .filterBody fieldset {margin-bottom:35px;} .filterWrap .filterBody fieldset legend {display:block !important; font-size:18px !important; line-height:24px; color:#fff; font-weight:600; margin-bottom:10px; text-indent: 0 !important; position: relative; height: auto !important; width: auto !important; word-break: break-all;} .filterWrap .filterBody fieldset ul {} .filterWrap .filterBody fieldset ul li {display:block; margin:6px 0;} .filterWrap .filterBody fieldset ul li .opt input[type=checkbox]:indeterminate+label:before {background:#fff;} .filterWrap .filterBody fieldset ul li .opt input[type=checkbox]:indeterminate+label:after {background:url(../img/icon/icon_checkbox_partial.svg)no-repeat; filter:grayscale(0) brightness(1);} .filterWrap .filterBody fieldset ul li ul {margin-left:20px; margin-bottom:20px;} .filterWrap .filterButton {height: 60px; display:flex; justify-content:center; padding:0 0 20px; order:3; align-items: center;} .filterWrap .filterButton button {margin:0 4px; min-width: 120px; width: 166px; height: 42px;} .filterWrap .filterButton button.white:disabled {} .filterWrap.active ~ .filterDim {display:block;} .filterDim {display:none; position:fixed; z-index:98; top:0px; left:0px; right:0px; bottom:0px; justify-content:center; align-items:center; background:rgb(0 0 0 / 20%);} /* licensing */ .snb.licensing ul li {padding: 20px 40px 20px 36px !important;} /* step_01 */ .popupLicense .modalBox .popupStep{height: auto;width: calc(100% - 2px);background-color: #f4f4f4;padding: 16px;justify-content: space-between;box-sizing: border-box;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox dl dd .checkInput {margin-right: 12px; width: calc(100% - 90px);} .popupLicense .modalBox .popupStep .popTitle {font-size: 16px;color: #383838;word-break: break-all;} .popupLicense .modalBox .popupStep .stepButton {width: auto;display: flex;} .popupLicense .modalBox .popupStep .stepButton .popStep {width: 28px;height: 28px;border-radius: 50%;margin: 0 3px ;color: #797979;background-color: #fff;display: flex;border: solid 1px #e0e0e0;} .popupLicense .modalBox .popupStep .stepButton .activePopStep {background-color: #354026;color: #fff;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox {align-items: flex-start; display: flex; flex-direction: column; margin: 0; gap: 24px; width: 100%;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox.basicInfo dl {display: flex; flex-direction: column; width: 100%;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox.basicInfo dl dt {display: flex; width: 100%;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox.basicInfo dl dd {display: flex; width: 100%;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox.basicInfo dl dd > div {width: 100%;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox.basicInfo dl.scope dd {display: flex; flex-direction: column;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl {align-items: flex-start; display: flex; flex-direction: column; margin: 0; gap: 12px; width: 100%;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl.period dd {display: flex; flex-direction: column;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl dt {display: flex; width: 100%; align-items: center; justify-content: flex-start;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl dd {display: flex; width: 100%; align-items: center; justify-content: flex-start;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl.opp dd {flex-direction: column; gap: 4px;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl.opp dd .opportunityNoText {width: 100%;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .selectWrap {display: flex; width: 100%;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .subsidiry {display: flex; width: calc(100%);} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .subsidiry .selectWrap:nth-child(1) {width: 200px; margin-right: 20px;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .subsidiry .selectWrap:nth-child(2) {width: calc(100% - 220px); opacity: 0.4;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .businessType{width: 100%;} /* step_02 */ .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .serviceBox .serviceType {width: auto;height: auto;box-sizing: border-box;padding: 8px 10px 10px;background-color: #F5F6FA;margin: 8px 0 0 0;color: #383838; width: 100%;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .serviceBox .serviceType > p{font-size: 12px; word-break: break-word; margin: 8px 0 10px 0;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .serviceBox .serviceType > table{font-size: 14px;width: 100%;background-color: #fff;text-align: center;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .serviceBox .serviceType > table > tbody > tr > td {border: 1px solid #e5e5e5;height: 54px;vertical-align: middle; padding: 6px 16px; box-sizing: border-box; word-break: break-word; min-width: 100px;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .serviceBox .serviceType > table > tbody > tr > td:nth-child(1) {background: #F5F6FA;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .serviceBox{display: flex;flex-direction: column;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .serviceBox .fb_e {display: flex; flex-wrap: wrap;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .licensingDatepick {display: flex;justify-content: space-between;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .licensingDatepick >div {display: flex;flex-direction: column; width: calc(100% - 30px);} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .licensingDatepick >div > .dateTitle {font-size: 12px; word-break: break-word;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .duration .buttonGroup{text-align:left; display:flex; border-radius: 6px; justify-content: space-evenly; height: 36px; align-items: center;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .duration .buttonGroup .active{background: #354056; font-size: 14px; font-weight: 700; color: #FFF;border: 0;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .duration .buttonGroup .buttonGrp{display: flex; justify-content: center; box-sizing: border-box; border: 1px solid #949494; width: 100%; height: 100%; align-items: center;} .symbolTilt{font-size: 12px; display: flex; align-items: center; justify-content: center;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .duration .buttonGroup .buttonGrp:first-child{border-radius: 6px 0 0 6px;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .duration .buttonGroup .buttonGrp:last-child{border-radius: 0 6px 6px 0;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .duration{margin-top: 10px; width: 100%;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .duration .inputBox {display: flex; align-items: center;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .duration .inputBox .month {display: flex; position: absolute; right: 10px; z-index: 2; font-size: 14px; width: auto;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .duration .inputBox input {padding-right: 60px;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .duration .durationH {font-size: 12px; margin: 0 0 12px 6px;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .duration .buttonGroup {width: 100%;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .duration .buttonGroup .buttonGrp:active {background-color: #354056; color: #FFF;} /* step_03 */ .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .opportunityNoText {font-size: 12px;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .salesPrice {font-size: 14px;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dl .dd .discountReason {height: 100px;width: 525px;display: flex;padding: 15px;box-sizing: border-box;border: solid 1px #d0d1d2;} /* step_04 */ .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox {width: calc(100%);height: 759px;margin: auto 0;box-sizing: border-box;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox.viewSummaryAdditional {width: calc(100% - 8px) !important; margin: auto;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .textWrap {font-size: 16px; margin-bottom:30px; margin-left: 10px; word-break: break-all;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .textWrap > strong {font-size: 16px;font-weight: bold; margin-left: 20px;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .sectionConfirm {background: #f8f8f8;border-radius: 15px;width: 100%;height: auto;margin: 0 0 32px;padding: 30px 20px;box-sizing: border-box;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .sectionConfirm .headBox .sectionHead {font-size: 12px;font-weight: bold;color: #555;font-family: "Noto Sans KR", sans-serif; margin-left: 0;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .sectionConfirm .headBox {border-bottom: 1px solid #e5e5e5; box-sizing: border-box; word-break: break-all;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .dtLeft .sectionConfirm > dl > dt {text-align: left;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .sectionConfirm > dl >dt {font-size: 16px; min-width: 200px; margin-left: 10px; margin-right: 40px; padding: 0;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .sectionConfirm > dl >dd {font-size: 16px;word-wrap: break-word;} /* issue in licensing */ .issueViewRequest .modalBox .mbBody .mbBodyContent .article .dlBoxGroup .dlBox .issueLicenseTextBox {font-size: 16px; margin-bottom: 30px;} .issueViewRequest .modalBox .mbBody .mbBodyContent .article .dlBoxGroup .dlBox .inputBoxIssue {height: 40px;} .issueViewRequest .modalBox .mbBody .mbBodyContent .article .dlBoxGroup .dlBox .inputBoxIssue .dl {display: flex;} /* licensing history */ .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .waitingBox {width: 100%; padding: 0px 10px 0px 0px; box-sizing: border-box;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .waitingBox .waitingIcon{height: 18px; width: 18px; display: flex; align-items: center; justify-content: center; background-image: url(../img/common/ic_status_wait.svg); margin-right: 8px; background-repeat: no-repeat; background-position: contain;} /* licensing request */ .customBody .contents .dcBody .detailView .requestMenu .dl {margin: 50px 50px 50px 50px; display: flex; align-items: center; justify-content: space-between; max-width: 500px;} .customBody .contents .dcBody .detailView .requestMenu .dl .dt{width: 188px; text-align: left;} .customBody .contents .dcBody .detailView .requestMenu.requestLicensing {width: 100%;} .customBody .contents .dcBody .detailView .requestMenu.requestLicensing .dl .dt{width: 320px; word-break: break-all;} .customBody .contents .dcBody .detailView .requestMenu.requestLicensing .dl .dt strong {font-size: 18px; width: 320px; font-weight: 500 !important;} .customBody .contents .dcBody .detailView .requestMenu.requestLicensing .dl .dd button {width: 148px;} .customBody .contents .dcBody .detailView .requestMenu .snbWrap{display: none; margin: 20px auto; width: 90%;} /* licensing approval */ .licensingBody .contents .dcBody .detailView .approveMenu {width: 100%; height: 100%; overflow-y: scroll;} .licensingBody .contents .dcBody .detailView .approveMenu .snbWrap{display: none; margin: 20px auto; width: 90%;} .licensingBody .contents .dcBody .detailView .approveMenu .tools {display: flex; align-items: center; justify-content: flex-end; width: calc(100% - 60px); height: 40px; margin: 30px 28px 20px 30px; box-sizing: border-box;} .licensingBody .contents .dcBody .detailView .approveMenu .tools > button {margin: 10px;} .licensingBody .contents .dcBody .detailView .approveMenu .tableWrap .table {width: calc(100%); margin: auto;} .licensingBody .contents .dcBody .detailView .approveMenu .tableHead {width: 100%; text-align: right; padding-right: 46px; box-sizing: border-box; font-size: 14px; margin-bottom: 10px;} .licensingBody .contents .dcBody .detailView .approveMenu .tableHead.supportOuestionTableHeader {padding: 4px;} .licensingBody .contents .dcBody .detailView .approveMenu .tableHead.supportTableHeadNoticeBoard {padding: 4px;} /* table */ .licensingBody .contents .dcBody .detailView .approveMenu .licenseTableApprove .jsmartable thead tr th:nth-child(8) {width: 168px;} .licensingBody .contents .dcBody .detailView .approveMenu .licenseTableApprove .jsmartable tbody tr td:nth-child(8) > button {width: 128px; height: 42px;} /* licensing history */ .licenseTableApprove {margin: 0 26px; width: calc(100% - 52px);} .licenseTableHistory {margin: 0 26px; width: calc(100% - 52px);} .draftIcon {margin-right: 5px; display: flex; align-items: center; position: relative; padding-left: 28px;} .draftIcon::before {content: ""; height: 18px; display: inline-flex; margin-right: 5px; width: 18px; background-image: url(../img/common/ic_status_draft.svg); background-repeat: no-repeat; background-position: center; position: absolute; left: 0;} /* table */ .licensingBody .contents .dcBody .detailView .approveMenu .licenseTableHistory .jsmartable thead tr th:nth-child(9) {width: 144px;} .licensingBody .contents .dcBody .detailView .approveMenu .licenseTableHistory .jsmartable tbody tr td:nth-child(9) button {height: 42px; width: 104px;} .licensingBody .contents .dcBody .detailView .approveMenu .licenseTableHistory .jsmartable tbody tr td:first-child {text-align: left; padding-left: 20px; box-sizing: border-box;} /* partner center */ .appManagerIcon {display: flex;align-items: center; justify-content: center; height: 20px; width: 20px; background-image: url(../img/common/ic_app_manager_n.svg); background-repeat: no-repeat; margin: 5px;} /* no content */ .partnerCenterBox .fb_ew .toolBox {display: flex; gap: 8px;} .partnerCenterBox .Box.service .smallBox .no-content {background: url(../img/_sample/no_contnent_service.png);} .partnerCenterBox .Box.interface .smallBox .no-content {background: url(../img/_sample/no_contnent_interface.png);} .partnerCenterBox .Box.design .smallBox .no-content {background: url(../img/_sample/no_content_design.png);} .partnerCenterBox .Box.artPlayer .smallBox .no-content {background: url(../img/_sample/no_contnent_artPlayer.png);} .no-content {height: 253px; width: 452px; border: 1px solid #dcdcdc; border-radius: 8px;} .no-content span {font-size: 18px; color: #555;} /* card */ .partnerCenterBox {height: calc(100% - 0px); overflow-y: overlay; width: 100%; padding: 32px; box-sizing: border-box; background-color: #fff; display: flex; flex-direction: column; gap: 40px; border-radius: 10px; border: 1px solid #DADEE2;} .partnerCenterBox .tools {display: flex; margin: 0; display: flex; justify-content: flex-end;} .partnerCenterBox .tools .toolBox {display: flex; margin: 0; display: flex; justify-content: flex-end; gap: 8px;} .partnerCenterBox .Box {height: auto; width: 100%; box-sizing: border-box; margin: 0;} /* .partnerCenterBox .Box .head {padding-left: 10px;} */ .partnerCenterBox .Box .smallBox {flex-wrap: wrap; display: flex; gap: 16px 12px;} .partnerCenterBox .Box .smallBox .boxCard {min-height: 250px; height: auto; width: 475px; background-color: #fff; border: 1px solid #e5e5e5; border-radius: 10px; padding: 16px 16px 0 16px; box-sizing: border-box; display: flex; position: relative; overflow: hidden;} .partnerCenterBox .tools > form {margin: 0 5px 0 5px;} .partnerCenterBox .tools {width: 100%; padding: 0px 13px 0px 30px; box-sizing: border-box;} .partnerCenterBox .Box .head h4 {font-size: 20px !important; font-weight: 700 !important; color: #111111; line-height: 26px;} .partnerCenterBox .Box .smallBox .boxCard.active {border: 2px solid #a50034;} .partnerCenterBox .Box .smallBox .boxCard .cardHead {width: 100%; display: flex; align-items: center;} .partnerCenterBox .Box .smallBox .boxCard .cardHead .thumbBox {height: 65px; width: 65px;} .partnerCenterBox .Box .smallBox .boxCard .cardHead .titleBox {padding: 0; box-sizing: border-box; width: 320px; height: auto;} .partnerCenterBox .Box .smallBox .boxCardWrap .btnMore {top: 29px; right: 25px;} .partnerCenterBox .Box .smallBox .boxCardWrap .btnMore .layerNavi {position: absolute; top: 42px; right: 0px} .partnerCenterBox .Box .smallBox {height: auto; width: 100%; justify-content: flex-start;} .partnerCenterBox .Box .smallBox .boxCardWrap {padding: 0; margin: 0; position: relative; display: flex; width: 473px;} .partnerCenterBox .Box .smallBox .boxCard.active {border: 2px solid #a50034;} .partnerCenterBox .Box .smallBox .boxCard .cardHead {width: 100%; display: flex; align-items: center; gap: 12px;} .partnerCenterBox .Box .smallBox .boxCard .cardBody{padding: 0px 0 10px 0; box-sizing: border-box; border-bottom: 1px solid #d0d1d2; position: relative;} .partnerCenterBox .Box .smallBox .boxCard .cardBody p {font-size: 13px; line-height: 1.2; color: #383838;} .partnerCenterBox .Box .smallBox .boxCard .cardBody .tagBox {height: auto; width: 100%; display: flex; flex-direction: row; gap: 8px;} .partnerCenterBox .Box .smallBox .boxCard .cardBody .tagBox .supersignIcon {height: 32px; width: 32px; border-radius: 8px;} .partnerCenterBox .Box .smallBox .boxCard .cardBody .tagBox .businessCloud {height: 32px; width: 32px; border-radius: 8px;} .partnerCenterBox .Box .smallBox .boxCard .cardBody .tagBox .procentricIcon {height: 32px; width: 32px; border-radius: 8px;} .partnerCenterBox .Box .smallBox .boxCard .cardBody .tagBox .prosignIcon {height: 32px; width: 32px; border-radius: 8px;} .partnerCenterBox .Box .smallBox .boxCard .cardBody .tagBox .stayIcon {height: 32px; width: 32px; border-radius: 8px;} .businessCloud {height: 100%; width: 100%; background: url(../img/common/ic_procloud.png) no-repeat; background-size: contain;} .supersignIcon {height: 100%; width: 100%; background: url(../img/common/ic_supersign.png) no-repeat; background-size: contain;} .prosignIcon {height: 100%; width: 100%; background: url(../img/common/ic_supersign_ad.png) no-repeat; background-size: contain;} .lgccIcon {height: 100%; width: 100%; background: url(../img/common/ic_connected_care.png) no-repeat; background-size: contain;} .CLOiStation {height: 100%; width: 100%; background: url(../img/common/ic_cloi_station.png) no-repeat; background-size: contain;} .procentricIcon {height: 100%; width: 100%; background: url(../img/common/ic_procentric_cloud.png) no-repeat; background-size: contain;} .stayIcon {height: 100%; width: 100%; background: url(../img/common/ic_procentric_stay.png) no-repeat; background-size: contain;} .eCentric {height: 100%; width: 100%; background: url(../img/common/ic_e-centric.svg) no-repeat; background-size: contain;} .evccareIcon {height: 100%; width: 100%; background: url(../img/common/ic_e-centric.svg) no-repeat; background-size: contain;} .disabled.procentricIcon {height: 100%; width: 100%; background: url(../img/common/ic_procentric_cloud_d.svg) no-repeat; background-size: contain;} .disabled.supersignIcon {height: 100%; width: 100%; background: url(../img/common/ic_supersign_d.svg) no-repeat; background-size: contain;} .disabled.prosignIcon {height: 100%; width: 100%; background: url(../img/common/ic_supersign_ad_d.svg) no-repeat; background-size: contain;} .disabled.lgccIcon {height: 100%; width: 100%; background: url(../img/common/ic_connected_care_d.svg) no-repeat; background-size: contain;} .partnerCenterBox .Box .smallBox .boxCardWrap .cardFooter .right .button {margin: 0px 5px 0px 5px;} .partnerCenterBox .Box .smallBox .boxCard .cardBody{margin: 12px 0 66px 0; padding: 0px 0px 16px 0px; box-sizing: border-box;} .partnerCenterBox .Box .smallBox .boxCard .cardBody .descriptionBox {width:100%; height: auto; min-height: 40px; margin-bottom: 12px; font-size:13px;} .partnerCenterBox .Box .smallBox .boxCard .cardBody .descriptionBox p {width:100%; height:100%;max-height: 34px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; word-break: break-all; font-size: 14px; color: #555;} .partnerCenterBox .Box .smallBox .boxCardWrap .cardFooter {margin: 0 2px 2px 14px; padding: 0 12px; box-sizing: border-box; position: absolute; width: calc(100% - 16px); bottom: 30px;} .partnerCenterBox .Box .smallBox .boxCardWrap .cardFooter .left > button {margin: 0 4px;} .partnerCenterBox .Box .smallBox .boxCardWrap .cardFooter .left > button:first-child {margin: 0 4px 0 0;} .partnerCenterBox .Box .smallBox .boxCardWrap .cardFooter .left p {font-size: 13px; display: flex;} .partnerCenterBox .Box .smallBox .boxCardWrap .cardFooter .left p::before {content:"";display:block; height: 19px; width: 19px; background: url(../img/common/card_btn_icon_check_n.svg) no-repeat center; margin-right: 10px;} .partnerCenterBox .Box .smallBox .boxCardWrap .cardFooter .left.allSite p {color: #a50034;} .partnerCenterBox .Box .smallBox .boxCardWrap .cardFooter .left.allSite p::before {content:"";display:block; height: 19px; width: 19px; background: url(../img/common/card_btn_icon_check_s.svg) no-repeat center; margin-left: 10px;} .partnerCenterBox .service .smallBox .boxCard .cardHead .thumbBox {height: 56px; width: 56px; border-radius: 10px; background: #FFE9E9;} .partnerCenterBox .service .smallBox .boxCard .cardHead .thumbBox .thumb {height: 56px; width: 56px; background-position: center; background-size: contain;} .partnerCenterBox .service .smallBox .boxCard .cardHead .thumbBox .thumb:disabled {opacity: 0.4;} .partnerCenterBox .service .smallBox .boxCard .cardHead .thumbBox .thumb.pmw {background: url(../img/icon/ic_pmw_service.svg) no-repeat; background-position: center;} .partnerCenterBox .service .smallBox .boxCard .cardHead .thumbBox .thumb.bgm {background: url(../img/icon/ic_bgm_service.svg) no-repeat; background-position: center;} .partnerCenterBox .service .smallBox .boxCard .cardHead .thumbBox .thumb.bizMelon {background: url(../img/icon/ic_biz_service.svg) no-repeat; background-position: center;} .partnerCenterBox .service .smallBox .boxCard .cardHead .thumbBox .thumb.channel {background: url(../img/icon/ic_channel_service.svg) no-repeat; background-position: center;} .partnerCenterBox .service .smallBox .boxCard .cardHead .thumbBox .thumb.feed {background: url(../img/icon/ic_feed_service.svg) no-repeat; background-position: center;} .partnerCenterBox .service .smallBox .boxCard .cardHead .thumbBox .thumb.dsMenu {background: url(../img/icon/ic_DSmenu_service.svg) no-repeat; background-position: center;} .partnerCenterBox .service .smallBox .boxCard .cardHead .thumbBox .thumb.voice {background: url(../img/icon/ic_voice_service.svg) no-repeat; background-position: center;} .partnerCenterBox .service .smallBox .boxCard .cardHead .thumbBox .thumb.weather {background: url(../img/icon/ic_weather_service.svg) no-repeat; background-position: center;} .partnerCenterBox .service .smallBox .boxCard .cardHead .thumbBox .thumb.travel {background: url(../img/icon/ic_travel_service.svg) no-repeat; background-position: center;} .partnerCenterBox .service .smallBox .boxCard .cardHead .thumbBox .thumb.epg {background: url(../img/icon/ic_epg_service.svg) no-repeat; background-position: center;} .partnerCenterBox .service .smallBox .boxCard .cardHead .thumbBox .thumb.flight {background: url(../img/icon/ic_flight_service.svg) no-repeat; background-position: center;} .partnerCenterBox .service .smallBox .boxCard .cardHead .thumbBox .thumb.wantreez {background: url(../img/icon/ser_ic_wantreez.svg) no-repeat; background-position: center;} .partnerCenterBox .service .smallBox .boxCard .cardHead .thumbBox .thumb.postermywall {background: url(../img/icon/ser_ic_postermywall.svg) no-repeat; background-position: center;} .partnerCenterBox .service .smallBox .boxCard .cardHead .titleBox h5 {font-size: 18px; height: 24px; font-weight: 500; color: #111; margin-bottom: 5px; overflow:hidden; text-overflow:ellipsis; display: block; -webkit-box-orient: vertical; word-break:break-all; -webkit-line-clamp:1; line-height: 1; white-space: nowrap;} .partnerCenterBox.unapprovedContainer .service .smallBox .boxCard .cardHead .titleBox h5 {width: 150px;} .partnerCenterBox .service .smallBox .boxCard .cardHead .titleBox p {font-size: 14px; font-weight: 400; color: #555; word-break: break-word;} .partnerCenterBox .interface .smallBox .boxCard .cardHead .thumbBox {height: 56px; width: 56px; background: #E9F2FF; border-radius: 10px; display: flex; align-items: center; justify-content: center;} .partnerCenterBox .interface .smallBox .boxCard .cardHead .thumbBox .thumb {height: 56px; width: 56px; background-position: center; border-radius: 10px; background-size: contain;} .partnerCenterBox .temp .smallBox .boxCard .cardHead .thumbBox .thumb.wantreez {background: url(../img/icon/ic_template_temp.svg) no-repeat; background-position: center;} .partnerCenterBox .interface .smallBox .boxCard .cardHead .thumbBox .thumb.wantreez {background: url(../img/icon/int_ic_wantreez.svg) no-repeat; background-position: center;} .partnerCenterBox .interface .smallBox .boxCard .cardHead .thumbBox .thumb.artPlayer {background: url(../img/icon/int_ic_artPlyaer.svg) no-repeat; background-position: center;} .partnerCenterBox .interface .smallBox .boxCard .cardHead .thumbBox .thumb.postermywall {background: url(../img/icon/int_ic_postermywall.svg) no-repeat; background-position: center;} .partnerCenterBox .interface .smallBox .boxCard .cardHead .thumbBox .thumb.DSmenu {background: url(../img/icon/int_ic_dsMenu.svg) no-repeat; background-position: center;} .partnerCenterBox .interface .smallBox .boxCard .cardHead .thumbBox .thumb.bizMelon {background: url(../img/icon/int_ic_bizMelon.svg) no-repeat; background-position: center;} .partnerCenterBox .interface .smallBox .boxCard .cardHead .thumbBox .thumb.iot {background: url(../img/icon/ic_iot_int.svg) no-repeat; background-position: center;} .partnerCenterBox .interface .smallBox .boxCard .cardHead .thumbBox .thumb.netflix {background: url(../img/icon/ic_netflix_int.svg) no-repeat; background-position: center;} .partnerCenterBox .interface .smallBox .boxCard .cardHead .thumbBox .thumb.pms {background: url(../img/icon/ic_pms_int.svg) no-repeat; background-position: center;} .partnerCenterBox .interface .smallBox .boxCard .cardHead .thumbBox .thumb.qms {background: url(../img/icon/ic_qms_int.svg) no-repeat; background-position: center;} .partnerCenterBox .interface .smallBox .boxCard .cardHead .titleBox h5 {font-size: 21px; font-weight: 500; color: #383838; margin-bottom: 5px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient: vertical; word-break:break-all; -webkit-line-clamp:1; line-height: 22px; height: 24px; white-space: nowrap;} .partnerCenterBox .interface .smallBox .boxCard .cardHead .titleBox p {font-size: 14px; font-weight: 500; color: #383838; word-break: break-all;} .partnerCenterBox .Box.design .smallBox .boxCardWrap .btnMore {top: 152px; right: 25px;} .partnerCenterBox .Box.design .smallBox .boxCardWrap .btnMore .layerNavi {position: absolute; top: 42px; right: 0px} .partnerCenterBox .design .smallBox .boxCard {padding: 0; width: 475px; height: auto;} .partnerCenterBox .design .smallBox .boxCard .cardHead .thumbBox {height: 131px; width: 100%; border-radius: 10px 10px 0 0;} .partnerCenterBox .design .smallBox .boxCard .cardHead .thumbBox:nth-child(1) {background: url(../img/_sample/img.png);} .partnerCenterBox .design .smallBox .boxCard .cardHead .thumbBox:nth-child(2) {background: url(../img/_sample/img\ \(1\).png);} .partnerCenterBox .design .smallBox .boxCard .cardHead .thumbBox:nth-child(3) {background: url(../img/_sample/img\ \(2\).png);} .partnerCenterBox .design .smallBox .boxCard .cardHead .titleBox {width: 100%; height: auto; padding: 10px; box-sizing: border-box;} .partnerCenterBox .design .smallBox .boxCard .cardHead .titleBox h5 {font-size: 21px; font-weight: 500; color: #383838; margin-bottom: 5px; overflow:hidden; text-overflow:ellipsis; display: block; -webkit-box-orient: vertical; word-break:break-all; -webkit-line-clamp:1; line-height: 1; height: 30px; white-space: nowrap;} .partnerCenterBox .design .smallBox .boxCard .cardHead .titleBox p {font-size: 14px; font-weight: 500; color: #383838; word-break: break-all;} .partnerCenterBox .design .smallBox .boxCard .cardBody {height: 114px; padding: 12px 0; box-sizing: border-box;} .partnerCenterBox .design .smallBox .boxCard .cardBody .tagBox {margin: 10px 0 10px 0;} .partnerCenterBox .design .smallBox .boxCard .cardBody .res {font-size: 12px; margin: 10px 0; word-break: break-all;} .partnerCenterBox .design .smallBox .boxCard .cardFooter {margin: 10px 20px 10px} .partnerCenterBox .design .smallBox .boxCard .cardBody {margin: 0 16px 76px 16px; height: auto;} .partnerCenterBox .design .smallBox .boxCard .cardHead .titleBox {padding: 0px; box-sizing: border-box; max-width: 450px;} .partnerCenterBox .Box.design .smallBox .boxCard .cardHead .fb_y {width: 100%; padding: 0 16px; box-sizing: border-box;} /* art player */ .partnerCenterBox .Box.artPlayer .smallBox .boxCard .cardHead .thumbBox {height: 56px; width: 56px; border-radius: 10px; background: #EEE9FF;} .partnerCenterBox .Box.artPlayer .smallBox .boxCard .cardHead .thumbBox .thumb {height: 56px; width: 56px; background-position: center; background-size: contain;} .partnerCenterBox .Box.artPlayer .smallBox .boxCard .cardHead .thumbBox .thumb.art {background: url(../img/icon/ic_art_art.svg) no-repeat; background-position: center;} .partnerCenterBox .Box.artPlayer .smallBox .boxCard .cardHead .titleBox h5 {font-size: 18px; height: 24px; font-weight: 500; color: #111; margin-bottom: 5px; overflow:hidden; text-overflow:ellipsis; display: block; -webkit-box-orient: vertical; word-break:break-all; -webkit-line-clamp:1; line-height: 1; white-space: nowrap;} /* template */ .partnerCenterBox .Box.temp .smallBox .boxCard .cardHead .thumbBox {height: 56px; width: 56px; border-radius: 10px; background: #EEE9FF;} .partnerCenterBox .Box.temp .smallBox .boxCard .cardHead .thumbBox .thumb {height: 56px; width: 56px; background-position: center; background-size: contain;} .partnerCenterBox .Box.temp .smallBox .boxCard .cardHead .thumbBox .thumb.temp {background: url(../img/icon/ic_template_temp.svg) no-repeat; background-position: center;} .partnerCenterBox .Box.temp .smallBox .boxCard .cardHead .titleBox h5 {font-size: 18px; height: 24px; font-weight: 500; color: #111; margin-bottom: 5px; overflow:hidden; text-overflow:ellipsis; display: block; -webkit-box-orient: vertical; word-break:break-all; -webkit-line-clamp:1; line-height: 1; white-space: nowrap;} /* partner center tag popup*/ .partnerCenterBox .Box .smallBox .boxCard .cardBody .tagMenu {width: 100%; height: auto; position: absolute; z-index: 1; background: #fff; border: 1px solid #e5e5e5;box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.2); border-radius: 10px; top: 46px; z-index: 1; left: 0; overflow-y: scroll; max-height: 108px;} .partnerCenterBox .Box .smallBox .boxCard .cardBody .tagMenu .tags {width: calc(100% - 30px); display: flex;flex-wrap: wrap;} .partnerCenterBox .Box .smallBox .boxCard .cardBody .tagMenu .tags .tag{height: auto; width: auto; background-color: #d5e7e0; border-radius: 3px; text-align: center; margin: 5px; padding: 4px 5.5px; word-break: break-all;} /* Partner Center Web OS */ .partnerCenterWebOS {padding: 28px 28px 28px 26px !important; box-sizing: border-box; width: 100%;} .partnerCenterWebOS.appManager .tableWrap .jsmartable tbody tr td .thumb {margin: 9.5px auto;} .partnerCenterWebOS .tools {margin: 0 0 32px 0;} /* partner center app details */ .appDetails .contentBox {display: flex; flex-direction: row !important; overflow-y: scroll; width: calc(100% - 40px );} .appDetails .contentBox .fb_x {gap: 0 40px; flex-wrap: wrap; width: 100%; justify-content: flex-start;} .appDetails .contentBox .one {width: calc(100% - 360px); margin: 0; height: 100%;} .appDetails .contentBox .one .detailView .detailViewBody{height: 100%;} .appDetails .contentBox .one .detailView .detailViewBody{overflow-y: scroll;} .appDetails .contentBox .one .detailView .detailViewBody .moreBoxInfo .thumb{margin: 50px 30px 50px 30px ;} .appDetails .contentBox .one .detailView .detailVeiwBody .moreBoxInfo .thumb {margin: 50px 30px 50px 30px ;} .appDetails .contentBox .one .detailView .detailVeiwBody .moreBoxInfo {line-height: 2;} .appDetails .contentBox .one .detailView .detailVeiwHeader .infoBox .tagBox{width: 100%; margin-top: 10px;} .appDetails .contentBox .one .detailView .detailVeiwHeader .infoBox .tagBox .tag {height: auto; padding: 4px 12px; box-sizing: border-box; background-color: #d5e7e0; margin: 5px; word-break: break-all; max-width: 160px; min-width: 116px; border-radius: 3px;} .appDetails .contentBox .one .detailView .detailVeiwHeader .buttonGroup {height: 100%; padding: 5px;box-sizing: border-box;} .appDetails .contentBox .one .detailView .detailVeiwHeader .buttonGroup .allSite {color: #a50034; font-size: 14px; font-weight: bold; display: flex; word-break: break-all; padding-right: 15px;} .appDetails .contentBox .one .detailView .detailVeiwHeader .buttonGroup p {margin: 5px; display: flex; align-items: center;} .appDetails .contentBox .one .detailView .detailVeiwHeader .buttonGroup button {margin: 5px;} .appDetails .contentBox .one .detailView .detailVeiwHeader .buttonGroup .allSite::before {content:"";display:block; height: 19px; width: 19px; background: url(../img/common/card_btn_icon_check_s.svg) no-repeat center; margin-right: 10px;} .appDetails .contentBox .one .detailView .detailVeiwHeader .buttonGroup .partiallyInstalled::before {content:"";display:inline-flex; height: 19px; width: 19px; margin-left: 10px; background: url(../img/common/icon_check.png) no-repeat center;} .appDetails .contentBox .two {width: 320px; height: auto; max-height: calc(100vh - 330px); flex-grow: 0; background-color: #F5F6FA; margin: 0; padding: 28px; box-sizing: border-box; overflow-y: overlay; color: #111111;} .appDetails .contentBox .two .title {font-size: 16px !important; font-weight: 500; color: #111; word-break: break-all;} .appDetails .contentBox .two > div {margin: 36px 0px 0px 0px; color: #fff;} .appDetails .contentBox .two .total {margin: 32px 0px 40px 0px; word-break: break-all;} .appDetails .contentBox .two .total > p {font-size: 14px; font-weight: 700; word-break: break-all; color: #111;} .appDetails .contentBox .two .total > div {display: flex; margin-top: 10px;} .appDetails .contentBox .two .total > div > div > p {font-size: 40px; color: #111;} .appDetails .contentBox .two .total > div > .number > strong {font-size: 24px !important;} .appDetails .contentBox .two .total > div > p {font-size: 14px; margin-left: 5px; font-weight: 500; color: #111; word-break: break-all; max-width: 180px;} .appDetails .contentBox .two > div .title {font-size: 21px; word-break: break-all;} .appDetails .contentBox .two > ul {margin-top: 24px; box-sizing: border-box;} .appDetails .contentBox .two > ul > li {font-size: 14px; color: #fff; font-weight: normal; margin-bottom: 20px; word-break: break-all;} .appDetails .contentBox .two > ul > li > ul {margin-top: 24px; padding: 0 20px; box-sizing: border-box;} .appDetails .contentBox .two > ul > li > ul > li {font-size: 14px; color: #111; font-weight: normal; margin-bottom: 20px; word-break: break-all;} /* partner center install popup */ .mobileContentInstallUninstall {display: none;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .head .appNameInstall {display: block; font-size: 16px; text-align: left; margin: 16px 0px 20px 26px; color: #555;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .head h3 {font-size: 16px; font-weight: bold; color: #555; margin-left: 26px;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .head .searchBox {display: flex; width: 672px; justify-content: space-between; margin: 18px 0 0 20px;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer {height: 100%; width: 100%;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox {width: 724px; height: 512px;border: 1px solid #e5e5e5; border-radius: 5px; margin: 10px 16px 0px 20px; box-sizing: border-box; overflow: hidden;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .inputWrap {position: absolute; top: 146px; left: 400px;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .secondBox {width: 312px; height: 512px; border: 2px solid #a50034;background-color: #f8f8f9; border-radius: 5px; margin: 10px 16px 0px 0px; box-sizing: border-box;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all {width: 362px; height: 100%; border-right: 1px solid #e5e5e5;background-color: #f8f8f8; box-sizing: border-box; margin: 0; padding: 0;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li {height: auto; width: 100%; border-bottom: 1px solid #e5e5e5;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li .liDiv > ul {height: calc(450px); width: calc(100%); overflow-y:overlay; background-color: #f8f8f8; position: relative;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li .liDiv > ul::-webkit-scrollbar {height:44px; width:44px;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li .liDiv > ul::-webkit-scrollbar-thumb {border:20px solid transparent;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li .liDiv > ul > li {height: auto; width: 100%; padding: 15px 34px 15px 36px; box-sizing: border-box; cursor: pointer; position: relative;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li .liDiv > ul > li::before {content: "";height: 1px; width: calc(100% - 70px); left: 36px; position: absolute; background: #e5e5e5; bottom: 0;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li .liDiv > ul > li:focus-visible:before {display: none;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li .liDiv > ul > li.active::after {content: ""; height: 10px; width: 10px; background-position: center; background-image: url(../img/common/card_btn_icon_check_s.svg); position: absolute; left: 14px; top: 20px;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li .liDiv > ul > li:active::after {content: ""; height: 10px; width: 10px; background-position: center; background-image: url(../img/common/card_btn_icon_check_s.svg); position: absolute; left: 14px; top: 20px;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li .liDiv > ul > li.active {background: #e4e4e4;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li .liDiv > ul > li:active {background: #e4e4e4;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li .liDiv > ul > li.active div strong {color: #a50034;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li .liDiv > ul > li:active div strong {color: #a50034;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li .liDiv > ul > li.active div span {color: #a50034;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li .liDiv > ul > li:active div span {color: #a50034;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li .liDiv > ul > li:hover {background: #efefef; text-decoration: underline;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li .liDiv > ul > li .fb_e > strong {font-size: 15px; font-weight: normal; color: #383838; word-break: break-all; margin-bottom: 7px;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li .liDiv > ul > li .fb_e > span {font-size: 12px; font-weight: normal; color: #383838; word-break: break-all;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li.active {background: #e4e4e4; color: #a50034;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li[aria-selected="true"] {background: #e4e4e4; padding-left: 8px; color: #a50034;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li:hover {background: #e4e4e4;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li[aria-selected="true"] {background: #e4e4e4;padding-left: 18px;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li.active::before {content: ""; height: 10px; width: 10px; background-position: center; background-image: url(../img/common/card_btn_icon_check_s.svg); position: absolute; left: 18px;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li.box {box-sizing: border-box;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head {height:auto; width: 100%; margin: 0; padding: 0; box-sizing: border-box; position: relative;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .all .head > li.box .allText {width: 100%; height: auto; padding: 19px 19px 19px 36px; word-break: break-all; cursor: pointer;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .selectAll {width: 362px; height: 100%; position: relative;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .selectAll .triangleToolTip {height: auto; width: auto; position: absolute; left: -23px; top: 15px;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .selectAll .triangleToolTip .t1 {width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 18px solid #fff; position: absolute; z-index: 2; left: 6px; transform: rotate(-90deg);} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .selectAll .triangleToolTip .t2 {width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 18px solid #e5e5e5; position: absolute; z-index: 1; transform: rotate(-90deg);} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .selectAll > ul {height: auto; padding: 0; margin: 0;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .selectAll > ul > li > .selectAll {height: auto; width: 100%; box-sizing: border-box; padding: 17px 20px 17px 20px; border-bottom: 1px solid #e5e5e5;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .selectAll > ul > li > .selectAll .opt label span {font-weight: 500;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .selectAll > ul > li > strong {margin: 5px;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .selectAll > ul > li .liDiv > ul {width: calc(100%); box-sizing: border-box; height: 450px; overflow-y: overlay;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .selectAll > ul > li .liDiv > ul::-webkit-scrollbar {height:16px; width:16px;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .selectAll > ul > li .liDiv > ul::-webkit-scrollbar-thumb {border:6px solid transparent;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .selectAll > ul > li .liDiv > ul > strong {margin: 15px; font-size: 13px; word-break: break-all;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .selectAll > ul > li .liDiv > ul > .businessName {margin: 15px 0; font-size: 13px; word-break: break-all;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .selectAll > ul > li .liDiv > ul > .businessName strong {font-weight: 500; color: #383838; margin-left: 22px;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .selectAll > ul > li .liDiv > ul > li {height: auto; width: 100%; padding: 12px 24px 12px 30px; box-sizing: border-box; position: relative;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .selectAll > ul > li .liDiv > ul > li:before {content: ""; position: absolute; height: 1px; width: calc(100% - 54px); bottom: 1px; background: #e5e5e5; left: 30px;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .selectAll > ul > li .liDiv > ul > li .content {margin-left: 10px;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .selectAll > ul > li .liDiv > ul > li .content .top {font-size: 15px; color: #383838; margin-bottom: 7px;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .selectAll > ul > li .liDiv > ul > li .content .bottom {font-size: 12px; color: #383838;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .firstBox .selectAll > ul .business > li .content .bottom {font-size: 12px; color: #383838;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .secondBox > ul {margin: 0; padding: 0; height: auto;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .secondBox > ul > li .selected {margin: 0; padding: 19px 19px 19px 20px; border-bottom: 1px solid #e5e5e5; height: auto; display: flex; align-items: center; padding-left: 30px; box-sizing: border-box; word-break: break-all; cursor: pointer;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .secondBox > ul > li .selected span {margin-left: 5px;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .secondBox > ul > li .liDiv > ul {width: calc(100% -40px); margin: auto; height: 445px; overflow-y:overlay; padding: 0; box-sizing: border-box;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .secondBox > ul > li .liDiv > ul::-webkit-scrollbar {height:16px; width:16px;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .secondBox > ul > li .liDiv > ul::-webkit-scrollbar-thumb {border:6px solid transparent;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .secondBox > ul > li .liDiv > ul > li{height: auto; padding:15px 15px 15px 30px; box-sizing: border-box; align-items: center; display: flex; word-break: break-all; cursor: pointer; position: relative;} .partnerPopup .modalBox .mbBody .mbBodyContents .article .boxContainer .secondBox > ul > li .liDiv > ul > li::before {content: "";height: 1px; width: calc(100% - 56px); left: 28px; position: absolute; background: #e5e5e5; bottom: 0;} .liDiv {width: 100%; margin: 0; padding: 0;} .liDiv > ul {width: 100%; height: 100%;} /* approve popup */ .approvePop {margin: auto;} .approvePop .titleBox {height: 22px; margin-top: 30px; margin-bottom: 30px;} .approvePop .reqInfo .guide {margin-top: 14px;} .approvePop .reqInfo {height: auto; width: 750px; display: flex; margin: auto; padding: 0 20px 0 20px; box-sizing: border-box; background-color: #f8f8f8;} .approvePop .reqInfo .header {height: 36px; width: 100%; margin: auto; background: transparent; border: none; box-shadow: none;font-size: 15px; border-bottom: 1px solid #e5e5e5; padding-bottom: 20px;} .approvePop .reqInfo .header .dlBox {height: auto; width: 100%; display: flex; align-items: flex-start;} .approvePop .reqInfo .dlBox .dl{display: flex; justify-content: flex-start !important;} .approvePop .reqInfo .dlBox .dl .dt {font-size: 14px !important; display: flex !important;} .approvePop .reqInfo .dlBox .dl .dd {font-size: 14px !important; width: auto; display: flex;} .approvePop .reqInfo .dlBox .dl .dd textarea {width: 490px; height: 100px; margin-bottom: 30px; padding: 15px;} /* unapproved partner center */ .unapproved .unapprovedBox {width: 117px; height: 28px; background: url(../img/common/tag_unapproved.svg); border-radius: 3px; position: absolute;} .unapprovedContainer .Box .smallBox .boxCard .unapproved .unapprovedBox > span {display: none;} .unapprovedContainer .design .smallBox .boxCard .cardHead .thumbBox .thumb .unapproved {margin: 8px;} /* app details partner center unapproved*/ .unapprovedAppDetails .contentBox .one {width: 100%;} .unapprovedAppDetails .contentBox .one .detailView .detailVeiwBody .moreBoxInfo > dl > dd.table{min-width: 100%;} .unapprovedAppDetails .contentBox .one .detailView .detailVeiwBody .moreBoxInfo > dl > dd.table > .tableWrap {min-width: 100%;} .unapprovedAppDetails .contentBox .one .detailView .detailVeiwBody .moreBoxInfo > dl > dd.table > .tableWrap > .jsmartable {min-width: 100%;} .unapprovedAppDetails .contentBox .one .detailView .detailVeiwHeader .buttonGroup .firstgroup {border-right: 3px solid #e5e5e5; padding-right: 21px; box-sizing: border-box;} .unapprovedAppDetails .contentBox .one .detailView .detailVeiwHeader .buttonGroup .firstgroup > button {margin: 5px;} .unapprovedAppDetails .contentBox .one .detailView .detailVeiwHeader .thumbBox .appName .unapproved {height: 28px; width: 117px; margin: 8px; background: #d92424; color: #fff; border-radius: 3px;} /* app manager partner center */ .appManager {padding: 20px; box-sizing: border-box;} .appManager .tableWrap .jsmartable tbody tr td .thumb {height: 60px; width: 60px; background-color: #d9d9d9; border-radius: 6px; margin: auto;} .appManager .tableWrap .jsmartable tbody tr td {vertical-align: middle;} .appManager .tableWrap .jsmartable tbody tr td > div {display: flex; margin-left: 20px;} .partnerCenterBox .clHeader .tabs > a {width: 282px; text-align: center;} .partnerCenterBox .tableHead{padding: 20px 20px 10px 0; box-sizing: border-box;} .partnerCenterBox .tableHead .totalNo {display: flex; align-items: center;} .partnerCenterBox .topSection {margin: 30px 0px 20px 20px;} .notiList .subNotiList {padding: 10px; background: #f8f8f8; margin: 10px;} .notiList .subNotiList .subNotiHeader {margin-bottom: 5px;} .notiList .subNotiList .subNotiHeader > strong {font-size: 16px; font-weight: bold;} .partnerCenterBox .tabMobileView {display: none;} .container .body .contents .dcBody .requestView .partnerCenterBox .tabMobileView {display: none;} /* table app manager*/ /* waiting for approval */ .partnerCenterBox .tableWrap .unapprovedTableAppManagerWaiting thead tr th:nth-child(6) {width: 268px;} .partnerCenterBox .tableWrap .unapprovedTableAppManagerWaiting tbody tr td:nth-child(6) button {height: 42px; width: 228px;} /* approval */ .partnerCenterBox .tableWrap .unapprovedTableAppManagerApprove thead tr th:nth-child(6) {width: 268px;} .partnerCenterBox .tableWrap .unapprovedTableAppManagerApprove tbody tr td:nth-child(6) button {height: 42px; width: 228px;} /* declined */ .partnerCenterBox .tableWrap .unapprovedTableAppManagerDeclined thead tr th:nth-child(6) {width: 144px;} .partnerCenterBox .tableWrap .unapprovedTableAppManagerDeclined tbody tr td:nth-child(6) button {height: 42px; width: 104px;} .partnerCenterBox .tableWrap .unapprovedTableAppManagerDeclined thead tr th:nth-child(7) {width: 268px;} .partnerCenterBox .tableWrap .unapprovedTableAppManagerDeclined tbody tr td:nth-child(7) button {height: 42px; width: 228px;} .partnerCenterBox .tableWrap .unapprovedTableAppManagerDeclined thead tr th:nth-child(8) {width: 144px;} .partnerCenterBox .tableWrap .unapprovedTableAppManagerDeclined tbody tr td:nth-child(8) button {height: 42px; width: 104px;} /* cancel */ .partnerCenterBox .tableWrap .unapprovedTableAppManagerCancel thead tr th:nth-child(6) {width: 268px;} .partnerCenterBox .tableWrap .unapprovedTableAppManagerCancel tbody tr td:nth-child(6) button {height: 42px; width: 228px;} .partnerCenterBox .tableWrap .unapprovedTableAppManagerCancel thead tr th:nth-child(7) {width: 144px;} .partnerCenterBox .tableWrap .unapprovedTableAppManagerCancel tbody tr td:nth-child(7) button {height: 42px; width: 104px;} /* webOS register app */ .webOSApp .modalBox .popupStep .stepButton {width: auto;} .webOSApp .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox > dl > dd .logoUploadDiv {width: 400px; height: 226px; margin: 0 0 10px 0px; background-color: #d9d9d9;} .webOSApp .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox > dl > dd .buttonWrap {margin: 0; padding: 0;} .webOSApp .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox > dl > dd .optWrap .opt{margin-left: 10px; width: 120px;} .webOSApp .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .proxy {height: 40px; display: flex; align-items: center; border-bottom: 1px solid #e5e5e5; margin: 30px 0px 30px 0px;} .filterWrap .filterBody fieldset strong {font-size: 16px} /* sign in services before sign in */ .accountBox2 {overflow-y: scroll; display: flex; flex-direction: column; align-items: center; width: 100%; gap: 81px;} .accountBox2 .desc {max-width: 694px; width: 100%; height: auto; position: relative; margin: 141px 0 0 0; gap: 30px; display: flex; flex-direction: column;} .accountBox2 .desc p {padding: 0; margin: 0;} .accountBox2 .solutionContainer {max-width: 1220px; width: 100%; display: flex; justify-content: center; flex-wrap: wrap;} .accountBox2 .solutionContainer .solutionBox {width: 374px; height: 372px; border: 1px solid #dcdcdc; border-radius: 7px; padding: 1px 1px 30px; background-color: #fff; margin: 15px; box-sizing: border-box;} .accountBox2 .solutionContainer .solutionBox .top {height: 209px; width: 100%; position: relative; background: #e9edf6;} .accountBox2 .solutionContainer .solutionBox .top .thumb {width: 185px; height: 111px; display: flex; align-items: center; justify-content: center;} .accountBox2 .solutionContainer .solutionBox .top .thumb.procentric {background: url(../img/common/procentric.svg) no-repeat center;} .accountBox2 .solutionContainer .solutionBox .top .thumb.supersign {background: url(../img/common/supersign.svg) no-repeat center;} .accountBox2 .solutionContainer .solutionBox .top .thumb.prosign {background: url(../img/common/Prosign\ AD.svg) no-repeat center;} .accountBox2 .solutionContainer .solutionBox .top .textContainer {height: 28px; width: 72px; padding: 7px 21px; box-sizing: border-box; background: #637697; display: flex; align-items: center; border-radius: 15px; color: #fff; position: absolute; top: 17px; left: 17px;} .accountBox2 .solutionContainer .solutionBox .bottom {width: 100%; height: calc(100% - 210px); padding: 30px; box-sizing: border-box; display: flex; min-height: 155px;} .accountBox2 .solutionContainer .solutionBox .bottom .head {font-size: 22px; text-align: center; font-weight: bold; margin-bottom: 20px; word-break: break-all;} .accountBox2 .solutionContainer .solutionBox .bottom .sub {display: flex; flex-wrap: wrap; width: 100%; word-break: break-all; margin-bottom: 50px;} .LGsolutionBox {margin: auto;} .LGsolutionBox .solutionContainer {margin: auto; padding: 0; height: auto; width: auto; overflow: auto;} .LGsolutionBox .solutionContainer .solutionBox {margin: 15px; height: auto; width: 374px; min-height: calc(100% - 30px);} .LGsolutionBox .solutionContainer .solutionBoxWrap {padding: 0; margin: 0; position: relative;} .LGsolutionBox .solutionContainer .solutionBoxWrap .buttonWrap {margin: auto; position: absolute; width: 100%; bottom: 40px; display: flex; align-items: center; justify-content: center;} .modalBox .acButtonWrap {display: flex; flex-direction: column; padding: 0 0 30px 0;} .modalBox .acButtonWrap .button {margin: 5px auto; width: calc(100% - 40px);} /* datepicker */ .dateBox {display: flex; align-items: center; position:relative;} .dateBox input {width:calc(100% - 0px); padding:0 40px 0 10px; height:37.5px;} .dateBox .ui-datepicker-trigger {background:#fff; width:30px !important; height:30px; font-size:0; color:transparent; padding:0px; gap:0; position:absolute; right:5px; margin-left:3px;} .dateBox .ui-datepicker-trigger::before {content:""; display:block; width:30px; height:30px; background:url(../img/icon/ic_calendar.svg) no-repeat center; filter:grayscale(1); opacity: 1;} /* sitemap */ .detailView .sitemap {margin:64px 100px;} .detailView .sitemap .title {font-size:18px; border-bottom:2px solid #999; padding-bottom:16px; margin-bottom:32px;} .container .body .contents .dcHeader .title.siteMapTitle {padding: 20px 0;} .container .body .contents .dcHeader .title.siteMapTitle h3 {margin-bottom: 0 !important;} .detailView .sitemap .title h4 {margin: 0 !important; font-size: 18px;} .detailView .sitemap .catagory {display:flex; flex-flow:row wrap; gap: 40px 79px;} .detailView .sitemap .catagory li {display:block; font-size:22px; width:30%;} .detailView .sitemap .catagory li a {display:block; font-weight: bold; font-size:23px; width:100%; border-bottom:1px solid #e9e9e9; padding:20px 0 20px 58px; position: relative; margin-bottom:20px; box-sizing: border-box;} .detailView .sitemap .catagory li.requestApproval a , .detailView .sitemap .catagory li.supportSitemap a {margin-bottom: 0px; padding-left: 58px; box-sizing: border-box;} .detailView .sitemap .catagory ul {margin: 0; padding: 0; width: 100%;} .detailView .sitemap .catagory ul li {margin: 0; padding: 0; width: 100%;} .detailView .sitemap .catagory ul li a {font-size: 16px; color: #555; padding: 24px 0; width: 100%; font-weight: normal;} .detailView .sitemap .catagory .LGsolutionSitemap a::before {content: ""; height: 40px; width: 40px; background: url(../img/common/sitemap_icon_dashboard_n.svg) no-repeat; background-size: cover; position: absolute; left: 0px; bottom: 12px;} .detailView .sitemap .catagory .deviceManagementSitemap > a::before {content: ""; height: 40px; width: 40px; background: url(../img/common/sitemap_icon_device_n.svg) no-repeat; background-size: cover; position: absolute; left: 0px; bottom: 12px;} .detailView .sitemap .catagory .siteManagementSitemap > a::before {content: ""; height: 40px; width: 40px; background: url(../img/common/sitemap_icon_management_n.svg) no-repeat; background-size: cover; position: absolute; left: 0px; bottom: 12px;} .detailView .sitemap .catagory .accountManagementSitemap > a::before {content: ""; height: 40px; width: 40px; background: url(../img/common/sitemap_icon_account_n.svg) no-repeat; background-size: cover; position: absolute; left: 0px; bottom: 12px;} .detailView .sitemap .catagory .licenseManagementSitemap > a::before {content: ""; height: 40px; width: 40px; background: url(../img/common/sitemap_icon_license\ management_n.svg) no-repeat; background-size: cover; position: absolute; left: 0px; bottom: 12px;} .detailView .sitemap .catagory .partnerCenterSitemap > a::before {content: ""; height: 40px; width: 40px; background: url(../img/common/sitemap_icon_partner_n.svg) no-repeat; background-size: cover; position: absolute; left: 0px; bottom: 12px;} .detailView .sitemap .catagory .requestApproval > a::before {content: ""; height: 40px; width: 40px; background: url(../img/common/sitemap_icon_license_n.svg) no-repeat; background-size: cover; position: absolute; left: 0px; bottom: 12px;} .detailView .sitemap .catagory .supportSitemap > a::before {content: ""; height: 40px; width: 40px; background: url(../img/common/sitemap_icon_qna_n.svg) no-repeat; background-size: cover; position: absolute; left: 0px; bottom: 12px;} /* support popup */ .supportContent {overflow: scroll; margin: 0 30px !important;} .supportContent.supportNotice {width: calc(100% - 60px) !important;} .supportPop .mbBodyContents .article .dlBox dl {display: flex; align-items: flex-start !important;} /* support */ .supportSection .snb ul li {padding: 20px 40px 20px 36px !important;} .supportSection .approveMenu {padding: 60px 26px 1px 26px; box-sizing: border-box; overflow-y: scroll;} .supportSection .approveMenu .tools {margin: 0 0 20px 0 !important; width: 100% !important;} .supportSection .approveMenu .fb_ewy .buttonWrap {margin: 10px 0;} .supportSection .approveMenu .fb_ewy .tableHead {margin-top: auto;} .supportSection .approveMenu .bottomButtonWrap {height: auto; width: 100%; display: flex; align-items: center; justify-content: center;} .supportSection .approveMenu .bottomButtonWrap > button {margin: 26px auto 28px auto !important; width: 240px;} .commentIconBox {height: auto; width: auto; background: #a50034; border-radius: 3px; padding: 4px 8px 5px 26px; position: relative; display: inline-flex; align-items: center; color: #fff; box-sizing: border-box; text-align: center; margin: 10px;} .commentIconBox::before {content: ""; background: url(../img/common/ic_chat.svg) no-repeat; height: 14px; width: 14px; margin: 0 5px 0 0; left: 8px; position: absolute;} .approveMenu .tableWrap .jsmartable td {vertical-align: middle;} .approveMenu .supportTableNotice .jsmartable thead tr th {font-weight: normal;} .approveMenu .supportTableNotice .jsmartable tbody tr td:first-child {text-align: left; padding-left: 20px; box-sizing: border-box; border-left: none;} .approveMenu .supportTableNotice .jsmartable tbody tr td:first-child .antDesignePaperClip {white-space: nowrap; width: 250px; overflow: hidden; text-overflow: ellipsis;} .approveMenu .supportTableNotice .jsmartable thead tr th:nth-child(3), .approveMenu .supportTableNotice .jsmartable thead tr th:nth-child(4), .approveMenu .supportTableNotice .jsmartable thead tr th:nth-child(5) {width: 144px;} .approveMenu .supportTableNotice .jsmartable tbody tr td:nth-child(3) button, .approveMenu .supportTableNotice .jsmartable tbody tr td:nth-child(4) button, .approveMenu .supportTableNotice .jsmartable tbody tr td:nth-child(5) button {height: 42px; width: 104px;} .approveMenu .supportQuestionTable .jsmartable thead tr th {font-weight: normal;} .approveMenu .supportQuestionTable .jsmartable thead tr th:nth-child(5), .approveMenu .supportQuestionTable .jsmartable thead tr th:nth-child(6), .approveMenu .supportQuestionTable .jsmartable thead tr th:nth-child(7) {width: 144px;} .approveMenu .supportQuestionTable .jsmartable tbody tr td .button {width: 104px; height: 42px;} /* .designPaper {height: 18px; width: 18px; background: url(../img/common/ant_design.svg);} */ .supportHeader {border: none !important;} .supportBody .dlBox {width: calc(100% - 307px); margin: 50px auto 0 auto;} .supportBody .dlBox .dl {display: flex; margin-top: 25px;} .supportBody .dlBox .dl .dt {font-size: 16px; margin-right: 100px; display: flex; justify-content: flex-start; width: 200px; font-weight: 500;} .supportBody .dlBox .dl .dd {font-size: 16px; display: flex; justify-content: flex-start; width: 100%; height: auto;} .supportBody .dlBox .dl .dd .content {height: 507px; width: 1200px;} .supportBody .dlBox .dl .dd .downloadFileBox {height: auto; max-width: 720px; width: auto; background-color: #f8f8f8; padding: 10px 20px; box-sizing: border-box; margin: 15px 5px; display: flex; align-items: center; border: solid 1px transparent; word-break: break-word;} .supportBody .dlBox .dl .dd .downloadFileBox:hover {background-color: #efefef;} .supportBody .dlBox .dl .dd .downloadFileBox[aria-selected="true"], .supportBody .dlBox .dl .dd .downloadFileBox:active {background-color: #e4e4e4; border: solid 1px #a50034;} .supportBody .dlBox .dl .dd .downloadFileBox:active::after {content:''; font-size:0; display:block; margin-left: auto; width:16px; height:16px; background:url(../img/common/ic_download.svg)no-repeat; background-size:cover; filter:brightness(0); right: 30px;} .supportBody .dlBox .dl .dd .downloadFileBox span {font-size: 16px; max-width: calc(100% - 20px);} .supportBody .dlBox .comment {display: flex; margin: 30px 0; border-top: 2px solid #e0e0e1; width: 100%;} .supportBody .dlBox .comment dl {display: flex; width: 100%; margin-top: 25px; align-items: flex-start;} .supportBody .dlBox .comment dl dt {font-size: 16px; margin-right: 100px; display: flex; justify-content: flex-start; width: 200px;} .supportBody .dlBox .comment dl dd {font-size: 16px; display: flex; justify-content: flex-start; width: 100%; height: auto; flex-direction: column;} .supportBody .dlBox .comment dl dt .required::before {content: ""; background: url(../img/common/icChat.svg) no-repeat; height: 18px; width: 18px; margin: 0 5px 0 0; left: 4px;} .supportBody .dlBox .comment dl dd .acDiv {height: auto; width: calc(100%); background-color: #f8f8f8; margin: 20px 0 20px 0;} .supportBody .dlBox .comment dl dd .acDiv div {font-size: 16px; display: flex; align-items: center; margin: 20px 20px 20px 20px !important; height: auto;} .supportBody .dlBox .comment dl dd .acDiv .acInfo {position: relative; padding-left: 25px; word-break: break-all;} .supportBody .dlBox .comment dl dd .acDiv .acInfo::before {content:''; font-size:0; display:flex; width:24px; height:24px; background:url(../img/common/icUser.svg)no-repeat; background-size:cover;right: 30px; position: absolute; left: 0px;} .modalBox .supportPop .mbBodyContents .article .dlBox dl {display: flex; align-items: center !important;} .registerQuestion .dlBox dl dt {text-align: left !important;} .registerQuestion .dlBox dl dd textarea {width: 100%; height: 100px;} .registerQuestion .dlBox .filesDiv {width: 100%; height: auto;} .registerQuestion .dlBox .filesDiv span {font-size: 16px; margin: 12px;} .registerQuestion .dlBox .filesDiv .fileSection {height: 30px !important; display: flex; align-items: center; background-color: #f0f2f5; margin: 16px 0 12px 0;} .registerQuestion .dlBox .filesDiv button {width: 100%; margin-top: 12px;} .registerQuestion .dlBox .filesDiv .attachedFileBigBox {width: 100%; height: auto;} .registerQuestion .dlBox .filesDiv .attachedFileBigBox .attachedFileBox {width: calc(100% - 2px); height: auto; min-height: 80px; border: 1px solid #d0d1d2; padding: 20px; box-sizing: border-box;} .registerQuestion .dlBox .filesDiv .attachedFileBigBox .attachedFileBox .thumbBox {width: 116px; height: 70px; margin: 5px; background-color: #d9d9d9;} .registerQuestion .dlBox .filesDiv .attachedFileBigBox .attachedFileBox.attactheadFileBoxEdit .fileName {margin: 0 auto 0 0; padding: 0 5px; box-sizing: border-box;} .registerQuestion .dlBox .filesDiv .attachedFileBigBox .attachedFileBox .fileName {width: 444px; font-size: 16px; margin: 0 30px 0 26px;} .registerQuestion .dlBox .filesDiv .attachedFileBigBox .attachedFileBox .fileSize {width: 40px; font-size: 16px; margin: 0 15px;} .registerQuestion .dlBox .filesDiv .attachedFileBigBox .attachedFileBox button {margin: auto;} /* .registerQuestion .dlBox .filesDiv .attachedFileBigBox .attachedFileBox button {margin: 0 20px 0 20px;} */ .registerQuestion .dlBox .radioDIv {height: auto; display: flex; flex-direction: column; text-align: left; margin-top: 35px;} .registerQuestion .dlBox .radioDIv .opt {margin-top: 18.5px;} /* papaerClip */ .designPaper {height: 18px; width: 18px; display: flex; align-items: center; margin-right: 14px;} .designPaper::before {content: ""; background: url(../img/common/ant_design.svg) no-repeat; height: 18px; width: 18px; display: flex; justify-content: center; align-items: center; position: absolute;} /* partner center popup step 1 */ .modalBox .mbBody .licensingPopupTwo .article .dlBox dl dt {width:200px;} .popupLicense .modalBox .mbBody .licensingPopupTwo .article .dlBoxGroup .dlBox .dl .dt.deviceReq {margin-top: 5px;} .popupLicense .modalBox .mbBody .licensingPopupTwo .article .dlBoxGroup .dlBox .dl.period .dd .licensingDatepick {width: calc(100%); display: flex; justify-content: flex-start;} .popupLicense .modalBox .mbBody .licensingPopupTwo .article .dlBoxGroup .dlBox .dl.period .dd .licensingDatepick > div > .dateBox {width: calc=(245px);} .popupLicense .modalBox .mbBody .licensingPopupTwo .article .dlBoxGroup .dlBox .dl.period .dd .licensingDatepick .symbolTilt {width: 40px;height: 71px; padding: auto; box-sizing: border-box; font-size: 16px;} .popupLicense .modalBox .mbBody .licensingPopupTwo .article .dlBoxGroup .dlBox .dl.licenseType .dd .opt {width: 116px; margin-right: 22px;} .popupLicense .modalBox .mbBody .licensingPopupTwo .article .dlBoxGroup .dlBox .dl.serviceType .dd .serviceBox .fb_e .opt {width: auto; margin-right: 15px;} .popupLicense .modalBox .mbBody .licensingPopupTwo .article .dlBoxGroup .dlBox .dl.serviceType .dd .serviceBox .fb_e .opt:last-child {margin-right: 0;} /* view popup */ .modalBox .viewBody {height: 876px;} .modalBox .viewBody .mbBodyContents {height: 100%; max-height: 876px !important;} .modalBox .mbBody .mbBodyContents .article .viewPopup {width: calc(100% - 40px); margin: auto; height: auto;} .modalBox .mbBody .mbBodyContents .article .viewPopup .waitingBox {height: auto; min-height: 30px; display: flex; align-items: center; justify-content: flex-end; margin: 4px auto 2px; word-break: break-all; font-size: 14px;} .modalBox .mbBody .mbBodyContents .article .viewPopup .partnerCompanyInfo {width: 100%; display: flex; flex-direction: column;} .modalBox .mbBody .mbBodyContents .article .viewPopup .partnerCompanyInfo .head {width: 100%; height: auto; display: flex; align-items: center; border-bottom: 1px solid #e5e5e5; padding-bottom: 20px;} .modalBox .mbBody .mbBodyContents .article .viewPopup .partnerCompanyInfo .head h3 {font-size: 16px; font-weight: bold; color: #555;} .modalBox .mbBody .mbBodyContents .article .viewPopup .partnerCompanyInfo div {margin-bottom: 20px;} .modalBox .mbBody .mbBodyContents .article .viewPopup .partnerCompanyInfo .contentPartneCompanyInfo {display: flex; flex-wrap: wrap;} .modalBox .mbBody .mbBodyContents .article .viewPopup .partnerCompanyInfo .contentPartneCompanyInfo .thumbBox {height: 120px; width: 120px; border-radius: 10px; background: #d9d9d9; margin: 20px 60px 30px 10px;} .modalBox .mbBody .mbBodyContents .article .viewPopup .partnerCompanyInfo .contentPartneCompanyInfo .compDetails {max-width: calc(100% - 200px); display: flex; flex-wrap: wrap;} .modalBox .mbBody .mbBodyContents .article .viewPopup .partnerCompanyInfo .contentPartneCompanyInfo .compDetails .companyName p {margin-bottom: 10px; word-break: break-all;} .modalBox .mbBody .mbBodyContents .article .viewPopup .partnerCompanyInfo .contentPartneCompanyInfo .compDetails .companyName p.phead {font-size: 13px;} .modalBox .mbBody .mbBodyContents .article .viewPopup .partnerCompanyInfo .contentPartneCompanyInfo .compDetails .companyName p.pbody {font-size: 16px;} .modalBox .mbBody .mbBodyContents .article .viewPopup .partnerCompanyInfo .contentPartneCompanyInfo .compDetails .companyDes p {margin-bottom: 10px; word-break: break-all;} .modalBox .mbBody .mbBodyContents .article .viewPopup .partnerCompanyInfo .contentPartneCompanyInfo .compDetails .companyDes p.phead {font-size: 13px; word-break: break-all;} .modalBox .mbBody .mbBodyContents .article .viewPopup .partnerCompanyInfo .contentPartneCompanyInfo .compDetails .companyDes p.pbody {font-size: 16px; word-break: break-all;} .modalBox .mbBody .mbBodyContents .article .viewPopup .serverInfo {display: flex; justify-content: flex-start; width: 100%; flex-direction: column;} .modalBox .mbBody .mbBodyContents .article .viewPopup .serverInfo .head {height: auto; width: 100%; display: flex; padding-bottom: 20px; align-items: center; border-bottom: 1px solid #e5e5e5; margin-bottom: 20px;} .modalBox .mbBody .mbBodyContents .article .viewPopup .serverInfo .head h3 {font-size: 16px; font-weight: bold; color: #555;} .modalBox .mbBody .mbBodyContents .article .viewPopup .serverInfo .serverContent {width: 100%; margin-bottom: 24px; padding: 0; display: flex; justify-content: flex-start;} .modalBox .mbBody .mbBodyContents .article .viewPopup .serverInfo .serverContent > div {width: 50%; padding-right: 10px;} .modalBox .mbBody .mbBodyContents .article .viewPopup .serverInfo .serverContent > div > div {margin-bottom: 24px;} .modalBox .mbBody .mbBodyContents .article .viewPopup .serverInfo .serverContent > div > div > p {margin-bottom: 10px; word-break: break-all;} .modalBox .mbBody .mbBodyContents .article .viewPopup .serverInfo .serverContent .left > div .phead {font-size: 13px; word-break: break-all;} .modalBox .mbBody .mbBodyContents .article .viewPopup .serverInfo .serverContent .left > div .pbody {font-size: 16px; word-break: break-all;} .modalBox .mbBody .mbBodyContents .article .viewPopup .serverInfo .serverContent .right > div .phead {font-size: 13px; word-break: break-all;} .modalBox .mbBody .mbBodyContents .article .viewPopup .serverInfo .serverContent .right > div .pbody {font-size: 16px; word-break: break-all;} .modalBox .mbBody .mbBodyContents .article .viewPopup .proxy {display: flex; justify-content: flex-start; width: calc(100% - 48px); flex-direction: column; margin: 0 24px;} .modalBox .mbBody .mbBodyContents .article .viewPopup .proxy .head {height: auto; padding-bottom: 20px; word-break: break-all; width: 100%; display: flex; align-items: center; border-bottom: 1px solid #e5e5e5; margin-bottom: 20px; position: relative;} .modalBox .mbBody .mbBodyContents .article .viewPopup .proxy .head h3 {font-size: 16px; font-weight: bold; color: #555;} .modalBox .mbBody .mbBodyContents .article .viewPopup .proxy .proxyContent {width: 100%; margin-bottom: 24px; box-sizing: border-box; display: flex; justify-content: flex-start;} .modalBox .mbBody .mbBodyContents .article .viewPopup .proxy .proxyContent > div {width: 100%;} .modalBox .mbBody .mbBodyContents .article .viewPopup .proxy .proxyContent > div > div {margin-bottom: 24px;} .modalBox .mbBody .mbBodyContents .article .viewPopup .proxy .proxyContent > div > div > p {margin-bottom: 10px; word-break: break-all;} .modalBox .mbBody .mbBodyContents .article .viewPopup .proxy .proxyContent .left > div .phead {font-size: 13px; word-break: break-all;} .modalBox .mbBody .mbBodyContents .article .viewPopup .proxy .proxyContent .left > div .pbody {font-size: 16px; word-break: break-all;} .modalBox .mbBody .mbBodyContents .article .viewPopup .comment .head {height: auto; padding-bottom: 20px; width: 100%; display: flex; align-items: center; border-bottom: 1px solid #e5e5e5; margin-bottom: 20px; position: relative;} .modalBox .mbBody .mbBodyContents .article .viewPopup .comment .head .h3 {font-size: 16px; font-weight: bold; color: #555;padding-left: 14px;} .modalBox .mbBody .mbBodyContents .article .viewPopup .comment .commentDiv > p {word-break: break-all;} /* view popup with comment */ .modalBox.viewCommentPopup .mbBody .deviceView .customerInfo .body .dlBoxGroup .dlBox.fiveChild dl:nth-child(1) {order: 1;} .modalBox.viewCommentPopup .mbBody .deviceView .customerInfo .body .dlBoxGroup .dlBox.fiveChild dl:nth-child(2) {order: 3;} .modalBox.viewCommentPopup .mbBody .deviceView .customerInfo .body .dlBoxGroup .dlBox.fiveChild dl:nth-child(3) {order: 5;} .modalBox.viewCommentPopup .mbBody .deviceView .customerInfo .body .dlBoxGroup .dlBox.fiveChild dl:nth-child(4) {order: 2;} .modalBox.viewCommentPopup .mbBody .deviceView .customerInfo .body .dlBoxGroup .dlBox.fiveChild dl:nth-child(5) {order: 4;} /* register my app */ .modalBox .mbBody.regMA {padding: 0; box-sizing: border-box;} .modalBox .mbBody.regMA .mbBodyContents {padding: 14px 40px 40px 40px; box-sizing: border-box;} .modalBox .mbBody.regMA .registerMyAppOne .article .dlBoxGroup .dlBox {margin: 0; width: 100% !important; padding: 0; box-sizing: border-box;} .registerMyApp .article .dlBoxGroup .dlBox {width: 100%; margin: 40px 0 33px; box-sizing: border-box;} .registerMyApp .article .dlBoxGroup .dlBox dl > dt {text-align: left !important;} .registerMyApp .article .dlBoxGroup .dlBox dl > dd > span {font-size: 12px; display: block; margin-top: 10px;} .registerMyApp .article .dlBoxGroup .screenshotUpload {margin: 31px 0 0 0; padding: 0; box-sizing: border-box;} .registerMyApp .article .dlBoxGroup .screenshotUpload .appSS {font-size: 16px; color: #555; margin: 11px 0 16px !important;} .registerMyApp .article .dlBoxGroup .screenshotUpload .bgGrey {width: 100%; height: auto; min-height: 30px; padding: 9px 10px; background: #f0f2f5; display: flex; align-items: center; box-sizing: border-box; margin-top: 16px; margin-bottom: 12px; word-break: break-all;} .registerMyApp .article .dlBoxGroup .screenshotUpload .bgGrey > span {font-size: 12px; color: #383838;} .registerMyApp .article .dlBoxGroup .screenshotUpload .ssTopSection {font-size: 14px; margin: 12px 0; width: calc(100% - 30px);} .registerMyApp .article .dlBoxGroup .buttonWrap {width: calc(100%); height: auto; margin: 16px auto; padding: 0 !important; box-sizing: border-box;} .registerMyApp .article .dlBoxGroup .buttonWrap .button {width: 100%; height: 42px; margin: 0;} .registerMyApp .article .dlBoxGroup .screenshotUpload .ssBox {height: auto; min-height: 80px; width: calc(100% - 2px); margin: 5px 0; border: solid 1px #d0d1d2;} .registerMyApp .article .dlBoxGroup .screenshotUpload .ssBox .slNo {height: 16px; width: 20px; margin: 15px;} .registerMyApp .article .dlBoxGroup .screenshotUpload .ssBox .ssThumb {width: 116px; height: 70px; margin: 5px; background-color: #d9d9d9;} .registerMyApp .article .dlBoxGroup .screenshotUpload .ssBox .ssName {font-size: 16px; width: 250px; word-break: break-all; margin: auto 23px; height: auto; display: block; padding: 5px 0;} .registerMyApp .article .dlBoxGroup .screenshotUpload .ssBox .ssSize {width: 39px; height: 79px; word-break: break-all; display: flex; align-items: center; overflow-y: hidden;} .registerMyApp .article .dlBoxGroup .screenshotUpload .ssBox .ssUpDownButtons {margin: auto 30px; width: auto; display: flex; align-items: center;} .registerMyApp .article .dlBoxGroup .screenshotUpload .ssBox .ssUpDownButtons .button {margin: auto 5px;} /* register my app one */ .registerMyAppOne .article .dlBoxGroup {height: auto;} .registerMyAppOne .article .dlBoxGroup .dlBox {height: auto; width: calc(100% - 40px); margin: auto;} .registerMyAppOne .article .dlBoxGroup .dlBox dt {text-align: left !important;} .registerMyAppOne .article .dlBoxGroup .basicInfo dt {text-align: right !important;} .registerMyAppOne .article .dlBoxGroup .dlBox .scope dd .checkboxDiv .opt {width: 116px; margin: 0 16px 0 0;} .registerMyAppOne .article .dlBoxGroup .dlBox .scope.solutionType dd .checkboxDiv .opt {width: auto; margin: 0 22px 0 0;} .registerMyAppOne .article .dlBoxGroup .dlBox .scope dd .checkboxDiv .opt label p {margin: 0 0 0 10px;} .registerMyAppOne .article .dlBoxGroup .dlBox .scope dd .uploaded {height: auto; width: 100%; background: #f0f2f5; display: flex; align-items: center; padding: 10px; box-sizing: border-box;} .registerMyAppOne .article .dlBoxGroup .dlBox .scope dd .uploaded p {font-size: 12px;} .registerMyAppOne .article .dlBoxGroup .dlBox .scope dd .solutionBox {display: flex; flex-direction: column;} .registerMyAppOne .article .dlBoxGroup .dlBox .solution dd .solutionBox {display: block;} .registerMyAppOne .article .dlBoxGroup .dlBox .solution dd .solutionBox .opt {display: block; margin: 16px 0;} .registerMyAppOne .article .dlBoxGroup .dlBox .solution dd .solutionBox .opt label p {margin: 0 0 0 10px;} /* site Management */ .customContentBox {height: calc(100% - 60px) !important;} .customContentBox.siteManagementContent {width: calc(100% - 40px) !important; margin: auto; justify-content: center;} .customContentBox.siteManagementContent .detailView {height: calc(100% - 80px) !important; width: auto; margin: auto;} .customContentBox .detailView {height: calc(100%) !important; width: calc(100%);} .customContentBox .detailView .VeiwBody {height:calc(100% - 79px); margin:0 30px;} .customContentBox .detailView .VeiwBody .siteManagement {margin: 80px auto;} .customContentBox .detailView .VeiwBody .siteManagement {border: 1px solid red;} .customContentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li .item .title {display: flex; flex-direction: column;} .customContentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li .item .title div.BName {font-size: 15px;} .customContentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li .item .title p {font-size: 14px; word-break: break-all;} .customContentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnHeader .tools {justify-content: space-between;} .customContentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnHeader .tools .nItems {font-size: 14px; display: flex; margin-top: auto;} .customContentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnHeader .tools .nItems .selected {font-size: 14px;} .customContentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li .item .title {align-items: flex-start !important; justify-content: flex-start;} .customContentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li .item {height: 100%; padding: 0; margin: 0; display: flex; align-items: center;} .customContentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox {display:flex; flex-direction:column; height: calc(100% - 30px); font-size:16px; margin:0;} .customContentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnTitle {margin-bottom:10px; order:1; position: relative; height: 0px; top: -53px;} .customContentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li {background: #f8f8f8;} .customContentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul {background: #fff;} .customContentBox .detailView .VeiwBody .siteManagement .columnWrap .columnBox .columnBody .listBox ul li:hover {background: #efefef;} .mobileDivSNB {display: none; margin-bottom: 20px;} .mobileDivSNB .button.circle.catagory {margin-right: 10px; height: 24px; width: 24px; display: flex; align-items: center; justify-content: center;} .mobileDivSNB strong {font-size: 16px; font-weight: normal; word-break: break-all; max-width: calc(100% - 50px);} /* support popup */ .supportPop .mbBodyContents .article .dlBox dl dd strong {font-size: 16px;} .supportPop.smCB {margin: 20px 0 30px 0;} .supportPop.smAB {margin: 0 0 40px 0;} .supportPop.smEB {margin: 0 0 40px 0;} .supportPop.smAP {margin: 0 0 30px 0;} .supportPop.smEP {margin: 0 0 30px 0;} /* assign role */ .assignRoleModal .popupStep .stepButton {width: 100px !important;} .assignRoleModal .mbBody .mbBodyContents .article .dlBox .email dt {min-width: 205px;} .assignRoleModal .mbBody .mbBodyContents .emailToAssign {text-align: center; display: flex; align-items: center; flex-direction: column; word-break: break-all;} .assignRoleModal .mbBody .mbBodyContents .emailToAssign p {margin-top: 10px; margin-bottom: 14px; font-size: 16px; word-break: break-all;} .assignRoleModal .mbBody .mbBodyContents .emailToAssign strong {font-weight: bold; font-size: 24px; word-break: break-all;} .assignRoleModal .mbBody .mbBodyContents .roleAssignment {padding: 30px 20px;} .assignRoleModal .mbBody .mbBodyContents .roleAssignment .checkBoxOne {margin-top: 16px;} .assignRoleModal .mbBody .mbBodyContents .roleAssignment .roleAssignmentBySolution {word-break: break-all;} .assignRoleModal .mbBody .mbBodyContents .roleAssignment .roleAssignmentBySolution .roleAssignmentBySolutionBox {margin:18px 0 0 0 ; background: #f8f8f8; display: flex; flex-direction: column; padding: 20px; box-sizing: border-box;} .assignRoleModal .mbBody .mbBodyContents .roleAssignment .roleAssignmentBySolution .roleAssignmentBySolutionBox strong {font-weight: 500; font-size: 14px; color: #383838; margin: 0 0 20px 0;} .assignRoleModal .mbBody .mbBodyContents .roleAssignment .roleAssignmentBySolution strong {font-size: 16px; font-weight: bold; color: #555;} .assignRoleModal .mbBody .mbBodyContents .roleAssignment p {font-size: 14px; margin-top: 10px; margin-left: 30px; word-break: break-all;} .assignRoleModal .mbBody .mbBodyContents .stepTwo .dlBox dl dt {width: 260px !important; margin-right: 80px; word-break: break-all;} .assignRoleModal .mbBody .mbBodyContents .stepTwo .dlBox dl dd button {width: 320px; height: 42px; line-height: 1;} .assignRoleModal .mbBody .mbBodyContents .stepTwo .dlBox strong {font-size: 14px; margin: 24px 0; word-break: break-all; font-weight: 500; color: #383838;} .assignRoleModal .mbBody .mbBodyContents .summaryDivOne p {margin: 30px auto; text-align: center; font-size: 16px; word-break: break-all;} /* account management */ /* .customBody .snb {overflow-y: scroll;} */ .customBody .snb > ul > li.active div a {color: #a50034;} .customBody .snb > ul > li[aria-selected="true"] div a {color: #a50034;} .customBody .snb > ul > li .categoryIcon {display: flex;align-items: center;} .customBody .snb > ul > li .categoryIcon::before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_category_n.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li.active .categoryIcon::before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_category_s.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li:active .categoryIcon::before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_category_s.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li[aria-selected="true"] .categoryIcon::before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_category_s.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li .platformUserIocn:before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_user_n.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li.active .platformUserIocn:before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_user_s.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li:active .platformUserIocn:before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_user_s.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li[aria-selected="true"] .platformUserIocn:before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_user_s.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li .licenseReqIc:before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_license_n.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li:active .licenseReqIc::before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_license_s.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li.active .licenseReqIc:before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_license_s.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li[aria-selected="true"] .licenseReqIc:before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_license_s.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li .webOSPartnerIc:before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_partner_n.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li.active .webOSPartnerIc:before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_partner_s.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li:active .webOSPartnerIc:before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_partner_s.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li[aria-selected="true"] .webOSPartnerIc:before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_partner_s.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li .appManagerIc:before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_app_manager_n.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li.active .appManagerIc:before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_app\ manager_s.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li:active .appManagerIc:before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_app\ manager_s.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li[aria-selected="true"] .appManagerIc:before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_app\ manager_s.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li .advertiserIc:before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_Advertiser_n.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li.active .advertiserIc:before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_Advertiser_s.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li:active .advertiserIc:before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_Advertiser_s.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li[aria-selected="true"] .advertiserIc:before {content:''; display:block; width:20px; height:20px; background:url(../img/common/ic_Advertiser_s.svg)no-repeat; position:absolute; top:31px; left:35px; transform:translate(0, -50%);} .customBody .snb > ul > li {height: 100%; width: 100%; position: relative;} .customBody .snb > ul > li a {font-size: 16px;} .customBody .snb > ul > ul {height: auto; width: 100%;} .customBody .snb > ul > li:first-child {border-radius: 5px 0px 0px 0px; background-color: #fff;} .modalBox .mbBody .mbBodyContents .article .dlBoxGroup.acManagement {padding: 0 20px;} .modalBox .mbBody .mbBodyContents .article .dlBoxGroup.acManagement .dlBox dl {align-items: center; justify-content: flex-start;} .modalBox .mbBody .mbBodyContents .article .dlBoxGroup.acManagement .dlBox dl dt {text-align: left;} /* .customBody .snb > ul > li:first-child a {margin: 0 0 0 5px;} */ .customBody .snb > ul > li {height: auto; width: calc(100% - 0px); border: none; border-bottom: solid 1px #e5e5e5; padding: 20px 40px 20px 65px; box-sizing: border-box; background: #fff; word-break: break-all; cursor: pointer;} .customBody .snb > ul > ul li {height: 56px; width: calc(100% - 0px); background-color: #f8f8f8; padding-left: 53px;box-sizing: border-box; border-bottom: solid 1px #e5e5e5;} .customBody .snb > ul > li.active {border: solid 1px #a50034;background: #e4e4e4;} .customBody .snb > ul > li.active a {color: #a50034;} .customBody .snb > ul > li:active {outline-offset: -2px; outline: solid 1px #a50034;background: #e4e4e4;} .customBody .snb > ul > li:active a {color: #a50034 !important;} .customBody .snb > ul > li.active:first-child {border-radius: 9px 0 0 0;} .customBody .snb > ul > li[aria-selected="true"] {border: solid 1px #a50034;background: #e4e4e4;} .customBody .snb > ul > ul li.active {width: calc(100%); border: solid 1px #a50034; color: #a50034;} .customBody .snb > ul > ul li:hover a {text-decoration: underline;} .customBody .snb > ul > ul li:hover a:hover {text-decoration: underline;} .customBody .snb > ul > ul li:hover a:active {text-decoration: #a50034;} .customBody .snb > ul > ul li[aria-selected="true"] {width: calc(100%); border: solid 1px #a50034; color: #a50034;} .customBody .snb > ul > ul li[aria-selected="true"] a {color: #a50034;} .customBody .snb > ul > ul li.active a {color: #a50034;} /* .customBody .snb > ul > li > a {margin: 0 0 0 20px; font-size: 16px;} */ .customBody .snb > ul > li.active > a {color: #a50034;} .customBody .snb > ul > li[aira-selected="true"] > a {color: #a50034;} .customBody .snb > ul > ul > li:active > a {color: #a50034;} .customBody .snb > ul > li:hover {background-color: #efefef; text-decoration: underline;} .customBody .snb > ul > li.spl {pointer-events: none;} .customBody .snb > ul > li.spl > div {font-size: 16px;} .customBody .snb > ul > li.spl:hover {background-color: #fff; text-decoration: none; cursor: text;} .customBody .snb > ul > li.spl a:hover {text-decoration: none; color: #383838; cursor: text;} .customBody .snb > ul > li:hover > a {color: #383838;} /* .customBody .snb > ul > li > a:hover {color: #383838;} */ .customBody .snb .accountSublist {width: 100%; height: auto;} .customBody .snb .accountSublist .head {width: 100%; padding: 10px 20px 11px 20px; box-sizing: border-box; border-bottom: 1px solid #e5e5e5;} .customBody .snb .accountSublist .head > a {font-size: 14px; font-weight: 500; color: #383838; word-break: break-all;} .customBody .snb .accountSublist ul {width: 100%; height: auto;} .customBody .snb .accountSublist ul li {width: 100%; background-color: #fff;} .customBody .snb .accountSublist ul li .businessName {width: 100%; background-color: #fff; position: relative; border-bottom: 1px solid #e5e5e5; padding-left: 36px; box-sizing: border-box; cursor: pointer;} .customBody .snb .accountSublist ul li:hover .businessName > div > a {text-decoration: underline; color: #383838;} .customBody .snb .accountSublist ul li .businessName > div > a {font-size: 16px; font-weight: normal; color: #383838;} .customBody .snb .accountSublist ul li .businessName {width: 100%; padding: 20px 40px 20px 6px; background-color: #fff; position: relative; border-bottom: 1px solid #e5e5e5; box-sizing: border-box; word-break: break-all;} .customBody .snb .accountSublist ul li .businessName:hover {background: #efefef;} .customBody .snb .accountSublist ul li .businessName a {margin: 0 0 0 4px; font-size: 16px; max-width: 240px; margin-left: 35px;} .customBody .snb .accountSublist ul li.subGroupOpen:first-child {border-radius: 13px 0 0 0;} .customBody .snb .accountSublist ul li.subGroupOpen:first-child .groupHead {border-radius: 13px 0 0 0;} .customBody .snb .accountSublist ul li.subGroupOpen {height: auto; width: 100%;} .customBody .snb .accountSublist ul li.subGroupOpen .groupHead {padding: 20px 40px 20px 36px; box-sizing: border-box; border-bottom: 1px solid #e5e5e5;} .customBody .snb .accountSublist ul li.subGroupOpen .groupHead a {margin: 0 0 0 4px; font-size: 16px; max-width: 240px;} .customBody .snb .accountSublist ul li.subGroupOpen .groupHead:hover {background: #efefef; text-decoration: underline;} .customBody .snb .accountSublist ul li.subGroupOpen .groupHead:active{outline-offset: -2px; background-color: #e4e4e4; outline:1px solid #a50034;} .customBody .snb .accountSublist ul li.subGroupOpen .groupHead:active a {color: #a50034;} .customBody .snb .accountSublist ul li.subGroupOpen .groupHead[aria-selected="true"] {outline-offset: -2px; background-color: #e4e4e4; outline:1px solid #a50034;} .customBody .snb .accountSublist ul li.subGroupOpen .groupHead[aria-selected="true"] a {color: #a50034;} .customBody .snb .accountSublist ul li.subGroupOpen .navFirstItem {border-radius: 9px 0 0 0; position: relative;} .customBody .snb .accountSublist ul li .subgroup{height: auto; width: 100%;} .customBody .snb .accountSublist ul li .subgroup ul {height: auto; width: 100%;} .customBody .snb .accountSublist ul li .subgroup ul li {width: 100%; padding: 16px 30px 16px 53px; box-sizing: border-box; background: #f8f8f8; font-size: 15px; cursor: pointer; word-break: break-all; position: relative;} .customBody .snb .accountSublist ul li .subgroup ul li .buttonWrap {width: 100%; height: auto;} .customBody .snb .accountSublist ul li .subgroup ul li .buttonWrap button {width: 100%; height: 33px;} .customBody .snb .accountSublist ul li .subgroup ul li::before {content: ""; background: #e5e5e5; height: 1px; width: calc(100% - 60px); bottom: 0; left: 30px; position: absolute;} .customBody .snb .accountSublist ul li .subgroup ul li:active{outline-offset: -2px; background-color: #e4e4e4; outline:1px solid #a50034;} .customBody .snb .accountSublist ul li .subgroup ul li:active::before {height: 0;} .customBody .snb .accountSublist ul li .subgroup ul li:active a {color: #a50034;} .customBody .snb .accountSublist ul li .subgroup ul li a {font-size: 15px;} .customBody .snb .accountSublist ul li .subgroup ul li.dDay {padding-right: 85px; position: relative;} .customBody .snb .accountSublist ul li .subgroup ul li.dDay::after {content:''; font-size: 15px; color: #fff; width: 45px; height: 20px; background: #ff0404; position:absolute; display: flex; align-items: center; justify-content: center; border-radius: 3px; right: 20px;} .customBody .snb .accountSublist ul li .subgroup ul li.dDay.d1::after {content:'D-1';} .customBody .snb .accountSublist ul li .subgroup ul li.dDay.d2::after {content:'D-2';} .customBody .snb .accountSublist ul li .subgroup ul li.dDay.d3::after {content:'D-3';} .customBody .snb .accountSublist ul li .subgroup ul li.dDay.d4::after {content:'D-4';} .customBody .snb .accountSublist ul li .subgroup ul li.dDay.d5::after {content:'D-5';} .customBody .snb .accountSublist ul li .subgroup ul li.dDay.d6::after {content:'D-6';} .customBody .snb .accountSublist ul li .subgroup ul li.dDay.d7::after {content:'D-7';} .customBody .snb .accountSublist ul li .subgroup ul li.dDay.d8::after {content:'D-8';} .customBody .snb .accountSublist ul li .subgroup ul li.dDay.d9::after {content:'D-9';} .customBody .snb .accountSublist ul li .subgroup ul li.dDay.d10::after {content:'D-10';} .customBody .snb .accountSublist ul li .subgroup ul li:hover {background: #efefef; text-decoration: underline;} .customBody .snb .accountSublist ul li .subgroup ul li[aria-selected="true"] {border: 1px solid #a50034; color: #a50034; background-color: #e4e4e4;} .customBody .snb .accountSublist ul li .subgroup ul li[aria-selected="true"]::before {height: 0;} .customBody .snb .accountSublist ul li .subgroup ul li[aria-selected="true"] a{color: #a50034;} .accountManagement .contents .dcBody .detailView .acMenu {padding: 20px; box-sizing: border-box; width: calc(100% - 330px); height: 100%; overflow-y: scroll;} .accountManagement .contents .dcHeader .tools {padding: 0 20px 0 0; box-sizing: border-box;} .accountManagement .contents .dcHeader .tools button {margin-right: 5px;} .accountManagement .contents .dcBody .detailView .acMenu .tableHead {margin-bottom: 10px;} .accountManagement .contents .dcBody .detailView .acMenu .headerTopacM {height: 46px; width: calc(100% - 12px); background: #e2e2e2; margin: 10px 6px 0px 6px; padding: 9px 4px 9px 20px; box-sizing: border-box; position: relative; z-index: 2; top: 30px;} .accountManagement .contents .dcBody .detailView .acMenu .headerTopacM .tableHead {margin: 0 20px;} .accountManagement .contents .dcBody .detailView .acMenu .acHeader .tools {margin: 8px 8px 32px auto;} .accountManagement .contents .dcBody .detailView .acMenu .tableWrap table tbody tr td:nth-child(6) {width: 144px;} .accountManagement .contents .dcBody .detailView .acMenu .tableWrap table tbody tr td:nth-child(7) {width: 144px;} .accountManagement .contents .dcBody .detailView .acMenu .tableWrap table tbody tr td:nth-child(6) button.button {width: 104px; height: 42px;} .accountManagement .contents .dcBody .detailView .acMenu .tableWrap table tbody tr td:nth-child(7) button.button {width: 104px; height: 42px;} /* popup */ .assignRoleModal .mbBody .mbBodyContents .head .strong {font-size: 16px; color: #383838;} .assignRoleModal .mbBody .mbBodyContents .head {margin: 8px 0; word-break: break-all;} .assignRoleModal .mbBody .mbBodyContents .head > strong {display: flex; align-items: center;} .assignRoleModal .mbBody .mbBodyContents .tools {margin: 10px 0;} .assignRoleModal .mbBody .mbBodyContents .listBox {height: 335px; width: calc(100% - 2px); border-radius: 10px; border: solid 1px #d9d9d9; background-color: #fff;} .assignRoleModal .mbBody .mbBodyContents .listBox .selectAll {height: auto; border-bottom: 1px solid #d9d9d9; padding:17px 17px 17px 20px; box-sizing: border-box;} .assignRoleModal .mbBody .mbBodyContents .listBox .selectAll .text {font-size: 14px; font-weight: normal; word-break: break-all;} .assignRoleModal .mbBody .mbBodyContents .listBox ul {height: 280px; width: 100%; overflow-y: scroll;} .assignRoleModal .mbBody .mbBodyContents .listBox ul li {height: auto; padding: 11px 11px 11px 20px; box-sizing: border-box; display: flex; align-items: center; cursor: pointer; position: relative;} .assignRoleModal .mbBody .mbBodyContents .listBox ul li::before {content: ""; height: 1px; width: calc(100% - 40px); left: 20px; bottom: 0; background: #d9d9d9; position: absolute;} .assignRoleModal .mbBody .mbBodyContents .listBox ul li .text div strong {font-size: 15px; font-weight: normal;} .assignRoleModal .mbBody .mbBodyContents .listBox ul li .text div p {font-size: 12px;} .assignRoleModal .mbBody .mbBodyContents .tools.props .inputWrap:last-child {margin-left: 20px;} .assignRoleModal .mbBody .mbBodyContents .bigBox {width: 100%; height: 330px; display: flex; justify-content: flex-start;} .assignRoleModal .mbBody .mbBodyContents .bigBox .one {width: 234px; overflow-y: scroll; height: 100%;} .assignRoleModal .mbBody .mbBodyContents .bigBox .one ul{width: 100%;} .assignRoleModal .mbBody .mbBodyContents .bigBox .one ul li {width: 100%; height: 56px; border-bottom: 1px solid #e5e5e5;} .assignRoleModal .mbBody .mbBodyContents .bigBox .two {width: calc(100% - 235px);} .assignRoleModal .mbBody .mbBodyContents .bigBox {width: calc(100% - 2px); border: 1px solid #d9d9d9; border-radius: 10px;} .assignRoleModal .mbBody .mbBodyContents .bigBox .one {width: calc(234px); overflow-y: scroll; border-right: 1px solid #e5e5e5;} .assignRoleModal .mbBody .mbBodyContents .bigBox .one ul {height: auto; width: 100%;} .assignRoleModal .mbBody .mbBodyContents .bigBox .one ul li {height: auto; width: 100%; padding: 11px 11px 11px 20px; box-sizing: border-box; cursor: pointer;} .assignRoleModal .mbBody .mbBodyContents .bigBox .one ul li:hover {background: #efefef;} .assignRoleModal .mbBody .mbBodyContents .bigBox .one ul li:hover .businessName strong {text-decoration: underline;} .assignRoleModal .mbBody .mbBodyContents .bigBox .one ul li:hover .businessName p {text-decoration: underline;} .assignRoleModal .mbBody .mbBodyContents .bigBox .one ul li:active {background: #e4e4e4; position: relative;} .assignRoleModal .mbBody .mbBodyContents .bigBox .one ul li:active:before {content:''; display:block; width:10px; height:10px; background:url(../img/common/icon_check2.png)no-repeat; background-size: 8px !important; position:absolute; top:24px; left:7px; transform:translate(0, -50%);} .assignRoleModal .mbBody .mbBodyContents .bigBox .one ul li:active .businessName strong {color: #a50034;} .assignRoleModal .mbBody .mbBodyContents .bigBox .one ul li:active .businessName p {color: #a50034;} .assignRoleModal .mbBody .mbBodyContents .bigBox .one ul li .businessName strong {font-size: 15px; font-weight: normal; word-break: break-all; cursor: pointer;} .assignRoleModal .mbBody .mbBodyContents .bigBox .one ul li .businessName p {font-size: 12px; font-weight: normal; word-break: break-all; cursor: pointer;} .assignRoleModal .mbBody .mbBodyContents .bigBox .two {width: calc(100% - 235px); overflow-y: scroll; height: 100%;} .assignRoleModal .mbBody .mbBodyContents .bigBox .two .inputWrap {position: absolute; left: 270px; top: 110px;} .assignRoleModal .mbBody .mbBodyContents .bigBox .two ul {height: auto; width: 100%;} .assignRoleModal .mbBody .mbBodyContents .bigBox .two ul li {height: auto; width: 100%; padding: 11px 11px 11px 20px; box-sizing: border-box; position: relative;} .assignRoleModal .mbBody .mbBodyContents .bigBox .two ul li::before {content: ""; height: 1px; width: calc(100% - 40px); position: absolute; left: 20px; bottom: 0; background: #e5e5e5;} .assignRoleModal .mbBody .mbBodyContents .bigBox .two ul li .opt .text div strong {font-size: 15px; font-weight: normal;} .assignRoleModal .mbBody .mbBodyContents .bigBox .two ul li .opt .text div p {font-size: 12px; font-weight: normal;} .assignRoleModal .mbBody .mbBodyContents .bigBox .two .selectAll {height: auto; border-bottom: 1px solid #d9d9d9; box-sizing: border-box; padding: 17px 17px 17px 20px;} .assignRoleModal .mbBody .mbBodyContents .bigBox .two .selectAll .text {font-size: 14px; font-weight: normal; word-break: break-all;} .assignRoleModal .mbBody .mbBodyContents .bigBox .one ul li[aria-selected="true"] {color: #a50034; background: #e4e4e4; position: relative;} .assignRoleModal .mbBody .mbBodyContents .bigBox .one ul li[aria-selected="true"]::before {content:''; display:block; width:10px; height:10px; background:url(../img/common/icon_check2.png)no-repeat; background-size: 8px !important; position:absolute; top:24px; left:7px; transform:translate(0, -50%);} .assignRoleModal .mbBody .mbBodyContents .bigBox .one ul li[aria-selected="true"]::after {content:''; width:0; height:0; border-top:10px transparent solid; border-bottom:10px transparent solid; border-right:12px #fff solid; border-left:20px transparent solid; position:absolute; top:50%; right:0; transform:translate(0%, -50%); z-index:1;} .accountManagement .snb .accountSublist ul li .businessName.active {border: 1px solid #a50034; background: #e5e5e5;} .accountManagement .snb .accountSublist ul li .businessName.active a {color: #a50034;} .accountManagement .snb .accountSublist ul li .businessName[aria-selected="true"] {border: 1px solid #a50034;} .accountManagement .snb .accountSublist ul li .businessName:active {outline: 1px solid #a50034; outline-offset: -2px;} .accountManagement .snb .accountSublist ul li .businessName:active .button.navarrow::before {content: ""; filter: grayscale(0);} .accountManagement .snb .accountSublist ul li .businessName[aria-selected="true"] a {color: #a50034;} .accountManagement .snb .accountSublist ul li .businessName:active a {color: #a50034;} .accountManagement .snb .accountSublist ul li .businessName[aria-selected="true"] .button.navarrow::before {content: ""; filter: grayscale(0);} .accountManagement .snb .accountSublist ul li .businessName[aria-selected="true"] .button.navarrow.up::before {content: ""; filter: grayscale(0);} .accountManagement .snb .accountSublist ul li .businessName.active > div > a {color: #a50034 !important;} .accountManagement .snb .accountSublist ul li .businessName[aria-selected="true"] > div > a {color: #a50034 !important;} /* installed site popup */ .installedSite {width: calc(100%); height: 390px !important; overflow-y: scroll; padding: 0 20px; box-sizing: border-box;} .installedSite .titleBox {font-size: 18px; margin: 10px 0 0px; word-break: break-all;} .installedSite .listDiv {width: calc(100%); margin: auto;} .installedSite .listDiv .businessName {margin: 30px 0 0 0; word-break: break-all;} .installedSite .listDiv .businessName strong {font-size: 18px; font-weight: 500; color: #555;} .installedSite .listDiv ul {width: 100%; height: auto; margin-top: 14px;} .installedSite .listDiv ul li {width: 100%; height: auto; padding: 14px 10px 14px 10px; border-bottom: 1px solid #e5e5e5; display: flex; align-items: center; box-sizing: border-box; word-break: break-all;} /* commentBox popup */ .commentBox .writtenBy {margin: 10px 0 30px; word-break: break-all;} .commentBox .writtenBy p {font-size: 16px;} .commentBox .writtenBy p strong {font-size: 16px;} .commentBox .commentDiv p {font-size: 16px; font-weight: 500;} .commentBox .commentDiv .commentDivBox {width: 100%; height: auto; margin-top: 20px; padding: 30px; box-sizing: border-box; background: #f8f8f8;} .commentBox .commentDiv .commentDivBox p {word-wrap: break-word; font-size: 14px; line-height: 1.5; color: #383838;} /* created app */ .partnerCenterCreatedApp.clHeader {display:flex; align-items:flex-end; justify-content:flex-start; height:48px; border-bottom:1px solid #d8d8d9; padding: 20px 20px 0px;} .partnerCenterCreatedApp.clHeader .tabs {display:flex;} .partnerCenterCreatedApp.clHeader .tabs a {height:100%; box-sizing:border-box; padding:11px 12px; color:rgba(85, 85, 85, 1); font-size:20px; font-weight:500;} .partnerCenterCreatedApp.clHeader .tabs a:focus, .partnerCenterCreatedApp.clHeader .tabs a:hover {text-decoration:underline;} .partnerCenterCreatedApp.clHeader .tabs a[aria-current="true"], .partnerCenterCreatedApp.clHeader .tabs a[aria-selected="true"] {border-bottom:4px solid #333; font-weight:700;} /* .createdAppTapTwoTable {margin:20px auto !important;} */ .createdAppTapTwoTable tbody tr td .thumb {height: 60px; width: 60px; border-radius: 6px; background-color: #d9d9d9; margin:10px auto;} /* license management popup */ .licenseManagementPopup .mbBody .mbBodyContents .article .dlBoxGroup .basicInfo .issueDate dd {display: flex; justify-content: space-between;} .licenseManagementPopup .mbBody .mbBodyContents .article .dlBoxGroup .basicInfo .issueDate dd .licensingDatepick {display: flex; width: 100%;} .licenseManagementPopup .mbBody .mbBodyContents .article .dlBoxGroup .basicInfo .issueDate dd .licensingDatepick > div:first-child {width: 50%;} .licenseManagementPopup .mbBody .mbBodyContents .article .dlBoxGroup .basicInfo .issueDate dd .licensingDatepick > div:last-child {width: 50%;} .licenseManagementPopup .mbBody .mbBodyContents .article .dlBoxGroup .basicInfo .issueDate dd .dateTitle {font-size: 12px;} .licenseManagementPopup .mbBody .mbBodyContents .article .dlBoxGroup .basicInfo .issueDate dd .symbolTilt {width: 40px; height: 40px; margin-top: 20px; display: flex; align-items: center; justify-content: center;} .licenseManagementPopup .mbBody .mbBodyContents .article .dlBoxGroup .basicInfo dl dd .assignableTitle {font-size: 14px;} .licenseManagementPopup .mbBody .mbBodyContents .article .dlBoxGroup {padding: 20px; box-sizing: border-box;} /* lg solution */ .container .body .contents .contentBox.solutionDetails {padding: 40px; height: calc(100% - 60px);} .container .body .contents .contentBox.solutionDetails .detailView .detailVeiwHeader {padding: 0 0 40px; margin: 0 0 62px;} .container .body .contents .contentBox.solutionDetails .detailView .detailVeiwBody .moreBoxInfo .thumb {justify-content: flex-start; margin: 0 0 60px 0; width: 100%;} .container .body .contents .contentBox.solutionDetails .detailView .detailVeiwBody .moreBoxInfo .thumb img {width: 365px; height: 222px; margin: 0 10px;} .container .body .contents .contentBox.solutionDetails .detailView .detailVeiwBody .moreBoxInfo .thumb img:first-child {margin: 0 10px 0 0;} .container .body .contents .contentBox.solutionDetails .detailView .detailVeiwBody .moreBoxInfo .thumb img:last-child {margin: 0 0 0 10px;} .container .body .contents .contentBox.solutionDetails .detailView .detailVeiwBody .moreBoxInfo dl {margin: 0 0 26px;} .container .body .contents .contentBox.solutionDetails .detailView .detailVeiwBody .moreBoxInfo dl.dsec dd {margin-top: 14px;} .container .body .contents .contentBox.solutionDetails .detailView .detailVeiwBody .moreBoxInfo dl.rNote {display: block; padding: 0 0 13px 0;} .container .body .contents .contentBox.solutionDetails .detailView .detailVeiwBody .moreBoxInfo dl.rNote dd {margin: 18px 10px;} .container .body .contents .contentBox.solutionDetails .detailView .detailVeiwHeader .infoBox {padding-left: 142px;} .container .body .contents .contentBox.solutionDetails .detailView .detailVeiwHeader .infoBox .appName {margin: 0;} .container .body .contents .contentBox.solutionDetails .detailView .detailVeiwHeader .button.return {width: 42px; height: 42px; top: -4px;} .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo {margin: 0 0 30px 115px;} .container .body .contents.appDetails .contentBox .detailView .detailVeiwBody .moreBoxInfo {margin: 0 0 30px 146px;} /* account Management table */ .accountManagementTable {margin: 0 6px;} .accountManagementTableHead {margin: 0 10px;} .accountManagementTableTwo {margin: 0 6px;} .accountManagementTableTwoHead {margin: 0 10px;} .accountManagementTable .checkSelectWrap.active {margin: 0 6px; width: calc(100% - 12px); top: -16px;} .accountManagementTableTwo .checkSelectWrap.active {margin: 0 6px; width: calc(100% - 12px); top: -16px;} /* about role poppup */ .aboutRole .mbBody .mbBodyContents {padding: 10px 20px 0 20px; box-sizing: border-box; overflow: overlay;} .aboutRole .mbBody .mbBodyContents div {margin-bottom: 30px;} .aboutRole .mbBody .mbBodyContents div:last-child {margin-bottom: 0px;} .aboutRole .mbBody .mbBodyContents div strong {font-size: 18px; color: #555; font-weight: bold; word-break: break-all;} .aboutRole .mbBody .mbBodyContents div p {font-size: 16px; color: #555; padding-left: 20px; margin-top: 14px; word-break: break-all;} /* request approval */ .customBody .contents .dcBody .detailView .requestMenu .requestApproval.newRequest {height: calc(100%); width: 550px; display: flex; flex-direction: column; padding: 60px 50px; box-sizing: border-box;} .customBody .contents .dcBody .detailView .requestMenu .requestApproval.newRequest div {margin: 0 0 96px 0; display: flex; flex-direction: column;} .customBody .contents .dcBody .detailView .requestMenu .requestApproval.newRequest div h4 {font-size: 18px; font-weight: 500; color: #383838; word-break: break-word; margin: 0 0 25px 0; padding: 0;} .customBody .contents .dcBody .detailView .requestMenu .requestApproval.newRequest div .buttonWrap {display: flex; flex-direction: column; margin: 0;} .customBody .contents .dcBody .detailView .requestMenu .requestApproval.newRequest div .buttonWrap .button {margin: 0 0 16px 0; height: 42px; width: calc(100%);} .contents .dcBody .requestView .requestMenu .contentName > span{color: #333333; font-size: 20px; font-weight: 700; line-height: 26px; } .contents .dcBody .requestView .requestMenu .sectionBox > .buttonWrap{display: flex; flex-wrap: wrap; gap: 12px; padding-bottom: 24px; border-bottom: 1px solid #e5e5e5;} .contents .dcBody .requestView .requestMenu .tableHead > .tableName{color: #333333; font-size: 16px; font-weight: 500; line-height: 22.4px;} .contents .dcBody .requestView .requestMenu .tableHead {display: flex; justify-content: space-between;} .contents .dcBody .requestView .requestMenu .tableHead > .tableHeadContent {display: flex; gap: 16px;} /* Request approval step */ /* step One */ .requstApprovalStepOne .mbBody .mbBodyContents .article .dlBoxGroup .dlBox dl dd .inputBox button {padding: 9px 24px; box-sizing: border-box;} /* step Three */ .requestLicenseThree.mbBody .mbBodyContents {padding: 20px; box-sizing: border-box;} .requestLicenseThree.mbBody.newMBBody .mbBodyContents {padding: 0px; box-sizing: border-box;} .requestLicenseThree.mbBody .mbBodyContents .article .dlBoxGroup .dlBox dl dt {text-align: left !important;} .requestLicenseThree.mbBody .mbBodyContents .article .dlBox dl dd {margin: 0; padding: 0; word-break: break-word;} .requestLicenseThree.mbBody .mbBodyContents .article .dlBox dl dd textarea {width: 100% !important;} .requestLicenseThree.mbBody .mbBodyContents .article .attachedFiles {margin: 35px 0 0 0;} .requestLicenseThree.mbBody .mbBodyContents .article .bgGrey {width: 100%; height: auto; min-height: 30px; padding: 9px 10px; background: #f0f2f5; display: flex; align-items: center; box-sizing: border-box; margin-top: 16px; margin-bottom: 12px; word-break: break-all;} .requestLicenseThree.mbBody .mbBodyContents .article .bgGrey > span {font-size: 12px; color: #383838;} .requestLicenseThree.mbBody .mbBodyContents .article .fileAttacthed.fb_w {margin: 0 0 12px 0;} .requestLicenseThree.mbBody .mbBodyContents .article .attachedFileBigBox {width: 100%; height: auto;} .requestLicenseThree.mbBody .mbBodyContents .article .attachedFileBigBox .attachedFileBox {width: calc(100% - 2px); height: auto; min-height: 80px; border: 1px solid #d0d1d2; padding: 20px 20px 20px 30px; box-sizing: border-box;} .requestLicenseThree.mbBody .mbBodyContents .article .attachedFileBigBox .attachedFileBox .thumbBox {width: 116px; height: 70px; margin: 5px; background-color: #d9d9d9;} .requestLicenseThree.mbBody .mbBodyContents .article .attachedFileBigBox .attachedFileBox.attactheadFileBoxEdit .fileName {margin: 0 auto 0 0; padding: 5px 0; box-sizing: border-box;} .requestLicenseThree.mbBody .mbBodyContents .article .attachedFileBigBox .attachedFileBox .fileName {width: 444px; font-size: 16px; margin: 0 30px 0 26px;} .requestLicenseThree.mbBody .mbBodyContents .article .attachedFileBigBox .attachedFileBox .fileSize {width: 40px; font-size: 16px; margin: 0 15px;} .requestLicenseThree.mbBody .mbBodyContents .article .attachedFileBigBox .attachedFileBox button {margin: auto;} .requestLicenseThree.mbBody .mbBodyContents .article .buttonWrap {width: calc(100%); height: auto; margin: 16px auto; padding: 0 !important; box-sizing: border-box;} .requestLicenseThree.mbBody .mbBodyContents .article .buttonWrap .button {width: 100%; height: 42px; margin: 0;} /* step four */ .requestLicenseFour.mbBody .mbBodyContents .article .dlBox dl dd .fileDownload {max-width: 482px; width: 100%; display: flex; flex-direction: column; padding: 16px; box-sizing: border-box; background-color: #fff; border-radius: 18px;} .requestLicenseFour.mbBody .mbBodyContents .article .dlBox dl dd .fileDownload .downloadFileBox {height: auto; max-width: 720px; width: auto; background-color: #f8f8f8; padding: 10px 20px; box-sizing: border-box; margin: 0 0 6px 0; display: flex; align-items: center; border: solid 1px transparent; word-break: break-word;} .requestLicenseFour.mbBody .mbBodyContents .article .dlBox dl dd .fileDownload .downloadFileBox:hover {background-color: #efefef;} .requestLicenseFour.mbBody .mbBodyContents .article .dlBox dl dd .fileDownload .downloadFileBox[aria-selected="true"], .supportBody .dlBox .dl .dd .downloadFileBox:active {background-color: #e4e4e4; border: solid 1px #a50034;} /* .requestLicenseFour.mbBody .mbBodyContents .article .dlBox dl dd .fileDownload .downloadFileBox:active::after {content:''; font-size:0; display:block; margin-left: auto; width:16px; height:16px; background:url(../img/common/ic_download.svg)no-repeat; background-size:cover; filter:brightness(0); right: 30px;} */ .requestLicenseFour.mbBody .mbBodyContents .article .dlBox dl dd .fileDownload .downloadFileBox span {font-size: 16px; max-width: calc(100% - 20px);} /* my request - license */ .container .body .contents .dcBody .detailView .dcBodyContetnt.license {width: calc(100%); display: flex; padding: 40px 26px; box-sizing: border-box; flex-direction: column;} .container .body .contents .dcBody .detailView .dcBodyContetnt.license .tableWrap {margin: 0; width: 100%;} .container .body .contents .dcBody .detailView .dcBodyContetnt.license .tools .button {margin: 0 0 0 10px;} .container .body .contents .dcBody .detailView .dcBodyContetnt.license .appsTools {margin: 10px 0 0 0 !important;} .container .body .contents .dcBody .detailView .dcBodyContetnt.license .checkboxDiv {margin: 10px 0 0 0;} .container .body .contents .dcBody .detailView .dcBodyContetnt.license .checkboxDiv > div:first-child {margin-right: 36px;} .container .body .contents .dcBody .detailView .dcBodyContetnt.license .checkboxDiv .text {margin-left: 10px;} /*device view */ .deviceView {padding: 0 20px; box-sizing: border-box;} .deviceView .customerInfo {margin: 14px 0 40px 0; display: flex; flex-direction: column;} .deviceView .customerInfo .head {padding: 0 10px 20px 10px; box-sizing: border-box; border-bottom: 1px solid #e5e5e5;} .deviceView .customerInfo .head h3 {font-size: 16px; font-weight: bold; word-break: break-word; color: #555;} .deviceView .customerInfo .body {padding: 24px 10px 0 10px; box-sizing: border-box;} .deviceView .customerInfo .body .dlBoxGroup .dlBox {display: flex; flex-wrap: wrap; gap: 24px 40px;} .deviceView .customerInfo .body .dlBoxGroup .dlBox dl {width: 340px; display: flex; flex-direction: column; margin: 0;} .deviceView .customerInfo .body .dlBoxGroup .dlBox dl dt {font-size: 13px; text-align: left; font-weight: normal; color: #555; margin-bottom: 10px; word-break: break-word; width: 100%; min-height: 10px;} .deviceView .customerInfo .body .dlBoxGroup .dlBox dl dd {font-size: 13px; text-align: left; font-weight: normal; color: #555; word-break: break-word; width: 100%; min-height: 10px; line-height: 1.2;} .deviceView .comment {margin: 14px 0 40px 0; display: flex; flex-direction: column;} .deviceView .comment .head {padding: 0 10px 20px 10px; box-sizing: border-box; border-bottom: 1px solid #e5e5e5;} .deviceView .comment .head h3 {font-size: 16px; font-weight: bold; word-break: break-word; color: #555;} .deviceView .comment .body {padding: 24px 10px 0 10px; box-sizing: border-box;} .deviceView .comment .body p {font-size: 16px; font-weight: normal; word-break: break-word; color: #383838;} /* Approval view Request */ .popupLicense .modalBox .mbBody .mbBodyContents .article.approvalViewReq .dlBoxGroup .dlBox .sectionConfirm dl dt {font-size: 14px; font-weight: normal; color: #555; word-break: break-word;} .popupLicense .modalBox .mbBody .mbBodyContents .article.approvalViewReq .dlBoxGroup .dlBox .sectionConfirm dl dd {font-size: 14px; font-weight: normal; color: #383838; word-break: break-word;} /* view request two */ .popupLicense .modalBox.viewRequestTwo .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .sectionConfirm {background: #f8f8f8;border-radius: 15px;width: 100%;height: auto;margin: 0;padding: 30px 20px;box-sizing: border-box;} /* view request issue */ .issueViewRequest .dlBoxGroup .dlBox .issueLicenseTextBox {margin: 50px 0 30px 0;} .issueViewRequest .dlBoxGroup .dlBox .inputBoxIssue {margin: 0 0 66px 0;} .issueViewRequest .dlBoxGroup .dlBox .inputBoxIssue dl dt {text-align: left !important; word-break: break-word;} .issueViewRequest .dlBoxGroup .dlBox .inputBoxIssue dl dd {text-align: left !important; word-break: break-word;} /* approval reject popup */ .approvalReject .dlBoxGroup .dlBox .inputBoxIssue dl dd textarea {height: 100px; padding: 15px;} /* approval table */ .requestApprovalTable { height: auto;} /* Approval approve popup */ .approveApproval .dlBoxGroup .dlBox .issueLicenseTextBox {margin: 80px 0 30px 0;} .approveApproval .dlBoxGroup .dlBox .inputBoxIssue dl {margin-bottom: 20px;} /* detail view app details licensing */ .detailView.appDetails .detailVeiwHeader {display: flex; align-items: flex-end; justify-content: space-between; margin: 40px 40px 40px 50px; border-bottom: 1px solid #e0e0e1; box-sizing: border-box; position: relative; padding-bottom: 30px; max-height: 232px;} .detailView.appDetails .detailVeiwHeader .infoBox {padding-left: 142px; box-sizing: border-box;} .detailView.appDetails .detailVeiwHeader .infoBox .icon {width:106px; min-width: 106px; height:106px; border-radius:10px; overflow:hidden;} .detailView.appDetails .detailVeiwHeader .infoBox .icon img {width:inherit; height:inherit;} .detailView.appDetails .detailVeiwHeader .infoBox .appName.appNameText {box-sizing: border-box; padding: 0 30px; display: flex;} .detailView.appDetails .detailVeiwHeader .infoBox .appName h4 {font-size:26px; font-weight:500; line-height: 1; word-break: break-all; display: inline-flex;} .detailView.appDetails .detailVeiwHeader .infoBox .appName strong {font-size:26px; font-weight:500; line-height: 1; word-break: break-all; display: inline-flex;} .detailView.appDetails .detailVeiwHeader .infoBox .appName .unapproved {width: 130px; min-height: 30px; position: relative;} .detailView.appDetails .detailVeiwHeader .infoBox .appName .info {margin-top:20px;} .detailView.appDetails .detailVeiwHeader .infoBox .appName .info dl {display:flex; font-size:14px; font-weight:500; word-break: break-all;} .detailView.appDetails .detailVeiwHeader .infoBox .appName .info dl dt {display:flex; align-items:center;} .detailView.appDetails .detailVeiwHeader .infoBox .appName .info dl dt:after {content:':'; margin:0 6px;} .detailView.appDetails .detailVeiwHeader .infoBox .appName .info dl dd {} .detailView.appDetails .detailVeiwHeader .infoBox .tagBox{width: 100%; margin-top: 10px;} .detailView.appDetails .detailVeiwHeader .infoBox .tagBox .tag {height: auto; padding: 4px 12px; box-sizing: border-box; background-color: #d5e7e0; margin: 5px; word-break: break-all; max-width: 160px; min-width: 116px; border-radius: 3px;} .detailView.appDetails .detailVeiwHeader .return {position:absolute; top:0; left:0; z-index:1; height: 42px !important; width: 42px!important;} .detailView.appDetails .detailVeiwHeader .buttonGroup {height: 150px; padding: 5px;box-sizing: border-box;} .detailView.appDetails .detailVeiwHeader .buttonGroup .allSite {color: #a50034; font-size: 14px; font-weight: bold; display: flex; word-break: break-all; padding-right: 15px;} .detailView.appDetails .detailVeiwHeader .buttonGroup p {margin: 5px; display: flex; align-items: center;} .detailView.appDetails .detailVeiwHeader .buttonGroup button {margin: 5px;} .detailView.appDetails .detailVeiwHeader .buttonGroup .allSite::before {content:"";display:block; height: 19px; width: 19px; background: url(../img/common/card_btn_icon_check_s.svg) no-repeat center; margin-right: 10px;} .detailView.appDetails .detailVeiwHeader .buttonGroup .partiallyInstalled::before {content:"";display:inline-flex; height: 19px; width: 19px; margin-left: 10px; background: url(../img/common/icon_check.png) no-repeat center;} .detailView.appDetails .detailVeiwHeader .buttonGroup .firstgroup {border-right: 3px solid #e5e5e5; padding-right: 10px; box-sizing: border-box;} .detailView.appDetails .detailVeiwHeader .buttonGroup .firstgroup > button {margin: 5px;} .detailView.appDetails .detailVeiwHeader .buttonGroup > button {margin: 10px;} .detailView.appDetails .detailVeiwBody .moreBoxInfo .thumb {justify-content: flex-start; margin: 0 0 60px 0; width: 100%; gap: 0 20px;} .detailView.appDetails .detailVeiwBody .moreBoxInfo .thumb img {width: 365px; height: 222px; margin: 0;} .detailView.appDetails .detailVeiwBody .moreBoxInfo .thumb img:first-child {margin: 0 10px 0 0;} .detailView.appDetails .detailVeiwBody .moreBoxInfo .thumb img:last-child {margin: 0 0 0 10px;} .detailView.appDetails .detailVeiwBody .moreBoxInfo dl {margin: 0 0 26px;} .detailView.appDetails .detailVeiwBody .moreBoxInfo dl.dsec dd {margin-top: 14px;} .detailView.appDetails .detailVeiwBody .moreBoxInfo dl.rNote {display: block; padding: 0 0 13px 0;} .detailView.appDetails .detailVeiwBody .moreBoxInfo dl.rNote dd {margin: 18px 10px;} .detailView.appDetails .detailVeiwBody .moreBoxInfo {padding: 0 228px 30px 182px; box-sizing: border-box;} .detailView.appDetails .detailVeiwBody .moreBoxInfo .thumb {margin: 50px 0 50px 2px;} .detailView.appDetails .detailVeiwBody .moreBoxInfo .thumb {display:flex; align-items: center; width: calc(100% - 100px);} .detailView.appDetails .detailVeiwBody .moreBoxInfo .thumb .imagePreviousWrap{height:auto; width:auto; display: none; align-items: center;} .detailView.appDetails .detailVeiwBody .moreBoxInfo .thumb .imagePreviousWrap button{box-shadow: none; padding: 0; background: transparent;font-size: 0px; transform: rotate(180deg); height: 22px; width: 14px; line-height: 22px;} .detailView.appDetails .detailVeiwBody .moreBoxInfo .thumb .imagePreviousWrap button:before{content:"";background-position: center; background-repeat: no-repeat;background-image: url(../img/icon/detailview_btn_arrow_r.svg); width:14px; height:22px; display:block;} .detailView.appDetails .detailVeiwBody .moreBoxInfo .thumb .imageNextWrap{height:auto; width:auto; display: flex; align-items: center;} .detailView.appDetails .detailVeiwBody .moreBoxInfo .thumb .imageNextWrap button{box-shadow: none; background: transparent;font-size: 0px; height: 22px; width: 14px; line-height: 22px; padding: 0;} .detailView.appDetails .detailVeiwBody .moreBoxInfo .thumb .imageNextWrap button:before{content:"";background-position: center; background-repeat: no-repeat;background-image: url(../img/icon/detailview_btn_arrow_r.svg); width:14px; height:22px; display:block;} .detailView.appDetails .detailVeiwBody .moreBoxInfo .thumb img.current {display:block} /* approval approve */ .approvalApprove .reqInfo {margin: 0; width: 100%; border-radius: 15px;} .approvalApprove .reqInfo .header {height: 66px; display: flex; align-items: center; padding: 0;} /* approval reject */ .approvalReject .reqInfo {border-radius: 15px; width: 100%; margin: 0;} /* approval history created app */ .container .body .contents .dcBody .detailView .dcBodyContetnt.license .checkboxDiv {margin: 30px 0 10px 0;} .container .body .contents .dcBody .detailView .dcBodyContetnt.license .checkboxDiv h4 {font-size: 18px; font-weight: 500; color: #333; word-break: break-word;} /* point Main */ .pointsMain {padding: 33px 26px; box-sizing: border-box; display: flex; flex-direction: column;} .pointsMain .business {height: auto; display: flex; flex-direction: column; border-bottom: 2px solid #e0e0e1;} .pointsMain .business .tools {margin-bottom: 20px; display: flex; align-items: center;} .pointsMain .business .tools .dlBox {display: flex; align-items: center;} .pointsMain .business .tools .dlBox dl {display: flex; align-items: center; margin: 0 20px 0 0;} .pointsMain .business .tools .dlBox dl dt {width: 104px; font-size: 18px; font-weight: 500; color: #333;} .pointsMain .business .tools .dlBox dl dd {width: 200px;} .pointsMain .business .tools .button {margin: 0 5px;} .pointsMain .business .footer .tableHead {margin-bottom: 10px;} .pointsMain .business .footer .tableWrap {max-height: unset;} .pointsMain .business .footer .tableWrap table tbody tr td {height: 56px;} .pointsMain .property {flex-direction: column; display: flex;} .pointsMain .property .tools {margin: 42px 0 20px 0; display: flex; align-items: center;} .pointsMain .property .tools h4 {font-size: 18px; font-weight: 500; color: #333;} .pointsMain .property .footer .tableHead {margin-bottom: 10px;} .pointsMain .property .footer .tableWrap {max-height: 259px;} .pointsMain .property .footer .tableWrap table tbody tr td {height: 56px;} /* Upcoming Expiration */ .upcomingExpiration .pointsText {padding: 0 20px;} .upcomingExpiration .pointsText {margin: 10px 0 20px 0px;} .upcomingExpiration .pointsText p {font-size: 16; font-weight: bold; color: #555; word-break: break-all;} .upcomingExpiration .pointTable .tableWrap table tbody tr td {height: 56px; width: 50% !important;} /* Add Points */ .addPoints .dlBoxGroup {margin: 50px 0 44px 0 !important; display: flex;} .addPoints .dlBoxGroup .dlBox {display: flex; width: 100% !important;} .addPoints .dlBoxGroup .dlBox dl {display: flex; width: 100%;} .addPoints .dlBoxGroup .dlBox dl dt {display: flex; justify-content: flex-end; font-size: 16px; color: #555; word-break: break-all; font-weight: normal; width: 220px;} .addPoints .dlBoxGroup .dlBox dl dd {display: flex; justify-content: flex-end; width: calc(100% - 220px);} .addPoints .dlBoxGroup .dlBox dl dd .inputBoxWrap {width: 100%; display: flex; font-size: 14px; color: #383838; word-break: break-all; font-weight: normal; align-items: baseline;} .addPoints .dlBoxGroup .dlBox dl dd .inputBoxWrap .inputBox {width: calc(100% - 60px) !important; margin-right: 10px;} /* assign and withdraw */ .pointsWithdraw .dlBox {width: 100%; display: flex; flex-direction: column; margin: 30px 0 35px; gap: 20px 0;} .pointsWithdraw .dlBox dl {min-height: 51px; display: flex !important; align-items: center; margin: 0 !important; box-sizing: border-box;} .pointsWithdraw .dlBox dl dt {min-height: 51px; display: flex; align-items: center; font-size: 14px; color: #383838; font-weight: normal; word-break: break-word; width: 202px !important;} .pointsWithdraw .dlBox dl dd {min-height: 51px; display: flex; align-items: center; font-size: 14px; color: #383838; font-weight: normal; word-break: break-word; width: calc(100% - 202px) !important;} .pointsWithdraw .dlBox dl.optionBox dt {width: 107px; margin-right: 30px; font-size: 14px; color: #383838; font-weight: normal; word-break: break-word; display: flex; align-items: center;} .pointsWithdraw .dlBox dl.optionBox dd {font-size: 14px; color: #383838; font-weight: normal; word-break: break-word; display: flex; align-items: center;} .pointsWithdraw .dlBox dl dd .inputBoxWrap {display: flex; align-items: flex-start;} .pointsWithdraw .dlBox dl dd > .inputBoxWrap .fb_dir_y {width: calc(100% - 51px);} .pointsWithdraw .dlBox dl dd > .inputBoxWrap .fb_dir_y > .inputBox {width: calc(100%) !important; margin-right: 10px;} /* .pointsWithdraw .dlBox dl dd > .inputBoxWrap .fb_dir_y > .inputBox > ::placeholder {color: #ff0404 !important; opacity: 1;} .pointsWithdraw .dlBox dl dd > .inputBoxWrap .fb_dir_y > .inputBox > input:-ms-input-placeholder {color: #ff0404;} .pointsWithdraw .dlBox dl dd > .inputBoxWrap .fb_dir_y > .inputBox > input:placeholder-shown {color: #ff0404;} */ .pointsWithdraw .dlBox dl dd > .inputBoxWrap .fb_dir_y > .errorText {font-size: 10px; font-weight: normal; word-break: break-all; color: #ff0404;} .pointsWithdraw .dlBox dl dd > .inputBoxWrap .points {height: 40px; width: 51px; display: flex; align-items: center; justify-content: flex-end;} .pointsWithdraw .dlBox dl dd > .inputBoxWrap .points > span {text-align: right; font-size: 14px; font-weight: normal;} .pointsWithdraw .dlBox dl dd .inputBox {width: calc(100% - 41px) !important;} /* point view all */ .pointsView {padding: 30px 26px 28px 26px; box-sizing: border-box;} .pointsView .head {margin: 0 0 6px 0;} .pointsView .head h4 {font-size: 22px; font-weight: bold; color: #383838; padding: 0; margin: 0;} .pointsView .contents .tableWrap {max-height: 650px;} .pointsView .contents .tableWrap .jsmartable {margin-top: 10px !important;} .pointsView .contents .buttonPoint {margin-top: 103px !important; display: flex; justify-content: center;} .pointsView .contents .buttonPoint .buttonWrap .button {padding: 14px 102px; height: auto;} /* business site popup */ .deleteBusinessSitePopup .contentBox {margin: 65px 0 45px;} .deleteBusinessSitePopup .contentBox p.firstText {font-size: 16px; color: #555; word-break: break-word; font-size: normal; margin-bottom: 10px;} .deleteBusinessSitePopup .contentBox p.secondText {font-size: 16px; color: #555; word-break: break-word; font-size: normal; margin-bottom: 30px;} /* button More */ .btnMore {height: 32px;width: 32px;position: absolute;} .btnMore .layerNavi{width: 190px; border: solid 1px #d0d1d2; border-radius: 10px; z-index: 10;} .btnMore .layerNavi .layerNaviHeader{display:block;font-size: 14px;color: #333;padding: 10px;border-bottom: 1px solid #e5e5e5;font-weight: 600; word-break:break-all;} .btnMore .layerNavi a{display:block; font-size:14px; color:#333; padding:10px !important; font-weight:normal; background:#fff; white-space:normal; word-break:break-all;} .btnMore .layerNavi a:first-child {border-radius: 10px 10px 0 0 !important;} .btnMore .layerNavi a:last-child {border-radius: 0 0 10px 10px !important; border-bottom:none;} .btnMore .layerNavi a:hover{background:#fafbfb; text-decoration:underline; color:inherit;} .btnMore .layerNavi a:active {background: #E8EBF0; color:rgba(51, 51, 51, 1); text-decoration:none; } /* point History */ .detailView.pointsHistory {padding: 30px 26px 28px 26px;} .detailView.pointsHistory .head {margin-bottom: 24px;} .detailView.pointsHistory .head .h4 {margin: 0; padding: 0; font-size: 22; font-weight: bold; line-height: 1; color: #383838;} .detailView.pointsHistory .historyBox {min-height: 181px; border-radius: 10px; background-color: #f8f8f9; padding-bottom: 30px; padding: 20px 36px;} .detailView.pointsHistory .historyBox .head {padding-bottom: 30px; box-sizing: border-box; margin-bottom: 0;} .detailView.pointsHistory .historyBox .head h5 {font-size: 14px; word-break: break-word; font-weight: 600; color: #555;} .detailView.pointsHistory .historyBox .body {min-height: 40px; height: auto; display: flex; flex-direction: row; flex-wrap: wrap; gap: 24px; align-items: center;} .detailView.pointsHistory .historyBox .footer {padding: 20px 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center;} .detailView.pointsHistory .historyBox .footer .button {padding: 0 48px; box-sizing: border-box;} .detailView.pointsHistory .historyTableBox {border-radius: 10px; border: solid 1px #d0d1d2; background-color: #fff; margin: 30px 0 16px 0; width: calc(100% - 2px); height: 534px; display: flex; flex-direction: column;} .detailView.pointsHistory .historyTableBox .head {height: 66px; width: 100%; padding: 0 26px; margin: 0; display: flex; align-items: center; border-bottom: 1px solid #e0e0e1; box-sizing: border-box;} .detailView.pointsHistory .historyTableBox .head h5 {font-size: 22px; padding: 0; margin: 0; font-weight: 500; color: #383838;} .detailView.pointsHistory .historyTableBox .body {padding: 24px 26px 0 26px; box-sizing: border-box;} .detailView.pointsHistory .buttonWrap {display: flex; align-items: center; justify-content: center;} .detailView.pointsHistory .buttonWrap .button {padding: 14px 102px; box-sizing: border-box; height: auto;} /* device 17thNov */ .deviceBoard {display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 40px;} .deviceBoard .deviceFirstBox {display: flex; flex-direction: column; justify-content: center; max-width: 100%;} .deviceBoard .deviceFirstBox p {font-size: 20px; font-weight: 500; line-height: 28px; color: #111; word-break: break-word;} .deviceBoard .deviceSecondBox {display: flex; flex-direction: column; align-items: center; max-width: 100%;} .deviceBoard .deviceSecondBox .BusinessSiteName {display: flex; margin: 28px 5px; border: 1px solid #333; flex-direction: row; min-width: 320px; align-items: center; justify-content: flex-start; min-height: 44px; position: relative; padding: 10px 16px 10px 30px; box-sizing: border-box;} .deviceBoard .deviceSecondBox .BusinessSiteName .button {height: 55px; width: 55px; position: absolute; right: 9px;} .deviceBoard .deviceSecondBox .BusinessSiteName::after{content: ""; height: 32px; width: 32px; position: absolute; background: url(../img/common/ic_cursor_fill.svg) no-repeat; background-position: center; top: 25px; right: 9px;} .deviceBoard .deviceSecondBox .BusinessSiteName p {font-size: 16px; font-weight: 400; line-height: 22.4px;} .deviceBoard .deviceSecondBox p {font-size: 16px; font-weight: normal; color: #333; line-height: 22.4px; word-break: break-word;} .deviceBoard .deviceThirdBox {display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 20px; max-width: 100%;} .deviceBoard .deviceThirdBox p {font-size: 16px; font-weight: normal; color: #333; word-break: break-word;} .deviceBoard .deviceThirdBox .imgContainer {width: calc(558px); max-width: calc(100% - 20px); height: 358px; background: url(../img/common/image\ 1404.png) no-repeat; background-position: center; position: relative; background-size: contain;} .deviceBoard .deviceThirdBox .imgContainer div.workspace {height: 56px; width: 288px; box-sizing: border-box; border-radius: 10px; position: absolute; background: #fff; box-shadow: 0px 4.66667px 14px 0px rgba(0, 0, 0, 0.20); display: flex; align-items: center; padding: 20px 13px 20px 48px; top: 180px; left: -17px;} .deviceBoard .deviceThirdBox .imgContainer div.workspace::before {content: ""; height: 32px; width: 32px; display: flex; background: url(../img/common/ic_workspace.svg) no-repeat; left: 13px; position: absolute;} /* deviceManagementOne */ .deviceManagementOne {display: flex; justify-content: center; align-items: center; height: 100%; width: 100%;} .deviceManagementOne .deviceBox {display: flex; justify-content: center; flex-direction: column; align-items: center;} .deviceManagementOne .deviceBox .thumb {height: 156px; width: 156px; background: url(../img/common/ic_device.svg); margin: 0 0 10px 0;} .deviceManagementOne .deviceBox .textBox {max-width: 1300px; display: flex; justify-content: center; flex-direction: column; align-items: center;} .deviceManagementOne .deviceBox .textBox p {font-size: 18px; color: #383838; font-weight: normal; line-height: 1.5; text-align: center; margin: 0 0 7px 0; word-break: break-word;} .deviceManagementOne .deviceBox .buttonWrap {margin: 25px 0;} /* device management 04 01 */ .acMenu .deviceManagementTextBox {height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 80vh;} .acMenu .deviceManagementTextBox p {text-align: center; font-size: 18px; line-height: 1.5; color: #383838;} /* device management */ .deviceStepTwo .dlBoxGroup .dlBox .confirmBox {height: auto !important;} .deviceStepTwo .dlBoxGroup .dlBox .confirmBox .sectionConfirm .headBox .sectionHead {font-size: 16px; font-weight: bold; line-height: 1; color: #555;} /* deviceManagementTwo */ .deviceManagementTwo {display: flex; justify-content: center; align-items: center; height: 100%; width: 100%;} .deviceManagementTwo .deviceBox {display: flex; justify-content: center; flex-direction: column; align-items: center;} .deviceManagementTwo .deviceBox .thumb {height: 156px; width: 156px; background: url(../img/common/ic_wating.svg); margin: 0 0 10px 0;} .deviceManagementTwo .deviceBox .textBox {max-width: 1300px; display: flex; justify-content: center; flex-direction: column; align-items: center;} .deviceManagementTwo .deviceBox .textBox p {font-size: 14px; color: #383838; font-weight: normal; line-height: 1; margin: 0 0 7px 0; word-break: break-word;} /* device management three */ .deviceManagementThree {display: flex; flex-direction: row;} .deviceManagementThree .snb {display: flex;} .deviceManagementThree .acMenu {display: flex; width: calc(100%); flex-direction: column; position: relative; overflow: scroll;} .deviceManagementThree .acMenu .deviceManagementMenu {height: -webkit-fill-available; padding: 40px 0; width: 100%; box-sizing: border-box;} .deviceManagementThree .acMenu .deviceManagementMenu .mobileDivSNB {position: relative; padding-bottom: 20px; box-sizing: border-box;} .deviceManagementThree .acMenu .mobileDivSNB {position: absolute; left: 20px; top: 20px;} .deviceManagementThree .acMenu .acMenuContent {height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: calc(100% - 40px); margin: auto;} .deviceManagementThree .acMenu .acMenuContent .click {font-size: 18px; font-weight: normal; color: #383838; margin-bottom: 32px; word-break: break-all; text-align: center;} .deviceManagementThree .acMenu .acMenuContent .buttonWrap {margin: 0 0 45px 0; display: flex; justify-content: center;} .deviceManagementThree .acMenu .acMenuContent .buttonWrap button {padding: 11px 105px; height: auto; box-sizing: border-box;} .deviceManagementThree .acMenu .acMenuContent .editDelete {margin-bottom: 32px; font-size: 18px; font-weight: normal; line-height: 1.5; color: #383838; text-align: center; word-break: break-word;} .deviceManagementThree .acMenu .acMenuContent .siteManagementImage img {width: calc(100%); height: auto;} .deviceManagementThree .acMenu .acMenuContent .siteManagementImage {height: 360px; width: 640px; border: solid 1px #d9d9d9; display: flex; max-width: calc(100% - 40px);} .deviceManagementThree .snb .accountSublist ul li .buttonBox {background-color: #f8f8f8; display: flex; height: 108px; justify-content: center; align-items: center;} .deviceManagementThree .snb .accountSublist ul li .buttonBox .buttonWrap {gap: 11px 0;} .deviceManagementThree .snb .accountSublist ul li .buttonBox .buttonWrap .button {padding: 11px 103px; height: auto; margin: 0; width: 100%; box-sizing: border-box;} /* how to edit popup */ .howToEditPopup {display: flex; flex-direction: column; justify-content: center; text-align: center;} .howToEditPopup .click {font-size: 16px; text-align: center; font-weight: normal; color: #555; margin: 10px 0 40px 0; word-break: break-word;} .howToEditPopup .siteManagementIcon {width: 480px; height: 270px; display: flex; background-size: cover; margin: 40px auto;} .howToEditPopup .siteManagementIcon img {width: 100%;} /* file upload popup */ .fileUpload {padding: 46px 0 26px 0; box-sizing: border-box;} .fileUpload .dlBox dl {display: flex; align-items: center; flex-direction: row; height: 40px; margin-bottom: 20px;} .fileUpload .dlBox dl dt {display: flex; height: 100%; font-size: 16px; font-weight: normal; color: #333; justify-content: flex-end; word-break: break-word; min-width: 200px;} .fileUpload .dlBox dl dd {display: flex; height: 100%; font-size: 16px; font-weight: 600; color: #333; text-align: left; word-break: break-word; padding-left: 24px; box-sizing: border-box;} /* device management four */ .deviceManagementFour {display: flex; flex-direction: row;} .deviceManagementFour .snb {display: flex;} .deviceManagementFour .snb .accountSublist ul li .buttonBox {background-color: #f8f8f8; display: flex; height: 108px; justify-content: center; align-items: center; margin: 10px 0 0 0;} .deviceManagementFour .snb .accountSublist ul li .buttonBox .buttonWrap {gap: 11px 0;} .deviceManagementFour .snb .accountSublist ul li .buttonBox .buttonWrap .button {padding: 11px 103px; height: auto; margin: 0; width: 100%; box-sizing: border-box;} .deviceManagementFour .snb .accountSublist ul li .buttonBox .buttonWrap .button:last-child {margin-top: 11px;} .deviceManagementFour .acMenu.noDevicesRegistered {padding: 42px 28px 0 28px;} .deviceManagementFour .acMenu {padding: 42px 28px 0 28px; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; width: 100%;} .deviceManagementFour .acMenu .licenseSolution {display: flex; flex-direction: row;} .deviceManagementFour .acMenu .licenseSolution .tags {display: flex; align-items: center; justify-content: flex-start;} .deviceManagementFour .acMenu .licenseSolution .tags {flex-wrap: wrap; width: calc(100%); margin-right: 5px; display: flex; overflow-x: hidden; height: auto; min-height: 33px;} .deviceManagementFour .acMenu .licenseSolution .tags.withTagMenu > .tag {display: none;} .deviceManagementFour .acMenu .licenseSolution .tags .tag {height: auto; padding: 4px 5.5px; box-sizing: border-box; background-color: #d5e7e0; border-radius: 3px; text-align: center; margin: 0 5px 5px 0; word-break: break-all;} .deviceManagementFour .acMenu .licenseSolution .head {font-size: 18px; font-weight: 600; color: #383838; word-break: break-word; min-width: 200px;} .deviceManagementFour .acMenu .tools {display: flex; justify-content: flex-end; width: 100%; gap: 10px; margin: 10px 0;} .deviceManagementFour .acMenu .tableBoard .tableHead {display: flex; align-items: end; width: 100%; height: auto; min-height: 40px; margin-bottom: 10px; justify-content: space-between;} .deviceManagementFour .acMenu .tableBoard .tableHead .total {min-width: 85px;} .deviceManagementFour .acMenu .tableBoard .tableHead .fb_e {display: flex; gap: 10px; flex-wrap: wrap; height: auto;} .deviceManagementFour .acMenu .tableBoard .tableHead .fb_e .buttonBox {padding-left: 11px; box-sizing: border-box; position: relative;} .deviceManagementFour .acMenu .tableBoard .tableHead .fb_e .buttonBox::before {content: ""; width: 1px; height: 100%; position: absolute; background-color: #ccc; left: 0;} .deviceManagementFour .acMenu {height: auto !important; overflow: auto; padding: 40px 28px 0 28px;} .deviceManagementFour .acMenu .tableBoard {height: calc(100% - 86px) !important;} .deviceManagementFour .acMenu .tableBoard {width: 100%; position: relative; box-sizing: border-box;} .deviceManagementFour .acMenu .tableBoard .tableWrap {width: 100%;} .deviceManagementFour .acMenu .tableBoard .tableWrap .tableBodyText {font-size: 12px; font-weight: normal; color: #ff0404; word-break: break-word;} .deviceManagementFour .checkSelectWrap.active {top: 4px;} /* checkSelectWrap */ .checkSelectWrap {display:none; justify-content:space-between; background:#354056; box-sizing:border-box; position:absolute; min-height: 46px !important; flex-direction: row; top: 0px; left:0; z-index:9; width:calc(100% - 0px); border-radius:6px; padding:6px 10px; height: auto;} .checkSelectWrap.active {display: flex; align-items:center;} .checkSelectWrap .tools {display: flex; align-items:center; flex-direction: row; margin: 0 !important;} .checkSelectWrap .tools .selectNum {font-size: 14px; color:rgba(255, 255, 255, 1); margin: 0 10px 0px; width: auto; min-width: 88px;} .checkSelectWrap .tools .buttonWrap {display: flex;flex-flow:wrap; gap: 8px;} .checkSelectWrap .tools .buttonWrap button {cursor:pointer; white-space:nowrap; width: auto; min-width: 108px; height:28px; flex-grow:0; display:flex; flex-direction:row; justify-content:center; align-items:center; border-radius:4px; font-size:12px; padding:1px 12px; line-height:1 !important; margin: 0 !important; background:#697387; font-weight:500;} .checkSelectWrap .tools .buttonWrap button.disabled {cursor: not-allowed; opacity: 0.4;} .checkSelectWrap .tools .buttonWrap button.disabled:hover {text-decoration: none;} .checkSelectWrap .tools .buttonWrap button.disabled:active {box-shadow: unset; background: #fff;} .checkSelectWrap .closeWhite {position: absolute; right: 10px;} .checkSelectWrap .tools .buttonWrap .btnMore {display:flex; align-items:center; height: auto; width: auto; flex-grow:1; position:relative; justify-content:flex-end;} .checkSelectWrap .tools .buttonWrap .btnMore button{box-shadow:none; font-size:0px; padding: 0; display: none; background: none; width:24px; height:24px; filter:invert(1); border-radius:0px;} .checkSelectWrap .tools .buttonWrap .btnMore button::before{opacity:unset; width:24px; height:24px;} .checkSelectWrap .tools .buttonWrap .btnMore .layerNavi {display: none; position: absolute; top: 38px; right: 0px;} .checkSelectWrap .closeDark {position:absolute; right:16px; width:24px; height:24px; border-radius:0px;} .checkSelectWrap .closeDark::before {width:24px; height:24px;} /* assignProfilePopup */ .assignProfilePopup .textA {font-size: 16px; font-weight: normal; color: #333; word-break: break-word; margin: 0 0 24px 0; text-align: center;} .assignProfilePopup .textB {font-size: 16px; font-weight: normal; color: #555; word-break: break-word; margin: 16px 0 30px 0; text-align: center;} .assignProfilePopup .profileBox {min-height: 314px; height: auto; width: calc(100%); overflow-y: overlay; background-color: #f8f8f8; padding: 20px; box-sizing: border-box;} .assignProfilePopup .profileBox .head {font-size: 16px; font-weight: 500; color: #555; word-break: break-word;} .assignProfilePopup .profileBox .body {margin-top: 16px;} .assignProfilePopup .profileBox .body ul li:first-child {margin-top: 0;} .assignProfilePopup .profileBox .body ul li {margin-top: 16px;} .assignProfilePopup .profileBox .body ul li .opt label .profileName {font-size: 14px; font-weight: 400; display: flex; color: #333; padding-right: 30px; box-sizing: border-box;} .assignProfilePopup .profileBox .body ul li .opt label .profileName::after {content: ""; background: url(../img/icon/ic_device.svg) no-repeat; height: 18px; width: 18px; position: absolute; top: 0; background-size: contain; right: 0;} /* assign profile three */ .assignProfilePopup .profileBox .body {display: flex; justify-content: center; flex-direction: column;} .assignProfilePopup .profileBox .body {display: flex; justify-content: center; flex-direction: column;} .assignProfilePopup .profileBox .body .textBox {display: flex; justify-content: center; flex-direction: column; margin: 67px auto 12px auto;} .assignProfilePopup .profileBox .body .textBox p {font-size: 16px; font-weight: normal; color: #555; line-height: 1.5; word-break: break-word;} .assignProfilePopup .profileBox .body .createProfileBox {margin: auto;} .assignProfilePopup .profileBox .body .createProfileBox .button {padding: 10px 29px; height: auto; min-width: unset;} /* profileNamePop */ .profileNamePop {padding: 26px 0;} .profileNamePop .dlBox {display: flex; flex-direction: column; gap: 24px;} .profileNamePop .dlBox dl {display: flex; align-items: center; flex-direction: column; gap: 10px; margin: 0px !important;} .profileNamePop .dlBox dl dt {display: flex !important; align-items: center !important; justify-content: flex-start; font-size: 13px !important; font-weight: normal; color: #555; word-break: break-all; min-height: unset !important; line-height: 1.3 !important;} .profileNamePop .dlBox dl dd {display: flex !important; align-items: center !important; justify-content: flex-start; font-size: 14px !important; font-weight: normal; color: #383838; word-break: break-all; line-height: 1.3 !important;} .profileNamePop .settingVal {margin-top: 24px;} .profileNamePop .settingVal .head {margin: 0 0 10px 0;} .profileNamePop .settingVal .head p {font-size: 13px; font-weight: normal; color: #555;} .profileNamePop .settingVal .body {width: 100%; height: auto; display: flex; min-height: 176px;} .profileNamePop .settingVal .body ul {padding: 0 20px; box-sizing: border-box; width: 100%;} .profileNamePop .settingVal .body ul li {line-height: 1.2; font-size: 14px; color: #383838; width: 100%; padding: 6px 0; box-sizing: border-box; position: relative; display: flex; align-items: center;} .profileNamePop .settingVal .body ul li::before {content: ""; display: flex; height: 1px; width: 5px; background-color: #000; position: absolute; top: 14px; left: 0;} .profileNamePop .settingVal .body ul li dl {display: flex; align-items: center; justify-content: left; width: calc(100% - 10px); margin: 0 0 0 10px; gap: 12px 0;} .profileNamePop .settingVal .body ul li dl dt {width: auto; text-align: left;} .profileNamePop .settingVal .body ul li dl dd {width: auto; display: flex; text-align: left; padding-left: 10px; box-sizing: border-box;} .profileNamePop .settingVal .body ul li.playURL {display: flex; flex-direction: column; gap: 12px;} .profileNamePop .settingVal .body ul li.playURL .urlDIV {display: flex; width: calc(100%); padding: 8px 10px; box-sizing: border-box; height: auto; background-color: #f8f8f8; border-radius: 6px; border: 1px solid var(--Border-etc-color-border-noti-normal, #EBEBF0);} .profileNamePop .settingVal .body ul li.playURL .urlDIV p {font-size: 12px; font-weight: normal; color: #383838; text-align: left; word-break: break-word; line-height: 1.3;} .profileNamePop .settingVal .body ul li .powerOnOffSchedule {display: flex; width: calc(100%);} .profileNamePop .settingVal .body ul li .powerOnOffSchedule dl {display: flex; width: calc(100%); flex-direction: column;} .profileNamePop .settingVal .body ul li .powerOnOffSchedule dl dt {display: flex; width: calc(100%); font-size: 14px; font-weight: normal; color: #383838;} .profileNamePop .settingVal .body ul li .powerOnOffSchedule dl dd {display: flex; width: 100%; padding: 0;} .profileNamePop .settingVal .body ul li .powerOnOffSchedule dl dd .tableWrap {width: 100%;} .profileNamePop .settingVal .body ul li .powerOnOffSchedule dl dd .tableWrap .mobileTable {display: none;} .profileNamePop .settingVal .body ul li .powerOnOffSchedule dl dd .tableWrap .jsmartable tbody tr td .fb_x {height: 100%; width: calc(100%);} .profileNamePop .settingVal .body ul li .powerOnOffSchedule dl dd .tableWrap .jsmartable tbody tr td dl {display: flex; align-items: center; width: auto; flex-direction: row; margin: auto;} .profileNamePop .settingVal .body ul li .powerOnOffSchedule dl dd .tableWrap .jsmartable tbody tr td dl dt {display: flex; position: relative; font-size: 14px; color: #383838; font-weight: normal; width: auto; text-align: left; min-width: 71px;} .profileNamePop .settingVal .body ul li .powerOnOffSchedule dl dd .tableWrap .jsmartable tbody tr td dl dt::after {content: ""; height: 10px; top: 4px; width: 1px; background-color: #383838; position: absolute; right: 0;} .profileNamePop .settingVal .body ul li .powerOnOffSchedule dl dd .tableWrap .jsmartable tbody tr td dl dd {display: flex; font-size: 14px; color: #383838; font-weight: normal; width: auto; min-width: 114px; padding: 0 0 0 8px;} .profileNamePop .settingVal .subBody {width: calc(100%); padding: 0 0 0 20px; box-sizing: border-box; margin-top: 2px; width: auto;} .profileNamePop .settingVal .subBody ul {list-style-type: none;} .profileNamePop .settingVal .subBody ul li {line-height: 1.2; font-size: 14px; color: #383838; position: relative; padding: 5px 0;} .profileNamePop .settingVal .subBody ul li dl {display: flex; align-items: center; justify-content: left; flex-wrap: wrap;} .profileNamePop .settingVal .subBody ul li dl dt {width: auto; text-align: left;} .profileNamePop .settingVal .subBody ul li dl dd {width: auto; display: flex; text-align: left; padding-left: 10px; box-sizing: border-box;} .profileNamePop .settingVal .subBody ul li.proxyServer {display: flex; flex-direction: column; gap: 12px;} .profileNamePop .settingVal .subBody ul li.proxyServer .proxy {display: flex; width: calc(100%); padding: 8px 10px; box-sizing: border-box; height: auto; background-color: #f8f8f8; flex-direction: column; gap: 5px;} .profileNamePop .settingVal .subBody ul li.proxyServer .proxy dl {display: flex; flex-direction: row; align-items: center;} .profileNamePop .settingVal .subBody ul li.proxyServer .proxy dl dt {font-size: 12px; font-weight: normal; color: #383838;} .profileNamePop .settingVal .subBody ul li.proxyServer .proxy dl dd {font-size: 12px; font-weight: normal; color: #383838;} /* device management profile */ .container .body .contents .contentBox.deviceManagementProfile {padding: 40px; height: calc(100% - 60px); width: calc(100% - 40px); margin: 0 20px;} .container .body .contents .contentBox.deviceManagementProfile .detailView .detailVeiwHeader {padding: 0; margin: 0 0 18px 0; border: 0px;} .container .body .contents .contentBox.deviceManagementProfile .detailView .detailVeiwBody .moreBoxInfo .tools {width: calc(100%); display: flex; justify-content: flex-end; gap: 0 10px; margin-bottom: 18px;} .container .body .contents .contentBox.deviceManagementProfile .detailView .detailVeiwBody .moreBoxInfo .tableBoard {width: 100%; position: relative; height: calc(100% - 80px) !important; overflow: scroll; box-sizing: border-box;} .container .body .contents .contentBox.deviceManagementProfile .detailView .detailVeiwBody .moreBoxInfo .tableBoard .tableHead {margin-bottom: 10px; align-items: flex-end;} .container .body .contents .contentBox.deviceManagementProfile .detailView .detailVeiwBody .moreBoxInfo .tableBoard .tableHead .total {font-size: 14px; font-weight: normal; color: #333;} .container .body .contents .contentBox.deviceManagementProfile .detailView .detailVeiwBody .moreBoxInfo .tableBoard .tableWrap table tbody tr td {height: 56px;} .container .body .contents .contentBox.deviceManagementProfile .detailView .detailVeiwHeader .button.return {width: 42px; height: 42px; top: -4px;} .container .body .contents .contentBox .detailView .detailVeiwBody .moreBoxInfo {margin: 0 0 30px 115px;} .container .body .contents.appDetails .contentBox .detailView .detailVeiwBody .moreBoxInfo {margin: 0; gap: 24px 0; display: flex; flex-direction: column;} .container .body .contents.appDetails .contentBox .detailView .detailVeiwBody .moreBoxInfo .appDetailsDlBox {gap: 20px 0; display: flex; justify-content: flex-start; flex-direction: column; max-width: calc(100% - 64px); word-break: break-word;} .container .body .contents.appDetails .contentBox .detailView .detailVeiwBody .moreBoxInfo .appDetailsDlBox dl {display: flex; gap: 48px; align-items: flex-start; margin: 0;} .container .body .contents.appDetails .contentBox .detailView .detailVeiwBody .moreBoxInfo .appDetailsDlBox dl dt {min-width: 100px; font-size: 16px; font-weight: 500; color: #333; display: flex; word-break: break-word;} .container .body .contents.appDetails .contentBox .detailView .detailVeiwBody .moreBoxInfo .appDetailsDlBox dl dd {width: auto; font-size: 16px; font-weight: normal; word-break: break-word; line-height: 22.4px;} .container .body .contents.appDetails .contentBox .detailView .detailVeiwBody .moreBoxInfo .appDetailsDlBox dl dt {} /* assignedDevicePopup */ .assignedDevicePopup .dlBox {padding: 16px 0 20px 0; box-sizing: border-box; display: flex; align-items: center;} .assignedDevicePopup .dlBox dl dt {margin-right: 5px; font-size: 16px; font-weight: bold;} .assignedDevicePopup .dlBox dl dd {font-size: 16px;} /* createProfilePopup */ .modalBox .mbBody .mbBodyContents.createProfilePopup .guide {margin-bottom: 10px;} .modalBox .mbBody .mbBodyContents.createProfilePopup .dlBox {display: flex; flex-direction: column; gap: 20px 0; margin-bottom: 20px;} .modalBox .mbBody .mbBodyContents.createProfilePopup .dlBox dl {display: flex; align-items: flex-start;} .modalBox .mbBody .mbBodyContents.createProfilePopup .dlBox dl dt {display: flex; width: 187px;} .modalBox .mbBody .mbBodyContents.createProfilePopup .dlBox dl dd {display: flex; width: calc(100% - 187px);} .modalBox .mbBody .mbBodyContents.createProfilePopup .dlBox dl dd .selectWrap {width: calc(100%);} .modalBox .mbBody .mbBodyContents.createProfilePopup .dlBox dl dd textarea {width: 100%; height: 100px; padding: 15px; box-sizing: border-box;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable {display: flex; height: auto; flex-direction: column; justify-content: flex-start;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .head {margin: 0; padding: 0 0 18px 0; box-sizing: border-box;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .head p {font-size: 16px; line-height: 1.13; font-weight: normal; color: #555;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body {display: flex; height: auto; width: 100%;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap {width: calc(100%);} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable thead tr th:nth-child(1) {width: 48px;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable thead tr th:nth-child(2) {width: 160px;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable thead tr th:nth-child(3) {width: 790px;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr {min-height: 56px; height: auto;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td:nth-child(2) {text-align: left; padding: 18px 16px; box-sizing: border-box;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td:nth-child(3) {text-align: left; padding: 18px 16px; box-sizing: border-box;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .editProfileBox .tableHead {display: flex; align-items: flex-end; padding: 0; margin: 0;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .editProfileBox .tableHead .buttonWrap {padding: 10px 0; box-sizing: border-box;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .editProfileBox .tableHead .buttonWrap button {padding: 11px 41px; box-sizing: border-box; height: auto;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .editProfileBox .tableHead .buttonWrap button.view {display: none;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .editProfileBox .tableWrap {margin: 0;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .editProfileBox .tableWrap .jsmartable tbody tr td:nth-child(1) {width: 200px; text-align: center;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .editProfileBox .tableWrap .jsmartable tbody tr td:nth-child(2) {width: 200px; text-align: center;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .editProfileBox .tableWrap .jsmartable tbody tr td:nth-child(3) {width: 200px; text-align: center;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .editProfileBox .tableWrap .jsmartable tbody tr td:nth-child(4) {width: 80px;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .editProfileBox .tableWrap .jsmartable tbody tr td:nth-child(5) {width: 80px;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .editProfileBox .tableHead .buttonWrap .hide {display: block;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .editProfileBox .fb_dir_y dl dd .inputBox {max-width: 480px; width: 100%;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .radioDiv {display: flex; width: calc(100%); gap: 22px;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .bgGrey {width: 100%; height: auto; min-height: 30px; padding: 9px 14px; background: #f0f2f5; display: flex; align-items: center; box-sizing: border-box; margin-top: 16px; margin-bottom: 12px; word-break: break-all;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td > span {font-size: 12px; color: #383838;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr.disabled {opacity: 0.4;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .fb_dir_y {gap: 10px; height: auto; display: flex; width: calc(100%);} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .fb_dir_y dl {display: flex; width: calc(100%); min-height: 40px;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .fb_dir_y dl.playUrl {display: flex;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .fb_dir_y dl.playUrl dd {display: flex; max-width: 480px; width: 100%;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .fb_dir_y dl.playUrl dd .inputBox {width: 100%;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .fb_dir_y dl dt {display: flex; justify-content: flex-start; font-size: 16px; font-weight: normal; color: #555; word-break: break-all; width: 108px;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .fb_dir_y dl dd {display: flex; justify-content: flex-start; font-size: 14px; font-weight: normal; color: #383838; word-break: break-all; padding-left: 10px;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .fb_dir_y.serverSetting dl {display: flex; width: calc(100%);} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .fb_dir_y.serverSetting dl.fullyQualifiedDomain {align-items: flex-start;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .fb_dir_y.serverSetting dl dt {display: flex; width: 200px; font-size: 16px; font-weight: normal; color: #555; align-items: center; word-break: break-word;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .fb_dir_y.serverSetting dl dd {display: flex; width: calc(100% - 200px); align-items: center;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .fb_dir_y.serverSetting dl dd .gap14 {gap: 14px; display: flex; align-items: center;} .modalBox .mbBody .mbBodyContents.createProfilePopup .settingTable .body .tableWrap .jsmartable tbody tr td .fb_dir_y.serverSetting dl dd .inputBox {width: 100%;} /* addSchedulePopup */ .addSchedulePopup .scheduleType {margin: 46px 0 30px 0; box-sizing: border-box; display: flex; min-height: 50px; height: auto; padding: 16px; background-color: #f8f8f8;} .addSchedulePopup .scheduleType dl {display: flex; align-items: flex-start;} .addSchedulePopup .scheduleType dl dt {display: flex; align-items: center; width: 143px; font-size: 16px; font-weight: normal; color: #555; line-height: 1.13;} .addSchedulePopup .scheduleType dl dd {display: flex; align-items: center;} .addSchedulePopup .scheduleType dl dd .fb_e {display: flex; gap: 26px; flex-direction: column;} .addSchedulePopup .dlBox {display: flex; width: calc(100%); flex-direction: column; gap: 20px; margin-bottom: 26px;} .addSchedulePopup .dlBox dl {display: flex; align-items: center; width: calc(100%);} .addSchedulePopup .dlBox dl dt {display: flex; width: 143px; align-items: center; font-size: 16px; font-weight: normal; color: #555; padding: 0 0 0 16px; box-sizing: border-box;} .addSchedulePopup .dlBox dl dd {display: flex; align-items: center;} .addSchedulePopup .dlBox dl dd .timeBox {display: flex; width: auto; height: 40px; align-items: center; gap: 12px; max-width: 100%;} /* .addSchedulePopup .dlBox dl dd .timeBox .selectWrap {width: auto; min-width: calc(33.33% - 12px);} */ .addSchedulePopup .dlBox dl dd .timeBox .ui-selectmenu-button {width: 75px; text-align: center;} /* proxyServerSetting */ .proxyServerSetting .dlBox {display: flex; flex-direction: column; gap: 20px; margin: 0;} .proxyServerSetting .dlBox dl {display: flex; width: calc(100%); flex-direction: column; gap:16px;} .proxyServerSetting .dlBox dl dt {display: flex; width: calc(100%); font-size: 16px; line-height: 1.13; font-weight: 500; color: #333; word-break: break-word;} .proxyServerSetting .dlBox dl dd {display: flex; width: 100%;} .proxyServerSetting .exceptionAdd {display: flex; flex-direction: column;} .proxyServerSetting .exceptionAdd p {font-weight: normal; font-size: 16px; color: #555; word-break: break-word; margin: 0 0 18px 0;} .proxyServerSetting .exceptionAdd .urlDiv {display: flex; gap: 12px; width: 100%;} .proxyServerSetting .exceptionAdd .urlDiv input {width: calc(100% - 116px);} .proxyServerSetting .exceptionAdd .urlDiv button {height: auto; padding: 9px 38px; box-sizing: border-box;} .proxyServerSetting .exceptionAdd .tableWrap {margin: 20px 0;} .proxyServerSetting .exceptionAdd .tableWrap .tableHead {display: flex; padding: 18px 0 10px 0; align-items: flex-end; box-sizing: border-box;} .proxyServerSetting .exceptionAdd .tableWrap .tableHead .buttonWrap {padding: 0;} .proxyServerSetting .exceptionAdd .tableWrap .tableHead .buttonWrap button {min-width: unset;} .proxyServerSetting .exceptionAdd .tableWrap .jsmartable table thead tr th:nth-child(2) {text-align: left; padding: 0 16px; box-sizing: border-box;} .proxyServerSetting .exceptionAdd .tableWrap .jsmartable table tbody tr td:nth-child(1) {width: 60px; padding: 0 16px; box-sizing: border-box;} .proxyServerSetting .exceptionAdd .tableWrap .jsmartable table tbody tr td:nth-child(2) {text-align: left; padding: 0 16px; box-sizing: border-box;} .proxyServerSetting .exceptionAdd .tableWrap .jsmartable table tbody tr td:nth-child(3) {width: 144px; padding: 0 16px; box-sizing: border-box;} /* points history popup */ .pointsHistoryPopup {display: flex; flex-direction: column; width: 100%; height: auto !important; padding: 10px 20px 0 20px; box-sizing: border-box;} .pointsHistoryPopup .pointHistory {display: flex; flex-direction: column; width: 100%; height: auto; padding: 10px 0; box-sizing: border-box;} .pointsHistoryPopup .pointHistory .head {display: flex; margin: 0 0 18px 0; padding: 0;} .pointsHistoryPopup .pointHistory .head h3 {font-size: 16px; font-weight: bold; color: #555; word-break: break-word; margin: 0; padding: 0;} .pointsHistoryPopup .pointHistory .historyBox {min-height: 181px; border-radius: 10px; background-color: #f8f8f9; margin-bottom: 20px; padding: 20px 36px;} .pointsHistoryPopup .pointHistory .historyBox .head {padding-bottom: 18px; box-sizing: border-box; margin-bottom: 0;} .pointsHistoryPopup .pointHistory .historyBox .head h5 {font-size: 14px; word-break: break-word; font-weight: 500; color: #555;} .pointsHistoryPopup .pointHistory .historyBox .body {min-height: 40px; height: auto; display: flex; flex-direction: row; flex-wrap: wrap; gap: 19.5px 24px; align-items: center;} .pointsHistoryPopup .pointHistory .historyBox .body .opt.custom {display: flex;} .pointsHistoryPopup .pointHistory .historyBox .body .opt.custom dl dt {font-size: 12px; font-weight: normal; color: #555;} .pointsHistoryPopup .pointHistory .historyBox .body .tilt {padding: 10px; box-sizing: border-box;} .pointsHistoryPopup .pointHistory .historyBox .footer {padding: 20px 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center;} .pointsHistoryPopup .pointHistory .historyBox .footer .button {padding: 0 48px; box-sizing: border-box;} .pointsHistoryPopup .tableContainer {display: flex; width: calc(100% - 2px); flex-direction: column; border: 1px solid #d0d1d2; border-radius: 10px; max-height: 530px;} .pointsHistoryPopup .tableContainer .head {height: auto; padding: 14px; box-sizing: border-box; border-bottom: 1px solid #d0d1d2;} .pointsHistoryPopup .tableContainer .head h4 {display: flex; padding: 0; margin: 0; font-size: 16px; font-weight: normal; color: #555; word-break: break-word;} .pointsHistoryPopup .tableContainer .body {display: flex; padding: 20px; box-sizing: border-box; margin: 0; max-height: 439px; overflow: overlay;} .pointsHistoryPopup .tableContainer .body .tableWrap {width: 100%;} .pointsHistoryPopup .tableContainer .body .tableWrap .jsmartable {margin: 0 !important;} .pointsHistoryPopup .tableContainer .body .tableWrap .jsmartable .points {font-weight: bold; font-size: 14px; color: #383838;} .pointsHistoryPopup .tableContainer .body .tableWrap .jsmartable .points.blueText {color: #417aaa;} /* points view all */ .pointsViewAllBody {padding: 40px !important;} .pointsViewAll .tableContainer .body .tableWrap {width: 100%; height: auto;} .pointsViewAll .tableContainer .body .tableWrap .jsmartable {margin: 10px 0 0 0 !important;} /* popup button icon */ .popupButtonIcon::after {content: ""; display: inline-flex; width: 6px; height: 10px; background: url(../img/icon/ic_list_more.svg); object-fit: contain; margin: 0 0 0 5px;} /* device management snb */ .snb.snbDevice {flex-direction: column; display: flex;} .snb.snbDevice .accountSublist {height: calc(100% - 60px); border-bottom: 1px solid #d0d1d2; overflow-y: overlay;} .snb.snbDevice .buttonWrap {height: 60px; width: 100%; display: flex; align-items: center; justify-content: center;} .snb.snbDevice .buttonWrap .button.howToEdit {height: 41px; width: 311px; display: flex; align-items: center; justify-content: center;} .snb.snbDevice .buttonWrap .button.howToEdit:before {content: ""; height: 16px; width: 16px; display: flex; background: url(../img/icon/ic_about\ role_16.svg) no-repeat; background-size: contain; margin: 0 5px 0 0;} .snb.snbDevice .buttonWrap .button.howToEdit::after {content: ""; display: inline-flex; width: 6px; height: 10px; background: url(../img/icon/ic_list_more.svg); object-fit: contain; margin: 0 0 0 10px;} /* created app view */ .mbBody.viewBody.fb_xy .mbBodyContents .fb_y {width: 100%; justify-content: flex-end; padding-bottom: 14px; box-sizing: border-box;} .mbBody.viewBody.fb_xy .mbBodyContents .fb_y .waitingIcon{height: 18px; width: 18px; display: flex; align-items: center; justify-content: center; background-image: url(../img/common/ic_status_wait.svg); margin-right: 8px; background-repeat: no-repeat; background-position: contain;} .mbBody.viewBody.fb_xy .mbBodyContents .waitingApproval {height: calc(100% - 24px) !important; overflow-y: scroll; padding-top:24px;} .createdAppView.viewPopup {box-sizing: border-box; display: flex; width: 100% !important; flex-direction: column;} .createdAppView.viewPopup .basicInfo {display: flex; width: 100%; flex-direction: column; margin-bottom: 40px;} .createdAppView.viewPopup .basicInfo .head {display: flex; padding:0 0px 6px 0px; box-sizing: border-box; border-bottom: 1px solid #e5e5e5; margin-bottom:24px;} .createdAppView.viewPopup .basicInfo .head h2 {font-size: 12px; font-weight: bold; line-height: 1; color: #555; word-break: break_word;} .createdAppView.viewPopup .basicInfo .body {display: flex;} .createdAppView.viewPopup .basicInfo .body .thumbBox {width:152px; display: flex; box-sizing: border-box;} .createdAppView.viewPopup .basicInfo .body .thumbBox .thumb {height: 120px; width: 120px; border-radius: 25px; background: #d9d9d9; display: flex; align-items: center; justify-content: center;} .createdAppView.viewPopup .basicInfo .body .thumbBox .thumb img {width: 100%;} .createdAppView.viewPopup .basicInfo .body .dlBoxGroup {width: calc(100% - 152px); display: flex; flex-wrap: wrap;} .createdAppView.viewPopup .basicInfo .body .dlBoxGroup .dlBox {display: flex; width: 100%; flex-wrap: wrap; gap: 24px 20px;} .createdAppView.viewPopup .basicInfo .body .dlBoxGroup.wrap .dlBox{flex-wrap:wrap; flex-direction:row; gap:16px;} .createdAppView.viewPopup .basicInfo .body .dlBoxGroup .dlBox dl {width:248px; display: flex; flex-direction: column; margin: 0; gap:4px;} .createdAppView.viewPopup .basicInfo .body .dlBoxGroup .dlBox dl.description {width: 100%; display: flex; flex-direction: column; margin: 0;} .createdAppView.viewPopup .basicInfo .body .dlBoxGroup .dlBox dl dt {min-height:unset; font-size:14px; font-style:normal; font-weight:500; line-height:140%; color:#333; text-align:left; padding:0px;} .createdAppView.viewPopup .basicInfo .body .dlBoxGroup .dlBox dl dd {font-size: 14px; font-style: normal; font-weight: 400; line-height: 140%; color: #555; word-break: break-word; width: 100%; min-height: 10px;} .createdAppView.viewPopup .advInfo {display: flex; width: 100%; flex-direction: column; margin-bottom: 40px;} .createdAppView.viewPopup .advInfo .head {display: flex; padding: 0 0px 6px 0px; box-sizing: border-box; border-bottom: 1px solid #e5e5e5; margin-bottom: 24px;} .createdAppView.viewPopup .advInfo .head h2 {font-size: 12px; font-weight: bold; line-height: 1; color: #555; word-break: break-word;} .createdAppView.viewPopup .advInfo .body {display: flex; flex-direction: column;} .createdAppView.viewPopup .advInfo .body .dlBoxGroup {width: calc(100%); display: flex; flex-wrap: wrap;} .createdAppView.viewPopup .advInfo .body .dlBoxGroup .dlBox {display: flex; width: 100%; flex-wrap: wrap; gap: 24px 40px;} .createdAppView.viewPopup .advInfo .body .dlBoxGroup .dlBox dl {width: 410px; display: flex; flex-direction: column; margin: 0;} .createdAppView.viewPopup .advInfo .body .dlBoxGroup .dlBox dl.appFile {width: 100%; display: flex; flex-direction: column; margin: 0; gap:12px;} .createdAppView.viewPopup .advInfo .body .dlBoxGroup .dlBox dl.appFile dt {} .createdAppView.viewPopup .advInfo .body .dlBoxGroup .dlBox dl.appFile dd {height:auto; padding:20px; border:none; background-color:#F5F6FA; display: flex; flex-direction: column; border-radius:8px;} .createdAppView.viewPopup .advInfo .body .dlBoxGroup .dlBox dl.appFile dd .buttonWrap {display: flex; justify-content: flex-start; padding: 0 0 12px 0;} .createdAppView.viewPopup .advInfo .body .dlBoxGroup .dlBox dl.appFile dd .buttonWrap button{width:145px; min-width:unset; padding:10px;} .createdAppView.viewPopup .advInfo .body .dlBoxGroup .dlBox dl.appFile dd .buttonWrap button > .download{font-size: 0;display: block;margin: 0 6px 0 0px;width: 16px;height: 16px;background: url(../img/common/ic_download.svg)no-repeat;background-size: cover;filter: brightness(0);opacity: 0.5;} .createdAppView.viewPopup .advInfo .body .dlBoxGroup .dlBox dl.description {width: 100%; display: flex; flex-direction: column; margin: 0;} .createdAppView.viewPopup .advInfo .body .dlBoxGroup .dlBox dl dt {font-size: 14px; text-align: left; font-weight:500; color: #555; word-break: break-word; width: 100%; min-height: 10px; box-sizing: border-box;} .createdAppView.viewPopup .advInfo .body .dlBoxGroup .dlBox dl dd {font-size: 14px; text-align: left; font-weight: normal; color: #555; word-break: break-word; width: 100%; min-height: 10px; box-sizing: border-box;} .createdAppView.viewPopup .advInfo .body .dlBoxGroup .dlBox dl.appFile dd .appFileBox ul {padding: 0; margin: 0;} .createdAppView.viewPopup .advInfo .body .dlBoxGroup .dlBox dl.appFile dd .appFileBox ul li {display: flex; margin: 3px 0;} .createdAppView.viewPopup .advInfo .body .dlBoxGroup .dlBox dl.appFile dd .appFileBox ul li .downloadFileBox {height: auto; max-width: 100%; width: 100%; background-color: #f8f8f8; padding:7.5px 8px 7.5px 14px; box-sizing: border-box; margin: 0; display: flex; align-items: center; word-break: break-word; gap:10px;} .createdAppView.viewPopup .advInfo .body .dlBoxGroup .dlBox dl.appFile dd .appFileBox ul li .downloadFileBox > .download{font-size:0; display:block; width:16px; height:16px; background:url(../img/common/ic_download.svg)no-repeat; background-size:cover; filter:brightness(0); flex-shrink:0;} .createdAppView.viewPopup .advInfo .body .dlBoxGroup .dlBox dl.appFile dd .appFileBox ul li .downloadFileBox span {font-size: 12px; font-style: normal; font-weight: 500; line-height: 110%; flex-grow:1;} .createdAppView.viewPopup .advInfo .body .appSS {display: flex; width: 100%; flex-direction: column;} .createdAppView.viewPopup .advInfo .body .appSS h3 {color:#333; box-sizing: border-box; font-size:14px; font-weight:500; line-height: 1;} .createdAppView.viewPopup .advInfo .body .appSS .appScreen {margin: 24px 0 0 0; width: calc(100%); box-sizing: border-box; position: relative; display: flex; justify-content: center; flex-direction:column; gap:32px;} .createdAppView.viewPopup .advInfo .body .appSS .appScreen .carousal {width: 100%;display: flex;align-items: center;gap: 0 4px;justify-content: center;} .createdAppView.viewPopup .advInfo .body .appSS .appScreen .carousal span {background: #354056;height: 6px;width: 6px;border-radius: 50%;opacity: 0.3} .createdAppView.viewPopup .advInfo .body .appSS .appScreen .carousal span.active {opacity: 1; border-radius: 6px;} .createdAppView.viewPopup .advInfo .body .appSS .appScreen .thumb {display:flex; align-items: center; width: calc(100%); max-width: 750px; justify-content: center; gap: 12px;} .createdAppView.viewPopup .advInfo .body .appSS .appScreen .thumb img {width:278px; height:188px; border-radius:8px;} .createdAppView.viewPopup .advInfo .body .appSS .appScreen .thumb .imagePreviousWrap{height:auto; width:auto; display: flex; align-items: center;} .createdAppView.viewPopup .advInfo .body .appSS .appScreen .thumb .imagePreviousWrap button{box-shadow: none; padding: 0; font-size: 0px; transform: rotate(180deg); height:36px; width:36px; line-height: 22px; border:none;} .createdAppView.viewPopup .advInfo .body .appSS .appScreen .thumb .imagePreviousWrap button:before{content:"";background-position: center; background-repeat: no-repeat;background-image: url(../img/icon/ic_arrow_right.svg); width:14px; height:22px; display:block;} .createdAppView.viewPopup .advInfo .body .appSS .appScreen .thumb .imageNextWrap{height:auto; width:auto; display: flex; align-items: center;} .createdAppView.viewPopup .advInfo .body .appSS .appScreen .thumb .imageNextWrap button{box-shadow: none; font-size: 0px; height: 36px; width: 36px; line-height: 22px; padding: 0; border:none;} .createdAppView.viewPopup .advInfo .body .appSS .appScreen .thumb .imageNextWrap button:before{content:"";background-position: center; background-repeat: no-repeat;background-image: url(../img/icon/ic_arrow_right.svg); width:14px; height:22px; display:block;} .createdAppView.viewPopup .advInfo .body .appSS .appScreen .thumb img.current {display:block} .createdAppView.viewPopup .advInfo .body .commentDiv {display: flex; margin-top: 20px;} .createdAppView.viewPopup .advInfo .body .commentDiv dl dt {padding:6px 0px; box-sizing: border-box; border-bottom: 1px solid #e5e5e5; font-size: 16px; font-weight: bold; color: #555; word-break: break-word;} .createdAppView.viewPopup .advInfo .body .commentDiv dl dd {padding:16px 10px 0 10px; box-sizing: border-box; word-break:break-all; color:#555; font-size:14px; font-weight:400;} /* points assignment */ .requstApprovalStepOne.pointAssignmentOne .mbBody .mbBodyContents .article .dlBoxGroup .dlBox dl dt {width: 220px;} .requstApprovalStepOne.pointAssignmentOne .mbBody .mbBodyContents .article .dlBoxGroup .dlBox dl dd {width: calc(100% - 220px);} /* proxy server setting */ .proxyServerSetting .exceptionAdd .tableWrap table thead tr th:nth-child(3){display:table-cell !important;} .proxyServerSetting .exceptionAdd .tableWrap table thead tr th.jsmartable-row-append-th{display: none !important;} .proxyServerSetting .exceptionAdd .tableWrap table thead tr th:nth-child(2), .proxyServerSetting .exceptionAdd .tableWrap table tbody tr td:nth-child(2){border-right:none !important;} .proxyServerSetting .exceptionAdd .tableWrap table thead tr th:nth-child(1), .proxyServerSetting .exceptionAdd .tableWrap table tbody tr td:nth-child(1){width:50px;} .proxyServerSetting .exceptionAdd .tableWrap table thead tr th:nth-child(3), .proxyServerSetting .exceptionAdd .tableWrap table tbody tr td:nth-child(3){width:132px;} .proxyServerSetting .exceptionAdd .tableWrap .jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable .jsmartable-subrow .jsmartable-subcol:first-child > button{background:transparent; padding:0; box-shadow:none; pointer-events:none; width:75px; border-radius:0px; font-size:0px; position:relative; display: flex; width: 100%; height: 100%; align-items: center; justify-content: centers;} .proxyServerSetting .exceptionAdd .tableWrap .jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable .jsmartable-subrow .jsmartable-subcol:first-child > button::before{content:"Delete"; font-size:inherit; display:flex; position:absolute; font-size:13px; color:#464646; position: absolute;} /* power on/off schedule popup */ .modalBox .mbBody .mbBodyContents.powerOnOffSchedule .tableHead {display: flex; align-items: end;} /* new request license step - 3 */ .approvalLicense.popupLicense .modalBox .mbBody .mbBodyContents .article .dlBox dl {margin: 22px 0 0 0;} .approvalLicense.popupLicense .modalBox .mbBody .mbBodyContents .article .dlBox dl:first-child {margin: 20px 0 0 0;} .requestLicenseThree.mbBody .mbBodyContents .article .attachedFiles h3 {font-size: 16px; line-height: 1.13; font-weight: normal; color: #555;} .approvalLicense.popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox {width: 100%;} .approvalLicense.popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .sectionConfirm > dl > dt {font-size: 14px;} .approvalLicense.popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .sectionConfirm > dl > dd {font-size: 14px;} /* license view summary */ .popupLicense.approvalLicensePopup .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .waitingBox {margin: 0 0 14px 0;} /* view reqeust two */ .popupLicense .modalBox.viewRequestTwo .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox {height: auto !important; display: flex;} .popupLicense .modalBox.viewRequestTwo .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .sectionConfirm {background: #fff;} .popupLicense .modalBox.viewRequestTwo .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .sectionConfirm .dlBox {height: auto !important; display: flex; gap: 24px 40px; flex-wrap: wrap; width: 100%; padding: 24px 0 0 0; box-sizing: border-box;} .popupLicense .modalBox.viewRequestTwo .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .sectionConfirm .dlBox dl {display: flex; flex-direction: column; width: 345px; gap: 10px; margin: 0;} .popupLicense .modalBox.viewRequestTwo .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .sectionConfirm .dlBox dl dt {display: flex; width: 100%; word-break: break-word; max-width: 100%; font-size: 13px;min-height:unset; } .popupLicense .modalBox.viewRequestTwo .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .sectionConfirm .dlBox dl dd {display: flex; width: 100%; word-break: break-word; max-width: 100%; font-size: 16px;} /* request for device management one */ .requestForDeviceManagementOne .mbBody {padding: 14px 20px;} .requestForDeviceManagementOne .mbBody .mbBodyContents .article .dlBoxGroup .dlBox {padding: 30px 20px; margin: 0; display: flex; gap: 20px; flex-direction: column;} .requestForDeviceManagementOne .mbBody .mbBodyContents .article .dlBoxGroup .dlBox dl {margin: 0;} /* request for device management two */ .requestForDeviceManagementTwo .mbBody {padding: 30px 24px;} .requestForDeviceManagementTwo .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox {width: 100% !important;} .requestForDeviceManagementTwo .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .sectionConfirm > dl {margin: 22px 0 0 0;} .requestForDeviceManagementTwo .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .sectionConfirm > dl:nth-child(1) {margin: 20px 0 0 0 !important;} .requestForDeviceManagementTwo .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .sectionConfirm > dl > dt {font-size: 14px;} .requestForDeviceManagementTwo .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .sectionConfirm > dl > dd {font-size: 14px;} /* add device popup one */ .modalBox .addDeviceOne .mbBodyContents .article .dlBox dl dd .addDeviceOTP {display: flex; gap: 11px;} /* add device popup two */ .modalBox .addDeviceTwo .mbBodyContents .article .dlBox dl dd {box-sizing: border-box;} .modalBox .addDeviceTwo .mbBodyContents .article .dlBox dl dd .addDeviceOTP {display: flex; gap: 11px;} .modalBox .addDeviceTwo .mbBodyContents .article .dlBox dl dd .multipleDevice {display: flex; gap: 10px; padding: 30px 0 0 0; flex-direction: column;} .modalBox .addDeviceTwo .mbBodyContents .article .dlBox dl dd .multipleDevice .top {display: flex; gap: 10px; align-items: center; justify-content: flex-start;} .modalBox .addDeviceTwo .mbBodyContents .article .dlBox dl dd .multipleDevice .top .button {padding: 9px 29px; box-sizing: border-box; height: auto;} .modalBox .addDeviceTwo .mbBodyContents .article .dlBox dl dd .multipleDevice .bottom {height: 200px; width: 530px; padding: 24px; max-width: 100%; background: #f8f8f8;} .modalBox .addDeviceTwo .mbBodyContents .article .dlBox dl dd .multipleDevice .bottom.fb_xy {flex-direction: column; line-height: normal;} .modalBox .addDeviceTwo .mbBodyContents .article .dlBox dl dd .multipleDevice .bottom.fb_xy p {font-size: 16px; font-weight: normal; color: #333; word-break: break-word; text-align: center;} .modalBox .addDeviceTwo .mbBodyContents .article .dlBox dl dd .multipleDevice .bottom .dlBox {display: flex; flex-direction: column; gap: 20px;} .modalBox .addDeviceTwo .mbBodyContents .article .dlBox dl dd .multipleDevice .bottom .dlBox dl {display: flex; justify-content: flex-start; flex-direction: row; padding: 0; margin: 0;} .modalBox .addDeviceTwo .mbBodyContents .article .dlBox dl dd .multipleDevice .bottom .dlBox dl dt {text-align: left; width: 124px; display: flex; word-wrap: break-word; font-weight: normal; font-size: 16px; color: #333; padding: 0; margin: 0;} .modalBox .addDeviceTwo .mbBodyContents .article .dlBox dl dd .multipleDevice .bottom .dlBox dl dd {text-align: left; width: calc(100% - 124px); display: flex; word-wrap: break-word; font-weight: 600; font-size: 16px; color: #333;} /* support edit question */ .supportEditQuestion.modalBox .mbBody .mbBodyContents .article .dlBox dl {display: flex; align-items: flex-start !important;} /* points step popup */ .modalBox .mbBody .mbBodyContents.pointsStepOne .article .dlBox dl {align-items: center;} /* business adminstrator */ .modalBox .mbBody .mbBodyContents.businessAdmin {overflow: hidden;} /* approval table */ .approvalTableOne.tableWrap table thead tr th:nth-child(2) {max-width: 204px;} .approvalTableOne.tableWrap table thead tr th:nth-child(3) {max-width: 423px;} .approvalTableOne.tableWrap table thead tr th:nth-child(4) {max-width: 204px;} .approvalTableOne.tableWrap table thead tr th:nth-child(5) {max-width: 204px;} .approvalTableOne.tableWrap table thead tr th:nth-child(6) {max-width: 204px;} .approvalTableOne.tableWrap table thead tr th:nth-child(7) {max-width: 204px;} .approvalTableOne.tableWrap table thead tr th:nth-child(8) {max-width: 204px;} .approvalPointsTable table thead tr th:nth-child(6), .approvalPointsTable table tbody tr td:nth-child(6){width:146px;} /* device management popup */ .deviceManagementProfile.tableWrap table thead tr th:nth-child(1) {width: 80px;} .deviceManagementProfile.tableWrap table thead tr th:nth-child(2) {width: 204px;} .deviceManagementProfile.tableWrap table thead tr th:nth-child(3) {width: 204px;} .deviceManagementProfile.tableWrap table thead tr th:nth-child(4) {width: 204px;} .deviceManagementProfile.tableWrap table thead tr th:nth-child(5) {width: 204px;} .deviceManagementProfile.tableWrap table thead tr th:nth-child(6) {width: 204px;} /* ==================================================================================================================================================================================================================================================================================================================================== New CSS for Cloud console ==================================================================================================================================================================================================================================================================================================================================== */ /* Home page */ .customBody {height: calc(100% - 60px);} .bodyWrapper {height: 100%; overflow-y: overlay;} .bodyWrapper .customBody {height: auto !important; overflow: auto;} .homePage .container .body .contents.homeContainer {height: auto;} .container .body .contents.homeContainer .dcBody {margin: 0 32px; height: auto;} .container .body .contents.homeContainer .dcBody .detailView {background-color: transparent; border: none; overflow: auto; height:auto; display:flex; flex-direction:column; gap:32px;} .container .body .contents.homeContainer .dcBody .detailView .greetBox {width: calc(100%); height: auto; padding: 12px 0; box-sizing: border-box; display: flex; background-color: transparent; justify-content: flex-start; align-items: center; gap: 0 32px;} .container .body .contents.homeContainer .dcBody .detailView .greetBox .greetBoxDiv {display: flex; flex-direction: column; gap: 8px 0; height: auto; max-width: 399px; width: 100%;} .container .body .contents.homeContainer .dcBody .detailView .greetBox .greetBoxDiv .memberName > dl {display: flex; align-items: center; justify-content: flex-start; gap: 4px;} .container .body .contents.homeContainer .dcBody .detailView .greetBox .greetBoxDiv .memberName > dl > dt {font-size: 32px; font-weight: normal; font-weight: 700; line-height: 41.6px; font-family: "Noto Sans KR", sans-serif; word-break: break-word;} .container .body .contents.homeContainer .dcBody .detailView .greetBox .greetBoxDiv .memberName > dl > dd {font-size: 32px; font-weight: normal; font-weight: 400; line-height: 41.6px; font-family: "Noto Sans KR", sans-serif; word-break: break-word;} .container .body .contents.homeContainer .dcBody .detailView .greetBox .greetBoxDiv .memberRole {display: flex; justify-content: flex-start; word-break: break-word;} .container .body .contents.homeContainer .dcBody .detailView .greetBox .greetBoxDiv .memberRole > span {font-size: 16px; font-weight: 400; line-height: 22.4px;} .container .body .contents.homeContainer .dcBody .detailView .greetBox .selectWrap {max-width: 200px; width: 100%;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer {display: flex; flex-direction: column; height: auto; margin-top: 32px; width: 100%; gap: 16px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer .headerBox {display: flex; justify-content: flex-start;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer .headerBox > h4, .container .body .contents.homeContainer .dcBody .detailView .sectionContainer .headerBox > h5, .container .body .contents.homeContainer .dcBody .detailView .sectionContainer .headerBox > h6 {font-size: 24px; font-style: normal; font-weight: 700; line-height: 31.2px; word-break: break-word;} /* sectionContainerOne */ .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne .sectionBody {display: flex; gap: 16px 24px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne .sectionBody .boxOne {display: flex; background: #ffffff; border: 1px solid #DADEE2; padding: 24px; box-sizing: border-box; border-radius: 10px; width: auto; max-width: 100%; height: auto; min-height: 200px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne .sectionBody .boxTwo {display: flex; background: #ffffff; border: 1px solid #DADEE2; padding: 24px; box-sizing: border-box; border-radius: 10px; width: auto; max-width: 100%; height: auto; min-height: 200px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo .sectionBody {display: flex; gap: 16px; flex-wrap: wrap;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo .sectionBody .boxOne {display: flex; background: #ffffff; border: 1px solid #DADEE2; padding: 24px; box-sizing: border-box; border-radius: 10px; width: auto; max-width: 100%; height: auto; min-height: 200px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo .sectionBody .boxTwo {display: flex; background: #ffffff; border: 1px solid #DADEE2; padding: 24px; box-sizing: border-box; border-radius: 10px; width: auto; max-width: 100%; height: auto; min-height: 200px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerThree .sectionBody {display: flex; gap: 16px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerThree .sectionBody .smallBox {display: flex; background: #ffffff; border: 1px solid #DADEE2; padding: 24px; box-sizing: border-box; border-radius: 10px; width: 100%; max-width: 358.3px; height: auto; min-height: 200px;} /* .container .body .contents.homeContainer .dcBody .detailView .sectionContainerThree .sectionBody .smallBox */ /* layout Two */ .container .body .contents.layoutTwoContainer {height: auto; width: 100%; display: flex; flex-direction: column;} .container .body .contents.layoutTwoContainer .dcBody {margin: 0 32px; height: auto;} .container .body .contents.layoutTwoContainer .dcBody .detailView {border: none; overflow: auto; height: 100%; background: #fff;} .container .body .contents.layoutTwoContainer .dcBody .detailView {display: flex; flex-direction: column; justify-content: center; align-items: center; height: calc(100vh - 235px); width: 100%;} /* Approval */ .container .body .contents .dcBody .approvalView{width:100%; height:100%; background:transparent; border-radius:10px;} .container .body .contents .dcBody .viewBox{height:100%; position:relative;} .container .body .contents .dcBody .viewBox.sidein{display:flex; gap:16px;} .container .body .contents .dcBody .viewBox .snb{flex-shrink:0;} .container .body .contents .dcBody .viewBox .snb .sectionList{flex-shrink:0;} .container .body .contents .dcBody .viewBox .snb .sectionBusinessSite{flex-grow:1; display:flex; flex-direction:column; gap:6px; overflow:auto;} .container .body .contents .dcBody .viewBox .snb .sectionBusinessSite > .sectionHeading{display:flex; align-items:end; height:44px; padding:6px; word-break:break-all; font-size:14px; font-weight:700;} .container .body .contents .dcBody .viewBox .snb .formBox{ margin-bottom:6px;} .container .body .contents .dcBody .viewBox .snb .formBox .inputWrap input {border:none; background:#F5F6FA;} .container .body .contents .dcBody .viewBox .snb .buttonBox > button{width:100%;} .container .body .contents .dcBody .viewBox .snb .resultList{flex-grow:1; overflow:auto;} .container .body .contents .dcBody .viewBox .snb .resultList > ul{height:100%; overflow:auto; display:flex; flex-direction:column; gap:6px;} .container .body .contents .dcBody .viewBox .snb .resultList > ul > li > ul[aria-selected="true"]{background:#F5F6FA; border-radius: 8px;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li{display:flex; position:relative;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li a{width:100%; box-sizing:border-box; padding:10px 30px; font-size:16px; font-weight:400; z-index:1; display:inline-block;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li a:hover{background:#fafbfb; text-decoration:underline; border-radius:10px;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li a:active, .container .body .contents .dcBody .viewBox .snb .resultList > ul li a[aria-current="true"]{background:#E8EBF0; color:rgba(51, 51, 51, 1); text-decoration:none; font-weight:700;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li a[aria-selected="true"]{background:#E8EBF0; color:rgba(51, 51, 51, 1);} .container .body .contents .dcBody .viewBox .snb .resultList > ul li .btnMore{right:4px; display:block; top:0; bottom:0; margin:auto 0;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li .btnMore > .relativeBox{position:relative;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li .btnMore > .relativeBox > button{z-index:1;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li .btnMore > .relativeBox > button:hover{background:#DADDE2;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li .btnMore > .relativeBox > button:active{background:#BEC2CB;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li .btnMore > .relativeBox > button.up{background:#BEC2CB;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li .btnMore > .relativeBox > button.up ~ .layerNavi{display:block;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li .btnMore > .relativeBox > .layerNavi{position:absolute; right:0px; background:#fff; display:none;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li .btnMore > .relativeBox > .layerNavi a:hover{background:#fafbfb; text-decoration:underline; border-radius:unset; color:inherit;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li .btnMore > .relativeBox > .layerNavi a:active{border-radius:unset; text-decoration:none !important;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li .btnMore > .relativeBox > .layerNavi a:first-child{border-radius: 10px 10px 0 0 !important;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li .btnMore > .relativeBox > .layerNavi a:last-child{border-radius: 0 0 10px 10px !important;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li.groupWrap{flex-direction:column;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li.groupWrap > .groupHeader{position:relative;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li.groupWrap > .groupHeader > button.text:active{background:#BEC2CB;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li.groupWrap > .groupHeader > button::before {content: ""; width: inherit; height: inherit; display: inline-block; background: url(../img/icon/ic_arrow_down.svg) no-repeat; background-position: center;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li.groupWrap > .groupHeader > button.up::before {background: url(../img/icon/ic_arrow_down.svg) no-repeat;background-position: center;transform: rotate(180deg); height:inherit; width:inherit;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li.groupWrap > .groupHeader > button:hover{background:#DADDE2;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li.groupWrap > .groupHeader > button{position:absolute; width:20px; height:20px; left:4px; min-width:unset; top:11px;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li.groupWrap > .groupHeader > button.add{width:24px; height:24px; right:1px; left:unset; top: 50%; transform: translate(-50%, -50%); border-radius:4px;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li.groupWrap > .groupHeader > button.add::before{width:inherit; height:inherit; content:""; display:inline-block; background:url(../img/icon/ic_add.svg) center no-repeat;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li.groupWrap > .groupHeader > button.addWspace{position:absolute; width:24px; height:24px; background:transparent; border:none; font-size:0px; z-index:10; border-radius:8px; padding:0px; top:8px; right:5px !important; left:unset;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li.groupWrap > .groupHeader > button.addWspace::before{width:inherit; height:inherit; content:""; display:inline-block; background:url(../img/icon/ic_add.svg) no-repeat 3px 3px;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li.groupWrap > .groupHeader > button.addWspace:hover{background:#DADDE2;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li.groupWrap > .groupHeader > button.addWspace:active{background:#BEC2CB;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li.groupWrap > .groupHeader > button.open::before{content:""; width:inherit; height:inherit; display:inline-block; background-position:center; background:url(../img/icon/ic_arrow_down.svg) no-repeat;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li.groupWrap > .groupHeader > button.open.up::before{background-position:center; transform:rotate(180deg);} .container .body .contents .dcBody .viewBox .snb .resultList > ul li.groupWrap > ul > li{display:flex; position:relative;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li.groupWrap > ul > li > button{position:absolute; width:24px; height:24px; background:transparent; border:none; font-size:0px; z-index:10; border-radius:8px; padding:0px; top:8px; right:5px !important; left:unset;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li.groupWrap > ul > li > button::before{width:inherit; height:inherit; content:""; display:inline-block; background:url(../img/icon/ic_add.svg) no-repeat 3px 3px;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li.groupWrap > ul > li > button.up::before{background-position:center; transform:rotate(180deg);} .container .body .contents .dcBody .viewBox .snb .resultList > ul li.groupWrap > ul > li > button:active{background:#BEC2CB;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li.groupWrap > ul > li > button:hover{background:#DADDE2;} .container .body .contents .dcBody .viewBox .snb .resultList > ul li.groupWrap > ul > li > a{width:100%; box-sizing:border-box; padding:10px 30px 10px 50px; font-size:16px; font-weight:400; z-index:1; word-break:break-all;} .container .body .contents .dcBody .viewBox .snb .list{flex-grow:1; width:100%;} .container .body .contents .dcBody .viewBox .snb .list ul{height:100%; overflow:auto; display:flex; flex-direction:column; gap:6px;} .container .body .contents .dcBody .viewBox .snb .list ul li{position:relative;} .container .body .contents .dcBody .viewBox .snb .list ul li .button.addWspace:active{background:#BEC2CB !important;} .container .body .contents .dcBody .viewBox .snb .list ul li .button.addWspace:hover{background:#DADDE2;} .container .body .contents .dcBody .viewBox .snb .list ul li .button.addWspace{position:absolute; width:24px; height:24px; background:transparent; border:none; font-size:0px; z-index:10; border-radius:8px; padding:0px; top:11px; right:5px;} .container .body .contents .dcBody .viewBox .snb .list ul li .button.addWspace::before{width:inherit; height:inherit; content:""; display:inline-block; background:url(../img/icon/ic_add.svg) no-repeat center;} .container .body .contents .dcBody .viewBox .snb .list li a{word-break: normal;} .container .body .contents .dcBody .viewBox .snb .list li a{border-radius:10px; width:100%; display:inline-block; min-height:44px; padding:10px 30px 10px; box-sizing:border-box; display:flex; align-items:center; color:rgba(51, 51, 51, 1); font-size:16px;} .container .body .contents .dcBody .viewBox .snb .list li a:hover{background:#fafbfb; text-decoration:underline; border-radius:10px;} .container .body .contents .dcBody .viewBox .snb .list li a:active, .container .body .contents .dcBody .viewBox .snb .list li a[aria-selected="true"]{background:#E8EBF0; color:#333; font-weight:700;} .container .body .contents .dcBody .viewBox .approvalBoard{flex-grow:1; background:#fff; border-radius:10px; border:1px solid #d0d1d2; box-sizing:border-box; height:100%; overflow:auto;} .container .body .contents .dcBody .viewBox .snb .list li a[aria-current="true"]{background:#E8EBF0; color:rgba(51, 51, 51, 1);} .container .body .contents .dcBody .viewBox .approvalBoard{flex-grow:1; background:#fff; border-radius:10px; border:1px solid #d0d1d2; box-sizing:border-box; height:100%; overflow:auto;} .container .body .contents .dcBody .viewBox .approvalBoard > .hiddenTools{display:none; align-items:center; gap:8px;} .container .body .contents .dcBody .viewBox .approvalBoard > .hiddenTools .breadcrumb ul li{font-weight:500; display:contents; vertical-align:middle; font-size:16px; color:#333; letter-spacing:-0.6px; word-break:break-all;} .container .body .contents .dcBody .viewBox .approvalBoard > .mobileTabs{display:none; padding:0px 0px 32px; width:100%; box-sizing:border-box;} .container .body .contents .dcBody .viewBox .approvalBoard > .tabs{height:48px; padding:20px 20px 0px; display:flex; align-items:center; border-bottom:1px solid rgba(0, 0, 0, 0.1); gap:20px;} .container .body .contents .dcBody .viewBox .approvalBoard > .tabs > a{height:100%; box-sizing:border-box; padding:11px 12px; color:rgba(85, 85, 85, 1); font-size:20px; font-weight:500;} .container .body .contents .dcBody .viewBox .approvalBoard > .tabs > a[aria-selected="true"]{border-bottom:4px solid #333; font-weight:700;} .container .body .contents .dcBody .viewBox .approvalBoard > .tabsView{height:calc(100% - 70px); width:100%; box-sizing:border-box; padding:32px;} .container .body .contents .dcBody .viewBox .approvalBoard > .tabsView > .tableboard{height:calc(100% - 0px); width:100%; box-sizing:border-box; display:flex; flex-direction:column; gap:12px;} .container .body .contents .dcBody .viewBox .approvalBoard > .tabsView > .tableboard > div{width:100%;} .container .body .contents .dcBody .viewBox .approvalBoard > .tabsView > .tableboard > .tbHeader{display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-shrink:0;} .container .body .contents .dcBody .viewBox .approvalBoard > .tabsView > .tableboard > .tbHeader > .totalBox{display:block; font-size:14px; color:#333; font-weight:400; margin-right:8px;} .container .body .contents .dcBody .viewBox .approvalBoard > .tabsView > .tableboard > .tbHeader > .totalBox > em{font-style: normal; font-weight:700; display:inline-block; margin-left:3px;} .container .body .contents .dcBody .viewBox .approvalBoard > .tabsView > .tableboard > .tbBody{flex-grow:1; overflow:auto;} .container .body .contents .dcBody .viewBox .approvalBoard > .tabsView > .tableboard > .tbBody > .tableWrap{height:100%; overflow:auto;} .modalBox .mbBody .mbBodyContents .isRequired{font-weight:500; } .modalBox .mbBody .mbBodyContents .infoBox.aprroveInfoBox{display:flex; flex-direction:column; gap:24px;} .modalBox .mbBody .mbBodyContents .infoBox.aprroveInfoBox .infoHeader h3{font-size:16px; font-weight:400;} .modalBox .mbBody .mbBodyContents .infoBox.aprroveInfoBox .infoBody{width:100%;} .modalBox .mbBody .mbBodyContents .infoBox.aprroveInfoBox .infoBody .basicInfoBox{width:100%; box-sizing:border-box; padding:20px; display:flex; flex-direction:column; gap:16px; color:#333; border-radius:8px; background:#F5F6FA;} .modalBox .mbBody .mbBodyContents .infoBox.aprroveInfoBox .infoBody .basicInfoBox .title{font-size:12px; font-weight:700; word-break:break-all; padding-bottom:6px; border-bottom:1px solid rgba(0, 0, 0, 0.1);} .modalBox .mbBody .mbBodyContents .infoBox.aprroveInfoBox .infoBody .basicInfoBox .isRequired{font-size:12px; font-weight:700;} .modalBox .mbBody .mbBodyContents .infoBox.aprroveInfoBox .infoBody .basicInfoBox .dlBox{display:flex; flex-direction:column; gap:16px; width:100%; word-break:break-all;} .modalBox .mbBody .mbBodyContents .infoBox.aprroveInfoBox .infoBody .basicInfoBox .dlBox dl{display:flex;} .modalBox .mbBody .mbBodyContents .infoBox.aprroveInfoBox .infoBody .basicInfoBox .dlBox dl dt{width:162px; text-align:left; font-weight:500; font-size:16px;} .modalBox .mbBody .mbBodyContents .infoBox.aprroveInfoBox .infoBody .basicInfoBox .dlBox dl dd{width:calc(100% - 162px); text-align:left; font-weight:400; font-size:16px; box-sizing:border-box; padding-left:24px;} .modalBox .mbBody .mbBodyContents .infoBox.aprroveInfoBox .infoBody > .dlBox{display:flex; flex-direction:column; gap:24px;} .modalBox .mbBody .mbBodyContents .infoBox.aprroveInfoBox .infoBody > .dlBox > dl{display:flex; flex-direction:column; gap:12px;} /* Issue */ .modalBox.IssueApproval .mbBody .mbBodyContents .infoBox.aprroveInfoBox .infoBody .dlBox .issueText {font-size: 16px; font-weight: 400; color: #333;} .modalBox.IssueApproval .mbBody .mbBodyContents .infoBox.aprroveInfoBox .infoBody .dlBox dl dt {font-size: 16px; font-weight: 500; color: #333;} .modalBox.IssueApproval .mbBody .mbBodyContents .infoBox.aprroveInfoBox .infoBody .dlBox dl dd {font-size: 14px; font-weight: 400; color: #333;} /* Issue */ .modalBox.informApproval .mbBody .mbBodyContents .infoBox.aprroveInfoBox .infoBody .dlBox .issueText {font-size: 16px; font-weight: 400; color: #333;} .modalBox.informApproval .mbBody .mbBodyContents .infoBox.aprroveInfoBox .infoBody .dlBox dl dt {font-size: 16px; font-weight: 500; color: #333;} .modalBox.informApproval .mbBody .mbBodyContents .infoBox.aprroveInfoBox .infoBody .dlBox dl dd {font-size: 14px; font-weight: 400; color: #333;} /* workspace */ .container .body .contents .dcBody .contentView{width:100%; height:100%; background:transparent; border-radius:10px;} .container .body .contents .dcBody .viewBox .contentBoard{flex-grow:1; background:#fff; border-radius:10px; border:1px solid #d0d1d2; box-sizing:border-box; height:100%; overflow:auto; padding:32px; box-sizing:border-box; display:flex; flex-direction:column; gap:24px;} .container .body .contents .dcBody .viewBox .contentBoard .boardTitle > .title{display:flex; align-items:center; flex-direction:row;} .container .body .contents .dcBody .viewBox .contentBoard .boardTitle > .title > h4{font-size:20px; font-weight:700; word-break:break-all; margin:0px 10px 0 0;} .container .body .contents .dcBody .viewBox .contentBoard .boardTitle > .title > ul > li{font-size:18px; font-weight:500; word-break:break-all; color:#757575;} .container .body .contents .dcBody .viewBox .contentBoard .boardTitle > .breadcrumb ul {padding:0 10px; border-left:1px solid #c2c2c2;} .container .body .contents .dcBody .viewBox .contentBoard.wsBoard .hiddenTools{display:none; align-items:center; gap:8px;} .container .body .contents .dcBody .viewBox .contentBoard.wsBoard .hiddenTools .breadcrumb ul li {font-weight:500; display:contents; vertical-align:middle; font-size:16px; color:#333; letter-spacing:-0.6px; word-break:break-all;} .container .body .contents .dcBody .viewBox .contentBoard.wsBoard .tableBoard{flex-grow:1; overflow:auto; height:unset;} .container .body .contents .dcBody .viewBox .contentBoard.wsBoard .tbHeader > div{gap:16px;} .container .body .contents .dcBody .viewBox .contentBoard .tableBoard{display:flex; flex-direction:column; gap:12px; height:calc(100% - 44px);} .container .body .contents .dcBody .viewBox .contentBoard .tableBoard .tbHeader{display:flex; flex-direction:column; gap:16px; flex-shrink:0;} .container .body .contents .dcBody .viewBox .contentBoard .tableBoard .tbHeader h5{font-size:16px; font-weight:500; word-break:break-all;} .container .body .contents .dcBody .viewBox .contentBoard .tableBoard .tbHeader > div{flex-wrap:wrap;} .container .body .contents .dcBody .viewBox .contentBoard .tableBoard .tbHeader > div .toolBox{flex-wrap:wrap;} .container .body .contents .dcBody .viewBox .contentBoard .tableBoard .tbHeader > div .toolBox{display:flex; gap:12px; align-items:center; margin:0px;} .container .body .contents .dcBody .viewBox .contentBoard .tableBoard .tbHeader > div .toolBox > a{align-items:center; font-weight:500; font-size:14px; white-space:inherit;} .container .body .contents .dcBody .viewBox .contentBoard .tableBoard .tbHeader > div .toolBox:nth-child(1) > .divider{height:36px; width:1px; background:rgba(0, 0, 0, 0.1);} .container .body .contents .dcBody .viewBox .contentBoard .tableBoard .tbHeader > div .toolBox:nth-child(2) > .totalBox{display:flex; align-items:center; gap:8px; flex-wrap:wrap; word-break:break-all;} .container .body .contents .dcBody .viewBox .contentBoard .tableBoard .tbHeader > div .toolBox:nth-child(2) > .totalBox em{font-style: normal; font-weight: 700; display: inline-block; padding-left: 8px; border-left:1px solid rgba(0 ,0, 0, 0.1);} .container .body .contents .dcBody .viewBox .contentBoard.lmBoard .tableBoard .tbHeader > div .toolBox:nth-child(2) > .totalBox{gap:1px;} .container .body .contents .dcBody .viewBox .contentBoard.lmBoard .tableBoard .tbHeader > div .toolBox:nth-child(2) > .totalBox em{border-left:none;} .container .body .contents .dcBody .viewBox .contentBoard.lmBoard .boardTitle > .title{flex-direction:column; gap:8px; align-items:flex-start;} .container .body .contents .dcBody .viewBox .contentBoard.lmBoard .boardTitle > .title h4{margin:0px;} .container .body .contents .dcBody .viewBox .contentBoard.lmBoard .boardTitle > .title > ul{border:none; padding:0px; display:flex; gap:4px; flex-wrap:wrap;} .container .body .contents .dcBody .viewBox .contentBoard.lmBoard .boardTitle > .title > ul > li{font-weight:400; font-size:14px;} .container .body .contents .dcBody .viewBox .contentBoard.lmBoard .boardTitle > .title > ul > li:nth-child(2){font-weight:700; color:#333333;} .container .body .contents .dcBody .viewBox .contentBoard.lmBoard .boardTitle > .title > ul > li:nth-child(2)::before{content:">"; display:inline-flex; align-items:center; padding:0 4px;} .container .body .contents .dcBody .viewBox .contentBoard .tableBoard .tbBody{flex-grow:1; height:unset;} .container .body .contents .dcBody .viewBox .contentBoard .tableBoard .tbBody > .checkSelectWrap{top:-50px;} .workSpaceTable table thead tr th, .workSpaceTable table tbody tr td{text-align:left; padding:0 12px;} .workSpaceTable table tbody tr td:nth-child(5) .iconsBox{display:flex; align-items:center; gap:8px; justify-content:center;} .workSpaceTable table tbody tr td:nth-child(5) .iconsBox > .icons{height:36px; width:36px;} .workSpaceTable table tbody tr td:nth-child(5) .iconsBox > .button{padding:5px; align-items:center;} .workSpaceTable table thead tr th:nth-child(1), .workSpaceTable table tbody tr td:nth-child(1), .workSpaceTable table thead tr th:nth-child(5), .workSpaceTable table tbody tr td:nth-child(5), .workSpaceTable table thead tr th:nth-child(8), .workSpaceTable table tbody tr td:nth-child(8), .workSpaceTable table thead tr th:nth-child(9), .workSpaceTable table tbody tr td:nth-child(9){text-align:center;} .modalBox .mbBody .mbBodyContents .workSpaceInfoBox .infoBody{display:flex; flex-direction:column; gap:24px;} .modalBox .mbBody .mbBodyContents .workSpaceInfoBox .infoBody > .descriptionBox{display:flex; flex-direction:column; gap:12px;} .modalBox .mbBody .mbBodyContents .workSpaceInfoBox .infoBody > .descriptionBox > p{word-break:break-all; font-size:16px; font-weight:400; color:#333333;} .modalBox .mbBody .mbBodyContents .workSpaceInfoBox .infoBody > .dlBox{display:flex; flex-direction:column; gap:24px;} .modalBox .mbBody .mbBodyContents .workSpaceInfoBox .infoBody > .dlBox dl{display:flex; flex-direction:column; gap:8px; word-break:break-all;} .modalBox .mbBody .mbBodyContents .workSpaceInfoBox .infoBody > .dlBox dl dt{font-size:16px; font-weight:500;} .modalBox .mbBody .mbBodyContents .workSpaceInfoBox .infoBody > .dlBox dl dd{font-size:14px; font-weight:400;} /* points */ .container .body .contents .dcBody .viewBox .pointsBoard{flex-grow:1; background:#fff; border-radius:10px; border:1px solid #d0d1d2; box-sizing:border-box; height:100%; overflow:auto; padding:32px; box-sizing:border-box; display:flex; flex-direction:column; gap:24px;} .container .body .contents .dcBody .viewBox .pointsBoard .tableBox {display:flex; flex-direction:column; gap:12px; height:calc(100% - 44px); flex-grow:1;} .container .body .contents .dcBody .viewBox .pointsBoard .tableBox .tableBoard {max-height:50%;} .container .body .contents .dcBody .viewBox .pointsBoard .tableBox .tableBoard:nth-child(1) {margin-bottom:32px; max-height:calc(50% - 32px);} .container .body .contents .dcBody .viewBox .contentBoard.pointsBoard .tableBoard .tbHeader > div .toolBox:nth-child(2) > .totalBox em{border-left:none;} .container .body .contents .dcBody .viewBox .pointsBoard > .hiddenTools{display:none; align-items:center; gap:8px;} .container .body .contents .dcBody .viewBox .pointsBoard > .hiddenTools .breadcrumb ul li{font-weight:500; display:contents; vertical-align:middle; font-size:16px; color:#333; letter-spacing:-0.6px; word-break:break-all;} /* table - 1 */ .pointsOneTable table thead tr th, .pointsOneTable table tbody tr td{text-align:left;} .pointsOneTable table thead tr th:nth-child(5), .pointsOneTable table tbody tr td:nth-child(5){width:118px; text-align:center;} /* table - 2 */ .pointsTwoTable table thead tr th, .pointsTwoTable table tbody tr td{text-align:left;} .pointsTwoTable table thead tr th:nth-child(5), .pointsTwoTable table tbody tr td:nth-child(5){width:183px;} /* points modal */ .pointsTable{max-height:400px; overflow:auto;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody{display:flex; flex-direction:column; gap:24px;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .descriptionBox{display:flex; flex-direction:column; gap:12px;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .descriptionBox > p{word-break:break-all; font-size:16px; font-weight:400; color:#333333;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .dlBox{display:flex; flex-direction:column; gap:24px;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .dlBox dl{display:flex; flex-direction:column; gap:8px; word-break:break-all;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .dlBox dl dt{font-size:16px; font-weight:500;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .dlBox dl dd{font-size:14px; font-weight:400;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .selectWrap > .dropdownLabel {word-break:break-all; margin-bottom:12px; font-size:16px; font-weight:500; color:#333; display:block;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .inputBox > label{margin-bottom:12px; font-size:16px; font-weight:500; color:#333; display:block; word-break:break-all;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .inputBox{position:relative;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .inputBox > span{font-size:14px; color:#333; font-weight:400; position:absolute; top:43px; right:20px;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .inputBox > input[type=text]{padding:0 75px 0 10px;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .tableBox .totalBox{display:flex; align-items:center; gap:8px; flex-wrap:wrap; word-break:break-all; margin-bottom:12px;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .tableBox .totalBox > em{font-style: normal; font-weight:700; display:inline-block; padding-left:5px;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .historyBox {min-height: 181px; border-radius: 10px; background-color: #f8f8f9; padding: 20px 36px;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .historyBox .head {padding-bottom: 18px; box-sizing: border-box; margin-bottom: 0;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .historyBox .head h5 {font-size:16px; word-break: break-word; font-weight:500; color: #555;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .historyBox .body {min-height: 40px; height: auto; display: flex; flex-direction: row; flex-wrap: wrap; gap: 19.5px 24px; align-items: center;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .historyBox .body .opt.custom {display:flex; gap:8px;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .historyBox .body .opt.custom dl dt {font-size: 12px; font-weight: normal; color: #555;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .historyBox .body .tilt {padding: 10px; box-sizing: border-box;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .historyBox .footer {padding: 20px 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .historyBox .footer .button {padding: 0 48px; box-sizing: border-box; width:240px;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .tableContainer{flex-grow:1; height:404px; overflow:auto; border:1px solid #f8f8f9; border-radius:6px; display:flex; flex-direction:column;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .tableContainer > .head{padding:20px; box-sizing:border-box; border-bottom: 1px solid #f8f8f9;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .tableContainer > .head h4{font-weight:500; font-size:16px; } .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .tableContainer > .body{flex-grow:1; overflow:auto; padding:20px; box-sizing: border-box;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .tableContainer > .body > .totalBox{display:flex; align-items:center; justify-content:flex-end; font-size:14px; padding-bottom:12px;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .tableContainer > .body > .totalBox em{font-weight:700; padding-left:8px;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .tableContainer > .body table tbody tr td:nth-child(3) > .points{display:inline-flex; align-items:center; justify-content:flex-end; font-weight:700; width:100%;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .tableContainer > .body table tbody tr td:nth-child(3) > .points.highlight{color:#1D76FB;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .tableContainer > .body table tbody tr td:nth-child(4), .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .tableContainer > .body table tbody tr td:nth-child(5){text-align:right;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .tableContainer > .body > .footer{display:flex; align-items:center; justify-content:center; padding:20px 0px;} .modalBox .mbBody .mbBodyContents .pointsInfoBox .infoBody > .tableContainer > .body > .footer > button{width:240px;} .viewAllTable{overflow:auto; max-height:682px;} .viewAllTable table thead tr th:nth-child(5), .viewAllTable table tbody tr td:nth-child(5){width:120px;} .viewAllTable table tbody tr td:nth-child(3), .viewAllTable table tbody tr td:nth-child(4){text-align:right;} /* license management */ .container .body .contents .dcBody .viewBox .lmBoard{gap:16px; padding:0px;} .container .body .contents .dcBody .viewBox .lmBoard > .hiddenTools{display:none; align-items:center; gap:8px;} .container .body .contents .dcBody .viewBox .lmBoard > .hiddenTools .breadcrumb ul li{font-weight:500; display:contents; vertical-align:middle; font-size:16px; color:#333; letter-spacing:-0.6px; word-break:break-all;} .container .body .contents .dcBody .viewBox .lmBoard .boardTitle{flex-shrink:0; padding:32px 32px 0px; align-items:center;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard{flex-grow:1; overflow:auto; display:flex; flex-direction:column;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .mobileTabs{display:none; padding:0px 0px 32px; width:100%; box-sizing:border-box;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .tabs{height:48px; display:flex; align-items:center; border-bottom:1px solid rgba(0, 0, 0, 0.1); gap:20px; padding:0 20px; overflow:auto;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .tabs > a{height:100%; box-sizing:border-box; padding:11px 12px; color:rgba(85, 85, 85, 1); font-size:20px; font-weight:500;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .tabs > a[aria-selected="true"]{border-bottom:4px solid #333; font-weight:700;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .tabsView{flex-grow:1; height:calc(100% - 49px); width:100%; box-sizing:border-box; padding:32px; display:flex; flex-direction:column; gap:40px; overflow:auto;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .tabsView > .lmInfoBox{border-radius:8px; display:flex; align-items:center; justify-content:space-between; background:#F5F6FA; height:188px; padding:24px 80px 24px 24px;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .tabsView > .lmInfoBox > .statusWrap {display:flex; justify-content:center; flex-flow: row wrap; width: 700px; text-align:center;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .tabsView > .lmInfoBox > .statusWrap dl {width:232px; border-left:1px solid #e3e3e3; display:flex; flex-direction:column; gap:15px;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .tabsView > .lmInfoBox > .statusWrap dl:first-child {border-left:0;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .tabsView > .lmInfoBox > .statusWrap dl:nth-child(2) {color:#03359B;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .tabsView > .lmInfoBox > .statusWrap dl:nth-child(3) {color:#9DA3B2;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .tabsView > .lmInfoBox > .statusWrap dl dt {display:block; font-size:18px; font-weight:700; word-break: break-word; margin-bottom:10px;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .tabsView > .lmInfoBox > .statusWrap dl dd {word-break:break-all; display:block; font-size:18px; font-weight:500; line-height:56px;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .tabsView > .lmInfoBox > .statusWrap dl dd strong {font-size:56px; margin:0 6px;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .tabsView > .lmInfoBox > .chartWrap {display:flex; align-items:center; box-sizing:border-box; height:100%; gap:20px;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .tabsView > .lmInfoBox > .chartWrap > .chartInfoBox{display:flex; flex-wrap:wrap; font-size:24px; font-weight:500; color: #03359B; gap:8px; justify-content:center;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .tabsView > .lmInfoBox > .chartWrap > .chartInfoBox > strong{font-size:36px; font-weight:700; margin:0 6px;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .tabsView > .lmInfoBox > .chartWrap > .chart{width:172px; height:172px; position:relative;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .tabsView > .tableBoard{flex-grow:1; overflow:auto;} /* license Management board new 01 */ .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .boardTitle {padding: 12px 24px;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard {padding: 0px;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .tabsView {padding: 12px 24px; box-sizing: border-box; position: relative;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud {display: flex; flex-direction: column;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .top {display: flex; align-items: center;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .top span {font-size: 18px; font-weight: 700; color: #333; word-break: break-word;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .top .toolBox {display: flex; flex-direction: column; gap:12px;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .top .toolBox > .selectWrap {display: none;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom {display: flex; flex-wrap: wrap; align-items: center; gap: 20px; flex-direction: column;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox {display: flex; height: auto; width: 100%; flex-wrap: wrap; gap: 20px;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard {display: flex; padding: 16px 28px; box-sizing: border-box; flex-direction: column; gap: 8px;border-radius: 8px; border: 1px solid #DADDE2; width: 320px; justify-content: center; align-items: center; cursor: pointer;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.proCentricCard {background: linear-gradient(180deg, #FFF 0%, #F5FEFE 100%);} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.proCentricCard .topCard span {color: #148486;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.proCentricCard:active {border: 2px solid #148486;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.proCentricCard:active .topCard span {padding-left: 22px;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.proCentricCard:active .topCard span::before {content: ""; height: 10px; width: 10px; position: absolute; left: 0; background-color: #148486; border-radius: 50%;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.proCentricCard.selected {border: 2px solid #148486;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.proCentricCard.selected .topCard span {padding-left: 22px;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.proCentricCard.selected .topCard span::before {content: ""; height: 10px; width: 10px; position: absolute; left: 0; background-color: #148486; border-radius: 50%;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.supersignCard {background: linear-gradient(180deg, #FFF 0%, #F7F6FF 100%);} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.supersignCard .topCard span {color: #523DA9;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.supersignCard:active {border: 2px solid #523DA9;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.supersignCard:active .topCard span {padding-left: 22px;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.supersignCard:active .topCard span::before {content: ""; height: 10px; width: 10px; position: absolute; left: 0; background-color: #523DA9; border-radius: 50%;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.supersignCard.selected {border: 2px solid #523DA9;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.supersignCard.selected .topCard span {padding-left: 22px;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.supersignCard.selected .topCard span::before {content: ""; height: 10px; width: 10px; position: absolute; left: 0; background-color: #523DA9; border-radius: 50%;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.connectedCareCard {background: linear-gradient(180deg, #FFF 0%, #F4F9FF 100%);} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.connectedCareCard .topCard span {color: #3861A8;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.connectedCareCard:active {border: 2px solid #3861A8;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.connectedCareCard:active .topCard span {padding-left: 20px;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.connectedCareCard:active .topCard span::before {content: ""; height: 10px; width: 10px; position: absolute; left: 0; background-color: #3861A8; border-radius: 50%;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.connectedCareCard.selected {border: 2px solid #3861A8;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.connectedCareCard.selected .topCard span {padding-left: 20px;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard.connectedCareCard.selected .topCard span::before {content: ""; height: 10px; width: 10px; position: absolute; left: 0; background-color: #3861A8; border-radius: 50%;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard .topCard {height: auto; width: 100%; display: flex; align-items: center; width: 100%; justify-content: flex-start;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard .topCard span {font-size: 22px; line-height: 31.2px; font-weight: 700; font-family: "LG EI"; position: relative; display: flex; align-items: center;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard .bottomCard {display: flex; width: 100%; gap: 6px; flex-direction: column;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard .bottomCard dl {display: flex; align-items: center; width: 100%; flex-direction: row; justify-content: space-between;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard .bottomCard dl dt {display: flex; font-size: 18px; font-weight: 400; color: #333; width: auto;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardBox .serviceCard .bottomCard dl dd {display: flex; font-size: 20px; color: #333; font-weight: 700; width: auto; height: auto;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails {display: flex; width: 100%; flex-direction: column; gap: 32px; position: relative;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox {display: flex; background-color: #f5f6fa; border-radius: 8px; gap: 16px; align-items: center; width: 100%; padding: 20px; box-sizing: border-box; margin-top: 44px;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox::before {content: ""; position: absolute; width: calc(100% + 48px); height: 2px; background: var(--Divider-component-color-divider-01, rgba(0, 0, 0, 0.10)); top: 15px; left: 0; left: -26px;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.proCentricSelect::after {content: ""; position: absolute; height: 24px; width: 68px; background: url("../img/page/arrow_component.svg") no-repeat; top: -6px; left: 128px;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.supersignSelect::after {content: ""; position: absolute; height: 24px; width: 68px; background: url("../img/page/arrow_component.svg") no-repeat; top: -6px; left: 525px;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.connectedcareSelect::after {content: ""; position: absolute; height: 24px; width: 68px; background: url("../img/page/arrow_component.svg") no-repeat; top: -6px; left: 900px;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .assignableDevices > span {font-size: 18px; font-weight: 700; color: #333;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .assignableDevices > button {display: flex; background-color: #fff; height: 24px; width: 24px;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .assignedDevice {display: flex; flex-direction: column; justify-content: space-between; border: 1px solid #BEC2CB; border-radius: 8px; width: 100%; overflow: hidden;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .assignedDevice .assignedLicenseBox {display: flex; background: #E7EAF2; padding: 20px; justify-content: space-between; align-items: center; border-radius: 8px 8px 0 0; width: 100%; box-sizing: border-box} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .assignedDevice .assignedLicenseBox span {display: flex; font-weight: 700; font-size: 18px; color: #354056;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .assignedDevice > .tableBoard {display: flex; padding: 20px; box-sizing: border-box;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .assignedDevice > .tableBoard .tableWrap {display: flex; max-height: 355px; overflow: scroll;} .sectionGreyBox {display: flex; width: 100%; flex-direction: column; border: 1px solid #BEC2CB; border-radius: 8px; overflow: hidden;} .sectionGreyBox .greyHead {display: flex; padding: 20px; box-sizing: border-box; border-radius: 8px 8px 0 0; width: 100%; background-color: #e7eaf2; height: auto; align-items: center;} .sectionGreyBox .greyHead {display: flex; padding: 20px; box-sizing: border-box; border-radius: 0 0 8px 8px; width: 100%; height: auto;} .sectionGreyBox .greyHead .greyTitle {display: flex; width: auto;} .sectionGreyBox .greyHead .greyTitle span {font-size: 18px; font-weight: 700; color: #354056; word-break: break-word;} .sectionGreyBox .greyHead .greyTools {display: flex; width: auto; gap: 8px;} .sectionGreyBox .greyBody {display: flex; padding: 20px; box-sizing: border-box;} .sectionGreyBox .greyBody .tableBoard {width: 100%;} .sectionGreyBox .greyBody .tableBoard .tableTag {display: flex; height: auto; width: max-content; padding: 4px 6px; min-width: 103px; border-radius: 4px; background-color: #ebebf0; justify-content: center;} .sectionGreyBox .greyBody .tableBoard .tableWrap {display: flex; overflow: scroll; max-height: 300px;} /* Assigned Licensed (ConnectedCare) (1) */ .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.connectedcareSelect {display: flex; flex-direction: column; gap: 16px; border-radius: 8px; background-color: #f5f6fa; padding: 20px; box-sizing: border-box; width: 100%; height: auto;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.connectedcareSelect > .topBox {display: flex; align-items: center; width: 100%; height: auto; justify-content: space-between; gap: 24px;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.connectedcareSelect > .topBox .rightContent {display: flex; gap: 16px; align-items: center; width: auto; height: auto;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.connectedcareSelect > .topBox .rightContent > button:first-child {width: 320px;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.connectedcareSelect > .topBox .leftContent {display: flex; gap: 16px; align-items: center; width: auto; height: auto;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.connectedcareSelect > .topBox .leftContent > button {background-color: #fff;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.connectedcareSelect > .topBox .leftContent span {position: relative; padding-left: 32px; box-sizing: border-box; font-size: 18px; font-weight: 500; word-break: break-word; color: #333; font-family: 'Noto Sans';} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.connectedcareSelect > .topBox .leftContent span::before {content: ""; position: absolute; height: 24px; width: 24px; background: url("../img/icon/ic_card.svg") no-repeat; align-items: center; display: flex; left: 0;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.connectedcareSelect > .topBox .rightContent > .btnFilter {width: 100%;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.connectedcareSelect > .bottomBox {display: flex; flex-wrap: wrap; height: auto; align-items: flex-start; gap: 16px; width: 100%;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.connectedcareSelect > .bottomBox .NoLicense {display: flex; width: 100%; justify-content: center; align-items: center; font-weight: 400; font-size: 18px; color: #555;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.connectedcareSelect > .bottomBox .purchaseCard {display: flex; flex-direction: column; padding: 20px; height: auto; width: auto; box-sizing: border-box; width: 342px; height: auto; border: 1px solid #dadde2; border-radius: 10px; background-color: #fff; gap: 20px; cursor: pointer;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.connectedcareSelect > .bottomBox .purchaseCard[aria-selected="true"] {border: 2px solid #354056;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.connectedcareSelect > .bottomBox .purchaseCard > .topBox {display: flex; justify-content: space-between;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.connectedcareSelect > .bottomBox .purchaseCard > .topBox .tags {display: flex; gap: 8px; width: auto;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.connectedcareSelect > .bottomBox .purchaseCard > .topBox .tags > em {padding: 3.5px 6px; border-radius: 4px; box-sizing: border-box; background-color: #dadde2; box-sizing: border-box;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.connectedcareSelect > .bottomBox .purchaseCard > .bottomBox {display: flex; flex-direction: column; gap: 12px; box-sizing: border-box;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.connectedcareSelect > .bottomBox .purchaseCard > .bottomBox dl {display: flex; gap: 24px; align-items: center; width: 100%; flex-wrap: wrap;} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.connectedcareSelect > .bottomBox .purchaseCard > .bottomBox dl dt {display: flex; font-size: 16px; font-weight: 400; color: #555; word-break: break-word; min-width: calc(50% - 12px);} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.connectedcareSelect > .bottomBox .purchaseCard > .bottomBox dl dd {display: flex; font-size: 16px; font-weight: 500; color: #333; word-break: break-word; min-width: calc(50% - 12px);} .container .body.licenseBody .contents .dcBody .viewBox .lmBoard .tabBoard .licensedCloud > .bottom .bottomCardDetails .cardContentBox.connectedcareSelect > .bottomBox .purchaseCard > .bottomBox > span{display: flex; font-size: 12px; font-weight: 700; color: #d92d20;} /* no tabs license board */ .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .licenseBoard{height:calc(100% - 0px); width:100%; box-sizing:border-box; padding:32px; display:flex; flex-direction:column; gap:40px; overflow:auto;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .licenseBoard > .lmInfoBox{border-radius:8px; display:flex; align-items:center; justify-content:space-between; background:#F5F6FA; height:188px; padding:24px 80px 24px 24px;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .licenseBoard > .lmInfoBox > .statusWrap {display:flex; justify-content:center; flex-flow: row wrap; width: 700px; text-align:center;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .licenseBoard > .lmInfoBox > .statusWrap dl {width:232px; border-left:1px solid #e3e3e3; display:flex; flex-direction:column; gap:15px;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .licenseBoard > .lmInfoBox > .statusWrap dl:first-child {border-left:0;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .licenseBoard > .lmInfoBox > .statusWrap dl:nth-child(2) {color:#4780a4;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .licenseBoard > .lmInfoBox > .statusWrap dl:nth-child(3) {color:#9DA3B2;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .licenseBoard > .lmInfoBox > .statusWrap dl dt {display:block; font-size:18px; font-weight:700; word-break: break-word; margin-bottom:10px;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .licenseBoard > .lmInfoBox > .statusWrap dl dd {display:block; font-size:18px; font-weight:500; line-height:56px;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .licenseBoard > .lmInfoBox > .statusWrap dl dd strong {font-size:56px; margin:0 6px;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .licenseBoard > .lmInfoBox > .chartWrap {display:flex; align-items:center; box-sizing:border-box; height:100%; gap:20px;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .licenseBoard > .lmInfoBox > .chartWrap > .chartInfoBox{display:flex; flex-wrap:wrap; font-size:24px; font-weight:500; color: #03359B; gap:8px;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .licenseBoard > .lmInfoBox > .chartWrap > .chartInfoBox > strong{font-size:36px; font-weight:700; margin:0 6px;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .licenseBoard > .lmInfoBox > .chartWrap > .chart{width:172px; height:172px; position:relative;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .licenseBoard > .tableBoard{flex-grow:1; overflow:auto;} /* license table */ .licenseListTable > table > thead > tr > th, .licenseListTable > table > tbody > tr > td{text-align:left;} .licenseListTable > table > thead > tr > th:nth-child(10), .licenseListTable > table > tbody > tr > td:nth-child(10), .licenseListTable > table > thead > tr > th:nth-child(11), .licenseListTable > table > tbody > tr > td:nth-child(11){text-align:center; width:60px;} .container .body .contents .dcBody .viewBox .lmBoard .tabBoard > .tabsView > .tableBoard .open::after{content:""; display:inline-block; background:url(../img/icon/ic_open.svg) no-repeat; height:18px; width:18px; background-position:center; flex-shrink:0;} /* ccTable */ .ccTable > table > thead > tr > th, .ccTable > table > tbody > tr > td{text-align:left;} .ccTable > table > thead > tr > th:nth-child(6), .ccTable > table > tbody > tr > td:nth-child(6){text-align:center; width:54px;} /* license modal */ .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody .dlBox{display:flex; flex-direction:column; gap:24px; margin-bottom:16px;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody .dlBox dl{display:flex; flex-direction:column; gap:8px; word-break:break-all;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody .dlBox dl dt{font-size:16px; font-weight:500;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody .dlBox dl dd{font-size:14px; font-weight:400;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody .dlBox dl dd > .dateBox{width:210px;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody .dlBox dl dd.duration .inputBox {display: flex; align-items: center;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody .dlBox dl dd.duration .inputBox .month {display: flex; position: absolute; right: 10px;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody .dlBox dl dd.duration .inputBox input {padding-right: 60px;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody > .inputBox > label{margin-bottom:12px; font-size:16px; font-weight:500; color:#333; display:block; word-break:break-all;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody > .inputBox > span{font-size:12px; font-weight:400; word-break:break-all; display:inline-block; margin-bottom:4px;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody > .inputBox > span > em{font-style:normal;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody > .inputBox{position:relative;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody .selectWrap{margin-bottom:12px;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody .selectWrap > .dropdownLabel{margin-bottom:12px; font-size:16px; font-weight:500; color:#333; display:block;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody .highlightBox{padding:20px; background:#F5F6FA; border-radius:8PX;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody .highlightBox .dlBox{gap:16px; margin-bottom:0px;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody .row{display:flex; gap:12px;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody .row > .column{flex-grow: 1; flex-shrink:0;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody .row > .dlBox{margin-bottom:0px; width:210px;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody .row > .dlBox dl{gap:12px;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody .row > .column > .dateBox{flex-direction:column; align-items:flex-start; width:210px;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody .row > .column > .dateBox > label{margin-bottom:12px; font-size:16px; font-weight:500; color:#333; display:block;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody .row > .column > .dateBox .ui-datepicker-trigger{top:40px;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody .timeBox-row > .column > .dateBox label{margin-bottom:4px; font-size:12px; font-weight:400; color:#333; display:block; word-break:break-all;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody .timeBox-row > .column > .dateBox .ui-datepicker-trigger{top:30px;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody .row > .rowLabel{margin-bottom:12px; font-size:16px; font-weight:500; color:#333; display:block; word-break:break-all;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody {display:flex; flex-direction:column; gap:12px;} /* memberlist table */ .memberListTable table thead tr th, .memberListTable table tbody tr td{text-align:left;} .memberListTable table thead tr th:nth-child(4), .memberListTable table tbody tr td:nth-child(4), .memberListTable table thead tr th:nth-child(5), .memberListTable table tbody tr td:nth-child(5){width:50px; text-align:center;} .memberListTable table thead tr th:nth-child(3), .memberListTable table tbody tr td:nth-child(3){width:285px;} .memberListTable table tbody tr td:nth-child(3) > button{margin-left:10px;} /* member modal */ /* steps */ .modalBox .mbBody.stepModal {padding:0px;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox{} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepHeader{height:50px; box-sizing:border-box; background:#F5F6FA; width:100%; padding:16px; display:flex; word-break:break-all; align-items:center; justify-content:space-between;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepHeader > .titleBox{font-weight:400; font-size:16px;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepHeader > .titleBox >strong {font-weight:700; display:inline-block;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepHeader > .stepContainer {display:flex; align-items:center; gap:8px;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepHeader > .stepContainer > .step > em{display:flex; justify-content:center; align-items:center; width:28px; height:28px; font-size:16px; font-weight:700; color:#354056; text-align: center; border-radius:50%; font-style:normal;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepHeader > .stepContainer > .step.active > em{color:#fff; background:#354056; position: relative;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody {display:flex; flex-direction:column; gap:24px;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody {padding:24px; max-height:600px; overflow:auto;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody .inputBox {position:relative;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody .inputBox > label {margin-bottom:12px; font-size:16px; font-weight:500; color:#333; display:block; word-break:break-all;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody .dlBox{display:flex; flex-direction:column; gap:24px;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody .dlBox dl{display:flex; flex-direction:column; gap:8px; word-break:break-all; font-size:16px; font-weight:500;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody .dlBox dl dt{} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody .dlBox dl dd{font-weight:700;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody .assignmentBlock{display:flex; flex-direction:column; gap:12px;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody .assignmentBlock .blockHeader{font-size:16px; font-weight:500; word-break:break-all;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody .optBox{margin-bottom:12px; padding:20px; border-radius:8px; background:#F5F6FA; display:flex; flex-direction:column; gap:16px;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody .optBox > .sectionHeader{font-size:14px; font-weight:700; word-break:break-all; color:#555;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody .optBox > .opt{margin:0;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody .optBox > .opt .bgGrey{margin-top:8px; word-break:break-all; font-size:12px; font-weight:400;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody .optBox > .opt .bgGrey > span{display:inline-block; color:#555;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody .optBox > .opt input[type=checkbox]+label span.text{color:#333; font-size:14px; font-weight:400;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody .assignmentSection{display:flex; flex-direction:column; gap:12px;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody .assignmentSection .blockHeader{font-size:16px; font-weight:500; word-break:break-all;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody .assignmentSection dl{display:flex; align-items:center; gap:24px; font-size:16px; font-weight:500; word-break:break-all;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody .assignmentSection dl dt{width:calc(100% - 324px); text-align:left;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody .assignmentSection dl dd{width:348px;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody .assignmentSection dl dd > button{width:100%;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody .descriptionBox{} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody .descriptionBox strong{font-size:16px; font-weight:400; line-height:1.4; text-align:center; display:block;} .modalBox .mbBody.stepModal .mbBodyContents .stepBox > .stepBody .tableBox{max-height:350px; overflow:auto;} .summaryTable table tbody tr td:nth-child(1){width:160px; text-align:center;} .summaryTable table tbody tr td:nth-child(2){width:183px; text-align:center;} .summaryTable table tbody tr td:nth-child(2) > span, .summaryTable table tbody tr td:nth-child(3) > span{display:flex; align-items:center; justify-content:center;} .summaryTable table tbody tr td:nth-child(2) > span.highlight, .summaryTable table tbody tr td:nth-child(3) > span.highlight{height:54px; border-bottom:1px solid #e5e5e5;} .summaryTable table tbody tr td:nth-child(2) > span.highlight:last-child, .summaryTable table tbody tr td:nth-child(3) > span.highlight:last-child{border-bottom:none;} /* result modal member */ .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody{min-height:90px; display:flex; flex-direction:column; justify-content:center; gap:5px;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .dlBox{display:flex; gap:24px; flex-direction:column;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .dlBox dl{display:flex; gap:24px; width:100%;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .dlBox dl dt{width:160px; text-align:left; color:#333; font-size:16px; font-style:normal; font-weight:500; height:40px; display:flex; align-items:center; flex-shrink:0;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .dlBox dl dd{flex-grow:1; } .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .dlBox dl dd .ssoBox{display:flex; flex-direction:column; width:100%; gap:12px;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .dlBox dl dd .ssoBox .ssoInfo{display:flex; flex-direction:column; gap:16px; gap:20px; width:100%; box-sizing:border-box; border-radius:8px; background:#F5F6FA; padding:20px;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .dlBox dl dd .ssoBox .ssoInfo dl{align-items:center; word-break:break-all;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .dlBox dl dd .ssoBox .ssoInfo dl dt{height:20px; width:100px;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .dlBox dl dd .ssoBox .ssoInfo dl dt, .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .dlBox dl dd .ssoBox .ssoInfo dl dd{font-size:14px;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .dlBox dl dd .ssoBox .ssoInfo .buttonBox{display:flex; align-items:center; gap:8px; flex-wrap:wrap;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .dlBox dl dd .ssoBox .ssoInfo .description{display:flex; flex-direction:column; gap:8px;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .dlBox dl dd .ssoBox .ssoInfo .description strong{font-size:12px; font-style:normal; font-weight:700; line-height:140%; display:inline-block; word-break:break-all;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .dlBox dl dd .ssoBox .ssoInfo .description ul{display:flex; flex-direction:column; gap:4px; word-break:break-all;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .tabBox{margin-top:35px; flex-direction:column; display:flex; gap:28px; padding-bottom:24px;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .tabMobileView{display:none;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .tabBox .tabs{flex-shrink:0; border-bottom:1px solid #d8d8d9; display:flex; gap:20px; height:35px;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .tabBox .tabs > a{font-size:16px; font-weight:500; padding:0 12px; display:flex; align-items:center;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .tabBox .tabs > a[aria-selected="true"]{border-bottom:4px solid #333; font-weight:700;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .tabBox .tabsContent{flex-grow:1; overflow:auto; display:flex; flex-direction:column; gap:12px;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .tabBox .tabsContent .tableHeader{flex-shrink:0;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .tabBox .tabsContent .tableHeader .buttonBox{display:flex; gap:12px;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .tabBox .tabsContent .tableHeader .totalBox{display:flex; align-items:center; gap:8px; font-size:14px;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .tabBox .tabsContent .tableHeader .totalBox em{color:#4B5468; font-weight:700;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .tabBox .tabsContent .tableBody{flex-grow:1; overflow:auto;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .tabBox .tabsContent .tableBody table thead tr th, .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .tabBox .tabsContent .tableBody table tbody tr td{text-align:left;} .modalBox .mbBody .mbBodyContents .signInBox{display:flex; flex-direction:column; gap:24px;} .modalBox .mbBody .mbBodyContents .signInBox dl{display:flex; flex-direction:column; gap:8px; word-break:break-all;} .modalBox .mbBody .mbBodyContents .signInBox dl dt{font-size:16px; font-weight:500;} .modalBox .mbBody .mbBodyContents .signInBox dl dd{font-size:14px; font-weight:400;} /* grantbox */ .modalBox .mbBody .mbBodyContents .infoBox.grantBox{display:flex; flex-direction:column; gap:24px; padding:24px 0 0;} .modalBox .mbBody .mbBodyContents .infoBox.grantBox .dlBox{display:flex; flex-direction:column; gap:12px;} .modalBox .mbBody .mbBodyContents .infoBox.grantBox .dlBox h3{color:#555; font-size: 14px; font-style:normal; font-weight:700; line-height:140%;} .modalBox .mbBody .mbBodyContents .infoBox.grantBox .dlBox dl{display:flex; align-items:center; gap:24px;} .modalBox .mbBody .mbBodyContents .infoBox.grantBox .dlBox dl dt{flex-shrink:0; width:208px; color:#333; font-size:16px; font-style:normal; font-weight:500; word-break:break-all;} .modalBox .mbBody .mbBodyContents .infoBox.grantBox .dlBox dl dd{flex-grow:1;} .modalBox .mbBody .mbBodyContents .infoBox.grantBox .dlBox dl dd button{width:100%;} /* access history */ .modalBox .mbBody .mbBodyContents .infoBox.ahBox{display:flex; flex-direction:column; gap:12px;} .modalBox .mbBody .mbBodyContents .infoBox.ahBox strong{font-size:16px; font-style:normal; font-weight:400; line-height:140%; color:#333; word-break:break-all;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .formBox{flex-shrink:0;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .formBox form .inputWrap input{border:none; background:#F5F6FA;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .resultBox{overflow:auto; max-height:500px;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .resultBox ul{display:flex; flex-direction:column; gap:6px;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .resultBox ul *{font-size:16px; font-weight:400; color:#333;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .resultBox ul li.subGroup{height:auto; width:100%; display:flex; flex-direction:column; gap:6px;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .resultBox ul li.subGroup .groupHeader{display:flex; padding:10px 16px 10px 30px; align-items:center; position:relative;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .resultBox ul li.subGroup .groupHeader > button{position:absolute; top:10px; left:5px; width:20px; height:20px; min-width:unset;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .resultBox ul li.subGroup .groupHeader > button::before{content: ""; width:inherit; height:inherit; display:inline-block; background:url(../img/icon/ic_arrow_down.svg) no-repeat; background-position:center;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .resultBox ul li.subGroup .groupHeader > button.up::before{background:url(../img/icon/ic_arrow_down.svg) no-repeat; background-position:center; transform:rotate(180deg);} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .resultBox ul li.subGroup .group{} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .resultBox ul li.subGroup .group ul{display:flex; flex-direction:column; gap:6px;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .resultBox ul li.subGroup .group ul li{padding:10px 16px 10px 50px;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .resultBox ul li.subGroup .group ul li.All{padding:10px 16px 0px 50px;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .resultBox ul li.subGroup .group ul li a{width:100%; word-break:break-all;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .resultBox ul li.subGroup.open .group ul li.All > a{border-bottom:1px solid rgba(0, 0, 0, 0.1);} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .resultBox ul li.subGroup .group ul li.All > a {padding-bottom:10px;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .resultBox ul.optContainer{max-height:500px; overflow:auto;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .resultBox ul.optContainer li{padding:10px 16px 10px 16px;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .resultBox ul.optContainer li a{width:100%;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .resultBox ul.optContainer li.All{padding:10px 16px 0px 16px;} .modalBox .mbBody .mbBodyContents .infoBox .infoBody.membersBody .resultBox ul.optContainer li.All > a{border-bottom:1px solid rgba(0, 0, 0, 0.1); padding-bottom:10px;} .modalBox .mbBody .mbBodyContents .licenseInfoBox .infoBody .row > .column > .selectWrap{margin-bottom:0px;} .parnterInstallPop {display: flex; gap: 24px; width: 100%; height: auto; align-items: stretch; flex-wrap: wrap;} .parnterInstallPop .one {display: flex; flex-direction: column !important; width: 328px; height: auto; gap: 6px; max-height: 500px; overflow-y: scroll;} .parnterInstallPop .one .inputWrap input {display: flex; background: #F5F6FA;} .parnterInstallPop .one .workspaceBox {} .parnterInstallPop .two {display: flex; flex-direction: column !important; border-radius: 10px; width: 320px; padding: 24px; flex-direction: column; gap: 12px;background-color: #F5F6FA; box-sizing: border-box;} .parnterInstallPop .two .boxHead {display: flex; align-items: center;} .parnterInstallPop .two .boxHead p {color: #111; font-weight: 500; font-size: 16px; word-break: break-all;} .parnterInstallPop .two .boxBody {display: flex; flex-direction: column;} .parnterInstallPop .two .boxBody ul {height: auto; padding: 0; margin: 0; display: flex; flex-direction: column; list-style-type: none;} .parnterInstallPop .two .boxBody ul li {display: flex; color: #333; font-size: 14px; font-weight: 400; min-height: 36px; height: auto; word-break: break-word; display: flex; align-items: center;} .parnterInstallPop .two .boxBody ul li dl {display: flex; height: auto; gap: 0 5px;} .parnterInstallPop .two .boxBody ul li dl dt {display: flex; align-items: center; height: auto; color: #333; font-size: 14px; font-weight: 400; height: 36px;} .parnterInstallPop .two .boxBody ul li dl dd {display: flex; align-items: center; height: auto; color: #333; font-size: 14px; font-weight: 400; height: 36px;} .parnterInstallPop .two .boxBody ul li dl dd::before {content: ">"; margin: 0 5px 0 0;} .parnterInstallPop .one .workspaceBox ul {display: flex; flex-direction: column; gap: 6px 0;} .parnterInstallPop .one .workspaceBox ul li {width: 100%; background-color: #fff;} .parnterInstallPop .one .workspaceBox ul li .businessName {width: 100%; background-color: #fff; position: relative; padding-left: 36px; box-sizing: border-box; cursor: pointer;} .parnterInstallPop .one .workspaceBox ul li:hover .businessName > div > a {text-decoration: underline; color: #383838;} .parnterInstallPop .one .workspaceBox ul li .businessName > div > a {font-size: 16px; font-weight: normal; color: #383838;} .parnterInstallPop .one .workspaceBox ul li .businessName {width: 100%; padding: 10px 16px; background-color: #fff; position: relative; box-sizing: border-box; word-break: break-all;} .parnterInstallPop .one .workspaceBox ul li .businessName:hover {background: #efefef;} .parnterInstallPop .one .workspaceBox ul li .businessName a {margin: 0 0 0 4px; font-size: 16px; max-width: 240px; margin-left: 35px;} .parnterInstallPop .one .workspaceBox ul li .subgroup {display: none;} .parnterInstallPop .one .workspaceBox ul li .businessName.active ~ .subgroup {display: flex;} .parnterInstallPop .one .workspaceBox ul li.subGroupOpen:first-child {border-radius: 13px 0 0 0;} .parnterInstallPop .one .workspaceBox ul li.subGroupOpen:first-child .groupHead {border-radius: 13px 0 0 0;} .parnterInstallPop .one .workspaceBox ul li.subGroupOpen {height: auto; width: 100%;} .parnterInstallPop .one .workspaceBox ul li.subGroupOpen .groupHead {padding: 10px 16px; box-sizing: border-box; border-bottom: 1px solid #e5e5e5;} .parnterInstallPop .one .workspaceBox ul li.subGroupOpen .groupHead a {margin: 0 0 0 4px; font-size: 16px; max-width: 240px;} .parnterInstallPop .one .workspaceBox ul li.subGroupOpen .groupHead:hover {background: #efefef; text-decoration: underline;} /* .parnterInstallPop .one .workspaceBox ul li.subGroupOpen .groupHead:active{outline-offset: -2px; background-color: #e4e4e4; outline:1px solid #a50034;} */ .parnterInstallPop .one .workspaceBox ul li.subGroupOpen .groupHead:active a {color: #a50034;} .parnterInstallPop .one .workspaceBox ul li.subGroupOpen .groupHead[aria-selected="true"] {outline-offset: -2px; background-color: #e4e4e4; outline:1px solid #a50034;} .parnterInstallPop .one .workspaceBox ul li.subGroupOpen .groupHead[aria-selected="true"] a {color: #a50034;} .parnterInstallPop .one .workspaceBox ul li .subgroup ul {height: auto; width: 100%;} .parnterInstallPop .one .workspaceBox ul li .subgroup ul li {width: 100%; padding: 10px 16px 10px 36px; box-sizing: border-box; font-size: 15px; cursor: pointer; word-break: break-all; position: relative; justify-content:space-between; flex-wrap:wrap;} .parnterInstallPop .one .workspaceBox ul li .subgroup ul li .status::before{display:none;} .parnterInstallPop .one .workspaceBox ul li .subgroup ul li .info{display: block; text-align:center; font-size:14px; font-weight:bold; padding:2px 10px 2px 8px; background:#a50034; border-radius:20px; color:#fff;} .parnterInstallPop .one .workspaceBox ul li .subgroup ul li .buttonWrap {width: 100%; height: auto;} .parnterInstallPop .one .workspaceBox ul li .subgroup ul li .buttonWrap button {width: 100%; height: 33px;} .parnterInstallPop .one .workspaceBox ul li .subgroup ul li.All::before {content: ""; background: #e5e5e5; height: 1px; width: calc(100% - 100px); bottom: 0; left: auto; position: absolute;} .parnterInstallPop .one .workspaceBox ul li .subgroup ul li:active{outline-offset: -2px; background-color: #e4e4e4;} .parnterInstallPop .one .workspaceBox ul li .subgroup ul li:active::before {height: 0;} /* .parnterInstallPop .one .workspaceBox ul li .subgroup ul li:active a {color: #a50034;} */ .parnterInstallPop .one .workspaceBox ul li .subgroup ul li a {font-size: 15px;} .parnterInstallPop .one .workspaceBox ul li .subgroup ul li.dDay {padding-right: 85px; position: relative;} /* add workspcae */ .addWorkspace .mbBodyContents {gap: 16px; display: flex; flex-direction: column;} .addWorkspace .mbBodyContents .required {width: calc(100%);} .addWorkspace .mbBodyContents .workspaceDL {display: flex; flex-direction: column; gap: 24px;} .addWorkspace .mbBodyContents .workspaceDL dl {display: flex; flex-direction: column; gap: 12px;} .addWorkspace .mbBodyContents .workspaceDL dl dd {font-size: 16px; font-weight: 500; line-height: 22.4px; display:flex; flex-direction: row;} .addWorkspace .mbBodyContents .workspaceDL dl dd > div {width: 100%;} .addWorkspace .mbBodyContents .workspaceDL dl dt {font-size: 16px; font-weight: 500; line-height: 22.4px; display:flex; flex-direction: row;} .addWorkspace .mbBodyContents .workspaceDL dl dt .required {display: flex; width: auto; margin-left: 2px; width: auto;} /* Add device */ .addDevice .mbBodyContents {gap: 16px; display: flex; flex-direction: column;} .addDevice .mbBodyContents .required {width: calc(100%);} .addDevice .mbBodyContents .required {width: calc(100%);} .addDevice .mbBodyContents .devicesDL {display: flex; flex-direction: column; gap: 24px;} .addDevice .mbBodyContents .devicesDL dl {display: flex; flex-direction: column; gap: 12px;} .addDevice .mbBodyContents .devicesDL dl dd {font-size: 16px; font-weight: 500; line-height: 22.4px; display:flex; flex-direction: row;} .addDevice .mbBodyContents .devicesDL dl dd > div {width: 100%;} .addDevice .mbBodyContents .devicesDL dl dd .howToAddDevice {display: flex; flex-direction: column; gap: 16px;} .addDevice .mbBodyContents .devicesDL dl dt {font-size: 16px; font-weight: 500; line-height: 22.4px; display:flex; flex-direction: row;} .addDevice .mbBodyContents .devicesDL dl dt .required {display: flex; width: auto; margin-left: 2px; width: auto;} .addDevice.multiple .mbBodyContents .deviceContentBox .uploadBox {display: flex; flex-direction: column; gap: 12px;} .addDevice.multiple .mbBodyContents .deviceContentBox .uploadBox .top {display: flex; gap: 8px; width: 100%; padding: 0; margin: 0; flex-direction: row;} .addDevice.multiple .mbBodyContents .deviceContentBox {gap: 24px; display: flex; flex-direction: column;} .addDevice.multiple .mbBodyContents .deviceContentBox .uploadBox .bottom {height: 200px; padding: 20px; width: 100%; display: flex; flex-direction: column; gap: 16px; background: #F5F6FA; border-radius: 8px;} .addDevice.multiple .mbBodyContents .deviceContentBox .uploadBox .bottom dl {display: flex; align-items: center; gap: 4px 24px;} .addDevice.multiple .mbBodyContents .deviceContentBox .uploadBox .bottom dl dt {display: flex; align-items: center; gap: 24px; min-width: 100px; font-size: 14px; font-weight: 500; color: #333;} .addDevice.multiple .mbBodyContents .deviceContentBox .uploadBox .bottom dl dd {display: flex; align-items: center; gap: 24px; font-size: 14px; font-weight: 300; color: #333;} /* device Four */ .deviceBoard.deviceFour {display: flex; flex-direction: column; align-items: flex-start; flex-grow: 1; background: #fff; border-radius: 10px; border: 1px solid #d0d1d2; box-sizing: border-box; height: 100%; overflow: auto; padding: 32px; box-sizing: border-box; justify-content: flex-start; gap: 24px;} .deviceBoard.deviceFour .top {display: flex; flex-direction: row; justify-content: space-between; width: 100%; flex-wrap: wrap; gap: 24px;} .deviceBoard.deviceFour .top .left {display: flex; flex-direction: column; gap: 8px; justify-content: flex-start; align-items: flex-start;} .deviceBoard.deviceFour .top .left .contentName {display: flex;} .deviceBoard.deviceFour .top .left .contentName span {font-size: 20px; font-weight: 700; line-height: 26px; color: #333; word-break: break-word;} .deviceBoard.deviceFour .top .left .contentPath {display: flex;} .deviceBoard.deviceFour .top .left .contentPath dl {display: flex; gap: 4px;} .deviceBoard.deviceFour .top .left .contentPath dl dt {display: flex; font-size: 14px; font-weight: normal; line-height: 19.6px; color: #333;} .deviceBoard.deviceFour .top .left .contentPath dl dt::after {content: ""; background: url(../img/icon/ic_arrow_right.svg) no-repeat center; height: 20px; width: 20px; margin-left: 4px;} .deviceBoard.deviceFour .top .left .contentPath dl dd {font-size: 14px; font-weight: 700; line-height: 19.6px; color: #333;} .deviceBoard.deviceFour .top .right {padding: 12px 16px; box-sizing: border-box; border-radius: 4px; background-color: #F5F6FA; display: flex;} .deviceBoard.deviceFour .top .right dl {display: flex; align-items: center; gap: 7px;} .deviceBoard.deviceFour .top .right dl dt {display: flex; font-weight: 500; font-size: 14px; color: #333; line-height: 19.6px; position: relative; padding: 0 0 0 13px;} .deviceBoard.deviceFour .top .right dl dd {display: flex; flex-direction: row; gap: 7px; align-items: center; height: auto; width: auto;} .deviceBoard.deviceFour .top .right dl dt::before {content: ""; display: flex; height: 5px; width: 5px; border-radius: 50%; margin: 0 5px 0 0; background-color: #1D828F; top: 8px; left: 0; position: absolute;} .deviceBoard.deviceFour .top .right dl dd .tagBox {height: auto; width: 100%; display: flex; flex-direction: row; gap: 8px;} .deviceBoard.deviceFour .top .right dl dd .tagBox .supersignIcon {height: 32px; width: 32px; border-radius: 8px; background: url(../img/common/ic_supersign.svg);} .deviceBoard.deviceFour .top .right dl dd .tagBox .procloudIcon {height: 32px; width: 32px; border-radius: 8px; background: url(../img/common/ic_procloud.svg);} .deviceBoard.deviceFour .top .right dl dd .tagBox .procentricIcon {height: 32px; width: 32px; border-radius: 8px; background: url(../img/common/ic_procentric.svg);} .deviceBoard.deviceFour .top .right dl dd .tagBox .prosignADIcon {height: 32px; width: 32px; border-radius: 8px; background: url(../img/common/ic_e-centric.svg);} .deviceBoard.deviceFour .bottom {display: flex; flex-direction: column; gap: 16px; width: 100%; height: auto;} .deviceBoard.deviceFour .bottom .topBox {display: flex; align-items: center;} .deviceBoard.deviceFour .bottom .topBox strong {margin: 0; padding: 0; display: flex; font-size: 16px; font-weight: 500; line-height: 22.4px; color: #333;} .deviceBoard.deviceFour .bottom .tableBoard {gap: 12px; display: flex; flex-direction: column;} .deviceBoard.deviceFour .bottom .tableBoard .tbHeader {display: flex;width: 100%;} .deviceBoard.deviceFour .bottom .tableBoard .tbHeader .fb_ew {display: flex; flex-wrap: wrap; width: 100%; gap: 16px;} .deviceBoard.deviceFour .bottom .tableBoard .tbHeader .fb_ew .buttonBox {display: flex; flex-wrap: wrap; gap: 12px; padding: 0; margin: 0;} .deviceBoard.deviceFour .bottom .tableBoard .tbHeader .fb_ew .buttonBox .sheparator {display: flex; align-items: center; height: 36px; width: 1px; background: #000; opacity: 0.1;} .deviceBoard.deviceFour .bottom .tableBoard .tbHeader .fb_ew .buttonBox .buttonDiv {display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0;} .deviceBoard.deviceFour .bottom .tableBoard .tbHeader .fb_ew .toolBox {display: flex; flex-wrap: wrap; gap: 8px; width: auto; margin: 0; align-items: center;} .deviceBoard.deviceFour .bottom .tableBoard .tbHeader .fb_ew .toolBox .totalBox {font-size: 14px; font-weight: 400; color: #4B5468;} .deviceBoard.deviceFour .bottom .tableBoard .tbHeader .fb_ew .toolBox .totalBox em {font-size: 14px; font-weight: 700; color: #4B5468;} .deviceBoard.deviceFour .bottom .tableBoard .tbBody table > tbody > tr > td .fb_dir_y .delete {color: #a50034; font-size: 12px; font-weight: normal; font-weight: 400;} .deviceBoard.deviceFour .bottom .tableBoard .tbBody table > tbody > tr > td .status {display: flex;} /* .deviceBoard.deviceFour .bottom .tableBoard .tbBody table > tbody > tr > td .status > div {} .deviceBoard.deviceFour .bottom .tableBoard .tbBody table > tbody > tr > td .status .onPlaying {} */ /* device profile */ .contents.deviceProfile {} .contents.deviceProfile .contentBox .fb_x {width: calc(100%); padding: 0 12px 0 48px; box-sizing: border-box;} .contents.deviceProfile .contentBox .fb_x .tableBoard .tbHeader {display: flex; flex-direction: column;} .contents.deviceProfile .contentBox .fb_x .tableBoard .tbHeader .fb_ew {display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px;} .contents.deviceProfile .contentBox .fb_x .tableBoard {width: 100%; display: flex; gap: 12px; flex-direction: column;} .contents.deviceProfile .contentBox .fb_x .tableBoard .tbHeader .fb_ew .toolBox {display: flex; flex-wrap: wrap; gap: 8px; width: auto; margin: 0; align-items: center;} .contents.deviceProfile .contentBox .fb_x .tableBoard .tbHeader .fb_ew .toolBox .totalBox {font-size: 14px; font-weight: 400; color: #4B5468; display: flex; gap: 4px; justify-content: flex-end;} .contents.deviceProfile .contentBox .fb_x .tableBoard .tbHeader .fb_ew .toolBox .totalBox em {font-size: 14px; font-weight: 700; color: #4B5468;} /* device list */ .contents.deviceList {} .contents.deviceList .contentBox .fb_x {width: calc(100%); padding: 0 12px 0 48px; box-sizing: border-box; flex-direction: column; gap: 64px;} .contents.deviceList .contentBox .fb_x .top {display: flex; gap: 32px; justify-content: flex-start; flex-wrap: wrap;} .contents.deviceList .contentBox .fb_x .top .thumbBox {height: 120px; width: 120px; display: flex; background: url(../img/icon/ic_toneon.svg) no-repeat; background-size: contain;} .contents.deviceList .contentBox .fb_x .top .dataBox {display: flex; flex-direction: column; gap: 12px;} .contents.deviceList .contentBox .fb_x .top .dataBox .titleBox {display: flex;} .contents.deviceList .contentBox .fb_x .top .dataBox .titleBox strong {font-size: 32px; font-weight: 700; line-height: 41.6px; color: #333; word-wrap: wrap;} .contents.deviceList .contentBox .fb_x .top .dataBox .dataDl {display: flex; flex-direction: column; gap: 8px;} .contents.deviceList .contentBox .fb_x .top .dataBox .dataDl dl {display: flex; align-items: center; gap: 20px;} .contents.deviceList .contentBox .fb_x .top .dataBox .dataDl dl dt {display: flex; font-size: 16px; font-weight: 400; color: #333; word-break: break-word; min-width: 121px;} .contents.deviceList .contentBox .fb_x .top .dataBox .dataDl dl dd {display: flex; align-items: center;} .contents.deviceList .contentBox .fb_x .top .dataBox .dataDl dl dd.infoDiv {gap: 2px;} .contents.deviceList .contentBox .fb_x .top .dataBox .dataDl dl dd.pcDiv {gap: 8px;} .contents.deviceList .contentBox .fb_x .top .dataBox .dataDl dl dd span {font-size: 16px; font-weight: 500; color: #4B5468; word-wrap: break-word;} .contents.deviceList .contentBox .fb_x .top .dataBox .dataDl dl dd span.infoIc {display: flex; height: 20px; width: 20px; border-radius: 50%; box-sizing: border-box; background: #4B5468; color: #fff; align-items: center; justify-content: center;} .contents.deviceList .contentBox .fb_x .top .dataBox .dataDl dl dd span.infoIc {display: flex; height: 20px; width: 20px; border-radius: 50%; box-sizing: border-box; background: #4B5468; color: #fff; align-items: center; justify-content: center; margin: 0 4px 0 0;} .contents.deviceList .contentBox .fb_x .top .dataBox .dataDl dl dd span.pcIc {height: 20px; width: 20px;margin: 0 4px 0 0; position: relative; display: inline-flex;} .contents.deviceList .contentBox .fb_x .top .dataBox .dataDl dl dd span.pcIc::before {content: ""; height: 100%; width: 100%; background: url(../img/icon/ic_device.svg) no-repeat; background-size: contain; background-position: center;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard{flex-grow:1; overflow:auto; gap: 32px; display: flex; flex-direction: column;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabs{height:48px; display:flex; align-items:center; border-bottom:1px solid rgba(0, 0, 0, 0.1); gap:20px; overflow:auto;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabs > a{height:100%; box-sizing:border-box; padding:11px 12px; color:rgba(85, 85, 85, 1); font-size:20px; font-weight:500;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabs > a[aria-selected="true"]{border-bottom:4px solid #333; font-weight:700;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView{height:calc(100% - 49px); width:100%; box-sizing:border-box; display:flex; flex-direction:column; overflow:auto;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.info {display: flex; gap: 16px;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.info dl {display: flex; gap: 0 48px; align-items: center;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.info dl dt {font-size: 16px; font-weight: 500; color: #333; min-height: 36px; height: auto; word-wrap: break-word; min-width: 144px; display: flex; align-items: center;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.info dl dd {font-size: 16px; font-weight: 400; color: #333; min-height: 36px; height: auto; word-wrap: break-word; display: flex; align-items: center; gap: 12px;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.info .network {display: flex; flex-direction: column; gap: 8px;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.info .network .dlBoxDiv {display: flex; flex-direction: column; gap: 12px; width: auto;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.info .network strong {color: #333; font-size: 16px; font-weight: 500; height: 33px; min-width: 144px; display: flex;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.info .network .dlBoxDiv dl {display: flex; flex-direction: row; align-items: center; width: auto; gap: 0 48px;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.info .network .dlBoxDiv dl dt {padding: 0 0 0 16px; font-size: 14px; color: #555; line-height: 19.6px; font-weight: 500; box-sizing: border-box;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.info .network .dlBoxDiv dl dd {font-size: 14px; color: #555; line-height: 19.6px; font-weight: 400;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.info dl dd .progressBar {display: flex; height: 8px; width: 180px; max-width: 100%; background: #DADDE2; position: relative; min-height: 8px; border-radius: 10px; overflow: hidden;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.info dl dd .progressBar .progress {display: flex; height: 100%; background: #354056;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard .mobileTab {display: none;} /* control */ .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.control {display: flex; gap: 16px;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.control dl {display: flex; gap: 0 48px; align-items: center;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.control dl dt {font-size: 16px; font-weight: 500; color: #333; min-height: 36px; height: auto; word-wrap: break-word; min-width: 144px; display: flex; align-items: center;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.control dl dd {font-size: 16px; font-weight: 400; color: #333; min-height: 36px; height: auto; word-wrap: break-word; display: flex; align-items: center; gap: 12px;} /* advance */ .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.advance {display: flex; justify-content: center; align-items: center; max-width: 100%; display: flex; gap: 40px;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.advance .advanceContentBox {display: flex; flex-direction: row; align-items: flex-start; gap: 20px; justify-content: space-between; width: 100%;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.advance .advanceContentBox span {display: flex; font-size: 18px; font-weight: 500; line-height: 25.2px; color: #333;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.advance .advanceContentBox .proCentricLink {padding: 12px 16px; box-sizing: border-box; display: flex; align-items: center;gap: 12px; background-color: #EBFCFC; border-radius: 6px; max-width: 298px; width: auto;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.advance .advanceContentBox .proCentricLink .proCentricThumb {display: flex; height: 40px; width: 40px; border-radius: 10px;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.advance .advanceContentBox .proCentricLink .proCentricThumb::before {content: ""; background: url(../img/icon/ic_procentric-cloud.png) no-repeat; height: 100%; width: 100%; background-size: contain;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.advance .advanceContentBox .proCentricLink .proCentricText {display: flex; font-size: 14px; color: #333; font-weight: 500; line-height: 19.6px;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.advance .advanceContentBox .proCentricLink .button {height: 23px; width: 23px; display: flex; padding: 5px;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.advance .advanceContent {display: flex; max-width: 1200px; flex-direction: column; gap: 96px; flex-wrap: wrap; max-width: 100%;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.advance .advanceContent .cardBox {display: flex; max-width: 100%; gap: 64px; align-items: center; flex-wrap: wrap; height: auto;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.advance .advanceContent .cardBox .thumbBox {display: flex; height: 480px; width: 480px; border-radius: 20px; background-color: #f8f8f8; overflow: hidden;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.advance .advanceContent .cardBox .thumbBox img {height: 100%; width: 100%; border-radius: 20px;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.advance .advanceContent .cardBox .thumbContent {display: flex; height: auto; width: 656px; flex-direction: column; max-width: 100%;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.advance .advanceContent .cardBox .thumbContent .top {display: flex; height: auto; width: 100%;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.advance .advanceContent .cardBox .thumbContent .top span {display: flex; font-size: 24px; font-style: normal; font-weight: 500; line-height: 140%;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.advance .advanceContent .cardBox .thumbContent .bottom {display: flex; flex-direction: column; gap: 32px;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.advance .advanceContent .cardBox .thumbContent .bottom .bottomHeader {color: #333; font-size: 40px; font-weight: 400; line-height: normal;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.advance .advanceContent .cardBox .thumbContent .bottom .bottomHeader {color: #333; font-size: 28px; font-style: normal; font-weight: 500; line-height: normal;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.advance .advanceContent .cardBox .thumbContent .bottom .bottomBody {display: flex; flex-wrap: wrap;} .contents.deviceList .contentBox .fb_x .bottom .tabBoard > .tabsView.advance .advanceContent .cardBox .thumbContent .bottom .bottomBody p {color: #333; font-size: 18px; font-style: normal; font-weight: 400; line-height: normal; word-break: break-word;} /* member board */ .container .body .contents .dcBody .viewBox .contentBoard.memberBoard .hiddenTools {display:none; align-items:center; gap:8px;} .container .body .contents .dcBody .viewBox .contentBoard.memberBoard .hiddenTools .breadcrumb ul li {font-weight:500; display:contents; vertical-align:middle; font-size:16px; color:#333; letter-spacing:-0.6px; word-break:break-all;} .container .body .contents .dcBody .viewBox .contentBoard.memberBoard .tableBoard .tbHeader > div .toolBox:nth-child(2) > .totalBox em{border:none;} /* Request board */ .container .body .contents .dcBody .viewBox .contentBoard.requestBoard .hiddenTools {display:none; align-items:center; gap:8px;} .container .body .contents .dcBody .viewBox .contentBoard.requestBoard .hiddenTools .breadcrumb ul li {font-weight:500; display:contents; vertical-align:middle; font-size:16px; color:#333; letter-spacing:-0.6px; word-break:break-all;} .container .body .contents .dcBody .viewBox .contentBoard.requestBoard .boardBody{display:flex; flex-grow:1; flex-direction:column; gap:40px;} .container .body .contents .dcBody .viewBox .contentBoard.requestBoard .boardBody > .sectionHeader{font-size:20px; word-break:break-all; font-weight:700; margin-top:12px;} .container .body .contents .dcBody .viewBox .contentBoard.requestBoard .boardBody > .sectionBox{display:flex; padding-bottom:40px; border-bottom:1px solid rgba(0, 0, 0, 0.1); gap:16px; flex-direction:column;} .container .body .contents .dcBody .viewBox .contentBoard.requestBoard .boardBody > .sectionBox > strong{display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:700; word-break:break-all;} .container .body .contents .dcBody .viewBox .contentBoard.requestBoard .boardBody > .sectionBox > strong::before{width:24px; height:24px; display:inline-block; content:"";} .container .body .contents .dcBody .viewBox .contentBoard.requestBoard .boardBody > .sectionBox > strong.license{color:rgba(29, 130, 143, 1);} .container .body .contents .dcBody .viewBox .contentBoard.requestBoard .boardBody > .sectionBox > strong.license::before{background:url(../img/icon/ic_license_fill.svg) no-repeat center;} .container .body .contents .dcBody .viewBox .contentBoard.requestBoard .boardBody > .sectionBox > strong.points{color:rgba(220, 104, 3, 1);} .container .body .contents .dcBody .viewBox .contentBoard.requestBoard .boardBody > .sectionBox > strong.points::before{background:url(../img/icon/ic_point_fill.svg) no-repeat center;} .container .body .contents .dcBody .viewBox .contentBoard.requestBoard .boardBody > .sectionBox > strong.apps{color:rgba(55, 149, 106, 1);} .container .body .contents .dcBody .viewBox .contentBoard.requestBoard .boardBody > .sectionBox > strong.apps::before{background:url(../img/icon/ic_app_fill.svg) no-repeat center;} .container .body .contents .dcBody .viewBox .contentBoard.requestBoard .boardBody > .sectionBox > .buttonWrap{display:flex; align-items:center; flex-wrap:wrap; gap:12px;} .container .body .contents .dcBody .viewBox .contentBoard.requestBoard .boardBody > .sectionBox > .buttonWrap > button > em{font-style:normal; font-weight:700; margin-left:4px;} .container .body .contents .dcBody .requestView {width:100%; height:100%; background:transparent; border-radius:10px;} .container .body .contents .dcBody .requestView .partnerCenterBox .tableHead{align-items:center; gap:16px;} .container .body .contents .dcBody .requestView .partnerCenterBox .tableHead .totalBox{display:flex; align-items:center; justify-content:flex-end; } .container .body .contents .dcBody .requestView .partnerCenterBox .tableHead .totalBox > em{font-weight:700; display:inline-block; width:auto !important; padding-left:3px;} .container .body .contents .dcBody .requestView .partnerCenterBox .tableHead > .tools{width:auto; padding:0px; display:flex; gap:16px; margin:0;} .container .body .contents .dcBody .requestView .partnerCenterBox .licenseTable{padding:32px; overflow:auto;} .container .body .contents .dcBody .requestView .partnerCenterBox .approvalTable{padding:32px; overflow:auto;} .container .body .contents .dcBody .requestView .partnerCenterBox .approvalPointsTable{padding:32px; overflow:auto;} .container .body .contents .dcBody .requestView .partnerCenterBox .requestApprovalTable{padding:32px; overflow:auto;} .container .body .contents .dcBody .requestView .partnerCenterBox .radioBox{padding:32px 32px; display:flex; align-items:center; gap:24px; flex-wrap:wrap;} .container .body .contents .dcBody .requestView .partnerCenterBox{padding:0px 0px 32px; gap:0px;} .container .body .contents .dcBody .requestView .partnerCenterBox .hiddenTools{display:none; align-items:center; gap:8px;} .container .body .contents .dcBody .requestView .partnerCenterBox .hiddenTools .breadcrumb ul li {font-weight:500; display:contents; vertical-align:middle; font-size:16px; color:#333; letter-spacing:-0.6px; word-break:break-all;} .container .body .contents .dcBody .requestView .partnerCenterBox .licenseTable table thead tr th, .container .body .contents .dcBody .requestView .partnerCenterBox .licenseTable table tbody tr td{text-align:left;} .container .body .contents .dcBody .requestView .partnerCenterBox .licenseTable table thead tr th:nth-child(10), .container .body .contents .dcBody .requestView .partnerCenterBox .licenseTable table tbody tr td:nth-child(10){text-align:center;} .container .body .contents .dcBody .requestView .partnerCenterBox .licenseTable table tbody tr td:nth-child(8) > .regionIcon{display:flex; align-items:center; gap:4px; flex-wrap:wrap;} .container .body .contents .dcBody .requestView .partnerCenterBox .licenseTable table tbody tr td:nth-child(8) > .regionIcon::before{display:inline-flex; width:24px; height:24px; border-radius:50%; content:""; background:url(../img/icon/btn_language_ch.svg) no-repeat center;} .container .body .contents .dcBody .requestView .partnerCenterBox .requestApprovalTable table thead tr th, .container .body .contents .dcBody .requestView .partnerCenterBox .requestApprovalTable table tbody tr td{text-align:left;} .container .body .contents .dcBody .requestView .partnerCenterBox .requestApprovalTable table thead tr th:nth-child(10), .container .body .contents .dcBody .requestView .partnerCenterBox .requestApprovalTable table tbody tr td:nth-child(10){text-align:center; width:62px;} .container .body .contents .dcBody .requestView .partnerCenterBox .requestTable-two table thead tr th:nth-child(7), .container .body .contents .dcBody .requestView .partnerCenterBox .requestTable-two table tbody tr td:nth-child(7){text-align:center; width:62px;} .container .body .contents .dcBody .requestView .partnerCenterBox .requestTable-two table tbody tr td:nth-child(2){width:62px; text-align:center;} div.status::before{flex-shrink:0;} div.status{border-radius:100px; padding:2px 10px 2px 8px; display:inline-flex; align-items:center; gap:4px; margin:0px; font-size:14px;} .status.approvedIcon{color:rgba(2, 121, 72, 1); background:rgba(236, 253, 243, 1);} .status.approvedIcon::before {content:"";height: 18px; display: inline-flex; width: 18px; background-image: url(../img/common/ic_status_check.svg); background-repeat: no-repeat;background-position:center;} .status.waitIcon {color:rgba(53, 64, 86, 1); background:#E8EBF0;} .status.waitIcon::before {content: "";height: 18px; display: inline-flex; width: 18px; background-image: url(../img/common/ic_status_wait.svg); background-repeat: no-repeat;background-position: center;} .status.closedIcon {color:rgba(217, 45, 32, 1); background:rgba(254, 228, 226, 1);} .status.closedIcon::before {content: ""; height: 18px; display: inline-flex; width: 18px; background-image: url(../img/common/ic_status_x.svg); background-repeat: no-repeat; background-position: center; } .status.rejectedIcon {color:rgba(181, 71, 8, 1); background:rgba(254, 239, 199, 1);} .status.rejectedIcon::before {content: ""; height: 18px; display: inline-flex; width: 18px; background-image: url(../img/common/ic_status_reject.svg); background-repeat: no-repeat; background-position: center; } .container .body .contents .dcBody .requestView .partnerCenterBox .requestApprovalTable table thead tr th:nth-child(10), .container .body .contents .dcBody .requestView .partnerCenterBox .requestApprovalTable table tbody tr td:nth-child(10){text-align:center;} .status.regionIcon{display:flex; align-items:center; gap:4px; flex-wrap:wrap;} .status.regionIcon::before{display:inline-flex; width:24px; height:24px; border-radius:50%; content:""; background:url(../img/icon/btn_language_ch.svg) no-repeat center;} span.tone{width:48px; height:48px; display:inline-block; font-size:0px;} span.tone::before{width:48px; height:48px; display:inline-block; content:"";} span.tone.netflix::before{background:url(../img/icon/ic_toneon.svg) no-repeat center;} /* home section */ .container .body .contents .dcBody .homeView{width:100%; height:100%; background:transparent; border-radius:10px;} .container .body .contents .dcBody .homeView .viewBox{display:flex;} .container .body .contents .dcBody .homeView .viewBox .homeBoard{background:transparent; display:flex; flex-grow:1; flex-direction:column; border:none; box-sizing:border-box; overflow:auto;} .container .body .contents .dcBody .homeView .viewBox .homeBoard > *{width:100%; box-sizing:border-box;} .container .body .contents .dcBody .homeView .viewBox .homeBoard > .cbHeader{display:flex; align-items:center; gap:32px;flex-shrink:0; margin-bottom:24px;} .container .body .contents .dcBody .homeView .viewBox .homeBoard > .cbHeader .userInfo{display:flex; flex-direction:column; font-size:32px; gap:8px; line-height:1.4; font-weight:400; color:#111111; word-break:break-all;} .container .body .contents .dcBody .homeView .viewBox .homeBoard > .cbHeader .userInfo > .user > strong{font-weight:700;} .container .body .contents .dcBody .homeView .viewBox .homeBoard > .cbHeader .userInfo > .role{font-size:16px;} .container .body .contents .dcBody .homeView .viewBox .homeBoard > .cbBody{flex-grow:1; display:flex; flex-direction:column; gap:16px;} .container .body .contents.homeContainer .dcBody .detailView .block{display:flex; gap:16px; margin-bottom:16px;} .container .body .contents.homeContainer .dcBody .detailView .block > *{flex-basis:50%;} .container .body .contents.homeContainer .dcBody .detailView .block > .section{display:flex; flex-direction:column; gap:16px; width:100%;} .container .body .contents.homeContainer .dcBody .detailView .block > .section.quickMenu > .sectionBody{padding:0px; display:flex; gap:12px;} .container .body .contents.homeContainer .dcBody .detailView .block > .section.quickMenu > .sectionBody > .card:active{background:#DADDE2;} .container .body .contents.homeContainer .dcBody .detailView .block > .section.quickMenu > .sectionBody > .card{display:flex; justify-content:left; align-items:center; padding:16px 22px; background:#fff; border:1px solid #DADDE2; border-radius:10px; flex-basis:50%; gap:10px; height:136px; box-sizing:border-box; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);} .container .body .contents.homeContainer .dcBody .detailView .block > .section.quickMenu > .sectionBody > .card > .imageBox{width:72px; height:72px; flex-shrink:0; border-radius:8px;} .container .body .contents.homeContainer .dcBody .detailView .block > .section.quickMenu > .sectionBody > .card > .imageBox::before{content:""; display:inline-block; width:100%; height:100%;} .container .body .contents.homeContainer .dcBody .detailView .block > .section.quickMenu > .sectionBody > .card >.imageBox.awImage{background: linear-gradient(323deg, rgba(146, 170, 255, 0.49) 0%, rgba(177, 236, 255, 0.33) 100%);} .container .body .contents.homeContainer .dcBody .detailView .block > .section.quickMenu > .sectionBody > .card >.imageBox.awImage::before{background:url(../img/common/ic_workspace.svg) no-repeat center;} .container .body .contents.homeContainer .dcBody .detailView .block > .section.quickMenu > .sectionBody > .card:nth-child(2) > .imageBox{background:linear-gradient(323deg, rgba(181, 146, 255, 0.49) 0%, rgba(198, 177, 255, 0.33) 100%);} .container .body .contents.homeContainer .dcBody .detailView .block > .section.quickMenu > .sectionBody > .card:nth-child(2) > .imageBox::before{background:url(../img/common/ic_user_fill.svg) no-repeat center;} .container .body .contents.homeContainer .dcBody .detailView .block > .section.quickMenu > .sectionBody > .card > .infoBox > strong{display:block; color:#5F6E92; font-size:18px; font-weight:700; word-break:normal; margin-bottom:4px; text-align:left;} .container .body .contents.homeContainer .dcBody .detailView .block > .section.quickMenu > .sectionBody > .card > .infoBox > span{font-size:14px; font-weight:400; display:block; word-break:normal; text-align:left;} .container .body .contents.homeContainer .dcBody .detailView .block > .section > .sectionHeader{font-size:20px; word-break:break-all; font-weight:700; margin:0px;} .container .body .contents.homeContainer .dcBody .detailView .block > .section > .sectionBody{box-sizing:border-box; border-radius:10px; background:#fff; border:1px solid #DADDE2; padding:16px 24px; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);} .container .body .contents.homeContainer .dcBody .detailView .block > .section.graphBox > .sectionBody{min-height:510px; box-sizing:border-box; display:flex; gap:48px; align-items:center; justify-content:center; box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);} .container .body .contents.homeContainer .dcBody .detailView .block > .section.graphBox > .sectionBody > .chart{width:320px; height:320px; position:relative;} .container .body .contents.homeContainer .dcBody .detailView .block > .section.graphBox > .sectionBody > .chartInfo{min-width:240px;} .container .body .contents.homeContainer .dcBody .detailView .block > .section.graphBox > .sectionBody > .chartInfo > ul{display:flex; flex-direction:column; gap:12px;} .container .body .contents.homeContainer .dcBody .detailView .block > .section.graphBox > .sectionBody > .chartInfo > ul > li{display:flex; align-items:center; gap:8px; font-size:18px; line-height:1.4; width:100%;} .container .body .contents.homeContainer .dcBody .detailView .block > .section.graphBox > .sectionBody > .chartInfo > ul > li > span{flex-grow:1;} .container .body .contents.homeContainer .dcBody .detailView .block > .section.graphBox > .sectionBody > .chartInfo > ul > li > em{flex-shrink:0;} .container .body .contents.homeContainer .dcBody .detailView .block > .section.graphBox > .sectionBody > .chartInfo > ul > li > a{gap:5px; width:100%;} .container .body .contents.homeContainer .dcBody .detailView .block > .section.graphBox > .sectionBody > .chartInfo > ul > li strong{font-size:18px; font-weight:400; flex-grow:1;} .container .body .contents.homeContainer .dcBody .detailView .block > .section.graphBox > .sectionBody > .chartInfo > ul > li em{font-style:normal; font-weight:700; font-size:20px;} .container .body .contents.homeContainer .dcBody .detailView .block > .section.graphBox > .sectionBody > .chartInfo > ul > li > a::after{content: '';display:block; width:14px; height:14px; background:url(../img/icon/icon_arrowDown.svg)no-repeat center; transform:rotate(270deg); margin-left:10px; opacity:0.6;} .container .body .contents.homeContainer .dcBody .detailView .block > .section.graphBox > .sectionBody > .chartInfo .expireOn{width:100%; display:flex; flex-direction:column; gap:8px; margin-top:32px;} .container .body .contents.homeContainer .dcBody .detailView .block > .section.graphBox > .sectionBody > .chartInfo .expireOn > strong{font-size:18px; font-weight:700; word-break:break-all; display:inline-block;} .container .body .contents.homeContainer .dcBody .detailView .block > .section.graphBox > .sectionBody > .chartInfo .expireOn > em{display:inline-block; font-size:16px; font-weight:400; word-break:break-all; font-style: normal;} .container .body .contents.homeContainer .dcBody .detailView .transparent{background-color:transparent !important; border:none !important; box-shadow:none !important;} .container .body .contents.homeContainer .dcBody .detailView > .textBox{text-align:center; display:block; margin-top:16px;} .container .body .contents.homeContainer .dcBody .detailView > .textBox em{font-weight:400; font-size:18px; font-style:normal; display: inline-block; word-break:break-all; color:#555;} .container .body .contents.homeContainer .dcBody .detailView.waitingBoard{padding:58px;} .container .body .contents.homeContainer .dcBody .detailView > .imageBox{width:800px; height:480px; background:url(../img/common/home_artwork.png) no-repeat center; margin:0 auto 24px; background-size: contain;} .container .body .contents.homeContainer .dcBody .detailView > .descriptionBox{display:flex; flex-direction:column; text-align:center; gap:8px; margin-bottom:24px;} .container .body .contents.homeContainer .dcBody .detailView > .descriptionBox > *{color:#111111; width:100%; display:inline-block; font-size:18px; font-weight:400; word-break:break-all; margin:0px;} .container .body .contents.homeContainer .dcBody .detailView > .descriptionBox > h4{font-size:32px; font-weight:700; line-height:1.3;} .container .body .contents .dcBody .homeView .viewBox .homeBoard .transparent{background-color:transparent !important; border:none !important;} .container .body .contents.homeContainer .dcBody .detailView > .cardHolder{display:flex; gap:32px; justify-content:center;} .container .body .contents.homeContainer .dcBody .detailView > .cardHolder > .cardWrap{width:576px; display:flex; flex-direction:column; border-radius:10px; border:1px solid #DADDE2; background:#FFF; box-shadow:0px 5px 15px 0px rgba(0, 0, 0, 0.05);} .container .body .contents.homeContainer .dcBody .detailView > .cardHolder > .cardWrap > .imageBox{height:310px; width:100%; position:relative; border-radius:10px 10px 0 0;} .container .body .contents.homeContainer .dcBody .detailView > .cardHolder > .cardWrap > .imageBox.devicesImage{background:url(../img/common/device_card.png) no-repeat center; background-size:cover;} .container .body .contents.homeContainer .dcBody .detailView > .cardHolder > .cardWrap > .imageBox.workSpaceImage{background:url(../img/common/workspace_card.png) no-repeat center; background-size:cover;} .container .body .contents.homeContainer .dcBody .detailView > .cardHolder > .cardWrap > .imageBox > .badge{position:absolute; top:16px; right:18px; background:#354056; border-radius:100px; padding:4px 12px; color:#fff; font-size:14px;} .container .body .contents.homeContainer .dcBody .detailView > .cardHolder > .cardWrap > .textBox{display:flex; box-sizing:border-box; padding:32px 24px; flex-direction:column; gap:16px; min-height:160px; word-break:break-all;} .container .body .contents.homeContainer .dcBody .detailView > .cardHolder > .cardWrap > .textBox > h5{font-size:24px; font-weight:700; line-height:1.3;} .container .body .contents.homeContainer .dcBody .detailView > .cardHolder > .cardWrap > .textBox > p{font-size:16px; font-weight:400; line-height:1.4;} .container .body .contents.homeContainer .dcBody .detailView > .fmFooter{display:flex; justify-content:center; padding:24px 40px; box-sizing:border-box; flex-shrink:0; background:#fff; border:1px solid #DADDE2; border-radius:8px;} .container .body .contents.homeContainer .dcBody .detailView > .fmFooter > .startBox{display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px;} .container .body .contents.homeContainer .dcBody .detailView > .fmFooter{justify-content:center; gap:240px;} .container .body .contents.homeContainer .dcBody .detailView > .fmFooter > .startBox .button{width:320px;} .container .body .contents.homeContainer .dcBody .detailView > .fmFooter > .startBox > a {display: inline-flex;align-items: center;gap: 5px;font-size: 12px;font-weight: 500;} .container .body .contents.homeContainer .dcBody .detailView > .fmFooter > .startBox > a::after {width:12px;height:12px;content:"";background:url(../img/icon/ic_open.svg) no-repeat center;display:inline-block;background-size:contain;margin-top:3px;} .container .body .contents.homeContainer .dcBody .detailView > .fmFooter > .infoBox {display: flex;flex-direction: column;} .container .body .contents.homeContainer .dcBody .detailView > .fmFooter > .infoBox > * {display: inline-block;word-break: break-all;} .container .body .contents.homeContainer .dcBody .detailView > .fmFooter > .infoBox > span {color: #757575;font-weight: 400;font-size: 12px;} .container .body .contents.homeContainer .dcBody .detailView > .fmFooter > .infoBox > strong {color:#555;font-weight:500;font-size:16px;} .container .body .contents.homeContainer .dcBody .detailView > .fmFooter > .infoBox > .tertiary {width:175px; margin-top:12px; line-height:1;} .container .body .contents.homeContainer .dcBody .detailView > .fmFooter > .badgeBox {flex-grow:1; display:flex; align-items:center; gap:24px;} .container .body .contents.homeContainer .dcBody .detailView > .fmFooter > .badgeBox > .badge {display:flex; flex-direction: column; font-size: 12px; font-weight: 500; gap: 8px; align-items:center;} .container .body .contents.homeContainer .dcBody .detailView > .fmFooter > .badgeBox > * {display:inline-block;} .container .body .contents.homeContainer .dcBody .detailView > .fmFooter > .badgeBox > .badge > img {border-radius:8px; width:64px; height:64px;} .container .body .contents.homeContainer .dcBody .detailView > .fmFooter > .badgeBox > .badge > span {text-align:center;} /* hStep */ .hStep {display: flex; flex-direction: column; gap: 16px;} .hStep .stepBox {display: flex; flex-direction: row; width: auto; gap: 8px; align-items: center;} .hStep .stepBox .step {display: flex; justify-content: center; align-items: center; height: 36px; width: 36px; border-radius: 50%; background: #F5F6FA;} .hStep .stepBox .step.active {background: #262F44; color: #fff;} .hStep .stepBox .sheparator {height: 1px; max-width: 60px; background: #E8EBF0; width: 60px;} .hStep .textBox {display: flex; justify-content: center;} .hStep .textBox p {font-size: 18px; font-weight: 500; line-height: 25.2px; color: #111111; text-align: center;} /* startNowOne */ .startNowOne.modalBox .mbBody .mbBodyContents {display: flex; gap: 24px; flex-direction: column;} .startNowOne.modalBox .mbBody .mbBodyContents .article {gap: 12px;} .startNowOne.modalBox .mbBody .mbBodyContents .article .dlBox {display: flex; gap: 24px; flex-direction: column;} .startNowOne.modalBox .mbBody .mbBodyContents .article .dlBox dl {display: flex; flex-direction: column; margin: 0; gap: 12px;} .startNowOne.modalBox .mbBody .mbBodyContents .article .dlBox dl dt {display: flex; width: 100%;} .startNowOne.modalBox .mbBody .mbBodyContents .article .dlBox dl dd {display: flex; width: 100%;} .startNowOne.modalBox .mbBody .mbBodyContents .article .dlBox dl dd .selectWrap {width: 100%;} /* startNowTwo */ .startNowTwo.modalBox .mbBody .mbBodyContents {display: flex; gap: 24px; flex-direction: column;} .startNowTwo.modalBox .mbBody .mbBodyContents .article {gap: 12px;} .startNowTwo.modalBox .mbBody .mbBodyContents .article .dlBox {flex-direction: column; display: flex; gap: 24px;} .startNowTwo.modalBox .mbBody .mbBodyContents .article .dlBox dl {display: flex; flex-direction: column; margin: 0; gap: 12px;} .startNowTwo.modalBox .mbBody .mbBodyContents .article .dlBox dl dt {display: flex; width: 100%;} .startNowTwo.modalBox .mbBody .mbBodyContents .article .dlBox dl dd {display: flex; width: 100%;} .startNowTwo.modalBox .mbBody .mbBodyContents .article .dlBox dl dd .selectWrap {width: 100%;} .startNowTwo.modalBox .mbBody .mbBodyContents .article .dlBox dl dd .selectWrap textarea {padding: 15px; background-color: #fff;} /* startNowThree */ .startNowThree.modalBox .mbBody .mbBodyContents {display: flex; gap: 24px; flex-direction: column;} .startNowThree.modalBox .mbBody .mbBodyContents .article {gap: 12px;} .startNowThree.modalBox .mbBody .mbBodyContents .article .dlBox {flex-direction: column; display: flex; gap: 24px;} .startNowThree.modalBox .mbBody .mbBodyContents .article .dlBox dl {margin: 0; display: flex; gap: 24px;} .startNowThree.modalBox .mbBody .mbBodyContents .article .dlBox dl dt {display: flex; width: 152px; text-align: left; padding: 0;} .startNowThree.modalBox .mbBody .mbBodyContents .article .dlBox dl dd {width: calc(100% - 136px); font-size: 14px; font-weight: 400; line-height: 19.6px; color: #555;} /* home plartform administrator */ .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne {display: flex; flex-direction: column; gap: 16px; padding: 24px; box-sizing: border-box; word-wrap: wrap;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxHeader {display: flex; align-items: center; justify-content: space-between;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxHeader .headerTitleBox {display: flex; height: auto; width: auto;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxHeader .headerTitleBox strong {font-weight: 700; font-size: 20px; color: #333; align-items: center;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxHeader .viewBox {display: flex; height: auto; min-height: 36px; padding: 10px 10px 10px 16px; box-sizing: border-box; align-items: center; justify-content: center;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxHeader .viewBox a {display: flex; font-size: 14px; font-weight: 500; color: 300; align-items: center; padding: 0 16px 0 0;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxHeader .viewBox a::after {content: ""; background: url(../img/icon/ic_arrow_right.svg) no-repeat center; height: 16px; width: 16px; background-size: contain;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxBody {display: flex; gap: 16px; flex-wrap: wrap;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxBody .card {height: 200px; width: 200px; display: flex; border-radius: 10px; border: 1px solid #DADDE2; background: linear-gradient(198deg, #FFFEFF 18.23%, #F1F8FF 84.66%); padding: 10px; box-sizing: border-box; justify-content: space-between; flex-direction: column;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxBody .card strong {font-size: 20px; font-weight: 700; color: #4B5468;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxBody .card .bottomBox {display: flex; gap: 16px; justify-content: space-between; align-items: flex-end;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxBody .card .bottomBox .thumb {height: 80px; width: 80px; display: flex; border-radius: 18.8px; background: #fff; display: flex; align-items: center; justify-content: center; position: relative;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxBody .card .bottomBox .thumb.device:before {content: ""; height: 47.5px; width: 47.5px; display: flex; border-radius: 10px; transform: rotate( -14.223deg); background: linear-gradient(322deg, #5F6E8D 4.82%, #AEB6CB 95.18%); position: absolute;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxBody .card .bottomBox .thumb.device::after {content: ""; height: 43.75px; width: 43.75px; display: flex; border-radius: 10px; background: linear-gradient(316deg, rgba(0, 0, 0, 0.05) 4.29%, rgba(0, 0, 0, 0.00) 91.45%), rgba(202, 206, 216, 0.80); backdrop-filter: blur(2.5px); position: absolute; top: 26.87px; left: 25.62px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxBody .card .bottomBox .thumb.partner:before {content: ""; height: 47.5px; width: 47.5px; display: flex; border-radius: 10px; transform: rotate( -14.223deg); background: linear-gradient(322deg, #714EE8 4.82%, #A18DF2 75.41%); position: absolute;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxBody .card .bottomBox .thumb.partner::after {content: ""; height: 43.75px; width: 43.75px; display: flex; border-radius: 10px; background: rgba(217, 212, 249, 0.80); backdrop-filter: blur(2px); position: absolute; top: 26.87px; left: 25.62px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxBody .card .bottomBox .thumb.point:before {content: ""; height: 47.5px; width: 47.5px; display: flex; border-radius: 10px; transform: rotate( -14.223deg); background: linear-gradient(322deg, #5F6E8D 4.82%, #AEB6CB 95.18%); position: absolute;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxBody .card .bottomBox .thumb.point::after {content: ""; height: 43.75px; width: 43.75px; display: flex; border-radius: 10px; background: linear-gradient(316deg, rgba(0, 0, 0, 0.05) 4.29%, rgba(0, 0, 0, 0.00) 91.45%), rgba(202, 206, 216, 0.80); backdrop-filter: blur(2.5px); position: absolute; top: 26.87px; left: 25.62px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxBody .card .bottomBox .thumb.created:before {content: ""; height: 47.5px; width: 47.5px; display: flex; border-radius: 10px; transform: rotate( -14.223deg); background: linear-gradient(322deg, #2D9EAE 4.82%, #74D0DD 95.18%); position: absolute;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxBody .card .bottomBox .thumb.created::after {content: ""; height: 43.75px; width: 43.75px; display: flex; border-radius: 10px; background: linear-gradient(316deg, rgba(0, 0, 0, 0.05) 4.29%, rgba(0, 0, 0, 0.00) 91.45%), rgba(146, 238, 194, 0.80); backdrop-filter: blur(2px); position: absolute; top: 26.87px; left: 25.62px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxBody .card .bottomBox .thumb.license:before {content: ""; height: 47.5px; width: 47.5px; display: flex; border-radius: 10px; transform: rotate( -14.223deg); background: linear-gradient(322deg, #12B76A 4.82%, #32D583 95.18%); position: absolute;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxBody .card .bottomBox .thumb.license::after {content: ""; height: 43.75px; width: 43.75px; display: flex; border-radius: 10px; background: rgba(176, 211, 216, 0.80); backdrop-filter: blur(2.5px); position: absolute; top: 26.87px; left: 25.62px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxBody .card .bottomBox .thumb.device > .fb_x {display: flex; position: absolute; z-index: 1; height: 30px; width: 30px; background: url(../img/common/ic_device_fill.svg) no-repeat; background-size: contain; top: 33.75px; left: 32.5px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxBody .card .bottomBox .thumb.partner > .fb_x {display: flex; position: absolute; z-index: 1; height: 30px; width: 30px; background: url(../img/common/ic_partner_fill.svg) no-repeat; background-size: contain; top: 33.75px; left: 32.5px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxBody .card .bottomBox .thumb.created > .fb_x {display: flex; position: absolute; z-index: 1; height: 30px; width: 30px; background: url(../img/common/ic_create_fill.svg) no-repeat; background-size: contain; top: 33.75px; left: 32.5px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxBody .card .bottomBox .thumb.point > .fb_x {display: flex; position: absolute; z-index: 1; height: 30px; width: 30px; background: url(../img/common/ic_point_fill.svg) no-repeat; background-size: contain; top: 33.75px; left: 32.5px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxBody .card .bottomBox .thumb.license > .fb_x {display: flex; position: absolute; z-index: 1; height: 30px; width: 30px; background: url(../img/common/ic_license_fill.svg) no-repeat; background-size: contain; top: 33.75px; left: 32.5px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxOne .boxBody .card .bottomBox strong {text-align: center; font-size: 54px; font-weight: 700; color: #354056; height: auto; width: auto; line-height: 75.1pxs;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxTwo {display: flex; flex-direction: column; gap: 12px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxTwo .boxHeader {display: flex; flex-direction: row; justify-content: space-between;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxTwo .boxHeader strong {color: #333; font-size: 20px; font-weight: 700;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxTwo .boxHeader .linkMenu {border-radius: 6px; padding: 10px 10px 10px 16px; box-sizing: border-box; width: auto;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxTwo .boxHeader .linkMenu {font-size: 14px; font-weight: 500; background: #F5F6FA; display: flex; align-items: center;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxTwo .boxHeader .linkMenu a .open::before {content: ""; display: inline-block; background: url(../img/icon/ic_open.svg) no-repeat; height: 18px; width: 18px; background-position: center;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxTwo .boxBody .tableBoard {display: flex; flex-direction: column; gap: 12px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxTwo .boxBody .tableBoard .tableBoard .tbHeader .fb_ew .buttonWrap {gap: 8px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxTwo .boxBody .tableBoard .tbBody .tableWrap .jsmartable tbody tr td .tableDataBox {display: flex; align-items: center;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxTwo .boxBody .tableBoard .tbBody .tableWrap .jsmartable tbody tr td .file {display: flex; height: 18px; min-width: 20px; background: url(../img/icon/ic_file.svg) no-repeat;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxTwo .boxBody .tableBoard .tbBody .tableWrap .jsmartable tbody tr td .comment {display: flex; padding: 2px 9px 2px 25px; box-sizing: border-box; min-width: 40px; background: #E8EBF0; position: relative;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerOne.myCheck .sectionBody .boxTwo .boxBody .tableBoard .tbBody .tableWrap .jsmartable tbody tr td .comment::before {content: ""; display: flex; height: 18px; width: 18px; background: url(../img/icon/ic_chat_fill.svg) no-repeat center; position: absolute; left: 5px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxOne {display: flex; flex-direction: column; gap: 12px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxOne .boxHeader {display: flex; align-items: center; justify-content: space-between;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxOne .boxHeader .headerTitleBox {display: flex; height: auto; width: auto;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxOne .boxHeader .headerTitleBox strong {font-weight: 700; font-size: 20px; color: #333; align-items: center;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxOne .boxHeader .viewBox {display: flex; height: auto; min-height: 36px; padding: 10px 10px 10px 16px; box-sizing: border-box; align-items: center; justify-content: center;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxOne .boxHeader .viewBox a {display: flex; font-size: 14px; font-weight: 500; color: 300; align-items: center;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxOne .boxHeader .viewBox a::after {content: ""; background: url(../img/icon/ic_arrow_right.svg) no-repeat center; height: 16px; width: 16px; background-size: contain;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxOne .boxBody {display: flex; gap: 16px; flex-direction: row; flex-shrink: 1; flex-wrap: wrap;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxOne .boxBody .cardBox {height: 200px; width: 330px; padding: 20px; box-sizing: border-box; border-radius: 10px; display: flex; flex-direction: column; gap: auto; border: 1px solid #DADDE2;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxOne .boxBody .cardBox .cardHeader {display: flex; flex-direction: column; gap: 12px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxOne .boxBody .cardBox .cardHeader strong {display: flex; font-weight: 700; font-size: 18px; color: #4B5468;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxOne .boxBody .cardBox .cardBody {display: flex; flex-direction: row; justify-content: flex-end; height: 44px; margin: auto 0 0 0 ;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxOne .boxBody .cardBox .cardBody strong {display: flex; font-weight: 700; font-size: 48px; color: #4B5468;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxOne .boxBody .cardBox .cardHeader .batchBox {display: flex; gap: 8px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxOne .boxBody .cardBox .cardHeader .batchBox button {border-radius: 100px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxTwo {display: flex; flex-direction: column; gap: 12px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxTwo .boxHeader {display: flex; align-items: center; justify-content: space-between;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxTwo .boxHeader .headerTitleBox {display: flex; height: auto; width: auto;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxTwo .boxHeader .headerTitleBox strong {font-weight: 700; font-size: 20px; color: #333; align-items: center;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxTwo .boxHeader .viewBox {display: flex; height: auto; min-height: 36px; padding: 10px 10px 10px 16px; box-sizing: border-box; align-items: center; justify-content: center;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxTwo .boxHeader .viewBox a {display: flex; font-size: 14px; font-weight: 500; color: 300; align-items: center;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxTwo .boxHeader .viewBox a::after {content: ""; background: url(../img/icon/ic_arrow_right.svg) no-repeat center; height: 16px; width: 16px; background-size: contain;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxTwo .boxBody {display: flex; flex-wrap: wrap; gap: 20px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxTwo .boxBody .leftBox {display: flex; box-sizing: border-box; padding: 0 0 0 20px; width: 424px; box-sizing: border-box;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxTwo .boxBody .leftBox ul {list-style-type: circle; display: flex; flex-direction: column; gap: 16px; width: 100%;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxTwo .boxBody .leftBox ul li .fb_ew strong {font-size: 18px; font-weight: 400; color: #333;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxTwo .boxBody .leftBox ul li .fb_ew span {font-size: 20px; font-weight: 700; color: #333; position: relative; padding: 0 25px 0 0; box-sizing: border-box;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxTwo .boxBody .leftBox ul li .fb_ew span::after {content: ""; background: url(../img/icon/ic_arrow_right.svg) no-repeat center; height: 16px; width: 16px; background-size: contain; position: absolute;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxTwo .boxBody .rightBox {display: flex; flex-direction: column; box-sizing: border-box; padding: 24px; gap: 12px; background-color: #F5F6FA; border: 1px solid #DADDE2; border-radius: 10px; width: 424px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxTwo .boxBody .rightBox .rightHeader {display: flex; align-items: center;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxTwo .boxBody .rightBox .rightHeader strong {color: #4B5468; font-size: 18px; font-weight: 700;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxTwo .boxBody .rightBox .rightBody {display: flex;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxTwo .boxBody .rightBox .rightBody ul {display: flex; padding: 0; margin: 0; flex-direction: column; width: 100%;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxTwo .boxBody .rightBox .rightBody ul li {display: flex; width: 100%; min-height: 30px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxTwo .boxBody .rightBox .rightBody ul li .fb_ew {display: flex; height: 100%; justify-content: space-between; align-items: center; width: 100%;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainerTwo.statusContainer .sectionBody .boxTwo .boxBody .rightBox .rightBody strong {color: #333; font-size: 18px; font-weight: 400;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer.devices .sectionBody {display: flex; width: 100%; padding: 24px; box-sizing: border-box; background: #fff; flex-direction: column; gap: 16px; border-radius: 10px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer.devices .sectionBody .boxHeader {display: flex; align-items: center; justify-content: space-between;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer.devices .sectionBody .boxHeader .headerTitleBox {display: flex; height: auto; width: auto;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer.devices .sectionBody .boxHeader .headerTitleBox strong {font-weight: 700; font-size: 20px; color: #333; align-items: center;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer.devices .sectionBody .boxHeader .viewBox {display: flex; height: auto; min-height: 36px; padding: 10px 10px 10px 16px; box-sizing: border-box; align-items: center; justify-content: center;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer.devices .sectionBody .boxHeader .viewBox a {display: flex; font-size: 14px; font-weight: 500; color: 300; align-items: center;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer.devices .sectionBody .boxHeader .viewBox a::after {content: ""; background: url(../img/icon/ic_arrow_right.svg) no-repeat center; height: 16px; width: 16px; background-size: contain;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer.devices .sectionBody .bodyBox {display: flex; flex-direction: column; gap: 8px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer.devices .sectionBody .bodyBox .bodyBoxTop {display: flex; justify-content: flex-start;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer.devices .sectionBody .bodyBox .bodyBoxTop dl {display: flex; gap: 5px;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer.devices .sectionBody .bodyBox .bodyBoxTop dl dt {color: #333; font-size: 12px; font-weight: 409;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer.devices .sectionBody .bodyBox .bodyBoxTop dl dd {color: #333; font-size: 12px; font-weight: 409;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer.devices .sectionBody .bodyBox .bodyBoxBottom {display: flex; justify-content: center; gap: 32px; flex-wrap: wrap;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer.devices .sectionBody .bodyBox .bodyBoxBottom .bodyContent {width: 112px; height: auto; display: flex; justify-content: center; gap: 8px; flex-direction: column; align-items: center;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer.devices .sectionBody .bodyBox .bodyBoxBottom .bodyContent .top {width: 84.1px; height: 84.1px; display: flex; justify-content: center; align-items: center; border-radius: 10px; background: #DADEE2; align-items: center;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer.devices .sectionBody .bodyBox .bodyBoxBottom .bodyContent .signage::before {content: ""; height: 46.667px; width: 46.667px; background: url(../img/common/ic_signage.svg) no-repeat; background-size: contain;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer.devices .sectionBody .bodyBox .bodyBoxBottom .bodyContent .tv::before {content: ""; height: 46.667px; width: 46.667px; background: url(../img/common/ic_tv.svg) no-repeat; background-size: contain;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer.devices .sectionBody .bodyBox .bodyBoxBottom .bodyContent .bottomBox {display: flex; flex-direction: column; justify-content: center; align-items: center;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer.devices .sectionBody .bodyBox .bodyBoxBottom .bodyContent .bottomBox div {display: flex; width: 100%; justify-content: center; align-items: center;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer.devices .sectionBody .bodyBox .bodyBoxBottom .bodyContent .bottomBox div strong {font-size: 18px; font-weight: 700; color: #333;} .container .body .contents.homeContainer .dcBody .detailView .sectionContainer.devices .sectionBody .bodyBox .bodyBoxBottom .bodyContent .bottomBox div strong {font-size: 14px; font-weight: 00; color: #555;} /* home UI two */ .homeContainer.homeContainerTwo {} .homeContainer.homeContainerTwo .dcBody .detailView {} .homeContainer.homeContainerTwo .dcBody .box {display: flex; flex-direction: column;} .homeContainer.homeContainerTwo .dcBody .box.boxOne {display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; gap: 16px;} .homeContainer.homeContainerTwo .dcBody .box.boxOne > div {display: flex; flex-direction: column; gap: 16px; width: calc(50% - 8px);} .homeContainer.homeContainerTwo .dcBody .box.boxOne > div .boxHeader {display: flex;} .homeContainer.homeContainerTwo .dcBody .box.boxOne > div .boxHeader strong {font-size: 20px; font-weight: 700; line-height: 26px; color: #111;} .homeContainer.homeContainerTwo .dcBody .box.boxOne > div .boxBody {display: flex; flex-direction: row; gap: 12px; background: #fff;} .homeContainer.homeContainerTwo .dcBody .box.boxOne > div .boxBody .hCard {display: flex; flex-direction: row; padding: 16px 24px; box-sizing: border-box; gap: 16px; border-radius: 10px; background: #fff;} .homeContainer.homeContainerTwo .dcBody .box.boxOne > div .boxBody .hCard .thumbBox {display: flex; flex-direction: row; height: 72px; width: 72px; border-radius: 8px;} .homeContainer.homeContainerTwo .dcBody .box.boxOne > div .boxBody .hCard .thumbBox.workspace {border-radius: 8px; background: linear-gradient(323deg, rgba(146, 170, 255, 0.49) 0%, rgba(177, 236, 255, 0.33) 100%);} .homeContainer.homeContainerTwo .dcBody .box.boxOne > div .boxBody .hCard .textBox {display: flex; flex-direction: column;} .homeContainer.homeContainerTwo .dcBody .box.boxOne > div .boxBody .hCard .textBox strong {display: flex; font-size: 18px; font-weight: 700; line-height: 23.4px;} .homeContainer.homeContainerTwo .dcBody .box.boxOne > div .boxBody .hCard .textBox strong {display: flex; font-size: 14px; font-weight: 400; line-height: 19.6px; color: #555;} .bulStatus {display:inline-flex; align-items:center;} .bulStatus::before {content: '';display: block;width: 8px;min-width: 8px;height: 8px;border: 1px solid #fff;border-radius: 50%;margin: 0 4px 0 0;} .bulStatus.playing::before {background:#3A02B2;} .bulStatus.noSignal::before {background:#4B5468;} .bulStatus.powerOff::before {background:#BEC2CB;} .bulStatus.screenOff::before {background:#848C9D;} .bulStatus.notRegistered::before {background:#DADDE2;} .bulStatus.activated::before {background:#34889f;} .bulStatus.inactivated::before{background:#e2e2e2;} .container .body .contents.homeContainer .dcBody .detailView .block > .section > .sectionBody > .licenseInfoBox{display:flex; align-items:center; gap:24px; justify-content:space-between;} .container .body .contents.homeContainer .dcBody .detailView .block > .section > .sectionBody > .licenseInfoBox > .infoBox{display:flex; flex-direction:column; align-items:flex-end; width:190px; text-align:right; flex-grow:1;} .container .body .contents.homeContainer .dcBody .detailView .block > .section > .sectionBody > .licenseInfoBox > .infoBox > a{min-width:unset;} .container .body .contents.homeContainer .dcBody .detailView .block > .section > .sectionBody > .licenseInfoBox > .infoBox > a > .open{height:18px; width:18px; margin-left:4px;} .container .body .contents.homeContainer .dcBody .detailView .block > .section > .sectionBody > .licenseInfoBox > .badgeWrapper{display:flex; flex-direction:row; gap:12px;} .container .body .contents.homeContainer .dcBody .detailView .block > .section > .sectionBody > .licenseInfoBox > .badgeWrapper > h5{margin:0px; font-size:12px; font-weight:700; min-width: 62px;} .container .body .contents.homeContainer .dcBody .detailView .block > .section > .sectionBody > .licenseInfoBox > .badgeWrapper > .badgeBox{flex-grow:1; display:flex; align-items:center; gap:16px;} .container .body .contents.homeContainer .dcBody .detailView .block > .section > .sectionBody > .licenseInfoBox > .badgeWrapper:nth-child(1){padding-right:24px;} .container .body .contents.homeContainer .dcBody .detailView .block > .section > .sectionBody > .licenseInfoBox > .badgeWrapper:nth-child(2){padding-left:24px; border-left:1px solid #DADDE2;} .container .body .contents.homeContainer .dcBody .detailView .block > .section > .sectionBody > .licenseInfoBox > .badgeWrapper > .badgeBox .badges {position:relative; display:flex; font-size:12px; font-weight:500; gap:8px; align-items:center; flex-direction:column; width:61px;} .container .body .contents.homeContainer .dcBody .detailView .block > .section > .sectionBody > .licenseInfoBox > .badgeWrapper > .badgeBox .badges > img{width:54px; height:54px; border-radius:8px;} .container .body .contents.homeContainer .dcBody .detailView .block > .section > .sectionBody > .licenseInfoBox > .badgeWrapper > .badgeBox .badges > a{gap:4px; display:inline-flex; align-items:center; text-align:center; justify-content:center; color:#fff; position:absolute; height:54px; width:54px; color:#fff; z-index:5; background:rgba(0, 0, 0, 0.40); border-radius:8px; font-size:10px; flex-direction:column; padding:0 5px; box-sizing:border-box; line-height:1.2;} .container .body .contents.homeContainer .dcBody .detailView .block > .section > .sectionBody > .licenseInfoBox > .badgeWrapper > .badgeBox .badges > a > i{background:url(../img/icon/ic_open.svg) no-repeat; width:18px; height:18px; display:inline-block; filter: invert(1);} /* progress bar */ .circularProgress {display: flex; flex-direction: column; position: relative;} .circularProgress.small {height: 54px; width: 54px; gap: 8px;} .circularProgress.small .circularProgressbar {display: flex; align-items: center; justify-content: center;} .circularProgress.small .circularProgressbar .progress-bar { width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(closest-side, white 79%, transparent 80% 100%), conic-gradient(#000 30%, #DADDE2 0);} .circularProgress.small .circularProgressbar .progressText {display: flex; justify-content: center; flex-wrap: wrap;} .circularProgress.small .circularProgressbar .progressText span {font-size: 14px; font-weight: 400; line-height: 19.6; color: #333; word-wrap: break-word;} .circularProgress.small {height: 54px; width: 54px; gap: 8px;} .circularProgress.small .circularProgressbar {display: flex; align-items: center; justify-content: center;} .circularProgress.small .circularProgressbar .progress-bar { width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(closest-side, white 79%, transparent 80% 100%), conic-gradient(#000 30%, #DADDE2 0);} .circularProgress.small .circularProgressbar .progressText {display: flex; justify-content: center; flex-wrap: wrap;} .circularProgress.small .circularProgressbar .progressText span {font-size: 14px; font-weight: 400; line-height: 19.6; color: #333; word-wrap: break-word;} /* home plartform admin */ .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus {display: flex; gap: 16px; flex-direction: column;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessHeader {display: flex;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessHeader strong {color: #111; font-size: 20px; font-weight: 700; line-height: 26px;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody {display: flex; flex-wrap: wrap; gap: 14px;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card {display: flex; padding: 20px; border-radius: 10px; border: 1px solid #DADDE2; background: linear-gradient(#FFFEFF, #F1F8FF); box-sizing: border-box; height: 200px; width: 358px; flex-direction: column; justify-content: space-between; position: relative;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardHeader {display: flex;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardHeader strong {color: #4B5468; font-size: 20px; font-style: 700; line-height: 26px;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody {display: flex; gap: 16px;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .left {height: 80px; width: 80px; border-radius: 15px; display: flex; background-color: #fff;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .left .thumb {height: 80px; width: 80px; display: flex; border-radius: 18.8px; background: #fff; display: flex; align-items: center; justify-content: center; position: relative;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .left.workspace .thumb:before {content: ""; height: 47.5px; width: 47.5px; display: flex; border-radius: 10px; transform: rotate( -14.223deg); background: linear-gradient(322deg, #2250C6 4.82%, #83A5FF 95.18%); position: absolute;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .left.workspace .thumb::after {content: ""; height: 43.75px; width: 43.75px; display: flex; border-radius: 10px; background: rgba(160, 181, 235, 0.80); backdrop-filter: blur(2px); backdrop-filter: blur(2.5px); position: absolute; top: 26.87px; left: 25.62px;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .left.members .thumb:before {content: ""; height: 47.5px; width: 47.5px; display: flex; border-radius: 10px; transform: rotate( -14.223deg); background: linear-gradient(322deg, #714EE8 4.82%, #A18DF2 75.41%); position: absolute;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .left.members .thumb::after {content: ""; height: 43.75px; width: 43.75px; display: flex; border-radius: 10px; background: rgba(217, 212, 249, 0.80); backdrop-filter: blur(2px); position: absolute; top: 26.87px; left: 25.62px;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .left.assignedLicense .thumb:before {content: ""; height: 47.5px; width: 47.5px; display: flex; border-radius: 10px; transform: rotate( -14.223deg); background: linear-gradient(322deg, #2D9EAE 4.82%, #74D0DD 95.18%); position: absolute;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .left.assignedLicense .thumb::after {content: ""; height: 43.75px; width: 43.75px; display: flex; border-radius: 10px; background: rgba(176, 211, 216, 0.80); backdrop-filter: blur(2.5px); position: absolute; top: 26.87px; left: 25.62px;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .left.availablePoints .thumb:before {content: ""; height: 47.5px; width: 47.5px; display: flex; border-radius: 10px; transform: rotate( -14.223deg); background: linear-gradient(322deg, #FB7800 4.82%, #FFC948 95.18%); position: absolute;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .left.availablePoints .thumb::after {content: ""; height: 43.75px; width: 43.75px; display: flex; border-radius: 10px; background: linear-gradient(316deg, rgba(0, 0, 0, 0.05) 4.29%, rgba(0, 0, 0, 0.00) 91.45%), rgba(255, 214, 159, 0.80); backdrop-filter: blur(2px); position: absolute; top: 26.87px; left: 25.62px;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .left.totalDevice .thumb:before {content: ""; height: 47.5px; width: 47.5px; display: flex; border-radius: 10px; transform: rotate( -14.223deg); background: linear-gradient(319deg, rgba(51, 148, 219, 1.00) 2.72%, #81CAFF 97.28%), linear-gradient(322deg, #5F6E8D 4.82%, #AEB6CB 95.18%);} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .left.totalDevice .thumb::after {content: ""; height: 43.75px; width: 43.75px; display: flex; border-radius: 10px; background: rgba(175, 208, 233, 0.80); backdrop-filter: blur(2.5px); position: absolute; top: 26.87px; left: 25.62px;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .left.workspace .thumb .box {display: flex; position: absolute; z-index: 1; height: 30px; width: 30px; background: url(../img/icon/ic_workspace_fill.svg) no-repeat; background-size: contain; top: 33.75px; left: 32.5px;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .left.members .thumb .box {display: flex; position: absolute; z-index: 1; height: 30px; width: 30px; background: url(../img/common/ic_partner_fill.svg) no-repeat; background-size: contain; top: 33.75px; left: 32.5px;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .left.assignedLicense .thumb .box {display: flex; position: absolute; z-index: 1; height: 30px; width: 30px; background: url(../img/common/ic_license_fill.svg) no-repeat; background-size: contain; top: 33.75px; left: 32.5px;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .left.availablePoints .thumb .box {display: flex; position: absolute; z-index: 1; height: 30px; width: 30px; background: url(../img/common/ic_point_fill.svg) no-repeat; background-size: contain; top: 33.75px; left: 32.5px;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .left.totalDevice .thumb .box {display: flex; position: absolute; z-index: 1; height: 30px; width: 30px; background: url(../img/common/ic_device_fill.svg) no-repeat; background-size: contain; top: 33.75px; left: 32.5px;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .right {width: calc(100% - 96px); justify-content: flex-end; display: flex;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .right .progressBar {display: flex; height: 8px; width: 180px; max-width: 100%; background: #DADDE2; position: relative; min-height: 8px; border-radius: 10px; overflow: hidden;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .right .progressBar .progress {display: flex; height: 100%; background: #354056; margin: 0 !important;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .right .progressBar > .progress::after {display: none;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .right span {font-size: 54px; font-weight: 700; color: #354056; line-height: normal;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .right.progressBox {display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .right.progressBox .textBox {display: flex; justify-content: flex-end;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .cardBody .right p {font-size: 24px; font-weight: 700; color: #354056; line-height: normal;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .tooltip {position: absolute; z-index: 1; background-color: #354056; color: #fff; padding: 6px 10px; width: 293px; max-width: 100%; top: calc(100% + 6px); border-radius: 4px; align-items: flex-start; display: flex; flex-wrap: wrap; text-align: center; justify-content: center;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .tooltip p {font-size: 14px; word-break: break-word; font-weight: 400; line-height: normal; text-align: center; font-weight: 400;} .container .body .contents.homeContainer .dcBody .detailView .block.businessStatus .businessBody .card .tooltip::before {content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid #354056; position: absolute; z-index: 2; top: -5px;} .container .body .contents.homeContainer .dcBody .detailView .block.tableSection {display: flex;} .container .body .contents.homeContainer .dcBody .detailView .block.tableSection .tableBoard {width: 100%; flex-basis: unset; gap: 12px;} .container .body .contents.homeContainer .dcBody .detailView .block.tableSection .tableBoard .workSpaceTable table .iconsBox {display: flex; flex-direction: row; gap: 8px; justify-content:center;} .container .body .contents.homeContainer .dcBody .detailView .block.tableSection .tableBoard .workSpaceTable table .iconsBox > .icons{height:36px; width:36px; display: flex; position:relative;} .container .body .contents.homeContainer .dcBody .detailView .block.tableSection .tableBoard .workSpaceTable table .iconsBox > .icons > i.info{display: block; height:18px; line-height:18px; text-align:center; font-size:11px; font-weight:bold; padding:0 4px; background:#a50034; border-radius:20px; color:#fff; position:absolute; top:-4px; right:-16px;} .container .body .contents.homeContainer .dcBody .detailView .block.tableSection .tableBoard .workSpaceTable table .iconsBox > .icons.supersign{background:url(../img/icon/ic_supersign.svg) no-repeat;} .container .body .contents.homeContainer .dcBody .detailView .block.tableSection .tableBoard .workSpaceTable table .iconsBox > .icons.procentric{background:url(../img/icon/ic_procentric.svg) no-repeat;} .container .body .contents.homeContainer .dcBody .detailView .block.tableSection .tableBoard .tbHeader {display: flex; flex-wrap: wrap;} .container .body .contents.homeContainer .dcBody .detailView .block.tableSection .tableBoard .tbHeader .toolBox {display: flex; gap: 16px; align-items: center; flex-wrap: wrap;} .container .body .contents.homeContainer .dcBody .detailView .block.tableSection .tableBoard .tbHeader .toolBox strong {font-size: 20px; font-weight: 700; color: #111;} .container .body .contents.homeContainer .dcBody .detailView .block.tableSection .tableBoard .tbHeader .toolBox a {font-size: 12px; font-weight: 500; color: #111;} .container .body .contents.homeContainer .dcBody .detailView .block.tableSection .tableBoard .tbHeader .toolBox .totalBox {display: flex; align-items: center; gap: 7px;} .container .body .contents.homeContainer .dcBody .detailView .block.tableSection .tableBoard .tbHeader .toolBox .totalBox em {font-weight: 700;} .container .body .contents.homeContainer .dcBody .detailView .block.tableSection .tableBoard .tbBody {background: #fff; padding: 24px; box-sizing: border-box; border-radius: 10px;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox.partnerCenterRegisterMhapp dl {display: flex; flex-direction: column; width: 100%; margin: 0;} .popupLicense .modalBox .mbBody .mbBodyContents.registerMyApp {padding: 24px;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .screenshotUpload .ssBox {height: auto; min-height: 80px; width: calc(100% - 2px); margin: 5px 0; border: solid 1px #d0d1d2; flex-wrap: wrap;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .screenshotUpload .ssBox .slNo {height: 16px; width: 20px; margin: 15px;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .screenshotUpload .ssBox .ssThumb {width: 116px; height: 70px; margin: 5px; background-color: #d9d9d9;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .screenshotUpload .ssBox .nameWrap {display: flex; flex-direction: row; width: auto; flex-wrap: wrap;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .screenshotUpload .ssBox .ssName {font-size: 16px; width: auto; word-break: break-word; margin: auto 23px; height: auto; display: block; padding: 5px 0;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .screenshotUpload .ssBox .ssSize {width: auto; height: auto; word-break: break-word; display: flex; align-items: center; overflow-y: hidden;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .screenshotUpload .ssBox .fb_y {display: flex; width: auto;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .screenshotUpload .ssBox .ssUpDownButtons {margin: auto; width: auto; display: flex; align-items: center;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .screenshotUpload .ssBox .ssUpDownButtons .button {margin: auto 5px;} .popupLicense .modalBox .mbBody .mbBodyContents.registerMyAppOne.registerMyApp .article .dlBoxGroup dl {display: flex; margin: 0; flex-direction: column; width: 100%; gap: 12px;} .popupLicense .modalBox .mbBody .mbBodyContents.registerMyAppOne.registerMyApp .article .dlBoxGroup dl dt {display: flex; margin: 0; flex-direction: column; width: 100%;} .popupLicense .modalBox .mbBody .mbBodyContents.registerMyAppOne.registerMyApp .article .dlBoxGroup dl dd {display: flex; margin: 0; flex-direction: column; width: 100%;} .popupLicense .modalBox .mbBody .mbBodyContents.registerMyAppOne.registerMyApp .article .dlBoxGroup .screenshotUpload .ssBox .slNo {margin: 10px; height: auto; width: auto;} .popupLicense .modalBox .mbBody .mbBodyContents.registerMyAppOne.registerMyApp {padding: 24px;} /* webOS 01 */ .popupLicense.webOSApp .mbBody .mbBodyContents .article .dlBox dl {margin: 0; display: flex; flex-direction: column; gap: 12px; width: 100%;} .popupLicense.webOSApp .mbBody .mbBodyContents .article .dlBox dl dt {display: flex; width: 100%;} .popupLicense.webOSApp .mbBody .mbBodyContents .article .dlBox dl dd {display: flex; width: 100%; display: flex; flex-direction: column; gap: 12px; align-items: flex-start;} .popupLicense.webOSApp .mbBody .mbBodyContents .article .dlBoxGroup .dlBox > dl > dd .logoUploadDiv {width: 134px; border-radius: 6pxG; height: 134px;} /* .popupLicense.webOSApp .mbBody .mbBodyContents .article .dlBoxGroup .dlBox > dl > dd button {} */ .popupLicense.webOSApp.webOSThreePopup .mbBody .mbBodyContents .article .dlBox dl dt {display: flex; gap: 24px;} /* step 4 */ .popupLicense.creatingBusinessSiteFour .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .sectionConfirm {background: #fff;} .popupLicense.creatingBusinessSiteFour.approvalLicense .modalBox .mbBody .mbBodyContents .article .dlBox dl {display: flex; flex-direction: column; gap: 4px; padding: 0px; width: 320px; margin: 0;} .popupLicense.creatingBusinessSiteFour.approvalLicense .modalBox .mbBody .mbBodyContents .article .dlBox dl.attachedFile {display: flex; flex-direction: column; width: 100%; gap: 12px;} .popupLicense.creatingBusinessSiteFour.approvalLicense .modalBox .mbBody .mbBodyContents .article .dlBox dl.attachedFile .fileDownload {width: 100%; max-width: unset; align-items: flex-start;} .popupLicense.creatingBusinessSiteFour.approvalLicense .modalBox .mbBody .mbBodyContents .article .dlBox dl.attachedFile .fileDownload .downloadFileBox {width: 100%; margin: 0;} .popupLicense.creatingBusinessSiteFour.approvalLicense .modalBox .mbBody .mbBodyContents .article .dlBox dl.attachedFile .fileDownload .downloadFileBox.fb_ew button {width: 36px;} .popupLicense.creatingBusinessSiteFour.approvalLicense .modalBox .mbBody .mbBodyContents .article .dlBox dl.attachedFile .fileDownload .buttonWrap {padding: 0; margin-bottom: 12px;} .popupLicense.creatingBusinessSiteFour.approvalLicense .modalBox .mbBody .mbBodyContents .article .dlBox dl dt {display: flex; text-align: left; font-size: 14px; font-weight: 500; color: #333; width: 100%;} .popupLicense.creatingBusinessSiteFour.approvalLicense .modalBox .mbBody .mbBodyContents .article .dlBox dl dd {display: flex; text-align: left; font-size: 14px; font-weight: 400; color: #555; width: 100%;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .sectionConfirm {display: flex; flex-wrap: wrap; flex-direction: column; padding: 0; gap: 16px;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .sectionConfirm .bodyBox {display: flex; flex-wrap: wrap; gap: 15px;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .sectionConfirm .bodyBox .subBodyBox { gap: 15px; display: flex; flex-direction: column;} .popupLicense .modalBox .mbBody .mbBodyContents .article .dlBoxGroup .dlBox .confirmBox .sectionConfirm .textWrap.fb_y {margin: 24px 0;} /* home page 3 */ .container .body .contents.homeContainer .dcBody .detailView .block.tableSection .tableBoard table td > .noWorkListItem {display: flex; gap: 12px; flex-direction: column;} .container .body .contents.homeContainer .dcBody .detailView .block.tableSection .tableBoard table td > .noWorkListItem .textWrap p {font-size: 14px; font-weight: 400; line-height: normal; text-align: center;} .container .body .contents.homeContainer .dcBody .detailView .block.tableSection .tableBoard table td > .noWorkListItem .buttonWrap {display: flex; padding: 0 0 8px 0; box-sizing: border-box; width: 100%; justify-content: center;} /* autoplay */ .autoplay{position:fixed; right:73px; width:385px; height:576px; top:140px;} .autoplay > video{width:100%; height:100%;} /* device board */ .container .body .contents .dcBody .viewBox .contentBoard .boardTitle > .serviceBox{display:flex; align-items:center; gap:7px; padding:12px 16px; background:#F5F6FA; border-radius:4px;} .container .body .contents .dcBody .viewBox .contentBoard .boardTitle > .serviceBox > .iconsBox{display:flex; gap:7px; align-items:center;} .container .body .contents .dcBody .viewBox .contentBoard .boardTitle > .serviceBox > .iconsBox span{width:28px; height:28px; font-size:0px; display:inline-block; border-radius:4px;} .container .body .contents .dcBody .viewBox .contentBoard .boardTitle > .serviceBox > .iconsBox span.supersign{background:url(../img/icon/ic_supersign.svg) no-repeat center;} .container .body .contents .dcBody .viewBox .contentBoard .boardTitle > .serviceBox > .iconsBox span.procentric{background:url(../img/icon/ic_procentric.svg) no-repeat center;} .container .body .contents .dcBody .viewBox .contentBoard .boardTitle > .serviceBox > strong{font-size:14px; font-weight:500; color:#333333; display:inline-flex; align-items:center; gap:7px; padding-right:7px;} .container .body .contents .dcBody .viewBox .contentBoard .boardTitle > .serviceBox > strong::before{width:8px; height:8px; border-radius:50%; background:#1D828F; content:"";} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .tableBoard .tbHeader > div .toolBox:nth-child(2) > .totalBox em{border:none;} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .hiddenTools{display:none; align-items:center; gap:8px;} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .hiddenTools .breadcrumb ul li {font-weight: 500; display: contents; vertical-align: middle; font-size: 16px; color: #333; letter-spacing: -0.6px; word-break: break-all;} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .boardTitle{align-items:center;} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .boardTitle > .title{flex-direction:column; gap:8px; align-items:flex-start;} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .boardTitle > .title h4{margin:0px;} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .boardTitle > .title > ul{border:none; padding:0px; display:flex; gap:4px;} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .boardTitle > .title > ul > li{font-weight:400; font-size:14px;} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .boardTitle > .title > ul > li:nth-child(2){font-weight:700; color:#333333;} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .boardTitle > .title > ul > li:nth-child(2)::before{content:">"; display:inline-flex; align-items:center; padding:0 4px;} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .tableBoard .tbHeader > div{display:flex; align-items:center; gap:12px;} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .tableBoard .tbBody table thead tr th .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .tableBoard .tbBody table tbody tr td{text-align:left !important;} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .tableBoard .tbBody table tbody tr td:nth-child(2) div{display:flex; flex-direction:column;} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .tableBoard .tbBody table tbody tr td:nth-child(2) div > .warn{font-size:14px; font-weight:normal; color:#D92D20; word-break:break-word; display:inline-block;} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .tableBoard .tbBody table tbody tr td:nth-child(3) .alert{display:flex; align-items:center; width:auto; font-size:14px; color:#333; flex-wrap:wrap;} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .tableBoard .tbBody table tbody tr td:nth-child(3) .alert::before{width:18px; height:18px;} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .tableBoard .tbBody table tbody .noData{width:100%; height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:24px;} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .tableBoard .tbBody table tbody .noData img{width:800px; height:480px;} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .tableBoard{flex-grow:1; height:unset; overflow: auto;} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .tableBoard .tbBody{overflow:auto;} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .tableBoard .tbBody .tableWrap{height:100%;} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .tableBoard .no-data{height:calc(100% - 56px); width:100%; display:flex; align-items:center; justify-content:center; gap:24px; flex-direction: column;} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .tableBoard .no-data img{height:90%; width:100%; object-fit:contain;} .container .body .contents .dcBody .viewBox .contentBoard.deviceContentBoard .tableBoard .no-data strong{display:inline-block; text-align:center; word-break:break-all; font-size:14px; color:#333;} /* sign-out */ i.sign-out{display:inline-flex; background:url(../img/icon/ic_sign_out.svg) center no-repeat; height:18px; width:18px;} i.profile{display:inline-flex; background:url(../img/icon/ic_open.svg) center no-repeat; height:18px; width:18px;} .roleModal .mbHeader{padding:46px 48px; border-bottom:1px solid #D5D7DD;} .roleModal .mbHeader .title {gap:20px;} .roleModal .mbHeader .title h2{font-size:32px; font-style:normal; font-weight:700; line-height:130%;} .roleModal .mbHeader .title .divider{width:1px; height:28px; background:#D5D7DD;} .roleModal .mbHeader .title strong{font-size:32px; font-style:normal; font-weight:400; line-height:130%;} .roleModal .mbBody .mbBodyContents .infoBox{padding:48px 24px 24px; width:100%; box-sizing:border-box; display:flex; flex-direction:column; gap:24px;} .roleModal .mbBody .mbBodyContents .infoBox > .section{display:flex; flex-direction:column; gap:16px;} .roleModal .mbBody .mbBodyContents .infoBox > .section:nth-child(1){border-bottom:1px solid #E3E5E8; padding-bottom:24px;} .roleModal .mbBody .mbBodyContents .infoBox > .section > .sectionHeader{display:flex; align-items:center; gap:8px;} .roleModal .mbBody .mbBodyContents .infoBox > .section > .sectionHeader > h3{color:#17191C; font-size: 24px; font-style: normal; font-weight: 700; line-height: 130%;} .roleModal .mbBody .mbBodyContents .infoBox > .section > .sectionHeader > strong{color:#17191C; font-size: 24px; font-style: normal; font-weight:400; line-height: 130%;} .roleModal .mbBody .mbBodyContents .infoBox > .section > .sectionHeader > .divider{width:1px; height:20px; background:#D5D7DD;} .roleModal .mbBody .mbBodyContents .infoBox > .section > ul{display:flex; flex-direction:column; gap:4px;} .roleModal .mbBody .mbBodyContents .infoBox > .section > ul > li{position:relative; color:#5C6370;font-size:14px;font-style:normal;font-weight:400;line-height:140%; word-break:break-word; padding-left:10px; display:flex; align-items:center;} .roleModal .mbBody .mbBodyContents .infoBox > .section > ul > li::before{background:#5C6370; width:4px; height:4px; content:""; border-radius:50%; position:absolute; left:0px; top:12px;} /* bubble popup */ .bubblePopup {border-bottom: 1px solid var(--neutral-10-white, #FFF); background: var(--secondary-90, #262F44); width: 100%; z-index: 99; top: 0; display: flex; justify-content: center; align-items: center; position: absolute; padding: 12px; box-sizing: border-box; min-height: 40px;} .bubblePopup span {color: #fff; font-size: 14px; font-style: normal; font-weight: 500; line-height: normal;} /* member header */ .container .body .contents .dcHeader.memberHeader .toolBox{align-items:center;} .container .body .contents .dcHeader.memberHeader .title{width: 500px; flex-shrink:0;} .container .body .contents .dcHeader.memberHeader .toolBoxWrap{flex-grow:1; display:flex; align-items:center; justify-content:space-between; gap:10px;} .container .body .contents .dcHeader.memberHeader .toolBoxWrap .buttonBox{display:flex; gap:6px;} /* add license for service name modal */ .modalBox .mbBody .mbBodyContents .licenseService .infoBody {display: flex; flex-direction: column; gap: 16px;} .modalBox .mbBody .mbBodyContents .licenseService .infoBody .dlBox {display: flex; flex-direction: column; gap: 24px;} .modalBox .mbBody .mbBodyContents .licenseService .infoBody .dlBox > dl {display: flex; flex-direction: column; gap: 12px;} .modalBox .mbBody .mbBodyContents .licenseService .infoBody .dlBox > dl > dt {display: flex; font-size: 16px; font-weight: 500; color: #333;} .modalBox .mbBody .mbBodyContents .licenseService .infoBody .dlBox > dl > dd > .validPeriod {display: flex; gap: 12px;} /* custom dateBox */ .dateBox.customDate {display: flex; flex-direction: column; gap: 4px;} .dateBox.customDate > label {width: 100%; font-size: 12px; font-weight: 400; color: #555;} .dateBox.customDate > .inputWrap {display: flex; align-items: center;} .duration .inputBox {display: flex; align-items: center;} .duration .inputBox .month {display: flex; position: absolute; right: 10px;} .duration .inputBox input {padding-right: 60px;} /* add license for service name modal */ .modalBox .mbBody .mbBodyContents .licenseConnectedCare .infoBody {display: flex; flex-direction: column; gap: 16px;} .modalBox .mbBody .mbBodyContents .licenseConnectedCare .infoBody .dlBox {display: flex; flex-direction: column; gap: 24px;} .modalBox .mbBody .mbBodyContents .licenseConnectedCare .infoBody .dlBox > dl {display: flex; flex-direction: column; gap: 12px;} .modalBox .mbBody .mbBodyContents .licenseConnectedCare .infoBody .dlBox > dl > dt {display: flex; font-size: 16px; font-weight: 500; color: #333;} .modalBox .mbBody .mbBodyContents .licenseConnectedCare .infoBody .dlBox > dl > dd > .validPeriod {display: flex; gap: 12px;} /* delete license */ .modalBox .mbBody .mbBodyContents .deleteLicense .infoBody {display: flex; justify-content: center; width: 100%; gap: 24px; padding: 40px; flex-direction: column; box-sizing: border-box;} .modalBox .mbBody .mbBodyContents .deleteLicense .infoBody > p {all: unset; font-size: 16px; font-weight: 400; color: #333;} .modalBox .mbBody .mbBodyContents .deleteLicense .infoBody .selectedLicense {display: flex; width: 100%; height: auto; padding: 40px; box-sizing: border-box; gap: 20px; background-color: #f5f6fa; border-radius: 8px; flex-direction: column; justify-content: center; align-items: center;} .modalBox .mbBody .mbBodyContents .deleteLicense .infoBody .selectedLicense .top {display: flex;} .modalBox .mbBody .mbBodyContents .deleteLicense .infoBody .selectedLicense .top span {font-size: 20px; font-weight: 500; color: #333; word-break: break-word;} .modalBox .mbBody .mbBodyContents .deleteLicense .infoBody .selectedLicense .bottom {display: flex; width: 342px; padding: 20px; background-color: #fff; border-radius: 10px; border: 1px solid #DADDE2; flex-direction: column; gap: 20px; box-sizing: border-box;} .modalBox .mbBody .mbBodyContents .deleteLicense .infoBody .selectedLicense .bottom .dlBox {display: flex; flex-direction: column; gap: 12px;} .modalBox .mbBody .mbBodyContents .deleteLicense .infoBody .selectedLicense .bottom .dlBox dl {display: flex; width: 80px; gap: 24px; width: 100%;} .modalBox .mbBody .mbBodyContents .deleteLicense .infoBody .selectedLicense .bottom .dlBox dl dt {display: flex; width: 80px; font-size: 16px; font-weight: 400; color: #555;} .modalBox .mbBody .mbBodyContents .deleteLicense .infoBody .selectedLicense .bottom .dlBox dl dd {display: flex; font-size: 16px; font-weight: 500; color: #333; width: calc(100% - 104px);}