@charset "UTF-8";

/* ------------------------------------------- CSS Information
File Name:      app.css
Author:         Kotobuki co.,ltd.
Style Info:     オリジナルスタイルセッティング
----------------------------------------------------------- */

/* ----------------------- Basic Style */
/* ------------ View Style */
.pc {
    display: block;
}

.sp {
    display: none;
}

/* ------------ Background Style */
body {
    background: linear-gradient(to top right, #f2477a, #e2444c, #ffbf79);
    width: 100%;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
}

/* ------------ Loading Style */
#loading {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to top right, #f2477a, #e2444c, #ffbf79);
    transition: all ease-in-out .6s;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
}

.loaded {
    opacity: 0;
    visibility: hidden;
}

/* ------------ SVG Style */
h1 svg {
    fill: #fff;
    height: 32px;
    margin: 14px 17px;
}

.logo svg {
    fill: #fff;
    width: 60%;
    max-width: 300px;
    height: 6%;
    max-height: 30px;
}

/* ------------ Form Style */
input.grad[type=email],
input.grad[type=password] {
    background: rgba(255,255,255,0.3);
    border: none;
    border-radius: 5px;
    padding: 0 1em;
    color: #fff;
    font-size: 16px;
    font-size: 1.6rem;
}

input.grad[type=email]:focus,
input.grad[type=password]:focus {
    background: rgba(255,255,255,0.2);
    border: 2px solid;
    border-color: rgba(255,255,255,0.5);
    box-shadow: none;
    outline: none;
}

@keyframes onAutoFillStart { from {} to {}}

input:-webkit-autofill {
    animation-name: onAutoFillStart;
    transition: background-color 50000s ease-in-out 0s, color 50000s ease-in-out 0s;
}

input.grad::placeholder {
    color: rgba(255,255,255,0.6);
}

input[type=checkbox],
input[type=file] {
    display: none;
}

.filelabel {
    width: 100%;
    padding-left: 0.6em;
    cursor: pointer;
}

.filelabel p {
    display: inline-block;
    width: 100%;
    cursor: pointer;
}

.input-group input[type=text],
.input-group input[type=number],
.input-group input[type=email],
.input-group input[type=url],
.input-group input[type=datetime-local],
.input-group input[type=password],
.input-group select {
    background: transparent;
    border: none;
    width: 100%;
    height: 3em;
    padding-left: 0.6em;
}

.input-group textarea {
    background: transparent;
    border: none;
    width: 100%;
    height: 15em;
    padding: 0.6em;
    display: block;
}

.input-group input[type=text]:focus,
.input-group input[type=number]:focus,
.input-group input[type=email]:focus,
.input-group input[type=url]:focus,
.input-group input[type=datetime-local]:focus,
.input-group input[type=password]:focus,
.input-group select:focus,
.input-group textarea:focus {
    box-shadow: none;
    outline: none;
}

.input-group input[type=date]::-webkit-calendar-picker-indicator {
    padding-right: 2em;
}

.input-group input[type=date]::-webkit-calendar-picker-indicator:focus {
    box-shadow: none;
    outline: none;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select::-ms-expand {
    display: none;
}

.grad-check {
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 30px;
    position: relative;
    width: auto;
}

.grad-check::before {
    background: rgba(255,255,255,0.5);
    border: none;
    border-radius: 3px;
    content: '';
    display: block;
    height: 16px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 16px;
    transition: .2s;
}

.grad-check::after {
    background: #e2444c;
    border-radius: 50%;
    content: '';
    display: block;
    height: 12px;
    left: 7px;
    opacity: 0;
    position: absolute;
    top: 5px;
    width: 12px;
    transition: .2s;
}

.numberpull {
    position: relative;
}

.numberpull::after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4.5px solid rgba(0,0,0,0.3);
    content: "";
    position: absolute;
    right: 0.5em;
    top: 50%;
    transform: translateY(-50%);
    -webkit- transform: translateY(-50%);
    width: 0;
}

.numberpull select {
    padding: 0.5em 3em 0.5em 2em;
    font-size: 10px;
    font-size: 1.0rem;
    border: 1px solid;
    border-color: rgba(0,0,0,0.1);
    color: rgba(0,0,0,0.6);
    border-radius: 3px;
    background: #fff;
}

.numberpull select:focus {
    background: rgba(255,255,255,0.2);
    border: 1px solid;
    border-color: rgba(255,255,255,0.3);
    box-shadow: 1px rgba(255,255,255,0.3);
    outline: 1px rgba(255,255,255,0.3);
}

input[type=checkbox]:checked + .grad-check::before {
    background: rgba(255,255,255,0.8);
}

input[type=checkbox]:checked + .grad-check::after {
    opacity: 1;
}

button {
    font-size: 16px;
    font-size: 1.6rem;
}

button.grad[type=submit] {
    background: rgba(255,255,255,0);
    border: 2px solid;
    border-color: rgba(255,255,255,0.3);
    border-radius: 5px;
    color: rgba(255,255,255,0.6);
    transition: .2s;
}

button.grad[type=submit]:hover {
    background: rgba(255,255,255,0.1);
}

.rightcolumnfix .submitbtn {
    width: 100%;
    background: linear-gradient(to top right, #f2477a, #e2444c, #ffbf79);
    margin: 0 auto;
    border: 3px solid;
    border-color: rgba(255,255,255,0.9);
    border-radius: 5px;
}

.rightcolumnfix .submitbtn button {
    cursor: pointer;
    display: block;
    width: 100%;
    line-height: 3em;
    border: none;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.9);
    transition: 0.2s;
}

.rightcolumnfix .submitbtn button:hover {
    background: rgba(255,255,255,0.3);
}

.backblock {
    width: 80%;
    max-width: 300px;
    background: linear-gradient(180deg, #fbfbfc 0%, #dcddde 100%);
    margin: 0 auto;
    border: 3px solid;
    border-color: rgba(255,255,255,1);
    border-radius: 5px;
}

.backblock button {
    cursor: pointer;
    display: block;
    width: 100%;
    line-height: 3em;
    border: none;
    background: rgba(255,255,255,0.1);
    color: rgba(0,0,0,0.5);
    transition: 0.2s;
}

.backblock button:hover {
    background: rgba(255,255,255,0.3);
}

.detailrightcolumn .backblock {
    width: 100%;
    margin: 2em auto 0;
}

/* ------------ Error Style */
p.has-error {
    color: rgba(231,81,78,1);
    line-height: 1.8em;
    font-size: 12px;
    font-size: 1.2rem;
    padding-left: 4em;
}

/* ----------------------- Block Style */
/* ------------ Header Style */
header {
    width: 100%;
    height: 60px;
    position: fixed;
    top: 0;
    left: 0;
    background: linear-gradient(to top right, #f2477a, #e2444c, #ffbf79);
    border-bottom: 1px solid;
    border-color: rgba(255,255,255,0.3);
    z-index: 9000;
}

header .headercover {
    background: rgba(255,255,255,0.1);
    width: 100%;
    height: 100%;
}

header .navtoggle {
    float: left;
    font-size: 26px;
    height: 60px;
    width: 60px;
    text-align: center;
    color: #fff;
    border-right: 1px solid;
    border-color: rgba(255,255,255,0.3);
    cursor: pointer;
    transition: 0.1s;
    display: block;
    position: relative;
}

header .navtoggle i {
    position: absolute;
    top: 50%;
    width: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}

header .navtoggle i.active {
    display: none;
}

header .navtoggle:hover {
    background: rgba(255,255,255,0.3);
}

header h1 {
    float: left;
}

header h1 svg {
    width: 205px;
}

header .personalinfo {
    float: right;
    position: relative;
}

header .personalinfo h3 {
    float: left;
    line-height: 60px;
    color: #fff;
    letter-spacing: 0.05em;
    padding: 0 1.8rem;
}

header .personalinfo h3 span {
    font-size: 14px;
    font-size: 1.4rem;
}

header .personalinfo .personalbtn {
    float: left;
    font-size: 26px;
    font-size: 2.6rem;
    width: 70px;
    height: 60px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    transition: 0.1s;
    display: block;
    position: relative;
    border-left: 1px solid;
    border-color: rgba(255,255,255,0.3);
}

header .personalinfo .personalbtn i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}

header .personalinfo .personalbtn i.active {
    display: none;
}

header .personalinfo .personalbtn:hover {
    background: rgba(255,255,255,0.3);
}

header .personalinfo .personalcover {
    position: absolute;
    top: 60px;
    right: 0;
    width: 280px;
    transform: translateX(100%);
    -webkit- transform: translateX(100%);
    max-width: 60vw;
    background: linear-gradient(to top right, #f2477a, #e2444c, #ffbf79);
    border-radius: 0 0 3px 3px;
    transition: 0.1s;
    -webkit- transition: -webkit-transform 0.1s;
    z-index: 8000;
}

header .personalinfo .personalcover.active {
    transform: translateX(0);
    -webkit- transform: translateX(0);
}

header .personalinfo ol {
    background: rgba(255,255,255,0.1);
    width: 100%;
    height: 100%;
    padding: 1.4em 0 2em;
}

header .personalinfo ol li {
    text-align: center;
    width: 100%;
    color: #fff;
    font-size: 14px;
    font-size: 1.4rem;
}

header .personalinfo ol li:nth-child(1) {
    line-height: 4em;
}

header .personalinfo ol li:nth-child(2) {
    line-height: 2.4em;
}

header .personalinfo ol li:nth-child(3),
header .personalinfo ol li:nth-child(4) {
    line-height: 1.6em;
    text-decoration: underline;
}

header .personalinfo ol li:nth-child(5),
header .personalinfo ol li:nth-child(6) {
    line-height: 3em;
    padding-top: 1.8em;
}

header .personalinfo ol li i {
    font-size: 36px;
    font-size: 3.6rem;
    color: #fff;
}

header .personalinfo ol li span {
    font-size: 14px;
    font-size: 1.4rem;
}

header .personalinfo ol li a {
    display: block;
    width: 80%;
    background: rgba(255,255,255,0.2);
    color: #fff;
    margin: 0 auto;
    border: 1px solid;
    border-color: rgba(255,255,255,0.6);
    border-radius: 3px;
    transition: 0.2s;
}

header .personalinfo ol li a:hover {
    background: rgba(255,255,255,0.3);
}

header .announcewrap {
    float: right;
    position: relative;
    width: 70px;
    height: 60px;
}

header .announcewrap .frontbtn {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: block;
    content: "";
    cursor: pointer;
    transition: 0.2s;
}

header .announcewrap .frontbtn:hover {
    background: rgba(255,255,255,0.3);
}

header #announce_app {
    position: relative;
    width: 100%;
    height: 100%;
}

header #announce_app p {
    font-size: 23px;
    font-size: 2.3rem;
    width: 70px;
    height: 60px;
    text-align: center;
    color: #fff;
    display: block;
    position: relative;
    border-left: 1px solid;
    border-color: rgba(255,255,255,0.3);
}

header #announce_app p i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}

header #announce_app p i.active {
    display: none;
    font-size: 26px;
    font-size: 2.6rem;
}

header #announce_app p span {
    position: absolute;
    display: block;
    font-size: 7px;
    font-size: 0.7rem;
    width: 20px;
    height: 20px;
    line-height: 19px;
    text-align: center;
    right: 20px;
    top: 12px;
    background: linear-gradient(to top right, #f2477a, #e2444c, #ffbf79);
    font-weight: 700;
    border-radius: 100%;
    border: 1px solid;
    border-color: #fff;
}

header #announce_app .announcecover {
    position: absolute;
    top: 60px;
    right: 0;
    width: 300px;
    transform: translateX(100%);
    -webkit- transform: translateX(100%);
    max-width: 70vw;
    background: linear-gradient(to top right, #f2477a, #e2444c, #ffbf79);
    border-radius: 0 0 3px 3px;
    transition: 0.1s;
    z-index: 8000;
    border-radius: 0 0 3px 3px;
}

header #announce_app .announcecover.active {
    transform: translateX(0);
    -webkit- transform: translateX(0);
}

header #announce_app .announcecover ul {
    background: rgba(255,255,255,0.1);
    width: 100%;
    height: 100%;
    padding: 1em 1em;
    overflow: hidden;
}

header #announce_app .announcecover ul li {
    padding: 1.5em 0;
    border-bottom: 1px solid;
    border-color: rgba(255,255,255,0.3);
    font-size: 14px;
    font-size: 1.4rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

header #announce_app .announcecover ul li:last-child {
    border-bottom: none;
    text-align: center;
    line-height: 3em;
    padding-top: 1.8em;
}

header #announce_app .announcecover ul li a {
    color: #fff;
    display: block;
    transition: 0.2s;
}

header #announce_app .announcecover ul li a:hover {
    opacity: 0.8;
}

header #announce_app .announcecover ul li:last-child a {
    width: 80%;
    background: rgba(255,255,255,0.2);
    margin: 0 auto;
    border: 1px solid;
    border-color: rgba(255,255,255,0.6);
    border-radius: 3px;
    font-size: 14px;
    font-size: 1.4rem;
}

header #announce_app .announcecover ul li:last-child a:hover {
    background: rgba(255,255,255,0.3);
}

/* ------------ Footer Style */
footer {
    width: 100%;
    height: 30px;
    background: linear-gradient(to bottom right, rgba(255,255,255,0.1), rgba(255,255,255,0.2), rgba(255,255,255,0.1));
    border-top: 1px solid;
    border-color: rgba(255,255,255,0.3);
    position: relative;
}

footer p {
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    font-size: 11px;
    font-size: 1.1rem;
    color: rgba(255,255,255,0.8);
    text-align: right;
    padding-right: 2em;
}

/* ------------ Column Style */
.contents {
    width: 100%;
    min-height: calc(100vh- 30px);
    min-height: calc(var(--vh, 1vh) * 100 - 30px);
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding-top: 60px;
}

.leftcolumn {
    width: 240px;
    background: rgba(255,255,255,0.8);
    border-right: 1px solid;
    border-top: 0;
    border-left: 0;
    border-bottom: 0;
    border-image: linear-gradient(to top, #f2477a, #e2444c, #ffbf79);
    border-image-slice: 1;
    transition: 0.1s;
}

.leftcolumn.active {
    margin-left: -240px;
}

.centercolumn {
    width: calc(100% - 240px);
    transition: 0.1s;
}

.centercolumn.active {
    width: 100%;
}

.centercolumn .centerinner {
    background: rgba(255,255,255,0.9);
    min-height: 100%;
    padding-bottom: 60px;
    /*-- finalcut height: 200vh; --*/
}

/* ------------ Navigation Style */
.leftcolumn nav {
    position: sticky;
    position: -webkit-sticky;
    top: 60px;
}

.leftcolumn nav ul {
    width: 100%;
}

.leftcolumn nav ul li {
    text-align: left;
    width: 100%;
    line-height: 3.6em;
    border-bottom: 1px solid;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    font-size: 14px;
    font-size: 1.4rem;
    transition: 0.2s;
}

.leftcolumn nav ul li:nth-child(odd) {
    border-image: linear-gradient(to right, #f2477a, #e2444c, #ffbf79);
    border-image-slice: 1;
}

.leftcolumn nav ul li:nth-child(even) {
    border-image: linear-gradient(to left, #f2477a, #e2444c, #ffbf79);
    border-image-slice: 1;
}

.leftcolumn nav ul li:hover {
    background: rgba(255,255,255,0.5);
}

.leftcolumn nav ul li a {
    vertical-align: middle;
    display: block;
    transition: 0.2s;
    color: rgba(0,0,0,0.8);
}

.leftcolumn nav ul li i {
    width: 4rem;
    text-align: center;
    margin-left: 1.1em;
    font-size: 16px;
    font-size: 1.6rem;
}

.leftcolumn nav ul li.requestclass {
    position: relative;
}

.leftcolumn nav ul li.requestclass span {
    position: absolute;
    display: block;
    font-size: 7px;
    font-size: 0.7rem;
    width: 20px;
    height: 20px;
    line-height: 19px;
    text-align: center;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    -webkit- transform: translateY(-50%);
    background: linear-gradient(to top right, #f2477a, #e2444c, #ffbf79);
    font-weight: 700;
    border-radius: 100%;
    border: 1px solid;
    border-color: #fff;
    color: #fff;
}

/* ------------ Paginator Style */
.pager {
    width: 96%;
    margin: 0 auto;
    background: #fff;
    border-bottom: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    border-color: rgba(0,0,0,0.05);
    border-radius: 0 0 5px 5px;
    padding-bottom: 2em;
}

.pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pagination li {
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    margin: 0 0.4em;
    background: rgba(217,48,48,0.05);
    font-size: 10px;
    font-size: 1.0rem;
    border-radius: 3px;
    border: 1px solid;
    border-color: rgba(0,0,0,0.03);
    transition: 0.2s;
    font-weight: 700;
}

.pagination li:hover {
    background: rgba(217,48,48,0.02);
}

.pagination li.active {
    background: rgba(217,48,48,0.4);
    color: rgba(255,255,255,1);
}

.pagination li a {
    display: block;
    color: rgba(0,0,0,0.8);
}

.pagination li a:hover {
    color: rgba(0,0,0,0.3);
}

/* ------------ Inner Title Style */
.innertitle {
    width: 100%;
    height: 50px;
    background: rgba(255,255,255,1);
    border-bottom: 1px solid;
    border-color: rgba(0,0,0,0.05);
}

.innertitle h2 {
    line-height: 50px;
    color: rgba(0,0,0,0.8);
    font-size: 16px;
    font-size: 1.6rem;
    vertical-align: middle;
}

.innertitle h2 i {
    width: 60px;
    text-align: center;
    font-size: 20px;
    font-size: 2.0rem;
}

/* ------------ Search Block Style */
.searchblock {
    width: 100%;
    text-align: center;
    margin: 60px 0;
}

.searchblock .newcreate {
    width: 80%;
    max-width: 600px;
    background: linear-gradient(to top right, #f2477a, #e2444c, #ffbf79);
    margin: 0 auto;
    line-height: 4em;
    border: 3px solid;
    border-color: rgba(255,255,255,0.9);
    border-radius: 5px;
}

.searchblock .newcreate a {
    color: rgba(255,255,255,0.9);
    font-size: 16px;
    font-size: 1.6rem;
    display: block;
    transition: 0.2s;
}

.searchblock .newcreate a:hover {
    background: rgba(255,255,255,0.3);
}

.searchblock .newcreate i {
    width: 40px;
    text-align: center;
}

/* ------------ Display Number Block Style */
.dispnumber {
    width: 96%;
    margin: 0 auto;
    background: #fff;
    border-top: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    border-color: rgba(0,0,0,0.05);
    border-radius: 5px 5px 0 0;
    padding: 2em 2em 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    font-size: 1.2rem;
    color: rgba(0,0,0,0.8);
}

/* ------------ Table List Style */
.listblock {
    width: 96%;
    margin: 0 auto;
    background: #fff;
    border-left: 1px solid;
    border-right: 1px solid;
    border-color: rgba(0,0,0,0.05);
    padding: 1em;
    overflow: scroll;
}

.listpc {
    width: 100%;
    margin-bottom: 1em;
}

.listsp {
    display: none;
}

.listblock tr {
    border-bottom: 1px solid;
    border-color: rgba(0,0,0,0.03);
    font-size: 13px;
    font-size: 1.3rem;
}

.listblock tr:nth-child(odd) {
    background: rgba(217,48,48,0.03);
}

.listblock tr th {
    background: rgba(217,48,48,0.4);
    color: rgba(255,255,255,1);
    border-right: 3px solid;
    border-color: rgba(255,255,255,1);
    text-align: center;
    font-weight: 700;
}

.listblock tr th a {
    color: rgba(255,255,255,1);
}

.listblock tr th:first-child {
    border-radius: 5px 0 0 0;
}

.listblock tr th:last-child {
    border-radius: 0 5px 0 0;
    border-right: none;
}

.listblock tr th,
.listblock tr td {
    padding: 1.5em 0.5em;
    line-height: 1.4em;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.listblock tr th:first-child,
.listblock tr td:first-child {
    width: 6%;
}

.listblock tr th:last-child,
.listblock tr td:last-child {
    width: 10%;
}

.listblock tr td {
    color: rgba(0,0,0,0.8);
}

.listblock tr .tablecenter {
    text-align: center;
}

.listblock tr .tableright {
    text-align: right;
}

.listblock tr a.textlink {
    position: relative;
}

.listblock tr a.textlink::after {
    content: "";
    position: absolute;
    width: calc(100% + 4px);
    left: -2px;
    bottom: -2px;
    height: 1px;
    background: rgba(0,0,0,0.4);
    visibility: visible;
    opacity: 1;
    transition: 0.1s;
}

.listblock tr a.textlink:hover::after {
    visibility: hidden;
    opacity: 0;
}

.listblock tr a.btnlink {
    background: linear-gradient(to top right, #f2477a, #e2444c, #ffbf79);
    padding: 0.7em 1.2em;
    color: rgba(255,255,255,1);
    border-radius: 5px;
    border: 1px solid;
    border-color: rgba(255,255,255,0.9);
    font-size: 11px;
    font-size: 1.1rem;
    font-weight: 700;
    transition: 0.2s;
}

.listblock tr a.btnlinkoff {
    background: linear-gradient(180deg, #fbfbfc 0%, #dcddde 100%);
    padding: 0.7em 1.2em;
    color: rgba(0,0,0,0.8);
    border-radius: 5px;
    border: 1px solid;
    border-color: rgba(255,255,255,1);
    font-size: 11px;
    font-size: 1.1rem;
    font-weight: 700;
    transition: 0.2s;
}

.listblock tr a.btnlink:hover,
.listblock tr a.btnlinkoff:hover {
    opacity: 0.8;
}

p.read,
p.unread {
    font-size: 7px;
    font-size: 0.7rem;
    width: 24px;
    height: 24px;
    line-height: 23px;
    text-align: center;
    font-weight: 700;
    border-radius: 100%;
    border: 1px solid;
    border-color: #fff;
    margin: 0 auto;
}

p.read {
    background: linear-gradient(180deg, #fbfbfc 0%, #dcddde 100%);
    color: rgba(0,0,0,0.8);
}

p.unread {
    background: linear-gradient(to top right, #f2477a, #e2444c, #ffbf79);
    color: #fff;
}

p.status1,
p.status2,
p.status3,
p.status4,
p.status5,
p.status6,
p.status7 {
    height: 24px;
    line-height: 23px;
    border-radius: 5px;
    border: 1px solid;
    border-color: #fff;
    color: rgba(255,255,255,1);
}

h2.status1,
h2.status2,
h2.status3,
h2.status4,
h2.status5,
h2.status6,
h2.status7 {
    padding: 0.8em 0;
    margin: 0 auto 1em;
    border-radius: 5px;
    width: 100%;
    text-align: center;
    border: 1px solid;
    border-color: #fff;
    color: rgba(255,255,255,1);
}

.status1 {
    background: rgba(126,194,194,1);
}

.status2 {
    background: rgba(252,157,154,1);
}

.status3 {
    background: rgba(170,165,209,1);
}

.status4 {
    background: rgba(188,150,146,1);
}

.status5 {
    background: rgba(255,87,34,1);
}

.status6 {
    background: rgba(117,117,117,1);
}

.status7 {
    background: linear-gradient(180deg, #fbfbfc 0%, #dcddde 100%);
    color: rgba(0,0,0,0.8);
}

td.tablecenter.lightcolor {
    color: rgba(184,177,171,1);
}

span.lightcolor {
    color: rgba(184,177,171,1);
    font-size: 10px;
    font-size: 1.0rem;
}

span.boldcolor {
    color: rgba(255,87,34,1);
    font-weight: bold;
    font-size: 12px;
    font-size: 1.2rem;
}

/* ------------ Form Column Style */
.formblock {
    width: 96%;
    margin: 60px auto;
}

.formblock form {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.formblock .formleftcolumn {
    background: #fff;
    border: 1px solid;
    border-color: rgba(0,0,0,0.05);
    border-radius: 5px;
    width: calc(100% - 350px);
    padding: 1em;
}

.formblock .formrightcolumn {
    width: 300px;
}

.formblock .formrightcolumn .rightcolumnfix {
    position: sticky;
    position: -webkit-sticky;
    top: 170px;
    background: #fff;
    border: 1px solid;
    border-color: rgba(0,0,0,0.05);
    border-radius: 3px;
    padding: 1em;
}

/* ------------ Form Block Style */
.formblock .formleftcolumn {
    font-size: 14px;
    font-size: 1.4rem;
    color: rgba(0,0,0,0.8);
}

.formblock .formleftcolumn legend {
    padding: 1em 0 2em;
}

.formblock .formleftcolumn .form-group {
    width: 100%;
    margin: 2em 0;
    padding: 0 2em;
}

.formblock .formleftcolumn .form-group .inputGroupContainer {
    padding: 0 0 0 0;
}

.formblock .formleftcolumn .form-group .inputGroupContainer .input-group {
    width: 100%;
    position: relative;
    background: rgba(217,48,48,0.15);
    border: 1px solid;
    border-color: rgba(0,0,0,0.05);
    border-radius: 5px;
    padding-left: 3em;
    box-sizing: border-box;
    line-height: 3em;
}

.form-group .inputGroupContainer .input-group.selectgroup::after,
.form-group .inputGroupContainer .input-group.filegroup::after,
.form-group .inputGroupContainer .input-group.dategroup::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 1.5em;
    top: 50%;
    transform: translateY(-50%);
    -webkit- transform: translateY(-50%);
    font-size: 16px;
    font-size: 1.6rem;
}

.form-group .inputGroupContainer .input-group.selectgroup::after {
    content: "\f0dc";
}

.form-group .inputGroupContainer .input-group.filegroup::after {
    content: "\f574";
}

.form-group .inputGroupContainer .input-group.dategroup::after {
    content: "\f274";
}

.formblock .formleftcolumn .form-group .inputGroupContainer .input-group span {
    position: absolute;
    left: 0;
    top: 0;
    width: 3em;
    height: 100%;
    background: rgba(217,48,48,0.5);
    border: 1px solid;
    border-color: rgba(0,0,0,0.05);
    border-radius: 5px 0 0 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.formblock .formleftcolumn .form-group .inputGroupContainer .input-group span i {
    font-size: 16px;
    font-size: 1.6rem;
    color: #fff;
}

.form-group .inputGroupContainer .input-group ins {
    display: none;
    position: absolute;
    padding: 10px;
    font-size: 12px;
    line-height: 1.6em;
    color: #fff;
    border-radius: 5px;
    background: #000;
    width: 250px;
    text-decoration: none;
}

.form-group .inputGroupContainer .input-group ins::before {
    content: "";
    position: absolute;
    top: 5px;
    right: 100%;
    border: 10px solid transparent;
    border-top: 20px solid #000;
    margin-left: -20px;
    transform: rotateZ(90deg);
}

.form-group .inputGroupContainer .input-group ins small {
    font-size: 12px;
    font-size: 1.2rem;
}

.form-group .inputGroupContainer .input-group span:hover ins {
    display: inline-block;
    top: 0;
    left: 60px;
}

.formblock .formleftcolumn .form-group .inputGroupContainer .input-group p.desform {
    padding-left: 0.6em;
    background: rgba(255,255,255,1);
}

.formblock .formleftcolumn .form-group p.changepass {
    text-align: right;
}

.formblock .formleftcolumn .form-group p.changepass a {
    text-decoration: underline;
    color: rgba(217,48,48,0.8);
    transition: 0.1s;
}

.formblock .formleftcolumn .form-group p.changepass a:hover {
    color: rgba(217,48,48,0.5);
}

/* ------------ Detail Column Style */
.detailblock {
    width: 96%;
    margin: 60px auto;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.detailblock .detailleftcolumn {
    background: #fff;
    border: 1px solid;
    border-color: rgba(0,0,0,0.05);
    border-radius: 5px;
    width: calc(100% - 350px);
    padding: 1em;
}

.detailblock .detailrightcolumn {
    width: 300px;
}

.detailblock .detailrightcolumn .rightcolumnfix {
    position: sticky;
    position: -webkit-sticky;
    top: 170px;
    background: #fff;
    border: 1px solid;
    border-color: rgba(0,0,0,0.05);
    border-radius: 3px;
    padding: 1em;
}

/* ------------ Detail Block Style */
.detailblock .detailleftcolumn {
    font-size: 14px;
    font-size: 1.4rem;
    color: rgba(0,0,0,0.8);
}

.detailblock .detailleftcolumn .detail-group {
    width: 100%;
    margin: 2em 0;
    padding: 0 2em;
}

.detailblock .detailleftcolumn .detail-group.sticky {
    position: fixed;
    top: 60px;
    left: 240px;
    width: calc(100% - 240px);
    border-bottom: 1px solid;
    border-color: rgba(0,0,0,0.05);
    background: #fff;
    margin: 0;
    padding: 1em;
    z-index: 100;
    transition: 0.1s;
}

.detailblock .detailleftcolumn .detail-group.active {
    width: 100%;
    left: 0;
    transition: 0.1s;
}

.detailblock .detailleftcolumn .detail-group .detailGroupContainer {
    padding: 0 0 0 0;
    width: 100%;
    position: relative;
    border: 1px solid;
    border-color: rgba(0,0,0,0.05);
    border-radius: 5px;
    line-height: 1.6em;
    padding: 1.2em 1em;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
}

.detailblock .detailleftcolumn .detail-group .detailGroupContainer.title {
    background: rgba(217,48,48,0.15);
    align-items: center;
}

.detailblock .detailleftcolumn .detail-group .detailGroupContainer.description {
    align-items: flex-start;
}

.detailblock .detailleftcolumn .detail-group .detailGroupContainer h2 {
    width: calc(100% - 2.8rem);
    position: relative;
}

.detailblock .detailleftcolumn .detail-group .detailGroupContainer h2 a {
    text-decoration: underline;
}

.detailblock .detailleftcolumn .detail-group .detailGroupContainer h2 a:hover {
    opacity: 0.7;
}

.detailblock .detailleftcolumn .detail-group .detailGroupContainer.title h2 {
    font-weight: 700;
}

.detailblock .detailleftcolumn .detail-group .detailGroupContainer h3 {
    font-size: 18px;
    font-size: 1.8rem;
    width: 2.8rem;
}

.jobdetail .detailblock .detailleftcolumn {
    min-height: 1100px;
}

/* ------------ RightColumn Data Style */
.datainfor {
    width: 100%;
}

.dateinfor {
    width: 100%;
    font-size: 12px;
    font-size: 1.2rem;
    padding: 0 0 1rem;
    margin: 0 0 1rem;
    border-bottom: 1px solid;
    border-color: rgba(0,0,0,0.05);
}

.detailblock .dateinfor {
    padding: 0;
    margin: 0;
    border-bottom: none;
}

.dateinfor p {
    padding: 0 0 0 0.5em;
    line-height: 2.6em;
    color: rgba(0,0,0,0.6);
}

.dateinfor p i {
    width: 1.4em;
    text-align: center;
}

.dateinfor p span {
    color: rgba(0,0,0,1);
}

/* ------------ Profile Block Style */
.userdetail .centerinner {
    padding-bottom: 0;
}
.profileblock {
    width: 100%;
    min-height: calc(100vh - 140px);
    height: auto;
    background: linear-gradient(to top right, #f2477a, #e2444c, #ffbf79);
}

.profileblock .profilecover {
    width: 100%;
    min-height: calc(100vh - 140px);
    height: auto;
    background: rgba(255,255,255,0.1);
    position: relative;
}

.profileblock .profilecover .profilewrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
    width: 80%;
    max-width: 600px;
}

.profileblock .profilecover .profilewrap .contblock {
    background: rgba(255,255,255,0.7);
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0 1.5rem;
}

.profileblock .profilecover .profilewrap .contblock:first-of-type {
    border-radius: 5px 5px 0 0;
    padding: 2rem 1.5rem 0;
}

.profileblock .profilecover .profilewrap .contblock:nth-of-type(4) {
    padding: 0 1.5rem 1rem;
}

.profileblock .profilecover .profilewrap .contblock h2,
.profileblock .profilecover .profilewrap .contblock h3 {
    line-height: 3.6em;
    border-bottom: 1px solid;
    border-color: rgba(0,0,0,0.1);
}

.profileblock .profilecover .profilewrap .contblock:nth-of-type(4) h2,
.profileblock .profilecover .profilewrap .contblock:nth-of-type(4) h3 {
    border-bottom: none;
}

.profileblock .profilecover .profilewrap .contblock h2 {
    width: 70%;
    text-align: center;
}

.profileblock .profilecover .profilewrap .contblock h3 {
    width: 30%;
    color: rgba(0,0,0,0.7);
    padding-left: 1rem;
}

.profileblock .profilecover .profilewrap ul {
    width: 100%;
    background: rgba(255,255,255,0.7);
    padding: 0 1.5rem 3rem;
    margin-bottom: 6rem;
    border-radius: 0 0 5px 5px;
}

.profileblock .profilecover .profilewrap ul li {
    text-align: right;
    line-height: 1.8em;
    font-size: 12px;
    font-size: 1.2rem;
}

.profileblock .profilecover .profilewrap ul li a {
    text-decoration: underline;
    color: rgba(217,48,48,0.8);
    transition: 0.1s;
}

.profileblock .profilecover .profilewrap ul li a:hover {
    color: rgba(217,48,48,0.5);
}

.profileblock .profilecover .profilewrap .logoutbtn {
    width: 100%;
    margin-bottom: 2rem;
}

.profileblock .profilecover .profilewrap .logoutbtn a {
    display: block;
    width: 80%;
    max-width: 300px;
    background: rgba(255,255,255,0.2);
    color: #fff;
    margin: 0 auto;
    border: 1px solid;
    border-color: rgba(255,255,255,0.6);
    border-radius: 3px;
    transition: 0.2s;
    text-align: center;
    line-height: 3em;
}

.profileblock .profilecover .profilewrap .logoutbtn a:hover {
    background: rgba(255,255,255,0.3);
}

/* ----------------------- Page Style */
/* ------------ Login Style */
.login_wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    max-width: 600px;
    background: rgba(255,255,255,0);
    border-radius: 5px;
    text-align: center;
}

.toppage .login_wrap {
    transform: translateY(-110%) translateX(-50%);
    -webkit- transform: translateY(-110%) translateX(-50%);
}

.loginpage .login_wrap {
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}

.login_wrap h2 {
    margin: 0 auto 3vh;
}

.login_wrap h3 {
    background: rgba(255,255,255,0.3);
    line-height: 4vh;
    max-width: 400px;
    width: 80%;
    margin: 0 auto;
    border-radius: 5px;
    transition: .2s;
    color: rgba(255,255,255,1);
}

.login_wrap h3:hover {
    background: rgba(255,255,255,0.38);
}

.login_wrap h3 a {
    color: rgba(255,255,255,1);
    display: block;
}

.login_wrap .formbox {
    width: 100%;
    height: 32vh;
}

.login_wrap .formbox ul {
    height: 18vh;
}

.login_wrap .formbox ul li {
    height: 6vh;
    padding: 1vh 0;
}

.login_wrap .formbox ul li input {
    height: 4vh;
    width: 90%;
    max-width: 400px;
}

.login_wrap .formbox ul li button {
    height: 4vh;
    width: 90%;
    max-width: 400px;
}

.login_wrap .formbox .remembercheck {
    height: 4vh;
    padding: 0.5vh 0;
    font-size: 12px;
    font-size: 1.2rem;
    color: rgba(255,255,255,0.6);
}

.login_wrap .formbox .errormessages {
    height: 4vh;
    padding: 0.5vh 0;
    font-size: 12px;
    font-size: 1.2rem;
    color: rgba(255,255,255,1);
}

.login_wrap .formbox .loginnav {
    color: rgba(255,255,255,0.9);
    font-size: 12px;
    font-size: 1.2rem;
    width: 80%;
    margin: 4vh auto 0;
}

.login_wrap .formbox .loginnav p {
    line-height: 1.5em;
}

.login_wrap .formbox .loginnav p span {
    text-decoration: underline;
    font-weight: 700;
}

/* ------------ Request Style */
.detailblock .detailleftcolumn .detail-group .detailGroupContainer span {
    display: block;
    font-weight: 500;
    font-size: 10px;
    font-size: 1.0rem;
    padding: 0 0.5em;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border-radius: 3px;
    min-width: 100px;
    text-align: center;
    margin-left: 10px
}

.detailblock .detailleftcolumn .messagewrap {
    width: 100%;
    margin: 2em 0;
    padding: 0 2em;
}

.detailblock .detailleftcolumn .messagewrap .messageinner {
    background: linear-gradient(to top right, #f2477a, #e2444c, #ffbf79);
    border: 1px solid;
    border-color: rgba(0,0,0,0.05);
    border-radius: 5px;
    min-height: 900px;
}

.detailblock .detailleftcolumn .messagewrap .messageinner .messagecover {
    background: rgba(255,255,255,0.1);
    width: 100%;
    height: 100%;
    padding: 1.5em;
    min-height: 900px;
}

.detailblock .detailleftcolumn .messagewrap .messageinner .myself .messagecolumn {
    margin-left: auto;
    margin-right: 0;
    background: #47e164;
}

.detailblock .detailleftcolumn .messagewrap .messageinner .myself .messagecolumn::after {
    content: "";
    position: absolute;
    top: 3px;
    right: -19px;
    border: 8px solid transparent;
    border-left: 18px solid #47e164;
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg);
}

.detailblock .detailleftcolumn .messagewrap .messageinner .myself .messagecolumn ul {
    right: 102%;
    text-align: right;
}

.detailblock .detailleftcolumn .messagewrap .messageinner .opponent .messagecolumn {
    margin-left: 0;
    margin-right: auto;
    background: #d6d8d7;
}

.detailblock .detailleftcolumn .messagewrap .messageinner .opponent .messagecolumn::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 3px;
    left: -19px;
    border: 8px solid transparent;
    border-right: 18px solid #d6d8d7;
    -webkit-transform: rotate(35deg);
    transform: rotate(35deg);
}

.detailblock .detailleftcolumn .messagewrap .messageinner .opponent .messagecolumn ul {
    left: 102%;
    text-align: left;
}

.detailblock .detailleftcolumn .messagewrap .messageinner .messagecolumn {
    width: 60%;
    padding: .5em .8em;
    position: relative;
    margin-bottom: .5em;
    line-height: 1.4em;
    border-radius: 12px;
}

.detailblock .detailleftcolumn .messagewrap .messageinner .messagecolumn ul {
    position: absolute;
    bottom: 0;
    width: auto;
    white-space: nowrap;
    font-size: 10px;
    font-size: 1.0rem;
    color: rgba(0,0,0,0.5);
    color: #fff;
}

.detailblock .detailleftcolumn .messagewrap .messageinner .messagecolumn ul li {
    line-height: 1.4em;
}

.detailblock .detailleftcolumn .messagewrap .messageinner .myself .dataappear {
    margin-left: auto;
    margin-right: 0;
}

.detailblock .detailleftcolumn .messagewrap .messageinner .opponent .dataappear {
    margin-left: 0;
    margin-right: auto;
}

.detailblock .detailleftcolumn .messagewrap .messageinner .dataappear {
    margin-bottom: 1.5em;
    width: 60%;
    font-size: 24px;
    font-size: 2.4rem;
    content: "";
    display: flex;
    justify-content: flex-end;
}

.detailblock .detailleftcolumn .messagewrap .messageinner .dataappear p {
    padding-left: 0.5em;
}

.detailblock .detailleftcolumn .messagewrap .messageinner .dataappear p span {
    font-size: 8px;
    font-size: 0.8rem;
}

.detailblock .detailleftcolumn .messagewrap .messageinner .dataappear a {
    display: block;
    color: #fff;
}

.detailblock .detailleftcolumn .messagewrap .messageinner .dataappear a:hover {
    opacity: 0.7;
}

.detailblock .detailrightcolumn form {
    position: fixed;
    width: calc(100% - 240px);
    bottom: 0;
    left: 240px;
    background: #fff;
    border-top: 1px solid;
    border-color: rgba(0,0,0,0.05);
    height: 70px;
    overflow: hidden;
    transition: 0.1s;
}

.detailblock .detailrightcolumn form.active {
    width: 100%;
    left: 0;
}

.detailblock .detailrightcolumn form.sticky {
    bottom: 30px;
}

.detailblock .detailrightcolumn form .fixedform .iconforms {
    display: flex;
    justify-content: flex-end;
}

.detailblock .detailrightcolumn form .fixedform .form-group {
    margin: 15px;
}

.detailblock .detailrightcolumn form .fixedform .form-group.smaller {
    width: 30%;
    margin-top: 0;
}

.detailblock .detailrightcolumn form .fixedform .form-group.icons {
    width: 50px;
    margin-top: 0;
    margin-left: 0;
}

.detailblock .detailrightcolumn form .fixedform .form-group .inputGroupContainer {
    padding: 0;
}

.detailblock .detailrightcolumn form .fixedform .form-group .inputGroupContainer .input-group {
    width: 100%;
    position: relative;
    background: rgba(217,48,48,0.15);
    border: 1px solid;
    border-color: rgba(0,0,0,0.05);
    border-radius: 5px;
    padding-left: 3em;
    box-sizing: border-box;
    line-height: 3em;
}

.detailblock .detailrightcolumn form .fixedform .form-group.icons .inputGroupContainer .input-group {
    padding-left: 0;
    background: rgba(217,48,48,0.6);
    text-align: center;
}

.detailblock .detailrightcolumn form .fixedform .form-group.icons .inputGroupContainer .input-group .filelabel {
    padding-left: 0;
    font-size: 20px;
    font-size: 2rem;
    color: #fff;
}

.detailblock .detailrightcolumn form .fixedform .form-group .inputGroupContainer .input-group span {
    position: absolute;
    left: 0;
    top: 0;
    width: 3em;
    height: 100%;
    background: rgba(217,48,48,0.5);
    border: 1px solid;
    border-color: rgba(0,0,0,0.05);
    border-radius: 5px 0 0 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #fff;
}

.detailblock .detailrightcolumn form .fixedform .form-group .inputGroupContainer .input-group textarea {
    height: 40px;
    padding: 0.5em 0.6em 0;
}

.detailblock .detailrightcolumn form .fixedform .form-group .inputGroupContainer .input-group select .lower:nth-child(1),
.detailblock .detailrightcolumn form .fixedform .form-group .inputGroupContainer .input-group select .lower:nth-child(2),
.detailblock .detailrightcolumn form .fixedform .form-group .inputGroupContainer .input-group select .lower:nth-child(3),
.detailblock .detailrightcolumn form .fixedform .form-group .inputGroupContainer .input-group select .lower:nth-child(6),
.detailblock .detailrightcolumn form .fixedform .form-group .inputGroupContainer .input-group select .lower:nth-child(7) {
    display: none;
}

.detailblock .detailrightcolumn form .fixedform .submitbtn{
    width: 240px;
    margin: 0 15px 13px 0;
    height: 52px;
}

.jobdestroy .detailblock .detailrightcolumn form .submitbtn,
.jobcancel .detailblock .detailrightcolumn form .submitbtn {
    margin-top: 7px;
}

/* ------------ Company Style */
.companycreate .formblock .formleftcolumn .form-group .inputGroupContainer .input-group input,
.companycreate .formblock .formleftcolumn .form-group .inputGroupContainer .input-group select,
.companyedit .formblock .formleftcolumn .form-group .inputGroupContainer .input-group input,
.companyedit .formblock .formleftcolumn .form-group .inputGroupContainer .input-group select {
    width: 100%;
    box-sizing: border-box;
    display: inline-block;
}
.companycreate .formblock .formleftcolumn .form-group:nth-of-type(3) .inputGroupContainer .input-group input,
.companyedit .formblock .formleftcolumn .form-group:nth-of-type(3) .inputGroupContainer .input-group input {
    width: calc((100% - 5px) / 2);
}

.companycreate .formblock .formleftcolumn .form-group:nth-of-type(3) .inputGroupContainer .input-group input:nth-of-type(2),
.companyedit .formblock .formleftcolumn .form-group:nth-of-type(3) .inputGroupContainer .input-group input:nth-of-type(2) {
    padding-left: 1em;
    border-left: 1px solid;
    border-color: rgba(0,0,0,0.05);
    border-radius: 0;
}

.companycreate .formblock .formleftcolumn .form-group:nth-of-type(4) .inputGroupContainer .input-group select,
.companyedit .formblock .formleftcolumn .form-group:nth-of-type(4) .inputGroupContainer .input-group select {
    width: 25%;
}

.companycreate .formblock .formleftcolumn .form-group:nth-of-type(4) .inputGroupContainer .input-group input:nth-of-type(1),
.companyedit .formblock .formleftcolumn .form-group:nth-of-type(4) .inputGroupContainer .input-group input:nth-of-type(1) {
    width: calc((100% - 25% - 5px) / 2);
    padding-left: 1em;
    border-left: 1px solid;
    border-color: rgba(0,0,0,0.05);
    border-radius: 0;
}

.companycreate .formblock .formleftcolumn .form-group:nth-of-type(4) .inputGroupContainer .input-group input:nth-of-type(2),
.companyedit .formblock .formleftcolumn .form-group:nth-of-type(4) .inputGroupContainer .input-group input:nth-of-type(2) {
    border-top: 1px solid;
    border-color: rgba(0,0,0,0.05);
}

.companycreate .formblock .formleftcolumn .form-group:nth-of-type(5) .inputGroupContainer .input-group input,
.companyedit .formblock .formleftcolumn .form-group:nth-of-type(5) .inputGroupContainer .input-group input {
    width: calc((100% - 10px) / 3);
}

.companycreate .formblock .formleftcolumn .form-group:nth-of-type(5) .inputGroupContainer .input-group input:nth-of-type(2),
.companycreate .formblock .formleftcolumn .form-group:nth-of-type(5) .inputGroupContainer .input-group input:nth-of-type(3),
.companyedit .formblock .formleftcolumn .form-group:nth-of-type(5) .inputGroupContainer .input-group input:nth-of-type(2),
.companyedit .formblock .formleftcolumn .form-group:nth-of-type(5) .inputGroupContainer .input-group input:nth-of-type(3) {
    border-left: 1px solid;
    border-color: rgba(0,0,0,0.05);
    border-radius: 0;
    padding-left: 1em;
}

/* ------------ Announcement Style */
.announcementlist .listblock .listsp .cardinner li:last-child .cardinnercont {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.announcementlist .frontview ol {
    width: 100%;
}

.announcementlist .frontview ol li {
    line-height: 1.4em;
    font-size: 13px;
    font-size: 1.3rem;
    border-bottom: 1px solid;
    border-color: rgba(0,0,0,0.03);
}

.announcementlist .frontview ol li:nth-child(odd) {
    background: rgba(217,48,48,0.03)
}

.announcementlist .frontview ol li:first-child {
    background: rgba(217,48,48,0.4);
    color: rgba(255,255,255,1);
    border-radius: 5px 5px 0 0;
    font-weight: 700;
    padding: 1.5em 1em;
}

.announcementlist .frontview ol li a {
    transition: 0.2s;
    display: block;
    padding: 1em 1.5em;
}

.announcementlist .frontview ol li a:hover {
    background: rgba(217,48,48,0.1);
}

.announcementlist .frontview ol li h2 {
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.8em;
    font-weight: 700;
}

.announcementlist .frontview ol li h3 {
    line-height: 2.0em;
    font-size: 12px;
    font-size: 1.2rem;
    color: rgba(0,0,0,0.3);
}

.announcementlist .frontview ol li h3 span {
    color: #ed514e;
    font-weight: 700;
}

.announcementlist .frontview ol li p {
    line-height: 2.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(0,0,0,0.7);
}

/* ----------------------- Media Query */
@media only screen and (max-width: 767px) {
    /* ------------ View Style */
    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    /* ------------ Header Style */
    header h1 svg {
        width: 43px;
    }

    header .personalinfo h3 {
        display: none;
    }

    header .personalinfo .personalbtn {
        width: 60px;
    }

    header .personalinfo ol li {
        font-size: 12px;
        font-size: 1.2rem;
    }

    header .personalinfo ol li span {
        font-size: 11px;
        font-size: 1.1rem;
    }

    header .announcewrap {
        width: 60px;
    }

    header #announce_app p {
        width: 60px;
    }

    header #announce_app p span {
        right: 7px;
    }

    header #announce_app .announcecover ul li {
        font-size: 12px;
        font-size: 1.2rem;
    }

    header #announce_app .announcecover ul li:last-child a {
        font-size: 12px;
        font-size: 1.2rem;
    }

    /* ------------ Footer Style */
    footer p {
        font-size: 10px;
        font-size: 1.0rem;
        padding-right: 1em;
    }

    /* ------------ Column Style */
    .leftcolumn {
        width: 40%;
        margin-left: -40%;
    }

    .leftcolumn.active {
        margin-left: 0;
    }

    .centercolumn {
        width: 100%;
    }

    .centercolumn.active {
        width: 60%;
    }

    /* ------------ Navigation Style */
    .leftcolumn nav ul li {
        font-size: 12px;
        font-size: 1.2rem;
    }

    .leftcolumn nav ul li i {
        margin-left: 0.2em;
    }

    /* ------------ Search Block Style */
    .searchblock .newcreate {
        line-height: 3em;
    }

    /* ------------ Table List Style */
    .listpc {
        display: none;
    }

    .listsp {
        display: block;
    }

    .listsp ul {
        width: 100%;
    }

    .listsp ul li {
        color: rgba(0,0,0,0.8);
        font-size: 13px;
        font-size: 1.3rem;
        padding: 0 1em;
    }

    .listsp ul.cardtitle {
        background: rgba(217,48,48,0.4);
        font-weight: 700;
        border-radius: 5px 5px 0 0 ;
        display: flex;
        align-items: center;
    }

    .listsp ul.cardtitle li {
        line-height: 3.6em;
        color: rgba(255,255,255,1);
    }

    .listsp ul.cardtitle li:first-child {
        padding-right: 1rem;
    }

    .listsp ul.cardtitle li a {
        color: rgba(255,255,255,1);
    }

    .listsp ul.cardtitle li p.read,
    .listsp ul.cardtitle li p.unread {
        display: inline-block;
    }

    .listsp ul.cardinner {
        border: 1px solid;
        border-color: rgba(217,48,48,0.4);
        border-bottom: none;
        border-top: none;
    }

    .listsp ul.cardinner li {
        line-height: 1.6em;
        border-bottom: 1px dashed;
        border-color: rgba(0,0,0,0.03);
        padding: 0.3em 1em;
        display: flex;
    }

    .listsp ul.cardinner li:last-child {
        border-bottom: none;
    }

    .listsp ul.cardinner li div.cardinnertitle {
        width: 24%;
        text-align: right;
    }

    .listsp ul.cardinner li div.cardinnercont {
        width: 76%;
    }

    .listsp ul.cardinner li a {
        text-decoration: underline;
    }

    .listsp ul.cardinner p.status1,
    .listsp ul.cardinner p.status2,
    .listsp ul.cardinner p.status3,
    .listsp ul.cardinner p.status4,
    .listsp ul.cardinner p.status5,
    .listsp ul.cardinner p.status6,
    .listsp ul.cardinner p.status7 {
        height: 1.6em;
        line-height: 1.6em;
        border-radius: 5px;
        width: 50%;
        text-align: center;
    }

    .listsp ul.cardedit {
        line-height: 2.6em;
        border: 1px solid;
        border-color: rgba(217,48,48,0.4);
        border-top: none;
        border-radius: 0 0 5px 5px;
        background: rgba(217,48,48,0.05);
        margin-bottom: 1em;
    }

    .listsp ul.cardedit li {
        text-align: center;
    }

    .listsp ul.cardedit li a.btnlink {
        background: linear-gradient(to top right, #f2477a, #e2444c, #ffbf79);
        padding: 0.7em 1.2em;
        color: rgba(255,255,255,1);
        border-radius: 5px;
        border: 1px solid;
        border-color: rgba(255,255,255,0.9);
        font-size: 11px;
        font-size: 1.1rem;
        font-weight: 700;
        transition: 0.2s;
    }

    .listsp ul.cardedit li a.btnlinkoff {
        background: linear-gradient(180deg, #fbfbfc 0%, #dcddde 100%);
        padding: 0.7em 1.2em;
        color: rgba(0,0,0,0.8);
        border-radius: 5px;
        border: 1px solid;
        border-color: rgba(255,255,255,1);
        font-size: 11px;
        font-size: 1.1rem;
        font-weight: 700;
        transition: 0.2s;
    }

    /* ------------ Form Column Style */
    .formblock form {
        display: block;
    }

    .formblock .formleftcolumn {
        font-size: 12px;
        font-size: 1.2rem;
        width: 100%;
    }

    .formblock .formrightcolumn {
        width: 100%;
        margin: 60px 0;
    }

    /* ------------ Form Block Style */
    .formblock .formleftcolumn .form-group {
        padding: 0;
    }

    .formblock .formleftcolumn .form-group p.desform {
        padding-left: 0.6em;
    }

    /* ------------ Detail Column Style */
    .detailblock {
        display: block;
    }

    .detailblock .detailleftcolumn {
        font-size: 12px;
        font-size: 1.2rem;
        width: 100%;
    }

    .detailblock .detailrightcolumn {
        width: 100%;
        margin: 60px 0;
    }

    /* ------------ Detail Block Style */
    .detailblock .detailleftcolumn .detail-group {
        padding: 0;
    }

    /* ------------ Profile Block Style */
    .profileblock {
        height: auto;
    }

    .profileblock .profilecover {
        height: auto;
    }

    .profileblock .profilecover .profilewrap {
        position: relative;
        top: 0;
        left: 0;
        transform: translateY(0) translateX(0);
        -webkit- transform: translateY(0) translateX(0);
        margin: 0 auto;
        padding: 6rem 0;
    }

    .profileblock .profilecover .profilewrap .contblock {
        display: block;
    }

    .profileblock .profilecover .profilewrap .contblock h2,
    .profileblock .profilecover .profilewrap .contblock h3 {
        font-size: 12px;
        font-size: 1.2rem;
        line-height: 2em;
        border-bottom: none;
    }

    .profileblock .profilecover .profilewrap .contblock h2 {
        width: 100%;
        text-align: center;
        border-bottom: 1px solid;
        border-color: rgba(0,0,0,0.1);
        padding-bottom: 1em;
    }

    .profileblock .profilecover .profilewrap .contblock h3 {
        width: 100%;
        color: rgba(0,0,0,0.5);
        padding-left: 1rem;
        padding-top: 1em;
    }

    .profileblock .profilecover .profilewrap ul {
        margin-bottom: 3rem;
    }

    .profileblock .profilecover .profilewrap ul li {
        font-size: 10px;
        font-size: 1.0rem;
    }

    /* ----------------------- Page Style */
    /* ------------ Login Style */
    .toppage .login_wrap {
        transform: translateY(-90%) translateX(-50%);
        -webkit- transform: translateY(-90%) translateX(-50%);
    }

    .login_wrap h3 {
        line-height: 6vh;
    }

    .login_wrap .formbox {
        height: auto;
    }

    .login_wrap .formbox ul {
        height: 27vh;
    }

    .login_wrap .formbox ul li {
        height: 9vh;
        padding: 1.5vh 0;
    }

    .login_wrap .formbox ul li input {
        height: 6vh;
    }

    .login_wrap .formbox ul li button {
        height: 6vh;
    }

    .login_wrap .formbox .remembercheck {
        height: 4vh;
        padding: 0.5vh 0;
    }

    .login_wrap .formbox .errormessages {
        height: 4vh;
        padding: 0.5vh 0;
    }

    .login_wrap .formbox .loginnav {
        width: 100%;
        font-size: 10px;
        font-size: 1.0rem;
    }

    /* ------------ Company Create Style */
    .companycreate .formblock .formleftcolumn .form-group:nth-of-type(3) .inputGroupContainer .input-group input,
    .companyedit .formblock .formleftcolumn .form-group:nth-of-type(3) .inputGroupContainer .input-group input {
        width: calc((100% - 5px) / 2);
    }
    .companycreate .formblock .formleftcolumn .form-group:nth-of-type(4) .inputGroupContainer .input-group select,
    .companyedit .formblock .formleftcolumn .form-group:nth-of-type(4) .inputGroupContainer .input-group select {
        width: 100%;
    }

    .companycreate .formblock .formleftcolumn .form-group:nth-of-type(4) .inputGroupContainer .input-group input:nth-of-type(1),
    .companyedit .formblock .formleftcolumn .form-group:nth-of-type(4) .inputGroupContainer .input-group input:nth-of-type(1) {
        width: 100%;
        padding-left: 0.6em;
        border-top: 1px solid;
        border-color: rgba(0,0,0,0.05);
    }

    .companycreate .formblock .formleftcolumn .form-group:nth-of-type(4) .inputGroupContainer .input-group input:nth-of-type(2),
    .companyedit .formblock .formleftcolumn .form-group:nth-of-type(4) .inputGroupContainer .input-group input:nth-of-type(2) {
        border-top: 1px solid;
        border-color: rgba(0,0,0,0.05);
    }

    .companycreate .formblock .formleftcolumn .form-group:nth-of-type(5) .inputGroupContainer .input-group input,
    .companyedit .formblock .formleftcolumn .form-group:nth-of-type(5) .inputGroupContainer .input-group input {
        width: calc((100% - 10px) / 3);
    }

    .companycreate .formblock .formleftcolumn .form-group:nth-of-type(5) .inputGroupContainer .input-group input:nth-of-type(2),
    .companycreate .formblock .formleftcolumn .form-group:nth-of-type(5) .inputGroupContainer .input-group input:nth-of-type(3),
    .companyedit .formblock .formleftcolumn .form-group:nth-of-type(5) .inputGroupContainer .input-group input:nth-of-type(2),
    .companyedit .formblock .formleftcolumn .form-group:nth-of-type(5) .inputGroupContainer .input-group input:nth-of-type(3) {
        border-left: 1px solid;
        border-color: rgba(0,0,0,0.05);
        padding-left: 1em;
    }

    /* ------------ Request Style */
    .jobdetail .detailblock .detailleftcolumn {
        min-height: 400px;
    }

    .jobdetail .detailblock .detailrightcolumn {
        height: auto;
        overflow: hidden;
    }

    .detailblock .detailleftcolumn .messagewrap .messageinner {
        min-height: 300px;
    }

    .detailblock .detailleftcolumn .messagewrap .messageinner .messagecover {
        min-height: 300px;
    }

    .detailblock .detailleftcolumn .detail-group .detailGroupContainer {
        display: block;
    }

    .detailblock .detailleftcolumn .detail-group .detailGroupContainer h3 {
        width: 3.0rem;
        float: left;
    }

    .detailblock .detailleftcolumn .detail-group .detailGroupContainer h2 {
        float: right;
        width: calc(100% - 3.0rem);
    }

    .detailblock .detailleftcolumn .detail-group .detailGroupContainer span {
        clear: both;
        width: 100%;
        height: 0;
        overflow: hidden;
    }

    .detailblock .detailleftcolumn .detail-group.sticky {
        left: 0;
        width: 100%;
    }

    .detailblock .detailleftcolumn .detail-group.sticky.active {
        left: 40%;
        width: 60%;
    }

    .detailblock .detailleftcolumn .detail-group.sticky .detailGroupContainer h2 {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .detailblock .detailleftcolumn .messagewrap {
        padding: 0;
    }

    .detailblock .detailleftcolumn .messagewrap .messageinner .opponent .messagecolumn::after {
        top: -2px;
        left: -18px;
    }

    .detailblock .detailleftcolumn .messagewrap .messageinner .myself .messagecolumn::after {
        top: -2px;
        right: -18px;
    }

    .detailblock .detailrightcolumn form {
        left: 0;
        width: 100%;
    }

    .detailblock .detailrightcolumn form.active {
        left: 40%;
        width: 60%;
    }

    .detailblock .detailrightcolumn form .fixedform .iconforms {
        flex-wrap: wrap;
    }

    .detailblock .detailrightcolumn form .fixedform .form-group.smaller {
        width: 100%;
    }

    .detailblock .detailrightcolumn form .fixedform .form-group.icons {
        width: calc(25% - 30px);
    }

    .detailblock .detailrightcolumn form .fixedform .submitbtn {
        width: calc(50% - 15px);
    }

}