// ===========================
// 五福旅遊購物流程樣式 202100709
// ===========================

// =======
// 匯入模組
// =======
@import '../modules/variables';

a{text-decoration: underline;}
b{text-decoration: none;}
textarea{-webkit-appearance: none;}
textarea::-webkit-input-placeholder { color: $color-gray; }
textarea:-ms-input-placeholder { color: $color-gray; }
input{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    font-family: 'Century Gothic', 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', 'Roboto';
}
input[type=number] {
    -moz-appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
hr{
    opacity: 1 !important
}

.ws-nowrap { white-space: nowrap; }
.mw-50p{ max-width: 50px;}
.bold{ font-weight: 700; }
.dsf{ display: flex; }
.fww{flex-wrap: wrap;}
.mgt-30{ margin-top: 30px;}
.mgb-30{ margin-bottom: 30px;}
.mgr-5{ margin-right: 5px;}
.mgr-10{ margin-right: 10px;}
.mgr-15{ margin-right: 15px;}
.mgr-30{ margin-right: 30px;}
.mgb-40{ margin-bottom: 40px;}
.fs-30{ font-size: 30px;}
.bt-d{ border-top: dotted 1px $color-gray-300; }
.c-textgray{color: rgba(34,60,74,0.6);}
.c-pricered{color: $color-price }
.highlight{
    color: $color-primary;
    font-weight: bold;
}
.price-highlight{
    color: $color-price;
    font-weight: bold;
}
@mixin middle{ margin: 0 auto;}

.page{
    width: 100%;
    font-size: 15px;
}

.header{
    margin: 30px 0;
    .header-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1200px;
        margin: auto;
        .logo {
            height: 50px;
            img{height: 100%;}
        }
        .progress-step {
            display: flex;
            position: relative;
            align-items: center;
            justify-content: space-between;
            height: auto;
            .step {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                margin-right: 25px;
                counter-increment: stepIndex;
                &.animation{ &::before,&::after{ animation: icon 0.3s;animation-delay: 0.2s;}}
                &.delay-1{ &::before,&::after{animation: icon 0.5s;animation-delay: 0.8s;}}
                &.delay-2{ &::before,&::after{animation: icon 0.5s;animation-delay: 1.3s;}}
                &.delay-3{ &::before,&::after{animation: icon 0.5s;animation-delay: 1.8s;}}
                &.delay-4{ &::before,&::after{animation: icon 0.5s;animation-delay: 2.3s;}}
                &::before {
                    z-index: 888;
                    content: counter(stepIndex);
                    font-size: 15px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 40px;
                    min-width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    margin-right: 10px;
                    border: solid 1px $color-gray-300;
                    background-color: #fff;
                }
                &::after {
                    content: attr(data-step-text);
                    color: $color-gray-300;
                }
                &.done {
                    &::before {
                        font-family: 'icomoon';
                        content: '\ebd2';
                        color: $color-green;
                        font-size: 24px;
                    }
                    &::after{
                        color: $color-dark;
                    }
                    .step_title{
                        color: $color-dark;
                        font-weight: bold;
                    }
                }
                &.current {
                    &::before {
                        border: solid 1px $color-brand;
                        background-color: $color-brand;
                        color: white;
                        // margin-top: 0px;
                    }
                    &::after {
                        color: $color-dark;
                    }
                    .step_title{
                        p{
                            color: $color-dark;
                            font-weight: bold;
                        }
                    }
                }
                &:last-child { margin: 0; }
            }
        }
        .login{
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
        .login{
            color: $color-brand;
            text-decoration: none;
            border-radius: 3px;
            > a{
                padding: 10px 0px 10px 10px;
                text-decoration: none;
                border-radius: 3px;
                cursor: pointer;
                transition: all .3s ease-in-out;
                &:hover {
                    opacity: 0.8;
                }
            }
        }
        .account{
            display: inline;
            max-width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            &::before{
                font-family: "icomoon";
                content: "\e9e0";
                margin-right: 5px;
            }
        }
    }
}

.container{
    @include middle;
    max-width: 1200px;
    overflow: hidden;
    // > main, > aside { float: left;}
    // display: flex;
}

main {
    width: calc(100% - 325px);
    margin-right: 25px;
}

aside {
    // display: flex;
    // align-content: stretch;
    height: calc(100vh - 130px);
    width: 300px;
    .aside-inner {
        display: flex;
        align-content: space-between;
        flex-wrap: wrap;
        height: 100%;
        width: 100%;
        > div {
            width: 100%;
        }
    }
    .wrap-inner {
        display: flex;
        flex-wrap: wrap;
        background: white;
        padding: 15px;
        -ms-overflow-style: none; //ie10 up
        overflow: -moz-scrollbars-none; //firefox
        // border: solid 1px red;
        .wrap-head{
            font-size: 20px;  font-weight: bold;
            width: 100%;
            margin-bottom: 25px;
            &::after{ content: attr(data-collapse-title);}
            i{ display: none;}
        }
        .wrap-item{
            width: 100%;
        }
        .wrap-item::-webkit-scrollbar{ display: none; }
        .scrollpanel{
            width: 100%;
            position: relative;
            //隱藏scrollbar呈現
            -ms-overflow-style: none; //ie10 up
            overflow: -moz-scrollbars-none; //firefox
            ::-webkit-scrollbar{ display: none; };  //chrome, safari
            .scrollTop, .scrollDown{
                display: flex;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                z-index: 99;
                align-items: center;
                justify-content: center;
                font-family: 'icomoon';
                color: #fff;
                font-size: 15px;
                width: 25px;
                height: 25px;
                border-radius: 50%;
                background-color: rgba(0,0,0,0.5);
                cursor: pointer;
                opacity: 0;
                // visibility: hidden;
                transition: all .2s ease-in-out;
                &.show{
                    opacity: 1;
                }
            }
            .scrollTop{
                top: 0px;
                &:before{
                    content: '\e9cb';
                }
            }
            .scrollDown{
                bottom: 0px;
                &:before{
                    content: '\ebdc';
                }
            }
        }
    }
    .dropdown-wrapper .dropdown-head{
        display: none;
        width: 100%;
        border-bottom: solid 2px #f6f6f6;
    }
    .dropdown-wrapper .dropdown-head+.dropdown-pane{ padding: 0px; }
    .middle{margin: 15px auto;}
    .accu-price{
        display: flex;
        background-color: $color-brand;
        color: white;
        padding: 10px 15px;
        line-height: 18px;
        border-radius: 0px 0px 3px 3px;
        .accu-title{ width: 70%; font-weight: bold; }
        .total-price{ 
            display: flex;
            justify-content: flex-end;
            width: 30%;
        }
        .symbol-money{
            &::before{
                content: "\e905";
                top: -0.5px; left: -26px;
                transform: scale(0.8);
            }
        }
    }  
    .price-type{
        .type-title{
            display: flex;
            font-size: 15px; font-weight: bold;
        }
        .type-content{
            display: flex;
            margin: 10px 0px;
            font-size: 13px;
            .content-title{ width: 70%; }
            .content-number{ 
                display: flex;
                justify-content: flex-end;
                width: 30%;
            }
        }
        hr{
            margin: 10px 0px;
            border-top: dotted 1px $color-gray-300;
            width: 100%;
        }
    }
    .symbol-money{
        position: relative;
        &::before{
            content: "\ed7e";
            font-family: "icomoon";
            font-size: 1.2em;
            position: absolute;
            left: -8px; top: -4px;
        }
    }
    .divider{
        width: 100%;
        margin: 15px 0px;
        border: solid 1px $color-gray-50;
    }
    .toolbar{
        .btn-default{
            &:last-child{margin-bottom: 0px;}
        }
        hr{
            opacity: 0.2 !important
        }
    }
}

.btn-default {
    border: 1px solid $color-gray-300;
    &.btn-sec{
        background-color: $color-brand;
        border: none;
        color: $color-white;
    }
    &.btn-line{
        background-color: #32C300;
        border: none;
        color: $color-white;
    }
}

section.sec{ 
    margin-bottom: 40px;
    padding: 0;
    &:hover, &.current { background-color: transparent; }
    .headTitle {
        height: 50px;
        margin-bottom: 0;
        font-size: 24px;
        line-height: 40px;
        font-weight: bold;
        text-align: left;
    }
    .sec-inner{
        width: 100%;
        padding: 25px;
        border-radius: 3px;
        background-color: #fff;
        &.input-dropdown{
            .traveler{
                &:last-child{
                    hr{ &:last-child{display: none;} }
                }
            }
            .wrap-body {
                &.col-2{
                    .wrap-inner{
                        width: calc((100% - 15px) / 2);
                        margin-bottom: 15px;
                        &:nth-child(even){ margin-right: 15px}
                        &:nth-child(odd){ margin-right: 0px}
                        &:nth-child(1){ margin-right: 15px}
                        &:nth-child(2){ margin-right: 0px}
                        &:nth-child(6){ margin-bottom: 0px; &.error-adjust{margin-bottom: 15px;}}
                        &:nth-child(7){ margin-bottom: 0px; &.error-adjust{margin-bottom: 15px;}}
                        &.error-adjust{
                            margin-bottom: 30px;
                        }
                    }
                }
            }
        }
        .wrap-box {
            + .wrap-box {
                margin-bottom: 25px;
            }
        }
    }
    .note-count{
        display: flex;
        justify-content: flex-end;
        width: 100%;
        margin-bottom: 15px;
        .limit{
            color: $color-brand;
        }
        &.error{
            .limit{
                color: $color-price;
            }
        }
    }
    //明細樣式
    &.item-list{
        .sec-inner{
            padding: 15px 25px;
            border-bottom: solid 1px $color-gray-50;
            &.bottom-2px{border-bottom: solid 2px $color-gray-50}
            .wrap-body {
                .wrap-inner{
                    &.no-break{ 
                        .title{ display: inline-block;width:auto;}
                        .wrap-container{display: inline-block;width:auto; text-align: left; margin: 0px;}
                    }
                }
                .wt100{
                    &:last-child{.wrap-body{margin-bottom: 0px}}
                }
                .traveler .wt100{
                    border-bottom: dashed 1px #C4CDD3;
                    margin-bottom: 15px;
                    &:last-child{
                        border-bottom: none;
                        margin-bottom: 0px;
                    }
                }
                .title{ font-weight: bold; color: $color-brand; display: flex; align-items: center;}
                .title,.wrap-container{line-height: 21px;}
                .wrap-body{
                    margin-bottom: 10px;
                    .title{
                        font-weight: normal; width: 60px; min-width: 60px; 
                        color: $color-dark; margin-right: 10px;
                    }
                    .wrap-container{font-weight: bold; width: calc(100% - 60px);position: relative}
                }
            }
            .order-ul{li{margin-bottom: 10px;} }
            .traveler{
                &:last-child{
                    hr{ &:last-child{display: none;} }
                }
            }
        }
        .travel-periods{
            font-weight: bold;
            .start{ &::after{content:" ~ "} }
        }
        .fly-info{
            width: 40%;}
        .fly-port{
            width: 60%;
            b, span{
                vertical-align: top;
            }
            span{
                width: calc(100% - 50px);
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
        .wrap-flyInfo .wrap-box .wrap-inner .airplanInfo{
            width: calc(100% - 100px);
            justify-content: flex-start;
            .text{ 
                width: calc(100% - 50px);
                min-width: auto;
                white-space: nowrap;
                span{
                    width: 100%;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }
            }
        }
        .flytime{
            width: 90px;
        }
        .wrap-list {
            margin-bottom: 15px;
            padding: 15px;
            width: 100%;
            border: solid 1px rgba(193,193,193,0.4);
            border-radius: 3px;
            line-height: 1;
            &:last-child { margin-bottom: 0; }
        }
        .icon-hotel {
            display: inline-block;
            position: relative;
            width: 18px;
            height: 18px;
            vertical-align: middle;
            background-color: $color-dark;
            border-radius: 4px;
            &:before{
                position: absolute;
                top: calc(50% - 7px);
                left: calc(50% - 7px);
                color: white;
                font-size: 14px;
            }
        }
        .icon-hotel ~ span, .icon-hotel ~ b { 
            display: inline;
            vertical-align: middle;
            margin-left: 5px;
        }
        .item-label {
            > span { 
                display: inline-block;
                padding-right: 15px;
                > i { padding-right: 2px; }
            }
        }
    }
    //(radio btn) switch欄位
    &.switch-list{
        .wrap-body {
            .wrap-inner{
                padding-top: 15px; padding-bottom: 15px; border-top: dotted 1px $color-gray-300;
                &:first-child{padding-top: 0px; border-top: none;}
                &:last-child{padding-bottom: 0px;}
                .wrap-body{ 
                    .wrap-inner{padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px; border-bottom: none; border-top: none;} 
                }
            }
        }
    }

    //input欄位 
    &.input-list{
        .wrap-body {
            &.col-2{
                .wrap-inner {
                    width: calc((100% - 15px) / 2);
                    margin-bottom: 15px;
                    &:nth-child(odd) { margin-right: 15px; }
                    &:nth-child(odd):nth-last-child(2), &:last-child { 
                        margin-bottom: 0px;
                        &.error-adjust{ margin-bottom: 15px; }
                    }
                    &.error-adjust { margin-bottom: 30px; }
                    &.btn-addInput { margin-right: 0; }
                }
            }
        }
        .lt-checkbox{ 
            > label:before{margin-right: 5px;};
        }
    }

    &.sale-list{
        .wrap-body.horizontal .wrap-inner .wrap-container{
            width: 100%;
            a{ word-break: break-all; }
        }
        .wrap-inner.sp{
            margin-top: 20px;
            width: auto;
            color: $color-primary;
            border-radius: 3px;
            line-height: 18px;
        }
    }

    //sec內區隔多重inner
    &.multi-sec-inner{
        .sec-inner {
            margin-bottom: 25px; 
            &:last-child{ margin-bottom: 0; }
        }
        
    }

    //input欄位增加鈕
    .btn-addInput {
        position: relative;
        display: inline-block;
        padding: 10px;
        height: 50px;
        font-size: 15px;
        font-weight: bold;
        line-height: 30px;
        color: $color-brand;
        > i, >span {
            display: inline-block;
            vertical-align: middle;
        }
        > i {
            font-size: 24px;
            margin-right: 5px;
        }
        > span {
            font-size: 15px;
        }
    }

    .subTitle {
        margin-bottom: 15px;
        font-size: 18px;
        font-weight: bold;
        ~ .text {
            font-size: 16px;
            line-height: 1.4;
            p {
                font-weight: 500;
                ~ a {
                    display: inline-block;
                    margin-top: 50px;
                }
                ~ .list-dot {
                    margin: 10px 0;
                    li { font-weight: 400; }
                }
            }
            &.list-dot {
                ul {
                    margin: 10px 0;
                    li {
                        margin-left: 30px;
                        margin-bottom: 15px;
                        line-height: 1.3;
                        list-style: disc;
                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }
    }
}
.sec-sub-title{
    &.dsf{
        display: block;
        padding-bottom: 0px;
        .dsf{margin-bottom: 10px;}        
    }
    &.verified{ 
        display: flex; align-items: center;
    }
    &.row-group{
        display: inline-block;
        .row-list{
            display: flex; align-items: top; 
            margin-bottom: 10px;
            &:last-child{margin-bottom: 0px;}
        }
    }
}
.wrap-body{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .wrap-inner{
        display: flex;
        width: 100%;
        padding: 0px;
        .arrangement
        {
            display: contents;
        }
    }
    .wrap-body{
        .wrap-inner{
            width: calc((100% - 15px) / 2);
            margin: 5px 0px;
            &:nth-child(odd){margin-right: 15px;}
        }
    }
    &.col-2{
        .wrap-inner{
            width: calc((100% - 15px) / 2);
            &:nth-child(odd){ margin-right: 15px}
        }
    }
    &.vertical{
        .wrap-inner{
            flex-wrap: wrap;
            .title{ width: 100%; }
            .wrap-container{
                width: 100%;
                &.lt-{display: flex; padding-left: 10px; padding-right: 10px; border-bottom: solid 1px $color-graylight}
                &.price-type{
                    font-size: 18px;
                    width: 100%;
                    .inputplace{
                        padding: 0px 40px;
                        font-weight: bold;
                    }
                    .price{
                        position: absolute;
                        transform: translateY(-50%);
                        top: 50%;
                        left: 40px;
                        z-index: 999;
                        font-weight: bold;
                        .icon-ntdw{
                            position: absolute;
                            left: -30px;
                            transform: translateY(-50%);
                            top: 50%;
                        }
                    }
                }
            }
            &.mono_input{
                margin-bottom: 0px !important;
            }
        }
    }
    &.horizontal{
        .wrap-inner{
            .title{
                display: flex;
                align-items: center;
                width: 95px; min-width: 95px; margin-right: 15px;
            }
            .wrap-container{
                width: calc(100% - 105px);
            }
        }
    }
    .item-group{ margin: 0px 0px 5px 0px; }
    
}
.inputbox{
    position: relative;
    height: 55px;
    .title{
        font-weight: bold;
        padding: 0px 10px;
        display: flex; 
        align-items: center;
        &.opacity{ 
            color: rgba(34, 60, 74, 0.6) !important;
        }
        .wrap-subTitle {
            display: none;
            margin-left: 10px;
            font-weight: normal;
            > i {
                font-weight: bold;
            }
        }
    }
    .wrap-leftbox { width: 100%; }
    .btn-default{ 
        display: none;
        width: auto;
        padding: 20px 10px 0 10px;
        line-height: 30px;
        > i {
            display: inline-block;
            vertical-align: middle;
            color: #c1c1c1;
        }
    }
    .wrap-container{
        width: 100%;
        height: 40px;
        position: relative;
        overflow: visible;
        //錯誤訊息圖示
        .icon-error_outline1{
            font-family: "icomoon";
            font-size: 24px;
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%); 
            color: $color-price;
            cursor: pointer;
        }
        //選擇日曆圖示
        .icon-today{
            font-size: 24px;
            position: absolute;
        }
        .inputplace.error ~ .icon-error_outline1{
            display: block;
            top: 25%;
            transform: translateY(-25%);
        }
        .inputplace.error ~ .icon-today{
            display: block;
            color: $color-price;
            right: 40px;
            top: 25%;
            transform: translateY(-25%);
        }
        //0407    pypypypypypy
        .inputplace.error ~ .price.ini_price{
           margin-right: 44px;
        }
       
        .inputplace{
            font-size: 18px;
            outline: medium; //去除邊框
            border: none;
            border-bottom: solid 1px $color-graylight;
            position: relative;
            height: 40px;
            width: 100%;
            padding: 0px 10px;
            &:focus{border-bottom: solid 1px $color-brand; }
            + .icon-error_outline1{
                display: none;
            }
            + .icon-today{
                top: 50%;
                transform: translateY(-50%);
                right: 10px;
                color: $color-dark;
            }
            &.error{
                padding: 0px 44px 0px 10px;
            }
            &.custom-select-wrapper{
                border-bottom: solid 1px $color-graylight;
                &.error{
                    border-bottom: solid 1px $color-price;
                }
            }
        }
        label{height: 40px;}
    }
    ::placeholder, ::-webkit-input-placeholder, :-ms-input-placeholder{ 
        color: rgba(34, 60,74,0.4);
        font-size: 15px;                        
    }
    .inputplace:-ms-input-placeholder{ 
        color: rgba(34, 60,74,0.4);
        font-size: 15px;                        
    }
    &.mandatory{
        .title{
            &::before{
                content: "*";
                margin-right: 5px;
                color: $color-price;
                font-weight: bold;
            }
        }
    }
    &.dropdown-head{
        height: auto;
    }
    &.complete{
        .title{
            .wrap-subTitle{
                display: block;
                opacity: 1 !important;
                b{ 
                    color: rgba(34, 60, 74, 1) !important;
                }
            }
        }
        .wrap-leftbox { width: calc(100% - 44px); }
        .wrap-container{ 
            .inputplace { border-bottom: 0; }
        }
        .btn-default{display: block;}
        
    }
    
}

.field-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .field-label {
        + .field-setting { margin-left: 10px; }
    }
}
.switch-title{
    width: 95px;
    font-weight: bold;
    display: flex;
    flex-wrap:wrap;
    justify-content: center;
    align-items: center;
    margin-right: 15px;
    .head{
        width: 100%;
        text-align: center;
        color: rgba(34,60,74,0.6);
    }
    .name{
        width: 100%;
        text-align: center;
        font-size: 18px;
    }
    hr{
        width: 100%;
        margin: 10px 0px;
        border-bottom: solid 1px $color-graylight;
    }
}
.switch-btn{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    label{ 
        user-select: none;
        cursor: pointer;
        padding: 15px; 
        border: solid 1px $color-gray-300;
        border-radius: 3px;
        &::after{
            font-family: "icomoon";
            content:"\ebd2";
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            border-radius: 50%;
            width: 15px;
            height: 15px;
            font-size: 10px;
            font-weight: bold;
            line-height: 15px;
            background-color: $color-green;
            color: white;
            display: none;
        }
    }
    input{  display: none }
    input:checked + label{ 
        border: solid 2px $color-green;
        &::after{display: block;}
    }
}

//狀態標籤
.group-status {
    display: inline-block;
    width: auto;
    height: 25px;
    padding-left: calc(25px / 2); padding-right: calc(25px / 2);
    border-radius: 25px;
    border: solid 2px $color-graylight;
    font-size: 15px; line-height: 21px;
    font-weight: bold;
    vertical-align: center;
    &.salable{color: #ff5800}
    &.backup{color: $color-green;}
}

//規律數數模組
.indexCount {
    counter-increment: stepIndex;
    .countTarget{
        &:after {
            content: counter(stepIndex);
            padding-left: 3px;
        }
    }
}
.hotelInfoUI{
    .wrap-inner { display: block; }
    .wrap-hotelInfo{
        display: flex;
        flex-wrap: wrap;
        .room-number{
            min-width: 55px;
            margin-right: 5px;
            font-size: 13px;
        }
    }
    .roomType{
        min-width: fit-content;
        &:after{
            content: '';
            display: inline-block;
            vertical-align: middle;
            margin-left: 10px;
            margin-right: 10px;
            width: 1px;
            height: 15px;
            background-color: rgba(89, 108, 118, 0.2)
        }
    }
    .room-number{
        &::before{
            content: "客房";
            margin-right: 2px;
            color: #596C76;
        }
    }
    .people{
        display: inline-flex;
        font-weight: bold;
        .traveler{
            color: #596C76;
            margin-left: 5px;
            font-weight: normal;
        }
        &:after{
            content: "+";
            color: #596C76;
            margin-left: 5px;
            margin-right: 5px;
        }
        &:last-child{
           &:after{
                display: none;
            }
        }
    }
}

.list-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    .wrap-info & {
        justify-content: space-between;
        width: calc(100% - 120px);
    }
    &.list-icon-b {
        li {
            width: 25%;
            i { font-size: 50px; }
            span {
                display: block;
                width: 100%;
                min-height: 35px;
                margin-top: 10px;
                font-size: 16px;
                text-align: center;
            }
        }
    }
    &.list-icon-m {
        li {
            justify-content: flex-start;
            width: 100%;
            i {
                margin-right: 5px;
                font-size: 25px;
            }
            .head {
                display: flex;
                align-items: center;
                width: 100%;
                margin-top: 10px;
                font-size: 18px;
                &.icon {
                    ~ .text { margin-left: 30px; }
                }
                ~ .text {
                    margin-top: 10px;
                    font-size: 16px;
                    line-height: 1.3;
                    span {
                        display: block;
                        padding-bottom: 5px;
                    }
                    &.split {
                        span {
                            display: inline-block;
                            padding: 0 10px;
                            border-right: solid 1px $color-gray;
                            &:first-child { padding-left: 0; }
                            &:last-child { border-right: none; }
                        }
                    }
                }
            }
        }
    }
    li {
        display: inline-flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    &.list-col {
        display: block;
        column-count: 2;
        &.list-icon-m { margin-bottom: 25px; }
        li {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            // width: calc(50% - 20px);
            padding: 3px 0;
        }
    }
}
.rating {
    display: inline-flex;
    margin: 0;
    .icon-rank {
        width: auto;
        min-width: 15px;
        height: 15px;
        fill: #f7b500;
    }
}

//必選
.mustcheck{
    display: flex; justify-content: center;
    margin-bottom: 50px;
    &.error{
        position: relative; 
        animation: swing 0.5s;
        animation-delay: 0.3s;
    }
    [class*="lt-"]>input[type*="checkbox"]+label{
        width: auto;
    }
}

// airplanInfoUI
.airplanInfoUI {
    display: flex;
    align-items: flex-start;
    align-content: space-between;
    justify-content: space-between;
    flex-direction: column;
    flex-wrap: wrap;
    .wrap-flyInfo {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        .date {
            margin-bottom: 10px;
            margin-right: 10px;
            font-size: 15px;
            font-weight: bold;
        }
        .airport {
            display: flex;
            align-items: baseline;
            justify-content: flex-start;
            margin-bottom: 10px;
            font-size: 15px;
            font-weight: bold;
            span {
                &:first-child {
                    color: #596c76;
                }
                &:last-child {
                    color: #223c4a;
                }
            }
            i {
                display: inline-block;
                margin: 0 10px;
                font-size: 15px;
                color: #596c76;
                transform: rotate(90deg);
            }
        }
        .wrap-box {
            // border: solid 1px rgba(193, 193, 193, 0.3);
            
            width: 100%;
            .wrap-inner {
                border-radius: 3px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                // padding: 15px;
                .fly-port {
                    position: relative;
                    display: flex;
                    align-content: space-between;
                    flex-wrap: wrap;
                    height: 40px;
                    font-size: 13px;
                    &:before {
                        content: '';
                        position: absolute; top: 15px; bottom: 13px; left: 54px;
                        display: block;
                        width: 2px;
                        background-image: linear-gradient(to bottom, #596c76 0%,#223c4a 100%);;
                    }
                    > div {
                        display: flex;
                        width: 100%; 
                        &:first-child {
                            color: #596c76;
                            span:before { border-color: #596c76; }
                        }
                        &:last-child {
                            color: #223c4a;
                            span:before { border-color: #223c4a; }
                        }
                    }
                    b{
                        width: 40px; 
                        display: inline-block;
                    }
                    span {
                        display: inline-block;
                        &::before {
                            content: '';
                            display: inline-block;
                            margin: 0 10px;
                            width: 10px;
                            height: 10px;
                            border: solid 2px;
                            border-radius: 50%;
                            box-sizing: border-box;
                        }
                    }
                }
                .fly-info, .airplanInfo {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .planLogo {
                        display: flex;
                        width: 40px;
                        height: 40px;
                        margin-right: 10px;
                        img { width: 100%; }
                    }
                    .text {
                        min-width: 150px;
                        font-size: 13px;
                        span { display: block; }
                    }
                    .flytime{
                        font-size: 13px;span { display: block; }
                    }
                }
            }
        }
    }
}

.note{
    display: flex;
    font-size: 13px;
    line-height: calc(13px * 1.3);
    color: $color-dark;
    .icon-info_outline{
        font-size: 15px;
        color: $color-brand;
        margin-right: 5px;
    }
}
.traveler-title{
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 18px;
    justify-content: flex-start;

    .traveler-order{
        border: solid 2px $color-dark;
        border-radius: 3px;
        padding: 5px 10px;
        font-weight: bold;
        margin-right: 15px;
    }
}

.order-ul{
    padding-left: 1.2em;
    li{
        list-style: decimal; 
        line-height: calc(1em * 1.4);
        padding-left: 5px;
    }
}

.order-overlay{
    .overlay-inner{
        .overlay-body { min-height: 165px;} 
        &.unflexible{ width: 400px; max-width: 400px;}
        &.loadingSize { 
            width: 200px; 
            .overlay-body{
                height: 200px;
            }
            .load-dot{
                animation: load-dotjump;
                animation-duration: 2s;
                animation-iteration-count: infinite;
                animation-timing-function: linear;
                &.left{ 
                    right: calc(50% + 20px);
                    animation-delay: 0s;
                }
                &.center{ 
                    animation-delay: 0.4s;
                 }
                &.right{
                    left: calc(50% + 20px);
                    animation-delay: 0.8s;
                }
            }
            .load-text{
                font-size: 18px;
                color: rgba(34, 60, 74, 0.6);
                animation: btn-skeletonAnimation 2s infinite;
            }
        }
    }
    a{ text-decoration: none;}
    .icon-navigate_before{  
        display: none;
        &:before{ content: "\eb73"} 
    }
    .text{ margin-bottom: 15px; }
    .error{
        font-weight: bold;
        color: $color-price;
        margin-bottom: 10px;
        width: 100%;
        text-align: center;
    }
    form{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        .inputbox{ width: 100%; }
        .forget{
            width: 100%;
            font-weight: bold;
            text-align: right;
            margin-bottom: 25px;
        }
        .join{
            width: 100%;
            color: $color-darklight;
            text-align: center;
        }
    }
    .btn-sec{
        margin-top: 30px; margin-bottom: 30px;
    }
    .overlay-bottom{
        background-color: $color-gray-50;
        padding: 15px;
        border-radius: 0px 0px 3px 3px;
        display: flex;
        justify-content: flex-end;
        button{
            margin: 0px;
            display: inline-block;
            width: calc((100% - 15px) / 2);
            &:last-child { margin-left: 15px; }
            &.btn-default {
                background-color: transparent;
            }
            &.btn-sec {
                background-color: $color-brand;
            }
        }
        
    }
    .wrap-body.vertical{
        .wrap-inner{
           margin: 10px 0px;
        }
    }
}

.order-table{
    tr{
        th,td{ padding: 10px }
        th{
            background-color: transparent;
            border: solid 2px white;
            border-bottom: solid 1px $color-dark; 
            border-top: solid 2px $color-dark;
            color: $color-dark;
        }
        td{
            border: solid 1px white;
            border-bottom: solid 1px $color-gray-300; 
            vertical-align: middle !important;
        }
        .col-check{border-left: none; text-align: center; width: 4rem;}
        .col-name{ text-align: left;}
        .col-price{border-right: none; width: 6rem}
        .col-number{
            text-align: center;
            width: 7rem;
        }
        .price {text-align: right;}
        [class*="lt-"]>input[type*="checkbox"]+label, [class*="lt-"]>input[type*="checkbox"]+label{width: auto;}
    }
    tbody{tr{&:last-child>td{border-bottom: solid 2px $color-dark;}}}
    li{
        margin: 0px;
        &::before{ content: ""; }
    }
}

.order-select{
    .custom-select-wrapper{
        width: 100%;
        &.ta-r{
           .select > .select-styled > span{
               justify-content: flex-end;
               text-align: right;
           } 
        }
        .select{ 
            width: 100%; 
            .select-styled{
                background-color: transparent;
                &.active{ padding: 10px 0px; }
                span{padding: 10px 0px;}
            }
        }
    }
    .select-options{
        width: 100%;
        max-height: 250px;
        overflow-y: scroll;
        li{ padding: 15px 30px;}
    }
}

.radio-mgl-10{
    [class*="lt-"]>input[type*="radio"]+label,[class*="lt-"]>input[type*="checkbox"]+label{
        &:before{ margin-right: 10px; }
    }
}
.radio-mgl-5{
    [class*="lt-"]>input[type*="radio"]+label,[class*="lt-"]>input[type*="checkbox"]+label{
        &:before{ 
            margin-right: 5px; 
            border: solid 2px #bcbcbc;
        }
    }
    [class*="lt-"]>input[type*="radio"]:checked+label{
        &:before{ 
            content: ''
        }
        &:after{
            content: '';
            width: 12px;
            height: 12px;
            position: absolute;
            left: 4px;
            top: 14px;
            background-color: $color-brand;
            border-radius: 50%;
        }
    }
}

.lt-checkbox{
    &.fs15{
        label:before{
            width: 15px !important; height: 15px !important; 
            min-width: 15px !important; min-height: 15px !important;  
            font-size: 15px !important;
        }
    }
    &.inTitle{
        position: absolute;
        top: 0;
        right: 10px;
    }
    .pd-2{
        padding: 0 2px;
    }
}

//dropdown樣式修改
.order-dropdown{
    .dropdown-wrapper {
        .dropdown-head {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            font-size: 15px;
            padding: 15px;
            font-weight: bold;
            border-radius: 3px;
            margin-bottom: 10px;
            border-bottom: none;
            &:after {
                content: '\eb11';
                font-size: 24px;
                font-family: 'icomoon';
                transition: all 0.3s ease-in-out;
            }
            + .dropdown-pane {
                height: auto;
                padding: 0px;
            }
            &.inputbox{  width: calc((100% - 35px) / 2); }
        }
        .info{
            font-weight: bold;
            width: 100%;
        }
        .header-style-2,.header-style{
            margin: 10px 0px;
            .c-name,.e-name{margin-right: 10px}
            .e-name,.gender{color: rgba(34,60,74,0.6);}
        }
      
        .header-style{
            padding: 15px;
            width: 100%;
            border: solid 1px rgba(34,60,74,0.15);
            border-radius: 3px;
        }
        .header-style-2{
            border: solid 1px $color-brand;
            &:after{color: $color-brand }
            .status-container{
                width: 100px;
                display: flex;
                align-items: center;
                margin-right: 10px;
                .status-style{
                    height: 25px;
                }
            }
            
            .pay-status{
                width: 4rem;
                text-align: center;
            }
        } 
        &.close{
            .less{display: none;}
            .more{display: block;}
            .dropdown-head{
                &.inputbox{ &:after{
                        color: $color-brand;
                        transform: rotate(0deg);
                    }
                }
                &:after{
                    color: $color-dark;
                    transform: rotate(-180deg);
                }
            }
            .header-style,.header-style-2{ border: solid 1px rgba(34,60,74,0.15); }
            .header-style-2{ 
                &:hover{ 
                    border: solid 1px $color-brand; 
                    transition: 0.15s;
                    &:after{ color: $color-brand }
                }
            } 
        }
        .less{display: block;}
        .more{display: none;}
    }
}
.input-dropdown .dropdown-wrapper{
    .inputbox {
        &.dropdown-pane{
            padding: 0px;
        }
        &.dropdown-btn{
            display: none;
            justify-content: center;
            align-items: center;
            color: $color-brand;
            border-bottom: 0px;
            cursor: pointer;
            &::before{
                font-family: "icomoon";
                content: "\ea79";
                margin-right: 5px;
                font-size: 24px;
            }
            &::after{
                font-family: 'Century Gothic', 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', 'Roboto';
                font-weight: bold;
                // height: inherit;
                content: attr(data-showname);
                font-size: 15px;
            }
        }  
    }

    &.close {
        .dropdown-btn{
            display: flex;
            &::before{
                font-family: "icomoon";
                content: "\ea79";
                margin-right: 5px;
                font-size: 24px;;
            }
            &::after{
                font-family: 'Century Gothic', 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', 'Roboto';
                font-weight: bold;
                content: attr(data-showname);
                font-size: 15px;
                transform: rotate(0deg);
            }
        }
    }
}

//檢核資訊！！！
#order-form, .validation, .sec.input-list{
    label.error, input.error{  color: $color-price; font-size: 13px;}
    input.error{ border-bottom: solid 1px $color-price; font-size: 18px}
    input.error ~ label.error { 
        display: block;
        margin-top: 2px;
        height: auto;
    }
    input ~ label.error { display: none; }
}

.sec-sub-title{
    padding: 15px 0px  ;
    .sub-container{
       display: inline-block;
       margin-right: 20px;
       .title{color: $color-brand; width: 4rem;  margin-right: 10px;}
    }
}
.sec-note {
    padding: 15px 25px;
    background-color: $color-graylight;
    border-radius: 0 0 3px 3px;
    .note-title { margin-bottom: 10px; }
}

//商品或訂單明細
.item-title {
    line-height: calc(24px * 1.4);
    font-size: 24px; font-weight: bold;
    text-align: justify;
}

.item-group{
    width: 100%;
    margin: 10px 10px 5px 10px;
    font-weight: bold;
}

.dotted{
    border-top: dashed 1px $color-gray-300;
    margin: 15px 0;
    width: 100%;
    opacity: 1;
    &.mg-25{
        margin: 25px 0;
    }
}

.solid{
    border-top: solid 2px #596C76;
    margin: 25px 0px;
    width: 100%;
    opacity: 1;
}

.icon-help_outline{
    font-family: "icomoon";
    margin-left: 2px;
    padding-bottom: 0px;
    color: rgba(34, 60, 74, 0.4);
    font-size: 15px;
    opacity: 1;
    cursor: pointer;
    &:hover{
        color: $color-brand;
        transition: 0.4s;
    }
}

.paystatus-wrapbox{
    display: flex;
    width: 100%;
    .paystatusInfo-wrapper{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 70%;
        line-height: 21px;
        margin-top: 20px; margin-bottom: 20px;
    }
    .greeting{
        text-align: center;
        margin-bottom: 30px;
        width: 100%;
        font-size: 24px; font-weight: bold;
        color: $color-green;
        &.failed{ color: $color-dark; font-size: 30px;}
    }
    .greet-wrapbox{
        text-align: center;
        width: 100%;
        margin-bottom: 30px;
    }
    .imgInfo-wrapper{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30%;
        img{width: 100%; max-width: 200px;}
    }
    .paymentbtn-group{
        display: flex; flex-wrap: wrap; width: 100%; justify-content: center; 
        .btn-default{
            width: calc(100% / 3);
            max-width: 160px;;
            margin: 5px;
            height: 45px;  
            line-height: 25px;
        }
    }
    &.payfailed{
        margin: calc((100vh - 130px - 500px) / 2 ) 0;
        .paystatusInfo-wrapper{
           margin-top: 0px; margin-bottom: 0px; width: 60%;
        }
        .imgInfo-wrapper{width: 40%;
            img{ max-width: 400px}
        }
        .paymentbtn-group{margin-bottom: 20px;}
    }
}

.salesInfo-wrapper{
    display: block;
    text-align: center;
    width: 100%; 
    .wrap-inner{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 5px;
        .title{  color: rgba(34,60,74,0.6); margin-right: 10px; line-height: 21px}
        .content{ max-width: 100%; word-break: break-all; font-weight: bold;}
        &.sp{
            margin-top: 20px;
            width: auto;
            color: $color-primary;
            border-radius: 3px;
            line-height: 18px;
        }
    }
    .wrap-inner.fix-width{
       flex-wrap: nowrap;
        .title{width: 50%; text-align: right;}
        .content{width: 50%; text-align: left; font-weight: bold;}
    }
}
//gdn廣告
.kanban{
    text-decoration: none;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    overflow: hidden;
    .kanban-dt{ width: 728px; height: 90px;  }
    .kanban-mb{ width: 300px; height: 100px; display: none; overflow: hidden;}
}

//信用卡logo
.creditcard-logo{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px calc(25px / 2);
    border-radius: 12.5px;
    background-color: rgba(255,255,255,0.9);
    height: 25px;
    margin-left: 15px;
    img{ height: 15px; }
}
.bank-list{
    [class*="lt-"] > input[type*="radio"]{
        + label {
            align-items: flex-start;
            flex-wrap: wrap;
            width: 100%;
            border-bottom: dotted 1px $color-gray-300;
            padding: 15px 0px;
            &::before {
                margin-right: 10px;
                min-width: 20px;
            }
            &::after{
                top: 19px;
            }
        }
    }
    [class*="lt-"] > input[type*="radio"]:checked{
        + label {
           
            &:before{ 
                content: ''
            }
            &:after{
                content: '';
                width: 12px;
                height: 12px;
                position: absolute;
                left: 4px;
                top: 19px;
                background-color: $color-brand;
                border-radius: 50%;
            }
        }
    }
    .month{
        width: calc(100% - 30px);
        white-space: nowrap;
        line-height: 20px;
        display: flex;
        align-items: center;
        img{
            margin-right: 5px;
            width: 20px;
        }
    }
    .bank-group{
        display: flex;
        width: 100%;
        margin-top: 10px;
        &::before{
            content: "零利率";
            margin-left: 30px;
            white-space: nowrap;
            display: inline-block;
            width: auto;
            margin-right: 10px;
            padding-top: 10px;
            padding-right: 10px;
            border-right: solid 1px $color-graylight;
            color: rgba(34,60,74,0.6);
        }
        li{
            padding-top: 10px;
            margin-right: 10px;
        }
        .bank-container{
            display: flex;
            flex-wrap: wrap;
            padding-bottom: 10px;
        }
    }
}

//文字輸入塊
textarea{
    padding: 10px;
    overflow: auto;
    width: 100%;
    height: 90px;
    resize: vertical;
    border: solid 1px rgba(34, 60,74, 0.4);
    border-radius: 3px;
    font-family: "微軟正黑體";
    font-size: 15px;
    color: $color-dark;
}

//旅遊契約書
.contract{
    .contract-content{
        font-size: 15px;
        border: solid 1px $color-gray-300;
        padding: 10px;
        width: auto;
        word-wrap: break-word;
        height: 300px;
        line-height: calc(1em *1.4);
        overflow-y: scroll;
        .head-title{
            text-align: center;
            margin: 20px auto; 
            font-size: 18px; font-weight: bold;
        }
        .title{width: 100%; margin-top: 20px; margin-bottom: 10px; font-weight: bold;}
        .content{width: 100%; margin-bottom: 10px; font-weight: normal}
        &.wt100 { width: 100% !important; }
        iframe {
            width: 100%;
            height: 100%;
            background-color: transparent;
            body {
                background-color: transparent;
            }
        }
        p {
            ~ p { margin-top: 30px; }
        }
    }
    .list-chinese{ 
        li {       
            list-style-type: cjk-ideographic;
            li{margin-left: 0px; list-style: none;}
        }
    }
    li{ 
        margin-top: 20px; margin-bottom: 15px; margin-left: 25px; 
        list-style: decimal;
        &.list-title{font-weight: bold; }
        li{ 
            margin-top: 5px; margin-bottom: 5px; 
            list-style: upper-alpha;
            font-weight: normal;
            li{list-style: lower-alpha}
        }
        span{color: $color-dark; font-weight: normal;}
    }
    .c-red{color: $color-price}
    .c-brand{color: $color-brand}
}   

// calendarui
.calendarUI{
    min-width: 300px;
    .datepick-ctrl,.datepick-nav{a{width: auto; height: auto;}}
    .datepick-month{width: auto;}
}

.tooltip { cursor: default }


@media print{
    html, body{
        width: 100%;
        height: 100%;
        background-color: #fff;}
    .header{
        margin-top: 0px; 
        width: 100%;
        .header-inner {
            .progress-step{display: none}}
        }
  
    .container{
        display: block;
        overflow: visible; 
        > main, > aside { 
            width: 100%;
        }

        > main{ 
            margin-right: 0px;}
        > aside {
            height: auto !important;
        }
    }
    .sec {margin-bottom: 30px;}
    .sec-inner {border: solid 1px #c1c1c1}
    .toolbar,.kanban {display: none;}
    .tooltip::after {
        display: none;
    }
    aside .price-type .type-content{ 
        padding-bottom: 10px;
        &:last-child{
            border-bottom:  none;
        }
        .content-title{
            display: flex;
            align-items: center;
        }
    }
    .tooltip_templates {
        display: block;
        position: relative;
        margin-left: 15px;
        padding: 5px 15px;
        border: solid 1px #c1c1c1;
        border-radius: 3px;
        &:before{
            content: '';
            position: absolute;
            left: -10px;
            top: 50%;
            transform: translateY(-50%);
            border-top: 10px solid white;
            border-bottom: 10px solid white;
            border-right: 10px solid #c1c1c1;
            display: inline-block;
        }
    }
    .dropdown-wrapper{
        &.close{ 
            .dropdown-pane{display: block;}
            .dropdown-head{
                .less,.more, &::after{display: none;}
            }
        }
    }
    aside .dropdown-wrapper .dropdown-head+.dropdown-pane{padding: 15px 25px;}
    .wrap-calcForm{
        .wrap-inner{padding: 0px;}
        .wrap-item { 
            border: solid 1px #c1c1c1; 
            border-bottom: none; 
            border-radius: 3px 3px 0px 0px;
        }
        .accu-price{
            padding: 15px 25px;
            border: solid 1px #c1c1c1; 
            border-radius: 0px 0px 3px 3px;
            color: #223c4a; 
            background-color: #fff;
            .price{color: #ff0000;}
        }
    }
    section.sec{
        &.item-list{
            .sec-inner{
                border-radius: 0px; border-bottom: none;
                &:first-child{border-radius: 3px 3px 0px 0px}
                &:last-child{border-radius: 0px 0px 3px 3px; border-bottom: solid 1px $color-gray-300}
            }
        }
    }
}

@media screen and (max-width:768px){
    .mb-lh{line-height: 1.3;}
    section.sec{ 
        .sec-inner{
            .tb-w100 > .title{margin-bottom: 15px;}
            padding: 15px;
            border-radius: 0px;
        }
        &.item-list{
            .sec-inner{
                padding: 15px;
                .title{
                    width: 4rem; 
                    margin-right: 10px;
                    min-width: auto;
                }
                .wrap-container{ margin: 0px; width: calc(100% - 4rem - 10px);
            }
            
            .airplanInfoUI .wrap-flyInfo{ 
                .date{
                    width: 100%;
                    margin-right: 0px;
                }
                .airport{
                    width: 100%;
                    flex-wrap: nowrap;
                    span{
                        width: calc((100% - 15px) / 2);
                    }
                }
                .wrap-box .wrap-inner{
                    justify-content: flex-start;

                    .airplanInfo{
                        width: calc(100% - 100px);
                        justify-content: flex-start;
                        .text{ 
                            width: calc(100% - 50px);
                            min-width: auto;
                            white-space: nowrap;
                            span{
                                width: 100%;
                                text-overflow: ellipsis;
                                overflow: hidden;
                            }
                        }
                    }
                    .flytime{
                        width: 90px;
                        text-align: right;
                    }
                    .fly-info{
                        width: 100%;
                    }
                    .fly-port{ 
                       width: 100%;
                       div{
                           height: 20px;
                        }
                        span{
                            width: calc(100% - 40px);
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                    }
                }
                
            }
            
        }}
    }
    .wrap-body{
        .wrap-inner{
            padding: 0px;
            border-radius: 0px;
        }
        &.horizontal{
            .wrap-inner{
                &.tb-w100{
                    flex-wrap: wrap;
                    .title{ width: 100%; margin-right: 0px;}
                    .wrap-container{width:100%}
                }
            }
        }
        &.vertical{
            .wrap-inner{
                &.mono_input{ &:first-child{margin-bottom: 15px !important; }}
            }
        }
    }
    .header{
        margin: 0px 0px 15px 0px;
        .header-inner{
            display: flex;
            padding: 10px;
            width: auto;
            flex-wrap: wrap;
            .logo{
                order: 1;
                height: 30px;
                background-size: contain;
                background-position: left center;
                width: 50%;
            }
            .login,.account{
                order: 2;
                width: 50%;
                height: 30px;
                > a{ padding: 0px; }
            }
            
            .progress-step{
                order: 3;
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                margin-top: 15px;
                width: 100%;
                .step{
                    display: flex;
                    justify-content: center;
                    flex-direction: column;
                    width: 100%; 
                    margin: 0px;
                    position: relative;
                    .line{
                        position: absolute;
                        border-top: solid 1px $color-gray-300;
                        top: 20px;
                        width: 100%;
                    }
                    &::before{
                        margin: 0px;
                    }
                    &::after{
                        content: attr(data-step-text);
                        margin-top: 10px;
                        color: $color-dark;
                    }
                    &:nth-child(1){
                        .line{
                            width: 50%;
                            left: 50%;
                        }
                    }
                    &:last-child{
                        .line{
                            width: 50%;
                            right: 50%;
                        }
                    }
                }
            }
        }
    }
    main{
        width: 100%;
        margin-top: 0px;
        margin-right: 0px;
    }
    .order-dropdown .dropdown-wrapper{
        .dropdown-head{
            padding: 10px;
        }
        .header-style{
            padding: 10px;
        }
    }
    //展開箭頭變形
    .dropdown-wrapper.arrow-transform{ 
        .dropdown-head{
            position: relative;
            &:before, &:after {
                content: '';
                position: absolute; top: 10px;
                width: 20px; height: 4px;
                background-color: $color-gray-300;
                border-radius: 2px;
                transition: all 0.15s ease-in-out;
            }
            &:before {
                right: calc(50% - 2px);
                transform: rotate(15deg);
            }
            &:after {
                left: calc(50% - 2px);
                transform: rotate(165deg);
            }
        }
        &.close{.dropdown-head.dropdown-btn{
            &:before {
                right: calc(50% - 2px);
                transform: rotate(-15deg);
            }
            &:after {
                left: calc(50% - 2px);
                transform: rotate(195deg);
            }
        }}
    }
    aside{
        width: 100%;
        height: auto;
        z-index: 999;
        .accu-price{
            background-color: #fff;
            color: $color-dark;
            border-top: solid 2px $color-gray-50;
            padding: 15px;
            &.dropdown-btn{&::after{content: none;}}
            .symbol-money{
                font-size: 24px;
                display: inline-block;
                &:before{
                    position: static;
                    font-size: 15px;
                }
            }
        }
        .wrap-inner {
            padding: 0px;
            .wrap-head{margin-bottom: 0px;&::after{display: none}}
            .wrap-item{
                margin-top: 0px;
                padding: 15px;
            }
            .scrollpanel{
                .wrap-item{
                    padding: 15px
                }
                .scrollTop, .scrollDown{
                    display: flex;
                }
                .scrollTop{
                    top: 15px;
                }
                .scrollDown{
                    bottom: 15px;
                }
            }
        }
        .dropdown-wrapper {
            .dropdown-head+.dropdown-pane{padding: 15px;}
            .dropdown-head{
                height: 15px; padding: 0px;
                display: flex;  justify-content: center;
                width: 100%; 
                border: none;
            }
            &.close{
                .accu-price{
                    border-top: none;
                    padding-top: 0px;
                }
                .dropdown-head{
                    border: none;
                    &:after{ transform: rotate(180deg); }
                }
                .wrap-inner{
                    .scrollpanel{
                        .scrollTop, .scrollDown{
                            display: none;
                        }
                    }
                }
                .divider{
                    margin: auto;
                    width: auto;
                }
            }
        }
        .price{ color: $color-price; }
        .wrap-calcForm{
            position: fixed;
            bottom: 0px;
            box-shadow: 0px 0px 6px rgba(0,0,0,0.25);;
        }
        .toolbar{ margin: 0px 15px 110px 15px }
    }

    .order-ul{
        padding-left: 1.6em;
        .m-lh{line-height: calc(13px * 1.4);}}

    .order-table{
        .col-name{ line-height: 21px }
    }
    //section
    .headTitle{padding: 0px 15px;}
    .sec-sub-title{
        padding: 10px 15px;
        display: flex;
        .m-lh{line-height: calc(15px * 1.3);}
    }

    .mustknow{.order-ul{margin: 0px 15px;}}

    .airplanInfoUI {
        .wrap-inner{flex-wrap: wrap;}
        .fly-info{
            width: 100%;
            margin-top: 10px;
            font-size: 13px;
        }
    }

    .paystatus-wrapbox{
        .greeting{
            &.failed{ color: $color-dark; font-size: 24px; margin-bottom: 20px;;}
        }
        .greet-wrapbox{margin-bottom: 5px;}
        &.payfailed{
            flex-wrap: wrap; margin:0px;
            .paystatusInfo-wrapper{
                order: 2;
                margin-top: 0px; margin-bottom: 0px; width: 100%;
            }
            .imgInfo-wrapper{
                width: 100%; order: 1; margin-bottom: 40px; 
                img{ max-width: 250px}
            }
            .paymentbtn-group{ 
                .btn-default{width: 100%; max-width: 100%; margin: 5px 15px}
                .btn-cta{order: 1} .btn-line{order: 2} .overlay-control{order: 3}
            }
        }
            
    }
    .bank-list{
        [class*="lt-"] > input[type*="radio"]{
            + label {
                .bank-group {
                    display: none;
                }
            }
            &:checked {
                + label {
                    .bank-group {
                    display: flex;
                    }
                }
            }
        }
    }

    [class*="lt-"]>input[type*="checkbox"]+label[class="agree"]{
        line-height: 20px;
        margin: 0px 15px;
        display: flex;
        flex-wrap: no-wrap;
        align-items: flex-start;
        ::before{
            width: 20px;
        }
    }
    [class*="lt-"]>input[type*="checkbox"]+label:before {
        min-width: 20px;
        min-height: 20px;
    }
   
    .order-overlay{
        .icon-navigate_before{ display: block;}
        .overlay-inner{
            margin-top: 0px;
            top: 50%;
            transform: translateY(-50%);
            &.unflexible.mb-panel{width: 100%; max-width: 100%;}
        }
        .overlay-bottom{
            button{
                width: 100%;
            }
        }
        // .overlay-container{
        //     height: 100vh;
        // }
        &.overlayUI{
            .overlay-container .overlay-body{
                max-height: 100%;
            }
        }
        .mb-panel .mb-content{
            padding: 0px;
        }
    }
    .kanban{
        .kanban-dt{  display: none; }
        .kanban-mb{  display: block; }
    }
    .print{display: none;}
    .icon-help_outline{ font-size: 18px; }
    .tooltip{
        &::after {
            font-size: 16px;
        }
    }

}
@media screen and (max-width:425px){
    section.sec{ 
        .sec-inner{
           
            &.input-dropdown{
                .wrap-body {
                    &.col-2{
                        .wrap-inner{
                            width: 100%;
                            margin-bottom: 15px;
                            &:nth-child(even){ margin-right: 0px}
                            &:nth-child(1){ margin-right: 0px}
                            &:nth-child(6){ margin-bottom: 15px}
                        }
                    }
                }
            }
        }
        &.switch-list{
            .wrap-body>.wrap-inner >.wrap-body{ .wrap-inner{
                margin-top: 5px; margin-bottom: 5px;
                &:last-child{margin-bottom: 0px;}
            } }
        }
        &.input-list{
            .wrap-body {
                &.col-2{
                    .wrap-inner{
                        width: 100%;
                        margin-bottom: 15px;
                        &:nth-child(odd){ margin-right: 0px;}
                        &:nth-child(even){ margin-top: 0px;}
                        &:nth-child(odd):nth-last-child(2){
                            margin-bottom: 15px;
                            &.error-adjust{ margin-bottom: 30px; }
                        }
                    }
                }
            }
        }
    }
    .wrap-body{
        .wrap-body{&.col-2{
            .wrap-inner{ &:nth-child(odd){ margin-right: 0px;}}
        }}
        &.col-2{
            .wrap-inner{
                width: 100%;
                // &:nth-child(odd){ margin-right: 10px;}
                &:nth-child(even){ margin-top: 5px;margin-bottom: 5px;}
                // &.inputbox{&:nth-child(odd){ margin-right: 0px;}}
            }
            
        }
        &.horizontal{
            .wrap-inner{
                .title{margin-right: 0px;}
                &.mb-w100{
                    flex-wrap: wrap;
                    .title{ width: 100%; font-weight: bold; margin-bottom: 10px}
                    .wrap-container{width:100%}
                }
            }
        }
    }
    .switch-title{
        margin-right: 0px;
        margin-bottom: 10px;
        .head,.name{
            font-size: 15px;
        }
        .head{
            width: 3rem;
            padding-right: 10px;
            border-right: solid 1px $color-gray-300;
        }
        .name{
            width: calc(100% - 3rem);
            padding-left: 10px;
            text-align: left;
        }
        hr{display: none}
    }
    .sec-sub-title{
        display: flex;
        flex-wrap: wrap;
         .sub-container{
             width: 100%;
             margin-bottom: 10px;
             &:last-child{margin-bottom: 0px;}
         }
        &.verified{ flex-wrap: initial; }
    }
    .header{
        margin: 0px 0px 15px 0px;
        .header-inner{
            display: flex;
            padding: 15px;
            width: auto;
            flex-wrap: wrap;
            .logo{
                order: 1;
                height: 30px;
                background-size: contain;
                background-position: left center;
                width: 50%;
            }
            .login,.account{
                order: 2;
                width: 50%;
                height: 30px;
                > a{ padding: 0px; }
            }
            .account{
                text-align: right;
                line-height: 30px;
            }
            .progress-step{
                order: 3;
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                margin-top: 15px;
                width: 100%;
                .step{
                    display: flex;
                    // flex-direction: column;
                    align-items: center;
                    width: 100%;
                    margin: 0px ;
                    height: 40px;
                    position: relative;
                    .line{
                        position: absolute;
                        border-top: solid 1px $color-gray-300;
                        top: 20px;
                        width: 100%;
                    }
                    &:nth-child(1){
                        .line{
                            width: 50%;
                            left: 50%;
                        }
                    }
                    &:nth-child(5){
                        .line{
                            width: 50%;
                            right: 50%;
                        }
                    }
                    &::before{
                        width: 25px;
                        min-width: 25px;
                        height: 25px;
                        // margin: auto 0px;
                    }
                    &::after{
                        content: none;
                    }
                    &.current{
                        word-break: keep-all;
                        height: auto;
                        &::before{
                            width: 40px;
                            height: 40px;
                        }
                        &::after{
                            content: attr(data-step-text);
                            margin-top: 10px;
                            color: $color-dark;
                        }
                    }
                    &.done{
                        &::before{ font-size: 20px;}
                    }
                }
            }
        }
    }
    .sec-note{padding: 15px;}
    aside{
        height: auto;
        width: 100%;
        .accu-price{
            background-color: #fff;
            color: $color-dark;
            border-top: solid 2px $color-gray-50;
            padding: 15px;
            &.dropdown-btn{&::after{content: none;}}
        }
        .wrap-inner {
            padding: 0px;
            .wrap-head{&::after{display: none}}
            .wrap-item{
                margin-top: 0px;
                overflow: scroll;
            }
        }
        .price{color: $color-price;}
        .wrap-calcForm{
            position: fixed;
            bottom: 0px;
            box-shadow: 0px 0px 6px rgba(0,0,0,0.25);;
        }
        .toolbar{margin: 0px 15px 110px 15px}
    }

    .order-dropdown {
        .dropdown-wrapper{
            .dropdown-head { &.inputbox{ width: 100%; } }
            .header-style-2{
                &:after{color: $color-brand }
                .status-container{ width: 120px}
            }
        }
    }

    //輸入欄位
    .input-dropdown >.dropdown-wrapper {
        > .inputbox {
            margin: 0px 0px 15px 0px;
            &:nth-child(1){ margin-right: 0px;}
            &.dropdown-pane{ &:nth-child(even){ margin-right: 0px;}}
        }
    }

    .mustknow{.order-ul{margin: 0px 15px;}}


    .header-style-2,.header-style{
        .e-name,.gender{color: rgba(34,60,74,0.6);}
        .c-name{
            width: 100%;
            margin-bottom: 5px;
        }
        .info{
            display: flex;
            flex-wrap: wrap;
        }
    }
    .order-overlay{
        .overlay-inner{ 
            &.unflexible{ width: 100%; margin-left: 15px; margin-right: 15px;} 
            &.unflexible.mb-panel{width: 100%; max-width: 100%; margin: 0px;}
        }
        .icon-navigate_before{ display: block; }
        .overlay-inner{
            margin-top: 0px;
            top: 50%;
            transform: translateY(-50%);
        }
        .overlay-bottom{
            button{
                width: 100%;
            }
        }
    }
    .travel-periods > span{ display: inline-block; } 
    .paystatus-wrapbox{
        flex-wrap: wrap;
        .paystatusInfo-wrapper,.imgInfo-wrapper{ width: 100%;}
        .imgInfo-wrapper{order: 1;}
        .paystatusInfo-wrapper{order: 2;}
        .m-lh{line-height: calc(15px * 1.4);}
    }
}

// mustread error animation
@keyframes swing{
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }
        
    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0) scale(1.01);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

//header load animation
@keyframes icon {
    0% {
        opacity: 0.4;
        transform: scale(0.4);
    }
    50%{
        opacity: 0.7;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
}


///載入時的特效
.load-wrapper{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.load-dot{
    display: flex;
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: white;
    animation: load-dotscale;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    &.left{ right: calc(50% + 15px); }
    &.center{ animation-delay: 0.4s; }
    &.right{
        left: calc(50% + 15px);
        animation-delay: 0.8s;
    }
}
.btn-load-animaton{
    animation: btn-skeletonAnimation;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes btn-skeletonAnimation {
    0% { opacity: 0.8; }
    50% { opacity: 0.6;}
    100% { opacity: 0.8; }
}
@keyframes load-dotscale {
    0% { transform: scale(0.8) }
    50% { transform: scale(1.5) }
    100% {transform: scale(0.8)}
}
@keyframes load-dotjump{
    0%, 40%, 100% { 
        transform: translate(0, 0) scale(1.8);
        background-color: $color-green;
    }
    12% { 
        transform: translate(0, -15px) scale(2.7); 
        background-color: $color-brand;  
    }  
    80%{
        transform: translate(0, 0) ;
        opacity: 0.8; 
    }
}