/* common */
html{width:100%;height:100%}
body{background: #FFFB97;height:100%;max-height:100vh;width:100%;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between}
.mo{display:none;}
.blueBg{background:#B2C7D9;}
.inner{max-width:102.4rem;width:100%;margin:0 auto}
.blueBg span{color:#8493A0}
.blueBg svg rect,
.blueBg svg path{fill:#9CB3C7}
.blueBg header{border-color:#9CB3C7;}
#kakao_ad{display:block;}
.shareResult{overflow-y:auto;}

/* header */
header{width:100%;background-color: inherit; border-bottom: 0.13rem solid #EFEB7B;}
header .inner{position:relative;display: flex;justify-content:space-between;align-items:center;height:8rem;padding:0}
header .title{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
h1 .main_logo{width:3.6rem;}
h1 .qna_logo{display:none;width:4rem;}
header span{display:inline-block;font-weight:300;font-size:1.6rem;color:#EFEB7B;padding-left:0.8rem;vertical-align:middle;}
nav{width:8.8rem;display:flex;justify-content:space-between}
nav button{cursor:default;}
nav svg{width:2.4rem;height:2.4rem;vertical-align:middle}
nav svg rect,
nav svg path{fill:#EFEB7B}
header .title{display: inline-block;font-weight:500;font-size:1.8rem}

/*kakao_ad*/
#kakao_ad{margin-top:-5px;}
#kakao_ad .kakao_ad_area{position: relative;bottom:-5px;}
#kakao_ad.topAd{position:absolute;top:8.7rem;width:100%}

/* qnaBody header */
.qnaBody .main_logo,
.qnaBody h1 span{display:none}
.qnaBody .qna_logo{display:block;}
.qnaBody .title span{padding-left:0.4rem}

/* container */
.container{height:100%;display:flex;flex-direction:column;justify-content:space-between}
.container section{display:none;}

/* main */
#main{display:flex;flex-direction:column;justify-content:center;height:100%;background: url('/img/main_bg.png') top 2rem left 0;background-size:3rem 6.3rem; text-align:center}
#main .imgArea{position:relative;max-width:58rem;margin:0 auto;padding-bottom:3.2rem;margin-top:-5rem}
#main .startBtn{background:#fff;max-width:71.4rem;width:100%;height:6.8rem;border-radius:3.2rem;font-size:1.8rem}
#main .startBtn i{display:inline-block;width:4.8rem;height:4.8rem;background:url('/img/main_btn.svg') no-repeat center;background-size:contain;vertical-align:middle;}
#main .startBtn:hover{background:#99745F;border:0.2rem solid #684237;color: #fff;}
#main .startBtn:hover i{background-image:url('/img/main_btn_hover.svg');}
#main h2{position:absolute;font-size:4.8rem;line-height:1;font-weight:500;bottom:12rem;left:50%;transform:translate(-50%);color:#fff;}
#main h2 span{color:inherit;font-size:3rem;font-weight:inherit;}

/* qna */
.status{background:#fff;height:0.6rem}
.status .statusBar{background:#7EA2FF;height:100%;border-radius: 0 0.4rem 0.4rem 0;transition: width .5s; -webkit-transition: width .5s}
#qna .inner{padding-top:100px;}
.qBox{position:relative;margin-top:4rem;padding-left:9rem;margin-bottom:4rem}
.qBox .box{position:relative;background:#fff;border-radius:2rem;padding:2.4rem 3.2rem;font-size:1.5rem;line-height:3rem;font-weight:300;word-break:keep-all;}
.qBox .box::after{content:"";display:inline-block;width:1.5rem;height:2.3rem;background: url('/img/q_bubble.svg') no-repeat left top;background-size:3.1rem;position:absolute;left:-1.5rem;top:2rem;}
.qBox .name{font-size:1.5rem;font-weight:300;display:inline-block;margin-bottom:1.6rem;}
.qBox .qLogo{position:absolute;left:0;top:0;width:5.2rem}
.answerBox{padding-right:2.4rem;padding-left:9rem;}
.answerBox .answerList{position:relative;display:block;width:100%;background:#FFF6A5;border-radius:2rem;padding:2.4rem 3.2rem;text-align:left;font-size:1.5rem;line-height: 3rem;font-weight:300;margin-bottom:2.4rem;word-break:keep-all;}
.answerBox .answerList:last-of-type{margin-bottom:0;}
.answerBox .answerList:first-of-type::after{content:'';display:inline-block;width:1.5rem;height:2.3rem;position:absolute;right:-1.4rem;top:1rem;background:url('/img/a_bubble.svg') no-repeat top right;background-size:3.1rem}
.answerBox .answerList:hover{background-color:#FFEB33}
.answerBox .answerList:first-of-type:hover::after{background-image:url('/img/a_bubble_hover.svg');}

/* result */
#result{padding: 2.4rem 0}
#result .inner{background:#fff;border-radius:0.8rem;padding:4.8rem 0 6.4rem;text-align:center;}
.borderDeco{margin-top:-1.5rem;color:#2D3C48;position:relative;font-size:1.8rem;line-height:2.1rem;font-weight:500;padding: 1.5rem 2.4rem;display:inline-block;}
.borderDeco::after{content:'';position:absolute;left:0;bottom:0;display:inline-block;width:100%;height:50%;border:1px solid #E1E1E1;border-top:0;border-radius: 0 0 2rem 2rem;}
.borderDeco::before{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:-0.7rem;width:1px;height:0.7rem;background:#E1E1E1;}
.resultDesc b{color:inherit;font-size:2.4rem;font-weight:700;vertical-align:middle;}
.resultArea{padding: 3.1rem 0 6.4rem;display:flex;justify-content:space-between;align-items:center;max-width:67.2rem;margin:0 auto;}
#resultImg{width:22rem;height:22rem;}
.resultContent{width:42.8rem;text-align:left;}
.resultContent ul{padding-left:2.2rem;}
.resultContent li{list-style:disc;font-size:1.5rem;line-height:3rem;margin-bottom:0.8rem;}
.resultContent li:last-of-type{margin-bottom:0;}
.synergyArea{display:flex;justify-content:space-between;max-width:62.4rem;margin:0 auto 6.4rem;}
.synergyArea h3{padding: 0.8rem 2.3rem;margin-top:-0.8rem;margin-bottom:3rem;font-weight:300;}
.synergyArea h3 b{font-weight:500;}
.synergyArea .imgArea{width:18rem;margin:0 auto 1.6rem;}
.synergyArea .name{font-size:1.8rem;font-weight:500;word-break:keep-all;}
.synergyArea .name b{color:inherit;font-weight:700;font-size:2.4rem;vertical-align:middle}
#result .btnArea{max-width:67.2rem;margin:0 auto 6.4rem;}
.backBtn{font-weight:300;background:#C3E4FF;width:100%;border-radius:6rem;height:5.6rem;font-size:1.8rem}
.backBtn img{width:3.6rem;}
.allResultBtn{text-decoration:underline;font-weight:300;font-size:1.4rem;padding-top:1.6rem;}
.shareArea h4{font-size:1.2rem;font-weight:300;color:#6C8397;margin-bottom:1rem;}
.shareArea h4 img{vertical-align:middle;}
.shareArea ul{display:flex;justify-content:space-between;width:20.8rem;margin:0 auto;}
.shareArea ul li{width:4.8rem;}

/* allResult */
#allResult .inner{padding-top:4rem;padding-bottom:19.8rem}
.fruit{text-align:center;background:#fff;border-radius:0.8rem;padding:3.2rem 0 4rem;margin-bottom:3.2rem;}
.fruit:last-of-type{margin-bottom:0;}
.fruit h3{font-size:1.8rem;font-weight:500;word-break:keep-all;}
.fruit h3 b{color:inherit;font-weight:700;font-size:2.4rem;}
.fruit .imgArea{padding:3rem 0 2.4rem;width:20rem;margin:0 auto;}
.fruit .tag{display:flex;justify-content:center;flex-wrap:wrap;margin:0 auto;line-height:1.5;}
.fruit .tag li{font-size:1.6rem;font-weight:300;padding:0 0.8rem}
#allResult .returnBtn{position:fixed;bottom:0;left:0;width:100%;height:5.6rem;font-size:1.8rem;color:#fff;font-weight:500;background:#6D4D45;}

/* roadingPage */
#roadingPage{position:relative;height:100%;width:100%;background: url('/img/main_bg.png') top 2rem left 0;background-size:3rem 6.3rem; text-align:center}
.roding{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.roding img{width:11.6rem;}
.roding h3{width:100vw;padding-top:1.6rem;font-size:1.8rem;font-weight:500;color:#6D4D45}

@media all and ( max-width:1024px ){
    .inner{padding:0 2.4rem;max-width:initial;}
    
    /* header */
    header .inner{height:6.4rem;padding:0 2.4rem;}
    header span{padding-left:0.8rem}

    /* kakao_ad*/
    #kakao_ad.topAd{top:6.99rem}

    /* main */
    #main .imgArea{padding-bottom:5.6rem}
    #main .startBtn{max-width:100%;height:4.8rem;border-radius:6rem;}
    #main .startBtn i{width:3.6rem}
    #main h2{bottom:14rem;}

    /* qna */
    .status{height:0.4rem}
    .status .statusBar{border-radius: 0 0.5rem 0.5rem 0}
    .qBox .box{font-size:1.4rem;padding:2rem 3.2rem}
    .qBox .name{font-size:1.4rem}
    .qBox .qLogo{width:4.8rem}
    .answerBox{padding-right:2.4rem;padding-left:0;}
    .answerBox .answerList{font-size:1.4rem;padding:2rem 3.2rem}

    /* result */
    #result{padding: 2.4rem 2.4rem}
    #result .inner{padding:4rem 0 5.6rem}
    .borderDeco{margin-top:-0.8rem;font-size:1.4rem;line-height:1.7rem;padding: 0.8rem 2.4rem;}
    .resultDesc b{font-size:2rem;}
    .resultArea{padding: 3.1rem 0 5.6rem;max-width:56rem;}
    #resultImg{width:20rem;height:20rem;}
    .resultContent{width:34.4rem}
    .resultContent ul{padding-left:2rem;}
    .resultContent li{font-size:1.4rem;line-height:2.2rem}
    .synergyArea{max-width:53rem;margin:0 auto 5.6rem;}
    .synergyArea .imgArea{width:15rem}
    .synergyArea .name{font-size:1.4rem;}
    #result .btnArea{max-width:56rem;margin:0 auto 5.6rem;}
    .backBtn{height:4.8rem}

    /* allResult */
    #allResult .inner{padding-top:2.4rem;padding-bottom:8.6rem}
    .fruit{padding:2.4rem 0 3.2rem;margin-bottom:2.4rem;}
    .fruit h3{font-size:1.4rem}
    .fruit h3 b{font-size:2rem;}
    .fruit .imgArea{padding:2.4rem 0 1.6rem;width:18rem;}
    .fruit .tag li{font-size:1.3rem}
    #allResult .returnBtn{font-size:1.8rem}
}

@media all and (max-width:768px){
    /* common */
    .inner{padding:0 1.8rem}
    .pc{display:none;}
    .mo{display:inline;}

    /* header */
    header{border-bottom-width: 0.1rem;}
    header .inner{height:4.8rem;padding:0 1.8rem}
    h1 .main_logo{width:2.4rem;}
    h1 .qna_logo{width:2.4rem;}
    header span{font-size:1rem;padding-left:0.4rem}
    nav{width:7rem}
    nav svg{width:1.8rem;height:1.8rem;}
    header .title{font-size:1.4rem}

    /*kakao_ad*/
    #kakao_ad.topAd{position:static;}

    /* main */
    #main{background-size:1.6rem 3.4rem;background-position: left top 1rem;}
    #main .imgArea{padding-bottom:2.1rem;max-width:43.7rem;position:relative;left:1rem;}
    #main .startBtn{height:4.8rem}
    #main .startBtn img{max-width:3.6rem;width:3.6rem;margin-top:-4rem}
    #main h2{font-size:4.2rem;bottom:8rem}
    #main h2 span{font-size:2.6rem}

    /* qna */
    #qna .inner{padding-top:0;}
    .qBox{margin-top:2.4rem;padding-left:5.3rem;margin-bottom:2.4rem}
    .qBox .box{border-radius:1rem;padding:0.8rem 1.2rem;font-size:1.3rem;line-height:2.4rem}
    .qBox .box::after{top:0.8rem;left:-0.8rem;}
    .qBox .name{font-size:1.4rem;margin-bottom:0.4rem;}
    .qBox .qLogo{width:3.6rem}
    .answerBox{padding-right:1.4rem}
    .answerBox .answerList{border-radius:1rem;padding:0.8rem 1.2rem;font-size:1.3rem;line-height:2.4rem;margin-bottom:1.2rem;}
    .answerBox .answerList:last-of-type{margin-bottom:0;}
    .answerBox .answerList:first-of-type::after{top:0.8rem;right:-0.8rem}

    /* result */
    #result{padding: 2.4rem 1.8rem}
    #result .inner{padding:2.4rem 1.2rem 4.8rem}
    .borderDeco{margin-top:-0.7rem;font-size:1.4rem;line-height:1.6rem;padding: 0.7rem 2.2rem;}
    .resultDesc b{font-size:2rem;}
    .resultArea{padding: 3rem 0 4.8rem;max-width:initial;flex-direction:column;}
    #resultImg{width:18rem;height:18rem;margin-bottom:2.4rem;}
    .resultContent{width:100%}
    .resultContent ul{padding-left:2rem;}
    .resultContent li{font-size:1.3rem;line-height:2.4rem;margin-bottom:0.8rem;}
    .synergyArea{max-width:31.9rem;width:100%;margin:0 auto 4.8rem;}
    .synergyArea > div{width:48%;}
    .synergyArea h3{font-size:1.6rem;line-height:1.8rem;width:100%;padding: 0.8rem 0;margin-top:-0.8rem;margin-bottom:1rem}
    .synergyArea h3::after{border-radius: 0 0 3rem 3rem;}
    .synergyArea .imgArea{width:10rem;margin:0 auto 0.8rem;}
    .synergyArea .name{font-size:1.2rem;line-height:2.4rem;}
    .synergyArea .name b{font-size:1.6rem;}
    .synergyArea .sort b{display:block;}
    #result .btnArea{max-width:initial;width:100%;margin:0 auto 4.8rem;}
    .backBtn{height:4rem;font-size:1.3rem}
    .backBtn img{width:2.4rem;}
    .allResultBtn{font-size:1.2rem;padding-top:1.6rem;}
    .shareArea h4{font-size:1.2rem;}
    .shareArea h4 img{width:1.8rem}
    .shareArea ul{width:20.8rem;}
    .shareArea ul li{width:4rem;}

    /* allResult */
    #allResult .inner{padding-top:2.4rem;padding-bottom:7.2rem}
    .fruit{padding:2.4rem 1.2rem 3.2rem;margin-bottom:2.4rem;}
    .fruit h3{font-size:1.4rem;line-height:2rem}
    .fruit h3 b{font-size:2rem;}
    .fruit .imgArea{padding:2.4rem 0 1.6rem;width:18rem;}
    .fruit .tag li{font-size:1.3rem}
    #allResult .returnBtn{font-size:1.8rem;height:4.8rem;}

    /* roadingPage */
    #roadingPage{background-size:1.6rem 3.4rem;background-position: left top 1rem;}
    .roding img{width:10rem;}
    .roding h3{padding-top:0.8rem;}
}

@media all and ( max-width:374px ) {
    header .inner{padding:0 1.8rem}    
}