/* common */
.evt_wrap { width:100%; margin:0 auto; overflow: hidden;} 
.evt_wrap img { width:100%; display:block; } 
.evt_wrap input[type="image"] { width:100%; display:block; } 
:focus { outline: none; } 
.pos_r { position: relative; } 
.fc_red { color:#FF0000; } 
.pos_center { position: absolute; left: 50%; transform: translateX(-50%); } 

.con01 { position:relative } 
.con01 .cta_btn{position: absolute; top: 81%; left: 50%; transform: translateX(-50%); width: 82%;}

/* 퀴즈 */
.quiz_box { display:none; position: relative; padding-top:8vw;} 
.quiz_box #quizForm { position:absolute; top:65%; left:10%; width:80%; height:40%; } 
.quiz_box #quizForm button { width:100%; height:29%; margin:0 auto; font-size:17px; font-weight:bold; white-space:normal; word-break:keep-all; line-height:1.8; display:inline-block; color: #222; background: #fff; border: 2px solid #000; border-radius: 15px; margin-bottom:3%; } 

.prev_btn { display: none; position: absolute; top: 10%; left: 5%; width: 28%; } 

.quiz_nav { position: absolute; top:1%; left:5%; width:90%; } 
.quiz_nav ul.step_bar { width:100%; margin: 0 auto; float:left; } 
.quiz_nav ul.step_bar:after { content:""; display:block; clear:both; } 
.quiz_nav ul.step_bar li { float:left; position:relative; width:8.333333%; text-align:center; height:10px; font-size:0; text-indent:-99999px; border-box; background:#d1d4e2; } 
.quiz_nav ul.step_bar li span { display:none; font-size:17px; } 
.quiz_nav ul.step_bar li img { margin-top:-118px; } 
.quiz_nav ul.step_bar li:first-child { border-radius:5px 0 0 5px; } 
.quiz_nav ul.step_bar li:last-child { border-radius:0 5px 5px 0; } 
.quiz_nav ul.step_bar li.bg, .quiz_nav ul.step_bar li.on { background-color:#58b97c; z-index:1; } 

.now_num { display:inline-block; float:left; font-size: 1.25rem; color:#58b97c; font-weight:bold; margin-bottom:5px; } 
.fin_num { display:inline-block; float:right; font-size: 1.25rem;color:#58b97c; font-weight:bold; margin-bottom:5px; } 

.all_quiz_wrap, .all_quiz_wrap ul { width:100%; height:100%; } 
.all_quiz_wrap ul li { display:none; height:100%; } 
.all_quiz_wrap ul li.on { display:block; } 

/* 탭 */
.sub02 .slide_box .bx-wrapper .bx-controls-direction a{background: url('https://cdn.hackersut.com/m/img/event/2025/10/0100/bx_btn.png')no-repeat; background-size: 200%; width: 54px; height: 56px; top:109%;}
.sub02 .slide_box .bx-wrapper .bx-controls-direction a.bx-next{background-position-x: 100%; right:20%;} 
.sub02 .slide_box .bx-wrapper .bx-controls-direction a.bx-prev{left:20%;} 
.sub02 .slide_box .bx-wrapper .bx-viewport .bxslider li{width: 400px;}
.sub02 .slide_box{position: absolute; top: 62%; left: 50%; transform: translateX(-50%); width: 65%;}
.sub02 .tab_area { position: absolute; left: 50%; transform: translateX(-50%); top: 26.6%; width: 90%; } 
.sub02 .tab_area ul { width: 100%; display: flex; justify-content: space-between; } 
.sub02 .tab_area ul li {width: 33.33%; height: 60px; display: flex; justify-content: center; align-items: center;  border: 2px solid #000; text-align: center; font-size: 14px; border-radius: 15px 15px 0 0; color: #414141; background: #000; font-weight: 700; } 
.sub02 .tab_area ul li.active { background: #057582; color: #fff; } 
.sub02 .tab_area .tab_con { display: none; } 
.sub02 .tab_area .tab_con.active { display:block; } 

/* */

.sub03 { position: relative; } 
.sub03 .slide_box { top:26%; width: 86%; } 
.sub03 .slide_box .bx-wrapper .bx-pager { bottom: -37px;; } 
.sub03 .slide_box .bx-wrapper .bx-pager .bx-pager-item .bx-pager-link { background: #20bfd7; width: 20px; height: 20px; border-radius: 30px; } 
.sub03 .slide_box .bx-wrapper .bx-pager .bx-pager-item .bx-pager-link.active { background: #a9d5de; width: 30px; } 

.sub04 p { font-size: 0; margin: 1.25rem auto; text-align: center; } 
.sub04 p img { width: 60%; margin: 0 auto; } 
.sub04 .bridge{width: 1vw; max-width: 10px; height: 50vw; max-height: 340px; background: #f2f2f2; position: absolute; top: 0px; left: 50%; transform: translateX(-50%); z-index: 2;}
.sub04 .t_slide {position: absolute; top: 1%; left: 50%; transform: translateX(-50%); width: 82%;}
.sub04 .t_slide li{width: 45%;}
.sub04 .t_slide li img{border-radius: 10px;}
.sub04 .t_slide .bx-controls .bx-controls-direction a { top:112%; width: 9vw; height: 9vw; max-width: 54px; max-height: 54px; left: 50%; transform: translateX(-50%); background: url('https://cdn.hackersut.com/m/img/event/2025/10/0100/bx_btn.png')no-repeat; background-size: 200%; z-index: 1; border-radius: 24px;}
.sub04 .t_slide .bx-controls .bx-controls-direction a.bx-prev { margin-left: -30px; } 
.sub04 .t_slide .bx-controls .bx-controls-direction a.bx-next { margin-left: 30px; background-position-x: 100%; } 

.sub04 .vod_list { width: 90%; margin: 0 auto 40px; } 
.sub04 .vod_list li { border-radius: 10px; } 
.sub04 .vod_list li img { border-radius: 10px; } 
.sub04 .vod_list:nth-of-type(2) { margin-bottom: 80px; } 

.sub04 .vod_list .bx-wrapper .bx-controls-direction a { position: absolute; width: 8%; height: 0; z-index: 1; padding-top: 10%; background: url('https://cdn.hackersut.com/m/img/event/2025/10/0100/bx_btn.png') no-repeat 0 0/200%; } 
.sub04 .vod_list .bx-wrapper .bx-controls-direction a.bx-prev { left: -6%;}
.sub04 .vod_list .bx-wrapper .bx-controls-direction a.bx-next { right: -5%;     background-position-x: 100%;}

.con03 { position: relative; display:none; } 
.con03 .loading_img { position:absolute; left:43%; top:58%; width:14%; } 

.con04 {display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 112;} 
.con04 .bg{width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.5);} 
.con04 .user_name { position:absolute; top:16%; left:10%; width:20%; text-align:center; font-size:1em; } 
.con04 .con04_pop {width: 120%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.con04 .con04_pop .pop_img{width: 70%; margin: 0 auto;} 

.con06 { position:relative; } 
.con06 .con06_pop { position:absolute; top:37%; left:0; width:100%; height:0; overflow: hidden; } 
.notice { display: none; } 
.pop_graph { position:absolute; top: 38%; left: 5%; width: 89%; font-size:1em } 
.pop_graph tr th { padding:5px; } 
.pop_graph tr th:nth-child(1) { text-align:right; padding-right:5px; } 
.pop_graph tr th:nth-child(2) { text-align:left; padding-left:5px; } 
.pop_graph tr td { padding:5px 1px; } 

#event_download { position: absolute; overflow: hidden; } 

@media (max-width:339px){
 .pop_graph { font-size:.5em; } 
 .pop_graph tr th, .pop_graph tr td { padding:1px; } 
 .con03 .form_desc { font-size:19px; margin-top:-10px; } 
 .quiz_box #quizForm button { font-size:13px; line-height: 1.5; } 
 }
@media (min-width:340px) and (max-width:399px){
 .pop_graph { font-size:.8em; } 
 .pop_graph tr th, .pop_graph tr td { padding:2px; } 
 .quiz_box #quizForm button { font-size:15px; } 
 }
@media (min-width:400px) and (max-width:479px){
 .pop_graph { font-size:.8em; } 
 .pop_graph tr th, .pop_graph tr td { padding:2px; } 
 }
@media (min-width:480px) and (max-width:640px){
 .con03 .form_desc { font-size:30px; } 
 }
@media (min-width:641px){
 .con03 .form_desc { font-size:34px; } 
 }

/* 소문내기단 */
.con06 { width:100%; padding-bottom:5%; background-color:#1dff19; } 
.con06 .notice_btn { display: block; font-size: 16px; color: #000; background: #3ab236; text-align: center; width: 90%; margin: 0 auto; border-radius: 10px; letter-spacing: -.05em; font-weight: 700; letter-spacing: -.04em; padding: 2% 0; } 
.con_events { position:relative; } 
.con_events .event_input { width: 50.5%; height: 3.5%; position: absolute; left: 11.5%; top: 89.9%; } 
.con_events .event_input input { width:100%; height:100%; border:none; outline:none; background:#fff; text-indent:5px } 

.con06_bottom .text_col { padding:0 5%; color:#000; font-size:13px; word-break: keep-all; } 
.text_area { position:relative; display:none; } 
.text_area a { width:28%; height:13%; position:absolute; left:63%; bottom:16%; } 
#le_pop2 { width:100%; height:0; overflow:hidden; position: fixed; left: 0; top: 0; z-index:99; } 
#le_pop3 { width: 90%; position: fixed; left: 5%; top: 10px; height:0; z-index:99; max-width:400px; overflow:hidden; } 
#le_pop3 div { position:absolute; top:55%; left:0; font-size:16px; width:100%; text-align:center; } 

.user_desc { display: block; width: 90%; line-height: 2.9em; letter-spacing: -.04em; text-align: center; margin: 0 auto; background-color: #0dd69c; color: #000; font-weight: bold; } 
.input_po { width:90%; margin:4% auto; color:#000 } 
.desc_box { width:87%; margin:0 auto 4%; background-color:#80ffd9; padding:3%; display:block; font-size: 12px; height: 16vh; overflow-y: scroll; } 


.popup { display:none; z-index:9; position:fixed; top:0; left:0; } 
.popup .popup_con { width:100%; position:fixed; left:0%; top:10px; } 
.popup .popup_dim { width:100%; height:100%; background:rgba(0,0,0,.3); position:fixed; top:0; left:0; } 
.popup .popup_clo { background:#4b4a74; color:#fff; font-size:30px; padding:10px; float:right; } 
.popup .pop_quiz_time { font-size:30px; font-weight:bold; position:absolute; top:15%; left:59%; color:#2f2e57; } 
.popup .pop_quiz_form { position:absolute; bottom:9%; right:2%; width:50% } 
.popup .pop_quiz_input { border:1px solid #dadada; width:70%; height:24px; } 
.popup .pop_quiz_btn { width:20%; height:24px; color:#fff; background:#fb3f4c; border:none; font-size:14px; font-weight:bold; } 

.con07 { background:#333; padding:4%; color:#fff; font-size:11px; line-height:1.8; } 
.con07 a { color:#fff; text-decoration:underline } 


/* 근거문구 */
.reason { position: absolute; width:95%; top:8%; left:50%; padding:5%; box-sizing: border-box; background:rgba(0,0,0,0.85); color:rgba(255,255,255,0.7); text-align: left; font-size:12px; letter-spacing: -0.04em; display:none; transform: translateX(-50%); z-index: 99; } 
.reason .close { position: absolute; width:20px; height:20px; top:10px; right:10px; cursor: pointer; } 
.reason .close::before, .reason .close::after { content:''; display:block; width:100%; height:1px; background:rgba(255,255,255,0.7); position: absolute; top:50%; left:50%; transform: translate(-50%,-50%) rotate(45deg); } 
.reason .close::after { transform: translate(-50%,-50%) rotate(-45deg); } 

/* bottom_ban */
.bt_ban { position:fixed; bottom:0; left:50%; transform: translateX(-50%); width:100%; max-width: 750px; z-index: 99; } 
.bt_ban a { display: block; font-size: 0; width: 90%; margin: 0 auto;; } 
.bt_ban img { width: 100%; } 

.floating_bnr { position: fixed; bottom:0; width:100%; z-index: 10; display: none;}
.floating_bnr.active {display:block;}


/*영상 팝업*/
.layer_mov_pop, .layer_mov_pop2 {display:none; position:fixed; top:50%; left:50%;transform: translate(-50%,-50%);z-index:9999;width: 80%; z-index: 55;}
.layer_mov_pop video, .layer_mov_pop2 video{width: 100%;height: 100%;}
.full_bg{width:100%; height:100%; background-color:rgba(0,0,0,0.9); position:fixed; top:0; left:0;z-index: 3; display: none;}
.layer_mov_pop .layer_pop_vod .movie_close, .layer_mov_pop2 .layer_pop_vod .movie_close{font-size:50px; color:#fff; position:absolute; top:-60px; right:0; display:inline-block; cursor:pointer;}
.layer_mov_pop2 iframe{width: 100%;}


@media (min-width:320px) and (max-width:384px){
 html{ font-size:10px } 
 }
@media (min-width:385px) and (max-width:416px){
 html{ font-size:10px} 
 }
@media (min-width:417px) and (max-width:448px){
 html{ font-size:12px } 
 }
@media (min-width:449px) and (max-width:480px){
 html{ font-size:12px } 
 }
@media (min-width:481px) and (max-width:512px){
 html{ font-size:14px } 
 }
@media (min-width:513px){
 html{ font-size:16px} 
 }

@media all and (max-width:640px) { } 


.url_pop{display: none; position: fixed; top:0%; left:0%; z-index: 999; width: 100%; height: 100%;}
.url_pop .bg{width: 100%; height: 100%; background-color:rgba(0,0,0,0.4); position: absolute; top:0; left:0; z-index:-1}
.url_pop img{transform: translateY(50%);}
.url_pop .close_pop{display: block;position: absolute; top: 24%; right: 46%; width: 10vw; height: 10vw; z-index: 99;}