@charset "utf-8";

body.on {
    touch-action: none;
    overflow: hidden !important;
    -webkit-user-select: none;
}

html.on {
    touch-action: none;
    overflow: hidden !important;
    overscroll-behavior: none;
    -webkit-user-select: none;
}

#load {
    display: none;
    z-index: 999999999;
}

input[type=search] {
    padding-right: 15px;
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    width: calc(100vw * (10/375));
    height: calc(100vw * (10/375));
    background-color: transparent;
    background: url(../image/sub/up_x_btn.png);
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-border-radius: 0;
    cursor: pointer;
}

.loading-container {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .6);
    z-index: 99999999999;
    display: flex;
    align-items: center;
    justify-content: center
}

.loading-container .loading {
    width: calc(100vw * (100/640));
    height: calc(100vw * (100/640));
    border-radius: 50%;
    border: 2px solid transparent;
    border-color: transparent #fff transparent #FFF;
    -moz-animation: rotate-loading 1.5s linear 0s infinite normal;
    -moz-transform-origin: 50% 50%;
    -o-animation: rotate-loading 1.5s linear 0s infinite normal;
    -o-transform-origin: 50% 50%;
    -webkit-animation: rotate-loading 1.5s linear 0s infinite normal;
    -webkit-transform-origin: 50% 50%;
    animation: rotate-loading 1.5s linear 0s infinite normal;
    transform-origin: 50% 50%
}

.loading-container #loading-text {
    -moz-animation: loading-text-opacity 2s linear 0s infinite normal;
    -o-animation: loading-text-opacity 2s linear 0s infinite normal;
    -webkit-animation: loading-text-opacity 2s linear 0s infinite normal;
    animation: loading-text-opacity 2s linear 0s infinite normal;
    color: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(100vw * (10/640));
    font-weight: bold;
    opacity: 0;
    text-align: center;
    text-transform: uppercase;
    width: calc(100vw * (100/640))
}

@keyframes rotate-loading {
    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -moz-transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -moz-transform: rotate(360deg)
    }
}

@-moz-keyframes rotate-loading {
    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -moz-transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -moz-transform: rotate(360deg)
    }
}

@-webkit-keyframes rotate-loading {
    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -moz-transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -moz-transform: rotate(360deg)
    }
}

@-o-keyframes rotate-loading {
    0% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -moz-transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -moz-transform: rotate(360deg)
    }
}

@keyframes loading-text-opacity {
    0% {
        opacity: 0
    }

    20% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-moz-keyframes loading-text-opacity {
    0% {
        opacity: 0
    }

    20% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-webkit-keyframes loading-text-opacity {
    0% {
        opacity: 0
    }

    20% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-o-keyframes loading-text-opacity {
    0% {
        opacity: 0
    }

    20% {
        opacity: 0
    }

    50% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

/* header */
#header {
    display: flex;
    align-items: center;
    padding: calc(100vw * (20/375)) calc(100vw * (12/375)) calc(100vw * (2/375));
    .header_logo {
        font-size: calc(100vw * (24/375));
        font-weight: 500;
        width: calc(100vw * (28/375));
		margin-left:calc(100vw * (8 / 375));
    }
    .header_ham_btn {
        width: calc(100vw * (30/375));
    }
    .header_bell {
        width: calc(100vw * (30/375));
        margin: 0 calc(100vw * (6/375));
        margin-left: auto;
    }
    .header_bell.on::after {
        content: '';
        width: calc(100vw * (7 / 375));
        height: calc(100vw * (7 / 375));
        border-radius: 50%;
        position: absolute;
        top: calc(100vw * (2 / 375));
        right: calc(100vw * (6 / 375));
        background-color: #0093ce;
        display: block;
    }
}



/* END header */

/* footer */

#footer {
    padding: calc(100vw * (20/375)) calc(100vw * (20/375)) calc(100vw * (130/375));
    .footer_logo {
        width: calc(100vw * (72/375));
        margin-bottom: calc(100vw * (20/375));
    }
    .footer_etc {
        display: flex;
        align-items: center;
        gap: calc(100vw * (12/375));
        font-size: calc(100vw * (14/375));
    }
    .footer_line {
        width: 1px;
        height: calc(100vw * (12/375));
        background-color: #999;
    }
    .top_btn {
        width: calc(100vw * (40/375));
        height: calc(100vw * (40/375));
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 0;
        top: 0;
        box-shadow: 0px 6px 20px 0px rgba(0, 0, 0, 0.12);
    }
    .footer_info {
        margin-top: calc(100vw * (17/375));
        font-size: calc(100vw * (12/375));
        font-weight: 400;
        color: #767676;
    }
    .footer_fixed {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        box-shadow: 0px -3px 12px 0px rgba(0, 0, 0, 0.12);
        height: calc(100vw * (84/375));
        z-index: 10000;
        border-radius: calc(100vw * (24/375)) calc(100vw * (24/375)) 0 0;
    }
    .footer_btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        gap: calc(100vw * (6/375));
        font-size: calc(100vw * (12/375));
        color: #c2c2c2;
        font-weight: 400;
        flex: 1;
    }
    .footer_btn_logo {
        display: block;
        width: calc(100vw * (20/375));
        height: calc(100vw * (20/375));
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .footer_btn.btn1 .footer_btn_logo{background-image: url(../image/common/footer_btn1.png);}
    .footer_btn.btn2 .footer_btn_logo{background-image: url(../image/common/footer_btn2.png);}
    .footer_btn.btn3 .footer_btn_logo{background-image: url(../image/common/footer_btn3.png);}
    .footer_btn.on {color: #202020;}
    .footer_btn.btn1.on .footer_btn_logo{background-image: url(../image/common/footer_btn1_on.png);}
    .footer_btn.btn2.on .footer_btn_logo{background-image: url(../image/common/footer_btn2_on.png);}
    .footer_btn.btn3.on .footer_btn_logo{background-image: url(../image/common/footer_btn3_on.png);}
    .footer_center {
        width: calc(100vw * (64/375));
		img {
			width:100%;
		}
    }
}

/* END footer */

/* gnb */
.gnb_wrap {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: transparent;
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -o-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    overflow: auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: rgba(244, 244, 249, 0.4);
    backdrop-filter: blur(5px);
}

.gnb_big_wrap.on .gnb_wrap {
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    -o-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%);
}

.gnb_big_wrap.close .gnb_wrap {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    -o-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: 0;
    -moz-transition: 0;
    -ms-transition: 0;
    -o-transition: 0;
    transition: 0;
}

.gnb_box {
    flex: 1;
    background-color: #F3F3F3;
    padding: calc(100vw * (20/375)) calc(100vw * (12/375));
	padding-bottom: calc(100vw * (154 / 375));
    .gnb_top {
        display: flex;
        align-items: center;
    }
    .gnb_name {
        font-size: calc(100vw * (16/375));
        font-weight: 700;
        max-width: calc(100vw * (180/375));
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .header_bell {
        width: calc(100vw * (30/375));
        margin: 0 calc(100vw * (6/375));
    }
    .header_bell.on::after {
        content: '';
        width: calc(100vw * (7 / 375));
        height: calc(100vw * (7 / 375));
        border-radius: 50%;
        position: absolute;
        top: calc(100vw * (2 / 375));
        right: calc(100vw * (6 / 375));
        background-color: #0093ce;
        display: block;
    }
    .gnb_xbtn {
        width: calc(100vw * (30/375));
    }
    .gnb_qr {
        display: flex;
        align-items: center;
        color: #fff;
        border-radius: calc(100vw * (50/375));
        background-color: #202020;
        padding: calc(100vw * (4/375)) calc(100vw * (8/375));
        font-size: calc(100vw * (14/375));
        gap: calc(100vw * (10/375));
        margin-left: auto;
    }
    .gnb_qr img {
        width: calc(100vw * (24/375));
    }
    .gnb_btn_box {
        padding: calc(100vw * (8/375));
        border-radius: calc(100vw * (18/375));
        display: flex;
        flex-direction: column;
        gap: calc(100vw * (8/375));
        background-color: #fff;
        margin-top: calc(100vw * (20/375));
    }
    .top_btn_row {
        display: flex;
        align-items: center;
        gap: calc(100vw * (6/375));
    }
    .top_btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: calc(100vw * (10/375));
        background-color: #f3f3f3;
        border-radius: calc(100vw * (8/375));
        padding: calc(100vw * (20/375)) calc(100vw * (12/375));
    }
    .btn_val {
        display: flex;
        align-items: center;
        color: #c2c2c2;
        font-size: calc(100vw * (16/375));
        line-height: calc(100vw * (16/375));
    }
    .btn_val span {
        color: #202020;
        font-weight: 700;
        margin-right: calc(100vw * (2/375));
    }
    .btn_val svg {
        margin-left: auto;
    }
    .benefit_btn {
        display: flex;
        align-items: center;
        gap: calc(100vw * (10/375));
        justify-content: center;
        font-size: calc(100vw * (14/375));
        font-weight: 700;
        background-color: #f2f6f5;
        border-radius: calc(100vw * (8/375));
        padding: calc(100vw * (16/375)) calc(100vw * (12/375));
    }
    .benefit_btn img {
        width: calc(100vw * (24/375));
    }
    .gnb_btn_group {
        display: flex;
        flex-direction: column;
        margin: calc(100vw * (16/375)) 0 calc(100vw * (30/375));
    }
    .gnb_btn {
        display: flex;
        align-items: center;
        padding: calc(100vw * (20/375)) 0;
        border-bottom: 1px solid #e4e4e4;
    }
    .gnb_btn img {
        width: calc(100vw * (22/375));
        margin-right: calc(100vw * (8/375));
    }
    .gnb_btn svg {
        margin-left: auto;
    }
	.gnb_btn_sns {
		display: flex;
		flex-direction: column;
		padding: calc(100vw * (20/375)) calc(100vw * (16/375));
		gap: calc(100vw * (12/375));
		border-radius: calc(100vw * (8/375));
		border: 1px solid var(--lineColor, #E4E4E4);
		background: var(--white, #FFF);
		margin-bottom:calc(100vw * (40/375));
		.title {
			width: 100%;
			font-size: calc(100vw * (15/375));
			font-weight: 400;
		}
		.btn_area {
			display: flex;
			width: 100%;
			gap: calc(100vw * (6 / 375));
			.com_btn {
				width: calc((100% - (100vw * (6 / 375)) / 2));
				background-color: transparent;
				color:#202020;
				font-size:calc(100vw * (14/375));
				font-weight:600;
				display:flex;
				gap: calc(100vw * (12/375));
				border-radius:calc(100vw * (5/375));
				padding:0;
				height:calc(100vw * (46/375));
				border: 1px solid var(--lineColor, #E4E4E4);
				img {
					width:calc(100vw * (24 / 375));
				}
			}
		}
	}
    .signout_btn {
        display: flex;
        align-items: center;
        gap: calc(100vw * (18/375));
		border-radius: calc(100vw * (4/375));
        border: 1px solid var(--textLightGrey, #C2C2C2);
        width: fit-content;
        padding: calc(100vw * (16 / 375));
    }
}

/* END gnb */

/* sub_header */
.sub_header {
    background-color: #f3f3f3;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 calc(100vw * (15/375));
    height: calc(100vw * (60/375));
    z-index: 100;
}
.login_img {
	img {
		width:100%;
	}
}

.sub_header.pw {
    background-color: #F4F4F9;
}

.sub_header_box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.back_link {
    width: calc(100vw * (36/375));
    height: calc(100vw * (36/375));
    display: block;
}

.sub_header .right {
    display: flex;
    align-items: center;
    gap: calc(100vw * (21/375));
}

.sub_header .left {
    display: flex;
    gap: calc(100vw * (10/375));
    align-items: center;
}

.sub_header .name {
    font-weight: 600;
    font-size: calc(100vw * (16/375));
    line-height: 1em;
    height: calc(100vw * (30/375));
    display: flex;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	text-align: center;
}

.sub_header .h_menu {
    width: calc(100vw * (36/375));
}

.sub_header .sub_home {
    width: calc(100vw * (26/375));
}

.sub_header .sub_right {
    display: flex;
    gap: calc(100vw * (6/375));
}

.sub_header .sub_right .home_btn {
    width: calc(100vw * (30/375));
    height: calc(100vw * (30/375));
}

.sub_header.card_header {
    background-color: #fff;
}

.card_cancel {
    font-size: calc(100vw * (14/375));
    font-weight: 600;
    color: #0093ce;
    line-height: calc(100vw * (30/375));
}

.sub_right .coin_home_btn {
    width: calc(100vw * (36/375));
}
/* END sub_header */


/* modal */
.modal {
    position: fixed;
    z-index: 10001;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
}

.modal_con {
    position: fixed;
    left: 0;
    right: 0;
    display: none;
    bottom: 0;
    max-height: 95%;
    overflow: auto;
    z-index: 1002;
    background: #fff;
    border-radius: calc(100vw * (20/375)) calc(100vw * (20/375)) 0 0;
}

.modal_head {
    padding: 0 calc(100vw * (20/375));
    height: calc(100vw * (60/375));
    justify-content: space-between;
    border-radius: calc(100vw * (20/375)) calc(100vw * (20/375)) 0 0;
    background-color: #fff;
}

.modal_head .modal_tit {
    font-weight: 600;
    color: #111;
    font-size: calc(100vw * (16/375));
}

.modal_head .modal_close {
    width: calc(100vw * (25/375));
    height: calc(100vw * (25/375));
    justify-content: center;
}

.modal_head .modal_close .img_icon {
    width: calc(100vw * (13/375));
    height: calc(100vw * (13/375));
}

/* END modal */

/* pop */
.pop * {
    font-family: 'pretendard' !important;
}

.pop {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 95%;
    max-height: 95%;
    background-color: #fff;
    z-index: 10010;
    border-radius: 10px;
    display: none;
}

.pw_pop .pop {
    width: 95%;
}

.pop_close_btn {
    position: absolute;
    width: calc(100vw * (10/375));
    right: calc(100vw * (15/375));
    top: calc(100vw * (15/375));
    z-index: 2;
}

.pop_close_btn img {
    filter: invert(1);
    width: 100%;
}

.common_pop .pop {
    width: 90%;
    padding: calc(100vw * (25/375)) calc(100vw * (15/375));
}

.id_btn button.chk {
    background: #c8c8c8;
}

.id_btn button {
    color: #fff;
}

.id_btn button {
    height: calc(100vw * (42/375));
    width: calc(100vw * (120/375));
    margin: 0 calc(100vw * (5/375));
    border-radius: calc(100vw * (10/375));
    font-size: 15px;
    background: #00A3E4;
    font-size: calc(100vw * (16/375));
}

/* END pop */
.g_home_btn {
    width: calc(100vw * (24/375));
    justify-content: center;
    margin-right: calc(100vw * (10/375));
}

.g_home_btn .icon {
    width: calc(100vw * (24/375));
    height: calc(100vw * (24/375));
}

a {
    -webkit-tap-highlight-color: transparent;
}

/* pw modal */

.pw_modal {
    position: fixed;
    width: 100%;
    height: 100vh;
    bottom: 0;
    left: 0;
    z-index: 10000;
    background-color: #f3f3f3;
/*    transform: translateY(100%);*/
    transition: 0.5s ease-in-out transform;
	display:none;
    .pw_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
    }
    .pw_title {
        font-size: calc(100vw * (23/375));
        font-weight: 700;
        text-align: center;
        margin-top: 18vh;
		gap: calc(100vw * (10 / 375));
		width: calc(100vw * (260 / 375));
		img {
			width: calc(100vw * (24 / 375));
			display: inline-block;
			margin-right: calc(100vw * (10 / 375));
			transform: translateY(calc(100vw * (2.5 / 375)));
		}
    }
    .pw_tit {
        color: #767676;
        font-weight: 400;
        font-size: calc(100vw * (12/375));
        color: #767676;
        margin-top: calc(100vw * (6/375));
    }
    .dot_group {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: calc(100vw * (25/375));
        margin-top: calc(100vw * (24/375));
		margin-bottom: auto;
        height: calc(100vw * (12/375));
    }
    .dot {
        width: calc(100vw * (16/375));
        height: calc(100vw * (16/375));
        border-radius: 50%;
        border: 1px solid #c2c2c2;
        transition: 0.3s;
		display: flex;
		align-items: center;
		justify-content: center;
    }
    .dot.active, 
    .dot.ok {
        background-color: #00A3E4;
        border: none;
    }
    .forgot_link {
        font-size: calc(100vw * (12/375));
        font-weight: 400;
        line-height: calc(100vw * (20/375));
        text-decoration: underline;
    }
    .num_pad {
        width: 100%;
        padding: calc(100vw * (34/375)) calc(100vw * (25/375)) calc(100vw * (60/375));
        border-radius: calc(100vw * (25/375)) calc(100vw * (25/375)) 0 0;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        column-gap: calc(100vw * (17/375));
        row-gap: calc(100vw * (4/375));
        align-items: center;
        font-family: "Roboto", sans-serif;
        font-weight: 500;
    }
    .pad {
        border-radius: calc(100vw * (24/375));
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: calc(100vw * (24/375));
        font-weight: 500;
        max-height: calc(100vw * (64/375));
        min-height: calc(100vw * (64/375));
    }
    .pad_A, .pad_B {
        display: flex;
        align-items: center;
        justify-content: center;
        img {
            width: calc(100vw * (30/375));
        }
    }
	.num_pad_card {
        margin-top: auto;
        width: 100%;
        padding: calc(100vw * (34/375)) calc(100vw * (25/375)) calc(100vw * (60/375));
        border-radius: calc(100vw * (25/375)) calc(100vw * (25/375)) 0 0;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        column-gap: calc(100vw * (17/375));
        row-gap: calc(100vw * (4/375));
        align-items: center;
        font-family: "Roboto", sans-serif;
        font-weight: 500;
        margin-top: auto;
    }
    .pad_card {
        border-radius: calc(100vw * (24/375));
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: calc(100vw * (24/375));
        font-weight: 500;
        max-height: calc(100vw * (64/375));
        min-height: calc(100vw * (64/375));
    }
    .pad_card_A, .pad_card_B {
        display: flex;
        align-items: center;
        justify-content: center;
        img {
            width: calc(100vw * (30/375));
        }
    }
    .modal_xbtn {
        width: calc(100vw * (28/375));
        height: calc(100vw * (28/375));
        position: absolute;
        top: calc(100vw * (10/375));
        right: calc(100vw * (12/375));
        z-index: 3;
    }
}

.pw_modal.on {
    transform: translateY(0%);
}

/* END pw modal */

.daterangepicker td.active, .daterangepicker td.active:hover {
	background-color: #00A3E4 !important;
}