@charset "UTF-8";

.loginArea .thirdPartyItem svg {
    transition: all 0.5s;
}

.contentBox .leftBox {
    padding-right: 50px;
}

@media (max-width: 1023px) {
    .contentBox .leftBox {
        padding: 0;
    }
}

.contentBox .rightBox {
    padding: 0;
}

.titleBox {
    margin-bottom: 30px;
}

.loginArea {
    display: flex;
    width: 100%;
    max-width: 1060px;
    margin: 60px auto 30px;
    border-radius: 5px;
    background-color: #fff;
    padding: 90px;
    border: 1px solid #f1f1f1;
    box-shadow: 0px 0px 15px 0px rgba(4, 4, 4, 0.1);
}

    .loginArea.noThirdParty {
        max-width: 760px;
    }

        .loginArea.noThirdParty .leftBox {
            width: 100%;
            padding-right: 0;
            padding-bottom: 0;
        }

@media (max-width: 960px) {
    .loginArea {
        padding: 45px;
    }
}

@media (max-width: 767px) {
    .loginArea {
        flex-direction: column;
        padding: 30px 20px;
    }
}

@media (max-width: 640px) {
    .loginArea {
        margin: 30px auto;
        border: none;
        box-shadow: none;
    }
}

.loginArea .leftBox,
.loginArea .rightBox {
    position: relative;
    width: 50%;
}

@media (max-width: 767px) {
    .loginArea .leftBox,
    .loginArea .rightBox {
        width: 100%;
    }
}

.loginArea .leftBox {
    padding-right: 90px;
}

@media (max-width: 960px) {
    .loginArea .leftBox {
        padding-right: 45px;
    }
}

@media (max-width: 767px) {
    .loginArea .leftBox {
        padding-right: 0;
        padding-bottom: 30px;
    }
}

.loginArea .rightBox {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 90px;
    border-left: 1px solid #eaeaea;
}

@media (max-width: 960px) {
    .loginArea .rightBox {
        padding-left: 45px;
    }
}

@media (max-width: 767px) {
    .loginArea .rightBox {
        padding-left: 0;
        padding-top: 30px;
        border-left: none;
        border-top: 1px solid #eaeaea;
    }
}

.loginArea .rightBox::before {
    content: "OR";
    position: absolute;
    left: -25px;
    top: 50%;
    margin-top: -25px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    letter-spacing: 0.05em;
    background-color: #fff;
}

@media (max-width: 767px) {
    .loginArea .rightBox::before {
        top: -25px;
        left: 50%;
        margin-left: -25px;
        margin-top: 0;
    }
}

.loginArea .welcomeText {
    margin-bottom: 50px;
    letter-spacing: 0.05em;
}

    .loginArea .welcomeText .text {
        font-size: 22px;
        color: #111;
    }

@media (max-width: 767px) {
    .loginArea .welcomeText .text {
        font-size: 20px;
    }
}

.loginArea input[type=text], .loginArea input[type=tel], .loginArea input[type=email], .loginArea input[type=password] {
    width: 100%;
    height: 42px;
    padding: 10px 50px 10px 0;
    background: none;
    border: none;
    border-bottom: 1px solid #555;
    font-size: 16px;
    color: #000;
    transition: all 0.5s;
}

    .loginArea input[type=text]:focus, .loginArea input[type=text].hasValue, .loginArea input[type=tel]:focus, .loginArea input[type=tel].hasValue, .loginArea input[type=email]:focus, .loginArea input[type=email].hasValue, .loginArea input[type=password]:focus, .loginArea input[type=password].hasValue {
        border-color: #2b455c;
    }

        .loginArea input[type=text]:focus ~ .title, .loginArea input[type=text].hasValue ~ .title, .loginArea input[type=tel]:focus ~ .title, .loginArea input[type=tel].hasValue ~ .title, .loginArea input[type=email]:focus ~ .title, .loginArea input[type=email].hasValue ~ .title, .loginArea input[type=password]:focus ~ .title, .loginArea input[type=password].hasValue ~ .title {
            top: -15px;
        }

.loginArea .btn_relog {
    font-size: 14px;
    letter-spacing: 0.05em;
    color: #454545;
}

.loginArea .icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.loginArea .iconLock {
    width: 15px;
    height: 20px;
}

.loginArea .iconKey {
    width: 15px;
    height: 15px;
}

.loginArea .inputBox {
    position: relative;
    color: #000;
    margin-bottom: 40px;
}

.loginArea .textBox {
    padding-top: 15px;
    text-align: center;
    font-size: 16px;
}

    .loginArea .textBox a {
        color: #2b455c;
    }

        .loginArea .textBox a:hover {
            text-decoration: underline;
        }

.loginArea .title {
    position: absolute;
    left: 0;
    top: 10px;
    font-size: 14px;
    letter-spacing: 0.05em;
    color: #808080;
    transition: all 0.5s;
}

.loginArea .btnBox {
    margin-bottom: 15px;
}

    .loginArea .btnBox.flex {
        justify-content: flex-start;
    }

    .loginArea .btnBox .textLink {
        position: relative;
        font-size: 14px;
        padding-right: 10px;
        margin-right: 10px;
    }

        .loginArea .btnBox .textLink:not(:last-child)::after {
            content: "";
            width: 1px;
            height: 14px;
            background-color: #808080;
            position: absolute;
            top: 50%;
            right: 0;
            margin-top: -7px;
        }

.loginArea .thirdPartyBox {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.loginArea .thirdPartyItem {
    height: 50px;
    background-repeat: no-repeat;
    background-size: 22px 22px;
    background-position: 18px 50%;
    line-height: 50px;
    margin-bottom: 25px;
    position: relative;
    transition: all 0.5s;
    text-align: center;
}

    .loginArea .thirdPartyItem svg {
        width: 24px;
        height: 22px;
        display: inline-block;
        fill: #fff;
        position: absolute;
        top: 50%;
        left: 20px;
        z-index: 1;
        transform: translateY(-50%);
        vertical-align: middle;
    }

    .loginArea .thirdPartyItem a {
        color: #454545;
        display: block;
        font-size: 14px;
        letter-spacing: 0.5px;
        padding: 0 45px;
    }

.loginArea .thirdPartyItemGoogle {
    background-color: #f1f1f1;
}

.loginArea .thirdPartyItemFb {
    background-color: #3b5781;
}

    .loginArea .thirdPartyItemFb a {
        color: #fff;
    }

.loginArea .thirdPartyItemLine {
    border: 1px solid #c9c9c9;
}

@media (min-width: 1201px) {
    .loginArea .thirdPartyItem:hover {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
        transform: translateY(-2px);
    }
}

.loginArea .forgetCheck,
.loginArea .resendCheck {
    display: none;
}

.loginArea .btn_relog {
    display: inline-block;
    padding-top: 15px;
    color: #808080;
    border-bottom: 1px solid #808080;
}

    .loginArea .btn_relog:hover {
        color: #2b455c;
        border-bottom-color: #2b455c;
    }

/*註冊頁面*/
.section {
    margin-bottom: 40px;
}

    .section .condition .textEditor {
        height: 250px;
        margin: 0;
        padding: 15px;
        border: 1px solid #ccc;
        font-size: 13px;
        background-color: #fff;
        overflow-y: scroll;
    }

    .section .condition .check {
        margin-top: 10px;
        font-size: 15px;
    }

        .section .condition .check label {
            display: flex;
            align-items: center;
        }

            .section .condition .check label a {
                color: #d69f42;
                text-decoration: underline;
            }

@media (min-width: 1201px) {
    .section .condition .check label a:hover {
        color: #bc8529;
    }
}

.section .condition .check input[type=checkbox] {
    margin-right: 5px;
    width: 18px;
    height: 18px;
}

/*history.php 歷史訂單列表*/
.orderTxt {
    font-size: 14px;
    letter-spacing: 0.05em;
    padding-bottom: 10px;
}

.orderList table {
    border-collapse: collapse;
    color: #222;
}

.orderList th {
    padding: 15px;
    letter-spacing: 0.1em;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    border: 1px solid #ececec;
    background-color: #2b455c;
}

.orderList td {
    padding: 15px 10px;
    font-size: 13px;
    color: #434343;
    letter-spacing: 0.05em;
    background: #fff;
    border: 1px solid #ececec;
}

.orderList a {
    color: #2b455c;
}

    .orderList a:hover {
        text-decoration: underline;
    }

.formList {
    display: flex;
    flex-wrap: wrap;
    margin-left: -20px;
    margin-right: -20px;
}

    .formList li {
        width: 50%;
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 20px;
    }

@media (max-width: 767px) {
    .formList li {
        width: 100%;
    }
}

.formList .full {
    width: 100%;
}

.formList .noteTxt {
    margin-top: 10px;
    font-size: 13px;
    color: #959595;
    letter-spacing: 0.05em;
}

.formList .left {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 15px;
    color: #454545;
    letter-spacing: 0.05em;
}

    .formList .left em {
        color: #e24242;
    }

.formList .right {
    font-size: 15px;
    letter-spacing: 0.05em;
    color: #454545;
}

    .formList .right a {
        font-size: 15px;
        letter-spacing: 0.05em;
        color: #454545;
    }

        .formList .right a:hover {
            text-decoration: underline;
        }

.formList select {
    height: 50px;
    border: 1px solid #dbdbdb;
}

.formList input[type=text], .formList input[type=date], .formList input[type=password] {
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 25px;
    border: 1px solid #dbdbdb;
    font-size: 14px;
    letter-spacing: 0.2em;
}

.formList .billBox {
    width: 100%;
}

    .formList .billBox .selfBox,
    .formList .billBox .companyBox {
        display: none;
    }

@media (max-width: 640px) {
    .formList .billBox .selfBox label,
    .formList .billBox .companyBox label {
        flex-direction: column;
    }
}

.formList .billBox .selfBox {
    margin-top: 10px;
}

    .formList .billBox .selfBox label {
        display: none;
        margin-right: 0;
    }

        .formList .billBox .selfBox label.appear {
            display: flex;
            flex-wrap: wrap;
        }

@media (max-width: 768px) {
    .formList .billBox .selfBox label input[type=text] {
        padding: 5px 15px 5px 30px;
    }
}

@media (max-width: 640px) {
    .formList .billBox .selfBox label input[type=text] {
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    .formList .billBox .selfBox label input[type=text] {
        padding: 5px 15px;
    }
}

.formList .billBox .selfBox label a {
    display: block;
    min-width: 120px;
    border-bottom: 1px solid #000;
    font-size: 18px;
    color: #6b6b6b;
    padding-bottom: 5px;
    margin: 10px 0;
    margin-left: 5px;
}

@media (max-width: 960px) {
    .formList .billBox .selfBox label a {
        font-size: 16px;
        min-width: 100px;
    }
}

.formList .billBox .selfBox label a img {
    display: inline-block;
    width: 15px;
    filter: grayscale(0.8);
    margin-right: 5px;
}

@media (min-width: 1201px) {
    .formList .billBox .selfBox label a:hover {
        color: #2b455c;
        border-bottom: 1px solid #2b455c;
    }

        .formList .billBox .selfBox label a:hover img {
            filter: grayscale(0);
        }
}

.formList .billBox .radioSet {
    display: flex;
    align-items: center;
    color: #6b6b6b;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    text-transform: uppercase;
}

    .formList .billBox .radioSet li {
        margin-right: 15px;
    }

    .formList .billBox .radioSet label {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;
        margin-top: 9px;
    }

        .formList .billBox .radioSet label:not(:last-child) {
            margin-right: 85px;
        }

@media (max-width: 1080px) {
    .formList .billBox .radioSet label:not(:last-child) {
        margin-right: 15px;
    }
}

.formList .billBox .radioSet input[type=radio],
.formList .billBox .radioSet input[type=checkbox] {
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #cecece;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    border-radius: 50%;
    cursor: pointer;
}

    .formList .billBox .radioSet input[type=radio]::after,
    .formList .billBox .radioSet input[type=checkbox]::after {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        position: absolute;
        content: "";
        display: inline-block;
        vertical-align: middle;
        visibility: visible;
    }

    .formList .billBox .radioSet input[type=radio]:checked::after,
    .formList .billBox .radioSet input[type=checkbox]:checked::after {
        background-color: #333;
    }

.formList .billBox .radioSet .txt {
    display: inline-block;
    flex: 1;
    text-align: left;
}

.formList .billBox label {
    display: flex;
    align-items: center;
}

    .formList .billBox label .subtitle {
        min-width: 130px;
        background: #dbdbdb;
        height: 50px;
        line-height: 50px;
        padding: 0 10px 0 30px;
    }

@media (max-width: 768px) {
    .formList .billBox label .subtitle {
        min-width: 110px;
        padding: 0px 15px;
        border-right: 1px solid #dbdbdb;
    }
}

@media (max-width: 640px) {
    .formList .billBox label .subtitle {
        width: 100%;
        padding: 15px;
        border-right: transparent;
        height: initial;
        line-height: normal;
    }
}

@media (max-width: 480px) {
    .formList .billBox label .subtitle {
        padding: 15px;
    }
}

@media (max-width: 960px) {
    .formList .billBox label input {
        margin-right: 5px;
    }
}

@media (max-width: 768px) {
    .formList .billBox label input {
        margin-right: 0;
    }
}

.formList .billBox label input[type=text] {
    flex: 1;
}

@media (max-width: 768px) {
    .formList .billBox label input[type=text] {
        flex: 1;
        max-width: initial;
        padding: 5px 15px;
    }
}

.formList .billBox .noteTxt {
    margin-top: 25px;
}

.formList .billBox.bill_company .companyBox {
    display: block;
}

.formList .billBox.bill_company .radioSet {
    display: none;
}

.formList .billBox.bill_self .selfBox {
    display: block;
}

@media (max-width: 768px) {
    .formList .billBox.bill_self .radioSet {
        flex-wrap: wrap;
    }
}

/**/
.couponList {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
}

.couponitem {
    width: 33.3333333333%;
}

@media (max-width: 1280px) {
    .couponitem {
        width: 50%;
    }
}

@media (max-width: 560px) {
    .couponitem {
        width: 100%;
    }
}

.couponitem.used .payBtnStyle {
    background: #929292;
    color: #fff;
    border: 2px solid #929292;
}

@media (min-width: 1201px) {
    .couponitem.used .payBtnStyle:hover {
        background: #797979;
        border: 2px solid #797979;
    }
}

.couponitem.used .Img img:nth-child(1) {
    opacity: 0;
}

.couponitem.wasUsed .Img, .couponitem.invalid .Img {
    pointer-events: none;
    filter: grayscale(1);
    opacity: 0.4;
}

.couponitem .item {
    position: relative;
    margin: 0 auto 25px;
}

@media (max-width: 860px) {
    .couponitem .item {
        padding: 0 10px;
    }
}

@media (max-width: 768px) {
    .couponitem .item {
        padding: 5px;
    }
}

.couponitem .sticker {
    position: absolute;
    right: 15%;
    top: 23%;
    z-index: 5;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

    .couponitem .sticker::after {
        content: "";
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        width: 90%;
        height: 90%;
    }

    .couponitem .sticker .txt {
        width: 83%;
        display: block;
        margin-top: 28px;
        margin-left: 7px;
        transform: rotate(-25deg);
        transform-origin: center;
    }

.couponitem .stickerInvalid {
    background: #fff;
}

    .couponitem .stickerInvalid::after {
        border: 1px solid #797979;
    }

    .couponitem .stickerInvalid .txt {
        color: #797979;
        border-top: 1px solid #797979;
        border-bottom: 1px solid #797979;
    }

.couponitem .stickerWasUsed {
    background: #2b455c;
}

    .couponitem .stickerWasUsed::after {
        border: 1px solid #fff;
    }

    .couponitem .stickerWasUsed .txt {
        color: #fff;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
    }

.couponitem .ticket {
    position: relative;
    z-index: 1;
}

.couponitem .Txt {
    position: absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 175px;
    padding: 0 20px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

@media (max-width: 1180px) {
    .couponitem .Txt {
        padding: 0 10px;
    }
}

@media (max-width: 860px) {
    .couponitem .Txt {
        max-width: 150px;
    }
}

.couponitem .Txt .title {
    width: 100%;
    font-size: 15px;
    font-weight: 400;
    border-bottom: 1px solid #fff;
    margin-bottom: 5px;
}

@media (max-width: 860px) {
    .couponitem .Txt .title {
        font-size: 12px;
    }
}

.couponitem .Txt .title .price {
    font-size: 30px;
    font-weight: 400;
    margin-left: 10px;
    letter-spacing: 1.5px;
}

@media (max-width: 860px) {
    .couponitem .Txt .title .price {
        font-size: 18px;
    }
}

.couponitem .Txt .note {
    font-size: 12px;
    padding: 0 0 10px;
    letter-spacing: 1.5px;
}

.couponitem .Txt .date {
    width: 100%;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: #6f6f6f;
    background: #fff;
    border-radius: 10px;
    margin: 0 5px 10px;
}

.couponitem .Img {
    position: relative;
    z-index: 0;
    max-width: 285px;
    margin: 0 auto;
}

    .couponitem .Img img {
        width: 100%;
        display: block;
        backface-visibility: hidden;
    }

        .couponitem .Img img:nth-child(1) {
            position: relative;
            z-index: 1;
        }

        .couponitem .Img img:nth-child(2) {
            position: absolute;
            z-index: 0;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

.couponitem .button {
    text-align: center;
    margin-top: 20px;
}