@charset 'utf-8';
/* CSS Document */
body,
input,
select{
    font-family: Microsoft JhengHei, Arial;
}
body{
    width: 100%;
    height: 100%;
    font-size: 0.9375vw;
    position: fixed;
}
@media screen and (max-aspect-ratio: 4/3){
    body{
        font-size: 4.375vw;
    }
}

.flexRow{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.flexDirectionRow{
    flex-direction: row !important;
}
.flexDirectionColumn{
    flex-direction: column !important;
}
.flexEnd{
    justify-content: flex-end !important;
}

/* =========================================================
 * 整頁區塊
 * ========================================================= */
body>#wrap{
    width: calc(100% - 1px * 2);
    height: calc(100% - 1px * 2);
    border: 1px solid rgba(0, 0, 0, 1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}
/*
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.index{
        min-height: 100%;
    }
}
*/
.viewArea{
    width: calc(100% - 3.125vw * 2);
    padding: 0px 3.125vw;
}
.hidden{
    width: 1px !important;
    height: 1px !important;
    padding: 1px 0px 0px 1px !important;
    position: fixed !important;
    top: -1px !important;
    left: -1px !important;
    overflow: hidden !important;
}

.checkRWDLandscapeItem,
button.checkRWDLandscapeItem,
input[type='button'].checkRWDLandscapeItem{
    display: flex;
}
@media screen and (max-aspect-ratio: 4/3){
    .checkRWDLandscapeItem,
    button.checkRWDLandscapeItem,
    input[type='button'].checkRWDLandscapeItem{
        display: none;
    }
}
.checkRWDPortraitItem,
button.checkRWDPortraitItem,
input[type='button'].checkRWDPortraitItem{
    display: none;
}
@media screen and (max-aspect-ratio: 4/3){
    .checkRWDPortraitItem,
    button.checkRWDPortraitItem,
    input[type='button'].checkRWDPortraitItem{
        display: flex;
    }
}


/* =========================================================
 * Header 區塊
 * ========================================================= */
#wrap>header{
    width: 100%;
    height: 9vh;
    background-color: rgba(26, 26, 26, 1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* left */
#wrap>header>.left{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>header>.left>.viewArea{
        /*padding: 0px 3.125vw 0px 0px;*/
    }
}
#wrap>header>.left>.viewArea>a{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
#wrap>header>.left>.viewArea img{
    height: 7vh;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>header>.left>.viewArea img{
        height: 12.5vw;
    }
}


/* right */
#wrap>header>.right{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: center;
    align-items: center;
    position: relative;
}
#wrap>header>.right>.viewArea{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
#wrap>header>.right>.viewArea>ul{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#wrap>header>.right>.viewArea>ul>li{
    border-right: 1px solid rgba(255, 255, 255, 1);
    padding: 0px 0.78125vw;
    position: relative;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>header>.right>.viewArea>ul>li{
        padding: 0px 1.25vw;
    }
}
#wrap>header>.right>.viewArea>ul>li:first-child{
    padding: 0px 0.78125vw 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>header>.right>.viewArea>ul>li:first-child{
        padding: 0px 1.25vw 0px 0px;
    }
}
#wrap>header>.right>.viewArea>ul>li:last-child{
    border-right: 0px;
    padding: 0px 0px 0px 0.78125vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>header>.right>.viewArea>ul>li:last-child{
        padding: 0px 0px 0px 1.25vw;
    }
}
#wrap>header>.right>.viewArea>ul>li>a{
    color: rgba(255, 255, 255, 1);
    font-size: 1.25vw;
    font-weight: normal;
    text-decoration: none;
    text-align: left;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 0px 0px 2.0833vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>header>.right>.viewArea>ul>li>a{
        font-size: 4.375vw;
        padding: 0px;
    }
}
#wrap>header>.right>.viewArea>ul>li.back>a{
    background: url(/images/headerBackButton.svg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: left center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>header>.right>.viewArea>ul>li.back>a{
        background: none;
    }
}
#wrap>header>.right>.viewArea>ul>li.home>a{
    background: url(/images/headerHomeButton.svg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: left center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>header>.right>.viewArea>ul>li.home>a{
        background: none;
    }
}


/* =========================================================
 * 頁面 區塊
 * ========================================================= */
#wrap>.page{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: relative;
}

input[type='tel'],
input[type='text'],
input[type='password'],
input[type='date'],
input[type='datetime-local'],
input[type='time'],
input[type='file']{
    min-width: 0px;
    height: 2.601467vw;
    background: rgba(255, 255, 255, 1);
    border: 0px;
    border-radius: 0.2604167vw;
    color: rgba(0, 0, 0, 1);
    font-size: 1.1459vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 0.78125vw;
}
@media screen and (max-aspect-ratio: 4/3){
    input[type='tel'],
    input[type='text'],
    input[type='password'],
    input[type='date'],
    input[type='datetime-local'],
    input[type='time'],
    input[type='file']{
        height: 9.375vw;
        border-radius: 1.25vw;
        font-size: 4.375vw;
        padding: 0px 3.125vw;
    }
}

select{
    height: 2.601467vw;
    background: rgba(255, 255, 255, 1);
    border: 0px;
    border-radius: 0.2604167vw;
    color: rgba(0, 0, 0, 1);
    font-size: 1.1459vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 0.78125vw;
}
@media screen and (max-aspect-ratio: 4/3){
    select{
        height: 9.375vw;
        border-radius: 1.25vw;
        font-size: 4.375vw;
        padding: 0px 3.125vw;
    }
}
select:invalid{
    color: #999999;
}
textarea,
#cyMsgBox>.contentArea>.content>.form>textarea{
    border: 0px;
    border-radius: 0.2604167vw;
    color: rgba(0, 0, 0, 1);
    font-size: 1.1459vw;
    padding: 0px 0.78125vw;
    resize: none;
}
@media screen and (max-aspect-ratio: 4/3){
    textarea,
    #cyMsgBox>.contentArea>.content>.form>textarea{
        border-radius: 1.25vw;
        font-size: 4.375vw;
        padding: 0px 3.125vw;
    }
}
input[type='button']{
    width: 100%;
}
input[type='tel']:hover,
input[type='text']:hover,
input[type='password']:hover,
input[type='date']:hover,
input[type='datetime-local']:hover,
input[type='time']:hover,
select:hover,
textarea:hover{
    background: rgba(238, 238, 238, 1);
}
*::placeholder,
*::placeholder{
    color: #999999;
}
*:-ms-input-placeholder,
input#password:-ms-input-placeholder{
    color: #999999;
}
*::-ms-input-placeholder,
input#password::-ms-input-placeholder{
    color: #999999;
}

button,
input[type='button']{
    min-width: 15vw;
    min-height: 2.601467vw;
    filter: drop-shadow(0.15625vw 0.15625vw 0.3125vw rgba(0, 0, 0, 0.8));
    border: 0px;
    border-radius: 0.2604167vw;
    color: rgba(255, 255, 255, 1);
    font-size: 1.04167vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    margin: 0px 10px 0px 0px;
    position: relative;
    cursor: pointer;
}
@media screen and (max-aspect-ratio: 4/3){
    button,
    input[type='button']{
        min-width: 60vw;
        height: 9.375vw;
        filter: drop-shadow(0.563vw 0.563vw 0.4775vw rgba(0, 0, 0, 0.8));
        border-radius: 1.25vw;
        font-size: 4.375vw;
    }
}
button:active,
input[type='button']:active{
    filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.5));
    top: 0.1vw;
    left: 0.1vw;
}
button:last-child,
input[type='button']:last-child{
    margin: 0px;
}
button.min,
input[type='button'].min{
    width: auto;
    min-width: auto;
    flex-grow: 0;
    flex-shrink: 0;
    padding: 0px 1.5625vw;
}
@media screen and (max-aspect-ratio: 4/3){
    button.min,
    input[type='button'].min{
        padding: 0px 5.625vw;
    }
}
button.unGrow,
input[type='button'].unGrow{
    width: auto;
    flex-grow: 0;
}
button.flexEnd,
input[type='button'].flexEnd{
    align-self: flex-end;
}
button.blueButton,
input[type='button'].blueButton{
    background-color: rgba(0, 140, 193, 1);
}
button.blackButton,
input[type='button'].blackButton{
    background-color: rgba(26, 26, 26, 1);
}
button.redButton,
input[type='button'].redButton{
    background-color: rgba(197, 58, 46, 1);
}
button.darkRedButton,
input[type='button'].darkRedButton{
    background-color: rgba(142, 31, 39, 1);
}
button.whiteButton,
input[type='button'].whiteButton{
    background-color: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 1);
}

button.addButton::before{
    content: '';
    width: 1.04167vw;
    height: 1.04167vw;
    background-image: url(/images/iconAddButton.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    display: flex;
    margin: 0px 0.2604167vw 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    button.addButton::before{
        width: 4.6875vw;
        height: 4.6875vw;
        margin: 0px 1.5625vw 0px 0px;
    }
}


.normalTabs{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.normalTabs>li{
    background: rgba(30, 30, 30, 1);
    height: 2.604167vw;
    border-radius: 0.2604167vw 0.2604167vw 0px 0px;
    color: rgba(255, 255, 255, 1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    margin: 0px 2px 0px 0px;
    overflow: hidden;
}
@media screen and (max-aspect-ratio: 4/3){
    .normalTabs>li{
        height: 7.5vw;
        border-radius: 0.75vw 0.75vw 0px 0px;
        font-size: 3.75vw;
    }
}
.normalTabs>li:last-child{
    margin: 0px;
}
.normalTabs>li:only-child{
    max-width: calc((100% - 2px * 2) / 3);
}
.normalTabs>li.current{
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 1);
}
.normalTabs>li>a{
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.normalTabs>li.current>a{
    color: rgba(0, 0, 0, 1);
}
#wrap>.page .normalTabs ~ .noDataMsg{
    margin: 0px;
}

.normalTable{
    width: calc(100% - 20px * 2);
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 1);
    font-size: 1.04167vw;
    display: table;
    padding: 20px;
}
@media screen and (max-aspect-ratio: 4/3){
    .normalTable{
        width: calc(100% - 3.125vw * 2);
        font-size: 3.75vw;
        padding: 0px 3.125vw;
    }
    .normalTable.detailDisplay{
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
    }
}
.normalTable .tr{
    display: table-row;
}
@media screen and (max-aspect-ratio: 4/3){
    .normalTable.detailDisplay .tr{
        width: calc(100% - 5px * 2 - 1px * 2) !important;
        display: flex !important;
        border: 1px solid #CCCCCC !important;
        flex-wrap: nowrap !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        margin: 0px 0px 30px 0px !important;
        padding: 0px 5px !important;
    }
    .normalTable.detailDisplay .tr:not(.theader){
        margin: 30px 0px !important;
    }
    .normalTable.detailDisplay .tr:not(.theader) ~ .tr{
        margin: 0px 0px 30px 0px !important;
    }
}
@media screen and (max-aspect-ratio: 4/3){
    .normalTable.detailDisplay .tr.theader{
        display: none !important;
    }
}
.normalTable .tr.theader>.th{
    border-bottom: 1px solid rgba(0, 0, 0, 1);
}
.normalTable .tr.theader>.th.sort{
    cursor: pointer;
}
.normalTable .tr.theader>.th.orderDesc:after{
    content: '\25BC';
    margin: 0px 0px 0px 0.3vw;
}
.normalTable .tr.theader>.th.orderAsc:after{
    content: '\25B2';
    margin: 0px 0px 0px 0.3vw;
}
.normalTable .th,
.normalTable .td{
    display: table-cell;
    vertical-align: middle;
    padding: 0.520833vw;
}
@media screen and (max-aspect-ratio: 4/3){
    .normalTable .th{
        padding: 10px 5px;
    }
    .normalTable .td{
        border-bottom: 1px solid #CCCCCC;
        padding: 10px 5px;
    }
    .normalTable.detailDisplay .td{
        text-align: left !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        flex-grow: 1 !important;
        flex-shrink: 1 !important;
        justify-content: flex-start !important;
        align-items: center !important;
        margin: 0px !important;
    }
    .normalTable.detailDisplay .td.alignCenter{
        text-align: left !important;
    }
    .normalTable.detailDisplay .td:before{
        content: attr(data-before) !important;
        width: calc(3.75vw * 5) !important;
        border-bottom: 0px !important;
        font-weight: bold !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        justify-content: flex-end !important;
        align-items: center !important;
        margin: 0px 20px 0px 0px !important;
        position: relative !important;
    }
    .normalTable .tr:last-child .td{
        border-bottom: 0px;
    }
    .normalTable.detailDisplay .tr:last-child .td{
        border-bottom: 1px solid #CCCCCC !important;
    }
    .normalTable.detailDisplay .tr .td:last-child{
        border-bottom: 0px !important;
    }
    .normalTable.detailDisplay .td>input{
        width: auto !important;
        flex-shrink: 1 !important;
    }
    .normalTable.detailDisplay .td>div,
    #wrap>.memberFunction .normalTable.detailDisplay>.tr>.td.photo>.photo{
        width: auto;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        flex-grow: 1;
        flex-shrink: 1;
        justify-content: flex-start;
        align-items: center;
    }
}
.normalTable .th,
.normalTable .td.alignCenter{
    text-align: center;
}
.normalTable .td.alignRight{
    text-align: right;
}
.normalTable input[type='button']{
    min-width: auto;
}

#wrap>.page>.viewArea>.header,
#wrap>.page>.leftArea>.header{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0px 0px 1.04167vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea>.header,
    #wrap>.page>.leftArea>.header{
        margin: 0px 0px 3.125vw 0px;
    }
}
#wrap>.page>.viewArea h1{
    font-size: 1.6667vw;
    font-weight: normal;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea h1{
        font-size: 5vw;
    }
}
#wrap>.page>.viewArea .header>.buttons{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
}
#wrap>.page>.viewArea .header>.buttons>input[type='button']{
    min-width: 11.45833vw;
    margin: 0px 0px 0px 0.520833vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea .header>.buttons>input[type='button']{
        min-width: 11.45833vw;
        margin: 0px 0px 0px 3.125vw;
        padding: 0px 1.875vw;
    }
}
#wrap>.page>.viewArea .header>.buttons>input[type='button']:first-of-type{
    margin: 0px 0px 0px 0px;
}

#wrap>.page>.viewArea>.blockArea{
    width: 100%;
    max-width: 1000px;
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    padding: 1.04167vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea>.blockArea{
        padding: 3.125vw 0px;
    }
}
#wrap>.page>.viewArea>.blockArea:first-child{
    padding: 0px 0px 1.04167vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea>.blockArea:first-child{
        padding: 0px 0px 3.125vw 0px;
    }
}
#wrap>.page>.viewArea>.blockArea:last-child{
    border-bottom: 0px;
}
#wrap>.page>.viewArea>.blockArea.header{
    margin: 0px;
}
#wrap>.page>.viewArea>.blockArea.row{
    flex-direction: row;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea>.blockArea.row{
        flex-direction: column;
    }
}
#wrap>.page>.viewArea>.blockArea.noLine{
    border-bottom: 0px;
}
#wrap>.page>.viewArea>.blockArea.short{
    max-width: 600px;
}
#wrap>.page>.viewArea>.blockArea.medium{
    max-width: 680px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea>.blockArea.medium{
        max-width: unset;
    }
}
#wrap>.page>.viewArea>.blockArea.moreArea{
    display: none;
}
#wrap>.page>.viewArea>.blockArea>h1{
    margin: 0px 0px 1.04167vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea>.blockArea>h1{
        margin: 0px 0px 3.125vw 0px;
    }
}
#wrap>.page>.viewArea>.blockArea>.dataArea{
    width: 100%;
    font-size: 1.14583vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea>.blockArea>.dataArea{
        font-size: 4.375vw;
    }
}
#wrap>.page>.viewArea>.blockArea>.dataArea.row{
    flex-direction: row;
}
#wrap>.page>.viewArea>.blockArea>.dataArea.row>p{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
}
#wrap>.page>.viewArea>.blockArea>.dataArea.row.buttonArea{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea>.blockArea>.dataArea.row.buttonArea{
        flex-direction: column;
    }
    #wrap>.page>.viewArea>.blockArea.buttonArea input[type='button']{
        width: 100%;
        margin: 3.125vw 0px 0px 0px;
    }
}
#wrap>.page>.viewArea .twoButton{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    margin: 1.04167vw 0px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea .twoButton{
        flex-direction: column;
    }
}
#wrap>.page>.viewArea .twoButton>input[type='button']{
    width: calc(50% - 5px);
    margin: 0px 10px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea .twoButton>input[type='button']{
        width: 100%;
        margin: 3.125vw 0px 0px 0px;
    }
}
#wrap>.page>.viewArea .twoButton>input[type='button']:last-child{
    margin: 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea .twoButton>input[type='button']:last-child{
        margin: 3.125vw 0px 0px 0px;
    }
}

#wrap>.page>.viewArea .threeButton{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    margin: 1.04167vw 0px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea .threeButton{
        flex-direction: column;
    }
}
#wrap>.page>.viewArea .threeButton>input[type='button']{
    width: calc((100% - 10px * 2) / 3  - 6px * 2);
    min-width: auto;
    margin: 0px 10px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea .threeButton>input[type='button']{
        width: 100%;
        margin: 3.125vw 0px 0px 0px;
    }
}
#wrap>.page>.viewArea .threeButton>input[type='button']:last-child{
    margin: 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea .threeButton>input[type='button']:first-child{
        margin: 0px;
    }
    #wrap>.page>.viewArea .threeButton>input[type='button']:last-child{
        margin: 3.125vw 0px 0px 0px;
    }
}

#wrap>.page>.viewArea>.blockArea>.dataArea.bottom{
    justify-content: flex-end;
}
#wrap>.page>.viewArea>.blockArea.row>.dataArea{
    width: auto;
}
#wrap>.page>.viewArea>.blockArea.row>.dataArea:nth-child(odd){
    margin: 0px 1.04167vw 0px 0px;
}
#wrap>.page>.viewArea>.blockArea.row>.dataArea:only-child{
    margin: 0px;
}
#wrap>.page>.viewArea>.blockArea.row>.dataArea>.dataBlock{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
}
#wrap>.page>.viewArea>.blockArea>.dataArea ul{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
}
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows{
    flex-wrap: wrap;
}
#wrap>.page>.viewArea>.blockArea>.dataArea.form>h2{
    margin: 0.52083vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea>.blockArea>.dataArea.form>h2{
        margin: 1.5625vw 0px;
    }
}
#wrap>.page>.viewArea>.blockArea>.dataArea.form ul>li{
    margin: 0.52083vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea>.blockArea>.dataArea.form ul>li{
        margin: 1.5625vw 0px;
    }
}
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li>label{
    line-height: 2.601467vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-basis: 6.25vw;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea>.blockArea>.dataArea ul>li>label{
        line-height: 9.375vw;
        flex-basis: 24vw;
        margin: 0px;
    }
}
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li.required>label:after{
    content: '\2605';
    font-size: 0.833vw;
    margin: 0px 0px 0px 0.3vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea>.blockArea>.dataArea ul>li.required>label:after{
        font-size: 3.75vw;
    }
}
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li>div,
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li>input[type='text'],
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li>input[type='password'],
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li>input[type='date'],
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li>input[type='datetime-local'],
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li>input[type='time'],
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li>select{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 10px 0px 0px;
}
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>div,
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>input[type='text'],
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>input[type='password'],
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>input[type='date'],
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>input[type='datetime-local'],
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>input[type='time'],
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>select{
    width: calc(100% - 6.25vw - 0.78125vw * 2);
    margin: calc(0.52083vw * 2) 0px 0px 6.25vw;
    padding: 0px 0.78125vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>div,
    #wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>input[type='text'],
    #wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>input[type='password'],
    #wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>select{
        width: calc(100% - 3.125vw * 2 - 24vw);
        margin: 3.125vw 0px 0px 24vw;
        padding: 0px 3.125vw;
    }
}

/*
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li>div:last-child,
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li>input[type='text']:last-child,
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li>input[type='password']:last-child,
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li>select:last-child{
    margin: 0px;
}
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>div:last-of-type,
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>input[type='text']:last-of-type,
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>input[type='password']:last-of-type,
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>select:last-of-type{
    margin: calc(0.52083vw * 2) 0px 0px 6.25vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>div:last-of-type,
    #wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>input[type='text']:last-of-type,
    #wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>input[type='password']:last-of-type,
    #wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>select:last-of-type{
        margin: 3.125vw 0px 0px 24vw;
    }
}
*/

#wrap>.page>.viewArea>.blockArea>.dataArea ul>li>label + div,
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li>label + input[type='text'],
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li>label + input[type='password'],
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li>label + select{
    margin: 0px;
}

#wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>label + div,
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>label + input[type='text'],
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>label + input[type='password'],
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>label + select{
    width: auto;
    margin: 0px;
    padding: 0px 0.78125vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>label + div,
    #wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>label + input[type='text'],
    #wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>label + input[type='password'],
    #wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>label + select{
        padding: 0px 3.125vw;
    }
}

@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>input + input,
    #wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>input + select,
    #wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>select + input,
    #wrap>.page>.viewArea>.blockArea>.dataArea ul>li.muiltiRows>select + select{
        margin: 3.125vw 0px 0px 24vw;
    }
}

#wrap>.page>.viewArea>.blockArea>.dataArea ul>li>ul{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
}
#wrap>.page>.viewArea>.blockArea>.dataArea ul>li>ul>li{
    min-height: 2.601467vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea>.blockArea>.dataArea ul>li>ul>li{
        min-height: 9.375vw;
    }
}
#wrap>.page>.viewArea>.blockArea>.buttonArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea>.blockArea>.buttonArea{
        flex-direction: column;
    }
    #wrap>.page>.viewArea>.blockArea>.buttonArea>div{
        width: 100%;
        margin: 1.5625vw 0px;
    }
}
#wrap>.page>.viewArea>.blockArea>.buttonArea.full{
    flex-grow: 1;
    flex-shrink: 1;
}
#wrap>.page>.viewArea>.blockArea.row>.buttonArea{
    width: auto;
    flex-direction: column;
}
#wrap>.page>.viewArea>.blockArea.row>.buttonArea.bottom{
    justify-content: flex-end;
}
#wrap>.page>.viewArea>.blockArea.row>.buttonArea>div{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    margin: 0.52083vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea>.blockArea.row>.buttonArea>div{
        margin: 1.5625vw 0px;
    }
}
#wrap>.page>.viewArea>.blockArea div.faceImageArea,
#wrap>.page>.viewArea>.blockArea>.buttonArea>div.faceImageArea{
    width: 13.02083vw;
    max-width: 300px;
    height: 13.02083vw;
    max-height: 300px;
    border-radius: 500px;
    overflow:hidden;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page>.viewArea>.blockArea div.faceImageArea,
    #wrap>.page>.viewArea>.blockArea>.buttonArea>div.faceImageArea{
        width: 34vw;
        max-width: none;
        height: 34vw;
        max-height: none;
        border-radius: 17vw;
    }
}
#wrap>.page>.viewArea>.blockArea div.faceImageArea>img,
#wrap>.page>.viewArea>.blockArea>.buttonArea>div.faceImageArea>img{
    width: 100%;
    height: 100%;
    border: 0px;
    object-fit: cover;
    object-position: center center;
}
#wrap>.page>.viewArea>.blockArea div.faceImageArea.onerror,
#wrap>.page>.viewArea>.blockArea>.buttonArea>div.faceImageArea.onerror{
    background: rgba(169, 169, 169, 1);
    background-image: url(/images/memberDefaultPhoto.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
#wrap>.page>.viewArea>.blockArea div.faceImageArea.onerror>img,
#wrap>.page>.viewArea>.blockArea>.buttonArea>div.faceImageArea.onerror>img{
    display: none;
}

/* =========================================================
 * 會員表單 (共用)
 * ========================================================= */
#wrap>.memberForm{
    width: 100%;
    background: linear-gradient(
        -90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(0, 0, 0, 0.7) 100%
    ), url(/images/loginBackground.jpg);
    background-repeat: no-repeat, no-repeat;
    background-size: 60% 100%, cover;
    background-position: left center, center center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberForm{
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(0, 0, 0, 0.7) 100%
        ), url(/images/loginBackground.jpg);
        background-repeat: no-repeat, no-repeat;
        background-size: cover, cover;
        background-position: left center, center center;
    }
}
#wrap>.memberForm>.viewArea{
    width: calc(100% - 6.25vw * 2);
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 6.25vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberForm>.viewArea{
        width: calc(100% - 4.6875vw * 2);
        padding: 0px 4.6875vw;
    }
}
#wrap>.memberForm>.viewArea>.formArea{
    width: 26.01467%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberForm>.viewArea>.formArea{
        width: 100%;
    }
}
#wrap>.memberForm>.viewArea>.formArea>h1{
    width: 100%;
    color: rgba(255, 255, 255, 1);
    text-shadow: 0.2vw 0.2vw 0.5vw rgba(0, 0, 0, 1);
    font-size: 1.667vw;
    font-weight: normal;
    margin: 0px 0px 0.5vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberForm>.viewArea>.formArea>h1{
        text-shadow: 0.6vw 0.6vw 1.5vw rgba(0, 0, 0, 1);
        font-size: 5vw;
        margin: 0px 0px 1.5vw 0px;
    }
}
#wrap>.memberForm>.viewArea>.formArea>div{
    width: 100%;
    margin: 0.5vw 0px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberForm>.viewArea>.formArea>div{
        margin: 3.125vw 0px 0px 0px;
    }
}

#wrap>.memberForm>.viewArea>.formArea>.captcha{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 1vw 0px 0.5vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberForm>.viewArea>.formArea>.captcha{
        margin: 3.125vw 0px 0px 0px;
    }
}
#wrap>.memberForm>.viewArea>.formArea>.captcha>input#gCode{
    width: calc(27% - 0.78125vw * 2);
    height: 2.601467vw;
    border: 0px;
    border-radius: 0.2604167vw 0px 0px 0.2604167vw;
    color: rgba(0, 0, 0, 1);
    font-size: 1.1459vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: norow;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0px 0.78125vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberForm>.viewArea>.formArea>.captcha>input#gCode{
        width: calc(100% - (9.375vw / 32 * 118) - 1px - 3.125vw * 2);
        height: 9.375vw;
        border-radius: 1.25vw 0px 0px 1.25vw;
        font-size: 4.375vw;
        padding: 0px 3.125vw;
    }
}
#wrap>.memberForm>.viewArea>.formArea>.captcha>img#gCodeImg{
    width: calc(2.601467vw / 32 * 118);
    height: 2.601467vw;
    border-radius: 0px 0.2604167vw 0.2604167vw 0px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 0px 1px;
    cursor: pointer;
    overflow: hidden;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberForm>.viewArea>.formArea>.captcha>img#gCodeImg{
        width: calc(9.375vw / 32 * 118);
        height: 9.375vw;
        border-radius: 0px 1.25vw 1.25vw 0px;
    }
}
#wrap>.memberForm>.viewArea>.formArea>.captcha>p{
    color: rgba(255, 255, 255, 1);
    font-size: 1.1459vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: center;
    align-items: center;
    margin: 1vw 0px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberForm>.viewArea>.formArea>.captcha>p{
        font-size: 3.75vw;
        margin: 3.125vw 0px 0px 0px;
    }
}

#wrap>.memberForm>.viewArea>.formArea>.textLine{
    color: rgba(255, 255, 255, 1);
    font-size: 1.1459vw;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberForm>.viewArea>.formArea>.textLine{
        font-size: 3.75vw;
    }
}
#wrap>.memberForm>.viewArea>.formArea>.textLine>p{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}
#wrap>.memberForm>.viewArea>.formArea>.textLine>p:before{
    content: '';
    height: calc(50% - 1px);
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: center;
    align-items: center;
    margin: 0px 0.78125vw 0px 0px;
    position: relative;
}
#wrap>.memberForm>.viewArea>.formArea>.textLine>p:after{
    content: '';
    height: calc(50% - 1px);
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 0px 0.78125vw;
    position: relative;
}

#wrap>.memberForm>.viewArea>.formArea>div>input[type='text'],
#wrap>.memberForm>.viewArea>.formArea>div>input[type='password'],
#wrap>.memberForm>.viewArea>.formArea>div>input[type='tel']{
    width: calc(100% - 0.78125vw * 2);
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberForm>.viewArea>.formArea>div>input[type='text'],
    #wrap>.memberForm>.viewArea>.formArea>div>input[type='password'],
    #wrap>.memberForm>.viewArea>.formArea>div>input[type='tel']{
        width: calc(100% - 3.125vw * 2);
    }
}


#wrap>.memberForm>.viewArea>.formArea>.othersInfo{
    color: rgba(255, 255, 255, 1);
    font-size: 1.1459vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberForm>.viewArea>.formArea>.othersInfo{
        font-size: 3.75vw;
    }
}
#wrap>.memberForm>.viewArea>.formArea>.othersInfo>label.checkBox{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 0px 1.5625vw;
    position: relative;
    cursor: pointer;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberForm>.viewArea>.formArea>.othersInfo>label.checkBox{
        margin: 0px 0px 0px 6vw;
    }
}
#wrap>.memberForm>.viewArea>.formArea>.othersInfo>label.checkBox input[type=checkbox]{
    visibility: hidden;
}
#wrap>.memberForm>.viewArea>.formArea>.othersInfo>label.checkBox span {
    width: 1.302083vw;
    height: 1.302083vw;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 0.2604167vw;
    position: absolute;
    left: -1.5625vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberForm>.viewArea>.formArea>.othersInfo>label.checkBox span {
        width: 5vw;
        height: 5vw;
        border-radius: 1vw;
        left: -6vw;
    }
}
#wrap>.memberForm>.viewArea>.formArea>.othersInfo>label.checkBox:hover input ~ span {
    background-color: rgba(238, 238, 238, 1);
}
#wrap>.memberForm>.viewArea>.formArea>.othersInfo>label.checkBox input:active ~ span {
    background-color: rgba(255, 255, 255, 1);
}
#wrap>.memberForm>.viewArea>.formArea>.othersInfo>label.checkBox input:checked ~ span {
    background-color: rgba(255, 255, 255, 1);
}
#wrap>.memberForm>.viewArea>.formArea>.othersInfo>label.checkBox span:after {
    content: '';
    display: none;
    position: absolute;
}
#wrap>.memberForm>.viewArea>.formArea>.othersInfo>label.checkBox input:checked ~ span:after {
    display: block;
}
#wrap>.memberForm>.viewArea>.formArea>.othersInfo>label.checkBox span:after {
    width: 0.3125vw;
    height: 0.625vw;
    border: solid rgba(0, 0, 0, 1);
    border-width: 0px 0.20833vw 0.20833vw 0px;
    left: 0.416667vw;
    bottom: 0.2604167vw;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberForm>.viewArea>.formArea>.othersInfo>label.checkBox span:after {
        width: 1.2vw;
        height: 2.4vw;
        border-width: 0px 0.8vw 0.8vw 0px;
        left: 1.6vw;
        bottom: 1vw;
    }
}
#wrap>.memberForm>.viewArea>.formArea>.othersInfo a{
    color: rgba(255, 255, 255, 1);
}
#wrap>.memberForm>.viewArea>.formArea>.othersInfo a:hover{
    color: #59B3FF;
}
#wrap>.memberForm>.viewArea>.formArea>.othersInfo a.underline{
    text-decoration: underline;
}


/* =========================================================
 * 會員登入
 * ========================================================= */
#wrap>.memberLogin>.viewArea>.formArea>div.account>input{
    border-radius: 0.2604167vw 0.2604167vw 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberLogin>.viewArea>.formArea>div.account>input{
        border-radius: 1.25vw 1.25vw 0px 0px;
    }
}
#wrap>.memberLogin>.viewArea>.formArea>div.password{
    margin: 1px 0px 0px 0px;
}
#wrap>.memberLogin>.viewArea>.formArea>div.password>input{
    border-radius: 0px 0px 0.2604167vw 0.2604167vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberLogin>.viewArea>.formArea>div.password>input{
        border-radius: 0px 0px 1.25vw 1.25vw;
    }
}

/* =========================================================
 * 註冊會員
 * ========================================================= */
#wrap>.memberJoin>.viewArea>.formArea>div.name{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
#wrap>.memberJoin>.viewArea>.formArea>div.name>input#name{
    border-radius: 0.2604167vw 0px 0px 0.2604167vw;
    margin: 0px 1px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberJoin>.viewArea>.formArea>div.name>input#name{
        border-radius: 1.25vw 0px 0px 1.25vw;
    }
}
#wrap>.memberJoin>.viewArea>.formArea>div.name>input#nickname{
    border-radius: 0px 0.2604167vw 0.2604167vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberJoin>.viewArea>.formArea>div.name>input#nickname{
        border-radius: 0px 1.25vw 1.25vw 0px;
    }
}
#wrap>.memberJoin>.viewArea>.formArea>div.terms,
#wrap>.memberJoin>.viewArea>.formArea>div.motorcadeUser{
    justify-content: flex-start;
    margin: 1vw 0px 0px 0px;
}

/* =========================================================
 * 手機驗證
 * ========================================================= */
#wrap>.memberAuth>.viewArea>.formArea>div.authCodeMessage{
    margin: 1vw 0px 0px 0px;
}

/* =========================================================
 * 首頁
 * ========================================================= */
#wrap>.index{
    width: 100%;
    background: url(/images/indexBackground.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
/*
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.index{
        min-height: 100%;
    }
}
*/
#wrap>.index>.viewArea{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0px;
}
#wrap>.index>.viewArea>nav{
    width: 100%;
    height: 100%;
}
#wrap>.index>.viewArea>nav>ul{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}
#wrap>.index>.viewArea>nav>ul>li{
    /*width: calc(100% / 5);*/
    width: calc(100% / 4);
    height: calc(100% / 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: relative;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.index>.viewArea>nav>ul>li{
        width: calc(100% / 2);
        /*height: calc(100% / 4);*/
        height: calc(calc(100vh - 9vh - 9.375vw) / 4 - 0.5px);
    }
}
#wrap>.index>.viewArea>nav>ul>li:after{
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(0, 0, 0, 0.7)100%
    );
    background-size: 150% 150%;
    background-position: center center;
    position: absolute;
    top: 0%;
    left: 0%;
}
#wrap>.index>.viewArea>nav>ul>li>a{
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}
#wrap>.index>.viewArea>nav>ul>li>a>div{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
}
#wrap>.index>.viewArea>nav>ul>li.alert>a>div:after{
    content: '';
    width: 1.7708vw;
    height: 1.7708vw;
    background: rgba(255, 0, 0, 1);
    border-radius: 0.8854vw;
    position: absolute;
    top: calc(-1.7708vw / 2);
    right: calc(-1.7708vw / 2);
    z-index: 3;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.index>.viewArea>nav>ul>li.alert>a>div:after{
        width: calc((100vh - 9vh - 9.375vw) / 4 * 0.5 * 0.3);
        height: calc((100vh - 9vh - 9.375vw) / 4 * 0.5 * 0.3);
        border-radius: calc((100vh - 9vh - 9.375vw) / 4 * 0.5 * 0.3 / 2);
        top: calc(-1 * (100vh - 9vh - 9.375vw) / 4 * 0.5 * 0.3 / 3);
        right: calc(-1 * (100vh - 9vh - 9.375vw) / 4 * 0.5 * 0.3 / 3);
    }
}
#wrap>.index>.viewArea>nav>ul>li>a>div>img{
    width: 9vw;
    filter: drop-shadow(0.26vw 0.26vw 0.78vw rgba(0, 0, 0, 0.8));
    position: relative;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.index>.viewArea>nav>ul>li>a>div>img{
        width: calc((100vh - 9vh - 9.375vw) / 4 * 0.5);
        filter: drop-shadow(0.632vw 0.632vw 1.896vw rgba(0, 0, 0, 0.8));
    }
}
#wrap>.index>.viewArea>nav>ul>li>a:active>div>img{
    filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.8));
    top: 1%;
    left: 1%;
}
#wrap>.index>.viewArea>nav>ul>li>a>h2{
    color: rgba(255, 255, 255, 1);
    font-size: 2.34375vw;
    font-weight: normal;
    text-align: center;
    margin: 1vw 0px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.index>.viewArea>nav>ul>li>a>h2{
        font-size: 4.6875vw;
        margin: 1.5625vw 0px 0px 0px;
    }
}



/* =========================================================
 * 血統世系
 * ========================================================= */
#wrap>.bloodlineFunction{
    width: 100%;
    background-color: rgba(197, 58, 46, 1);
    background-image: url(/images/bloodlineFunctionBackground.svg);
    background-repeat: no-repeat;
    background-size: auto 36.625104167vw;
    background-position: right -3.125vw bottom -50px;
    color: rgba(255, 255, 255, 1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    position: relative;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction{
        background-size: 73vw auto;
        background-position: right bottom;
    }
}
#wrap>.bloodlineFunction>.leftArea{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    padding: 3% 3.125vw 0px 3.125vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction>.leftArea>.header{
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    #wrap>.bloodlineFunction>.leftArea>.header>.buttons{
        width: 100%;
    }
    #wrap>.bloodlineFunction>.leftArea>.header>.buttons>input[type='button']{
        width: 100%;
        margin: 3.125vw 0px 0px 0px;
    }
}
#wrap>.page .noDataMsg{
    width: calc(100% - 1.4016vw * 2);
    background: #FFFFFF;
    color: #000000;
    font-size: 1.1459vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: calc(1.4016vw * 2) 1.4016vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.page .noDataMsg{
        width: calc(100% - 3.125vw * 2);
        font-size: 3.75vw;
        padding: calc(3.125vw * 2) 3.125vw;
        margin: 3.125vw 0px 0px 0px;
    }
}
#wrap>.bloodlineFunction>.leftArea>div.bloodlineData{
    width: 100%;
    margin: 0px 0px 3% 0px;
}
#wrap>.bloodlineFunction>.leftArea>div.bloodlineData.newStyle{
    width: 62.3958vw;
    max-height: calc(100vh - 9vh - 9vh * 2 - 2.601467vw);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px;
    overflow-x: auto;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction>.leftArea>div.bloodlineData.newStyle{
        width: calc(100vw - 3.125vw * 2);
        max-height: calc(100vh - 9vh - 37.5vw - 3vh * 4 - 9.375vw);
        margin: 3.125vw 0px 0px 0px;
    }
}
#wrap>.bloodlineFunction>.leftArea>.newStyle>.normalTabs{
    display: none;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction>.leftArea .normalTabs{
        margin: 3.125vw 0px 0px 0px;
    }
}
#wrap>.bloodlineFunction>.leftArea>.newStyle>.normalTable{
    width: auto;
    height: calc(100% - 4.1667vw);
    vertical-align: top;
    padding: calc(4.1667vw + 2px) 0px 0px 0px;
    position: relative;
    overflow-y: auto;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction>.leftArea>.newStyle>.normalTable{
        padding: calc(8.4375vw + 2px) 0px 0px 0px;
    }
}
#wrap>.bloodlineFunction>.leftArea>.newStyle .normalTable>.tr.theader{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 2;
}
#wrap>.bloodlineFunction>.leftArea .normalTable>.tr>.th.bloodline,
#wrap>.bloodlineFunction>.leftArea .normalTable>.tr>.th.body1,
#wrap>.bloodlineFunction>.leftArea .normalTable>.tr>.th.body2,
#wrap>.bloodlineFunction>.leftArea .normalTable>.tr>.td.bloodline,
#wrap>.bloodlineFunction>.leftArea .normalTable>.tr>.td.body1,
#wrap>.bloodlineFunction>.leftArea .normalTable>.tr>.td.body2{
    display: none;
}
#wrap>.bloodlineFunction>.leftArea .normalTable.bloodline>.tr>.th.basic,
#wrap>.bloodlineFunction>.leftArea .normalTable.bloodline>.tr>.th.body1,
#wrap>.bloodlineFunction>.leftArea .normalTable.bloodline>.tr>.th.body2,
#wrap>.bloodlineFunction>.leftArea .normalTable.bloodline>.tr>.td.basic,
#wrap>.bloodlineFunction>.leftArea .normalTable.bloodline>.tr>.td.body1,
#wrap>.bloodlineFunction>.leftArea .normalTable.bloodline>.tr>.td.body2{
    display: none;
}
#wrap>.bloodlineFunction>.leftArea .normalTable.bloodline>.tr>.th.bloodline,
#wrap>.bloodlineFunction>.leftArea .normalTable.bloodline>.tr>.td.bloodline{
    display: table-cell;
}
#wrap>.bloodlineFunction>.leftArea .normalTable.body1>.tr>.th.basic,
#wrap>.bloodlineFunction>.leftArea .normalTable.body1>.tr>.th.bloodline,
#wrap>.bloodlineFunction>.leftArea .normalTable.body1>.tr>.th.body2,
#wrap>.bloodlineFunction>.leftArea .normalTable.body1>.tr>.td.basic,
#wrap>.bloodlineFunction>.leftArea .normalTable.body1>.tr>.td.bloodline,
#wrap>.bloodlineFunction>.leftArea .normalTable.body1>.tr>.td.body2{
    display: none;
}
#wrap>.bloodlineFunction>.leftArea .normalTable.body1>.tr>.th.body1,
#wrap>.bloodlineFunction>.leftArea .normalTable.body1>.tr>.td.body1{
    display: table-cell;
}
#wrap>.bloodlineFunction>.leftArea .normalTable.body2>.tr>.th.basic,
#wrap>.bloodlineFunction>.leftArea .normalTable.body2>.tr>.th.bloodline,
#wrap>.bloodlineFunction>.leftArea .normalTable.body2>.tr>.th.body1,
#wrap>.bloodlineFunction>.leftArea .normalTable.body2>.tr>.td.basic,
#wrap>.bloodlineFunction>.leftArea .normalTable.body2>.tr>.td.bloodline,
#wrap>.bloodlineFunction>.leftArea .normalTable.body2>.tr>.td.body1{
    display: none;
}
#wrap>.bloodlineFunction>.leftArea .normalTable.body2>.tr>.th.body2,
#wrap>.bloodlineFunction>.leftArea .normalTable.body2>.tr>.td.body2{
    display: table-cell;
}
#wrap>.bloodlineFunction>.leftArea>.newStyle>.normalTable>.tr>.th,
#wrap>.bloodlineFunction>.leftArea>.newStyle>.normalTable>.tr>.td{
    min-width: 6vw !important;
    max-width: 30vw;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: table-cell;
    padding: 1.4016vw;
    overflow:hidden;
}
#wrap>.bloodlineFunction>.leftArea>.newStyle>.normalTable>.tr>.td{
    border-bottom: 1px solid rgb(255, 255, 255);
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction>.leftArea>.newStyle>.normalTable>.tr>.th{
        min-width: 10vw !important;
        max-width: 60vw;
        padding: 1.5625vw 3.125vw;
    }
    #wrap>.bloodlineFunction>.leftArea>.newStyle>.normalTable>.tr>.td{
        min-width: 10vw !important;
        max-width: 60vw;
        min-height: 12.5vw;
        padding: 1.5625vw 3.125vw;
    }
}
#wrap>.bloodlineFunction>.leftArea>.newStyle>.normalTable>.tr>.th:nth-child(even),
#wrap>.bloodlineFunction>.leftArea>.newStyle>.normalTable>.tr>.td:nth-child(even){
    background: #FFFFFF;
}
#wrap>.bloodlineFunction>.leftArea>.newStyle>.normalTable>.tr>.th:nth-child(odd),
#wrap>.bloodlineFunction>.leftArea>.newStyle>.normalTable>.tr>.td:nth-child(odd){
    background: #EEEEEE;
}

#wrap>.bloodlineFunction>.leftArea .normalTable>.tr>.td.photo{
    /*width: 7.5vw;*/
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction>.leftArea>.newStyle>.normalTable>.tr>.td.photo{
        /*min-width: 20vw;*/
    }
}
#wrap>.bloodlineFunction>.leftArea .normalTable>.tr>.td.photo>.photo{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
#wrap>.bloodlineFunction>.leftArea .normalTable>.tr>.td.photo>.photo{
    width: 7.5vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction>.leftArea .normalTable>.tr>.td.photo>.photo{
        width: 20vw;
    }
}
#wrap>.bloodlineFunction>.leftArea .normalTable>.tr>.td.photo>.photo:before{
    content: '';
    display: block;
    margin-top: calc(100% / 3 * 2);
}
#wrap>.bloodlineFunction>.leftArea .normalTable>.tr>.td.photo>.photo img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: flex;
    position: absolute;
    top: 0px;
    left: 0px;
}
#wrap>.bloodlineFunction>.leftArea .normalTable>.tr>.td.photo>.photo.onerror{
    background: rgba(169, 169, 169, 1);
    background-image: url(/images/pigeonDefaultPhoto.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
#wrap>.bloodlineFunction>.leftArea .normalTable>.tr>.td.photo>.photo.onerror img{
    display: none;
}
#wrap>.bloodlineFunction>.leftArea .normalTable>.tr>.td.actionArea{
    width: 5vw;
}

#wrap>.bloodlineFunction .normalTabs>li{
    background: rgba(142, 31, 39, 1);
}
#wrap>.bloodlineFunction .normalTabs>li.current{
    background: rgba(255, 255, 255, 1);
}
#wrap>.bloodlineFunction>.rightArea{
    width: calc(31.25vw - 3.125vw * 2);
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6vh 3.125vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction>.rightArea{
        width: calc(100% - 3.125vw * 2);
        height: calc(100% - 6vh * 2);
        display: none;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 3;
    }
    #wrap>.bloodlineFunction>.rightArea.open{
        display: flex;
    }
}
#wrap>.bloodlineFunction>.rightArea>.searchArea{
    width: 100%;
}
#wrap>.bloodlineFunction>.rightArea>.searchArea>h2{
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    margin: 0px 0px 1.041667vw 0px;
    padding: 0px 0px 1.041667vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction>.rightArea>.searchArea>h2{
        margin: 0px 0px 3.125vw 0px;
        padding: 0px 0px 3.125vw 0px;
    }
}
#wrap>.bloodlineFunction>.rightArea>.searchArea>.form{
    width: 100%;
    margin: 0px 0px 1.041667vw 0px;
}
#wrap>.bloodlineFunction>.rightArea>.searchArea>.form>li{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 0.52083vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction>.rightArea>.searchArea>.form>li{
        margin: 3.125vw 0px;
    }
}
#wrap>.bloodlineFunction>.rightArea>.searchArea>.form>li>input[type='text']{
    flex-grow: 1;
    flex-shrink: 1;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction>.rightArea>.searchArea input[type='button']{
        margin: 3.125vw 0px;
    }
}
#wrap>.bloodlineFunction>.rightArea>.searchArea>.form>li>select{
    flex-grow: 1;
    flex-shrink: 1;
}

#wrap>.bloodlineFunction>.viewArea{
    width: calc(100% - 6.25vw * 2);
    max-width: 1000px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 6% 6.25vw;
}
#wrap>.bloodlineFunction>.viewArea>.blockArea>.dataArea>.dataRow>.photo{
    flex-wrap: wrap;
}
#wrap>.bloodlineFunction>.viewArea>.blockArea>.dataArea>.dataRow>.photo>.photo{
    width: calc(900px - 6.25vw - 15vw);
    min-height: calc((900px - 6.25vw - 15vw) / 900 * 600);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    margin: 0px;
    overflow: hidden;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction>.viewArea>.blockArea>.dataArea>.dataRow>.photo>.photo{
        width: calc(100vw - 6.25vw * 2);
        min-height: calc((100vw - 6.25vw * 2) / 900 * 600);
    }
}
#wrap>.bloodlineFunction>.viewArea>.blockArea>.dataArea>.dataRow>.photo>.photo>img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: flex;
}
#wrap>.bloodlineFunction>.viewArea>.blockArea>.dataArea>.dataRow>.photo>input[type='file']{
    width: calc(100% - 6.25vw - 0.78125vw * 2);
    background: rgba(255, 255, 255, 1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: calc(0.52083vw * 2) 0px 0px 6.25vw;
    padding: 0px 0.78125vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction>.viewArea>.blockArea>.dataArea>.dataRow>.photo>input[type='file']{
        width: calc(100% - 0.78125vw * 2);
        margin: 3.125vw 0px 0px 0px;
        padding: 0px 0.78125vw;
    }
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea.header,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea.header{
    flex-wrap: wrap;
    flex-direction: row;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea.header,
    #wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea.header{
        flex-direction: column;
    }
    html.bloodlineEdit #wrap>.bloodlineFunction>.viewArea>.blockArea.header>.dataArea{
        width: 100%;
    }
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea.header>.buttons{
    width: 50%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 1;
    justify-content: flex-end;
    align-items: center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea.header>.buttons,
    #wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea.header>.buttons{
        width: 100%;
        border-top: 1px solid #FFFFFF;
        margin: 3.125vw 0px 0px 0px;
        padding: 3.125vw 0px 0px 0px;
        order: 3;
    }
}

#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.photoArea{
    width: 50%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
}
html.landscape #wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea.header>.photoArea{
    display: none;
}
html.portrait #wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea.header>.photoArea{
    width: 100%;
    order: 2;
}
html.portrait #wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea.row>.photoArea{
    display: none;
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.photoArea>.photo{
    width: 100%;
    min-width: 30vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.photoArea>.photo:before{
    content: '';
    display: block;
    margin-top: calc(100% / 3 * 2);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.photoArea>.photo>img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: flex;
    position: absolute;
    top: 0px;
    left: 0px;
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.photoArea>.photo.onerror{
    background: rgba(169, 169, 169, 1);
    background-image: url(/images/pigeonDefaultPhoto.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.photoArea>.photo.onerror>img{
    display: none;
}

@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea>.normalTable>.theader>.th,
    #wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea>.normalTable>.theader>.th{
        flex-grow: 1;
    }
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea>.normalTable>.theader>.date,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea>.normalTable>.theader>.date{
    width: 5%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea>.normalTable>.tr>.date,
    #wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea>.normalTable>.tr>.date{
        display: none;
    }
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea>.normalTable>.theader>.name,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea>.normalTable>.theader>.name{
    width: 30%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea>.normalTable>.theader>.name,
    #wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea>.normalTable>.theader>.name{
        width: auto;
    }
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea>.normalTable>.theader>.weather,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea>.normalTable>.theader>.weather{
    width: 25%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea>.normalTable>.theader>.weather,
    #wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea>.normalTable>.theader>.weather{
        width: auto;
    }
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea>.normalTable>.tr>.td,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea>.normalTable>.tr>.td{
    vertical-align: top;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea>.normalTable>.tr>.td,
    #wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea>.normalTable>.tr>.td{
        text-align: left;
    }
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea>.normalTable>.tr>.td p.date,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea>.normalTable>.tr>.td p.date{
    display: none;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea>.normalTable>.tr>.td p.date,
    #wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea>.normalTable>.tr>.td p.date{
        display: inline;
    }
}

#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>div,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>div{
    text-align: left;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather:before{
    content: '';
    width: 1.5625vw;
    height: 1.5625vw;
    background-image: url(/images/weather01.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    display: flex;
    flex-shrink: 0;
    margin-right: 20px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather:before,
    #wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather:before{
        width: 5vw;
        height: 5vw;
        margin-right: 3.125vw;
    }
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather01:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather01:before{
    background-image: url(/images/weather01.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather02:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather02:before{
    background-image: url(/images/weather02.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather03:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather03:before{
    background-image: url(/images/weather03.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather04:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather04:before{
    background-image: url(/images/weather04.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather05:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather05:before,
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather06:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather06:before{
    background-image: url(/images/weather05.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather07:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather07:before{
    background-image: url(/images/weather06.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather08:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather08:before{
    background-image: url(/images/weather07.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather09:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather09:before,
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather10:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather10:before,
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather12:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather12:before,
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather13:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather13:before,
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather20:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather20:before,
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather29:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather29:before{
    background-image: url(/images/weather08.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather11:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather11:before,
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather14:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather14:before,
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather30:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather30:before{
    background-image: url(/images/weather09.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather15:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather15:before,
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather22:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather22:before{
    background-image: url(/images/weather10.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather16:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather16:before,
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather17:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather17:before{
    background-image: url(/images/weather11.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather18:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather18:before,
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather34:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather34:before{
    background-image: url(/images/weather12.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather19:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather19:before{
    background-image: url(/images/weather13.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather21:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather21:before,
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather33:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather33:before{
    background-image: url(/images/weather14.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather23:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather23:before{
    background-image: url(/images/weather15.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather24:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather24:before{
    background-image: url(/images/weather16.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather25:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather25:before,
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather26:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather26:before,
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather27:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather27:before{
    background-image: url(/images/weather17.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather28:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather28:before{
    background-image: url(/images/weather18.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather31:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather31:before,
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather32:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather32:before{
    background-image: url(/images/weather19.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather35:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather35:before,
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather36:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather36:before,
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather41:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather41:before{
    background-image: url(/images/weather20.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather37:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather37:before{
    background-image: url(/images/weather21.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather38:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather38:before{
    background-image: url(/images/weather22.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather39:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather39:before{
    background-image: url(/images/weather23.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather40:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather40:before{
    background-image: url(/images/weather24.svg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.weather42:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.weather42:before{
    background-image: url(/images/weather25.svg);
}

#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.wind:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.wind:before{
    content: '';
    width: 1.5625vw;
    height: 1.5625vw;
    background-image: url(/images/weatherWind.svg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center center;
    display: flex;
    flex-shrink: 0;
    margin-right: 20px;
    transform-origin: 50% 50%;
    position: relative;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.wind:before,
    #wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.wind:before{
        width: 5vw;
        height: 5vw;
        margin-right: 3.125vw;
    }
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.wind.wind1:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.wind.wind1:before{
    transform:rotate(180deg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.wind.wind2:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.wind.wind2:before{
    transform:rotate(-135deg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.wind.wind3:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.wind.wind3:before{
    transform:rotate(-90deg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.wind.wind4:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.wind.wind4:before{
    transform:rotate(-45deg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.wind.wind6:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.wind.wind6:before{
    transform:rotate(45deg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.wind.wind7:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.wind.wind7:before{
    transform:rotate(90deg);
}
#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .weatherData>.wind.wind8:before,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .weatherData>.wind.wind8:before{
    transform:rotate(135deg);
}

#wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .noDataMsg,
#wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .noDataMsg{
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.2604167vw;
    color: rgba(255, 255, 255, 1);
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineDetail>.viewArea>.blockArea>.dataArea .noDataMsg,
    #wrap>.bloodlineFunction.bloodlineEdit>.viewArea>.blockArea>.dataArea .noDataMsg{
        border-radius: 1.25vw;
    }
}
#wrap>.bloodlineFunction .viewArea>.blockArea>.dataArea>.normalTable{
    width: calc(100% - 20px * 2);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.2604167vw;
    color: rgba(255, 255, 255, 1);
    font-size: 1.14583vw;
    display: table;
    margin: 1.04167vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction .viewArea>.blockArea>.dataArea>.normalTable{
        width: 100%;
        background: none;
        border-radius: 1.25vw;
        font-size: 3.75vw;
        padding: 0px;
        margin: 0px;
    }
}
#wrap>.bloodlineFunction .viewArea>.blockArea>.dataArea>.normalTable>.tr{
    display: table-row;
}
#wrap>.bloodlineFunction .viewArea>.blockArea>.dataArea>.normalTable>.tr>.th{
    min-height: 2.601467vw;
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    display: table-cell;
}
#wrap>.bloodlineFunction .viewArea>.blockArea>.dataArea>.normalTable>.tr>.td{
    min-height: 2.601467vw;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    display: table-cell;
}
#wrap>.bloodlineFunction .viewArea>.blockArea>.dataArea>.normalTable>.tr:last-child>.td{
    border-bottom: 0px;
}
#wrap>.bloodlineFunction .viewArea>.blockArea>.dataArea>.normalTable>.tr>.td textarea[name='signUpMemo']{
    width: calc(100% - 0.78125vw * 2);
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction .viewArea>.blockArea>.dataArea>.normalTable>.tr>.td textarea[name='signUpMemo']{
        width: calc(100% - 5px * 2);
        height: 100%;
        font-size: 3.75vw;
        padding: 5px;
    }
}

#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea{
    width: 85%;
    max-width: none;
    padding: 6% 0px;
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.blockArea{
    max-width: none;
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea{
    width: calc(100% - 4vw * 2);
    background: rgba(255, 255, 255, 1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 4vw;
    overflow: hidden;
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.topArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.topArea>.parentArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea .nameCard{
    width: calc(250px - 10px * 2);
    min-height: calc(300px - 10px * 2);
    background: rgba(226, 226, 226, 1);
    color: rgba(0, 0, 0, 1);
    margin: 0px 25px;
    padding: 10px;
    cursor: pointer;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea .nameCard{
        /*width: calc(110px - 10px * 2);*/
        width: calc(50% - 10px * 2 - 10px);
        min-height: calc(180px - 10px * 2);
        margin: 0px 10px;
    }
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.topArea>.parentArea .nameCard{
        height: calc(100% - 10px * 2);
    }
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea .nameCard:hover{
    background: rgba(210, 210, 210, 1);
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea .nameCard:first-child{
    margin-left: 0px;
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea .nameCard:last-child{
    margin-right: 0px;
}

#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea .nameCard>.photo{
    width: 230px;
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea .nameCard>.photo:before{
    content: '';
    display: block;
    margin-top: calc(100% / 3 * 2);
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea .nameCard>.photo>img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: flex;
    position: absolute;
    top: 0px;
    left: 0px;
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea .nameCard>.photo.onerror{
    background: rgba(169, 169, 169, 1);
    background-image: url(/images/pigeonDefaultPhoto.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea .nameCard>.photo.onerror>img{
    display: none;
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea .nameCard>h3{
    height: 34px;
    font-size: 30px;
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    padding: 0px 30px 0px 0px;
    position: relative;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea .nameCard>h3{
        height: auto;
        font-size: 14px;
    }
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.topArea>.selfArea .nameCard>h3{
        height: 34px;
        font-size: 30px;
    }
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea .nameCard.male>h3:after{
    content: '';
    width: 30px;
    height: 30px;
    background-color: rgba(0, 140, 193, 1);
    background-image: url(/images/iconMale.svg);
    background-repeat: no-repeat;
    background-size: auto 60%;
    background-position: center center;
    position: absolute;
    top: 4px;
    right: 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea .nameCard.male>h3:after{
        width: 15px;
        height: 15px;
        top: 2px;
    }
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.topArea>.selfArea .nameCard.male>h3:after{
        width: 30px;
        height: 30px;
    }
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea .nameCard.female>h3:after{
    content: '';
    width: 30px;
    height: 30px;
    background-color: rgba(197, 58, 46, 1);
    background-image: url(/images/iconFemale.svg);
    background-repeat: no-repeat;
    background-size: auto 60%;
    background-position: center center;
    position: absolute;
    top: 4px;
    right: 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea .nameCard.female>h3:after{
        width: 15px;
        height: 15px;
        top: 2px;
    }
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.topArea>.selfArea .nameCard.female>h3:after{
        width: 30px;
        height: 30px;
    }
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea .nameCard>h2{
        font-size: 14px;
    }
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.topArea>.selfArea .nameCard>h2{
        font-size: 32px;
    }
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea .nameCard>.buttonArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 10px 0px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.topArea>.parentArea .nameCard>.buttonArea,
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea .nameCard>.buttonArea{
        flex-direction: column;
    }
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea .nameCard>.buttonArea>input[type='button']{
    width: calc((100% - 10px) / 2);
    min-width: auto;
    height: 2.0833vw;
    filter: none;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea .nameCard>.buttonArea>input[type='button']{
        height: 9.375vw;
        margin: 0px;
    }
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.topArea>.parentArea .nameCard>.buttonArea>input[type='button'],
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea .nameCard>.buttonArea>input[type='button']{
        width: 100%;
    }
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea .nameCard>.buttonArea>input[type='button']:last-of-type{
    margin: 0px 0px 0px 10px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.topArea>.parentArea .nameCard>.buttonArea>input[type='button']:last-of-type,
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea .nameCard>.buttonArea>input[type='button']:last-of-type{
        margin: 10px 0px 0px 0px;
    }
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea .nameCard>.buttonArea>input[type='button']:only-child{
    margin: 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.topArea>.parentArea .nameCard>.buttonArea>input[type='button']:only-child,
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea .nameCard>.buttonArea>input[type='button']:only-child{
        margin: 0px;
    }
}

#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.topArea>.lineArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.topArea>.lineArea:last-child{
        display: none;
    }
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.topArea>.lineArea>.top,
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.topArea>.lineArea>.bottom{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.topArea>.lineArea>.top>.line{
    width: calc(300px - 1px * 2);
    height: calc(50px - 1px);
    border-right: 2px solid rgba(0, 0, 0, 1);
    border-bottom: 2px solid rgba(0, 0, 0, 1);
    border-left: 2px solid rgba(0, 0, 0, 1);
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.topArea>.lineArea>.top>.line{
        width: calc(50% + 10px - 1px * 2);
    }
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.topArea>.lineArea>.bottom>.line{
    width: calc(50% - 1px);
    height: calc(50px - 1px);
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.topArea>.lineArea>.bottom>.line:first-child{
    border-right: 2px solid rgba(0, 0, 0, 1);
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.topArea>.selfArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.topArea>.selfArea .nameCard{
    background: rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 1);
    cursor: default;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.topArea>.selfArea .nameCard{
        width: calc(250px - 10px * 2);
        max-width: calc(100% - 10px * 2);
        min-height: calc(300px - 10px * 2);
    }
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea{
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    padding: 50px 0px;
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea{
        width: 100%;
        flex-wrap: wrap;
        padding: 25px 0px 0px 0px;
        overflow: auto;
    }
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea:before{
    content: '';
    width: calc(((250px * 2 + 50px) - 300px) / 2 - 1px);
    border-top: 2px solid rgba(255, 255, 255, 1);
    position: absolute;
    top: 0px;
    left: 0px;
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea>.nameCard{
    position: relative;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea>.nameCard{
        margin-top: 25px;
    }
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea>.nameCard:nth-child(odd){
        margin-left: 0px;
    }
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea>.nameCard:nth-child(even){
        margin-right: 0px;
    }
    /*
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea>.nameCard:nth-child(-n+2){
        margin-top: 0px;
    }
    */
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea>.nameCard:before{
    content: '';
    width: calc((250px + 50px) / 2);
    height: calc(50px - 1px);
    border-top: 2px solid rgba(0, 0, 0, 1);
    border-left: 2px solid rgba(0, 0, 0, 1);
    position: absolute;
    top: -50px;
    left: calc(250px / 2 - 1px);
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea>.nameCard:before{
        width: 10px;
        height: 1px;
        border-left: 0px;
        top: calc(50% - 1px);
        left: auto;
        right: -10px;
    }
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea>.nameCard:nth-child(even):before{
        left: -10px;
        right: auto;
    }
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea>.nameCard:after{
    content: '';
    width: calc((250px + 50px) / 2);
    height: calc(50px - 1px);
    border-top: 2px solid rgba(0, 0, 0, 1);
    position: absolute;
    top: -50px;
    right: calc(250px / 2 - 1px);
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea>.nameCard:after{
        width: 1px;
        height: calc(100% + 25px + 30px);
        border-top: 0px;
        border-right: 2px solid rgba(0, 0, 0, 1);
        top: calc(-50% - 25px - 30px);
        right: -10px;
    }
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea>.nameCard:nth-child(even):after{
        border-right: 0px;
        left: -10px;
        right: 0px;
    }
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea>.nameCard:first-child{
    margin-left: 0px;
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea>.nameCard:first-child:after{
    width: 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea>.nameCard:first-child:after{
        width: 1px;
    }
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea>.nameCard:last-child{
    margin-right: 0px;
}
#wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea>.nameCard:last-child:before{
    width: 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea>.nameCard:last-child:before{
        width: 10px;
    }
    #wrap>.bloodlineFunction.bloodlineGenealogy>.viewArea>.bloodlineGenealogyArea>.bottomArea>.nameCard:last-child:nth-child(even):before{
        width: 10px;
        height: 1px;
    }
}


/* =========================================================
 * 鴿車行程
 * ========================================================= */
#wrap>.motorcadeFunction{
    width: 100%;
    background-color: rgba(44, 130, 58, 1);
    background-image: url(/images/motorcadeFunctionBackground.svg);
    background-repeat: no-repeat;
    background-size: auto 29.21146vw;
    background-position: right -0.9028125vw bottom -50px;
    color: rgba(255, 255, 255, 1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction{
        background-size: 73vw auto;
        background-position: right bottom;
    }
}
#wrap>.motorcadeFunction>.viewArea{
    width: calc(100% - 6.25vw * 2);
    max-width: 1000px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 6% 6.25vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea{
        width: calc(100% - 3.125vw * 2);
        padding: 6% 3.125vw;
    }
}
#wrap>.motorcadeFunction>.viewArea .normalTabs>li{
    max-width: calc((100% - 1px) / 2);
    background: rgba(36, 94, 58, 1);
}
#wrap>.motorcadeFunction>.viewArea .normalTabs>li:only-child{
    max-width: calc((100% - 1px * 2) / 3);
    background: rgba(36, 94, 58, 1);
}
#wrap>.motorcadeFunction>.viewArea .normalTabs>li.current{
    background: rgba(255, 255, 255, 1);
}
#wrap>.motorcadeFunction.motorcade>.viewArea>.blockArea{
    padding: 2.0833vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction.motorcade>.viewArea>.blockArea{
        padding: 6.25vw 0px;
    }
}
#wrap>.motorcadeFunction.motorcade>.viewArea>.normalTabs + .blockArea{
    padding: 0px 0px 2.0833vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction.motorcade>.viewArea>.normalTabs + .blockArea{
        padding: 0px 0px 6.25vw 0px;
    }
}
#wrap>.motorcadeFunction.motorcade>.viewArea>.blockArea>.motorcadeDetail>.dataArea .buttonArea{
    border-top: 1px solid #000000;
    padding: 10px;
    margin: 10px 0px 0px 0px;
}

#wrap>.motorcadeFunction>.viewArea .motorcadeDetail{
    width: calc(100% - 30px * 2);
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 1);
    font-size: 1.04167vw;
    text-align: left;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 30px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea .motorcadeDetail{
        width: calc(100% - 3.125vw * 2);
        font-size: 4.375vw;
        padding: 3.125vw;
    }
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>h3{
    width: 100%;
    color: rgba(197, 58, 46, 1);
    font-size: 1.6667vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 0px 1.5625vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea .motorcadeDetail>h3{
        font-size: 4.375vw;
    }
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>h2{
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 1);
    font-size: 1.6667vw;
    margin: 0px 0px 0.52083vw 0px;
    padding: 0px 0px 1.04167vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea .motorcadeDetail>h2{
        font-size: 4.375vw;
    }
}
#wrap>.page>.viewArea>.blockArea>.dataArea.form>.dataRow>.name,
#wrap>.page>.viewArea>.blockArea>.dataArea.form>.dataRow>.location{
    flex-wrap: wrap;
}
#wrap>.motorcadeFunction>.viewArea .dataArea.form>.dataRow>.name>input{
    margin: 0px;
}
#wrap>.motorcadeFunction>.viewArea .dataArea.form>.dataRow>.name>select:not([style*='display: none'])~input,
#wrap>.motorcadeFunction>.viewArea .dataArea.form>.dataRow>.location>select~input{
    width: calc(100% - (6.25vw + 20px) - 0.78125vw * 2);
    margin: calc(0.52083vw * 2) 0px 0px calc(6.25vw + 20px);
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea .dataArea.form>.dataRow>.name>select:not([style*='display: none'])~input,
    #wrap>.motorcadeFunction>.viewArea .dataArea.form>.dataRow>.location>select~input{
        width: calc(100% - 24vw - 3.125vw * 2);
        margin: calc(1.5625vw * 2) 0px 0px 24vw;
    }
}
#wrap>.motorcadeFunction>.viewArea>.itinerary>.dataArea.form{
    position: relative;
    /*padding: 0px 0px calc(2.601467vw + 0.52083vw  * 2) 0px;*/
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea>.itinerary>.dataArea{
        /*padding: 0px 0px calc(9.375vw + 1.5625vw  * 2) 0px;*/
    }
}
#wrap>.motorcadeFunction>.viewArea>.itinerary>.dataArea.form>ul{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
#wrap>.motorcadeFunction>.viewArea>.itinerary>.dataArea.form>ul>li{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0.52083vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea>.itinerary>.dataArea.form>ul>li{
        flex-wrap: wrap;
        margin: 3.125vw 0px;
    }
}
#wrap>.motorcadeFunction>.viewArea>.itinerary>.dataArea.form>ul>li>select.city,
#wrap>.motorcadeFunction>.viewArea>.itinerary>.dataArea.form>ul>li>select.city:last-of-type{
    width: auto;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 2;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 10px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea>.itinerary>.dataArea.form>ul>li>select.city,
    #wrap>.motorcadeFunction>.viewArea>.itinerary>.dataArea.form>ul>li>select.city:last-of-type{
        margin: 0px;
    }
}
#wrap>.motorcadeFunction>.viewArea>.itinerary>.dataArea.form>ul>li>input.location{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea>.itinerary>.dataArea.form>ul>li>input.location{
        flex-basis: calc(100% - 3.125vw * 2);
        margin: 10px 0px 0px 0px;
    }
    #wrap>.motorcadeFunction>.viewArea>.itinerary>.dataArea.form>ul>li>input.time{
        margin: 10px 10px 0px 0px;
    }
    #wrap>.motorcadeFunction>.viewArea>.itinerary>.dataArea.form>ul>li>input[type='button']{
        margin: 10px 0px 0px 0px;
    }
}
#wrap>.motorcadeFunction>.viewArea>.itinerary>.buttonArea>input[type='button']{
    margin: 0.52083vw 0px;
    place-self: flex-end;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea>.itinerary>.buttonArea>input[type='button']{
        margin: 1.5625vw 0px;
    }
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea>.itinerary ul>li>input[type='button']{
        padding: 0px 1.5625vw;
    }
}

#wrap>.motorcadeFunction>.viewArea div.message{
    color: rgb(255, 255, 255);
    font-size: 1.823vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 20px;
}
#wrap>.motorcadeFunction>.viewArea .dataArea.signUpList{
    width: calc(100% - 30px * 2);
    background: rgba(255, 255, 255, 1);
    border-top: 1px solid #000000;
    color: rgba(0, 0, 0, 1);
    font-size: 1.04167vw;
    text-align: left;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 30px;
    margin: 10px 0px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea .dataArea.signUpList{
        width: 100%;
        font-size: 4.375vw;
        padding: 0px;
        margin: 6.25vw 0px 0px 0px;
    }
}
#wrap>.motorcadeFunction>.viewArea .signUpList>h3{
    width: 100%;
    color: rgba(197, 58, 46, 1);
    font-size: 1.6667vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 0px 1.5625vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea .signUpList>h3{
        font-size: 4.375vw;
        margin: 6.25vw 0px 0px 0px;
    }
}
#wrap>.motorcadeFunction>.viewArea .signUpList>h2{
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 1);
    font-size: 1.6667vw;
    margin: 0px 0px 0.52083vw 0px;
    padding: 0px 0px 1.04167vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea .signUpList>h2{
        font-size: 4.375vw;
    }
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea.signUpList .normalTable{
    background: rgba(44, 130, 58, 1);
    border-radius: 0.2604167vw;
    color: #FFFFFF;
    font-size: 1.14583vw;
    display: table;
    margin: 1.04167vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea.signUpList .normalTable{
        width: 100%;
        background: none;
        border-radius: 1.25vw;
        font-size: 3.75vw;
        color: #000000;
        padding: 0px;
        margin: 0px;
    }
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea.signUpList .normalTable>.tr{
    display: table-row;
    border-bottom: none;
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea.signUpList .normalTable>.tr>.th{
    min-height: 2.601467vw;
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    display: table-cell;
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea.signUpList .normalTable>.tr>.td{
    min-height: 2.601467vw;
    display: table-cell;
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea.signUpList .normalTable>.tr>.td a{
    color: #FFFFFF;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea.signUpList .normalTable>.tr>.td a{
        color: -webkit-link;
    }
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea.signUpList .noDataMsg{
    background: rgba(44, 130, 58, 1);
    border-radius: 0.2604167vw;
    color: #FFFFFF;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea.signUpList .noDataMsg{
        border-radius: 1.25vw;
    }
}
#wrap>.motorcadeFunction>.viewArea .dataArea{
    width: 100%;
}
#wrap>.motorcadeFunction>.viewArea .dataArea>ul{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#wrap>.motorcadeFunction>.viewArea .dataArea>ul>li{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0.52083vw 0px;
    position: relative;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea>ul>li{
        margin: 1.5625vw 0px;
    }
    #wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea>ul>li.photo{
        padding: calc((100vw - 3.125vw * 2 - 3.125vw * 2) / 3 * 2 + 3.75vw) 0px 0px 0px;
    }
    #wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea>ul>li.location,
    #wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea>ul>li.map,
    #wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea>ul>li.video{
        flex-direction: column;
    }
    #wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea>ul>li.location>label,
    #wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea>ul>li.map>label,
    #wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea>ul>li.video>label{
        flex-basis: unset;
        margin: 0px 0px calc(1.5625vw * 2) 0px;
    }
    #wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea>ul>li.map>.full,
    #wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea>ul>li.video>.full{
        width: 100%;
    }
    #wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea>ul>li.map>.full>img,
    #wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea>ul>li.video>.full>video{
        width: 100%;
    }
}
#wrap>.motorcadeFunction>.viewArea .dataArea>ul>li>label{
    min-height: 2.601467vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-basis: 80px;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 20px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea .dataArea>ul>li>label{
        min-height: unset;
        flex-basis: 18.75vw;
        flex-grow: 0;
    }
}
#wrap>.motorcadeFunction>.viewArea .dataArea>ul>li>div{
    min-height: 2.601467vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 100;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea .dataArea>ul>li>div{
        width: 100%;
        min-height: unset;
        flex-grow: 1;
    }
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea>ul>li>div.photo{
    width: 50%;
    position: absolute;
    top: 0px;
    right: 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea>ul>li>div.photo{
        width: 100%;
    }
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea>ul>li>div.photo:before {
    content: '';
    display: block;
    margin-top: calc(100% / 3 * 2);
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea>ul>li>div.photo>img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: flex;
    position: absolute;
    top: 0px;
    left: 0px;
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea>ul>li>div.photo.onerror{
    background: rgba(169, 169, 169, 1);
    background-image: url(/images/motorcadeDefaultPhoto.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea>ul>li>div.photo.onerror>img{
    display: none;
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea>ul>li.map{
    width: 100%;
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea>ul>li.map>div{
    width; 100%;
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea>ul>li.map>div>img{
    max-width: 100%;
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea>ul>li.video video{
    width: 100%;
}

#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea .normalTable{
    width: 100%;
    border-collapse: collapse;
    padding: 0px;
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea .normalTable:last-child{
    margin-bottom: 0px;
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea .normalTable .tr{
    border-bottom: calc(0.52083vw * 2) solid transparent;
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea .normalTable .tr:last-child{
    border-bottom: 0px;
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea .normalTable .td{
    border-right: 1.04167vw solid transparent;
    border-left: 1.04167vw solid transparent;
    vertical-align: top;
    padding: 0.67vw 0px;
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea .normalTable .td.city{
    width: calc(1.04167vw * 3);
    border-left: 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea .normalTable .td.city{
        width: calc(3.75vw * 4);
    }
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea .normalTable .td.time{
    width: calc(1.04167vw * 6);
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea .normalTable .td.time{
        width: calc(3.75vw * 4);
    }
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea .normalTable .td.detail,
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea .normalTable .td.checkIn{
    width: calc(1.04167vw * 3.5);
    border-right: 0px;
    padding: 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea .motorcadeDetail .normalTable .th.number{
        width: calc(3.75vw * 3);
    }
}
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea .normalTable input[type='button']{
    /*height: auto;*/
}

#wrap>.motorcadeEdit>.viewArea label.checkBox{
    font-size: 1.14583vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 0px 1.5625vw;
    position: relative;
    cursor: pointer;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeEdit>.viewArea label.checkBox{
        font-size: 4.375vw;
        margin: 0px 0px 0px 6vw;
    }
}
#wrap>.motorcadeEdit>.viewArea label.checkBox input[type=checkbox]{
    visibility: hidden;
}
#wrap>.motorcadeEdit>.viewArea label.checkBox span {
    width: 1.302083vw;
    height: 1.302083vw;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 0.2604167vw;
    position: absolute;
    left: -1.5625vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeEdit>.viewArea label.checkBox span {
        width: 5vw;
        height: 5vw;
        border-radius: 1vw;
        left: -6vw;
    }
}
#wrap>.motorcadeEdit>.viewArea label.checkBox:hover input ~ span {
    background-color: rgba(238, 238, 238, 1);
}
#wrap>.motorcadeEdit>.viewArea label.checkBox input:active ~ span {
    background-color: rgba(255, 255, 255, 1);
}
#wrap>.motorcadeEdit>.viewArea label.checkBox input:checked ~ span {
    background-color: rgba(255, 255, 255, 1);
}
#wrap>.motorcadeEdit>.viewArea label.checkBox span:after {
    content: '';
    display: none;
    position: absolute;
}
#wrap>.motorcadeEdit>.viewArea label.checkBox input:checked ~ span:after {
    display: block;
}
#wrap>.motorcadeEdit>.viewArea label.checkBox span:after {
    width: 0.3125vw;
    height: 0.625vw;
    border: solid rgba(0, 0, 0, 1);
    border-width: 0px 0.20833vw 0.20833vw 0px;
    left: 0.416667vw;
    bottom: 0.2604167vw;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeEdit>.viewArea label.checkBox span:after {
        width: 1.2vw;
        height: 2.4vw;
        border-width: 0px 0.8vw 0.8vw 0px;
        left: 1.6vw;
        bottom: 1vw;
    }
}


#wrap>.motorcadeFunction>.googleMapArea{
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    /*display: flex;*/
    display: none;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
}
#wrap>.motorcadeFunction>.googleMapArea>.buttonArea{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: calc(5vh + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
}
#wrap>.motorcadeFunction>.googleMapArea>.buttonArea>input[type="button"]{
    margin: 0px 10px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.googleMapArea>.buttonArea>input[type="button"]{
        min-width: 25vw;
    }
}
#wrap>.motorcadeFunction>.googleMapArea>.buttonArea>input[type="button"]:last-child{
    margin: 0px;
}
#wrap>.motorcadeFunction>.googleMapArea>.buttonArea>.closeBtn:hover{
    background: rgba(255, 255, 255, 1);
}
#wrap>.motorcadeFunction>.googleMapArea>#googleMap{
    width: 90%;
    height: 90%;
}
#wrap>.motorcadeFunction>.googleMapArea>#googleMap button,
#wrap>.motorcadeFunction>.googleMapArea>#googleMap input[type='button']{
    width: auto;
    min-width: auto;
    height: auto;
    filter: none;
    border-radius: 0px;
    color: -internal-light-dark(black, white);
    font: 400 13.3333px Arial;
    display: inline-block;
    margin: 0px;
    padding: 1px 6px;
    position: relative;
}
#wrap>.motorcadeFunction>.googleMapArea>#googleMap button:active,
#wrap>.motorcadeFunction>.googleMapArea>#googleMap input[type='button']:active{
    filter: none;
    top: auto;
    left: auto;
}
#wrap>.motorcadeFunction>.googleMapArea>#googleMap div[role='button']:focus{
    outline: none;
}
#wrap>.motorcadeFunction>.googleMapArea>#googleMap .dataArea{
    width: 100%;
    min-width: 260px;
    color: rgb(0, 0, 0);
    font-size: 16px;
}
#wrap>.motorcadeFunction>.googleMapArea>#googleMap .dataArea>ul{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#wrap>.motorcadeFunction>.googleMapArea>#googleMap .dataArea>ul>li{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 5px 0px;
    position: relative;
}
#wrap>.motorcadeFunction>.googleMapArea>#googleMap .dataArea>ul>li>label{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-basis: 80px;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 20px 0px 0px;
}
#wrap>.motorcadeFunction>.googleMapArea>#googleMap .dataArea>ul>li>div{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 100;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
}
/*
#wrap>.motorcadeFunction>.viewArea .motorcadeDetail>.dataArea>ul>li>div.photo{
    width: 50%;
    background: rgba(151, 169, 179, 1);
    position: absolute;
    top: 0px;
    right: 0px;
}
*/
#wrap>.motorcadeFunction>.googleMapArea>#googleMap .dataArea>div.photoArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
#wrap>.motorcadeFunction>.googleMapArea>#googleMap .dataArea>div.photoArea>div.photo{
    width: 90%;
    /*background: rgba(151, 169, 179, 1);*/
    position: relative;
    overflow: hidden;
}
#wrap>.motorcadeFunction>.googleMapArea>#googleMap .dataArea>div.photoArea>div.photo:before{
    content: '';
    display: block;
    margin-top: calc(100% / 3 * 2);
}
#wrap>.motorcadeFunction>.googleMapArea>#googleMap .dataArea>div.photoArea>div.photo>img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: flex;
    position: absolute;
    top: 0px;
    left: 0px;
}

#wrap>.motorcadeFunction>.googleMapArea>.noteArea{
    background: rgb(255, 255, 255);
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
    box-shadow: rgb(0 0 0 / 30%) 0px 1px 4px -1px;
    color: rgb(0, 0, 0);
    font-family: Roboto, Arial, sans-serif;
    font-size: 18px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
}


#wrap>.motorcadeFunction>.viewArea .pigeonList{
    width: calc(100% - 20px * 2);
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 1);
    font-size: 1.04167vw;
    text-align: left;
    padding: 20px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea .pigeonList{
        font-size: 3.75vw;
    }
}
#wrap>.motorcadeFunction>.viewArea .pigeonList>h3{
    width: 100%;
    color: rgba(197, 58, 46, 1);
    font-size: 1.6667vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 0px 1.5625vw 0px;
}
#wrap>.motorcadeFunction>.viewArea .pigeonList .normalTable>.tr>.td{
    /*min-height: 5vw;*/
    height: 5.4688vw;
}
#wrap>.motorcadeFunction>.viewArea .pigeonList .normalTable>.tr>.th.photo{
    width: 7.5vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.motorcadeFunction>.viewArea .pigeonList .normalTable>.tr>.th.photo{
        min-width: 20vw;
    }
}
#wrap>.motorcadeFunction>.viewArea .pigeonList .normalTable>.tr>.td>.photo{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
#wrap>.motorcadeFunction>.viewArea .pigeonList .normalTable>.tr>.td>.photo:before{
    content: '';
    display: block;
    margin-top: calc(100% / 3 * 2);
}
#wrap>.motorcadeFunction>.viewArea .pigeonList .normalTable>.tr>.td>.photo>img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: flex;
    position: absolute;
    top: 0px;
    left: 0px;
}




/* =========================================================
 * 返鴿資訊
 * ========================================================= */
#wrap>.backFunction{
    width: 100%;
    background-color: rgba(53, 164, 131, 1);
    background-image: url(/images/backFunctionBackground.svg);
    background-repeat: no-repeat;
    background-size: auto 29.21146vw;
    background-position: right -0.9028125vw bottom -50px;
    color: rgba(255, 255, 255, 1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.backFunction{
        background-size: 73vw auto;
        background-position: right bottom;
    }
}
#wrap>.backFunction>.viewArea{
    width: calc(100% - 6.25vw * 2);
    max-width: 1000px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 6% 6.25vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.backFunction>.viewArea{
        width: calc(100% - 3.125vw * 2);
        padding: 6% 3.125vw;
    }
}
#wrap>.backFunction>.viewArea>h1{
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    font-size: 1.6667vw;
    font-weight: normal;
    margin: 0px 0px 10% 0px;
    padding: 0px 0px 1.666vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.backFunction>.viewArea>h1{
        font-size: 5.9375vw;
        padding: 0px 0px 5.9375vw 0px;
    }
}
#wrap>.backFunction>.viewArea>ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.backFunction>.viewArea>ul{
        flex-direction: column;
        justify-content: flex-start;
    }
}
#wrap>.backFunction>.viewArea>ul>li{
    margin: 0px 0px 1.171875vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.backFunction>.viewArea>ul>li{
        margin: 0px 0px 5.9375vw 0px;
    }
}
#wrap>.backFunction>.viewArea>ul>li label{
    color: rgba(255, 255, 255, 1);
    font-weight: normal;
    font-size: 1.6667vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.backFunction>.viewArea>ul>li label{
        font-size: 5.9375vw;
    }
}
#wrap>.backFunction>.viewArea>ul>li div{
    width: 24.7395833vw;
    height: 9.0625vw;
    border-radius: 0.677vw;
    margin: 1.041667vw 0px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.backFunction>.viewArea>ul>li div{
        width: calc(100vw - 6.25vw * 2);
        height: calc((100vw - 6.25vw * 2) / 24.7395833 * 9.0625);
        border-radius: 4.0625vw;
        margin: 1.5625vw 0px 0px 0px;
    }
}
#wrap>.backFunction>.viewArea>ul>li.benzing div{
    background-color: rgba(255, 255, 255, 1);
    background-image: url(/images/backLogoBenzing.png);
    background-repeat: no-repeat;
    background-size: 60% auto;
    background-position: center center;
}
#wrap>.backFunction>.viewArea>ul>li.topIgeon div{
    background-color: rgba(51, 137, 202, 1);
    background-image: url(/images/backLogoTopIgeon.png);
    background-repeat: no-repeat;
    background-size: 80% auto;
    background-position: center center;
}

/* =========================================================
 * 會員中心 (共用)
 * ========================================================= */
#wrap>.memberFunction{
    width: 100%;
    background-color: rgba(0, 118, 184, 1);
    background-image: url(/images/memberFunctionBackground.svg);
    background-repeat: no-repeat;
    background-size: auto 25.10994vw;
    background-position: right -3.855467vw bottom -50px;
    color: rgba(255, 255, 255, 1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberFunction{
        background-size: 73vw auto;
        background-position: right bottom;
        align-items: flex-start;
    }
}
#wrap>.memberFunction>.viewArea{
    width: calc(100% - 6.25vw * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 6% 6.25vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberFunction>.viewArea{
        width: calc(100% - 3.125vw * 2);
        justify-content: flex-start;
        padding: 6% 3.125vw;
    }
}
#wrap>.memberFunction>.viewArea h2{
    height: 2.601467vw;
    min-height: 30px;
    font-size: 1.6667vw;
    font-weight: normal;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 0.52083vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberFunction>.viewArea h2{
        font-size: 5vw;
        margin: 0px 0px 3.125vw 0px;
    }
}

/* =========================================================
 * 修改基本資料
 * ========================================================= */
html.memberProfile .faceImageArea{
    margin: 0px 0px 1.04167vw 0px;
}

@media screen and (max-aspect-ratio: 4/3){
    html.memberProfile #wrap>.page>.viewArea>.blockArea.row{
        flex-direction: column;
    }
    html.memberProfile #wrap>.page>.viewArea>.blockArea.row ul{
        width: 100%;
        flex-grow: 1;
        flex-shrink: 1;
    }
    html.memberProfile #wrap>.page>.viewArea>.blockArea.row ul.normalTable{
        width: calc(100% - 3.125vw * 2);
    }
    html.memberProfile #wrap>.page>.viewArea>.blockArea.profile>.dataArea ul{
        width: auto;
    }
}

html.memberProfileEdit .faceImage{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 1.04167vw 0px;
}
html.memberProfileEdit .faceImage>.editArea{
    position: relative;
}
html.memberProfileEdit .faceImage>.editArea>.editButtonArea{
    width: 2.604167vw;
    max-width: 50px;
    height: 2.604167vw;
    max-height: 50px;
    background: rgba(0, 0, 0, 1);
    background: url(/images/pictureUploadButton.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: 25px;
    overflow: hidden;
    position: absolute;
    bottom: 0px;
    right: 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    html.memberProfileEdit .faceImage>.editArea>.editButtonArea{
        width: 6.8vw;
        max-width: none;
        height: 6.8vw;
        max-height: none;
        border-radius: 3.4vw;
    }
}
html.memberProfileEdit .faceImage>.editArea input[type='file']{
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    cursor: pointer;
}

#wrap>.memberFunction .normalTabs>li{
    background: rgba(0, 72, 111, 1);
}
#wrap>.memberFunction .normalTabs>li.current{
    background: rgba(255, 255, 255, 1);
}
#wrap>.memberFunction .normalTable>.tr>.td.photo{
    width: 7.5vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberFunction .normalTable>.tr>.td.photo{
        width: auto;
    }
}
#wrap>.memberFunction .normalTable>.tr>.td.photo>.photo{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
#wrap>.memberFunction .normalTable>.tr>.td.photo>.photo:before{
    content: '';
    display: block;
    margin-top: calc(100% / 3 * 2);
}
#wrap>.memberFunction .normalTable>.tr>.td.photo>.photo>img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: flex;
    position: absolute;
    top: 0px;
    left: 0px;
}
#wrap>.memberFunction .normalTable>.tr>.td.photo>.photo.onerror{
    background: rgba(169, 169, 169, 1);
    background-image: url(/images/motorcadeDefaultPhoto.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
#wrap>.memberFunction .normalTable>.tr>.td.photo>.photo.onerror>img{
    display: none;
}
#wrap>.memberFunction .normalTable>.tr>.td.actionArea{
    width: 5vw;
}


/* =========================================================
 * 修改鴿車設定
 * ========================================================= */
#wrap>.memberProfileMotorcade>.viewArea>.blockArea>.dataArea.form>ul>li.carPhoto{
    flex-wrap: wrap;
}
#wrap>.memberProfileMotorcade>.viewArea>.blockArea>.dataArea.form>ul>li.carPhoto>div.carPhoto{
    width: calc(100% - 6.25vw);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0px 0px 0.52083vw 0px;
    position: relative;
    overflow: hidden;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberProfileMotorcade>.viewArea>.blockArea>.dataArea.form>ul>li.carPhoto>div.carPhoto{
        width: calc(100% - 24vw);
    }
}
#wrap>.memberProfileMotorcade>.viewArea>.blockArea>.dataArea.form>ul>li.carPhoto>div.carPhoto:before{
    content: '';
    display: block;
    margin-top: calc(100% / 3 * 2);
}
#wrap>.memberProfileMotorcade>.viewArea>.blockArea>.dataArea.form>ul>li.carPhoto>div.carPhoto>img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: flex;
    position: absolute;
    top: 0px;
    left: 0px;
}
#wrap>.memberProfileMotorcade>.viewArea>.blockArea>.dataArea.form>ul>li.carPhoto>div.carPhoto.onerror{
    background: rgba(169, 169, 169, 1);
    background-image: url(/images/motorcadeDefaultPhoto.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
#wrap>.memberProfileMotorcade>.viewArea>.blockArea>.dataArea.form>ul>li.carPhoto>div.carPhoto.onerror>img{
    display: none;
}
#wrap>.memberProfileMotorcade>.viewArea>.blockArea>.dataArea.form>ul>li.carPhoto>input[type='file']{
    width: calc(100% - 6.25vw);
    margin: 0px 0px 0px 6.25vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberProfileMotorcade>.viewArea>.blockArea>.dataArea.form>ul>li.carPhoto>input[type='file']{
        width: calc(100% - 3.125vw * 2 - 24vw);
        margin: 0px 0px 0px 24vw;
    }
}

/* =========================================================
 * 修改行程設定
 * ========================================================= */
#wrap>.memberProfileItinerary>.viewArea>.locationArea>.dataArea{
    position: relative;
    /*padding: 0px 0px calc(2.601467vw + 0.52083vw  * 2) 0px;*/
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberProfileItinerary>.viewArea>.locationArea>.dataArea{
        /*padding: 0px 0px calc(9.375vw + 1.5625vw  * 2) 0px;*/
    }
}
#wrap>.memberProfileItinerary>.viewArea>.locationArea>.dataArea>div{
    width: 100%;
}
#wrap>.memberProfileItinerary>.viewArea>.blockArea>.dataArea.form>.dataRow>.location{
    flex-wrap: wrap;
}
#wrap>.memberProfileItinerary>.viewArea .dataArea.form>.dataRow>.location>select~input{
    width: calc(100% - 6.25vw - 0.78125vw * 2);
    margin: calc(0.52083vw * 2) 0px 0px 6.25vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberProfileItinerary>.viewArea .dataArea.form>.dataRow>.location>select~input{
        width: calc(100% - 24vw - 3.125vw * 2);
        margin: calc(1.5625vw * 2) 0px 0px 24vw;
    }
}
#wrap>.memberProfileItinerary>.viewArea>.locationArea>.dataArea>div>ul{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
#wrap>.memberProfileItinerary>.viewArea>.locationArea>.dataArea>div>ul>li{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0.52083vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberProfileItinerary>.viewArea>.locationArea>.dataArea>div>ul>li{
        flex-wrap: wrap;
        margin: 3.125vw 0px;
    }
}
#wrap>.memberProfileItinerary>.viewArea>.locationArea>.dataArea>div>ul>li>select.city,
#wrap>.memberProfileItinerary>.viewArea>.locationArea>.dataArea>div>ul>li>select.city:last-of-type{
    width: auto;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 2;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 10px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberProfileItinerary>.viewArea>.locationArea>.dataArea>div>ul>li>select.city,
    #wrap>.memberProfileItinerary>.viewArea>.locationArea>.dataArea>div>ul>li>select.city:last-of-type{
        margin: 0px;
    }
}
#wrap>.memberProfileItinerary>.viewArea>.locationArea>.dataArea>div>ul>li>input.location{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberProfileItinerary>.viewArea>.locationArea>.dataArea>div>ul>li>input.location{
        flex-basis: calc(100% - 3.125vw * 2);
        margin: 10px 0px 0px 0px;
    }
    #wrap>.memberProfileItinerary>.viewArea>.locationArea>.dataArea>div>ul>li>select.day,
    #wrap>.memberProfileItinerary>.viewArea>.locationArea>.dataArea>div>ul>li>input.time{
        margin: 10px 10px 0px 0px;
    }
    #wrap>.memberProfileItinerary>.viewArea>.locationArea>.dataArea>div>ul>li>input[type='button']{
        margin: 10px 0px 0px 0px;
    }
}
#wrap>.memberProfileItinerary>.viewArea>.locationArea>.dataArea>input[type='button']{
    margin: 0.52083vw 0px;
    place-self: flex-end;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberProfileItinerary>.viewArea>.locationArea>.dataArea>input[type='button']{
        margin: 1.5625vw 0px;
    }
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.memberProfileItinerary>.viewArea>.locationArea>.dataArea ul>li>input[type='button']{
        padding: 0px 1.5625vw;
    }
}



/* =========================================================
 * 訓練報名
 * ========================================================= */
#wrap>.signUpFunction{
    width: 100%;
    background-color: rgba(255, 137, 10, 1);
    background-image: url(/images/signUpBackground.svg);
    background-repeat: no-repeat;
    background-size: auto 27.604vw;
    background-position: right 1.5625vw bottom 0px;
    color: rgba(255, 255, 255, 1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    position: relative;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction{
        background-size: 73vw auto;
        background-position: right bottom;
        flex-direction: column;
    }
}
#wrap>.signUpFunction.signUp>.leftArea{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: center;
    align-items: center;
    padding: 3% 3.125vw 0px 3.125vw;
    position: relative;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea{
        width: calc(100% - 3.125vw * 2);
        align-items: flex-start;
        order: 2;
        padding: 6% 3.125vw;
        overflow-x: auto;
    }
}

#wrap>.signUpFunction.signUp>.leftArea>.dateArea{
    height: 2.6015vw;
    background: rgb(0, 0, 0);
    filter: drop-shadow(0.15625vw 0.15625vw 0.3125vw rgba(0, 0, 0, 0.8));
    border-radius: 5px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    top: 3.3855vw;
    left: 3.3855vw;
    z-index: 2;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.dateArea{
        height: 9.375vw;
        filter: drop-shadow(0.563vw 0.563vw 1.1262vw rgba(0, 0, 0, 0.8));
        border-radius: 1vw;
        font-size: 3.75vw;
        left: 50%;
        transform: translateX(-50%);
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.dateArea>.preDay input[type='button'],
#wrap>.signUpFunction.signUp>.leftArea>.dateArea>.nextDay input[type='button']{
    width: 2.601467vw;
    min-width: unset;
    height: 100%;
    background: transparent;
    filter: none;
    font-size: 0.625vw;
    line-height: normal;
    flex-grow: 0;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.dateArea>.preDay input[type='button'],
    #wrap>.signUpFunction.signUp>.leftArea>.dateArea>.nextDay input[type='button']{
        width: 9.3749vw;
        font-size: 5.625vw;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.dateArea>.currentDay{
    height: calc(2.6015vw * 0.7);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.dateArea>.currentDay{
        height: calc(9.375vw * 0.7);
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.dateArea>.currentDay>ul{
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
    align-items: center;
}
#wrap>.signUpFunction.signUp>.leftArea>.dateArea>.currentDay>ul>li{
    width: calc(100% / 2 - 1px);
    height: 100%;
}
#wrap>.signUpFunction.signUp>.leftArea>.dateArea>.currentDay>ul>li>input[type='button']{
    width: 100%;
    min-width: unset;
    height: 100%;
    min-height: unset;
    background: transparent;
    filter: none;
    font-size: 0.9375vw;
    line-height: normal;
    flex-grow: 0;
    cursor: pointer;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.dateArea>.currentDay>ul>li>input[type='button']{
        font-size: 3.125vw;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.dateArea>.currentDay>ul>li.current>input[type='button']{
    background: #555555;
}


#wrap>.signUpFunction.signUp>.leftArea>.mapArea{
    width: 100%;
    height: 100%;
    max-height: calc(100vh - 3.125vw - 3.125vw * 2 - 2.601467vw - 9vh);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 3.125vw 0px 3.125vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea{
        width: max-content;
        max-height: unset;
        height: auto;
        display: block;
        margin: 33% 0px 7% 0px;
        position: relative;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map{
    height: 100%;
    position: relative;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map{
        width: 75%;
        height: auto;
        margin: 0px 15% 0px 10%;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>img{
    height: 100%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>img{
        width: calc(100% - 3.125vw * 2);
        height: auto;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li{
    display: none;
    position: absolute;
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>i{
    display: block;
}

#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>.info{
    width: max-content;
    background: rgb(0, 0, 0);
    border-radius: 5px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 0px;
    position: absolute;
    top: 0px;
    left: 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>.info{
        border-radius: 1vh;
        font-size: 3.75vw;
        padding: 1.408vh 0px;
        transform: scale(0.7);
        transform-origin: top left;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>.info>.name{
    border-right: 1px solid rgb(255, 255, 255);
    padding: 0px 20px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>.info>.name{
        line-height: 3.75vw;
        padding: 0px 3.125vw;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>.info>.weather{
    height: 1.25vw;
    min-height: 16px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0px 20px 0px 20px;
    position: relative;
    overflow: hidden;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>.info>.weather{
        height: 3.75vw;
        min-height: auto;
        padding: 0px 3.125vw;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>.info>.weather:before{
    content: '';
    width: 1.25vw;
    min-width: 16px;
    height: 1.25vw;
    min-height: 16px;
    background-image: url(/images/weather01.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    display: inline-block;
    margin-right: 20px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>.info>.weather:before{
        width: 3.75vw;
        min-width: unset;
        height: 3.75vw;
        min-height: unset;
        margin-right: 3.125vw;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather01>.info>.weather:before{
    background-image: url(/images/weather01.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather02>.info>.weather:before{
    background-image: url(/images/weather02.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather03>.info>.weather:before{
    background-image: url(/images/weather03.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather04>.info>.weather:before{
    background-image: url(/images/weather04.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather05>.info>.weather:before,
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather06>.info>.weather:before{
    background-image: url(/images/weather05.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather07>.info>.weather:before{
    background-image: url(/images/weather06.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather08>.info>.weather:before{
    background-image: url(/images/weather07.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather09>.info>.weather:before,
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather10>.info>.weather:before,
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather12>.info>.weather:before,
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather13>.info>.weather:before,
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather20>.info>.weather:before,
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather29>.info>.weather:before{
    background-image: url(/images/weather08.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather11>.info>.weather:before,
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather14>.info>.weather:before,
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather30>.info>.weather:before{
    background-image: url(/images/weather09.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather15>.info>.weather:before,
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather22>.info>.weather:before{
    background-image: url(/images/weather10.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather16>.info>.weather:before,
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather17>.info>.weather:before{
    background-image: url(/images/weather11.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather18>.info>.weather:before,
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather34>.info>.weather:before{
    background-image: url(/images/weather12.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather19>.info>.weather:before{
    background-image: url(/images/weather13.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather21>.info>.weather:before,
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather33>.info>.weather:before{
    background-image: url(/images/weather14.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather23>.info>.weather:before{
    background-image: url(/images/weather15.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather24>.info>.weather:before{
    background-image: url(/images/weather16.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather25>.info>.weather:before,
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather26>.info>.weather:before,
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather27>.info>.weather:before{
    background-image: url(/images/weather17.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather28>.info>.weather:before{
    background-image: url(/images/weather18.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather31>.info>.weather:before,
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather32>.info>.weather:before{
    background-image: url(/images/weather19.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather35>.info>.weather:before,
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather36>.info>.weather:before,
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather41>.info>.weather:before{
    background-image: url(/images/weather20.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather37>.info>.weather:before{
    background-image: url(/images/weather21.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather38>.info>.weather:before{
    background-image: url(/images/weather22.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather39>.info>.weather:before{
    background-image: url(/images/weather23.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather40>.info>.weather:before{
    background-image: url(/images/weather24.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li.weather42>.info>.weather:before{
    background-image: url(/images/weather25.svg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>.info>.weather>div{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    animation-name: weatherAnimation;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
    animation-fill-mode: both;
    animation: none;
}
@keyframes weatherAnimation{
  0%    {  top: 0;     }
  48%   {  top: 0;     }
  53%   {  top: -100%;  }
  100%  {  top: -100%;  }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>.info>.weather.noAnimation>div{
    animation: none;
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>.info>.weather>div>div{
    height: 1.25vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>.info>.weather>div>div{
        height: 3.75vw;
        line-height: 3.75vw;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>.info>.weather>div>.wind{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>.info>.weather>div>.wind{
        height: 3.75vw;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>.info>.weather>div>.wind:after{
    content: '';
    width: 1.25vw;
    height: 1.25vw;
    background-image: url(/images/weatherWind.svg);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center center;
    display: inline-block;
    margin-left: 20px;
    transform-origin: 50% 50%;
    position: relative;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>.info>.weather>div>.wind:after{
        width: 3.75vw;
        height: 3.75vw;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>.info>.weather>div>.wind1:after{
    transform:rotate(180deg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>.info>.weather>div>.wind2:after{
    transform:rotate(-135deg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>.info>.weather>div>.wind3:after{
    transform:rotate(-90deg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>.info>.weather>div>.wind4:after{
    transform:rotate(-45deg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>.info>.weather>div>.wind6:after{
    transform:rotate(45deg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>.info>.weather>div>.wind7:after{
    transform:rotate(90deg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li>.info>.weather>div>.wind8:after{
    transform:rotate(135deg);
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='taipeiCity']{
    top: 0%;
    left: 106%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='taipeiCity']{
        top: -5%;
        left: unset;
        right: 28%;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='keelungCity']{
    top: 8.1%;
    left: 104%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='keelungCity']{
        top: 3.8%;
        left: unset;
        right: 28%;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='newTaipeiCity']{
    top: 0%;
    left: 7%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='newTaipeiCity']{
        top: -5%;
        left: 17%;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='taoyuanCity']{
    top: 8.1%;
    left: -3%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='taoyuanCity']{
        top: 3.8%;
        left: 6%;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='hsinchuCity']{
    top: 16.1%;
    left: -11%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='hsinchuCity']{
        top: 12.2%;
        left: 0%;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='hsinchuCounty']{
    display: none !important;
    top: 0%;
    left: 0%;
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='miaoliCounty']{
    top: 24.1%;
    left: -18%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='miaoliCounty']{
        top: 20.4%;
        left: -6%;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='taichungCity']{
    top: 32.1%;
    left: -26%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='taichungCity']{
        top: 28.5%;
        left: -10%;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='changhuaCounty']{
    top: 40.1%;
    left: -32%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='changhuaCounty']{
        top: 36.8%;
        left: -13%;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='nantouCounty']{
    top: 40.1%;
    left: 93%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='nantouCounty']{
        top: 40.1%;
        left: unset;
        right: 28%;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='yunlinCounty']{
    top: 48.1%;
    left: -36%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='yunlinCounty']{
        top: 45.1%;
        left: -13%;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='chiayiCity']{
    display: none !important;
    top: 0%;
    left: 0%;
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='chiayiCounty']{
    top: 56.3%;
    left: -35%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='chiayiCounty']{
        top: 53.5%;
        left: -13%;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='tainanCity']{
    top: 64.6%;
    left: -35%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='tainanCity']{
        top: 61.8%;
        left: -13%;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='kaohsiungCity']{
    top: 72.7%;
    left: -30%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='kaohsiungCity']{
        top: 70.2%;
        left: -12%;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='pingtungCounty']{
    top: 80.6%;
    left: -24%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='pingtungCounty']{
        top: 78.2%;
        left: -7%;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='yilanCounty']{
    top: 16.1%;
    left: 102%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='yilanCounty']{
        top: 16.1%;
        left: unset;
        right: 28%;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='hualienCounty']{
    top: 32.1%;
    left: 97%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='hualienCounty']{
        top: 32.1%;
        left: unset;
        right: 28%;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='taitungCounty']{
    top: 64.6%;
    left: 90%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='taitungCounty']{
        top: 64.6%;
        left: unset;
        right: 28%;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='seaA']{
    top: -8.2%;
    left: 2%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='seaA']{
        top: -22.2%;
        left: -13%;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='seaB']{
    top: -8.2%;
    left: 95%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='seaB']{
        top: -14.2%;
        left: unset;
        right: 47%;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='seaC']{
    top: 88.5%;
    left: -18%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='seaC']{
        top: 89.5%;
        left: -13%;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='seaD']{
    top: 96.5%;
    left: -51%;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='seaD']{
        top: 101.5%;
        left: -13%;
    }
}
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='seaA'] .info,
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='seaB'] .info,
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='seaC'] .info,
#wrap>.signUpFunction.signUp>.leftArea>.mapArea>.map>ul>li[name='seaD'] .info{
    background: #002B72;
}
#wrap>.signUpFunction.signUp>.rightArea{
    width: calc(31.25vw - 3.125vw * 2);
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: flex-start;
    padding: 3% 3.125vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.rightArea{
        width: calc(100% - 3.125vw * 2);
        order: 1;
        padding: 6% 3.125vw;
    }
}
#wrap>.signUpFunction.signUp>.rightArea>.motorcadeArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: space-between;
    align-items: flex-start;
}
#wrap>.signUpFunction.signUp>.rightArea>.motorcadeArea>h1{
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    font-size: 1.5625vw;
    line-height: 1.5625vw;
    padding: 0px 0px 4vh 0px;
    margin: 0px 0px 3vh 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.rightArea>.motorcadeArea>h1{
        font-size: 5.625vw;
        line-height: 5.625vw;
        padding: 0px 0px 6% 0px;
        margin: 0px 0px 6% 0px;
    }
}
#wrap>.signUpFunction.signUp>.rightArea>.motorcadeArea>h2{
    width: 100%;
    font-size: 1.5625vw;
    line-height: 1.5625vw;
    margin: 0px 0px 3vh 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.rightArea>.motorcadeArea>h2{
        font-size: 5.625vw;
        line-height: 5.625vw;
        margin: 0px 0px 6% 0px;
    }
}
#wrap>.signUpFunction.signUp>.rightArea>.motorcadeArea .motorcade{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: center;
    align-items: center;
}
#wrap>.signUpFunction.signUp>.rightArea>.motorcadeArea .motorcade>ul{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
}
#wrap>.signUpFunction.signUp>.rightArea>.motorcadeArea .motorcade>ul>li{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    padding: 0.52083vw 0px;
    position: relative;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.rightArea>.motorcadeArea .motorcade>ul>li{
        padding: 1.875vw 0px;
    }
}
#wrap>.signUpFunction.signUp>.rightArea>.motorcadeArea .motorcade>ul>li.current{
    background: rgba(255, 255, 255, 0.3);
}
#wrap>.signUpFunction.signUp>.rightArea>.motorcadeArea .motorcade>ul>li>h3{
    font-size: 0.9375vw;
    font-weight: normal;
    text-align: justify;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 20px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.rightArea>.motorcadeArea .motorcade>ul>li>h3{
        font-size: 4.0625vw;
        margin: 0px 10px 0px 0px;
    }
}
#wrap>.signUpFunction.signUp>.rightArea>.motorcadeArea>input[type='button']{
    flex-grow: 0;
    flex-shrink: 0;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUp>.rightArea>.motorcadeArea>input[type='button']{
        margin: 6% 0px 0px 0px;
    }
}


#wrap>.signUpFunction>.viewArea{
    width: calc(100% - 6.25vw * 2);
    max-width: 1000px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 6% 6.25vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction>.viewArea{
        width: calc(100% - 3.125vw * 2);
        padding: 6% 3.125vw;
    }
}

#wrap>.signUpFunction>.viewArea .motorcadeDetail{
    width: calc(100% - 20px * 2);
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 1);
    font-size: 1.04167vw;
    text-align: left;
    padding: 20px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction>.viewArea .motorcadeDetail{
        width: calc(100% - 3.125vw * 2);
        font-size: 4.375vw;
        padding: 3.125vw;
    }
}
#wrap>.signUpFunction>.viewArea .motorcadeDetail>h3{
    width: 100%;
    color: rgba(197, 58, 46, 1);
    font-size: 1.6667vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 0px 1.5625vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction>.viewArea .motorcadeDetail>h3{
        font-size: 6.25vw;
        margin: 0px;
    }
}
#wrap>.signUpFunction>.viewArea .motorcadeDetail>h2{
    border-bottom: 1px solid rgba(0, 0, 0, 1);
    font-size: 1.6667vw;
    margin: 0px 0px 0.52083vw 0px;
    padding: 0px 0px 1.04167vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction>.viewArea .motorcadeDetail>h2{
        font-size: 6.25vw;
        margin: 0px 0px 3.75vw 0px;
        padding: 0px 0px 3.75vw 0px;
    }
}
#wrap>.signUpFunction>.viewArea .dataArea{
    width: 100%;
}
#wrap>.signUpFunction>.viewArea .dataArea>ul{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#wrap>.signUpFunction>.viewArea .dataArea>ul>li{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0.52083vw 0px;
    position: relative;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction>.viewArea .dataArea>ul>li{
        margin: 1.5625vw 0px;
    }
    #wrap>.signUpFunction>.viewArea .dataArea>ul>li.photo{
        padding: calc((100vw - 3.125vw * 2 - 3.125vw * 2) / 3 * 2 + 3.75vw) 0px 0px 0px;
    }
    #wrap>.signUpFunction>.viewArea .dataArea>ul>li.location,
    #wrap>.signUpFunction>.viewArea .dataArea>ul>li.map,
    #wrap>.signUpFunction>.viewArea .dataArea>ul>li.video{
        flex-direction: column;
    }
    #wrap>.signUpFunction>.viewArea .dataArea>ul>li.location>label,
    #wrap>.signUpFunction>.viewArea .dataArea>ul>li.map>label,
    #wrap>.signUpFunction>.viewArea .dataArea>ul>li.video>label{
        flex-basis: unset;
        margin: 0px 0px calc(1.5625vw * 2) 0px;
    }
    #wrap>.signUpFunction>.viewArea .dataArea>ul>li.map>.full,
    #wrap>.signUpFunction>.viewArea .dataArea>ul>li.video>.full{
        width: 100%;
    }
    #wrap>.signUpFunction>.viewArea .dataArea>ul>li.map>.full>img,
    #wrap>.signUpFunction>.viewArea .dataArea>ul>li.video>.full>video{
        width: 100%;
    }
}
#wrap>.signUpFunction>.viewArea .dataArea>ul>li>label{
    min-height: 2.601467vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-basis: 80px;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 20px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction>.viewArea .dataArea>ul>li>label{
        min-height: unset;
        flex-basis: 18.75vw;
        flex-grow: 0;
    }
}
#wrap>.signUpFunction>.viewArea .dataArea>ul>li>div{
    min-height: 2.601467vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 100;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction>.viewArea .dataArea>ul>li>div{
        width: 100%;
        min-height: unset;
        flex-grow: 1;
    }
}
#wrap>.signUpFunction>.viewArea .motorcadeDetail>.dataArea>ul>li>div.photo{
    width: 50%;
    position: absolute;
    top: 0px;
    right: 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction>.viewArea .motorcadeDetail>.dataArea>ul>li>div.photo{
        width: 100%;
    }
}
#wrap>.signUpFunction>.viewArea .motorcadeDetail>.dataArea>ul>li>div.photo:before {
    content: '';
    display: block;
    margin-top: calc(100% / 3 * 2);
}
#wrap>.signUpFunction>.viewArea .motorcadeDetail>.dataArea>ul>li>div.photo>img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: flex;
    position: absolute;
    top: 0px;
    left: 0px;
}
#wrap>.signUpFunction>.viewArea .motorcadeDetail>.dataArea>ul>li>div.photo.onerror{
    background: rgba(169, 169, 169, 1);
    background-image: url(/images/motorcadeDefaultPhoto.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
#wrap>.signUpFunction>.viewArea .motorcadeDetail>.dataArea>ul>li>div.photo.onerror>img{
    display: none;
}
#wrap>.signUpFunction>.viewArea .motorcadeDetail>.dataArea>ul>li.map{
    width: 100%;
    position: relative;
}
#wrap>.signUpFunction>.viewArea .motorcadeDetail>.dataArea>ul>li.map>div{
    width; 100%;
}
#wrap>.signUpFunction>.viewArea .motorcadeDetail>.dataArea>ul>li.map>div>img{
    max-width: 100%;
}
#wrap>.signUpFunction>.viewArea .motorcadeDetail>.dataArea>ul>li.video video{
    width: 100%;
}

#wrap>.signUpFunction>.viewArea .motorcadeDetail>.dataArea .normalTable{
    width: 100%;
    border-collapse: collapse;
    padding: 0px;
}
#wrap>.signUpFunction>.viewArea .motorcadeDetail>.dataArea .normalTable:last-child{
    margin-bottom: 0px;
}
#wrap>.signUpFunction>.viewArea .motorcadeDetail>.dataArea .normalTable .tr{
    border-bottom: calc(0.52083vw * 2) solid transparent;
}
#wrap>.signUpFunction>.viewArea .motorcadeDetail>.dataArea .normalTable .tr:last-child{
    border-bottom: 0px;
}
#wrap>.signUpFunction>.viewArea .motorcadeDetail>.dataArea .normalTable .td{
    border-right: 1.04167vw solid transparent;
    border-left: 1.04167vw solid transparent;
    vertical-align: top;
    padding: 0.67vw 0px;
}
#wrap>.signUpFunction>.viewArea .motorcadeDetail>.dataArea .normalTable .td.city{
    width: calc(1.04167vw * 3);
    border-left: 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction>.viewArea .motorcadeDetail>.dataArea .normalTable .td.city{
        width: calc(3.75vw * 4);
    }
}
#wrap>.signUpFunction>.viewArea .motorcadeDetail>.dataArea .normalTable .td.time{
    width: calc(1.04167vw * 6);
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction>.viewArea .motorcadeDetail>.dataArea .normalTable .td.time{
        width: calc(3.75vw * 4);
    }
}
#wrap>.signUpFunction>.viewArea .motorcadeDetail>.dataArea .normalTable .td.detail,
#wrap>.signUpFunction>.viewArea .motorcadeDetail>.dataArea .normalTable .td.checkIn{
    width: calc(1.04167vw * 3.5);
    border-right: 0px;
    padding: 0px;
}
#wrap>.signUpFunction>.viewArea .motorcadeDetail>.dataArea .normalTable input[type='button']{
    /*height: auto;*/
}

#wrap>.signUpFunction>.viewArea .pigeonList{
    width: calc(100% - 20px * 2);
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 1);
    font-size: 1.04167vw;
    text-align: left;
    padding: 20px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction>.viewArea .pigeonList{
        font-size: 4.375vw;
    }
}
#wrap>.signUpFunction>.viewArea .pigeonList>h3{
    width: 100%;
    color: rgba(197, 58, 46, 1);
    font-size: 1.6667vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 0px 1.5625vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction>.viewArea .pigeonList>h3{
        font-size: 4.375vw;
    }
}
#wrap>.signUpFunction>.viewArea .pigeonList .normalTable>.tr>.td{
    /*min-height: 5vw;*/
    height: 5.4688vw;
}
#wrap>.signUpFunction>.viewArea .pigeonList .normalTable>.tr>.th.photo{
    width: 7.5vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction>.viewArea .pigeonList .normalTable>.tr>.th.photo{
        min-width: 20vw;
    }
}
#wrap>.signUpFunction>.viewArea .pigeonList .normalTable>.tr>.td>.photo{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
#wrap>.signUpFunction>.viewArea .pigeonList .normalTable>.tr>.td>.photo:before{
    content: '';
    display: block;
    margin-top: calc(100% / 3 * 2);
}
#wrap>.signUpFunction>.viewArea .pigeonList .normalTable>.tr>.td>.photo>img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: flex;
    position: absolute;
    top: 0px;
    left: 0px;
}
#wrap>.signUpFunction>.viewArea .pigeonList .normalTable>.tr>.td>.photo.onerror{
    background: rgba(169, 169, 169, 1);
    background-image: url(/images/pigeonDefaultPhoto.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
#wrap>.signUpFunction>.viewArea .pigeonList .normalTable>.tr>.td>.photo.onerror>img{
    display: none;
}


#wrap>.signUpFunction.signUpBloodline>.leftArea{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    padding: 3% 3.125vw 0px 3.125vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUpBloodline>.leftArea{
        padding: 3% 3.125vw;
    }
}
#wrap>.signUpFunction.signUpBloodline>.leftArea>.header>.buttons>div{
    display: none;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUpBloodline>.leftArea>.header{
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    #wrap>.signUpFunction.signUpBloodline>.leftArea>.header>.buttons{
        width: 100%;
    }
    #wrap>.signUpFunction.signUpBloodline>.leftArea>.header>.buttons>div{
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 1);
        display: block;
        font-size: 4.375vw;
        line-height: 9.375vw;
        padding: 6.25vw 0px;
    }
    #wrap>.signUpFunction.signUpBloodline>.leftArea>.header>.buttons>div .quantity{
        width: calc(5vw * 2);
        height: 9.375vw;
        border: 0px;
        border-radius: 1.25vw;
        font-size: 4.375vw;
        text-align: center;
        padding: 0px 3.125vw;
    }
    #wrap>.signUpFunction.signUpBloodline>.leftArea>.header>.buttons>input[type='button']{
        width: 100%;
        margin: 6.25vw 0px 0px 0px;
    }
}
#wrap>.signUpFunction.signUpBloodline>.leftArea>.blockArea{
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    display: flex;
    font-size: 1.14583vw;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    padding: 0px 0px 2.0833vw 0px;
    margin: 0px 0px 2.0833vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUpBloodline>.leftArea>.blockArea{
        display: none;
    }
}
#wrap>.signUpFunction.signUpBloodline>.leftArea>.blockArea .quantity{
    min-width: 0px;
    width: calc(1.1459vw * 2);
    height: 2.601467vw;
    background: rgba(255, 255, 255, 1);
    border: 0px;
    border-radius: 0.2604167vw;
    color: rgba(0, 0, 0, 1);
    font-size: 1.1459vw;
    text-align: center;
    display: inline-flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0px 0.78125vw;
}
#wrap>.signUpFunction.signUpBloodline>.leftArea>div.bloodlineData{
    width: 100%;
    margin: 0px 0px 3% 0px;
}
#wrap>.signUpFunction.signUpBloodline>.leftArea>div.bloodlineData.newStyle{
    width: 62.3958vw;
    max-height: calc(100vh - 9vh - 9vh * 2 - 2.601467vw - 2.601467vw * 2 - 2.0833vw * 2);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 0px;
    overflow-x: auto;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUpBloodline>.leftArea>div.bloodlineData.newStyle{
        width: calc(100vw - 3.125vw * 2);
        max-height: calc(100vh - 9vh - 37.5vw - 3vh * 4 - 9.375vw);
        margin: 3.125vw 0px 0px 0px;
    }
}
#wrap>.signUpFunction.signUpBloodline>.leftArea>.newStyle>.normalTabs{
    display: none;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUpBloodline>.leftArea .normalTabs{
        margin: 3.125vw 0px 0px 0px;
    }
}
#wrap>.signUpFunction.signUpBloodline>.leftArea>.newStyle>.normalTable{
    width: auto;
    height: calc(100% - 4.1667vw);
    vertical-align: top;
    padding: calc(4.1667vw + 2px) 0px 0px 0px;
    position: relative;
    overflow-y: auto;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUpBloodline>.leftArea>.newStyle>.normalTable{
        padding: calc(8.4375vw + 2px) 0px 0px 0px;
    }
}
#wrap>.signUpFunction.signUpBloodline>.leftArea>.newStyle .normalTable>.tr.theader{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 2;
}
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.th.bloodline,
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.th.body1,
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.th.body2,
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td.bloodline,
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td.body1,
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td.body2{
    display: none;
}
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.bloodline>.tr>.th.basic,
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.bloodline>.tr>.th.body1,
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.bloodline>.tr>.th.body2,
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.bloodline>.tr>.td.basic,
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.bloodline>.tr>.td.body1,
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.bloodline>.tr>.td.body2{
    display: none;
}
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.bloodline>.tr>.th.bloodline,
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.bloodline>.tr>.td.bloodline{
    display: table-cell;
}
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.body1>.tr>.th.basic,
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.body1>.tr>.th.bloodline,
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.body1>.tr>.th.body2,
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.body1>.tr>.td.basic,
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.body1>.tr>.td.bloodline,
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.body1>.tr>.td.body2{
    display: none;
}
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.body1>.tr>.th.body1,
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.body1>.tr>.td.body1{
    display: table-cell;
}
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.body2>.tr>.th.basic,
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.body2>.tr>.th.bloodline,
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.body2>.tr>.th.body1,
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.body2>.tr>.td.basic,
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.body2>.tr>.td.bloodline,
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.body2>.tr>.td.body1{
    display: none;
}
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.body2>.tr>.th.body2,
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable.body2>.tr>.td.body2{
    display: table-cell;
}
#wrap>.signUpFunction.signUpBloodline>.leftArea>.newStyle>.normalTable>.tr>.th,
#wrap>.signUpFunction.signUpBloodline>.leftArea>.newStyle>.normalTable>.tr>.td{
    min-width: 6vw !important;
    max-width: 30vw;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: table-cell;
    padding: 1.4016vw;
    overflow:hidden;
}
#wrap>.signUpFunction.signUpBloodline>.leftArea>.newStyle>.normalTable>.tr>.td{
    border-bottom: 1px solid rgb(255, 255, 255);
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUpBloodline>.leftArea>.newStyle>.normalTable>.tr>.th{
        min-width: 10vw !important;
        max-width: 60vw;
        padding: 1.5625vw 3.125vw;
    }
    #wrap>.signUpFunction.signUpBloodline>.leftArea>.newStyle>.normalTable>.tr>.td{
        min-width: 10vw !important;
        max-width: 60vw;
        min-height: 12.5vw;
        padding: 1.5625vw 3.125vw;
    }
}
#wrap>.signUpFunction.signUpBloodline>.leftArea>.newStyle>.normalTable>.tr>.th:nth-child(even),
#wrap>.signUpFunction.signUpBloodline>.leftArea>.newStyle>.normalTable>.tr>.td:nth-child(even){
    background: #FFFFFF;
}
#wrap>.signUpFunction.signUpBloodline>.leftArea>.newStyle>.normalTable>.tr>.th:nth-child(odd),
#wrap>.signUpFunction.signUpBloodline>.leftArea>.newStyle>.normalTable>.tr>.td:nth-child(odd){
    background: #EEEEEE;
}

#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td.photo{
    /*width: 7.5vw;*/
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUpBloodline>.leftArea>.newStyle>.normalTable>.tr>.td.photo{
        /*min-width: 20vw;*/
    }
}
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td.photo>.photo{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td.photo>.photo{
    width: 7.5vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td.photo>.photo{
        width: 20vw;
    }
}
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td.photo>.photo:before{
    content: '';
    display: block;
    margin-top: calc(100% / 3 * 2);
}
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td.photo>.photo>img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: flex;
    position: absolute;
    top: 0px;
    left: 0px;
}
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td.photo>.photo.onerror{
    background: rgba(169, 169, 169, 1);
    background-image: url(/images/pigeonDefaultPhoto.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td.photo>.photo.onerror>img{
    display: none;
}
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td.actionArea{
    width: 5vw;
}

#wrap>.signUpFunction .normalTabs>li{
    background: rgba(142, 31, 39, 1);
}
#wrap>.signUpFunction .normalTabs>li.current{
    background: rgba(255, 255, 255, 1);
}

#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td>label.checkBox{
    display: flex;
    text-align: justify;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    cursor: pointer;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td>label.checkBox{
        margin: 0px 3.125vw 0px calc(3.125vw + 1.7188vw);
    }
}
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td>label.checkBox input[type=checkbox]{
    width: 1.04167vw;
    visibility: hidden;
    margin: 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td>label.checkBox input[type=checkbox]{
        width: 3.125vw;
    }
}
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td>label.checkBox span{
    width: 1.302083vw;
    height: 1.302083vw;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 1);
    border-radius: 0.2604167vw;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td>label.checkBox span{
        width: 3.75vw;
        height: 3.75vw;
        border-radius: 0.625vw;
    }
}
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td>label.checkBox:hover input ~ span {
    background-color: rgba(238, 238, 238, 1);
}
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td>label.checkBox input:active ~ span {
    background-color: rgba(255, 255, 255, 1);
}
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td>label.checkBox input:checked ~ span {
    background-color: rgba(255, 255, 255, 1);
}
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td>label.checkBox span:after {
    content: '';
    display: none;
    position: absolute;
}
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td>label.checkBox input:checked ~ span:after {
    display: block;
}
#wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td>label.checkBox span:after {
    width: 0.3125vw;
    height: 0.625vw;
    border: solid rgba(0, 0, 0, 1);
    border-width: 0px 0.20833vw 0.20833vw 0px;
    left: 0.35vw;
    bottom: 0.35vw;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUpBloodline>.leftArea .normalTable>.tr>.td>label.checkBox span:after {
        width: 0.9vw;
        height: 1.8vw;
        border-width: 0px 0.6vw 0.6vw 0px;
        left: 1.2vw;
        bottom: 1.2vw;
    }
}
#wrap>.signUpFunction.signUpBloodline>.leftArea>.buttons{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: center;
    margin: 1.04167vw 0px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUpBloodline>.leftArea>.buttons{
        flex-direction: column;
        justify-content: flex-start;
    }
    #wrap>.signUpFunction.signUpBloodline>.leftArea>.buttons>input[type='button']{
        width: 100%;
        margin: 3.125vw 0px 0px 0px;
    }
}


#wrap>.signUpFunction.signUpBloodline>.rightArea{
    width: calc(31.25vw - 3.125vw * 2);
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6vh 3.125vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUpBloodline>.rightArea{
        width: calc(100% - 3.125vw * 2);
        height: calc(100% - 6vh * 2);
        display: none;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 3;
    }
    #wrap>.signUpFunction.signUpBloodline>.rightArea.open{
        display: flex;
    }
}
#wrap>.signUpFunction.signUpBloodline>.rightArea>.searchArea{
    width: 100%;
}
#wrap>.signUpFunction.signUpBloodline>.rightArea>.searchArea>h2{
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    margin: 0px 0px 1.041667vw 0px;
    padding: 0px 0px 1.041667vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUpBloodline>.rightArea>.searchArea>h2{
        margin: 0px 0px 3.125vw 0px;
        padding: 0px 0px 3.125vw 0px;
    }
}
#wrap>.signUpFunction.signUpBloodline>.rightArea>.searchArea>.form{
    width: 100%;
    margin: 0px 0px 1.041667vw 0px;
}
#wrap>.signUpFunction.signUpBloodline>.rightArea>.searchArea>.form>li{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 0.52083vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUpBloodline>.rightArea>.searchArea>.form>li{
        margin: 3.125vw 0px;
    }
}
#wrap>.signUpFunction.signUpBloodline>.rightArea>.searchArea>.form>li>input[type='text']{
    flex-grow: 1;
    flex-shrink: 1;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.signUpFunction.signUpBloodline>.rightArea>.searchArea input[type='button']{
        margin: 3.125vw 0px;
    }
}
#wrap>.signUpFunction.signUpBloodline>.rightArea>.searchArea>.form>li>select{
    flex-grow: 1;
    flex-shrink: 1;
}



/* =========================================================
 * 行事曆
 * ========================================================= */
#wrap>.calendarFunction{
    width: 100%;
    min-height: calc(100% - 9vh - 50px);
    background-color: rgba(13, 59, 108, 1);
    background-image: url(/images/calendarFunctionBackground.svg);
    background-repeat: no-repeat;
    background-size: auto 27.4479167vw;
    background-position: right -1.5625vw bottom -50px;
    color: rgba(255, 255, 255, 1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction{
        background-size: 73vw auto;
        background-position: right bottom;
        flex-direction: column;
    }
}
#wrap>.calendarFunction>.leftArea{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: center;
    align-items: flex-start;
    padding: 3% 3.125vw 0px 3.125vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction>.leftArea{
        width: calc(100% - 3.125vw * 2);
        padding: 6% 3.125vw;
    }
}
#wrap>.calendarFunction>.leftArea>.calendarArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: center;
    align-items: center;
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarTitle{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarTitle>.buttons{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarTitle>.buttons>a{
    width: 1.5625vw;
    min-width: auto;
    height: 1.5625vw;
    min-height: auto;
    background: rgba(255, 255, 255, 1);
    filter: drop-shadow(0.15625vw 0.15625vw 0.3125vw rgba(0, 0, 0, 0.8));
    border-radius: 0.15625vw;
    color: transparent;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction>.leftArea>.calendarArea>.calendarTitle>.buttons>a{
        width: 8.5738vw;
        min-width: auto;
        height: 8.5738vw;
        min-height: auto;
        background: rgba(255, 255, 255, 1);
        filter: drop-shadow(0.85738vw 0.85738vw 1.71476vw rgba(0, 0, 0, 0.8));
        border-radius: 0.85738vw;
    }
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarTitle>.buttons>a:after{
    content: '';
    width: 0.5729167vw;
    height: 0.5729167vw;
    border: solid rgba(0, 0, 0, 1);
    border-width: 0px 2px 2px 0px;
    display: block;
    position: absolute;
    bottom: 0.4vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction>.leftArea>.calendarArea>.calendarTitle>.buttons>a:after{
        width: 3.1438vw;
        height: 3.1438vw;
        bottom: 2.1949vw;
    }
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarTitle>.buttons>a.preMonth:after{
    right: 0.2604167vw;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction>.leftArea>.calendarArea>.calendarTitle>.buttons>a.preMonth:after{
        right: 1.4289668vw;
    }
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarTitle>.buttons>a.nextMonth{
    margin: 0px 0px 0px 0.625vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction>.leftArea>.calendarArea>.calendarTitle>.buttons>a.nextMonth{
        margin: 0px 0px 0px 3.42952vw;
    }
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarTitle>.buttons>a.nextMonth:after{
    left: 0.2604167vw;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction>.leftArea>.calendarArea>.calendarTitle>.buttons>a.nextMonth:after{
        left: 1.4289668vw;
    }
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarTitle>.buttons>a:active{
    filter: drop-shadow(0px 0px 0px rgba(0, 0, 0, 0.5));
    top: 0.1vw;
    left: 0.1vw;
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarTitle>.weeks{
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 1);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin: 4vh 0px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction>.leftArea>.calendarArea>.calendarTitle>.weeks{
        margin: 5vw 0px 0px 0px;
    }
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarTitle>.weeks>li{
    width: 4.166vw;
    height: 4.166vw;
    border-radius: 0.520833vw;
    font-size: 1.5625vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0.5vh calc((100% - 4.166vw * 7) / (7 * 2 - 2));
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction>.leftArea>.calendarArea>.calendarTitle>.weeks>li{
        width: 11.4584vw;
        height: 11.4584vw;
        border-radius: 1.1719vw;
        font-size: 5vw;
        margin: 0.5vw calc((100% - 11.4584vw * 7) / (7 * 2 - 2));
    }
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarTitle>.weeks>li:nth-child(7n + 1){
    margin: 0.5vh calc((100% - 4.166vw * 7) / (7 * 2 - 2)) 0.5vw 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction>.leftArea>.calendarArea>.calendarTitle>.weeks>li:nth-child(7n + 1){
        margin: 0.5vw calc((100% - 11.4584vw * 7) / (7 * 2 - 2)) 0.5vw 0px;
    }
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarTitle>.weeks>li:nth-child(7n){
    margin: 0.5vh 0px 0.5vh calc((100% - 4.166vw * 7) / (7 * 2 - 2));
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction>.leftArea>.calendarArea>.calendarTitle>.weeks>li:nth-child(7n){
        margin: 0.5vw 0px 0.5vw calc((100% - 11.4584vw * 7) / (7 * 2 - 2));
    }
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarDays{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarDays>li{
    width: 4.166vw;
    height: 4.166vw;
    border-radius: 0.520833vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0.5vh calc((100% - 4.166vw * 7) / (7 * 2 - 2));
    position: relative;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction>.leftArea>.calendarArea>.calendarDays>li{
        width: 11.4584vw;
        height: 11.4584vw;
        border-radius: 1.1719vw;
        margin: 0.5vw calc((100% - 11.4584vw * 7) / (7 * 2 - 2));
    }
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarDays>li:nth-child(7n + 1){
    margin: 0.5vh calc((100% - 4.166vw * 7) / (7 * 2 - 2)) 0.5vh 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction>.leftArea>.calendarArea>.calendarDays>li:nth-child(7n + 1){
        margin: 0.5vw calc((100% - 11.4584vw * 7) / (7 * 2 - 2)) 0.5vw 0px;
    }
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarDays>li:nth-child(7n){
    margin: 0.5vh 0px 0.5vh calc((100% - 4.166vw * 7) / (7 * 2 - 2));
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction>.leftArea>.calendarArea>.calendarDays>li:nth-child(7n){
        margin: 0.5vw 0px 0.5vw calc((100% - 11.4584vw * 7) / (7 * 2 - 2));
    }
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarDays>li:not(:empty):hover{
    background: rgba(255, 255, 255, 0.1);
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarDays>li.today{
    background: rgba(255, 255, 255, 0.1) !important;
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarDays>li.scheduled{
    width: calc(4.166vw - 1px * 2);
    height: calc(4.166vw - 1px * 2);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarDays>li.current{
    background: rgba(255, 255, 255, 1) !important;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction>.leftArea>.calendarArea>.calendarDays>li.scheduled{
        width: calc(11.4584vw - 1px * 2);
        height: calc(11.4584vw - 1px * 2);
    }
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarDays>li.alert:after{
    content: '';
    width: 15px;
    height: 15px;
    background: rgba(255, 0, 0, 1);
    border-radius: 8px;
    position: absolute;
    top: calc(-15px / 2);
    right: calc(-15px / 2);
    z-index: 2;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction>.leftArea>.calendarArea>.calendarDays>li.alert:after{
        width: 3vw;
        height: 3vw;
        border-radius: 1.5vw;
        top: calc(-3vw / 2);
        right: calc(-3vw / 2);
    }
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarDays>li>a{
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarDays>li.current>a{
    color: rgba(0, 0, 0, 1);
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarDays>li>a>.national{
    font-size: 1.5625vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction>.leftArea>.calendarArea>.calendarDays>li>a>.national{
        font-size: 4.375vw;
    }
}
#wrap>.calendarFunction>.leftArea>.calendarArea>.calendarDays>li>a>.lunar{
    font-size: 0.8333vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction>.leftArea>.calendarArea>.calendarDays>li>a>.lunar{
        font-size: 3.75vw;
        line-height: calc(3.75vw * 0.6);
        transform: scale(0.6);
    }
}
#wrap>.calendarFunction>.rightArea{
    width: calc(31.25vw - 3.125vw * 2);
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: flex-start;
    padding: 3% 3.125vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction>.rightArea{
        width: calc(100% - 3.125vw * 2);
        padding: 6% 3.125vw;
    }
}
#wrap>.calendarFunction>.rightArea>.scheduleArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: space-between;
    align-items: flex-start;
}
#wrap>.calendarFunction>.rightArea>.scheduleArea>h1{
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    font-size: 1.5625vw;
    line-height: 1.5625vw;
    padding: 0px 0px 4vh 0px;
    margin: 0px 0px 3vh 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction>.rightArea>.scheduleArea>h1{
        font-size: 5.625vw;
        line-height: 5.625vw;
        padding: 0px 0px 6% 0px;
        margin: 0px 0px 6% 0px;
    }
}
#wrap>.calendarFunction>.rightArea>.scheduleArea>h2{
    width: 100%;
    font-size: 1.5625vw;
    line-height: 1.5625vw;
    margin: 0px 0px 3vh 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction>.rightArea>.scheduleArea>h2{
        font-size: 5.625vw;
        line-height: 5.625vw;
        margin: 0px 0px 6% 0px;
    }
}
#wrap>.calendarFunction>.rightArea>.scheduleArea .schedule{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: center;
    align-items: center;
}
#wrap>.calendarFunction>.rightArea>.scheduleArea .schedule>ul{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
}
#wrap>.calendarFunction>.rightArea>.scheduleArea .schedule>ul>li{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    padding: 0.52083vw 0px;
    position: relative;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction>.rightArea>.scheduleArea .schedule>ul>li{
        padding: 1.875vw 0px;
    }
}
#wrap>.calendarFunction>.rightArea>.scheduleArea .schedule>ul>li>h3{
    font-size: 0.9375vw;
    font-weight: normal;
    text-align: justify;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 20px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction>.rightArea>.scheduleArea .schedule>ul>li>h3{
        font-size: 4.0625vw;
        margin: 0px 10px 0px 0px;
    }
}
#wrap>.calendarFunction>.rightArea>.scheduleArea>input[type='button']{
    flex-grow: 0;
    flex-shrink: 0;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.calendarFunction>.rightArea>.scheduleArea>input[type='button']{
        margin: 6% 0px 0px 0px;
    }
}

html.calendar #cyMsgBox>.contentArea>.content>.calendar{
    width: 100%;
    text-align: left;
}
html.calendar #cyMsgBox>.contentArea>.content>.calendar>h2{
    border-bottom: 1px solid rgba(0, 0, 0, 1);
    font-size: 1.6667vw;
    margin: 0px 0px 0.52083vw 0px;
    padding: 0px 0px 1.04167vw 0px;
}
html.calendar #cyMsgBox>.contentArea>.content>.calendar>.dataArea{
    width: 100%;
}
html.calendar #cyMsgBox>.contentArea>.content>.calendar>.dataArea>ul{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
html.calendar #cyMsgBox>.contentArea>.content>.calendar>.dataArea>ul>li{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    margin: 0.52083vw 0px;
}
html.calendar #cyMsgBox>.contentArea>.content>.calendar>.dataArea>ul>li>label{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-basis: calc(1.04167vw * 5.5);
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: flex-start;
}
@media screen and (max-aspect-ratio: 4/3){
    html.calendar #cyMsgBox>.contentArea>.content>.calendar>.dataArea>ul>li>label{
        flex-basis: calc(4.375vw * 5.5);
    }
}
html.calendar #cyMsgBox>.contentArea>.content>.calendar>.dataArea>ul>li>div{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 100;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
}


/* =========================================================
 * 留言板
 * ========================================================= */
#wrap>.gbookFunction{
    width: 100%;
    background-color: rgba(60, 40, 106, 1);
    background-image: url(/images/gbookFunctionBackground.svg);
    background-repeat: no-repeat;
    background-size: auto 28.22729vw;
    background-position: right 0px bottom -50px;
    color: rgba(255, 255, 255, 1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.gbookFunction{
        background-size: 73vw auto;
        background-position: right bottom;
    }
}

#wrap>.gbookFunction>.viewArea{
    width: calc(100% - 6.25vw * 2);
    max-width: 1000px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 6% 6.25vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.gbookFunction>.viewArea{
        width: calc(100% - 3.125vw * 2);
        padding: 6% 3.125vw;
    }
    #wrap>.gbookFunction>.viewArea>.header{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    #wrap>.gbookFunction>.viewArea>.header>h1{

    }
    #wrap>.gbookFunction>.viewArea>.header>.buttons{
        width: 100%;
        margin: 3.75vw 0px;
    }
    #wrap>.gbookFunction>.viewArea>.header>.buttons>input[type='button']{
        border-radius: 0.9375vw;
    }
}

#wrap>.gbookFunction>.viewArea .faceImageArea>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

@media screen and (max-aspect-ratio: 4/3){
    #wrap>.gbookFunction>.viewArea>.normalTable>.tr{
        width: calc(100% - 3.125vw * 2);
        border-bottom: 1px solid rgba(200, 200, 200, 1);
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
        padding: 3.125vw;
    }
}
#wrap>.gbookFunction>.viewArea>.normalTable>.tr>.td{
    border-bottom: 1px solid rgba(200, 200, 200, 1);
    cursor: pointer;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.gbookFunction>.viewArea>.normalTable>.tr>.td{
        border-bottom: 0px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding: 0px;
    }
}
#wrap>.gbookFunction>.viewArea>.normalTable>.tr:hover>.td{
    background: rgba(238, 238, 238, 1);
}
#wrap>.gbookFunction>.viewArea>.normalTable>.tr:last-child>.td{
    border-bottom: 0px;
}
#wrap>.gbookFunction>.viewArea>.normalTable>.tr>.td[name='mainUser']{
    width: 50px;
    vertical-align: top;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.gbookFunction>.viewArea>.normalTable>.tr>.td[name='mainUser']{
        width: auto;
        align-items: flex-start;
        margin: 0px 3.125vw 0px 0px;
    }
}
#wrap>.gbookFunction>.viewArea>.normalTable>.tr>.td[name='mainUser']>.faceImageArea{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow:hidden;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.gbookFunction>.viewArea>.normalTable>.tr>.td[name='mainUser']>.faceImageArea{
        width: 7.8125vw;
        height: 7.8125vw;
    }
}
#wrap>.gbookFunction>.viewArea>.normalTable>.tr>.td[name='mainUser']>.faceImageArea.onerror{
    background: rgba(169, 169, 169, 1);
    background-image: url(/images/memberDefaultPhoto.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
#wrap>.gbookFunction>.viewArea>.normalTable>.tr>.td[name='mainUser']>.faceImageArea.onerror>img{
    display: none;
}

#wrap>.gbookFunction>.viewArea>.normalTable>.tr>.td[name='title']{
    font-size: 20px;
    text-align: justify;
    padding: calc(0.520833vw + 7.5px) 0.520833vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.gbookFunction>.viewArea>.normalTable>.tr>.td[name='title']{
        width: calc(100% - 7.8125vw * 2 - 3.125vw);
        font-size: 3.125vw;
        flex-grow: 1;
        padding: 1.5625vw 0px;
    }
}
#wrap>.gbookFunction>.viewArea>.normalTable>.tr>.td[name='lastTime']{
    width: 200px;
    vertical-align: top;
    color: rgba(149, 149, 149, 1);
    font-size: 17px;
    line-height: 50px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.gbookFunction>.viewArea>.normalTable>.tr>.td[name='lastTime']{
        width: calc(100% - 6.25vw * 2 - 3.125vw);
        height: auto;
        font-size: 3.125vw;
        line-height: unset;
        flex-grow: 1;
        justify-content: flex-end;
        padding: 0px;
    }
}
#wrap>.gbookFunction>.viewArea>.normalTable>.tr>.td[name='replyUser']{
    width: 35px;
    vertical-align: top;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.gbookFunction>.viewArea>.normalTable>.tr>.td[name='replyUser']{
        width: auto;
        margin: 0px 0px 0px 3.125vw;
    }
}
#wrap>.gbookFunction>.viewArea>.normalTable>.tr>.td[name='replyUser']>.faceImageArea{
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin: 7.5px 0px;
    overflow: hidden;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.gbookFunction>.viewArea>.normalTable>.tr>.td[name='replyUser']>.faceImageArea{
        width: 6.25vw;
        height: 6.25vw;
        margin: 0px;
    }
}
#wrap>.gbookFunction>.viewArea>.normalTable>.tr>.td[name='replyUser']>.faceImageArea.onerror{
    background: rgba(169, 169, 169, 1);
    background-image: url(/images/memberDefaultPhoto.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
#wrap>.gbookFunction>.viewArea>.normalTable>.tr>.td[name='replyUser']>.faceImageArea.onerror>img{
    display: none;
}

#wrap>.gbookFunction>.viewArea>.question{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
}
#wrap>.gbookFunction>.viewArea>.question>.faceImageArea{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.gbookFunction>.viewArea>.question>.faceImageArea{
        width: 18.75vw;
        height: 18.75vw;
    }
}
#wrap>.gbookFunction>.viewArea>.question>.faceImageArea.onerror{
    background: rgba(169, 169, 169, 1);
    background-image: url(/images/memberDefaultPhoto.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
#wrap>.gbookFunction>.viewArea>.question>.faceImageArea.onerror>img{
    display: none;
}
#wrap>.gbookFunction>.viewArea>.question>.info{
    width: calc(100% - 100px - 20px);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: stretch;
    margin: 0px 0px 0px 20px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.gbookFunction>.viewArea>.question>.info{
        width: calc(100% - 18.75vw - 10px);
        margin: 0px 0px 0px 10px;
    }
}
#wrap>.gbookFunction>.viewArea>.question>.info>.mainUser{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.gbookFunction>.viewArea>.question>.info>.mainUser{
        font-size: 3.125vw;
    }
}
#wrap>.gbookFunction>.viewArea>.question>.info>.date{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: center;
    margin: 0px 0px 0px 20px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.gbookFunction>.viewArea>.question>.info>.date{
        font-size: 3.125vw;
        justify-content: flex-start;
        order: 3;
        margin: 5px 0px 0px 0px;
    }
}
#wrap>.gbookFunction>.viewArea>.question>.info>h1{
    width: 100%;
    text-align: justify;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    margin: 10px 0px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.gbookFunction>.viewArea>.question>.info>h1{
        font-size: 5vw;
        order: 2;
        margin: 5px 0px 0px 0px;
    }
}
#wrap>.gbookFunction>.viewArea>.question>.content{
    width: calc(100% - 35px * 2);
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 1);
    font-size: 20px;
    text-align: justify;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    margin: 10px 0px 0px 0px;
    padding: 35px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.gbookFunction>.viewArea>.question>.content{
        width: calc(100% - 3.125vw * 2);
        font-size: 3.125vw;
        padding: 3.125vw;
    }
}

#wrap>.gbookFunction>.viewArea>.reply{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}
#wrap>.gbookFunction>.viewArea>.reply>li{
    width: calc(100% - (25px + 55px) - 70px);
    background: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 1);
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: stretch;
    margin: 60px 0px 0px 70px;
    padding: 25px 25px 25px 55px;
    position: relative;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.gbookFunction>.viewArea>.reply>li{
        width: calc(100% - (1.5625vw + 15.625vw / 2) - 3.125vw - (3.125vw + 15.625vw / 2));
        font-size: 3.125vw;
        margin: 4.6875vw 0px 0px calc(1.5625vw + 15.625vw / 2);
        padding: 3.125vw 3.125vw 3.125vw calc(3.125vw + 15.625vw / 2);
    }
}
#wrap>.gbookFunction>.viewArea>.reply>li>.faceImageArea{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: absolute;
    top: -30px;
    left: -30px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.gbookFunction>.viewArea>.reply>li>.faceImageArea{
        width: 15.625vw;
        height: 15.625vw;
        top: -1.5625vw;
        left: -7.8125vw;
    }
}
#wrap>.gbookFunction>.viewArea>.reply>li>.faceImageArea.onerror{
    background: rgba(169, 169, 169, 1);
    background-image: url(/images/memberDefaultPhoto.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}
#wrap>.gbookFunction>.viewArea>.reply>li>.faceImageArea.onerror>img{
    display: none;
}

#wrap>.gbookFunction>.viewArea>.reply>li>.replyUser{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
}
#wrap>.gbookFunction>.viewArea>.reply>li>.date{
    color: rgba(149, 149, 149, 1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: center;
    margin: 0px 0px 0px 20px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.gbookFunction>.viewArea>.reply>li>.date{
        flex-grow: 1;
        justify-content: flex-start;
        margin: 0px 0px 0px 0px;
    }
}
#wrap>.gbookFunction>.viewArea>.reply>li>.message{
    width: 100%;
    border-top: 1px solid rgba(200, 200, 200, 1);
    text-align: justify;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    margin: 20px 0px 0px 0px;
    padding: 20px 0px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.gbookFunction>.viewArea>.reply>li>.message{
        margin: 3.125vw 0px 0px 0px;
        padding: 3.125vw 0px 0px 0px;
    }
    #wrap>.gbookFunction>.viewArea .pageArea{
        flex-wrap: wrap;
    }
    #wrap>.gbookFunction>.viewArea .pageArea>.rightArea{
        margin: 3.125vw 0px 0px 0px;
    }
    #wrap>.gbookFunction>.viewArea .pageArea>.rightArea>input[type='button']{
        flex-grow: 1;
    }
}


/* =========================================================
 * 訊息 (共用)
 * ========================================================= */
#wrap>.messageFunction{
    width: 100%;
    background-color: rgba(114, 59, 98, 1);
    background-image: url(/images/messageFunctionBackground.svg);
    background-repeat: no-repeat;
    background-size: auto 27.98755vw;
    background-position: right bottom -50px;
    color: rgba(255, 255, 255, 1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.messageFunction{
        background-size: 73vw auto;
        background-position: right bottom;
    }
}
#wrap>.messageFunction>.viewArea{
    width: calc(100% - 6.25vw * 2);
    max-width: 1000px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 6% 6.25vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.messageFunction>.viewArea{
        width: calc(100% - 3.125vw * 2);
        padding: 6% 3.125vw;
    }
    #wrap>.messageFunction>.viewArea>.header{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    #wrap>.messageFunction>.viewArea>.header>h1{

    }
    #wrap>.messageFunction>.viewArea>.header>.buttons{
        width: 100%;
        margin: 3.75vw 0px;
    }
    #wrap>.messageFunction>.viewArea>.header>.buttons>input[type='button']{
        border-radius: 0.9375vw;
    }
}
#wrap>.messageFunction>.viewArea .messageTable{
    width: calc(100% - 1.04167vw * 2);
    max-width: calc(1000px - 1.04167vw * 2);
    background: rgba(255, 255, 255, 1);
    font-size: 1.04167vw;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 1.04167vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.messageFunction>.viewArea .messageTable{
        width: calc(100% - 3.125vw * 2);
        font-size: 3.125vw;
        padding: 3.125vw;
    }
}
#wrap>.messageFunction>.viewArea .messageTable>li{
    width: calc(100% - 20px * 2);
    color: rgba(0, 0, 0, 1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.52083vw 20px;
    position: relative;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.messageFunction>.viewArea .messageTable>li{
        width: 100%;
        margin: 4.375vw 0px 0px 0px;
        padding: 0px;
    }
    #wrap>.messageFunction>.viewArea .messageTable>li:first-child{
        margin: 0px;
    }
}
#wrap>.messageFunction>.viewArea .messageTable>li.title{
    border-bottom: 1px solid rgba(0, 0, 0, 1);
    margin: 0px 0px 0.52083vw 0px;
    padding: 0px 1.04167vw 1.04167vw 1.04167vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.messageFunction>.viewArea .messageTable>li.title{
        width: 100%;
        padding: 0px 0px 3.125vw 0px;
    }
}
#wrap>.messageFunction>.viewArea .messageTable>li>label.checkBox{
    display: flex;
    text-align: justify;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 1;
    justify-content: flex-start;
    align-items: center;
    margin: 0px 1.04167vw 0px 1.302083vw;
    position: relative;
    cursor: pointer;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.messageFunction>.viewArea .messageTable>li>label.checkBox{
        margin: 0px 3.125vw 0px calc(3.125vw + 1.7188vw);
    }
}
#wrap>.messageFunction>.viewArea .messageTable>li>label.checkBox input[type=checkbox]{
    width: 1.04167vw;
    visibility: hidden;
    margin: 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.messageFunction>.viewArea .messageTable>li>label.checkBox input[type=checkbox]{
        width: 3.125vw;
    }
}
#wrap>.messageFunction>.viewArea .messageTable>li>label.checkBox span{
    width: 1.302083vw;
    height: 1.302083vw;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 1);
    border-radius: 0.2604167vw;
    position: absolute;
    left: -1.302083vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.messageFunction>.viewArea .messageTable>li>label.checkBox span{
        width: 3.75vw;
        height: 3.75vw;
        border-radius: 0.625vw;
        left: -4.5vw;
    }
}
#wrap>.messageFunction>.viewArea .messageTable>li>label.checkBox:hover input ~ span {
    background-color: rgba(238, 238, 238, 1);
}
#wrap>.messageFunction>.viewArea .messageTable>li>label.checkBox input:active ~ span {
    background-color: rgba(255, 255, 255, 1);
}
#wrap>.messageFunction>.viewArea .messageTable>li>label.checkBox input:checked ~ span {
    background-color: rgba(255, 255, 255, 1);
}
#wrap>.messageFunction>.viewArea .messageTable>li>label.checkBox span:after {
    content: '';
    display: none;
    position: absolute;
}
#wrap>.messageFunction>.viewArea .messageTable>li>label.checkBox input:checked ~ span:after {
    display: block;
}
#wrap>.messageFunction>.viewArea .messageTable>li>label.checkBox span:after {
    width: 0.3125vw;
    height: 0.625vw;
    border: solid rgba(0, 0, 0, 1);
    border-width: 0px 0.20833vw 0.20833vw 0px;
    left: 0.416667vw;
    bottom: 0.2604167vw;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.messageFunction>.viewArea .messageTable>li>label.checkBox span:after {
        width: 0.9vw;
        height: 1.8vw;
        border-width: 0px 0.6vw 0.6vw 0px;
        left: 1.2vw;
        bottom: 0.75vw;
    }
}
#wrap>.messageFunction>.viewArea .messageTable>li.alert{
    position: relative;
}
#wrap>.messageFunction>.viewArea .messageTable>li.alert:after{
    content: '';
    width: 16px;
    height: 16px;
    background: rgba(255, 0, 0, 1);
    border-radius: 8px;
    position: absolute;
    top: calc(0.52083vw - 16px / 3);
    right: calc(20px - 16px / 3);
    z-index: 2;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.messageFunction>.viewArea .messageTable>li.alert:after{
        width: 4vw;
        height: 4vw;
        border-radius: 2vw;
        top: calc(-1 * 4vw / 3);
        right: calc(-1 * 4vw / 3);
    }
}
html.message #cyMsgBox video{
    width: 100%;
}

/* =========================================================
 * OOPS
 * ========================================================= */
#wrap>.oops{
    width: 100%;
    background: url(/images/indexBackground.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    align-items: flex-start;
}
#wrap>.oops:after{
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(
        45deg,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.3) 35%,
        rgba(0, 0, 0, 0.3) 65%,
        rgba(0, 0, 0, 1) 100%
    );
    background-size: 150% 150%;
    background-position: center center;
    position: absolute;
    top: 0%;
    left: 0%;
}
#wrap>.oops>.viewArea{
    width: calc(100% - 6.25vw * 2);
    max-width: 1000px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 6% 6.25vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.oops>.viewArea{
        width: calc(100% - 3.125vw * 2);
        padding: 6% 3.125vw;
    }
}
#wrap>.oops>.viewArea>h1{
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    color: #FFFFFF;
    font-size: 1.6667vw;
    font-weight: normal;
    margin: 0px 0px 10% 0px;
    padding: 0px 0px 1.666vw 0px;
    z-index: 1;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.oops>.viewArea>h1{
        font-size: 5.9375vw;
        padding: 0px 0px 5.9375vw 0px;
    }
}
#wrap>.oops>.viewArea>.messageArea{
    color: #FFFFFF;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
}
#wrap>.oops>.viewArea>.messageArea>div{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    margin: 0px 0px 10vh 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.oops>.viewArea>.messageArea>div{
        flex-direction: column;
    }
}
#wrap>.oops>.viewArea>.messageArea>div>h2{
    font-size: 8vw;
    line-height: 8vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.oops>.viewArea>.messageArea>div>h2{
        font-size: 20vw;
        line-height: normal;
    }
}
#wrap>.oops>.viewArea>.messageArea>div>em{
    font-size: 3vw;
    font-style: normal;
    line-height: 3vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.oops>.viewArea>.messageArea>div>em{
        font-size: 6vw;
        font-style: normal;
        line-height: normal;
    }
}
#wrap>.oops>.viewArea>.messageArea>p{
    font-size: 1.6667vw;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>.oops>.viewArea>.messageArea>p{
        font-size: 4.375vw;
        margin: 0px 10vw;
    }
}


/* =========================================================
 * 頁碼
 * ========================================================= */
#wrap .pageArea{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 20px 0px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap .pageArea{
        margin: 6.25vw 0px 0px 0px;
    }
}
#wrap .pageArea>.pageContent{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
}
#wrap .pageArea>.pageContent>input[type='button']{
    width: auto;
    min-width: auto;
    height: 50px;
    background: transparent;
    border: 0px;
    filter: none;
    color: rgba(255, 255, 255, 1);
    font-size: 20px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0px 10px;
    padding: 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap .pageArea>.pageContent>input[type='button']{
        height: 9.375vw;
        font-size: 3.75vw;
        margin: 0px 1.875vw;
    }
}
#wrap .pageArea>.pageContent>input[type='button']:first-of-type{
    margin: 0px 10px 0px 0px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap .pageArea>.pageContent>input[type='button']:first-of-type{
        margin: 0px 1.875vw 0px 0px;
    }
}
#wrap .pageArea>.pageContent>input[type='button']:last-of-type{
    margin: 0px 0px 0px 10px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap .pageArea>.pageContent>input[type='button']:last-of-type{
        margin: 0px 0px 0px 1.875vw;
    }
}
#wrap .pageArea>.pageContent>ul{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0px 10px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap .pageArea>.pageContent>ul{
        margin: 0px 1.875vw;
    }
}
#wrap .pageArea>.pageContent>ul>li{
    width: 50px;
    height: 50px;
    color: rgba(255, 255, 255, 1);
    font-size: 20px;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin: 0px 2.5px;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap .pageArea>.pageContent>ul>li{
        width: 9.375vw;
        height: 9.375vw;
        font-size: 3.75vw;
        margin: 0px 2.5px;
    }
}
#wrap .pageArea>.pageContent>ul>li.current{
    background: rgba(0, 0, 0, 1);
    border-radius: 5px;
}

#wrap .pageArea>.rightArea{
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: flex-end;
    align-items: center;
}
#wrap .pageArea>.rightArea>input[type='button']{
    width: auto;
    flex-grow: 0;
}


/* =========================================================
 * 頁尾區塊
 * ========================================================= */
#wrap>footer{
    width: 100%;
    height: 2.601467vw;
    background-color: rgba(26, 26, 26, 1);
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    flex-grow: 0;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>footer{
        height: 9.375vw;
    }
}

#wrap>footer>section{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
}
#wrap>footer>section>.viewArea{
    color: rgba(255, 255, 255, 1);
    font-size: 0.729167vw;
    font-weight: normal;
    text-align: center;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
@media screen and (max-aspect-ratio: 4/3){
    #wrap>footer>section>.viewArea{
        font-size: 3.75vw;
    }
}