@charset 'UTF-8';
@import 'mixins';

@mixin border {
    border-radius:  5px;
    border: 1px solid #dedede;
}

.wot {
    min-height: 100vh;
    padding: px2rem(170) px2rem(110);
    .form {
        .row {
            @include border;
            height: px2rem(88);
            margin-bottom: px2rem(70);
            @include clearfix;
            position: relative;
            line-height: px2rem(88);
            font-size: px2rem(30);
            background: #f5f5f5;
        }
        .select-wrap {
            width: px2rem(530);
            left: -1px;
            position: absolute;
            top: px2rem(80);
            border-radius: 0 0 5px 5px;
            border: 1px solid #dedede;
        }
        .select {
            max-height: px2rem(526);
            overflow-y: scroll;
            li {
                height: px2rem(88);
                width: 100%;
                background: #f5f5f5;
                border-bottom: 1px solid #dedede;
                &:last-child {
                    border: none;
                }
                span {
                    color: #999;
                    font-size: px2rem(24);
                    line-height: px2rem(88);
                }
                .pn {
                    margin-left: px2rem(88);
                    em {
                        color: #ff2b68;
                    }
                }
                .zone {
                    margin-left: px2rem(32);
                }
            }
        }
        .checked {
            text-indent: px2rem(35);
            
        }
        .icon-search {
            float: left;
            width: px2rem(48);
            height: px2rem(48);
            background: url(../../img/search.png) no-repeat;
            background-size: 100% 100%;
            margin: px2rem(20);
        }
        input {
            display: inline-block;
            background-color: transparent;
            border: none;
            outline: none;
            vertical-align: px2rem(40);
            float: left;
            width: px2rem(400);
        }
        .icon-down:after {
            content: "";
            position: absolute;
            width: px2rem(20);
            height: px2rem(12);
            background: url(../../img/icon-down.png) no-repeat;
            background-size: 100% 100%;
            right: px2rem(25);
            top: 50%;
            transform: translateY(-50%);
        }
        // .zone {
        //     position: absolute;
        //     width: 100%;
        //     padding: 0 px2rem(12);
        //     top: px2rem(120);
        //     background: #666;
        //     border-radius: 5px;
        //     z-index: 10;
        //     &:before {
        //         content:"";
        //         display: block;
        //         position: absolute;
        //         @include triangle-up(px2rem(20), #666);
        //         top: -px2rem(30);
        //         right: px2rem(20);
        //         z-index: 20;
        //     }
            
        //     p {
        //         line-height: px2rem(75);
        //         font-size: px2rem(30);
        //         color:#fff;
        //         border-bottom:1px solid #999;
        //         &:last-child {
        //             border: none;
        //         }
        //     }
        // }
        .panel {
            font-size: px2rem(28);
            margin-bottom: px2rem(30);
            .r {
                float: right;
                color: #999;
            }
            .l {
                float: left;

            }
        }
        .history {
            li {
                color: #999;                
                line-height: px2rem(70);
                font-size: px2rem(28);
                margin-bottom: px2rem(10);
                border-bottom: 1px solid #dedede
            }
        }
        .rank {
            text-align: center;
            margin-top: px2rem(68);
            a {
                color: #39a8ff;
                font-size: px2rem(26);
            }
        }
        
    }
    .submit {
        text-align: center;
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
        background: #ff2b68;
        color: #fff;
        font-size: px2rem(40);
        font-weight: bold;
        line-height: px2rem(100);
        letter-spacing: px2rem(20);
        &:active {
            background-color: #e6275d;
        }
    }
}