img.pc {display:block;}
img.mo {display:none;}

.hide {
    display:none !important;
}

#content {
    border-radius: 30px;
    background: #fff;
    width: 500px;
    overflow: hidden;
}


/* 이용 방법 페이지 추가 css */

#content .coupon-bottom {
	display:flex;
	justify-content: center;
	background-color: #eff5ff;
	padding: 30px;
}

#content .process {
	position: relative;
	display:flex;
	align-items: center;
	gap: 50px;
}

#content .process-item {
	display:flex;
	flex-direction: column;
	align-items: center;
	width: 83px;
	gap: 10px;
	color: #333;
	font-size: 16px;
	font-weight: 500;
	z-index: 2;
}

#content .process-item .item-num {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #3370ff;
	width: 53px;
	height: 53px;
	border-radius: 50%;
	color: #fff;
	font-size: 22px;
	font-weight: 600;
}

#content .process .bar{
	position: absolute;
	height: 2px;
	background-color: #3370ff;
	top: 26px;
	left: 18px;
	width: calc(100% - 34px);
}

/* 이용 방법 페이지 추가 css 끝*/


#content .content-wrap .p50 {
    padding:50px;
}

.jalnan {
    font-family: 'Jalnan';            
}

.coupon-badge {
	display:flex;
	justify-content: center;
	align-items: center;
	background-color: #333;
	color: #fff;
	width: 100px;
	height: 30px;
	border-radius: 15px;
	font-size: 18px;
}

h2.jalnan {
    color: #333;
    font-size:50px;
	margin-bottom: 0;
}

.logo-wrap {
	width: 123px;
	margin:50px 0 0 50px;
}

.logo-wrap img {
	width: 100%;
}

.title-wrap {
	display:flex;
	align-items: center;
	margin-top: 10px;
}

.title-wrap.select-service__title {
	flex-direction: column;
	margin-top: 0;
	align-items: flex-start;
	gap: 10px;
}

.title-wrap.select-service__title p {
	font-size: 16px;
}

.login-title.jalnan {
    margin-left: 27px;
	margin-bottom: 0;
    color: #333;
    font-size:18px;
}

.login-title span {
    color: #3370ff;
    line-height: 1.42;
}

.login-title p {
    font-family: 'pretendard';
    margin-top: 10px;
    font-size: 16px;
}

.oauth-contents {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 50px;
}

.oauth-contents .login-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    border-radius: 6px;
    padding: 11px 20px;
    color: #333;
    background-color: #fff;
    border: 1px solid #f1f1f1;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.oauth-contents .login-btn img {
    position: absolute;
    top: 50%;
    left: 20px;
    width: 28px;
    transform: translateY(-50%);
}

.oauth-contents .login-btn.kakao {
    background-color: #fee500;
    border: none;
}

.oauth-contents .login-btn.naver {
    background-color: #03c95b;
    color: #fff;
    border: none;
}

.oauth-contents .login-btn.service-btn {
	display:flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
	font-size:18px;
}

.oauth-contents .login-btn.service-btn.pay{
	background-color: #dce6ff;
}

.oauth-contents .login-btn.service-btn.coupon{
	background-color: #d8f1ff;
}

.oauth-contents .login-btn.service-btn .service-btn__wrap {
	display:flex;
	align-items: center;
	gap: 20px;
}

.oauth-contents .login-btn.service-btn img {position: static; transform: unset; width: 40px; height: 40px;}
.oauth-contents .login-btn.service-btn .arrow {width: 24px; height: 24px; transform: rotateZ(-90deg);}
.oauth-contents .dont_login_info {margin-top:20px; font-size:16px; font-weight:normal; text-decoration:underline; color:#333; text-align:center; cursor:pointer;}

.anchor-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
}

.back-login,
.forget-id {
    display: flex;
    justify-content: center;
    color: #333;
    font-size: 14px;
    text-decoration: underline;
}

.content-footer {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    padding: 20px 0;
    background-color: #f1f1f1;
}

.content-footer .anchors{
    display: flex;
    align-items: center;
    gap: 6px;
}

.content-footer .anchors a {
    color: #333;
    font-size: 14px;
    text-decoration: unset;
}


.content-footer .copyright {
    display: flex;
    flex-direction: column;
    gap:4px;
    font-size: 12px;
}


.content-footer .copyright .copyright-row{
    display: flex;
    align-items: center;
    gap: 4px;
    color: #333;
}

.content-footer .copyright a {
    font-size: 12px;
    color:#333;
    text-decoration: unset;
}

.content-footer .copyright span {
    font-weight: bold;
}


.email-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 10px;
}

.coupon-input {
    display:flex;
    flex-direction: column;
    gap: 10px;
}

.coupon-input label {
    font-size:14px;
    font-weight: bold;
}

.coupon-input input {
    width: 100%;
    border: 1px solid #f1f1f1;
    border-radius: 6px;
    padding: 17px 20px;
    font-size: 14px;
}

.coupon-input input:focus {
    outline: none;
}

.coupon-input input::placeholder {
    color: #c3c3c3;
}

.coupon-btn {
    width: 100%;
    padding: 15px 0;
    background: #3370ff;
    border-radius: 6px;
    outline: none;
    border: none;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
}


@media screen and (max-width:720px) {
	img.pc {display:none;}
	img.mo {display:block;}
    #content {
        border-radius: 4.17vw;
        width: 100%;
    }
    
    #content .content-wrap .p50 {
        padding:6.94vw;
    }

	.title-wrap {
		margin-top: 1.39vw;
	}

    h2.jalnan {
        font-size:9.72vw;
    }

	.coupon-badge {
		display:none;
	}

	.logo-wrap {
		margin: 6.94vw 0 0 6.94vw;
		width: 27.78vw;
	}

    .login-title.jalnan {
        margin-left: 3.75vw;
        font-size:3.56vw;
    }

    .login-title p {
        margin-top: 1.39vw;
        font-size: 4.17vw;
    }

	.title-wrap.select-service__title p {
		font-size: 3.89vw;
	}

    .oauth-contents {
        gap: 2.78vw;
        margin-top: 6.94vw;
    }
    
    .oauth-contents .login-btn {
        border-radius: 1.39vw;
        padding: 4.17vw 3.89vw;
        font-size: 4.17vw;
    }
    
    .oauth-contents .login-btn img {
        top: 50%;
        left: 4.17vw;
        width: 6.11vw;
        transform: translateY(-50%);
    }

	.oauth-contents .login-btn.service-btn {
		padding: 4.17vw;
		font-size:4.17vw;
	}

	.oauth-contents .login-btn.service-btn .service-btn__wrap {
		gap: 2.78vw;
	}

	.oauth-contents .login-btn.service-btn img {width: 8.33vw; height: 8.33vw;}
	.oauth-contents .login-btn.service-btn .arrow {width: 4.17vw; height: 4.17vw;}
	.oauth-contents .dont_login_info {margin-top:2.78vw; font-size:4.17vw;}

    .anchor-content {
        gap: 1.39vw;
        margin-top: 4.17vw;
    }

    .back-login,
    .forget-id {
        font-size: 3.33vw;
    }

    .content-footer {
        gap: 4.17vw;
        padding: 4.17vw 0;
    }
    
    .content-footer .anchors{
        gap: 1.39vw;
    }
    
    .content-footer .anchors a {
        font-size: 3.33vw;
    }
    
    
    .content-footer .copyright {
        gap:0.56vw;
        font-size: 2.78vw;
    }
    
    
    .content-footer .copyright .copyright-row{
        gap: 0.56vw;
    }
    
    .content-footer .copyright a {
        font-size: 2.78vw;
    }

    .email-form {
        gap: 2.17vw;
        margin-top: 0;
    }

    .coupon-input {
        gap: 2.78vw;
    }

    .coupon-input label {
        font-size:4.17vw;
    }
	
    .coupon-input input {
        width: 100%;
        border-radius: 1.39vw;
        padding: 3.58vw 3.17vw;
        font-size: 3.89vw;
    }

    .coupon-notice__list {
        gap: 1.39vw;
        font-size: 3.33vw;
    }

    .coupon-btn {
        padding: 2.44vw 0;
        border-radius: 1.39vw;
        font-size: 4.17vw;
    }

	/* 이용 방법 페이지 추가 css */

	#content .coupon-bottom {
		padding: 6.94vw;
	}

	#content .process {
		gap: 6.94vw;
	}

	#content .process-item {
		width: 15.28vw;
		gap: 1.39vw;
		font-size: 3.33vw;
		white-space: nowrap;
	}

	#content .process-item .item-num {
		width: 9.72vw;
		height: 9.72vw;
		font-size: 4.17vw;
	}

	#content .process .bar{
		height: 0.58vw;
		top: 4.72vw;
		left: 2.80vw;
		width: calc(100% - 5.64vw);
	}

	/* 이용 방법 페이지 추가 css 끝*/

}




.modal-back {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); box-sizing:border-box; overflow:auto; z-index:998; display:none; zoom:0.7;}
.modal-back div, .modal-back label {box-sizing:border-box;}
.modal-back .btn-model-close {position:absolute; top:35px; right:30px; cursor:pointer;}
.modal-back .modal-title {width:100%; height:100px; padding:20px 0 20px 30px; line-height:60px; font-size:32px; font-weight:bold; color:#333; text-align:left; border-bottom:1px solid #e3e3e3;}
.modal-back .modal-contents {width:100%; height:80vh; max-height:750px; padding:30px; font-size:14px; font-weight:normal; color:#333; overflow-y:scroll;}
.modal-back .modal-contents .modal-contents-title {margin-bottom:20px; font-size:36px; font-weight:bold;}
.modal-back .modal-contents .modal-contents-text {margin-bottom:10px; font-size:28px; font-weight:normal;}

.modal-back .modal-google {position:absolute; top:50%; left:50%; width:650px; padding:0; border-radius:10px; background:#fff; transform:translate(-50%, -50%); overflow:hidden; z-index:999;}
.modal-back .modal-google .model-area {margin-top:30px; padding:30px; border-radius:20px;}
.modal-back .modal-google .model-area.android {margin-top:40px; background:#e3eaf9;}
.modal-back .modal-google .model-area.ios {margin-bottom:40px; background:#e4e3f9;}
.modal-back .modal-google .model-area .model-area-title {font-size:28px; font-weight:bold; color:#0337ff;}
.modal-back .modal-google .model-area .model-area-content {margin-top:20px; padding:0;}
.modal-back .modal-google .model-area .model-area-content li {margin-top:5px; font-size:28px; font-weight:normal; list-style:none;}
.modal-back .modal-google .model-area .model-area-content li.image {margin-top:30px;}
.modal-back .modal-google .model-area .model-area-content li.image img {width:100%;}
.modal-back .modal-google .customer_info {margin-top:10px; font-size:28px; font-weight:normal;}

@media (max-width:720px){
	.modal-back { top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); zoom:1;}
	.modal-back div, .modal-back label {}
	.modal-back .btn-model-close { top:4.03vw; right:4.17vw; cursor:pointer;}
	.modal-back .modal-title {width:100%; height:13.89vw; padding:2.78vw 0 2.78vw 4.17vw; line-height:8.33vw; font-size:4.44vw;    border-bottom:0.14vw solid #e3e3e3;}
	.modal-back .modal-contents {width:100%; height:80vh; padding:4.17vw; font-size:1.94vw;   overflow-y:scroll;}
	.modal-back .modal-contents .modal-contents-title {margin-bottom:2.78vw; font-size:5.00vw; }
	.modal-back .modal-contents .modal-contents-text {margin-bottom:1.39vw; font-size:3.89vw; }

	.modal-back .modal-google { top:50%; left:50%; width:90.28vw; padding:0; border-radius:1.39vw; background:#fff; transform:translate(-50%, -50%);  }
	.modal-back .modal-google .model-area {margin-top:4.17vw; padding:4.17vw; border-radius:2.78vw;}
	.modal-back .modal-google .model-area.android {margin-top:5.56vw; background:#e3eaf9;}
	.modal-back .modal-google .model-area.ios {margin-bottom:5.56vw; background:#e4e3f9;}
	.modal-back .modal-google .model-area .model-area-title {font-size:3.89vw;  }
	.modal-back .modal-google .model-area .model-area-content {margin-top:2.78vw; padding:0;}
	.modal-back .modal-google .model-area .model-area-content li {margin-top:0.69vw; font-size:3.89vw;  list-style:none;}
	.modal-back .modal-google .model-area .model-area-content li.image {margin-top:4.17vw;}
	.modal-back .modal-google .model-area .model-area-content li.image img {width:100%;}

	.modal-back .modal-google .customer_info {margin-top:1.39vw; font-size:3.89vw; }
}