@charset "UTF-8";
@import url('https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css');

* {margin:0; padding:0; outline:0; box-sizing:border-box;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video,select,option {margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main {display:block;}
nav ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
dl,ul,ol,menu,li {list-style:none;}
body,th,td,input,select,textarea,button {font-size:18px; letter-spacing:-0.02em; font-family:'Spoqa Han Sans Neo', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic','돋움','dotum','Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; color:#222;}
body,th,td,input,select,textarea,button {*font-family:'Spoqa Han Sans Neo', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic','돋움','dotum','Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;}
input,button,select,label {vertical-align:middle;}
button { background:transparent; border:0;}
hr {display:none;}
del,ins {text-decoration:none;}
a {color:inherit; text-decoration:none;}
address,caption,cite,code,dfn,var {font-style:normal;font-weight:normal;}
table {border-collapse:collapse; border-spacing:0;}
button,input {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;cursor:pointer;*overflow:visible;}
img {vertical-align:middle;}

html { scroll-behavior: smooth; }
body { box-sizing:border-box; word-break:keep-all; font-size:18px; color:#222; word-break:break-all;}

.clearfix {zoom:1;}
.clearfix:after {content:''; display:block; clear:both;}
.hide {position:absolute; left:-100000em; top:-100000em;}
.wrap {width:100%; max-width:1100px; margin:0 auto;}
.flex {display:flex; justify-content: space-between;}
.none {display:none !important;}
.block {display:block !important;}

/* 페이지 네비게이션 */
nav .acc_nav {position:fixed; top:50%; right:40px; margin-top:-50px; color:#777; z-index:3; text-align:right; font-size:14px; font-weight:600;}
nav .acc_nav i {display:none;}
nav .acc_nav span {display:none;}
nav .acc_nav a {display:inline-block; padding:5px 8px; margin-bottom:5px; border-radius:20px; border:2px solid rgba(221,31,37,0); line-height:1em;}
nav .acc_nav a:hover {color:#4880ed; text-decoration:none; background:rgba(255,255,255,1); box-shadow:0 1px 2px rgba(0,0,0,0.1); border:2px solid #4880ed; }
nav .acc_nav a:hover::after {border:5px solid #4880ed; background:#fff;}
nav .acc_nav a::after {content:''; display:inline-block; width:15px; height:15px; border-radius:15px; background:#9bb5ea; box-sizing:border-box; vertical-align: middle; outline:1px solid rgba(255,255,255,.6);}
nav .acc_nav a:hover span {display:inline-block; vertical-align:middle;}


header { padding:20px 0; border-bottom: 1px solid #ddd; box-shadow:0 1px 10px rgba(0,0,0,0.1);}
header h1 {font-size:0;}
header h1 img {height:40px;}

main section {text-align:center;}
main .wrap {z-index:2; position: relative; padding-top:80px; padding-bottom:80px;}
main h2 {font-size:2em; margin-bottom:20px; word-break:keep-all;}
main p {font-size:20px; max-width:800px; margin:0 auto 5px; word-break: keep-all;}

main .intro {background:#4880ed; color:#fff; overflow: hidden; /*background: linear-gradient(-45deg, #26447f, #4880ed, #3056a1, #1c315d);*/ background:url('https://img.etnews.com/2025/voucher/images/bg.png'); background-size:400% 400%; animation: bgChange 10s ease infinite;}
@keyframes bgChange{
    0%{ background-position: 0% 50%; }
    50%{ background-position: 100% 50%; }
    100%{ background-position: 0% 50%; }
}
main .intro .wrap {padding-top:160px; padding-bottom:160px;}
main .intro a {color:#1c315d; font-size:22px; font-weight:600; padding:16px 30px; display:inline-block; background:#fff; border-radius:50px; margin-top:40px;}
main .intro a span {vertical-align:middle;}
main .intro a img {width:20px; height:20px; filter: invert(11%) sepia(94%) saturate(1403%) hue-rotate(206deg) brightness(93%) contrast(88%);}

main .intro .flowtext {display:flex; flex-wrap: nowrap; -webkit-text-stroke: 0.4px rgba(255,255,255,0.8); white-space: nowrap; 
  font-size:5em; font-weight:900; z-index:1; position: absolute;  overflow-x: hidden; overflow-y: hidden; color: rgba(255, 255, 255, 0); }
main .intro .flowtext span {display:inline-block; margin-right:20px;}

main .intro .ft_top {right:-100px; top:10px; animation:textloop1 40s linear infinite;}
main .intro .ft_bottom {left:-100px; bottom:10px; animation:textloop2 55s linear infinite;}
@keyframes textloop1 { from { transform: translateX(0%); } to { transform: translateX(50%);} }
@keyframes textloop2 { from { transform: translateX(0%); } to { transform: translateX(-50%);} }

main .agency {background-color:#eee;}
main .agency ul {margin:40px auto 0; justify-content:center; column-gap:40px;  row-gap:20px; flex-wrap: wrap;}
main .agency li {padding:40px 40px 30px; background:#fff; border:1px solid rgba(0,0,0,0.08); box-shadow:0 5px 20px rgba(0,0,0,0.05); border-radius:10px;}
main .agency strong {display:block; margin-bottom:30px;}
main .agency strong img {max-width:100%;}
main .agency a {background:#4880ed; color:#fff; padding:15px 30px; display:inline-block;  border-radius:5px; word-break: keep-all;}
main .agency a i img {height:15px; transform:translateY(-2px); filter: invert(100%) sepia(0%) saturate(7455%) hue-rotate(326deg) brightness(120%) contrast(114%);}

main .process {background-color:#fff;}
main .process ol {margin-top:40px; flex-wrap: wrap; justify-content:center; row-gap:20px;}
main .process ol li {flex:1 1 20%; min-width:200px; max-width:220px;}
main .process img {width:100%; height:auto; opacity:.2; transform:scale(80%);}
main .process ol li.active img {opacity:1; transform:scale(100%);}
main .process ol li:first-child img {transition:all .4s ease;}
main .process ol li:nth-child(2) img {transition:all .8s ease;}
main .process ol li:nth-child(3) img {transition:all 1.2s ease;}
main .process ol li:nth-child(4) img {transition:all 1.6s ease;}
main .process ol li:last-child img {transition:all 2s ease;}


main .voucher {background-color:#d0dbf8;}
main .voucher .category {border:1px solid #777; border-radius:50px; padding:15px 30px; display:inline-block; font-weight:500; margin:20px auto 0; color:#444;}
main .voucher .category > span::after {content:'>'; font-weight:100; margin:0 5px; color:#555;}
main .voucher .category > span:last-child::after {content:'';}

main .voucher .voucher_type {gap:20px; max-width:800px; margin:60px auto; flex-wrap: wrap; justify-content:center;}
main .voucher .voucher_type li {flex:1 1 30%; min-width:200px; max-width:220px; padding:30px; background:#fff; border:1px solid rgba(0,0,0,0.08); box-shadow:0 5px 20px rgba(0,0,0,0.05); border-radius:10px; opacity:.2; transform:scale(80%);}
main .voucher .voucher_type li.active { opacity:1; transform:scale(100%);}
main .voucher .voucher_type li:first-child {transition:all .4s ease;}
main .voucher .voucher_type li:nth-child(2) {transition:all .8s ease;}
main .voucher .voucher_type li:nth-child(3) {transition:all 1.2s ease;}

main .voucher .voucher_type .thumb {display:block; height:80px;}
main .voucher .voucher_type .thumb img {max-height:100px;}
main .voucher .voucher_type strong {display:block; color:#3056a1; font-size:22px; margin:20px 0 10px;}
main .voucher .voucher_type p {font-size:16px; color:#444;}
main .voucher .voucher_type .btn_more {background:#4880ed; color:#fff; font-size:15px; line-height:1em; padding:6px 15px; display:inline-block; border-radius:50px;}
main .voucher .voucher_type .btn_more i img {width:12px; height:12px; filter: invert(100%) sepia(0%) saturate(7472%) hue-rotate(68deg) brightness(108%) contrast(97%); transform: translateY(-1px);}
main .voucher .voucher_type .btn_more > * {vertical-align:middle;}

main .voucher .btn_submit {background:#4880ed; color:#fff; font-size:22px; font-weight:600; padding:16px 35px; display:inline-block; border-radius:50px;}
main .voucher .btn_submit span {vertical-align:middle;}
main .voucher .btn_submit i img {width:18px; height:18px; filter: invert(100%) sepia(0%) saturate(7472%) hue-rotate(68deg) brightness(108%) contrast(97%); }

main .voucher + .voucher {background-color:#fff;}
main .voucher .voucher_map {margin:40px auto;}
main .voucher .voucher_map img {width:100%; transform:scale(95%); transition:all .5s ease;}
main .voucher .voucher_map.active img {transform:scale(100%);}

main .contact {background:url('https://img.etnews.com/2025/voucher/images/bg_contact.jpg') no-repeat; background-size:cover; position:relative; overflow:hidden;}
main .contact .mail {display:inline-block; padding:20px 40px; margin:20px auto 40px; background:#fff; border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,0.1);}
main .contact .mail:hover {box-shadow:0 0 5px rgba(0,0,0,0.3);}
main .contact .mail:hover a {box-shadow: inset 0 -18px 0 rgb(88, 234, 247);}
main .contact .mail strong {display:block; font-size:20px; margin-bottom:4px;}
main .contact .mail a {box-shadow: inset 0 -4px 0 rgb(88, 234, 247); padding:0 2px;}

main .contact figure img {position:absolute; right:0; bottom:-40px; transition:all .5s ease; width:300px;}
main .contact figure .card1 {right:100px; bottom:-160px; }
main .contact figure .card2 {transform: rotate(0);}
main .contact figure .active.card1 {transform: rotate(-35deg);}
main .contact figure .active.card2 {transform: rotate(-20deg);}


footer {background:#fff; padding:40px 0;}
footer .logo img {height:30px;} 
footer ul {column-gap:40px; color:#444}
footer li > * {vertical-align:middle;}
footer i img {width:20px; height:20px; opacity:.8;}

@media screen and (max-width: 1140px) {
    .wrap { padding-left:20px; padding-right:20px;}
    nav .acc_nav {right:5px; }
    main .contact figure img {width:250px; bottom:-120px;}
}

@media screen and (max-width: 800px) {
    main .intro .flowtext {font-size:3em;}
    main .contact .wrap {padding-bottom:140px;}
    main .contact figure img {width:220px; bottom:-120px;}
    footer .wrap {display:block; font-size:16px;}
    footer .logo {display:block; margin-bottom:15px;}
    footer .flex {justify-content:start; column-gap:20px;}
    footer i img {width:16px; height:16px;}

}