/*COMMON*/ .timer_text { width:100%; padding:0 5px 8px; text-align:center; color:#ccc; font-size:11px; letter-spacing:-1px; } .p_r { position: relative; } .evt_box { position: relative; max-width: 750px; margin: 0 auto; overflow: hidden; } .evt_wrap { position: relative; max-width: 750px; margin: 0 auto; overflow: hidden; } .pb10 { padding-bottom: 10%; } #quickTop { bottom: 11% !important; } /* ani */ .ani { position: absolute; } .cont01 .tit1 { top: 13.2%; left: 12.9%; width: 74%; } .cont01 .tit2 { top: 27.9%; left: 5.2%; width: 39.5%; } .cont01 .tit3 { top: 23%; left: 48.2%; width: 59.5%; } .cont01 .tit4 { top: 69.7%; left: 3%; width: 93.5%; } .cung_ani { animation: scale-50 0.35s 0.2s forwards cubic-bezier(0.3, 0.27, 0, 1.1); } @keyframes scale-50 { 0% { transform:scale(5); -webkit-transform:scale(5); opacity:0; } 100% { transform:scale(1); -webkit-transform:scale(1); opacity:1} } .cont02 .sys_txt { position: absolute; top: 37.05%; left: 50%; transform: translateX(-38%); font-size: 4.4vw; color: #000; background: #fff; padding-right: 10%; text-align: center; font-weight: 700; } .cont02 .sys_txt2 { position: absolute; top: 47%; left: 50%; transform: translateX(-50%); font-size: 2vw; color: #c6958a; background: #ffeae7; width: 90%; text-align: center; font-weight: 500; } /*LECT*/ .lect { background: #fff4dc; } .lect ul > li { position: relative; } .lect ul > li .disprice { position: absolute; right: 47%; top: 47.9%; font-size: 5.8vw; color: #acacac; letter-spacing: .02em; line-height: 1; } .lect ul > li .price { position: absolute; top: 41%; text-align: center; width: 100%; font-size: 10vw; font-weight: 700; letter-spacing: .02em; line-height: 1; } .lect ul > li.lect03 .price { color: #01ad96; } .lect ul > li.lect05 .price { color: #007eb0; top: 36%; } /* ÅÇ °øÅë */ .tab_area { position:relative; z-index:2; } .tab_area .tab_button::after { content:''; display:block; clear:both; } .tab_area .tab_button li { float:left; cursor: pointer; font-size:0; } .tab_area .tab_button[data-tab-num="3"] li { width:33.33%; background-size:300% !important; } .tab_area .tab_button[data-tab-num="3"] li:nth-of-type(2) { background-position-x:50%; } .tab_area .tab_button[data-tab-num="3"] li:nth-of-type(3) { background-position-x:100%; } .tab_area .tab_button[data-tab-num="4"] li:nth-of-type(2) { background-position-x:33.33%; } .tab_area .tab_button[data-tab-num="4"] li:nth-of-type(3) { background-position-x:66.66%; } .tab_area .tab_button[data-tab-num="4"] li:nth-of-type(4) { background-position-x:100%; } .tab_area .tab_button li.on { background-position-y:100% !important; } .tab_area .tab_cont { display:none; } .tab_area .tab_cont.on { display:block; } .cont04 { background: linear-gradient(to bottom, #01195f, #011655); } .cont04 .tab_area { padding: 0 3.5%; } .cont04 .tab_area .tab_button { width: 100%; display: flex; justify-content: space-between; } .cont04 .tab_area .tab_button li { width: 49.5%; height: 10vw; line-height: 10vw; background: #aecacb; color: #4c6079; font-size: 3.7vw; border-radius: 1vw 1vw 0 0; font-weight: 700; text-shadow: 0 0 #4c6079; letter-spacing: -0.2vw; text-align: center; } .cont04 .tab_area .tab_button li.on { background: #03e4ff; color: #00134a; text-shadow: 0 0 #00134a; } .cont04 .tab_area .tab_button li:nth-child(2).on { background: #03c0ff; color: #00134a; text-shadow: 0 0 #00134a; } .cont04 .tab_area .tab_cont { width: 99.5%; height: 75.5vw; border: 1.5px solid #03e4ff; border-radius: 0 0 1vw 1vw; background: #fff; overflow-x: hidden; box-sizing: border-box; } .cont04 .tab_area .tab_cont.tab2.on { border-color: #03c0ff; } .cont07 { background: linear-gradient(to bottom, #01195f, #011753); } .cont07 .tab_area { padding: 0 3.5%; } .cont07 .tab_area .tab_button { width: 100%; display: flex; justify-content: space-between; } .cont07 .tab_area .tab_button li { width: 33%; height: 12vw; line-height: 1.2; background: #aecacb; color: #4c6079; font-size: 3.5vw; border-radius: 1vw 1vw 0 0; font-weight: 700; text-shadow: 0 0 #4c6079; letter-spacing: -0.2vw; text-align: center; display: flex; justify-content: center; align-items: center; } .cont07 .tab_area .tab_button li.on { background: #03e4ff; color: #00134a; text-shadow: 0 0 #00134a; } .cont07 .tab_area .tab_button li:nth-child(2).on { background: #03c0ff; color: #00134a; text-shadow: 0 0 #00134a; } .cont07 .tab_area .tab_cont { width: 99.7%; height: 55vw; border: 1px solid #9eafbf; overflow: auto; box-sizing: border-box; } /* .cont07 .tab_area .tab_button li { padding-top: 14.5%; background:url('https://cdn.hackers.com/hackersjob_img/mpublic/images/event/2017/0202/re_221128/cont07_tab.png') no-repeat 0 0; } */ .cont08 { background: #fff; } .cont08 .book { padding: 0 4%; } .cont08 .book .scroll_box { height: 20vw; box-sizing: border-box; background: #f0f0f0; overflow-y: scroll; padding: 2%; font-size: 12px; line-height: 1.4; } .cont10 { padding-bottom: 15%; background: linear-gradient(to bottom, #00195c, #021148, #011b67); } .cont10 .v_wrap { border-radius: 10px; overflow: hidden; width: 92%; margin: 0 auto 4%; position: relative; padding-top: 51.9%; } .cont10 .v_wrap iframe { position: absolute; top: 0; } .cont10 .box { overflow-x: scroll; white-space: nowrap; margin: 0 4% 7%; } .cont10 .box a { margin-right: 2%; display: inline-block; width: 39%; } /* .cont10 .bx01 .bxslider li { width: 50%; margin: 0 !important; cursor: pointer; } */ .cont10 .cont10_sd { width: 100%; padding: 0 3%; background: #04135c; } .cont10 .bxslider-default { width: 100%; } .cont10 .bx-wrapper { max-width: 100% !important; } .cont10 .bxslider li { width: 100% !important; height: 50vw; background: #fff; border-radius: 1vw; padding: 5%; box-sizing: border-box; } .cont10 .bxslider li dl { letter-spacing: -0.3vw; } .cont10 .bxslider li dl dt { color: #0001ec; font-size: 3.5vw; font-weight: 700; text-align: left; } .cont10 .bxslider li dl dd { color: #222; font-size: 3.5vw; padding: 4% 0; line-height: 1.4; text-align: left; } .cont10 .bxslider li dl dd.bot { font-size: 3vw; display: flex; justify-content: space-between; } .cont10 .bxslider li dl dd span { color: #6799d2; } .cont10 .bxslider li dl dd .review_btn { padding: 1% 4%; background: #e0efff; border-radius: 3vw; font-weight: 700; } .cont10 .bx-wrapper .bx-pager .bx-pager-item .bx-pager-link.active { background: #14ffd6; } .cont10 .bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto { bottom: -9%; } .win_wrap { background:#3374e0; padding-bottom: 10%; } .cont12 .keyword { position: absolute; bottom: 0.5%; left: 9%; height: 7.5%; width: 55%; border: 0; } .board_box { position: relative; width: 100%; background: #ff691f; } .board_box .board_inner { width: 92%; margin: 0 auto; background: #fff; padding: 5%; box-sizing: border-box; } .board_box .table_area { /*position: absolute; top:45%; left:50%; transform:translateX(-50%); width:85%; */background: #fff; margin: 0 auto; } .board_box .e_table { text-align: center; } .board_box .e_table table { width: 100% } .board_box .e_table .t_color_purple { color:#6d03e5; } .board_box .e_table a.e_table_btn_blue { display:inline-block; background: #6d03e5; padding:3% 6%; color:#fff; border-radius: 5px; font-size:14px; margin-top:5%; margin-left:1%; margin-right:1%; } .board_box .e_table a.e_table_btn_gray { display:inline-block; background: #999; padding:3% 6%; color:#fff; border-radius: 5px; font-size:14px; margin-top:5%; margin-left:1%; margin-right:1%; } .board_box .e_table .num_comment { padding:5% 0 0 0; overflow:hidden; text-align: center } .board_box .e_table .num_comment li { margin: 0 1.5%; display:inline-block } .board_box .e_table .num_comment li img { vertical-align:middle; padding-bottom:2%; } .board_box .e_table .num_comment li a { font-size:12px; color:#000; } .board_box .e_table .num_comment li.on a { color:#000; font-weight:bold; } .board_box .e_table.list thead tr { border-bottom:2px solid #333; height:40px; } .board_box .e_table.list tbody tr { border-bottom:1px solid #ddd; height:40px; } .board_box .e_table.list thead tr td { font-size:13px; font-weight:bold; color:#565976 } .board_box .e_table.list tbody tr td { font-size:12px; font-weight:bold; color:#333; border-bottom:1px solid #ddd; } /* ÆäÀÌÁö */ .board_box .e_table.list .borad_prev, .board_box .e_table.list .borad_next { display:inline-block; width:10px; height:18px; margin-top: 10px; } .board_box .e_table.list .borad_prev { font-size:0; background: url(https://image.hackersjob.com/img/event/2019/0404/prev_img.jpg) no-repeat; vertical-align: 12px } .board_box .e_table.list .borad_next { font-size:0; background: url(https://image.hackersjob.com/img/event/2019/0404/next_img.jpg) no-repeat; vertical-align: 12px } .board_box .e_table.list ul { margin-top: 10px; } .board_box .e_table.list ul li { display: inline-block; font-size:15px; } /* POPUP */ .layer_bg { background:#000; opacity:0.5; position:fixed; top:0; left:0; width:100%; height:100%; display:none; } .layer_pop { position:fixed; z-index:9999; left:50%; top:50%; transform: translate(-50%,-50%); width: 90%; display:none; } .layer_pop .pop_close_btn { position:absolute; top:0px; right: 0; width: 40px; height: 40px; } .layer_pop .pop_img { display:none; position:relative; } .layer_pop .pop_img img { width: 100%; } /* .pop_img.type1 { width: 90%; } */ .pop_img.type1 .lazy_tab_area { padding: 0 4% 10%; box-sizing: border-box; background-color: #fff; border-radius: 0 0 1vw 1vw } .pop_img.type1 .lazy_tab_area .tab_button li { width: 25%; padding-top: 12%; } .pop_img.type1 .lazy_tab_area .tab_button li { background:url('//image.hackersjob.com/img/event/2020/0805/re_220520/pop01_tab.png') 0 0 no-repeat; background-size:400% !important; } .pop_img.type1 .lazy_tab_area .tab_button li:nth-of-type(2) { background-position-x:33.33%; } .pop_img.type1 .lazy_tab_area .tab_button li:nth-of-type(3) { background-position-x:66.66%; } .pop_img.type1 .lazy_tab_area .tab_button li:nth-of-type(4) { background-position-x:100%; } .pop_img.type1 .lazy_tab_area .tab_cont { height: 75vw; overflow-y: auto; border: 1px solid #ccc; } /*VODPLAY*/ .layer_mov_pop { display:none; position:fixed; top:0; left:0; z-index:101; } .layer_mov_pop .full_bg { width:100%; height:100%; background-color:rgba(0,0,0,0.9); position:fixed; top:0; left:0; z-index:-1 } .layer_mov_pop .layer_pop_vod { position: fixed; top: 10%; left:7%; width: 92%; } .layer_mov_pop .layer_pop_vod .movie_close { font-size:50px; color:#fff; position:absolute; top:-60px; right:5%; display:inline-block; cursor:pointer; } .bnr_bottom { position:fixed; bottom:0; left:0; width:100%; background:#FF5428; } .bnr_bottom .close { position:absolute; top:-25px; left: 3%; background:#1e1e1e; color:#fff; font-size:17px; width:25px; height:25px; line-height:19px; text-align: center; } .basis_text { display:none; width:80%; height:220px; overflow-y: scroll; padding:3%; border:1px solid #ddd; position:absolute; bottom:10%; left:10%; background-color:#fff; font-size:12px; box-sizing:border-box; } .winner_list li { width:150px; height:150px; padding-top:70px; background:url(//image.hackersjob.com/mobile/event/2018/0312/bg_winnder.png) no-repeat 0 0; background-size:150px auto; } .winner_list li .icon_company { width:80px; margin:0 auto; display:block; } .winner_list li img { width:100%; } .winner_list li dl { margin-top:15px; text-align:center; } .winner_list li dl dt { font-size:14px; color:#a5a5a5; font-weight:600 } .winner_list li dl dd { font-size:14px; } .winner_list li dl dd strong { display:block; margin:8px 0; } .cont12 { position: relative; } .cont12 .filebox { position: absolute; top:72.5%; left:10%; width:50%; background: #fff; height:4%; } .cont12 .filebox input { height:100%; border:0; font-size:3.5vw; } .banner div { width: 90%; margin: 5% auto; } .banner div img { border: 1px solid #000; } .book_list { background: #f6f6f6; } /*????????*/ .quick_right { position:absolute; right:1%; top:2.8%; z-index:101; width:20%; } .quick_right img { width:100%; } .dungdung { animation-name:dungdung; animation-duration: 2s; animation-iteration-count: infinite; animation-direction: normal; animation-timing-function: ease-in-out; animation-fill-mode: both; animation-delay: 1s; } .pager_wrap { text-align:center; overflow:hidden; } .pager_wrap a,.pager_wrap span { padding:0 1%; color:#aaa; } .pager_wrap ul,.pager_wrap ul li { display:inline-block; } .pager_wrap ul li a { padding:0 5px; color:#aaa; } .pager_wrap ul li.on a { display: inline-block; color:#5600cb; font-weight: 700; background: #f5f5f5; height: 19px; } @keyframes dungdung {0%, 100% { transform:translate(0,5px) } 50% { transform:translate(0,-5px) } } /*line_up*/ .line_up { text-align:center; margin:0 auto; } .line_up .book { background:#f0edff; margin:0 4.65%; padding:0 3% 10%; box-sizing:border-box; } @media all and (max-width:750px){ .con03 .text_area p { font-size: 4vw; } .con03 .text_area.price_5 b { font-size: 7vw; } } /*±Ù°Å¹®±¸ ÆË¾÷*/ .reason, .open_reason.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%); } .reason .close, .open_reason.reason .close { position: absolute; width:20px; height:20px; top:10px; right:10px; cursor: pointer; } .reason .close::before, .reason .close::after, .open_reason.reason .close::before, .open_reason.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, .open_reason.reason .close::after { transform: translate(-50%,-50%) rotate(-45deg); } .cont07 .reason { top: 49%; } /* īī¿À ¿ÀÇÂäÆÃ ·£µù¹è³Ê */ .kakao_bnr { position:fixed; top:105px; left:5%; width: 100px; z-index: 9999; } .kakao_bnr img { width:100% }