@charset "utf-8";
/*
Copyright (c) 2021, Igini. All rights reserved.
version: 1.0.0
*/
@import url('https://cdn.rawgit.com/innks/NanumSquareRound/master/nanumsquareround.min.css');
/*font-family: 'NanumSquareRound',sans-serif;*/
html {
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
}
.noto{font-family: 'Noto Sans KR', sans-serif;}
.top_nav{position: relative;max-width: 450px;width: 100%;margin: 0 auto;}
.top_nav .btn_back{position: absolute;top: -14px;left: 10px;display: block;width: 45px;height: 45px;background: url(../../images/ui/btn_back.png) no-repeat 50% 50% / 25px auto;overflow: hidden;text-indent: -9999px;}

#calc{position: relative;width: 100%;min-height: 100%;}
#contents{width: 100%;min-height: 100%;background-color: #fff;overflow: hidden}
#contents.alert{background-color: #fff;}
#contents.calc{background-color: #ffdcf5;}
/*#contents.result{background-color: #ffdcf5;}*/
#contents.result{height: auto;}
.wrap{position: relative;display: -ms-flexbox;display: -webkit-flex;display: flex;width: 100%;min-height: 100%;justify-content: center;}
.calc .wrap{height: 100%;align-items: center;align-content: center;-ms-flex-pack: center;}
.container{display: inline-block;width: 100%;max-width: 720px;}
.intro #test{display: none}


#contents.intro{background:#9a56c7 url(../../images/calc/img/main_bg.png) no-repeat 48% 20px }
#contents.intro .wrap{align-items: flex-start;}
#contents.intro .container{max-width: 450px;/*margin: 0 auto;*/}
.intropage{display: none;padding-top: 50px;padding-bottom: 35px;text-align: center;}
.intro .intropage{position: relative;display: block;z-index: 10}
.intropage .main{width: 100%}
.btn_solid{display: flex;width: 100%;height: 94px;margin: 45px auto 45px;background-color: #fddb44;border-radius: 94px;align-items: center;justify-content: center;}
#contents.intro .intropage .btn_solid,
#contents.alert .intropage .btn_solid{height: 80px;}
.sns_wrap{width: 195px;display: flex;margin: 0 auto;justify-content: space-between;}
.sns_wrap a{display: block;width: 87px;height: 87px;border-radius: 87px;text-indent: -9999px;overflow: hidden}
.sns_wrap .katalk{background:#f7d502 url(../../images/calc/sns/katalk.png) no-repeat 50% 50%;}
.sns_wrap .url{background:#919191 url(../../images/calc/sns/link.png) no-repeat 50% 50%;;}
.intropage .logo{margin-top: 33px;}
.alertpage{display: none}
.alert .alertpage{display: block}
.alertpage .main{padding:10vw 0;text-align:center; }
@media (max-width: 720px) {
#contents.intro{background-size: 102% auto;background-position:48% 8.5vw ;padding: 0 5vw;}
#contents.alert{padding: 0 5vw;}
.intro .intropage{padding-top: 13vw;}  
.btn_solid{width: 100%;height: 13vw;margin: 30px auto 30px;border-radius: 6.5vw;line-height: 13vw;}
#contents.intro .intropage .btn_solid,
#contents.alert .intropage .btn_solid{height: 13vw;}
.btn_solid img{height: 4.5vw;}
.sns_wrap{width: 100px;}
.sns_wrap a{width: 44px;height: 44px;}
.sns_wrap .katalk{background-size: auto 23px}
.sns_wrap .url{background-size: 20px auto}
.intropage .logo{margin-top: 30px;}
.intropage .logo img{width: 37px}
.alertpage .main{padding: 37.5vw 0 31.5vw}


}



.intro #test,
.alert #test,
.calc #test,
.result #test{display: none}
#calcing,
#result{display: none;}
.calc #calcing,
.result #result{display: block;}
#test{width: 100%;}
#test .paging_wrap{width: 100%;padding: 60px 0 40px;background-color: #fff;text-align: center;z-index: 10}
#test .paging_wrap .paging{display: flex;width: 100%;max-width: 720px;margin: 0 auto;padding: 0 40px;justify-content: space-between;align-items: center;}
#test .paging .progress{position: relative;display: inline-block;width:100%;vertical-align: middle}
#test .paging .progress .barbg{position: relative;width:100%;height:7px;background-color: #e7d6f3;overflow: hidden}
#test .paging .progress .bar{position: absolute;top: 0;left: 0;width: calc(100% / 9);;height:7px;background-color:#9a56c7}
#test .paging .heart{position: absolute;top: -20px;left: calc(100% / 9);width:47px;height:43px;margin-left: -24px;background: url(../../images/calc/test/top_num01.png) no-repeat 50% 50% / 100% auto; }
#test .paging .heart.num2{background: url(../../images/calc/test/top_num02.png) no-repeat 50% 50%;}
#test .paging .heart.num3{background: url(../../images/calc/test/top_num03.png) no-repeat 50% 50%;}
#test .paging .heart.num4{background: url(../../images/calc/test/top_num04.png) no-repeat 50% 50%;}
#test .paging .heart.num5{background: url(../../images/calc/test/top_num05.png) no-repeat 50% 50%;}
#test .paging .heart.num6{background: url(../../images/calc/test/top_num06.png) no-repeat 50% 50%;}
#test .paging .heart.num7{background: url(../../images/calc/test/top_num07.png) no-repeat 50% 50%;}
#test .paging .heart.num8{background: url(../../images/calc/test/top_num08.png) no-repeat 50% 50%;}
#test .paging .heart.num9{background: url(../../images/calc/test/top_num09.png) no-repeat 50% 50%;}
#test .testpage{display: none;width: 100%;padding: 93px 40px 40px;background: url(../../images/calc/test/obj_01.png) no-repeat 115px 0;text-align: center;}
#test .testpage.on{display: block;}
#test .testpage .qbox{position: relative;width: 100%;max-width: 720px;padding: 60px 35px;border: 2px solid #333}
#test .testpage .qbox::before,
#test .testpage .qbox::after{content: '';position: absolute;}
#test .testpage .qbox::before{top: -50px;right: -30px;width: 133px;height: 99px;background: url(../../images/calc/test/obj_03.png) no-repeat 0 0 / 100% auto;}
#test .testpage .qbox::after{bottom: -20px;right: -90px;width: 257px;height: 142px;background: url(../../images/calc/test/obj_02.png) no-repeat 0 0 / 100% auto;}
#test .testpage .qbox .qnum{display: block;margin-bottom: 35px;}
#test .testpage .question{width: 100%;margin-bottom: 50px;}
#test .testpage .selbox{width: 100%;}
#test .testpage .selbox a{display: block;width: 100%;padding: 30px 40px;margin:0 auto 20px;border: 1px solid #e4e4e4;border-radius: 45px;font-family: 'NanumSquareRound',sans-serif;font-size:32px;font-weight: 400;text-align: center;word-break: keep-all;line-height: 1.3;-webkit-transition:  .5s;transition:  .5s;}
#test .testpage .selbox a:last-child{margin-bottom: 0;}
#test .testpage .selbox a:hover,
#test .testpage .selbox a.on{background-color: #9a56c7;border-color: #9a56c7;color: #fff;font-weight: 500}
#test .btn_solid{margin-top: 50px;}
#calcing .top{padding: 0 40px;margin-bottom: 65px;text-align: center;}
#calcing .tit{padding: 0 40px;text-align: center;}
@media (max-width: 720px) {
    #test{padding: 0 5vw; }
    #test .paging_wrap .paging{padding: 0;}
    #test .testpage{padding: 13vw 0 5.5vw;background-position:16vw 0;background-size: auto 13vw;}
    #test .testpage .qbox::before{top: -6.9vw;right: -4.1vw;width: 18.4vw;height: 14vw;}
    #test .testpage .qbox::after{bottom: -2.7vw;right: -12.5vw;width: 35.5vw;height:19.7vw; }
    #test .testpage .qbox{padding: 8.3vw 4.8vw;}
    #test .testpage .qbox .qnum{margin-bottom: 4.8vw;}
    #test .testpage .qbox .qnum img{height: 7.7vw;}
    #test .testpage .question{margin-bottom: 30px;}
    #test .testpage .question .txt img{height: 12.5vw;}
    #test .testpage .question .txt.lg img{height: 20vw;}
    #test .testpage .selbox a{padding: 4vw 5.5vw;margin-bottom: 10px;border-radius: 6.2vw;font-size: 4vw;}
    #test .btn_solid{margin-top: 7vw;}
    #calcing .top{padding: 0 5vw;margin-bottom: 9vw;}
    #calcing .tit{padding: 0 5vw;}
    #calcing .top img{width: 62vw;}
    #calcing .tit img{height: 13.3vw;}

}



.result .wrap{height: auto;align-items: flex-start;}
.resultpage{display: none;padding: 160px 40px 50px;font-family: 'NanumSquareRound',sans-serif;text-align: center;}
.BBA .apage,
.ABB .bpage,
.ABA .cpage,
.AAB .dpage,
.BAB .epage,
.AAA .dpage,
.BBB .apage,
.BAA .epage{display: block;}
.resultpage .top .name{margin-bottom: 75px;}
.resultpage .top .top_img{margin-bottom: 60px;}
.resultpage .hr{width: 100%;height: 29px;margin-bottom: 25px;background: url(../../images/calc/result/hr.png) no-repeat 50% 0 / auto 100%;border: none;}
.resultpage .intxt{margin-bottom: 70px;padding: 0 0;font-size: 28px;color: #212121;font-weight: 400;line-height: 1.4;word-break: keep-all;text-align: left;}
.resultpage .intxt .toptxt{margin-bottom: 30px;font-weight: 800;text-align: center;}
.resultpage .tip{margin-bottom: 40px;}
.resultpage .tip .title{position: relative;padding-top: 70px;padding-right: 80px;margin-bottom: 30px;text-align: center;}
.resultpage .tip .title::after{content: '';position: absolute;top: 0;left: 40px;width: 122px;height: 71px;background: url(../../images/calc/result/tip.png) no-repeat 0 0 / 100% auto;}
.resultpage.dpage .tip .title::after{left: 0}
.resultpage.epage .tip .title::after{left: -10px}
.resultpage .contbox{position: relative;padding: 40px;background-color: #fdf7e1;font-family: 'NanumSquareRound',sans-serif;font-size: 28px;font-weight: 400;color: #212121;word-break: keep-all;text-align: left;}
.resultpage .tip .tipbox::after{content: '';position:absolute;top: -75px;right: 0;width: 85px;height: 88px;background: url(../../images/calc/result/obj1.png) no-repeat 100% 100% / auto 100%;}
.resultpage.bpage .tip .tipbox::after{background-image: url(../../images/calc/result/obj2.png)}
.resultpage.cpage .tip .tipbox::after{background-image: url(../../images/calc/result/obj3.png)}
.resultpage.dpage .tip .tipbox::after{background-image: url(../../images/calc/result/obj4.png)}
.resultpage.epage .tip .tipbox::after{background-image: url(../../images/calc/result/obj5.png)}

.resultpage .advice{margin-bottom: 65px;}
.resultpage .sns{margin-bottom: 60px;}
.resultpage .sns .tit{margin-bottom: 30px;font-family: 'NanumSquareRound',sans-serif;font-size: 34px;font-weight: 800;}
.resultpage .sns .sns_wrap{display: flex;width: 100%;padding: 0 10%;justify-content: center;}
.resultpage .sns .sns_wrap a{display: block;width: 90px;height: 90px;margin: 0 12px;border-radius: 90px;}
.resultpage .sns .sns_wrap .btn_facebook{background: #4a6ea9 url(../../images/calc/sns/sns_facebook.png) no-repeat 50% 50%;}
.resultpage .sns .sns_wrap .btn_kakao{background: #f7e733 url(../../images/calc/sns/sns_katalk.png) no-repeat 50% 50%;}
.resultpage .sns .sns_wrap .btn_copyurl{background: #919191 url(../../images/calc/sns/sns_link.png) no-repeat 50% 50%;}
.resultpage .sns .sns_wrap .btn_down{background: #f8851f url(../../images/calc/sns/sns_down.png) no-repeat 50% 50%;}
.resultpage .btn_solid{margin-bottom: 0;}
.resultpage .btn_booklink{height: 137px;margin-top: 30px;border-radius: 47px;background-color: #1dab8f;}
.resultpage .logo{margin-top: 60px;}


@media (max-width: 720px) {
    .resultpage{padding: 22vw 5vw 10vw;}
    .resultpage .top .name{margin-bottom: 10vw;}
    .resultpage .top .name img{height: 15.7vw;}
    .resultpage.cpage .top .name img,
    .resultpage.epage .top .name img{height: 25.8vw;}
    .resultpage .top .top_img{margin-bottom: 8vw;}
    .resultpage.apage .top .top_img img{height: 40vw;}
    .resultpage.bpage .top .top_img img{height: 48.8vw;}
    .resultpage.cpage .top .top_img img{height: 43.3vw;}
    .resultpage.dpage .top .top_img img{height: 43.7vw;}
    .resultpage.epage .top .top_img img{height: 46.2vw;}

    .resultpage .hr{height: 4.1vw;margin-bottom: 20px;}
    .resultpage .intxt{margin-bottom: 9vw;font-size: 3.8vw;}
    .resultpage .intxt .toptxt{margin-bottom: 20px;}
    .resultpage .tip{margin-bottom: 5.5vw}
    .resultpage .tip .title{margin-bottom: 3vw;padding-top: 9.7vw;padding-right: 3vw;}
    .resultpage .tip .title::after{left: 5vw;width: 17vw;}
    .resultpage.dpage .tip .title::after{left: 3vw;}
    .resultpage.epage .tip .title::after{left: 1vw;}

    .resultpage .tip .title img{height: 4.2vw;}
    .resultpage .tip .tipbox::after{top: -10.4vw;height: 12.2vw;}
    .resultpage.bpage .tip .tipbox::after{top: -9.5vw;height: 11.1vw}
    .resultpage.dpage .tip .tipbox::after{top: -3vw;right: -3vw;height: 9.7vw;}
    .resultpage.epage .tip .tipbox::after{top: -3vw;right: -3vw;height: 9.7vw;}
    .resultpage .contbox{padding: 5.5vw;font-size: 3.8vw;}
    .resultpage .advice{margin-bottom: 9vw;}
    .resultpage .advice .title img{height: 15.1vw;}
    .resultpage .sns{margin-bottom: 30px;}
    .resultpage .sns .tit{margin-bottom: 20px;font-size: 4.5vw;}
    .resultpage .sns .sns_wrap{padding: 0;}
    .resultpage .sns .sns_wrap a{width: 45px;height: 45px;margin:  0 5px;}
    .resultpage .sns .sns_wrap .btn_facebook{background-size: 11px auto;}
    .resultpage .sns .sns_wrap .btn_kakao{background-size: auto 23px;}
    .resultpage .sns .sns_wrap .btn_copyurl{background-size: 21px auto}
    .resultpage .sns .sns_wrap .btn_down{background-size: 18px auto;}
    .resultpage .btn_booklink{height: 19vw;border-radius: 6.5vw;}
    .resultpage .btn_booklink img{height: 10.4vw;}
    .resultpage .logo{margin-top: 40px;}
    .resultpage .logo img{width: 39px}
}