/* Font */

@font-face {
    font-family: 'Pretendard Variable';
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: local('Pretendard Variable'), url('../font/PretendardVariable.woff2') format('woff2-variations');
}

/* color 변수 */
:root {
    --grey-l: #bfccd8; /* dgist 회색 light*/
    --grey: #8092a6; /* dgist 지정 회색 */
    --grey-d: #5f7690; /* dgist 회색 dark*/

    --navy-l: #3e607f; /* dgist 남색 light */
    --navy: #254460; /* dgist 지정 남색 */
    --navy-d: #042440; /* dgist 남색 dark */

    --blue-l: #019DD8; /* dgist 파랑 light, 밝은 하늘색 */
    --blue: #00418F; /* dgist 지정 파랑 */
    --blue-a: #0062cb; /* dgist 파랑 active */

    --red: #fe504f; /* dgist 지정 빨강 */

    --t-default: #464646; /* text-defalut - 기본 텍스트 */
    --t-dark: #191919; /* text-dark - 좀 더 짙은 강조, 제목*/
    --t-highlight: #1167A0; /* text-highlight - hover 등 강조될 때 */
    /* body 및 레이아웃 기본 설정 */
}

/* text color 설정 */
.t-b {color: var(--blue) !important;} /* text-main-light */
.t-g {color: var(--grey) !important}
.t-hl {color: var(--t-highlight) !important;} /* text-highlight */

/* bg color 설정*/
.bg-b {background-color: var(--blue) !important; color: #fff !important;}
.bg-bl {background-color: var(--blue-l) !important; color: #fff !important;}
.bg-g {background-color: var(--grey) !important; color: #fff !important;}

/* utility css */
.dp-none {display: none !important;}
.f-center {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center}
.tc {text-align: center}
.disabled {pointer-events: none; opacity: 0.4;}
.col {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center}
.bold {font-weight: bold;}

.pb-0 {padding-bottom: 0 !important;}
.pb-10 {padding-bottom: 10px}
.pb-20 {padding-bottom: 20px}
.pb-30 {padding-bottom: 30px}
.pt-0 {padding-top: 0 !important;}
.pt-10 {padding-top: 10px}
.pt-20 {padding-top: 20px}
.pt-30 {padding-top: 30px}
.mb-0 {margin-bottom: 0 !important;}
.mb-10 {margin-bottom: 10px}
.mb-20 {margin-bottom: 20px}
.mb-30 {margin-bottom: 30px}
.mt-0 {margin-top: 0 !important;}
.mt-10 {margin-top: 10px}
.mt-20 {margin-top: 20px}
.mt-30 {margin-top: 30px}
/* 기본 설정 */
* {font-family: 'Pretendard Variable';}
:focus-visible:not(input) {text-decoration: underline; outline: none;}
::-moz-selection, input::-moz-selection  {background-color: var(--grey);color: #fff;}
::selection, input::selection  {background-color: var(--grey);color: #fff;}

html {font-size: 62.5%;}
form {margin-block-end: 0;}
@media only screen and (max-width: 767px) {
    /*  가로 767px 이하에서 폰트 사이즈 축소*/
    html {font-size: 55.5%;}
}
body {min-width: 360px; display: -webkit-box;display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 1; font-weight: 500; overflow-y: overlay; overflow-wrap: break-word; word-break: break-word;}
.bg {width: 100vw; height: 100vh; position: fixed; top:0; left: 0; z-index: -1; background-image: url('../images/login-bg.jpg'); background-size: cover; background-repeat: no-repeat; background-position: top; }
.body {width: 100%; color: var(--t-default); padding-bottom: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 1.6rem;}

.header, .wrap, .footer {max-width: 900px;}
.footer {min-height: 50px; padding-bottom: 30px;}

/* wrap */
.wrap {width: 90%; padding: 40px; background: #ffffff; box-shadow:  0 0 20px 0 var(--grey-l);
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: flex-start; -ms-flex-pack: flex-start; justify-content: flex-start; -ms-flex-wrap: nowrap; flex-wrap: nowrap;
}

a {color: inherit;}
a:hover {color: inherit;}
button, input, optgroup, select, textarea, h1, h2, h3, h4, h5 {font-family: inherit;}
h1 {font-size: 4.8rem;}
h2 {font-size: 3.6rem;}
h3 {font-size: 2.4rem;}
h4 {font-size: 1.8rem;}
h5 {font-size: 1.2rem;}

/* noti */
.noti {text-align: center; padding: 30px 0;}
.noti p {font-size: 1.6rem; color: var(--grey); word-break: keep-all}

/* alert */
.rule.alert {padding: 60px 0; line-height: 1.6}
.rule.alert .header {color: var(--red); font-weight: 600; font-size: 2.1rem;}



/* main 꾸밈 */
.form.login {display: flex; flex-direction: column;}
.login-container {width: calc(100% + 80px); display: flex; margin: -40px}
.login-img {width: 48%; background-image: url('../images/login-img.jpg'); background-size: cover}
.login-contents {width: 52%; min-width: 376px; padding: 20px; min-width: }
@media (max-width: 768px){
    .login-img {display: none;}
    .login-contents {width: 100%; min-width: 100%;}
}
/* login */
.login .button.large {font-size: 2.2rem; width: 100%;}

.ui.labels .label, .ui.label {font-size: 1.4rem;}


/* semantic ui 덮어쓰기용 */
.ui.divider {width: 100%;}
.ui.header,
.ui.segments .segment,
.ui.segment,
.ui.steps .step,
.ui.step {font-family: inherit; font-size: inherit;}
.ui.header .sub.header {font-size: 1.6rem; line-height: 1.5; padding-top: 10px;}

/* modal */
.ui.modal {font-size: 1.6rem; border-radius: 2px;}
.ui.modal.medium {max-width: 600px;}

.ui.modal .title {padding: 30px 30px 0;}
.ui.modal > .content {padding: 0 30px 30px !important;}

.ui.modal .header, .ui.modal .content {background: transparent; }
.ui.modal .header:not(.ui) {font-size: 2.2rem; font-family: revert;}
.ui.modal .header.divider {margin-bottom: 20px;}

.ui.modal .actions > .button {margin-left: 0;}
.ui.modal .field {padding-bottom: 20px;}
.ui.modal .button-area:last-child {padding-bottom: 10px;}

.ui.modal.terms {font-size: 1.6rem;}
.ui.modal.terms .terms-list {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;  padding-bottom: 15px;}
.ui.modal.terms .terms-list .terms {max-height: 20vh; overflow-y: auto; border: 1px solid rgba(34, 36, 38, 0.15); padding: 15px; font-size: 1.4rem;}
.ui.modal.terms .terms-list .terms.max {max-height: 40vh;}
.ui.modal.terms .txt .dept {padding: 10px 10px 0 10px; line-height: 1.3;}
.ui.modal.terms .txt .dept p {margin-bottom: 4px}
.ui.modal.terms .txt .link {color: var(--blue); text-decoration: underline; cursor: pointer;}
.ui.modal.terms .button-area.submit {padding-top: 10px;}
.ui.modal.terms .terms-list.en {display: none;}

.ui.modal.alert .title .ui.header .content{font-size: 2rem;}
.ui.modal.alert .title .ui.header .content .sub.header {font-size: 1.6rem;}
.ui.modal.alert .field:last-of-type {padding-top: 10px;}
.ui.modal.alert .button-area {-ms-flex-wrap: wrap;flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.ui.modal.alert .button-area:last-child {padding-bottom: 0;}
.ui.modal.alert .button-area .button {width: auto; max-width: 100%; min-width: 86px; height: auto; padding: 5px; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; }

@media only screen and (max-width: 767px) {
    .ui.modal > .close {
        top: 15px !important;
        right: 15px !important;
    }
    .form.login .button.big {height: 50px;}
    .form.login .input {height: 48px;}
    .form.login .input i {height: 30px; width: 30px;}
}
/* loading */
.ui.text.loader {letter-spacing: 1rem; padding-left: 10px;}
.ui.inverted.dimmer .ui.loader {color: var(--grey);}
.ui.inverted.dimmer .ui.loader:before {border-color: rgba(3, 116, 240,.25);}
.ui.inverted.dimmer .ui.loader:after {border-color: rgba(3,116,240,1) transparent transparent;}

/* button 설정 */
button.button {border: none; font-family: inherit; font-weight: inherit;}
.button {
    display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: center; -ms-flex-align: center;
    align-items: center; -webkit-box-pack: center; -ms-flex-pack: center;  justify-content: center; -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto; -ms-flex-wrap: wrap; flex-wrap: wrap;
    -ms-user-select: none;-moz-user-select: -moz-none;-webkit-user-select: none;user-select: none; -webkit-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out;
    min-width: 128px; border-radius: 2px; cursor: pointer; padding: 0 8px; text-align: center; word-break: break-word; cursor: pointer;
}

.button:active,
.button:focus {box-shadow: 0 0 8px 0 var(--blue); text-decoration: none;}
.button a {-webkit-box-flex: 2;-ms-flex-positive: 2;flex-grow: 2; text-align: center;}

.button.bg-b:hover {background-color:  var(--blue-l) !important;}
.button.bg-b:active {background-color: var(--blue-a) !important;}
.button.bg-bl:hover {background-color: var(--blue) !important;}
.button.bg-bl:active {background-color: var(--blue-a) !important;}
.button.bg-g:hover {background-color: var(--grey-d) !important;}

.button.tiny {height: 28px; font-size: max(1.4rem, 14px);}
.button.mini {height: 36px; font-size: max(1.4rem, 14px);}
.button.medium {height: 48px;}
.button.large {min-height: 50px; font-size: 2.5rem;}
.button.big {height: 72px;}
.button.max {max-width: none !important;}

.button.icon {border: none; background: none;}

.button.border {padding: 8px; background-color: transparent; color: var(--blue); border-radius: 2px; border: 1px solid var(--blue); font-size: 2rem;}
.button.border:hover,
.button.border:active,
.border.button:focus {background-color: rgba(0, 65, 143, 0.1); border-color: var(--blue); color: var(--blue);}
.button.border.active {background-color: var(--blue); color: #fff;}
.button.two-factor {width: 257px;}

.button.login {padding: 8px; background-color: transparent; border: 1px solid var(--blue); color: var(--blue); border-radius: 2px; font-size: 2rem;}
.button.login:hover,
.button.login:active,
.button.login:focus {background-color: var(--grey-d); color: #fff; border-color: var(--grey-d);}
.button.login.active {background-color: var(--grey); color: #fff; border-color: var(--grey);}

/* button-area */
.button-area {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly;
    -ms-flex-wrap: wrap;flex-wrap: wrap;}
.button-area .button:not(:last-of-type) {margin-right: 15px;}

/*.button-area .button {margin: 5px;}*/
.button-area.submit {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.button-area.submit .button {max-width: none; height: 48px; font-size: 2rem; -ms-flex-preferred-size: 0; flex-basis: 0; min-width: 160px}
.button-area.list .button {min-width: 160px; -ms-flex-preferred-size: 0; flex-basis: 0; margin-bottom: 10px;}
.button-area.list.verification .button {min-width: 120px;}

.button-area.status {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--blue); padding-bottom: 0}
.button-area.status .button {width: auto; min-width: 60px; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0;}
.button-area.status i.close {color: var(--grey);}
.button-area.status {padding-bottom: 0;}

.button-area.col .button {width: 100%;}

@media(max-width: 417px) {
    .button-area.list .button, .button-area.submit .button {min-width: 100%}
    .button-area .button:not(:last-of-type) {margin-right: 0; margin-bottom: 10px;}
    .button-area .button.lang {margin-bottom: 0;}
}

/* field */
.field {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-bottom: 20px;}
.field .header:not(.ui) {font-size: 2.2rem; color: var(--t-dark); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; padding-bottom: 10px;}
.field .header label {color: var(--grey)}
.field .header .button {-webkit-box-flex: 0;-ms-flex-positive: 0;flex-grow: 0;}

/* 자동완성 관련 css 수정 */
.input input:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px #ffffff inset; box-shadow: 0 0 0 1000px #ffffff inset; -webkit-text-fill-color:  var(--t-dark); font-size: 2rem;}
.input input:-webkit-autofill::first-line {font-size: inherit;}
.input.active input:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px #ffffff inset; box-shadow: 0 0 0 1000px #ffffff inset;}
.input.light input:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px #ffffff inset; box-shadow: 0 0 0 1000px #ffffff inset; -webkit-text-fill-color: var(--t-dark);}
.input.active.light input:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px #ffffff inset; box-shadow: 0 0 0 1000px #ffffff inset; -webkit-text-fill-color: var(--t-dark);}

/* input */
.input {width: 100%; height: 57px; border-radius: 2px; border-bottom: 1px solid var(--grey); padding: 9px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 15px;}
.input.active {border-bottom: 1px solid var(--blue);}

.input input[type="text"], .input input[type="password"] {text-decoration: none; min-width: 100px; border:none; outline: none; -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2; height: 100%; background-color: transparent; color: var(--t-dark); padding:0 0 0 10px; font-size: 1.8rem; margin: 0;}
.input input[type="text"]::-webkit-input-placeholder, .input input[type="password"]::-webkit-input-placeholder {color: var(--grey); font-size: 2rem;}
.input input[type="text"]::-moz-placeholder, .input input[type="password"]::-moz-placeholder {color: var(--grey); font-size: 2rem;}
.input input[type="text"]:-ms-input-placeholder, .input input[type="password"]:-ms-input-placeholder {color: var(--grey); font-size: 2rem;}
.input input[type="text"]::-ms-input-placeholder, .input input[type="password"]::-ms-input-placeholder {color: var(--grey); font-size: 2rem;}
.input input[type="text"]::placeholder, .input input[type="password"]::placeholder {color: var(--grey); font-size: max(1.4rem, 14px);}
.input input[type="text"]:focus,.input input[type="text"]:active,.input input[type="text"]:focus-visible,
.input input[type="password"]:focus,.input input[type="password"]:active.input input[type="password"]:focus-visible {border: none; outline: none; }

.input i {opacity: 1; color: var(--grey); width:36px; height: 36px; border-radius: 2px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-negative: 0; flex-shrink: 0; cursor: pointer;}
.input i.default {background-color: transparent; color: var(--grey); font-size: 2rem;}
.input.light {width: 100%; height: 48px; border-radius: 2px; border-bottom: 1px solid var(--grey); background-color: #fff; padding: 0 5px; }
.input.light.active {background-color: #fff; border-color: var(--blue);}
.input.light .button, .header .button.light {background-color: var(--blue-l); min-width: 67px; height: 36px; border-radius: 2px; font-size: 1.6rem; color: #fff; border: none; }
.input.light .button {-ms-flex-negative: 0;flex-shrink: 0; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; width: 82px; margin-left: 5px; margin-left: 5px;}
.header .button.light {width: auto}
.input.light .button:focus, .input.light .button:active, .input.light .button:hover,
.header .button.light:focus, .header .button.light:active, .header .button.light:hover {background-color: var(--blue);}
.input.light i {background: none; color: var(--grey); font-size: 2rem;}
.input.light input[type="text"], .input.light input[type="password"] {color: var( --t-dark); margin-right: 5px;}
.input.light .timeout {color: var(--blue); -ms-flex-negative: 0; flex-shrink: 0;}

/* checkbox */
.checkbox {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;}
.checkbox input[type="checkbox"] {margin-right: 10px;}

/* title */
.title {padding-bottom: 20px; text-align: center}
.title .ui.header {margin-top: 0; padding-bottom: 15px; line-height: 1.1;}
.title .ui.header .content {font-size: 2.8rem; padding-top: 10px; color: var(--blue);}
.title .ui.header .content .sub {font-size: 1.8rem; color: var(--blue-l); font-weight: bold}

/* header.jsp 내의 head 영역 */
.header.top {width: 90%; display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 30px 0;}
.header.top .logo {display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; cursor: pointer;}
.header.top .logo .logo-img {max-width: 340px; height: auto; margin-right: 20px;}
.header.top .button-area {padding-bottom: 0; justify-self: flex-end; align-items: center}
.header.top .button-area .button {min-width: 60px; padding: 0;}
.header.top .button-area .button:not(.active) {background-color: transparent !important; color: var(--blue) !important;}
.header.top .button-area .button:not(.active):hover {border: 1px solid var(--blue);}
.header.top .button-area .divider {width: 1px; height: 12px; background-color: var(--blue); margin-right: 15px;}
@media (max-width: 768px){
    .header.top {padding:20px 0 10px;}
    .header.top .logo {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-bottom: 10px;}
    .header.top .logo .logo-img {max-width: 280px; margin-right: 0;}
    .header.top .button-area .button{min-width:65px; font-size: 1.4rem; margin-right: 5px;}
}

/* divided list */
.horizontal.list {display: -webkit-box;display: -ms-flexbox;display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.horizontal.list .item {font-size: 1.6rem; color: var(--blue); cursor: pointer; position: relative; margin: 0 8px;}
.horizontal.list .item:after {content: ""; top: 2px; margin-left: 8px; height: 1rem; width: 1px; position: absolute; display: inline-block; background: var(--blue)}
.horizontal.list .item:last-of-type:after {display: none;}
.horizontal.list.small .item {font-size: 1.4rem; color: var(--t-dark);}
.horizontal.list.small .item:after {height: 1rem; background: var(--t-dark);}


/* 2차 인증 설정하기 */
.ui.accordion .title:not(.ui) {padding: 0 0 15px 0; font-family: revert; color: revert;} /* semantic ui 제거 */
.ui.accordion .header {margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; font-weight: 700;}
.ui.accordion .header .content {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: normal; -ms-flex-pack: normal; justify-content: normal;}
.ui.accordion .header .content .dropdown {font-size: 2rem; margin-left: 5px}
.ui.accordion .header.title {font-size: 2.2rem; -ms-flex-wrap: nowrap; flex-wrap: nowrap;}
.ui.accordion .header .button {max-width: 160px;}
.ui.accordion .content img {max-width: 300px;}
.ui.accordion .steps .content {width: 100%; text-align: left}
.ui.accordion .steps .content .title {text-align: inherit}
.header .content .ui.label {margin-left: -6px; font-size: 1.4rem;}
.header.divider.title .content span {margin: 0;}
.header.center-item {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; align-items: center; justify-content: center; font-size:2.2rem; padding: 0 0 10px 0; margin-bottom: 30px; }
.header.center-item .button i {display: none;}
.header.center-item.title .content span {margin: 0;}
.header.center-item .button {width: auto; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; font-weight: 500; max-width: 160px;}
@media (max-width: 768px) {
    .header.center-item .button {width: 28px; min-width: 28px; height: 28px;}
    .header.center-item .button i {margin: 0; padding: 0; display: revert; height: auto;}
    .header.center-item .button .button-text {display: none;}
}
.announcement-content {margin-right: 20px; color: var(--red); font-size: 1.8rem;}

.ui.table tr td:first-child, .ui.table tr th:first-child  {text-align: left; }
.row-group {display: flex; align-items: center;}
.alert-txt {color: var(--red); font-size: 1.4rem;}
.ex-txt {font-size: 1.2rem; color: var(--grey); padding-top: 5px;}
.bracket {}
.bracket:before {content: "(";}
.bracket:after {content: ")"}
.NON_ISIGN .header {flex-wrap: wrap;}
.NON_ISIGN .header .t-hl {font-size: 1.4rem; font-weight: 400; padding-top: 10px; line-height: 1.3;}

.app-link {display: flex; flex-wrap: wrap; justify-content: center; padding-top: 10px;}
.app-link a {display: flex; align-items: center; border: 1px solid rgba(34, 36, 38, 0.15); background-color: #ffffff; border-radius: 2px; padding: 5px 10px; width: 150px; margin: 0 5px;}
.app-link a span {display: inline-block; padding-left: 10px;}
.app-link a img {width: 30px;}

/* header.divider */
.header .ui.list {-ms-flex-item-align: end;align-self: flex-end;}
.header.divider {font-size:2.2rem; color: var(--t-dark); border-bottom: 1.5px solid #363636; padding: 0 0 10px 0; margin-bottom: 30px;}
.header.divider .button {width: auto; -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; font-weight: 500;}
.header.divider .button i {display: none;}
.header.divider:first-of-type {padding-top: 0;}

.header.divider .content {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 2; -ms-flex-positive: 2; flex-grow: 2;}

@media (max-width: 768px) {
    .header.divider .button {width: 28px; min-width: 28px; height: 28px;}
    .header.divider .button i {margin: 0; padding: 0; display: revert; height: auto;}
    .header.divider .button .button-text {display: none;}
}

/*popup*/
.popup {position: fixed; z-index: 100; width: 95%; height: auto; max-width: 500px; border-radius: 2px; -webkit-box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.2); box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.2); bottom: -250px; padding: 15px; border:none; opacity: 0}
.popup.bg-b .header.divider {color: #fff; border-color: var(--blue-l); }
.popup.bg-b .border.button  {border-color: #fff; color: #fff; font-size: 1.4rem}
.popup .header.divider {margin-bottom: 10px; padding-right: 20px;}
.popup .button-area {padding-bottom: 0;}
.popup .field {padding-bottom: 0;}
.popup p {font-size: 1.6rem; font-weight: 300;}
.popup i.close {position: absolute; right: 15px; top: 15px; cursor: pointer;}

/* message */
.ui.message.grey {border: 1px solid var(--grey); background-color: #fff;}
.ui.message .header{font-family: revert; margin: 0 0 20px 0; }
.ui.message > .close.icon {right: 20px; color: var(--grey-d);}

/* step */
.step:not(.one, .ui) {display: none;}



/* footer */
.footer {padding-bottom: 20px;}