@charset "utf-8";
@import url('reset.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

:root{
	--bg: #006bb3;

	--primary: #1952b9;
	--second: #f9df30;
	--third: #246cc5;

	--transition-custom: all 0.3s ease-in;
	--sc-dream: 'Escoredream', sans-serif;
	--yeogi: 'YeogiOttaeJalnan', sans-serif;
}





.wrap {max-width:750px; margin:0 auto;}
.inner {width:94%; margin:0 auto;}


/* 응모하기 */
.form-apply {display:grid; grid-template-columns:auto 150px; margin:50px 0; border:4px solid #111; border-radius:20px; height:60px; overflow:hidden;}
.form-apply input[type=text] {height:auto; border:none; font-size:20px; padding:0 10px; background:#e7f5fe;}
.form-apply .btn-apply {background:#111; color:#fff; text-align:center; line-height:50px; font-size:20px; font-family:var(--sc-dream); font-weight: 600;}

@media (max-width:568px){
	.form-apply {grid-template-columns:auto 90px; margin:30px 0; border:2px solid #111; border-radius:10px; height:50px;}
	.form-apply input[type=text] {font-size:16px; padding:0 6px;}
	.form-apply .btn-apply {line-height:50px; font-size:15px;}
}





/* 당첨 */
.prize {background:url('/img/bg.png') no-repeat center 0 var(--primary); padding:50px 0;}
.prize-top {text-align:center; padding-top:20px; font-size:60px; color:#fff; font-family:var(--yeogi);}
.prize-top strong {font-size:80px; color:var(--second);}
.prize-top span  {font-size:inherit; color:var(--second);}

.prize-info {padding:20px 20px 0;}
.prize-info div {text-align:center; color:#fff; font-family:var(--sc-dream); font-size:17px; line-height:150%;}

.form-prize {background:#fff; border-radius:20px; padding:30px 20px; margin-top:40px;}
.form-group {display:flex; flex-direction:column; gap:20px;}
.form-item {display:flex; flex-direction:column; gap:5px;}
.form-item label {display:block; color:#111; font-family:var(--sc-dream); font-weight: 500; font-size:18px; margin-bottom:5px;}
.form-item input[type=text] {height:45px; border:none; font-size:18px; padding:10px 15px; background:#f0f0f0; width:100%; border-radius:30px;}
.form-item input[type=text].postcode {width:150px;}
.btn-submit {display:block; background:#11387d; color:#fff; text-align:center; line-height:60px; font-size:20px; font-family:var(--sc-dream); font-weight: 500;border-radius:10px;}
.btn-postcode {display:inline-block; background:#444; color:#fff; text-align:center; line-height:45px; padding:0 20px; font-family:var(--sc-dream); border:none; font-weight: 500;border-radius:30px; cursor:pointer; vertical-align:top;}

/* checkbox */
.input-option {display:inline-block; position: relative; padding-left:35px; margin:2px 0; cursor: pointer; font-size:18px; color:#111; font-family:var(--sc-dream); font-weight: 500;-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.input-option input {position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.input-option input:checked ~ .checkmark {background-color:var(--primary); border:none;}
.checkmark {position: absolute; top: 0; left: 0; height: 23px; width: 23px; background-color:#fff; border:1px solid #ddd; border-radius:3px; transition: all 0.2s ease-out;}
.checkmark:after {content: ""; position: absolute; display: none;}
.input-option input:checked ~ .checkmark:after {display: block; }
.input-option .checkmark:after {left: 9px; top: 5px; width:6px; height:10px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

.optionBox.agree {display:flex; width:100%; justify-content:space-between; margin-bottom:30px;}

@media (max-width:568px){
	.prize {background-size:contain; padding:30px 0;}
	.prize img {width:150px;}
	.prize-top {padding-top:20px; font-size:35px;}
	.prize-top strong {font-size:60px;}

	.prize-info div {font-size:14px;}

	.form-prize {border-radius:10px; padding:20px 10px; margin-top:30px;}
	.form-item label {font-size:14px; margin-bottom:3px;}
	.form-item input[type=text] {height:40px; font-size:16px;}
	.form-item input[type=text].postcode {width:120px;}
	.btn-submit {line-height:50px; font-size:16px;}
	.btn-postcode {line-height:40px; padding:0 15px; font-size:12px;}

	.input-option {padding-left:30px; font-size:14px; color:#111; line-height:160%;}
	.optionBox.agree i {font-size:18px;}

}

@media (max-width:420px){
	.prize-info div br {display:none;}
}