* {
	box-sizing: border-box;
	outline: 0 none;
}
html,
body {
	/* height: 100%; */
	font-family: 'Noto Sans Korean', dotum, '돋움', sans-serif;
	font-weight: 500;
	color: #333333;
	line-height: 1;
	background: #ffffff;
	/* -webkit-font-smoothing:antialiased;
	-webkit-text-size-adjust:100%; */
}
html.scroll-blocking {
	overflow: hidden;
}
body {
	letter-spacing: -0.05em;
}
b {
	font-weight: bold;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1;
}
img {
	display: block;
	max-width: 100%;
	height: auto;
}
label {
	font-family: 'Noto Sans Korean', dotum, '돋움', sans-serif;
}
button {
	font-family: 'Noto Sans Korean', dotum, '돋움', sans-serif;
	line-height: 1;
}
input[type="text"],
input[type="tel"] {
	font-family: 'Noto Sans Korean';
	font-weight: 500;
	font-size: 20px;
	letter-spacing: -0.05em;
	padding-left: 20px;
	background-color: #ffffff;
	height: 51px;
	box-sizing: border-box;
	border-radius: 6px;
	/* cursor: none; */
}
::-webkit-input-placeholder {
	color: #999999;
	font-size: 20px;
} 
:-moz-placeholder {
	color: #999999;
	font-size: 20px;
	opacity: 1;
}
::-moz-placeholder {
	color: #999999;
	opacity: 1; 
	font-size: 20px;
}
:-ms-input-placeholder {
	color: #999999; 
	font-size: 20px;
}
.for-a11y {
	position: absolute;
	display: block;
	width: 1px;
	height: 1px;
	overflow: hidden;
	color: transparent;
	font-size: 1px;
	line-height: 1px;
	opacity: 0;
	-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';
	filter: alpha(opacity=0);
}






/* end sub */
/* #footer {
	background: url(../assets/copyright.png) 50% / auto #313131 no-repeat;
	background-color: #313131;
	padding: 60px 0;
} */

/*popup*/
html.menu-opened,
html.popup-opened {
	overflow: hidden;
}
.popup-wrap {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* z-index: 2000; */
	z-index: 99;
	overflow-y: scroll;
	overflow-x: auto;
	font-size: 0;
	/*	line-height: 0;*/
	opacity: 0;
	text-align: center;
	white-space: normal;
	word-break: normal;
	word-wrap: normal;
	background: rgba(0, 0, 0, 0.8);
	-webkit-transition: opacity 0.1s ease;
	transition: opacity 0.1s ease;
}

.popup-wrap.is-opened {
	display: block;
	opacity: 1;
}
.popup-wrap.is-opened .out-area {
	content: "";
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	/* cursor: pointer; */
}
.popup-wrap:before {
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.popup-wrap .popup {
	display: inline-block;
}
.popup-wrap.is-opened .popup {
	transform: scale(1) translateY(0);
}
.popup {
	display: none;
	position: relative;
	z-index: 2;
	vertical-align: middle;
	white-space: normal;
	word-break: keep-all;
	word-wrap: break-word;
	text-align: left;
	/* -webkit-transition: all 0.35s ease; */
	transition: all 0.35s ease;
	transform: scale(0) translateY(10px);
	width: 100%;
	/* padding: 0 20px; */
	margin: 40px 0;
	background-color: transparent;
}
.popup .inner {
	position: relative;
	background-color: #000;
	margin: 0 5px;
	text-align: center;
}
.popup .popup-close {
	display: block;
	width: 50px;
	height: 50px;
	background: url(../assets/popup_close.png) 50% / 32px auto no-repeat;
	position: absolute;
    top: -50px;
    right: 0;
	font-size: 14px;
}



#step-progress {
    position: fixed;
    top: 101px;
    left: 0;
    height: 4px;
    width: 100vw;
    background-color: #eeeeee;
    z-index: 1;
}
#step-progress .bar {
    width: 34%;
    height: 100%;
    background-color: #f68b1e;
}

#step-count .count {
	display: flex;
	justify-content: center;
	margin-bottom: 45px;
}

#step-count .count li {
display: flex;
align-items: center;
justify-content: center;
    width: 174px;
    height: 58px;
	background-color: #fecaa2;
	color: #fff;
}

#step-count .count li img {
    height: 19px;
}

#step-count .count li:nth-child(1) {
	background-color: #f68b1e;
}

#step-count .count li:nth-child(2) {
	margin: 0 8px;
}

.content._event {
    padding: 170px 0 79px;
    min-height: calc(100vh - 120px);
}
.content._event .title-block {
    text-align: center;
}
.content._event .title-block .tt-sub {
    margin-bottom: 21px;
}
.content._event .title-block p {
    font-size: 20px;
    letter-spacing: -0.05em;
    line-height: 1;
    margin: 23px 0 0;
}

.content._event #step1 .title-block {
    margin-bottom: 50px;
}

.content._event #step2 .title-block {
    margin-bottom: 51px;
}

.content._event #step3 .title-block {
    margin-bottom: 22px;
}

.step-cont {
	display: none;
}

.input-wrapper {
    max-width: 530px;
    margin: 0 auto;
}
.input-wrapper .row {
	display: flex;
	align-items: center;
	width: 100%;
	margin-bottom: 17px;
}
.input-wrapper .row:last-child {
    margin-bottom: 0;
}
.input-wrapper .row .input-wrap {
	display: flex;
	width: 100%;
	align-items: center;
    position: relative;
}
.input-wrapper .row label {
	width: 110px;
	flex-shrink: 0;
    text-align: left;
    background-size: auto;
    background-repeat: no-repeat;
    background-position: 0 50%;
    height: 51px;
}
.input-wrapper .row .input-wrap input[type="tel"] {
	margin-right: 7px;
}
.input-wrapper .row-phone .input-wrap input[type="tel"] {
    max-width: 100px;
}
.input-wrapper .row .input-wrap :last-child {
	margin-right: 0;
}
.input-wrapper .spam-msg {
	margin-bottom: 16px;
	letter-spacing: -0.025em;
	font-size: 15px;
	line-height: 1.2;
	text-align: center;
	/* padding-left: 66px; */
}
.input-wrapper .privacy-msg {
    color: #f68b1e;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    margin-top: 34px;
    margin-bottom: 15px;
}
.input-wrapper input[type="text"],
.input-wrapper input[type="tel"] {
	border: 2px solid #f68b1e;
	width: 100%;
    max-width: 313px;
}
.input-wrapper input:read-only {
	/* background-color: #ececec; */
}
.input-wrapper #verify-btn {
	font-size: 14px;
	width: 98px;
	flex-shrink: 0;
	background-color: #251f1a;
    background-size: auto;
    background-position: 50%;
    background-repeat: no-repeat;
	border-radius: 5px;
	color: #ffffff;
	height: 51px;
}
.input-wrapper #verify-time {
    position: absolute;
    top: 50%;
    left: 236px;
    transform: translateY(-50%);
	flex-shrink: 0;
	font-size: 22px;
    letter-spacing: 0;
    color: #888888;
}
.input-wrapper .submit-btn {
	display: block;
	background-color: #f68b1e;
    background-image: url(../assets/txt_step1_submit.png);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: auto;
	margin: 30px auto 0;
	color: #ffffff;
	font-size: 14px;
	width: 314px;
	height: 75px;
}
.input-wrapper .agree-area {
    padding-left: 110px;
}
.input-wrapper .agree-area .row {
    text-align: left;
    font-size: 0;
    width: auto;
    margin-bottom: 5px;
}
.input-wrapper .agree-area .row .checkbox-wrapper {
    display: flex;
    align-items: center;
}
.input-wrapper .agree-area .row .checkbox-wrapper > label {
    font-size: 15px;
    font-weight: 400;
    color: #333333;
    letter-spacing: -0.025em;
    margin-right: 20px;
    width: auto;
    height: auto;
}
.input-wrapper .checkbox-wrapper .checkbox {
    margin-right: 10px;
}
.input-wrapper .agree-area .row:first-child .checkbox-wrapper > label {
    margin-right: 12px;
}
.input-wrapper .checkbox-wrapper .checkbox label {
    display: block;
    width: 25px;
    height: 25px;
    background: url(../assets/checkbox_unchecked.png) 50% / 100% no-repeat;
    cursor: pointer;
}
.input-wrapper .checkbox-wrapper .checkbox input[type='checkbox']:checked + label {
    background: url(../assets/checkbox_checked.png) 50% / 100% no-repeat;
}
.input-wrapper .agree-area .row .checkbox-wrapper button {
    font-size: 15px;
    font-weight: 400;
    color: #ffffff;
    border-radius: 13px;
    background-color: #251f1a;
    padding: 5px 14px;
}


#step2 .input-wrapper {
    max-width: 440px;
    margin: 0 auto;
}
#step2 .input-wrapper .submit-btn {
    width: 360px;
    background-image: url(../assets/txt_step2_submit.png);
	margin: 51px auto 0;
}


.card-wrapper .card-container {
    font-size: 0;
    text-align: center;
}
.card-wrapper .paper {
    position: relative;
    display: inline-block;
    width: 495px;
    height: 546px;
    padding: 83px 0 0;
    background: url(../assets/paper_bg.png) 50% / cover no-repeat;
    /* overflow: hidden; */
}
.card-wrapper .paper .obj {
    position: absolute;
}
.card-wrapper .paper .obj.char1 {
    left: 160px;
    bottom: 127px;
    opacity: 0;
    visibility: hidden;
    transform: translate(-2px, 2px);
}
.card-wrapper .paper .obj.char2 {
    left: -30px;
    bottom: -14px;
}
.card-wrapper .paper .obj.airplane-group {
    left: 249px;
    bottom: 125px;
}
.card-wrapper .paper .obj.airplane-group .guideline {
    width: 243px;
    height: 86px;
    background: url(../assets/letter_obj_guideline.png) 50% / cover no-repeat;
    clip-path: inset(0 100% 0 0);
    /* clip-path: inset(0 0 0 0); */
}
.card-wrapper .paper .obj.airplane-group .airplane {
    position: absolute;
    bottom: -24px;
    left: -28px;
    transform: rotate(48deg);
    z-index: 1;
    visibility: hidden;
    opacity: 0;
}
.card-wrapper .paper .text .txt-line {
    display: flex;
    line-height: 1;
    height: 30px;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    padding-left: 6px;
    overflow: hidden;
    /* display: none; */
}
.card-wrapper .paper .text .txt-line.normal {
    height: auto;
    margin-bottom: 7px;
}
.card-wrapper .paper .text .txt-line.normal span {
    font-size: 24px;
    font-weight: 700;
    color: #333333;
}
.card-wrapper .paper .text .txt-line span {
    height: 30px;
}
.card-wrapper .paper .text .txt-line:last-child {
    margin-bottom: 0;
}
.card-wrapper .paper .text .txt-line .rolling-txt {
    position: relative;
    /* margin-right: 8px; */
    /* display: flex; */
    /* align-items: center; */
    /* flex-wrap: wrap; */
    overflow: hidden;
}
.card-wrapper .paper .text .txt-line .rolling-txt:after {
    content: "";
    height: 2px;
    background-color: #251f1a;
    position: absolute;
    left: -2px;
    right: -2px;
    bottom: 0;
}
.card-wrapper .paper .text .txt-line .rolling-txt em {
    display: block;
    /* height: 100%; */
    font-size: 20px;
    font-weight: 700;
    color: #e85c28;
    padding: 5px 0;
}
.card-wrapper .paper .text .txt-line .rolling-txt .rolling-wrap {
    display: block;
    position: relative;
    width: 362px;
    height: auto;    
}
#rolling2 .rolling-wrap {
    width: 232px;
}
.card-wrapper .paper .text .txt-line .rolling-txt .rolling-wrap em {
    height: 30px;
    width: 100%;
    background-position: 50%;
    background-size: auto 24px;
    background-repeat: no-repeat;
}
.card-wrapper .paper .text .txt-line .rolling-txt .rolling-wrap.bluring {
    /* filter: blur(2px); */
}
.card-wrapper .paper .text .txt-line .static-txt {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto;
}
.card-wrapper #msg-shuffle {
    display: block;
    margin: 20px auto 0;
    width: 142px;
    height: 43px;
    border-radius: 21.5px;
    border: solid 1px #f68b1e;
    background-color: #fff
}
.card-wrapper #msg-save {
    width: 139px;
    height: 55px;
    background: url(../assets/message_save.png) 50% / 93px auto no-repeat #ffffff;
    box-shadow: 0px 3px 9px 0px rgba(164, 116, 67, 0.22);
    border-radius: 5px;
    position: absolute;
    bottom: 38px;
    left: 50%;
    transform: translateX(-50%);
}

.submit-btn {
    width: 360px;
    height: 75px;
}
#step3 .btn-wrapper {
    margin: 30px auto 0;
}
#step3 .btn-wrapper .submit-btn {
    display: block;
    margin: 0 auto;
}
#step3 #all-complete {
    background: url(../assets/txt_step3_submit.png) 50% / auto no-repeat #f68b1e;
    color: #fff;
    margin-bottom: 15px;
}
#step3 .btn-wrapper #go-main {
    background: url(../assets/txt_step3_gomain.png) 50% / auto no-repeat #555555;
}
#step3 .btn-wrapper #share-kakao {
    background-color: #555555;
    color: #fff;
}
.content.__letter {
    background-color: #fff6e9;
    padding: 187px 0 130px;
}
.__letter .title-block {
    margin-bottom: 50px;
}
.__letter .tt-main {
    position: relative;
    display: inline-block;
}
.__letter #from-name {
    position: absolute;
    right: 304px;
    top: -5px;
    color: #f18d01;
    font-size: 50px;
    letter-spacing: -0.025em;
}
.__letter .card-wrapper .paper {
    padding: 70px 0 0;
}
.__letter .card-wrapper .paper .text .txt-line .rolling-txt:after {
    content: none;
}
.__letter .card-wrapper .paper .text .txt-line {
    position: relative;
    overflow: visible;
    align-items: center;
    height: auto;
}
.__letter .card-wrapper .paper .text .txt-line.normal {
    /* height: 19px; */
    margin-bottom: 20px;
    line-height: 32px;
}
.__letter .card-wrapper .paper .text .txt-line:after {
    content: "";
    height: 1px;
    background-color: #fecba3;
    position: absolute;
    bottom: -5px;
    left: 68px;
    right: 68px;
}
.content.__letter .title-block .guide-msg {
    margin-top: 19px;
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.05em;
    color: #333333;
    line-height: 1.2;
}
.__letter .title-block .guide-msg strong {
    color: #f68b1e;
}
.__letter .btn-wrapper {
    margin-top: 50px;
}
.__letter .submit-btn {
    display: block;
    /* background: url(../assets/txt_letter_submit.png) 50% / auto #f68b1e no-repeat; */
    background: url(../assets/txt_letter_get.png) 50% / auto #f68b1e no-repeat;
    width: 360px;
	height: 75px;
    margin: 0 auto;
}
.__letter .event-info-wrap {
    width: 1200px;
    margin: 114px auto 0;
    position: relative;
    background-color: #fff6e9;
}
.__letter .section-event .event-block > .title-block > .polaroid {
    top: -40px;
    right: 196px;
}

.agree-popup {
    width: 480px;
}
.agree-popup > .inner {
	padding: 36px 19px;
}
.agree-popup .title {
	font-size: 24px;
	font-weight: 900;
	letter-spacing: -0.05em;
	text-align: center;
	margin-bottom: 48px;
}
.agree-popup p.group:last-child {
	margin-bottom: 0;
}
.agree-popup p.group {
	margin-bottom: 24px;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.05em;
	line-height: 1.6;
	text-align: left;
}
.agree-popup p.group strong {
	font-weight: 700;
}

#get-coupon-popup {
    width: 620px;
}
#get-coupon-popup .inner {
    padding: 69px 24px 51px;
}
.popup .inner {
    background-color: #ffffff;
    border-radius: 10px;
}
#get-coupon-popup .title {
    margin-bottom: 30px;
}
#get-coupon-popup .title p {
    margin-top: 14px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.05em;
}

#get-coupon-popup .title .subtitle {
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 15px;
}

#get-coupon-popup .title .subtitle em {
    font-size: 26px;
    font-weight: 500;
    color: #333;
}

#get-coupon-popup .animation-area {
	width: 100%;
	padding: 0 50px;
	display: flex;
	margin-bottom: 25px;
	position: relative;
    justify-content: center;
}

#get-coupon-popup .animation-area .animation-cont {
	display: flex;
	width: 100%;
    max-width: 375px;
	justify-content: space-between;
}

#get-coupon-popup .animation-area .animation-cont .emoji {
	width: 70px;
	height: 70px;
}

#get-coupon-popup .animation-area .animation-cont .emoji._01 {
	background: url(../assets/sprite_emoji_03.png) 0 0 / auto 70px no-repeat;
}
#get-coupon-popup .animation-area .animation-cont .emoji._02 {
	background: url(../assets/sprite_emoji_04.png) 0 0 / auto 70px no-repeat;
}
#get-coupon-popup .animation-area .animation-cont .emoji._03 {
	background: url(../assets/sprite_emoji_15.png) 0 0 / auto 70px no-repeat;
}
#get-coupon-popup .animation-area .animation-cont .emoji._04 {
	background: url(../assets/sprite_emoji_07.png) 0 0 / auto 70px no-repeat;
}

#get-coupon-popup .submit-btn {
    background-image: url(../assets/letter_popup_submit.png);
}
#get-coupon-popup .input-wrapper .agree-area {
    padding-left: 76px;
}

#get-winner-popup {
	width: 565px;
	text-align: center;
}
#get-winner-popup .inner {
	padding: 50px 0 40px;
}
#get-winner-popup .title {
	/* width: 237px; */
	margin: 0 auto 30px;
}
#get-winner-popup .title + p {
	font-size: 19px;
	letter-spacing: -0.05em;
	font-weight: 700;
}
#get-winner-popup .title + p strong {
	color: #f68b1e;
}
#get-winner-popup .list-container {
	margin: 0 42px;
	/* padding: 0 33px; */
	border: 1px solid #f68b1e;
	border-radius: 5px;
	height: 493px;
	overflow: hidden;
	margin-top: 42px;
}
#get-winner-popup .list-container .scroll-container {
	height: 100%;
	padding: 0 30px;
	overflow: scroll;
	font-size: 0;
	text-align: left;
}
#get-winner-popup .list-container .scroll-container .prize-title {
	font-size: 20px;
	line-height: 1.2;
	font-weight: 700;
	padding: 16px 0;
	border-bottom: 1px solid #333333;
	text-align: center;
	margin: 8px 0;
}
#get-winner-popup .list-container .scroll-container span {
	display: inline-block;
	width: 33.3%;
	font-size: 16px;
	padding: 15px 0;
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: -0.05em;
	vertical-align: middle;
	text-align: center;
}