@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");

body,
html {-webkit-text-size-adjust: none;}
body {font-family: "Pretendard Variable", "Malgun Gothic", "맑은 고딕", sans-serif;}
footer {margin-top:0;}

/* ========== global  ========== */
:root {
    --base-width:760;
    --unit:calc(100vw / var(--base-width));

    --size-120:calc(100* var(--unit));
    --size-100:calc(100* var(--unit));
    --size-80:calc(80* var(--unit));
    --size-60:calc(60* var(--unit));
    --size-58:calc(58* var(--unit));
    --size-50:calc(50* var(--unit));
    --size-40:calc(40* var(--unit));
    --size-30:calc(30* var(--unit));
    --size-20:calc(20* var(--unit));
    --size-10:calc(10* var(--unit));
    --ft-size-26:calc(26* var(--unit));
    --ft-size-24:calc(24* var(--unit));
}

.brandPromo {position:relative; min-width:320px;}
.brandPromo * {box-sizing:border-box;}
.brandPromo section {position:relative; -webkit-text-size-adjust:none;}
.brandPromo .con_area {position:relative; width:100%;}
.brandPromo .inner {position:relative; padding:0 var(--size-40); margin:0 auto;}
.brandPromo .tit_wrap,
.brandPromo .img_wrap {position:relative; text-align:center; margin:0 auto;}
.brandPromo .img_wrap img {display:block; max-width:100%;}
.brandPromo .btn_wrap {padding:0 var(--size-58); text-align:center;}

/* fixed menu */
.quick_menu {position:relative; z-index:1000; background:#fff;}
.quick_menu.is-fixed {position:fixed; top:0; left:0; right:0;}
.quick_menu ul {display:flex; gap:1px; width:100%;}
.quick_menu li {flex:1; display:flex; align-items:center; text-align:center; position:relative; background:#002ED9;}
.quick_menu li.active::after {content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:#FFE451;}
.quick_menu li a {display:block; width:100%; padding:2.63vw 1.97vw; font-size:clamp(16px, var(--ft-size-24), 24px); line-height:1.2; color:#fff; font-weight:bold;}
.quick_menu li.active a {color:#ff0;}

/* text */
.sr-only {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}

.nt_txt {margin-top:var(--size-20); line-height:1; font-size:2.89vw; font-weight:500; color:#222; text-align:center;}

/* button */
.btn_comm {display:inline-block; width:calc(450* var(--unit)); height:calc(77* var(--unit)); line-height:calc(77* var(--unit)); font-size:calc(32* var(--unit)); font-weight:800; color:#fff; text-align:center; background:#222; border-radius:var(--size-10);}
.btn_comm::after {display:inline-block; width:var(--size-10); height:calc(16* var(--unit)); margin-left:var(--size-10); background:url("//s3.unistudy.co.kr/images/mobile/event/videoContest/ic_btn_arrow.png") no-repeat 0 / 100%; content:'';}

/* PC version */
.pc-more_btn {padding:1.3rem 1rem; background-color:#fff; text-align:center;}
.pc-more_btn a {display:block; padding:1rem 0; font-weight:bold; background:#f5f5f5;}
.pc-more_btn .btn_box1 {overflow:hidden; display:inline-block; background-color:#fff; min-width:6.1rem;
    padding:0.5rem 0.8rem 0.4rem; border: 0.1rem solid #696e7a; color: #3f3f3f; text-align:center;  vertical-align:middle;}


/* ========== contents  ========== */
/* cont */
#cont1, #cont2, #cont3, #cont4 {padding-bottom:var(--size-120);}

/* top title */
#cont0 {background:#325BF2;}

/* timer */
.dday_wp {width:100%; padding:var(--size-20) 0; text-align:center; background:rgba(0, 0, 0, 0.5); border-radius:var(--size-20);}
.dday_wp * {line-height:1;}
.dday_wp p {font-weight:800; color:#5dfffd;}
.dday_wp .dday {display:flex; justify-content:center; align-items:center; overflow:hidden; text-align:center;}
.dday_wp .dday li {display:inline-block; position:relative; text-align:left; vertical-align:middle;  font-size:0;}
.dday_wp .dday [id^="gettime_"] {
    min-width: 55px;
    min-width: 7.237vw;
    margin-left: 10px;
    margin-left: 1.316vw;
    text-align: center;
}
.dday_wp .dday #gettime_d {margin-left:0;}
.dday_wp .dday #gettime_d .txt {margin-right:var(--size-10); font-weight:800; color:#5dfffd;}
.dday_wp .dday #gettime_s {margin-right:0;}
.dday_wp .dday li span {display:inline-block; font-size:var(--size-40); font-weight:800; color:#5dfffd; text-align:center;}
.dday_wp .dday .txt { font-size:var(--size-40); font-weight:400; color:#fff;}
.dday_wp .dday .colon {display:inline-block; margin-right:0; font-size:var(--size-40); font-weight:400; color:#5dfffd;}
.dday_wp .dday #gettime_n {margin-left:0;}

/* cont1 */
#cont1 {background:#F3F8FA;}

.contest_info dl {}
.contest_info dt {width:calc(208* var(--unit)); height:calc(46* var(--unit)); margin:var(--size-50) 0 var(--size-30); line-height:calc(46* var(--unit)); font-size:clamp(18px, var(--size-30), 30px); font-weight:700; color:#fff; text-align:center; background:#000;}
.contest_info dd * {line-height:1.3; font-size:var(--ft-size-26); font-weight:400;}
.contest_info dd strong {font-size:clamp(16px, calc(22* var(--unit)), 22px); font-weight:700;}

.contest_info .float {display:flex; flex-wrap:wrap; gap:2.63vw;}
.contest_info .float dd {margin:var(--size-50) 0 var(--size-30); line-height:calc(46* var(--unit));}

/* 텍스트 리스트 스타일 */
.bullet_list {margin-top:var(--size-10);}
.bullet_list li {position:relative; padding-left:calc(12* var(--unit)); margin-bottom:calc(4* var(--unit)); font-size:calc(22* var(--unit)); color:rgba(0, 0, 0, .5);}
.bullet_list li::before {content: "-"; position:absolute; left:0; top:0;}

/* 테이블 스타일 */
.info_table {border-top:1px solid #000; border-bottom:1px solid #000;}
.info_table th,
.info_table td {padding:var(--size-20); text-align:center; color:#000; border:none; border-left:1px solid #000;background:none;}
.info_table th:first-child,
.info_table td:first-child {border-left:none;}
.info_table th {font-size:var(--ft-size-26); font-weight:700; background:#C1EAF7; border-bottom:1px solid #000;}
.info_table td {font-size:var(--ft-size-24); font-weight:500;}
.info_table tbody tr {border-bottom:1px solid #000;}
.info_table tbody tr:last-child {border-bottom:none;}
.info_table tbody th {border-right:1px solid #000;}

/* 수상혜택 */
.prize_grid {display:flex; flex-wrap:wrap; column-gap:var(--size-20); row-gap:calc(12* var(--unit)); column-gap:var(--size-30);}
.prize_card {flex: 1 1 40%; position:relative; padding:var(--size-60) 0 var(--size-20); text-align:center; background:#fff; border-radius:var(--size-10); overflow:hidden;}
.prize_card .badge {display:inline-block; position:absolute; top:0; left:0; right:0; height:var(--size-40); margin:0 auto; line-height:var(--size-40); font-size:var(--size-20); font-weight:700; color:#fff; white-space:nowrap;}
.prize_card.t1 .badge {background-color:#2456E8;}
.prize_card.t2 .badge {background-color:#319795;}
.prize_card.t3 .badge {background-color:#3182ce;}
.prize_card.t4 .badge {background-color:#a0aec0;}

.prize_card .money {font-size:var(--ft-size-24); font-weight:700;}

/* cont2 */
#cont2 {background:#66C6F8;}

#cont2 .btn_wrap {display:flex; flex-wrap:wrap; justify-content:center; gap:var(--size-30);}
#cont2 .btn_comm {display:inline-flex; align-items:center; position:relative; width:100%; height:calc(93* var(--unit)); padding:0 var(--size-20); font-size:var(--size-30); font-weight:700; background:#fff; border-radius:calc(44* var(--unit));}
#cont2 .btn_comm:nth-child(1) {color:#2456e8; border:2px solid #0779FF;}
#cont2 .btn_comm:nth-child(2) {color:#00AE9C; border:2px solid #00AE9C;}
#cont2 .btn_comm:nth-child(3) {justify-content:center; height:calc(78* var(--unit)); background:#007bc9; color:#fff; border-radius:calc(39* var(--unit));}

#cont2 .btn_comm:nth-child(1)::after {content:''; display:block; position:absolute; right:var(--size-30); width:calc(38* var(--unit)); height:var(--size-30); background:url("//s3.unistudy.co.kr/images/mobile/event/videoContest/con02_arrow01.png") no-repeat 0 / 100%;}
#cont2 .btn_comm:nth-child(2)::after {content:''; display:block; position:absolute; right:var(--size-30); width:calc(38* var(--unit)); height:var(--size-30); background:url("//s3.unistudy.co.kr/images/mobile/event/videoContest/con02_arrow02.png") no-repeat 0 / 100%;}

#cont2 .btn_comm .label {display:inline-block; width:calc(100* var(--unit)); height:calc(60* var(--unit)); margin-right:var(--ft-size-24); line-height:calc(60* var(--unit)); font-size:var(--ft-size-26); font-weight:bold; color:#fff; text-align:center; border-radius:var(--size-30);}
#cont2 .btn_comm:nth-child(1) .label {background:#2456E8;}
#cont2 .btn_comm:nth-child(2) .label {background:#00AE9C;}

#cont2 .btn_comm.done {color:#fff; background:rgba(0, 0, 0, .5); border:none;}
#cont2 .btn_comm.done::after {display:none;}
#cont2 .btn_comm.done .label {background:#fff; color:#000;}

/* cont3 */
#cont3 {background:#EDEBEB;}

/* FAQ toggle */
.faq_container {}
.faq_section {margin-bottom:20px; background:#fff; border-radius:8px;}

/* FAQ : 타이틀 */
.faq_title_btn {display:flex; justify-content:center; align-items:center; width:100%; height:calc(65* var(--unit)); font-size:var(--size-30); font-weight:500; color:#fff; background:#333; border-radius:1.05vw;}
.faq_title_btn .arrow {margin:0.66vw 0 0 1.32vw; font-size:2.11vw; transition:transform 0.3s ease;}
.faq_title_btn.is_active .arrow {transform:rotate(180deg);}

/* FAQ 내용 */
.faq_content_wrap {padding:0 var(--size-30);}

.faq_ct .faq_item {padding:var(--size-40) 0; text-align:left; border-bottom:1px solid rgba(34, 34, 34, .2); }
.faq_ct .faq_item * {color:#222; word-break:keep-all; word-wrap:break-word;}
.faq_ct .faq_item:last-child {border-bottom:none;}
.faq_ct .faq_item .question {margin-left:calc(34* var(--unit)); line-height:calc(36* var(--unit)); font-size:calc(28* var(--unit)); font-weight:700; color:#325bf2; text-indent:calc(-34* var(--unit));}
.faq_ct .faq_item .answer {padding-left:var(--size-40); margin-top:var(--size-10); margin-left:var(--size-30); line-height:4.08vw; font-size:var(--ft-size-26); font-weight:500; text-indent:calc(-1*var(--size-30));}
.faq_ct .faq_item .question::before {content:'Q.';}
.faq_ct .faq_item .answer::before {content:'A.'; font-weight:700;}
.faq_ct .faq_item .answer em {font-weight:700;}

/* cont4 */
#cont4 {background:#2D47D1;}
#cont4 .event_box {padding:var(--size-40) var(--size-50); background:#2840BC; border-radius:var(--size-30);}
#cont4 .gift_wrap {margin-bottom:calc(47* var(--unit));}
#cont4 .gift_wrap img {width:calc(405* var(--unit)); height:calc(275* var(--unit)); margin:0 auto;}

/* 이벤트 기간 */
.list_period {display:inline-grid; grid-template-columns:calc(150* var(--unit)) 1fr; gap:var(--size-10);  align-items:flex-start;}
.list_period dt,
.list_period dd {font-size:var(--ft-size-26); font-weight:400; color:#fff;}
.list_period dt {padding:calc(3* var(--unit)) 0; text-align:center; vertical-align:middle; background:rgba(0, 0, 0, .5); border-radius:calc(22* var(--unit));}
.list_period dd {text-align:left;}
.list_period dd strong {font-weight:700;}

/* 댓글 입력 */
.comment_box {padding:var(--size-40); margin-top:var(--size-50); background:#fff;}
.comment_box .sel_list {display:flex; flex-wrap:wrap; gap:var(--size-30);}
.comment_box .sel_list li {flex:1 1 40%;}
.comment_box .sel_list label {display:flex; align-items:center; line-height:1; font-size:calc(28* var(--unit)); font-weight:700; color:#222;}

.comment_box .text_area {margin:var(--size-40) 0 var(--size-30);}
.comment_box .text_area > p {font-size:clamp(12px, 2.11vw, 16px); font-weight:400; color:#3F3F3F;}
.comment_box .txtarea_wrap + p {margin-top:1.58vw;}
.comment_box .txtarea_wrap {display:flex; height:calc(140* var(--unit));}
.comment_box .txtarea_wrap textarea {flex:1; resize:none; height:100%; background:#F1F1F1; border:1px solid #222; border-radius:0;}
.comment_box .txtarea_wrap textarea::placeholder {font-size:14px; font-weight:500; color:#8f8f8f;}
.comment_box .txtarea_wrap button {width:calc(150* var(--unit)); height:100%; line-height:4.47vw; font-size:3.68vw; font-weight:600; color:#fff; background:#222;}

.comment_box .board_pagination {margin-bottom:0;}
.comment_box .reply_list td {padding:calc(18* var(--unit)); line-height:1.25; font-size:calc(22* var(--unit)); border-top:1px solid #ddd;}
.comment_box .reply_list td.name {font-weight:600; text-align:center;}
.comment_box .reply_list td.cont {text-align:left;}


.comment_box table {table-layout:fixed;}
.comment_box table td.cont {text-align:left; word-break:break-all; overflow-wrap:break-word;}
.comment_box table .subject {display:flex; justify-content:center; align-items:center; width:calc(230* var(--unit)); height:var(--size-30); margin-bottom:var(--size-10); font-size:var(--size-20); font-weight:500; border:1px solid #0000bd;}
.comment_box table .subject.t1 {color:#0000bd; border-color:#0000bd;}
.comment_box table .subject.t2 {color:#0067e8; border-color:#0067e8;}
.comment_box table .subject.t3 {color:#008c59; border-color:#008c59;}
.comment_box table .subject.t4 {color:#777; border-color:#777;}
.comment_box .board_pagination {margin-bottom:0;}

/* noticeWrap */
.noticeWrap {width:auto; margin-top:10.13vw;}
.noticeWrap_title {display:block; margin:0 auto; padding:0.8rem 0 0.7rem; background:rgba(0, 0, 0, 0.3); font-size:4.2vw; font-weight:normal; text-align:center; cursor:pointer;}
.noticeWrap_title.sub {margin-bottom:0.5rem; padding:0; background:none; font-weight:bold; font-size:3.6vw; color:#3f3f3f; text-align:left;}
.noticeWrap_list + .noticeWrap_title {margin-top:5vw;}
.noticeWrap_txt {display:inline-block; position:relative; padding:0 1rem 0 0; font-weight:bold; color: #fff;}
.noticeWrap_txt:before {position:absolute; right:-2vw; top:50%; z-index:3; font-size:calc(100% - 1vw); content:"▼"; transform: translateY(-50%);}
.noticeWrap.on .noticeWrap_txt:before {content: "▲";}
.noticeWrap_inner {display:none; margin: 0; padding: 1rem; background: #fff;}
.noticeWrap_item {margin-top:2.63vw;}
.noticeWrap_item:first-child {margin-top:0;}
.noticeWrap_list {position: relative;}
.notice_item {position: relative; padding: 0 0 0 0.7rem; margin-bottom: 0.2rem; font-size:3.2vw; line-height: 1.4; letter-spacing: -0.5px; color: #3f3f3f; word-break: keep-all; word-wrap: break-word;}
.notice_item:before {position: absolute; left: 0; top: 0; z-index: 3; content: "-";}
.notice_link {display: inline-block; font-weight:bold; font-size:inherit; color:#2D65E8; text-decoration:underline;}
.notice_item .highlight {color:#5B771F;}