@charset 'UTF-8';
@font-face {
    font-family: "Pretendard";
    font-weight: 100;
    font-style: normal;
    src: url("../../fonts/Pretendard-Thin.woff") format("font-woff"),
    url("../../fonts/Pretendard-Thin.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 200;
    font-style: normal;
    src: url("../../fonts/Pretendard-ExtraLight.woff") format("font-woff"),
    url("../../fonts/Pretendard-ExtraLight.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 300;
    font-style: normal;
    src: url("../../fonts/Pretendard-Light.woff") format("font-woff"),
    url("../../fonts/Pretendard-Light.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 400;
    font-style: normal;
    src: url("../../fonts/Pretendard-Regular.woff") format("font-woff"),
    url("../../fonts/Pretendard-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 500;
    font-style: normal;
    src: url("../../fonts/Pretendard-Medium.woff") format("font-woff"),
    url("../../fonts/Pretendard-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 600;
    font-style: normal;
    src: url("../../fonts/Pretendard-SemiBold.woff") format("font-woff"),
    url("../../fonts/Pretendard-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 700;
    font-style: normal;
    src: url("../../fonts/Pretendard-Bold.woff") format("font-woff"),
    url("../../fonts/Pretendard-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 800;
    font-style: normal;
    src: url("../../fonts/Pretendard-ExtraBold.woff") format("font-woff"),
    url("../../fonts/Pretendard-ExtraBold.woff2") format("woff2");
}

@font-face {
    font-family: "Pretendard";
    font-weight: 900;
    font-style: normal;
    src: url("../../fonts/Pretendard-Black.woff") format("font-woff"),
    url("../../fonts/Pretendard-Black.woff2") format("woff2");
}
/*
@font-face {
    font-family: "omnigothic", sans-serif;
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "omnigothic", sans-serif;
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "omnigothic", sans-serif;
    font-weight: 600;
    font-style: normal;
}
*/

body { color:#32a89f; font-family:omnigothic, sans-serif; font-weight:400; }
h1 { font-size:11.2vw; line-height:16vw; letter-spacing:-.33vw; font-weight:500; text-align:center; }

.__btn { margin:0 auto; padding-top:0.5vw; width:50vw; height:11.76vw; color:#fff; font-size:4.53vw; line-height:12.26vw; text-align:center; font-weight:500; background:#f74f6f; border-radius:6vw; cursor:pointer; }

.sns-modal { top:0; }

/* step_1 : intro */
.page_wrap { position:relative; width:100vw; height:100vh; }
.page_wrap .__skin { position:absolute; width:100vw; height:100%; background:#fffde7; z-index:-1; }
.page_wrap .__skin .__top { display:flex; margin:0 auto; width:64vw; height:5.66vh; }
.page_wrap .__skin .__top span { display:inline-block; margin-right:4vw; width:5.33vw; height:5.66vh; max-height:12.26vw; background:#000; }
.page_wrap .__skin .__top span:nth-child(1) { margin-right:10.66vw; }
.page_wrap .__skin .__top span:nth-child(4) { margin-right:9.33vw; }
.page_wrap .__skin .__top span:last-child { margin-right:0; }
.page_wrap .__skin .__bottom { position:absolute; left:50%; bottom:4vh; transform:translateX(-50%); color:#d8d6c0; font-size:3.73vw; font-weight:400; text-align:center; }

.intro { display:flex; justify-content:center; align-items:center; height:100vh; }
.intro .__inner { opacity:0; }
.intro .__h3 h3 { margin:0 auto; padding-top:0.5vw; width:84vw; height:9.5vw; font-size:4vw; line-height:10vw; font-weight:500; text-align:center; background:#e0f9fc; border:2px solid #6dd6e3; border-radius:2.66vw; }

.intro .__box { margin:0 auto; margin-top:2vw; width:84vw; background:#e0f9fc; border:2px solid #85d4de; border-radius:2.66vw; }
.intro .__title { padding-bottom:3vh; border-bottom:2px solid #85d4de; }
.intro .__title h2 { padding-top:3.7vh; font-size:5.86vw; font-weight:500; text-align:center; }
.intro .__title h1 { margin-top:2vh; }
.intro .__title h1 b { color:#f74f6f; font-weight:500; }

.intro .__omr { display:flex; background:#fffde7; border-radius:0 0 2.66vw 2.66vw; }
.intro .__omr .__left { padding:5.33vw 0; width:9.6vw; height:100%; background:#e0f9fc; border-radius:0 0 0 2.66vw; border-right:2px solid #85d4de; }
.intro .__omr .__left p { font-size:4vw; line-height:10.66vw; font-weight:500; text-align:center; }
.intro .__omr .__right { position:relative; margin-top:5.6vw; margin-left:10.4vw; }
.intro .__omr .__right li { display:flex; flex-wrap:wrap; gap:6.13vw; margin-bottom:2.8vw; }
.intro .__omr .__right li span { position:relative; padding-top:0.2vw; width:4.26vw; height:7.4vw; font-size:4.26vw; line-height:8.53vw; text-align:center; border:1px solid #6bbac4; border-radius:13.33vw; }
.intro .__omr .__right i { position:absolute; top:-3px; left:1px; display:block; width:3.73vw; height:10vw; border-radius:1.86vw; opacity:0.87; background:#f74f6f; }
.intro .__omr .__right .btn_year { display:none; opacity:0; position:absolute; top:calc(50% - 5.6vw); left:50%; transform:translate(-50%, -50%); }


/* step_2 : year */
.step_2 { display:flex; flex-wrap:wrap; align-items:center; margin:0 auto; width:84vw; height:100vh; display:none; }
.year .hide { display:none; }
.year .show { display:block; }

.year h1 { font-size:8vw; line-height:4vh; font-weight:500; letter-spacing:-.24vw; text-align:center; }
.year .select { position:relative; margin-top:3.7vh; padding:3.4vw 13.33vw 3.2vw; width:57.33vw; border-radius:2.66vw; border:2px solid #85d4de; background:transparent; cursor:pointer; }
.year .select:before { content:''; position:absolute; right:0; top:0; width:13vw; height:100%; background:#e0f9fc; border-left:2px solid #85d4de; border-radius:0 2.26vw 2.26vw 0; }
.year .select i { position:absolute; right:4vw; top:5vw; width:5vw; height:2.93vw; background:url(../img/ic_arrow.svg) no-repeat center center; background-size:100% auto; transition:all .3s ease; }
.year .select i.active { transform:rotate(180deg); }
.year .select span.selected-option { font-size:4.8vw; font-weight:500; }
.year .select span svg { display:none; }

.year .select ul { position:absolute; top:8vw; left:-.53vw; width:100%; height:85vw; border:2px solid #85d4de; border-radius:2.66vw; background:#fff; cursor:pointer; overflow-y:scroll; }
.year .select ul li { position:relative; margin:1.33vw; padding:2.6vw 12vw 2.4vw; font-size:4.8vw; font-weight:500; border-radius:2.66vw; transition:all .3s ease; }
.year .select ul li.active { background:#cff4f8; color:#f74f6f; }

.year .select svg { position:absolute; top:3.46vw; right:3.73vw; width:5.6vw; height:3.73vw; stroke-dasharray:30; stroke-dashoffset:30; }
.year .select svg .st0 { fill:none; stroke:#F74F6F; stroke-width:2; stroke-miterlimit:10; }
.year .select ul li.active svg { animation:dash .3s linear; animation-fill-mode: forwards; }
@keyframes dash {
    100% { stroke-dashoffset:60; }
}

.year .btn_select { display:none; margin-top:10vh; }


/* step_3 : sentence */
.sentence { display:flex; justify-content:center; align-items:center; margin-top:1vh; }
.sentence .__inner { margin:0 auto; width:100%; }
.sentence .__inner .__box { display:flex; flex-wrap:wrap; justify-content:center; border-radius:2.66vw; border:2px solid #85d4de; }
.sentence .__inner .__box .__top { padding-top:0.2vw; width:100%; height:9.4vw; background:#e0f9fc; text-align:center; border-radius:2.66vw 2.66vw 0 0; border-bottom:2px solid #85d4de; }
.sentence .__inner .__box .__top h3 { font-size:4.26vw; line-height:9.6vw; font-weight:500; }
.sentence .__inner .__box .__bottom { padding:3.5vh 0; }
.sentence .__info { margin-top:2.7vh; font-size:4.8vw; letter-spacing:-.14vw; text-align:center; font-weight:500; }

.sentence .btn_wrap { display:flex; gap:3vw; margin-top:4vh; }
/*.sentence .btn_wrap .__btn { width:40.5vw; }*/
.sentence .btn_wrap .btn_re { background:#000; display:none; }


/* step_4 : write */
.write { display:block; height:auto; display:none; }

.write .header { padding-top:25.6vw; }
.write .header h3 { font-size:5.33vw; font-weight:500; text-align:center; }
.write .header .__title { display:flex; gap:2.9vw; justify-content:center; margin-top:4.53vw; width:100vw; }
.write .header .__title div b { display:inline-block; margin-right:1.33vw; padding-top:0.3vw; width:12.26vw; height:11.96vw; font-size:7.46vw; line-height:13.33vw; font-weight:500; text-align:center; border-radius:100%; border:2px solid #32a89f; }
.write .header .__title div span { font-size:5.33vw; font-weight:500; vertical-align:bottom; }
/*.write .header .__title h1 { font-size:11.5vw; }*/

.write .header .__absence { display:flex; flex-wrap:wrap; margin:0 auto; margin-top:4.8vw; width:89.33vw; border:2px solid #6dd6e3; border-radius:2.66vw; }
.write .__top { padding:2.66vw 0 2.13vw; width:100%; background:#e0f9fc; border-radius:2.66vw 2.66vw 0 0; border-bottom:2px solid #6dd6e3; }
.write .__top p { margin-left:4.53vw; font-size:4.8vw; font-weight:500; }
.write .__top p span { font-size:3.73vw; }

.write .header .__absence .__bottom { display:flex; }
.write .header .__absence .__bottom .__txt { padding:5vw 0 4.8vw; margin-left:4.53vw; width:62.5vw; }
.write .header .__absence .__bottom .__txt p { font-size:3.7vw; line-height:5.86vw; }
.write .header .__absence .__bottom .__mark { display:flex; justify-content:center; align-items:center; width:21.8vw; border-left:2px solid #6dd6e3; }
.write .header .__absence .__bottom .__mark .line { display:block; position:relative; width:3.2vw; height:6.13vw; border-radius:2.2vw; background:#fffde7; border:2px solid #f74f6f; overflow:hidden; }
.write .header .__absence .__bottom .__mark .fill { display:block; position:absolute; top:-1px; left:-1px; width:calc(100% + 2px); height:0; border-radius:inherit; background:#f74f6f; transition:all .3s ease; }
.write .header .__absence .__bottom .__mark.active .fill { height:calc(100% + 2px); }

.write .header .__notice { position:relative; margin-top:4.8vw; margin-left:11.46vw; font-size:3.73vw; line-height:5.86vw; letter-spacing:-.07vw; }
.write .header .__notice:before { content:'※'; position:absolute; top:0; left:-3.46vw;  }

.write .canvas_wrap { padding-bottom:14vw; }
.write .canvas { display:flex; flex-wrap:wrap; margin:0 auto; margin-top:5.33vw; width:89.33vw; border:2px solid #6dd6e3; border-radius:2.66vw; }
.write .canvas .__bottom { position:relative; width:100%; height:100%; }
.write .canvas .__bottom .canvas_write { position:relative; }
#canvas { position:absolute; left:0; top:0; z-index:10; width:100%; height:100%; box-sizing: border-box; }
.write .canvas .__bottom p.write_text { height:103vw; max-height:103vw; }
.write .canvas .__bottom p.write_text span { display:block; padding:4vw 4vw 16vw; font-family:'pretendard'; font-size:18.66vw; line-height:28vw; letter-spacing:-.93vw; font-weight:300; opacity:.3; } 
.write .canvas .__bottom p.write_text .__2006 { font-size:17.86vw; }
.write .canvas .__bottom p.write_text .__2007 { padding-top:16vw; font-size:17.86vw; }
.write .canvas .__bottom p.write_text .__2010 { padding:8vw 2vw 16vw; font-size:16.9vw; line-height:24vw; }
.write .canvas .__bottom p.write_text .__2011 { padding:2vw 14.5vw 16vw; font-size:18vw; line-height:21vw; }
.write .canvas .__bottom p.write_text .__2013 { padding:8vw 2vw 16vw; font-size:16.5vw; line-height:24vw; }
.write .canvas .__bottom p.write_text .__2015 { padding:8vw 2vw 16vw; font-size:16vw; line-height:25.33vw; }
.write .canvas .__bottom p.write_text .__2017 { padding:8vw 2vw 16vw; font-size:16vw; line-height:25.33vw; }
.write .canvas .__bottom p.write_text .__2018 { padding:8vw 2vw 16vw; font-size:16.5vw; line-height:25.33vw; }
.write .canvas .__bottom p.write_text .__2019 { padding:8vw 2vw 16vw; font-size:16.5vw; line-height:25.33vw; }
.write .canvas .__bottom p.write_text .__2020 { padding:8vw 4vw 16vw; font-size:18vw; line-height:26.66vw; }
.write .canvas .__bottom p.write_text .__2021 { padding:8vw 3vw 16vw; font-size:18vw; line-height:26.66vw; }

.write .canvas .__bottom .btn_rewrite { position:absolute; bottom:3.73vw; left:50%; transform:translateX(-50%); text-align:center; z-index:10;  display:flex;}
.write .canvas .__bottom .btn_rewrite button {margin-left:5px; padding:0; width:37vw; height:10vw; font-family:omnigothic, sans-serif; color:#32a89f; font-size:4.5vw; line-height:10vw; background:#e0f9fc; border:2px solid #6dd6e3; border-radius:2.66vw; box-sizing:border-box;}
.write .canvas .__bottom .btn_rewrite button:first-child{margin-left:0;}



.write .btn_area { margin-top:0; }
.write .__btn { width:58.66vw; }
.write .btn_save,
.write .btn_outlink { background:#000; }

.write .btn_share { margin-top:2.13vw; }
.write .btn_return { position:relative; display:flex; gap:2.66vw; margin:0 auto; margin-top:4.5vw; width:46vw; color:#000; font-size:4.53vw; font-weight:500; }
.write .btn_return:after { content:''; position:absolute; bottom:-2.13vw; left:0; width:100%; height:1px; background:#000; }
.write .btn_return i { display:inline-block; width:5.33vw; height:4.8vw; background:url(../img/ic_return.svg) no-repeat center center; background-size:100% auto; }
.write .btn_outlink { margin-top:8vw; }
.write .btn_outlink a { text-decoration:none; color:#fff; }


.write .txt_wrap { margin:0 auto; margin-top:16vw; width:84vw; }
.write .txt_wrap h2 { font-size:9vw; line-height:11.73vw; font-weight:500; }
.write .txt_wrap p { margin-top:8vw; font-family:'pretendard'; font-size:4.53vw; line-height:6.66vw; font-weight:400; letter-spacing:-.23vw; }
.write .txt_wrap p b { font-size:5.33vw; letter-spacing:-.26vw; font-weight:500; }

.write .outro { padding-top:11.46vw; padding-bottom:10.13vw; font-family:'pretendard'; color:#b1af9b; font-size:4vw; line-height:5.86vw; letter-spacing:-.2vw; text-align:center; }


/* footer */
.footer { margin-top:-1px; font-family:'pretendard'; background:#000; }

.copyright { display:block; position:relative; margin:0 auto; padding:50px 0; width:calc(100vw - 48px); height:auto; background:#000; color:#e0e0e0; z-index:1; }
.copyright p { margin:0; margin-bottom:5px; font-size:13px; line-height:15px; letter-spacing:-.39px; font-weight:400; text-align:left; }
.copyright p b { margin-right:5px; font-weight:600; }
.copyright p span.__line { display:inline-block; padding:0 2px 0 4px; color:#999; line-height:20px; }
.copyright p.__date { margin-bottom:20px; }

.copyright p.__contact b { margin-right:2px; }
.copyright p .footer_mail { color:#e0e0e0; -webkit-transition:color .3s ease; transition:color .3s ease; text-decoration:none; }
.copyright p .footer_mail i { margin-top:0.2vw; width:4.8vw; height:3.46vw; background:url(../img/ic_mail.svg) no-repeat center center; position:relative; display:inline-block; margin-right:0.53vw; vertical-align:text-top; }

.copyright .__copyright { margin-bottom:0; color:#616161; font-size:10px; }


/* info_popup */
.info_popup{position:fixed; left:50%; top:61%; padding:20px; width:94%; transform: translate(-50%, -50%); background:rgba(255, 255, 255, 0.9); box-sizing:border-box; border-radius: 10px; border: solid 2px #6dd6e3; text-align:center; font-size:16px; line-height:1.5; visibility: hidden; opacity:0;}
.info_popup.active{visibility: visible; opacity:1;}
.info_popup .btn_area{padding-top:10px;}
.info_popup .btn_area a{display:inline-block; text-decoration: none;}