html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block; } /* HTML5 hidden-attribute fix for newer browsers */ *[hidden] { display: none; } body { line-height: 1; } a { cursor: pointer; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } button { appearance: none; padding: 0; border: none; outline: none; background-color: transparent; cursor: pointer; } html { color: #333333; font-size: 16px; line-height: 1.7; letter-spacing: 0; font-weight: normal; } body { font-family: Helvetica Neue, Helvetica, Arial, sans-serif; position: relative; } h1 { font-size: 2.4rem; line-height: 3.14rem; letter-spacing: 0.07rem; font-weight: normal; } h2 { font-size: 2rem; line-height: 2.57rem; letter-spacing: 0.07rem; font-weight: normal; } h3 { font-size: 1.6rem; line-height: 2rem; letter-spacing: 0.07rem; font-weight: normal; } h4 { font-size: 1.2rem; line-height: 1.57rem; letter-spacing: 0.07rem; font-weight: normal; } h5 { font-size: 1.1rem; line-height: 1.57rem; letter-spacing: 0.06rem; font-weight: normal; } .wrap { display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 1fr; grid-template-areas: "header" "main" "footer"; min-height: 100vh; } .header { grid-area: header; position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; box-shadow: 0 0 3px #282828; background: linear-gradient(#ffffff, #ffffff 70%, #f0f0f0 100%); z-index: 4; } .headerLogo { margin: 1.2rem 2rem 1.5rem; font-size: 1.71rem; line-height: 2rem; letter-spacing: 0.07rem; font-weight: normal; } .headerLogo img { width: 280px; } .headerSub { margin: 1.4rem 2rem 1rem; font-size: 1.8rem; line-height: 2rem; letter-spacing: 0.07rem; font-weight: normal; font-weight: 600; text-align: right; } .headerMenu { width: 100%; } .headerMenu ul { display: flex; flex-wrap: wrap; padding: 0 2rem; } .headerMenu ul li { font-size: 1.3rem; line-height: 2rem; letter-spacing: 0.07rem; font-weight: normal; border-left: 1px #e6e6e6 solid; } .headerMenu ul li a { display: block; padding: 0.2rem 2.5rem 0.2rem; color: #333333; text-decoration: none; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .headerMenu ul li a:hover { background: #f5f5f5; text-decoration: underline; } .headerMenu ul li a.isActive { font-weight: 600; pointer-events: none; position: relative; background: #e6e6e6; } .headerMenu ul li a.isActive::after { content: ""; border-right: 0.7rem transparent solid; border-bottom: 0.7rem #282828 solid; border-left: 0.7rem transparent solid; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); } .accountInfo { position: absolute; right: 2rem; bottom: 0.3rem; font-size: 0.9rem; line-height: 1.6rem; letter-spacing: 0.04rem; font-weight: normal; } .accountIcon { width: 1.4rem; vertical-align: top; } .accountSignout { display: inline-block; margin-left: 1rem; color: #999999; font-size: 0.8rem; cursor: pointer; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .accountSignout .accountIcon { opacity: 0.5; margin-right: 0.2rem; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .accountSignout:hover { color: #333333; } .accountSignout:hover .accountIcon { opacity: 1; } _:-ms-lang(x)::-ms-backdrop, .header { width: 100vw; position: fixed; top: 0px; } .main { grid-area: main; } .mainSmall { width: 600px; margin: 0 auto; padding: 3.2rem 0; } _:-ms-lang(x)::-ms-backdrop, .main { padding-top: 116px; } _:-ms-lang(x)::-ms-backdrop, .mainLogin { margin-top: 116px; } .footer { grid-area: footer; padding: 0.6rem 0; text-align: center; font-size: 13px; line-height: 1.45; letter-spacing: 0.4px; font-weight: normal; color: #999999; } h2, h3 { display: inline-block; max-width: 72%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: bottom; } h2 .brCrumb, h2 + .brCrumb, h3 .brCrumb, h3 + .brCrumb { display: inline; margin-left: 1rem; font-size: 1.5rem; line-height: 1.4; letter-spacing: 0.04rem; font-weight: normal; } h2 .brCrumb::before, h2 + .brCrumb::before, h3 .brCrumb::before, h3 + .brCrumb::before { content: "-"; } h2 .brCrumb .tlIcon, h2 + .brCrumb .tlIcon, h3 .brCrumb .tlIcon, h3 + .brCrumb .tlIcon { width: 1.6rem; margin: 0 0.2rem 0 0.5rem; vertical-align: text-top; } .brCrumbAcc { margin-bottom: 1rem; } .brCrumbAcc li { padding-left: 1.1rem; font-size: 1.2rem; line-height: 1.4; letter-spacing: 0.04rem; font-weight: normal; position: relative; } .brCrumbAcc li::before { content: ""; border-top: 8px #333333 solid; border-right: 6px transparent solid; border-left: 6px transparent solid; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .brCrumbAcc li:nth-of-type(2) { margin-left: 1.1rem; } .brCrumbAcc li:nth-of-type(3) { margin-left: 2.2rem; } .brCrumbLicense { margin: 1rem 0 0.6rem; } .brCrumbLicense li { display: inline-block; max-width: calc(25% - 1.4rem); font-size: 1.1rem; line-height: 1.4; letter-spacing: 0.04rem; font-weight: normal; position: relative; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .brCrumbLicense li:not(:last-child) { padding-right: 1.4rem; } .brCrumbLicense li:not(:last-child)::after { content: ""; border-top: 5px transparent solid; border-bottom: 5px transparent solid; border-left: 7px #333333 solid; position: absolute; top: 45%; right: 0.4rem; transform: translateY(-50%); } .brCrumbLicense li a { color: #333333; text-decoration: none; } .brCrumbLicense li a:hover { color: #0084b2; } .buttonNormal { display: inline-block; width: 15rem; padding: 0.8rem 2rem; color: #ffffff; background: #004086; border: 1px #004086 solid; text-decoration: none; border-radius: 0.3rem; position: relative; font-size: 16px; line-height: 1.4; letter-spacing: 0; font-weight: normal; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .buttonNormal:hover { background: rgba(0, 64, 134, 0.7); } .buttonNormal.small { width: auto; padding: 0.75rem 2rem; } .buttonNormal.red { background: #e60000; border: 1px #e60000 solid; } .buttonNormal.red:hover { background: rgba(230, 0, 0, 0.7); } .buttonBase { display: inline-block; width: 15rem; padding: 0.8rem 2rem; color: #004086; background: #ffffff; border: 1px #004086 solid; text-decoration: none; border-radius: 0.3rem; position: relative; font-size: 16px; line-height: 1.4; letter-spacing: 0; font-weight: normal; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .buttonBase:hover { background: rgba(0, 64, 134, 0.04); } .buttonBase.small { width: auto; padding: 0.75rem 2rem; } .buttonText { display: inline-block; padding: 0.8rem 0; color: #004086; text-decoration: none; font-size: 16px; line-height: 1.4; letter-spacing: 0; font-weight: normal; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .buttonText:hover { opacity: 0.7; } .buttonText.small { width: auto; padding: 0.75rem 0; } .formList { display: flex; flex-wrap: wrap; margin-bottom: 3rem; } .formList dt, .formList dd { font-size: 16px; line-height: 1.7; letter-spacing: 0; font-weight: normal; } .formList dt { width: 22%; padding: 0.5rem 4% 0; text-align: right; } .formList dt.formTitle { width: 100%; padding: 0.5rem 4%; text-align: left; font-size: 1.4rem; line-height: 1.7; letter-spacing: 0.07rem; font-weight: normal; } .formList dt.formTitle.alignCenter { text-align: center; } .formList dt.overLine { padding: 0 4% 0; line-height: 1.4; } .formList dd { width: 66%; padding-right: 4%; margin-bottom: 1.5rem; } .formList dd.full { width: 100%; padding-right: 0; background: none; } .formList.hasbg { border-top: 2px #282828 solid; background: #fafafa; } .form select { text-overflow: ellipsis; } .form select:invalid { color: #999999; } .form select option { color: #333333; } .form select option[disabled] { background: #f5f5f5; } .form select option[value=""] { color: #999999; } .formInput { width: 350px; padding: 0.6rem 0.8rem; border: 1px #999999 solid; background: #ffffff; box-sizing: border-box; font-size: 16px; line-height: 1.4; letter-spacing: 0; font-weight: normal; } .formInput:focus { outline: 0; } .formInput[readonly] { border: 1px #e6e6e6 solid; background: #e6e6e6; } .formInput[disabled] { border: 1px #e6e6e6 solid; color: #999999; } .formInput.isError { background: rgba(229, 0, 0, 0.08); } .formInput.password[type="password"] + span { background: url(../assets/images/visibility_off.svg) no-repeat top right; } .formInput.password[type="text"] + span { background: url(../assets/images/visibility.svg) no-repeat top right; } .formInput.short { width: 150px; } .formIconEye { display: inline-block; width: 40px; height: 40px; float: right; margin-top: -40px; margin-right: 45px; position: relative; } .formIconEye img { width: 2.5rem; } .formCheck { width: 1.2rem; height: 1.2rem; margin-right: 0.5rem; accent-color: #282828; vertical-align: bottom; cursor: pointer; } .formCheck:disabled { cursor: default; } .formRadio { width: 1.2rem; height: 1.2rem; margin-top: -0.2rem; margin-right: 0.3rem; accent-color: #282828; vertical-align: middle; cursor: pointer; } .formRadio:disabled { cursor: default; } .form label { display: inline-block; padding: 0.6rem 0; margin-right: 1rem; cursor: pointer; white-space: pre-line; } .form label:has(input:disabled) { cursor: default; } .formInputKey { resize: none; width: 60px; height: 1.1rem; overflow: hidden; margin-right: 0.5rem; padding: 0.6rem 0.1rem; border: 1px #999999 solid; background: #ffffff; font-size: 18px; line-height: 1; letter-spacing: 0; font-weight: normal; text-align: center; } .formInputKey:focus { outline: 0; } .formInputKey.isError { background: rgba(229, 0, 0, 0.08); } .formComment { display: inline-block; padding-top: 0.5rem; color: #999999; font-size: 15px; line-height: 1.4; letter-spacing: 0; font-weight: normal; white-space: pre-line; } .formError { display: block; padding-top: 0.3rem; color: #e60000; font-size: 15px; line-height: 1.4; letter-spacing: 0; font-weight: normal; white-space: pre-line; } .formConfirm { width: 350px; padding: 0.6rem 0.6rem; background: #f0f0f0; box-sizing: border-box; word-wrap: break-word; } .formSubmit { min-width: 15rem; padding: 0.8rem 2rem; border: 1px #999999 solid; font-size: 16px; line-height: 1.4; letter-spacing: 0.04rem; font-weight: normal; opacity: 0.7; pointer-events: none; border-radius: 0.3rem; position: relative; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .formSubmit.isActive { cursor: pointer; opacity: 1; color: #ffffff; background: #004086; border: 1px #004086 solid; pointer-events: auto; } .formSubmit.isActive:hover { background: rgba(0, 94, 184, 0.7); } .formButtonFul { min-width: 15rem; padding: 0.8rem 0.8rem; border: 1px #999999 solid; background: #ffffff; font-size: 16px; line-height: 1.4; letter-spacing: 0.04rem; font-weight: normal; cursor: pointer; border-radius: 0.3rem; position: relative; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .formButtonFul:hover { background: #f0f0f0; } .formButton { padding: 0.8rem 0.8rem; border: 1px #999999 solid; background: #ffffff; font-size: 16px; line-height: 1.4; letter-spacing: 0.04rem; font-weight: normal; cursor: pointer; border-radius: 0.3rem; position: relative; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .formButton:hover { background: #f0f0f0; } .formDelete { min-width: 15rem; padding: 0.8rem 2rem; border: 1px #999999 solid; color: #ffffff; font-size: 16px; line-height: 1.4; letter-spacing: 0.04rem; font-weight: normal; background: #e60000; border: 1px #e60000 solid; opacity: 1; border-radius: 0.3rem; position: relative; cursor: pointer; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .formDelete:hover { background: rgba(230, 0, 0, 0.7); } .formBack { width: 15rem; padding: 0.8rem 2rem; border: 1px #999999 solid; background: #ffffff; font-size: 16px; line-height: 1.4; letter-spacing: 0.04rem; font-weight: normal; cursor: pointer; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .formBack:hover { background: #f0f0f0; } .formButtonTx { padding: 0.2rem 2rem; border: none; background: none; color: #0084b2; font-size: 16px; line-height: 1.4; letter-spacing: 0.04rem; font-weight: normal; cursor: pointer; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .formButtonTx:hover { text-decoration: underline; } .formDone { width: 100px; } .formTrash { width: 50px; filter: brightness(0) saturate(100%) invert(10%) sepia(97%) saturate(7447%) hue-rotate(17deg) brightness(95%) contrast(117%); } .listVertical { width: 600px; display: flex; flex-wrap: wrap; border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1); } .listVertical .listHeader { width: 100%; padding: 0.4rem 4%; vertical-align: middle; color: #ffffff; background: #282828; } .listVertical dt, .listVertical dd { padding: 0.8rem 4%; background: #ffffff; font-size: 16px; line-height: 1.4; letter-spacing: 0.04rem; font-weight: normal; } .listVertical dt:nth-of-type(odd), .listVertical dd:nth-of-type(odd) { background: #f5f5f5; } .listVertical dt { width: 42%; text-align: left; position: relative; white-space: pre-line; } .listVertical dt.overLine { padding: 0.4rem 4%; line-height: 1.15; } .listVertical dd { width: 42%; text-align: right; word-break: break-all; } .listVertical dd .isAlert { color: #ff5a33; } .listDocument { margin-bottom: 3rem; } .listDocument li { padding: 0 0 0 1.5rem; margin-bottom: 1rem; position: relative; } .listDocument li::before { content: ""; width: 0.5rem; height: 0.5rem; background: #333333; border-radius: 50%; position: absolute; top: 0.2rem; left: 0; } .boxFlex { display: flex; flex-wrap: wrap; } .boxFlex.aru { justify-content: space-around; } .boxFlex.btw { justify-content: space-between; } .boxFlex.str { align-items: flex-start; } .box100 { width: 100%; } .box50 { width: 50%; } .loadingBoxSpinner { width: 50px; height: 50px; margin: 0 auto; border: 3px solid #999999; border-top: 3px solid transparent; border-radius: 50%; animation: load 0.8s linear 0s infinite; } .icLoading { width: 50px; vertical-align: middle; position: absolute; animation: load 0.8s linear 0s infinite; } @keyframes load { 0% { transform: rotate(0); } 60% { transform: rotate(280deg); } 100% { transform: rotate(360deg); } } .modal { -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .modal.isShow { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); position: fixed; z-index: 6; } .modal.isShow .modalBox { display: block; } .modalBox { display: none; width: 600px; max-height: 95vh; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 0.3rem; overflow: auto; } .modalTitle { display: flex; justify-content: space-between; padding: 0.6rem 4% 0.6rem; background: #ffffff; font-size: 1.6rem; line-height: 2rem; letter-spacing: 0; font-weight: 600; } .modalTitle img:hover { cursor: pointer; } .modalTitle img.off { cursor: none; pointer-events: none; opacity: 0.4; } .modalTitleIcon { width: 1rem; } .modal .formList { margin-bottom: 0; } .modal .formList.hasbg { border-top: none; } .modal .formList dd { margin-bottom: 0.5rem; } .modal .formList dd.last { margin-bottom: 1.5rem; } .modal .formList .slideSet { width: 100%; display: flex; flex-wrap: wrap; } .modal .formList .slideSet dt { width: 22%; } .modal .formList .slideSet dd { width: 66%; } .modal .formInput { padding: 0.5rem 0.8rem; } .modal .formInput[type="file"] { border: none; background: inherit; } .modal .formInput[type="file"].isHide { display: none; } .modal .form label { padding: 0.5rem 0 0.2rem; } .modal .form label.formFileButton { padding: 0.5rem 0.8rem; border: 1px #999999 solid; background: #ffffff; font-size: 16px; line-height: 1.4; letter-spacing: 0.01rem; font-weight: normal; cursor: pointer; border-radius: 0.3rem; position: relative; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .modal .form label.formFileButton:hover { background: #f0f0f0; } .modal .formFileName { display: inline-block; width: 350px; padding: 0.6rem 0.8rem; border: 1px #e6e6e6 solid; background: #e6e6e6; box-sizing: border-box; font-size: 16px; line-height: 1.4; letter-spacing: 0; font-weight: normal; text-align: left; } .modal .form .icLoading { bottom: 1.5rem; left: calc(50% - 25px); } .modal .form .tableWrap { max-height: 100%; overflow-x: hidden; margin-bottom: 1rem; } .modal .form .table { width: 95%; margin: 0 auto; } .modal .form .table .tableHeader th { position: -webkit-sticky; position: sticky; top: 0; padding: 0.4rem 0.5rem; background: #282828; } .modal .form .table td { padding: 0.6rem 0.4rem; } .modal .form .table .formInput { width: inherit; padding: 0.2rem 0.5rem; } .modal .form .table.backup .formCheck { margin-right: 0; } .modal .form .table.backup th:first-child { padding: 0 0.2rem; } .modal .form .table.backup td { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .modal .form .table.backup td:first-child { padding: 0.6rem 0.2rem; } .modal .form .pagenation { margin-bottom: 1.5rem; padding-right: 2.5%; } .modal .encryptionPass { display: none; } .modal .encryptionPass.isShow { display: block; } .pageHeader { padding: 0.3rem 2.5rem 0.2rem; background: #282828; color: #ffffff; margin-bottom: 2rem; } .pageTitle { display: inline-block; padding-right: 1.5rem; font-size: 1.4rem; line-height: 1.4rem; letter-spacing: 0.07rem; font-weight: 500; } .pageTx { display: inline-block; padding-left: 2rem; font-size: 1.4rem; line-height: 1.4rem; letter-spacing: 0.07rem; font-weight: 500; position: relative; } .pageTx::before { content: ""; border-top: 6px transparent solid; border-bottom: 6px transparent solid; border-left: 8px #ffffff solid; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .pagenation { margin-bottom: 3rem; text-align: right; /*&-nav{ a{ display: inline-block; padding: .5rem; margin-right: .5rem; color: $color-blues; @include font-styling(.9rem, 1.6, 0.04rem); &:last-child{ margin-right: 0; } &:visited{ color: $color-blues; } svg{ margin: 0 .5rem; width: .5rem; vertical-align: middle; fill: $color-blues; &.prev{ } } &:hover{ opacity: .7; } &[href=""]{ color: $color-subtxt; text-decoration: none; pointer-events: none; svg{ fill: $color-subtxt; } } } }*/ } .pagenationNav { font-size: 0.8rem; line-height: 1.6; letter-spacing: 0.04rem; font-weight: normal; } .pagenationNav a { display: inline-block; margin: 0 1px; padding: 0.3rem 0.7rem; font-size: 13px; line-height: 1.4; letter-spacing: 0.04rem; font-weight: normal; text-decoration: none; color: #333333; border: 1px #a5a5a5 solid; border-radius: 0.2rem; opacity: 0.4; pointer-events: none; background: #ffffff; } .pagenationNav a.isActive { opacity: 1; pointer-events: inherit; } .pagenationNav a.isActive:hover { background: #f5f5f5; } .pagenationTotal { color: #999999; } .pagenation.widthMid { width: 1000px; } .pagenation.widthSml { width: 750px; } .pagenation.widthMin { width: 600px; } _:-ms-lang(x)::-ms-backdrop, .pagenationNav a { height: 30px; } .snackbar { width: 800px; display: flex; justify-content: flex-start; padding: 0.8rem 1.5rem; color: #ffffff; background: #00b4aa; position: fixed; top: -100%; left: 50%; transform: translateX(-50%); border-radius: 0.3rem; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); box-sizing: border-box; z-index: 10; opacity: 0; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .snackbar.isShow { opacity: 1; top: 0.2rem; left: 50%; z-index: 11; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .snackbar.isAlert { background: #ff5a33; } .snackbarMessage { width: calc(800px - 3rem - 3.3rem); font-size: 16px; line-height: 1.7; letter-spacing: 0; font-weight: normal; } .snackbarIcon { width: 1.5rem; margin-right: 1rem; vertical-align: middle; } .snackbarIconClose { width: 0.8rem; } .snackbarIconClose:hover { cursor: pointer; } .table { width: 100%; margin-bottom: 1rem; } .table tr:not(.tableHeader) { background: #ffffff; } .table tr:nth-child(2n + 3) { background: #f5f5f5; } .table tr:last-child { border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1); } .table td { padding: 0.8rem 0.7rem; font-size: 15px; line-height: 1.4; letter-spacing: 0; font-weight: normal; } .table td .isAlert { color: #ff5a33; } .tableHeader { background: #282828; } .tableHeader th { padding: 0.4rem 0.7rem; vertical-align: middle; color: #ffffff; font-size: 13px; line-height: 1.4; letter-spacing: 0.04rem; font-weight: normal; text-align: left; position: relative; } .tableHeader th .hasSort { display: block; width: calc(100% - 0.5rem); padding-right: 0.5rem; } .tableHeader th .hasSort::before { content: ""; border-top: 0.4rem #ffffff solid; border-right: 0.35rem transparent solid; border-left: 0.35rem transparent solid; position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%); opacity: 0.4; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .tableHeader th .hasSort:hover { cursor: pointer; } .tableHeader th .hasSort:hover::before { opacity: 1; } .tableHeader th .hasSort.isActiveAz::before { opacity: 1; } .tableHeader th .hasSort.isActiveAz:hover::before { border-top: none; border-right: 0.35rem transparent solid; border-bottom: 0.4rem #ffffff solid; border-left: 0.35rem transparent solid; } .tableHeader th .hasSort.isActiveZa::before { border-top: none; border-right: 0.35rem transparent solid; border-bottom: 0.4rem #ffffff solid; border-left: 0.35rem transparent solid; opacity: 1; } .tableHeader th .hasSort.isActiveZa:hover::before { border-top: 0.4rem #ffffff solid; border-right: 0.35rem transparent solid; border-bottom: none; border-left: 0.35rem transparent solid; } .tableHeader th:not(:last-child) { border-right: 1px #999999 solid; } .tableHeader th:not(:last-child)::after { content: ""; width: 0.6rem; height: 100%; cursor: col-resize; position: absolute; top: 0; right: -0.3rem; z-index: 3; } .tableHeader th.noLine { border-right: none; } .tableHeader th.noLine::after { display: none; } .wrap.home { background: url("../assets/images/top-bg.png") no-repeat center 20vh; background-size: cover; } @media only screen and (min-width: 1280px) { .wrap.home { background: url("../assets/images/top-bg.png") no-repeat center 18vh; background-size: cover; } } .header.home { background: none; box-shadow: none; } .header.home .headerLogo { margin: 2rem 2.5rem 2rem; } .header.home .headerSub { display: none; } @media only screen and (min-width: 1280px) { .pgHome { width: 1064px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } } .pgHome .ODMSlogo { text-align: center; padding: 2rem 0 0; } .pgHome .ODMSlogo img { width: 200px; } @media only screen and (min-width: 1280px) { .pgHome .ODMSlogo { width: 400px; margin: 3vh 0 0 0; padding: 0 0 0; text-align: center; } .pgHome .ODMSlogo img { width: auto; vertical-align: middle; } } .pgHome > div { width: 400px; margin: 3rem auto 0; padding: 2rem; background: #ffffff; box-shadow: 0 0 5px #aaa; border-radius: 0.3rem; } @media only screen and (min-width: 1280px) { .pgHome > div { margin: 3vh 0 0 0; } } .pgHomeLinks { width: calc(400px - 4rem); margin: 0 auto; text-align: center; } .pgHomeLinks dt { padding: 0 0 0.5rem 1rem; font-size: 16px; line-height: 1.6; letter-spacing: 0; font-weight: normal; text-align: left; } .pgHomeLinks dt:first-of-type { display: inline-block; width: 45%; padding: 0 0 0.5rem 0; } .pgHomeLinks dd a .buttonIcon { width: 16px; height: 16px; position: absolute; top: 50%; right: 2rem; transform: translateY(-50%); opacity: 0; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .pgHomeLinks dd a:hover .buttonIcon { top: 50%; right: 1.7rem; opacity: 1; } .pgHomeLinks dd:first-of-type { display: inline-block; width: 45%; text-align: left; } .pgHomeLinks dd .formInput { width: auto; } .account > div, .user > div, .license > div, .dictation > div, .partners > div, .workflow > div, .support > div { padding: 0 2rem; position: relative; } .account > div .icLoading, .user > div .icLoading, .license > div .icLoading, .dictation > div .icLoading, .partners > div .icLoading, .workflow > div .icLoading, .support > div .icLoading { top: 5.5rem; left: calc(50% - 25px); } .account .table tr.tableHeader th.clm0, .user .table tr.tableHeader th.clm0, .license .table tr.tableHeader th.clm0, .dictation .table tr.tableHeader th.clm0, .partners .table tr.tableHeader th.clm0, .workflow .table tr.tableHeader th.clm0, .support .table tr.tableHeader th.clm0 { width: 0px; padding: 0 0; } .account .table tr:not(.tableHeader), .user .table tr:not(.tableHeader), .license .table tr:not(.tableHeader), .dictation .table tr:not(.tableHeader), .partners .table tr:not(.tableHeader), .workflow .table tr:not(.tableHeader), .support .table tr:not(.tableHeader) { position: relative; } .account .table tr:not(.tableHeader):hover .menuInTable, .user .table tr:not(.tableHeader):hover .menuInTable, .license .table tr:not(.tableHeader):hover .menuInTable, .dictation .table tr:not(.tableHeader):hover .menuInTable, .partners .table tr:not(.tableHeader):hover .menuInTable, .workflow .table tr:not(.tableHeader):hover .menuInTable, .support .table tr:not(.tableHeader):hover .menuInTable { opacity: 1; } .account .table tr:not(.tableHeader).isSelected, .user .table tr:not(.tableHeader).isSelected, .license .table tr:not(.tableHeader).isSelected, .dictation .table tr:not(.tableHeader).isSelected, .partners .table tr:not(.tableHeader).isSelected, .workflow .table tr:not(.tableHeader).isSelected, .support .table tr:not(.tableHeader).isSelected { background: #0084b2; color: #ffffff; } .account .table tr:not(.tableHeader).isSelected:hover, .user .table tr:not(.tableHeader).isSelected:hover, .license .table tr:not(.tableHeader).isSelected:hover, .dictation .table tr:not(.tableHeader).isSelected:hover, .partners .table tr:not(.tableHeader).isSelected:hover, .workflow .table tr:not(.tableHeader).isSelected:hover, .support .table tr:not(.tableHeader).isSelected:hover { color: #ffffff; } .account .table tr:not(.tableHeader).isSelected .menuInTable, .user .table tr:not(.tableHeader).isSelected .menuInTable, .license .table tr:not(.tableHeader).isSelected .menuInTable, .dictation .table tr:not(.tableHeader).isSelected .menuInTable, .partners .table tr:not(.tableHeader).isSelected .menuInTable, .workflow .table tr:not(.tableHeader).isSelected .menuInTable, .support .table tr:not(.tableHeader).isSelected .menuInTable { display: block; } .account .table td, .user .table td, .license .table td, .dictation .table td, .partners .table td, .workflow .table td, .support .table td { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; } .account .table td.clm0, .user .table td.clm0, .license .table td.clm0, .dictation .table td.clm0, .partners .table td.clm0, .workflow .table td.clm0, .support .table td.clm0 { width: 0px; padding: 0 0; overflow: visible; position: sticky; left: 0; z-index: 2; } .account .table.user, .user .table.user, .license .table.user, .dictation .table.user, .partners .table.user, .workflow .table.user, .support .table.user { margin-bottom: 5rem; } .account .table.user th::after, .user .table.user th::after, .license .table.user th::after, .dictation .table.user th::after, .partners .table.user th::after, .workflow .table.user th::after, .support .table.user th::after { display: none; } .account .table.user tr:not(.tableHeader) td, .user .table.user tr:not(.tableHeader) td, .license .table.user tr:not(.tableHeader) td, .dictation .table.user tr:not(.tableHeader) td, .partners .table.user tr:not(.tableHeader) td, .workflow .table.user tr:not(.tableHeader) td, .support .table.user tr:not(.tableHeader) td { padding-bottom: 2rem; vertical-align: top; } .account .listVertical { margin-bottom: 3rem; } .account .listVertical dd .formInput { max-width: 100%; } .account .listVertical dd.full { width: 100%; padding-top: 0; background: none; } .account .listVertical dd.full.odd { background: #f5f5f5; } .account .listVertical dd.formComment { text-align: left; font-size: 0.9rem; word-break: break-word; } .account .box100 .formComment { display: block; width: 600px; text-align: left; } .account .box100.alignRight { width: calc(1200px + 3rem); text-align: right; } .account .box100.alignRight .formComment { margin-left: 648px; text-align: right; } .menuAction { margin-bottom: 0.6rem; } .menuAction li { display: inline-block; margin-right: 0.5rem; } .menuAction li:last-child { margin-right: 0; } .menuAction.inTable { margin-bottom: 0; } .menuAction.inTable .menuLink { padding: 0.3rem 0.5rem 0.3rem 0.5rem; opacity: 0; } .menuAction.inTable .menuLink .menuIcon { width: 1.2rem; } .menuAction.inTable .menuLink.isActive { opacity: 1; } .menuAction.inTable .colorLink { display: block; padding: 0.3rem 0.5rem 0.3rem 0.5rem; font-size: 13px; line-height: 1.4; letter-spacing: 0.04rem; font-weight: normal; text-decoration: none; border: 1px #999999 solid; border-radius: 0.2rem; opacity: 0; pointer-events: none; background: #ffffff; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .menuAction.inTable .colorLink.isActive { cursor: pointer; opacity: 1; color: #ffffff; background: #004086; border: 1px #004086 solid; pointer-events: inherit; } .menuAction.inTable .colorLink.isActive:hover { background: rgba(0, 94, 184, 0.7); } .menuLink { display: block; padding: 0.3rem 0.5rem 0.3rem 0.3rem; font-size: 13px; line-height: 1.4; letter-spacing: 0.04rem; font-weight: normal; text-decoration: none; color: #333333; border: 1px #a5a5a5 solid; border-radius: 0.2rem; opacity: 0.3; pointer-events: none; background: #ffffff; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .menuLink.isActive { opacity: 1; pointer-events: inherit; } .menuLink.isActive:hover { background: #f5f5f5; } .menuIcon { width: 1.4rem; margin-right: 0.4rem; vertical-align: bottom; } .menuInTable { width: auto; position: absolute; left: 0.7rem; bottom: 0.5rem; opacity: 0; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .menuInTable li { display: inline-block; margin-right: 0.5rem; padding-right: 0.5rem; } .menuInTable li:not(:last-child) { border-right: 1px #999999 solid; } .menuInTable li a { display: block; font-size: 12px; line-height: 1.4; letter-spacing: 0.02rem; font-weight: normal; text-decoration: none; color: #0084b2; } .menuInTable li a:hover { opacity: 0.7; } .menuInTable li a.isDisable { color: #999999; pointer-events: none; } tr.isSelected .menuInTable li a { color: #ffffff; } tr.isSelected .menuInTable li a.isDisable { pointer-events: none; opacity: 0.3; } .icCheckCircle { width: 20px; vertical-align: bottom; } .icInTable { width: 24px; vertical-align: bottom; } .wrap.manage .header, .wrap.manage .main { background: #def5fd; } .manageInfo { width: 800px; display: flex; justify-content: flex-start; padding: 0.2rem 1.5rem; color: #0084b2; border: 1px #0084b2 solid; border-radius: 0.3rem; background: #def5fd; position: absolute; top: 0.2rem; left: 50%; transform: translateX(-50%); box-sizing: border-box; z-index: 5; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .manage .txNormal { width: calc(800px - 3rem - 3.3rem); font-size: 16px; line-height: 1.7; letter-spacing: 0; font-weight: normal; padding-top: 0.5rem; line-height: 1.4; } .manage .txNormal span { display: inline-block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; } .manageIcon { width: 1.5rem; margin-right: 1rem; vertical-align: middle; filter: brightness(0) saturate(100%) invert(31%) sepia(75%) saturate(1954%) hue-rotate(172deg) brightness(90%) contrast(101%); } .manageIconClose { width: 1.5rem; filter: brightness(0) saturate(100%) invert(31%) sepia(75%) saturate(1954%) hue-rotate(172deg) brightness(90%) contrast(101%); } .manageIconClose:hover { cursor: pointer; } .license .listVertical dd img[src*="circle"] { filter: brightness(0) saturate(100%) invert(58%) sepia(41%) saturate(5814%) hue-rotate(143deg) brightness(96%) contrast(101%); } .license .listVertical dd img[src*="block"] { filter: brightness(0) saturate(100%) invert(45%) sepia(77%) saturate(2633%) hue-rotate(340deg) brightness(102%) contrast(101%); } .license .table.history { width: 1000px; } .license .table.history td:last-child { width: 200px; text-align: right; } .license .table.cardHistory { width: 750px; } .license .table.cardHistory td:last-child { width: 50%; } .license .table.partner tr { position: relative; } .license .table.partner tr td[title="View child accounts"] { padding-left: 1.5rem; position: relative; cursor: pointer; background-size: none; } .license .table.partner tr td[title="View child accounts"]:hover { color: #0084b2; } .license .table.partner tr td[title="View child accounts"] a { color: inherit; text-decoration: none; } .license .table.partner tr td[title="View child accounts"]::before { content: ""; position: absolute; top: 50%; left: 0.4rem; border-top: 6px transparent solid; border-bottom: 6px transparent solid; border-left: 8px #282828 solid; transform: translateY(-50%); } .license .table.partner tr td[title="Return"] { position: relative; cursor: pointer; } .license .table.partner tr td[title="Return"]:hover { color: #0084b2; } .license .table.partner tr.isOpen::after { content: ""; width: 100%; border-bottom: 1px #999999 solid; position: absolute; bottom: 0; left: 0; } .license .table.partner tr.isOpen td { padding: 0.3rem 0.7rem; } .license .table.partner tr.isOpen td:nth-child(n + 2) { color: #999999; } .license .table.partner tr.isOpen td:first-child { padding-left: 1.5rem; } .license .table.partner tr.isOpen td:first-child::before { content: ""; position: absolute; top: 50%; left: 0.4rem; border-top: 8px #282828 solid; border-right: 6px transparent solid; border-left: 6px transparent solid; transform: translateY(-50%); } .license .table.partner tr.isOpen ~ tr td:first-child { padding-left: 2.5rem; } .license .table.partner tr.isOpen ~ tr td:first-child::before { top: 50%; left: 1.4rem; } .license .table.partner td:last-child { width: 120px; text-align: right; } .dictation .menuAction { margin-top: -1rem; height: 34px; position: relative; } .dictation .menuAction .alignLeft { position: absolute; left: 0; } .dictation .menuAction .alignLeft .menuLink { padding: 0.3rem 0.3rem 0.3rem 0.5rem; } .dictation .menuAction .alignLeft .menuIcon { margin-right: 0; margin-left: 0.4rem; } .dictation .displayOptions { display: none; margin-bottom: 0.6rem; padding: 0.3rem 1rem; background: #f0f0f0; position: relative; } .dictation .displayOptions li { display: inline-block; } .dictation .displayOptions li label { padding: 0.3rem 0; font-size: 13px; line-height: 1.4; letter-spacing: 0.02rem; font-weight: normal; } .dictation .displayOptions li label .formCheck { width: 0.9rem; height: 0.9rem; margin-right: 0.3rem; } .dictation .displayOptions.isShow { display: block; } .dictation .displayOptions::before { content: ""; border-right: 0.6rem transparent solid; border-bottom: 0.6rem #f0f0f0 solid; border-left: 0.6rem transparent solid; position: absolute; top: -0.5rem; right: 3rem; } .dictation .table { margin-bottom: 0; } .dictation .tableFilter { padding-top: 0.8rem; margin-bottom: 0.8rem; } .dictation .tableFilter li { display: inline-block; margin-right: 0.3rem; font-size: 14px; line-height: 1.4; letter-spacing: 0.02rem; font-weight: normal; } .dictation .tableFilter li label { cursor: pointer; } .dictation .tableFilter li label .formCheck { width: 0.9rem; height: 0.9rem; margin-right: 0.3rem; } .dictation .tableFilter2 { padding-top: 0.8rem; margin-bottom: 0.8rem; } .dictation .tableFilter2 li { display: inline-block; margin-right: 0.5rem; font-size: 14px; line-height: 1.1; letter-spacing: 0.02rem; font-weight: normal; } .dictation .tableFilter2 li a { display: block; color: #0084b2; text-decoration: none; padding-right: 0.5rem; } .dictation .tableFilter2 li a:hover { opacity: 0.7; } .dictation .tableFilter2 li a.isDisable { color: #999999; pointer-events: none; } .dictation .tableFilter2 li a span { display: inline-block; padding: 0 0.2rem; color: #333333; } .dictation .tableFilter2 li:not(:last-child) a { border-right: 1px #999999 solid; } .dictation .tableWrap { max-width: calc(100vw - 5.1rem); max-height: 90vh; overflow-x: scroll; margin-bottom: 1rem; } .dictation .table.dictation { position: relative; min-width: 100%; } .dictation .table.dictation tr { position: relative; } .dictation .table.dictation tr.tableHeader th { position: -webkit-sticky; position: sticky; top: 0; background: #282828; z-index: 3; } .dictation .table.dictation tr.tableHeader th.clm0 { width: 0px; padding: 0 0; } .dictation .table.dictation tr.tableHeader th:not(:last-child)::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-right: 0.1rem #e6e6e6 solid; z-index: -1; } .dictation .table.dictation tr:hover .menuInTable { opacity: 1; } .dictation .table.dictation tr.isSelected { background: #0084b2; color: #ffffff; } .dictation .table.dictation tr.isSelected:hover { color: #ffffff; } .dictation .table.dictation tr.isSelected img[alt="Uploaded"], .dictation .table.dictation tr.isSelected img[alt="Finished"], .dictation .table.dictation tr.isSelected img[alt="InProgress"], .dictation .table.dictation tr.isSelected img[alt="encrypted"] { filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(110deg) brightness(110%) contrast(101%); } .dictation .table.dictation td { padding-bottom: 2rem; vertical-align: top; } .dictation .table.dictation td .menuInTable li:nth-child(3) { border-right: none; } .dictation .table.dictation td .menuInTable li a.mnCancel { margin-left: 3rem; } .dictation .table.dictation td:has(img[alt="encrypted"]) { text-align: center; } .dictation .table.dictation td:has(img[alt="encrypted"]) img { height: 1.1rem; } .dictation .table.dictation td.clm0 { width: 0px; padding: 0 0; overflow: visible; position: sticky; left: 0; z-index: 2; } .dictation .table.dictation td img { height: 1.3rem; margin-right: 0.2rem; margin-left: -0.4rem; vertical-align: middle; } .dictation .table.dictation td.txWsline { white-space: pre; } .dictation .table.dictation.hidePri th.opPri, .dictation .table.dictation.hidePri td.opPri { display: none; } .dictation .table.dictation.hideSize th.opSize, .dictation .table.dictation.hideSize td.opSize { display: none; } .dictation .table.dictation.hideUpd th.opUpd, .dictation .table.dictation.hideUpd td.opUpd { display: none; } .dictation .table.dictation.hideC1 th.clm1, .dictation .table.dictation.hideC1 td.clm1 { display: none; } .dictation .table.dictation.hideC2 th.clm2, .dictation .table.dictation.hideC2 td.clm2 { display: none; } .dictation .table.dictation.hideC3 th.clm3, .dictation .table.dictation.hideC3 td.clm3 { display: none; } .dictation .table.dictation.hideC4 th.clm4, .dictation .table.dictation.hideC4 td.clm4 { display: none; } .dictation .table.dictation.hideC5 th.clm5, .dictation .table.dictation.hideC5 td.clm5 { display: none; } .dictation .table.dictation.hideC6 th.clm6, .dictation .table.dictation.hideC6 td.clm6 { display: none; } .dictation .table.dictation.hideC7 th.clm7, .dictation .table.dictation.hideC7 td.clm7 { display: none; } .dictation .table.dictation.hideC8 th.clm8, .dictation .table.dictation.hideC8 td.clm8 { display: none; } .dictation .table.dictation.hideC9 th.clm9, .dictation .table.dictation.hideC9 td.clm9 { display: none; } .dictation .table.dictation.hideC10 th.clm10, .dictation .table.dictation.hideC10 td.clm10 { display: none; } .dictation .table.dictation.hideC11 th.clm11, .dictation .table.dictation.hideC11 td.clm11 { display: none; } .dictation .table.dictation.hideC12 th.clm12, .dictation .table.dictation.hideC12 td.clm12 { display: none; } .dictation .table.dictation.hideC13 th.clm13, .dictation .table.dictation.hideC13 td.clm13 { display: none; } .dictation .table.dictation.hideC14 th.clm14, .dictation .table.dictation.hideC14 td.clm14 { display: none; } .dictation .table.dictation.hideC15 th.clm15, .dictation .table.dictation.hideC15 td.clm15 { display: none; } .dictation .table.dictation.hideC16 th.clm16, .dictation .table.dictation.hideC16 td.clm16 { display: none; } .dictation .table.dictation.hideO1 th.op1, .dictation .table.dictation.hideO1 td.op1 { display: none; } .dictation .table.dictation.hideO2 th.op2, .dictation .table.dictation.hideO2 td.op2 { display: none; } .dictation .table.dictation.hideO3 th.op3, .dictation .table.dictation.hideO3 td.op3 { display: none; } .dictation .table.dictation.hideO4 th.op4, .dictation .table.dictation.hideO4 td.op4 { display: none; } .dictation .table.dictation.hideO5 th.op5, .dictation .table.dictation.hideO5 td.op5 { display: none; } .dictation .table.dictation.hideO6 th.op6, .dictation .table.dictation.hideO6 td.op6 { display: none; } .dictation .table.dictation.hideO7 th.op7, .dictation .table.dictation.hideO7 td.op7 { display: none; } .dictation .table.dictation.hideO8 th.op8, .dictation .table.dictation.hideO8 td.op8 { display: none; } .dictation .table.dictation.hideO9 th.op9, .dictation .table.dictation.hideO9 td.op9 { display: none; } .dictation .table.dictation.hideO10 th.op10, .dictation .table.dictation.hideO10 td.op10 { display: none; } .formList.property .formTitle { padding: 1rem 4% 0; line-height: 1.2; } .formList.property dt:not(.formTitle) { width: 30%; padding: 0 4% 0 4%; font-size: 0.9rem; } .formList.property dt:not(.formTitle):nth-of-type(odd) { background: #f0f0f0; } .formList.property dt:not(.formTitle):nth-of-type(odd) + dd { background: #f0f0f0; } .formList.property dd { width: 58%; padding: 0.2rem 4% 0.2rem 0; margin-bottom: 0; white-space: pre-line; word-wrap: break-word; line-height: 1.2; } .formList.property dd img { height: 1.1rem; } .formList.property dd.full { width: 100%; padding: 0.2rem 4% 0.2rem 4%; } .formList.property dd.full .buttonText { padding: 0 0 0.8rem; } .formList.property dd.full .buttonText img { vertical-align: text-bottom; margin-right: 0.5rem; } .formList dd.formChange { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 92%; padding: 0 4%; } .formList dd.formChange ul.chooseMember, .formList dd.formChange ul.holdMember { width: calc(40% - 2px); border: 1px #999999 solid; } .formChange ul.chooseMember, .formChange ul.holdMember { height: 250px; overflow-y: scroll; padding: 0.5rem; background: #ffffff; } .formChange ul.chooseMember li.changeTitle, .formChange ul.holdMember li.changeTitle { font-weight: 600; } .formChange ul.chooseMember li .formCheck, .formChange ul.holdMember li .formCheck { display: none; } .formChange ul.chooseMember li input + label, .formChange ul.holdMember li input + label { display: block; padding: 0.2rem 0 0.2rem 1.5rem; margin-right: 0; background: url(../assets/images/circle.svg) no-repeat left center; background-size: 1.3rem; } .formChange ul.chooseMember li input + label:hover, .formChange ul.holdMember li input + label:hover { background: #e6e6e6 url(../assets/images/arrow_circle_left.svg) no-repeat left center; background-size: 1.3rem; } .formChange ul.chooseMember li input:checked + label, .formChange ul.holdMember li input:checked + label { padding: 0.2rem 1rem 0.2rem 0; background: url(../assets/images/check_circle_fill.svg) no-repeat right center; background-size: 1.3rem; } .formChange ul.chooseMember li input:checked + label:hover, .formChange ul.holdMember li input:checked + label:hover { background: #e6e6e6 url(../assets/images/arrow_circle_right.svg) no-repeat right center; background-size: 1.3rem; } .formChange > p { width: 6%; height: 20px; background: #e6e6e6; position: relative; } .formChange > p::before { content: ""; border-top: 20px transparent solid; border-right: 20px #e6e6e6 solid; border-bottom: 20px transparent solid; position: absolute; top: 50%; left: -15px; transform: translateY(-50%); } .formChange > p::after { content: ""; border-top: 20px transparent solid; border-bottom: 20px transparent solid; border-left: 20px #e6e6e6 solid; position: absolute; top: 50%; right: -15px; transform: translateY(-50%); } .partners .table.partner { position: relative; min-width: 100%; } .partners .table.partner tr { position: relative; } .partners .table.partner tr.tableHeader th { position: -webkit-sticky; position: sticky; top: 0; background: #282828; z-index: 1; } .partners .table.partner tr.tableHeader th::after { display: none; } .partners .table.partner td { padding-bottom: 2rem; vertical-align: top; } .partners .table.partner td.txWsline { white-space: pre; } .partners .table.partner.role4 { margin-top: 3rem; } .partners .table.partner:not(.role4) tr th:last-of-type, .partners .table.partner:not(.role4) tr td:last-of-type { display: none; } .workflow .table { margin-bottom: 0; } .workflow .table.workflow { min-width: 100%; } .workflow .table.workflow tr { position: relative; } .workflow .table.workflow th::after { display: none; } .workflow .table.workflow td { padding-bottom: 2rem; vertical-align: top; } .workflow .table.workflow td.txWsline { white-space: pre; } .workflow .table.group, .workflow .table.template { width: 600px; } .workflow .table.group td:last-child, .workflow .table.template td:last-child { text-align: right; } .workflow .table.worktype { width: 1000px; } .workflow .table.worktype td:last-child { text-align: right; } .workflow .table .menuLink { min-width: 3rem; text-align: center; } .workflow .menuAction.worktype { width: 1000px; } .workflow .menuAction.worktype .selectMenu { padding-top: 0.5rem; float: right; font-size: 0.9rem; } .workflow .menuAction.worktype .formInput { max-width: 350px; margin-left: 0.5rem; padding: 0.2rem 0.8rem; font-size: 0.9rem; text-overflow: ellipsis; } .formList dd.formChange { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 92%; padding: 0 4%; } .formList dd.formChange ul.chooseMember, .formList dd.formChange ul.holdMember { width: calc(40% - 2px); border: 1px #999999 solid; } .formChange ul.chooseMember, .formChange ul.holdMember { height: 250px; overflow-y: scroll; padding: 0.5rem; background: #ffffff; } .formChange ul.chooseMember li.changeTitle, .formChange ul.holdMember li.changeTitle { font-weight: 600; } .formChange ul.chooseMember li .formCheck, .formChange ul.holdMember li .formCheck { display: none; } .formChange ul.chooseMember li input + label, .formChange ul.holdMember li input + label { display: block; padding: 0.2rem 0 0.2rem 1.5rem; margin-right: 0; background: url(../assets/images/circle.svg) no-repeat left center; background-size: 1.3rem; } .formChange ul.chooseMember li input + label:hover, .formChange ul.holdMember li input + label:hover { background: #e6e6e6 url(../assets/images/arrow_circle_left.svg) no-repeat left center; background-size: 1.3rem; } .formChange ul.chooseMember li input:checked + label, .formChange ul.holdMember li input:checked + label { padding: 0.2rem 1rem 0.2rem 0; background: url(../assets/images/check_circle_fill.svg) no-repeat right center; background-size: 1.3rem; } .formChange ul.chooseMember li input:checked + label:hover, .formChange ul.holdMember li input:checked + label:hover { background: #e6e6e6 url(../assets/images/arrow_circle_right.svg) no-repeat right center; background-size: 1.3rem; } .formChange > p { width: 6%; height: 20px; background: #e6e6e6; position: relative; } .formChange > p::before { content: ""; border-top: 20px transparent solid; border-right: 20px #e6e6e6 solid; border-bottom: 20px transparent solid; position: absolute; top: 50%; left: -15px; transform: translateY(-50%); } .formChange > p::after { content: ""; border-top: 20px transparent solid; border-bottom: 20px transparent solid; border-left: 20px #e6e6e6 solid; position: absolute; top: 50%; right: -15px; transform: translateY(-50%); } .alignCenter { text-align: center; } .alignLeft { text-align: left; } .alignRight { text-align: right; } .floatNone { float: none; } .floatLeft { float: left; } .floatRight { float: right; } .linkTx { color: #0084b2; text-decoration: none; cursor: pointer; } .linkTx img { width: 1rem; margin: 0 4px; vertical-align: middle; } .linkTx:hover { text-decoration: underline; } .linkBottom { margin-top: 5rem; padding: 0 2rem; font-size: 14px; } .borderTop { border-top: 0.1rem solid rgba(0, 0, 0, 0.1); } .borderBottom { border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1); } .marginBtm0 { margin-bottom: 0.5rem; } .marginBtm1 { margin-bottom: 1rem; } .marginBtm2 { margin-bottom: 2rem; } .marginBtm3 { margin-bottom: 3rem; } .marginBtm5 { margin-bottom: 5rem; } .marginRgt1 { margin-right: 0.9rem; } .marginRgt2 { margin-right: 1.5rem; } .marginRgt3 { margin-right: 3rem; } .paddSide0 { padding: 0 0.5rem; } .paddSide1 { padding: 0 1rem; } .paddSide2 { padding: 0 2rem; } .paddSide3 { padding: 0 3rem; } .txContents { padding: 3rem; } .txNormal { font-size: 16px; line-height: 1.7; letter-spacing: 0; font-weight: normal; } .txIcon { width: 1.1rem; } .txWsline { white-space: pre-line; } .txWswrap { white-space: pre-wrap; } /*# sourceMappingURL=style.css.map */