.option-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
}

.background-filter-wrap {
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
}

.option-box {
    width: 400px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: #fff;
    border-radius: 5px;
    z-index: 9;
}

.option-box .option-description-wrap {
    width: 100%;
    height: 120px;
    padding: 20px;
    display: flex;
    align-items: center;
    background-color: #6C6C6C;
    border-radius: 5px;
}

.option-box .option-description-wrap span {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
}

.option-box button {
    width: 100%;
    height: 50px;
    border: none;
    background-color: #DDDDDD;
    border-radius: 5px;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

/* hover effect */
.option-box button:hover {
    background-color: #2E2ECC;
}
.option-box button:hover p {
    color: #fff;
}
.option-box button:hover span {
    color: #fff;
}

.option-box button.active {
    background-color: #2E2ECC;
}
.option-box button.active p {
    color: #fff;
}
.option-box button.active span {
    color: #fff;
}

/* before icon color */
.option-box button.icon-pickup-car:before {
    display: block;
    content: ' ';
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 2.50002C0 2.03978 0.373096 1.66669 0.833333 1.66669H13.3333C13.7936 1.66669 14.1667 2.03978 14.1667 2.50002V13.3334C14.1667 13.7936 13.7936 14.1667 13.3333 14.1667H0.833333C0.373096 14.1667 0 13.7936 0 13.3334V2.50002ZM1.66667 3.33335V12.5H12.5V3.33335H1.66667Z' fill='%23999999'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.5 6.66665C12.5 6.20641 12.8731 5.83331 13.3333 5.83331H16.6667C16.8877 5.83331 17.0996 5.92111 17.2559 6.07739L19.7559 8.57739C19.9122 8.73367 20 8.94563 20 9.16665V13.3333C20 13.7936 19.6269 14.1666 19.1667 14.1666H13.3333C12.8731 14.1666 12.5 13.7936 12.5 13.3333V6.66665ZM14.1667 7.49998V12.5H18.3333V9.51182L16.3215 7.49998H14.1667Z' fill='%23999999'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.58332 14.1667C3.89297 14.1667 3.33332 14.7263 3.33332 15.4167C3.33332 16.107 3.89297 16.6667 4.58332 16.6667C5.27368 16.6667 5.83332 16.107 5.83332 15.4167C5.83332 14.7263 5.27368 14.1667 4.58332 14.1667ZM1.66666 15.4167C1.66666 13.8058 2.97249 12.5 4.58332 12.5C6.19415 12.5 7.49999 13.8058 7.49999 15.4167C7.49999 17.0275 6.19415 18.3333 4.58332 18.3333C2.97249 18.3333 1.66666 17.0275 1.66666 15.4167Z' fill='%23999999'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4167 14.1667C14.7263 14.1667 14.1667 14.7263 14.1667 15.4167C14.1667 16.107 14.7263 16.6667 15.4167 16.6667C16.107 16.6667 16.6667 16.107 16.6667 15.4167C16.6667 14.7263 16.107 14.1667 15.4167 14.1667ZM12.5 15.4167C12.5 13.8058 13.8058 12.5 15.4167 12.5C17.0275 12.5 18.3333 13.8058 18.3333 15.4167C18.3333 17.0275 17.0275 18.3333 15.4167 18.3333C13.8058 18.3333 12.5 17.0275 12.5 15.4167Z' fill='%23999999'/%3E%3C/svg%3E%0A");
}
.option-box button.icon-self-send:before {
    display: block;
    content: ' ';
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 4H6C4.897 4 4 4.897 4 6V11H6V8L12.4 12.8C12.5732 12.9297 12.7837 12.9998 13 12.9998C13.2163 12.9998 13.4268 12.9297 13.6 12.8L20 8V17H12V19H20C21.103 19 22 18.103 22 17V6C22 4.897 21.103 4 20 4ZM13 10.75L6.666 6H19.334L13 10.75Z' fill='%23999999'/%3E%3Cpath d='M2 12H9V14H2V12ZM4 15H10V17H4V15ZM7 18H11V20H7V18Z' fill='%23999999'/%3E%3C/svg%3E%0A");
}
.option-box button.icon-visited:before {
    display: block;
    content: ' ';
    width: 16px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='20' viewBox='0 0 16 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.4615 3.75015C11.4812 3.75015 12.3077 2.91066 12.3077 1.87507C12.3077 0.839486 11.4812 0 10.4615 0C9.44192 0 8.61539 0.839486 8.61539 1.87507C8.61539 2.91066 9.44192 3.75015 10.4615 3.75015ZM4.37269 12.4017L3.80346 13.7501H1.23077C0.551154 13.7501 0 14.3099 0 15.0002C0 15.6905 0.551154 16.2502 1.23077 16.2502H4.20962C4.95 16.2502 5.61654 15.8034 5.90615 15.1139L6.24423 14.3123L5.83385 14.0662C5.16769 13.6665 4.67769 13.0751 4.37269 12.4017ZM14.7692 8.74995H13.0758L12.0735 6.66979C11.5927 5.67171 10.71 4.94199 9.69731 4.67987L6.96346 3.85406C5.875 3.58842 4.74154 3.83257 3.85423 4.52361L2.32846 5.71155C1.78885 6.13149 1.68654 6.91589 2.10077 7.46396C2.515 8.01203 3.28692 8.11477 3.82615 7.69522L5.35269 6.50729C5.64769 6.2772 6.02346 6.19477 6.32462 6.26743L6.89 6.43814L5.44923 9.85195C4.96385 11.0036 5.39885 12.3524 6.46077 12.9892L9.72923 14.949L8.67269 18.3761C8.46962 19.0347 8.83077 19.7359 9.47923 19.9422C9.60192 19.9812 9.72577 20 9.84769 20C10.3712 20 10.8565 19.6574 11.0215 19.123L12.2385 15.1752C12.4658 14.3638 12.1273 13.4923 11.4062 13.0505L9.05077 11.6387L10.255 8.5808L11.0346 10.1992C11.3423 10.8375 11.9931 11.2497 12.6927 11.2497H14.7692C15.4488 11.2497 16 10.6899 16 9.99961C16 9.30935 15.4488 8.74995 14.7692 8.74995Z' fill='%23999999'/%3E%3C/svg%3E%0A");
}

/* hover change icon color */
.option-box button.icon-pickup-car:hover:before {
    display: block;
    content: ' ';
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 2.50002C0 2.03978 0.373096 1.66669 0.833333 1.66669H13.3333C13.7936 1.66669 14.1667 2.03978 14.1667 2.50002V13.3334C14.1667 13.7936 13.7936 14.1667 13.3333 14.1667H0.833333C0.373096 14.1667 0 13.7936 0 13.3334V2.50002ZM1.66667 3.33335V12.5H12.5V3.33335H1.66667Z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.5 6.66665C12.5 6.20641 12.8731 5.83331 13.3333 5.83331H16.6667C16.8877 5.83331 17.0996 5.92111 17.2559 6.07739L19.7559 8.57739C19.9122 8.73367 20 8.94563 20 9.16665V13.3333C20 13.7936 19.6269 14.1666 19.1667 14.1666H13.3333C12.8731 14.1666 12.5 13.7936 12.5 13.3333V6.66665ZM14.1667 7.49998V12.5H18.3333V9.51182L16.3215 7.49998H14.1667Z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.58332 14.1667C3.89297 14.1667 3.33332 14.7263 3.33332 15.4167C3.33332 16.107 3.89297 16.6667 4.58332 16.6667C5.27368 16.6667 5.83332 16.107 5.83332 15.4167C5.83332 14.7263 5.27368 14.1667 4.58332 14.1667ZM1.66666 15.4167C1.66666 13.8058 2.97249 12.5 4.58332 12.5C6.19415 12.5 7.49999 13.8058 7.49999 15.4167C7.49999 17.0275 6.19415 18.3333 4.58332 18.3333C2.97249 18.3333 1.66666 17.0275 1.66666 15.4167Z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4167 14.1667C14.7263 14.1667 14.1667 14.7263 14.1667 15.4167C14.1667 16.107 14.7263 16.6667 15.4167 16.6667C16.107 16.6667 16.6667 16.107 16.6667 15.4167C16.6667 14.7263 16.107 14.1667 15.4167 14.1667ZM12.5 15.4167C12.5 13.8058 13.8058 12.5 15.4167 12.5C17.0275 12.5 18.3333 13.8058 18.3333 15.4167C18.3333 17.0275 17.0275 18.3333 15.4167 18.3333C13.8058 18.3333 12.5 17.0275 12.5 15.4167Z' fill='%23fff'/%3E%3C/svg%3E%0A");
}
.option-box button.icon-self-send:hover:before {
    display: block;
    content: ' ';
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 4H6C4.897 4 4 4.897 4 6V11H6V8L12.4 12.8C12.5732 12.9297 12.7837 12.9998 13 12.9998C13.2163 12.9998 13.4268 12.9297 13.6 12.8L20 8V17H12V19H20C21.103 19 22 18.103 22 17V6C22 4.897 21.103 4 20 4ZM13 10.75L6.666 6H19.334L13 10.75Z' fill='%23fff'/%3E%3Cpath d='M2 12H9V14H2V12ZM4 15H10V17H4V15ZM7 18H11V20H7V18Z' fill='%23fff'/%3E%3C/svg%3E%0A");
}
.option-box button.icon-visited:hover:before {
    display: block;
    content: ' ';
    width: 16px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='20' viewBox='0 0 16 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.4615 3.75015C11.4812 3.75015 12.3077 2.91066 12.3077 1.87507C12.3077 0.839486 11.4812 0 10.4615 0C9.44192 0 8.61539 0.839486 8.61539 1.87507C8.61539 2.91066 9.44192 3.75015 10.4615 3.75015ZM4.37269 12.4017L3.80346 13.7501H1.23077C0.551154 13.7501 0 14.3099 0 15.0002C0 15.6905 0.551154 16.2502 1.23077 16.2502H4.20962C4.95 16.2502 5.61654 15.8034 5.90615 15.1139L6.24423 14.3123L5.83385 14.0662C5.16769 13.6665 4.67769 13.0751 4.37269 12.4017ZM14.7692 8.74995H13.0758L12.0735 6.66979C11.5927 5.67171 10.71 4.94199 9.69731 4.67987L6.96346 3.85406C5.875 3.58842 4.74154 3.83257 3.85423 4.52361L2.32846 5.71155C1.78885 6.13149 1.68654 6.91589 2.10077 7.46396C2.515 8.01203 3.28692 8.11477 3.82615 7.69522L5.35269 6.50729C5.64769 6.2772 6.02346 6.19477 6.32462 6.26743L6.89 6.43814L5.44923 9.85195C4.96385 11.0036 5.39885 12.3524 6.46077 12.9892L9.72923 14.949L8.67269 18.3761C8.46962 19.0347 8.83077 19.7359 9.47923 19.9422C9.60192 19.9812 9.72577 20 9.84769 20C10.3712 20 10.8565 19.6574 11.0215 19.123L12.2385 15.1752C12.4658 14.3638 12.1273 13.4923 11.4062 13.0505L9.05077 11.6387L10.255 8.5808L11.0346 10.1992C11.3423 10.8375 11.9931 11.2497 12.6927 11.2497H14.7692C15.4488 11.2497 16 10.6899 16 9.99961C16 9.30935 15.4488 8.74995 14.7692 8.74995Z' fill='%23fff'/%3E%3C/svg%3E%0A");
}

.option-box button.icon-pickup-car.active:before {
    display: block;
    content: ' ';
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 2.50002C0 2.03978 0.373096 1.66669 0.833333 1.66669H13.3333C13.7936 1.66669 14.1667 2.03978 14.1667 2.50002V13.3334C14.1667 13.7936 13.7936 14.1667 13.3333 14.1667H0.833333C0.373096 14.1667 0 13.7936 0 13.3334V2.50002ZM1.66667 3.33335V12.5H12.5V3.33335H1.66667Z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.5 6.66665C12.5 6.20641 12.8731 5.83331 13.3333 5.83331H16.6667C16.8877 5.83331 17.0996 5.92111 17.2559 6.07739L19.7559 8.57739C19.9122 8.73367 20 8.94563 20 9.16665V13.3333C20 13.7936 19.6269 14.1666 19.1667 14.1666H13.3333C12.8731 14.1666 12.5 13.7936 12.5 13.3333V6.66665ZM14.1667 7.49998V12.5H18.3333V9.51182L16.3215 7.49998H14.1667Z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.58332 14.1667C3.89297 14.1667 3.33332 14.7263 3.33332 15.4167C3.33332 16.107 3.89297 16.6667 4.58332 16.6667C5.27368 16.6667 5.83332 16.107 5.83332 15.4167C5.83332 14.7263 5.27368 14.1667 4.58332 14.1667ZM1.66666 15.4167C1.66666 13.8058 2.97249 12.5 4.58332 12.5C6.19415 12.5 7.49999 13.8058 7.49999 15.4167C7.49999 17.0275 6.19415 18.3333 4.58332 18.3333C2.97249 18.3333 1.66666 17.0275 1.66666 15.4167Z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.4167 14.1667C14.7263 14.1667 14.1667 14.7263 14.1667 15.4167C14.1667 16.107 14.7263 16.6667 15.4167 16.6667C16.107 16.6667 16.6667 16.107 16.6667 15.4167C16.6667 14.7263 16.107 14.1667 15.4167 14.1667ZM12.5 15.4167C12.5 13.8058 13.8058 12.5 15.4167 12.5C17.0275 12.5 18.3333 13.8058 18.3333 15.4167C18.3333 17.0275 17.0275 18.3333 15.4167 18.3333C13.8058 18.3333 12.5 17.0275 12.5 15.4167Z' fill='%23fff'/%3E%3C/svg%3E%0A");
}
.option-box button.icon-self-send.active:before {
    display: block;
    content: ' ';
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 4H6C4.897 4 4 4.897 4 6V11H6V8L12.4 12.8C12.5732 12.9297 12.7837 12.9998 13 12.9998C13.2163 12.9998 13.4268 12.9297 13.6 12.8L20 8V17H12V19H20C21.103 19 22 18.103 22 17V6C22 4.897 21.103 4 20 4ZM13 10.75L6.666 6H19.334L13 10.75Z' fill='%23fff'/%3E%3Cpath d='M2 12H9V14H2V12ZM4 15H10V17H4V15ZM7 18H11V20H7V18Z' fill='%23fff'/%3E%3C/svg%3E%0A");
}
.option-box button.icon-visited.active:before {
    display: block;
    content: ' ';
    width: 16px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='20' viewBox='0 0 16 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.4615 3.75015C11.4812 3.75015 12.3077 2.91066 12.3077 1.87507C12.3077 0.839486 11.4812 0 10.4615 0C9.44192 0 8.61539 0.839486 8.61539 1.87507C8.61539 2.91066 9.44192 3.75015 10.4615 3.75015ZM4.37269 12.4017L3.80346 13.7501H1.23077C0.551154 13.7501 0 14.3099 0 15.0002C0 15.6905 0.551154 16.2502 1.23077 16.2502H4.20962C4.95 16.2502 5.61654 15.8034 5.90615 15.1139L6.24423 14.3123L5.83385 14.0662C5.16769 13.6665 4.67769 13.0751 4.37269 12.4017ZM14.7692 8.74995H13.0758L12.0735 6.66979C11.5927 5.67171 10.71 4.94199 9.69731 4.67987L6.96346 3.85406C5.875 3.58842 4.74154 3.83257 3.85423 4.52361L2.32846 5.71155C1.78885 6.13149 1.68654 6.91589 2.10077 7.46396C2.515 8.01203 3.28692 8.11477 3.82615 7.69522L5.35269 6.50729C5.64769 6.2772 6.02346 6.19477 6.32462 6.26743L6.89 6.43814L5.44923 9.85195C4.96385 11.0036 5.39885 12.3524 6.46077 12.9892L9.72923 14.949L8.67269 18.3761C8.46962 19.0347 8.83077 19.7359 9.47923 19.9422C9.60192 19.9812 9.72577 20 9.84769 20C10.3712 20 10.8565 19.6574 11.0215 19.123L12.2385 15.1752C12.4658 14.3638 12.1273 13.4923 11.4062 13.0505L9.05077 11.6387L10.255 8.5808L11.0346 10.1992C11.3423 10.8375 11.9931 11.2497 12.6927 11.2497H14.7692C15.4488 11.2497 16 10.6899 16 9.99961C16 9.30935 15.4488 8.74995 14.7692 8.74995Z' fill='%23fff'/%3E%3C/svg%3E%0A");
}

/* button style */
.option-box > button > p,
.option-box > button > span {
    color: #999;
    font-weight: bold;
}

.option-box > button > p {
    font-size: 18px;
}

.option-box > button > span {
    font-size: 14px;
}

.overflow-hidden {
    overflow: hidden !important;
}

/* option box in content */
.article-option-wrap {
    display: none;
    width: 100%;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: left;
}

.article-option-wrap.show {
    display: flex;
}

.article-option-wrap .option-box {
    width: 200px;
    padding: 0;
    margin-bottom: 20px;
}