@charset "utf-8";
/*자동완성 입력폼*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
}

input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active {
    -webkit-text-fill-color: #000;
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    box-shadow: 0 0 0px 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0s;
}

#container.exam_intro{width:100%;padding:0;font:15px/1 'NanumSquareNeo', Dotum, 'Apple Gothic', sans-serif;letter-spacing:-.04em}
#container.exam_intro .contents{overflow:hidden;}
#container.exam_intro input, textarea, select, td, th, button{font:15px/1 'NanumSquareNeo', Dotum, 'Apple Gothic', sans-serif}

.nav_tabs{position:sticky;left:0;bottom:0;z-index:100;width:100%;}
#wrap .quick_f_navi{bottom:78px}

.btn_list{display:flex;}
.btn_list li{flex:1;}
.btn_list li button{display:flex;align-items:center;justify-content:center;width:100%;height:66px;font-size:20px;font-weight:900;border:0 none}
.btn_list li button.btn_bk{background-color:#000;color:#fff;}
.btn_list li button.btn_gray{background-color:#555454;color:#fff;}
.btn_list li button.btn_ylw{background-color:#FFDD54;color:#000;}
.btn_list li button.btn_blue{background-color:#3455D5;color:#fff;}

.visual{position:relative;height:364px;padding-top:80px;text-align:center;background:#3455D6;box-sizing:border-box}
.visual h3{position:relative;z-index:10;line-height:1.4;text-align:center;font-size:44px;font-weight:300;color:#fff;}
.visual h3 em{display:block;margin-bottom:5px;font-size:16px;color:#6AE8FC}
.visual h3 strong{display:block;font-size:44px;font-weight:900;color:#fff}
.visual .tit_sub_txt{position:relative;z-index:10;width:192px;margin:20px auto 0;}
.visual .tit_sub_txt img{width:100%}
.visual .bg{overflow:hidden;position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;}
.visual .bg .wave_box{position:absolute;right:0;top:0;width:720px;height:100%;}
.visual .bg .wave1{opacity:.4;position:absolute;left:0;bottom:-75px;display:inline-block;width:200%;height:223px;background:url('https://pic.neungyule.com/nebuildandgrow/mall/mobile/img/exam/bg_wave1.png') repeat-x 0 50% / 200% 100%;animation:move_wave 4s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;}
.visual .bg .wave2{z-index:10;opacity:.5;position:absolute;left:0;bottom:-55px;display:inline-block;width:200%;height:136px;background:url('https://pic.neungyule.com/nebuildandgrow/mall/mobile/img/exam/bg_wave2.png') repeat-x 0 50% / 200% 100%;animation:move_wave 3s cubic-bezier(0.42, 0, 0.58, 1) infinite alternate;}
.visual .bg .line_box{display:flex;max-width:1640px;height:100%;margin:0 auto;}
.visual .bg .line_box .line{flex:1;}
.visual .bg .line_box .line:after{content:'';display:inline-block;width:1px;animation:line 2s infinite linear;}
.visual .bg .line_box .line.line1:after{background:rgba(255, 255, 255, .16);}
.visual .bg .line_box .line.line2:after{background:url('https://pic.neungyule.com/nebuildandgrow/mall/img/exam/bg_line1.png') no-repeat 50% 50%;animation-delay:.2s;}
.visual .bg .line_box .line.line3:after{background:url('https://pic.neungyule.com/nebuildandgrow/mall/img/exam/bg_line2.png') no-repeat 50% 50%;animation-delay:.4s;}
@keyframes line{
  0% {
    height: 0%;
  }
  40% {
    height: 100%;
  }
  50% {
    height: 100%;
  }
  100% {
    height: 100%;
  }
}
@keyframes move_wave{
    0%{
        transform:translateX(-40%) translateZ(0) scaleY(0.55)
    }
	100%{
        transform:translateX(-50%) translateZ(0) scaleY(1)
    }
}

section{padding:70px 0;}
section h4{margin-bottom:30px;text-align:center;font-weight:900;color:#000;font-size:26px;line-height:1.4;}
section h4 .highlight{position:relative;z-index:1;font-weight:900;}
section h4 .highlight::after{content:'';position:absolute;left:-3px;bottom:-3px;z-index:-1;display:block;width:0;height:10px;background:#6AE8FC;border-radius:5px;transition:width .6s ease}
section h4 .highlight.reveal::after{width:calc(100% + 6px);}
section .section_sub_txt{margin-bottom:40px;font-size:14px;text-align:center;line-height:1.5;color:#555;letter-spacing:-.04em}
section .section_sub_txt strong{font-weight:800;color:#000;letter-spacing:-.04em}

.section_likewise{background:#fff;}
.section_likewise .circle_chart_list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:720px;margin:0 auto}
.section_likewise .circle_chart_list li{position:relative;width:calc(50% - 25px);/*height:260px;padding:32px;padding-bottom:50%;*/border-radius:30px;background:#3455D5;box-sizing:border-box;}
.section_likewise .circle_chart_list li:after{content:'';display:block;padding-bottom:100%;}
.section_likewise .circle_chart_list li .circle_wrap{position:absolute;left:10%;top:10%;display:flex;width:80%;height:80%;align-items:center;justify-content:center;flex-direction:column;}
.section_likewise .circle_chart_list svg{width:100%;height:100%}
.section_likewise .circle_chart_list .circle{position:absolute;left:0;top:0;display:flex;width:100%;height:100%;align-items:center;justify-content:center;flex-direction:column;}
.section_likewise .circle_chart_list .tit{display:block;font-size:24px;font-weight:900;color:#fff;}
.section_likewise .circle_chart_list .sub_txt{display:block;margin-top:8px;line-height:1.4;font-size:11px;color:rgba(255, 255, 255, .8);text-align:center;word-break:keep-all;letter-spacing:-.08em}
.section_likewise .circle_chart_list .circle_wrap.active .circle_chart_circle{animation:circle-chart-fill 1s reverse;transform:rotate(-90deg);transform-origin:center;}

@keyframes circle-chart-fill{
	to{ stroke-dasharray:0 100;}
}

.exam_list{background:#313131;}
.exam_list > li{position:relative;padding:70px 20px;text-align:center;}
.exam_list > li + li{border-top:1px solid rgba(255, 255, 255, .3)}
.exam_list .sub_tit{display:block;margin-bottom:15px;font-size:18px;color:#6AE8FC;font-weight:700;}
.exam_list .tit{display:block;margin-bottom:20px;color:#fff;font-size:44px;font-weight:900;}
.exam_list .desc{color:rgba(255, 255, 255, .8);line-height:1.57;font-size:14px;word-break:keep-all}
.exam_list .test_time{overflow:hidden;display:inline-flex;width:90px;height:90px;margin:40px 0 30px;align-items:center;justify-content:center;flex-direction:column;border-radius:50%;border:1px solid #6AE8FC;}
.exam_list .test_time .txt_test{font-size:12px;color:#6AE8FC;}
.exam_list .test_time strong{display:block;font-weight:900;font-size:20px;line-height:24px;color:#6AE8FC;}
.exam_list .chk_list{max-width:205px;margin:0 auto}
.exam_list .chk_list li{position:relative;padding-left:25px;color:#6AE8FC;font-size:14px;line-height:1.62;font-weight:700;letter-spacing:-.04em;text-align:left;}
.exam_list .chk_list li:before{content:'';position:absolute;left:0;top:4px;display:inline-block;width:15px;height:15px;background:url('https://pic.neungyule.com/nebuildandgrow/mall/img/exam/ico_chk.svg') no-repeat 0 50%}
.exam_list .chk_list li + li{margin-top:5px}

@keyframes arr-in{
	from{transform:translateX(-50%);}
	to{transform:translateX(0);}
}

.section_otherwise{padding:70px 20px;background:#fff;}
.section_otherwise .chart_box{text-align:center}
.section_otherwise .chart_box div + div{margin-top:40px}
.section_otherwise .chart_box .tit{margin-bottom:20px;font-size:20px;font-weight:800;color:#000;text-align:center}
.section_easily{padding:70px 0 0;background:#F1F5FF;text-align:center;}
.section_easily h4{margin-bottom:15px}
.section_easily .section_sub_txt{margin-bottom:35px}

.btn_purchase{position:relative;display:block;width:100%;padding:22px 10px;border-radius:8px;text-align:center;border:0 none;background-color:#3455D5;font-size:20px;font-weight:900;color:#fff !important;box-sizing:border-box;}
.btn_purchase .sale{position:absolute;left:20%;top:-14px;display:inline-block;padding:8px 10px;border-radius:50px;background-color:#E64949;color:#fff;font-weight:900;font-size:12px;line-height:1;}
.btn_purchase del{display:inline-block;padding:0 5px;color:rgba(255, 255, 255, .76);font-size:12px;font-weight:400/*text-decoration:line-through;*/}
.btn_purchase em{height:auto;vertical-align:middle;line-height:1;}

.square_radio_wrap{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 40px;}
.square_radio{display:inline-block;width:auto;height:100%}
.square_radio_wrap:not(.mini) .square_radio{flex:1;}
.square_radio input{display:none;}
.square_radio label{display:inline-flex;/*width:100px;*/width:100%;height:85px;border-radius:5px;align-items:center;justify-content:center;flex-direction:column;gap:4px;border:1px solid #DBDBDB;transition:background-color .2s ease;background:#fff;color:#000;font-size:16px;line-height:22px;font-weight:700;text-align:center}
.square_radio label span{font-size:11px;color:#686868}
.square_radio input:checked + label{border-color:#3455D5;}
.square_radio input:checked + label span{color:#fff;}
.square_radio_wrap.mini label{/*width:58px;*/height:55px;font-size:14px;}
.square_radio_wrap.mini .square_radio{width:calc(20% - 7px);}

.section_purchase{padding:70px 20px}

.section_how{background-color:#F1F5FF}
.section_how h4{margin-bottom:20px}
.section_how .num_list{display:inline-flex;align-items:center;/*justify-content:center;*/gap:20px;margin-top:40px;padding:16px 20px 16px;background:url('https://pic.neungyule.com/nebuildandgrow/mall/mobile/img/exam/line.svg') no-repeat 0 50%;}
.section_how .num_list > li{position:relative;display:flex;flex-shrink:0;width:185px;height:185px;padding-top:55px;align-items:center;/*justify-content:center;*/border-radius:50%;background-color:#fff;flex-direction:column;box-sizing:border-box;}
.section_how .num_list .num{position:absolute;right:0;top:0;display:flex;width:45px;height:45px;padding:0;align-items:center;justify-content:center;border-radius:50%;background-color:#3455D5;color:#fff;font-size:14px;font-weight:700;box-shadow:-3px 3px 6px rgba(0, 0, 0, .16);}
.section_how .num_list .tit{display:block;margin-bottom:10px;font-size:26px;font-weight:700;color:#000}
.section_how .num_list p{color:rgba(0, 0, 0, .7);line-height:18px;font-size:12px;text-align:center;letter-spacing:-.04em}

.tab_panel{display:none;text-align:center;}
.tab_panel.active{display:block;overflow-x:auto;/*padding:0 20px;*/scrollbar-width:thin;scrollbar-color: rgba(0, 0, 0, 0.4) transparent;}
.tab_panel .num_list{font-size:12px;line-height:18px;text-align:center}
.tab_panel .txt{font-size:12px;line-height:18px;text-align:center}
.tab_list{display:flex;gap:35px;justify-content:center}
.tab_list li button{position:relative;z-index:1;padding:0;color:#000;font-size:20px;background:none;border:0 none;}
.tab_list li.active button::after{content:'';position:absolute;left:-3px;bottom:-6px;z-index:-1;display:block;width:calc(100% + 6px);height:12px;background:#6AE8FC;border-radius:10px;transition:width .6s ease}

.section_notice{padding:70px 20px}
.section_notice .tit_notice{padding-left:30px;margin-bottom:40px;font-size:20px;font-weight:900;color:#000;background:url('https://pic.neungyule.com/nebuildandgrow/mall/mobile/img/exam/ico_alert_tri_black.svg') no-repeat 0 0 / 24px auto;}
.section_notice .tit{margin-bottom:15px;font-size:16px;font-weight:700;color:#000}
.section_notice ul:first-child{margin-bottom:40px}
.section_notice ul li{position:relative;padding-left:12px;color:#555;font-size:12px;line-height:1.6;word-break:keep-all}
.section_notice ul li:before{content:'';position:absolute;left:0;top:6px;display:inline-block;width:5px;height:5px;margin-right:5px;background-color:rgba(0, 0, 0, .38);border-radius:50%;}
.section_notice ul li + li{margin-top:4px}
.section_notice .txt_link{display:inline-block;padding-bottom:3px;margin-top:40px;font-size:12px;color:#000;font-weight:700;border-bottom:1px solid #000}


.pop_test_info{display:none;position:fixed;left:50%;top:50%;z-index:1001;width:1080px;transform:translate(-50%, -55%);}
.pop_test_info *{font:15px/1 'NanumSquareNeo', Dotum, 'Apple Gothic', sans-serif;}
.pop_test_info.active{transform:translate(-50%, -50%);transition:translate .2s ease}
.pop_test_info .tit{margin-bottom:45px;font-size:30px;font-weight:900;color:#fff;line-height:1.33;letter-spacing:-.04em}
.pop_test_info .pop_body{display:flex;}
.pop_test_info .pop_body > div{padding:6.9% 20px 6.9% 7.4%;box-sizing:border-box;}
.pop_test_info .form_left{width:600px;background-color:#3354D6}
.pop_test_info .form_left input[type="text"]{width:100%;padding:8px 0;border:0 none;border-bottom:1px solid #fff;background-color:transparent;color:#fff;box-shadow:none;-webkit-text-fill-color:white;}
.pop_test_info .form_left input[type="text"]::focus{color:#fff;background-color:transparent;}
.pop_test_info .form_left input[type="text"]::placeholder{color:rgba(255, 255, 255, .35);font-size:16px;font-weight:300}
.pop_test_info .form_right{flex:1;background-color:#313131}
.pop_test_info .grade_section_box{display:flex;margin-top:50px;flex-wrap:wrap;flex-direction:column;gap:10px;}
.pop_test_info .grade_section_box .grade_section{display:flex;gap:5px;}
.pop_test_info .grade_radio{display:inline-block;width:auto;height:100%}
.pop_test_info .grade_radio input{display:none;}
.pop_test_info .grade_radio label{display:inline-flex;width:70px;height:70px;border-radius:5px;align-items:center;justify-content:center;flex-direction:column;gap:4px;transition:background-color .2s ease;background:#fff;color:#000;font-size:14px;font-weight:700}
.pop_test_info .grade_radio label span{font-size:11px;color:#686868}
.pop_test_info .grade_radio input:checked + label{background:#000;color:#fff;}
.pop_test_info .grade_radio input:checked + label span{color:#fff;}
.pop_test_info .grade_radio .grade{display:block;}
.pop_test_info .exp_container{ position:relative;display:flex;align-items:center;}
.pop_test_info .progress_bar{position:absolute;left:15px;top:0;width:10px;height:100%;background:#818181;border-radius:5px;}
.pop_test_info .progress_bar .progress_bg{position:absolute;left:0;bottom:0;width:10px;background:#3354D6;border-radius:5px;transition:height .2s ease-in-out;}
.pop_test_info .progress_bar .progress_indicator{position:absolute;left:50%;top:100%;width:36px;height:36px;background:#3354D6 url('https://pic.neungyule.com/nebuildandgrow/mall/img/exam/ico_range_arr.svg') no-repeat 50% 50% / 8px auto;border-radius:50%;transform:translate(-50%, -50%);transition:top .2s ease-in-out;cursor:pointer}
.pop_test_info .exp_section{z-index:1;display:flex;margin-left:55px;flex-direction:column;gap:38px;}
.pop_test_info .exp_radio{ position:relative;display:flex;align-items:center;cursor:pointer;}
.pop_test_info .exp_radio input[type="radio"]{display:none;}
.pop_test_info .exp_radio input[type="radio"] + label{font-size:14px;color:#fff;}
.pop_test_info .exp_radio input[type="radio"]:checked + label{color:#6AE8FC;font-size:14px;}
.pop_test_info .exp_radio input[type="radio"]:checked ~ .progress_indicator{top:calc(16% + (100% / 6) * var(--index));}
.pop_test_info .btn{position:absolute;right:40px;bottom:40px;display:inline-block;width:190px;height:50px;line-height:50px;text-align:center;font-size:16px;color:#fff;font-weight:900;border-radius:10px;background:#3354D6}
.pop_test_info .btn_close{position:absolute;right:35px;top:35px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;text-indent:-9999px;font-size:0;background:none;border:0 none}
.pop_test_info .btn_close:before,
.pop_test_info .btn_close:after{content:'';position:absolute;height:32px;width:3px;background-color:#fff;border-radius:2px}
.pop_test_info .btn_close:before{transform:translate(0, 0) rotate(45deg);}
.pop_test_info .btn_close:after{transform:translate(0, 0) rotate(-45deg);}

.layer_pop_container{display:none;overflow-y:auto;position:fixed;left:0;bottom:0;z-index:2000;width:100%;height:100%;/*text-align:center;*/box-sizing:border-box;font-family:'NanumSquareNeo', Dotum, 'Apple Gothic', sans-serif}
.layer_pop_container .overlay{position:fixed;top:0;left:0;z-index:1001;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.7);}
.layer_pop_container .layer{overflow:auto;position:absolute;left:0;bottom:-110%;width:100%;max-height:85vh;border-radius:20px 20px 0 0;background-color:#fff;background-color:#fff;-webkit-transition:bottom .3s ease .2s;transition:bottom .3s ease .2s;box-sizing:border-box;}
.layer_pop_container.on .layer{bottom:0;}
.layer_pop_container .pop_cont{padding:50px 20px;}
.layer_pop_container .pop_tit{display:block;margin-bottom:20px;font-size:26px;font-weight:900;color:#000;text-align:center;line-height:1.2}
.layer_pop_container .pop_tit strong{font-weight:900;color:#3455D5;}
.layer_pop_container .txt{font-size:14px;line-height:22px;color:#555;text-align:center;}
.layer_pop_container .dot_list{display:inline-block;}
.layer_pop_container .dot_list li{position:relative;padding-left:10px;color:#444;font-size:12px;line-height:1.4}
.layer_pop_container .dot_list li + li{margin-top:5px;}
.layer_pop_container .dot_list li:before{content:'';position:absolute;left:0;top:6px;display:inline-block;width:4px;height:4px;border-radius:50%;background:rgba(0, 0, 0, .6)}
.layer_pop_container .dot_list li strong{color:#3455D5}
.layer_pop_container .btns{display:flex;}
.layer_pop_container .btns > button{flex:1;display:flex;align-items:center;justify-content:center;width:100%;height:66px;font-size:20px;font-weight:900;border:0 none}
.layer_pop_container .btns .btn_cancle{background-color:#000;color:#fff;}
.layer_pop_container .btns .btn_confirm{background-color:#3455D5;color:#fff;}

.pop_purchase .pop_cont{padding:0 20px}
.pop_purchase .btn_purchase{border-radius:0}
.pop_purchase .pop_header_close{height:50px;text-indent:-9999px;background:url('https://pic.neungyule.com/nebuildandgrow/mall/mobile/img/exam/ico_arr_down.svg') no-repeat 50% 20px / 12px auto}

.pop_extension{z-index:3000}



/*******  chart animation *********/
.line_chart .chart{position:relative;max-width:640px;width:100%;margin:0 auto;}
.line_chart .chart .bg{position:relative;z-index:1;width:100%;}
.line_chart .chart .line1{overflow:hidden;position:absolute;left:5px;bottom:5px;width:0;}
.line_chart .chart .line1 img{display:block;}
.line_chart .chart .line2{overflow:hidden;position:absolute;left:5px;bottom:5px;width:0;}
.line_chart .chart .line2 img{display:block;}
.line_chart .msg p{opacity:0;position:absolute;z-index:2;width:15.625%;}
.line_chart .msg p.msg1{left:3.125%;bottom:56%;}
.line_chart .msg p.msg2{left:18.75%;bottom:30.88%;}
.line_chart .msg p.msg3{left:43.125%;bottom:8.37%;}
.line_chart .msg p.msg4{left:65.625%;bottom:38.63%;}
.line_chart.animate .line1{animation:drawLine1 1.2s linear both}
.line_chart.animate .line2{animation:drawLine1 1.2s linear both .2s}
.line_chart.animate .msg p.msg1{animation:fadeInUp 0.3s ease both 0.4s}
.line_chart.animate .msg p.msg2{animation:fadeInDown 0.3s ease both 0.5s}
.line_chart.animate .msg p.msg3{animation:fadeInDown 0.3s ease both 0.8s}
.line_chart.animate .msg p.msg4{animation:fadeInUp 0.3s ease both 1s}
.radar_chart .radar_svg_wrap{max-width:640px;width:100%;margin:0 auto;}
.radar_chart .tit{margin-bottom:50px !important}
.radar_chart svg{overflow:visible;width:80%}
.radar_chart .grid {fill:none;stroke:rgba(0, 0, 0, .15);stroke-width: 0.5;}
.radar_chart .radar {z-index:1;fill:#3455d5;stroke:#3455d5;}
.radar_chart .label{fill: #000;font-size:14px;font-weight:700;text-anchor: middle;dominant-baseline: middle;}
.radar_chart .chart{margin-top:70px}

@keyframes drawLine1{
	0% {width:0}
	100% {width:100%}
}

@keyframes drawLine2{
	0% {opacity:0.2;}
	100% {opacity:1;}
}

@keyframes fadeInUp{
	0% {opacity:0;transform:translateY(10px)}
	100% {opacity:1;transform:translateY(0)}
}
@keyframes fadeInDown{
	0% {opacity:0;transform:translateY(-10px)}
	100% {opacity:1;transform:translateY(0)}
}

@media screen and (min-width:520px){
	.line_chart .chart .line1{left:14px}
	.line_chart .chart .line2{left:10px}
}