@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');

@font-face {
    font-family:'ONEMobile';
    src: url('/landing/mycost/fonts/ONEMobilePOPRegular.woff') format('woff');
    font-weight: 900;
}

@font-face {
    font-family:'Paperlogy';
    src: url('/landing/mycost/fonts/Paperlogy-3Light.woff') format('woff');
    font-weight: 300;
}

@font-face {
    font-family:'Paperlogy';
    src: url('/landing/mycost/fonts/Paperlogy-4Regular.woff') format('woff');
    font-weight: 400;
}

@font-face {
    font-family:'Paperlogy';
    src: url('/landing/mycost/fonts/Paperlogy-5Medium.woff') format('woff');
    font-weight: 500;
}

@font-face {
    font-family:'Paperlogy';
    src: url('/landing/mycost/fonts/Paperlogy-6SemiBold.woff') format('woff');
    font-weight: 600;
}

@font-face {
    font-family:'Paperlogy';
    src: url('/landing/mycost/fonts/Paperlogy-7Bold.woff') format('woff');
    font-weight: 700;
}

* {margin:0;padding:0;box-sizing:border-box;}
html,body {height:100%;}
body {margin:0px;padding:0px;font-family:'Noto Sans KR','Nanum Gothic','나눔 고딕','Malgun Gothic','맑은 고딕','Open Sans',sans-serif;color:#000;}
div, dl, dt, dd, ul, li, span, strong, em, input, form {margin:0px;padding:0px;}
ul, dl, dd, dt, li {list-style-type:none;margin:0;padding:0px;}
img {border:0;vertical-align:top;}

a {display:block;text-decoration:none;padding:0px;margin:0px;}
a:link, a:visited {text-decoration:none;}
a:hover, a:focus, a:active {text-decoration:none;}
a:focus, img:focus {outline:none;}

.blind {position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);clip:rect(1px 1px 1px 1px);}

::-webkit-input-placeholder {color:#inherit;font-weight:#inherit;opacity:1;}
:-moz-placeholder {color:#inherit;font-weight:#inherit;opacity:1;}
::-moz-placeholder {color:#inherit;font-weight:#inherit;opacity:1;}
:-ms-input-placeholder {color:#inherit;font-weight:#inherit;opacity:1;}
::placeholder {color:#inherit;font-weight:#inherit;opacity:1;}

input[type="text"], input[type="tel"] {width:100%;height:100%;background:transparent;border:0;outline:0;}
input[type="number"] {width:100%;height:100%;background:transparent;border:0;outline:0;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance:none;margin:0;}

select {-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;}
select::-ms-expand {display:none;}

.pc_view{display:block;}
.m_view{display:none;}


footer{width:100%;background:#232323;position:fixed;left:50%;bottom:0;transform:translateX(-50%);color:#fff;font-family:'Paperlogy';padding:12px 0;}
footer .inner{display:flex;justify-content:center;}
footer .inner .ftTit{font-size:17px;font-weight:600;margin-right:20px;letter-spacing:0.01em;}
footer .inner .info{font-size:15px;font-weight:300;line-height:23px;letter-spacing:-0.01em;}
footer .inner .info ul{display:flex;}
footer .inner .info ul li:after{width:1px;height:11px;background:#bcbcbc;display:inline-block;margin:0 17.5px;content:'';}
footer .inner .info ul li:last-child:after{display:none;}


#wrap{max-width:1920px;width:100%;height:100%;/*padding:4.6vw 0;*/margin:0 auto;background:#ffaaca url('../images/bg_full.jpg')no-repeat center/ cover;}
#wrap .cont{height:calc(100% - 69px);display:flex;align-items:center;justify-content:center;}

.content{max-width:562px;width:100%;margin:0 auto;}
.contTitle{font-family:'ONEMobile';letter-spacing:-0.03em;line-height:1.3;color:#000;}
.emoji{font-family: "Apple Color Emoji", "Noto Color Emoji", sans-serif; !important;}

.btnBox a{width:218px;display:flex;align-items:center;justify-content:center;background:#dadada;font-weight:500;color:#000;border-radius:24.5px;font-size:23px;letter-spacing:-0.03em;padding:5px 0 7.5px;}
.btnBox a.btnStepPrev:before{width:10px;height:18px;display:inline-block;margin:2px 10px 0 0;content:'';background:url('../images/arrow_prev.png')}

.intro{text-align:center;}
.intro .top .contTitle{font-size:54px;line-height:1.25;}
.intro .top .contTitle strong{position:relative;color:#fd2e6d;font-size:76px;padding:0 8px 3px;border-radius:15px;background:#fff;}
.intro .top .contTitle strong:before{width:56px;height:50px;background:url('../images/intro_ico.png')no-repeat;position:absolute;left:10px;top:-62px;content:'';}
.intro .top .basicText{font-size:26px;font-weight:500;letter-spacing:-0.01em;margin:11px 0 75px;font-family:'Paperlogy';}
.intro .top .basicText span{font-size:28px;}
.intro .top .basicText strong{color:#1c4383;text-decoration:underline;text-underline-offset:4px;}
.intro .imgBox img.pc_view{display:inline;}
.intro .btnNext{width:100%;background:#fd2e6d;color:#fff;border-radius:30.5px;font-family:'Paperlogy';font-size:27px;padding:13px 0 14px;text-align:center;display:block;cursor:pointer;}
.intro .btnNext strong{color:#fffa75;}
.intro .btnNext span{vertical-align:3px;}
.intro .btnNext #start_step{position:absolute;left:-999999em;opacity:0;}

.content .progress{text-align:right;color:#fff;margin-bottom:12px;}
.content .progress .bar{height:20px;border:2px solid #fff;position:relative;}
.content .progress .bar:before{width:25%;height:100%;background:#ff5796;position:absolute;left:0;top:0;content:'';}
.content .progress .bar.bar02:before{width:50%;}
.content .progress .bar.bar03:before{width:75%;}
.content .progress .bar.bar04:before{width:100%;}
.content .progress .num{font-size:22px;color:#fff;padding-right:10px;letter-spacing:-0.02em;display:flex;align-items: center;justify-content: flex-end;}
.content > .top{margin-bottom:14px;text-align:center;}
.content > .top .contTitle{font-size:40px;}
.content > .top .basicText{font-size:15px;letter-spacing:-0.03em;}
.content form{height:100%;display:flex;flex-direction:column;justify-content:space-between;}
.content .box{width:100%;height:578px;background:#fff;border-radius:35px;padding:50px 36px;}
.content .box.none{background:transparent;}
.content .box ul{padding:0 50px;}
.content .box ul li{width:100%;}
.content .box ul li label{display:block;border:2px solid #a9a9a9;font-size:26px;letter-spacing:-0.02em;font-family:'ONEMobile';border-radius:15px;text-align:center;cursor:pointer;padding:18px 5px;line-height:1.14}
.content .box ul li input{position:absolute;left:-999999em;opacity:0;}
.content .box ul li input:checked + label{color:#fff;background:#ff5796;border-color:#ff5796;}
.content .box ul li label:hover{color:#fff;background:#ff5796;border-color:#ff5796;} 
.content .box ul li + li{margin-top:20px;}

.content.step01 .box form{justify-content:center;}
.content.step02 .box ul li label{padding:16px 5px;}
.content.step03 .box ul li label{padding:17px 5px;}
.content.step02 .box ul li + li{margin-top:15px;}
.content.step03 .box ul li + li{margin-top:30px;}
.content.step04 .box ul li + li{margin-top:30px;}

.content.step05 .box{height:497px;}
.content.step05 .speechBubble{font-size:20px;font-weight:500;letter-spacing:-0.03em;padding:2.5px 55px;background:#fff;display:inline-block;border-radius:17px;margin-bottom:26px;position:relative;}
.content.step05 .speechBubble:after{width:0;height:0;display:inline-block;position:absolute;left:50%;bottom:-12px;content:"";transform:translateX(-50%);border-top:12px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent;}
.content.step05 .speechBubble span{color:#ff146c;}
.content.step05 .length{font-size:88px;letter-spacing:-0.03em;color:#ff146c;line-height:1;font-family:'Abril Fatface';filter:drop-shadow(0 0 21px rgba(255, 230, 239, 0.22));}
.content.step05 dl{text-align:center;}
.content.step05 dl dt img{width:190px;}
.content.step05 dl dd{margin-top:2px;font-size:30px;letter-spacing:-0.07em;}

.content.step06 .top .text{font-size:25px;font-family:'ONEMobile';margin-top:13px;}
.content.step06 .top .text span{color:#ff2577}
.content.step06 .top .cost{height:193px;display:flex;align-items:center;justify-content:center;background:url('../images/cost_bg.jpg')no-repeat center top;color:#fff;font-size:18px;letter-spacing:-0.04em;margin:38px 0 15px;}
.content.step06 .top .cost strong{color:#fff660}
.content.step06 .top .addText{font-size:16px;color:#3a3a3a;letter-spacing:-0.03em;}
.content.step06 .box{height:auto;margin-top:46px;}
.content.step06 .box form dl dt{font-size:20px;font-family:'ONEMobile';padding-left:10px;margin-bottom:9px;}
.content.step06 .box form dl dt span{color:#ff2577;}
.content.step06 .box form dl dd input{width:100%;height:47px;background:#fff;border-radius:15px;box-shadow:4px 4px rgba(204,135,187,.7);border:0;padding:0 18px;font-family:'Noto Sans KR';font-size:19px;letter-spacing:-0.05em;}
.content.step06 .box form dl dd input:placeholder{opacity:.5;}
.content.step06 .box form dl + dl{margin-top:20px;}
.content.step06 .box{padding:0 71px;}
.content.step06 .box form .privacyBox{display:flex;justify-content:space-between;font-size:15px;letter-spacing:-0.03em;margin-top:11px;}
.content.step06 .box form .privacyBox > div{position:relative;}
.content.step06 .box form .privacyBox > div span{color:#ff2577;padding-top:5px;margin-left:5px;}
.content.step06 .box form .privacyBox > div input{display: none;}

.content.step06 .box form .privacyBox > div input + label{cursor:pointer;display:flex;align-items:center;}
.content.step06 .box form .privacyBox > div input + label:before{width:21px;height:21px;border-radius:7px;display:inline-block;content:'';background:#fff;margin-right:7px;}
.content.step06 .box form .privacyBox > div input:checked + label:after{content:'✔';width: 21px;height: 21px;text-align: center;position:absolute;left:0;top:2px;}

.content.step06 .box form .privacyBox p{flex-shrink:0;display:flex;}
.content.step06 .box form .privacyBox p span{color:#ff2577;margin-right:4px;}
.content.step06 .box form .privacyBox p a{color:#928b90;text-decoration:underline;text-underline-offset:2px;}
.content.step06 .box form input[type="submit"]{font-size:20px;font-family:'ONEMobile';color:#fff;background:#ff5796;border:0;padding:13px 0 12px;border-radius:15px;margin-top:50px;cursor:pointer;}
.content.step06 .box form #btn_save_test {font-size:20px;font-family:'ONEMobile';color:#fff;background:#ff5796;border:0;padding:13px 0 12px;border-radius:15px;margin-top:25px;cursor:pointer;}
.content.step06 .step06BtnList{display:flex;margin-top:30px;}
.content.step06 .step06BtnList li{width:24%;}
.content.step06 .step06BtnList li:nth-child(n+2){margin-left:1.33333%;}
.content.step06 .step06BtnList li img{width:100%;}

.content.step07 .top{margin-bottom:19px;}
.content.step07 .top .text{font-size:25px;font-family:'ONEMobile';line-height:1.2;margin:12px 0 5px;}
.content.step07 .top span{color:#ff2577;}
.content.step07 .box{padding:0;height:auto;}
.content.step07 .shareBox{text-align:center;margin-top:45px;padding-bottom:10px;}
.content.step07 .shareBox img{width:50px;}
.content.step07 h3{font-size:25px;font-family:'ONEMobile';line-height:1.2;margin-bottom:11px;}
.content.step07 h3 span{color:#ff2577}

@media all and (min-width:1279px){
/*#wrap{background-size:1920px auto;}*/
}

@media all and (max-width:1279px){
/*footer{position:relative;transform:none;left:auto;}*/

#wrap{margin:0;}
}

@media (min-width:861px) and (orientation: portrait){
/*#wrap{height:calc(100vh - 69px);display:flex;align-items:center;justify-content:center;}*/
footer{position:fixed;transform:translateX(-50%);}
}
@media all and (max-width:860px){
#wrap{background-image:url('../images/bg_full_m.jpg');}

.pc_view{display:none;}
.m_view{display:block;}

footer{position:static;transform:none;height:auto;padding:4.186vw 12.558vw 4.302vw;}
footer .inner{display:block;}
footer .inner .ftTit{font-size:2.67442vw;}
footer .inner .info{font-size:2.32558vw;line-height:1.5;margin-top:10px;}
footer .inner .info ul{flex-wrap:wrap;}
footer .inner .info ul li:first-child{width:100%;}
footer .inner .info ul li:first-child:after{display:none;}
footer .inner .info ul li:after{height:1.977vw;margin:0 1.628vw;}

#wrap{height:auto;padding:19.070vw 0;background-image:;}
.content{max-width:100%;padding:0 6.512vw;}

.btnBox a{width:33.721vw;height:7.675vw;font-size:3.60465vw;padding:0;border-radius:2.55814vw;}
.btnBox a.btnStepPrev:before{width:1.512vw;height:2.791vw;background-image:url('../images/arrow_prev_m.png');margin:0.233vw 1.395vw 0 0;background-size:1.512vw auto;}

.intro .top .contTitle{font-size:8.37209vw;}
.intro .top .contTitle strong{font-size:11.7442vw;border-radius:1.75vw;padding:0 0.93vw 0.349vw;}
.intro .top .contTitle strong:before{width:8.488vw;height:7.674vw;background-image:url('../images/intro_ico_m.png');left:1.163vw;top:-9.884vw;background-size:8.488vw auto;}
.intro .top .basicText{font-size:3.95349vw;margin:1.163vw 0 11.628vw;}
.intro .top .basicText span{font-size:4.53488vw;}
.intro .imgBox img.pc_view{display:none;}
.intro .imgBox img.m_view{display:inline;width:45.581vw;}

.intro .btnNext{font-size:4.18605vw;padding:2.093vw 0;border-radius:41px;}
.intro .btnNext span{vertical-align:0.465116vw;}

.content .progress{margin:12px 0 17px;}
.content .progress .bar{height:3.14vw;border-width:0.3vw;}
.content .progress .num{font-size:3.37209vw;padding-right:1.163vw;}
.content .progress .num span{font-size:2.67442vw;}

.content > .top{margin-bottom:18px;}
.content > .top .contTitle{font-size:6.16279vw;}
.content > .top .basicText{font-size:2.32558vw;margin-top:-0.465vw;}

.content .box{height:89.304vw;padding:8.023vw 5.581vw;border-radius:4.06977vw;}
.content .box ul{padding:0 7.907vw;}
.content .box ul li + li{margin-top:3.140vw;}
.content .box ul li label{font-size:4.06977vw;padding:2.849vw 5px;border-radius:1.74419vw;}

.content.step02 .box ul li + li{margin-top:2.442vw;}
.content.step02 .box ul li label{padding:2.442vw 0.581vw;}

.content.step03 .box ul li + li{margin-top:4.651vw;}
.content.step03 .box ul li label{padding:2.733vw 5px;}

.content.step04 .box ul li + li{margin-top:4.651vw;}
.content.step04 .box ul li label{padding:2.907vw 5px;}

.content.step05 .box{height:auto;padding:7.558vw 4.186vw 32.215vw;}
.content.step05 .speechBubble{font-size:3.13954vw;margin:1.395vw 0 3.953vw;padding:0.291vw 8.372vw;position:relative;z-index:1;}
.content.step05 .speechBubble:after{bottom:calc(-1.86vw + 1px);content:"";border-top:1.86vw solid #fff;border-right:1.512vw solid transparent;border-left:1.512vw solid transparent;z-index:-1;}
.content.step05 .length{font-size:13.6046vw;}
.content.step05 dl dt img{width:29.07vw;}
.content.step05 dl dd{font-size:4.65116vw;}

.content.step06{margin-top:0.93vw;}
.content.step06 .box{padding:0 11.047vw;margin-top:7.093vw;}
.content.step06 .top .text{font-size:3.83721vw;margin-top:1.977vw;}
.content.step06 .top .cost{height:auto;padding:12.791vw 0;font-size:2.7907vw;background-image:url('../images/cost_bg_m.jpg');margin:5.814vw 0 2.442vw;background-size:cover;}
.content.step06 .top .addText{font-size:2.4418565vw;}
.content.step06 .box form dl dt{font-size:3.13954vw;padding-left:1.744vw;margin-bottom:1.047vw;}
.content.step06 .box form dl dd input{height:auto;font-size:2.90698vw;padding:1.57vw 2.674vw;border-radius:1.744191vw;}
.content.step06 .box form dl + dl{margin-top:2.907vw;}
.content.step06 .box form .privacyBox{font-size:2.32558vw;}
.content.step06 .box form .privacyBox > div span{padding-top:0.814vw;}
.content.step06 .box form .privacyBox > div input + label:before{width:3.256vw;height:3.256vw;border-radius:0.8vw;margin-right:1.047vw;}
.content.step06 .box form .privacyBox > div input:checked + label:after{width:3.256vw;height:3.256vw;}
.content.step06 .box form input[type="submit"]{font-size:3.02325vw;padding:1.977vw 0;margin-top:7.558vw;border-radius:1.744191vw;}

.content.step07 .top{margin-bottom:3.023vw;}
.content.step07 .top .text{font-size:3.83721vw;margin:1.977vw 0 0.581vw;}
.content.step07 .imgBox img{max-width:100%;}
.content.step07 h3{font-size:3.83721vw;}
.content.step07 .shareBox{margin-top:6.395vw;padding-bottom:1.163vw;}
.content.step07 .shareBox img{max-width:67px;width:7.792vw;}

}
@media all and (max-width:501px){
.content .progress .num{margin-top:1.163vw;}
.btnBox a span{margin-top:3px;}

}