.as_body {
    padding: 0;
}
.as_main {
    .as_header {
        height: size(90);
        background: white;
        display: flex;
        align-items: center;
        position: relative;
        justify-content: center;
        font-size: size(32);
        color: #1B1B1B;
        border-bottom-left-radius: size(16);
        border-bottom-right-radius: size(16);
        a {
            height: 100%;
            position: absolute;
            width: size(77);
            left: 0;
            top: 0;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAeCAYAAAAl+Z4RAAAAAXNSR0IArs4c6QAAAktJREFUSEuVlL1rFGEQxp/nEiOCYCEhZOYK/wIbG4uQO0QbFQQbRVBBbUREsBG00EIhjWAhChpBKy1EVBAsgoWInfiBKYLEqOzu7d55EcRIcrndV17ZC+/lPvZ2ymWe37w788wQOWN0dHTzyMjIUwA7kiQ5y5z6jSIyQ3Ii1c3lAQyp6nMAe52idwYGiMgjkodaYmPMyyAI9g8EEJG7JE854jdBEOwGsJIJUNUbAM454verq6uTtVrtj/3WF6CqVwFccsSzhUJh0vO8xda3ngARuUByymnYl0ajYSuH7uS6AkTkDMmbTuVvAEpBEPxYP/YOgKoeB3DfEYfNZnOiWq3Od/NMG2B8fPxgoVB47PRmMY7jyTAMZ3sZbg0gIntIvgCwwSYbY36TLPm+/6GfW/8DxsbGdg4PD78CsClNXjHG7AqC4G2W1VksFrcbY14D2JJWjkke8H3fviYzKCILJLelmX+TJDlaqVSeZCrTBKrqTwBbW/9tn16pVN7lAewzxjwjOZSneW1OFJHDJB86VX+RLHue9ynrJWtjVNVjAB44gnocx6V+HuhYJhE5QfKe48IotfBcppFaCap6GsAtR+A1m81SFEVfM63sQM4DuO685HuSJOUwDO1StUXPdVbViwCuOZAFAOX1G9n3oIjIZZJXnJLzy8vLpXq97reNsd+oulylObuhURRVO6bQC6Sqth+2L634bDfVnrbMo+o01k7GTqgVH5eWlsoDA6xKRKZJnnQaO5MLYIWqat1qXWujkRuQQm4bY44YY6b+AcGv+jPbYTK4AAAAAElFTkSuQmCC) 50% 50% / size(16) size(30) no-repeat;
        }
    }
    .as_bottom_box {
        height: size(100);
        >div {
            box-shadow: 0px -size(4) size(9) 0px rgba(201, 210, 221, .3);
            height: size(100);
            position: fixed;
            bottom: 0;
            width: 100%;
            background: white;
            padding: 0 size(40) 0 size(10);
            display: flex;
            align-items: center;
            justify-content: space-between;
            .as_select_all {
                display: flex;
                align-items: center;
                height: 100%;
                >div:not(.as_line) {
                    height: 100%;
                    display: flex;
                    align-items: center;
                    padding: 0 size(40);
                    color: #979797;
                    font-size: size(30);
                    &.active {
                        font-weight: bold;
                        color: #DE4F00;
                    }
                }
                .as_line {
                    width: 1px;
                    background: #E9E9EA;
                    height: size(27);
                }
            }
            button {
                width: size(116);
                background: #FF803A;
                height: size(50);
                border: none;
                color: white;
                border-radius: size(10);
                font-size: size(30);
            }
        }
    }
    .as_select_box {
        border-radius: size(16);
        background: white;
        padding: 0 size(20);
        margin: size(20) size(20) 0;
        .as_select_box_top {
            padding: size(30) 0;
            font-size: size(24);
            color: #1B1B1B;
        }
        .as_option_box {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            >div {
                width: calc((100% - 2 * #{size(14)}) / 3);
                height: size(55);
                border: 1px solid #B5B5B5;
                border-radius: size(28);
                margin-bottom: size(30);
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: size(24);
                color: #979797;
                margin-right: size(14);
                position: relative;
                &:nth-child(3n) {
                    margin-right: 0;
                }
                &.active {
                    border-color: #1B1B1B;
                    color: #1B1B1B;
                    &::before {
                        content: '';
                        position: absolute;
                        left: size(11);
                        width: size(24);
                        height: size(24);
                        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAmBJREFUSEu1lj9oE3EUxz/vEutf8P8iCLbooqJiFXG0DjbFQRIuyaDOOhWK2FIcdagKDgV1Vocm0SKlmjRNtKODW7sJ6qKDoFuXJrknd5fYeHe5nKFmCvd79/28937vzwlhvzmzn02aBWMIOArsb5r/BFbAeochM1wqfOkkI4EHC2Y/lkyhpBCMUCcUC+EVjfoEl2c/e239gJJ5DZUnwPZQYf/hKqI3GS48bz/6G/A2fQvR+yDBkXUlqqJym5H8w5bpulAxfRX0We/iLUlVkOsk8i/sJy6geOUQ0reMsqOrk9EMVmHtOInXX11AyZxBJRPt3QArZQ2Du1gaB7njFIZojuFCVnBKUT4BsZ4AtrioSaIw52Yj/REYBBrU9IhQSk+i3NsYcfM8yHtgc1NvUiiaFZCL/wzwev4mdQ4jtgDsbNOqCMX0N+BA8+FjRD+gYkd0sCPUl5bMWcQqo7LL8853O4IaSBylwdYfW7iwVKeSHKAWXwqE+D0/gxiLiE8c0Po6wEWPkcg/cv4FQbzi8+YgMVkEdgdH6wDaU2R3oo4y8nLaB/GKlzKnUbXF94Tcn5MizyUHQsqgY39KsWyeoiHVLuJOHjqUqQeSN/tIF9bcpsycRK0qyN4IlTcZ0mgeiNNEqRMQsz3fF0G82Wiho8KGGKOM5Kab4pW2pRPOEMkxnMtGGHb2dGQZ5DCwLYLntoln2Lkz5D+O65ZbG7FwYJxE4UFL0r+5nEh42tPKhButRdMZYJ/MJweIxaZQSUZb+jpLozEebem336L7dZEFhkCPIeKWp8UvRFdAqhga+tnyGwXoFAaivCXFAAAAAElFTkSuQmCC) 50% 50% / 100% 100% no-repeat;
                    }
                }
                &.disable {
                    pointer-events: none;
                    opacity: 0.4;
                }
            }
        }
    }
}