.analyze-pop { display: none; position: fixed; top: 0; left: 0; padding: 15px; width: 100%; height: 100%;
    background: rgba(0,0,0,.5); z-index: 100000;
}
.pop-inner { position: relative; height: 100%; }
.analyze-wrap { position: absolute; top: 0; left: 50%; width: 560px; height: 100%; max-height: 820px;
    box-shadow: 0px 13px 23px rgba(0,0,0,.35);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
.analyze-scroll { overflow-x: hidden; overflow-y: auto; width: 100%; height: 100%; background: #fff; }
.an-head { height: 55px; background: #fae100; border-bottom: 1px solid rgba(0,0,0,.1); }
.close-an { position: absolute; top: 0; right: -65px; width: 65px; height: 65px; background: #fff url('/child/img/icon/close-analyze.png') no-repeat center; }

.step { padding-top: 18px; font-size: 0; text-align: center; }
.step li { display: inline-block; vertical-align: top; padding: 0 16px 0 9px; font-size: 15px; color: rgba(0,0,0,.4); background: url('/child/img/icon/step.png') no-repeat right center; }
.step li:last-child { padding-right: 0; background: none; }
.step li.on { color: rgba(0,0,0,.8); font-weight: bold; }

.surv-top { height: 246px; text-align: center; background: #fae100; box-shadow: 0px 7px 10px 0px rgba(0,0,0,.15); }
.surv-top em { display: block; padding: 38px 0 3px; font-size: 20px; color: rgba(0,0,0,.7); font-style: normal; }
.surv-top span { display: block; padding: 0 10px; font-size: 36px; color: rgba(0,0,0,1); }

.sub-step { display: inline-block; position: relative; margin-top: 36px; width: 230px; height: 2px; background: rgba(175, 157, 0, .5); }
.sub-step li { position: absolute; top: -7px; width: 14px; height: 14px; background: #af9d00; border-radius: 50%; }
.sub-step li.complete { background: #fff; }
.sub-step li.on { top: -12px; width: 24px; height: 24px; background: #fff url('/child/img/icon/sub-step-on.png') no-repeat center; }
.step3 li:first-child { left: 0px; }
.step3 li:nth-child(2) { left: 50%; }
.step3 li:last-child { right: -14px; }
.step4 li:first-child { left: 0px; }
.step4 li:nth-child(2) { left: 33.33333%; }
.step4 li:nth-child(3) { left: 66.66666%; }
.step4 li:last-child { right: -14px; }


.surv-bottom { padding: 20px 20px 30px; height: 420px; }
.surv-bottom label { display: block; position: relative; width: 100%; height: 74px; font-size: 22px; text-align: center;
    color: #444444; border-bottom: 1px solid #e5e5e5;
}
.surv-bottom label span { display: block; width: 100%; height: 100%; }
.surv-bottom label input { position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; }
.surv-bottom label:last-child { border-bottom: none; }
.surv-bottom label input:checked ~ span { color: #fff; font-weight: 500; background: #333333; border-bottom: 1px solid #333333; }

.an-foot { padding: 0 20px 29px; }
.next-btn { width: 100%; height: 70px; font-size: 23px; color: #222222; font-weight: 500; border: 1px solid #222222; }
.next-btn span { display: inline-block; padding-right: 30px; background: url('/child/img/icon/next-btn.png') no-repeat right center; }








/* 결과 페이지 */
.result-area { position: relative; padding-left: 315px; background: #333333; }
.result-area:after { content: ''; display: block; clear: both; }
.result-left { position: absolute; top: 0; left: 0; padding: 25px 28px; width: 315px; height: 100%; }
.left-head { display: block; font-size: 0; }
.head-span { position: relative; z-index: 1; width: 50%; height: 50px; font-size: 20px; color: #fff; font-weight: 500; }
.head-span:last-child { margin-left: -1px; }
.head-span[aria-pressed="false"] { border: 1px solid rgba(255,255,255,.3); }
.head-span[aria-pressed="true"] { border: 1px solid rgba(255,255,255,1); z-index: 2; }

.type-title { display: block; margin: 25px 0 47px; line-height: 30px; text-align: center; font-size: 25px; font-style: normal; color: #fff; font-weight: 500; letter-spacing: -0.06em; }
.type-title strong { color: #fae100; font-weight: 500; }
.left-foot a { display: block; margin-top: 50px; width: 100%; height: 45px; line-height: 45px; text-align: center; font-size: 17px; color: #333333; font-weight: bold; background: #fff; border-radius: 22px; }

.sp { padding-left: 35px; font-size: 15px; color: rgba(255,255,255,.8); }
.tendency-scroll { position: relative; }
.tendency-scroll:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.type-row { position: absolute; left: 0; padding-left: 35px; font-size: 15px; color: rgba(255,255,255,.15); }
.type-row:before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; width: 20px; height: 20px; background: #777777; border-radius: 50%; }



.portfolio-top:after { content: ''; display: block; clear: both; }
.pf-left { float: left; width: 50%; }
.pf-right { float: left; width: 50%; padding-left: 15px; }

.pf-left h2 { padding-left: 5px; font-size: 43px; color: #333333; font-weight: 500; }
.pf-left p { padding-left: 5px; font-size: 20px; color: #333333; font-weight: 500; }
.pf-left p span { display: inline-block; padding: 0 5px; background: #fae100; border-radius: 3px; }



.result-right { padding: 30px 50px 50px 45px; background: #f5f5f5; }

.grid-box-wrap { margin-top: 152px; position: relative; }
.grid-box-wrap:before { content: ''; position: absolute; top: -235px; right: -30px; width: 419px; height: 296px; background: url('/child/img/sub/analyze/port.png'); z-index: 2; }
.grid-box-ul:after { content: ''; display: block; clear: both; }
.grid-box-ul li { float: left; padding: 5px; width: 33.33333%;
    -webkit-transition: ease-out .35s;
    -o-transition: ease-out .35s;
    transition: ease-out .35s;
}
.grid-box-ul li:first-child .li-inner { background: #fae100; }
.grid-box-ul li:nth-child(2) .li-inner { background: #faa500; }
.grid-box-ul li:first-child .li-inner em,
.grid-box-ul li:nth-child(2) .li-inner em { margin-top: 5px; font-size: 50px; font-weight: bold; }
.li-inner { position: relative; height: 200px; text-align: center; background: #fff; box-shadow: 0px 5px 13px 0px rgba(0,0,0,.15); }
.li-inner button { position: absolute; top: 0; right: 0; }
.li-inner span { font-size: 20px; color: #555555; font-weight: 500; }
.li-inner em { display: block; margin-top: 8px; font-family: Arial; font-size: 45px; color: #333; font-weight: normal; font-style: normal; }


.chart-box { position: relative; margin-bottom: 18px; padding: 28px 30px; height: 320px; background: #fff; box-shadow: 0px 5px 13px 0px rgba(0,0,0,.15);
    -webkit-transition: ease-out .35s;
    -o-transition: ease-out .35s;
    transition: ease-out .35s;
}
.chart-box:first-child { }
.chart-box h3 { position: absolute; top: 0; left: 0; padding-bottom: 13px; width: 100%; font-size: 20px; color: #333333; font-weight: 500; border-bottom: 1px solid #e5e5e5; }

.chart-wrap { width: 100%; height: 100%; }
.chart-box-inner { position: relative; padding: 42px 0; height: 100%; }

.portfolio-bottom { padding-left: 5px; height: 498px; }
.portfolio-bottom .chart-box { height: 100%; }

.chart-login { width: 100%; height: 223px; text-align: center; background: rgba(0,0,0,.5); }
.chart-login p { line-height: 25px; font-size: 19px; color: #fff; }
.chart-login a { display: inline-block; margin-top: 20px; width: 152px; height: 40px; line-height: 40px; font-size: 16px; color: #333333; background: #fff; border-radius: 20px; }


/* 종목비중 */
.chart-table { border-top: 2px solid #fae100; }
.chart-scroll { overflow-x: hidden; overflow-y: auto; }
.chart-scroll-inner { height: 180px; }
.chart-row { font-size: 0; border-bottom: 1px solid #e5e5e5; }
.chart-cell { display: inline-block; vertical-align: top; padding: 10px 10px 13px; width: 33.33333%; text-align: center; font-size: 16px; color: #555555; }
.chart-th { border-bottom: 1px solid #fae100; }
.chart-th .chart-cell { padding: 14px 10px 14px; font-weight: 500; }


.cb2 h3 { border-bottom: none; }



@media (max-width: 1024px){
.result-left { width: 255px; }
.result-right { padding: 20px 30px 50px 25px; }
.result-area { padding-left: 255px; }

.head-span { height: 45px; font-size: 18px; }
.type-title { font-size: 22px; }

.pf-left { width: 100%; }
.pf-right { padding: 18px 5px 0; width: 100%; }

.grid-box-wrap:before { top: -165px; width: 250px; height: 200px; background-repeat: no-repeat; background-position: center; background-size: contain; }

.li-inner span { font-size: 18px; }
.grid-box-ul li:first-child .li-inner em,
.grid-box-ul li:nth-child(2) .li-inner em { font-size: 40px; }
.li-inner em { font-size: 35px; }

.pf-left h2 { font-size: 33px; }
.pf-left p { font-size: 18px; }

.portfolio-bottom { padding-right: 5px; }
}


@media (max-width: 768px){
/* Result */
.grid-box-ul li { width: 50%; }

.result-area { padding-left: 0; }
.result-left { position: static; width: 100%; }
.type-title { margin: 30px 0; }
.tendency { position: relative; }
.tendency-inner { overflow-x: hidden; overflow-y: auto; margin: auto; padding: 30px 0; width: 200px; height: 200px; }
.tendency-shadow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.tendency-shadow:before { content: ''; z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 30px;
background: -moz-linear-gradient(top, rgba(51,51,51,1) 0%, rgba(51,51,51,0) 100%);
background: -webkit-linear-gradient(top, rgba(51,51,51,1) 0%,rgba(51,51,51,0) 100%);
background: linear-gradient(to bottom, rgba(51,51,51,1) 0%,rgba(51,51,51,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#00333333',GradientType=0 );
}
.tendency-shadow:after { content: ''; z-index: 2; position: absolute; bottom: 0; left: 0; width: 100%; height: 30px;
background: -moz-linear-gradient(top, rgba(51,51,51,0) 0%, rgba(51,51,51,1) 100%);
background: -webkit-linear-gradient(top, rgba(51,51,51,0) 0%,rgba(51,51,51,1) 100%);
background: linear-gradient(to bottom, rgba(51,51,51,0) 0%,rgba(51,51,51,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00333333', endColorstr='#333333',GradientType=0 );
}

}


@media (max-width: 720px){
/* 설문 */
.analyze-wrap { padding-right: 40px; width: 100%; }
.close-an { right: 0px; width: 40px; height: 40px; background-size: auto 20px; }

}





@media (max-width: 550px){
/* Result */
.result-left { padding: 20px 15px; }
.result-right { padding: 20px 15px; }
.pf-left h2 { font-size: 26px; }
.pf-left p { font-size: 17px; }

.li-inner span { font-size: 15px; }
.grid-box-ul li:first-child .li-inner em,
.grid-box-ul li:nth-child(2) .li-inner em { font-size: 26px; }
.li-inner em { font-size: 24px; }

.chart-box { padding: 25px 15px; }
.chart-box h3 { display: block; margin-left: 14px; width: calc(100% - 25px); }

.cb1 { padding-left: 0; padding-right: 0; }
.cb1 .chart-login { margin-left: 15px; width: calc(100% - 30px); }

.chart-login p { font-size: 18px; }

.chart-cell { font-size: 14px; }
.chart-th .chart-cell { font-size: 15px; }



/* 설문 */
.an-head { height: 90px; }
.step li { font-size: 14px; background-position: right 10px center; }
.step li { width: 50%; }

.surv-top { height: 210px; }
.surv-top em { padding-top: 20px; font-size: 15px; }
.surv-top span { font-size: 22px; }
.sub-step {
    margin-left: -5px;
    -webkit-transform: scale(.8);
    -ms-transform: scale(.8);
    transform: scale(.8);
}
.surv-bottom { padding: 15px 15px 20px; height: 375px; }
.surv-bottom label { font-size: 16px; height: 70px; }

.an-foot { padding: 0 15px 15px; }
.next-btn { height: 60px; font-size: 18px; }
}

/**/