/* »ö»ó Á¤ÀÇ */
:root { /*** root¿¡´Â °¢ ¼Ó¼º°ªµéÀ» 'Á¤ÀÇ'¸¸ ÇÑ´Ù ***/
    --color_gray_pale_0: #f7f8fa;
    --color_gray_pale_4: #c7cbd1;
    --color_gray_pale_5: #b3bbc5;
    --color_gray_pale_6: #718093;
    --color_gray_pale_7: #3d4861;
    --color_gray_pale_8: #182031;
    --color_gray_neutral_7: #4b4f5a;
    --color_red_7: #cc1f3b;
    --color_red_8: #971b2f;
}

/** {
    font-family: 'NotoSansKR-Regular', 'Noto Sans KR', 'Meiryo', 'áäô÷', 'Noto Sans', 'Dotum', 'Gulim', 'sans-serif';
}*/

/* ·Î±×ÀÎ È­¸é °øÅë ºÎºÐ */
#LoginContainer button, a {
    /* outline: none;
    border: none;
    background: none; */
    all: unset;
    cursor: pointer;
}
#LoginContainer input:focus {
    outline: none;
}
#LoginContainer .LoginInput {
    border-radius: 10px;
    border: solid 1px var(--color_gray_pale_5);
    width: 100%;
    height: 56px;
    padding: 10px 20px;
    font-size: 20px;
}


/* ÄÁÅ×ÀÌ³Ê */
#LoginContainer {
    height: 100vh;
    background-color: var(--color_gray_pale_8);
    display: flex;
    align-items: center;
    font-family: NotoSansKR-Regular;
}
#LoginContainer > div:first-of-type {
    /* background-color: greenyellow; */
    background: url("../Contents/Images/Login/img_global@2x.png") no-repeat center;
    background-size: 100%;
    position: absolute;
    left: 0;
    right: 500px;
    top: 0;
    bottom: 0;
}
#LoginContainer > div:last-of-type {
    display: flex;
    flex: 1;
}
#LoginLeftContainer {
    flex: 1;
}
#LoginRightContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background-color: #fff;
    width: 600px;
    /* height: 820px; */
    margin-right: 120px;
    z-index: 10;

    border-radius: 20px;
    box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.1);

    font-size: 16px;
}
@media (max-width: 1500px), (max-height: 1000px) {
    #LoginContainer > div:last-of-type {
        height: 100%;
    }
    #LoginLeftContainer {
        position: relative;
    }
    #LoginRightContainer {
        margin-right: 0;
        border-radius: 0;
        box-shadow: none;
    }
}
@media (max-width: 1200px) {
    #LoginContainer {
        background-color: white;
        height: 100%;
    }
    #LoginContainer > div:first-of-type {
        justify-content: center;
    }
    #LoginLeftContainer {
        display: none;
    }
    #LoginRightContainer {
        width: 100%;
    }
}
@media (max-width: 1200px) and (max-height: 936px) {
    #LoginContainer {
        height: auto;
    }
}
@media (max-width: 600px) {
    #LoginContainer {
        height: 100%;
    }
}
@media (max-width: 600px) and (max-height: 917px) {
    #LoginContainer {
        height: auto;
    }
}
@media (max-height: 742px) {
    #LoginContainer {
        height: auto;
    }
}

/* ¿À¸¥ÂÊ ·Î±×ÀÎ ÀÔ·Â ºÎºÐ */
#LoginRightContainer > .top {
    padding: 72px 72px 25px 72px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#LoginRightContainer > .top input[type="radio"] {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Chrome, Safari, Opera */
    transform: scale(1.5);
    accent-color: #9d1f3a;
}
/* ¿À¸¥ÂÊ ·Î±×ÀÎ ÀÔ·Â ºÎºÐ - Save ID üũ¹Ú½º */
#LoginRightContainer > .top rememberID:hover {
    cursor: pointer;
}
/* ¿À¸¥ÂÊ ·Î±×ÀÎ ÀÔ·Â ºÎºÐ - ·Î±×ÀÎ ¹öÆ° */
#LoginRightContainer > .top #BtnLogin {
    width:100%;
    height:56px;
    background-color:var(--color_red_8);
    /*background-color: #e0b7ae;*/
    color:#fff;
    text-align:center;
    border-radius:10px;
}
#LoginRightContainer > .top #BtnLogin.active {
    background-color:var(--color_red_8);
}
/* ¿À¸¥ÂÊ ·Î±×ÀÎ ÀÔ·Â ºÎºÐ - ·Î±×ÀÎ ¹öÆ° ·Îµù ó¸® */
#LoginRightContainer > .top #BtnLogin > span {
    display: inline-block;
}
#LoginRightContainer > .top #BtnLogin:disabled > span {
    display: none;
}
#LoginRightContainer > .top #BtnLogin > img {
    display: none;
}
#LoginRightContainer > .top #BtnLogin:disabled > img {
    display: inline-block;
}

/* ¿À¸¥ÂÊ ·Î±×ÀÎ ÀÔ·Â ºÎºÐ - °øÁö»çÇ× */
#LoginRightContainer > .bottom {
    padding: 0px 14px 15px 16px;
}
#LoginRightContainer > .bottom #NoticeContainer {
    height:48px;
    display:flex;
    justify-content:space-between;
    background-color:var(--color_gray_pale_0);
    border-radius: 8px;
    padding-left: 20px;
    padding-right: 24px;
}
#LoginRightContainer > .bottom #NoticeContainer:hover {
    cursor: pointer;
}
#LoginRightContainer > .bottom #NoticeContainer > div {
    display: flex;
    align-items: center;
}
@media (max-width: 1500px), (max-height: 1000px) {
    #LoginRightContainer > .top {
        justify-content: center;
    }
}
@media (max-width: 1200px) {
    #LoginRightContainer > .bottom {
        padding: 0px 64px 15px 64px;
    }
}
@media (max-width: 600px) {
    #LoginRightContainer > .top {
        padding: 30px 30px 15px 30px;
    }
    #LoginRightContainer > .bottom {
        padding: 0px 30px 15px 30px;
    }
}
@media (max-height: 768px) {
    #LoginRightContainer > .top {
        padding-top: 52px;
    }
}



/* ¶óÀ̺ê Ä«¿îÆ® */
#LoginLiveCountContainer {
    /* background-color: yellow; */
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    display: flex;
    align-items: center;
}
#LoginLiveCountContainer > div {
    /*background-color: darkolivegreen;*/
    color: #fff;
    padding-left: 120px;
}
/* ¶óÀ̺ê Ä«¿îÆ® - ¾Ö´Ï¸ÞÀÌ¼Ç ½Ã ÆùÆ® Àû¿ë*/
#LoginLiveCountContainer #wwbtTotalCount span, 
#LoginLiveCountContainer #wwbtTotalCount .odometer-digit-spacer,
#LoginLiveCountContainer #wwbtTotalCount .odometer-animating,
#LoginLiveCountContainer #wwbtTotalCount .odometer-animating-up,
#LoginLiveCountContainer #wwbtTotalCount .odometer-animating-down,
#LoginLiveCountContainer #wwbtTotalCount .odometer-value {
    font-family:NotoSans-Bold !important;
}
@media (max-width: 1500px), (max-height: 1000px) {
    #LoginLiveCountContainer > div {
        padding-left: 64px !important;
    }
    #LoginLiveCountContainer #wwbtTotalCount {
        font-size: 72px !important;
    }
}
@media (max-height: 1000px) {
    #LoginLiveCountContainer {
        display: flex;
        align-items: flex-start;
    }
    #LoginLiveCountContainer > div {
        position: relative;
        top: 25%;
    }
}


/* Footer ºÎºÐ */
#LoginContainer .LoginFooterContainer {
    width: 100%;
    height: 200px;
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 12px;
    color: var(--color_gray_pale_5);
}
/* Footer ºÎºÐ - À§ ¹öÆ°µé */
#LoginContainer .LoginFooterContainer .upper {
    display:flex;
    /*background-color: red;*/
    height: 100px;
    text-align: center;
    /*color: var(--color_gray_pale_5);*/
    
    padding-left: 124px;
}
#LoginContainer .LoginFooterContainer .upper > div {
    margin-right: 16px; 
}
#LoginContainer .LoginFooterContainer .upper .ButtonContainer button {
    width:64px;
    height:64px;
    background-color: #2f3646;
    border-radius: 50%;
}
#LoginContainer .LoginFooterContainer .upper .ButtonContainer button img {
    width:40px;
    height:40px;
}
/* Footer ºÎºÐ - ¾Æ·¡ ȸ»ç Á¤º¸ ºÎºÐ */
#LoginContainer .LoginFooterContainer .lower {
    display: flex;
    align-items: center;
    justify-content: space-between;

    /*background-color: blue;*/
    height: 100px;
    padding-left: 64px;
    padding-right: 64px;
}
#LoginContainer .LoginFooterContainer .lower .lowerLeft {
    display:flex; 
    height:38px;
}
#LoginContainer .LoginFooterContainer .lower .lowerRight {
    display:flex;
    align-items: center;
    height: 46px;
}
#LoginContainer .LoginFooterContainer .lower .lowerRight > div:first-of-type {
    padding: 0px 32px;
}
#LoginContainer .LoginFooterContainer .lower .lowerRight > div.SelectLangConatiner {
    border-radius: 8px;
    border: solid 1px var(--color_gray_pale_5);   
}
@media (max-width: 1500px), (max-height: 1000px) {   
    #LoginContainer .LoginFooterContainer {
        height: auto;
    }
    #LoginContainer .LoginFooterContainer .upper {
        height: 100px;
        padding-left: 68px;
    }
    #LoginContainer .LoginFooterContainer .lower {
        height: auto;
        flex-direction: column;
        justify-content: initial;
        align-items: flex-start;
    }
    #LoginContainer .LoginFooterContainer .lower .lowerLeft {
        flex-direction: column;
        height: auto;
    }
    #LoginContainer .LoginFooterContainer .lower .lowerLeft > div:first-of-type {
        margin-bottom: 6px;
    }
    #LoginContainer .LoginFooterContainer .lower .lowerRight {
        /* flex-direction: column;
        align-items: flex-start; */
        height: auto;
        margin: 8px 0 32px 0;
    }
    #LoginContainer .LoginFooterContainer .lower .lowerRight > div:first-of-type {
        padding: 0;
        margin-right: 32px;
    }
}
@media (max-width: 1200px) {
    #LoginContainer .LoginFooterContainer .lower .lowerRight {
        width: 100%;
        justify-content: space-between;
    }
}
@media (max-width: 600px) {
    #LoginContainer .LoginFooterContainer .upper {
        height: 100px;
        padding-left: 30px;
        display: flex;
        justify-content: center;
    }
    #LoginContainer .LoginFooterContainer .lower {
        font-size: 11px;
    }
}


/* ¿À¸¥ÂÊ ·Î±×ÀÎ ÀÔ·Â ºÎºÐ - ¾Æ·¡ ¼û°ÜÁø Footer */
#LoginContainer #LoginRightContainer .LoginFooterContainer {
    display: none;
}
@media (max-width: 1200px) {
    #LoginContainer #LoginRightContainer .LoginFooterContainer {
        position: static;
    }
    /* ¿À¸¥ÂÊ ·Î±×ÀÎ ÀÔ·Â ºÎºÐ - ¾Æ·¡ ¼û°ÜÁø Footer¸¦ Ç¥½Ã */
    #LoginContainer #LoginRightContainer .LoginFooterContainer {
        display: flex;
        flex-direction: column;
        color: var(--color_gray_pale_7);
    }
    #LoginContainer #LoginRightContainer .LoginFooterContainer .upper.empty {
        height: 0;
    }
}
@media (max-width: 600px) {
    #LoginContainer #LoginRightContainer .LoginFooterContainer .lower {
        padding-left: 30px;
        padding-right: 30px;
    }
    #LoginContainer #LoginRightContainer .LoginFooterContainer .lower .lowerRight > div:first-of-type {
        margin-right: 5px;
    }
    #LoginContainer #LoginRightContainer .LoginFooterContainer .lower .lowerRight .buttonLinks > button {
        display: block;
        font-size: 12px;
    }
    #LoginContainer #LoginRightContainer .LoginFooterContainer .lower .lowerRight .buttonLinks > span {
        display: none;   
    }
}


/* ¾ð¾î ¼³Á¤ ¹öÆ° */
#LoginContainer .LoginFooterContainer .lower .lowerRight .btn_select_lang {
    display: flex;
    align-items: center;
    padding: 10px 16px 10px 16px;
    font-size: 14px;
}
@media (max-width: 600px) {
    #LoginContainer .LoginFooterContainer .lower .lowerRight .btn_select_lang {
        padding: 8px 10px;
        font-size: 12px;
    }
}


/* ¾ð¾î ¼³Á¤ Æ˾÷ */
#LoginContainer .LoginFooterContainer .popupMenuLang {
    background-color: white;
    display: none;
    position: absolute;
    padding: 16px;
    border-radius: 10px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    z-index: 100;
}
#LoginContainer .LoginFooterContainer .popupMenuLang > .selectedLang__item {
    font-weight: bold;
    color: #2f384d;
}
#LoginContainer .LoginFooterContainer .popupMenuLang__item {
    padding: 4px;
    font-size: 12px;
    line-height: 1.29;
    letter-spacing: normal;
    text-align: left;
    color: #718093;
    user-select: none;
}
#LoginContainer .LoginFooterContainer .popupMenuLang__item:hover {
    background-color: rgba(100, 100, 100, 0.1);
    cursor: pointer;
}

/* ¾ð¾î ¼³Á¤ Æ˾÷ - visibility »óÅ¿¡ µû¶ó, JavaScript¿¡¼­ µÑ Áß¿¡ Çϳª¸¦ ¼±ÅÃÇϵµ·Ï ó¸® */
#LoginLeftContainer .LoginFooterContainer .popupMenuLang,
#LoginLeftContainer .LoginFooterContainer .btn_select_lang {
    visibility: visible;
}
#LoginRightContainer .LoginFooterContainer .popupMenuLang,
#LoginRightContainer .LoginFooterContainer .btn_select_lang {
    visibility: hidden;
}
@media (max-width: 1200px) {
    #LoginLeftContainer .LoginFooterContainer .popupMenuLang,
    #LoginLeftContainer .LoginFooterContainer .btn_select_lang {
        visibility: hidden;
    }
    #LoginRightContainer .LoginFooterContainer .popupMenuLang,
    #LoginRightContainer .LoginFooterContainer .btn_select_lang {
        visibility: visible;
    }
}