/**************************************************
 * PAGE | 지출보고서
 **************************************************/

 /* 230417 박세연 */
 /* 지출보고서 안내 시작 */

.contents-header.expense .container {
    height: 300px;
    padding-bottom: 0px;
}

.contents-header.expense:before {
    display: none;
}

.contents.expense-guide {
    padding: 80px 0 0;
}

.expense-guide .summary {
    padding: 0 0 120px;
}

.expense-guide .summary .title {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.expense-guide .summary .title b {
    font-size: 28px;
    line-height: 44px;
}

.expense-guide .summary .title b > span {
    color: #276EF1;
}

.expense-guide .summary .title .img {
    width: 351px;
    height: auto;
    margin-left: auto;
    margin-right: 80px;
}

.expense-guide .summary .desc {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.expense-guide .summary .desc div {
    width: 50%;
}

.expense-guide .summary .desc div + div {
    margin-left: 40px;
}

.expense-guide .summary .desc div p {
    color:#727B8B;
    font-size: 18px;
    line-height: 27px;
    word-break: keep-all;
}

.expense-guide .summary .desc div p + p {
    margin-top: 10px;
}

.expense-guide .policy {
    padding: 120px 0;
}

.title_exp b {
    font-size: 32px;
    line-height: 48px;
}

.title_exp p {
    margin-top: 12px;
    color: #727B8B;
    font-size: 18px;
    line-height: 27px;
}

.expense-guide .policy .slider {
    position: relative;
    margin-top: 40px;
}

.expense-guide .policy .slider .swiper-container {
    position: absolute;
    right: 0;
    border-radius: 16px;
    overflow: hidden;
}

.expense-guide .policy .slider .swiper-wrapper {
    width: 850px;
    height: 500px;
}

.expense-guide .policy .slider .swiper-wrapper .swiper-slide {
    border-radius: 16px;
    overflow: hidden;
}

.expense-guide .policy .slider .swiper-wrapper .swiper-slide .policy-group {
    position: relative;
}

.expense-guide .policy .slider .swiper-wrapper .swiper-slide .policy-group > b {
    position: absolute;
    top: 320px;
    left: 60px;
    color: #fff;
    font-size:28px;
    font-weight: 700;
    line-height: 36px;
}

.expense-guide .policy .slider .swiper-wrapper .swiper-slide .policy-group > p {
    position: absolute;
    top: 368px;
    left: 60px;
    color: #fff;
    font-size:16px;
    font-weight: 400;
    line-height: 24px;
}

.expense-guide .policy .slider .swiper-wrapper .swiper-slide .policy-group.ver02 > b {
    position: absolute;
    top: 344px;
    left: 60px;
}

.expense-guide .policy .slider .swiper-wrapper .swiper-slide .policy-group.ver02 > p {
    position: absolute;
    top: 392px;
    left: 60px;
}

.expense-guide .policy .slider .swiper-pagination {
    max-width: 450px;
    /* display: flex; */
    /* flex-direction: column; */
    position: inherit;
    text-align: left;
    z-index: 2;
}

.expense-guide .policy .slider .swiper-pagination-bullet {
    display: inline-flex;
    align-items: center;
    width: 450px;
    height: auto;
    margin: 0 0;
    padding-bottom: 12px;
    border-radius: 0;
    background: none;
    color: #727B8B;
    font-size:22px;
    line-height: 30px;
    opacity: 1;
}

.expense-guide .policy .slider .swiper-pagination-bullet + .swiper-pagination-bullet {
    margin-top: 27px;
}

.expense-guide .policy .slider .swiper-pagination-bullet .icon path {
    color: #727B8B;
}

.expense-guide .policy .slider .swiper-pagination-bullet-active {
    position: relative;
    border-bottom: 1px solid #222;
    color: #222;
    font-weight: 700;
}

.expense-guide .policy .slider .swiper-pagination-bullet-active::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    width: 100px;
    height: 1px;
    background-color: #fff;
}

.expense-guide .policy .slider .swiper-pagination-bullet.swiper-pagination-bullet-active .icon path {
    fill: #222;
}

.expense-guide .item {
    padding: 300px 0 120px;
}

.expense-guide .item .circle  {
    margin-top: 40px;
}

.expense-guide .item .circle ul {
    display: flex;
    justify-content: center;
}

.expense-guide .item .circle ul li {
    width: 276px;
    height: 276px;
    padding: 100px 0;
    border-radius: 50%;
    background: #F4F8FE;
    text-align: center;
}

.expense-guide .item .circle ul li + li {
    margin-left: 32px;
}

.expense-guide .item .circle ul li > b {
    color: #276EF1;
    font-size: 24px;
    font-weight: 800;
}

.expense-guide .item .circle ul li > p {
    margin-top: 8px;
    color: #222;
    font-size: 24px;
    font-weight: 400;
}

.expense-guide .procedure {
    padding: 0 0 120px;
}

.expense-guide .procedure .box  {
    margin-top: 40px;
    border-radius: 24px;
    box-shadow: 0px 0px 20px rgba(39, 110, 241, 0.1);
    overflow: hidden;
}

.expense-guide .procedure .box ul {
    display: flex;
    padding: 68px 0;
}

.expense-guide .procedure .box ul li {
    position: relative;
    width: calc(100% / 3);
    text-align: center;
}

.expense-guide .procedure .box ul li::before {
    content: '';
    position: absolute;
    top: 50%;
    margin-top: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    background:url(./../img/expense/procedure-icon04.svg) no-repeat 50% / 100% auto;
}

.expense-guide .procedure .box ul li:last-child::before {
    display: none;
}

.expense-guide .procedure .box ul li > img {
    display: block;
    margin: 0 auto;
    width: 68px;
}

.expense-guide .procedure .box ul li > b {
    display: block;
    margin-top: 10px;
    color: #222;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

.expense-guide .procedure .box ul li > p {
    margin-top: 6px;
    color: #727B8B;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
}

.expense-guide .procedure .caution {
    margin-top: 80px;
}

.expense-guide .procedure .caution p {
    color: #4c5159;
    font-size: 24px;
    font-weight: 700;
}

.expense-guide .procedure .caution p > .icon {
    margin-right: 8px;
    vertical-align: middle;
}

.expense-guide .procedure .caution ul {
    margin-top: 20px;
}

.expense-guide .procedure .caution ul li {
    position: relative;
    padding-left: 12px;
    color: #727B8B;
    font-size: 18px;
    line-height: 27px;
}

.expense-guide .procedure .caution ul li + li {
    margin-top: 8px;
}

.expense-guide .procedure .caution ul li::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: 4px;
    height: 4px;
    background-color: #727B8B;
    border-radius: 50%;
}

.fixing {
    height: 180px;
    background-color: #fff;
}

.expense-bar {
    background-color: #fff;
    border-top: 1px solid #E0E0E0;
}

.expense-bar.fix {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3; 
    box-shadow: 0px 0px 20px rgba(39, 110, 241, 0.1);
    border-top: 1px solid #E9F1FD;
}

.expense-bar.fix > .inner {
    height: 88px;
}

.expense-bar > .inner {
    display: flex;
    align-items: center;
    width: 1200px;
    height: 180px;
    margin: 0 auto;
}

.expense-bar > .inner > .step01 {
    color: #727B8B;
    font-size: 18px;
    font-weight: 700;
}

.expense-bar > .inner > .step02 {
    color: #222222;
    font-size: 18px;
    font-weight: 700;
}

.expense-bar > .inner > .btn {
    margin-left: auto;
}

.expense-bar > .inner > .btn > .button {
    width: 276px;
}

.expense-bar > .inner > .btn > .button + .button {
    margin-left: 24px;
}

/* 지출보고서 안내 끝 */

/* 지출보고서 신청 시작 */

.form-text:read-only {
    background: #F8F8F8;
}

.form-text:read-only:focus {
    border-color: #d8ddeb;
}

.expense-apply .address {
    display: flex;
    margin-bottom: 20px;
}

.expense-apply .address > .button {
    width: 106px;
    margin-left: 8px;
    font-size: 16px;
    font-weight: 400;
}

.expense-apply .date {
    display: flex;
    align-items: center;
}

.expense-apply .date > span {
    color: #a3abc0;
    font-size: 24px;
    margin: 0 8px;
}

.form-datepicker {
    position: relative;
    max-width: 240px;
}

.form-datepicker .datepicker {
    width: 240px;
    background-color: #fff;
}

.form-datepicker .datepicker.readonly {
    background-color: #F8F8F8;
}

.form-datepicker .datepicker.readonly:focus {
    border-color: #d8ddeb;
}

.form-datepicker .datepicker:focus {
    border-color: #276ef1;
}

.form-datepicker button {
    position: absolute;
    top: 16px;
    right: 24px;
    width: 24px;
    height: 24px;
    border:none;
    background: url(./../img/expense/calendar-icon.svg) no-repeat center/100% auto;
    white-space: nowrap;
    text-indent: 100%;
    font-size: 0;
    cursor: pointer;
}

.form-option-group.expense-apply .form-checkbox {
    display: inline-block;
    vertical-align: top;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.form-option-group.expense-apply .form-checkbox input {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: none;
    white-space: nowrap;
    clip: rect(0, 0, 0, 0);
}

.form-option-group.expense-apply .form-checkbox input + span {
    display: inline-block;
    position: relative;
    padding-left: calc(32px + 8px);
    color: #222;
    font-size: 18px;
    line-height: 1.5;
    cursor: pointer;
}

.form-option-group.expense-apply .form-checkbox input + span:before {
    content: "";
    display: block;
    position: absolute;
    top: -3px;
    left: 0;
    width: 32px;
    height: 32px;
    background: url(https://www.inno-n.com/assets/front/pc/img/common/agree_checkbox.svg) no-repeat 0 0/auto 32px;
}

.form-option-group.expense-apply .form-checkbox input:checked + span:before {
    background-position:-32px 0;
}

.form-agree.expense-apply .terms p > b.lg {
    font-size: 20px;
    line-height: 24px;
}

.form-agree.expense-apply .terms p > b {
    display: block;
    font-size: 18px;
    line-height: 27px;
}

.form-agree.expense-apply .terms p > span {
    display: block;
    margin-top: 4px;
    font-size: 16px;
}

.form-agree.expense-apply .terms p > span.guide {
    margin-top: 16px;
}

.form-agree.expense-apply .terms p > span + b {
    margin-top: 16px;
}

.apply-caution {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid #E0E0E0;
}

.apply-caution > p {
    position: relative;
    padding-left: 28px;
    color: #727B8B;
    font-size: 18px;
    line-height: 27px;
    word-break:keep-all;
}

.apply-caution > p::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background:url(./../img/expense/procedure-icon05.svg) no-repeat center / 100% auto;
}

.apply-caution p > .icon {
    margin-right: 8px;
    vertical-align: middle;
}

.button-group.expense-apply a {
    display: flex;
    align-items: center;
    width: 276px !important;
    height: 64px;
    line-height: 64px;
}

.button-group.expense-apply a.list {
    margin-left: 18px;
}

.button-group.expense-apply a.list:before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    margin-right: 4px;
    background: url(https://www.inno-n.com/assets/front/pc/img/common/board_list_btn_ico.svg) no-repeat center / 100% auto;
}

/* 팝업 */
.apply-complete-modal {
    position: relative;
    width: 552px;
    padding: 0;
    border-radius: 16px;
    background-color: #fff;
    overflow: hidden;
}

.apply-complete-modal_form {
    text-align: center;
    padding: 32px 0 48px;
}

.apply-complete-modal_form > .icon {
    display: block;
    margin: 0 auto;
}

.apply-complete-modal_form > strong {
    display: block;
    margin-top: 16px;
    color: #222;
    font-size: 28px;
    font-weight: 700;
    line-height: 44px;
}

.apply-complete-modal_form > p {
    display: block;
    margin-top: 8px;
    color: #7c7b8b;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.apply-complete-modal_btn {
    display: flex;
}

.apply-complete-modal_btn > .button {
    width: 100%;
    height: 64px;
    border:none;
    border-radius: 0;
}

.apply-complete-modal_btn > .button:not(.primary) {
    border-top: 1px solid #E0E0E0;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    top: 4px!important;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: 35%!important;
}

.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    color: #222;
    font-weight: 400;
    letter-spacing: -0.5px;
    line-height: 1.5;
    border-radius: 0;
    font: inherit;
    border: none;

    background-color: #e9e9e9;
    background-image: url(./../img/expense/path_chevron_black.svg);
    background-repeat: no-repeat;
    background-position: top 50% right 4px;
    background-size: 16px 16px;
    background-color: transparent;
    appearance: none;
    -moz-appearance:none;
    -webkit-appearance:none;
}

/* 지출보고서 신청 끝 */

/* 지출보고서 신청내역 조회 시작 */

.expense-check .caution {
    padding-top: 120px;
}

.expense-check .caution ul li {
    color: #727b8b;
    font-size:14px;
    line-height: 21px;
}

/* 지출보고서 신청내역 조회 끝 */