/* 공통 */
* { box-sizing: border-box } 
.event-wrap { overflow: hidden; width: 100%; } 
.inner_w { width: 2560px; position: relative; text-align: center; left: 50%; transform: translateX(-50%); margin: 0; } 
.inner { width: 1000px; margin: 0 auto; } 
.p_r { position: relative; } 
.p_c { position: absolute; left:50%; transform: translateX(-50%); } 
.p_a { position: absolute; } 
.footer { margin-top: 0 !important; } 

/***** 공통 *****/
.btn_wrap {background: none; border: none;}
.btn_wrap a {display: none;}
.btn_wrap a.active {display: block;}
.btn_wrap .prev {position: fixed; left: 0; top: 50%; transform: translateY(-50%);}
.btn_wrap .next {position: fixed; right: 0; top: 50%; transform: translateY(-50%);}

/***** main 페이지 *****/
.evt_guide {display: none;}
.evt_guide.on {display: block;}
.evt_main a {display: block; position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%);}

/***** test 페이지 *****/
.test_wrap {display: none; background: url('https://cdn.hackershrd.com/hrd/images/event/2025/0512/test_bg.jpg') 0 0 no-repeat #111; background-size: 100%; padding-bottom: 110px;}
.test_wrap.on {display: block;}
.test_wrap h4 {padding-top: 115px;}
.test_area > li {width: 100%; box-sizing: border-box; padding: 50px 100px; margin-bottom: 10px; background-color: #fff; border-radius: 25px;}
.test_area dl dt {font-size: 1.3rem; font-weight: bold; color: #222; margin-bottom: 20px;}
.test_area dl dd ul {display: flex; flex-wrap: wrap;}
.test01 .test_area dl dd li {margin-bottom: 15px; width: 35%;}
.test01 .test_area dl dd li:nth-last-of-type(1), .test_area dl dd li:nth-last-of-type(2) {margin-bottom: 0;}
.test01 .test_area dl dd li input[type="checkbox"] {width: 20px; height: 20px; margin-right: 15px; }
.test01 .test_area dl dd li label {font-size: 1.05rem; color: #444; vertical-align: bottom;}
.test01 .test_area dl dd li input[type="checkbox"]:checked + label {color: #20a3ff;}
.test01 .test_area dl dd li input[type="text"] {border: none; border-bottom: 2px solid #eaeaea; font-size: 0.95rem; margin-left: 10px;}
.test01 .test_area dl dd li input[type="text"]::placeholder {color: #c3c3c3;}

.test02 h4 {padding-top: 130px; margin-bottom: 25px;}
.test02 h4 .timer {position: absolute; left: 50%; top: 60px; transform: translateX(-50%); padding: 10px 35px; font-size: 1.2rem; font-weight: normal; color: #fff; background-color: #2c2c2c; border-radius: 10px;}
.test02 h4 .timer .time {font-weight: bold; margin-left: 20px; letter-spacing: 2px;}
.test02 h4 .progress_wrap {display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 25px;}
.test02 h4 .progress_wrap .progress_bar {width: 485px; height: 8px; border-radius: 10px; background-color: #5e5e5e; position: relative;}
.test02 h4 .progress_wrap .progress_bar .bar {display: block; width: 20%; height: 100%; border-radius: 10px; position: absolute; left: 0; top: 0; background: linear-gradient(to right, #ffba58, #ff5f18);}
.test02 h4 .progress_wrap .progress_per {font-size: 1.2rem; color: #fff; letter-spacing: 1px;}
.test02 .test_area {display: none;}
.test02 .test_area.on {display: block;}
.test02 .test_area dl dd ul {justify-content: center; gap: 10px;}
.test02 .test_area > li {padding: 55px 65px;}
.test02 .test_area label {display: block; width: 72px; height: 46px; background-color: #e8e8e8; color: #b2b2b2; border-radius: 12px; font-size: 1.2rem; text-align: center; line-height: 46px;}
.test02 .test_area input[type="radio"]:checked + label {background-color: #20a3ff; color: #fff;}

/***** result 페이지 *****/
.result_wrap {display: none; background: url('https://cdn.hackershrd.com/hrd/images/event/2025/0512/result_bg.jpg') 0 0 no-repeat #111; background-size: 100%; padding-bottom: 100px;}
.result_wrap.on {display: block;}
.result_wrap h4 span {position: absolute; right: 761px; top: 141px; font-size: 3.9rem; color: #20a3ff;}
.result01 h4 {padding-bottom: 15px;}
.graph {width: 580px; height: 580px; margin: 0 auto 35px; position: relative;}
.graph canvas {width: 100% !important; height: 100% !important;}
.graph .score_area {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;}
.graph .score_area img {width: 75%;}
.graph .score_area .score {font-size: 3rem; font-weight: bold; color: #fff; margin-top: 3px;}
.type {width: 960px; height: 540px; border-radius: 25px; box-sizing: border-box; padding: 30px 60px; margin: 0 auto; background-color: #303030;}
.type .type_txt_wrap {background-color: #3d3d3d; color: #fff; padding: 25px 0; border-radius: 12px; text-align: center; font-size: 1.15rem; letter-spacing: 0.01px; position: relative;}
.type .type_txt_wrap::after {content: ''; display: inline-block; width: 22px; height: 22px; background: url('https://cdn.hackershrd.com/hrd/images/event/2025/0512/emoticon.png') 0 0 no-repeat; background-size: 100% 100%; position: absolute; top: 48%; transform: translateY(-50%); margin-left: 4px;}
.type .bxslider-default .bx-controls .bx-pager {text-align: center; bottom: -80px; z-index: 30 !important;}
.type .bxslider-default .bx-pager .bx-pager-item a {background: #414141; width: 12px; height: 12px; border-radius: 12px; margin-right: 10px;}
.type .bx-wrapper .bx-pager.bx-default-pager a:hover, .type .bx-wrapper .bx-pager.bx-default-pager a.active {background: #fff;}
.type .bxslider-default .bx-controls .bx-controls-direction {top: unset; bottom: -108px; z-index: 31 !important;}
.type .bx-wrapper .bx-controls-direction a {width: 13px; height: 21px; background: url('https://cdn.hackershrd.com/hrd/images/event/2025/0512/prev_w.png') 0 0 no-repeat; background-size: 100% 100%;}
.type .bx-wrapper .bx-prev {left: 50%; transform: translateX(-50%); margin-left: -105px;}
.type .bx-wrapper .bx-next {right: 50%; transform: translateX(-50%) rotate(180deg); margin-right: -105px;}

.result02 h4, .result03 h4 {text-align: center;}
.result_wrap .lect_area {width: 755px; margin: 1rem auto 0;}
.result_wrap .lect_area h5 {text-align: center; margin-bottom: 30px; font-size: 2.5rem; color: #fff;}
.result_wrap .lect_area .sdbox {width: 100%;}
.result_wrap .lect_area .sdbox .lect_list {display: flex; flex-wrap: wrap;}
.result_wrap .lect_area .sdbox .lect_list li {width: 227px; margin-bottom: 40px; margin-right: 36px;}
.result_wrap .lect_area .sdbox .lect_list li:nth-child(3n) {margin-right: 0;}
.result_wrap .lect_area .sdbox .lect_list li a {display: block; width: 100%;}
.result_wrap .lect_area .sdbox .lect_list li .img_area {display: block; width: 100%; height: 143px; border-radius: 25px; border: 2px solid #8d8a74; position: relative;}
.result_wrap .lect_area .sdbox .lect_list li .img_area::after {content: ''; display: block; width: 35px; height: 40px; background: url('https://cdn.hackershrd.com/hrd/images/event/2025/0512/cursor.png') 0 0 no-repeat; background-size: 100% 100%; position: absolute; right: 13px; bottom: -13px;}
.result_wrap .lect_area .sdbox .lect_list li .txt_area {display: block; color: #fff; margin-top: 20px;}
.result_wrap .lect_area .sdbox .lect_list li .txt_area strong {display: block; font-size: 1.25rem; margin-bottom: 10px;}
.result_wrap .lect_area .sdbox .lect_list li .txt_area span {font-size: 1rem; line-height: 1.5;}
.result_wrap .lect_area .sdbox .bxslider-default .bx-controls .bx-pager {text-align: center; bottom: -20px; z-index: 30 !important;}
.result_wrap .lect_area .sdbox .bxslider-default .bx-pager .bx-pager-item a {background: #414141; width: 12px; height: 12px; border-radius: 12px; margin-right: 10px;}
.result_wrap .lect_area .sdbox .bx-wrapper .bx-pager.bx-default-pager a:hover, .result_wrap .lect_area .sdbox .bx-wrapper .bx-pager.bx-default-pager a.active {background: #fff;}
.result_wrap .lect_area .sdbox .bxslider-default .bx-controls .bx-controls-direction {top: unset; bottom: -48px; z-index: 31 !important;}
.result_wrap .lect_area .sdbox .bx-wrapper .bx-controls-direction a {width: 13px; height: 21px; background: url('https://cdn.hackershrd.com/hrd/images/event/2025/0512/prev_w.png') 0 0 no-repeat; background-size: 100% 100%;}
.result_wrap .lect_area .sdbox .bx-wrapper .bx-prev {left: 50%; transform: translateX(-50%); margin-left: -105px;}
.result_wrap .lect_area .sdbox .bx-wrapper .bx-next {right: 50%; transform: translateX(-50%) rotate(180deg); margin-right: -105px;}

.pop_wrap {display: none; width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 100;}
.pop_wrap.active {display: block;}
.pop_wrap .bg {width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: absolute; left: 0; top: 0; display: block;}
.pop_wrap .pop_cont {max-width: 630px; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);}

.bnr_wrap {position: fixed; right: 65px; top: 36%; transform: translateY(-50%); width: 145px; display: none;}
.bnr_wrap.active {display: block;}
.bnr_wrap img {width: 100%;}