@charset "utf-8";

.voucher-wrapper {color:#454545; font-size:17px; line-height:1.7em; letter-spacing:-.03em;}
.voucher-wrapper .contain {max-width:1500px; padding-left:50px; padding-right:50px;}

.voucher-heading {position:relative; display:flex; align-items:center; width:100%; height:100vh; padding-top:60px; text-align:center; color:#fff; background:url("images/240806_top_img.jpg") 50% 50% no-repeat; background-size:cover;}
.voucher-heading h2 {font-size:100px; font-weight:800; line-height:1.1em; letter-spacing:-.02em; margin-bottom:10px;}
.voucher-heading p {font-size:18px; line-height:1.6em; letter-spacing:-.04em;}
.voucher-heading .tit {font-size:45px; line-height:1.3em; letter-spacing:-.04em; margin-bottom:5px;}
.voucher-heading .logos {margin-top:54px; display:flex; align-items:center; justify-content:center; gap:30px;}

.voucher-content {padding:150px 0;}

.voucher-title {margin-bottom:100px; text-align:center;}
.voucher-title h2 {color:#242424; font-size:36px; line-height:1.3em; letter-spacing:-.03em;}

.voucher-info .items {border-top:2px solid #242424;}
.voucher-info .item {display:flex; padding:60px 0; border-bottom:1px solid #ddd;}
.voucher-info .tit-area {width:330px; margin-right:40px; margin-top:-4px;}
.voucher-info .tit-area h3 {position:relative; display:inline-block; color:#242424; font-size:26px; line-height:1.3em; letter-spacing:-.03em;}
.voucher-info .tit-area h3:before {content:''; position:absolute; bottom:3px; left:0; width:100%; height:35%; background:#a3b0ee;}
.voucher-info .tit-area h3 span {position:relative;}
.voucher-info .cnt-area {flex:1 1 auto; min-width:0; width:1%;}
.voucher-info .dot-list {width:95%;}
.voucher-info .dot-list > li {padding-left:.7em; text-indent:-.7em;}
.voucher-info .table table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:2px solid #242424; font-size:inherit; line-height:1.5em; letter-spacing:-.03em;}
.voucher-info .table table th {padding:14px; border:1px solid #ddd; font-weight:500; color:#242424; font-size:1.13em;}
.voucher-info .table table td {padding:14px; border:1px solid #ddd; text-align:center;}
.voucher-info .table table tr th:first-child,
.voucher-info .table table tr td:first-child {border-left:0;}
.voucher-info .table table tr th:last-child,
.voucher-info .table table tr td:last-child {border-right:0;}
.voucher-info.st2 .tit-area h3:before {background:#ffc45f;}
.voucher-info.st2 .voucher-step .st {color:#ef5632;}

.voucher-step {margin:40px 0; text-align:center;}
.voucher-step ol {display:flex; justify-content:space-between;}
.voucher-step ol li {width:18%; max-width:180px;}
.voucher-step .circle-warp {position:relative; padding-bottom:100%; margin-bottom:17px;}
.voucher-step .circle-warp svg {position:absolute; top:0; left:0; width:100%; height:100%;}
.voucher-step .circle-warp .inner {display:flex; flex-direction:column; justify-content: center; align-items:center; position:absolute; top:0; left:0; width:100%; height:100%;}
.voucher-step .st {color:#4a21ef; font-size:15px; font-weight:600; line-height:1.33em; margin-bottom:2px;}
.voucher-step .tit {color:#242424; font-size:20px; line-height:1.33em; letter-spacing:-.03em;}
.voucher-step .tit strong {font-weight:600;}
.voucher-step .txt {line-height:1.45em; letter-spacing:-.04em;}

.voucher-process {padding:90px 20px; border:1px solid #ddd; border-radius:12px; text-align:center;}

.voucher-btn {text-align:center; margin-top:70px;}
.voucher-btn a {display:inline-block; padding:20px 50px; border-radius:50px; background:#ef5632; color:#fff; font-size:22px; font-weight:500; line-height:1.3em; letter-spacing:-.04em; text-align:center;}
.voucher-btn a:hover {background:#4a21ef;}

@media (max-width: 1024px) {	
	.voucher-wrapper {font-size:15px;}
	.voucher-wrapper .contain {max-width:1500px; padding-left:50px; padding-right:50px;}

	.voucher-heading {height:580px;}
	.voucher-heading h2 {font-size:65px;}
	.voucher-heading p {font-size:15px;}
	.voucher-heading .tit {font-size:30px;}
	.voucher-heading .logos {margin-top:40px;}
	.voucher-heading .logos img {height:40px;}

	.voucher-content {padding:80px 0 100px;}

	.voucher-title {margin-bottom:50px;}
	.voucher-title h2 {font-size:28px;}

	.voucher-info .item {padding:35px 0;}
	.voucher-info .tit-area {width:200px; margin-right:20px;}
	.voucher-info .tit-area h3 {font-size:22px;}

	.voucher-step {margin:30px 0;}
	.voucher-step .circle-warp {margin-bottom:12px;}

	.voucher-step .st {font-size:12px;}
	.voucher-step .tit {font-size:17px;}

	.voucher-process {padding:40px 20px;}

	.voucher-btn {margin-top:50px;}
	.voucher-btn a {padding:18px 30px; font-size:18px;}
}


@media (max-width: 900px) {
	.voucher-info .item {display:block; padding:35px 0;}

	.voucher-info .tit-area  {width:auto; margin:0 0 20px;}
	.voucher-info .cnt-area {width:auto;}
}

@media (max-width: 760px) {
	.voucher-wrapper {font-size:14px;}
	.voucher-wrapper .contain {padding-left:16px; padding-right:16px;}

	.voucher-heading {height:100vh; background-image:url("images/240806_top_img_m.jpg");}
	.voucher-heading h2 {font-size:44px; line-height:1em; margin-bottom:15px;}
	.voucher-heading p {font-size:13px;}
	.voucher-heading .tit {font-size:21px;}
	.voucher-heading .logos {margin-top:18px; gap:16px;}
	.voucher-heading .logos img {height:24px;}

	.voucher-content {padding:50px 0 100px;}

	.voucher-title {margin-bottom:30px;}
	.voucher-title h2 {font-size:21px;}

	.voucher-info .item {padding:24px 0;}
	.voucher-info .tit-area {margin-bottom:12px;}
	.voucher-info .tit-area h3 {font-size:20px;}
	.voucher-info .dot-list {width:100%;}
	.voucher-info .table table th {font-size:1.08em;}
	.voucher-info .table table td {padding:10px 4px;}
	.voucher-info.st2 {}

	.voucher-step {margin:20px 0;}
	.voucher-step ol {flex-wrap:wrap; gap:30px 0;}
	.voucher-step ol li {width:47%;}
	.voucher-step .circle-warp {margin-bottom:12px;}

	.voucher-process {padding:20px 50px 20px 30px; border-radius:6px;}

	.voucher-btn {margin-top:40px;}
	.voucher-btn a {padding:14px 30px; font-size:16px;}
}