@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
html,body,p,a,h1,h2,h3,h4,h5,h6,button{font-family: 'Pretendard', sans-serif;}
*, *::before, *::after{box-sizing: border-box;}
body{width: 100%;margin: 0;padding: 0;}
p {margin: 0;padding: 0;}
a{text-decoration:none;}
.flex2{display: flex; align-items:center;}
h3{font-size: 30px;color: #373C4C;}
.mgt30{margin-top: 30px;}
.mgt60{margin-top: 60px;}
.purple_btn{width: 100%;height: 50px;background-color: #6E6CA9;
	border:none;border-radius:5px;color: #fff;font-size: 24px;/* box-shadow:0 4px 4px rgba(0,0,0,0.3); */}


.joy_wrap{width: 720px;height: 100vh;margin: 0 auto;background-color: #F5F5F9;padding: 60px 90px;}
.img_wrap{text-align: center;}
.img_wrap img {width: 300px;}
.joy_wrap p {font-size: 32px;letter-spacing:1.2px;line-height: 150%;font-weight: bold;color: #6E6CA9;padding: 20px 0;}
.joy_wrap button {display:block; margin: 0 auto;width: 540px;height: 60px;background-color: #6E6CA9;
	border:none;border-radius:5px;color: #fff;font-size: 28px;box-shadow:0 4px 4px rgba(0,0,0,0.3);cursor:pointer;}
.joy_wrap a {display:block; margin: 0 auto;width: 540px;height: 60px;line-height: 60px;background-color: #6E6CA9;text-align: center;
	border:none;border-radius:5px;color: #fff;font-size: 28px;box-shadow:0 4px 4px rgba(0,0,0,0.3);cursor:pointer;}

/*로그인*/
.body_wrap{width: 720px;min-height: 100vh;margin: 0 auto;background-color: #F5F5F9;padding-bottom: 150px;overflow:auto;}
.body_wrap img {margin: 10px;}
.login_wrap{width: 600px;margin: 0 auto;background-color: #fff;padding: 30px;text-align: center;border-radius:20px;box-shadow:2px 2px 4px rgba(0,0,0,0.3);}
.text_box{border-radius:20px;padding:30px;background-color: #F5F5F9;text-align: left;font-size: 24px;color: #6E6CA9;font-weight: 600;}
.text_box p{letter-spacing:1.2px;line-height: 150%;}
.text_box span{color: #373C4C;}
.input_box{border-radius:20px;border:1px solid #6E6CA9;text-align: left;padding: 30px;margin-top: 50px;}
.input_box p {font-size: 24px;color: #373C4C;font-weight: 600;margin-bottom: 5px;}
.input_box span {font-size: 16px;color: #6E6CA9;font-weight: 400;}
.card_box{width: 100%;display: flex;justify-content:center;align-items:center;gap:5px;}
.input_box input{height: 48px;border-radius:5px;border:1px solid #ddd;padding: 0 10px;font-size: 18px;width: 100%;}
.login_wrap .btn_login{margin: 50px 0;border:none;border-radius:5px;background-color: #6E6CA9;color: #fff;font-size: 24px;height: 50px;width: 100%;}



/*메인*/
.joycard_logo{margin: 0;padding-left: 10px;}
.joycard_logo img{margin:0;}
.notice_box{width: 100%;height: 80px;background-color: #E8EBF1;display: flex;align-items:center;padding-left: 20px;}
.notice_round{padding: 10px 20px;background-color: #D4DEFF;display: inline-block;border-radius:20px;font-size: 32px;color: #6E6CA9;font-weight: 600;}
.notice_box > p{font-size: 24px;margin-left: 10px;color: #373C4C;}
.money_box{margin: 20px;background-color: #D4DEFF;border-radius:20px;}
.money_box a{display: flex; align-items:center; justify-content:space-between;padding: 0 30px; height: 90px;}
.money_box p {font-size: 32px;font-weight: 600;color: #6E6CA9;}
.money_box span {color: #373C4C;}
.money_box img {width: 35px;height: 35px;}
.card{margin: 20px;padding: 50px 30px;border-radius:20px;background: linear-gradient(to right,#584AFF 0%,#868EFF 50%,#584AFF 100%);
	box-shadow:4px 4px 10px rgba(0,0,0,0.3);color: #fff;}
.card_text{justify-content:space-between;}
.card_text img{width: 126px;height: 33px;}
.card_text .name_text{font-size: 32px;font-weight: 600;}
.money_text{font-size: 50px;font-weight: bold;}
.return a{font-size: 24px;color: #fff;}
.return img {width: 29px;height: 26px;}
.card_num{font-size: 32px;margin: 0px 0 10px 0;gap:30px;}
.copy_btn{cursor: pointer;}

.btn_box{margin: 20px;padding: 20px 0;border-radius:20px;background-color: #fff;border:1px solid #ddd;}
.icon_box{width: 100%;}
.icon_box > div , .icon_text p{width: 33.3%;text-align: center;font-size: 18px;}
.border_r{border-right:1px solid #ddd;}

.list_box{margin: 20px;background-color: #fff;padding: 30px;border-radius:20px;}
.list_title{font-size: 32px;color: #373C4C;font-weight: 600;}
.month_box{margin: 20px;padding: 30px 50px;background-color: #F5F5F9;border-radius:20px;}
.month_box p {font-size: 30px;color: #6E6CA9;font-weight: 600;}
.month_box span{color: #373C4C;}
.list_record{justify-content:space-between;}
.list_record:nth-child(odd){margin-top: 30px;}
.list_record p {font-size: 25px;color: #373C4C;font-weight: 600;}
.list_record span{font-size: 20px;color: #6E6CA9;}
.list_text_box{font-size: 25px; text-align: center;margin-top: 30px;padding-top: 30px;border-top:1px solid #6E6CA9;}
.list_text_box a{color: #373C4C;}
.ic img {margin: 0;}


/*조이머니 잔액*/
.joymoney_box{margin: 0 20px;padding: 30px;box-shadow: 0 6px 16px rgba(0,0,0,0.1);border-radius:20px;border:none;background-color: #fff;}
.joymoney_box > p{font-size: 20px;color: #6E6CA9;margin-bottom: 20px;}
.date_box{padding: 30px;border-radius:20px;background-color: #F5F5F9;display: flex; align-items:center;justify-content:space-between;}
.date_box p {font-size: 28px;color: #373C4C;}
.date{display: flex;align-items:center;position: relative;cursor:pointer;}
.date img {width: 30px;}
.joymoney_box > .purple_btn{position: relative;}
.joymoney_box > .purple_btn:after{content:"";position: absolute;bottom: -30px;width: 100%;left: 0;height: 1px;background-color: #6E6CA9;}
.money_content , .day_content{display: flex;justify-content:space-between;align-items:center;}
.money_content{font-size: 25px;color: #373C4C;}
.day_content{font-size: 20px;color: #6E6CA9;}


/*이용내역*/
.record_title{display: flex;justify-content:space-between;align-items:center;}
.title_box{display: flex;align-items:center;}
.title_box h3 {margin-right: 10px;}
.title_box button {background-color: #F5F5F9;margin-right: 10px;font-size: 20px;border:1px solid #ddd; border-radius:5px;padding:10px;}
.title_box button.on{background-color: #6E6CA9;color: #fff;border:none;}
.date_picker{position: absolute;opacity: 0;cursor: pointer;top: 0;left: 0;width: 100%;height: 100%;}

.record_title img {width: 36px;cursor: pointer;}
.date_box2{border-radius:20px;background-color: #F5F5F9;display: flex; align-items:center;justify-content:space-between;border:1px solid #ddd;}
.date_box2 p {text-align: center;width: 25%;padding: 30px;border-radius:20px;font-size: 25px;cursor: pointer;}
.date_box2 p.on{background-color: #fff;/* border:1px solid #ddd; */box-shadow: 0 3px 10px rgba(0,0,0,0.1);}





/*환전신청*/
.explain_box{border-top:1px solid #ddd;padding-top: 30px;}
.explain_box p {font-size: 20px;color: #767676;margin-bottom: 10px;}
.money_content > input{border:1px solid #767676; border-radius:5px;padding: 10px;font-size: 20px;text-align: right;}





/*고객센터*/
.notice_menu_box{margin: 0 20px;display: flex;gap:10px;}

.notice_menu_box > div {width: 33.3333%;text-align: center;cursor: pointer;border:1px solid #6E6CA9;border-radius:20px 20px 0 0;border-bottom:none;}
.notice_menu.on {background-color: #fff;position: relative;}
.notice_menu.on:after{content:"";position: absolute;left: 0;bottom: -2px;width: 100%;height: 2px;background-color: #fff;}
.notice_menu p {font-size: 25px;color: #373C4C;font-weight: 600;padding: 30px 0;}
.notice_content_box{display: none;}
.notice_content_box.on{display: block;}
.notice_content_box , .q_content_box{margin: 0 20px;padding: 30px;background-color: #fff;
	border-radius:0 0 20px 20px;color: #373C4C;border:1px solid #6E6CA9;}

.notice_content{font-size: 16px;display: flex;justify-content:space-between;align-items:center;padding: 10px 0;}

.text_date{font-size: 14px;margin-top: 5px;}
.arrow_box img {width: 32px;height:32px;cursor: pointer;transition: transform 0.3s;}
.more_box{background-color: #F5F5F9;border-top:1px solid #ddd;overflow: hidden;transition:0.3s;height: 1px;line-height: 1.6;}
.more_box.open{height: auto;border:none;}
.arrow_box img.open{transform: rotate(180deg);}
.more_box p {padding: 20px;font-size: 16px;}



/*마이페이지*/
.info_box > p {margin-top: 10px;font-size: 18px;}
.btn_change{margin-top: 30px;padding: 10px;color: #fff;background-color: #6E6CA9;border-radius:5px;border:none;font-size: 18px;}
.btn_logout{margin-top: 30px;padding: 10px;background-color: #ddd;border-radius:5px;border:none;font-size: 18px;color: #767676;}
.foot_box{margin-top: 30px;padding-top: 30px;border-top:1px solid #ddd;}
.foot_box > p{font-size: 14px;padding-top: 5px;}
.privacy_box{display: flex;align-items:center;margin-top: 10px;gap:5px;}
.privacy_box button{border:none;background: none;}
.privacy_box , .privacy_box button , .privacy_box p , .foot_box > p{color: #767676;}
.logout_box{margin: 30px 0;}


@media (max-width: 720px){
	h3{font-size: 4.1667vw;}
	.mgt30{margin-top: 3vw;}
	.mgt60{margin-top: 6vw;}

	.wrap{display: flex;align-items:center;height: 100vh;background-color: #F5F5F9;}
	.joy_wrap{width: 100%; height: auto;margin: 0 auto;padding: 8.3333vw 12.5000vw;}
	.img_wrap img {width: 60vw;}
	.joy_wrap p {font-size: 4.4444vw;letter-spacing:0.2vw;line-height: 150%;padding: 3vw 0;}
	.joy_wrap button {width: 75.0000vw;height: 12vw;border:none;border-radius:0.6944vw;font-size: 3.8889vw;box-shadow:0 0.5556vw 0.5556vw rgba(0,0,0,0.3);cursor:pointer;}
	.joy_wrap a {width: 75.0000vw;height: 12vw;line-height: 12vw;border:none;border-radius:0.6944vw;font-size: 3.8889vw;box-shadow:0 0.5556vw 0.5556vw rgba(0,0,0,0.3);cursor:pointer;}


	.body_wrap{width: 100vw;min-height: 100vh;margin: 0 auto;padding-bottom: 20.8333vw;}
	.body_wrap > img {margin: 1.3889vw;width: 8vw;height: 8vw;}
	.body_wrap img {margin: 1vw;}
	.login_wrap{width: 90%;margin: 0 auto;padding: 4.1667vw;border-radius:2.7778vw;box-shadow:0.2778vw 0.2778vw 0.5556vw rgba(0,0,0,0.3);}
	.login_wrap img {width: 41.2500vw;height: 13.8889vw;margin-top: 10vw;}
	.text_box{border-radius:2.7778vw;padding: 5vw 4.1667vw;font-size: 4vw;}
	.text_box p{letter-spacing:0.1667vw;line-height: 150%;}
	.input_box{border-radius:2.7778vw;padding: 4.1667vw;margin-top: 6.9444vw;}
	.input_box p {font-size: 4vw;margin-bottom: 0.6944vw;}
	.input_box span {font-size: 3vw;}
	.card_box{gap:1vw;}
	.input_box input{height: 10vw;border-radius:0.6944vw;padding: 0 1.3889vw;font-size: 3.5vw;width: 100%;}
	.login_wrap .btn_login{margin: 6.9444vw 0;border:none;border-radius:0.6944vw;font-size: 4vw;height: 10vw;width: 100%;}


	/*메인*/
	.joycard_logo{margin: 0;padding-left: 1.3889vw;}
	.joycard_logo img{margin:0;width: 41vw;height: 13.8vw;}
	.notice_box{width: 100%;height: 11.1111vw;align-items:center;padding-left: 2.7778vw;}
	.notice_round{padding: 1.3889vw 2.7778vw;border-radius:2.7778vw;font-size: 4.4444vw;}
	.notice_box > p{font-size: 3.5vw;margin-left: 1.3889vw;}
	.money_box{margin: 2.7778vw;border-radius:2.7778vw;}
	.money_box img {width: 4.8611vw;height: 4.8611vw;}
	.money_box a{padding: 0 4.1667vw; height: 12.5000vw;}
	.money_box p {font-size: 4.4444vw;}
	.card{margin: 2.7778vw;padding: 6.9444vw 4.1667vw;border-radius:2.7778vw;background: linear-gradient(to right,#584AFF 0%,#868EFF 50%,#584AFF 100%);
		box-shadow:0.5556vw 0.5556vw 1.3889vw rgba(0,0,0,0.3);}
	.copy_btn{width: 7vw;}
	.card_text img{width: 17.5000vw;height: 4.5833vw;}
	.card_text .name_text{font-size: 4.4444vw;}
	.money_text{font-size: 6vw;}
	.return a{font-size: 3.5vw;}
	.return img {width: 4.0278vw;height: 3.6111vw;}
	.card_num{font-size: 4.4444vw;margin: 0 0 1.3889vw 0;gap:4.1667vw;}
	.card_num a img {width: 9vw;height: 9vw;}
	.btn_box{margin: 2.7778vw;padding: 2.7778vw 0;border-radius:2.7778vw;border:0.1389vw solid #ddd;}
	.btn_box img {width: 11.1111vw; height: 11.1111vw;}
	.icon_box{width: 100%;}
	.icon_box > div , .icon_text p{width: 33.3%;font-size: 3.5vw;}
	.border_r{border-right:0.1389vw solid #ddd;}

	.list_box{margin: 2.7778vw;padding: 4.1667vw;border-radius:2.7778vw;}
	.list_title{font-size: 4.4444vw;}
	.month_box{margin: 2.7778vw;padding: 4.1667vw 6.9444vw;border-radius:2.7778vw;}
	.month_box p {font-size: 4.1667vw;}
	
	.list_record:nth-child(odd){margin-top: 4.1667vw;}
	.list_record p {font-size: 3.5vw;}
	.list_record span{font-size: 3vw;}
	.list_text_box{font-size: 3.5vw; margin-top: 4.1667vw;padding-top: 4.1667vw;border-top:0.1389vw solid #6E6CA9;}
	.ic img {margin: 0;width:15.2778vw;height:13.8889vw;}


	/*조이머니 잔액*/
	.joymoney_box{padding: 4.1667vw;margin: 0 2.7778vw;}
	.joymoney_box > p{font-size: 3vw;margin-bottom: 2.7vw;}
	.joymoney_box > .purple_btn{font-size: 3.7vw;height: 8vw;}
	.date_box{padding: 4.1667vw}
	.date_box p {font-size: 3.7vw;}
	.date img {width: 4.1667vw;}
	.joymoney_box > .purple_btn:after{bottom: -4vw;}
	.money_content{font-size:3.5vw}
	.day_content{font-size: 3vw;}



	/*이용내역*/
	.record_title img {width: 4.1667vw;cursor: pointer;}
	.date_box2{border-radius:2.7778vw;}
	.date_box2 p {padding:3.5vw 0;font-size: 3.5vw;border-radius:2.7778vw;}
	.title_box button {margin-right: 1.3889vw;font-size: 2.7778vw;border:0.1389vw solid #ddd; border-radius:0.6944vw;padding:1.3889vw;}




	/*환전신청*/
	.explain_box{padding-top: 4.1667vw;}
	.explain_box p {font-size: 3vw;margin-bottom: 1.3889vw;}
	.money_content > input{padding: 1.3889vw;font-size: 3vw;}




	
	/*고객센터*/
	.notice_menu_box{margin: 0 2.7778vw;gap:1vw;}
	.notice_menu_box > div{border-radius:2.5vw 2.5vw 0 0;}
	.notice_menu p {font-size: 3.5vw;padding:4.1667vw;}

	.notice_content_box{margin: 0 2.7778vw;padding: 4.1667vw;border-radius:0 0 2.5vw 2.5vw;}
	.notice_textbox .flex2 div{gap:1vw;}
	.notice_content{font-size: 3vw;padding: 2vw 0;font-size: 3.5vw;}
	.text_date{font-size: 3vw;margin-top: 1vw;}
	.arrow_box img {width: 3.5vw;height:3.5vw;}
	.more_box{font-size: 3.5vw;}
	.more_box p {font-size: 3.5vw; padding: 2.7778vw;}




	/*마이페이지*/
	.info_box > p {margin-top: 1vw;font-size: 3.5vw;}
	.btn_change{margin-top: 5vw;padding: 2vw;font-size: 3.5vw;}
	.foot_box{margin-top: 4.1667vw;padding-top: 4.1667vw;}
	.foot_box > p{font-size: 3vw;padding-top: 0.5vw;}
	.privacy_box{margin-top: 1vw;gap:0.5vw;}
	.logout_box{margin: 5vw 0;}
	.logout_box a {font-size: 3.5vw;padding: 2vw;}

}