.wrap-932 {
    width: 932px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

.thank-title {
    background-color: #18C090;
    border-radius: 4px;
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    padding: 12px 24px 12px 65px;
    position: relative;
    margin-bottom: 30px;
}

.thank-title:before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 100%;
    min-height: 24px;
    background: url(/sys/will/share/en/img/common/icon_check03.svg) no-repeat center center;
    position: absolute;
    left: 24px;
    top: 0;
}

.wrap-648 {
    width: 600px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

.title-f37 {
    font-size: 37px;
    font-weight: normal;
    font-family: "SFDisplayLight";
}

.title-f25 {
    font-size: 25px;
    font-weight: normal;
    font-family: "SFDisplayLight";
}

.btn-gray:hover {
    opacity: 1;
    background-color: #FF483C;
}

.row-10 {
    margin-left: -10px;
    margin-right: -10px;
}

.row-10>div {
    padding-left: 10px;
    padding-right: 10px;
}

.row-12 {
    margin-left: -12px;
    margin-right: -12px;
}

.row-12>div {
    padding-left: 12px;
    padding-right: 12px;
}

.my-page {
    padding-top: 45px;
    padding-bottom: 80px;
}

.my-page h3 {
    font-size: 21px;
    font-weight: normal;
    font-family: "SFDisplayLight";
    margin-bottom: 10px;
}

.mypage-list {
    border-radius: 4px;
    border: 1px solid #E8E8E8;
    background: url("/sys/will/share/en/img/common/bg_gray.png");
    padding: 0 24px;
}

.mypage-list li {
    border-bottom: 1px solid #F0F0F0;
    padding: 30px 0 25px 50px;
}

.mypage-boxicon {
    display: inline-block;
    width: 36px;
    text-align: center;
    margin-left: -50px;
    float: left;
}

.mypage-list li p {
    font-size: 17px;
}

.mypage-list li span {
    font-size: 10px;
    margin-top: 5px;
}

.mypage-list li a {
    position: relative;
    display: block;
    width: 100%;
    padding-right: 10px;
}

.mypage-list li a:after {
    content: "";
    width: 8px;
    height: 100%;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    background: url("/sys/will/share/en/img/common/icon_list.png") no-repeat right center;
}

.userNameMb {
    display: none;
}

@media(max-width:960px) {
    .wrap-960 {
        width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }

}

@media(max-width:767px) {
    .my-page {
        background-color: #F0F0F0;
    }

    .my-page h3 {
        font-size: 25px;
    }

    .my-page .row.mt30 {
        margin-top: 25px;
    }

    .mypage-boxcm {
        margin-top: 50px;
    }

    .mypage-list {
        background: #fff;
    }

    .mypage-list {
        border: none;
        box-shadow: 0px 0px 6px rgb(0 0 0 / 13%);
    }
}

/*---------- Cancel account page ----------*/
.h36 {
    height: 36px;
    min-height: 36px;
}

.form-group {
    margin-bottom: 30px;
}

.mypage-detail-list li {
    padding: 0 24px;
}

.mypage-detail-list li>a {
    border-bottom: 1px solid #E8E8E8;
    padding: 15px 0 20px 0;
}

.mypage-detail-list li.active,
.mypage-detail-list li:hover {
    background-color: #fff;
}

.mypage-detail-list li:first-child {
    padding-top: 10px;
}

.mypage-boxicon {
    width: 55px;
    margin-left: 0;
    float: inherit;
}

.mypage-detail-list li a {
    font-size: 13px;
    display: table;
    width: 100%;
}

.mypage-detail-list li a>span,
.mypage-detail-list li a>p {
    display: inline-table;
    vertical-align: middle;
}

.mypage-detail-list li a>p {
    padding-left: 5px;
}

.custom-control {
    padding-left: 30px;
}

.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::after {
    background: url(/sys/will/share/en/img/common/icon_check_02.svg) no-repeat center center #C8C8C8 !important;
    background-size: 50% !important;
}

.custom-control-label::before {
    top: 1px;
    left: -30px;
    width: 18px;
    height: 18px;
    border-radius: 50% !important;
    background: url(/sys/will/share/en/img/common/icon_check_02.svg) no-repeat center center #C8C8C8 !important;
    background-size: 9px !important;
}

.custom-control-label::after {
    top: 1px;
    left: -30px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
    background: url(/sys/will/share/en/img/common/icon_check_02.svg) no-repeat center center #18C090 !important;
    background-size: 9px !important;
    box-shadow: none;
}

.cancel-account-page {
    padding-top: 40px;
    padding-bottom: 70px;
}

.confirm-email {
    border-top: 1px solid #E8E8E8;
    border-bottom: 1px solid #E8E8E8;
    padding: 25px 0 25px 0;
}

.confirm-email label {
    font-size: 13px;
    font-weight: bold;
}

.confirm-email label span {
    margin-left: 10px;
}

.f9 {
    font-size: 9px;
}

.checkbox-box {
    background-color: #F8F8F8;
    padding: 12px;
}

.cancel-account-page iframe {
    width: 100%;
    max-height: 160px;
    border: 1px solid #e8e8e8;
    margin-top: 20px;
    overflow-y: scroll;
}

@media(max-width:991px) {
    .sidebar {
        display: none;
    }

    .confirm-email {
        padding-bottom: 0;
    }

    .checkbox-box .f13 {
        font-size: 17px;
    }

    .cancel-account-page .h36 {
        height: 48px;
        min-height: 48px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .cancel-account-page .decs {
        margin-top: 30px;
    }

    /*Logout*/
    .userNameMb {
        display: inline-flex;
        padding: 10px 24px 5px;
        background: #e6e6e6;
        width: 100%;
        justify-content: space-between;
        align-items: center;
    }

    .userNameMb-txt {
        font-size: 13px;
        font-weight: 500;
    }

    .userNameMb-txt:before {
        content: "";
        background: url(/sys/will/share/en/img/top/user.svg) no-repeat;
        display: inline-flex;
        width: 14px;
        height: 20px;
        vertical-align: text-top;
        margin-right: .255em;
        background-size: contain;

    }

    .userNameMb .btn-logout a {
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 13px;
    }

    .userNameMb .btn-logout img {
        width: 14px;
        height: 20px;
    }

    .userNameMb .mypage-boxicon {
        width: 25px;
    }

    .btn-logout a:hover~.btn-logout p {
        color: #d9251d;
    }
}

@media(max-width:425px) {
    .custom-control {
        padding-left: 50px;
    }

    .custom-control-label::before {
        left: -50px;
        width: 36px;
        height: 36px;
        background-size: 18px !important;
    }

    .custom-control-label::after {
        left: -50px;
        width: 36px;
        height: 36px;
    }

    .custom-checkbox .custom-control-input:checked~.custom-control-label::after {
        background-size: 18px !important;
    }
}

/*---------- Email managerment----------*/
.credit-card-page,
.email-page {
    padding-top: 55px;
    padding-bottom: 70px;
}

.title-black02 {
    background-color: #000;
    display: block;
    width: 100%;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    padding: 5px 12px;
    margin-bottom: 12px;
}

.email-content {
    margin-left: -6px;
    margin-right: -6px;
    margin-bottom: 25px;
    padding-top: 25px;
    border-top: 1px solid #e8e8e8;
}

.email-list>.email-content:first-child {
    border-top: none;
}

.email-content li {
    padding: 0 6px;
    float: left;
}

.email-content li:nth-child(1) {
    width: 13%;
}

.btn-add-email,
.email-content li:nth-child(2) {
    width: 38%;
}

.email-content li:nth-child(3) {
    width: 28%;
}

.email-content li:nth-child(4) {
    width: 21%;
}

.box-num {
    background-color: #E8E8E8;
    font-size: 13px;
    font-weight: bold;
    position: relative;
}

.email-enews,
.email-add {
    border: 1px solid #000;
    padding: 10px 12px;
}

.email-enews {
    position: relative;
}

.email-enews>div,
.email-page .box-num p,
.email-enews p {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
}

.box-num p {
    padding: 12px 0 5px 0;
}

.email-page .box-num p {
    text-align: center;
    width: 100%;
}

.email-enews p,
.email-add p {
    font-size: 13px;
}

.email-add span {
    font-size: 8px;
    line-height: 10px;
    display: inline-block;
    margin-top: 5px;
}

.email-content:after {
    content: '';
    display: block;
    clear: left;
}

.btn-account-cm {
    width: 100%;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    padding: 2px 12px;
    border-radius: 30px;
    margin: 6px 0;
    outline: none;
    display: inline-block;
}

.btn-account-cm.mt15 {
    margin-top: 15px;
}

.btn-delete,
.btn-change {
    border: 1px solid #000;
    background-color: #fff;
}

.btn-change:before {
    content: '';
    width: 10px;
    height: 10px;
    display: inline-block;
    margin-right: 10px;
    background: url("/sys/will/3/en/include/img/icon_pen.svg") no-repeat center center;
    vertical-align: middle;
}

.btn-delete:before {
    content: '';
    width: 8px;
    height: 8px;
    display: inline-block;
    margin-right: 7px;
    background: url("/sys/will/3/en/include/img/icon_delete.svg") no-repeat center center;
    vertical-align: middle;
}

.btn-register {
    background-color: #18C090;
    color: #fff;
    border: none;
}

.btn-register:before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 7px;
    margin-right: 10px;
    background: url("/sys/will/share/en/img/common/icon_check_02.svg") no-repeat center center;
    background-size: 100%;
}

.btn-discontinue {
    background-color: #FF483C;
    color: #fff;
    border: none;
}

.btn-discontinue:before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 10px;
    background: url("/sys/will/3/en/include/img/icon_discontinue.svg") no-repeat center center;
    background-size: 100%;
}

.btn-add-email {
    margin-left: 13%;
    text-align: center;
}

.btn-add {
    font-size: 10px;
    font-weight: bold;
    color: #30C0F0;
    text-align: center;
    width: 180px;
    max-width: 100%;
    padding: 2px 12px;
    background-color: #fff;
    border: 1px solid #30C0F0;
    border-radius: 30px;
    outline: none !important;
}

.btn-add:before {
    content: '';
    width: 7px;
    height: 7px;
    display: inline-block;
    margin-right: 10px;
    background: url("/sys/will/3/en/include/img/icon_+_blue.svg") no-repeat center center;
    background-size: 100%;
}

.block-addemail .title-black02 {
    display: none;
}

.email-add .form-control {
    height: 24px;
    min-height: 24px;
}

.block-change {
    display: none;
}

.credit-card-content .btn-account-cm {
    padding: 4px 12px;
    min-height: 24px;
}

@media(max-width:767px) {
    .credit-card-content .btn-account-cm {
        min-height: 36px;
    }

    .email-content {
        margin-left: 0;
        margin-right: 0;
        border: 1px solid #E8E8E8;
        border-radius: 4px;
    }

    .email-content li {
        padding: 0;
    }

    .email-content li:nth-child(1),
    .email-content li:nth-child(2),
    .email-content li:nth-child(3),
    .email-content li:nth-child(4) {
        width: 100%;
    }

    .email-enews>div,
    .email-page .box-num p,
    .email-enews p {
        position: inherit;
        top: inherit;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }

    .title-black02 {
        background-color: inherit;
        color: #000;
        padding: 0;
        margin-bottom: 0;
        text-align: left !important;
        display: inline !important;
    }

    .box-num {
        display: inline;
        background-color: inherit;
    }

    .box-num p {
        display: inline;
    }

    .email-content li:nth-child(1) {
        background-color: #000;
        padding: 13px 24px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .email-content li:nth-child(1) .box-num p,
    .email-content li:nth-child(1) .title-black02 {
        color: #fff;
        font-size: 17px;
    }

    .email-content li:nth-child(2),
    .email-content li:nth-child(3),
    .email-content li:nth-child(4) {
        padding: 0 24px;
    }

    .email-content li:nth-child(2) {
        padding: 24px 24px 40px 24px;
    }

    .email-enews,
    .email-add {
        border: none;
        padding: 5px 0;
    }

    .email-enews p,
    .email-add p {
        font-size: 17px;
    }

    .email-add span.note {
        font-size: 9px;
    }

    .email-enews,
    .email-add {
        border-bottom: 1px solid #e8e8e8;
        padding-bottom: 10px;
    }

    .block-addemail .title-black02 {
        display: inline;
    }

    .email-btnbox {
        text-align: center;
        margin-top: 24px;
        margin-bottom: 24px;
    }

    .btn-add,
    .btn-account-cm {
        width: 240px;
        padding: 7px 12px;
        max-width: 100%;
        font-size: 17px;
    }

    .btn-delete,
    .btn-change {
        background: url(/sys/will/share/en/img/common/bg_gray.png);
        border: 1px solid #E8E8E8;
    }

    .btn-change:before {
        width: 12px;
        height: 12px;
        background-size: 100%;
    }

    .btn-discontinue:before {
        width: 11px;
        height: 11px;
        background-size: 100%;
    }

    .btn-register:before {
        width: 12px;
        height: 9px;
        background-size: 100%;
    }

    .btn-add:before {
        width: 14px;
        height: 14px;
        background-size: 100%;
    }

    .btn-delete:before {
        width: 11px;
        height: 11px;
        margin-right: 12px;
        background-size: 100%;
    }

    .block-addemail {
        padding-top: 0;
        margin-top: 45px;
    }

    .email-add .form-control {
        height: 48px;
        min-height: 48px;
    }

    .email-enews .custom-checkbox {
        min-height: 36px;
    }

    .btn-account-cm.mt15 {
        margin-top: 0;
    }

    .btn-add-email {
        width: 100%;
        margin-left: 0;
    }

    .btn-add {
        margin-top: 20px;
    }

    .email-list>.email-content:last-child {
        border-bottom: 1px solid #e8e8e8;
    }

    .email-list .email-content {
        margin-top: 45px;
        padding-bottom: 0;
        padding-top: 0;
    }

    .email-list .email-content:nth-child(1) {
        margin-top: 30px;
    }
}

@media(max-width:425px) {
    .email-page .custom-control-label {
        padding-top: 10px;
    }

    .checkbox-change .title-black02,
    .email-content.block-addemail li:nth-child(3) .title-black02 {
        padding-left: 50px;
    }

    .checkbox-change .email-enews,
    .email-content.block-addemail li:nth-child(3) .email-enews {
        margin-top: -12px;
    }
}

/*---------- Credit card ----------*/
.credit-card-content .title-black02 {
    display: none;
}

.credit-card-title .title-black02 {
    display: block;
}

.credit-card-content.credit-card-title {
    border-bottom: none;
    padding-bottom: 0;
}

.credit-card-content {
    margin-left: -3px;
    margin-right: -3px;
    border-top: 1px solid #e8e8e8;
    padding-top: 25px;
    margin-bottom: 25px;
}

.credit-card-list .credit-card-content:nth-child(1) {
    margin-bottom: 0;
}

.credit-card-list .credit-card-content:nth-child(2) {
    margin-top: 0;
    padding-top: 0;
}

.credit-card-list .credit-card-content:nth-child(1),
.credit-card-list .credit-card-content:nth-child(2) {
    border-top: none;
}

.credit-card-content li {
    padding: 0 3px;
    float: left;
    font-size: 13px;
}

.credit-card-content>li:nth-child(1) {
    width: 3%;
    text-align: center;
    font-weight: bold;
}

.credit-card-content>li:nth-child(1) .title-black02 {
    padding: 5px 0;
}

.credit-card-content>li:nth-child(2) {
    width: 15%;
}

.btn-add-card,
.credit-card-content>li:nth-child(3) {
    width: 28%;
}

.credit-card-content>li:nth-child(4) {
    width: 28%;
}

.credit-card-content>li:nth-child(5) {
    width: 25%;
    float: right;
}

.btn-add-card {
    margin-left: 18%;
    text-align: center;
}

.credit-card-content:after {
    content: '';
    display: block;
    clear: both;
}

.expiry-date,
.card-num,
.company-name {
    border: 1px solid #000;
    padding: 10px 12px;
}

.credit-card-content .email-btnbox {
    position: relative;
}

.credit-card-content .email-btnbox>div {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
    width: 100%;
}

.credit-card-page .custom-select-group .select2-container,
.credit-card-page .custom-select-group .select2-container--default .select2-selection--single .select2-selection__rendered,
.credit-card-page .custom-select-group .select2-container--default .select2-selection--single .select2-selection__arrow,
.credit-card-page .select2-container .select2-selection--single {
    height: 24px;
}

.credit-card-content .custom-select-group .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 5px 12px;
    line-height: 13px;
    font-size: 13px;
    background-color: #F8F8F8;
    border-bottom: 2px solid #E8E8E8;
}

.credit-card-page .select2-container .select2-selection--single {
    border-top: none;
    border-left: none;
    border-right: none;
}

.credit-card-page .form-group {
    margin-bottom: 0;
}

.row-6 {
    margin-left: -6px;
    margin-right: -6px;
}

.row-6>li {
    padding-left: 6px;
    padding-right: 6px;
}

.row-3 {
    margin-left: -3px;
    margin-right: -3px;
}

.row-3>li {
    padding-left: 3px;
    padding-right: 3px;
}

.credit-card-page .btn-delete,
.credit-card-page .btn-change {
    margin: 0;
}

.credit-card-page .note {
    font-size: 9px;
    margin: 10px 0;
}

.code input {
    width: 48px;
    display: inline-block;
    margin-left: 5px;
}

.form-gray04 {
    background-color: #F8F8F8;
    border-radius: 4px;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 2px solid #e8e8e8;
}

.credit-card-page .form-control {
    height: 24px;
    min-height: 24px;
    font-size: 13px;
    padding: 0;
    text-align: center;
}

@media(max-width:991px) {

    .btn-add-card,
    .credit-card-content>li:nth-child(4),
    .btn-add-card,
    .credit-card-content>li:nth-child(3) {
        width: 27%;
    }

    .credit-card-content>li:nth-child(5) {
        width: 26%;
    }
}

@media(max-width:767px) {

    .btn-add-card,
    .credit-card-content>li:nth-child(1),
    .credit-card-content>li:nth-child(2),
    .credit-card-content>li:nth-child(3),
    .credit-card-content>li:nth-child(4),
    .credit-card-content>li:nth-child(5) {
        width: 100%;
    }

    .btn-add-card {
        margin-left: 0;
    }

    .credit-card-list .credit-card-content:nth-child(2) {
        margin-top: 30px;
    }

    .credit-card-content {
        margin-left: 0;
        margin-right: 0;
        border: 1px solid #E8E8E8;
        border-radius: 4px;
    }

    .credit-card-content>li:nth-child(1) {
        background-color: #000;
        padding: 13px 24px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        text-align: left;
    }

    .credit-card-content>li {
        padding: 35px 24px 0 24px;
    }

    .credit-card-content>li:last-child {
        padding-top: 24px;
    }

    .credit-card-list .credit-card-content {
        margin-top: 45px;
        padding-bottom: 0;
        padding-top: 0;
    }

    .credit-card-list>.credit-card-content:nth-child(1) {
        margin-top: 30px;
    }

    .box-num p {
        color: #fff;
        display: inline;
        font-size: 17px;
    }

    .credit-card-content li:nth-child(1) .title-black02 span,
    .credit-card-content li:nth-child(1) .title-black02 {
        color: #fff !important;
        font-size: 17px;
        display: inline;
    }

    .expiry-date,
    .card-num,
    .company-name {
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid #e8e8e8;
        padding: 5px 0 10px 0;
        min-height: inherit !important;
    }

    .expiry-date p,
    .card-num p,
    .company-name p {
        font-size: 17px;
    }

    .note {
        font-size: 9px;
    }

    .email-enews,
    .email-add {
        border-bottom: 1px solid #e8e8e8;
        padding-bottom: 10px;
    }

    .credit-card-page .btn-delete,
    .credit-card-page .btn-change {
        margin: 7px 0;
        padding: 7px 12px;
    }

    .credit-card-content .email-btnbox>div {
        position: inherit;
        top: inherit;
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
        width: 100%;
    }

    .credit-card-content .email-btnbox .mt25,
    .credit-card-content .email-btnbox {
        margin-top: 0;
    }

    .credit-card-page .custom-select-group .select2-container,
    .credit-card-page .custom-select-group .select2-container--default .select2-selection--single .select2-selection__rendered,
    .credit-card-page .custom-select-group .select2-container--default .select2-selection--single .select2-selection__arrow,
    .credit-card-page .select2-container .select2-selection--single {
        height: 48px;
        font-size: 17px;
        line-height: 17px;
    }

    .credit-card-page .form-group {
        margin-bottom: 10px;
    }

    .credit-card-page .form-gray04 {}

    .credit-card-content .custom-select-group .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding: 15px 12px;
        border-top: 1px solid #E8E8E8 !important;
        border-left: 1px solid #E8E8E8 !important;
        border-right: 1px solid #E8E8E8 !important;
        border-bottom: 1px solid #E8E8E8 !important;
    }

    .credit-card-page .form-control {
        height: 48px;
        min-height: 48px;
        font-size: 17px;
    }

    .code input {
        width: 133px;
        display: block;
        text-align: left !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: 0;
        margin-top: 5px;
        margin-bottom: 15px;
    }

    .code {
        font-size: 13px !important;
        font-weight: bold;
        margin-top: 24px;
    }

    .company-name .custom-select-group {
        margin-bottom: 15px;
    }

    .credit-card-list .credit-card-content:last-child {
        border-bottom: 1px solid #e8e8e8;
    }

    .credit-card-page .note {
        font-size: 10px;
    }
}

/*----- Passenger page -----*/
.registration-confirm-page,
.registration-page {
    padding-top: 40px;
    padding-bottom: 95px;
}

.account-title-cm {
    font-size: 17px;
    font-weight: bold;
    padding: 8px 24px;
    background: url(/sys/will/share/en/img/common/bg_gray.png);
}

.passenger-page .btn-next {
    font-size: 21px !important;
}

.information-section .form-gray {
    border: 1px solid #e8e8e8;
}

.box-cm {
    padding-left: 24px;
    padding-right: 24px;
}

.registration-page .form-group {
    margin-bottom: 24px;
}

.registration-page .form-group input,
.registration-page .form-group label {
    font-size: 13px;
}

.registration-page .form-group input {
    padding-left: 24px;
}

.registration-page input::placeholder,
.registration-page input:-ms-input-placeholder,
.registration-page input::-ms-input-placeholder {
    color: #C8C8C8;
    opacity: 1;
}

.w36.custom-control {
    padding-left: 50px;
    display: inline-block;
}

.w36 .custom-control-label::before {
    top: -5px;
    left: -50px;
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    box-shadow: 0 -2px 0 rgb(0 0 0 / 7%);
    background: url(/sys/will/share/en/img/common/icon_check_02.svg) no-repeat center center rgb(0 0 0 / 3%) !important;
}

.w36 .custom-control-label::after {
    top: -5px;
    left: -50px;
    width: 36px;
    height: 36px;
    background-size: 50% 50%;
    border-radius: 50%;
}

.w36.custom-checkbox .custom-control-input:checked~.custom-control-label::after {
    background: url(/sys/will/share/en/img/common/icon_check_02.svg) no-repeat center center #18C090 !important;
    box-shadow: none;
}

.checkbox-email label span {
    display: block;
    font-size: 13px;
    color: #C8C8C8;
    margin-top: 3px;
}

.checkbox-email .custom-control-label::after,
.checkbox-email .custom-control-label::before {
    top: 0;
}

.personal-infor .form-group input {
    padding-left: 12px;
}

.personal-infor .custom-select-group .select2-container--default .select2-selection--single {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid #e8e8e8;
    font-size: 13px;
}

.personal-infor .form-group {
    margin-bottom: 30px;
}

.personal-infor label {
    font-weight: bold;
    font-size: 13px;
}

.checkbox-list {
    text-align: justify;
}

.checkbox-list:after {
    content: '';
    width: 100%;
    display: inline-block;
}

.checkbox-list li {
    display: inline-block;
}

.checkbox-list li label {
    font-weight: normal;
}

.occupation-select {
    padding-top: 30px;
}

.checkbox-list .custom-control {
    padding-left: 25px;
}

.checkbox-list .custom-control-label::after,
.checkbox-list .custom-control-label::before {
    left: -25px;
}

#select2-Nationality-results li,
#select2-phoneNumber-results li {
    font-size: 13px !important;
    text-align: left !important;
}

.custom-control-label.f17 {
    font-size: 17px !important;
}

.checkbox-list-mb {
    display: none;
}

.select2-search__field {
    outline: none;
}

.registration-tbl-confirm td {
    font-size: 13px;
    text-align: left;
}

.registration-tbl-confirm tr>td:last-child {
    font-weight: bold;
    padding-right: 0;
}

.registration-tbl-confirm tr:last-child td {
    border-bottom: 1px solid #e8e8e8;
}

.registration-tbl-confirm tr:first-child td {
    border-top: none;
}

.registration-tbl-confirm tr>td:first-child {
    padding-left: 0;
    width: 160px;
}

.btn-box>p {
    line-height: 18px;
}

span[aria-labelledby="select2-phoneNumber-container"] .select2-selection__rendered {
    font-weight: bold;
}

@media(max-width:600px) {
    .box-cm {
        padding-left: 0;
        padding-right: 0;
    }

    .box-cm.mt25 {
        margin-top: 20px;
    }

    .registration-page .account-title-cm {
        font-size: 25px;
        padding: 45px 0 0 0;
        border-top: 1px solid rgb(0 0 0 / 10%);
        background: none;
        font-weight: normal;
        margin-left: 0;
        margin-right: 0;
    }

    .registration-confirm-page .account-title-cm {
        font-size: 17px;
    }

    .registration-confirm-page .title-f37 {
        font-size: 25px;
    }

    .registration-page .h36 {
        height: 48px;
        min-height: 48px;
    }

    .registration-page .form-group input {
        padding-left: 12px;
    }

    .personal-infor label {
        font-weight: normal;
    }

    .registration-page .custom-select-group.h36 .select2-container,
    .registration-page .custom-select-group.h36 .select2-container--default .select2-selection--single .select2-selection__rendered,
    .registration-page .custom-select-group.h36 .select2-container--default .select2-selection--single .select2-selection__arrow,
    .registration-page .custom-select-group.h36 .select2-container .select2-selection--single {
        height: 48px;
    }

    .registration-page .custom-select-group .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding: 10px;
    }

    .checkbox-list {
        display: none;
    }

    .checkbox-list-mb {
        display: block;
    }

    .occupation-select>p {
        font-weight: normal !important;
        margin-bottom: .5rem;
    }

    .studentbox {
        margin-top: 30px;
    }

    .studentbox p.mt10 {
        margin-top: 20px;
    }

    .registration-contact .row-12 .col-sm-9,
    .registration-contact .row-12 .col-sm-8 {
        margin-top: 18px;
    }

    .registration-tbl-confirm td {
        border-top: none;
        border-bottom: 1px solid #e8e8e8;
        display: block;
        padding: 5px 0 3px 0;
    }

    .registration-tbl-confirm tr>td:first-child,
    .registration-tbl-confirm td {
        display: block;

        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .registration-tbl-confirm tr>td:first-child {
        font-size: 13px;
        font-weight: bold;
        border-bottom: none;
        padding-top: 24px;
        padding-bottom: 0;
    }

    .registration-tbl-confirm tr>td:last-child {
        font-size: 17px;
        font-weight: normal;
    }

    .registration-tbl-confirm .box-cm.mt25 {
        margin-top: 10px;
    }

    .email-section {
        margin-top: 50px;
    }

    .btn-box>p {
        text-align: left;
    }
}




@media(max-width:1280px) {
    .row-60>div {
        padding-left: 60px;
        padding-right: 60px;
    }

    .row-60 {
        margin-left: -60px;
        margin-right: -60px;
    }
}

@media(max-width:959px) {
    .row-60>div {
        padding-left: 15px;
        padding-right: 15px;
    }

    .row-60 {
        margin-left: -15px;
        margin-right: -15px;
    }
}

@media(max-width:767px) {
    .infor-user-passenger {
        width: 100%;
    }

    .passenger-information input {
        font-size: 17px;
    }

    .whitename {
        color: #000;
    }

    .noMg {
        margin-left: 15px;
        margin-right: 15px;
    }

    .mt40mb {
        margin-top: 55px;
    }

    .noborder-top {
        border-top: none !important;
        padding-top: 15px !important;
        margin-top: 25px !important;
    }

    .mt20-mb {
        margin-top: 20px;
    }

    .form-row h4 {
        text-indent: -9999999999px;
        font-size: 0;
        border-top: solid 1px #e8e8e8;
    }

    .infor-user-passenger {
        background: #fff;
        margin-bottom: 0;
    }

    .lastStep-pc {
        display: none;
    }

    .lastStep-mb {
        display: inline-block !important;
        margin-left: 0;
        margin-bottom: 10px;
    }

    .block-mb {
        display: block !important;
    }

    .mt40-mb {
        margin-top: 35px;
        margin-bottom: 50px;
    }

    .form-row .form-group .col-sm-4,
    .form-row .form-group .col-sm-6 {
        max-width: 50%;
        flex: auto;
    }

    .passenger-information h3 {
        font-size: 25px;
    }

    .form-row .form-group label {
        font-weight: normal;
    }

    .block-pc {
        display: none !important;
    }

    .full-width-mb {
        max-width: 100% !important;
    }

    .passenger-checkbox {
        width: 100%;
    }

    .passenger-checkbox {
        margin-top: 0px;
        width: 100%;
        border-top: solid 1px #e8e8e8;
        padding-top: 40px;
    }

}

@media(max-width:575px) {
    .passenger-page .btn {
        display: block;
        width: 100%;
    }

    .form-row .form-group {
        width: 100%;
        margin: 0;
    }

    .form-row .form-group .col-sm-4,
    .form-row .form-group .col-sm-6 {
        margin-bottom: 15px;
    }

    .form-row .form-group .col-sm-4:last-child,
    .form-row .form-group .col-sm-6:last-child {
        margin-bottom: 0;
    }

    .form-row .form-group label {
        display: block;
    }

    .phoneNumber .iti {
        width: 100%;
    }
}

/*----- End passenger page-----*/

/*----- Reservation detail 04 -----*/
.reservations04-page {
    padding-top: 50px;
    padding-bottom: 70px;
}

.note-error {
    max-width: 100%;
    background-color: #F8F8F8;
    border: 1px solid #FF483C;
    border-radius: 5px;
    margin-top: 25px;
    padding: 6px 24px;
    display: inline-block;
}

.note-error p {
    font-size: 13px;
    font-weight: bold;
    color: #FF483C;
    background: url(/sys/will/share/en/img/common/icon_error.png) no-repeat left 4px;
    background-size: 18px;
    padding: 5px 0 3px 35px;
}

.btn-outline-black {
    width: 345px;
    max-width: 100%;
    padding: 1px 10px 2px 10px;
    border: 1px solid #000;
    border-radius: 40px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
    font-size: 13px;
    font-weight: bold;
    vertical-align: middle;
    background-color: #fff;
    outline: none !important;
}

.btn-outline-black:before {
    content: '';
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: url(/sys/will/3/en/include/img/icon_plus.svg) no-repeat center center;
    border: 1px solid #000;
    display: inline-block;
    text-align: center;
    margin-right: 10px;
    margin-top: -2px;
    vertical-align: middle;
}

.btn-outline-black:hover:before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    border: 1px solid #fff;
    background: url(/sys/will/3/en/include/img/icon_plus.svg) no-repeat center center #fff;
}

.btn-outline-black:hover {
    color: #fff;
    background-color: #FF483C;
    transition: all ease 0.2s;
    border: 1px solid #FF483C;
}

.route-info {
    position: relative;
}

.route-info p {
    font-size: 14px;
    font-weight: bold;
}

.route-info span {
    font-size: 19px;
    margin: 5px 10px 0 0;
    display: inline-block;
}

.route-note {
    margin: 40px 0;
    padding-left: 40px;
    font-size: 14px;
    font-weight: normal !important;
}

.route-note span {
    font-size: 12px;
    margin: 5px 10px 0 0;
    display: block;
}

.route-depart {
    background: url(/sys/will/share/en/img/common/icon_depart.svg) no-repeat left bottom;
    background-size: 24px;
    padding-left: 40px;
}

.route-arrive {
    background: url(/sys/will/share/en/img/common/icon_map.svg) no-repeat 3px bottom;
    background-size: 17px;
    padding-left: 40px;
}

.line-to {
    width: 1px;
    height: calc(100% - 100px);
    position: absolute;
    left: 35px;
    top: 50px;
    background-color: #000;
}

.line-to:after {
    content: '';
    width: 9px;
    height: 7px;
    background: url(/sys/will/3/en/include/img/icon_caret_down.svg) no-repeat center bottom;
    display: block;
    position: absolute;
    bottom: -5px;
    left: -4px;
    background-size: 100%;
}

@media(max-width:600px) {
    .route-depart {
        background: url(/sys/will/share/en/img/common/icon_depart.svg) no-repeat left 20px;
    }

    .route-info span {
        display: block;
        margin: 5px 0;
    }

    .btn-ticket-map {
        display: block;
        width: 40px;
        text-align: center;
        margin-top: 10px;
        padding: 4px 5px 5px 5px;
    }

    .route-arrive {
        background: url(/sys/will/share/en/img/common/icon_map.svg) no-repeat 4px 20px;
    }

    .line-to {
        height: calc(100% - 145px);
        left: 11px;
    }
}

.info-cm {
    display: table;
    margin-top: 25px;
    width: 100%;
}

.info-cm h2 {
    display: table-cell;
    vertical-align: middle;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    min-height: 36px;
}

.info-cm>div {
    display: table-cell;
    vertical-align: middle;
    padding-left: 14px;
}

.reservation-route-info {
    background: url(/sys/will/share/en/img/common/bg_gray.png);
}

.route-title {
    background-color: #000;
    padding: 9px 0 7px 0;
    width: 120px;
    text-align: center;
}

.route-title:before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 20px;
    background: url(/sys/will/share/en/img/common/icon_map_white.svg) no-repeat top center;
    background-size: 100%;
    vertical-align: middle;
    margin-right: 12px;
}

.reservations04-page .route-title {
    text-align: left;
    padding-left: 13px;
}

.reservation-route-info>p {
    font-size: 17px;
    font-weight: bold;
    padding: 5px 15px;
}

.icon-arrow {
    width: 13px;
    height: 12px;
    background: url(/sys/will/share/en/img/common/icon_arrow.svg) no-repeat center center;
    background-size: 100%;
    margin: 0 8px;
    display: inline-block;
}

.night-title {
    background: url(/sys/will/3/en/include/img/icon_night.svg) no-repeat 11px center #7940D5;
    width: 120px;
    padding: 10px 5px 10px 45px;
}

.day-title {
    background: url(/sys/will/3/en/include/img/icon_daytime.svg) no-repeat 14px center #FF6030;
    width: 120px;
    padding: 10px 5px 10px 45px;
}

.reservation-night-info p {
    font-size: 13px;
    padding: 3px 0;
}

.reservation-route {
    padding-top: 30px;
}

.passenger-icon:before {
    content: '';
    width: 22px;
    height: 24px;
    display: inline-block;
    background: url(/sys/will/3/en/include/img/icon_user.svg) no-repeat left bottom;
    margin-right: 3px;
}

.passenger-name,
.passenger-icon {
    font-size: 19px;
    font-weight: bold;
    display: inline-block;
}

.passenger-icon {
    margin-top: 5px;
    line-height: 100%;
}

.passenger-name {
    padding-left: 20px;
}

.reservation-tbl {
    width: 100%;
}

.reservation-tbl td {
    vertical-align: bottom;
}

.reservation-tbl td:last-child {
    text-align: right;
    border-bottom: none;
    padding-right: 0;
    vertical-align: bottom;
    width: 220px;
}

.reservation-tbl .btn-delete {
    padding: 5px 12px;
    width: 180px;
    max-width: 100%;
    background-color: #C8C8C8;
    color: #fff;
    border: none;
    margin-bottom: 0;
}

.btn-delete:before {
    background: url(/sys/will/3/en/include/img/icon_delete_white.svg) no-repeat center center;
}

.reservation-tbl td {
    border-top: none;
    border-bottom: 1px solid #E8E8E8;
    font-size: 13px;
    padding-bottom: 4px;
}

.reservation-passenger {
    margin-top: 70px;
}

.reservation-passenger .box-cm {
    padding-right: 0;
}

.route-date {
    font-size: 13px;
    font-weight: normal !important;
    display: block;
    margin-bottom: 5px;
}

.plan-info ul>li:nth-child(2) {
    background: url(/sys/will/share/en/img/common/icon_go.png) no-repeat left center;
    padding-left: 30px;
}

.plan-info p {
    font-size: 13px;
}

.plan-info span {
    font-size: 17px;
    font-weight: bold;
}

.reservation-info .plan-info p {
    display: none;
}

.btn-ticket-map {
    font-size: 8px;
    font-weight: bold;
    color: #30C0F0;
    border: 1px solid #30C0F0;
    border-radius: 10px;
    text-transform: uppercase;
    padding: 4px 9px;
}

@media(max-width:767px) {
    .note-error p {
        font-size: 17px;
        background: url(/sys/will/share/en/img/common/icon_error.png) no-repeat left 7px;
    }

    .info-cm>div,
    .info-cm h2,
    .info-cm {
        display: block;
        width: 100%;
    }

    .info-cm>div {
        padding: 24px;
    }

    .route-title {
        text-align: left;
        padding: 9px 0 7px 24px !important;
    }

    .night-title {
        background: url(/sys/will/3/en/include/img/icon_night.svg) no-repeat 24px center #7940D5;
        padding: 10px 5px 10px 60px;
    }

    .day-title {
        background: url(/sys/will/3/en/include/img/icon_daytime.svg) no-repeat 24px center #FF6030;
        padding: 10px 5px 10px 60px;
    }

    .reservation-night-info>div {
        border-left: 1px solid #E8E8E8;
        border-right: 1px solid #E8E8E8;
        border-bottom: 1px solid #E8E8E8;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    .reservation-night-info p {
        font-size: 17px;
        word-break: break-word;
    }

    .reservation-info .plan-info p {
        display: block;
    }

    .plan-info span {
        font-size: 21px;
        margin-top: 5px;
        display: block;
    }

    .plan-info ul {
        padding: 0 14px;
    }

    .plan-info .list-inline li:nth-child(1) {
        padding-left: 30px;
        margin-bottom: 15px;
    }

    .plan-info ul>li:nth-child(2) {
        padding-left: 30px;
    }

    .account-title-cm {
        margin-left: -24px;
        margin-right: -24px;
        font-size: 21px;
    }

    .reservation-route {
        border-top: none;
    }

    .btn-ticket-map {
        display: block;
        width: 40px;
        text-align: center;
        margin-top: 10px;
        padding: 4px 5px 5px 5px;
    }

    .btn-outline-black {
        font-size: 17px;
        padding: 7px 10px 8px 10px;
    }

    .btn-outline-black:before {
        width: 18px;
        height: 18px;
        background-size: 8px;
    }

    .reservation-tbl td {
        padding-left: 55px !important;
    }

    .passenger-name {
        padding-left: 0;
        margin-top: 7px;
    }

    .reservation-tbl tr {
        display: block;
        position: relative;
    }

    .passenger-icon {
        position: absolute;
        bottom: 15px;
        left: 0;
    }

    .reservation-tbl td {
        display: block;
        padding: 5px 0 3px 0;
    }

    .reservation-tbl tr>td:nth-child(1) {
        border-bottom: none;
        padding-top: 24px;
    }

    .reservation-tbl tr:first-child td {
        padding-top: 5px;
    }

    .ticket-passenger-tbl td {
        padding-left: 55px !important;
    }

    .reservation-tbl .btn-delete {
        position: absolute;
        bottom: 20px;
        right: 0;
        font-size: 0;
        width: 24px;
        height: 24px;
        background: #C8C8C8;
        padding: 0;
    }

    .btn-delete:before {
        width: 100%;
        height: 100%;
    }

    .reservation-tbl tr td:last-child {
        border-bottom: none;
    }

    .route-title:before {
        margin-right: 20px;
    }
}

.title-point {
    width: 100%;
    background: url(/sys/will/share/en/img/common/bg_gray.png);
    color: #000;
    font-weight: bold;
    font-size: 17px;
    padding: 5px 20px;
}

.icon-map02:before {
    content: '';
    display: inline-block;
    background: url(/sys/will/share/en/img/common/icon_map.svg) no-repeat left center;
    margin-right: 8px;
    width: 26px;
    height: 26px;
    vertical-align: middle;
}

.point-item {
    padding: 20px 10px;
    /*	border-bottom:1px dashed #E8E8E8;*/
    background: url(/sys/will/3/en/include/img/border.png) repeat-x bottom left;
}

.point-list>li.point-item:last-child {
    background: none;
    border-bottom: 1px solid #E8E8E8;
}

.point-content-wrap {
    position: relative;
    padding-right: 45px;
}

.point-content[aria-expanded="true"] {
    background: url(/sys/will/share/en/img/common/icon_check_active.svg) no-repeat left 8px;
}

.point-next {
    width: 100%;
    display: block;
    height: 50px;
    background: url(/sys/will/share/en/img/common/icon_go.png) no-repeat center center;
}

.point-item .form-gray02 {
    margin-top: 20px;
    font-size: 15px;
}

.form-gray02 {
    background-color: #F8F8F8;
    border-radius: 5px;
    /*	box-shadow: 0px -2px 0 #E8E8E8;*/
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-top: 2px solid #e8e8e8;
}

.form-gray02::placeholder {
    color: #C8C8C8;
}

.form-gray02:-ms-input-placeholder {
    color: #C8C8C8;
}

.form-gray02::-ms-input-placeholder {
    color: #C8C8C8;
}

.point-content {
    cursor: pointer;
    width: 100%;
}

.point-content p {
    font-size: 17px;
}

.point-content p span {
    margin-bottom: 7px;
    display: block;
}

.point-content:hover span,
.point-content:hover p {
    color: #18C090;
}

.btn-pointmap {
    font-size: 9px;
    padding: 0px 10px;
    border: 1px solid #30C0F0;
    border-radius: 25px;
    text-decoration: none;
    right: 0;
    color: #30C0F0;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
    display: inline-block;
    height: 20px;
    line-height: 20px;
}

.btn-pointmap:hover {
    background-color: #30C0F0;
    color: #fff;
    text-decoration: none;
}

.login-box .btn {
    margin-top: 40px;
}

.point-input {
    padding-left: 55px;
}

.modal-btn {
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 24px;
}

@media(max-width:767px) {
    .point-item>div {
        padding-left: 0;
    }

    .title-point {
        font-size: 25px;
        font-weight: normal;
        background: none;
        padding: 10px 0;
    }

    .icon-map02:before {
        display: none;
    }

    .point-wrap>.col-12:last-child .title-point {
        margin-top: 55px;
        border-top: 1px solid #e8e8e8;
        padding-top: 65px;
    }

    .point-item {
        background: none;
    }

    .point-list>li.point-item:last-child {
        border-bottom: none;
    }

    .point-content p span {
        font-size: 13px;
    }

    .point-item {
        padding: 20px 0;
    }

    .modal-btn {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    .modal-btn .btn {
        border-bottom: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

}

/*--- Modal add passenger ---*/

.add-passenger-tbl {
    width: 100%;
}

.add-passenger-tbl td {
    font-size: 15px;
    padding: 10px 15px;
    text-align: center;
}

.add-passenger-tbl td span {
    font-size: 12px;
    display: block;
}

.add-passenger-tbl label {
    font-size: 0;
    display: block;
}

.add-passenger-tbl tr>td:nth-child(1) {
    text-align: left;
    padding-left: 0;
    width: 80px;
}

.add-passenger-tbl tr>td:last-child {
    padding-right: 0;
}

.add-passenger-tbl .custom-control {
    padding-left: 0;
    width: 20px;
    margin: 0 auto;
}

.add-passenger-tbl .custom-control-label::after,
.add-passenger-tbl .custom-control-label::before {
    left: 0;
    width: 20px;
    height: 20px;
    background-size: 9px !important;
}

.add-passenger-tbl.custom-checkbox .custom-control-input:indeterminate~.custom-control-label::after,
.add-passenger-tbl .custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before {
    background-size: 9px;
}

.age-box {
    border-top: 1px solid #E8E8E8;
    padding-top: 25px;
}

.age-box p {
    display: inline-block;
}

.age-box input {
    width: 48px;
    display: inline-block;
    margin: 0 10px;
}

.reservations04-page .btn.h36 {
    line-height: 36px;
}

.add-passenger-tbl .custom-checkbox .custom-control-input:checked~.custom-control-label::after {
    background-size: 9px;
}

@media(max-width:767px) {
    .registration-page .title-f37 {
        font-size: 25px;
    }

    .add-passenger-tbl td {
        font-size: 17px;
        font-weight: bold;
    }

    .add-passenger-tbl td span {
        font-size: 13px;
        font-weight: normal;
    }

    .add-passenger-tbl .custom-control {
        width: 36px;
        height: 36px;
    }

    .add-passenger-tbl .custom-control-label::after,
    .add-passenger-tbl .custom-control-label::before {
        width: 36px;
        height: 36px;
        background-size: 18px !important;
    }

    .add-passenger-tbl .custom-checkbox .custom-control-input:checked~.custom-control-label::after {
        background-size: 18px !important;
    }

    .reservations04-page .btn.h36 {
        height: 48px;
        min-height: 48px;
        line-height: 48px;
    }

    .age-box input.h36 {
        height: 48px;
        min-height: 48px;
        width: 80px;
    }

    .age-box p {
        font-weight: bold;
        width: 75px;
    }

}

/*---------- Customer voices ----------*/
.customer-page {
    padding-top: 50px;
    padding-bottom: 70px;
}

.customer-title {
    font-size: 24px;
    font-weight: bold;
}

.customer-tbl {
    border-collapse: separate;
    border-spacing: 12px;
    width: 100%;
}

.customer-tbl td {
    padding: 18px 12px;
    font-size: 13px;
    min-height: 60px;
}

.customer-tbl th p {
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    background-color: #000;
    padding: 15px 3px;
}

.customer-tbl tr>td:nth-child(1) {
    width: 25%;
    background-color: #E8E8E8;
    font-weight: bold;
}

.customer-tbl tr>td:nth-child(2),
.customer-tbl tr>td:nth-child(3),
.customer-tbl tr>td:nth-child(4),
.customer-tbl tr>td:nth-child(5),
.customer-tbl tr>td:nth-child(6) {
    width: 15%;
    background-color: #F8F8F8;
    text-align: center;
}

.customer-tbl tr>td:nth-child(2):hover,
.customer-tbl tr>td:nth-child(3):hover,
.customer-tbl tr>td:nth-child(4):hover,
.customer-tbl tr>td:nth-child(5):hover,
.customer-tbl tr>td:nth-child(6):hover {
    background-color: #E8E8E8;
}

.customer-tbl .custom-control {
    padding-left: 0;
    width: 20px;
    margin: 0 auto;
}

.customer-tbl .custom-control-label::after,
.customer-tbl .custom-control-label::before {
    left: -9px;
}

.customer-tbl label {
    font-size: 0;
}

.customer-tbl tr>td:hover .custom-control-label::before,
.customer-tbl tr>td:hover .custom-control-label::after,
.customer-tbl tr>td:hover .custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before,
.customer-tbl tr>td:hover .custom-checkbox .custom-control-input:indeterminate~.custom-control-label::after {
    background: url(/sys/will/3/en/include/img/icon_check_gray.svg) no-repeat center center #fff !important;
    background-size: 50% !important;
}

.customer-page textarea {
    padding: 10px;
    outline: none;
}

@media(max-width:767px) {
    .customer-title {
        font-size: 21px;
    }

    .customer-tbl {
        border-spacing: inherit;
    }

    .customer-tbl th {
        display: none;
    }

    .customer-tbl tr,
    .customer-tbl td {
        display: block;
        width: 100% !important;
    }

    .customer-tbl td {
        padding: 12px 0;
        background-color: inherit !important;
        text-align: left !important;
    }

    .customer-page .custom-control-label::after,
    .customer-page .custom-control-label::before {
        left: -50px;
        width: 36px;
        height: 36px;
        background-size: 50% !important;
    }

    .customer-tbl .custom-control {
        margin: inherit;
    }

    .customer-tbl tr>td:nth-child(1) {
        font-size: 21px;
    }

    .custom-checkbox .custom-control-input:checked~.custom-control-label::after {
        background-size: 50% !important;
    }

    .customer-tbl label {
        font-size: 17px;
        color: #C8C8C8;
    }

    .customer-page .custom-control {
        width: auto;
        padding-left: 50px;
    }

    .customer-page .custom-control-label::after,
    .customer-page .custom-control-label::before {
        left: -50px;
        top: -10px;
    }

    .customer-tbl tr>td:hover .custom-control-label::before,
    .customer-tbl tr>td:hover .custom-control-label::after,
    .customer-tbl tr>td:hover .custom-checkbox .custom-control-input:indeterminate~.custom-control-label::before,
    .customer-tbl tr>td:hover .custom-checkbox .custom-control-input:indeterminate~.custom-control-label::after {
        background: url(/sys/will/share/en/img/common/icon_check_02.svg) no-repeat center center #C8C8C8 !important;
        background-size: 50% !important;
    }

    .custom-checkbox .custom-control-input:checked~.custom-control-label {
        font-weight: bold;
        color: #000;
    }

    .customer-tbl tr {
        border-bottom: 1px solid #e8e8e8;
        padding: 40px 0 5px 0;
    }

    .customer-tbl tr:first-child {
        border-bottom: none;
        padding: 0;
    }

    .customer-tbl tr:nth-child(2) {
        padding-top: 0;
    }

    .customer-tbl tr:last-child {
        border-bottom: none;
    }

    .customer-content01 {
        margin-left: -24px;
        margin-right: -24px;
        padding: 0 24px;
    }

    .customer-content02 {
        margin-top: 0;
        padding-top: 20px;
        margin-left: -24px;
        margin-right: -24px;
        padding: 0 24px;
    }

    .customer-page .list-inline li {
        display: block;
        width: 100%;
        margin: 30px 0;
    }

    .customer-page .list-inline li .custom-control-label {
        font-size: 17px;
    }

    .customer-content02 .f17 {
        font-size: 21px;
        border-top: 1px solid #e8e8e8;
        padding-top: 20px;
    }

    .customer-page .reservation-night-info>div {
        background-color: #F8F8F8;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }

    .customer-page textarea {
        min-height: 240px;
    }
}

/*---------- Recent reservations page ----------*/
.past-reservations-page,
.recent-reservations-page {
    padding-top: 50px;
    padding-bottom: 70px;
}

.reservations-box-c1:after,
.recent-reservations-content01:after {
    content: '';
    display: block;
    clear: both;
}

.sortby li {
    font-size: 13px;
    border-right: 1px solid #000;
}

.sortby ul>li:first-child,
.sortby ul>li:last-child {
    border-right: none;
}

.sortby ul>li:first-child {
    padding-right: 0;
}

.sortby button {
    border: none;
}

.btn-active {
    color: #fff;
    font-weight: bold;
    background-color: #18C090;
    padding: 3px 15px;
    border-radius: 20px;
}

.btn-sortby {
    background-color: inherit;
    padding: 0;
}

.btn-sortby:hover {
    color: #18C090;
}

.reservations-box {
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    margin-bottom: 50px;
}

.reservations-box-c1 {
    padding: 15px 24px;
}

.reservations-c1 li {
    font-size: 12px;
    display: inline-block;
    margin-right: 25px;
    vertical-align: middle;
}

.reservations-c1 li.block-mb {
    display: none;
}

.reservations-c1 li span {
    font-size: 13px;
    font-weight: bold;
    display: block;
    margin-top: 5px;
}

.btn-blue-outline {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    padding: 2px 12px;
    color: #30C0F0;
    border: 1px solid #30C0F0;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 8px;
}

.btn-blue-outline:hover {
    background-color: #30C0F0;
    color: #fff;
}

.btn-control {
    background-color: #FF483C;
    color: #fff;
    padding: 2px 30px;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    border-radius: 39px;
    border-bottom: 2px solid rgb(0 0 0 / 20%);
    margin-top: 5px;
}

.btn-control:hover {
    color: #FF483C !important;
    opacity: 0.75;
    transition: all ease 0.2s;
}

.btn-control a {
    color: #fff;
}

.btn-control a:first-child:before {
    content: '';
    width: 12px;
    height: 12px;
    background: url(/sys/will/3/en/include/img/icon_pen_white.svg) no-repeat center center;
    background-size: 100%;
    display: inline-block;
    margin-right: 10px;
}

.reservations-box .info-cm {
    margin-top: 0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.bg-gray02 {
    background-color: #F8F8F8;
}

.reservations-box .box-cm {
    padding-top: 24px;
    padding-bottom: 24px;
}

.reservations-item .plan-info li p {
    display: none;
}

.reservations-item .route-title {
    border-top-left-radius: 4px;
}

.reservations-item {
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0px 0px 3px #c3c3c3;
}

.reservations-item .day-title,
.reservations-item .night-title {
    width: 95px;
}

.payment-box {
    font-size: 12px;
}

.payment-box strong {
    font-size: 13px;
    margin-right: 20px;
}

.f12 {
    font-size: 12px;
}

.notify {
    font-weight: bold;
    display: inline-block;
    padding-left: 22px;
    background: url(/sys/will/3/en/include/img/icon_error.svg) no-repeat center left;
    background-size: 12px;
    margin-right: 7px;
}

.route-portion-tbl td {
    padding: 0 12px;
    font-size: 13px;
}

.route-portion-tbl>tbody>tr>td:first-child {
    background: url(/sys/will/3/en/include/img/icon_route.svg) no-repeat 12px center #E8E8E8;
    padding-left: 42px;
    font-weight: bold;
    min-width: 95px;
}

.route-portion-tbl>tbody>tr>td:nth-child(2) {
    width: 80%;
}

.route-portion-tbl>tbody>tr>td:last-child {
    padding: 0;
    vertical-align: bottom;
    min-width: 90px;
}

.route-portion-info {
    border-collapse: separate;
    border-spacing: 0 5px;
    width: 100%;
}

.route-portion-info td {
    padding: 5px 12px;
}

.route-portion-info tr>td:first-child {
    background-color: #000;
    color: #fff;
    font-weight: bold;
    width: 180px;
}

.route-portion-info tr>td:nth-child(2) {
    border: 1px solid #000;
}

.btn-routedetail {
    background: url(/sys/will/3/en/include/img/icon_arrow.svg) no-repeat right center;
    display: block;
    padding-right: 20px;
}

.num-people {
    width: 100%;
    background-color: #F8F8F8;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.num-people h2 {
    background: #18C090;
    background-size: 13px;
    width: 120px;
    padding: 10px 0;
    text-align: center;
    border-bottom-left-radius: 4px;
}

.reservations-c1 .btn-blue-outline {
    margin-bottom: 0;
}


@media(max-width:767px) {
    .reservations-c1 li.block-mb {
        display: inline-block;
    }

    .reservations-item .plan-info li p {
        display: block;
    }

    .recent-reservations-content01 .float-left,
    .recent-reservations-content01 .float-right {
        float: inherit !important;
    }

    .sortby {
        display: block;
        text-align: center;
        margin: 20px -24px 0 -24px;
        border-bottom: 1px solid #e8e8e8;
        padding: 0 24px 20px 24px;
    }

    .sortby ul li:first-child {
        display: block;
        margin-bottom: 10px;
        padding-right: 20px;
    }

    .btn-sortby {
        background-color: #F8F8F8;
        padding: 3px 15px;
        border-radius: 20px;
    }

    .btn-sortby:hover {
        background-color: #18C090;
        color: #fff;
    }

    .sortby .list-inline {
        margin-left: -15px;
        margin-right: -15px;
    }

    .sortby .list-inline li {
        padding: 0 15px;
        width: 50%;
        float: left;
    }

    .sortby li button {
        display: block;
        width: 100%;
        text-align: center;
        padding: 5px 10px;
    }

    .sortby li:nth-child(1) {
        width: 100%;
    }

    .sortby:after {
        content: '';
        display: block;
        clear: both;
    }

    .reservations-box {
        border: none;
        border-radius: 0;
    }

    .reservations-box-c1 {
        width: 100%;
        border: 1px solid #e8e8e8;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .reservations-c1 {
        width: 100%;
    }

    .reservations-c1 li {
        display: block;
        width: 100%;
        border-bottom: 1px solid #e8e8e8;
        padding-bottom: 5px;
        padding-top: 20px;
        font-size: 13px;
        vertical-align: bottom;
    }

    .reservations-c1 li:first-child {
        padding-top: 10px;
    }

    .reservations-c1 li:last-child {
        border-bottom: none;
        text-align: center;
    }

    .btn-blue-outline {
        font-size: 13px;
        width: 180px;
        max-width: 100%;
        padding: 4px 12px;
        display: block;
        margin: 0 auto;
    }

    .reservations-c1 li span {
        display: inline-block;
        float: right;
        font-size: 17px;
    }

    .reservations-c1 li:after {
        content: '';
        display: block;
        clear: both;
    }

    .btn-control {
        width: 100%;
        padding: 7px 5px;
        margin-top: 20px;
    }

    .reservations-item .box-cm {
        padding-top: 0;
    }

    .reservations-item .box-cm.bg-gray02 {
        background-color: inherit;
    }

    .reservations-item .reservation-route-info {
        margin-top: 10px;
    }

    .reservations-item .reservations-item .route-title {
        border-radius: 0;
    }

    .reservations-item .day-title,
    .reservations-item .night-title {
        width: 100%;
    }

    .reservations-item .reservation-night-info>div {
        border-left: none;
        border-right: none;
        border-bottom: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .payment-box {
        font-size: 13px;
        padding: 20px 24px;
        border-top: 1px solid #e8e8e8;
        margin-top: 0;
    }

    .payment-box strong {
        font-size: 17px;
    }

    .notify {
        margin: 20px 0;
        background-size: 24px;
        padding-left: 35px;
    }

    .route-portion-tbl {
        width: 100%;
        margin-top: 0;
    }

    .route-portion-tbl tr,
    .route-portion-tbl td {
        display: block;
        width: 100% !important;
    }

    .route-portion-tbl td {
        padding: 12px 24px;
    }

    .route-portion-tbl>tbody>tr>td:first-child {
        background: url(/sys/will/3/en/include/img/icon_route.svg) no-repeat 24px center #E8E8E8;
        padding-left: 55px;
    }

    .route-portion-info tr:after {
        content: '';
        display: block;
        width: 100%;
        height: 12px;
        margin: 10px 0;
        background: url(/sys/will/share/en/img/common/icon_go.svg) no-repeat center center;
        background-size: 12px;
        -ms-transform: rotate(90deg);
        /* IE 9 */
        transform: rotate(90deg);
    }

    .route-portion-info tr:last-child:after {
        content: inherit;
    }

    .num-people h2 {
        display: table-cell;
        width: 120px;
    }

    .num-people>div {
        display: table-cell;
        vertical-align: middle;
        width: auto;
        padding: 0 0 0 10px;
    }

    .num-people>div span {
        font-weight: bold;
    }

    .reservations-item .box-cm {
        padding-left: 0;
        padding-right: 0;
    }

    .route-portion-info td {
        padding: 12px 10px;
    }
}

/*----- Past reservations page -----*/
.past-reservations-page .btn-green {
    padding: 4px 17px;
    border-radius: 35px;
    font-size: 13px;
    font-weight: bold;
}

.btn-link {
    display: table-cell;
    text-align: right;
    vertical-align: middle;
    padding-right: 24px;
}

.payed:before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
    background: url(/sys/will/share/en/img/common/icon_check_02.svg) no-repeat center center #18C090;
    background-size: 51%;
    margin: 0 5px;
}

.block-mb.btn-link {
    display: none;
}

@media(max-width:767px) {
    .past-reservations-page .btn-green {
        width: 100%;
        display: block;
    }

    .btn-link.hidden-mb {
        display: none !important;
    }

    .payed:before {
        width: 24px;
        height: 24px;
        vertical-align: middle;
    }

    .past-reservations-page .btn-green {
        padding: 9px 17px;
        text-align: center;
        margin-top: 25px;
    }

    .reservations-box .box-cm.bg-gray02 {
        padding-bottom: 0;
        background-color: inherit;
    }

    .btn-link {
        padding: 0 24px;
    }
}


/*----- reservation detail -----*/
.reservations-detail-page {
    padding-top: 50px;
    padding-bottom: 70px;
}

.reservations-detail-page .btn-blue,
.reservations-detail-page .btn-orange,
.reservations-detail-page .btn-green {
    padding: 4px;
    border-radius: 35px;
    font-size: 12px;
    font-weight: bold;
    width: 95px;
    text-align: center;
    display: inline-block;
}

.reservations-detail-page .btn-list {
    text-align: right;
    padding-right: 24px;
}

.btn-list>a {
    border-bottom: none;
    margin: 0 6px;
}

.btn-list>a:last-child {
    margin-right: 0;
}

.btn-list>a:hover {
    color: #fff;
}

.btn-list .btn-blue:before {
    content: '';
    width: 10px;
    height: 10px;
    background: url(/sys/will/3/en/include/img/icon_arrow_white.svg) no-repeat center center;
    background-size: 100%;
    display: inline-block;
    margin-right: 7px;
}

.btn-list .btn-green:before {
    content: '';
    width: 10px;
    height: 10px;
    background: url(/sys/will/3/en/include/img/icon_pen_white_02.svg) no-repeat center center;
    background-size: 100%;
    display: inline-block;
    margin-right: 5px;
}

.btn-list .btn-orange:before {
    content: '';
    width: 8px;
    height: 8px;
    background: url(/sys/will/3/en/include/img/icon_delete_white.svg) no-repeat center center;
    background-size: 100%;
    display: inline-block;
    margin-right: 5px;
}

.reservation-confirm .box-cm {
    padding-top: 24px;
}

.reservation-confirm .box-cm span {
    margin-right: 20px;
}

.payment-content {
    border-radius: 4px;
    border: 1px solid #E8E8E8;
}

.row-25 {
    margin-left: -25px;
    margin-right: -25px;
}

.row-25>div {
    padding-left: 25px;
    padding-right: 25px;
}

.payment-c-head {
    padding: 13px 24px;
    border-bottom: 1px solid #e8e8e8;
    display: table;
    width: 100%;
    min-height: 48px;
}

.payment-c-head>p {
    display: table-cell;
    vertical-align: middle;
    font-size: 14px;
    font-weight: bold;
}

.payment-c-head .btn-blue-outline {
    margin-bottom: 0;
}

.payment-c-body {
    padding: 0 24px 24px 24px;
    background-color: #F8F8F8;
}

.payment-c1-tbl {
    border-collapse: separate;
    border-spacing: 0 24px;
    width: 100%;
}

.payment-c1-tbl td {
    padding: 10px;
    font-size: 14px;
    border: 1px solid #E8E8E8;
}

.payment-c1-tbl tr>td:nth-child(1) {
    font-weight: bold;
    text-align: center;
    width: 130px;
    background-color: #E8E8E8;
}

.payment-c1-tbl tr>td:nth-child(2) {
    background-color: #fff;
    padding-left: 24px;
}

.payment-c1-tbl tr:last-child>td {
    border: 1px solid #000;
}

.payment-c1-tbl tr:last-child>td:nth-child(1) {
    background-color: #000;
    color: #fff;
}

.payment-c1-tbl tr:last-child>td:nth-child(2) {
    font-size: 19px;
    font-weight: bold;
    padding: 5px 5px 5px 24px;
}

.btn-outline-black-02 {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    padding: 2px 12px;
    color: #000;
    border: 1px solid #000;
    border-radius: 20px;
}

.btn-outline-black-02:hover {
    background-color: #000;
    color: #fff;
}

.payment-c2-tbl {
    border-collapse: separate;
    border-spacing: 0 12px;
    width: 100%;
}

.payment-c2-tbl td {
    padding: 10px;
    font-size: 12px;
    border: 1px solid #E8E8E8;
}

.payment-c2-tbl tr>td:nth-child(1) {
    background-color: #E8E8E8;
    font-weight: bold;
}

.payment-c2-tbl tr>td:nth-child(2) {
    background-color: #fff;
}

.btn-arrow-blue {
    color: #30C0F0;
    font-size: 12px;
    display: inline-block;
}

.btn-arrow-blue:after {
    content: '';
    width: 10px;
    height: 10px;
    display: inline-block;
    background: url(/sys/will/3/en/include/img/icon_arrow_blue.svg) no-repeat;
    background-size: 100%;
    margin-left: 7px;
}

.payment-c2 .payment-c-body {
    padding: 12px 24px 12px 24px
}

.departed h2 {
    background-color: #C8C8C8;
}

@media(max-width:767px) {
    .reservations-detail-page .btn-list {
        background-color: #fff;
    }

    .reservations-detail-page .btn-blue,
    .reservations-detail-page .btn-orange,
    .reservations-detail-page .btn-green {
        width: 100%;
        font-size: 13px;
        padding: 10px;
    }

    .btn-list>a {
        margin-bottom: 24px;
    }

    .btn-list>a:last-child {
        margin-bottom: 0;
    }

    .btn-list .btn-orange:before {
        margin-right: 10px;
    }

    .btn-list .btn-green:before,
    .btn-list .btn-blue:before {
        width: 12px;
        height: 12px;
        margin-right: 10px;
    }

    .reservations-detail-page .account-title-cm {
        font-size: 17px;
    }

    .reservation-confirm .box-cm {
        text-align: center;
    }

    .reservation-confirm .box-cm span {
        text-align: left;
        display: block;
        margin-right: 0;
        border-bottom: 1px solid #e8e8e8;
        padding-bottom: 5px;
    }

    .reservation-confirm .btn-blue-outline {
        width: auto;
        display: inline-block;
        margin: 0 auto;
        margin-top: 20px;
    }

    .payment-info .account-title-cm {
        display: none;
    }

    .payment-content {
        border-radius: 0;
        border: none;
        margin-left: -24px;
        margin-right: -24px;
    }

    .payment-c-head {
        background: url(/sys/will/share/en/img/common/bg_gray.png);
        padding: 8px 24px;
        margin-top: 20px;
    }

    .payment-c-head>p {
        font-size: 17px;
    }

    .payment-c-head .btn-blue-outline {
        margin-bottom: 0;
        width: auto;
        background-color: #fff;
        display: inline-block;
    }

    .payment-c1-tbl tr:last-child>td:nth-child(2) {
        font-size: 13px;
        padding: 10px 5px 10px 24px;
    }

    .payment-c-body {
        background-color: inherit;
    }

    /*
	.payment-c2-tbl tr:last-child,
	.payment-c2-tbl tr:last-child td{
		display: block;
		width: 100%;
	}
*/
    .payment-c1-tbl tr>td:nth-child(1) {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        text-align: left;
    }

    .payment-c1-tbl tr>td:last-child {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
}

.modal-green .modal-header {
    background-color: #18C090;
}

.modal-green .modal-title {
    font-size: 17px;
    font-weight: bold;
    color: #fff;
}

.modal-green .modal-header .close {
    padding: 5px 20px;
    opacity: 1;
}

.modal-green .close span {
    font-size: 35px;
    color: #fff;
}

.change-list {
    padding-left: 24px;
    padding-right: 24px;
}

.change-list li {
    border-bottom: 1px solid #e8e8e8;
    padding: 20px 0 30px 0;
}

.change-list li:last-child {
    border-bottom: none;
}

.change-list li>a {
    display: table;
}

.change-list li>a>p,
.change-list li>a>span {
    display: table-cell;
    vertical-align: middle;
}

.wrap-changeimg {
    width: 60px;
}

.change-list li>a>p {
    font-size: 17px;
    font-weight: bold;
}

.change-list li>p {
    font-size: 12px;
}

.change-list li .textorange {
    display: block;
    margin-bottom: 5px;
}

.mt15 {
    margin-top: 15px;
}

@media(max-width:767px) {
    .modal-green.modal {
        padding-left: 14px;
        padding-right: 14px;
    }

    .payment-c2-tbl tr {
        width: 100%;
        display: block;
        margin-bottom: 20px;
        border: 1px solid #e8e8e8;
        border-radius: 4px;
        overflow: hidden;
    }

    .payment-c2-tbl td {
        display: block;
        border: none;
        width: 50%;
        float: left;
    }

    .payment-c2-tbl tr:last-child td {
        width: 100%;
    }

    .payment-c2-tbl tr:last-child td:last-child {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .payment-c2-tbl tr:after {
        content: '';
        display: block;
        clear: both;
    }
}

.reservations-detail-title:after {
    content: '';
    display: block;
    clear: both;
}

.reservations-detail-title {
    position: relative;
}

.reservations-detail-title .btn-blue {
    width: auto;
    padding: 5px 30px;
    border-bottom: none;
    position: absolute;
    top: 0;
    right: 0;
}

@media(max-width:767px) {
    .reservations-detail-title .btn-blue {
        position: inherit;
        top: inherit;
        right: inherit;
        width: auto;
        max-width: 85%;
        margin: 20px auto;
        display: block;
        padding: 10px 10px;
    }
}

/*----- Web coupon -----*/
.coupon-page {
    padding-top: 50px;
    padding-bottom: 70px;
}

.webcoupon-title:after {
    content: '';
    display: block;
    clear: both;
}

.coupon-item {
    margin-bottom: 50px;
    margin-top: 30px;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    overflow: hidden;
}

.coupon-page>.coupon-item:last-child {
    margin-bottom: 0;
}

.coupon-item:after {
    content: '';
    display: block;
    clear: both;
}

.btn-coupon-cm {
    width: auto;
    padding: 5px 22px;
    border-bottom: none;
    border-radius: 40px;
    font-size: 13px;
    display: inline-block;
}

.btn-arrow-blue {
    font-size: 13px;
    display: block;
    text-align: center;
    text-decoration: underline;
}

.coupon-title {
    background-color: #f8f8f8;
    padding: 15px 24px;
    display: table;
    width: 100%;
}

.coupon-title .bg-dark,
.coupon-title h2 {
    display: table-cell;
    vertical-align: middle;
}

.coupon-title .bg-dark {
    font-size: 17px;
    font-weight: bold;
    color: #fff;
    padding: 8px 12px;
    width: 160px;
}

.coupon-title h2 {
    font-size: 21px;
    font-weight: bold;
    padding-left: 15px;
}

.coupon-item-c {
    border-top: 1px solid #E8E8E8;
    padding: 24px;
}

.clearfix {
    clear: both;
}

.notify-member {
    font-size: 13px;
    font-weight: bold;
    border: 1px solid #000;
    padding: 4px 10px;
}

.coupon-item-title {
    font-size: 27px;
    font-weight: bold;
}

.clearfix:before {
    content: '';
    clear: both;
    display: block;
}

.coupon-tbl {
    border-collapse: separate;
    border-spacing: 0 12px;
    width: 100%;
}

.coupon-tbl td {
    padding: 8px 24px;
    font-size: 15px;
    border: 1px solid #E8E8E8;
    vertical-align: top;
}

.coupon-tbl tr>td:nth-child(1) {
    background-color: #E8E8E8;
    font-weight: bold;
    min-width: 240px;
}

.btn-arrow-blue-02 {
    font-size: 15px;
    padding: 10px;
    width: 240px;
    display: inline-block;
    text-align: center;
    background: url(/sys/will/3/en/include/img/icon_arrow_white.svg) no-repeat 90% center #30C0F0;
    border-radius: 48px;
    color: #fff;
}

.btn-arrow-blue-02:hover {
    opacity: 0.75;
    color: #fff;
}

.btn.h36 {
    line-height: 33px;
}

.f15 {
    font-size: 15px;
}

.coupon-item-c .btn {
    width: 240px;
    border-bottom: none;
}

@media(max-width:767px) {

    .webcoupon-title .float-left,
    .webcoupon-title .float-right {
        float: inherit;
    }

    .webcoupon-title .float-right {
        text-align: center;
        margin-top: 20px;
        width: 100%;
    }

    .btn-coupon-cm {
        padding: 9px 22px;
        font-size: 15px;
        width: 100%;
    }

    .webcoupon-title {
        border-bottom: 1px solid #e8e8e8;
        margin-left: -24px;
        margin-right: -24px;
        padding: 0 24px 24px 24px;
    }

    .coupon-item {
        border: 1px solid #e8e8e8;
    }

    .coupon-title {
        padding: 0;
        overflow: hidden;
        background: url(/sys/will/share/en/img/common/bg_gray.png);
    }

    .coupon-title {
        display: block;
    }

    .coupon-title .bg-dark,
    .coupon-title h2 {
        display: block;
    }

    .coupon-title .bg-dark {
        width: 100%;
        padding: 14px 24px;
        text-align: left;
    }

    .coupon-title h2 {
        font-size: 18px;
        padding: 15px 24px;
        margin-left: 0;
    }

    .notify-member {
        float: inherit !important;
        margin-bottom: 20px;
        display: inline-block;
        ;
    }

    .coupon-tbl {
        border-collapse: collapse;
        border-spacing: inherit;
        margin-top: 20px;
        display: block;
        margin-left: -24px;
        margin-right: -24px;
        width: auto;
    }

    .coupon-tbl td {
        display: block;
        width: 100%;
        border-top: 1px solid #E8E8E8;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }

    .coupon-tbl tr>td:last-child {
        margin-bottom: 20px;
    }

    .coupon-item-c .btn,
    .btn-arrow-blue-02 {
        font-weight: bold;
        font-size: 17px;
        width: 100%;
        padding: 8px;
    }

    .coupon-item-c .btn {
        min-height: inherit;
        height: auto;
        line-height: inherit;
        border-radius: 36px;
    }

    .coupon-item-title {
        font-size: 21px;
        float: inherit !important;
    }

    .coupon-tbl tr>td:nth-child(1) {
        background-color: #f8f8f8;
    }

    .coupon-item {
        margin-bottom: 30px;
    }
}

/*--- Coupon detail ---*/
.coupon-detail-page .btn {
    border-bottom: none;
}

@media(min-width:767px) {
    .coupon-detail-page .coupon-title {
        padding: 0;
    }

    .coupon-detail-page .coupon-item {
        border: none;
        border-radius: 0;
    }

    .coupon-detail-page .coupon-item-c {
        padding: 24px 0;
    }

    .coupon-detail-page .coupon-item-c {
        border-top: none;
    }

    .coupon-detail-page .webcoupon-title .float-right a {
        margin-top: 30px;
    }
}

@media(max-width:767px) {
    .coupon-condition>div {
        padding: 0 24px;
        border: 1px solid #e8e8e8;
        margin-top: 20px;
    }

    .coupon-condition>div .coupon-tbl {
        margin-top: 0;
    }

    .coupon-condition>div .coupon-tbl tr:first-child>td:first-child {
        border-top: none;
    }

    .coupon-detail-page .btn {
        min-height: inherit;
        height: auto;
        line-height: inherit;
        padding: 9px;
    }
}


.coupon-completed {
    color: #18C090;
    font-size: 17px;
    font-weight: bold;
    display: inline-block;
}

.coupon-completed:before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 30px;
    background: url(/sys/will/3/en/include/img/icon_coupon_green.svg) no-repeat;
    background-size: 100%;
    margin-right: 10px;
    vertical-align: middle;
}

.btn-black {
    background-color: #000;
    color: #fff;
    width: auto;
    padding: 0 30px 0 20px;
}

.coupon-btn-list .btn-orange {
    width: 240px;
}

.coupon-btn-list .btn {
    margin: 0 12px;
}

@media(max-width:767px) {
    .coupon-btn-list .btn {
        width: 100%;
        margin: 10px 0;
        padding: 9px;
    }

    .coupon-completed {
        width: 100%;
        text-align: center;
    }
}

.pagination {
    text-align: center;
    display: block;
    width: 100%;
}

.pagination li {
    display: inline-block;
    margin: 0 6px;
    font-size: 40px;
    letter-spacing: -1px;
}

.pagination li a {
    width: 36px;
    height: 36px;
    text-align: center;
    font-size: 17px;
    border-radius: 4px;
    border: 1px solid #C8C8C8;
    color: #C8C8C8;
    line-height: 36px;
    display: inline-block;
}

.pagination li:hover a {
    background-color: #c8c8c8;
    color: #fff;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 2px solid rgb(0 0 0 / 24%);
}

.pagination li.active a {
    background-color: #FF483C;
    color: #fff;
    border: none;
}

@media(max-width:767px) {
    .pagination {
        margin-top: 27px;
    }

    .pagination li a {
        background-color: #fff;
    }
}

@media(max-width:320px) {
    .pagination li {
        margin: 0 3px;
    }
}

/*common list-inline-mypage*/
.wrappage .list-inline li {
    padding: 0px 10px;
}