@charset "utf-8";
*{ list-style: none; margin: 0; padding: 0; border: 0; box-sizing: border-box; text-decoration: none; font-family: "Pretendard", sans-serif; font-weight: 400; line-height: 1; letter-spacing: -0.08rem; color: #000;}
select::-ms-expand{ display: none;}
html{ overflow-y: scroll; width: 100%; height: 100%; background: #f5f5f5;}
html.no_scroll{ overflow: hidden;}
body{ overflow: hidden; -webkit-text-size-adjust: none;}
@media(max-width: 768px){
    html{ font-size: calc(100vw / 30);}
}







.index_login{ display: flex; flex-direction: column; justify-content: center; align-items: center; grid-gap: 3rem; position: fixed; top: 0; right: 0; bottom: 0; left: 0; padding: 0 3rem 3rem 3rem;}
.index_login .logo{ display: block; height: 5rem;}
.index_login .logo img{ display: block; width: auto; height: 100%;}
.index_login .in{ display: grid; grid-gap: 1rem; width: 100%;}
.index_login .in .wrap{ position: relative;}
.index_login .in .wrap svg{ display: block; position: absolute; z-index: 10; top: calc(50% - 0.7rem); left: 1.3rem; width: 1.4rem; height: 1.4rem;}
.index_login .in .wrap input{ display: flex; align-items: center; margin: 0; padding: 0 3.5rem; width: 100%; height: 3.5rem; border-radius: 2rem; border: 0; background: #FFF; box-shadow: 2px 0 10px 0 rgba(0 0 0/5%); font-size: 1rem; font-weight: 400; color: #000; letter-spacing: 0; outline: none; -webkit-appearance: none;}
.index_login .in .wrap input::placeholder{ color: #000;}
.index_login .in .wrap input:focus{ box-shadow: 0 0 0 1px rgba(0 0 0/100%); color: #000;}
.index_login .in .wrap i{ display: flex; justify-content: center; align-items: center; position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; width: 3.5rem; font-size: 1.6rem; color: #999;}
.index_login .in .wrap.on i{ color: #000;}
.index_login .btn_login{ display: flex; justify-content: center; align-items: center; grid-gap: 2rem; width: 100%; height: 4rem; border-radius: 2rem; background: #000; cursor: pointer;}
.index_login .btn_login p{ font-size: 1.2rem; font-weight: 700; color: #FFF;}
.index_login .btn_login svg{ width: 1.6rem; height: 1.6rem; transition: all .2s;}
.index_login .btn_login svg path{ fill: #FFF;}
.index_login .btn_login:hover svg{ transform: translate(1rem,0);}
.index_login .copy{ display: flex; justify-content: center; align-items: center; position: absolute; right: 0; bottom: 0; left: 0; height: 3rem; font-size: 0.7rem; color: #000; letter-spacing: 0;}
@media(min-width: 768px){
}


.start_wrap{ overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; grid-gap: 3rem; position: fixed; top: 0; right: 0; bottom: 0; left: 0;}
.start_wrap .step{ overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; grid-gap: 3rem; position: absolute; top: 0; right: -100%; bottom: 0; left: 100%; padding: 1.5rem 1.5rem calc(6rem + 6rem + 1rem) 1.5rem; transition: all .3s;}
.start_wrap .step .modle_foot_button{ bottom: -20em;}
.start_wrap .step.on{ right: 0; left: 0;}
.start_wrap .step.on .modle_foot_button{ bottom: 0;}
.start_wrap .step.on.off{ right: 100% !important; left: -100% !important;}
.start_wrap .step.on.off .modle_foot_button{ bottom: -20rem !important;}

.start_wrap .step.step_03{ padding: 1.5rem 1.5rem calc(1rem + 4rem + 0.5rem + 4rem + 1rem + 4.5rem + 1rem) 1.5rem;}
.start_wrap .step.step_06{ padding: 1.5rem 1.5rem 6rem 1.5rem;}
.start_wrap .step.step_07{ padding: 1.5rem 1.5rem 10rem 1.5rem;}

.start_wrap .back_btn{ display: none; justify-content: center; align-items: center; position: fixed; z-index: 100; top: 1.5rem; left: 1.5rem; height: 3rem; cursor: pointer;}
.start_wrap .back_btn svg{ width: auto; height: 1.2rem;}
.start_wrap .back_btn svg path{ fill: #000;}
.start_wrap .back_btn p{ margin-left: 0.4rem; font-size: 1.4rem; font-weight: 500; color: #000; letter-spacing: 0;}
.start_wrap .step.on .back_btn{ display: flex;}
.start_wrap .step.on.off .back_btn{ display: none;}

.start_wrap .logo{ position: fixed; z-index: 100; top: calc(50% - 3rem); right: 50%; height: 4rem; transform: translate(50%,-50%); transition: all .5s;}
.start_wrap .logo img{ display: block; width: auto; height: 100%; transition: all 1s;}
.start_wrap .logo.in img{ transform: scale(2); opacity: 0;}
.start_wrap .logo.out{ top: 2.4rem; right: 1.5rem; height: 1.2rem; transform: translate(0,0);}

.start_wrap .logo2{ position: fixed; z-index: 100; top: calc(50% - 7.5rem); right: 50%; height: 12rem; transform: translate(50%,-50%); transition: all .5s;}
.start_wrap .logo2 img{ display: block; width: auto; height: 100%; transition: all 1s;}

.start_wrap .emoji{ overflow: hidden; display: flex; justify-content: center; align-items: center; position: fixed; top: calc(50% - 5rem); left: calc(50% - 5rem); width: 10rem; height: 10rem; border-radius: 50%; box-shadow: 0 2px 10px 0 rgba(0 0 0/5%); transition: all .5s;}
.start_wrap .emoji video{ width: 180%; height: 180%; transition: all .5s;}
.start_wrap .emoji .img{ display: block; position: relative; z-index: 10; height: 100%; animation: emoji 3s infinite;}
.start_wrap .emoji .bg{ display: none; position: absolute; width: 300%; animation: emoji_bg 2s infinite;}
.start_wrap .emoji.out{ top: calc(100% - 13rem); left: calc(50% - 3rem); width: 6rem; height: 6rem;}
.start_wrap .emoji.off{ top: 150% !important;}
.start_wrap .emoji.s6{ top: calc(50% - 3.25rem); transform: rotate(0deg);}
.start_wrap .emoji.s7{ top: calc(100% - 16rem); transform: rotate(0deg);}
@keyframes emoji{
    0%   { transform: translate(0,0) scale(1); opacity: 1;}
    50%  { transform: translate(0,-1rem) scale(1.01); opacity: 1;}
    100% { transform: translate(0,0) scale(1); opacity: 1;}
}
@keyframes emoji_bg{
    0%   { transform: translate(0,0) scale(1); opacity: 1;}
    50%  { transform: translate(0,0) scale(1.2); opacity: 1;}
    100% { transform: translate(0,0) scale(1); opacity: 1;}
}

.start_wrap .comment{ position: absolute; z-index: 10; bottom: calc(50% + 7rem); padding: 1.2rem 1.5rem; max-width: 90%; border-radius: 2rem; background: #FFF; box-shadow: 0 5px 15px 0 rgba(0 0 0/15%);}
.start_wrap .comment .txt{ overflow: hidden; text-align: center; line-height: 1.5; font-size: 1.2rem; color: #000;}
.start_wrap .comment .txt b{ font-weight: 700; color: #fd80c3;}
.start_wrap .comment .txt div{ color: #000;}
.start_wrap .comment .down{ overflow: hidden; position: absolute; bottom: -8px; left: calc(50% - 10px); width: 20px; height: 8px;}
.start_wrap .comment .down:after{ content: ""; display: block; position: absolute; bottom: 3px; left: calc(50% - 5px); width: 10px; height: 10px; background: #FFF; transform: rotate(45deg);}

.start_wrap .start{ display: grid; grid-gap: 2rem; position: relative; z-index: 90; width: 100%;}
.start_wrap .start .head{ display: grid; grid-gap: 1rem; text-align: center;}
.start_wrap .start .head .t1{ line-height: 1.2; font-size: 1.4rem; font-weight: 700; color: #000;}
.start_wrap .start .head .t1 b{ font-weight: 700; background: -webkit-linear-gradient(0deg, #fd80c3, rgba(0 0 0/100%)); -webkit-background-clip: text; color: transparent;}
.start_wrap .start .head .t2{ line-height: 1.2; font-size: 1.1rem; color: #000;}
.start_wrap .start .body{}
.start_wrap .start .body .in{ display: grid; grid-gap: 1rem;}
.start_wrap .start .body .in .wrap{}
.start_wrap .start .body .in .wrap .menu{ display: flex; grid-gap: 0.5rem;}
.start_wrap .start .body .in .wrap .menu a{ display: flex; justify-content: center; align-items: center; width: 50%; height: 3.5rem; border-radius: 2rem; border: 1px solid #FFF; background: #FFF; box-shadow: 0 2px 10px 0 rgba(0 0 0/5%); font-size: 1.1rem; color: #000; cursor: pointer; transition: all .2s;}
.start_wrap .start .body .in .wrap .menu a.on{ border: 1px solid #000;}
.start_wrap .start .body .in .wrap .menu.auto{ flex-wrap: wrap; justify-content: center;}
.start_wrap .start .body .in .wrap .menu.auto a.auto{ padding: 0 1.5rem; width: auto;}
.start_wrap .start .body .in .wrap .select{ position: relative;}
.start_wrap .start .body .in .wrap .select .head{ display: flex; justify-content: space-between; align-items: center; padding: 0 1.5rem; width: 100%; height: 3.5rem; border-radius: 2rem; border: 1px solid #FFF; background: #FFF; box-shadow: 0 2px 10px 0 rgba(0 0 0/5%); transition: all .2s;}
.start_wrap .start .body .in .wrap .select .head p{ font-size: 1.1rem; color: #000;}
.start_wrap .start .body .in .wrap .select .head svg{ width: 1.2rem; height: 1.2rem;}
.start_wrap .start .body .in .wrap .select .body{}
.start_wrap .start .body .in .wrap .select .body .wrapper{ overflow: auto; position: absolute; z-index: 10; top: 3rem; right: 0; left: 0; height: 0; border-radius: 1.5rem; background: #000; opacity: 0; transition: all .2s;}
.start_wrap .start .body .in .wrap .select .body .wrapper a{ display: flex; align-items: center; margin-top: -1px; padding: 0 1.5rem; height: 3rem; border-bottom: 1px solid rgba(255 255 255/20%); font-size: 1.1rem; color: #FFF; transition: all .2s;}
.start_wrap .start .body .in .wrap .select .body .wrapper a:hover{ background: rgba(255 255 255/15%);}
.start_wrap .start .body .in .wrap .select .body .wrapper2{ overflow: auto; position: absolute; z-index: 10; top: 3rem; right: 0; left: 0; height: 0; border-radius: 1.5rem; background: #000; opacity: 0; transition: all .2s;}
.start_wrap .start .body .in .wrap .select .body .wrapper2 a{ display: flex; align-items: center; margin-top: -1px; padding: 0 1.5rem; height: 3rem; border-bottom: 1px solid rgba(255 255 255/20%); font-size: 1.1rem; color: #FFF; transition: all .2s;}
.start_wrap .start .body .in .wrap .select .body .wrapper2 a:hover{ background: rgba(255 255 255/15%);}
.start_wrap .start .body .in .wrap .select .body .close{ display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0;}

.start_wrap .start .body .in .wrap .select.on .body .wrapper{ height: 14rem; opacity: 1;}
.start_wrap .start .body .in .wrap .select.on .body .wrapper2{ height: 9rem; opacity: 1;}
.start_wrap .start .body .in .wrap .select.on .body .close{ display: block;}

.start_wrap .start .body .in .wrap select{ display: flex; align-items: center; margin: 0; padding: 0 3.5rem 0 1.5rem; width: 100%; height: 3.5rem; border-radius: 2rem; border: 0; background: url(/images/icon_down_black.svg) no-repeat center right 1.2rem #FFF; background-size: 1rem auto; font-size: 1.1rem; font-weight: 400; color: #000; outline: none; -webkit-appearance: none; transition: all .2s;}
.start_wrap .start .body .in .wrap select:focus{ box-shadow: 0 0 30px 0 rgba(253 128 195/100%);}

.start_wrap .start .body .emotion{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; grid-gap: 1rem;}
.start_wrap .start .body .emotion a{ display: flex; justify-content: center; align-items: center; padding: 0 2rem; height: 3.5rem; border-radius: 2rem; border: 1px solid #FFF; background: #FFF; box-shadow: 0 2px 10px 0 rgba(0 0 0/5%); font-size: 1.1rem; color: #000; cursor: pointer; transition: all .2s;}
.start_wrap .start .body .emotion a.on{ border: 1px solid #000; color: #000;}

.start_wrap .start .body .color{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; grid-gap: 1rem;}
.start_wrap .start .body .color .li{ overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; width: 7rem; height: 7rem; border-radius: 2rem; cursor: pointer; transition: all .2s;}
.start_wrap .start .body .color .li a{ display: block; position: absolute; width: 12rem; height: 12rem; background-blend-mode: screen; animation: color_animate 8s linear infinite; background-size: 100% 100%;}
.start_wrap .start .body .color .li.on{ border: 1px solid #000;}

.start_wrap .start.skin{ padding: 2rem; border-radius: 2rem; background: #FFF; box-shadow: 0 5px 15px 0 rgba(0 0 0/15%);}
.start_wrap .start.skin:after{ content: ""; display: block; position: absolute; bottom: -5px; left: calc(50% - 5px); width: 10px; height: 10px; background: #FFF; transform: rotate(45deg);}
.start_wrap .start.skin .body .in .wrap .menu a{ border: 1px solid #ddd; background: #fafafa; box-shadow: none;}
.start_wrap .start.skin .body .in .wrap .menu a.on{ border-color: #000; background: #FFF;}
.start_wrap .start.skin .body .in .wrap .select .head{ border: 1px solid #ddd; background: #fafafa; box-shadow: none;}


.circle-container{ position: relative; margin: 0 auto; width: 26rem; height: 26rem;}
.circle-lines{ position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; transform: scale(1); pointer-events: none; overflow: visible;}
.circle-item{ overflow: hidden; display: flex; justify-content: center; align-items: center; position: absolute; z-index: 3; width: 6rem; height: 6rem; background: #FFF; border-radius: 50%; box-shadow: 0 2px 10px 0 rgba(0 0 0 / 5%); font-size: 1.2rem; color: #000;}
.circle-item a.step1_choice{ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; color: #000; transition: all 0.3s;}
.circle-item a.step1_choice.circle-active{ background-color: #000; color: #FFF; font-weight: 700;}

.IroSlider{ width: 26rem !important; height: 8rem !important; border-radius: 2rem;}

/*@keyframes color_animate{*/
/*    0%   { transform: rotate(0deg); }*/
/*    100% { transform: rotate(360deg); }*/
/*}*/



.palette-joy{ background: linear-gradient(135deg, #ffefb0, #ffe066);}
.palette-love{ background: linear-gradient(135deg, #ffbdd0, #ff99bb);}
.palette-calm{ background: linear-gradient(135deg, #dbe8f5, #b3d4f5);}
.palette-anger{ background: linear-gradient(135deg, #e5afaa, #d98b82);}
.palette-creative{ background: linear-gradient(135deg, #d1b4de, #bc9dd9);}

.start_wrap .start .body .pattern{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; grid-gap: 1rem;}
.start_wrap .start .body .pattern a{ display: flex; justify-content: center; align-items: center; width: 7rem; height: 7rem; border-radius: 2rem; border: 1px solid rgba(255 255 255/0%); cursor: pointer; transition: all .2s;}
.start_wrap .start .body .pattern a img{ display: block; max-width: 100%; max-height: 100%;}
.start_wrap .start .body .pattern a.on{ border: 1px solid #000;}

.start_wrap .start .body .form{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; grid-gap: 1rem;}
.start_wrap .start .body .form a{ overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; width: 7rem; height: 7rem; border-radius: 2rem; cursor: pointer; transition: all .2s;}
.start_wrap .start .body .form a img{ display: block; width: 100%;}
.start_wrap .start .body .form a.on{}
.start_wrap .start .body .form a.on:before{ content: ""; display: block; position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; left: 0; border-radius: 2rem; border: 1px solid #000; transition: all .2s;}

.start_wrap .start .body .card_select{}
.start_wrap .start .body .card_select .ft{ text-align: center; font-size: 1.2rem; color: #000;}
.start_wrap .start .body .card_select .fb{ text-align: center; font-size: 1.2rem; color: #000;}
.start_wrap .start .body .card_select .rolling{ margin: 1rem auto; width: 14rem;}
.start_wrap .start .body .card_select .rolling .swiper-slide{ width: auto;}
.start_wrap .start .body .card_select .rolling .swiper-slide a{ display: flex; justify-content: center; align-items: center; width: 14rem; height: 10rem; border-radius: 2rem; border: 1px solid #000; background: #FFF; text-align: center; line-height: 1.2; font-size: 1.4rem; font-weight: 700; color: #000; transition: all .2s;}
.start_wrap .start .body .card_select .rolling .swiper-slide.swiper-slide-active a{ background: #000; color: #FFF;}
.start_wrap .start .body .card_select .select{ position: relative; margin: 1rem auto;}
.start_wrap .start .body .card_select .select:after{ content: ""; display: block; position: absolute; z-index: 10; top: 0; right: 0; width: 6rem; height: 6rem; background: url(/images/icon_down_black.svg) no-repeat center right 1.2rem; background-size: 1rem auto;}
.start_wrap .start .body .card_select .select select{ display: flex; align-items: center; position: relative; padding: 0 2rem; width: 100%; height: 6rem; border-radius: 2rem; border: 0; background: linear-gradient(90deg, rgba(255 255 255/100%), rgba(253 128 195/100%)); text-align: center; font-size: 1.5rem; font-weight: 400; color: #000; outline: none; -webkit-appearance: none; transition: all .2s;}
.start_wrap .start .body .card_select .select select:focus{ background: linear-gradient(90deg, rgba(255 255 255/100%), rgba(253 128 195/100%)); box-shadow: 0 0 30px 0 rgba(253 128 195/100%);}
.start_wrap .start .body .card_select .select select option{ margin: 0; padding: 0; border-radius: 0 0 2rem 2rem; text-align: center;}

.start_wrap .card_select_bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.start_wrap .card_select_bg .color{ overflow: hidden; width: 10rem; height: 10rem; border-radius: 50%;}
.start_wrap .card_select_bg .pattern{ overflow: hidden; display: flex; justify-content: center; align-items: center; width: 10rem; height: 10rem; border-radius: 50%;}
.start_wrap .card_select_bg .pattern img{ display: block; max-width: 70%; max-height: 70%;}
.start_wrap .card_select_bg .form{ overflow: hidden; width: 10rem; height: 10rem; border-radius: 50%;}
.start_wrap .card_select_bg .form img{ display: block; width: 100%;}
.start_wrap .card_select_bg .wrap{ position: absolute; font-size: 2rem; color: #000;}
.start_wrap .card_select_bg .wrap:nth-child(1){ top: 10vh; left: 70vw; filter: blur(10px); opacity: 0.5;}
.start_wrap .card_select_bg .wrap:nth-child(2){ top: 80vh; left: 60vw; filter: blur(4px); opacity: 0.3;}
.start_wrap .card_select_bg .wrap:nth-child(3){ top: 65vh; left: 20vw; filter: blur(10px); opacity: 0.4;}
.start_wrap .card_select_bg .wrap:nth-child(4){ top: 30vh; left: 20vw; filter: blur(5px); opacity: 0.4;}
.start_wrap .card_select_bg .wrap:nth-child(5){ top: 70vh; left: 50vw; filter: blur(10px); opacity: 0.2;}
.start_wrap .card_select_bg .wrap:nth-child(6){ top: 45vh; left: 15vw; filter: blur(10px); opacity: 0.3;}
.start_wrap .card_select_bg .wrap:nth-child(7){ top: 60vh; left: 70vw; filter: blur(10px); opacity: 0.2;}
.start_wrap .card_select_bg .wrap:nth-child(8){ top: 10vh; left: 8vw; filter: blur(10px); opacity: 0.2;}
.start_wrap .card_select_bg .wrap:nth-child(9){ top: 15vh; left: 45vw; filter: blur(8px); opacity: 0.15;}


.start_wrap .start .body .incense{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; grid-gap: 1rem;}
.start_wrap .start .body .incense a{ overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; width: 7rem; height: 7rem; border-radius: 2rem; border: 1px solid #FFF; background: #FFF; box-shadow: 0 2px 10px 0 rgba(0 0 0/5%); font-size: 1.2rem; color: #000; cursor: pointer; transition: all .2s;}
.start_wrap .start .body .incense a.on{ border: 1px solid #000;}

.start_wrap .start .body .original{}
.start_wrap .start .body .original .list{ display: grid; grid-template-columns: repeat(4,1fr); grid-gap: 0.7rem;}
.start_wrap .start .body .original .list a{ overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; height: 3.7rem; text-align:center; letter-spacing:0; border-radius: 2rem; border: 1px solid #FFF; background: #FFF; box-shadow: 0 2px 10px 0 rgba(0 0 0/5%); font-size: 0.8rem; color: #000; cursor: pointer; transition: all .2s;}
.start_wrap .start .body .original .list a.on{ border: 1px solid #000;}
.start_wrap .start .body .original .btn{ display: flex; justify-content: center; align-items: center; grid-gap: 1rem; margin-top: 3rem; cursor: pointer;}
.start_wrap .start .body .original .btn p{ font-size: 1.2rem; color: #000;}
.start_wrap .start .body .original .btn svg{ width: 1.6rem; height: 1.6rem;}
.start_wrap .start .body .original .btn svg path{ fill: #000;}

.start_wrap .melody{ overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; grid-gap: 3rem; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 1.5rem; padding-bottom: 7.5rem;}
.start_wrap .melody svg{ height: 8rem; transition: all 10s;}
.start_wrap .melody svg path{ fill: #000;}

.start_wrap .melody .top{ display: grid; grid-gap: 2rem; position: relative;}
.start_wrap .melody .select{}
.start_wrap .melody .select .tit{ display: flex; align-items: center; position: absolute; z-index: 10; bottom: 0; left: 50%; transform: translate(-50%,0) scale(0); opacity: 0; padding: 0 1rem; height: 3rem; border-radius: 5rem; background: #000; font-size: 1.4rem; color: #FFF; white-space: nowrap; transition: all .3s;}
.start_wrap .melody .select .color{ position: absolute; z-index: 10; bottom: 0; left: 50%; transform: translate(-50%,0) scale(0); opacity: 0; width: 5rem; height: 5rem; border-radius: 50%; background: #8acc7d; transition: all .3s;}
.start_wrap .melody .select .pattern{ position: absolute; z-index: 10; bottom: 0; left: 50%; transform: translate(-50%,0) scale(0); opacity: 0; height: 6rem; transition: all .3s;}
.start_wrap .melody .select .pattern img{ display: block; width: auto; height: 100%;}

.start_wrap .melody .select.g1 .tit{ bottom: 60%; transform: translate(-220%,0) scale(1); opacity: 1; transition: all 1.5s;}
.start_wrap .melody .select.g1 .color{ bottom: 40%; transform: translate(120%,0) scale(1); opacity: 1; transition: all 1.2s;}
.start_wrap .melody .select.g1 .pattern{ bottom: 90%; transform: translate(60%,0) scale(1); opacity: 1; transition: all 1.8s;}

.start_wrap .melody .select.g2 .tit{ bottom: 50%; transform: translate(-50%,0) scale(0); opacity: 0; transition: all 1.1s;}
.start_wrap .melody .select.g2 .color{ bottom: 50%; transform: translate(-50%,0) scale(0); opacity: 0; transition: all 1.6s;}
.start_wrap .melody .select.g2 .pattern{ bottom: 50%; transform: translate(-50%,0) scale(0); opacity: 0; transition: all 1.2s;}

.start_wrap .melody .gb{ width: 6rem;}
.start_wrap .melody .gb img{ display: block; width: 100%;}

.start_wrap .melody .ct{ overflow: hidden; display: flex; justify-content: center; align-items: center; width: 6rem; height: 6rem; border-radius: 50%;}
.start_wrap .melody .ct video{ width: 180%; height: 180%;}

.start_wrap .melody .text{ text-align: center; line-height: 1.5; font-size: 1.2rem; color: #000;}
.start_wrap .melody .text b{ font-weight: 700; background: -webkit-linear-gradient(0deg, rgba(253 128 195/100%), #000); -webkit-background-clip: text; color: transparent;}
.start_wrap .melody .btn{ overflow: hidden; display: block; height: 0;}
.start_wrap .melody .line{ width: 100%; height: 1rem; border-radius: 1rem; border: 1px solid #000;}
.start_wrap .melody .line span{ display: block; width: 0; height: 100%; border-radius: 1rem; background: #000; transition: all 5s;}
.start_wrap .melody .line.on span{ width: 100%;}
.step_12.on .melody svg{ transform: scale(1.6) translate(0,-3rem);}
@media(min-width: 768px){
    .start_wrap .logo.out{ right: 1.5rem;}
    .start_wrap .emoji.out{}
    .start_wrap .emoji.off{ top: 160%;}
}


.receipt_wrap{ overflow: auto; position: fixed; top: 0; right: 0; bottom: 0; left: 0; padding: 3rem 1.5rem 11rem 1.5rem;}
.receipt_wrap .logo{ display: block; position: relative; z-index: 50; margin: 0 auto; width: 5rem; height: 5rem;}
.receipt_wrap .title{ position: relative; z-index: 50; margin-top: 0.5rem; text-align: center; font-size: 1.4rem; font-weight: 700; background: -webkit-linear-gradient(0deg, rgba(253 128 195/100%), #000); -webkit-background-clip: text; color: transparent;}
.receipt_wrap .select{ position: relative; margin-top: 2rem; padding: 2rem 0; border-radius: 2rem; background: #333;}
.receipt_wrap .select:before{ content: ""; display: block; position: absolute; z-index: 20; top: 0; right: 0; bottom: 0; left: 0; border-radius: 2rem; animation: receipt_wrap_shadow 5s infinite;}
@keyframes receipt_wrap_shadow{
    0%   { box-shadow: inset 0 0 1px 0 rgba(253 128 195/50%);}
    50% { box-shadow: inset 0 0 50px 0 rgba(253 128 195/100%);}
    100% { box-shadow: inset 0 0 1 0 rgba(253 128 195/50%);}
}
.receipt_wrap .select .tit{ text-align: center; font-size: 1.4rem; font-weight: 700; color: #FFF;}
.receipt_wrap .select .list{ margin-top: 2rem;}
.receipt_wrap .select .list .rolling{ overflow: hidden; position: relative;}
.receipt_wrap .select .list .rolling:before{ content: ""; display: block; position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, rgba(51 51 51/100%), rgba(51 51 51/0%), rgba(51 51 51/0%), rgba(51 51 51/100%));}
.receipt_wrap .select .list .rolling .swiper-wrapper{ transition-timing-function: linear !important;}
.receipt_wrap .select .list .rolling .swiper-slide{ width: auto;}
.receipt_wrap .select .list .wrap{ overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; width: 8rem; height: 8rem; border-radius: 1rem; border: 1px solid #000; background: #FFF;}
.receipt_wrap .select .list .wrap:after{ content: ""; display: block; padding-top: 100%;}
.receipt_wrap .select .list .wrap.color{ border: 0;}
.receipt_wrap .select .list .wrap.pattern img{ display: block; position: absolute; max-width: 70%; max-height: 70%;}
.receipt_wrap .select .list .wrap.form img{ display: block; position: absolute; width: 100%;}
.receipt_wrap .select .list .wrap p{ padding: 0 1rem; text-align: center; line-height: 1.2; font-size: 1.1rem; color: #000;}

.receipt_wrap .select_box{ overflow: hidden; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; position: relative; height: 30vh;}
.receipt_wrap .select_box:before{ content: ""; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(245 245 245/100%), rgba(245 245 245/0%), rgba(245 245 245/0%));}
.receipt_wrap .select_box .i{ overflow: hidden; display: flex; justify-content: center; align-items: center; position: absolute; width: 100px; height: 100px; border-radius: 30px; animation: anim 4s ease-in-out infinite; transform: translateY(-120%) rotate(0deg);}
.receipt_wrap .select_box .i img{ display: block; width: 100%; height: auto;}
.receipt_wrap .select_box .i p{ padding: 0; text-align: center; line-height: 1.2; font-size: 1.1rem; font-weight: 500; color: #000;}
.receipt_wrap .select_box .n1{ animation-delay: 0.1s;}
.receipt_wrap .select_box .n2{ animation-delay: 1.2s;}
.receipt_wrap .select_box .n3{ animation-delay: 2s;}
.receipt_wrap .select_box .n4{ animation-delay: 1.4s;}
.receipt_wrap .select_box .n5{ animation-delay: 2.4s;}
.receipt_wrap .select_box .n6{ animation-delay: 0.6s;}
@keyframes anim{
    0%  { transform:  translateY(-120%) rotate(0deg);}
    100%{ transform: translateY(120vh) rotate(-360deg);}
}


.receipt_wrap .top_select{ margin-top: 1rem;}
.receipt_wrap .top_select .tit{ position: relative; z-index: 50; text-align: center; line-height: 1.4; font-size: 1.4rem; font-weight: 700; color: #000;}
.receipt_wrap .top_select .gb{ margin: 2rem auto 0 auto; width: 6rem; padding-bottom:20px;}
.receipt_wrap .top_select .gb img{ display: block; width: 100%;}

.receipt_wrap .top_select .box{ display: flex; justify-content: center; align-items: flex-end; position: relative; margin: 0 auto 0 auto; width: 50vw; border-radius: 50%;}
.receipt_wrap .top_select .box:after{ content: ""; display: block; padding-top: 100%; width: 100%; border-radius: 50%; background: #FFF; filter: blur(10px);}
.receipt_wrap .top_select .box .bg{ display: block; position: absolute; top: 0; left: 0; width: 100%; height: auto; animation: receipt_wrap_box_bg 5s infinite;}
@keyframes receipt_wrap_box_bg{
    0%   { transform: scale(1); opacity: 0;}
    50%  { transform: scale(1.2); opacity: 0.3;}
    100% { transform: scale(1); opacity: 0;}
}

.receipt_wrap .top_select .list{ position: absolute; z-index: 30; top: 0; right: 0; bottom: 0; left: 0;}
.receipt_wrap .top_select .list .wrap{ overflow: hidden; padding: 0.4rem 0.3rem; border-radius: 2rem; background: #FFF; box-shadow: 0 3px 10px 0 rgba(0 0 0/10%);}
.receipt_wrap .top_select .list .wrap.color{ width: 6rem; height: 6rem; border-radius: 50%; padding: 0; background: none; box-shadow: none;}
.receipt_wrap .top_select .list .wrap.pattern{ width: 16rem; height: 16rem padding: 0; background: none; box-shadow: none;;}
.receipt_wrap .top_select .list .wrap.pattern img{ display: block; width: 100%;}
.receipt_wrap .top_select .list .wrap.form{}
.receipt_wrap .top_select .list .wrap.form img{ display: block; width: 100%;}
.receipt_wrap .top_select .list .wrap p{ padding: 0 1rem; max-width: 11rem; text-align: center; line-height: 1.2; font-size: 1rem; color: #000;}

.receipt_wrap .top_select .list .wrap:nth-child(1){ animation: top_select_01 5s infinite; position: absolute; top: 8rem; left: -1rem; transform: scale(1);}
.receipt_wrap .top_select .list .wrap:nth-child(2){ animation: top_select_02 4.4s infinite; position: absolute; z-index: 29; top: 7rem; right: 0rem; transform: scale(0.5);}
.receipt_wrap .top_select .list .wrap:nth-child(3){ animation: top_select_03 6.1s infinite; position: absolute; z-index: 30; top: 2rem; right: calc(50% - 8rem); transform: scale(0.5);}
.receipt_wrap .top_select .list .wrap:nth-child(4){ animation: top_select_04 4.8s infinite; position: absolute; top: 2.5rem; left: -2rem; transform: scale(0.4);}
.receipt_wrap .top_select .list .wrap:nth-child(5){ animation: top_select_05 4s infinite; position: absolute; top: 3.5rem; right: -2rem; transform: scale(0.7);}
.receipt_wrap .top_select .list .wrap:nth-child(6){ animation: top_select_06 5.5s infinite; position: absolute; z-index: 31; top: 11rem; right: 2rem; transform: scale(0.8);}
.receipt_wrap .top_select .list .wrap:nth-child(7){ animation: top_select_07 6s infinite; position: absolute; top: 3rem; left: 5rem; transform: scale(0.6);}
.receipt_wrap .top_select .list .wrap:nth-child(8){ animation: top_select_08 2.8s infinite; position: absolute; top: 0.5rem; left: 2rem; transform: scale(0.5);}
@keyframes top_select_01{
    0%   { transform: translate(0,0) scale(1); opacity: 1;}
    50%  { transform: translate(-1rem,-1rem) scale(1); opacity: 1;}
    100% { transform: translate(0,0) scale(1); opacity: 1;}
}
@keyframes top_select_02{
    0%   { transform: translate(0,0) scale(0.3); opacity: 1;}
    50%  { transform: translate(0,-0.5rem) scale(0.4); opacity: 1;}
    100% { transform: translate(0,0) scale(0.3); opacity: 1;}
}
@keyframes top_select_03{
    0%   { transform: translate(0,0) scale(0.5); opacity: 1;}
    50%  { transform: translate(0,-0.3rem) scale(0.5); opacity: 1;}
    100% { transform: translate(0,0) scale(0.5); opacity: 1;}
}
@keyframes top_select_04{
    0%   { transform: translate(0,0) scale(0.4); opacity: 1;}
    50%  { transform: translate(0,-1rem) scale(0.4); opacity: 1;}
    100% { transform: translate(0,0) scale(0.4); opacity: 1;}
}
@keyframes top_select_05{
    0%   { transform: translate(0,0) scale(0.7); opacity: 1;}
    50%  { transform: translate(0.5rem,-0.5rem) scale(0.7); opacity: 1;}
    100% { transform: translate(0,0) scale(0.7); opacity: 1;}
}
@keyframes top_select_06{
    0%   { transform: translate(0,0) scale(0.8); opacity: 1;}
    50%  { transform: translate(0,1rem) scale(0.9); opacity: 1;}
    100% { transform: translate(0,0) scale(0.8); opacity: 1;}
}
@keyframes top_select_07{
    0%   { transform: translate(0,0) scale(0.6); opacity: 1;}
    50%  { transform: translate(0,-1rem) scale(0.6); opacity: 1;}
    100% { transform: translate(0,0) scale(0.6); opacity: 1;}
}
@keyframes top_select_08{
    0%   { transform: translate(0,0) scale(0.5); opacity: 1;}
    50%  { transform: translate(0,-1rem) scale(0.5); opacity: 1;}
    100% { transform: translate(0,0) scale(0.5); opacity: 1;}
}
.receipt_wrap .top_select .img{ display: flex; flex-direction: column; align-items: center; grid-gap: 0.5rem; position: absolute; z-index: 20; bottom: -4rem;}
.receipt_wrap .top_select .img img{ display: block;}
.receipt_wrap .top_select .img img:nth-child(1){ display: none; width: auto; height: 3rem; animation: top_select_img 5s infinite;}
.receipt_wrap .top_select .img img:nth-child(2){ display: none; width: auto; height: 6rem;}
@keyframes top_select_img{
    0%   { transform: translate(0,0) scale(1); opacity: 1;}
    80%  { transform: translate(0,-1rem) scale(1.2); opacity: 0;}
    100% { transform: translate(0,0) scale(1); opacity: 1;}
}





.receipt_wrap .name{ position: relative; z-index: 10; margin-top: 1rem;}
.receipt_wrap .name .tit{ text-align: center; font-size: 1.4rem; font-weight: 700; background: -webkit-linear-gradient(0deg, rgba(253 128 195/100%), #000); -webkit-background-clip: text; color: transparent;}
.receipt_wrap .name input{ display: flex; align-items: center; margin: 2rem 0 0 0; padding: 0 1.5rem; width: 100%; height: 3.5rem; border-radius: 2rem; border: 1px solid #FFF; background: #FFF; box-shadow: 0 2px 10px 0 rgba(0 0 0/5%); text-align: center; font-size: 1.1rem; font-weight: 400; color: #000; outline: none; -webkit-appearance: none; transition: all .2s;}
.receipt_wrap .name input:focus{ border: 1px solid #000;}
.receipt_wrap .name .txt{ margin-top: 2rem; text-align: center;}
.receipt_wrap .name .txt .t1{ line-height: 1.4; font-size: 1.2rem; color: #000;}
.receipt_wrap .name .txt .t2{ display: grid; grid-gap: 0.5rem; margin-top: 1rem;}
.receipt_wrap .name .txt .t2 p{ display: flex; justify-content: center; align-items: center; line-height: 1.4; font-size: 1rem; color: #000;}
.receipt_wrap .name .txt .t2 p span{ position: relative; padding-right: 0.4rem; font-weight: 500; color: #000;}
.receipt_wrap .name .txt .t2 p span:after{ content: ""; display: block; position: absolute; z-index: -1; top: calc(50% - 5px); left: -5px; right: 0; height: 10px; background: rgba(253 128 195/50%); filter: blur(2px);}
@media(min-width: 768px){
}


.end_wrap{ display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; padding: 3rem 1.5rem 10rem 1.5rem;}
.end_wrap .logo{ display: block; margin: 0 auto; width: 5rem; height: 5rem;}
.end_wrap .text{ margin-top: 3rem; text-align: center; line-height: 1.5; font-size: 1.2rem; font-weight: 500; color: #000;}
.end_wrap .line{ margin-top: 3rem; width: 100%; height: 1rem; border-radius: 1rem; border: 1px solid #000;}
/*
오리지널 향수 , 나만의향 로딩 초가 달라져야 한다는 요구사항에 의해 주석처리 하고 밑에 새로 만듭니다.
.end_wrap .line span{ display: block; width: 0; height: 100%; border-radius: 1rem; background: #000; transition: all 8s;}
.end_wrap .line.on span{ width: 100%; animation: end_wrap 8s;}
*/
.end_wrap .line span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 1rem;
    background: #000;
    transition: none;
}

@media(min-width: 768px){
}


.survey_wrap{ padding: 3rem 1.5rem 10rem 1.5rem;}
.survey_wrap .logo{ display: block; margin: 0 auto; width: 5rem; height: 5rem;}
.survey_wrap .list{ display: grid; grid-gap: 1rem; margin-top: 3rem;}
.survey_wrap .list .wrap{ display: grid; grid-gap: 1rem; padding: 2rem; border-radius: 2rem; background: #FFF; box-shadow: 0 2px 10px 0 rgba(0 0 0/5%);}
.survey_wrap .list .wrap .tit{ font-size: 1.4rem; line-height: 1.2; font-weight: 700; color: #000;}
.survey_wrap .list .wrap .ex{ font-size: 0.9rem; color: #666;}
.survey_wrap .list .wrap .check{ display: grid; grid-gap: 1rem;}
.survey_wrap .list .wrap .check label{ display: flex; align-items: center; grid-gap: 0.5rem; cursor: pointer;}
.survey_wrap .list .wrap .check label i{ display: flex; justify-content: center; align-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid #000; background: #FFF; font-size: 1rem; color: #000;}
.survey_wrap .list .wrap .check label p{ font-size: 1.2rem; color: #000;}
.survey_wrap .list .wrap .check label.on i{ background: #000; color: #FFF;}
.survey_wrap .list .wrap .check label.on p{}

.survey_wrap .list .wrap .check_new{ display: flex; justify-content: space-between; align-items: center; grid-gap: 1rem;}
.survey_wrap .list .wrap .check_new p{ font-size: 1.2rem; color: #000;}
.survey_wrap .list .wrap .check_new .center{ flex: 1; display: flex; justify-content: space-between; grid-gap: 0.4rem;}
.survey_wrap .list .wrap .check_new label{ display: flex; align-items: center; grid-gap: 0.5rem; cursor: pointer;}
.survey_wrap .list .wrap .check_new label i{ display: flex; justify-content: center; align-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid #000; background: #FFF; font-size: 1rem; color: #000;}
.survey_wrap .list .wrap .check_new label:nth-child(1) i{ border-color: #59b30a; color: #59b30a;}
.survey_wrap .list .wrap .check_new label:nth-child(2) i{ border-color: #5fad0a; color: #5fad0a; width: 1.6rem; height: 1.6rem; font-size: 0.8rem;}
.survey_wrap .list .wrap .check_new label:nth-child(3) i{ border-color: #799108; color: #799108; width: 1.4rem; height: 1.5rem; font-size: 0.6rem;}
.survey_wrap .list .wrap .check_new label:nth-child(4) i{ border-color: #799108; color: #799108; width: 1.4rem; height: 1.4rem; font-size: 0.6rem;}
.survey_wrap .list .wrap .check_new label:nth-child(5) i{ border-color: #828707; color: #828707; width: 1.4rem; height: 1.5rem; font-size: 0.6rem;}
.survey_wrap .list .wrap .check_new label:nth-child(6) i{ border-color: #9c6b06; color: #9c6b06; width: 1.6rem; height: 1.6rem; font-size: 0.8rem;}
.survey_wrap .list .wrap .check_new label:nth-child(7) i{ border-color: #b64f04; color: #b64f04;}
.survey_wrap .list .wrap .check_new label.on i{ border-color: #000; background: #000; color: #FFF;}

.survey_wrap .list .wrap textarea{ display: flex; align-items: center; margin: 0; padding: 1rem 1.5rem; width: 100%; height: 6rem; resize: none; border-radius: 1rem; border: 1px solid #000; background: #FFF; line-height: 1.5; font-size: 1.1rem; font-weight: 400; color: #000; outline: none; -webkit-appearance: none;}
.survey_wrap .list .wrap textarea::placeholder{ color: #000;}
.survey_wrap .list .wrap .star{ display: flex; align-items: center; grid-gap: 1rem;}
.survey_wrap .list .wrap .star .icon{ display: flex; grid-gap: 0.5rem;}
.survey_wrap .list .wrap .star .icon i{ font-size: 2rem; color: #000; cursor: pointer;}
.survey_wrap .list .wrap .star .icon i.on{ color: #ffb032;}
.survey_wrap .list .wrap .star p{ font-size: 1.6rem; font-weight: 700; color: #ffb032;}
@media(min-width: 768px){
}







.popup_original{ overflow: hidden; display: flex; justify-content: center; align-items: center; position: fixed; z-index: 300; top: -200%; right: 0; bottom: 200%; left: 0; padding: 0 2.15rem; background: rgba(0 0 0/70%); opacity: 0; transition: opacity .3s;}
.popup_original .close{ display: flex; justify-content: center; align-items: center; position: absolute; top: 1rem; right: 1rem; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #FFF; cursor: pointer;}
.popup_original .close i{ font-size: 1.4rem; color: #000;}
.popup_original .contents{ transform: scale(0); opacity: 0; transition: all .5s;}
.popup_original .contents .rolling{}
.popup_original .contents .rolling .swiper-wrapper{}
.popup_original .contents .rolling .swiper-wrapper .swiper-slide{ width: auto;}
.popup_original .contents .rolling .swiper-wrapper .swiper-slide .wrap{ position: relative; width: 22rem; height: 30rem; transition: all .5s;}
.popup_original .contents .rolling .swiper-wrapper .swiper-slide .wrap .card{ position: absolute; top: 0; left: 0; width: 22rem; height: 30rem; border-radius: 1rem; background: #FFF; transition: all .5s;}
.popup_original .contents .rolling .swiper-wrapper .swiper-slide .wrap .card_01{ z-index: 2; transform-style: preserve-3d;}
.popup_original .contents .rolling .swiper-wrapper .swiper-slide .wrap .card_02{ z-index: 1; transform-style: preserve-3d; transform: rotateY(180deg);}
.popup_original .contents .rolling .swiper-wrapper .swiper-slide .wrap:hover .card_01{ z-index: 1; transform: rotateY(180deg);}
.popup_original .contents .rolling .swiper-wrapper .swiper-slide .wrap:hover .card_02{ z-index: 2; transform: rotateY(0deg);}

.popup_original .contents .rolling .swiper-wrapper .swiper-slide .wrap .img{}
.popup_original .contents .rolling .swiper-wrapper .swiper-slide .wrap .img img{ display: block; width: 100%; border-radius: 1rem 1rem 0 0;}
.popup_original .contents .rolling .swiper-wrapper .swiper-slide .wrap .text{ padding: 1.5rem 1rem; border-radius: 0 0 1rem 1rem; background: #FFF; text-align: left;}
.popup_original .contents .rolling .swiper-wrapper .swiper-slide .wrap .text .t1{ font-size: 1.4rem; font-weight: 700; color: #000;}
.popup_original .contents .rolling .swiper-wrapper .swiper-slide .wrap .text .t2{ margin-top: 0.5rem; line-height: 1.2; font-size: 1.1rem; color: #000;}
.popup_original .contents .rolling .swiper-wrapper .swiper-slide .wrap .text .t3{ position: relative; margin-top: 1.5rem; line-height: 1.6; letter-spacing:0.05rem; font-size: 0.9rem;}
/*.popup_original .contents .rolling .swiper-wrapper .swiper-slide .wrap .text .t3:before{ content: ""; display: block; position: absolute; top: -0.7rem; left: calc(50% - 1rem); width: 2rem; height: 1px; background: #000;}*/
.popup_original.on{ top: 0; bottom: 0; opacity: 1;}
.popup_original.on .contents{ transform: scale(1); opacity: 1;}
@media(min-width: 768px){
    .popup_original .close{ right: 1.5rem;}
}


.popup_receipt{ overflow: hidden; display: flex; justify-content: center; align-items: center; position: fixed; z-index: 300; top: -200%; right: 0; bottom: 200%; left: 0; padding: 0 2.15rem; background: rgba(0 0 0/70%); opacity: 0; transition: opacity .3s;}
.popup_receipt .close{ display: flex; justify-content: center; align-items: center; position: absolute; top: 1rem; right: 1rem; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #FFF; cursor: pointer;}
.popup_receipt .close i{ font-size: 1.4rem; color: #000;}
.popup_receipt .contents{ width: 26rem; transform: scale(0); opacity: 0; transition: all .5s;}
.popup_receipt .contents .box{ margin-top: -1px; padding: 2rem; border-radius: 2rem; border: 1px dashed #000; background: #FFF;}
.popup_receipt .contents .box .title{ margin-bottom: 1rem; text-align: center; line-height: 1.2; font-size: 1.4rem; font-weight: 700; color: #000;}
.popup_receipt .contents .box .list{ display: grid; grid-gap: 0.5rem;}
.popup_receipt .contents .box .list .wrap{ display: flex; justify-content: space-between; align-items: center;}
.popup_receipt .contents .box .list .wrap .tit{ font-size: 1.2rem; font-weight: 700; color: #000; letter-spacing: 0;}
.popup_receipt .contents .box .list .wrap .fl{ padding: 0 0 0 0.5rem; font-size: 1.1rem; color: #000; letter-spacing: 0;}
.popup_receipt .contents .box .list .wrap .fr{ font-size: 1.1rem; font-weight: 400; color: #000; letter-spacing: 0;}
.popup_receipt .contents .box .list .wrap .fr b{ font-weight: 700;}
.popup_receipt .contents .box .txt{ margin-top: 1rem; text-align: center; font-size: 1.2rem; color: #666;}
.popup_receipt .contents .box .btn{ display: flex; justify-content: center; align-items: center; grid-gap: 2rem; margin-top: 2rem; width: 100%; height: 3.5rem; border-radius: 2rem; background: #000; cursor: pointer;}
.popup_receipt .contents .box .btn p{ font-size: 1.2rem; font-weight: 600; color: #FFF;}
.popup_receipt .contents .box .btn svg{ width: 1.2rem; height: 1.2rem;}
.popup_receipt .contents .box .btn svg path{ fill: #FFF;}
.popup_receipt.on{ top: 0; bottom: 0; opacity: 1;}
.popup_receipt.on .contents{ transform: scale(1); opacity: 1;}
@media(min-width: 768px){
    .popup_receipt .close{ right: 1.5rem;}
}


.popup_end{ overflow: hidden; display: flex; justify-content: center; align-items: center; position: fixed; z-index: 300; top: -200%; right: 0; bottom: 200%; left: 0; padding: 0 2.15rem; background: rgba(0 0 0/70%); opacity: 0; transition: opacity .3s;}
.popup_end .close{ display: flex; justify-content: center; align-items: center; position: absolute; top: 1rem; right: 1rem; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #FFF; cursor: pointer;}
.popup_end .close i{ font-size: 1.4rem; color: #000;}
.popup_end .contents{ display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 3rem 2rem; width: 26rem; border-radius: 2rem; background: #FFF; transform: scale(0); opacity: 0; transition: all .5s;}
.popup_end .contents .icon{ display: flex; justify-content: center; align-items: center; margin: 0 auto; width: 8rem; height: 8rem; border-radius: 50%; background: #000;}
.popup_end .contents .icon svg{ width: 4rem; height: 4rem;}
.popup_end .contents .icon svg path{ fill: #FFF;}
.popup_end .contents .tit{ margin-top: 2rem; text-align: center; line-height: 1.4; font-size: 1.2rem; font-weight: 700; color: #000;}
.popup_end .contents .txt{ margin-top: 1rem; text-align: center; font-size: 0.9rem; color: #666;}
.popup_end .contents .btn{ display: flex; justify-content: center; align-items: center; grid-gap: 2rem; margin-top: 3rem; width: 100%; height: 3.5rem; border-radius: 2rem; background: #000; cursor: pointer;}
.popup_end .contents .btn p{ font-size: 1.2rem; font-weight: 600; color: #FFF;}
.popup_end .contents .btn svg{ width: 1.2rem; height: 1.2rem;}
.popup_end .contents .btn svg path{ fill: #FFF;}
.popup_end.on{ top: 0; bottom: 0; opacity: 1;}
.popup_end.on .contents{ transform: scale(1); opacity: 1;}
@media(min-width: 768px){
    .popup_end .close{ right: calc(50% - 320px + 1.5rem);}
}




.new_incense{ margin-top: 0.5rem;}
.new_incense .head{ display: grid; grid-gap: 1rem; text-align: center;}
.new_incense .head .t1{ line-height: 1.2; font-size: 1.4rem; font-weight: 700; color: #000;}
.new_incense .head .t1 b{ font-weight: 700; background: -webkit-linear-gradient(0deg, #fd80c3, rgba(0 0 0/100%)); -webkit-background-clip: text; color: transparent;}
.new_incense .head .t2{ line-height: 1.2; font-size: 1.1rem; color: #000;}
.new_incense .list{ display: flex; flex-wrap: wrap; justify-content: center; grid-gap: 1rem; margin: 2rem auto 0 auto; max-width: 840px;}
.new_incense .list .wrap{ width: 12rem; border-radius: 0.8rem; background: #FFF; box-shadow: 0 2px 10px 0 rgba(0 0 0/5%); transition: all .2s; cursor: pointer;}
.new_incense .list .wrap .ft{ padding: 1rem 0 0 0; text-align: center;}
.new_incense .list .wrap .ft .t1{ font-size: 1.4rem; font-weight: 700; color: #000; letter-spacing: 0;}
.new_incense .list .wrap .ft .t2{ margin-top: 0.5rem; font-size: 0.9rem; color: #666;}
.new_incense .list .wrap .fm{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 6.5rem;}
.new_incense .list .wrap .fm p{ line-height: 1.4; font-size: 1rem; color: #000;}
.new_incense .list .wrap .fb{ display: flex; justify-content: space-around; margin: 0 0.5rem; padding: 0.5rem; border-top: 1px solid #e5e5e5;}
.new_incense .list .wrap .fb p{ font-size: 0.8rem; color: #999;}
@media(min-width: 768px){
    .new_incense .list .wrap:hover{ box-shadow: 0 4px 20px 0 rgba(0 0 0/10%);}
}


.new_incense_popup{ overflow: hidden; display: flex; justify-content: center; align-items: center; position: fixed; z-index: 300; top: -200%; right: 0; bottom: 200%; left: 0; padding: 0 2.15rem; background: rgba(0 0 0/70%); opacity: 0; transition: opacity .3s;}
.new_incense_popup .close{ display: flex; justify-content: center; align-items: center; position: absolute; top: 1rem; right: 1rem; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #FFF; cursor: pointer;}
.new_incense_popup .close i{ font-size: 1.4rem; color: #000;}
.new_incense_popup .contents{ padding: 1rem; width: 22rem; border-radius: 1rem; background: #FFF; transform: scale(0); opacity: 0; transition: all .5s;}
.new_incense_popup .contents .img{}
.new_incense_popup .contents .img img{ display: block; width: 100%; border-radius: 0.5rem;}
.new_incense_popup .contents .text{ padding: 1rem 0 0 0; background: #FFF; text-align: center;}
.new_incense_popup .contents .text .t1{ font-size: 1.4rem; font-weight: 700; color: #000;}
.new_incense_popup .contents .text .t2{ margin-top: 0.5rem; line-height: 1.2; font-size: 1.1rem; color: #000;}
.new_incense_popup .contents .text .t3{ position: relative; margin-top: 1.5rem; line-height: 1.5; font-size: 0.9rem;}
.new_incense_popup .contents .text .t3:before{ content: ""; display: block; position: absolute; top: -0.7rem; left: calc(50% - 1rem); width: 2rem; height: 1px; background: #000;}
.new_incense_popup.on{ top: 0; bottom: 0; opacity: 1;}
.new_incense_popup.on .contents{ transform: scale(1); opacity: 1;}
@media(min-width: 768px){
    .new_incense_popup .close{ right: 1.5rem;}
}









.container{ overflow: hidden;}
@media(min-width: 768px){
    html{ font-size: initial;}
    body:after{ content: ""; position: fixed; right: 0; bottom: 0; width: 200vw; height: 200vh;}
    body.index:after{}
    .container{ position: relative; z-index: 10; margin: 0 auto; width: 640px; min-height: 100vh;}
    .modle_foot_button{ right: 0; left: 0; width: auto;}
    .modle_foot_button .button{ margin: 0 auto; width: calc(640px - 2rem);}
    .modle_pc{ right: 0 !important; left: 0 !important; width: auto !important;}

    .start_wrap .start .body{ margin: 0 auto; width: calc(640px - 3rem);}
    .start_wrap .start .body .emotion{ margin: 0 auto; width: calc(640px - 3rem);}
    .start_wrap .start .body .color{ margin: 0 auto; width: calc(640px - 3rem);}
    .start_wrap .start .body .color .li{ width: 10rem; height: 10rem;}
    .start_wrap .start .body .color .li a{ width: 16rem; height: 16rem;}

    .start_wrap .start .body .pattern{ margin: 0 auto; width: calc(640px - 3rem);}
    .start_wrap .start .body .pattern a{ width: 10rem; height: 10rem;}

    .start_wrap .start .body .form{ margin: 0 auto; width: calc(640px - 3rem);}
    .start_wrap .start .body .form a{ width: 10rem; height: 10rem;}

    .start_wrap .start .body .incense{ margin: 0 auto; width: calc(640px - 3rem);}
    .start_wrap .start .body .incense a{ width: 10rem; height: 10rem;}

    .start_wrap .melody .line{ margin: 0 auto; width: calc(640px - 3rem);}

    .receipt_wrap .title{ margin: 0;}
    .receipt_wrap .select{ margin: 2rem auto 0 auto; width: calc(640px - 3rem);}
    .receipt_wrap .select_box{ margin: 2rem auto 0 auto; width: calc(640px - 3rem);}
    .receipt_wrap .top_select{ margin-top: 0.4rem;}
    .receipt_wrap .top_select .box{ margin-top: -1rem; margin-bottom: 0; width: 16rem; transform: scale(1.2);}
    .receipt_wrap .name{ margin: 1rem auto 0 auto; width: calc(640px - 3rem);}
    .receipt_wrap .name input{ margin-top: 1.2rem; letter-spacing:0.3px;}
    .receipt_wrap .name .txt{ margin-top: 1.2rem;}

    .end_wrap .line{ margin: 3rem auto 0 auto; width: calc(640px - 3rem);}

    .index_login .in{ margin: 0 auto; width: calc(640px - 6rem);}
    .index_login .btn_login{ margin: 0 auto; width: calc(640px - 6rem);}


.hex-code{
     border: 0px solid #000;   
    text-align: center;
    font-weight: 700;   
    letter-spacing: 0px;
    background: #fff;
    width: 200px;
    margin: 20px auto;
    padding: 15px 0;
    border-radius: 340px;
    box-shadow: 0 2px 10px 0 rgba(0 0 0 / 5%);
}


}


/* --- [수정됨] 원형 박스 레이아웃 CSS --- */

/* 그리드 컨테이너 */
.receipt_wrap .name .txt .answer_grid {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-gap: 1.5rem; /* 박스 사이 간격 넓힘 */
    margin-top: 2rem;
    width: 100%;
    
}

/* 개별 박스 공통 디자인 (원형) */
.receipt_wrap .name .txt .answer_grid .answer_item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 7rem; /* 너비 고정 */
    height: 7rem; /* 높이 고정 (정원형) */
    border-radius: 50%; /* 원형 만들기 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    position: relative; /* 라벨 위치 잡기 위해 */
    overflow: hidden; /* 이미지 넘침 방지 */
    background: #fff; /* 기본 배경 */
}

/* 라벨 (감정, 색상, 도형) - 박스 위에 표시 */
.receipt_wrap .name .txt .answer_grid .answer_item .label {
    position: absolute;
    top: -1.8rem; /* 박스 위로 올림 */
    font-size: 0.9rem;
    color: #666;
    font-weight: 500;
    width: 100%;
    text-align: center;
}

/* --- 박스별 개별 스타일 --- */

/* 1. 감정 박스 (검은 배경, 흰 글씨) */
.receipt_wrap .name .txt .answer_grid .answer_item.emotion {
    background: #000;
    border: none;
}
.receipt_wrap .name .txt .answer_grid .answer_item.emotion .value {
    font-size: 1.2rem;
    color: #fff; /* 흰색 텍스트 */
    font-weight: 700;
    text-align: center;
    word-break: keep-all;
    line-height: 1.2;
}

/* 2. 색상 박스 (배경색만 표시) */
.receipt_wrap .name .txt .answer_grid .answer_item.color {
    border: none;
    /* 배경색은 HTML 태그 내 style 속성으로 동적 적용 */
}

/* 3. 도형 박스 (이미지 표시) */
.receipt_wrap .name .txt .answer_grid .answer_item.shape {
    border: none;
    padding: 0; /* 패딩 제거 */
}
.receipt_wrap .name .txt .answer_grid .answer_item.shape img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 박스에 꽉 차게 이미지 비율 유지 */
    border-radius: 50%;
}
/* 향수 이름 Input 전용 스타일 */
.name #perfume_name {
    display: block;
    width: 50%;            /* 부모 너비에 맞게 가득 채움 */
    height: 4rem;           /* 기존보다 살짝 키워 강조 */
    margin: 0 auto 2.5rem auto; /* 중앙 정렬 및 아래 박스와 간격(2.5rem) 추가 */
    padding: 0 1.5rem;
    
    border-radius: 2rem;
    border: 1px solid #e5e5e5; /* 은은한 테두리 */
    background: #fff;
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.05); /* 기존보다 부드러운 그림자 */
    
    text-align: center;
    font-size: 1.2rem;      /* 글자 크기 살짝 키움 */
    font-weight: 700;       /* 결과값이므로 굵게 처리 */
    color: #000;
    
    outline: none;
    -webkit-appearance: none;
    cursor: default;        /* readonly 상태이므로 커서 모양 변경 */
}

/* 반응형 (모바일에서 박스 크기 조정) */
@media(max-width: 360px) {
    .receipt_wrap .name .txt .answer_grid {
        grid-gap: 1rem;
    }
    .receipt_wrap .name .txt .answer_grid .answer_item {
        width: 5.5rem;
        height: 5.5rem;
    }
    .receipt_wrap .name .txt .answer_grid .answer_item .label {
        font-size: 0.8rem;
        top: -1.5rem;
    }
    .receipt_wrap .name .txt .answer_grid .answer_item.emotion .value {
        font-size: 1rem;
    }
}

/* 모바일 대응 (필요시) */
@media(max-width: 768px) {
    .name #perfume_name {
        font-size: 1.1rem;
        height: 3.5rem;
        margin-bottom: 2rem;
    }
}