// .iduty_mask {
//     position: absolute;
//     left: 0;
//     top: 0;
//     background: rgba(0,0,0,.3);
//     @include _wh(100%);
//     z-index: 98;
//     opacity: 0;
//     &.active {
//         animation: opacity .3s;
//         -webkit-animation: opacity .3s;
//         animation-fill-mode: forwards;
//         -webkit-animation-fill-mode: forwards;
//     }
//     @keyframes opacity {
//         from {
//             opacity: 0;
//         }
//         to {
//             opacity: 1;
//         }
//     }
//     &.hide {
//         animation: hide .3s;
//         -webkit-animation: hide .3s;
//         animation-fill-mode: forwards;
//         -webkit-animation-fill-mode: forwards;
//     }
//     @keyframes hide {
//         from {
//             opacity: 1;
//         }
//         to {
//             opacity: 0;
//         }
//     }
// }

// .iduty_popup {
//     width: 100%;
//     max-height: 80%;
//     position: absolute;
//     left: 0;
//     bottom: 0;
//     z-index: 99;
//     border-top-left-radius: 13px;
//     border-top-right-radius: 13px;
//     background: #fff;
//     transform: translate3d(0, 100%, 0);
//     -webkit-transform: translate3d(0, 100%, 0);
//     box-shadow: 1px 1px 10px 3px rgba(0,0,0,.1);

//     &.active {
//         animation: myfirst .3s;
//         -webkit-animation: myfirst .3s;
//         animation-fill-mode: forwards;
//         -webkit-animation-fill-mode: forwards;
//     }
//     @keyframes myfirst {
//         from {
//             -webkit-transform: translate3d(0, 100%, 0);
//         }
//         to {
//             -webkit-transform: translate3d(0, 0, 0);
//         }
//     }

//     &.hide {
//         animation: hide .3s;
//         -webkit-animation: hide .3s;
//         animation-fill-mode: forwards;
//         -webkit-animation-fill-mode: forwards;
//     }
//     @keyframes hide {
//         from {
//             -webkit-transform: translate3d(0, 0, 0);
//         }
//         to {
//             -webkit-transform: translate3d(0, 100%, 0);
//         }
//     }

//     .iduty_popup_btn {
//         display: flex;
//         border-bottom: .5px solid #f1f1f1;
//         margin: 0 10px;
//         div {
//             font-size: .44rem;
//             line-height: 1.3rem;
//             padding: 0 10px;
//             &:nth-child(1) {
//                 color: #999;
//             }
//             &:nth-child(2) {
//                 flex: 1;
//                 text-align: center;
//             }
//             &:last-child {
//                 color: $mainColor;
//             }
//         }
//     }

//     .iduty_popup_title {
//         text-align: center;
//         line-height: 1.3rem;
//         font-size: .5rem;
//         font-weight: 500;
//         min-height: 20px;
//         color: #999;
//     }

//     .iduty_popup_btn_none {
//         @include safe-area(padding, 0px, bottom);
//     }

//     .iduty_popup_btn_submit {
//         display: flex;
//         padding: $padding;
//         div {
//             flex: 1;
//             @include safe-area(padding, 0px, bottom);
//             p {
//                 background: #00d896;
//                 color: #00291c;
//                 font-size: .44rem;
//                 line-height: 44px;
//                 border-radius: 22px;
//                 text-align: center;
//                 font-weight: 600;
//             }
//         }
//     }

//     .iduty_popup_scroll {
//         $height: 44px;
//         .that_options {
//             padding: 0 10px;
//             display: flex;
//             align-items: flex-start;
//             .that_options_scroll {
//                 height: $height*5;
//                 // height: 220px;
//                 flex: 1;
//                 overflow: hidden;
//                 position: relative;
//                 &::after {
//                     content: '';
//                     height: $height;
//                     // height: 44px;
//                     display: block;
//                     width: 100%;
//                     position: absolute;
//                     top: 50%;
//                     z-index: 0;
//                     background: #f6f6f6;
//                     margin-top: -$height/2;
//                     // margin-top: -22px;
//                 }
//                 &:nth-child(1) {
//                     &::after {
//                         border-top-left-radius: 5px;
//                         border-bottom-left-radius: 5px;
//                     }
//                 }
//                 &:nth-child(3) {
//                     &::after {
//                         border-top-right-radius: 5px;
//                         border-bottom-right-radius: 5px;
//                     }
//                 }
//                 // div {
//                 //     position: relative;
//                 // }
//                 .that_options_scroll_wrap {
//                     transition: transform 100ms ease-out;
//                     transform-style: preserve-3d;
//                     backface-visibility: hidden;
//                     position: relative;
//                     z-index: 1;
//                     margin-top: $height*2;
//                     // margin-top: 88px;
//                     .that_select_option {
//                         line-height: $height;
//                         // line-height: 44px;
//                         height: $height;
//                         text-align: center;
//                         font-size: .5rem;
//                         color: #999;
//                         display: flex;
//                         justify-content: center;
//                         &.active {
//                             color: #000;
//                             font-weight: 600;
//                         }
//                         &.next {
//                             transform: scale3d(1, .9, 1);
//                         }
//                         &.last {
//                             transform: scale3d(1, .5, 1);
//                         }
//                     }
//                 }
//             }
//         }

//         .that_rule {
//             padding-top: 20px;
//             padding-bottom: 30px;
//             .that_unit {
//                 padding-bottom: 20px;
//                 text-align: center;
//                 font-size: .44rem;
//                 span {
//                     font-size: .78rem;
//                     font-weight: 500;
//                 }
//             }
//         }
//     }
// }


// // $ui-select-option-height: 35px;
// $ui-select-option-height: 44px;
// $ui-select-swiper-padding: 10px;

// .ui-select-swiper {
//     height: $ui-select-option-height*5 + $ui-select-swiper-padding*2;
//     overflow: hidden;
//     flex: 1;
//     -webkit-box-flex: 1;
//     display: block;
//     width: 100%;
//     padding: $ui-select-swiper-padding 0;
//     box-sizing: border-box;
//     position: relative;

//     &:before {
//         content: '';
//         display: block;
//         width: 100%;
//         height: $ui-select-option-height;
//         border-top: .01rem solid #eee;
//         border-bottom: .01rem solid #eee;
//         position: absolute;
//         top: 50%;
//         margin-top: -$ui-select-option-height/2 - 1;
//     }

//     .ui-select-option {
//         text-align: center;
//         line-height: $ui-select-option-height;
//         height: $ui-select-option-height;
//         font-size: .5rem;
//         color: #999;
//         opacity: 0.3;
//         @include ellipsis;
//         font-weight: normal;

//         &.active {
//             color: #222;
//             opacity: 1;
//             font-weight: 500;
//         }

//         &.next {
//             opacity: 0.7;
//         }
//     }

//     .rc-swiper {
//         height: $ui-select-option-height;
//         margin-top: $ui-select-option-height*2;
//         transition: transform 100ms ease-out;
//         transform-style: preserve-3d;
//         backface-visibility: hidden;
//     }
// }


.__iduty_box {
    $color: #f1f1f1;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 200;
    @include wh(100%);
    display: flex;
    align-items: center;
    justify-content: center;
    .iduty_box_wrap {
        flex: 1;
        margin: 0 px2rem(2 * $spacing);
        background: #fff;
        border-radius: px2rem($radius);
        .iduty_box_title {
            font-size: px2rem(18);
            text-align: center;
            padding: px2rem(20) 0;
            font-weight: 600;
        }
        .iduty_box_content {
            color: #444;
            text-align: center;
            font-size: px2rem(15);
            line-height: px2rem(20);
            font-weight: 400;
            padding: px2rem($spacing);
            padding-top: 0;

            &.ptop {
                padding-top: px2rem($spacing);
            }
        }
        .iduty_box_btn {
            display: flex;
            border-bottom-left-radius: px2rem($radius);
            border-bottom-right-radius: px2rem($radius);
            overflow: hidden;
            padding: px2rem(10) 0;
            border-top: .5px solid $color;
            button {
                flex: 1;
                height: px2rem(30);
                line-height: px2rem(30);
                font-size: px2rem(16);
                color: #999;
                background: #fff;
                border: none;
                display: block;
                font-weight: 600;
                &:last-child {
                    color: $mainColor;
                }
                &:nth-child(1) {
                    border-right: .5px solid $color;
                }
                &:last-child {
                    border-right: none;
                }
            }
        }
    }
}