@charset "UTF-8";
*{font-family:'Pretendard', sans-serif;}
.inner{position:relative; margin:0 auto; width:1200px;}
.ico-class-flag{width:30px; height:23px; background:url('/resources/images/classContest/ico_flag.png') no-repeat center;}
.ico-class-flag_b{width:30px; height:23px; background:url('/resources/images/classContest/ico_flag_b.png') no-repeat center;}
.ico-class-flag_w{width:20px; height:15px; background:url('/resources/images/classContest/ico_flag_w.png') no-repeat center;}

header{position:fixed; left:0; right:0; top:0; z-index:1000}
header .header_wrap{margin:0 auto; max-width:1200px; height:80px; display:flex; justify-content:flex-end; align-items:center;}
header .logo{display:block; width:103px; height:15px; background:url('/resources/images/classContest/logo_vivasam_w_103x15_2x.png') no-repeat center / contain;}
header.ty2.main{background:rgba(17, 17, 17, 0.2); backdrop-filter:blur(6px);}
header.ty2.sub{background:rgba(0, 0, 0, 0.9); backdrop-filter:blur(10px);}
header.ty2 .header_wrap{padding:0 40px; max-width:100%; justify-content:space-between;}
header.ty2 .logo{width:314px; height:18px; background:url('/resources/images/classContest/logo_contest.png') no-repeat center;}
header.ty2 .btnss{display:flex; align-items:center; gap:12px;}
header.ty2 .btnss .btn{padding:0 15px; display:inline-flex; gap:8px; align-items:center; font-size:15px; color:#fff; font-weight:700; line-height:38px; border:1px solid #fff; border-radius:40px;}
header.ty2 .btnss .btn.ty2{background:#15A3F8; border-color:#15A3F8;}

.main_visual{position:relative; height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#111; text-align:center; overflow:hidden;}
.main_visual .intro-obj-wrap{position:absolute; left:0; top:0; right:0; bottom:0; z-index:1;}
.main_visual .intro-obj-wrap canvas{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width:100%; height:100dvh;}
.main_visual .main_tit{position:relative; z-index:1;}
.main_visual .main_desc{position:relative; margin-top:40px; z-index:1;}
.main_visual .main_desc .txt{font-size:22px; color:#CCC; font-weight:700; line-height:1.6;}
.main_visual .main_desc .txt.ty2{margin-top:10px; font-weight:600; color:#fff;}
.main_visual .main_desc h2{display:flex; align-items:center; justify-content:center; gap:6px;}
.main_visual .main_desc h2 span{font-size:64px; color:#fff; font-weight:800; line-height:1;}
.main_visual .main_desc h2 em{width:6px; height:45px; background:url('/resources/images/classContest/intro/colon.png') no-repeat center;}
.main_visual .main_desc .badge{margin-top:32px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 32px; font-size:22px; color:#111; font-weight:800; line-height:60px; background:#3ACAFF; border-radius:100px;}

.main_visual .obj_bar{position:absolute; height:8px; animation-delay:2s;}
.main_visual .obj_bar:after{content:''; position:absolute; top:-5px; bottom:-5px; background:#111;}
.main_visual .obj_bar.bar1{right:816px; bottom:552px; transform-origin:center right; transform:rotate(40deg); background:#FFE343; }
.main_visual .obj_bar.bar1:after{right:-5px;}
.main_visual .obj_bar.bar2{right:1000px; bottom:423px; transform-origin:center right; transform:rotate(10deg); background:#F2512B;}
.main_visual .obj_bar.bar2:after{right:-5px;}
.main_visual .obj_bar.bar3{right:950px; top:390px; transform-origin:center right; transform:rotate(-30deg); background:#00A586;}
.main_visual .obj_bar.bar3:after{right:-5px;}
.main_visual .obj_bar.bar4{left:976px; bottom:432px; transform-origin:center left; transform:rotate(-30deg); background:#4E94F6;}
.main_visual .obj_bar.bar4:after{left:-5px;}
.main_visual .obj_bar.bar5{left:928px; top:406px; transform-origin:center left; transform:rotate(30deg); background:#8245DA;}
.main_visual .obj_bar.bar5:after{left:-5px;}
.ani_extend{animation:aniExtend infinite 4s linear;}
.ani_extend:after{animation:aniExtendAfter infinite 4s 2s linear;}
@keyframes aniExtend{
  0%{width:0;}
  50%{width:100dvh;}
  100%{width:100dvh;}
}
@keyframes aniExtendAfter{
  50%{width:0;}
  100%{width:100dvh;}
}

.main_visual.ty2 .obj_bar.bar1{right:817px; bottom:454px;}
.main_visual.ty2 .obj_bar.bar2{right:930px; bottom:404px;}
.main_visual.ty2 .obj_bar.bar3{right:867px; top:277px;}
.main_visual.ty2 .obj_bar.bar4{left:882px; bottom:404px;}
.main_visual.ty2 .obj_bar.bar5{left:934px; top:280px;}
.main_visual.ty2 .main_desc{margin-top:34px;}
.main_visual.ty2 .main_desc h2{display:block; font-size:28px; color:#fff; font-weight:700; line-height:1.3;}
.main_visual.ty2 .main_desc h2 span{display:block; font:inherit; color:#0091E8;}
.main_visual.ty2 .main_desc .txt{margin-top:8px; font-size:20px; color:#AAA; font-weight:400; line-height:1.3;}
.main_visual.ty2 .main_desc .badge{margin-top:48px; padding:0 24px; background:#FFE343;}

footer {width:100%; padding:48px 0 80px; background:#0B0B0E;}
footer .footer_wrap {display:flex; width:1200px; margin:0 auto;}
footer .footer_wrap h2 {margin-right:40px;}
footer .footer_wrap .info {text-align:left;}
footer .footer_wrap .info ul {display:flex; margin-bottom:20px;}
footer .footer_wrap .info ul li {position:relative; padding-right:12px; padding-left:12px;}
footer .footer_wrap .info ul li:first-child {padding-left:0;}
footer .footer_wrap .info ul li:after {content:""; display:block; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:12px; background-color:#8b8989; }
footer .footer_wrap .info ul li:last-child:after {display:none;}
footer .footer_wrap .info ul li a {font-size:18px; color:#777; font-weight:700; line-height:1.6;}
footer .footer_wrap .info span { position:relative; color:#777; font-size:16px;font-weight:400; line-height:1.6;}
footer .footer_wrap .info span a {font:inherit; color:inherit;}
footer .footer_wrap .info p {font-size:13px; color:#777; line-height:1.6;}

main{position:relative; padding:56px 0 60px; background:#17181D;}

.section-nav{position:sticky; top:90px; text-align:center; z-index:1;}
.section-nav nav{display:inline-flex; align-items:center; justify-content:center; border-radius:100px; background:#2C2D33;}
.section-nav nav a{width:100px; color:rgba(255,255,255,.3); font-size:18px; font-weight:700; line-height:48px; border-radius:100px;}
.section-nav nav a.on{color:#17181D; background:#fff;}
.sec{padding:60px 0; opacity:0; transform:translateY(20px); transition:opacity 0.6s ease, transform 0.6s ease;}
.sec.visible{opacity:1; transform:translateY(0);}
.sec .title{padding-bottom:48px; font-size:56px; color:#fff; font-weight:800; line-height:1.2; text-align:center;}
.sec .title_wrap{padding-bottom:40px;}
.sec .title_wrap h3{font-size:48px; color:#fff; font-weight:800; line-height:1.3;}
.sec .title_wrap p{font-size:22px; color:#AAA; font-weight:600; line-height:1.6;}
.sec .title_wrap p span{font:inherit; font-weight:800; color:#FFE343;}

.sec1 .item-list{display:flex; gap:20px 16px; flex-wrap:wrap;}
.sec1 .item-list .item{position:relative; padding:40px; flex:1 0 calc(33.33% - 32px/3); height:430px; border-radius:16px; background:#2D2F38;}
.sec1 .item-list .item b{font-size:32px; color:#fff; font-weight:700; line-height:1.4;}
.sec1 .item-list .item p{margin-top:16px; font-size:20px; color:#E2E4FF; font-weight:500; line-height:1.4; letter-spacing:-.04em;}
.sec1 .item-list .item p span{font:inherit; font-weight:700; color:#69A7FF;}
.sec1 .item-list .item .icon{position:absolute; right:40px; bottom:40px;}
.sec1 .item-list .item.ty2{padding:56px; flex:1 0 100%; height:auto; background:#5547FF;}
.sec1 .item-list .item.ty2 b{text-decoration:underline; text-underline-position:under;}
.sec1 .item-list .item.ty2 p{margin-top:24px; color:rgba(255,255,255,.7);}
.sec1 .item-list .item.ty2 .icon{right:63px; bottom:0;}

.dashboard .dash-wrap{display:flex; gap:16px;}
.dashboard .dash-box{position:relative; padding:40px 56px; flex:1; background:#373741; border-radius:16px;}
.dashboard .dash-box b{font-size:20px; color:#8B8B9F; font-weight:700; line-height:1.4;}
.dashboard .dash-box p{font-size:56px; color:#FFF; font-weight:700; line-height:1.2;}
.dashboard .dash-box p span{font:inherit; color:inherit;}
.dashboard .dash-box .icon{position:absolute; right:38px; bottom:0;}
.dashboard .dash-box.ty2{padding:0; display:flex; gap:1px; background:#2D2F38;}
.dashboard .dash-box.ty2 .dash-item{position:relative;flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;}
.dashboard .dash-box.ty2 .dash-item+.dash-item:before{content:''; position:absolute; left:-1px; top:50%; transform:translateY(-50%); width:1px; height:127px; background:#464652;}
.dashboard .dash-box.ty2 .dash-item p{font-size:26px;}
.dashboard .dash-box.ty2 .dash-item .icon{position:static; margin-bottom:20px;}

.prize-item-list{margin-bottom:16px; display:flex; gap:16px; flex-wrap:wrap;}
.prize-item-list .item{position:relative; padding:45px 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:40px; text-align:center; border-radius:16px; background:#282A32; border:1px solid #4D4D5C;}
.prize-item-list .item.row2{flex:1 0 calc(50% - 16px);}
.prize-item-list .item.row3{flex:1 0 calc(33.33% - 32px/3);}
.prize-item-list .item .desc .badge{margin-bottom:8px; padding:0 30px; display:inline-block; font-size:26px; color:#FFF; font-weight:700; line-height:72px; border-radius:50px; background:#000;}
.prize-item-list .item .desc p{font-size:24px; color:#FFF; font-weight:700; line-height:1.3;}
.prize-item-list .item .desc p.ty2{color:#8389A2;}
.prize-item-list .item .desc b{display:block; font-size:40px; color:#15A3F8; font-weight:700;}
.prize-item-list .item.row3 .desc b{font-size:30px;}
.prize-item-list .item.trophy{padding:56px 0;}
.prize-item-list .item.trophy b{font-size:56px; color:#FFF; font-weight:800;}
.prize-item-list .item.trophy.prize-1st{background:#A28157; border-color:#A28157;}
.prize-item-list .item.trophy.prize-2nd{background:#454A65; border-color:#454A65;}
.prize-item-list .item.trophy.prize-3rd{background:#655851; border-color:#655851;}
.prize-item-list .item .info-layer-wrap{position:absolute; top:15px; right:15px;}
.prize-item-list .item .info-layer-wrap .ico_info{display:block; width:24px; height:24px; background:url('/resources/images/classContest/ico_info.png') no-repeat center;}
.prize-item-list .item .info-layer-wrap .info-layer{display:none; position:absolute; bottom:calc(100% + 8px); right:-30px; padding:12px; background:#0091E8; border-radius:8px;}
.prize-item-list .item .info-layer-wrap .info-layer:after{content:''; position:absolute; top:100%; right:30px; width:24px; height:15px; background:url('/resources/images/classContest/ico_tooltip_obj.png') no-repeat center;}
.prize-item-list .item .info-layer-wrap .info-layer p{font-size:16px; color:#FFF; font-weight:600; line-height:1.6; text-align:left; white-space:nowrap;}
.prize-item-list .item .info-layer-wrap:hover .info-layer{display:block;}
.sec2 dl{display:flex; justify-content:space-between; align-items:center; height:100px; border-bottom:1px solid #373741;}
.sec2 dl dt{color:#8389A2;}
.sec2 dl dd{color:#15A3F8;}
.sec2 dl p{font-size:28px; color:inherit; font-weight:700; line-height:1.3;}

.sec3 .info_wrap{border-radius:16px; overflow:hidden;}
.sec3 .info_wrap dt{padding:20px 32px; font-size:22px; color:#15A3F8; font-weight:700; background:#282A32;}
.sec3 .info_wrap dd{padding:32px; background:#373741;}
.sec3 .info_wrap dd p{font-size:18px; color:#fff; font-weight:500; line-height:1.6;}
.sec3 .info_wrap dd p.ex{margin-top:16px; display:flex; gap:16px; align-items:center; color:#A4DCFF;}
.sec3 .info_wrap dd p.ex .badge{width:60px; font-size:14px; color:#fff; font-weight:700; line-height:32px; text-align:center; background:#0091E8; border-radius:50px;}
.sec3 .info_list_wrap{margin-top:24px; display:flex; gap:8px;}
.sec3 .info_list_wrap li{padding:24px; flex:1; height:272px; border-radius:16px; background:#282A32;}
.sec3 .info_list_wrap li:hover{background:#5547FF;}
.sec3 .info_list_wrap li .badge{display:inline-block; padding:0 16px; font-size:16px; color:#fff; font-weight:700; line-height:40px; background:#000; border-radius:40px;}
.sec3 .info_list_wrap li p{margin-top:24px; font-size:18px; color:#fff; font-weight:700; line-height:1.3;}

.sec3 .step_wrap{position:relative; margin-top:64px;}
.sec3 .step_bg{position:absolute; left:248px; top:79px; width:93px; height:1144px; background:url('/resources/images/classContest/main/sec3_load.png') no-repeat center;}
.sec3 .step_item{padding:60px 0 60px 40px; display:flex; gap:24px; border-bottom:1px solid #373741;}
.sec3 .step_item .period{position:relative; width:336px;}
.sec3 .step_item .period span{display:inline-flex; justify-content:center; width:165px; font-size:20px; color:#fff; font-weight:700; line-height:48px; border-radius:50px; border:1px solid #000; background:#000;}
.sec3 .step_item .desc{position:relative; flex:1;}
.sec3 .step_item .desc .ico_line{position:absolute; top:25px; right:calc(100% + 24px); width:61px; height:3px; background:#FF570E;}
.sec3 .step_item .desc .ico_line.short2{width:56px;}
.sec3 .step_item .desc .ico_line.long{width:119px;}
.sec3 .step_item .desc .ico_line:before,
.sec3 .step_item .desc .ico_line:after{content:''; position:absolute; top:50%; transform:translateY(-50%); width:12px; height:12px; background:#FF570E; border-radius:50%;}
.sec3 .step_item .desc .ico_line:before{left:0;}
.sec3 .step_item .desc .ico_line:after{right:0;}
.sec3 .step_item .desc h3{margin-bottom:16px; display:flex; align-items:center; gap:8px; font-size:24px; color:#fff; font-weight:700;}
.sec3 .step_item .desc h3.mb20{margin-bottom:20px;}
.sec3 .step_item .desc h3 i{width:40px; height:40px; background-repeat:no-repeat; background-position:center;}
.sec3 .step_item .desc h3 i.ico_step1{background-image:url('/resources/images/classContest/main/sec3_ico1.png');}
.sec3 .step_item .desc h3 i.ico_step2{background-image:url('/resources/images/classContest/main/sec3_ico2.png');}
.sec3 .step_item .desc h3 i.ico_step3{background-image:url('/resources/images/classContest/main/sec3_ico3.png');}
.sec3 .step_item .desc h3 i.ico_step4{background-image:url('/resources/images/classContest/main/sec3_ico4.png');}
.sec3 .step_item .desc h3 i.ico_step5{background-image:url('/resources/images/classContest/main/sec3_ico5.png');}
.sec3 .step_item .desc p{padding-left:44px; font-size:18px; color:#8389A2; font-weight:600; line-height:29px;}
.sec3 .step_item .desc .btnss{margin-top:20px; padding-left:44px; display:flex; gap:12px; }
.sec3 .step_item .desc .btnss button{padding:0 15px; height:40px; display:inline-flex; align-items:center; gap:8px; font-size:14px; color:#fff; font-weight:700; border-radius:40px; border:1px solid #fff; background:transparent;}
.sec3 .step_item .desc .btnss button i{width:9px; height:14px; background:url('/resources/images/classContest/arr_right_w.png') no-repeat center;}
.sec3 .step_item .desc .btnss .btn_info{background:#0091E8; border-color:#0091E8;}

.sec3 .step_item.active{background:rgba(255, 87, 14, 0.1);}
.sec3 .step_item.active .period span{background:#FF570E;}